@taiv/ui 1.7.0 → 1.9.0

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

@@ -1,10 +1,10 @@
 import { ButtonProps as MantineButtonProps } from '@mantine/core';
 import { componentSizes } from './sizes';
-import { componentVariants } from './variants';
+import { buttonVariants } from '../shared/variants';
 export interface ButtonProps extends MantineButtonProps {
     onClick?: () => void;
     size?: keyof typeof componentSizes;
-    variant?: keyof typeof componentVariants;
+    variant?: keyof typeof buttonVariants;
     fullWidth?: boolean;
     toggled?: boolean;
     shadow?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAE3F,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAE/C,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,MAAM,GAAI,0EAAqH,WAAW,4CAmCtJ,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAE3F,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,MAAM,GAAI,0EAAqH,WAAW,4CAmCtJ,CAAC"}

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

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button as MantineButton } from '@mantine/core';
 import { fontBase, fontWeight } from '../../../../constants/font';
 import { componentSizes } from './sizes';
-import { componentVariants } from './variants';
+import { buttonVariants } from '../shared/variants';
 export const Button = ({ onClick, size = 'md', variant = 'primary', fullWidth = false, toggled = false, shadow = false, styles, ...props }) => {
-    const selectedVariant = componentVariants[variant];
+    const selectedVariant = buttonVariants[variant];
     const selectedSize = componentSizes[size];
     // Apply active styles for nav variant when isActive is true
     const getVariantStyles = () => {
@@ -25,7 +25,7 @@ export const Button = ({ onClick, size = 'md', variant = 'primary', fullWidth =
             padding: selectedSize.padding,
             minWidth: `${selectedSize.minWidth}rem`,
             fontSize: selectedSize.fontSize,
-            boxShadow: shadow ? '0px 1px 3px 0px rgba(0, 0, 0, 0.1)' : 'none',
+            boxShadow: shadow ? '0px 4px 6px rgba(0, 0, 0, 0.1)' : 'none',
             ...getVariantStyles(),
         },
         label: {

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;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA2F7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAarB,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,YAAY,EAAE,KAsE1B,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;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAmG7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KASpB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAsE1B,CAAC"}

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

@@ -90,6 +90,14 @@ const meta = {
                 type: { summary: '() => void' },
             },
         },
+        shadow: {
+            control: { type: 'boolean' },
+            description: 'Adds shadow to the button',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            }
+        }
     },
 };
 export default meta;
@@ -101,6 +109,7 @@ export const Default = {
         disabled: false,
         loading: false,
         fullWidth: false,
+        shadow: false,
         leftIcon: undefined,
         rightIcon: undefined,
         styles: {},
@@ -114,7 +123,7 @@ 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" })] })),
 };
 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: "1.6rem", children: [_jsx(Button, { children: "Normal" }), _jsx(Button, { disabled: true, children: "Disabled" }), _jsx(Button, { loading: true, children: "Loading" }), _jsx(Button, { shadow: true, children: "Shadow" })] })),
 };
 export const CustomStyles = {
     render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(Button, { styles: {

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

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+import { ButtonProps as MantineButtonProps } from '@mantine/core';
+import { componentSizes } from './sizes';
+import { buttonVariants, subtleVariants } from '../shared/variants';
+export interface IconButtonProps extends Omit<MantineButtonProps, 'leftIcon' | 'rightIcon'> {
+    onClick?: () => void;
+    size?: keyof typeof componentSizes;
+    variant?: keyof typeof buttonVariants | keyof typeof subtleVariants;
+    toggled?: boolean;
+    shadow?: boolean;
+    subtle?: boolean;
+    tooltip?: string;
+    children?: ReactElement<{
+        size?: number;
+    }>;
+}
+export declare const IconButton: ({ onClick, size, variant, toggled, shadow, subtle, tooltip, styles, children, ...props }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAIpE,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,WAAW,CAAC;IACzF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,OAAO,cAAc,GAAG,MAAM,OAAO,cAAc,CAAC;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,UAAU,GAAI,0FAA0I,eAAe,4CA0CnL,CAAC"}

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

@@ -0,0 +1,34 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Button as MantineButton } from '@mantine/core';
+import { componentSizes } from './sizes';
+import { buttonVariants, subtleVariants } from '../shared/variants';
+import { neutral } from '../../../../constants/colors';
+import { Tooltip } from '../../../Info/Tooltips/Tooltip/Tooltip';
+export const IconButton = ({ onClick, size = 'md', variant = 'primary', toggled = false, shadow = false, subtle = false, tooltip = '', styles, children, ...props }) => {
+    const selectedVariant = subtle && !props.loading ? subtleVariants[variant] : buttonVariants[variant];
+    const selectedSize = componentSizes[size];
+    // Apply active styles for nav variant when isActive is true
+    const getVariantStyles = () => {
+        if (toggled) {
+            return {
+                ...selectedVariant,
+                ...selectedVariant['&:toggled'],
+            };
+        }
+        return selectedVariant;
+    };
+    const style = {
+        root: {
+            borderRadius: '8px',
+            border: subtle ? `1px solid ${neutral[50]}` : '1px solid white',
+            height: `${selectedSize.borderLength}rem`,
+            padding: selectedSize.padding,
+            width: `${selectedSize.borderLength}rem`,
+            boxShadow: shadow ? '0px 4px 6px rgba(0, 0, 0, 0.1)' : 'none',
+            ...getVariantStyles(),
+        },
+        ...styles,
+    };
+    const Button = (_jsx(MantineButton, { styles: style, size: size, onClick: onClick, loaderPosition: "center", loaderProps: { size: selectedSize.iconSize }, ...props, children: props.loading ? _jsx(_Fragment, {}) : children }));
+    return tooltip ? _jsx(Tooltip, { text: tooltip, children: Button }) : Button;
+};

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

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { IconButton } from './IconButton';
+declare const meta: Meta<typeof IconButton>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Variants: Story;
+export declare const Subtle: Story;
+export declare const Tooltip: Story;
+export declare const Sizes: Story;
+export declare const States: Story;
+export declare const SubtleStates: Story;
+export declare const CustomStyles: Story;
+//# sourceMappingURL=IconButton.stories.d.ts.map

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

@@ -0,0 +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,OAAO,EAAE,KAMrB,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"}

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

@@ -0,0 +1,180 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconButton } from './IconButton';
+import { Icon12Hours, Icon24Hours, Icon360View, IconAdjustments, IconAlertCircle, IconArrowLeft, IconArrowRight, IconArrowsMaximize, IconCaretDown, IconCheck, IconClock, IconClock2, IconHistory, IconLoader2 } from '@tabler/icons-react';
+import { Group } from '../../../Layout/Group/Group';
+const meta = {
+    title: 'Components/Inputs/Buttons/IconButton',
+    component: IconButton,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: "[View Mantine Docs](https://v6.mantine.dev/core/button/)\n\nThe IconButton component is a customizable wrapper around Mantine's Button component that provides consistent styling and behavior across your application. It extends Mantine v6's ButtonProps while adding custom variants and sizing options.",
+            },
+        },
+    },
+    argTypes: {
+        size: {
+            control: { type: 'select' },
+            options: ['sm', 'md', 'lg'],
+            description: "Controls the button's height and padding. These values are square sizes.",
+            table: {
+                type: { summary: "'sm' | 'md' | 'lg'" },
+                defaultValue: { summary: "'md'" },
+            },
+        },
+        variant: {
+            control: { type: 'select' },
+            options: ['primary', 'secondary', 'cancel', 'success', 'warning', 'text', 'nav'],
+            description: "Defines the button's visual style and color scheme",
+            table: {
+                type: { summary: "'primary' | 'secondary' | 'cancel' | 'success' | 'warning' | 'text' | 'nav'" },
+                defaultValue: { summary: "'primary'" },
+            },
+        },
+        children: {
+            control: { type: 'object' },
+            description: 'Icon to be displayed in the button',
+            table: {
+                type: { summary: 'ReactNode' },
+                defaultValue: { summary: '<IconHistory />' },
+            },
+        },
+        styles: {
+            control: { type: 'object' },
+            description: 'Custom styles object',
+            table: {
+                type: { summary: 'MantineStylesObject' },
+            },
+        },
+        disabled: {
+            control: { type: 'boolean' },
+            description: 'Disabled state',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        loading: {
+            control: { type: 'boolean' },
+            description: 'Indicate loading state',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        onClick: {
+            action: 'clicked',
+            description: 'Click handler function',
+            table: {
+                type: { summary: '() => void' },
+            },
+        },
+        shadow: {
+            control: { type: 'boolean' },
+            description: 'Adds shadow to the button',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            }
+        },
+        subtle: {
+            control: { type: 'boolean' },
+            description: 'Colors the icon instead of the background and reverses the color based on the variant',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            }
+        }
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        children: _jsx(IconHistory, {}),
+        size: 'md',
+        variant: 'primary',
+        disabled: false,
+        loading: false,
+        shadow: false,
+        subtle: false,
+        styles: {},
+        onClick: () => { },
+    },
+};
+export const Variants = {
+    render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(IconButton, { variant: "primary", children: _jsx(Icon12Hours, {}) }), _jsx(IconButton, { variant: "secondary", children: _jsx(Icon24Hours, {}) }), _jsx(IconButton, { variant: "cancel", children: _jsx(IconClock, {}) }), _jsx(IconButton, { variant: "success", children: _jsx(IconCheck, {}) }), _jsx(IconButton, { variant: "warning", children: _jsx(IconAlertCircle, {}) }), _jsx(IconButton, { variant: "text", children: _jsx(IconClock2, {}) })] })),
+};
+export const Subtle = {
+    render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(IconButton, { variant: "primary", subtle: true, children: _jsx(Icon12Hours, {}) }), _jsx(IconButton, { variant: "secondary", subtle: true, children: _jsx(Icon24Hours, {}) }), _jsx(IconButton, { variant: "cancel", subtle: true, children: _jsx(IconClock, {}) }), _jsx(IconButton, { variant: "success", subtle: true, children: _jsx(IconCheck, {}) }), _jsx(IconButton, { variant: "warning", subtle: true, children: _jsx(IconAlertCircle, {}) }), _jsx(IconButton, { variant: "text", subtle: true, children: _jsx(IconClock2, {}) })] })),
+};
+export const Tooltip = {
+    render: () => (_jsx(Group, { gap: "1.6rem", children: _jsx(IconButton, { tooltip: "Tooltip", children: _jsx(Icon12Hours, {}) }) })),
+};
+export const Sizes = {
+    render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(IconButton, { size: "sm", children: _jsx(Icon360View, {}) }), _jsx(IconButton, { size: "md", children: _jsx(IconAdjustments, {}) }), _jsx(IconButton, { size: "lg", children: _jsx(IconArrowsMaximize, {}) })] })),
+};
+export const States = {
+    render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(IconButton, { children: _jsx(IconArrowLeft, {}) }), _jsx(IconButton, { disabled: true, children: _jsx(IconCaretDown, {}) }), _jsx(IconButton, { loading: true, children: _jsx(IconLoader2, {}) }), _jsx(IconButton, { shadow: true, children: _jsx(IconArrowLeft, {}) })] })),
+};
+export const SubtleStates = {
+    render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(IconButton, { subtle: true, children: _jsx(IconArrowLeft, {}) }), _jsx(IconButton, { subtle: true, disabled: true, children: _jsx(IconCaretDown, {}) }), _jsx(IconButton, { subtle: true, loading: true, children: _jsx(IconLoader2, {}) }), _jsx(IconButton, { subtle: true, shadow: true, children: _jsx(IconArrowLeft, {}) })] })),
+};
+export const CustomStyles = {
+    render: () => (_jsxs(Group, { gap: "1.6rem", children: [_jsx(IconButton, { styles: {
+                    root: {
+                        borderRadius: '20px',
+                        background: 'linear-gradient(45deg, #ff6b6b, #ee5a24)',
+                        '&:hover': {
+                            background: 'linear-gradient(45deg, #ee5a24, #ff6b6b)',
+                        },
+                    },
+                }, children: _jsx(IconArrowLeft, {}) }), _jsx(IconButton, { styles: {
+                    root: {
+                        borderRadius: '0px',
+                        background: 'black',
+                        color: 'white',
+                        border: '2px solid white',
+                        '&:hover': {
+                            background: 'white',
+                            color: 'black',
+                        },
+                    },
+                }, children: _jsx(IconArrowRight, {}) })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: `<IconButton
+  styles={{
+    root: {
+      borderRadius: '20px',
+      background: 'linear-gradient(45deg, #ff6b6b, #ee5a24)',
+      '&:hover': {
+        background: 'linear-gradient(45deg, #ee5a24, #ff6b6b)',
+      },
+    },
+  }}
+>
+  <IconArrowLeft />
+</IconButton>
+
+<IconButton
+  styles={{
+    root: {
+      borderRadius: '0px',
+      background: 'black',
+      color: 'white',
+      border: '2px solid white',
+      '&:hover': {
+        background: 'white',
+        color: 'black',
+      },
+    },
+  }}
+>
+  <IconArrowRight />
+</IconButton>`,
+            },
+        },
+    },
+};

package/dist/components/Inputs/Buttons/IconButton/sizes.d.ts

@@ -0,0 +1,19 @@
+declare const componentSizes: {
+    sm: {
+        borderLength: number;
+        padding: string;
+        iconSize: number;
+    };
+    md: {
+        borderLength: number;
+        padding: string;
+        iconSize: number;
+    };
+    lg: {
+        borderLength: number;
+        padding: string;
+        iconSize: number;
+    };
+};
+export { componentSizes };
+//# sourceMappingURL=sizes.d.ts.map

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

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

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

@@ -0,0 +1,6 @@
+const componentSizes = {
+    sm: { borderLength: 2.8, padding: '0.4rem', iconSize: 16 },
+    md: { borderLength: 3.6, padding: '0.4rem', iconSize: 20 },
+    lg: { borderLength: 4.8, padding: '0.4rem', iconSize: 24 },
+};
+export { componentSizes };