@taiv/ui 1.13.0 → 1.14.0

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/TextArea/TextArea.tsx"],"names":[],"mappings":"AACA,OAAO,EAA+B,aAAa,IAAI,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACnG,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,KAAK,aAAa,GAAG,oBAAoB,GAAG;IAC1C,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,CAAC;AAEF,QAAA,MAAM,QAAQ,GAAI,8CAA6D,aAAa,4CAoC3F,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/TextArea/TextArea.tsx"],"names":[],"mappings":"AACA,OAAO,EAA+B,aAAa,IAAI,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACnG,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,KAAK,aAAa,GAAG,oBAAoB,GAAG;IAC1C,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,CAAC;AAEF,QAAA,MAAM,QAAQ,GAAI,8CAA6D,aAAa,4CAoC3F,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

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

@@ -2,15 +2,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Textarea as MantineTextarea } from '@mantine/core';
 import { neutral, red } from '../../../../constants/colors';
 import { fontBase } from '../../../../constants/font';
+import { spacing } from '../../../../constants/spacing';
 import { componentSizes } from '../shared/sizes';
 const TextArea = ({ size = 'md', width, fullWidth = false, styles, ...props }) => {
     const selectedSize = componentSizes[size];
-    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}rem`;
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}px`;
     const style = {
         input: {
-            minHeight: `${selectedSize.height}rem`,
+            minHeight: `${selectedSize.height}px`,
             fontSize: selectedSize.fontSize,
-            padding: '0.75rem 1rem',
+            padding: `${spacing.sm} 10px`,
             ...fontBase,
             color: neutral[200],
             transition: 'all 200ms ease-in-out',
@@ -26,12 +27,12 @@ const TextArea = ({ size = 'md', width, fullWidth = false, styles, ...props }) =
         },
         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/TextArea/TextArea.stories.js

@@ -139,7 +139,7 @@ export const Default = {
     },
 };
 export const Variants = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextArea, { label: "Basic TextArea" }), _jsx(TextArea, { label: "With Placeholder", placeholder: "Enter your text here..." }), _jsx(TextArea, { label: "With Description", description: "This is a description" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(TextArea, { label: "Basic TextArea" }), _jsx(TextArea, { label: "With Placeholder", placeholder: "Enter your text here..." }), _jsx(TextArea, { label: "With Description", description: "This is a description" })] })),
     parameters: {
         docs: {
             source: {
@@ -149,7 +149,7 @@ export const Variants = {
     },
 };
 export const Sizes = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextArea, { size: "sm", label: "Small TextArea", placeholder: "Small textarea" }), _jsx(TextArea, { size: "md", label: "Medium TextArea (Default)", placeholder: "Medium textarea" }), _jsx(TextArea, { size: "lg", label: "Large TextArea", placeholder: "Large textarea" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(TextArea, { size: "sm", label: "Small TextArea", placeholder: "Small textarea" }), _jsx(TextArea, { size: "md", label: "Medium TextArea (Default)", placeholder: "Medium textarea" }), _jsx(TextArea, { size: "lg", label: "Large TextArea", placeholder: "Large textarea" })] })),
     parameters: {
         docs: {
             source: {
@@ -160,7 +160,7 @@ export const Sizes = {
     },
 };
 export const States = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextArea, { label: "Normal TextArea" }), _jsx(TextArea, { label: "Disabled TextArea", disabled: true }), _jsx(TextArea, { label: "Required TextArea", required: true }), _jsx(TextArea, { label: "TextArea with Description", description: "Please provide detailed information" }), _jsx(TextArea, { label: "TextArea with Error", error: "This field is required" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(TextArea, { label: "Normal TextArea" }), _jsx(TextArea, { label: "Disabled TextArea", disabled: true }), _jsx(TextArea, { label: "Required TextArea", required: true }), _jsx(TextArea, { label: "TextArea with Description", description: "Please provide detailed information" }), _jsx(TextArea, { label: "TextArea with Error", error: "This field is required" })] })),
     parameters: {
         docs: {
             source: {
@@ -170,7 +170,7 @@ export const States = {
     },
 };
 export const AdditionalFunctionality = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextArea, { label: "Auto-resize TextArea", autosize: true, placeholder: "This will grow as you type..." }), _jsx(TextArea, { label: "Fixed Rows", minRows: 3, maxRows: 6, placeholder: "Fixed height textarea" }), _jsx(TextArea, { label: "Custom Width TextArea", width: "400px", placeholder: "Custom width textarea" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(TextArea, { label: "Auto-resize TextArea", autosize: true, placeholder: "This will grow as you type..." }), _jsx(TextArea, { label: "Fixed Rows", minRows: 3, maxRows: 6, placeholder: "Fixed height textarea" }), _jsx(TextArea, { label: "Custom Width TextArea", width: "400px", placeholder: "Custom width textarea" })] })),
     parameters: {
         docs: {
             source: {
@@ -195,7 +195,7 @@ export const AdditionalFunctionality = {
     },
 };
 export const CustomStyling = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextArea, { label: "Custom Styled TextArea", styles: {
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(TextArea, { label: "Custom Styled TextArea", styles: {
                     input: {
                         borderColor: '#ff6b6b',
                         '&:focus': {

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

@@ -5,12 +5,12 @@ import { fontBase } from '../../../../constants/font';
 import { componentSizes } from '../shared/sizes';
 const TextInput = ({ size = 'md', width, fullWidth = false, styles, ...props }) => {
     const selectedSize = componentSizes[size];
-    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}rem`;
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}px`;
     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',
@@ -25,12 +25,12 @@ const TextInput = ({ size = 'md', width, fullWidth = false, styles, ...props })
         },
         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/TextInput/TextInput.stories.js

@@ -126,7 +126,7 @@ export const Default = {
     },
 };
 export const Variants = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextInput, { label: "Basic Text Input" }), _jsx(TextInput, { label: "With Placeholder", placeholder: "Enter your text here" }), _jsx(TextInput, { label: "With Description", description: "This is a description" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(TextInput, { label: "Basic Text Input" }), _jsx(TextInput, { label: "With Placeholder", placeholder: "Enter your text here" }), _jsx(TextInput, { label: "With Description", description: "This is a description" })] })),
     parameters: {
         docs: {
             source: {
@@ -136,7 +136,7 @@ export const Variants = {
     },
 };
 export const Sizes = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextInput, { size: "sm", label: "Small Input", placeholder: "Small text input" }), _jsx(TextInput, { size: "md", label: "Medium Input (Default)", placeholder: "Medium text input" }), _jsx(TextInput, { size: "lg", label: "Large Input", placeholder: "Large text input" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(TextInput, { size: "sm", label: "Small Input", placeholder: "Small text input" }), _jsx(TextInput, { size: "md", label: "Medium Input (Default)", placeholder: "Medium text input" }), _jsx(TextInput, { size: "lg", label: "Large Input", placeholder: "Large text input" })] })),
     parameters: {
         docs: {
             source: {
@@ -147,7 +147,7 @@ export const Sizes = {
     },
 };
 export const States = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextInput, { label: "Normal Text Input" }), _jsx(TextInput, { label: "Disabled Text Input", disabled: true }), _jsx(TextInput, { label: "Required Text Input", required: true }), _jsx(TextInput, { label: "Text Input with Description", description: "Please enter your information" }), _jsx(TextInput, { label: "Text Input with Error", error: "This field is required" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(TextInput, { label: "Normal Text Input" }), _jsx(TextInput, { label: "Disabled Text Input", disabled: true }), _jsx(TextInput, { label: "Required Text Input", required: true }), _jsx(TextInput, { label: "Text Input with Description", description: "Please enter your information" }), _jsx(TextInput, { label: "Text Input with Error", error: "This field is required" })] })),
     parameters: {
         docs: {
             source: {
@@ -157,7 +157,7 @@ export const States = {
     },
 };
 export const AdditionalFunctionality = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextInput, { label: "Email Address", description: "We'll never share your email", placeholder: "your@email.com", type: "email" }), _jsx(TextInput, { label: "Password", type: "password", placeholder: "Enter password", error: "Password must be at least 8 characters" }), _jsx(TextInput, { label: "Custom Width", placeholder: "Custom width input", width: "300px" })] })),
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(TextInput, { label: "Email Address", description: "We'll never share your email", placeholder: "your@email.com", type: "email" }), _jsx(TextInput, { label: "Password", type: "password", placeholder: "Enter password", error: "Password must be at least 8 characters" }), _jsx(TextInput, { label: "Custom Width", placeholder: "Custom width input", width: "300px" })] })),
     parameters: {
         docs: {
             source: {
@@ -183,7 +183,7 @@ export const AdditionalFunctionality = {
     },
 };
 export const CustomStyling = {
-    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextInput, { label: "Custom Styled Text Input", styles: {
+    render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(TextInput, { label: "Custom Styled Text Input", styles: {
                     input: {
                         borderColor: '#ff6b6b',
                         '&:focus': {

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

@@ -1,27 +1,27 @@
 export declare const componentSizes: {
     readonly sm: {
-        readonly width: 20;
+        readonly width: 200;
         readonly minRows: 3;
         readonly maxRows: 6;
         readonly fontSize: string;
         readonly lineHeight: string;
-        readonly height: 3.2;
+        readonly height: 32;
     };
     readonly md: {
-        readonly width: 32.8;
+        readonly width: 328;
         readonly minRows: 4;
         readonly maxRows: 8;
         readonly fontSize: string;
         readonly lineHeight: string;
-        readonly height: 4;
+        readonly height: 40;
     };
     readonly lg: {
-        readonly width: 42;
+        readonly width: 420;
         readonly minRows: 6;
         readonly maxRows: 9;
         readonly fontSize: string;
         readonly lineHeight: string;
-        readonly height: 4.8;
+        readonly height: 48;
     };
 };
 //# sourceMappingURL=sizes.d.ts.map

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

@@ -1,6 +1,6 @@
 import { inputFontSize } from '../../../../constants/font';
 export const componentSizes = {
-    sm: { height: 3.2, ...inputFontSize['sm'], width: 20, minRows: 3, maxRows: 6 },
-    md: { height: 4, ...inputFontSize['md'], width: 32.8, minRows: 4, maxRows: 8 },
-    lg: { height: 4.8, ...inputFontSize['lg'], width: 42, minRows: 6, maxRows: 9 },
+    sm: { height: 32, ...inputFontSize['sm'], width: 200, minRows: 3, maxRows: 6 },
+    md: { height: 40, ...inputFontSize['md'], width: 328, minRows: 4, maxRows: 8 },
+    lg: { height: 48, ...inputFontSize['lg'], width: 420, minRows: 6, maxRows: 9 },
 };

package/dist/components/Layout/Box/Box.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Box.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Box/Box.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAK5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAuB1B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAgBxB,CAAC"}
+{"version":3,"file":"Box.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Box/Box.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAM5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAuB1B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAgBxB,CAAC"}

package/dist/components/Layout/Box/Box.stories.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from './Box';
 import { Text } from '../../Typography/Text/Text';
 import { neutral } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
 const meta = {
     title: 'Components/Layout/Box',
     component: Box,
@@ -32,7 +33,7 @@ export const Default = {
         children: 'Box is a styled div — use it as a wrapper or for custom styling',
         sx: {
             backgroundColor: neutral[50],
-            padding: '2.4rem',
+            padding: spacing.xl,
             borderRadius: '8px',
         },
     },
@@ -40,7 +41,7 @@ export const Default = {
 export const BoxStyling = {
     render: () => (_jsx(Box, { sx: {
             backgroundColor: neutral[25],
-            padding: '2.4rem',
+            padding: spacing.xl,
             borderRadius: '8px',
             border: `1px dashed ${neutral[100]}`,
         }, children: _jsx(Text, { weight: "semibold", children: "This is a box that has been styled" }) })),

package/dist/components/Layout/Card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,SAAS,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnF,MAAM,WAAW,SAAU,SAAQ,gBAAgB;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,IAAI,GAAI,4CAAoE,SAAS,4CAiBjG,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,SAAS,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnF,MAAM,WAAW,SAAU,SAAQ,gBAAgB;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,IAAI,GAAI,4CAAkE,SAAS,4CAiB/F,CAAC"}

package/dist/components/Layout/Card/Card.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Card as MantineCard } from '@mantine/core';
-export const Card = ({ children, animate = false, p = "2.4rem", radius = "20px", ...props }) => {
+export const Card = ({ children, animate = false, p = "24px", radius = "20px", ...props }) => {
     const hoverAnimation = {
         style: { transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out' },
         onMouseEnter: (e) => {

package/dist/components/Layout/Card/Card.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Card/Card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAM9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CA+C3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KASvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAa1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA2B3B,CAAC"}
+{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Card/Card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAO9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CA+C3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KASvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAa1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA2B3B,CAAC"}

package/dist/components/Layout/Card/Card.stories.js

@@ -3,6 +3,7 @@ import { Card } from './Card';
 import { AutoGrid } from '../AutoGrid/AutoGrid';
 import { Title } from '../../Typography/Title/Title';
 import { primary } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
 const meta = {
     title: 'Components/Layout/Card',
     component: Card,
@@ -68,7 +69,7 @@ export const Animation = {
     render: () => (_jsx("div", { style: { width: '400px' }, children: _jsxs(Card, { animate: true, children: [_jsx(Title, { variant: "cardHeader", children: "Hover over me" }), _jsx(Title, { variant: "cardSubheader", children: "This card lifts and enhances on hover." })] }) })),
 };
 export const WithAutoGrid = {
-    render: () => (_jsx("div", { style: { width: '700px' }, children: _jsx(AutoGrid, { cols: 3, spacing: "md", children: [1, 2, 3, 4, 5, 6].map((item) => (_jsxs(Card, { animate: true, children: [_jsxs(Title, { variant: "cardHeader", children: ["Card ", item] }), _jsx(Title, { variant: "cardSubheader", children: "Card content" })] }, item))) }) })),
+    render: () => (_jsx("div", { style: { width: '700px' }, children: _jsx(AutoGrid, { cols: 3, spacing: spacing.md, children: [1, 2, 3, 4, 5, 6].map((item) => (_jsxs(Card, { animate: true, children: [_jsxs(Title, { variant: "cardHeader", children: ["Card ", item] }), _jsx(Title, { variant: "cardSubheader", children: "Card content" })] }, item))) }) })),
 };
 export const CustomStyling = {
     decorators: [

package/dist/components/Layout/Center/Center.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Center.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Center/Center.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAMlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAsC7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AASF,eAAO,MAAM,gBAAgB,EAAE,KAkB9B,CAAC"}
+{"version":3,"file":"Center.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Center/Center.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAOlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAsC7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AASF,eAAO,MAAM,gBAAgB,EAAE,KAkB9B,CAAC"}

package/dist/components/Layout/Center/Center.stories.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Center } from './Center';
 import { Text } from '../../Typography/Text/Text';
 import { neutral } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
 import { Title } from '../../Typography/Title/Title';
 import { Card, Stack } from '../../..';
 const meta = {
@@ -65,5 +66,5 @@ export const CenteringLayouts = {
             border: `1px dashed ${neutral[50]}`,
         },
     },
-    render: (args) => (_jsx(Center, { ...args, children: _jsxs(Stack, { spacing: "md", sx: { width: '300px' }, children: [_jsx(SampleCard, { title: "Card 1", description: "Centered layout" }), _jsx(SampleCard, { title: "Card 2", description: "Centered layout" }), _jsx(SampleCard, { title: "Card 3", description: "Centered layout" })] }) })),
+    render: (args) => (_jsx(Center, { ...args, children: _jsxs(Stack, { spacing: spacing.md, sx: { width: '300px' }, children: [_jsx(SampleCard, { title: "Card 1", description: "Centered layout" }), _jsx(SampleCard, { title: "Card 2", description: "Centered layout" }), _jsx(SampleCard, { title: "Card 3", description: "Centered layout" })] }) })),
 };

package/dist/components/Layout/Frame/Frame.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack } from '../Stack/Stack';
 import { Title } from '../../Typography/Title/Title';
 const Frame = ({ title, subtitle, children, width, styles }) => {
-    return (_jsxs(Stack, { mt: "1.25rem", width: width || '100%', gap: "0", ...styles, children: [_jsxs(Stack, { mb: "1.25rem", gap: "0", children: [_jsx(Title, { variant: "sectionHeader", children: title }), subtitle && _jsx(Title, { variant: "sectionSubheader", children: subtitle })] }), children] }));
+    return (_jsxs(Stack, { mt: "12.5px", width: width || '100%', gap: "0", ...styles, children: [_jsxs(Stack, { mb: "12.5px", gap: "0", children: [_jsx(Title, { variant: "sectionHeader", children: title }), subtitle && _jsx(Title, { variant: "sectionSubheader", children: subtitle })] }), children] }));
 };
 export { Frame };

package/dist/components/Layout/Frame/Frame.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Frame.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Frame/Frame.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAUhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CA4C5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAyBrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAqDtB,CAAC"}
+{"version":3,"file":"Frame.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Frame/Frame.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAWhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CA4C5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAyBrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAqDtB,CAAC"}

package/dist/components/Layout/Frame/Frame.stories.js

@@ -4,6 +4,7 @@ import { Text } from '../../Typography/Text/Text';
 import { Stack } from '../Stack/Stack';
 import { Button } from '../../Inputs/Buttons/Button/Button';
 import { neutral } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
 import { Card } from '../Card/Card';
 import { Title } from '../../Typography/Title/Title';
 import { TextInput } from '../../Inputs/TextInputs/TextInput/TextInput';
@@ -65,7 +66,7 @@ export const Default = {
                 backgroundColor: neutral[25],
                 border: `1px dashed ${neutral[50]}`,
                 borderRadius: '8px',
-                padding: '2rem',
+                padding: '20px',
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
@@ -73,5 +74,5 @@ export const Default = {
             }, children: _jsx(Text, { children: "Frame Content" }) }) })),
 };
 export const UseCases = {
-    render: () => (_jsxs(Stack, { gap: "3rem", sx: { width: '500px' }, children: [_jsx(Frame, { title: "User Details", subtitle: "Enter your user details", children: _jsxs(Stack, { gap: "1.6rem", children: [_jsx(TextInput, { label: "Name", placeholder: "Enter your name", type: "text", fullWidth: true }), _jsx(TextInput, { label: "Email", placeholder: "Enter your email", type: "email", fullWidth: true }), _jsxs(Group, { children: [_jsx(Button, { variant: "primary", children: "Save" }), _jsx(Button, { variant: "secondary", children: "Cancel" })] })] }) }), _jsx(Frame, { title: "Your Items", subtitle: "View your recent items", children: _jsx(Stack, { gap: "sm", children: [1, 2, 3].map((item) => (_jsxs(Card, { children: [_jsxs(Title, { variant: "cardHeader", children: ["Item ", item] }), _jsxs(Title, { variant: "cardSubheader", children: ["Description for item ", item] })] }, item))) }) }), _jsx(Frame, { title: "Stats This Week", children: _jsxs("div", { style: { display: 'flex', gap: '1rem', alignItems: 'stretch' }, children: [_jsxs("div", { style: { textAlign: 'center', padding: '1rem', backgroundColor: neutral[25], borderRadius: '8px', flex: 1 }, children: [_jsx(Text, { size: "xl", weight: "bold", children: "42" }), _jsx(Text, { size: "sm", color: neutral[100], children: "Ads Played" })] }), _jsxs("div", { style: { textAlign: 'center', padding: '1rem', backgroundColor: neutral[25], borderRadius: '8px', flex: 1 }, children: [_jsx(Text, { size: "xl", weight: "bold", children: "1.2K" }), _jsx(Text, { size: "sm", color: neutral[100], children: "Impressions" })] }), _jsxs("div", { style: { textAlign: 'center', padding: '1rem', backgroundColor: neutral[25], borderRadius: '8px', flex: 1 }, children: [_jsx(Text, { size: "xl", weight: "bold", children: "89%" }), _jsx(Text, { size: "sm", color: neutral[100], children: "Revenue Growth" })] })] }) })] })),
+    render: () => (_jsxs(Stack, { gap: spacing.xxl, sx: { width: '500px' }, children: [_jsx(Frame, { title: "User Details", subtitle: "Enter your user details", children: _jsxs(Stack, { gap: spacing.lg, children: [_jsx(TextInput, { label: "Name", placeholder: "Enter your name", type: "text", fullWidth: true }), _jsx(TextInput, { label: "Email", placeholder: "Enter your email", type: "email", fullWidth: true }), _jsxs(Group, { children: [_jsx(Button, { variant: "primary", children: "Save" }), _jsx(Button, { variant: "secondary", children: "Cancel" })] })] }) }), _jsx(Frame, { title: "Your Items", subtitle: "View your recent items", children: _jsx(Stack, { gap: spacing.sm, children: [1, 2, 3].map((item) => (_jsxs(Card, { children: [_jsxs(Title, { variant: "cardHeader", children: ["Item ", item] }), _jsxs(Title, { variant: "cardSubheader", children: ["Description for item ", item] })] }, item))) }) }), _jsx(Frame, { title: "Stats This Week", children: _jsxs("div", { style: { display: 'flex', gap: '10px', alignItems: 'stretch' }, children: [_jsxs("div", { style: { textAlign: 'center', padding: '10px', backgroundColor: neutral[25], borderRadius: '8px', flex: 1 }, children: [_jsx(Text, { size: "xl", weight: "bold", children: "42" }), _jsx(Text, { size: "sm", color: neutral[100], children: "Ads Played" })] }), _jsxs("div", { style: { textAlign: 'center', padding: '10px', backgroundColor: neutral[25], borderRadius: '8px', flex: 1 }, children: [_jsx(Text, { size: "xl", weight: "bold", children: "1.2K" }), _jsx(Text, { size: "sm", color: neutral[100], children: "Impressions" })] }), _jsxs("div", { style: { textAlign: 'center', padding: '10px', backgroundColor: neutral[25], borderRadius: '8px', flex: 1 }, children: [_jsx(Text, { size: "xl", weight: "bold", children: "89%" }), _jsx(Text, { size: "sm", color: neutral[100], children: "Revenue Growth" })] })] }) })] })),
 };

package/dist/components/Layout/Grid/Grid.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Grid/Grid.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAO9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CA+C3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AASnC,eAAO,MAAM,OAAO,EAAE,KA4BrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAuBzB,CAAC"}
+{"version":3,"file":"Grid.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Grid/Grid.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAQ9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CA+C3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AASnC,eAAO,MAAM,OAAO,EAAE,KA4BrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAuBzB,CAAC"}

package/dist/components/Layout/Grid/Grid.stories.js

@@ -3,6 +3,7 @@ import { Grid } from './Grid';
 import { Card } from '../Card/Card';
 import { Title } from '../../Typography/Title/Title';
 import { Stack } from '../Stack/Stack';
+import { spacing } from '../../../constants/spacing';
 const meta = {
     title: 'Components/Layout/Grid',
     component: Grid,
@@ -67,5 +68,5 @@ export const Default = {
     render: (args) => (_jsxs(Grid, { ...args, children: [_jsx(Grid.Col, { span: 4, children: _jsx(SampleCard, { title: "Column 1", description: "span={4}" }) }), _jsx(Grid.Col, { span: 4, children: _jsx(SampleCard, { title: "Column 2", description: "span={4}" }) }), _jsx(Grid.Col, { span: 4, children: _jsx(SampleCard, { title: "Column 3", description: "span={4}" }) })] })),
 };
 export const ColumnSpans = {
-    render: () => (_jsxs(Stack, { spacing: "md", sx: { width: '700px' }, children: [_jsxs(Grid, { gutter: "md", children: [_jsx(Grid.Col, { span: 6, children: _jsx(SampleCard, { title: "Column 1", description: "span={6}" }) }), _jsx(Grid.Col, { span: 6, children: _jsx(SampleCard, { title: "Column 2", description: "span={6}" }) })] }), _jsxs(Grid, { gutter: "md", children: [_jsx(Grid.Col, { span: 8, children: _jsx(SampleCard, { title: "Main Content", description: "span={8}" }) }), _jsx(Grid.Col, { span: 4, children: _jsx(SampleCard, { title: "Sidebar", description: "span={4}" }) })] }), _jsxs(Grid, { gutter: "md", children: [_jsx(Grid.Col, { span: 4, children: _jsx(SampleCard, { title: "Column 1", description: "span={4}" }) }), _jsx(Grid.Col, { span: 4, children: _jsx(SampleCard, { title: "Column 2", description: "span={4}" }) }), _jsx(Grid.Col, { span: 4, children: _jsx(SampleCard, { title: "Column 3", description: "span={4}" }) })] }), _jsxs(Grid, { gutter: "md", children: [_jsx(Grid.Col, { span: 3, children: _jsx(SampleCard, { title: "Left", description: "span={3}" }) }), _jsx(Grid.Col, { span: 6, children: _jsx(SampleCard, { title: "Center", description: "span={6}" }) }), _jsx(Grid.Col, { span: 3, children: _jsx(SampleCard, { title: "Right", description: "span={3}" }) })] })] })),
+    render: () => (_jsxs(Stack, { spacing: spacing.md, sx: { width: '700px' }, children: [_jsxs(Grid, { gutter: "md", children: [_jsx(Grid.Col, { span: 6, children: _jsx(SampleCard, { title: "Column 1", description: "span={6}" }) }), _jsx(Grid.Col, { span: 6, children: _jsx(SampleCard, { title: "Column 2", description: "span={6}" }) })] }), _jsxs(Grid, { gutter: "md", children: [_jsx(Grid.Col, { span: 8, children: _jsx(SampleCard, { title: "Main Content", description: "span={8}" }) }), _jsx(Grid.Col, { span: 4, children: _jsx(SampleCard, { title: "Sidebar", description: "span={4}" }) })] }), _jsxs(Grid, { gutter: "md", children: [_jsx(Grid.Col, { span: 4, children: _jsx(SampleCard, { title: "Column 1", description: "span={4}" }) }), _jsx(Grid.Col, { span: 4, children: _jsx(SampleCard, { title: "Column 2", description: "span={4}" }) }), _jsx(Grid.Col, { span: 4, children: _jsx(SampleCard, { title: "Column 3", description: "span={4}" }) })] }), _jsxs(Grid, { gutter: "md", children: [_jsx(Grid.Col, { span: 3, children: _jsx(SampleCard, { title: "Left", description: "span={3}" }) }), _jsx(Grid.Col, { span: 6, children: _jsx(SampleCard, { title: "Center", description: "span={6}" }) }), _jsx(Grid.Col, { span: 3, children: _jsx(SampleCard, { title: "Right", description: "span={3}" }) })] })] })),
 };

package/dist/components/Layout/Group/Group.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Group.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Group/Group.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAMhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CA8E5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAQnC,eAAO,MAAM,OAAO,EAAE,KA0BrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAc3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAuBvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC"}
+{"version":3,"file":"Group.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Group/Group.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAOhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CA8E5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAQnC,eAAO,MAAM,OAAO,EAAE,KA0BrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAc3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAuBvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC"}

package/dist/components/Layout/Group/Group.stories.js

@@ -4,6 +4,7 @@ import { Text } from '../../Typography/Text/Text';
 import { Card } from '../Card/Card';
 import { Stack } from '../Stack/Stack';
 import { neutral } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
 const meta = {
     title: 'Components/Layout/Group',
     component: Group,
@@ -98,16 +99,16 @@ export const Default = {
         styles: undefined,
     },
     decorators: [
-        (Story) => (_jsx("div", { style: { width: '500px', backgroundColor: neutral[25], padding: '2rem' }, children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { style: { width: '500px', backgroundColor: neutral[25], padding: '20px' }, children: _jsx(Story, {}) })),
     ],
     render: (args) => (_jsxs(Group, { ...args, children: [_jsx(SampleCard, { label: "Item 1" }), _jsx(SampleCard, { label: "Item 2" }), _jsx(SampleCard, { label: "Item 3" })] })),
 };
 export const PositionAlign = {
-    render: () => (_jsx(Stack, { spacing: "md", sx: { width: '500px' }, children: ['left', 'center', 'right', 'apart'].map((pos) => (_jsxs("div", { children: [_jsx(Text, { variant: "label", mb: "sm", children: _jsxs("code", { children: ["position=", '"' + pos + '"'] }) }), _jsxs(Group, { position: pos, spacing: "sm", sx: { backgroundColor: neutral[25], padding: '0.5rem' }, children: [_jsx(SampleCard, { label: "A" }), _jsx(SampleCard, { label: "B" })] })] }, pos))) })),
+    render: () => (_jsx(Stack, { spacing: spacing.md, sx: { width: '500px' }, children: ['left', 'center', 'right', 'apart'].map((pos) => (_jsxs("div", { children: [_jsx(Text, { variant: "label", mb: spacing.sm, children: _jsxs("code", { children: ["position=", '"' + pos + '"'] }) }), _jsxs(Group, { position: pos, spacing: spacing.sm, sx: { backgroundColor: neutral[25], padding: spacing.xs }, children: [_jsx(SampleCard, { label: "A" }), _jsx(SampleCard, { label: "B" })] })] }, pos))) })),
 };
 export const WrapItems = {
-    render: () => (_jsxs(Stack, { gap: "4rem", children: [_jsxs("div", { children: [_jsxs(Text, { variant: "label", mb: "sm", children: [_jsxs("code", { children: ["noWrap=", '{false}'] }), " (default, will continue to grow vertically)"] }), _jsxs(Group, { sx: { backgroundColor: neutral[25], padding: '0.5rem', width: '250px' }, children: [_jsx(SampleCard, { label: "First" }), _jsx(SampleCard, { label: "Second" }), _jsx(SampleCard, { label: "Third" }), _jsx(SampleCard, { label: "Fourth" })] })] }), _jsxs("div", { children: [_jsxs(Text, { variant: "label", mb: "sm", children: [_jsxs("code", { children: ["noWrap=", '{true}'] }), ", combined with ", _jsx("code", { children: "overflow='hidden'" }), " on the card and ", _jsx("code", { children: "truncate='end'" }), " on the text"] }), _jsxs(Group, { noWrap: true, spacing: "sm", sx: { backgroundColor: neutral[25], padding: '0.5rem', width: '250px' }, children: [_jsx(SampleCard, { label: "First" }), _jsx(SampleCard, { label: "Second" }), _jsx(SampleCard, { label: "Third" }), _jsx(SampleCard, { label: "Fourth" })] })] })] })),
+    render: () => (_jsxs(Stack, { gap: "40px", children: [_jsxs("div", { children: [_jsxs(Text, { variant: "label", mb: spacing.sm, children: [_jsxs("code", { children: ["noWrap=", '{false}'] }), " (default, will continue to grow vertically)"] }), _jsxs(Group, { sx: { backgroundColor: neutral[25], padding: spacing.xs, width: '250px' }, children: [_jsx(SampleCard, { label: "First" }), _jsx(SampleCard, { label: "Second" }), _jsx(SampleCard, { label: "Third" }), _jsx(SampleCard, { label: "Fourth" })] })] }), _jsxs("div", { children: [_jsxs(Text, { variant: "label", mb: spacing.sm, children: [_jsxs("code", { children: ["noWrap=", '{true}'] }), ", combined with ", _jsx("code", { children: "overflow='hidden'" }), " on the card and ", _jsx("code", { children: "truncate='end'" }), " on the text"] }), _jsxs(Group, { noWrap: true, spacing: spacing.sm, sx: { backgroundColor: neutral[25], padding: spacing.xs, width: '250px' }, children: [_jsx(SampleCard, { label: "First" }), _jsx(SampleCard, { label: "Second" }), _jsx(SampleCard, { label: "Third" }), _jsx(SampleCard, { label: "Fourth" })] })] })] })),
 };
 export const GrowItems = {
-    render: () => (_jsxs("div", { children: [_jsx(Text, { variant: "label", mb: "sm", children: _jsxs("code", { children: ["grow=", '{true}'] }) }), _jsxs(Group, { grow: true, spacing: "sm", sx: { backgroundColor: neutral[25], padding: '0.5rem', width: '400px' }, children: [_jsx(SampleCard, { label: "A" }), _jsx(SampleCard, { label: "B" })] })] })),
+    render: () => (_jsxs("div", { children: [_jsx(Text, { variant: "label", mb: spacing.sm, children: _jsxs("code", { children: ["grow=", '{true}'] }) }), _jsxs(Group, { grow: true, spacing: spacing.sm, sx: { backgroundColor: neutral[25], padding: spacing.xs, width: '400px' }, children: [_jsx(SampleCard, { label: "A" }), _jsx(SampleCard, { label: "B" })] })] })),
 };

package/dist/components/Layout/Loader/Loader.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Loader/Loader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AASlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAiB7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAyBF,eAAO,MAAM,mBAAmB,EAAE,KAKjC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAiB5B,CAAC"}
+{"version":3,"file":"Loader.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Loader/Loader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAUlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAiB7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAyBF,eAAO,MAAM,mBAAmB,EAAE,KAKjC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAiB5B,CAAC"}

package/dist/components/Layout/Loader/Loader.stories.js

@@ -6,6 +6,7 @@ import { Text } from '../../Typography/Text/Text';
 import { Button } from '../../Inputs/Buttons/Button/Button';
 import { Group } from '../Group/Group';
 import { useNotifications } from '../../../hooks/useNotifications';
+import { spacing } from '../../../constants/spacing';
 const meta = {
     title: 'Components/Misc/Loader',
     component: Loader,
@@ -42,7 +43,7 @@ const LoadingNotificationDemo = () => {
             setIsLoading(false);
         }, 3000);
     };
-    return (_jsx(Group, { gap: "0.5rem", children: _jsx(Button, { onClick: handleSuccess, loading: isLoading, children: "Save" }) }));
+    return (_jsx(Group, { gap: spacing.xs, children: _jsx(Button, { onClick: handleSuccess, loading: isLoading, children: "Save" }) }));
 };
 export const LoadingNotification = {
     render: () => _jsx(LoadingNotificationDemo, {}),
@@ -58,7 +59,7 @@ export const ButtonLoading = {
 };
 export const CenteredLoader = {
     decorators: [
-        (Story) => (_jsx("div", { style: { width: '300px', padding: '3.2rem' }, children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { style: { width: '300px', padding: spacing.xxl }, children: _jsx(Story, {}) })),
     ],
     render: () => (_jsxs(Stack, { align: "center", children: [_jsx(Loader, {}), _jsx(Text, { variant: "subtle", children: " Loading data..." })] })),
     parameters: {

package/dist/components/Layout/SectionCard/SectionCard.js

@@ -4,5 +4,5 @@ import { Stack } from '../Stack/Stack';
 import { Title } from '../../Typography/Title/Title';
 import { Box } from '../Box/Box';
 export const SectionCard = ({ title, subtitle, children, ...props }) => {
-    return (_jsx(Card, { p: "2.4rem", ...props, children: _jsxs(Stack, { gap: "2rem", children: [_jsxs(Stack, { gap: "0", children: [_jsx(Title, { variant: "cardHeader", children: title }), subtitle && _jsx(Title, { variant: "cardSubheader", children: subtitle })] }), _jsx(Box, { children: children })] }) }));
+    return (_jsx(Card, { p: "24px", ...props, children: _jsxs(Stack, { gap: "20px", children: [_jsxs(Stack, { gap: "0", children: [_jsx(Title, { variant: "cardHeader", children: title }), subtitle && _jsx(Title, { variant: "cardSubheader", children: subtitle })] }), _jsx(Box, { children: children })] }) }));
 };

package/dist/components/Layout/SectionCard/SectionCard.stories.js

@@ -65,7 +65,7 @@ const meta = {
             description: 'Padding of the card',
             table: {
                 type: { summary: 'string | number' },
-                defaultValue: { summary: "'0.8rem'" },
+                defaultValue: { summary: "'8px'" },
             },
         },
         withBorder: {
@@ -88,7 +88,7 @@ export const Default = {
     decorators: [
         (Story) => (_jsx("div", { style: { width: '400px' }, children: _jsx(Story, {}) })),
     ],
-    render: (args) => (_jsx(SectionCard, { ...args, children: _jsxs(Group, { gap: "1rem", children: [_jsx(IconBadge, { icon: _jsx(IconEye, { size: 30 }), color: "salmon" }), _jsx(Title, { weight: "semibold", size: "2xl", color: neutral[200], children: "55,000" })] }) })),
+    render: (args) => (_jsx(SectionCard, { ...args, children: _jsxs(Group, { gap: "10px", children: [_jsx(IconBadge, { icon: _jsx(IconEye, { size: 30 }), color: "salmon" }), _jsx(Title, { weight: "semibold", size: "2xl", color: neutral[200], children: "55,000" })] }) })),
 };
 export const Animation = {
     render: () => (_jsx("div", { style: { width: '400px' }, children: _jsx(SectionCard, { title: "Example Card", subtitle: "With an example subtitle", animate: true, children: _jsx(Text, { variant: "subtle", children: "This card lifts on hover" }) }) })),

package/dist/components/Layout/Stack/Stack.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Stack/Stack.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAMhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CA6D5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAQnC,eAAO,MAAM,OAAO,EAAE,KAwBrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAgB7B,CAAC"}
+{"version":3,"file":"Stack.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Stack/Stack.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAOhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CA6D5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAQnC,eAAO,MAAM,OAAO,EAAE,KAwBrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAgB7B,CAAC"}

package/dist/components/Layout/Stack/Stack.stories.js

@@ -4,6 +4,7 @@ import { Text } from '../../Typography/Text/Text';
 import { Card } from '../Card/Card';
 import { Group } from '../Group/Group';
 import { neutral } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
 const meta = {
     title: 'Components/Layout/Stack',
     component: Stack,
@@ -79,10 +80,10 @@ export const Default = {
         styles: undefined,
     },
     decorators: [
-        (Story) => (_jsx("div", { style: { width: '500px', backgroundColor: neutral[25], padding: '2rem' }, children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { style: { width: '500px', backgroundColor: neutral[25], padding: '20px' }, children: _jsx(Story, {}) })),
     ],
     render: (args) => (_jsxs(Stack, { ...args, children: [_jsx(SampleCard, { label: "Item 1" }), _jsx(SampleCard, { label: "Item 2" }), _jsx(SampleCard, { label: "Item 3" })] })),
 };
 export const PositionContent = {
-    render: () => (_jsx(Stack, { gap: "xl", justify: "flex-start", children: _jsx(Group, { children: ['flex-start', 'center', 'space-between'].map((val) => (_jsxs("div", { children: [_jsx(Text, { variant: "label", mb: "sm", children: _jsxs("code", { children: ["justify=", '"' + val + '"'] }) }), _jsxs(Stack, { justify: val, spacing: "sm", sx: { height: '200px', width: '200px', border: `1px dashed ${neutral[50]}`, padding: '0.5rem' }, children: [_jsx(SampleCard, { label: "A" }), _jsx(SampleCard, { label: "B" })] })] }, val))) }) })),
+    render: () => (_jsx(Stack, { gap: spacing.lg, justify: "flex-start", children: _jsx(Group, { children: ['flex-start', 'center', 'space-between'].map((val) => (_jsxs("div", { children: [_jsx(Text, { variant: "label", mb: spacing.sm, children: _jsxs("code", { children: ["justify=", '"' + val + '"'] }) }), _jsxs(Stack, { justify: val, spacing: spacing.sm, sx: { height: '200px', width: '200px', border: `1px dashed ${neutral[50]}`, padding: spacing.xs }, children: [_jsx(SampleCard, { label: "A" }), _jsx(SampleCard, { label: "B" })] })] }, val))) }) })),
 };

package/dist/components/Layout/Table/Table.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Table/Table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAUhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CA6B5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAuQnC,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAqBvC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAoBnC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAmB3B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAsBlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAerC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAa7B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAajC,CAAC"}
+{"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Table/Table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAWhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CA6B5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAuQnC,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAqBvC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAoBnC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAmB3B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAsBlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAerC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAa7B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAajC,CAAC"}

package/dist/components/Layout/Table/Table.stories.js

@@ -6,6 +6,7 @@ import { Text } from '../../Typography/Text/Text';
 import { Center } from '../Center/Center';
 import { IconInfoCircle } from '@tabler/icons-react';
 import { neutral } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
 import { Group } from '../Group/Group';
 const meta = {
     title: 'Components/Layout/Table',
@@ -173,7 +174,7 @@ const ProductListItem = ({ data }) => {
                 return status;
         }
     };
-    return (_jsxs("tr", { children: [_jsx("td", { children: data.name }), _jsx("td", { children: data.category }), _jsxs("td", { children: ["$", data.price.toFixed(2)] }), _jsx("td", { children: data.stock }), _jsx("td", { children: _jsx(Badge, { color: getStatusColor(data.status), variant: "filled", size: "sm", children: getStatusLabel(data.status) }) }), _jsx("td", { children: _jsxs("div", { style: { display: 'flex', gap: '8px' }, children: [_jsx(Button, { size: "sm", variant: "primary", children: "Edit" }), _jsx(Button, { size: "sm", variant: "secondary", children: "View" })] }) })] }));
+    return (_jsxs("tr", { children: [_jsx("td", { children: data.name }), _jsx("td", { children: data.category }), _jsxs("td", { children: ["$", data.price.toFixed(2)] }), _jsx("td", { children: data.stock }), _jsx("td", { children: _jsx(Badge, { color: getStatusColor(data.status), variant: "filled", size: "sm", children: getStatusLabel(data.status) }) }), _jsx("td", { children: _jsxs("div", { style: { display: 'flex', gap: spacing.sm }, children: [_jsx(Button, { size: "sm", variant: "primary", children: "Edit" }), _jsx(Button, { size: "sm", variant: "secondary", children: "View" })] }) })] }));
 };
 const ProjectListItem = ({ data }) => {
     const getPriorityColor = (priority) => {
@@ -188,7 +189,7 @@ const ProjectListItem = ({ data }) => {
                 return 'neutral';
         }
     };
-    return (_jsxs("tr", { children: [_jsx("td", { children: data.title }), _jsx("td", { children: data.team.join(', ') }), _jsx("td", { children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx("div", { style: {
+    return (_jsxs("tr", { children: [_jsx("td", { children: data.title }), _jsx("td", { children: data.team.join(', ') }), _jsx("td", { children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: spacing.sm }, children: [_jsx("div", { style: {
                                 flex: 1,
                                 height: '8px',
                                 backgroundColor: '#e0e0e0',
@@ -289,7 +290,7 @@ export const TableWithPlaceholder = {
             { heading: 'Name', style: { width: '50%' } },
             { heading: 'Email', style: { width: '50%' } },
         ],
-        placeholder: (_jsx(Center, { py: '5rem', children: _jsxs(Group, { gap: '0.5rem', align: 'center', children: [_jsx(IconInfoCircle, { color: neutral[200], size: '2rem' }), _jsx(Text, { children: "No data available at this time" })] }) })),
+        placeholder: (_jsx(Center, { py: '50px', children: _jsxs(Group, { gap: spacing.xs, align: 'center', children: [_jsx(IconInfoCircle, { color: neutral[200], size: '20px' }), _jsx(Text, { children: "No data available at this time" })] }) })),
     },
     parameters: {
         docs: {

package/dist/components/Layout/Tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,SAAS,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAInF,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,UAAU,CAAC;IAChF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;CAC3C;AA+CD,eAAO,MAAM,IAAI,4EA7C0F,SAAS;;;;CAiDlH,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,SAAS,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAKnF,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,UAAU,CAAC;IAChF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;CAC3C;AA+CD,eAAO,MAAM,IAAI,4EA7C0F,SAAS;;;;CAiDlH,CAAC"}