@a-type/ui 5.0.22 → 6.0.0

package/src/components/progress/Progress.tsx

@@ -5,42 +5,29 @@ import {
 } from '@base-ui/react/progress';
 import clsx from 'clsx';
 import { withClassName } from '../../hooks.js';
-import { PaletteName } from '../../uno/index.js';
+import cls from './Progress.module.css';
 
-export const ProgressRoot = withClassName(
-	ProgressPrimitive.Root,
-	'layer-components:grid-columns-[1fr_1fr] layer-components:(grid w-full items-center gap-col-md gap-row-xs)',
-);
+export const ProgressRoot = withClassName(ProgressPrimitive.Root, cls.root);
 export const ProgressIndicator = withClassName(
 	ProgressPrimitive.Indicator,
-	'layer-components:(w-full rounded-lg transition-transform bg-main)',
-	'layer-components:data-[complete]:(bg-success)',
-);
-export const ProgressTrack = withClassName(
-	ProgressPrimitive.Track,
-	'layer-components:(relative h-8px w-full overflow-hidden border rounded-lg border-black)',
+	cls.indicator,
 );
+export const ProgressTrack = withClassName(ProgressPrimitive.Track, cls.track);
 
 const ProgressBase = function ProgressBase({
 	ref,
 	children,
-	color,
 	max = 100,
 	value,
 	className,
 	...props
 }: ProgressRootProps & {
 	ref?: React.Ref<HTMLDivElement>;
-	color?: PaletteName;
 }) {
 	return (
 		<ProgressPrimitive.Root
 			{...props}
-			className={clsx(
-				color && `palette-${color}`,
-				'layer-components:w-full',
-				className,
-			)}
+			className={clsx('layer-components:w-full', className)}
 			value={value}
 			max={max}
 			ref={ref}
@@ -53,35 +40,23 @@ const ProgressBase = function ProgressBase({
 	);
 };
 
-const ProgressLabel = withClassName(
-	ProgressPrimitive.Label,
-	'layer-components:(col-start-1 row-start-1 font-size-xs color-gray-ink)',
-);
+const ProgressLabel = withClassName(ProgressPrimitive.Label, cls.label);
 
-const ProgressValue = withClassName(
-	ProgressPrimitive.Value,
-	'layer-components:(col-start-2 row-start-1 justify-self-end font-size-xs font-semibold color-gray-ink)',
-);
+const ProgressValue = withClassName(ProgressPrimitive.Value, cls.value);
 
 export const ProgressLabeled = function ProgressLabeled({
 	ref,
 	label,
 	className,
-	color,
 	formatValue,
 	...props
 }: Omit<ProgressRootProps, 'children'> & {
 	ref?: React.Ref<HTMLDivElement>;
 	label: React.ReactNode;
-	color?: PaletteName;
 	formatValue?: ProgressValueProps['children'];
 }) {
 	return (
-		<ProgressRoot
-			ref={ref}
-			className={clsx(color && `palette-${color}`, className)}
-			{...props}
-		>
+		<ProgressRoot ref={ref} className={clsx(className)} {...props}>
 			<ProgressLabel>{label}</ProgressLabel>
 			<ProgressValue>{formatValue}</ProgressValue>
 			<ProgressTrack className="col-span-2">

package/src/components/provider/Provider.tsx

@@ -10,7 +10,6 @@ import { ParticleLayer } from '../particles/index.js';
 import { PwaInstall } from '../pwaInstall/PwaInstall.js';
 import { DefaultToastProvider, Toaster } from '../toasts/toasts.js';
 import { TooltipProvider } from '../tooltip/index.js';
-import { TweakPane } from './TweakPane.js';
 
 export interface ProviderProps {
 	children?: ReactNode;
@@ -19,7 +18,6 @@ export interface ProviderProps {
 	virtualKeyboardBehavior?: 'overlay' | 'displace';
 	disableTitleBarColor?: boolean;
 	manifestPath?: string | false;
-	tweaks?: boolean;
 }
 
 /**
@@ -32,7 +30,6 @@ export function Provider({
 	virtualKeyboardBehavior = 'displace',
 	disableTitleBarColor,
 	manifestPath,
-	tweaks,
 }: ProviderProps) {
 	useVisualViewportOffset(disableViewportOffset);
 	useVirtualKeyboardFocusBehavior();
@@ -49,7 +46,6 @@ export function Provider({
 			{manifestPath === false ? null : (
 				<PwaInstall manifestPath={manifestPath} />
 			)}
-			{tweaks && <TweakPane />}
 		</>
 	);
 

package/src/components/pwaInstall/PlatformIcons.tsx

@@ -5,7 +5,7 @@ export function SafariShareIcon() {
 			width="24"
 			height="24"
 			viewBox="0 0 17.695 26.475"
-			className="v-middle"
+			style={{ verticalAlign: 'middle' }}
 		>
 			<g fill="currentColor">
 				<path d="M17.334 10.762v9.746c0 2.012-1.025 3.027-3.066 3.027H3.066C1.026 23.535 0 22.52 0 20.508v-9.746C0 8.75 1.025 7.734 3.066 7.734h2.94v1.573h-2.92c-.977 0-1.514.527-1.514 1.543v9.57c0 1.015.537 1.543 1.514 1.543h11.152c.967 0 1.524-.527 1.524-1.543v-9.57c0-1.016-.557-1.543-1.524-1.543h-2.91V7.734h2.94c2.04 0 3.066 1.016 3.066 3.028Z" />
@@ -22,7 +22,7 @@ export function SafariIcon() {
 			viewBox="0 0 20.283 19.932"
 			width="25"
 			height="25"
-			className="v-middle"
+			style={{ verticalAlign: 'middle' }}
 		>
 			<g fill="currentColor">
 				<path d="M9.96 19.922c5.45 0 9.962-4.522 9.962-9.961C19.922 4.51 15.4 0 9.952 0 4.511 0 0 4.512 0 9.96c0 5.44 4.521 9.962 9.96 9.962Zm0-1.66A8.26 8.26 0 0 1 1.67 9.96c0-4.61 3.672-8.3 8.281-8.3 4.61 0 8.31 3.69 8.31 8.3 0 4.61-3.69 8.3-8.3 8.3Z" />
@@ -40,7 +40,7 @@ export function SafariPlusSquareIcon() {
 			height="24"
 			viewBox="-4 -4 33 33"
 			fill="currentColor"
-			className="v-middle"
+			style={{ verticalAlign: 'middle' }}
 		>
 			<g>
 				<path d="m23.40492,1.60784c-1.32504,-1.32504 -3.19052,-1.56912 -5.59644,-1.56912l-10.65243,0c-2.33622,0 -4.2017,0.24408 -5.5267,1.56912c-1.32504,1.34243 -1.56911,3.17306 -1.56911,5.50924l0,10.5827c0,2.40596 0.22665,4.254 1.55165,5.57902c1.34246,1.32501 3.19052,1.5691 5.59647,1.5691l10.60013,0c2.40592,0 4.2714,-0.24408 5.59644,-1.5691c1.325,-1.34245 1.55166,-3.17306 1.55166,-5.57902l0,-10.51293c0,-2.40596 -0.22666,-4.25401 -1.55166,-5.57901zm-0.38355,5.21289l0,11.24518c0,1.51681 -0.20924,2.94643 -1.02865,3.78327c-0.83683,0.83685 -2.30134,1.0635 -3.81815,1.0635l-11.33234,0c-1.51681,0 -2.96386,-0.22665 -3.80073,-1.0635c-0.83683,-0.83684 -1.04607,-2.26646 -1.04607,-3.78327l0,-11.19288c0,-1.5517 0.20924,-3.01617 1.02865,-3.85304c0.83687,-0.83683 2.31876,-1.04607 3.87042,-1.04607l11.28007,0c1.51681,0 2.98132,0.22666 3.81815,1.06353c0.81941,0.81941 1.02865,2.26645 1.02865,3.78327zm-10.53039,12.08205c0.64506,0 1.02861,-0.43586 1.02861,-1.13326l0,-4.34117l4.53294,0c0.66252,0 1.13326,-0.36613 1.13326,-0.99376c0,-0.64506 -0.43586,-1.02861 -1.13326,-1.02861l-4.53294,0l0,-4.53294c0,-0.6974 -0.38355,-1.13326 -1.02861,-1.13326c-0.62763,0 -0.99376,0.45332 -0.99376,1.13326l0,4.53294l-4.51552,0c-0.69737,0 -1.15069,0.38355 -1.15069,1.02861c0,0.62763 0.48817,0.99376 1.15069,0.99376l4.51552,0l0,4.34117c0,0.66252 0.36613,1.13326 0.99376,1.13326z" />
@@ -56,7 +56,7 @@ export function SafariAddToDockIcon() {
 			viewBox="0 0 23.389 17.979"
 			width="24"
 			height="24"
-			className="v-middle"
+			style={{ verticalAlign: 'middle' }}
 		>
 			<g fill="currentColor">
 				<path d="M1.045 3.291v1.377h20.937V3.291Zm2.021 14.688h16.895c2.05 0 3.066-1.006 3.066-3.018V3.027C23.027 1.016 22.012 0 19.961 0H3.066C1.026 0 0 1.016 0 3.027v11.934c0 2.012 1.025 3.018 3.066 3.018Zm.02-1.573c-.977 0-1.514-.517-1.514-1.533V3.115c0-1.015.537-1.543 1.514-1.543H19.94c.967 0 1.514.528 1.514 1.543v11.758c0 1.016-.547 1.533-1.514 1.533Z" />
@@ -68,7 +68,12 @@ export function SafariAddToDockIcon() {
 
 export function AndroidAddToHomeIcon() {
 	return (
-		<svg height="24" viewBox="0 -960 960 960" width="24" className="v-middle">
+		<svg
+			height="24"
+			viewBox="0 -960 960 960"
+			width="24"
+			style={{ verticalAlign: 'middle' }}
+		>
 			<path d="M320-40q-33 0-56.5-23.5T240-120v-160h80v40h400v-480H320v40h-80v-160q0-33 23.5-56.5T320-920h400q33 0 56.5 23.5T800-840v720q0 33-23.5 56.5T720-40H320Zm0-120v40h400v-40H320ZM176-280l-56-56 224-224H200v-80h280v280h-80v-144L176-280Zm144-520h400v-40H320v40Zm0 0v-40 40Zm0 640v40-40Z" />
 		</svg>
 	);

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

@@ -0,0 +1,23 @@
+.dialogContent {
+	display: flex;
+	flex-direction: column;
+	gap: var(--m-spacing-xs);
+}
+
+.dialogTitle {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--m-spacing-md);
+}
+
+.appIcon {
+	display: inline-block;
+	height: 1em;
+	width: 1em;
+	border-radius: var(--m-radius);
+}
+
+.appDescription {
+	margin-bottom: var(--m-spacing-sm);
+}

package/src/components/pwaInstall/PwaInstall.tsx

@@ -20,6 +20,7 @@ import {
 	SafariPlusSquareIcon,
 	SafariShareIcon,
 } from './PlatformIcons.js';
+import cls from './PwaInstall.module.css';
 import { pwaInstallerState } from './state.js';
 import {
 	triggerDeferredInstall,
@@ -54,8 +55,8 @@ export function PwaInstall({ manifestPath, ...rest }: PwaInstall) {
 				rest.onOpenChange?.(isOpen, ev);
 			}}
 		>
-			<Dialog.Content className="flex flex-col gap-xs" id="pwa-install-dialog">
-				<Dialog.Title className="flex flex-row items-center gap-md">
+			<Dialog.Content className={cls.dialogContent} id="pwa-install-dialog">
+				<Dialog.Title className={cls.dialogTitle}>
 					{primaryIcon && (
 						<img
 							src={primaryIcon.src}
@@ -65,7 +66,7 @@ export function PwaInstall({ manifestPath, ...rest }: PwaInstall) {
 								manifest?.name ??
 								'App Icon'
 							}
-							className="inline-block h-1em w-1em rounded"
+							className={cls.appIcon}
 						/>
 					)}
 					Install {manifest?.short_name ?? manifest?.name ?? 'App'}
@@ -92,7 +93,7 @@ export function PwaInstall({ manifestPath, ...rest }: PwaInstall) {
 							access and more features.
 						</Dialog.Description>
 						{manifest?.description && (
-							<P className="mb-sm">{manifest.description}</P>
+							<P className={cls.appDescription}>{manifest.description}</P>
 						)}
 						<ManifestImageGallery manifestPath={manifestPath} />
 						<Dialog.Actions>
@@ -176,7 +177,7 @@ function ManifestImageGallery({ manifestPath }: { manifestPath?: string }) {
 	}
 
 	return (
-		<Box overflow="auto-x" p="sm" gap className="h-240px">
+		<Box overflow="auto-x" p="sm" gap style={{ height: 240 }}>
 			{manifest.screenshots?.map((screenshot, index) => (
 				<Lightbox.Root key={screenshot.src}>
 					<Lightbox.Trigger
@@ -186,13 +187,13 @@ function ManifestImageGallery({ manifestPath }: { manifestPath?: string }) {
 								key={index}
 								src={screenshot.src}
 								alt={screenshot.label || `Screenshot ${index + 1}`}
-								className="border border-default rounded-xs"
+								className="border-default border rd-xs"
 							/>
 						}
 					/>
 					<Lightbox.Portal>
-						<Lightbox.Overlay className="z-10000" />
-						<Lightbox.Content className="z-10001">
+						<Lightbox.Overlay style={{ zIndex: 10000 }} />
+						<Lightbox.Content style={{ zIndex: 10001 }}>
 							<Lightbox.Image
 								src={screenshot.src}
 								alt={screenshot.label || `Screenshot ${index + 1}`}

package/src/components/pwaInstall/PwaInstallTrigger.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Button } from '../button/Button.js';
 import { Icon } from '../icon/Icon.js';
 import { PwaInstallTrigger } from './PwaInstallTrigger.js';

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

@@ -0,0 +1,59 @@
+.trigger {
+	position: relative;
+	justify-content: center;
+	padding: var(--m-spacing-xs);
+	border-radius: var(--m-action-radius);
+}
+
+.popup {
+	transition-property: all;
+	transition-duration: var(--m-duration);
+	transition-timing-function: var(--m-easing-loose);
+
+	position: fixed;
+	contain: layout;
+
+	@apply --mx-shadow(var(--m-shadow-lg));
+	@apply --mx-surface-ambient;
+	padding: 0;
+
+	clip-path: inset(-50px -50px -50px -50px);
+
+	bottom: anchor(bottom);
+	&[data-align='center'] {
+		justify-self: anchor-center;
+	}
+	&[data-align='start'] {
+		justify-self: anchor-start;
+	}
+	&[data-align='end'] {
+		justify-self: anchor-end;
+	}
+
+	&[data-starting-style],
+	&[data-ending-style] {
+		&[data-align='center'] {
+			clip-path: inset(
+				calc(100% - var(--trigger-height, 0px))
+					calc((100% - var(--trigger-width, 0px)) / 2) 0
+					calc((100% - var(--trigger-width, 0px)) / 2) round 200px
+			);
+		}
+		&[data-align='start'] {
+			clip-path: inset(
+				calc(100% - var(--trigger-height, 0px))
+					calc(100% - var(--trigger-width, 0px)) 0 0 round 200px
+			);
+		}
+		&[data-align='end'] {
+			clip-path: inset(
+				calc(100% - var(--trigger-height, 0px)) 0 0
+					calc(100% - var(--trigger-width, 0px)) round 200px
+			);
+		}
+	}
+
+	&[data-ending-style] {
+		opacity: 0;
+	}
+}

package/src/components/quickAction/QuickAction.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Autocomplete } from '../autocomplete/Autocomplete.js';
 
 import clsx from 'clsx';
@@ -73,7 +73,7 @@ const ActionContent = () => (
 				)}
 			</GroupedAutocomplete.List>
 			<GroupedAutocomplete.Empty>No results found.</GroupedAutocomplete.Empty>
-			<GroupedAutocomplete.Input disableCaret className="w-full" />
+			<GroupedAutocomplete.Input disableCaret style={{ width: '100%' }} />
 		</Box>
 	</GroupedAutocomplete>
 );
@@ -84,17 +84,18 @@ export const Default: Story = {
 			<PageRoot>
 				<PageContent>
 					<PageNowPlaying
-						className={clsx('flex flex-col', {
+						className={clsx({
 							'items-center': args.align === 'center',
 							'items-start': args.align === 'start',
 							'items-end': args.align === 'end',
 						})}
+						style={{ display: 'flex', flexDirection: 'column' }}
 					>
 						<QuickAction {...args}>
 							<QuickAction.Trigger>
 								<Icon name="plus" />
 							</QuickAction.Trigger>
-							<QuickAction.Content className="w-95vw" align={args.align}>
+							<QuickAction.Content style={{ width: '95vw' }} align={args.align}>
 								<ActionContent />
 							</QuickAction.Content>
 						</QuickAction>

package/src/components/quickAction/QuickAction.tsx

@@ -13,6 +13,7 @@ import {
 	ValueMonitor,
 } from '../../systems/ValueMonitor.js';
 import { Button, ButtonProps } from '../button/Button.js';
+import cls from './QuickAction.module.css';
 
 const QuickActionIdContext = createContext<string>('qab');
 
@@ -62,10 +63,7 @@ const QuickActionTrigger = ({
 					color={props.color}
 					emphasis={emphasis}
 					{...composed}
-					className={clsx(
-						'layer-composed:(relative min-h-[2.5rem] min-w-[2.5rem] justify-center rounded-full p-xs)',
-						className,
-					)}
+					className={clsx(cls.trigger, className)}
 					style={{
 						// @ts-ignore
 						anchorName: `--${layoutId}`,
@@ -108,25 +106,8 @@ const QuickActionContent = ({
 		<Dialog.Portal>
 			<Dialog.Popup
 				ref={finalRef}
-				className={clsx(
-					'layer-components:(contain-layout border-1 rounded-md border-solid shadow-lg transition-all transition-ease-out bg-white border-black clip-inset-[-50px]-[-50px]-[-50px]-[-50px])',
-					'layer-components:(fixed bottom-[anchor(bottom)] overflow-clip)',
-					{
-						'[justify-self:anchor-center]': align === 'center',
-						'left-[anchor(left)]': align === 'start',
-						'right-[anchor(right)]': align === 'end',
-					},
-					{
-						'start-end:clip-inset-[calc(100%_-_var(--trigger-height))]-[calc((100%_-_var(--trigger-width))/2)]-[0]-[calc((100%_-_var(--trigger-width))/2)]-[round]-[200px]':
-							align === 'center',
-						'start-end:clip-inset-[calc(100%_-_var(--trigger-height))]-[calc(100%_-_var(--trigger-width))]-[0]-[0]-[round]-[200px]':
-							align === 'start',
-						'start-end:clip-inset-[calc(100%_-_var(--trigger-height))]-[0]-[0]-[calc(100%_-_var(--trigger-width))]-[round]-[200px]':
-							align === 'end',
-					},
-					'data-[ending-style]:opacity-0',
-					className,
-				)}
+				className={clsx(cls.popup, className)}
+				data-align={align}
 				style={
 					{
 						positionAnchor: `--${layoutId}`,

package/src/components/relativeTime/RelativeTime.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { RelativeTime } from './RelativeTime.js';
 
 const meta = {

package/src/components/richEditor/index.tsx

@@ -1,35 +1,6 @@
 import clsx from 'clsx';
+import cls from './richEditor.module.css';
 
-export const tipTapClassName = clsx(
-	'layer-components:(w-full leading-relaxed)',
-	'layer-components:[&_.ProseMirror:focus]:shadow-focus layer-components:[&_.ProseMirror:focus]:(outline-none)',
-	'layer-components:[&_h1,h2,h3,p]:mt-0',
-	'layer-components:[&_h1]:(mb-md text-2xl font-semibold)',
-	'layer-components:[&_h1]:[&:not(:first-child)]:mt-xl',
-	'layer-components:[&_h2]:(mb-md text-lg font-bold color-gray-dark color-darken-3)',
-	'layer-components:[&_h2]:[&:not(:first-child)]:mt-lg',
-	'layer-components:[&_h3]:(mb-sm text-md font-500 color-gray-dark color-darken-2)',
-	'layer-components:[&_h3]:[&:not(:first-child)]:mt-md',
-	'layer-components:[&_h4]:(mb-sm text-xs uppercase color-gray-dark color-darken-1)',
-	'layer-components:[&_h4]:[&:not(:first-child)]:mt-md',
-	'layer-components:[&_p]:(mb-md mt-0)',
-	'layer-components:[&_a]:underline',
-	'layer-components:[&_blockquote]:(mb-md ml-md mt-md border-l-4 border-l-solid pl-4 border-gray)',
-	'layer-components:[&_ul]:(mb-md mt-md list-disc pl-6)',
-	'layer-components:[&_ol]:(mb-md mt-md list-decimal pl-6)',
-	'layer-components:[&_li]:(mb-sm)',
-	'layer-components:[&_mark]:(bg-main-wash bg-darken-2)',
-	'layer-components:[&_strong]:(font-semibold)',
-	'layer-components:[&_em]:(italic)',
-	'layer-components:[&_hr]:(my-lg border-gray)',
-	'layer-components:[&_a]:(underline)',
-	'layer-components:[&_a:hover]:(underline)',
-	'layer-components:[&_a:focus]:shadow-focus layer-components:[&_a:focus]:(outline-none)',
-	'layer-components:[&_a:focus-visible]:(outline-none ring-4 ring-inset ring-gray)',
-	'layer-components:[&_.ProseMirror]:shadow-sm-inset layer-components:[&_.ProseMirror]:(border-1 rounded-[20px] border-solid px-4 py-2 bg-white border-gray-dark)',
-);
+export const tipTapClassName = clsx(cls.root);
 
-export const tipTapReadonlyClassName = clsx(
-	'[&_.ProseMirror]:(border-none shadow-none bg-transparent)',
-	'[&_.ProseMirror:focus]:(shadow-none outline-none bg-transparent)',
-);
+export const tipTapReadonlyClassName = clsx(cls.readonly);

package/src/components/richEditor/richEditor.module.css

@@ -0,0 +1,102 @@
+.root {
+	@apply --mx-text-secondary;
+	width: 100%;
+
+	& .ProseMirror {
+		box-shadow: inset var(--m-shadow-sm);
+		@apply --mx-control;
+		@apply --mx-focus;
+	}
+
+	& h1,
+	& h2,
+	& h3,
+	& p {
+		margin-top: 0;
+	}
+
+	& h1 {
+		@apply --mx-text-primary;
+		&:not(:first-child) {
+			margin-top: var(--m-spacing-xl);
+		}
+	}
+	& h2 {
+		@apply --mx-text-secondary;
+		font-weight: var(--m-text-primary-weight);
+		&:not(:first-child) {
+			margin-top: var(--m-spacing-lg);
+		}
+	}
+	& h3 {
+		@apply --mx-text-ambient;
+		font-weight: var(--m-text-primary-weight);
+		text-transform: uppercase;
+		&:not(:first-child) {
+			margin-top: var(--m-spacing-md);
+		}
+	}
+	& h4 {
+		@apply --mx-text-ambient;
+		font-weight: var(--m-text-primary-weight);
+		&:not(:first-child) {
+			margin-top: var(--m-spacing-md);
+		}
+	}
+	& p {
+		@apply --mx-text-secondary;
+		margin-bottom: var(--m-spacing-md);
+	}
+	& a {
+		text-decoration: underline;
+		&:hover {
+			text-decoration: underline;
+		}
+		@apply --mx-focus;
+	}
+	& blockquote {
+		border-left: 4px solid var(--m-color-neutral-heavy);
+		padding-left: var(--m-spacing-md);
+		font-style: italic;
+		margin-block: var(--m-spacing-md);
+		margin-inline-start: var(--m-spacing-md);
+		padding-inline: var(--m-spacing-md);
+		@apply --mx-bg(var(--m-color-neutral-wash));
+	}
+	& ul {
+		list-style: disc;
+	}
+	& ol {
+		list-style: decimal;
+	}
+	& ul,
+	& ol {
+		padding-inline-start: var(--m-spacing-lg);
+		margin-block: var(--m-spacing-md);
+	}
+	& li {
+		margin-block-end: var(--m-spacing-xs);
+	}
+	& mark {
+		@apply --mx-bg(var(--m-color-main-wash));
+	}
+	& strong {
+		font-weight: var(--m-typography-weight-bold);
+	}
+	& em {
+		font-style: italic;
+	}
+	& hr {
+		border: none;
+		border-top: var(--m-lineWidth) solid var(--m-color-neutral-heavy);
+		margin-block: var(--m-spacing-lg);
+	}
+}
+
+.readonly {
+	& .ProseMirror {
+		@apply --mx-bg(transparent);
+		box-shadow: none;
+		border-width: 0;
+	}
+}

package/src/components/richEditor/richEditor.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import clsx from 'clsx';
 import { tipTapClassName, tipTapReadonlyClassName } from './index.js';