@launchpad-ui/drawer 0.9.20 → 0.9.22

package/dist/Progress.d.ts

@@ -0,0 +1,3 @@
+declare const Progress: () => import("react/jsx-runtime").JSX.Element;
+export { Progress };
+//# sourceMappingURL=Progress.d.ts.map

package/dist/Progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../src/Progress.tsx"],"names":[],"mappings":"AAaA,QAAA,MAAM,QAAQ,+CA6Bb,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import './style.css';
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useRef, useState, useEffect, Suspense } from "react";
 import { useFocusWithin } from "react-aria/useFocusWithin";
 import { usePreventScroll } from "react-aria/usePreventScroll";
@@ -9,17 +9,65 @@ import { IconButton } from "@launchpad-ui/button";
 import { FocusTrap } from "@launchpad-ui/focus-trap";
 import { Icon } from "@launchpad-ui/icons";
 import { Portal } from "@launchpad-ui/portal";
-import { Progress } from "@launchpad-ui/progress";
 const DRAWER_LABELLED_BY = "drawer-title";
-const closeButton = "_kZABG_closeButton";
-const content = "_kZABG_content";
-const drawer = "_kZABG_drawer";
-const full = "_kZABG_full";
-const large = "_kZABG_large";
-const medium = "_kZABG_medium";
-const overlay$1 = "_kZABG_overlay";
-const small = "_kZABG_small";
-const xLarge = "_kZABG_xLarge";
+const Progress$1 = "N80__q_Progress";
+const styles$1 = {
+  Progress: Progress$1,
+  "Progress--indeterminate": "N80__q_Progress--indeterminate",
+  "Progress-head": "N80__q_Progress-head",
+  "Progress-track": "N80__q_Progress-track"
+};
+const DIAMETER = 16;
+const STROKE_WIDTH = DIAMETER * 0.1;
+const RADIUS = DIAMETER * 0.5 - STROKE_WIDTH * 0.5;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+const Progress = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className: cx(styles$1.Progress, styles$1["Progress--indeterminate"]),
+    width: DIAMETER,
+    height: DIAMETER,
+    viewBox: `0 0 ${DIAMETER} ${DIAMETER}`,
+    "data-test-id": "progress",
+    role: "progressbar",
+    "aria-valuemin": 0,
+    "aria-valuetext": "loading",
+    "aria-valuemax": 100,
+    children: [
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          className: styles$1["Progress-track"],
+          cx: DIAMETER / 2,
+          cy: DIAMETER / 2,
+          r: RADIUS,
+          strokeWidth: STROKE_WIDTH
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          className: styles$1["Progress-head"],
+          cx: DIAMETER / 2,
+          cy: DIAMETER / 2,
+          r: RADIUS,
+          strokeWidth: STROKE_WIDTH,
+          strokeDasharray: CIRCUMFERENCE,
+          strokeDashoffset: CIRCUMFERENCE * 0.75
+        }
+      )
+    ]
+  }
+);
+const closeButton = "nI2R0W_closeButton";
+const content = "nI2R0W_content";
+const drawer = "nI2R0W_drawer";
+const full = "nI2R0W_full";
+const large = "nI2R0W_large";
+const medium = "nI2R0W_medium";
+const overlay$1 = "nI2R0W_overlay";
+const small = "nI2R0W_small";
+const xLarge = "nI2R0W_xLarge";
 const styles = {
   closeButton,
   content,

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 { MouseEvent, ReactNode } from 'react';\nimport { Suspense, useEffect, useRef, useState } from 'react';\nimport { useFocusWithin } from 'react-aria/useFocusWithin';\nimport { usePreventScroll } from 'react-aria/usePreventScroll';\nimport { cx } from 'classix';\nimport type { Variants } from 'framer-motion';\nimport { LazyMotion, m } from 'framer-motion';\n\nimport { IconButton } from '@launchpad-ui/button';\nimport { FocusTrap } from '@launchpad-ui/focus-trap';\nimport { Icon } from '@launchpad-ui/icons';\nimport { Portal } from '@launchpad-ui/portal';\nimport { Progress } from '@launchpad-ui/progress';\n\nimport { DRAWER_LABELLED_BY } from './constants';\n\nimport styles from './styles/Drawer.module.css';\n\nconst overlay: Variants = {\n\tvisible: { opacity: 1, transition: { duration: 0.15 } },\n\thidden: { opacity: 0 },\n};\n\nconst slideRight: Variants = {\n\thidden: { opacity: 0, x: '25%' },\n\tvisible: {\n\t\topacity: 1,\n\t\tx: '0%',\n\t\ttransition: { type: 'spring', delay: 0.15, duration: 0.2, bounce: 0 },\n\t},\n};\n\nconst loadFeatures = () =>\n\timport(\n\t\t/* webpackChunkName: \"lp-drawer-framer-features\" */\n\t\t/* webpackExports: \"domAnimation\" */\n\t\t'framer-motion'\n\t).then((res) => res.domAnimation);\n\ntype DrawerProps = {\n\tchildren?: ReactNode;\n\tclassName?: string;\n\tonCancel?(): void;\n\t'data-test-id'?: string;\n\tsize?: 'small' | 'medium' | 'large' | 'xLarge' | 'full';\n\ttheme?: 'dark' | 'default';\n\thideCancel?: boolean;\n};\n\n/**\n * @deprecated use `Modal` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-overlays-modal--docs#drawer\n */\nconst Drawer = (props: DrawerProps) => (\n\t<Portal>\n\t\t<DrawerContainer {...props} />\n\t</Portal>\n);\n\nconst DrawerContainer = ({\n\tclassName,\n\tchildren,\n\tonCancel,\n\tsize = 'small',\n\t'data-test-id': testId = 'drawer',\n\ttheme,\n\thideCancel = false,\n}: DrawerProps) => {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst [isFocusWithin, setIsFocusWithin] = useState(false);\n\tconst { focusWithinProps } = useFocusWithin({\n\t\tonFocusWithinChange: (focusWithin) => setIsFocusWithin(focusWithin),\n\t});\n\n\tusePreventScroll();\n\n\tuseEffect(() => {\n\t\tconst handleEscape = (event: KeyboardEvent) => {\n\t\t\tevent.stopImmediatePropagation();\n\t\t\tconst latest = [...document.querySelectorAll('[data-drawer]')].pop();\n\t\t\tif (event.key === 'Escape' && latest === ref.current && isFocusWithin) {\n\t\t\t\tclose();\n\t\t\t}\n\t\t};\n\n\t\tconst addOverlayAndEventHandler = () => {\n\t\t\tdocument.body.classList.add('has-overlay');\n\t\t\tdocument.addEventListener('keydown', handleEscape);\n\t\t};\n\n\t\tconst removeOverlayAndEventHandler = () => {\n\t\t\tdocument.body.classList.remove('has-overlay');\n\t\t\tdocument.removeEventListener('keydown', handleEscape);\n\t\t};\n\n\t\tconst close = () => {\n\t\t\tonCancel?.();\n\t\t};\n\n\t\tif (isFocusWithin) {\n\t\t\taddOverlayAndEventHandler();\n\t\t}\n\n\t\tif (!isFocusWithin) {\n\t\t\tremoveOverlayAndEventHandler();\n\t\t}\n\n\t\treturn () => {\n\t\t\tremoveOverlayAndEventHandler();\n\t\t};\n\t}, [onCancel, isFocusWithin]);\n\n\tconst handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n\t\tif (event.target === event.currentTarget) {\n\t\t\tonCancel?.();\n\t\t}\n\t};\n\n\treturn (\n\t\t<LazyMotion strict features={loadFeatures}>\n\t\t\t<div\n\t\t\t\t{...focusWithinProps}\n\t\t\t\tclassName={cx(styles.drawer, styles[size], className)}\n\t\t\t\tdata-drawer\n\t\t\t\tdata-test-id={testId}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t<m.div\n\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\tvariants={overlay}\n\t\t\t\t\ttransition={{ duration: 0.15 }}\n\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\tclassName={styles.overlay}\n\t\t\t\t\tonMouseDown={handleOverlayClick}\n\t\t\t\t>\n\t\t\t\t\t<FocusTrap autoFocus restoreFocus>\n\t\t\t\t\t\t<m.div\n\t\t\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\t\t\tvariants={slideRight}\n\t\t\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\t\t\taria-labelledby={DRAWER_LABELLED_BY}\n\t\t\t\t\t\t\taria-describedby={DRAWER_LABELLED_BY}\n\t\t\t\t\t\t\taria-modal\n\t\t\t\t\t\t\tclassName={styles.content}\n\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t{...(theme ? { 'data-theme': theme } : {})}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{!hideCancel && (\n\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\taria-label=\"close\"\n\t\t\t\t\t\t\t\t\ticon={<Icon name=\"cancel\" size=\"medium\" />}\n\t\t\t\t\t\t\t\t\tclassName={styles.closeButton}\n\t\t\t\t\t\t\t\t\tonClick={onCancel}\n\t\t\t\t\t\t\t\t\tdata-test-id=\"drawer-close-button\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<Suspense fallback={<Progress />}>{children}</Suspense>\n\t\t\t\t\t\t</m.div>\n\t\t\t\t\t</FocusTrap>\n\t\t\t\t</m.div>\n\t\t\t</div>\n\t\t</LazyMotion>\n\t);\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\tcloseable?: boolean;\n\ttitleID?: string;\n\ttitleClassName?: string;\n\tonClose?(): void;\n\t'data-test-id'?: string;\n};\n\nconst DrawerHeader = ({\n\tclassName,\n\tchildren,\n\ttitleID,\n\ttitleClassName,\n\t'data-test-id': testId = 'drawer-header',\n\t...rest\n}: DrawerHeaderProps) => {\n\treturn (\n\t\t<div data-test-id={testId} className={className} {...rest}>\n\t\t\t<h2 id={DRAWER_LABELLED_BY} className={titleClassName}>\n\t\t\t\t{children}\n\t\t\t</h2>\n\t\t</div>\n\t);\n};\n\nexport { DrawerHeader };\nexport type { DrawerHeaderProps };\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../src/constants.ts","../src/Progress.tsx","../src/Drawer.tsx","../src/DrawerHeader.tsx"],"sourcesContent":["export const DRAWER_LABELLED_BY = 'drawer-title';\n","import { cx } from 'classix';\n\nimport styles from './styles/Progress.module.css';\n\n// The small indeterminate spinner the drawer shows while suspended content\n// loads. It previously came from `@launchpad-ui/progress`, which is deprecated\n// and is no longer part of this workspace, so the markup and styles live here\n// unchanged. Only the drawer's usage is kept: no value, no size, no delay.\nconst DIAMETER = 16;\nconst STROKE_WIDTH = DIAMETER * 0.1;\nconst RADIUS = DIAMETER * 0.5 - STROKE_WIDTH * 0.5;\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS;\n\nconst Progress = () => (\n\t<svg\n\t\tclassName={cx(styles.Progress, styles['Progress--indeterminate'])}\n\t\twidth={DIAMETER}\n\t\theight={DIAMETER}\n\t\tviewBox={`0 0 ${DIAMETER} ${DIAMETER}`}\n\t\tdata-test-id=\"progress\"\n\t\trole=\"progressbar\"\n\t\taria-valuemin={0}\n\t\taria-valuetext=\"loading\"\n\t\taria-valuemax={100}\n\t>\n\t\t<circle\n\t\t\tclassName={styles['Progress-track']}\n\t\t\tcx={DIAMETER / 2}\n\t\t\tcy={DIAMETER / 2}\n\t\t\tr={RADIUS}\n\t\t\tstrokeWidth={STROKE_WIDTH}\n\t\t/>\n\t\t<circle\n\t\t\tclassName={styles['Progress-head']}\n\t\t\tcx={DIAMETER / 2}\n\t\t\tcy={DIAMETER / 2}\n\t\t\tr={RADIUS}\n\t\t\tstrokeWidth={STROKE_WIDTH}\n\t\t\tstrokeDasharray={CIRCUMFERENCE}\n\t\t\tstrokeDashoffset={CIRCUMFERENCE * 0.75}\n\t\t/>\n\t</svg>\n);\n\nexport { Progress };\n","import type { MouseEvent, ReactNode } from 'react';\nimport { Suspense, useEffect, useRef, useState } from 'react';\nimport { useFocusWithin } from 'react-aria/useFocusWithin';\nimport { usePreventScroll } from 'react-aria/usePreventScroll';\nimport { cx } from 'classix';\nimport type { Variants } from 'framer-motion';\nimport { LazyMotion, m } from 'framer-motion';\n\nimport { IconButton } from '@launchpad-ui/button';\nimport { FocusTrap } from '@launchpad-ui/focus-trap';\nimport { Icon } from '@launchpad-ui/icons';\nimport { Portal } from '@launchpad-ui/portal';\n\nimport { DRAWER_LABELLED_BY } from './constants';\nimport { Progress } from './Progress';\n\nimport styles from './styles/Drawer.module.css';\n\nconst overlay: Variants = {\n\tvisible: { opacity: 1, transition: { duration: 0.15 } },\n\thidden: { opacity: 0 },\n};\n\nconst slideRight: Variants = {\n\thidden: { opacity: 0, x: '25%' },\n\tvisible: {\n\t\topacity: 1,\n\t\tx: '0%',\n\t\ttransition: { type: 'spring', delay: 0.15, duration: 0.2, bounce: 0 },\n\t},\n};\n\nconst loadFeatures = () =>\n\timport(\n\t\t/* webpackChunkName: \"lp-drawer-framer-features\" */\n\t\t/* webpackExports: \"domAnimation\" */\n\t\t'framer-motion'\n\t).then((res) => res.domAnimation);\n\ntype DrawerProps = {\n\tchildren?: ReactNode;\n\tclassName?: string;\n\tonCancel?(): void;\n\t'data-test-id'?: string;\n\tsize?: 'small' | 'medium' | 'large' | 'xLarge' | 'full';\n\ttheme?: 'dark' | 'default';\n\thideCancel?: boolean;\n};\n\n/**\n * @deprecated use `Modal` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-overlays-modal--docs#drawer\n */\nconst Drawer = (props: DrawerProps) => (\n\t<Portal>\n\t\t<DrawerContainer {...props} />\n\t</Portal>\n);\n\nconst DrawerContainer = ({\n\tclassName,\n\tchildren,\n\tonCancel,\n\tsize = 'small',\n\t'data-test-id': testId = 'drawer',\n\ttheme,\n\thideCancel = false,\n}: DrawerProps) => {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst [isFocusWithin, setIsFocusWithin] = useState(false);\n\tconst { focusWithinProps } = useFocusWithin({\n\t\tonFocusWithinChange: (focusWithin) => setIsFocusWithin(focusWithin),\n\t});\n\n\tusePreventScroll();\n\n\tuseEffect(() => {\n\t\tconst handleEscape = (event: KeyboardEvent) => {\n\t\t\tevent.stopImmediatePropagation();\n\t\t\tconst latest = [...document.querySelectorAll('[data-drawer]')].pop();\n\t\t\tif (event.key === 'Escape' && latest === ref.current && isFocusWithin) {\n\t\t\t\tclose();\n\t\t\t}\n\t\t};\n\n\t\tconst addOverlayAndEventHandler = () => {\n\t\t\tdocument.body.classList.add('has-overlay');\n\t\t\tdocument.addEventListener('keydown', handleEscape);\n\t\t};\n\n\t\tconst removeOverlayAndEventHandler = () => {\n\t\t\tdocument.body.classList.remove('has-overlay');\n\t\t\tdocument.removeEventListener('keydown', handleEscape);\n\t\t};\n\n\t\tconst close = () => {\n\t\t\tonCancel?.();\n\t\t};\n\n\t\tif (isFocusWithin) {\n\t\t\taddOverlayAndEventHandler();\n\t\t}\n\n\t\tif (!isFocusWithin) {\n\t\t\tremoveOverlayAndEventHandler();\n\t\t}\n\n\t\treturn () => {\n\t\t\tremoveOverlayAndEventHandler();\n\t\t};\n\t}, [onCancel, isFocusWithin]);\n\n\tconst handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n\t\tif (event.target === event.currentTarget) {\n\t\t\tonCancel?.();\n\t\t}\n\t};\n\n\treturn (\n\t\t<LazyMotion strict features={loadFeatures}>\n\t\t\t<div\n\t\t\t\t{...focusWithinProps}\n\t\t\t\tclassName={cx(styles.drawer, styles[size], className)}\n\t\t\t\tdata-drawer\n\t\t\t\tdata-test-id={testId}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t<m.div\n\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\tvariants={overlay}\n\t\t\t\t\ttransition={{ duration: 0.15 }}\n\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\tclassName={styles.overlay}\n\t\t\t\t\tonMouseDown={handleOverlayClick}\n\t\t\t\t>\n\t\t\t\t\t<FocusTrap autoFocus restoreFocus>\n\t\t\t\t\t\t<m.div\n\t\t\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\t\t\tvariants={slideRight}\n\t\t\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\t\t\taria-labelledby={DRAWER_LABELLED_BY}\n\t\t\t\t\t\t\taria-describedby={DRAWER_LABELLED_BY}\n\t\t\t\t\t\t\taria-modal\n\t\t\t\t\t\t\tclassName={styles.content}\n\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t{...(theme ? { 'data-theme': theme } : {})}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{!hideCancel && (\n\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\taria-label=\"close\"\n\t\t\t\t\t\t\t\t\ticon={<Icon name=\"cancel\" size=\"medium\" />}\n\t\t\t\t\t\t\t\t\tclassName={styles.closeButton}\n\t\t\t\t\t\t\t\t\tonClick={onCancel}\n\t\t\t\t\t\t\t\t\tdata-test-id=\"drawer-close-button\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<Suspense fallback={<Progress />}>{children}</Suspense>\n\t\t\t\t\t\t</m.div>\n\t\t\t\t\t</FocusTrap>\n\t\t\t\t</m.div>\n\t\t\t</div>\n\t\t</LazyMotion>\n\t);\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\tcloseable?: boolean;\n\ttitleID?: string;\n\ttitleClassName?: string;\n\tonClose?(): void;\n\t'data-test-id'?: string;\n};\n\nconst DrawerHeader = ({\n\tclassName,\n\tchildren,\n\ttitleID,\n\ttitleClassName,\n\t'data-test-id': testId = 'drawer-header',\n\t...rest\n}: DrawerHeaderProps) => {\n\treturn (\n\t\t<div data-test-id={testId} className={className} {...rest}>\n\t\t\t<h2 id={DRAWER_LABELLED_BY} className={titleClassName}>\n\t\t\t\t{children}\n\t\t\t</h2>\n\t\t</div>\n\t);\n};\n\nexport { DrawerHeader };\nexport type { DrawerHeaderProps };\n"],"names":["styles"],"mappings":"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"}

package/dist/index.js

@@ -33,17 +33,65 @@ const button = require("@launchpad-ui/button");
 const focusTrap = require("@launchpad-ui/focus-trap");
 const icons = require("@launchpad-ui/icons");
 const portal = require("@launchpad-ui/portal");
-const progress = require("@launchpad-ui/progress");
 const DRAWER_LABELLED_BY = "drawer-title";
-const closeButton = "_kZABG_closeButton";
-const content = "_kZABG_content";
-const drawer = "_kZABG_drawer";
-const full = "_kZABG_full";
-const large = "_kZABG_large";
-const medium = "_kZABG_medium";
-const overlay$1 = "_kZABG_overlay";
-const small = "_kZABG_small";
-const xLarge = "_kZABG_xLarge";
+const Progress$1 = "N80__q_Progress";
+const styles$1 = {
+  Progress: Progress$1,
+  "Progress--indeterminate": "N80__q_Progress--indeterminate",
+  "Progress-head": "N80__q_Progress-head",
+  "Progress-track": "N80__q_Progress-track"
+};
+const DIAMETER = 16;
+const STROKE_WIDTH = DIAMETER * 0.1;
+const RADIUS = DIAMETER * 0.5 - STROKE_WIDTH * 0.5;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+const Progress = () => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    className: classix.cx(styles$1.Progress, styles$1["Progress--indeterminate"]),
+    width: DIAMETER,
+    height: DIAMETER,
+    viewBox: `0 0 ${DIAMETER} ${DIAMETER}`,
+    "data-test-id": "progress",
+    role: "progressbar",
+    "aria-valuemin": 0,
+    "aria-valuetext": "loading",
+    "aria-valuemax": 100,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "circle",
+        {
+          className: styles$1["Progress-track"],
+          cx: DIAMETER / 2,
+          cy: DIAMETER / 2,
+          r: RADIUS,
+          strokeWidth: STROKE_WIDTH
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "circle",
+        {
+          className: styles$1["Progress-head"],
+          cx: DIAMETER / 2,
+          cy: DIAMETER / 2,
+          r: RADIUS,
+          strokeWidth: STROKE_WIDTH,
+          strokeDasharray: CIRCUMFERENCE,
+          strokeDashoffset: CIRCUMFERENCE * 0.75
+        }
+      )
+    ]
+  }
+);
+const closeButton = "nI2R0W_closeButton";
+const content = "nI2R0W_content";
+const drawer = "nI2R0W_drawer";
+const full = "nI2R0W_full";
+const large = "nI2R0W_large";
+const medium = "nI2R0W_medium";
+const overlay$1 = "nI2R0W_overlay";
+const small = "nI2R0W_small";
+const xLarge = "nI2R0W_xLarge";
 const styles = {
   closeButton,
   content,
@@ -164,7 +212,7 @@ const DrawerContainer = ({
                     "data-test-id": "drawer-close-button"
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(progress.Progress, {}), children })
+                /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(Progress, {}), children })
               ]
             }
           ) })

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 { MouseEvent, ReactNode } from 'react';\nimport { Suspense, useEffect, useRef, useState } from 'react';\nimport { useFocusWithin } from 'react-aria/useFocusWithin';\nimport { usePreventScroll } from 'react-aria/usePreventScroll';\nimport { cx } from 'classix';\nimport type { Variants } from 'framer-motion';\nimport { LazyMotion, m } from 'framer-motion';\n\nimport { IconButton } from '@launchpad-ui/button';\nimport { FocusTrap } from '@launchpad-ui/focus-trap';\nimport { Icon } from '@launchpad-ui/icons';\nimport { Portal } from '@launchpad-ui/portal';\nimport { Progress } from '@launchpad-ui/progress';\n\nimport { DRAWER_LABELLED_BY } from './constants';\n\nimport styles from './styles/Drawer.module.css';\n\nconst overlay: Variants = {\n\tvisible: { opacity: 1, transition: { duration: 0.15 } },\n\thidden: { opacity: 0 },\n};\n\nconst slideRight: Variants = {\n\thidden: { opacity: 0, x: '25%' },\n\tvisible: {\n\t\topacity: 1,\n\t\tx: '0%',\n\t\ttransition: { type: 'spring', delay: 0.15, duration: 0.2, bounce: 0 },\n\t},\n};\n\nconst loadFeatures = () =>\n\timport(\n\t\t/* webpackChunkName: \"lp-drawer-framer-features\" */\n\t\t/* webpackExports: \"domAnimation\" */\n\t\t'framer-motion'\n\t).then((res) => res.domAnimation);\n\ntype DrawerProps = {\n\tchildren?: ReactNode;\n\tclassName?: string;\n\tonCancel?(): void;\n\t'data-test-id'?: string;\n\tsize?: 'small' | 'medium' | 'large' | 'xLarge' | 'full';\n\ttheme?: 'dark' | 'default';\n\thideCancel?: boolean;\n};\n\n/**\n * @deprecated use `Modal` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-overlays-modal--docs#drawer\n */\nconst Drawer = (props: DrawerProps) => (\n\t<Portal>\n\t\t<DrawerContainer {...props} />\n\t</Portal>\n);\n\nconst DrawerContainer = ({\n\tclassName,\n\tchildren,\n\tonCancel,\n\tsize = 'small',\n\t'data-test-id': testId = 'drawer',\n\ttheme,\n\thideCancel = false,\n}: DrawerProps) => {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst [isFocusWithin, setIsFocusWithin] = useState(false);\n\tconst { focusWithinProps } = useFocusWithin({\n\t\tonFocusWithinChange: (focusWithin) => setIsFocusWithin(focusWithin),\n\t});\n\n\tusePreventScroll();\n\n\tuseEffect(() => {\n\t\tconst handleEscape = (event: KeyboardEvent) => {\n\t\t\tevent.stopImmediatePropagation();\n\t\t\tconst latest = [...document.querySelectorAll('[data-drawer]')].pop();\n\t\t\tif (event.key === 'Escape' && latest === ref.current && isFocusWithin) {\n\t\t\t\tclose();\n\t\t\t}\n\t\t};\n\n\t\tconst addOverlayAndEventHandler = () => {\n\t\t\tdocument.body.classList.add('has-overlay');\n\t\t\tdocument.addEventListener('keydown', handleEscape);\n\t\t};\n\n\t\tconst removeOverlayAndEventHandler = () => {\n\t\t\tdocument.body.classList.remove('has-overlay');\n\t\t\tdocument.removeEventListener('keydown', handleEscape);\n\t\t};\n\n\t\tconst close = () => {\n\t\t\tonCancel?.();\n\t\t};\n\n\t\tif (isFocusWithin) {\n\t\t\taddOverlayAndEventHandler();\n\t\t}\n\n\t\tif (!isFocusWithin) {\n\t\t\tremoveOverlayAndEventHandler();\n\t\t}\n\n\t\treturn () => {\n\t\t\tremoveOverlayAndEventHandler();\n\t\t};\n\t}, [onCancel, isFocusWithin]);\n\n\tconst handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n\t\tif (event.target === event.currentTarget) {\n\t\t\tonCancel?.();\n\t\t}\n\t};\n\n\treturn (\n\t\t<LazyMotion strict features={loadFeatures}>\n\t\t\t<div\n\t\t\t\t{...focusWithinProps}\n\t\t\t\tclassName={cx(styles.drawer, styles[size], className)}\n\t\t\t\tdata-drawer\n\t\t\t\tdata-test-id={testId}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t<m.div\n\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\tvariants={overlay}\n\t\t\t\t\ttransition={{ duration: 0.15 }}\n\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\tclassName={styles.overlay}\n\t\t\t\t\tonMouseDown={handleOverlayClick}\n\t\t\t\t>\n\t\t\t\t\t<FocusTrap autoFocus restoreFocus>\n\t\t\t\t\t\t<m.div\n\t\t\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\t\t\tvariants={slideRight}\n\t\t\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\t\t\taria-labelledby={DRAWER_LABELLED_BY}\n\t\t\t\t\t\t\taria-describedby={DRAWER_LABELLED_BY}\n\t\t\t\t\t\t\taria-modal\n\t\t\t\t\t\t\tclassName={styles.content}\n\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t{...(theme ? { 'data-theme': theme } : {})}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{!hideCancel && (\n\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\taria-label=\"close\"\n\t\t\t\t\t\t\t\t\ticon={<Icon name=\"cancel\" size=\"medium\" />}\n\t\t\t\t\t\t\t\t\tclassName={styles.closeButton}\n\t\t\t\t\t\t\t\t\tonClick={onCancel}\n\t\t\t\t\t\t\t\t\tdata-test-id=\"drawer-close-button\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<Suspense fallback={<Progress />}>{children}</Suspense>\n\t\t\t\t\t\t</m.div>\n\t\t\t\t\t</FocusTrap>\n\t\t\t\t</m.div>\n\t\t\t</div>\n\t\t</LazyMotion>\n\t);\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\tcloseable?: boolean;\n\ttitleID?: string;\n\ttitleClassName?: string;\n\tonClose?(): void;\n\t'data-test-id'?: string;\n};\n\nconst DrawerHeader = ({\n\tclassName,\n\tchildren,\n\ttitleID,\n\ttitleClassName,\n\t'data-test-id': testId = 'drawer-header',\n\t...rest\n}: DrawerHeaderProps) => {\n\treturn (\n\t\t<div data-test-id={testId} className={className} {...rest}>\n\t\t\t<h2 id={DRAWER_LABELLED_BY} className={titleClassName}>\n\t\t\t\t{children}\n\t\t\t</h2>\n\t\t</div>\n\t);\n};\n\nexport { DrawerHeader };\nexport type { DrawerHeaderProps };\n"],"names":["jsx","Portal","useRef","useState","useFocusWithin","usePreventScroll","useEffect","LazyMotion","cx","m","FocusTrap","jsxs","IconButton","Icon","Suspense","Progress"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/constants.ts","../src/Progress.tsx","../src/Drawer.tsx","../src/DrawerHeader.tsx"],"sourcesContent":["export const DRAWER_LABELLED_BY = 'drawer-title';\n","import { cx } from 'classix';\n\nimport styles from './styles/Progress.module.css';\n\n// The small indeterminate spinner the drawer shows while suspended content\n// loads. It previously came from `@launchpad-ui/progress`, which is deprecated\n// and is no longer part of this workspace, so the markup and styles live here\n// unchanged. Only the drawer's usage is kept: no value, no size, no delay.\nconst DIAMETER = 16;\nconst STROKE_WIDTH = DIAMETER * 0.1;\nconst RADIUS = DIAMETER * 0.5 - STROKE_WIDTH * 0.5;\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS;\n\nconst Progress = () => (\n\t<svg\n\t\tclassName={cx(styles.Progress, styles['Progress--indeterminate'])}\n\t\twidth={DIAMETER}\n\t\theight={DIAMETER}\n\t\tviewBox={`0 0 ${DIAMETER} ${DIAMETER}`}\n\t\tdata-test-id=\"progress\"\n\t\trole=\"progressbar\"\n\t\taria-valuemin={0}\n\t\taria-valuetext=\"loading\"\n\t\taria-valuemax={100}\n\t>\n\t\t<circle\n\t\t\tclassName={styles['Progress-track']}\n\t\t\tcx={DIAMETER / 2}\n\t\t\tcy={DIAMETER / 2}\n\t\t\tr={RADIUS}\n\t\t\tstrokeWidth={STROKE_WIDTH}\n\t\t/>\n\t\t<circle\n\t\t\tclassName={styles['Progress-head']}\n\t\t\tcx={DIAMETER / 2}\n\t\t\tcy={DIAMETER / 2}\n\t\t\tr={RADIUS}\n\t\t\tstrokeWidth={STROKE_WIDTH}\n\t\t\tstrokeDasharray={CIRCUMFERENCE}\n\t\t\tstrokeDashoffset={CIRCUMFERENCE * 0.75}\n\t\t/>\n\t</svg>\n);\n\nexport { Progress };\n","import type { MouseEvent, ReactNode } from 'react';\nimport { Suspense, useEffect, useRef, useState } from 'react';\nimport { useFocusWithin } from 'react-aria/useFocusWithin';\nimport { usePreventScroll } from 'react-aria/usePreventScroll';\nimport { cx } from 'classix';\nimport type { Variants } from 'framer-motion';\nimport { LazyMotion, m } from 'framer-motion';\n\nimport { IconButton } from '@launchpad-ui/button';\nimport { FocusTrap } from '@launchpad-ui/focus-trap';\nimport { Icon } from '@launchpad-ui/icons';\nimport { Portal } from '@launchpad-ui/portal';\n\nimport { DRAWER_LABELLED_BY } from './constants';\nimport { Progress } from './Progress';\n\nimport styles from './styles/Drawer.module.css';\n\nconst overlay: Variants = {\n\tvisible: { opacity: 1, transition: { duration: 0.15 } },\n\thidden: { opacity: 0 },\n};\n\nconst slideRight: Variants = {\n\thidden: { opacity: 0, x: '25%' },\n\tvisible: {\n\t\topacity: 1,\n\t\tx: '0%',\n\t\ttransition: { type: 'spring', delay: 0.15, duration: 0.2, bounce: 0 },\n\t},\n};\n\nconst loadFeatures = () =>\n\timport(\n\t\t/* webpackChunkName: \"lp-drawer-framer-features\" */\n\t\t/* webpackExports: \"domAnimation\" */\n\t\t'framer-motion'\n\t).then((res) => res.domAnimation);\n\ntype DrawerProps = {\n\tchildren?: ReactNode;\n\tclassName?: string;\n\tonCancel?(): void;\n\t'data-test-id'?: string;\n\tsize?: 'small' | 'medium' | 'large' | 'xLarge' | 'full';\n\ttheme?: 'dark' | 'default';\n\thideCancel?: boolean;\n};\n\n/**\n * @deprecated use `Modal` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-overlays-modal--docs#drawer\n */\nconst Drawer = (props: DrawerProps) => (\n\t<Portal>\n\t\t<DrawerContainer {...props} />\n\t</Portal>\n);\n\nconst DrawerContainer = ({\n\tclassName,\n\tchildren,\n\tonCancel,\n\tsize = 'small',\n\t'data-test-id': testId = 'drawer',\n\ttheme,\n\thideCancel = false,\n}: DrawerProps) => {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst [isFocusWithin, setIsFocusWithin] = useState(false);\n\tconst { focusWithinProps } = useFocusWithin({\n\t\tonFocusWithinChange: (focusWithin) => setIsFocusWithin(focusWithin),\n\t});\n\n\tusePreventScroll();\n\n\tuseEffect(() => {\n\t\tconst handleEscape = (event: KeyboardEvent) => {\n\t\t\tevent.stopImmediatePropagation();\n\t\t\tconst latest = [...document.querySelectorAll('[data-drawer]')].pop();\n\t\t\tif (event.key === 'Escape' && latest === ref.current && isFocusWithin) {\n\t\t\t\tclose();\n\t\t\t}\n\t\t};\n\n\t\tconst addOverlayAndEventHandler = () => {\n\t\t\tdocument.body.classList.add('has-overlay');\n\t\t\tdocument.addEventListener('keydown', handleEscape);\n\t\t};\n\n\t\tconst removeOverlayAndEventHandler = () => {\n\t\t\tdocument.body.classList.remove('has-overlay');\n\t\t\tdocument.removeEventListener('keydown', handleEscape);\n\t\t};\n\n\t\tconst close = () => {\n\t\t\tonCancel?.();\n\t\t};\n\n\t\tif (isFocusWithin) {\n\t\t\taddOverlayAndEventHandler();\n\t\t}\n\n\t\tif (!isFocusWithin) {\n\t\t\tremoveOverlayAndEventHandler();\n\t\t}\n\n\t\treturn () => {\n\t\t\tremoveOverlayAndEventHandler();\n\t\t};\n\t}, [onCancel, isFocusWithin]);\n\n\tconst handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n\t\tif (event.target === event.currentTarget) {\n\t\t\tonCancel?.();\n\t\t}\n\t};\n\n\treturn (\n\t\t<LazyMotion strict features={loadFeatures}>\n\t\t\t<div\n\t\t\t\t{...focusWithinProps}\n\t\t\t\tclassName={cx(styles.drawer, styles[size], className)}\n\t\t\t\tdata-drawer\n\t\t\t\tdata-test-id={testId}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t<m.div\n\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\tvariants={overlay}\n\t\t\t\t\ttransition={{ duration: 0.15 }}\n\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\tclassName={styles.overlay}\n\t\t\t\t\tonMouseDown={handleOverlayClick}\n\t\t\t\t>\n\t\t\t\t\t<FocusTrap autoFocus restoreFocus>\n\t\t\t\t\t\t<m.div\n\t\t\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\t\t\tvariants={slideRight}\n\t\t\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\t\t\taria-labelledby={DRAWER_LABELLED_BY}\n\t\t\t\t\t\t\taria-describedby={DRAWER_LABELLED_BY}\n\t\t\t\t\t\t\taria-modal\n\t\t\t\t\t\t\tclassName={styles.content}\n\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t{...(theme ? { 'data-theme': theme } : {})}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{!hideCancel && (\n\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\taria-label=\"close\"\n\t\t\t\t\t\t\t\t\ticon={<Icon name=\"cancel\" size=\"medium\" />}\n\t\t\t\t\t\t\t\t\tclassName={styles.closeButton}\n\t\t\t\t\t\t\t\t\tonClick={onCancel}\n\t\t\t\t\t\t\t\t\tdata-test-id=\"drawer-close-button\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<Suspense fallback={<Progress />}>{children}</Suspense>\n\t\t\t\t\t\t</m.div>\n\t\t\t\t\t</FocusTrap>\n\t\t\t\t</m.div>\n\t\t\t</div>\n\t\t</LazyMotion>\n\t);\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\tcloseable?: boolean;\n\ttitleID?: string;\n\ttitleClassName?: string;\n\tonClose?(): void;\n\t'data-test-id'?: string;\n};\n\nconst DrawerHeader = ({\n\tclassName,\n\tchildren,\n\ttitleID,\n\ttitleClassName,\n\t'data-test-id': testId = 'drawer-header',\n\t...rest\n}: DrawerHeaderProps) => {\n\treturn (\n\t\t<div data-test-id={testId} className={className} {...rest}>\n\t\t\t<h2 id={DRAWER_LABELLED_BY} className={titleClassName}>\n\t\t\t\t{children}\n\t\t\t</h2>\n\t\t</div>\n\t);\n};\n\nexport { DrawerHeader };\nexport type { DrawerHeaderProps };\n"],"names":["jsxs","cx","styles","jsx","Portal","useRef","useState","useFocusWithin","usePreventScroll","useEffect","LazyMotion","m","FocusTrap","IconButton","Icon","Suspense"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAO,MAAM,qBAAqB;;;;;;;;ACQlC,MAAM,WAAW;AACjB,MAAM,eAAe,WAAW;AAChC,MAAM,SAAS,WAAW,MAAM,eAAe;AAC/C,MAAM,gBAAgB,IAAI,KAAK,KAAK;AAEpC,MAAM,WAAW,MAChBA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWC,QAAAA,GAAGC,SAAO,UAAUA,SAAO,yBAAyB,CAAC;AAAA,IAChE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS,OAAO,QAAQ,IAAI,QAAQ;AAAA,IACpC,gBAAa;AAAA,IACb,MAAK;AAAA,IACL,iBAAe;AAAA,IACf,kBAAe;AAAA,IACf,iBAAe;AAAA,IAEf,UAAA;AAAA,MAAAC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACA,WAAWD,SAAO,gBAAgB;AAAA,UAClC,IAAI,WAAW;AAAA,UACf,IAAI,WAAW;AAAA,UACf,GAAG;AAAA,UACH,aAAa;AAAA,QAAA;AAAA,MAAA;AAAA,MAEdC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACA,WAAWD,SAAO,eAAe;AAAA,UACjC,IAAI,WAAW;AAAA,UACf,IAAI,WAAW;AAAA,UACf,GAAG;AAAA,UACH,aAAa;AAAA,UACb,iBAAiB;AAAA,UACjB,kBAAkB,gBAAgB;AAAA,QAAA;AAAA,MAAA;AAAA,IACnC;AAAA,EAAA;AACD;;;;;;;;;;;;;;;;;;;;;ACvBD,MAAM,UAAoB;AAAA,EACzB,SAAS,EAAE,SAAS,GAAG,YAAY,EAAE,UAAU,OAAK;AAAA,EACpD,QAAQ,EAAE,SAAS,EAAA;AACpB;AAEA,MAAM,aAAuB;AAAA,EAC5B,QAAQ,EAAE,SAAS,GAAG,GAAG,MAAA;AAAA,EACzB,SAAS;AAAA,IACR,SAAS;AAAA,IACT,GAAG;AAAA,IACH,YAAY,EAAE,MAAM,UAAU,OAAO,MAAM,UAAU,KAAK,QAAQ,EAAA;AAAA,EAAE;AAEtE;AAEA,MAAM,eAAe,MACpB;AAAA;AAAA;AAAA,EAGC;AACD,EAAE,KAAK,CAAC,QAAQ,IAAI,YAAY;AAiBjC,MAAM,SAAS,CAAC,UACfC,2BAAAA,IAACC,iBACA,UAAAD,2BAAAA,IAAC,iBAAA,EAAiB,GAAG,MAAA,CAAO,EAAA,CAC7B;AAGD,MAAM,kBAAkB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,gBAAgB,SAAS;AAAA,EACzB;AAAA,EACA,aAAa;AACd,MAAmB;AAClB,QAAM,MAAME,MAAAA,OAAuB,IAAI;AACvC,QAAM,CAAC,eAAe,gBAAgB,IAAIC,MAAAA,SAAS,KAAK;AACxD,QAAM,EAAE,iBAAA,IAAqBC,8BAAe;AAAA,IAC3C,qBAAqB,CAAC,gBAAgB,iBAAiB,WAAW;AAAA,EAAA,CAClE;AAEDC,oCAAA;AAEAC,QAAAA,UAAU,MAAM;AACf,UAAM,eAAe,CAAC,UAAyB;AAC9C,YAAM,yBAAA;AACN,YAAM,SAAS,CAAC,GAAG,SAAS,iBAAiB,eAAe,CAAC,EAAE,IAAA;AAC/D,UAAI,MAAM,QAAQ,YAAY,WAAW,IAAI,WAAW,eAAe;AACtE,cAAA;AAAA,MACD;AAAA,IACD;AAEA,UAAM,4BAA4B,MAAM;AACvC,eAAS,KAAK,UAAU,IAAI,aAAa;AACzC,eAAS,iBAAiB,WAAW,YAAY;AAAA,IAClD;AAEA,UAAM,+BAA+B,MAAM;AAC1C,eAAS,KAAK,UAAU,OAAO,aAAa;AAC5C,eAAS,oBAAoB,WAAW,YAAY;AAAA,IACrD;AAEA,UAAM,QAAQ,MAAM;AACnB,iBAAA;AAAA,IACD;AAEA,QAAI,eAAe;AAClB,gCAAA;AAAA,IACD;AAEA,QAAI,CAAC,eAAe;AACnB,mCAAA;AAAA,IACD;AAEA,WAAO,MAAM;AACZ,mCAAA;AAAA,IACD;AAAA,EACD,GAAG,CAAC,UAAU,aAAa,CAAC;AAE5B,QAAM,qBAAqB,CAAC,UAAsC;AACjE,QAAI,MAAM,WAAW,MAAM,eAAe;AACzC,iBAAA;AAAA,IACD;AAAA,EACD;AAEA,SACCN,2BAAAA,IAACO,aAAAA,YAAA,EAAW,QAAM,MAAC,UAAU,cAC5B,UAAAP,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,GAAG;AAAA,MACJ,WAAWF,QAAAA,GAAG,OAAO,QAAQ,OAAO,IAAI,GAAG,SAAS;AAAA,MACpD,eAAW;AAAA,MACX,gBAAc;AAAA,MACd;AAAA,MAEA,UAAAE,2BAAAA;AAAAA,QAACQ,aAAAA,EAAE;AAAA,QAAF;AAAA,UACA,SAAQ;AAAA,UACR,SAAQ;AAAA,UACR,UAAU;AAAA,UACV,YAAY,EAAE,UAAU,KAAA;AAAA,UACxB,MAAK;AAAA,UACL,WAAW,OAAO;AAAA,UAClB,aAAa;AAAA,UAEb,UAAAR,2BAAAA,IAACS,UAAAA,WAAA,EAAU,WAAS,MAAC,cAAY,MAChC,UAAAZ,2BAAAA;AAAAA,YAACW,aAAAA,EAAE;AAAA,YAAF;AAAA,cACA,SAAQ;AAAA,cACR,SAAQ;AAAA,cACR,UAAU;AAAA,cACV,MAAK;AAAA,cACL,mBAAiB;AAAA,cACjB,oBAAkB;AAAA,cAClB,cAAU;AAAA,cACV,WAAW,OAAO;AAAA,cAClB,UAAU;AAAA,cACT,GAAI,QAAQ,EAAE,cAAc,MAAA,IAAU,CAAA;AAAA,cAEtC,UAAA;AAAA,gBAAA,CAAC,cACDR,2BAAAA;AAAAA,kBAACU,OAAAA;AAAAA,kBAAA;AAAA,oBACA,cAAW;AAAA,oBACX,MAAMV,2BAAAA,IAACW,YAAA,EAAK,MAAK,UAAS,MAAK,UAAS;AAAA,oBACxC,WAAW,OAAO;AAAA,oBAClB,SAAS;AAAA,oBACT,gBAAa;AAAA,kBAAA;AAAA,gBAAA;AAAA,+CAGdC,MAAAA,UAAA,EAAS,UAAUZ,2BAAAA,IAAC,UAAA,CAAA,CAAS,GAAK,SAAA,CAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA,EAC7C,CACD;AAAA,QAAA;AAAA,MAAA;AAAA,IACD;AAAA,EAAA,GAEF;AAEF;AC1JA,MAAM,eAAe,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB,SAAS;AAAA,EACzB,GAAG;AACJ,MAAyB;AACxB,SACCA,2BAAAA,IAAC,OAAA,EAAI,gBAAc,QAAQ,WAAuB,GAAG,MACpD,UAAAA,2BAAAA,IAAC,MAAA,EAAG,IAAI,oBAAoB,WAAW,gBACrC,UACF,GACD;AAEF;;;"}

package/dist/style.css

@@ -1 +1 @@
-:root,[data-theme=default]{--lp-component-drawer-color-bg-overlay:#28282880}[data-theme=dark]{--lp-component-drawer-color-bg-overlay:#191919bf}._kZABG_drawer{--page-gutter-width:.625rem;z-index:var(--lp-z-index-400);position:fixed;inset:0;transform:translateZ(0)}@media screen and (min-width:46.25rem){._kZABG_drawer{--page-gutter-width:2.5rem}}.has-overlay{overflow:hidden}._kZABG_overlay{background-color:var(--lp-component-drawer-color-bg-overlay);position:fixed;inset:0}._kZABG_content{background-color:var(--lp-color-bg-ui-primary);width:100vw;max-width:100vw;color:var(--lp-color-text-ui-secondary);box-shadow:-1px 0 4px var(--lp-color-shadow-ui-primary);position:absolute;top:0;bottom:0;right:0;overflow:auto}@media screen and (min-width:46.25rem){._kZABG_small ._kZABG_content{width:28.125rem}._kZABG_medium ._kZABG_content{width:40.625rem}._kZABG_large ._kZABG_content{width:50rem}._kZABG_xLarge ._kZABG_content{width:75rem}._kZABG_full ._kZABG_content{width:100%;max-width:unset}}._kZABG_content section{padding:2rem var(--page-gutter-width)}._kZABG_content section+section{border-top:1px dotted var(--lp-color-gray-100)}._kZABG_closeButton{position:absolute;top:.625rem;right:.625rem}
+@keyframes N80__q_indeterminate{0%{transform:rotate(0)}to{transform:rotate(359deg)}}.N80__q_Progress{vertical-align:middle;display:inline-block;transform:rotate(-90deg)}.N80__q_Progress--indeterminate{animation-name:N80__q_indeterminate;animation-duration:var(--lp-duration-350);animation-timing-function:linear;animation-iteration-count:infinite}.N80__q_Progress-track{fill:none;stroke:var(--lp-color-gray-50)}.N80__q_Progress-head{transition:stroke-dashoffset var(--lp-duration-350);fill:none;stroke:var(--lp-color-gray-500)}:root,[data-theme=default]{--lp-component-drawer-color-bg-overlay:#28282880}[data-theme=dark]{--lp-component-drawer-color-bg-overlay:#191919bf}.nI2R0W_drawer{--page-gutter-width:.625rem;z-index:var(--lp-z-index-400);position:fixed;inset:0;transform:translateZ(0)}@media screen and (min-width:46.25rem){.nI2R0W_drawer{--page-gutter-width:2.5rem}}.has-overlay{overflow:hidden}.nI2R0W_overlay{background-color:var(--lp-component-drawer-color-bg-overlay);position:fixed;inset:0}.nI2R0W_content{background-color:var(--lp-color-bg-ui-primary);width:100vw;max-width:100vw;color:var(--lp-color-text-ui-secondary);box-shadow:-1px 0 4px var(--lp-color-shadow-ui-primary);position:absolute;top:0;bottom:0;right:0;overflow:auto}@media screen and (min-width:46.25rem){.nI2R0W_small .nI2R0W_content{width:28.125rem}.nI2R0W_medium .nI2R0W_content{width:40.625rem}.nI2R0W_large .nI2R0W_content{width:50rem}.nI2R0W_xLarge .nI2R0W_content{width:75rem}.nI2R0W_full .nI2R0W_content{width:100%;max-width:unset}}.nI2R0W_content section{padding:2rem var(--page-gutter-width)}.nI2R0W_content section+section{border-top:1px dotted var(--lp-color-gray-100)}.nI2R0W_closeButton{position:absolute;top:.625rem;right:.625rem}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchpad-ui/drawer",
-  "version": "0.9.20",
+  "version": "0.9.22",
   "description": "A partial overlay that appears from the right side of the screen.",
   "repository": "launchdarkly/launchpad-ui",
   "license": "Apache-2.0",
@@ -19,19 +19,20 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@launchpad-ui/progress": "0.5.57",
     "classix": "2.2.0",
     "framer-motion": "12.23.22",
-    "@launchpad-ui/button": "~0.15.21",
-    "@launchpad-ui/focus-trap": "~0.5.5",
-    "@launchpad-ui/icons": "~0.26.6",
-    "@launchpad-ui/portal": "~0.4.4",
-    "@launchpad-ui/tokens": "~0.18.0"
+    "@launchpad-ui/button": "~0.15.22",
+    "@launchpad-ui/focus-trap": "~0.5.6",
+    "@launchpad-ui/icons": "~0.26.7",
+    "@launchpad-ui/portal": "~0.4.5",
+    "@launchpad-ui/tokens": "~0.19.0"
   },
   "devDependencies": {
     "react": "19.2.8",
     "react-aria": "3.50.0",
-    "react-dom": "19.2.8"
+    "react-dom": "19.2.8",
+    "@launchpad-ui/test-utils": "~0.0.0",
+    "@launchpad-ui/tooltip": "~0.12.9"
   },
   "peerDependencies": {
     "react": "^19",