@leaflink/stash 42.8.0 → 43.0.0

package/dist/HttpError.js

@@ -1,4 +1,4 @@
-import { openBlock as a, createElementBlock as p, createStaticVNode as x, defineComponent as L, useCssModule as C, useSlots as B, computed as l, resolveComponent as S, normalizeClass as i, unref as e, createElementVNode as r, createVNode as n, withCtx as m, toDisplayString as d, createTextVNode as c, createCommentVNode as f, renderSlot as b } from "vue";
+import { openBlock as p, createElementBlock as h, createStaticVNode as x, defineComponent as y, useCssModule as C, useSlots as L, computed as l, resolveComponent as B, normalizeClass as i, unref as o, createElementVNode as r, createVNode as n, withCtx as f, toDisplayString as a, createTextVNode as c, renderSlot as S, createCommentVNode as b } from "vue";
 import { t } from "./locale.js";
 import H from "./Button.js";
 import N, { IllustrationType as X, VignetteName as I } from "./Illustration.js";
@@ -14,19 +14,16 @@ const z = {
 }, T = /* @__PURE__ */ x('<g clip-path="url(#a)" fill="#fff"><path d="M35.265.248h3.883V23.82h-3.883V.248ZM57.586 17.127H45.493c.433 2.143 2.11 3.231 4.422 3.231 1.708 0 3.316-.66 4.254-1.912l2.58 1.945c-1.44 2.242-4.188 3.429-7.036 3.429-4.689 0-8.24-3.231-8.24-8.045 0-4.912 3.752-8.012 8.207-8.012 4.49 0 8.007 3.068 8.007 7.88-.005.496-.038.991-.1 1.483ZM53.8 14.456c-.234-2.11-1.876-3.33-4.053-3.33-2.11 0-3.785.99-4.254 3.33H53.8ZM76.628 8.093V23.82H72.74v-2.407c-1.071 1.648-3.282 2.407-5.196 2.407-4.12 0-7.709-3.132-7.709-8.045 0-4.944 3.552-8.012 7.672-8.012 1.977 0 4.158.758 5.226 2.374V8.09l3.894.002Zm-3.953 7.65c0-2.705-2.278-4.419-4.522-4.419-2.412 0-4.389 1.846-4.389 4.418s1.977 4.484 4.389 4.484c2.378 0 4.522-1.78 4.522-4.484ZM83.997 7.071v1.352h3.484v3.069h-3.484V23.82h-3.882V7.269c0-4.418 2.14-7.089 6.495-7.089h1.843l-1.072 3.56c-2.647 0-3.418 1.452-3.384 3.331ZM91.182.25h3.886v23.57h-3.886V.25ZM97.993 2.983c0-1.352 1.172-2.34 2.546-2.34 1.407 0 2.512.988 2.512 2.34 0 1.319-1.105 2.34-2.512 2.34-1.37 0-2.546-1.021-2.546-2.34Zm.606 5.44h3.886V23.82h-3.886V8.423ZM120.934 15.183v8.637h-3.885v-8.276c0-2.44-1.508-3.692-3.25-3.692-1.776 0-3.984.956-3.984 3.92v8.045h-3.891V8.423h3.886v2.44c.803-1.913 3.249-2.77 4.857-2.77 4.023 0 6.267 2.604 6.267 7.09ZM134.073 23.82l-6.098-6.99v6.99h-3.885V.248h3.885v13.087l4.489-4.912h5.059l-6.365 6.726 7.838 8.67h-4.923ZM7.219 19.014v-4.518L0 23.813h4.195l3.092-3.99a4.958 4.958 0 0 1-.068-.81ZM14.74 22.429a3.8 3.8 0 0 1-2.657-1.095 3.68 3.68 0 0 1-1.097-2.621c0-.03.01-11.764.01-13.665.003-1.747 1.502-3.333 3.442-3.333.87 0 1.706.323 2.343.906A4.876 4.876 0 0 0 14.408.589a4.971 4.971 0 0 0-3.139-.193 4.902 4.902 0 0 0-2.61 1.726 4.771 4.771 0 0 0-1.007 2.932v13.943c0 2.521 2.11 4.802 4.9 4.802a4.905 4.905 0 0 0 2.834-.887c.345-.238.658-.517.932-.831a3.755 3.755 0 0 1-1.578.348Z"></path><path d="M18.023 19.003v-4.517l-4.23 5.428c-.219.282-.53.481-.883.562-.351.082-.72.04-1.044-.117.265.46.641.848 1.094 1.132a3.338 3.338 0 0 0 3.073.248c.494-.207.929-.53 1.267-.941l.788-1.008a4.672 4.672 0 0 1-.065-.787ZM25.55 22.429a3.8 3.8 0 0 1-2.657-1.094 3.679 3.679 0 0 1-1.096-2.622l.01-13.665c0-1.745 1.5-3.33 3.441-3.33.868.001 1.703.325 2.338.907A4.875 4.875 0 0 0 25.216.594 4.971 4.971 0 0 0 22.077.4a4.902 4.902 0 0 0-2.61 1.724 4.77 4.77 0 0 0-1.01 2.93v13.943c0 2.521 2.111 4.802 4.9 4.802a4.904 4.904 0 0 0 2.835-.887c.345-.238.658-.517.932-.831a3.758 3.758 0 0 1-1.574.348Z"></path><path d="m26.12 17.93-1.523 1.983c-.219.282-.53.48-.881.562-.352.081-.72.04-1.044-.116.266.46.642.848 1.095 1.132a3.339 3.339 0 0 0 3.073.248c.494-.207.929-.53 1.268-.941l.67-.864-2.657-2.004ZM25.243 2.169c-.547 0-1.084.147-1.553.425a2.99 2.99 0 0 0-1.11 1.151 1.58 1.58 0 0 1 1.973.31 1.52 1.52 0 0 1 .044 1.965L22.23 9.077v5.4l5.02-6.46a4.711 4.711 0 0 0 1.01-2.92 2.943 2.943 0 0 0-.897-2.074 3.038 3.038 0 0 0-2.119-.854ZM14.438 2.169a3.055 3.055 0 0 0-1.551.426 2.99 2.99 0 0 0-1.108 1.15 1.58 1.58 0 0 1 1.97.312 1.52 1.52 0 0 1 .044 1.963l-2.368 3.057v5.4l5.019-6.46a4.713 4.713 0 0 0 1.008-2.92 2.943 2.943 0 0 0-.897-2.073 3.038 3.038 0 0 0-2.117-.855Z"></path></g><defs><clipPath id="a"><path fill="#fff" transform="translate(0 .18)" d="M0 0h139v23.64H0z"></path></clipPath></defs>', 2), A = [
   T
 ];
-function D(h, o) {
-  return a(), p("svg", z, A);
+function D(d, e) {
+  return p(), h("svg", z, A);
 }
-const P = { render: D }, j = { class: "heading-jumbo !tw-text-white tw-m-0 tw-mb-3" }, F = { class: "tw-text-white tw-mb-8" }, R = {
-  key: 0,
-  class: "tw-text-white tw-mb-4"
-}, Y = ["href"], q = /* @__PURE__ */ r("a", {
+const P = { render: D }, j = { class: "heading-jumbo !tw-text-white tw-m-0 tw-mb-3" }, F = { class: "tw-text-white tw-mb-8" }, R = { class: "tw-text-white tw-mb-4" }, Y = ["href"], q = /* @__PURE__ */ r("a", {
   href: "mailto:support@leaflink.com",
   class: "link"
 }, "support@leaflink.com", -1), G = {
   key: 0,
   class: "tw-flex tw-items-start tw-gap-6"
-}, J = /* @__PURE__ */ L({
+}, J = /* @__PURE__ */ y({
   __name: "HttpError",
   props: {
     description: { default: "" },
@@ -36,8 +33,8 @@ const P = { render: D }, j = { class: "heading-jumbo !tw-text-white tw-m-0 tw-mb
     retryLink: { default: void 0 },
     title: { default: "" }
   },
-  setup(h) {
-    const o = h, u = {
+  setup(d) {
+    const e = d, _ = {
       401: {
         title: t("ll.httpError.401.title"),
         description: t("ll.httpError.401.description")
@@ -70,22 +67,22 @@ const P = { render: D }, j = { class: "heading-jumbo !tw-text-white tw-m-0 tw-mb
         title: t("ll.httpError.504.title"),
         description: t("ll.httpError.504.description")
       }
-    }, s = C(), v = B(), w = l(() => o.errorCode.toString()), g = l(() => parseInt(w.value, 10)), _ = l(() => u[g.value] || u[500]), E = l(() => o.title || _.value.title), M = l(() => o.description || _.value.description), V = l(() => !o.hideLogoutButton && o.onLogout), Z = l(() => o.retryLink || "/");
-    return (y, rt) => {
-      const k = S("router-link");
-      return a(), p("div", {
-        class: i(["stash-http-error tw-min-h-screen tw-px-6 tw-py-12", e(s).root]),
+    }, s = C(), m = L(), v = l(() => e.errorCode.toString()), w = l(() => parseInt(v.value, 10)), u = l(() => _[w.value] || _[500]), g = l(() => e.title || u.value.title), E = l(() => e.description || u.value.description), k = l(() => !e.hideLogoutButton && e.onLogout), M = l(() => e.retryLink || window.location.href);
+    return (V, rt) => {
+      const Z = B("router-link");
+      return p(), h("div", {
+        class: i(["stash-http-error tw-min-h-screen tw-px-6 tw-py-12", o(s).root]),
         "data-test": "stash-http-error"
       }, [
         r("div", {
-          class: i(e(s).wrapper)
+          class: i(o(s).wrapper)
         }, [
-          n(k, {
+          n(Z, {
             to: "/",
-            class: i(["tw-mb-8", e(s).logo])
+            class: i(["tw-mb-8", o(s).logo])
           }, {
-            default: m(() => [
-              n(e(P), {
+            default: f(() => [
+              n(o(P), {
                 width: "192",
                 height: "33"
               })
@@ -93,52 +90,52 @@ const P = { render: D }, j = { class: "heading-jumbo !tw-text-white tw-m-0 tw-mb
             _: 1
           }, 8, ["class"]),
           r("div", {
-            class: i(["tw-mb-8 tw-gap-6", e(s).content])
+            class: i(["tw-mb-8 tw-gap-6", o(s).content])
           }, [
             r("div", {
-              class: i(["tw-order-2 lg:tw-order-1", e(s).content__text])
+              class: i(["tw-order-2 lg:tw-order-1", o(s).content__text])
             }, [
-              r("h1", j, d(E.value), 1),
-              r("h2", F, "Error Code: " + d(o.errorCode), 1),
-              o.hideLogoutButton ? f("", !0) : (a(), p("p", R, [
-                c(d(M.value) + " You can ", 1),
+              r("h1", j, a(g.value), 1),
+              r("h2", F, "Error Code: " + a(e.errorCode), 1),
+              r("p", R, [
+                c(a(E.value) + " You can ", 1),
                 r("a", {
-                  href: Z.value,
+                  href: M.value,
                   class: "link"
                 }, "try again", 8, Y),
                 c(" or reach out to "),
                 q,
                 c(" for assistance. ")
-              ]))
+              ])
             ], 2),
             r("div", {
-              class: i(["tw-order-1 lg:tw-order-2", e(s).illustration])
+              class: i(["tw-order-1 lg:tw-order-2", o(s).illustration])
             }, [
               n(N, {
                 size: 300,
-                type: e(X).Vignette,
-                name: e(I).SearchStorefront
+                type: o(X).Vignette,
+                name: o(I).SearchStorefront
               }, null, 8, ["type", "name"])
             ], 2)
           ], 2),
-          e(v).actions || V.value ? (a(), p("div", G, [
-            b(y.$slots, "actions", {}, () => [
+          o(m).actions || k.value ? (p(), h("div", G, [
+            S(V.$slots, "actions", {}, () => [
               n(H, {
                 tertiary: "",
-                onClick: o.onLogout
+                onClick: e.onLogout
               }, {
-                default: m(() => [
+                default: f(() => [
                   c("Logout")
                 ]),
                 _: 1
               }, 8, ["onClick"])
             ])
-          ])) : f("", !0)
+          ])) : b("", !0)
         ], 2)
       ], 2);
     };
   }
-}), K = "_root_1v6mc_2", O = "_wrapper_1v6mc_11", Q = "_content_1v6mc_16", U = "_illustration_1v6mc_22", W = "_content__text_1v6mc_40", tt = "_logo_1v6mc_54", ot = {
+}), K = "_root_fkh89_2", O = "_wrapper_fkh89_11", Q = "_content_fkh89_16", U = "_illustration_fkh89_22", W = "_content__text_fkh89_40", tt = "_logo_fkh89_54", ot = {
   root: K,
   wrapper: O,
   content: Q,
@@ -147,8 +144,8 @@ const P = { render: D }, j = { class: "heading-jumbo !tw-text-white tw-m-0 tw-mb
   logo: tt
 }, et = {
   $style: ot
-}, ut = /* @__PURE__ */ $(J, [["__cssModules", et]]);
+}, _t = /* @__PURE__ */ $(J, [["__cssModules", et]]);
 export {
-  ut as default
+  _t as default
 };
 //# sourceMappingURL=HttpError.js.map

package/dist/HttpError.js.map

@@ -1 +1 @@
-{"version":3,"file":"HttpError.js","sources":["../assets/logos/leaflink-white-logo-full.svg?component","../src/components/HttpError/HttpError.vue"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createStaticVNode as _createStaticVNode } from \"vue\"\n\nconst _hoisted_1 = {\n  viewBox: \"0 0 139 24\",\n  fill: \"none\",\n  xmlns: \"http://www.w3.org/2000/svg\"\n}\nconst _hoisted_2 = /*#__PURE__*/_createStaticVNode(\"<g clip-path=\\\"url(#a)\\\" fill=\\\"#fff\\\"><path d=\\\"M35.265.248h3.883V23.82h-3.883V.248ZM57.586 17.127H45.493c.433 2.143 2.11 3.231 4.422 3.231 1.708 0 3.316-.66 4.254-1.912l2.58 1.945c-1.44 2.242-4.188 3.429-7.036 3.429-4.689 0-8.24-3.231-8.24-8.045 0-4.912 3.752-8.012 8.207-8.012 4.49 0 8.007 3.068 8.007 7.88-.005.496-.038.991-.1 1.483ZM53.8 14.456c-.234-2.11-1.876-3.33-4.053-3.33-2.11 0-3.785.99-4.254 3.33H53.8ZM76.628 8.093V23.82H72.74v-2.407c-1.071 1.648-3.282 2.407-5.196 2.407-4.12 0-7.709-3.132-7.709-8.045 0-4.944 3.552-8.012 7.672-8.012 1.977 0 4.158.758 5.226 2.374V8.09l3.894.002Zm-3.953 7.65c0-2.705-2.278-4.419-4.522-4.419-2.412 0-4.389 1.846-4.389 4.418s1.977 4.484 4.389 4.484c2.378 0 4.522-1.78 4.522-4.484ZM83.997 7.071v1.352h3.484v3.069h-3.484V23.82h-3.882V7.269c0-4.418 2.14-7.089 6.495-7.089h1.843l-1.072 3.56c-2.647 0-3.418 1.452-3.384 3.331ZM91.182.25h3.886v23.57h-3.886V.25ZM97.993 2.983c0-1.352 1.172-2.34 2.546-2.34 1.407 0 2.512.988 2.512 2.34 0 1.319-1.105 2.34-2.512 2.34-1.37 0-2.546-1.021-2.546-2.34Zm.606 5.44h3.886V23.82h-3.886V8.423ZM120.934 15.183v8.637h-3.885v-8.276c0-2.44-1.508-3.692-3.25-3.692-1.776 0-3.984.956-3.984 3.92v8.045h-3.891V8.423h3.886v2.44c.803-1.913 3.249-2.77 4.857-2.77 4.023 0 6.267 2.604 6.267 7.09ZM134.073 23.82l-6.098-6.99v6.99h-3.885V.248h3.885v13.087l4.489-4.912h5.059l-6.365 6.726 7.838 8.67h-4.923ZM7.219 19.014v-4.518L0 23.813h4.195l3.092-3.99a4.958 4.958 0 0 1-.068-.81ZM14.74 22.429a3.8 3.8 0 0 1-2.657-1.095 3.68 3.68 0 0 1-1.097-2.621c0-.03.01-11.764.01-13.665.003-1.747 1.502-3.333 3.442-3.333.87 0 1.706.323 2.343.906A4.876 4.876 0 0 0 14.408.589a4.971 4.971 0 0 0-3.139-.193 4.902 4.902 0 0 0-2.61 1.726 4.771 4.771 0 0 0-1.007 2.932v13.943c0 2.521 2.11 4.802 4.9 4.802a4.905 4.905 0 0 0 2.834-.887c.345-.238.658-.517.932-.831a3.755 3.755 0 0 1-1.578.348Z\\\"></path><path d=\\\"M18.023 19.003v-4.517l-4.23 5.428c-.219.282-.53.481-.883.562-.351.082-.72.04-1.044-.117.265.46.641.848 1.094 1.132a3.338 3.338 0 0 0 3.073.248c.494-.207.929-.53 1.267-.941l.788-1.008a4.672 4.672 0 0 1-.065-.787ZM25.55 22.429a3.8 3.8 0 0 1-2.657-1.094 3.679 3.679 0 0 1-1.096-2.622l.01-13.665c0-1.745 1.5-3.33 3.441-3.33.868.001 1.703.325 2.338.907A4.875 4.875 0 0 0 25.216.594 4.971 4.971 0 0 0 22.077.4a4.902 4.902 0 0 0-2.61 1.724 4.77 4.77 0 0 0-1.01 2.93v13.943c0 2.521 2.111 4.802 4.9 4.802a4.904 4.904 0 0 0 2.835-.887c.345-.238.658-.517.932-.831a3.758 3.758 0 0 1-1.574.348Z\\\"></path><path d=\\\"m26.12 17.93-1.523 1.983c-.219.282-.53.48-.881.562-.352.081-.72.04-1.044-.116.266.46.642.848 1.095 1.132a3.339 3.339 0 0 0 3.073.248c.494-.207.929-.53 1.268-.941l.67-.864-2.657-2.004ZM25.243 2.169c-.547 0-1.084.147-1.553.425a2.99 2.99 0 0 0-1.11 1.151 1.58 1.58 0 0 1 1.973.31 1.52 1.52 0 0 1 .044 1.965L22.23 9.077v5.4l5.02-6.46a4.711 4.711 0 0 0 1.01-2.92 2.943 2.943 0 0 0-.897-2.074 3.038 3.038 0 0 0-2.119-.854ZM14.438 2.169a3.055 3.055 0 0 0-1.551.426 2.99 2.99 0 0 0-1.108 1.15 1.58 1.58 0 0 1 1.97.312 1.52 1.52 0 0 1 .044 1.963l-2.368 3.057v5.4l5.019-6.46a4.713 4.713 0 0 0 1.008-2.92 2.943 2.943 0 0 0-.897-2.073 3.038 3.038 0 0 0-2.117-.855Z\\\"></path></g><defs><clipPath id=\\\"a\\\"><path fill=\\\"#fff\\\" transform=\\\"translate(0 .18)\\\" d=\\\"M0 0h139v23.64H0z\\\"></path></clipPath></defs>\", 2)\nconst _hoisted_4 = [\n  _hoisted_2\n]\n\nexport function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", _hoisted_1, _hoisted_4))\n}\nexport default { render: render }","<script setup lang=\"ts\">\n  import { computed, useCssModule, useSlots } from 'vue';\n\n  import LeafLinkLogo from '../../../assets/logos/leaflink-white-logo-full.svg?component';\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import { IllustrationType, VignetteName } from '../Illustration/Illustration.models';\n  import Illustration from '../Illustration/Illustration.vue';\n\n  type ErrorCodes = 401 | 403 | 404 | 405 | 500 | 502 | 503 | 504;\n  const errors: Record<ErrorCodes, { title: string; description: string }> = {\n    401: {\n      title: t('ll.httpError.401.title'),\n      description: t('ll.httpError.401.description'),\n    },\n    403: {\n      title: t('ll.httpError.403.title'),\n      description: t('ll.httpError.403.description'),\n    },\n    404: {\n      title: t('ll.httpError.404.title'),\n      description: t('ll.httpError.404.description'),\n    },\n    405: {\n      title: t('ll.httpError.405.title'),\n      description: t('ll.httpError.405.description'),\n    },\n    500: {\n      title: t('ll.httpError.50X.title'),\n      description: t('ll.httpError.50X.description'),\n    },\n    502: {\n      title: t('ll.httpError.50X.title'),\n      description: t('ll.httpError.50X.description'),\n    },\n    503: {\n      title: t('ll.httpError.50X.title'),\n      description: t('ll.httpError.50X.description'),\n    },\n    504: {\n      title: t('ll.httpError.504.title'),\n      description: t('ll.httpError.504.description'),\n    },\n  };\n\n  export interface HttpErrorProps {\n    /**\n     * A description of what possibly happened.\n     */\n    description?: string;\n\n    /**\n     * The error code.\n     */\n    errorCode: keyof typeof errors | `${keyof typeof errors}`;\n\n    /**\n     * By default, the logout button is visible unless content is provided to the `actions` slot or\n     * this prop is `true`.\n     */\n    hideLogoutButton?: boolean;\n\n    /**\n     * A callback that will be called when the user clicks the logout button. If not provided,\n     * a `logout` event will be emitted.\n     */\n    onLogout?: () => void;\n\n    /**\n     * A link to redirect the user to see if a hard refresh fixes the issue.\n     */\n    retryLink?: string;\n\n    /**\n     * The error title.\n     */\n    title?: string;\n  }\n\n  const props = withDefaults(defineProps<HttpErrorProps>(), {\n    description: '',\n    errorCode: '404',\n    onLogout: undefined,\n    hideLogoutButton: false,\n    retryLink: undefined,\n    title: '',\n  });\n\n  const classes = useCssModule();\n  const slots = useSlots();\n\n  const errorCodeStr = computed(() => props.errorCode.toString());\n  const errorCodeInt = computed(() => parseInt(errorCodeStr.value, 10));\n  const defaultInfoByErrorCode = computed(() => errors[errorCodeInt.value] || errors['500']);\n  const errorTitle = computed(() => props.title || defaultInfoByErrorCode.value.title);\n  const errorDescription = computed(() => props.description || defaultInfoByErrorCode.value.description);\n\n  const showLogoutButton = computed(() => !props.hideLogoutButton && props.onLogout);\n  const computedRetryLink = computed(() => props.retryLink || '/');\n</script>\n\n<template>\n  <div class=\"stash-http-error tw-min-h-screen tw-px-6 tw-py-12\" :class=\"classes.root\" data-test=\"stash-http-error\">\n    <div :class=\"classes.wrapper\">\n      <router-link to=\"/\" class=\"tw-mb-8\" :class=\"classes.logo\">\n        <LeafLinkLogo width=\"192\" height=\"33\" />\n      </router-link>\n\n      <div class=\"tw-mb-8 tw-gap-6\" :class=\"classes.content\">\n        <div class=\"tw-order-2 lg:tw-order-1\" :class=\"classes.content__text\">\n          <h1 class=\"heading-jumbo !tw-text-white tw-m-0 tw-mb-3\">\n            {{ errorTitle }}\n          </h1>\n          <h2 class=\"tw-text-white tw-mb-8\">Error Code: {{ props.errorCode }}</h2>\n          <p v-if=\"!props.hideLogoutButton\" class=\"tw-text-white tw-mb-4\">\n            {{ errorDescription }} You can <a :href=\"computedRetryLink\" class=\"link\">try again</a> or reach out to\n            <a href=\"mailto:support@leaflink.com\" class=\"link\">support@leaflink.com</a> for assistance.\n          </p>\n        </div>\n        <div class=\"tw-order-1 lg:tw-order-2\" :class=\"classes.illustration\">\n          <Illustration :size=\"300\" :type=\"IllustrationType.Vignette\" :name=\"VignetteName.SearchStorefront\" />\n        </div>\n      </div>\n\n      <div v-if=\"slots.actions || showLogoutButton\" class=\"tw-flex tw-items-start tw-gap-6\">\n        <slot name=\"actions\">\n          <Button tertiary @click=\"props.onLogout\">Logout</Button>\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style module>\n  .root {\n    background-color: theme('colors.purple.DEFAULT');\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    align-items: center;\n    max-width: 100vw;\n  }\n\n  .wrapper {\n    max-width: 100%;\n    width: 56rem;\n  }\n\n  .content {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .illustration {\n    /* width and height similar to figma. */\n    width: 300px;\n    height: 193px;\n  }\n\n  @media screen and (width < 1024px) {\n    .content {\n      flex-wrap: wrap;\n      gap: 0;\n    }\n\n    .illustration {\n      margin-bottom: 30px;\n    }\n  }\n\n  @media screen and (width >= 1024px) {\n    .content__text {\n      max-width: 50vw;\n    }\n  }\n\n  .illustration svg {\n    /*\n     * We cannot use the same sizes from figma because the illustration would be smaller\n     * and it would break alignment. The specified height in figma is 193px but the\n     * illustration is 300px, so, (300 - 193) / 2 ~= 53, which keeps it aligned.\n     */\n    margin-top: -53px;\n  }\n\n  .logo {\n    /* width and height similar to figma. */\n    width: 192px;\n    height: 33px;\n    display: block;\n  }\n</style>\n"],"names":["_hoisted_1","_hoisted_2","_createStaticVNode","_hoisted_4","render","_ctx","_cache","_openBlock","_createElementBlock","LeafLinkLogo","errors","classes","useCssModule","slots","useSlots","errorCodeStr","computed","props","errorCodeInt","defaultInfoByErrorCode","errorTitle","errorDescription","showLogoutButton","computedRetryLink"],"mappings":";;;;;;;;;AAEA,MAAMA,IAAa;AAAA,EACjB,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AACT,GACMC,IAA0BC,gBAAAA,EAAmB,0pGAA4qG,CAAC,GAC1tGC,IAAa;AAAA,EACjBF;AACF;AAEO,SAASG,EAAOC,GAAMC,GAAQ;AACnC,SAAQC,EAAY,GAAEC,EAAoB,OAAOR,GAAYG,CAAU;AACzE;AACA,MAAeM,IAAA,EAAE,QAAQL,EAAM;;;;;;;;;;;;;;;;;;;;iBCLvBM,IAAqE;AAAA,MACzE,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,MACA,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,MACA,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,MACA,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,MACA,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,MACA,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,MACA,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,MACA,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,IAAA,GA8CIC,IAAUC,KACVC,IAAQC,KAERC,IAAeC,EAAS,MAAMC,EAAM,UAAU,UAAU,GACxDC,IAAeF,EAAS,MAAM,SAASD,EAAa,OAAO,EAAE,CAAC,GAC9DI,IAAyBH,EAAS,MAAMN,EAAOQ,EAAa,KAAK,KAAKR,EAAO,GAAK,CAAC,GACnFU,IAAaJ,EAAS,MAAMC,EAAM,SAASE,EAAuB,MAAM,KAAK,GAC7EE,IAAmBL,EAAS,MAAMC,EAAM,eAAeE,EAAuB,MAAM,WAAW,GAE/FG,IAAmBN,EAAS,MAAM,CAACC,EAAM,oBAAoBA,EAAM,QAAQ,GAC3EM,IAAoBP,EAAS,MAAMC,EAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"HttpError.js","sources":["../assets/logos/leaflink-white-logo-full.svg?component","../src/components/HttpError/HttpError.vue"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createStaticVNode as _createStaticVNode } from \"vue\"\n\nconst _hoisted_1 = {\n  viewBox: \"0 0 139 24\",\n  fill: \"none\",\n  xmlns: \"http://www.w3.org/2000/svg\"\n}\nconst _hoisted_2 = /*#__PURE__*/_createStaticVNode(\"<g clip-path=\\\"url(#a)\\\" fill=\\\"#fff\\\"><path d=\\\"M35.265.248h3.883V23.82h-3.883V.248ZM57.586 17.127H45.493c.433 2.143 2.11 3.231 4.422 3.231 1.708 0 3.316-.66 4.254-1.912l2.58 1.945c-1.44 2.242-4.188 3.429-7.036 3.429-4.689 0-8.24-3.231-8.24-8.045 0-4.912 3.752-8.012 8.207-8.012 4.49 0 8.007 3.068 8.007 7.88-.005.496-.038.991-.1 1.483ZM53.8 14.456c-.234-2.11-1.876-3.33-4.053-3.33-2.11 0-3.785.99-4.254 3.33H53.8ZM76.628 8.093V23.82H72.74v-2.407c-1.071 1.648-3.282 2.407-5.196 2.407-4.12 0-7.709-3.132-7.709-8.045 0-4.944 3.552-8.012 7.672-8.012 1.977 0 4.158.758 5.226 2.374V8.09l3.894.002Zm-3.953 7.65c0-2.705-2.278-4.419-4.522-4.419-2.412 0-4.389 1.846-4.389 4.418s1.977 4.484 4.389 4.484c2.378 0 4.522-1.78 4.522-4.484ZM83.997 7.071v1.352h3.484v3.069h-3.484V23.82h-3.882V7.269c0-4.418 2.14-7.089 6.495-7.089h1.843l-1.072 3.56c-2.647 0-3.418 1.452-3.384 3.331ZM91.182.25h3.886v23.57h-3.886V.25ZM97.993 2.983c0-1.352 1.172-2.34 2.546-2.34 1.407 0 2.512.988 2.512 2.34 0 1.319-1.105 2.34-2.512 2.34-1.37 0-2.546-1.021-2.546-2.34Zm.606 5.44h3.886V23.82h-3.886V8.423ZM120.934 15.183v8.637h-3.885v-8.276c0-2.44-1.508-3.692-3.25-3.692-1.776 0-3.984.956-3.984 3.92v8.045h-3.891V8.423h3.886v2.44c.803-1.913 3.249-2.77 4.857-2.77 4.023 0 6.267 2.604 6.267 7.09ZM134.073 23.82l-6.098-6.99v6.99h-3.885V.248h3.885v13.087l4.489-4.912h5.059l-6.365 6.726 7.838 8.67h-4.923ZM7.219 19.014v-4.518L0 23.813h4.195l3.092-3.99a4.958 4.958 0 0 1-.068-.81ZM14.74 22.429a3.8 3.8 0 0 1-2.657-1.095 3.68 3.68 0 0 1-1.097-2.621c0-.03.01-11.764.01-13.665.003-1.747 1.502-3.333 3.442-3.333.87 0 1.706.323 2.343.906A4.876 4.876 0 0 0 14.408.589a4.971 4.971 0 0 0-3.139-.193 4.902 4.902 0 0 0-2.61 1.726 4.771 4.771 0 0 0-1.007 2.932v13.943c0 2.521 2.11 4.802 4.9 4.802a4.905 4.905 0 0 0 2.834-.887c.345-.238.658-.517.932-.831a3.755 3.755 0 0 1-1.578.348Z\\\"></path><path d=\\\"M18.023 19.003v-4.517l-4.23 5.428c-.219.282-.53.481-.883.562-.351.082-.72.04-1.044-.117.265.46.641.848 1.094 1.132a3.338 3.338 0 0 0 3.073.248c.494-.207.929-.53 1.267-.941l.788-1.008a4.672 4.672 0 0 1-.065-.787ZM25.55 22.429a3.8 3.8 0 0 1-2.657-1.094 3.679 3.679 0 0 1-1.096-2.622l.01-13.665c0-1.745 1.5-3.33 3.441-3.33.868.001 1.703.325 2.338.907A4.875 4.875 0 0 0 25.216.594 4.971 4.971 0 0 0 22.077.4a4.902 4.902 0 0 0-2.61 1.724 4.77 4.77 0 0 0-1.01 2.93v13.943c0 2.521 2.111 4.802 4.9 4.802a4.904 4.904 0 0 0 2.835-.887c.345-.238.658-.517.932-.831a3.758 3.758 0 0 1-1.574.348Z\\\"></path><path d=\\\"m26.12 17.93-1.523 1.983c-.219.282-.53.48-.881.562-.352.081-.72.04-1.044-.116.266.46.642.848 1.095 1.132a3.339 3.339 0 0 0 3.073.248c.494-.207.929-.53 1.268-.941l.67-.864-2.657-2.004ZM25.243 2.169c-.547 0-1.084.147-1.553.425a2.99 2.99 0 0 0-1.11 1.151 1.58 1.58 0 0 1 1.973.31 1.52 1.52 0 0 1 .044 1.965L22.23 9.077v5.4l5.02-6.46a4.711 4.711 0 0 0 1.01-2.92 2.943 2.943 0 0 0-.897-2.074 3.038 3.038 0 0 0-2.119-.854ZM14.438 2.169a3.055 3.055 0 0 0-1.551.426 2.99 2.99 0 0 0-1.108 1.15 1.58 1.58 0 0 1 1.97.312 1.52 1.52 0 0 1 .044 1.963l-2.368 3.057v5.4l5.019-6.46a4.713 4.713 0 0 0 1.008-2.92 2.943 2.943 0 0 0-.897-2.073 3.038 3.038 0 0 0-2.117-.855Z\\\"></path></g><defs><clipPath id=\\\"a\\\"><path fill=\\\"#fff\\\" transform=\\\"translate(0 .18)\\\" d=\\\"M0 0h139v23.64H0z\\\"></path></clipPath></defs>\", 2)\nconst _hoisted_4 = [\n  _hoisted_2\n]\n\nexport function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", _hoisted_1, _hoisted_4))\n}\nexport default { render: render }","<script setup lang=\"ts\">\n  import { computed, useCssModule, useSlots } from 'vue';\n\n  import LeafLinkLogo from '../../../assets/logos/leaflink-white-logo-full.svg?component';\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import { IllustrationType, VignetteName } from '../Illustration/Illustration.models';\n  import Illustration from '../Illustration/Illustration.vue';\n\n  type ErrorCodes = 401 | 403 | 404 | 405 | 500 | 502 | 503 | 504;\n  const errors: Record<ErrorCodes, { title: string; description: string }> = {\n    401: {\n      title: t('ll.httpError.401.title'),\n      description: t('ll.httpError.401.description'),\n    },\n    403: {\n      title: t('ll.httpError.403.title'),\n      description: t('ll.httpError.403.description'),\n    },\n    404: {\n      title: t('ll.httpError.404.title'),\n      description: t('ll.httpError.404.description'),\n    },\n    405: {\n      title: t('ll.httpError.405.title'),\n      description: t('ll.httpError.405.description'),\n    },\n    500: {\n      title: t('ll.httpError.50X.title'),\n      description: t('ll.httpError.50X.description'),\n    },\n    502: {\n      title: t('ll.httpError.50X.title'),\n      description: t('ll.httpError.50X.description'),\n    },\n    503: {\n      title: t('ll.httpError.50X.title'),\n      description: t('ll.httpError.50X.description'),\n    },\n    504: {\n      title: t('ll.httpError.504.title'),\n      description: t('ll.httpError.504.description'),\n    },\n  };\n\n  export interface HttpErrorProps {\n    /**\n     * A description of what possibly happened.\n     */\n    description?: string;\n\n    /**\n     * The error code.\n     */\n    errorCode: keyof typeof errors | `${keyof typeof errors}`;\n\n    /**\n     * By default, the logout button is visible unless content is provided to the `actions` slot or\n     * this prop is `true`.\n     */\n    hideLogoutButton?: boolean;\n\n    /**\n     * A callback that will be called when the user clicks the logout button. If not provided,\n     * a `logout` event will be emitted.\n     */\n    onLogout?: () => void;\n\n    /**\n     * A link to redirect the user to see if a hard refresh fixes the issue.\n     */\n    retryLink?: string;\n\n    /**\n     * The error title.\n     */\n    title?: string;\n  }\n\n  const props = withDefaults(defineProps<HttpErrorProps>(), {\n    description: '',\n    errorCode: '404',\n    onLogout: undefined,\n    hideLogoutButton: false,\n    retryLink: undefined,\n    title: '',\n  });\n\n  const classes = useCssModule();\n  const slots = useSlots();\n\n  const errorCodeStr = computed(() => props.errorCode.toString());\n  const errorCodeInt = computed(() => parseInt(errorCodeStr.value, 10));\n  const defaultInfoByErrorCode = computed(() => errors[errorCodeInt.value] || errors['500']);\n  const errorTitle = computed(() => props.title || defaultInfoByErrorCode.value.title);\n  const errorDescription = computed(() => props.description || defaultInfoByErrorCode.value.description);\n\n  const showLogoutButton = computed(() => !props.hideLogoutButton && props.onLogout);\n  const computedRetryLink = computed(() => props.retryLink || window.location.href);\n</script>\n\n<template>\n  <div class=\"stash-http-error tw-min-h-screen tw-px-6 tw-py-12\" :class=\"classes.root\" data-test=\"stash-http-error\">\n    <div :class=\"classes.wrapper\">\n      <router-link to=\"/\" class=\"tw-mb-8\" :class=\"classes.logo\">\n        <LeafLinkLogo width=\"192\" height=\"33\" />\n      </router-link>\n\n      <div class=\"tw-mb-8 tw-gap-6\" :class=\"classes.content\">\n        <div class=\"tw-order-2 lg:tw-order-1\" :class=\"classes.content__text\">\n          <h1 class=\"heading-jumbo !tw-text-white tw-m-0 tw-mb-3\">\n            {{ errorTitle }}\n          </h1>\n          <h2 class=\"tw-text-white tw-mb-8\">Error Code: {{ props.errorCode }}</h2>\n          <p class=\"tw-text-white tw-mb-4\">\n            {{ errorDescription }} You can <a :href=\"computedRetryLink\" class=\"link\">try again</a> or reach out to\n            <a href=\"mailto:support@leaflink.com\" class=\"link\">support@leaflink.com</a> for assistance.\n          </p>\n        </div>\n        <div class=\"tw-order-1 lg:tw-order-2\" :class=\"classes.illustration\">\n          <Illustration :size=\"300\" :type=\"IllustrationType.Vignette\" :name=\"VignetteName.SearchStorefront\" />\n        </div>\n      </div>\n\n      <div v-if=\"slots.actions || showLogoutButton\" class=\"tw-flex tw-items-start tw-gap-6\">\n        <slot name=\"actions\">\n          <Button tertiary @click=\"props.onLogout\">Logout</Button>\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style module>\n  .root {\n    background-color: theme('colors.purple.500');\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    align-items: center;\n    max-width: 100vw;\n  }\n\n  .wrapper {\n    max-width: 100%;\n    width: 56rem;\n  }\n\n  .content {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .illustration {\n    /* width and height similar to figma. */\n    width: 300px;\n    height: 193px;\n  }\n\n  @media screen and (width < 1024px) {\n    .content {\n      flex-wrap: wrap;\n      gap: 0;\n    }\n\n    .illustration {\n      margin-bottom: 30px;\n    }\n  }\n\n  @media screen and (width >= 1024px) {\n    .content__text {\n      max-width: 50vw;\n    }\n  }\n\n  .illustration svg {\n    /*\n     * We cannot use the same sizes from figma because the illustration would be smaller\n     * and it would break alignment. The specified height in figma is 193px but the\n     * illustration is 300px, so, (300 - 193) / 2 ~= 53, which keeps it aligned.\n     */\n    margin-top: -53px;\n  }\n\n  .logo {\n    /* width and height similar to figma. */\n    width: 192px;\n    height: 33px;\n    display: block;\n  }\n</style>\n"],"names":["_hoisted_1","_hoisted_2","_createStaticVNode","_hoisted_4","render","_ctx","_cache","_openBlock","_createElementBlock","LeafLinkLogo","errors","classes","useCssModule","slots","useSlots","errorCodeStr","computed","props","errorCodeInt","defaultInfoByErrorCode","errorTitle","errorDescription","showLogoutButton","computedRetryLink"],"mappings":";;;;;;;;;AAEA,MAAMA,IAAa;AAAA,EACjB,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AACT,GACMC,IAA0BC,gBAAAA,EAAmB,0pGAA4qG,CAAC,GAC1tGC,IAAa;AAAA,EACjBF;AACF;AAEO,SAASG,EAAOC,GAAMC,GAAQ;AACnC,SAAQC,EAAY,GAAEC,EAAoB,OAAOR,GAAYG,CAAU;AACzE;AACA,MAAeM,IAAA,EAAE,QAAQL,EAAM;;;;;;;;;;;;;;;;;iBCLvBM,IAAqE;AAAA,MACzE,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,MACA,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,MACA,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,MACA,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,MACA,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,MACA,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,MACA,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,MACA,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,IAAA,GA8CIC,IAAUC,KACVC,IAAQC,KAERC,IAAeC,EAAS,MAAMC,EAAM,UAAU,UAAU,GACxDC,IAAeF,EAAS,MAAM,SAASD,EAAa,OAAO,EAAE,CAAC,GAC9DI,IAAyBH,EAAS,MAAMN,EAAOQ,EAAa,KAAK,KAAKR,EAAO,GAAK,CAAC,GACnFU,IAAaJ,EAAS,MAAMC,EAAM,SAASE,EAAuB,MAAM,KAAK,GAC7EE,IAAmBL,EAAS,MAAMC,EAAM,eAAeE,EAAuB,MAAM,WAAW,GAE/FG,IAAmBN,EAAS,MAAM,CAACC,EAAM,oBAAoBA,EAAM,QAAQ,GAC3EM,IAAoBP,EAAS,MAAMC,EAAM,aAAa,OAAO,SAAS,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/IconLabel.js

@@ -4,10 +4,9 @@ import { _ as h } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-const k = {
-  name: "ll-icon-label"
-}, y = /* @__PURE__ */ a({
-  ...k,
+const k = /* @__PURE__ */ a({
+  name: "ll-icon-label",
+  __name: "IconLabel",
   props: {
     icon: {},
     color: { default: void 0 },
@@ -16,13 +15,13 @@ const k = {
     stacked: { type: Boolean, default: !1 },
     truncate: { type: Boolean, default: !1 }
   },
-  setup(s) {
-    const e = s, n = o(() => e.to ? "router-link" : e.href ? "a" : "div"), l = o(() => e.to ? {
+  setup(n) {
+    const e = n, s = o(() => e.to ? "router-link" : e.href ? "a" : "div"), l = o(() => e.to ? {
       to: e.to
     } : e.href ? {
       href: e.href
     } : {});
-    return (t, C) => (c(), i(u(n.value), f(l.value, {
+    return (t, b) => (c(), i(u(s.value), f(l.value, {
       class: ["flex", { "flex-column items-center": e.stacked }]
     }), {
       default: d(() => [
@@ -44,12 +43,12 @@ const k = {
       _: 3
     }, 16, ["class"]));
   }
-}), w = "_icon_gr3q2_2", x = {
-  icon: w
-}, B = {
-  $style: x
-}, N = /* @__PURE__ */ h(y, [["__cssModules", B]]);
+}), y = "_icon_gr3q2_2", w = {
+  icon: y
+}, x = {
+  $style: w
+}, L = /* @__PURE__ */ h(k, [["__cssModules", x]]);
 export {
-  N as default
+  L as default
 };
 //# sourceMappingURL=IconLabel.js.map

package/dist/IconLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconLabel.js","sources":["../src/components/IconLabel/IconLabel.vue"],"sourcesContent":["<script lang=\"ts\">\n  export default {\n    name: 'll-icon-label',\n  };\n</script>\n\n<script setup lang=\"ts\">\n  import { computed } from 'vue';\n\n  import { StashColor } from '../../../types/colors';\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface IconLabelProps {\n    /**\n     * Name of the icon to use. All design system icons are supported.\n     */\n    icon: IconName;\n\n    /**\n     * Color to apply to the icon. All design system colors are supported.\n     */\n    color?: StashColor;\n\n    /**\n     * Valid hyperlink.\n     */\n    href?: string;\n\n    /**\n     * Valid vue-router route.\n     */\n    to?: string | object;\n\n    /**\n     * If true, renders the label below the icon instead of to the right\n     */\n    stacked?: boolean;\n\n    /**\n     * If true, truncates overflowing text with an ellipsis when it's unable to wrap\n     */\n    truncate?: boolean;\n  }\n\n  const props = withDefaults(defineProps<IconLabelProps>(), {\n    color: undefined,\n    href: undefined,\n    to: undefined,\n    stacked: false,\n    truncate: false,\n  });\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'div';\n  });\n\n  const attributes = computed(() => {\n    if (props.to) {\n      return {\n        to: props.to,\n      };\n    }\n\n    if (props.href) {\n      return {\n        href: props.href,\n      };\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <component :is=\"is\" v-bind=\"attributes\" class=\"flex\" :class=\"{ 'flex-column items-center': props.stacked }\">\n    <Icon :name=\"props.icon\" size=\"dense\" :class=\"[$style.icon, { [`text-${color}`]: !!color }]\" />\n\n    <div\n      :class=\"{\n        'flex-1 tw-ml-1.5': !props.stacked,\n        'text-xs tw-leading-3 tw-mt-1.5': props.stacked,\n        'tw-truncate': truncate,\n      }\"\n    >\n      <!-- @slot Label text -->\n      <slot></slot>\n    </div>\n  </component>\n</template>\n\n<style module>\n  .icon {\n    margin-top: -1px;\n  }\n</style>\n"],"names":["is","computed","props","attributes"],"mappings":";;;;;;AACE,UAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;iBAkDMA,IAAKC,EAAS,MACdC,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,KACR,GAEKC,IAAaF,EAAS,MACtBC,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAIVA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IAAA,IAIT,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"IconLabel.js","sources":["../src/components/IconLabel/IconLabel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed } from 'vue';\n\n  import { StashCommonColor } from '../../../types/colors';\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface IconLabelProps {\n    /**\n     * Name of the icon to use. All design system icons are supported.\n     */\n    icon: IconName;\n\n    /**\n     * Color to apply to the icon. Common Stash colors are supported (default, 100 & 700 shades).\n     */\n    color?: StashCommonColor;\n\n    /**\n     * Valid hyperlink.\n     */\n    href?: string;\n\n    /**\n     * Valid vue-router route.\n     */\n    to?: string | object;\n\n    /**\n     * If true, renders the label below the icon instead of to the right\n     */\n    stacked?: boolean;\n\n    /**\n     * If true, truncates overflowing text with an ellipsis when it's unable to wrap\n     */\n    truncate?: boolean;\n  }\n\n  const props = withDefaults(defineProps<IconLabelProps>(), {\n    color: undefined,\n    href: undefined,\n    to: undefined,\n    stacked: false,\n    truncate: false,\n  });\n\n  defineOptions({\n    name: 'll-icon-label',\n  });\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'div';\n  });\n\n  const attributes = computed(() => {\n    if (props.to) {\n      return {\n        to: props.to,\n      };\n    }\n\n    if (props.href) {\n      return {\n        href: props.href,\n      };\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <component :is=\"is\" v-bind=\"attributes\" class=\"flex\" :class=\"{ 'flex-column items-center': props.stacked }\">\n    <Icon :name=\"props.icon\" size=\"dense\" :class=\"[$style.icon, { [`text-${color}`]: !!color }]\" />\n\n    <div\n      :class=\"{\n        'flex-1 tw-ml-1.5': !props.stacked,\n        'text-xs tw-leading-3 tw-mt-1.5': props.stacked,\n        'tw-truncate': truncate,\n      }\"\n    >\n      <!-- @slot Label text -->\n      <slot></slot>\n    </div>\n  </component>\n</template>\n\n<style module>\n  .icon {\n    margin-top: -1px;\n  }\n</style>\n"],"names":["is","computed","props","attributes"],"mappings":";;;;;;;;;;;;;;;;;;iBAmDQA,IAAKC,EAAS,MACdC,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,KACR,GAEKC,IAAaF,EAAS,MACtBC,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAIVA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IAAA,IAIT,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/IconLabel.vue.d.ts

@@ -46,7 +46,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     stacked: boolean;
     truncate: boolean;
 }>>>, {
-    color: "blue" | "red" | "ice-700" | "green" | "royal" | "purple" | "ice" | "orange" | "seafoam" | "teal" | "yellow" | "purple-900" | "purple-800" | "purple-700" | "purple-600" | "purple-500" | "purple-400" | "purple-300" | "purple-200" | "purple-100" | "royal-900" | "royal-800" | "royal-700" | "royal-600" | "royal-500" | "royal-400" | "royal-300" | "royal-200" | "royal-100" | "blue-900" | "blue-800" | "blue-700" | "blue-600" | "blue-500" | "blue-400" | "blue-300" | "blue-200" | "blue-100" | "teal-900" | "teal-800" | "teal-700" | "teal-600" | "teal-500" | "teal-400" | "teal-300" | "teal-200" | "teal-100" | "green-900" | "green-800" | "green-700" | "green-600" | "green-500" | "green-400" | "green-300" | "green-200" | "green-100" | "seafoam-900" | "seafoam-800" | "seafoam-700" | "seafoam-600" | "seafoam-500" | "seafoam-400" | "seafoam-300" | "seafoam-200" | "seafoam-100" | "yellow-900" | "yellow-800" | "yellow-700" | "yellow-600" | "yellow-500" | "yellow-400" | "yellow-300" | "yellow-200" | "yellow-100" | "orange-900" | "orange-800" | "orange-700" | "orange-600" | "orange-500" | "orange-400" | "orange-300" | "orange-200" | "orange-100" | "red-900" | "red-800" | "red-700" | "red-600" | "red-500" | "red-400" | "red-300" | "red-200" | "red-100" | "ice-900" | "ice-800" | "ice-600" | "ice-500" | "ice-400" | "ice-300" | "ice-200" | "ice-100" | "white" | "black";
+    color: "ice-700" | "purple-700" | "purple-500" | "purple-100" | "royal-700" | "royal-500" | "royal-100" | "blue-700" | "blue-500" | "blue-100" | "teal-700" | "teal-500" | "teal-100" | "green-700" | "green-500" | "green-100" | "seafoam-700" | "seafoam-500" | "seafoam-100" | "yellow-700" | "yellow-500" | "yellow-100" | "orange-700" | "orange-500" | "orange-100" | "red-700" | "red-500" | "red-100" | "ice-500" | "ice-200" | "ice-100" | "white" | "black";
     href: string;
     to: string | object;
     stacked: boolean;
@@ -62,9 +62,9 @@ export declare interface IconLabelProps {
      */
     icon: IconName;
     /**
-     * Color to apply to the icon. All design system colors are supported.
+     * Color to apply to the icon. Common Stash colors are supported (default, 100 & 700 shades).
      */
-    color?: StashColor;
+    color?: StashCommonColor;
     /**
      * Valid hyperlink.
      */
@@ -87,108 +87,42 @@ declare type IconName = typeof iconNames[number];
 
 declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "caret-down", "caret-up", "cart-active", "cart-plus", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-status", "circle-warning", "clipboard-checkmark", "clipboard-inventory", "close", "combine", "compass", "contact", "contract", "copy", "credit-card", "credit-profile", "dashboard", "document-accept", "document-invoice", "document-recieved", "document-sent", "document-view", "document", "dolly", "download", "edit", "ellipsis", "envelope-open", "envelope", "export", "figma", "file-csv", "file", "filter-funnel", "filter-line", "flag", "folder", "folder-bar-graph", "folder-orders", "gear", "github", "globe", "graph-bar-chart", "graph-line-chart", "graph-pie-chart", "hazard", "hazard-outline", "headset-agent", "headset-mic", "heart-filled", "heart-outline", "hide", "history", "image", "keyboard-return", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-items", "loading-big", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "reply", "report-download", "sample", "save", "scale-law", "scale-weight", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
 
-declare type StashColor = `${StashColors}`;
+declare type StashCommonColor = `${StashCommonColors}`;
 
-declare enum StashColors {
-    Purple = "purple",
-    Purple900 = "purple-900",
-    Purple800 = "purple-800",
+/**
+ * A limited list of stash brand colors, only including their 100, 500, and 700 shades.
+ */
+declare enum StashCommonColors {
     Purple700 = "purple-700",
-    Purple600 = "purple-600",
     Purple500 = "purple-500",
-    Purple400 = "purple-400",
-    Purple300 = "purple-300",
-    Purple200 = "purple-200",
     Purple100 = "purple-100",
-    Royal = "royal",
-    Royal900 = "royal-900",
-    Royal800 = "royal-800",
     Royal700 = "royal-700",
-    Royal600 = "royal-600",
     Royal500 = "royal-500",
-    Royal400 = "royal-400",
-    Royal300 = "royal-300",
-    Royal200 = "royal-200",
     Royal100 = "royal-100",
-    Blue = "blue",
-    Blue900 = "blue-900",
-    Blue800 = "blue-800",
     Blue700 = "blue-700",
-    Blue600 = "blue-600",
     Blue500 = "blue-500",
-    Blue400 = "blue-400",
-    Blue300 = "blue-300",
-    Blue200 = "blue-200",
     Blue100 = "blue-100",
-    Teal = "teal",
-    Teal900 = "teal-900",
-    Teal800 = "teal-800",
     Teal700 = "teal-700",
-    Teal600 = "teal-600",
     Teal500 = "teal-500",
-    Teal400 = "teal-400",
-    Teal300 = "teal-300",
-    Teal200 = "teal-200",
     Teal100 = "teal-100",
-    Green = "green",
-    Green900 = "green-900",
-    Green800 = "green-800",
     Green700 = "green-700",
-    Green600 = "green-600",
     Green500 = "green-500",
-    Green400 = "green-400",
-    Green300 = "green-300",
-    Green200 = "green-200",
     Green100 = "green-100",
-    Seafoam = "seafoam",
-    Seafoam900 = "seafoam-900",
-    Seafoam800 = "seafoam-800",
     Seafoam700 = "seafoam-700",
-    Seafoam600 = "seafoam-600",
     Seafoam500 = "seafoam-500",
-    Seafoam400 = "seafoam-400",
-    Seafoam300 = "seafoam-300",
-    Seafoam200 = "seafoam-200",
     Seafoam100 = "seafoam-100",
-    Yellow = "yellow",
-    Yellow900 = "yellow-900",
-    Yellow800 = "yellow-800",
     Yellow700 = "yellow-700",
-    Yellow600 = "yellow-600",
     Yellow500 = "yellow-500",
-    Yellow400 = "yellow-400",
-    Yellow300 = "yellow-300",
-    Yellow200 = "yellow-200",
     Yellow100 = "yellow-100",
-    Orange = "orange",
-    Orange900 = "orange-900",
-    Orange800 = "orange-800",
     Orange700 = "orange-700",
-    Orange600 = "orange-600",
     Orange500 = "orange-500",
-    Orange400 = "orange-400",
-    Orange300 = "orange-300",
-    Orange200 = "orange-200",
     Orange100 = "orange-100",
-    Red = "red",
-    Red900 = "red-900",
-    Red800 = "red-800",
     Red700 = "red-700",
-    Red600 = "red-600",
     Red500 = "red-500",
-    Red400 = "red-400",
-    Red300 = "red-300",
-    Red200 = "red-200",
     Red100 = "red-100",
-    Ice = "ice",
-    Ice900 = "ice-900",
-    Ice800 = "ice-800",
     Ice700 = "ice-700",
-    Ice600 = "ice-600",
     Ice500 = "ice-500",
-    Ice400 = "ice-400",
-    Ice300 = "ice-300",
-    Ice200 = "ice-200",
+    Ice200 = "ice-200",// This is the one outlier, but it's used purposefully in a few places
     Ice100 = "ice-100",
     White = "white",
     Black = "black"

package/dist/Illustration.js

@@ -16,7 +16,7 @@ const D = /* @__PURE__ */ h({
     size: { default: 48 },
     type: { default: r.Spot },
     fillColor: { default: "blue" },
-    strokeColor: { default: "purple" },
+    strokeColor: { default: "purple-500" },
     staticPath: { default: "" }
   },
   setup(i) {

package/dist/Illustration.js.map

@@ -1 +1 @@
-{"version":3,"file":"Illustration.js","sources":["../src/components/Illustration/Illustration.models.ts","../src/components/Illustration/Illustration.vue"],"sourcesContent":["/**\n * Enum to strongly map between a friendly name and file name of the illustration\n */\nexport enum SpotName {\n  Approved = 'approved',\n  Avatar = 'avatar',\n  Barcode = 'barcode',\n  Calendar = 'calendar',\n  Cartridge = 'cartridge',\n  Celebrate = 'celebrate',\n  ChatBubble = 'chat-bubble',\n  CheckBox = 'check-box',\n  CheckCircle = 'check-circle',\n  Click = 'click',\n  Cocktail = 'cocktail',\n  Confirmation = 'confirmation',\n  Connnect = 'connnect',\n  Cookie = 'cookie',\n  CreditCard = 'credit-card',\n  Crm = 'crm',\n  Cultivation = 'cultivation',\n  Data = 'data',\n  DeliveryCompleted = 'delivery-completed',\n  Delivery = 'delivery',\n  DigitalPayments = 'digital-payments',\n  Discover = 'discover',\n  Diversity = 'diversity',\n  Drink = 'drink',\n  Dolly = 'dolly',\n  EasyReconciliations = 'easy-reconciliations',\n  Efficiency = 'efficiency',\n  Error = 'error',\n  FinancialGrowth = 'financial-growth',\n  FinancialInstitution = 'financial-institution',\n  Focus = 'focus',\n  FulfillmentIssues = 'fulfillment-issues',\n  Growth = 'growth',\n  Handshake = 'handshake',\n  Hierarchy = 'hierarchy',\n  Home = 'home',\n  Laptop = 'laptop',\n  Licenses = 'licenses',\n  LightBulb = 'light-bulb',\n  LightbulbError = 'lightbulb-error',\n  LineChart = 'line-chart',\n  Link = 'link',\n  LocationPin = 'location-pin',\n  Lock = 'lock',\n  Messaging = 'messaging',\n  Microchip = 'microchip',\n  MissingData = 'missing-data',\n  MoneyTransfer = 'money-transfer',\n  Money = 'money',\n  NoInventoryAccess = 'no-inventory-access',\n  NoInventory = 'no-inventory',\n  NoPromote = 'no-promote',\n  PackageReceived = 'package-received',\n  Package = 'package',\n  PaymentProcessing = 'payment-processing',\n  Phone = 'phone',\n  PieChart = 'pie-chart',\n  ProductCycle = 'product-cycle',\n  Puzzle = 'puzzle',\n  Receipt = 'receipt',\n  Retail = 'retail',\n  SearchingDocument = 'searching-document',\n  ShoppingBasket = 'shopping-basket',\n  Shopping = 'shopping',\n  Sign = 'sign',\n  Smile = 'smile',\n  Speed = 'speed',\n  Time = 'time',\n  Tools = 'tools',\n  Truck = 'truck',\n  User = 'user',\n  Warehouse = 'warehouse',\n  Warning = 'warning',\n  XCircle = 'x-circle',\n}\n\nexport type SpotNames = `${SpotName}`;\n\n/**\n * String array of all illustration names\n */\nexport const spotNames = Object.values(SpotName);\n\nexport enum VignetteName {\n  Bank = 'bank',\n  SearchStorefront = 'search-storefront',\n  Todo = 'todo',\n  Warehouse = 'warehouse',\n}\n\nexport type VignetteNames = `${VignetteName}`;\n\n/**\n * String array of all vignette names\n */\nexport const vignetteNames = Object.values(VignetteName);\n\n/**\n * Types of illustrations that map to the subfolder under ./assets/illustrations/<type>\n */\nexport enum IllustrationType {\n  Spot = 'spot',\n  Vignette = 'vignette',\n  // Scene is not implemented, but adding it for future work mentioned in STASH-61.\n  Scene = 'scene',\n}\n\nexport type IllustrationTypes = `${IllustrationType}`;\n","<script lang=\"ts\">\n  export * from './Illustration.models';\n</script>\n\n<script lang=\"ts\" setup>\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, inject, useCssModule } from 'vue';\n  import InlineSvg from 'vue-inline-svg';\n\n  import { StashPrimaryColor } from '../../../types/colors';\n  import { StashProvideState } from '../../../types/misc';\n  import {\n    IllustrationType,\n    IllustrationTypes,\n    SpotName,\n    SpotNames,\n    spotNames,\n    VignetteName,\n    VignetteNames,\n    vignetteNames,\n  } from './Illustration.models';\n\n  export interface IllustrationProps {\n    id?: string;\n\n    /**\n     * The filename of the icon that should be displayed\n     */\n    name: SpotNames | VignetteNames;\n\n    /**\n     * Accessible, short-text description for the icon. Not rendered as part of the graphic, but\n     * browsers usually display it as a tooltip and screen readers use this.\n     */\n    title?: string;\n\n    /**\n     * The size in pixels of the illustration.  This number will be used for width and height\n     */\n    size?: number;\n\n    /**\n     * Type of the illustration\n     */\n    type?: IllustrationTypes;\n\n    /**\n     * The fill color for the illustration.  This component will use the 400 shade of the color\n     * per design's request.  Defaults to teal.\n     */\n    fillColor?: StashPrimaryColor;\n\n    /**\n     * The color theme for the illustration.  This component will use the standard 500 shade of the color.\n     * Defaults to purple\n     */\n    strokeColor?: StashPrimaryColor;\n\n    /**\n     * Illustration's custom static path. It'll default to either the staticPath defined on the library installation or '/static' if none are provided.\n     */\n    staticPath?: string;\n  }\n\n  const props = withDefaults(defineProps<IllustrationProps>(), {\n    id: uniqueId('ll-illustration-'),\n    title: '',\n    size: 48,\n    type: IllustrationType.Spot,\n    fillColor: 'blue',\n    strokeColor: 'purple',\n    staticPath: '',\n  });\n\n  if (props.type === IllustrationType.Scene) {\n    throw new Error(\n      'Scene illustration types are not supported. Illustrations will need to be uploaded under ./assets/illustrations/scene. Illustrations to be provided by design.',\n    );\n  }\n\n  if (\n    (props.type === IllustrationType.Spot && !spotNames.includes(props.name as SpotName)) ||\n    (props.type === IllustrationType.Vignette && !vignetteNames.includes(props.name as VignetteName))\n  ) {\n    throw new Error(\n      `${props.type} illustration name ${props.name} not found. Did you check that you are using the correct type for your illustration?`,\n    );\n  }\n\n  const classes = useCssModule();\n\n  const stashOptions = inject<Partial<StashProvideState>>('stashOptions', {\n    staticPath: '/static',\n  });\n\n  const isSpotIllustration = computed(() => props.type === IllustrationType.Spot);\n\n  /**\n   * Browsers won't add the `stroke-width` attribute if it is set to false.\n   * However setting it to specific number value affects vignettes\n   */\n  const strokeWidth = computed<boolean | string>(() => {\n    return isSpotIllustration.value ? '0' : false;\n  });\n\n  const computedStaticPath = computed(() => {\n    return props.staticPath || stashOptions?.staticPath;\n  });\n</script>\n\n<template>\n  <!-- InlineSvg package (https://github.com/shrpne/vue-inline-svg) swaps external svgs and puts\n  them inline so we can style them with CSS -->\n  <!-- Having to override fill to be none and stroke to be zero so the exported svgs from Figma\n  that do not have those attributes specified do not get a default one applied -->\n  <InlineSvg\n    :id=\"props.id\"\n    :class=\"[\n      classes.illustration,\n      {\n        [`tw-text-${props.fillColor}-400 tw-stroke-${props.strokeColor}`]: isSpotIllustration,\n      },\n    ]\"\n    :title=\"props.title\"\n    :height=\"props.size\"\n    :width=\"props.size\"\n    :stroke-width=\"strokeWidth\"\n    fill=\"none\"\n    :src=\"`${computedStaticPath}/illustrations/${props.type}/${props.name}.svg`\"\n  />\n</template>\n\n<style module>\n  .illustration {\n    display: inline-block;\n    vertical-align: middle;\n  }\n</style>\n"],"names":["SpotName","spotNames","VignetteName","vignetteNames","IllustrationType","props","classes","useCssModule","stashOptions","inject","isSpotIllustration","computed","strokeWidth","computedStaticPath"],"mappings":"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"}
+{"version":3,"file":"Illustration.js","sources":["../src/components/Illustration/Illustration.models.ts","../src/components/Illustration/Illustration.vue"],"sourcesContent":["/**\n * Enum to strongly map between a friendly name and file name of the illustration\n */\nexport enum SpotName {\n  Approved = 'approved',\n  Avatar = 'avatar',\n  Barcode = 'barcode',\n  Calendar = 'calendar',\n  Cartridge = 'cartridge',\n  Celebrate = 'celebrate',\n  ChatBubble = 'chat-bubble',\n  CheckBox = 'check-box',\n  CheckCircle = 'check-circle',\n  Click = 'click',\n  Cocktail = 'cocktail',\n  Confirmation = 'confirmation',\n  Connnect = 'connnect',\n  Cookie = 'cookie',\n  CreditCard = 'credit-card',\n  Crm = 'crm',\n  Cultivation = 'cultivation',\n  Data = 'data',\n  DeliveryCompleted = 'delivery-completed',\n  Delivery = 'delivery',\n  DigitalPayments = 'digital-payments',\n  Discover = 'discover',\n  Diversity = 'diversity',\n  Drink = 'drink',\n  Dolly = 'dolly',\n  EasyReconciliations = 'easy-reconciliations',\n  Efficiency = 'efficiency',\n  Error = 'error',\n  FinancialGrowth = 'financial-growth',\n  FinancialInstitution = 'financial-institution',\n  Focus = 'focus',\n  FulfillmentIssues = 'fulfillment-issues',\n  Growth = 'growth',\n  Handshake = 'handshake',\n  Hierarchy = 'hierarchy',\n  Home = 'home',\n  Laptop = 'laptop',\n  Licenses = 'licenses',\n  LightBulb = 'light-bulb',\n  LightbulbError = 'lightbulb-error',\n  LineChart = 'line-chart',\n  Link = 'link',\n  LocationPin = 'location-pin',\n  Lock = 'lock',\n  Messaging = 'messaging',\n  Microchip = 'microchip',\n  MissingData = 'missing-data',\n  MoneyTransfer = 'money-transfer',\n  Money = 'money',\n  NoInventoryAccess = 'no-inventory-access',\n  NoInventory = 'no-inventory',\n  NoPromote = 'no-promote',\n  PackageReceived = 'package-received',\n  Package = 'package',\n  PaymentProcessing = 'payment-processing',\n  Phone = 'phone',\n  PieChart = 'pie-chart',\n  ProductCycle = 'product-cycle',\n  Puzzle = 'puzzle',\n  Receipt = 'receipt',\n  Retail = 'retail',\n  SearchingDocument = 'searching-document',\n  ShoppingBasket = 'shopping-basket',\n  Shopping = 'shopping',\n  Sign = 'sign',\n  Smile = 'smile',\n  Speed = 'speed',\n  Time = 'time',\n  Tools = 'tools',\n  Truck = 'truck',\n  User = 'user',\n  Warehouse = 'warehouse',\n  Warning = 'warning',\n  XCircle = 'x-circle',\n}\n\nexport type SpotNames = `${SpotName}`;\n\n/**\n * String array of all illustration names\n */\nexport const spotNames = Object.values(SpotName);\n\nexport enum VignetteName {\n  Bank = 'bank',\n  SearchStorefront = 'search-storefront',\n  Todo = 'todo',\n  Warehouse = 'warehouse',\n}\n\nexport type VignetteNames = `${VignetteName}`;\n\n/**\n * String array of all vignette names\n */\nexport const vignetteNames = Object.values(VignetteName);\n\n/**\n * Types of illustrations that map to the subfolder under ./assets/illustrations/<type>\n */\nexport enum IllustrationType {\n  Spot = 'spot',\n  Vignette = 'vignette',\n  // Scene is not implemented, but adding it for future work mentioned in STASH-61.\n  Scene = 'scene',\n}\n\nexport type IllustrationTypes = `${IllustrationType}`;\n","<script lang=\"ts\">\n  export * from './Illustration.models';\n</script>\n\n<script lang=\"ts\" setup>\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, inject, useCssModule } from 'vue';\n  import InlineSvg from 'vue-inline-svg';\n\n  import { StashPrimaryColor, StashPrimaryColorGroup } from '../../../types/colors';\n  import { StashProvideState } from '../../../types/misc';\n  import {\n    IllustrationType,\n    IllustrationTypes,\n    SpotName,\n    SpotNames,\n    spotNames,\n    VignetteName,\n    VignetteNames,\n    vignetteNames,\n  } from './Illustration.models';\n\n  export interface IllustrationProps {\n    id?: string;\n\n    /**\n     * The filename of the icon that should be displayed\n     */\n    name: SpotNames | VignetteNames;\n\n    /**\n     * Accessible, short-text description for the icon. Not rendered as part of the graphic, but\n     * browsers usually display it as a tooltip and screen readers use this.\n     */\n    title?: string;\n\n    /**\n     * The size in pixels of the illustration.  This number will be used for width and height\n     */\n    size?: number;\n\n    /**\n     * Type of the illustration\n     */\n    type?: IllustrationTypes;\n\n    /**\n     * The fill color for the illustration.  This component will use the 400 shade of the color\n     * per design's request.  Defaults to teal.\n     */\n    fillColor?: StashPrimaryColorGroup;\n\n    /**\n     * The color theme for the illustration.  This component will use the standard 500 shade of the color.\n     * Defaults to purple\n     */\n    strokeColor?: StashPrimaryColor;\n\n    /**\n     * Illustration's custom static path. It'll default to either the staticPath defined on the library installation or '/static' if none are provided.\n     */\n    staticPath?: string;\n  }\n\n  const props = withDefaults(defineProps<IllustrationProps>(), {\n    id: uniqueId('ll-illustration-'),\n    title: '',\n    size: 48,\n    type: IllustrationType.Spot,\n    fillColor: 'blue',\n    strokeColor: 'purple-500',\n    staticPath: '',\n  });\n\n  if (props.type === IllustrationType.Scene) {\n    throw new Error(\n      'Scene illustration types are not supported. Illustrations will need to be uploaded under ./assets/illustrations/scene. Illustrations to be provided by design.',\n    );\n  }\n\n  if (\n    (props.type === IllustrationType.Spot && !spotNames.includes(props.name as SpotName)) ||\n    (props.type === IllustrationType.Vignette && !vignetteNames.includes(props.name as VignetteName))\n  ) {\n    throw new Error(\n      `${props.type} illustration name ${props.name} not found. Did you check that you are using the correct type for your illustration?`,\n    );\n  }\n\n  const classes = useCssModule();\n\n  const stashOptions = inject<Partial<StashProvideState>>('stashOptions', {\n    staticPath: '/static',\n  });\n\n  const isSpotIllustration = computed(() => props.type === IllustrationType.Spot);\n\n  /**\n   * Browsers won't add the `stroke-width` attribute if it is set to false.\n   * However setting it to specific number value affects vignettes\n   */\n  const strokeWidth = computed<boolean | string>(() => {\n    return isSpotIllustration.value ? '0' : false;\n  });\n\n  const computedStaticPath = computed(() => {\n    return props.staticPath || stashOptions?.staticPath;\n  });\n</script>\n\n<template>\n  <!-- InlineSvg package (https://github.com/shrpne/vue-inline-svg) swaps external svgs and puts\n  them inline so we can style them with CSS -->\n  <!-- Having to override fill to be none and stroke to be zero so the exported svgs from Figma\n  that do not have those attributes specified do not get a default one applied -->\n  <InlineSvg\n    :id=\"props.id\"\n    :class=\"[\n      classes.illustration,\n      {\n        [`tw-text-${props.fillColor}-400 tw-stroke-${props.strokeColor}`]: isSpotIllustration,\n      },\n    ]\"\n    :title=\"props.title\"\n    :height=\"props.size\"\n    :width=\"props.size\"\n    :stroke-width=\"strokeWidth\"\n    fill=\"none\"\n    :src=\"`${computedStaticPath}/illustrations/${props.type}/${props.name}.svg`\"\n  />\n</template>\n\n<style module>\n  .illustration {\n    display: inline-block;\n    vertical-align: middle;\n  }\n</style>\n"],"names":["SpotName","spotNames","VignetteName","vignetteNames","IllustrationType","props","classes","useCssModule","stashOptions","inject","isSpotIllustration","computed","strokeWidth","computedStaticPath"],"mappings":"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"}

package/dist/Illustration.vue.d.ts

@@ -49,8 +49,8 @@ declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRunt
     id: string;
     size: number;
     staticPath: string;
-    fillColor: "blue" | "red" | "green" | "royal" | "purple" | "ice" | "orange" | "seafoam" | "teal" | "yellow";
-    strokeColor: "blue" | "red" | "green" | "royal" | "purple" | "ice" | "orange" | "seafoam" | "teal" | "yellow";
+    fillColor: StashPrimaryColorGroup;
+    strokeColor: "purple-500" | "royal-500" | "blue-500" | "teal-500" | "green-500" | "seafoam-500" | "yellow-500" | "orange-500" | "red-500" | "ice-500";
 }, {}>;
 export default _default;
 
@@ -77,7 +77,7 @@ export declare interface IllustrationProps {
      * The fill color for the illustration.  This component will use the 400 shade of the color
      * per design's request.  Defaults to teal.
      */
-    fillColor?: StashPrimaryColor;
+    fillColor?: StashPrimaryColorGroup;
     /**
      * The color theme for the illustration.  This component will use the standard 500 shade of the color.
      * Defaults to purple
@@ -190,19 +190,24 @@ export declare const spotNames: SpotName[];
 declare type StashPrimaryColor = `${StashPrimaryColors}`;
 
 /**
- * A set of utility types that correlate to Stash's design system
+ * The names of the color groups.
+ */
+declare type StashPrimaryColorGroup = 'blue' | 'green' | 'ice' | 'orange' | 'purple' | 'red' | 'royal' | 'seafoam' | 'teal' | 'yellow';
+
+/**
+ * A limited list of stash brand colors, only including their primary (500) shade.
  */
 declare enum StashPrimaryColors {
-    Blue = "blue",
-    Green = "green",
-    Ice = "ice",
-    Orange = "orange",
-    Purple = "purple",
-    Red = "red",
-    Royal = "royal",
-    Seafoam = "seafoam",
-    Teal = "teal",
-    Yellow = "yellow"
+    Blue500 = "blue-500",
+    Green500 = "green-500",
+    Ice500 = "ice-500",
+    Orange500 = "orange-500",
+    Purple500 = "purple-500",
+    Red500 = "red-500",
+    Royal500 = "royal-500",
+    Seafoam500 = "seafoam-500",
+    Teal500 = "teal-500",
+    Yellow500 = "yellow-500"
 }
 
 export declare enum VignetteName {

package/dist/InputOptions.js

@@ -1,4 +1,4 @@
-import { defineComponent as B, useAttrs as S, useSlots as T, useCssModule as $, ref as m, computed as c, watchEffect as k, watch as v, openBlock as E, createBlock as b, mergeProps as d, createSlots as q, withCtx as f, createElementVNode as A, normalizeClass as M, unref as s, createVNode as h, renderSlot as z } from "vue";
+import { defineComponent as B, useAttrs as S, useSlots as T, useCssModule as $, ref as d, computed as c, watchEffect as k, watch as v, openBlock as E, createBlock as b, mergeProps as m, createSlots as q, withCtx as f, createElementVNode as A, normalizeClass as M, unref as s, createVNode as h, renderSlot as z } from "vue";
 import { _ as F } from "./Field.vue_vue_type_script_setup_true_lang-475832fe.js";
 import N from "./Input.js";
 import O from "./Select.js";
@@ -26,7 +26,6 @@ import "lodash-es/isFinite";
 import "./clickoutside.js";
 import "./MenusPlugin-5e93f0a5.js";
 import "./Chip.js";
-import "./colors-13e95ebf.js";
 import "./utils/colorScheme.js";
 const P = {
   name: "ll-input-options"
@@ -43,7 +42,7 @@ const P = {
   },
   emits: ["update:model-value", "change"],
   setup(_, { emit: a }) {
-    const o = _, u = S(), y = T(), r = $(), n = m(), i = m(!1), t = m(), g = c(() => {
+    const o = _, u = S(), y = T(), r = $(), n = d(), i = d(!1), t = d(), g = c(() => {
       const { disabled: e, placeholder: l } = u;
       return { disabled: e, placeholder: l };
     }), V = c(() => {
@@ -97,7 +96,7 @@ const P = {
       throw new Error("ll-input-options: use :model-value or v-model instead of :value.");
     if (u.onInput)
       throw new Error("ll-input-options: use the @update:model-value event instead of @input");
-    return (e, l) => (E(), b(F, d(o, {
+    return (e, l) => (E(), b(F, m(o, {
       class: "input",
       "data-test": "ll-input-options"
     }), q({
@@ -105,7 +104,7 @@ const P = {
         A("div", {
           class: M(["flex", { [s(r)["has-error"]]: !!o.errorText }])
         }, [
-          h(N, d(g.value, {
+          h(N, m(g.value, {
             id: p,
             class: ["flex-1", [s(r).input, { "tw-z-control": i.value }]],
             type: o.type,
@@ -115,7 +114,7 @@ const P = {
             onBlur: l[0] || (l[0] = (I) => i.value = !1),
             onFocus: l[1] || (l[1] = (I) => i.value = !0)
           }), null, 16, ["id", "class", "type", "model-value"]),
-          h(O, d(V.value, {
+          h(O, m(V.value, {
             single: "",
             "hide-search": "",
             "prevent-empty": "",
@@ -144,8 +143,8 @@ const P = {
   "has-error": "_has-error_mqotn_26"
 }, J = {
   $style: H
-}, we = /* @__PURE__ */ U(j, [["__cssModules", J]]);
+}, Ce = /* @__PURE__ */ U(j, [["__cssModules", J]]);
 export {
-  we as default
+  Ce as default
 };
 //# sourceMappingURL=InputOptions.js.map