@taiv/ui 1.15.0 → 2.0.0

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

@@ -0,0 +1,38 @@
+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 { MobileDrawer } from './MobileDrawer';
+const meta = {
+    component: MobileDrawer,
+    parameters: {
+        docs: {
+            description: {
+                component: 'Bottom-anchored mobile sheet with a grab-handle, rounded top corners, and pinned header/footer. Use on touch viewports; pair with the right-anchored `Drawer` on desktop or use `ResponsiveDrawer` to branch automatically.',
+            },
+        },
+        layout: 'fullscreen',
+    },
+    title: 'Components/Info/MobileDrawer',
+};
+export default meta;
+export const Default = {
+    render: () => {
+        const [opened, { open, close }] = useDisclosure(false);
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: open, children: "Open mobile drawer" }), _jsx(MobileDrawer, { onClose: close, opened: opened, title: 'Slide details', children: _jsxs(Stack, { children: [_jsx(Text, { children: "Grab handle at the top. Body scrolls when needed." }), _jsx(Text, { variant: 'subtle', children: "Anchored to the bottom at up to 75% viewport height." })] }) })] }));
+    },
+};
+export const WithFooter = {
+    render: () => {
+        const [opened, { open, close }] = useDisclosure(false);
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: open, children: "Open with pinned footer" }), _jsx(MobileDrawer, { footer: _jsxs(Group, { grow: true, children: [_jsx(Button, { onClick: close, variant: 'cancel', children: "Cancel" }), _jsx(Button, { onClick: close, children: "Confirm" })] }), onClose: close, opened: opened, title: 'Discard changes?', children: _jsx(Text, { children: "Pinned footer keeps primary actions visible while body scrolls." }) })] }));
+    },
+};
+export const ShorterSheet = {
+    render: () => {
+        const [opened, { open, close }] = useDisclosure(false);
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: open, children: "Open 60% sheet" }), _jsx(MobileDrawer, { maxHeightVh: 60, onClose: close, opened: opened, title: 'Filter', children: _jsx(Text, { children: "Custom viewport cap via `maxHeightVh`." }) })] }));
+    },
+};

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

@@ -1,5 +1,9 @@
 import React from "react";
+import type { CSSObject } from "@mantine/core";
 import { modalVariants } from "../variants";
+import { ButtonProps } from "../../../Inputs/Buttons/Button/Button";
+/** Style overrides merged into Mantine `Modal` `styles` (object form only). */
+export type FormModalStylesOverride = Partial<Record<"body" | "close" | "content" | "header" | "inner" | "overlay" | "root" | "title", CSSObject>>;
 export interface FormModalProps {
     opened: boolean;
     onClose: () => void;
@@ -13,6 +17,18 @@ export interface FormModalProps {
     onConfirm?: () => void;
     cancelLabel?: string;
     confirmLabel?: string;
+    confirmRightIcon?: React.ReactNode;
+    cancelLeftIcon?: React.ReactNode;
+    confirmVariant?: ButtonProps['variant'];
+    /** Optional destructive footer action (e.g. Delete on edit modals). Rendered before Cancel. */
+    onDelete?: () => void;
+    deleteLabel?: string;
+    deleteButtonDisabled?: boolean;
+    deleteButtonLoading?: boolean;
+    deleteLeftIcon?: React.ReactNode;
+    fullScreen?: boolean;
+    /** Merged into Mantine `Modal` `styles` (e.g. lock body scroll when children use an inner `ScrollArea`). */
+    modalStyles?: FormModalStylesOverride;
 }
-export declare const FormModal: ({ opened, onClose, icon, children, size, modalVariant, confirmButtonDisabled, confirmButtonLoading, onCancel, onConfirm, cancelLabel, confirmLabel, }: FormModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormModal: ({ opened, onClose, icon, children, size, modalVariant, confirmButtonDisabled, confirmButtonLoading, onCancel, onConfirm, cancelLabel, confirmLabel, confirmRightIcon, cancelLeftIcon, confirmVariant, onDelete, deleteLabel, deleteButtonDisabled, deleteButtonLoading, deleteLeftIcon, modalStyles, fullScreen, }: FormModalProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=FormModal.d.ts.map

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;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"}
+{"version":3,"file":"FormModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Modals/FormModal/FormModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAK/C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAU,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAE5E,+EAA+E;AAC/E,MAAM,MAAM,uBAAuB,GAAG,OAAO,CAC3C,MAAM,CACF,MAAM,GACN,OAAO,GACP,SAAS,GACT,QAAQ,GACR,OAAO,GACP,SAAS,GACT,MAAM,GACN,OAAO,EACT,SAAS,CACV,CACF,CAAC;AAEF,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;IACtB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,cAAc,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACxC,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4GAA4G;IAC5G,WAAW,CAAC,EAAE,uBAAuB,CAAC;CACvC;AAED,eAAO,MAAM,SAAS,GAAI,oTAuBvB,cAAc,4CAwIhB,CAAC"}

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

@@ -8,7 +8,7 @@ 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 = "400px", 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, confirmRightIcon, cancelLeftIcon, confirmVariant, onDelete, deleteLabel = "Delete", deleteButtonDisabled = false, deleteButtonLoading = false, deleteLeftIcon, modalStyles, fullScreen = false, }) => {
     const selectedVariant = modalVariants[modalVariant];
     const iconContainer = {
         width: "42px",
@@ -19,7 +19,7 @@ export const FormModal = ({ opened, onClose, icon, children, size = "400px", mod
     };
     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: "20px" } }));
-    return (_jsx(MantineModal, { opened: opened, onClose: onClose, centered: true, radius: "16px", overlayProps: {
+    return (_jsx(MantineModal, { opened: opened, onClose: onClose, centered: true, fullScreen: fullScreen, radius: "16px", overlayProps: {
             opacity: 0,
             blur: 4,
         }, size: size, transitionProps: {
@@ -33,13 +33,15 @@ export const FormModal = ({ opened, onClose, icon, children, size = "400px", mod
                 height: "18px",
             },
         }, styles: {
-            content: {
-                borderRadius: "8px",
-                border: `1px solid ${neutral[50]}`,
-                boxShadow: "0px 0px 19px 0px #00000040",
-            },
-            header: {
-                padding: spacing.sm,
+            ...modalStyles,
+            body: {
+                padding: `0 ${spacing.xxl} ${spacing.lg} ${spacing.xxl}`,
+                display: "flex",
+                flexDirection: "column",
+                flex: 1,
+                minHeight: 0,
+                overflow: "hidden",
+                ...modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.body,
             },
             close: {
                 borderRadius: "16px",
@@ -52,9 +54,25 @@ export const FormModal = ({ opened, onClose, icon, children, size = "400px", mod
                 "&:active": {
                     transform: "none",
                 },
+                ...modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.close,
             },
-            body: {
-                padding: `0 ${spacing.xxl} ${spacing.lg} ${spacing.xxl}`,
+            content: {
+                borderRadius: "8px",
+                border: `1px solid ${neutral[50]}`,
+                boxShadow: "0px 0px 19px 0px #00000040",
+                display: "flex",
+                flexDirection: "column",
+                ...modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.content,
+            },
+            header: {
+                padding: spacing.sm,
+                ...modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.header,
             },
-        }, 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 })] }) })] }) }) }));
+        }, children: _jsxs(Stack, { gap: "20px", w: "100%", align: "stretch", style: { minWidth: 0, flex: 1, minHeight: 0 }, children: [_jsx(Center, { mx: "auto", style: { ...iconContainer, flexShrink: 0 }, children: modalIcon }), children && (_jsx(Stack, { gap: spacing.xxs, align: "stretch", w: "100%", style: {
+                        minWidth: 0,
+                        maxWidth: "100%",
+                        flex: 1,
+                        minHeight: 0,
+                        overflow: "hidden",
+                    }, children: children })), _jsx(Center, { w: "100%", style: { flexShrink: 0 }, children: _jsxs(Group, { gap: "10px", align: "center", children: [_jsx(Button, { onClick: onCancel, variant: "secondary", leftIcon: cancelLeftIcon, children: cancelLabel || selectedVariant.cancelLabel }), onDelete && (_jsx(Button, { onClick: onDelete, variant: "cancel", disabled: deleteButtonDisabled, loading: deleteButtonLoading, leftIcon: deleteLeftIcon, children: deleteLabel })), _jsx(Button, { onClick: onConfirm, variant: confirmVariant || selectedVariant.buttonVariant, disabled: confirmButtonDisabled, loading: confirmButtonLoading, rightIcon: confirmRightIcon, children: confirmLabel || selectedVariant.confirmLabel })] }) })] }) }));
 };

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

@@ -0,0 +1,60 @@
+import React from "react";
+import type { CSSObject } from "@mantine/core";
+import { modalVariants } from "../variants";
+import { ButtonProps } from "../../../Inputs/Buttons/Button/Button";
+/** Style overrides merged into Mantine `Modal` `styles` (object form only). */
+export type FormModalV2StylesOverride = Partial<Record<"body" | "close" | "content" | "header" | "inner" | "overlay" | "root" | "title", CSSObject>>;
+export interface FormModalV2Props {
+    opened: boolean;
+    onClose: () => void;
+    icon?: React.ReactElement;
+    /** Pinned title rendered in the header zone — stays visible while body scrolls. */
+    title?: string;
+    /** Pinned subtitle rendered below the title in the header zone. */
+    subtitle?: string;
+    /**
+     * Form content. Rendered inside a scrollable body zone — the body grows
+     * up to the available modal height, then scrolls. Consumers do NOT need to
+     * wrap children in a ScrollArea; the body owns scroll behavior.
+     */
+    children?: React.ReactNode;
+    size?: string | number;
+    modalVariant?: keyof typeof modalVariants;
+    confirmButtonDisabled?: boolean;
+    confirmButtonLoading?: boolean;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    cancelLabel?: string;
+    confirmLabel?: string;
+    confirmRightIcon?: React.ReactNode;
+    cancelLeftIcon?: React.ReactNode;
+    confirmVariant?: ButtonProps['variant'];
+    /** Optional destructive footer action (e.g. Delete on edit modals). Rendered before Cancel. */
+    onDelete?: () => void;
+    deleteLabel?: string;
+    deleteButtonDisabled?: boolean;
+    deleteButtonLoading?: boolean;
+    deleteLeftIcon?: React.ReactNode;
+    fullScreen?: boolean;
+    /** Merged into Mantine `Modal` `styles`. Consumer overrides win. */
+    modalStyles?: FormModalV2StylesOverride;
+    /**
+     * Override for the pinned footer zone. When provided, replaces the
+     * default Cancel/Delete/Confirm button cluster entirely — useful for
+     * content pickers, multi-step wizards, or any flow whose footer doesn't
+     * map cleanly onto the three-button preset. The override is rendered in
+     * the same `flexShrink: 0` slot so layout invariants (scrollable body,
+     * pinned footer) hold either way.
+     */
+    footer?: React.ReactNode;
+}
+/**
+ * Three-zone modal: pinned header (icon + title + subtitle), scrollable body,
+ * pinned footer (buttons). The body is the only scroll surface — consumers
+ * pass form fields as children without any wrapper.
+ *
+ * Scroll height is enforced by flex layout, so content can never render behind
+ * the footer regardless of viewport size.
+ */
+export declare const FormModalV2: ({ opened, onClose, icon, title, subtitle, children, size, modalVariant, confirmButtonDisabled, confirmButtonLoading, onCancel, onConfirm, cancelLabel, confirmLabel, confirmRightIcon, cancelLeftIcon, confirmVariant, onDelete, deleteLabel, deleteButtonDisabled, deleteButtonLoading, deleteLeftIcon, modalStyles, fullScreen, footer, }: FormModalV2Props) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FormModalV2.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormModalV2.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Modals/FormModalV2/FormModalV2.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAM/C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAU,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAE5E,+EAA+E;AAC/E,MAAM,MAAM,yBAAyB,GAAG,OAAO,CAC7C,MAAM,CACF,MAAM,GACN,OAAO,GACP,SAAS,GACT,QAAQ,GACR,OAAO,GACP,SAAS,GACT,MAAM,GACN,OAAO,EACT,SAAS,CACV,CACF,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,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;IACtB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,cAAc,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACxC,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oEAAoE;IACpE,WAAW,CAAC,EAAE,yBAAyB,CAAC;IACxC;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,GAAI,6UA0BzB,gBAAgB,4CAuLlB,CAAC"}

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

@@ -0,0 +1,96 @@
+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 { Title } from "../../../Typography/Title/Title";
+import { modalVariants } from "../variants";
+import { Group } from "../../../Layout/Group/Group";
+import { Button } from "../../../Inputs/Buttons/Button/Button";
+/**
+ * Three-zone modal: pinned header (icon + title + subtitle), scrollable body,
+ * pinned footer (buttons). The body is the only scroll surface — consumers
+ * pass form fields as children without any wrapper.
+ *
+ * Scroll height is enforced by flex layout, so content can never render behind
+ * the footer regardless of viewport size.
+ */
+export const FormModalV2 = ({ opened, onClose, icon, title, subtitle, children, size = "400px", modalVariant = "info", confirmButtonDisabled = false, confirmButtonLoading = false, onCancel, onConfirm, cancelLabel, confirmLabel, confirmRightIcon, cancelLeftIcon, confirmVariant, onDelete, deleteLabel = "Delete", deleteButtonDisabled = false, deleteButtonLoading = false, deleteLeftIcon, modalStyles, fullScreen = false, footer, }) => {
+    const selectedVariant = modalVariants[modalVariant];
+    const iconContainer = {
+        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: "20px" } }));
+    return (_jsx(MantineModal, { opened: opened, onClose: onClose, centered: true, fullScreen: fullScreen, radius: "16px", overlayProps: {
+            opacity: 0,
+            blur: 4,
+        }, size: size, transitionProps: {
+            transition: "pop",
+            duration: 200,
+        }, closeButtonProps: {
+            style: {
+                borderRadius: "16px",
+                backgroundColor: neutral[50],
+                width: "18px",
+                height: "18px",
+            },
+        }, styles: {
+            ...modalStyles,
+            body: {
+                // Tighter side padding on fullScreen (mobile) — `xxl` (32px)
+                // eats ~17% of a 375px viewport and forces the form's 2-col
+                // grids to overflow the right edge.
+                padding: fullScreen
+                    ? `0 ${spacing.md} ${spacing.lg} ${spacing.md}`
+                    : `0 ${spacing.xxl} ${spacing.lg} ${spacing.xxl}`,
+                display: "flex",
+                flexDirection: "column",
+                flex: 1,
+                minHeight: 0,
+                overflow: "hidden",
+                ...modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.body,
+            },
+            close: {
+                borderRadius: "16px",
+                backgroundColor: neutral[50],
+                width: "18px",
+                height: "18px",
+                "&:hover": {
+                    backgroundColor: neutral[50],
+                },
+                "&:active": {
+                    transform: "none",
+                },
+                ...modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.close,
+            },
+            content: {
+                borderRadius: "8px",
+                border: `1px solid ${neutral[50]}`,
+                boxShadow: "0px 0px 19px 0px #00000040",
+                display: "flex",
+                flexDirection: "column",
+                ...modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.content,
+            },
+            header: {
+                padding: spacing.sm,
+                ...modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.header,
+            },
+        }, children: _jsxs(Stack, { gap: "20px", w: "100%", align: "stretch", style: { minWidth: 0, flex: 1, minHeight: 0 }, children: [_jsxs(Stack, { gap: spacing.sm, align: "center", w: "100%", style: { minWidth: 0, flexShrink: 0 }, children: [_jsx(Center, { mx: "auto", style: iconContainer, children: modalIcon }), title && (_jsx(Title, { variant: "cardHeader", align: "center", children: title })), subtitle && (_jsx(Title, { variant: "cardSubheader", align: "center", children: subtitle }))] }), children && (_jsx(Stack, { gap: spacing.lg, align: "stretch", w: "100%", style: {
+                        minWidth: 0,
+                        maxWidth: "100%",
+                        flex: 1,
+                        minHeight: 0,
+                        overflowY: "auto",
+                        overflowX: "hidden",
+                    }, children: children })), footer !== undefined ? (_jsx("div", { style: { flexShrink: 0, width: '100%' }, children: footer })) : (_jsx(Center, { w: "100%", style: { flexShrink: 0 }, children: _jsxs(Group, { gap: "10px", align: "center", children: [_jsx(Button, { onClick: onCancel, variant: "secondary", leftIcon: cancelLeftIcon, children: cancelLabel || selectedVariant.cancelLabel }), onDelete && (_jsx(Button, { onClick: onDelete, variant: "cancel", disabled: deleteButtonDisabled, loading: deleteButtonLoading, leftIcon: deleteLeftIcon, children: deleteLabel })), _jsx(Button, { onClick: onConfirm, variant: confirmVariant || selectedVariant.buttonVariant, disabled: confirmButtonDisabled, loading: confirmButtonLoading, rightIcon: confirmRightIcon, children: confirmLabel || selectedVariant.confirmLabel })] }) }))] }) }));
+};

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;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"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Modals/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,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,4CA2EtG,CAAC"}

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

@@ -2,11 +2,19 @@ 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 { useMobile } from '../../../../hooks/useMediaQuery';
 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 = '400px' }) => {
+    // On mobile the modal usually fills the viewport (consumers pass
+    // `width='100%'`), so the desktop body's 32px side padding eats real
+    // estate that grid pickers and 4-segment SegmentedControls need. Tighten
+    // to `spacing.md` (12px) on mobile so children get an extra ~40px of
+    // usable width without making desktop look cramped.
+    const isMobile = useMobile();
+    const bodyPaddingX = isMobile ? spacing.md : spacing.xxl;
     return (_jsx(MantineModal, { opened: opened, onClose: onClose, centered: true, radius: '16px', overlayProps: {
             opacity: 0,
             blur: 4,
@@ -38,7 +46,7 @@ export const Modal = ({ opened, onClose, icon, title, subtitle, children, width
                 },
             },
             body: {
-                padding: `0 ${spacing.xxl} ${spacing.lg} ${spacing.xxl}`,
+                padding: `0 ${bodyPaddingX} ${spacing.lg} ${bodyPaddingX}`,
             },
         }, 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/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"}