Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/shared/components/number-input/number-input.module.css

@@ -0,0 +1,46 @@
+.root {
+    transition: width 0.3s ease-in-out;
+
+    &[data-disabled='true'] {
+        opacity: 0.6;
+    }
+}
+
+.input {
+    width: 100%;
+    border: 1px solid transparent;
+
+    &[data-variant='default'] {
+        color: var(--theme-colors-surface-foreground);
+        background: var(--theme-colors-surface);
+    }
+
+    &[data-variant='filled'] {
+        color: var(--theme-colors-foreground);
+        background: var(--theme-colors-background);
+    }
+}
+
+.input:focus,
+.input:focus-visible {
+    border-color: lighten(var(--theme-colors-border), 10%);
+}
+
+.control {
+    svg {
+        color: var(--theme-btn-default-fg);
+        fill: var(--theme-btn-default-fg);
+    }
+}
+
+.section {
+    color: var(--theme-colors-foreground-muted);
+}
+
+.required {
+    color: var(--theme-colors-state-error);
+}
+
+.label {
+    margin-bottom: var(--theme-spacing-sm);
+}

src/shared/components/number-input/number-input.tsx

@@ -0,0 +1,51 @@
+import {
+    NumberInput as MantineNumberInput,
+    NumberInputProps as MantineNumberInputProps,
+} from '@mantine/core';
+import { CSSProperties, forwardRef } from 'react';
+
+import styles from './number-input.module.css';
+
+export interface NumberInputProps extends MantineNumberInputProps {
+    maxWidth?: CSSProperties['maxWidth'];
+    width?: CSSProperties['width'];
+}
+
+export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
+    (
+        {
+            children,
+            classNames,
+            maxWidth,
+            size = 'sm',
+            style,
+            variant = 'default',
+            width,
+            ...props
+        }: NumberInputProps,
+        ref,
+    ) => {
+        return (
+            <MantineNumberInput
+                classNames={{
+                    control: styles.control,
+                    input: styles.input,
+                    label: styles.label,
+                    required: styles.required,
+                    root: styles.root,
+                    section: styles.section,
+                    wrapper: styles.wrapper,
+                    ...classNames,
+                }}
+                hideControls
+                ref={ref}
+                size={size}
+                style={{ maxWidth, width, ...style }}
+                variant={variant}
+                {...props}
+            >
+                {children}
+            </MantineNumberInput>
+        );
+    },
+);