@a-type/ui 6.0.80 → 6.1.0

package/dist/components/toasts/toasts.module.css

@@ -4,8 +4,8 @@
 }
 
 .toast {
-	--gap: var(--m-space-sm);
-	--peek: var(--m-space-sm);
+	--gap: var(--m-sp-sm);
+	--peek: var(--m-sp-sm);
 	--scale: calc(max(0, 1 - var(--toast-index) * 0.1));
 	--height: var(--toast-frontmost-height, var(--toast-height));
 	--shrink: calc(1 - var(--scale));
@@ -17,7 +17,7 @@
 	/* basic positioning */
 	position: fixed;
 	left: auto;
-	top: var(--m-space-xs);
+	top: var(--m-sp-xs);
 	z-index: calc(100000 - var(--toast-index));
 	margin-right: 0;
 	width: 100%;
@@ -27,7 +27,7 @@
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	gap: var(--m-space-xs);
+	gap: var(--m-sp-xs);
 
 	/* styling happens in content element */
 
@@ -43,9 +43,9 @@
 		)
 		scale(var(--scale));
 	transition:
-		transform var(--m-duration) var(--m-easing),
-		opacity var(--m-duration) var(--m-easing),
-		height var(--m-duration-short) var(--m-easing);
+		transform var(--m-dur) var(--m-ease),
+		opacity var(--m-dur) var(--m-ease),
+		height var(--m-dur-short) var(--m-ease);
 
 	&::after {
 		position: absolute;
@@ -100,7 +100,7 @@
 	pointer-events: auto;
 	display: flex;
 	flex-direction: column;
-	gap: var(--m-space-sm);
+	gap: var(--m-sp-sm);
 
 	&[data-behind]:not([data-expanded]) {
 		pointer-events: none;
@@ -115,10 +115,10 @@
 	@apply --mx-shadow(var(--m-shadow-md));
 	@apply --mx-surface-secondary;
 
-	padding-inline-start: var(--m-space-md);
-	padding-inline-end: var(--m-space-sm);
-	padding-block: var(--m-space-sm);
-	gap: var(--m-space-sm);
+	padding-inline-start: var(--m-sp-md);
+	padding-inline-end: var(--m-sp-sm);
+	padding-block: var(--m-sp-sm);
+	gap: var(--m-sp-sm);
 
 	[data-behind]:not([data-expanded]) & {
 		max-height: var(--height);
@@ -130,10 +130,10 @@
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	gap: var(--m-space-xs);
+	gap: var(--m-sp-xs);
 	@apply --mx-fg(inherit);
 
-	transition: opacity var(--m-duration) var(--m-easing);
+	transition: opacity var(--m-dur) var(--m-ease);
 
 	/* Hide content when not in front */
 	[data-behind]:not([data-expanded]) & {
@@ -148,20 +148,20 @@
 .toastMainBodyContent {
 	display: flex;
 	flex-direction: column;
-	gap: var(--m-space-xs);
+	gap: var(--m-sp-xs);
 	@apply --mx-fg(inherit);
 }
 
 .toastTitle {
 	@apply --mx-fg(inherit);
 	@apply --mx-prose-secondary;
-	font-weight: var(--m-text-weight-bold);
+	font-weight: var(--m-fw-bold);
 	margin: 0;
 }
 
 .toastDescriptionRow {
 	display: flex;
-	gap: var(--m-space-sm);
+	gap: var(--m-sp-sm);
 }
 
 .icon {
@@ -187,13 +187,13 @@
 	margin-inline-start: auto;
 	display: flex;
 	align-items: center;
-	gap: var(--m-space-xs);
+	gap: var(--m-sp-xs);
 
 	font-size: var(--m-prose-ambient-size);
 	line-height: var(--m-prose-ambient-lineHeight);
 	font-weight: var(--m-prose-ambient-weight);
 
-	transition: opacity var(--m-duration) var(--m-easing);
+	transition: opacity var(--m-dur) var(--m-ease);
 
 	[data-behind]:not([data-expanded]) & {
 		opacity: 0;

package/dist/components/toggleGroup/toggleGroup.module.css

@@ -1,10 +1,10 @@
 @layer components {.root {
 	width: fit-content;
 	display: inline-flex;
-	gap: var(--m-space-sm);
-	border-radius: var(--m-radius-lg);
+	gap: var(--m-sp-sm);
+	border-radius: var(--m-rd-lg);
 
-	@apply --mx-bg(--fn-color-faded(var(--m-color-main-light), 20%));
+	@apply --mx-bg(--fn-color-faded(var(--m-tint-light), 20%));
 }
 
 .item {
@@ -13,36 +13,36 @@
 	align-items: center;
 	justify-content: center;
 	white-space: nowrap;
-	transition: all var(--m-duration) var(--m-easing);
+	transition: all var(--m-dur) var(--m-ease);
 
-	@apply --mx-fg(var(--m-color-neutral-ink));
+	@apply --mx-fg(var(--m-gray-ink));
 
-	padding: var(--m-action-padding);
+	padding: var(--m-action-p);
 
 	@apply --mx-borderColor(transparent);
-	border-radius: var(--m-radius-lg);
+	border-radius: var(--m-rd-lg);
 
 	&[data-pressed] {
 		@apply --mx-shadow;
 		--mx-shadow-value: var(--m-shadow-sm);
-		@apply --mx-bg(var(--m-color-main));
-		@apply --mx-borderColor(var(--m-color-neutral-ink));
+		@apply --mx-bg(var(--m-tint));
+		@apply --mx-borderColor(var(--m-gray-ink));
 	}
 
 	&:not([data-pressed]) {
-		@apply --mx-bg(--fn-color-faded(var(--m-color-neutral), 30%));
+		@apply --mx-bg(--fn-color-faded(var(--m-gray), 30%));
 	}
 
 	&:hover:not([data-pressed]) {
 		@apply --mx-bg-lighter(2);
 		--mx-ring-value: --fn-ring(var(--mx-bg-ref), 2px);
-		@apply --mx-borderColor(--fn-color-faded(var(--m-color-main-ink), 20%));
+		@apply --mx-borderColor(--fn-color-faded(var(--m-tint-ink), 20%));
 	}
 
 	&:active:not([data-pressed]) {
 		@apply --mx-bg-lighter(1);
 		--mx-ring-value: --fn-ring(var(--mx-bg-ref), 4px);
-		@apply --mx-borderColor(--fn-color-faded(var(--m-color-main-ink), 30%));
+		@apply --mx-borderColor(--fn-color-faded(var(--m-tint-ink), 30%));
 	}
 
 	&:focus {

package/dist/components/tooltip/Tooltip.module.css

@@ -3,8 +3,8 @@
 	display: flex;
 	user-select: none;
 
-	padding: var(--m-surface-padding);
-	border-radius: var(--m-surface-radius);
+	padding: var(--m-surface-p);
+	border-radius: var(--m-surface-rd);
 
 	font-size: var(--m-prose-ambient-size);
 
@@ -18,22 +18,22 @@
 	--mx-shadow-value: var(--m-shadow-sm);
 
 	&[data-color='contrast'] {
-		@apply --mx-fg(var(--m-color-neutral-paper));
-		@apply --mx-bg(var(--m-color-neutral-ink));
+		@apply --mx-fg(var(--m-gray-paper));
+		@apply --mx-bg(var(--m-gray-ink));
 	}
 
 	&[data-color='white'],
 	&[data-color='neutral'] {
-		@apply --mx-fg(var(--m-color-neutral-ink));
-		@apply --mx-bg(var(--m-color-neutral-paper));
-		@apply --mx-borderColor(var(--m-color-neutral));
+		@apply --mx-fg(var(--m-gray-ink));
+		@apply --mx-bg(var(--m-gray-paper));
+		@apply --mx-borderColor(var(--m-gray));
 		border-style: solid;
-		border-width: var(--m-lineWidth-sm);
+		border-width: var(--m-lw-sm);
 	}
 
 	&[data-color='attention'] {
-		@apply --mx-bg(var(--m-color-main-heavy));
-		@apply --mx-fg(var(--m-color-neutral-paper));
+		@apply --mx-bg(var(--m-tint-heavy));
+		@apply --mx-fg(var(--m-gray-paper));
 	}
 
 	opacity: 0;

package/dist/components/typography/typography.d.ts

@@ -6,7 +6,6 @@ export interface TypographyProps extends useRender.ComponentProps<'span'> {
     underline?: boolean;
     strikethrough?: boolean;
     bold?: boolean;
-    thin?: boolean;
     normal?: boolean;
     uppercase?: boolean;
     truncate?: boolean;
@@ -15,7 +14,7 @@ export interface TypographyProps extends useRender.ComponentProps<'span'> {
     wrap?: boolean;
     align?: 'start' | 'center' | 'end';
 }
-export declare function Text({ emphasis, italic, underline, strikethrough, render, className, bold, thin, truncate, dim, color, normal, uppercase, wrap, align, ...rest }: TypographyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function Text({ emphasis, italic, underline, strikethrough, render, className, bold, truncate, dim, color, normal, uppercase, wrap, align, ...rest }: TypographyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare const Heading: (props: TypographyProps) => import("react/jsx-runtime").JSX.Element;
 export declare const HeroText: import("react").FunctionComponent<TypographyProps>;
 export declare const P: (props: TypographyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/typography/typography.js

@@ -16,7 +16,7 @@ import { withClassName } from '../../hooks/withClassName.js';
 import { withProps } from '../../hooks/withProps.js';
 import cls from './typography.module.css';
 export function Text(_a) {
-    var { emphasis, italic, underline, strikethrough, render, className, bold, thin, truncate, dim, color, normal, uppercase, wrap, align } = _a, rest = __rest(_a, ["emphasis", "italic", "underline", "strikethrough", "render", "className", "bold", "thin", "truncate", "dim", "color", "normal", "uppercase", "wrap", "align"]);
+    var { emphasis, italic, underline, strikethrough, render, className, bold, truncate, dim, color, normal, uppercase, wrap, align } = _a, rest = __rest(_a, ["emphasis", "italic", "underline", "strikethrough", "render", "className", "bold", "truncate", "dim", "color", "normal", "uppercase", "wrap", "align"]);
     return useRender({
         render,
         defaultTagName: 'span',
@@ -27,7 +27,6 @@ export function Text(_a) {
             underline: underline ? true : undefined,
             strikethrough: strikethrough ? true : undefined,
             bold: bold ? true : undefined,
-            thin: thin ? true : undefined,
             truncate: truncate ? true : undefined,
             dim: dim ? true : undefined,
             color: color ? color : undefined,

package/dist/components/typography/typography.js.map

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

package/dist/components/typography/typography.module.css

@@ -29,13 +29,10 @@
 		text-decoration: line-through;
 	}
 	&[data-bold] {
-		font-weight: var(--m-text-weight-bold);
-	}
-	&[data-thin] {
-		font-weight: var(--m-text-weight-thin);
+		font-weight: var(--m-fw-bold);
 	}
 	&[data-normal] {
-		font-weight: var(--m-text-weight-normal);
+		font-weight: var(--m-fw-normal);
 	}
 	&[data-uppercase] {
 		text-transform: uppercase;
@@ -58,16 +55,16 @@
 	}
 
 	&[data-color='neutral'] {
-		@apply --mx-fg(var(--m-color-neutral-ink));
+		@apply --mx-fg(var(--m-gray-ink));
 	}
 	&[data-color='main'] {
-		@apply --mx-fg(var(--m-color-main-heavy));
+		@apply --mx-fg(var(--m-tint-heavy));
 	}
 	&[data-color='attention'] {
-		@apply --mx-fg(var(--m-color-palette-attention-heavy));
+		@apply --mx-fg(var(--m-color-attention-heavy));
 	}
 	&[data-color='success'] {
-		@apply --mx-fg(var(--m-color-palette-success-heavy));
+		@apply --mx-fg(var(--m-color-success-heavy));
 	}
 
 	&[data-align='start'] {

package/dist/components/viewport/Viewport.module.css

@@ -18,7 +18,7 @@
 	}
 	&:focus-visible {
 		@apply --mx-shadow;
-		--mx-ring-value: --fn-ring(var(--m-color-main-ink), 1px);
+		--mx-ring-value: --fn-ring(var(--m-tint-ink), 1px);
 	}
 }
 
@@ -26,20 +26,20 @@
 	position: absolute;
 
 	&[data-position='top-left'] {
-		top: var(--m-space-sm);
-		left: var(--m-space-sm);
+		top: var(--m-sp-sm);
+		left: var(--m-sp-sm);
 	}
 	&[data-position='top-right'] {
-		top: var(--m-space-sm);
-		right: var(--m-space-sm);
+		top: var(--m-sp-sm);
+		right: var(--m-sp-sm);
 	}
 	&[data-position='bottom-left'] {
-		bottom: var(--m-space-sm);
-		left: var(--m-space-sm);
+		bottom: var(--m-sp-sm);
+		left: var(--m-sp-sm);
 	}
 	&[data-position='bottom-right'] {
-		bottom: var(--m-space-sm);
-		right: var(--m-space-sm);
+		bottom: var(--m-sp-sm);
+		right: var(--m-sp-sm);
 	}
 }
 }

package/dist/css/base.css

@@ -28,7 +28,7 @@
 
 	body {
 		overflow: overlay;
-		@apply --mx-bg(var(--m-color-main-paper));
+		@apply --mx-bg(var(--m-tint-paper));
 	}
 
 	a {

package/dist/css/util.css

@@ -61,19 +61,19 @@
 	gap: 0;
 }
 .gap-xs {
-	gap: var(--m-space-xs);
+	gap: var(--m-sp-xs);
 }
 .gap-sm {
-	gap: var(--m-space-sm);
+	gap: var(--m-sp-sm);
 }
 .gap-md {
-	gap: var(--m-space-md);
+	gap: var(--m-sp-md);
 }
 .gap-lg {
-	gap: var(--m-space-lg);
+	gap: var(--m-sp-lg);
 }
 .gap-xl {
-	gap: var(--m-space-xl);
+	gap: var(--m-sp-xl);
 }
 
 .items-start {
@@ -112,19 +112,19 @@
 	padding: 0;
 }
 .p-xs {
-	padding: var(--m-space-xs);
+	padding: var(--m-sp-xs);
 }
 .p-sm {
-	padding: var(--m-space-sm);
+	padding: var(--m-sp-sm);
 }
 .p-md {
-	padding: var(--m-space-md);
+	padding: var(--m-sp-md);
 }
 .p-lg {
-	padding: var(--m-space-lg);
+	padding: var(--m-sp-lg);
 }
 .p-xl {
-	padding: var(--m-space-xl);
+	padding: var(--m-sp-xl);
 }
 
 /* Responsive */

package/dist/hooks/useTitleBarColor.stories.js

@@ -46,7 +46,7 @@ function MockTitleBar() {
     return (_jsxs(Box, { justify: "between", items: "center", p: "md", style: { backgroundColor: color }, children: [_jsx("div", { children: time }), _jsx(Box, { gap: true, items: "center", children: _jsx(Icon, { name: "globe" }) })] }));
 }
 function Overrider() {
-    useThemedTitleBar('--m-color-accent-light');
+    useThemedTitleBar('--m-accent-light');
     return null;
 }
 //# sourceMappingURL=useTitleBarColor.stories.js.map

package/dist/hooks/useTitleBarColor.stories.js.map

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

package/dist/keyboard.stories.js

@@ -22,7 +22,7 @@ export const Default = {
                                     flexDirection: 'column',
                                     alignItems: 'center',
                                     justifyContent: 'center',
-                                    padding: 'var(--m-space-lg)',
+                                    padding: 'var(--m-sp-lg)',
                                 }, children: "Focus the inputs below to see how the virtual keyboard behavior works." }), _jsx(Input, { style: { width: '100%' } }), _jsx(TextArea, { style: { width: '100%' } })] }), _jsx(PageNowPlaying, { keepAboveKeyboard: true, children: _jsx(Input, { placeholder: "now playing" }) })] }) }));
     },
 };

package/dist/keyboard.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard.stories.js","sourceRoot":"","sources":["../src/keyboard.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EACN,KAAK,EACL,WAAW,EACX,cAAc,EACd,QAAQ,EACR,QAAQ,GACR,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,0BAA0B,EAAE,MAAM,uCAAuC,CAAC;AAEnF,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,uBAAuB;IAC9B,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;QAC7B,MAAM,EAAE,YAAY;KACpB;CACc,CAAC;AAEjB,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,0BAA0B,CAAC,SAAS,CAAC,CAAC;QACtC,OAAO,CACN,KAAC,QAAQ,IAAC,EAAE,EAAC,MAAM,YAClB,MAAC,WAAW,eACX,eACC,KAAK,EAAE;4BACN,MAAM,EAAE,OAAO;4BACf,OAAO,EAAE,MAAM;4BACf,aAAa,EAAE,QAAQ;yBACvB,aAED,cACC,SAAS,EAAC,WAAW,EACrB,KAAK,EAAE;oCACN,OAAO,EAAE,MAAM;oCACf,aAAa,EAAE,QAAQ;oCACvB,UAAU,EAAE,QAAQ;oCACpB,cAAc,EAAE,QAAQ;oCACxB,OAAO,EAAE,mBAAmB;iCAC5B,uFAII,EACN,KAAC,KAAK,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAI,EACnC,KAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAI,IACjC,EACN,KAAC,cAAc,IAAC,iBAAiB,kBAChC,KAAC,KAAK,IAAC,WAAW,EAAC,aAAa,GAAG,GACnB,IACJ,GACJ,CACX,CAAC;IACH,CAAC;CACD,CAAC"}
+{"version":3,"file":"keyboard.stories.js","sourceRoot":"","sources":["../src/keyboard.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EACN,KAAK,EACL,WAAW,EACX,cAAc,EACd,QAAQ,EACR,QAAQ,GACR,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,0BAA0B,EAAE,MAAM,uCAAuC,CAAC;AAEnF,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,uBAAuB;IAC9B,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;QAC7B,MAAM,EAAE,YAAY;KACpB;CACc,CAAC;AAEjB,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,0BAA0B,CAAC,SAAS,CAAC,CAAC;QACtC,OAAO,CACN,KAAC,QAAQ,IAAC,EAAE,EAAC,MAAM,YAClB,MAAC,WAAW,eACX,eACC,KAAK,EAAE;4BACN,MAAM,EAAE,OAAO;4BACf,OAAO,EAAE,MAAM;4BACf,aAAa,EAAE,QAAQ;yBACvB,aAED,cACC,SAAS,EAAC,WAAW,EACrB,KAAK,EAAE;oCACN,OAAO,EAAE,MAAM;oCACf,aAAa,EAAE,QAAQ;oCACvB,UAAU,EAAE,QAAQ;oCACpB,cAAc,EAAE,QAAQ;oCACxB,OAAO,EAAE,gBAAgB;iCACzB,uFAII,EACN,KAAC,KAAK,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAI,EACnC,KAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAI,IACjC,EACN,KAAC,cAAc,IAAC,iBAAiB,kBAChC,KAAC,KAAK,IAAC,WAAW,EAAC,aAAa,GAAG,GACnB,IACJ,GACJ,CACX,CAAC;IACH,CAAC;CACD,CAAC"}

package/dist/shadows.stories.js

@@ -15,7 +15,7 @@ export const Default = {
         return (_jsxs("div", { style: {
                 display: 'grid',
                 gridTemplateColumns: 'repeat(4, 1fr)',
-                gap: 'var(--m-space-xl)',
+                gap: 'var(--m-sp-xl)',
             }, children: [_jsx(Box, { surface: true, border: true, p: true, elevated: "sm", children: "Small Shadow" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "md", children: "Medium Shadow" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "lg", children: "Large Shadow" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "xl", children: "Extra Large Shadow" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "-sm", children: "Small Inset Shadow" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "-md", children: "Medium Inset Shadow" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "-lg", children: "Large Inset Shadow" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "-xl", children: "Extra Large Inset Shadow" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "sm-up", children: "Small Shadow Up" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "md-up", children: "Medium Shadow Up" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "lg-up", children: "Large Shadow Up" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "xl-up", children: "Extra Large Shadow Up" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "-sm-up", children: "Small Inset Shadow Up" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "-md-up", children: "Medium Inset Shadow Up" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "-lg-up", children: "Large Inset Shadow Up" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "-xl-up", children: "Extra Large Inset Shadow Up" })] }));
     },
 };

package/dist/shadows.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadows.stories.js","sourceRoot":"","sources":["../src/shadows.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAE5C,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,gBAAgB;IACvB,IAAI,EAAE;QACL,OAAO,EAAE,GAAG;KACZ;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACmC,CAAC;AAEtC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,eACC,KAAK,EAAE;gBACN,OAAO,EAAE,MAAM;gBACf,mBAAmB,EAAE,gBAAgB;gBACrC,GAAG,EAAE,mBAAmB;aACxB,aAED,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,IAAI,6BAE7B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,IAAI,8BAE7B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,IAAI,6BAE7B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,IAAI,mCAE7B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,KAAK,mCAE9B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,KAAK,oCAE9B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,KAAK,mCAE9B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,KAAK,yCAE9B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,OAAO,gCAEhC,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,OAAO,iCAEhC,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,OAAO,gCAEhC,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,OAAO,sCAEhC,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,QAAQ,sCAEjC,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,QAAQ,uCAEjC,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,QAAQ,sCAEjC,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,QAAQ,4CAEjC,IACD,CACN,CAAC;IACH,CAAC;CACD,CAAC"}
+{"version":3,"file":"shadows.stories.js","sourceRoot":"","sources":["../src/shadows.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAE5C,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,gBAAgB;IACvB,IAAI,EAAE;QACL,OAAO,EAAE,GAAG;KACZ;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACmC,CAAC;AAEtC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,eACC,KAAK,EAAE;gBACN,OAAO,EAAE,MAAM;gBACf,mBAAmB,EAAE,gBAAgB;gBACrC,GAAG,EAAE,gBAAgB;aACrB,aAED,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,IAAI,6BAE7B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,IAAI,8BAE7B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,IAAI,6BAE7B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,IAAI,mCAE7B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,KAAK,mCAE9B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,KAAK,oCAE9B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,KAAK,mCAE9B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,KAAK,yCAE9B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,OAAO,gCAEhC,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,OAAO,iCAEhC,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,OAAO,gCAEhC,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,OAAO,sCAEhC,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,QAAQ,sCAEjC,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,QAAQ,uCAEjC,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,QAAQ,sCAEjC,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,QAAQ,4CAEjC,IACD,CACN,CAAC;IACH,CAAC;CACD,CAAC"}

package/dist/theme.stories.module.css

@@ -1,7 +1,7 @@
 @layer components {.grid {
 	display: grid;
 	grid-template-columns: repeat(2, 1fr);
-	gap: var(--m-space-lg);
+	gap: var(--m-sp-lg);
 	width: 100%;
 	min-width: 0;
 	flex: 1 0 auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "6.0.80",
+  "version": "6.1.0",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"
@@ -36,13 +36,12 @@
     }
   },
   "peerDependencies": {
+    "@arbor-css/core": "^0.0.144",
     "react": "^19",
     "react-dom": "^19"
   },
   "dependencies": {
     "@a-type/utils": "^1.1.9",
-    "@arbor-css/core": "^0.0.140",
-    "@arbor-css/postcss": "^0.0.140",
     "@base-ui/react": "^1.4.1",
     "@use-gesture/react": "^10.3.1",
     "browser-image-resizer": "^2.4.1",
@@ -56,6 +55,8 @@
     "valtio": "^2.1.4"
   },
   "devDependencies": {
+    "@arbor-css/core": "^0.0.144",
+    "@arbor-css/postcss": "^0.0.144",
     "@eslint/js": "^9.39.2",
     "@storybook/addon-links": "10.4.0",
     "@storybook/react-vite": "10.4.0",
@@ -116,7 +117,7 @@
     "test": "vitest",
     "test:unit": "vitest --project=unit",
     "test:snapshots": "pnpm build && vitest --project=snapshots",
-    "test:arbor": "arbor validate ./src/**/*.css",
+    "test:arbor": "arbor validate ./src/*/*.css ./src/*/*/*.css",
     "typecheck": "tsc --noEmit",
     "test:browser": "vitest --config=vitest.browser.config.ts",
     "lint": "eslint **/*.{ts,tsx} --fix"