@kong/icons 1.18.2-pr.428.10d12b5.0 → 1.18.2-pr.429.04a4618.0

package/dist/kong-icons.es400.js

@@ -1,6 +1,6 @@
-import { defineComponent as m, computed as d, openBlock as c, createBlock as S, resolveDynamicComponent as v, normalizeStyle as F, withCtx as H, createElementBlock as y } from "vue";
+import { defineComponent as m, computed as d, openBlock as c, createBlock as v, resolveDynamicComponent as S, normalizeStyle as F, withCtx as H, createElementBlock as y } from "vue";
 import { KUI_ICON_SIZE_50 as L } from "./kong-icons.es1223.js";
-const C = ["aria-hidden"], p = `<g clip-path="url(#clip0_247_6263)">
+const C = ["aria-hidden", "tabindex"], p = `<g clip-path="url(#clip0_247_6263)">
 <path 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" fill="#F0F0F0"/>
 <path d="M1.19116 17.2173C3.13212 21.2313 7.24254 24 12 24C16.7575 24 20.868 21.2313 22.8089 17.2173H1.19116Z" fill="#6DA544"/>
 <path d="M1.19116 6.78263H22.8089C20.868 2.76872 16.7575 0 12 0C7.24254 0 3.13212 2.76872 1.19116 6.78263Z" fill="#D80027"/>
@@ -54,7 +54,7 @@ const C = ["aria-hidden"], p = `<g clip-path="url(#clip0_247_6263)">
         if (typeof i == "number" && i > 0)
           return !0;
         if (typeof i == "string") {
-          const t = String(i).replace(/px/gi, ""), r = Number(t);
+          const e = String(i).replace(/px/gi, ""), r = Number(e);
           if (r && !isNaN(r) && Number.isInteger(r) && r > 0)
             return !0;
         }
@@ -78,40 +78,41 @@ const C = ["aria-hidden"], p = `<g clip-path="url(#clip0_247_6263)">
     }
   },
   setup(i) {
-    const t = i, r = d(() => {
-      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, ""), e = Number(n);
-        if (e && !isNaN(e) && Number.isInteger(e) && e > 0)
-          return `${e}px`;
+    const e = i, r = d(() => {
+      if (typeof e.size == "number" && e.size > 0)
+        return `${e.size}px`;
+      if (typeof e.size == "string") {
+        const n = String(e.size).replace(/px/gi, ""), t = Number(n);
+        if (t && !isNaN(t) && Number.isInteger(t) && t > 0)
+          return `${t}px`;
       }
       return L;
     }), f = d(() => ({
       boxSizing: "border-box",
-      color: t.color,
-      display: t.display,
+      color: e.color,
+      display: e.display,
       flexShrink: "0",
       height: r.value,
       lineHeight: "0",
-      width: r.value
+      width: r.value,
+      ...e.decorative && { pointerEvents: "none" }
     })), u = (n) => {
-      const e = {}, a = Math.random().toString(36).substring(2, 12);
-      return n.replace(/id="([^"]+)"/g, (s, l) => {
-        const o = `${a}-${l}`;
-        return e[l] = o, `id="${o}"`;
-      }).replace(/#([^\s^")]+)/g, (s, l) => e[l] ? `#${e[l]}` : s);
+      const t = {}, a = Math.random().toString(36).substring(2, 12);
+      return n.replace(/id="([^"]+)"/g, (o, l) => {
+        const s = `${a}-${l}`;
+        return t[l] = s, `id="${s}"`;
+      }).replace(/#([^\s^")]+)/g, (o, l) => t[l] ? `#${t[l]}` : o);
     }, g = (n) => {
-      const e = {
+      const t = {
         "<": "&lt;",
         ">": "&gt;",
         '"': "&quot;",
         "'": "&#039;",
         "`": "&#039;"
       };
-      return n.replace(/[<>"'`]/g, (a) => e[a]);
-    }, h = `${t.title ? `<title data-testid="kui-icon-svg-title">${g(t.title)}</title>` : ""}${t.staticIds ? p : u(p)}`;
-    return (n, e) => (c(), S(v(i.as), {
+      return n.replace(/[<>"'`]/g, (a) => t[a]);
+    }, h = `${e.title ? `<title data-testid="kui-icon-svg-title">${g(e.title)}</title>` : ""}${e.staticIds ? p : u(p)}`;
+    return (n, t) => (c(), v(S(i.as), {
       "aria-hidden": i.decorative ? "true" : void 0,
       class: "kui-icon flag-tj-icon",
       "data-testid": "kui-icon-wrapper-flag-tj-icon",
@@ -124,6 +125,7 @@ const C = ["aria-hidden"], p = `<g clip-path="url(#clip0_247_6263)">
           fill: "none",
           height: "100%",
           role: "img",
+          tabindex: i.decorative ? "-1" : void 0,
           viewBox: "0 0 24 24",
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg",

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

@@ -1 +1 @@
-{"version":3,"file":"kong-icons.es400.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 Wed, 30 Oct 2024 15:36:26 GMT\n *\n * GitHub: https://github.com/Kong/icons\n * License: Apache-2.0\n */\n\nimport { computed } 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  /**\n   * A boolean to disable prefixing any internal SVG ids with a unique string which is done to resolve the potential for multiple SVG instances on the same page and the SVG utilizing the same ids and references internally (e.g. in the `<defs>` tag).\n   * Typically only set to `true` during snapshot testing.\n   * Defaults to `false`.\n   */\n  staticIds: {\n    type: Boolean,\n    default: false,\n  },\n})\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 SVG IDs in the given SVG string with a random prefix to ensure uniqueness.\n *\n * This function performs the following steps:\n * 1. Generates a random prefix.\n * 2. Replaces all `id` attributes in the SVG string with the new prefixed IDs.\n * 3. Updates all ID references (e.g., `url(#id)`, `href=\"#id\"`, etc.) to use the new prefixed IDs.\n *\n * @param {string} svgString - The SVG string in which to prefix IDs.\n * @returns {string} - The SVG string with prefixed IDs.\n */\nconst prefixSvgIdsInString = (svgString: string): string => {\n  const idMap: Record<string, string> = {}\n  const randomPrefix = Math.random().toString(36).substring(2, 12)\n\n  // Replace IDs in the SVG string\n  const updatedSvgString = svgString.replace(/id=\"([^\"]+)\"/g, (match, originalId) => {\n    const newId = `${randomPrefix}-${originalId}`\n    idMap[originalId] = newId\n    return `id=\"${newId}\"`\n  })\n\n  // Replace ID references (e.g., url(#id), href=\"#id\", etc.)\n  const processedSvgString = updatedSvgString.replace(/#([^\\s^\")]+)/g, (match, originalId) => idMap[originalId] ? `#${idMap[originalId]}` : match)\n\n  // Return the processed SVG string\n  return processedSvgString\n}\n\nconst escapeHtml = (str: string) => {\n  const htmlEntities: { [key: string]: string } = {\n    '<': '&lt;',\n    '>': '&gt;',\n    '\"': '&quot;',\n    \"'\": '&#039;',\n    '`': '&#039;',\n  }\n\n  return str.replace(/[<>\"'`]/g, (match) => htmlEntities[match])\n}\n\n// The `svgOriginalContent` template string will be replaced with the SVG innerHTML in the generate script.\n\nconst svgOriginalContent = `<g clip-path=\"url(#clip0_247_6263)\">\n<path 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\" fill=\"#F0F0F0\"/>\n<path d=\"M1.19116 17.2173C3.13212 21.2313 7.24254 24 12 24C16.7575 24 20.868 21.2313 22.8089 17.2173H1.19116Z\" fill=\"#6DA544\"/>\n<path d=\"M1.19116 6.78263H22.8089C20.868 2.76872 16.7575 0 12 0C7.24254 0 3.13212 2.76872 1.19116 6.78263Z\" fill=\"#D80027\"/>\n<path d=\"M9.91309 15.1305H14.087V13.3565L13.2522 13.7739L12.0001 12.5217L10.7479 13.7739L9.91309 13.3565V15.1305Z\" fill=\"#FFDA44\"/>\n<path 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\" fill=\"#FFDA44\"/>\n<path 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\" fill=\"#FFDA44\"/>\n<path 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\" fill=\"#FFDA44\"/>\n<path 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\" fill=\"#FFDA44\"/>\n<path 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\" fill=\"#FFDA44\"/>\n<path 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\" fill=\"#FFDA44\"/>\n<path 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\" fill=\"#FFDA44\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_247_6263\">\n<rect width=\"24\" height=\"24\" fill=\"white\"/>\n</clipPath>\n</defs>`\nconst svgTitleContent = props.title ? `<title data-testid=\"kui-icon-svg-title\">${escapeHtml(props.title)}</title>` : ''\nconst svgProcessedContent = `${svgTitleContent}${!props.staticIds ? prefixSvgIdsInString(svgOriginalContent) : svgOriginalContent}`\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      :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      v-html=\"svgProcessedContent\"\n    />\n  </component>\n</template>\n\n<style>\n/**\n * !Important: Do not add styles into this component file.\n *\n * We are adding styles inline to avoid additional stylesheet imports in the consuming application/component.\n */\n</style>\n"],"names":["svgOriginalContent","props","__props","iconSize","computed","sanitizedSize","sizeNumber","KUI_ICON_SIZE_50","rootElementStyles","prefixSvgIdsInString","svgString","idMap","randomPrefix","match","originalId","newId","escapeHtml","str","htmlEntities","svgProcessedContent"],"mappings":";;2BAyJMA,IAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA5I3B,UAAMC,IAAQC,GAgERC,IAAWC,EAAS,MAAc;AAEtC,UAAI,OAAOH,EAAM,QAAS,YAAYA,EAAM,OAAO;AAC1C,eAAA,GAAGA,EAAM,IAAI;AAGlB,UAAA,OAAOA,EAAM,QAAS,UAAU;AAElC,cAAMI,IAAgB,OAAOJ,EAAM,IAAI,EAAE,QAAQ,QAAQ,EAAE,GACrDK,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,OAAOH,EAAM;AAAA,MACb,SAASA,EAAM;AAAA,MACf,YAAY;AAAA,MACZ,QAAQE,EAAS;AAAA,MACjB,YAAY;AAAA,MACZ,OAAOA,EAAS;AAAA,IAChB,EAAA,GAaIM,IAAuB,CAACC,MAA8B;AAC1D,YAAMC,IAAgC,CAAA,GAChCC,IAAe,KAAK,SAAS,SAAS,EAAE,EAAE,UAAU,GAAG,EAAE;AAaxD,aAVkBF,EAAU,QAAQ,iBAAiB,CAACG,GAAOC,MAAe;AACjF,cAAMC,IAAQ,GAAGH,CAAY,IAAIE,CAAU;AAC3C,eAAAH,EAAMG,CAAU,IAAIC,GACb,OAAOA,CAAK;AAAA,MAAA,CACpB,EAG2C,QAAQ,iBAAiB,CAACF,GAAOC,MAAeH,EAAMG,CAAU,IAAI,IAAIH,EAAMG,CAAU,CAAC,KAAKD,CAAK;AAAA,IAGxI,GAGHG,IAAa,CAACC,MAAgB;AAClC,YAAMC,IAA0C;AAAA,QAC9C,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,MAAA;AAGP,aAAOD,EAAI,QAAQ,YAAY,CAACJ,MAAUK,EAAaL,CAAK,CAAC;AAAA,IAAA,GAwBzDM,IAAsB,GADJlB,EAAM,QAAQ,2CAA2Ce,EAAWf,EAAM,KAAK,CAAC,aAAa,EACvE,GAAIA,EAAM,YAAuDD,IAA3CS,EAAqBT,CAAkB,CAAsB;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"kong-icons.es400.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 Wed, 30 Oct 2024 15:02:40 GMT\n *\n * GitHub: https://github.com/Kong/icons\n * License: Apache-2.0\n */\n\nimport { computed } 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  /**\n   * A boolean to disable prefixing any internal SVG ids with a unique string which is done to resolve the potential for multiple SVG instances on the same page and the SVG utilizing the same ids and references internally (e.g. in the `<defs>` tag).\n   * Typically only set to `true` during snapshot testing.\n   * Defaults to `false`.\n   */\n  staticIds: {\n    type: Boolean,\n    default: false,\n  },\n})\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  ...(props.decorative && { pointerEvents: 'none' }),\n}))\n\n/**\n * Prefix all SVG IDs in the given SVG string with a random prefix to ensure uniqueness.\n *\n * This function performs the following steps:\n * 1. Generates a random prefix.\n * 2. Replaces all `id` attributes in the SVG string with the new prefixed IDs.\n * 3. Updates all ID references (e.g., `url(#id)`, `href=\"#id\"`, etc.) to use the new prefixed IDs.\n *\n * @param {string} svgString - The SVG string in which to prefix IDs.\n * @returns {string} - The SVG string with prefixed IDs.\n */\nconst prefixSvgIdsInString = (svgString: string): string => {\n  const idMap: Record<string, string> = {}\n  const randomPrefix = Math.random().toString(36).substring(2, 12)\n\n  // Replace IDs in the SVG string\n  const updatedSvgString = svgString.replace(/id=\"([^\"]+)\"/g, (match, originalId) => {\n    const newId = `${randomPrefix}-${originalId}`\n    idMap[originalId] = newId\n    return `id=\"${newId}\"`\n  })\n\n  // Replace ID references (e.g., url(#id), href=\"#id\", etc.)\n  const processedSvgString = updatedSvgString.replace(/#([^\\s^\")]+)/g, (match, originalId) => idMap[originalId] ? `#${idMap[originalId]}` : match)\n\n  // Return the processed SVG string\n  return processedSvgString\n}\n\nconst escapeHtml = (str: string) => {\n  const htmlEntities: { [key: string]: string } = {\n    '<': '&lt;',\n    '>': '&gt;',\n    '\"': '&quot;',\n    \"'\": '&#039;',\n    '`': '&#039;',\n  }\n\n  return str.replace(/[<>\"'`]/g, (match) => htmlEntities[match])\n}\n\n// The `svgOriginalContent` template string will be replaced with the SVG innerHTML in the generate script.\n\nconst svgOriginalContent = `<g clip-path=\"url(#clip0_247_6263)\">\n<path 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\" fill=\"#F0F0F0\"/>\n<path d=\"M1.19116 17.2173C3.13212 21.2313 7.24254 24 12 24C16.7575 24 20.868 21.2313 22.8089 17.2173H1.19116Z\" fill=\"#6DA544\"/>\n<path d=\"M1.19116 6.78263H22.8089C20.868 2.76872 16.7575 0 12 0C7.24254 0 3.13212 2.76872 1.19116 6.78263Z\" fill=\"#D80027\"/>\n<path d=\"M9.91309 15.1305H14.087V13.3565L13.2522 13.7739L12.0001 12.5217L10.7479 13.7739L9.91309 13.3565V15.1305Z\" fill=\"#FFDA44\"/>\n<path 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\" fill=\"#FFDA44\"/>\n<path 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\" fill=\"#FFDA44\"/>\n<path 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\" fill=\"#FFDA44\"/>\n<path 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\" fill=\"#FFDA44\"/>\n<path 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\" fill=\"#FFDA44\"/>\n<path 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\" fill=\"#FFDA44\"/>\n<path 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\" fill=\"#FFDA44\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_247_6263\">\n<rect width=\"24\" height=\"24\" fill=\"white\"/>\n</clipPath>\n</defs>`\nconst svgTitleContent = props.title ? `<title data-testid=\"kui-icon-svg-title\">${escapeHtml(props.title)}</title>` : ''\nconst svgProcessedContent = `${svgTitleContent}${!props.staticIds ? prefixSvgIdsInString(svgOriginalContent) : svgOriginalContent}`\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      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-tj-icon\"\n      fill=\"none\"\n      height=\"100%\"\n      role=\"img\"\n      :tabindex=\"decorative ? '-1' : undefined\"\n      viewBox=\"0 0 24 24\"\n      width=\"100%\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      v-html=\"svgProcessedContent\"\n    />\n  </component>\n</template>\n\n<style>\n/**\n * !Important: Do not add styles into this component file.\n *\n * We are adding styles inline to avoid additional stylesheet imports in the consuming application/component.\n */\n</style>\n"],"names":["svgOriginalContent","props","__props","iconSize","computed","sanitizedSize","sizeNumber","KUI_ICON_SIZE_50","rootElementStyles","prefixSvgIdsInString","svgString","idMap","randomPrefix","match","originalId","newId","escapeHtml","str","htmlEntities","svgProcessedContent"],"mappings":";;uCA0JMA,IAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA7I3B,UAAMC,IAAQC,GAgERC,IAAWC,EAAS,MAAc;AAEtC,UAAI,OAAOH,EAAM,QAAS,YAAYA,EAAM,OAAO;AAC1C,eAAA,GAAGA,EAAM,IAAI;AAGlB,UAAA,OAAOA,EAAM,QAAS,UAAU;AAElC,cAAMI,IAAgB,OAAOJ,EAAM,IAAI,EAAE,QAAQ,QAAQ,EAAE,GACrDK,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,OAAOH,EAAM;AAAA,MACb,SAASA,EAAM;AAAA,MACf,YAAY;AAAA,MACZ,QAAQE,EAAS;AAAA,MACjB,YAAY;AAAA,MACZ,OAAOA,EAAS;AAAA,MAChB,GAAIF,EAAM,cAAc,EAAE,eAAe,OAAO;AAAA,IAChD,EAAA,GAaIQ,IAAuB,CAACC,MAA8B;AAC1D,YAAMC,IAAgC,CAAA,GAChCC,IAAe,KAAK,SAAS,SAAS,EAAE,EAAE,UAAU,GAAG,EAAE;AAaxD,aAVkBF,EAAU,QAAQ,iBAAiB,CAACG,GAAOC,MAAe;AACjF,cAAMC,IAAQ,GAAGH,CAAY,IAAIE,CAAU;AAC3C,eAAAH,EAAMG,CAAU,IAAIC,GACb,OAAOA,CAAK;AAAA,MAAA,CACpB,EAG2C,QAAQ,iBAAiB,CAACF,GAAOC,MAAeH,EAAMG,CAAU,IAAI,IAAIH,EAAMG,CAAU,CAAC,KAAKD,CAAK;AAAA,IAGxI,GAGHG,IAAa,CAACC,MAAgB;AAClC,YAAMC,IAA0C;AAAA,QAC9C,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,MAAA;AAGP,aAAOD,EAAI,QAAQ,YAAY,CAACJ,MAAUK,EAAaL,CAAK,CAAC;AAAA,IAAA,GAwBzDM,IAAsB,GADJlB,EAAM,QAAQ,2CAA2Ce,EAAWf,EAAM,KAAK,CAAC,aAAa,EACvE,GAAIA,EAAM,YAAuDD,IAA3CS,EAAqBT,CAAkB,CAAsB;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/kong-icons.es402.js

@@ -1,6 +1,6 @@
-import { defineComponent as m, computed as d, openBlock as c, createBlock as S, resolveDynamicComponent as v, normalizeStyle as C, withCtx as y, createElementBlock as F } from "vue";
-import { KUI_ICON_SIZE_50 as p } from "./kong-icons.es1223.js";
-const b = ["aria-hidden"], u = `<g clip-path="url(#clip0_247_6268)">
+import { defineComponent as m, computed as d, openBlock as c, createBlock as v, resolveDynamicComponent as S, normalizeStyle as C, withCtx as y, createElementBlock as b } from "vue";
+import { KUI_ICON_SIZE_50 as u } from "./kong-icons.es1223.js";
+const x = ["aria-hidden", "tabindex"], p = `<g clip-path="url(#clip0_247_6268)">
 <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"/>
 <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"/>
 <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"/>
@@ -43,7 +43,7 @@ const b = ["aria-hidden"], u = `<g clip-path="url(#clip0_247_6268)">
     size: {
       type: [Number, String],
       required: !1,
-      default: p,
+      default: u,
       // if setting to the imported const fails, just pass a number of 24 as the default.
       validator: (i) => {
         if (typeof i == "number" && i > 0)
@@ -81,7 +81,7 @@ const b = ["aria-hidden"], u = `<g clip-path="url(#clip0_247_6268)">
         if (t && !isNaN(t) && Number.isInteger(t) && t > 0)
           return `${t}px`;
       }
-      return p;
+      return u;
     }), g = d(() => ({
       boxSizing: "border-box",
       color: e.color,
@@ -89,13 +89,14 @@ const b = ["aria-hidden"], u = `<g clip-path="url(#clip0_247_6268)">
       flexShrink: "0",
       height: r.value,
       lineHeight: "0",
-      width: r.value
+      width: r.value,
+      ...e.decorative && { pointerEvents: "none" }
     })), f = (n) => {
-      const t = {}, s = Math.random().toString(36).substring(2, 12);
-      return n.replace(/id="([^"]+)"/g, (a, l) => {
-        const o = `${s}-${l}`;
-        return t[l] = o, `id="${o}"`;
-      }).replace(/#([^\s^")]+)/g, (a, l) => t[l] ? `#${t[l]}` : a);
+      const t = {}, o = Math.random().toString(36).substring(2, 12);
+      return n.replace(/id="([^"]+)"/g, (l, a) => {
+        const s = `${o}-${a}`;
+        return t[a] = s, `id="${s}"`;
+      }).replace(/#([^\s^")]+)/g, (l, a) => t[a] ? `#${t[a]}` : l);
     }, L = (n) => {
       const t = {
         "<": "&lt;",
@@ -104,26 +105,27 @@ const b = ["aria-hidden"], u = `<g clip-path="url(#clip0_247_6268)">
         "'": "&#039;",
         "`": "&#039;"
       };
-      return n.replace(/[<>"'`]/g, (s) => t[s]);
-    }, h = `${e.title ? `<title data-testid="kui-icon-svg-title">${L(e.title)}</title>` : ""}${e.staticIds ? u : f(u)}`;
-    return (n, t) => (c(), S(v(i.as), {
+      return n.replace(/[<>"'`]/g, (o) => t[o]);
+    }, h = `${e.title ? `<title data-testid="kui-icon-svg-title">${L(e.title)}</title>` : ""}${e.staticIds ? p : f(p)}`;
+    return (n, t) => (c(), v(S(i.as), {
       "aria-hidden": i.decorative ? "true" : void 0,
       class: "kui-icon flag-tk-icon",
       "data-testid": "kui-icon-wrapper-flag-tk-icon",
       style: C(g.value)
     }, {
       default: y(() => [
-        (c(), F("svg", {
+        (c(), b("svg", {
           "aria-hidden": i.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-flag-tk-icon",
           fill: "none",
           height: "100%",
           role: "img",
+          tabindex: i.decorative ? "-1" : void 0,
           viewBox: "0 0 24 24",
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg",
           innerHTML: h
-        }, null, 8, b))
+        }, null, 8, x))
       ]),
       _: 1
     }, 8, ["aria-hidden", "style"]));

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

@@ -1 +1 @@
-{"version":3,"file":"kong-icons.es402.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 Wed, 30 Oct 2024 15:36:26 GMT\n *\n * GitHub: https://github.com/Kong/icons\n * License: Apache-2.0\n */\n\nimport { computed } 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  /**\n   * A boolean to disable prefixing any internal SVG ids with a unique string which is done to resolve the potential for multiple SVG instances on the same page and the SVG utilizing the same ids and references internally (e.g. in the `<defs>` tag).\n   * Typically only set to `true` during snapshot testing.\n   * Defaults to `false`.\n   */\n  staticIds: {\n    type: Boolean,\n    default: false,\n  },\n})\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 SVG IDs in the given SVG string with a random prefix to ensure uniqueness.\n *\n * This function performs the following steps:\n * 1. Generates a random prefix.\n * 2. Replaces all `id` attributes in the SVG string with the new prefixed IDs.\n * 3. Updates all ID references (e.g., `url(#id)`, `href=\"#id\"`, etc.) to use the new prefixed IDs.\n *\n * @param {string} svgString - The SVG string in which to prefix IDs.\n * @returns {string} - The SVG string with prefixed IDs.\n */\nconst prefixSvgIdsInString = (svgString: string): string => {\n  const idMap: Record<string, string> = {}\n  const randomPrefix = Math.random().toString(36).substring(2, 12)\n\n  // Replace IDs in the SVG string\n  const updatedSvgString = svgString.replace(/id=\"([^\"]+)\"/g, (match, originalId) => {\n    const newId = `${randomPrefix}-${originalId}`\n    idMap[originalId] = newId\n    return `id=\"${newId}\"`\n  })\n\n  // Replace ID references (e.g., url(#id), href=\"#id\", etc.)\n  const processedSvgString = updatedSvgString.replace(/#([^\\s^\")]+)/g, (match, originalId) => idMap[originalId] ? `#${idMap[originalId]}` : match)\n\n  // Return the processed SVG string\n  return processedSvgString\n}\n\nconst escapeHtml = (str: string) => {\n  const htmlEntities: { [key: string]: string } = {\n    '<': '&lt;',\n    '>': '&gt;',\n    '\"': '&quot;',\n    \"'\": '&#039;',\n    '`': '&#039;',\n  }\n\n  return str.replace(/[<>\"'`]/g, (match) => htmlEntities[match])\n}\n\n// The `svgOriginalContent` template string will be replaced with the SVG innerHTML in the generate script.\n\nconst svgOriginalContent = `<g clip-path=\"url(#clip0_247_6268)\">\n<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\"/>\n<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\"/>\n<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\"/>\n<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\"/>\n<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\"/>\n<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\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_247_6268\">\n<rect width=\"24\" height=\"24\" fill=\"white\"/>\n</clipPath>\n</defs>`\nconst svgTitleContent = props.title ? `<title data-testid=\"kui-icon-svg-title\">${escapeHtml(props.title)}</title>` : ''\nconst svgProcessedContent = `${svgTitleContent}${!props.staticIds ? prefixSvgIdsInString(svgOriginalContent) : svgOriginalContent}`\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      :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      v-html=\"svgProcessedContent\"\n    />\n  </component>\n</template>\n\n<style>\n/**\n * !Important: Do not add styles into this component file.\n *\n * We are adding styles inline to avoid additional stylesheet imports in the consuming application/component.\n */\n</style>\n"],"names":["svgOriginalContent","props","__props","iconSize","computed","sanitizedSize","sizeNumber","KUI_ICON_SIZE_50","rootElementStyles","prefixSvgIdsInString","svgString","idMap","randomPrefix","match","originalId","newId","escapeHtml","str","htmlEntities","svgProcessedContent"],"mappings":";;2BAyJMA,IAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA5I3B,UAAMC,IAAQC,GAgERC,IAAWC,EAAS,MAAc;AAEtC,UAAI,OAAOH,EAAM,QAAS,YAAYA,EAAM,OAAO;AAC1C,eAAA,GAAGA,EAAM,IAAI;AAGlB,UAAA,OAAOA,EAAM,QAAS,UAAU;AAElC,cAAMI,IAAgB,OAAOJ,EAAM,IAAI,EAAE,QAAQ,QAAQ,EAAE,GACrDK,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,OAAOH,EAAM;AAAA,MACb,SAASA,EAAM;AAAA,MACf,YAAY;AAAA,MACZ,QAAQE,EAAS;AAAA,MACjB,YAAY;AAAA,MACZ,OAAOA,EAAS;AAAA,IAChB,EAAA,GAaIM,IAAuB,CAACC,MAA8B;AAC1D,YAAMC,IAAgC,CAAA,GAChCC,IAAe,KAAK,SAAS,SAAS,EAAE,EAAE,UAAU,GAAG,EAAE;AAaxD,aAVkBF,EAAU,QAAQ,iBAAiB,CAACG,GAAOC,MAAe;AACjF,cAAMC,IAAQ,GAAGH,CAAY,IAAIE,CAAU;AAC3C,eAAAH,EAAMG,CAAU,IAAIC,GACb,OAAOA,CAAK;AAAA,MAAA,CACpB,EAG2C,QAAQ,iBAAiB,CAACF,GAAOC,MAAeH,EAAMG,CAAU,IAAI,IAAIH,EAAMG,CAAU,CAAC,KAAKD,CAAK;AAAA,IAGxI,GAGHG,IAAa,CAACC,MAAgB;AAClC,YAAMC,IAA0C;AAAA,QAC9C,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,MAAA;AAGP,aAAOD,EAAI,QAAQ,YAAY,CAACJ,MAAUK,EAAaL,CAAK,CAAC;AAAA,IAAA,GAmBzDM,IAAsB,GADJlB,EAAM,QAAQ,2CAA2Ce,EAAWf,EAAM,KAAK,CAAC,aAAa,EACvE,GAAIA,EAAM,YAAuDD,IAA3CS,EAAqBT,CAAkB,CAAsB;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"kong-icons.es402.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 Wed, 30 Oct 2024 15:02:40 GMT\n *\n * GitHub: https://github.com/Kong/icons\n * License: Apache-2.0\n */\n\nimport { computed } 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  /**\n   * A boolean to disable prefixing any internal SVG ids with a unique string which is done to resolve the potential for multiple SVG instances on the same page and the SVG utilizing the same ids and references internally (e.g. in the `<defs>` tag).\n   * Typically only set to `true` during snapshot testing.\n   * Defaults to `false`.\n   */\n  staticIds: {\n    type: Boolean,\n    default: false,\n  },\n})\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  ...(props.decorative && { pointerEvents: 'none' }),\n}))\n\n/**\n * Prefix all SVG IDs in the given SVG string with a random prefix to ensure uniqueness.\n *\n * This function performs the following steps:\n * 1. Generates a random prefix.\n * 2. Replaces all `id` attributes in the SVG string with the new prefixed IDs.\n * 3. Updates all ID references (e.g., `url(#id)`, `href=\"#id\"`, etc.) to use the new prefixed IDs.\n *\n * @param {string} svgString - The SVG string in which to prefix IDs.\n * @returns {string} - The SVG string with prefixed IDs.\n */\nconst prefixSvgIdsInString = (svgString: string): string => {\n  const idMap: Record<string, string> = {}\n  const randomPrefix = Math.random().toString(36).substring(2, 12)\n\n  // Replace IDs in the SVG string\n  const updatedSvgString = svgString.replace(/id=\"([^\"]+)\"/g, (match, originalId) => {\n    const newId = `${randomPrefix}-${originalId}`\n    idMap[originalId] = newId\n    return `id=\"${newId}\"`\n  })\n\n  // Replace ID references (e.g., url(#id), href=\"#id\", etc.)\n  const processedSvgString = updatedSvgString.replace(/#([^\\s^\")]+)/g, (match, originalId) => idMap[originalId] ? `#${idMap[originalId]}` : match)\n\n  // Return the processed SVG string\n  return processedSvgString\n}\n\nconst escapeHtml = (str: string) => {\n  const htmlEntities: { [key: string]: string } = {\n    '<': '&lt;',\n    '>': '&gt;',\n    '\"': '&quot;',\n    \"'\": '&#039;',\n    '`': '&#039;',\n  }\n\n  return str.replace(/[<>\"'`]/g, (match) => htmlEntities[match])\n}\n\n// The `svgOriginalContent` template string will be replaced with the SVG innerHTML in the generate script.\n\nconst svgOriginalContent = `<g clip-path=\"url(#clip0_247_6268)\">\n<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\"/>\n<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\"/>\n<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\"/>\n<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\"/>\n<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\"/>\n<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\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_247_6268\">\n<rect width=\"24\" height=\"24\" fill=\"white\"/>\n</clipPath>\n</defs>`\nconst svgTitleContent = props.title ? `<title data-testid=\"kui-icon-svg-title\">${escapeHtml(props.title)}</title>` : ''\nconst svgProcessedContent = `${svgTitleContent}${!props.staticIds ? prefixSvgIdsInString(svgOriginalContent) : svgOriginalContent}`\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      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-tk-icon\"\n      fill=\"none\"\n      height=\"100%\"\n      role=\"img\"\n      :tabindex=\"decorative ? '-1' : undefined\"\n      viewBox=\"0 0 24 24\"\n      width=\"100%\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      v-html=\"svgProcessedContent\"\n    />\n  </component>\n</template>\n\n<style>\n/**\n * !Important: Do not add styles into this component file.\n *\n * We are adding styles inline to avoid additional stylesheet imports in the consuming application/component.\n */\n</style>\n"],"names":["svgOriginalContent","props","__props","iconSize","computed","sanitizedSize","sizeNumber","KUI_ICON_SIZE_50","rootElementStyles","prefixSvgIdsInString","svgString","idMap","randomPrefix","match","originalId","newId","escapeHtml","str","htmlEntities","svgProcessedContent"],"mappings":";;uCA0JMA,IAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA7I3B,UAAMC,IAAQC,GAgERC,IAAWC,EAAS,MAAc;AAEtC,UAAI,OAAOH,EAAM,QAAS,YAAYA,EAAM,OAAO;AAC1C,eAAA,GAAGA,EAAM,IAAI;AAGlB,UAAA,OAAOA,EAAM,QAAS,UAAU;AAElC,cAAMI,IAAgB,OAAOJ,EAAM,IAAI,EAAE,QAAQ,QAAQ,EAAE,GACrDK,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,OAAOH,EAAM;AAAA,MACb,SAASA,EAAM;AAAA,MACf,YAAY;AAAA,MACZ,QAAQE,EAAS;AAAA,MACjB,YAAY;AAAA,MACZ,OAAOA,EAAS;AAAA,MAChB,GAAIF,EAAM,cAAc,EAAE,eAAe,OAAO;AAAA,IAChD,EAAA,GAaIQ,IAAuB,CAACC,MAA8B;AAC1D,YAAMC,IAAgC,CAAA,GAChCC,IAAe,KAAK,SAAS,SAAS,EAAE,EAAE,UAAU,GAAG,EAAE;AAaxD,aAVkBF,EAAU,QAAQ,iBAAiB,CAACG,GAAOC,MAAe;AACjF,cAAMC,IAAQ,GAAGH,CAAY,IAAIE,CAAU;AAC3C,eAAAH,EAAMG,CAAU,IAAIC,GACb,OAAOA,CAAK;AAAA,MAAA,CACpB,EAG2C,QAAQ,iBAAiB,CAACF,GAAOC,MAAeH,EAAMG,CAAU,IAAI,IAAIH,EAAMG,CAAU,CAAC,KAAKD,CAAK;AAAA,IAGxI,GAGHG,IAAa,CAACC,MAAgB;AAClC,YAAMC,IAA0C;AAAA,QAC9C,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,MAAA;AAGP,aAAOD,EAAI,QAAQ,YAAY,CAACJ,MAAUK,EAAaL,CAAK,CAAC;AAAA,IAAA,GAmBzDM,IAAsB,GADJlB,EAAM,QAAQ,2CAA2Ce,EAAWf,EAAM,KAAK,CAAC,aAAa,EACvE,GAAIA,EAAM,YAAuDD,IAA3CS,EAAqBT,CAAkB,CAAsB;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/kong-icons.es404.js

@@ -1,6 +1,6 @@
-import { defineComponent as S, computed as c, openBlock as d, createBlock as v, resolveDynamicComponent as y, normalizeStyle as C, withCtx as b, createElementBlock as x } from "vue";
+import { defineComponent as v, computed as d, openBlock as c, createBlock as S, resolveDynamicComponent as y, normalizeStyle as C, withCtx as b, createElementBlock as x } from "vue";
 import { KUI_ICON_SIZE_50 as u } from "./kong-icons.es1223.js";
-const L = ["aria-hidden"], p = `<g clip-path="url(#clip0_1_2318)">
+const L = ["aria-hidden", "tabindex"], g = `<g clip-path="url(#clip0_1_2318)">
 <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"/>
 <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"/>
 <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"/>
@@ -10,7 +10,7 @@ const L = ["aria-hidden"], p = `<g clip-path="url(#clip0_1_2318)">
 <clipPath id="clip0_1_2318">
 <rect width="24" height="24" fill="white"/>
 </clipPath>
-</defs>`, I = /* @__PURE__ */ S({
+</defs>`, $ = /* @__PURE__ */ v({
   __name: "FlagTlIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -71,7 +71,7 @@ const L = ["aria-hidden"], p = `<g clip-path="url(#clip0_1_2318)">
     }
   },
   setup(i) {
-    const e = i, r = c(() => {
+    const e = i, r = d(() => {
       if (typeof e.size == "number" && e.size > 0)
         return `${e.size}px`;
       if (typeof e.size == "string") {
@@ -80,20 +80,21 @@ const L = ["aria-hidden"], p = `<g clip-path="url(#clip0_1_2318)">
           return `${t}px`;
       }
       return u;
-    }), g = c(() => ({
+    }), p = d(() => ({
       boxSizing: "border-box",
       color: e.color,
       display: e.display,
       flexShrink: "0",
       height: r.value,
       lineHeight: "0",
-      width: r.value
+      width: r.value,
+      ...e.decorative && { pointerEvents: "none" }
     })), f = (n) => {
-      const t = {}, s = Math.random().toString(36).substring(2, 12);
-      return n.replace(/id="([^"]+)"/g, (o, l) => {
-        const a = `${s}-${l}`;
-        return t[l] = a, `id="${a}"`;
-      }).replace(/#([^\s^")]+)/g, (o, l) => t[l] ? `#${t[l]}` : o);
+      const t = {}, a = Math.random().toString(36).substring(2, 12);
+      return n.replace(/id="([^"]+)"/g, (l, o) => {
+        const s = `${a}-${o}`;
+        return t[o] = s, `id="${s}"`;
+      }).replace(/#([^\s^")]+)/g, (l, o) => t[o] ? `#${t[o]}` : l);
     }, h = (n) => {
       const t = {
         "<": "&lt;",
@@ -102,21 +103,22 @@ const L = ["aria-hidden"], p = `<g clip-path="url(#clip0_1_2318)">
         "'": "&#039;",
         "`": "&#039;"
       };
-      return n.replace(/[<>"'`]/g, (s) => t[s]);
-    }, m = `${e.title ? `<title data-testid="kui-icon-svg-title">${h(e.title)}</title>` : ""}${e.staticIds ? p : f(p)}`;
-    return (n, t) => (d(), v(y(i.as), {
+      return n.replace(/[<>"'`]/g, (a) => t[a]);
+    }, m = `${e.title ? `<title data-testid="kui-icon-svg-title">${h(e.title)}</title>` : ""}${e.staticIds ? g : f(g)}`;
+    return (n, t) => (c(), S(y(i.as), {
       "aria-hidden": i.decorative ? "true" : void 0,
       class: "kui-icon flag-tl-icon",
       "data-testid": "kui-icon-wrapper-flag-tl-icon",
-      style: C(g.value)
+      style: C(p.value)
     }, {
       default: b(() => [
-        (d(), x("svg", {
+        (c(), x("svg", {
           "aria-hidden": i.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-flag-tl-icon",
           fill: "none",
           height: "100%",
           role: "img",
+          tabindex: i.decorative ? "-1" : void 0,
           viewBox: "0 0 24 24",
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg",
@@ -128,6 +130,6 @@ const L = ["aria-hidden"], p = `<g clip-path="url(#clip0_1_2318)">
   }
 });
 export {
-  I as default
+  $ as default
 };
 //# sourceMappingURL=kong-icons.es404.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"kong-icons.es404.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 Wed, 30 Oct 2024 15:36:26 GMT\n *\n * GitHub: https://github.com/Kong/icons\n * License: Apache-2.0\n */\n\nimport { computed } 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  /**\n   * A boolean to disable prefixing any internal SVG ids with a unique string which is done to resolve the potential for multiple SVG instances on the same page and the SVG utilizing the same ids and references internally (e.g. in the `<defs>` tag).\n   * Typically only set to `true` during snapshot testing.\n   * Defaults to `false`.\n   */\n  staticIds: {\n    type: Boolean,\n    default: false,\n  },\n})\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 SVG IDs in the given SVG string with a random prefix to ensure uniqueness.\n *\n * This function performs the following steps:\n * 1. Generates a random prefix.\n * 2. Replaces all `id` attributes in the SVG string with the new prefixed IDs.\n * 3. Updates all ID references (e.g., `url(#id)`, `href=\"#id\"`, etc.) to use the new prefixed IDs.\n *\n * @param {string} svgString - The SVG string in which to prefix IDs.\n * @returns {string} - The SVG string with prefixed IDs.\n */\nconst prefixSvgIdsInString = (svgString: string): string => {\n  const idMap: Record<string, string> = {}\n  const randomPrefix = Math.random().toString(36).substring(2, 12)\n\n  // Replace IDs in the SVG string\n  const updatedSvgString = svgString.replace(/id=\"([^\"]+)\"/g, (match, originalId) => {\n    const newId = `${randomPrefix}-${originalId}`\n    idMap[originalId] = newId\n    return `id=\"${newId}\"`\n  })\n\n  // Replace ID references (e.g., url(#id), href=\"#id\", etc.)\n  const processedSvgString = updatedSvgString.replace(/#([^\\s^\")]+)/g, (match, originalId) => idMap[originalId] ? `#${idMap[originalId]}` : match)\n\n  // Return the processed SVG string\n  return processedSvgString\n}\n\nconst escapeHtml = (str: string) => {\n  const htmlEntities: { [key: string]: string } = {\n    '<': '&lt;',\n    '>': '&gt;',\n    '\"': '&quot;',\n    \"'\": '&#039;',\n    '`': '&#039;',\n  }\n\n  return str.replace(/[<>\"'`]/g, (match) => htmlEntities[match])\n}\n\n// The `svgOriginalContent` template string will be replaced with the SVG innerHTML in the generate script.\n\nconst svgOriginalContent = `<g clip-path=\"url(#clip0_1_2318)\">\n<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\"/>\n<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\"/>\n<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\"/>\n<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\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_1_2318\">\n<rect width=\"24\" height=\"24\" fill=\"white\"/>\n</clipPath>\n</defs>`\nconst svgTitleContent = props.title ? `<title data-testid=\"kui-icon-svg-title\">${escapeHtml(props.title)}</title>` : ''\nconst svgProcessedContent = `${svgTitleContent}${!props.staticIds ? prefixSvgIdsInString(svgOriginalContent) : svgOriginalContent}`\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      :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      v-html=\"svgProcessedContent\"\n    />\n  </component>\n</template>\n\n<style>\n/**\n * !Important: Do not add styles into this component file.\n *\n * We are adding styles inline to avoid additional stylesheet imports in the consuming application/component.\n */\n</style>\n"],"names":["svgOriginalContent","props","__props","iconSize","computed","sanitizedSize","sizeNumber","KUI_ICON_SIZE_50","rootElementStyles","prefixSvgIdsInString","svgString","idMap","randomPrefix","match","originalId","newId","escapeHtml","str","htmlEntities","svgProcessedContent"],"mappings":";;2BAyJMA,IAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA5I3B,UAAMC,IAAQC,GAgERC,IAAWC,EAAS,MAAc;AAEtC,UAAI,OAAOH,EAAM,QAAS,YAAYA,EAAM,OAAO;AAC1C,eAAA,GAAGA,EAAM,IAAI;AAGlB,UAAA,OAAOA,EAAM,QAAS,UAAU;AAElC,cAAMI,IAAgB,OAAOJ,EAAM,IAAI,EAAE,QAAQ,QAAQ,EAAE,GACrDK,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,OAAOH,EAAM;AAAA,MACb,SAASA,EAAM;AAAA,MACf,YAAY;AAAA,MACZ,QAAQE,EAAS;AAAA,MACjB,YAAY;AAAA,MACZ,OAAOA,EAAS;AAAA,IAChB,EAAA,GAaIM,IAAuB,CAACC,MAA8B;AAC1D,YAAMC,IAAgC,CAAA,GAChCC,IAAe,KAAK,SAAS,SAAS,EAAE,EAAE,UAAU,GAAG,EAAE;AAaxD,aAVkBF,EAAU,QAAQ,iBAAiB,CAACG,GAAOC,MAAe;AACjF,cAAMC,IAAQ,GAAGH,CAAY,IAAIE,CAAU;AAC3C,eAAAH,EAAMG,CAAU,IAAIC,GACb,OAAOA,CAAK;AAAA,MAAA,CACpB,EAG2C,QAAQ,iBAAiB,CAACF,GAAOC,MAAeH,EAAMG,CAAU,IAAI,IAAIH,EAAMG,CAAU,CAAC,KAAKD,CAAK;AAAA,IAGxI,GAGHG,IAAa,CAACC,MAAgB;AAClC,YAAMC,IAA0C;AAAA,QAC9C,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,MAAA;AAGP,aAAOD,EAAI,QAAQ,YAAY,CAACJ,MAAUK,EAAaL,CAAK,CAAC;AAAA,IAAA,GAiBzDM,IAAsB,GADJlB,EAAM,QAAQ,2CAA2Ce,EAAWf,EAAM,KAAK,CAAC,aAAa,EACvE,GAAIA,EAAM,YAAuDD,IAA3CS,EAAqBT,CAAkB,CAAsB;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"kong-icons.es404.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 Wed, 30 Oct 2024 15:02:40 GMT\n *\n * GitHub: https://github.com/Kong/icons\n * License: Apache-2.0\n */\n\nimport { computed } 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  /**\n   * A boolean to disable prefixing any internal SVG ids with a unique string which is done to resolve the potential for multiple SVG instances on the same page and the SVG utilizing the same ids and references internally (e.g. in the `<defs>` tag).\n   * Typically only set to `true` during snapshot testing.\n   * Defaults to `false`.\n   */\n  staticIds: {\n    type: Boolean,\n    default: false,\n  },\n})\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  ...(props.decorative && { pointerEvents: 'none' }),\n}))\n\n/**\n * Prefix all SVG IDs in the given SVG string with a random prefix to ensure uniqueness.\n *\n * This function performs the following steps:\n * 1. Generates a random prefix.\n * 2. Replaces all `id` attributes in the SVG string with the new prefixed IDs.\n * 3. Updates all ID references (e.g., `url(#id)`, `href=\"#id\"`, etc.) to use the new prefixed IDs.\n *\n * @param {string} svgString - The SVG string in which to prefix IDs.\n * @returns {string} - The SVG string with prefixed IDs.\n */\nconst prefixSvgIdsInString = (svgString: string): string => {\n  const idMap: Record<string, string> = {}\n  const randomPrefix = Math.random().toString(36).substring(2, 12)\n\n  // Replace IDs in the SVG string\n  const updatedSvgString = svgString.replace(/id=\"([^\"]+)\"/g, (match, originalId) => {\n    const newId = `${randomPrefix}-${originalId}`\n    idMap[originalId] = newId\n    return `id=\"${newId}\"`\n  })\n\n  // Replace ID references (e.g., url(#id), href=\"#id\", etc.)\n  const processedSvgString = updatedSvgString.replace(/#([^\\s^\")]+)/g, (match, originalId) => idMap[originalId] ? `#${idMap[originalId]}` : match)\n\n  // Return the processed SVG string\n  return processedSvgString\n}\n\nconst escapeHtml = (str: string) => {\n  const htmlEntities: { [key: string]: string } = {\n    '<': '&lt;',\n    '>': '&gt;',\n    '\"': '&quot;',\n    \"'\": '&#039;',\n    '`': '&#039;',\n  }\n\n  return str.replace(/[<>\"'`]/g, (match) => htmlEntities[match])\n}\n\n// The `svgOriginalContent` template string will be replaced with the SVG innerHTML in the generate script.\n\nconst svgOriginalContent = `<g clip-path=\"url(#clip0_1_2318)\">\n<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\"/>\n<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\"/>\n<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\"/>\n<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\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_1_2318\">\n<rect width=\"24\" height=\"24\" fill=\"white\"/>\n</clipPath>\n</defs>`\nconst svgTitleContent = props.title ? `<title data-testid=\"kui-icon-svg-title\">${escapeHtml(props.title)}</title>` : ''\nconst svgProcessedContent = `${svgTitleContent}${!props.staticIds ? prefixSvgIdsInString(svgOriginalContent) : svgOriginalContent}`\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      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-tl-icon\"\n      fill=\"none\"\n      height=\"100%\"\n      role=\"img\"\n      :tabindex=\"decorative ? '-1' : undefined\"\n      viewBox=\"0 0 24 24\"\n      width=\"100%\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      v-html=\"svgProcessedContent\"\n    />\n  </component>\n</template>\n\n<style>\n/**\n * !Important: Do not add styles into this component file.\n *\n * We are adding styles inline to avoid additional stylesheet imports in the consuming application/component.\n */\n</style>\n"],"names":["svgOriginalContent","props","__props","iconSize","computed","sanitizedSize","sizeNumber","KUI_ICON_SIZE_50","rootElementStyles","prefixSvgIdsInString","svgString","idMap","randomPrefix","match","originalId","newId","escapeHtml","str","htmlEntities","svgProcessedContent"],"mappings":";;uCA0JMA,IAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA7I3B,UAAMC,IAAQC,GAgERC,IAAWC,EAAS,MAAc;AAEtC,UAAI,OAAOH,EAAM,QAAS,YAAYA,EAAM,OAAO;AAC1C,eAAA,GAAGA,EAAM,IAAI;AAGlB,UAAA,OAAOA,EAAM,QAAS,UAAU;AAElC,cAAMI,IAAgB,OAAOJ,EAAM,IAAI,EAAE,QAAQ,QAAQ,EAAE,GACrDK,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,OAAOH,EAAM;AAAA,MACb,SAASA,EAAM;AAAA,MACf,YAAY;AAAA,MACZ,QAAQE,EAAS;AAAA,MACjB,YAAY;AAAA,MACZ,OAAOA,EAAS;AAAA,MAChB,GAAIF,EAAM,cAAc,EAAE,eAAe,OAAO;AAAA,IAChD,EAAA,GAaIQ,IAAuB,CAACC,MAA8B;AAC1D,YAAMC,IAAgC,CAAA,GAChCC,IAAe,KAAK,SAAS,SAAS,EAAE,EAAE,UAAU,GAAG,EAAE;AAaxD,aAVkBF,EAAU,QAAQ,iBAAiB,CAACG,GAAOC,MAAe;AACjF,cAAMC,IAAQ,GAAGH,CAAY,IAAIE,CAAU;AAC3C,eAAAH,EAAMG,CAAU,IAAIC,GACb,OAAOA,CAAK;AAAA,MAAA,CACpB,EAG2C,QAAQ,iBAAiB,CAACF,GAAOC,MAAeH,EAAMG,CAAU,IAAI,IAAIH,EAAMG,CAAU,CAAC,KAAKD,CAAK;AAAA,IAGxI,GAGHG,IAAa,CAACC,MAAgB;AAClC,YAAMC,IAA0C;AAAA,QAC9C,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,MAAA;AAGP,aAAOD,EAAI,QAAQ,YAAY,CAACJ,MAAUK,EAAaL,CAAK,CAAC;AAAA,IAAA,GAiBzDM,IAAsB,GADJlB,EAAM,QAAQ,2CAA2Ce,EAAWf,EAAM,KAAK,CAAC,aAAa,EACvE,GAAIA,EAAM,YAAuDD,IAA3CS,EAAqBT,CAAkB,CAAsB;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/kong-icons.es406.js

@@ -1,6 +1,6 @@
-import { defineComponent as H, computed as d, openBlock as L, createBlock as m, resolveDynamicComponent as F, normalizeStyle as C, withCtx as V, createElementBlock as S } from "vue";
+import { defineComponent as H, computed as s, openBlock as L, createBlock as m, resolveDynamicComponent as F, normalizeStyle as C, withCtx as v, createElementBlock as V } from "vue";
 import { KUI_ICON_SIZE_50 as c } from "./kong-icons.es1223.js";
-const v = ["aria-hidden"], p = `<g clip-path="url(#clip0_247_6274)">
+const S = ["aria-hidden", "tabindex"], p = `<g clip-path="url(#clip0_247_6274)">
 <path d="M12 0C11.104 0 10.2313 0.0990469 9.39135 0.285234L8.86963 12L9.39135 23.7147C10.2313 23.9009 11.1041 24 12 24C18.6274 24 24 18.6274 24 12C23.9999 5.37258 18.6274 0 12 0V0Z" fill="#496E2D"/>
 <path d="M3.13041 3.91742C1.18584 6.05004 0 8.88645 0 12C0 15.1135 1.18589 17.9499 3.13045 20.0826L3.65217 12L3.13041 3.91742Z" fill="#496E2D"/>
 <path d="M17.5509 9.0515C18.1413 7.4059 17.478 5.61617 16.0546 4.72479C16.3106 4.75812 16.5669 4.8184 16.8199 4.9091C18.7185 5.59029 19.7054 7.68148 19.0242 9.58001C18.343 11.4787 16.2518 12.4655 14.3532 11.7843C14.1002 11.6936 13.864 11.5771 13.6453 11.4401C15.3107 11.6569 16.9605 10.6971 17.5509 9.0515Z" fill="#F0F0F0"/>
@@ -88,7 +88,7 @@ const v = ["aria-hidden"], p = `<g clip-path="url(#clip0_247_6274)">
     }
   },
   setup(i) {
-    const t = i, l = d(() => {
+    const t = i, l = s(() => {
       if (typeof t.size == "number" && t.size > 0)
         return `${t.size}px`;
       if (typeof t.size == "string") {
@@ -97,20 +97,21 @@ const v = ["aria-hidden"], p = `<g clip-path="url(#clip0_247_6274)">
           return `${e}px`;
       }
       return c;
-    }), f = d(() => ({
+    }), f = s(() => ({
       boxSizing: "border-box",
       color: t.color,
       display: t.display,
       flexShrink: "0",
       height: l.value,
       lineHeight: "0",
-      width: l.value
+      width: l.value,
+      ...t.decorative && { pointerEvents: "none" }
     })), u = (r) => {
       const e = {}, a = Math.random().toString(36).substring(2, 12);
-      return r.replace(/id="([^"]+)"/g, (s, n) => {
+      return r.replace(/id="([^"]+)"/g, (d, n) => {
         const o = `${a}-${n}`;
         return e[n] = o, `id="${o}"`;
-      }).replace(/#([^\s^")]+)/g, (s, n) => e[n] ? `#${e[n]}` : s);
+      }).replace(/#([^\s^")]+)/g, (d, n) => e[n] ? `#${e[n]}` : d);
     }, g = (r) => {
       const e = {
         "<": "&lt;",
@@ -127,18 +128,19 @@ const v = ["aria-hidden"], p = `<g clip-path="url(#clip0_247_6274)">
       "data-testid": "kui-icon-wrapper-flag-tm-icon",
       style: C(f.value)
     }, {
-      default: V(() => [
-        (L(), S("svg", {
+      default: v(() => [
+        (L(), V("svg", {
           "aria-hidden": i.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-flag-tm-icon",
           fill: "none",
           height: "100%",
           role: "img",
+          tabindex: i.decorative ? "-1" : void 0,
           viewBox: "0 0 24 24",
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg",
           innerHTML: h
-        }, null, 8, v))
+        }, null, 8, S))
       ]),
       _: 1
     }, 8, ["aria-hidden", "style"]));

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

@@ -1 +1 @@
-{"version":3,"file":"kong-icons.es406.js","sources":["../src/components/flags/FlagTmIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagTmIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Wed, 30 Oct 2024 15:36:26 GMT\n *\n * GitHub: https://github.com/Kong/icons\n * License: Apache-2.0\n */\n\nimport { computed } 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  /**\n   * A boolean to disable prefixing any internal SVG ids with a unique string which is done to resolve the potential for multiple SVG instances on the same page and the SVG utilizing the same ids and references internally (e.g. in the `<defs>` tag).\n   * Typically only set to `true` during snapshot testing.\n   * Defaults to `false`.\n   */\n  staticIds: {\n    type: Boolean,\n    default: false,\n  },\n})\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 SVG IDs in the given SVG string with a random prefix to ensure uniqueness.\n *\n * This function performs the following steps:\n * 1. Generates a random prefix.\n * 2. Replaces all `id` attributes in the SVG string with the new prefixed IDs.\n * 3. Updates all ID references (e.g., `url(#id)`, `href=\"#id\"`, etc.) to use the new prefixed IDs.\n *\n * @param {string} svgString - The SVG string in which to prefix IDs.\n * @returns {string} - The SVG string with prefixed IDs.\n */\nconst prefixSvgIdsInString = (svgString: string): string => {\n  const idMap: Record<string, string> = {}\n  const randomPrefix = Math.random().toString(36).substring(2, 12)\n\n  // Replace IDs in the SVG string\n  const updatedSvgString = svgString.replace(/id=\"([^\"]+)\"/g, (match, originalId) => {\n    const newId = `${randomPrefix}-${originalId}`\n    idMap[originalId] = newId\n    return `id=\"${newId}\"`\n  })\n\n  // Replace ID references (e.g., url(#id), href=\"#id\", etc.)\n  const processedSvgString = updatedSvgString.replace(/#([^\\s^\")]+)/g, (match, originalId) => idMap[originalId] ? `#${idMap[originalId]}` : match)\n\n  // Return the processed SVG string\n  return processedSvgString\n}\n\nconst escapeHtml = (str: string) => {\n  const htmlEntities: { [key: string]: string } = {\n    '<': '&lt;',\n    '>': '&gt;',\n    '\"': '&quot;',\n    \"'\": '&#039;',\n    '`': '&#039;',\n  }\n\n  return str.replace(/[<>\"'`]/g, (match) => htmlEntities[match])\n}\n\n// The `svgOriginalContent` template string will be replaced with the SVG innerHTML in the generate script.\n\nconst svgOriginalContent = `<g clip-path=\"url(#clip0_247_6274)\">\n<path d=\"M12 0C11.104 0 10.2313 0.0990469 9.39135 0.285234L8.86963 12L9.39135 23.7147C10.2313 23.9009 11.1041 24 12 24C18.6274 24 24 18.6274 24 12C23.9999 5.37258 18.6274 0 12 0V0Z\" fill=\"#496E2D\"/>\n<path d=\"M3.13041 3.91742C1.18584 6.05004 0 8.88645 0 12C0 15.1135 1.18589 17.9499 3.13045 20.0826L3.65217 12L3.13041 3.91742Z\" fill=\"#496E2D\"/>\n<path d=\"M17.5509 9.0515C18.1413 7.4059 17.478 5.61617 16.0546 4.72479C16.3106 4.75812 16.5669 4.8184 16.8199 4.9091C18.7185 5.59029 19.7054 7.68148 19.0242 9.58001C18.343 11.4787 16.2518 12.4655 14.3532 11.7843C14.1002 11.6936 13.864 11.5771 13.6453 11.4401C15.3107 11.6569 16.9605 10.6971 17.5509 9.0515Z\" fill=\"#F0F0F0\"/>\n<path d=\"M14.2766 4.27374L13.7636 4.93665L12.9747 4.65357L13.4465 5.34629L12.9336 6.0091L13.7382 5.77445L14.2101 6.46707L14.2355 5.62932L15.0401 5.39462L14.2513 5.11163L14.2766 4.27374Z\" fill=\"#F0F0F0\"/>\n<path d=\"M15.6617 6.43372L15.1486 7.09658L14.3597 6.8135L14.8316 7.50622L14.3186 8.16903L15.1232 7.93428L15.5952 8.62704L15.6206 7.78925L16.4252 7.5545L15.6363 7.27147L15.6617 6.43372Z\" fill=\"#F0F0F0\"/>\n<path d=\"M11.8342 5.06042L11.3212 5.72324L10.5323 5.44025L11.0042 6.13293L10.4912 6.79578L11.2958 6.56108L11.7677 7.25375L11.7931 6.416L12.5977 6.1813L11.8089 5.89822L11.8342 5.06042Z\" fill=\"#F0F0F0\"/>\n<path d=\"M11.7779 7.53455L11.2649 8.19741L10.476 7.91437L10.9479 8.60709L10.4348 9.26991L11.2395 9.03525L11.7114 9.72787L11.7368 8.89012L12.5414 8.65542L11.7525 8.37234L11.7779 7.53455Z\" fill=\"#F0F0F0\"/>\n<path d=\"M14.1321 8.37927L13.6191 9.04208L12.8302 8.75905L13.3022 9.45177L12.7891 10.1145L13.5938 9.87988L14.0657 10.5726L14.091 9.73476L14.8957 9.5001L14.1067 9.21707L14.1321 8.37927Z\" fill=\"#F0F0F0\"/>\n<path d=\"M3.13037 3.91737V20.0825C4.76537 21.8757 6.93709 23.1706 9.39123 23.7147V0.285217C6.93704 0.829249 4.76542 2.12417 3.13037 3.91737Z\" fill=\"#D80027\"/>\n<path d=\"M5.51961 6.31804L4.47144 5.53719V4.43296L5.51961 3.65216H7.00203L8.0502 4.43296V5.53719L7.00203 6.31804H5.51961Z\" fill=\"#F0F0F0\"/>\n<path d=\"M6.26084 3.65216H5.51961L4.47144 4.43296V4.97282H6.26084V3.65216Z\" fill=\"#FF9811\"/>\n<path d=\"M6.26074 6.31802H7.00193L8.0501 5.53717V4.97388H6.26074V6.31802Z\" fill=\"#FF9811\"/>\n<path d=\"M5.51961 20.3478L4.47144 19.5669V18.4627L5.51961 17.6819H7.00203L8.0502 18.4627V19.5669L7.00203 20.3478H5.51961Z\" fill=\"#F0F0F0\"/>\n<path d=\"M6.26084 17.6819H5.51961L4.47144 18.4627V19.0026H6.26084V17.6819Z\" fill=\"#FF9811\"/>\n<path d=\"M6.26074 20.3478H7.00193L8.0501 19.5669V19.0037H6.26074V20.3478Z\" fill=\"#FF9811\"/>\n<path d=\"M5.51961 13.3329L4.47144 12.5521V11.4479L5.51961 10.6671H7.00203L8.0502 11.4479V12.5521L7.00203 13.3329H5.51961Z\" fill=\"#496E2D\"/>\n<path d=\"M8.08694 15.0509H7.63038V14.5944H6.82811L6.26083 14.0271L5.6936 14.5944H4.89133V15.0509H4.43481V15.9639H4.89133V16.4204H5.69355L6.26088 16.9878L6.82811 16.4204H7.63038V15.9639H8.08694V15.0509Z\" fill=\"#496E2D\"/>\n<path d=\"M8.08694 8.03599H7.63038V7.57943H6.82811L6.26083 7.01215L5.6936 7.57943H4.89133V8.03599H4.43481V8.94902H4.89133V9.40554H5.69355L6.26088 9.97291L6.82811 9.40554H7.63038V8.94902H8.08694V8.03599Z\" fill=\"#496E2D\"/>\n<path d=\"M5.73901 11.4782H6.7825V12.5217H5.73901V11.4782Z\" fill=\"#D80027\"/>\n<path d=\"M6.26073 9.01402C6.54887 9.01402 6.78245 8.78044 6.78245 8.4923C6.78245 8.20416 6.54887 7.97058 6.26073 7.97058C5.97259 7.97058 5.73901 8.20416 5.73901 8.4923C5.73901 8.78044 5.97259 9.01402 6.26073 9.01402Z\" fill=\"#D80027\"/>\n<path d=\"M6.26073 16.0293C6.54887 16.0293 6.78245 15.7957 6.78245 15.5076C6.78245 15.2194 6.54887 14.9858 6.26073 14.9858C5.97259 14.9858 5.73901 15.2194 5.73901 15.5076C5.73901 15.7957 5.97259 16.0293 6.26073 16.0293Z\" fill=\"#D80027\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_247_6274\">\n<rect width=\"24\" height=\"24\" fill=\"white\"/>\n</clipPath>\n</defs>`\nconst svgTitleContent = props.title ? `<title data-testid=\"kui-icon-svg-title\">${escapeHtml(props.title)}</title>` : ''\nconst svgProcessedContent = `${svgTitleContent}${!props.staticIds ? prefixSvgIdsInString(svgOriginalContent) : svgOriginalContent}`\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    :aria-hidden=\"decorative ? 'true' : undefined\"\n    class=\"kui-icon flag-tm-icon\"\n    data-testid=\"kui-icon-wrapper-flag-tm-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-tm-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      v-html=\"svgProcessedContent\"\n    />\n  </component>\n</template>\n\n<style>\n/**\n * !Important: Do not add styles into this component file.\n *\n * We are adding styles inline to avoid additional stylesheet imports in the consuming application/component.\n */\n</style>\n"],"names":["svgOriginalContent","props","__props","iconSize","computed","sanitizedSize","sizeNumber","KUI_ICON_SIZE_50","rootElementStyles","prefixSvgIdsInString","svgString","idMap","randomPrefix","match","originalId","newId","escapeHtml","str","htmlEntities","svgProcessedContent"],"mappings":";;2BAyJMA,IAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA5I3B,UAAMC,IAAQC,GAgERC,IAAWC,EAAS,MAAc;AAEtC,UAAI,OAAOH,EAAM,QAAS,YAAYA,EAAM,OAAO;AAC1C,eAAA,GAAGA,EAAM,IAAI;AAGlB,UAAA,OAAOA,EAAM,QAAS,UAAU;AAElC,cAAMI,IAAgB,OAAOJ,EAAM,IAAI,EAAE,QAAQ,QAAQ,EAAE,GACrDK,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,OAAOH,EAAM;AAAA,MACb,SAASA,EAAM;AAAA,MACf,YAAY;AAAA,MACZ,QAAQE,EAAS;AAAA,MACjB,YAAY;AAAA,MACZ,OAAOA,EAAS;AAAA,IAChB,EAAA,GAaIM,IAAuB,CAACC,MAA8B;AAC1D,YAAMC,IAAgC,CAAA,GAChCC,IAAe,KAAK,SAAS,SAAS,EAAE,EAAE,UAAU,GAAG,EAAE;AAaxD,aAVkBF,EAAU,QAAQ,iBAAiB,CAACG,GAAOC,MAAe;AACjF,cAAMC,IAAQ,GAAGH,CAAY,IAAIE,CAAU;AAC3C,eAAAH,EAAMG,CAAU,IAAIC,GACb,OAAOA,CAAK;AAAA,MAAA,CACpB,EAG2C,QAAQ,iBAAiB,CAACF,GAAOC,MAAeH,EAAMG,CAAU,IAAI,IAAIH,EAAMG,CAAU,CAAC,KAAKD,CAAK;AAAA,IAGxI,GAGHG,IAAa,CAACC,MAAgB;AAClC,YAAMC,IAA0C;AAAA,QAC9C,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,MAAA;AAGP,aAAOD,EAAI,QAAQ,YAAY,CAACJ,MAAUK,EAAaL,CAAK,CAAC;AAAA,IAAA,GAkCzDM,IAAsB,GADJlB,EAAM,QAAQ,2CAA2Ce,EAAWf,EAAM,KAAK,CAAC,aAAa,EACvE,GAAIA,EAAM,YAAuDD,IAA3CS,EAAqBT,CAAkB,CAAsB;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"kong-icons.es406.js","sources":["../src/components/flags/FlagTmIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagTmIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Wed, 30 Oct 2024 15:02:40 GMT\n *\n * GitHub: https://github.com/Kong/icons\n * License: Apache-2.0\n */\n\nimport { computed } 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  /**\n   * A boolean to disable prefixing any internal SVG ids with a unique string which is done to resolve the potential for multiple SVG instances on the same page and the SVG utilizing the same ids and references internally (e.g. in the `<defs>` tag).\n   * Typically only set to `true` during snapshot testing.\n   * Defaults to `false`.\n   */\n  staticIds: {\n    type: Boolean,\n    default: false,\n  },\n})\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  ...(props.decorative && { pointerEvents: 'none' }),\n}))\n\n/**\n * Prefix all SVG IDs in the given SVG string with a random prefix to ensure uniqueness.\n *\n * This function performs the following steps:\n * 1. Generates a random prefix.\n * 2. Replaces all `id` attributes in the SVG string with the new prefixed IDs.\n * 3. Updates all ID references (e.g., `url(#id)`, `href=\"#id\"`, etc.) to use the new prefixed IDs.\n *\n * @param {string} svgString - The SVG string in which to prefix IDs.\n * @returns {string} - The SVG string with prefixed IDs.\n */\nconst prefixSvgIdsInString = (svgString: string): string => {\n  const idMap: Record<string, string> = {}\n  const randomPrefix = Math.random().toString(36).substring(2, 12)\n\n  // Replace IDs in the SVG string\n  const updatedSvgString = svgString.replace(/id=\"([^\"]+)\"/g, (match, originalId) => {\n    const newId = `${randomPrefix}-${originalId}`\n    idMap[originalId] = newId\n    return `id=\"${newId}\"`\n  })\n\n  // Replace ID references (e.g., url(#id), href=\"#id\", etc.)\n  const processedSvgString = updatedSvgString.replace(/#([^\\s^\")]+)/g, (match, originalId) => idMap[originalId] ? `#${idMap[originalId]}` : match)\n\n  // Return the processed SVG string\n  return processedSvgString\n}\n\nconst escapeHtml = (str: string) => {\n  const htmlEntities: { [key: string]: string } = {\n    '<': '&lt;',\n    '>': '&gt;',\n    '\"': '&quot;',\n    \"'\": '&#039;',\n    '`': '&#039;',\n  }\n\n  return str.replace(/[<>\"'`]/g, (match) => htmlEntities[match])\n}\n\n// The `svgOriginalContent` template string will be replaced with the SVG innerHTML in the generate script.\n\nconst svgOriginalContent = `<g clip-path=\"url(#clip0_247_6274)\">\n<path d=\"M12 0C11.104 0 10.2313 0.0990469 9.39135 0.285234L8.86963 12L9.39135 23.7147C10.2313 23.9009 11.1041 24 12 24C18.6274 24 24 18.6274 24 12C23.9999 5.37258 18.6274 0 12 0V0Z\" fill=\"#496E2D\"/>\n<path d=\"M3.13041 3.91742C1.18584 6.05004 0 8.88645 0 12C0 15.1135 1.18589 17.9499 3.13045 20.0826L3.65217 12L3.13041 3.91742Z\" fill=\"#496E2D\"/>\n<path d=\"M17.5509 9.0515C18.1413 7.4059 17.478 5.61617 16.0546 4.72479C16.3106 4.75812 16.5669 4.8184 16.8199 4.9091C18.7185 5.59029 19.7054 7.68148 19.0242 9.58001C18.343 11.4787 16.2518 12.4655 14.3532 11.7843C14.1002 11.6936 13.864 11.5771 13.6453 11.4401C15.3107 11.6569 16.9605 10.6971 17.5509 9.0515Z\" fill=\"#F0F0F0\"/>\n<path d=\"M14.2766 4.27374L13.7636 4.93665L12.9747 4.65357L13.4465 5.34629L12.9336 6.0091L13.7382 5.77445L14.2101 6.46707L14.2355 5.62932L15.0401 5.39462L14.2513 5.11163L14.2766 4.27374Z\" fill=\"#F0F0F0\"/>\n<path d=\"M15.6617 6.43372L15.1486 7.09658L14.3597 6.8135L14.8316 7.50622L14.3186 8.16903L15.1232 7.93428L15.5952 8.62704L15.6206 7.78925L16.4252 7.5545L15.6363 7.27147L15.6617 6.43372Z\" fill=\"#F0F0F0\"/>\n<path d=\"M11.8342 5.06042L11.3212 5.72324L10.5323 5.44025L11.0042 6.13293L10.4912 6.79578L11.2958 6.56108L11.7677 7.25375L11.7931 6.416L12.5977 6.1813L11.8089 5.89822L11.8342 5.06042Z\" fill=\"#F0F0F0\"/>\n<path d=\"M11.7779 7.53455L11.2649 8.19741L10.476 7.91437L10.9479 8.60709L10.4348 9.26991L11.2395 9.03525L11.7114 9.72787L11.7368 8.89012L12.5414 8.65542L11.7525 8.37234L11.7779 7.53455Z\" fill=\"#F0F0F0\"/>\n<path d=\"M14.1321 8.37927L13.6191 9.04208L12.8302 8.75905L13.3022 9.45177L12.7891 10.1145L13.5938 9.87988L14.0657 10.5726L14.091 9.73476L14.8957 9.5001L14.1067 9.21707L14.1321 8.37927Z\" fill=\"#F0F0F0\"/>\n<path d=\"M3.13037 3.91737V20.0825C4.76537 21.8757 6.93709 23.1706 9.39123 23.7147V0.285217C6.93704 0.829249 4.76542 2.12417 3.13037 3.91737Z\" fill=\"#D80027\"/>\n<path d=\"M5.51961 6.31804L4.47144 5.53719V4.43296L5.51961 3.65216H7.00203L8.0502 4.43296V5.53719L7.00203 6.31804H5.51961Z\" fill=\"#F0F0F0\"/>\n<path d=\"M6.26084 3.65216H5.51961L4.47144 4.43296V4.97282H6.26084V3.65216Z\" fill=\"#FF9811\"/>\n<path d=\"M6.26074 6.31802H7.00193L8.0501 5.53717V4.97388H6.26074V6.31802Z\" fill=\"#FF9811\"/>\n<path d=\"M5.51961 20.3478L4.47144 19.5669V18.4627L5.51961 17.6819H7.00203L8.0502 18.4627V19.5669L7.00203 20.3478H5.51961Z\" fill=\"#F0F0F0\"/>\n<path d=\"M6.26084 17.6819H5.51961L4.47144 18.4627V19.0026H6.26084V17.6819Z\" fill=\"#FF9811\"/>\n<path d=\"M6.26074 20.3478H7.00193L8.0501 19.5669V19.0037H6.26074V20.3478Z\" fill=\"#FF9811\"/>\n<path d=\"M5.51961 13.3329L4.47144 12.5521V11.4479L5.51961 10.6671H7.00203L8.0502 11.4479V12.5521L7.00203 13.3329H5.51961Z\" fill=\"#496E2D\"/>\n<path d=\"M8.08694 15.0509H7.63038V14.5944H6.82811L6.26083 14.0271L5.6936 14.5944H4.89133V15.0509H4.43481V15.9639H4.89133V16.4204H5.69355L6.26088 16.9878L6.82811 16.4204H7.63038V15.9639H8.08694V15.0509Z\" fill=\"#496E2D\"/>\n<path d=\"M8.08694 8.03599H7.63038V7.57943H6.82811L6.26083 7.01215L5.6936 7.57943H4.89133V8.03599H4.43481V8.94902H4.89133V9.40554H5.69355L6.26088 9.97291L6.82811 9.40554H7.63038V8.94902H8.08694V8.03599Z\" fill=\"#496E2D\"/>\n<path d=\"M5.73901 11.4782H6.7825V12.5217H5.73901V11.4782Z\" fill=\"#D80027\"/>\n<path d=\"M6.26073 9.01402C6.54887 9.01402 6.78245 8.78044 6.78245 8.4923C6.78245 8.20416 6.54887 7.97058 6.26073 7.97058C5.97259 7.97058 5.73901 8.20416 5.73901 8.4923C5.73901 8.78044 5.97259 9.01402 6.26073 9.01402Z\" fill=\"#D80027\"/>\n<path d=\"M6.26073 16.0293C6.54887 16.0293 6.78245 15.7957 6.78245 15.5076C6.78245 15.2194 6.54887 14.9858 6.26073 14.9858C5.97259 14.9858 5.73901 15.2194 5.73901 15.5076C5.73901 15.7957 5.97259 16.0293 6.26073 16.0293Z\" fill=\"#D80027\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_247_6274\">\n<rect width=\"24\" height=\"24\" fill=\"white\"/>\n</clipPath>\n</defs>`\nconst svgTitleContent = props.title ? `<title data-testid=\"kui-icon-svg-title\">${escapeHtml(props.title)}</title>` : ''\nconst svgProcessedContent = `${svgTitleContent}${!props.staticIds ? prefixSvgIdsInString(svgOriginalContent) : svgOriginalContent}`\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    :aria-hidden=\"decorative ? 'true' : undefined\"\n    class=\"kui-icon flag-tm-icon\"\n    data-testid=\"kui-icon-wrapper-flag-tm-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-tm-icon\"\n      fill=\"none\"\n      height=\"100%\"\n      role=\"img\"\n      :tabindex=\"decorative ? '-1' : undefined\"\n      viewBox=\"0 0 24 24\"\n      width=\"100%\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      v-html=\"svgProcessedContent\"\n    />\n  </component>\n</template>\n\n<style>\n/**\n * !Important: Do not add styles into this component file.\n *\n * We are adding styles inline to avoid additional stylesheet imports in the consuming application/component.\n */\n</style>\n"],"names":["svgOriginalContent","props","__props","iconSize","computed","sanitizedSize","sizeNumber","KUI_ICON_SIZE_50","rootElementStyles","prefixSvgIdsInString","svgString","idMap","randomPrefix","match","originalId","newId","escapeHtml","str","htmlEntities","svgProcessedContent"],"mappings":";;uCA0JMA,IAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA7I3B,UAAMC,IAAQC,GAgERC,IAAWC,EAAS,MAAc;AAEtC,UAAI,OAAOH,EAAM,QAAS,YAAYA,EAAM,OAAO;AAC1C,eAAA,GAAGA,EAAM,IAAI;AAGlB,UAAA,OAAOA,EAAM,QAAS,UAAU;AAElC,cAAMI,IAAgB,OAAOJ,EAAM,IAAI,EAAE,QAAQ,QAAQ,EAAE,GACrDK,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,OAAOH,EAAM;AAAA,MACb,SAASA,EAAM;AAAA,MACf,YAAY;AAAA,MACZ,QAAQE,EAAS;AAAA,MACjB,YAAY;AAAA,MACZ,OAAOA,EAAS;AAAA,MAChB,GAAIF,EAAM,cAAc,EAAE,eAAe,OAAO;AAAA,IAChD,EAAA,GAaIQ,IAAuB,CAACC,MAA8B;AAC1D,YAAMC,IAAgC,CAAA,GAChCC,IAAe,KAAK,SAAS,SAAS,EAAE,EAAE,UAAU,GAAG,EAAE;AAaxD,aAVkBF,EAAU,QAAQ,iBAAiB,CAACG,GAAOC,MAAe;AACjF,cAAMC,IAAQ,GAAGH,CAAY,IAAIE,CAAU;AAC3C,eAAAH,EAAMG,CAAU,IAAIC,GACb,OAAOA,CAAK;AAAA,MAAA,CACpB,EAG2C,QAAQ,iBAAiB,CAACF,GAAOC,MAAeH,EAAMG,CAAU,IAAI,IAAIH,EAAMG,CAAU,CAAC,KAAKD,CAAK;AAAA,IAGxI,GAGHG,IAAa,CAACC,MAAgB;AAClC,YAAMC,IAA0C;AAAA,QAC9C,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,MAAA;AAGP,aAAOD,EAAI,QAAQ,YAAY,CAACJ,MAAUK,EAAaL,CAAK,CAAC;AAAA,IAAA,GAkCzDM,IAAsB,GADJlB,EAAM,QAAQ,2CAA2Ce,EAAWf,EAAM,KAAK,CAAC,aAAa,EACvE,GAAIA,EAAM,YAAuDD,IAA3CS,EAAqBT,CAAkB,CAAsB;;;;;;;;;;;;;;;;;;;;;;;;;"}