@histoire/controls 0.10.7 → 0.11.1

package/dist/index.es.js

@@ -1,262 +1,356 @@
-import { defineComponent, openBlock, createElementBlock, withDirectives, createTextVNode, toDisplayString, unref, createElementVNode, renderSlot, ref, computed, watch, createBlock, withKeys, withModifiers, withCtx, normalizeClass, normalizeStyle, mergeProps, onUnmounted, isRef, vModelText, createCommentVNode, Fragment, renderList, createVNode } from "@histoire/vendors/vue";
-import { VTooltip, Dropdown } from "@histoire/vendors/floating-vue";
-import { Icon } from "@histoire/vendors/iconify";
-import { useClipboard } from "@histoire/vendors/vue-use";
-const _hoisted_1$9 = { class: "htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap" };
-const _hoisted_2$7 = { class: "htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0" };
-const _hoisted_3$6 = { class: "htw-grow htw-flex htw-items-center htw-gap-1" };
-const _hoisted_4$4 = { class: "htw-block htw-grow" };
-const __default__$c = {
+import { defineComponent as y, openBlock as i, createElementBlock as w, normalizeClass as b, renderSlot as g, createBlock as f, resolveDynamicComponent as P, withCtx as m, withDirectives as C, createTextVNode as H, toDisplayString as k, unref as d, createElementVNode as h, computed as v, Fragment as N, renderList as A, watch as D, ref as _, withKeys as E, withModifiers as B, createVNode as j, normalizeStyle as V, mergeProps as L, onUnmounted as W, isRef as K, vModelText as G, createCommentVNode as M } from "@histoire/vendors/vue";
+import { VTooltip as O, Dropdown as X } from "@histoire/vendors/floating-vue";
+import { Icon as I } from "@histoire/vendors/iconify";
+import { useClipboard as J } from "@histoire/vendors/vue-use";
+const q = {
+  name: "HstButton"
+}, U = /* @__PURE__ */ y({
+  ...q,
+  props: {
+    color: null
+  },
+  setup(l) {
+    const c = {
+      default: "htw-bg-gray-200 dark:htw-bg-gray-750 htw-text-gray-900 dark:htw-text-gray-100 hover:htw-bg-primary-200 dark:hover:htw-bg-primary-900",
+      primary: "htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white dark:htw-text-black",
+      flat: "htw-bg-transparent hover:htw-bg-gray-500/20 htw-text-gray-900 dark:htw-text-gray-100"
+    };
+    return (n, a) => {
+      var o;
+      return i(), w("button", {
+        class: b(["htw-cursor-pointer htw-rounded-sm", c[(o = l.color) != null ? o : "default"]])
+      }, [
+        g(n.$slots, "default")
+      ], 2);
+    };
+  }
+}), Q = { class: "htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0" }, Y = { class: "htw-grow htw-flex htw-items-center htw-gap-1" }, Z = { class: "htw-block htw-grow" }, tt = {
   name: "HstWrapper"
-};
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
-  ...__default__$c,
+}, S = /* @__PURE__ */ y({
+  ...tt,
   props: {
-    title: null
+    title: null,
+    tag: { default: "label" }
   },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("label", _hoisted_1$9, [
-        withDirectives((openBlock(), createElementBlock("span", _hoisted_2$7, [
-          createTextVNode(toDisplayString(__props.title), 1)
+  setup(l) {
+    return (c, n) => (i(), f(P(l.tag), { class: "htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap" }, {
+      default: m(() => [
+        C((i(), w("span", Q, [
+          H(k(l.title), 1)
         ])), [
-          [unref(VTooltip), {
-            content: __props.title,
+          [d(O), {
+            content: l.title,
             placement: "left",
             distance: 12
           }]
         ]),
-        createElementVNode("span", _hoisted_3$6, [
-          createElementVNode("span", _hoisted_4$4, [
-            renderSlot(_ctx.$slots, "default")
+        h("span", Y, [
+          h("span", Z, [
+            g(c.$slots, "default")
           ]),
-          renderSlot(_ctx.$slots, "actions")
+          g(c.$slots, "actions")
         ])
-      ]);
-    };
+      ]),
+      _: 3
+    }));
   }
-});
-const _hoisted_1$8 = { class: "htw-text-white htw-w-[16px] htw-h-[16px] htw-relative" };
-const _hoisted_2$6 = {
+}), et = { class: "htw-flex htw-gap-px htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 htw-rounded-sm htw-p-px" }, lt = {
+  name: "HstButtonGroup"
+}, nt = /* @__PURE__ */ y({
+  ...lt,
+  props: {
+    title: null,
+    modelValue: null,
+    options: null
+  },
+  emits: ["update:modelValue"],
+  setup(l, { emit: c }) {
+    const n = l, a = v(() => Array.isArray(n.options) ? Object.fromEntries(n.options.map((e) => typeof e == "string" ? [e, e] : [e.value, e.label])) : n.options);
+    function o(e) {
+      c("update:modelValue", e);
+    }
+    return (e, t) => (i(), f(S, {
+      tag: "div",
+      role: "group",
+      title: l.title,
+      class: "htw-flex-nowrap htw-items-center"
+    }, {
+      actions: m(() => [
+        g(e.$slots, "actions")
+      ]),
+      default: m(() => [
+        h("div", et, [
+          (i(!0), w(N, null, A(d(a), (r, s) => (i(), f(U, {
+            key: s,
+            class: "htw-px-1 htw-h-[22px] htw-flex-1 !htw-rounded-[3px]",
+            color: s === l.modelValue ? "primary" : "flat",
+            rounded: !1,
+            onClick: (u) => o(s)
+          }, {
+            default: m(() => [
+              H(k(r), 1)
+            ]),
+            _: 2
+          }, 1032, ["color", "onClick"]))), 128))
+        ])
+      ]),
+      _: 3
+    }, 8, ["title"]));
+  }
+}), st = {
   width: "16",
   height: "16",
   viewBox: "0 0 24 24",
   class: "htw-relative htw-z-10"
-};
-const _hoisted_3$5 = ["stroke-dasharray", "stroke-dashoffset"];
-const __default__$b = {
+}, ot = ["stroke-dasharray", "stroke-dashoffset"], rt = {
+  name: "HstSimpleCheckbox"
+}, F = /* @__PURE__ */ y({
+  ...rt,
+  props: {
+    modelValue: { type: Boolean },
+    withToggle: { type: Boolean }
+  },
+  emits: {
+    "update:modelValue": (l) => !0
+  },
+  setup(l, { emit: c }) {
+    const n = l;
+    function a() {
+      !n.withToggle || c("update:modelValue", !n.modelValue);
+    }
+    D(() => n.modelValue, () => {
+      s.value = !0;
+    });
+    const o = _(), e = _(0), t = v(() => n.modelValue ? 1 : 0), r = v(() => (1 - t.value) * e.value), s = _(!1);
+    return D(o, () => {
+      var u, p, $;
+      e.value = ($ = (p = (u = o.value).getTotalLength) == null ? void 0 : p.call(u)) != null ? $ : 21.21;
+    }), (u, p) => (i(), w("div", {
+      class: b(["htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative", { "htw-cursor-pointer": l.withToggle }]),
+      onClick: a
+    }, [
+      h("div", {
+        class: b(["htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out group-hover:htw-border-primary-500 group-hover:dark:htw-border-primary-500", [
+          l.modelValue ? "htw-border-primary-500 htw-border-8" : "htw-border-black/25 dark:htw-border-white/25 htw-delay-150"
+        ]])
+      }, null, 2),
+      (i(), w("svg", st, [
+        h("path", {
+          ref_key: "path",
+          ref: o,
+          d: "m 4 12 l 5 5 l 10 -10",
+          fill: "none",
+          class: b(["htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out", [
+            s.value ? "htw-transition-all" : "htw-transition-none",
+            {
+              "htw-delay-150": l.modelValue
+            }
+          ]]),
+          "stroke-dasharray": e.value,
+          "stroke-dashoffset": d(r)
+        }, null, 10, ot)
+      ]))
+    ], 2));
+  }
+}), at = {
   name: "HstCheckbox"
-};
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
-  ...__default__$b,
+}, ut = /* @__PURE__ */ y({
+  ...at,
   props: {
     modelValue: { type: Boolean },
     title: null
   },
   emits: {
-    "update:modelValue": (newValue) => true
+    "update:modelValue": (l) => !0
   },
-  setup(__props, { emit }) {
-    const props = __props;
-    function toggle() {
-      emit("update:modelValue", !props.modelValue);
-      animationEnabled.value = true;
+  setup(l, { emit: c }) {
+    const n = l;
+    function a() {
+      c("update:modelValue", !n.modelValue);
     }
-    const path = ref();
-    const dasharray = ref(0);
-    const progress = computed(() => props.modelValue ? 1 : 0);
-    const dashoffset = computed(() => (1 - progress.value) * dasharray.value);
-    const animationEnabled = ref(false);
-    watch(path, () => {
-      var _a, _b, _c;
-      dasharray.value = (_c = (_b = (_a = path.value).getTotalLength) == null ? void 0 : _b.call(_a)) != null ? _c : 21.21;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$c, {
-        role: "checkbox",
-        tabindex: "0",
-        class: "htw-cursor-pointer htw-items-center",
-        title: __props.title,
-        onClick: _cache[0] || (_cache[0] = ($event) => toggle()),
-        onKeydown: [
-          _cache[1] || (_cache[1] = withKeys(withModifiers(($event) => toggle(), ["prevent"]), ["enter"])),
-          _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => toggle(), ["prevent"]), ["space"]))
-        ]
-      }, {
-        actions: withCtx(() => [
-          renderSlot(_ctx.$slots, "actions")
-        ]),
-        default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$8, [
-            createElementVNode("div", {
-              class: normalizeClass(["htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out", [
-                __props.modelValue ? "htw-border-primary-500 htw-border-8" : "htw-border-black/25 dark:htw-border-white/25 htw-delay-150"
-              ]])
-            }, null, 2),
-            (openBlock(), createElementBlock("svg", _hoisted_2$6, [
-              createElementVNode("path", {
-                ref_key: "path",
-                ref: path,
-                d: "m 4 12 l 5 5 l 10 -10",
-                fill: "none",
-                class: normalizeClass(["htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out", [
-                  animationEnabled.value ? "htw-transition-all" : "htw-transition-none",
-                  {
-                    "htw-delay-150": __props.modelValue
-                  }
-                ]]),
-                "stroke-dasharray": dasharray.value,
-                "stroke-dashoffset": unref(dashoffset)
-              }, null, 10, _hoisted_3$5)
-            ]))
-          ])
-        ]),
-        _: 3
-      }, 8, ["title"]);
-    };
+    return (o, e) => (i(), f(S, {
+      role: "checkbox",
+      tabindex: "0",
+      class: "htw-cursor-pointer htw-items-center",
+      title: l.title,
+      onClick: e[0] || (e[0] = (t) => a()),
+      onKeydown: [
+        e[1] || (e[1] = E(B((t) => a(), ["prevent"]), ["enter"])),
+        e[2] || (e[2] = E(B((t) => a(), ["prevent"]), ["space"]))
+      ]
+    }, {
+      actions: m(() => [
+        g(o.$slots, "actions")
+      ]),
+      default: m(() => [
+        j(F, { "model-value": l.modelValue }, null, 8, ["model-value"])
+      ]),
+      _: 3
+    }, 8, ["title"]));
   }
-});
-const _hoisted_1$7 = ["value"];
-const __default__$a = {
+}), it = { class: "-htw-my-1" }, ct = ["for", "onKeydown", "onClick"], ht = {
+  name: "HstCheckboxList"
+}, dt = /* @__PURE__ */ y({
+  ...ht,
+  props: {
+    title: null,
+    modelValue: null,
+    options: null
+  },
+  emits: ["update:modelValue"],
+  setup(l, { emit: c }) {
+    const n = l, a = v(() => Array.isArray(n.options) ? Object.fromEntries(n.options.map((e) => typeof e == "string" ? [e, e] : [e.value, e.label])) : n.options);
+    function o(e) {
+      n.modelValue.includes(e) ? c("update:modelValue", n.modelValue.filter((t) => t !== e)) : c("update:modelValue", [...n.modelValue, e]);
+    }
+    return (e, t) => (i(), f(S, {
+      role: "group",
+      title: l.title,
+      class: b(["htw-cursor-text", e.$attrs.class]),
+      style: V(e.$attrs.style)
+    }, {
+      actions: m(() => [
+        g(e.$slots, "actions")
+      ]),
+      default: m(() => [
+        h("div", it, [
+          (i(!0), w(N, null, A(d(a), (r, s) => (i(), w("label", {
+            key: s,
+            tabindex: "0",
+            for: `${s}-radio`,
+            class: "htw-cursor-pointer htw-flex htw-items-center htw-relative htw-py-1 htw-group",
+            onKeydown: [
+              E(B((u) => o(s), ["prevent"]), ["enter"]),
+              E(B((u) => o(s), ["prevent"]), ["space"])
+            ],
+            onClick: (u) => o(s)
+          }, [
+            j(F, {
+              "model-value": l.modelValue.includes(s),
+              class: "htw-mr-2"
+            }, null, 8, ["model-value"]),
+            H(" " + k(r), 1)
+          ], 40, ct))), 128))
+        ])
+      ]),
+      _: 3
+    }, 8, ["title", "class", "style"]));
+  }
+}), wt = ["value"], pt = {
   name: "HstText"
-};
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
-  ...__default__$a,
+}, mt = /* @__PURE__ */ y({
+  ...pt,
   props: {
     title: null,
     modelValue: null
   },
   emits: {
-    "update:modelValue": (newValue) => true
+    "update:modelValue": (l) => !0
   },
-  setup(__props, { emit }) {
-    const input = ref();
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$c, {
-        title: __props.title,
-        class: normalizeClass(["htw-cursor-text htw-items-center", _ctx.$attrs.class]),
-        style: normalizeStyle(_ctx.$attrs.style),
-        onClick: _cache[1] || (_cache[1] = ($event) => input.value.focus())
-      }, {
-        actions: withCtx(() => [
-          renderSlot(_ctx.$slots, "actions")
-        ]),
-        default: withCtx(() => [
-          createElementVNode("input", mergeProps({
-            ref_key: "input",
-            ref: input
-          }, { ..._ctx.$attrs, class: null, style: null }, {
-            type: "text",
-            value: __props.modelValue,
-            class: "htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm",
-            onInput: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event.target.value))
-          }), null, 16, _hoisted_1$7)
-        ]),
-        _: 3
-      }, 8, ["title", "class", "style"]);
-    };
+  setup(l, { emit: c }) {
+    const n = _();
+    return (a, o) => (i(), f(S, {
+      title: l.title,
+      class: b(["htw-cursor-text htw-items-center", a.$attrs.class]),
+      style: V(a.$attrs.style),
+      onClick: o[1] || (o[1] = (e) => n.value.focus())
+    }, {
+      actions: m(() => [
+        g(a.$slots, "actions")
+      ]),
+      default: m(() => [
+        h("input", L({
+          ref_key: "input",
+          ref: n
+        }, { ...a.$attrs, class: null, style: null }, {
+          type: "text",
+          value: l.modelValue,
+          class: "htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm",
+          onInput: o[0] || (o[0] = (e) => c("update:modelValue", e.target.value))
+        }), null, 16, wt)
+      ]),
+      _: 3
+    }, 8, ["title", "class", "style"]));
   }
-});
-const __default__$9 = {
+}), ft = {
   name: "HstNumber",
-  inheritAttrs: false
-};
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
-  ...__default__$9,
+  inheritAttrs: !1
+}, yt = /* @__PURE__ */ y({
+  ...ft,
   props: {
     title: null,
     modelValue: null
   },
   emits: {
-    "update:modelValue": (newValue) => true
+    "update:modelValue": (l) => !0
   },
-  setup(__props, { emit }) {
-    const props = __props;
-    const numberModel = computed({
-      get: () => props.modelValue,
-      set: (value) => {
-        emit("update:modelValue", value);
+  setup(l, { emit: c }) {
+    const n = l, a = v({
+      get: () => n.modelValue,
+      set: (x) => {
+        c("update:modelValue", x);
       }
-    });
-    const input = ref();
-    function focusAndSelect() {
-      input.value.focus();
-      input.value.select();
+    }), o = _();
+    function e() {
+      o.value.focus(), o.value.select();
     }
-    const isDragging = ref(false);
-    let startX;
-    let startValue;
-    function onMouseDown(event) {
-      isDragging.value = true;
-      startX = event.clientX;
-      startValue = numberModel.value;
-      window.addEventListener("mousemove", onMouseMove);
-      window.addEventListener("mouseup", stopDragging);
+    const t = _(!1);
+    let r, s;
+    function u(x) {
+      t.value = !0, r = x.clientX, s = a.value, window.addEventListener("mousemove", p), window.addEventListener("mouseup", $);
     }
-    function onMouseMove(event) {
-      let step = parseFloat(input.value.step);
-      if (isNaN(step)) {
-        step = 1;
-      }
-      numberModel.value = startValue + Math.round((event.clientX - startX) / 10 / step) * step;
+    function p(x) {
+      let T = parseFloat(o.value.step);
+      isNaN(T) && (T = 1), a.value = s + Math.round((x.clientX - r) / 10 / T) * T;
     }
-    function stopDragging() {
-      isDragging.value = false;
-      window.removeEventListener("mousemove", onMouseMove);
-      window.removeEventListener("mouseup", stopDragging);
+    function $() {
+      t.value = !1, window.removeEventListener("mousemove", p), window.removeEventListener("mouseup", $);
     }
-    onUnmounted(() => {
-      stopDragging();
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$c, {
-        class: normalizeClass(["htw-cursor-ew-resize htw-items-center", [
-          _ctx.$attrs.class,
-          { "htw-select-none": isDragging.value }
-        ]]),
-        title: __props.title,
-        style: normalizeStyle(_ctx.$attrs.style),
-        onClick: focusAndSelect,
-        onMousedown: onMouseDown
-      }, {
-        actions: withCtx(() => [
-          renderSlot(_ctx.$slots, "actions")
-        ]),
-        default: withCtx(() => [
-          withDirectives(createElementVNode("input", mergeProps({
-            ref_key: "input",
-            ref: input
-          }, { ..._ctx.$attrs, class: null, style: null }, {
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(numberModel) ? numberModel.value = $event : null),
-            type: "number",
-            class: [{
-              "htw-select-none": isDragging.value
-            }, "htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-pl-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm htw-cursor-ew-resize"]
-          }), null, 16), [
-            [
-              vModelText,
-              unref(numberModel),
-              void 0,
-              { number: true }
-            ]
-          ])
-        ]),
-        _: 3
-      }, 8, ["title", "class", "style"]);
-    };
+    return W(() => {
+      $();
+    }), (x, T) => (i(), f(S, {
+      class: b(["htw-cursor-ew-resize htw-items-center", [
+        x.$attrs.class,
+        { "htw-select-none": t.value }
+      ]]),
+      title: l.title,
+      style: V(x.$attrs.style),
+      onClick: e,
+      onMousedown: u
+    }, {
+      actions: m(() => [
+        g(x.$slots, "actions")
+      ]),
+      default: m(() => [
+        C(h("input", L({
+          ref_key: "input",
+          ref: o
+        }, { ...x.$attrs, class: null, style: null }, {
+          "onUpdate:modelValue": T[0] || (T[0] = (R) => K(a) ? a.value = R : null),
+          type: "number",
+          class: [{
+            "htw-select-none": t.value
+          }, "htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-pl-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm htw-cursor-ew-resize htw-box-border"]
+        }), null, 16), [
+          [
+            G,
+            d(a),
+            void 0,
+            { number: !0 }
+          ]
+        ])
+      ]),
+      _: 3
+    }, 8, ["title", "class", "style"]));
   }
 });
-var HstSlider_vue_vue_type_style_index_0_lang = "";
-const _hoisted_1$6 = { class: "htw-relative htw-w-full htw-flex htw-items-center" };
-const _hoisted_2$5 = /* @__PURE__ */ createElementVNode("div", { class: "htw-absolute htw-inset-0 htw-flex htw-items-center" }, [
-  /* @__PURE__ */ createElementVNode("div", { class: "htw-border htw-border-black/25 dark:htw-border-white/25 htw-h-1 htw-w-full htw-rounded-full" })
-], -1);
-const __default__$8 = {
+const vt = { class: "htw-relative htw-w-full htw-flex htw-items-center" }, gt = /* @__PURE__ */ h("div", { class: "htw-absolute htw-inset-0 htw-flex htw-items-center" }, [
+  /* @__PURE__ */ h("div", { class: "htw-border htw-border-black/25 dark:htw-border-white/25 htw-h-1 htw-w-full htw-rounded-full" })
+], -1), bt = {
   name: "HstSlider",
-  inheritAttrs: false
-};
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  ...__default__$8,
+  inheritAttrs: !1
+}, _t = /* @__PURE__ */ y({
+  ...bt,
   props: {
     title: null,
     modelValue: null,
@@ -264,604 +358,482 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     max: null
   },
   emits: {
-    "update:modelValue": (newValue) => true
+    "update:modelValue": (l) => !0
   },
-  setup(__props, { emit }) {
-    const props = __props;
-    const showTooltip = ref(false);
-    const input = ref(null);
-    const numberModel = computed({
-      get: () => props.modelValue,
-      set: (value) => {
-        emit("update:modelValue", value);
+  setup(l, { emit: c }) {
+    const n = l, a = _(!1), o = _(null), e = v({
+      get: () => n.modelValue,
+      set: (s) => {
+        c("update:modelValue", s);
       }
-    });
-    const percentage = computed(() => {
-      return (props.modelValue - props.min) / (props.max - props.min);
-    });
-    const tooltipStyle = computed(() => {
-      const gap = 8;
-      if (input.value) {
-        const position = gap + (input.value.clientWidth - 2 * gap) * percentage.value;
-        return {
-          left: position + "px"
-        };
-      }
-      return {};
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$c, {
-        class: normalizeClass(["htw-items-center", _ctx.$attrs.class]),
-        title: __props.title,
-        style: normalizeStyle(_ctx.$attrs.style)
-      }, {
-        default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$6, [
-            _hoisted_2$5,
-            withDirectives(createElementVNode("input", mergeProps({
-              ref_key: "input",
-              ref: input,
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(numberModel) ? numberModel.value = $event : null),
-              class: "htw-range-input htw-appearance-none htw-border-0 htw-bg-transparent htw-cursor-pointer htw-relative htw-w-full htw-m-0 htw-text-gray-700",
-              type: "range"
-            }, { ..._ctx.$attrs, class: null, style: null, min: __props.min, max: __props.max }, {
-              onMouseover: _cache[1] || (_cache[1] = ($event) => showTooltip.value = true),
-              onMouseleave: _cache[2] || (_cache[2] = ($event) => showTooltip.value = false)
-            }), null, 16), [
-              [
-                vModelText,
-                unref(numberModel),
-                void 0,
-                { number: true }
-              ]
-            ]),
-            showTooltip.value ? withDirectives((openBlock(), createElementBlock("div", {
-              key: 0,
-              class: "htw-absolute",
-              style: normalizeStyle(unref(tooltipStyle))
-            }, null, 4)), [
-              [unref(VTooltip), { content: __props.modelValue.toString(), shown: true, distance: 16, delay: 0 }]
-            ]) : createCommentVNode("", true)
-          ])
-        ]),
-        _: 1
-      }, 8, ["title", "class", "style"]);
-    };
+    }), t = v(() => (n.modelValue - n.min) / (n.max - n.min)), r = v(() => o.value ? {
+      left: 8 + (o.value.clientWidth - 16) * t.value + "px"
+    } : {});
+    return (s, u) => (i(), f(S, {
+      class: b(["htw-items-center", s.$attrs.class]),
+      title: l.title,
+      style: V(s.$attrs.style)
+    }, {
+      default: m(() => [
+        h("div", vt, [
+          gt,
+          C(h("input", L({
+            ref_key: "input",
+            ref: o,
+            "onUpdate:modelValue": u[0] || (u[0] = (p) => K(e) ? e.value = p : null),
+            class: "htw-range-input htw-appearance-none htw-border-0 htw-bg-transparent htw-cursor-pointer htw-relative htw-w-full htw-m-0 htw-text-gray-700",
+            type: "range"
+          }, { ...s.$attrs, class: null, style: null, min: l.min, max: l.max }, {
+            onMouseover: u[1] || (u[1] = (p) => a.value = !0),
+            onMouseleave: u[2] || (u[2] = (p) => a.value = !1)
+          }), null, 16), [
+            [
+              G,
+              d(e),
+              void 0,
+              { number: !0 }
+            ]
+          ]),
+          a.value ? C((i(), w("div", {
+            key: 0,
+            class: "htw-absolute",
+            style: V(d(r))
+          }, null, 4)), [
+            [d(O), { content: l.modelValue.toString(), shown: !0, distance: 16, delay: 0 }]
+          ]) : M("", !0)
+        ])
+      ]),
+      _: 1
+    }, 8, ["title", "class", "style"]));
   }
-});
-const _hoisted_1$5 = ["value"];
-const __default__$7 = {
+}), $t = ["value"], xt = {
   name: "HstTextarea",
-  inheritAttrs: false
-};
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-  ...__default__$7,
+  inheritAttrs: !1
+}, kt = /* @__PURE__ */ y({
+  ...xt,
   props: {
     title: null,
     modelValue: null
   },
   emits: {
-    "update:modelValue": (newValue) => true
+    "update:modelValue": (l) => !0
   },
-  setup(__props, { emit }) {
-    const input = ref();
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$c, {
-        title: __props.title,
-        class: normalizeClass(["htw-cursor-text", _ctx.$attrs.class]),
-        style: normalizeStyle(_ctx.$attrs.style),
-        onClick: _cache[1] || (_cache[1] = ($event) => input.value.focus())
-      }, {
-        actions: withCtx(() => [
-          renderSlot(_ctx.$slots, "actions")
-        ]),
-        default: withCtx(() => [
-          createElementVNode("textarea", mergeProps({
-            ref_key: "input",
-            ref: input
-          }, { ..._ctx.$attrs, class: null, style: null }, {
-            value: __props.modelValue,
-            class: "htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm htw-box-border htw-resize-y htw-min-h-[26px]",
-            onInput: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event.target.value))
-          }), null, 16, _hoisted_1$5)
-        ]),
-        _: 3
-      }, 8, ["title", "class", "style"]);
-    };
+  setup(l, { emit: c }) {
+    const n = _();
+    return (a, o) => (i(), f(S, {
+      title: l.title,
+      class: b(["htw-cursor-text", a.$attrs.class]),
+      style: V(a.$attrs.style),
+      onClick: o[1] || (o[1] = (e) => n.value.focus())
+    }, {
+      actions: m(() => [
+        g(a.$slots, "actions")
+      ]),
+      default: m(() => [
+        h("textarea", L({
+          ref_key: "input",
+          ref: n
+        }, { ...a.$attrs, class: null, style: null }, {
+          value: l.modelValue,
+          class: "htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm htw-box-border htw-resize-y htw-min-h-[26px]",
+          onInput: o[0] || (o[0] = (e) => c("update:modelValue", e.target.value))
+        }), null, 16, $t)
+      ]),
+      _: 3
+    }, 8, ["title", "class", "style"]));
   }
 });
-var CustomSelect_vue_vue_type_style_index_0_lang = "";
-const _hoisted_1$4 = { class: "htw-cursor-pointer htw-w-full htw-outline-none htw-px-2 htw-h-[27px] -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 hover:htw-border-primary-500 dark:hover:htw-border-primary-500 htw-rounded-sm htw-flex htw-gap-2 htw-items-center htw-leading-normal" };
-const _hoisted_2$4 = { class: "htw-flex-1 htw-truncate" };
-const _hoisted_3$4 = { class: "htw-flex htw-flex-col htw-bg-gray-50 dark:htw-bg-gray-700" };
-const _hoisted_4$3 = ["onClick"];
-const __default__$6 = {
+const Vt = { class: "htw-cursor-pointer htw-w-full htw-outline-none htw-px-2 htw-h-[27px] -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 hover:htw-border-primary-500 dark:hover:htw-border-primary-500 htw-rounded-sm htw-flex htw-gap-2 htw-items-center htw-leading-normal" }, Ct = { class: "htw-flex-1 htw-truncate" }, Ht = { class: "htw-flex htw-flex-col htw-bg-gray-50 dark:htw-bg-gray-700" }, St = ["onClick"], Mt = {
   name: "CustomSelect"
-};
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
-  ...__default__$6,
+}, Nt = /* @__PURE__ */ y({
+  ...Mt,
   props: {
     modelValue: null,
     options: null
   },
   emits: ["update:modelValue"],
-  setup(__props, { emit: emits }) {
-    const props = __props;
-    const formattedOptions = computed(() => {
-      if (Array.isArray(props.options)) {
-        return props.options.map((option) => {
-          if (typeof option === "string") {
-            return [option, option];
-          } else {
-            return [option.value, option.label];
-          }
-        });
-      } else {
-        return Object.entries(props.options);
-      }
+  setup(l, { emit: c }) {
+    const n = l, a = v(() => Array.isArray(n.options) ? n.options.map((t) => typeof t == "string" ? [t, t] : [t.value, t.label]) : Object.entries(n.options)), o = v(() => {
+      var t;
+      return (t = a.value.find(([r]) => r === n.modelValue)) == null ? void 0 : t[1];
     });
-    const selectedLabel = computed(() => {
-      var _a;
-      return (_a = formattedOptions.value.find(([value]) => value === props.modelValue)) == null ? void 0 : _a[1];
-    });
-    function selectValue(value, hide) {
-      emits("update:modelValue", value);
-      hide();
+    function e(t, r) {
+      c("update:modelValue", t), r();
     }
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Dropdown), { "auto-size": "" }, {
-        popper: withCtx(({ hide }) => [
-          createElementVNode("div", _hoisted_3$4, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(formattedOptions), ([value, label]) => {
-              return openBlock(), createElementBlock("div", mergeProps({ ..._ctx.$attrs, class: null, style: null }, {
-                key: label,
-                class: ["htw-px-2 htw-py-1 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700", {
-                  "htw-bg-primary-200 dark:htw-bg-primary-800": props.modelValue === value
-                }],
-                onClick: ($event) => selectValue(value, hide)
-              }), toDisplayString(label), 17, _hoisted_4$3);
-            }), 128))
-          ])
-        ]),
-        default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$4, [
-            createElementVNode("div", _hoisted_2$4, [
-              renderSlot(_ctx.$slots, "default", { label: unref(selectedLabel) }, () => [
-                createTextVNode(toDisplayString(unref(selectedLabel)), 1)
-              ])
-            ]),
-            createVNode(unref(Icon), {
-              icon: "carbon:chevron-sort",
-              class: "htw-w-4 htw-h-4 htw-flex-none htw-ml-auto"
-            })
-          ])
-        ]),
-        _: 3
-      });
-    };
+    return (t, r) => (i(), f(d(X), { "auto-size": "" }, {
+      popper: m(({ hide: s }) => [
+        h("div", Ht, [
+          (i(!0), w(N, null, A(d(a), ([u, p]) => (i(), w("div", L({ ...t.$attrs, class: null, style: null }, {
+            key: p,
+            class: ["htw-px-2 htw-py-1 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700", {
+              "htw-bg-primary-200 dark:htw-bg-primary-800": n.modelValue === u
+            }],
+            onClick: ($) => e(u, s)
+          }), k(p), 17, St))), 128))
+        ])
+      ]),
+      default: m(() => [
+        h("div", Vt, [
+          h("div", Ct, [
+            g(t.$slots, "default", { label: d(o) }, () => [
+              H(k(d(o)), 1)
+            ])
+          ]),
+          j(d(I), {
+            icon: "carbon:chevron-sort",
+            class: "htw-w-4 htw-h-4 htw-flex-none htw-ml-auto"
+          })
+        ])
+      ]),
+      _: 3
+    }));
   }
-});
-const __default__$5 = {
+}), Tt = {
   name: "HstSelect"
-};
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
-  ...__default__$5,
+}, Ot = /* @__PURE__ */ y({
+  ...Tt,
   props: {
     title: null,
     modelValue: null,
     options: null
   },
   emits: ["update:modelValue"],
-  setup(__props, { emit: emits }) {
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$c, {
-        title: __props.title,
-        class: normalizeClass(["htw-cursor-text htw-items-center", _ctx.$attrs.class]),
-        style: normalizeStyle(_ctx.$attrs.style)
-      }, {
-        actions: withCtx(() => [
-          renderSlot(_ctx.$slots, "actions")
-        ]),
-        default: withCtx(() => [
-          createVNode(_sfc_main$6, {
-            options: __props.options,
-            "model-value": __props.modelValue,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emits("update:modelValue", $event))
-          }, null, 8, ["options", "model-value"])
-        ]),
-        _: 3
-      }, 8, ["title", "class", "style"]);
-    };
+  setup(l, { emit: c }) {
+    return (n, a) => (i(), f(S, {
+      title: l.title,
+      class: b(["htw-cursor-text htw-items-center", n.$attrs.class]),
+      style: V(n.$attrs.style)
+    }, {
+      actions: m(() => [
+        g(n.$slots, "actions")
+      ]),
+      default: m(() => [
+        j(Nt, {
+          options: l.options,
+          "model-value": l.modelValue,
+          "onUpdate:modelValue": a[0] || (a[0] = (o) => c("update:modelValue", o))
+        }, null, 8, ["options", "model-value"])
+      ]),
+      _: 3
+    }, 8, ["title", "class", "style"]));
   }
-});
-const __default__$4 = {
+}), zt = {
   name: "HstCopyIcon"
-};
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  ...__default__$4,
+}, z = /* @__PURE__ */ y({
+  ...zt,
   props: {
     content: null
   },
-  setup(__props) {
-    const props = __props;
-    const { copy, copied } = useClipboard();
-    const action = () => copy(props.content);
-    return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createBlock(unref(Icon), {
-        icon: "carbon:copy-file",
-        class: "htw-w-4 htw-h-4 htw-opacity-50 hover:htw-opacity-100 hover:htw-text-primary-500 htw-cursor-pointer",
-        onClick: _cache[0] || (_cache[0] = ($event) => action())
-      }, null, 512)), [
-        [unref(VTooltip), {
-          content: "Copied!",
-          triggers: [],
-          shown: unref(copied),
-          distance: 12,
-          delay: 0
-        }]
-      ]);
-    };
+  setup(l) {
+    const c = l, { copy: n, copied: a } = J(), o = () => n(c.content);
+    return (e, t) => C((i(), f(d(I), {
+      icon: "carbon:copy-file",
+      class: "htw-w-4 htw-h-4 htw-opacity-50 hover:htw-opacity-100 hover:htw-text-primary-500 htw-cursor-pointer",
+      onClick: t[0] || (t[0] = (r) => o())
+    }, null, 512)), [
+      [d(O), {
+        content: "Copied!",
+        triggers: [],
+        shown: d(a),
+        distance: 12,
+        delay: 0
+      }]
+    ]);
   }
-});
-const _hoisted_1$3 = {
+}), At = {
   key: 0,
   class: "htw-grid htw-gap-4 htw-grid-cols-[repeat(auto-fill,minmax(200px,1fr))] htw-m-4"
-};
-const _hoisted_2$3 = ["onMouseenter"];
-const _hoisted_3$3 = { class: "htw-flex htw-gap-1" };
-const _hoisted_4$2 = { class: "htw-my-0 htw-truncate htw-shrink" };
-const _hoisted_5$2 = { class: "htw-flex htw-gap-1" };
-const _hoisted_6$1 = { class: "htw-my-0 htw-opacity-50 htw-truncate htw-shrink" };
-const __default__$3 = {
+}, Et = ["onMouseenter"], Bt = { class: "htw-flex htw-gap-1" }, Lt = { class: "htw-my-0 htw-truncate htw-shrink" }, jt = { class: "htw-flex htw-gap-1" }, Dt = { class: "htw-my-0 htw-opacity-50 htw-truncate htw-shrink" }, Kt = {
   name: "HstColorShades"
-};
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  ...__default__$3,
+}, Gt = /* @__PURE__ */ y({
+  ...Kt,
   props: {
     shades: null,
     getName: null,
     search: null
   },
-  setup(__props) {
-    const props = __props;
-    const flattenShades = (shades, path = "") => {
-      return Object.entries(shades).reduce((acc, [key, color]) => {
-        const nextPath = path ? key === "DEFAULT" ? path : `${path}-${key}` : key;
-        const obj = typeof color === "object" ? flattenShades(color, nextPath) : { [nextPath]: color };
-        return { ...acc, ...obj };
-      }, {});
-    };
-    const shadesWithName = computed(() => {
-      const shades = props.shades;
-      const getName = props.getName;
-      const flatShades = flattenShades(shades);
-      return Object.entries(flatShades).map(([key, color]) => {
-        const name = getName ? getName(key, color) : key;
+  setup(l) {
+    const c = l, n = (t, r = "") => Object.entries(t).reduce((s, [u, p]) => {
+      const $ = r ? u === "DEFAULT" ? r : `${r}-${u}` : u, x = typeof p == "object" ? n(p, $) : { [$]: p };
+      return { ...s, ...x };
+    }, {}), a = v(() => {
+      const t = c.shades, r = c.getName, s = n(t);
+      return Object.entries(s).map(([u, p]) => {
+        const $ = r ? r(u, p) : u;
         return {
-          key,
-          color,
-          name
+          key: u,
+          color: p,
+          name: $
         };
       });
-    });
-    const displayedShades = computed(() => {
-      let list = shadesWithName.value;
-      if (props.search) {
-        const reg = new RegExp(props.search, "i");
-        list = list.filter(({ name }) => reg.test(name));
+    }), o = v(() => {
+      let t = a.value;
+      if (c.search) {
+        const r = new RegExp(c.search, "i");
+        t = t.filter(({ name: s }) => r.test(s));
       }
-      return list;
-    });
-    const hover = ref(null);
-    return (_ctx, _cache) => {
-      return unref(displayedShades).length ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(displayedShades), (shade) => {
-          return openBlock(), createElementBlock("div", {
-            key: shade.key,
-            class: "htw-flex htw-flex-col htw-gap-2",
-            onMouseenter: ($event) => hover.value = shade.key,
-            onMouseleave: _cache[0] || (_cache[0] = ($event) => hover.value = null)
-          }, [
-            renderSlot(_ctx.$slots, "default", {
-              color: shade.color
-            }, () => [
-              createElementVNode("div", {
-                class: "htw-rounded-full htw-w-16 htw-h-16",
-                style: normalizeStyle({
-                  backgroundColor: shade.color
-                })
-              }, null, 4)
+      return t;
+    }), e = _(null);
+    return (t, r) => d(o).length ? (i(), w("div", At, [
+      (i(!0), w(N, null, A(d(o), (s) => (i(), w("div", {
+        key: s.key,
+        class: "htw-flex htw-flex-col htw-gap-2",
+        onMouseenter: (u) => e.value = s.key,
+        onMouseleave: r[0] || (r[0] = (u) => e.value = null)
+      }, [
+        g(t.$slots, "default", {
+          color: s.color
+        }, () => [
+          h("div", {
+            class: "htw-rounded-full htw-w-16 htw-h-16",
+            style: V({
+              backgroundColor: s.color
+            })
+          }, null, 4)
+        ]),
+        h("div", null, [
+          h("div", Bt, [
+            C((i(), w("pre", Lt, [
+              H(k(s.name), 1)
+            ])), [
+              [d(O), s.name.length > 23 ? s.name : ""]
             ]),
-            createElementVNode("div", null, [
-              createElementVNode("div", _hoisted_3$3, [
-                withDirectives((openBlock(), createElementBlock("pre", _hoisted_4$2, [
-                  createTextVNode(toDisplayString(shade.name), 1)
-                ])), [
-                  [unref(VTooltip), shade.name.length > 23 ? shade.name : ""]
-                ]),
-                hover.value === shade.key ? (openBlock(), createBlock(_sfc_main$4, {
-                  key: 0,
-                  content: shade.name,
-                  class: "htw-flex-none"
-                }, null, 8, ["content"])) : createCommentVNode("", true)
-              ]),
-              createElementVNode("div", _hoisted_5$2, [
-                withDirectives((openBlock(), createElementBlock("pre", _hoisted_6$1, [
-                  createTextVNode(toDisplayString(shade.color), 1)
-                ])), [
-                  [unref(VTooltip), shade.color.length > 23 ? shade.color : ""]
-                ]),
-                hover.value === shade.key ? (openBlock(), createBlock(_sfc_main$4, {
-                  key: 0,
-                  content: shade.color,
-                  class: "htw-flex-none"
-                }, null, 8, ["content"])) : createCommentVNode("", true)
-              ])
-            ])
-          ], 40, _hoisted_2$3);
-        }), 128))
-      ])) : createCommentVNode("", true);
-    };
+            e.value === s.key ? (i(), f(z, {
+              key: 0,
+              content: s.name,
+              class: "htw-flex-none"
+            }, null, 8, ["content"])) : M("", !0)
+          ]),
+          h("div", jt, [
+            C((i(), w("pre", Dt, [
+              H(k(s.color), 1)
+            ])), [
+              [d(O), s.color.length > 23 ? s.color : ""]
+            ]),
+            e.value === s.key ? (i(), f(z, {
+              key: 0,
+              content: s.color,
+              class: "htw-flex-none"
+            }, null, 8, ["content"])) : M("", !0)
+          ])
+        ])
+      ], 40, Et))), 128))
+    ])) : M("", !0);
   }
-});
-const _hoisted_1$2 = ["onMouseenter"];
-const _hoisted_2$2 = { class: "htw-mx-4" };
-const _hoisted_3$2 = { class: "htw-flex htw-gap-1" };
-const _hoisted_4$1 = { class: "htw-my-0 htw-truncate htw-shrink" };
-const _hoisted_5$1 = { class: "htw-flex htw-gap-1" };
-const _hoisted_6 = { class: "htw-my-0 htw-opacity-50 htw-truncate htw-shrink" };
-const __default__$2 = {
+}), It = ["onMouseenter"], Ut = { class: "htw-mx-4" }, Ft = { class: "htw-flex htw-gap-1" }, Rt = { class: "htw-my-0 htw-truncate htw-shrink" }, Pt = { class: "htw-flex htw-gap-1" }, Wt = { class: "htw-my-0 htw-opacity-50 htw-truncate htw-shrink" }, Xt = {
   name: "HstTokenList"
-};
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  ...__default__$2,
+}, Jt = /* @__PURE__ */ y({
+  ...Xt,
   props: {
     tokens: null,
     getName: null
   },
-  setup(__props) {
-    const props = __props;
-    const processedTokens = computed(() => {
-      const list = props.tokens;
-      const getName = props.getName;
-      return Object.entries(list).map(([key, value]) => {
-        const name = getName ? getName(key, value) : key;
+  setup(l) {
+    const c = l, n = v(() => {
+      const o = c.tokens, e = c.getName;
+      return Object.entries(o).map(([t, r]) => {
+        const s = e ? e(t, r) : t;
         return {
-          key,
-          name,
-          value: typeof value === "number" ? value.toString() : value
+          key: t,
+          name: s,
+          value: typeof r == "number" ? r.toString() : r
         };
       });
-    });
-    const hover = ref(null);
-    return (_ctx, _cache) => {
-      return openBlock(true), createElementBlock(Fragment, null, renderList(unref(processedTokens), (token) => {
-        return openBlock(), createElementBlock("div", {
-          key: token.key,
-          class: "htw-flex htw-flex-col htw-gap-2 htw-my-8",
-          onMouseenter: ($event) => hover.value = token.key,
-          onMouseleave: _cache[0] || (_cache[0] = ($event) => hover.value = null)
-        }, [
-          renderSlot(_ctx.$slots, "default", { token }),
-          createElementVNode("div", _hoisted_2$2, [
-            createElementVNode("div", _hoisted_3$2, [
-              createElementVNode("pre", _hoisted_4$1, toDisplayString(token.name), 1),
-              hover.value === token.key ? (openBlock(), createBlock(_sfc_main$4, {
-                key: 0,
-                content: token.name,
-                class: "htw-flex-none"
-              }, null, 8, ["content"])) : createCommentVNode("", true)
-            ]),
-            createElementVNode("div", _hoisted_5$1, [
-              createElementVNode("pre", _hoisted_6, toDisplayString(token.value), 1),
-              hover.value === token.key ? (openBlock(), createBlock(_sfc_main$4, {
-                key: 0,
-                content: typeof token.value === "string" ? token.value : JSON.stringify(token.value),
-                class: "htw-flex-none"
-              }, null, 8, ["content"])) : createCommentVNode("", true)
-            ])
-          ])
-        ], 40, _hoisted_1$2);
-      }), 128);
-    };
+    }), a = _(null);
+    return (o, e) => (i(!0), w(N, null, A(d(n), (t) => (i(), w("div", {
+      key: t.key,
+      class: "htw-flex htw-flex-col htw-gap-2 htw-my-8",
+      onMouseenter: (r) => a.value = t.key,
+      onMouseleave: e[0] || (e[0] = (r) => a.value = null)
+    }, [
+      g(o.$slots, "default", { token: t }),
+      h("div", Ut, [
+        h("div", Ft, [
+          h("pre", Rt, k(t.name), 1),
+          a.value === t.key ? (i(), f(z, {
+            key: 0,
+            content: t.name,
+            class: "htw-flex-none"
+          }, null, 8, ["content"])) : M("", !0)
+        ]),
+        h("div", Pt, [
+          h("pre", Wt, k(t.value), 1),
+          a.value === t.key ? (i(), f(z, {
+            key: 0,
+            content: typeof t.value == "string" ? t.value : JSON.stringify(t.value),
+            class: "htw-flex-none"
+          }, null, 8, ["content"])) : M("", !0)
+        ])
+      ])
+    ], 40, It))), 128));
   }
 });
-var HstTokenGrid_vue_vue_type_style_index_0_lang = "";
-const _hoisted_1$1 = ["onMouseenter"];
-const _hoisted_2$1 = { class: "htw-flex htw-gap-1" };
-const _hoisted_3$1 = { class: "htw-my-0 htw-truncate htw-shrink" };
-const _hoisted_4 = { class: "htw-flex htw-gap-1" };
-const _hoisted_5 = { class: "htw-my-0 htw-opacity-50 htw-truncate htw-shrink" };
-const __default__$1 = {
+const qt = ["onMouseenter"], Qt = { class: "htw-flex htw-gap-1" }, Yt = { class: "htw-my-0 htw-truncate htw-shrink" }, Zt = { class: "htw-flex htw-gap-1" }, te = { class: "htw-my-0 htw-opacity-50 htw-truncate htw-shrink" }, ee = {
   name: "HstTokenGrid"
-};
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  ...__default__$1,
+}, le = /* @__PURE__ */ y({
+  ...ee,
   props: {
     tokens: null,
     colSize: { default: 180 },
     getName: { type: Function, default: null }
   },
-  setup(__props) {
-    const props = __props;
-    const processedTokens = computed(() => {
-      const list = props.tokens;
-      const getName = props.getName;
-      return Object.entries(list).map(([key, value]) => {
-        const name = getName ? getName(key, value) : key;
+  setup(l) {
+    const c = l, n = v(() => {
+      const e = c.tokens, t = c.getName;
+      return Object.entries(e).map(([r, s]) => {
+        const u = t ? t(r, s) : r;
         return {
-          key,
-          name,
-          value: typeof value === "number" ? value.toString() : value
+          key: r,
+          name: u,
+          value: typeof s == "number" ? s.toString() : s
         };
       });
-    });
-    const colSizePx = computed(() => `${props.colSize}px`);
-    const hover = ref(null);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: "htw-bind-col-size htw-grid htw-gap-4 htw-m-4",
-        style: normalizeStyle({
-          "--histoire-col-size": unref(colSizePx)
-        })
+    }), a = v(() => `${c.colSize}px`), o = _(null);
+    return (e, t) => (i(), w("div", {
+      class: "htw-bind-col-size htw-grid htw-gap-4 htw-m-4",
+      style: V({
+        "--histoire-col-size": d(a)
+      })
+    }, [
+      (i(!0), w(N, null, A(d(n), (r) => (i(), w("div", {
+        key: r.key,
+        class: "htw-flex htw-flex-col htw-gap-2",
+        onMouseenter: (s) => o.value = r.key,
+        onMouseleave: t[0] || (t[0] = (s) => o.value = null)
       }, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(processedTokens), (token) => {
-          return openBlock(), createElementBlock("div", {
-            key: token.key,
-            class: "htw-flex htw-flex-col htw-gap-2",
-            onMouseenter: ($event) => hover.value = token.key,
-            onMouseleave: _cache[0] || (_cache[0] = ($event) => hover.value = null)
-          }, [
-            renderSlot(_ctx.$slots, "default", { token }),
-            createElementVNode("div", null, [
-              createElementVNode("div", _hoisted_2$1, [
-                withDirectives((openBlock(), createElementBlock("pre", _hoisted_3$1, [
-                  createTextVNode(toDisplayString(token.name), 1)
-                ])), [
-                  [unref(VTooltip), token.name.length > __props.colSize / 8 ? token.name : ""]
-                ]),
-                hover.value === token.key ? (openBlock(), createBlock(_sfc_main$4, {
-                  key: 0,
-                  content: token.name,
-                  class: "htw-flex-none"
-                }, null, 8, ["content"])) : createCommentVNode("", true)
-              ]),
-              createElementVNode("div", _hoisted_4, [
-                withDirectives((openBlock(), createElementBlock("pre", _hoisted_5, [
-                  createTextVNode(toDisplayString(token.value), 1)
-                ])), [
-                  [unref(VTooltip), token.value.length > __props.colSize / 8 ? token.value : ""]
-                ]),
-                hover.value === token.key ? (openBlock(), createBlock(_sfc_main$4, {
-                  key: 0,
-                  content: typeof token.value === "string" ? token.value : JSON.stringify(token.value),
-                  class: "htw-flex-none"
-                }, null, 8, ["content"])) : createCommentVNode("", true)
-              ])
-            ])
-          ], 40, _hoisted_1$1);
-        }), 128))
-      ], 4);
-    };
+        g(e.$slots, "default", { token: r }),
+        h("div", null, [
+          h("div", Qt, [
+            C((i(), w("pre", Yt, [
+              H(k(r.name), 1)
+            ])), [
+              [d(O), r.name.length > l.colSize / 8 ? r.name : ""]
+            ]),
+            o.value === r.key ? (i(), f(z, {
+              key: 0,
+              content: r.name,
+              class: "htw-flex-none"
+            }, null, 8, ["content"])) : M("", !0)
+          ]),
+          h("div", Zt, [
+            C((i(), w("pre", te, [
+              H(k(r.value), 1)
+            ])), [
+              [d(O), r.value.length > l.colSize / 8 ? r.value : ""]
+            ]),
+            o.value === r.key ? (i(), f(z, {
+              key: 0,
+              content: typeof r.value == "string" ? r.value : JSON.stringify(r.value),
+              class: "htw-flex-none"
+            }, null, 8, ["content"])) : M("", !0)
+          ])
+        ])
+      ], 40, qt))), 128))
+    ], 4));
   }
-});
-const _hoisted_1 = { class: "-htw-my-1" };
-const _hoisted_2 = ["id", "name", "value", "checked", "onChange"];
-const _hoisted_3 = ["for", "onKeydown"];
-const __default__ = {
+}), ne = { class: "-htw-my-1" }, se = ["id", "name", "value", "checked", "onChange"], oe = ["for", "onKeydown"], re = {
   name: "HstRadio"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
+}, ae = /* @__PURE__ */ y({
+  ...re,
   props: {
     title: null,
     modelValue: null,
     options: null
   },
   emits: ["update:modelValue"],
-  setup(__props, { emit }) {
-    const props = __props;
-    const formattedOptions = computed(() => {
-      if (Array.isArray(props.options)) {
-        return Object.fromEntries(props.options.map((value) => {
-          if (typeof value === "string") {
-            return [value, value];
-          } else {
-            return [value.value, value.label];
-          }
-        }));
-      }
-      return props.options;
-    });
-    function selectOption(value) {
-      emit("update:modelValue", value);
-      animationEnabled.value = true;
+  setup(l, { emit: c }) {
+    const n = l, a = v(() => Array.isArray(n.options) ? Object.fromEntries(n.options.map((t) => typeof t == "string" ? [t, t] : [t.value, t.label])) : n.options);
+    function o(t) {
+      c("update:modelValue", t), e.value = !0;
     }
-    const animationEnabled = ref(false);
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$c, {
-        role: "group",
-        title: __props.title,
-        class: normalizeClass(["htw-cursor-text", _ctx.$attrs.class]),
-        style: normalizeStyle(_ctx.$attrs.style)
-      }, {
-        actions: withCtx(() => [
-          renderSlot(_ctx.$slots, "actions")
-        ]),
-        default: withCtx(() => [
-          createElementVNode("div", _hoisted_1, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(formattedOptions), (label, value) => {
-              return openBlock(), createElementBlock(Fragment, { key: value }, [
-                createElementVNode("input", {
-                  id: `${value}-radio`,
-                  type: "radio",
-                  name: `${value}-radio`,
-                  value,
-                  checked: value === __props.modelValue,
-                  class: "htw-hidden",
-                  onChange: ($event) => selectOption(value)
-                }, null, 40, _hoisted_2),
-                createElementVNode("label", {
-                  tabindex: "0",
-                  for: `${value}-radio`,
-                  class: "htw-cursor-pointer htw-flex htw-items-center htw-relative htw-py-1 htw-group",
-                  onKeydown: [
-                    withKeys(withModifiers(($event) => selectOption(value), ["prevent"]), ["enter"]),
-                    withKeys(withModifiers(($event) => selectOption(value), ["prevent"]), ["space"])
-                  ]
-                }, [
-                  (openBlock(), createElementBlock("svg", {
-                    width: "16",
-                    height: "16",
-                    viewBox: "-12 -12 24 24",
-                    class: normalizeClass(["htw-relative htw-z-10 htw-border htw-border-solid htw-text-inherit htw-rounded-full htw-box-border htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out htw-mr-2 group-hover:htw-border-primary-500", [
-                      __props.modelValue === value ? "htw-border-primary-500" : "htw-border-black/25 dark:htw-border-white/25"
-                    ]])
-                  }, [
-                    createElementVNode("circle", {
-                      r: "7",
-                      class: normalizeClass(["htw-will-change-transform", [
-                        animationEnabled.value ? "htw-transition-all" : "htw-transition-none",
-                        {
-                          "htw-delay-150": __props.modelValue === value
-                        },
-                        __props.modelValue === value ? "htw-fill-primary-500" : "htw-fill-transparent htw-scale-0"
-                      ]])
-                    }, null, 2)
-                  ], 2)),
-                  createTextVNode(" " + toDisplayString(label), 1)
-                ], 40, _hoisted_3)
-              ], 64);
-            }), 128))
-          ])
-        ]),
-        _: 3
-      }, 8, ["title", "class", "style"]);
-    };
+    const e = _(!1);
+    return (t, r) => (i(), f(S, {
+      role: "group",
+      title: l.title,
+      class: b(["htw-cursor-text", t.$attrs.class]),
+      style: V(t.$attrs.style)
+    }, {
+      actions: m(() => [
+        g(t.$slots, "actions")
+      ]),
+      default: m(() => [
+        h("div", ne, [
+          (i(!0), w(N, null, A(d(a), (s, u) => (i(), w(N, { key: u }, [
+            h("input", {
+              id: `${u}-radio`,
+              type: "radio",
+              name: `${u}-radio`,
+              value: u,
+              checked: u === l.modelValue,
+              class: "htw-hidden",
+              onChange: (p) => o(u)
+            }, null, 40, se),
+            h("label", {
+              tabindex: "0",
+              for: `${u}-radio`,
+              class: "htw-cursor-pointer htw-flex htw-items-center htw-relative htw-py-1 htw-group",
+              onKeydown: [
+                E(B((p) => o(u), ["prevent"]), ["enter"]),
+                E(B((p) => o(u), ["prevent"]), ["space"])
+              ]
+            }, [
+              (i(), w("svg", {
+                width: "16",
+                height: "16",
+                viewBox: "-12 -12 24 24",
+                class: b(["htw-relative htw-z-10 htw-border htw-border-solid htw-text-inherit htw-rounded-full htw-box-border htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out htw-mr-2 group-hover:htw-border-primary-500", [
+                  l.modelValue === u ? "htw-border-primary-500" : "htw-border-black/25 dark:htw-border-white/25"
+                ]])
+              }, [
+                h("circle", {
+                  r: "7",
+                  class: b(["htw-will-change-transform", [
+                    e.value ? "htw-transition-all" : "htw-transition-none",
+                    {
+                      "htw-delay-150": l.modelValue === u
+                    },
+                    l.modelValue === u ? "htw-fill-primary-500" : "htw-fill-transparent htw-scale-0"
+                  ]])
+                }, null, 2)
+              ], 2)),
+              H(" " + k(s), 1)
+            ], 40, oe)
+          ], 64))), 128))
+        ])
+      ]),
+      _: 3
+    }, 8, ["title", "class", "style"]));
   }
-});
-const HstCheckbox = _sfc_main$b;
-const HstText = _sfc_main$a;
-const HstNumber = _sfc_main$9;
-const HstSlider = _sfc_main$8;
-const HstTextarea = _sfc_main$7;
-const HstSelect = _sfc_main$5;
-const HstColorShades = _sfc_main$3;
-const HstTokenList = _sfc_main$2;
-const HstTokenGrid = _sfc_main$1;
-const HstCopyIcon = _sfc_main$4;
-const HstRadio = _sfc_main;
-const components = {
-  HstCheckbox,
-  HstText,
-  HstNumber,
-  HstSlider,
-  HstTextarea,
-  HstSelect,
-  HstColorShades,
-  HstTokenList,
-  HstTokenGrid,
-  HstCopyIcon,
-  HstRadio
+}), ue = U, ie = nt, ce = ut, he = dt, de = mt, we = yt, pe = _t, me = kt, fe = Ot, ye = Gt, ve = Jt, ge = le, be = z, _e = ae, Ce = {
+  HstButton: ue,
+  HstButtonGroup: ie,
+  HstCheckbox: ce,
+  HstCheckboxList: he,
+  HstText: de,
+  HstNumber: we,
+  HstSlider: pe,
+  HstTextarea: me,
+  HstSelect: fe,
+  HstColorShades: ye,
+  HstTokenList: ve,
+  HstTokenGrid: ge,
+  HstCopyIcon: be,
+  HstRadio: _e
+};
+export {
+  ue as HstButton,
+  ie as HstButtonGroup,
+  ce as HstCheckbox,
+  he as HstCheckboxList,
+  ye as HstColorShades,
+  be as HstCopyIcon,
+  we as HstNumber,
+  _e as HstRadio,
+  fe as HstSelect,
+  pe as HstSlider,
+  de as HstText,
+  me as HstTextarea,
+  ge as HstTokenGrid,
+  ve as HstTokenList,
+  Ce as components
 };
-export { HstCheckbox, HstColorShades, HstCopyIcon, HstNumber, HstRadio, HstSelect, HstSlider, HstText, HstTextarea, HstTokenGrid, HstTokenList, components };