@kong/icons 1.15.3-pr.391.3fb3a01.0 → 1.15.3-pr.391.ed1a789.0

package/dist/kong-icons.es1156.js

@@ -1,6 +1,6 @@
 import { defineComponent as x, ref as z, computed as h, onMounted as I, openBlock as f, createBlock as N, resolveDynamicComponent as _, normalizeStyle as w, withCtx as E, createElementBlock as m, toDisplayString as q, createCommentVNode as L, pushScopeId as M, popScopeId as A, createElementVNode as i } from "vue";
 import { KUI_ICON_SIZE_50 as y } from "./kong-icons.es1218.js";
-const S = (e) => (M("data-v-766e53d3"), e = e(), A(), e), H = ["aria-hidden"], D = {
+const S = (e) => (M("data-v-0d649a77"), e = e(), A(), e), H = ["aria-hidden"], D = {
   key: 0,
   "data-testid": "kui-icon-svg-title"
 }, Z = /* @__PURE__ */ S(() => /* @__PURE__ */ i("g", { "clip-path": "url(#clip0_247_6267)" }, [
@@ -86,7 +86,10 @@ const S = (e) => (M("data-v-766e53d3"), e = e(), A(), e), H = ["aria-hidden"], D
       required: !1,
       default: "span"
     },
-    /** A boolean to enable prefixing any internal SVGs with a unique string; useful when there are potentially multiple SVG instances on the same page and the SVG utilizes IDs and references internally (e.g. in the `<defs>` tag. Typically only set to false during snapshot testing. Defaults to `true`. */
+    /** A boolean to enable prefixing any internal SVGs with a unique string; useful when there are potentially multiple SVG instances on the same page and the SVG utilizes IDs and references internally (e.g. in the `<defs>` tag).
+     * Typically only set to false during snapshot testing.
+     * Defaults to `true`.
+     */
     randomizeIds: {
       type: Boolean,
       default: !0

package/dist/kong-icons.es1156.js.map

@@ -1 +1 @@
-{"version":3,"file":"kong-icons.es1156.js","sources":["../src/components/flags/FlagTgIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagTgIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Mon, 23 Sep 2024 18:33:30 GMT\n *\n * GitHub: https://github.com/Kong/icons\n * License: Apache-2.0\n */\n\nimport { computed, ref, onMounted } from 'vue'\nimport { KUI_ICON_SIZE_50 } from '@kong/design-tokens'\n\nconst props = defineProps({\n  /** The accessibility text provided to screen readers */\n  title: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  /** The icon color. Defaults to `currentColor` which inherits text color from the parent element */\n  color: {\n    type: String,\n    required: false,\n    default: 'currentColor',\n  },\n  /** The CSS display property for the icon. Defaults to `block` */\n  display: {\n    type: String,\n    required: false,\n    default: 'block',\n  },\n  /** Whether the icon is just eye-candy or is meaningful to the page (should screen-readers ignore the icon?) */\n  decorative: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  /** The icon size */\n  size: {\n    type: [Number, String],\n    required: false,\n    default: KUI_ICON_SIZE_50, // if setting to the imported const fails, just pass a number of 24 as the default.\n    validator: (sizeValue: number | string): boolean => {\n      if (typeof sizeValue === 'number' && sizeValue > 0) {\n        return true\n      }\n\n      if (typeof sizeValue === 'string') {\n        // Strip `px` from the string\n        const sanitizedSize = String(sizeValue).replace(/px/gi, '')\n        const sizeNumber = Number(sanitizedSize)\n        if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n          return true\n        }\n      }\n\n      return false\n    },\n  },\n  /** The HTML tag to utilize for the icon's wrapper element. Defaults to `span` */\n  as: {\n    type: String,\n    required: false,\n    default: 'span',\n  },\n  /** A boolean to enable prefixing any internal SVGs with a unique string; useful when there are potentially multiple SVG instances on the same page and the SVG utilizes IDs and references internally (e.g. in the `<defs>` tag. Typically only set to false during snapshot testing. Defaults to `true`. */\n  randomizeIds: {\n    type: Boolean,\n    default: true,\n  },\n})\n\nconst svgElement = ref<SVGElement | null>(null)\n\nconst iconSize = computed((): string => {\n  // If props.size is a number, ensure it's greater than zero\n  if (typeof props.size === 'number' && props.size > 0) {\n    return `${props.size}px`\n  }\n\n  if (typeof props.size === 'string') {\n    // Strip `px` from the string\n    const sanitizedSize = String(props.size).replace(/px/gi, '')\n    const sizeNumber = Number(sanitizedSize)\n    if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n      return `${sizeNumber}px`\n    }\n  }\n\n  // Return the default icon size\n  return KUI_ICON_SIZE_50\n})\n\n/**\n * We are adding styles inline to avoid additional stylesheet imports in the host application/component.\n * All of the properties should be mapped to component props for customization.\n */\nconst rootElementStyles = computed((): Record<string, string> => ({\n  boxSizing: 'border-box',\n  color: props.color,\n  display: props.display,\n  flexShrink: '0',\n  height: iconSize.value,\n  lineHeight: '0',\n  width: iconSize.value,\n}))\n\n/**\n * Prefixes all IDs within the <defs> section of an SVG element and updates all references to these IDs. This is useful to avoid ID conflicts when embedding multiple SVGs in a document.\n *\n * The function performs the following steps:\n * 1. Finds all direct children of the <defs> element that have an `id` attribute and prefixes their IDs with a random string.\n * 2. Updates all references to these prefixed IDs in attributes like `url(#id)`, `href`, `xlink:href`, etc.\n *\n * The prefix is a random string generated using `Math.random().toString(36).substring(2, 12)` which should be sufficient for most use-cases.\n *\n * @param {SVGElement} svgElement - The SVG element whose potential IDs need to be prefixed.\n */\nconst prefixSvgIds = (svgElement: SVGElement): void => {\n  if (!svgElement) {\n    return\n  }\n\n  const defsElement = svgElement.querySelector('defs')\n\n  // Prepare a map to store the original and new IDs for quick lookups\n  const idMap: Record<string, string> = {}\n\n  if (defsElement) {\n    // Step 1: Prefix all direct children of <defs> that have an `id`\n    defsElement.querySelectorAll('[id]').forEach((element) => {\n      const originalId = element.getAttribute('id')\n      const newId = `${Math.random().toString(36).substring(2, 12)}-${originalId}`\n\n      // Map old id to new id\n      idMap[originalId!] = newId\n\n      // Update the element's ID with the new prefixed ID\n      element.setAttribute('id', newId)\n    })\n  }\n\n  // Step 2: Update all references to these prefixed IDs in attributes like `url(#id)`, `href`, `xlink:href`\n  const referencingAttributes = ['fill', 'stroke', 'filter', 'mask', 'clip-path', 'xlink:href', 'href']\n\n  // Function to update references to IDs in attributes\n  const updateReferences = (element: Element): void => {\n    referencingAttributes.forEach((attr) => {\n      const attrValue = element.getAttribute(attr)\n      if (attrValue) {\n        // Match any url(#id) or href=\"#id\" references\n        const updatedValue = attrValue.replace(/url\\(#([^)]+)\\)/g, (match, id) => {\n          return idMap[id] ? `url(#${idMap[id]})` : match\n        }).replace(/#([^\\s]+)/g, (match, id) => {\n          return idMap[id] ? `#${idMap[id]}` : match\n        })\n\n        // If the value changed, update the attribute\n        if (updatedValue !== attrValue) {\n          element.setAttribute(attr, updatedValue)\n        }\n      }\n    })\n  }\n\n  // Traverse all elements in the SVG to update ID references\n  svgElement.querySelectorAll('*').forEach((element) => {\n    updateReferences(element)\n  })\n}\n\nonMounted(() => {\n  if (props.randomizeIds && svgElement.value) {\n    prefixSvgIds(svgElement.value)\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    :aria-hidden=\"decorative ? 'true' : undefined\"\n    class=\"kui-icon flag-tg-icon\"\n    data-testid=\"kui-icon-wrapper-flag-tg-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      ref=\"svgElement\"\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-tg-icon\"\n      fill=\"none\"\n      height=\"100%\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      width=\"100%\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title\n        v-if=\"title\"\n        data-testid=\"kui-icon-svg-title\"\n      >\n        {{ title }}\n      </title>\n      <g clip-path=\"url(#clip0_247_6267)\">\n        <path\n          d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z\"\n          fill=\"#FFDA44\"\n        />\n        <path\n          d=\"M12 0C11.9913 9.375e-05 11.4783 4.8 11.4783 4.8H21.6006C19.4113 1.88545 15.9259 0 12 0Z\"\n          fill=\"#496E2D\"\n        />\n        <path\n          d=\"M11.9999 24C15.9258 24 19.4112 22.1146 21.6004 19.2H2.39941C4.58866 22.1146 8.07405 24 11.9999 24Z\"\n          fill=\"#496E2D\"\n        />\n        <path\n          d=\"M23.7597 9.59998H11.4783L12 14.4H23.7597C23.9172 13.6245 24 12.8219 24 12C24 11.178 23.9171 10.3754 23.7597 9.59998Z\"\n          fill=\"#496E2D\"\n        />\n        <path\n          d=\"M12 14.4C12 11.8957 12 2.81737 12 0C5.37262 0 0 5.37262 0 12C0 12.822 0.082875 13.6245 0.240281 14.4H12Z\"\n          fill=\"#D80027\"\n        />\n        <path\n          d=\"M6.6213 5.73914L7.3983 8.13046H9.91291L7.87868 9.60857L8.65558 12L6.6213 10.522L4.58702 12L5.36407 9.60857L3.32983 8.13046H5.84435L6.6213 5.73914Z\"\n          fill=\"#F0F0F0\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"clip0_247_6267\">\n          <rect\n            fill=\"white\"\n            height=\"24\"\n            width=\"24\"\n          />\n        </clipPath>\n      </defs>\n    </svg>\n  </component>\n</template>\n\n<style lang=\"scss\" scoped>\n/**\n * We are adding styles inline to avoid additional stylesheet imports in the host application/component.\n * Do not add styles into this component file.\n */\n</style>\n"],"names":["props","__props","svgElement","ref","iconSize","computed","sanitizedSize","sizeNumber","KUI_ICON_SIZE_50","rootElementStyles","prefixSvgIds","defsElement","idMap","element","originalId","newId","referencingAttributes","updateReferences","attr","attrValue","updatedValue","match","id","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,UAAMA,IAAQC,GA4DRC,IAAaC,EAAuB,IAAI,GAExCC,IAAWC,EAAS,MAAc;AAEtC,UAAI,OAAOL,EAAM,QAAS,YAAYA,EAAM,OAAO;AAC1C,eAAA,GAAGA,EAAM,IAAI;AAGlB,UAAA,OAAOA,EAAM,QAAS,UAAU;AAElC,cAAMM,IAAgB,OAAON,EAAM,IAAI,EAAE,QAAQ,QAAQ,EAAE,GACrDO,IAAa,OAAOD,CAAa;AACnC,YAAAC,KAAc,CAAC,MAAMA,CAAU,KAAK,OAAO,UAAUA,CAAU,KAAKA,IAAa;AACnF,iBAAO,GAAGA,CAAU;AAAA,MAExB;AAGO,aAAAC;AAAA,IAAA,CACR,GAMKC,IAAoBJ,EAAS,OAA+B;AAAA,MAChE,WAAW;AAAA,MACX,OAAOL,EAAM;AAAA,MACb,SAASA,EAAM;AAAA,MACf,YAAY;AAAA,MACZ,QAAQI,EAAS;AAAA,MACjB,YAAY;AAAA,MACZ,OAAOA,EAAS;AAAA,IAChB,EAAA,GAaIM,IAAe,CAACR,MAAiC;AACrD,UAAI,CAACA;AACH;AAGI,YAAAS,IAAcT,EAAW,cAAc,MAAM,GAG7CU,IAAgC,CAAA;AAEtC,MAAID,KAEFA,EAAY,iBAAiB,MAAM,EAAE,QAAQ,CAACE,MAAY;AAClD,cAAAC,IAAaD,EAAQ,aAAa,IAAI,GACtCE,IAAQ,GAAG,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,UAAU,GAAG,EAAE,CAAC,IAAID,CAAU;AAG1E,QAAAF,EAAME,CAAW,IAAIC,GAGbF,EAAA,aAAa,MAAME,CAAK;AAAA,MAAA,CACjC;AAIG,YAAAC,IAAwB,CAAC,QAAQ,UAAU,UAAU,QAAQ,aAAa,cAAc,MAAM,GAG9FC,IAAmB,CAACJ,MAA2B;AAC7B,QAAAG,EAAA,QAAQ,CAACE,MAAS;AAChC,gBAAAC,IAAYN,EAAQ,aAAaK,CAAI;AAC3C,cAAIC,GAAW;AAEb,kBAAMC,IAAeD,EAAU,QAAQ,oBAAoB,CAACE,GAAOC,MAC1DV,EAAMU,CAAE,IAAI,QAAQV,EAAMU,CAAE,CAAC,MAAMD,CAC3C,EAAE,QAAQ,cAAc,CAACA,GAAOC,MACxBV,EAAMU,CAAE,IAAI,IAAIV,EAAMU,CAAE,CAAC,KAAKD,CACtC;AAGD,YAAID,MAAiBD,KACXN,EAAA,aAAaK,GAAME,CAAY;AAAA,UAE3C;AAAA,QAAA,CACD;AAAA,MAAA;AAIHlB,MAAAA,EAAW,iBAAiB,GAAG,EAAE,QAAQ,CAACW,MAAY;AACpD,QAAAI,EAAiBJ,CAAO;AAAA,MAAA,CACzB;AAAA,IAAA;AAGH,WAAAU,EAAU,MAAM;AACV,MAAAvB,EAAM,gBAAgBE,EAAW,SACnCQ,EAAaR,EAAW,KAAK;AAAA,IAC/B,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"kong-icons.es1156.js","sources":["../src/components/flags/FlagTgIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagTgIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Mon, 23 Sep 2024 18:37:12 GMT\n *\n * GitHub: https://github.com/Kong/icons\n * License: Apache-2.0\n */\n\nimport { computed, ref, onMounted } from 'vue'\nimport { KUI_ICON_SIZE_50 } from '@kong/design-tokens'\n\nconst props = defineProps({\n  /** The accessibility text provided to screen readers */\n  title: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  /** The icon color. Defaults to `currentColor` which inherits text color from the parent element */\n  color: {\n    type: String,\n    required: false,\n    default: 'currentColor',\n  },\n  /** The CSS display property for the icon. Defaults to `block` */\n  display: {\n    type: String,\n    required: false,\n    default: 'block',\n  },\n  /** Whether the icon is just eye-candy or is meaningful to the page (should screen-readers ignore the icon?) */\n  decorative: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  /** The icon size */\n  size: {\n    type: [Number, String],\n    required: false,\n    default: KUI_ICON_SIZE_50, // if setting to the imported const fails, just pass a number of 24 as the default.\n    validator: (sizeValue: number | string): boolean => {\n      if (typeof sizeValue === 'number' && sizeValue > 0) {\n        return true\n      }\n\n      if (typeof sizeValue === 'string') {\n        // Strip `px` from the string\n        const sanitizedSize = String(sizeValue).replace(/px/gi, '')\n        const sizeNumber = Number(sanitizedSize)\n        if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n          return true\n        }\n      }\n\n      return false\n    },\n  },\n  /** The HTML tag to utilize for the icon's wrapper element. Defaults to `span` */\n  as: {\n    type: String,\n    required: false,\n    default: 'span',\n  },\n  /** A boolean to enable prefixing any internal SVGs with a unique string; useful when there are potentially multiple SVG instances on the same page and the SVG utilizes IDs and references internally (e.g. in the `<defs>` tag).\n   * Typically only set to false during snapshot testing.\n   * Defaults to `true`.\n   */\n  randomizeIds: {\n    type: Boolean,\n    default: true,\n  },\n})\n\nconst svgElement = ref<SVGElement | null>(null)\n\nconst iconSize = computed((): string => {\n  // If props.size is a number, ensure it's greater than zero\n  if (typeof props.size === 'number' && props.size > 0) {\n    return `${props.size}px`\n  }\n\n  if (typeof props.size === 'string') {\n    // Strip `px` from the string\n    const sanitizedSize = String(props.size).replace(/px/gi, '')\n    const sizeNumber = Number(sanitizedSize)\n    if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n      return `${sizeNumber}px`\n    }\n  }\n\n  // Return the default icon size\n  return KUI_ICON_SIZE_50\n})\n\n/**\n * We are adding styles inline to avoid additional stylesheet imports in the host application/component.\n * All of the properties should be mapped to component props for customization.\n */\nconst rootElementStyles = computed((): Record<string, string> => ({\n  boxSizing: 'border-box',\n  color: props.color,\n  display: props.display,\n  flexShrink: '0',\n  height: iconSize.value,\n  lineHeight: '0',\n  width: iconSize.value,\n}))\n\n/**\n * Prefixes all IDs within the <defs> section of an SVG element and updates all references to these IDs. This is useful to avoid ID conflicts when embedding multiple SVGs in a document.\n *\n * The function performs the following steps:\n * 1. Finds all direct children of the <defs> element that have an `id` attribute and prefixes their IDs with a random string.\n * 2. Updates all references to these prefixed IDs in attributes like `url(#id)`, `href`, `xlink:href`, etc.\n *\n * The prefix is a random string generated using `Math.random().toString(36).substring(2, 12)` which should be sufficient for most use-cases.\n *\n * @param {SVGElement} svgElement - The SVG element whose potential IDs need to be prefixed.\n */\nconst prefixSvgIds = (svgElement: SVGElement): void => {\n  if (!svgElement) {\n    return\n  }\n\n  const defsElement = svgElement.querySelector('defs')\n\n  // Prepare a map to store the original and new IDs for quick lookups\n  const idMap: Record<string, string> = {}\n\n  if (defsElement) {\n    // Step 1: Prefix all direct children of <defs> that have an `id`\n    defsElement.querySelectorAll('[id]').forEach((element) => {\n      const originalId = element.getAttribute('id')\n      const newId = `${Math.random().toString(36).substring(2, 12)}-${originalId}`\n\n      // Map old id to new id\n      idMap[originalId!] = newId\n\n      // Update the element's ID with the new prefixed ID\n      element.setAttribute('id', newId)\n    })\n  }\n\n  // Step 2: Update all references to these prefixed IDs in attributes like `url(#id)`, `href`, `xlink:href`\n  const referencingAttributes = ['fill', 'stroke', 'filter', 'mask', 'clip-path', 'xlink:href', 'href']\n\n  // Function to update references to IDs in attributes\n  const updateReferences = (element: Element): void => {\n    referencingAttributes.forEach((attr) => {\n      const attrValue = element.getAttribute(attr)\n      if (attrValue) {\n        // Match any url(#id) or href=\"#id\" references\n        const updatedValue = attrValue.replace(/url\\(#([^)]+)\\)/g, (match, id) => {\n          return idMap[id] ? `url(#${idMap[id]})` : match\n        }).replace(/#([^\\s]+)/g, (match, id) => {\n          return idMap[id] ? `#${idMap[id]}` : match\n        })\n\n        // If the value changed, update the attribute\n        if (updatedValue !== attrValue) {\n          element.setAttribute(attr, updatedValue)\n        }\n      }\n    })\n  }\n\n  // Traverse all elements in the SVG to update ID references\n  svgElement.querySelectorAll('*').forEach((element) => {\n    updateReferences(element)\n  })\n}\n\nonMounted(() => {\n  if (props.randomizeIds && svgElement.value) {\n    prefixSvgIds(svgElement.value)\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    :aria-hidden=\"decorative ? 'true' : undefined\"\n    class=\"kui-icon flag-tg-icon\"\n    data-testid=\"kui-icon-wrapper-flag-tg-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      ref=\"svgElement\"\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-tg-icon\"\n      fill=\"none\"\n      height=\"100%\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      width=\"100%\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title\n        v-if=\"title\"\n        data-testid=\"kui-icon-svg-title\"\n      >\n        {{ title }}\n      </title>\n      <g clip-path=\"url(#clip0_247_6267)\">\n        <path\n          d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z\"\n          fill=\"#FFDA44\"\n        />\n        <path\n          d=\"M12 0C11.9913 9.375e-05 11.4783 4.8 11.4783 4.8H21.6006C19.4113 1.88545 15.9259 0 12 0Z\"\n          fill=\"#496E2D\"\n        />\n        <path\n          d=\"M11.9999 24C15.9258 24 19.4112 22.1146 21.6004 19.2H2.39941C4.58866 22.1146 8.07405 24 11.9999 24Z\"\n          fill=\"#496E2D\"\n        />\n        <path\n          d=\"M23.7597 9.59998H11.4783L12 14.4H23.7597C23.9172 13.6245 24 12.8219 24 12C24 11.178 23.9171 10.3754 23.7597 9.59998Z\"\n          fill=\"#496E2D\"\n        />\n        <path\n          d=\"M12 14.4C12 11.8957 12 2.81737 12 0C5.37262 0 0 5.37262 0 12C0 12.822 0.082875 13.6245 0.240281 14.4H12Z\"\n          fill=\"#D80027\"\n        />\n        <path\n          d=\"M6.6213 5.73914L7.3983 8.13046H9.91291L7.87868 9.60857L8.65558 12L6.6213 10.522L4.58702 12L5.36407 9.60857L3.32983 8.13046H5.84435L6.6213 5.73914Z\"\n          fill=\"#F0F0F0\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"clip0_247_6267\">\n          <rect\n            fill=\"white\"\n            height=\"24\"\n            width=\"24\"\n          />\n        </clipPath>\n      </defs>\n    </svg>\n  </component>\n</template>\n\n<style lang=\"scss\" scoped>\n/**\n * We are adding styles inline to avoid additional stylesheet imports in the host application/component.\n * Do not add styles into this component file.\n */\n</style>\n"],"names":["props","__props","svgElement","ref","iconSize","computed","sanitizedSize","sizeNumber","KUI_ICON_SIZE_50","rootElementStyles","prefixSvgIds","defsElement","idMap","element","originalId","newId","referencingAttributes","updateReferences","attr","attrValue","updatedValue","match","id","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,UAAMA,IAAQC,GA+DRC,IAAaC,EAAuB,IAAI,GAExCC,IAAWC,EAAS,MAAc;AAEtC,UAAI,OAAOL,EAAM,QAAS,YAAYA,EAAM,OAAO;AAC1C,eAAA,GAAGA,EAAM,IAAI;AAGlB,UAAA,OAAOA,EAAM,QAAS,UAAU;AAElC,cAAMM,IAAgB,OAAON,EAAM,IAAI,EAAE,QAAQ,QAAQ,EAAE,GACrDO,IAAa,OAAOD,CAAa;AACnC,YAAAC,KAAc,CAAC,MAAMA,CAAU,KAAK,OAAO,UAAUA,CAAU,KAAKA,IAAa;AACnF,iBAAO,GAAGA,CAAU;AAAA,MAExB;AAGO,aAAAC;AAAA,IAAA,CACR,GAMKC,IAAoBJ,EAAS,OAA+B;AAAA,MAChE,WAAW;AAAA,MACX,OAAOL,EAAM;AAAA,MACb,SAASA,EAAM;AAAA,MACf,YAAY;AAAA,MACZ,QAAQI,EAAS;AAAA,MACjB,YAAY;AAAA,MACZ,OAAOA,EAAS;AAAA,IAChB,EAAA,GAaIM,IAAe,CAACR,MAAiC;AACrD,UAAI,CAACA;AACH;AAGI,YAAAS,IAAcT,EAAW,cAAc,MAAM,GAG7CU,IAAgC,CAAA;AAEtC,MAAID,KAEFA,EAAY,iBAAiB,MAAM,EAAE,QAAQ,CAACE,MAAY;AAClD,cAAAC,IAAaD,EAAQ,aAAa,IAAI,GACtCE,IAAQ,GAAG,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,UAAU,GAAG,EAAE,CAAC,IAAID,CAAU;AAG1E,QAAAF,EAAME,CAAW,IAAIC,GAGbF,EAAA,aAAa,MAAME,CAAK;AAAA,MAAA,CACjC;AAIG,YAAAC,IAAwB,CAAC,QAAQ,UAAU,UAAU,QAAQ,aAAa,cAAc,MAAM,GAG9FC,IAAmB,CAACJ,MAA2B;AAC7B,QAAAG,EAAA,QAAQ,CAACE,MAAS;AAChC,gBAAAC,IAAYN,EAAQ,aAAaK,CAAI;AAC3C,cAAIC,GAAW;AAEb,kBAAMC,IAAeD,EAAU,QAAQ,oBAAoB,CAACE,GAAOC,MAC1DV,EAAMU,CAAE,IAAI,QAAQV,EAAMU,CAAE,CAAC,MAAMD,CAC3C,EAAE,QAAQ,cAAc,CAACA,GAAOC,MACxBV,EAAMU,CAAE,IAAI,IAAIV,EAAMU,CAAE,CAAC,KAAKD,CACtC;AAGD,YAAID,MAAiBD,KACXN,EAAA,aAAaK,GAAME,CAAY;AAAA,UAE3C;AAAA,QAAA,CACD;AAAA,MAAA;AAIHlB,MAAAA,EAAW,iBAAiB,GAAG,EAAE,QAAQ,CAACW,MAAY;AACpD,QAAAI,EAAiBJ,CAAO;AAAA,MAAA,CACzB;AAAA,IAAA;AAGH,WAAAU,EAAU,MAAM;AACV,MAAAvB,EAAM,gBAAgBE,EAAW,SACnCQ,EAAaR,EAAW,KAAK;AAAA,IAC/B,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/kong-icons.es1158.js

@@ -1,6 +1,6 @@
 import { defineComponent as x, ref as z, computed as g, onMounted as I, openBlock as f, createBlock as N, resolveDynamicComponent as _, normalizeStyle as w, withCtx as q, createElementBlock as m, toDisplayString as E, createCommentVNode as A, pushScopeId as B, popScopeId as M, createElementVNode as o } from "vue";
 import { KUI_ICON_SIZE_50 as y } from "./kong-icons.es1218.js";
-const S = (e) => (B("data-v-55143a49"), e = e(), M(), e), $ = ["aria-hidden"], H = {
+const S = (e) => (B("data-v-ee3dc83c"), e = e(), M(), e), $ = ["aria-hidden"], H = {
   key: 0,
   "data-testid": "kui-icon-svg-title"
 }, Z = /* @__PURE__ */ S(() => /* @__PURE__ */ o("g", { "clip-path": "url(#clip0_247_6265)" }, [
@@ -78,7 +78,10 @@ const S = (e) => (B("data-v-55143a49"), e = e(), M(), e), $ = ["aria-hidden"], H
       required: !1,
       default: "span"
     },
-    /** A boolean to enable prefixing any internal SVGs with a unique string; useful when there are potentially multiple SVG instances on the same page and the SVG utilizes IDs and references internally (e.g. in the `<defs>` tag. Typically only set to false during snapshot testing. Defaults to `true`. */
+    /** A boolean to enable prefixing any internal SVGs with a unique string; useful when there are potentially multiple SVG instances on the same page and the SVG utilizes IDs and references internally (e.g. in the `<defs>` tag).
+     * Typically only set to false during snapshot testing.
+     * Defaults to `true`.
+     */
     randomizeIds: {
       type: Boolean,
       default: !0

package/dist/kong-icons.es1158.js.map

@@ -1 +1 @@
-{"version":3,"file":"kong-icons.es1158.js","sources":["../src/components/flags/FlagThIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagThIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Mon, 23 Sep 2024 18:33:30 GMT\n *\n * GitHub: https://github.com/Kong/icons\n * License: Apache-2.0\n */\n\nimport { computed, ref, onMounted } from 'vue'\nimport { KUI_ICON_SIZE_50 } from '@kong/design-tokens'\n\nconst props = defineProps({\n  /** The accessibility text provided to screen readers */\n  title: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  /** The icon color. Defaults to `currentColor` which inherits text color from the parent element */\n  color: {\n    type: String,\n    required: false,\n    default: 'currentColor',\n  },\n  /** The CSS display property for the icon. Defaults to `block` */\n  display: {\n    type: String,\n    required: false,\n    default: 'block',\n  },\n  /** Whether the icon is just eye-candy or is meaningful to the page (should screen-readers ignore the icon?) */\n  decorative: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  /** The icon size */\n  size: {\n    type: [Number, String],\n    required: false,\n    default: KUI_ICON_SIZE_50, // if setting to the imported const fails, just pass a number of 24 as the default.\n    validator: (sizeValue: number | string): boolean => {\n      if (typeof sizeValue === 'number' && sizeValue > 0) {\n        return true\n      }\n\n      if (typeof sizeValue === 'string') {\n        // Strip `px` from the string\n        const sanitizedSize = String(sizeValue).replace(/px/gi, '')\n        const sizeNumber = Number(sanitizedSize)\n        if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n          return true\n        }\n      }\n\n      return false\n    },\n  },\n  /** The HTML tag to utilize for the icon's wrapper element. Defaults to `span` */\n  as: {\n    type: String,\n    required: false,\n    default: 'span',\n  },\n  /** A boolean to enable prefixing any internal SVGs with a unique string; useful when there are potentially multiple SVG instances on the same page and the SVG utilizes IDs and references internally (e.g. in the `<defs>` tag. Typically only set to false during snapshot testing. Defaults to `true`. */\n  randomizeIds: {\n    type: Boolean,\n    default: true,\n  },\n})\n\nconst svgElement = ref<SVGElement | null>(null)\n\nconst iconSize = computed((): string => {\n  // If props.size is a number, ensure it's greater than zero\n  if (typeof props.size === 'number' && props.size > 0) {\n    return `${props.size}px`\n  }\n\n  if (typeof props.size === 'string') {\n    // Strip `px` from the string\n    const sanitizedSize = String(props.size).replace(/px/gi, '')\n    const sizeNumber = Number(sanitizedSize)\n    if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n      return `${sizeNumber}px`\n    }\n  }\n\n  // Return the default icon size\n  return KUI_ICON_SIZE_50\n})\n\n/**\n * We are adding styles inline to avoid additional stylesheet imports in the host application/component.\n * All of the properties should be mapped to component props for customization.\n */\nconst rootElementStyles = computed((): Record<string, string> => ({\n  boxSizing: 'border-box',\n  color: props.color,\n  display: props.display,\n  flexShrink: '0',\n  height: iconSize.value,\n  lineHeight: '0',\n  width: iconSize.value,\n}))\n\n/**\n * Prefixes all IDs within the <defs> section of an SVG element and updates all references to these IDs. This is useful to avoid ID conflicts when embedding multiple SVGs in a document.\n *\n * The function performs the following steps:\n * 1. Finds all direct children of the <defs> element that have an `id` attribute and prefixes their IDs with a random string.\n * 2. Updates all references to these prefixed IDs in attributes like `url(#id)`, `href`, `xlink:href`, etc.\n *\n * The prefix is a random string generated using `Math.random().toString(36).substring(2, 12)` which should be sufficient for most use-cases.\n *\n * @param {SVGElement} svgElement - The SVG element whose potential IDs need to be prefixed.\n */\nconst prefixSvgIds = (svgElement: SVGElement): void => {\n  if (!svgElement) {\n    return\n  }\n\n  const defsElement = svgElement.querySelector('defs')\n\n  // Prepare a map to store the original and new IDs for quick lookups\n  const idMap: Record<string, string> = {}\n\n  if (defsElement) {\n    // Step 1: Prefix all direct children of <defs> that have an `id`\n    defsElement.querySelectorAll('[id]').forEach((element) => {\n      const originalId = element.getAttribute('id')\n      const newId = `${Math.random().toString(36).substring(2, 12)}-${originalId}`\n\n      // Map old id to new id\n      idMap[originalId!] = newId\n\n      // Update the element's ID with the new prefixed ID\n      element.setAttribute('id', newId)\n    })\n  }\n\n  // Step 2: Update all references to these prefixed IDs in attributes like `url(#id)`, `href`, `xlink:href`\n  const referencingAttributes = ['fill', 'stroke', 'filter', 'mask', 'clip-path', 'xlink:href', 'href']\n\n  // Function to update references to IDs in attributes\n  const updateReferences = (element: Element): void => {\n    referencingAttributes.forEach((attr) => {\n      const attrValue = element.getAttribute(attr)\n      if (attrValue) {\n        // Match any url(#id) or href=\"#id\" references\n        const updatedValue = attrValue.replace(/url\\(#([^)]+)\\)/g, (match, id) => {\n          return idMap[id] ? `url(#${idMap[id]})` : match\n        }).replace(/#([^\\s]+)/g, (match, id) => {\n          return idMap[id] ? `#${idMap[id]}` : match\n        })\n\n        // If the value changed, update the attribute\n        if (updatedValue !== attrValue) {\n          element.setAttribute(attr, updatedValue)\n        }\n      }\n    })\n  }\n\n  // Traverse all elements in the SVG to update ID references\n  svgElement.querySelectorAll('*').forEach((element) => {\n    updateReferences(element)\n  })\n}\n\nonMounted(() => {\n  if (props.randomizeIds && svgElement.value) {\n    prefixSvgIds(svgElement.value)\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    :aria-hidden=\"decorative ? 'true' : undefined\"\n    class=\"kui-icon flag-th-icon\"\n    data-testid=\"kui-icon-wrapper-flag-th-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      ref=\"svgElement\"\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-th-icon\"\n      fill=\"none\"\n      height=\"100%\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      width=\"100%\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title\n        v-if=\"title\"\n        data-testid=\"kui-icon-svg-title\"\n      >\n        {{ title }}\n      </title>\n      <g clip-path=\"url(#clip0_247_6265)\">\n        <path\n          d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z\"\n          fill=\"#F0F0F0\"\n        />\n        <path\n          d=\"M23.2536 7.82611H0.746391C0.264 9.1261 0 10.5322 0 12C0 13.4678 0.264 14.8739 0.746391 16.1739H23.2537C23.736 14.8739 24 13.4678 24 12C24 10.5322 23.736 9.1261 23.2536 7.82611Z\"\n          fill=\"#0052B4\"\n        />\n        <path\n          d=\"M11.9999 0C8.36285 0 5.10396 1.61831 2.90332 4.17389H21.0965C18.8959 1.61831 15.637 0 11.9999 0Z\"\n          fill=\"#D80027\"\n        />\n        <path\n          d=\"M21.0965 19.8261H2.90332C5.10396 22.3817 8.36285 24 11.9999 24C15.637 24 18.8959 22.3817 21.0965 19.8261Z\"\n          fill=\"#D80027\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"clip0_247_6265\">\n          <rect\n            fill=\"white\"\n            height=\"24\"\n            width=\"24\"\n          />\n        </clipPath>\n      </defs>\n    </svg>\n  </component>\n</template>\n\n<style lang=\"scss\" scoped>\n/**\n * We are adding styles inline to avoid additional stylesheet imports in the host application/component.\n * Do not add styles into this component file.\n */\n</style>\n"],"names":["props","__props","svgElement","ref","iconSize","computed","sanitizedSize","sizeNumber","KUI_ICON_SIZE_50","rootElementStyles","prefixSvgIds","defsElement","idMap","element","originalId","newId","referencingAttributes","updateReferences","attr","attrValue","updatedValue","match","id","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,UAAMA,IAAQC,GA4DRC,IAAaC,EAAuB,IAAI,GAExCC,IAAWC,EAAS,MAAc;AAEtC,UAAI,OAAOL,EAAM,QAAS,YAAYA,EAAM,OAAO;AAC1C,eAAA,GAAGA,EAAM,IAAI;AAGlB,UAAA,OAAOA,EAAM,QAAS,UAAU;AAElC,cAAMM,IAAgB,OAAON,EAAM,IAAI,EAAE,QAAQ,QAAQ,EAAE,GACrDO,IAAa,OAAOD,CAAa;AACnC,YAAAC,KAAc,CAAC,MAAMA,CAAU,KAAK,OAAO,UAAUA,CAAU,KAAKA,IAAa;AACnF,iBAAO,GAAGA,CAAU;AAAA,MAExB;AAGO,aAAAC;AAAA,IAAA,CACR,GAMKC,IAAoBJ,EAAS,OAA+B;AAAA,MAChE,WAAW;AAAA,MACX,OAAOL,EAAM;AAAA,MACb,SAASA,EAAM;AAAA,MACf,YAAY;AAAA,MACZ,QAAQI,EAAS;AAAA,MACjB,YAAY;AAAA,MACZ,OAAOA,EAAS;AAAA,IAChB,EAAA,GAaIM,IAAe,CAACR,MAAiC;AACrD,UAAI,CAACA;AACH;AAGI,YAAAS,IAAcT,EAAW,cAAc,MAAM,GAG7CU,IAAgC,CAAA;AAEtC,MAAID,KAEFA,EAAY,iBAAiB,MAAM,EAAE,QAAQ,CAACE,MAAY;AAClD,cAAAC,IAAaD,EAAQ,aAAa,IAAI,GACtCE,IAAQ,GAAG,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,UAAU,GAAG,EAAE,CAAC,IAAID,CAAU;AAG1E,QAAAF,EAAME,CAAW,IAAIC,GAGbF,EAAA,aAAa,MAAME,CAAK;AAAA,MAAA,CACjC;AAIG,YAAAC,IAAwB,CAAC,QAAQ,UAAU,UAAU,QAAQ,aAAa,cAAc,MAAM,GAG9FC,IAAmB,CAACJ,MAA2B;AAC7B,QAAAG,EAAA,QAAQ,CAACE,MAAS;AAChC,gBAAAC,IAAYN,EAAQ,aAAaK,CAAI;AAC3C,cAAIC,GAAW;AAEb,kBAAMC,IAAeD,EAAU,QAAQ,oBAAoB,CAACE,GAAOC,MAC1DV,EAAMU,CAAE,IAAI,QAAQV,EAAMU,CAAE,CAAC,MAAMD,CAC3C,EAAE,QAAQ,cAAc,CAACA,GAAOC,MACxBV,EAAMU,CAAE,IAAI,IAAIV,EAAMU,CAAE,CAAC,KAAKD,CACtC;AAGD,YAAID,MAAiBD,KACXN,EAAA,aAAaK,GAAME,CAAY;AAAA,UAE3C;AAAA,QAAA,CACD;AAAA,MAAA;AAIHlB,MAAAA,EAAW,iBAAiB,GAAG,EAAE,QAAQ,CAACW,MAAY;AACpD,QAAAI,EAAiBJ,CAAO;AAAA,MAAA,CACzB;AAAA,IAAA;AAGH,WAAAU,EAAU,MAAM;AACV,MAAAvB,EAAM,gBAAgBE,EAAW,SACnCQ,EAAaR,EAAW,KAAK;AAAA,IAC/B,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"kong-icons.es1158.js","sources":["../src/components/flags/FlagThIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagThIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Mon, 23 Sep 2024 18:37:12 GMT\n *\n * GitHub: https://github.com/Kong/icons\n * License: Apache-2.0\n */\n\nimport { computed, ref, onMounted } from 'vue'\nimport { KUI_ICON_SIZE_50 } from '@kong/design-tokens'\n\nconst props = defineProps({\n  /** The accessibility text provided to screen readers */\n  title: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  /** The icon color. Defaults to `currentColor` which inherits text color from the parent element */\n  color: {\n    type: String,\n    required: false,\n    default: 'currentColor',\n  },\n  /** The CSS display property for the icon. Defaults to `block` */\n  display: {\n    type: String,\n    required: false,\n    default: 'block',\n  },\n  /** Whether the icon is just eye-candy or is meaningful to the page (should screen-readers ignore the icon?) */\n  decorative: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  /** The icon size */\n  size: {\n    type: [Number, String],\n    required: false,\n    default: KUI_ICON_SIZE_50, // if setting to the imported const fails, just pass a number of 24 as the default.\n    validator: (sizeValue: number | string): boolean => {\n      if (typeof sizeValue === 'number' && sizeValue > 0) {\n        return true\n      }\n\n      if (typeof sizeValue === 'string') {\n        // Strip `px` from the string\n        const sanitizedSize = String(sizeValue).replace(/px/gi, '')\n        const sizeNumber = Number(sanitizedSize)\n        if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n          return true\n        }\n      }\n\n      return false\n    },\n  },\n  /** The HTML tag to utilize for the icon's wrapper element. Defaults to `span` */\n  as: {\n    type: String,\n    required: false,\n    default: 'span',\n  },\n  /** A boolean to enable prefixing any internal SVGs with a unique string; useful when there are potentially multiple SVG instances on the same page and the SVG utilizes IDs and references internally (e.g. in the `<defs>` tag).\n   * Typically only set to false during snapshot testing.\n   * Defaults to `true`.\n   */\n  randomizeIds: {\n    type: Boolean,\n    default: true,\n  },\n})\n\nconst svgElement = ref<SVGElement | null>(null)\n\nconst iconSize = computed((): string => {\n  // If props.size is a number, ensure it's greater than zero\n  if (typeof props.size === 'number' && props.size > 0) {\n    return `${props.size}px`\n  }\n\n  if (typeof props.size === 'string') {\n    // Strip `px` from the string\n    const sanitizedSize = String(props.size).replace(/px/gi, '')\n    const sizeNumber = Number(sanitizedSize)\n    if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n      return `${sizeNumber}px`\n    }\n  }\n\n  // Return the default icon size\n  return KUI_ICON_SIZE_50\n})\n\n/**\n * We are adding styles inline to avoid additional stylesheet imports in the host application/component.\n * All of the properties should be mapped to component props for customization.\n */\nconst rootElementStyles = computed((): Record<string, string> => ({\n  boxSizing: 'border-box',\n  color: props.color,\n  display: props.display,\n  flexShrink: '0',\n  height: iconSize.value,\n  lineHeight: '0',\n  width: iconSize.value,\n}))\n\n/**\n * Prefixes all IDs within the <defs> section of an SVG element and updates all references to these IDs. This is useful to avoid ID conflicts when embedding multiple SVGs in a document.\n *\n * The function performs the following steps:\n * 1. Finds all direct children of the <defs> element that have an `id` attribute and prefixes their IDs with a random string.\n * 2. Updates all references to these prefixed IDs in attributes like `url(#id)`, `href`, `xlink:href`, etc.\n *\n * The prefix is a random string generated using `Math.random().toString(36).substring(2, 12)` which should be sufficient for most use-cases.\n *\n * @param {SVGElement} svgElement - The SVG element whose potential IDs need to be prefixed.\n */\nconst prefixSvgIds = (svgElement: SVGElement): void => {\n  if (!svgElement) {\n    return\n  }\n\n  const defsElement = svgElement.querySelector('defs')\n\n  // Prepare a map to store the original and new IDs for quick lookups\n  const idMap: Record<string, string> = {}\n\n  if (defsElement) {\n    // Step 1: Prefix all direct children of <defs> that have an `id`\n    defsElement.querySelectorAll('[id]').forEach((element) => {\n      const originalId = element.getAttribute('id')\n      const newId = `${Math.random().toString(36).substring(2, 12)}-${originalId}`\n\n      // Map old id to new id\n      idMap[originalId!] = newId\n\n      // Update the element's ID with the new prefixed ID\n      element.setAttribute('id', newId)\n    })\n  }\n\n  // Step 2: Update all references to these prefixed IDs in attributes like `url(#id)`, `href`, `xlink:href`\n  const referencingAttributes = ['fill', 'stroke', 'filter', 'mask', 'clip-path', 'xlink:href', 'href']\n\n  // Function to update references to IDs in attributes\n  const updateReferences = (element: Element): void => {\n    referencingAttributes.forEach((attr) => {\n      const attrValue = element.getAttribute(attr)\n      if (attrValue) {\n        // Match any url(#id) or href=\"#id\" references\n        const updatedValue = attrValue.replace(/url\\(#([^)]+)\\)/g, (match, id) => {\n          return idMap[id] ? `url(#${idMap[id]})` : match\n        }).replace(/#([^\\s]+)/g, (match, id) => {\n          return idMap[id] ? `#${idMap[id]}` : match\n        })\n\n        // If the value changed, update the attribute\n        if (updatedValue !== attrValue) {\n          element.setAttribute(attr, updatedValue)\n        }\n      }\n    })\n  }\n\n  // Traverse all elements in the SVG to update ID references\n  svgElement.querySelectorAll('*').forEach((element) => {\n    updateReferences(element)\n  })\n}\n\nonMounted(() => {\n  if (props.randomizeIds && svgElement.value) {\n    prefixSvgIds(svgElement.value)\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    :aria-hidden=\"decorative ? 'true' : undefined\"\n    class=\"kui-icon flag-th-icon\"\n    data-testid=\"kui-icon-wrapper-flag-th-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      ref=\"svgElement\"\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-th-icon\"\n      fill=\"none\"\n      height=\"100%\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      width=\"100%\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title\n        v-if=\"title\"\n        data-testid=\"kui-icon-svg-title\"\n      >\n        {{ title }}\n      </title>\n      <g clip-path=\"url(#clip0_247_6265)\">\n        <path\n          d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z\"\n          fill=\"#F0F0F0\"\n        />\n        <path\n          d=\"M23.2536 7.82611H0.746391C0.264 9.1261 0 10.5322 0 12C0 13.4678 0.264 14.8739 0.746391 16.1739H23.2537C23.736 14.8739 24 13.4678 24 12C24 10.5322 23.736 9.1261 23.2536 7.82611Z\"\n          fill=\"#0052B4\"\n        />\n        <path\n          d=\"M11.9999 0C8.36285 0 5.10396 1.61831 2.90332 4.17389H21.0965C18.8959 1.61831 15.637 0 11.9999 0Z\"\n          fill=\"#D80027\"\n        />\n        <path\n          d=\"M21.0965 19.8261H2.90332C5.10396 22.3817 8.36285 24 11.9999 24C15.637 24 18.8959 22.3817 21.0965 19.8261Z\"\n          fill=\"#D80027\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"clip0_247_6265\">\n          <rect\n            fill=\"white\"\n            height=\"24\"\n            width=\"24\"\n          />\n        </clipPath>\n      </defs>\n    </svg>\n  </component>\n</template>\n\n<style lang=\"scss\" scoped>\n/**\n * We are adding styles inline to avoid additional stylesheet imports in the host application/component.\n * Do not add styles into this component file.\n */\n</style>\n"],"names":["props","__props","svgElement","ref","iconSize","computed","sanitizedSize","sizeNumber","KUI_ICON_SIZE_50","rootElementStyles","prefixSvgIds","defsElement","idMap","element","originalId","newId","referencingAttributes","updateReferences","attr","attrValue","updatedValue","match","id","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,UAAMA,IAAQC,GA+DRC,IAAaC,EAAuB,IAAI,GAExCC,IAAWC,EAAS,MAAc;AAEtC,UAAI,OAAOL,EAAM,QAAS,YAAYA,EAAM,OAAO;AAC1C,eAAA,GAAGA,EAAM,IAAI;AAGlB,UAAA,OAAOA,EAAM,QAAS,UAAU;AAElC,cAAMM,IAAgB,OAAON,EAAM,IAAI,EAAE,QAAQ,QAAQ,EAAE,GACrDO,IAAa,OAAOD,CAAa;AACnC,YAAAC,KAAc,CAAC,MAAMA,CAAU,KAAK,OAAO,UAAUA,CAAU,KAAKA,IAAa;AACnF,iBAAO,GAAGA,CAAU;AAAA,MAExB;AAGO,aAAAC;AAAA,IAAA,CACR,GAMKC,IAAoBJ,EAAS,OAA+B;AAAA,MAChE,WAAW;AAAA,MACX,OAAOL,EAAM;AAAA,MACb,SAASA,EAAM;AAAA,MACf,YAAY;AAAA,MACZ,QAAQI,EAAS;AAAA,MACjB,YAAY;AAAA,MACZ,OAAOA,EAAS;AAAA,IAChB,EAAA,GAaIM,IAAe,CAACR,MAAiC;AACrD,UAAI,CAACA;AACH;AAGI,YAAAS,IAAcT,EAAW,cAAc,MAAM,GAG7CU,IAAgC,CAAA;AAEtC,MAAID,KAEFA,EAAY,iBAAiB,MAAM,EAAE,QAAQ,CAACE,MAAY;AAClD,cAAAC,IAAaD,EAAQ,aAAa,IAAI,GACtCE,IAAQ,GAAG,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,UAAU,GAAG,EAAE,CAAC,IAAID,CAAU;AAG1E,QAAAF,EAAME,CAAW,IAAIC,GAGbF,EAAA,aAAa,MAAME,CAAK;AAAA,MAAA,CACjC;AAIG,YAAAC,IAAwB,CAAC,QAAQ,UAAU,UAAU,QAAQ,aAAa,cAAc,MAAM,GAG9FC,IAAmB,CAACJ,MAA2B;AAC7B,QAAAG,EAAA,QAAQ,CAACE,MAAS;AAChC,gBAAAC,IAAYN,EAAQ,aAAaK,CAAI;AAC3C,cAAIC,GAAW;AAEb,kBAAMC,IAAeD,EAAU,QAAQ,oBAAoB,CAACE,GAAOC,MAC1DV,EAAMU,CAAE,IAAI,QAAQV,EAAMU,CAAE,CAAC,MAAMD,CAC3C,EAAE,QAAQ,cAAc,CAACA,GAAOC,MACxBV,EAAMU,CAAE,IAAI,IAAIV,EAAMU,CAAE,CAAC,KAAKD,CACtC;AAGD,YAAID,MAAiBD,KACXN,EAAA,aAAaK,GAAME,CAAY;AAAA,UAE3C;AAAA,QAAA,CACD;AAAA,MAAA;AAIHlB,MAAAA,EAAW,iBAAiB,GAAG,EAAE,QAAQ,CAACW,MAAY;AACpD,QAAAI,EAAiBJ,CAAO;AAAA,MAAA,CACzB;AAAA,IAAA;AAGH,WAAAU,EAAU,MAAM;AACV,MAAAvB,EAAM,gBAAgBE,EAAW,SACnCQ,EAAaR,EAAW,KAAK;AAAA,IAC/B,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/kong-icons.es116.js

@@ -1,8 +1,8 @@
 import o from "./kong-icons.es990.js";
 /* empty css                 */
 import t from "./kong-icons.es409.js";
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-94084dd3"]]);
+const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-ce12e34d"]]);
 export {
-  p as default
+  e as default
 };
 //# sourceMappingURL=kong-icons.es116.js.map

package/dist/kong-icons.es1160.js

@@ -1,6 +1,6 @@
-import { defineComponent as H, ref as A, computed as h, onMounted as k, openBlock as u, createBlock as x, resolveDynamicComponent as z, normalizeStyle as C, withCtx as I, createElementBlock as g, toDisplayString as M, createCommentVNode as N, pushScopeId as _, popScopeId as w, createElementVNode as t } from "vue";
+import { defineComponent as H, ref as A, computed as h, onMounted as k, openBlock as f, createBlock as x, resolveDynamicComponent as z, normalizeStyle as C, withCtx as I, createElementBlock as g, toDisplayString as M, createCommentVNode as N, pushScopeId as _, popScopeId as w, createElementVNode as t } from "vue";
 import { KUI_ICON_SIZE_50 as m } from "./kong-icons.es1218.js";
-const y = (e) => (_("data-v-c6c7f25b"), e = e(), w(), e), D = ["aria-hidden"], Z = {
+const y = (e) => (_("data-v-a9b7778a"), e = e(), w(), e), D = ["aria-hidden"], Z = {
   key: 0,
   "data-testid": "kui-icon-svg-title"
 }, q = /* @__PURE__ */ y(() => /* @__PURE__ */ t("g", { "clip-path": "url(#clip0_247_6263)" }, [
@@ -106,7 +106,10 @@ const y = (e) => (_("data-v-c6c7f25b"), e = e(), w(), e), D = ["aria-hidden"], Z
       required: !1,
       default: "span"
     },
-    /** A boolean to enable prefixing any internal SVGs with a unique string; useful when there are potentially multiple SVG instances on the same page and the SVG utilizes IDs and references internally (e.g. in the `<defs>` tag. Typically only set to false during snapshot testing. Defaults to `true`. */
+    /** A boolean to enable prefixing any internal SVGs with a unique string; useful when there are potentially multiple SVG instances on the same page and the SVG utilizes IDs and references internally (e.g. in the `<defs>` tag).
+     * Typically only set to false during snapshot testing.
+     * Defaults to `true`.
+     */
     randomizeIds: {
       type: Boolean,
       default: !0
@@ -117,7 +120,7 @@ const y = (e) => (_("data-v-c6c7f25b"), e = e(), w(), e), D = ["aria-hidden"], Z
       if (typeof i.size == "number" && i.size > 0)
         return `${i.size}px`;
       if (typeof i.size == "string") {
-        const a = String(i.size).replace(/px/gi, ""), r = Number(a);
+        const o = String(i.size).replace(/px/gi, ""), r = Number(o);
         if (r && !isNaN(r) && Number.isInteger(r) && r > 0)
           return `${r}px`;
       }
@@ -130,37 +133,37 @@ const y = (e) => (_("data-v-c6c7f25b"), e = e(), w(), e), D = ["aria-hidden"], Z
       height: L.value,
       lineHeight: "0",
       width: L.value
-    })), b = (a) => {
-      if (!a)
+    })), b = (o) => {
+      if (!o)
         return;
-      const r = a.querySelector("defs"), d = {};
-      r && r.querySelectorAll("[id]").forEach((o) => {
-        const s = o.getAttribute("id"), n = `${Math.random().toString(36).substring(2, 12)}-${s}`;
-        d[s] = n, o.setAttribute("id", n);
+      const r = o.querySelector("defs"), d = {};
+      r && r.querySelectorAll("[id]").forEach((a) => {
+        const s = a.getAttribute("id"), n = `${Math.random().toString(36).substring(2, 12)}-${s}`;
+        d[s] = n, a.setAttribute("id", n);
       });
-      const F = ["fill", "stroke", "filter", "mask", "clip-path", "xlink:href", "href"], v = (o) => {
+      const F = ["fill", "stroke", "filter", "mask", "clip-path", "xlink:href", "href"], v = (a) => {
         F.forEach((s) => {
-          const n = o.getAttribute(s);
+          const n = a.getAttribute(s);
           if (n) {
-            const p = n.replace(/url\(#([^)]+)\)/g, (f, c) => d[c] ? `url(#${d[c]})` : f).replace(/#([^\s]+)/g, (f, c) => d[c] ? `#${d[c]}` : f);
-            p !== n && o.setAttribute(s, p);
+            const p = n.replace(/url\(#([^)]+)\)/g, (u, c) => d[c] ? `url(#${d[c]})` : u).replace(/#([^\s]+)/g, (u, c) => d[c] ? `#${d[c]}` : u);
+            p !== n && a.setAttribute(s, p);
           }
         });
       };
-      a.querySelectorAll("*").forEach((o) => {
-        v(o);
+      o.querySelectorAll("*").forEach((a) => {
+        v(a);
       });
     };
     return k(() => {
       i.randomizeIds && l.value && b(l.value);
-    }), (a, r) => (u(), x(z(e.as), {
+    }), (o, r) => (f(), x(z(e.as), {
       "aria-hidden": e.decorative ? "true" : void 0,
       class: "kui-icon flag-tj-icon",
       "data-testid": "kui-icon-wrapper-flag-tj-icon",
       style: C(S.value)
     }, {
       default: I(() => [
-        (u(), g("svg", {
+        (f(), g("svg", {
           ref_key: "svgElement",
           ref: l,
           "aria-hidden": e.decorative ? "true" : void 0,
@@ -172,7 +175,7 @@ const y = (e) => (_("data-v-c6c7f25b"), e = e(), w(), e), D = ["aria-hidden"], Z
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg"
         }, [
-          e.title ? (u(), g("title", Z, M(e.title), 1)) : N("", !0),
+          e.title ? (f(), g("title", Z, M(e.title), 1)) : N("", !0),
           q,
           E
         ], 8, D))

package/dist/kong-icons.es1160.js.map

@@ -1 +1 @@
-{"version":3,"file":"kong-icons.es1160.js","sources":["../src/components/flags/FlagTjIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagTjIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Mon, 23 Sep 2024 18:33:30 GMT\n *\n * GitHub: https://github.com/Kong/icons\n * License: Apache-2.0\n */\n\nimport { computed, ref, onMounted } from 'vue'\nimport { KUI_ICON_SIZE_50 } from '@kong/design-tokens'\n\nconst props = defineProps({\n  /** The accessibility text provided to screen readers */\n  title: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  /** The icon color. Defaults to `currentColor` which inherits text color from the parent element */\n  color: {\n    type: String,\n    required: false,\n    default: 'currentColor',\n  },\n  /** The CSS display property for the icon. Defaults to `block` */\n  display: {\n    type: String,\n    required: false,\n    default: 'block',\n  },\n  /** Whether the icon is just eye-candy or is meaningful to the page (should screen-readers ignore the icon?) */\n  decorative: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  /** The icon size */\n  size: {\n    type: [Number, String],\n    required: false,\n    default: KUI_ICON_SIZE_50, // if setting to the imported const fails, just pass a number of 24 as the default.\n    validator: (sizeValue: number | string): boolean => {\n      if (typeof sizeValue === 'number' && sizeValue > 0) {\n        return true\n      }\n\n      if (typeof sizeValue === 'string') {\n        // Strip `px` from the string\n        const sanitizedSize = String(sizeValue).replace(/px/gi, '')\n        const sizeNumber = Number(sanitizedSize)\n        if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n          return true\n        }\n      }\n\n      return false\n    },\n  },\n  /** The HTML tag to utilize for the icon's wrapper element. Defaults to `span` */\n  as: {\n    type: String,\n    required: false,\n    default: 'span',\n  },\n  /** A boolean to enable prefixing any internal SVGs with a unique string; useful when there are potentially multiple SVG instances on the same page and the SVG utilizes IDs and references internally (e.g. in the `<defs>` tag. Typically only set to false during snapshot testing. Defaults to `true`. */\n  randomizeIds: {\n    type: Boolean,\n    default: true,\n  },\n})\n\nconst svgElement = ref<SVGElement | null>(null)\n\nconst iconSize = computed((): string => {\n  // If props.size is a number, ensure it's greater than zero\n  if (typeof props.size === 'number' && props.size > 0) {\n    return `${props.size}px`\n  }\n\n  if (typeof props.size === 'string') {\n    // Strip `px` from the string\n    const sanitizedSize = String(props.size).replace(/px/gi, '')\n    const sizeNumber = Number(sanitizedSize)\n    if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n      return `${sizeNumber}px`\n    }\n  }\n\n  // Return the default icon size\n  return KUI_ICON_SIZE_50\n})\n\n/**\n * We are adding styles inline to avoid additional stylesheet imports in the host application/component.\n * All of the properties should be mapped to component props for customization.\n */\nconst rootElementStyles = computed((): Record<string, string> => ({\n  boxSizing: 'border-box',\n  color: props.color,\n  display: props.display,\n  flexShrink: '0',\n  height: iconSize.value,\n  lineHeight: '0',\n  width: iconSize.value,\n}))\n\n/**\n * Prefixes all IDs within the <defs> section of an SVG element and updates all references to these IDs. This is useful to avoid ID conflicts when embedding multiple SVGs in a document.\n *\n * The function performs the following steps:\n * 1. Finds all direct children of the <defs> element that have an `id` attribute and prefixes their IDs with a random string.\n * 2. Updates all references to these prefixed IDs in attributes like `url(#id)`, `href`, `xlink:href`, etc.\n *\n * The prefix is a random string generated using `Math.random().toString(36).substring(2, 12)` which should be sufficient for most use-cases.\n *\n * @param {SVGElement} svgElement - The SVG element whose potential IDs need to be prefixed.\n */\nconst prefixSvgIds = (svgElement: SVGElement): void => {\n  if (!svgElement) {\n    return\n  }\n\n  const defsElement = svgElement.querySelector('defs')\n\n  // Prepare a map to store the original and new IDs for quick lookups\n  const idMap: Record<string, string> = {}\n\n  if (defsElement) {\n    // Step 1: Prefix all direct children of <defs> that have an `id`\n    defsElement.querySelectorAll('[id]').forEach((element) => {\n      const originalId = element.getAttribute('id')\n      const newId = `${Math.random().toString(36).substring(2, 12)}-${originalId}`\n\n      // Map old id to new id\n      idMap[originalId!] = newId\n\n      // Update the element's ID with the new prefixed ID\n      element.setAttribute('id', newId)\n    })\n  }\n\n  // Step 2: Update all references to these prefixed IDs in attributes like `url(#id)`, `href`, `xlink:href`\n  const referencingAttributes = ['fill', 'stroke', 'filter', 'mask', 'clip-path', 'xlink:href', 'href']\n\n  // Function to update references to IDs in attributes\n  const updateReferences = (element: Element): void => {\n    referencingAttributes.forEach((attr) => {\n      const attrValue = element.getAttribute(attr)\n      if (attrValue) {\n        // Match any url(#id) or href=\"#id\" references\n        const updatedValue = attrValue.replace(/url\\(#([^)]+)\\)/g, (match, id) => {\n          return idMap[id] ? `url(#${idMap[id]})` : match\n        }).replace(/#([^\\s]+)/g, (match, id) => {\n          return idMap[id] ? `#${idMap[id]}` : match\n        })\n\n        // If the value changed, update the attribute\n        if (updatedValue !== attrValue) {\n          element.setAttribute(attr, updatedValue)\n        }\n      }\n    })\n  }\n\n  // Traverse all elements in the SVG to update ID references\n  svgElement.querySelectorAll('*').forEach((element) => {\n    updateReferences(element)\n  })\n}\n\nonMounted(() => {\n  if (props.randomizeIds && svgElement.value) {\n    prefixSvgIds(svgElement.value)\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    :aria-hidden=\"decorative ? 'true' : undefined\"\n    class=\"kui-icon flag-tj-icon\"\n    data-testid=\"kui-icon-wrapper-flag-tj-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      ref=\"svgElement\"\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-tj-icon\"\n      fill=\"none\"\n      height=\"100%\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      width=\"100%\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title\n        v-if=\"title\"\n        data-testid=\"kui-icon-svg-title\"\n      >\n        {{ title }}\n      </title>\n      <g clip-path=\"url(#clip0_247_6263)\">\n        <path\n          d=\"M1.19072 6.78262C0.427875 8.36025 0 10.1302 0 12C0 13.8698 0.427875 15.6397 1.19072 17.2174L12 18.2609L22.8093 17.2174C23.5721 15.6397 24 13.8698 24 12C24 10.1302 23.5721 8.36025 22.8093 6.78262L12 5.73914L1.19072 6.78262Z\"\n          fill=\"#F0F0F0\"\n        />\n        <path\n          d=\"M1.19116 17.2173C3.13212 21.2313 7.24254 24 12 24C16.7575 24 20.868 21.2313 22.8089 17.2173H1.19116Z\"\n          fill=\"#6DA544\"\n        />\n        <path\n          d=\"M1.19116 6.78263H22.8089C20.868 2.76872 16.7575 0 12 0C7.24254 0 3.13212 2.76872 1.19116 6.78263Z\"\n          fill=\"#D80027\"\n        />\n        <path\n          d=\"M9.91309 15.1305H14.087V13.3565L13.2522 13.7739L12.0001 12.5217L10.7479 13.7739L9.91309 13.3565V15.1305Z\"\n          fill=\"#FFDA44\"\n        />\n        <path\n          d=\"M7.52504 13.0435L7.71934 13.6413H8.34793L7.83934 14.0108L8.03363 14.6087L7.52504 14.2392L7.01645 14.6087L7.21074 14.0108L6.70215 13.6413H7.33074L7.52504 13.0435Z\"\n          fill=\"#FFDA44\"\n        />\n        <path\n          d=\"M8.12733 10.9565L8.32163 11.5544H8.95022L8.44163 11.9239L8.63588 12.5217L8.12733 12.1523L7.61874 12.5217L7.81304 11.9239L7.30444 11.5544H7.93304L8.12733 10.9565Z\"\n          fill=\"#FFDA44\"\n        />\n        <path\n          d=\"M9.84926 9.3913L10.0436 9.98914H10.6721L10.1636 10.3587L10.3578 10.9565L9.84926 10.587L9.34071 10.9565L9.53496 10.3587L9.02637 9.98914H9.65501L9.84926 9.3913Z\"\n          fill=\"#FFDA44\"\n        />\n        <path\n          d=\"M16.4752 13.0435L16.2809 13.6413H15.6523L16.1609 14.0108L15.9666 14.6087L16.4752 14.2392L16.9838 14.6087L16.7895 14.0108L17.2981 13.6413H16.6695L16.4752 13.0435Z\"\n          fill=\"#FFDA44\"\n        />\n        <path\n          d=\"M15.8729 10.9565L15.6786 11.5544H15.05L15.5586 11.9239L15.3643 12.5217L15.8729 12.1523L16.3815 12.5217L16.1872 11.9239L16.6958 11.5544H16.0672L15.8729 10.9565Z\"\n          fill=\"#FFDA44\"\n        />\n        <path\n          d=\"M14.151 9.3913L13.9567 9.98914H13.3281L13.8366 10.3587L13.6424 10.9565L14.151 10.587L14.6595 10.9565L14.4653 10.3587L14.9738 9.98914H14.3452L14.151 9.3913Z\"\n          fill=\"#FFDA44\"\n        />\n        <path\n          d=\"M12.0001 8.60864L12.1944 9.20649H12.823L12.3144 9.576L12.5087 10.1738L12.0001 9.80438L11.4915 10.1738L11.6858 9.576L11.1772 9.20649H11.8058L12.0001 8.60864Z\"\n          fill=\"#FFDA44\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"clip0_247_6263\">\n          <rect\n            fill=\"white\"\n            height=\"24\"\n            width=\"24\"\n          />\n        </clipPath>\n      </defs>\n    </svg>\n  </component>\n</template>\n\n<style lang=\"scss\" scoped>\n/**\n * We are adding styles inline to avoid additional stylesheet imports in the host application/component.\n * Do not add styles into this component file.\n */\n</style>\n"],"names":["props","__props","svgElement","ref","iconSize","computed","sanitizedSize","sizeNumber","KUI_ICON_SIZE_50","rootElementStyles","prefixSvgIds","defsElement","idMap","element","originalId","newId","referencingAttributes","updateReferences","attr","attrValue","updatedValue","match","id","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,UAAMA,IAAQC,GA4DRC,IAAaC,EAAuB,IAAI,GAExCC,IAAWC,EAAS,MAAc;AAEtC,UAAI,OAAOL,EAAM,QAAS,YAAYA,EAAM,OAAO;AAC1C,eAAA,GAAGA,EAAM,IAAI;AAGlB,UAAA,OAAOA,EAAM,QAAS,UAAU;AAElC,cAAMM,IAAgB,OAAON,EAAM,IAAI,EAAE,QAAQ,QAAQ,EAAE,GACrDO,IAAa,OAAOD,CAAa;AACnC,YAAAC,KAAc,CAAC,MAAMA,CAAU,KAAK,OAAO,UAAUA,CAAU,KAAKA,IAAa;AACnF,iBAAO,GAAGA,CAAU;AAAA,MAExB;AAGO,aAAAC;AAAA,IAAA,CACR,GAMKC,IAAoBJ,EAAS,OAA+B;AAAA,MAChE,WAAW;AAAA,MACX,OAAOL,EAAM;AAAA,MACb,SAASA,EAAM;AAAA,MACf,YAAY;AAAA,MACZ,QAAQI,EAAS;AAAA,MACjB,YAAY;AAAA,MACZ,OAAOA,EAAS;AAAA,IAChB,EAAA,GAaIM,IAAe,CAACR,MAAiC;AACrD,UAAI,CAACA;AACH;AAGI,YAAAS,IAAcT,EAAW,cAAc,MAAM,GAG7CU,IAAgC,CAAA;AAEtC,MAAID,KAEFA,EAAY,iBAAiB,MAAM,EAAE,QAAQ,CAACE,MAAY;AAClD,cAAAC,IAAaD,EAAQ,aAAa,IAAI,GACtCE,IAAQ,GAAG,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,UAAU,GAAG,EAAE,CAAC,IAAID,CAAU;AAG1E,QAAAF,EAAME,CAAW,IAAIC,GAGbF,EAAA,aAAa,MAAME,CAAK;AAAA,MAAA,CACjC;AAIG,YAAAC,IAAwB,CAAC,QAAQ,UAAU,UAAU,QAAQ,aAAa,cAAc,MAAM,GAG9FC,IAAmB,CAACJ,MAA2B;AAC7B,QAAAG,EAAA,QAAQ,CAACE,MAAS;AAChC,gBAAAC,IAAYN,EAAQ,aAAaK,CAAI;AAC3C,cAAIC,GAAW;AAEb,kBAAMC,IAAeD,EAAU,QAAQ,oBAAoB,CAACE,GAAOC,MAC1DV,EAAMU,CAAE,IAAI,QAAQV,EAAMU,CAAE,CAAC,MAAMD,CAC3C,EAAE,QAAQ,cAAc,CAACA,GAAOC,MACxBV,EAAMU,CAAE,IAAI,IAAIV,EAAMU,CAAE,CAAC,KAAKD,CACtC;AAGD,YAAID,MAAiBD,KACXN,EAAA,aAAaK,GAAME,CAAY;AAAA,UAE3C;AAAA,QAAA,CACD;AAAA,MAAA;AAIHlB,MAAAA,EAAW,iBAAiB,GAAG,EAAE,QAAQ,CAACW,MAAY;AACpD,QAAAI,EAAiBJ,CAAO;AAAA,MAAA,CACzB;AAAA,IAAA;AAGH,WAAAU,EAAU,MAAM;AACV,MAAAvB,EAAM,gBAAgBE,EAAW,SACnCQ,EAAaR,EAAW,KAAK;AAAA,IAC/B,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"kong-icons.es1160.js","sources":["../src/components/flags/FlagTjIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagTjIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Mon, 23 Sep 2024 18:37:12 GMT\n *\n * GitHub: https://github.com/Kong/icons\n * License: Apache-2.0\n */\n\nimport { computed, ref, onMounted } from 'vue'\nimport { KUI_ICON_SIZE_50 } from '@kong/design-tokens'\n\nconst props = defineProps({\n  /** The accessibility text provided to screen readers */\n  title: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  /** The icon color. Defaults to `currentColor` which inherits text color from the parent element */\n  color: {\n    type: String,\n    required: false,\n    default: 'currentColor',\n  },\n  /** The CSS display property for the icon. Defaults to `block` */\n  display: {\n    type: String,\n    required: false,\n    default: 'block',\n  },\n  /** Whether the icon is just eye-candy or is meaningful to the page (should screen-readers ignore the icon?) */\n  decorative: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  /** The icon size */\n  size: {\n    type: [Number, String],\n    required: false,\n    default: KUI_ICON_SIZE_50, // if setting to the imported const fails, just pass a number of 24 as the default.\n    validator: (sizeValue: number | string): boolean => {\n      if (typeof sizeValue === 'number' && sizeValue > 0) {\n        return true\n      }\n\n      if (typeof sizeValue === 'string') {\n        // Strip `px` from the string\n        const sanitizedSize = String(sizeValue).replace(/px/gi, '')\n        const sizeNumber = Number(sanitizedSize)\n        if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n          return true\n        }\n      }\n\n      return false\n    },\n  },\n  /** The HTML tag to utilize for the icon's wrapper element. Defaults to `span` */\n  as: {\n    type: String,\n    required: false,\n    default: 'span',\n  },\n  /** A boolean to enable prefixing any internal SVGs with a unique string; useful when there are potentially multiple SVG instances on the same page and the SVG utilizes IDs and references internally (e.g. in the `<defs>` tag).\n   * Typically only set to false during snapshot testing.\n   * Defaults to `true`.\n   */\n  randomizeIds: {\n    type: Boolean,\n    default: true,\n  },\n})\n\nconst svgElement = ref<SVGElement | null>(null)\n\nconst iconSize = computed((): string => {\n  // If props.size is a number, ensure it's greater than zero\n  if (typeof props.size === 'number' && props.size > 0) {\n    return `${props.size}px`\n  }\n\n  if (typeof props.size === 'string') {\n    // Strip `px` from the string\n    const sanitizedSize = String(props.size).replace(/px/gi, '')\n    const sizeNumber = Number(sanitizedSize)\n    if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n      return `${sizeNumber}px`\n    }\n  }\n\n  // Return the default icon size\n  return KUI_ICON_SIZE_50\n})\n\n/**\n * We are adding styles inline to avoid additional stylesheet imports in the host application/component.\n * All of the properties should be mapped to component props for customization.\n */\nconst rootElementStyles = computed((): Record<string, string> => ({\n  boxSizing: 'border-box',\n  color: props.color,\n  display: props.display,\n  flexShrink: '0',\n  height: iconSize.value,\n  lineHeight: '0',\n  width: iconSize.value,\n}))\n\n/**\n * Prefixes all IDs within the <defs> section of an SVG element and updates all references to these IDs. This is useful to avoid ID conflicts when embedding multiple SVGs in a document.\n *\n * The function performs the following steps:\n * 1. Finds all direct children of the <defs> element that have an `id` attribute and prefixes their IDs with a random string.\n * 2. Updates all references to these prefixed IDs in attributes like `url(#id)`, `href`, `xlink:href`, etc.\n *\n * The prefix is a random string generated using `Math.random().toString(36).substring(2, 12)` which should be sufficient for most use-cases.\n *\n * @param {SVGElement} svgElement - The SVG element whose potential IDs need to be prefixed.\n */\nconst prefixSvgIds = (svgElement: SVGElement): void => {\n  if (!svgElement) {\n    return\n  }\n\n  const defsElement = svgElement.querySelector('defs')\n\n  // Prepare a map to store the original and new IDs for quick lookups\n  const idMap: Record<string, string> = {}\n\n  if (defsElement) {\n    // Step 1: Prefix all direct children of <defs> that have an `id`\n    defsElement.querySelectorAll('[id]').forEach((element) => {\n      const originalId = element.getAttribute('id')\n      const newId = `${Math.random().toString(36).substring(2, 12)}-${originalId}`\n\n      // Map old id to new id\n      idMap[originalId!] = newId\n\n      // Update the element's ID with the new prefixed ID\n      element.setAttribute('id', newId)\n    })\n  }\n\n  // Step 2: Update all references to these prefixed IDs in attributes like `url(#id)`, `href`, `xlink:href`\n  const referencingAttributes = ['fill', 'stroke', 'filter', 'mask', 'clip-path', 'xlink:href', 'href']\n\n  // Function to update references to IDs in attributes\n  const updateReferences = (element: Element): void => {\n    referencingAttributes.forEach((attr) => {\n      const attrValue = element.getAttribute(attr)\n      if (attrValue) {\n        // Match any url(#id) or href=\"#id\" references\n        const updatedValue = attrValue.replace(/url\\(#([^)]+)\\)/g, (match, id) => {\n          return idMap[id] ? `url(#${idMap[id]})` : match\n        }).replace(/#([^\\s]+)/g, (match, id) => {\n          return idMap[id] ? `#${idMap[id]}` : match\n        })\n\n        // If the value changed, update the attribute\n        if (updatedValue !== attrValue) {\n          element.setAttribute(attr, updatedValue)\n        }\n      }\n    })\n  }\n\n  // Traverse all elements in the SVG to update ID references\n  svgElement.querySelectorAll('*').forEach((element) => {\n    updateReferences(element)\n  })\n}\n\nonMounted(() => {\n  if (props.randomizeIds && svgElement.value) {\n    prefixSvgIds(svgElement.value)\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    :aria-hidden=\"decorative ? 'true' : undefined\"\n    class=\"kui-icon flag-tj-icon\"\n    data-testid=\"kui-icon-wrapper-flag-tj-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      ref=\"svgElement\"\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-tj-icon\"\n      fill=\"none\"\n      height=\"100%\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      width=\"100%\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title\n        v-if=\"title\"\n        data-testid=\"kui-icon-svg-title\"\n      >\n        {{ title }}\n      </title>\n      <g clip-path=\"url(#clip0_247_6263)\">\n        <path\n          d=\"M1.19072 6.78262C0.427875 8.36025 0 10.1302 0 12C0 13.8698 0.427875 15.6397 1.19072 17.2174L12 18.2609L22.8093 17.2174C23.5721 15.6397 24 13.8698 24 12C24 10.1302 23.5721 8.36025 22.8093 6.78262L12 5.73914L1.19072 6.78262Z\"\n          fill=\"#F0F0F0\"\n        />\n        <path\n          d=\"M1.19116 17.2173C3.13212 21.2313 7.24254 24 12 24C16.7575 24 20.868 21.2313 22.8089 17.2173H1.19116Z\"\n          fill=\"#6DA544\"\n        />\n        <path\n          d=\"M1.19116 6.78263H22.8089C20.868 2.76872 16.7575 0 12 0C7.24254 0 3.13212 2.76872 1.19116 6.78263Z\"\n          fill=\"#D80027\"\n        />\n        <path\n          d=\"M9.91309 15.1305H14.087V13.3565L13.2522 13.7739L12.0001 12.5217L10.7479 13.7739L9.91309 13.3565V15.1305Z\"\n          fill=\"#FFDA44\"\n        />\n        <path\n          d=\"M7.52504 13.0435L7.71934 13.6413H8.34793L7.83934 14.0108L8.03363 14.6087L7.52504 14.2392L7.01645 14.6087L7.21074 14.0108L6.70215 13.6413H7.33074L7.52504 13.0435Z\"\n          fill=\"#FFDA44\"\n        />\n        <path\n          d=\"M8.12733 10.9565L8.32163 11.5544H8.95022L8.44163 11.9239L8.63588 12.5217L8.12733 12.1523L7.61874 12.5217L7.81304 11.9239L7.30444 11.5544H7.93304L8.12733 10.9565Z\"\n          fill=\"#FFDA44\"\n        />\n        <path\n          d=\"M9.84926 9.3913L10.0436 9.98914H10.6721L10.1636 10.3587L10.3578 10.9565L9.84926 10.587L9.34071 10.9565L9.53496 10.3587L9.02637 9.98914H9.65501L9.84926 9.3913Z\"\n          fill=\"#FFDA44\"\n        />\n        <path\n          d=\"M16.4752 13.0435L16.2809 13.6413H15.6523L16.1609 14.0108L15.9666 14.6087L16.4752 14.2392L16.9838 14.6087L16.7895 14.0108L17.2981 13.6413H16.6695L16.4752 13.0435Z\"\n          fill=\"#FFDA44\"\n        />\n        <path\n          d=\"M15.8729 10.9565L15.6786 11.5544H15.05L15.5586 11.9239L15.3643 12.5217L15.8729 12.1523L16.3815 12.5217L16.1872 11.9239L16.6958 11.5544H16.0672L15.8729 10.9565Z\"\n          fill=\"#FFDA44\"\n        />\n        <path\n          d=\"M14.151 9.3913L13.9567 9.98914H13.3281L13.8366 10.3587L13.6424 10.9565L14.151 10.587L14.6595 10.9565L14.4653 10.3587L14.9738 9.98914H14.3452L14.151 9.3913Z\"\n          fill=\"#FFDA44\"\n        />\n        <path\n          d=\"M12.0001 8.60864L12.1944 9.20649H12.823L12.3144 9.576L12.5087 10.1738L12.0001 9.80438L11.4915 10.1738L11.6858 9.576L11.1772 9.20649H11.8058L12.0001 8.60864Z\"\n          fill=\"#FFDA44\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"clip0_247_6263\">\n          <rect\n            fill=\"white\"\n            height=\"24\"\n            width=\"24\"\n          />\n        </clipPath>\n      </defs>\n    </svg>\n  </component>\n</template>\n\n<style lang=\"scss\" scoped>\n/**\n * We are adding styles inline to avoid additional stylesheet imports in the host application/component.\n * Do not add styles into this component file.\n */\n</style>\n"],"names":["props","__props","svgElement","ref","iconSize","computed","sanitizedSize","sizeNumber","KUI_ICON_SIZE_50","rootElementStyles","prefixSvgIds","defsElement","idMap","element","originalId","newId","referencingAttributes","updateReferences","attr","attrValue","updatedValue","match","id","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,UAAMA,IAAQC,GA+DRC,IAAaC,EAAuB,IAAI,GAExCC,IAAWC,EAAS,MAAc;AAEtC,UAAI,OAAOL,EAAM,QAAS,YAAYA,EAAM,OAAO;AAC1C,eAAA,GAAGA,EAAM,IAAI;AAGlB,UAAA,OAAOA,EAAM,QAAS,UAAU;AAElC,cAAMM,IAAgB,OAAON,EAAM,IAAI,EAAE,QAAQ,QAAQ,EAAE,GACrDO,IAAa,OAAOD,CAAa;AACnC,YAAAC,KAAc,CAAC,MAAMA,CAAU,KAAK,OAAO,UAAUA,CAAU,KAAKA,IAAa;AACnF,iBAAO,GAAGA,CAAU;AAAA,MAExB;AAGO,aAAAC;AAAA,IAAA,CACR,GAMKC,IAAoBJ,EAAS,OAA+B;AAAA,MAChE,WAAW;AAAA,MACX,OAAOL,EAAM;AAAA,MACb,SAASA,EAAM;AAAA,MACf,YAAY;AAAA,MACZ,QAAQI,EAAS;AAAA,MACjB,YAAY;AAAA,MACZ,OAAOA,EAAS;AAAA,IAChB,EAAA,GAaIM,IAAe,CAACR,MAAiC;AACrD,UAAI,CAACA;AACH;AAGI,YAAAS,IAAcT,EAAW,cAAc,MAAM,GAG7CU,IAAgC,CAAA;AAEtC,MAAID,KAEFA,EAAY,iBAAiB,MAAM,EAAE,QAAQ,CAACE,MAAY;AAClD,cAAAC,IAAaD,EAAQ,aAAa,IAAI,GACtCE,IAAQ,GAAG,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,UAAU,GAAG,EAAE,CAAC,IAAID,CAAU;AAG1E,QAAAF,EAAME,CAAW,IAAIC,GAGbF,EAAA,aAAa,MAAME,CAAK;AAAA,MAAA,CACjC;AAIG,YAAAC,IAAwB,CAAC,QAAQ,UAAU,UAAU,QAAQ,aAAa,cAAc,MAAM,GAG9FC,IAAmB,CAACJ,MAA2B;AAC7B,QAAAG,EAAA,QAAQ,CAACE,MAAS;AAChC,gBAAAC,IAAYN,EAAQ,aAAaK,CAAI;AAC3C,cAAIC,GAAW;AAEb,kBAAMC,IAAeD,EAAU,QAAQ,oBAAoB,CAACE,GAAOC,MAC1DV,EAAMU,CAAE,IAAI,QAAQV,EAAMU,CAAE,CAAC,MAAMD,CAC3C,EAAE,QAAQ,cAAc,CAACA,GAAOC,MACxBV,EAAMU,CAAE,IAAI,IAAIV,EAAMU,CAAE,CAAC,KAAKD,CACtC;AAGD,YAAID,MAAiBD,KACXN,EAAA,aAAaK,GAAME,CAAY;AAAA,UAE3C;AAAA,QAAA,CACD;AAAA,MAAA;AAIHlB,MAAAA,EAAW,iBAAiB,GAAG,EAAE,QAAQ,CAACW,MAAY;AACpD,QAAAI,EAAiBJ,CAAO;AAAA,MAAA,CACzB;AAAA,IAAA;AAGH,WAAAU,EAAU,MAAM;AACV,MAAAvB,EAAM,gBAAgBE,EAAW,SACnCQ,EAAaR,EAAW,KAAK;AAAA,IAC/B,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/kong-icons.es1162.js

@@ -1,6 +1,6 @@
 import { defineComponent as C, ref as F, computed as g, onMounted as x, openBlock as f, createBlock as z, resolveDynamicComponent as I, normalizeStyle as N, withCtx as _, createElementBlock as L, toDisplayString as w, createCommentVNode as H, pushScopeId as q, popScopeId as M, createElementVNode as i } from "vue";
 import { KUI_ICON_SIZE_50 as m } from "./kong-icons.es1218.js";
-const y = (e) => (q("data-v-0a821ad5"), e = e(), M(), e), A = ["aria-hidden"], E = {
+const y = (e) => (q("data-v-37abd3d1"), e = e(), M(), e), A = ["aria-hidden"], E = {
   key: 0,
   "data-testid": "kui-icon-svg-title"
 }, B = /* @__PURE__ */ y(() => /* @__PURE__ */ i("g", { "clip-path": "url(#clip0_247_6268)" }, [
@@ -86,7 +86,10 @@ const y = (e) => (q("data-v-0a821ad5"), e = e(), M(), e), A = ["aria-hidden"], E
       required: !1,
       default: "span"
     },
-    /** A boolean to enable prefixing any internal SVGs with a unique string; useful when there are potentially multiple SVG instances on the same page and the SVG utilizes IDs and references internally (e.g. in the `<defs>` tag. Typically only set to false during snapshot testing. Defaults to `true`. */
+    /** A boolean to enable prefixing any internal SVGs with a unique string; useful when there are potentially multiple SVG instances on the same page and the SVG utilizes IDs and references internally (e.g. in the `<defs>` tag).
+     * Typically only set to false during snapshot testing.
+     * Defaults to `true`.
+     */
     randomizeIds: {
       type: Boolean,
       default: !0

package/dist/kong-icons.es1162.js.map

@@ -1 +1 @@
-{"version":3,"file":"kong-icons.es1162.js","sources":["../src/components/flags/FlagTkIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagTkIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Mon, 23 Sep 2024 18:33:30 GMT\n *\n * GitHub: https://github.com/Kong/icons\n * License: Apache-2.0\n */\n\nimport { computed, ref, onMounted } from 'vue'\nimport { KUI_ICON_SIZE_50 } from '@kong/design-tokens'\n\nconst props = defineProps({\n  /** The accessibility text provided to screen readers */\n  title: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  /** The icon color. Defaults to `currentColor` which inherits text color from the parent element */\n  color: {\n    type: String,\n    required: false,\n    default: 'currentColor',\n  },\n  /** The CSS display property for the icon. Defaults to `block` */\n  display: {\n    type: String,\n    required: false,\n    default: 'block',\n  },\n  /** Whether the icon is just eye-candy or is meaningful to the page (should screen-readers ignore the icon?) */\n  decorative: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  /** The icon size */\n  size: {\n    type: [Number, String],\n    required: false,\n    default: KUI_ICON_SIZE_50, // if setting to the imported const fails, just pass a number of 24 as the default.\n    validator: (sizeValue: number | string): boolean => {\n      if (typeof sizeValue === 'number' && sizeValue > 0) {\n        return true\n      }\n\n      if (typeof sizeValue === 'string') {\n        // Strip `px` from the string\n        const sanitizedSize = String(sizeValue).replace(/px/gi, '')\n        const sizeNumber = Number(sanitizedSize)\n        if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n          return true\n        }\n      }\n\n      return false\n    },\n  },\n  /** The HTML tag to utilize for the icon's wrapper element. Defaults to `span` */\n  as: {\n    type: String,\n    required: false,\n    default: 'span',\n  },\n  /** A boolean to enable prefixing any internal SVGs with a unique string; useful when there are potentially multiple SVG instances on the same page and the SVG utilizes IDs and references internally (e.g. in the `<defs>` tag. Typically only set to false during snapshot testing. Defaults to `true`. */\n  randomizeIds: {\n    type: Boolean,\n    default: true,\n  },\n})\n\nconst svgElement = ref<SVGElement | null>(null)\n\nconst iconSize = computed((): string => {\n  // If props.size is a number, ensure it's greater than zero\n  if (typeof props.size === 'number' && props.size > 0) {\n    return `${props.size}px`\n  }\n\n  if (typeof props.size === 'string') {\n    // Strip `px` from the string\n    const sanitizedSize = String(props.size).replace(/px/gi, '')\n    const sizeNumber = Number(sanitizedSize)\n    if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n      return `${sizeNumber}px`\n    }\n  }\n\n  // Return the default icon size\n  return KUI_ICON_SIZE_50\n})\n\n/**\n * We are adding styles inline to avoid additional stylesheet imports in the host application/component.\n * All of the properties should be mapped to component props for customization.\n */\nconst rootElementStyles = computed((): Record<string, string> => ({\n  boxSizing: 'border-box',\n  color: props.color,\n  display: props.display,\n  flexShrink: '0',\n  height: iconSize.value,\n  lineHeight: '0',\n  width: iconSize.value,\n}))\n\n/**\n * Prefixes all IDs within the <defs> section of an SVG element and updates all references to these IDs. This is useful to avoid ID conflicts when embedding multiple SVGs in a document.\n *\n * The function performs the following steps:\n * 1. Finds all direct children of the <defs> element that have an `id` attribute and prefixes their IDs with a random string.\n * 2. Updates all references to these prefixed IDs in attributes like `url(#id)`, `href`, `xlink:href`, etc.\n *\n * The prefix is a random string generated using `Math.random().toString(36).substring(2, 12)` which should be sufficient for most use-cases.\n *\n * @param {SVGElement} svgElement - The SVG element whose potential IDs need to be prefixed.\n */\nconst prefixSvgIds = (svgElement: SVGElement): void => {\n  if (!svgElement) {\n    return\n  }\n\n  const defsElement = svgElement.querySelector('defs')\n\n  // Prepare a map to store the original and new IDs for quick lookups\n  const idMap: Record<string, string> = {}\n\n  if (defsElement) {\n    // Step 1: Prefix all direct children of <defs> that have an `id`\n    defsElement.querySelectorAll('[id]').forEach((element) => {\n      const originalId = element.getAttribute('id')\n      const newId = `${Math.random().toString(36).substring(2, 12)}-${originalId}`\n\n      // Map old id to new id\n      idMap[originalId!] = newId\n\n      // Update the element's ID with the new prefixed ID\n      element.setAttribute('id', newId)\n    })\n  }\n\n  // Step 2: Update all references to these prefixed IDs in attributes like `url(#id)`, `href`, `xlink:href`\n  const referencingAttributes = ['fill', 'stroke', 'filter', 'mask', 'clip-path', 'xlink:href', 'href']\n\n  // Function to update references to IDs in attributes\n  const updateReferences = (element: Element): void => {\n    referencingAttributes.forEach((attr) => {\n      const attrValue = element.getAttribute(attr)\n      if (attrValue) {\n        // Match any url(#id) or href=\"#id\" references\n        const updatedValue = attrValue.replace(/url\\(#([^)]+)\\)/g, (match, id) => {\n          return idMap[id] ? `url(#${idMap[id]})` : match\n        }).replace(/#([^\\s]+)/g, (match, id) => {\n          return idMap[id] ? `#${idMap[id]}` : match\n        })\n\n        // If the value changed, update the attribute\n        if (updatedValue !== attrValue) {\n          element.setAttribute(attr, updatedValue)\n        }\n      }\n    })\n  }\n\n  // Traverse all elements in the SVG to update ID references\n  svgElement.querySelectorAll('*').forEach((element) => {\n    updateReferences(element)\n  })\n}\n\nonMounted(() => {\n  if (props.randomizeIds && svgElement.value) {\n    prefixSvgIds(svgElement.value)\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    :aria-hidden=\"decorative ? 'true' : undefined\"\n    class=\"kui-icon flag-tk-icon\"\n    data-testid=\"kui-icon-wrapper-flag-tk-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      ref=\"svgElement\"\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-tk-icon\"\n      fill=\"none\"\n      height=\"100%\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      width=\"100%\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title\n        v-if=\"title\"\n        data-testid=\"kui-icon-svg-title\"\n      >\n        {{ title }}\n      </title>\n      <g clip-path=\"url(#clip0_247_6268)\">\n        <path\n          d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z\"\n          fill=\"#FFDA44\"\n        />\n        <path\n          d=\"M19.3043 5.73914C19.1967 6.25641 19.1478 6.80733 19.1478 7.35652C19.1478 10.5222 21.035 13.2621 23.7394 14.4955C23.9097 13.6904 24 12.8558 24 12C24 5.37262 18.6274 0 12 0C5.37262 0 0 5.37262 0 12C0 18.6274 5.37262 24 12 24C16.1101 24 19.7371 21.9332 21.8998 18.7826H6.78263V17.2174H22.8093C22.9733 16.8782 23.1215 16.53 23.2537 16.1739H6.78263L19.3043 5.73914Z\"\n          fill=\"#0052B4\"\n        />\n        <path\n          d=\"M8.81595 6.26086L9.07499 7.05802H9.91311L9.23506 7.55072L9.49409 8.34783L8.81595 7.85522L8.13791 8.34783L8.39689 7.55072L7.71875 7.05802H8.55692L8.81595 6.26086Z\"\n          fill=\"#F0F0F0\"\n        />\n        <path\n          d=\"M5.41122 12L5.73503 12.9965H6.78269L5.93504 13.6122L6.25886 14.6087L5.41122 13.9928L4.56362 14.6087L4.88739 13.6122L4.03979 12.9965H5.08745L5.41122 12Z\"\n          fill=\"#F0F0F0\"\n        />\n        <path\n          d=\"M5.41122 3.65216L5.73503 4.64868H6.78269L5.93504 5.26438L6.25886 6.26085L5.41122 5.645L4.56362 6.26085L4.88739 5.26438L4.03979 4.64868H5.08745L5.41122 3.65216Z\"\n          fill=\"#F0F0F0\"\n        />\n        <path\n          d=\"M2.80257 8.34784L3.12639 9.34435H4.174L3.3264 9.96006L3.65021 10.9565L2.80257 10.3407L1.95498 10.9565L2.27875 9.96006L1.43115 9.34435H2.47876L2.80257 8.34784Z\"\n          fill=\"#F0F0F0\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"clip0_247_6268\">\n          <rect\n            fill=\"white\"\n            height=\"24\"\n            width=\"24\"\n          />\n        </clipPath>\n      </defs>\n    </svg>\n  </component>\n</template>\n\n<style lang=\"scss\" scoped>\n/**\n * We are adding styles inline to avoid additional stylesheet imports in the host application/component.\n * Do not add styles into this component file.\n */\n</style>\n"],"names":["props","__props","svgElement","ref","iconSize","computed","sanitizedSize","sizeNumber","KUI_ICON_SIZE_50","rootElementStyles","prefixSvgIds","defsElement","idMap","element","originalId","newId","referencingAttributes","updateReferences","attr","attrValue","updatedValue","match","id","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,UAAMA,IAAQC,GA4DRC,IAAaC,EAAuB,IAAI,GAExCC,IAAWC,EAAS,MAAc;AAEtC,UAAI,OAAOL,EAAM,QAAS,YAAYA,EAAM,OAAO;AAC1C,eAAA,GAAGA,EAAM,IAAI;AAGlB,UAAA,OAAOA,EAAM,QAAS,UAAU;AAElC,cAAMM,IAAgB,OAAON,EAAM,IAAI,EAAE,QAAQ,QAAQ,EAAE,GACrDO,IAAa,OAAOD,CAAa;AACnC,YAAAC,KAAc,CAAC,MAAMA,CAAU,KAAK,OAAO,UAAUA,CAAU,KAAKA,IAAa;AACnF,iBAAO,GAAGA,CAAU;AAAA,MAExB;AAGO,aAAAC;AAAA,IAAA,CACR,GAMKC,IAAoBJ,EAAS,OAA+B;AAAA,MAChE,WAAW;AAAA,MACX,OAAOL,EAAM;AAAA,MACb,SAASA,EAAM;AAAA,MACf,YAAY;AAAA,MACZ,QAAQI,EAAS;AAAA,MACjB,YAAY;AAAA,MACZ,OAAOA,EAAS;AAAA,IAChB,EAAA,GAaIM,IAAe,CAACR,MAAiC;AACrD,UAAI,CAACA;AACH;AAGI,YAAAS,IAAcT,EAAW,cAAc,MAAM,GAG7CU,IAAgC,CAAA;AAEtC,MAAID,KAEFA,EAAY,iBAAiB,MAAM,EAAE,QAAQ,CAACE,MAAY;AAClD,cAAAC,IAAaD,EAAQ,aAAa,IAAI,GACtCE,IAAQ,GAAG,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,UAAU,GAAG,EAAE,CAAC,IAAID,CAAU;AAG1E,QAAAF,EAAME,CAAW,IAAIC,GAGbF,EAAA,aAAa,MAAME,CAAK;AAAA,MAAA,CACjC;AAIG,YAAAC,IAAwB,CAAC,QAAQ,UAAU,UAAU,QAAQ,aAAa,cAAc,MAAM,GAG9FC,IAAmB,CAACJ,MAA2B;AAC7B,QAAAG,EAAA,QAAQ,CAACE,MAAS;AAChC,gBAAAC,IAAYN,EAAQ,aAAaK,CAAI;AAC3C,cAAIC,GAAW;AAEb,kBAAMC,IAAeD,EAAU,QAAQ,oBAAoB,CAACE,GAAOC,MAC1DV,EAAMU,CAAE,IAAI,QAAQV,EAAMU,CAAE,CAAC,MAAMD,CAC3C,EAAE,QAAQ,cAAc,CAACA,GAAOC,MACxBV,EAAMU,CAAE,IAAI,IAAIV,EAAMU,CAAE,CAAC,KAAKD,CACtC;AAGD,YAAID,MAAiBD,KACXN,EAAA,aAAaK,GAAME,CAAY;AAAA,UAE3C;AAAA,QAAA,CACD;AAAA,MAAA;AAIHlB,MAAAA,EAAW,iBAAiB,GAAG,EAAE,QAAQ,CAACW,MAAY;AACpD,QAAAI,EAAiBJ,CAAO;AAAA,MAAA,CACzB;AAAA,IAAA;AAGH,WAAAU,EAAU,MAAM;AACV,MAAAvB,EAAM,gBAAgBE,EAAW,SACnCQ,EAAaR,EAAW,KAAK;AAAA,IAC/B,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"kong-icons.es1162.js","sources":["../src/components/flags/FlagTkIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagTkIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Mon, 23 Sep 2024 18:37:12 GMT\n *\n * GitHub: https://github.com/Kong/icons\n * License: Apache-2.0\n */\n\nimport { computed, ref, onMounted } from 'vue'\nimport { KUI_ICON_SIZE_50 } from '@kong/design-tokens'\n\nconst props = defineProps({\n  /** The accessibility text provided to screen readers */\n  title: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  /** The icon color. Defaults to `currentColor` which inherits text color from the parent element */\n  color: {\n    type: String,\n    required: false,\n    default: 'currentColor',\n  },\n  /** The CSS display property for the icon. Defaults to `block` */\n  display: {\n    type: String,\n    required: false,\n    default: 'block',\n  },\n  /** Whether the icon is just eye-candy or is meaningful to the page (should screen-readers ignore the icon?) */\n  decorative: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  /** The icon size */\n  size: {\n    type: [Number, String],\n    required: false,\n    default: KUI_ICON_SIZE_50, // if setting to the imported const fails, just pass a number of 24 as the default.\n    validator: (sizeValue: number | string): boolean => {\n      if (typeof sizeValue === 'number' && sizeValue > 0) {\n        return true\n      }\n\n      if (typeof sizeValue === 'string') {\n        // Strip `px` from the string\n        const sanitizedSize = String(sizeValue).replace(/px/gi, '')\n        const sizeNumber = Number(sanitizedSize)\n        if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n          return true\n        }\n      }\n\n      return false\n    },\n  },\n  /** The HTML tag to utilize for the icon's wrapper element. Defaults to `span` */\n  as: {\n    type: String,\n    required: false,\n    default: 'span',\n  },\n  /** A boolean to enable prefixing any internal SVGs with a unique string; useful when there are potentially multiple SVG instances on the same page and the SVG utilizes IDs and references internally (e.g. in the `<defs>` tag).\n   * Typically only set to false during snapshot testing.\n   * Defaults to `true`.\n   */\n  randomizeIds: {\n    type: Boolean,\n    default: true,\n  },\n})\n\nconst svgElement = ref<SVGElement | null>(null)\n\nconst iconSize = computed((): string => {\n  // If props.size is a number, ensure it's greater than zero\n  if (typeof props.size === 'number' && props.size > 0) {\n    return `${props.size}px`\n  }\n\n  if (typeof props.size === 'string') {\n    // Strip `px` from the string\n    const sanitizedSize = String(props.size).replace(/px/gi, '')\n    const sizeNumber = Number(sanitizedSize)\n    if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n      return `${sizeNumber}px`\n    }\n  }\n\n  // Return the default icon size\n  return KUI_ICON_SIZE_50\n})\n\n/**\n * We are adding styles inline to avoid additional stylesheet imports in the host application/component.\n * All of the properties should be mapped to component props for customization.\n */\nconst rootElementStyles = computed((): Record<string, string> => ({\n  boxSizing: 'border-box',\n  color: props.color,\n  display: props.display,\n  flexShrink: '0',\n  height: iconSize.value,\n  lineHeight: '0',\n  width: iconSize.value,\n}))\n\n/**\n * Prefixes all IDs within the <defs> section of an SVG element and updates all references to these IDs. This is useful to avoid ID conflicts when embedding multiple SVGs in a document.\n *\n * The function performs the following steps:\n * 1. Finds all direct children of the <defs> element that have an `id` attribute and prefixes their IDs with a random string.\n * 2. Updates all references to these prefixed IDs in attributes like `url(#id)`, `href`, `xlink:href`, etc.\n *\n * The prefix is a random string generated using `Math.random().toString(36).substring(2, 12)` which should be sufficient for most use-cases.\n *\n * @param {SVGElement} svgElement - The SVG element whose potential IDs need to be prefixed.\n */\nconst prefixSvgIds = (svgElement: SVGElement): void => {\n  if (!svgElement) {\n    return\n  }\n\n  const defsElement = svgElement.querySelector('defs')\n\n  // Prepare a map to store the original and new IDs for quick lookups\n  const idMap: Record<string, string> = {}\n\n  if (defsElement) {\n    // Step 1: Prefix all direct children of <defs> that have an `id`\n    defsElement.querySelectorAll('[id]').forEach((element) => {\n      const originalId = element.getAttribute('id')\n      const newId = `${Math.random().toString(36).substring(2, 12)}-${originalId}`\n\n      // Map old id to new id\n      idMap[originalId!] = newId\n\n      // Update the element's ID with the new prefixed ID\n      element.setAttribute('id', newId)\n    })\n  }\n\n  // Step 2: Update all references to these prefixed IDs in attributes like `url(#id)`, `href`, `xlink:href`\n  const referencingAttributes = ['fill', 'stroke', 'filter', 'mask', 'clip-path', 'xlink:href', 'href']\n\n  // Function to update references to IDs in attributes\n  const updateReferences = (element: Element): void => {\n    referencingAttributes.forEach((attr) => {\n      const attrValue = element.getAttribute(attr)\n      if (attrValue) {\n        // Match any url(#id) or href=\"#id\" references\n        const updatedValue = attrValue.replace(/url\\(#([^)]+)\\)/g, (match, id) => {\n          return idMap[id] ? `url(#${idMap[id]})` : match\n        }).replace(/#([^\\s]+)/g, (match, id) => {\n          return idMap[id] ? `#${idMap[id]}` : match\n        })\n\n        // If the value changed, update the attribute\n        if (updatedValue !== attrValue) {\n          element.setAttribute(attr, updatedValue)\n        }\n      }\n    })\n  }\n\n  // Traverse all elements in the SVG to update ID references\n  svgElement.querySelectorAll('*').forEach((element) => {\n    updateReferences(element)\n  })\n}\n\nonMounted(() => {\n  if (props.randomizeIds && svgElement.value) {\n    prefixSvgIds(svgElement.value)\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    :aria-hidden=\"decorative ? 'true' : undefined\"\n    class=\"kui-icon flag-tk-icon\"\n    data-testid=\"kui-icon-wrapper-flag-tk-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      ref=\"svgElement\"\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-tk-icon\"\n      fill=\"none\"\n      height=\"100%\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      width=\"100%\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title\n        v-if=\"title\"\n        data-testid=\"kui-icon-svg-title\"\n      >\n        {{ title }}\n      </title>\n      <g clip-path=\"url(#clip0_247_6268)\">\n        <path\n          d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z\"\n          fill=\"#FFDA44\"\n        />\n        <path\n          d=\"M19.3043 5.73914C19.1967 6.25641 19.1478 6.80733 19.1478 7.35652C19.1478 10.5222 21.035 13.2621 23.7394 14.4955C23.9097 13.6904 24 12.8558 24 12C24 5.37262 18.6274 0 12 0C5.37262 0 0 5.37262 0 12C0 18.6274 5.37262 24 12 24C16.1101 24 19.7371 21.9332 21.8998 18.7826H6.78263V17.2174H22.8093C22.9733 16.8782 23.1215 16.53 23.2537 16.1739H6.78263L19.3043 5.73914Z\"\n          fill=\"#0052B4\"\n        />\n        <path\n          d=\"M8.81595 6.26086L9.07499 7.05802H9.91311L9.23506 7.55072L9.49409 8.34783L8.81595 7.85522L8.13791 8.34783L8.39689 7.55072L7.71875 7.05802H8.55692L8.81595 6.26086Z\"\n          fill=\"#F0F0F0\"\n        />\n        <path\n          d=\"M5.41122 12L5.73503 12.9965H6.78269L5.93504 13.6122L6.25886 14.6087L5.41122 13.9928L4.56362 14.6087L4.88739 13.6122L4.03979 12.9965H5.08745L5.41122 12Z\"\n          fill=\"#F0F0F0\"\n        />\n        <path\n          d=\"M5.41122 3.65216L5.73503 4.64868H6.78269L5.93504 5.26438L6.25886 6.26085L5.41122 5.645L4.56362 6.26085L4.88739 5.26438L4.03979 4.64868H5.08745L5.41122 3.65216Z\"\n          fill=\"#F0F0F0\"\n        />\n        <path\n          d=\"M2.80257 8.34784L3.12639 9.34435H4.174L3.3264 9.96006L3.65021 10.9565L2.80257 10.3407L1.95498 10.9565L2.27875 9.96006L1.43115 9.34435H2.47876L2.80257 8.34784Z\"\n          fill=\"#F0F0F0\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"clip0_247_6268\">\n          <rect\n            fill=\"white\"\n            height=\"24\"\n            width=\"24\"\n          />\n        </clipPath>\n      </defs>\n    </svg>\n  </component>\n</template>\n\n<style lang=\"scss\" scoped>\n/**\n * We are adding styles inline to avoid additional stylesheet imports in the host application/component.\n * Do not add styles into this component file.\n */\n</style>\n"],"names":["props","__props","svgElement","ref","iconSize","computed","sanitizedSize","sizeNumber","KUI_ICON_SIZE_50","rootElementStyles","prefixSvgIds","defsElement","idMap","element","originalId","newId","referencingAttributes","updateReferences","attr","attrValue","updatedValue","match","id","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,UAAMA,IAAQC,GA+DRC,IAAaC,EAAuB,IAAI,GAExCC,IAAWC,EAAS,MAAc;AAEtC,UAAI,OAAOL,EAAM,QAAS,YAAYA,EAAM,OAAO;AAC1C,eAAA,GAAGA,EAAM,IAAI;AAGlB,UAAA,OAAOA,EAAM,QAAS,UAAU;AAElC,cAAMM,IAAgB,OAAON,EAAM,IAAI,EAAE,QAAQ,QAAQ,EAAE,GACrDO,IAAa,OAAOD,CAAa;AACnC,YAAAC,KAAc,CAAC,MAAMA,CAAU,KAAK,OAAO,UAAUA,CAAU,KAAKA,IAAa;AACnF,iBAAO,GAAGA,CAAU;AAAA,MAExB;AAGO,aAAAC;AAAA,IAAA,CACR,GAMKC,IAAoBJ,EAAS,OAA+B;AAAA,MAChE,WAAW;AAAA,MACX,OAAOL,EAAM;AAAA,MACb,SAASA,EAAM;AAAA,MACf,YAAY;AAAA,MACZ,QAAQI,EAAS;AAAA,MACjB,YAAY;AAAA,MACZ,OAAOA,EAAS;AAAA,IAChB,EAAA,GAaIM,IAAe,CAACR,MAAiC;AACrD,UAAI,CAACA;AACH;AAGI,YAAAS,IAAcT,EAAW,cAAc,MAAM,GAG7CU,IAAgC,CAAA;AAEtC,MAAID,KAEFA,EAAY,iBAAiB,MAAM,EAAE,QAAQ,CAACE,MAAY;AAClD,cAAAC,IAAaD,EAAQ,aAAa,IAAI,GACtCE,IAAQ,GAAG,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,UAAU,GAAG,EAAE,CAAC,IAAID,CAAU;AAG1E,QAAAF,EAAME,CAAW,IAAIC,GAGbF,EAAA,aAAa,MAAME,CAAK;AAAA,MAAA,CACjC;AAIG,YAAAC,IAAwB,CAAC,QAAQ,UAAU,UAAU,QAAQ,aAAa,cAAc,MAAM,GAG9FC,IAAmB,CAACJ,MAA2B;AAC7B,QAAAG,EAAA,QAAQ,CAACE,MAAS;AAChC,gBAAAC,IAAYN,EAAQ,aAAaK,CAAI;AAC3C,cAAIC,GAAW;AAEb,kBAAMC,IAAeD,EAAU,QAAQ,oBAAoB,CAACE,GAAOC,MAC1DV,EAAMU,CAAE,IAAI,QAAQV,EAAMU,CAAE,CAAC,MAAMD,CAC3C,EAAE,QAAQ,cAAc,CAACA,GAAOC,MACxBV,EAAMU,CAAE,IAAI,IAAIV,EAAMU,CAAE,CAAC,KAAKD,CACtC;AAGD,YAAID,MAAiBD,KACXN,EAAA,aAAaK,GAAME,CAAY;AAAA,UAE3C;AAAA,QAAA,CACD;AAAA,MAAA;AAIHlB,MAAAA,EAAW,iBAAiB,GAAG,EAAE,QAAQ,CAACW,MAAY;AACpD,QAAAI,EAAiBJ,CAAO;AAAA,MAAA,CACzB;AAAA,IAAA;AAGH,WAAAU,EAAU,MAAM;AACV,MAAAvB,EAAM,gBAAgBE,EAAW,SACnCQ,EAAaR,EAAW,KAAK;AAAA,IAC/B,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/kong-icons.es1164.js

@@ -1,6 +1,6 @@
 import { defineComponent as x, ref as z, computed as h, onMounted as I, openBlock as f, createBlock as N, resolveDynamicComponent as _, normalizeStyle as w, withCtx as L, createElementBlock as m, toDisplayString as q, createCommentVNode as A, pushScopeId as E, popScopeId as M, createElementVNode as l } from "vue";
 import { KUI_ICON_SIZE_50 as y } from "./kong-icons.es1218.js";
-const S = (e) => (E("data-v-bb0118af"), e = e(), M(), e), B = ["aria-hidden"], F = {
+const S = (e) => (E("data-v-0a1bbcc1"), e = e(), M(), e), B = ["aria-hidden"], F = {
   key: 0,
   "data-testid": "kui-icon-svg-title"
 }, $ = /* @__PURE__ */ S(() => /* @__PURE__ */ l("g", { "clip-path": "url(#clip0_1_2318)" }, [
@@ -78,7 +78,10 @@ const S = (e) => (E("data-v-bb0118af"), e = e(), M(), e), B = ["aria-hidden"], F
       required: !1,
       default: "span"
     },
-    /** A boolean to enable prefixing any internal SVGs with a unique string; useful when there are potentially multiple SVG instances on the same page and the SVG utilizes IDs and references internally (e.g. in the `<defs>` tag. Typically only set to false during snapshot testing. Defaults to `true`. */
+    /** A boolean to enable prefixing any internal SVGs with a unique string; useful when there are potentially multiple SVG instances on the same page and the SVG utilizes IDs and references internally (e.g. in the `<defs>` tag).
+     * Typically only set to false during snapshot testing.
+     * Defaults to `true`.
+     */
     randomizeIds: {
       type: Boolean,
       default: !0
@@ -107,15 +110,15 @@ const S = (e) => (E("data-v-bb0118af"), e = e(), M(), e), B = ["aria-hidden"], F
         return;
       const i = n.querySelector("defs"), s = {};
       i && i.querySelectorAll("[id]").forEach((o) => {
-        const d = o.getAttribute("id"), a = `${Math.random().toString(36).substring(2, 12)}-${d}`;
-        s[d] = a, o.setAttribute("id", a);
+        const c = o.getAttribute("id"), a = `${Math.random().toString(36).substring(2, 12)}-${c}`;
+        s[c] = a, o.setAttribute("id", a);
       });
       const C = ["fill", "stroke", "filter", "mask", "clip-path", "xlink:href", "href"], k = (o) => {
-        C.forEach((d) => {
-          const a = o.getAttribute(d);
+        C.forEach((c) => {
+          const a = o.getAttribute(c);
           if (a) {
-            const g = a.replace(/url\(#([^)]+)\)/g, (u, c) => s[c] ? `url(#${s[c]})` : u).replace(/#([^\s]+)/g, (u, c) => s[c] ? `#${s[c]}` : u);
-            g !== a && o.setAttribute(d, g);
+            const g = a.replace(/url\(#([^)]+)\)/g, (u, d) => s[d] ? `url(#${s[d]})` : u).replace(/#([^\s]+)/g, (u, d) => s[d] ? `#${s[d]}` : u);
+            g !== a && o.setAttribute(c, g);
           }
         });
       };

package/dist/kong-icons.es1164.js.map

@@ -1 +1 @@
-{"version":3,"file":"kong-icons.es1164.js","sources":["../src/components/flags/FlagTlIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagTlIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Mon, 23 Sep 2024 18:33:30 GMT\n *\n * GitHub: https://github.com/Kong/icons\n * License: Apache-2.0\n */\n\nimport { computed, ref, onMounted } from 'vue'\nimport { KUI_ICON_SIZE_50 } from '@kong/design-tokens'\n\nconst props = defineProps({\n  /** The accessibility text provided to screen readers */\n  title: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  /** The icon color. Defaults to `currentColor` which inherits text color from the parent element */\n  color: {\n    type: String,\n    required: false,\n    default: 'currentColor',\n  },\n  /** The CSS display property for the icon. Defaults to `block` */\n  display: {\n    type: String,\n    required: false,\n    default: 'block',\n  },\n  /** Whether the icon is just eye-candy or is meaningful to the page (should screen-readers ignore the icon?) */\n  decorative: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  /** The icon size */\n  size: {\n    type: [Number, String],\n    required: false,\n    default: KUI_ICON_SIZE_50, // if setting to the imported const fails, just pass a number of 24 as the default.\n    validator: (sizeValue: number | string): boolean => {\n      if (typeof sizeValue === 'number' && sizeValue > 0) {\n        return true\n      }\n\n      if (typeof sizeValue === 'string') {\n        // Strip `px` from the string\n        const sanitizedSize = String(sizeValue).replace(/px/gi, '')\n        const sizeNumber = Number(sanitizedSize)\n        if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n          return true\n        }\n      }\n\n      return false\n    },\n  },\n  /** The HTML tag to utilize for the icon's wrapper element. Defaults to `span` */\n  as: {\n    type: String,\n    required: false,\n    default: 'span',\n  },\n  /** A boolean to enable prefixing any internal SVGs with a unique string; useful when there are potentially multiple SVG instances on the same page and the SVG utilizes IDs and references internally (e.g. in the `<defs>` tag. Typically only set to false during snapshot testing. Defaults to `true`. */\n  randomizeIds: {\n    type: Boolean,\n    default: true,\n  },\n})\n\nconst svgElement = ref<SVGElement | null>(null)\n\nconst iconSize = computed((): string => {\n  // If props.size is a number, ensure it's greater than zero\n  if (typeof props.size === 'number' && props.size > 0) {\n    return `${props.size}px`\n  }\n\n  if (typeof props.size === 'string') {\n    // Strip `px` from the string\n    const sanitizedSize = String(props.size).replace(/px/gi, '')\n    const sizeNumber = Number(sanitizedSize)\n    if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n      return `${sizeNumber}px`\n    }\n  }\n\n  // Return the default icon size\n  return KUI_ICON_SIZE_50\n})\n\n/**\n * We are adding styles inline to avoid additional stylesheet imports in the host application/component.\n * All of the properties should be mapped to component props for customization.\n */\nconst rootElementStyles = computed((): Record<string, string> => ({\n  boxSizing: 'border-box',\n  color: props.color,\n  display: props.display,\n  flexShrink: '0',\n  height: iconSize.value,\n  lineHeight: '0',\n  width: iconSize.value,\n}))\n\n/**\n * Prefixes all IDs within the <defs> section of an SVG element and updates all references to these IDs. This is useful to avoid ID conflicts when embedding multiple SVGs in a document.\n *\n * The function performs the following steps:\n * 1. Finds all direct children of the <defs> element that have an `id` attribute and prefixes their IDs with a random string.\n * 2. Updates all references to these prefixed IDs in attributes like `url(#id)`, `href`, `xlink:href`, etc.\n *\n * The prefix is a random string generated using `Math.random().toString(36).substring(2, 12)` which should be sufficient for most use-cases.\n *\n * @param {SVGElement} svgElement - The SVG element whose potential IDs need to be prefixed.\n */\nconst prefixSvgIds = (svgElement: SVGElement): void => {\n  if (!svgElement) {\n    return\n  }\n\n  const defsElement = svgElement.querySelector('defs')\n\n  // Prepare a map to store the original and new IDs for quick lookups\n  const idMap: Record<string, string> = {}\n\n  if (defsElement) {\n    // Step 1: Prefix all direct children of <defs> that have an `id`\n    defsElement.querySelectorAll('[id]').forEach((element) => {\n      const originalId = element.getAttribute('id')\n      const newId = `${Math.random().toString(36).substring(2, 12)}-${originalId}`\n\n      // Map old id to new id\n      idMap[originalId!] = newId\n\n      // Update the element's ID with the new prefixed ID\n      element.setAttribute('id', newId)\n    })\n  }\n\n  // Step 2: Update all references to these prefixed IDs in attributes like `url(#id)`, `href`, `xlink:href`\n  const referencingAttributes = ['fill', 'stroke', 'filter', 'mask', 'clip-path', 'xlink:href', 'href']\n\n  // Function to update references to IDs in attributes\n  const updateReferences = (element: Element): void => {\n    referencingAttributes.forEach((attr) => {\n      const attrValue = element.getAttribute(attr)\n      if (attrValue) {\n        // Match any url(#id) or href=\"#id\" references\n        const updatedValue = attrValue.replace(/url\\(#([^)]+)\\)/g, (match, id) => {\n          return idMap[id] ? `url(#${idMap[id]})` : match\n        }).replace(/#([^\\s]+)/g, (match, id) => {\n          return idMap[id] ? `#${idMap[id]}` : match\n        })\n\n        // If the value changed, update the attribute\n        if (updatedValue !== attrValue) {\n          element.setAttribute(attr, updatedValue)\n        }\n      }\n    })\n  }\n\n  // Traverse all elements in the SVG to update ID references\n  svgElement.querySelectorAll('*').forEach((element) => {\n    updateReferences(element)\n  })\n}\n\nonMounted(() => {\n  if (props.randomizeIds && svgElement.value) {\n    prefixSvgIds(svgElement.value)\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    :aria-hidden=\"decorative ? 'true' : undefined\"\n    class=\"kui-icon flag-tl-icon\"\n    data-testid=\"kui-icon-wrapper-flag-tl-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      ref=\"svgElement\"\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-tl-icon\"\n      fill=\"none\"\n      height=\"100%\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      width=\"100%\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title\n        v-if=\"title\"\n        data-testid=\"kui-icon-svg-title\"\n      >\n        {{ title }}\n      </title>\n      <g clip-path=\"url(#clip0_1_2318)\">\n        <path\n          d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z\"\n          fill=\"#FFDA44\"\n        />\n        <path\n          d=\"M12 0C9.06203 0 6.37113 1.05642 4.2851 2.80941L17.2174 12L4.2851 21.1906C6.37113 22.9436 9.06203 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37262 18.6274 0 12 0Z\"\n          fill=\"#D80027\"\n        />\n        <path\n          d=\"M3.51471 3.51465C-1.17157 8.20093 -1.17157 15.7989 3.51471 20.4853C5.45126 18.5487 7.31374 16.6862 12 12L3.51471 3.51465Z\"\n          fill=\"black\"\n        />\n        <path\n          d=\"M3.32714 9.25098L5.15339 10.9794L7.36158 9.77635L6.28228 12.0474L8.10858 13.7759L5.61511 13.4511L4.53567 15.7222L4.0741 13.2504L1.58063 12.9255L3.78872 11.7226L3.32714 9.25098Z\"\n          fill=\"#F0F0F0\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"clip0_1_2318\">\n          <rect\n            fill=\"white\"\n            height=\"24\"\n            width=\"24\"\n          />\n        </clipPath>\n      </defs>\n    </svg>\n  </component>\n</template>\n\n<style lang=\"scss\" scoped>\n/**\n * We are adding styles inline to avoid additional stylesheet imports in the host application/component.\n * Do not add styles into this component file.\n */\n</style>\n"],"names":["props","__props","svgElement","ref","iconSize","computed","sanitizedSize","sizeNumber","KUI_ICON_SIZE_50","rootElementStyles","prefixSvgIds","defsElement","idMap","element","originalId","newId","referencingAttributes","updateReferences","attr","attrValue","updatedValue","match","id","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,UAAMA,IAAQC,GA4DRC,IAAaC,EAAuB,IAAI,GAExCC,IAAWC,EAAS,MAAc;AAEtC,UAAI,OAAOL,EAAM,QAAS,YAAYA,EAAM,OAAO;AAC1C,eAAA,GAAGA,EAAM,IAAI;AAGlB,UAAA,OAAOA,EAAM,QAAS,UAAU;AAElC,cAAMM,IAAgB,OAAON,EAAM,IAAI,EAAE,QAAQ,QAAQ,EAAE,GACrDO,IAAa,OAAOD,CAAa;AACnC,YAAAC,KAAc,CAAC,MAAMA,CAAU,KAAK,OAAO,UAAUA,CAAU,KAAKA,IAAa;AACnF,iBAAO,GAAGA,CAAU;AAAA,MAExB;AAGO,aAAAC;AAAA,IAAA,CACR,GAMKC,IAAoBJ,EAAS,OAA+B;AAAA,MAChE,WAAW;AAAA,MACX,OAAOL,EAAM;AAAA,MACb,SAASA,EAAM;AAAA,MACf,YAAY;AAAA,MACZ,QAAQI,EAAS;AAAA,MACjB,YAAY;AAAA,MACZ,OAAOA,EAAS;AAAA,IAChB,EAAA,GAaIM,IAAe,CAACR,MAAiC;AACrD,UAAI,CAACA;AACH;AAGI,YAAAS,IAAcT,EAAW,cAAc,MAAM,GAG7CU,IAAgC,CAAA;AAEtC,MAAID,KAEFA,EAAY,iBAAiB,MAAM,EAAE,QAAQ,CAACE,MAAY;AAClD,cAAAC,IAAaD,EAAQ,aAAa,IAAI,GACtCE,IAAQ,GAAG,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,UAAU,GAAG,EAAE,CAAC,IAAID,CAAU;AAG1E,QAAAF,EAAME,CAAW,IAAIC,GAGbF,EAAA,aAAa,MAAME,CAAK;AAAA,MAAA,CACjC;AAIG,YAAAC,IAAwB,CAAC,QAAQ,UAAU,UAAU,QAAQ,aAAa,cAAc,MAAM,GAG9FC,IAAmB,CAACJ,MAA2B;AAC7B,QAAAG,EAAA,QAAQ,CAACE,MAAS;AAChC,gBAAAC,IAAYN,EAAQ,aAAaK,CAAI;AAC3C,cAAIC,GAAW;AAEb,kBAAMC,IAAeD,EAAU,QAAQ,oBAAoB,CAACE,GAAOC,MAC1DV,EAAMU,CAAE,IAAI,QAAQV,EAAMU,CAAE,CAAC,MAAMD,CAC3C,EAAE,QAAQ,cAAc,CAACA,GAAOC,MACxBV,EAAMU,CAAE,IAAI,IAAIV,EAAMU,CAAE,CAAC,KAAKD,CACtC;AAGD,YAAID,MAAiBD,KACXN,EAAA,aAAaK,GAAME,CAAY;AAAA,UAE3C;AAAA,QAAA,CACD;AAAA,MAAA;AAIHlB,MAAAA,EAAW,iBAAiB,GAAG,EAAE,QAAQ,CAACW,MAAY;AACpD,QAAAI,EAAiBJ,CAAO;AAAA,MAAA,CACzB;AAAA,IAAA;AAGH,WAAAU,EAAU,MAAM;AACV,MAAAvB,EAAM,gBAAgBE,EAAW,SACnCQ,EAAaR,EAAW,KAAK;AAAA,IAC/B,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"kong-icons.es1164.js","sources":["../src/components/flags/FlagTlIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagTlIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Mon, 23 Sep 2024 18:37:12 GMT\n *\n * GitHub: https://github.com/Kong/icons\n * License: Apache-2.0\n */\n\nimport { computed, ref, onMounted } from 'vue'\nimport { KUI_ICON_SIZE_50 } from '@kong/design-tokens'\n\nconst props = defineProps({\n  /** The accessibility text provided to screen readers */\n  title: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  /** The icon color. Defaults to `currentColor` which inherits text color from the parent element */\n  color: {\n    type: String,\n    required: false,\n    default: 'currentColor',\n  },\n  /** The CSS display property for the icon. Defaults to `block` */\n  display: {\n    type: String,\n    required: false,\n    default: 'block',\n  },\n  /** Whether the icon is just eye-candy or is meaningful to the page (should screen-readers ignore the icon?) */\n  decorative: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  /** The icon size */\n  size: {\n    type: [Number, String],\n    required: false,\n    default: KUI_ICON_SIZE_50, // if setting to the imported const fails, just pass a number of 24 as the default.\n    validator: (sizeValue: number | string): boolean => {\n      if (typeof sizeValue === 'number' && sizeValue > 0) {\n        return true\n      }\n\n      if (typeof sizeValue === 'string') {\n        // Strip `px` from the string\n        const sanitizedSize = String(sizeValue).replace(/px/gi, '')\n        const sizeNumber = Number(sanitizedSize)\n        if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n          return true\n        }\n      }\n\n      return false\n    },\n  },\n  /** The HTML tag to utilize for the icon's wrapper element. Defaults to `span` */\n  as: {\n    type: String,\n    required: false,\n    default: 'span',\n  },\n  /** A boolean to enable prefixing any internal SVGs with a unique string; useful when there are potentially multiple SVG instances on the same page and the SVG utilizes IDs and references internally (e.g. in the `<defs>` tag).\n   * Typically only set to false during snapshot testing.\n   * Defaults to `true`.\n   */\n  randomizeIds: {\n    type: Boolean,\n    default: true,\n  },\n})\n\nconst svgElement = ref<SVGElement | null>(null)\n\nconst iconSize = computed((): string => {\n  // If props.size is a number, ensure it's greater than zero\n  if (typeof props.size === 'number' && props.size > 0) {\n    return `${props.size}px`\n  }\n\n  if (typeof props.size === 'string') {\n    // Strip `px` from the string\n    const sanitizedSize = String(props.size).replace(/px/gi, '')\n    const sizeNumber = Number(sanitizedSize)\n    if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n      return `${sizeNumber}px`\n    }\n  }\n\n  // Return the default icon size\n  return KUI_ICON_SIZE_50\n})\n\n/**\n * We are adding styles inline to avoid additional stylesheet imports in the host application/component.\n * All of the properties should be mapped to component props for customization.\n */\nconst rootElementStyles = computed((): Record<string, string> => ({\n  boxSizing: 'border-box',\n  color: props.color,\n  display: props.display,\n  flexShrink: '0',\n  height: iconSize.value,\n  lineHeight: '0',\n  width: iconSize.value,\n}))\n\n/**\n * Prefixes all IDs within the <defs> section of an SVG element and updates all references to these IDs. This is useful to avoid ID conflicts when embedding multiple SVGs in a document.\n *\n * The function performs the following steps:\n * 1. Finds all direct children of the <defs> element that have an `id` attribute and prefixes their IDs with a random string.\n * 2. Updates all references to these prefixed IDs in attributes like `url(#id)`, `href`, `xlink:href`, etc.\n *\n * The prefix is a random string generated using `Math.random().toString(36).substring(2, 12)` which should be sufficient for most use-cases.\n *\n * @param {SVGElement} svgElement - The SVG element whose potential IDs need to be prefixed.\n */\nconst prefixSvgIds = (svgElement: SVGElement): void => {\n  if (!svgElement) {\n    return\n  }\n\n  const defsElement = svgElement.querySelector('defs')\n\n  // Prepare a map to store the original and new IDs for quick lookups\n  const idMap: Record<string, string> = {}\n\n  if (defsElement) {\n    // Step 1: Prefix all direct children of <defs> that have an `id`\n    defsElement.querySelectorAll('[id]').forEach((element) => {\n      const originalId = element.getAttribute('id')\n      const newId = `${Math.random().toString(36).substring(2, 12)}-${originalId}`\n\n      // Map old id to new id\n      idMap[originalId!] = newId\n\n      // Update the element's ID with the new prefixed ID\n      element.setAttribute('id', newId)\n    })\n  }\n\n  // Step 2: Update all references to these prefixed IDs in attributes like `url(#id)`, `href`, `xlink:href`\n  const referencingAttributes = ['fill', 'stroke', 'filter', 'mask', 'clip-path', 'xlink:href', 'href']\n\n  // Function to update references to IDs in attributes\n  const updateReferences = (element: Element): void => {\n    referencingAttributes.forEach((attr) => {\n      const attrValue = element.getAttribute(attr)\n      if (attrValue) {\n        // Match any url(#id) or href=\"#id\" references\n        const updatedValue = attrValue.replace(/url\\(#([^)]+)\\)/g, (match, id) => {\n          return idMap[id] ? `url(#${idMap[id]})` : match\n        }).replace(/#([^\\s]+)/g, (match, id) => {\n          return idMap[id] ? `#${idMap[id]}` : match\n        })\n\n        // If the value changed, update the attribute\n        if (updatedValue !== attrValue) {\n          element.setAttribute(attr, updatedValue)\n        }\n      }\n    })\n  }\n\n  // Traverse all elements in the SVG to update ID references\n  svgElement.querySelectorAll('*').forEach((element) => {\n    updateReferences(element)\n  })\n}\n\nonMounted(() => {\n  if (props.randomizeIds && svgElement.value) {\n    prefixSvgIds(svgElement.value)\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    :aria-hidden=\"decorative ? 'true' : undefined\"\n    class=\"kui-icon flag-tl-icon\"\n    data-testid=\"kui-icon-wrapper-flag-tl-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      ref=\"svgElement\"\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-tl-icon\"\n      fill=\"none\"\n      height=\"100%\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      width=\"100%\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title\n        v-if=\"title\"\n        data-testid=\"kui-icon-svg-title\"\n      >\n        {{ title }}\n      </title>\n      <g clip-path=\"url(#clip0_1_2318)\">\n        <path\n          d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z\"\n          fill=\"#FFDA44\"\n        />\n        <path\n          d=\"M12 0C9.06203 0 6.37113 1.05642 4.2851 2.80941L17.2174 12L4.2851 21.1906C6.37113 22.9436 9.06203 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37262 18.6274 0 12 0Z\"\n          fill=\"#D80027\"\n        />\n        <path\n          d=\"M3.51471 3.51465C-1.17157 8.20093 -1.17157 15.7989 3.51471 20.4853C5.45126 18.5487 7.31374 16.6862 12 12L3.51471 3.51465Z\"\n          fill=\"black\"\n        />\n        <path\n          d=\"M3.32714 9.25098L5.15339 10.9794L7.36158 9.77635L6.28228 12.0474L8.10858 13.7759L5.61511 13.4511L4.53567 15.7222L4.0741 13.2504L1.58063 12.9255L3.78872 11.7226L3.32714 9.25098Z\"\n          fill=\"#F0F0F0\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"clip0_1_2318\">\n          <rect\n            fill=\"white\"\n            height=\"24\"\n            width=\"24\"\n          />\n        </clipPath>\n      </defs>\n    </svg>\n  </component>\n</template>\n\n<style lang=\"scss\" scoped>\n/**\n * We are adding styles inline to avoid additional stylesheet imports in the host application/component.\n * Do not add styles into this component file.\n */\n</style>\n"],"names":["props","__props","svgElement","ref","iconSize","computed","sanitizedSize","sizeNumber","KUI_ICON_SIZE_50","rootElementStyles","prefixSvgIds","defsElement","idMap","element","originalId","newId","referencingAttributes","updateReferences","attr","attrValue","updatedValue","match","id","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,UAAMA,IAAQC,GA+DRC,IAAaC,EAAuB,IAAI,GAExCC,IAAWC,EAAS,MAAc;AAEtC,UAAI,OAAOL,EAAM,QAAS,YAAYA,EAAM,OAAO;AAC1C,eAAA,GAAGA,EAAM,IAAI;AAGlB,UAAA,OAAOA,EAAM,QAAS,UAAU;AAElC,cAAMM,IAAgB,OAAON,EAAM,IAAI,EAAE,QAAQ,QAAQ,EAAE,GACrDO,IAAa,OAAOD,CAAa;AACnC,YAAAC,KAAc,CAAC,MAAMA,CAAU,KAAK,OAAO,UAAUA,CAAU,KAAKA,IAAa;AACnF,iBAAO,GAAGA,CAAU;AAAA,MAExB;AAGO,aAAAC;AAAA,IAAA,CACR,GAMKC,IAAoBJ,EAAS,OAA+B;AAAA,MAChE,WAAW;AAAA,MACX,OAAOL,EAAM;AAAA,MACb,SAASA,EAAM;AAAA,MACf,YAAY;AAAA,MACZ,QAAQI,EAAS;AAAA,MACjB,YAAY;AAAA,MACZ,OAAOA,EAAS;AAAA,IAChB,EAAA,GAaIM,IAAe,CAACR,MAAiC;AACrD,UAAI,CAACA;AACH;AAGI,YAAAS,IAAcT,EAAW,cAAc,MAAM,GAG7CU,IAAgC,CAAA;AAEtC,MAAID,KAEFA,EAAY,iBAAiB,MAAM,EAAE,QAAQ,CAACE,MAAY;AAClD,cAAAC,IAAaD,EAAQ,aAAa,IAAI,GACtCE,IAAQ,GAAG,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,UAAU,GAAG,EAAE,CAAC,IAAID,CAAU;AAG1E,QAAAF,EAAME,CAAW,IAAIC,GAGbF,EAAA,aAAa,MAAME,CAAK;AAAA,MAAA,CACjC;AAIG,YAAAC,IAAwB,CAAC,QAAQ,UAAU,UAAU,QAAQ,aAAa,cAAc,MAAM,GAG9FC,IAAmB,CAACJ,MAA2B;AAC7B,QAAAG,EAAA,QAAQ,CAACE,MAAS;AAChC,gBAAAC,IAAYN,EAAQ,aAAaK,CAAI;AAC3C,cAAIC,GAAW;AAEb,kBAAMC,IAAeD,EAAU,QAAQ,oBAAoB,CAACE,GAAOC,MAC1DV,EAAMU,CAAE,IAAI,QAAQV,EAAMU,CAAE,CAAC,MAAMD,CAC3C,EAAE,QAAQ,cAAc,CAACA,GAAOC,MACxBV,EAAMU,CAAE,IAAI,IAAIV,EAAMU,CAAE,CAAC,KAAKD,CACtC;AAGD,YAAID,MAAiBD,KACXN,EAAA,aAAaK,GAAME,CAAY;AAAA,UAE3C;AAAA,QAAA,CACD;AAAA,MAAA;AAIHlB,MAAAA,EAAW,iBAAiB,GAAG,EAAE,QAAQ,CAACW,MAAY;AACpD,QAAAI,EAAiBJ,CAAO;AAAA,MAAA,CACzB;AAAA,IAAA;AAGH,WAAAU,EAAU,MAAM;AACV,MAAAvB,EAAM,gBAAgBE,EAAW,SACnCQ,EAAaR,EAAW,KAAK;AAAA,IAC/B,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/kong-icons.es1166.js

@@ -1,6 +1,6 @@
 import { defineComponent as M, ref as S, computed as h, onMounted as Z, openBlock as c, createBlock as b, resolveDynamicComponent as v, normalizeStyle as k, withCtx as x, createElementBlock as g, toDisplayString as z, createCommentVNode as I, pushScopeId as N, popScopeId as _, createElementVNode as e } from "vue";
 import { KUI_ICON_SIZE_50 as m } from "./kong-icons.es1218.js";
-const F = (t) => (N("data-v-6d0ff453"), t = t(), _(), t), w = ["aria-hidden"], E = {
+const F = (t) => (N("data-v-86eb2b67"), t = t(), _(), t), w = ["aria-hidden"], E = {
   key: 0,
   "data-testid": "kui-icon-svg-title"
 }, D = /* @__PURE__ */ F(() => /* @__PURE__ */ e("g", { "clip-path": "url(#clip0_247_6274)" }, [
@@ -146,7 +146,10 @@ const F = (t) => (N("data-v-6d0ff453"), t = t(), _(), t), w = ["aria-hidden"], E
       required: !1,
       default: "span"
     },
-    /** A boolean to enable prefixing any internal SVGs with a unique string; useful when there are potentially multiple SVG instances on the same page and the SVG utilizes IDs and references internally (e.g. in the `<defs>` tag. Typically only set to false during snapshot testing. Defaults to `true`. */
+    /** A boolean to enable prefixing any internal SVGs with a unique string; useful when there are potentially multiple SVG instances on the same page and the SVG utilizes IDs and references internally (e.g. in the `<defs>` tag).
+     * Typically only set to false during snapshot testing.
+     * Defaults to `true`.
+     */
     randomizeIds: {
       type: Boolean,
       default: !0