@stachelock/ui 0.7.0 → 0.8.2

package/dist/ResultState.vue_vue_type_script_setup_true_lang-BsYMDWl6.js

@@ -0,0 +1,517 @@
+import { defineComponent as p, computed as n, createElementBlock as t, openBlock as e, normalizeClass as k, createElementVNode as o, createCommentVNode as u, toDisplayString as g, renderSlot as i, createBlock as w, resolveDynamicComponent as $, createTextVNode as x, h as r, createVNode as L, normalizeStyle as z } from "vue";
+import { _ as C } from "./LottieAnimation.vue_vue_type_script_setup_true_lang-C0R4ADBb.js";
+const M = {
+  key: 1,
+  class: "sl-flex sl-justify-center sl-mb-6"
+}, D = {
+  key: 2,
+  class: "sl-flex sl-justify-center sl-mb-6"
+}, S = { class: "sl-mt-4 sl-text-3xl sl-font-bold sl-tracking-tight sl-text-gray-800 dark:sl-text-white sm:sl-text-5xl" }, A = { class: "sl-mt-6 sl-text-base sl-leading-7 sl-text-gray-600 dark:sl-text-slate-300" }, H = { class: "sl-mt-10 sl-flex sl-items-center sl-justify-center sl-gap-x-6" }, E = {
+  key: 3,
+  class: "sl-mt-6"
+}, V = ["href"], I = {
+  key: 4,
+  class: "sl-mt-8 sl-mx-auto sl-max-w-sm"
+}, W = { class: "sl-bg-white dark:sl-bg-slate-800 sl-border sl-border-gray-200 dark:sl-border-slate-700 sl-rounded-lg sl-shadow-sm sl-p-6" }, ds = /* @__PURE__ */ p({
+  __name: "ErrorState",
+  props: {
+    statusCode: {},
+    title: {},
+    description: {},
+    showDefaultSupport: { type: Boolean, default: !0 },
+    supportEmail: { default: "support@shir.ly" },
+    primaryActionLabel: {},
+    secondaryActionLabel: {},
+    variant: { default: "error" },
+    showDefaultIcon: { type: Boolean, default: !1 },
+    fullHeight: { type: Boolean, default: !0 },
+    background: { default: "white" },
+    maxWidth: { default: "lg" }
+  },
+  emits: ["primary-action", "secondary-action"],
+  setup(s) {
+    const a = s, b = n(() => ({
+      white: "sl-bg-white dark:sl-bg-slate-900",
+      gray: "sl-bg-gray-50 dark:sl-bg-slate-900",
+      transparent: "sl-bg-transparent"
+    })[a.background]), m = n(() => a.fullHeight ? "sl-min-h-full" : ""), h = n(() => ({
+      sm: "sl-max-w-sm",
+      md: "sl-max-w-md",
+      lg: "sl-max-w-lg",
+      xl: "sl-max-w-xl"
+    })[a.maxWidth]), l = n(() => ({
+      error: "sl-text-red-600 dark:sl-text-red-400",
+      warning: "sl-text-amber-600 dark:sl-text-amber-400",
+      info: "sl-text-blue-600 dark:sl-text-blue-400",
+      neutral: "sl-text-stachelock-600 dark:sl-text-stachelock-400"
+    })[a.variant]), d = n(() => ({
+      error: "sl-bg-red-100 dark:sl-bg-red-900/30",
+      warning: "sl-bg-amber-100 dark:sl-bg-amber-900/30",
+      info: "sl-bg-blue-100 dark:sl-bg-blue-900/30",
+      neutral: "sl-bg-gray-100 dark:sl-bg-slate-700"
+    })[a.variant]), f = n(() => ({
+      error: "sl-text-red-600 dark:sl-text-red-400",
+      warning: "sl-text-amber-600 dark:sl-text-amber-400",
+      info: "sl-text-blue-600 dark:sl-text-blue-400",
+      neutral: "sl-text-gray-600 dark:sl-text-slate-400"
+    })[a.variant]), y = n(() => ({
+      error: "sl-bg-red-600 hover:sl-bg-red-700",
+      warning: "sl-bg-amber-600 hover:sl-bg-amber-700",
+      info: "sl-bg-blue-600 hover:sl-bg-blue-700",
+      neutral: "sl-bg-stachelock-600 hover:sl-bg-stachelock-700"
+    })[a.variant]), B = n(() => ({
+      error: {
+        props: {},
+        render() {
+          return r("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            "stroke-width": "1.5",
+            stroke: "currentColor"
+          }, [
+            r("path", {
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+            })
+          ]);
+        }
+      },
+      warning: {
+        props: {},
+        render() {
+          return r("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            "stroke-width": "1.5",
+            stroke: "currentColor"
+          }, [
+            r("path", {
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              d: "M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+            })
+          ]);
+        }
+      },
+      info: {
+        props: {},
+        render() {
+          return r("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            "stroke-width": "1.5",
+            stroke: "currentColor"
+          }, [
+            r("path", {
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              d: "M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
+            })
+          ]);
+        }
+      },
+      neutral: {
+        props: {},
+        render() {
+          return r("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            "stroke-width": "1.5",
+            stroke: "currentColor"
+          }, [
+            r("path", {
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              d: "M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"
+            })
+          ]);
+        }
+      }
+    })[a.variant]);
+    return (c, v) => (e(), t("main", {
+      class: k(["sl-grid sl-place-items-center sl-px-6 sl-py-24 sm:sl-py-32 lg:sl-px-8", [b.value, m.value]])
+    }, [
+      o("div", {
+        class: k(["sl-text-center", h.value])
+      }, [
+        s.statusCode ? (e(), t("p", {
+          key: 0,
+          class: k(["sl-text-base sl-font-semibold", l.value])
+        }, g(s.statusCode), 3)) : u("", !0),
+        c.$slots.icon ? (e(), t("div", M, [
+          i(c.$slots, "icon")
+        ])) : s.showDefaultIcon ? (e(), t("div", D, [
+          o("div", {
+            class: k(["sl-flex sl-h-16 sl-w-16 sl-items-center sl-justify-center sl-rounded-full", d.value])
+          }, [
+            (e(), w($(B.value), {
+              class: k(["sl-h-8 sl-w-8", f.value])
+            }, null, 8, ["class"]))
+          ], 2)
+        ])) : u("", !0),
+        o("h1", S, g(s.title), 1),
+        o("p", A, [
+          i(c.$slots, "description", {}, () => [
+            x(g(s.description), 1)
+          ])
+        ]),
+        o("div", H, [
+          i(c.$slots, "primary-actions", {}, () => [
+            s.primaryActionLabel ? (e(), t("button", {
+              key: 0,
+              type: "button",
+              onClick: v[0] || (v[0] = (j) => c.$emit("primary-action")),
+              class: k(["sl-inline-flex sl-items-center sl-rounded-md sl-px-4 sl-py-2.5 sl-text-sm sl-font-semibold sl-text-white sl-shadow-sm sl-transition-colors", y.value])
+            }, g(s.primaryActionLabel), 3)) : u("", !0),
+            s.secondaryActionLabel ? (e(), t("button", {
+              key: 1,
+              type: "button",
+              onClick: v[1] || (v[1] = (j) => c.$emit("secondary-action")),
+              class: "sl-inline-flex sl-items-center sl-rounded-md sl-bg-gray-100 dark:sl-bg-slate-700 sl-px-4 sl-py-2.5 sl-text-sm sl-font-semibold sl-text-gray-700 dark:sl-text-slate-200 sl-shadow-sm hover:sl-bg-gray-200 dark:hover:sl-bg-slate-600 sl-transition-colors"
+            }, g(s.secondaryActionLabel), 1)) : u("", !0)
+          ])
+        ]),
+        c.$slots["secondary-actions"] || s.showDefaultSupport ? (e(), t("div", E, [
+          i(c.$slots, "secondary-actions", {}, () => [
+            s.showDefaultSupport && s.supportEmail ? (e(), t("a", {
+              key: 0,
+              href: `mailto:${s.supportEmail}`,
+              class: "sl-text-sm sl-font-semibold sl-text-gray-700 dark:sl-text-slate-300 hover:sl-text-gray-900 dark:hover:sl-text-white sl-transition-colors"
+            }, [...v[2] || (v[2] = [
+              x(" Contact support ", -1),
+              o("span", { "aria-hidden": "true" }, "→", -1)
+            ])], 8, V)) : u("", !0)
+          ])
+        ])) : u("", !0),
+        c.$slots.context ? (e(), t("div", I, [
+          o("div", W, [
+            i(c.$slots, "context")
+          ])
+        ])) : u("", !0)
+      ], 2)
+    ], 2));
+  }
+}), N = { class: "sl-py-12" }, P = { class: "sl-flex sl-flex-col sl-items-center sl-gap-6 sl-text-center" }, T = { class: "sl-w-full sl-max-w-xs" }, F = {
+  key: 0,
+  class: "sl-flex sl-items-center sl-justify-center"
+}, R = {
+  key: 1,
+  class: "sl-flex sl-items-center sl-justify-center sl-h-56 sl-w-full sl-rounded-lg sl-bg-stachelock-50 dark:sl-bg-slate-800 sl-text-sm sl-text-stachelock-500 dark:sl-text-stachelock-400"
+}, q = { class: "sl-space-y-2 sl-max-w-xl" }, G = { class: "sl-text-2xl sl-font-semibold sl-text-gray-900 dark:sl-text-white" }, J = { class: "sl-text-base sl-text-gray-600 dark:sl-text-slate-300" }, K = {
+  key: 1,
+  class: "sl-text-sm sl-text-gray-500 dark:sl-text-slate-400"
+}, O = {
+  key: 0,
+  class: "sl-mt-4"
+}, cs = /* @__PURE__ */ p({
+  __name: "MissingResourceState",
+  props: {
+    badge: {},
+    title: {},
+    description: {},
+    supportingText: {},
+    animationData: {},
+    animationHeight: { default: 220 },
+    animationWidth: { default: 220 },
+    animationLoop: { type: Boolean, default: !0 },
+    isAnimationLoading: { type: Boolean, default: !1 },
+    showFallbackIcon: { type: Boolean, default: !0 },
+    variant: { default: "warning" }
+  },
+  setup(s) {
+    const a = s, b = n(() => ({
+      warning: "sl-text-amber-600 dark:sl-text-amber-400",
+      error: "sl-text-red-600 dark:sl-text-red-400",
+      info: "sl-text-blue-600 dark:sl-text-blue-400",
+      neutral: "sl-text-stachelock-600 dark:sl-text-stachelock-400"
+    })[a.variant]), m = n(() => ({
+      warning: "sl-bg-amber-100 dark:sl-bg-amber-900/30",
+      error: "sl-bg-red-100 dark:sl-bg-red-900/30",
+      info: "sl-bg-blue-100 dark:sl-bg-blue-900/30",
+      neutral: "sl-bg-stachelock-100 dark:sl-bg-stachelock-900/30"
+    })[a.variant]), h = n(() => ({
+      warning: "sl-text-amber-600 dark:sl-text-amber-400",
+      error: "sl-text-red-600 dark:sl-text-red-400",
+      info: "sl-text-blue-600 dark:sl-text-blue-400",
+      neutral: "sl-text-stachelock-600 dark:sl-text-stachelock-400"
+    })[a.variant]);
+    return (l, d) => (e(), t("div", N, [
+      o("div", P, [
+        o("div", T, [
+          i(l.$slots, "animation", {}, () => [
+            s.animationData ? (e(), t("div", F, [
+              L(C, {
+                "animation-data": s.animationData,
+                height: s.animationHeight,
+                width: s.animationWidth,
+                loop: s.animationLoop,
+                autoplay: !0
+              }, null, 8, ["animation-data", "height", "width", "loop"])
+            ])) : s.isAnimationLoading ? (e(), t("div", R, " Preparing animation... ")) : s.showFallbackIcon ? (e(), t("div", {
+              key: 2,
+              class: k(["sl-flex sl-items-center sl-justify-center sl-mx-auto sl-h-24 sl-w-24 sl-rounded-full", m.value])
+            }, [
+              i(l.$slots, "icon", {}, () => [
+                (e(), t("svg", {
+                  class: k(["sl-h-12 sl-w-12", h.value]),
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  "stroke-width": "1.5",
+                  stroke: "currentColor"
+                }, [...d[0] || (d[0] = [
+                  o("path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    d: "M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+                  }, null, -1)
+                ])], 2))
+              ])
+            ], 2)) : u("", !0)
+          ])
+        ]),
+        o("div", q, [
+          s.badge ? (e(), t("p", {
+            key: 0,
+            class: k(["sl-text-xs sl-font-semibold sl-uppercase sl-tracking-[0.3em]", b.value])
+          }, g(s.badge), 3)) : u("", !0),
+          o("h2", G, g(s.title), 1),
+          o("p", J, [
+            i(l.$slots, "description", {}, () => [
+              x(g(s.description), 1)
+            ])
+          ]),
+          s.supportingText || l.$slots["supporting-text"] ? (e(), t("p", K, [
+            i(l.$slots, "supporting-text", {}, () => [
+              x(g(s.supportingText), 1)
+            ])
+          ])) : u("", !0)
+        ]),
+        l.$slots.actions ? (e(), t("div", O, [
+          i(l.$slots, "actions")
+        ])) : u("", !0)
+      ])
+    ]));
+  }
+}), Q = { class: "sl-py-16 sl-text-center sl-flex sl-flex-col sl-items-center sl-gap-4" }, U = { class: "sl-flex sl-justify-center" }, X = { class: "sl-text-2xl sl-font-semibold sl-text-gray-900 dark:sl-text-white" }, Y = {
+  key: 1,
+  class: "sl-max-w-2xl sl-text-sm sl-text-gray-600 dark:sl-text-slate-300"
+}, Z = {
+  key: 2,
+  class: "sl-w-full sl-max-w-xs sl-mt-4"
+}, _ = { class: "sl-h-1.5 sl-w-full sl-bg-gray-200 dark:sl-bg-slate-700 sl-rounded-full sl-overflow-hidden" }, ss = {
+  key: 0,
+  class: "sl-mt-2 sl-text-xs sl-text-gray-500 dark:sl-text-slate-400"
+}, us = /* @__PURE__ */ p({
+  __name: "ProcessingState",
+  props: {
+    badge: {},
+    title: {},
+    description: {},
+    variant: { default: "primary" },
+    showProgress: { type: Boolean, default: !1 },
+    progress: { default: 0 },
+    progressLabel: {}
+  },
+  setup(s) {
+    const a = s, b = n(() => ({
+      primary: "sl-border-stachelock-600 dark:sl-border-stachelock-400",
+      success: "sl-border-green-600 dark:sl-border-green-400",
+      warning: "sl-border-amber-600 dark:sl-border-amber-400",
+      neutral: "sl-border-gray-600 dark:sl-border-slate-400"
+    })[a.variant]), m = n(() => ({
+      primary: "sl-text-stachelock-600 dark:sl-text-stachelock-400",
+      success: "sl-text-green-600 dark:sl-text-green-400",
+      warning: "sl-text-amber-600 dark:sl-text-amber-400",
+      neutral: "sl-text-gray-600 dark:sl-text-slate-400"
+    })[a.variant]), h = n(() => ({
+      primary: "sl-bg-stachelock-600 dark:sl-bg-stachelock-500",
+      success: "sl-bg-green-600 dark:sl-bg-green-500",
+      warning: "sl-bg-amber-600 dark:sl-bg-amber-500",
+      neutral: "sl-bg-gray-600 dark:sl-bg-slate-500"
+    })[a.variant]);
+    return (l, d) => (e(), t("div", Q, [
+      o("div", U, [
+        i(l.$slots, "loading", {}, () => [
+          o("div", {
+            class: k(["sl-h-10 sl-w-10 sl-animate-spin sl-rounded-full sl-border-[3px] sl-border-t-transparent", b.value])
+          }, null, 2)
+        ])
+      ]),
+      s.badge ? (e(), t("p", {
+        key: 0,
+        class: k(["sl-text-xs sl-font-semibold sl-uppercase sl-tracking-[0.3em]", m.value])
+      }, g(s.badge), 3)) : u("", !0),
+      o("h2", X, g(s.title), 1),
+      s.description || l.$slots.description ? (e(), t("p", Y, [
+        i(l.$slots, "description", {}, () => [
+          x(g(s.description), 1)
+        ])
+      ])) : u("", !0),
+      i(l.$slots, "default"),
+      s.showProgress ? (e(), t("div", Z, [
+        o("div", _, [
+          o("div", {
+            class: k(["sl-h-full sl-transition-all sl-duration-300 sl-rounded-full", h.value]),
+            style: z({ width: `${s.progress}%` })
+          }, null, 6)
+        ]),
+        s.progressLabel ? (e(), t("p", ss, g(s.progressLabel), 1)) : u("", !0)
+      ])) : u("", !0)
+    ]));
+  }
+}), es = { class: "sl-text-center sl-py-6" }, ts = { class: "sl-mb-4 sl-flex sl-justify-center" }, ls = { class: "sl-text-xl sl-font-semibold sl-text-gray-800 dark:sl-text-slate-200 sl-mb-2" }, rs = { class: "sl-text-gray-600 dark:sl-text-slate-400 sl-mb-6" }, os = {
+  key: 0,
+  class: "sl-flex sl-justify-center sl-items-center"
+}, as = {
+  key: 1,
+  class: "sl-mt-4"
+}, gs = /* @__PURE__ */ p({
+  __name: "ResultState",
+  props: {
+    variant: { default: "success" },
+    title: {},
+    description: {},
+    animationData: {},
+    animationSize: { default: 140 },
+    animationLoop: { type: Boolean, default: !1 },
+    showAction: { type: Boolean, default: !1 },
+    actionLabel: { default: "Continue" }
+  },
+  emits: ["action"],
+  setup(s) {
+    const a = s, b = n(() => ({
+      success: "sl-bg-green-100 dark:sl-bg-green-900/30",
+      pending: "sl-bg-amber-100 dark:sl-bg-amber-900/30",
+      accepted: "sl-bg-green-100 dark:sl-bg-green-900/30",
+      expired: "sl-bg-gray-100 dark:sl-bg-slate-700",
+      revoked: "sl-bg-red-100 dark:sl-bg-red-900/30",
+      invalid: "sl-bg-red-100 dark:sl-bg-red-900/30",
+      info: "sl-bg-blue-100 dark:sl-bg-blue-900/30"
+    })[a.variant]), m = n(() => ({
+      success: "sl-text-green-600 dark:sl-text-green-400",
+      pending: "sl-text-amber-600 dark:sl-text-amber-400",
+      accepted: "sl-text-green-600 dark:sl-text-green-400",
+      expired: "sl-text-gray-500 dark:sl-text-slate-400",
+      revoked: "sl-text-red-600 dark:sl-text-red-400",
+      invalid: "sl-text-red-600 dark:sl-text-red-400",
+      info: "sl-text-blue-600 dark:sl-text-blue-400"
+    })[a.variant]), h = n(() => ({
+      success: "sl-bg-green-600 sl-text-white hover:sl-bg-green-700",
+      pending: "sl-bg-stachelock-600 sl-text-white hover:sl-bg-stachelock-700",
+      accepted: "sl-bg-stachelock-600 sl-text-white hover:sl-bg-stachelock-700",
+      expired: "sl-bg-gray-600 sl-text-white hover:sl-bg-gray-700",
+      revoked: "sl-bg-stachelock-600 sl-text-white hover:sl-bg-stachelock-700",
+      invalid: "sl-bg-stachelock-600 sl-text-white hover:sl-bg-stachelock-700",
+      info: "sl-bg-blue-600 sl-text-white hover:sl-bg-blue-700"
+    })[a.variant]), l = n(() => ({
+      success: {
+        props: {},
+        render() {
+          return r("svg", { fill: "none", viewBox: "0 0 24 24", "stroke-width": "2", stroke: "currentColor" }, [
+            r("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M4.5 12.75l6 6 9-13.5" })
+          ]);
+        }
+      },
+      pending: {
+        props: {},
+        render() {
+          return r("svg", { fill: "none", viewBox: "0 0 24 24", "stroke-width": "2", stroke: "currentColor" }, [
+            r("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" })
+          ]);
+        }
+      },
+      accepted: {
+        props: {},
+        render() {
+          return r("svg", { fill: "none", viewBox: "0 0 24 24", "stroke-width": "2", stroke: "currentColor" }, [
+            r("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" })
+          ]);
+        }
+      },
+      expired: {
+        props: {},
+        render() {
+          return r("svg", { fill: "none", viewBox: "0 0 24 24", "stroke-width": "2", stroke: "currentColor" }, [
+            r("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" })
+          ]);
+        }
+      },
+      revoked: {
+        props: {},
+        render() {
+          return r("svg", { fill: "none", viewBox: "0 0 24 24", "stroke-width": "2", stroke: "currentColor" }, [
+            r("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" })
+          ]);
+        }
+      },
+      invalid: {
+        props: {},
+        render() {
+          return r("svg", { fill: "none", viewBox: "0 0 24 24", "stroke-width": "2", stroke: "currentColor" }, [
+            r("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" })
+          ]);
+        }
+      },
+      info: {
+        props: {},
+        render() {
+          return r("svg", { fill: "none", viewBox: "0 0 24 24", "stroke-width": "2", stroke: "currentColor" }, [
+            r("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" })
+          ]);
+        }
+      }
+    })[a.variant]);
+    return (d, f) => (e(), t("div", es, [
+      o("div", ts, [
+        i(d.$slots, "animation", {}, () => [
+          s.animationData ? (e(), w(C, {
+            key: 0,
+            "animation-data": s.animationData,
+            height: s.animationSize,
+            width: s.animationSize,
+            loop: s.animationLoop,
+            autoplay: !0
+          }, null, 8, ["animation-data", "height", "width", "loop"])) : (e(), t("div", {
+            key: 1,
+            class: k(["sl-flex sl-items-center sl-justify-center sl-h-20 sl-w-20 sl-rounded-full", b.value])
+          }, [
+            (e(), w($(l.value), {
+              class: k(["sl-h-10 sl-w-10", m.value])
+            }, null, 8, ["class"]))
+          ], 2))
+        ])
+      ]),
+      o("h2", ls, g(s.title), 1),
+      o("p", rs, [
+        i(d.$slots, "description", {}, () => [
+          x(g(s.description), 1)
+        ])
+      ]),
+      i(d.$slots, "default"),
+      s.showAction ? (e(), t("div", os, [
+        o("button", {
+          type: "button",
+          onClick: f[0] || (f[0] = (y) => d.$emit("action")),
+          class: k(["sl-inline-flex sl-items-center sl-gap-x-2 sl-rounded-lg sl-px-4 sl-py-2.5 sl-text-sm sl-font-semibold sl-shadow-sm sl-transition-colors", h.value])
+        }, [
+          i(d.$slots, "action-icon"),
+          x(" " + g(s.actionLabel), 1)
+        ], 2)
+      ])) : u("", !0),
+      d.$slots.actions ? (e(), t("div", as, [
+        i(d.$slots, "actions")
+      ])) : u("", !0)
+    ]));
+  }
+});
+export {
+  ds as _,
+  cs as a,
+  us as b,
+  gs as c
+};