@a-type/ui 1.3.0 → 1.3.2

package/src/components/navBar/NavBar.tsx

@@ -1,96 +1,105 @@
-import { Slot } from '@radix-ui/react-slot';
-import classNames, { clsx } from 'clsx';
-import { ReactNode, forwardRef } from 'react';
-import { withClassName } from '../../hooks.js';
-import { Icon, IconProps } from '../icon/index.js';
-
-export const navBarItemClass = classNames(
-	'layer-components:(flex flex-col items-center justify-center whitespace-nowrap py-1 px-3 bg-transparent rounded-md border-none cursor-pointer text-sm transition-colors h-full gap-6px relative text-gray-7 select-none)',
-	'layer-components:sm:(flex-row-reverse h-auto justify-start gap-2 overflow-visible)',
-	'layer-components:hover:bg-primary-wash',
-	'layer-components:focus-visible:(outline-none bg-primary-wash)',
-	'layer-components:active:bg-primary-wash layer-components:sm:active:bg-gray-dark-blend',
-	'layer-components:[&[data-active=true]]:(bg-primary-wash text-black)',
-);
-
-export interface NavBarItemProps {
-	asChild?: boolean;
-	className?: string;
-	children?: ReactNode;
-	active?: boolean;
-}
-
-export const NavBarItem = forwardRef<HTMLDivElement, NavBarItemProps>(
-	function NavBarItem({ asChild, className, active, ...rest }, ref) {
-		const Comp = asChild ? Slot : 'div';
-
-		return (
-			<Comp
-				ref={ref}
-				className={classNames(navBarItemClass, className)}
-				data-active={active}
-				{...rest}
-			/>
-		);
-	},
-);
-
-export const NavBarItemIconWrapper = withClassName(
-	'div',
-	'layer-components:(relative flex) layer-components:sm:(p-6px rounded-full bg-gray-blend)',
-	'layer-variants:sm:[*[data-active=true]_&]:bg-primary-light',
-);
-
-export const NavBarItemText = withClassName(
-	'span',
-	'layer-components:(overflow-hidden pl-1 inline-block text-xxs whitespace-nowrap text-ellipsis) layer-components:sm:(text-md leading-normal)',
-);
-
-interface NavBarItemIconProps {
-	asChild?: boolean;
-	name?: IconProps['name'];
-	className?: string;
-	children?: ReactNode;
-}
-export const NavBarItemIcon = forwardRef<any, NavBarItemIconProps>(
-	function NavBarItemIcon(
-		{ children, asChild, className, name = 'placeholder', ...rest },
-		ref,
-	) {
-		const Comp = asChild ? Slot : Icon;
-		return (
-			<Comp
-				name={name}
-				className={clsx(
-					'layer-components:(relative z-1 flex fill-none text-inherit)',
-					'layer-variants:[*[data-active=true]_&]:fill-primary-light',
-					className,
-				)}
-				{...rest}
-				ref={ref}
-			>
-				{children}
-			</Comp>
-		);
-	},
-);
-
-export const NavBarItemPip = withClassName(
-	'div',
-	'layer-components:(absolute top-6px right-6px w-6px h-6px rounded-full bg-attention shadow-sm)',
-);
-
-export const NavBarRoot = withClassName(
-	'div',
-	'layer-components:(grid [grid-auto-columns:1fr] [grid-auto-flow:column] justify-items-center w-full rounded-0 overflow-hidden z-50 p-1 h-auto)',
-	'pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))]',
-	'layer-components:sm:(bg-transparent flex flex-col rounded-0 border-none border-transparent shadow-none h-min-content overflow-y-auto overflow-x-hidden justify-start items-stretch gap-2 pb-10)',
-);
-
-export const NavBar = Object.assign(NavBarRoot, {
-	Item: NavBarItem,
-	ItemIcon: NavBarItemIcon,
-	ItemText: NavBarItemText,
-	ItemIconWrapper: NavBarItemIconWrapper,
-	ItemPip: NavBarItemPip,
-});
+import { Slot } from '@radix-ui/react-slot';
+import classNames, { clsx } from 'clsx';
+import { ReactNode, Ref } from 'react';
+import { withClassName } from '../../hooks.js';
+import { Icon, IconProps } from '../icon/index.js';
+
+export const navBarItemClass = classNames(
+	'layer-components:(flex flex-col items-center justify-center whitespace-nowrap py-1 px-3 bg-transparent rounded-md border-none cursor-pointer text-sm transition-colors h-full gap-6px relative text-gray-7 select-none)',
+	'layer-components:sm:(flex-row-reverse h-auto justify-start gap-2 overflow-visible)',
+	'layer-components:hover:bg-primary-wash',
+	'layer-components:focus-visible:(outline-none bg-primary-wash)',
+	'layer-components:active:bg-primary-wash layer-components:sm:active:bg-gray-dark-blend',
+	'layer-components:[&[data-active=true]]:(bg-primary-wash text-black)',
+);
+
+export interface NavBarItemProps {
+	asChild?: boolean;
+	className?: string;
+	children?: ReactNode;
+	active?: boolean;
+}
+
+export const NavBarItem = function NavBarItem({
+	ref,
+	asChild,
+	className,
+	active,
+	...rest
+}: NavBarItemProps & {
+	ref?: React.Ref<HTMLDivElement>;
+}) {
+	const Comp = asChild ? Slot : 'div';
+
+	return (
+		<Comp
+			ref={ref}
+			className={classNames(navBarItemClass, className)}
+			data-active={active}
+			{...rest}
+		/>
+	);
+};
+
+export const NavBarItemIconWrapper = withClassName(
+	'div',
+	'layer-components:(relative flex) layer-components:sm:(p-6px rounded-full bg-gray-blend)',
+	'layer-variants:sm:[*[data-active=true]_&]:bg-primary-light',
+);
+
+export const NavBarItemText = withClassName(
+	'span',
+	'layer-components:(overflow-hidden pl-1 inline-block text-xxs whitespace-nowrap text-ellipsis) layer-components:sm:(text-md leading-normal)',
+);
+
+interface NavBarItemIconProps {
+	asChild?: boolean;
+	name?: IconProps['name'];
+	className?: string;
+	children?: ReactNode;
+	ref?: Ref<any>;
+}
+export const NavBarItemIcon = function NavBarItemIcon({
+	ref,
+	children,
+	asChild,
+	className,
+	name = 'placeholder',
+	...rest
+}: NavBarItemIconProps) {
+	const Comp = asChild ? Slot : Icon;
+	return (
+		<Comp
+			name={name}
+			className={clsx(
+				'layer-components:(relative z-1 flex fill-none text-inherit)',
+				'layer-variants:[*[data-active=true]_&]:fill-primary-light',
+				className,
+			)}
+			{...rest}
+			ref={ref}
+		>
+			{children}
+		</Comp>
+	);
+};
+
+export const NavBarItemPip = withClassName(
+	'div',
+	'layer-components:(absolute top-6px right-6px w-6px h-6px rounded-full bg-attention shadow-sm)',
+);
+
+export const NavBarRoot = withClassName(
+	'div',
+	'layer-components:(grid [grid-auto-columns:1fr] [grid-auto-flow:column] justify-items-center w-full rounded-0 overflow-hidden z-50 p-1 h-auto)',
+	'pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))]',
+	'layer-components:sm:(bg-transparent flex flex-col rounded-0 border-none border-transparent shadow-none h-min-content overflow-y-auto overflow-x-hidden justify-start items-stretch gap-2 pb-10)',
+);
+
+export const NavBar = Object.assign(NavBarRoot, {
+	Item: NavBarItem,
+	ItemIcon: NavBarItemIcon,
+	ItemText: NavBarItemText,
+	ItemIconWrapper: NavBarItemIconWrapper,
+	ItemPip: NavBarItemPip,
+});

package/src/components/popover/Popover.tsx

@@ -1,87 +1,84 @@
-'use client';
-
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-import { ComponentPropsWithoutRef, forwardRef } from 'react';
-
-import { withClassName } from '../../hooks/withClassName.js';
-import classNames from 'clsx';
-
-const StyledContent = withClassName(
-	PopoverPrimitive.Content,
-	'layer-components:(rounded-xl min-w-120px bg-white z-menu shadow-lg border-default op-0 hidden max-w-90vw)',
-	'will-change-transform',
-	'layer-components:transform-origin-[var(--radix-popover-transform-origin)]',
-	'layer-components:[&[data-state=open]]:animate-popover-in',
-	'layer-components:[&[data-state=closed]]:animate-popover-out',
-	'important:motion-reduce:animate-none',
-	'layer-components:(max-h-[var(--radix-popover-content-available-height)])',
-	'layer-components:[&[data-state=open]]:(opacity-100 flex flex-col)',
-	'layer-components:[&[data-state=closed]]:pointer-events-none',
-);
-
-const StyledArrow = withClassName(
-	PopoverPrimitive.Arrow,
-	'layer-components:(fill-white stroke-black)',
-);
-
-const StyledClose = withClassName(
-	PopoverPrimitive.Close,
-	'layer-components:([all:unset] [font-family:inherit] rounded-full h-25px w-25px inline-flex items-center justify-center color-dark-blend absolute top-5px right-5px hover:bg-light-blend focus:shadow-focus)',
-);
-
-// Exports
-export const PopoverRoot = PopoverPrimitive.Root;
-export const PopoverTrigger = PopoverPrimitive.Trigger;
-export const PopoverArrow = StyledArrow;
-export const PopoverClose = StyledClose;
-export const PopoverAnchor = PopoverPrimitive.Anchor;
-
-export const PopoverContent = forwardRef<
-	HTMLDivElement,
-	ComponentPropsWithoutRef<typeof StyledContent> & {
-		disableBlur?: boolean;
-		padding?: 'none' | 'default';
-		radius?: 'none' | 'default' | 'md';
-	}
->(function PopoverContent(
-	{
-		children,
-		forceMount,
-		disableBlur,
-		className,
-		radius = 'default',
-		padding = 'default',
-		...props
-	},
-	ref,
-) {
-	return (
-		<PopoverPrimitive.Portal forceMount={forceMount}>
-			<StyledContent
-				{...props}
-				forceMount={forceMount}
-				ref={ref}
-				className={classNames(
-					{
-						'layer-variants:important:p-0': padding === 'none',
-						'layer-variants:p-5': padding === 'default',
-						'layer-variants:rounded-none': radius === 'none',
-						'layer-variants:rounded-lg': radius === 'default',
-						'layer-variants:rounded-md': radius === 'md',
-					},
-					className,
-				)}
-			>
-				{children}
-			</StyledContent>
-		</PopoverPrimitive.Portal>
-	);
-});
-
-export const Popover = Object.assign(PopoverRoot, {
-	Content: PopoverContent,
-	Arrow: PopoverArrow,
-	Close: PopoverClose,
-	Trigger: PopoverTrigger,
-	Anchor: PopoverAnchor,
-});
+'use client';
+
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import classNames from 'clsx';
+import { Ref } from 'react';
+import { withClassName } from '../../hooks/withClassName.js';
+
+const StyledContent = withClassName(
+	PopoverPrimitive.Content,
+	'layer-components:(rounded-xl min-w-120px bg-white z-menu shadow-lg border-default op-0 hidden max-w-90vw)',
+	'will-change-transform',
+	'layer-components:transform-origin-[var(--radix-popover-transform-origin)]',
+	'layer-components:[&[data-state=open]]:animate-popover-in',
+	'layer-components:[&[data-state=closed]]:animate-popover-out',
+	'important:motion-reduce:animate-none',
+	'layer-components:(max-h-[var(--radix-popover-content-available-height)])',
+	'layer-components:[&[data-state=open]]:(opacity-100 flex flex-col)',
+	'layer-components:[&[data-state=closed]]:pointer-events-none',
+);
+
+const StyledArrow = withClassName(
+	PopoverPrimitive.Arrow,
+	'layer-components:(fill-white stroke-black)',
+);
+
+const StyledClose = withClassName(
+	PopoverPrimitive.Close,
+	'layer-components:([all:unset] [font-family:inherit] rounded-full h-25px w-25px inline-flex items-center justify-center color-dark-blend absolute top-5px right-5px hover:bg-light-blend focus:shadow-focus)',
+);
+
+// Exports
+export const PopoverRoot = PopoverPrimitive.Root;
+export const PopoverTrigger = PopoverPrimitive.Trigger;
+export const PopoverArrow = StyledArrow;
+export const PopoverClose = StyledClose;
+export const PopoverAnchor = PopoverPrimitive.Anchor;
+
+export const PopoverContent = function PopoverContent({
+	ref,
+	children,
+	forceMount,
+	disableBlur,
+	className,
+	radius = 'default',
+	padding = 'default',
+	...props
+}: PopoverPrimitive.PopoverContentProps & {
+	radius?: 'none' | 'default' | 'md';
+	padding?: 'none' | 'default';
+	forceMount?: boolean;
+	disableBlur?: boolean;
+	ref?: Ref<HTMLDivElement>;
+}) {
+	return (
+		<PopoverPrimitive.Portal forceMount={forceMount}>
+			<StyledContent
+				{...props}
+				forceMount={forceMount}
+				ref={ref}
+				className={classNames(
+					{
+						'layer-variants:important:p-0': padding === 'none',
+						'layer-variants:p-5': padding === 'default',
+						'layer-variants:rounded-none': radius === 'none',
+						'layer-variants:rounded-lg': radius === 'default',
+						'layer-variants:rounded-md': radius === 'md',
+					},
+					className,
+				)}
+			>
+				{children}
+			</StyledContent>
+		</PopoverPrimitive.Portal>
+	);
+};
+
+export const Popover = Object.assign(PopoverRoot, {
+	Content: PopoverContent,
+	Arrow: PopoverArrow,
+	Close: PopoverClose,
+	Trigger: PopoverTrigger,
+	Anchor: PopoverAnchor,
+});

package/src/components/progress/Progress.tsx

@@ -1,34 +1,40 @@
-import * as ProgressPrimitive from '@radix-ui/react-progress';
-import { withClassName } from '../../hooks.js';
-import { forwardRef } from 'react';
-
-export const ProgressRoot = withClassName(
-	ProgressPrimitive.Root,
-	'layer-components:(w-full relative overflow-hidden border border-default rounded-full)',
-);
-export const ProgressIndicator = withClassName(
-	ProgressPrimitive.Indicator,
-	'layer-components:(bg-primary w-full h-6px translate-x-[calc(-100%*(1-var(--value)))] rounded-full transition-transform)',
-	'layer-components:[&[data-state=complete]]:(bg-accent)',
-	'layer-variants:[&[data-color=accent]]:(bg-accent)',
-);
-
-const ProgressBase = forwardRef<
-	HTMLDivElement,
-	ProgressPrimitive.ProgressProps & { color?: 'accent' | 'primary' }
->(function ProgressBase({ children, color, max = 100, value, ...props }, ref) {
-	return (
-		<ProgressRoot {...props} value={value} max={max} ref={ref}>
-			<ProgressIndicator
-				data-color={color}
-				// @ts-ignore
-				style={{ '--value': (value || 0) / max }}
-			/>
-		</ProgressRoot>
-	);
-});
-
-export const Progress = Object.assign(ProgressBase, {
-	Root: ProgressRoot,
-	Indicator: ProgressIndicator,
-});
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import { withClassName } from '../../hooks.js';
+
+export const ProgressRoot = withClassName(
+	ProgressPrimitive.Root,
+	'layer-components:(w-full relative overflow-hidden border border-default rounded-full)',
+);
+export const ProgressIndicator = withClassName(
+	ProgressPrimitive.Indicator,
+	'layer-components:(bg-primary w-full h-6px translate-x-[calc(-100%*(1-var(--value)))] rounded-full transition-transform)',
+	'layer-components:[&[data-state=complete]]:(bg-accent)',
+	'layer-variants:[&[data-color=accent]]:(bg-accent)',
+);
+
+const ProgressBase = function ProgressBase({
+	ref,
+	children,
+	color,
+	max = 100,
+	value,
+	...props
+}: ProgressPrimitive.ProgressProps & {
+	ref?: React.Ref<HTMLDivElement>;
+	color?: 'accent';
+}) {
+	return (
+		<ProgressRoot {...props} value={value} max={max} ref={ref}>
+			<ProgressIndicator
+				data-color={color}
+				// @ts-ignore
+				style={{ '--value': (value || 0) / max }}
+			/>
+		</ProgressRoot>
+	);
+};
+
+export const Progress = Object.assign(ProgressBase, {
+	Root: ProgressRoot,
+	Indicator: ProgressIndicator,
+});

package/src/components/scrollArea/ScrollArea.tsx

@@ -1,94 +1,102 @@
-import * as Primitive from '@radix-ui/react-scroll-area';
-import { withClassName } from '../../hooks.js';
-import { forwardRef, useMemo } from 'react';
-
-const ScrollAreaRootImpl = withClassName(
-	Primitive.Root,
-	'overflow-hidden bg-[var(--scroll-bg)] rounded-lg',
-	'layer-components:([--scroll-bg:var(--color-wash)] [--scroll-shadow:var(--color-shadow-1))])',
-);
-
-export interface ScrollAreaRootProps extends Primitive.ScrollAreaProps {
-	background?: 'white' | 'wash' | 'primary-wash' | 'primary' | 'black';
-}
-
-export const ScrollAreaRoot = forwardRef<any, ScrollAreaRootProps>(
-	function ScrollAreaRoot({ background = 'wash', ...props }, ref) {
-		const bgStyle: any = useMemo(
-			() => ({
-				'--scroll-bg': `var(--color-${background})`,
-				'--scroll-shadow': `var(--color-${shadowMap[background]})`,
-			}),
-			[background],
-		);
-		return <ScrollAreaRootImpl ref={ref} style={bgStyle} {...props} />;
-	},
-);
-
-export const ScrollAreaViewport = withClassName(
-	Primitive.Viewport,
-	'h-full w-full',
-	'[background:linear-gradient(var(--scroll-bg)_30%,rgba(255,255,255,0))_center_top,linear-gradient(rgba(255,255,255,0),var(--scroll-bg)_70%)_center_bottom,radial-gradient(farthest-side_at_50%_0,var(--scroll-shadow),rgba(0,0,0,0))_center_top,radial-gradient(farthest-side_at_50%_100%,var(--scroll-shadow),rgba(0,0,0,0))_center_bottom]',
-	'![background-repeat:no-repeat] ![background-size:100%_40px,100%_40px,100%_14px,100%_14px]',
-	'![background-attachment:local,local,scroll,scroll]',
-);
-
-export const ScrollAreaScrollbarRoot = withClassName(
-	Primitive.Scrollbar,
-	'layer-components:(flex select-none touch-none p-0.5 bg-gray-2 transition-colors duration-160ms ease-out)',
-	'layer-components:hover:bg-gray-3',
-	'layer-components:[&[data-orientation=vertical]]:w-2.5',
-	'layer-components:[&[data-orientation=horizontal]]:(flex-col h-2.5)',
-);
-
-export const ScrollAreaThumb = withClassName(
-	Primitive.Thumb,
-	'layer-components:(flex-1 rounded-lg relative bg-gray-5)',
-	'before:(content-[""] absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full min-w-44px min-h-44px)',
-);
-
-export const ScrollAreaScrollbar = forwardRef<
-	any,
-	Primitive.ScrollAreaScrollbarProps
->(function ScrollAreaScrollbar(props, ref) {
-	return (
-		<ScrollAreaScrollbarRoot {...props} ref={ref}>
-			<ScrollAreaThumb />
-		</ScrollAreaScrollbarRoot>
-	);
-});
-
-export interface ScrollAreaProps extends Primitive.ScrollAreaProps {
-	background?: ScrollAreaRootProps['background'];
-	orientation?: 'vertical' | 'both';
-}
-
-export const ScrollArea = Object.assign(
-	forwardRef<any, ScrollAreaProps>(function ScrollArea(
-		{ children, orientation, ...props },
-		ref,
-	) {
-		return (
-			<ScrollAreaRoot ref={ref} {...props}>
-				<ScrollAreaViewport>{children}</ScrollAreaViewport>
-				<ScrollAreaScrollbar />
-				{orientation === 'both' && (
-					<ScrollAreaScrollbar orientation="horizontal" />
-				)}
-			</ScrollAreaRoot>
-		);
-	}),
-	{
-		Root: ScrollAreaRoot,
-		Viewport: ScrollAreaViewport,
-		Scrollbar: ScrollAreaScrollbar,
-	},
-);
-
-const shadowMap = {
-	white: 'shadow-1',
-	wash: 'shadow-1',
-	'primary-wash': 'shadow-2',
-	primary: 'shadow-1',
-	black: 'overlay',
-};
+import * as Primitive from '@radix-ui/react-scroll-area';
+import { Ref, useMemo } from 'react';
+import { withClassName } from '../../hooks.js';
+
+const ScrollAreaRootImpl = withClassName(
+	Primitive.Root,
+	'overflow-hidden bg-[var(--scroll-bg)] rounded-lg',
+	'layer-components:([--scroll-bg:var(--color-wash)] [--scroll-shadow:var(--color-shadow-1))])',
+);
+
+export interface ScrollAreaRootProps extends Primitive.ScrollAreaProps {
+	background?: 'white' | 'wash' | 'primary-wash' | 'primary' | 'black';
+	ref?: Ref<HTMLDivElement>;
+}
+
+export const ScrollAreaRoot = function ScrollAreaRoot({
+	ref,
+	background = 'wash',
+	...props
+}: ScrollAreaRootProps) {
+	const bgStyle: any = useMemo(
+		() => ({
+			'--scroll-bg': `var(--color-${background})`,
+			'--scroll-shadow': `var(--color-${shadowMap[background]})`,
+		}),
+		[background],
+	);
+	return <ScrollAreaRootImpl ref={ref} style={bgStyle} {...props} />;
+};
+
+export const ScrollAreaViewport = withClassName(
+	Primitive.Viewport,
+	'h-full w-full',
+	'[background:linear-gradient(var(--scroll-bg)_30%,rgba(255,255,255,0))_center_top,linear-gradient(rgba(255,255,255,0),var(--scroll-bg)_70%)_center_bottom,radial-gradient(farthest-side_at_50%_0,var(--scroll-shadow),rgba(0,0,0,0))_center_top,radial-gradient(farthest-side_at_50%_100%,var(--scroll-shadow),rgba(0,0,0,0))_center_bottom]',
+	'![background-repeat:no-repeat] ![background-size:100%_40px,100%_40px,100%_14px,100%_14px]',
+	'![background-attachment:local,local,scroll,scroll]',
+);
+
+export const ScrollAreaScrollbarRoot = withClassName(
+	Primitive.Scrollbar,
+	'layer-components:(flex select-none touch-none p-0.5 bg-gray-2 transition-colors duration-160ms ease-out)',
+	'layer-components:hover:bg-gray-3',
+	'layer-components:[&[data-orientation=vertical]]:w-2.5',
+	'layer-components:[&[data-orientation=horizontal]]:(flex-col h-2.5)',
+);
+
+export const ScrollAreaThumb = withClassName(
+	Primitive.Thumb,
+	'layer-components:(flex-1 rounded-lg relative bg-gray-5)',
+	'before:(content-[""] absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full min-w-44px min-h-44px)',
+);
+
+export const ScrollAreaScrollbar = function ScrollAreaScrollbar({
+	ref,
+	...props
+}: Primitive.ScrollAreaScrollbarProps & {
+	ref?: Ref<HTMLDivElement>;
+}) {
+	return (
+		<ScrollAreaScrollbarRoot {...props} ref={ref}>
+			<ScrollAreaThumb />
+		</ScrollAreaScrollbarRoot>
+	);
+};
+
+export interface ScrollAreaProps extends Primitive.ScrollAreaProps {
+	background?: ScrollAreaRootProps['background'];
+	orientation?: 'vertical' | 'both';
+	ref?: Ref<HTMLDivElement>;
+}
+
+export const ScrollArea = Object.assign(
+	function ScrollArea({
+		ref,
+		children,
+		orientation,
+		...props
+	}: ScrollAreaProps) {
+		return (
+			<ScrollAreaRoot ref={ref} {...props}>
+				<ScrollAreaViewport>{children}</ScrollAreaViewport>
+				<ScrollAreaScrollbar />
+				{orientation === 'both' && (
+					<ScrollAreaScrollbar orientation="horizontal" />
+				)}
+			</ScrollAreaRoot>
+		);
+	},
+	{
+		Root: ScrollAreaRoot,
+		Viewport: ScrollAreaViewport,
+		Scrollbar: ScrollAreaScrollbar,
+	},
+);
+
+const shadowMap = {
+	white: 'shadow-1',
+	wash: 'shadow-1',
+	'primary-wash': 'shadow-2',
+	primary: 'shadow-1',
+	black: 'overlay',
+};