@useinsider/guido 3.19.0-beta.c604f7d → 3.19.0-beta.c8d2be8

package/dist/components/organisms/header/HeaderWrapper.vue2.js

@@ -1,14 +1,22 @@
-import { defineComponent as o } from "vue";
-import { InContainer as r } from "@useinsider/design-system-vue";
-import t from "./LeftSlot.vue.js";
-import e from "./MiddleSlot.vue.js";
-import m from "./RightSlot.vue.js";
-const s = /* @__PURE__ */ o({
+import { defineComponent as n, ref as m } from "vue";
+import { InContainer as a } from "@useinsider/design-system-vue";
+import f from "./LeftSlot.vue.js";
+import p from "./MiddleSlot.vue.js";
+import i from "./RightSlot.vue.js";
+const c = /* @__PURE__ */ n({
   __name: "HeaderWrapper",
-  setup(p) {
-    return { __sfc: !0, InContainer: r, LeftSlot: t, MiddleSlot: e, RightSlot: m };
+  setup(l, { expose: r }) {
+    const e = m(null);
+    return r({
+      // Stryker disable next-line OptionalChaining: RightSlot is always rendered (no
+      // v-if), so rightSlotRef.value is never null and `?.` cannot short-circuit.
+      handleSave: (t) => {
+        var o;
+        return (o = e.value) == null ? void 0 : o.handleSave(t);
+      }
+    }), { __sfc: !0, rightSlotRef: e, InContainer: a, LeftSlot: f, MiddleSlot: p, RightSlot: i };
   }
 });
 export {
-  s as default
+  c as default
 };

package/dist/components/organisms/header/LeftSlot.vue.js

@@ -1,16 +1,16 @@
 import o from "./LeftSlot.vue2.js";
 /* empty css              */
-import n from "../../../_virtual/_plugin-vue2_normalizer.js";
-var a = function() {
+import a from "../../../_virtual/_plugin-vue2_normalizer.js";
+var n = function() {
   var e = this, s = e._self._c, t = e._self._setupProxy;
   return s("div", { staticClass: "d-f a-i-c" }, [s(t.InButtonV2, { attrs: { id: "guido__back-button", "left-icon": "line-arrow-left", styling: "ghost", type: "secondary", "disabled-status": t.isBackButtonDisabled, "label-text": t.backButtonLabel, "skeleton-sizing": { width: 150, height: 26 }, "skeleton-status": t.editorStore.loadingStatus }, on: { click: t.handleBackClick } })], 1);
-}, i = [], r = /* @__PURE__ */ n(
+}, i = [], r = /* @__PURE__ */ a(
   o,
-  a,
+  n,
   i,
   !1,
   null,
-  "15610de9"
+  "73199fa4"
 );
 const f = r.exports;
 export {

package/dist/components/organisms/header/LeftSlot.vue2.js

@@ -1,45 +1,36 @@
-import { defineComponent as p, computed as d, ref as b } from "vue";
-import { useAccessibilityApi as k } from "../../../composables/useAccessibilityApi.js";
-import { useConfig as B } from "../../../composables/useConfig.js";
-import { useBack as y } from "../../../composables/useGuidoActions.js";
-import { usePreviewMode as v } from "../../../composables/usePreviewMode.js";
-import { useTranslations as A } from "../../../composables/useTranslations.js";
+import { defineComponent as l, computed as p, ref as d } from "vue";
+import { useConfig as k } from "../../../composables/useConfig.js";
+import { useBack as B } from "../../../composables/useGuidoActions.js";
+import { usePreviewMode as b } from "../../../composables/usePreviewMode.js";
+import { useTranslations as v } from "../../../composables/useTranslations.js";
 import { useVersionHistoryApi as _ } from "../../../composables/useVersionHistoryApi.js";
-import { useEditorStore as g } from "../../../stores/editor.js";
-import { InButtonV2 as O } from "@useinsider/design-system-vue";
-import { useDebounceFn as M } from "../../../node_modules/@vueuse/shared/index.js";
-const F = /* @__PURE__ */ p({
+import { useEditorStore as V } from "../../../stores/editor.js";
+import { InButtonV2 as w } from "@useinsider/design-system-vue";
+import { useDebounceFn as y } from "../../../node_modules/@vueuse/shared/index.js";
+const D = /* @__PURE__ */ l({
   __name: "LeftSlot",
-  setup(V) {
-    const e = g(), s = y(), { closeVersionHistory: r } = _(), { closePreviewMode: n } = v(), { closeAccessibilityTestingMode: c } = k(), o = A(), { config: t } = B(), m = d(() => {
-      var l, f;
-      return e.isVersionHistoryOpen || e.isPreviewModeOpen || e.isAccessibilityTestingOpen ? o("email-editor.back-to-editor") : (f = (l = t.value) == null ? void 0 : l.ui) != null && f.backButtonLabel ? t.value.ui.backButtonLabel : o("email-editor.back-to-design");
-    }), i = b(!1), a = () => {
+  setup(C) {
+    const e = V(), i = B(), { closeVersionHistory: n } = _(), { closePreviewMode: s } = b(), o = v(), { config: t } = k(), f = p(() => {
+      var u, m;
+      return e.isVersionHistoryOpen || e.isPreviewModeOpen ? o("email-editor.back-to-editor") : (m = (u = t.value) == null ? void 0 : u.ui) != null && m.backButtonLabel ? t.value.ui.backButtonLabel : o("email-editor.back-to-design");
+    }), r = d(!1), c = () => {
       if (e.isVersionHistoryOpen) {
-        r();
-        return;
-      }
-      if (e.isPreviewModeOpen) {
         n();
         return;
       }
-      if (e.isAccessibilityTestingOpen) {
-        c();
+      if (e.isPreviewModeOpen) {
+        s();
         return;
       }
-      s();
-    }, u = M(() => {
-      try {
-        a();
-      } finally {
-        i.value = !1;
-      }
+      i();
+    }, a = y(() => {
+      c(), r.value = !1;
     }, 500);
-    return { __sfc: !0, editorStore: e, handleBack: s, closeVersionHistory: r, closePreviewMode: n, closeAccessibilityTestingMode: c, trans: o, config: t, backButtonLabel: m, isBackButtonDisabled: i, executeBackAction: a, debouncedBackAction: u, handleBackClick: () => {
-      i.value = !0, u();
-    }, InButtonV2: O };
+    return { __sfc: !0, editorStore: e, handleBack: i, closeVersionHistory: n, closePreviewMode: s, trans: o, config: t, backButtonLabel: f, isBackButtonDisabled: r, executeBackAction: c, debouncedBackAction: a, handleBackClick: () => {
+      r.value = !0, a();
+    }, InButtonV2: w };
   }
 });
 export {
-  F as default
+  D as default
 };

package/dist/components/organisms/header/MiddleSlot.vue.js

@@ -1,8 +1,8 @@
 import r from "./MiddleSlot.vue2.js";
 import s from "../../../_virtual/_plugin-vue2_normalizer.js";
 var t = function() {
-  var o = this, i = o._self._c, e = o._self._setupProxy;
-  return i("div", { staticClass: "d-f a-i-c" }, [e.editorStore.isVersionHistoryOpen ? i("div", { staticClass: "d-f" }, [i(e.VersionHistory), i(e.VersionHistoryViewOptions)], 1) : e.editorStore.isPreviewModeOpen ? i("div", { staticClass: "d-f" }, [i(e.EmailSizeIndicator), i(e.AmpToggle)], 1) : e.editorStore.isAccessibilityTestingOpen ? i(e.AccessibilityToolbar) : o._e(), i(e.EditorToolbar, { directives: [{ name: "show", rawName: "v-show", value: e.editorStore.isEditorToolbarVisible, expression: "editorStore.isEditorToolbarVisible" }] })], 1);
+  var o = this, e = o._self._c, i = o._self._setupProxy;
+  return e("div", { staticClass: "d-f a-i-c" }, [i.editorStore.isVersionHistoryOpen ? e("div", { staticClass: "d-f" }, [e(i.VersionHistory), e(i.VersionHistoryViewOptions)], 1) : i.editorStore.isPreviewModeOpen ? e("div", { staticClass: "d-f" }, [e(i.EmailSizeIndicator), e(i.AmpToggle)], 1) : o._e(), e(i.EditorToolbar, { directives: [{ name: "show", rawName: "v-show", value: i.editorStore.isEditorToolbarVisible, expression: "editorStore.isEditorToolbarVisible" }] })], 1);
 }, a = [], n = /* @__PURE__ */ s(
   r,
   t,
@@ -11,7 +11,7 @@ var t = function() {
   null,
   null
 );
-const _ = n.exports;
+const c = n.exports;
 export {
-  _ as default
+  c as default
 };

package/dist/components/organisms/header/MiddleSlot.vue2.js

@@ -2,16 +2,15 @@ import { defineComponent as o } from "vue";
 import r from "../email-preview/amp/AmpToggle.vue.js";
 import t from "../email-preview/desktop-preview/EmailSizeIndicator.vue.js";
 import { useEditorStore as i } from "../../../stores/editor.js";
-import e from "./accessibility/AccessibilityToolbar.vue.js";
-import m from "./EditorToolbar.vue.js";
-import p from "./version-history/VersionHistory.vue.js";
-import s from "./version-history/ViewOptions.vue.js";
-const y = /* @__PURE__ */ o({
+import e from "./EditorToolbar.vue.js";
+import m from "./version-history/VersionHistory.vue.js";
+import p from "./version-history/ViewOptions.vue.js";
+const S = /* @__PURE__ */ o({
   __name: "MiddleSlot",
-  setup(f) {
-    return { __sfc: !0, editorStore: i(), AmpToggle: r, EmailSizeIndicator: t, AccessibilityToolbar: e, EditorToolbar: m, VersionHistory: p, VersionHistoryViewOptions: s };
+  setup(s) {
+    return { __sfc: !0, editorStore: i(), AmpToggle: r, EmailSizeIndicator: t, EditorToolbar: e, VersionHistory: m, VersionHistoryViewOptions: p };
   }
 });
 export {
-  y as default
+  S as default
 };

package/dist/components/organisms/header/RightSlot.vue.js

@@ -1,18 +1,17 @@
-import i from "./RightSlot.vue2.js";
-/* empty css               */
+import s from "./RightSlot.vue2.js";
 import o from "../../../_virtual/_plugin-vue2_normalizer.js";
 var r = function() {
-  var e = this, s = e._self._c, t = e._self._setupProxy;
-  return s("div", { staticClass: "d-f a-i-c right-slot" }, [t.isNormalMode ? s(t.AutoSaveStatus) : e._e(), t.isLiquidEnabled && t.isNormalMode ? s(t.InChips, { attrs: { id: "guido__liquid-tag-chip", styles: "stroke", type: "default", value: "liquid-tags", "close-button": !1, "disabled-status": t.editorStore.loadingStatus, interactive: !1, text: t.trans("email-editor.liquid-tags-enabled") } }) : e._e(), t.isNormalMode ? s(t.EditorActions) : t.editorStore.isVersionHistoryOpen ? s(t.RestoreButton) : e._e()], 1);
-}, a = [], l = /* @__PURE__ */ o(
-  i,
+  var i = this, e = i._self._c, t = i._self._setupProxy;
+  return e("div", { staticClass: "d-f a-i-c" }, [t.editorStore.isVersionHistoryOpen ? i._e() : e(t.AutoSaveToggle), t.isLiquidEnabled && !t.editorStore.isVersionHistoryOpen ? e(t.InChips, { staticClass: "mr-1", attrs: { id: "guido__liquid-tag-chip", styles: "stroke", type: "default", value: "liquid-tags", "close-button": !1, "disabled-status": t.editorStore.loadingStatus, interactive: !1, text: t.trans("email-editor.liquid-tags-enabled") } }) : i._e(), t.editorStore.isVersionHistoryOpen ? e(t.RestoreButton) : e(t.EditorActions, { ref: "editorActionsRef" })], 1);
+}, a = [], n = /* @__PURE__ */ o(
+  s,
   r,
   a,
   !1,
   null,
-  "efc32e0d"
+  null
 );
-const c = l.exports;
+const u = n.exports;
 export {
-  c as default
+  u as default
 };

package/dist/components/organisms/header/RightSlot.vue2.js

@@ -1,18 +1,23 @@
-import { defineComponent as m, computed as r } from "vue";
-import { useConfig as n } from "../../../composables/useConfig.js";
-import { useTranslations as a } from "../../../composables/useTranslations.js";
-import { useEditorStore as p } from "../../../stores/editor.js";
-import { InChips as u } from "@useinsider/design-system-vue";
-import f from "./AutoSaveStatus.vue.js";
-import d from "./EditorActions.vue.js";
-import c from "./version-history/RestoreButton.vue.js";
-const x = /* @__PURE__ */ m({
+import { defineComponent as a, ref as f, computed as p } from "vue";
+import { useConfig as u } from "../../../composables/useConfig.js";
+import { useTranslations as d } from "../../../composables/useTranslations.js";
+import { useEditorStore as l } from "../../../stores/editor.js";
+import { InChips as c } from "@useinsider/design-system-vue";
+import _ from "./AutoSaveToggle.vue.js";
+import S from "./EditorActions.vue.js";
+import g from "./version-history/RestoreButton.vue.js";
+const T = /* @__PURE__ */ a({
   __name: "RightSlot",
-  setup(l) {
-    const { isFeatureEnabled: o } = n(), i = a(), t = p(), e = r(() => o("liquidSyntax")), s = r(() => t.isNormalMode);
-    return { __sfc: !0, isFeatureEnabled: o, trans: i, editorStore: t, isLiquidEnabled: e, isNormalMode: s, InChips: u, AutoSaveStatus: f, EditorActions: d, RestoreButton: c };
+  setup(h, { expose: r }) {
+    const { isFeatureEnabled: o } = u(), i = d(), n = l(), t = f(null), s = p(() => o("liquidSyntax"));
+    return r({
+      handleSave: (m) => {
+        var e;
+        return (e = t.value) == null ? void 0 : e.handleSave(m);
+      }
+    }), { __sfc: !0, isFeatureEnabled: o, trans: i, editorStore: n, editorActionsRef: t, isLiquidEnabled: s, InChips: c, AutoSaveToggle: _, EditorActions: S, RestoreButton: g };
   }
 });
 export {
-  x as default
+  T as default
 };

package/dist/components/organisms/onboarding/OnboardingWrapper.vue.js

@@ -1,21 +1,21 @@
-import o from "./OnboardingWrapper.vue2.js";
-import s from "../../../_virtual/_plugin-vue2_normalizer.js";
-var _ = function() {
-  var n = this, r = n._self._c, t = n._self._setupProxy;
-  return r("div", n._l(t.visibleOnboardings, function(e) {
-    return r(e.component, { key: e.type, tag: "component", on: { "onboarding-finished": function(l) {
-      return t.handleFinished(e.type);
+import t from "./OnboardingWrapper.vue2.js";
+import i from "../../../_virtual/_plugin-vue2_normalizer.js";
+var s = function() {
+  var n = this, e = n._self._c, r = n._self._setupProxy;
+  return e("div", n._l(r.visibleOnboardings, function(o) {
+    return e(o.component, { key: o.type, tag: "component", on: { "onboarding-finished": function(p) {
+      return r.emit("onboarding-finished");
     } } });
   }), 1);
-}, i = [], a = /* @__PURE__ */ s(
-  o,
+}, _ = [], a = /* @__PURE__ */ i(
+  t,
+  s,
   _,
-  i,
   !1,
   null,
   null
 );
-const f = a.exports;
+const d = a.exports;
 export {
-  f as default
+  d as default
 };

package/dist/components/organisms/onboarding/OnboardingWrapper.vue2.js

@@ -1,68 +1,50 @@
-import { defineComponent as y, computed as r, onMounted as S, watch as e, ref as h } from "vue";
-import w from "./AMPOnboarding.vue.js";
-import T from "./EditorTabBarOnboarding.vue.js";
-import P from "./GenericOnboarding.vue.js";
-import B from "./ItemsOnboarding.vue.js";
-import A from "./NewVersionPopup.vue.js";
-import M from "./RecommendationLegacyStrategyOnboarding.vue.js";
-import _ from "./RecommendationStrategyOnboarding.vue.js";
-import H from "./TextBlockOnboarding.vue.js";
-import F from "./VersionHistoryOnboarding.vue.js";
-import { useConfig as V } from "../../../composables/useConfig.js";
-import { usePartner as C } from "../../../composables/usePartner.js";
-import { useEditorStore as x } from "../../../stores/editor.js";
-import { useOnboardingStore as E } from "../../../stores/onboarding.js";
-import { usePreviewStore as N } from "../../../stores/preview.js";
-const Z = /* @__PURE__ */ y({
+import { defineComponent as f, computed as e, onMounted as O, watch as t } from "vue";
+import y from "./AMPOnboarding.vue.js";
+import u from "./GenericOnboarding.vue.js";
+import v from "./ItemsOnboarding.vue.js";
+import S from "./NewVersionPopup.vue.js";
+import l from "./RecommendationLegacyStrategyOnboarding.vue.js";
+import h from "./RecommendationStrategyOnboarding.vue.js";
+import w from "./TextBlockOnboarding.vue.js";
+import P from "./VersionHistoryOnboarding.vue.js";
+import { usePartner as _ } from "../../../composables/usePartner.js";
+import { useEditorStore as A } from "../../../stores/editor.js";
+import { useOnboardingStore as H } from "../../../stores/onboarding.js";
+import { usePreviewStore as M } from "../../../stores/preview.js";
+const U = /* @__PURE__ */ f({
   __name: "OnboardingWrapper",
   emits: ["onboarding-finished"],
-  setup(R, { emit: p }) {
-    const o = E(), i = x(), c = N(), { isTestPartner: b } = C(), { isFeatureEnabled: g } = V(), a = r(() => i.isStripoInitialized), s = r(() => b()), O = [
-      { type: "newVersionPopup", component: A },
-      { type: "genericOnboarding", component: P },
-      { type: "textBlockOnboarding", component: H },
-      { type: "versionHistoryOnboarding", component: F },
-      { type: "ampOnboarding", component: w },
-      { type: "itemsOnboarding", component: B },
-      { type: "editorTabBarOnboarding", component: T },
-      { type: "recommendationStrategyOnboarding", component: _ },
-      { type: "recommendationLegacyStrategyOnboarding", component: M }
-    ], f = (n) => s.value || !a.value ? !1 : n === "newVersionPopup" ? o.shouldShowOnboarding(n) : o.isActive(n), l = r(() => O.filter((n) => f(n.type)));
-    S(async () => {
+  setup(x, { emit: g }) {
+    const o = H(), r = A(), a = M(), { isTestPartner: s } = _(), m = e(() => r.isStripoInitialized), p = e(() => s()), d = [
+      { type: "newVersionPopup", component: S },
+      { type: "genericOnboarding", component: u },
+      { type: "textBlockOnboarding", component: w },
+      { type: "versionHistoryOnboarding", component: P },
+      { type: "ampOnboarding", component: y },
+      { type: "itemsOnboarding", component: v },
+      { type: "recommendationStrategyOnboarding", component: h },
+      { type: "recommendationLegacyStrategyOnboarding", component: l }
+    ], c = (n) => p.value || !m.value ? !1 : n === "newVersionPopup" ? o.shouldShowOnboarding(n) : o.isActive(n), b = e(() => d.filter((n) => c(n.type)));
+    return O(async () => {
       await o.fetchUserModalState();
-    }), e(
-      () => i.isVersionHistoryOpen,
-      (n, t) => {
-        n && !t && (o.isActive("editorTabBarOnboarding") && o.closeForSession("editorTabBarOnboarding"), o.shouldShowOnboarding("versionHistoryOnboarding") && o.start("versionHistoryOnboarding")), !n && t && o.isActive("versionHistoryOnboarding") && o.close("versionHistoryOnboarding");
+    }), t(
+      () => r.isVersionHistoryOpen,
+      (n, i) => {
+        n && !i && o.shouldShowOnboarding("versionHistoryOnboarding") && o.start("versionHistoryOnboarding"), !n && i && o.isActive("versionHistoryOnboarding") && o.close("versionHistoryOnboarding");
       }
-    ), e(
-      () => c.emailFormat,
-      (n, t) => {
-        t !== "AMP" && n === "AMP" && o.shouldShowOnboarding("ampOnboarding") && o.start("ampOnboarding");
+    ), t(
+      () => a.emailFormat,
+      (n, i) => {
+        i !== "AMP" && n === "AMP" && o.shouldShowOnboarding("ampOnboarding") && o.start("ampOnboarding");
       }
-    ), e(
-      () => i.isPreviewModeOpen,
+    ), t(
+      () => r.isPreviewModeOpen,
       (n) => {
         !n && o.isActive("ampOnboarding") && o.close("ampOnboarding");
       }
-    );
-    const d = h(!1), v = (n) => {
-      n === "newVersionPopup" && (d.value = !0), p("onboarding-finished");
-    }, m = r(() => i.isNormalMode && !i.isPreviewModeOpen), u = r(() => a.value && o.isFetched && g("accessibilityTesting") && !s.value && m.value && !(o.shouldShowOnboarding("newVersionPopup") && !d.value) && !o.isOnboardingActive() && !o.closedThisSession.includes("editorTabBarOnboarding") && o.shouldShowOnboarding("editorTabBarOnboarding"));
-    return e(
-      u,
-      (n) => {
-        n && o.start("editorTabBarOnboarding");
-      },
-      { immediate: !0 }
-    ), e(
-      m,
-      (n) => {
-        !n && o.isActive("editorTabBarOnboarding") && o.closeForSession("editorTabBarOnboarding");
-      }
-    ), { __sfc: !0, emit: p, onboardingStore: o, editorStore: i, previewStore: c, isTestPartner: b, isFeatureEnabled: g, isStripoReady: a, isTestPartnerActive: s, onboardingConfigs: O, shouldShow: f, visibleOnboardings: l, isNewVersionPopupClosed: d, handleFinished: v, isTourAnchored: m, canStartTabBarTour: u };
+    ), { __sfc: !0, emit: g, onboardingStore: o, editorStore: r, previewStore: a, isTestPartner: s, isStripoReady: m, isTestPartnerActive: p, onboardingConfigs: d, shouldShow: c, visibleOnboardings: b };
   }
 });
 export {
-  Z as default
+  U as default
 };

package/dist/composables/useCustomInterfaceAppearance.js

@@ -1,44 +1,44 @@
 import p from "../static/assets/icons/filled-arrow-rising.svg.js";
 import s from "../static/assets/icons/line-change.svg.js";
-import f from "../static/assets/icons/line-delete.svg.js";
-import a from "../static/assets/icons/line-info.svg.js";
+import a from "../static/assets/icons/line-delete.svg.js";
+import f from "../static/assets/icons/line-info.svg.js";
 import c from "../static/assets/icons/line-plus.svg.js";
 import l from "../static/styles/base.css.js";
-import C from "../static/styles/components/accessibility.css.js";
-import d from "../static/styles/components/alert-message.css.js";
-import u from "../static/styles/components/amp-block.css.js";
-import h from "../static/styles/components/base-input.css.js";
-import I from "../static/styles/components/button-group.css.js";
-import g from "../static/styles/components/button.css.js";
-import w from "../static/styles/components/combobox.css.js";
-import y from "../static/styles/components/counter.css.js";
-import A from "../static/styles/components/dropdown-menu.css.js";
-import $ from "../static/styles/components/loader.css.js";
-import b from "../static/styles/components/narrow-panel.css.js";
-import B from "../static/styles/components/popup.css.js";
-import D from "../static/styles/components/recommendation-strategy.css.js";
-import R from "../static/styles/components/skeleton.css.js";
-import P from "../static/styles/components/switcher.css.js";
-import T from "../static/styles/components/tabs.css.js";
-import x from "../static/styles/components/tools.css.js";
-import M from "../static/styles/components/version-history.css.js";
-import O from "../static/styles/components/wide-panel.css.js";
-import V from "../static/styles/variables.css.js";
+import C from "../static/styles/components/alert-message.css.js";
+import d from "../static/styles/components/amp-block.css.js";
+import u from "../static/styles/components/base-input.css.js";
+import h from "../static/styles/components/button-group.css.js";
+import I from "../static/styles/components/button.css.js";
+import g from "../static/styles/components/combobox.css.js";
+import w from "../static/styles/components/counter.css.js";
+import y from "../static/styles/components/dropdown-menu.css.js";
+import A from "../static/styles/components/loader.css.js";
+import $ from "../static/styles/components/narrow-panel.css.js";
+import b from "../static/styles/components/popup.css.js";
+import B from "../static/styles/components/recommendation-strategy.css.js";
+import D from "../static/styles/components/skeleton.css.js";
+import R from "../static/styles/components/switcher.css.js";
+import P from "../static/styles/components/tabs.css.js";
+import T from "../static/styles/components/tools.css.js";
+import x from "../static/styles/components/version-history.css.js";
+import M from "../static/styles/components/wide-panel.css.js";
+import O from "../static/styles/variables.css.js";
 function o(i, r) {
   return `--guido-icon-${i}: url("data:image/svg+xml,${encodeURIComponent(r.trim())}");`;
 }
-const W = `:host {
+const V = `:host {
     ${o("line-change", s)}
-    ${o("line-delete", f)}
+    ${o("line-delete", a)}
     ${o("filled-arrow-rising", p)}
-    ${o("line-info", a)}
+    ${o("line-info", f)}
     ${o("line-plus", c)}
-}`, _ = [
-  V,
+}`, W = [
+  O,
   // Must be on top
-  W,
+  V,
   l,
   // Must be on top
+  C,
   d,
   u,
   h,
@@ -49,34 +49,33 @@ const W = `:host {
   A,
   $,
   b,
-  B,
+  D,
   R,
   P,
   T,
   x,
   M,
-  O,
-  D,
-  C
+  B
+  // Last: overrides button.css / wide-panel.css defaults
 ].join(`
 
-`), k = 3e4;
+`), _ = 3e4;
 let e = null;
-function q() {
-  return e || (e = new CSSStyleSheet(), e.replaceSync(_)), e;
+function k() {
+  return e || (e = new CSSStyleSheet(), e.replaceSync(W)), e;
 }
-const fo = () => ({ importCss: () => {
-  const r = q(), S = Date.now() + k, m = () => {
-    var n;
-    const t = (n = document.querySelector("ui-editor")) == null ? void 0 : n.shadowRoot;
+const po = () => ({ importCss: () => {
+  const r = k(), S = Date.now() + _, n = () => {
+    var m;
+    const t = (m = document.querySelector("ui-editor")) == null ? void 0 : m.shadowRoot;
     if (t) {
       t.adoptedStyleSheets.includes(r) || (t.adoptedStyleSheets = [...t.adoptedStyleSheets, r]);
       return;
     }
-    Date.now() < S && requestAnimationFrame(m);
+    Date.now() < S && requestAnimationFrame(n);
   };
-  m();
+  n();
 } });
 export {
-  fo as useCustomInterfaceAppearance
+  po as useCustomInterfaceAppearance
 };