@a-type/ui 6.0.13 → 6.0.14

package/dist/components/layouts/PageContent.module.css

@@ -7,11 +7,11 @@
 	anchor-name: --page-content;
 	flex: 1;
 
-	gap: var(--m-spacing-md);
+	gap: var(--m-space-md);
 
-	padding: var(--m-spacing-md);
+	padding: var(--m-space-md);
 	@media (min-width: 768px) {
-		padding: var(--m-spacing-lg);
+		padding: var(--m-space-lg);
 	}
 
 	margin-inline: auto;

package/dist/components/layouts/PageFixedArea.module.css

@@ -6,6 +6,6 @@
 	display: flex;
 	flex-direction: column;
 	align-items: stretch;
-	gap: var(--m-spacing-sm);
+	gap: var(--m-space-sm);
 	@apply --mx-bg(inherit);
 }

package/dist/components/layouts/PageNav.module.css

@@ -12,8 +12,8 @@
 		position: absolute;
 		content: '';
 		top: 0;
-		left: var(--m-spacing-md);
-		right: var(--m-spacing-md);
+		left: var(--m-space-md);
+		right: var(--m-space-md);
 		height: 1px;
 		@apply --mx-bg(var(--m-color-neutral-heavy));
 		@media (min-width: 768px) {
@@ -25,7 +25,7 @@
 		bottom: auto;
 		left: auto;
 		right: auto;
-		top: var(--m-spacing-lg);
+		top: var(--m-space-lg);
 		height: auto;
 	}
 }

package/dist/components/layouts/PageNowPlaying.module.css

@@ -2,9 +2,9 @@
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	gap: var(--m-spacing-sm);
+	gap: var(--m-space-sm);
 
-	padding: var(--m-spacing-sm);
+	padding: var(--m-space-sm);
 
 	position: fixed;
 	position-anchor: --page-content;
@@ -14,7 +14,7 @@
 	bottom: --fn-literal(var(--nav-height, env(safe-area-inset-bottom, 0px)));
 
 	@media (min-width: 768px) {
-		bottom: var(--m-spacing-md);
+		bottom: var(--m-space-md);
 		align-items: center;
 		transition: bottom var(--m-duration) var(--m-easing);
 	}

package/dist/components/layouts/PageSection.module.css

@@ -1,7 +1,7 @@
 .root {
 	max-width: 80vw;
 	width: 100%;
-	padding: var(--m-spacing-md);
+	padding: var(--m-space-md);
 	@apply --mx-bg(var(--m-surface-ambient-bg));
 	border-radius: var(--m-radius-lg);
 	@apply --mx-borderColor(var(--m-surface-ambient-borderColor));
@@ -13,7 +13,7 @@
 
 .grid {
 	display: grid;
-	gap: var(--m-spacing-md);
+	gap: var(--m-space-md);
 	align-items: start;
 	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 }

package/dist/components/lightbox/Lightbox.module.css

@@ -26,8 +26,8 @@
 
 .close {
 	position: absolute;
-	right: var(--m-spacing-md);
-	top: var(--m-spacing-md);
+	right: var(--m-space-md);
+	top: var(--m-space-md);
 }
 
 .overlay {
@@ -60,7 +60,7 @@
 	width: 90vw;
 	max-width: 100%;
 
-	padding: var(--m-spacing-lg);
+	padding: var(--m-space-lg);
 	border: none;
 	background: none;
 	pointer-events: none;

package/dist/components/lists/lists.module.css

@@ -5,10 +5,10 @@
 	padding: 0;
 	display: flex;
 	flex-direction: column;
-	gap: var(--m-spacing-sm);
+	gap: var(--m-space-sm);
 
 	& > li {
-		margin-left: var(--m-spacing-sm);
+		margin-left: var(--m-space-sm);
 	}
 }
 

package/dist/components/navBar/NavBar.module.css

@@ -6,9 +6,9 @@
 	justify-items: center;
 	overflow: clip;
 	border-radius: 0;
-	padding: var(--m-spacing-sm);
+	padding: var(--m-space-sm);
 	z-index: 50;
-	padding-bottom: calc(var(--m-spacing-sm) + env(safe-area-inset-bottom, 0px));
+	padding-bottom: calc(var(--m-space-sm) + env(safe-area-inset-bottom, 0px));
 
 	@media (min-width: 768px) {
 		height: min-content;
@@ -16,11 +16,11 @@
 		flex-direction: column;
 		align-items: stretch;
 		justify-content: start;
-		gap: var(--m-spacing-sm);
+		gap: var(--m-space-sm);
 		overflow-x: clip;
 		overflow-y: auto;
 		border-radius: 0;
-		padding-bottom: var(--m-spacing-xl);
+		padding-bottom: var(--m-space-xl);
 		box-shadow: none;
 		@apply --mx-bg(transparent);
 		border: none;
@@ -36,7 +36,7 @@
 	user-select: none;
 	align-items: center;
 	justify-content: center;
-	gap: var(--m-spacing-sm);
+	gap: var(--m-space-sm);
 	white-space: nowrap;
 	padding: var(--m-action-padding);
 	transition: all var(--m-duration) var(--m-easing);
@@ -44,9 +44,9 @@
 	@apply --mx-bg(transparent);
 	border-radius: var(--m-radius-sm);
 	border: none;
-	font-size: var(--m-text-ambient-size);
+	font-size: var(--m-prose-ambient-size);
 	line-height: 1;
-	font-weight: var(--m-text-ambient-weight);
+	font-weight: var(--m-prose-ambient-weight);
 	@apply --mx-shadow;
 
 	&:active {
@@ -76,10 +76,10 @@
 		flex-direction: row-reverse;
 		justify-content: end;
 		align-items: center;
-		gap: var(--m-spacing-md);
+		gap: var(--m-space-md);
 		padding: var(--m-action-padding);
 		overflow: visible;
-		font-size: var(--m-text-secondary-size);
+		font-size: var(--m-prose-secondary-size);
 		&:active {
 			@apply --mx-bg-heavier(1);
 		}
@@ -93,7 +93,7 @@
 	@media (min-width: 768px) {
 		@apply --mx-bg(var(--m-color-neutral-light));
 		@apply --mx-bg-faded(50%);
-		padding: var(--m-spacing-sm);
+		padding: var(--m-space-sm);
 		border-radius: var(--m-action-radius);
 
 		[data-active='true'] & {
@@ -104,7 +104,7 @@
 
 .itemText {
 	@apply --mx-fg(var(--m-color-neutral-ink));
-	font-size: var(--m-text-ambient-size);
+	font-size: var(--m-prose-ambient-size);
 	line-height: 1;
 	font-weight: inherit;
 	display: inline-block;
@@ -126,8 +126,8 @@
 
 .pip {
 	position: absolute;
-	top: var(--m-spacing-sm);
-	right: var(--m-spacing-sm);
+	top: var(--m-space-sm);
+	right: var(--m-space-sm);
 	width: 6px;
 	height: 6px;
 	border-radius: 50%;

package/dist/components/note/Note.module.css

@@ -24,11 +24,11 @@
 .content {
 	position: relative;
 	flex: 1;
-	padding: var(--m-spacing-sm);
+	padding: var(--m-space-sm);
 
-	font-size: var(--m-text-ambient-size);
-	line-height: var(--m-text-ambient-lineHeight);
-	font-weight: var(--m-text-ambient-weight);
+	font-size: var(--m-prose-ambient-size);
+	line-height: var(--m-prose-ambient-lineHeight);
+	font-weight: var(--m-prose-ambient-weight);
 	font-style: italic;
 
 	@apply --mx-fg(var(--m-color-neutral-ink));

package/dist/components/peek/Peek.module.css

@@ -76,10 +76,10 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: end;
-		padding: var(--m-spacing-sm);
-		font-size: var(--m-text-ambient-size);
-		line-height: var(--m-text-ambient-lineHeight);
-		font-weight: var(--m-text-ambient-weight);
+		padding: var(--m-space-sm);
+		font-size: var(--m-prose-ambient-size);
+		line-height: var(--m-prose-ambient-lineHeight);
+		font-weight: var(--m-prose-ambient-weight);
 		@apply --mx-fg(var(--m-color-neutral-heavy));
 	}
 	&[data-state='open'] {

package/dist/components/popover/Popover.module.css

@@ -1,24 +1,24 @@
 .close {
 	position: absolute;
-	right: var(--m-spacing-sm);
-	top: var(--m-spacing-sm);
+	right: var(--m-space-sm);
+	top: var(--m-space-sm);
 }
 
 .popup {
-	padding: var(--m-spacing-md);
+	padding: var(--m-space-md);
 }
 
 .title {
 	font-weight: 500;
 	margin: 0;
-	margin-block-end: var(--m-spacing-sm);
-	font-size: var(--m-text-secondary-size);
-	line-height: var(--m-text-secondary-lineHeight);
+	margin-block-end: var(--m-space-sm);
+	font-size: var(--m-prose-secondary-size);
+	line-height: var(--m-prose-secondary-lineHeight);
 }
 
 .description {
 	margin: 0;
-	font-size: var(--m-text-ambient-size);
-	line-height: var(--m-text-ambient-lineHeight);
+	font-size: var(--m-prose-ambient-size);
+	line-height: var(--m-prose-ambient-lineHeight);
 	@apply --mx-fg(var(--m-color-neutral-heavy));
 }

package/dist/components/popover/Popover.stories.js

@@ -12,7 +12,7 @@ const meta = {
 export default meta;
 export const Default = {
     render(args) {
-        return (_jsxs(Popover, Object.assign({}, args, { children: [_jsx(Popover.Trigger, { render: _jsx(Button, { color: "primary", size: "small" }), children: "Open Popover" }), _jsxs(Popover.Content, { style: { padding: 'var(--m-spacing-md)' }, children: [_jsx(Popover.Arrow, {}), _jsx(Popover.Title, { children: "Hello" }), _jsx(Popover.Description, { children: "This is a popover content." }), _jsx(Popover.Close, {})] })] })));
+        return (_jsxs(Popover, Object.assign({}, args, { children: [_jsx(Popover.Trigger, { render: _jsx(Button, { color: "primary", size: "small" }), children: "Open Popover" }), _jsxs(Popover.Content, { style: { padding: 'var(--m-space-md)' }, children: [_jsx(Popover.Arrow, {}), _jsx(Popover.Title, { children: "Hello" }), _jsx(Popover.Description, { children: "This is a popover content." }), _jsx(Popover.Close, {})] })] })));
     },
 };
 //# sourceMappingURL=Popover.stories.js.map

package/dist/components/popover/Popover.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.stories.js","sourceRoot":"","sources":["../../../src/components/popover/Popover.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,MAAM,IAAI,GAAS;IAClB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACD,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,MAAC,OAAO,oBAAK,IAAI,eAChB,KAAC,OAAO,CAAC,OAAO,IAAC,MAAM,EAAE,KAAC,MAAM,IAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,GAAG,6BAE9C,EAClB,MAAC,OAAO,CAAC,OAAO,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE,aACzD,KAAC,OAAO,CAAC,KAAK,KAAG,EACjB,KAAC,OAAO,CAAC,KAAK,wBAAsB,EACpC,KAAC,OAAO,CAAC,WAAW,6CAAiD,EACrE,KAAC,OAAO,CAAC,KAAK,KAAG,IACA,KACT,CACV,CAAC;IACH,CAAC;CACD,CAAC"}
+{"version":3,"file":"Popover.stories.js","sourceRoot":"","sources":["../../../src/components/popover/Popover.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,MAAM,IAAI,GAAS;IAClB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACD,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,MAAC,OAAO,oBAAK,IAAI,eAChB,KAAC,OAAO,CAAC,OAAO,IAAC,MAAM,EAAE,KAAC,MAAM,IAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,GAAG,6BAE9C,EAClB,MAAC,OAAO,CAAC,OAAO,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,mBAAmB,EAAE,aACvD,KAAC,OAAO,CAAC,KAAK,KAAG,EACjB,KAAC,OAAO,CAAC,KAAK,wBAAsB,EACpC,KAAC,OAAO,CAAC,WAAW,6CAAiD,EACrE,KAAC,OAAO,CAAC,KAAK,KAAG,IACA,KACT,CACV,CAAC;IACH,CAAC;CACD,CAAC"}

package/dist/components/primitives/menus.module.css

@@ -61,9 +61,9 @@
 	min-height: 0px;
 	overflow-x: clip;
 	overflow-y: auto;
-	scroll-padding-block: var(--m-spacing-md);
+	scroll-padding-block: var(--m-space-md);
 	position: relative;
-	padding: var(--m-spacing-xs);
+	padding: var(--m-space-xs);
 
 	border-radius: inherit;
 }
@@ -77,14 +77,14 @@
 	user-select: none;
 
 	padding: var(--m-action-padding);
-	padding-left: var(--m-spacing-lg);
-	gap: var(--m-spacing-sm);
+	padding-left: var(--m-space-lg);
+	gap: var(--m-space-sm);
 
 	text-align: left;
-	font-size: var(--m-text-secondary-size);
-	font-weight: var(--m-text-secondary-weight);
-	line-height: var(--m-text-secondary-lineHeight);
-	font-family: var(--m-text-secondary-font);
+	font-size: var(--m-prose-secondary-size);
+	font-weight: var(--m-prose-secondary-weight);
+	line-height: var(--m-prose-secondary-lineHeight);
+	font-family: var(--m-prose-secondary-font);
 
 	@apply --mx-fg(color-contrast(var(--mx-bg-ref)));
 
@@ -111,17 +111,15 @@
 
 	border-radius: var(--m-radius-xs);
 	&:first-child {
-		border-top-left-radius: calc(var(--m-surface-radius) - var(--m-spacing-xs));
-		border-top-right-radius: calc(
-			var(--m-surface-radius) - var(--m-spacing-xs)
-		);
+		border-top-left-radius: calc(var(--m-surface-radius) - var(--m-space-xs));
+		border-top-right-radius: calc(var(--m-surface-radius) - var(--m-space-xs));
 	}
 	&:last-child {
 		border-bottom-left-radius: calc(
-			var(--m-surface-radius) - var(--m-spacing-xs)
+			var(--m-surface-radius) - var(--m-space-xs)
 		);
 		border-bottom-right-radius: calc(
-			var(--m-surface-radius) - var(--m-spacing-xs)
+			var(--m-surface-radius) - var(--m-space-xs)
 		);
 	}
 }
@@ -131,8 +129,8 @@
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	gap: var(--m-spacing-sm);
-	scroll-padding-block: var(--m-spacing-md);
+	gap: var(--m-space-sm);
+	scroll-padding-block: var(--m-space-md);
 }
 
 .itemIndicator {
@@ -144,12 +142,12 @@
 	align-items: center;
 	justify-content: center;
 	position: relative;
-	right: calc(-1 * var(--m-spacing-xs));
+	right: calc(-1 * var(--m-space-xs));
 }
 
 .itemRightSlot {
 	margin-inline-start: auto;
-	padding-inline-start: var(--m-spacing-sm);
+	padding-inline-start: var(--m-space-sm);
 }
 
 .arrow {
@@ -193,7 +191,7 @@
 }
 
 .separator {
-	margin: var(--m-spacing-xs);
+	margin: var(--m-space-xs);
 	height: var(--m-lineWidth-sm);
 	@apply --mx-bg(var(--m-color-neutral));
 }
@@ -201,17 +199,17 @@
 .groupLabel {
 	user-select: none;
 	@apply --mx-fg(var(--m-color-neutral-heavy));
-	font-size: var(--m-text-ambient-size);
-	line-height: var(--m-text-ambient-lineHeight);
-	font-weight: var(--m-text-ambient-weight);
+	font-size: var(--m-prose-ambient-size);
+	line-height: var(--m-prose-ambient-lineHeight);
+	font-weight: var(--m-prose-ambient-weight);
 }
 
 .scrollArrow {
 	box-sizing: border-box;
 	z-index: 1;
 	height: 1rem;
-	left: var(--m-spacing-md);
-	right: var(--m-spacing-md);
+	left: var(--m-space-md);
+	right: var(--m-space-md);
 	cursor: default;
 	user-select: none;
 	align-items: center;
@@ -220,9 +218,9 @@
 	@apply --mx-bg(var(--m-surface-ambient-bg));
 	@apply --mx-fg(var(--m-surface-ambient-fg));
 	border-radius: inherit;
-	font-size: var(--m-text-ambient-size);
-	line-height: var(--m-text-ambient-lineHeight);
-	font-weight: var(--m-text-ambient-weight);
+	font-size: var(--m-prose-ambient-size);
+	line-height: var(--m-prose-ambient-lineHeight);
+	font-weight: var(--m-prose-ambient-weight);
 
 	&::before {
 		position: absolute;

package/dist/components/progress/Progress.module.css

@@ -3,8 +3,8 @@
 
 	display: grid;
 	grid-template-columns: 1fr 1fr;
-	row-gap: var(--m-spacing-xs);
-	column-gap: var(--m-spacing-md);
+	row-gap: var(--m-space-xs);
+	column-gap: var(--m-space-md);
 	align-items: center;
 	box-sizing: border-box;
 }
@@ -38,9 +38,9 @@
 	grid-column-start: 1;
 	grid-row-start: 1;
 	@apply --mx-fg(var(--m-color-neutral-ink));
-	font-size: var(--m-text-ambient-size);
-	line-height: var(--m-text-ambient-lineHeight);
-	font-weight: var(--m-text-ambient-weight);
+	font-size: var(--m-prose-ambient-size);
+	line-height: var(--m-prose-ambient-lineHeight);
+	font-weight: var(--m-prose-ambient-weight);
 }
 
 .value {
@@ -48,7 +48,7 @@
 	grid-row-start: 1;
 	justify-self: end;
 	@apply --mx-fg(var(--m-color-neutral-ink));
-	font-size: var(--m-text-ambient-size);
-	line-height: var(--m-text-ambient-lineHeight);
+	font-size: var(--m-prose-ambient-size);
+	line-height: var(--m-prose-ambient-lineHeight);
 	font-weight: 500;
 }

package/dist/components/pwaInstall/PwaInstall.module.css

@@ -1,14 +1,14 @@
 .dialogContent {
 	display: flex;
 	flex-direction: column;
-	gap: var(--m-spacing-xs);
+	gap: var(--m-space-xs);
 }
 
 .dialogTitle {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	gap: var(--m-spacing-md);
+	gap: var(--m-space-md);
 }
 
 .appIcon {
@@ -19,5 +19,5 @@
 }
 
 .appDescription {
-	margin-bottom: var(--m-spacing-sm);
+	margin-bottom: var(--m-space-sm);
 }

package/dist/components/quickAction/QuickAction.module.css

@@ -1,7 +1,7 @@
 .trigger {
 	position: relative;
 	justify-content: center;
-	padding: var(--m-spacing-xs);
+	padding: var(--m-space-xs);
 	border-radius: var(--m-action-radius);
 }
 

package/dist/components/richEditor/richEditor.module.css

@@ -1,5 +1,5 @@
 .root {
-	@apply --mx-text-secondary;
+	@apply --mx-prose-secondary;
 	width: 100%;
 
 	& .ProseMirror {
@@ -16,36 +16,36 @@
 	}
 
 	& h1 {
-		@apply --mx-text-primary;
+		@apply --mx-prose-primary;
 		&:not(:first-child) {
-			margin-top: var(--m-spacing-xl);
+			margin-top: var(--m-space-xl);
 		}
 	}
 	& h2 {
-		@apply --mx-text-secondary;
-		font-weight: var(--m-text-primary-weight);
+		@apply --mx-prose-secondary;
+		font-weight: var(--m-prose-primary-weight);
 		&:not(:first-child) {
-			margin-top: var(--m-spacing-lg);
+			margin-top: var(--m-space-lg);
 		}
 	}
 	& h3 {
-		@apply --mx-text-ambient;
-		font-weight: var(--m-text-primary-weight);
+		@apply --mx-prose-ambient;
+		font-weight: var(--m-prose-primary-weight);
 		text-transform: uppercase;
 		&:not(:first-child) {
-			margin-top: var(--m-spacing-md);
+			margin-top: var(--m-space-md);
 		}
 	}
 	& h4 {
-		@apply --mx-text-ambient;
-		font-weight: var(--m-text-primary-weight);
+		@apply --mx-prose-ambient;
+		font-weight: var(--m-prose-primary-weight);
 		&:not(:first-child) {
-			margin-top: var(--m-spacing-md);
+			margin-top: var(--m-space-md);
 		}
 	}
 	& p {
-		@apply --mx-text-secondary;
-		margin-bottom: var(--m-spacing-md);
+		@apply --mx-prose-secondary;
+		margin-bottom: var(--m-space-md);
 	}
 	& a {
 		text-decoration: underline;
@@ -56,11 +56,11 @@
 	}
 	& blockquote {
 		border-left: 4px solid var(--m-color-neutral-heavy);
-		padding-left: var(--m-spacing-md);
+		padding-left: var(--m-space-md);
 		font-style: italic;
-		margin-block: var(--m-spacing-md);
-		margin-inline-start: var(--m-spacing-md);
-		padding-inline: var(--m-spacing-md);
+		margin-block: var(--m-space-md);
+		margin-inline-start: var(--m-space-md);
+		padding-inline: var(--m-space-md);
 		@apply --mx-bg(var(--m-color-neutral-wash));
 	}
 	& ul {
@@ -71,17 +71,17 @@
 	}
 	& ul,
 	& ol {
-		padding-inline-start: var(--m-spacing-lg);
-		margin-block: var(--m-spacing-md);
+		padding-inline-start: var(--m-space-lg);
+		margin-block: var(--m-space-md);
 	}
 	& li {
-		margin-block-end: var(--m-spacing-xs);
+		margin-block-end: var(--m-space-xs);
 	}
 	& mark {
 		@apply --mx-bg(var(--m-color-main-wash));
 	}
 	& strong {
-		font-weight: var(--m-typography-weight-bold);
+		font-weight: var(--m-text-weight-bold);
 	}
 	& em {
 		font-style: italic;
@@ -89,7 +89,7 @@
 	& hr {
 		border: none;
 		border-top: var(--m-lineWidth) solid var(--m-color-neutral-heavy);
-		margin-block: var(--m-spacing-lg);
+		margin-block: var(--m-space-lg);
 	}
 }
 

package/dist/components/select/Select.module.css

@@ -1,7 +1,7 @@
 .trigger {
 	display: inline-flex;
 	font-weight: normal;
-	gap: var(--m-spacing-md);
+	gap: var(--m-space-md);
 
 	&[data-placeholder] {
 		color: var(--m-color-neutral-heavy);
@@ -14,7 +14,7 @@
 }
 
 .groupLabel {
-	padding-inline: var(--m-spacing-lg);
+	padding-inline: var(--m-space-lg);
 }
 
 .icon {

package/dist/components/spinner/Spinner.module.css

@@ -50,5 +50,5 @@
 	align-items: center;
 	align-self: stretch;
 	justify-content: center;
-	gap: var(--m-spacing-md);
+	gap: var(--m-space-md);
 }

package/dist/components/switch/Switch.module.css

@@ -58,6 +58,6 @@
 		justify-content: center;
 		content: '✓';
 		color: var(--m-color-main-ink);
-		font-size: var(--m-text-ambient-size);
+		font-size: var(--m-prose-ambient-size);
 	}
 }

package/dist/components/tabs/tabs.module.css

@@ -3,7 +3,7 @@
 	display: flex;
 	flex-direction: row;
 	align-items: flex-start;
-	gap: var(--m-spacing-xs);
+	gap: var(--m-space-xs);
 }
 
 .trigger {
@@ -13,7 +13,7 @@
 	flex-direction: row;
 	align-items: center;
 	justify-content: center;
-	gap: var(--m-spacing-xs);
+	gap: var(--m-space-xs);
 	padding: var(--m-action-padding);
 
 	cursor: pointer;
@@ -24,8 +24,8 @@
 	white-space: nowrap;
 
 	@apply --mx-fg(var(--m-color-neutral-ink));
-	font-size: var(--m-text-secondary-size);
-	font-weight: var(--m-text-secondary-weight);
+	font-size: var(--m-prose-secondary-size);
+	font-weight: var(--m-prose-secondary-weight);
 	line-height: 1;
 	font-family: inherit;
 
@@ -105,7 +105,7 @@
 .moreLeftIcon {
 	pointer-events: none;
 	position: absolute;
-	left: var(--m-spacing-xs);
+	left: var(--m-space-xs);
 	top: 50%;
 	z-index: 10;
 	height: --fn-literal(16px);
@@ -123,7 +123,7 @@
 .moreRightIcon {
 	pointer-events: none;
 	position: absolute;
-	right: var(--m-spacing-xs);
+	right: var(--m-space-xs);
 	top: 50%;
 	z-index: 10;
 	height: --fn-literal(16px);

package/dist/components/textArea/TextArea.module.css

@@ -10,5 +10,5 @@
 }
 
 .border {
-	padding-block-end: var(--m-spacing-sm);
+	padding-block-end: var(--m-space-sm);
 }