@jobber/components 5.10.1 → 5.12.0

package/dist/Popover/index.cjs

@@ -1,16 +1,16 @@
 'use strict';
 
-var Popover = require('../Popover-BX-Lzbrx.js');
+var Popover = require('../Popover-B-HOk4Gw.js');
 require('react');
 require('react-popper');
-require('../useRefocusOnActivator-CQlAuC-h.js');
-require('../ButtonDismiss-CcRokoPH.js');
-require('../Button-A6LAX-7t.js');
+require('../useRefocusOnActivator-BWYONoDx.js');
+require('../ButtonDismiss-xbNuUUar.js');
+require('../Button-BFJGQVFV.js');
 require('classnames');
 require('react-router-dom');
-require('../Icon-CDhoj_8v.js');
+require('../Icon-C_DbPbIP.js');
 require('@jobber/design');
-require('../Typography-WjGCe5uo.js');
+require('../Typography-CqTtFYxk.js');
 
 
 

package/dist/Popover/index.mjs

@@ -1,11 +1,11 @@
-export { P as Popover } from '../Popover-jm604FB0.js';
+export { P as Popover } from '../Popover-BfmQFhuE.js';
 import 'react';
 import 'react-popper';
-import '../useRefocusOnActivator-DjW9eW4Z.js';
-import '../ButtonDismiss-Wkz0Djfy.js';
-import '../Button-acSM7UYl.js';
+import '../useRefocusOnActivator-BvpwlQes.js';
+import '../ButtonDismiss-Db6Czg_O.js';
+import '../Button-DIu8woBI.js';
 import 'classnames';
 import 'react-router-dom';
-import '../Icon-Cj4Xz7cR.js';
+import '../Icon-Dh8K_yZd.js';
 import '@jobber/design';
-import '../Typography-C_Gl9If1.js';
+import '../Typography-DbxLi7l1.js';

package/dist/{Popover-BX-Lzbrx.js → Popover-B-HOk4Gw.js}

@@ -2,8 +2,8 @@
 
 var React = require('react');
 var reactPopper = require('react-popper');
-var useRefocusOnActivator = require('./useRefocusOnActivator-CQlAuC-h.js');
-var ButtonDismiss = require('./ButtonDismiss-CcRokoPH.js');
+var useRefocusOnActivator = require('./useRefocusOnActivator-BWYONoDx.js');
+var ButtonDismiss = require('./ButtonDismiss-xbNuUUar.js');
 
 var classes = {"header":"oSlK4rLUvzE-","dismissButton":"XVPpPb-7e30-","popover":"TDuYbqXaLW0-","arrow":"LJCpn0zf1e8-"};
 
@@ -15,7 +15,7 @@ function Popover({ onRequestClose, children, attachTo, open, preferredPlacement
         placement: preferredPlacement,
     });
     useRefocusOnActivator.useRefocusOnActivator_2(open);
-    return (React.createElement(React.Fragment, null, open && (React.createElement("div", Object.assign({ role: "dialog", ref: setPopperElement, style: popperStyles.popper, className: classes.popover }, attributes.popper),
+    return (React.createElement(React.Fragment, null, open && (React.createElement("div", Object.assign({ role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: popperStyles.popper, className: classes.popover }, attributes.popper),
         React.createElement("div", { className: classes.dismissButton },
             React.createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close dialog" })),
         children,

package/dist/{Popover-jm604FB0.js → Popover-BfmQFhuE.js}

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { usePopper } from 'react-popper';
-import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-DjW9eW4Z.js';
-import { B as ButtonDismiss } from './ButtonDismiss-Wkz0Djfy.js';
+import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-BvpwlQes.js';
+import { B as ButtonDismiss } from './ButtonDismiss-Db6Czg_O.js';
 
 var classes = {"header":"oSlK4rLUvzE-","dismissButton":"XVPpPb-7e30-","popover":"TDuYbqXaLW0-","arrow":"LJCpn0zf1e8-"};
 
@@ -13,7 +13,7 @@ function Popover({ onRequestClose, children, attachTo, open, preferredPlacement
         placement: preferredPlacement,
     });
     useRefocusOnActivator_2(open);
-    return (React.createElement(React.Fragment, null, open && (React.createElement("div", Object.assign({ role: "dialog", ref: setPopperElement, style: popperStyles.popper, className: classes.popover }, attributes.popper),
+    return (React.createElement(React.Fragment, null, open && (React.createElement("div", Object.assign({ role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: popperStyles.popper, className: classes.popover }, attributes.popper),
         React.createElement("div", { className: classes.dismissButton },
             React.createElement(ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close dialog" })),
         children,

package/dist/ProgressBar/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var ProgressBar = require('../ProgressBar-C7MG-ZL3.js');
+var ProgressBar = require('../ProgressBar-BQJL-aoF.js');
 require('react');
 require('classnames');
 

package/dist/ProgressBar/index.mjs

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

package/dist/RadioGroup/index.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
-var RadioGroup = require('../RadioGroup-CnWg9GdT.js');
+var RadioGroup = require('../RadioGroup-B0AABlwO.js');
 require('react');
-require('../Text-_EV-h5cU.js');
-require('../Typography-WjGCe5uo.js');
+require('../Text-BCeitAaG.js');
+require('../Typography-CqTtFYxk.js');
 require('classnames');
 
 

package/dist/RadioGroup/index.mjs

@@ -1,5 +1,5 @@
-export { R as RadioGroup, a as RadioOption } from '../RadioGroup-CtgqMYjG.js';
+export { R as RadioGroup, a as RadioOption } from '../RadioGroup-0OvwqAJp.js';
 import 'react';
-import '../Text-BVW7dHjH.js';
-import '../Typography-C_Gl9If1.js';
+import '../Text-CeTEU5FJ.js';
+import '../Typography-DbxLi7l1.js';
 import 'classnames';

package/dist/{RadioGroup-CtgqMYjG.js → RadioGroup-0OvwqAJp.js}

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

package/dist/{RadioGroup-CnWg9GdT.js → RadioGroup-B0AABlwO.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var Text = require('./Text-_EV-h5cU.js');
+var Text = require('./Text-BCeitAaG.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-CFUgy0LQ.js');
+var DayOfMonthSelect = require('../../DayOfMonthSelect-Di541BgE.js');
 require('react');
-require('../../RadioGroup-CnWg9GdT.js');
-require('../../Text-_EV-h5cU.js');
-require('../../Typography-WjGCe5uo.js');
+require('../../RadioGroup-B0AABlwO.js');
+require('../../Text-BCeitAaG.js');
+require('../../Typography-CqTtFYxk.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-BPBIfwH_.js';
+export { c as DayOfMonthSelect, b as MonthlyDayOfWeekSelect, M as MonthlySelect, a as WeeklySelect } from '../../DayOfMonthSelect-BgLjiRF2.js';
 import 'react';
-import '../../RadioGroup-CtgqMYjG.js';
-import '../../Text-BVW7dHjH.js';
-import '../../Typography-C_Gl9If1.js';
+import '../../RadioGroup-0OvwqAJp.js';
+import '../../Text-CeTEU5FJ.js';
+import '../../Typography-DbxLi7l1.js';
 import 'classnames';

package/dist/RecurringSelect/index.cjs

@@ -1,27 +1,27 @@
 'use strict';
 
-var RecurringSelect = require('../RecurringSelect-FnWCJtr4.js');
-var DayOfMonthSelect = require('../DayOfMonthSelect-CFUgy0LQ.js');
+var RecurringSelect = require('../RecurringSelect-BiMAIjwq.js');
+var DayOfMonthSelect = require('../DayOfMonthSelect-Di541BgE.js');
 require('react');
-require('../Text-_EV-h5cU.js');
-require('../Typography-WjGCe5uo.js');
+require('../Text-BCeitAaG.js');
+require('../Typography-CqTtFYxk.js');
 require('classnames');
-require('../Option-5nUB_XJY.js');
-require('../FormField-CTN_XdPU.js');
-require('../tslib.es6-DE4NMgYE.js');
+require('../Option-DAWVGrms.js');
+require('../FormField-B4TjfdtS.js');
+require('../tslib.es6-DrMmFaEy.js');
 require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
-require('../Button-A6LAX-7t.js');
+require('../Button-BFJGQVFV.js');
 require('react-router-dom');
-require('../Icon-CDhoj_8v.js');
-require('../useFormFieldFocus-D3AHz_vI.js');
-require('../InputValidation-DUf_NFpB.js');
-require('../Spinner-BW_Wyh8e.js');
-require('../InputNumber-Btkt-ura.js');
-require('../InputGroup-CBcPlvVt.js');
-require('../Content-zhbnwE2s.js');
-require('../RadioGroup-CnWg9GdT.js');
+require('../Icon-C_DbPbIP.js');
+require('../useFormFieldFocus-smsbamXp.js');
+require('../InputValidation-C6o4vzNa.js');
+require('../Spinner-BVy38VYA.js');
+require('../InputNumber-C4XBJWi7.js');
+require('../InputGroup-Cv_zEJzG.js');
+require('../Content-8XJsQm83.js');
+require('../RadioGroup-B0AABlwO.js');
 
 
 

package/dist/RecurringSelect/index.mjs

@@ -1,22 +1,22 @@
-export { R as RecurringSelect } from '../RecurringSelect-BFpoEPla.js';
-export { D as DurationPeriod, W as WeekDay } from '../DayOfMonthSelect-BPBIfwH_.js';
+export { R as RecurringSelect } from '../RecurringSelect-DxO9KdA7.js';
+export { D as DurationPeriod, W as WeekDay } from '../DayOfMonthSelect-BgLjiRF2.js';
 import 'react';
-import '../Text-BVW7dHjH.js';
-import '../Typography-C_Gl9If1.js';
+import '../Text-CeTEU5FJ.js';
+import '../Typography-DbxLi7l1.js';
 import 'classnames';
-import '../Option-B5vB-bUu.js';
-import '../FormField-CIvJlcSy.js';
-import '../tslib.es6-CgiFWwQa.js';
+import '../Option-JU5pq_BM.js';
+import '../FormField-DoVeD-Yr.js';
+import '../tslib.es6-BJxEp6YK.js';
 import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
-import '../Button-acSM7UYl.js';
+import '../Button-DIu8woBI.js';
 import 'react-router-dom';
-import '../Icon-Cj4Xz7cR.js';
-import '../useFormFieldFocus-DtElPru8.js';
-import '../InputValidation-B6CCOrEv.js';
-import '../Spinner-CXUs73L2.js';
-import '../InputNumber-DbXKccpi.js';
-import '../InputGroup-BgNjzFgG.js';
-import '../Content-CLJaonkJ.js';
-import '../RadioGroup-CtgqMYjG.js';
+import '../Icon-Dh8K_yZd.js';
+import '../useFormFieldFocus-BJZNo2h6.js';
+import '../InputValidation-BEJ0zNne.js';
+import '../Spinner-CfXufd99.js';
+import '../InputNumber-DaiEMXpM.js';
+import '../InputGroup-B8P5TQ-N.js';
+import '../Content-DTJYoYxA.js';
+import '../RadioGroup-0OvwqAJp.js';

package/dist/{RecurringSelect-FnWCJtr4.js → RecurringSelect-BiMAIjwq.js}

@@ -1,13 +1,13 @@
 'use strict';
 
 var React = require('react');
-var DayOfMonthSelect = require('./DayOfMonthSelect-CFUgy0LQ.js');
-var Text = require('./Text-_EV-h5cU.js');
+var DayOfMonthSelect = require('./DayOfMonthSelect-Di541BgE.js');
+var Text = require('./Text-BCeitAaG.js');
 require('classnames');
-var Option = require('./Option-5nUB_XJY.js');
-var InputNumber = require('./InputNumber-Btkt-ura.js');
-var InputGroup = require('./InputGroup-CBcPlvVt.js');
-var Content = require('./Content-zhbnwE2s.js');
+var Option = require('./Option-DAWVGrms.js');
+var InputNumber = require('./InputNumber-C4XBJWi7.js');
+var InputGroup = require('./InputGroup-Cv_zEJzG.js');
+var Content = require('./Content-8XJsQm83.js');
 
 function CurrentRecurrenceComponent({ recurrenceRule, disabled = false, onChange, }) {
     switch (recurrenceRule.type) {

package/dist/{RecurringSelect-BFpoEPla.js → RecurringSelect-DxO9KdA7.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-BPBIfwH_.js';
-import { T as Text } from './Text-BVW7dHjH.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-BgLjiRF2.js';
+import { T as Text } from './Text-CeTEU5FJ.js';
 import 'classnames';
-import { S as Select, a as SelectOption } from './Option-B5vB-bUu.js';
-import { I as InputNumber } from './InputNumber-DbXKccpi.js';
-import { I as InputGroup } from './InputGroup-BgNjzFgG.js';
-import { C as Content } from './Content-CLJaonkJ.js';
+import { S as Select, a as SelectOption } from './Option-JU5pq_BM.js';
+import { I as InputNumber } from './InputNumber-DaiEMXpM.js';
+import { I as InputGroup } from './InputGroup-B8P5TQ-N.js';
+import { C as Content } from './Content-DTJYoYxA.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-5nUB_XJY.js');
+var Option = require('../Option-DAWVGrms.js');
 require('react');
-require('../FormField-CTN_XdPU.js');
-require('../tslib.es6-DE4NMgYE.js');
+require('../FormField-B4TjfdtS.js');
+require('../tslib.es6-DrMmFaEy.js');
 require('react-hook-form');
 require('classnames');
 require('framer-motion');
 require('@jobber/design');
-require('../Button-A6LAX-7t.js');
+require('../Button-BFJGQVFV.js');
 require('react-router-dom');
-require('../Icon-CDhoj_8v.js');
-require('../Typography-WjGCe5uo.js');
-require('../Text-_EV-h5cU.js');
-require('../useFormFieldFocus-D3AHz_vI.js');
-require('../InputValidation-DUf_NFpB.js');
-require('../Spinner-BW_Wyh8e.js');
+require('../Icon-C_DbPbIP.js');
+require('../Typography-CqTtFYxk.js');
+require('../Text-BCeitAaG.js');
+require('../useFormFieldFocus-smsbamXp.js');
+require('../InputValidation-C6o4vzNa.js');
+require('../Spinner-BVy38VYA.js');
 
 
 

package/dist/Select/index.mjs

@@ -1,16 +1,16 @@
-export { a as Option, S as Select } from '../Option-B5vB-bUu.js';
+export { a as Option, S as Select } from '../Option-JU5pq_BM.js';
 import 'react';
-import '../FormField-CIvJlcSy.js';
-import '../tslib.es6-CgiFWwQa.js';
+import '../FormField-DoVeD-Yr.js';
+import '../tslib.es6-BJxEp6YK.js';
 import 'react-hook-form';
 import 'classnames';
 import 'framer-motion';
 import '@jobber/design';
-import '../Button-acSM7UYl.js';
+import '../Button-DIu8woBI.js';
 import 'react-router-dom';
-import '../Icon-Cj4Xz7cR.js';
-import '../Typography-C_Gl9If1.js';
-import '../Text-BVW7dHjH.js';
-import '../useFormFieldFocus-DtElPru8.js';
-import '../InputValidation-B6CCOrEv.js';
-import '../Spinner-CXUs73L2.js';
+import '../Icon-Dh8K_yZd.js';
+import '../Typography-DbxLi7l1.js';
+import '../Text-CeTEU5FJ.js';
+import '../useFormFieldFocus-BJZNo2h6.js';
+import '../InputValidation-BEJ0zNne.js';
+import '../Spinner-CfXufd99.js';

package/dist/SideDrawer/SideDrawer.d.ts

@@ -18,8 +18,12 @@ interface SideDrawerProps extends PropsWithChildren {
      * Change the appearance of the drawer.
      */
     readonly variation?: "base" | "subtle";
+    /**
+     * Change the scrolling direction of the drawer. Useful for chat-like interfaces.
+     */
+    readonly scrollDirection?: "normal" | "reverse";
 }
-export declare function SideDrawer({ children, onRequestClose, open, variation, }: SideDrawerProps): React.ReactPortal | null;
+export declare function SideDrawer({ children, onRequestClose, open, variation, scrollDirection, }: SideDrawerProps): React.ReactPortal | null;
 export declare namespace SideDrawer {
     var Title: typeof SideDrawerTitle;
     var Toolbar: typeof SideDrawerToolbar;

package/dist/SideDrawer/SideDrawerContext.d.ts

@@ -1,10 +1,16 @@
 /// <reference types="react" />
+export interface RegisteredComponents {
+    backButton: boolean;
+}
 interface SideDrawerContextValue {
     readonly actionPortal?: HTMLElement | null;
     readonly titlePortal?: HTMLElement | null;
     readonly toolbarPortal?: HTMLElement | null;
     readonly backPortal?: HTMLElement | null;
     readonly footerPortal?: HTMLElement | null;
+    readonly components: RegisteredComponents;
+    readonly registerComponent: (key: keyof RegisteredComponents) => void;
+    readonly unRegisterComponent: (key: keyof RegisteredComponents) => void;
 }
 declare const SideDrawerContext: import("react").Context<SideDrawerContextValue>;
 declare function useSideDrawerContext(): SideDrawerContextValue;

package/dist/SideDrawer/index.cjs

@@ -1,20 +1,22 @@
 'use strict';
 
-var SideDrawer = require('../SideDrawer-8G2L5WuC.js');
+var SideDrawer = require('../SideDrawer-9xPdx1wz.js');
 require('react');
 require('react-dom');
 require('framer-motion');
 require('@jobber/design');
-require('../useRefocusOnActivator-CQlAuC-h.js');
-require('../useFocusTrap-BCQN47Iu.js');
+require('../useRefocusOnActivator-BWYONoDx.js');
+require('../useFocusTrap-Dy3gwkZf.js');
 require('classnames');
-require('../useInView-CEfT9IdO.js');
-require('../Heading-BX_pue9Z.js');
-require('../Typography-WjGCe5uo.js');
-require('../Button-A6LAX-7t.js');
+require('../useInView-Cl4WPPdV.js');
+require('../useIsMounted-De2VLVJt.js');
+require('../useSafeLayoutEffect-DQpvWMZy.js');
+require('../Heading-RRQxj1Q5.js');
+require('../Typography-CqTtFYxk.js');
+require('../Button-BFJGQVFV.js');
 require('react-router-dom');
-require('../Icon-CDhoj_8v.js');
-require('../Flex-DANHojC9.js');
+require('../Icon-C_DbPbIP.js');
+require('../Flex-D8UR8Et-.js');
 
 
 

package/dist/SideDrawer/index.mjs

@@ -1,15 +1,17 @@
-export { S as SideDrawer } from '../SideDrawer-DyMC0oZX.js';
+export { S as SideDrawer } from '../SideDrawer-Doix8FjZ.js';
 import 'react';
 import 'react-dom';
 import 'framer-motion';
 import '@jobber/design';
-import '../useRefocusOnActivator-DjW9eW4Z.js';
-import '../useFocusTrap-_0spfVOc.js';
+import '../useRefocusOnActivator-BvpwlQes.js';
+import '../useFocusTrap-Agx6eowS.js';
 import 'classnames';
-import '../useInView-CA6Rrao3.js';
-import '../Heading-BaGG35oe.js';
-import '../Typography-C_Gl9If1.js';
-import '../Button-acSM7UYl.js';
+import '../useInView-aKoEDqQV.js';
+import '../useIsMounted-C9OyDyfz.js';
+import '../useSafeLayoutEffect-ndpgTq7-.js';
+import '../Heading-nksu2YDx.js';
+import '../Typography-DbxLi7l1.js';
+import '../Button-DIu8woBI.js';
 import 'react-router-dom';
-import '../Icon-Cj4Xz7cR.js';
-import '../Flex-BY15tqpT.js';
+import '../Icon-Dh8K_yZd.js';
+import '../Flex-Dwc25RRt.js';

package/dist/{SideDrawer-8G2L5WuC.js → SideDrawer-9xPdx1wz.js}

@@ -4,15 +4,22 @@ var React = require('react');
 var ReactDOM = require('react-dom');
 var framerMotion = require('framer-motion');
 var design = require('@jobber/design');
-var useRefocusOnActivator = require('./useRefocusOnActivator-CQlAuC-h.js');
-var useFocusTrap = require('./useFocusTrap-BCQN47Iu.js');
+var useRefocusOnActivator = require('./useRefocusOnActivator-BWYONoDx.js');
+var useFocusTrap = require('./useFocusTrap-Dy3gwkZf.js');
 var classnames = require('classnames');
-var useInView = require('./useInView-CEfT9IdO.js');
-var Heading = require('./Heading-BX_pue9Z.js');
-var Button = require('./Button-A6LAX-7t.js');
-var Flex = require('./Flex-DANHojC9.js');
+var useInView = require('./useInView-Cl4WPPdV.js');
+var useIsMounted = require('./useIsMounted-De2VLVJt.js');
+var Heading = require('./Heading-RRQxj1Q5.js');
+var Button = require('./Button-BFJGQVFV.js');
+var Flex = require('./Flex-D8UR8Et-.js');
 
-const SideDrawerContext = React.createContext({});
+const SideDrawerContext = React.createContext({
+    components: {
+        backButton: false,
+    },
+    registerComponent: () => undefined,
+    unRegisterComponent: () => undefined,
+});
 function useSideDrawerContext() {
     const context = React.useContext(SideDrawerContext);
     return context;
@@ -42,10 +49,16 @@ function SideDrawerToolbar({ children }) {
     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-"};
+var styles = {"drawer":"f-MKdBvCQXQ-","container":"ZMrzd2xJCtQ-","header":"di7wVz6Zdy8-","content":"ngWetY6itkw-","footer":"UXAxYfbJy1Q-","subtle":"j-us8-p4bfY-","hasShadow":"-Os-3OnRHg0-","headerActions":"sUo3MflQPVI-","hideWhenEmpty":"zbd79OKr6-M-","overlay":"zUQipP8Y6Tk-","reverseScroll":"D2c5PtgziXk-","headerShadowListener":"-zW1vxkjXYU-","footerShadowListener":"ZTQgpIVUpoQ-","backButton":"P8ODgotVStw-","backButtonVisible":"_2HLMHzID71U-"};
 
 function SideDrawerBackButton({ onClick, }) {
-    const { backPortal } = useSideDrawerContext();
+    const { backPortal, registerComponent, unRegisterComponent } = useSideDrawerContext();
+    React.useEffect(() => {
+        registerComponent("backButton");
+        return () => {
+            unRegisterComponent("backButton");
+        };
+    }, []);
     if (!backPortal)
         return null;
     return ReactDOM.createPortal(React.createElement(Button.Button, { ariaLabel: "Back", icon: "longArrowLeft", variation: "subtle", type: "tertiary", onClick: onClick }), backPortal);
@@ -62,21 +75,20 @@ const variants = {
     hidden: { x: "100%" },
     visible: { x: 0, transitionEnd: { x: 0 } },
 };
-// eslint-disable-next-line max-statements
-function SideDrawer({ children, onRequestClose, open, variation = "base", }) {
+function SideDrawer({ children, onRequestClose, open, variation = "base", scrollDirection, }) {
     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();
+    const [components, setComponents] = React.useState({
+        backButton: false,
+    });
+    const { toolbar, title, actions, backButton, footer } = useSlotIDs();
     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)
+    const isMounted = useIsMounted.useIsMounted_2();
+    if (!isMounted.current && !container)
         return null;
     return ReactDOM.createPortal(React.createElement(SideDrawerContext.Provider, { value: {
             actionPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(actions.selector),
@@ -84,37 +96,53 @@ function SideDrawer({ children, onRequestClose, open, variation = "base", }) {
             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),
+            components,
+            registerComponent: key => setComponents(prev => (Object.assign(Object.assign({}, prev), { [key]: true }))),
+            unRegisterComponent: key => setComponents(prev => (Object.assign(Object.assign({}, prev), { [key]: false }))),
         } },
         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: {
+        React.createElement(framerMotion.AnimatePresence, { initial: false }, open && (React.createElement(framerMotion.motion.div, { className: classnames(styles.drawer, {
+                [styles.reverseScroll]: scrollDirection === "reverse",
+            }), ref: setRef, "data-elevation": "elevated", 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({ className: classnames(styles.backButton, {
+                                    [styles.backButtonVisible]: components.backButton,
+                                }) }, 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", { className: styles.content },
+                    React.createElement("div", { className: styles.headerShadowListener, ref: headerShadowRef }),
+                    children,
+                    React.createElement("div", { className: styles.footerShadowListener, ref: footerShadowRef })),
                 React.createElement("div", Object.assign({ className: classnames(styles.footer, styles.hideWhenEmpty, {
                         [styles.hasShadow]: footerShadowRef.current && !noFooterShadow,
-                    }) }, footer.attr)),
-                React.createElement("div", { ref: footerShadowRef })))))), container);
+                    }) }, footer.attr))))))), container);
     function handleKeyUp(event) {
         if (event.key === "Escape") {
             onRequestClose();
         }
     }
 }
+function useSlotIDs() {
+    const toolbar = useSlotID();
+    const title = useSlotID("title");
+    const actions = useSlotID();
+    const backButton = useSlotID("back");
+    const footer = useSlotID();
+    return { toolbar, title, actions, backButton, footer };
+}
 function useSlotID(prefix) {
     const id = React.useId();
     const prefixedId = prefix ? `${prefix}-${id}` : id;