@servicetitan/anvil2 3.0.3 → 3.0.4

package/dist/Divider.css

@@ -1,7 +1,6 @@
-.anvil2 {._container_klljw_1 {
+.anvil2 {._container_143tz_1 {
   --a2-mod-divider-border-color: var(--a2-divider-border-color, var(--a2-border-color-subdued, light-dark(var(--a2-color-neutral-80, #e6e6e6), var(--a2-color-neutral-700, #404040))));
   --a2-mod-divider-spacing: 0;
-  all: unset;
   font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
   font-size: 100%;
   color: inherit;
@@ -18,8 +17,7 @@
   width: -webkit-fill-available;
   width: -moz-available;
   width: stretch;
-}._divider_klljw_21 {
-  all: unset;
+}._divider_143tz_20 {
   font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
   font-size: 100%;
   color: inherit;
@@ -37,7 +35,7 @@
   width: var(--a2-mod-divider-width, -webkit-fill-available);
   width: var(--a2-mod-divider-width, -moz-available);
   width: var(--a2-mod-divider-width, stretch);
-}._content_klljw_40 {
+}._content_143tz_38 {
   background-color: inherit;
   display: inline-flex;
   font-size: var(--a2-typography-label-size-large, var(--a2-font-size-400, 1rem));
@@ -45,51 +43,51 @@
   padding-block: var(--a2-size-2, 0.5rem);
   padding-inline: var(--a2-mod-divider-content-padding-start, var(--a2-size-2, 0.5rem)) var(--a2-mod-divider-content-padding-end, var(--a2-size-2, 0.5rem));
   z-index: 1;
-}._spacing-0_klljw_50 {
+}._spacing-0_143tz_48 {
   --a2-mod-divider-spacing: 0;
-}._spacing-half_klljw_54 {
+}._spacing-half_143tz_52 {
   --a2-mod-divider-spacing: var(--a2-size-1, 0.25rem);
-}._spacing-1_klljw_58,
-._spacing-2_klljw_59 {
+}._spacing-1_143tz_56,
+._spacing-2_143tz_57 {
   --a2-mod-divider-spacing: var(--a2-size-2, 0.5rem);
-}._spacing-3_klljw_63 {
+}._spacing-3_143tz_61 {
   --a2-mod-divider-spacing: var(--a2-size-3, 0.75rem);
-}._spacing-4_klljw_67 {
+}._spacing-4_143tz_65 {
   --a2-mod-divider-spacing: var(--a2-size-4, 1rem);
-}._spacing-5_klljw_71 {
+}._spacing-5_143tz_69 {
   --a2-mod-divider-spacing: var(--a2-size-5, 1.25rem);
-}._spacing-6_klljw_75 {
+}._spacing-6_143tz_73 {
   --a2-mod-divider-spacing: var(--a2-size-6, 1.5rem);
-}._spacing-8_klljw_79 {
+}._spacing-8_143tz_77 {
   --a2-mod-divider-spacing: var(--a2-size-8, 2rem);
-}._spacing-12_klljw_83 {
+}._spacing-12_143tz_81 {
   --a2-mod-divider-spacing: var(--a2-size-12, 3rem);
-}._align-start_klljw_87 {
+}._align-start_143tz_85 {
   --a2-mod-divider-content-padding-start: 0;
-}._align-end_klljw_91 {
+}._align-end_143tz_89 {
   --a2-mod-divider-content-padding-end: 0;
-}._container_klljw_1:not(._vertical_klljw_95) {
+}._container_143tz_1:not(._vertical_143tz_93) {
   align-items: center;
   padding-block: var(--a2-mod-divider-spacing);
-}._container_klljw_1:not(._vertical_klljw_95) ._divider_klljw_21 {
+}._container_143tz_1:not(._vertical_143tz_93) ._divider_143tz_20 {
   border-block-start: var(--a2-size-quarter, 0.0625rem) solid var(--a2-mod-divider-border-color);
-}._vertical_klljw_95 {
+}._vertical_143tz_93 {
   flex-direction: column;
   padding-inline: var(--a2-mod-divider-spacing);
   width: var(--a2-size-quarter, 0.0625rem);
-}._vertical_klljw_95 ._divider_klljw_21 {
+}._vertical_143tz_93 ._divider_143tz_20 {
   --a2-mod-divider-height: 100%;
   --a2-mod-divider-width: var(--a2-size-quarter, 0.0625rem);
   border-inline-start: var(--a2-size-quarter, 0.0625rem) solid var(--a2-mod-divider-border-color);
-}._vertical_klljw_95 ._content_klljw_40 {
+}._vertical_143tz_93 ._content_143tz_38 {
   padding-block: var(--a2-mod-divider-content-padding-start, var(--a2-size-2, 0.5rem)) var(--a2-mod-divider-content-padding-end, var(--a2-size-2, 0.5rem));
   padding-inline: var(--a2-size-2, 0.5rem);
   transform: translateX(-50%);
   width: -moz-fit-content;
   width: fit-content;
-}._vertical_klljw_95._spacing-half_klljw_54 {
+}._vertical_143tz_93._spacing-half_143tz_52 {
   --a2-mod-divider-spacing: var(--a2-size-half, 0.125rem);
-}._vertical_klljw_95._spacing-1_klljw_58 {
+}._vertical_143tz_93._spacing-1_143tz_56 {
   --a2-mod-divider-spacing: var(--a2-size-1, 0.25rem);
 }
 }

package/dist/Divider.d.ts

@@ -1,6 +1 @@
-export * from './components/Divider/index'
-export {}
-import _default from './components/Divider/index'
-export default _default
-export * from './components/Divider/index'
 export {}

package/dist/Divider.js

@@ -1,2 +1,2 @@
-export { D as Divider, D as default } from './Divider-Ds3WKsKa.js';
+export { D as Divider, D as default } from './Divider-CxtTyw8_.js';
 //# sourceMappingURL=Divider.js.map

package/dist/Dnd.d.ts

@@ -1,2 +1 @@
-export * from './components/Dnd/index'
 export {}

package/dist/Dnd.js

@@ -1,3 +1,3 @@
-import './DndHandleButton-Dgt9G-dF.js';
-export { D as Dnd } from './index-DtsM4pjR.js';
+import './DndHandleButton-CHTOYRlq.js';
+export { D as Dnd } from './index-CukEaIHB.js';
 //# sourceMappingURL=Dnd.js.map

package/dist/DndHandleButton-CHTOYRlq.js

@@ -0,0 +1,43 @@
+import { jsx } from 'react/jsx-runtime';
+import { B as ButtonCompound } from './ButtonCompound-BQb2gfAl.js';
+import { c as cx } from './index-De1g9FRV.js';
+import * as React from 'react';
+import { forwardRef } from 'react';
+import { I as Icon } from './Icon-feeG7gXA.js';
+
+import './DndHandleButton.css';const handle = "_handle_1e7c4_2";
+const active = "_active_1e7c4_25";
+const handleStyles = {
+	handle: handle,
+	"handle-button": "_handle-button_1e7c4_10",
+	active: active
+};
+
+const SvgDragIndicator = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" }));
+
+function DndHandle({ className }) {
+  const handleClasses = cx(handleStyles.handle, className);
+  return /* @__PURE__ */ jsx(Icon, { svg: SvgDragIndicator, className: handleClasses, role: "presentation" });
+}
+
+const DndHandleButton = forwardRef(({ isActive = false, className, ...props }, ref) => {
+  const handleButtonClasses = cx(className, handleStyles["handle-button"], {
+    [handleStyles["active"]]: isActive
+  });
+  return /* @__PURE__ */ jsx(
+    ButtonCompound,
+    {
+      ref,
+      className: handleButtonClasses,
+      type: "button",
+      shape: "rounded",
+      "aria-label": "Drag handle",
+      ...props,
+      children: /* @__PURE__ */ jsx(DndHandle, {})
+    }
+  );
+});
+DndHandleButton.displayName = "DndHandleButton";
+
+export { DndHandleButton as D, DndHandle as a };
+//# sourceMappingURL=DndHandleButton-CHTOYRlq.js.map

package/dist/DndHandleButton-CHTOYRlq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DndHandleButton-CHTOYRlq.js","sources":["../../hammer-icon/mdi/round/drag_indicator.svg","../src/components/Dnd/DndHandle.tsx","../src/components/Dnd/DndHandleButton.tsx"],"sourcesContent":["import * as React from \"react\";\nconst SvgDragIndicator = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\" }));\nexport default SvgDragIndicator;\n","import { Icon } from \"../Icon\";\nimport DragIndicator from \"@servicetitan/hammer-icon/mdi/round/drag_indicator.svg\";\nimport styles from \"./DndHandle.module.scss\";\nimport cx from \"classnames\";\n\n/**\n * Props for the DndHandle component\n */\nexport type DndHandleProps = {\n  /**\n   * Additional CSS class names to apply to the drag handle.\n   */\n  className?: string;\n};\n\n/**\n * A reusable drag handle icon component for drag and drop interactions.\n *\n * Features:\n * - Standardized drag indicator icon\n * - Accessible with proper ARIA attributes\n * - Customizable styling through className prop\n * - Consistent visual appearance across applications\n * - Lightweight and performant\n * - Supports all standard HTML element props\n *\n * @example\n * <DndHandle className=\"custom-drag-handle\" />\n */\nexport function DndHandle({ className }: { className?: string }) {\n  const handleClasses = cx(styles.handle, className);\n  return (\n    <Icon svg={DragIndicator} className={handleClasses} role=\"presentation\" />\n  );\n}\n","import { ButtonCompound } from \"../ButtonCompound\";\nimport handleStyles from \"./DndHandle.module.scss\";\nimport cx from \"classnames\";\nimport { forwardRef } from \"react\";\nimport { DndHandle } from \"./DndHandle\";\n\n/**\n * Props for the DndHandleButton component\n * @extends React.ComponentPropsWithoutRef<typeof ButtonCompound>\n */\nexport interface DndHandleButtonProps\n  extends React.ComponentPropsWithoutRef<typeof ButtonCompound> {\n  /**\n   * Indicates whether the handle is currently being dragged.\n   * @default false\n   */\n  isActive?: boolean;\n}\n\n/**\n * A reusable drag handle button component for drag and drop functionality.\n *\n * Features:\n * - Interactive button with drag handle icon\n * - Visual feedback for active drag state\n * - Accessible with proper ARIA attributes (defaults to \"Drag handle\")\n * - Extends ButtonCompound functionality\n * - Customizable styling through className prop\n * - Supports all standard button props\n * - Consistent visual appearance across applications\n *\n * @example\n * <DndHandleButton\n *   isActive={isDragging}\n *   aria-label=\"Drag task item\"\n *   className=\"custom-handle-button\"\n *   onClick={handleClick}\n * />\n */\nexport const DndHandleButton = forwardRef<\n  HTMLButtonElement,\n  DndHandleButtonProps\n>(({ isActive = false, className, ...props }, ref) => {\n  const handleButtonClasses = cx(className, handleStyles[\"handle-button\"], {\n    [handleStyles[\"active\"]]: isActive,\n  });\n\n  return (\n    <ButtonCompound\n      ref={ref}\n      className={handleButtonClasses}\n      type=\"button\"\n      shape=\"rounded\"\n      aria-label=\"Drag handle\"\n      {...props}\n    >\n      <DndHandle />\n    </ButtonCompound>\n  );\n});\n\nDndHandleButton.displayName = \"DndHandleButton\";\n"],"names":["styles","DragIndicator"],"mappings":";;;;;;;;;;;;;;;AACA,MAAM,gBAAgB,GAAG,CAAC,KAAK,qBAAqB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,4BAA4B,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,kBAAkB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,qSAAqS,EAAE,CAAC,CAAC;;AC4BxgB,SAAS,SAAA,CAAU,EAAE,SAAA,EAAU,EAA2B;AAC/D,EAAA,MAAM,aAAA,GAAgB,EAAA,CAAGA,YAAA,CAAO,MAAA,EAAQ,SAAS,CAAA;AACjD,EAAA,2BACG,IAAA,EAAA,EAAK,GAAA,EAAKC,kBAAe,SAAA,EAAW,aAAA,EAAe,MAAK,cAAA,EAAe,CAAA;AAE5E;;ACKO,MAAM,eAAA,GAAkB,UAAA,CAG7B,CAAC,EAAE,QAAA,GAAW,OAAO,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACpD,EAAA,MAAM,mBAAA,GAAsB,EAAA,CAAG,SAAA,EAAW,YAAA,CAAa,eAAe,CAAA,EAAG;AAAA,IACvE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG;AAAA,GAC3B,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,mBAAA;AAAA,MACX,IAAA,EAAK,QAAA;AAAA,MACL,KAAA,EAAM,SAAA;AAAA,MACN,YAAA,EAAW,aAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEJ,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA,GACb;AAEJ,CAAC;AAED,eAAA,CAAgB,WAAA,GAAc,iBAAA;;;;"}

package/dist/DndSort.d.ts

@@ -1,2 +1 @@
-export * from './components/DndSort/index'
 export {}

package/dist/DndSort.js

@@ -1,13 +1,13 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React__default, { useLayoutEffect, useEffect, useRef, useMemo, useCallback, useState, memo, useReducer, createContext, useContext, forwardRef, cloneElement } from 'react';
 import { unstable_batchedUpdates, createPortal } from 'react-dom';
-import { s as styles, a as DndSortLine, D as Dnd } from './index-DtsM4pjR.js';
+import { s as styles, a as DndSortLine, D as Dnd } from './index-CukEaIHB.js';
 import { c as cx } from './index-De1g9FRV.js';
 import { D as DrawerContext } from './DrawerContext-BSpnzXVZ.js';
 import { D as DialogContext } from './DialogContext-DBgtApl9.js';
-import { B as ButtonCompound } from './ButtonCompound-DsrK7G3q.js';
-import { C as Card } from './Card-DSFuXUGk.js';
-import { D as DndHandleButton, a as DndHandle } from './DndHandleButton-Dgt9G-dF.js';
+import { B as ButtonCompound } from './ButtonCompound-BQb2gfAl.js';
+import { C as Card } from './Card-fBqg853U.js';
+import { D as DndHandleButton, a as DndHandle } from './DndHandleButton-CHTOYRlq.js';
 import { F as Flex } from './Flex-_orhvoxS.js';
 import { s as sizeToToken } from './useLayoutPropsUtil-CB_zHDbW.js';
 

package/dist/Drawer-Dg35inxH.js

@@ -0,0 +1,441 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useContext, forwardRef, useState, useEffect, useRef, useId, useCallback, useLayoutEffect, useMemo } from 'react';
+import { S as SvgClose } from './close-DZj38AEh.js';
+import { T as Text } from './Text-BgPuOXJM.js';
+import { B as Button } from './Button-C_V2xQAs.js';
+import { D as DrawerContext } from './DrawerContext-BSpnzXVZ.js';
+import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
+import { useTrackingId } from './useTrackingId.js';
+import { c as cx } from './index-De1g9FRV.js';
+import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
+import { a as ToastProvider, b as ToasterPopover, c as ToasterContent } from './Toaster-3GI_qJxj.js';
+import { d as drillDownStyles, D as DrillDownContext } from './DrillDown.module-D1Bf9_yP.js';
+import { u as useDrillDownContextState, a as useDialogTransitionStates, b as useKeyboardFocusables, c as useInitialFocus } from './useInitialFocus-BUxEDMEG.js';
+import { u as useDialogScrollLock } from './useDialogScrollLock-BW-aVboo.js';
+import { r as registerLayer, u as unregisterLayer, a as useOnClickOutside } from './useOnClickOutside-Zw5vzxSq.js';
+
+import './Drawer.css';const drawer = "_drawer_s6o44_1";
+const remove = "_remove_s6o44_39";
+const small = "_small_s6o44_46";
+const large = "_large_s6o44_50";
+const xlarge = "_xlarge_s6o44_54";
+const container = "_container_s6o44_58";
+const header = "_header_s6o44_71";
+const content = "_content_s6o44_95";
+const sticky = "_sticky_s6o44_101";
+const footer = "_footer_s6o44_112";
+const styles = {
+	"close-drawer": "_close-drawer_s6o44_1",
+	"open-drawer": "_open-drawer_s6o44_1",
+	"open-backdrop": "_open-backdrop_s6o44_1",
+	"close-backdrop": "_close-backdrop_s6o44_1",
+	drawer: drawer,
+	remove: remove,
+	small: small,
+	large: large,
+	xlarge: xlarge,
+	container: container,
+	header: header,
+	"close-container": "_close-container_s6o44_87",
+	content: content,
+	sticky: sticky,
+	footer: footer
+};
+
+function useDrawerContext() {
+  const context = useContext(DrawerContext);
+  if (!context) {
+    throw new Error(
+      "useDrawerContext must be used within a DrawerContextProvider"
+    );
+  }
+  return context;
+}
+
+const DrawerCancelButton = forwardRef((props, ref) => {
+  const { onClick, ...rest } = props;
+  const { close } = useDrawerContext();
+  const data = {
+    children: childrenToString(props.children),
+    appearance: props.appearance,
+    size: props.size,
+    type: props.type
+  };
+  const trackingId = useTrackingId({
+    name: "DrawerCancelButton",
+    data,
+    hasOverride: !!props["data-tracking-id"]
+  });
+  const onClickHandler = (e) => {
+    onClick?.(e);
+    close();
+  };
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": "Close drawer",
+      "data-anv": "drawer-cancel-button",
+      "data-tracking-id": trackingId,
+      onClick: onClickHandler,
+      ref,
+      ...rest
+    }
+  );
+});
+DrawerCancelButton.displayName = "DrawerCancelButton";
+
+const DrawerHeader = forwardRef(
+  (props, ref) => {
+    const { className, children } = props;
+    const { headerRef } = useDrawerContext();
+    const data = {
+      children: childrenToString(props.children)
+    };
+    const trackingId = useTrackingId({
+      name: "DrawerHeader",
+      data,
+      hasOverride: !!props["data-tracking-id"]
+    });
+    const drawerHeaderClasses = cx(styles.header, className);
+    return /* @__PURE__ */ jsxs(
+      "header",
+      {
+        className: drawerHeaderClasses,
+        "data-anv": "drawer-header",
+        "data-tracking-id": trackingId,
+        ref: useMergeRefs([ref, headerRef]),
+        children: [
+          /* @__PURE__ */ jsx(Text, { variant: "headline", el: "h1", children }),
+          /* @__PURE__ */ jsx("span", { className: styles["close-container"], children: /* @__PURE__ */ jsx(
+            DrawerCancelButton,
+            {
+              className: styles["close-button"],
+              size: "small",
+              appearance: "ghost",
+              "aria-label": "Close drawer",
+              "data-anv": "drawer-header-close-button",
+              icon: SvgClose
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+DrawerHeader.displayName = "DrawerHeader";
+
+const DrawerFooter = forwardRef(
+  (props, ref) => {
+    const { className, children, sticky = false, ...rest } = props;
+    const drawerFooterClasses = cx(styles.footer, className, {
+      [styles["sticky"]]: sticky
+    });
+    return /* @__PURE__ */ jsx(
+      "footer",
+      {
+        className: drawerFooterClasses,
+        "data-anv": "drawer-footer",
+        ref,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+DrawerFooter.displayName = "DrawerFooter";
+
+const DrawerContent = forwardRef(
+  (props, ref) => {
+    const { children, className, sticky = false, ...rest } = props;
+    const { headerRef } = useDrawerContext();
+    const [headerHeight, setHeaderHeight] = useState(0);
+    useEffect(() => {
+      const headerElement = headerRef?.current;
+      if (!sticky || !headerElement) return;
+      const updateHeight = () => {
+        setHeaderHeight(headerElement.offsetHeight || 0);
+      };
+      updateHeight();
+      const resizeObserver = new ResizeObserver(updateHeight);
+      resizeObserver.observe(headerElement);
+      return () => resizeObserver.disconnect();
+    }, [sticky, headerRef]);
+    const contentClassNames = cx(styles["content"], className, {
+      [styles["sticky"]]: sticky
+    });
+    const stickyStyle = sticky ? { top: `${headerHeight}px` } : void 0;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: contentClassNames,
+        "data-anv": "drawer-content",
+        ref,
+        style: { ...stickyStyle, ...rest.style },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+DrawerContent.displayName = "DrawerContent";
+
+const Drawer = Object.assign(
+  forwardRef(function DrawerInner(props, ref) {
+    const {
+      className,
+      open = false,
+      children,
+      onClose,
+      // onCancel is destructured so that it is not passed to the dialog in ...rest
+      onCancel,
+      onKeyDown,
+      disableCloseOnEscape = false,
+      onClickOutside,
+      disableCloseOnClickOutside = false,
+      size = "medium",
+      enableScrollChaining,
+      onOpenAnimationStart,
+      onOpenAnimationComplete,
+      onCloseAnimationStart,
+      onCloseAnimationComplete,
+      initialFocusResolver,
+      defaultDrillDownIndex,
+      onDrillDownContextChange,
+      ...rest
+    } = props;
+    const elRef = useRef(null);
+    const contentRef = useRef(null);
+    const toasterRef = useRef(null);
+    const headerRef = useRef(null);
+    const combinedRef = useMergeRefs([elRef, ref]);
+    const drillDownContextValue = useDrillDownContextState({
+      defaultDrillDownIndex
+    });
+    const id = useId();
+    const { state, isOpenOrOpening } = useDialogTransitionStates(elRef, open, {
+      onOpenAnimationStart: useCallback(() => {
+        onOpenAnimationStart?.();
+      }, [onOpenAnimationStart]),
+      onOpenAnimationComplete: useCallback(() => {
+        onOpenAnimationComplete?.();
+      }, [onOpenAnimationComplete]),
+      onCloseAnimationStart: useCallback(() => {
+        onCloseAnimationStart?.();
+      }, [onCloseAnimationStart]),
+      onCloseAnimationComplete: useCallback(() => {
+        onCloseAnimationComplete?.();
+      }, [onCloseAnimationComplete])
+    });
+    const previousOpenRef = useRef(open);
+    useLayoutEffect(() => {
+      if (open && !previousOpenRef.current) {
+        drillDownContextValue.setHostTrigger?.(
+          document.activeElement instanceof HTMLElement ? document.activeElement : null
+        );
+      }
+    }, [open, drillDownContextValue]);
+    useEffect(() => {
+      previousOpenRef.current = open;
+    }, [open]);
+    useEffect(() => {
+      if (state === "closing") {
+        drillDownContextValue.onHostClose?.();
+      }
+    }, [state, drillDownContextValue]);
+    useEffect(() => {
+      if (state === "closed") {
+        drillDownContextValue.onHostClosed?.();
+      }
+    }, [state, drillDownContextValue]);
+    const drillDownContextProviderValue = useMemo(
+      () => ({
+        ...drillDownContextValue,
+        hostIsInteractive: state !== "closing" && state !== "closed"
+      }),
+      [drillDownContextValue, state]
+    );
+    useLayoutEffect(() => {
+      onDrillDownContextChange?.(drillDownContextProviderValue);
+    }, [drillDownContextProviderValue]);
+    const classNames = cx([styles.drawer, drillDownStyles.drawer], className, {
+      [styles.remove]: state === "closing",
+      [styles[size]]: size !== "medium"
+    });
+    const { focusables } = useKeyboardFocusables(contentRef, {
+      observeChange: false
+    });
+    const firstFocusable = focusables?.[0];
+    const lastFocusable = focusables?.[focusables.length - 1];
+    useDialogScrollLock({
+      open: isOpenOrOpening,
+      id,
+      enableScrollChaining,
+      elementRef: elRef
+    });
+    useEffect(() => {
+      if (open) {
+        registerLayer(id);
+      } else {
+        unregisterLayer(id);
+      }
+      return () => {
+        unregisterLayer(id);
+      };
+    }, [open, id]);
+    const computeFocus = useCallback((focusables2) => {
+      return focusables2.find(
+        (focusable) => focusable.dataset.anv !== "drawer-header-close-button"
+      ) || focusables2[0];
+    }, []);
+    useInitialFocus(elRef, {
+      computeFocus: initialFocusResolver || computeFocus
+    });
+    const onCancelHandler = (e) => {
+      e.preventDefault();
+      if (disableCloseOnEscape) return;
+      onClose?.();
+    };
+    useOnClickOutside({
+      onClickOutsideBegin: (e) => {
+        if (!open) return;
+        onClickOutside?.(e);
+      },
+      targets: [
+        contentRef.current,
+        toasterRef.current
+      ],
+      onClickOutside: () => {
+        if (disableCloseOnClickOutside || !open) return;
+        onClose?.();
+      },
+      layerId: id
+    });
+    const onKeyDownHandler = (e) => {
+      onKeyDown?.(e);
+      if (e.code === "Tab") {
+        if (e.shiftKey && e.target === firstFocusable) {
+          e.preventDefault();
+          lastFocusable?.focus();
+          return;
+        }
+        if (e.target === lastFocusable && !e.shiftKey) {
+          e.preventDefault();
+          firstFocusable?.focus();
+          return;
+        }
+      }
+    };
+    const contextValue = useMemo(() => {
+      return { close: () => onClose?.(), headerRef, state };
+    }, [onClose, state]);
+    return (
+      // dialog element does seem to be interactive on MDN guideline
+      /* @__PURE__ */ jsxs(
+        "dialog",
+        {
+          className: classNames,
+          "data-anv": "drawer",
+          "data-anv-scroll-chaining": enableScrollChaining,
+          "data-anv-transition-state": state,
+          ref: combinedRef,
+          onCancel: onCancelHandler,
+          onKeyDown: onKeyDownHandler,
+          ...rest,
+          children: [
+            /* @__PURE__ */ jsx(ToastProvider, { isDialogToaster: isOpenOrOpening, children: /* @__PURE__ */ jsx(ToasterPopover, { children: /* @__PURE__ */ jsx(ToasterContent, { id: "drawer-toaster", ref: toasterRef }) }) }),
+            /* @__PURE__ */ jsx(DrillDownContext.Provider, { value: drillDownContextProviderValue, children: /* @__PURE__ */ jsx(DrawerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+              "section",
+              {
+                ref: contentRef,
+                className: styles.container,
+                "data-open": isOpenOrOpening,
+                children
+              }
+            ) }) })
+          ]
+        }
+      )
+    );
+  }),
+  {
+    /**
+     * Header component for the drawer that displays a title and close button.
+     *
+     * Features:
+     * - Displays the drawer title as a headline
+     * - Includes an accessible close button
+     * - Sticky positioning at the top of the drawer
+     * - Proper semantic HTML structure
+     * - Accessible with proper ARIA attributes
+     * - Consistent styling with the design system
+     * - Automatic close functionality
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Drawer.Header>Settings</Drawer.Header>
+     */
+    Header: DrawerHeader,
+    /**
+     * Footer component for the drawer that displays action buttons and controls.
+     *
+     * Features:
+     * - Flexible layout for action buttons and controls
+     * - Optional sticky positioning at the bottom
+     * - Proper semantic HTML structure
+     * - Accessible with proper ARIA attributes
+     * - Consistent styling with the design system
+     * - Supports all standard footer element props
+     * - Responsive design that adapts to content
+     *
+     * @example
+     * <Drawer.Footer sticky>
+     *   <Button onClick={handleSave}>Save</Button>
+     *   <Drawer.CancelButton>Cancel</Drawer.CancelButton>
+     * </Drawer.Footer>
+     */
+    Footer: DrawerFooter,
+    /**
+     * Content container for the drawer that holds the main content area.
+     *
+     * Features:
+     * - Flexible content area with proper spacing
+     * - Scrollable content when needed
+     * - Proper semantic HTML structure
+     * - Accessible with proper ARIA attributes
+     * - Consistent styling with the design system
+     * - Supports all standard div element props
+     * - Responsive design that adapts to content
+     * - Proper focus management
+     *
+     * @example
+     * <Drawer.Content>
+     *   <p>This is the main content of the drawer.</p>
+     *   <p>It can contain any type of content.</p>
+     * </Drawer.Content>
+     */
+    Content: DrawerContent,
+    /**
+     * A button component that automatically closes the drawer when clicked.
+     *
+     * Features:
+     * - Automatically closes the drawer when clicked
+     * - Extends Button component functionality
+     * - Accessible with proper ARIA attributes
+     * - Consistent styling with the design system
+     * - Supports all standard button props
+     * - Proper focus management
+     * - Can be used anywhere within the drawer context
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Drawer.CancelButton appearance="ghost" size="small">
+     *   Cancel
+     * </Drawer.CancelButton>
+     */
+    CancelButton: DrawerCancelButton
+  }
+);
+Drawer.displayName = "Drawer";
+
+export { Drawer as D };
+//# sourceMappingURL=Drawer-Dg35inxH.js.map