@a-type/ui 6.1.16 → 6.1.19

package/dist/components/dialog/Dialog.stories.js

@@ -8,7 +8,7 @@ import { Provider } from '../provider/Provider.js';
 import { Select } from '../select/index.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
 import { H1, P } from '../typography/index.js';
-import { Dialog, DialogActions, DialogClose, DialogContent, DialogTitle, DialogTrigger, } from './Dialog.js';
+import { Dialog } from './Dialog.js';
 const meta = {
     title: 'Components/Dialog',
     component: Dialog,
@@ -23,22 +23,23 @@ function DummyContent() {
 }
 export const Default = {
     args: {
-        children: (_jsxs(ParticleLayer, { noPortal: true, children: [_jsx(DialogTrigger, { render: _jsx(Button, {}), children: "Open" }), _jsx(DummyContent, {}), _jsxs(DialogContent, { children: [_jsx(DialogTitle, { children: "Hello world" }), _jsx(DummyContent, {}), _jsx(DummyContent, {}), _jsx(DummyContent, {}), _jsxs(Box, { gap: true, children: [_jsx(Input, { placeholder: "Type something..." }), _jsx(Button, { emphasis: "primary", children: "Submit" })] }), _jsxs(DialogActions, { children: [_jsx(DialogClose, {}), _jsx(Button, { emphasis: "primary", children: "Accept" })] })] })] })),
+        children: (_jsxs(ParticleLayer, { noPortal: true, children: [_jsx(Dialog.Trigger, { render: _jsx(Button, {}), children: "Open" }), _jsx(DummyContent, {}), _jsxs(Dialog.Content, { children: [_jsx(Dialog.Title, { children: "Hello world" }), _jsx(DummyContent, {}), _jsx(DummyContent, {}), _jsx(DummyContent, {}), _jsxs(Box, { gap: true, children: [_jsx(Input, { placeholder: "Type something..." }), _jsx(Button, { emphasis: "primary", children: "Submit" })] }), _jsxs(Dialog.Actions, { children: [_jsx(Dialog.Close, {}), _jsx(Button, { emphasis: "primary", children: "Accept" })] })] })] })),
     },
 };
 export const Small = {
     args: {
-        children: (_jsxs(ParticleLayer, { noPortal: true, children: [_jsx(DialogTrigger, { render: _jsx(Button, {}), children: "Open" }), _jsx(DummyContent, {}), _jsxs(DialogContent, { children: [_jsx(DialogTitle, { children: "Hello world" }), _jsx(DummyContent, {}), _jsx(DialogActions, { children: _jsx(DialogClose, {}) })] })] })),
+        children: (_jsxs(ParticleLayer, { noPortal: true, children: [_jsx(Dialog.Trigger, { render: _jsx(Button, {}), children: "Open" }), _jsx(DummyContent, {}), _jsxs(Dialog.Content, { children: [_jsx(Dialog.Title, { children: "Hello world" }), _jsx(DummyContent, {}), _jsx(Dialog.Actions, { children: _jsx(Dialog.Close, {}) })] })] })),
     },
 };
 export const NoSheet = {
     args: {
-        children: (_jsxs(ParticleLayer, { noPortal: true, children: [_jsx(DialogTrigger, { render: _jsx(Button, {}), children: "Open" }), _jsx(DummyContent, {}), _jsxs(DialogContent, { disableSheet: true, children: [_jsx(DialogTitle, { children: "Hello world" }), _jsx(DialogActions, { children: _jsx(DialogClose, {}) })] })] })),
+        disableSheet: true,
+        children: (_jsxs(ParticleLayer, { noPortal: true, children: [_jsx(Dialog.Trigger, { render: _jsx(Button, {}), children: "Open" }), _jsx(DummyContent, {}), _jsxs(Dialog.Content, { children: [_jsx(Dialog.Title, { children: "Hello world" }), _jsx(Dialog.Actions, { children: _jsx(Dialog.Close, {}) })] })] })),
     },
 };
 export const Positioned = {
     args: {
-        children: (_jsxs(ParticleLayer, { noPortal: true, children: [_jsx(DialogTrigger, { render: _jsx(Button, {}), children: "Open" }), _jsx(DummyContent, {}), _jsxs(DialogContent, { style: { bottom: 0, top: 'auto' }, children: [_jsx(DialogTitle, { children: "Hello world" }), _jsx(DialogActions, { children: _jsx(DialogClose, {}) })] })] })),
+        children: (_jsxs(ParticleLayer, { noPortal: true, children: [_jsx(Dialog.Trigger, { render: _jsx(Button, {}), children: "Open" }), _jsx(DummyContent, {}), _jsxs(Dialog.Content, { style: { bottom: 0, top: 'auto' }, children: [_jsx(Dialog.Title, { children: "Hello world" }), _jsx(Dialog.Actions, { children: _jsx(Dialog.Close, {}) })] })] })),
     },
 };
 export const VirtualKeyboard = {
@@ -52,7 +53,7 @@ export const VirtualKeyboard = {
                 document.body.style.removeProperty('--mock-virtual-keyboard-height');
             }
         }, [keyboard]);
-        return (_jsxs(Provider, { virtualKeyboardBehavior: "overlay", children: [_jsxs(Dialog, { children: [_jsx(DialogTrigger, { render: _jsx(Button, {}), children: "Open" }), _jsx(DummyContent, {}), _jsxs(DialogContent, { children: [_jsx(DialogTitle, { children: "Hello world" }), _jsx(Input, {}), _jsxs(DialogActions, { children: [_jsx(DialogClose, {}), _jsx(Button, { onClick: () => setKeyboard((v) => !v), children: "Toggle fake kb" })] })] })] }), _jsx("div", { className: "bg-neutral-ink", style: {
+        return (_jsxs(Provider, { virtualKeyboardBehavior: "overlay", children: [_jsxs(Dialog, { children: [_jsx(Dialog.Trigger, { render: _jsx(Button, {}), children: "Open" }), _jsx(DummyContent, {}), _jsxs(Dialog.Content, { children: [_jsx(Dialog.Title, { children: "Hello world" }), _jsx(Input, {}), _jsxs(Dialog.Actions, { children: [_jsx(Dialog.Close, {}), _jsx(Button, { onClick: () => setKeyboard((v) => !v), children: "Toggle fake kb" })] })] })] }), _jsx("div", { className: "bg-neutral-ink", style: {
                         position: 'fixed',
                         bottom: 0,
                         left: 0,
@@ -65,7 +66,7 @@ export const VirtualKeyboard = {
 };
 export const MultiNested = {
     render() {
-        return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { render: _jsx(Button, {}), children: "Open" }), _jsxs(DialogContent, { children: [_jsx(DialogTitle, { children: "Hello world" }), _jsx(DummyContent, {}), _jsxs(Select, { value: "", children: [_jsx(Select.Trigger, { children: _jsx(Select.Value, {}) }), _jsxs(Select.Content, { children: [_jsx(Select.Item, { value: null, children: "Select an option" }), _jsx(Select.Item, { value: "option1", children: "Option 1" }), _jsx(Select.Item, { value: "option2", children: "Option 2" }), _jsx(Select.Item, { value: "option3", children: "Option 3" })] })] }), _jsxs(Dialog, { children: [_jsx(DialogTrigger, { render: _jsx(Button, {}), children: "Open nested" }), _jsxs(DialogContent, { children: [_jsx(DialogTitle, { children: "Nested dialog" }), _jsx(Tooltip, { content: "This is a tooltip", children: _jsx(Button, { children: "Hover me" }) }), _jsx(DummyContent, {}), _jsx(DummyContent, {})] })] })] })] }));
+        return (_jsxs(Dialog, { children: [_jsx(Dialog.Trigger, { render: _jsx(Button, {}), children: "Open" }), _jsxs(Dialog.Content, { children: [_jsx(Dialog.Title, { children: "Hello world" }), _jsx(DummyContent, {}), _jsxs(Select, { value: "", children: [_jsx(Select.Trigger, { children: _jsx(Select.Value, {}) }), _jsxs(Select.Content, { children: [_jsx(Select.Item, { value: null, children: "Select an option" }), _jsx(Select.Item, { value: "option1", children: "Option 1" }), _jsx(Select.Item, { value: "option2", children: "Option 2" }), _jsx(Select.Item, { value: "option3", children: "Option 3" })] })] }), _jsxs(Dialog, { children: [_jsx(Dialog.Trigger, { render: _jsx(Button, {}), children: "Open nested" }), _jsxs(Dialog.Content, { children: [_jsx(Dialog.Title, { children: "Nested dialog" }), _jsx(Tooltip, { content: "This is a tooltip", children: _jsx(Button, { children: "Hover me" }) }), _jsx(DummyContent, {}), _jsx(DummyContent, {})] })] })] })] }));
     },
 };
 export const Selectable = {

package/dist/components/dialog/Dialog.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.stories.js","sourceRoot":"","sources":["../../../src/components/dialog/Dialog.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Dialog.stories.js","sourceRoot":"","sources":["../../../src/components/dialog/Dialog.stories.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,24 @@
+import { Drawer as BaseDrawer, DrawerCloseProps, DrawerPopupProps, DrawerRootProps, DrawerTriggerProps } from '@base-ui/react/drawer';
+import { Ref } from 'react';
+export interface DrawerContentProps extends DrawerPopupProps {
+    disableDefaultClose?: boolean;
+    ref?: Ref<HTMLDivElement>;
+    innerClassName?: string;
+}
+export interface DrawerProps extends Omit<DrawerRootProps, 'swipeDirection'> {
+}
+declare function DrawerClose({ children, render, ...props }: DrawerCloseProps & {
+    ref?: React.Ref<HTMLButtonElement>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const Drawer: (({ children, snapPoints, ...props }: DrawerProps) => import("react/jsx-runtime").JSX.Element) & {
+    Trigger: ({ render, ...props }: DrawerTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ ref, children, className, disableDefaultClose, innerClassName, ...props }: DrawerContentProps) => import("react/jsx-runtime").JSX.Element;
+    Title: import("react").FunctionComponent<import("@base-ui/react/drawer").DrawerTitleProps>;
+    Description: import("react").FunctionComponent<import("@base-ui/react/drawer").DrawerDescriptionProps>;
+    Close: typeof DrawerClose;
+    Actions: import("react").FunctionComponent<import("../box/Box.js").BoxProps>;
+    Unstyled: DrawerParts;
+    createHandle: typeof BaseDrawer.createHandle;
+};
+export type DrawerParts = typeof BaseDrawer;
+export {};

package/dist/components/drawer/Drawer.js

@@ -0,0 +1,101 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Drawer as BaseDrawer, } from '@base-ui/react/drawer';
+import clsx from 'clsx';
+import { useCallback, useRef } from 'react';
+import useMergedRef from '../../hooks/useMergedRef.js';
+import { withClassName } from '../../hooks/withClassName.js';
+import { Box } from '../box/Box.js';
+import { Button } from '../button/index.js';
+import { Icon } from '../icon/Icon.js';
+import { useParticles } from '../particles/ParticleContext.js';
+import cls from './Drawer.module.css';
+const DrawerBackdrop = withClassName(BaseDrawer.Backdrop, cls.overlay);
+const StyledPopup = withClassName(BaseDrawer.Popup, cls.popup);
+const DrawerContent = function DrawerContent(_a) {
+    var { ref, children, className, disableDefaultClose, innerClassName } = _a, props = __rest(_a, ["ref", "children", "className", "disableDefaultClose", "innerClassName"]);
+    const particles = useParticles();
+    const wasOpenRef = useRef(false);
+    const openRef = useCallback((element) => {
+        if (!wasOpenRef.current && (element === null || element === void 0 ? void 0 : element.hasAttribute('data-open'))) {
+            wasOpenRef.current = true;
+            setTimeout(() => {
+                particles === null || particles === void 0 ? void 0 : particles.addParticles(particles.elementExplosion({
+                    count: 20,
+                    margin: 40,
+                    borders: ['top'],
+                    color: [
+                        {
+                            space: 'rgb',
+                            values: [0, 0, 0],
+                            opacity: 0.02,
+                        },
+                        {
+                            space: 'rgb',
+                            values: [0, 0, 0],
+                            opacity: 0,
+                        },
+                    ],
+                    element,
+                    startRadius: 15,
+                    endRadius: 0,
+                    lifespan: 1000,
+                    force: 0.5,
+                    drag: 0.01,
+                    forceFuzz: 0.5,
+                    angleFuzz: 0.1,
+                }));
+            }, 180);
+        }
+        else if (!(element === null || element === void 0 ? void 0 : element.hasAttribute('data-open'))) {
+            wasOpenRef.current = false;
+        }
+    }, [particles]);
+    const finalRef = useMergedRef(ref, openRef);
+    return (_jsx(BaseDrawer.VirtualKeyboardProvider, { children: _jsxs(BaseDrawer.Portal, { children: [_jsx(DrawerBackdrop, { "data-role": "backdrop" }), _jsx(BaseDrawer.Viewport, { className: cls.viewport, children: _jsxs(StyledPopup, Object.assign({ ref: finalRef }, props, { className: className, children: [!disableDefaultClose && _jsx(DrawerDefaultClose, {}), _jsx(DrawerSwipeHandle, {}), _jsx("div", { className: clsx(cls.contentScrollArea, innerClassName), children: children })] })) })] }) }));
+};
+function DrawerSwipeHandle(_a) {
+    var { ref, className } = _a, props = __rest(_a, ["ref", "className"]);
+    return (_jsx("div", Object.assign({ ref: ref }, props, { className: clsx(cls.swipeHandle, className), children: _jsx("div", { className: cls.swipeHandleBar }) })));
+}
+function DrawerDefaultClose(_a) {
+    var { ref, className } = _a, props = __rest(_a, ["ref", "className"]);
+    return (_jsx(DrawerClose, Object.assign({ className: clsx(cls.close, className), "aria-label": "Close drawer", ref: ref }, props, { render: _jsx(Button, { emphasis: "ghost", size: "small" }), children: _jsx(Icon, { name: "x" }) })));
+}
+const DrawerTitle = withClassName(BaseDrawer.Title, cls.title);
+const DrawerDescription = withClassName(BaseDrawer.Description, cls.description);
+const defaultSnapPoints = [0.75, 1];
+const DrawerRoot = (_a) => {
+    var { children, snapPoints = defaultSnapPoints } = _a, props = __rest(_a, ["children", "snapPoints"]);
+    return (_jsx(BaseDrawer.Root, Object.assign({ swipeDirection: "down", snapPoints: snapPoints }, props, { children: children })));
+};
+const DrawerTrigger = (_a) => {
+    var { render } = _a, props = __rest(_a, ["render"]);
+    return (_jsx(BaseDrawer.Trigger, Object.assign({ render: render || _jsx(Button, {}) }, props)));
+};
+function DrawerClose(_a) {
+    var { children, render } = _a, props = __rest(_a, ["children", "render"]);
+    return (_jsx(BaseDrawer.Close, Object.assign({ render: render !== null && render !== void 0 ? render : _jsx(Button, { emphasis: "default" }) }, props, { children: children !== null && children !== void 0 ? children : 'Close' })));
+}
+const DrawerActions = withClassName(Box, cls.actions);
+export const Drawer = Object.assign(DrawerRoot, {
+    Trigger: DrawerTrigger,
+    Content: DrawerContent,
+    Title: DrawerTitle,
+    Description: DrawerDescription,
+    Close: DrawerClose,
+    Actions: DrawerActions,
+    Unstyled: BaseDrawer,
+    createHandle: BaseDrawer.createHandle,
+});
+//# sourceMappingURL=Drawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.tsx"],"names":[],"mappings":"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"}

package/dist/components/drawer/Drawer.module.css

@@ -0,0 +1,236 @@
+@layer components {.overlay {
+	--bleed: 3rem;
+	--swipe-opacity: 0.2;
+
+	position: fixed;
+	min-height: 100dvh;
+	inset: 0;
+
+	@apply --mx-bg(var(--m-gray-ink));
+	opacity: calc(
+		0.2 + var(--swipe-opacity) * (1 - var(--drawer-swipe-progress, 0))
+	);
+
+	border-top: var(--m-lw) solid var(--m-gray);
+
+	transition: all var(--m-dur-long) var(--m-ease);
+
+	backdrop-filter: blur(2px);
+
+	&[data-starting-style],
+	&[data-ending-style] {
+		opacity: 0;
+	}
+
+	&[data-swiping] {
+		transition-duration: 0ms;
+	}
+
+	&[data-ending-style] {
+		transition-duration: calc(var(--drawer-swipe-strength) * var(--m-dur-long));
+	}
+}
+
+.viewport {
+	--bleed: 3rem;
+
+	position: fixed;
+	inset: 0;
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
+	touch-action: none;
+
+	&::after {
+		content: '';
+		position: fixed;
+		inset-inline: 0;
+		bottom: 0;
+		height: var(--bleed);
+		@apply --mx-bg(var(--m-surface-ambient-bg));
+		pointer-events: none;
+	}
+
+	&[data-closed]::after {
+		opacity: 0;
+	}
+
+	/* While swiping, the popup's own bleed covers the bottom edge, so hide the
+     fixed fill — otherwise it paints white over the backdrop once the popup is
+     dragged far enough down. */
+	&:has([data-swiping])::after {
+		opacity: 0;
+	}
+}
+
+.popup {
+	--bleed: 3rem;
+	--top-gap: 1rem;
+
+	box-sizing: border-box;
+	position: relative;
+	z-index: 1;
+	max-width: unset;
+	width: 100%;
+	max-height: calc(100% - var(--top-gap) + var(--bleed));
+	height: calc(100% - var(--top-gap) + var(--bleed));
+	margin-bottom: calc(-1 * var(--bleed));
+	padding-bottom: max(
+		0px,
+		calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y))
+	);
+
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+	@apply --mx-borderColor(var(--m-gray-heavy));
+
+	touch-action: none;
+
+	overflow: visible;
+
+	transition:
+		transform var(--m-dur-long) var(--m-ease),
+		box-shadow var(--m-dur-long) var(--m-ease),
+		padding-bottom var(--m-dur-long) var(--m-ease);
+
+	--shadow-dir: -1;
+	@apply --mx-shadow;
+	--mx-shadow-value: 0 calc(var(--shadow-dir, 1) * var(--m-shadow-lg-y))
+		var(--m-shadow-lg-blur) var(--m-shadow-lg-spread) var(--m-shadow-lg-color);
+
+	border-radius: var(--m-surface-rd) var(--m-surface-rd) 0 0;
+	border-bottom-width: 0;
+
+	transform: translateY(
+		calc(
+			var(--drawer-swipe-movement-y) + var(--drawer-snap-point-offset) -
+				var(--bleed)
+		)
+	);
+	will-change: transform;
+
+	/* Disable transitions while swiping so movement is immediate */
+	&[data-swiping] {
+		transition: none;
+		user-select: none;
+	}
+
+	&[data-starting-style],
+	&[data-ending-style] {
+		transform: translateY(calc(100% - var(--bleed)));
+		padding-bottom: 0;
+		box-shadow: 0 0 0 transparent;
+	}
+
+	&[data-ending-style] {
+		transition-duration: calc(var(--drawer-swipe-strength) * var(--m-dur-long));
+	}
+
+	&::after {
+		content: '';
+		position: absolute;
+		inset-inline: 0;
+		top: 100%;
+		height: var(--bleed);
+		background-color: inherit;
+		pointer-events: none;
+	}
+}
+
+.contentScrollArea {
+	flex: 1 1 auto;
+	min-height: 0;
+	overscroll-behavior: contain;
+	touch-action: auto;
+	overflow-y: auto;
+	padding: var(--m-surface-p);
+	display: flex;
+	flex-direction: column;
+	gap: var(--m-sp-md);
+}
+
+.swipeHandle {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	cursor: grab;
+	touch-action: none;
+	padding-block: var(--m-sp-lg);
+	user-select: none;
+	flex-shrink: 0;
+}
+
+.swipeHandleBar {
+	height: --fn-literal(4px);
+	width: 20%;
+	@apply --mx-bg(var(--m-gray));
+	border-radius: var(--m-rd-lg);
+}
+
+.close {
+	position: absolute;
+	right: var(--m-sp-sm);
+	top: var(--m-sp-sm);
+	z-index: 101;
+	display: flex;
+}
+
+.title {
+	@apply --mx-fg(var(--m-gray-ink));
+	font-size: var(--m-prose-primary-size);
+	font-weight: var(--m-prose-primary-weight);
+	line-height: var(--m-prose-primary-lineHeight);
+	margin-block-end: var(--m-sp-xs);
+	margin-block-start: 0;
+}
+
+.description {
+	@apply --mx-fg(var(--m-gray-heavy));
+	font-size: var(--m-prose-ambient-size);
+	line-height: var(--m-prose-ambient-lineHeight);
+	margin: 0;
+	margin-block-end: var(--m-sp-xs);
+}
+
+.actions {
+	position: sticky;
+	bottom: 0;
+	z-index: 100;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: end;
+	align-self: end;
+	@apply --mx-shadow;
+	--mx-shadow-value: 0 calc(-1 * var(--m-shadow-md-y)) 16px
+		var(--m-shadow-md-spread) var(--m-gray-paper);
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+	@apply --mx-bg-faded(50%);
+	margin-block-start: var(--m-sp-md);
+	gap: var(--m-sp-sm);
+	border-radius: var(--m-surface-rd);
+	transition: bottom var(--m-dur) var(--m-ease);
+
+	/*
+		Hide the actions when the keyboard is open.
+		Done by moving them downward behind it.
+		This both fixes a bug with the positioning, and
+		gives the user more room to see.
+	*/
+	transform: translateY(calc(2 * var(--drawer-keyboard-inset, 0px)));
+	/*
+		Same but with modern CSS if()
+	*/
+	@supports (
+		display: if(style(--drawer-keyboard-inset > 0px): none; else: flex;)
+	) {
+		display: if(style(--drawer-keyboard-inset > 0px): none; else: flex;);
+	}
+}
+}

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

@@ -0,0 +1,7 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Drawer } from './Drawer.js';
+declare const meta: any;
+export default meta;
+type Story = StoryObj<typeof Drawer>;
+export declare const Default: Story;
+export declare const NoDefaultClose: Story;

package/dist/components/drawer/Drawer.stories.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '../button/index.js';
+import { Input } from '../input/Input.js';
+import { H1, P } from '../typography/index.js';
+import { Drawer } from './Drawer.js';
+const meta = {
+    title: 'Components/Drawer',
+    component: Drawer,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+function DummyContent() {
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(H1, { children: "Some content" }), _jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi." }), _jsx(Input, { placeholder: "Type something..." }), _jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi." }), _jsx(Input, { placeholder: "Type something..." }), _jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi." }), _jsx(Input, { placeholder: "Type something..." }), _jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi." }), _jsx(Input, { placeholder: "Type something..." }), _jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi." }), _jsx(Input, { placeholder: "Type something..." }), _jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi." }), _jsx(Input, { placeholder: "Type something..." })] }));
+}
+export const Default = {
+    args: {
+        children: (_jsxs(_Fragment, { children: [_jsx(Drawer.Trigger, { render: _jsx(Button, {}), children: "Open" }), _jsxs(Drawer.Content, { children: [_jsx(Drawer.Title, { children: "Hello world" }), _jsx(DummyContent, {}), _jsxs(Drawer.Actions, { children: [_jsx(Drawer.Close, {}), _jsx(Button, { emphasis: "primary", children: "Accept" })] })] })] })),
+    },
+};
+export const NoDefaultClose = {
+    args: {
+        children: (_jsxs(_Fragment, { children: [_jsx(Drawer.Trigger, { render: _jsx(Button, {}), children: "Open" }), _jsxs(Drawer.Content, { disableDefaultClose: true, children: [_jsx(Drawer.Title, { children: "No default close" }), _jsx(DummyContent, {}), _jsx(Drawer.Actions, { children: _jsx(Drawer.Close, {}) })] })] })),
+    },
+};
+//# sourceMappingURL=Drawer.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.stories.js","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,IAAI,GAAQ;IACjB,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC6B,CAAC;AAEhC,eAAe,IAAI,CAAC;AAIpB,SAAS,YAAY;IACpB,OAAO,CACN,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,aACvD,KAAC,EAAE,+BAAkB,EACrB,KAAC,CAAC,8NAIE,EACJ,KAAC,KAAK,IAAC,WAAW,EAAC,mBAAmB,GAAG,EACzC,KAAC,CAAC,8NAIE,EACJ,KAAC,KAAK,IAAC,WAAW,EAAC,mBAAmB,GAAG,EACzC,KAAC,CAAC,0aAOE,EACJ,KAAC,KAAK,IAAC,WAAW,EAAC,mBAAmB,GAAG,EACzC,KAAC,CAAC,0aAOE,EACJ,KAAC,KAAK,IAAC,WAAW,EAAC,mBAAmB,GAAG,EACzC,KAAC,CAAC,0aAOE,EACJ,KAAC,KAAK,IAAC,WAAW,EAAC,mBAAmB,GAAG,EACzC,KAAC,CAAC,0aAOE,EACJ,KAAC,KAAK,IAAC,WAAW,EAAC,mBAAmB,GAAG,IACpC,CACN,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,IAAI,EAAE;QACL,QAAQ,EAAE,CACT,8BACC,KAAC,MAAM,CAAC,OAAO,IAAC,MAAM,EAAE,KAAC,MAAM,KAAG,qBAAuB,EACzD,MAAC,MAAM,CAAC,OAAO,eACd,KAAC,MAAM,CAAC,KAAK,8BAA2B,EACxC,KAAC,YAAY,KAAG,EAChB,MAAC,MAAM,CAAC,OAAO,eACd,KAAC,MAAM,CAAC,KAAK,KAAG,EAChB,KAAC,MAAM,IAAC,QAAQ,EAAC,SAAS,uBAAgB,IAC1B,IACD,IACf,CACH;KACD;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACpC,IAAI,EAAE;QACL,QAAQ,EAAE,CACT,8BACC,KAAC,MAAM,CAAC,OAAO,IAAC,MAAM,EAAE,KAAC,MAAM,KAAG,qBAAuB,EACzD,MAAC,MAAM,CAAC,OAAO,IAAC,mBAAmB,mBAClC,KAAC,MAAM,CAAC,KAAK,mCAAgC,EAC7C,KAAC,YAAY,KAAG,EAChB,KAAC,MAAM,CAAC,OAAO,cACd,KAAC,MAAM,CAAC,KAAK,KAAG,GACA,IACD,IACf,CACH;KACD;CACD,CAAC"}

package/dist/components/drawer/index.d.ts

@@ -0,0 +1 @@
+export * from './Drawer.js';

package/dist/components/drawer/index.js

@@ -0,0 +1,2 @@
+export * from './Drawer.js';
+//# sourceMappingURL=index.js.map

package/dist/components/drawer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/drawer/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/components/globalErrorFallback/GlobalErrorFallback.d.ts

@@ -1,4 +1,4 @@
-import { BoxProps } from '@a-type/ui';
+import { type BoxProps } from '../box/Box.js';
 export declare function GlobalErrorFallback({ children, ...rest }: BoxProps): import("react/jsx-runtime").JSX.Element;
 import { ButtonProps } from '@a-type/ui';
 export interface ReloadButtonProps extends ButtonProps {

package/dist/components/globalErrorFallback/GlobalErrorFallback.js

@@ -10,8 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Heading, P } from '@a-type/ui';
 import { useLocalStorage } from '../../hooks.js';
+import { Box } from '../box/Box.js';
+import { Heading, P } from '../typography/typography.js';
 export function GlobalErrorFallback(_a) {
     var { children } = _a, rest = __rest(_a, ["children"]);
     const hadRecentError = useHadRecentError();

package/dist/components/globalErrorFallback/GlobalErrorFallback.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalErrorFallback.js","sourceRoot":"","sources":["../../../src/components/globalErrorFallback/GlobalErrorFallback.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,GAAG,EAAY,OAAO,EAAE,CAAC,EAAE,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,MAAM,UAAU,mBAAmB,CAAC,EAA+B;QAA/B,EAAE,QAAQ,OAAqB,EAAhB,IAAI,cAAnB,YAAqB,CAAF;IACtD,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAE3C,OAAO,CACN,KAAC,GAAG,kBAAC,GAAG,QAAC,MAAM,EAAC,eAAe,EAAC,CAAC,UAAK,IAAI,cACzC,MAAC,GAAG,IACH,GAAG,QACH,KAAK,EAAC,OAAO,EACb,OAAO,EAAC,QAAQ,EAChB,GAAG,QACH,KAAK,EAAE,EAAE,QAAQ,EAAE,aAAa,EAAE,aAElC,KAAC,OAAO,IAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,EAAE,cAAM,qCAEhC,EACV,MAAC,CAAC,yDACsC,GAAG,EACzC,cAAc;4BACd,CAAC,CAAC,iGAAiG;4BACnG,CAAC,CAAC;kEAC0D,IAC1D,EACH,QAAQ,EACT,KAAC,YAAY,KAAG,IACX,IACD,CACN,CAAC;AACH,CAAC;AAED,OAAO,EAAE,MAAM,EAAe,IAAI,EAAE,MAAM,YAAY,CAAC;AAIvD,MAAM,UAAU,YAAY,CAAC,EAAwC;QAAxC,EAAE,OAAO,OAA+B,EAA1B,KAAK,cAAnB,WAAqB,CAAF;IAC/C,MAAM,CAAC,CAAC,EAAE,kBAAkB,CAAC,GAAG,kBAAkB,EAAE,CAAC;IAErD,MAAM,OAAO,GAAG,GAAG,EAAE;QACpB,kBAAkB,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,GAAG,CAAC,CAAC;QACrC,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;IAC1B,CAAC,CAAC;IAEF,OAAO,CACN,MAAC,MAAM,oBACF,KAAK,IACT,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE;YACf,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,EAAE,CAAC,CAAC;YACd,OAAO,EAAE,CAAC;QACX,CAAC,aAED,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,GAAG,EACvB,qCAAoB,KACZ,CACT,CAAC;AACH,CAAC;AAED,SAAS,kBAAkB;IAC1B,OAAO,eAAe,CAAC,4BAA4B,EAAE,CAAC,CAAC,CAAC;AACzD,CAAC;AAED,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;AACvB,MAAM,UAAU,iBAAiB;IAChC,MAAM,CAAC,eAAe,CAAC,GAAG,eAAe,CAAC,4BAA4B,EAAE,CAAC,CAAC,CAAC;IAE3E,MAAM,cAAc,GACnB,eAAe,GAAG,GAAG,IAAI,eAAe,GAAG,GAAG,GAAG,IAAI,GAAG,EAAE,GAAG,EAAE,CAAC;IAEjE,OAAO,cAAc,CAAC;AACvB,CAAC"}
+{"version":3,"file":"GlobalErrorFallback.js","sourceRoot":"","sources":["../../../src/components/globalErrorFallback/GlobalErrorFallback.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,GAAG,EAAiB,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,6BAA6B,CAAC;AAEzD,MAAM,UAAU,mBAAmB,CAAC,EAA+B;QAA/B,EAAE,QAAQ,OAAqB,EAAhB,IAAI,cAAnB,YAAqB,CAAF;IACtD,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAE3C,OAAO,CACN,KAAC,GAAG,kBAAC,GAAG,QAAC,MAAM,EAAC,eAAe,EAAC,CAAC,UAAK,IAAI,cACzC,MAAC,GAAG,IACH,GAAG,QACH,KAAK,EAAC,OAAO,EACb,OAAO,EAAC,QAAQ,EAChB,GAAG,QACH,KAAK,EAAE,EAAE,QAAQ,EAAE,aAAa,EAAE,aAElC,KAAC,OAAO,IAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,EAAE,cAAM,qCAEhC,EACV,MAAC,CAAC,yDACsC,GAAG,EACzC,cAAc;4BACd,CAAC,CAAC,iGAAiG;4BACnG,CAAC,CAAC;kEAC0D,IAC1D,EACH,QAAQ,EACT,KAAC,YAAY,KAAG,IACX,IACD,CACN,CAAC;AACH,CAAC;AAED,OAAO,EAAE,MAAM,EAAe,IAAI,EAAE,MAAM,YAAY,CAAC;AAIvD,MAAM,UAAU,YAAY,CAAC,EAAwC;QAAxC,EAAE,OAAO,OAA+B,EAA1B,KAAK,cAAnB,WAAqB,CAAF;IAC/C,MAAM,CAAC,CAAC,EAAE,kBAAkB,CAAC,GAAG,kBAAkB,EAAE,CAAC;IAErD,MAAM,OAAO,GAAG,GAAG,EAAE;QACpB,kBAAkB,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,GAAG,CAAC,CAAC;QACrC,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;IAC1B,CAAC,CAAC;IAEF,OAAO,CACN,MAAC,MAAM,oBACF,KAAK,IACT,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE;YACf,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,EAAE,CAAC,CAAC;YACd,OAAO,EAAE,CAAC;QACX,CAAC,aAED,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,GAAG,EACvB,qCAAoB,KACZ,CACT,CAAC;AACH,CAAC;AAED,SAAS,kBAAkB;IAC1B,OAAO,eAAe,CAAC,4BAA4B,EAAE,CAAC,CAAC,CAAC;AACzD,CAAC;AAED,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;AACvB,MAAM,UAAU,iBAAiB;IAChC,MAAM,CAAC,eAAe,CAAC,GAAG,eAAe,CAAC,4BAA4B,EAAE,CAAC,CAAC,CAAC;IAE3E,MAAM,cAAc,GACnB,eAAe,GAAG,GAAG,IAAI,eAAe,GAAG,GAAG,GAAG,IAAI,GAAG,EAAE,GAAG,EAAE,CAAC;IAEjE,OAAO,cAAc,CAAC;AACvB,CAAC"}

package/dist/components/index.d.ts

@@ -14,6 +14,7 @@ export * from './combobox/Combobox.js';
 export * from './contextMenu/contextMenu.js';
 export * from './datePicker/index.js';
 export * from './dialog/index.js';
+export * from './drawer/index.js';
 export * from './divider/index.js';
 export * from './dropdownMenu/index.js';
 export * from './editableText/EditableText.js';

package/dist/components/index.js

@@ -14,6 +14,7 @@ export * from './combobox/Combobox.js';
 export * from './contextMenu/contextMenu.js';
 export * from './datePicker/index.js';
 export * from './dialog/index.js';
+export * from './drawer/index.js';
 export * from './divider/index.js';
 export * from './dropdownMenu/index.js';
 export * from './editableText/EditableText.js';

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,8CAA8C,CAAC;AAC7D,cAAc,oCAAoC,CAAC;AACnD,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,cAAc,CAAC;AAC7B,cAAc,8CAA8C,CAAC;AAC7D,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oCAAoC,CAAC;AACnD,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,8CAA8C,CAAC;AAC7D,cAAc,oCAAoC,CAAC;AACnD,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,cAAc,CAAC;AAC7B,cAAc,8CAA8C,CAAC;AAC7D,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oCAAoC,CAAC;AACnD,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC"}

package/dist/components/scrollArea/ScrollArea.module.css

@@ -4,6 +4,7 @@
 	min-width: 0;
 	display: flex;
 	flex-direction: column;
+	touch-action: auto;
 }
 
 .viewport {

package/dist/hooks/withContextVariant.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Creates a context and HOC which swaps between two components
+ * based on a contextual value
+ */
+export declare function createWithContextVariant(): {
+    Context: import("react").Context<boolean>;
+    withContextVariant: <P extends object>(TrueComponent: React.ComponentType<P>, FalseComponent: React.ComponentType<P>) => (props: P) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/hooks/withContextVariant.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+/**
+ * Creates a context and HOC which swaps between two components
+ * based on a contextual value
+ */
+export function createWithContextVariant() {
+    const Context = createContext(false);
+    function withContextVariant(TrueComponent, FalseComponent) {
+        return function WithContextVariant(props) {
+            const contextValue = useContext(Context);
+            const Component = contextValue ? TrueComponent : FalseComponent;
+            return _jsx(Component, Object.assign({}, props));
+        };
+    }
+    return {
+        Context,
+        withContextVariant,
+    };
+}
+//# sourceMappingURL=withContextVariant.js.map

package/dist/hooks/withContextVariant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withContextVariant.js","sourceRoot":"","sources":["../../src/hooks/withContextVariant.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAElD;;;GAGG;AACH,MAAM,UAAU,wBAAwB;IACvC,MAAM,OAAO,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IACrC,SAAS,kBAAkB,CAC1B,aAAqC,EACrC,cAAsC;QAEtC,OAAO,SAAS,kBAAkB,CAAC,KAAQ;YAC1C,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;YACzC,MAAM,SAAS,GAAG,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc,CAAC;YAChE,OAAO,KAAC,SAAS,oBAAK,KAAK,EAAI,CAAC;QACjC,CAAC,CAAC;IACH,CAAC;IAED,OAAO;QACN,OAAO;QACP,kBAAkB;KAClB,CAAC;AACH,CAAC"}