@ohos-ports/histoire-app 1.0.0-beta.0

package/dist/bundled/components/story/StoryVariantSinglePreviewRemote.vue2.js

@@ -0,0 +1,128 @@
+import { defineComponent, ref, watch, computed, createBlock, openBlock, withCtx, createElementVNode, normalizeStyle, normalizeClass, toRaw } from "@histoire/vendors/vue";
+import { applyState } from "@histoire/shared";
+import { useEventListener } from "@histoire/vendors/vue-use";
+import { useEventsStore } from "../../stores/events.js";
+import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
+import { SANDBOX_READY, EVENT_SEND, STATE_SYNC, PREVIEW_SETTINGS_SYNC } from "../../util/const.js";
+import { getSandboxUrl } from "../../util/sandbox.js";
+import { toRawDeep } from "../../util/state.js";
+import StoryResponsivePreview from "./StoryResponsivePreview.vue.js";
+"use strict";
+const _hoisted_1 = ["src"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "StoryVariantSinglePreviewRemote",
+  props: {
+    story: {},
+    variant: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const settings = usePreviewSettingsStore().currentSettings;
+    const iframe = ref();
+    function syncState() {
+      if (iframe.value && props.variant.previewReady) {
+        iframe.value.contentWindow.postMessage({
+          type: STATE_SYNC,
+          state: toRawDeep(props.variant.state, true)
+        });
+      }
+    }
+    let synced = false;
+    watch(() => props.variant.state, () => {
+      if (synced) {
+        synced = false;
+        return;
+      }
+      syncState();
+    }, {
+      deep: true,
+      immediate: true
+    });
+    Object.assign(props.variant, {
+      previewReady: false
+    });
+    useEventListener(window, "message", (event) => {
+      switch (event.data.type) {
+        case STATE_SYNC:
+          updateVariantState(event.data.state);
+          break;
+        case EVENT_SEND:
+          logEvent(event.data.event);
+          break;
+        case SANDBOX_READY:
+          setPreviewReady();
+          break;
+      }
+    });
+    function updateVariantState(state) {
+      synced = true;
+      applyState(props.variant.state, state);
+    }
+    function logEvent(event) {
+      const eventsStore = useEventsStore();
+      eventsStore.addEvent(event);
+    }
+    function setPreviewReady() {
+      Object.assign(props.variant, {
+        previewReady: true
+      });
+    }
+    const sandboxUrl = computed(() => {
+      return getSandboxUrl(props.story, props.variant);
+    });
+    const isIframeLoaded = ref(false);
+    watch(sandboxUrl, () => {
+      isIframeLoaded.value = false;
+      Object.assign(props.variant, {
+        previewReady: false
+      });
+    });
+    function syncSettings() {
+      if (iframe.value) {
+        iframe.value.contentWindow.postMessage({
+          type: PREVIEW_SETTINGS_SYNC,
+          settings: toRaw(settings)
+        });
+      }
+    }
+    watch(() => settings, () => {
+      syncSettings();
+    }, {
+      deep: true,
+      immediate: true
+    });
+    function onIframeLoad() {
+      isIframeLoaded.value = true;
+      syncState();
+      syncSettings();
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(StoryResponsivePreview, {
+        class: "histoire-story-variant-single-preview-remote",
+        variant: __props.variant
+      }, {
+        default: withCtx(({ isResponsiveEnabled, finalWidth, finalHeight, resizing }) => [
+          createElementVNode("iframe", {
+            ref_key: "iframe",
+            ref: iframe,
+            src: sandboxUrl.value,
+            class: normalizeClass(["htw-w-full htw-h-full htw-relative", {
+              "htw-invisible": !isIframeLoaded.value,
+              "htw-pointer-events-none": resizing
+            }]),
+            style: normalizeStyle(isResponsiveEnabled ? {
+              width: finalWidth ? `${finalWidth}px` : null,
+              height: finalHeight ? `${finalHeight}px` : null
+            } : void 0),
+            "data-test-id": "preview-iframe",
+            onLoad: _cache[0] || (_cache[0] = ($event) => onIframeLoad())
+          }, null, 46, _hoisted_1)
+        ]),
+        _: 1
+      }, 8, ["variant"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/story/StoryVariantSingleView.vue.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./StoryVariantSingleView.vue2.js";
+"use strict";
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/story/StoryVariantSingleView.vue2.js

@@ -0,0 +1,66 @@
+import { defineComponent, createElementBlock, openBlock, createCommentVNode, createBlock, unref, createVNode } from "@histoire/vendors/vue";
+import { isMobile } from "../../util/responsive.js";
+import "../toolbar/DevOnlyToolbarOpenInEditor.vue.js";
+import ToolbarBackground from "../toolbar/ToolbarBackground.vue.js";
+import "../toolbar/ToolbarNewTab.vue.js";
+import "../toolbar/ToolbarResponsiveSize.vue.js";
+import "../toolbar/ToolbarTextDirection.vue.js";
+import "../toolbar/ToolbarTitle.vue.js";
+import "./StoryVariantSinglePreviewNative.vue.js";
+import "./StoryVariantSinglePreviewRemote.vue.js";
+import _sfc_main$1 from "../toolbar/ToolbarTitle.vue2.js";
+import _sfc_main$2 from "../toolbar/ToolbarResponsiveSize.vue2.js";
+import _sfc_main$3 from "../toolbar/ToolbarTextDirection.vue2.js";
+import _sfc_main$4 from "../toolbar/ToolbarNewTab.vue2.js";
+import _sfc_main$5 from "../toolbar/DevOnlyToolbarOpenInEditor.vue2.js";
+import _sfc_main$6 from "./StoryVariantSinglePreviewNative.vue2.js";
+import _sfc_main$7 from "./StoryVariantSinglePreviewRemote.vue2.js";
+"use strict";
+const _hoisted_1 = {
+  class: "histoire-story-variant-single-view htw-h-full htw-flex htw-flex-col",
+  "data-test-id": "story-variant-single-view"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "htw-flex-none htw-flex htw-items-center htw-h-8 -htw-mt-1"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "StoryVariantSingleView",
+  props: {
+    variant: {},
+    story: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        !unref(isMobile) ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createVNode(_sfc_main$1, { variant: __props.variant }, null, 8, ["variant"]),
+          !__props.variant.responsiveDisabled ? (openBlock(), createBlock(_sfc_main$2, { key: 0 })) : createCommentVNode("", true),
+          createVNode(ToolbarBackground),
+          createVNode(_sfc_main$3),
+          createVNode(_sfc_main$4, {
+            variant: __props.variant,
+            story: __props.story
+          }, null, 8, ["variant", "story"]),
+          _ctx.__HISTOIRE_DEV__ ? (openBlock(), createBlock(_sfc_main$5, {
+            key: 1,
+            file: __props.story.file?.filePath,
+            tooltip: "Edit story in editor"
+          }, null, 8, ["file"])) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true),
+        __props.story.layout?.iframe === false ? (openBlock(), createBlock(_sfc_main$6, {
+          key: 1,
+          story: __props.story,
+          variant: __props.variant
+        }, null, 8, ["story", "variant"])) : (openBlock(), createBlock(_sfc_main$7, {
+          key: 2,
+          story: __props.story,
+          variant: __props.variant
+        }, null, 8, ["story", "variant"]))
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/story/StoryView.vue.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./StoryView.vue2.js";
+"use strict";
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/story/StoryView.vue2.js

@@ -0,0 +1,104 @@
+import { defineComponent, watch, ref, createBlock, createElementBlock, unref, openBlock, withCtx, createVNode } from "@histoire/vendors/vue";
+import { Icon } from "@histoire/vendors/iconify";
+import { useRouter, useRoute } from "@histoire/vendors/vue-router";
+import { useStoryStore } from "../../stores/story.js";
+import { isMobile } from "../../util/responsive.js";
+import BaseEmpty from "../base/BaseEmpty.vue.js";
+import BaseSplitPane from "../base/BaseSplitPane.vue.js";
+import "../panel/StoryDocs.vue.js";
+import "../panel/StorySidePanel.vue.js";
+import StoryViewer from "./StoryViewer.vue.js";
+import _sfc_main$1 from "../panel/StoryDocs.vue2.js";
+import _sfc_main$2 from "../panel/StorySidePanel.vue2.js";
+"use strict";
+const _hoisted_1 = {
+  key: 1,
+  class: "histoire-story-view histoire-with-story htw-h-full"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "StoryView",
+  setup(__props) {
+    const storyStore = useStoryStore();
+    const router = useRouter();
+    const route = useRoute();
+    watch(() => storyStore.currentVariant, (value) => {
+      if (value) {
+        storyStore.currentStory.lastSelectedVariant = value;
+      }
+    }, {
+      immediate: true
+    });
+    watch(() => [storyStore.currentStory, storyStore.currentVariant], () => {
+      if (!storyStore.currentVariant) {
+        if (storyStore.currentStory?.lastSelectedVariant) {
+          setVariant(storyStore.currentStory.lastSelectedVariant.id);
+          return;
+        }
+        if (storyStore.currentStory?.variants.length === 1) {
+          setVariant(storyStore.currentStory.variants[0].id);
+        }
+      }
+    }, {
+      immediate: true
+    });
+    function setVariant(variantId) {
+      router.replace({
+        ...route,
+        query: {
+          ...route.query,
+          variantId
+        }
+      });
+    }
+    const docsOnlyScroller = ref(null);
+    function scrollDocsToTop() {
+      docsOnlyScroller.value?.scrollTo(0, 0);
+    }
+    return (_ctx, _cache) => {
+      return !unref(storyStore).currentStory ? (openBlock(), createBlock(BaseEmpty, {
+        key: 0,
+        class: "histoire-story-view histoire-no-story"
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(Icon), {
+            icon: "carbon:software-resource-resource",
+            class: "htw-w-16 htw-h-16 htw-opacity-50"
+          })
+        ]),
+        _: 1
+      })) : (openBlock(), createElementBlock("div", _hoisted_1, [
+        unref(storyStore).currentStory.docsOnly ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          ref_key: "docsOnlyScroller",
+          ref: docsOnlyScroller,
+          class: "htw-h-full htw-overflow-auto"
+        }, [
+          createVNode(_sfc_main$1, {
+            story: unref(storyStore).currentStory,
+            standalone: "",
+            class: "md:htw-p-12 htw-w-full md:htw-max-w-[600px] lg:htw-max-w-[800px] xl:htw-max-w-[900px]",
+            onScrollTop: _cache[0] || (_cache[0] = ($event) => scrollDocsToTop())
+          }, null, 8, ["story"])
+        ], 512)) : unref(isMobile) ? (openBlock(), createBlock(StoryViewer, { key: 1 })) : (openBlock(), createBlock(BaseSplitPane, {
+          key: 2,
+          "save-id": "story-main",
+          min: 30,
+          max: 95,
+          "default-split": 75,
+          class: "htw-h-full"
+        }, {
+          first: withCtx(() => [
+            createVNode(StoryViewer)
+          ]),
+          last: withCtx(() => [
+            createVNode(_sfc_main$2)
+          ]),
+          _: 1
+        }))
+      ]));
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/story/StoryViewer.vue.js

@@ -0,0 +1,8 @@
+import _sfc_main from "./StoryViewer.vue2.js";
+/* empty css                 */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+"use strict";
+const StoryViewer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-096f6d6e"]]);
+export {
+  StoryViewer as default
+};

package/dist/bundled/components/story/StoryViewer.vue2.js

@@ -0,0 +1,55 @@
+import { defineComponent, useCssVars, computed, ref, watch, createElementBlock, openBlock, Fragment, createElementVNode, createVNode, createBlock, createCommentVNode, unref, withCtx, renderList } from "@histoire/vendors/vue";
+import { useStoryStore } from "../../stores/story.js";
+import "../app/MobileOverlay.vue.js";
+import "./StoryVariantGrid.vue.js";
+import StoryVariantListItem from "./StoryVariantListItem.vue.js";
+import StoryVariantSingle from "./StoryVariantSingle.vue.js";
+import _sfc_main$1 from "./StoryVariantGrid.vue2.js";
+import _sfc_main$2 from "../app/MobileOverlay.vue2.js";
+"use strict";
+const _hoisted_1 = { class: "histoire-story-viewer htw-bg-gray-50 htw-h-full dark:htw-bg-gray-750" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "StoryViewer",
+  setup(__props) {
+    useCssVars((_ctx) => ({
+      "v0f021d3c": variant.value?.iconColor
+    }));
+    const storyStore = useStoryStore();
+    const variant = computed(() => storyStore.currentVariant);
+    const isMenuOpened = ref(false);
+    function closeMenu() {
+      isMenuOpened.value = false;
+    }
+    watch(variant, () => {
+      isMenuOpened.value = false;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", _hoisted_1, [
+          unref(storyStore).currentStory.layout.type === "grid" ? (openBlock(), createBlock(_sfc_main$1, { key: 0 })) : unref(storyStore).currentStory.layout.type === "single" ? (openBlock(), createBlock(StoryVariantSingle, {
+            key: 1,
+            onOpenVariantMenu: _cache[0] || (_cache[0] = ($event) => isMenuOpened.value = true)
+          })) : createCommentVNode("", true)
+        ]),
+        createVNode(_sfc_main$2, {
+          title: "Select a variant",
+          opened: isMenuOpened.value,
+          onClose: closeMenu
+        }, {
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(storyStore).currentStory.variants, (v, index) => {
+              return openBlock(), createBlock(StoryVariantListItem, {
+                key: index,
+                variant: v
+              }, null, 8, ["variant"]);
+            }), 128))
+          ]),
+          _: 1
+        }, 8, ["opened"])
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/toolbar/DevOnlyToolbarOpenInEditor.vue.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./DevOnlyToolbarOpenInEditor.vue2.js";
+"use strict";
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/toolbar/DevOnlyToolbarOpenInEditor.vue2.js

@@ -0,0 +1,31 @@
+import { defineComponent, resolveDirective, withDirectives, createElementBlock, openBlock, unref, createVNode } from "@histoire/vendors/vue";
+import { Icon } from "@histoire/vendors/iconify";
+import { openInEditor } from "../../util/open-in-editor.js";
+"use strict";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "DevOnlyToolbarOpenInEditor",
+  props: {
+    file: {},
+    tooltip: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _directive_tooltip = resolveDirective("tooltip");
+      return withDirectives((openBlock(), createElementBlock("a", {
+        target: "_blank",
+        class: "histoire-toolbar-open-in-editor htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100",
+        onClick: _cache[0] || (_cache[0] = ($event) => unref(openInEditor)(__props.file))
+      }, [
+        createVNode(unref(Icon), {
+          icon: "carbon:script-reference",
+          class: "htw-w-4 htw-h-4"
+        })
+      ])), [
+        [_directive_tooltip, __props.tooltip]
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/toolbar/ToolbarBackground.vue.js

@@ -0,0 +1,8 @@
+import _sfc_main from "./ToolbarBackground.vue2.js";
+/* empty css                       */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+"use strict";
+const ToolbarBackground = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c48fb2b2"]]);
+export {
+  ToolbarBackground as default
+};

package/dist/bundled/components/toolbar/ToolbarBackground.vue2.js

@@ -0,0 +1,98 @@
+import { defineComponent, useCssVars, computed, unref, resolveComponent, resolveDirective, createBlock, createCommentVNode, openBlock, withCtx, withDirectives, createElementBlock, createElementVNode, createVNode, createTextVNode, Fragment, renderList, normalizeClass, toDisplayString, normalizeStyle } from "@histoire/vendors/vue";
+import { Icon } from "@histoire/vendors/iconify";
+import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
+import { histoireConfig } from "../../util/config.js";
+import { getContrastColor } from "../../util/preview-settings.js";
+import "../base/BaseCheckbox.vue.js";
+import _sfc_main$1 from "../base/BaseCheckbox.vue2.js";
+"use strict";
+const _hoisted_1 = { 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 = { class: "bind-preview-bg htw-w-4 htw-h-4 htw-rounded-full htw-border htw-border-black/50 dark:htw-border-white/50 htw-flex htw-items-center htw-justify-center htw-text-xs" };
+const _hoisted_3 = { key: 0 };
+const _hoisted_4 = {
+  class: "htw-flex htw-flex-col htw-items-stretch",
+  "data-test-id": "background-popper"
+};
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = { class: "htw-mr-auto" };
+const _hoisted_7 = { class: "htw-ml-auto htw-opacity-70" };
+const _hoisted_8 = { key: 0 };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ToolbarBackground",
+  setup(__props) {
+    useCssVars((_ctx) => ({
+      "v627bec82": unref(settings).backgroundColor,
+      "v35068428": contrastColor.value
+    }));
+    const settings = usePreviewSettingsStore().currentSettings;
+    const contrastColor = computed(() => getContrastColor(settings));
+    return (_ctx, _cache) => {
+      const _component_VDropdown = resolveComponent("VDropdown");
+      const _directive_tooltip = resolveDirective("tooltip");
+      return unref(histoireConfig).backgroundPresets.length ? (openBlock(), createBlock(_component_VDropdown, {
+        key: 0,
+        placement: "bottom-end",
+        skidding: 6,
+        class: "histoire-toolbar-background htw-h-full htw-flex-none",
+        "data-test-id": "toolbar-background"
+      }, {
+        popper: withCtx(({ hide }) => [
+          createElementVNode("div", _hoisted_4, [
+            createVNode(_sfc_main$1, {
+              modelValue: unref(settings).checkerboard,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(settings).checkerboard = $event)
+            }, {
+              default: withCtx(() => [..._cache[1] || (_cache[1] = [
+                createTextVNode(" Checkerboard ", -1)
+              ])]),
+              _: 1
+            }, 8, ["modelValue"]),
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(histoireConfig).backgroundPresets, (option, index) => {
+              return openBlock(), createElementBlock("button", {
+                key: index,
+                class: normalizeClass(["htw-px-4 htw-py-3 htw-cursor-pointer htw-text-left htw-flex htw-items-baseline htw-gap-4", [
+                  unref(settings).backgroundColor === option.color ? "htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white dark:htw-text-black" : "htw-bg-transparent hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700"
+                ]]),
+                onClick: ($event) => {
+                  unref(settings).backgroundColor = option.color;
+                  hide();
+                }
+              }, [
+                createElementVNode("span", _hoisted_6, toDisplayString(option.label), 1),
+                option.color !== "$checkerboard" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                  createElementVNode("span", _hoisted_7, toDisplayString(option.color), 1),
+                  createElementVNode("div", {
+                    class: "htw-w-4 htw-h-4 htw-rounded-full htw-border htw-border-black/20 dark:htw-border-white/20 htw-flex htw-items-center htw-justify-center htw-text-xs",
+                    style: normalizeStyle({
+                      backgroundColor: option.color,
+                      color: option.contrastColor
+                    })
+                  }, [
+                    option.contrastColor ? (openBlock(), createElementBlock("span", _hoisted_8, "a")) : createCommentVNode("", true)
+                  ], 4)
+                ], 64)) : createCommentVNode("", true)
+              ], 10, _hoisted_5);
+            }), 128))
+          ])
+        ]),
+        default: withCtx(() => [
+          withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [
+            createElementVNode("div", _hoisted_2, [
+              contrastColor.value ? (openBlock(), createElementBlock("span", _hoisted_3, "a")) : createCommentVNode("", true)
+            ]),
+            createVNode(unref(Icon), {
+              icon: "carbon:caret-down",
+              class: "htw-w-4 htw-h-4 htw-opacity-50 group-hover:htw-opacity-100"
+            })
+          ])), [
+            [_directive_tooltip, "Background color"]
+          ])
+        ]),
+        _: 1
+      })) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/toolbar/ToolbarNewTab.vue.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./ToolbarNewTab.vue2.js";
+"use strict";
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/toolbar/ToolbarNewTab.vue2.js

@@ -0,0 +1,36 @@
+import { defineComponent, computed, resolveDirective, withDirectives, createElementBlock, openBlock, createVNode, unref } from "@histoire/vendors/vue";
+import { Icon } from "@histoire/vendors/iconify";
+import { getSandboxUrl } from "../../util/sandbox.js";
+"use strict";
+const _hoisted_1 = ["href"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ToolbarNewTab",
+  props: {
+    variant: {},
+    story: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const sandboxUrl = computed(() => {
+      return getSandboxUrl(props.story, props.variant);
+    });
+    return (_ctx, _cache) => {
+      const _directive_tooltip = resolveDirective("tooltip");
+      return withDirectives((openBlock(), createElementBlock("a", {
+        href: sandboxUrl.value,
+        target: "_blank",
+        class: "histoire-toolbar-new-tab htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
+      }, [
+        createVNode(unref(Icon), {
+          icon: "carbon:launch",
+          class: "htw-w-4 htw-h-4"
+        })
+      ], 8, _hoisted_1)), [
+        [_directive_tooltip, "Open variant in new tab"]
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/toolbar/ToolbarResponsiveSize.vue.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./ToolbarResponsiveSize.vue2.js";
+"use strict";
+export {
+  _sfc_main as default
+};