@leaflink/stash 44.0.0-beta.7 → 44.0.0-beta.9

package/dist/Illustration.js

@@ -1,64 +1,14 @@
-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";
-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 || {});
-const _ = Object.values(o);
-var r = /* @__PURE__ */ ((i) => (i.Spot = "spot", i.Vignette = "vignette", i.Scene = "scene", i))(r || {});
-const D = /* @__PURE__ */ h({
-  __name: "Illustration",
-  props: {
-    id: { default: C("ll-illustration-") },
-    name: {},
-    title: { default: "" },
-    size: { default: 48 },
-    type: { default: r.Spot },
-    fillColor: { default: "blue" },
-    strokeColor: { default: "purple-500" },
-    staticPath: { default: "" }
-  },
-  setup(i) {
-    const e = i;
-    if (e.type === r.Scene)
-      throw new Error(
-        "Scene illustration types are not supported. Illustrations will need to be uploaded under ./assets/illustrations/scene. Illustrations to be provided by design."
-      );
-    if (e.type === r.Spot && !P.includes(e.name) || e.type === r.Vignette && !_.includes(e.name))
-      throw new Error(
-        `${e.type} illustration name ${e.name} not found. Did you check that you are using the correct type for your illustration?`
-      );
-    const u = y(), n = f("stashOptions", {
-      staticPath: "/static"
-    }), 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}`]: t.value
-        }
-      ]),
-      title: e.title,
-      height: e.size,
-      width: e.size,
-      "stroke-width": a.value,
-      fill: "none",
-      src: `${d.value}/illustrations/${e.type}/${e.name}.svg`
-    }, null, 8, ["id", "class", "title", "height", "width", "stroke-width", "src"]));
-  }
-}), I = "_illustration_b0xut_2", x = {
-  illustration: I
-}, z = {
-  $style: x
-}, R = /* @__PURE__ */ w(D, [["__cssModules", z]]);
+import { _ as a } from "./Illustration.vue_vue_type_script_setup_true_lang-d6a94e17.js";
+import { I as r, S as i, V as f, s as n, v as N } from "./Illustration.vue_vue_type_script_setup_true_lang-d6a94e17.js";
+import "vue";
+import "lodash-es/uniqueId";
+import "./index-79ce320f.js";
 export {
   r as IllustrationType,
-  l as SpotName,
-  o as VignetteName,
-  R as default,
-  P as spotNames,
-  _ as vignetteNames
+  i as SpotName,
+  f as VignetteName,
+  a as default,
+  n as spotNames,
+  N as vignetteNames
 };
 //# sourceMappingURL=Illustration.js.map

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, 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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"}
+{"version":3,"file":"Illustration.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/Illustration.vue_vue_type_script_setup_true_lang-d6a94e17.js

@@ -0,0 +1,56 @@
+import { defineComponent as u, inject as d, computed as t, openBlock as h, createBlock as g, unref as y, normalizeClass as k } from "vue";
+import f from "lodash-es/uniqueId";
+import { I as v } from "./index-79ce320f.js";
+var c = /* @__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))(c || {});
+const C = Object.values(c);
+var l = /* @__PURE__ */ ((i) => (i.Bank = "bank", i.SearchStorefront = "search-storefront", i.Todo = "todo", i.Warehouse = "warehouse", i))(l || {});
+const b = Object.values(l);
+var r = /* @__PURE__ */ ((i) => (i.Spot = "spot", i.Vignette = "vignette", i.Scene = "scene", i))(r || {});
+const B = /* @__PURE__ */ u({
+  __name: "Illustration",
+  props: {
+    id: { default: f("ll-illustration-") },
+    name: {},
+    title: { default: "" },
+    size: { default: 48 },
+    type: { default: r.Spot },
+    fillColor: { default: "blue" },
+    strokeColor: { default: "purple-500" },
+    staticPath: { default: "" }
+  },
+  setup(i) {
+    const e = i;
+    if (e.type === r.Scene)
+      throw new Error(
+        "Scene illustration types are not supported. Illustrations will need to be uploaded under ./assets/illustrations/scene. Illustrations to be provided by design."
+      );
+    if (e.type === r.Spot && !C.includes(e.name) || e.type === r.Vignette && !b.includes(e.name))
+      throw new Error(
+        `${e.type} illustration name ${e.name} not found. Did you check that you are using the correct type for your illustration?`
+      );
+    const n = d("stashOptions", {
+      staticPath: "/static"
+    }), s = t(() => e.type === r.Spot), o = t(() => s.value ? "0" : !1), a = t(() => e.staticPath || (n == null ? void 0 : n.staticPath));
+    return (w, P) => (h(), g(y(v), {
+      id: e.id,
+      class: k(["tw-inline-block tw-align-middle", {
+        [`tw-text-${e.fillColor}-400 tw-stroke-${e.strokeColor}`]: s.value
+      }]),
+      title: e.title,
+      height: e.size,
+      width: e.size,
+      "stroke-width": o.value,
+      fill: "none",
+      src: `${a.value}/illustrations/${e.type}/${e.name}.svg`
+    }, null, 8, ["id", "class", "title", "height", "width", "stroke-width", "src"]));
+  }
+});
+export {
+  r as I,
+  c as S,
+  l as V,
+  B as _,
+  C as s,
+  b as v
+};
+//# sourceMappingURL=Illustration.vue_vue_type_script_setup_true_lang-d6a94e17.js.map

package/dist/Illustration.vue_vue_type_script_setup_true_lang-d6a94e17.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Illustration.vue_vue_type_script_setup_true_lang-d6a94e17.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 } 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 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=\"tw-inline-block tw-align-middle\"\n    :class=\"{\n      [`tw-text-${props.fillColor}-400 tw-stroke-${props.strokeColor}`]: isSpotIllustration,\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"],"names":["SpotName","spotNames","VignetteName","vignetteNames","IllustrationType","props","stashOptions","inject","isSpotIllustration","computed","strokeWidth","computedStaticPath"],"mappings":"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"}

package/dist/Image.js

@@ -1,34 +1,29 @@
-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 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;
+import { defineComponent as x, inject as C, computed as d, useAttrs as W, openBlock as D, createElementBlock as L, mergeProps as M } from "vue";
+import { IMAGE_PROVIDER_URLS as B, SCREEN_SIZES as P } from "./constants.js";
+import N from "lodash-es/merge";
+function j(t) {
+  return (e) => t[e] || e;
 }
-function G({
-  formatter: e = (n, c) => `${n}=${c}`,
-  keyMap: t,
+function V({
+  formatter: t = (n, c) => `${n}=${c}`,
+  keyMap: e,
   joinWith: f = "/",
   valueMap: i = {}
 } = {}) {
-  const n = typeof t == "function" ? t : P(t);
+  const n = typeof e == "function" ? e : j(e);
   return Object.keys(i).forEach((c) => {
-    typeof i[c] != "function" && (i[c] = P(i[c]));
+    typeof i[c] != "function" && (i[c] = j(i[c]));
   }), (c = {}) => Object.entries(c).map(([g, v]) => {
     const m = i[g], S = n(g);
     let h = v;
-    return typeof m == "function" && (h = m(c[g])), e(S, h);
+    return typeof m == "function" && (h = m(c[g])), t(S, h);
   }).join(f);
 }
-function k(e = "", t = []) {
-  const i = new URL(e).host;
-  return t.some((n) => n === i ? !0 : n.endsWith(`.${i}`));
+function k(t = "", e = []) {
+  const i = new URL(t).host;
+  return e.some((n) => n === i ? !0 : n.endsWith(`.${i}`));
 }
-const q = N.CLOUDINARY, F = (e) => e.startsWith("#") ? e.replace("#", "rgb_") : e, j = G({
+const q = B.CLOUDINARY, G = (t) => t.startsWith("#") ? t.replace("#", "rgb_") : t, E = V({
   keyMap: {
     fit: "c",
     width: "w",
@@ -49,36 +44,36 @@ const q = N.CLOUDINARY, F = (e) => e.startsWith("#") ? e.replace("#", "rgb_") :
     format: {
       jpeg: "jpg"
     },
-    background(e) {
-      return F(e);
+    background(t) {
+      return G(t);
     }
   },
   joinWith: ",",
-  formatter: (e, t) => `${e}_${t}`
-}), Y = {
+  formatter: (t, e) => `${t}_${e}`
+}), F = {
   // defaulting to maintain original image format to reduce transformations
   // format: 'auto',
   quality: "auto"
 };
-function H(e, t = {}) {
-  const f = B(Y, t), i = j(f);
-  return `${q}/${i}/${e}`;
+function Y(t, e = {}) {
+  const f = N(F, e), i = E(f);
+  return `${q}/${i}/${t}`;
 }
-const K = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Z = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  getImageUrl: H,
-  operationsGenerator: j
+  getImageUrl: Y,
+  operationsGenerator: E
 }, Symbol.toStringTag, { value: "Module" }));
-function Z(e = "") {
-  return e;
+function H(t = "") {
+  return t;
 }
-const J = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const K = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  getImageUrl: Z
-}, Symbol.toStringTag, { value: "Module" })), Q = {
-  cloudinary: K,
-  static: J
-}, X = ["src"], w = {
+  getImageUrl: H
+}, Symbol.toStringTag, { value: "Module" })), J = {
+  cloudinary: Z,
+  static: K
+}, Q = ["src"], w = {
   xsmall: {
     alwaysIncluded: !1,
     width: 160
@@ -100,8 +95,8 @@ const J = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     width: 2704
   }
 };
-var tt = /* @__PURE__ */ ((e) => (e.None = "none", e.Rounded = "rounded", e))(tt || {});
-const ut = /* @__PURE__ */ x({
+var X = /* @__PURE__ */ ((t) => (t.None = "none", t.Rounded = "rounded", t))(X || {});
+const ne = /* @__PURE__ */ x({
   __name: "Image",
   props: {
     src: { default: "" },
@@ -110,43 +105,43 @@ const ut = /* @__PURE__ */ x({
     provider: { default: null },
     radius: { default: "none" }
   },
-  setup(e) {
-    const t = e, f = {
+  setup(t) {
+    const e = t, f = {
       CLOUDINARY: "cloudinary",
       STATIC: "static"
     }, i = {
-      md: E(b.SCREEN_MD),
-      lg: E(b.SCREEN_LG)
-    }, n = D("stashOptions"), c = d(() => {
+      md: P.md,
+      lg: P.lg
+    }, n = C("stashOptions"), c = d(() => {
       const { src: r, ...s } = W();
-      return s.sizes = T.value, s.srcset = U.value, s;
-    }), I = d(() => {
+      return s.sizes = R.value, s.srcset = T.value, s;
+    }), _ = d(() => {
       var r;
       return ((r = n == null ? void 0 : n.images) == null ? void 0 : r.staticDomains) || [];
     }), g = d(() => {
       try {
-        new URL(t.src);
+        new URL(e.src);
       } catch {
         return !0;
       }
-      return k(t.src, I.value);
+      return k(e.src, _.value);
     }), v = d(() => {
       var r;
-      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);
+      return e.provider ? e.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(() => J[v.value]), h = d(
+      () => m.value ? I() : I({ width: w.medium.width })
+    ), R = d(() => e.sizes || !m.value ? O() : void 0), T = d(() => e.sizes && !e.srcset && !m.value ? U() : e.srcset), y = d(() => e.sizes ? z(e.sizes) : m.value ? [] : z("lg:large"));
+    function I(r = {}) {
+      return S.value.getImageUrl(e.src, r);
     }
-    function A() {
+    function U() {
       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`;
+        return `${I({ width: l })} ${s.width}w`;
       }).join(", ");
     }
-    function C() {
+    function O() {
       return y.value.map((r) => `${r.media ? r.media + " " : ""}${r.size}`).join(", ");
     }
     function z(r) {
@@ -166,36 +161,36 @@ const ut = /* @__PURE__ */ x({
       } else
         throw new Error("`sizes` needs to be a string");
       for (const a in l) {
-        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"))
+        const u = parseInt(i[a] || 0), o = l[a], $ = w[o] ? o : void 0;
+        let p = String($ ? w[o].width : o);
+        const b = p.endsWith("vw");
+        if (!b && /^\d+$/.test(p) && (p = `${p}px`), !b && !p.endsWith("px"))
           continue;
-        const O = {
+        const A = {
           media: u ? `(min-width: ${u}px)` : "",
-          preset: R,
+          preset: $,
           screenMinWidth: u,
           size: p
         };
-        s.push(O);
+        s.push(A);
       }
       return s.sort((a, u) => a.screenMinWidth > u.screenMinWidth ? -1 : 1), s;
     }
-    return (r, s) => (L(), M("img", V({
+    return (r, s) => (D(), L("img", M({
       ref: "img",
       key: h.value,
       "data-test": "stash-image",
-      class: {
-        "tw-rounded": t.radius === "rounded"
+      class: ["stash-image", {
+        "tw-rounded": e.radius === "rounded"
         /* Rounded */
-      },
+      }],
       src: h.value
-    }, c.value), null, 16, X));
+    }, c.value), null, 16, Q));
   }
 });
 export {
-  tt as ImageRadiuses,
+  X as ImageRadiuses,
   w as PRESET_SIZES,
-  ut as default
+  ne as default
 };
 //# sourceMappingURL=Image.js.map

package/dist/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sources":["../src/components/Image/providers/utils.ts","../src/components/Image/providers/cloudinary.ts","../src/components/Image/providers/static.ts","../src/components/Image/providers/index.ts","../src/components/Image/Image.vue"],"sourcesContent":["export interface ImageModifiers {\n  format?: string;\n  height?: number;\n  width?: number;\n  [key: string]: any /* eslint-disable-line @typescript-eslint/no-explicit-any */;\n}\n\nexport type ParamFormatter = (key: string, value: string) => string;\n\nexport type ParamMapper = { [key: string]: string } | ((key: string) => string);\n\nexport interface ProviderUrlBuilder {\n  keyMap?: ParamMapper;\n  formatter?: ParamFormatter;\n  joinWith?: string;\n  valueMap?: {\n    [key: string]: ParamMapper;\n  };\n}\n\nfunction createMapper(map: any) {\n  /* eslint-disable-line @typescript-eslint/no-explicit-any */\n  return (key: string) => {\n    return map[key] || key;\n  };\n}\n\n/**\n * Builds the parameterized Cloudinary url\n */\nexport function buildProviderUrl({\n  formatter = (key, value) => `${key}=${value}`,\n  keyMap,\n  joinWith = '/',\n  valueMap = {},\n}: ProviderUrlBuilder = {}) {\n  const keyMapper = typeof keyMap === 'function' ? keyMap : createMapper(keyMap);\n\n  Object.keys(valueMap).forEach((valueKey) => {\n    if (typeof valueMap[valueKey] !== 'function') {\n      valueMap[valueKey] = createMapper(valueMap[valueKey]);\n    }\n  });\n\n  return (modifiers: { [key: string]: string } = {}) => {\n    const operations = Object.entries(modifiers).map(([key, value]) => {\n      const mapper = valueMap[key];\n      const newKey = keyMapper(key);\n      let newVal = value;\n\n      if (typeof mapper === 'function') {\n        newVal = mapper(modifiers[key]);\n      }\n\n      return formatter(newKey, newVal);\n    });\n\n    return operations.join(joinWith);\n  };\n}\n\n/**\n * Checks if a (sub)domain is included in a list of acceptable domains\n * @param str the (sub)domain to check\n * @param domains an array of valid domains\n */\nexport function isDomainValid(str = '', domains: string[] = []): boolean {\n  const url = new URL(str);\n  const host = url.host;\n\n  return domains.some((domain) => {\n    if (domain === host) {\n      return true;\n    }\n\n    return domain.endsWith(`.${host}`);\n  });\n}\n","import merge from 'lodash-es/merge';\n\nimport { IMAGE_PROVIDER_URLS } from '../../../constants';\nimport { buildProviderUrl, ImageModifiers } from './utils';\n\nconst BASE_URL = IMAGE_PROVIDER_URLS.CLOUDINARY;\n\nconst convertHextoRGBFormat = (value: string) => (value.startsWith('#') ? value.replace('#', 'rgb_') : value);\n\n/**\n * Parameters (option and value pairs) that can be used in the <transformations> segment of the Cloudinary transformation URL.\n * Options and their respective values are connected by an underscore (eg `w_250` for width of 250px.).\n * Multiple parameters are comma separated (eg. `w_250,h_250`).\n *\n * `keyMap` maps the option to its option prefix.\n * `valueMap` is used for grouping options using the same `keyMap` value under a 'category', allowing for easier usage and custom labelling in the component context.\n *\n * Transformation URL structure:\n * https://cloudinary.com/documentation/transformation_reference\n *\n * Transformation URL parameters (options and values):\n * https://cloudinary.com/documentation/image_transformations#transformation_url_syntax\n *\n */\nexport const operationsGenerator = buildProviderUrl({\n  keyMap: {\n    fit: 'c',\n    width: 'w',\n    height: 'h',\n    format: 'f',\n    quality: 'q',\n    background: 'b',\n    dpr: 'dpr',\n  },\n  valueMap: {\n    fit: {\n      fill: 'fill',\n      inside: 'pad',\n      outside: 'lpad',\n      cover: 'fit',\n      contain: 'scale',\n    },\n    format: {\n      jpeg: 'jpg',\n    },\n    background(value: string) {\n      return convertHextoRGBFormat(value);\n    },\n  },\n  joinWith: ',',\n  formatter: (key, value) => `${key}_${value}`,\n});\n\n// Note: Not configurable via Image props (for now).\nconst defaultModifiers = {\n  // defaulting to maintain original image format to reduce transformations\n  // format: 'auto',\n  quality: 'auto',\n};\n\nexport function getImageUrl(src: string, modifiers: Partial<ImageModifiers> = {}): string {\n  const mergeModifiers = merge(defaultModifiers, modifiers);\n  const operations = operationsGenerator(mergeModifiers);\n\n  return `${BASE_URL}/${operations}/${src}`;\n}\n","export function getImageUrl(src = ''): string {\n  return src;\n}\n","import * as cloudinary from './cloudinary';\nimport * as staticProvider from './static';\n\nexport default {\n  cloudinary,\n  static: staticProvider,\n};\n","<script lang=\"ts\">\n  export const PRESET_SIZES = {\n    xsmall: {\n      alwaysIncluded: false,\n      width: 160,\n    },\n    small: {\n      alwaysIncluded: true,\n      width: 338,\n    },\n    medium: {\n      alwaysIncluded: true,\n      width: 676,\n    },\n    large: {\n      alwaysIncluded: true,\n      width: 1352,\n    },\n    xlarge: {\n      alwaysIncluded: false,\n      width: 2704,\n    },\n  } as const;\n\n  export enum ImageRadiuses {\n    None = 'none',\n    Rounded = 'rounded',\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, inject, useAttrs } from 'vue';\n\n  import { StashImageProviders, StashProvideState } from '../../../types/misc';\n  import { CSS_VARS } from '../../constants';\n  import { getCssVar } from '../../utils/helpers';\n  import providers from './providers';\n  import { ImageModifiers, isDomainValid } from './providers/utils';\n\n  // interface ImagePresetSizes {\n  //   [size: string]: {\n  //     alwaysIncluded: boolean;\n  //     width: number;\n  //   }\n  // }\n\n  export interface ImageSizeVariant {\n    media: string;\n    preset?: keyof typeof PRESET_SIZES;\n    screenMinWidth: number;\n    size: string;\n  }\n\n  export type ImageRadius = `${ImageRadiuses}`;\n\n  export interface ImageProps {\n    /**\n     * The path to the image you want to embed.\n     */\n    src: string;\n\n    /**\n     * Native srcset attribute.\n     * One or more strings separated by commas, indicating possible image sources\n     * Can only be used with provider=static, otherwise it's ignored and auto-generated with `sizes` usage\n     */\n    srcset?: string;\n\n    /**\n     * For specifying responsive sizes\n     */\n    sizes?: string;\n\n    /**\n     * Where the image is served from.\n     * Optional, and when provided it forces the provider used.\n     *\n     * The provider is otherwise inherited from the Stash config `stashOptions.images.provider`, which defaults to `cloudinary`.\n     *\n     * When not provided, the provider is also inferred by `isStatic`:\n     *  - `static` for relative/absolute paths (`img/foo.jpg` or `/static/img/bar.jpg`), or when whitelisted absolute URLs are used (included in `staticOptions.images.staticDomains`).\n     */\n    provider?: StashImageProviders | null;\n\n    /**\n     * For applying border radius\n     */\n    radius?: ImageRadius;\n\n    /**\n     * TODO - https://leaflink.atlassian.net/browse/GRO-204\n     * A custom function used to resolve a URL string for the image\n     */\n    // loader?: () => string;\n  }\n\n  const PROVIDERS = {\n    CLOUDINARY: 'cloudinary',\n    STATIC: 'static',\n  };\n  const BREAKPOINTS = {\n    md: getCssVar(CSS_VARS.SCREEN_MD),\n    lg: getCssVar(CSS_VARS.SCREEN_LG),\n  };\n  const stashOptions = inject<StashProvideState>('stashOptions');\n  const props = withDefaults(defineProps<ImageProps>(), {\n    src: '',\n    srcset: '',\n    sizes: '',\n    provider: null,\n    radius: 'none',\n    // loader: undefined, // TODO - https://leaflink.atlassian.net/browse/GRO-204\n  });\n\n  const attrs = computed(() => {\n    const { src, ...attrs } = useAttrs();\n\n    attrs.sizes = imgSizes.value;\n    attrs.srcset = imgSrcset.value;\n\n    return attrs;\n  });\n\n  const staticDomains = computed(() => stashOptions?.images?.staticDomains || []);\n\n  const isStaticUrl = computed(() => {\n    // return true if not an absolute url\n    try {\n      new URL(props.src);\n    } catch (e) {\n      return true;\n    }\n\n    // true if domain is whitelisted for static usage\n    return isDomainValid(props.src, staticDomains.value);\n  });\n\n  const computedProvider = computed(() => {\n    if (props.provider) {\n      return props.provider;\n    }\n\n    if (stashOptions?.images?.provider && stashOptions.images.provider !== PROVIDERS.STATIC && !isStaticUrl.value) {\n      return stashOptions.images.provider;\n    }\n\n    return PROVIDERS.STATIC;\n  });\n\n  const isStatic = computed(() => computedProvider.value === PROVIDERS.STATIC);\n\n  const imgProvider = computed(() => providers[computedProvider.value]);\n\n  const imgSrc = computed(() =>\n    isStatic.value ? getProviderImage() : getProviderImage({ width: PRESET_SIZES.medium.width }),\n  );\n\n  const imgSizes = computed(() => (props.sizes || !isStatic.value ? getSizes() : undefined));\n\n  const imgSrcset = computed(() => (props.sizes && !props.srcset && !isStatic.value ? getSources() : props.srcset));\n\n  const parsedSizes = computed(() => {\n    if (props.sizes) {\n      return parseSizes(props.sizes);\n    }\n\n    if (!isStatic.value) {\n      return parseSizes('lg:large');\n    }\n\n    return [];\n  });\n\n  function getProviderImage(modifiers: ImageModifiers = {}) {\n    return imgProvider.value.getImageUrl(props.src, modifiers);\n  }\n\n  function getSources() {\n    const appliedPresets = Object.entries(PRESET_SIZES).reduce((obj, [key, entry]) => {\n      const isPreset = !!parsedSizes.value.find((size) => size.preset === key);\n\n      if (isPreset || entry.alwaysIncluded) {\n        obj[key] = entry;\n      }\n\n      return obj;\n    }, {} as typeof PRESET_SIZES);\n\n    return Object.values(appliedPresets)\n      .map((size) => {\n        const width = size.width;\n        const src = getProviderImage({ width });\n\n        return `${src} ${size.width}w`;\n      })\n      .join(', ');\n  }\n\n  function getSizes() {\n    return parsedSizes.value.map((v) => `${v.media ? v.media + ' ' : ''}${v.size}`).join(', ');\n  }\n\n  function parseSizes(providedSizes: string) {\n    const variants: ImageSizeVariant[] = [];\n    const sizes = {\n      default: '100vw',\n    };\n\n    // parse sizes and convert to object\n    if (typeof providedSizes === 'string') {\n      const definitions = providedSizes.split(/[\\s]+/).filter((size) => size);\n\n      for (const entry of definitions) {\n        const size = entry.split(':');\n\n        if (size.length !== 2) {\n          sizes['default'] = size[0].trim();\n          continue;\n        }\n\n        sizes[size[0].trim()] = size[1].trim();\n      }\n    } else {\n      throw new Error('`sizes` needs to be a string');\n    }\n\n    for (const key in sizes) {\n      const screenMinWidth = parseInt(BREAKPOINTS[key] || 0);\n      const sizeValue = sizes[key];\n      const presetKey = PRESET_SIZES[sizeValue] ? sizeValue : undefined;\n      let size = String(presetKey ? PRESET_SIZES[sizeValue].width : sizeValue);\n      const isFluid = size.endsWith('vw');\n\n      // default integers to pixels\n      if (!isFluid && /^\\d+$/.test(size)) {\n        size = `${size}px`;\n      }\n\n      // ignore invalid size\n      if (!isFluid && !size.endsWith('px')) {\n        continue;\n      }\n\n      const variant = {\n        media: screenMinWidth ? `(min-width: ${screenMinWidth}px)` : '',\n        preset: presetKey,\n        screenMinWidth,\n        size,\n      };\n\n      variants.push(variant);\n    }\n\n    variants.sort((v1, v2) => (v1.screenMinWidth > v2.screenMinWidth ? -1 : 1));\n\n    return variants;\n  }\n</script>\n\n<template>\n  <img\n    ref=\"img\"\n    :key=\"imgSrc\"\n    data-test=\"stash-image\"\n    :class=\"{\n      'tw-rounded': props.radius === ImageRadiuses.Rounded,\n    }\"\n    :src=\"imgSrc\"\n    v-bind=\"attrs\"\n  />\n</template>\n"],"names":["createMapper","map","key","buildProviderUrl","formatter","value","keyMap","joinWith","valueMap","keyMapper","valueKey","modifiers","mapper","newKey","newVal","isDomainValid","str","domains","host","domain","BASE_URL","IMAGE_PROVIDER_URLS","convertHextoRGBFormat","operationsGenerator","defaultModifiers","getImageUrl","src","mergeModifiers","merge","operations","providers","cloudinary","staticProvider","PRESET_SIZES","ImageRadiuses","PROVIDERS","BREAKPOINTS","getCssVar","CSS_VARS","stashOptions","inject","attrs","computed","useAttrs","imgSizes","imgSrcset","staticDomains","_a","isStaticUrl","props","computedProvider","isStatic","imgProvider","imgSrc","getProviderImage","getSizes","getSources","parsedSizes","parseSizes","appliedPresets","obj","entry","size","width","v","providedSizes","variants","sizes","definitions","screenMinWidth","sizeValue","presetKey","isFluid","variant","v1","v2"],"mappings":";;;;;;;;AAoBA,SAASA,EAAaC,GAAU;AAE9B,SAAO,CAACC,MACCD,EAAIC,CAAG,KAAKA;AAEvB;AAKO,SAASC,EAAiB;AAAA,EAC/B,WAAAC,IAAY,CAACF,GAAKG,MAAU,GAAGH,CAAG,IAAIG,CAAK;AAAA,EAC3C,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW,CAAC;AACd,IAAwB,IAAI;AAC1B,QAAMC,IAAY,OAAOH,KAAW,aAAaA,IAASN,EAAaM,CAAM;AAE7E,gBAAO,KAAKE,CAAQ,EAAE,QAAQ,CAACE,MAAa;AAC1C,IAAI,OAAOF,EAASE,CAAQ,KAAM,eAChCF,EAASE,CAAQ,IAAIV,EAAaQ,EAASE,CAAQ,CAAC;AAAA,EACtD,CACD,GAEM,CAACC,IAAuC,OAC1B,OAAO,QAAQA,CAAS,EAAE,IAAI,CAAC,CAACT,GAAKG,CAAK,MAAM;AAC3D,UAAAO,IAASJ,EAASN,CAAG,GACrBW,IAASJ,EAAUP,CAAG;AAC5B,QAAIY,IAAST;AAET,WAAA,OAAOO,KAAW,eACXE,IAAAF,EAAOD,EAAUT,CAAG,CAAC,IAGzBE,EAAUS,GAAQC,CAAM;AAAA,EAAA,CAChC,EAEiB,KAAKP,CAAQ;AAEnC;AAOO,SAASQ,EAAcC,IAAM,IAAIC,IAAoB,CAAA,GAAa;AAEvE,QAAMC,IADM,IAAI,IAAIF,CAAG,EACN;AAEV,SAAAC,EAAQ,KAAK,CAACE,MACfA,MAAWD,IACN,KAGFC,EAAO,SAAS,IAAID,CAAI,EAAE,CAClC;AACH;ACxEA,MAAME,IAAWC,EAAoB,YAE/BC,IAAwB,CAACjB,MAAmBA,EAAM,WAAW,GAAG,IAAIA,EAAM,QAAQ,KAAK,MAAM,IAAIA,GAiB1FkB,IAAsBpB,EAAiB;AAAA,EAClD,QAAQ;AAAA,IACN,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK;AAAA,EACP;AAAA,EACA,UAAU;AAAA,IACR,KAAK;AAAA,MACH,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,MACP,SAAS;AAAA,IACX;AAAA,IACA,QAAQ;AAAA,MACN,MAAM;AAAA,IACR;AAAA,IACA,WAAWE,GAAe;AACxB,aAAOiB,EAAsBjB,CAAK;AAAA,IACpC;AAAA,EACF;AAAA,EACA,UAAU;AAAA,EACV,WAAW,CAACH,GAAKG,MAAU,GAAGH,CAAG,IAAIG,CAAK;AAC5C,CAAC,GAGKmB,IAAmB;AAAA;AAAA;AAAA,EAGvB,SAAS;AACX;AAEO,SAASC,EAAYC,GAAaf,IAAqC,IAAY;AAClF,QAAAgB,IAAiBC,EAAMJ,GAAkBb,CAAS,GAClDkB,IAAaN,EAAoBI,CAAc;AAErD,SAAO,GAAGP,CAAQ,IAAIS,CAAU,IAAIH,CAAG;AACzC;;;;;;ACjEgB,SAAAD,EAAYC,IAAM,IAAY;AACrC,SAAAA;AACT;;;;8CCCeI,IAAA;AAAA,EACb,YAAAC;AAAA,EACA,QAAQC;AACV,gBCLeC,IAAe;AAAA,EAC1B,QAAQ;AAAA,IACN,gBAAgB;AAAA,IAChB,OAAO;AAAA,EACT;AAAA,EACA,OAAO;AAAA,IACL,gBAAgB;AAAA,IAChB,OAAO;AAAA,EACT;AAAA,EACA,QAAQ;AAAA,IACN,gBAAgB;AAAA,IAChB,OAAO;AAAA,EACT;AAAA,EACA,OAAO;AAAA,IACL,gBAAgB;AAAA,IAChB,OAAO;AAAA,EACT;AAAA,EACA,QAAQ;AAAA,IACN,gBAAgB;AAAA,IAChB,OAAO;AAAA,EACT;AACF;AAEY,IAAAC,uBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WAFAA,IAAAA,MAAA,CAAA,CAAA;;;;;;;;;;;iBAwENC,IAAY;AAAA,MAChB,YAAY;AAAA,MACZ,QAAQ;AAAA,IAAA,GAEJC,IAAc;AAAA,MAClB,IAAIC,EAAUC,EAAS,SAAS;AAAA,MAChC,IAAID,EAAUC,EAAS,SAAS;AAAA,IAAA,GAE5BC,IAAeC,EAA0B,cAAc,GAUvDC,IAAQC,EAAS,MAAM;AAC3B,YAAM,EAAE,KAAAhB,GAAK,GAAGe,MAAUE,EAAS;AAEnCF,aAAAA,EAAM,QAAQG,EAAS,OACvBH,EAAM,SAASI,EAAU,OAElBJ;AAAAA,IAAA,CACR,GAEKK,IAAgBJ,EAAS,MAAM;;AAAA,eAAAK,IAAAR,KAAA,gBAAAA,EAAc,WAAd,gBAAAQ,EAAsB,kBAAiB,CAAA;AAAA,KAAE,GAExEC,IAAcN,EAAS,MAAM;AAE7B,UAAA;AACE,YAAA,IAAIO,EAAM,GAAG;AAAA,cACP;AACH,eAAA;AAAA,MACT;AAGA,aAAOlC,EAAckC,EAAM,KAAKH,EAAc,KAAK;AAAA,IAAA,CACpD,GAEKI,IAAmBR,EAAS,MAAM;;AACtC,aAAIO,EAAM,WACDA,EAAM,YAGXF,IAAAR,KAAA,gBAAAA,EAAc,WAAd,QAAAQ,EAAsB,YAAYR,EAAa,OAAO,aAAaJ,EAAU,UAAU,CAACa,EAAY,QAC/FT,EAAa,OAAO,WAGtBJ,EAAU;AAAA,IAAA,CAClB,GAEKgB,IAAWT,EAAS,MAAMQ,EAAiB,UAAUf,EAAU,MAAM,GAErEiB,IAAcV,EAAS,MAAMZ,EAAUoB,EAAiB,KAAK,CAAC,GAE9DG,IAASX;AAAA,MAAS,MACtBS,EAAS,QAAQG,MAAqBA,EAAiB,EAAE,OAAOrB,EAAa,OAAO,OAAO;AAAA,IAAA,GAGvFW,IAAWF,EAAS,MAAOO,EAAM,SAAS,CAACE,EAAS,QAAQI,MAAa,MAAU,GAEnFV,IAAYH,EAAS,MAAOO,EAAM,SAAS,CAACA,EAAM,UAAU,CAACE,EAAS,QAAQK,EAAW,IAAIP,EAAM,MAAO,GAE1GQ,IAAcf,EAAS,MACvBO,EAAM,QACDS,EAAWT,EAAM,KAAK,IAG1BE,EAAS,QAIP,KAHEO,EAAW,UAAU,CAI/B;AAEQ,aAAAJ,EAAiB3C,IAA4B,IAAI;AACxD,aAAOyC,EAAY,MAAM,YAAYH,EAAM,KAAKtC,CAAS;AAAA,IAC3D;AAEA,aAAS6C,IAAa;AACd,YAAAG,IAAiB,OAAO,QAAQ1B,CAAY,EAAE,OAAO,CAAC2B,GAAK,CAAC1D,GAAK2D,CAAK,QACzD,CAAC,CAACJ,EAAY,MAAM,KAAK,CAACK,MAASA,EAAK,WAAW5D,CAAG,KAEvD2D,EAAM,oBACpBD,EAAI1D,CAAG,IAAI2D,IAGND,IACN,CAAyB,CAAA;AAE5B,aAAO,OAAO,OAAOD,CAAc,EAChC,IAAI,CAACG,MAAS;AACb,cAAMC,IAAQD,EAAK;AAGnB,eAAO,GAFKR,EAAiB,EAAE,OAAAS,EAAO,CAAA,CAEzB,IAAID,EAAK,KAAK;AAAA,MAAA,CAC5B,EACA,KAAK,IAAI;AAAA,IACd;AAEA,aAASP,IAAW;AAClB,aAAOE,EAAY,MAAM,IAAI,CAACO,MAAM,GAAGA,EAAE,QAAQA,EAAE,QAAQ,MAAM,EAAE,GAAGA,EAAE,IAAI,EAAE,EAAE,KAAK,IAAI;AAAA,IAC3F;AAEA,aAASN,EAAWO,GAAuB;AACzC,YAAMC,IAA+B,CAAA,GAC/BC,IAAQ;AAAA,QACZ,SAAS;AAAA,MAAA;AAIP,UAAA,OAAOF,KAAkB,UAAU;AAC/B,cAAAG,IAAcH,EAAc,MAAM,OAAO,EAAE,OAAO,CAACH,MAASA,CAAI;AAEtE,mBAAWD,KAASO,GAAa;AACzB,gBAAAN,IAAOD,EAAM,MAAM,GAAG;AAExB,cAAAC,EAAK,WAAW,GAAG;AACrB,YAAAK,EAAM,UAAaL,EAAK,CAAC,EAAE,KAAK;AAChC;AAAA,UACF;AAEM,UAAAK,EAAAL,EAAK,CAAC,EAAE,KAAA,CAAM,IAAIA,EAAK,CAAC,EAAE;QAClC;AAAA,MAAA;AAEM,cAAA,IAAI,MAAM,8BAA8B;AAGhD,iBAAW5D,KAAOiE,GAAO;AACvB,cAAME,IAAiB,SAASjC,EAAYlC,CAAG,KAAK,CAAC,GAC/CoE,IAAYH,EAAMjE,CAAG,GACrBqE,IAAYtC,EAAaqC,CAAS,IAAIA,IAAY;AACxD,YAAIR,IAAO,OAAOS,IAAYtC,EAAaqC,CAAS,EAAE,QAAQA,CAAS;AACjE,cAAAE,IAAUV,EAAK,SAAS,IAAI;AAQlC,YALI,CAACU,KAAW,QAAQ,KAAKV,CAAI,MAC/BA,IAAO,GAAGA,CAAI,OAIZ,CAACU,KAAW,CAACV,EAAK,SAAS,IAAI;AACjC;AAGF,cAAMW,IAAU;AAAA,UACd,OAAOJ,IAAiB,eAAeA,CAAc,QAAQ;AAAA,UAC7D,QAAQE;AAAA,UACR,gBAAAF;AAAA,UACA,MAAAP;AAAA,QAAA;AAGF,QAAAI,EAAS,KAAKO,CAAO;AAAA,MACvB;AAES,aAAAP,EAAA,KAAK,CAACQ,GAAIC,MAAQD,EAAG,iBAAiBC,EAAG,iBAAiB,KAAK,CAAE,GAEnET;AAAA,IACT;;;;;;;;;;;;;"}
+{"version":3,"file":"Image.js","sources":["../src/components/Image/providers/utils.ts","../src/components/Image/providers/cloudinary.ts","../src/components/Image/providers/static.ts","../src/components/Image/providers/index.ts","../src/components/Image/Image.vue"],"sourcesContent":["export interface ImageModifiers {\n  format?: string;\n  height?: number;\n  width?: number;\n  [key: string]: any /* eslint-disable-line @typescript-eslint/no-explicit-any */;\n}\n\nexport type ParamFormatter = (key: string, value: string) => string;\n\nexport type ParamMapper = { [key: string]: string } | ((key: string) => string);\n\nexport interface ProviderUrlBuilder {\n  keyMap?: ParamMapper;\n  formatter?: ParamFormatter;\n  joinWith?: string;\n  valueMap?: {\n    [key: string]: ParamMapper;\n  };\n}\n\nfunction createMapper(map: any) {\n  /* eslint-disable-line @typescript-eslint/no-explicit-any */\n  return (key: string) => {\n    return map[key] || key;\n  };\n}\n\n/**\n * Builds the parameterized Cloudinary url\n */\nexport function buildProviderUrl({\n  formatter = (key, value) => `${key}=${value}`,\n  keyMap,\n  joinWith = '/',\n  valueMap = {},\n}: ProviderUrlBuilder = {}) {\n  const keyMapper = typeof keyMap === 'function' ? keyMap : createMapper(keyMap);\n\n  Object.keys(valueMap).forEach((valueKey) => {\n    if (typeof valueMap[valueKey] !== 'function') {\n      valueMap[valueKey] = createMapper(valueMap[valueKey]);\n    }\n  });\n\n  return (modifiers: { [key: string]: string } = {}) => {\n    const operations = Object.entries(modifiers).map(([key, value]) => {\n      const mapper = valueMap[key];\n      const newKey = keyMapper(key);\n      let newVal = value;\n\n      if (typeof mapper === 'function') {\n        newVal = mapper(modifiers[key]);\n      }\n\n      return formatter(newKey, newVal);\n    });\n\n    return operations.join(joinWith);\n  };\n}\n\n/**\n * Checks if a (sub)domain is included in a list of acceptable domains\n * @param str the (sub)domain to check\n * @param domains an array of valid domains\n */\nexport function isDomainValid(str = '', domains: string[] = []): boolean {\n  const url = new URL(str);\n  const host = url.host;\n\n  return domains.some((domain) => {\n    if (domain === host) {\n      return true;\n    }\n\n    return domain.endsWith(`.${host}`);\n  });\n}\n","import merge from 'lodash-es/merge';\n\nimport { IMAGE_PROVIDER_URLS } from '../../../constants';\nimport { buildProviderUrl, ImageModifiers } from './utils';\n\nconst BASE_URL = IMAGE_PROVIDER_URLS.CLOUDINARY;\n\nconst convertHextoRGBFormat = (value: string) => (value.startsWith('#') ? value.replace('#', 'rgb_') : value);\n\n/**\n * Parameters (option and value pairs) that can be used in the <transformations> segment of the Cloudinary transformation URL.\n * Options and their respective values are connected by an underscore (eg `w_250` for width of 250px.).\n * Multiple parameters are comma separated (eg. `w_250,h_250`).\n *\n * `keyMap` maps the option to its option prefix.\n * `valueMap` is used for grouping options using the same `keyMap` value under a 'category', allowing for easier usage and custom labelling in the component context.\n *\n * Transformation URL structure:\n * https://cloudinary.com/documentation/transformation_reference\n *\n * Transformation URL parameters (options and values):\n * https://cloudinary.com/documentation/image_transformations#transformation_url_syntax\n *\n */\nexport const operationsGenerator = buildProviderUrl({\n  keyMap: {\n    fit: 'c',\n    width: 'w',\n    height: 'h',\n    format: 'f',\n    quality: 'q',\n    background: 'b',\n    dpr: 'dpr',\n  },\n  valueMap: {\n    fit: {\n      fill: 'fill',\n      inside: 'pad',\n      outside: 'lpad',\n      cover: 'fit',\n      contain: 'scale',\n    },\n    format: {\n      jpeg: 'jpg',\n    },\n    background(value: string) {\n      return convertHextoRGBFormat(value);\n    },\n  },\n  joinWith: ',',\n  formatter: (key, value) => `${key}_${value}`,\n});\n\n// Note: Not configurable via Image props (for now).\nconst defaultModifiers = {\n  // defaulting to maintain original image format to reduce transformations\n  // format: 'auto',\n  quality: 'auto',\n};\n\nexport function getImageUrl(src: string, modifiers: Partial<ImageModifiers> = {}): string {\n  const mergeModifiers = merge(defaultModifiers, modifiers);\n  const operations = operationsGenerator(mergeModifiers);\n\n  return `${BASE_URL}/${operations}/${src}`;\n}\n","export function getImageUrl(src = ''): string {\n  return src;\n}\n","import * as cloudinary from './cloudinary';\nimport * as staticProvider from './static';\n\nexport default {\n  cloudinary,\n  static: staticProvider,\n};\n","<script lang=\"ts\">\n  export const PRESET_SIZES = {\n    xsmall: {\n      alwaysIncluded: false,\n      width: 160,\n    },\n    small: {\n      alwaysIncluded: true,\n      width: 338,\n    },\n    medium: {\n      alwaysIncluded: true,\n      width: 676,\n    },\n    large: {\n      alwaysIncluded: true,\n      width: 1352,\n    },\n    xlarge: {\n      alwaysIncluded: false,\n      width: 2704,\n    },\n  } as const;\n\n  export enum ImageRadiuses {\n    None = 'none',\n    Rounded = 'rounded',\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, inject, useAttrs } from 'vue';\n\n  import { StashImageProviders, StashProvideState } from '../../../types/misc';\n  import { SCREEN_SIZES } from '../../constants';\n  import providers from './providers';\n  import { ImageModifiers, isDomainValid } from './providers/utils';\n\n  // interface ImagePresetSizes {\n  //   [size: string]: {\n  //     alwaysIncluded: boolean;\n  //     width: number;\n  //   }\n  // }\n\n  export interface ImageSizeVariant {\n    media: string;\n    preset?: keyof typeof PRESET_SIZES;\n    screenMinWidth: number;\n    size: string;\n  }\n\n  export type ImageRadius = `${ImageRadiuses}`;\n\n  export interface ImageProps {\n    /**\n     * The path to the image you want to embed.\n     */\n    src: string;\n\n    /**\n     * Native srcset attribute.\n     * One or more strings separated by commas, indicating possible image sources\n     * Can only be used with provider=static, otherwise it's ignored and auto-generated with `sizes` usage\n     */\n    srcset?: string;\n\n    /**\n     * For specifying responsive sizes\n     */\n    sizes?: string;\n\n    /**\n     * Where the image is served from.\n     * Optional, and when provided it forces the provider used.\n     *\n     * The provider is otherwise inherited from the Stash config `stashOptions.images.provider`, which defaults to `cloudinary`.\n     *\n     * When not provided, the provider is also inferred by `isStatic`:\n     *  - `static` for relative/absolute paths (`img/foo.jpg` or `/static/img/bar.jpg`), or when whitelisted absolute URLs are used (included in `staticOptions.images.staticDomains`).\n     */\n    provider?: StashImageProviders | null;\n\n    /**\n     * For applying border radius\n     */\n    radius?: ImageRadius;\n\n    /**\n     * TODO - https://leaflink.atlassian.net/browse/GRO-204\n     * A custom function used to resolve a URL string for the image\n     */\n    // loader?: () => string;\n  }\n\n  const PROVIDERS = {\n    CLOUDINARY: 'cloudinary',\n    STATIC: 'static',\n  };\n  const BREAKPOINTS = {\n    md: SCREEN_SIZES.md,\n    lg: SCREEN_SIZES.lg,\n  };\n  const stashOptions = inject<StashProvideState>('stashOptions');\n  const props = withDefaults(defineProps<ImageProps>(), {\n    src: '',\n    srcset: '',\n    sizes: '',\n    provider: null,\n    radius: 'none',\n    // loader: undefined, // TODO - https://leaflink.atlassian.net/browse/GRO-204\n  });\n\n  const attrs = computed(() => {\n    const { src, ...attrs } = useAttrs();\n\n    attrs.sizes = imgSizes.value;\n    attrs.srcset = imgSrcset.value;\n\n    return attrs;\n  });\n\n  const staticDomains = computed(() => stashOptions?.images?.staticDomains || []);\n\n  const isStaticUrl = computed(() => {\n    // return true if not an absolute url\n    try {\n      new URL(props.src);\n    } catch (e) {\n      return true;\n    }\n\n    // true if domain is whitelisted for static usage\n    return isDomainValid(props.src, staticDomains.value);\n  });\n\n  const computedProvider = computed(() => {\n    if (props.provider) {\n      return props.provider;\n    }\n\n    if (stashOptions?.images?.provider && stashOptions.images.provider !== PROVIDERS.STATIC && !isStaticUrl.value) {\n      return stashOptions.images.provider;\n    }\n\n    return PROVIDERS.STATIC;\n  });\n\n  const isStatic = computed(() => computedProvider.value === PROVIDERS.STATIC);\n\n  const imgProvider = computed(() => providers[computedProvider.value]);\n\n  const imgSrc = computed(() =>\n    isStatic.value ? getProviderImage() : getProviderImage({ width: PRESET_SIZES.medium.width }),\n  );\n\n  const imgSizes = computed(() => (props.sizes || !isStatic.value ? getSizes() : undefined));\n\n  const imgSrcset = computed(() => (props.sizes && !props.srcset && !isStatic.value ? getSources() : props.srcset));\n\n  const parsedSizes = computed(() => {\n    if (props.sizes) {\n      return parseSizes(props.sizes);\n    }\n\n    if (!isStatic.value) {\n      return parseSizes('lg:large');\n    }\n\n    return [];\n  });\n\n  function getProviderImage(modifiers: ImageModifiers = {}) {\n    return imgProvider.value.getImageUrl(props.src, modifiers);\n  }\n\n  function getSources() {\n    const appliedPresets = Object.entries(PRESET_SIZES).reduce((obj, [key, entry]) => {\n      const isPreset = !!parsedSizes.value.find((size) => size.preset === key);\n\n      if (isPreset || entry.alwaysIncluded) {\n        obj[key] = entry;\n      }\n\n      return obj;\n    }, {} as typeof PRESET_SIZES);\n\n    return Object.values(appliedPresets)\n      .map((size) => {\n        const width = size.width;\n        const src = getProviderImage({ width });\n\n        return `${src} ${size.width}w`;\n      })\n      .join(', ');\n  }\n\n  function getSizes() {\n    return parsedSizes.value.map((v) => `${v.media ? v.media + ' ' : ''}${v.size}`).join(', ');\n  }\n\n  function parseSizes(providedSizes: string) {\n    const variants: ImageSizeVariant[] = [];\n    const sizes = {\n      default: '100vw',\n    };\n\n    // parse sizes and convert to object\n    if (typeof providedSizes === 'string') {\n      const definitions = providedSizes.split(/[\\s]+/).filter((size) => size);\n\n      for (const entry of definitions) {\n        const size = entry.split(':');\n\n        if (size.length !== 2) {\n          sizes['default'] = size[0].trim();\n          continue;\n        }\n\n        sizes[size[0].trim()] = size[1].trim();\n      }\n    } else {\n      throw new Error('`sizes` needs to be a string');\n    }\n\n    for (const key in sizes) {\n      const screenMinWidth = parseInt(BREAKPOINTS[key] || 0);\n      const sizeValue = sizes[key];\n      const presetKey = PRESET_SIZES[sizeValue] ? sizeValue : undefined;\n      let size = String(presetKey ? PRESET_SIZES[sizeValue].width : sizeValue);\n      const isFluid = size.endsWith('vw');\n\n      // default integers to pixels\n      if (!isFluid && /^\\d+$/.test(size)) {\n        size = `${size}px`;\n      }\n\n      // ignore invalid size\n      if (!isFluid && !size.endsWith('px')) {\n        continue;\n      }\n\n      const variant = {\n        media: screenMinWidth ? `(min-width: ${screenMinWidth}px)` : '',\n        preset: presetKey,\n        screenMinWidth,\n        size,\n      };\n\n      variants.push(variant);\n    }\n\n    variants.sort((v1, v2) => (v1.screenMinWidth > v2.screenMinWidth ? -1 : 1));\n\n    return variants;\n  }\n</script>\n\n<template>\n  <img\n    ref=\"img\"\n    :key=\"imgSrc\"\n    data-test=\"stash-image\"\n    class=\"stash-image\"\n    :class=\"{\n      'tw-rounded': props.radius === ImageRadiuses.Rounded,\n    }\"\n    :src=\"imgSrc\"\n    v-bind=\"attrs\"\n  />\n</template>\n"],"names":["createMapper","map","key","buildProviderUrl","formatter","value","keyMap","joinWith","valueMap","keyMapper","valueKey","modifiers","mapper","newKey","newVal","isDomainValid","str","domains","host","domain","BASE_URL","IMAGE_PROVIDER_URLS","convertHextoRGBFormat","operationsGenerator","defaultModifiers","getImageUrl","src","mergeModifiers","merge","operations","providers","cloudinary","staticProvider","PRESET_SIZES","ImageRadiuses","PROVIDERS","BREAKPOINTS","SCREEN_SIZES","stashOptions","inject","attrs","computed","useAttrs","imgSizes","imgSrcset","staticDomains","_a","isStaticUrl","props","computedProvider","isStatic","imgProvider","imgSrc","getProviderImage","getSizes","getSources","parsedSizes","parseSizes","appliedPresets","obj","entry","size","width","v","providedSizes","variants","sizes","definitions","screenMinWidth","sizeValue","presetKey","isFluid","variant","v1","v2"],"mappings":";;;AAoBA,SAASA,EAAaC,GAAU;AAE9B,SAAO,CAACC,MACCD,EAAIC,CAAG,KAAKA;AAEvB;AAKO,SAASC,EAAiB;AAAA,EAC/B,WAAAC,IAAY,CAACF,GAAKG,MAAU,GAAGH,CAAG,IAAIG,CAAK;AAAA,EAC3C,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW,CAAC;AACd,IAAwB,IAAI;AAC1B,QAAMC,IAAY,OAAOH,KAAW,aAAaA,IAASN,EAAaM,CAAM;AAE7E,gBAAO,KAAKE,CAAQ,EAAE,QAAQ,CAACE,MAAa;AAC1C,IAAI,OAAOF,EAASE,CAAQ,KAAM,eAChCF,EAASE,CAAQ,IAAIV,EAAaQ,EAASE,CAAQ,CAAC;AAAA,EACtD,CACD,GAEM,CAACC,IAAuC,OAC1B,OAAO,QAAQA,CAAS,EAAE,IAAI,CAAC,CAACT,GAAKG,CAAK,MAAM;AAC3D,UAAAO,IAASJ,EAASN,CAAG,GACrBW,IAASJ,EAAUP,CAAG;AAC5B,QAAIY,IAAST;AAET,WAAA,OAAOO,KAAW,eACXE,IAAAF,EAAOD,EAAUT,CAAG,CAAC,IAGzBE,EAAUS,GAAQC,CAAM;AAAA,EAAA,CAChC,EAEiB,KAAKP,CAAQ;AAEnC;AAOO,SAASQ,EAAcC,IAAM,IAAIC,IAAoB,CAAA,GAAa;AAEvE,QAAMC,IADM,IAAI,IAAIF,CAAG,EACN;AAEV,SAAAC,EAAQ,KAAK,CAACE,MACfA,MAAWD,IACN,KAGFC,EAAO,SAAS,IAAID,CAAI,EAAE,CAClC;AACH;ACxEA,MAAME,IAAWC,EAAoB,YAE/BC,IAAwB,CAACjB,MAAmBA,EAAM,WAAW,GAAG,IAAIA,EAAM,QAAQ,KAAK,MAAM,IAAIA,GAiB1FkB,IAAsBpB,EAAiB;AAAA,EAClD,QAAQ;AAAA,IACN,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK;AAAA,EACP;AAAA,EACA,UAAU;AAAA,IACR,KAAK;AAAA,MACH,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,MACP,SAAS;AAAA,IACX;AAAA,IACA,QAAQ;AAAA,MACN,MAAM;AAAA,IACR;AAAA,IACA,WAAWE,GAAe;AACxB,aAAOiB,EAAsBjB,CAAK;AAAA,IACpC;AAAA,EACF;AAAA,EACA,UAAU;AAAA,EACV,WAAW,CAACH,GAAKG,MAAU,GAAGH,CAAG,IAAIG,CAAK;AAC5C,CAAC,GAGKmB,IAAmB;AAAA;AAAA;AAAA,EAGvB,SAAS;AACX;AAEO,SAASC,EAAYC,GAAaf,IAAqC,IAAY;AAClF,QAAAgB,IAAiBC,EAAMJ,GAAkBb,CAAS,GAClDkB,IAAaN,EAAoBI,CAAc;AAErD,SAAO,GAAGP,CAAQ,IAAIS,CAAU,IAAIH,CAAG;AACzC;;;;;;ACjEgB,SAAAD,EAAYC,IAAM,IAAY;AACrC,SAAAA;AACT;;;;8CCCeI,IAAA;AAAA,EACb,YAAAC;AAAA,EACA,QAAQC;AACV,gBCLeC,IAAe;AAAA,EAC1B,QAAQ;AAAA,IACN,gBAAgB;AAAA,IAChB,OAAO;AAAA,EACT;AAAA,EACA,OAAO;AAAA,IACL,gBAAgB;AAAA,IAChB,OAAO;AAAA,EACT;AAAA,EACA,QAAQ;AAAA,IACN,gBAAgB;AAAA,IAChB,OAAO;AAAA,EACT;AAAA,EACA,OAAO;AAAA,IACL,gBAAgB;AAAA,IAChB,OAAO;AAAA,EACT;AAAA,EACA,QAAQ;AAAA,IACN,gBAAgB;AAAA,IAChB,OAAO;AAAA,EACT;AACF;AAEY,IAAAC,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WAFAA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;iBAuENC,IAAY;AAAA,MAChB,YAAY;AAAA,MACZ,QAAQ;AAAA,IAAA,GAEJC,IAAc;AAAA,MAClB,IAAIC,EAAa;AAAA,MACjB,IAAIA,EAAa;AAAA,IAAA,GAEbC,IAAeC,EAA0B,cAAc,GAUvDC,IAAQC,EAAS,MAAM;AAC3B,YAAM,EAAE,KAAAf,GAAK,GAAGc,MAAUE,EAAS;AAEnCF,aAAAA,EAAM,QAAQG,EAAS,OACvBH,EAAM,SAASI,EAAU,OAElBJ;AAAAA,IAAA,CACR,GAEKK,IAAgBJ,EAAS,MAAM;;AAAA,eAAAK,IAAAR,KAAA,gBAAAA,EAAc,WAAd,gBAAAQ,EAAsB,kBAAiB,CAAA;AAAA,KAAE,GAExEC,IAAcN,EAAS,MAAM;AAE7B,UAAA;AACE,YAAA,IAAIO,EAAM,GAAG;AAAA,cACP;AACH,eAAA;AAAA,MACT;AAGA,aAAOjC,EAAciC,EAAM,KAAKH,EAAc,KAAK;AAAA,IAAA,CACpD,GAEKI,IAAmBR,EAAS,MAAM;;AACtC,aAAIO,EAAM,WACDA,EAAM,YAGXF,IAAAR,KAAA,gBAAAA,EAAc,WAAd,QAAAQ,EAAsB,YAAYR,EAAa,OAAO,aAAaH,EAAU,UAAU,CAACY,EAAY,QAC/FT,EAAa,OAAO,WAGtBH,EAAU;AAAA,IAAA,CAClB,GAEKe,IAAWT,EAAS,MAAMQ,EAAiB,UAAUd,EAAU,MAAM,GAErEgB,IAAcV,EAAS,MAAMX,EAAUmB,EAAiB,KAAK,CAAC,GAE9DG,IAASX;AAAA,MAAS,MACtBS,EAAS,QAAQG,MAAqBA,EAAiB,EAAE,OAAOpB,EAAa,OAAO,OAAO;AAAA,IAAA,GAGvFU,IAAWF,EAAS,MAAOO,EAAM,SAAS,CAACE,EAAS,QAAQI,MAAa,MAAU,GAEnFV,IAAYH,EAAS,MAAOO,EAAM,SAAS,CAACA,EAAM,UAAU,CAACE,EAAS,QAAQK,EAAW,IAAIP,EAAM,MAAO,GAE1GQ,IAAcf,EAAS,MACvBO,EAAM,QACDS,EAAWT,EAAM,KAAK,IAG1BE,EAAS,QAIP,KAHEO,EAAW,UAAU,CAI/B;AAEQ,aAAAJ,EAAiB1C,IAA4B,IAAI;AACxD,aAAOwC,EAAY,MAAM,YAAYH,EAAM,KAAKrC,CAAS;AAAA,IAC3D;AAEA,aAAS4C,IAAa;AACd,YAAAG,IAAiB,OAAO,QAAQzB,CAAY,EAAE,OAAO,CAAC0B,GAAK,CAACzD,GAAK0D,CAAK,QACzD,CAAC,CAACJ,EAAY,MAAM,KAAK,CAACK,MAASA,EAAK,WAAW3D,CAAG,KAEvD0D,EAAM,oBACpBD,EAAIzD,CAAG,IAAI0D,IAGND,IACN,CAAyB,CAAA;AAE5B,aAAO,OAAO,OAAOD,CAAc,EAChC,IAAI,CAACG,MAAS;AACb,cAAMC,IAAQD,EAAK;AAGnB,eAAO,GAFKR,EAAiB,EAAE,OAAAS,EAAO,CAAA,CAEzB,IAAID,EAAK,KAAK;AAAA,MAAA,CAC5B,EACA,KAAK,IAAI;AAAA,IACd;AAEA,aAASP,IAAW;AAClB,aAAOE,EAAY,MAAM,IAAI,CAACO,MAAM,GAAGA,EAAE,QAAQA,EAAE,QAAQ,MAAM,EAAE,GAAGA,EAAE,IAAI,EAAE,EAAE,KAAK,IAAI;AAAA,IAC3F;AAEA,aAASN,EAAWO,GAAuB;AACzC,YAAMC,IAA+B,CAAA,GAC/BC,IAAQ;AAAA,QACZ,SAAS;AAAA,MAAA;AAIP,UAAA,OAAOF,KAAkB,UAAU;AAC/B,cAAAG,IAAcH,EAAc,MAAM,OAAO,EAAE,OAAO,CAACH,MAASA,CAAI;AAEtE,mBAAWD,KAASO,GAAa;AACzB,gBAAAN,IAAOD,EAAM,MAAM,GAAG;AAExB,cAAAC,EAAK,WAAW,GAAG;AACrB,YAAAK,EAAM,UAAaL,EAAK,CAAC,EAAE,KAAK;AAChC;AAAA,UACF;AAEM,UAAAK,EAAAL,EAAK,CAAC,EAAE,KAAA,CAAM,IAAIA,EAAK,CAAC,EAAE;QAClC;AAAA,MAAA;AAEM,cAAA,IAAI,MAAM,8BAA8B;AAGhD,iBAAW3D,KAAOgE,GAAO;AACvB,cAAME,IAAiB,SAAShC,EAAYlC,CAAG,KAAK,CAAC,GAC/CmE,IAAYH,EAAMhE,CAAG,GACrBoE,IAAYrC,EAAaoC,CAAS,IAAIA,IAAY;AACxD,YAAIR,IAAO,OAAOS,IAAYrC,EAAaoC,CAAS,EAAE,QAAQA,CAAS;AACjE,cAAAE,IAAUV,EAAK,SAAS,IAAI;AAQlC,YALI,CAACU,KAAW,QAAQ,KAAKV,CAAI,MAC/BA,IAAO,GAAGA,CAAI,OAIZ,CAACU,KAAW,CAACV,EAAK,SAAS,IAAI;AACjC;AAGF,cAAMW,IAAU;AAAA,UACd,OAAOJ,IAAiB,eAAeA,CAAc,QAAQ;AAAA,UAC7D,QAAQE;AAAA,UACR,gBAAAF;AAAA,UACA,MAAAP;AAAA,QAAA;AAGF,QAAAI,EAAS,KAAKO,CAAO;AAAA,MACvB;AAES,aAAAP,EAAA,KAAK,CAACQ,GAAIC,MAAQD,EAAG,iBAAiBC,EAAG,iBAAiB,KAAK,CAAE,GAEnET;AAAA,IACT;;;;;;;;;;;;;"}

package/dist/InlineEdit.js

@@ -5,9 +5,9 @@ import "./constants.js";
 import "./locale.js";
 import "lodash-es/get";
 import "lodash-es/isNil";
-import "./Field.vue_vue_type_script_setup_true_lang-4483019d.js";
+import "./Field.vue_vue_type_script_setup_true_lang-42ba3c5a.js";
 import "lodash-es/uniqueId";
-import "./Label.vue_vue_type_script_setup_true_lang-2de35913.js";
+import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
 import "./Icon.js";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";