@k8ordo/ui 1.0.0 → 2.1.0

package/dist/components/navigation/anchor/anchor.module.mjs

@@ -0,0 +1,8 @@
+import './anchor.css';
+//#region src/components/navigation/anchor/anchor.module.css
+var anchor_module_default = {
+	"external": "_7nx_2W_external",
+	"root": "_7nx_2W_root"
+};
+//#endregion
+export { anchor_module_default as default };

package/dist/components/navigation/breadcrumb/breadcrumb.css

@@ -0,0 +1,72 @@
+@layer properties, theme, base;
+
+@layer components {
+  .pX7MyW_list {
+    align-items: center;
+    gap: calc(var(--spacing) * 1);
+    color: var(--color-fg-mute);
+    list-style-type: none;
+    display: flex;
+  }
+
+  .pX7MyW_sm {
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-xs);
+  }
+
+  .pX7MyW_md {
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-xs);
+
+    @media (width >= 48rem) {
+      font-size: var(--font-size-md);
+      line-height: var(--line-height-md);
+    }
+  }
+
+  .pX7MyW_lg {
+    font-size: var(--font-size-xl);
+    line-height: var(--line-height-xl);
+
+    @media (width >= 48rem) {
+      font-size: var(--font-size-2xl);
+      line-height: var(--line-height-2xl);
+    }
+  }
+
+  .pX7MyW_item {
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .pX7MyW_separator {
+    color: var(--color-fg-mute);
+
+    @container style(--writing: vertical) {
+      rotate: 90deg;
+    }
+  }
+
+  .pX7MyW_current {
+    color: var(--color-fg-base);
+  }
+
+  .pX7MyW_link {
+    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);
+    text-decoration-line: underline;
+  }
+
+  @media (hover: hover) {
+    .pX7MyW_link:hover {
+      color: var(--color-fg-base);
+    }
+  }
+
+  .pX7MyW_link:focus-visible {
+    border-radius: var(--radius-sm);
+  }
+}
+
+@layer utilities;

package/dist/components/navigation/breadcrumb/breadcrumb.d.mts

@@ -1,19 +1,18 @@
 import { FC, PropsWithChildren, ReactNode } from "react";
 //#region src/components/navigation/breadcrumb/breadcrumb.d.ts
-declare const List: FC<PropsWithChildren<{
+export declare const List: FC<PropsWithChildren<{
   size?: 'sm' | 'md' | 'lg';
 }>>;
-declare const Item: FC<PropsWithChildren>;
-declare const Separator: FC;
+export declare const Item: FC<PropsWithChildren>;
+export declare const Separator: FC;
 type RenderBreadcrumbAnchorProps<T extends string> = {
   href: NoInfer<T>;
   className: string;
   children: ReactNode;
 };
-declare const Link: <T extends string>({ href, current, children, renderAnchor }: PropsWithChildren<{
+export declare const Link: <T extends string>({ href, current, children, renderAnchor }: PropsWithChildren<{
   href: T;
   current?: boolean;
   renderAnchor?: (props: RenderBreadcrumbAnchorProps<T>) => ReactNode;
 }>) => string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
-//#endregion
-export { Item, Link, List, Separator };
+//#endregion

package/dist/components/navigation/breadcrumb/breadcrumb.mjs

@@ -1,26 +1,32 @@
-"use client";
-import { cn } from "../../../helpers/cn.mjs";
-import { useMessages } from "../../../i18n/context.mjs";
+import { getMessages } from "../../../i18n/current.mjs";
+import focus_ring_module_default from "../../_internal/focus-ring.module.mjs";
 import { ChevronIcon } from "../../icons/lucide.mjs";
+import breadcrumb_module_default from "./breadcrumb.module.mjs";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/navigation/breadcrumb/breadcrumb.tsx
+const SIZE = {
+	sm: breadcrumb_module_default.sm,
+	md: breadcrumb_module_default.md,
+	lg: breadcrumb_module_default.lg
+};
 const List = ({ children, size = "md" }) => {
-	const messages = useMessages();
+	const messages = getMessages();
 	return /* @__PURE__ */ jsx("nav", {
 		"aria-label": messages.breadcrumb,
 		children: /* @__PURE__ */ jsx("ol", {
-			className: cn("flex list-none items-center gap-1 text-fg-mute", size === "sm" && "text-xs", size === "md" && "text-xs md:text-md", size === "lg" && "text-xl md:text-2xl"),
+			className: clsx(breadcrumb_module_default.list, SIZE[size]),
 			children
 		})
 	});
 };
 const Item = ({ children }) => /* @__PURE__ */ jsx("li", {
-	className: "inline-flex items-center",
+	className: breadcrumb_module_default.item,
 	children
 });
 const Separator = () => /* @__PURE__ */ jsx("li", {
 	"aria-hidden": "true",
-	className: "text-fg-mute vertical:rotate-90",
+	className: breadcrumb_module_default.separator,
 	children: /* @__PURE__ */ jsx(ChevronIcon, {
 		direction: "right",
 		size: "sm"
@@ -32,11 +38,11 @@ const defaultRenderBreadcrumbAnchor = ({ children, ...rest }) => /* @__PURE__ */
 });
 const Link = ({ href, current = false, children, renderAnchor = defaultRenderBreadcrumbAnchor }) => current ? /* @__PURE__ */ jsx("span", {
 	"aria-current": "page",
-	className: "text-fg-base",
+	className: breadcrumb_module_default.current,
 	children
 }) : renderAnchor({
 	href,
-	className: "hover:text-fg-base focus-visible:ring-border-info underline transition-colors focus-visible:rounded-sm focus-visible:ring-2 focus-visible:outline-hidden",
+	className: clsx(breadcrumb_module_default.link, focus_ring_module_default.ringNoBorder),
 	children
 });
 //#endregion

package/dist/components/navigation/breadcrumb/breadcrumb.module.mjs

@@ -0,0 +1,14 @@
+import './breadcrumb.css';
+//#region src/components/navigation/breadcrumb/breadcrumb.module.css
+var breadcrumb_module_default = {
+	"current": "pX7MyW_current",
+	"item": "pX7MyW_item",
+	"lg": "pX7MyW_lg",
+	"link": "pX7MyW_link",
+	"list": "pX7MyW_list",
+	"md": "pX7MyW_md",
+	"separator": "pX7MyW_separator",
+	"sm": "pX7MyW_sm"
+};
+//#endregion
+export { breadcrumb_module_default as default };

package/dist/components/navigation/breadcrumb/index.d.mts

@@ -1,6 +1,6 @@
 import { Link } from "./breadcrumb.mjs";
 //#region src/components/navigation/breadcrumb/index.d.ts
-declare const Breadcrumb: {
+export declare const Breadcrumb: {
   readonly List: import("react").FC<import("react").PropsWithChildren<{
     size?: 'sm' | 'md' | 'lg';
   }>>;
@@ -10,5 +10,4 @@ declare const Breadcrumb: {
   readonly Separator: import("react").FC;
   readonly Link: typeof Link;
 };
-//#endregion
-export { Breadcrumb };
+//#endregion

package/dist/components/navigation/pagination/pagination.css

@@ -0,0 +1,36 @@
+@layer properties, theme, base;
+
+@layer components {
+  .LBG7cW_row {
+    justify-content: center;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    display: flex;
+  }
+
+  .LBG7cW_chevron {
+    display: inline-flex;
+
+    @container style(--writing: vertical) {
+      rotate: 90deg;
+    }
+  }
+
+  .LBG7cW_status {
+    padding-inline: calc(var(--spacing) * 3);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-variant-numeric: tabular-nums;
+    color: var(--color-fg-mute);
+  }
+
+  .LBG7cW_current {
+    color: var(--color-fg-base);
+  }
+
+  .LBG7cW_slash {
+    margin-inline: calc(var(--spacing) * 1);
+  }
+}
+
+@layer utilities;

package/dist/components/navigation/pagination/pagination.d.mts

@@ -10,6 +10,5 @@ type Props = {
   'aria-label'?: string;
   ref?: Ref<HTMLElement>;
 } & Omit<HTMLAttributes<HTMLElement>, 'className' | 'style' | 'onChange' | 'children'>;
-declare const Pagination: FC<Props>;
-//#endregion
-export { Pagination };
+export declare const Pagination: FC<Props>;
+//#endregion

package/dist/components/navigation/pagination/pagination.mjs

@@ -1,11 +1,12 @@
 "use client";
-import { useMessages } from "../../../i18n/context.mjs";
+import { getMessages } from "../../../i18n/current.mjs";
 import { Button } from "../../buttons/button/button.mjs";
 import { ChevronIcon } from "../../icons/lucide.mjs";
+import pagination_module_default from "./pagination.module.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/navigation/pagination/pagination.tsx
 const Pagination = ({ totalPages, currentPage, onChange, disabled = false, prevLabel, nextLabel, "aria-label": ariaLabel, ref, ...rest }) => {
-	const messages = useMessages();
+	const messages = getMessages();
 	const safeTotal = Math.max(1, totalPages);
 	const safeCurrent = Math.min(Math.max(1, currentPage), safeTotal);
 	const isFirst = safeCurrent <= 1;
@@ -15,7 +16,7 @@ const Pagination = ({ totalPages, currentPage, onChange, disabled = false, prevL
 		"aria-label": ariaLabel ?? messages.paginationLabel,
 		ref,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center justify-center gap-2",
+			className: pagination_module_default.row,
 			children: [
 				/* @__PURE__ */ jsx(Button, {
 					color: "base",
@@ -25,7 +26,7 @@ const Pagination = ({ totalPages, currentPage, onChange, disabled = false, prevL
 					},
 					size: "sm",
 					startIcon: /* @__PURE__ */ jsx("span", {
-						className: "vertical:rotate-90 inline-flex",
+						className: pagination_module_default.chevron,
 						children: /* @__PURE__ */ jsx(ChevronIcon, {
 							direction: "left",
 							size: "sm"
@@ -36,14 +37,14 @@ const Pagination = ({ totalPages, currentPage, onChange, disabled = false, prevL
 				}),
 				/* @__PURE__ */ jsxs("p", {
 					"aria-live": "polite",
-					className: "text-fg-mute px-3 text-sm tabular-nums",
+					className: pagination_module_default.status,
 					children: [
 						/* @__PURE__ */ jsx("span", {
-							className: "text-fg-base",
+							className: pagination_module_default.current,
 							children: safeCurrent
 						}),
 						/* @__PURE__ */ jsx("span", {
-							className: "mx-1",
+							className: pagination_module_default.slash,
 							children: "/"
 						}),
 						/* @__PURE__ */ jsx("span", { children: safeTotal })
@@ -53,7 +54,7 @@ const Pagination = ({ totalPages, currentPage, onChange, disabled = false, prevL
 					color: "base",
 					disabled: disabled || isLast,
 					endIcon: /* @__PURE__ */ jsx("span", {
-						className: "vertical:rotate-90 inline-flex",
+						className: pagination_module_default.chevron,
 						children: /* @__PURE__ */ jsx(ChevronIcon, {
 							direction: "right",
 							size: "sm"

package/dist/components/navigation/pagination/pagination.module.mjs

@@ -0,0 +1,11 @@
+import './pagination.css';
+//#region src/components/navigation/pagination/pagination.module.css
+var pagination_module_default = {
+	"chevron": "LBG7cW_chevron",
+	"current": "LBG7cW_current",
+	"row": "LBG7cW_row",
+	"slash": "LBG7cW_slash",
+	"status": "LBG7cW_status"
+};
+//#endregion
+export { pagination_module_default as default };

package/dist/components/navigation/side-nav/index.d.mts

@@ -0,0 +1,16 @@
+import { Link } from "./side-nav.mjs";
+//#region src/components/navigation/side-nav/index.d.ts
+export declare const SideNav: {
+  readonly Root: import("react").FC<import("react").PropsWithChildren<{
+    label: string;
+  } & Omit<import("react").HTMLAttributes<HTMLElement>, "aria-label" | "children" | "className" | "style">>>;
+  readonly Group: import("react").FC<import("react").PropsWithChildren<{
+    title: string;
+  }>>;
+  readonly Sub: import("react").FC<import("react").PropsWithChildren<{
+    title: string;
+    defaultOpen?: boolean;
+  }>>;
+  readonly Link: typeof Link;
+};
+//#endregion

package/dist/components/navigation/side-nav/index.mjs

@@ -0,0 +1,10 @@
+import { Group, Link, Root, Sub } from "./side-nav.mjs";
+//#region src/components/navigation/side-nav/index.ts
+const SideNav = {
+	Root,
+	Group,
+	Sub,
+	Link
+};
+//#endregion
+export { SideNav };

package/dist/components/navigation/side-nav/side-nav.css

@@ -0,0 +1,73 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._2RqvcG_root {
+    gap: calc(var(--spacing) * 6);
+    flex-direction: column;
+    display: flex;
+  }
+
+  ._2RqvcG_group {
+    gap: calc(var(--spacing) * 1);
+    flex-direction: column;
+    display: flex;
+  }
+
+  ._2RqvcG_summary {
+    cursor: pointer;
+    align-items: center;
+    gap: calc(var(--spacing) * 1.5);
+    border-inline-start-width: 2px;
+    padding-block: calc(var(--spacing) * 1.5);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    color: var(--color-fg-mute);
+    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-color: #0000;
+    margin-inline-start: -1px;
+    padding-inline-start: calc(var(--spacing) * 4);
+    padding-inline-end: calc(var(--spacing) * 3);
+    list-style-type: none;
+    display: flex;
+  }
+
+  ._2RqvcG_summary::-webkit-details-marker {
+    display: none;
+  }
+
+  @media (hover: hover) {
+    ._2RqvcG_summary:hover {
+      border-color: var(--color-border-emphasize);
+      color: var(--color-fg-base);
+    }
+  }
+
+  ._2RqvcG_summary:focus-visible {
+    box-shadow: var(--shadow-ring-inset-info);
+    outline-style: none;
+
+    @media (forced-colors: active) {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+
+  ._2RqvcG_chevron {
+    transition-property: transform, translate, scale, rotate;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-out);
+    display: flex;
+  }
+
+  ._2RqvcG_chevron:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    scale: -1 1;
+  }
+
+  ._2RqvcG_sub[open] ._2RqvcG_chevron {
+    rotate: 90deg;
+  }
+}
+
+@layer utilities;

package/dist/components/navigation/side-nav/side-nav.d.mts

@@ -0,0 +1,31 @@
+import { AnchorHTMLAttributes, FC, HTMLAttributes, PropsWithChildren, ReactNode } from "react";
+//#region src/components/navigation/side-nav/side-nav.d.ts
+type RestProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'children' | 'className' | 'style' | 'aria-current'>;
+type RenderSideNavAnchorProps<T extends string> = {
+  href: NoInfer<T>;
+  className: string;
+  children: ReactNode;
+  'aria-current': 'page' | undefined;
+} & RestProps;
+export declare const Root: FC<PropsWithChildren<{
+  label: string;
+} & Omit<HTMLAttributes<HTMLElement>, 'className' | 'style' | 'aria-label' | 'children'>>>;
+export declare const Group: FC<PropsWithChildren<{
+  title: string;
+}>>;
+export declare const Link: <T extends string>({ href, current, children, renderAnchor, ...rest }: {
+  href: T;
+  current?: boolean;
+  children: ReactNode;
+  renderAnchor?: (props: RenderSideNavAnchorProps<T>) => ReactNode;
+} & RestProps) => import("react").JSX.Element;
+/**
+ * A group inside a group that opens and closes — a level of the tree. It is a
+ * `<details>`, so it works before hydration and without JavaScript; open the
+ * one holding the current page with `defaultOpen`.
+ */
+export declare const Sub: FC<PropsWithChildren<{
+  title: string;
+  defaultOpen?: boolean;
+}>>;
+//#endregion

package/dist/components/navigation/side-nav/side-nav.mjs

@@ -0,0 +1,62 @@
+import { ChevronIcon } from "../../icons/lucide.mjs";
+import { NAV_LIST_CLASS_NAME, NAV_TITLE_CLASS_NAME, navLinkClassName } from "../../_internal/nav-link.mjs";
+import side_nav_module_default from "./side-nav.module.mjs";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/navigation/side-nav/side-nav.tsx
+const defaultRenderAnchor = ({ children, ...rest }) => /* @__PURE__ */ jsx("a", {
+	...rest,
+	children
+});
+const Root = ({ label, children, ...rest }) => /* @__PURE__ */ jsx("nav", {
+	...rest,
+	"aria-label": label,
+	className: side_nav_module_default.root,
+	children
+});
+const Group = ({ title, children }) => {
+	const titleId = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		className: side_nav_module_default.group,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: NAV_TITLE_CLASS_NAME,
+			id: titleId,
+			children: title
+		}), /* @__PURE__ */ jsx("ul", {
+			"aria-labelledby": titleId,
+			className: NAV_LIST_CLASS_NAME,
+			children
+		})]
+	});
+};
+const Link = ({ href, current = false, children, renderAnchor = defaultRenderAnchor, ...rest }) => /* @__PURE__ */ jsx("li", { children: renderAnchor({
+	...rest,
+	href,
+	children,
+	"aria-current": current ? "page" : void 0,
+	className: navLinkClassName(current)
+}) });
+/**
+* A group inside a group that opens and closes — a level of the tree. It is a
+* `<details>`, so it works before hydration and without JavaScript; open the
+* one holding the current page with `defaultOpen`.
+*/
+const Sub = ({ title, defaultOpen = false, children }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("details", {
+	className: side_nav_module_default.sub,
+	open: defaultOpen,
+	children: [/* @__PURE__ */ jsxs("summary", {
+		className: side_nav_module_default.summary,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: side_nav_module_default.chevron,
+			children: /* @__PURE__ */ jsx(ChevronIcon, {
+				direction: "right",
+				size: "sm"
+			})
+		}), title]
+	}), /* @__PURE__ */ jsx("ul", {
+		className: NAV_LIST_CLASS_NAME,
+		children
+	})]
+}) });
+//#endregion
+export { Group, Link, Root, Sub };

package/dist/components/navigation/side-nav/side-nav.module.mjs

@@ -0,0 +1,11 @@
+import './side-nav.css';
+//#region src/components/navigation/side-nav/side-nav.module.css
+var side_nav_module_default = {
+	"chevron": "_2RqvcG_chevron",
+	"group": "_2RqvcG_group",
+	"root": "_2RqvcG_root",
+	"sub": "_2RqvcG_sub",
+	"summary": "_2RqvcG_summary"
+};
+//#endregion
+export { side_nav_module_default as default };

package/dist/components/navigation/stepper/index.d.mts

@@ -0,0 +1,2 @@
+import { Stepper, StepperStep } from "./stepper.mjs";
+export { Stepper, type StepperStep };

package/dist/components/navigation/stepper/index.mjs

@@ -0,0 +1,2 @@
+import { Stepper } from "./stepper.mjs";
+export { Stepper };

package/dist/components/navigation/stepper/stepper.css

@@ -0,0 +1,151 @@
+@layer properties, theme, base;
+
+@layer components {
+  .WjZwvW_root {
+    gap: calc(var(--spacing) * 2);
+    display: flex;
+  }
+
+  .WjZwvW_rootVertical {
+    flex-direction: column;
+  }
+
+  .WjZwvW_rootHorizontal {
+    align-items: flex-start;
+    inline-size: 100%;
+  }
+
+  .WjZwvW_item {
+    flex-direction: column;
+    display: flex;
+  }
+
+  .WjZwvW_itemVertical {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  .WjZwvW_itemHorizontal {
+    flex: 1;
+    position: relative;
+  }
+
+  .WjZwvW_marker {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+    border-radius: var(--radius-full);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: var(--font-weight-bold);
+    font-variant-numeric: tabular-nums;
+    border-width: 2px;
+    flex-shrink: 0;
+    place-items: center;
+    display: grid;
+  }
+
+  .WjZwvW_markerComplete {
+    background-color: var(--color-primary-fg);
+    color: var(--color-fg-inverse);
+    border-color: #0000;
+
+    @media (forced-colors: active) {
+      background-color: var(--color-system-highlight);
+      color: var(--color-system-highlight-text);
+    }
+  }
+
+  .WjZwvW_markerCurrent {
+    border-color: var(--color-primary-border);
+    color: var(--color-primary-fg);
+  }
+
+  .WjZwvW_markerUpcoming {
+    border-color: var(--color-border-base);
+    color: var(--color-fg-mute);
+  }
+
+  .WjZwvW_connector {
+    border-radius: var(--radius-full);
+    background-color: var(--color-border-base);
+  }
+
+  .WjZwvW_connectorComplete {
+    background-color: var(--color-primary-fg);
+  }
+
+  @media (forced-colors: active) {
+    .WjZwvW_connector {
+      background-color: var(--color-system-canvas-text);
+    }
+  }
+
+  .WjZwvW_connectorVertical {
+    min-block-size: calc(var(--spacing) * 4);
+    inline-size: calc(var(--spacing) * .5);
+    align-self: stretch;
+    margin-inline-start: calc(var(--spacing) * 3.75);
+  }
+
+  .WjZwvW_connectorHorizontal {
+    block-size: calc(var(--spacing) * .5);
+    position: absolute;
+    inset-block-start: calc(var(--spacing) * 4 - 1px);
+    inset-inline-start: calc(var(--spacing) * 10);
+    inset-inline-end: 0;
+  }
+
+  .WjZwvW_text {
+    text-align: start;
+    flex-direction: column;
+    display: flex;
+  }
+
+  .WjZwvW_label {
+    font-weight: var(--font-weight-medium);
+  }
+
+  .WjZwvW_labelUpcoming {
+    color: var(--color-fg-mute);
+  }
+
+  .WjZwvW_description {
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    color: var(--color-fg-mute);
+  }
+
+  .WjZwvW_body {
+    gap: calc(var(--spacing) * 2);
+    display: flex;
+  }
+
+  .WjZwvW_bodyVertical {
+    align-items: center;
+  }
+
+  .WjZwvW_bodyHorizontal {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .WjZwvW_interactive {
+    margin: calc(var(--spacing) * -2);
+    border-radius: var(--radius-lg);
+    padding: calc(var(--spacing) * 2);
+    align-self: flex-start;
+  }
+
+  .WjZwvW_button {
+    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);
+  }
+
+  @media (hover: hover) {
+    .WjZwvW_button:hover {
+      background-color: var(--color-bg-subtle);
+    }
+  }
+}
+
+@layer utilities;