@graphprotocol/gds-react 0.0.1

package/dist/components/Modal.js

@@ -0,0 +1,8 @@
+import { ModalBody, ModalFooter, ModalHeader, ModalRoot, ModalStep } from "./Modal.parts.js";
+export const Modal = Object.assign(ModalRoot, {
+    Header: ModalHeader,
+    Body: ModalBody,
+    Footer: ModalFooter,
+    Step: ModalStep,
+});
+//# sourceMappingURL=Modal.js.map

package/dist/components/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,kBAAmB,CAAA;AAE7F,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE;IAC5C,MAAM,EAAE,WAAW;IACnB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,WAAW;IACnB,IAAI,EAAE,SAAS;CAChB,CAAC,CAAA"}

package/dist/components/Modal.meta.d.ts

@@ -0,0 +1,15 @@
+export declare const ModalMeta: import("@graphprotocol/gds-css").GDSComponent<{
+    /** @default 'dialog' */
+    readonly variant: {
+        readonly type: "values";
+        readonly values: ["dialog", "drawer"];
+        readonly defaultValue: "dialog";
+    };
+    /** @default 'medium' */
+    readonly size: {
+        readonly type: "values";
+        readonly values: ["small", "medium", "large"];
+        readonly defaultValue: "medium";
+    };
+}, boolean>;
+//# sourceMappingURL=Modal.meta.d.ts.map

package/dist/components/Modal.meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.meta.d.ts","sourceRoot":"","sources":["../../src/components/Modal.meta.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;IAElB,wBAAwB;;;;;;IAMxB,wBAAwB;;;;;;WAsC1B,CAAA"}

package/dist/components/Modal.meta.js

@@ -0,0 +1,49 @@
+import { createComponent } from '@graphprotocol/gds-css';
+export const ModalMeta = createComponent('Modal', {
+    cssProps: {
+        /** @default 'dialog' */
+        variant: {
+            type: 'values',
+            values: ['dialog', 'drawer'],
+            defaultValue: 'dialog',
+        },
+        /** @default 'medium' */
+        size: {
+            type: 'values',
+            values: ['small', 'medium', 'large'],
+            defaultValue: 'medium',
+        },
+    },
+    vars: {
+        margin: {},
+        'margin-x': {
+            '@variant @prop-variant-dialog/modal': 'var(--gds-var-margin, --spacing(4))',
+            '@variant @prop-variant-drawer/modal': 'var(--gds-var-margin, --spacing(0))',
+        },
+        'margin-y': {
+            '@variant @prop-variant-dialog/modal': 'var(--gds-var-margin, --spacing(4))',
+            '@variant @prop-variant-drawer/modal': 'var(--gds-var-margin, --spacing(12))',
+        },
+        padding: {},
+        'padding-x': {
+            '@variant @prop-size-small/modal': 'var(--gds-var-padding, --spacing(6))',
+            '@variant @prop-size-medium/modal': 'var(--gds-var-padding, --spacing(8))',
+            '@variant @prop-size-large/modal': 'var(--gds-var-padding, --spacing(8))',
+        },
+        'padding-y': {
+            '@variant @prop-size-small/modal': 'var(--gds-var-padding, --spacing(4))',
+            '@variant @prop-size-medium/modal': 'var(--gds-var-padding, --spacing(6))',
+            '@variant @prop-size-large/modal': 'var(--gds-var-padding, --spacing(6))',
+        },
+        radius: {},
+        'radius-top': {
+            '@variant @prop-variant-dialog/modal': 'var(--gds-var-radius, var(--radius-12))',
+            '@variant @prop-variant-drawer/modal': 'var(--gds-var-radius, var(--radius-16))',
+        },
+        'radius-bottom': {
+            '@variant @prop-variant-dialog/modal': 'var(--gds-var-radius, var(--radius-12))',
+            '@variant @prop-variant-drawer/modal': 'var(--gds-var-radius, var(--radius-none))',
+        },
+    },
+});
+//# sourceMappingURL=Modal.meta.js.map

package/dist/components/Modal.meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.meta.js","sourceRoot":"","sources":["../../src/components/Modal.meta.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAExD,MAAM,CAAC,MAAM,SAAS,GAAG,eAAe,CAAC,OAAO,EAAE;IAChD,QAAQ,EAAE;QACR,wBAAwB;QACxB,OAAO,EAAE;YACP,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;YAC5B,YAAY,EAAE,QAAQ;SACvB;QACD,wBAAwB;QACxB,IAAI,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;YACpC,YAAY,EAAE,QAAQ;SACvB;KACF;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,EAAE;QACV,UAAU,EAAE;YACV,qCAAqC,EAAE,qCAAqC;YAC5E,qCAAqC,EAAE,qCAAqC;SAC7E;QACD,UAAU,EAAE;YACV,qCAAqC,EAAE,qCAAqC;YAC5E,qCAAqC,EAAE,sCAAsC;SAC9E;QACD,OAAO,EAAE,EAAE;QACX,WAAW,EAAE;YACX,iCAAiC,EAAE,sCAAsC;YACzE,kCAAkC,EAAE,sCAAsC;YAC1E,iCAAiC,EAAE,sCAAsC;SAC1E;QACD,WAAW,EAAE;YACX,iCAAiC,EAAE,sCAAsC;YACzE,kCAAkC,EAAE,sCAAsC;YAC1E,iCAAiC,EAAE,sCAAsC;SAC1E;QACD,MAAM,EAAE,EAAE;QACV,YAAY,EAAE;YACZ,qCAAqC,EAAE,yCAAyC;YAChF,qCAAqC,EAAE,yCAAyC;SACjF;QACD,eAAe,EAAE;YACf,qCAAqC,EAAE,yCAAyC;YAChF,qCAAqC,EAAE,2CAA2C;SACnF;KACF;CACF,CAAC,CAAA"}

package/dist/components/Modal.parts.d.ts

@@ -0,0 +1,94 @@
+import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
+import type { GDSComponentProps } from '@graphprotocol/gds-css';
+import { ModalMeta } from './Modal.meta.ts';
+import { type StepperProps } from './Stepper.tsx';
+export interface ModalProps<Steps extends number | readonly string[] = readonly string[], Step extends Steps extends readonly string[] ? Steps[number] : number = Steps extends readonly string[] ? Steps[number] : number> extends Omit<ComponentProps<'div'>, 'children'>, GDSComponentProps<typeof ModalMeta> {
+    open?: boolean | undefined;
+    /** Defaults to `false` if `trigger` is provided, or `true` otherwise. */
+    defaultOpen?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /**
+     * Element that opens the modal when clicked, or function that returns such an element (where you
+     * can customize the actual trigger functionality; it doesn't necessarily have to be on click).
+     * The trigger element is rendered alongside the modal. This provides an alternative to the
+     * controlled API (the `open` and `onOpenChange` props) that doesn't require any state in the
+     * parent component.
+     */
+    trigger?: ReactElement | ((renderProps: Record<string, unknown>, state: {
+        open: boolean;
+        setOpen: (open: boolean) => void;
+        openModal: () => void;
+        currentStep: Step;
+        setCurrentStep: (step: Step) => void;
+    }) => ReactElement) | undefined;
+    /**
+     * Whether the user should be able to close the modal on their own, either by clicking outside of
+     * it, by pressing Escape, or by clicking the close button that gets rendered in `Modal.Header`
+     * when `dismissible` is `true` (though it can be replaced or removed altogether with the
+     * `buttonAfter` prop). Defaults to `true` if either `onOpenChange` or `trigger` is provided, or
+     * `false` otherwise.
+     */
+    dismissible?: boolean | undefined;
+    /**
+     * One of `dialog` or `alertdialog`. Defaults to `dialog` if `dismissible` is `true`, or
+     * `alertdialog` if it's `false`.
+     */
+    role?: 'dialog' | 'alertdialog' | undefined;
+    steps?: Steps | undefined;
+    currentStep?: Step | undefined;
+    onCurrentStepChange?: ((step: Step) => void) | undefined;
+    children?: ReactNode | ((renderProps: {
+        open: boolean;
+        setOpen: (open: boolean) => void;
+        closeModal: () => void;
+        currentStep: Step;
+        setCurrentStep: (step: Step) => void;
+    }) => ReactNode) | undefined;
+}
+export declare const ModalRoot: {
+    <Steps extends number | readonly string[], Step extends Steps extends readonly string[] ? Steps[number] : number>({ ref: passedRef, variant, size, open: controlledOpen, defaultOpen, onOpenChange, trigger, dismissible: passedDismissible, role, steps: passedSteps, currentStep: controlledCurrentStep, onCurrentStepChange, className, style, children, ...props }: ModalProps<Steps, Step>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface ModalHeaderProps extends Omit<ComponentProps<'div'>, 'title' | 'children'> {
+    title: ReactNode;
+    /** Defaults to a back button if there is a previous step, or `null` otherwise. */
+    buttonBefore?: ReactNode | undefined;
+    /** Defaults to a close button if the modal is `dismissible`, or `null` otherwise. */
+    buttonAfter?: ReactNode | undefined;
+    /**
+     * Props to pass to the `Stepper` component, or `null` to render a `Divider` instead. Defaults to
+     * match the `steps` and `currentStep` props of the parent `Modal` (except if there is only one
+     * step or if the `currentStep` is not among the `steps`, in which case a divider is rendered
+     * instead of the stepper).
+     */
+    stepper?: {
+        count: NonNullable<StepperProps['count']>;
+        currentIndex: StepperProps['currentIndex'];
+    } | null | undefined;
+}
+export declare const ModalHeader: {
+    ({ title, buttonBefore: passedButtonBefore, buttonAfter: passedButtonAfter, stepper: passedStepper, className, ...props }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface ModalBodyProps extends ComponentProps<'div'> {
+}
+export declare const ModalBody: {
+    ({ className, children, ...props }: ModalBodyProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface ModalFooterProps extends ComponentProps<'div'> {
+    primaryButton?: ReactNode | undefined;
+    secondaryButton?: ReactNode | undefined;
+}
+export declare const ModalFooter: {
+    ({ primaryButton, secondaryButton, className, children, ...props }: ModalFooterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface ModalStepProps {
+    children: ReactNode;
+}
+export declare const ModalStep: {
+    ({ children }: ModalStepProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+//# sourceMappingURL=Modal.parts.d.ts.map

package/dist/components/Modal.parts.d.ts.map

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

package/dist/components/Modal.parts.js

@@ -0,0 +1,249 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext, useLayoutEffect, useRef, useState, } from 'react';
+import { Dialog } from '@base-ui-components/react/dialog';
+import { ArrowLeftIcon, XIcon } from '@graphprotocol/gds-react/icons';
+import { useControlled, useCSSPropsPolyfill, useGDS } from "../hooks/index.js";
+import { cn, getCSSPropsAttributes } from "../utils/index.js";
+import { Portal } from "./base/Portal.js";
+import { Transition } from "./base/Transition.js";
+import { Button } from "./Button.js";
+import { ButtonGroup } from "./ButtonGroup.js";
+import { Divider } from "./Divider.js";
+import { ModalMeta } from "./Modal.meta.js";
+import { Stepper } from "./Stepper.js";
+const ModalContext = createContext(null);
+export const ModalRoot = ({ ref: passedRef, variant, size, open: controlledOpen, defaultOpen, onOpenChange, trigger, dismissible: passedDismissible, role, steps: passedSteps = 1, currentStep: controlledCurrentStep, onCurrentStepChange, className, style, children, ...props }) => {
+    const { dirProps } = useGDS();
+    const [cssPropsPolyfillRef, cssPropsPolyfillAttributes] = useCSSPropsPolyfill(ModalMeta, {
+        variant,
+        size,
+    });
+    const [open, setOpen] = useControlled(controlledOpen, defaultOpen ?? !trigger, onOpenChange);
+    // TODO: Allow swiping down to close when `variant` is `drawer` and `dismissible` is `true`
+    const dismissible = passedDismissible ?? Boolean(onOpenChange || trigger);
+    const steps = (typeof passedSteps === 'number'
+        ? Array.from({ length: Math.max(1, passedSteps) }, (_, i) => i)
+        : passedSteps.length === 0
+            ? [0]
+            : passedSteps);
+    const [currentStep, setCurrentStep] = useControlled(controlledCurrentStep, steps[0], onCurrentStepChange);
+    let currentStepIndex = steps.indexOf(currentStep);
+    currentStepIndex = currentStepIndex === -1 ? null : currentStepIndex;
+    const previousStepIndex = useRef(currentStepIndex);
+    const currentStepDirection = useRef('left');
+    if (currentStepIndex !== previousStepIndex.current) {
+        currentStepDirection.current =
+            (currentStepIndex ?? steps.length) > (previousStepIndex.current ?? steps.length)
+                ? 'left'
+                : 'right';
+        previousStepIndex.current = currentStepIndex;
+    }
+    const defaultVariantClasses = cn(`
+    u:default-size-medium
+    u:default-variant-drawer
+    u:max-2xs:prop-size-small
+    u:xs:default-variant-dialog
+  `);
+    const cssPropsAttributes = getCSSPropsAttributes(ModalMeta, { variant, size }, style);
+    const triggerIsFunction = typeof trigger === 'function';
+    return (_jsx(ModalContext.Provider, { value: {
+            open,
+            setOpen,
+            dismissible,
+            steps,
+            currentStep,
+            setCurrentStep: (step) => {
+                if (typeof step === 'number' && steps[step]) {
+                    setCurrentStep(steps[step]);
+                }
+                else if (steps.includes(step)) {
+                    setCurrentStep(step);
+                }
+            },
+            currentStepIndex,
+            currentStepDirection: currentStepDirection.current,
+        }, children: _jsxs(Dialog.Root, { open: open, onOpenChange: (newOpen) => {
+                if (!newOpen && !dismissible)
+                    return;
+                setOpen(newOpen);
+            }, disablePointerDismissal: !dismissible, children: [trigger ? (_jsx(Dialog.Trigger, { nativeButton: !triggerIsFunction, render: triggerIsFunction
+                        ? (renderProps) => {
+                            // Don't pass event handlers and other potentially too specific props (e.g. `type`)
+                            const filteredRenderProps = Object.fromEntries(Object.entries(renderProps).filter(([prop]) => prop === 'ref' ||
+                                prop === 'id' ||
+                                prop.startsWith('aria-') ||
+                                prop.startsWith('data-')));
+                            return trigger(filteredRenderProps, {
+                                open,
+                                setOpen,
+                                openModal: () => setOpen(true),
+                                currentStep,
+                                setCurrentStep,
+                            });
+                        }
+                        : // oxlint-disable-next-line no-explicit-any
+                            trigger })) : null, _jsx(Portal, { children: _jsx("div", { ref: cssPropsPolyfillRef, className: cn('gds-modal i:invisible', defaultVariantClasses, className), ...cssPropsAttributes, ...cssPropsPolyfillAttributes, ...props }) }), _jsx(Dialog.Portal, { children: _jsxs("div", { ref: passedRef, 
+                        /**
+                         * Establishing the root element as a size query container so that consumers can use
+                         * `w-*` and `h-*` utilities on it to set the size of the nested `Dialog.Popup`, thanks
+                         * to `cqi` & `cqb` units as well as some (probably too clever) math tricks. For
+                         * instance, if a width is set on the root, `max(100cqi,100vw-100cqi*9999)` (used to
+                         * calculate the popup's `max-width`) returns that width (100cqi, since it's guaranteed
+                         * to be larger than 100vw minus 9999 times that value), but if no width is set on the
+                         * root, then it returns 100vw because 100cqi, even 9999 times, is 0.
+                         */
+                        className: cn(`gds-modal @container-[size] pointer-events-none absolute top-0 left-0 u:text-16 u:text-muted i:invisible i:*:visible`, defaultVariantClasses, className), ...cssPropsAttributes, ...cssPropsPolyfillAttributes, ...dirProps, ...props, children: [_jsx(Dialog.Backdrop, { className: `
+                fixed inset-0 bg-backdrop transition
+                data-ending-style:opacity-0
+                data-open:pointer-events-previous
+                data-starting-style:opacity-0
+                @prop-variant-dialog/modal:duration-200
+                @prop-variant-drawer/modal:duration-400
+              ` }), _jsx(Dialog.Popup, { role: role ?? (dismissible ? 'dialog' : 'alertdialog'), className: `
+                fixed inset-0 m-auto h-max
+                max-h-[min(max(100cqb,100vh-100cqb*9999),var(--strict-max-height))]
+                min-h-[min(100cqb,var(--strict-max-height))]
+                max-w-[min(max(100cqi,100vw-100cqi*9999),var(--strict-max-width))]
+                min-w-[min(100cqi,var(--strict-max-width))]
+                origin-bottom rounded-t-(--gds-modal-radius-top) rounded-b-(--gds-modal-radius-bottom)
+                border border-muted bg-muted outline-0 transition
+                [--strict-max-height:max(100vh-2*var(--gds-modal-margin-y))]
+                [--strict-max-width:calc(100vw-2*var(--gds-modal-margin-x))]
+                data-open:pointer-events-previous
+                @prop-variant-dialog/modal:duration-200
+                @prop-variant-dialog/modal:data-ending-style:scale-[97%]
+                @prop-variant-dialog/modal:data-ending-style:opacity-0
+                @prop-variant-dialog/modal:data-starting-style:scale-[97%]
+                @prop-variant-dialog/modal:data-starting-style:opacity-0
+                @prop-variant-drawer/modal:mb-0
+                @prop-variant-drawer/modal:border-b-0
+                @prop-variant-drawer/modal:duration-400
+                @prop-variant-drawer/modal:[--strict-max-height:max(100vh-var(--gds-modal-margin-y))]
+                @prop-variant-drawer/modal:data-ending-style:translate-y-full
+                @prop-variant-drawer/modal:data-starting-style:translate-y-full
+                @prop-size-small/modal:w-80
+                @prop-size-medium/modal:w-130
+                @prop-size-large/modal:w-160
+                i:@prop-variant-drawer/modal:max-xs:w-full
+              `, children: _jsx("div", { className: `
+                  max-h-[inherit] min-h-[inherit] overflow-x-clip overflow-y-auto gradient-mask-y px-(--gds-modal-padding-x) py-(--gds-modal-padding-y)
+                  has-nested/modal-slot:flex
+                  has-nested/modal-slot:flex-col
+                  has-nested/modal-slot:overflow-y-clip
+                  has-nested/modal-slot:p-0
+                `, children: typeof children === 'function'
+                                        ? children({
+                                            open,
+                                            setOpen,
+                                            closeModal: () => setOpen(false),
+                                            currentStep,
+                                            setCurrentStep,
+                                        })
+                                        : children }) })] }) })] }) }));
+};
+ModalRoot.displayName = 'Modal';
+export const ModalHeader = ({ title, buttonBefore: passedButtonBefore, buttonAfter: passedButtonAfter, stepper: passedStepper, className, ...props }) => {
+    const modalContext = useContext(ModalContext);
+    const stepCount = modalContext?.steps.length ?? 0;
+    const currentStep = modalContext?.currentStep ?? 0;
+    const currentStepIndex = modalContext?.currentStepIndex ?? null;
+    const currentStepDirection = modalContext?.currentStepDirection ?? 'left';
+    const stepper = passedStepper !== undefined
+        ? passedStepper && passedStepper.count >= 1
+            ? passedStepper
+            : null
+        : stepCount > 1 && currentStepIndex !== null
+            ? { count: stepCount, currentIndex: currentStepIndex }
+            : null;
+    const buttonTransitionClasses = cn(`
+    min-w-5 shrink-0
+    **:button:default-variant-naked
+    style-nested/transition-content:items-center
+    style-nested/transition-content:justify-center
+    @prop-size-small/modal:**:button:default-size-small
+    @prop-size-medium/modal:**:button:default-size-medium
+    @prop-size-large/modal:**:button:default-size-medium
+  `);
+    const buttonBefore = passedButtonBefore !== undefined ? (passedButtonBefore) : modalContext && currentStepIndex !== null && currentStepIndex > 0 ? (_jsx(Button, { onClick: () => modalContext.setCurrentStep(currentStepIndex - 1), children: _jsx(ArrowLeftIcon, { alt: "Back" }) })) : null;
+    const buttonAfter = passedButtonAfter !== undefined ? (passedButtonAfter) : modalContext && modalContext.dismissible ? (_jsx(Dialog.Close, { render: _jsx(Button, { tooltip: null, children: _jsx(XIcon, { alt: "Close" }) }) })) : null;
+    return (_jsxs("div", { className: cn('nested/modal-slot shrink-0', className), ...props, children: [_jsxs("div", { className: `
+          flex items-center gap-4
+          @prop-size-small/modal:h-12
+          @prop-size-small/modal:px-4
+          @prop-size-medium/modal:h-16
+          @prop-size-medium/modal:px-6
+          @prop-size-large/modal:h-16
+          @prop-size-large/modal:px-6
+        `, children: [_jsx(Transition, { layout: "flex-col", mode: "exit-enter", animateSize: false, className: buttonTransitionClasses, children: buttonBefore }), _jsx(Dialog.Title, { className: `
+            flex-1 text-center font-medium text-default
+            @prop-size-small/modal:text-14
+            @prop-size-medium/modal:text-16
+            @prop-size-large/modal:text-16
+          `, children: _jsx(Transition, { "data-direction": currentStepDirection, className: `
+              data-[direction=left]:var-[enter-translate-x=32px]
+              data-[direction=left]:var-[exit-translate-x=-32px]
+              data-[direction=right]:var-[enter-translate-x=-32px]
+              data-[direction=right]:var-[exit-translate-x=32px]
+              style-nested/transition-content:truncate
+            `, children: _jsx("span", { children: title ? title : _jsx(_Fragment, { children: "\u00A0" }) }, currentStep) }) }), _jsx(Transition, { layout: "flex-col", mode: "exit-enter", animateSize: false, className: buttonTransitionClasses, children: buttonAfter })] }), _jsx(Transition, { children: stepper ? _jsx(Stepper, { ...stepper, className: "-mt-px" }) : _jsx(Divider, { variant: "muted" }) })] }));
+};
+ModalHeader.displayName = 'Modal.Header';
+export const ModalBody = ({ className, children, ...props }) => {
+    const modalContext = useContext(ModalContext);
+    const currentStep = modalContext?.currentStep ?? 0;
+    return (_jsx("div", { className: cn('nested/modal-slot root-flex grow flex-col', className), ...props, children: _jsx(Transition, { layout: "flex-col", mode: "exit-enter", animateSize: "clip", children: _jsx("div", { className: "max-h-full overflow-x-clip overflow-y-auto gradient-mask-y", children: _jsx("div", { className: "px-(--gds-modal-padding-x) py-(--gds-modal-padding-y)", children: children }) }, currentStep) }) }));
+};
+ModalBody.displayName = 'Modal.Body';
+export const ModalFooter = ({ primaryButton, secondaryButton, className, children, ...props }) => {
+    const modalContext = useContext(ModalContext);
+    const currentStep = modalContext?.currentStep ?? 0;
+    const isEmpty = !children && !primaryButton && !secondaryButton;
+    return (_jsxs("div", { className: cn('nested/modal-slot shrink-0', className), ...props, children: [_jsx(Transition, { children: !isEmpty ? _jsx(Divider, { variant: "muted" }) : null }), _jsx(Transition, { mode: "exit-enter", children: !isEmpty ? (_jsxs("div", { className: "flex flex-col gap-4 px-(--gds-modal-padding-x) py-(--gds-modal-padding-y)", children: [children ? _jsx("div", { className: "text-14 text-muted", children: children }) : null, primaryButton || secondaryButton ? (_jsxs(ButtonGroup, { fullWidth: true, "data-has-primary-button": Boolean(primaryButton) || undefined, "data-has-secondary-button": Boolean(secondaryButton) || undefined, className: `
+                  data-has-primary-button:**:button:last:default-variant-primary
+                  data-has-secondary-button:**:button:default-variant-tertiary
+                  @prop-size-small/modal:prop-size-small
+                  @prop-size-medium/modal:prop-size-medium
+                  @prop-size-large/modal:prop-size-medium
+                `, children: [secondaryButton, primaryButton] })) : null] }, currentStep)) : null })] }));
+};
+ModalFooter.displayName = 'Modal.Footer';
+const ModalStepContext = createContext(null);
+export const ModalStep = ({ children }) => {
+    const stepContext = useContext(ModalStepContext);
+    const isConsumer = stepContext !== null;
+    const version = useRef(0);
+    const content = useRef(null);
+    const [, setForceRerender] = useState({});
+    /**
+     * If we're in a consumer and the provider's version is the same as it was after the previous
+     * render, we know the current render was not triggered by the provider (since the provider always
+     * increases its version when it renders), which means it's safe to re-render the provider, and
+     * necessary for the updated content to be displayed.
+     */
+    useLayoutEffect(() => {
+        if (isConsumer) {
+            if (version.current === stepContext.version) {
+                stepContext.forceRerender();
+            }
+            else {
+                version.current = stepContext.version;
+            }
+        }
+    });
+    if (isConsumer) {
+        stepContext.setContent(children);
+        return null;
+    }
+    else {
+        version.current++;
+        const setContent = (updatedContent) => {
+            content.current = updatedContent;
+        };
+        const forceRerender = () => setForceRerender({});
+        return (_jsxs(_Fragment, { children: [_jsx(ModalStepContext.Provider, { value: { version: version.current, setContent, forceRerender }, children: children }), _jsx(StableElement, { render: () => content.current })] }));
+    }
+};
+ModalStep.displayName = 'Modal.Step';
+const StableElement = ({ render }) => render();
+//# sourceMappingURL=Modal.parts.js.map

package/dist/components/Modal.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.parts.js","sourceRoot":"","sources":["../../src/components/Modal.parts.tsx"],"names":[],"mappings":"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"}

package/dist/components/OTCInput.d.ts

@@ -0,0 +1,16 @@
+import { type InputProps } from './Input.tsx';
+export interface OTCInputProps extends Omit<InputProps, 'action' | 'maxLength' | 'onInput' | 'render' | 'type' | 'unit'> {
+    /** @default 'number' */
+    type?: 'text' | 'number' | undefined;
+    /** @default 6 */
+    length?: number | undefined;
+    /** @default 'one-time-code' */
+    autoComplete?: InputProps['autoComplete'] | undefined;
+    /**
+     * Return `true` or the passed string (potentially transformed, e.g. uppercased) if valid, or
+     * anything falsy if not.
+     */
+    onInput?: (characterOrPastedString: string, atIndex: number) => string | boolean | void;
+}
+export declare function OTCInput({ ref: passedRef, type, length: passedLength, value: controlledValue, defaultValue, onChange, onInput, autoComplete, className, ...props }: OTCInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OTCInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OTCInput.d.ts","sourceRoot":"","sources":["../../src/components/OTCInput.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,aAAa,CAAA;AAKpD,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,UAAU,EACV,QAAQ,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAChE;IACC,wBAAwB;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAA;IACpC,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B,+BAA+B;IAC/B,YAAY,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,GAAG,SAAS,CAAA;IACrD;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,uBAAuB,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,MAAM,GAAG,OAAO,GAAG,IAAI,CAAA;CACxF;AAED,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EAAE,SAAS,EACd,IAAe,EACf,MAAM,EAAE,YAAgB,EACxB,KAAK,EAAE,eAAe,EACtB,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,YAA8B,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,aAAa,2CAqPf"}