@taiv/ui 1.12.0 → 1.14.0

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

@@ -3,6 +3,7 @@ import { IconCheck, IconCircleFilled } from '@tabler/icons-react';
 import { Badge } from './Badge';
 import { Group } from '../../Layout/Group/Group';
 import { Stack } from '../../Layout/Stack/Stack';
+import { spacing } from '../../../constants/spacing';
 const meta = {
     title: 'Components/Info/Badge',
     component: Badge,
@@ -79,14 +80,14 @@ export const Default = {
     },
 };
 export const Variants = {
-    render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(Badge, { variant: "outline", color: "primary", children: "Outline" }), _jsx(Badge, { variant: "filled", color: "primary", children: "Filled" }), _jsx(Badge, { variant: "gradient", color: "primary", children: "Gradient" })] })),
+    render: () => (_jsxs(Group, { gap: spacing.lg, children: [_jsx(Badge, { variant: "outline", color: "primary", children: "Outline" }), _jsx(Badge, { variant: "filled", color: "primary", children: "Filled" }), _jsx(Badge, { variant: "gradient", color: "primary", children: "Gradient" })] })),
 };
 export const Colors = {
-    render: () => (_jsxs(Group, { gap: "1.6rem", style: { flexWrap: 'wrap' }, children: [_jsx(Badge, { variant: "outline", color: "primary", children: "Primary" }), _jsx(Badge, { variant: "outline", color: "success", children: "Success" }), _jsx(Badge, { variant: "outline", color: "warning", children: "Warning" }), _jsx(Badge, { variant: "outline", color: "error", children: "Error" }), _jsx(Badge, { variant: "outline", color: "neutral", children: "Neutral" })] })),
+    render: () => (_jsxs(Group, { gap: spacing.lg, style: { flexWrap: 'wrap' }, children: [_jsx(Badge, { variant: "outline", color: "primary", children: "Primary" }), _jsx(Badge, { variant: "outline", color: "success", children: "Success" }), _jsx(Badge, { variant: "outline", color: "warning", children: "Warning" }), _jsx(Badge, { variant: "outline", color: "error", children: "Error" }), _jsx(Badge, { variant: "outline", color: "neutral", children: "Neutral" })] })),
 };
 export const Sizes = {
-    render: () => (_jsxs(Group, { gap: "1.6rem", align: "flex-end", children: [_jsx(Badge, { size: "sm", color: "primary", children: "Small" }), _jsx(Badge, { size: "md", color: "primary", children: "Medium" }), _jsx(Badge, { size: "lg", color: "primary", children: "Large" })] })),
+    render: () => (_jsxs(Group, { gap: spacing.lg, align: "flex-end", children: [_jsx(Badge, { size: "sm", color: "primary", children: "Small" }), _jsx(Badge, { size: "md", color: "primary", children: "Medium" }), _jsx(Badge, { size: "lg", color: "primary", children: "Large" })] })),
 };
 export const WithLeftIcon = {
-    render: () => (_jsxs(Stack, { gap: "1.6rem", children: [_jsxs(Group, { gap: "1.6rem", children: [_jsx(Badge, { size: "sm", leftIcon: _jsx(IconCheck, {}), color: "success", children: "Completed" }), _jsx(Badge, { size: "sm", variant: "filled", leftIcon: _jsx(IconCircleFilled, {}), color: "success", children: "Online" }), _jsx(Badge, { size: "sm", variant: "gradient", leftIcon: _jsx(IconCheck, {}), color: "success", children: "In Progress" })] }), _jsxs(Group, { gap: "1.6rem", children: [_jsx(Badge, { leftIcon: _jsx(IconCheck, {}), color: "success", children: "Completed" }), _jsx(Badge, { variant: "filled", leftIcon: _jsx(IconCircleFilled, {}), color: "success", children: "Online" }), _jsx(Badge, { variant: "gradient", leftIcon: _jsx(IconCheck, {}), color: "success", children: "In Progress" })] }), _jsxs(Group, { gap: "1.6rem", children: [_jsx(Badge, { size: "lg", leftIcon: _jsx(IconCheck, {}), color: "success", children: "Completed" }), _jsx(Badge, { size: "lg", variant: "filled", leftIcon: _jsx(IconCircleFilled, {}), color: "success", children: "Online" }), _jsx(Badge, { size: "lg", variant: "gradient", leftIcon: _jsx(IconCheck, {}), color: "success", children: "In Progress" })] })] })),
+    render: () => (_jsxs(Stack, { gap: spacing.lg, children: [_jsxs(Group, { gap: spacing.lg, children: [_jsx(Badge, { size: "sm", leftIcon: _jsx(IconCheck, {}), color: "success", children: "Completed" }), _jsx(Badge, { size: "sm", variant: "filled", leftIcon: _jsx(IconCircleFilled, {}), color: "success", children: "Online" }), _jsx(Badge, { size: "sm", variant: "gradient", leftIcon: _jsx(IconCheck, {}), color: "success", children: "In Progress" })] }), _jsxs(Group, { gap: spacing.lg, children: [_jsx(Badge, { leftIcon: _jsx(IconCheck, {}), color: "success", children: "Completed" }), _jsx(Badge, { variant: "filled", leftIcon: _jsx(IconCircleFilled, {}), color: "success", children: "Online" }), _jsx(Badge, { variant: "gradient", leftIcon: _jsx(IconCheck, {}), color: "success", children: "In Progress" })] }), _jsxs(Group, { gap: spacing.lg, children: [_jsx(Badge, { size: "lg", leftIcon: _jsx(IconCheck, {}), color: "success", children: "Completed" }), _jsx(Badge, { size: "lg", variant: "filled", leftIcon: _jsx(IconCircleFilled, {}), color: "success", children: "Online" }), _jsx(Badge, { size: "lg", variant: "gradient", leftIcon: _jsx(IconCheck, {}), color: "success", children: "In Progress" })] })] })),
 };

package/dist/components/Info/Badge/sizes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sizes.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Badge/sizes.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsBtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,UAAU,CAAC"}
+{"version":3,"file":"sizes.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Badge/sizes.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsBtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,UAAU,CAAC"}

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

@@ -1,23 +1,24 @@
 import { inputFontSize } from '../../../constants/font';
+import { spacing } from '../../../constants/spacing';
 export const badgeSizes = {
     sm: {
         mantineSize: 'md',
-        padding: '0.4rem 0.8rem',
-        height: '1.5rem',
+        padding: `${spacing.xs} ${spacing.sm}`,
+        height: '15px',
         fontSize: inputFontSize['sm'],
         iconSize: 10,
     },
     md: {
         mantineSize: 'lg',
-        padding: '0.4rem 0.8rem',
-        height: '2.5rem',
+        padding: `${spacing.xs} ${spacing.sm}`,
+        height: '25px',
         fontSize: inputFontSize['md'],
         iconSize: 14,
     },
     lg: {
         mantineSize: 'xl',
-        padding: '0.4rem 0.8rem',
-        height: '3rem',
+        padding: `${spacing.xs} ${spacing.sm}`,
+        height: '30px',
         fontSize: inputFontSize['lg'],
         iconSize: 16,
     },

package/dist/components/Info/Badge/variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Badge/variants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEnD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE7D,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,MAAM,CAAC;AAE7C,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAoBnF"}
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Badge/variants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAGnD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE7D,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,MAAM,CAAC;AAE7C,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAoBnF"}

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.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Modal } from './Modal';
+declare const meta: Meta<typeof Modal>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=Modal.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Modals/Modal/Modal.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAMhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAoC5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAenC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAC"}

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

@@ -0,0 +1,61 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Modal } from './Modal';
+import { Text } from '../../../Typography/Text/Text';
+import { Button } from '../../../Inputs/Buttons/Button/Button';
+import { IconEdit, IconTrash } from '@tabler/icons-react';
+import taivLogo from '../../../../assets/brand/taiv-logo-dark.svg';
+const meta = {
+    title: 'Components/Info/Modals/Modal',
+    component: Modal,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        title: {
+            control: { type: 'text' },
+            description: 'Modal title',
+            table: { type: { summary: 'string' } },
+        },
+        subtitle: {
+            control: { type: 'text' },
+            description: 'Optional subtitle below the title',
+            table: { type: { summary: 'string' } },
+        },
+        width: {
+            control: { type: 'text' },
+            description: 'Custom width override',
+            table: {
+                type: { summary: 'string | number' },
+                defaultValue: { summary: "'400px'" },
+            },
+        },
+        children: { control: false, description: 'Modal content', table: { type: { summary: 'ReactNode' } } },
+        opened: { control: false, description: 'Controls the state of the modal', table: { type: { summary: 'boolean' } } },
+        onClose: { control: false, description: 'Callback function when the modal is closed', table: { type: { summary: '() => void' } } },
+        icon: { control: { type: 'select' },
+            options: ['Edit', 'Trash', 'TaivLogo'],
+            mapping: {
+                Edit: _jsx(IconEdit, {}),
+                Trash: _jsx(IconTrash, {}),
+                TaivLogo: _jsx("img", { src: taivLogo, width: 64, height: 64, alt: "Taiv Logo" }),
+            }, description: 'Custom icon or image to display at the top of the modal', table: { type: { summary: 'ReactNode' } } },
+    },
+};
+export default meta;
+const ModalWithState = ({ title, subtitle, children, width, icon }) => {
+    const [opened, setOpened] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpened(true), children: "Open Modal" }), _jsx(Modal, { opened: opened, onClose: () => setOpened(false), title: title, subtitle: subtitle, width: width, icon: icon, children: children })] }));
+};
+export const Default = {
+    render: (args) => (_jsx(ModalWithState, { ...args, children: _jsx(Text, { children: "This is the modal content area where you can place any React components." }) })),
+    args: {
+        title: 'Modal Title',
+        subtitle: 'Optional subtitle text',
+        children: undefined,
+        opened: undefined,
+        onClose: undefined,
+        icon: undefined,
+        width: undefined,
+    },
+};

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

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { modalVariants } from './variants';
+interface ModalHookArgs {
+    variant: keyof typeof modalVariants;
+    title: string;
+    message: string;
+}
+declare const meta: Meta<ModalHookArgs>;
+export default meta;
+type Story = StoryObj<ModalHookArgs>;
+export declare const Default: Story;
+export declare const InfoVariants: Story;
+export declare const ConfirmationDefault: Story;
+export declare const ConfirmationVariants: Story;
+export declare const FormModalDemo: Story;
+//# sourceMappingURL=Modals.stories.d.ts.map

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

@@ -0,0 +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;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

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Group } from '../../Layout/Group/Group';
+import { Stack } from '../../Layout/Stack/Stack';
+import { Button } from '../../Inputs/Buttons/Button/Button';
+import { useInfoModal } from '../../../hooks/useInfoModal';
+import { useConfirmationModal } from '../../../hooks/useConfirmationModal';
+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'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        variant: {
+            control: { type: 'select' },
+            options: Object.keys(modalVariants),
+            description: 'Preset modal style',
+            table: {
+                type: { summary: "'confirm' | 'info' | 'success' | 'error' | 'warning' | 'cancel'" },
+                defaultValue: { summary: "'info'" },
+            },
+        },
+        title: {
+            control: { type: 'text' },
+            description: 'Optional title override',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        message: {
+            control: { type: 'text' },
+            description: 'Optional message override',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+    },
+};
+export default meta;
+const DefaultDemo = (args) => {
+    const { show } = useInfoModal();
+    return (_jsx(Button, { onClick: () => show({
+            variant: args.variant,
+            title: args.title || undefined,
+            message: args.message || undefined,
+        }), children: "Show Info Modal" }));
+};
+export const Default = {
+    args: {
+        variant: 'info',
+        message: undefined,
+        title: undefined,
+    },
+    render: (args) => _jsx(DefaultDemo, { ...args }),
+};
+const InfoVariantsDemo = () => {
+    const { show } = useInfoModal();
+    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, {}),
+};
+const ConfirmationDefaultDemo = (args) => {
+    const { show } = useConfirmationModal();
+    return (_jsx(Button, { onClick: () => show({
+            variant: args.variant,
+            title: args.title || undefined,
+            message: args.message || undefined,
+            onConfirm: () => console.log('Confirmed'),
+            onCancel: () => console.log('Cancelled'),
+        }), children: "Show Confirmation Modal" }));
+};
+export const ConfirmationDefault = {
+    args: {
+        variant: 'confirm',
+        title: undefined,
+        message: undefined,
+    },
+    render: (args) => _jsx(ConfirmationDefaultDemo, { ...args }),
+};
+const ConfirmationVariantsDemo = () => {
+    const { show } = useConfirmationModal();
+    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, {}),
+};
+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: "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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { NotificationProvider } from './NotificationProvider/NotificationProvider';
+declare const meta: Meta<typeof NotificationProvider>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Variants: Story;
+export declare const GenericError: Story;
+export declare const AsyncNotifications: Story;
+//# sourceMappingURL=Notifications.stories.d.ts.map

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

@@ -0,0 +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;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"}