@launchpad-ui/drawer 0.4.3 → 0.4.5

package/dist/Drawer.d.ts

@@ -8,7 +8,7 @@ type DrawerProps = {
     theme?: 'dark' | 'default';
     hideCancel?: boolean;
 };
-declare const Drawer: (props: DrawerProps) => JSX.Element;
+declare const Drawer: (props: DrawerProps) => import("react/jsx-runtime").JSX.Element;
 export { Drawer };
 export type { DrawerProps };
 //# sourceMappingURL=Drawer.d.ts.map

package/dist/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../src/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAqCnD,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,MAAM,UAAW,WAAW,gBAIjC,CAAC;AA8GF,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,YAAY,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../src/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAqCnD,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,MAAM,UAAW,WAAW,4CAIjC,CAAC;AA8GF,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,YAAY,EAAE,WAAW,EAAE,CAAC"}

package/dist/DrawerHeader.d.ts

@@ -1,12 +1,12 @@
-import type { HTMLAttributes } from 'react';
-type DrawerHeaderProps = HTMLAttributes<HTMLDivElement> & {
+import type { ComponentProps } from 'react';
+type DrawerHeaderProps = ComponentProps<'div'> & {
     closeable?: boolean;
     titleID?: string;
     titleClassName?: string;
     onClose?(): void;
     'data-test-id'?: string;
 };
-declare const DrawerHeader: ({ className, children, titleID, titleClassName, "data-test-id": testId, ...rest }: DrawerHeaderProps) => JSX.Element;
+declare const DrawerHeader: ({ className, children, titleID, titleClassName, "data-test-id": testId, ...rest }: DrawerHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export { DrawerHeader };
 export type { DrawerHeaderProps };
 //# sourceMappingURL=DrawerHeader.d.ts.map

package/dist/DrawerHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerHeader.d.ts","sourceRoot":"","sources":["../src/DrawerHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,KAAK,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,YAAY,sFAOf,iBAAiB,gBAQnB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,YAAY,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"DrawerHeader.d.ts","sourceRoot":"","sources":["../src/DrawerHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,KAAK,iBAAiB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,YAAY,sFAOf,iBAAiB,4CAQnB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,YAAY,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/index.es.js

@@ -1,4 +1,5 @@
 import './style.css';
+import { jsx, jsxs } from "react/jsx-runtime";
 import { IconButton } from "@launchpad-ui/button";
 import { FocusTrap } from "@launchpad-ui/focus-trap";
 import { Close } from "@launchpad-ui/icons";
@@ -9,17 +10,16 @@ import { usePreventScroll } from "@react-aria/overlays";
 import { cx } from "classix";
 import { LazyMotion, m } from "framer-motion";
 import { useRef, useState, useEffect, Suspense } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 const DRAWER_LABELLED_BY = "drawer-title";
-const drawer = "_drawer_b2us9_12";
-const overlay$1 = "_overlay_b2us9_34";
-const content = "_content_b2us9_43";
-const small = "_small_b2us9_57";
-const medium = "_medium_b2us9_61";
-const large = "_large_b2us9_65";
-const xLarge = "_xLarge_b2us9_69";
-const full = "_full_b2us9_73";
-const closeButton = "_closeButton_b2us9_87";
+const drawer = "_drawer_1bcak_12";
+const overlay$1 = "_overlay_1bcak_31";
+const content = "_content_1bcak_37";
+const small = "_small_1bcak_51";
+const medium = "_medium_1bcak_55";
+const large = "_large_1bcak_59";
+const xLarge = "_xLarge_1bcak_63";
+const full = "_full_1bcak_67";
+const closeButton = "_closeButton_1bcak_81";
 const styles = {
   drawer,
   overlay: overlay$1,
@@ -32,30 +32,15 @@ const styles = {
   closeButton
 };
 const overlay = {
-  visible: {
-    opacity: 1,
-    transition: {
-      duration: 0.15
-    }
-  },
-  hidden: {
-    opacity: 0
-  }
+  visible: { opacity: 1, transition: { duration: 0.15 } },
+  hidden: { opacity: 0 }
 };
 const slideRight = {
-  hidden: {
-    opacity: 0,
-    x: "25%"
-  },
+  hidden: { opacity: 0, x: "25%" },
   visible: {
     opacity: 1,
     x: "0%",
-    transition: {
-      type: "spring",
-      delay: 0.15,
-      duration: 0.2,
-      bounce: 0
-    }
+    transition: { type: "spring", delay: 0.15, duration: 0.2, bounce: 0 }
   }
 };
 const loadFeatures = () => import(
@@ -63,11 +48,7 @@ const loadFeatures = () => import(
   /* webpackExports: "domAnimation" */
   "framer-motion"
 ).then((res) => res.domAnimation);
-const Drawer = (props) => /* @__PURE__ */ jsx(Portal, {
-  children: /* @__PURE__ */ jsx(DrawerContainer, {
-    ...props
-  })
-});
+const Drawer = (props) => /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DrawerContainer, { ...props }) });
 const DrawerContainer = ({
   className,
   children,
@@ -79,9 +60,7 @@ const DrawerContainer = ({
 }) => {
   const ref = useRef(null);
   const [isFocusWithin, setIsFocusWithin] = useState(false);
-  const {
-    focusWithinProps
-  } = useFocusWithin({
+  const { focusWithinProps } = useFocusWithin({
     onFocusWithinChange: (isFocusWithin2) => setIsFocusWithin(isFocusWithin2)
   });
   usePreventScroll();
@@ -119,58 +98,56 @@ const DrawerContainer = ({
       onCancel && onCancel();
     }
   };
-  return /* @__PURE__ */ jsx(LazyMotion, {
-    strict: true,
-    features: loadFeatures,
-    children: /* @__PURE__ */ jsx("div", {
+  return /* @__PURE__ */ jsx(LazyMotion, { strict: true, features: loadFeatures, children: /* @__PURE__ */ jsx(
+    "div",
+    {
       ...focusWithinProps,
       className: cx(styles.drawer, styles[size], className),
       "data-drawer": true,
       "data-test-id": testId,
       ref,
-      children: /* @__PURE__ */ jsx(m.div, {
-        initial: "hidden",
-        animate: "visible",
-        variants: overlay,
-        transition: {
-          duration: 0.15
-        },
-        role: "presentation",
-        className: styles.overlay,
-        onMouseDown: handleOverlayClick,
-        children: /* @__PURE__ */ jsx(FocusTrap, {
-          autoFocus: true,
-          restoreFocus: true,
-          children: /* @__PURE__ */ jsxs(m.div, {
-            initial: "hidden",
-            animate: "visible",
-            variants: slideRight,
-            role: "dialog",
-            "aria-labelledby": DRAWER_LABELLED_BY,
-            "aria-describedby": DRAWER_LABELLED_BY,
-            "aria-modal": true,
-            className: styles.content,
-            tabIndex: -1,
-            ...theme ? {
-              "data-theme": theme
-            } : {},
-            children: [!hideCancel && /* @__PURE__ */ jsx(IconButton, {
-              "aria-label": "close",
-              icon: /* @__PURE__ */ jsx(Close, {
-                size: "medium"
-              }),
-              className: styles.closeButton,
-              onClick: onCancel,
-              "data-test-id": "drawer-close-button"
-            }), /* @__PURE__ */ jsx(Suspense, {
-              fallback: /* @__PURE__ */ jsx(Progress, {}),
-              children
-            })]
-          })
-        })
-      })
-    })
-  });
+      children: /* @__PURE__ */ jsx(
+        m.div,
+        {
+          initial: "hidden",
+          animate: "visible",
+          variants: overlay,
+          transition: { duration: 0.15 },
+          role: "presentation",
+          className: styles.overlay,
+          onMouseDown: handleOverlayClick,
+          children: /* @__PURE__ */ jsx(FocusTrap, { autoFocus: true, restoreFocus: true, children: /* @__PURE__ */ jsxs(
+            m.div,
+            {
+              initial: "hidden",
+              animate: "visible",
+              variants: slideRight,
+              role: "dialog",
+              "aria-labelledby": DRAWER_LABELLED_BY,
+              "aria-describedby": DRAWER_LABELLED_BY,
+              "aria-modal": true,
+              className: styles.content,
+              tabIndex: -1,
+              ...theme ? { "data-theme": theme } : {},
+              children: [
+                !hideCancel && /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    "aria-label": "close",
+                    icon: /* @__PURE__ */ jsx(Close, { size: "medium" }),
+                    className: styles.closeButton,
+                    onClick: onCancel,
+                    "data-test-id": "drawer-close-button"
+                  }
+                ),
+                /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Progress, {}), children })
+              ]
+            }
+          ) })
+        }
+      )
+    }
+  ) });
 };
 const DrawerHeader = ({
   className,
@@ -180,16 +157,7 @@ const DrawerHeader = ({
   "data-test-id": testId = "drawer-header",
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx("div", {
-    "data-test-id": testId,
-    className,
-    ...rest,
-    children: /* @__PURE__ */ jsx("h2", {
-      id: DRAWER_LABELLED_BY,
-      className: titleClassName,
-      children
-    })
-  });
+  return /* @__PURE__ */ jsx("div", { "data-test-id": testId, className, ...rest, children: /* @__PURE__ */ jsx("h2", { id: DRAWER_LABELLED_BY, className: titleClassName, children }) });
 };
 export {
   Drawer,

package/dist/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../src/constants.ts","../src/Drawer.tsx","../src/DrawerHeader.tsx"],"sourcesContent":["export const DRAWER_LABELLED_BY = 'drawer-title';\n","import type { Variants } from 'framer-motion';\nimport type { MouseEvent, ReactNode } from 'react';\n\nimport { IconButton } from '@launchpad-ui/button';\nimport { FocusTrap } from '@launchpad-ui/focus-trap';\nimport { Close } from '@launchpad-ui/icons';\nimport { Portal } from '@launchpad-ui/portal';\nimport { Progress } from '@launchpad-ui/progress';\nimport { useFocusWithin } from '@react-aria/interactions';\nimport { usePreventScroll } from '@react-aria/overlays';\nimport { cx } from 'classix';\nimport { LazyMotion, m } from 'framer-motion';\nimport { useState, Suspense, useEffect, useRef } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\nimport styles from './styles/Drawer.module.css';\n\nconst overlay: Variants = {\n  visible: { opacity: 1, transition: { duration: 0.15 } },\n  hidden: { opacity: 0 },\n};\n\nconst slideRight: Variants = {\n  hidden: { opacity: 0, x: '25%' },\n  visible: {\n    opacity: 1,\n    x: '0%',\n    transition: { type: 'spring', delay: 0.15, duration: 0.2, bounce: 0 },\n  },\n};\n\nconst loadFeatures = () =>\n  import(\n    /* webpackChunkName: \"lp-drawer-framer-features\" */\n    /* webpackExports: \"domAnimation\" */\n    'framer-motion'\n  ).then((res) => res.domAnimation);\n\ntype DrawerProps = {\n  children?: ReactNode;\n  className?: string;\n  onCancel?(): void;\n  'data-test-id'?: string;\n  size?: 'small' | 'medium' | 'large' | 'xLarge' | 'full';\n  theme?: 'dark' | 'default';\n  hideCancel?: boolean;\n};\n\nconst Drawer = (props: DrawerProps) => (\n  <Portal>\n    <DrawerContainer {...props} />\n  </Portal>\n);\n\nconst DrawerContainer = ({\n  className,\n  children,\n  onCancel,\n  size = 'small',\n  'data-test-id': testId = 'drawer',\n  theme,\n  hideCancel = false,\n}: DrawerProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [isFocusWithin, setIsFocusWithin] = useState(false);\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithinChange: (isFocusWithin) => setIsFocusWithin(isFocusWithin),\n  });\n\n  usePreventScroll();\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      event.stopImmediatePropagation();\n      const latest = [...document.querySelectorAll('[data-drawer]')].pop();\n      if (event.key === 'Escape' && latest === ref.current && isFocusWithin) {\n        close();\n      }\n    };\n\n    const addOverlayAndEventHandler = () => {\n      document.body.classList.add('has-overlay');\n      document.addEventListener('keydown', handleEscape);\n    };\n\n    const removeOverlayAndEventHandler = () => {\n      document.body.classList.remove('has-overlay');\n      document.removeEventListener('keydown', handleEscape);\n    };\n\n    const close = () => {\n      onCancel?.();\n    };\n\n    if (isFocusWithin) {\n      addOverlayAndEventHandler();\n    }\n\n    if (!isFocusWithin) {\n      removeOverlayAndEventHandler();\n    }\n\n    return () => {\n      removeOverlayAndEventHandler();\n    };\n  }, [onCancel, testId, isFocusWithin]);\n\n  const handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target === event.currentTarget) {\n      onCancel && onCancel();\n    }\n  };\n\n  return (\n    <LazyMotion strict features={loadFeatures}>\n      <div\n        {...focusWithinProps}\n        className={cx(styles.drawer, styles[size], className)}\n        data-drawer\n        data-test-id={testId}\n        ref={ref}\n      >\n        <m.div\n          initial=\"hidden\"\n          animate=\"visible\"\n          variants={overlay}\n          transition={{ duration: 0.15 }}\n          role=\"presentation\"\n          className={styles.overlay}\n          onMouseDown={handleOverlayClick}\n        >\n          <FocusTrap autoFocus restoreFocus>\n            <m.div\n              initial=\"hidden\"\n              animate=\"visible\"\n              variants={slideRight}\n              role=\"dialog\"\n              aria-labelledby={DRAWER_LABELLED_BY}\n              aria-describedby={DRAWER_LABELLED_BY}\n              aria-modal\n              className={styles.content}\n              tabIndex={-1}\n              {...(theme ? { 'data-theme': theme } : {})}\n            >\n              {!hideCancel && (\n                <IconButton\n                  aria-label=\"close\"\n                  icon={<Close size=\"medium\" />}\n                  className={styles.closeButton}\n                  onClick={onCancel}\n                  data-test-id=\"drawer-close-button\"\n                />\n              )}\n              <Suspense fallback={<Progress />}>{children}</Suspense>\n            </m.div>\n          </FocusTrap>\n        </m.div>\n      </div>\n    </LazyMotion>\n  );\n};\n\nexport { Drawer };\nexport type { DrawerProps };\n","import type { HTMLAttributes } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\n\ntype DrawerHeaderProps = HTMLAttributes<HTMLDivElement> & {\n  closeable?: boolean;\n  titleID?: string;\n  titleClassName?: string;\n  onClose?(): void;\n  'data-test-id'?: string;\n};\n\nconst DrawerHeader = ({\n  className,\n  children,\n  titleID,\n  titleClassName,\n  'data-test-id': testId = 'drawer-header',\n  ...rest\n}: DrawerHeaderProps) => {\n  return (\n    <div data-test-id={testId} className={className} {...rest}>\n      <h2 id={DRAWER_LABELLED_BY} className={titleClassName}>\n        {children}\n      </h2>\n    </div>\n  );\n};\n\nexport { DrawerHeader };\nexport type { DrawerHeaderProps };\n"],"names":["overlay","visible","opacity","transition","duration","hidden","slideRight","x","type","delay","bounce","loadFeatures","then","res","domAnimation","Drawer","props","_jsx","Portal","children","DrawerContainer","className","onCancel","size","testId","theme","hideCancel","ref","useRef","isFocusWithin","setIsFocusWithin","useState","focusWithinProps","useFocusWithin","onFocusWithinChange","useEffect","handleEscape","event","stopImmediatePropagation","latest","document","querySelectorAll","pop","key","current","addOverlayAndEventHandler","body","classList","add","addEventListener","removeOverlayAndEventHandler","remove","removeEventListener","close","handleOverlayClick","target","currentTarget","LazyMotion","strict","features","cx","styles","drawer","m","div","initial","animate","variants","role","onMouseDown","FocusTrap","autoFocus","restoreFocus","DRAWER_LABELLED_BY","content","tabIndex","IconButton","icon","Close","closeButton","onClick","Suspense","fallback","Progress","DrawerHeader","titleID","titleClassName","rest","id"],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../src/constants.ts","../src/Drawer.tsx","../src/DrawerHeader.tsx"],"sourcesContent":["export const DRAWER_LABELLED_BY = 'drawer-title';\n","import type { Variants } from 'framer-motion';\nimport type { MouseEvent, ReactNode } from 'react';\n\nimport { IconButton } from '@launchpad-ui/button';\nimport { FocusTrap } from '@launchpad-ui/focus-trap';\nimport { Close } from '@launchpad-ui/icons';\nimport { Portal } from '@launchpad-ui/portal';\nimport { Progress } from '@launchpad-ui/progress';\nimport { useFocusWithin } from '@react-aria/interactions';\nimport { usePreventScroll } from '@react-aria/overlays';\nimport { cx } from 'classix';\nimport { LazyMotion, m } from 'framer-motion';\nimport { useState, Suspense, useEffect, useRef } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\nimport styles from './styles/Drawer.module.css';\n\nconst overlay: Variants = {\n  visible: { opacity: 1, transition: { duration: 0.15 } },\n  hidden: { opacity: 0 },\n};\n\nconst slideRight: Variants = {\n  hidden: { opacity: 0, x: '25%' },\n  visible: {\n    opacity: 1,\n    x: '0%',\n    transition: { type: 'spring', delay: 0.15, duration: 0.2, bounce: 0 },\n  },\n};\n\nconst loadFeatures = () =>\n  import(\n    /* webpackChunkName: \"lp-drawer-framer-features\" */\n    /* webpackExports: \"domAnimation\" */\n    'framer-motion'\n  ).then((res) => res.domAnimation);\n\ntype DrawerProps = {\n  children?: ReactNode;\n  className?: string;\n  onCancel?(): void;\n  'data-test-id'?: string;\n  size?: 'small' | 'medium' | 'large' | 'xLarge' | 'full';\n  theme?: 'dark' | 'default';\n  hideCancel?: boolean;\n};\n\nconst Drawer = (props: DrawerProps) => (\n  <Portal>\n    <DrawerContainer {...props} />\n  </Portal>\n);\n\nconst DrawerContainer = ({\n  className,\n  children,\n  onCancel,\n  size = 'small',\n  'data-test-id': testId = 'drawer',\n  theme,\n  hideCancel = false,\n}: DrawerProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [isFocusWithin, setIsFocusWithin] = useState(false);\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithinChange: (isFocusWithin) => setIsFocusWithin(isFocusWithin),\n  });\n\n  usePreventScroll();\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      event.stopImmediatePropagation();\n      const latest = [...document.querySelectorAll('[data-drawer]')].pop();\n      if (event.key === 'Escape' && latest === ref.current && isFocusWithin) {\n        close();\n      }\n    };\n\n    const addOverlayAndEventHandler = () => {\n      document.body.classList.add('has-overlay');\n      document.addEventListener('keydown', handleEscape);\n    };\n\n    const removeOverlayAndEventHandler = () => {\n      document.body.classList.remove('has-overlay');\n      document.removeEventListener('keydown', handleEscape);\n    };\n\n    const close = () => {\n      onCancel?.();\n    };\n\n    if (isFocusWithin) {\n      addOverlayAndEventHandler();\n    }\n\n    if (!isFocusWithin) {\n      removeOverlayAndEventHandler();\n    }\n\n    return () => {\n      removeOverlayAndEventHandler();\n    };\n  }, [onCancel, testId, isFocusWithin]);\n\n  const handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target === event.currentTarget) {\n      onCancel && onCancel();\n    }\n  };\n\n  return (\n    <LazyMotion strict features={loadFeatures}>\n      <div\n        {...focusWithinProps}\n        className={cx(styles.drawer, styles[size], className)}\n        data-drawer\n        data-test-id={testId}\n        ref={ref}\n      >\n        <m.div\n          initial=\"hidden\"\n          animate=\"visible\"\n          variants={overlay}\n          transition={{ duration: 0.15 }}\n          role=\"presentation\"\n          className={styles.overlay}\n          onMouseDown={handleOverlayClick}\n        >\n          <FocusTrap autoFocus restoreFocus>\n            <m.div\n              initial=\"hidden\"\n              animate=\"visible\"\n              variants={slideRight}\n              role=\"dialog\"\n              aria-labelledby={DRAWER_LABELLED_BY}\n              aria-describedby={DRAWER_LABELLED_BY}\n              aria-modal\n              className={styles.content}\n              tabIndex={-1}\n              {...(theme ? { 'data-theme': theme } : {})}\n            >\n              {!hideCancel && (\n                <IconButton\n                  aria-label=\"close\"\n                  icon={<Close size=\"medium\" />}\n                  className={styles.closeButton}\n                  onClick={onCancel}\n                  data-test-id=\"drawer-close-button\"\n                />\n              )}\n              <Suspense fallback={<Progress />}>{children}</Suspense>\n            </m.div>\n          </FocusTrap>\n        </m.div>\n      </div>\n    </LazyMotion>\n  );\n};\n\nexport { Drawer };\nexport type { DrawerProps };\n","import type { ComponentProps } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\n\ntype DrawerHeaderProps = ComponentProps<'div'> & {\n  closeable?: boolean;\n  titleID?: string;\n  titleClassName?: string;\n  onClose?(): void;\n  'data-test-id'?: string;\n};\n\nconst DrawerHeader = ({\n  className,\n  children,\n  titleID,\n  titleClassName,\n  'data-test-id': testId = 'drawer-header',\n  ...rest\n}: DrawerHeaderProps) => {\n  return (\n    <div data-test-id={testId} className={className} {...rest}>\n      <h2 id={DRAWER_LABELLED_BY} className={titleClassName}>\n        {children}\n      </h2>\n    </div>\n  );\n};\n\nexport { DrawerHeader };\nexport type { DrawerHeaderProps };\n"],"names":["isFocusWithin"],"mappings":"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"}

package/dist/index.js

@@ -1,6 +1,29 @@
 require('./style.css');
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
 const button = require("@launchpad-ui/button");
 const focusTrap = require("@launchpad-ui/focus-trap");
 const icons = require("@launchpad-ui/icons");
@@ -11,35 +34,16 @@ const overlays = require("@react-aria/overlays");
 const classix = require("classix");
 const framerMotion = require("framer-motion");
 const react = require("react");
-const jsxRuntime = require("react/jsx-runtime");
-function _interopNamespace(e) {
-  if (e && e.__esModule)
-    return e;
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
 const DRAWER_LABELLED_BY = "drawer-title";
-const drawer = "_drawer_b2us9_12";
-const overlay$1 = "_overlay_b2us9_34";
-const content = "_content_b2us9_43";
-const small = "_small_b2us9_57";
-const medium = "_medium_b2us9_61";
-const large = "_large_b2us9_65";
-const xLarge = "_xLarge_b2us9_69";
-const full = "_full_b2us9_73";
-const closeButton = "_closeButton_b2us9_87";
+const drawer = "_drawer_1bcak_12";
+const overlay$1 = "_overlay_1bcak_31";
+const content = "_content_1bcak_37";
+const small = "_small_1bcak_51";
+const medium = "_medium_1bcak_55";
+const large = "_large_1bcak_59";
+const xLarge = "_xLarge_1bcak_63";
+const full = "_full_1bcak_67";
+const closeButton = "_closeButton_1bcak_81";
 const styles = {
   drawer,
   overlay: overlay$1,
@@ -52,40 +56,23 @@ const styles = {
   closeButton
 };
 const overlay = {
-  visible: {
-    opacity: 1,
-    transition: {
-      duration: 0.15
-    }
-  },
-  hidden: {
-    opacity: 0
-  }
+  visible: { opacity: 1, transition: { duration: 0.15 } },
+  hidden: { opacity: 0 }
 };
 const slideRight = {
-  hidden: {
-    opacity: 0,
-    x: "25%"
-  },
+  hidden: { opacity: 0, x: "25%" },
   visible: {
     opacity: 1,
     x: "0%",
-    transition: {
-      type: "spring",
-      delay: 0.15,
-      duration: 0.2,
-      bounce: 0
-    }
+    transition: { type: "spring", delay: 0.15, duration: 0.2, bounce: 0 }
   }
 };
-const loadFeatures = () => Promise.resolve().then(() => /* @__PURE__ */ _interopNamespace(require(
+const loadFeatures = () => import(
+  /* webpackChunkName: "lp-drawer-framer-features" */
+  /* webpackExports: "domAnimation" */
   "framer-motion"
-))).then((res) => res.domAnimation);
-const Drawer = (props) => /* @__PURE__ */ jsxRuntime.jsx(portal.Portal, {
-  children: /* @__PURE__ */ jsxRuntime.jsx(DrawerContainer, {
-    ...props
-  })
-});
+).then((res) => res.domAnimation);
+const Drawer = (props) => /* @__PURE__ */ jsxRuntime.jsx(portal.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(DrawerContainer, { ...props }) });
 const DrawerContainer = ({
   className,
   children,
@@ -97,9 +84,7 @@ const DrawerContainer = ({
 }) => {
   const ref = react.useRef(null);
   const [isFocusWithin, setIsFocusWithin] = react.useState(false);
-  const {
-    focusWithinProps
-  } = interactions.useFocusWithin({
+  const { focusWithinProps } = interactions.useFocusWithin({
     onFocusWithinChange: (isFocusWithin2) => setIsFocusWithin(isFocusWithin2)
   });
   overlays.usePreventScroll();
@@ -137,58 +122,56 @@ const DrawerContainer = ({
       onCancel && onCancel();
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.LazyMotion, {
-    strict: true,
-    features: loadFeatures,
-    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.LazyMotion, { strict: true, features: loadFeatures, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
       ...focusWithinProps,
       className: classix.cx(styles.drawer, styles[size], className),
       "data-drawer": true,
       "data-test-id": testId,
       ref,
-      children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.m.div, {
-        initial: "hidden",
-        animate: "visible",
-        variants: overlay,
-        transition: {
-          duration: 0.15
-        },
-        role: "presentation",
-        className: styles.overlay,
-        onMouseDown: handleOverlayClick,
-        children: /* @__PURE__ */ jsxRuntime.jsx(focusTrap.FocusTrap, {
-          autoFocus: true,
-          restoreFocus: true,
-          children: /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.m.div, {
-            initial: "hidden",
-            animate: "visible",
-            variants: slideRight,
-            role: "dialog",
-            "aria-labelledby": DRAWER_LABELLED_BY,
-            "aria-describedby": DRAWER_LABELLED_BY,
-            "aria-modal": true,
-            className: styles.content,
-            tabIndex: -1,
-            ...theme ? {
-              "data-theme": theme
-            } : {},
-            children: [!hideCancel && /* @__PURE__ */ jsxRuntime.jsx(button.IconButton, {
-              "aria-label": "close",
-              icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Close, {
-                size: "medium"
-              }),
-              className: styles.closeButton,
-              onClick: onCancel,
-              "data-test-id": "drawer-close-button"
-            }), /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, {
-              fallback: /* @__PURE__ */ jsxRuntime.jsx(progress.Progress, {}),
-              children
-            })]
-          })
-        })
-      })
-    })
-  });
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.m.div,
+        {
+          initial: "hidden",
+          animate: "visible",
+          variants: overlay,
+          transition: { duration: 0.15 },
+          role: "presentation",
+          className: styles.overlay,
+          onMouseDown: handleOverlayClick,
+          children: /* @__PURE__ */ jsxRuntime.jsx(focusTrap.FocusTrap, { autoFocus: true, restoreFocus: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            framerMotion.m.div,
+            {
+              initial: "hidden",
+              animate: "visible",
+              variants: slideRight,
+              role: "dialog",
+              "aria-labelledby": DRAWER_LABELLED_BY,
+              "aria-describedby": DRAWER_LABELLED_BY,
+              "aria-modal": true,
+              className: styles.content,
+              tabIndex: -1,
+              ...theme ? { "data-theme": theme } : {},
+              children: [
+                !hideCancel && /* @__PURE__ */ jsxRuntime.jsx(
+                  button.IconButton,
+                  {
+                    "aria-label": "close",
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Close, { size: "medium" }),
+                    className: styles.closeButton,
+                    onClick: onCancel,
+                    "data-test-id": "drawer-close-button"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(progress.Progress, {}), children })
+              ]
+            }
+          ) })
+        }
+      )
+    }
+  ) });
 };
 const DrawerHeader = ({
   className,
@@ -198,16 +181,7 @@ const DrawerHeader = ({
   "data-test-id": testId = "drawer-header",
   ...rest
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    "data-test-id": testId,
-    className,
-    ...rest,
-    children: /* @__PURE__ */ jsxRuntime.jsx("h2", {
-      id: DRAWER_LABELLED_BY,
-      className: titleClassName,
-      children
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": testId, className, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { id: DRAWER_LABELLED_BY, className: titleClassName, children }) });
 };
 exports.Drawer = Drawer;
 exports.DrawerHeader = DrawerHeader;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/constants.ts","../src/Drawer.tsx","../src/DrawerHeader.tsx"],"sourcesContent":["export const DRAWER_LABELLED_BY = 'drawer-title';\n","import type { Variants } from 'framer-motion';\nimport type { MouseEvent, ReactNode } from 'react';\n\nimport { IconButton } from '@launchpad-ui/button';\nimport { FocusTrap } from '@launchpad-ui/focus-trap';\nimport { Close } from '@launchpad-ui/icons';\nimport { Portal } from '@launchpad-ui/portal';\nimport { Progress } from '@launchpad-ui/progress';\nimport { useFocusWithin } from '@react-aria/interactions';\nimport { usePreventScroll } from '@react-aria/overlays';\nimport { cx } from 'classix';\nimport { LazyMotion, m } from 'framer-motion';\nimport { useState, Suspense, useEffect, useRef } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\nimport styles from './styles/Drawer.module.css';\n\nconst overlay: Variants = {\n  visible: { opacity: 1, transition: { duration: 0.15 } },\n  hidden: { opacity: 0 },\n};\n\nconst slideRight: Variants = {\n  hidden: { opacity: 0, x: '25%' },\n  visible: {\n    opacity: 1,\n    x: '0%',\n    transition: { type: 'spring', delay: 0.15, duration: 0.2, bounce: 0 },\n  },\n};\n\nconst loadFeatures = () =>\n  import(\n    /* webpackChunkName: \"lp-drawer-framer-features\" */\n    /* webpackExports: \"domAnimation\" */\n    'framer-motion'\n  ).then((res) => res.domAnimation);\n\ntype DrawerProps = {\n  children?: ReactNode;\n  className?: string;\n  onCancel?(): void;\n  'data-test-id'?: string;\n  size?: 'small' | 'medium' | 'large' | 'xLarge' | 'full';\n  theme?: 'dark' | 'default';\n  hideCancel?: boolean;\n};\n\nconst Drawer = (props: DrawerProps) => (\n  <Portal>\n    <DrawerContainer {...props} />\n  </Portal>\n);\n\nconst DrawerContainer = ({\n  className,\n  children,\n  onCancel,\n  size = 'small',\n  'data-test-id': testId = 'drawer',\n  theme,\n  hideCancel = false,\n}: DrawerProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [isFocusWithin, setIsFocusWithin] = useState(false);\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithinChange: (isFocusWithin) => setIsFocusWithin(isFocusWithin),\n  });\n\n  usePreventScroll();\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      event.stopImmediatePropagation();\n      const latest = [...document.querySelectorAll('[data-drawer]')].pop();\n      if (event.key === 'Escape' && latest === ref.current && isFocusWithin) {\n        close();\n      }\n    };\n\n    const addOverlayAndEventHandler = () => {\n      document.body.classList.add('has-overlay');\n      document.addEventListener('keydown', handleEscape);\n    };\n\n    const removeOverlayAndEventHandler = () => {\n      document.body.classList.remove('has-overlay');\n      document.removeEventListener('keydown', handleEscape);\n    };\n\n    const close = () => {\n      onCancel?.();\n    };\n\n    if (isFocusWithin) {\n      addOverlayAndEventHandler();\n    }\n\n    if (!isFocusWithin) {\n      removeOverlayAndEventHandler();\n    }\n\n    return () => {\n      removeOverlayAndEventHandler();\n    };\n  }, [onCancel, testId, isFocusWithin]);\n\n  const handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target === event.currentTarget) {\n      onCancel && onCancel();\n    }\n  };\n\n  return (\n    <LazyMotion strict features={loadFeatures}>\n      <div\n        {...focusWithinProps}\n        className={cx(styles.drawer, styles[size], className)}\n        data-drawer\n        data-test-id={testId}\n        ref={ref}\n      >\n        <m.div\n          initial=\"hidden\"\n          animate=\"visible\"\n          variants={overlay}\n          transition={{ duration: 0.15 }}\n          role=\"presentation\"\n          className={styles.overlay}\n          onMouseDown={handleOverlayClick}\n        >\n          <FocusTrap autoFocus restoreFocus>\n            <m.div\n              initial=\"hidden\"\n              animate=\"visible\"\n              variants={slideRight}\n              role=\"dialog\"\n              aria-labelledby={DRAWER_LABELLED_BY}\n              aria-describedby={DRAWER_LABELLED_BY}\n              aria-modal\n              className={styles.content}\n              tabIndex={-1}\n              {...(theme ? { 'data-theme': theme } : {})}\n            >\n              {!hideCancel && (\n                <IconButton\n                  aria-label=\"close\"\n                  icon={<Close size=\"medium\" />}\n                  className={styles.closeButton}\n                  onClick={onCancel}\n                  data-test-id=\"drawer-close-button\"\n                />\n              )}\n              <Suspense fallback={<Progress />}>{children}</Suspense>\n            </m.div>\n          </FocusTrap>\n        </m.div>\n      </div>\n    </LazyMotion>\n  );\n};\n\nexport { Drawer };\nexport type { DrawerProps };\n","import type { HTMLAttributes } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\n\ntype DrawerHeaderProps = HTMLAttributes<HTMLDivElement> & {\n  closeable?: boolean;\n  titleID?: string;\n  titleClassName?: string;\n  onClose?(): void;\n  'data-test-id'?: string;\n};\n\nconst DrawerHeader = ({\n  className,\n  children,\n  titleID,\n  titleClassName,\n  'data-test-id': testId = 'drawer-header',\n  ...rest\n}: DrawerHeaderProps) => {\n  return (\n    <div data-test-id={testId} className={className} {...rest}>\n      <h2 id={DRAWER_LABELLED_BY} className={titleClassName}>\n        {children}\n      </h2>\n    </div>\n  );\n};\n\nexport { DrawerHeader };\nexport type { DrawerHeaderProps };\n"],"names":["overlay","visible","opacity","transition","duration","hidden","slideRight","x","type","delay","bounce","loadFeatures","then","res","domAnimation","Drawer","props","_jsx","Portal","children","DrawerContainer","className","onCancel","size","testId","theme","hideCancel","ref","useRef","isFocusWithin","setIsFocusWithin","useState","focusWithinProps","useFocusWithin","onFocusWithinChange","usePreventScroll","useEffect","handleEscape","event","stopImmediatePropagation","latest","document","querySelectorAll","pop","key","current","addOverlayAndEventHandler","body","classList","add","addEventListener","removeOverlayAndEventHandler","remove","removeEventListener","close","handleOverlayClick","target","currentTarget","LazyMotion","strict","features","cx","styles","drawer","m","div","initial","animate","variants","role","onMouseDown","FocusTrap","autoFocus","restoreFocus","DRAWER_LABELLED_BY","content","tabIndex","IconButton","icon","Close","closeButton","onClick","Suspense","fallback","Progress","DrawerHeader","titleID","titleClassName","rest","id"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/constants.ts","../src/Drawer.tsx","../src/DrawerHeader.tsx"],"sourcesContent":["export const DRAWER_LABELLED_BY = 'drawer-title';\n","import type { Variants } from 'framer-motion';\nimport type { MouseEvent, ReactNode } from 'react';\n\nimport { IconButton } from '@launchpad-ui/button';\nimport { FocusTrap } from '@launchpad-ui/focus-trap';\nimport { Close } from '@launchpad-ui/icons';\nimport { Portal } from '@launchpad-ui/portal';\nimport { Progress } from '@launchpad-ui/progress';\nimport { useFocusWithin } from '@react-aria/interactions';\nimport { usePreventScroll } from '@react-aria/overlays';\nimport { cx } from 'classix';\nimport { LazyMotion, m } from 'framer-motion';\nimport { useState, Suspense, useEffect, useRef } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\nimport styles from './styles/Drawer.module.css';\n\nconst overlay: Variants = {\n  visible: { opacity: 1, transition: { duration: 0.15 } },\n  hidden: { opacity: 0 },\n};\n\nconst slideRight: Variants = {\n  hidden: { opacity: 0, x: '25%' },\n  visible: {\n    opacity: 1,\n    x: '0%',\n    transition: { type: 'spring', delay: 0.15, duration: 0.2, bounce: 0 },\n  },\n};\n\nconst loadFeatures = () =>\n  import(\n    /* webpackChunkName: \"lp-drawer-framer-features\" */\n    /* webpackExports: \"domAnimation\" */\n    'framer-motion'\n  ).then((res) => res.domAnimation);\n\ntype DrawerProps = {\n  children?: ReactNode;\n  className?: string;\n  onCancel?(): void;\n  'data-test-id'?: string;\n  size?: 'small' | 'medium' | 'large' | 'xLarge' | 'full';\n  theme?: 'dark' | 'default';\n  hideCancel?: boolean;\n};\n\nconst Drawer = (props: DrawerProps) => (\n  <Portal>\n    <DrawerContainer {...props} />\n  </Portal>\n);\n\nconst DrawerContainer = ({\n  className,\n  children,\n  onCancel,\n  size = 'small',\n  'data-test-id': testId = 'drawer',\n  theme,\n  hideCancel = false,\n}: DrawerProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [isFocusWithin, setIsFocusWithin] = useState(false);\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithinChange: (isFocusWithin) => setIsFocusWithin(isFocusWithin),\n  });\n\n  usePreventScroll();\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      event.stopImmediatePropagation();\n      const latest = [...document.querySelectorAll('[data-drawer]')].pop();\n      if (event.key === 'Escape' && latest === ref.current && isFocusWithin) {\n        close();\n      }\n    };\n\n    const addOverlayAndEventHandler = () => {\n      document.body.classList.add('has-overlay');\n      document.addEventListener('keydown', handleEscape);\n    };\n\n    const removeOverlayAndEventHandler = () => {\n      document.body.classList.remove('has-overlay');\n      document.removeEventListener('keydown', handleEscape);\n    };\n\n    const close = () => {\n      onCancel?.();\n    };\n\n    if (isFocusWithin) {\n      addOverlayAndEventHandler();\n    }\n\n    if (!isFocusWithin) {\n      removeOverlayAndEventHandler();\n    }\n\n    return () => {\n      removeOverlayAndEventHandler();\n    };\n  }, [onCancel, testId, isFocusWithin]);\n\n  const handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target === event.currentTarget) {\n      onCancel && onCancel();\n    }\n  };\n\n  return (\n    <LazyMotion strict features={loadFeatures}>\n      <div\n        {...focusWithinProps}\n        className={cx(styles.drawer, styles[size], className)}\n        data-drawer\n        data-test-id={testId}\n        ref={ref}\n      >\n        <m.div\n          initial=\"hidden\"\n          animate=\"visible\"\n          variants={overlay}\n          transition={{ duration: 0.15 }}\n          role=\"presentation\"\n          className={styles.overlay}\n          onMouseDown={handleOverlayClick}\n        >\n          <FocusTrap autoFocus restoreFocus>\n            <m.div\n              initial=\"hidden\"\n              animate=\"visible\"\n              variants={slideRight}\n              role=\"dialog\"\n              aria-labelledby={DRAWER_LABELLED_BY}\n              aria-describedby={DRAWER_LABELLED_BY}\n              aria-modal\n              className={styles.content}\n              tabIndex={-1}\n              {...(theme ? { 'data-theme': theme } : {})}\n            >\n              {!hideCancel && (\n                <IconButton\n                  aria-label=\"close\"\n                  icon={<Close size=\"medium\" />}\n                  className={styles.closeButton}\n                  onClick={onCancel}\n                  data-test-id=\"drawer-close-button\"\n                />\n              )}\n              <Suspense fallback={<Progress />}>{children}</Suspense>\n            </m.div>\n          </FocusTrap>\n        </m.div>\n      </div>\n    </LazyMotion>\n  );\n};\n\nexport { Drawer };\nexport type { DrawerProps };\n","import type { ComponentProps } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\n\ntype DrawerHeaderProps = ComponentProps<'div'> & {\n  closeable?: boolean;\n  titleID?: string;\n  titleClassName?: string;\n  onClose?(): void;\n  'data-test-id'?: string;\n};\n\nconst DrawerHeader = ({\n  className,\n  children,\n  titleID,\n  titleClassName,\n  'data-test-id': testId = 'drawer-header',\n  ...rest\n}: DrawerHeaderProps) => {\n  return (\n    <div data-test-id={testId} className={className} {...rest}>\n      <h2 id={DRAWER_LABELLED_BY} className={titleClassName}>\n        {children}\n      </h2>\n    </div>\n  );\n};\n\nexport { DrawerHeader };\nexport type { DrawerHeaderProps };\n"],"names":["jsx","Portal","useRef","useState","useFocusWithin","isFocusWithin","usePreventScroll","useEffect","LazyMotion","cx","m","FocusTrap","jsxs","IconButton","Close","Suspense","Progress"],"mappings":"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"}

package/dist/style.css

@@ -5,7 +5,7 @@
 [data-theme='dark'] {
   --lp-component-drawer-color-bg-overlay: rgba(25, 25, 25, 0.75);
 }
-._drawer_b2us9_12 {
+._drawer_1bcak_12 {
   --page-gutter-width: 1rem;
 
   z-index: var(--lp-z-index-400);
@@ -17,14 +17,14 @@
   transform: translateZ(0);
 }
 @media screen and (min-width: 740px) {
-  ._drawer_b2us9_12 {
+  ._drawer_1bcak_12 {
     --page-gutter-width: 4rem;
   }
 }
 .has-overlay {
   overflow: hidden;
 }
-._overlay_b2us9_34 {
+._overlay_1bcak_31 {
   position: fixed;
   top: 0;
   right: 0;
@@ -33,7 +33,7 @@
   background-color: rgba(40, 40, 40, 0.5);
   background-color: var(--lp-component-drawer-color-bg-overlay);
 }
-._content_b2us9_43 {
+._content_1bcak_37 {
   background-color: var(--lp-color-bg-ui-primary);
   position: absolute;
   top: 0;
@@ -46,35 +46,35 @@
   box-shadow: -1px 0 4px var(--lp-color-shadow-ui-primary);
 }
 @media screen and (min-width: 740px) {
-  ._small_b2us9_57 ._content_b2us9_43 {
+  ._small_1bcak_51 ._content_1bcak_37 {
     width: 45rem;
   }
 
-  ._medium_b2us9_61 ._content_b2us9_43 {
+  ._medium_1bcak_55 ._content_1bcak_37 {
     width: 65rem;
   }
 
-  ._large_b2us9_65 ._content_b2us9_43 {
+  ._large_1bcak_59 ._content_1bcak_37 {
     width: 80rem;
   }
 
-  ._xLarge_b2us9_69 ._content_b2us9_43 {
+  ._xLarge_1bcak_63 ._content_1bcak_37 {
     width: 120rem;
   }
 
-  ._full_b2us9_73 ._content_b2us9_43 {
+  ._full_1bcak_67 ._content_1bcak_37 {
     width: 100%;
     max-width: none;
     max-width: initial;
   }
 }
-._content_b2us9_43 section {
+._content_1bcak_37 section {
   padding: 3.2rem var(--page-gutter-width);
 }
-._content_b2us9_43 section + section {
+._content_1bcak_37 section + section {
   border-top: 1px dotted var(--lp-color-gray-100);
 }
-._closeButton_b2us9_87 {
+._closeButton_1bcak_81 {
   position: absolute;
   right: 1rem;
   top: 1rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchpad-ui/drawer",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "status": "alpha",
   "publishConfig": {
     "access": "public"
@@ -30,10 +30,10 @@
     "@react-aria/overlays": "3.12.1",
     "classix": "2.1.17",
     "framer-motion": "9.0.3",
-    "@launchpad-ui/button": "~0.8.12",
+    "@launchpad-ui/button": "~0.8.13",
     "@launchpad-ui/focus-trap": "~0.1.6",
     "@launchpad-ui/icons": "~0.8.6",
-    "@launchpad-ui/portal": "~0.1.2",
+    "@launchpad-ui/portal": "~0.1.3",
     "@launchpad-ui/progress": "~0.5.25",
     "@launchpad-ui/tokens": "~0.5.6"
   },