@histoire/controls 0.6.1 → 0.6.2

package/.histoire/dist/assets/{StoryView.6adb630a.js → StoryView.2f64dad1.js}

@@ -1,9 +1,8 @@
-import { reactive, ref, watch, defineComponent, unref, openBlock, createBlock, withCtx, createVNode, createElementBlock, watchEffect, computed, createElementVNode, resolveDynamicComponent, createCommentVNode, Fragment, renderList, createTextVNode, onMounted, nextTick, toDisplayString, useCssVars, resolveDirective, isRef, withKeys, withDirectives, withModifiers, vModelText, normalizeClass, resolveComponent, shallowRef, renderSlot, normalizeStyle, mergeProps, pushScopeId, popScopeId, Transition, h, toRefs, onBeforeUnmount, toRaw, onUnmounted, createStaticVNode } from "vue";
-import { d as defineStore, n as useRouter, h as useRoute, I as Icon, f as useStorage, o as useTimeoutFn, q as onClickOutside, t as getHighlighter, v as useResizeObserver, D as Dropdown, w as setCDN, g as useEventListener } from "./vendor.96c97c65.js";
-import { u as useStoryStore, i as isMobile, b as BaseSplitPane, _ as _export_sfc, c as _sfc_main$w, a as useScrollOnActive, B as BaseListItemLink, d as base } from "./bundle-main.2631970b.js";
-import { B as BaseEmpty } from "./BaseEmpty.c5f20ec7.js";
-import { _ as _sfc_main$v, u as unindent, g as generateSourceCode, a as SANDBOX_READY, E as EVENT_SEND, S as STATE_SYNC, P as PREVIEW_SETTINGS_SYNC } from "./const.560925bb.js";
-import { e as clone, o as omit, b as toRawDeep, i as isDark, H as HstCopyIcon, d as applyStateToVariant, h as histoireConfig } from "./global-components.1c794554.js";
+import { A as defineStore, S as reactive, r as ref, w as watch, d as defineComponent, al as useRouter, U as useRoute, i as unref, a as openBlock, j as createBlock, k as withCtx, b as createElementBlock, l as createVNode, am as watchEffect, I as Icon, H as useStorage, R as createTextVNode, c as computed, e as createBaseVNode, C as resolveDynamicComponent, Q as useCssVars, m as createCommentVNode, F as Fragment, J as renderList, p as onMounted, $ as nextTick, t as toDisplayString, an as useResizeObserver, h as normalizeStyle, ao as useTimeoutFn, ap as onClickOutside, L as resolveDirective, M as withDirectives, Z as vModelText, g as withModifiers, P as isRef, v as withKeys, n as normalizeClass, q as resolveComponent, aq as shallowRef, ar as getHighlighter, f as renderSlot, ak as toRefs, x as mergeProps, as as Dropdown, V as pushScopeId, W as popScopeId, T as Transition, _ as h, at as setCDN, au as onBeforeUnmount, K as useEventListener, av as toRaw, o as onUnmounted, aw as createStaticVNode } from "./vendor.2833ae3d.js";
+import { u as useStoryStore, i as isMobile, b as BaseSplitPane, _ as _export_sfc, c as _sfc_main$v, a as useScrollOnActive, B as BaseListItemLink, d as base } from "./bundle-main.784e5bf7.js";
+import { B as BaseEmpty } from "./BaseEmpty.d30f3079.js";
+import { _ as _sfc_main$w, u as unindent, g as generateSourceCode, a as SANDBOX_READY, E as EVENT_SEND, S as STATE_SYNC, P as PREVIEW_SETTINGS_SYNC } from "./const.268165fd.js";
+import { e as clone, o as omit, b as toRawDeep, i as isDark, H as HstCopyIcon, d as applyStateToVariant, h as histoireConfig } from "./global-components.6736b2a9.js";
 const useEventsStore = defineStore("events", () => {
   const storyStore = useStoryStore();
   const events = reactive([]);
@@ -100,7 +99,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
                   "bind-icon-color": !active && unref(variant).iconColor
                 }])
               }, null, 8, ["icon", "class"]),
-              createElementVNode("span", _hoisted_1$r, toDisplayString(unref(variant).title), 1)
+              createBaseVNode("span", _hoisted_1$r, toDisplayString(unref(variant).title), 1)
             ];
           }),
           _: 1
@@ -162,7 +161,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
         ref: el,
         class: "htw-cursor-default htw-flex htw-flex-col htw-gap-y-1"
       }, [
-        createElementVNode("div", _hoisted_1$q, [
+        createBaseVNode("div", _hoisted_1$q, [
           createVNode(_component_RouterLink, {
             to: unref(targetRoute),
             class: normalizeClass(["htw-rounded htw-w-max htw-px-2 htw-py-0.5 htw-min-w-16 htw-cursor-pointer htw-flex htw-items-center htw-gap-1", {
@@ -180,13 +179,13 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                     "bind-icon-color": !unref(isActive) && unref(variant).iconColor
                   }])
                 }, null, 8, ["icon", "class"]),
-                createElementVNode("span", null, toDisplayString(unref(variant).title), 1)
+                createBaseVNode("span", null, toDisplayString(unref(variant).title), 1)
               ];
             }),
             _: 1
           }, 8, ["to", "class"])
         ]),
-        createElementVNode("div", {
+        createBaseVNode("div", {
           class: normalizeClass(["htw-border htw-bg-white dark:htw-bg-gray-700 htw-rounded-lg htw-flex-1 htw-p-4", {
             "htw-border-gray-100 dark:htw-border-gray-800": !unref(isActive),
             "htw-border-primary-200 dark:htw-border-primary-900": unref(isActive)
@@ -194,7 +193,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
           onClick: _cache[0] || (_cache[0] = withModifiers(($event) => selectVariant(), ["stop", "prevent"])),
           onKeyup: _cache[1] || (_cache[1] = ($event) => selectVariant())
         }, [
-          createVNode(_sfc_main$v, {
+          createVNode(_sfc_main$w, {
             variant: unref(variant),
             story: __props.story,
             onReady
@@ -269,12 +268,12 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         class: "htw-h-full htw-overflow-y-auto",
         onScroll: _cache[0] || (_cache[0] = ($event) => updateMaxCount())
       }, [
-        createElementVNode("div", {
+        createBaseVNode("div", {
           style: normalizeStyle({
             minHeight: `${unref(storyStore).currentStory.variants.length / countPerRow.value * (maxItemHeight.value + gap) - gap}px`
           })
         }, [
-          createElementVNode("div", {
+          createBaseVNode("div", {
             class: "htw-grid htw-gap-4 htw-m-4",
             style: normalizeStyle({
               gridTemplateColumns: `repeat(auto-fill, ${unref(gridTemplateWidth)})`
@@ -310,7 +309,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             __props.variant.iconColor ? "bind-icon-color" : "htw-text-gray-500"
           ]])
         }, null, 8, ["icon", "class"]),
-        createElementVNode("span", null, toDisplayString(__props.variant.title), 1)
+        createBaseVNode("span", null, toDisplayString(__props.variant.title), 1)
       ]);
     };
   }
@@ -372,14 +371,14 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => toggle(), ["prevent"]), ["space"]))
         ]
       }, [
-        createElementVNode("div", _hoisted_1$o, [
-          createElementVNode("div", {
+        createBaseVNode("div", _hoisted_1$o, [
+          createBaseVNode("div", {
             class: normalizeClass(["htw-border 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$k, [
-            createElementVNode("path", {
+            createBaseVNode("path", {
               ref_key: "path",
               ref: path,
               d: "m 4 12 l 5 5 l 10 -10",
@@ -403,7 +402,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
 const _hoisted_1$n = { class: "htw-flex htw-flex-col htw-items-stretch" };
 const _hoisted_2$j = /* @__PURE__ */ createTextVNode(" Rotate ");
 const _hoisted_3$c = { class: "htw-flex htw-gap-2 htw-px-4 htw-py-3" };
-const _hoisted_4$9 = /* @__PURE__ */ createElementVNode("span", { class: "htw-opacity-50" }, "x", -1);
+const _hoisted_4$9 = /* @__PURE__ */ createBaseVNode("span", { class: "htw-opacity-50" }, "x", -1);
 const _hoisted_5$6 = ["onClick"];
 const _hoisted_6$6 = { class: "htw-ml-auto htw-opacity-70 htw-flex htw-gap-1" };
 const _hoisted_7$3 = { key: 0 };
@@ -426,7 +425,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         class: "htw-h-full htw-flex-none"
       }, {
         popper: withCtx(({ hide }) => [
-          createElementVNode("div", _hoisted_1$n, [
+          createBaseVNode("div", _hoisted_1$n, [
             createVNode(_sfc_main$q, {
               modelValue: unref(settings).rotate,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(settings).rotate = $event)
@@ -436,8 +435,8 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             }, 8, ["modelValue"]),
-            createElementVNode("div", _hoisted_3$c, [
-              withDirectives(createElementVNode("input", {
+            createBaseVNode("div", _hoisted_3$c, [
+              withDirectives(createBaseVNode("input", {
                 "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => unref(settings).responsiveWidth = $event),
                 type: "number",
                 class: "htw-bg-transparent htw-border htw-border-gray-200 dark:htw-border-gray-850 htw-rounded htw-w-20 htw-opacity-50 focus:htw-opacity-100 htw-flex-1 htw-min-w-0",
@@ -453,7 +452,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                 [_directive_tooltip, "Responsive width (px)"]
               ]),
               _hoisted_4$9,
-              withDirectives(createElementVNode("input", {
+              withDirectives(createBaseVNode("input", {
                 "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => unref(settings).responsiveHeight = $event),
                 type: "number",
                 class: "htw-bg-transparent htw-border htw-border-gray-200 dark:htw-border-gray-850 htw-rounded htw-w-20 htw-opacity-50 focus:htw-opacity-100 htw-flex-1 htw-min-w-0",
@@ -482,7 +481,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                 }
               }, [
                 createTextVNode(toDisplayString(preset.label) + " ", 1),
-                createElementVNode("span", _hoisted_6$6, [
+                createBaseVNode("span", _hoisted_6$6, [
                   preset.width ? (openBlock(), createElementBlock("span", _hoisted_7$3, [
                     createTextVNode(toDisplayString(preset.width), 1),
                     !preset.height ? (openBlock(), createElementBlock("span", _hoisted_8$2, "px")) : createCommentVNode("", true)
@@ -525,7 +524,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
 });
 const _withScopeId$5 = (n) => (pushScopeId("data-v-bde73868"), n = n(), popScopeId(), n);
 const _hoisted_1$m = { class: "htw-cursor-pointer hover:htw-text-primary-500 htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 htw-group" };
-const _hoisted_2$i = /* @__PURE__ */ _withScopeId$5(() => /* @__PURE__ */ createElementVNode("div", { class: "bind-preview-bg htw-w-4 htw-h-4 htw-rounded-full htw-border htw-border-black/50 dark:htw-border-white/50" }, null, -1));
+const _hoisted_2$i = /* @__PURE__ */ _withScopeId$5(() => /* @__PURE__ */ createBaseVNode("div", { class: "bind-preview-bg htw-w-4 htw-h-4 htw-rounded-full htw-border htw-border-black/50 dark:htw-border-white/50" }, null, -1));
 const _hoisted_3$b = { class: "htw-flex htw-flex-col htw-items-stretch" };
 const _hoisted_4$8 = /* @__PURE__ */ createTextVNode(" Checkerboard ");
 const _hoisted_5$5 = ["onClick"];
@@ -548,7 +547,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
         class: "htw-h-full htw-flex-none"
       }, {
         popper: withCtx(({ hide }) => [
-          createElementVNode("div", _hoisted_3$b, [
+          createBaseVNode("div", _hoisted_3$b, [
             createVNode(_sfc_main$q, {
               modelValue: unref(settings).checkerboard,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(settings).checkerboard = $event)
@@ -569,10 +568,10 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                   hide();
                 }
               }, [
-                createElementVNode("span", _hoisted_6$5, toDisplayString(option.label), 1),
+                createBaseVNode("span", _hoisted_6$5, toDisplayString(option.label), 1),
                 option.color !== "$checkerboard" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                  createElementVNode("span", _hoisted_7$2, toDisplayString(option.color), 1),
-                  createElementVNode("div", {
+                  createBaseVNode("span", _hoisted_7$2, toDisplayString(option.color), 1),
+                  createBaseVNode("div", {
                     class: "htw-w-4 htw-h-4 htw-rounded-full htw-border htw-border-black/20 dark:htw-border-white/20",
                     style: normalizeStyle({
                       backgroundColor: option.color
@@ -643,20 +642,20 @@ function _sfc_render$3(_ctx, _cache) {
 var HatchedPattern = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$3], ["__scopeId", "data-v-250960ac"]]);
 const _sfc_main$l = {};
 const _hoisted_1$j = { fill: "none" };
-const _hoisted_2$h = /* @__PURE__ */ createElementVNode("pattern", {
+const _hoisted_2$h = /* @__PURE__ */ createBaseVNode("pattern", {
   id: "checkerboard",
   width: "64",
   height: "64",
   patternUnits: "userSpaceOnUse"
 }, [
-  /* @__PURE__ */ createElementVNode("rect", {
+  /* @__PURE__ */ createBaseVNode("rect", {
     x: "0",
     y: "0",
     width: "32",
     height: "32",
     fill: "currentColor"
   }),
-  /* @__PURE__ */ createElementVNode("rect", {
+  /* @__PURE__ */ createBaseVNode("rect", {
     x: "32",
     y: "32",
     width: "32",
@@ -664,7 +663,7 @@ const _hoisted_2$h = /* @__PURE__ */ createElementVNode("pattern", {
     fill: "currentColor"
   })
 ], -1);
-const _hoisted_3$a = /* @__PURE__ */ createElementVNode("rect", {
+const _hoisted_3$a = /* @__PURE__ */ createBaseVNode("rect", {
   x: "0",
   y: "0",
   width: "100%",
@@ -687,7 +686,7 @@ const _hoisted_2$g = {
 };
 const _hoisted_3$9 = { class: "htw-p-4 htw-h-full htw-relative" };
 const _hoisted_4$6 = { class: "htw-w-full htw-h-full htw-border htw-border-gray-100 dark:htw-border-gray-800 htw-rounded-sm htw-relative" };
-const _hoisted_5$4 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("div", { class: "bind-preview-bg htw-absolute htw-inset-0" }, null, -1));
+const _hoisted_5$4 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createBaseVNode("div", { class: "bind-preview-bg htw-absolute htw-inset-0" }, null, -1));
 const _hoisted_6$4 = /* @__PURE__ */ createStaticVNode('<div class="htw-absolute htw-top-1 htw-left-4 htw-h-2 htw-w-px htw-bg-gray-200 dark:htw-bg-gray-800" data-v-769a585e></div><div class="htw-absolute htw-top-1 htw-right-4 htw-h-2 htw-w-px htw-bg-gray-200 dark:htw-bg-gray-800" data-v-769a585e></div><div class="htw-absolute htw-bottom-1 htw-left-4 htw-h-2 htw-w-px htw-bg-gray-200 dark:htw-bg-gray-800" data-v-769a585e></div><div class="htw-absolute htw-bottom-1 htw-right-4 htw-h-2 htw-w-px htw-bg-gray-200 dark:htw-bg-gray-800" data-v-769a585e></div><div class="htw-absolute htw-left-1 htw-top-4 htw-w-2 htw-h-px htw-bg-gray-200 dark:htw-bg-gray-800" data-v-769a585e></div><div class="htw-absolute htw-left-1 htw-bottom-4 htw-w-2 htw-h-px htw-bg-gray-200 dark:htw-bg-gray-800" data-v-769a585e></div><div class="htw-absolute htw-right-1 htw-top-4 htw-w-2 htw-h-px htw-bg-gray-200 dark:htw-bg-gray-800" data-v-769a585e></div><div class="htw-absolute htw-right-1 htw-bottom-4 htw-w-2 htw-h-px htw-bg-gray-200 dark:htw-bg-gray-800" data-v-769a585e></div>', 8);
 const _sfc_main$k = /* @__PURE__ */ defineComponent({
   name: "StoryResponsivePreview",
@@ -789,19 +788,19 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         unref(isResponsiveEnabled) ? (openBlock(), createElementBlock("div", _hoisted_2$g, [
           createVNode(HatchedPattern, { class: "htw-w-full htw-h-full htw-text-black/[2%] dark:htw-text-white/[2%]" })
         ])) : createCommentVNode("", true),
-        createElementVNode("div", {
+        createBaseVNode("div", {
           ref_key: "previewWrapper",
           ref: previewWrapper,
           class: "htw-h-full htw-overflow-auto htw-relative"
         }, [
-          createElementVNode("div", {
+          createBaseVNode("div", {
             class: normalizeClass(["htw-h-full htw-p-4 htw-overflow-hidden htw-bg-white dark:htw-bg-gray-700 htw-rounded-lg htw-relative", unref(isResponsiveEnabled) ? {
               "htw-w-fit": !!unref(finalWidth),
               "htw-h-fit": !!unref(finalHeight)
             } : void 0])
           }, [
-            createElementVNode("div", _hoisted_3$9, [
-              createElementVNode("div", _hoisted_4$6, [
+            createBaseVNode("div", _hoisted_3$9, [
+              createBaseVNode("div", _hoisted_4$6, [
                 _hoisted_5$4,
                 unref(settings).checkerboard ? (openBlock(), createBlock(CheckerboardPattern, {
                   key: 0,
@@ -817,7 +816,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
               _hoisted_6$4
             ]),
             unref(isResponsiveEnabled) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-              createElementVNode("div", {
+              createBaseVNode("div", {
                 ref_key: "horizontalDragger",
                 ref: horizontalDragger,
                 class: "htw-absolute htw-w-4 htw-top-0 htw-bottom-4 htw-right-0 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-items-center htw-justify-center htw-cursor-ew-resize htw-group hover:htw-text-primary-500"
@@ -827,7 +826,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                   class: "htw-w-4 htw-h-4 htw-opacity-20 group-hover:htw-opacity-90"
                 })
               ], 512),
-              createElementVNode("div", {
+              createBaseVNode("div", {
                 ref_key: "verticalDragger",
                 ref: verticalDragger,
                 class: "htw-absolute htw-h-4 htw-left-0 htw-right-4 htw-bottom-0 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-items-center htw-justify-center htw-cursor-ns-resize htw-group hover:htw-text-primary-500"
@@ -837,7 +836,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                   class: "htw-w-4 htw-h-4 htw-opacity-20 group-hover:htw-opacity-90"
                 })
               ], 512),
-              createElementVNode("div", {
+              createBaseVNode("div", {
                 ref_key: "cornerDragger",
                 ref: cornerDragger,
                 class: "htw-absolute htw-w-4 htw-h-4 htw-right-0 htw-bottom-0 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-items-center htw-justify-center htw-cursor-nwse-resize htw-group hover:htw-text-primary-500"
@@ -869,13 +868,13 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(StoryResponsivePreview, { variant: __props.variant }, {
         default: withCtx(({ isResponsiveEnabled, finalWidth, finalHeight }) => [
-          createElementVNode("div", {
+          createBaseVNode("div", {
             style: normalizeStyle(isResponsiveEnabled ? {
               width: finalWidth ? `${finalWidth}px` : "100%",
               height: finalHeight ? `${finalHeight}px` : "100%"
             } : { width: "100%", height: "100%" })
           }, [
-            (openBlock(), createBlock(_sfc_main$v, {
+            (openBlock(), createBlock(_sfc_main$w, {
               key: `${__props.story.id}-${__props.variant.id}`,
               variant: __props.variant,
               story: __props.story,
@@ -977,7 +976,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(StoryResponsivePreview, { variant: __props.variant }, {
         default: withCtx(({ isResponsiveEnabled, finalWidth, finalHeight, resizing }) => [
-          createElementVNode("iframe", {
+          createBaseVNode("iframe", {
             ref_key: "iframe",
             ref: iframe,
             src: unref(sandboxUrl),
@@ -1084,7 +1083,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         }, null, 8, ["variant", "story"])) : createCommentVNode("", true)
       ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
         unref(isMobile) ? (openBlock(), createElementBlock("div", _hoisted_2$e, [
-          createElementVNode("a", {
+          createBaseVNode("a", {
             class: "htw-px-6 htw-h-12 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-flex htw-gap-2 htw-flex-wrap htw-w-full htw-items-center",
             onClick: openMenu
           }, [
@@ -1120,7 +1119,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           "default-split": 17
         }, {
           first: withCtx(() => [
-            createElementVNode("div", _hoisted_5$3, [
+            createBaseVNode("div", _hoisted_5$3, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(unref(storyStore).currentStory.variants, (variant2, index) => {
                 return openBlock(), createBlock(StoryVariantListItem, {
                   key: index,
@@ -1165,10 +1164,10 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("div", _hoisted_1$e, [
+        createBaseVNode("div", _hoisted_1$e, [
           unref(storyStore).currentStory.layout.type === "grid" ? (openBlock(), createBlock(_sfc_main$s, { key: 0 })) : unref(storyStore).currentStory.layout.type === "single" ? (openBlock(), createBlock(StoryVariantSingle, { key: 1 })) : createCommentVNode("", true)
         ]),
-        createVNode(_sfc_main$w, {
+        createVNode(_sfc_main$v, {
           title: "Select a variant",
           opened: isMenuOpened.value,
           onClose: closeMenu
@@ -1216,7 +1215,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Dropdown), { "auto-size": "" }, {
         popper: withCtx(({ hide }) => [
-          createElementVNode("div", _hoisted_3$7, [
+          createBaseVNode("div", _hoisted_3$7, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(formattedOptions), (label, value) => {
               return openBlock(), createElementBlock("div", mergeProps(__spreadProps(__spreadValues({}, _ctx.$attrs), { class: null, style: null }), {
                 key: label,
@@ -1236,8 +1235,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           ])
         ]),
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$d, [
-            createElementVNode("div", _hoisted_2$d, [
+          createBaseVNode("div", _hoisted_1$d, [
+            createBaseVNode("div", _hoisted_2$d, [
               renderSlot(_ctx.$slots, "default", { label: unref(selectedLabel) }, () => [
                 createTextVNode(toDisplayString(unref(selectedLabel)), 1)
               ])
@@ -1347,7 +1346,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _directive_tooltip = resolveDirective("tooltip");
       return openBlock(), createElementBlock("div", _hoisted_1$c, [
-        createElementVNode("div", {
+        createBaseVNode("div", {
           ref_key: "select",
           ref: select,
           class: "htw-flex-1 htw-min-w-0"
@@ -1376,7 +1375,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
               }, null, 8, _hoisted_2$c)), [
                 [vModelText, unref(presetStates).get(unref(selectedOption)).label]
               ]) : (openBlock(), createElementBlock("div", _hoisted_3$6, [
-                createElementVNode("span", _hoisted_4$3, toDisplayString(label), 1),
+                createBaseVNode("span", _hoisted_4$3, toDisplayString(label), 1),
                 unref(canEdit) ? withDirectives((openBlock(), createBlock(unref(Icon), {
                   key: 0,
                   icon: "carbon:edit",
@@ -1388,8 +1387,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
               ]))
             ]),
             option: withCtx(({ label, value }) => [
-              createElementVNode("div", _hoisted_5$2, [
-                createElementVNode("span", _hoisted_6$2, toDisplayString(label), 1),
+              createBaseVNode("div", _hoisted_5$2, [
+                createBaseVNode("span", _hoisted_6$2, toDisplayString(label), 1),
                 value !== DEFAULT_ID ? withDirectives((openBlock(), createBlock(unref(Icon), {
                   key: 0,
                   icon: "carbon:trash-can",
@@ -1525,8 +1524,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$b = { class: "htw-font-mono htw-p-2 htw-flex htw-items-center htw-gap-1" };
-const _hoisted_2$b = /* @__PURE__ */ createElementVNode("span", { class: "htw-opacity-30" }, "<", -1);
-const _hoisted_3$5 = /* @__PURE__ */ createElementVNode("span", { class: "htw-opacity-30" }, ">", -1);
+const _hoisted_2$b = /* @__PURE__ */ createBaseVNode("span", { class: "htw-opacity-30" }, "<", -1);
+const _hoisted_3$5 = /* @__PURE__ */ createBaseVNode("span", { class: "htw-opacity-30" }, ">", -1);
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
   name: "ControlsComponentProps",
   props: {
@@ -1537,14 +1536,14 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _directive_tooltip = resolveDirective("tooltip");
       return openBlock(), createElementBlock("div", null, [
-        createElementVNode("div", _hoisted_1$b, [
+        createBaseVNode("div", _hoisted_1$b, [
           withDirectives(createVNode(unref(Icon), {
             icon: "carbon:flash",
             class: "htw-w-4 htw-h-4 htw-text-primary-500 htw-flex-none"
           }, null, 512), [
             [_directive_tooltip, "Auto-detected props"]
           ]),
-          createElementVNode("div", null, [
+          createBaseVNode("div", null, [
             _hoisted_2$b,
             createTextVNode(toDisplayString(__props.definition.name), 1),
             _hoisted_3$5
@@ -1567,7 +1566,7 @@ const _hoisted_1$a = {
   class: "htw-flex htw-flex-col htw-divide-y htw-divide-gray-100 dark:htw-divide-gray-750"
 };
 const _hoisted_2$a = { class: "htw-h-9 htw-flex-none htw-px-2 htw-flex htw-items-center" };
-const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("span", null, "No controls available for this story", -1);
+const _hoisted_3$4 = /* @__PURE__ */ createBaseVNode("span", null, "No controls available for this story", -1);
 const _hoisted_4$2 = { key: 2 };
 const _sfc_main$a = /* @__PURE__ */ defineComponent({
   name: "StoryControls",
@@ -1585,13 +1584,13 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       var _a, _b, _c, _d;
       return openBlock(), createElementBlock("div", _hoisted_1$a, [
-        createElementVNode("div", _hoisted_2$a, [
+        createBaseVNode("div", _hoisted_2$a, [
           createVNode(_sfc_main$d, {
             story: __props.story,
             variant: __props.variant
           }, null, 8, ["story", "variant"])
         ]),
-        __props.variant.slots().controls || __props.story.slots().controls ? (openBlock(), createBlock(_sfc_main$v, {
+        __props.variant.slots().controls || __props.story.slots().controls ? (openBlock(), createBlock(_sfc_main$w, {
           key: 0,
           "slot-name": "controls",
           variant: __props.variant,
@@ -1696,12 +1695,12 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         "data-test-id": "event-item"
       }, {
         default: withCtx(({ shown }) => [
-          createElementVNode("div", {
+          createBaseVNode("div", {
             class: normalizeClass(["group-hover:htw-bg-primary-100 dark:group-hover:htw-bg-primary-700 htw-cursor-pointer htw-py-2 htw-px-4 htw-flex htw-items-baseline htw-gap-1 htw-leading-normal", [
               shown ? "htw-bg-primary-50 dark:htw-bg-primary-600" : "group-odd:htw-bg-gray-100/50 dark:group-odd:htw-bg-gray-750/40"
             ]])
           }, [
-            createElementVNode("span", {
+            createBaseVNode("span", {
               class: normalizeClass({
                 "htw-text-primary-500": shown
               })
@@ -1710,8 +1709,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           ], 2)
         ]),
         popper: withCtx(() => [
-          createElementVNode("div", _hoisted_2$8, [
-            createElementVNode("pre", _hoisted_3$3, toDisplayString(__props.event.argument), 1)
+          createBaseVNode("div", _hoisted_2$8, [
+            createBaseVNode("pre", _hoisted_3$3, toDisplayString(__props.event.argument), 1)
           ])
         ]),
         _: 1
@@ -1768,8 +1767,8 @@ const _hoisted_2$6 = {
   key: 0,
   class: "htw-h-10 htw-flex-none htw-border-b htw-border-solid htw-border-gray-150 dark:htw-border-gray-850 htw-px-4 htw-flex htw-items-center"
 };
-const _hoisted_3$2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "htw-text-gray-900 dark:htw-text-gray-100" }, " Source ", -1));
-const _hoisted_4$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "htw-flex-1" }, null, -1));
+const _hoisted_3$2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("div", { class: "htw-text-gray-900 dark:htw-text-gray-100" }, " Source ", -1));
+const _hoisted_4$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("div", { class: "htw-flex-1" }, null, -1));
 const _hoisted_5$1 = {
   key: 1,
   class: "htw-text-red-500 htw-h-full htw-p-2 htw-overflow-auto htw-font-mono htw-text-sm"
@@ -1853,7 +1852,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           readonly: "",
           "data-test-id": "story-source-code"
         }, null, 8, _hoisted_6$1)) : (openBlock(), createElementBlock("div", _hoisted_7$1, [
-          createElementVNode("div", {
+          createBaseVNode("div", {
             class: "__histoire-code htw-p-4 htw-w-fit",
             innerHTML: unref(sourceHtml)
           }, null, 8, _hoisted_8$1)
@@ -1885,7 +1884,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_router_link = resolveComponent("router-link");
   return openBlock(), createBlock(_component_router_link, mergeProps(_ctx.$attrs, { custom: "" }), {
     default: withCtx(({ isActive, isExactActive, href, navigate }) => [
-      createElementVNode("a", mergeProps(_ctx.$attrs, {
+      createBaseVNode("a", mergeProps(_ctx.$attrs, {
         href,
         class: ["htw-px-4 htw-h-full htw-inline-flex htw-items-center hover:htw-bg-primary-50 dark:hover:htw-bg-primary-900 htw-relative htw-text-gray-900 dark:htw-text-gray-100", {
           "htw-text-primary-500 dark:htw-text-primary-400": _ctx.matched != null ? _ctx.matched : _ctx.exact && isExactActive || !_ctx.exact && isActive
@@ -1974,7 +1973,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         }),
         unref(visibleChildrenCount) < children.value.size ? (openBlock(), createBlock(_component_VDropdown, { key: 0 }, {
           popper: withCtx(() => [
-            createElementVNode("div", _hoisted_2$4, [
+            createBaseVNode("div", _hoisted_2$4, [
               createVNode(ChildrenSlice, { start: unref(visibleChildrenCount) }, {
                 default: withCtx(() => [
                   renderSlot(_ctx.$slots, "overflow")
@@ -1984,7 +1983,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             ])
           ]),
           default: withCtx(() => [
-            createElementVNode("div", _hoisted_1$4, [
+            createBaseVNode("div", _hoisted_1$4, [
               createVNode(unref(Icon), {
                 icon: "carbon:caret-down",
                 class: "htw-w-4 htw-h-4 htw-opacity-50 group-hover:htw-opacity-100"
@@ -2019,7 +2018,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_router_link = resolveComponent("router-link");
   return openBlock(), createBlock(_component_router_link, mergeProps(_ctx.$attrs, { custom: "" }), {
     default: withCtx(({ isActive, isExactActive, href, navigate }) => [
-      createElementVNode("a", mergeProps(_ctx.$attrs, {
+      createBaseVNode("a", mergeProps(_ctx.$attrs, {
         href,
         class: ["htw-px-4 htw-h-10 htw-min-w-[150px] htw-inline-flex htw-items-center hover:htw-bg-primary-50 dark:hover:htw-bg-primary-900 htw-relative htw-text-gray-900 dark:htw-text-gray-100", {
           "htw-text-primary-500 dark:htw-text-primary-400": _ctx.matched != null ? _ctx.matched : _ctx.exact && isExactActive || !_ctx.exact && isActive
@@ -2124,8 +2123,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$1 = /* @__PURE__ */ createElementVNode("span", null, "Select a variant", -1);
-const _hoisted_2$1 = /* @__PURE__ */ createElementVNode("span", null, "Loading...", -1);
+const _hoisted_1$1 = /* @__PURE__ */ createBaseVNode("span", null, "Select a variant", -1);
+const _hoisted_2$1 = /* @__PURE__ */ createBaseVNode("span", null, "Loading...", -1);
 const _hoisted_3 = { class: "htw-flex htw-flex-col htw-h-full" };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   name: "StorySidePanel",
@@ -2161,7 +2160,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         "data-test-id": "story-side-panel"
       }, {
         first: withCtx(() => [
-          createElementVNode("div", _hoisted_3, [
+          createBaseVNode("div", _hoisted_3, [
             createVNode(_sfc_main$2),
             (openBlock(), createBlock(resolveDynamicComponent(unref(panelContentComponent)), {
               story: unref(storyStore).currentStory,