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

package/dist/kong-icons.es262.js

@@ -1,6 +1,6 @@
-import { defineComponent as L, computed as d, openBlock as c, createBlock as S, resolveDynamicComponent as v, normalizeStyle as y, withCtx as C, createElementBlock as b } from "vue";
+import { defineComponent as v, computed as d, openBlock as c, createBlock as L, resolveDynamicComponent as S, normalizeStyle as y, withCtx as C, createElementBlock as b } from "vue";
 import { KUI_ICON_SIZE_50 as u } from "./kong-icons.es1223.js";
-const x = ["aria-hidden"], p = `<g clip-path="url(#clip0_246_4744)">
+const x = ["aria-hidden", "tabindex"], g = `<g clip-path="url(#clip0_246_4744)">
 <path d="M12 24C18.6274 24 24 18.6274 24 12C24 9.98611 23.5031 8.08847 22.6265 6.42188L11.9859 12.0141L17.5781 1.37353C15.9115 0.496875 14.0139 0 12 0C5.37262 0 0 5.37262 0 12C0 15.3137 1.34316 18.3137 3.51469 20.4853C5.68627 22.6569 8.68627 24 12 24Z" fill="#0052B4"/>
 <path d="M22.6136 6.43496C22.0643 5.38946 21.3502 4.40785 20.4711 3.52876C19.592 2.64967 18.6105 1.93553 17.5649 1.38629L3.50049 20.4993L22.6136 6.43496Z" fill="#F0F0F0"/>
 <path d="M3.50049 20.4993L22.6136 6.43495C22.0643 5.38945 21.3502 4.40784 20.4711 3.52875L3.50049 20.4993Z" fill="#FF9811"/>
@@ -10,7 +10,7 @@ const x = ["aria-hidden"], p = `<g clip-path="url(#clip0_246_4744)">
 <clipPath id="clip0_246_4744">
 <rect width="24" height="24" fill="white"/>
 </clipPath>
-</defs>`, F = /* @__PURE__ */ L({
+</defs>`, I = /* @__PURE__ */ v({
   __name: "FlagMhIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -80,20 +80,21 @@ const x = ["aria-hidden"], p = `<g clip-path="url(#clip0_246_4744)">
           return `${t}px`;
       }
       return u;
-    }), g = d(() => ({
+    }), 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 = {}, o = Math.random().toString(36).substring(2, 12);
-      return n.replace(/id="([^"]+)"/g, (a, s) => {
-        const l = `${o}-${s}`;
-        return t[s] = l, `id="${l}"`;
-      }).replace(/#([^\s^")]+)/g, (a, s) => t[s] ? `#${t[s]}` : a);
+      const t = {}, a = Math.random().toString(36).substring(2, 12);
+      return n.replace(/id="([^"]+)"/g, (s, o) => {
+        const l = `${a}-${o}`;
+        return t[o] = l, `id="${l}"`;
+      }).replace(/#([^\s^")]+)/g, (s, o) => t[o] ? `#${t[o]}` : s);
     }, h = (n) => {
       const t = {
         "<": "&lt;",
@@ -102,13 +103,13 @@ const x = ["aria-hidden"], p = `<g clip-path="url(#clip0_246_4744)">
         "'": "&#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 ? p : f(p)}`;
-    return (n, t) => (c(), S(v(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(), L(S(i.as), {
       "aria-hidden": i.decorative ? "true" : void 0,
       class: "kui-icon flag-mh-icon",
       "data-testid": "kui-icon-wrapper-flag-mh-icon",
-      style: y(g.value)
+      style: y(p.value)
     }, {
       default: C(() => [
         (c(), b("svg", {
@@ -117,6 +118,7 @@ const x = ["aria-hidden"], p = `<g clip-path="url(#clip0_246_4744)">
           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 x = ["aria-hidden"], p = `<g clip-path="url(#clip0_246_4744)">
   }
 });
 export {
-  F as default
+  I as default
 };
 //# sourceMappingURL=kong-icons.es262.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"kong-icons.es262.js","sources":["../src/components/flags/FlagMhIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagMhIcon.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_246_4744)\">\n<path d=\"M12 24C18.6274 24 24 18.6274 24 12C24 9.98611 23.5031 8.08847 22.6265 6.42188L11.9859 12.0141L17.5781 1.37353C15.9115 0.496875 14.0139 0 12 0C5.37262 0 0 5.37262 0 12C0 15.3137 1.34316 18.3137 3.51469 20.4853C5.68627 22.6569 8.68627 24 12 24Z\" fill=\"#0052B4\"/>\n<path d=\"M22.6136 6.43496C22.0643 5.38946 21.3502 4.40785 20.4711 3.52876C19.592 2.64967 18.6105 1.93553 17.5649 1.38629L3.50049 20.4993L22.6136 6.43496Z\" fill=\"#F0F0F0\"/>\n<path d=\"M3.50049 20.4993L22.6136 6.43495C22.0643 5.38945 21.3502 4.40784 20.4711 3.52875L3.50049 20.4993Z\" fill=\"#FF9811\"/>\n<path d=\"M10.4208 7.03697L8.95534 7.72631L9.73576 9.14569L8.14436 8.84123L7.9427 10.4489L6.8342 9.26644L5.7257 10.4489L5.52414 8.84123L3.93273 9.14559L4.71306 7.72626L3.24756 7.03697L4.71311 6.34758L3.93273 4.9283L5.52404 5.23266L5.72575 3.62503L6.8342 4.80745L7.9427 3.62503L8.14436 5.23266L9.73581 4.9283L8.95539 6.34762L10.4208 7.03697Z\" fill=\"#F0F0F0\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_246_4744\">\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-mh-icon\"\n    data-testid=\"kui-icon-wrapper-flag-mh-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-mh-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.es262.js","sources":["../src/components/flags/FlagMhIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagMhIcon.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_246_4744)\">\n<path d=\"M12 24C18.6274 24 24 18.6274 24 12C24 9.98611 23.5031 8.08847 22.6265 6.42188L11.9859 12.0141L17.5781 1.37353C15.9115 0.496875 14.0139 0 12 0C5.37262 0 0 5.37262 0 12C0 15.3137 1.34316 18.3137 3.51469 20.4853C5.68627 22.6569 8.68627 24 12 24Z\" fill=\"#0052B4\"/>\n<path d=\"M22.6136 6.43496C22.0643 5.38946 21.3502 4.40785 20.4711 3.52876C19.592 2.64967 18.6105 1.93553 17.5649 1.38629L3.50049 20.4993L22.6136 6.43496Z\" fill=\"#F0F0F0\"/>\n<path d=\"M3.50049 20.4993L22.6136 6.43495C22.0643 5.38945 21.3502 4.40784 20.4711 3.52875L3.50049 20.4993Z\" fill=\"#FF9811\"/>\n<path d=\"M10.4208 7.03697L8.95534 7.72631L9.73576 9.14569L8.14436 8.84123L7.9427 10.4489L6.8342 9.26644L5.7257 10.4489L5.52414 8.84123L3.93273 9.14559L4.71306 7.72626L3.24756 7.03697L4.71311 6.34758L3.93273 4.9283L5.52404 5.23266L5.72575 3.62503L6.8342 4.80745L7.9427 3.62503L8.14436 5.23266L9.73581 4.9283L8.95539 6.34762L10.4208 7.03697Z\" fill=\"#F0F0F0\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_246_4744\">\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-mh-icon\"\n    data-testid=\"kui-icon-wrapper-flag-mh-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-mh-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.es264.js

@@ -1,6 +1,6 @@
-import { defineComponent as C, computed as d, openBlock as c, createBlock as S, resolveDynamicComponent as v, normalizeStyle as y, withCtx as L, createElementBlock as M } from "vue";
+import { defineComponent as C, computed as d, openBlock as c, createBlock as v, resolveDynamicComponent as S, normalizeStyle as y, withCtx as L, createElementBlock as b } from "vue";
 import { KUI_ICON_SIZE_50 as p } from "./kong-icons.es1223.js";
-const b = ["aria-hidden"], f = `<g clip-path="url(#clip0_246_5097)">
+const x = ["aria-hidden", "tabindex"], f = `<g clip-path="url(#clip0_246_5097)">
 <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="M13.8249 23.862C15.7766 23.5643 17.5732 22.7957 19.0963 21.6768L12 12L13.8249 23.862Z" fill="#D80027"/>
 <path d="M10.1752 0.137939C8.22359 0.435689 6.42706 1.20425 4.90381 2.32311L12.0002 12L10.1752 0.137939Z" fill="#D80027"/>
@@ -94,13 +94,14 @@ const b = ["aria-hidden"], f = `<g clip-path="url(#clip0_246_5097)">
       flexShrink: "0",
       height: r.value,
       lineHeight: "0",
-      width: r.value
+      width: r.value,
+      ...e.decorative && { pointerEvents: "none" }
     })), g = (n) => {
       const t = {}, a = Math.random().toString(36).substring(2, 12);
-      return n.replace(/id="([^"]+)"/g, (s, l) => {
-        const o = `${a}-${l}`;
-        return t[l] = o, `id="${o}"`;
-      }).replace(/#([^\s^")]+)/g, (s, l) => t[l] ? `#${t[l]}` : s);
+      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);
     }, h = (n) => {
       const t = {
         "<": "&lt;",
@@ -111,24 +112,25 @@ const b = ["aria-hidden"], f = `<g clip-path="url(#clip0_246_5097)">
       };
       return n.replace(/[<>"'`]/g, (a) => t[a]);
     }, m = `${e.title ? `<title data-testid="kui-icon-svg-title">${h(e.title)}</title>` : ""}${e.staticIds ? f : g(f)}`;
-    return (n, t) => (c(), S(v(i.as), {
+    return (n, t) => (c(), v(S(i.as), {
       "aria-hidden": i.decorative ? "true" : void 0,
       class: "kui-icon flag-mk-icon",
       "data-testid": "kui-icon-wrapper-flag-mk-icon",
       style: y(u.value)
     }, {
       default: L(() => [
-        (c(), M("svg", {
+        (c(), b("svg", {
           "aria-hidden": i.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-flag-mk-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))
+        }, null, 8, x))
       ]),
       _: 1
     }, 8, ["aria-hidden", "style"]));

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

@@ -1 +1 @@
-{"version":3,"file":"kong-icons.es264.js","sources":["../src/components/flags/FlagMkIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagMkIcon.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_246_5097)\">\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=\"M13.8249 23.862C15.7766 23.5643 17.5732 22.7957 19.0963 21.6768L12 12L13.8249 23.862Z\" fill=\"#D80027\"/>\n<path d=\"M10.1752 0.137939C8.22359 0.435689 6.42706 1.20425 4.90381 2.32311L12.0002 12L10.1752 0.137939Z\" fill=\"#D80027\"/>\n<path d=\"M4.90381 21.6768C6.42696 22.7957 8.2235 23.5643 10.1751 23.8621L12.0002 12L4.90381 21.6768Z\" fill=\"#D80027\"/>\n<path d=\"M2.32336 4.90359C1.20445 6.42684 0.43598 8.22333 0.138184 10.175L12.0002 12L2.32336 4.90359Z\" fill=\"#D80027\"/>\n<path d=\"M0.138184 13.8249C0.435934 15.7766 1.2045 17.5732 2.3234 19.0963L12.0002 12L0.138184 13.8249Z\" fill=\"#D80027\"/>\n<path d=\"M23.862 10.175C23.5642 8.22336 22.7957 6.42683 21.6768 4.90363L12 12L23.862 10.175Z\" fill=\"#D80027\"/>\n<path d=\"M19.0963 2.32306C17.5731 1.20421 15.7766 0.435689 13.8249 0.137939L12 12L19.0963 2.32306Z\" fill=\"#D80027\"/>\n<path d=\"M21.6769 19.0964C22.7958 17.5732 23.5643 15.7766 23.8621 13.825L12 12L21.6769 19.0964Z\" fill=\"#D80027\"/>\n<path d=\"M12.0001 16.1739C14.3052 16.1739 16.174 14.3052 16.174 12C16.174 9.69483 14.3052 7.82611 12.0001 7.82611C9.69489 7.82611 7.82617 9.69483 7.82617 12C7.82617 14.3052 9.69489 16.1739 12.0001 16.1739Z\" fill=\"#D80027\"/>\n<path d=\"M12.0001 15.1304C13.729 15.1304 15.1305 13.7289 15.1305 12C15.1305 10.2711 13.729 8.86954 12.0001 8.86954C10.2712 8.86954 8.86963 10.2711 8.86963 12C8.86963 13.7289 10.2712 15.1304 12.0001 15.1304Z\" fill=\"#FFDA44\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_246_5097\">\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-mk-icon\"\n    data-testid=\"kui-icon-wrapper-flag-mk-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-mk-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.es264.js","sources":["../src/components/flags/FlagMkIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagMkIcon.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_246_5097)\">\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=\"M13.8249 23.862C15.7766 23.5643 17.5732 22.7957 19.0963 21.6768L12 12L13.8249 23.862Z\" fill=\"#D80027\"/>\n<path d=\"M10.1752 0.137939C8.22359 0.435689 6.42706 1.20425 4.90381 2.32311L12.0002 12L10.1752 0.137939Z\" fill=\"#D80027\"/>\n<path d=\"M4.90381 21.6768C6.42696 22.7957 8.2235 23.5643 10.1751 23.8621L12.0002 12L4.90381 21.6768Z\" fill=\"#D80027\"/>\n<path d=\"M2.32336 4.90359C1.20445 6.42684 0.43598 8.22333 0.138184 10.175L12.0002 12L2.32336 4.90359Z\" fill=\"#D80027\"/>\n<path d=\"M0.138184 13.8249C0.435934 15.7766 1.2045 17.5732 2.3234 19.0963L12.0002 12L0.138184 13.8249Z\" fill=\"#D80027\"/>\n<path d=\"M23.862 10.175C23.5642 8.22336 22.7957 6.42683 21.6768 4.90363L12 12L23.862 10.175Z\" fill=\"#D80027\"/>\n<path d=\"M19.0963 2.32306C17.5731 1.20421 15.7766 0.435689 13.8249 0.137939L12 12L19.0963 2.32306Z\" fill=\"#D80027\"/>\n<path d=\"M21.6769 19.0964C22.7958 17.5732 23.5643 15.7766 23.8621 13.825L12 12L21.6769 19.0964Z\" fill=\"#D80027\"/>\n<path d=\"M12.0001 16.1739C14.3052 16.1739 16.174 14.3052 16.174 12C16.174 9.69483 14.3052 7.82611 12.0001 7.82611C9.69489 7.82611 7.82617 9.69483 7.82617 12C7.82617 14.3052 9.69489 16.1739 12.0001 16.1739Z\" fill=\"#D80027\"/>\n<path d=\"M12.0001 15.1304C13.729 15.1304 15.1305 13.7289 15.1305 12C15.1305 10.2711 13.729 8.86954 12.0001 8.86954C10.2712 8.86954 8.86963 10.2711 8.86963 12C8.86963 13.7289 10.2712 15.1304 12.0001 15.1304Z\" fill=\"#FFDA44\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_246_5097\">\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-mk-icon\"\n    data-testid=\"kui-icon-wrapper-flag-mk-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-mk-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.es266.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 w = ["aria-hidden"], g = `<g clip-path="url(#clip0_246_4736)">
+const w = ["aria-hidden", "tabindex"], g = `<g clip-path="url(#clip0_246_4736)">
 <path d="M16.174 0.746391C14.874 0.264047 13.4679 0 12.0001 0C10.5322 0 9.12618 0.264047 7.8262 0.746391L6.78271 12L7.8262 23.2536C9.12618 23.736 10.5322 24 12.0001 24C13.4679 24 14.874 23.736 16.174 23.2536L17.2175 12L16.174 0.746391Z" fill="#FFDA44"/>
 <path d="M23.9999 12C23.9999 6.84046 20.7434 2.4419 16.1738 0.746429V23.2537C20.7434 21.5581 23.9999 17.1596 23.9999 12Z" fill="#D80027"/>
 <path d="M0 12C0 17.1596 3.2565 21.5581 7.82611 23.2536V0.746429C3.2565 2.4419 0 6.84046 0 12Z" fill="#6DA544"/>
@@ -9,7 +9,7 @@ const w = ["aria-hidden"], g = `<g clip-path="url(#clip0_246_4736)">
 <clipPath id="clip0_246_4736">
 <rect width="24" height="24" fill="white"/>
 </clipPath>
-</defs>`, $ = /* @__PURE__ */ S({
+</defs>`, _ = /* @__PURE__ */ v({
   __name: "FlagMlIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -70,7 +70,7 @@ const w = ["aria-hidden"], g = `<g clip-path="url(#clip0_246_4736)">
     }
   },
   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") {
@@ -79,20 +79,21 @@ const w = ["aria-hidden"], g = `<g clip-path="url(#clip0_246_4736)">
           return `${t}px`;
       }
       return u;
-    }), p = 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 = {}, l = Math.random().toString(36).substring(2, 12);
-      return n.replace(/id="([^"]+)"/g, (o, s) => {
-        const a = `${l}-${s}`;
-        return t[s] = a, `id="${a}"`;
-      }).replace(/#([^\s^")]+)/g, (o, s) => t[s] ? `#${t[s]}` : o);
+      const t = {}, a = Math.random().toString(36).substring(2, 12);
+      return n.replace(/id="([^"]+)"/g, (s, o) => {
+        const l = `${a}-${o}`;
+        return t[o] = l, `id="${l}"`;
+      }).replace(/#([^\s^")]+)/g, (s, o) => t[o] ? `#${t[o]}` : s);
     }, m = (n) => {
       const t = {
         "<": "&lt;",
@@ -101,21 +102,22 @@ const w = ["aria-hidden"], g = `<g clip-path="url(#clip0_246_4736)">
         "'": "&#039;",
         "`": "&#039;"
       };
-      return n.replace(/[<>"'`]/g, (l) => t[l]);
+      return n.replace(/[<>"'`]/g, (a) => t[a]);
     }, h = `${e.title ? `<title data-testid="kui-icon-svg-title">${m(e.title)}</title>` : ""}${e.staticIds ? g : f(g)}`;
-    return (n, t) => (d(), v(y(i.as), {
+    return (n, t) => (c(), S(y(i.as), {
       "aria-hidden": i.decorative ? "true" : void 0,
       class: "kui-icon flag-ml-icon",
       "data-testid": "kui-icon-wrapper-flag-ml-icon",
       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-ml-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",
@@ -127,6 +129,6 @@ const w = ["aria-hidden"], g = `<g clip-path="url(#clip0_246_4736)">
   }
 });
 export {
-  $ as default
+  _ as default
 };
 //# sourceMappingURL=kong-icons.es266.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"kong-icons.es266.js","sources":["../src/components/flags/FlagMlIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagMlIcon.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_246_4736)\">\n<path d=\"M16.174 0.746391C14.874 0.264047 13.4679 0 12.0001 0C10.5322 0 9.12618 0.264047 7.8262 0.746391L6.78271 12L7.8262 23.2536C9.12618 23.736 10.5322 24 12.0001 24C13.4679 24 14.874 23.736 16.174 23.2536L17.2175 12L16.174 0.746391Z\" fill=\"#FFDA44\"/>\n<path d=\"M23.9999 12C23.9999 6.84046 20.7434 2.4419 16.1738 0.746429V23.2537C20.7434 21.5581 23.9999 17.1596 23.9999 12Z\" fill=\"#D80027\"/>\n<path d=\"M0 12C0 17.1596 3.2565 21.5581 7.82611 23.2536V0.746429C3.2565 2.4419 0 6.84046 0 12Z\" fill=\"#6DA544\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_246_4736\">\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-ml-icon\"\n    data-testid=\"kui-icon-wrapper-flag-ml-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-ml-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,GAgBzDM,IAAsB,GADJlB,EAAM,QAAQ,2CAA2Ce,EAAWf,EAAM,KAAK,CAAC,aAAa,EACvE,GAAIA,EAAM,YAAuDD,IAA3CS,EAAqBT,CAAkB,CAAsB;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"kong-icons.es266.js","sources":["../src/components/flags/FlagMlIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagMlIcon.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_246_4736)\">\n<path d=\"M16.174 0.746391C14.874 0.264047 13.4679 0 12.0001 0C10.5322 0 9.12618 0.264047 7.8262 0.746391L6.78271 12L7.8262 23.2536C9.12618 23.736 10.5322 24 12.0001 24C13.4679 24 14.874 23.736 16.174 23.2536L17.2175 12L16.174 0.746391Z\" fill=\"#FFDA44\"/>\n<path d=\"M23.9999 12C23.9999 6.84046 20.7434 2.4419 16.1738 0.746429V23.2537C20.7434 21.5581 23.9999 17.1596 23.9999 12Z\" fill=\"#D80027\"/>\n<path d=\"M0 12C0 17.1596 3.2565 21.5581 7.82611 23.2536V0.746429C3.2565 2.4419 0 6.84046 0 12Z\" fill=\"#6DA544\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_246_4736\">\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-ml-icon\"\n    data-testid=\"kui-icon-wrapper-flag-ml-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-ml-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,GAgBzDM,IAAsB,GADJlB,EAAM,QAAQ,2CAA2Ce,EAAWf,EAAM,KAAK,CAAC,aAAa,EACvE,GAAIA,EAAM,YAAuDD,IAA3CS,EAAqBT,CAAkB,CAAsB;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/kong-icons.es268.js

@@ -1,6 +1,6 @@
-import { defineComponent as S, computed as d, openBlock as c, 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_246_4859)">
+const L = ["aria-hidden", "tabindex"], g = `<g clip-path="url(#clip0_246_4859)">
 <path d="M23.2536 16.1739C23.736 14.874 24 13.4678 24 12C24 10.5322 23.736 9.12605 23.2536 7.82611L12 6.78262L0.746391 7.82611C0.264047 9.12605 0 10.5322 0 12C0 13.4678 0.264047 14.874 0.746391 16.1739L12 17.2174L23.2536 16.1739Z" fill="#6DA544"/>
 <path d="M23.2538 7.82611C21.5583 3.2565 17.1598 0 12.0002 0C6.84061 0 2.4421 3.2565 0.746582 7.82611H23.2538Z" fill="#FFDA44"/>
 <path d="M12.0002 24C17.1598 24 21.5583 20.7435 23.2538 16.1739H0.746582C2.4421 20.7435 6.84061 24 12.0002 24Z" fill="#D80027"/>
@@ -10,7 +10,7 @@ const L = ["aria-hidden"], p = `<g clip-path="url(#clip0_246_4859)">
 <clipPath id="clip0_246_4859">
 <rect width="24" height="24" fill="white"/>
 </clipPath>
-</defs>`, I = /* @__PURE__ */ S({
+</defs>`, $ = /* @__PURE__ */ v({
   __name: "FlagMmIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -80,20 +80,21 @@ const L = ["aria-hidden"], p = `<g clip-path="url(#clip0_246_4859)">
           return `${t}px`;
       }
       return u;
-    }), g = d(() => ({
+    }), 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 = {}, o = Math.random().toString(36).substring(2, 12);
-      return n.replace(/id="([^"]+)"/g, (a, s) => {
-        const l = `${o}-${s}`;
-        return t[s] = l, `id="${l}"`;
-      }).replace(/#([^\s^")]+)/g, (a, s) => t[s] ? `#${t[s]}` : a);
+      const t = {}, a = Math.random().toString(36).substring(2, 12);
+      return n.replace(/id="([^"]+)"/g, (s, o) => {
+        const l = `${a}-${o}`;
+        return t[o] = l, `id="${l}"`;
+      }).replace(/#([^\s^")]+)/g, (s, o) => t[o] ? `#${t[o]}` : s);
     }, m = (n) => {
       const t = {
         "<": "&lt;",
@@ -102,13 +103,13 @@ const L = ["aria-hidden"], p = `<g clip-path="url(#clip0_246_4859)">
         "'": "&#039;",
         "`": "&#039;"
       };
-      return n.replace(/[<>"'`]/g, (o) => t[o]);
-    }, h = `${e.title ? `<title data-testid="kui-icon-svg-title">${m(e.title)}</title>` : ""}${e.staticIds ? p : f(p)}`;
-    return (n, t) => (c(), v(y(i.as), {
+      return n.replace(/[<>"'`]/g, (a) => t[a]);
+    }, h = `${e.title ? `<title data-testid="kui-icon-svg-title">${m(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-mm-icon",
       "data-testid": "kui-icon-wrapper-flag-mm-icon",
-      style: C(g.value)
+      style: C(p.value)
     }, {
       default: b(() => [
         (c(), x("svg", {
@@ -117,6 +118,7 @@ const L = ["aria-hidden"], p = `<g clip-path="url(#clip0_246_4859)">
           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_246_4859)">
   }
 });
 export {
-  I as default
+  $ as default
 };
 //# sourceMappingURL=kong-icons.es268.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"kong-icons.es268.js","sources":["../src/components/flags/FlagMmIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagMmIcon.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_246_4859)\">\n<path d=\"M23.2536 16.1739C23.736 14.874 24 13.4678 24 12C24 10.5322 23.736 9.12605 23.2536 7.82611L12 6.78262L0.746391 7.82611C0.264047 9.12605 0 10.5322 0 12C0 13.4678 0.264047 14.874 0.746391 16.1739L12 17.2174L23.2536 16.1739Z\" fill=\"#6DA544\"/>\n<path d=\"M23.2538 7.82611C21.5583 3.2565 17.1598 0 12.0002 0C6.84061 0 2.4421 3.2565 0.746582 7.82611H23.2538Z\" fill=\"#FFDA44\"/>\n<path d=\"M12.0002 24C17.1598 24 21.5583 20.7435 23.2538 16.1739H0.746582C2.4421 20.7435 6.84061 24 12.0002 24Z\" fill=\"#D80027\"/>\n<path d=\"M20.2287 10.1525H13.9424L11.9999 4.17389L10.0573 10.1525H3.771L8.8567 13.8474L6.91411 19.8261L11.9999 16.1739L17.0856 19.8261L15.1431 13.8474L20.2287 10.1525Z\" fill=\"#F0F0F0\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_246_4859\">\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-mm-icon\"\n    data-testid=\"kui-icon-wrapper-flag-mm-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-mm-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.es268.js","sources":["../src/components/flags/FlagMmIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * FlagMmIcon.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_246_4859)\">\n<path d=\"M23.2536 16.1739C23.736 14.874 24 13.4678 24 12C24 10.5322 23.736 9.12605 23.2536 7.82611L12 6.78262L0.746391 7.82611C0.264047 9.12605 0 10.5322 0 12C0 13.4678 0.264047 14.874 0.746391 16.1739L12 17.2174L23.2536 16.1739Z\" fill=\"#6DA544\"/>\n<path d=\"M23.2538 7.82611C21.5583 3.2565 17.1598 0 12.0002 0C6.84061 0 2.4421 3.2565 0.746582 7.82611H23.2538Z\" fill=\"#FFDA44\"/>\n<path d=\"M12.0002 24C17.1598 24 21.5583 20.7435 23.2538 16.1739H0.746582C2.4421 20.7435 6.84061 24 12.0002 24Z\" fill=\"#D80027\"/>\n<path d=\"M20.2287 10.1525H13.9424L11.9999 4.17389L10.0573 10.1525H3.771L8.8567 13.8474L6.91411 19.8261L11.9999 16.1739L17.0856 19.8261L15.1431 13.8474L20.2287 10.1525Z\" fill=\"#F0F0F0\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_246_4859\">\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-mm-icon\"\n    data-testid=\"kui-icon-wrapper-flag-mm-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-flag-mm-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.es270.js

@@ -1,6 +1,6 @@
-import { defineComponent as S, computed as d, openBlock as c, createBlock as C, resolveDynamicComponent as v, normalizeStyle as y, withCtx as F, createElementBlock as b } from "vue";
+import { defineComponent as v, 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 p } from "./kong-icons.es1223.js";
-const x = ["aria-hidden"], f = `<g clip-path="url(#clip0_246_4814)">
+const F = ["aria-hidden", "tabindex"], f = `<g clip-path="url(#clip0_246_4814)">
 <path d="M11.9999 24C13.4677 24 14.8738 23.736 16.1737 23.2536L16.6955 12L16.1738 0.746391C14.8738 0.264047 13.4677 0 11.9999 0C10.532 0 9.1259 0.264047 7.82596 0.746391L7.3042 12L7.82592 23.2536C9.1259 23.736 10.532 24 11.9999 24Z" fill="#0052B4"/>
 <path d="M0 12C0 17.1596 3.2565 21.5581 7.82611 23.2536V0.746399C3.2565 2.44191 0 6.84043 0 12Z" fill="#A2001D"/>
 <path d="M16.1738 0.746399V23.2537C20.7434 21.5581 23.9999 17.1596 23.9999 12C23.9999 6.84043 20.7434 2.44191 16.1738 0.746399Z" fill="#A2001D"/>
@@ -16,7 +16,7 @@ const x = ["aria-hidden"], f = `<g clip-path="url(#clip0_246_4814)">
 <clipPath id="clip0_246_4814">
 <rect width="24" height="24" fill="white"/>
 </clipPath>
-</defs>`, N = /* @__PURE__ */ S({
+</defs>`, N = /* @__PURE__ */ v({
   __name: "FlagMnIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -53,8 +53,8 @@ const x = ["aria-hidden"], f = `<g clip-path="url(#clip0_246_4814)">
         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;
@@ -77,11 +77,11 @@ const x = ["aria-hidden"], f = `<g clip-path="url(#clip0_246_4814)">
     }
   },
   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`;
       }
@@ -91,16 +91,17 @@ const x = ["aria-hidden"], f = `<g clip-path="url(#clip0_246_4814)">
       color: e.color,
       display: e.display,
       flexShrink: "0",
-      height: r.value,
+      height: n.value,
       lineHeight: "0",
-      width: r.value
-    })), g = (n) => {
+      width: n.value,
+      ...e.decorative && { pointerEvents: "none" }
+    })), g = (r) => {
       const t = {}, a = Math.random().toString(36).substring(2, 12);
-      return n.replace(/id="([^"]+)"/g, (s, l) => {
-        const o = `${a}-${l}`;
-        return t[l] = o, `id="${o}"`;
-      }).replace(/#([^\s^")]+)/g, (s, l) => t[l] ? `#${t[l]}` : s);
-    }, h = (n) => {
+      return r.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);
+    }, h = (r) => {
       const t = {
         "<": "&lt;",
         ">": "&gt;",
@@ -108,26 +109,27 @@ const x = ["aria-hidden"], f = `<g clip-path="url(#clip0_246_4814)">
         "'": "&#039;",
         "`": "&#039;"
       };
-      return n.replace(/[<>"'`]/g, (a) => t[a]);
+      return r.replace(/[<>"'`]/g, (a) => t[a]);
     }, m = `${e.title ? `<title data-testid="kui-icon-svg-title">${h(e.title)}</title>` : ""}${e.staticIds ? f : g(f)}`;
-    return (n, t) => (c(), C(v(i.as), {
+    return (r, t) => (c(), S(C(i.as), {
       "aria-hidden": i.decorative ? "true" : void 0,
       class: "kui-icon flag-mn-icon",
       "data-testid": "kui-icon-wrapper-flag-mn-icon",
       style: y(u.value)
     }, {
-      default: F(() => [
-        (c(), b("svg", {
+      default: b(() => [
+        (c(), x("svg", {
           "aria-hidden": i.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-flag-mn-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, x))
+        }, null, 8, F))
       ]),
       _: 1
     }, 8, ["aria-hidden", "style"]));