@taiv/ui 1.13.0 → 1.14.1

package/dist/components/Inputs/Dropdowns/shared/sizes.js

@@ -1,33 +1,33 @@
 import { inputFontSize } from '../../../../constants/font';
 export const componentSizes = {
     sm: {
-        height: 3.2,
+        height: 32,
         ...inputFontSize['sm'],
-        inputPadding: '0.25rem 2rem 0.25rem 1rem',
-        dropdownPadding: '0.5rem 1rem',
-        valuePadding: '1rem 0.8rem 1rem 1rem',
-        minWidth: 18,
-        maxWidth: 25,
+        inputPadding: '2.5px 20px 2.5px 10px',
+        dropdownPadding: '5px 10px',
+        valuePadding: '10px 8px 10px 10px',
+        minWidth: 180,
+        maxWidth: 250,
         dropdownHeight: 260,
     },
     md: {
-        height: 3.8,
+        height: 38,
         ...inputFontSize['md'],
-        inputPadding: '0.5rem 2.25rem 0.5rem 1rem',
-        dropdownPadding: '0.75rem 1.125rem',
-        valuePadding: '1.25rem 1rem 1.25rem 1.25rem',
-        minWidth: 22,
-        maxWidth: 32.8,
+        inputPadding: '5px 22.5px 5px 10px',
+        dropdownPadding: '7.5px 11.25px',
+        valuePadding: '12.5px 10px 12.5px 12.5px',
+        minWidth: 220,
+        maxWidth: 328,
         dropdownHeight: 330,
     },
     lg: {
-        height: 4.8,
+        height: 48,
         ...inputFontSize['lg'],
-        inputPadding: '0.75rem 2.5rem 0.75rem 1rem',
-        dropdownPadding: '1rem 1.5rem',
-        valuePadding: '1.25rem 1rem 1.25rem 1.25rem',
-        minWidth: 30,
-        maxWidth: 42,
+        inputPadding: '7.5px 25px 7.5px 10px',
+        dropdownPadding: '10px 15px',
+        valuePadding: '12.5px 10px 12.5px 12.5px',
+        minWidth: 300,
+        maxWidth: 420,
         dropdownHeight: 385,
     },
 };

package/dist/components/Inputs/Sliders/Slider/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Sliders/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAa,MAAM,eAAe,CAAC;AAItG,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;CACxC;AAED,QAAA,MAAM,MAAM,GAAI,kGAAyI,WAAW,4CA8FnK,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Sliders/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAa,MAAM,eAAe,CAAC;AAKtG,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;CACxC;AAED,QAAA,MAAM,MAAM,GAAI,kGAAyI,WAAW,4CA8FnK,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/Inputs/Sliders/Slider/Slider.js

@@ -3,17 +3,18 @@ import { Slider as MantineSlider } from '@mantine/core';
 import { useHover } from '@mantine/hooks';
 import { neutral, primary } from '../../../../constants/colors';
 import { fontBase, textStyle } from '../../../../constants/font';
+import { spacing } from '../../../../constants/spacing';
 import { componentSizes } from '../shared/sizes';
 const Slider = ({ width, size = 'md', value, setValue, disabled = false, styles, animate = false, label, fullWidth = false, compact = false, ...props }) => {
     const { hovered, ref } = useHover();
     const sliderColor = disabled ? neutral[100] : primary[200];
     const selectedSize = componentSizes[size];
-    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}rem`;
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}px`;
     const wrapperStyle = {
         container: {
             width: fullWidth ? '100%' : 'auto',
             display: 'flex',
-            gap: '1rem',
+            gap: '10px',
             alignItems: 'center',
         },
         label: {
@@ -30,23 +31,23 @@ const Slider = ({ width, size = 'md', value, setValue, disabled = false, styles,
             whiteSpace: 'nowrap',
             flexShrink: 0,
             textAlign: 'right',
-            minWidth: '2rem',
+            minWidth: '20px',
         },
         sliderContainer: {
             display: 'flex',
             alignItems: 'center',
-            gap: '1rem',
+            gap: '10px',
             flex: fullWidth ? 1 : 'none',
         },
     };
     const sliderStyle = {
         root: {
             flex: 1,
-            minWidth: '10rem',
+            minWidth: '100px',
         },
         thumb: {
-            width: `${selectedSize.thumbSize}rem`,
-            height: `${selectedSize.thumbSize}rem`,
+            width: `${selectedSize.thumbSize}px`,
+            height: `${selectedSize.thumbSize}px`,
             backgroundColor: sliderColor,
             borderColor: sliderColor,
             boxShadow: '0 2px 2px rgba(0,0,0,0.2)',
@@ -57,22 +58,22 @@ const Slider = ({ width, size = 'md', value, setValue, disabled = false, styles,
             cursor: disabled ? 'default' : 'pointer',
         },
         track: {
-            height: `${selectedSize.trackHeight}rem`,
+            height: `${selectedSize.trackHeight}px`,
             backgroundColor: sliderColor,
         },
         bar: {
-            height: `${selectedSize.trackHeight}rem`,
+            height: `${selectedSize.trackHeight}px`,
             backgroundColor: sliderColor,
         },
         marksContainer: {
-            height: `${selectedSize.trackHeight}rem`,
+            height: `${selectedSize.trackHeight}px`,
         },
         mark: {
-            width: '0.7rem',
-            height: '0.7rem',
+            width: '7px',
+            height: '7px',
             borderColor: neutral[50],
             backgroundColor: neutral[50],
-            transform: 'translateY(-0.15rem) translateX(-0.2rem)',
+            transform: 'translateY(-1.5px) translateX(-2px)',
         },
         markFilled: {
             borderColor: sliderColor,
@@ -81,7 +82,7 @@ const Slider = ({ width, size = 'md', value, setValue, disabled = false, styles,
         markLabel: {
             ...textStyle['caption'],
             color: disabled ? neutral[100] : neutral[200],
-            marginTop: '0.4rem',
+            marginTop: spacing.xs,
             textAlign: 'center',
         },
         ...styles,

package/dist/components/Inputs/Sliders/VolumeSlider/VolumeSlider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VolumeSlider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Sliders/VolumeSlider/VolumeSlider.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAU,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGvD,UAAU,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;CAAG;AAEjE,QAAA,MAAM,YAAY,GAAI,wCAA+D,iBAAiB,4CAmCrG,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"VolumeSlider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Sliders/VolumeSlider/VolumeSlider.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAU,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGvD,UAAU,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;CAAG;AAEjE,QAAA,MAAM,YAAY,GAAI,wCAA+D,iBAAiB,4CAmCrG,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/Inputs/Sliders/VolumeSlider/VolumeSlider.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconVolume, IconVolume2, IconVolume3 } from '@tabler/icons-react';
 import { neutral } from '../../../../constants/colors';
+import { spacing } from '../../../../constants/spacing';
 import { Slider } from '../Slider/Slider';
 import { componentSizes } from '../shared/sizes';
 const VolumeSlider = ({ compact = false, size = 'md', fullWidth = false, ...props }) => {
@@ -19,16 +20,16 @@ const VolumeSlider = ({ compact = false, size = 'md', fullWidth = false, ...prop
         container: {
             display: 'flex',
             alignItems: 'center',
-            gap: '1rem',
+            gap: '10px',
             width: fullWidth ? '100%' : 'auto',
-            padding: '0.5rem 0',
+            padding: `${spacing.xs} 0`,
         },
         iconContainer: {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            width: `${selectedSize.iconSize / 10}rem`, // Based on 10px root font
-            height: `${selectedSize.iconSize / 10}rem`,
+            width: `${selectedSize.iconSize}px`,
+            height: `${selectedSize.iconSize}px`,
             flexShrink: 0,
         },
     };

package/dist/components/Inputs/Sliders/shared/sizes.d.ts

@@ -1,8 +1,8 @@
 export declare const componentSizes: {
     readonly sm: {
-        readonly width: 20;
-        readonly trackHeight: 0.4;
-        readonly thumbSize: 1;
+        readonly width: 200;
+        readonly trackHeight: 4;
+        readonly thumbSize: 10;
         readonly labelFontSize: {
             fontSize: string;
             lineHeight: string;
@@ -14,9 +14,9 @@ export declare const componentSizes: {
         readonly iconSize: 18;
     };
     readonly md: {
-        readonly width: 30;
-        readonly trackHeight: 0.5;
-        readonly thumbSize: 1.25;
+        readonly width: 300;
+        readonly trackHeight: 5;
+        readonly thumbSize: 12.5;
         readonly labelFontSize: {
             fontSize: string;
             lineHeight: string;
@@ -28,9 +28,9 @@ export declare const componentSizes: {
         readonly iconSize: 22;
     };
     readonly lg: {
-        readonly width: 40;
-        readonly trackHeight: 0.6;
-        readonly thumbSize: 1.5;
+        readonly width: 400;
+        readonly trackHeight: 6;
+        readonly thumbSize: 15;
         readonly labelFontSize: {
             fontSize: string;
             lineHeight: string;

package/dist/components/Inputs/Sliders/shared/sizes.js

@@ -1,25 +1,25 @@
 import { inputFontSize } from '../../../../constants/font';
 export const componentSizes = {
     sm: {
-        width: 20,
-        trackHeight: 0.4,
-        thumbSize: 1,
+        width: 200,
+        trackHeight: 4,
+        thumbSize: 10,
         labelFontSize: inputFontSize['sm'],
         valueFontSize: inputFontSize['sm'],
         iconSize: 18,
     },
     md: {
-        width: 30,
-        trackHeight: 0.5,
-        thumbSize: 1.25,
+        width: 300,
+        trackHeight: 5,
+        thumbSize: 12.5,
         labelFontSize: inputFontSize['md'],
         valueFontSize: inputFontSize['md'],
         iconSize: 22,
     },
     lg: {
-        width: 40,
-        trackHeight: 0.6,
-        thumbSize: 1.5,
+        width: 400,
+        trackHeight: 6,
+        thumbSize: 15,
         labelFontSize: inputFontSize['lg'],
         valueFontSize: inputFontSize['lg'],
         iconSize: 26,

package/dist/components/Inputs/TextInputs/AutoComplete/AutoComplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutoComplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/AutoComplete/AutoComplete.tsx"],"names":[],"mappings":"AACA,OAAO,EAAuC,iBAAiB,IAAI,wBAAwB,EAAE,MAAM,eAAe,CAAC;AACnH,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,iBAAkB,SAAQ,wBAAwB;IACjE,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,YAAY,GAAI,2DAA+F,iBAAiB,4CA4D5I,CAAC"}
+{"version":3,"file":"AutoComplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/AutoComplete/AutoComplete.tsx"],"names":[],"mappings":"AACA,OAAO,EAAuC,iBAAiB,IAAI,wBAAwB,EAAE,MAAM,eAAe,CAAC;AACnH,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,iBAAkB,SAAQ,wBAAwB;IACjE,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,YAAY,GAAI,2DAA+F,iBAAiB,4CA4D5I,CAAC"}

package/dist/components/Inputs/TextInputs/AutoComplete/AutoComplete.js

@@ -2,13 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Autocomplete as MantineAutocomplete } from '@mantine/core';
 import { neutral, red } from '../../../../constants/colors';
 import { fontBase } from '../../../../constants/font';
+import { spacing } from '../../../../constants/spacing';
 import { componentSizes } from '../../Dropdowns/shared/sizes';
 export const AutoComplete = ({ size = 'md', width, fullWidth = false, placeholder = 'Select an option', styles, ...props }) => {
     const selectedSize = componentSizes[size];
-    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.minWidth}rem`;
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.minWidth}px`;
     const style = {
         input: {
-            height: `${selectedSize.height}rem`,
+            height: `${selectedSize.height}px`,
             fontSize: selectedSize.fontSize,
             padding: selectedSize.inputPadding,
             ...fontBase,
@@ -25,7 +26,7 @@ export const AutoComplete = ({ size = 'md', width, fullWidth = false, placeholde
         },
         label: {
             ...fontBase,
-            fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+            fontSize: `calc(${selectedSize.fontSize} - 0.5px)`,
             color: neutral[200],
         },
         dropdown: {
@@ -35,7 +36,7 @@ export const AutoComplete = ({ size = 'md', width, fullWidth = false, placeholde
         },
         item: {
             padding: selectedSize.dropdownPadding,
-            marginBottom: '0.5rem',
+            marginBottom: spacing.xs,
             ...fontBase,
             fontSize: selectedSize.fontSize,
             color: neutral[200],

package/dist/components/Inputs/TextInputs/AutoComplete/AutoComplete.stories.js

@@ -127,7 +127,7 @@ export const Default = {
     },
 };
 export const Variants = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(AutoComplete, { label: "Basic AutoComplete", data: basicOptions }), _jsx(AutoComplete, { label: "With Placeholder", placeholder: "Search fruits...", data: basicOptions }), _jsx(AutoComplete, { label: "With Description", description: "Select your favorite fruit", data: basicOptions })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(AutoComplete, { label: "Basic AutoComplete", data: basicOptions }), _jsx(AutoComplete, { label: "With Placeholder", placeholder: "Search fruits...", data: basicOptions }), _jsx(AutoComplete, { label: "With Description", description: "Select your favorite fruit", data: basicOptions })] })),
     parameters: {
         docs: {
             source: {
@@ -137,7 +137,7 @@ export const Variants = {
     },
 };
 export const Sizes = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(AutoComplete, { size: "sm", label: "Small AutoComplete", data: basicOptions }), _jsx(AutoComplete, { size: "md", label: "Medium AutoComplete (Default)", data: basicOptions }), _jsx(AutoComplete, { size: "lg", label: "Large AutoComplete", data: basicOptions })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(AutoComplete, { size: "sm", label: "Small AutoComplete", data: basicOptions }), _jsx(AutoComplete, { size: "md", label: "Medium AutoComplete (Default)", data: basicOptions }), _jsx(AutoComplete, { size: "lg", label: "Large AutoComplete", data: basicOptions })] })),
     parameters: {
         docs: {
             source: {
@@ -148,7 +148,7 @@ export const Sizes = {
     },
 };
 export const States = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(AutoComplete, { label: "Normal AutoComplete", data: basicOptions }), _jsx(AutoComplete, { label: "Disabled AutoComplete", data: basicOptions, disabled: true }), _jsx(AutoComplete, { label: "Required AutoComplete", data: basicOptions, required: true }), _jsx(AutoComplete, { label: "AutoComplete with Description", description: "Please select an option", data: basicOptions }), _jsx(AutoComplete, { label: "AutoComplete with Error", error: "This field is required", data: basicOptions })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(AutoComplete, { label: "Normal AutoComplete", data: basicOptions }), _jsx(AutoComplete, { label: "Disabled AutoComplete", data: basicOptions, disabled: true }), _jsx(AutoComplete, { label: "Required AutoComplete", data: basicOptions, required: true }), _jsx(AutoComplete, { label: "AutoComplete with Description", description: "Please select an option", data: basicOptions }), _jsx(AutoComplete, { label: "AutoComplete with Error", error: "This field is required", data: basicOptions })] })),
     parameters: {
         docs: {
             source: {
@@ -158,7 +158,7 @@ export const States = {
     },
 };
 export const AdditionalFunctionality = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(AutoComplete, { label: "Country Search", data: countryOptions, placeholder: "Search countries..." }), _jsx(AutoComplete, { label: "Custom Width AutoComplete", width: "300px", data: basicOptions }), _jsx(AutoComplete, { label: "Large Dataset", data: Array.from({ length: 50 }, (_, i) => `Option ${i + 1}`), placeholder: "Search options..." })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(AutoComplete, { label: "Country Search", data: countryOptions, placeholder: "Search countries..." }), _jsx(AutoComplete, { label: "Custom Width AutoComplete", width: "300px", data: basicOptions }), _jsx(AutoComplete, { label: "Large Dataset", data: Array.from({ length: 50 }, (_, i) => `Option ${i + 1}`), placeholder: "Search options..." })] })),
     parameters: {
         docs: {
             source: {
@@ -182,7 +182,7 @@ export const AdditionalFunctionality = {
     },
 };
 export const CustomStyling = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(AutoComplete, { label: "Custom Styled AutoComplete", data: basicOptions, styles: {
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(AutoComplete, { label: "Custom Styled AutoComplete", data: basicOptions, styles: {
                     input: {
                         borderColor: '#ff6b6b',
                         '&:focus': {

package/dist/components/Inputs/TextInputs/NumberInput/NumberInput.js

@@ -5,13 +5,13 @@ import { fontBase } from '../../../../constants/font';
 import { componentSizes } from '../shared/sizes';
 const NumberInput = ({ size = 'md', width, fullWidth = false, styles, step = 1, ...props }) => {
     const selectedSize = componentSizes[size];
-    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}rem`;
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}px`;
     const hasError = !!props.error;
     const style = {
         input: {
-            height: `${selectedSize.height}rem`,
+            height: `${selectedSize.height}px`,
             fontSize: selectedSize.fontSize,
-            padding: '0 1rem',
+            padding: '0 10px',
             ...fontBase,
             color: neutral[200],
             transition: 'all 200ms ease-in-out',
@@ -28,19 +28,19 @@ const NumberInput = ({ size = 'md', width, fullWidth = false, styles, step = 1,
             height: 'auto',
             margin: 'auto 0',
             gap: 0,
-            width: '4.8rem',
+            width: '48px',
             alignItems: 'center',
         },
         control: {
             color: hasError ? red[200] : neutral[200],
             border: 'none',
             background: 'transparent',
-            width: '2rem',
-            height: '1.2rem',
+            width: '20px',
+            height: '12px',
             flex: '0 0 auto',
             '& svg': {
-                width: '2rem',
-                height: '1.2rem',
+                width: '20px',
+                height: '12px',
             },
             '&:hover': {
                 cursor: 'pointer',
@@ -48,12 +48,12 @@ const NumberInput = ({ size = 'md', width, fullWidth = false, styles, step = 1,
         },
         label: {
             ...fontBase,
-            fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+            fontSize: `calc(${selectedSize.fontSize} - 0.5px)`,
             color: neutral[200],
         },
         error: {
             ...fontBase,
-            fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+            fontSize: `calc(${selectedSize.fontSize} - 0.5px)`,
             color: red[200],
         },
         ...styles,

package/dist/components/Inputs/TextInputs/NumberInput/NumberInput.stories.js

@@ -151,7 +151,7 @@ export const Default = {
     },
 };
 export const Variants = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(NumberInput, { label: "Basic Number Input" }), _jsx(NumberInput, { label: "With Placeholder", placeholder: "Enter a value" }), _jsx(NumberInput, { label: "With Description", description: "Enter a value between 0 and 100", min: 0, max: 100 })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(NumberInput, { label: "Basic Number Input" }), _jsx(NumberInput, { label: "With Placeholder", placeholder: "Enter a value" }), _jsx(NumberInput, { label: "With Description", description: "Enter a value between 0 and 100", min: 0, max: 100 })] })),
     parameters: {
         docs: {
             source: {
@@ -161,7 +161,7 @@ export const Variants = {
     },
 };
 export const Sizes = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(NumberInput, { size: "sm", label: "Small Number Input", placeholder: "Small value" }), _jsx(NumberInput, { size: "md", label: "Medium Number Input (Default)", placeholder: "Medium value" }), _jsx(NumberInput, { size: "lg", label: "Large Number Input", placeholder: "Large value" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(NumberInput, { size: "sm", label: "Small Number Input", placeholder: "Small value" }), _jsx(NumberInput, { size: "md", label: "Medium Number Input (Default)", placeholder: "Medium value" }), _jsx(NumberInput, { size: "lg", label: "Large Number Input", placeholder: "Large value" })] })),
     parameters: {
         docs: {
             source: {
@@ -172,7 +172,7 @@ export const Sizes = {
     },
 };
 export const States = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(NumberInput, { label: "Normal Number Input" }), _jsx(NumberInput, { label: "Disabled Number Input", disabled: true }), _jsx(NumberInput, { label: "Required Number Input", required: true }), _jsx(NumberInput, { label: "Number Input with Description", description: "Please enter a numeric value" }), _jsx(NumberInput, { label: "Number Input with Error", error: "Value is required" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(NumberInput, { label: "Normal Number Input" }), _jsx(NumberInput, { label: "Disabled Number Input", disabled: true }), _jsx(NumberInput, { label: "Required Number Input", required: true }), _jsx(NumberInput, { label: "Number Input with Description", description: "Please enter a numeric value" }), _jsx(NumberInput, { label: "Number Input with Error", error: "Value is required" })] })),
     parameters: {
         docs: {
             source: {
@@ -182,7 +182,7 @@ export const States = {
     },
 };
 export const AdditionalFunctionality = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(NumberInput, { label: "Step of 1", placeholder: "Integer values", step: 1 }), _jsx(NumberInput, { label: "Step of 0.5", placeholder: "Decimal values", step: 0.5, precision: 1 }), _jsx(NumberInput, { label: "With Min/Max", placeholder: "Between 0 and 10", min: 0, max: 10, step: 1 }), _jsx(NumberInput, { label: "Custom Width", placeholder: "Custom width", width: "300rem" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(NumberInput, { label: "Step of 1", placeholder: "Integer values", step: 1 }), _jsx(NumberInput, { label: "Step of 0.5", placeholder: "Decimal values", step: 0.5, precision: 1 }), _jsx(NumberInput, { label: "With Min/Max", placeholder: "Between 0 and 10", min: 0, max: 10, step: 1 }), _jsx(NumberInput, { label: "Custom Width", placeholder: "Custom width", width: "3000px" })] })),
     parameters: {
         docs: {
             source: {
@@ -209,7 +209,7 @@ export const AdditionalFunctionality = {
     },
 };
 export const CustomStyling = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(NumberInput, { label: "Custom Styled Number Input", styles: {
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(NumberInput, { label: "Custom Styled Number Input", styles: {
                     input: {
                         borderColor: '#ff6b6b',
                         '&:focus': {

package/dist/components/Inputs/TextInputs/PasswordInput/PasswordInput.js

@@ -11,16 +11,16 @@ const mantineSize = {
 };
 const PasswordInput = ({ size = 'md', width, fullWidth = false, styles, placeholder = 'Enter password', ...props }) => {
     const selectedSize = componentSizes[size];
-    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}rem`;
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}px`;
     const style = {
         input: {
             ...fontBase,
             color: neutral[200],
             transition: 'all 200ms ease-in-out',
             borderRadius: '8px',
-            height: `${selectedSize.height}rem`,
+            height: `${selectedSize.height}px`,
             fontSize: selectedSize.fontSize,
-            padding: '0 1rem',
+            padding: '0 10px',
             '&[data-invalid]': {
                 borderColor: red[200],
                 '&::placeholder': {
@@ -31,19 +31,19 @@ const PasswordInput = ({ size = 'md', width, fullWidth = false, styles, placehol
         label: {
             ...fontBase,
             color: neutral[200],
-            fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+            fontSize: `calc(${selectedSize.fontSize} - 0.5px)`,
         },
         error: {
             ...fontBase,
-            fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+            fontSize: `calc(${selectedSize.fontSize} - 0.5px)`,
             color: red[200],
         },
         innerInput: {
             ...fontBase,
             color: neutral[200],
-            height: `${selectedSize.height}rem`,
+            height: `${selectedSize.height}px`,
             fontSize: selectedSize.fontSize,
-            padding: '0 1rem',
+            padding: '0 10px',
             '&[data-invalid]': {
                 color: neutral[200],
                 '&::placeholder': {
@@ -53,7 +53,7 @@ const PasswordInput = ({ size = 'md', width, fullWidth = false, styles, placehol
         },
         visibilityToggle: {
             color: neutral[200],
-            marginRight: '1.25rem',
+            marginRight: '12.5px',
             '&:hover': {
                 backgroundColor: 'transparent',
             },

package/dist/components/Inputs/TextInputs/PasswordInput/PasswordInput.stories.js

@@ -138,7 +138,7 @@ export const Default = {
     },
 };
 export const Variants = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(PasswordInput, { label: "Basic Password Input" }), _jsx(PasswordInput, { label: "With Placeholder", placeholder: "Enter your password" }), _jsx(PasswordInput, { label: "With Description", description: "Password must be at least 8 characters" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(PasswordInput, { label: "Basic Password Input" }), _jsx(PasswordInput, { label: "With Placeholder", placeholder: "Enter your password" }), _jsx(PasswordInput, { label: "With Description", description: "Password must be at least 8 characters" })] })),
     parameters: {
         docs: {
             source: {
@@ -148,7 +148,7 @@ export const Variants = {
     },
 };
 export const Sizes = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(PasswordInput, { size: "sm", label: "Small Password", placeholder: "Enter password" }), _jsx(PasswordInput, { size: "md", label: "Medium Password (Default)", placeholder: "Enter password" }), _jsx(PasswordInput, { size: "lg", label: "Large Password", placeholder: "Enter password" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(PasswordInput, { size: "sm", label: "Small Password", placeholder: "Enter password" }), _jsx(PasswordInput, { size: "md", label: "Medium Password (Default)", placeholder: "Enter password" }), _jsx(PasswordInput, { size: "lg", label: "Large Password", placeholder: "Enter password" })] })),
     parameters: {
         docs: {
             source: {
@@ -159,7 +159,7 @@ export const Sizes = {
     },
 };
 export const States = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(PasswordInput, { label: "Normal Password Input" }), _jsx(PasswordInput, { label: "Disabled Password Input", disabled: true }), _jsx(PasswordInput, { label: "Required Password Input", required: true }), _jsx(PasswordInput, { label: "Password Input with Description", description: "Password must be at least 8 characters" }), _jsx(PasswordInput, { label: "Password Input with Error", error: "Password is too short" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(PasswordInput, { label: "Normal Password Input" }), _jsx(PasswordInput, { label: "Disabled Password Input", disabled: true }), _jsx(PasswordInput, { label: "Required Password Input", required: true }), _jsx(PasswordInput, { label: "Password Input with Description", description: "Password must be at least 8 characters" }), _jsx(PasswordInput, { label: "Password Input with Error", error: "Password is too short" })] })),
     parameters: {
         docs: {
             source: {
@@ -169,7 +169,7 @@ export const States = {
     },
 };
 export const AdditionalFunctionality = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(PasswordInput, { label: "New Password", description: "Password must be at least 8 characters", placeholder: "Create a strong password" }), _jsx(PasswordInput, { label: "Confirm Password", placeholder: "Re-enter password", error: "Passwords do not match" }), _jsx(PasswordInput, { label: "Custom Width Password", width: "300px" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(PasswordInput, { label: "New Password", description: "Password must be at least 8 characters", placeholder: "Create a strong password" }), _jsx(PasswordInput, { label: "Confirm Password", placeholder: "Re-enter password", error: "Passwords do not match" }), _jsx(PasswordInput, { label: "Custom Width Password", width: "300px" })] })),
     parameters: {
         docs: {
             source: {
@@ -193,7 +193,7 @@ export const AdditionalFunctionality = {
     },
 };
 export const CustomStyling = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(PasswordInput, { label: "Custom Styled Password Input", styles: {
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(PasswordInput, { label: "Custom Styled Password Input", styles: {
                     input: {
                         borderColor: '#ff6b6b',
                         '&:focus': {

package/dist/components/Inputs/TextInputs/SearchBar/SearchBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/SearchBar/SearchBar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAM/C,UAAU,cAAe,SAAQ,cAAc;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,SAAS,GAAI,8CAA6D,cAAc,4CAmC7F,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/SearchBar/SearchBar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAO/C,UAAU,cAAe,SAAQ,cAAc;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,SAAS,GAAI,8CAA6D,cAAc,4CAmC7F,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/Inputs/TextInputs/SearchBar/SearchBar.js

@@ -2,10 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { TextInput } from '../TextInput/TextInput';
 import { neutral, red } from '../../../../constants/colors';
 import { fontBase } from '../../../../constants/font';
+import { spacing } from '../../../../constants/spacing';
 import { componentSizes } from '../shared/sizes';
 const SearchBar = ({ width, fullWidth = false, size = 'md', styles, ...props }) => {
     const selectedSize = componentSizes[size || 'md'];
-    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}rem`;
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}px`;
     const style = {
         input: {
             ...fontBase,
@@ -13,7 +14,7 @@ const SearchBar = ({ width, fullWidth = false, size = 'md', styles, ...props })
             color: neutral[200],
             border: `1px solid ${neutral[100]}`,
             borderRadius: '8px',
-            height: `${selectedSize.height}rem`,
+            height: `${selectedSize.height}px`,
             transition: 'all 200ms ease-in-out',
             '&[data-invalid]': {
                 borderColor: red[200],
@@ -25,6 +26,6 @@ const SearchBar = ({ width, fullWidth = false, size = 'md', styles, ...props })
         },
         ...styles,
     };
-    return (_jsx(TextInput, { placeholder: "Search", width: computedWidth, styles: style, icon: _jsx("i", { className: "fas fa-search", style: { fontSize: 14, marginLeft: '0.25rem' } }), size: 'lg', fullWidth: fullWidth, ...props }));
+    return (_jsx(TextInput, { placeholder: "Search", width: computedWidth, styles: style, icon: _jsx("i", { className: "fas fa-search", style: { fontSize: 14, marginLeft: spacing.xxs } }), size: 'lg', fullWidth: fullWidth, ...props }));
 };
 export { SearchBar };

package/dist/components/Inputs/TextInputs/SearchBar/SearchBar.stories.js

@@ -113,7 +113,7 @@ export const Default = {
     },
 };
 export const Variants = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(SearchBar, { label: "Find Users", description: "Search by name, email, or username" }), _jsx(SearchBar, { placeholder: "Search products..." }), _jsx(SearchBar, { label: "Product Search", error: "Search query is too short" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(SearchBar, { label: "Find Users", description: "Search by name, email, or username" }), _jsx(SearchBar, { placeholder: "Search products..." }), _jsx(SearchBar, { label: "Product Search", error: "Search query is too short" })] })),
     parameters: {
         docs: {
             source: {
@@ -123,7 +123,7 @@ export const Variants = {
     },
 };
 export const Sizes = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(SearchBar, { size: "sm" }), _jsx(SearchBar, { size: "md" }), _jsx(SearchBar, { size: "lg" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(SearchBar, { size: "sm" }), _jsx(SearchBar, { size: "md" }), _jsx(SearchBar, { size: "lg" })] })),
     parameters: {
         docs: {
             source: {
@@ -134,7 +134,7 @@ export const Sizes = {
     },
 };
 export const States = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(SearchBar, { label: "Normal Search Bar" }), _jsx(SearchBar, { label: "Disabled Search Bar", disabled: true }), _jsx(SearchBar, { label: "Required Search Bar", required: true }), _jsx(SearchBar, { label: "Search Bar with Description", description: "Enter your search terms" }), _jsx(SearchBar, { label: "Search Bar with Error", error: "Please enter a valid search term" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(SearchBar, { label: "Normal Search Bar" }), _jsx(SearchBar, { label: "Disabled Search Bar", disabled: true }), _jsx(SearchBar, { label: "Required Search Bar", required: true }), _jsx(SearchBar, { label: "Search Bar with Description", description: "Enter your search terms" }), _jsx(SearchBar, { label: "Search Bar with Error", error: "Please enter a valid search term" })] })),
     parameters: {
         docs: {
             source: {
@@ -144,7 +144,7 @@ export const States = {
     },
 };
 export const AdditionalFunctionality = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(SearchBar, { width: 400, placeholder: "Search products..." }), _jsx(SearchBar, { label: "Find Users", description: "Search by name, email, or username" }), _jsx(SearchBar, { label: "Product Search", error: "Search query is too short" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(SearchBar, { width: 400, placeholder: "Search products..." }), _jsx(SearchBar, { label: "Find Users", description: "Search by name, email, or username" }), _jsx(SearchBar, { label: "Product Search", error: "Search query is too short" })] })),
     parameters: {
         docs: {
             source: {
@@ -166,7 +166,7 @@ export const AdditionalFunctionality = {
     },
 };
 export const CustomStyling = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(SearchBar, { label: "Custom Styled Search Bar", styles: {
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(SearchBar, { label: "Custom Styled Search Bar", styles: {
                     input: {
                         borderColor: '#ff6b6b',
                         '&:focus': {