@leaflink/stash 42.5.0 → 42.5.1

package/dist/Icon.js

@@ -1,17 +1,239 @@
-import { _ as s, s as o } from "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
-import { I as d, i as u } from "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
-import { _ as t } from "./_plugin-vue_export-helper-dad06003.js";
-import "vue";
-import "./uniqueId-847efe53.js";
-import "./toString-7d5bf363.js";
-import "./isObjectLike-54341556.js";
-import "./index-79ce320f.js";
-const r = {
-  $style: o
-}, f = /* @__PURE__ */ t(s, [["__cssModules", r]]);
+import { defineComponent as p, useCssModule as m, inject as h, computed as i, openBlock as g, createBlock as f, unref as a, normalizeClass as b } from "vue";
+import w from "lodash-es/uniqueId";
+import { I as k } from "./index-79ce320f.js";
+import { s as v } from "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
+import { _ as y } from "./_plugin-vue_export-helper-dad06003.js";
+const _ = [
+  "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",
+  "import",
+  "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"
+];
+var z = /* @__PURE__ */ ((r) => (r.Standard = "standard", r.Dense = "dense", r.Small = "small", r.Large = "large", r))(z || {});
+const q = /* @__PURE__ */ p({
+  name: "ll-icon",
+  __name: "Icon",
+  props: {
+    id: { default: () => w("ll-icon-") },
+    name: {},
+    title: { default: "" },
+    size: { default: "standard" },
+    dense: { type: Boolean },
+    small: { type: Boolean },
+    staticPath: { default: "" }
+  },
+  setup(r) {
+    const e = r, o = m(), s = h("stashOptions", {
+      staticPath: "/static"
+    }), c = i(() => _.includes(e.name) ? e.name : "mj-leaf"), d = i(() => e.staticPath || (s == null ? void 0 : s.staticPath)), u = (t) => {
+      if (!t)
+        return t;
+      const l = document.createElement("use");
+      l.setAttribute("href", `#${c.value}`);
+      const n = t.querySelector(`#${c.value}`);
+      return n ? (t.replaceChildren(n, l), t) : (t.insertBefore(l, t.firstChild), t);
+    };
+    return (t, l) => (g(), f(a(k), {
+      id: e.id,
+      role: "presentation",
+      "aria-labelledby": e.id,
+      class: b(["stash-icon", [
+        a(o).icon,
+        `icon--${e.name}`,
+        {
+          [a(o).standard]: e.size === "standard",
+          [a(o).dense]: e.size === "dense" || e.dense,
+          [a(o).small]: e.size === "small" || e.small,
+          [a(o).large]: e.size === "large"
+        }
+      ]]),
+      "data-test": "stash-icon",
+      src: `${d.value}/spritesheet.svg`,
+      title: e.title,
+      "transform-source": u
+    }, null, 8, ["id", "aria-labelledby", "class", "src", "title"]));
+  }
+}), x = {
+  $style: v
+}, S = /* @__PURE__ */ y(q, [["__cssModules", x]]);
 export {
-  d as IconSizes,
-  f as default,
-  u as iconNames
+  z as IconSizes,
+  S as default,
+  _ as iconNames
 };
 //# sourceMappingURL=Icon.js.map

package/dist/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"Icon.js","sources":["../src/components/Icon/Icon.types.ts","../src/components/Icon/Icon.vue"],"sourcesContent":["export const iconNames = [\n  'action-dots',\n  'activity',\n  'alert-bell',\n  'archive',\n  'arrow-down',\n  'arrow-left',\n  'arrow-right',\n  'arrow-up',\n  'badge-discount',\n  'badge-seller-elite',\n  'badge-seller-power',\n  'book-customer',\n  'building-office',\n  'bulk-add',\n  'calendar-reschedule',\n  'calendar',\n  'caret-down',\n  'caret-up',\n  'cart-active',\n  'cart-plus',\n  'change-log',\n  'check',\n  'chevron-down',\n  'chevron-left',\n  'chevron-right',\n  'chevron-up',\n  'circle-check',\n  'circle-close',\n  'circle-dollar',\n  'circle-info',\n  'circle-partial',\n  'circle-percent',\n  'circle-question-mark',\n  'circle-status',\n  'circle-warning',\n  'clipboard-checkmark',\n  'clipboard-inventory',\n  'close',\n  'combine',\n  'compass',\n  'contact',\n  'contract',\n  'copy',\n  'credit-card',\n  'credit-profile',\n  'dashboard',\n  'document-accept',\n  'document-invoice',\n  'document-recieved',\n  'document-sent',\n  'document-view',\n  'document',\n  'dolly',\n  'download',\n  'edit',\n  'ellipsis',\n  'envelope-open',\n  'envelope',\n  'export',\n  'figma',\n  'file-csv',\n  'file',\n  'filter-funnel',\n  'filter-line',\n  'flag',\n  'folder',\n  'folder-bar-graph',\n  'folder-orders',\n  'gear',\n  'github',\n  'globe',\n  'graph-bar-chart',\n  'graph-line-chart',\n  'graph-pie-chart',\n  'hazard',\n  'hazard-outline',\n  'headset-agent',\n  'headset-mic',\n  'heart-filled',\n  'heart-outline',\n  'hide',\n  'history',\n  'image',\n  'import',\n  'keyboard-return',\n  'license-approved',\n  'license-certificate',\n  'lightbulb',\n  'link-add',\n  'link-unlink',\n  'link',\n  'list-items',\n  'loading-big',\n  'loading-small',\n  'location',\n  'lock-unlock',\n  'lock',\n  'logo-facebook',\n  'logo-instagram',\n  'logo-linkedin',\n  'logo-ll',\n  'logo-metrc',\n  'logo-plaid',\n  'logo-x',\n  'logo-youtube',\n  'logout',\n  'medical',\n  'megaphone-sound',\n  'megaphone',\n  'menu',\n  'message-dispute',\n  'message-reply',\n  'message',\n  'minus',\n  'mj-leaf',\n  'money',\n  'note-add',\n  'note',\n  'open-in-new',\n  'paperclip',\n  'performance',\n  'phone',\n  'plus',\n  'preview',\n  'print',\n  'product-menu-manage',\n  'product-menu-search',\n  'product-menu',\n  'queue-add',\n  'queue',\n  'recent',\n  'refresh',\n  'register',\n  'reply',\n  'report-download',\n  'sample',\n  'save',\n  'scale-law',\n  'scale-weight',\n  'search',\n  'seed-cycle',\n  'share',\n  'shop-bag-browse',\n  'shop-bag-reorder',\n  'shop-bag',\n  'shop-basket',\n  'shop-cart-add',\n  'shop-cart',\n  'show',\n  'sign-dollar',\n  'sign-percent',\n  'sort',\n  'split',\n  'star-filled',\n  'star-outline',\n  'storefront',\n  'submit',\n  'swap-horizontal',\n  'swap-vertical',\n  'tag-star',\n  'tag',\n  'test-results',\n  'ticket-star',\n  'ticket',\n  'tool-dropper',\n  'tool-wrench',\n  'transfer',\n  'trashcan',\n  'truck',\n  'upload',\n  'user-add',\n  'user-admin',\n  'user-check',\n  'user',\n  'view-card',\n  'view-detailed',\n  'view-list',\n  'warehouse',\n  'working',\n] as const;\n\nexport type IconName = typeof iconNames[number];\n\nexport enum IconSizes {\n  Standard = 'standard',\n  Dense = 'dense',\n  Small = 'small',\n  Large = 'large',\n}\n\nexport type IconSize = `${IconSizes}`;\n","<script lang=\"ts\">\n  export * from './Icon.types';\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 { StashProvideState } from '../../../types/misc';\n  import { IconName, iconNames, IconSize } from './Icon.types';\n\n  export interface IconProps {\n    id?: string;\n\n    /**\n     * The filename of the icon that should be displayed\n     */\n    name: IconName;\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 of the icon\n     * Options: large (32x32px), default (24x24px), dense (20x20px), small (14x14px).\n     */\n    size?: IconSize;\n\n    /**\n     * @deprecated Use the `size` prop with value \"dense\" instead\n     */\n    dense?: boolean;\n\n    /**\n`     * @deprecated Use the `size` prop with value \"small\" instead\n     */\n    small?: boolean;\n\n    /**\n     * Icon'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  defineOptions({\n    name: 'll-icon',\n  });\n\n  const props = withDefaults(defineProps<IconProps>(), {\n    id: () => uniqueId('ll-icon-'),\n    size: 'standard',\n    title: '',\n    staticPath: '',\n  });\n  const classes = useCssModule();\n  const stashOptions = inject<Partial<StashProvideState>>('stashOptions', {\n    staticPath: '/static',\n  });\n\n  const computedName = computed<IconName>(() => {\n    if (iconNames.includes(props.name)) {\n      return props.name;\n    }\n\n    return 'mj-leaf';\n  });\n\n  const computedStaticPath = computed(() => {\n    return props.staticPath || stashOptions?.staticPath;\n  });\n\n  /**\n   * Event handler to add the use tag for the specific icon we need to the svg\n   */\n  const transformSvgSource = (svgElem: SVGElement) => {\n    if (!svgElem) {\n      return svgElem;\n    }\n\n    const useNode = document.createElement('use');\n    useNode.setAttribute('href', `#${computedName.value}`);\n\n    // Grab icon from sprite\n    const symbolNode = svgElem.querySelector(`#${computedName.value}`);\n\n    // This really shouldn't happen but if the spritesheet gets out of sync with the `IconName` type it could\n    if (!symbolNode) {\n      // still insert <use> element but it will not be found (this is more for tests than anything else)\n      svgElem.insertBefore(useNode, svgElem.firstChild);\n      return svgElem;\n    }\n\n    /**\n     * Repeatedly inlining the entire spritesheet was causing failures in mobile Safari, and also\n     * performance issues on long list pages where the svg was being inlined over and over.\n     * Since the SVG is cached after the first request, this callback is just removing the unnecessary\n     * <symbol> nodes to slim down the DOM manipulation and insertion.\n     */\n    // Replace all children with just the one <symbol> element and <use> element\n    svgElem.replaceChildren(symbolNode, useNode);\n\n    return svgElem;\n  };\n</script>\n\n<!-- Use inline svg so that requests to pull the spritesheet are done via JS and avoid\n  browser restrictions for different domains for svgs.  inline svg also caches the requests\n  so we don't load the spritesheet multiple times\n  Reference: https://oreillymedia.github.io/Using_SVG/extras/ch10-cors.html -->\n<template>\n  <InlineSvg\n    :id=\"props.id\"\n    role=\"presentation\"\n    :aria-labelledby=\"props.id\"\n    class=\"stash-icon\"\n    :class=\"[\n      classes.icon,\n      `icon--${props.name}`,\n      {\n        [classes.standard]: props.size === 'standard',\n        [classes.dense]: props.size === 'dense' || props.dense,\n        [classes.small]: props.size === 'small' || props.small,\n        [classes.large]: props.size === 'large',\n      },\n    ]\"\n    data-test=\"stash-icon\"\n    :src=\"`${computedStaticPath}/spritesheet.svg`\"\n    :title=\"props.title\"\n    :transform-source=\"transformSvgSource\"\n  />\n</template>\n\n<style module>\n  .icon {\n    display: inline-block;\n    fill: currentcolor;\n    vertical-align: middle;\n  }\n\n  .standard {\n    height: 24px;\n    min-height: 24px;\n    min-width: 24px;\n    width: 24px;\n  }\n\n  .dense {\n    height: 20px;\n    min-height: 20px;\n    min-width: 20px;\n    width: 20px;\n  }\n\n  .small {\n    height: 14px;\n    min-height: 14px;\n    min-width: 14px;\n    width: 14px;\n  }\n\n  .large {\n    height: 32px;\n    min-height: 32px;\n    min-width: 32px;\n    width: 32px;\n  }\n</style>\n"],"names":["iconNames","IconSizes","classes","useCssModule","stashOptions","inject","computedName","computed","props","computedStaticPath","transformSvgSource","svgElem","useNode","symbolNode"],"mappings":";;;;;AAAO,MAAMA,IAAY;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAIY,IAAAC,sBAAAA,OACVA,EAAA,WAAW,YACXA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SAJEA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;iBC9HJC,IAAUC,KACVC,IAAeC,EAAmC,gBAAgB;AAAA,MACtE,YAAY;AAAA,IAAA,CACb,GAEKC,IAAeC,EAAmB,MAClCP,EAAU,SAASQ,EAAM,IAAI,IACxBA,EAAM,OAGR,SACR,GAEKC,IAAqBF,EAAS,MAC3BC,EAAM,eAAcJ,KAAA,gBAAAA,EAAc,WAC1C,GAKKM,IAAqB,CAACC,MAAwB;AAClD,UAAI,CAACA;AACI,eAAAA;AAGH,YAAAC,IAAU,SAAS,cAAc,KAAK;AAC5C,MAAAA,EAAQ,aAAa,QAAQ,IAAIN,EAAa,KAAK,EAAE;AAGrD,YAAMO,IAAaF,EAAQ,cAAc,IAAIL,EAAa,KAAK,EAAE;AAGjE,aAAKO,KAaGF,EAAA,gBAAgBE,GAAYD,CAAO,GAEpCD,MAbGA,EAAA,aAAaC,GAASD,EAAQ,UAAU,GACzCA;AAAA,IAYF;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Icon.vue.d.ts

@@ -28,12 +28,12 @@ declare type __VLS_WithDefaults<P, D> = {
 };
 
 declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IconProps>, {
-    id: string;
+    id: () => string;
     size: string;
     title: string;
     staticPath: string;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IconProps>, {
-    id: string;
+    id: () => string;
     size: string;
     title: string;
     staticPath: string;

package/dist/Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js

@@ -0,0 +1,11 @@
+const s = "_icon_1x7lf_2", l = "_standard_1x7lf_8", n = "_dense_1x7lf_15", _ = "_small_1x7lf_22", a = "_large_1x7lf_29", e = {
+  icon: s,
+  standard: l,
+  dense: n,
+  small: _,
+  large: a
+};
+export {
+  e as s
+};
+//# sourceMappingURL=Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js.map

package/dist/Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/IconLabel.js

@@ -1,11 +1,9 @@
 import { defineComponent as a, computed as o, openBlock as c, createBlock as i, resolveDynamicComponent as u, mergeProps as f, withCtx as d, createVNode as m, normalizeClass as r, createElementVNode as p, renderSlot as _ } from "vue";
 import v from "./Icon.js";
 import { _ as h } from "./_plugin-vue_export-helper-dad06003.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
-import "./uniqueId-847efe53.js";
-import "./toString-7d5bf363.js";
-import "./isObjectLike-54341556.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({
@@ -50,8 +48,8 @@ const k = {
   icon: w
 }, B = {
   $style: x
-}, q = /* @__PURE__ */ h(y, [["__cssModules", B]]);
+}, N = /* @__PURE__ */ h(y, [["__cssModules", B]]);
 export {
-  q as default
+  N 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 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Illustration.js

@@ -1,9 +1,7 @@
-import { defineComponent as h, useCssModule as y, inject as f, computed as t, openBlock as g, createBlock as k, unref as c, normalizeClass as v } from "vue";
-import { u as C } from "./uniqueId-847efe53.js";
+import { defineComponent as h, useCssModule as y, inject as f, computed as s, openBlock as g, createBlock as k, unref as c, normalizeClass as v } from "vue";
+import C from "lodash-es/uniqueId";
 import { I as b } from "./index-79ce320f.js";
 import { _ as w } from "./_plugin-vue_export-helper-dad06003.js";
-import "./toString-7d5bf363.js";
-import "./isObjectLike-54341556.js";
 var l = /* @__PURE__ */ ((i) => (i.Approved = "approved", i.Avatar = "avatar", i.Barcode = "barcode", i.Calendar = "calendar", i.Cartridge = "cartridge", i.Celebrate = "celebrate", i.ChatBubble = "chat-bubble", i.CheckBox = "check-box", i.CheckCircle = "check-circle", i.Click = "click", i.Cocktail = "cocktail", i.Confirmation = "confirmation", i.Connnect = "connnect", i.Cookie = "cookie", i.CreditCard = "credit-card", i.Crm = "crm", i.Cultivation = "cultivation", i.Data = "data", i.DeliveryCompleted = "delivery-completed", i.Delivery = "delivery", i.DigitalPayments = "digital-payments", i.Discover = "discover", i.Diversity = "diversity", i.Drink = "drink", i.Dolly = "dolly", i.EasyReconciliations = "easy-reconciliations", i.Efficiency = "efficiency", i.Error = "error", i.FinancialGrowth = "financial-growth", i.FinancialInstitution = "financial-institution", i.Focus = "focus", i.FulfillmentIssues = "fulfillment-issues", i.Growth = "growth", i.Handshake = "handshake", i.Hierarchy = "hierarchy", i.Home = "home", i.Laptop = "laptop", i.Licenses = "licenses", i.LightBulb = "light-bulb", i.LightbulbError = "lightbulb-error", i.LineChart = "line-chart", i.Link = "link", i.LocationPin = "location-pin", i.Lock = "lock", i.Messaging = "messaging", i.Microchip = "microchip", i.MissingData = "missing-data", i.MoneyTransfer = "money-transfer", i.Money = "money", i.NoInventoryAccess = "no-inventory-access", i.NoInventory = "no-inventory", i.NoPromote = "no-promote", i.PackageReceived = "package-received", i.Package = "package", i.PaymentProcessing = "payment-processing", i.Phone = "phone", i.PieChart = "pie-chart", i.ProductCycle = "product-cycle", i.Puzzle = "puzzle", i.Receipt = "receipt", i.Retail = "retail", i.SearchingDocument = "searching-document", i.ShoppingBasket = "shopping-basket", i.Shopping = "shopping", i.Sign = "sign", i.Smile = "smile", i.Speed = "speed", i.Time = "time", i.Tools = "tools", i.Truck = "truck", i.User = "user", i.Warehouse = "warehouse", i.Warning = "warning", i.XCircle = "x-circle", i))(l || {});
 const P = Object.values(l);
 var o = /* @__PURE__ */ ((i) => (i.Bank = "bank", i.SearchStorefront = "search-storefront", i.Todo = "todo", i.Warehouse = "warehouse", i))(o || {});
@@ -33,13 +31,13 @@ const D = /* @__PURE__ */ h({
       );
     const u = y(), n = f("stashOptions", {
       staticPath: "/static"
-    }), s = t(() => e.type === r.Spot), a = t(() => s.value ? "0" : !1), d = t(() => e.staticPath || (n == null ? void 0 : n.staticPath));
+    }), t = s(() => e.type === r.Spot), a = s(() => t.value ? "0" : !1), d = s(() => e.staticPath || (n == null ? void 0 : n.staticPath));
     return (B, L) => (g(), k(c(b), {
       id: e.id,
       class: v([
         c(u).illustration,
         {
-          [`tw-text-${e.fillColor}-400 tw-stroke-${e.strokeColor}`]: s.value
+          [`tw-text-${e.fillColor}-400 tw-stroke-${e.strokeColor}`]: t.value
         }
       ]),
       title: e.title,
@@ -54,12 +52,12 @@ const D = /* @__PURE__ */ h({
   illustration: I
 }, z = {
   $style: x
-}, j = /* @__PURE__ */ w(D, [["__cssModules", z]]);
+}, R = /* @__PURE__ */ w(D, [["__cssModules", z]]);
 export {
   r as IllustrationType,
   l as SpotName,
   o as VignetteName,
-  j as default,
+  R as default,
   P as spotNames,
   _ as vignetteNames
 };

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 } 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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"}

package/dist/Image.js

@@ -1,42 +1,32 @@
 import { defineComponent as x, inject as D, computed as d, useAttrs as W, openBlock as L, createElementBlock as M, mergeProps as V } from "vue";
 import { IMAGE_PROVIDER_URLS as N, CSS_VARS as b } from "./constants.js";
 import { getCssVar as E } from "./utils/helpers.js";
-import { m as B } from "./merge-b14fad9d.js";
-import "./capitalize-667d9f60.js";
-import "./toString-7d5bf363.js";
-import "./isObjectLike-54341556.js";
-import "./_createCompounder-ae01a723.js";
-import "./get-27d90892.js";
-import "./_MapCache-65811284.js";
-import "./isPlainObject-55c7f916.js";
-import "./_getPrototype-3e6fccd6.js";
-import "./_overArg-6d920d99.js";
-import "./_Uint8Array-06e4d083.js";
-import "./isArrayLike-09233e52.js";
-import "./_baseAssignValue-dd1499b4.js";
-import "./identity-452d03fd.js";
-import "./_initCloneObject-161353b9.js";
+import B from "lodash-es/merge";
+import "lodash-es/camelCase";
+import "lodash-es/get";
+import "lodash-es/isFinite";
+import "lodash-es/isPlainObject";
 function P(e) {
   return (t) => e[t] || t;
 }
 function G({
   formatter: e = (n, c) => `${n}=${c}`,
   keyMap: t,
-  joinWith: m = "/",
-  valueMap: s = {}
+  joinWith: f = "/",
+  valueMap: i = {}
 } = {}) {
   const n = typeof t == "function" ? t : P(t);
-  return Object.keys(s).forEach((c) => {
-    typeof s[c] != "function" && (s[c] = P(s[c]));
+  return Object.keys(i).forEach((c) => {
+    typeof i[c] != "function" && (i[c] = P(i[c]));
   }), (c = {}) => Object.entries(c).map(([g, v]) => {
-    const p = s[g], S = n(g);
+    const m = i[g], S = n(g);
     let h = v;
-    return typeof p == "function" && (h = p(c[g])), e(S, h);
-  }).join(m);
+    return typeof m == "function" && (h = m(c[g])), e(S, h);
+  }).join(f);
 }
 function k(e = "", t = []) {
-  const s = new URL(e).host;
-  return t.some((n) => n === s ? !0 : n.endsWith(`.${s}`));
+  const i = new URL(e).host;
+  return t.some((n) => n === i ? !0 : n.endsWith(`.${i}`));
 }
 const q = N.CLOUDINARY, F = (e) => e.startsWith("#") ? e.replace("#", "rgb_") : e, j = G({
   keyMap: {
@@ -71,8 +61,8 @@ const q = N.CLOUDINARY, F = (e) => e.startsWith("#") ? e.replace("#", "rgb_") :
   quality: "auto"
 };
 function H(e, t = {}) {
-  const m = B(Y, t), s = j(m);
-  return `${q}/${s}/${e}`;
+  const f = B(Y, t), i = j(f);
+  return `${q}/${i}/${e}`;
 }
 const K = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
@@ -111,7 +101,7 @@ const J = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   }
 };
 var tt = /* @__PURE__ */ ((e) => (e.None = "none", e.Rounded = "rounded", e))(tt || {});
-const St = /* @__PURE__ */ x({
+const ut = /* @__PURE__ */ x({
   __name: "Image",
   props: {
     src: { default: "" },
@@ -121,15 +111,15 @@ const St = /* @__PURE__ */ x({
     radius: { default: "none" }
   },
   setup(e) {
-    const t = e, m = {
+    const t = e, f = {
       CLOUDINARY: "cloudinary",
       STATIC: "static"
-    }, s = {
+    }, i = {
       md: E(b.SCREEN_MD),
       lg: E(b.SCREEN_LG)
     }, n = D("stashOptions"), c = d(() => {
-      const { src: r, ...i } = W();
-      return i.sizes = T.value, i.srcset = U.value, i;
+      const { src: r, ...s } = W();
+      return s.sizes = T.value, s.srcset = U.value, s;
     }), I = d(() => {
       var r;
       return ((r = n == null ? void 0 : n.images) == null ? void 0 : r.staticDomains) || [];
@@ -142,25 +132,25 @@ const St = /* @__PURE__ */ x({
       return k(t.src, I.value);
     }), v = d(() => {
       var r;
-      return t.provider ? t.provider : (r = n == null ? void 0 : n.images) != null && r.provider && n.images.provider !== m.STATIC && !g.value ? n.images.provider : m.STATIC;
-    }), p = d(() => v.value === m.STATIC), S = d(() => Q[v.value]), h = d(
-      () => p.value ? _() : _({ width: w.medium.width })
-    ), T = d(() => t.sizes || !p.value ? C() : void 0), U = d(() => t.sizes && !t.srcset && !p.value ? A() : t.srcset), y = d(() => t.sizes ? z(t.sizes) : p.value ? [] : z("lg:large"));
+      return t.provider ? t.provider : (r = n == null ? void 0 : n.images) != null && r.provider && n.images.provider !== f.STATIC && !g.value ? n.images.provider : f.STATIC;
+    }), m = d(() => v.value === f.STATIC), S = d(() => Q[v.value]), h = d(
+      () => m.value ? _() : _({ width: w.medium.width })
+    ), T = d(() => t.sizes || !m.value ? C() : void 0), U = d(() => t.sizes && !t.srcset && !m.value ? A() : t.srcset), y = d(() => t.sizes ? z(t.sizes) : m.value ? [] : z("lg:large"));
     function _(r = {}) {
       return S.value.getImageUrl(t.src, r);
     }
     function A() {
-      const r = Object.entries(w).reduce((i, [l, a]) => ((!!y.value.find((o) => o.preset === l) || a.alwaysIncluded) && (i[l] = a), i), {});
-      return Object.values(r).map((i) => {
-        const l = i.width;
-        return `${_({ width: l })} ${i.width}w`;
+      const r = Object.entries(w).reduce((s, [l, a]) => ((!!y.value.find((o) => o.preset === l) || a.alwaysIncluded) && (s[l] = a), s), {});
+      return Object.values(r).map((s) => {
+        const l = s.width;
+        return `${_({ width: l })} ${s.width}w`;
       }).join(", ");
     }
     function C() {
       return y.value.map((r) => `${r.media ? r.media + " " : ""}${r.size}`).join(", ");
     }
     function z(r) {
-      const i = [], l = {
+      const s = [], l = {
         default: "100vw"
       };
       if (typeof r == "string") {
@@ -176,22 +166,22 @@ const St = /* @__PURE__ */ x({
       } else
         throw new Error("`sizes` needs to be a string");
       for (const a in l) {
-        const u = parseInt(s[a] || 0), o = l[a], R = w[o] ? o : void 0;
-        let f = String(R ? w[o].width : o);
-        const $ = f.endsWith("vw");
-        if (!$ && /^\d+$/.test(f) && (f = `${f}px`), !$ && !f.endsWith("px"))
+        const u = parseInt(i[a] || 0), o = l[a], R = w[o] ? o : void 0;
+        let p = String(R ? w[o].width : o);
+        const $ = p.endsWith("vw");
+        if (!$ && /^\d+$/.test(p) && (p = `${p}px`), !$ && !p.endsWith("px"))
           continue;
         const O = {
           media: u ? `(min-width: ${u}px)` : "",
           preset: R,
           screenMinWidth: u,
-          size: f
+          size: p
         };
-        i.push(O);
+        s.push(O);
       }
-      return i.sort((a, u) => a.screenMinWidth > u.screenMinWidth ? -1 : 1), i;
+      return s.sort((a, u) => a.screenMinWidth > u.screenMinWidth ? -1 : 1), s;
     }
-    return (r, i) => (L(), M("img", V({
+    return (r, s) => (L(), M("img", V({
       ref: "img",
       key: h.value,
       "data-test": "stash-image",
@@ -206,6 +196,6 @@ const St = /* @__PURE__ */ x({
 export {
   tt as ImageRadiuses,
   w as PRESET_SIZES,
-  St as default
+  ut as default
 };
 //# sourceMappingURL=Image.js.map