@histoire/controls 0.7.4 → 0.7.7

package/.histoire/dist/assets/{vendor.2833ae3d.js → vendor.31c91490.js}

@@ -10991,7 +10991,7 @@ const _sfc_main$7 = defineComponent({
 });
 const _hoisted_1$3 = ["innerHTML"];
 const _hoisted_2$2 = ["textContent"];
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_PopperContent = resolveComponent("PopperContent");
   const _component_Popper = resolveComponent("Popper");
   return openBlock(), createBlock(_component_Popper, mergeProps({ ref: "popper" }, _ctx.$attrs, {
@@ -11044,7 +11044,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 16, ["theme", "popper-node", "onApplyShow", "onApplyHide"]);
 }
-var PrivateTooltipDirective = /* @__PURE__ */ _export_sfc$1(_sfc_main$7, [["render", _sfc_render]]);
+var PrivateTooltipDirective = /* @__PURE__ */ _export_sfc$1(_sfc_main$7, [["render", _sfc_render$4]]);
 const TARGET_CLASS = "v-popper--has-tooltip";
 function getPlacement(options2, modifiers) {
   let result = options2.placement;
@@ -16294,16 +16294,6 @@ var _export_sfc = (sfc, props) => {
   return target;
 };
 var Tailwind_story_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _withScopeId = (n2) => (pushScopeId("data-v-9e4c73b2"), n2 = n2(), popScopeId(), n2);
-const _hoisted_1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("div", { class: "padding-box" }, null, -1));
-const _hoisted_2 = [
-  _hoisted_1
-];
-const _hoisted_3 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("div", { class: "margin-box" }, null, -1));
-const _hoisted_4 = [
-  _hoisted_3
-];
-const _hoisted_5 = { class: "width" };
 const _sfc_main = {
   name: "Tailwind.story",
   setup(__props, { expose }) {
@@ -22843,7 +22833,6 @@ const _sfc_main = {
         "content"
       ],
       "plugins": [],
-      "prefix": "htw-",
       "content": {
         "files": [
           "./src/**/*.{vue,js,ts,jsx,tsx,md}"
@@ -22852,8 +22841,8 @@ const _sfc_main = {
         "transform": {}
       },
       "darkMode": "class",
+      "prefix": "htw-",
       "default": {
-        "prefix": "htw-",
         "theme": {
           "extend": {
             "colors": {
@@ -22928,7 +22917,8 @@ const _sfc_main = {
         "corePlugins": {
           "preflight": false
         },
-        "plugins": []
+        "plugins": [],
+        "prefix": "htw-"
       },
       "presets": [],
       "variantOrder": [
@@ -22961,536 +22951,549 @@ const _sfc_main = {
       sampleText,
       fontSize
     });
-    return (_ctx, _cache) => {
-      const _component_HstColorShades = resolveComponent("HstColorShades");
-      const _component_HstText = resolveComponent("HstText");
-      const _component_Variant = resolveComponent("Variant");
-      const _component_HstTokenList = resolveComponent("HstTokenList");
-      const _component_HstTextarea = resolveComponent("HstTextarea");
-      const _component_HstNumber = resolveComponent("HstNumber");
-      const _component_HstTokenGrid = resolveComponent("HstTokenGrid");
-      const _component_Story = resolveComponent("Story");
-      return openBlock(), createBlock(_component_Story, {
-        id: "tailwind",
-        title: "Tailwind",
-        group: "design-system",
-        icon: "mdi:tailwind",
-        responsiveDisabled: "",
-        layout: { type: "single", iframe: false }
+    const __returned__ = { config: config2, search, sampleText, fontSize, ref };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+};
+const _withScopeId = (n2) => (pushScopeId("data-v-9e4c73b2"), n2 = n2(), popScopeId(), n2);
+const _hoisted_1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("div", { class: "padding-box" }, null, -1));
+const _hoisted_2 = [
+  _hoisted_1
+];
+const _hoisted_3 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("div", { class: "margin-box" }, null, -1));
+const _hoisted_4 = [
+  _hoisted_3
+];
+const _hoisted_5 = { class: "width" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_HstColorShades = resolveComponent("HstColorShades");
+  const _component_HstText = resolveComponent("HstText");
+  const _component_Variant = resolveComponent("Variant");
+  const _component_HstTokenList = resolveComponent("HstTokenList");
+  const _component_HstTextarea = resolveComponent("HstTextarea");
+  const _component_HstNumber = resolveComponent("HstNumber");
+  const _component_HstTokenGrid = resolveComponent("HstTokenGrid");
+  const _component_Story = resolveComponent("Story");
+  return openBlock(), createBlock(_component_Story, {
+    id: "tailwind",
+    title: "Tailwind",
+    group: "design-system",
+    icon: "mdi:tailwind",
+    responsiveDisabled: "",
+    layout: { type: "single", iframe: false }
+  }, {
+    default: withCtx(() => [
+      createVNode(_component_Variant, {
+        id: "background-color",
+        title: "Background Color",
+        icon: "carbon:color-palette"
       }, {
+        controls: withCtx(() => [
+          createVNode(_component_HstText, {
+            modelValue: $setup.search,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $setup.search = $event),
+            title: "Filter..."
+          }, null, 8, ["modelValue"])
+        ]),
         default: withCtx(() => [
-          createVNode(_component_Variant, {
-            id: "background-color",
-            title: "Background Color",
-            icon: "carbon:color-palette"
-          }, {
-            controls: withCtx(() => [
-              createVNode(_component_HstText, {
-                modelValue: search.value,
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => search.value = $event),
-                title: "Filter..."
-              }, null, 8, ["modelValue"])
-            ]),
-            default: withCtx(() => [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(config2.theme.backgroundColor, (shades, key) => {
-                return openBlock(), createBlock(_component_HstColorShades, {
-                  key,
-                  shades: typeof shades === "object" ? shades : { DEFAULT: shades },
-                  "get-name": (shade) => {
-                    var _a2;
-                    return ((_a2 = config2.prefix) != null ? _a2 : "") + (shade === "DEFAULT" ? `bg-${key}` : `bg-${key}-${shade}`);
-                  },
-                  search: search.value
-                }, {
-                  default: withCtx(({ color }) => [
-                    createBaseVNode("div", {
-                      class: "shade",
-                      style: normalizeStyle({
-                        backgroundColor: color
-                      })
-                    }, null, 4)
-                  ]),
-                  _: 2
-                }, 1032, ["shades", "get-name", "search"]);
-              }), 128))
-            ]),
-            _: 1
-          }),
-          createVNode(_component_Variant, {
-            id: "text-color",
-            title: "Text Color",
-            icon: "carbon:text-color"
-          }, {
-            controls: withCtx(() => [
-              createVNode(_component_HstText, {
-                modelValue: search.value,
-                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => search.value = $event),
-                title: "Filter..."
-              }, null, 8, ["modelValue"])
-            ]),
-            default: withCtx(() => [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(config2.theme.textColor, (shades, key) => {
-                return openBlock(), createBlock(_component_HstColorShades, {
-                  key,
-                  shades: typeof shades === "object" ? shades : { DEFAULT: shades },
-                  "get-name": (shade) => {
-                    var _a2;
-                    return ((_a2 = config2.prefix) != null ? _a2 : "") + (shade === "DEFAULT" ? `text-${key}` : `text-${key}-${shade}`);
-                  },
-                  search: search.value
-                }, {
-                  default: withCtx(({ color }) => [
-                    createBaseVNode("div", {
-                      class: "shade text",
-                      style: normalizeStyle({
-                        color
-                      })
-                    }, " Aa ", 4)
-                  ]),
-                  _: 2
-                }, 1032, ["shades", "get-name", "search"]);
-              }), 128))
-            ]),
-            _: 1
-          }),
-          createVNode(_component_Variant, {
-            id: "border-color",
-            title: "Border Color",
-            icon: "carbon:color-palette"
-          }, {
-            controls: withCtx(() => [
-              createVNode(_component_HstText, {
-                modelValue: search.value,
-                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => search.value = $event),
-                title: "Filter..."
-              }, null, 8, ["modelValue"])
-            ]),
-            default: withCtx(() => [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(config2.theme.borderColor, (shades, key) => {
-                return openBlock(), createBlock(_component_HstColorShades, {
-                  key,
-                  shades: typeof shades === "object" ? shades : { DEFAULT: shades },
-                  "get-name": (shade) => {
-                    var _a2;
-                    return ((_a2 = config2.prefix) != null ? _a2 : "") + (shade === "DEFAULT" ? `border-${key}` : `border-${key}-${shade}`);
-                  },
-                  search: search.value
-                }, {
-                  default: withCtx(({ color }) => [
-                    createBaseVNode("div", {
-                      class: "shade border",
-                      style: normalizeStyle({
-                        borderColor: color
-                      })
-                    }, null, 4)
-                  ]),
-                  _: 2
-                }, 1032, ["shades", "get-name", "search"]);
-              }), 128))
-            ]),
-            _: 1
-          }),
-          createVNode(_component_Variant, {
-            id: "padding",
-            title: "Padding",
-            icon: "carbon:area"
-          }, {
-            default: withCtx(() => [
-              createVNode(_component_HstTokenList, {
-                tokens: config2.theme.padding,
-                "get-name": (key) => {
-                  var _a2;
-                  return `${(_a2 = config2.prefix) != null ? _a2 : ""}p-${key}`;
-                }
-              }, {
-                default: withCtx(({ token }) => [
-                  createBaseVNode("div", {
-                    class: "padding",
-                    style: normalizeStyle({
-                      padding: token.value
-                    })
-                  }, _hoisted_2, 4)
-                ]),
-                _: 1
-              }, 8, ["tokens", "get-name"])
-            ]),
-            _: 1
-          }),
-          createVNode(_component_Variant, {
-            id: "margin",
-            title: "Margin",
-            icon: "carbon:area"
+          (openBlock(true), createElementBlock(Fragment, null, renderList($setup.config.theme.backgroundColor, (shades, key) => {
+            return openBlock(), createBlock(_component_HstColorShades, {
+              key,
+              shades: typeof shades === "object" ? shades : { DEFAULT: shades },
+              "get-name": (shade) => {
+                var _a2;
+                return ((_a2 = $setup.config.prefix) != null ? _a2 : "") + (shade === "DEFAULT" ? `bg-${key}` : `bg-${key}-${shade}`);
+              },
+              search: $setup.search
+            }, {
+              default: withCtx(({ color }) => [
+                createBaseVNode("div", {
+                  class: "shade",
+                  style: normalizeStyle({
+                    backgroundColor: color
+                  })
+                }, null, 4)
+              ]),
+              _: 2
+            }, 1032, ["shades", "get-name", "search"]);
+          }), 128))
+        ]),
+        _: 1
+      }),
+      createVNode(_component_Variant, {
+        id: "text-color",
+        title: "Text Color",
+        icon: "carbon:text-color"
+      }, {
+        controls: withCtx(() => [
+          createVNode(_component_HstText, {
+            modelValue: $setup.search,
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => $setup.search = $event),
+            title: "Filter..."
+          }, null, 8, ["modelValue"])
+        ]),
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList($setup.config.theme.textColor, (shades, key) => {
+            return openBlock(), createBlock(_component_HstColorShades, {
+              key,
+              shades: typeof shades === "object" ? shades : { DEFAULT: shades },
+              "get-name": (shade) => {
+                var _a2;
+                return ((_a2 = $setup.config.prefix) != null ? _a2 : "") + (shade === "DEFAULT" ? `text-${key}` : `text-${key}-${shade}`);
+              },
+              search: $setup.search
+            }, {
+              default: withCtx(({ color }) => [
+                createBaseVNode("div", {
+                  class: "shade text",
+                  style: normalizeStyle({
+                    color
+                  })
+                }, " Aa ", 4)
+              ]),
+              _: 2
+            }, 1032, ["shades", "get-name", "search"]);
+          }), 128))
+        ]),
+        _: 1
+      }),
+      createVNode(_component_Variant, {
+        id: "border-color",
+        title: "Border Color",
+        icon: "carbon:color-palette"
+      }, {
+        controls: withCtx(() => [
+          createVNode(_component_HstText, {
+            modelValue: $setup.search,
+            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => $setup.search = $event),
+            title: "Filter..."
+          }, null, 8, ["modelValue"])
+        ]),
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList($setup.config.theme.borderColor, (shades, key) => {
+            return openBlock(), createBlock(_component_HstColorShades, {
+              key,
+              shades: typeof shades === "object" ? shades : { DEFAULT: shades },
+              "get-name": (shade) => {
+                var _a2;
+                return ((_a2 = $setup.config.prefix) != null ? _a2 : "") + (shade === "DEFAULT" ? `border-${key}` : `border-${key}-${shade}`);
+              },
+              search: $setup.search
+            }, {
+              default: withCtx(({ color }) => [
+                createBaseVNode("div", {
+                  class: "shade border",
+                  style: normalizeStyle({
+                    borderColor: color
+                  })
+                }, null, 4)
+              ]),
+              _: 2
+            }, 1032, ["shades", "get-name", "search"]);
+          }), 128))
+        ]),
+        _: 1
+      }),
+      createVNode(_component_Variant, {
+        id: "padding",
+        title: "Padding",
+        icon: "carbon:area"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_HstTokenList, {
+            tokens: $setup.config.theme.padding,
+            "get-name": (key) => {
+              var _a2;
+              return `${(_a2 = $setup.config.prefix) != null ? _a2 : ""}p-${key}`;
+            }
           }, {
-            default: withCtx(() => [
-              createVNode(_component_HstTokenList, {
-                tokens: config2.theme.margin,
-                "get-name": (key) => {
-                  var _a2;
-                  return `${(_a2 = config2.prefix) != null ? _a2 : ""}m-${key}`;
-                }
-              }, {
-                default: withCtx(({ token }) => [
-                  createBaseVNode("div", {
-                    class: "margin",
-                    style: normalizeStyle({
-                      padding: token.value
-                    })
-                  }, _hoisted_4, 4)
-                ]),
-                _: 1
-              }, 8, ["tokens", "get-name"])
+            default: withCtx(({ token }) => [
+              createBaseVNode("div", {
+                class: "padding",
+                style: normalizeStyle({
+                  padding: token.value
+                })
+              }, _hoisted_2, 4)
             ]),
             _: 1
-          }),
-          createVNode(_component_Variant, {
-            id: "font-size",
-            title: "Font Size",
-            icon: "carbon:text-font"
+          }, 8, ["tokens", "get-name"])
+        ]),
+        _: 1
+      }),
+      createVNode(_component_Variant, {
+        id: "margin",
+        title: "Margin",
+        icon: "carbon:area"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_HstTokenList, {
+            tokens: $setup.config.theme.margin,
+            "get-name": (key) => {
+              var _a2;
+              return `${(_a2 = $setup.config.prefix) != null ? _a2 : ""}m-${key}`;
+            }
           }, {
-            controls: withCtx(() => [
-              createVNode(_component_HstTextarea, {
-                modelValue: sampleText.value,
-                "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => sampleText.value = $event),
-                title: "Sample text",
-                rows: "5"
-              }, null, 8, ["modelValue"])
-            ]),
-            default: withCtx(() => [
-              createVNode(_component_HstTokenList, {
-                tokens: config2.theme.fontSize,
-                "get-name": (key) => {
-                  var _a2;
-                  return `${(_a2 = config2.prefix) != null ? _a2 : ""}text-${key}`;
-                }
-              }, {
-                default: withCtx(({ token }) => [
-                  createBaseVNode("div", {
-                    class: "truncate",
-                    style: normalizeStyle(__spreadValues2({
-                      fontSize: token.value[0]
-                    }, token.value[1]))
-                  }, toDisplayString(sampleText.value), 5)
-                ]),
-                _: 1
-              }, 8, ["tokens", "get-name"])
+            default: withCtx(({ token }) => [
+              createBaseVNode("div", {
+                class: "margin",
+                style: normalizeStyle({
+                  padding: token.value
+                })
+              }, _hoisted_4, 4)
             ]),
             _: 1
-          }),
-          createVNode(_component_Variant, {
-            id: "font-weight",
-            title: "Font Weight",
-            icon: "carbon:text-font"
+          }, 8, ["tokens", "get-name"])
+        ]),
+        _: 1
+      }),
+      createVNode(_component_Variant, {
+        id: "font-size",
+        title: "Font Size",
+        icon: "carbon:text-font"
+      }, {
+        controls: withCtx(() => [
+          createVNode(_component_HstTextarea, {
+            modelValue: $setup.sampleText,
+            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => $setup.sampleText = $event),
+            title: "Sample text",
+            rows: "5"
+          }, null, 8, ["modelValue"])
+        ]),
+        default: withCtx(() => [
+          createVNode(_component_HstTokenList, {
+            tokens: $setup.config.theme.fontSize,
+            "get-name": (key) => {
+              var _a2;
+              return `${(_a2 = $setup.config.prefix) != null ? _a2 : ""}text-${key}`;
+            }
           }, {
-            controls: withCtx(() => [
-              createVNode(_component_HstTextarea, {
-                modelValue: sampleText.value,
-                "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => sampleText.value = $event),
-                title: "Sample text",
-                rows: "5"
-              }, null, 8, ["modelValue"]),
-              createVNode(_component_HstNumber, {
-                modelValue: fontSize.value,
-                "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => fontSize.value = $event),
-                title: "Font size",
-                min: "1"
-              }, null, 8, ["modelValue"])
-            ]),
-            default: withCtx(() => [
-              createVNode(_component_HstTokenList, {
-                tokens: config2.theme.fontWeight,
-                "get-name": (key) => {
-                  var _a2;
-                  return `${(_a2 = config2.prefix) != null ? _a2 : ""}font-${key}`;
-                }
-              }, {
-                default: withCtx(({ token }) => [
-                  createBaseVNode("div", {
-                    class: "truncate",
-                    style: normalizeStyle({
-                      fontWeight: token.value,
-                      fontSize: `${fontSize.value}px`
-                    })
-                  }, toDisplayString(sampleText.value), 5)
-                ]),
-                _: 1
-              }, 8, ["tokens", "get-name"])
+            default: withCtx(({ token }) => [
+              createBaseVNode("div", {
+                class: "truncate",
+                style: normalizeStyle(__spreadValues2({
+                  fontSize: token.value[0]
+                }, token.value[1]))
+              }, toDisplayString($setup.sampleText), 5)
             ]),
             _: 1
-          }),
-          createVNode(_component_Variant, {
-            id: "font-family",
-            title: "Font Family",
-            icon: "carbon:text-font"
+          }, 8, ["tokens", "get-name"])
+        ]),
+        _: 1
+      }),
+      createVNode(_component_Variant, {
+        id: "font-weight",
+        title: "Font Weight",
+        icon: "carbon:text-font"
+      }, {
+        controls: withCtx(() => [
+          createVNode(_component_HstTextarea, {
+            modelValue: $setup.sampleText,
+            "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => $setup.sampleText = $event),
+            title: "Sample text",
+            rows: "5"
+          }, null, 8, ["modelValue"]),
+          createVNode(_component_HstNumber, {
+            modelValue: $setup.fontSize,
+            "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => $setup.fontSize = $event),
+            title: "Font size",
+            min: "1"
+          }, null, 8, ["modelValue"])
+        ]),
+        default: withCtx(() => [
+          createVNode(_component_HstTokenList, {
+            tokens: $setup.config.theme.fontWeight,
+            "get-name": (key) => {
+              var _a2;
+              return `${(_a2 = $setup.config.prefix) != null ? _a2 : ""}font-${key}`;
+            }
           }, {
-            controls: withCtx(() => [
-              createVNode(_component_HstTextarea, {
-                modelValue: sampleText.value,
-                "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => sampleText.value = $event),
-                title: "Sample text",
-                rows: "5"
-              }, null, 8, ["modelValue"]),
-              createVNode(_component_HstNumber, {
-                modelValue: fontSize.value,
-                "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => fontSize.value = $event),
-                title: "Font size",
-                min: "1"
-              }, null, 8, ["modelValue"])
-            ]),
-            default: withCtx(() => [
-              createVNode(_component_HstTokenList, {
-                tokens: config2.theme.fontFamily,
-                "get-name": (key) => {
-                  var _a2;
-                  return `${(_a2 = config2.prefix) != null ? _a2 : ""}font-${key}`;
-                }
-              }, {
-                default: withCtx(({ token }) => [
-                  createBaseVNode("div", {
-                    class: "truncate",
-                    style: normalizeStyle({
-                      fontFamily: token.value,
-                      fontSize: `${fontSize.value}px`
-                    })
-                  }, toDisplayString(sampleText.value), 5)
-                ]),
-                _: 1
-              }, 8, ["tokens", "get-name"])
+            default: withCtx(({ token }) => [
+              createBaseVNode("div", {
+                class: "truncate",
+                style: normalizeStyle({
+                  fontWeight: token.value,
+                  fontSize: `${$setup.fontSize}px`
+                })
+              }, toDisplayString($setup.sampleText), 5)
             ]),
             _: 1
-          }),
-          createVNode(_component_Variant, {
-            id: "letter-spacing",
-            title: "Letter Spacing",
-            icon: "carbon:text-font"
+          }, 8, ["tokens", "get-name"])
+        ]),
+        _: 1
+      }),
+      createVNode(_component_Variant, {
+        id: "font-family",
+        title: "Font Family",
+        icon: "carbon:text-font"
+      }, {
+        controls: withCtx(() => [
+          createVNode(_component_HstTextarea, {
+            modelValue: $setup.sampleText,
+            "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => $setup.sampleText = $event),
+            title: "Sample text",
+            rows: "5"
+          }, null, 8, ["modelValue"]),
+          createVNode(_component_HstNumber, {
+            modelValue: $setup.fontSize,
+            "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => $setup.fontSize = $event),
+            title: "Font size",
+            min: "1"
+          }, null, 8, ["modelValue"])
+        ]),
+        default: withCtx(() => [
+          createVNode(_component_HstTokenList, {
+            tokens: $setup.config.theme.fontFamily,
+            "get-name": (key) => {
+              var _a2;
+              return `${(_a2 = $setup.config.prefix) != null ? _a2 : ""}font-${key}`;
+            }
           }, {
-            controls: withCtx(() => [
-              createVNode(_component_HstTextarea, {
-                modelValue: sampleText.value,
-                "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => sampleText.value = $event),
-                title: "Sample text",
-                rows: "5"
-              }, null, 8, ["modelValue"]),
-              createVNode(_component_HstNumber, {
-                modelValue: fontSize.value,
-                "onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => fontSize.value = $event),
-                title: "Font size",
-                min: "1"
-              }, null, 8, ["modelValue"])
-            ]),
-            default: withCtx(() => [
-              createVNode(_component_HstTokenList, {
-                tokens: config2.theme.letterSpacing,
-                "get-name": (key) => {
-                  var _a2;
-                  return `${(_a2 = config2.prefix) != null ? _a2 : ""}tracking-${key}`;
-                }
-              }, {
-                default: withCtx(({ token }) => [
-                  createBaseVNode("div", {
-                    class: "truncate",
-                    style: normalizeStyle({
-                      letterSpacing: token.value,
-                      fontSize: `${fontSize.value}px`
-                    })
-                  }, toDisplayString(sampleText.value), 5)
-                ]),
-                _: 1
-              }, 8, ["tokens", "get-name"])
+            default: withCtx(({ token }) => [
+              createBaseVNode("div", {
+                class: "truncate",
+                style: normalizeStyle({
+                  fontFamily: token.value,
+                  fontSize: `${$setup.fontSize}px`
+                })
+              }, toDisplayString($setup.sampleText), 5)
             ]),
             _: 1
-          }),
-          createVNode(_component_Variant, {
-            id: "line-height",
-            title: "Line Height",
-            icon: "carbon:text-font"
+          }, 8, ["tokens", "get-name"])
+        ]),
+        _: 1
+      }),
+      createVNode(_component_Variant, {
+        id: "letter-spacing",
+        title: "Letter Spacing",
+        icon: "carbon:text-font"
+      }, {
+        controls: withCtx(() => [
+          createVNode(_component_HstTextarea, {
+            modelValue: $setup.sampleText,
+            "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => $setup.sampleText = $event),
+            title: "Sample text",
+            rows: "5"
+          }, null, 8, ["modelValue"]),
+          createVNode(_component_HstNumber, {
+            modelValue: $setup.fontSize,
+            "onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => $setup.fontSize = $event),
+            title: "Font size",
+            min: "1"
+          }, null, 8, ["modelValue"])
+        ]),
+        default: withCtx(() => [
+          createVNode(_component_HstTokenList, {
+            tokens: $setup.config.theme.letterSpacing,
+            "get-name": (key) => {
+              var _a2;
+              return `${(_a2 = $setup.config.prefix) != null ? _a2 : ""}tracking-${key}`;
+            }
           }, {
-            controls: withCtx(() => [
-              createVNode(_component_HstTextarea, {
-                modelValue: sampleText.value,
-                "onUpdate:modelValue": _cache[10] || (_cache[10] = ($event) => sampleText.value = $event),
-                title: "Sample text",
-                rows: "5"
-              }, null, 8, ["modelValue"]),
-              createVNode(_component_HstNumber, {
-                modelValue: fontSize.value,
-                "onUpdate:modelValue": _cache[11] || (_cache[11] = ($event) => fontSize.value = $event),
-                title: "Font size",
-                min: "1"
-              }, null, 8, ["modelValue"])
-            ]),
-            default: withCtx(() => [
-              createVNode(_component_HstTokenList, {
-                tokens: config2.theme.lineHeight,
-                "get-name": (key) => {
-                  var _a2;
-                  return `${(_a2 = config2.prefix) != null ? _a2 : ""}leading-${key}`;
-                }
-              }, {
-                default: withCtx(({ token }) => [
-                  createBaseVNode("div", {
-                    style: normalizeStyle({
-                      lineHeight: token.value,
-                      fontSize: `${fontSize.value}px`
-                    })
-                  }, toDisplayString(sampleText.value), 5)
-                ]),
-                _: 1
-              }, 8, ["tokens", "get-name"])
+            default: withCtx(({ token }) => [
+              createBaseVNode("div", {
+                class: "truncate",
+                style: normalizeStyle({
+                  letterSpacing: token.value,
+                  fontSize: `${$setup.fontSize}px`
+                })
+              }, toDisplayString($setup.sampleText), 5)
             ]),
             _: 1
-          }),
-          createVNode(_component_Variant, {
-            id: "drop-shadow",
-            title: "Drop Shadow",
-            icon: "carbon:shape-except"
+          }, 8, ["tokens", "get-name"])
+        ]),
+        _: 1
+      }),
+      createVNode(_component_Variant, {
+        id: "line-height",
+        title: "Line Height",
+        icon: "carbon:text-font"
+      }, {
+        controls: withCtx(() => [
+          createVNode(_component_HstTextarea, {
+            modelValue: $setup.sampleText,
+            "onUpdate:modelValue": _cache[10] || (_cache[10] = ($event) => $setup.sampleText = $event),
+            title: "Sample text",
+            rows: "5"
+          }, null, 8, ["modelValue"]),
+          createVNode(_component_HstNumber, {
+            modelValue: $setup.fontSize,
+            "onUpdate:modelValue": _cache[11] || (_cache[11] = ($event) => $setup.fontSize = $event),
+            title: "Font size",
+            min: "1"
+          }, null, 8, ["modelValue"])
+        ]),
+        default: withCtx(() => [
+          createVNode(_component_HstTokenList, {
+            tokens: $setup.config.theme.lineHeight,
+            "get-name": (key) => {
+              var _a2;
+              return `${(_a2 = $setup.config.prefix) != null ? _a2 : ""}leading-${key}`;
+            }
           }, {
-            default: withCtx(() => [
-              createVNode(_component_HstTokenGrid, {
-                tokens: config2.theme.dropShadow,
-                "get-name": (key) => {
-                  var _a2;
-                  return ((_a2 = config2.prefix) != null ? _a2 : "") + (key === "DEFAULT" ? "drop-shadow" : `drop-shadow-${key}`);
-                },
-                "col-size": 180
-              }, {
-                default: withCtx(({ token }) => [
-                  createBaseVNode("div", {
-                    class: "drop-shadow",
-                    style: normalizeStyle({
-                      filter: `${(Array.isArray(token.value) ? token.value : [token.value]).map((v2) => `drop-shadow(${v2})`).join(" ")}`
-                    })
-                  }, null, 4)
-                ]),
-                _: 1
-              }, 8, ["tokens", "get-name"])
+            default: withCtx(({ token }) => [
+              createBaseVNode("div", {
+                style: normalizeStyle({
+                  lineHeight: token.value,
+                  fontSize: `${$setup.fontSize}px`
+                })
+              }, toDisplayString($setup.sampleText), 5)
             ]),
             _: 1
-          }),
-          createVNode(_component_Variant, {
-            id: "border-radius",
-            title: "Border Radius",
-            icon: "carbon:condition-wait-point"
+          }, 8, ["tokens", "get-name"])
+        ]),
+        _: 1
+      }),
+      createVNode(_component_Variant, {
+        id: "drop-shadow",
+        title: "Drop Shadow",
+        icon: "carbon:shape-except"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_HstTokenGrid, {
+            tokens: $setup.config.theme.dropShadow,
+            "get-name": (key) => {
+              var _a2;
+              return ((_a2 = $setup.config.prefix) != null ? _a2 : "") + (key === "DEFAULT" ? "drop-shadow" : `drop-shadow-${key}`);
+            },
+            "col-size": 180
           }, {
-            default: withCtx(() => [
-              createVNode(_component_HstTokenGrid, {
-                tokens: config2.theme.borderRadius,
-                "get-name": (key) => {
-                  var _a2;
-                  return ((_a2 = config2.prefix) != null ? _a2 : "") + (key === "DEFAULT" ? "rounded" : `rounded-${key}`);
-                },
-                "col-size": 180
-              }, {
-                default: withCtx(({ token }) => [
-                  createBaseVNode("div", {
-                    class: "border-radius",
-                    style: normalizeStyle({
-                      borderRadius: token.value
-                    })
-                  }, null, 4)
-                ]),
-                _: 1
-              }, 8, ["tokens", "get-name"])
+            default: withCtx(({ token }) => [
+              createBaseVNode("div", {
+                class: "drop-shadow",
+                style: normalizeStyle({
+                  filter: `${(Array.isArray(token.value) ? token.value : [token.value]).map((v2) => `drop-shadow(${v2})`).join(" ")}`
+                })
+              }, null, 4)
             ]),
             _: 1
-          }),
-          createVNode(_component_Variant, {
-            id: "border-width",
-            title: "Border Width",
-            icon: "carbon:checkbox"
+          }, 8, ["tokens", "get-name"])
+        ]),
+        _: 1
+      }),
+      createVNode(_component_Variant, {
+        id: "border-radius",
+        title: "Border Radius",
+        icon: "carbon:condition-wait-point"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_HstTokenGrid, {
+            tokens: $setup.config.theme.borderRadius,
+            "get-name": (key) => {
+              var _a2;
+              return ((_a2 = $setup.config.prefix) != null ? _a2 : "") + (key === "DEFAULT" ? "rounded" : `rounded-${key}`);
+            },
+            "col-size": 180
           }, {
-            default: withCtx(() => [
-              createVNode(_component_HstTokenGrid, {
-                tokens: config2.theme.borderWidth,
-                "get-name": (key) => {
-                  var _a2;
-                  return ((_a2 = config2.prefix) != null ? _a2 : "") + (key === "DEFAULT" ? "border" : `border-${key}`);
-                },
-                "col-size": 180
-              }, {
-                default: withCtx(({ token }) => [
-                  createBaseVNode("div", {
-                    class: "border-width",
-                    style: normalizeStyle({
-                      borderWidth: token.value
-                    })
-                  }, null, 4)
-                ]),
-                _: 1
-              }, 8, ["tokens", "get-name"])
+            default: withCtx(({ token }) => [
+              createBaseVNode("div", {
+                class: "border-radius",
+                style: normalizeStyle({
+                  borderRadius: token.value
+                })
+              }, null, 4)
             ]),
             _: 1
-          }),
-          createVNode(_component_Variant, {
-            id: "width",
-            title: "Width",
-            icon: "carbon:pan-horizontal"
+          }, 8, ["tokens", "get-name"])
+        ]),
+        _: 1
+      }),
+      createVNode(_component_Variant, {
+        id: "border-width",
+        title: "Border Width",
+        icon: "carbon:checkbox"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_HstTokenGrid, {
+            tokens: $setup.config.theme.borderWidth,
+            "get-name": (key) => {
+              var _a2;
+              return ((_a2 = $setup.config.prefix) != null ? _a2 : "") + (key === "DEFAULT" ? "border" : `border-${key}`);
+            },
+            "col-size": 180
           }, {
-            default: withCtx(() => [
-              createVNode(_component_HstTokenList, {
-                tokens: config2.theme.width,
-                "get-name": (key) => {
-                  var _a2;
-                  return ((_a2 = config2.prefix) != null ? _a2 : "") + (key === "DEFAULT" ? "w" : `w-${key}`);
-                }
-              }, {
-                default: withCtx(({ token }) => [
-                  createBaseVNode("div", _hoisted_5, [
-                    createBaseVNode("div", {
-                      class: "width-box",
-                      style: normalizeStyle({
-                        width: token.value
-                      })
-                    }, null, 4)
-                  ])
-                ]),
-                _: 1
-              }, 8, ["tokens", "get-name"])
+            default: withCtx(({ token }) => [
+              createBaseVNode("div", {
+                class: "border-width",
+                style: normalizeStyle({
+                  borderWidth: token.value
+                })
+              }, null, 4)
             ]),
             _: 1
-          }),
-          createVNode(_component_Variant, {
-            id: "height",
-            title: "Height",
-            icon: "carbon:pan-vertical"
+          }, 8, ["tokens", "get-name"])
+        ]),
+        _: 1
+      }),
+      createVNode(_component_Variant, {
+        id: "width",
+        title: "Width",
+        icon: "carbon:pan-horizontal"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_HstTokenList, {
+            tokens: $setup.config.theme.width,
+            "get-name": (key) => {
+              var _a2;
+              return ((_a2 = $setup.config.prefix) != null ? _a2 : "") + (key === "DEFAULT" ? "w" : `w-${key}`);
+            }
           }, {
-            default: withCtx(() => [
-              createVNode(_component_HstTokenList, {
-                tokens: config2.theme.height,
-                "get-name": (key) => {
-                  var _a2;
-                  return ((_a2 = config2.prefix) != null ? _a2 : "") + (key === "DEFAULT" ? "h" : `h-${key}`);
-                }
-              }, {
-                default: withCtx(({ token }) => [
-                  createBaseVNode("div", {
-                    class: "height",
-                    style: normalizeStyle({
-                      height: token.value
-                    })
-                  }, null, 4)
-                ]),
-                _: 1
-              }, 8, ["tokens", "get-name"])
+            default: withCtx(({ token }) => [
+              createBaseVNode("div", _hoisted_5, [
+                createBaseVNode("div", {
+                  class: "width-box",
+                  style: normalizeStyle({
+                    width: token.value
+                  })
+                }, null, 4)
+              ])
             ]),
             _: 1
-          }),
-          createVNode(_component_Variant, {
-            id: "full-config",
-            title: "Full Config",
-            icon: "carbon:code"
+          }, 8, ["tokens", "get-name"])
+        ]),
+        _: 1
+      }),
+      createVNode(_component_Variant, {
+        id: "height",
+        title: "Height",
+        icon: "carbon:pan-vertical"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_HstTokenList, {
+            tokens: $setup.config.theme.height,
+            "get-name": (key) => {
+              var _a2;
+              return ((_a2 = $setup.config.prefix) != null ? _a2 : "") + (key === "DEFAULT" ? "h" : `h-${key}`);
+            }
           }, {
-            default: withCtx(() => [
-              createBaseVNode("pre", null, toDisplayString(config2))
+            default: withCtx(({ token }) => [
+              createBaseVNode("div", {
+                class: "height",
+                style: normalizeStyle({
+                  height: token.value
+                })
+              }, null, 4)
             ]),
             _: 1
-          })
+          }, 8, ["tokens", "get-name"])
         ]),
         _: 1
-      });
-    };
-  }
-};
-var Tailwind_story = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9e4c73b2"], ["__file", "/Users/akryum/Projects/histoire/packages/histoire-controls/node_modules/.histoire/plugins/tailwind-tokens/Tailwind.story.vue"]]);
+      }),
+      createVNode(_component_Variant, {
+        id: "full-config",
+        title: "Full Config",
+        icon: "carbon:code"
+      }, {
+        default: withCtx(() => [
+          createBaseVNode("pre", null, toDisplayString($setup.config))
+        ]),
+        _: 1
+      })
+    ]),
+    _: 1
+  });
+}
+var Tailwind_story = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-9e4c73b2"], ["__file", "/home/akryum/Projects/histoire/packages/histoire-controls/node_modules/.histoire/plugins/tailwind-tokens/Tailwind.story.vue"]]);
 var Tailwind_story$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   "default": Tailwind_story