@maanlamp/react-web-ui 0.0.0-stage → 0.1.1

package/dist/components/tabs/tabs.js

@@ -0,0 +1,194 @@
+import { useRequiredContext } from "../../lib/use-required-context.js";
+import { Badge } from "../badge/badge.js";
+import tabs_module_default from "./tabs.module.js";
+import { c } from "react/compiler-runtime";
+import { createContext } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Tabs } from "@base-ui/react/tabs";
+// src/components/tabs/tabs.tsx
+var TabsContext = createContext(null);
+var useTabs = () => {
+	return useRequiredContext(TabsContext, "Tabs parts must be rendered inside Tabs.Root.");
+};
+var Root = (t0) => {
+	const $ = c(13);
+	const { tabs, value, defaultValue, onValueChange, className, children } = t0;
+	let t1;
+	if ($[0] !== onValueChange) {
+		t1 = (next) => {
+			if (typeof next === "string") onValueChange?.(next);
+		};
+		$[0] = onValueChange;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== className) {
+		t2 = clsx(tabs_module_default.root, className);
+		$[2] = className;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== children || $[5] !== defaultValue || $[6] !== t1 || $[7] !== t2 || $[8] !== value) {
+		t3 = /* @__PURE__ */ jsx(Tabs.Root, {
+			value,
+			defaultValue,
+			onValueChange: t1,
+			className: t2,
+			children
+		});
+		$[4] = children;
+		$[5] = defaultValue;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = value;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== t3 || $[11] !== tabs) {
+		t4 = /* @__PURE__ */ jsx(TabsContext, {
+			value: tabs,
+			children: t3
+		});
+		$[10] = t3;
+		$[11] = tabs;
+		$[12] = t4;
+	} else t4 = $[12];
+	return t4;
+};
+var TabContent = (t0) => {
+	const $ = c(5);
+	const { tab } = t0;
+	let t1;
+	if ($[0] !== tab.count) {
+		t1 = tab.count === void 0 ? null : /* @__PURE__ */ jsx(Badge, {
+			tone: "neutral",
+			variant: "subtle",
+			children: tab.count
+		});
+		$[0] = tab.count;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== t1 || $[3] !== tab.label) {
+		t2 = /* @__PURE__ */ jsxs(Fragment$1, { children: [tab.label, t1] });
+		$[2] = t1;
+		$[3] = tab.label;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+};
+var Bar = (t0) => {
+	const $ = c(15);
+	const { "aria-label": label, className } = t0;
+	const tabs = useTabs();
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(tabs_module_default.scroller, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== tabs) {
+		t2 = tabs.map(_temp);
+		$[2] = tabs;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== tabs) {
+		t3 = tabs.map(_temp2);
+		$[4] = tabs;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Tabs.Indicator, {
+			className: tabs_module_default.indicator,
+			children: /* @__PURE__ */ jsx("span", {
+				className: tabs_module_default.indicatorLabels,
+				"aria-hidden": "true",
+				children: t3
+			})
+		});
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== label || $[9] !== t2 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Tabs.List, {
+			className: tabs_module_default.list,
+			"aria-label": label,
+			children: [t2, t4]
+		});
+		$[8] = label;
+		$[9] = t2;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t1 || $[13] !== t5) {
+		t6 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			children: t5
+		});
+		$[12] = t1;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	return t6;
+};
+var Panel = (t0) => {
+	const $ = c(6);
+	const { value, className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(tabs_module_default.panel, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== t1 || $[4] !== value) {
+		t2 = /* @__PURE__ */ jsx(Tabs.Panel, {
+			value,
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = t1;
+		$[4] = value;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+/**
+* In-page tabs over base-ui's `Tabs`: `Root` takes the tabs, `Bar` lays them
+* out with a pill that slides to the open one, and each `Panel` holds what its
+* tab opens. Tabs that lead to pages are a horizontal `Nav`.
+*
+* @example
+* <Tabs.Root tabs={[{ value: "details", label: "Details" }, { value: "history", label: "History", count: 3 }]} defaultValue="details">
+* 	<Tabs.Bar aria-label="Declaration" />
+* 	<Tabs.Panel value="details">…</Tabs.Panel>
+* 	<Tabs.Panel value="history">…</Tabs.Panel>
+* </Tabs.Root>
+*/
+var Tabs$1 = {
+	Root,
+	Bar,
+	Panel
+};
+function _temp(tab) {
+	return /* @__PURE__ */ jsx(Tabs.Tab, {
+		value: tab.value,
+		disabled: tab.disabled,
+		className: tabs_module_default.tab,
+		children: /* @__PURE__ */ jsx(TabContent, { tab })
+	}, tab.value);
+}
+function _temp2(tab_0) {
+	return /* @__PURE__ */ jsx("span", {
+		className: tabs_module_default.tab,
+		children: /* @__PURE__ */ jsx(TabContent, { tab: tab_0 })
+	}, tab_0.value);
+}
+export { Tabs$1 as Tabs };

package/dist/components/tabs/tabs.module.js

@@ -0,0 +1,18 @@
+import './tabs.css';// src/components/tabs/tabs.module.scss
+var root = "_root_3qlri_3";
+var scroller = "_scroller_3qlri_8";
+var list = "_list_3qlri_12";
+var tab = "_tab_3qlri_18";
+var indicator = "_indicator_3qlri_56";
+var indicatorLabels = "_indicatorLabels_3qlri_94";
+var panel = "_panel_3qlri_112";
+var tabs_module_default = {
+	root,
+	scroller,
+	list,
+	tab,
+	indicator,
+	indicatorLabels,
+	panel
+};
+export { tabs_module_default as default, indicator, indicatorLabels, list, panel, root, scroller, tab };

package/dist/components/tag/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./tag.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/tag/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tag/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/dist/components/tag/index.js

@@ -0,0 +1 @@
+export { Tag } from "./tag.js";

package/dist/components/tag/tag.css

@@ -0,0 +1,120 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._root_1lbu9_3[data-variant=subtle] {
+    --tag-bg: var(--sys-color-neutral-bg);
+    --tag-fg: var(--sys-color-neutral-fg);
+    --tag-border: transparent;
+  }
+  ._root_1lbu9_3[data-variant=solid] {
+    --tag-bg: var(--sys-color-neutral-fg);
+    --tag-fg: var(--sys-color-neutral-bg);
+    --tag-border: transparent;
+  }
+  ._root_1lbu9_3[data-variant=outline] {
+    --tag-bg: transparent;
+    --tag-fg: var(--sys-color-neutral-fg);
+    --tag-border: var(--sys-color-neutral-border);
+  }
+  ._root_1lbu9_3[data-tone=info][data-variant=subtle] {
+    --tag-bg: var(--sys-color-info-bg);
+    --tag-fg: var(--sys-color-info-fg);
+    --tag-border: transparent;
+  }
+  ._root_1lbu9_3[data-tone=info][data-variant=solid] {
+    --tag-bg: var(--sys-color-info-fg);
+    --tag-fg: var(--sys-color-info-bg);
+    --tag-border: transparent;
+  }
+  ._root_1lbu9_3[data-tone=info][data-variant=outline] {
+    --tag-bg: transparent;
+    --tag-fg: var(--sys-color-info-fg);
+    --tag-border: var(
+    	--sys-color-info-border
+    );
+  }
+  ._root_1lbu9_3[data-tone=success][data-variant=subtle] {
+    --tag-bg: var(--sys-color-success-bg);
+    --tag-fg: var(--sys-color-success-fg);
+    --tag-border: transparent;
+  }
+  ._root_1lbu9_3[data-tone=success][data-variant=solid] {
+    --tag-bg: var(--sys-color-success-fg);
+    --tag-fg: var(--sys-color-success-bg);
+    --tag-border: transparent;
+  }
+  ._root_1lbu9_3[data-tone=success][data-variant=outline] {
+    --tag-bg: transparent;
+    --tag-fg: var(--sys-color-success-fg);
+    --tag-border: var(
+    	--sys-color-success-border
+    );
+  }
+  ._root_1lbu9_3[data-tone=warning][data-variant=subtle] {
+    --tag-bg: var(--sys-color-warning-bg);
+    --tag-fg: var(--sys-color-warning-fg);
+    --tag-border: transparent;
+  }
+  ._root_1lbu9_3[data-tone=warning][data-variant=solid] {
+    --tag-bg: var(--sys-color-warning-fg);
+    --tag-fg: var(--sys-color-warning-bg);
+    --tag-border: transparent;
+  }
+  ._root_1lbu9_3[data-tone=warning][data-variant=outline] {
+    --tag-bg: transparent;
+    --tag-fg: var(--sys-color-warning-fg);
+    --tag-border: var(
+    	--sys-color-warning-border
+    );
+  }
+  ._root_1lbu9_3[data-tone=error][data-variant=subtle] {
+    --tag-bg: var(--sys-color-error-bg);
+    --tag-fg: var(--sys-color-error-fg);
+    --tag-border: transparent;
+  }
+  ._root_1lbu9_3[data-tone=error][data-variant=solid] {
+    --tag-bg: var(--sys-color-error-fg);
+    --tag-fg: var(--sys-color-error-bg);
+    --tag-border: transparent;
+  }
+  ._root_1lbu9_3[data-tone=error][data-variant=outline] {
+    --tag-bg: transparent;
+    --tag-fg: var(--sys-color-error-fg);
+    --tag-border: var(
+    	--sys-color-error-border
+    );
+  }
+  ._root_1lbu9_3 {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sys-unit-3);
+    box-sizing: border-box;
+    min-block-size: var(--sys-unit-14);
+    border: 1px solid var(--tag-border);
+    border-radius: var(--sys-radius-full);
+    background: var(--tag-bg);
+    padding: var(--sys-unit-2) var(--sys-unit-6);
+    color: var(--tag-fg);
+    font: var(--sys-font-label-small);
+  }
+  ._root_1lbu9_3 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._root_1lbu9_3:focus-visible {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  ._root_1lbu9_3[data-focus-visible] {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  ._dot_1lbu9_109 {
+    flex-shrink: 0;
+    inline-size: var(--sys-unit-3);
+    block-size: var(--sys-unit-3);
+    border-radius: var(--sys-radius-circle);
+    background: currentcolor;
+  }
+  ._icon_1lbu9_116 {
+    flex-shrink: 0;
+    margin-inline-start: calc(-1 * var(--sys-unit-1));
+  }
+}

package/dist/components/tag/tag.d.ts

@@ -0,0 +1,37 @@
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { Tone, ToneVariant } from "../../lib/tone.ts";
+import { type SvgComponent } from "../icon/icon.tsx";
+export type TagRootProps = ComponentPropsWithRef<"span"> & Readonly<{
+    /** Status colour. @default "neutral" */
+    tone?: Tone;
+    /** @default "subtle" */
+    variant?: ToneVariant;
+    children: ReactNode;
+}>;
+declare const Root: ({ tone, variant, className, children, ...props }: TagRootProps) => ReactNode;
+export type TagDotProps = ComponentPropsWithRef<"span">;
+declare const Dot: ({ className, ...props }: TagDotProps) => ReactNode;
+export type TagIconProps = Readonly<{
+    /** The glyph, from a SVGR `?react` import. */
+    svg: SvgComponent;
+    className?: string;
+}>;
+declare const TagIcon: ({ svg, className, }: TagIconProps) => ReactNode;
+type TagParts = Readonly<{
+    Root: typeof Root;
+    Dot: typeof Dot;
+    Icon: typeof TagIcon;
+}>;
+/**
+ * A static fact as a pill in a status `tone` and `variant`, leading with at
+ * most one indicator: `Dot` or `Icon`. A removable tag is a `TagGroup.Tag`.
+ *
+ * @example
+ * <Tag.Root tone="info">
+ * 	<Tag.Dot />
+ * 	Outstanding
+ * </Tag.Root>
+ */
+export declare const Tag: TagParts;
+export {};
+//# sourceMappingURL=tag.d.ts.map

package/dist/components/tag/tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/tag.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACX,qBAAqB,EACrB,SAAS,EACT,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAQ,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAG3D,MAAM,MAAM,YAAY,GAAG,qBAAqB,CAAC,MAAM,CAAC,GACvD,QAAQ,CAAC;IACR,wCAAwC;IACxC,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,wBAAwB;IACxB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;CACpB,CAAC,CAAC;AAEJ,QAAA,MAAM,IAAI,qDAMP,YAAY,KAAG,SAQjB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAC;AAExD,QAAA,MAAM,GAAG,4BAGN,WAAW,KAAG,SAMhB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;IACnC,8CAA8C;IAC9C,GAAG,EAAE,YAAY,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH,QAAA,MAAM,OAAO,wBAGV,YAAY,KAAG,SAMjB,CAAC;AAEF,KAAK,QAAQ,GAAG,QAAQ,CAAC;IACxB,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,GAAG,EAAE,OAAO,GAAG,CAAC;IAChB,IAAI,EAAE,OAAO,OAAO,CAAC;CACrB,CAAC,CAAC;AAEH;;;;;;;;;GASG;AACH,eAAO,MAAM,GAAG,EAAE,QAIjB,CAAC"}

package/dist/components/tag/tag.js

@@ -0,0 +1,124 @@
+import { Icon } from "../icon/icon.js";
+import tag_module_default from "./tag.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+// src/components/tag/tag.tsx
+var Root = (t0) => {
+	const $ = c(14);
+	let children;
+	let className;
+	let props;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({tone: t1, variant: t2, className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		t1 = $[4];
+		t2 = $[5];
+	}
+	const tone = t1 === void 0 ? "neutral" : t1;
+	const variant = t2 === void 0 ? "subtle" : t2;
+	let t3;
+	if ($[6] !== className) {
+		t3 = clsx(tag_module_default.root, className);
+		$[6] = className;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== children || $[9] !== props || $[10] !== t3 || $[11] !== tone || $[12] !== variant) {
+		t4 = /* @__PURE__ */ jsx("span", {
+			"data-tone": tone,
+			"data-variant": variant,
+			className: t3,
+			...props,
+			children
+		});
+		$[8] = children;
+		$[9] = props;
+		$[10] = t3;
+		$[11] = tone;
+		$[12] = variant;
+		$[13] = t4;
+	} else t4 = $[13];
+	return t4;
+};
+var Dot = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(tag_module_default.dot, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var TagIcon = (t0) => {
+	const $ = c(5);
+	const { svg, className } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(tag_module_default.icon, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== svg || $[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Icon, {
+			svg,
+			label: "",
+			className: t1
+		});
+		$[2] = svg;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+};
+/**
+* A static fact as a pill in a status `tone` and `variant`, leading with at
+* most one indicator: `Dot` or `Icon`. A removable tag is a `TagGroup.Tag`.
+*
+* @example
+* <Tag.Root tone="info">
+* 	<Tag.Dot />
+* 	Outstanding
+* </Tag.Root>
+*/
+var Tag = {
+	Root,
+	Dot,
+	Icon: TagIcon
+};
+export { Tag };

package/dist/components/tag/tag.module.js

@@ -0,0 +1,10 @@
+import './tag.css';// src/components/tag/tag.module.scss
+var root = "_root_1lbu9_3";
+var dot = "_dot_1lbu9_109";
+var icon = "_icon_1lbu9_116";
+var tag_module_default = {
+	root,
+	dot,
+	icon
+};
+export { tag_module_default as default, dot, icon, root };

package/dist/components/tag-group/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./tag-group.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/tag-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tag-group/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/dist/components/tag-group/index.js

@@ -0,0 +1 @@
+export { TagGroup } from "./tag-group.js";

package/dist/components/tag-group/tag-group.css

@@ -0,0 +1,155 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._root_siv3m_3 {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--tag-group-gap, var(--sys-unit-4));
+  }
+  ._list_siv3m_9 {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--tag-group-gap, var(--sys-unit-4));
+  }
+  ._tag_siv3m_15[data-variant=subtle] {
+    --tag-bg: var(--sys-color-neutral-bg);
+    --tag-fg: var(--sys-color-neutral-fg);
+    --tag-border: transparent;
+  }
+  ._tag_siv3m_15[data-variant=solid] {
+    --tag-bg: var(--sys-color-neutral-fg);
+    --tag-fg: var(--sys-color-neutral-bg);
+    --tag-border: transparent;
+  }
+  ._tag_siv3m_15[data-variant=outline] {
+    --tag-bg: transparent;
+    --tag-fg: var(--sys-color-neutral-fg);
+    --tag-border: var(--sys-color-neutral-border);
+  }
+  ._tag_siv3m_15[data-tone=info][data-variant=subtle] {
+    --tag-bg: var(--sys-color-info-bg);
+    --tag-fg: var(--sys-color-info-fg);
+    --tag-border: transparent;
+  }
+  ._tag_siv3m_15[data-tone=info][data-variant=solid] {
+    --tag-bg: var(--sys-color-info-fg);
+    --tag-fg: var(--sys-color-info-bg);
+    --tag-border: transparent;
+  }
+  ._tag_siv3m_15[data-tone=info][data-variant=outline] {
+    --tag-bg: transparent;
+    --tag-fg: var(--sys-color-info-fg);
+    --tag-border: var(
+    	--sys-color-info-border
+    );
+  }
+  ._tag_siv3m_15[data-tone=success][data-variant=subtle] {
+    --tag-bg: var(--sys-color-success-bg);
+    --tag-fg: var(--sys-color-success-fg);
+    --tag-border: transparent;
+  }
+  ._tag_siv3m_15[data-tone=success][data-variant=solid] {
+    --tag-bg: var(--sys-color-success-fg);
+    --tag-fg: var(--sys-color-success-bg);
+    --tag-border: transparent;
+  }
+  ._tag_siv3m_15[data-tone=success][data-variant=outline] {
+    --tag-bg: transparent;
+    --tag-fg: var(--sys-color-success-fg);
+    --tag-border: var(
+    	--sys-color-success-border
+    );
+  }
+  ._tag_siv3m_15[data-tone=warning][data-variant=subtle] {
+    --tag-bg: var(--sys-color-warning-bg);
+    --tag-fg: var(--sys-color-warning-fg);
+    --tag-border: transparent;
+  }
+  ._tag_siv3m_15[data-tone=warning][data-variant=solid] {
+    --tag-bg: var(--sys-color-warning-fg);
+    --tag-fg: var(--sys-color-warning-bg);
+    --tag-border: transparent;
+  }
+  ._tag_siv3m_15[data-tone=warning][data-variant=outline] {
+    --tag-bg: transparent;
+    --tag-fg: var(--sys-color-warning-fg);
+    --tag-border: var(
+    	--sys-color-warning-border
+    );
+  }
+  ._tag_siv3m_15[data-tone=error][data-variant=subtle] {
+    --tag-bg: var(--sys-color-error-bg);
+    --tag-fg: var(--sys-color-error-fg);
+    --tag-border: transparent;
+  }
+  ._tag_siv3m_15[data-tone=error][data-variant=solid] {
+    --tag-bg: var(--sys-color-error-fg);
+    --tag-fg: var(--sys-color-error-bg);
+    --tag-border: transparent;
+  }
+  ._tag_siv3m_15[data-tone=error][data-variant=outline] {
+    --tag-bg: transparent;
+    --tag-fg: var(--sys-color-error-fg);
+    --tag-border: var(
+    	--sys-color-error-border
+    );
+  }
+  ._tag_siv3m_15 {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sys-unit-3);
+    box-sizing: border-box;
+    min-block-size: var(--sys-unit-14);
+    border: 1px solid var(--tag-border);
+    border-radius: var(--sys-radius-full);
+    background: var(--tag-bg);
+    padding: var(--sys-unit-2) var(--sys-unit-6);
+    color: var(--tag-fg);
+    font: var(--sys-font-label-small);
+  }
+  ._tag_siv3m_15 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._tag_siv3m_15:focus-visible {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  ._tag_siv3m_15[data-focus-visible] {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  ._remove_siv3m_121 {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--sys-unit-10);
+    block-size: var(--sys-unit-10);
+    margin-block: calc(-1 * var(--sys-unit-1));
+    margin-inline-start: var(--sys-unit-1);
+    margin-inline-end: calc(-1 * var(--sys-unit-2));
+    border: 0;
+    border-radius: var(--sys-radius-circle);
+    background: none;
+    padding: 0;
+    color: inherit;
+  }
+  ._remove_siv3m_121 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._remove_siv3m_121:focus-visible {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  @media not (prefers-reduced-motion) {
+    ._remove_siv3m_121 {
+      transition: background var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._remove_siv3m_121:hover {
+    background: color-mix(in oklch, currentcolor calc(var(--sys-state-hover) * 100%), transparent);
+  }
+  ._remove_siv3m_121:active {
+    background: color-mix(in oklch, currentcolor calc(var(--sys-state-pressed) * 100%), transparent);
+  }
+}