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

package/src/components/dropdownMenu/DropdownMenu.tsx

@@ -1,190 +1,173 @@
-'use client';
-import {
-	Menu as BaseMenu,
-	MenuArrowProps,
-	MenuItemProps,
-	MenuPopupProps,
-	MenuPositionerProps,
-	MenuTriggerProps,
-} from '@base-ui/react/menu';
-import classNames, { clsx } from 'clsx';
-import { Ref } from 'react';
-import { withClassName } from '../../hooks/withClassName.js';
-import { GroupScaleReset } from '../../systems/GroupScale.js';
-import { PaletteName } from '../../uno/index.js';
-import { ArrowSvg } from '../utility/ArrowSvg.js';
-import { SlotDiv } from '../utility/SlotDiv.js';
-import { DropdownTriggerProvider } from './DropdownTriggerContext.js';
-
-const StyledContent = withClassName(
-	function DropdownMenuContent(props: MenuPopupProps) {
-		return (
-			<GroupScaleReset>
-				<BaseMenu.Popup {...props} />
-			</GroupScaleReset>
-		);
-	},
-	'layer-components:(min-w-220px bg-white z-menu shadow-lg rounded-md border border-black flex flex-col transition)',
-	'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:(max-h-[--available-height] max-w-[--available-width])',
-
-	'important:motion-reduce:animate-none',
-	'will-change-transform',
-);
-const itemClassName = classNames(
-	'layer-components:(text-md leading-4 color-main-ink flex items-center pr-4 pl-8 py-sm min-h-touch-large relative text-left select-none cursor-pointer)',
-	'layer-components:[&[data-disabled]]:(color-gray-dark bg-white pointer-events-none)',
-	'layer-components:focus-visible:(bg-main-light color-black)',
-	'layer-components:hover:(bg-main-light color-black)',
-	'layer-components:focus:outline-none',
-);
-const StyledItemBase = withClassName(BaseMenu.Item, itemClassName);
-export interface DropdownMenuItemProps extends MenuItemProps {
-	color?: PaletteName;
-	ref?: Ref<HTMLDivElement>;
-}
-const StyledItem = ({
-	ref: forwardedRef,
-	className,
-	color = 'gray',
-	...props
-}: DropdownMenuItemProps) => {
-	return (
-		<StyledItemBase
-			{...props}
-			className={clsx(color && `palette-${color}`, className)}
-			ref={forwardedRef}
-		/>
-	);
-};
-const StyledCheckboxItem = withClassName(BaseMenu.CheckboxItem, itemClassName);
-const StyledRadioItem = withClassName(BaseMenu.RadioItem, itemClassName);
-
-const StyledLabel = withClassName(
-	'span',
-	'layer-components:(pl-3 py-1 font-bold text-sm leading-6)',
-);
-
-const StyledSeparator = withClassName(
-	BaseMenu.Separator,
-	'layer-components:(h-1px bg-gray m-5px)',
-);
-
-const StyledItemIndicator = withClassName(
-	BaseMenu.CheckboxItemIndicator,
-	'layer-components:(absolute left-0 w-25px inline-flex items-center justify-center)',
-);
-
-const StyledArrow = withClassName(
-	(props: MenuArrowProps) => (
-		<BaseMenu.Arrow {...props}>
-			<ArrowSvg />
-		</BaseMenu.Arrow>
-	),
-	'layer-components:(arrow)',
-	'layer-components:data-[closed]:(opacity-0 scale-0)',
-	'layer-components:data-[open]:(opacity-100 scale-100)',
-);
-
-const StyledTrigger = withClassName(BaseMenu.Trigger, 'select-none');
-
-const StyledPortal = BaseMenu.Portal;
-
-// Exports
-export const DropdownMenuRoot = BaseMenu.Root;
-export const DropdownMenuItem = StyledItem;
-export const DropdownMenuCheckboxItem = StyledCheckboxItem;
-export const DropdownMenuRadioGroup = BaseMenu.RadioGroup;
-export const DropdownMenuRadioItem = StyledRadioItem;
-export const DropdownMenuItemIndicator = StyledItemIndicator;
-export const DropdownMenuLabel = StyledLabel;
-export const DropdownMenuSeparator = StyledSeparator;
-export const DropdownMenuArrow = StyledArrow;
-
-export function DropdownMenuTrigger({ ...props }: MenuTriggerProps) {
-	return (
-		<DropdownTriggerProvider>
-			<StyledTrigger {...props} />
-		</DropdownTriggerProvider>
-	);
-}
-export const DropdownMenuTriggerIcon = withClassName(
-	SlotDiv,
-	'layer-components:[[data-popup-open]>&]:rotate-180 layer-components:transition-transform',
-);
-
-export const DropdownMenuContent = ({
-	children,
-	forceMount,
-	keepMounted,
-	side,
-	sideOffset = 8,
-	align,
-	alignOffset,
-	anchor,
-	arrowPadding = 2,
-	collisionAvoidance,
-	collisionBoundary,
-	collisionPadding,
-	sticky,
-	positionMethod,
-	...props
-}: MenuPopupProps &
-	MenuPositionerProps & {
-		/** @deprecated - use keepMounted */
-		forceMount?: boolean;
-		keepMounted?: boolean;
-	}) => {
-	return (
-		<StyledPortal keepMounted={keepMounted ?? forceMount}>
-			<BaseMenu.Positioner
-				sideOffset={sideOffset}
-				side={side}
-				align={align}
-				alignOffset={alignOffset}
-				anchor={anchor}
-				arrowPadding={arrowPadding}
-				collisionAvoidance={collisionAvoidance}
-				collisionBoundary={collisionBoundary}
-				collisionPadding={collisionPadding}
-				sticky={sticky}
-				positionMethod={positionMethod}
-			>
-				<StyledContent {...props}>
-					<div className="layer-components:(overflow-y-auto overflow-x-hidden overflow-unstable max-h-full rounded-md min-h-0)">
-						{children}
-					</div>
-					<StyledArrow />
-				</StyledContent>
-			</BaseMenu.Positioner>
-		</StyledPortal>
-	);
-};
-
-export const DropdownMenuItemRightSlot = withClassName('div', 'ml-auto pl-md');
-
-export const DropdownMenu = Object.assign(DropdownMenuRoot, {
-	Content: DropdownMenuContent,
-	Trigger: DropdownMenuTrigger,
-	Item: StyledItem,
-	CheckboxItem: StyledCheckboxItem,
-	RadioGroup: BaseMenu.RadioGroup,
-	RadioItem: StyledRadioItem,
-	ItemIndicator: StyledItemIndicator,
-	Label: StyledLabel,
-	Separator: StyledSeparator,
-	Arrow: StyledArrow,
-	ItemRightSlot: DropdownMenuItemRightSlot,
-	TriggerIcon: DropdownMenuTriggerIcon,
-	createHandle: BaseMenu.createHandle,
-});
+'use client';
+import {
+	Menu as BaseMenu,
+	MenuArrowProps,
+	MenuItemProps,
+	MenuPopupProps,
+	MenuPositionerProps,
+	MenuTriggerProps,
+} from '@base-ui/react/menu';
+import { clsx } from 'clsx';
+import { Ref } from 'react';
+import { withClassName } from '../../hooks/withClassName.js';
+import { GroupScaleReset } from '../../systems/GroupScale.js';
+import { PaletteName } from '../../uno/index.js';
+import {
+	itemClassName,
+	itemListClassName,
+	popupClassName,
+} from '../primitives/menus.js';
+import { ArrowSvg } from '../utility/ArrowSvg.js';
+import { SlotDiv } from '../utility/SlotDiv.js';
+import { DropdownTriggerProvider } from './DropdownTriggerContext.js';
+
+const StyledContent = withClassName(
+	function DropdownMenuContent(props: MenuPopupProps) {
+		return (
+			<GroupScaleReset>
+				<BaseMenu.Popup {...props} />
+			</GroupScaleReset>
+		);
+	},
+	popupClassName,
+	'layer-components:(min-w-220px)',
+);
+
+const StyledItemBase = withClassName(BaseMenu.Item, itemClassName);
+export interface DropdownMenuItemProps extends MenuItemProps {
+	color?: PaletteName;
+	ref?: Ref<HTMLDivElement>;
+}
+const StyledItem = ({
+	ref: forwardedRef,
+	className,
+	color = 'gray',
+	...props
+}: DropdownMenuItemProps) => {
+	return (
+		<StyledItemBase
+			{...props}
+			className={clsx(color && `palette-${color}`, className)}
+			ref={forwardedRef}
+		/>
+	);
+};
+const StyledCheckboxItem = withClassName(BaseMenu.CheckboxItem, itemClassName);
+const StyledRadioItem = withClassName(BaseMenu.RadioItem, itemClassName);
+
+const StyledLabel = withClassName(
+	'span',
+	'layer-components:(py-1 pl-3 text-sm font-bold leading-6)',
+);
+
+const StyledSeparator = withClassName(
+	BaseMenu.Separator,
+	'layer-components:(m-5px h-1px bg-gray)',
+);
+
+const StyledItemIndicator = withClassName(
+	BaseMenu.CheckboxItemIndicator,
+	'layer-components:(absolute left-0 w-25px inline-flex items-center justify-center)',
+);
+
+const StyledArrow = withClassName(
+	(props: MenuArrowProps) => (
+		<BaseMenu.Arrow {...props}>
+			<ArrowSvg />
+		</BaseMenu.Arrow>
+	),
+	'layer-components:(arrow)',
+	'layer-components:data-[closed]:(scale-0 opacity-0)',
+	'layer-components:data-[open]:(scale-100 opacity-100)',
+);
+
+const StyledTrigger = withClassName(BaseMenu.Trigger, 'select-none');
+
+const StyledPortal = BaseMenu.Portal;
+
+// Exports
+export const DropdownMenuRoot = BaseMenu.Root;
+export const DropdownMenuItem = StyledItem;
+export const DropdownMenuCheckboxItem = StyledCheckboxItem;
+export const DropdownMenuRadioGroup = BaseMenu.RadioGroup;
+export const DropdownMenuRadioItem = StyledRadioItem;
+export const DropdownMenuItemIndicator = StyledItemIndicator;
+export const DropdownMenuLabel = StyledLabel;
+export const DropdownMenuSeparator = StyledSeparator;
+export const DropdownMenuArrow = StyledArrow;
+
+export function DropdownMenuTrigger({ ...props }: MenuTriggerProps) {
+	return (
+		<DropdownTriggerProvider>
+			<StyledTrigger {...props} />
+		</DropdownTriggerProvider>
+	);
+}
+export const DropdownMenuTriggerIcon = withClassName(
+	SlotDiv,
+	'layer-components:transition-transform layer-components:[[data-popup-open]>&]:rotate-180',
+);
+
+export const DropdownMenuContent = ({
+	children,
+	forceMount,
+	keepMounted,
+	side,
+	sideOffset = 8,
+	align,
+	alignOffset,
+	anchor,
+	arrowPadding = 2,
+	collisionAvoidance,
+	collisionBoundary,
+	collisionPadding,
+	sticky,
+	positionMethod,
+	...props
+}: MenuPopupProps &
+	MenuPositionerProps & {
+		/** @deprecated - use keepMounted */
+		forceMount?: boolean;
+		keepMounted?: boolean;
+	}) => {
+	return (
+		<StyledPortal keepMounted={keepMounted ?? forceMount}>
+			<BaseMenu.Positioner
+				sideOffset={sideOffset}
+				side={side}
+				align={align}
+				alignOffset={alignOffset}
+				anchor={anchor}
+				arrowPadding={arrowPadding}
+				collisionAvoidance={collisionAvoidance}
+				collisionBoundary={collisionBoundary}
+				collisionPadding={collisionPadding}
+				sticky={sticky}
+				positionMethod={positionMethod}
+			>
+				<StyledContent {...props}>
+					<div className={itemListClassName}>{children}</div>
+					<StyledArrow />
+				</StyledContent>
+			</BaseMenu.Positioner>
+		</StyledPortal>
+	);
+};
+
+export const DropdownMenuItemRightSlot = withClassName('div', 'ml-auto pl-md');
+
+export const DropdownMenu = Object.assign(DropdownMenuRoot, {
+	Content: DropdownMenuContent,
+	Trigger: DropdownMenuTrigger,
+	Item: StyledItem,
+	CheckboxItem: StyledCheckboxItem,
+	RadioGroup: BaseMenu.RadioGroup,
+	RadioItem: StyledRadioItem,
+	ItemIndicator: StyledItemIndicator,
+	Label: StyledLabel,
+	Separator: StyledSeparator,
+	Arrow: StyledArrow,
+	ItemRightSlot: DropdownMenuItemRightSlot,
+	TriggerIcon: DropdownMenuTriggerIcon,
+	createHandle: BaseMenu.createHandle,
+});

package/src/components/editableText/EditableText.tsx

@@ -102,9 +102,9 @@ export function EditableText({
 			onClick={() => setEditingFinal(true)}
 			className={clsx(
 				inputClassName,
-				'layer-variants:(border-transparent bg-transparent w-auto inline-flex items-center gap-2 font-size-inherit color-inherit shadow-none text-left)',
+				'layer-variants:(w-auto inline-flex items-center gap-2 text-left font-size-inherit shadow-none color-inherit bg-transparent border-transparent)',
 				'layer-variants:hover:(bg-main-light/80)',
-				'layer-variants:focus-visible:(outline-none bg-main-light/80 ring-2 ring-accent)',
+				'layer-variants:focus-visible:(outline-none ring-2 bg-main-light/80 ring-accent)',
 				'cursor-pointer',
 				className,
 			)}

package/src/components/emojiPicker/EmojiPicker.tsx

@@ -29,7 +29,12 @@ export const EmojiPickerViewport = ({
 	className,
 	...props
 }: EmojiPickerViewportProps) => (
-	<Box className="flex-1 min-h-0 overflow-hidden rounded-md bg-white">
+	<Box
+		className={clsx(
+			'layer-components:(min-h-0 flex-1 overflow-hidden rounded-md bg-white)',
+			className,
+		)}
+	>
 		<Core.Viewport
 			className="layer-components:(relative outline-hidden)"
 			{...props}
@@ -54,7 +59,7 @@ export const EmojiPickerCategoryHeader = (
 ) => (
 	<div
 		className={clsx(
-			'layer-components:(bg-inherit px-md py-sm text-xs font-semibold color-gray-dark sticky top-0)',
+			'layer-components:(sticky top-0 px-md py-sm text-xs font-semibold color-gray-dark bg-inherit)',
 			props.className,
 		)}
 	>
@@ -74,7 +79,7 @@ export const EmojiPickerEmoji = withClassName(
 			toggleMode="color"
 			size="small"
 			aria-label={p.emoji.label}
-			className="text-lg p-xs"
+			className="p-xs text-lg"
 		>
 			<Button.Icon>{p.emoji.emoji}</Button.Icon>
 		</Button>
@@ -125,7 +130,7 @@ export const EmojiPickerSkinToneSelector = (props: BoxProps) => {
 					toggleMode="color"
 					size="small"
 					aria-label={`Skin tone ${option}`}
-					className="text-md p-xs"
+					className="p-xs text-md"
 					onClick={() => setSkinTone(option.skinTone)}
 				>
 					<Button.Icon>{option.emoji}</Button.Icon>

package/src/components/forms/CheckboxField.tsx

@@ -20,7 +20,7 @@ export function CheckboxField({
 	id: providedId,
 	...rest
 }: CheckboxFieldProps) {
-	const [props, _, tools] = useField({ name, type: 'checkbox' });
+	const [props, _, tools] = useField({ name, required, type: 'checkbox' });
 	const id = useIdOrGenerated(providedId);
 	return (
 		<Box gap="sm" className={className}>

package/src/components/forms/EmojiField.tsx

@@ -39,7 +39,7 @@ export function EmojiField({
 							className={clsx('p-0 transition-color', className)}
 							{...rest}
 						>
-							<Button.Icon className="text-[19px] w-touch h-touch flex items-center justify-center">
+							<Button.Icon className="h-touch w-touch flex items-center justify-center text-[19px]">
 								{props.value || <Icon name="smile" />}
 							</Button.Icon>
 						</Button>

package/src/components/forms/FormikForm.stories.tsx

@@ -27,7 +27,7 @@ export const Default: Story = {
 			alert(JSON.stringify(values, null, 2));
 		},
 	},
-	render({ initialValues, ...args }) {
+	render({ initialValues: _, ...args }) {
 		return (
 			<FormikForm
 				initialValues={{

package/src/components/forms/NumberStepperField.tsx

@@ -11,7 +11,6 @@ export interface NumberStepperFieldProps
 	extends Omit<NumberStepperProps, 'value' | 'onChange'> {
 	name: string;
 	label?: string;
-	required?: boolean;
 	className?: string;
 	id?: string;
 	onChange?: (value: number) => void;
@@ -21,7 +20,6 @@ export function NumberStepperField({
 	name,
 	label,
 	className,
-	required,
 	id: providedId,
 	onChange,
 	...rest

package/src/components/forms/SwitchField.tsx

@@ -20,7 +20,7 @@ export function SwitchField({
 	id: providedId,
 	...rest
 }: SwitchFieldProps) {
-	const [props, _, tools] = useField({ name, type: 'checkbox' });
+	const [props, _, tools] = useField({ name, required, type: 'checkbox' });
 	const id = useIdOrGenerated(providedId);
 	return (
 		<Box gap="sm" className={className}>

package/src/components/forms/ToggleGroupField.tsx

@@ -21,7 +21,7 @@ function ToggleGroupFieldDefault({
 	id,
 	...props
 }: ToggleGroupFieldProps) {
-	const [fieldProps, _, tools] = useField({ name, ...props });
+	const [fieldProps, _, tools] = useField({ name, required, ...props });
 
 	return (
 		<FieldRoot>

package/src/components/horizontalList/HorizontalList.stories.tsx

@@ -37,7 +37,7 @@ const meta = {
 				<Button size="small">Twenty four</Button>
 				<Button
 					color="primary"
-					className="sticky right-2 bottom-2 flex-shrink-0 shadow-sm ml-auto"
+					className="sticky bottom-2 right-2 ml-auto flex-shrink-0 shadow-sm"
 				>
 					<Icon name="plus" />
 				</Button>
@@ -57,17 +57,17 @@ export const Default: Story = {
 	render: (args) => {
 		const [open, setOpen] = useState(false);
 		return (
-			<div className="bg-black flex flex-col items-center h-full min-h-80vh">
-				<div className="bg-white w-400px flex flex-col items-stretch flex-1">
+			<div className="h-full min-h-80vh flex flex-col items-center bg-black">
+				<div className="w-400px flex flex-1 flex-col items-stretch bg-white">
 					<Button
 						toggled={open}
 						onClick={() => setOpen(!open)}
-						className="mt-auto mb-1 mr-1 self-end"
+						className="mb-1 mr-1 mt-auto self-end"
 					>
 						{open ? 'Close' : 'Open'}
 					</Button>
 					<HorizontalList
-						className="border-t border-t-solid border-t-black max-h-200px"
+						className="max-h-200px border-t border-t-solid border-t-black"
 						openDirection="up"
 						{...args}
 						open={open}
@@ -83,9 +83,9 @@ export const CantOpen: Story = {
 	render: (args) => {
 		const [more, setMore] = useState(false);
 		return (
-			<div className="bg-white w-full flex flex-col items-stretch h-full justify-end">
+			<div className="h-full w-full flex flex-col items-stretch justify-end bg-white">
 				<HorizontalList
-					className="border-t border-t-solid border-t-black max-h-200px"
+					className="max-h-200px border-t border-t-solid border-t-black"
 					openDirection="up"
 					{...args}
 				>
@@ -113,7 +113,7 @@ export const CantOpen: Story = {
 					)}
 					<Button
 						color="primary"
-						className="sticky right-2 bottom-2 flex-shrink-0 shadow-sm ml-auto"
+						className="sticky bottom-2 right-2 ml-auto flex-shrink-0 shadow-sm"
 					>
 						<Icon name="plus" />
 					</Button>

package/src/components/horizontalList/HorizontalList.tsx

@@ -139,7 +139,7 @@ export function HorizontalList({
 	return (
 		<ScrollArea.Root
 			className={clsx(
-				'layer-components:(flex flex-col w-full)',
+				'layer-components:(w-full flex flex-col)',
 				'layer-components:max-h-300px',
 				className,
 			)}
@@ -149,8 +149,8 @@ export function HorizontalList({
 			<ScrollArea.Viewport ref={containerRef}>
 				<ScrollArea.Content
 					className={clsx(
-						'layer-components:(px-3 pt-3 pb-4 gap-2)',
-						'flex flex-row items-center gap-2 flex-shrink-0 w-max-content w-auto)',
+						'layer-components:(gap-2 px-3 pb-4 pt-3)',
+						'w-auto) w-max-content flex flex-shrink-0 flex-row items-center gap-2',
 						contentClassName,
 					)}
 					ref={contentRef}
@@ -163,9 +163,9 @@ export function HorizontalList({
 							onClick={toggleOpen}
 							emphasis="ghost"
 							className={clsx(
-								'layer-variants:(flex-shrink-0 sticky left-0 top-2 z-1)',
+								'layer-variants:(sticky left-0 top-2 z-1 flex-shrink-0)',
 								!open &&
-									'layer-variants:(rounded-none h-full border-r border-r-solid border-r-gray)',
+									'layer-variants:(h-full border-r rounded-none border-r-solid border-r-gray)',
 							)}
 						>
 							<Icon

package/src/components/icon/Icon.stories.tsx

@@ -35,10 +35,10 @@ export const All: Story = {
 				{iconNames.map((name) => (
 					<div
 						key={name}
-						className="flex flex-col items-center justify-center p-4 border border-gray-light gap-2"
+						className="flex flex-col items-center justify-center gap-2 border p-4 border-gray-light"
 					>
 						<Icon name={name} size={25} />
-						<span className="text-sm text-center">{name}</span>
+						<span className="text-center text-sm">{name}</span>
 					</div>
 				))}
 			</div>

package/src/components/imageUploader/ImageUploader.stories.tsx

@@ -34,7 +34,7 @@ function ImageUploaderDemo() {
 				file ? setValue(URL.createObjectURL(file)) : setValue(null)
 			}
 			value={value}
-			className="w-64 h-64"
+			className="h-64 w-64"
 		/>
 	);
 }

package/src/components/imageUploader/ImageUploader.tsx

@@ -146,7 +146,7 @@ export function ImageUploaderRoot({
 					accept="image/*"
 					onChange={onFileChange}
 					onClick={onFileClick}
-					className="absolute inset-0 pointer-events-none op-0"
+					className="pointer-events-none absolute inset-0 op-0"
 					id={inputId}
 				/>
 				{children}
@@ -193,7 +193,7 @@ function ImageUploaderPrebuilt({
 			</ImageUploaderEmptyControls>
 			{!props.value && cameraOpen && (
 				<CameraRoot
-					className="absolute w-full h-full z-1"
+					className="absolute z-1 h-full w-full"
 					format="image/png"
 					onCapture={(file) => {
 						props.onChange(file);
@@ -208,7 +208,7 @@ function ImageUploaderPrebuilt({
 						onClick={() => setCameraOpen(false)}
 						emphasis="ghost"
 						size="small"
-						className="color-white absolute top-2 left-2"
+						className="absolute left-2 top-2 color-white"
 					>
 						Cancel
 					</Button>
@@ -268,7 +268,7 @@ export function ImageUploaderRemoveButton({ className, ...rest }: ButtonProps) {
 		<Button
 			emphasis="ghost"
 			className={clsx(
-				'layer-variants:(absolute top-2 right-2 w-32px h-32px border-none p-2 cursor-pointer bg-white color-black rounded-lg transition-colors shadow-sm z-10)',
+				'layer-variants:(absolute right-2 top-2 z-10 h-32px w-32px cursor-pointer rounded-lg border-none p-2 shadow-sm transition-colors color-black bg-white)',
 				className,
 			)}
 			onClick={() => onChange(null)}
@@ -288,7 +288,7 @@ export function ImageUploaderDisplay({
 		<img
 			src={value}
 			className={clsx(
-				'layer-components:(w-full h-full object-cover object-center rounded-lg)',
+				'layer-components:(h-full w-full rounded-lg object-cover object-center)',
 				className,
 			)}
 			{...rest}
@@ -310,7 +310,7 @@ export function ImageUploaderEmptyControls({
 	return (
 		<div
 			className={classNames(
-				'layer-components:(absolute bg-gray-light inset-0 flex flex-col items-center justify-center gap-3 rounded-lg)',
+				'layer-components:(absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-lg bg-gray-light)',
 				{
 					'layer-components:bg-darken-2': draggingOver,
 				},