@taiv/ui 1.13.0 → 1.14.1

package/dist/components/Info/Badge/variants.js

@@ -1,4 +1,5 @@
 import { colors } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
 export function getVariantStyles(color) {
     return {
         outline: {
@@ -6,7 +7,7 @@ export function getVariantStyles(color) {
             color: colors[color][200],
             backgroundColor: 'transparent',
             borderRadius: '8px',
-            padding: '0.4rem 0.8rem',
+            padding: `${spacing.xs} ${spacing.sm}`,
         },
         filled: {
             backgroundColor: colors[color][50],
@@ -16,7 +17,7 @@ export function getVariantStyles(color) {
             background: `linear-gradient(to right, ${colors[color][50]}, ${colors[color][200]})`,
             color: 'white',
             borderRadius: '16px',
-            padding: '0.4rem 0.8rem',
+            padding: `${spacing.xs} ${spacing.sm}`,
         },
     };
 }

package/dist/components/Info/InfoCard/InfoCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfoCard.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/InfoCard/InfoCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEnD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAChE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,QAAQ,GAAI,qCAAiD,aAAa,4CAwBtF,CAAC"}
+{"version":3,"file":"InfoCard.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/InfoCard/InfoCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAGnD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAChE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,QAAQ,GAAI,qCAAiD,aAAa,4CAwBtF,CAAC"}

package/dist/components/Info/InfoCard/InfoCard.js

@@ -2,13 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Card } from '../../Layout/Card/Card';
 import { Center } from '../../Layout/Center/Center';
 import { colors } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
 export const InfoCard = ({ children, variant = 'primary', ...cardProps }) => {
     const colorPalette = colors[variant];
     const style = {
         border: `1px solid ${colorPalette[200]}`,
         backgroundColor: colorPalette[25],
         color: colorPalette[200] + ' !important',
-        padding: '3.2rem 6.4rem',
+        padding: `${spacing.xxl} 64px`,
     };
     return (_jsx(Card, { shadow: "lg", style: style, sx: {
             '& *': {

package/dist/components/Info/Modals/FormModal/FormModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Modals/FormModal/FormModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAI5C,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;IAC1C,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,SAAS,GAAI,uJAavB,cAAc,4CAiGhB,CAAC"}
+{"version":3,"file":"FormModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Modals/FormModal/FormModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAI5C,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;IAC1C,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,SAAS,GAAI,uJAavB,cAAc,4CAiGhB,CAAC"}

package/dist/components/Info/Modals/FormModal/FormModal.js

@@ -2,22 +2,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Modal as MantineModal } from "@mantine/core";
 import { neutral } from "../../../../constants/colors";
+import { spacing } from '../../../../constants/spacing';
 import { Stack } from "../../../Layout/Stack/Stack";
 import { Center } from "../../../Layout/Center/Center";
 import { modalVariants } from "../variants";
 import { Group } from "../../../Layout/Group/Group";
 import { Button } from "../../../Inputs/Buttons/Button/Button";
-export const FormModal = ({ opened, onClose, icon, children, size = "40rem", modalVariant = "info", confirmButtonDisabled = false, confirmButtonLoading = false, onCancel, onConfirm, cancelLabel, confirmLabel, }) => {
+export const FormModal = ({ opened, onClose, icon, children, size = "400px", modalVariant = "info", confirmButtonDisabled = false, confirmButtonLoading = false, onCancel, onConfirm, cancelLabel, confirmLabel, }) => {
     const selectedVariant = modalVariants[modalVariant];
     const iconContainer = {
-        width: "4.2rem",
-        height: "4.2rem",
+        width: "42px",
+        height: "42px",
         borderRadius: "50%",
         backgroundColor: selectedVariant.iconBackgroundColor,
         border: `2px solid ${selectedVariant.iconColor}`,
     };
     const coloredIcon = icon && React.cloneElement(icon, { color: icon.props.color || selectedVariant.iconColor });
-    const modalIcon = coloredIcon || (_jsx("i", { className: selectedVariant.icon, style: { color: selectedVariant.iconColor, fontSize: "2rem" } }));
+    const modalIcon = coloredIcon || (_jsx("i", { className: selectedVariant.icon, style: { color: selectedVariant.iconColor, fontSize: "20px" } }));
     return (_jsx(MantineModal, { opened: opened, onClose: onClose, centered: true, radius: "16px", overlayProps: {
             opacity: 0,
             blur: 4,
@@ -28,8 +29,8 @@ export const FormModal = ({ opened, onClose, icon, children, size = "40rem", mod
             style: {
                 borderRadius: "16px",
                 backgroundColor: neutral[50],
-                width: "1.8rem",
-                height: "1.8rem",
+                width: "18px",
+                height: "18px",
             },
         }, styles: {
             content: {
@@ -38,13 +39,13 @@ export const FormModal = ({ opened, onClose, icon, children, size = "40rem", mod
                 boxShadow: "0px 0px 19px 0px #00000040",
             },
             header: {
-                padding: "0.8rem",
+                padding: spacing.sm,
             },
             close: {
                 borderRadius: "16px",
                 backgroundColor: neutral[50],
-                width: "1.8rem",
-                height: "1.8rem",
+                width: "18px",
+                height: "18px",
                 "&:hover": {
                     backgroundColor: neutral[50],
                 },
@@ -53,7 +54,7 @@ export const FormModal = ({ opened, onClose, icon, children, size = "40rem", mod
                 },
             },
             body: {
-                padding: "0 3.2rem 1.6rem 3.2rem",
+                padding: `0 ${spacing.xxl} ${spacing.lg} ${spacing.xxl}`,
             },
-        }, children: _jsx(Center, { h: "100%", w: "100%", children: _jsxs(Stack, { gap: "2rem", h: "100%", w: "100%", align: "center", children: [_jsxs(Stack, { gap: "1.5rem", align: "center", children: [_jsx(Center, { style: iconContainer, children: modalIcon }), children && (_jsx(Stack, { gap: "0.25rem", align: "center", children: children }))] }), _jsx(Center, { h: "100%", w: "100%", children: _jsxs(Group, { gap: "1rem", align: "center", children: [_jsx(Button, { onClick: onCancel, variant: "secondary", children: cancelLabel || selectedVariant.cancelLabel }), _jsx(Button, { onClick: onConfirm, variant: selectedVariant.buttonVariant, disabled: confirmButtonDisabled, loading: confirmButtonLoading, children: confirmLabel || selectedVariant.confirmLabel })] }) })] }) }) }));
+        }, children: _jsx(Center, { h: "100%", w: "100%", children: _jsxs(Stack, { gap: "20px", h: "100%", w: "100%", align: "center", children: [_jsxs(Stack, { gap: spacing.lg, align: "center", children: [_jsx(Center, { style: iconContainer, children: modalIcon }), children && (_jsx(Stack, { gap: spacing.xxs, align: "center", children: children }))] }), _jsx(Center, { h: "100%", w: "100%", children: _jsxs(Group, { gap: "10px", align: "center", children: [_jsx(Button, { onClick: onCancel, variant: "secondary", children: cancelLabel || selectedVariant.cancelLabel }), _jsx(Button, { onClick: onConfirm, variant: selectedVariant.buttonVariant, disabled: confirmButtonDisabled, loading: confirmButtonLoading, children: confirmLabel || selectedVariant.confirmLabel })] }) })] }) }) }));
 };

package/dist/components/Info/Modals/FormModal/FormModal.stories.js

@@ -48,7 +48,7 @@ const meta = {
             description: "Modal size (CSS value or number in px).",
             table: {
                 type: { summary: "string | number" },
-                defaultValue: { summary: "'40rem'" },
+                defaultValue: { summary: "'400px'" },
             },
         },
         modalVariant: {
@@ -106,7 +106,7 @@ export default meta;
 export const Default = {
     args: {
         modalVariant: "info",
-        size: "40rem",
+        size: "400px",
         cancelLabel: "",
         confirmLabel: "",
     },
@@ -130,7 +130,7 @@ return (
       onCancel={() => setOpened(false)}
       onConfirm={() => setOpened(false)}
       modalVariant='info'
-      size='40rem'
+      size='400px'
       children={
         <Title variant="cardSubheader" align="center">
           Example message.
@@ -165,7 +165,7 @@ export const Variants = {
     render: () => {
         const [opened, setOpened] = useState(false);
         const [variant, setVariant] = useState("info");
-        return (_jsxs(_Fragment, { children: [_jsx(Center, { children: _jsx(Group, { gap: "1rem", children: Object.keys(modalVariants).map((v) => (_jsx(Button, { onClick: () => {
+        return (_jsxs(_Fragment, { children: [_jsx(Center, { children: _jsx(Group, { gap: "10px", children: Object.keys(modalVariants).map((v) => (_jsx(Button, { onClick: () => {
                                 setVariant(v);
                                 setOpened(true);
                             }, children: v }, v))) }) }), _jsx(FormModal, { opened: opened, onClose: () => setOpened(false), onCancel: () => setOpened(false), onConfirm: () => setOpened(false), modalVariant: variant, children: _jsx(Title, { variant: "cardSubheader", align: "center", children: modalVariants[variant].message }) })] }));
@@ -174,13 +174,13 @@ export const Variants = {
 export const Sizes = {
     render: () => {
         const [opened, setOpened] = useState(false);
-        const [size, setSize] = useState("40rem");
+        const [size, setSize] = useState("400px");
         const sizes = [
-            { label: "30rem", value: "30rem" },
-            { label: "40rem (Default)", value: "40rem" },
-            { label: "60rem", value: "60rem" },
+            { label: "300px", value: "300px" },
+            { label: "400px (Default)", value: "400px" },
+            { label: "600px", value: "600px" },
         ];
-        return (_jsxs(_Fragment, { children: [_jsx(Center, { children: _jsx(Group, { gap: "1rem", children: sizes.map(({ label, value }) => (_jsx(Button, { onClick: () => {
+        return (_jsxs(_Fragment, { children: [_jsx(Center, { children: _jsx(Group, { gap: "10px", children: sizes.map(({ label, value }) => (_jsx(Button, { onClick: () => {
                                 setSize(value);
                                 setOpened(true);
                             }, children: label }, value))) }) }), _jsx(FormModal, { opened: opened, onClose: () => setOpened(false), onCancel: () => setOpened(false), onConfirm: () => setOpened(false), size: size, children: _jsxs(Title, { variant: "cardSubheader", align: "center", children: ["Modal size: ", size] }) })] }));
@@ -196,7 +196,7 @@ export const ConfirmButtonDisabled = {
     render: () => {
         const [opened, setOpened] = useState(false);
         const [name, setName] = useState("");
-        return (_jsxs(_Fragment, { children: [_jsx(Center, { children: _jsx(Button, { onClick: () => setOpened(true), children: "Open FormModal" }) }), _jsx(FormModal, { opened: opened, onClose: () => setOpened(false), onCancel: () => setOpened(false), onConfirm: () => setOpened(false), confirmButtonDisabled: name.trim().length === 0, children: _jsxs(Stack, { gap: "1rem", align: "center", children: [_jsx(Title, { variant: "cardSubheader", align: "center", children: "Enter your name to enable the confirm button." }), _jsx(TextInput, { label: "Name", placeholder: "Enter your name", value: name, onChange: (e) => setName(e.target.value) })] }) })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Center, { children: _jsx(Button, { onClick: () => setOpened(true), children: "Open FormModal" }) }), _jsx(FormModal, { opened: opened, onClose: () => setOpened(false), onCancel: () => setOpened(false), onConfirm: () => setOpened(false), confirmButtonDisabled: name.trim().length === 0, children: _jsxs(Stack, { gap: "10px", align: "center", children: [_jsx(Title, { variant: "cardSubheader", align: "center", children: "Enter your name to enable the confirm button." }), _jsx(TextInput, { label: "Name", placeholder: "Enter your name", value: name, onChange: (e) => setName(e.target.value) })] }) })] }));
     },
 };
 export const ConfirmButtonLoading = {
@@ -217,6 +217,6 @@ export const CompleteExample = {
     render: () => {
         const [opened, setOpened] = useState(false);
         const [quantity, setQuantity] = useState(1);
-        return (_jsxs(_Fragment, { children: [_jsx(Center, { children: _jsx(Button, { onClick: () => setOpened(true), children: "Add to Cart" }) }), _jsx(FormModal, { opened: opened, onClose: () => setOpened(false), onCancel: () => setOpened(false), onConfirm: () => setOpened(false), modalVariant: "confirm", icon: _jsx(IconShoppingCart, { color: primary[200] }), cancelLabel: "Cancel", confirmLabel: "Add to Cart", children: _jsxs(Stack, { gap: "1rem", align: "center", children: [_jsx(Title, { variant: "cardHeader", align: "center", children: "Add Item to Cart" }), _jsx(Title, { variant: "cardSubheader", align: "center", children: "Select the quantity you would like to add." }), _jsx(NumberInput, { label: "Quantity", value: quantity, onChange: (val) => setQuantity(val !== null && val !== void 0 ? val : 1), min: 1, max: 99, step: 1 })] }) })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Center, { children: _jsx(Button, { onClick: () => setOpened(true), children: "Add to Cart" }) }), _jsx(FormModal, { opened: opened, onClose: () => setOpened(false), onCancel: () => setOpened(false), onConfirm: () => setOpened(false), modalVariant: "confirm", icon: _jsx(IconShoppingCart, { color: primary[200] }), cancelLabel: "Cancel", confirmLabel: "Add to Cart", children: _jsxs(Stack, { gap: "10px", align: "center", children: [_jsx(Title, { variant: "cardHeader", align: "center", children: "Add Item to Cart" }), _jsx(Title, { variant: "cardSubheader", align: "center", children: "Select the quantity you would like to add." }), _jsx(NumberInput, { label: "Quantity", value: quantity, onChange: (val) => setQuantity(val !== null && val !== void 0 ? val : 1), min: 1, max: 99, step: 1 })] }) })] }));
     },
 };

package/dist/components/Info/Modals/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Modals/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,UAAU,UAAU;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAGD,eAAO,MAAM,KAAK,GAAI,6DAAuE,UAAU,4CAoEtG,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Modals/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,UAAU,UAAU;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAGD,eAAO,MAAM,KAAK,GAAI,6DAAuE,UAAU,4CAoEtG,CAAC"}

package/dist/components/Info/Modals/Modal/Modal.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Modal as MantineModal } from '@mantine/core';
 import { neutral } from '../../../../constants/colors';
+import { spacing } from '../../../../constants/spacing';
 import { Title } from '../../../Typography/Title/Title';
 import { Stack } from '../../../Layout/Stack/Stack';
 import { Center } from '../../../Layout/Center/Center';
 // Base modal is intended to be extended and customized - use InfoModal or ConfirmationModal for common use cases
-export const Modal = ({ opened, onClose, icon, title, subtitle, children, width = '40rem' }) => {
+export const Modal = ({ opened, onClose, icon, title, subtitle, children, width = '400px' }) => {
     return (_jsx(MantineModal, { opened: opened, onClose: onClose, centered: true, radius: '16px', overlayProps: {
             opacity: 0,
             blur: 4,
@@ -16,8 +17,8 @@ export const Modal = ({ opened, onClose, icon, title, subtitle, children, width
             style: {
                 borderRadius: '16px',
                 backgroundColor: neutral[50],
-                width: '1.8rem',
-                height: '1.8rem',
+                width: '18px',
+                height: '18px',
             },
         }, styles: {
             content: {
@@ -26,7 +27,7 @@ export const Modal = ({ opened, onClose, icon, title, subtitle, children, width
                 boxShadow: '0px 0px 19px 0px #00000040',
             },
             header: {
-                padding: '0.8rem',
+                padding: spacing.sm,
             },
             close: {
                 '&:hover': {
@@ -37,7 +38,7 @@ export const Modal = ({ opened, onClose, icon, title, subtitle, children, width
                 },
             },
             body: {
-                padding: '0 3.2rem 1.6rem 3.2rem',
+                padding: `0 ${spacing.xxl} ${spacing.lg} ${spacing.xxl}`,
             },
-        }, children: _jsx(Center, { h: "100%", w: "100%", children: _jsxs(Stack, { gap: "2rem", h: "100%", w: "100%", align: "center", children: [_jsxs(Stack, { gap: "1.5rem", align: "center", children: [icon, _jsxs(Stack, { gap: "0.25rem", align: "center", children: [_jsx(Title, { variant: "cardHeader", align: "center", children: title }), subtitle && (_jsx(Title, { variant: "cardSubheader", align: "center", children: subtitle }))] })] }), _jsx(Center, { h: "100%", w: "100%", children: children })] }) }) }));
+        }, children: _jsx(Center, { h: "100%", w: "100%", children: _jsxs(Stack, { gap: "20px", h: "100%", w: "100%", align: "center", children: [_jsxs(Stack, { gap: spacing.lg, align: "center", children: [icon, _jsxs(Stack, { gap: spacing.xxs, align: "center", children: [_jsx(Title, { variant: "cardHeader", align: "center", children: title }), subtitle && (_jsx(Title, { variant: "cardSubheader", align: "center", children: subtitle }))] })] }), _jsx(Center, { h: "100%", w: "100%", children: children })] }) }) }));
 };

package/dist/components/Info/Modals/Modal/Modal.stories.js

@@ -27,7 +27,7 @@ const meta = {
             description: 'Custom width override',
             table: {
                 type: { summary: 'string | number' },
-                defaultValue: { summary: "'40rem'" },
+                defaultValue: { summary: "'400px'" },
             },
         },
         children: { control: false, description: 'Modal content', table: { type: { summary: 'ReactNode' } } },

package/dist/components/Info/Modals/Modals.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modals.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Modals/Modals.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAU5D,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,UAAU,aAAa;IACrB,OAAO,EAAE,MAAM,OAAO,aAAa,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,aAAa,CA+B7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAoBrC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAeF,eAAO,MAAM,YAAY,EAAE,KAE1B,CAAC;AAsBF,eAAO,MAAM,mBAAmB,EAAE,KAOjC,CAAC;AAeF,eAAO,MAAM,oBAAoB,EAAE,KAElC,CAAC;AA8BF,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC"}
+{"version":3,"file":"Modals.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Modals/Modals.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAU5D,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAG3C,UAAU,aAAa;IACrB,OAAO,EAAE,MAAM,OAAO,aAAa,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,aAAa,CA+B7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAoBrC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAeF,eAAO,MAAM,YAAY,EAAE,KAE1B,CAAC;AAsBF,eAAO,MAAM,mBAAmB,EAAE,KAOjC,CAAC;AAeF,eAAO,MAAM,oBAAoB,EAAE,KAElC,CAAC;AA8BF,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC"}

package/dist/components/Info/Modals/Modals.stories.js

@@ -9,6 +9,7 @@ import { FormModal } from './FormModal/FormModal';
 import { TextInput } from '../../Inputs/TextInputs/TextInput/TextInput';
 import { Title } from '../../Typography/Title/Title';
 import { modalVariants } from './variants';
+import { spacing } from '../../../constants/spacing';
 const meta = {
     title: 'Hooks/Modals',
     tags: ['!dev'],
@@ -60,7 +61,7 @@ export const Default = {
 };
 const InfoVariantsDemo = () => {
     const { show } = useInfoModal();
-    return (_jsxs(Group, { gap: "0.5rem", children: [_jsx(Button, { variant: "primary", onClick: () => show({ variant: 'info' }), children: "Info" }), _jsx(Button, { variant: "success", onClick: () => show({ variant: 'success' }), children: "Success" }), _jsx(Button, { variant: "cancel", onClick: () => show({ variant: 'error' }), children: "Error" }), _jsx(Button, { variant: "warning", onClick: () => show({ variant: 'warning' }), children: "Warning" })] }));
+    return (_jsxs(Group, { gap: spacing.xs, children: [_jsx(Button, { variant: "primary", onClick: () => show({ variant: 'info' }), children: "Info" }), _jsx(Button, { variant: "success", onClick: () => show({ variant: 'success' }), children: "Success" }), _jsx(Button, { variant: "cancel", onClick: () => show({ variant: 'error' }), children: "Error" }), _jsx(Button, { variant: "warning", onClick: () => show({ variant: 'warning' }), children: "Warning" })] }));
 };
 export const InfoVariants = {
     render: () => _jsx(InfoVariantsDemo, {}),
@@ -85,7 +86,7 @@ export const ConfirmationDefault = {
 };
 const ConfirmationVariantsDemo = () => {
     const { show } = useConfirmationModal();
-    return (_jsxs(Group, { gap: "0.5rem", children: [_jsx(Button, { variant: "primary", onClick: () => show({ variant: 'confirm', onConfirm: () => console.log('confirmed') }), children: "Confirm" }), _jsx(Button, { variant: "cancel", onClick: () => show({ variant: 'cancel', onConfirm: () => console.log('confirmed') }), children: "Cancel" }), _jsx(Button, { variant: "warning", onClick: () => show({ variant: 'warning', onConfirm: () => console.log('confirmed') }), children: "Warning" }), _jsx(Button, { variant: "success", onClick: () => show({ variant: 'success', onConfirm: () => console.log('confirmed') }), children: "Success" })] }));
+    return (_jsxs(Group, { gap: spacing.xs, children: [_jsx(Button, { variant: "primary", onClick: () => show({ variant: 'confirm', onConfirm: () => console.log('confirmed') }), children: "Confirm" }), _jsx(Button, { variant: "cancel", onClick: () => show({ variant: 'cancel', onConfirm: () => console.log('confirmed') }), children: "Cancel" }), _jsx(Button, { variant: "warning", onClick: () => show({ variant: 'warning', onConfirm: () => console.log('confirmed') }), children: "Warning" }), _jsx(Button, { variant: "success", onClick: () => show({ variant: 'success', onConfirm: () => console.log('confirmed') }), children: "Success" })] }));
 };
 export const ConfirmationVariants = {
     render: () => _jsx(ConfirmationVariantsDemo, {}),
@@ -94,7 +95,7 @@ const FormModalExample = () => {
     const [opened, setOpened] = useState(false);
     const [name, setName] = useState('');
     const [email, setEmail] = useState('');
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpened(true), children: "Add User" }), _jsx(FormModal, { opened: opened, onClose: () => setOpened(false), onCancel: () => setOpened(false), onConfirm: () => setOpened(false), modalVariant: "info", confirmLabel: "Submit", confirmButtonDisabled: name.trim().length === 0, children: _jsxs(Stack, { gap: "1rem", align: "center", children: [_jsx(Title, { variant: "cardSubheader", align: "center", children: "Fill out the user information below." }), _jsx(TextInput, { label: "Name", placeholder: "Enter a name", value: name, onChange: (e) => setName(e.target.value) }), _jsx(TextInput, { label: "Email", placeholder: "Enter an email", value: email, onChange: (e) => setEmail(e.target.value) })] }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpened(true), children: "Add User" }), _jsx(FormModal, { opened: opened, onClose: () => setOpened(false), onCancel: () => setOpened(false), onConfirm: () => setOpened(false), modalVariant: "info", confirmLabel: "Submit", confirmButtonDisabled: name.trim().length === 0, children: _jsxs(Stack, { gap: "10px", align: "center", children: [_jsx(Title, { variant: "cardSubheader", align: "center", children: "Fill out the user information below." }), _jsx(TextInput, { label: "Name", placeholder: "Enter a name", value: name, onChange: (e) => setName(e.target.value) }), _jsx(TextInput, { label: "Email", placeholder: "Enter an email", value: email, onChange: (e) => setEmail(e.target.value) })] }) })] }));
 };
 export const FormModalDemo = {
     render: () => _jsx(FormModalExample, {}),

package/dist/components/Info/Notifications/NotificationProvider/NotificationProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationProvider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Notifications/NotificationProvider/NotificationProvider.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,oBAAoB,+CA2ChC,CAAC"}
+{"version":3,"file":"NotificationProvider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Notifications/NotificationProvider/NotificationProvider.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,oBAAoB,+CA2ChC,CAAC"}

package/dist/components/Info/Notifications/NotificationProvider/NotificationProvider.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Notifications } from '@mantine/notifications';
 import { createStyles } from '@mantine/core';
 import { neutral } from '../../../../constants/colors';
+import { spacing } from '../../../../constants/spacing';
 import { useMobile } from '../../../../hooks/useMediaQuery';
 export const NotificationProvider = () => {
     const isMobile = useMobile();
@@ -10,26 +11,26 @@ export const NotificationProvider = () => {
             zIndex: 2000,
             '& .mantine-Notification-root': {
                 backgroundColor: 'white',
-                padding: '1.2rem 1.6rem',
+                padding: `${spacing.md} ${spacing.lg}`,
                 minHeight: 'auto',
                 borderRadius: '0 8px 8px 0',
             },
             '& .mantine-Notification-title': {
-                fontSize: '1.5rem',
+                fontSize: '15px',
                 fontWeight: 500,
                 fontFamily: 'Poppins, sans-serif !important',
                 color: neutral[300],
             },
             '& .mantine-Notification-description': {
-                fontSize: '1.25rem',
+                fontSize: '12.5px',
                 color: neutral[200],
                 fontFamily: 'Poppins, sans-serif !important',
                 lineHeight: 1.4,
             },
             '& .mantine-Notification-icon': {
-                marginRight: '1.5rem',
-                marginLeft: '0.75rem',
-                fontSize: '2rem',
+                marginRight: spacing.lg,
+                marginLeft: spacing.sm,
+                fontSize: '20px',
                 backgroundColor: 'transparent !important',
             },
             '& .mantine-Notification-icon > div': {

package/dist/components/Info/Notifications/Notifications.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Notifications.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Notifications/Notifications.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,6CAA6C,CAAC;AAKnF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,oBAAoB,CAuC3C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAqBnC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAgBF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAQF,eAAO,MAAM,YAAY,EAAE,KAE1B,CAAC;AAyCF,eAAO,MAAM,kBAAkB,EAAE,KAEhC,CAAC"}
+{"version":3,"file":"Notifications.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Notifications/Notifications.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,6CAA6C,CAAC;AAMnF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,oBAAoB,CAuC3C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAqBnC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAgBF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAQF,eAAO,MAAM,YAAY,EAAE,KAE1B,CAAC;AAyCF,eAAO,MAAM,kBAAkB,EAAE,KAEhC,CAAC"}

package/dist/components/Info/Notifications/Notifications.stories.js

@@ -4,6 +4,7 @@ import { NotificationProvider } from './NotificationProvider/NotificationProvide
 import { Group } from '../../Layout/Group/Group';
 import { Button } from '../../Inputs/Buttons/Button/Button';
 import { useNotifications } from '../../../hooks/useNotifications';
+import { spacing } from '../../../constants/spacing';
 const meta = {
     title: 'Hooks/Notifications',
     tags: ['!dev'],
@@ -65,7 +66,7 @@ export const Default = {
 };
 const VariantsDemo = () => {
     const { show } = useNotifications();
-    return (_jsxs(Group, { gap: "0.5rem", children: [_jsx(Button, { variant: "success", onClick: () => show({ variant: 'success', message: 'Operation completed successfully!' }), children: "Success" }), _jsx(Button, { variant: "cancel", onClick: () => show({ variant: 'error', message: 'Something went wrong!' }), children: "Error" }), _jsx(Button, { variant: "warning", onClick: () => show({ variant: 'warning', message: 'Please review your input' }), children: "Warning" }), _jsx(Button, { variant: "primary", onClick: () => show({ variant: 'info', message: 'Here is some useful information' }), children: "Info" }), _jsx(Button, { variant: "secondary", onClick: () => show({ variant: 'copy', message: 'Copied to clipboard!' }), children: "Copy" })] }));
+    return (_jsxs(Group, { gap: spacing.xs, children: [_jsx(Button, { variant: "success", onClick: () => show({ variant: 'success', message: 'Operation completed successfully!' }), children: "Success" }), _jsx(Button, { variant: "cancel", onClick: () => show({ variant: 'error', message: 'Something went wrong!' }), children: "Error" }), _jsx(Button, { variant: "warning", onClick: () => show({ variant: 'warning', message: 'Please review your input' }), children: "Warning" }), _jsx(Button, { variant: "primary", onClick: () => show({ variant: 'info', message: 'Here is some useful information' }), children: "Info" }), _jsx(Button, { variant: "secondary", onClick: () => show({ variant: 'copy', message: 'Copied to clipboard!' }), children: "Copy" })] }));
 };
 export const Variants = {
     render: () => _jsx(VariantsDemo, {}),
@@ -99,7 +100,7 @@ const AsyncDemo = () => {
             setIsLoadingFailure(false);
         }, 3000);
     };
-    return (_jsxs(Group, { gap: "0.5rem", children: [_jsx(Button, { variant: "success", onClick: handleSuccess, loading: isLoadingSuccess, children: isLoadingSuccess ? 'Processing...' : 'Async Success' }), _jsx(Button, { variant: "cancel", onClick: handleFailure, loading: isLoadingFailure, children: isLoadingFailure ? 'Processing...' : 'Async Failure' })] }));
+    return (_jsxs(Group, { gap: spacing.xs, children: [_jsx(Button, { variant: "success", onClick: handleSuccess, loading: isLoadingSuccess, children: isLoadingSuccess ? 'Processing...' : 'Async Success' }), _jsx(Button, { variant: "cancel", onClick: handleFailure, loading: isLoadingFailure, children: isLoadingFailure ? 'Processing...' : 'Async Failure' })] }));
 };
 export const AsyncNotifications = {
     render: () => _jsx(AsyncDemo, {}),

package/dist/components/Info/Tooltips/FormulaTooltip/FormulaTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormulaTooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Tooltips/FormulaTooltip/FormulaTooltip.tsx"],"names":[],"mappings":"AAQA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,cAAc,GAAI,oCAAoC,mBAAmB,4CAgB9E,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"FormulaTooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Tooltips/FormulaTooltip/FormulaTooltip.tsx"],"names":[],"mappings":"AASA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,cAAc,GAAI,oCAAoC,mBAAmB,4CAgB9E,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/Info/Tooltips/FormulaTooltip/FormulaTooltip.js

@@ -4,8 +4,9 @@ import { Text } from '../../../Typography/Text/Text';
 import { Formula } from '../../../Typography/Formula/Formula';
 import { Stack } from '../../../Layout/Stack/Stack';
 import { blue } from '../../../../constants/colors';
+import { spacing } from '../../../../constants/spacing';
 import { Center } from '../../../Layout/Center/Center';
 const FormulaTooltip = ({ title, description, expression }) => {
-    return (_jsx(Box, { p: "0.8rem", children: _jsxs(Stack, { gap: "1.6rem", children: [_jsxs(Stack, { gap: "0.8rem", sx: { maxWidth: '500px' }, children: [_jsx(Text, { weight: "semibold", children: title }), _jsx(Text, { variant: "label", children: description })] }), _jsx("div", { style: { padding: '1.6rem 2.4rem', borderRadius: '16px', backgroundColor: blue[25], width: '100%' }, children: _jsx(Center, { children: _jsx(Formula, { expression: expression, color: blue[300] }) }) })] }) }));
+    return (_jsx(Box, { p: "8px", children: _jsxs(Stack, { gap: spacing.lg, children: [_jsxs(Stack, { gap: spacing.sm, sx: { maxWidth: '500px' }, children: [_jsx(Text, { weight: "semibold", children: title }), _jsx(Text, { variant: "label", children: description })] }), _jsx("div", { style: { padding: `${spacing.lg} ${spacing.xl}`, borderRadius: '16px', backgroundColor: blue[25], width: '100%' }, children: _jsx(Center, { children: _jsx(Formula, { expression: expression, color: blue[300] }) }) })] }) }));
 };
 export { FormulaTooltip };

package/dist/components/Info/Tooltips/InfoTooltip/InfoTooltip.d.ts

@@ -26,10 +26,10 @@ declare const componentVariants: {
     };
 };
 declare const componentSizes: {
-    readonly sm: "1.2rem";
-    readonly md: "1.6rem";
-    readonly lg: "2rem";
-    readonly xl: "2.4rem";
+    readonly sm: "12px";
+    readonly md: "16px";
+    readonly lg: "20px";
+    readonly xl: "24px";
 };
 declare const InfoTooltip: ({ text, content, position, size, offset, className, styles, maxWidth, variant }: InfoTooltipProps) => import("react/jsx-runtime").JSX.Element;
 export { InfoTooltip };

package/dist/components/Info/Tooltips/InfoTooltip/InfoTooltip.js

@@ -16,10 +16,10 @@ const componentVariants = {
     },
 };
 const componentSizes = {
-    sm: '1.2rem',
-    md: '1.6rem',
-    lg: '2rem',
-    xl: '2.4rem',
+    sm: '12px',
+    md: '16px',
+    lg: '20px',
+    xl: '24px',
 };
 const InfoTooltip = ({ text, content, position = 'top-start', size = 'md', offset, className, styles, maxWidth, variant = 'info' }) => {
     const style = {

package/dist/components/Info/Tooltips/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Tooltips/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,UAAU,YAAY;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,cAAc,CAAC;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,QAAA,MAAM,OAAO,GAAI,mEAAiF,YAAY,4CAgD7G,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Tooltips/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C,UAAU,YAAY;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,cAAc,CAAC;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,QAAA,MAAM,OAAO,GAAI,mEAAiF,YAAY,4CAgD7G,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/Info/Tooltips/Tooltip/Tooltip.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Tooltip as MantineTooltip, Box } from '@mantine/core';
 import { neutral } from '../../../../constants/colors';
 import { fontBase, fontSize, fontWeight } from '../../../../constants/font';
+import { spacing } from '../../../../constants/spacing';
 const Tooltip = ({ children, text, position = 'top-start', offset, className, styles, maxWidth }) => {
     const positionToTransition = {
         'top-end': 'slide-up',
@@ -24,7 +25,7 @@ const Tooltip = ({ children, text, position = 'top-start', offset, className, st
             borderRadius: '8px',
             textWrap: 'wrap',
             maxWidth: maxWidth || '375px',
-            padding: '0.75rem 1.125rem',
+            padding: `${spacing.sm} 11.25px`,
             ...fontSize['sm'],
             height: 'fit-content',
         },

package/dist/components/Inputs/Buttons/Button/Button.js

@@ -19,9 +19,9 @@ export const Button = ({ onClick, size = 'md', variant = 'primary', fullWidth =
         root: {
             borderRadius: '8px',
             width: fullWidth ? '100%' : 'fit-content',
-            height: `${selectedSize.height}rem`,
+            height: `${selectedSize.height}px`,
             padding: selectedSize.padding,
-            minWidth: `${selectedSize.minWidth}rem`,
+            minWidth: `${selectedSize.minWidth}px`,
             fontSize: selectedSize.fontSize,
             boxShadow: shadow ? '0px 4px 6px rgba(0, 0, 0, 0.1)' : 'none',
             transition: 'background 0.1s ease-in-out',

package/dist/components/Inputs/Buttons/Button/Button.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAKlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAyH7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAgC1B,CAAC"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAMlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAyH7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAgC1B,CAAC"}

package/dist/components/Inputs/Buttons/Button/Button.stories.js

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { Button } from './Button';
 import { Group } from '../../../Layout/Group/Group';
 import { IconPlus, IconEdit, IconTrash, IconDeviceFloppy } from '@tabler/icons-react';
+import { spacing } from '../../../../constants/spacing';
 const meta = {
     title: 'Components/Inputs/Buttons/Button',
     component: Button,
@@ -142,18 +143,18 @@ export const Default = {
     },
 };
 export const Variants = {
-    render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(Button, { variant: "primary", children: "Primary" }), _jsx(Button, { variant: "secondary", children: "Secondary" }), _jsx(Button, { variant: "cancel", children: "Cancel" }), _jsx(Button, { variant: "success", children: "Success" }), _jsx(Button, { variant: "warning", children: "Warning" }), _jsx(Button, { variant: "text", children: "Text" })] })),
+    render: () => (_jsxs(Group, { gap: spacing.lg, children: [_jsx(Button, { variant: "primary", children: "Primary" }), _jsx(Button, { variant: "secondary", children: "Secondary" }), _jsx(Button, { variant: "cancel", children: "Cancel" }), _jsx(Button, { variant: "success", children: "Success" }), _jsx(Button, { variant: "warning", children: "Warning" }), _jsx(Button, { variant: "text", children: "Text" })] })),
 };
 export const Sizes = {
-    render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(Button, { size: "sm", children: "Small" }), _jsx(Button, { size: "md", children: "Medium" }), _jsx(Button, { size: "lg", children: "Large" })] })),
+    render: () => (_jsxs(Group, { gap: spacing.lg, children: [_jsx(Button, { size: "sm", children: "Small" }), _jsx(Button, { size: "md", children: "Medium" }), _jsx(Button, { size: "lg", children: "Large" })] })),
 };
 export const States = {
-    render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(Button, { children: "Normal" }), _jsx(Button, { disabled: true, children: "Disabled" }), _jsx(Button, { loading: true, children: "Loading" })] })),
+    render: () => (_jsxs(Group, { gap: spacing.lg, children: [_jsx(Button, { children: "Normal" }), _jsx(Button, { disabled: true, children: "Disabled" }), _jsx(Button, { loading: true, children: "Loading" })] })),
 };
 export const TogglingButtons = {
     render: () => {
         const [toggled, setToggled] = useState(false);
-        return (_jsx(Group, { gap: "1.6rem", children: _jsx(Button, { toggled: toggled, onClick: () => setToggled(!toggled), children: toggled ? 'On' : 'Off' }) }));
+        return (_jsx(Group, { gap: spacing.lg, children: _jsx(Button, { toggled: toggled, onClick: () => setToggled(!toggled), children: toggled ? 'On' : 'Off' }) }));
     },
 };
 export const CustomStyles = {

package/dist/components/Inputs/Buttons/Button/sizes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sizes.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/sizes.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;CAInB,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"sizes.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/sizes.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;CAInB,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/Inputs/Buttons/Button/sizes.js

@@ -1,7 +1,8 @@
 import { fontSize } from '../../../../constants/font';
+import { spacing } from '../../../../constants/spacing';
 const componentSizes = {
-    sm: { height: 3, ...fontSize['sm'], padding: '0.8rem 1.8rem', minWidth: 6.8 },
-    md: { height: 4, ...fontSize['md'], padding: '0.8rem 2.4rem', minWidth: 11.2 },
-    lg: { height: 4.8, ...fontSize['lg'], padding: '0.8rem 4rem', minWidth: 15.2 },
+    sm: { height: 30, ...fontSize['sm'], padding: `${spacing.sm} 18px`, minWidth: 68 },
+    md: { height: 40, ...fontSize['md'], padding: `${spacing.sm} ${spacing.xl}`, minWidth: 112 },
+    lg: { height: 48, ...fontSize['lg'], padding: `${spacing.sm} 40px`, minWidth: 152 },
 };
 export { componentSizes };

package/dist/components/Inputs/Buttons/IconButton/IconButton.js

@@ -38,9 +38,9 @@ export const IconButton = ({ onClick, size = 'md', variant = 'primary', toggled
     const style = {
         root: {
             borderRadius: '8px',
-            height: `${selectedSize.borderLength}rem`,
+            height: `${selectedSize.borderLength}px`,
             padding: selectedSize.padding,
-            width: `${selectedSize.borderLength}rem`,
+            width: `${selectedSize.borderLength}px`,
             boxShadow: shadow ? '0px 4px 6px rgba(0, 0, 0, 0.1)' : 'none',
             ...getVariantStyles(),
             ...getSubtleStyles(),

package/dist/components/Inputs/Buttons/IconButton/IconButton.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/IconButton/IconButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAsFjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAWpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KASpB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAS1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAsE1B,CAAC"}
+{"version":3,"file":"IconButton.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/IconButton/IconButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAsFjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAWpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KASpB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAS1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAsE1B,CAAC"}