@kong/icons 1.15.3-pr.391.542a583.0 → 1.15.3-pr.391.5c59f07.0

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

@@ -1 +1 @@
-{"version":3,"file":"kong-icons.es868.js","sources":["../src/components/flags/FlagDmIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagDmIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Tue, 24 Sep 2024 00:35:15 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 SVG ids 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 * Prefix all ids within the SVG element and update all corresponding references to these ids. This is useful to avoid id conflicts when utilizing multiple instances of the same SVG in the DOM.\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    // 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-dm-icon\"\n    data-testid=\"kui-icon-wrapper-flag-dm-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      ref=\"svgElement\"\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-dm-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_2316)\">\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=\"M14.3478 23.77C19.0917 22.829 22.8287 19.092 23.7697 14.3481H14.3478V23.77Z\"\n          fill=\"#496E2D\"\n        />\n        <path\n          d=\"M0.230286 14.3481C1.1713 19.092 4.90827 22.829 9.65216 23.77V14.3481H0.230286Z\"\n          fill=\"#496E2D\"\n        />\n        <path\n          d=\"M23.7697 9.65234C22.8287 4.9085 19.0917 1.17153 14.3478 0.230469V9.65234H23.7697Z\"\n          fill=\"#496E2D\"\n        />\n        <path\n          d=\"M9.65216 0.230469C4.90827 1.17153 1.1713 4.9085 0.230286 9.65234H9.65216V0.230469Z\"\n          fill=\"#496E2D\"\n        />\n        <path\n          d=\"M11.2174 14.3477H9.65216V23.7695C10.163 23.8708 10.6855 23.9395 11.2174 23.9737V14.3477Z\"\n          fill=\"#FFDA44\"\n        />\n        <path\n          d=\"M11.2174 9.65194V0.0258789C10.6855 0.0600977 10.1629 0.12877 9.65216 0.230066V9.65194H11.2174Z\"\n          fill=\"#FFDA44\"\n        />\n        <path\n          d=\"M12.7826 0.0261094C12.5238 0.009375 12.263 0 12 0C11.737 0 11.4762 0.009375 11.2173 0.0261094V9.65222H12.7825V0.0261094H12.7826Z\"\n          fill=\"black\"\n        />\n        <path\n          d=\"M11.2173 23.9737C11.4762 23.9905 11.737 23.9998 12 23.9998C12.263 23.9998 12.5238 23.9905 12.7826 23.9737V14.3477H11.2174V23.9737H11.2173Z\"\n          fill=\"black\"\n        />\n        <path\n          d=\"M9.65219 11.2175V9.65234H0.230311C0.128967 10.1632 0.0603418 10.6857 0.026123 11.2175H9.65219Z\"\n          fill=\"#FFDA44\"\n        />\n        <path\n          d=\"M14.3478 11.2175H23.9739C23.9397 10.6857 23.8711 10.1632 23.7698 9.65234H14.3479V11.2175H14.3478Z\"\n          fill=\"#FFDA44\"\n        />\n        <path\n          d=\"M14.3478 12.7825H23.9739C23.9906 12.5237 24 12.2629 24 11.9999C24 11.7369 23.9906 11.4761 23.9739 11.2173H14.3478V12.7825Z\"\n          fill=\"black\"\n        />\n        <path\n          d=\"M0.0261094 11.2173C0.00942187 11.4761 0 11.7369 0 11.9999C0 12.2629 0.00942187 12.5237 0.0261094 12.7825H9.65222V11.2173H0.0261094V11.2173Z\"\n          fill=\"black\"\n        />\n        <path\n          d=\"M12 17.739C15.1696 17.739 17.7391 15.1695 17.7391 11.9999C17.7391 8.83024 15.1696 6.26074 12 6.26074C8.83037 6.26074 6.26086 8.83024 6.26086 11.9999C6.26086 15.1695 8.83037 17.739 12 17.739Z\"\n          fill=\"#D80027\"\n        />\n        <path\n          d=\"M13.3075 12.6399C12.8806 11.7862 12.3258 10.9209 12.3258 10.9209C12.3258 10.9209 12.3395 10.5269 12.3395 10.2922C12.3395 9.93854 12.0529 9.65186 11.6992 9.65186C11.3642 9.65186 11.0897 9.90925 11.0617 10.2369C10.7983 10.2542 10.5898 10.4727 10.5898 10.7404C10.5898 10.9351 10.7001 11.1038 10.8616 11.1881C10.9418 11.0004 11.099 10.8539 11.2933 10.7871C11.325 10.813 11.359 10.8362 11.3953 10.8558L11.4774 10.8951C11.4774 10.8951 11.1732 11.7525 11.1732 12.2131C11.1732 13.508 12.027 13.9073 12.027 13.9073V13.9207L11.6001 14.3475H12.4538V13.4937L12.8807 13.9206C12.8845 13.9126 13.6893 13.4036 13.3075 12.6399V12.6399Z\"\n          fill=\"#496E2D\"\n        />\n        <path\n          d=\"M12 7.3042L12.1943 7.90204H12.8229L12.3143 8.27156L12.5086 8.8694L12 8.49993L11.4914 8.8694L11.6857 8.27156L11.1772 7.90204H11.8058L12 7.3042Z\"\n          fill=\"#496E2D\"\n        />\n        <path\n          d=\"M9.24 8.20122L9.7485 8.57073L10.2571 8.20117L10.0628 8.79911L10.5714 9.16853L9.9428 9.16858L9.74855 9.76642L9.55425 9.16858L8.92566 9.16853L9.43421 8.79902L9.24 8.20122Z\"\n          fill=\"#496E2D\"\n        />\n        <path\n          d=\"M7.53418 10.549H8.16273L8.35702 9.95117L8.55127 10.549L9.17991 10.549L8.67137 10.9185L8.86566 11.5164L8.35702 11.1469L7.84848 11.5163L8.04268 10.9185L7.53418 10.549Z\"\n          fill=\"#496E2D\"\n        />\n        <path\n          d=\"M7.53418 13.4507L8.04268 13.0813L7.84843 12.4834L8.35702 12.8529L8.86562 12.4834L8.67137 13.0812L9.17996 13.4508L8.55127 13.4508L8.35702 14.0486L8.16273 13.4507H7.53418Z\"\n          fill=\"#496E2D\"\n        />\n        <path\n          d=\"M9.23999 15.7986L9.43419 15.2008L8.9256 14.8313H9.55424L9.74854 14.2334L9.94279 14.8312H10.5714L10.0628 15.2008L10.2571 15.7986L9.74849 15.4291L9.23999 15.7986Z\"\n          fill=\"#496E2D\"\n        />\n        <path\n          d=\"M12 16.6956L11.8058 16.0978H11.1772L11.6857 15.7283L11.4914 15.1304L12 15.4998L12.5086 15.1304L12.3143 15.7283L12.8229 16.0978L12.1943 16.0978L12 16.6956Z\"\n          fill=\"#496E2D\"\n        />\n        <path\n          d=\"M14.76 15.7986L14.2515 15.4291L13.743 15.7986L13.9372 15.2008L13.4286 14.8313L14.0572 14.8312L14.2514 14.2334L14.4458 14.8313H15.0744L14.5658 15.2008L14.76 15.7986Z\"\n          fill=\"#496E2D\"\n        />\n        <path\n          d=\"M16.4658 13.4507H15.8373L15.643 14.0486L15.4488 13.4508H14.8201L15.3287 13.0812L15.1344 12.4834L15.643 12.8529L16.1515 12.4834L15.9573 13.0812L16.4658 13.4507Z\"\n          fill=\"#496E2D\"\n        />\n        <path\n          d=\"M16.4658 10.549L15.9573 10.9184L16.1516 11.5163L15.643 11.1468L15.1344 11.5164L15.3287 10.9185L14.8201 10.549L15.4488 10.5489L15.643 9.95117L15.8373 10.549H16.4658Z\"\n          fill=\"#496E2D\"\n        />\n        <path\n          d=\"M14.76 8.20117L14.5658 8.79897L15.0744 9.16848H14.4458L14.2515 9.76638L14.0572 9.16853L13.4286 9.16858L13.9372 8.79897L13.7429 8.20122L14.2515 8.57064L14.76 8.20117Z\"\n          fill=\"#496E2D\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"clip0_1_2316\">\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,GAOIM,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.es868.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 Tue, 24 Sep 2024 00:35:22 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 SVG ids 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 * Prefix all ids within the SVG element and update all corresponding references to these ids. This is useful to avoid id conflicts when utilizing multiple instances of the same SVG in the DOM.\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    // 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,GAOIM,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.es87.js

@@ -1,7 +1,7 @@
-import o from "./kong-icons.es932.js";
+import o from "./kong-icons.es640.js";
 /* empty css                 */
-import t from "./kong-icons.es409.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-8c64367b"]]);
+import a from "./kong-icons.es409.js";
+const m = /* @__PURE__ */ a(o, [["__scopeId", "data-v-2afa391a"]]);
 export {
   m as default
 };

package/dist/kong-icons.es870.js

@@ -1,51 +1,43 @@
-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 M, createElementBlock as m, toDisplayString as q, createCommentVNode as B, pushScopeId as E, popScopeId as V, createElementVNode as t } from "vue";
-import { KUI_ICON_SIZE_50 as y } from "./kong-icons.es1218.js";
-const S = (e) => (E("data-v-0950dd96"), e = e(), V(), e), Z = ["aria-hidden"], A = {
+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-f26ef6aa"), e = e(), M(), e), A = ["aria-hidden"], E = {
   key: 0,
   "data-testid": "kui-icon-svg-title"
-}, D = /* @__PURE__ */ S(() => /* @__PURE__ */ t("g", { "clip-path": "url(#clip0_1_2317)" }, [
-  /* @__PURE__ */ t("path", {
+}, B = /* @__PURE__ */ y(() => /* @__PURE__ */ i("g", { "clip-path": "url(#clip0_247_6268)" }, [
+  /* @__PURE__ */ i("path", {
     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",
-    fill: "#F0F0F0"
-  }),
-  /* @__PURE__ */ t("path", {
-    d: "M0.413391 15.1304C1.52142 19.2414 4.75847 22.4785 8.86959 23.5866V15.1304H0.413391Z",
-    fill: "#D80027"
+    fill: "#FFDA44"
   }),
-  /* @__PURE__ */ t("path", {
-    d: "M8.86955 0.413574C4.75847 1.52156 1.52138 4.75865 0.413391 8.86973H8.86959V0.413574H8.86955Z",
+  /* @__PURE__ */ i("path", {
+    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",
     fill: "#0052B4"
   }),
-  /* @__PURE__ */ t("path", {
-    d: "M23.5866 8.86973C22.4786 4.75865 19.2415 1.52156 15.1304 0.413574V8.86978H23.5866V8.86973Z",
-    fill: "#D80027"
-  }),
-  /* @__PURE__ */ t("path", {
-    d: "M15.1304 23.5866C19.2415 22.4785 22.4786 19.2415 23.5866 15.1304H15.1304V23.5866Z",
-    fill: "#0052B4"
+  /* @__PURE__ */ i("path", {
+    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",
+    fill: "#F0F0F0"
   }),
-  /* @__PURE__ */ t("path", {
-    d: "M15.1305 12.0001C15.1305 13.729 13.729 15.1305 12 15.1305C10.2711 15.1305 8.86957 13.729 8.86957 12.0001C8.86957 10.2711 12 8.86963 12 8.86963C12 8.86963 15.1305 10.2711 15.1305 12.0001Z",
-    fill: "#496E2D"
+  /* @__PURE__ */ i("path", {
+    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",
+    fill: "#F0F0F0"
   }),
-  /* @__PURE__ */ t("path", {
-    d: "M8.86957 12.0001C8.86957 10.2711 10.2711 8.86963 12 8.86963C13.729 8.86963 15.1305 10.2711 15.1305 12.0001",
-    fill: "#0052B4"
+  /* @__PURE__ */ i("path", {
+    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",
+    fill: "#F0F0F0"
   }),
-  /* @__PURE__ */ t("path", {
-    d: "M10.2391 10.4346V12.3911C10.2391 13.3636 11.0275 14.1519 12 14.1519C12.9725 14.1519 13.7609 13.3636 13.7609 12.3911V10.4346H10.2391Z",
-    fill: "#D80027"
+  /* @__PURE__ */ i("path", {
+    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",
+    fill: "#F0F0F0"
   })
-], -1)), H = /* @__PURE__ */ S(() => /* @__PURE__ */ t("defs", null, [
-  /* @__PURE__ */ t("clipPath", { id: "clip0_1_2317" }, [
-    /* @__PURE__ */ t("rect", {
+], -1)), Z = /* @__PURE__ */ y(() => /* @__PURE__ */ i("defs", null, [
+  /* @__PURE__ */ i("clipPath", { id: "clip0_247_6268" }, [
+    /* @__PURE__ */ i("rect", {
       fill: "white",
       height: "24",
       width: "24"
     })
   ])
-], -1)), K = /* @__PURE__ */ x({
-  __name: "FlagDoIcon",
+], -1)), V = /* @__PURE__ */ C({
+  __name: "FlagTkIcon",
   props: {
     /** The accessibility text provided to screen readers */
     title: {
@@ -75,13 +67,13 @@ const S = (e) => (E("data-v-0950dd96"), e = e(), V(), e), Z = ["aria-hidden"], A
     size: {
       type: [Number, String],
       required: !1,
-      default: y,
+      default: m,
       // if setting to the imported const fails, just pass a number of 24 as the default.
       validator: (e) => {
         if (typeof e == "number" && e > 0)
           return !0;
         if (typeof e == "string") {
-          const i = String(e).replace(/px/gi, ""), o = Number(i);
+          const t = String(e).replace(/px/gi, ""), o = Number(t);
           if (o && !isNaN(o) && Number.isInteger(o) && o > 0)
             return !0;
         }
@@ -104,19 +96,19 @@ const S = (e) => (E("data-v-0950dd96"), e = e(), V(), e), Z = ["aria-hidden"], A
     }
   },
   setup(e) {
-    const i = e, o = z(null), p = g(() => {
-      if (typeof i.size == "number" && i.size > 0)
-        return `${i.size}px`;
-      if (typeof i.size == "string") {
-        const n = String(i.size).replace(/px/gi, ""), r = Number(n);
+    const t = e, o = F(null), p = g(() => {
+      if (typeof t.size == "number" && t.size > 0)
+        return `${t.size}px`;
+      if (typeof t.size == "string") {
+        const n = String(t.size).replace(/px/gi, ""), r = Number(n);
         if (r && !isNaN(r) && Number.isInteger(r) && r > 0)
           return `${r}px`;
       }
-      return y;
-    }), C = g(() => ({
+      return m;
+    }), S = g(() => ({
       boxSizing: "border-box",
-      color: i.color,
-      display: i.display,
+      color: t.color,
+      display: t.display,
       flexShrink: "0",
       height: p.value,
       lineHeight: "0",
@@ -124,17 +116,17 @@ const S = (e) => (E("data-v-0950dd96"), e = e(), V(), e), Z = ["aria-hidden"], A
     })), b = (n) => {
       if (!n)
         return;
-      const r = n.querySelector("defs"), d = {};
+      const r = n.querySelector("defs"), s = {};
       r && r.querySelectorAll("[id]").forEach((l) => {
-        const s = l.getAttribute("id"), a = `${Math.random().toString(36).substring(2, 12)}-${s}`;
-        d[s] = a, l.setAttribute("id", a);
+        const d = l.getAttribute("id"), a = `${Math.random().toString(36).substring(2, 12)}-${d}`;
+        s[d] = a, l.setAttribute("id", a);
       });
       const v = ["fill", "stroke", "filter", "mask", "clip-path", "xlink:href", "href"], k = (l) => {
-        v.forEach((s) => {
-          const a = l.getAttribute(s);
+        v.forEach((d) => {
+          const a = l.getAttribute(d);
           if (a) {
-            const h = a.replace(/url\(#([^)]+)\)/g, (u, c) => d[c] ? `url(#${d[c]})` : u).replace(/#([^\s]+)/g, (u, c) => d[c] ? `#${d[c]}` : u);
-            h !== a && l.setAttribute(s, h);
+            const h = a.replace(/url\(#([^)]+)\)/g, (u, c) => s[c] ? `url(#${s[c]})` : u).replace(/#([^\s]+)/g, (u, c) => s[c] ? `#${s[c]}` : u);
+            h !== a && l.setAttribute(d, h);
           }
         });
       };
@@ -142,20 +134,20 @@ const S = (e) => (E("data-v-0950dd96"), e = e(), V(), e), Z = ["aria-hidden"], A
         k(l);
       });
     };
-    return I(() => {
-      i.randomizeIds && o.value && b(o.value);
-    }), (n, r) => (f(), N(_(e.as), {
+    return x(() => {
+      t.randomizeIds && o.value && b(o.value);
+    }), (n, r) => (f(), z(I(e.as), {
       "aria-hidden": e.decorative ? "true" : void 0,
-      class: "kui-icon flag-do-icon",
-      "data-testid": "kui-icon-wrapper-flag-do-icon",
-      style: w(C.value)
+      class: "kui-icon flag-tk-icon",
+      "data-testid": "kui-icon-wrapper-flag-tk-icon",
+      style: N(S.value)
     }, {
-      default: M(() => [
-        (f(), m("svg", {
+      default: _(() => [
+        (f(), L("svg", {
           ref_key: "svgElement",
           ref: o,
           "aria-hidden": e.decorative ? "true" : void 0,
-          "data-testid": "kui-icon-svg-flag-do-icon",
+          "data-testid": "kui-icon-svg-flag-tk-icon",
           fill: "none",
           height: "100%",
           role: "img",
@@ -163,16 +155,16 @@ const S = (e) => (E("data-v-0950dd96"), e = e(), V(), e), Z = ["aria-hidden"], A
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg"
         }, [
-          e.title ? (f(), m("title", A, q(e.title), 1)) : B("", !0),
-          D,
-          H
-        ], 8, Z))
+          e.title ? (f(), L("title", E, w(e.title), 1)) : H("", !0),
+          B,
+          Z
+        ], 8, A))
       ]),
       _: 1
     }, 8, ["aria-hidden", "style"]));
   }
 });
 export {
-  K as default
+  V as default
 };
 //# sourceMappingURL=kong-icons.es870.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"kong-icons.es870.js","sources":["../src/components/flags/FlagDoIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagDoIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Tue, 24 Sep 2024 00:35:15 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 SVG ids 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 * Prefix all ids within the SVG element and update all corresponding references to these ids. This is useful to avoid id conflicts when utilizing multiple instances of the same SVG in the DOM.\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    // 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-do-icon\"\n    data-testid=\"kui-icon-wrapper-flag-do-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      ref=\"svgElement\"\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-do-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_2317)\">\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=\"M0.413391 15.1304C1.52142 19.2414 4.75847 22.4785 8.86959 23.5866V15.1304H0.413391Z\"\n          fill=\"#D80027\"\n        />\n        <path\n          d=\"M8.86955 0.413574C4.75847 1.52156 1.52138 4.75865 0.413391 8.86973H8.86959V0.413574H8.86955Z\"\n          fill=\"#0052B4\"\n        />\n        <path\n          d=\"M23.5866 8.86973C22.4786 4.75865 19.2415 1.52156 15.1304 0.413574V8.86978H23.5866V8.86973Z\"\n          fill=\"#D80027\"\n        />\n        <path\n          d=\"M15.1304 23.5866C19.2415 22.4785 22.4786 19.2415 23.5866 15.1304H15.1304V23.5866Z\"\n          fill=\"#0052B4\"\n        />\n        <path\n          d=\"M15.1305 12.0001C15.1305 13.729 13.729 15.1305 12 15.1305C10.2711 15.1305 8.86957 13.729 8.86957 12.0001C8.86957 10.2711 12 8.86963 12 8.86963C12 8.86963 15.1305 10.2711 15.1305 12.0001Z\"\n          fill=\"#496E2D\"\n        />\n        <path\n          d=\"M8.86957 12.0001C8.86957 10.2711 10.2711 8.86963 12 8.86963C13.729 8.86963 15.1305 10.2711 15.1305 12.0001\"\n          fill=\"#0052B4\"\n        />\n        <path\n          d=\"M10.2391 10.4346V12.3911C10.2391 13.3636 11.0275 14.1519 12 14.1519C12.9725 14.1519 13.7609 13.3636 13.7609 12.3911V10.4346H10.2391Z\"\n          fill=\"#D80027\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"clip0_1_2317\">\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,GAOIM,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.es870.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 Tue, 24 Sep 2024 00:35:22 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 SVG ids 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 * Prefix all ids within the SVG element and update all corresponding references to these ids. This is useful to avoid id conflicts when utilizing multiple instances of the same SVG in the DOM.\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    // 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,GAOIM,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.es872.js

@@ -1,35 +1,35 @@
-import { defineComponent as k, ref as x, 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 E, pushScopeId as A, popScopeId as M, createElementVNode as o } from "vue";
+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) => (A("data-v-510d6038"), e = e(), M(), e), B = ["aria-hidden"], D = {
+const S = (e) => (E("data-v-318d648f"), e = e(), M(), e), B = ["aria-hidden"], F = {
   key: 0,
   "data-testid": "kui-icon-svg-title"
-}, $ = /* @__PURE__ */ S(() => /* @__PURE__ */ o("g", { "clip-path": "url(#clip0_1_2252)" }, [
-  /* @__PURE__ */ o("path", {
-    d: "M12 0C18.6274 0 24 5.37262 24 12C24 18.6274 18.6274 24 12 24C12 23.4783 10.4348 12 10.4348 12L12 0Z",
-    fill: "#F0F0F0"
-  }),
-  /* @__PURE__ */ o("path", {
-    d: "M12 24C5.37262 24 0 18.6274 0 12C0 5.37262 5.37262 0 12 0",
-    fill: "#496E2D"
+}, $ = /* @__PURE__ */ S(() => /* @__PURE__ */ l("g", { "clip-path": "url(#clip0_1_2318)" }, [
+  /* @__PURE__ */ l("path", {
+    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",
+    fill: "#FFDA44"
   }),
-  /* @__PURE__ */ o("path", {
-    d: "M14.5783 9.69824L13.5937 11.055L11.9992 10.5379L12.9853 11.8935L12.0008 13.2503L13.5948 12.7314L14.5809 14.087L14.5799 12.4107L16.1739 11.8917L14.5794 11.3746L14.5783 9.69824Z",
+  /* @__PURE__ */ l("path", {
+    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",
     fill: "#D80027"
   }),
-  /* @__PURE__ */ o("path", {
-    d: "M12.9955 15.3914C11.1225 15.3914 9.60417 13.873 9.60417 12.0001C9.60417 10.1272 11.1225 8.6088 12.9955 8.6088C13.5795 8.6088 14.129 8.75645 14.6087 9.01642C13.8561 8.28044 12.8269 7.82617 11.6911 7.82617C9.38592 7.82617 7.51725 9.69489 7.51725 12.0001C7.51725 14.3052 9.38597 16.174 11.6911 16.174C12.8269 16.174 13.8561 15.7197 14.6087 14.9837C14.129 15.2438 13.5795 15.3914 12.9955 15.3914Z",
-    fill: "#D80027"
+  /* @__PURE__ */ l("path", {
+    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",
+    fill: "black"
+  }),
+  /* @__PURE__ */ l("path", {
+    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",
+    fill: "#F0F0F0"
   })
-], -1)), F = /* @__PURE__ */ S(() => /* @__PURE__ */ o("defs", null, [
-  /* @__PURE__ */ o("clipPath", { id: "clip0_1_2252" }, [
-    /* @__PURE__ */ o("rect", {
+], -1)), Z = /* @__PURE__ */ S(() => /* @__PURE__ */ l("defs", null, [
+  /* @__PURE__ */ l("clipPath", { id: "clip0_1_2318" }, [
+    /* @__PURE__ */ l("rect", {
       fill: "white",
       height: "24",
       width: "24"
     })
   ])
-], -1)), K = /* @__PURE__ */ k({
-  __name: "FlagDzIcon",
+], -1)), K = /* @__PURE__ */ x({
+  __name: "FlagTlIcon",
   props: {
     /** The accessibility text provided to screen readers */
     title: {
@@ -88,11 +88,11 @@ const S = (e) => (A("data-v-510d6038"), e = e(), M(), e), B = ["aria-hidden"], D
     }
   },
   setup(e) {
-    const t = e, r = x(null), p = h(() => {
+    const t = e, r = z(null), p = h(() => {
       if (typeof t.size == "number" && t.size > 0)
         return `${t.size}px`;
       if (typeof t.size == "string") {
-        const l = String(t.size).replace(/px/gi, ""), i = Number(l);
+        const n = String(t.size).replace(/px/gi, ""), i = Number(n);
         if (i && !isNaN(i) && Number.isInteger(i) && i > 0)
           return `${i}px`;
       }
@@ -105,33 +105,33 @@ const S = (e) => (A("data-v-510d6038"), e = e(), M(), e), B = ["aria-hidden"], D
       height: p.value,
       lineHeight: "0",
       width: p.value
-    })), v = (l) => {
-      if (!l)
+    })), v = (n) => {
+      if (!n)
         return;
-      const i = l.querySelector("defs"), s = {};
-      i && i.querySelectorAll("[id]").forEach((n) => {
-        const d = n.getAttribute("id"), a = `${Math.random().toString(36).substring(2, 12)}-${d}`;
-        s[d] = a, n.setAttribute("id", a);
+      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 = ["fill", "stroke", "filter", "mask", "clip-path", "xlink:href", "href"], z = (n) => {
+      const C = ["fill", "stroke", "filter", "mask", "clip-path", "xlink:href", "href"], k = (o) => {
         C.forEach((d) => {
-          const a = n.getAttribute(d);
+          const a = o.getAttribute(d);
           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 && n.setAttribute(d, g);
+            g !== a && o.setAttribute(d, g);
           }
         });
       };
-      l.querySelectorAll("*").forEach((n) => {
-        z(n);
+      n.querySelectorAll("*").forEach((o) => {
+        k(o);
       });
     };
     return I(() => {
       t.randomizeIds && r.value && v(r.value);
-    }), (l, i) => (f(), N(_(e.as), {
+    }), (n, i) => (f(), N(_(e.as), {
       "aria-hidden": e.decorative ? "true" : void 0,
-      class: "kui-icon flag-dz-icon",
-      "data-testid": "kui-icon-wrapper-flag-dz-icon",
+      class: "kui-icon flag-tl-icon",
+      "data-testid": "kui-icon-wrapper-flag-tl-icon",
       style: w(b.value)
     }, {
       default: L(() => [
@@ -139,7 +139,7 @@ const S = (e) => (A("data-v-510d6038"), e = e(), M(), e), B = ["aria-hidden"], D
           ref_key: "svgElement",
           ref: r,
           "aria-hidden": e.decorative ? "true" : void 0,
-          "data-testid": "kui-icon-svg-flag-dz-icon",
+          "data-testid": "kui-icon-svg-flag-tl-icon",
           fill: "none",
           height: "100%",
           role: "img",
@@ -147,9 +147,9 @@ const S = (e) => (A("data-v-510d6038"), e = e(), M(), e), B = ["aria-hidden"], D
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg"
         }, [
-          e.title ? (f(), m("title", D, q(e.title), 1)) : E("", !0),
+          e.title ? (f(), m("title", F, q(e.title), 1)) : A("", !0),
           $,
-          F
+          Z
         ], 8, B))
       ]),
       _: 1

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

@@ -1 +1 @@
-{"version":3,"file":"kong-icons.es872.js","sources":["../src/components/flags/FlagDzIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagDzIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Tue, 24 Sep 2024 00:35:15 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 SVG ids 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 * Prefix all ids within the SVG element and update all corresponding references to these ids. This is useful to avoid id conflicts when utilizing multiple instances of the same SVG in the DOM.\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    // 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-dz-icon\"\n    data-testid=\"kui-icon-wrapper-flag-dz-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      ref=\"svgElement\"\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-dz-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_2252)\">\n        <path\n          d=\"M12 0C18.6274 0 24 5.37262 24 12C24 18.6274 18.6274 24 12 24C12 23.4783 10.4348 12 10.4348 12L12 0Z\"\n          fill=\"#F0F0F0\"\n        />\n        <path\n          d=\"M12 24C5.37262 24 0 18.6274 0 12C0 5.37262 5.37262 0 12 0\"\n          fill=\"#496E2D\"\n        />\n        <path\n          d=\"M14.5783 9.69824L13.5937 11.055L11.9992 10.5379L12.9853 11.8935L12.0008 13.2503L13.5948 12.7314L14.5809 14.087L14.5799 12.4107L16.1739 11.8917L14.5794 11.3746L14.5783 9.69824Z\"\n          fill=\"#D80027\"\n        />\n        <path\n          d=\"M12.9955 15.3914C11.1225 15.3914 9.60417 13.873 9.60417 12.0001C9.60417 10.1272 11.1225 8.6088 12.9955 8.6088C13.5795 8.6088 14.129 8.75645 14.6087 9.01642C13.8561 8.28044 12.8269 7.82617 11.6911 7.82617C9.38592 7.82617 7.51725 9.69489 7.51725 12.0001C7.51725 14.3052 9.38597 16.174 11.6911 16.174C12.8269 16.174 13.8561 15.7197 14.6087 14.9837C14.129 15.2438 13.5795 15.3914 12.9955 15.3914Z\"\n          fill=\"#D80027\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"clip0_1_2252\">\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,GAOIM,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.es872.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 Tue, 24 Sep 2024 00:35:22 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 SVG ids 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 * Prefix all ids within the SVG element and update all corresponding references to these ids. This is useful to avoid id conflicts when utilizing multiple instances of the same SVG in the DOM.\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    // 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,GAOIM,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}