@jobber/components 5.7.6 → 5.7.7-feat-side-.15

package/dist/ProgressBar/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var ProgressBar = require('../ProgressBar-Cvp3QNiD.js');
+var ProgressBar = require('../ProgressBar-gNW99_pk.js');
 require('react');
 require('classnames');
 

package/dist/ProgressBar/index.mjs

@@ -1,3 +1,3 @@
-export { P as ProgressBar } from '../ProgressBar-DI6_Ecsv.js';
+export { P as ProgressBar } from '../ProgressBar-C3CW1aXY.js';
 import 'react';
 import 'classnames';

package/dist/RadioGroup/index.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
-var RadioGroup = require('../RadioGroup-DVh8IOnB.js');
+var RadioGroup = require('../RadioGroup-BiWYIE41.js');
 require('react');
-require('../Text-BQHl46Qm.js');
-require('../Typography-B1UDv28q.js');
+require('../Text-BLQLaOaa.js');
+require('../Typography-D1eaCiF-.js');
 require('classnames');
 
 

package/dist/RadioGroup/index.mjs

@@ -1,5 +1,5 @@
-export { R as RadioGroup, a as RadioOption } from '../RadioGroup-kA28neDk.js';
+export { R as RadioGroup, a as RadioOption } from '../RadioGroup-CziRPDhS.js';
 import 'react';
-import '../Text-CED0V39t.js';
-import '../Typography-BD9oXpRn.js';
+import '../Text-CNRipkZM.js';
+import '../Typography-DHg6m-aH.js';
 import 'classnames';

package/dist/{RadioGroup-DVh8IOnB.js → RadioGroup-BiWYIE41.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var Text = require('./Text-BQHl46Qm.js');
+var Text = require('./Text-BLQLaOaa.js');
 
 var styles = {"radioGroup":"_5P8wEHDUdKY-","input":"_08ZPdlE98Ko-","label":"-PUoLXltVlQ-","description":"_8r6qT-6S9EI-","children":"C5SzbO1epLk-"};
 

package/dist/{RadioGroup-kA28neDk.js → RadioGroup-CziRPDhS.js}

@@ -1,5 +1,5 @@
 import React, { useId } from 'react';
-import { T as Text } from './Text-CED0V39t.js';
+import { T as Text } from './Text-CNRipkZM.js';
 
 var styles = {"radioGroup":"_5P8wEHDUdKY-","input":"_08ZPdlE98Ko-","label":"-PUoLXltVlQ-","description":"_8r6qT-6S9EI-","children":"C5SzbO1epLk-"};
 

package/dist/RecurringSelect/components/index.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
-var DayOfMonthSelect = require('../../DayOfMonthSelect-RchwkvUW.js');
+var DayOfMonthSelect = require('../../DayOfMonthSelect-_P_SCwTU.js');
 require('react');
-require('../../RadioGroup-DVh8IOnB.js');
-require('../../Text-BQHl46Qm.js');
-require('../../Typography-B1UDv28q.js');
+require('../../RadioGroup-BiWYIE41.js');
+require('../../Text-BLQLaOaa.js');
+require('../../Typography-D1eaCiF-.js');
 require('classnames');
 
 

package/dist/RecurringSelect/components/index.mjs

@@ -1,6 +1,6 @@
-export { c as DayOfMonthSelect, b as MonthlyDayOfWeekSelect, M as MonthlySelect, a as WeeklySelect } from '../../DayOfMonthSelect-DlaWa-vM.js';
+export { c as DayOfMonthSelect, b as MonthlyDayOfWeekSelect, M as MonthlySelect, a as WeeklySelect } from '../../DayOfMonthSelect-B1_CcFcC.js';
 import 'react';
-import '../../RadioGroup-kA28neDk.js';
-import '../../Text-CED0V39t.js';
-import '../../Typography-BD9oXpRn.js';
+import '../../RadioGroup-CziRPDhS.js';
+import '../../Text-CNRipkZM.js';
+import '../../Typography-DHg6m-aH.js';
 import 'classnames';

package/dist/RecurringSelect/index.cjs

@@ -1,27 +1,27 @@
 'use strict';
 
-var RecurringSelect = require('../RecurringSelect-C8c6_kiI.js');
-var DayOfMonthSelect = require('../DayOfMonthSelect-RchwkvUW.js');
+var RecurringSelect = require('../RecurringSelect-D55hinny.js');
+var DayOfMonthSelect = require('../DayOfMonthSelect-_P_SCwTU.js');
 require('react');
-require('../Text-BQHl46Qm.js');
-require('../Typography-B1UDv28q.js');
+require('../Text-BLQLaOaa.js');
+require('../Typography-D1eaCiF-.js');
 require('classnames');
-require('../Option-BZGIPUQ7.js');
-require('../FormField-BZzco-t1.js');
-require('../tslib.es6-g0DIcWul.js');
+require('../Option-B71G9OFy.js');
+require('../FormField-9fPwEfis.js');
+require('../tslib.es6-We9iV6db.js');
 require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
-require('../Button-CYx9-OJP.js');
+require('../Button-DzDt6ZED.js');
 require('react-router-dom');
-require('../Icon-C0aauj0K.js');
-require('../useFormFieldFocus-cO417vcJ.js');
-require('../InputValidation-CA8VgOyj.js');
-require('../Spinner-DT_qu93D.js');
-require('../InputNumber-B5mbB9TZ.js');
-require('../InputGroup-v6rLV-7A.js');
-require('../Content-B0bJ0vsB.js');
-require('../RadioGroup-DVh8IOnB.js');
+require('../Icon-pGnI_lpv.js');
+require('../useFormFieldFocus-cJYO0yvS.js');
+require('../InputValidation-BhZ16oOM.js');
+require('../Spinner-ERVa9p3R.js');
+require('../InputNumber-VAvlLTkm.js');
+require('../InputGroup-C5J1s9Wx.js');
+require('../Content-DEnWTwK2.js');
+require('../RadioGroup-BiWYIE41.js');
 
 
 

package/dist/RecurringSelect/index.mjs

@@ -1,22 +1,22 @@
-export { R as RecurringSelect } from '../RecurringSelect-NM9ZaHKw.js';
-export { D as DurationPeriod, W as WeekDay } from '../DayOfMonthSelect-DlaWa-vM.js';
+export { R as RecurringSelect } from '../RecurringSelect-BUPOJcO-.js';
+export { D as DurationPeriod, W as WeekDay } from '../DayOfMonthSelect-B1_CcFcC.js';
 import 'react';
-import '../Text-CED0V39t.js';
-import '../Typography-BD9oXpRn.js';
+import '../Text-CNRipkZM.js';
+import '../Typography-DHg6m-aH.js';
 import 'classnames';
-import '../Option-BoettZ9N.js';
-import '../FormField-CYLXcZzd.js';
-import '../tslib.es6-DXesPK42.js';
+import '../Option-CsZqkmaN.js';
+import '../FormField-5unRgkup.js';
+import '../tslib.es6-CdSOyxlK.js';
 import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
-import '../Button-DjNl8YkW.js';
+import '../Button-DjLnt080.js';
 import 'react-router-dom';
-import '../Icon-CzQmiBXN.js';
-import '../useFormFieldFocus-QLvPPKiY.js';
-import '../InputValidation-DwywpS4E.js';
-import '../Spinner-B3eiNzal.js';
-import '../InputNumber-DeSUijZp.js';
-import '../InputGroup-COX9v1AS.js';
-import '../Content-Cli33s5m.js';
-import '../RadioGroup-kA28neDk.js';
+import '../Icon-DOiE4RnD.js';
+import '../useFormFieldFocus-_ZMEcWhL.js';
+import '../InputValidation-Bt69Kl3I.js';
+import '../Spinner-CDea5o9l.js';
+import '../InputNumber-C8lHZGoy.js';
+import '../InputGroup-DU2yKkgZ.js';
+import '../Content-BtHNO3yE.js';
+import '../RadioGroup-CziRPDhS.js';

package/dist/{RecurringSelect-NM9ZaHKw.js → RecurringSelect-BUPOJcO-.js}

@@ -1,11 +1,11 @@
 import React from 'react';
-import { D as DurationPeriod, c as DayOfMonthSelect, b as MonthlyDayOfWeekSelect, a as WeeklySelect, i as isMonthly, M as MonthlySelect, t as typeInitialStateMap } from './DayOfMonthSelect-DlaWa-vM.js';
-import { T as Text } from './Text-CED0V39t.js';
+import { D as DurationPeriod, c as DayOfMonthSelect, b as MonthlyDayOfWeekSelect, a as WeeklySelect, i as isMonthly, M as MonthlySelect, t as typeInitialStateMap } from './DayOfMonthSelect-B1_CcFcC.js';
+import { T as Text } from './Text-CNRipkZM.js';
 import 'classnames';
-import { S as Select, a as SelectOption } from './Option-BoettZ9N.js';
-import { I as InputNumber } from './InputNumber-DeSUijZp.js';
-import { I as InputGroup } from './InputGroup-COX9v1AS.js';
-import { C as Content } from './Content-Cli33s5m.js';
+import { S as Select, a as SelectOption } from './Option-CsZqkmaN.js';
+import { I as InputNumber } from './InputNumber-C8lHZGoy.js';
+import { I as InputGroup } from './InputGroup-DU2yKkgZ.js';
+import { C as Content } from './Content-BtHNO3yE.js';
 
 function CurrentRecurrenceComponent({ recurrenceRule, disabled = false, onChange, }) {
     switch (recurrenceRule.type) {

package/dist/{RecurringSelect-C8c6_kiI.js → RecurringSelect-D55hinny.js}

@@ -1,13 +1,13 @@
 'use strict';
 
 var React = require('react');
-var DayOfMonthSelect = require('./DayOfMonthSelect-RchwkvUW.js');
-var Text = require('./Text-BQHl46Qm.js');
+var DayOfMonthSelect = require('./DayOfMonthSelect-_P_SCwTU.js');
+var Text = require('./Text-BLQLaOaa.js');
 require('classnames');
-var Option = require('./Option-BZGIPUQ7.js');
-var InputNumber = require('./InputNumber-B5mbB9TZ.js');
-var InputGroup = require('./InputGroup-v6rLV-7A.js');
-var Content = require('./Content-B0bJ0vsB.js');
+var Option = require('./Option-B71G9OFy.js');
+var InputNumber = require('./InputNumber-VAvlLTkm.js');
+var InputGroup = require('./InputGroup-C5J1s9Wx.js');
+var Content = require('./Content-DEnWTwK2.js');
 
 function CurrentRecurrenceComponent({ recurrenceRule, disabled = false, onChange, }) {
     switch (recurrenceRule.type) {

package/dist/Select/index.cjs

@@ -1,21 +1,21 @@
 'use strict';
 
-var Option = require('../Option-BZGIPUQ7.js');
+var Option = require('../Option-B71G9OFy.js');
 require('react');
-require('../FormField-BZzco-t1.js');
-require('../tslib.es6-g0DIcWul.js');
+require('../FormField-9fPwEfis.js');
+require('../tslib.es6-We9iV6db.js');
 require('react-hook-form');
 require('classnames');
 require('framer-motion');
 require('@jobber/design');
-require('../Button-CYx9-OJP.js');
+require('../Button-DzDt6ZED.js');
 require('react-router-dom');
-require('../Icon-C0aauj0K.js');
-require('../Typography-B1UDv28q.js');
-require('../Text-BQHl46Qm.js');
-require('../useFormFieldFocus-cO417vcJ.js');
-require('../InputValidation-CA8VgOyj.js');
-require('../Spinner-DT_qu93D.js');
+require('../Icon-pGnI_lpv.js');
+require('../Typography-D1eaCiF-.js');
+require('../Text-BLQLaOaa.js');
+require('../useFormFieldFocus-cJYO0yvS.js');
+require('../InputValidation-BhZ16oOM.js');
+require('../Spinner-ERVa9p3R.js');
 
 
 

package/dist/Select/index.mjs

@@ -1,16 +1,16 @@
-export { a as Option, S as Select } from '../Option-BoettZ9N.js';
+export { a as Option, S as Select } from '../Option-CsZqkmaN.js';
 import 'react';
-import '../FormField-CYLXcZzd.js';
-import '../tslib.es6-DXesPK42.js';
+import '../FormField-5unRgkup.js';
+import '../tslib.es6-CdSOyxlK.js';
 import 'react-hook-form';
 import 'classnames';
 import 'framer-motion';
 import '@jobber/design';
-import '../Button-DjNl8YkW.js';
+import '../Button-DjLnt080.js';
 import 'react-router-dom';
-import '../Icon-CzQmiBXN.js';
-import '../Typography-BD9oXpRn.js';
-import '../Text-CED0V39t.js';
-import '../useFormFieldFocus-QLvPPKiY.js';
-import '../InputValidation-DwywpS4E.js';
-import '../Spinner-B3eiNzal.js';
+import '../Icon-DOiE4RnD.js';
+import '../Typography-DHg6m-aH.js';
+import '../Text-CNRipkZM.js';
+import '../useFormFieldFocus-_ZMEcWhL.js';
+import '../InputValidation-Bt69Kl3I.js';
+import '../Spinner-CDea5o9l.js';

package/dist/SideDrawer/SideDrawer.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import type { PropsWithChildren } from "react";
+import { SideDrawerActions } from "./SideDrawerActions";
+import { SideDrawerTitle } from "./SideDrawerTitle";
+import { SideDrawerToolbar } from "./SideDrawerToolbar";
+import { SideDrawerBackButton } from "./SideDrawerBackButton";
+interface SideDrawerProps extends PropsWithChildren {
+    /**
+     * Whether or not the drawer is open.
+     */
+    readonly open: boolean;
+    /**
+     * Callback function to close the drawer.
+     */
+    readonly onRequestClose: () => void;
+    /**
+     * Change the appearance of the drawer.
+     */
+    readonly variation?: "base" | "subtle";
+}
+export declare function SideDrawer({ children, onRequestClose, open, variation, }: SideDrawerProps): React.ReactPortal | null;
+export declare namespace SideDrawer {
+    var Title: typeof SideDrawerTitle;
+    var Toolbar: typeof SideDrawerToolbar;
+    var Actions: typeof SideDrawerActions;
+    var BackButton: typeof SideDrawerBackButton;
+}
+export {};

package/dist/SideDrawer/SideDrawerActions.d.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from "react";
+import React from "react";
+export declare function SideDrawerActions({ children }: PropsWithChildren): React.ReactPortal | null;

package/dist/SideDrawer/SideDrawerBackButton.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ButtonProps } from "../Button";
+export declare function SideDrawerBackButton({ onClick, }: Pick<ButtonProps, "onClick">): React.ReactPortal | null;

package/dist/SideDrawer/SideDrawerContext.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface SideDrawerContextValue {
+    readonly actionPortal?: HTMLElement | null;
+    readonly titlePortal?: HTMLElement | null;
+    readonly toolbarPortal?: HTMLElement | null;
+    readonly backPortal?: HTMLElement | null;
+}
+declare const SideDrawerContext: import("react").Context<SideDrawerContextValue>;
+declare function useSideDrawerContext(): SideDrawerContextValue;
+export { SideDrawerContext, useSideDrawerContext };

package/dist/SideDrawer/SideDrawerTitle.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { PropsWithChildren } from "react";
+export declare function SideDrawerTitle({ children }: Required<PropsWithChildren>): React.ReactPortal | null;

package/dist/SideDrawer/SideDrawerToolbar.d.ts

@@ -0,0 +1,2 @@
+import type { PropsWithChildren } from "react";
+export declare function SideDrawerToolbar({ children }: PropsWithChildren): import("react").ReactPortal | null;

package/dist/SideDrawer/index.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+var SideDrawer = require('../SideDrawer-EvpF0Mgf.js');
+require('react');
+require('react-dom');
+require('framer-motion');
+require('@jobber/design');
+require('../useRefocusOnActivator-BobysySV.js');
+require('../useFocusTrap-DLXnMUAz.js');
+require('classnames');
+require('../useInView-CG0fdoof.js');
+require('../Heading-z8hfQeuJ.js');
+require('../Typography-D1eaCiF-.js');
+require('../Button-DzDt6ZED.js');
+require('react-router-dom');
+require('../Icon-pGnI_lpv.js');
+require('../Flex-BHF0kNda.js');
+
+
+
+exports.SideDrawer = SideDrawer.SideDrawer;

package/dist/SideDrawer/index.d.ts

@@ -0,0 +1 @@
+export * from "./SideDrawer";

package/dist/SideDrawer/index.mjs

@@ -0,0 +1,15 @@
+export { S as SideDrawer } from '../SideDrawer-B6ahl60Q.js';
+import 'react';
+import 'react-dom';
+import 'framer-motion';
+import '@jobber/design';
+import '../useRefocusOnActivator-C0-MAUPZ.js';
+import '../useFocusTrap-BpGVaCwR.js';
+import 'classnames';
+import '../useInView-DmKBbh8z.js';
+import '../Heading-coWt93QR.js';
+import '../Typography-DHg6m-aH.js';
+import '../Button-DjLnt080.js';
+import 'react-router-dom';
+import '../Icon-DOiE4RnD.js';
+import '../Flex-DyVcTSBz.js';

package/dist/SideDrawer-B6ahl60Q.js

@@ -0,0 +1,114 @@
+import React, { createContext, useContext, useState, useId } from 'react';
+import { createPortal } from 'react-dom';
+import { AnimatePresence, motion } from 'framer-motion';
+import { tokens } from '@jobber/design';
+import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-C0-MAUPZ.js';
+import { u as useFocusTrap_2 } from './useFocusTrap-BpGVaCwR.js';
+import classnames from 'classnames';
+import { u as useInView_2 } from './useInView-DmKBbh8z.js';
+import { H as Heading } from './Heading-coWt93QR.js';
+import { B as Button } from './Button-DjLnt080.js';
+import { F as Flex } from './Flex-DyVcTSBz.js';
+
+const SideDrawerContext = createContext({});
+function useSideDrawerContext() {
+    const context = useContext(SideDrawerContext);
+    return context;
+}
+
+function SideDrawerActions({ children }) {
+    const { actionPortal } = useSideDrawerContext();
+    if (!actionPortal)
+        return null;
+    return createPortal(React.createElement(React.Fragment, null, children), actionPortal);
+}
+
+function SideDrawerTitle({ children }) {
+    const { titlePortal } = useSideDrawerContext();
+    if (!titlePortal)
+        return null;
+    if (typeof children === "string") {
+        return createPortal(React.createElement(Heading, { level: 2 }, children), titlePortal);
+    }
+    return createPortal(children, titlePortal);
+}
+
+function SideDrawerToolbar({ children }) {
+    const { toolbarPortal } = useSideDrawerContext();
+    if (!toolbarPortal)
+        return null;
+    return createPortal(children, toolbarPortal);
+}
+
+var styles = {"drawer":"f-MKdBvCQXQ-","container":"ZMrzd2xJCtQ-","subtle":"j-us8-p4bfY-","header":"di7wVz6Zdy8-","hasShadow":"-Os-3OnRHg0-","headerActions":"sUo3MflQPVI-","hideWhenEmpty":"zbd79OKr6-M-","overlay":"zUQipP8Y6Tk-"};
+
+function SideDrawerBackButton({ onClick, }) {
+    const { backPortal } = useSideDrawerContext();
+    if (!backPortal)
+        return null;
+    return createPortal(React.createElement(Button, { ariaLabel: "Back", icon: "arrowLeft", variation: "subtle", type: "tertiary", onClick: onClick }), backPortal);
+}
+
+const variants = {
+    hidden: { x: "100%" },
+    visible: { x: 0, transitionEnd: { x: 0 } },
+};
+function SideDrawer({ children, onRequestClose, open, variation = "base", }) {
+    var _a;
+    const [ref, setRef] = useState(null);
+    const toolbar = usePortalId();
+    const title = usePortalId("title");
+    const actions = usePortalId();
+    const backButton = usePortalId();
+    useRefocusOnActivator_2(open);
+    const sideDrawerRef = useFocusTrap_2(open);
+    const [shadowRef, hideShadow] = useInView_2();
+    const container = ((_a = globalThis.document) === null || _a === void 0 ? void 0 : _a.body) || null;
+    if (!container)
+        return null;
+    return createPortal(React.createElement(SideDrawerContext.Provider, { value: {
+            actionPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(actions.selector),
+            titlePortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(title.selector),
+            toolbarPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(toolbar.selector),
+            backPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(backButton.selector),
+        } },
+        open && (React.createElement("button", { className: styles.overlay, "aria-label": "Close", onClick: onRequestClose, type: "button" })),
+        React.createElement(AnimatePresence, { initial: false }, open && (React.createElement(motion.div, { className: styles.drawer, ref: setRef, variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: {
+                duration: tokens["timing-base"] / 1000,
+            } },
+            React.createElement("div", { ref: sideDrawerRef, role: "dialog", className: classnames(styles.container, styles.hasShadow, {
+                    [styles.subtle]: variation === "subtle",
+                }), tabIndex: 0, onKeyUp: handleKeyUp },
+                React.createElement("div", { ref: shadowRef }),
+                React.createElement("div", { className: classnames(styles.header, {
+                        [styles.hasShadow]: shadowRef.current && !hideShadow,
+                    }) },
+                    React.createElement(Flex, { template: ["grow", "shrink"] },
+                        React.createElement(Flex, { template: ["shrink", "grow"], gap: "small" },
+                            React.createElement("div", Object.assign({}, backButton.attr)),
+                            React.createElement("div", Object.assign({}, title.attr))),
+                        React.createElement("div", { className: styles.headerActions },
+                            React.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, actions.attr)),
+                            React.createElement(Button, { ariaLabel: "Close", icon: "cross", onClick: onRequestClose, type: "tertiary", variation: "subtle" }))),
+                    React.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, toolbar.attr))),
+                children))))), container);
+    function handleKeyUp(event) {
+        if (event.key === "Escape") {
+            onRequestClose();
+        }
+    }
+}
+function usePortalId(prefix) {
+    const id = useId();
+    const prefixedId = prefix ? `${prefix}-${id}` : id;
+    const attrKey = "data-side-drawer-slot";
+    const selector = `[${attrKey}="${prefixedId}"]`;
+    const attr = { [attrKey]: prefixedId };
+    return { id: prefixedId, selector, attr };
+}
+SideDrawer.Title = SideDrawerTitle;
+SideDrawer.Toolbar = SideDrawerToolbar;
+SideDrawer.Actions = SideDrawerActions;
+SideDrawer.BackButton = SideDrawerBackButton;
+
+export { SideDrawer as S };

package/dist/SideDrawer-EvpF0Mgf.js

@@ -0,0 +1,116 @@
+'use strict';
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+var framerMotion = require('framer-motion');
+var design = require('@jobber/design');
+var useRefocusOnActivator = require('./useRefocusOnActivator-BobysySV.js');
+var useFocusTrap = require('./useFocusTrap-DLXnMUAz.js');
+var classnames = require('classnames');
+var useInView = require('./useInView-CG0fdoof.js');
+var Heading = require('./Heading-z8hfQeuJ.js');
+var Button = require('./Button-DzDt6ZED.js');
+var Flex = require('./Flex-BHF0kNda.js');
+
+const SideDrawerContext = React.createContext({});
+function useSideDrawerContext() {
+    const context = React.useContext(SideDrawerContext);
+    return context;
+}
+
+function SideDrawerActions({ children }) {
+    const { actionPortal } = useSideDrawerContext();
+    if (!actionPortal)
+        return null;
+    return ReactDOM.createPortal(React.createElement(React.Fragment, null, children), actionPortal);
+}
+
+function SideDrawerTitle({ children }) {
+    const { titlePortal } = useSideDrawerContext();
+    if (!titlePortal)
+        return null;
+    if (typeof children === "string") {
+        return ReactDOM.createPortal(React.createElement(Heading.Heading, { level: 2 }, children), titlePortal);
+    }
+    return ReactDOM.createPortal(children, titlePortal);
+}
+
+function SideDrawerToolbar({ children }) {
+    const { toolbarPortal } = useSideDrawerContext();
+    if (!toolbarPortal)
+        return null;
+    return ReactDOM.createPortal(children, toolbarPortal);
+}
+
+var styles = {"drawer":"f-MKdBvCQXQ-","container":"ZMrzd2xJCtQ-","subtle":"j-us8-p4bfY-","header":"di7wVz6Zdy8-","hasShadow":"-Os-3OnRHg0-","headerActions":"sUo3MflQPVI-","hideWhenEmpty":"zbd79OKr6-M-","overlay":"zUQipP8Y6Tk-"};
+
+function SideDrawerBackButton({ onClick, }) {
+    const { backPortal } = useSideDrawerContext();
+    if (!backPortal)
+        return null;
+    return ReactDOM.createPortal(React.createElement(Button.Button, { ariaLabel: "Back", icon: "arrowLeft", variation: "subtle", type: "tertiary", onClick: onClick }), backPortal);
+}
+
+const variants = {
+    hidden: { x: "100%" },
+    visible: { x: 0, transitionEnd: { x: 0 } },
+};
+function SideDrawer({ children, onRequestClose, open, variation = "base", }) {
+    var _a;
+    const [ref, setRef] = React.useState(null);
+    const toolbar = usePortalId();
+    const title = usePortalId("title");
+    const actions = usePortalId();
+    const backButton = usePortalId();
+    useRefocusOnActivator.useRefocusOnActivator_2(open);
+    const sideDrawerRef = useFocusTrap.useFocusTrap_2(open);
+    const [shadowRef, hideShadow] = useInView.useInView_2();
+    const container = ((_a = globalThis.document) === null || _a === void 0 ? void 0 : _a.body) || null;
+    if (!container)
+        return null;
+    return ReactDOM.createPortal(React.createElement(SideDrawerContext.Provider, { value: {
+            actionPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(actions.selector),
+            titlePortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(title.selector),
+            toolbarPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(toolbar.selector),
+            backPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(backButton.selector),
+        } },
+        open && (React.createElement("button", { className: styles.overlay, "aria-label": "Close", onClick: onRequestClose, type: "button" })),
+        React.createElement(framerMotion.AnimatePresence, { initial: false }, open && (React.createElement(framerMotion.motion.div, { className: styles.drawer, ref: setRef, variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: {
+                duration: design.tokens["timing-base"] / 1000,
+            } },
+            React.createElement("div", { ref: sideDrawerRef, role: "dialog", className: classnames(styles.container, styles.hasShadow, {
+                    [styles.subtle]: variation === "subtle",
+                }), tabIndex: 0, onKeyUp: handleKeyUp },
+                React.createElement("div", { ref: shadowRef }),
+                React.createElement("div", { className: classnames(styles.header, {
+                        [styles.hasShadow]: shadowRef.current && !hideShadow,
+                    }) },
+                    React.createElement(Flex.Flex, { template: ["grow", "shrink"] },
+                        React.createElement(Flex.Flex, { template: ["shrink", "grow"], gap: "small" },
+                            React.createElement("div", Object.assign({}, backButton.attr)),
+                            React.createElement("div", Object.assign({}, title.attr))),
+                        React.createElement("div", { className: styles.headerActions },
+                            React.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, actions.attr)),
+                            React.createElement(Button.Button, { ariaLabel: "Close", icon: "cross", onClick: onRequestClose, type: "tertiary", variation: "subtle" }))),
+                    React.createElement("div", Object.assign({ className: styles.hideWhenEmpty }, toolbar.attr))),
+                children))))), container);
+    function handleKeyUp(event) {
+        if (event.key === "Escape") {
+            onRequestClose();
+        }
+    }
+}
+function usePortalId(prefix) {
+    const id = React.useId();
+    const prefixedId = prefix ? `${prefix}-${id}` : id;
+    const attrKey = "data-side-drawer-slot";
+    const selector = `[${attrKey}="${prefixedId}"]`;
+    const attr = { [attrKey]: prefixedId };
+    return { id: prefixedId, selector, attr };
+}
+SideDrawer.Title = SideDrawerTitle;
+SideDrawer.Toolbar = SideDrawerToolbar;
+SideDrawer.Actions = SideDrawerActions;
+SideDrawer.BackButton = SideDrawerBackButton;
+
+exports.SideDrawer = SideDrawer;

package/dist/Spinner/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var Spinner = require('../Spinner-DT_qu93D.js');
+var Spinner = require('../Spinner-ERVa9p3R.js');
 require('react');
 require('classnames');
 

package/dist/Spinner/index.mjs

@@ -1,3 +1,3 @@
-export { S as Spinner } from '../Spinner-B3eiNzal.js';
+export { S as Spinner } from '../Spinner-CDea5o9l.js';
 import 'react';
 import 'classnames';

package/dist/StatusIndicator/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var StatusIndicator = require('../StatusIndicator-Dq-D-Iec.js');
+var StatusIndicator = require('../StatusIndicator-65p0-mvu.js');
 require('react');
 
 

package/dist/StatusIndicator/index.mjs

@@ -1,2 +1,2 @@
-export { S as StatusIndicator } from '../StatusIndicator-Fk1ZAACr.js';
+export { S as StatusIndicator } from '../StatusIndicator-CJ3IKgwk.js';
 import 'react';