@taiv/ui 1.15.0 → 2.1.0

package/dist/components/Info/InfoCard/InfoCard.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Card } from '../../Layout/Card/Card';
-import { Center } from '../../Layout/Center/Center';
 import { colors } from '../../../constants/colors';
 import { spacing } from '../../../constants/spacing';
+import { Card } from '../../Layout/Card/Card';
+import { Center } from '../../Layout/Center/Center';
 export const InfoCard = ({ children, variant = 'primary', ...cardProps }) => {
     const colorPalette = colors[variant];
     const style = {
-        border: `1px solid ${colorPalette[200]}`,
         backgroundColor: colorPalette[25],
+        border: `1px solid ${colorPalette[200]}`,
         color: colorPalette[200] + ' !important',
-        padding: `${spacing.xxl} 64px`,
+        padding: spacing.xl,
     };
-    return (_jsx(Card, { shadow: "lg", style: style, sx: {
+    return (_jsx(Card, { shadow: 'lg', style: style, sx: {
             '& *': {
                 color: `${colorPalette[200]} !important`,
             },

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

@@ -0,0 +1,30 @@
+import { type DrawerProps as MantineDrawerProps } from '@mantine/core';
+import type React from 'react';
+export interface MobileDrawerProps extends Omit<MantineDrawerProps, 'position' | 'title' | 'children'> {
+    children: React.ReactNode;
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    footer?: React.ReactNode;
+    header?: React.ReactNode;
+    /** Show the grab-handle at the top edge. Default `true`. */
+    showGrabHandle?: boolean;
+    /**
+     * Max height as a viewport percentage (0–100). Default `75`. The sheet
+     * never exceeds this — the body scrolls once content overflows.
+     */
+    maxHeightVh?: number;
+    /**
+     * Pixel offset from the viewport bottom. Use when a fixed bottom bar
+     * (e.g. `BottomActionBar`) is rendered beneath the drawer — the sheet
+     * stacks on top of it instead of overlapping. Default `0`.
+     */
+    bottomOffset?: number;
+}
+/**
+ * Bottom-anchored mobile sheet with grab-handle, rounded top corners, and
+ * flex column layout (header → scrollable body → pinned footer).
+ * Pair with `Drawer` (right-anchored) or use `ResponsiveDrawer` to pick
+ * between them automatically.
+ */
+export declare const MobileDrawer: ({ children, title, subtitle, footer, header, showGrabHandle, maxHeightVh, bottomOffset, styles, ...props }: MobileDrawerProps) => React.JSX.Element;
+//# sourceMappingURL=MobileDrawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MobileDrawer.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/MobileDrawer/MobileDrawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,WAAW,IAAI,kBAAkB,EACvC,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;IACnE,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,4DAA4D;IAC5D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;GAKG;AACH,eAAO,MAAM,YAAY,GAAI,4GAW1B,iBAAiB,sBAgFnB,CAAC"}

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

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Drawer as MantineDrawer, } from '@mantine/core';
+import { neutral } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
+import { Title } from '../../Typography/Title/Title';
+/**
+ * Bottom-anchored mobile sheet with grab-handle, rounded top corners, and
+ * flex column layout (header → scrollable body → pinned footer).
+ * Pair with `Drawer` (right-anchored) or use `ResponsiveDrawer` to pick
+ * between them automatically.
+ */
+export const MobileDrawer = ({ children, title, subtitle, footer, header, showGrabHandle = true, maxHeightVh = 75, bottomOffset = 0, styles, ...props }) => {
+    const resolvedHeader = header !== null && header !== void 0 ? header : (title ? (_jsxs("div", { style: { padding: `${spacing.xs} ${spacing.md} ${spacing.md}` }, children: [_jsx(Title, { variant: 'cardHeader', children: title }), subtitle ? _jsx(Title, { variant: 'cardSubheader', children: subtitle }) : null] })) : null);
+    return (_jsxs(MantineDrawer, { overlayProps: { blur: 2, opacity: 0.3 }, position: 'bottom', size: `${maxHeightVh}vh`, styles: {
+            body: {
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100%',
+                padding: 0,
+            },
+            content: {
+                borderTopLeftRadius: '16px',
+                borderTopRightRadius: '16px',
+                bottom: bottomOffset || undefined,
+                display: 'flex',
+                flexDirection: 'column',
+                maxHeight: `${maxHeightVh}vh`,
+                overflow: 'hidden',
+            },
+            header: { display: 'none' },
+            ...styles,
+        }, withCloseButton: false, ...props, children: [showGrabHandle ? (_jsx("div", { style: {
+                    display: 'flex',
+                    flex: '0 0 auto',
+                    justifyContent: 'center',
+                    padding: `${spacing.sm} 0 ${spacing.xs}`,
+                }, children: _jsx("div", { style: {
+                        backgroundColor: neutral[100],
+                        borderRadius: '999px',
+                        height: 4,
+                        width: 40,
+                    } }) })) : null, resolvedHeader, _jsx("div", { style: {
+                    flex: '1 1 auto',
+                    minHeight: 0,
+                    overflowY: 'auto',
+                    padding: `0 ${spacing.md} ${spacing.md}`,
+                }, children: children }), footer ? (_jsx("div", { style: {
+                    borderTop: `1px solid ${neutral[50]}`,
+                    flex: '0 0 auto',
+                    padding: spacing.md,
+                }, children: footer })) : null] }));
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MobileDrawer.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/MobileDrawer/MobileDrawer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAM5D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAYnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA0BxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAiB1B,CAAC"}

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) => React.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,sBAwIhB,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) => React.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,sBAuLlB,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

@@ -8,6 +8,6 @@ interface ModalProps {
     children: React.ReactNode;
     width?: string | number;
 }
-export declare const Modal: ({ opened, onClose, icon, title, subtitle, children, width }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ opened, onClose, icon, title, subtitle, children, width }: ModalProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=Modal.d.ts.map

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,sBA2EtG,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/ModalProvider/ModalProvider.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 export declare const ModalProvider: ({ children }: {
     children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 //# sourceMappingURL=ModalProvider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ModalProvider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Modals/ModalProvider/ModalProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,aAAa,GAAI,cAAc;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4CAkBxE,CAAC"}
+{"version":3,"file":"ModalProvider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Modals/ModalProvider/ModalProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,aAAa,GAAI,cAAc;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,sBAkBxE,CAAC"}

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

@@ -16,6 +16,6 @@ interface StepperModalProps {
     confirmButtonLoading?: boolean;
     nextButtonDisabled?: boolean;
 }
-export declare const StepperModal: ({ opened, onClose, title, subtitle, width, stepLabels, children, onConfirm, cancelLabel, backLabel, nextLabel, confirmLabel, confirmButtonDisabled, confirmButtonLoading, nextButtonDisabled, }: StepperModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StepperModal: ({ opened, onClose, title, subtitle, width, stepLabels, children, onConfirm, cancelLabel, backLabel, nextLabel, confirmLabel, confirmButtonDisabled, confirmButtonLoading, nextButtonDisabled, }: StepperModalProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=StepperModal.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"StepperModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Modals/StepperModal/StepperModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,UAAU,iBAAiB;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAC5B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY,GAAI,iMAgB1B,iBAAiB,4CAkHnB,CAAC"}
+{"version":3,"file":"StepperModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/Info/Modals/StepperModal/StepperModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,UAAU,iBAAiB;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAC5B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY,GAAI,iMAgB1B,iBAAiB,sBAkHnB,CAAC"}