@jfrader/ui 0.2.0 → 0.4.0

package/dist/dialog-xaydbXl2.js

@@ -0,0 +1,218 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n } from "./focus-ring-BK5W5_NY.js";
+import { n as r } from "./media-D_eA_I-e.js";
+import { t as i } from "./use-controlled-state-CVXDa-qM.js";
+import { t as a } from "./trigger-style-B1KVC8O1.js";
+import { i as o, n as s, r as c, t as l } from "./use-native-dialog-DWpIUVO1.js";
+import { n as u, t as d } from "./surface-DZ4d-2aL.js";
+import { createContext as f, useCallback as p, useContext as m, useEffect as h, useId as g, useMemo as _, useRef as v, useState as y } from "react";
+import { vars as b } from "@jfrader/tokens/vars";
+import { jsx as x } from "@emotion/react/jsx-runtime";
+//#region src/components/dialog/dialog.tsx
+var S = f(null), C = f(null);
+function w(e) {
+	let t = m(S);
+	if (!t) throw Error(`Dialog.${e} must be rendered inside <Dialog>.`);
+	return t;
+}
+var T = e(d), E = e({
+	...u,
+	borderRadius: b.radius.lg,
+	boxShadow: b.shadow.floating,
+	padding: b.space[5],
+	minInlineSize: "320px",
+	maxInlineSize: "min(560px, calc(100vw - 32px))"
+}), D = e({
+	margin: 0,
+	marginBlockEnd: b.space[2],
+	fontSize: b.textSize.lg,
+	fontWeight: b.fontWeight.semibold,
+	lineHeight: b.lineHeight.tight
+}), O = e({
+	margin: 0,
+	marginBlockEnd: b.space[4],
+	fontSize: b.textSize.sm,
+	color: b.color.textMuted
+}), k = e({
+	appearance: "none",
+	display: "inline-flex",
+	alignItems: "center",
+	border: "1px solid transparent",
+	borderRadius: b.radius.md,
+	backgroundColor: "transparent",
+	paddingBlock: b.space[1],
+	paddingInline: b.space[3],
+	font: "inherit",
+	fontSize: b.textSize.sm,
+	fontWeight: b.fontWeight.medium,
+	color: b.color.textMuted,
+	cursor: "pointer",
+	transitionProperty: "background-color, color",
+	transitionDuration: b.motion.duration.fast,
+	transitionTimingFunction: b.motion.easeStandard,
+	"&:hover:not(:disabled)": {
+		backgroundColor: b.color.surfaceHover,
+		color: b.color.text
+	},
+	"&:focus-visible": { ...n },
+	"&:disabled": {
+		opacity: .55,
+		cursor: "not-allowed"
+	},
+	[r]: { transitionDuration: "0s" }
+});
+function A({ open: e, defaultOpen: t = !1, onOpenChange: n, children: r }) {
+	let a = g(), [s = !1, c] = i(e, t, n), { setDialogElement: l, setOpen: u, requestClose: d, repairToken: f } = o(s, c), [p, m] = y(!1), [h, v] = y(!1), b = _(() => ({
+		open: s,
+		setOpen: u,
+		requestClose: d,
+		repairToken: f,
+		setDialogElement: l,
+		titleId: `${a}-title`,
+		descriptionId: `${a}-description`,
+		hasTitle: p,
+		hasDescription: h,
+		setHasTitle: m,
+		setHasDescription: v
+	}), [
+		s,
+		u,
+		d,
+		f,
+		l,
+		a,
+		p,
+		h
+	]);
+	return /* @__PURE__ */ x(S.Provider, {
+		value: b,
+		children: r
+	});
+}
+A.displayName = "Dialog";
+function j({ ref: e = null, onClick: n, render: r, className: i, sx: o, ...s }) {
+	let { open: c, setOpen: l } = w("Trigger"), { "data-ui": u, ...d } = s, f = n, p = (e) => {
+		f?.(e), e.defaultPrevented || l(!0);
+	}, m = {
+		type: "button",
+		...d,
+		ref: e,
+		"data-ui": r && u !== void 0 ? `${u} dialog-trigger` : "dialog-trigger",
+		"aria-haspopup": "dialog",
+		"aria-expanded": c,
+		onClick: p
+	};
+	return /* @__PURE__ */ x(t, {
+		className: i,
+		styles: r ? void 0 : a,
+		sx: o,
+		children: (e) => r ? r({
+			...m,
+			className: e
+		}) : /* @__PURE__ */ x("button", {
+			...m,
+			className: e
+		})
+	});
+}
+j.displayName = "Dialog.Trigger";
+function M({ ref: e, className: n, sx: r, ...i }) {
+	let { children: a, onCancel: o, onClick: u, onClose: d, "aria-labelledby": f, "aria-describedby": m, withDescription: h = !0, ...g } = l(i), _ = w("Content"), { setOpen: y, titleId: b, descriptionId: S, hasTitle: D, hasDescription: O } = _, k = v(null), A = p(() => {
+		s(k.current, y);
+	}, [y]), j = c({
+		..._,
+		requestClose: A
+	}, {
+		onCancel: o,
+		onClick: u,
+		onClose: d
+	}, e, k), M = [f, D && b].filter(Boolean).join(" ") || void 0, N = [m, h && O && S].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ x(t, {
+		className: n,
+		styles: T,
+		sx: r,
+		children: (e) => /* @__PURE__ */ x("dialog", {
+			...g,
+			...j,
+			"data-ui": "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": M,
+			"aria-describedby": N,
+			className: e,
+			children: /* @__PURE__ */ x(C.Provider, {
+				value: A,
+				children: /* @__PURE__ */ x("div", {
+					css: E,
+					children: a
+				})
+			})
+		})
+	});
+}
+M.displayName = "Dialog.Content";
+function N({ ref: e, className: n, sx: r, ...i }) {
+	let { titleId: a, setHasTitle: o } = w("Title");
+	return h(() => (o(!0), () => o(!1)), [o]), /* @__PURE__ */ x(t, {
+		className: n,
+		styles: D,
+		sx: r,
+		children: (t) => /* @__PURE__ */ x("h2", {
+			...i,
+			ref: e,
+			id: a,
+			"data-ui": "dialog-title",
+			className: t
+		})
+	});
+}
+N.displayName = "Dialog.Title";
+function P({ ref: e, className: n, sx: r, ...i }) {
+	let { descriptionId: a, setHasDescription: o } = w("Description");
+	return h(() => (o(!0), () => o(!1)), [o]), /* @__PURE__ */ x(t, {
+		className: n,
+		styles: O,
+		sx: r,
+		children: (t) => /* @__PURE__ */ x("p", {
+			...i,
+			ref: e,
+			id: a,
+			"data-ui": "dialog-description",
+			className: t
+		})
+	});
+}
+P.displayName = "Dialog.Description";
+function F({ ref: e = null, onClick: n, render: r, className: i, sx: a, ...o }) {
+	let { setOpen: s } = w("Close"), c = m(C), { "data-ui": l, ...u } = o, d = n, f = (e) => {
+		d?.(e), !e.defaultPrevented && (c ? c() : s(!1));
+	}, p = {
+		type: "button",
+		...u,
+		ref: e,
+		"data-ui": r && l !== void 0 ? `${l} dialog-close` : "dialog-close",
+		onClick: f
+	};
+	return /* @__PURE__ */ x(t, {
+		className: i,
+		styles: r ? void 0 : k,
+		sx: a,
+		children: (e) => r ? r({
+			...p,
+			className: e
+		}) : /* @__PURE__ */ x("button", {
+			...p,
+			className: e
+		})
+	});
+}
+F.displayName = "Dialog.Close";
+var I = Object.assign(A, {
+	Trigger: j,
+	Content: M,
+	Title: N,
+	Description: P,
+	Close: F
+});
+//#endregion
+export { I as t };

package/dist/dialog.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Dialog } from "./dialog-fhS07G41.js";
+export { t as Dialog } from "./dialog-xaydbXl2.js";

package/dist/divider-DYoJf0I_.js

@@ -0,0 +1,84 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { t as n } from "./renderable-DzcIj1Lo.js";
+import { useId as r } from "react";
+import { vars as i } from "@jfrader/tokens/vars";
+import { jsx as a } from "@emotion/react/jsx-runtime";
+//#region src/components/divider/divider.tsx
+var o = "@media (forced-colors: active)", s = "1px", c = {
+	backgroundColor: i.color.border,
+	[o]: {
+		forcedColorAdjust: "none",
+		backgroundColor: "CanvasText"
+	}
+}, l = e({
+	...c,
+	boxSizing: "border-box",
+	alignSelf: "stretch",
+	blockSize: s,
+	margin: 0,
+	border: 0
+}), u = e({
+	...c,
+	boxSizing: "border-box",
+	alignSelf: "stretch",
+	flexShrink: 0,
+	inlineSize: s
+}), d = e({
+	display: "flex",
+	alignItems: "center",
+	alignSelf: "stretch",
+	gap: i.space[3],
+	fontFamily: i.font.sans,
+	fontSize: i.textSize.sm,
+	lineHeight: i.lineHeight.tight,
+	color: i.color.textMuted,
+	"&::before, &::after": {
+		...c,
+		content: "\"\"",
+		flex: 1,
+		blockSize: s
+	}
+});
+function f({ ref: e, orientation: i = "horizontal", label: o, "aria-labelledby": s, className: c, sx: f, ...p }) {
+	let m = r(), h = i === "vertical", g = !h && n(o);
+	return /* @__PURE__ */ a(t, {
+		className: c,
+		styles: h ? u : g ? d : l,
+		sx: f,
+		children: (t) => h ? /* @__PURE__ */ a("div", {
+			...p,
+			ref: e,
+			role: "separator",
+			"aria-orientation": "vertical",
+			"aria-labelledby": s,
+			"data-ui": "divider",
+			"data-orientation": "vertical",
+			className: t
+		}) : g ? /* @__PURE__ */ a("div", {
+			...p,
+			ref: e,
+			role: "separator",
+			"aria-orientation": "horizontal",
+			"aria-labelledby": [m, s].filter(Boolean).join(" "),
+			"data-ui": "divider",
+			"data-orientation": "horizontal",
+			className: t,
+			children: /* @__PURE__ */ a("span", {
+				id: m,
+				"data-ui": "divider-label",
+				children: o
+			})
+		}) : /* @__PURE__ */ a("hr", {
+			...p,
+			ref: e,
+			"aria-labelledby": s,
+			"data-ui": "divider",
+			"data-orientation": "horizontal",
+			className: t
+		})
+	});
+}
+f.displayName = "Divider";
+//#endregion
+export { f as t };

package/dist/divider.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Divider } from "./divider-v_78HYF5.js";
+export { t as Divider } from "./divider-DYoJf0I_.js";

package/dist/field-anatomy-D2ToMeRa.js

@@ -0,0 +1,109 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n } from "./media-D_eA_I-e.js";
+import { t as r } from "./renderable-DzcIj1Lo.js";
+import { useId as i } from "react";
+import { vars as a } from "@jfrader/tokens/vars";
+import { jsx as o, jsxs as s } from "@emotion/react/jsx-runtime";
+//#region src/styling/input-control.ts
+var c = e({
+	display: "block",
+	inlineSize: "100%",
+	boxSizing: "border-box",
+	margin: 0,
+	backgroundColor: a.color.surfaceRaised,
+	border: `1px solid ${a.color.borderControl}`,
+	borderRadius: a.radius.md,
+	color: a.color.text,
+	fontFamily: a.font.sans,
+	transitionProperty: "border-color",
+	transitionDuration: a.motion.duration.fast,
+	transitionTimingFunction: a.motion.easeStandard,
+	"&::placeholder": { color: a.color.textSubtle },
+	"&:hover:not(:disabled):not(:focus-visible)": { borderColor: a.color.textSubtle },
+	"&:focus-visible": {
+		outline: `2px solid ${a.color.focusRing}`,
+		outlineOffset: "2px",
+		borderColor: a.color.focusRing
+	},
+	"&:disabled": {
+		opacity: .55,
+		cursor: "not-allowed"
+	},
+	"&[aria-invalid=\"true\"]:not(:focus-visible)": { borderColor: a.color.dangerBorder },
+	[n]: { transitionDuration: "0s" }
+}), l = e({
+	display: "grid",
+	gap: a.space[1],
+	inlineSize: "100%"
+}), u = e({
+	display: "inline-flex",
+	gap: a.space[1],
+	fontSize: a.textSize.sm,
+	fontWeight: a.fontWeight.medium,
+	color: a.color.text
+}), d = e({ color: a.color.dangerText }), f = e({
+	fontSize: a.textSize.sm,
+	color: a.color.textMuted
+}), p = e({
+	fontSize: a.textSize.sm,
+	color: a.color.dangerText
+});
+function m({ id: e, description: t, error: n, "aria-describedby": a, "aria-invalid": o }) {
+	let s = i(), c = e ?? s, l = `${c}-description`, u = `${c}-error`, d = r(t), f = r(n);
+	return {
+		id: c,
+		descriptionId: l,
+		errorId: u,
+		describedBy: [
+			a,
+			d && l,
+			f && u
+		].filter(Boolean).join(" ") || void 0,
+		ariaInvalid: f ? !0 : o
+	};
+}
+function h({ "data-ui": e, className: n, sx: r, part: i, children: a }) {
+	let s = [n, i?.className].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ o(t, {
+		className: s,
+		styles: [l, i?.css],
+		sx: r,
+		children: (t) => /* @__PURE__ */ o("div", {
+			"data-ui": e,
+			className: t,
+			children: a
+		})
+	});
+}
+function g({ htmlFor: e, required: t, part: n, children: i }) {
+	return r(i) ? /* @__PURE__ */ s("label", {
+		htmlFor: e,
+		className: n?.className,
+		css: [u, n?.css],
+		children: [i, t && /* @__PURE__ */ o("span", {
+			"aria-hidden": !0,
+			css: d,
+			children: " *"
+		})]
+	}) : null;
+}
+function _({ id: e, part: t, children: n }) {
+	return r(n) ? /* @__PURE__ */ o("span", {
+		id: e,
+		className: t?.className,
+		css: [f, t?.css],
+		children: n
+	}) : null;
+}
+function v({ id: e, part: t, children: n }) {
+	return r(n) ? /* @__PURE__ */ o("span", {
+		id: e,
+		role: "alert",
+		className: t?.className,
+		css: [p, t?.css],
+		children: n
+	}) : null;
+}
+//#endregion
+export { m as a, h as i, v as n, c as o, g as r, _ as t };

package/dist/flex-Dh-_J5-U.js

@@ -0,0 +1,28 @@
+'use client';
+import { t as e } from "./sx-Dx9JUKp5.js";
+import { t } from "./layout-style-Cbd1Vilw.js";
+import { jsx as n } from "@emotion/react/jsx-runtime";
+//#region src/components/flex/flex.tsx
+function r({ ref: r, direction: i, wrap: a, inline: o, align: s, justify: c, gap: l, className: u, sx: d, ...f }) {
+	return /* @__PURE__ */ n(e, {
+		className: u,
+		styles: t({
+			direction: i,
+			wrap: a,
+			inline: o,
+			align: s,
+			justify: c,
+			gap: l
+		}),
+		sx: d,
+		children: (e) => /* @__PURE__ */ n("div", {
+			...f,
+			ref: r,
+			"data-ui": "flex",
+			className: e
+		})
+	});
+}
+r.displayName = "Flex";
+//#endregion
+export { r as t };

package/dist/flex.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Flex } from "./flex-COZzFqI8.js";
+export { t as Flex } from "./flex-Dh-_J5-U.js";

package/dist/{icon-wrapper-CFWzew5m.js → icon-wrapper-stN8sD7R.js}

@@ -1,5 +1,5 @@
 'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
+import { r as e } from "./sx-Dx9JUKp5.js";
 //#region src/styling/icon-wrapper.ts
 var t = e({
 	display: "inline-flex",

package/dist/index.js

@@ -1,38 +1,39 @@
 'use client';
-import { t as e } from "./accordion-CkOZ-tvs.js";
-import { t } from "./alert-Dsjx14UW.js";
-import { t as n } from "./avatar-BRGKkoSr.js";
-import { t as r } from "./badge-DLxUMsCx.js";
-import { t as i } from "./breadcrumbs-694hF_hm.js";
-import { t as a } from "./button-CoaIcykB.js";
-import { t as o } from "./calendar-Doj7PTdG.js";
-import { t as s } from "./card-2IM71XZj.js";
-import { t as c } from "./checkbox-B7xGNFzp.js";
-import { t as l } from "./command-palette-BhJwm6cS.js";
-import { t as u } from "./text-field-8PQAqRpM.js";
-import { t as d } from "./combobox-Bjhxv5U3.js";
-import { t as f } from "./container-BhnrGPu-.js";
-import { t as p } from "./date-picker-Jk8SpoiO.js";
-import { t as m } from "./dialog-fhS07G41.js";
-import { t as h } from "./divider-v_78HYF5.js";
-import { t as g } from "./flex-COZzFqI8.js";
-import { t as _ } from "./kbd-CeP8Kfvp.js";
-import { t as v } from "./menu-B6KCbLCr.js";
-import { t as y } from "./navigation-BDht6S2-.js";
-import { t as b } from "./pagination-B50PCaDU.js";
-import { t as x } from "./pill-2_XzBdkD.js";
-import { t as S } from "./popover-DRHbeIVq.js";
-import { t as C } from "./progress-CpsskKTD.js";
-import { t as w } from "./radio-group-DPI5KUCj.js";
-import { t as T } from "./select-C1xGrOhT.js";
-import { t as E } from "./skeleton-DitdP-yz.js";
-import { t as D } from "./spinner-CFq5HPoo.js";
-import { t as O } from "./stack-D_g6NJzo.js";
-import { t as k } from "./switch-B5TTU-oJ.js";
-import { t as A } from "./tabs-C26PWl2c.js";
-import { t as j } from "./textarea-CcGWuntL.js";
-import { t as M } from "./theme-root-BRLIA4eb.js";
-import { n as N, t as P } from "./toast-B1PXuwZ4.js";
-import { t as F } from "./toggle-group-N_owicT0.js";
-import { t as I } from "./tooltip-BJPisf60.js";
-export { e as Accordion, t as Alert, n as Avatar, r as Badge, i as Breadcrumbs, a as Button, o as Calendar, s as Card, c as Checkbox, d as Combobox, l as CommandPalette, f as Container, p as DatePicker, m as Dialog, h as Divider, g as Flex, _ as Kbd, v as Menu, y as Navigation, b as Pagination, x as Pill, S as Popover, C as Progress, w as RadioGroup, T as Select, E as Skeleton, D as Spinner, O as Stack, k as Switch, A as Tabs, u as TextField, j as Textarea, M as ThemeRoot, P as Toast, F as ToggleGroup, I as Tooltip, N as useToast };
+import { t as e } from "./accordion-Bd-j04hW.js";
+import { t } from "./alert-BBqaKI4k.js";
+import { t as n } from "./avatar-BahDVO9t.js";
+import { t as r } from "./badge-B_sLygxU.js";
+import { t as i } from "./breadcrumbs-DVAOxfvL.js";
+import { t as a } from "./button-P2e7_44z.js";
+import { t as o } from "./calendar-C9Yad_-w.js";
+import { t as s } from "./card-D-aI2QHx.js";
+import { t as c } from "./checkbox-COYG6L7d.js";
+import { t as l } from "./command-palette-V_2pEay7.js";
+import { t as u } from "./text-field-D60ok14S.js";
+import { t as d } from "./combobox-DiMC2g_u.js";
+import { t as f } from "./container-BOaSptJa.js";
+import { t as p } from "./date-picker-C29Uo4Tx.js";
+import { t as m } from "./dialog-xaydbXl2.js";
+import { t as h } from "./divider-DYoJf0I_.js";
+import { t as g } from "./flex-Dh-_J5-U.js";
+import { t as _ } from "./kbd-C3ACoMoE.js";
+import { t as v } from "./menu-CGPTNRnF.js";
+import { t as y } from "./navigation-DhnKriOp.js";
+import { t as b } from "./pagination-DYdwsxwe.js";
+import { t as x } from "./pill-DO2gHzMb.js";
+import { t as S } from "./popover-CdRXjQqI.js";
+import { t as C } from "./progress-BpJswTG4.js";
+import { t as w } from "./radio-group-Ce0_IWQr.js";
+import { t as T } from "./select-BgG7WgSh.js";
+import { t as E } from "./skeleton-OoFlOEXO.js";
+import { t as D } from "./spinner-C2YDoiMn.js";
+import { t as O } from "./stack-DC3IbtWk.js";
+import { t as k } from "./switch-Dr-qjmT4.js";
+import { t as A } from "./tabs-CK_g1RKa.js";
+import { t as j } from "./textarea-DyfjtP0A.js";
+import { i as M, n as N, r as P, t as F } from "./theme-root-BbTBuLMQ.js";
+import { n as I, t as L } from "./toast-CjmELMZZ.js";
+import { t as R } from "./toggle-group-CI0e7hFm.js";
+import { t as z } from "./tooltip-CaL3rKbV.js";
+import B from "@emotion/styled";
+export { e as Accordion, t as Alert, n as Avatar, r as Badge, i as Breadcrumbs, a as Button, o as Calendar, s as Card, c as Checkbox, d as Combobox, l as CommandPalette, f as Container, p as DatePicker, m as Dialog, h as Divider, g as Flex, _ as Kbd, v as Menu, y as Navigation, b as Pagination, x as Pill, S as Popover, C as Progress, w as RadioGroup, T as Select, E as Skeleton, D as Spinner, O as Stack, k as Switch, A as Tabs, u as TextField, j as Textarea, N as ThemeProvider, F as ThemeRoot, L as Toast, R as ToggleGroup, z as Tooltip, B as styled, M as theme, P as useTheme, I as useToast };

package/dist/kbd-C3ACoMoE.js

@@ -0,0 +1,71 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { Children as n, Fragment as r } from "react";
+import { vars as i } from "@jfrader/tokens/vars";
+import { jsx as a, jsxs as o } from "@emotion/react/jsx-runtime";
+//#region src/components/kbd/kbd.tsx
+var s = "+", c = e({
+	display: "inline-flex",
+	alignItems: "center",
+	boxSizing: "border-box",
+	paddingBlock: "2px",
+	paddingInline: "6px",
+	backgroundColor: i.color.surfaceHover,
+	border: `1px solid ${i.color.borderSubtle}`,
+	borderBlockEndColor: i.color.borderStrong,
+	borderBlockEndWidth: "2px",
+	borderRadius: i.radius.sm,
+	fontFamily: i.font.mono,
+	fontSize: i.textSize.xs,
+	fontWeight: i.fontWeight.medium,
+	lineHeight: i.lineHeight.tight,
+	color: i.color.text,
+	whiteSpace: "nowrap",
+	verticalAlign: "middle"
+}), l = e({
+	display: "inline-flex",
+	alignItems: "center",
+	gap: i.space[1],
+	verticalAlign: "middle"
+}), u = e({
+	fontFamily: i.font.sans,
+	fontSize: i.textSize.xs,
+	color: i.color.textMuted
+});
+function d({ ref: e, className: n, sx: r, ...i }) {
+	return /* @__PURE__ */ a(t, {
+		className: n,
+		styles: c,
+		sx: r,
+		children: (t) => /* @__PURE__ */ a("kbd", {
+			...i,
+			ref: e,
+			"data-ui": "kbd",
+			className: t
+		})
+	});
+}
+d.displayName = "Kbd";
+function f({ ref: e, children: i, className: c, sx: d, ...f }) {
+	return /* @__PURE__ */ a(t, {
+		className: c,
+		styles: l,
+		sx: d,
+		children: (t) => /* @__PURE__ */ a("span", {
+			...f,
+			ref: e,
+			"data-ui": "kbd-group",
+			className: t,
+			children: n.toArray(i).map((e, t) => /* @__PURE__ */ o(r, { children: [t > 0 && /* @__PURE__ */ a("span", {
+				"aria-hidden": !0,
+				"data-ui": "kbd-separator",
+				css: u,
+				children: s
+			}), e] }, t))
+		})
+	});
+}
+f.displayName = "Kbd.Group";
+var p = Object.assign(d, { Group: f });
+//#endregion
+export { p as t };

package/dist/kbd.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Kbd } from "./kbd-CeP8Kfvp.js";
+export { t as Kbd } from "./kbd-C3ACoMoE.js";

package/dist/{layout-style-7ZTOiWGR.js → layout-style-Cbd1Vilw.js}

@@ -1,5 +1,5 @@
 'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
+import { r as e } from "./sx-Dx9JUKp5.js";
 import { vars as t } from "@jfrader/tokens/vars";
 //#region src/styling/layout-style.ts
 var n = [

package/dist/{loading-ring-BpdB0aFi.js → loading-ring-B8-30Dl1.js}

@@ -1,5 +1,5 @@
 'use client';
-import { n as e } from "./css-Cgj6sCHn.js";
+import { i as e } from "./sx-Dx9JUKp5.js";
 import { vars as t } from "@jfrader/tokens/vars";
 //#region src/styling/loading-ring.ts
 var n = e({