@jonmilner/ui 0.5.1 → 0.5.3

package/dist/AlertDialog/client.mjs

@@ -0,0 +1,16 @@
+"use client";
+import { PopupScope as e, useRecordOpenChange as t } from "../popup/client.mjs";
+import { AlertDialog as n } from "@base-ui/react/alert-dialog";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/AlertDialog/client.tsx
+function i(t) {
+	return /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(a, { ...t }) });
+}
+function a({ onOpenChange: e, ...i }) {
+	return /* @__PURE__ */ r(n.Root, {
+		...i,
+		onOpenChange: t(e)
+	});
+}
+//#endregion
+export { i as AlertDialogRootScope };

package/dist/AlertDialog/index.d.mts

@@ -1,5 +1,5 @@
-import { DialogTrigger, DialogTriggerProps } from "../Dialog/client.mjs";
 import "../Dialog/index.mjs";
+import { DialogTrigger, DialogTriggerProps } from "../Dialog/client.mjs";
 import { ReactNode } from "react";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 //#region src/AlertDialog/index.d.ts

package/dist/AlertDialog/index.mjs

@@ -1,17 +1,17 @@
 import { Button as e } from "../Button/index.mjs";
-import { PopupScope as t } from "../popup/client.mjs";
-import { Dialog as n } from "../Dialog/index.mjs";
+import { Dialog as t } from "../Dialog/index.mjs";
+import { AlertDialogRootScope as n } from "./client.mjs";
 import { AlertDialog as r } from "@base-ui/react/alert-dialog";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/AlertDialog/index.tsx
 function o({ title: o, description: s, confirmLabel: c, cancelLabel: l = "Cancel", tone: u = "default", onConfirm: d, children: f, ...p }) {
-	return /* @__PURE__ */ i(t, { children: /* @__PURE__ */ a(r.Root, {
+	return /* @__PURE__ */ a(n, {
 		...p,
-		children: [f, /* @__PURE__ */ i(n.Popup, {
+		children: [f, /* @__PURE__ */ i(t.Popup, {
 			description: s,
 			size: "sm",
 			title: o,
-			children: /* @__PURE__ */ a(n.Actions, { children: [/* @__PURE__ */ i(n.Close, {
+			children: /* @__PURE__ */ a(t.Actions, { children: [/* @__PURE__ */ i(t.Close, {
 				variant: "secondary",
 				children: l
 			}), /* @__PURE__ */ i(r.Close, {
@@ -22,8 +22,8 @@ function o({ title: o, description: s, confirmLabel: c, cancelLabel: l = "Cancel
 				children: c
 			})] })
 		})]
-	}) });
+	});
 }
-var s = Object.assign(o, { Trigger: n.Trigger });
+var s = Object.assign(o, { Trigger: t.Trigger });
 //#endregion
 export { s as AlertDialog };

package/dist/Badge/Badge.css

@@ -1,2 +1,2 @@
-@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
+@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
 @layer components.badge{._1ixfil10{border-width:var(--space-1);border-style:solid;border-color:#0000}@media (forced-colors:active){._1ixfil10{color:canvastext;background-color:canvas;border-color:canvastext}}}

package/dist/Box/Box.css

@@ -1,2 +1,2 @@
-@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
+@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
 @layer components.box{._11caph0{box-sizing:border-box}}

package/dist/Button/Button.css

@@ -1,2 +1,2 @@
-@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
+@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
 @keyframes hkhd8a{to{opacity:.25}}@layer components.button{.hkhd80{border-width:var(--space-1);border-style:solid}.hkhd80[aria-disabled=true]{background-color:var(--color-bg-muted);border-color:var(--color-border-strong);color:var(--color-fg-muted);border-style:dashed}.hkhd80:not([aria-disabled=true]):not([aria-busy=true])[aria-expanded=true]{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent));box-shadow:inset 0 0 0 var(--space-1) currentColor}.hkhd82{border-color:#0000}.hkhd83{border-color:var(--color-border-strong)}.hkhd84{border-color:#0000}.hkhd88{justify-items:center}.hkhd89{grid-area:1/1}.hkhd80[aria-busy=true] .hkhd89{opacity:0}.hkhd8b{grid-area:1/1}.hkhd8c{animation-name:hkhd8a;animation-duration:var(--duration-slow);animation-timing-function:var(--easing-standard);animation-iteration-count:infinite;animation-direction:alternate}.hkhd8c:nth-child(2){animation-delay:calc(var(--duration-slow) / 3)}.hkhd8c:nth-child(3){animation-delay:calc(var(--duration-slow) * 2 / 3)}@media (hover:hover){.hkhd80:not([aria-disabled=true]):not([aria-busy=true]):hover{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent))}}@media (forced-colors:active){.hkhd80{forced-color-adjust:none}.hkhd80:not([aria-disabled=true]):not([aria-busy=true]):hover{background-image:none}.hkhd80[aria-disabled=true]{color:graytext;border-color:graytext}.hkhd80:not([aria-disabled=true]):not([aria-busy=true])[aria-expanded=true]{background-image:none}.hkhd84{--color-danger:var(--color-accent);--color-danger-fg:var(--color-accent-fg)}}@media (prefers-reduced-motion:reduce){.hkhd8c{animation-name:none}}}

package/dist/Checkbox/Checkbox.css

@@ -1,2 +1,2 @@
-@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
+@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
 @layer components.checkbox{._1tze2y80{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._1tze2y80:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1tze2y80[aria-disabled=true]{cursor:not-allowed}._1tze2y80[aria-readonly=true]{cursor:default}._1tze2y81{inline-size:var(--space-16);block-size:var(--space-16);border:var(--space-1) solid var(--color-border-strong);border-radius:var(--radius-sm);background-color:var(--color-bg);color:var(--color-accent-fg);forced-color-adjust:none;place-items:center;display:grid}._1tze2y80:not([aria-checked=true],[aria-checked=mixed],[aria-invalid=true],[aria-disabled=true],[aria-readonly=true]):hover ._1tze2y81{border-color:var(--color-fg)}._1tze2y80:is([aria-checked=true],[aria-checked=mixed]) ._1tze2y81{background-color:var(--color-accent);border-color:var(--color-accent)}._1tze2y80[aria-readonly=true] ._1tze2y81{background-clip:padding-box;border-style:dotted}._1tze2y80[aria-disabled=true] ._1tze2y81{border-style:dashed;border-color:var(--color-border-strong);background-clip:border-box;background-color:var(--color-bg-muted);color:var(--color-fg-muted)}._1tze2y80[aria-invalid=true] ._1tze2y81{border-width:var(--space-2);border-color:var(--color-danger)}._1tze2y82{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;block-size:100%;inline-size:100%}._1tze2y80[aria-checked=mixed] ._1tze2y83,._1tze2y80:not([aria-checked=mixed]) ._1tze2y84{display:none}}

package/dist/Chip/Chip.css

@@ -1,2 +1,2 @@
-@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
+@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
 @layer components.chip{._1l071c80{border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);transition:background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard)}._1l071c80[aria-disabled=true]{background-color:var(--color-bg-muted);border-color:var(--color-border-strong);color:var(--color-fg-muted);border-style:dashed}._1l071c80[aria-pressed=true]:not([aria-disabled=true]){background-color:var(--color-accent);color:var(--color-accent-fg);border-color:#0000}._1l071c84{display:none}[aria-pressed=true]>._1l071c84{display:inline-block}@media (hover:hover){._1l071c80:not([aria-disabled=true]):hover{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent))}}@media (forced-colors:active){._1l071c80{forced-color-adjust:none}._1l071c80:not([aria-disabled=true]):hover{background-image:none}._1l071c80[aria-disabled=true]{color:graytext;border-color:graytext}._1l071c80[aria-pressed=true]:not([aria-disabled=true]){color:highlighttext;background-color:highlight;border-color:highlight}}}

package/dist/Clickable/Clickable.css

@@ -1,2 +1,2 @@
-@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
+@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
 @layer components.clickable{._10dxgnx0{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._10dxgnx0:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._10dxgnx0[aria-disabled=true]{cursor:not-allowed}._10dxgnx0[aria-busy=true]{cursor:progress}}@layer reset{._10dxgnx0{appearance:none;font:inherit;color:inherit;text-align:inherit;background:0 0;border:0;padding:0;text-decoration:none}}

package/dist/ColorField/ColorField.css

@@ -0,0 +1,2 @@
+@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
+@layer components.color-field{.nmj5ie0{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;overflow:hidden}.nmj5ie1{appearance:none;border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);border-radius:var(--radius-med);background-color:var(--color-bg);inline-size:100%;min-inline-size:0;color:var(--color-fg);grid-area:1/1;padding-block:0}.nmj5ie1::placeholder{color:var(--color-fg-muted);opacity:1}.nmj5ie1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.nmj5ie1:disabled{background-color:var(--color-bg-muted);color:var(--color-fg-muted);cursor:not-allowed;border-style:dashed}.nmj5ie1[aria-invalid=true]{border-color:var(--color-danger)}.nmj5ie2{block-size:var(--size-sm);padding-inline-start:calc(var(--size-sm) + var(--space-4));padding-inline-end:var(--space-8)}.nmj5ie3{block-size:var(--size-med);padding-inline-start:calc(var(--size-med) + var(--space-4));padding-inline-end:var(--space-12)}.nmj5ie4{block-size:var(--size-lg);padding-inline-start:calc(var(--size-lg) + var(--space-4));padding-inline-end:var(--space-16)}.nmj5ie5{appearance:none;border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);border-radius:var(--radius-sm);cursor:pointer;background-color:#0000;grid-area:1/1;justify-self:start;padding:0;position:relative;inset-inline-start:var(--space-4)}.nmj5ie5::-webkit-color-swatch-wrapper{padding:0}.nmj5ie5::-webkit-color-swatch{border-radius:var(--radius-sm);forced-color-adjust:none;border:none}.nmj5ie5::-moz-color-swatch{border-radius:var(--radius-sm);forced-color-adjust:none;border:none}.nmj5ie5:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.nmj5ie5:disabled{cursor:not-allowed;border-style:dashed}.nmj5ie6{inline-size:var(--size-xs);block-size:var(--size-xs)}.nmj5ie7{inline-size:var(--size-sm);block-size:var(--size-sm)}.nmj5ie8{inline-size:var(--size-med);block-size:var(--size-med)}@media (forced-colors:active){.nmj5ie1:disabled{color:graytext;border-color:graytext}.nmj5ie5{border-color:canvastext}.nmj5ie5:disabled{border-color:graytext}}}

package/dist/ColorField/ColorField.css.mjs

@@ -0,0 +1,27 @@
+import "../styles/layers.css";
+import "./ColorField.css";
+/* empty css                               */
+/* empty css                           */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/ColorField/ColorField.css.ts
+var t = "nmj5ie0", n = e({
+	defaultClassName: "nmj5ie1",
+	variantClassNames: { size: {
+		sm: "nmj5ie2",
+		med: "nmj5ie3",
+		lg: "nmj5ie4"
+	} },
+	defaultVariants: {},
+	compoundVariants: []
+}), r = e({
+	defaultClassName: "nmj5ie5",
+	variantClassNames: { size: {
+		sm: "nmj5ie6",
+		med: "nmj5ie7",
+		lg: "nmj5ie8"
+	} },
+	defaultVariants: {},
+	compoundVariants: []
+});
+//#endregion
+export { t as hiddenLabel, n as input, r as swatch };

package/dist/ColorField/client.d.mts

@@ -0,0 +1,7 @@
+import { SearchFieldInputProps } from "../SearchField/client.mjs";
+import "../SearchField/index.mjs";
+import "./index.mjs";
+import { ComponentPropsWithRef } from "react";
+//#region src/ColorField/client.d.ts
+export type ColorFieldInputProps = Pick<ComponentPropsWithRef<"input">, keyof SearchFieldInputProps>;
+//#endregion

package/dist/ColorField/client.mjs

@@ -0,0 +1,43 @@
+"use client";
+import { Box as e } from "../Box/index.mjs";
+import { Text as t } from "../Text/index.mjs";
+import { input as n, swatch as r } from "./ColorField.css.mjs";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useState as o } from "react";
+import { Input as s } from "@base-ui/react/input";
+//#region src/ColorField/client.tsx
+var c = /^#[0-9a-f]{6}$/i, l = (e) => c.test(e) ? e.toLowerCase() : "#000000";
+function u({ value: c, defaultValue: u, onValueChange: d, placeholder: f, size: p, disabled: m, required: h, name: g, swatchLabel: _, inputProps: v }) {
+	let [y, b] = o(u), x = c ?? y, S = (e) => {
+		c === void 0 && b(e), d?.(e);
+	};
+	return /* @__PURE__ */ a(e, {
+		alignItems: "center",
+		display: "grid",
+		children: [/* @__PURE__ */ i("input", {
+			"aria-label": _,
+			className: r({ size: p }),
+			disabled: m,
+			onChange: (e) => S(e.currentTarget.value),
+			type: "color",
+			value: l(x)
+		}), /* @__PURE__ */ i(s, {
+			spellCheck: !1,
+			...v,
+			name: g,
+			onValueChange: (e) => S(e),
+			pattern: "#[0-9a-fA-F]{6}",
+			placeholder: f,
+			render: /* @__PURE__ */ i(t, {
+				as: "input",
+				className: n({ size: p }),
+				size: p
+			}),
+			required: h,
+			type: "text",
+			value: x
+		})]
+	});
+}
+//#endregion
+export { u as ColorFieldControl };

package/dist/ColorField/index.d.mts

@@ -0,0 +1,25 @@
+import { StyleProps } from "../Box/index.mjs";
+import { ColorFieldInputProps } from "./client.mjs";
+import { CSSProperties, ReactNode } from "react";
+//#region src/ColorField/index.d.ts
+export type ColorFieldProps = StyleProps & {
+  className?: string;
+  defaultValue?: string;
+  description?: ReactNode;
+  disabled?: boolean;
+  error?: ReactNode;
+  hideLabel?: boolean;
+  inputProps?: ColorFieldInputProps;
+  label: ReactNode;
+  name?: string;
+  onValueChange?: (value: string) => void;
+  placeholder?: string;
+  required?: boolean;
+  size?: "sm" | "med" | "lg";
+  style?: CSSProperties;
+  swatchLabel?: string;
+  value?: string;
+};
+export declare function ColorField({ label, hideLabel, value, defaultValue, onValueChange, placeholder, description, error, size, disabled, required, name, swatchLabel, inputProps, className, style, ...atoms }: ColorFieldProps): import("react").JSX.Element;
+//#endregion
+export type { ColorFieldInputProps };

package/dist/ColorField/index.mjs

@@ -0,0 +1,36 @@
+import { Field as e } from "../Field/index.mjs";
+import { hiddenLabel as t } from "./ColorField.css.mjs";
+import { ColorFieldControl as n } from "./client.mjs";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/ColorField/index.tsx
+function a({ label: a, hideLabel: o = !1, value: s, defaultValue: c = "", onValueChange: l, placeholder: u, description: d, error: f, size: p = "med", disabled: m = !1, required: h = !1, name: g, swatchLabel: _ = "Pick colour", inputProps: v, className: y, style: b, ...x }) {
+	return /* @__PURE__ */ i(e, {
+		...x,
+		className: y,
+		disabled: m,
+		invalid: f != null && f !== !1 && f !== "",
+		style: b,
+		children: [
+			/* @__PURE__ */ r(e.Label, {
+				className: o ? t : void 0,
+				children: a
+			}),
+			/* @__PURE__ */ r(n, {
+				defaultValue: c,
+				disabled: m,
+				inputProps: v,
+				name: g,
+				onValueChange: l,
+				placeholder: u,
+				required: h,
+				size: p,
+				swatchLabel: _,
+				value: s
+			}),
+			d != null && /* @__PURE__ */ r(e.Description, { children: d }),
+			/* @__PURE__ */ r(e.Error, { children: f })
+		]
+	});
+}
+//#endregion
+export { a as ColorField };

package/dist/Dialog/Dialog.css

@@ -1,2 +1,2 @@
-@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
+@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
 @layer components.dialog{.iyoziv0{background-color:color-mix(in srgb, var(--color-shadow) 40%, transparent);transition:opacity var(--duration-med) var(--easing-standard);inset-block:0;inset-inline:0}.iyoziv0[data-starting-style],.iyoziv0[data-ending-style]{opacity:0}.iyoziv1{max-block-size:calc(100% - 2 * var(--space-16));border:var(--space-1) solid var(--color-border);transition:opacity var(--duration-med) var(--easing-standard), scale var(--duration-med) var(--easing-enter);inset-block:0;inset-inline:0}.iyoziv1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.iyoziv1[data-starting-style],.iyoziv1[data-ending-style]{opacity:0;scale:calc(1 - var(--scale-med))}.iyoziv2{inline-size:min(100% - 2 * var(--space-16), 6 * var(--space-64))}.iyoziv3{inline-size:min(100% - 2 * var(--space-16), 8 * var(--space-64))}.iyoziv4{inline-size:min(100% - 2 * var(--space-16), 10 * var(--space-64))}}

package/dist/Dialog/client.d.mts

@@ -1,4 +1,6 @@
+import "../Box/index.mjs";
 import { TriggerElementProps, TriggerLookProps } from "../popup/client.mjs";
+import "./index.mjs";
 import { Dialog } from "@base-ui/react/dialog";
 import { ReactNode } from "react";
 //#region src/Dialog/client.d.ts

package/dist/Dialog/client.mjs

@@ -1,31 +1,74 @@
 "use client";
-import { triggerElement as e, usePopupScope as t } from "../popup/client.mjs";
-import { jsx as n } from "react/jsx-runtime";
-import { Dialog as r } from "@base-ui/react/dialog";
+import { join as e } from "../styles/join.mjs";
+import { splitStyleProps as t } from "../styles/split-style-props.mjs";
+import { Box as n } from "../Box/index.mjs";
+import { PopupScope as r, triggerElement as i, useClosingRule as a, usePopupScope as o, useRecordOpenChange as s } from "../popup/client.mjs";
+import { jsx as c } from "react/jsx-runtime";
+import { Dialog as l } from "@base-ui/react/dialog";
 //#region src/Dialog/client.tsx
-function i({ disabled: i = !1, handle: a, payload: o, id: s, ...c }) {
-	let { ref: l } = t();
-	return /* @__PURE__ */ n(r.Trigger, {
-		disabled: i,
-		handle: a,
-		payload: o,
-		id: s,
-		ref: l,
-		render: e(c)
+function u({ disabled: e = !1, handle: t, payload: n, id: r, ...a }) {
+	let { ref: s } = o();
+	return /* @__PURE__ */ c(l.Trigger, {
+		disabled: e,
+		handle: t,
+		payload: n,
+		id: r,
+		ref: s,
+		render: i(a)
 	});
 }
-function a({ disabled: t = !1, ...i }) {
-	return /* @__PURE__ */ n(r.Close, {
-		disabled: t,
-		render: e(i)
+function d({ disabled: e = !1, ...t }) {
+	return /* @__PURE__ */ c(l.Close, {
+		disabled: e,
+		render: i(t)
 	});
 }
-function o({ children: e }) {
-	let { container: i } = t();
-	return /* @__PURE__ */ n(r.Portal, {
-		container: i,
+function f({ children: e }) {
+	let { container: t } = o();
+	return /* @__PURE__ */ c(l.Portal, {
+		container: t,
 		children: e
 	});
 }
+function p(e) {
+	return /* @__PURE__ */ c(r, { children: /* @__PURE__ */ c(m, { ...e }) });
+}
+function m({ onOpenChange: e, ...t }) {
+	return /* @__PURE__ */ c(l.Root, {
+		...t,
+		onOpenChange: s(e)
+	});
+}
+function h({ frame: e, ...n }) {
+	let r = n.finalFocus !== void 0 && n.finalFocus !== !0;
+	return /* @__PURE__ */ c(l.Popup, {
+		...n,
+		render: (n, { open: i }) => {
+			let [, a] = t(n);
+			return /* @__PURE__ */ c(g, {
+				...a,
+				finalFocus: r,
+				frame: e,
+				open: i
+			});
+		}
+	});
+}
+function g({ open: t, finalFocus: r, frame: i, ref: o, className: s, style: l, ...u }) {
+	return /* @__PURE__ */ c(n, {
+		...u,
+		...i,
+		...a(o, {
+			finalFocus: r,
+			modal: !0,
+			open: t
+		}),
+		className: e(s, i.className),
+		style: {
+			...l,
+			...i.style
+		}
+	});
+}
 //#endregion
-export { a as DialogClose, o as DialogPortal, i as DialogTrigger };
+export { d as DialogClose, h as DialogPopupFrame, f as DialogPortal, p as DialogRootScope, u as DialogTrigger };

package/dist/Dialog/index.d.mts

@@ -1,7 +1,7 @@
 import { BoxProps } from "../Box/index.mjs";
-import { DialogClose, DialogCloseProps, DialogTrigger, DialogTriggerProps } from "./client.mjs";
 import { PartProps } from "../styles/part-props.mjs";
 import { size as size$1 } from "./Dialog.css.mjs";
+import { DialogClose, DialogCloseProps, DialogTrigger, DialogTriggerProps } from "./client.mjs";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 import { ReactNode } from "react";
 //#region src/Dialog/index.d.ts
@@ -15,7 +15,7 @@ export type DialogPopupProps = PartProps<Omit<Dialog$1.Popup.Props, "title">> &
 };
 export type DialogBodyProps = Omit<BoxProps<"div">, "as">;
 export type DialogActionsProps = Omit<BoxProps<"div">, "as">;
-declare function DialogRoot({ children, ...props }: DialogProps): import("react").JSX.Element;
+declare function DialogRoot(props: DialogProps): import("react").JSX.Element;
 declare function DialogPopup({ title, description, size, position, margin, blockSize, display, flexDirection, gap, padding, backgroundColor, borderRadius, boxShadow, overflow, className, style, children, ...props }: DialogPopupProps): import("react").JSX.Element;
 declare function DialogBody({ display, flexDirection, gap, ...props }: DialogBodyProps): import("react").JSX.Element;
 declare function DialogActions({ display, flexWrap, justifyContent, gap, ...props }: DialogActionsProps): import("react").JSX.Element;

package/dist/Dialog/index.mjs

@@ -3,71 +3,67 @@ import { splitStyleProps as t } from "../styles/split-style-props.mjs";
 import { Box as n } from "../Box/index.mjs";
 import { Text as r } from "../Text/index.mjs";
 import { Heading as i } from "../Heading/index.mjs";
-import { PopupScope as a } from "../popup/client.mjs";
-import { DialogClose as o, DialogPortal as s, DialogTrigger as c } from "./client.mjs";
-import { backdrop as l, popup as u, size as d } from "./Dialog.css.mjs";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { Dialog as m } from "@base-ui/react/dialog";
+import { DialogClose as a, DialogPopupFrame as o, DialogPortal as s, DialogRootScope as c, DialogTrigger as l } from "./client.mjs";
+import { backdrop as u, popup as d, size as f } from "./Dialog.css.mjs";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { Dialog as h } from "@base-ui/react/dialog";
 //#region src/Dialog/index.tsx
-function h({ children: e, ...t }) {
-	return /* @__PURE__ */ f(a, { children: /* @__PURE__ */ f(m.Root, {
-		...t,
-		children: e
-	}) });
+function g(e) {
+	return /* @__PURE__ */ p(c, { ...e });
 }
-function g({ title: a, description: o, size: c = "med", position: h = "fixed", margin: g = "auto", blockSize: _ = "fit", display: v = "flex", flexDirection: y = "column", gap: b = "16", padding: x = "24", backgroundColor: S = "bgRaised", borderRadius: C = "lg", boxShadow: w = "lg", overflow: T = "auto", className: E, style: D, children: O, ...k }) {
-	let [A, j] = t(k);
-	return /* @__PURE__ */ p(s, { children: [/* @__PURE__ */ f(m.Backdrop, { render: /* @__PURE__ */ f(n, {
-		className: l,
+function _({ title: a, description: c, size: l = "med", position: g = "fixed", margin: _ = "auto", blockSize: v = "fit", display: y = "flex", flexDirection: b = "column", gap: x = "16", padding: S = "24", backgroundColor: C = "bgRaised", borderRadius: w = "lg", boxShadow: T = "lg", overflow: E = "auto", className: D, style: O, children: k, ...A }) {
+	let [j, M] = t(A);
+	return /* @__PURE__ */ m(s, { children: [/* @__PURE__ */ p(h.Backdrop, { render: /* @__PURE__ */ p(n, {
+		className: u,
 		position: "fixed",
 		zIndex: "modal"
-	}) }), /* @__PURE__ */ p(m.Popup, {
+	}) }), /* @__PURE__ */ m(o, {
 		"aria-modal": !0,
-		...j,
-		render: /* @__PURE__ */ f(n, {
+		...M,
+		frame: {
 			zIndex: "modal",
-			position: h,
-			margin: g,
-			blockSize: _,
-			display: v,
-			flexDirection: y,
-			gap: b,
-			padding: x,
-			backgroundColor: S,
-			borderRadius: C,
-			boxShadow: w,
-			overflow: T,
-			...A,
-			className: e(u, d[c], E),
-			style: D
-		}),
-		children: [/* @__PURE__ */ p(n, {
+			position: g,
+			margin: _,
+			blockSize: v,
+			display: y,
+			flexDirection: b,
+			gap: x,
+			padding: S,
+			backgroundColor: C,
+			borderRadius: w,
+			boxShadow: T,
+			overflow: E,
+			...j,
+			className: e(d, f[l], D),
+			style: O
+		},
+		children: [/* @__PURE__ */ m(n, {
 			display: "flex",
 			flexDirection: "column",
 			gap: "8",
-			children: [/* @__PURE__ */ f(m.Title, {
-				render: /* @__PURE__ */ f(i, {
+			children: [/* @__PURE__ */ p(h.Title, {
+				render: /* @__PURE__ */ p(i, {
 					as: "h2",
 					size: "lg"
 				}),
 				children: a
-			}), o == null ? null : /* @__PURE__ */ f(m.Description, {
-				render: /* @__PURE__ */ f(r, { color: "fgMuted" }),
-				children: o
+			}), c == null ? null : /* @__PURE__ */ p(h.Description, {
+				render: /* @__PURE__ */ p(r, { color: "fgMuted" }),
+				children: c
 			})]
-		}), O]
+		}), k]
 	})] });
 }
-function _({ display: e = "flex", flexDirection: t = "column", gap: r = "12", ...i }) {
-	return /* @__PURE__ */ f(n, {
+function v({ display: e = "flex", flexDirection: t = "column", gap: r = "12", ...i }) {
+	return /* @__PURE__ */ p(n, {
 		display: e,
 		flexDirection: t,
 		gap: r,
 		...i
 	});
 }
-function v({ display: e = "flex", flexWrap: t = "wrap", justifyContent: r = "end", gap: i = "8", ...a }) {
-	return /* @__PURE__ */ f(n, {
+function y({ display: e = "flex", flexWrap: t = "wrap", justifyContent: r = "end", gap: i = "8", ...a }) {
+	return /* @__PURE__ */ p(n, {
 		display: e,
 		flexWrap: t,
 		justifyContent: r,
@@ -75,12 +71,12 @@ function v({ display: e = "flex", flexWrap: t = "wrap", justifyContent: r = "end
 		...a
 	});
 }
-var y = Object.assign(h, {
-	Trigger: c,
-	Popup: g,
-	Body: _,
-	Actions: v,
-	Close: o
+var b = Object.assign(g, {
+	Trigger: l,
+	Popup: _,
+	Body: v,
+	Actions: y,
+	Close: a
 });
 //#endregion
-export { y as Dialog };
+export { b as Dialog };

package/dist/Field/Field.css

@@ -1,2 +1,2 @@
-@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
+@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
 @layer components.field{._13w7r940[data-disabled]{color:var(--color-fg-muted)}._13w7r941{overflow-wrap:anywhere}._13w7r942{vertical-align:middle;margin-inline-end:var(--space-4);display:inline-block}}

package/dist/Heading/Heading.css

@@ -1,2 +1,2 @@
-@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
+@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
 @layer components.heading{.yaxwxv0{text-wrap:balance}}

package/dist/Icon/Icon.css

@@ -1,2 +1,2 @@
-@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
+@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
 @layer components.icon{.wz3ei00{flex-shrink:0}.wz3ei01{inline-size:var(--font-size-xs);block-size:var(--font-size-xs)}.wz3ei02{inline-size:var(--font-size-sm);block-size:var(--font-size-sm)}.wz3ei03{inline-size:var(--font-size-med);block-size:var(--font-size-med)}.wz3ei04{inline-size:var(--font-size-lg);block-size:var(--font-size-lg)}.wz3ei05{inline-size:var(--font-size-xl);block-size:var(--font-size-xl)}.wz3ei06{inline-size:var(--font-size-2xl);block-size:var(--font-size-2xl)}.wz3ei07{inline-size:var(--font-size-3xl);block-size:var(--font-size-3xl)}.wz3ei08{inline-size:var(--font-size-4xl);block-size:var(--font-size-4xl)}}

package/dist/IconButton/IconButton.css

@@ -1,2 +1,2 @@
-@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
+@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
 @layer components.icon-button{.n2fy8x0{border-width:var(--space-1);border-style:solid}.n2fy8x0[aria-disabled=true]{background-color:var(--color-bg-muted);border-color:var(--color-border-strong);color:var(--color-fg-muted);border-style:dashed}.n2fy8x0:not([aria-disabled=true]):not([aria-busy=true])[aria-expanded=true]{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent));box-shadow:inset 0 0 0 var(--space-1) currentColor}.n2fy8x2{border-color:#0000}.n2fy8x3{border-color:var(--color-border-strong)}@media (hover:hover){.n2fy8x0:not([aria-disabled=true]):not([aria-busy=true]):hover{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent))}}@media (forced-colors:active){.n2fy8x0{forced-color-adjust:none}.n2fy8x0:not([aria-disabled=true]):not([aria-busy=true]):hover{background-image:none}.n2fy8x0[aria-disabled=true]{color:graytext;border-color:graytext}.n2fy8x0:not([aria-disabled=true]):not([aria-busy=true])[aria-expanded=true]{background-image:none}}}

package/dist/Inline/Inline.css

@@ -1,2 +1,2 @@
-@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
+@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
 @layer components.inline;

package/dist/Menu/Menu.css

@@ -1,2 +1,2 @@
-@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
+@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
 @layer components.menu{._393eil1{border:var(--space-1) solid var(--color-border);transform-origin:var(--transform-origin);transition:opacity var(--duration-fast) var(--easing-standard), scale var(--duration-fast) var(--easing-enter)}._393eil1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._393eil1[data-starting-style],._393eil1[data-ending-style]{opacity:0;scale:calc(1 - var(--scale-med))}._393eil2{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}._393eil2:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._393eil2[data-highlighted]{background-color:light-dark(var(--color-bg-muted),color-mix(in srgb, var(--color-fg) 10%, var(--color-bg-raised)))}._393eil2[aria-disabled=true]{color:var(--color-fg-muted);cursor:not-allowed}._393eil3{text-decoration:none}._393eil4{border-block-start-color:var(--color-border)}._393eil4:before{content:"";border-block-start:var(--space-1) solid;border-block-start-color:inherit;display:block}@media (forced-colors:active){._393eil2[data-highlighted]:not([aria-disabled=true]){forced-color-adjust:none;color:highlighttext;background-color:highlight}._393eil2[aria-disabled=true]{color:graytext}}}

package/dist/MultiSelect/MultiSelect.css

@@ -1,2 +1,2 @@
-@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
+@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
 @layer components.multiselect{._1seauxl0{text-align:start;justify-content:stretch}:where(._1seauxl0) ._1gwwloa0{flex:auto;justify-items:stretch;min-inline-size:0}:where(._1seauxl0) ._1gwwloa1{min-inline-size:0}:where(._1seauxl0) ._1gwwloa2{flex:auto;min-inline-size:0}._1seauxl1{min-inline-size:0;display:block}._1seauxl1[data-placeholder]{color:var(--color-fg-muted)}._1seauxl2{min-inline-size:0;display:grid}._1seauxl3{grid-area:1/1}._1seauxl3[aria-hidden=true]{visibility:hidden}._1seauxl4{grid-area:1/1}._1seauxl5{border:var(--space-1) solid var(--color-border);min-inline-size:var(--anchor-width);max-block-size:var(--available-height);transform-origin:var(--transform-origin);transition:opacity var(--duration-fast) var(--easing-standard), scale var(--duration-fast) var(--easing-enter);overflow-y:auto}._1seauxl5:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1seauxl5[data-starting-style],._1seauxl5[data-ending-style]{opacity:0;scale:calc(1 - var(--scale-med))}._1seauxl6{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}._1seauxl6:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1seauxl6[data-highlighted]{background-color:light-dark(var(--color-bg-muted),color-mix(in srgb, var(--color-fg) 10%, var(--color-bg-raised)))}._1seauxl6[aria-disabled=true]{color:var(--color-fg-muted);cursor:not-allowed}._1seauxl7{visibility:hidden;flex-shrink:0}._1seauxl6[aria-selected=true] ._1seauxl7{visibility:visible}@media (forced-colors:active){._1seauxl6[data-highlighted]{forced-color-adjust:none;color:highlighttext;background-color:highlight}._1seauxl6[aria-disabled=true]{color:graytext}}}

package/dist/SearchField/SearchField.css

@@ -1,2 +1,2 @@
-@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
+@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
 @layer components.search-field{._1cj8r6g0{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;overflow:hidden}._1cj8r6g1{appearance:none;border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);border-radius:var(--radius-med);background-color:var(--color-bg);inline-size:100%;min-inline-size:0;color:var(--color-fg);grid-area:1/1;padding-block:0}._1cj8r6g1::placeholder{color:var(--color-fg-muted);opacity:1}._1cj8r6g1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1cj8r6g1:disabled{background-color:var(--color-bg-muted);color:var(--color-fg-muted);cursor:not-allowed;border-style:dashed}._1cj8r6g1[aria-invalid=true]{border-color:var(--color-danger)}._1cj8r6g1::-webkit-search-cancel-button{appearance:none}._1cj8r6g1::-webkit-search-decoration{appearance:none}._1cj8r6g2{block-size:var(--size-sm);padding-inline-start:calc(var(--space-8) + var(--space-8) + var(--font-size-sm));padding-inline-end:var(--size-sm)}._1cj8r6g3{block-size:var(--size-med);padding-inline-start:calc(var(--space-12) + var(--space-8) + var(--font-size-med));padding-inline-end:var(--size-med)}._1cj8r6g4{block-size:var(--size-lg);padding-inline-start:calc(var(--space-16) + var(--space-8) + var(--font-size-lg));padding-inline-end:var(--size-lg)}._1cj8r6g5{pointer-events:none;color:var(--color-fg-muted);grid-area:1/1;justify-self:start}._1cj8r6g6{margin-inline-start:var(--space-8)}._1cj8r6g7{margin-inline-start:var(--space-12)}._1cj8r6g8{margin-inline-start:var(--space-16)}._1cj8r6g9{border-color:#0000;grid-area:1/1;justify-self:end;margin-inline-end:var(--space-4)}@media (forced-colors:active){._1cj8r6g1:disabled{color:graytext;border-color:graytext}}}

package/dist/Stack/Stack.css

@@ -1,2 +1,2 @@
-@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
+@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
 @layer components.stack;

package/dist/Tabs/Tabs.css

@@ -1,2 +1,2 @@
-@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
+@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
 @layer components.tabs{.xowpd00{border-block-end:var(--space-1) solid var(--color-border)}.xowpd00[aria-orientation=vertical]{border-block-end:none;border-inline-end:var(--space-1) solid var(--color-border);flex-direction:column}.xowpd01{transition:color var(--duration-fast) var(--easing-standard)}.xowpd01[aria-selected=true]{color:var(--color-fg)}.xowpd01[aria-disabled=true]{opacity:.5}.xowpd02{border-block-end:var(--space-2) solid var(--color-accent);opacity:0;scale:calc(1 - var(--scale-lg)) 1;transition:opacity var(--duration-med) var(--easing-standard), scale var(--duration-med) var(--easing-standard);pointer-events:none;inset-block-end:calc(-1 * var(--space-1));inset-inline:0}[aria-orientation=vertical]>[role=tab]>.xowpd02{inset-inline:auto;border-block-end:none;border-inline-end:var(--space-2) solid var(--color-accent);scale:1 calc(1 - var(--scale-lg));inset-block:0;inset-inline-end:calc(-1 * var(--space-1))}[aria-selected=true]>.xowpd02{opacity:1;scale:1}.xowpd03:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.xowpd03[data-orientation=vertical]{flex-basis:0}@media (hover:hover){.xowpd01:not([aria-disabled=true]):hover{color:var(--color-fg)}}@media (forced-colors:active){.xowpd01[aria-disabled=true]{color:graytext}.xowpd02{border-color:highlight}}}

package/dist/Tag/Tag.css

@@ -1,2 +1,2 @@
-@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
+@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
 @layer components.tag{._1jsyd8s0{border-width:var(--space-1);border-style:solid;border-color:#0000}._1jsyd8s1{overflow-wrap:anywhere}._1jsyd8s0:hover ._1jsyd8s1,._1jsyd8s0:focus-within ._1jsyd8s1{padding-block:var(--space-4);margin-block:0}._1jsyd8s2{text-decoration:underline}._1jsyd8s3:hover{background-color:var(--color-bg)}@media (forced-colors:active){._1jsyd8s0{color:canvastext;background-color:canvas;border-color:canvastext}}}