@k8ordo/ui 2.0.0 → 2.1.0

package/dist/components/data-display/badge/badge.css

@@ -0,0 +1,160 @@
+@layer properties, theme, base;
+
+@layer components {
+  .rZZfaW_root {
+    border-radius: var(--radius-full);
+    font-weight: var(--font-weight-medium);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-out);
+    border-style: solid;
+    border-width: 1px;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .rZZfaW_sm {
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block: calc(var(--spacing) * .5);
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-xs);
+  }
+
+  .rZZfaW_md {
+    padding-inline: calc(var(--spacing) * 2.5);
+    padding-block: calc(var(--spacing) * 1);
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-xs);
+  }
+
+  .rZZfaW_lg {
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 1.5);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+  }
+
+  .rZZfaW_neutralSolid {
+    border-color: var(--color-border-mute);
+    background-color: var(--color-bg-mute);
+    color: var(--color-fg-base);
+  }
+
+  .rZZfaW_neutralOutline {
+    border-color: var(--color-border-base);
+    background-color: var(--color-bg-base);
+    color: var(--color-fg-base);
+  }
+
+  .rZZfaW_infoSolid {
+    border-color: var(--color-border-info);
+    background-color: var(--color-bg-info);
+    color: var(--color-fg-info);
+  }
+
+  .rZZfaW_infoOutline {
+    border-color: var(--color-border-info);
+    background-color: var(--color-bg-base);
+    color: var(--color-fg-info);
+  }
+
+  .rZZfaW_successSolid {
+    border-color: var(--color-border-success);
+    background-color: var(--color-bg-success);
+    color: var(--color-fg-success);
+  }
+
+  .rZZfaW_successOutline {
+    border-color: var(--color-border-success);
+    background-color: var(--color-bg-base);
+    color: var(--color-fg-success);
+  }
+
+  .rZZfaW_warningSolid {
+    border-color: var(--color-border-warning);
+    background-color: var(--color-bg-warning);
+    color: var(--color-fg-warning);
+  }
+
+  .rZZfaW_warningOutline {
+    border-color: var(--color-border-warning);
+    background-color: var(--color-bg-base);
+    color: var(--color-fg-warning);
+  }
+
+  .rZZfaW_errorSolid {
+    border-color: var(--color-border-error);
+    background-color: var(--color-bg-error);
+    color: var(--color-fg-error);
+  }
+
+  .rZZfaW_errorOutline {
+    border-color: var(--color-border-error);
+    background-color: var(--color-bg-base);
+    color: var(--color-fg-error);
+  }
+
+  .rZZfaW_interactive {
+    cursor: pointer;
+  }
+
+  @media (hover: hover) {
+    .rZZfaW_interactive.rZZfaW_neutralSolid:hover {
+      background-color: var(--color-bg-emphasize);
+    }
+
+    .rZZfaW_interactive.rZZfaW_neutralOutline:hover {
+      background-color: var(--color-bg-subtle);
+    }
+
+    .rZZfaW_interactive:is(.rZZfaW_infoSolid, .rZZfaW_successSolid, .rZZfaW_warningSolid, .rZZfaW_errorSolid):hover {
+      background-color: var(--color-bg-base);
+    }
+
+    .rZZfaW_interactive.rZZfaW_infoOutline:hover {
+      background-color: var(--color-bg-info);
+    }
+
+    .rZZfaW_interactive.rZZfaW_successOutline:hover {
+      background-color: var(--color-bg-success);
+    }
+
+    .rZZfaW_interactive.rZZfaW_warningOutline:hover {
+      background-color: var(--color-bg-warning);
+    }
+
+    .rZZfaW_interactive.rZZfaW_errorOutline:hover {
+      background-color: var(--color-bg-error);
+    }
+  }
+
+  .rZZfaW_interactive.rZZfaW_neutralSolid:active {
+    background-color: var(--color-bg-base);
+  }
+
+  .rZZfaW_interactive.rZZfaW_neutralOutline:active {
+    background-color: var(--color-bg-mute);
+  }
+
+  .rZZfaW_interactive:is(.rZZfaW_infoSolid, .rZZfaW_successSolid, .rZZfaW_warningSolid, .rZZfaW_errorSolid):active {
+    background-color: var(--color-bg-base);
+  }
+
+  .rZZfaW_interactive.rZZfaW_infoOutline:active {
+    background-color: var(--color-bg-info);
+  }
+
+  .rZZfaW_interactive.rZZfaW_successOutline:active {
+    background-color: var(--color-bg-success);
+  }
+
+  .rZZfaW_interactive.rZZfaW_warningOutline:active {
+    background-color: var(--color-bg-warning);
+  }
+
+  .rZZfaW_interactive.rZZfaW_errorOutline:active {
+    background-color: var(--color-bg-error);
+  }
+}
+
+@layer utilities;

package/dist/components/data-display/badge/badge.d.mts

@@ -16,6 +16,5 @@ type StaticProps = {
   interactive?: false;
 } & Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'className' | 'style'>;
 type Props = BaseProps & (InteractiveProps | StaticProps);
-declare const Badge: FC<Props>;
-//#endregion
-export { Badge };
+export declare const Badge: FC<Props>;
+//#endregion

package/dist/components/data-display/badge/badge.mjs

@@ -1,11 +1,36 @@
-import "../../_internal/focus-ring.mjs";
-import { cn } from "../../../helpers/cn.mjs";
+import focus_ring_module_default from "../../_internal/focus-ring.module.mjs";
+import badge_module_default from "./badge.module.mjs";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/badge/badge.tsx
-const badgeClassName = (size, tone, variant, interactive) => {
-	const interactiveClassName = cn(interactive && `cursor-pointer focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info`, interactive && tone === "neutral" && variant === "solid" && "hover:bg-bg-emphasize active:bg-bg-base", interactive && tone === "neutral" && variant === "outline" && "hover:bg-bg-subtle active:bg-bg-mute", interactive && tone === "info" && variant === "solid" && "hover:bg-bg-info/80 active:bg-bg-info/60", interactive && tone === "info" && variant === "outline" && "hover:bg-bg-info active:bg-bg-info/80", interactive && tone === "success" && variant === "solid" && "hover:bg-bg-success/80 active:bg-bg-success/60", interactive && tone === "success" && variant === "outline" && "hover:bg-bg-success active:bg-bg-success/80", interactive && tone === "warning" && variant === "solid" && "hover:bg-bg-warning/80 active:bg-bg-warning/60", interactive && tone === "warning" && variant === "outline" && "hover:bg-bg-warning active:bg-bg-warning/80", interactive && tone === "error" && variant === "solid" && "hover:bg-bg-error/80 active:bg-bg-error/60", interactive && tone === "error" && variant === "outline" && "hover:bg-bg-error active:bg-bg-error/80");
-	return cn("inline-flex items-center rounded-full border font-medium transition-colors", size === "sm" && "px-2 py-0.5 text-xs", size === "md" && "px-2.5 py-1 text-xs", size === "lg" && "px-3 py-1.5 text-sm", tone === "neutral" && variant === "solid" && "border-border-mute bg-bg-mute text-fg-base", tone === "neutral" && variant === "outline" && "border-border-base bg-bg-base text-fg-base", tone === "info" && variant === "solid" && "border-border-info bg-bg-info text-fg-info", tone === "info" && variant === "outline" && "border-border-info bg-bg-base text-fg-info", tone === "success" && variant === "solid" && "border-border-success bg-bg-success text-fg-success", tone === "success" && variant === "outline" && "border-border-success bg-bg-base text-fg-success", tone === "warning" && variant === "solid" && "border-border-warning bg-bg-warning text-fg-warning", tone === "warning" && variant === "outline" && "border-border-warning bg-bg-base text-fg-warning", tone === "error" && variant === "solid" && "border-border-error bg-bg-error text-fg-error", tone === "error" && variant === "outline" && "border-border-error bg-bg-base text-fg-error", interactiveClassName);
+const SIZE = {
+	sm: badge_module_default.sm,
+	md: badge_module_default.md,
+	lg: badge_module_default.lg
 };
+const TONE = {
+	neutral: {
+		solid: badge_module_default.neutralSolid,
+		outline: badge_module_default.neutralOutline
+	},
+	info: {
+		solid: badge_module_default.infoSolid,
+		outline: badge_module_default.infoOutline
+	},
+	success: {
+		solid: badge_module_default.successSolid,
+		outline: badge_module_default.successOutline
+	},
+	warning: {
+		solid: badge_module_default.warningSolid,
+		outline: badge_module_default.warningOutline
+	},
+	error: {
+		solid: badge_module_default.errorSolid,
+		outline: badge_module_default.errorOutline
+	}
+};
+const badgeClassName = (size, tone, variant, interactive) => clsx(badge_module_default.root, SIZE[size], TONE[tone][variant], interactive && [badge_module_default.interactive, focus_ring_module_default.ringNoBorder]);
 const Badge = (props) => {
 	if (props.interactive === true) {
 		const { interactive, label, size = "md", tone = "neutral", variant = "solid", ...rest } = props;

package/dist/components/data-display/badge/badge.module.mjs

@@ -0,0 +1,21 @@
+import './badge.css';
+//#region src/components/data-display/badge/badge.module.css
+var badge_module_default = {
+	"errorOutline": "rZZfaW_errorOutline",
+	"errorSolid": "rZZfaW_errorSolid",
+	"infoOutline": "rZZfaW_infoOutline",
+	"infoSolid": "rZZfaW_infoSolid",
+	"interactive": "rZZfaW_interactive",
+	"lg": "rZZfaW_lg",
+	"md": "rZZfaW_md",
+	"neutralOutline": "rZZfaW_neutralOutline",
+	"neutralSolid": "rZZfaW_neutralSolid",
+	"root": "rZZfaW_root",
+	"sm": "rZZfaW_sm",
+	"successOutline": "rZZfaW_successOutline",
+	"successSolid": "rZZfaW_successSolid",
+	"warningOutline": "rZZfaW_warningOutline",
+	"warningSolid": "rZZfaW_warningSolid"
+};
+//#endregion
+export { badge_module_default as default };

package/dist/components/data-display/card/card.css

@@ -0,0 +1,44 @@
+@layer properties, theme, base;
+
+@layer components {
+  .v9O_zW_root {
+    border-radius: var(--radius-xl);
+    background-color: var(--color-bg-base);
+  }
+
+  .v9O_zW_shadow {
+    box-shadow: var(--shadow-sm);
+  }
+
+  .v9O_zW_outline {
+    border: 1px solid var(--color-border-mute);
+  }
+
+  .v9O_zW_full {
+    width: 100%;
+  }
+
+  .v9O_zW_fit {
+    width: fit-content;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .v9O_zW_interactive {
+      transition-property: transform, translate, scale, rotate;
+      transition-duration: var(--duration-fast);
+      transition-timing-function: var(--easing-in-out);
+    }
+
+    @media (hover: hover) {
+      .v9O_zW_interactive:hover {
+        scale: 1.02;
+      }
+    }
+
+    .v9O_zW_interactive:active {
+      scale: .98;
+    }
+  }
+}
+
+@layer utilities;

package/dist/components/data-display/card/card.d.mts

@@ -5,6 +5,5 @@ type CardProps = {
   variant?: 'shadow' | 'outline';
   interactive?: boolean;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
-declare const Card: FC<CardProps>;
-//#endregion
-export { Card };
+export declare const Card: FC<CardProps>;
+//#endregion

package/dist/components/data-display/card/card.mjs

@@ -1,9 +1,19 @@
-import { cn } from "../../../helpers/cn.mjs";
+import high_contrast_module_default from "../../_internal/high-contrast.module.mjs";
+import card_module_default from "./card.module.mjs";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/card/card.tsx
+const VARIANT = {
+	shadow: [card_module_default.shadow, high_contrast_module_default.edge],
+	outline: card_module_default.outline
+};
+const WIDTH = {
+	full: card_module_default.full,
+	fit: card_module_default.fit
+};
 const Card = ({ children, width = "full", variant = "shadow", interactive = false, ...rest }) => /* @__PURE__ */ jsx("div", {
 	...rest,
-	className: cn("rounded-xl", variant === "shadow" && "shadow-sm", variant === "outline" && "border border-border-mute", width === "full" && "w-full", width === "fit" && "w-fit", interactive && "motion-safe:transition-transform hover:motion-safe:scale-[1.02] active:motion-safe:scale-[0.98]", "bg-bg-base"),
+	className: clsx(card_module_default.root, VARIANT[variant], WIDTH[width], interactive && card_module_default.interactive),
 	children
 });
 //#endregion

package/dist/components/data-display/card/card.module.mjs

@@ -0,0 +1,12 @@
+import './card.css';
+//#region src/components/data-display/card/card.module.css
+var card_module_default = {
+	"fit": "v9O_zW_fit",
+	"full": "v9O_zW_full",
+	"interactive": "v9O_zW_interactive",
+	"outline": "v9O_zW_outline",
+	"root": "v9O_zW_root",
+	"shadow": "v9O_zW_shadow"
+};
+//#endregion
+export { card_module_default as default };

package/dist/components/data-display/carousel/carousel.css

@@ -0,0 +1,83 @@
+@layer properties, theme, base;
+
+@layer components {
+  .rJ_sGW_root {
+    gap: calc(var(--spacing) * 3);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .rJ_sGW_track {
+    gap: calc(var(--spacing) * 4);
+    overscroll-behavior-x: contain;
+    border-radius: var(--radius-lg);
+    padding: calc(var(--spacing) * 1);
+    scroll-snap-type: inline mandatory;
+    scrollbar-width: none;
+    scroll-padding-inline-start: calc(var(--spacing) * 1);
+    display: flex;
+    overflow: auto hidden;
+
+    @media (prefers-reduced-motion: no-preference) {
+      scroll-behavior: smooth;
+    }
+
+    @container style(--writing: vertical) {
+      overscroll-behavior-y: contain;
+      overflow: hidden auto;
+    }
+  }
+
+  .rJ_sGW_controls {
+    justify-content: center;
+    align-items: center;
+    gap: calc(var(--spacing) * 3);
+    display: flex;
+  }
+
+  .rJ_sGW_arrow {
+    display: inline-flex;
+
+    @container style(--writing: vertical) {
+      rotate: 90deg;
+    }
+  }
+
+  .rJ_sGW_position {
+    color: var(--color-fg-mute);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .rJ_sGW_current {
+    color: var(--color-fg-base);
+  }
+
+  .rJ_sGW_divider {
+    margin-inline: calc(var(--spacing) * 1);
+  }
+
+  .rJ_sGW_slide {
+    scroll-snap-align: start;
+    flex-shrink: 0;
+  }
+
+  .rJ_sGW_full {
+    flex-basis: 100%;
+  }
+
+  .rJ_sGW_lg {
+    flex-basis: 80%;
+  }
+
+  .rJ_sGW_md {
+    flex-basis: calc(50% - .5rem);
+  }
+
+  .rJ_sGW_sm {
+    flex-basis: calc(33.3333% - .666667rem);
+  }
+}
+
+@layer utilities;

package/dist/components/data-display/carousel/carousel.d.mts

@@ -0,0 +1,11 @@
+import { FC, PropsWithChildren } from "react";
+//#region src/components/data-display/carousel/carousel.d.ts
+type SlideSize = 'full' | 'lg' | 'md' | 'sm';
+export declare const Root: FC<PropsWithChildren<{
+  label: string;
+  slideSize?: SlideSize;
+}>>;
+export declare const Slide: FC<PropsWithChildren<{
+  label?: string;
+}>>;
+//#endregion

package/dist/components/data-display/carousel/carousel.mjs

@@ -0,0 +1,186 @@
+"use client";
+import { getMessages } from "../../../i18n/current.mjs";
+import focus_ring_module_default from "../../_internal/focus-ring.module.mjs";
+import { ChevronIcon } from "../../icons/lucide.mjs";
+import { readWritingMode } from "../../../hooks/writing-mode/index.mjs";
+import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
+import carousel_module_default from "./carousel.module.mjs";
+import { clsx } from "clsx";
+import { createContext, use, useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/data-display/carousel/carousel.tsx
+const SlideSizeContext = createContext("full");
+const SLIDE_SIZE = {
+	full: carousel_module_default.full,
+	lg: carousel_module_default.lg,
+	md: carousel_module_default.md,
+	sm: carousel_module_default.sm
+};
+const FULLY_VISIBLE = .95;
+const INITIAL_POSITION = {
+	current: 0,
+	count: 0,
+	isAtStart: true,
+	isAtEnd: true
+};
+const measure = (track) => {
+	const isVertical = readWritingMode(track) === "vertical";
+	const box = track.getBoundingClientRect();
+	const visibility = Array.from(track.children, (slide) => {
+		const rect = slide.getBoundingClientRect();
+		const [start, end, boxStart, boxEnd] = isVertical ? [
+			rect.top,
+			rect.bottom,
+			box.top,
+			box.bottom
+		] : [
+			rect.left,
+			rect.right,
+			box.left,
+			box.right
+		];
+		const size = end - start;
+		const overlap = Math.min(end, boxEnd) - Math.max(start, boxStart);
+		return size === 0 ? 0 : Math.max(0, overlap) / size;
+	});
+	return {
+		current: Math.max(0, visibility.indexOf(Math.max(...visibility))),
+		count: visibility.length,
+		isAtStart: (visibility[0] ?? 0) >= FULLY_VISIBLE,
+		isAtEnd: (visibility.at(-1) ?? 0) >= FULLY_VISIBLE
+	};
+};
+const useCarousel = (track) => {
+	const [position, setPosition] = useState(INITIAL_POSITION);
+	const targetRef = useRef(null);
+	useEffect(() => {
+		if (track === null) return void 0;
+		const intersection = new IntersectionObserver(() => {
+			setPosition(measure(track));
+		}, {
+			root: track,
+			threshold: [
+				0,
+				.5,
+				FULLY_VISIBLE
+			]
+		});
+		const observeSlides = () => {
+			targetRef.current = null;
+			intersection.disconnect();
+			for (const slide of track.children) intersection.observe(slide);
+		};
+		const settle = () => {
+			targetRef.current = null;
+		};
+		const mutation = new MutationObserver(observeSlides);
+		mutation.observe(track, { childList: true });
+		observeSlides();
+		track.addEventListener("scrollend", settle);
+		return () => {
+			track.removeEventListener("scrollend", settle);
+			mutation.disconnect();
+			intersection.disconnect();
+		};
+	}, [track]);
+	const step = (delta) => {
+		if (track === null) return;
+		const from = targetRef.current ?? measure(track).current;
+		const target = Math.min(Math.max(from + delta, 0), track.children.length - 1);
+		targetRef.current = target;
+		track.children[target]?.scrollIntoView({
+			block: "nearest",
+			inline: "start"
+		});
+	};
+	return {
+		position,
+		step
+	};
+};
+const Root = ({ label, slideSize = "full", children }) => {
+	const messages = getMessages();
+	const trackId = useId();
+	const [track, setTrack] = useState(null);
+	const { position: { current, count, isAtStart, isAtEnd }, step } = useCarousel(track);
+	const showsPosition = (slideSize === "full" || slideSize === "lg") && count > 0;
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": label,
+		"aria-roledescription": messages.carousel,
+		className: carousel_module_default.root,
+		children: [/* @__PURE__ */ jsx(SlideSizeContext, {
+			value: slideSize,
+			children: /* @__PURE__ */ jsx("div", {
+				className: clsx(carousel_module_default.track, focus_ring_module_default.ringNoBorder),
+				id: trackId,
+				ref: setTrack,
+				tabIndex: 0,
+				children
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: carousel_module_default.controls,
+			children: [
+				/* @__PURE__ */ jsx(IconButton, {
+					"aria-controls": trackId,
+					disabled: isAtStart,
+					label: messages.carouselPrevious,
+					onClick: () => {
+						step(-1);
+					},
+					size: "sm",
+					children: /* @__PURE__ */ jsx("span", {
+						className: carousel_module_default.arrow,
+						children: /* @__PURE__ */ jsx(ChevronIcon, {
+							direction: "left",
+							size: "sm"
+						})
+					})
+				}),
+				showsPosition ? /* @__PURE__ */ jsxs("p", {
+					"aria-live": "polite",
+					className: carousel_module_default.position,
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: carousel_module_default.current,
+							children: current + 1
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: carousel_module_default.divider,
+							children: "/"
+						}),
+						/* @__PURE__ */ jsx("span", { children: count })
+					]
+				}) : null,
+				/* @__PURE__ */ jsx(IconButton, {
+					"aria-controls": trackId,
+					disabled: isAtEnd,
+					label: messages.carouselNext,
+					onClick: () => {
+						step(1);
+					},
+					size: "sm",
+					children: /* @__PURE__ */ jsx("span", {
+						className: carousel_module_default.arrow,
+						children: /* @__PURE__ */ jsx(ChevronIcon, {
+							direction: "right",
+							size: "sm"
+						})
+					})
+				})
+			]
+		})]
+	});
+};
+const Slide = ({ label, children }) => {
+	const messages = getMessages();
+	const slideSize = use(SlideSizeContext);
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": label,
+		"aria-roledescription": messages.carouselSlide,
+		className: clsx(carousel_module_default.slide, SLIDE_SIZE[slideSize]),
+		role: "group",
+		children
+	});
+};
+//#endregion
+export { Root, Slide };

package/dist/components/data-display/carousel/carousel.module.mjs

@@ -0,0 +1,18 @@
+import './carousel.css';
+//#region src/components/data-display/carousel/carousel.module.css
+var carousel_module_default = {
+	"arrow": "rJ_sGW_arrow",
+	"controls": "rJ_sGW_controls",
+	"current": "rJ_sGW_current",
+	"divider": "rJ_sGW_divider",
+	"full": "rJ_sGW_full",
+	"lg": "rJ_sGW_lg",
+	"md": "rJ_sGW_md",
+	"position": "rJ_sGW_position",
+	"root": "rJ_sGW_root",
+	"slide": "rJ_sGW_slide",
+	"sm": "rJ_sGW_sm",
+	"track": "rJ_sGW_track"
+};
+//#endregion
+export { carousel_module_default as default };

package/dist/components/data-display/carousel/index.d.mts

@@ -0,0 +1,11 @@
+//#region src/components/data-display/carousel/index.d.ts
+export declare const Carousel: {
+  readonly Root: import("react").FC<import("react").PropsWithChildren<{
+    label: string;
+    slideSize?: "full" | "lg" | "md" | "sm";
+  }>>;
+  readonly Slide: import("react").FC<import("react").PropsWithChildren<{
+    label?: string;
+  }>>;
+};
+//#endregion

package/dist/components/data-display/carousel/index.mjs

@@ -0,0 +1,8 @@
+import { Root, Slide } from "./carousel.mjs";
+//#region src/components/data-display/carousel/index.ts
+const Carousel = {
+	Root,
+	Slide
+};
+//#endregion
+export { Carousel };

package/dist/components/data-display/code/code.css

@@ -0,0 +1,37 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._9ZZMOW_root {
+    margin: calc(var(--spacing) * .5);
+    border-radius: var(--radius-md);
+    background-color: var(--color-bg-mute);
+    padding-inline: calc(var(--spacing) * 1.5);
+
+    @media (width >= 40rem) {
+      padding-block: calc(var(--spacing) * .5);
+    }
+  }
+
+  ._9ZZMOW_withColors {
+    align-items: center;
+    gap: calc(var(--spacing) * 1);
+    display: inline-flex;
+
+    @container style(--writing: vertical) {
+      gap: 0;
+      display: inline;
+    }
+  }
+
+  ._9ZZMOW_swatch {
+    width: calc(var(--spacing) * 3);
+    height: calc(var(--spacing) * 3);
+    border: 1px solid var(--color-border-base);
+    border-radius: var(--radius-sm);
+    forced-color-adjust: none;
+    flex-shrink: 0;
+    display: inline-block;
+  }
+}
+
+@layer utilities;