@jobber/components 5.8.0 → 5.9.1-fix-dynami.5

package/dist/ProgressBar/index.cjs

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

package/dist/ProgressBar/index.mjs

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

package/dist/RadioGroup/index.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
-var RadioGroup = require('../RadioGroup-C_HmHHHw.js');
+var RadioGroup = require('../RadioGroup-BPiPAibn.js');
 require('react');
-require('../Text-DrEbJ-f7.js');
-require('../Typography-CGjnDRkN.js');
+require('../Text-BcWAOMDe.js');
+require('../Typography-Bih9ytcJ.js');
 require('classnames');
 
 

package/dist/RadioGroup/index.mjs

@@ -1,5 +1,5 @@
-export { R as RadioGroup, a as RadioOption } from '../RadioGroup-6tAigewL.js';
+export { R as RadioGroup, a as RadioOption } from '../RadioGroup-C1SLQMgo.js';
 import 'react';
-import '../Text-jAK9RUhf.js';
-import '../Typography-BtVFRuRk.js';
+import '../Text-u4LsZTq1.js';
+import '../Typography-Bde_E5zp.js';
 import 'classnames';

package/dist/{RadioGroup-C_HmHHHw.js → RadioGroup-BPiPAibn.js}

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

package/dist/{RadioGroup-6tAigewL.js → RadioGroup-C1SLQMgo.js}

@@ -1,5 +1,5 @@
 import React, { useId } from 'react';
-import { T as Text } from './Text-jAK9RUhf.js';
+import { T as Text } from './Text-u4LsZTq1.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-B4-Nez3f.js');
+var DayOfMonthSelect = require('../../DayOfMonthSelect-GhkPcOoU.js');
 require('react');
-require('../../RadioGroup-C_HmHHHw.js');
-require('../../Text-DrEbJ-f7.js');
-require('../../Typography-CGjnDRkN.js');
+require('../../RadioGroup-BPiPAibn.js');
+require('../../Text-BcWAOMDe.js');
+require('../../Typography-Bih9ytcJ.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-DXv9zdwm.js';
+export { c as DayOfMonthSelect, b as MonthlyDayOfWeekSelect, M as MonthlySelect, a as WeeklySelect } from '../../DayOfMonthSelect-CpitRxCL.js';
 import 'react';
-import '../../RadioGroup-6tAigewL.js';
-import '../../Text-jAK9RUhf.js';
-import '../../Typography-BtVFRuRk.js';
+import '../../RadioGroup-C1SLQMgo.js';
+import '../../Text-u4LsZTq1.js';
+import '../../Typography-Bde_E5zp.js';
 import 'classnames';

package/dist/RecurringSelect/index.cjs

@@ -1,27 +1,27 @@
 'use strict';
 
-var RecurringSelect = require('../RecurringSelect-CYpXqNL4.js');
-var DayOfMonthSelect = require('../DayOfMonthSelect-B4-Nez3f.js');
+var RecurringSelect = require('../RecurringSelect-Dsrhh0y_.js');
+var DayOfMonthSelect = require('../DayOfMonthSelect-GhkPcOoU.js');
 require('react');
-require('../Text-DrEbJ-f7.js');
-require('../Typography-CGjnDRkN.js');
+require('../Text-BcWAOMDe.js');
+require('../Typography-Bih9ytcJ.js');
 require('classnames');
-require('../Option-DA2dU61-.js');
-require('../FormField-D53eOhQP.js');
-require('../tslib.es6-BmKeBnB0.js');
+require('../Option-CFveB_5x.js');
+require('../FormField-BIbIKdkC.js');
+require('../tslib.es6-BZobP_8x.js');
 require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
-require('../Button-BHR__Xp1.js');
+require('../Button-Blb9tzce.js');
 require('react-router-dom');
-require('../Icon-CaLv-8kG.js');
-require('../useFormFieldFocus-7P-fWpqA.js');
-require('../InputValidation-EQBhUJJq.js');
-require('../Spinner-iGPO1rkT.js');
-require('../InputNumber-DOrnEELo.js');
-require('../InputGroup-Dc7HPjTQ.js');
-require('../Content-E-jJVaS7.js');
-require('../RadioGroup-C_HmHHHw.js');
+require('../Icon-CmFdUTnQ.js');
+require('../useFormFieldFocus-av50vGRW.js');
+require('../InputValidation-BbUFEAPL.js');
+require('../Spinner-D7Rz8VhB.js');
+require('../InputNumber-D9Rg1OY5.js');
+require('../InputGroup-D0Bj7xmu.js');
+require('../Content-CD28MQIr.js');
+require('../RadioGroup-BPiPAibn.js');
 
 
 

package/dist/RecurringSelect/index.mjs

@@ -1,22 +1,22 @@
-export { R as RecurringSelect } from '../RecurringSelect-CzoDNpgl.js';
-export { D as DurationPeriod, W as WeekDay } from '../DayOfMonthSelect-DXv9zdwm.js';
+export { R as RecurringSelect } from '../RecurringSelect-Bs_WdHkj.js';
+export { D as DurationPeriod, W as WeekDay } from '../DayOfMonthSelect-CpitRxCL.js';
 import 'react';
-import '../Text-jAK9RUhf.js';
-import '../Typography-BtVFRuRk.js';
+import '../Text-u4LsZTq1.js';
+import '../Typography-Bde_E5zp.js';
 import 'classnames';
-import '../Option-CcgAaoQF.js';
-import '../FormField-Bvnon6yy.js';
-import '../tslib.es6-DNcdghCd.js';
+import '../Option-DxeCAZCh.js';
+import '../FormField-qW93Wvmk.js';
+import '../tslib.es6-DOpfNilk.js';
 import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
-import '../Button-I8bsy701.js';
+import '../Button-ByyUuJVo.js';
 import 'react-router-dom';
-import '../Icon-DJo4AfvY.js';
-import '../useFormFieldFocus-BpgEl_xa.js';
-import '../InputValidation-Cpk83VQp.js';
-import '../Spinner-Dpn5yo2n.js';
-import '../InputNumber-xZAPWEIc.js';
-import '../InputGroup-Depfq3Iu.js';
-import '../Content-DKp2frQ5.js';
-import '../RadioGroup-6tAigewL.js';
+import '../Icon-Biobm0tj.js';
+import '../useFormFieldFocus-DZAPeMfj.js';
+import '../InputValidation-fZquaNw8.js';
+import '../Spinner-BGTC5Pj2.js';
+import '../InputNumber-BhlHO-Rx.js';
+import '../InputGroup-CqLF8C9I.js';
+import '../Content-8nnBZWk5.js';
+import '../RadioGroup-C1SLQMgo.js';

package/dist/{RecurringSelect-CzoDNpgl.js → RecurringSelect-Bs_WdHkj.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-DXv9zdwm.js';
-import { T as Text } from './Text-jAK9RUhf.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-CpitRxCL.js';
+import { T as Text } from './Text-u4LsZTq1.js';
 import 'classnames';
-import { S as Select, a as SelectOption } from './Option-CcgAaoQF.js';
-import { I as InputNumber } from './InputNumber-xZAPWEIc.js';
-import { I as InputGroup } from './InputGroup-Depfq3Iu.js';
-import { C as Content } from './Content-DKp2frQ5.js';
+import { S as Select, a as SelectOption } from './Option-DxeCAZCh.js';
+import { I as InputNumber } from './InputNumber-BhlHO-Rx.js';
+import { I as InputGroup } from './InputGroup-CqLF8C9I.js';
+import { C as Content } from './Content-8nnBZWk5.js';
 
 function CurrentRecurrenceComponent({ recurrenceRule, disabled = false, onChange, }) {
     switch (recurrenceRule.type) {

package/dist/{RecurringSelect-CYpXqNL4.js → RecurringSelect-Dsrhh0y_.js}

@@ -1,13 +1,13 @@
 'use strict';
 
 var React = require('react');
-var DayOfMonthSelect = require('./DayOfMonthSelect-B4-Nez3f.js');
-var Text = require('./Text-DrEbJ-f7.js');
+var DayOfMonthSelect = require('./DayOfMonthSelect-GhkPcOoU.js');
+var Text = require('./Text-BcWAOMDe.js');
 require('classnames');
-var Option = require('./Option-DA2dU61-.js');
-var InputNumber = require('./InputNumber-DOrnEELo.js');
-var InputGroup = require('./InputGroup-Dc7HPjTQ.js');
-var Content = require('./Content-E-jJVaS7.js');
+var Option = require('./Option-CFveB_5x.js');
+var InputNumber = require('./InputNumber-D9Rg1OY5.js');
+var InputGroup = require('./InputGroup-D0Bj7xmu.js');
+var Content = require('./Content-CD28MQIr.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-DA2dU61-.js');
+var Option = require('../Option-CFveB_5x.js');
 require('react');
-require('../FormField-D53eOhQP.js');
-require('../tslib.es6-BmKeBnB0.js');
+require('../FormField-BIbIKdkC.js');
+require('../tslib.es6-BZobP_8x.js');
 require('react-hook-form');
 require('classnames');
 require('framer-motion');
 require('@jobber/design');
-require('../Button-BHR__Xp1.js');
+require('../Button-Blb9tzce.js');
 require('react-router-dom');
-require('../Icon-CaLv-8kG.js');
-require('../Typography-CGjnDRkN.js');
-require('../Text-DrEbJ-f7.js');
-require('../useFormFieldFocus-7P-fWpqA.js');
-require('../InputValidation-EQBhUJJq.js');
-require('../Spinner-iGPO1rkT.js');
+require('../Icon-CmFdUTnQ.js');
+require('../Typography-Bih9ytcJ.js');
+require('../Text-BcWAOMDe.js');
+require('../useFormFieldFocus-av50vGRW.js');
+require('../InputValidation-BbUFEAPL.js');
+require('../Spinner-D7Rz8VhB.js');
 
 
 

package/dist/Select/index.mjs

@@ -1,16 +1,16 @@
-export { a as Option, S as Select } from '../Option-CcgAaoQF.js';
+export { a as Option, S as Select } from '../Option-DxeCAZCh.js';
 import 'react';
-import '../FormField-Bvnon6yy.js';
-import '../tslib.es6-DNcdghCd.js';
+import '../FormField-qW93Wvmk.js';
+import '../tslib.es6-DOpfNilk.js';
 import 'react-hook-form';
 import 'classnames';
 import 'framer-motion';
 import '@jobber/design';
-import '../Button-I8bsy701.js';
+import '../Button-ByyUuJVo.js';
 import 'react-router-dom';
-import '../Icon-DJo4AfvY.js';
-import '../Typography-BtVFRuRk.js';
-import '../Text-jAK9RUhf.js';
-import '../useFormFieldFocus-BpgEl_xa.js';
-import '../InputValidation-Cpk83VQp.js';
-import '../Spinner-Dpn5yo2n.js';
+import '../Icon-Biobm0tj.js';
+import '../Typography-Bde_E5zp.js';
+import '../Text-u4LsZTq1.js';
+import '../useFormFieldFocus-DZAPeMfj.js';
+import '../InputValidation-fZquaNw8.js';
+import '../Spinner-BGTC5Pj2.js';

package/dist/SideDrawer/SideDrawer.d.ts

@@ -0,0 +1,30 @@
+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";
+import { SideDrawerFooter } from "./SideDrawerFooter";
+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;
+    var Footer: typeof SideDrawerFooter;
+}
+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,11 @@
+/// <reference types="react" />
+interface SideDrawerContextValue {
+    readonly actionPortal?: HTMLElement | null;
+    readonly titlePortal?: HTMLElement | null;
+    readonly toolbarPortal?: HTMLElement | null;
+    readonly backPortal?: HTMLElement | null;
+    readonly footerPortal?: HTMLElement | null;
+}
+declare const SideDrawerContext: import("react").Context<SideDrawerContextValue>;
+declare function useSideDrawerContext(): SideDrawerContextValue;
+export { SideDrawerContext, useSideDrawerContext };

package/dist/SideDrawer/SideDrawerFooter.d.ts

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

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-B5hUfN8K.js');
+require('react');
+require('react-dom');
+require('framer-motion');
+require('@jobber/design');
+require('../useRefocusOnActivator-BAZFphUj.js');
+require('../useFocusTrap-DnOLy1gY.js');
+require('classnames');
+require('../useInView-CCICEM4j.js');
+require('../Heading-BqInrdu3.js');
+require('../Typography-Bih9ytcJ.js');
+require('../Button-Blb9tzce.js');
+require('react-router-dom');
+require('../Icon-CmFdUTnQ.js');
+require('../Flex-5oe52olF.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-Cd6dDgRF.js';
+import 'react';
+import 'react-dom';
+import 'framer-motion';
+import '@jobber/design';
+import '../useRefocusOnActivator-CudxJSWR.js';
+import '../useFocusTrap-CwkZBisI.js';
+import 'classnames';
+import '../useInView-CqV_sJgt.js';
+import '../Heading-CdjtdN_u.js';
+import '../Typography-Bde_E5zp.js';
+import '../Button-ByyUuJVo.js';
+import 'react-router-dom';
+import '../Icon-Biobm0tj.js';
+import '../Flex-uFmkWGK1.js';

package/dist/SideDrawer-B5hUfN8K.js

@@ -0,0 +1,132 @@
+'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-BAZFphUj.js');
+var useFocusTrap = require('./useFocusTrap-DnOLy1gY.js');
+var classnames = require('classnames');
+var useInView = require('./useInView-CCICEM4j.js');
+var Heading = require('./Heading-BqInrdu3.js');
+var Button = require('./Button-Blb9tzce.js');
+var Flex = require('./Flex-5oe52olF.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-","footer":"UXAxYfbJy1Q-","hasShadow":"-Os-3OnRHg0-","headerActions":"sUo3MflQPVI-","hideWhenEmpty":"zbd79OKr6-M-","overlay":"zUQipP8Y6Tk-","content":"ngWetY6itkw-"};
+
+function SideDrawerBackButton({ onClick, }) {
+    const { backPortal } = useSideDrawerContext();
+    if (!backPortal)
+        return null;
+    return ReactDOM.createPortal(React.createElement(Button.Button, { ariaLabel: "Back", icon: "longArrowLeft", variation: "subtle", type: "tertiary", onClick: onClick }), backPortal);
+}
+
+function SideDrawerFooter({ children }) {
+    const { footerPortal } = useSideDrawerContext();
+    if (!footerPortal)
+        return null;
+    return ReactDOM.createPortal(React.createElement(React.Fragment, null, children), footerPortal);
+}
+
+const variants = {
+    hidden: { x: "100%" },
+    visible: { x: 0, transitionEnd: { x: 0 } },
+};
+// eslint-disable-next-line max-statements
+function SideDrawer({ children, onRequestClose, open, variation = "base", }) {
+    var _a;
+    const [ref, setRef] = React.useState(null);
+    const toolbar = useSlotID();
+    const title = useSlotID("title");
+    const actions = useSlotID();
+    const backButton = useSlotID("back");
+    const footer = useSlotID();
+    useRefocusOnActivator.useRefocusOnActivator_2(open);
+    const sideDrawerRef = useFocusTrap.useFocusTrap_2(open);
+    const [headerShadowRef, noHeaderShadow] = useInView.useInView_2();
+    const [footerShadowRef, noFooterShadow] = 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),
+            footerPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(footer.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: headerShadowRef }),
+                React.createElement("div", { className: classnames(styles.header, {
+                        [styles.hasShadow]: headerShadowRef.current && !noHeaderShadow,
+                    }) },
+                    React.createElement(Flex.Flex, { template: ["grow", "shrink"] },
+                        React.createElement(Flex.Flex, { template: ["shrink", "grow"], gap: "none" },
+                            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))),
+                React.createElement("div", { className: styles.content }, children),
+                React.createElement("div", Object.assign({ className: classnames(styles.footer, styles.hideWhenEmpty, {
+                        [styles.hasShadow]: footerShadowRef.current && !noFooterShadow,
+                    }) }, footer.attr)),
+                React.createElement("div", { ref: footerShadowRef })))))), container);
+    function handleKeyUp(event) {
+        if (event.key === "Escape") {
+            onRequestClose();
+        }
+    }
+}
+function useSlotID(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;
+SideDrawer.Footer = SideDrawerFooter;
+
+exports.SideDrawer = SideDrawer;