@taiv/ui 1.12.0 → 1.14.0

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': {

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;