@taiv/ui 1.9.0 → 1.10.0

package/dist/components/Inputs/Buttons/shared/variants.js

@@ -1,29 +1,42 @@
 import { primary, neutral, error, success, warning } from '../../../../constants/colors';
-export const buttonVariants = {
+// Overrides mantine due to rem difference
+const loading = {
+    top: '-0.1rem',
+    right: '-0.1rem',
+    left: '-0.1rem',
+    bottom: '-0.1rem',
+    borderRadius: '8px',
+};
+const disabled = {
+    background: neutral[50],
+    border: `1px solid ${neutral[50]}`,
+    color: neutral[100],
+};
+export const componentVariants = {
     primary: {
         background: `linear-gradient(to right, ${primary[300]}, ${primary[200]})`,
+        border: `1px solid ${primary[200]}`,
         color: 'white',
         '&:hover': {
             background: `linear-gradient(to right, ${primary[300]}, ${primary[300]})`,
-            transition: 'background 0.3s ease-in-out',
         },
         '&:active': {
             background: 'white',
-            border: `1px solid ${primary[200]}`,
-            color: primary[200],
+            border: `1px solid ${primary[300]}`,
+            color: primary[300],
         },
         '&:toggled': {
-            background: `linear-gradient(to right, ${primary[300]}, ${primary[300]})`,
+            background: `${primary[300]}`,
             color: 'white',
         },
         '&:disabled': {
-            background: neutral[50],
-            color: neutral[100],
+            ...disabled,
         },
         '&[data-loading]': {
             '& .mantine-Button-icon svg': {
                 stroke: 'white',
             },
+            '&:before': loading,
         },
     },
     secondary: {
@@ -44,91 +57,85 @@ export const buttonVariants = {
             background: neutral[100],
             color: 'neutral[200]',
         },
-        '&:disabled': {
-            background: neutral[50],
-            border: `1px solid ${neutral[50]}`,
-            color: neutral[100],
-        },
+        '&:disabled': disabled,
         '&[data-loading]': {
             '& .mantine-Button-icon svg': {
                 stroke: neutral[200],
             },
+            '&:before': loading,
         },
     },
     cancel: {
         background: error[200],
         color: 'white',
+        border: `1px solid ${error[200]}`,
         '&:hover': {
             background: error[100],
+            border: `1px solid ${error[100]}`,
         },
         '&:active': {
             background: 'white',
-            border: `1px solid ${error[200]}`,
-            color: error[200],
+            border: `1px solid ${error[100]}`,
+            color: error[100],
         },
         '&:toggled': {
             background: error[100],
             color: 'white',
         },
-        '&:disabled': {
-            background: error[50],
-            border: `1px solid ${error[50]}`,
-            color: 'white',
-        },
+        '&:disabled': disabled,
         '&[data-loading]': {
             '& .mantine-Button-icon svg': {
                 stroke: 'white',
             },
+            '&:before': loading,
         },
     },
     success: {
         background: success[200],
         color: 'white',
+        border: `1px solid ${success[200]}`,
         '&:hover': {
             background: success[100],
+            border: `1px solid ${success[100]}`,
         },
         '&:active': {
             background: 'white',
-            border: `1px solid ${success[200]}`,
-            color: success[200],
+            border: `1px solid ${success[100]}`,
+            color: success[100],
         },
         '&:toggled': {
             background: success[100],
         },
-        '&:disabled': {
-            background: success[50],
-            border: `1px solid ${success[50]}`,
-            color: 'white',
-        },
+        '&:disabled': disabled,
         '&[data-loading]': {
             '& .mantine-Button-icon svg': {
                 stroke: 'white',
             },
+            '&:before': loading,
         },
     },
     warning: {
         background: warning[200],
         color: 'white',
+        border: `1px solid ${warning[200]}`,
         '&:hover': {
             background: warning[100],
+            border: `1px solid ${warning[100]}`,
         },
         '&:active': {
             background: 'white',
-            border: `1px solid ${warning[200]}`,
-            color: warning[200],
+            border: `1px solid ${warning[100]}`,
+            color: warning[100],
         },
         '&:toggled': {
             background: warning[100],
         },
-        '&:disabled': {
-            background: warning[50],
-            border: `1px solid ${warning[50]}`,
-            color: 'white',
-        },
+        '&:disabled': disabled,
         '&[data-loading]': {
             '& .mantine-Button-icon svg': {
                 stroke: 'white',
             },
+            '&:before': loading,
         },
     },
     text: {
@@ -158,6 +165,7 @@ export const buttonVariants = {
             '& .mantine-Button-icon svg': {
                 stroke: neutral[200],
             },
+            '&:before': loading,
         },
     },
     nav: {
@@ -186,63 +194,16 @@ export const buttonVariants = {
             '& .mantine-Button-icon svg': {
                 stroke: neutral[200],
             },
+            '&:before': loading,
         },
     },
 };
 export const subtleVariants = {
-    primary: {
-        ...buttonVariants.primary,
-        background: 'white',
-        color: primary[200],
-        '&:hover': {
-            background: primary[100],
-            transition: 'background 0.3s ease-in-out',
-        },
-        '&:active': {
-            background: 'white',
-            border: `1px solid ${primary[200]}`,
-            color: primary[200],
-        },
-        '&:toggled': {
-            background: primary[300],
-            color: 'white',
-        },
-    },
-    secondary: {
-        ...buttonVariants.secondary,
-        background: 'white',
-        color: neutral[200],
-        border: `1px solid ${neutral[50]}`,
-    },
-    cancel: {
-        ...buttonVariants.cancel,
-        background: 'white',
-        color: error[200],
-    },
-    success: {
-        ...buttonVariants.success,
-        background: 'white',
-        color: success[200],
-    },
-    warning: {
-        ...buttonVariants.warning,
-        background: 'white',
-        color: warning[200],
-    },
-    text: {
-        ...buttonVariants.text,
-        background: 'transparent',
-        color: neutral[200],
-        border: 'none',
-        padding: '0',
-        height: 'auto',
-        minWidth: 'unset',
-    },
-    nav: {
-        ...buttonVariants.nav,
-        background: 'white',
-        paddingLeft: '0.8rem',
-        color: neutral[200],
-        border: 'none',
-    },
+    primary: { color: primary[200] },
+    secondary: { color: neutral[200] },
+    cancel: { color: error[200] },
+    success: { color: success[200] },
+    warning: { color: warning[200] },
+    text: { color: neutral[200] },
+    nav: { color: neutral[200] },
 };

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

@@ -9,7 +9,9 @@ interface TableProps<T> {
     ListItem: React.ComponentType<{
         data: T;
     }>;
+    placeholder?: React.ReactNode;
+    shadow?: boolean;
 }
-declare const Table: <T>({ columnConfigs, data, ListItem }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const Table: <T>({ columnConfigs, data, ListItem, placeholder, shadow }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
 export { Table, type ColumnConfig, type TableProps };
 //# sourceMappingURL=Table.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAqB,MAAM,OAAO,CAAC;AAIhE,UAAU,YAAY;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,UAAU,UAAU,CAAC,CAAC;IACpB,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,QAAQ,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,EAAE,CAAC,CAAA;KAAE,CAAC,CAAC;CAC5C;AAED,QAAA,MAAM,KAAK,GAAI,CAAC,EAAG,mCAAmC,UAAU,CAAC,CAAC,CAAC,4CAsElE,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAqB,MAAM,OAAO,CAAC;AAIhE,UAAU,YAAY;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,UAAU,UAAU,CAAC,CAAC;IACpB,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,QAAQ,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,EAAE,CAAC,CAAA;KAAE,CAAC,CAAC;IAC3C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,QAAA,MAAM,KAAK,GAAI,CAAC,EAAG,wDAAgE,UAAU,CAAC,CAAC,CAAC,4CAsE/F,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,CAAC"}

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import { Box } from '../Box/Box';
 import { fontWeight, neutral } from '../../../constants';
-const Table = ({ columnConfigs, data, ListItem }) => {
+const Table = ({ columnConfigs, data, ListItem, placeholder, shadow = false }) => {
     const tableRef = useRef(null);
     /**
      * Apply column styles to the table cells.
@@ -31,7 +31,7 @@ const Table = ({ columnConfigs, data, ListItem }) => {
     return (_jsx(Box, { sx: {
             borderTopLeftRadius: '8px',
             borderTopRightRadius: '8px',
-            boxShadow: '0px 2px 6px -3px #AFAFAF',
+            boxShadow: shadow ? '0 8px 40px 0 rgba(112, 144, 176, 0.20)' : 'none',
             overflow: 'hidden',
         }, children: _jsxs("table", { ref: tableRef, style: {
                 width: '100%',
@@ -43,6 +43,6 @@ const Table = ({ columnConfigs, data, ListItem }) => {
                                 paddingBottom: '9px',
                                 paddingTop: '9px',
                                 ...column.style,
-                            }, children: column.heading }, column.heading || `column-${index}`))) }) }), _jsx("tbody", { children: data.map((item) => (_jsx(ListItem, { data: item }, String(item).slice(0, 10)))) })] }) }));
+                            }, children: column.heading }, column.heading || `column-${index}`))) }) }), _jsx("tbody", { children: (!data || data.length === 0) && placeholder ? _jsx("tr", { children: _jsx("td", { colSpan: columnConfigs.length, children: placeholder }) }) : data.map((item) => (_jsx(ListItem, { data: item }, String(item).slice(0, 10)))) })] }) }));
 };
 export { Table };

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

@@ -7,4 +7,7 @@ export declare const BasicTable: Story;
 export declare const TableWithCustomComponents: Story;
 export declare const TableWithProgressBars: Story;
 export declare const StyledColumns: Story;
+export declare const TableWithPlaceholder: Story;
+export declare const TableWithoutPlaceholder: Story;
+export declare const TableWithShadow: Story;
 //# sourceMappingURL=Table.stories.d.ts.map

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;AAKhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAiB5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAyPnC,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"}
+{"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,CAyB5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAyPnC,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"}

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

@@ -2,8 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Table } from './Table';
 import { Badge } from '../../Info/Badge/Badge';
 import { Button } from '../../Inputs/Buttons/Button/Button';
+import { Text } from '../../Typography/Text/Text';
+import { Center } from '../Center/Center';
+import { IconInfoCircle } from '@tabler/icons-react';
+import { neutral } from '../../../constants/colors';
+import { Group } from '../Group/Group';
 const meta = {
-    title: 'Layouts/Table',
+    title: 'Components/Layout/Table',
     component: Table,
     argTypes: {
         columnConfigs: {
@@ -18,6 +23,14 @@ const meta = {
             control: false,
             description: 'Component that renders each table row',
         },
+        placeholder: {
+            control: { type: 'object' },
+            description: 'Placeholder to display when no data is available',
+        },
+        shadow: {
+            control: { type: 'boolean' },
+            description: 'Adds shadow to the table',
+        },
     },
 };
 export default meta;
@@ -255,3 +268,49 @@ export const StyledColumns = {
         },
     },
 };
+export const TableWithPlaceholder = {
+    args: {
+        columnConfigs: [
+            { 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" })] }) })),
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'A table with a placeholder displayed when no data is available.',
+            },
+        },
+    },
+};
+export const TableWithoutPlaceholder = {
+    args: {
+        columnConfigs: [
+            { heading: 'Name', style: { width: '50%' } },
+            { heading: 'Email', style: { width: '50%' } },
+        ],
+        data: [],
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'A table with no placeholder displayed when no data is available.',
+            },
+        },
+    },
+};
+export const TableWithShadow = {
+    args: {
+        columnConfigs: [
+            { heading: 'Name', style: { width: '25%', paddingLeft: '20px', fontWeight: '600' } },
+            { heading: 'Email', style: { width: '30%', textAlign: 'left' } },
+            { heading: 'Role', style: { width: '20%', textAlign: 'center' } },
+            { heading: 'Status', style: { width: '15%', textAlign: 'center' } },
+            { heading: 'Last Login', style: { width: '10%', textAlign: 'right', paddingRight: '20px' } },
+        ],
+        data: userData,
+        ListItem: UserListItem,
+        shadow: true,
+    },
+};

package/dist/components/index.d.ts

@@ -7,6 +7,7 @@ export { RemovableItemList } from './Data/RemovableItemList/RemovableItemList';
 export { StatsCard } from './Data/Cards/StatsCard/StatsCard';
 export { StatsBadge } from './Data/StatsBadge/StatsBadge';
 export { Modal } from './Info/Modals/Modal/Modal';
+export { FormModal } from './Info/Modals/FormModal/FormModal';
 export { ModalProvider } from './Info/Modals/ModalProvider/ModalProvider';
 export { NotificationProvider } from './Info/Notifications/NotificationProvider/NotificationProvider';
 export { Badge } from './Info/Badge/Badge';

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}

package/dist/components/index.js

@@ -9,6 +9,7 @@ export { StatsCard } from './Data/Cards/StatsCard/StatsCard';
 export { StatsBadge } from './Data/StatsBadge/StatsBadge';
 //Info
 export { Modal } from './Info/Modals/Modal/Modal';
+export { FormModal } from './Info/Modals/FormModal/FormModal';
 export { ModalProvider } from './Info/Modals/ModalProvider/ModalProvider';
 export { NotificationProvider } from './Info/Notifications/NotificationProvider/NotificationProvider';
 export { Badge } from './Info/Badge/Badge';

package/dist/hooks/useConfirmationModal.d.ts

@@ -7,7 +7,7 @@ export declare const useConfirmationModal: () => {
         message?: string;
         confirmLabel?: string;
         cancelLabel?: string;
-        icon?: React.ReactNode;
+        icon?: React.ReactElement;
         onConfirm?: () => void;
         onCancel?: () => void;
         size?: string | number;

package/dist/hooks/useConfirmationModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useConfirmationModal.d.ts","sourceRoot":"","sources":["../../src/hooks/useConfirmationModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAInE,eAAO,MAAM,oBAAoB;oBACR;QACrB,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,OAAO,aAAa,EAAE,OAAO,CAAC,CAAC;QACvD,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;QACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;QACtB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KACxB;qBAsFuB,MAAM;;CAa/B,CAAC"}
+{"version":3,"file":"useConfirmationModal.d.ts","sourceRoot":"","sources":["../../src/hooks/useConfirmationModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAInE,eAAO,MAAM,oBAAoB;oBACR;QACrB,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,OAAO,aAAa,EAAE,OAAO,CAAC,CAAC;QACvD,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;QAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;QACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;QACtB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KACxB;qBAwFuB,MAAM;;CAa/B,CAAC"}

package/dist/hooks/useConfirmationModal.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { modals } from '@mantine/modals';
 import { neutral } from '../constants/colors';
 import { Title } from '../components/Typography/Title/Title';
@@ -28,7 +29,8 @@ export const useConfirmationModal = () => {
             backgroundColor: selectedVariant.iconBackgroundColor,
             border: `2px solid ${selectedVariant.iconColor}`,
         };
-        const modalIcon = icon || _jsx("i", { className: selectedVariant.icon, style: { color: selectedVariant.iconColor, fontSize: '2rem' } });
+        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 ConfirmModalContent = () => {
             return (_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 }), _jsxs(Stack, { gap: "0.25rem", align: "center", children: [_jsx(Title, { variant: "cardHeader", align: "center", children: title || selectedVariant.title }), _jsx(Title, { variant: "cardSubheader", align: "center", children: message || selectedVariant.message })] })] }), _jsx(Center, { h: "100%", w: "100%", children: _jsxs(Group, { gap: "1rem", align: "center", children: [_jsx(Button, { onClick: handleCancel, variant: "secondary", children: cancelLabel || selectedVariant.cancelLabel }), _jsx(Button, { onClick: handleConfirm, variant: selectedVariant.buttonVariant, children: confirmLabel || selectedVariant.confirmLabel })] }) })] }) }));
         };

package/dist/hooks/useInfoModal.d.ts

@@ -5,7 +5,7 @@ export declare const useInfoModal: () => {
         variant?: keyof typeof modalVariants;
         title?: string;
         message?: string;
-        icon?: React.ReactNode;
+        icon?: React.ReactElement;
         onConfirm?: () => void;
         size?: string | number;
     }) => void;

package/dist/hooks/useInfoModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useInfoModal.d.ts","sourceRoot":"","sources":["../../src/hooks/useInfoModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAGnE,eAAO,MAAM,YAAY;oBACA;QAAE,OAAO,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE;qBA4EjJ,MAAM;;CAa/B,CAAC"}
+{"version":3,"file":"useInfoModal.d.ts","sourceRoot":"","sources":["../../src/hooks/useInfoModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAGnE,eAAO,MAAM,YAAY;oBACA;QAAE,OAAO,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE;qBA8EpJ,MAAM;;CAa/B,CAAC"}

package/dist/hooks/useInfoModal.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { modals } from '@mantine/modals';
 import { neutral } from '../constants/colors';
 import { Title } from '../components/Typography/Title/Title';
@@ -22,7 +23,8 @@ export const useInfoModal = () => {
             backgroundColor: selectedVariant.iconBackgroundColor,
             border: `2px solid ${selectedVariant.iconColor}`,
         };
-        const modalIcon = icon || _jsx("i", { className: selectedVariant.icon, style: { color: selectedVariant.iconColor, fontSize: '2rem' } });
+        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 InfoModalContent = () => {
             return (_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 }), _jsxs(Stack, { gap: "0.25rem", align: "center", children: [_jsx(Title, { variant: "cardHeader", align: "center", children: title || selectedVariant.title }), _jsx(Title, { variant: "cardSubheader", align: "center", children: message || selectedVariant.message })] })] }), _jsx(Center, { h: "100%", w: "100%", children: _jsx(Button, { onClick: handleConfirm, variant: selectedVariant.buttonVariant, children: "OK" }) })] }) }));
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taiv/ui",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "author": "Taiv",
   "description": "Taiv's web UI Toolkit built on Mantine v6",
   "main": "dist/index.js",
@@ -17,8 +17,7 @@
     "dev": "npm link && tsc --watch",
     "clean": "rm -rf dist",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "chromatic": "npx chromatic --project-token=chpt_8fb53e9533016b9"
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",