@leaflink/stash 50.0.8 → 50.1.0

package/dist/Image.js

@@ -1,15 +1,15 @@
-import { defineComponent as W, inject as A, computed as a, useAttrs as M, openBlock as B, createElementBlock as k, mergeProps as C, unref as L } from "vue";
-import { IMAGE_PROVIDER_URLS as N, SCREEN_SIZES as y } from "./constants.js";
+import { defineComponent as W, inject as C, computed as a, useAttrs as M, openBlock as B, createElementBlock as k, mergeProps as L, unref as $ } from "vue";
+import { IMAGE_PROVIDER_URLS as N, SCREEN_SIZES as w } from "./constants.js";
 import q from "lodash-es/merge";
-const $ = {
+const j = {
   xs: 160,
   sm: 338,
   md: 676,
   lg: 1352,
   xl: 2704
 };
-var w = /* @__PURE__ */ ((t) => (t.None = "none", t.Rounded = "rounded", t))(w || {}), z = /* @__PURE__ */ ((t) => (t.Cloudinary = "cloudinary", t.Static = "static", t))(z || {});
-function j(t) {
+var z = /* @__PURE__ */ ((t) => (t.None = "none", t.Rounded = "rounded", t.Circle = "circle", t))(z || {}), b = /* @__PURE__ */ ((t) => (t.Cloudinary = "cloudinary", t.Static = "static", t))(b || {});
+function P(t) {
   return (s) => t[s] || s;
 }
 function G({
@@ -18,16 +18,16 @@ function G({
   joinWith: i = "/",
   valueMap: e = {}
 } = {}) {
-  const m = typeof s == "function" ? s : j(s || {});
+  const m = typeof s == "function" ? s : P(s || {});
   return Object.keys(e).forEach((c) => {
-    typeof e[c] != "function" && (e[c] = j(e[c]));
-  }), (c = {}) => Object.entries(c).map(([d, l]) => {
-    const p = e[d], g = m(d);
-    let v = l;
-    return typeof p == "function" && (v = p(c[d])), t(g, v);
+    typeof e[c] != "function" && (e[c] = P(e[c]));
+  }), (c = {}) => Object.entries(c).map(([l, d]) => {
+    const p = e[l], g = m(l);
+    let v = d;
+    return typeof p == "function" && (v = p(c[l])), t(g, v);
   }).join(i);
 }
-const Q = N.CLOUDINARY, T = (t) => t.startsWith("#") ? t.replace("#", "rgb_") : t, P = G({
+const Q = N.CLOUDINARY, T = (t) => t.startsWith("#") ? t.replace("#", "rgb_") : t, E = G({
   keyMap: {
     fit: "c",
     width: "w",
@@ -59,13 +59,13 @@ const Q = N.CLOUDINARY, T = (t) => t.startsWith("#") ? t.replace("#", "rgb_") :
   quality: "auto:best"
 };
 function F(t, s = {}) {
-  const i = q(D, s), e = P(i);
+  const i = q(D, s), e = E(i);
   return `${Q}/${e}/${t}`;
 }
 const V = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   getImageUrl: F,
-  operationsGenerator: P
+  operationsGenerator: E
 }, Symbol.toStringTag, { value: "Module" }));
 function H(t = "") {
   return t;
@@ -77,6 +77,7 @@ const Y = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   cloudinary: V,
   static: Y
 }, J = ["src"], et = /* @__PURE__ */ W({
+  inheritAttrs: !1,
   __name: "Image",
   props: {
     src: { default: "" },
@@ -88,11 +89,11 @@ const Y = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   },
   setup(t) {
     const s = {
-      md: y.md,
-      lg: y.lg
-    }, i = A("stashOptions"), e = t, m = a(() => {
+      md: w.md,
+      lg: w.lg
+    }, i = C("stashOptions"), e = t, m = a(() => {
       const { src: r, ...n } = M();
-      return n.sizes = v.value, n.srcset = E.value, n;
+      return n.sizes = v.value, n.srcset = I.value, n;
     }), c = a(() => {
       try {
         return new URL(e.src), !0;
@@ -101,22 +102,22 @@ const Y = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       }
     }), S = a(() => {
       var r;
-      return e.provider || ((r = i == null ? void 0 : i.images) == null ? void 0 : r.provider) || z.Static;
-    }), d = a(() => e.staticPath ?? (i == null ? void 0 : i.staticPath)), l = a(() => S.value === z.Static), p = a(() => Z[S.value]), g = a(() => l.value ? _() : _({ width: $.md })), v = a(() => e.sizes ? U() : e.sizes), E = a(() => e.sizes && !e.srcset && !l.value ? R() : e.srcset), I = a(() => e.sizes ? O(e.sizes) : []);
+      return e.provider || ((r = i == null ? void 0 : i.images) == null ? void 0 : r.provider) || b.Static;
+    }), l = a(() => e.staticPath ?? (i == null ? void 0 : i.staticPath)), d = a(() => S.value === b.Static), p = a(() => Z[S.value]), g = a(() => d.value ? _() : _({ width: j.md })), v = a(() => e.sizes ? O() : e.sizes), I = a(() => e.sizes && !e.srcset && !d.value ? R() : e.srcset), U = a(() => e.sizes ? x(e.sizes) : []);
     function _(r = {}) {
-      if (l.value && c.value)
+      if (d.value && c.value)
         return e.src;
-      const n = l.value && d.value ? `${d.value}/${e.src}` : e.src;
+      const n = d.value && l.value ? `${l.value}/${e.src}` : e.src;
       return p.value.getImageUrl(n, r);
     }
     function R() {
-      return Object.values($).map((r) => `${_({ width: r })} ${r}w`).join(", ");
+      return Object.values(j).map((r) => `${_({ width: r })} ${r}w`).join(", ");
     }
-    function U() {
+    function O() {
       var r;
-      return (r = e.sizes) != null && r.includes("(") ? e.sizes : I.value.map((n) => `${n.mediaQuery ? n.mediaQuery + " " : ""}${n.size}`).join(", ");
+      return (r = e.sizes) != null && r.includes("(") ? e.sizes : U.value.map((n) => `${n.mediaQuery ? n.mediaQuery + " " : ""}${n.size}`).join(", ");
     }
-    function O(r = "") {
+    function x(r = "") {
       const n = [], h = {
         default: "100vw"
       };
@@ -135,33 +136,34 @@ const Y = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       for (const f in h) {
         const u = parseInt(s[f] || 0);
         let o = String(h[f]);
-        const b = o.endsWith("vw");
-        if (!b && /^\d+$/.test(o) && (o = `${o}px`), !b && o.endsWith("%"))
+        const y = o.endsWith("vw");
+        if (!y && /^\d+$/.test(o) && (o = `${o}px`), !y && o.endsWith("%"))
           throw new Error("Image: `sizes` does not support percentage values");
-        const x = {
+        const A = {
           mediaQuery: u ? `(min-width: ${u}px)` : "",
           screenMinWidth: u,
           size: o
         };
-        n.push(x);
+        n.push(A);
       }
       return n.sort((f, u) => f.screenMinWidth > u.screenMinWidth ? -1 : 1), n;
     }
-    return (r, n) => (B(), k("img", C({
+    return (r, n) => (B(), k("img", L({
       ref: "img",
       key: g.value,
       "data-test": "stash-image",
       class: ["stash-image", {
-        "tw-rounded": e.radius === L(w).Rounded
+        "tw-rounded": e.radius === $(z).Rounded,
+        "tw-rounded-full": e.radius === $(z).Circle
       }],
       src: g.value
     }, m.value), null, 16, J));
   }
 });
 export {
-  z as ImageProviders,
-  w as ImageRadius,
-  $ as Screens,
+  b as ImageProviders,
+  z as ImageRadius,
+  j as Screens,
   et as default
 };
 //# sourceMappingURL=Image.js.map

package/dist/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sources":["../src/components/Image/Image.types.ts","../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":["// Sizes used to generate resized and optimized versions of an image.\n// Generated in `srcset`, and informed by `sizes`.\nexport const Screens = {\n  xs: 160,\n  sm: 338,\n  md: 676,\n  lg: 1352,\n  xl: 2704,\n} as const;\n\nexport interface ImageSizeCondition {\n  mediaQuery: string;\n  screenMinWidth: number;\n  size: string;\n}\n\nexport enum ImageRadius {\n  None = 'none',\n  Rounded = 'rounded',\n}\n\nexport type ImageRadii = `${ImageRadius}`;\n\nexport enum ImageProviders {\n  Cloudinary = 'cloudinary',\n  Static = 'static',\n}\n","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: ParamMapper) {\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  format: 'auto',\n  quality: 'auto:best',\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 * from './Image.types';\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 { ImageProviders, ImageRadii, ImageRadius, ImageSizeCondition, Screens } from './Image.types';\n  import providers from './providers';\n  import { ImageModifiers } from './providers/utils';\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     * If not provided, the provider will inherit from the Stash config `stashOptions.images.provider` (default: `static`).\n     *  - `static` for relative or absolute paths\n     *  - `cloudinary` for images served via Cloudinary\n     */\n    provider?: StashImageProviders;\n\n    /**\n     * For applying border radius\n     */\n    radius?: ImageRadii;\n\n    /**\n     * A custom static path the image src will be appended onto when provider=static.\n     * Can be used to override the library-level default.\n     */\n    staticPath?: string;\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 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: undefined,\n    sizes: undefined,\n    staticPath: undefined,\n    provider: undefined,\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 isAbsoluteUrl = computed(() => {\n    // return true if not an absolute url\n    try {\n      new URL(props.src);\n      return true;\n    } catch (e) {\n      return false;\n    }\n  });\n\n  const computedProvider = computed(() => props.provider || stashOptions?.images?.provider || ImageProviders.Static);\n\n  const computedStaticPath = computed(() => props.staticPath ?? stashOptions?.staticPath);\n\n  const isStatic = computed(() => computedProvider.value === ImageProviders.Static);\n\n  const imgProvider = computed(() => providers[computedProvider.value]);\n\n  const imgSrc = computed(() => (isStatic.value ? getProviderImage() : getProviderImage({ width: Screens.md })));\n\n  const imgSizes = computed(() => (props.sizes ? getSizes() : props.sizes));\n\n  const imgSrcset = computed(() => (props.sizes && !props.srcset && !isStatic.value ? getSources() : props.srcset));\n\n  const parsedSizes = computed(() => {\n    return props.sizes ? parseSizes(props.sizes) : [];\n  });\n\n  function getProviderImage(modifiers: ImageModifiers = {}) {\n    if (isStatic.value && isAbsoluteUrl.value) {\n      return props.src;\n    }\n\n    const src = isStatic.value && computedStaticPath.value ? `${computedStaticPath.value}/${props.src}` : props.src;\n\n    return imgProvider.value.getImageUrl(src, modifiers);\n  }\n\n  function getSources() {\n    return Object.values(Screens)\n      .map((width) => {\n        const src = getProviderImage({ width });\n\n        return `${src} ${width}w`;\n      })\n      .join(', ');\n  }\n\n  function getSizes() {\n    // return if using native media conditions\n    if (props.sizes?.includes('(')) {\n      return props.sizes;\n    }\n\n    return parsedSizes.value.map((v) => `${v.mediaQuery ? v.mediaQuery + ' ' : ''}${v.size}`).join(', ');\n  }\n\n  function parseSizes(providedSizes = '') {\n    const conditions: ImageSizeCondition[] = [];\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      let size = String(sizes[key]);\n      const isFluidSize = size.endsWith('vw');\n\n      // convert integer to pixels\n      if (!isFluidSize && /^\\d+$/.test(size)) {\n        size = `${size}px`;\n      }\n\n      if (!isFluidSize && size.endsWith('%')) {\n        throw new Error('Image: `sizes` does not support percentage values');\n      }\n\n      const condition = {\n        mediaQuery: screenMinWidth ? `(min-width: ${screenMinWidth}px)` : '',\n        screenMinWidth,\n        size,\n      };\n\n      conditions.push(condition);\n    }\n\n    conditions.sort((v1, v2) => (v1.screenMinWidth > v2.screenMinWidth ? -1 : 1));\n\n    return conditions;\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 === ImageRadius.Rounded,\n    }\"\n    :src=\"imgSrc\"\n    v-bind=\"attrs\"\n  />\n</template>\n"],"names":["Screens","ImageRadius","ImageProviders","createMapper","map","key","buildProviderUrl","formatter","value","keyMap","joinWith","valueMap","keyMapper","valueKey","modifiers","mapper","newKey","newVal","BASE_URL","IMAGE_PROVIDER_URLS","convertHextoRGBFormat","operationsGenerator","defaultModifiers","getImageUrl","src","mergeModifiers","merge","operations","providers","cloudinary","staticProvider","BREAKPOINTS","SCREEN_SIZES","stashOptions","inject","props","__props","attrs","computed","useAttrs","imgSizes","imgSrcset","isAbsoluteUrl","computedProvider","_a","computedStaticPath","isStatic","imgProvider","imgSrc","getProviderImage","getSizes","getSources","parsedSizes","parseSizes","width","v","providedSizes","conditions","sizes","definitions","size","entry","screenMinWidth","isFluidSize","condition","v1","v2"],"mappings":";;;AAEO,MAAMA,IAAU;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAQY,IAAAC,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WAFAA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACVA,EAAA,aAAa,cACbA,EAAA,SAAS,UAFCA,IAAAA,KAAA,CAAA,CAAA;ACHZ,SAASC,EAAaC,GAAkB;AACtC,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;AACpB,QAAAC,IAAY,OAAOH,KAAW,aAAaA,IAASN,EAAaM,KAAU,CAAA,CAAE;AAEnF,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;ACrDA,MAAMQ,IAAWC,EAAoB,YAE/BC,IAAwB,CAACZ,MAAmBA,EAAM,WAAW,GAAG,IAAIA,EAAM,QAAQ,KAAK,MAAM,IAAIA,GAiB1Fa,IAAsBf,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,aAAOY,EAAsBZ,CAAK;AAAA,IACpC;AAAA,EACF;AAAA,EACA,UAAU;AAAA,EACV,WAAW,CAACH,GAAKG,MAAU,GAAGH,CAAG,IAAIG,CAAK;AAC5C,CAAC,GAGKc,IAAmB;AAAA,EACvB,QAAQ;AAAA,EACR,SAAS;AACX;AAEO,SAASC,EAAYC,GAAaV,IAAqC,IAAY;AAClF,QAAAW,IAAiBC,EAAMJ,GAAkBR,CAAS,GAClDa,IAAaN,EAAoBI,CAAc;AAErD,SAAO,GAAGP,CAAQ,IAAIS,CAAU,IAAIH,CAAG;AACzC;;;;;;AChEgB,SAAAD,EAAYC,IAAM,IAAY;AACrC,SAAAA;AACT;;;;8CCCeI,IAAA;AAAA,EACb,YAAAC;AAAA,EACA,QAAQC;AACV;;;;;;;;;;;ACmDE,UAAMC,IAAc;AAAA,MAClB,IAAIC,EAAa;AAAA,MACjB,IAAIA,EAAa;AAAA,IAAA,GAEbC,IAAeC,EAA0B,cAAc,GACvDC,IAAQC,GAURC,IAAQC,EAAS,MAAM;AAC3B,YAAM,EAAE,KAAAd,GAAK,GAAGa,MAAUE,EAAS;AAEnCF,aAAAA,EAAM,QAAQG,EAAS,OACvBH,EAAM,SAASI,EAAU,OAElBJ;AAAAA,IAAA,CACR,GAEKK,IAAgBJ,EAAS,MAAM;AAE/B,UAAA;AACE,mBAAA,IAAIH,EAAM,GAAG,GACV;AAAA,cACG;AACH,eAAA;AAAA,MACT;AAAA,IAAA,CACD,GAEKQ,IAAmBL,EAAS,MAAM;;AAAA,aAAAH,EAAM,cAAYS,IAAAX,KAAA,gBAAAA,EAAc,WAAd,gBAAAW,EAAsB,aAAY1C,EAAe;AAAA,KAAM,GAE3G2C,IAAqBP,EAAS,MAAMH,EAAM,eAAcF,KAAA,gBAAAA,EAAc,WAAU,GAEhFa,IAAWR,EAAS,MAAMK,EAAiB,UAAUzC,EAAe,MAAM,GAE1E6C,IAAcT,EAAS,MAAMV,EAAUe,EAAiB,KAAK,CAAC,GAE9DK,IAASV,EAAS,MAAOQ,EAAS,QAAQG,EAAA,IAAqBA,EAAiB,EAAE,OAAOjD,EAAQ,GAAA,CAAI,CAAE,GAEvGwC,IAAWF,EAAS,MAAOH,EAAM,QAAQe,EAAS,IAAIf,EAAM,KAAM,GAElEM,IAAYH,EAAS,MAAOH,EAAM,SAAS,CAACA,EAAM,UAAU,CAACW,EAAS,QAAQK,EAAW,IAAIhB,EAAM,MAAO,GAE1GiB,IAAcd,EAAS,MACpBH,EAAM,QAAQkB,EAAWlB,EAAM,KAAK,IAAI,EAChD;AAEQ,aAAAc,EAAiBnC,IAA4B,IAAI;AACpD,UAAAgC,EAAS,SAASJ,EAAc;AAClC,eAAOP,EAAM;AAGf,YAAMX,IAAMsB,EAAS,SAASD,EAAmB,QAAQ,GAAGA,EAAmB,KAAK,IAAIV,EAAM,GAAG,KAAKA,EAAM;AAE5G,aAAOY,EAAY,MAAM,YAAYvB,GAAKV,CAAS;AAAA,IACrD;AAEA,aAASqC,IAAa;AACpB,aAAO,OAAO,OAAOnD,CAAO,EACzB,IAAI,CAACsD,MAGG,GAFKL,EAAiB,EAAE,OAAAK,EAAO,CAAA,CAEzB,IAAIA,CAAK,GACvB,EACA,KAAK,IAAI;AAAA,IACd;AAEA,aAASJ,IAAW;;AAElB,cAAIN,IAAAT,EAAM,UAAN,QAAAS,EAAa,SAAS,OACjBT,EAAM,QAGRiB,EAAY,MAAM,IAAI,CAACG,MAAM,GAAGA,EAAE,aAAaA,EAAE,aAAa,MAAM,EAAE,GAAGA,EAAE,IAAI,EAAE,EAAE,KAAK,IAAI;AAAA,IACrG;AAES,aAAAF,EAAWG,IAAgB,IAAI;AACtC,YAAMC,IAAmC,CAAA,GACnCC,IAAQ;AAAA,QACZ,SAAS;AAAA,MAAA;AAIP,UAAA,OAAOF,KAAkB,UAAU;AAC/B,cAAAG,IAAcH,EAAc,MAAM,OAAO,EAAE,OAAO,CAACI,MAASA,CAAI;AAEtE,mBAAWC,KAASF,GAAa;AACzB,gBAAAC,IAAOC,EAAM,MAAM,GAAG;AAExB,cAAAD,EAAK,WAAW,GAAG;AACrB,YAAAF,EAAM,UAAaE,EAAK,CAAC,EAAE,KAAK;AAChC;AAAA,UACF;AAEM,UAAAF,EAAAE,EAAK,CAAC,EAAE,KAAA,CAAM,IAAIA,EAAK,CAAC,EAAE;QAClC;AAAA,MAAA;AAEM,cAAA,IAAI,MAAM,8BAA8B;AAGhD,iBAAWvD,KAAOqD,GAAO;AACvB,cAAMI,IAAiB,SAAS/B,EAAY1B,CAAG,KAAK,CAAC;AACrD,YAAIuD,IAAO,OAAOF,EAAMrD,CAAG,CAAC;AACtB,cAAA0D,IAAcH,EAAK,SAAS,IAAI;AAOtC,YAJI,CAACG,KAAe,QAAQ,KAAKH,CAAI,MACnCA,IAAO,GAAGA,CAAI,OAGZ,CAACG,KAAeH,EAAK,SAAS,GAAG;AAC7B,gBAAA,IAAI,MAAM,mDAAmD;AAGrE,cAAMI,IAAY;AAAA,UAChB,YAAYF,IAAiB,eAAeA,CAAc,QAAQ;AAAA,UAClE,gBAAAA;AAAA,UACA,MAAAF;AAAA,QAAA;AAGF,QAAAH,EAAW,KAAKO,CAAS;AAAA,MAC3B;AAEW,aAAAP,EAAA,KAAK,CAACQ,GAAIC,MAAQD,EAAG,iBAAiBC,EAAG,iBAAiB,KAAK,CAAE,GAErET;AAAA,IACT;;;;;;;;;;;;"}
+{"version":3,"file":"Image.js","sources":["../src/components/Image/Image.types.ts","../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":["// Sizes used to generate resized and optimized versions of an image.\n// Generated in `srcset`, and informed by `sizes`.\nexport const Screens = {\n  xs: 160,\n  sm: 338,\n  md: 676,\n  lg: 1352,\n  xl: 2704,\n} as const;\n\nexport interface ImageSizeCondition {\n  mediaQuery: string;\n  screenMinWidth: number;\n  size: string;\n}\n\nexport enum ImageRadius {\n  None = 'none',\n  Rounded = 'rounded',\n  Circle = 'circle',\n}\n\nexport type ImageRadii = `${ImageRadius}`;\n\nexport enum ImageProviders {\n  Cloudinary = 'cloudinary',\n  Static = 'static',\n}\n","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: ParamMapper) {\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  format: 'auto',\n  quality: 'auto:best',\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 * from './Image.types';\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 { ImageProviders, ImageRadii, ImageRadius, ImageSizeCondition, Screens } from './Image.types';\n  import providers from './providers';\n  import { ImageModifiers } from './providers/utils';\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     * If not provided, the provider will inherit from the Stash config `stashOptions.images.provider` (default: `static`).\n     *  - `static` for relative or absolute paths\n     *  - `cloudinary` for images served via Cloudinary\n     */\n    provider?: StashImageProviders;\n\n    /**\n     * For applying border radius\n     */\n    radius?: ImageRadii;\n\n    /**\n     * A custom static path the image src will be appended onto when provider=static.\n     * Can be used to override the library-level default.\n     */\n    staticPath?: string;\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  defineOptions({\n    inheritAttrs: false,\n  });\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: undefined,\n    sizes: undefined,\n    staticPath: undefined,\n    provider: undefined,\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 isAbsoluteUrl = computed(() => {\n    // return true if not an absolute url\n    try {\n      new URL(props.src);\n      return true;\n    } catch (e) {\n      return false;\n    }\n  });\n\n  const computedProvider = computed(() => props.provider || stashOptions?.images?.provider || ImageProviders.Static);\n\n  const computedStaticPath = computed(() => props.staticPath ?? stashOptions?.staticPath);\n\n  const isStatic = computed(() => computedProvider.value === ImageProviders.Static);\n\n  const imgProvider = computed(() => providers[computedProvider.value]);\n\n  const imgSrc = computed(() => (isStatic.value ? getProviderImage() : getProviderImage({ width: Screens.md })));\n\n  const imgSizes = computed(() => (props.sizes ? getSizes() : props.sizes));\n\n  const imgSrcset = computed(() => (props.sizes && !props.srcset && !isStatic.value ? getSources() : props.srcset));\n\n  const parsedSizes = computed(() => {\n    return props.sizes ? parseSizes(props.sizes) : [];\n  });\n\n  function getProviderImage(modifiers: ImageModifiers = {}) {\n    if (isStatic.value && isAbsoluteUrl.value) {\n      return props.src;\n    }\n\n    const src = isStatic.value && computedStaticPath.value ? `${computedStaticPath.value}/${props.src}` : props.src;\n\n    return imgProvider.value.getImageUrl(src, modifiers);\n  }\n\n  function getSources() {\n    return Object.values(Screens)\n      .map((width) => {\n        const src = getProviderImage({ width });\n\n        return `${src} ${width}w`;\n      })\n      .join(', ');\n  }\n\n  function getSizes() {\n    // return if using native media conditions\n    if (props.sizes?.includes('(')) {\n      return props.sizes;\n    }\n\n    return parsedSizes.value.map((v) => `${v.mediaQuery ? v.mediaQuery + ' ' : ''}${v.size}`).join(', ');\n  }\n\n  function parseSizes(providedSizes = '') {\n    const conditions: ImageSizeCondition[] = [];\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      let size = String(sizes[key]);\n      const isFluidSize = size.endsWith('vw');\n\n      // convert integer to pixels\n      if (!isFluidSize && /^\\d+$/.test(size)) {\n        size = `${size}px`;\n      }\n\n      if (!isFluidSize && size.endsWith('%')) {\n        throw new Error('Image: `sizes` does not support percentage values');\n      }\n\n      const condition = {\n        mediaQuery: screenMinWidth ? `(min-width: ${screenMinWidth}px)` : '',\n        screenMinWidth,\n        size,\n      };\n\n      conditions.push(condition);\n    }\n\n    conditions.sort((v1, v2) => (v1.screenMinWidth > v2.screenMinWidth ? -1 : 1));\n\n    return conditions;\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 === ImageRadius.Rounded,\n      'tw-rounded-full': props.radius === ImageRadius.Circle,\n    }\"\n    :src=\"imgSrc\"\n    v-bind=\"attrs\"\n  />\n</template>\n"],"names":["Screens","ImageRadius","ImageProviders","createMapper","map","key","buildProviderUrl","formatter","value","keyMap","joinWith","valueMap","keyMapper","valueKey","modifiers","mapper","newKey","newVal","BASE_URL","IMAGE_PROVIDER_URLS","convertHextoRGBFormat","operationsGenerator","defaultModifiers","getImageUrl","src","mergeModifiers","merge","operations","providers","cloudinary","staticProvider","BREAKPOINTS","SCREEN_SIZES","stashOptions","inject","props","__props","attrs","computed","useAttrs","imgSizes","imgSrcset","isAbsoluteUrl","computedProvider","_a","computedStaticPath","isStatic","imgProvider","imgSrc","getProviderImage","getSizes","getSources","parsedSizes","parseSizes","width","v","providedSizes","conditions","sizes","definitions","size","entry","screenMinWidth","isFluidSize","condition","v1","v2"],"mappings":";;;AAEO,MAAMA,IAAU;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAQY,IAAAC,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,SAAS,UAHCA,IAAAA,KAAA,CAAA,CAAA,GAQAC,sBAAAA,OACVA,EAAA,aAAa,cACbA,EAAA,SAAS,UAFCA,IAAAA,KAAA,CAAA,CAAA;ACJZ,SAASC,EAAaC,GAAkB;AACtC,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;AACpB,QAAAC,IAAY,OAAOH,KAAW,aAAaA,IAASN,EAAaM,KAAU,CAAA,CAAE;AAEnF,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;ACrDA,MAAMQ,IAAWC,EAAoB,YAE/BC,IAAwB,CAACZ,MAAmBA,EAAM,WAAW,GAAG,IAAIA,EAAM,QAAQ,KAAK,MAAM,IAAIA,GAiB1Fa,IAAsBf,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,aAAOY,EAAsBZ,CAAK;AAAA,IACpC;AAAA,EACF;AAAA,EACA,UAAU;AAAA,EACV,WAAW,CAACH,GAAKG,MAAU,GAAGH,CAAG,IAAIG,CAAK;AAC5C,CAAC,GAGKc,IAAmB;AAAA,EACvB,QAAQ;AAAA,EACR,SAAS;AACX;AAEO,SAASC,EAAYC,GAAaV,IAAqC,IAAY;AAClF,QAAAW,IAAiBC,EAAMJ,GAAkBR,CAAS,GAClDa,IAAaN,EAAoBI,CAAc;AAErD,SAAO,GAAGP,CAAQ,IAAIS,CAAU,IAAIH,CAAG;AACzC;;;;;;AChEgB,SAAAD,EAAYC,IAAM,IAAY;AACrC,SAAAA;AACT;;;;8CCCeI,IAAA;AAAA,EACb,YAAAC;AAAA,EACA,QAAQC;AACV;;;;;;;;;;;;ACuDE,UAAMC,IAAc;AAAA,MAClB,IAAIC,EAAa;AAAA,MACjB,IAAIA,EAAa;AAAA,IAAA,GAEbC,IAAeC,EAA0B,cAAc,GACvDC,IAAQC,GAURC,IAAQC,EAAS,MAAM;AAC3B,YAAM,EAAE,KAAAd,GAAK,GAAGa,MAAUE,EAAS;AAEnCF,aAAAA,EAAM,QAAQG,EAAS,OACvBH,EAAM,SAASI,EAAU,OAElBJ;AAAAA,IAAA,CACR,GAEKK,IAAgBJ,EAAS,MAAM;AAE/B,UAAA;AACE,mBAAA,IAAIH,EAAM,GAAG,GACV;AAAA,cACG;AACH,eAAA;AAAA,MACT;AAAA,IAAA,CACD,GAEKQ,IAAmBL,EAAS,MAAM;;AAAA,aAAAH,EAAM,cAAYS,IAAAX,KAAA,gBAAAA,EAAc,WAAd,gBAAAW,EAAsB,aAAY1C,EAAe;AAAA,KAAM,GAE3G2C,IAAqBP,EAAS,MAAMH,EAAM,eAAcF,KAAA,gBAAAA,EAAc,WAAU,GAEhFa,IAAWR,EAAS,MAAMK,EAAiB,UAAUzC,EAAe,MAAM,GAE1E6C,IAAcT,EAAS,MAAMV,EAAUe,EAAiB,KAAK,CAAC,GAE9DK,IAASV,EAAS,MAAOQ,EAAS,QAAQG,EAAA,IAAqBA,EAAiB,EAAE,OAAOjD,EAAQ,GAAA,CAAI,CAAE,GAEvGwC,IAAWF,EAAS,MAAOH,EAAM,QAAQe,EAAS,IAAIf,EAAM,KAAM,GAElEM,IAAYH,EAAS,MAAOH,EAAM,SAAS,CAACA,EAAM,UAAU,CAACW,EAAS,QAAQK,EAAW,IAAIhB,EAAM,MAAO,GAE1GiB,IAAcd,EAAS,MACpBH,EAAM,QAAQkB,EAAWlB,EAAM,KAAK,IAAI,EAChD;AAEQ,aAAAc,EAAiBnC,IAA4B,IAAI;AACpD,UAAAgC,EAAS,SAASJ,EAAc;AAClC,eAAOP,EAAM;AAGf,YAAMX,IAAMsB,EAAS,SAASD,EAAmB,QAAQ,GAAGA,EAAmB,KAAK,IAAIV,EAAM,GAAG,KAAKA,EAAM;AAE5G,aAAOY,EAAY,MAAM,YAAYvB,GAAKV,CAAS;AAAA,IACrD;AAEA,aAASqC,IAAa;AACpB,aAAO,OAAO,OAAOnD,CAAO,EACzB,IAAI,CAACsD,MAGG,GAFKL,EAAiB,EAAE,OAAAK,EAAO,CAAA,CAEzB,IAAIA,CAAK,GACvB,EACA,KAAK,IAAI;AAAA,IACd;AAEA,aAASJ,IAAW;;AAElB,cAAIN,IAAAT,EAAM,UAAN,QAAAS,EAAa,SAAS,OACjBT,EAAM,QAGRiB,EAAY,MAAM,IAAI,CAACG,MAAM,GAAGA,EAAE,aAAaA,EAAE,aAAa,MAAM,EAAE,GAAGA,EAAE,IAAI,EAAE,EAAE,KAAK,IAAI;AAAA,IACrG;AAES,aAAAF,EAAWG,IAAgB,IAAI;AACtC,YAAMC,IAAmC,CAAA,GACnCC,IAAQ;AAAA,QACZ,SAAS;AAAA,MAAA;AAIP,UAAA,OAAOF,KAAkB,UAAU;AAC/B,cAAAG,IAAcH,EAAc,MAAM,OAAO,EAAE,OAAO,CAACI,MAASA,CAAI;AAEtE,mBAAWC,KAASF,GAAa;AACzB,gBAAAC,IAAOC,EAAM,MAAM,GAAG;AAExB,cAAAD,EAAK,WAAW,GAAG;AACrB,YAAAF,EAAM,UAAaE,EAAK,CAAC,EAAE,KAAK;AAChC;AAAA,UACF;AAEM,UAAAF,EAAAE,EAAK,CAAC,EAAE,KAAA,CAAM,IAAIA,EAAK,CAAC,EAAE;QAClC;AAAA,MAAA;AAEM,cAAA,IAAI,MAAM,8BAA8B;AAGhD,iBAAWvD,KAAOqD,GAAO;AACvB,cAAMI,IAAiB,SAAS/B,EAAY1B,CAAG,KAAK,CAAC;AACrD,YAAIuD,IAAO,OAAOF,EAAMrD,CAAG,CAAC;AACtB,cAAA0D,IAAcH,EAAK,SAAS,IAAI;AAOtC,YAJI,CAACG,KAAe,QAAQ,KAAKH,CAAI,MACnCA,IAAO,GAAGA,CAAI,OAGZ,CAACG,KAAeH,EAAK,SAAS,GAAG;AAC7B,gBAAA,IAAI,MAAM,mDAAmD;AAGrE,cAAMI,IAAY;AAAA,UAChB,YAAYF,IAAiB,eAAeA,CAAc,QAAQ;AAAA,UAClE,gBAAAA;AAAA,UACA,MAAAF;AAAA,QAAA;AAGF,QAAAH,EAAW,KAAKO,CAAS;AAAA,MAC3B;AAEW,aAAAP,EAAA,KAAK,CAACQ,GAAIC,MAAQD,EAAG,iBAAiBC,EAAG,iBAAiB,KAAK,CAAE,GAErET;AAAA,IACT;;;;;;;;;;;;;"}

package/dist/Image.vue.d.ts

@@ -43,7 +43,7 @@ radius: string;
 }>>> & Readonly<{}>, {
 staticPath: string;
 src: string;
-radius: "none" | "rounded";
+radius: "circle" | "none" | "rounded";
 srcset: string;
 sizes: string;
 provider: "static" | "cloudinary";
@@ -92,7 +92,8 @@ export declare type ImageRadii = `${ImageRadius}`;
 
 export declare enum ImageRadius {
     None = "none",
-    Rounded = "rounded"
+    Rounded = "rounded",
+    Circle = "circle"
 }
 
 export declare interface ImageSizeCondition {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leaflink/stash",
-  "version": "50.0.8",
+  "version": "50.1.0",
   "description": "LeafLink's design system.",
   "homepage": "https://stash.leaflink.com",
   "main": "./dist/index.ts",