@taiv/ui 1.13.0 → 1.14.1

package/dist/components/Inputs/Controls/SegmentedControl/SegmentedControl.stories.js

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { SegmentedControl } from './SegmentedControl';
 import { Group } from '../../../Layout/Group/Group';
 import { Stack } from '../../../Layout/Stack/Stack';
+import { spacing } from '../../../../constants/spacing';
 const sampleData = [
     { label: 'React', value: 'react' },
     { label: 'Angular', value: 'ng' },
@@ -157,7 +158,7 @@ export const Default = {
     },
 };
 export const Sizes = {
-    render: () => (_jsxs(Stack, { gap: "1.6rem", children: [_jsx(SegmentedControl, { size: "sm", data: sampleData, value: "react", onChange: () => { } }), _jsx(SegmentedControl, { size: "md", data: sampleData, value: "ng", onChange: () => { } }), _jsx(SegmentedControl, { size: "lg", data: sampleData, value: "vue", onChange: () => { } })] })),
+    render: () => (_jsxs(Stack, { gap: spacing.lg, children: [_jsx(SegmentedControl, { size: "sm", data: sampleData, value: "react", onChange: () => { } }), _jsx(SegmentedControl, { size: "md", data: sampleData, value: "ng", onChange: () => { } }), _jsx(SegmentedControl, { size: "lg", data: sampleData, value: "vue", onChange: () => { } })] })),
     parameters: {
         docs: {
             source: {
@@ -177,7 +178,7 @@ export const StringData = {
     },
 };
 export const States = {
-    render: () => (_jsxs(Stack, { gap: "1.6rem", style: { minWidth: '28rem' }, children: [_jsx(SegmentedControl, { data: sampleData, value: "react", onChange: () => { } }), _jsx(SegmentedControl, { data: sampleData, value: "react", onChange: () => { }, disabled: true }), _jsx(SegmentedControl, { data: [
+    render: () => (_jsxs(Stack, { gap: spacing.lg, style: { minWidth: '280px' }, children: [_jsx(SegmentedControl, { data: sampleData, value: "react", onChange: () => { } }), _jsx(SegmentedControl, { data: sampleData, value: "react", onChange: () => { }, disabled: true }), _jsx(SegmentedControl, { data: [
                     { value: 'preview', label: 'Preview', disabled: true },
                     { value: 'code', label: 'Code' },
                     { value: 'export', label: 'Export' },
@@ -191,7 +192,7 @@ export const States = {
     },
 };
 export const FullWidth = {
-    render: () => (_jsx("div", { style: { width: '36rem', maxWidth: '100%' }, children: _jsx(SegmentedControl, { fullWidth: true, data: sampleData, value: "react", onChange: () => { } }) })),
+    render: () => (_jsx("div", { style: { width: '360px', maxWidth: '100%' }, children: _jsx(SegmentedControl, { fullWidth: true, data: sampleData, value: "react", onChange: () => { } }) })),
     parameters: {
         docs: {
             source: {
@@ -201,7 +202,7 @@ export const FullWidth = {
     },
 };
 export const Orientation = {
-    render: () => (_jsxs(Group, { gap: "3rem", align: "flex-start", children: [_jsx(SegmentedControl, { data: sampleData, value: "ng", onChange: () => { }, orientation: "horizontal" }), _jsx(SegmentedControl, { data: sampleData, value: "vue", onChange: () => { }, orientation: "vertical" })] })),
+    render: () => (_jsxs(Group, { gap: spacing.xxl, align: "flex-start", children: [_jsx(SegmentedControl, { data: sampleData, value: "ng", onChange: () => { }, orientation: "horizontal" }), _jsx(SegmentedControl, { data: sampleData, value: "vue", onChange: () => { }, orientation: "vertical" })] })),
     parameters: {
         docs: {
             source: {
@@ -211,7 +212,7 @@ export const Orientation = {
     },
 };
 export const CustomStyles = {
-    render: () => (_jsx(Group, { gap: "2rem", children: _jsx(SegmentedControl, { data: sampleData, value: "react", onChange: () => { }, styles: {
+    render: () => (_jsx(Group, { gap: "20px", children: _jsx(SegmentedControl, { data: sampleData, value: "react", onChange: () => { }, styles: {
                 root: {
                     backgroundColor: '#f0f4f8',
                 },

package/dist/components/Inputs/Controls/Toggle/Toggle.d.ts

@@ -3,8 +3,8 @@ declare const componentSizes: {
     readonly sm: {
         readonly fontSize: string;
         readonly lineHeight: string;
-        readonly width: 2.4;
-        readonly height: 1.8;
+        readonly width: 24;
+        readonly height: 18;
         readonly mantineSize: "md";
         readonly thumbScale: 1.3;
         readonly thumbTranslate: 2;
@@ -12,8 +12,8 @@ declare const componentSizes: {
     readonly md: {
         readonly fontSize: string;
         readonly lineHeight: string;
-        readonly width: 4.8;
-        readonly height: 2.8;
+        readonly width: 48;
+        readonly height: 28;
         readonly mantineSize: "xl";
         readonly thumbScale: 1.3;
         readonly thumbTranslate: 10;

package/dist/components/Inputs/Controls/Toggle/Toggle.js

@@ -4,8 +4,8 @@ import { neutral, primary } from '../../../../constants/colors';
 import { fontBase, fontSize } from '../../../../constants/font';
 // Size Presets
 const componentSizes = {
-    sm: { width: 2.4, height: 1.8, mantineSize: 'md', thumbScale: 1.3, thumbTranslate: 2, ...fontSize['sm'] },
-    md: { width: 4.8, height: 2.8, mantineSize: 'xl', thumbScale: 1.3, thumbTranslate: 10, ...fontSize['md'] },
+    sm: { width: 24, height: 18, mantineSize: 'md', thumbScale: 1.3, thumbTranslate: 2, ...fontSize['sm'] },
+    md: { width: 48, height: 28, mantineSize: 'xl', thumbScale: 1.3, thumbTranslate: 10, ...fontSize['md'] },
 };
 const Toggle = ({ checked, onChange, styles, size = 'md', label, ...props }) => {
     const selectedSize = componentSizes[size];
@@ -13,11 +13,11 @@ const Toggle = ({ checked, onChange, styles, size = 'md', label, ...props }) =>
         container: {
             display: 'flex',
             alignItems: 'center',
-            gap: '1rem',
+            gap: '10px',
         },
         track: {
-            width: `${selectedSize.width}rem`,
-            height: `${selectedSize.height}rem`,
+            width: `${selectedSize.width}px`,
+            height: `${selectedSize.height}px`,
             transition: 'background-color 300ms ease-in-out',
             cursor: 'pointer',
             backgroundColor: checked ? primary[200] : neutral[50],

package/dist/components/Inputs/Controls/Toggle/Toggle.stories.js

@@ -114,7 +114,7 @@ export const Default = {
     },
 };
 export const Sizes = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Toggle, { size: "sm", label: "Small Toggle", checked: true }), _jsx(Toggle, { size: "md", label: "Medium Toggle (Default)", checked: false })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(Toggle, { size: "sm", label: "Small Toggle", checked: true }), _jsx(Toggle, { size: "md", label: "Medium Toggle (Default)", checked: false })] })),
     parameters: {
         docs: {
             source: {
@@ -124,7 +124,7 @@ export const Sizes = {
     },
 };
 export const States = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Toggle, { label: "Normal Toggle", checked: true }), _jsx(Toggle, { label: "Disabled Toggle", checked: false, disabled: true }), _jsx(Toggle, { label: "Toggle with Description", description: "This is a description that provides additional context", checked: true }), _jsx(Toggle, { label: "Toggle with Error", error: "This field is required", checked: false })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(Toggle, { label: "Normal Toggle", checked: true }), _jsx(Toggle, { label: "Disabled Toggle", checked: false, disabled: true }), _jsx(Toggle, { label: "Toggle with Description", description: "This is a description that provides additional context", checked: true }), _jsx(Toggle, { label: "Toggle with Error", error: "This field is required", checked: false })] })),
     parameters: {
         docs: {
             source: {
@@ -134,7 +134,7 @@ export const States = {
     },
 };
 export const WithoutLabel = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Toggle, { checked: true }), _jsx(Toggle, { checked: false })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(Toggle, { checked: true }), _jsx(Toggle, { checked: false })] })),
     parameters: {
         docs: {
             source: {
@@ -144,7 +144,7 @@ export const WithoutLabel = {
     },
 };
 export const CustomStyles = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Toggle, { label: "Custom Styled Toggle", checked: true, styles: {
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(Toggle, { label: "Custom Styled Toggle", checked: true, styles: {
                     track: {
                         backgroundColor: '#ff6b6b',
                     },

package/dist/components/Inputs/Dates/DatePicker/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dates/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6C,oBAAoB,IAAI,2BAA2B,EAAE,MAAM,gBAAgB,CAAC;AAEhI,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,CAAE,SAAQ,IAAI,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC;IAC7I,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;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,EAAE,qEAQhF,eAAe,CAAC,CAAC,CAAC,4CA+EpB,CAAC"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dates/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6C,oBAAoB,IAAI,2BAA2B,EAAE,MAAM,gBAAgB,CAAC;AAEhI,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,CAAE,SAAQ,IAAI,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC;IAC7I,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;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,EAAE,qEAQhF,eAAe,CAAC,CAAC,CAAC,4CA+EpB,CAAC"}

package/dist/components/Inputs/Dates/DatePicker/DatePicker.js

@@ -3,15 +3,16 @@ import { DatePickerInput as MantineDatePickerInput } from '@mantine/dates';
 import { createStyles } from '@mantine/core';
 import { neutral } from '../../../../constants/colors';
 import { fontBase } from '../../../../constants/font';
+import { spacing } from '../../../../constants/spacing';
 import { componentSizes } from '../../Dropdowns/shared/sizes';
 export const DatePicker = ({ size = 'md', width, fullWidth = false, placeholder = 'Pick Date', showIcon = true, styles, ...props }) => {
     const selectedSize = componentSizes[size];
     const { classes } = createStyles(() => ({
         root: {
-            width: fullWidth ? '100%' : width || (props.type === 'range' ? `${selectedSize.minWidth * 1.2}rem` : `${selectedSize.minWidth}rem`), // Range inputs are slightly wider than regular inputs
+            width: fullWidth ? '100%' : width || (props.type === 'range' ? `${selectedSize.minWidth * 1.2}px` : `${selectedSize.minWidth}px`), // Range inputs are slightly wider than regular inputs
         },
         input: {
-            height: `${selectedSize.height}rem`,
+            height: `${selectedSize.height}px`,
             paddingRight: selectedSize.inputPadding,
             ...fontBase,
             fontSize: selectedSize.fontSize,
@@ -30,7 +31,7 @@ export const DatePicker = ({ size = 'md', width, fullWidth = false, placeholder
         },
         label: {
             ...fontBase,
-            fontSize: `calc(${selectedSize.fontSize} - 0.1rem)`,
+            fontSize: `calc(${selectedSize.fontSize} - 1px)`,
             color: neutral[200],
         },
         calendar: {
@@ -64,7 +65,7 @@ export const DatePicker = ({ size = 'md', width, fullWidth = false, placeholder
         },
         ...styles,
     }))();
-    return (_jsx(MantineDatePickerInput, { icon: showIcon ? _jsx("i", { className: "far fa-calendar", style: { fontSize: 14, marginLeft: '0.25rem' } }) : undefined, radius: "lg", size: "xl", classNames: {
+    return (_jsx(MantineDatePickerInput, { icon: showIcon ? _jsx("i", { className: "far fa-calendar", style: { fontSize: 14, marginLeft: spacing.xxs } }) : undefined, radius: "lg", size: "xl", classNames: {
             root: classes.root,
             input: classes.input,
             placeholder: classes.placeholder,

package/dist/components/Inputs/Dates/DatePicker/DatePicker.stories.js

@@ -127,7 +127,7 @@ export const Default = {
     },
 };
 export const Sizes = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(DatePicker, { size: "sm" }), _jsx(DatePicker, {}), _jsx(DatePicker, { size: "lg" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(DatePicker, { size: "sm" }), _jsx(DatePicker, {}), _jsx(DatePicker, { size: "lg" })] })),
     parameters: {
         docs: {
             source: {
@@ -137,7 +137,7 @@ export const Sizes = {
     },
 };
 export const States = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(DatePicker, { label: "Normal DatePicker" }), _jsx(DatePicker, { label: "Disabled DatePicker", disabled: true }), _jsx(DatePicker, { label: "Required DatePicker", required: true }), _jsx(DatePicker, { label: "DatePicker with Description", description: "Please select your preferred date" }), _jsx(DatePicker, { label: "DatePicker with Error", error: "This field is required" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(DatePicker, { label: "Normal DatePicker" }), _jsx(DatePicker, { label: "Disabled DatePicker", disabled: true }), _jsx(DatePicker, { label: "Required DatePicker", required: true }), _jsx(DatePicker, { label: "DatePicker with Description", description: "Please select your preferred date" }), _jsx(DatePicker, { label: "DatePicker with Error", error: "This field is required" })] })),
     parameters: {
         docs: {
             source: {
@@ -147,7 +147,7 @@ export const States = {
     },
 };
 export const WithAndWithoutIcon = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(DatePicker, { label: "With Icon", placeholder: "Select date", showIcon: true }), _jsx(DatePicker, { label: "Without Icon", placeholder: "Select date", showIcon: false })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(DatePicker, { label: "With Icon", placeholder: "Select date", showIcon: true }), _jsx(DatePicker, { label: "Without Icon", placeholder: "Select date", showIcon: false })] })),
     parameters: {
         docs: {
             source: {
@@ -167,7 +167,7 @@ export const FullWidth = {
     },
 };
 export const CustomStyles = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(DatePicker, { label: "Custom Styled DatePicker", placeholder: "Select date", styles: {
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(DatePicker, { label: "Custom Styled DatePicker", placeholder: "Select date", styles: {
                     input: {
                         borderColor: '#ff6b6b',
                         '&:focus': {

package/dist/components/Inputs/Dropdowns/CascadingSelect/CascadingSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CascadingSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dropdowns/CascadingSelect/CascadingSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAU,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,wBAAwB,EAAE,CAAC;CACvC,CAAC;AAEF,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/E,IAAI,CAAC,EAAE,wBAAwB,EAAE,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,eAAe,GAAI,wEAAiH,oBAAoB,4CA+E7J,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"CascadingSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dropdowns/CascadingSelect/CascadingSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAU,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,wBAAwB,EAAE,CAAC;CACvC,CAAC;AAEF,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/E,IAAI,CAAC,EAAE,wBAAwB,EAAE,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,eAAe,GAAI,wEAAiH,oBAAoB,4CA+E7J,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/Inputs/Dropdowns/CascadingSelect/CascadingSelect.js

@@ -5,9 +5,10 @@ import { componentSizes } from '../shared/sizes';
 import { Select } from '../Select/Select';
 import { Text } from '../../../Typography/Text/Text';
 import { fontBase } from '../../../../constants/font';
+import { spacing } from '../../../../constants/spacing';
 const CascadingSelect = ({ data = [], value, placeholder = 'Select an option', size = 'md', width, fullWidth = false, styles, ...props }) => {
     const selectedSize = componentSizes[size];
-    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.minWidth}rem`;
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.minWidth}px`;
     // Flatten the hierarchy into a flat array with depth information
     const flattenHierarchy = (items, depth = 0) => {
         const result = [];
@@ -21,7 +22,7 @@ const CascadingSelect = ({ data = [], value, placeholder = 'Select an option', s
     };
     const flattenedData = flattenHierarchy(data);
     const DropdownItem = ({ value, label, icon, depth, ...others }) => {
-        const indentLevel = depth * 0.8;
+        const indentLevel = depth * 8;
         return (_jsx(Box, { sx: {
                 display: 'flex',
                 alignItems: 'center',
@@ -29,7 +30,7 @@ const CascadingSelect = ({ data = [], value, placeholder = 'Select an option', s
                 borderRadius: '8px',
                 transition: 'background-color 200ms ease-in-out',
                 cursor: 'pointer',
-            }, ...others, children: _jsxs(Group, { spacing: "0.5rem", sx: { marginLeft: `${indentLevel}rem` }, children: [icon && _jsx(Box, { sx: { display: 'flex', alignItems: 'center', color: neutral[200], fontSize: selectedSize.fontSize }, children: icon }), _jsx(Text, { style: { ...fontBase, color: neutral[200], fontSize: selectedSize.fontSize }, children: label })] }) }));
+            }, ...others, children: _jsxs(Group, { spacing: spacing.xs, sx: { marginLeft: `${indentLevel}px` }, children: [icon && _jsx(Box, { sx: { display: 'flex', alignItems: 'center', color: neutral[200], fontSize: selectedSize.fontSize }, children: icon }), _jsx(Text, { style: { ...fontBase, color: neutral[200], fontSize: selectedSize.fontSize }, children: label })] }) }));
     };
     const style = {
         input: {
@@ -37,7 +38,7 @@ const CascadingSelect = ({ data = [], value, placeholder = 'Select an option', s
             border: `1px solid ${neutral[100]}`,
             borderRadius: '8px',
             transition: 'all 200ms ease-in-out',
-            height: `${selectedSize.height}rem`,
+            height: `${selectedSize.height}px`,
             ...fontBase,
             fontSize: selectedSize.fontSize,
             padding: selectedSize.inputPadding,
@@ -48,7 +49,7 @@ const CascadingSelect = ({ data = [], value, placeholder = 'Select an option', s
             transition: 'background-color 200ms ease-in-out',
             padding: 0,
             fontSize: selectedSize.fontSize,
-            marginBottom: '0.2rem',
+            marginBottom: spacing.xxs,
             '&[data-selected]': {
                 backgroundColor: neutral[50],
                 color: neutral[200],

package/dist/components/Inputs/Dropdowns/CascadingSelect/CascadingSelect.stories.js

@@ -228,7 +228,7 @@ export const Default = {
     },
 };
 export const Sizes = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(CascadingSelect, { size: "sm", data: simpleHierarchyData, placeholder: "Small Cascading Select" }), _jsx(CascadingSelect, { size: "md", data: simpleHierarchyData, placeholder: "Medium Cascading Select (Default)" }), _jsx(CascadingSelect, { size: "lg", data: simpleHierarchyData, placeholder: "Large Cascading Select" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(CascadingSelect, { size: "sm", data: simpleHierarchyData, placeholder: "Small Cascading Select" }), _jsx(CascadingSelect, { size: "md", data: simpleHierarchyData, placeholder: "Medium Cascading Select (Default)" }), _jsx(CascadingSelect, { size: "lg", data: simpleHierarchyData, placeholder: "Large Cascading Select" })] })),
     parameters: {
         docs: {
             source: {
@@ -238,7 +238,7 @@ export const Sizes = {
     },
 };
 export const WithIcons = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(CascadingSelect, { label: "Categories with Icons", data: categoryData, placeholder: "Select with icons" }), _jsx(CascadingSelect, { label: "Simple Hierarchy", data: simpleHierarchyData, placeholder: "Select without icons" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(CascadingSelect, { label: "Categories with Icons", data: categoryData, placeholder: "Select with icons" }), _jsx(CascadingSelect, { label: "Simple Hierarchy", data: simpleHierarchyData, placeholder: "Select without icons" })] })),
     parameters: {
         docs: {
             source: {
@@ -248,7 +248,7 @@ export const WithIcons = {
     },
 };
 export const States = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(CascadingSelect, { label: "Normal Cascading Select", data: simpleHierarchyData, placeholder: "Select option" }), _jsx(CascadingSelect, { label: "Disabled Cascading Select", data: simpleHierarchyData, placeholder: "Select option", disabled: true }), _jsx(CascadingSelect, { label: "Required Cascading Select", data: simpleHierarchyData, placeholder: "Select option", required: true }), _jsx(CascadingSelect, { label: "Cascading Select with Description", description: "Please choose an option from the hierarchy", data: simpleHierarchyData, placeholder: "Select option" }), _jsx(CascadingSelect, { label: "Cascading Select with Error", error: "This field is required", data: simpleHierarchyData, placeholder: "Select option" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(CascadingSelect, { label: "Normal Cascading Select", data: simpleHierarchyData, placeholder: "Select option" }), _jsx(CascadingSelect, { label: "Disabled Cascading Select", data: simpleHierarchyData, placeholder: "Select option", disabled: true }), _jsx(CascadingSelect, { label: "Required Cascading Select", data: simpleHierarchyData, placeholder: "Select option", required: true }), _jsx(CascadingSelect, { label: "Cascading Select with Description", description: "Please choose an option from the hierarchy", data: simpleHierarchyData, placeholder: "Select option" }), _jsx(CascadingSelect, { label: "Cascading Select with Error", error: "This field is required", data: simpleHierarchyData, placeholder: "Select option" })] })),
     parameters: {
         docs: {
             source: {
@@ -258,7 +258,7 @@ export const States = {
     },
 };
 export const WithFeatures = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(CascadingSelect, { label: "Clearable Cascading Select", data: simpleHierarchyData, placeholder: "Select option", clearable: true, value: "level2a" }), _jsx(CascadingSelect, { label: "Searchable Cascading Select", data: categoryData, placeholder: "Search categories", searchable: true })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(CascadingSelect, { label: "Clearable Cascading Select", data: simpleHierarchyData, placeholder: "Select option", clearable: true, value: "level2a" }), _jsx(CascadingSelect, { label: "Searchable Cascading Select", data: categoryData, placeholder: "Search categories", searchable: true })] })),
     parameters: {
         docs: {
             source: {
@@ -326,7 +326,7 @@ export const DeepHierarchy = {
     },
 };
 export const CustomStyles = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(CascadingSelect, { label: "Custom Styled Cascading Select", data: simpleHierarchyData, placeholder: "Select option", styles: {
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(CascadingSelect, { label: "Custom Styled Cascading Select", data: simpleHierarchyData, placeholder: "Select option", styles: {
                     input: {
                         borderColor: '#ff6b6b',
                         '&:focus': {

package/dist/components/Inputs/Dropdowns/FontSelect/FontSelect.js

@@ -6,13 +6,13 @@ import { Select } from '../Select/Select';
 import Fonts from './font-options';
 const FontSelect = ({ data, value, placeholder = 'Select a font', size = 'md', width, fullWidth = false, styles, ...props }) => {
     const selectedSize = componentSizes[size];
-    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.minWidth}rem`;
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.minWidth}px`;
     const DropdownItem = ({ value, label, ...others }) => (_jsx(Box, { title: label, children: _jsx("div", { style: {
                 fontFamily: value,
                 fontSize: selectedSize.fontSize,
                 color: neutral[200],
                 padding: selectedSize.dropdownPadding,
-                borderRadius: '0.5rem',
+                borderRadius: '5px',
                 transition: 'background-color 200ms ease-in-out',
             }, ...others, children: label }) }));
     const style = {
@@ -22,7 +22,7 @@ const FontSelect = ({ data, value, placeholder = 'Select a font', size = 'md', w
             border: `1px solid ${neutral[100]}`,
             borderRadius: '8px',
             transition: 'all 200ms ease-in-out',
-            height: `${selectedSize.height}rem`,
+            height: `${selectedSize.height}px`,
             fontSize: selectedSize.fontSize,
             padding: selectedSize.inputPadding,
         },

package/dist/components/Inputs/Dropdowns/FontSelect/FontSelect.stories.js

@@ -134,7 +134,7 @@ export const Default = {
     },
 };
 export const Variants = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(FontSelect, { label: "Default Font Select" }), _jsx(FontSelect, { label: "With Custom Data", data: [
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(FontSelect, { label: "Default Font Select" }), _jsx(FontSelect, { label: "With Custom Data", data: [
                     { value: 'Arial', label: 'Arial' },
                     { value: 'Helvetica', label: 'Helvetica' },
                     { value: 'Times New Roman', label: 'Times New Roman' },
@@ -149,7 +149,7 @@ export const Variants = {
     },
 };
 export const Sizes = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(FontSelect, { size: "sm" }), _jsx(FontSelect, { size: "md" }), _jsx(FontSelect, { size: "lg" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(FontSelect, { size: "sm" }), _jsx(FontSelect, { size: "md" }), _jsx(FontSelect, { size: "lg" })] })),
     parameters: {
         docs: {
             source: {
@@ -159,7 +159,7 @@ export const Sizes = {
     },
 };
 export const States = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(FontSelect, { label: "Normal Font Select" }), _jsx(FontSelect, { label: "Disabled Font Select", disabled: true }), _jsx(FontSelect, { label: "Required Font Select", required: true }), _jsx(FontSelect, { label: "Font Select with Description", description: "Choose your preferred font" }), _jsx(FontSelect, { label: "Font Select with Error", error: "Please select a font" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(FontSelect, { label: "Normal Font Select" }), _jsx(FontSelect, { label: "Disabled Font Select", disabled: true }), _jsx(FontSelect, { label: "Required Font Select", required: true }), _jsx(FontSelect, { label: "Font Select with Description", description: "Choose your preferred font" }), _jsx(FontSelect, { label: "Font Select with Error", error: "Please select a font" })] })),
     parameters: {
         docs: {
             source: {
@@ -169,7 +169,7 @@ export const States = {
     },
 };
 export const AdditionalFunctionality = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(FontSelect, { label: "Clearable Font Select", clearable: true, value: "Poppins" }), _jsx(FontSelect, { label: "Searchable Font Select", searchable: true })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(FontSelect, { label: "Clearable Font Select", clearable: true, value: "Poppins" }), _jsx(FontSelect, { label: "Searchable Font Select", searchable: true })] })),
     parameters: {
         docs: {
             source: {
@@ -179,7 +179,7 @@ export const AdditionalFunctionality = {
     },
 };
 export const CustomStyling = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(FontSelect, { label: "Custom Styled Font Select", styles: {
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(FontSelect, { label: "Custom Styled Font Select", styles: {
                     input: {
                         borderColor: '#ff6b6b',
                         '&:focus': {

package/dist/components/Inputs/Dropdowns/MultiSelect/MultiSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dropdowns/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqC,gBAAgB,IAAI,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC/G,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,UAAU,gBAAiB,SAAQ,uBAAuB;IACxD,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,WAAW,GAAI,2DAA6F,gBAAgB,4CA0FxI,CAAC"}
+{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dropdowns/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqC,gBAAgB,IAAI,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC/G,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,UAAU,gBAAiB,SAAQ,uBAAuB;IACxD,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,WAAW,GAAI,2DAA6F,gBAAgB,4CA0FxI,CAAC"}

package/dist/components/Inputs/Dropdowns/MultiSelect/MultiSelect.js

@@ -2,14 +2,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { MultiSelect as MantineMultiSelect } from '@mantine/core';
 import { neutral, primary } from '../../../../constants/colors';
 import { fontBase } from '../../../../constants/font';
+import { spacing } from '../../../../constants/spacing';
 import { componentSizes } from '../shared/sizes';
 export const MultiSelect = ({ size = 'md', width, fullWidth = false, placeholder = 'Select options', styles, ...props }) => {
     const selectedSize = componentSizes[size];
-    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.maxWidth}rem`;
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.maxWidth}px`;
     const style = {
         input: {
             height: 'auto',
-            minHeight: `${selectedSize.height}rem`,
+            minHeight: `${selectedSize.height}px`,
             padding: selectedSize.inputPadding,
             display: 'flex',
             alignItems: 'center',
@@ -32,7 +33,7 @@ export const MultiSelect = ({ size = 'md', width, fullWidth = false, placeholder
         },
         item: {
             padding: selectedSize.dropdownPadding,
-            marginBottom: '0.5rem',
+            marginBottom: spacing.xs,
             borderRadius: '8px',
             ...fontBase,
             fontSize: selectedSize.fontSize,
@@ -56,7 +57,7 @@ export const MultiSelect = ({ size = 'md', width, fullWidth = false, placeholder
             padding: selectedSize.valuePadding,
             borderRadius: '25px',
             ...fontBase,
-            fontSize: `calc(${selectedSize.fontSize} - 0.125rem)`,
+            fontSize: `calc(${selectedSize.fontSize} - 1.25px)`,
             color: primary[300],
             backgroundColor: primary[50],
             '&:hover': {
@@ -64,7 +65,7 @@ export const MultiSelect = ({ size = 'md', width, fullWidth = false, placeholder
             },
         },
         defaultValueRemove: {
-            marginLeft: '0.75rem',
+            marginLeft: spacing.sm,
             borderRadius: '50%',
             display: 'flex',
             alignItems: 'center',
@@ -77,7 +78,7 @@ export const MultiSelect = ({ size = 'md', width, fullWidth = false, placeholder
         },
         label: {
             ...fontBase,
-            fontSize: `calc(${selectedSize.fontSize} - 0.1rem)`,
+            fontSize: `calc(${selectedSize.fontSize} - 1px)`,
             color: neutral[200],
         },
         defaultValueLabel: {

package/dist/components/Inputs/Dropdowns/MultiSelect/MultiSelect.stories.js

@@ -167,7 +167,7 @@ export const Default = {
     },
 };
 export const Variants = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(MultiSelect, { label: "Basic Multi Select", data: basicOptions }), _jsx(MultiSelect, { label: "Tag Selection", data: tagOptions, placeholder: "Select technologies" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(MultiSelect, { label: "Basic Multi Select", data: basicOptions }), _jsx(MultiSelect, { label: "Tag Selection", data: tagOptions, placeholder: "Select technologies" })] })),
     parameters: {
         docs: {
             source: {
@@ -177,7 +177,7 @@ export const Variants = {
     },
 };
 export const Sizes = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(MultiSelect, { size: "sm", label: "Small MultiSelect", data: basicOptions }), _jsx(MultiSelect, { size: "md", label: "Medium MultiSelect (Default)", data: basicOptions }), _jsx(MultiSelect, { size: "lg", label: "Large MultiSelect", data: basicOptions })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(MultiSelect, { size: "sm", label: "Small MultiSelect", data: basicOptions }), _jsx(MultiSelect, { size: "md", label: "Medium MultiSelect (Default)", data: basicOptions }), _jsx(MultiSelect, { size: "lg", label: "Large MultiSelect", data: basicOptions })] })),
     parameters: {
         docs: {
             source: {
@@ -188,7 +188,7 @@ export const Sizes = {
     },
 };
 export const States = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(MultiSelect, { label: "Normal Multi Select", data: basicOptions }), _jsx(MultiSelect, { label: "Disabled Multi Select", data: basicOptions, disabled: true }), _jsx(MultiSelect, { label: "Required Multi Select", data: basicOptions, required: true }), _jsx(MultiSelect, { label: "Multi Select with Description", description: "Select multiple options", data: basicOptions }), _jsx(MultiSelect, { label: "Multi Select with Error", error: "Please select at least one option", data: basicOptions })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(MultiSelect, { label: "Normal Multi Select", data: basicOptions }), _jsx(MultiSelect, { label: "Disabled Multi Select", data: basicOptions, disabled: true }), _jsx(MultiSelect, { label: "Required Multi Select", data: basicOptions, required: true }), _jsx(MultiSelect, { label: "Multi Select with Description", description: "Select multiple options", data: basicOptions }), _jsx(MultiSelect, { label: "Multi Select with Error", error: "Please select at least one option", data: basicOptions })] })),
     parameters: {
         docs: {
             source: {
@@ -198,7 +198,7 @@ export const States = {
     },
 };
 export const AdditionalFunctionality = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(MultiSelect, { label: "Tags", placeholder: "Add or select tags", creatable: true, clearable: true, data: tagOptions }), _jsx(MultiSelect, { label: "Limited Selection", data: basicOptions, maxSelectedValues: 3, placeholder: "Max 3 selections" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(MultiSelect, { label: "Tags", placeholder: "Add or select tags", creatable: true, clearable: true, data: tagOptions }), _jsx(MultiSelect, { label: "Limited Selection", data: basicOptions, maxSelectedValues: 3, placeholder: "Max 3 selections" })] })),
     parameters: {
         docs: {
             source: {
@@ -216,7 +216,7 @@ export const AdditionalFunctionality = {
     },
 };
 export const CustomStyling = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(MultiSelect, { label: "Custom Styled Multi Select", data: basicOptions, styles: {
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(MultiSelect, { label: "Custom Styled Multi Select", data: basicOptions, styles: {
                     input: {
                         borderColor: '#ff6b6b',
                         '&:focus': {

package/dist/components/Inputs/Dropdowns/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dropdowns/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,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,MAAM,GAAI,2DAA+F,WAAW,4CAqEhI,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dropdowns/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,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,MAAM,GAAI,2DAA+F,WAAW,4CAqEhI,CAAC"}

package/dist/components/Inputs/Dropdowns/Select/Select.js

@@ -2,15 +2,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Select as MantineSelect } from '@mantine/core';
 import { neutral, red } from '../../../../constants/colors';
 import { fontBase } from '../../../../constants/font';
+import { spacing } from '../../../../constants/spacing';
 import { componentSizes } from '../shared/sizes';
 export const Select = ({ size = 'md', width, fullWidth = false, placeholder = 'Select an option', styles, ...props }) => {
     const selectedSize = componentSizes[size];
     const style = {
         root: {
-            width: fullWidth ? '100%' : width || `${selectedSize.minWidth}rem`,
+            width: fullWidth ? '100%' : width || `${selectedSize.minWidth}px`,
         },
         input: {
-            height: `${selectedSize.height}rem`,
+            height: `${selectedSize.height}px`,
             paddingRight: selectedSize.inputPadding,
             ...fontBase,
             fontSize: selectedSize.fontSize,
@@ -29,7 +30,7 @@ export const Select = ({ size = 'md', width, fullWidth = false, placeholder = 'S
         },
         label: {
             ...fontBase,
-            fontSize: `calc(${selectedSize.fontSize} - 0.1rem)`,
+            fontSize: `calc(${selectedSize.fontSize} - 1px)`,
             color: neutral[200],
         },
         dropdown: {
@@ -39,7 +40,7 @@ export const Select = ({ size = 'md', width, fullWidth = false, placeholder = 'S
         },
         item: {
             padding: selectedSize.dropdownPadding,
-            marginBottom: '0.2rem',
+            marginBottom: spacing.xxs,
             ...fontBase,
             fontSize: selectedSize.fontSize,
             color: neutral[200],
@@ -64,7 +65,7 @@ export const Select = ({ size = 'md', width, fullWidth = false, placeholder = 'S
         },
         error: {
             ...fontBase,
-            fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+            fontSize: `calc(${selectedSize.fontSize} - 0.5px)`,
             color: red[200]
         },
         ...styles,

package/dist/components/Inputs/Dropdowns/Select/Select.stories.js

@@ -158,7 +158,7 @@ export const Default = {
     },
 };
 export const Sizes = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Select, { size: "sm", label: "Small Select", data: basicOptions }), _jsx(Select, { size: "md", label: "Medium Select (Default)", data: basicOptions }), _jsx(Select, { size: "lg", label: "Large Select", data: basicOptions })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(Select, { size: "sm", label: "Small Select", data: basicOptions }), _jsx(Select, { size: "md", label: "Medium Select (Default)", data: basicOptions }), _jsx(Select, { size: "lg", label: "Large Select", data: basicOptions })] })),
     parameters: {
         docs: {
             source: {
@@ -169,7 +169,7 @@ export const Sizes = {
     },
 };
 export const States = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Select, { label: "Normal Select", data: basicOptions, placeholder: "Select option" }), _jsx(Select, { label: "Disabled Select", data: basicOptions, placeholder: "Select option", disabled: true }), _jsx(Select, { label: "Required Select", data: basicOptions, placeholder: "Select option", required: true }), _jsx(Select, { label: "Select with Description", description: "Please choose an option", data: basicOptions, placeholder: "Select option" }), _jsx(Select, { label: "Select with Error", error: "This field is required", data: basicOptions, placeholder: "Select option" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(Select, { label: "Normal Select", data: basicOptions, placeholder: "Select option" }), _jsx(Select, { label: "Disabled Select", data: basicOptions, placeholder: "Select option", disabled: true }), _jsx(Select, { label: "Required Select", data: basicOptions, placeholder: "Select option", required: true }), _jsx(Select, { label: "Select with Description", description: "Please choose an option", data: basicOptions, placeholder: "Select option" }), _jsx(Select, { label: "Select with Error", error: "This field is required", data: basicOptions, placeholder: "Select option" })] })),
     parameters: {
         docs: {
             source: {
@@ -179,7 +179,7 @@ export const States = {
     },
 };
 export const WithFeatures = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Select, { label: "Searchable Select", placeholder: "Type to search...", searchable: true, data: countryOptions }), _jsx(Select, { label: "Clearable Select", data: basicOptions, clearable: true, value: "option1" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(Select, { label: "Searchable Select", placeholder: "Type to search...", searchable: true, data: countryOptions }), _jsx(Select, { label: "Clearable Select", data: basicOptions, clearable: true, value: "option1" })] })),
     parameters: {
         docs: {
             source: {
@@ -206,7 +206,7 @@ export const FullWidth = {
     },
 };
 export const CustomStyles = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Select, { label: "Custom Styled Select", data: basicOptions, placeholder: "Select option", styles: {
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(Select, { label: "Custom Styled Select", data: basicOptions, placeholder: "Select option", styles: {
                     input: {
                         borderColor: '#ff6b6b',
                         '&:focus': {