@a-type/ui 4.0.8 → 4.1.0-beta.2

package/src/components/select/Select.tsx

@@ -105,11 +105,11 @@ export const SelectIcon = ({
 }) => {
 	return (
 		<BaseSelect.Icon
-			className={classNames('color-inherit ml-auto', className)}
+			className={classNames('ml-auto color-inherit', className)}
 			{...props}
 			ref={forwardedRef}
 		>
-			<Icon name="chevron" className="w-[12px] h-[12px] relative top-1px" />
+			<Icon name="chevron" className="relative top-1px h-[12px] w-[12px]" />
 		</BaseSelect.Icon>
 	);
 };
@@ -124,10 +124,10 @@ export const SelectArrow = ({ className, ...props }: SelectArrowProps) => (
 );
 
 const scrollArrowClass = clsx(
-	'layer-components:(w-full bg-white z-1 text-center cursor-default select-none rounded-sm h-1rem text-xs flex items-center justify-center)',
-	'layer-components:before:(content-empty absolute w-full h-full left-0)',
+	'layer-components:(z-1 h-1rem w-full flex cursor-default select-none items-center justify-center rounded-sm text-center text-xs bg-white)',
+	'layer-components:before:(absolute left-0 h-full w-full content-empty)',
 	'layer-components:data-[direction=up]:data-[side=none]:before:(-top-full)',
-	'layer-components:data-[direction=down]:(bottom-0 data-[side=none]:before:(-bottom-full))',
+	'layer-components:data-[direction=down]:(bottom-0 data-[side=none]:before:-bottom-full)',
 );
 
 const contentStyle = {
@@ -174,32 +174,32 @@ export const SelectContent = ({
 					sticky={sticky}
 					positionMethod={positionMethod}
 					className={classNames(
-						'layer-components:(z-1 outline-none select-none)',
+						'layer-components:(z-1 select-none outline-none)',
 						'layer-components:(transform-origin-[--transform-origin])',
 					)}
 				>
 					<SelectArrow
 						className={clsx(
-							'layer-components:(border-black transition transform)',
-							'layer-components:data-[closed]:(opacity-0 scale-0)',
-							'layer-components:data-[open]:(opacity-100 scale-100)',
+							'layer-components:(transform transition border-black)',
+							'layer-components:data-[closed]:(scale-0 opacity-0)',
+							'layer-components:data-[open]:(scale-100 opacity-100)',
 						)}
 					/>
 					<BaseSelect.Popup
 						className={classNames(
-							'layer-components:(overflow-hidden bg-white rounded-md border border-solid border border-black shadow-lg bg-clip-padding transition)',
+							'layer-components:(overflow-hidden border border rounded-md border-solid bg-clip-padding shadow-lg transition bg-white border-black)',
 							'layer-components:transform-origin-[var(--transform-origin)]',
-							'layer-components:data-[starting-style]:data-[side=bottom]:(opacity-0 translate-y-4px)',
-							'layer-components:data-[ending-style]:data-[side=bottom]:(opacity-0 translate-y-4px)',
-							'layer-components:data-[starting-style]:data-[side=top]:(opacity-0 translate-y--4px)',
-							'layer-components:data-[ending-style]:data-[side=top]:(opacity-0 translate-y-0)',
-							'layer-components:data-[starting-style]:data-[side=right]:(opacity-0 translate-x-4px)',
-							'layer-components:data-[ending-style]:data-[side=right]:(opacity-0 translate-x-0)',
-							'layer-components:data-[starting-style]:data-[side=left]:(opacity-0 translate-x--4px)',
-							'layer-components:data-[ending-style]:data-[side=left]:(opacity-0 translate-x-0)',
+							'layer-components:data-[starting-style]:data-[side=bottom]:(translate-y-4px opacity-0)',
+							'layer-components:data-[ending-style]:data-[side=bottom]:(translate-y-4px opacity-0)',
+							'layer-components:data-[starting-style]:data-[side=top]:(translate-y--4px opacity-0)',
+							'layer-components:data-[ending-style]:data-[side=top]:(translate-y-0 opacity-0)',
+							'layer-components:data-[starting-style]:data-[side=right]:(translate-x-4px opacity-0)',
+							'layer-components:data-[ending-style]:data-[side=right]:(translate-x-0 opacity-0)',
+							'layer-components:data-[starting-style]:data-[side=left]:(translate-x--4px opacity-0)',
+							'layer-components:data-[ending-style]:data-[side=left]:(translate-x-0 opacity-0)',
 							'important:motion-reduce:animate-none',
-							'layer-components:data-[side=none]:(translate-y-0px min-w-[calc(var(--anchor-width)+2rem)])',
-							'layer-components:(min-w-[var(--anchor-width)] max-h-[var(--available-height)])',
+							'layer-components:data-[side=none]:(min-w-[calc(var(--anchor-width)+2rem)] translate-y-0px)',
+							'layer-components:(max-h-[var(--available-height)] min-w-[var(--anchor-width)])',
 							className,
 						)}
 						style={contentStyle}

package/src/components/skeletons/skeletons.tsx

@@ -15,7 +15,7 @@ export const TextSkeleton = ({
 	return (
 		<span
 			className={classNames(
-				'inline-block shrink-0 w-full h-full rounded-md bg-gradient-to-r from-transparent via-fg to-transparent [background-size:400%_400%] max-w-full animate-skeleton animate-duration-1200 animate-ease-in-out animate-iteration-infinite animate-alternate opacity-30',
+				'[background-size:400%_400%] inline-block h-full max-w-full w-full shrink-0 animate-skeleton animate-duration-1200 animate-ease-in-out animate-alternate animate-iteration-infinite rounded-md from-transparent via-fg to-transparent bg-gradient-to-r opacity-30',
 				className,
 			)}
 			style={{

package/src/components/slider/Slider.stories.tsx

@@ -58,7 +58,7 @@ export const CustomStyles: Story = {
 					})}
 				>
 					<Slider.Indicator />
-					<Slider.Thumb className="w-24px h-24px">
+					<Slider.Thumb className="h-24px w-24px">
 						<div className="text-lg">
 							{['😭', '😔', '😐', '😊', '😃'][(value as number) + 2]}
 						</div>

package/src/components/slider/Slider.tsx

@@ -70,13 +70,12 @@ export const SliderUi = ({
 );
 
 export interface SliderProps extends SliderRootProps {
-	label?: string;
 	color?: PaletteName;
 	ref?: Ref<HTMLDivElement>;
 }
 
 export const Slider = Object.assign(
-	function Slider({ label, ...props }: SliderProps) {
+	function Slider(props: SliderProps) {
 		return (
 			<SliderRoot {...props}>
 				<SliderUi />

package/src/components/spinner/Spinner.tsx

@@ -25,7 +25,7 @@ export const Spinner = function Spinner({
 			role="progressbar"
 			{...props}
 			className={classNames(
-				'flex-shrink-0 inline-block animate-spin animate-ease-linear animate-iteration-infinite color-inherit animate-duration-1400 transform-origin-[50%_50%]',
+				'inline-block flex-shrink-0 transform-origin-[50%_50%] animate-spin animate-duration-1400 animate-ease-linear animate-iteration-infinite color-inherit',
 				className,
 			)}
 			style={{ width: size, height: size, ...style }}
@@ -37,7 +37,7 @@ export const Spinner = function Spinner({
 				} ${CIRCLE_SIZE} ${CIRCLE_SIZE}`}
 			>
 				<circle
-					className="stroke-current animate-spinner-stroke animate-ease-in-out animate-iteration-infinite animate-duration-1400 [stroke-dasharray:80_200] [stroke-dashoffset:0]"
+					className="[stroke-dasharray:80_200] [stroke-dashoffset:0] animate-spinner-stroke animate-duration-1400 animate-ease-in-out animate-iteration-infinite stroke-current"
 					cx={CIRCLE_SIZE}
 					cy={CIRCLE_SIZE}
 					r={(CIRCLE_SIZE - thickness) / 2}
@@ -58,7 +58,7 @@ export const FullScreenSpinner = function FullScreenSpinner({
 	return (
 		<div
 			ref={ref}
-			className="flex flex-row gap-4 w-full flex-1 justify-center items-center self-stretch"
+			className="w-full flex flex-1 flex-row items-center self-stretch justify-center gap-4"
 		>
 			<Spinner {...props} />
 		</div>

package/src/components/textArea/TextArea.tsx

@@ -88,7 +88,7 @@ export const TextArea = function TextArea({
 			ref={finalRef}
 			className={classNames(
 				inputClassName,
-				'layer-components:([font-family:inherit] color-inherit overflow-hidden resize-none)',
+				'layer-components:([font-family:inherit] resize-none overflow-hidden color-inherit)',
 				'layer-variants:(rounded-lg px-4 py-4)',
 				{
 					'layer-components:[resize:vertical]': !autoSize,

package/src/components/toasts/toasts.tsx

@@ -51,19 +51,19 @@ function ToastList() {
 			className={clsx(
 				// variable setup
 				'[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))]',
-				'[--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))]',
+				'[--height:var(--toast-frontmost-height,var(--toast-height))] [--shrink:calc(1-var(--scale))]',
 				'[--offset-y:calc(var(--toast-offset-y)+calc(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))]',
 				// basic positioning
-				'fixed left-0 top-xs left-auto z-[calc(100000-var(--toast-index))] mr-0 w-full origin-top',
+				'fixed left-0 left-auto top-xs z-[calc(100000-var(--toast-index))] mr-0 w-full origin-top',
 				'h-[--height]',
-				'flex flex-col gap-xs items-center',
+				'flex flex-col items-center gap-xs',
 				// other properties
 				'select-none',
 				// animation and interaction
 				'translate-x-[--toast-swipe-movement-x] translate-y-[calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height)))] scale-[var(--scale)]',
 				'[transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]',
 				// ::after
-				'after:(absolute top-full left-0 h-[calc(var(--gap)+1px)] w-full content-empty)',
+				'after:(absolute left-0 top-full h-[calc(var(--gap)+1px)] w-full content-empty)',
 				// starting style
 				'data-[starting-style]:(-translate-y-150%)',
 				// limited
@@ -73,7 +73,7 @@ function ToastList() {
 				// ending styles
 				'data-[ending-style]:(opacity-0)',
 				// natural or close button
-				'[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:(-translate-y-150% scale-90 opacity-50)',
+				'[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:(scale-90 opacity-50 -translate-y-150%)',
 				// swiping down
 				'data-[ending-style]:data-[swipe-direction=down]:(translate-y-[calc(var(--toast-swipe-movement-y)+150%)])',
 				'data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:(translate-y-[calc(var(--toast-swipe-movement-y)+150%)])',
@@ -95,22 +95,22 @@ function ToastList() {
 				mode === 'dark' ? 'override-light' : 'override-dark',
 			)}
 		>
-			<Toast.Content className="[&[data-behind]:not([data-expanded])]:pointer-events-none flex flex-col gap-2px max-w-sm">
+			<Toast.Content className="max-w-sm flex flex-col gap-2px [&[data-behind]:not([data-expanded])]:pointer-events-none">
 				<div
 					className={clsx(
-						'layer-components:(bg-main-wash color-black rounded-md b-1 b-solid b-black shadow-md pl-md pr-sm py-sm relative)',
+						'layer-components:(relative b-1 b-black rounded-md b-solid py-sm pl-md pr-sm shadow-md color-black bg-main-wash)',
 						'layer-components:(flex flex-row gap-sm)',
-						'[[data-behind]:not([data-expanded])_&]:(bg-darken-2 max-h-[--height])',
+						'[[data-behind]:not([data-expanded])_&]:(max-h-[--height] bg-darken-2)',
 					)}
 				>
 					<div
 						className={clsx(
-							'flex flex-row gap-xs items-center',
-							'[[data-behind]:not([data-expanded])_&]:(opacity-0) [[data-expanded]_&]:(opacity-100) transition-opacity [transition-duration:250ms]',
+							'flex flex-row items-center gap-xs',
+							'[transition-duration:250ms] transition-opacity [[data-behind]:not([data-expanded])_&]:(opacity-0) [[data-expanded]_&]:(opacity-100)',
 						)}
 					>
 						<div className="flex flex-col gap-xs">
-							<Toast.Title className="text-sm leading-tight font-bold m-0" />
+							<Toast.Title className="m-0 text-sm font-bold leading-tight" />
 							<div className="flex gap-sm">
 								{toast.data?.loading ? (
 									<Spinner size={15} className="relative top-2px" />
@@ -127,7 +127,7 @@ function ToastList() {
 										className="relative top-2px"
 									/>
 								) : null}
-								<Toast.Description className="text-sm m-0" />
+								<Toast.Description className="m-0 text-sm" />
 							</div>
 						</div>
 						<Toast.Close
@@ -142,7 +142,7 @@ function ToastList() {
 					</div>
 				</div>
 				{toast.data?.actions && (
-					<div className="flex gap-xxs items-center ml-auto [[data-behind]:not([data-expanded])_&]:(opacity-0) transition-opacity">
+					<div className="ml-auto flex items-center gap-xxs transition-opacity [[data-behind]:not([data-expanded])_&]:(opacity-0)">
 						{toast.data.actions.toReversed().map((action, index: number) => (
 							<Toast.Action
 								key={index}

package/src/components/tooltip/Tooltip.tsx

@@ -56,16 +56,16 @@ function Content({
 					<TooltipPrimitive.Popup
 						render={render}
 						className={classNames(
-							'layer-components:(relative rounded-sm py-xs px-sm text-sm leading-tight shadow-sm select-none flex transition)',
+							'layer-components:(relative flex select-none rounded-sm px-sm py-xs text-sm leading-tight shadow-sm transition)',
 							'layer-components:data-[instant]:transition-none',
-							'layer-components:data-[starting-style]:(opacity-0 scale-95)',
-							'layer-components:data-[ending-style]:(opacity-0 scale-95)',
+							'layer-components:data-[starting-style]:(scale-95 opacity-0)',
+							'layer-components:data-[ending-style]:(scale-95 opacity-0)',
 							'layer-components:transform-origin-[var(--transform-origin)]',
 							{
-								'layer-variants:(bg-black color-white)': color === 'contrast',
-								'layer-variants:(bg-white color-black border border-gray)':
+								'layer-variants:(color-white bg-black)': color === 'contrast',
+								'layer-variants:(border color-black bg-white border-gray)':
 									color === 'white' || color === 'neutral',
-								'layer-variants:(bg-attention-ink color-white)':
+								'layer-variants:(color-white bg-attention-ink)':
 									color === 'attention',
 							},
 							className,

package/src/components/viewport/Viewport.tsx

@@ -117,7 +117,7 @@ export function ViewportRoot({
 				>
 					<div
 						className={clsx(
-							'w-full h-full flex-1 relative touch-none contain-strict select-none overflow-hidden',
+							'contain-strict relative h-full w-full flex-1 touch-none select-none overflow-hidden',
 							'focus-visible:(ring ring-accent)',
 							className,
 						)}
@@ -155,8 +155,8 @@ export function ViewportControlContent({
 			className={clsx(
 				'layer-variants:(absolute)',
 				{
-					'layer-components:(top-sm left-sm)': position === 'top-left',
-					'layer-components:(top-sm right-sm)': position === 'top-right',
+					'layer-components:(left-sm top-sm)': position === 'top-left',
+					'layer-components:(right-sm top-sm)': position === 'top-right',
 					'layer-components:(bottom-sm left-sm)': position === 'bottom-left',
 					'layer-components:(bottom-sm right-sm)': position === 'bottom-right',
 				},

package/src/components/viewport/ViewportContent.tsx

@@ -90,7 +90,7 @@ export function ViewportContent({
 		<motion.div
 			{...rest}
 			className={clsx(
-				'layer-components:(absolute overflow-visible overscroll-none touch-none transform-origin-center select-none)',
+				'layer-components:(absolute transform-origin-center touch-none select-none overflow-visible overscroll-none)',
 				className,
 			)}
 			ref={finalRef}

package/src/components/viewport/useViewportGestures.ts

@@ -245,7 +245,7 @@ export function useKeyboardControls(viewport: ViewportState) {
 		animationFrame = requestAnimationFrame(loop);
 
 		return () => {
-			animationFrame && cancelAnimationFrame(animationFrame);
+			if (animationFrame) cancelAnimationFrame(animationFrame);
 		};
 	}, [viewport]);
 

package/src/hooks/useStorage.ts

@@ -79,14 +79,14 @@ function makeUseStorage(
 }
 
 const mockStorage: Storage = {
-	getItem: (key: string) => {
+	getItem: () => {
 		return null;
 	},
-	setItem: (key: string, value: string) => {},
-	removeItem: (key: string) => {},
+	setItem: () => {},
+	removeItem: () => {},
 	length: 0,
 	clear: () => {},
-	key: (index: number) => {
+	key: () => {
 		return null;
 	},
 };

package/src/hooks/useTitleBarColor.stories.tsx

@@ -19,7 +19,7 @@ export const Default: Story = {
 	render() {
 		return (
 			<Provider>
-				<Box col border surface className="overflow-hidden aspect-[9/16]">
+				<Box col border surface className="aspect-[9/16] overflow-hidden">
 					<MockTitleBar />
 					<Box p="md">
 						<p>

package/src/hooks/useTitleBarColor.ts

@@ -27,7 +27,7 @@ function changeThemeColor(color: string) {
 		const cssVar = color.slice(4, -1).trim();
 		color = getComputedStyle(root).getPropertyValue(cssVar);
 	}
-	var metaThemeColor = document.querySelector('meta[name=theme-color]');
+	let metaThemeColor = document.querySelector('meta[name=theme-color]');
 	if (!metaThemeColor) {
 		metaThemeColor = document.createElement('meta');
 		metaThemeColor.setAttribute('name', 'theme-color');

package/src/hooks/withProps.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const withProps = <T extends {}>(
+export const withProps = <T extends object>(
 	Component: React.ComponentType<T>,
 	extras: Partial<T>,
 ) => {
@@ -12,7 +12,7 @@ export const withProps = <T extends {}>(
 type OptionalKeys<T> = {
 	[K in keyof T]-?: undefined extends T[K] ? K : never;
 }[keyof T];
-export const withoutProps = <T extends {}, P extends OptionalKeys<T>>(
+export const withoutProps = <T extends object, P extends OptionalKeys<T>>(
 	Component: React.ComponentType<T>,
 	_remove: P[],
 ) => {

package/src/systems/inputs.ts

@@ -0,0 +1,11 @@
+import { proxy } from 'valtio';
+
+export const inputInfo = proxy({
+	lastPointerDown: null as number | null,
+});
+
+if (typeof window !== 'undefined') {
+	window.addEventListener('pointerdown', () => {
+		inputInfo.lastPointerDown = Date.now();
+	});
+}

package/src/themes.stories.tsx

@@ -65,7 +65,7 @@ function DemoUI({ className }: { className?: string }) {
 	return (
 		<PageRoot className={clsx('flex-1', className)}>
 			<PageContent>
-				<div className={clsx('grid gap-2 grid-cols-2')}>
+				<div className={clsx('grid grid-cols-2 gap-2')}>
 					<Box gap wrap p>
 						<Button color="primary" emphasis="primary">
 							Primary

package/src/uno/logic/color.ts

@@ -281,18 +281,6 @@ function printComputationResult(result: ComputationResult): string {
 	return result.unit === '%' ? `${result.value}%` : `${result.value}`;
 }
 
-function resolveComputationResult(
-	result: ComputationResult,
-	outputRange: [number, number],
-): number {
-	if (result.unit === '%') {
-		const [min, max] = outputRange;
-		return min + (result.value / 100) * (max - min);
-	} else {
-		return result.value;
-	}
-}
-
 function evaluateLiteral(literal: string): ComputationResult {
 	if (literal.endsWith('%')) {
 		const asNumber = Number(literal.slice(0, -1));

package/src/uno/preflights/layers.ts

@@ -3,5 +3,5 @@ import { preflight } from './_util.js';
 
 export const layerPreflight: Preflight = preflight({
 	getCSS: () =>
-		`@layer preflightBase, preflightVariant, components, composed, responsive, variants, utilities, user;`,
+		`@layer preflightBase, preflightVariant, primitives, components, composed, composed-2, responsive, variants, utilities, user;`,
 });

package/src/uno/rules/color.ts

@@ -27,13 +27,13 @@ export const colorRules: Rule[] = [
 	],
 	[
 		/^color-lighten-(\d+\.?\d*)$/,
-		(match, { theme }) => ({
+		(match) => ({
 			'--v-color-altered': lighten('var(--v-color,currentColor)', match[1]),
 		}),
 	],
 	[
 		/^color-darken-(\d+\.?\d*)$/,
-		(match, { theme }) => ({
+		(match) => ({
 			'--v-color-altered': darken('var(--v-color,currentColor)', match[1]),
 		}),
 	],
@@ -75,13 +75,13 @@ export const colorRules: Rule[] = [
 	],
 	[
 		/^bg-lighten-(\d+\.?\d*)$/,
-		(match, { theme }) => ({
+		(match) => ({
 			'--v-bg-altered': lighten('var(--v-bg,var(--mode-white))', match[1]),
 		}),
 	],
 	[
 		/^bg-darken-(\d+\.?\d*)$/,
-		(match, { theme }) => ({
+		(match) => ({
 			'--v-bg-altered': darken('var(--v-bg,var(--mode-white))', match[1]),
 		}),
 	],
@@ -110,7 +110,7 @@ export const colorRules: Rule[] = [
 	],
 	[
 		/^border-lighten-(\d+\.?\d*)$/,
-		(match, { theme }) => ({
+		(match) => ({
 			'--v-border-altered': lighten('var(--v-border,currentColor)', match[1]),
 		}),
 		{
@@ -119,7 +119,7 @@ export const colorRules: Rule[] = [
 	],
 	[
 		/^border-darken-(\d+\.?\d*)$/,
-		(match, { theme }) => ({
+		(match) => ({
 			'--v-border-altered': darken('var(--v-border,currentColor)', match[1]),
 		}),
 		{
@@ -151,7 +151,7 @@ export const colorRules: Rule[] = [
 				],
 				[
 					new RegExp(`^border-${dir}-lighten-(\\d+\\.?\\d*)$`),
-					(match, { theme }) => ({
+					(match) => ({
 						[`--v-border-${dir}-altered`]: lighten(
 							`var(--v-border-${dir},currentColor)`,
 							match[1],
@@ -160,7 +160,7 @@ export const colorRules: Rule[] = [
 				],
 				[
 					new RegExp(`^border-${dir}-darken-(\\d+\\.?\\d*)$`),
-					(match, { theme }) => ({
+					(match) => ({
 						[`--v-border-${dir}-altered`]: darken(
 							`var(--v-border-${dir},currentColor)`,
 							match[1],
@@ -187,13 +187,13 @@ export const colorRules: Rule[] = [
 	],
 	[
 		/^ring-lighten-(\d+\.?\d*)$/,
-		(match, { theme }) => ({
+		(match) => ({
 			'--v-ring-altered': lighten('var(--v-ring,currentColor)', match[1]),
 		}),
 	],
 	[
 		/^ring-darken-(\d+\.?\d*)$/,
-		(match, { theme }) => ({
+		(match) => ({
 			'--v-ring-altered': darken('var(--v-ring,currentColor)', match[1]),
 		}),
 	],

package/src/utilities.stories.tsx

@@ -16,7 +16,7 @@ type Story = StoryObj;
 export const AnchorPosition: Story = {
 	render(args) {
 		return (
-			<div className="w-300px h-full overflow-auto anchor-container border">
+			<div className="h-full w-300px border anchor-container overflow-auto">
 				<P>
 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
 					eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
@@ -33,7 +33,7 @@ export const AnchorPosition: Story = {
 					color="primary"
 					surface
 					p
-					className="fixed anchor-to-demo left-[anchor(right)] top-[anchor(bottom)]"
+					className="fixed left-[anchor(right)] top-[anchor(bottom)] anchor-to-demo"
 				>
 					Anchored to button
 				</Box>
@@ -41,7 +41,7 @@ export const AnchorPosition: Story = {
 					color="accent"
 					surface
 					p
-					className="anchor-to-container fixed right-[anchor(right)] bottom-[anchor(bottom)]"
+					className="fixed bottom-[anchor(bottom)] right-[anchor(right)] anchor-to-container"
 				>
 					Anchored to the outer box
 				</Box>