@economic/taco 10.0.1-improve-publish-scripts.0 → 10.0.1-react-19.0

package/dist/components/Dialog/util.cjs

@@ -1,24 +1,15 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const getDialogSizeClassnames = (size) => {
-  switch (size) {
-    case "dialog":
-      return "w-128";
-    case "xs":
-      return "w-xs";
-    case "sm":
-      return "w-sm";
-    case "md":
-      return "w-md";
-    case "lg":
-      return "w-lg";
-    default:
-      return void 0;
-  }
+const DIALOG_SIZE_CLASSNAME = {
+  dialog: "w-128",
+  xs: "w-xs",
+  sm: "w-sm",
+  md: "w-md",
+  lg: "w-lg"
 };
-const getDialogPositionClassnames = () => "mt-16 mx-auto";
-const getDialogStylingClassnames = () => "bg-white rounded animate-[fade-in_150ms] shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]";
-exports.getDialogPositionClassnames = getDialogPositionClassnames;
-exports.getDialogSizeClassnames = getDialogSizeClassnames;
-exports.getDialogStylingClassnames = getDialogStylingClassnames;
+const DIALOG_POSITION_CLASSNAMES = "mt-16 mx-auto";
+const DIALOG_STYLING_CLASSNAMES = "bg-white rounded animate-[fade-in_150ms] shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]";
+exports.DIALOG_POSITION_CLASSNAMES = DIALOG_POSITION_CLASSNAMES;
+exports.DIALOG_SIZE_CLASSNAME = DIALOG_SIZE_CLASSNAME;
+exports.DIALOG_STYLING_CLASSNAMES = DIALOG_STYLING_CLASSNAMES;
 //# sourceMappingURL=util.cjs.map

package/dist/components/Dialog/util.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"util.cjs","sources":["../../../src/components/Dialog/util.ts"],"sourcesContent":["import { DialogSize } from './types';\n\nexport const getDialogSizeClassnames = (size: DialogSize) => {\n    switch (size) {\n        case 'dialog':\n            return 'w-128';\n        case 'xs':\n            return 'w-xs';\n        case 'sm':\n            return 'w-sm';\n        case 'md':\n            return 'w-md';\n        case 'lg':\n            return 'w-lg';\n        default:\n            return undefined;\n    }\n};\n\nexport const getDialogPositionClassnames = () => 'mt-16 mx-auto';\n\nexport const getDialogStylingClassnames = () =>\n    'bg-white rounded animate-[fade-in_150ms] shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]';\n"],"names":[],"mappings":";;AAEa,MAAA,0BAA0B,CAAC,SAAqB;AACzD,UAAQ,MAAM;AAAA,IACV,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX;AACW,aAAA;AAAA,EAAA;AAEnB;AAEO,MAAM,8BAA8B,MAAM;AAE1C,MAAM,6BAA6B,MACtC;;;;"}
+{"version":3,"file":"util.cjs","sources":["../../../src/components/Dialog/util.ts"],"sourcesContent":["import { DialogSize } from './types';\n\nexport const DIALOG_SIZE_CLASSNAME: Record<DialogSize, string> = {\n    dialog: 'w-128',\n    xs: 'w-xs',\n    sm: 'w-sm',\n    md: 'w-md',\n    lg: 'w-lg',\n};\n\nexport const DIALOG_POSITION_CLASSNAMES = 'mt-16 mx-auto';\n\nexport const DIALOG_STYLING_CLASSNAMES =\n    'bg-white rounded animate-[fade-in_150ms] shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]';\n"],"names":[],"mappings":";;AAEO,MAAM,wBAAoD;AAAA,EAC7D,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;AAEO,MAAM,6BAA6B;AAEnC,MAAM,4BACT;;;;"}

package/dist/components/Dialog/util.d.ts

@@ -1,4 +1,4 @@
 import { DialogSize } from './types';
-export declare const getDialogSizeClassnames: (size: DialogSize) => "w-128" | "w-xs" | "w-sm" | "w-md" | "w-lg" | undefined;
-export declare const getDialogPositionClassnames: () => string;
-export declare const getDialogStylingClassnames: () => string;
+export declare const DIALOG_SIZE_CLASSNAME: Record<DialogSize, string>;
+export declare const DIALOG_POSITION_CLASSNAMES = "mt-16 mx-auto";
+export declare const DIALOG_STYLING_CLASSNAMES = "bg-white rounded animate-[fade-in_150ms] shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]";

package/dist/components/Dialog/util.js

@@ -1,24 +1,15 @@
-const getDialogSizeClassnames = (size) => {
-  switch (size) {
-    case "dialog":
-      return "w-128";
-    case "xs":
-      return "w-xs";
-    case "sm":
-      return "w-sm";
-    case "md":
-      return "w-md";
-    case "lg":
-      return "w-lg";
-    default:
-      return void 0;
-  }
+const DIALOG_SIZE_CLASSNAME = {
+  dialog: "w-128",
+  xs: "w-xs",
+  sm: "w-sm",
+  md: "w-md",
+  lg: "w-lg"
 };
-const getDialogPositionClassnames = () => "mt-16 mx-auto";
-const getDialogStylingClassnames = () => "bg-white rounded animate-[fade-in_150ms] shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]";
+const DIALOG_POSITION_CLASSNAMES = "mt-16 mx-auto";
+const DIALOG_STYLING_CLASSNAMES = "bg-white rounded animate-[fade-in_150ms] shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]";
 export {
-  getDialogPositionClassnames,
-  getDialogSizeClassnames,
-  getDialogStylingClassnames
+  DIALOG_POSITION_CLASSNAMES,
+  DIALOG_SIZE_CLASSNAME,
+  DIALOG_STYLING_CLASSNAMES
 };
 //# sourceMappingURL=util.js.map

package/dist/components/Dialog/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../src/components/Dialog/util.ts"],"sourcesContent":["import { DialogSize } from './types';\n\nexport const getDialogSizeClassnames = (size: DialogSize) => {\n    switch (size) {\n        case 'dialog':\n            return 'w-128';\n        case 'xs':\n            return 'w-xs';\n        case 'sm':\n            return 'w-sm';\n        case 'md':\n            return 'w-md';\n        case 'lg':\n            return 'w-lg';\n        default:\n            return undefined;\n    }\n};\n\nexport const getDialogPositionClassnames = () => 'mt-16 mx-auto';\n\nexport const getDialogStylingClassnames = () =>\n    'bg-white rounded animate-[fade-in_150ms] shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]';\n"],"names":[],"mappings":"AAEa,MAAA,0BAA0B,CAAC,SAAqB;AACzD,UAAQ,MAAM;AAAA,IACV,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX;AACW,aAAA;AAAA,EAAA;AAEnB;AAEO,MAAM,8BAA8B,MAAM;AAE1C,MAAM,6BAA6B,MACtC;"}
+{"version":3,"file":"util.js","sources":["../../../src/components/Dialog/util.ts"],"sourcesContent":["import { DialogSize } from './types';\n\nexport const DIALOG_SIZE_CLASSNAME: Record<DialogSize, string> = {\n    dialog: 'w-128',\n    xs: 'w-xs',\n    sm: 'w-sm',\n    md: 'w-md',\n    lg: 'w-lg',\n};\n\nexport const DIALOG_POSITION_CLASSNAMES = 'mt-16 mx-auto';\n\nexport const DIALOG_STYLING_CLASSNAMES =\n    'bg-white rounded animate-[fade-in_150ms] shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]';\n"],"names":[],"mappings":"AAEO,MAAM,wBAAoD;AAAA,EAC7D,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;AAEO,MAAM,6BAA6B;AAEnC,MAAM,4BACT;"}

package/dist/components/Drawer/Context.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Context.cjs","sources":["../../../src/components/Drawer/Context.tsx"],"sourcesContent":["/* oxlint-disable no-empty-function */\nimport * as React from 'react';\nimport { DrawerSize, DrawerVariant } from './types';\n\nexport type OnOpenHandle = {\n    onOpen: () => void;\n};\n\nexport type DrawerContext = {\n    containerRef: React.Ref<OnOpenHandle>;\n    showCloseButton: boolean;\n    onClickBack?: () => void;\n    onClose?: () => void;\n    onResize?: (delta: number) => void;\n    props: object;\n    ref: React.Ref<HTMLElement>;\n    size: DrawerSize;\n    variant: DrawerVariant;\n    outlet?: HTMLElement;\n};\n\nexport const DrawerContext = React.createContext<DrawerContext>({\n    containerRef: null,\n    showCloseButton: true,\n    onClickBack: () => {},\n    onClose: () => {},\n    onResize: () => {},\n    props: {},\n    ref: null,\n    size: 'md',\n    variant: 'embedded',\n});\n\nexport const useCurrentDrawer = () => {\n    return React.useContext(DrawerContext);\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;AAqBa,MAAA,gBAAgBA,iBAAM,cAA6B;AAAA,EAC5D,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,aAAa,MAAM;AAAA,EAAC;AAAA,EACpB,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,OAAO,CAAC;AAAA,EACR,KAAK;AAAA,EACL,MAAM;AAAA,EACN,SAAS;AACb,CAAC;AAEM,MAAM,mBAAmB,MAAM;AAC3B,SAAAA,iBAAM,WAAW,aAAa;AACzC;;;"}
+{"version":3,"file":"Context.cjs","sources":["../../../src/components/Drawer/Context.tsx"],"sourcesContent":["/* oxlint-disable no-empty-function */\nimport * as React from 'react';\nimport { DrawerSize, DrawerVariant } from './types';\n\nexport type OnOpenHandle = {\n    onOpen: () => void;\n};\n\nexport type DrawerContext = {\n    containerRef: React.Ref<OnOpenHandle>;\n    showCloseButton: boolean;\n    onClickBack?: () => void;\n    onClose?: () => void;\n    onResize?: (delta: number) => void;\n    props: object;\n    ref: React.Ref<HTMLElement>;\n    size: DrawerSize;\n    variant: DrawerVariant;\n    outlet?: HTMLElement;\n};\n\nexport const DrawerContext = React.createContext<DrawerContext>({\n    containerRef: null,\n    showCloseButton: true,\n    onClickBack: () => {},\n    onClose: () => {},\n    onResize: () => {},\n    props: {},\n    ref: null,\n    size: 'md',\n    variant: 'embedded',\n});\n\nexport const useCurrentDrawer = () => {\n    return React.useContext(DrawerContext);\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;AAqBO,MAAM,gBAAgBA,iBAAM,cAA6B;AAAA,EAC5D,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,aAAa,MAAM;AAAA,EAAC;AAAA,EACpB,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,OAAO,CAAA;AAAA,EACP,KAAK;AAAA,EACL,MAAM;AAAA,EACN,SAAS;AACb,CAAC;AAEM,MAAM,mBAAmB,MAAM;AAClC,SAAOA,iBAAM,WAAW,aAAa;AACzC;;;"}

package/dist/components/Drawer/Context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Context.js","sources":["../../../src/components/Drawer/Context.tsx"],"sourcesContent":["/* oxlint-disable no-empty-function */\nimport * as React from 'react';\nimport { DrawerSize, DrawerVariant } from './types';\n\nexport type OnOpenHandle = {\n    onOpen: () => void;\n};\n\nexport type DrawerContext = {\n    containerRef: React.Ref<OnOpenHandle>;\n    showCloseButton: boolean;\n    onClickBack?: () => void;\n    onClose?: () => void;\n    onResize?: (delta: number) => void;\n    props: object;\n    ref: React.Ref<HTMLElement>;\n    size: DrawerSize;\n    variant: DrawerVariant;\n    outlet?: HTMLElement;\n};\n\nexport const DrawerContext = React.createContext<DrawerContext>({\n    containerRef: null,\n    showCloseButton: true,\n    onClickBack: () => {},\n    onClose: () => {},\n    onResize: () => {},\n    props: {},\n    ref: null,\n    size: 'md',\n    variant: 'embedded',\n});\n\nexport const useCurrentDrawer = () => {\n    return React.useContext(DrawerContext);\n};\n"],"names":[],"mappings":";AAqBa,MAAA,gBAAgB,MAAM,cAA6B;AAAA,EAC5D,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,aAAa,MAAM;AAAA,EAAC;AAAA,EACpB,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,OAAO,CAAC;AAAA,EACR,KAAK;AAAA,EACL,MAAM;AAAA,EACN,SAAS;AACb,CAAC;AAEM,MAAM,mBAAmB,MAAM;AAC3B,SAAA,MAAM,WAAW,aAAa;AACzC;"}
+{"version":3,"file":"Context.js","sources":["../../../src/components/Drawer/Context.tsx"],"sourcesContent":["/* oxlint-disable no-empty-function */\nimport * as React from 'react';\nimport { DrawerSize, DrawerVariant } from './types';\n\nexport type OnOpenHandle = {\n    onOpen: () => void;\n};\n\nexport type DrawerContext = {\n    containerRef: React.Ref<OnOpenHandle>;\n    showCloseButton: boolean;\n    onClickBack?: () => void;\n    onClose?: () => void;\n    onResize?: (delta: number) => void;\n    props: object;\n    ref: React.Ref<HTMLElement>;\n    size: DrawerSize;\n    variant: DrawerVariant;\n    outlet?: HTMLElement;\n};\n\nexport const DrawerContext = React.createContext<DrawerContext>({\n    containerRef: null,\n    showCloseButton: true,\n    onClickBack: () => {},\n    onClose: () => {},\n    onResize: () => {},\n    props: {},\n    ref: null,\n    size: 'md',\n    variant: 'embedded',\n});\n\nexport const useCurrentDrawer = () => {\n    return React.useContext(DrawerContext);\n};\n"],"names":[],"mappings":";AAqBO,MAAM,gBAAgB,MAAM,cAA6B;AAAA,EAC5D,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,aAAa,MAAM;AAAA,EAAC;AAAA,EACpB,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,OAAO,CAAA;AAAA,EACP,KAAK;AAAA,EACL,MAAM;AAAA,EACN,SAAS;AACb,CAAC;AAEM,MAAM,mBAAmB,MAAM;AAClC,SAAO,MAAM,WAAW,aAAa;AACzC;"}

package/dist/components/Drawer/Drawer.cjs

@@ -27,7 +27,7 @@ function _interopNamespaceDefault(e) {
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const DEFAULT_OUTLET_NAME = "default";
 const Outlet = React__namespace.forwardRef(function Outlet2(props, ref) {
-  const className = cn("h-full ml-auto overflow-hidden flex-shrink-0", props.className);
+  const className = cn("ml-auto h-full flex-shrink-0 overflow-hidden", props.className);
   return /* @__PURE__ */ React__namespace.createElement(
     "div",
     {
@@ -66,8 +66,7 @@ const Drawer = React__namespace.forwardRef(function Drawer2(props, ref) {
     setOpen,
     onClose,
     onOpen: () => {
-      var _a;
-      (_a = containerRef.current) == null ? void 0 : _a.onOpen();
+      containerRef.current?.onOpen();
     }
   });
   const context = React__namespace.useMemo(
@@ -86,9 +85,8 @@ const Drawer = React__namespace.forwardRef(function Drawer2(props, ref) {
     [containerRef, otherProps, variant, onResize, onClose, size, showCloseButton, outlet, onClickBack]
   );
   const handleOpenChange = (open2, eventDetails) => {
-    var _a;
     if (eventDetails.reason === "escape-key") {
-      const triggeredFromRadixPortal = (_a = eventDetails.event.target) == null ? void 0 : _a.closest(
+      const triggeredFromRadixPortal = eventDetails.event.target?.closest(
         "div[data-radix-popper-content-wrapper]"
       );
       if (triggeredFromRadixPortal) {
@@ -100,9 +98,9 @@ const Drawer = React__namespace.forwardRef(function Drawer2(props, ref) {
         return;
       }
     }
-    setOpen == null ? void 0 : setOpen(open2);
+    setOpen?.(open2);
     if (open2 === false) {
-      onClose == null ? void 0 : onClose();
+      onClose?.();
     }
   };
   React__namespace.useEffect(() => {

package/dist/components/Drawer/Drawer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.cjs","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\n\nimport {\n    Actions,\n    Footer,\n    InnerContent,\n    DrawerInnerContentProps,\n    DrawerFooterProps,\n    DrawerTitleProps,\n    Title,\n    Close,\n    Content,\n    DrawerContentProps,\n    DrawerCloseProps,\n} from './components/Content';\nimport { GroupProps } from '../Group/Group';\nimport { DrawerTriggerProps, Trigger } from './components/Trigger';\nimport { DrawerContext, OnOpenHandle } from './Context';\nimport { DrawerSize, DrawerVariant } from './types';\nimport { useDrawerStack } from './useDrawerStack';\nimport { useControlled } from '../../hooks/useControlled';\n\nexport type DrawerTexts = {\n    /**\n     * Aria-label for back icon button in drawer.\n     */\n    back: string;\n    /**\n     * Aria-label for close icon button in drawer.\n     */\n    close: string;\n};\n\nexport type DrawerProps = {\n    children: React.ReactNode | React.ReactNode[];\n    /** Size of the drawer. This is the recommended way to set a size for drawer component. */\n    size?: DrawerSize;\n    /** Set whether the drawer is open by default or not, use when not providing a trigger  */\n    defaultOpen?: boolean;\n    /** Handles the back button click and determines its visibility */\n    onClickBack?: () => void;\n    /** Handler called when drawer closes by user interaction */\n    onClose?: () => void;\n    /** Called when the drawer opens or closes, must be used in conjunction with open  */\n    onChange?: (open: boolean) => void;\n    /** Control the open state of the drawer from outside the component  */\n    open?: boolean;\n    /** A trigger to be used for the drawer, should not be set if `children` already contains a trigger */\n    trigger?: JSX.Element;\n    /** Triggers when resizing, can be throttled or debounced for better performances */\n    onResize?: (delta: number) => void;\n    /** Rendering variant of the drawer */\n    variant?: DrawerVariant;\n    /** className for children container, needed for embedded version, in cases where we might need to control children height */\n    className?: string;\n    /** When 'true' renders close button in topr right cornenr of drawer content */\n    showCloseButton?: boolean;\n    /** Target specific named outlet allowing you to render a drawer to a specific outlet */\n    outletName?: string;\n};\n\nexport type OutletProps = React.HTMLAttributes<HTMLDivElement> & {\n    name?: string;\n};\n\nconst DEFAULT_OUTLET_NAME = 'default';\n\nconst Outlet = React.forwardRef(function Outlet(props: OutletProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('h-full ml-auto overflow-hidden flex-shrink-0', props.className);\n    return (\n        <div\n            {...props}\n            className={className}\n            data-taco=\"drawer-outlet\"\n            data-taco-outlet-name={props.name ?? DEFAULT_OUTLET_NAME}\n            ref={ref}\n        />\n    );\n});\n\nexport type ForwardedDrawerWithStatics = React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLElement>> & {\n    Trigger: React.ForwardRefExoticComponent<DrawerTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    Content: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;\n    InnerContent: React.ForwardRefExoticComponent<DrawerInnerContentProps & React.RefAttributes<HTMLDivElement>>;\n    Title: React.ForwardRefExoticComponent<DrawerTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n    Footer: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;\n    Close: React.ForwardRefExoticComponent<DrawerCloseProps & React.RefAttributes<HTMLButtonElement>>;\n    Actions: React.ForwardRefExoticComponent<GroupProps & React.RefAttributes<HTMLDivElement>>;\n    Outlet: React.ForwardRefExoticComponent<OutletProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Drawer = React.forwardRef(function Drawer(props: DrawerProps, ref: React.Ref<HTMLElement>) {\n    const {\n        onChange,\n        variant = 'embedded',\n        className: _1,\n        onResize,\n        onClose,\n        onClickBack,\n        size = 'md',\n        trigger,\n        children,\n        showCloseButton = true,\n        outletName,\n        ...otherProps\n    } = props;\n\n    const [outlet, setOutlet] = React.useState<HTMLElement>();\n    const containerRef = React.useRef<OnOpenHandle>(null);\n\n    const [open, setOpen] = useControlled<boolean>({\n        value: props.open,\n        defaultValue: props.defaultOpen ?? false,\n        onChange,\n    });\n\n    useDrawerStack({\n        open,\n        setOpen,\n        onClose,\n        onOpen: () => {\n            // sets container width for resizing.\n            containerRef.current?.onOpen();\n        },\n    });\n\n    const context = React.useMemo(\n        () => ({\n            containerRef,\n            onClickBack,\n            onClose,\n            onResize,\n            props: otherProps,\n            size,\n            ref,\n            variant,\n            showCloseButton,\n            outlet,\n        }),\n        [containerRef, otherProps, variant, onResize, onClose, size, showCloseButton, outlet, onClickBack]\n    );\n\n    const handleOpenChange = (open: boolean, eventDetails: DrawerPrimitive.Root.ChangeEventDetails) => {\n        if (eventDetails.reason === 'escape-key') {\n            const triggeredFromRadixPortal = (eventDetails.event.target as HTMLElement)?.closest(\n                'div[data-radix-popper-content-wrapper]'\n            );\n\n            if (triggeredFromRadixPortal) {\n                // TODO: This could be removed when all radix overlays are replaced with base UI components, but currently it propagates through and closes the dialog.\n\n                // cancel closing the dialog\n                eventDetails.cancel();\n                // propagate to allow the radix overlay to close\n                eventDetails.allowPropagation();\n                return;\n            } else if (variant === 'embedded') {\n                eventDetails.cancel();\n                return;\n            }\n        }\n\n        setOpen?.(open);\n\n        if (open === false) {\n            onClose?.();\n        }\n    };\n\n    React.useEffect(() => {\n        const outletSelector = `[data-taco=\"drawer-outlet\"][data-taco-outlet-name=\"${outletName ?? DEFAULT_OUTLET_NAME}\"]`;\n        const outletElement = document.querySelector<HTMLElement>(outletSelector) ?? document.body;\n        setOutlet(outletElement);\n    }, [outletName]);\n\n    return (\n        <DrawerContext.Provider value={context}>\n            <DrawerPrimitive.Root\n                disablePointerDismissal={variant === 'embedded'}\n                modal={variant === 'overlay'}\n                open={open}\n                onOpenChange={handleOpenChange}\n                swipeDirection=\"right\">\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {children}\n            </DrawerPrimitive.Root>\n        </DrawerContext.Provider>\n    );\n}) as ForwardedDrawerWithStatics;\n\nDrawer.Trigger = Trigger;\nDrawer.Content = Content;\nDrawer.InnerContent = InnerContent;\nDrawer.Title = Title;\nDrawer.Footer = Footer;\nDrawer.Close = Close;\nDrawer.Actions = Actions;\nDrawer.Outlet = Outlet;\n"],"names":["React","Outlet","Drawer","useControlled","useDrawerStack","open","DrawerContext","DrawerPrimitive","Trigger","Content","InnerContent","Title","Footer","Close","Actions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEA,MAAM,sBAAsB;AAE5B,MAAM,SAASA,iBAAM,WAAW,SAASC,QAAO,OAAoB,KAAgC;AAChG,QAAM,YAAY,GAAG,gDAAgD,MAAM,SAAS;AAEhF,SAAAD,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA,aAAU;AAAA,MACV,yBAAuB,MAAM,QAAQ;AAAA,MACrC;AAAA,IAAA;AAAA,EACJ;AAER,CAAC;AAaM,MAAM,SAASA,iBAAM,WAAW,SAASE,QAAO,OAAoB,KAA6B;AAC9F,QAAA;AAAA,IACF;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AAEJ,QAAM,CAAC,QAAQ,SAAS,IAAIF,iBAAM,SAAsB;AAClD,QAAA,eAAeA,iBAAM,OAAqB,IAAI;AAEpD,QAAM,CAAC,MAAM,OAAO,IAAIG,4BAAuB;AAAA,IAC3C,OAAO,MAAM;AAAA,IACb,cAAc,MAAM,eAAe;AAAA,IACnC;AAAA,EAAA,CACH;AAEcC,gCAAA;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ,MAAM;;AAEV,yBAAa,YAAb,mBAAsB;AAAA,IAAO;AAAA,EACjC,CACH;AAED,QAAM,UAAUJ,iBAAM;AAAA,IAClB,OAAO;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEJ,CAAC,cAAc,YAAY,SAAS,UAAU,SAAS,MAAM,iBAAiB,QAAQ,WAAW;AAAA,EACrG;AAEM,QAAA,mBAAmB,CAACK,OAAe,iBAA0D;;AAC3F,QAAA,aAAa,WAAW,cAAc;AAChC,YAAA,4BAA4B,kBAAa,MAAM,WAAnB,mBAA2C;AAAA,QACzE;AAAA;AAGJ,UAAI,0BAA0B;AAI1B,qBAAa,OAAO;AAEpB,qBAAa,iBAAiB;AAC9B;AAAA,MAAA,WACO,YAAY,YAAY;AAC/B,qBAAa,OAAO;AACpB;AAAA,MAAA;AAAA,IACJ;AAGJ,uCAAUA;AAEV,QAAIA,UAAS,OAAO;AACN;AAAA,IAAA;AAAA,EAElB;AAEAL,mBAAM,UAAU,MAAM;AACZ,UAAA,iBAAiB,sDAAsD,cAAc,mBAAmB;AAC9G,UAAM,gBAAgB,SAAS,cAA2B,cAAc,KAAK,SAAS;AACtF,cAAU,aAAa;AAAA,EAAA,GACxB,CAAC,UAAU,CAAC;AAEf,SACKA,iCAAA,cAAAM,sBAAc,UAAd,EAAuB,OAAO,WAC3BN,iCAAA;AAAA,IAACO,OAAAA,OAAgB;AAAA,IAAhB;AAAA,MACG,yBAAyB,YAAY;AAAA,MACrC,OAAO,YAAY;AAAA,MACnB;AAAA,MACA,cAAc;AAAA,MACd,gBAAe;AAAA,IAAA;AAAA,IACd,WAAYP,iCAAA,cAAAQ,QAAAA,SAAA,MAAS,OAAQ;AAAA,IAC7B;AAAA,EAAA,CAET;AAER,CAAC;AAED,OAAO,UAAUA,QAAA;AACjB,OAAO,UAAUC,QAAA;AACjB,OAAO,eAAeC,QAAA;AACtB,OAAO,QAAQC,QAAA;AACf,OAAO,SAASC,QAAA;AAChB,OAAO,QAAQC,QAAA;AACf,OAAO,UAAUC,QAAA;AACjB,OAAO,SAAS;;"}
+{"version":3,"file":"Drawer.cjs","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\n\nimport {\n    Actions,\n    Footer,\n    InnerContent,\n    DrawerInnerContentProps,\n    DrawerFooterProps,\n    DrawerTitleProps,\n    Title,\n    Close,\n    Content,\n    DrawerContentProps,\n    DrawerCloseProps,\n} from './components/Content';\nimport { GroupProps } from '../Group/Group';\nimport { DrawerTriggerProps, Trigger } from './components/Trigger';\nimport { DrawerContext, OnOpenHandle } from './Context';\nimport { DrawerSize, DrawerVariant } from './types';\nimport { useDrawerStack } from './useDrawerStack';\nimport { useControlled } from '../../hooks/useControlled';\n\nexport type DrawerTexts = {\n    /**\n     * Aria-label for back icon button in drawer.\n     */\n    back: string;\n    /**\n     * Aria-label for close icon button in drawer.\n     */\n    close: string;\n};\n\nexport type DrawerProps = {\n    children: React.ReactNode | React.ReactNode[];\n    /** Size of the drawer. This is the recommended way to set a size for drawer component. */\n    size?: DrawerSize;\n    /** Set whether the drawer is open by default or not, use when not providing a trigger  */\n    defaultOpen?: boolean;\n    /** Handles the back button click and determines its visibility */\n    onClickBack?: () => void;\n    /** Handler called when drawer closes by user interaction */\n    onClose?: () => void;\n    /** Called when the drawer opens or closes, must be used in conjunction with open  */\n    onChange?: (open: boolean) => void;\n    /** Control the open state of the drawer from outside the component  */\n    open?: boolean;\n    /** A trigger to be used for the drawer, should not be set if `children` already contains a trigger */\n    trigger?: React.JSX.Element;\n    /** Triggers when resizing, can be throttled or debounced for better performances */\n    onResize?: (delta: number) => void;\n    /** Rendering variant of the drawer */\n    variant?: DrawerVariant;\n    /** className for children container, needed for embedded version, in cases where we might need to control children height */\n    className?: string;\n    /** When 'true' renders close button in topr right cornenr of drawer content */\n    showCloseButton?: boolean;\n    /** Target specific named outlet allowing you to render a drawer to a specific outlet */\n    outletName?: string;\n};\n\nexport type OutletProps = React.HTMLAttributes<HTMLDivElement> & {\n    name?: string;\n};\n\nconst DEFAULT_OUTLET_NAME = 'default';\n\nconst Outlet = React.forwardRef(function Outlet(props: OutletProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('ml-auto h-full flex-shrink-0 overflow-hidden', props.className);\n    return (\n        <div\n            {...props}\n            className={className}\n            data-taco=\"drawer-outlet\"\n            data-taco-outlet-name={props.name ?? DEFAULT_OUTLET_NAME}\n            ref={ref}\n        />\n    );\n});\n\nexport type ForwardedDrawerWithStatics = React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLElement>> & {\n    Trigger: React.ForwardRefExoticComponent<DrawerTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    Content: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;\n    InnerContent: React.ForwardRefExoticComponent<DrawerInnerContentProps & React.RefAttributes<HTMLDivElement>>;\n    Title: React.ForwardRefExoticComponent<DrawerTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n    Footer: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;\n    Close: React.ForwardRefExoticComponent<DrawerCloseProps & React.RefAttributes<HTMLButtonElement>>;\n    Actions: React.ForwardRefExoticComponent<GroupProps & React.RefAttributes<HTMLDivElement>>;\n    Outlet: React.ForwardRefExoticComponent<OutletProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Drawer = React.forwardRef(function Drawer(props: DrawerProps, ref: React.Ref<HTMLElement>) {\n    const {\n        onChange,\n        variant = 'embedded',\n        className: _1,\n        onResize,\n        onClose,\n        onClickBack,\n        size = 'md',\n        trigger,\n        children,\n        showCloseButton = true,\n        outletName,\n        ...otherProps\n    } = props;\n\n    const [outlet, setOutlet] = React.useState<HTMLElement>();\n    const containerRef = React.useRef<OnOpenHandle>(null);\n\n    const [open, setOpen] = useControlled<boolean>({\n        value: props.open,\n        defaultValue: props.defaultOpen ?? false,\n        onChange,\n    });\n\n    useDrawerStack({\n        open,\n        setOpen,\n        onClose,\n        onOpen: () => {\n            // sets container width for resizing.\n            containerRef.current?.onOpen();\n        },\n    });\n\n    const context = React.useMemo(\n        () => ({\n            containerRef,\n            onClickBack,\n            onClose,\n            onResize,\n            props: otherProps,\n            size,\n            ref,\n            variant,\n            showCloseButton,\n            outlet,\n        }),\n        [containerRef, otherProps, variant, onResize, onClose, size, showCloseButton, outlet, onClickBack]\n    );\n\n    const handleOpenChange = (open: boolean, eventDetails: DrawerPrimitive.Root.ChangeEventDetails) => {\n        if (eventDetails.reason === 'escape-key') {\n            const triggeredFromRadixPortal = (eventDetails.event.target as HTMLElement)?.closest(\n                'div[data-radix-popper-content-wrapper]'\n            );\n\n            if (triggeredFromRadixPortal) {\n                // TODO: This could be removed when all radix overlays are replaced with base UI components, but currently it propagates through and closes the dialog.\n\n                // cancel closing the dialog\n                eventDetails.cancel();\n                // propagate to allow the radix overlay to close\n                eventDetails.allowPropagation();\n                return;\n            } else if (variant === 'embedded') {\n                eventDetails.cancel();\n                return;\n            }\n        }\n\n        setOpen?.(open);\n\n        if (open === false) {\n            onClose?.();\n        }\n    };\n\n    React.useEffect(() => {\n        const outletSelector = `[data-taco=\"drawer-outlet\"][data-taco-outlet-name=\"${outletName ?? DEFAULT_OUTLET_NAME}\"]`;\n        const outletElement = document.querySelector<HTMLElement>(outletSelector) ?? document.body;\n        setOutlet(outletElement);\n    }, [outletName]);\n\n    return (\n        <DrawerContext.Provider value={context}>\n            <DrawerPrimitive.Root\n                disablePointerDismissal={variant === 'embedded'}\n                modal={variant === 'overlay'}\n                open={open}\n                onOpenChange={handleOpenChange}\n                swipeDirection=\"right\">\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {children}\n            </DrawerPrimitive.Root>\n        </DrawerContext.Provider>\n    );\n}) as ForwardedDrawerWithStatics;\n\nDrawer.Trigger = Trigger;\nDrawer.Content = Content;\nDrawer.InnerContent = InnerContent;\nDrawer.Title = Title;\nDrawer.Footer = Footer;\nDrawer.Close = Close;\nDrawer.Actions = Actions;\nDrawer.Outlet = Outlet;\n"],"names":["React","Outlet","Drawer","useControlled","useDrawerStack","open","DrawerContext","DrawerPrimitive","Trigger","Content","InnerContent","Title","Footer","Close","Actions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEA,MAAM,sBAAsB;AAE5B,MAAM,SAASA,iBAAM,WAAW,SAASC,QAAO,OAAoB,KAAgC;AAChG,QAAM,YAAY,GAAG,gDAAgD,MAAM,SAAS;AACpF,SACID,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA,aAAU;AAAA,MACV,yBAAuB,MAAM,QAAQ;AAAA,MACrC;AAAA,IAAA;AAAA,EAAA;AAGZ,CAAC;AAaM,MAAM,SAASA,iBAAM,WAAW,SAASE,QAAO,OAAoB,KAA6B;AACpG,QAAM;AAAA,IACF;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AAEJ,QAAM,CAAC,QAAQ,SAAS,IAAIF,iBAAM,SAAA;AAClC,QAAM,eAAeA,iBAAM,OAAqB,IAAI;AAEpD,QAAM,CAAC,MAAM,OAAO,IAAIG,4BAAuB;AAAA,IAC3C,OAAO,MAAM;AAAA,IACb,cAAc,MAAM,eAAe;AAAA,IACnC;AAAA,EAAA,CACH;AAEDC,gCAAe;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ,MAAM;AAEV,mBAAa,SAAS,OAAA;AAAA,IAC1B;AAAA,EAAA,CACH;AAED,QAAM,UAAUJ,iBAAM;AAAA,IAClB,OAAO;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEJ,CAAC,cAAc,YAAY,SAAS,UAAU,SAAS,MAAM,iBAAiB,QAAQ,WAAW;AAAA,EAAA;AAGrG,QAAM,mBAAmB,CAACK,OAAe,iBAA0D;AAC/F,QAAI,aAAa,WAAW,cAAc;AACtC,YAAM,2BAA4B,aAAa,MAAM,QAAwB;AAAA,QACzE;AAAA,MAAA;AAGJ,UAAI,0BAA0B;AAI1B,qBAAa,OAAA;AAEb,qBAAa,iBAAA;AACb;AAAA,MACJ,WAAW,YAAY,YAAY;AAC/B,qBAAa,OAAA;AACb;AAAA,MACJ;AAAA,IACJ;AAEA,cAAUA,KAAI;AAEd,QAAIA,UAAS,OAAO;AAChB,gBAAA;AAAA,IACJ;AAAA,EACJ;AAEAL,mBAAM,UAAU,MAAM;AAClB,UAAM,iBAAiB,sDAAsD,cAAc,mBAAmB;AAC9G,UAAM,gBAAgB,SAAS,cAA2B,cAAc,KAAK,SAAS;AACtF,cAAU,aAAa;AAAA,EAC3B,GAAG,CAAC,UAAU,CAAC;AAEf,SACIA,iCAAA,cAACM,sBAAc,UAAd,EAAuB,OAAO,WAC3BN,iCAAA;AAAA,IAACO,OAAAA,OAAgB;AAAA,IAAhB;AAAA,MACG,yBAAyB,YAAY;AAAA,MACrC,OAAO,YAAY;AAAA,MACnB;AAAA,MACA,cAAc;AAAA,MACd,gBAAe;AAAA,IAAA;AAAA,IACd,WAAWP,iCAAA,cAACQ,QAAAA,SAAA,MAAS,OAAQ;AAAA,IAC7B;AAAA,EAAA,CAET;AAER,CAAC;AAED,OAAO,UAAUA,QAAAA;AACjB,OAAO,UAAUC,QAAAA;AACjB,OAAO,eAAeC,QAAAA;AACtB,OAAO,QAAQC,QAAAA;AACf,OAAO,SAASC,QAAAA;AAChB,OAAO,QAAQC,QAAAA;AACf,OAAO,UAAUC,QAAAA;AACjB,OAAO,SAAS;;"}

package/dist/components/Drawer/Drawer.d.ts

@@ -28,7 +28,7 @@ export type DrawerProps = {
     /** Control the open state of the drawer from outside the component  */
     open?: boolean;
     /** A trigger to be used for the drawer, should not be set if `children` already contains a trigger */
-    trigger?: JSX.Element;
+    trigger?: React.JSX.Element;
     /** Triggers when resizing, can be throttled or debounced for better performances */
     onResize?: (delta: number) => void;
     /** Rendering variant of the drawer */

package/dist/components/Drawer/Drawer.js

@@ -8,7 +8,7 @@ import { useDrawerStack } from "./useDrawerStack.js";
 import { useControlled } from "../../hooks/useControlled.js";
 const DEFAULT_OUTLET_NAME = "default";
 const Outlet = React.forwardRef(function Outlet2(props, ref) {
-  const className = cn("h-full ml-auto overflow-hidden flex-shrink-0", props.className);
+  const className = cn("ml-auto h-full flex-shrink-0 overflow-hidden", props.className);
   return /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -47,8 +47,7 @@ const Drawer = React.forwardRef(function Drawer2(props, ref) {
     setOpen,
     onClose,
     onOpen: () => {
-      var _a;
-      (_a = containerRef.current) == null ? void 0 : _a.onOpen();
+      containerRef.current?.onOpen();
     }
   });
   const context = React.useMemo(
@@ -67,9 +66,8 @@ const Drawer = React.forwardRef(function Drawer2(props, ref) {
     [containerRef, otherProps, variant, onResize, onClose, size, showCloseButton, outlet, onClickBack]
   );
   const handleOpenChange = (open2, eventDetails) => {
-    var _a;
     if (eventDetails.reason === "escape-key") {
-      const triggeredFromRadixPortal = (_a = eventDetails.event.target) == null ? void 0 : _a.closest(
+      const triggeredFromRadixPortal = eventDetails.event.target?.closest(
         "div[data-radix-popper-content-wrapper]"
       );
       if (triggeredFromRadixPortal) {
@@ -81,9 +79,9 @@ const Drawer = React.forwardRef(function Drawer2(props, ref) {
         return;
       }
     }
-    setOpen == null ? void 0 : setOpen(open2);
+    setOpen?.(open2);
     if (open2 === false) {
-      onClose == null ? void 0 : onClose();
+      onClose?.();
     }
   };
   React.useEffect(() => {

package/dist/components/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\n\nimport {\n    Actions,\n    Footer,\n    InnerContent,\n    DrawerInnerContentProps,\n    DrawerFooterProps,\n    DrawerTitleProps,\n    Title,\n    Close,\n    Content,\n    DrawerContentProps,\n    DrawerCloseProps,\n} from './components/Content';\nimport { GroupProps } from '../Group/Group';\nimport { DrawerTriggerProps, Trigger } from './components/Trigger';\nimport { DrawerContext, OnOpenHandle } from './Context';\nimport { DrawerSize, DrawerVariant } from './types';\nimport { useDrawerStack } from './useDrawerStack';\nimport { useControlled } from '../../hooks/useControlled';\n\nexport type DrawerTexts = {\n    /**\n     * Aria-label for back icon button in drawer.\n     */\n    back: string;\n    /**\n     * Aria-label for close icon button in drawer.\n     */\n    close: string;\n};\n\nexport type DrawerProps = {\n    children: React.ReactNode | React.ReactNode[];\n    /** Size of the drawer. This is the recommended way to set a size for drawer component. */\n    size?: DrawerSize;\n    /** Set whether the drawer is open by default or not, use when not providing a trigger  */\n    defaultOpen?: boolean;\n    /** Handles the back button click and determines its visibility */\n    onClickBack?: () => void;\n    /** Handler called when drawer closes by user interaction */\n    onClose?: () => void;\n    /** Called when the drawer opens or closes, must be used in conjunction with open  */\n    onChange?: (open: boolean) => void;\n    /** Control the open state of the drawer from outside the component  */\n    open?: boolean;\n    /** A trigger to be used for the drawer, should not be set if `children` already contains a trigger */\n    trigger?: JSX.Element;\n    /** Triggers when resizing, can be throttled or debounced for better performances */\n    onResize?: (delta: number) => void;\n    /** Rendering variant of the drawer */\n    variant?: DrawerVariant;\n    /** className for children container, needed for embedded version, in cases where we might need to control children height */\n    className?: string;\n    /** When 'true' renders close button in topr right cornenr of drawer content */\n    showCloseButton?: boolean;\n    /** Target specific named outlet allowing you to render a drawer to a specific outlet */\n    outletName?: string;\n};\n\nexport type OutletProps = React.HTMLAttributes<HTMLDivElement> & {\n    name?: string;\n};\n\nconst DEFAULT_OUTLET_NAME = 'default';\n\nconst Outlet = React.forwardRef(function Outlet(props: OutletProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('h-full ml-auto overflow-hidden flex-shrink-0', props.className);\n    return (\n        <div\n            {...props}\n            className={className}\n            data-taco=\"drawer-outlet\"\n            data-taco-outlet-name={props.name ?? DEFAULT_OUTLET_NAME}\n            ref={ref}\n        />\n    );\n});\n\nexport type ForwardedDrawerWithStatics = React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLElement>> & {\n    Trigger: React.ForwardRefExoticComponent<DrawerTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    Content: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;\n    InnerContent: React.ForwardRefExoticComponent<DrawerInnerContentProps & React.RefAttributes<HTMLDivElement>>;\n    Title: React.ForwardRefExoticComponent<DrawerTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n    Footer: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;\n    Close: React.ForwardRefExoticComponent<DrawerCloseProps & React.RefAttributes<HTMLButtonElement>>;\n    Actions: React.ForwardRefExoticComponent<GroupProps & React.RefAttributes<HTMLDivElement>>;\n    Outlet: React.ForwardRefExoticComponent<OutletProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Drawer = React.forwardRef(function Drawer(props: DrawerProps, ref: React.Ref<HTMLElement>) {\n    const {\n        onChange,\n        variant = 'embedded',\n        className: _1,\n        onResize,\n        onClose,\n        onClickBack,\n        size = 'md',\n        trigger,\n        children,\n        showCloseButton = true,\n        outletName,\n        ...otherProps\n    } = props;\n\n    const [outlet, setOutlet] = React.useState<HTMLElement>();\n    const containerRef = React.useRef<OnOpenHandle>(null);\n\n    const [open, setOpen] = useControlled<boolean>({\n        value: props.open,\n        defaultValue: props.defaultOpen ?? false,\n        onChange,\n    });\n\n    useDrawerStack({\n        open,\n        setOpen,\n        onClose,\n        onOpen: () => {\n            // sets container width for resizing.\n            containerRef.current?.onOpen();\n        },\n    });\n\n    const context = React.useMemo(\n        () => ({\n            containerRef,\n            onClickBack,\n            onClose,\n            onResize,\n            props: otherProps,\n            size,\n            ref,\n            variant,\n            showCloseButton,\n            outlet,\n        }),\n        [containerRef, otherProps, variant, onResize, onClose, size, showCloseButton, outlet, onClickBack]\n    );\n\n    const handleOpenChange = (open: boolean, eventDetails: DrawerPrimitive.Root.ChangeEventDetails) => {\n        if (eventDetails.reason === 'escape-key') {\n            const triggeredFromRadixPortal = (eventDetails.event.target as HTMLElement)?.closest(\n                'div[data-radix-popper-content-wrapper]'\n            );\n\n            if (triggeredFromRadixPortal) {\n                // TODO: This could be removed when all radix overlays are replaced with base UI components, but currently it propagates through and closes the dialog.\n\n                // cancel closing the dialog\n                eventDetails.cancel();\n                // propagate to allow the radix overlay to close\n                eventDetails.allowPropagation();\n                return;\n            } else if (variant === 'embedded') {\n                eventDetails.cancel();\n                return;\n            }\n        }\n\n        setOpen?.(open);\n\n        if (open === false) {\n            onClose?.();\n        }\n    };\n\n    React.useEffect(() => {\n        const outletSelector = `[data-taco=\"drawer-outlet\"][data-taco-outlet-name=\"${outletName ?? DEFAULT_OUTLET_NAME}\"]`;\n        const outletElement = document.querySelector<HTMLElement>(outletSelector) ?? document.body;\n        setOutlet(outletElement);\n    }, [outletName]);\n\n    return (\n        <DrawerContext.Provider value={context}>\n            <DrawerPrimitive.Root\n                disablePointerDismissal={variant === 'embedded'}\n                modal={variant === 'overlay'}\n                open={open}\n                onOpenChange={handleOpenChange}\n                swipeDirection=\"right\">\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {children}\n            </DrawerPrimitive.Root>\n        </DrawerContext.Provider>\n    );\n}) as ForwardedDrawerWithStatics;\n\nDrawer.Trigger = Trigger;\nDrawer.Content = Content;\nDrawer.InnerContent = InnerContent;\nDrawer.Title = Title;\nDrawer.Footer = Footer;\nDrawer.Close = Close;\nDrawer.Actions = Actions;\nDrawer.Outlet = Outlet;\n"],"names":["Outlet","Drawer","open","DrawerPrimitive"],"mappings":";;;;;;;;AAmEA,MAAM,sBAAsB;AAE5B,MAAM,SAAS,MAAM,WAAW,SAASA,QAAO,OAAoB,KAAgC;AAChG,QAAM,YAAY,GAAG,gDAAgD,MAAM,SAAS;AAEhF,SAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA,aAAU;AAAA,MACV,yBAAuB,MAAM,QAAQ;AAAA,MACrC;AAAA,IAAA;AAAA,EACJ;AAER,CAAC;AAaM,MAAM,SAAS,MAAM,WAAW,SAASC,QAAO,OAAoB,KAA6B;AAC9F,QAAA;AAAA,IACF;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AAEJ,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAsB;AAClD,QAAA,eAAe,MAAM,OAAqB,IAAI;AAEpD,QAAM,CAAC,MAAM,OAAO,IAAI,cAAuB;AAAA,IAC3C,OAAO,MAAM;AAAA,IACb,cAAc,MAAM,eAAe;AAAA,IACnC;AAAA,EAAA,CACH;AAEc,iBAAA;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ,MAAM;;AAEV,yBAAa,YAAb,mBAAsB;AAAA,IAAO;AAAA,EACjC,CACH;AAED,QAAM,UAAU,MAAM;AAAA,IAClB,OAAO;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEJ,CAAC,cAAc,YAAY,SAAS,UAAU,SAAS,MAAM,iBAAiB,QAAQ,WAAW;AAAA,EACrG;AAEM,QAAA,mBAAmB,CAACC,OAAe,iBAA0D;;AAC3F,QAAA,aAAa,WAAW,cAAc;AAChC,YAAA,4BAA4B,kBAAa,MAAM,WAAnB,mBAA2C;AAAA,QACzE;AAAA;AAGJ,UAAI,0BAA0B;AAI1B,qBAAa,OAAO;AAEpB,qBAAa,iBAAiB;AAC9B;AAAA,MAAA,WACO,YAAY,YAAY;AAC/B,qBAAa,OAAO;AACpB;AAAA,MAAA;AAAA,IACJ;AAGJ,uCAAUA;AAEV,QAAIA,UAAS,OAAO;AACN;AAAA,IAAA;AAAA,EAElB;AAEA,QAAM,UAAU,MAAM;AACZ,UAAA,iBAAiB,sDAAsD,cAAc,mBAAmB;AAC9G,UAAM,gBAAgB,SAAS,cAA2B,cAAc,KAAK,SAAS;AACtF,cAAU,aAAa;AAAA,EAAA,GACxB,CAAC,UAAU,CAAC;AAEf,SACK,sBAAA,cAAA,cAAc,UAAd,EAAuB,OAAO,WAC3B,sBAAA;AAAA,IAACC,SAAgB;AAAA,IAAhB;AAAA,MACG,yBAAyB,YAAY;AAAA,MACrC,OAAO,YAAY;AAAA,MACnB;AAAA,MACA,cAAc;AAAA,MACd,gBAAe;AAAA,IAAA;AAAA,IACd,WAAY,sBAAA,cAAA,SAAA,MAAS,OAAQ;AAAA,IAC7B;AAAA,EAAA,CAET;AAER,CAAC;AAED,OAAO,UAAU;AACjB,OAAO,UAAU;AACjB,OAAO,eAAe;AACtB,OAAO,QAAQ;AACf,OAAO,SAAS;AAChB,OAAO,QAAQ;AACf,OAAO,UAAU;AACjB,OAAO,SAAS;"}
+{"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\n\nimport {\n    Actions,\n    Footer,\n    InnerContent,\n    DrawerInnerContentProps,\n    DrawerFooterProps,\n    DrawerTitleProps,\n    Title,\n    Close,\n    Content,\n    DrawerContentProps,\n    DrawerCloseProps,\n} from './components/Content';\nimport { GroupProps } from '../Group/Group';\nimport { DrawerTriggerProps, Trigger } from './components/Trigger';\nimport { DrawerContext, OnOpenHandle } from './Context';\nimport { DrawerSize, DrawerVariant } from './types';\nimport { useDrawerStack } from './useDrawerStack';\nimport { useControlled } from '../../hooks/useControlled';\n\nexport type DrawerTexts = {\n    /**\n     * Aria-label for back icon button in drawer.\n     */\n    back: string;\n    /**\n     * Aria-label for close icon button in drawer.\n     */\n    close: string;\n};\n\nexport type DrawerProps = {\n    children: React.ReactNode | React.ReactNode[];\n    /** Size of the drawer. This is the recommended way to set a size for drawer component. */\n    size?: DrawerSize;\n    /** Set whether the drawer is open by default or not, use when not providing a trigger  */\n    defaultOpen?: boolean;\n    /** Handles the back button click and determines its visibility */\n    onClickBack?: () => void;\n    /** Handler called when drawer closes by user interaction */\n    onClose?: () => void;\n    /** Called when the drawer opens or closes, must be used in conjunction with open  */\n    onChange?: (open: boolean) => void;\n    /** Control the open state of the drawer from outside the component  */\n    open?: boolean;\n    /** A trigger to be used for the drawer, should not be set if `children` already contains a trigger */\n    trigger?: React.JSX.Element;\n    /** Triggers when resizing, can be throttled or debounced for better performances */\n    onResize?: (delta: number) => void;\n    /** Rendering variant of the drawer */\n    variant?: DrawerVariant;\n    /** className for children container, needed for embedded version, in cases where we might need to control children height */\n    className?: string;\n    /** When 'true' renders close button in topr right cornenr of drawer content */\n    showCloseButton?: boolean;\n    /** Target specific named outlet allowing you to render a drawer to a specific outlet */\n    outletName?: string;\n};\n\nexport type OutletProps = React.HTMLAttributes<HTMLDivElement> & {\n    name?: string;\n};\n\nconst DEFAULT_OUTLET_NAME = 'default';\n\nconst Outlet = React.forwardRef(function Outlet(props: OutletProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('ml-auto h-full flex-shrink-0 overflow-hidden', props.className);\n    return (\n        <div\n            {...props}\n            className={className}\n            data-taco=\"drawer-outlet\"\n            data-taco-outlet-name={props.name ?? DEFAULT_OUTLET_NAME}\n            ref={ref}\n        />\n    );\n});\n\nexport type ForwardedDrawerWithStatics = React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLElement>> & {\n    Trigger: React.ForwardRefExoticComponent<DrawerTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    Content: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;\n    InnerContent: React.ForwardRefExoticComponent<DrawerInnerContentProps & React.RefAttributes<HTMLDivElement>>;\n    Title: React.ForwardRefExoticComponent<DrawerTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n    Footer: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;\n    Close: React.ForwardRefExoticComponent<DrawerCloseProps & React.RefAttributes<HTMLButtonElement>>;\n    Actions: React.ForwardRefExoticComponent<GroupProps & React.RefAttributes<HTMLDivElement>>;\n    Outlet: React.ForwardRefExoticComponent<OutletProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Drawer = React.forwardRef(function Drawer(props: DrawerProps, ref: React.Ref<HTMLElement>) {\n    const {\n        onChange,\n        variant = 'embedded',\n        className: _1,\n        onResize,\n        onClose,\n        onClickBack,\n        size = 'md',\n        trigger,\n        children,\n        showCloseButton = true,\n        outletName,\n        ...otherProps\n    } = props;\n\n    const [outlet, setOutlet] = React.useState<HTMLElement>();\n    const containerRef = React.useRef<OnOpenHandle>(null);\n\n    const [open, setOpen] = useControlled<boolean>({\n        value: props.open,\n        defaultValue: props.defaultOpen ?? false,\n        onChange,\n    });\n\n    useDrawerStack({\n        open,\n        setOpen,\n        onClose,\n        onOpen: () => {\n            // sets container width for resizing.\n            containerRef.current?.onOpen();\n        },\n    });\n\n    const context = React.useMemo(\n        () => ({\n            containerRef,\n            onClickBack,\n            onClose,\n            onResize,\n            props: otherProps,\n            size,\n            ref,\n            variant,\n            showCloseButton,\n            outlet,\n        }),\n        [containerRef, otherProps, variant, onResize, onClose, size, showCloseButton, outlet, onClickBack]\n    );\n\n    const handleOpenChange = (open: boolean, eventDetails: DrawerPrimitive.Root.ChangeEventDetails) => {\n        if (eventDetails.reason === 'escape-key') {\n            const triggeredFromRadixPortal = (eventDetails.event.target as HTMLElement)?.closest(\n                'div[data-radix-popper-content-wrapper]'\n            );\n\n            if (triggeredFromRadixPortal) {\n                // TODO: This could be removed when all radix overlays are replaced with base UI components, but currently it propagates through and closes the dialog.\n\n                // cancel closing the dialog\n                eventDetails.cancel();\n                // propagate to allow the radix overlay to close\n                eventDetails.allowPropagation();\n                return;\n            } else if (variant === 'embedded') {\n                eventDetails.cancel();\n                return;\n            }\n        }\n\n        setOpen?.(open);\n\n        if (open === false) {\n            onClose?.();\n        }\n    };\n\n    React.useEffect(() => {\n        const outletSelector = `[data-taco=\"drawer-outlet\"][data-taco-outlet-name=\"${outletName ?? DEFAULT_OUTLET_NAME}\"]`;\n        const outletElement = document.querySelector<HTMLElement>(outletSelector) ?? document.body;\n        setOutlet(outletElement);\n    }, [outletName]);\n\n    return (\n        <DrawerContext.Provider value={context}>\n            <DrawerPrimitive.Root\n                disablePointerDismissal={variant === 'embedded'}\n                modal={variant === 'overlay'}\n                open={open}\n                onOpenChange={handleOpenChange}\n                swipeDirection=\"right\">\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {children}\n            </DrawerPrimitive.Root>\n        </DrawerContext.Provider>\n    );\n}) as ForwardedDrawerWithStatics;\n\nDrawer.Trigger = Trigger;\nDrawer.Content = Content;\nDrawer.InnerContent = InnerContent;\nDrawer.Title = Title;\nDrawer.Footer = Footer;\nDrawer.Close = Close;\nDrawer.Actions = Actions;\nDrawer.Outlet = Outlet;\n"],"names":["Outlet","Drawer","open","DrawerPrimitive"],"mappings":";;;;;;;;AAmEA,MAAM,sBAAsB;AAE5B,MAAM,SAAS,MAAM,WAAW,SAASA,QAAO,OAAoB,KAAgC;AAChG,QAAM,YAAY,GAAG,gDAAgD,MAAM,SAAS;AACpF,SACI,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA,aAAU;AAAA,MACV,yBAAuB,MAAM,QAAQ;AAAA,MACrC;AAAA,IAAA;AAAA,EAAA;AAGZ,CAAC;AAaM,MAAM,SAAS,MAAM,WAAW,SAASC,QAAO,OAAoB,KAA6B;AACpG,QAAM;AAAA,IACF;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AAEJ,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAA;AAClC,QAAM,eAAe,MAAM,OAAqB,IAAI;AAEpD,QAAM,CAAC,MAAM,OAAO,IAAI,cAAuB;AAAA,IAC3C,OAAO,MAAM;AAAA,IACb,cAAc,MAAM,eAAe;AAAA,IACnC;AAAA,EAAA,CACH;AAED,iBAAe;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ,MAAM;AAEV,mBAAa,SAAS,OAAA;AAAA,IAC1B;AAAA,EAAA,CACH;AAED,QAAM,UAAU,MAAM;AAAA,IAClB,OAAO;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEJ,CAAC,cAAc,YAAY,SAAS,UAAU,SAAS,MAAM,iBAAiB,QAAQ,WAAW;AAAA,EAAA;AAGrG,QAAM,mBAAmB,CAACC,OAAe,iBAA0D;AAC/F,QAAI,aAAa,WAAW,cAAc;AACtC,YAAM,2BAA4B,aAAa,MAAM,QAAwB;AAAA,QACzE;AAAA,MAAA;AAGJ,UAAI,0BAA0B;AAI1B,qBAAa,OAAA;AAEb,qBAAa,iBAAA;AACb;AAAA,MACJ,WAAW,YAAY,YAAY;AAC/B,qBAAa,OAAA;AACb;AAAA,MACJ;AAAA,IACJ;AAEA,cAAUA,KAAI;AAEd,QAAIA,UAAS,OAAO;AAChB,gBAAA;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,UAAU,MAAM;AAClB,UAAM,iBAAiB,sDAAsD,cAAc,mBAAmB;AAC9G,UAAM,gBAAgB,SAAS,cAA2B,cAAc,KAAK,SAAS;AACtF,cAAU,aAAa;AAAA,EAC3B,GAAG,CAAC,UAAU,CAAC;AAEf,SACI,sBAAA,cAAC,cAAc,UAAd,EAAuB,OAAO,WAC3B,sBAAA;AAAA,IAACC,SAAgB;AAAA,IAAhB;AAAA,MACG,yBAAyB,YAAY;AAAA,MACrC,OAAO,YAAY;AAAA,MACnB;AAAA,MACA,cAAc;AAAA,MACd,gBAAe;AAAA,IAAA;AAAA,IACd,WAAW,sBAAA,cAAC,SAAA,MAAS,OAAQ;AAAA,IAC7B;AAAA,EAAA,CAET;AAER,CAAC;AAED,OAAO,UAAU;AACjB,OAAO,UAAU;AACjB,OAAO,eAAe;AACtB,OAAO,QAAQ;AACf,OAAO,SAAS;AAChB,OAAO,QAAQ;AACf,OAAO,UAAU;AACjB,OAAO,SAAS;"}

package/dist/components/Drawer/components/Content.cjs

@@ -24,16 +24,15 @@ const Title = React.forwardRef(function DrawerTitle(props, externalRef) {
   const [style, setStyle] = React.useState({});
   const { texts } = Localization.useLocalization();
   const { onClickBack } = Context.useCurrentDrawer();
-  const cName = cn("grow-0 py-4 px-4 justify-self-start mb-0 border-b-[1px] border-gray-200 flex items-start", className);
+  const cName = cn("mb-0 flex grow-0 items-start justify-self-start border-b-[1px] border-gray-200 px-4 py-4", className);
   React.useEffect(() => {
-    var _a;
-    const drawer2 = (_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.closest('[data-taco="drawer"]');
+    const drawer2 = ref?.current?.closest('[data-taco="drawer"]');
     const marginAdjust = 4;
-    const closeButton = (drawer2 == null ? void 0 : drawer2.querySelector(`[aria-label="${texts.drawer.close}"]`)) ?? null;
-    const closeButtonWidth = (closeButton == null ? void 0 : closeButton.offsetWidth) ?? 0;
+    const closeButton = drawer2?.querySelector(`[aria-label="${texts.drawer.close}"]`) ?? null;
+    const closeButtonWidth = closeButton?.offsetWidth ?? 0;
     const closeButtonRightMargin = 8;
-    const actionsWrapper = (drawer2 == null ? void 0 : drawer2.querySelector(`#taco-drawer-actions[data-taco="group"]`)) ?? null;
-    const actionsWrapperWidth = (actionsWrapper == null ? void 0 : actionsWrapper.offsetWidth) ?? 0;
+    const actionsWrapper = drawer2?.querySelector(`#taco-drawer-actions[data-taco="group"]`) ?? null;
+    const actionsWrapperWidth = actionsWrapper?.offsetWidth ?? 0;
     const actionsWrapperRightMargin = 8;
     const marginRight = closeButtonWidth + actionsWrapperWidth + closeButtonRightMargin + actionsWrapperRightMargin - marginAdjust;
     setStyle({ marginRight });
@@ -51,12 +50,12 @@ const Title = React.forwardRef(function DrawerTitle(props, externalRef) {
 });
 const Footer = React.forwardRef(function DrawerFooter(props, ref) {
   const { className: _1, ...otherProps } = props;
-  const cName = cn("mt-auto flex justify-end grow-0 p-4 border-t-[1px] border-gray-200", props.className);
+  const cName = cn("mt-auto flex grow-0 justify-end border-t-[1px] border-gray-200 p-4", props.className);
   return /* @__PURE__ */ React.createElement("div", { ...otherProps, className: cName, ref });
 });
 const Actions = React.forwardRef(function Actions2(props, ref) {
   const { className, ...otherProps } = props;
-  const cName = cn("absolute top-0 right-10 flex gap-2 mr-[2] mt-4", className);
+  const cName = cn("absolute right-10 top-0 mr-[2] mt-4 flex gap-2", className);
   return /* @__PURE__ */ React.createElement("div", { ...otherProps, className: cName, id: "taco-drawer-actions", ref });
 });
 const Close = React.forwardRef(function DrawerClose(props, ref) {
@@ -106,9 +105,8 @@ const Content = React.forwardRef(function Content2(props, externalRef) {
     () => ({
       onOpen: () => {
         requestAnimationFrame(() => {
-          var _a;
           if (contentRef.current) {
-            setContainerWidth((_a = contentRef.current) == null ? void 0 : _a.offsetWidth);
+            setContainerWidth(contentRef.current?.offsetWidth);
           }
         });
       }
@@ -147,7 +145,7 @@ const Content = React.forwardRef(function Content2(props, externalRef) {
   return /* @__PURE__ */ React.createElement(drawer.Drawer.Portal, { container: outlet ?? void 0, className: "h-full" }, variant === "overlay" ? /* @__PURE__ */ React.createElement(
     drawer.Drawer.Backdrop,
     {
-      className: "bg-brand-midnight/[0.3] fixed inset-0 cursor-default overflow-y-auto print:absolute print:overflow-visible",
+      className: "fixed inset-0 cursor-default overflow-y-auto bg-brand-midnight/[0.3] print:absolute print:overflow-visible",
       "data-taco": "backdrop"
     }
   ) : null, /* @__PURE__ */ React.createElement(drawer.Drawer.Viewport, { className: "h-full" }, /* @__PURE__ */ React.createElement(

package/dist/components/Drawer/components/Content.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Content.cjs","sources":["../../../../src/components/Drawer/components/Content.tsx"],"sourcesContent":["import React from 'react';\nimport { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\nimport cn from 'clsx';\n\nimport { GroupProps } from '../../Group/Group';\nimport { LegacyIconButton } from '../../LegacyComponents/IconButton/IconButton';\nimport { useLocalization } from '../../Provider/Localization';\nimport { useCurrentMenu } from '../../Menu/Context';\nimport { useCurrentDrawer } from '../Context';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { getDrawerContainerClassNames, getDrawerContentClassNames, getDrawerDragHandlerClassNames } from '../util';\n\nconst RESIZE_MIN = 360;\nconst RESIZE_MAX = 1000;\n\nexport enum DrawerAnimationDefinition {\n    Visible = 'visible',\n    Hidden = 'hidden',\n}\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n    const close = () => {\n        onClick(new CustomEvent('close'));\n    };\n\n    return children({ close, ref, ...renderProps });\n});\n\nexport type DrawerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DrawerTitle(props: DrawerTitleProps, externalRef: React.Ref<HTMLHeadingElement>) {\n    const { className, children, ...otherProps } = props;\n    const ref = useMergedRef<HTMLHeadingElement>(externalRef);\n    const [style, setStyle] = React.useState({});\n    const { texts } = useLocalization();\n    const { onClickBack } = useCurrentDrawer();\n\n    /**\n     * By design in default drawer version Title has grey separator, but we might have exceptions like Drawer + Tabs scenario,\n     * where we might want to hide the grey separator. For this reason separator was rendered with using of classNames,\n     * so it can be easily overriden in exceptional scenarios.\n     *  */\n    const cName = cn('grow-0 py-4 px-4 justify-self-start mb-0 border-b-[1px] border-gray-200 flex items-start', className);\n\n    React.useEffect(() => {\n        const drawer = ref?.current?.closest('[data-taco=\"drawer\"]');\n\n        // This is the margin amount that we need to deduct from the margins to align with the design\n        const marginAdjust = 4;\n\n        const closeButton: HTMLButtonElement | null = drawer?.querySelector(`[aria-label=\"${texts.drawer.close}\"]`) ?? null;\n        const closeButtonWidth = closeButton?.offsetWidth ?? 0;\n        const closeButtonRightMargin = 8;\n\n        const actionsWrapper: HTMLSpanElement | null = drawer?.querySelector(`#taco-drawer-actions[data-taco=\"group\"]`) ?? null;\n        const actionsWrapperWidth = actionsWrapper?.offsetWidth ?? 0;\n        const actionsWrapperRightMargin = 8;\n\n        const marginRight =\n            closeButtonWidth + actionsWrapperWidth + closeButtonRightMargin + actionsWrapperRightMargin - marginAdjust;\n\n        setStyle({ marginRight });\n    }, [ref, texts.drawer.close]);\n\n    return (\n        <DrawerPrimitive.Title className={cName} {...otherProps} ref={ref}>\n            {onClickBack ? (\n                <LegacyIconButton\n                    appearance=\"discrete\"\n                    aria-label={texts.drawer.back}\n                    className=\"mr-3 text-base\"\n                    icon=\"chevron-left\"\n                    onClick={onClickBack}\n                />\n            ) : null}\n            {\n                // We need to apply the right margin as an inline style instead of using Tailwind CSS.\n                // This is necessary because we are creating styles dynamically at runtime,\n                // and Tailwind doesn't support generating runtime styles.\n            }\n            <span className=\"line-clamp-2 inline-block overflow-y-hidden\" style={style}>\n                {children}\n            </span>\n        </DrawerPrimitive.Title>\n    );\n});\n\nexport type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DrawerFooter(props: DrawerFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const { className: _1, ...otherProps } = props;\n    /**\n     * The same scenario as Title, grey separator rendered using classNames to have posibility to override it.\n     */\n    const cName = cn('mt-auto flex justify-end grow-0 p-4 border-t-[1px] border-gray-200', props.className);\n    return <div {...otherProps} className={cName} ref={ref} />;\n});\n\nexport const Actions = React.forwardRef(function Actions(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { className, ...otherProps } = props;\n    const cName = cn('absolute top-0 right-10 flex gap-2 mr-[2] mt-4', className);\n    // Id is added to identify the actions wrapper inside a useEffect in Dialog.Title\n    return <div {...otherProps} className={cName} id=\"taco-drawer-actions\" ref={ref} />;\n});\n\nexport type DrawerCloseProps = React.HTMLAttributes<HTMLButtonElement> & {\n    children: React.ReactElement;\n};\n\nexport const Close = React.forwardRef(function DrawerClose(props: DrawerCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const { onClose } = useCurrentDrawer();\n\n    const { children, ...restProps } = props;\n\n    return <DrawerPrimitive.Close {...restProps} onClick={onClose} ref={ref} render={children} />;\n});\n\nexport type DrawerInnerContentProps = React.HTMLAttributes<HTMLDivElement>;\n/**\n * It is container component, needed to provide default scrolling behaviour and padding, to simplyfy usage, requested by feature devs.\n * It is optional to use InnerContent component, if consumer need to implement custom behaviour or paddings for inner content,\n * then it's simply enough to render children and wrap them in custom implementation.\n */\nexport const InnerContent = React.forwardRef(function InnerContent(\n    props: DrawerInnerContentProps,\n    ref: React.Ref<HTMLDivElement>\n) {\n    const { className, children, ...otherProps } = props;\n    return (\n        <div {...otherProps} className={cn('flex grow flex-col overflow-y-hidden', className)} ref={ref}>\n            <div className=\"w-full gap-y-0.5 overflow-auto p-4\">{children}</div>\n        </div>\n    );\n});\n\nexport type DrawerContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the side drawer is opened */\n    'aria-label': string;\n    children: React.ReactNode | ((props: { close: () => void }) => React.ReactNode);\n};\nexport const Content = React.forwardRef(function Content(props: DrawerContentProps, externalRef: React.Ref<HTMLDivElement>) {\n    const { containerRef, size, onResize, variant, showCloseButton, outlet } = useCurrentDrawer();\n    const { className, children, ...otherProps } = props;\n    const { texts } = useLocalization();\n    const ref = useMergedRef<HTMLDivElement>(externalRef);\n\n    const contentRef = React.useRef(null);\n\n    // if the drawer was opened by a menu, we need to close the menu when the drawer closes\n    // the menu is still open (and mounted) because it is the trigger for the drawer\n    const menu = useCurrentMenu();\n    let finalFocus: DrawerPrimitive.Popup.Props['finalFocus'];\n\n    if (menu) {\n        finalFocus = () => {\n            menu.close();\n        };\n    }\n\n    const containerClassName: string = React.useMemo(() => cn(getDrawerContainerClassNames(variant), className), [className]);\n\n    const { contentClassName, dragHandlerClassName } = React.useMemo(() => {\n        const contentClassName = getDrawerContentClassNames(size, variant);\n        const dragHandlerClassName: string = getDrawerDragHandlerClassNames();\n        return { contentClassName, dragHandlerClassName };\n    }, [size, variant]);\n\n    const [containerWidth, setContainerWidth] = React.useState<number>();\n\n    // resize\n    const dragHandlerRef = React.useRef<HTMLDivElement>(null);\n\n    const {\n        position,\n        dragging,\n        handleProps: dragHandleProps,\n        resetPosition,\n    } = useDraggable(useMergedRef<HTMLDivElement>(dragHandlerRef));\n\n    const resizedWidth = React.useMemo((): number | undefined => {\n        if (containerWidth) {\n            return Math.min(RESIZE_MAX, Math.max(RESIZE_MIN, containerWidth - position.x || 0));\n        }\n        return;\n    }, [containerWidth, position]);\n\n    React.useImperativeHandle(\n        containerRef,\n        () => ({\n            onOpen: () => {\n                requestAnimationFrame(() => {\n                    if (contentRef.current) {\n                        setContainerWidth((contentRef.current as HTMLElement)?.offsetWidth);\n                    }\n                });\n            },\n        }),\n        []\n    );\n\n    React.useEffect(() => {\n        if (onResize) {\n            onResize(position.x);\n        }\n    }, [position]);\n\n    React.useEffect(() => {\n        if (!dragging && resizedWidth) {\n            setContainerWidth(resizedWidth);\n            resetPosition();\n        }\n    }, [dragging]);\n\n    let output;\n\n    if (typeof children === 'function') {\n        output = (\n            <Close>\n                <RenderPropWrapper>{children}</RenderPropWrapper>\n            </Close>\n        );\n    } else {\n        output = children;\n    }\n\n    const content = (\n        <div ref={contentRef} data-taco=\"drawer\" className={containerClassName}>\n            {output}\n            <div className={dragHandlerClassName} {...dragHandleProps} data-testid=\"resize-handler\" ref={dragHandlerRef}>\n                {dragging ? <div data-testid=\"resize-hit-area\" className=\"fixed bottom-0 left-0 right-0 top-0\" /> : null}\n            </div>\n            {showCloseButton ? (\n                <Close>\n                    <LegacyIconButton\n                        appearance=\"discrete\"\n                        aria-label={texts.drawer.close}\n                        className=\"absolute right-0 top-0 mr-2 mt-4\"\n                        icon=\"close\"\n                    />\n                </Close>\n            ) : null}\n        </div>\n    );\n\n    if (!outlet) {\n        return null;\n    }\n\n    return (\n        <DrawerPrimitive.Portal container={outlet ?? undefined} className=\"h-full\">\n            {variant === 'overlay' ? (\n                <DrawerPrimitive.Backdrop\n                    className=\"bg-brand-midnight/[0.3] fixed inset-0 cursor-default overflow-y-auto print:absolute print:overflow-visible\"\n                    data-taco=\"backdrop\"\n                />\n            ) : null}\n            <DrawerPrimitive.Viewport className=\"h-full\">\n                <DrawerPrimitive.Popup\n                    {...otherProps}\n                    className={contentClassName}\n                    finalFocus={finalFocus}\n                    ref={ref}\n                    style={{ width: resizedWidth }}>\n                    <DrawerPrimitive.Content>{content}</DrawerPrimitive.Content>\n                </DrawerPrimitive.Popup>\n            </DrawerPrimitive.Viewport>\n        </DrawerPrimitive.Portal>\n    );\n});\n"],"names":["RenderPropWrapper","useMergedRef","useLocalization","useCurrentDrawer","drawer","DrawerPrimitive","LegacyIconButton","Actions","InnerContent","Content","useCurrentMenu","getDrawerContainerClassNames","contentClassName","getDrawerContentClassNames","dragHandlerClassName","getDrawerDragHandlerClassNames","useDraggable"],"mappings":"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"}
+{"version":3,"file":"Content.cjs","sources":["../../../../src/components/Drawer/components/Content.tsx"],"sourcesContent":["import React from 'react';\nimport { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\nimport cn from 'clsx';\n\nimport { GroupProps } from '../../Group/Group';\nimport { LegacyIconButton } from '../../LegacyComponents/IconButton/IconButton';\nimport { useLocalization } from '../../Provider/Localization';\nimport { useCurrentMenu } from '../../Menu/Context';\nimport { useCurrentDrawer } from '../Context';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { getDrawerContainerClassNames, getDrawerContentClassNames, getDrawerDragHandlerClassNames } from '../util';\n\nconst RESIZE_MIN = 360;\nconst RESIZE_MAX = 1000;\n\nexport enum DrawerAnimationDefinition {\n    Visible = 'visible',\n    Hidden = 'hidden',\n}\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n    const close = () => {\n        onClick(new CustomEvent('close'));\n    };\n\n    return children({ close, ref, ...renderProps });\n});\n\nexport type DrawerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DrawerTitle(props: DrawerTitleProps, externalRef: React.Ref<HTMLHeadingElement>) {\n    const { className, children, ...otherProps } = props;\n    const ref = useMergedRef<HTMLHeadingElement>(externalRef);\n    const [style, setStyle] = React.useState({});\n    const { texts } = useLocalization();\n    const { onClickBack } = useCurrentDrawer();\n\n    /**\n     * By design in default drawer version Title has grey separator, but we might have exceptions like Drawer + Tabs scenario,\n     * where we might want to hide the grey separator. For this reason separator was rendered with using of classNames,\n     * so it can be easily overriden in exceptional scenarios.\n     *  */\n    const cName = cn('mb-0 flex grow-0 items-start justify-self-start border-b-[1px] border-gray-200 px-4 py-4', className);\n\n    React.useEffect(() => {\n        const drawer = ref?.current?.closest('[data-taco=\"drawer\"]');\n\n        // This is the margin amount that we need to deduct from the margins to align with the design\n        const marginAdjust = 4;\n\n        const closeButton: HTMLButtonElement | null = drawer?.querySelector(`[aria-label=\"${texts.drawer.close}\"]`) ?? null;\n        const closeButtonWidth = closeButton?.offsetWidth ?? 0;\n        const closeButtonRightMargin = 8;\n\n        const actionsWrapper: HTMLSpanElement | null = drawer?.querySelector(`#taco-drawer-actions[data-taco=\"group\"]`) ?? null;\n        const actionsWrapperWidth = actionsWrapper?.offsetWidth ?? 0;\n        const actionsWrapperRightMargin = 8;\n\n        const marginRight =\n            closeButtonWidth + actionsWrapperWidth + closeButtonRightMargin + actionsWrapperRightMargin - marginAdjust;\n\n        setStyle({ marginRight });\n    }, [ref, texts.drawer.close]);\n\n    return (\n        <DrawerPrimitive.Title className={cName} {...otherProps} ref={ref}>\n            {onClickBack ? (\n                <LegacyIconButton\n                    appearance=\"discrete\"\n                    aria-label={texts.drawer.back}\n                    className=\"mr-3 text-base\"\n                    icon=\"chevron-left\"\n                    onClick={onClickBack}\n                />\n            ) : null}\n            {\n                // We need to apply the right margin as an inline style instead of using Tailwind CSS.\n                // This is necessary because we are creating styles dynamically at runtime,\n                // and Tailwind doesn't support generating runtime styles.\n            }\n            <span className=\"line-clamp-2 inline-block overflow-y-hidden\" style={style}>\n                {children}\n            </span>\n        </DrawerPrimitive.Title>\n    );\n});\n\nexport type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DrawerFooter(props: DrawerFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const { className: _1, ...otherProps } = props;\n    /**\n     * The same scenario as Title, grey separator rendered using classNames to have posibility to override it.\n     */\n    const cName = cn('mt-auto flex grow-0 justify-end border-t-[1px] border-gray-200 p-4', props.className);\n    return <div {...otherProps} className={cName} ref={ref} />;\n});\n\nexport const Actions = React.forwardRef(function Actions(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { className, ...otherProps } = props;\n    const cName = cn('absolute right-10 top-0 mr-[2] mt-4 flex gap-2', className);\n    // Id is added to identify the actions wrapper inside a useEffect in Dialog.Title\n    return <div {...otherProps} className={cName} id=\"taco-drawer-actions\" ref={ref} />;\n});\n\nexport type DrawerCloseProps = React.HTMLAttributes<HTMLButtonElement> & {\n    children: React.ReactElement;\n};\n\nexport const Close = React.forwardRef(function DrawerClose(props: DrawerCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const { onClose } = useCurrentDrawer();\n\n    const { children, ...restProps } = props;\n\n    return <DrawerPrimitive.Close {...restProps} onClick={onClose} ref={ref} render={children} />;\n});\n\nexport type DrawerInnerContentProps = React.HTMLAttributes<HTMLDivElement>;\n/**\n * It is container component, needed to provide default scrolling behaviour and padding, to simplyfy usage, requested by feature devs.\n * It is optional to use InnerContent component, if consumer need to implement custom behaviour or paddings for inner content,\n * then it's simply enough to render children and wrap them in custom implementation.\n */\nexport const InnerContent = React.forwardRef(function InnerContent(\n    props: DrawerInnerContentProps,\n    ref: React.Ref<HTMLDivElement>\n) {\n    const { className, children, ...otherProps } = props;\n    return (\n        <div {...otherProps} className={cn('flex grow flex-col overflow-y-hidden', className)} ref={ref}>\n            <div className=\"w-full gap-y-0.5 overflow-auto p-4\">{children}</div>\n        </div>\n    );\n});\n\nexport type DrawerContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the side drawer is opened */\n    'aria-label': string;\n    children: React.ReactNode | ((props: { close: () => void }) => React.ReactNode);\n};\nexport const Content = React.forwardRef(function Content(props: DrawerContentProps, externalRef: React.Ref<HTMLDivElement>) {\n    const { containerRef, size, onResize, variant, showCloseButton, outlet } = useCurrentDrawer();\n    const { className, children, ...otherProps } = props;\n    const { texts } = useLocalization();\n    const ref = useMergedRef<HTMLDivElement>(externalRef);\n\n    const contentRef = React.useRef(null);\n\n    // if the drawer was opened by a menu, we need to close the menu when the drawer closes\n    // the menu is still open (and mounted) because it is the trigger for the drawer\n    const menu = useCurrentMenu();\n    let finalFocus: DrawerPrimitive.Popup.Props['finalFocus'];\n\n    if (menu) {\n        finalFocus = () => {\n            menu.close();\n        };\n    }\n\n    const containerClassName: string = React.useMemo(() => cn(getDrawerContainerClassNames(variant), className), [className]);\n\n    const { contentClassName, dragHandlerClassName } = React.useMemo(() => {\n        const contentClassName = getDrawerContentClassNames(size, variant);\n        const dragHandlerClassName: string = getDrawerDragHandlerClassNames();\n        return { contentClassName, dragHandlerClassName };\n    }, [size, variant]);\n\n    const [containerWidth, setContainerWidth] = React.useState<number>();\n\n    // resize\n    const dragHandlerRef = React.useRef<HTMLDivElement>(null);\n\n    const {\n        position,\n        dragging,\n        handleProps: dragHandleProps,\n        resetPosition,\n    } = useDraggable(useMergedRef<HTMLDivElement>(dragHandlerRef));\n\n    const resizedWidth = React.useMemo((): number | undefined => {\n        if (containerWidth) {\n            return Math.min(RESIZE_MAX, Math.max(RESIZE_MIN, containerWidth - position.x || 0));\n        }\n        return;\n    }, [containerWidth, position]);\n\n    React.useImperativeHandle(\n        containerRef,\n        () => ({\n            onOpen: () => {\n                requestAnimationFrame(() => {\n                    if (contentRef.current) {\n                        setContainerWidth((contentRef.current as HTMLElement)?.offsetWidth);\n                    }\n                });\n            },\n        }),\n        []\n    );\n\n    React.useEffect(() => {\n        if (onResize) {\n            onResize(position.x);\n        }\n    }, [position]);\n\n    React.useEffect(() => {\n        if (!dragging && resizedWidth) {\n            setContainerWidth(resizedWidth);\n            resetPosition();\n        }\n    }, [dragging]);\n\n    let output;\n\n    if (typeof children === 'function') {\n        output = (\n            <Close>\n                <RenderPropWrapper>{children}</RenderPropWrapper>\n            </Close>\n        );\n    } else {\n        output = children;\n    }\n\n    const content = (\n        <div ref={contentRef} data-taco=\"drawer\" className={containerClassName}>\n            {output}\n            <div className={dragHandlerClassName} {...dragHandleProps} data-testid=\"resize-handler\" ref={dragHandlerRef}>\n                {dragging ? <div data-testid=\"resize-hit-area\" className=\"fixed bottom-0 left-0 right-0 top-0\" /> : null}\n            </div>\n            {showCloseButton ? (\n                <Close>\n                    <LegacyIconButton\n                        appearance=\"discrete\"\n                        aria-label={texts.drawer.close}\n                        className=\"absolute right-0 top-0 mr-2 mt-4\"\n                        icon=\"close\"\n                    />\n                </Close>\n            ) : null}\n        </div>\n    );\n\n    if (!outlet) {\n        return null;\n    }\n\n    return (\n        <DrawerPrimitive.Portal container={outlet ?? undefined} className=\"h-full\">\n            {variant === 'overlay' ? (\n                <DrawerPrimitive.Backdrop\n                    className=\"fixed inset-0 cursor-default overflow-y-auto bg-brand-midnight/[0.3] print:absolute print:overflow-visible\"\n                    data-taco=\"backdrop\"\n                />\n            ) : null}\n            <DrawerPrimitive.Viewport className=\"h-full\">\n                <DrawerPrimitive.Popup\n                    {...otherProps}\n                    className={contentClassName}\n                    finalFocus={finalFocus}\n                    ref={ref}\n                    style={{ width: resizedWidth }}>\n                    <DrawerPrimitive.Content>{content}</DrawerPrimitive.Content>\n                </DrawerPrimitive.Popup>\n            </DrawerPrimitive.Viewport>\n        </DrawerPrimitive.Portal>\n    );\n});\n"],"names":["RenderPropWrapper","useMergedRef","useLocalization","useCurrentDrawer","drawer","DrawerPrimitive","LegacyIconButton","Actions","InnerContent","Content","useCurrentMenu","getDrawerContainerClassNames","contentClassName","getDrawerContentClassNames","dragHandlerClassName","getDrawerDragHandlerClassNames","useDraggable"],"mappings":"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"}

package/dist/components/Drawer/components/Content.js

@@ -22,16 +22,15 @@ const Title = React__default.forwardRef(function DrawerTitle(props, externalRef)
   const [style, setStyle] = React__default.useState({});
   const { texts } = useLocalization();
   const { onClickBack } = useCurrentDrawer();
-  const cName = cn("grow-0 py-4 px-4 justify-self-start mb-0 border-b-[1px] border-gray-200 flex items-start", className);
+  const cName = cn("mb-0 flex grow-0 items-start justify-self-start border-b-[1px] border-gray-200 px-4 py-4", className);
   React__default.useEffect(() => {
-    var _a;
-    const drawer = (_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.closest('[data-taco="drawer"]');
+    const drawer = ref?.current?.closest('[data-taco="drawer"]');
     const marginAdjust = 4;
-    const closeButton = (drawer == null ? void 0 : drawer.querySelector(`[aria-label="${texts.drawer.close}"]`)) ?? null;
-    const closeButtonWidth = (closeButton == null ? void 0 : closeButton.offsetWidth) ?? 0;
+    const closeButton = drawer?.querySelector(`[aria-label="${texts.drawer.close}"]`) ?? null;
+    const closeButtonWidth = closeButton?.offsetWidth ?? 0;
     const closeButtonRightMargin = 8;
-    const actionsWrapper = (drawer == null ? void 0 : drawer.querySelector(`#taco-drawer-actions[data-taco="group"]`)) ?? null;
-    const actionsWrapperWidth = (actionsWrapper == null ? void 0 : actionsWrapper.offsetWidth) ?? 0;
+    const actionsWrapper = drawer?.querySelector(`#taco-drawer-actions[data-taco="group"]`) ?? null;
+    const actionsWrapperWidth = actionsWrapper?.offsetWidth ?? 0;
     const actionsWrapperRightMargin = 8;
     const marginRight = closeButtonWidth + actionsWrapperWidth + closeButtonRightMargin + actionsWrapperRightMargin - marginAdjust;
     setStyle({ marginRight });
@@ -49,12 +48,12 @@ const Title = React__default.forwardRef(function DrawerTitle(props, externalRef)
 });
 const Footer = React__default.forwardRef(function DrawerFooter(props, ref) {
   const { className: _1, ...otherProps } = props;
-  const cName = cn("mt-auto flex justify-end grow-0 p-4 border-t-[1px] border-gray-200", props.className);
+  const cName = cn("mt-auto flex grow-0 justify-end border-t-[1px] border-gray-200 p-4", props.className);
   return /* @__PURE__ */ React__default.createElement("div", { ...otherProps, className: cName, ref });
 });
 const Actions = React__default.forwardRef(function Actions2(props, ref) {
   const { className, ...otherProps } = props;
-  const cName = cn("absolute top-0 right-10 flex gap-2 mr-[2] mt-4", className);
+  const cName = cn("absolute right-10 top-0 mr-[2] mt-4 flex gap-2", className);
   return /* @__PURE__ */ React__default.createElement("div", { ...otherProps, className: cName, id: "taco-drawer-actions", ref });
 });
 const Close = React__default.forwardRef(function DrawerClose(props, ref) {
@@ -104,9 +103,8 @@ const Content = React__default.forwardRef(function Content2(props, externalRef)
     () => ({
       onOpen: () => {
         requestAnimationFrame(() => {
-          var _a;
           if (contentRef.current) {
-            setContainerWidth((_a = contentRef.current) == null ? void 0 : _a.offsetWidth);
+            setContainerWidth(contentRef.current?.offsetWidth);
           }
         });
       }
@@ -145,7 +143,7 @@ const Content = React__default.forwardRef(function Content2(props, externalRef)
   return /* @__PURE__ */ React__default.createElement(Drawer.Portal, { container: outlet ?? void 0, className: "h-full" }, variant === "overlay" ? /* @__PURE__ */ React__default.createElement(
     Drawer.Backdrop,
     {
-      className: "bg-brand-midnight/[0.3] fixed inset-0 cursor-default overflow-y-auto print:absolute print:overflow-visible",
+      className: "fixed inset-0 cursor-default overflow-y-auto bg-brand-midnight/[0.3] print:absolute print:overflow-visible",
       "data-taco": "backdrop"
     }
   ) : null, /* @__PURE__ */ React__default.createElement(Drawer.Viewport, { className: "h-full" }, /* @__PURE__ */ React__default.createElement(