@plitzi/sdk-style 0.38.10 → 0.38.11

package/dist/components/StyleInspector/categoryKeys.mjs

@@ -0,0 +1,220 @@
+//#region src/components/StyleInspector/categoryKeys.ts
+var e = {
+	title: "List",
+	dot: ["list-style"],
+	advanced: []
+}, t = {
+	title: "List Item",
+	dot: ["list-style-type"],
+	advanced: []
+}, n = {
+	title: "Layout",
+	dot: [
+		"flex-direction",
+		"flex-wrap",
+		"align-items",
+		"justify-content",
+		"align-content",
+		"column-gap",
+		"row-gap",
+		"grid-row-gap",
+		"grid-column-gap",
+		"grid-template-areas",
+		"grid-template-columns",
+		"grid-template-rows",
+		"grid-auto-flow",
+		"grid-auto-rows",
+		"grid-auto-columns",
+		"display"
+	],
+	advanced: []
+}, r = {
+	title: "Flex Child",
+	dot: [
+		"align-self",
+		"order",
+		"flex-grow",
+		"flex-shrink",
+		"flex-basis"
+	],
+	advanced: []
+}, i = {
+	title: "Spacing",
+	dot: [
+		"margin-top",
+		"margin-bottom",
+		"margin-left",
+		"margin-right",
+		"padding-top",
+		"padding-bottom",
+		"padding-left",
+		"padding-right"
+	],
+	advanced: []
+}, a = {
+	title: "Size",
+	dot: [
+		"width",
+		"height",
+		"min-width",
+		"min-height",
+		"max-width",
+		"max-height",
+		"aspect-ratio",
+		"box-sizing",
+		"overflow",
+		"object-fit",
+		"object-position",
+		"container-type",
+		"container-name"
+	],
+	advanced: [
+		"aspect-ratio",
+		"box-sizing",
+		"object-position",
+		"object-fit",
+		"container-type",
+		"container-name"
+	]
+}, o = {
+	title: "Position",
+	dot: [
+		"position",
+		"top",
+		"bottom",
+		"z-index",
+		"float",
+		"clear",
+		"left",
+		"right"
+	],
+	advanced: ["float", "clear"]
+}, s = {
+	title: "Typography",
+	dot: /* @__PURE__ */ "font-family.font-weight.font-size.line-height.color.text-align.font-style.text-decoration.text-decoration-thickness.text-underline-offset.letter-spacing.word-spacing.text-indent.text-transform.direction.text-shadow.white-space.text-wrap.word-break.overflow-wrap.hyphens.vertical-align.text-overflow.line-clamp.font-variant-numeric.font-feature-settings.-webkit-text-fill-color".split("."),
+	advanced: [
+		"text-decoration-thickness",
+		"text-underline-offset",
+		"word-break",
+		"overflow-wrap",
+		"hyphens",
+		"vertical-align",
+		"text-shadow",
+		"font-variant-numeric",
+		"font-feature-settings",
+		"-webkit-text-fill-color"
+	]
+}, c = {
+	title: "Background",
+	dot: [
+		"background-color",
+		"background-image",
+		"background-attachment",
+		"background-position",
+		"background-repeat",
+		"background-clip",
+		"background-size",
+		"background-blend-mode",
+		"mask-image"
+	],
+	advanced: ["background-blend-mode", "mask-image"]
+}, l = {
+	title: "Border",
+	dot: [
+		"border-top-style",
+		"border-top-width",
+		"border-top-color",
+		"border-bottom-style",
+		"border-bottom-width",
+		"border-bottom-color",
+		"border-left-style",
+		"border-left-width",
+		"border-left-color",
+		"border-right-style",
+		"border-right-width",
+		"border-right-color",
+		"border-top-left-radius",
+		"border-top-right-radius",
+		"border-bottom-left-radius",
+		"border-bottom-right-radius"
+	],
+	advanced: []
+}, u = {
+	title: "Effects",
+	dot: [
+		"opacity",
+		"visibility",
+		"cursor",
+		"transition",
+		"box-shadow",
+		"filter",
+		"backdrop-filter",
+		"mix-blend-mode",
+		"isolation",
+		"clip-path",
+		"transform",
+		"transform-origin",
+		"perspective",
+		"will-change"
+	],
+	advanced: [
+		"transform-origin",
+		"perspective",
+		"backdrop-filter",
+		"mix-blend-mode",
+		"isolation",
+		"clip-path",
+		"will-change"
+	]
+}, d = {
+	title: "Others",
+	dot: /* @__PURE__ */ "pointer-events.user-select.touch-action.resize.appearance.scroll-behavior.overscroll-behavior.scroll-snap-type.scroll-snap-align.scroll-snap-stop.scroll-padding-top.scroll-margin-top.accent-color.caret-color.color-scheme.scrollbar-width.scrollbar-color.outline-width.outline-style.outline-color.outline-offset.border-collapse.border-spacing.table-layout.fill.stroke.stroke-width".split("."),
+	advanced: [
+		"touch-action",
+		"resize",
+		"appearance",
+		"scroll-behavior",
+		"overscroll-behavior",
+		"scroll-snap-type",
+		"scroll-snap-align",
+		"scroll-snap-stop",
+		"scroll-padding-top",
+		"scroll-margin-top",
+		"accent-color",
+		"caret-color",
+		"color-scheme",
+		"scrollbar-width",
+		"scrollbar-color",
+		"border-collapse",
+		"border-spacing",
+		"table-layout",
+		"fill",
+		"stroke",
+		"stroke-width"
+	]
+}, f = {
+	title: "Variables",
+	dot: [],
+	advanced: []
+}, p = {
+	title: "Raw Style",
+	dot: [],
+	advanced: []
+}, m = {
+	list: e,
+	listItem: t,
+	display: n,
+	displayFlexChild: r,
+	spacing: i,
+	size: a,
+	position: o,
+	typography: s,
+	background: c,
+	border: l,
+	effects: u,
+	others: d,
+	variables: f,
+	rawStyle: p
+}, h = Object.keys(m);
+//#endregion
+export { c as BACKGROUND_KEYS, l as BORDER_KEYS, h as CATEGORY_IDS, m as CATEGORY_KEYS, n as DISPLAY_KEYS, u as EFFECTS_KEYS, r as FLEX_CHILD_KEYS, t as LIST_ITEM_KEYS, e as LIST_KEYS, d as OTHERS_KEYS, o as POSITION_KEYS, p as RAW_STYLE_KEYS, a as SIZE_KEYS, i as SPACING_KEYS, s as TYPOGRAPHY_KEYS, f as VARIABLES_KEYS };

package/dist/components/StyleInspector/components/CategoryContainer/CategoryContainer.mjs

@@ -1,54 +1,59 @@
 import e from "../../hooks/useInspectorValues.mjs";
 import t from "../CategoryAdvanced/CategoryAdvancedContext.mjs";
-import n from "../InspectorDots/index.mjs";
-import { useCallback as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import o from "clsx";
-import s from "@plitzi/plitzi-ui/Icon";
-import c from "@plitzi/plitzi-ui/hooks/useStorage";
-import l from "@plitzi/plitzi-ui/ContainerCollapsable";
+import n from "../../InspectorSearchContext.mjs";
+import { advancedMatches as r } from "../../search.mjs";
+import i from "../InspectorDots/index.mjs";
+import { use as a, useCallback as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import l from "clsx";
+import u from "@plitzi/plitzi-ui/Icon";
+import d from "@plitzi/plitzi-ui/hooks/useStorage";
+import f from "@plitzi/plitzi-ui/ContainerCollapsable";
 //#region src/components/StyleInspector/components/CategoryContainer/CategoryContainer.tsx
-var u = ({ className: u, classNameContent: d, children: f, title: p = "Title", dotKeys: m, advancedKeys: h, isCollapsed: g = !0, onCollapse: _ }) => {
-	let [v, y] = c(`builder-state.styleInspector.advanced.${p}`, !1), { hasValues: b } = e({
-		keys: h,
+var p = ({ className: p, classNameContent: m, children: h, title: g = "Title", dotKeys: _, advancedKeys: v, isCollapsed: y = !0, onCollapse: b }) => {
+	let [x, S] = d(`builder-state.styleInspector.advanced.${g}`, !1), { hasValues: C } = e({
+		keys: v,
 		asValue: !1
-	}), x = r((e) => {
-		e.stopPropagation(), y((e) => !e);
-	}, [y]);
-	return /* @__PURE__ */ a(l, {
-		className: u,
-		collapsed: g,
-		onChange: _,
-		children: [/* @__PURE__ */ i(l.Header, {
-			className: o("h-8", {
-				"border-b border-gray-200 hover:bg-slate-100 dark:border-zinc-700 dark:hover:bg-zinc-700/50": g,
-				"bg-slate-100 dark:bg-zinc-700/50": !g
+	}), w = a(n), T = r(v, w), E = x || T, D = o((e) => {
+		e.stopPropagation(), S((e) => !e);
+	}, [S]);
+	return /* @__PURE__ */ c(f, {
+		className: p,
+		collapsed: y,
+		onChange: b,
+		children: [/* @__PURE__ */ s(f.Header, {
+			className: l("h-8 px-2.5", {
+				"border-b border-gray-200 dark:border-zinc-800": y,
+				"bg-gray-50 dark:bg-zinc-800/60": !y
+			}),
+			title: /* @__PURE__ */ s("span", {
+				className: "text-[13px] font-medium text-zinc-800 dark:text-zinc-100",
+				children: g
 			}),
-			title: p,
 			placement: "right",
-			iconCollapsed: /* @__PURE__ */ i(s, { icon: "fa-solid fa-angle-down" }),
-			iconExpanded: /* @__PURE__ */ i(s, { icon: "fa-solid fa-angle-up" }),
-			children: /* @__PURE__ */ a("div", {
+			iconCollapsed: /* @__PURE__ */ s(u, { icon: "fa-solid fa-angle-down" }),
+			iconExpanded: /* @__PURE__ */ s(u, { icon: "fa-solid fa-angle-up" }),
+			children: /* @__PURE__ */ c("div", {
 				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ i(n, { styleKeys: m }), !!h?.length && !g && /* @__PURE__ */ i(s, {
-					className: o("cursor-pointer text-xs", {
-						"text-blue-500": v,
-						"text-orange-500": !v && b,
-						"text-gray-400 hover:text-gray-600 dark:text-zinc-500 dark:hover:text-zinc-300": !v && !b
+				children: [/* @__PURE__ */ s(i, { styleKeys: _ }), !!v?.length && !y && /* @__PURE__ */ s(u, {
+					className: l("cursor-pointer text-xs", {
+						"text-primary-500 dark:text-primary-400": E,
+						"text-sky-600 dark:text-sky-400": !E && C,
+						"text-gray-400 hover:text-gray-600 dark:text-zinc-500 dark:hover:text-zinc-300": !E && !C
 					}),
 					icon: "fa-solid fa-sliders",
-					title: v ? "Hide advanced properties" : "Show advanced properties",
-					onClick: x
+					title: x ? "Hide advanced properties" : "Show advanced properties",
+					onClick: D
 				})]
 			})
-		}), /* @__PURE__ */ i(l.Content, {
-			className: o("flex flex-col gap-3 p-2", { "border-b border-gray-200 dark:border-zinc-700": !g }, d),
-			children: /* @__PURE__ */ i(t, {
-				value: v,
-				children: f
+		}), /* @__PURE__ */ s(f.Content, {
+			className: l("flex flex-col gap-3 px-2.5 py-3", { "border-b border-gray-200 dark:border-zinc-800": !y }, m),
+			children: /* @__PURE__ */ s(t, {
+				value: E,
+				children: h
 			})
 		})]
 	});
 };
 //#endregion
-export { u as default };
+export { p as default };

package/dist/components/StyleInspector/components/CategoryOption/categoryTypes/OptionIconGroup.mjs

@@ -14,7 +14,8 @@ var a = ({ items: a = [], onChange: o }) => {
 			className: r("cursor-pointer rounded-sm p-0.5", {
 				"bg-zinc-300 dark:bg-zinc-800": e.active,
 				"text-xs": typeof e.icon == "string",
-				"h-5 w-5": e.size !== "custom"
+				"h-5 w-5": e.size !== "custom",
+				"flex-1 justify-center": e.size === "custom"
 			}),
 			active: e.active,
 			onClick: c(e.value),

package/dist/components/StyleInspector/components/CategorySection/CategorySection.mjs

@@ -1,18 +1,33 @@
 import e from "../InspectorLabel/index.mjs";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import r from "@plitzi/plitzi-ui/Flex";
+import { Children as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "clsx";
+import a from "@plitzi/plitzi-ui/Flex";
 //#region src/components/StyleInspector/components/CategorySection/CategorySection.tsx
-var i = ({ children: i, className: a, direction: o = "row", label: s, keys: c }) => /* @__PURE__ */ n(r, {
-	direction: o,
-	gap: 2,
-	justify: s && o === "row" ? "between" : void 0,
-	items: o === "row" ? "center" : void 0,
-	className: a,
-	children: [s && /* @__PURE__ */ t(e, {
-		className: o === "row" ? "w-18" : "w-full",
-		keyValue: c,
-		children: s
-	}), i]
-});
+var o = 2, s = ({ children: s, className: c, direction: l = "row", label: u, keys: d }) => {
+	let f = t.toArray(s).length;
+	return l === "row" && f > o ? /* @__PURE__ */ r("div", {
+		className: i("flex flex-col gap-1", c),
+		children: [u && /* @__PURE__ */ n(e, {
+			className: "w-full",
+			keyValue: d,
+			children: u
+		}), /* @__PURE__ */ n("div", {
+			className: "grid grid-cols-[repeat(auto-fill,minmax(6.5rem,1fr))] items-end gap-2",
+			children: s
+		})]
+	}) : /* @__PURE__ */ r(a, {
+		direction: l,
+		gap: 2,
+		justify: u && l === "row" ? "between" : void 0,
+		items: l === "row" ? "center" : void 0,
+		className: c,
+		children: [u && /* @__PURE__ */ n(e, {
+			className: l === "row" ? "w-20" : "w-full",
+			keyValue: d,
+			children: u
+		}), s]
+	});
+};
 //#endregion
-export { i as default };
+export { s as default };

package/dist/components/StyleInspector/components/ColorSwatch/ColorSwatch.d.ts

@@ -0,0 +1,8 @@
+export type ColorSwatchProps = {
+    className?: string;
+    /** A color, or any background (a gradient, an image) — drawn over a checkerboard so transparency shows. */
+    value: string;
+    property?: 'background-color' | 'background';
+};
+declare const _default: import('react').MemoExoticComponent<({ className, value, property }: ColorSwatchProps) => import('react').JSX.Element>;
+export default _default;

package/dist/components/StyleInspector/components/ColorSwatch/ColorSwatch.mjs

@@ -0,0 +1,23 @@
+import { resolveTokens as e } from "../../cssValues.mjs";
+import t from "../../StyleInspectorContext.mjs";
+import { CHECKERBOARD as n } from "./helpers.mjs";
+import { memo as r, use as i, useMemo as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+import s from "clsx";
+var c = r(({ className: r, value: c, property: l = "background-color" }) => {
+	let { variables: u } = i(t), d = a(() => ({ [l === "background" ? "background" : "backgroundColor"]: e(c, u) }), [
+		l,
+		c,
+		u
+	]);
+	return /* @__PURE__ */ o("span", {
+		className: s("relative inline-flex shrink-0 overflow-hidden rounded ring-1 ring-black/15 ring-inset dark:ring-white/20", r),
+		style: n,
+		children: /* @__PURE__ */ o("span", {
+			className: "absolute inset-0",
+			style: d
+		})
+	});
+});
+//#endregion
+export { c as default };

package/dist/components/StyleInspector/components/ColorSwatch/helpers.d.ts

@@ -0,0 +1,3 @@
+import { CSSProperties } from 'react';
+/** The pattern a transparent color is drawn over, so `transparent` and `rgba(…, 0.2)` read as what they are. */
+export declare const CHECKERBOARD: CSSProperties;

package/dist/components/StyleInspector/components/ColorSwatch/helpers.mjs

@@ -0,0 +1,9 @@
+//#region src/components/StyleInspector/components/ColorSwatch/helpers.ts
+var e = {
+	backgroundImage: "linear-gradient(45deg, #cfcfd8 25%, transparent 25%), linear-gradient(-45deg, #cfcfd8 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #cfcfd8 75%), linear-gradient(-45deg, transparent 75%, #cfcfd8 75%)",
+	backgroundColor: "#ffffff",
+	backgroundSize: "8px 8px",
+	backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0"
+};
+//#endregion
+export { e as CHECKERBOARD };

package/dist/components/StyleInspector/components/ColorSwatch/index.d.ts

@@ -0,0 +1,3 @@
+import { default as ColorSwatch } from './ColorSwatch';
+export * from './ColorSwatch';
+export default ColorSwatch;

package/dist/components/StyleInspector/components/ColorSwatch/index.mjs

@@ -0,0 +1,5 @@
+import e from "./ColorSwatch.mjs";
+//#region src/components/StyleInspector/components/ColorSwatch/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/StyleInspector/components/InspectorDots/InspectorDots.d.ts

@@ -2,5 +2,6 @@ import { StyleCategory } from '@plitzi/sdk-shared';
 export type InspectorDotsProps = {
     styleKeys?: StyleCategory[];
 };
+/** The same four sources a row's label is tinted by, summed up for a whole category while it is folded. */
 declare const InspectorDots: ({ styleKeys }: InspectorDotsProps) => import('react').JSX.Element;
 export default InspectorDots;

package/dist/components/StyleInspector/components/InspectorDots/InspectorDots.mjs

@@ -9,21 +9,21 @@ var r = ({ styleKeys: r }) => {
 	return /* @__PURE__ */ n("div", {
 		className: "flex items-center gap-1.5",
 		children: [
-			i && /* @__PURE__ */ t("div", {
-				className: "h-1.5 w-1.5 rounded-full bg-orange-300",
-				title: "Has Inherit"
-			}),
 			s && /* @__PURE__ */ t("div", {
-				className: "h-1.5 w-1.5 rounded-full bg-blue-300",
-				title: "Has Value"
+				className: "h-1.5 w-1.5 rounded-full bg-sky-500 dark:bg-sky-400",
+				title: "Has values set on this selector"
+			}),
+			o && /* @__PURE__ */ t("div", {
+				className: "h-1.5 w-1.5 rounded-full bg-emerald-500 dark:bg-emerald-400",
+				title: "Uses tokens"
 			}),
 			a && /* @__PURE__ */ t("div", {
-				className: "h-1.5 w-1.5 rounded-full bg-purple-300",
-				title: "Has Binding"
+				className: "h-1.5 w-1.5 rounded-full bg-violet-500 dark:bg-violet-400",
+				title: "Has values bound to data"
 			}),
-			o && /* @__PURE__ */ t("div", {
-				className: "h-1.5 w-1.5 rounded-full bg-green-300",
-				title: "Has Variables"
+			i && /* @__PURE__ */ t("div", {
+				className: "h-1.5 w-1.5 rounded-full bg-amber-500 dark:bg-amber-400",
+				title: "Inherits values from elsewhere"
 			})
 		]
 	});

package/dist/components/StyleInspector/components/InspectorFooter/InspectorFooter.d.ts

@@ -0,0 +1,11 @@
+import { ChangeEvent } from 'react';
+export type InspectorFooterProps = {
+    replaceTokens: boolean;
+    showAllOptions: boolean;
+    canShowAllOptions: boolean;
+    onCollapseAll: () => void;
+    onChangeReplaceTokens: (e: ChangeEvent<HTMLInputElement>) => void;
+    onChangeShowAllOptions: (e: ChangeEvent<HTMLInputElement>) => void;
+};
+declare const InspectorFooter: ({ replaceTokens, showAllOptions, canShowAllOptions, onCollapseAll, onChangeReplaceTokens, onChangeShowAllOptions }: InspectorFooterProps) => import('react').JSX.Element;
+export default InspectorFooter;

package/dist/components/StyleInspector/components/InspectorFooter/InspectorFooter.mjs

@@ -0,0 +1,38 @@
+import { LEGEND as e } from "./helpers.mjs";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "@plitzi/plitzi-ui/Icon";
+import i from "@plitzi/plitzi-ui/Switch";
+//#region src/components/StyleInspector/components/InspectorFooter/InspectorFooter.tsx
+var a = ({ replaceTokens: a, showAllOptions: o, canShowAllOptions: s, onCollapseAll: c, onChangeReplaceTokens: l, onChangeShowAllOptions: u }) => /* @__PURE__ */ n("div", {
+	className: "flex items-center justify-between gap-3 border-t border-gray-200 px-2.5 py-1.5 dark:border-zinc-800",
+	children: [/* @__PURE__ */ n("div", {
+		className: "flex items-center gap-3 text-zinc-500 dark:text-zinc-400",
+		children: [/* @__PURE__ */ t(r, {
+			className: "cursor-pointer text-xs hover:text-zinc-800 dark:hover:text-zinc-100",
+			icon: "fa-solid fa-angles-up",
+			title: "Collapse every category",
+			onClick: c
+		}), /* @__PURE__ */ t(r, {
+			className: "cursor-help text-xs",
+			icon: "fa-solid fa-circle-info",
+			title: e
+		})]
+	}), /* @__PURE__ */ n("div", {
+		className: "flex items-center gap-3 whitespace-nowrap",
+		children: [/* @__PURE__ */ t(i, {
+			size: "xs",
+			label: "Token values",
+			title: "Show what each token resolves to instead of its name",
+			checked: a,
+			onChange: l
+		}), s && /* @__PURE__ */ t(i, {
+			size: "xs",
+			label: "All options",
+			title: "Show every category, including the ones this element does not use",
+			checked: o,
+			onChange: u
+		})]
+	})]
+});
+//#endregion
+export { a as default };

package/dist/components/StyleInspector/components/InspectorFooter/helpers.d.ts

@@ -0,0 +1,2 @@
+/** What the colour of a row's label — and of the dots on a folded category — says about where its value comes from. */
+export declare const LEGEND: string;

package/dist/components/StyleInspector/components/InspectorFooter/helpers.mjs

@@ -0,0 +1,11 @@
+//#region src/components/StyleInspector/components/InspectorFooter/helpers.ts
+var e = [
+	"Label colours",
+	"Blue — set on this selector (click the label to reset it)",
+	"Green — set from a token",
+	"Violet — bound to data",
+	"Amber — inherited from another selector or breakpoint",
+	"Grey — nothing set, the default applies"
+].join("\n");
+//#endregion
+export { e as LEGEND };

package/dist/components/StyleInspector/components/InspectorFooter/index.d.ts

@@ -0,0 +1,3 @@
+import { default as InspectorFooter } from './InspectorFooter';
+export * from './InspectorFooter';
+export default InspectorFooter;

package/dist/components/StyleInspector/components/InspectorFooter/index.mjs

@@ -0,0 +1,5 @@
+import e from "./InspectorFooter.mjs";
+//#region src/components/StyleInspector/components/InspectorFooter/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/StyleInspector/components/InspectorLabel/InspectorLabel.mjs

@@ -1,40 +1,43 @@
-import e from "../../StyleInspectorContext.mjs";
-import t from "../../hooks/useInspectorValues.mjs";
-import { memo as n, use as r, useCallback as i } from "react";
-import { jsx as a } from "react/jsx-runtime";
-import o from "clsx";
-var s = n(({ keyValue: n, children: s, className: c = "", size: l = "small", sectionTitle: u = !1 }) => {
-	let { resetValue: d } = r(e), { hasValues: f, hasInherit: p, hasBinding: m, hasVariables: h } = t({
-		keys: n,
+import { labelHint as e, labelSource as t } from "./helpers.mjs";
+import n from "../../StyleInspectorContext.mjs";
+import r from "../../hooks/useInspectorValues.mjs";
+import { memo as i, use as a, useCallback as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+import c from "clsx";
+var l = i(({ keyValue: i, children: l, className: u = "", size: d = "small", sectionTitle: f = !1 }) => {
+	let { resetValue: p, inheritData: m } = a(n), h = r({
+		keys: i,
 		asValue: !1
-	}), g = i(() => {
-		f && n && d(n);
+	}), { hasValues: g } = h, _ = t(h), v = e(_, g, i, m), y = o(() => {
+		g && i && p(i);
 	}, [
-		d,
-		f,
-		n
+		p,
+		g,
+		i
 	]);
-	return /* @__PURE__ */ a("div", {
-		className: o("inspector__label flex min-w-[50px] shrink-0 items-center select-none", c, {
-			"text-xs": l === "small",
-			"text-sm": l === "medium",
-			"text-base": l === "normal",
-			"mb-[-1px] p-0": u
+	return /* @__PURE__ */ s("div", {
+		className: c("inspector__label flex min-w-[50px] shrink-0 items-center select-none", u, {
+			"text-xs": d === "small",
+			"text-sm": d === "medium",
+			"text-base": d === "normal",
+			"mb-[-1px] p-0": f
 		}),
-		title: typeof s == "string" ? s : void 0,
-		children: /* @__PURE__ */ a("label", {
-			className: o("m-0 truncate", {
-				"px-1": !u,
-				"rounded-tl rounded-tr border border-gray-300 bg-gray-100 px-2 font-bold text-zinc-700 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-200": u,
-				"cursor-pointer bg-blue-200 text-blue-600 dark:bg-blue-900/50 dark:text-blue-400": f && !m && !h,
-				"cursor-pointer bg-green-200 text-green-600 dark:bg-green-900/50 dark:text-green-400": h,
-				"cursor-pointer bg-purple-200 text-purple-600 dark:bg-purple-900/50 dark:text-purple-400": m,
-				"bg-orange-200 text-orange-600 dark:bg-orange-900/50 dark:text-orange-400": p && !f && !h
+		title: v ?? (typeof l == "string" ? l : void 0),
+		children: /* @__PURE__ */ s("label", {
+			className: c("m-0 truncate rounded-sm leading-5 transition-colors duration-150", {
+				"px-1": !f,
+				"rounded-b-none border border-gray-300 bg-gray-100 px-2 font-semibold text-zinc-700 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-200": f,
+				"text-zinc-600 dark:text-zinc-400": !f && _ === "none",
+				"bg-sky-500/12 text-sky-700 dark:bg-sky-400/12 dark:text-sky-300": _ === "value",
+				"bg-emerald-500/12 text-emerald-700 dark:bg-emerald-400/12 dark:text-emerald-300": _ === "variable",
+				"bg-violet-500/12 text-violet-700 dark:bg-violet-400/14 dark:text-violet-300": _ === "binding",
+				"text-amber-700 dark:text-amber-400/90": _ === "inherit",
+				"cursor-pointer hover:bg-red-500/12 hover:text-red-700 hover:line-through dark:hover:bg-red-400/12 dark:hover:text-red-300": g
 			}),
-			onClick: g,
-			children: s
+			onClick: y,
+			children: l
 		})
 	});
 });
 //#endregion
-export { s as default };
+export { l as default };