@kong/icons 1.18.2-pr.429.21d05d1.0 → 1.18.2-pr.429.8eca45a.0

package/dist/kong-icons.es352.js

@@ -1,6 +1,6 @@
-import { defineComponent as v, computed as d, openBlock as c, createBlock as S, resolveDynamicComponent as L, normalizeStyle as y, withCtx as C, createElementBlock as w } from "vue";
+import { defineComponent as m, computed as d, openBlock as c, createBlock as S, resolveDynamicComponent as L, normalizeStyle as y, withCtx as b, createElementBlock as x } from "vue";
 import { KUI_ICON_SIZE_50 as u } from "./kong-icons.es1223.js";
-const b = ["aria-hidden"], p = `<g clip-path="url(#clip0_246_5122)">
+const C = ["aria-hidden", "tabindex"], g = `<g clip-path="url(#clip0_246_5122)">
 <path d="M0 12C0 14.0789 0.528891 16.0342 1.45908 17.7391L12 18.7826L22.5409 17.7391C23.4711 16.0342 24 14.0789 24 12L12 10.9565L0 12Z" fill="#FFDA44"/>
 <path d="M22.5409 6.26086C20.5057 2.53073 16.5485 0 12 0C7.45148 0 3.49434 2.53073 1.45908 6.26086C0.528891 7.96575 0 9.92109 0 12H24C24 9.92109 23.4711 7.96575 22.5409 6.26086Z" fill="#338AF3"/>
 <path d="M11.9999 24C16.5484 24 20.5056 21.4693 22.5408 17.7391H1.45898C3.49425 21.4693 7.45139 24 11.9999 24Z" fill="#496E2D"/>
@@ -10,7 +10,7 @@ const b = ["aria-hidden"], p = `<g clip-path="url(#clip0_246_5122)">
 <clipPath id="clip0_246_5122">
 <rect width="24" height="24" fill="white"/>
 </clipPath>
-</defs>`, I = /* @__PURE__ */ v({
+</defs>`, $ = /* @__PURE__ */ m({
   __name: "FlagRwIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -80,7 +80,7 @@ const b = ["aria-hidden"], p = `<g clip-path="url(#clip0_246_5122)">
           return `${t}px`;
       }
       return u;
-    }), g = d(() => ({
+    }), p = d(() => ({
       boxSizing: "border-box",
       color: e.color,
       display: e.display,
@@ -88,13 +88,13 @@ const b = ["aria-hidden"], p = `<g clip-path="url(#clip0_246_5122)">
       height: r.value,
       lineHeight: "0",
       width: r.value,
-      pointerEvents: e.decorative ? "none" : "all"
+      ...e.decorative && { pointerEvents: "none" }
     })), f = (n) => {
-      const t = {}, s = Math.random().toString(36).substring(2, 12);
-      return n.replace(/id="([^"]+)"/g, (a, o) => {
-        const l = `${s}-${o}`;
-        return t[o] = l, `id="${l}"`;
-      }).replace(/#([^\s^")]+)/g, (a, o) => t[o] ? `#${t[o]}` : a);
+      const t = {}, o = Math.random().toString(36).substring(2, 12);
+      return n.replace(/id="([^"]+)"/g, (s, a) => {
+        const l = `${o}-${a}`;
+        return t[a] = l, `id="${l}"`;
+      }).replace(/#([^\s^")]+)/g, (s, a) => t[a] ? `#${t[a]}` : s);
     }, h = (n) => {
       const t = {
         "<": "&lt;",
@@ -103,32 +103,34 @@ const b = ["aria-hidden"], p = `<g clip-path="url(#clip0_246_5122)">
         "'": "&#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.replace(/[<>"'`]/g, (o) => t[o]);
+    }, v = `${e.title ? `<title data-testid="kui-icon-svg-title">${h(e.title)}</title>` : ""}${e.staticIds ? g : f(g)}`;
     return (n, t) => (c(), S(L(i.as), {
       "aria-hidden": i.decorative ? "true" : void 0,
       class: "kui-icon flag-rw-icon",
       "data-testid": "kui-icon-wrapper-flag-rw-icon",
-      style: y(g.value)
+      style: y(p.value),
+      tabindex: i.decorative ? "-1" : void 0
     }, {
-      default: C(() => [
-        (c(), w("svg", {
+      default: b(() => [
+        (c(), x("svg", {
           "aria-hidden": i.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-flag-rw-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: m
-        }, null, 8, b))
+          innerHTML: v
+        }, null, 8, C))
       ]),
       _: 1
-    }, 8, ["aria-hidden", "style"]));
+    }, 8, ["aria-hidden", "style", "tabindex"]));
   }
 });
 export {
-  I as default
+  $ as default
 };
 //# sourceMappingURL=kong-icons.es352.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"kong-icons.es352.js","sources":["../src/components/flags/FlagRwIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagRwIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Wed, 30 Oct 2024 13:57:09 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  pointerEvents: props.decorative ? 'none' : 'all',\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_246_5122)\">\n<path d=\"M0 12C0 14.0789 0.528891 16.0342 1.45908 17.7391L12 18.7826L22.5409 17.7391C23.4711 16.0342 24 14.0789 24 12L12 10.9565L0 12Z\" fill=\"#FFDA44\"/>\n<path d=\"M22.5409 6.26086C20.5057 2.53073 16.5485 0 12 0C7.45148 0 3.49434 2.53073 1.45908 6.26086C0.528891 7.96575 0 9.92109 0 12H24C24 9.92109 23.4711 7.96575 22.5409 6.26086Z\" fill=\"#338AF3\"/>\n<path d=\"M11.9999 24C16.5484 24 20.5056 21.4693 22.5408 17.7391H1.45898C3.49425 21.4693 7.45139 24 11.9999 24Z\" fill=\"#496E2D\"/>\n<path d=\"M13.5654 7.02287L15.031 7.71226L14.2506 9.13163L15.842 8.82723L16.0437 10.4348L17.1521 9.25243L18.2606 10.4348L18.4622 8.82723L20.0536 9.13154L19.2732 7.71221L20.7387 7.02287L19.2732 6.33357L20.0536 4.91419L18.4622 5.2186L18.2605 3.61102L17.1521 4.7934L16.0436 3.61102L15.842 5.2186L14.2506 4.91419L15.031 6.33362L13.5654 7.02287Z\" fill=\"#FFDA44\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_246_5122\">\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-rw-icon\"\n    data-testid=\"kui-icon-wrapper-flag-rw-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-rw-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":";;2BA0JMA,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,eAAeF,EAAM,aAAa,SAAS;AAAA,IAC3C,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;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"kong-icons.es352.js","sources":["../src/components/flags/FlagRwIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagRwIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Wed, 30 Oct 2024 15:04:56 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_246_5122)\">\n<path d=\"M0 12C0 14.0789 0.528891 16.0342 1.45908 17.7391L12 18.7826L22.5409 17.7391C23.4711 16.0342 24 14.0789 24 12L12 10.9565L0 12Z\" fill=\"#FFDA44\"/>\n<path d=\"M22.5409 6.26086C20.5057 2.53073 16.5485 0 12 0C7.45148 0 3.49434 2.53073 1.45908 6.26086C0.528891 7.96575 0 9.92109 0 12H24C24 9.92109 23.4711 7.96575 22.5409 6.26086Z\" fill=\"#338AF3\"/>\n<path d=\"M11.9999 24C16.5484 24 20.5056 21.4693 22.5408 17.7391H1.45898C3.49425 21.4693 7.45139 24 11.9999 24Z\" fill=\"#496E2D\"/>\n<path d=\"M13.5654 7.02287L15.031 7.71226L14.2506 9.13163L15.842 8.82723L16.0437 10.4348L17.1521 9.25243L18.2606 10.4348L18.4622 8.82723L20.0536 9.13154L19.2732 7.71221L20.7387 7.02287L19.2732 6.33357L20.0536 4.91419L18.4622 5.2186L18.2605 3.61102L17.1521 4.7934L16.0436 3.61102L15.842 5.2186L14.2506 4.91419L15.031 6.33362L13.5654 7.02287Z\" fill=\"#FFDA44\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_246_5122\">\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-rw-icon\"\n    data-testid=\"kui-icon-wrapper-flag-rw-icon\"\n    :style=\"rootElementStyles\"\n    :tabindex=\"decorative ? '-1' : undefined\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-rw-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.es354.js

@@ -1,6 +1,6 @@
-import { defineComponent as m, computed as d, openBlock as c, createBlock as S, resolveDynamicComponent as v, normalizeStyle as y, withCtx as F, createElementBlock as H } from "vue";
-import { KUI_ICON_SIZE_50 as p } from "./kong-icons.es1223.js";
-const V = ["aria-hidden"], u = `<g clip-path="url(#clip0_246_5184)">
+import { defineComponent as C, computed as d, openBlock as c, createBlock as m, resolveDynamicComponent as S, normalizeStyle as y, withCtx as F, 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_246_5184)">
 <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="#6DA544"/>
 <path d="M6.78271 14.3478C6.78271 15.2123 7.4835 15.913 8.34792 15.913H13.0436C13.0436 16.6334 13.6275 17.2174 14.3479 17.2174H15.9131C16.6335 17.2174 17.2175 16.6334 17.2175 15.913V14.3478H6.78271Z" fill="#F0F0F0"/>
 <path d="M17.3477 6.78265V10.4348C17.3477 11.0102 16.8796 11.4783 16.3042 11.4783V13.0435C17.7427 13.0435 18.9129 11.8732 18.9129 10.4348V6.78265H17.3477Z" fill="#F0F0F0"/>
@@ -13,7 +13,7 @@ const V = ["aria-hidden"], u = `<g clip-path="url(#clip0_246_5184)">
 <clipPath id="clip0_246_5184">
 <rect width="24" height="24" fill="white"/>
 </clipPath>
-</defs>`, M = /* @__PURE__ */ m({
+</defs>`, M = /* @__PURE__ */ C({
   __name: "FlagSaIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -44,14 +44,14 @@ const V = ["aria-hidden"], u = `<g clip-path="url(#clip0_246_5184)">
     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)
           return !0;
         if (typeof i == "string") {
-          const e = String(i).replace(/px/gi, ""), r = Number(e);
-          if (r && !isNaN(r) && Number.isInteger(r) && r > 0)
+          const e = String(i).replace(/px/gi, ""), n = Number(e);
+          if (n && !isNaN(n) && Number.isInteger(n) && n > 0)
             return !0;
         }
         return !1;
@@ -74,31 +74,31 @@ const V = ["aria-hidden"], u = `<g clip-path="url(#clip0_246_5184)">
     }
   },
   setup(i) {
-    const e = i, r = d(() => {
+    const e = i, n = 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);
+        const r = String(e.size).replace(/px/gi, ""), t = Number(r);
         if (t && !isNaN(t) && Number.isInteger(t) && t > 0)
           return `${t}px`;
       }
-      return p;
+      return u;
     }), f = d(() => ({
       boxSizing: "border-box",
       color: e.color,
       display: e.display,
       flexShrink: "0",
-      height: r.value,
+      height: n.value,
       lineHeight: "0",
-      width: r.value,
-      pointerEvents: e.decorative ? "none" : "all"
-    })), g = (n) => {
-      const t = {}, l = Math.random().toString(36).substring(2, 12);
-      return n.replace(/id="([^"]+)"/g, (s, a) => {
-        const o = `${l}-${a}`;
-        return t[a] = o, `id="${o}"`;
-      }).replace(/#([^\s^")]+)/g, (s, a) => t[a] ? `#${t[a]}` : s);
-    }, h = (n) => {
+      width: n.value,
+      ...e.decorative && { pointerEvents: "none" }
+    })), g = (r) => {
+      const t = {}, o = Math.random().toString(36).substring(2, 12);
+      return r.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);
+    }, h = (r) => {
       const t = {
         "<": "&lt;",
         ">": "&gt;",
@@ -106,29 +106,31 @@ const V = ["aria-hidden"], u = `<g clip-path="url(#clip0_246_5184)">
         "'": "&#039;",
         "`": "&#039;"
       };
-      return n.replace(/[<>"'`]/g, (l) => t[l]);
-    }, C = `${e.title ? `<title data-testid="kui-icon-svg-title">${h(e.title)}</title>` : ""}${e.staticIds ? u : g(u)}`;
-    return (n, t) => (c(), S(v(i.as), {
+      return r.replace(/[<>"'`]/g, (o) => t[o]);
+    }, v = `${e.title ? `<title data-testid="kui-icon-svg-title">${h(e.title)}</title>` : ""}${e.staticIds ? p : g(p)}`;
+    return (r, t) => (c(), m(S(i.as), {
       "aria-hidden": i.decorative ? "true" : void 0,
       class: "kui-icon flag-sa-icon",
       "data-testid": "kui-icon-wrapper-flag-sa-icon",
-      style: y(f.value)
+      style: y(f.value),
+      tabindex: i.decorative ? "-1" : void 0
     }, {
       default: F(() => [
-        (c(), H("svg", {
+        (c(), b("svg", {
           "aria-hidden": i.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-flag-sa-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: C
-        }, null, 8, V))
+          innerHTML: v
+        }, null, 8, x))
       ]),
       _: 1
-    }, 8, ["aria-hidden", "style"]));
+    }, 8, ["aria-hidden", "style", "tabindex"]));
   }
 });
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"kong-icons.es354.js","sources":["../src/components/flags/FlagSaIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagSaIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Wed, 30 Oct 2024 13:57:09 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  pointerEvents: props.decorative ? 'none' : 'all',\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_246_5184)\">\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=\"#6DA544\"/>\n<path d=\"M6.78271 14.3478C6.78271 15.2123 7.4835 15.913 8.34792 15.913H13.0436C13.0436 16.6334 13.6275 17.2174 14.3479 17.2174H15.9131C16.6335 17.2174 17.2175 16.6334 17.2175 15.913V14.3478H6.78271Z\" fill=\"#F0F0F0\"/>\n<path d=\"M17.3477 6.78265V10.4348C17.3477 11.0102 16.8796 11.4783 16.3042 11.4783V13.0435C17.7427 13.0435 18.9129 11.8732 18.9129 10.4348V6.78265H17.3477Z\" fill=\"#F0F0F0\"/>\n<path d=\"M6.1304 10.4348C6.1304 11.0102 5.6623 11.4783 5.08691 11.4783V13.0435C6.52537 13.0435 7.6956 11.8732 7.6956 10.4348V6.78265H6.1304V10.4348Z\" fill=\"#F0F0F0\"/>\n<path d=\"M15 6.78265H16.5652V10.4348H15V6.78265Z\" fill=\"#F0F0F0\"/>\n<path d=\"M12.6519 8.86956C12.6519 9.01342 12.5349 9.13042 12.3911 9.13042C12.2472 9.13042 12.1302 9.01337 12.1302 8.86956V6.78259H10.565V8.86956C10.565 9.01342 10.4479 9.13042 10.3041 9.13042C10.1603 9.13042 10.0433 9.01337 10.0433 8.86956V6.78259H8.47803V8.86956C8.47803 9.87648 9.29721 10.6957 10.3041 10.6957C10.6919 10.6957 11.0516 10.5738 11.3476 10.3668C11.6436 10.5737 12.0033 10.6957 12.3911 10.6957C12.4692 10.6957 12.546 10.6902 12.6215 10.6806C12.5106 11.1376 12.099 11.4782 11.6085 11.4782V13.0435C13.0469 13.0435 14.2172 11.8732 14.2172 10.4348V8.86956V6.78259H12.652V8.86956H12.6519Z\" fill=\"#F0F0F0\"/>\n<path d=\"M8.47803 11.4783H10.8259V13.0435H8.47803V11.4783Z\" fill=\"#F0F0F0\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_246_5184\">\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-sa-icon\"\n    data-testid=\"kui-icon-wrapper-flag-sa-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-sa-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":";;2BA0JMA,IAAqB;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,eAAeF,EAAM,aAAa,SAAS;AAAA,IAC3C,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,GAoBzDM,IAAsB,GADJlB,EAAM,QAAQ,2CAA2Ce,EAAWf,EAAM,KAAK,CAAC,aAAa,EACvE,GAAIA,EAAM,YAAuDD,IAA3CS,EAAqBT,CAAkB,CAAsB;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"kong-icons.es354.js","sources":["../src/components/flags/FlagSaIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagSaIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Wed, 30 Oct 2024 15:04:56 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_246_5184)\">\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=\"#6DA544\"/>\n<path d=\"M6.78271 14.3478C6.78271 15.2123 7.4835 15.913 8.34792 15.913H13.0436C13.0436 16.6334 13.6275 17.2174 14.3479 17.2174H15.9131C16.6335 17.2174 17.2175 16.6334 17.2175 15.913V14.3478H6.78271Z\" fill=\"#F0F0F0\"/>\n<path d=\"M17.3477 6.78265V10.4348C17.3477 11.0102 16.8796 11.4783 16.3042 11.4783V13.0435C17.7427 13.0435 18.9129 11.8732 18.9129 10.4348V6.78265H17.3477Z\" fill=\"#F0F0F0\"/>\n<path d=\"M6.1304 10.4348C6.1304 11.0102 5.6623 11.4783 5.08691 11.4783V13.0435C6.52537 13.0435 7.6956 11.8732 7.6956 10.4348V6.78265H6.1304V10.4348Z\" fill=\"#F0F0F0\"/>\n<path d=\"M15 6.78265H16.5652V10.4348H15V6.78265Z\" fill=\"#F0F0F0\"/>\n<path d=\"M12.6519 8.86956C12.6519 9.01342 12.5349 9.13042 12.3911 9.13042C12.2472 9.13042 12.1302 9.01337 12.1302 8.86956V6.78259H10.565V8.86956C10.565 9.01342 10.4479 9.13042 10.3041 9.13042C10.1603 9.13042 10.0433 9.01337 10.0433 8.86956V6.78259H8.47803V8.86956C8.47803 9.87648 9.29721 10.6957 10.3041 10.6957C10.6919 10.6957 11.0516 10.5738 11.3476 10.3668C11.6436 10.5737 12.0033 10.6957 12.3911 10.6957C12.4692 10.6957 12.546 10.6902 12.6215 10.6806C12.5106 11.1376 12.099 11.4782 11.6085 11.4782V13.0435C13.0469 13.0435 14.2172 11.8732 14.2172 10.4348V8.86956V6.78259H12.652V8.86956H12.6519Z\" fill=\"#F0F0F0\"/>\n<path d=\"M8.47803 11.4783H10.8259V13.0435H8.47803V11.4783Z\" fill=\"#F0F0F0\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_246_5184\">\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-sa-icon\"\n    data-testid=\"kui-icon-wrapper-flag-sa-icon\"\n    :style=\"rootElementStyles\"\n    :tabindex=\"decorative ? '-1' : undefined\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-sa-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,GAoBzDM,IAAsB,GADJlB,EAAM,QAAQ,2CAA2Ce,EAAWf,EAAM,KAAK,CAAC,aAAa,EACvE,GAAIA,EAAM,YAAuDD,IAA3CS,EAAqBT,CAAkB,CAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/kong-icons.es356.js

@@ -1,6 +1,6 @@
-import { defineComponent as m, computed as d, openBlock as c, createBlock as S, resolveDynamicComponent as v, normalizeStyle as y, withCtx as b, createElementBlock as F } from "vue";
-import { KUI_ICON_SIZE_50 as p } from "./kong-icons.es1223.js";
-const C = ["aria-hidden"], u = `<g clip-path="url(#clip0_246_5274)">
+import { defineComponent as v, computed as d, openBlock as c, createBlock as m, resolveDynamicComponent as S, normalizeStyle as b, withCtx as y, createElementBlock as x } from "vue";
+import { KUI_ICON_SIZE_50 as u } from "./kong-icons.es1223.js";
+const F = ["aria-hidden", "tabindex"], p = `<g clip-path="url(#clip0_246_5274)">
 <path d="M20.4854 20.4856C24.9859 15.9851 25.1636 8.79988 21.0203 4.08618L11.9997 11.9999L4.08594 21.0206C8.79963 25.1638 15.9848 24.9861 20.4854 20.4856Z" fill="#496E2D"/>
 <path d="M3.51438 3.5144C8.01488 -0.986107 15.2001 -1.16381 19.9138 2.97942L12 12.0001L2.97944 19.9138C-1.16383 15.2001 -0.986083 8.01491 3.51438 3.5144Z" fill="#0052B4"/>
 <path d="M19.9139 2.97937L2.97949 19.9138C3.15068 20.1085 3.32843 20.2996 3.51448 20.4856C3.70048 20.6716 3.89158 20.8493 4.0864 21.0206L21.0207 4.08618C20.8495 3.89137 20.6717 3.70031 20.4856 3.51426C20.2997 3.32835 20.1086 3.15056 19.9139 2.97937Z" fill="#FFDA44"/>
@@ -14,7 +14,7 @@ const C = ["aria-hidden"], u = `<g clip-path="url(#clip0_246_5274)">
 <clipPath id="clip0_246_5274">
 <rect width="24" height="24" fill="white"/>
 </clipPath>
-</defs>`, M = /* @__PURE__ */ m({
+</defs>`, M = /* @__PURE__ */ v({
   __name: "FlagSbIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -45,14 +45,14 @@ const C = ["aria-hidden"], u = `<g clip-path="url(#clip0_246_5274)">
     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)
           return !0;
         if (typeof i == "string") {
-          const e = String(i).replace(/px/gi, ""), r = Number(e);
-          if (r && !isNaN(r) && Number.isInteger(r) && r > 0)
+          const e = String(i).replace(/px/gi, ""), n = Number(e);
+          if (n && !isNaN(n) && Number.isInteger(n) && n > 0)
             return !0;
         }
         return !1;
@@ -75,31 +75,31 @@ const C = ["aria-hidden"], u = `<g clip-path="url(#clip0_246_5274)">
     }
   },
   setup(i) {
-    const e = i, r = d(() => {
+    const e = i, n = 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);
+        const r = String(e.size).replace(/px/gi, ""), t = Number(r);
         if (t && !isNaN(t) && Number.isInteger(t) && t > 0)
           return `${t}px`;
       }
-      return p;
+      return u;
     }), f = d(() => ({
       boxSizing: "border-box",
       color: e.color,
       display: e.display,
       flexShrink: "0",
-      height: r.value,
+      height: n.value,
       lineHeight: "0",
-      width: r.value,
-      pointerEvents: e.decorative ? "none" : "all"
-    })), g = (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);
-    }, L = (n) => {
+      width: n.value,
+      ...e.decorative && { pointerEvents: "none" }
+    })), g = (r) => {
+      const t = {}, l = Math.random().toString(36).substring(2, 12);
+      return r.replace(/id="([^"]+)"/g, (o, a) => {
+        const s = `${l}-${a}`;
+        return t[a] = s, `id="${s}"`;
+      }).replace(/#([^\s^")]+)/g, (o, a) => t[a] ? `#${t[a]}` : o);
+    }, L = (r) => {
       const t = {
         "<": "&lt;",
         ">": "&gt;",
@@ -107,29 +107,31 @@ const C = ["aria-hidden"], u = `<g clip-path="url(#clip0_246_5274)">
         "'": "&#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 : g(u)}`;
-    return (n, t) => (c(), S(v(i.as), {
+      return r.replace(/[<>"'`]/g, (l) => t[l]);
+    }, h = `${e.title ? `<title data-testid="kui-icon-svg-title">${L(e.title)}</title>` : ""}${e.staticIds ? p : g(p)}`;
+    return (r, t) => (c(), m(S(i.as), {
       "aria-hidden": i.decorative ? "true" : void 0,
       class: "kui-icon flag-sb-icon",
       "data-testid": "kui-icon-wrapper-flag-sb-icon",
-      style: y(f.value)
+      style: b(f.value),
+      tabindex: i.decorative ? "-1" : void 0
     }, {
-      default: b(() => [
-        (c(), F("svg", {
+      default: y(() => [
+        (c(), x("svg", {
           "aria-hidden": i.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-flag-sb-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, C))
+        }, null, 8, F))
       ]),
       _: 1
-    }, 8, ["aria-hidden", "style"]));
+    }, 8, ["aria-hidden", "style", "tabindex"]));
   }
 });
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"kong-icons.es356.js","sources":["../src/components/flags/FlagSbIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagSbIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Wed, 30 Oct 2024 13:57:09 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  pointerEvents: props.decorative ? 'none' : 'all',\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_246_5274)\">\n<path d=\"M20.4854 20.4856C24.9859 15.9851 25.1636 8.79988 21.0203 4.08618L11.9997 11.9999L4.08594 21.0206C8.79963 25.1638 15.9848 24.9861 20.4854 20.4856Z\" fill=\"#496E2D\"/>\n<path d=\"M3.51438 3.5144C8.01488 -0.986107 15.2001 -1.16381 19.9138 2.97942L12 12.0001L2.97944 19.9138C-1.16383 15.2001 -0.986083 8.01491 3.51438 3.5144Z\" fill=\"#0052B4\"/>\n<path d=\"M19.9139 2.97937L2.97949 19.9138C3.15068 20.1085 3.32843 20.2996 3.51448 20.4856C3.70048 20.6716 3.89158 20.8493 4.0864 21.0206L21.0207 4.08618C20.8495 3.89137 20.6717 3.70031 20.4856 3.51426C20.2997 3.32835 20.1086 3.15056 19.9139 2.97937Z\" fill=\"#FFDA44\"/>\n<path d=\"M5.05619 4.17358L5.31526 4.97079H6.15343L5.47534 5.46339L5.73432 6.2606L5.05619 5.76789L4.37805 6.2606L4.63712 5.46339L3.95898 4.97079H4.7972L5.05619 4.17358Z\" fill=\"#F0F0F0\"/>\n<path d=\"M9.33792 4.17358L9.597 4.97079H10.4351L9.75703 5.46339L10.0161 6.2606L9.33792 5.76789L8.65978 6.2606L8.91886 5.46339L8.24072 4.97079H9.07889L9.33792 4.17358Z\" fill=\"#F0F0F0\"/>\n<path d=\"M5.05619 8.34766L5.31526 9.14486H6.15343L5.47534 9.63751L5.73432 10.4347L5.05619 9.94201L4.37805 10.4347L4.63712 9.63751L3.95898 9.14486H4.7972L5.05619 8.34766Z\" fill=\"#F0F0F0\"/>\n<path d=\"M9.33792 8.34766L9.597 9.14486H10.4351L9.75703 9.63751L10.0161 10.4347L9.33792 9.94201L8.65978 10.4347L8.91886 9.63751L8.24072 9.14486H9.07889L9.33792 8.34766Z\" fill=\"#F0F0F0\"/>\n<path d=\"M7.19686 6.26062L7.45593 7.05782H8.29406L7.61597 7.55048L7.875 8.34768L7.19686 7.85498L6.51872 8.34768L6.77775 7.55048L6.09961 7.05782H6.93783L7.19686 6.26062Z\" fill=\"#F0F0F0\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_246_5274\">\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-sb-icon\"\n    data-testid=\"kui-icon-wrapper-flag-sb-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-sb-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":";;2BA0JMA,IAAqB;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,eAAeF,EAAM,aAAa,SAAS;AAAA,IAC3C,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,GAqBzDM,IAAsB,GADJlB,EAAM,QAAQ,2CAA2Ce,EAAWf,EAAM,KAAK,CAAC,aAAa,EACvE,GAAIA,EAAM,YAAuDD,IAA3CS,EAAqBT,CAAkB,CAAsB;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"kong-icons.es356.js","sources":["../src/components/flags/FlagSbIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagSbIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Wed, 30 Oct 2024 15:04:56 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_246_5274)\">\n<path d=\"M20.4854 20.4856C24.9859 15.9851 25.1636 8.79988 21.0203 4.08618L11.9997 11.9999L4.08594 21.0206C8.79963 25.1638 15.9848 24.9861 20.4854 20.4856Z\" fill=\"#496E2D\"/>\n<path d=\"M3.51438 3.5144C8.01488 -0.986107 15.2001 -1.16381 19.9138 2.97942L12 12.0001L2.97944 19.9138C-1.16383 15.2001 -0.986083 8.01491 3.51438 3.5144Z\" fill=\"#0052B4\"/>\n<path d=\"M19.9139 2.97937L2.97949 19.9138C3.15068 20.1085 3.32843 20.2996 3.51448 20.4856C3.70048 20.6716 3.89158 20.8493 4.0864 21.0206L21.0207 4.08618C20.8495 3.89137 20.6717 3.70031 20.4856 3.51426C20.2997 3.32835 20.1086 3.15056 19.9139 2.97937Z\" fill=\"#FFDA44\"/>\n<path d=\"M5.05619 4.17358L5.31526 4.97079H6.15343L5.47534 5.46339L5.73432 6.2606L5.05619 5.76789L4.37805 6.2606L4.63712 5.46339L3.95898 4.97079H4.7972L5.05619 4.17358Z\" fill=\"#F0F0F0\"/>\n<path d=\"M9.33792 4.17358L9.597 4.97079H10.4351L9.75703 5.46339L10.0161 6.2606L9.33792 5.76789L8.65978 6.2606L8.91886 5.46339L8.24072 4.97079H9.07889L9.33792 4.17358Z\" fill=\"#F0F0F0\"/>\n<path d=\"M5.05619 8.34766L5.31526 9.14486H6.15343L5.47534 9.63751L5.73432 10.4347L5.05619 9.94201L4.37805 10.4347L4.63712 9.63751L3.95898 9.14486H4.7972L5.05619 8.34766Z\" fill=\"#F0F0F0\"/>\n<path d=\"M9.33792 8.34766L9.597 9.14486H10.4351L9.75703 9.63751L10.0161 10.4347L9.33792 9.94201L8.65978 10.4347L8.91886 9.63751L8.24072 9.14486H9.07889L9.33792 8.34766Z\" fill=\"#F0F0F0\"/>\n<path d=\"M7.19686 6.26062L7.45593 7.05782H8.29406L7.61597 7.55048L7.875 8.34768L7.19686 7.85498L6.51872 8.34768L6.77775 7.55048L6.09961 7.05782H6.93783L7.19686 6.26062Z\" fill=\"#F0F0F0\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_246_5274\">\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-sb-icon\"\n    data-testid=\"kui-icon-wrapper-flag-sb-icon\"\n    :style=\"rootElementStyles\"\n    :tabindex=\"decorative ? '-1' : undefined\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-sb-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,GAqBzDM,IAAsB,GADJlB,EAAM,QAAQ,2CAA2Ce,EAAWf,EAAM,KAAK,CAAC,aAAa,EACvE,GAAIA,EAAM,YAAuDD,IAA3CS,EAAqBT,CAAkB,CAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/kong-icons.es358.js

@@ -1,6 +1,6 @@
-import { defineComponent as S, computed as c, openBlock as d, createBlock as v, resolveDynamicComponent as C, normalizeStyle as y, withCtx as b, createElementBlock as x } from "vue";
-import { KUI_ICON_SIZE_50 as p } from "./kong-icons.es1223.js";
-const w = ["aria-hidden"], u = `<g clip-path="url(#clip0_246_5216)">
+import { defineComponent as m, computed as d, openBlock as c, createBlock as S, resolveDynamicComponent as C, normalizeStyle as y, withCtx as b, createElementBlock as x } from "vue";
+import { KUI_ICON_SIZE_50 as u } from "./kong-icons.es1223.js";
+const w = ["aria-hidden", "tabindex"], g = `<g clip-path="url(#clip0_246_5216)">
 <path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#F0F0F0"/>
 <path d="M20.1006 3.14705C17.9659 1.19273 15.1224 0 12.0001 0C11.489 0 10.9854 0.0322031 10.491 0.0942187L4.69581 6.78263L0.379883 15.0061C0.658695 16.0871 1.08498 17.1087 1.63496 18.0491L12.0001 12L20.1006 3.14705Z" fill="#FFDA44"/>
 <path d="M21.9903 18.6487L5.20117 21.8887C7.13378 23.22 9.47556 24 11.9998 24C16.168 24 19.8392 21.8746 21.9903 18.6487Z" fill="#6DA544"/>
@@ -11,7 +11,7 @@ const w = ["aria-hidden"], u = `<g clip-path="url(#clip0_246_5216)">
 <clipPath id="clip0_246_5216">
 <rect width="24" height="24" fill="white"/>
 </clipPath>
-</defs>`, L = /* @__PURE__ */ S({
+</defs>`, $ = /* @__PURE__ */ m({
   __name: "FlagScIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -42,14 +42,14 @@ const w = ["aria-hidden"], u = `<g clip-path="url(#clip0_246_5216)">
     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)
           return !0;
         if (typeof i == "string") {
-          const e = String(i).replace(/px/gi, ""), r = Number(e);
-          if (r && !isNaN(r) && Number.isInteger(r) && r > 0)
+          const e = String(i).replace(/px/gi, ""), n = Number(e);
+          if (n && !isNaN(n) && Number.isInteger(n) && n > 0)
             return !0;
         }
         return !1;
@@ -72,31 +72,31 @@ const w = ["aria-hidden"], u = `<g clip-path="url(#clip0_246_5216)">
     }
   },
   setup(i) {
-    const e = i, r = c(() => {
+    const e = i, n = 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);
+        const r = String(e.size).replace(/px/gi, ""), t = Number(r);
         if (t && !isNaN(t) && Number.isInteger(t) && t > 0)
           return `${t}px`;
       }
-      return p;
-    }), g = c(() => ({
+      return u;
+    }), p = d(() => ({
       boxSizing: "border-box",
       color: e.color,
       display: e.display,
       flexShrink: "0",
-      height: r.value,
+      height: n.value,
       lineHeight: "0",
-      width: r.value,
-      pointerEvents: e.decorative ? "none" : "all"
-    })), f = (n) => {
+      width: n.value,
+      ...e.decorative && { pointerEvents: "none" }
+    })), f = (r) => {
       const t = {}, o = Math.random().toString(36).substring(2, 12);
-      return n.replace(/id="([^"]+)"/g, (l, s) => {
-        const a = `${o}-${s}`;
-        return t[s] = a, `id="${a}"`;
-      }).replace(/#([^\s^")]+)/g, (l, s) => t[s] ? `#${t[s]}` : l);
-    }, h = (n) => {
+      return r.replace(/id="([^"]+)"/g, (s, a) => {
+        const l = `${o}-${a}`;
+        return t[a] = l, `id="${l}"`;
+      }).replace(/#([^\s^")]+)/g, (s, a) => t[a] ? `#${t[a]}` : s);
+    }, h = (r) => {
       const t = {
         "<": "&lt;",
         ">": "&gt;",
@@ -104,32 +104,34 @@ const w = ["aria-hidden"], u = `<g clip-path="url(#clip0_246_5216)">
         "'": "&#039;",
         "`": "&#039;"
       };
-      return n.replace(/[<>"'`]/g, (o) => t[o]);
-    }, m = `${e.title ? `<title data-testid="kui-icon-svg-title">${h(e.title)}</title>` : ""}${e.staticIds ? u : f(u)}`;
-    return (n, t) => (d(), v(C(i.as), {
+      return r.replace(/[<>"'`]/g, (o) => t[o]);
+    }, v = `${e.title ? `<title data-testid="kui-icon-svg-title">${h(e.title)}</title>` : ""}${e.staticIds ? g : f(g)}`;
+    return (r, t) => (c(), S(C(i.as), {
       "aria-hidden": i.decorative ? "true" : void 0,
       class: "kui-icon flag-sc-icon",
       "data-testid": "kui-icon-wrapper-flag-sc-icon",
-      style: y(g.value)
+      style: y(p.value),
+      tabindex: i.decorative ? "-1" : void 0
     }, {
       default: b(() => [
-        (d(), x("svg", {
+        (c(), x("svg", {
           "aria-hidden": i.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-flag-sc-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: m
+          innerHTML: v
         }, null, 8, w))
       ]),
       _: 1
-    }, 8, ["aria-hidden", "style"]));
+    }, 8, ["aria-hidden", "style", "tabindex"]));
   }
 });
 export {
-  L as default
+  $ as default
 };
 //# sourceMappingURL=kong-icons.es358.js.map