@taiv/ui 1.14.1 → 2.0.0

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

@@ -1,63 +1,83 @@
 export declare const modalVariants: {
-    readonly confirm: {
-        readonly title: "Are you sure?";
-        readonly message: "This action cannot be undone.";
-        readonly confirmLabel: "OK";
+    readonly cancel: {
+        readonly buttonVariant: "cancel";
         readonly cancelLabel: "Cancel";
+        readonly confirmLabel: "Delete";
+        readonly icon: "fas fa-trash-can";
+        readonly iconBackgroundColor: "#FFEBEA";
+        readonly iconColor: "#C10007";
+        readonly message: "Are you sure you want to delete this item? This action cannot be undone.";
+        readonly title: "Delete Item";
+    };
+    readonly confirm: {
         readonly buttonVariant: "primary";
+        readonly cancelLabel: "Cancel";
+        readonly confirmLabel: "OK";
         readonly icon: "fas fa-circle-question";
-        readonly iconColor: "#00A6F4";
-        readonly iconBackgroundColor: "#BDEAFF";
-    };
-    readonly info: {
-        readonly title: "Info";
+        readonly iconBackgroundColor: "#F3EEFF";
+        readonly iconColor: "#6F3FEE";
         readonly message: "This action cannot be undone.";
-        readonly confirmLabel: "OK";
+        readonly title: "Are you sure?";
+    };
+    readonly delete: {
+        readonly buttonVariant: "cancel";
         readonly cancelLabel: "Cancel";
+        readonly confirmLabel: "Delete";
+        readonly icon: "fas fa-trash-can";
+        readonly iconBackgroundColor: "#FFEBEA";
+        readonly iconColor: "#FF3B30";
+        readonly message: "Are you sure you want to delete this item? This action cannot be undone.";
+        readonly title: "Delete Item";
+    };
+    readonly error: {
+        readonly buttonVariant: "cancel";
+        readonly cancelLabel: "Cancel";
+        readonly confirmLabel: "OK";
+        readonly icon: "fas fa-circle-exclamation";
+        readonly iconBackgroundColor: "#FFEBEA";
+        readonly iconColor: "#FF3B30";
+        readonly message: "An error occurred and your changes were not saved. Please try again.";
+        readonly title: "Oops!";
+    };
+    readonly info: {
         readonly buttonVariant: "primary";
+        readonly cancelLabel: "Cancel";
+        readonly confirmLabel: "OK";
         readonly icon: "fas fa-circle-info";
-        readonly iconColor: "#00A6F4";
-        readonly iconBackgroundColor: "#BDEAFF";
+        readonly iconBackgroundColor: "#F3EEFF";
+        readonly iconColor: "#6F3FEE";
+        readonly message: "This action cannot be undone.";
+        readonly title: "Info";
     };
     readonly success: {
-        readonly title: "Success";
-        readonly message: "Operation completed successfully!";
-        readonly confirmLabel: "OK";
-        readonly cancelLabel: "Cancel";
         readonly buttonVariant: "success";
+        readonly cancelLabel: "Cancel";
+        readonly confirmLabel: "OK";
         readonly icon: "fas fa-circle-check";
-        readonly iconColor: "#00A63E";
-        readonly iconBackgroundColor: "#E6F4E7";
+        readonly iconBackgroundColor: "#E6FFF3";
+        readonly iconColor: "#00DE6F";
+        readonly message: "Operation completed successfully!";
+        readonly title: "Success";
     };
-    readonly error: {
-        readonly title: "Oops!";
-        readonly message: "An error occurred and your changes were not saved. Please try again.";
-        readonly confirmLabel: "OK";
-        readonly cancelLabel: "Cancel";
+    readonly remove: {
         readonly buttonVariant: "cancel";
-        readonly icon: "fas fa-circle-exclamation";
-        readonly iconColor: "#FB2C36";
-        readonly iconBackgroundColor: "#FFD7D9";
+        readonly cancelLabel: "Cancel";
+        readonly confirmLabel: "Remove";
+        readonly icon: "fas fa-circle-minus";
+        readonly iconBackgroundColor: "#FFEBEA";
+        readonly iconColor: "#FF3B30";
+        readonly message: "This item will be removed.";
+        readonly title: "Remove item?";
     };
     readonly warning: {
-        readonly title: "Warning";
-        readonly message: "This action cannot be undone. Are you sure?";
-        readonly confirmLabel: "Yes, proceed";
-        readonly cancelLabel: "Cancel";
         readonly buttonVariant: "warning";
+        readonly cancelLabel: "Cancel";
+        readonly confirmLabel: "Yes, proceed";
         readonly icon: "fas fa-triangle-exclamation";
+        readonly iconBackgroundColor: "#FFF4E6";
         readonly iconColor: "#FE9A00";
-        readonly iconBackgroundColor: "#FFE5B4";
-    };
-    readonly cancel: {
-        readonly title: "Delete Item";
-        readonly message: "Are you sure you want to delete this item? This action cannot be undone.";
-        readonly confirmLabel: "Delete";
-        readonly cancelLabel: "Cancel";
-        readonly buttonVariant: "cancel";
-        readonly icon: "fas fa-trash-can";
-        readonly iconColor: "#FB2C36";
-        readonly iconBackgroundColor: "#FFD7D9";
+        readonly message: "This action cannot be undone. Are you sure?";
+        readonly title: "Warning";
     };
 };
 //# sourceMappingURL=variants.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Modals/variants.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DhB,CAAC"}
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Modals/variants.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFhB,CAAC"}

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

@@ -1,63 +1,83 @@
-import { primary, error, success, warning } from '../../../constants/colors';
+import { error, primary, success, warning } from '../../../constants/colors';
 export const modalVariants = {
-    confirm: {
-        title: 'Are you sure?',
-        message: 'This action cannot be undone.',
-        confirmLabel: 'OK',
+    cancel: {
+        buttonVariant: 'cancel',
         cancelLabel: 'Cancel',
+        confirmLabel: 'Delete',
+        icon: 'fas fa-trash-can',
+        iconBackgroundColor: error[25],
+        iconColor: error[200],
+        message: 'Are you sure you want to delete this item? This action cannot be undone.',
+        title: 'Delete Item',
+    },
+    confirm: {
         buttonVariant: 'primary',
+        cancelLabel: 'Cancel',
+        confirmLabel: 'OK',
         icon: 'fas fa-circle-question',
+        iconBackgroundColor: primary[25],
         iconColor: primary[200],
-        iconBackgroundColor: primary[50],
-    },
-    info: {
-        title: 'Info',
         message: 'This action cannot be undone.',
-        confirmLabel: 'OK',
+        title: 'Are you sure?',
+    },
+    delete: {
+        buttonVariant: 'cancel',
+        cancelLabel: 'Cancel',
+        confirmLabel: 'Delete',
+        icon: 'fas fa-trash-can',
+        iconBackgroundColor: error[25],
+        iconColor: error[100],
+        message: 'Are you sure you want to delete this item? This action cannot be undone.',
+        title: 'Delete Item',
+    },
+    error: {
+        buttonVariant: 'cancel',
         cancelLabel: 'Cancel',
+        confirmLabel: 'OK',
+        icon: 'fas fa-circle-exclamation',
+        iconBackgroundColor: error[25],
+        iconColor: error[100],
+        message: 'An error occurred and your changes were not saved. Please try again.',
+        title: 'Oops!',
+    },
+    info: {
         buttonVariant: 'primary',
+        cancelLabel: 'Cancel',
+        confirmLabel: 'OK',
         icon: 'fas fa-circle-info',
+        iconBackgroundColor: primary[25],
         iconColor: primary[200],
-        iconBackgroundColor: primary[50],
+        message: 'This action cannot be undone.',
+        title: 'Info',
     },
     success: {
-        title: 'Success',
-        message: 'Operation completed successfully!',
-        confirmLabel: 'OK',
-        cancelLabel: 'Cancel',
         buttonVariant: 'success',
+        cancelLabel: 'Cancel',
+        confirmLabel: 'OK',
         icon: 'fas fa-circle-check',
+        iconBackgroundColor: success[25],
         iconColor: success[200],
-        iconBackgroundColor: success[50],
+        message: 'Operation completed successfully!',
+        title: 'Success',
     },
-    error: {
-        title: 'Oops!',
-        message: 'An error occurred and your changes were not saved. Please try again.',
-        confirmLabel: 'OK',
-        cancelLabel: 'Cancel',
+    remove: {
         buttonVariant: 'cancel',
-        icon: 'fas fa-circle-exclamation',
+        cancelLabel: 'Cancel',
+        confirmLabel: 'Remove',
+        icon: 'fas fa-circle-minus',
+        iconBackgroundColor: error[25],
         iconColor: error[100],
-        iconBackgroundColor: error[50],
+        message: 'This item will be removed.',
+        title: 'Remove item?',
     },
     warning: {
-        title: 'Warning',
-        message: 'This action cannot be undone. Are you sure?',
-        confirmLabel: 'Yes, proceed',
-        cancelLabel: 'Cancel',
         buttonVariant: 'warning',
+        cancelLabel: 'Cancel',
+        confirmLabel: 'Yes, proceed',
         icon: 'fas fa-triangle-exclamation',
+        iconBackgroundColor: warning[25],
         iconColor: warning[100],
-        iconBackgroundColor: warning[50],
-    },
-    cancel: {
-        title: 'Delete Item',
-        message: 'Are you sure you want to delete this item? This action cannot be undone.',
-        confirmLabel: 'Delete',
-        cancelLabel: 'Cancel',
-        buttonVariant: 'cancel',
-        icon: 'fas fa-trash-can',
-        iconColor: error[100],
-        iconBackgroundColor: error[50],
+        message: 'This action cannot be undone. Are you sure?',
+        title: 'Warning',
     },
 };

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

@@ -7,4 +7,5 @@ export declare const Default: Story;
 export declare const Variants: Story;
 export declare const GenericError: Story;
 export declare const AsyncNotifications: Story;
+export declare const ProgressNotifications: Story;
 //# sourceMappingURL=Notifications.stories.d.ts.map

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;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"}
+{"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;AAiDF,eAAO,MAAM,qBAAqB,EAAE,KAEnC,CAAC"}

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

@@ -105,3 +105,34 @@ const AsyncDemo = () => {
 export const AsyncNotifications = {
     render: () => _jsx(AsyncDemo, {}),
 };
+const ProgressDemo = () => {
+    const { showWithProgress } = useNotifications();
+    const [isRunning, setIsRunning] = useState(false);
+    const startUpload = (outcome) => {
+        setIsRunning(true);
+        const handle = showWithProgress({
+            message: 'Uploading my-content.mp4 (0%)',
+        });
+        let value = 0;
+        const interval = setInterval(() => {
+            value += 10;
+            if (value < 100) {
+                handle.update(value, `Uploading my-content.mp4 (${value}%)`);
+            }
+            else {
+                clearInterval(interval);
+                if (outcome === 'success') {
+                    handle.done('my-content.mp4 uploaded');
+                }
+                else {
+                    handle.fail('Upload failed. Please try again.');
+                }
+                setIsRunning(false);
+            }
+        }, 400);
+    };
+    return (_jsxs(Group, { gap: spacing.xs, children: [_jsx(Button, { variant: 'success', onClick: () => startUpload('success'), disabled: isRunning, children: "Upload (success)" }), _jsx(Button, { variant: 'cancel', onClick: () => startUpload('failure'), disabled: isRunning, children: "Upload (failure)" })] }));
+};
+export const ProgressNotifications = {
+    render: () => _jsx(ProgressDemo, {}),
+};

package/dist/components/Info/Notifications/variants.d.ts

@@ -1,39 +1,45 @@
 export declare const componentVariants: {
-    readonly success: {
-        readonly defaultTitle: "Success!";
-        readonly color: "#00A63E";
-        readonly icon: import("react/jsx-runtime").JSX.Element;
+    readonly copy: {
         readonly autoClose: 4000;
+        readonly color: "#6F3FEE";
+        readonly defaultTitle: "Copied to clipboard!";
+        readonly icon: import("react/jsx-runtime").JSX.Element;
     };
     readonly error: {
-        readonly defaultTitle: "Oops!";
-        readonly color: "#FB2C36";
-        readonly icon: import("react/jsx-runtime").JSX.Element;
         readonly autoClose: false;
-    };
-    readonly warning: {
-        readonly defaultTitle: "Warning";
-        readonly color: "#FE9A00";
+        readonly color: "#FF3B30";
+        readonly defaultTitle: "Oops!";
         readonly icon: import("react/jsx-runtime").JSX.Element;
-        readonly autoClose: 4000;
     };
     readonly info: {
+        readonly autoClose: 4000;
+        readonly color: "#6F3FEE";
         readonly defaultTitle: "Note";
-        readonly color: "#00A6F4";
         readonly icon: import("react/jsx-runtime").JSX.Element;
-        readonly autoClose: 4000;
     };
     readonly loading: {
+        readonly autoClose: false;
+        readonly color: "#6F3FEE";
         readonly defaultTitle: "Loading...";
-        readonly color: "#00A6F4";
         readonly icon: import("react/jsx-runtime").JSX.Element;
-        readonly autoClose: false;
     };
-    readonly copy: {
-        readonly defaultTitle: "Copied to clipboard!";
-        readonly color: "#0081CE";
+    readonly success: {
+        readonly autoClose: 4000;
+        readonly color: "#00A84F";
+        readonly defaultTitle: "Success!";
         readonly icon: import("react/jsx-runtime").JSX.Element;
+    };
+    readonly remove: {
         readonly autoClose: 4000;
+        readonly color: "#FF3B30";
+        readonly defaultTitle: "Removed";
+        readonly icon: import("react/jsx-runtime").JSX.Element;
+    };
+    readonly warning: {
+        readonly autoClose: 4000;
+        readonly color: "#FE9A00";
+        readonly defaultTitle: "Warning";
+        readonly icon: import("react/jsx-runtime").JSX.Element;
     };
 };
 //# sourceMappingURL=variants.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Notifications/variants.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCpB,CAAC"}
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Notifications/variants.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDpB,CAAC"}

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

@@ -1,41 +1,47 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { primary, error, success, warning } from '../../../constants/colors';
+import { error, primary, success, warning } from '../../../constants/colors';
 import { Loader } from '../../Layout/Loader/Loader';
 export const componentVariants = {
-    success: {
-        defaultTitle: 'Success!',
-        color: success[200],
-        icon: _jsx("i", { className: "fas fa-check-circle", style: { color: success[200] } }),
+    copy: {
         autoClose: 4000,
+        color: primary[200],
+        defaultTitle: 'Copied to clipboard!',
+        icon: _jsx("i", { className: 'fas fa-copy', style: { color: primary[200] } }),
     },
     error: {
-        defaultTitle: 'Oops!',
-        color: error[100],
-        icon: _jsx("i", { className: "fas fa-exclamation-circle", style: { color: error[100] } }),
         autoClose: false,
-    },
-    warning: {
-        defaultTitle: 'Warning',
-        color: warning[100],
-        icon: _jsx("i", { className: "fas fa-exclamation-triangle", style: { color: warning[100] } }),
-        autoClose: 4000,
+        color: error[100],
+        defaultTitle: 'Oops!',
+        icon: (_jsx("i", { className: 'fas fa-exclamation-circle', style: { color: error[100] } })),
     },
     info: {
-        defaultTitle: 'Note',
-        color: primary[200],
-        icon: _jsx("i", { className: "fas fa-info-circle", style: { color: primary[200] } }),
         autoClose: 4000,
+        color: primary[200],
+        defaultTitle: 'Note',
+        icon: _jsx("i", { className: 'fas fa-info-circle', style: { color: primary[200] } }),
     },
     loading: {
-        defaultTitle: 'Loading...',
-        color: primary[200],
-        icon: _jsx(Loader, { size: "md", color: primary[200] }),
         autoClose: false,
+        color: primary[200],
+        defaultTitle: 'Loading...',
+        icon: _jsx(Loader, { color: primary[200], size: 'md' }),
     },
-    copy: {
-        defaultTitle: 'Copied to clipboard!',
-        color: primary[300],
-        icon: _jsx("i", { className: "fas fa-copy", style: { color: primary[300] } }),
+    success: {
         autoClose: 4000,
+        color: success[300],
+        defaultTitle: 'Success!',
+        icon: _jsx("i", { className: 'fas fa-check-circle', style: { color: success[300] } }),
+    },
+    remove: {
+        autoClose: 4000,
+        color: error[100],
+        defaultTitle: 'Removed',
+        icon: _jsx("i", { className: 'fas fa-circle-minus', style: { color: error[100] } }),
+    },
+    warning: {
+        autoClose: 4000,
+        color: warning[100],
+        defaultTitle: 'Warning',
+        icon: (_jsx("i", { className: 'fas fa-exclamation-triangle', style: { color: warning[100] } })),
     },
 };

package/dist/components/Info/ResponsiveDrawer/ResponsiveDrawer.d.ts

@@ -0,0 +1,37 @@
+import type React from 'react';
+export interface ResponsiveDrawerAnchor {
+    /** Anchor used below the `breakpoint` width. */
+    base: 'bottom' | 'right' | 'left' | 'top';
+    /** Anchor used at/above the `breakpoint` width. */
+    md: 'bottom' | 'right' | 'left' | 'top';
+}
+export interface ResponsiveDrawerProps {
+    opened: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    footer?: React.ReactNode;
+    header?: React.ReactNode;
+    /** Width at which we switch from `base` to `md`. Default `768`. */
+    breakpoint?: number;
+    /** Anchor resolution across breakpoints. Default `{ base: 'bottom', md: 'right' }`. */
+    anchor?: ResponsiveDrawerAnchor;
+    /** Size prop forwarded to the active drawer variant. */
+    size?: string | number;
+    /** Max sheet height (viewport %) when rendering as `MobileDrawer`. */
+    maxHeightVh?: number;
+    /** Show the grab handle when rendering as `MobileDrawer`. Default `true`. */
+    showGrabHandle?: boolean;
+    /** Show the header close button when rendering as `Drawer`. Default `true`. */
+    showClose?: boolean;
+    /** Pixel offset from the viewport bottom when rendering as `MobileDrawer`. */
+    bottomOffset?: number;
+}
+/**
+ * Branches between `Drawer` and `MobileDrawer` at a breakpoint so consumers
+ * can author a single markup tree for both. Content shape (title / subtitle /
+ * footer / header) stays identical across both variants.
+ */
+export declare const ResponsiveDrawer: ({ opened, onClose, children, title, subtitle, footer, header, breakpoint, anchor, size, maxHeightVh, showGrabHandle, showClose, bottomOffset, }: ResponsiveDrawerProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ResponsiveDrawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveDrawer.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/ResponsiveDrawer/ResponsiveDrawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,sBAAsB;IACrC,gDAAgD;IAChD,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;IAC1C,mDAAmD;IACnD,EAAE,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;CACzC;AAED,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uFAAuF;IACvF,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,sEAAsE;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6EAA6E;IAC7E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,+EAA+E;IAC/E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8EAA8E;IAC9E,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,iJAe9B,qBAAqB,4CAqCvB,CAAC"}

package/dist/components/Info/ResponsiveDrawer/ResponsiveDrawer.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMediaQuery } from '../../../hooks/useMediaQuery';
+import { Drawer } from '../Drawer/Drawer';
+import { MobileDrawer } from '../MobileDrawer/MobileDrawer';
+/**
+ * Branches between `Drawer` and `MobileDrawer` at a breakpoint so consumers
+ * can author a single markup tree for both. Content shape (title / subtitle /
+ * footer / header) stays identical across both variants.
+ */
+export const ResponsiveDrawer = ({ opened, onClose, children, title, subtitle, footer, header, breakpoint = 768, anchor = { base: 'bottom', md: 'right' }, size, maxHeightVh, showGrabHandle, showClose, bottomOffset, }) => {
+    const isNarrow = useMediaQuery(`(max-width: ${breakpoint - 1}px)`);
+    const activeAnchor = isNarrow ? anchor.base : anchor.md;
+    if (activeAnchor === 'bottom') {
+        return (_jsx(MobileDrawer, { bottomOffset: bottomOffset, footer: footer, header: header, maxHeightVh: maxHeightVh, onClose: onClose, opened: opened, showGrabHandle: showGrabHandle, subtitle: subtitle, title: title, children: children }));
+    }
+    return (_jsx(Drawer, { footer: footer, header: header, onClose: onClose, opened: opened, position: activeAnchor, showClose: showClose, size: size, subtitle: subtitle, title: title, children: children }));
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveDrawer.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/ResponsiveDrawer/ResponsiveDrawer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAM5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAYvC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KA8BrB,CAAC"}

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useDisclosure } from '../../../hooks/useDisclosure';
+import { Button } from '../../Inputs/Buttons/Button/Button';
+import { Group } from '../../Layout/Group/Group';
+import { Stack } from '../../Layout/Stack/Stack';
+import { Text } from '../../Typography/Text/Text';
+import { ResponsiveDrawer } from './ResponsiveDrawer';
+const meta = {
+    component: ResponsiveDrawer,
+    parameters: {
+        docs: {
+            description: {
+                component: 'Branches between `Drawer` (right-anchored) and `MobileDrawer` (bottom-anchored) at a breakpoint. Author one markup tree — it renders correctly on both touch and pointer viewports. Resize the viewport to see the switch.',
+            },
+        },
+        layout: 'fullscreen',
+    },
+    title: 'Components/Info/ResponsiveDrawer',
+};
+export default meta;
+export const Default = {
+    render: () => {
+        const [opened, { open, close }] = useDisclosure(false);
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: open, children: "Open responsive drawer" }), _jsx(ResponsiveDrawer, { footer: _jsxs(Group, { position: 'right', children: [_jsx(Button, { onClick: close, variant: 'cancel', children: "Cancel" }), _jsx(Button, { onClick: close, children: "Save" })] }), onClose: close, opened: opened, title: 'Slide details', children: _jsxs(Stack, { children: [_jsx(Text, { children: "Renders as a bottom sheet under 768px and as a right-side drawer above it." }), _jsx(Text, { variant: 'subtle', children: "Resize the viewport to observe." })] }) })] }));
+    },
+};

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

@@ -21,7 +21,7 @@ declare const componentVariants: {
         icon: string;
     };
     error: {
-        color: "#FB2C36";
+        color: "#FF3B30";
         icon: string;
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"InfoTooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Tooltips/InfoTooltip/InfoTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,cAAc,CAAC;IACnE,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,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;IAClB,OAAO,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;CAC1C;AAED,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;CAatB,CAAC;AAEF,QAAA,MAAM,cAAc;;;;;CAKV,CAAC;AAEX,QAAA,MAAM,WAAW,GAAI,iFAA+G,gBAAgB,4CAcnJ,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"InfoTooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Tooltips/InfoTooltip/InfoTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAM5C,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,cAAc,CAAC;IACnE,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,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;IAClB,OAAO,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;CAC1C;AAED,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;CAatB,CAAC;AAEF,QAAA,MAAM,cAAc;;;;;CAKV,CAAC;AAEX,QAAA,MAAM,WAAW,GAAI,iFAA+G,gBAAgB,4CAwBnJ,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

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

@@ -1,6 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { error, neutral, warning } from '../../../../constants/colors';
 import { Tooltip } from '../Tooltip/Tooltip';
+import { useTouchDevice } from '../../../../hooks/useMediaQuery';
+import { Popover } from '../Popover/Popover';
 const componentVariants = {
     info: {
         color: neutral[100],
@@ -8,7 +10,7 @@ const componentVariants = {
     },
     warning: {
         color: warning[100],
-        icon: 'fas fa-exclamation-circle',
+        icon: 'fas fa-triangle-exclamation',
     },
     error: {
         color: error[100],
@@ -29,6 +31,10 @@ const InfoTooltip = ({ text, content, position = 'top-start', size = 'md', offse
         },
         ...styles,
     };
-    return (_jsx(Tooltip, { text: text || content, position: position, offset: offset, className: className, maxWidth: maxWidth, children: _jsx("i", { className: componentVariants[variant].icon, style: style.icon }) }));
+    const isTouchDevice = useTouchDevice();
+    return (_jsx(_Fragment, { children: isTouchDevice ?
+            _jsx(Popover, { text: text || content, position: position, offset: offset, className: className, maxWidth: maxWidth, children: _jsx("i", { className: componentVariants[variant].icon, style: style.icon }) })
+            :
+                _jsx(Tooltip, { text: text || content, position: position, offset: offset, className: className, maxWidth: maxWidth, children: _jsx("i", { className: componentVariants[variant].icon, style: style.icon }) }) }));
 };
 export { InfoTooltip };

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { CSSObject } from '@mantine/styles';
+interface PopoverProps {
+    children: React.ReactNode;
+    text?: React.ReactNode;
+    position?: 'top-end' | 'bottom-end' | 'top-start' | 'bottom-start';
+    offset?: number;
+    className?: string;
+    styles?: Record<string, CSSObject>;
+    maxWidth?: string;
+    disabled?: boolean;
+    fullWidth?: boolean;
+}
+declare const Popover: ({ children, text, position, offset, className, styles, maxWidth, disabled, fullWidth }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export { Popover };
+//# sourceMappingURL=Popover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Tooltips/Popover/Popover.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;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,OAAO,GAAI,wFAAsG,YAAY,4CA2ClI,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover as MantinePopover, Box } from '@mantine/core';
+import { neutral } from '../../../../constants/colors';
+import { fontBase, fontSize, fontWeight } from '../../../../constants/font';
+import { spacing } from '../../../../constants/spacing';
+const Popover = ({ children, text, position = 'top-start', offset, className, styles, maxWidth, disabled, fullWidth }) => {
+    const wrapperStyle = fullWidth
+        ? { display: 'block', width: '100%', minWidth: 0 }
+        : {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 'fit-content',
+        };
+    const popoverStyle = {
+        dropdown: {
+            ...fontBase,
+            color: neutral[200],
+            fontWeight: fontWeight['medium'],
+            boxShadow: '0px 0px 19px 0px #00000040',
+            borderRadius: '8px',
+            textWrap: 'wrap',
+            maxWidth: maxWidth || '375px',
+            padding: `${spacing.sm} 11.25px`,
+            ...fontSize['sm'],
+            height: 'fit-content',
+        },
+        ...styles,
+    };
+    return (_jsxs(MantinePopover, { withArrow: true, arrowRadius: 0, arrowSize: 10, position: position, styles: popoverStyle, offset: offset, withinPortal: true, disabled: disabled, children: [_jsx(MantinePopover.Target, { children: _jsx(Box, { sx: wrapperStyle, className: className, children: children }) }), _jsx(MantinePopover.Dropdown, { children: text })] }));
+};
+export { Popover };