@kong/icons 1.18.2-pr.426.b737e72.0 → 1.18.2-pr.429.04a4618.0

package/dist/kong-icons.es462.js

@@ -1,6 +1,6 @@
-import { defineComponent as C, computed as c, openBlock as d, createBlock as S, resolveDynamicComponent as v, normalizeStyle as y, withCtx as H, createElementBlock as b } from "vue";
+import { defineComponent as v, computed as d, openBlock as c, createBlock as C, resolveDynamicComponent as S, normalizeStyle as y, withCtx as b, createElementBlock as x } from "vue";
 import { KUI_ICON_SIZE_50 as u } from "./kong-icons.es1223.js";
-const x = ["aria-hidden"], p = `<g clip-path="url(#clip0_2_1231)">
+const H = ["aria-hidden", "tabindex"], p = `<g clip-path="url(#clip0_2_1231)">
 <path d="M22.2686 17.9663C22.4355 17.677 22.5388 17.3513 22.5388 17.0582V6.89627C22.5388 6.60414 22.4357 6.27808 22.2686 5.98877L11.8961 11.9775L22.2686 17.9663Z" fill="#00599C"/>
 <path d="M12.8175 23.7349L21.6174 18.6548C21.8709 18.5084 22.1015 18.2556 22.2686 17.9663L11.8961 11.9775L1.52246 17.9663C1.68934 18.2556 1.92015 18.5082 2.17365 18.6548L10.9736 23.7349C11.4804 24.0278 12.3105 24.0278 12.8171 23.7349H12.8175Z" fill="#004482"/>
 <path d="M22.2686 5.98898C22.1015 5.69911 21.8709 5.44636 21.6174 5.30067L12.8173 0.219797C12.3104 -0.0732656 11.4806 -0.0732656 10.9738 0.219797L2.17382 5.30067C1.66682 5.5928 1.25244 6.3113 1.25244 6.8963V17.058C1.25244 17.3509 1.35557 17.6768 1.52263 17.9661L11.8959 11.9775L22.2686 5.98898Z" fill="#659AD2"/>
@@ -10,7 +10,7 @@ const x = ["aria-hidden"], p = `<g clip-path="url(#clip0_2_1231)">
 <clipPath id="clip0_2_1231">
 <rect width="24" height="24" fill="white"/>
 </clipPath>
-</defs>`, _ = /* @__PURE__ */ C({
+</defs>`, k = /* @__PURE__ */ v({
   __name: "LanguageCPlusPlusIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -47,8 +47,8 @@ const x = ["aria-hidden"], p = `<g clip-path="url(#clip0_2_1231)">
         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;
@@ -71,30 +71,31 @@ const x = ["aria-hidden"], p = `<g clip-path="url(#clip0_2_1231)">
     }
   },
   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 u;
-    }), g = c(() => ({
+    }), g = d(() => ({
       boxSizing: "border-box",
       color: e.color,
       display: e.display,
       flexShrink: "0",
-      height: r.value,
+      height: n.value,
       lineHeight: "0",
-      width: r.value
-    })), f = (n) => {
-      const t = {}, l = Math.random().toString(36).substring(2, 12);
-      return n.replace(/id="([^"]+)"/g, (a, s) => {
-        const o = `${l}-${s}`;
+      width: n.value,
+      ...e.decorative && { pointerEvents: "none" }
+    })), f = (r) => {
+      const t = {}, a = Math.random().toString(36).substring(2, 12);
+      return r.replace(/id="([^"]+)"/g, (l, s) => {
+        const o = `${a}-${s}`;
         return t[s] = o, `id="${o}"`;
-      }).replace(/#([^\s^")]+)/g, (a, s) => t[s] ? `#${t[s]}` : a);
-    }, h = (n) => {
+      }).replace(/#([^\s^")]+)/g, (l, s) => t[s] ? `#${t[s]}` : l);
+    }, h = (r) => {
       const t = {
         "<": "&lt;",
         ">": "&gt;",
@@ -102,32 +103,33 @@ const x = ["aria-hidden"], p = `<g clip-path="url(#clip0_2_1231)">
         "'": "&#039;",
         "`": "&#039;"
       };
-      return n.replace(/[<>"'`]/g, (l) => t[l]);
+      return r.replace(/[<>"'`]/g, (a) => t[a]);
     }, m = `${e.title ? `<title data-testid="kui-icon-svg-title">${h(e.title)}</title>` : ""}${e.staticIds ? p : f(p)}`;
-    return (n, t) => (d(), S(v(i.as), {
+    return (r, t) => (c(), C(S(i.as), {
       "aria-hidden": i.decorative ? "true" : void 0,
       class: "kui-icon language-c-plus-plus-icon",
       "data-testid": "kui-icon-wrapper-language-c-plus-plus-icon",
       style: y(g.value)
     }, {
-      default: H(() => [
-        (d(), b("svg", {
+      default: b(() => [
+        (c(), x("svg", {
           "aria-hidden": i.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-language-c-plus-plus-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, H))
       ]),
       _: 1
     }, 8, ["aria-hidden", "style"]));
   }
 });
 export {
-  _ as default
+  k as default
 };
 //# sourceMappingURL=kong-icons.es462.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"kong-icons.es462.js","sources":["../src/components/multi-color/LanguageCPlusPlusIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * LanguageCPlusPlusIcon.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:32 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_2_1231)\">\n<path d=\"M22.2686 17.9663C22.4355 17.677 22.5388 17.3513 22.5388 17.0582V6.89627C22.5388 6.60414 22.4357 6.27808 22.2686 5.98877L11.8961 11.9775L22.2686 17.9663Z\" fill=\"#00599C\"/>\n<path d=\"M12.8175 23.7349L21.6174 18.6548C21.8709 18.5084 22.1015 18.2556 22.2686 17.9663L11.8961 11.9775L1.52246 17.9663C1.68934 18.2556 1.92015 18.5082 2.17365 18.6548L10.9736 23.7349C11.4804 24.0278 12.3105 24.0278 12.8171 23.7349H12.8175Z\" fill=\"#004482\"/>\n<path d=\"M22.2686 5.98898C22.1015 5.69911 21.8709 5.44636 21.6174 5.30067L12.8173 0.219797C12.3104 -0.0732656 11.4806 -0.0732656 10.9738 0.219797L2.17382 5.30067C1.66682 5.5928 1.25244 6.3113 1.25244 6.8963V17.058C1.25244 17.3509 1.35557 17.6768 1.52263 17.9661L11.8959 11.9775L22.2686 5.98898Z\" fill=\"#659AD2\"/>\n<path d=\"M11.896 4.88154C7.98342 4.88154 4.80042 8.06472 4.80042 11.9773C4.80042 15.8898 7.98342 19.073 11.896 19.073C14.4207 19.073 16.7755 17.7142 18.0404 15.5274L14.97 13.7503C14.3363 14.8453 13.1588 15.525 11.896 15.525C9.93979 15.525 8.3481 13.9335 8.3481 11.9771C8.3481 10.0207 9.93998 8.42922 11.896 8.42922C13.1579 8.42922 14.3367 9.10966 14.9691 10.2039L18.0404 8.42697C16.7747 6.23997 14.4207 4.88154 11.896 4.88154ZM17.415 10.7943V11.5832H16.6262V12.3712H17.415V13.16H18.2031V12.3712H18.9912V11.5832H18.2031V10.7943H17.415ZM20.3712 10.7943V11.5832H19.5829V12.3712H20.3712V13.16H21.16V12.3712H21.948V11.5832H21.16V10.7943H20.3712Z\" fill=\"white\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_2_1231\">\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 language-c-plus-plus-icon\"\n    data-testid=\"kui-icon-wrapper-language-c-plus-plus-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-language-c-plus-plus-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.es462.js","sources":["../src/components/multi-color/LanguageCPlusPlusIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * LanguageCPlusPlusIcon.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_2_1231)\">\n<path d=\"M22.2686 17.9663C22.4355 17.677 22.5388 17.3513 22.5388 17.0582V6.89627C22.5388 6.60414 22.4357 6.27808 22.2686 5.98877L11.8961 11.9775L22.2686 17.9663Z\" fill=\"#00599C\"/>\n<path d=\"M12.8175 23.7349L21.6174 18.6548C21.8709 18.5084 22.1015 18.2556 22.2686 17.9663L11.8961 11.9775L1.52246 17.9663C1.68934 18.2556 1.92015 18.5082 2.17365 18.6548L10.9736 23.7349C11.4804 24.0278 12.3105 24.0278 12.8171 23.7349H12.8175Z\" fill=\"#004482\"/>\n<path d=\"M22.2686 5.98898C22.1015 5.69911 21.8709 5.44636 21.6174 5.30067L12.8173 0.219797C12.3104 -0.0732656 11.4806 -0.0732656 10.9738 0.219797L2.17382 5.30067C1.66682 5.5928 1.25244 6.3113 1.25244 6.8963V17.058C1.25244 17.3509 1.35557 17.6768 1.52263 17.9661L11.8959 11.9775L22.2686 5.98898Z\" fill=\"#659AD2\"/>\n<path d=\"M11.896 4.88154C7.98342 4.88154 4.80042 8.06472 4.80042 11.9773C4.80042 15.8898 7.98342 19.073 11.896 19.073C14.4207 19.073 16.7755 17.7142 18.0404 15.5274L14.97 13.7503C14.3363 14.8453 13.1588 15.525 11.896 15.525C9.93979 15.525 8.3481 13.9335 8.3481 11.9771C8.3481 10.0207 9.93998 8.42922 11.896 8.42922C13.1579 8.42922 14.3367 9.10966 14.9691 10.2039L18.0404 8.42697C16.7747 6.23997 14.4207 4.88154 11.896 4.88154ZM17.415 10.7943V11.5832H16.6262V12.3712H17.415V13.16H18.2031V12.3712H18.9912V11.5832H18.2031V10.7943H17.415ZM20.3712 10.7943V11.5832H19.5829V12.3712H20.3712V13.16H21.16V12.3712H21.948V11.5832H21.16V10.7943H20.3712Z\" fill=\"white\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_2_1231\">\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 language-c-plus-plus-icon\"\n    data-testid=\"kui-icon-wrapper-language-c-plus-plus-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-language-c-plus-plus-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.es464.js

@@ -1,8 +1,8 @@
-import { defineComponent as h, computed as c, openBlock as d, createBlock as S, resolveDynamicComponent as v, normalizeStyle as L, withCtx as y, createElementBlock as H } from "vue";
+import { defineComponent as C, computed as d, openBlock as c, createBlock as h, resolveDynamicComponent as S, normalizeStyle as L, withCtx as y, createElementBlock as H } from "vue";
 import { KUI_ICON_SIZE_50 as u } from "./kong-icons.es1223.js";
-const b = ["aria-hidden"], g = `<path d="M21.6375 5.75623L12.5813 0.543726C12.4313 0.449976 12.225 0.412476 12 0.412476C11.775 0.412476 11.5688 0.468726 11.4188 0.543726L2.41875 5.77498C2.1 5.96248 1.875 6.43123 1.875 6.78748V17.2312C1.875 17.4375 1.9125 17.6812 2.0625 17.8875L22.0875 6.26248C21.975 6.03748 21.8063 5.86873 21.6375 5.75623Z" fill="#9B4F96"/>
+const b = ["aria-hidden", "tabindex"], g = `<path d="M21.6375 5.75623L12.5813 0.543726C12.4313 0.449976 12.225 0.412476 12 0.412476C11.775 0.412476 11.5688 0.468726 11.4188 0.543726L2.41875 5.77498C2.1 5.96248 1.875 6.43123 1.875 6.78748V17.2312C1.875 17.4375 1.9125 17.6812 2.0625 17.8875L22.0875 6.26248C21.975 6.03748 21.8063 5.86873 21.6375 5.75623Z" fill="#9B4F96"/>
 <path d="M2.00623 17.8688C2.09998 18.0188 2.23123 18.15 2.36248 18.225L11.4 23.4563C11.55 23.55 11.7562 23.5875 11.9812 23.5875C12.2062 23.5875 12.4125 23.5313 12.5625 23.4563L21.5625 18.225C21.8812 18.0375 22.1062 17.5688 22.1062 17.2125V6.76877C22.1062 6.60002 22.0875 6.41252 21.9937 6.24377L2.00623 17.8688Z" fill="#68217A"/>
-<path d="M15.9937 14.2687C15.2063 15.6562 13.7062 16.5938 12 16.5938C9.46875 16.5938 7.40625 14.5312 7.40625 12C7.40625 9.46875 9.46875 7.40625 12 7.40625C13.7062 7.40625 15.2063 8.34375 15.9937 9.75L18.4312 8.34375C17.1562 6.1125 14.7562 4.59375 12 4.59375C7.9125 4.59375 4.59375 7.9125 4.59375 12C4.59375 16.0875 7.9125 19.4062 12 19.4062C14.7375 19.4062 17.1375 17.9062 18.4125 15.6937L15.9937 14.2687ZM18.1875 12.4125L18.3562 11.6063H17.5687V10.725H18.525L18.75 9.5625H19.6687L19.4437 10.7062H20.1562L20.3812 9.5625H21.2812L21.0562 10.7062H21.5062V11.5875H20.8875L20.7187 12.3937H21.5062V13.275H20.55L20.325 14.4H19.4062L19.6312 13.275H18.9187L18.6937 14.4H17.7937L18.0187 13.275H17.5687V12.3937H18.1875V12.4125ZM19.0875 12.4125H19.8L19.9687 11.6063H19.2562L19.0875 12.4125Z" fill="white"/>`, I = /* @__PURE__ */ h({
+<path d="M15.9937 14.2687C15.2063 15.6562 13.7062 16.5938 12 16.5938C9.46875 16.5938 7.40625 14.5312 7.40625 12C7.40625 9.46875 9.46875 7.40625 12 7.40625C13.7062 7.40625 15.2063 8.34375 15.9937 9.75L18.4312 8.34375C17.1562 6.1125 14.7562 4.59375 12 4.59375C7.9125 4.59375 4.59375 7.9125 4.59375 12C4.59375 16.0875 7.9125 19.4062 12 19.4062C14.7375 19.4062 17.1375 17.9062 18.4125 15.6937L15.9937 14.2687ZM18.1875 12.4125L18.3562 11.6063H17.5687V10.725H18.525L18.75 9.5625H19.6687L19.4437 10.7062H20.1562L20.3812 9.5625H21.2812L21.0562 10.7062H21.5062V11.5875H20.8875L20.7187 12.3937H21.5062V13.275H20.55L20.325 14.4H19.4062L19.6312 13.275H18.9187L18.6937 14.4H17.7937L18.0187 13.275H17.5687V12.3937H18.1875V12.4125ZM19.0875 12.4125H19.8L19.9687 11.6063H19.2562L19.0875 12.4125Z" fill="white"/>`, I = /* @__PURE__ */ C({
   __name: "LanguageCSharpIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -39,8 +39,8 @@ const b = ["aria-hidden"], g = `<path d="M21.6375 5.75623L12.5813 0.543726C12.43
         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;
@@ -63,30 +63,31 @@ const b = ["aria-hidden"], g = `<path d="M21.6375 5.75623L12.5813 0.543726C12.43
     }
   },
   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 u;
-    }), p = c(() => ({
+    }), p = d(() => ({
       boxSizing: "border-box",
       color: e.color,
       display: e.display,
       flexShrink: "0",
-      height: r.value,
+      height: n.value,
       lineHeight: "0",
-      width: r.value
-    })), f = (n) => {
-      const t = {}, s = Math.random().toString(36).substring(2, 12);
-      return n.replace(/id="([^"]+)"/g, (o, a) => {
-        const l = `${s}-${a}`;
+      width: n.value,
+      ...e.decorative && { pointerEvents: "none" }
+    })), f = (r) => {
+      const t = {}, o = Math.random().toString(36).substring(2, 12);
+      return r.replace(/id="([^"]+)"/g, (s, a) => {
+        const l = `${o}-${a}`;
         return t[a] = l, `id="${l}"`;
-      }).replace(/#([^\s^")]+)/g, (o, a) => t[a] ? `#${t[a]}` : o);
-    }, m = (n) => {
+      }).replace(/#([^\s^")]+)/g, (s, a) => t[a] ? `#${t[a]}` : s);
+    }, m = (r) => {
       const t = {
         "<": "&lt;",
         ">": "&gt;",
@@ -94,25 +95,26 @@ const b = ["aria-hidden"], g = `<path d="M21.6375 5.75623L12.5813 0.543726C12.43
         "'": "&#039;",
         "`": "&#039;"
       };
-      return n.replace(/[<>"'`]/g, (s) => t[s]);
-    }, C = `${e.title ? `<title data-testid="kui-icon-svg-title">${m(e.title)}</title>` : ""}${e.staticIds ? g : f(g)}`;
-    return (n, t) => (d(), S(v(i.as), {
+      return r.replace(/[<>"'`]/g, (o) => t[o]);
+    }, v = `${e.title ? `<title data-testid="kui-icon-svg-title">${m(e.title)}</title>` : ""}${e.staticIds ? g : f(g)}`;
+    return (r, t) => (c(), h(S(i.as), {
       "aria-hidden": i.decorative ? "true" : void 0,
       class: "kui-icon language-c-sharp-icon",
       "data-testid": "kui-icon-wrapper-language-c-sharp-icon",
       style: L(p.value)
     }, {
       default: y(() => [
-        (d(), H("svg", {
+        (c(), H("svg", {
           "aria-hidden": i.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-language-c-sharp-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
+          innerHTML: v
         }, null, 8, b))
       ]),
       _: 1

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

@@ -1 +1 @@
-{"version":3,"file":"kong-icons.es464.js","sources":["../src/components/multi-color/LanguageCSharpIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * LanguageCSharpIcon.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:32 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 = `<path d=\"M21.6375 5.75623L12.5813 0.543726C12.4313 0.449976 12.225 0.412476 12 0.412476C11.775 0.412476 11.5688 0.468726 11.4188 0.543726L2.41875 5.77498C2.1 5.96248 1.875 6.43123 1.875 6.78748V17.2312C1.875 17.4375 1.9125 17.6812 2.0625 17.8875L22.0875 6.26248C21.975 6.03748 21.8063 5.86873 21.6375 5.75623Z\" fill=\"#9B4F96\"/>\n<path d=\"M2.00623 17.8688C2.09998 18.0188 2.23123 18.15 2.36248 18.225L11.4 23.4563C11.55 23.55 11.7562 23.5875 11.9812 23.5875C12.2062 23.5875 12.4125 23.5313 12.5625 23.4563L21.5625 18.225C21.8812 18.0375 22.1062 17.5688 22.1062 17.2125V6.76877C22.1062 6.60002 22.0875 6.41252 21.9937 6.24377L2.00623 17.8688Z\" fill=\"#68217A\"/>\n<path d=\"M15.9937 14.2687C15.2063 15.6562 13.7062 16.5938 12 16.5938C9.46875 16.5938 7.40625 14.5312 7.40625 12C7.40625 9.46875 9.46875 7.40625 12 7.40625C13.7062 7.40625 15.2063 8.34375 15.9937 9.75L18.4312 8.34375C17.1562 6.1125 14.7562 4.59375 12 4.59375C7.9125 4.59375 4.59375 7.9125 4.59375 12C4.59375 16.0875 7.9125 19.4062 12 19.4062C14.7375 19.4062 17.1375 17.9062 18.4125 15.6937L15.9937 14.2687ZM18.1875 12.4125L18.3562 11.6063H17.5687V10.725H18.525L18.75 9.5625H19.6687L19.4437 10.7062H20.1562L20.3812 9.5625H21.2812L21.0562 10.7062H21.5062V11.5875H20.8875L20.7187 12.3937H21.5062V13.275H20.55L20.325 14.4H19.4062L19.6312 13.275H18.9187L18.6937 14.4H17.7937L18.0187 13.275H17.5687V12.3937H18.1875V12.4125ZM19.0875 12.4125H19.8L19.9687 11.6063H19.2562L19.0875 12.4125Z\" fill=\"white\"/>`\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 language-c-sharp-icon\"\n    data-testid=\"kui-icon-wrapper-language-c-sharp-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-language-c-sharp-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,GASzDM,IAAsB,GADJlB,EAAM,QAAQ,2CAA2Ce,EAAWf,EAAM,KAAK,CAAC,aAAa,EACvE,GAAIA,EAAM,YAAuDD,IAA3CS,EAAqBT,CAAkB,CAAsB;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"kong-icons.es464.js","sources":["../src/components/multi-color/LanguageCSharpIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * LanguageCSharpIcon.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 = `<path d=\"M21.6375 5.75623L12.5813 0.543726C12.4313 0.449976 12.225 0.412476 12 0.412476C11.775 0.412476 11.5688 0.468726 11.4188 0.543726L2.41875 5.77498C2.1 5.96248 1.875 6.43123 1.875 6.78748V17.2312C1.875 17.4375 1.9125 17.6812 2.0625 17.8875L22.0875 6.26248C21.975 6.03748 21.8063 5.86873 21.6375 5.75623Z\" fill=\"#9B4F96\"/>\n<path d=\"M2.00623 17.8688C2.09998 18.0188 2.23123 18.15 2.36248 18.225L11.4 23.4563C11.55 23.55 11.7562 23.5875 11.9812 23.5875C12.2062 23.5875 12.4125 23.5313 12.5625 23.4563L21.5625 18.225C21.8812 18.0375 22.1062 17.5688 22.1062 17.2125V6.76877C22.1062 6.60002 22.0875 6.41252 21.9937 6.24377L2.00623 17.8688Z\" fill=\"#68217A\"/>\n<path d=\"M15.9937 14.2687C15.2063 15.6562 13.7062 16.5938 12 16.5938C9.46875 16.5938 7.40625 14.5312 7.40625 12C7.40625 9.46875 9.46875 7.40625 12 7.40625C13.7062 7.40625 15.2063 8.34375 15.9937 9.75L18.4312 8.34375C17.1562 6.1125 14.7562 4.59375 12 4.59375C7.9125 4.59375 4.59375 7.9125 4.59375 12C4.59375 16.0875 7.9125 19.4062 12 19.4062C14.7375 19.4062 17.1375 17.9062 18.4125 15.6937L15.9937 14.2687ZM18.1875 12.4125L18.3562 11.6063H17.5687V10.725H18.525L18.75 9.5625H19.6687L19.4437 10.7062H20.1562L20.3812 9.5625H21.2812L21.0562 10.7062H21.5062V11.5875H20.8875L20.7187 12.3937H21.5062V13.275H20.55L20.325 14.4H19.4062L19.6312 13.275H18.9187L18.6937 14.4H17.7937L18.0187 13.275H17.5687V12.3937H18.1875V12.4125ZM19.0875 12.4125H19.8L19.9687 11.6063H19.2562L19.0875 12.4125Z\" fill=\"white\"/>`\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 language-c-sharp-icon\"\n    data-testid=\"kui-icon-wrapper-language-c-sharp-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-language-c-sharp-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,GASzDM,IAAsB,GADJlB,EAAM,QAAQ,2CAA2Ce,EAAWf,EAAM,KAAK,CAAC,aAAa,EACvE,GAAIA,EAAM,YAAuDD,IAA3CS,EAAqBT,CAAkB,CAAsB;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/kong-icons.es466.js

@@ -1,8 +1,8 @@
-import { defineComponent as S, computed as c, openBlock as d, createBlock as v, resolveDynamicComponent as h, normalizeStyle as y, withCtx as b, createElementBlock as x } from "vue";
+import { defineComponent as v, computed as d, openBlock as c, createBlock as S, resolveDynamicComponent as h, normalizeStyle as y, withCtx as b, createElementBlock as x } from "vue";
 import { KUI_ICON_SIZE_50 as u } from "./kong-icons.es1223.js";
-const z = ["aria-hidden"], g = `<path d="M21.6375 5.75623L12.5813 0.543726C12.4313 0.449976 12.225 0.412476 12 0.412476C11.775 0.412476 11.5688 0.468726 11.4188 0.543726L2.41875 5.77498C2.1 5.96248 1.875 6.43123 1.875 6.78748V17.2312C1.875 17.4375 1.9125 17.6812 2.0625 17.8875L22.0875 6.26248C21.975 6.03748 21.8063 5.86873 21.6375 5.75623Z" fill="#659AD3"/>
+const z = ["aria-hidden", "tabindex"], g = `<path d="M21.6375 5.75623L12.5813 0.543726C12.4313 0.449976 12.225 0.412476 12 0.412476C11.775 0.412476 11.5688 0.468726 11.4188 0.543726L2.41875 5.77498C2.1 5.96248 1.875 6.43123 1.875 6.78748V17.2312C1.875 17.4375 1.9125 17.6812 2.0625 17.8875L22.0875 6.26248C21.975 6.03748 21.8063 5.86873 21.6375 5.75623Z" fill="#659AD3"/>
 <path d="M2.00623 17.8688C2.09998 18.0188 2.23123 18.15 2.36248 18.225L11.4 23.4563C11.55 23.55 11.7562 23.5875 11.9812 23.5875C12.2062 23.5875 12.4125 23.5313 12.5625 23.4563L21.5625 18.225C21.8812 18.0375 22.1062 17.5688 22.1062 17.2125V6.76877C22.1062 6.60002 22.0875 6.41252 21.9937 6.24377L2.00623 17.8688Z" fill="#03599C"/>
-<path d="M15.9938 14.2687C15.2063 15.6562 13.7063 16.5938 12 16.5938C9.46875 16.5938 7.40625 14.5312 7.40625 12C7.40625 9.46875 9.46875 7.40625 12 7.40625C13.7063 7.40625 15.2063 8.34375 15.9938 9.75L18.4313 8.34375C17.1563 6.1125 14.7563 4.59375 12 4.59375C7.9125 4.59375 4.59375 7.9125 4.59375 12C4.59375 16.0875 7.9125 19.4062 12 19.4062C14.7375 19.4062 17.1375 17.9062 18.4125 15.6937L15.9938 14.2687Z" fill="white"/>`, $ = /* @__PURE__ */ S({
+<path d="M15.9938 14.2687C15.2063 15.6562 13.7063 16.5938 12 16.5938C9.46875 16.5938 7.40625 14.5312 7.40625 12C7.40625 9.46875 9.46875 7.40625 12 7.40625C13.7063 7.40625 15.2063 8.34375 15.9938 9.75L18.4313 8.34375C17.1563 6.1125 14.7563 4.59375 12 4.59375C7.9125 4.59375 4.59375 7.9125 4.59375 12C4.59375 16.0875 7.9125 19.4062 12 19.4062C14.7375 19.4062 17.1375 17.9062 18.4125 15.6937L15.9938 14.2687Z" fill="white"/>`, $ = /* @__PURE__ */ v({
   __name: "LanguageCIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -63,7 +63,7 @@ const z = ["aria-hidden"], g = `<path d="M21.6375 5.75623L12.5813 0.543726C12.43
     }
   },
   setup(i) {
-    const e = i, n = c(() => {
+    const e = i, n = d(() => {
       if (typeof e.size == "number" && e.size > 0)
         return `${e.size}px`;
       if (typeof e.size == "string") {
@@ -72,20 +72,21 @@ const z = ["aria-hidden"], g = `<path d="M21.6375 5.75623L12.5813 0.543726C12.43
           return `${t}px`;
       }
       return u;
-    }), p = c(() => ({
+    }), p = d(() => ({
       boxSizing: "border-box",
       color: e.color,
       display: e.display,
       flexShrink: "0",
       height: n.value,
       lineHeight: "0",
-      width: n.value
+      width: n.value,
+      ...e.decorative && { pointerEvents: "none" }
     })), f = (r) => {
-      const t = {}, s = Math.random().toString(36).substring(2, 12);
-      return r.replace(/id="([^"]+)"/g, (a, o) => {
-        const l = `${s}-${o}`;
+      const t = {}, a = Math.random().toString(36).substring(2, 12);
+      return r.replace(/id="([^"]+)"/g, (s, o) => {
+        const l = `${a}-${o}`;
         return t[o] = l, `id="${l}"`;
-      }).replace(/#([^\s^")]+)/g, (a, o) => t[o] ? `#${t[o]}` : a);
+      }).replace(/#([^\s^")]+)/g, (s, o) => t[o] ? `#${t[o]}` : s);
     }, m = (r) => {
       const t = {
         "<": "&lt;",
@@ -94,21 +95,22 @@ const z = ["aria-hidden"], g = `<path d="M21.6375 5.75623L12.5813 0.543726C12.43
         "'": "&#039;",
         "`": "&#039;"
       };
-      return r.replace(/[<>"'`]/g, (s) => t[s]);
+      return r.replace(/[<>"'`]/g, (a) => t[a]);
     }, C = `${e.title ? `<title data-testid="kui-icon-svg-title">${m(e.title)}</title>` : ""}${e.staticIds ? g : f(g)}`;
-    return (r, t) => (d(), v(h(i.as), {
+    return (r, t) => (c(), S(h(i.as), {
       "aria-hidden": i.decorative ? "true" : void 0,
       class: "kui-icon language-c-icon",
       "data-testid": "kui-icon-wrapper-language-c-icon",
       style: y(p.value)
     }, {
       default: b(() => [
-        (d(), x("svg", {
+        (c(), x("svg", {
           "aria-hidden": i.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-language-c-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",

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

@@ -1 +1 @@
-{"version":3,"file":"kong-icons.es466.js","sources":["../src/components/multi-color/LanguageCIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * LanguageCIcon.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:32 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 = `<path d=\"M21.6375 5.75623L12.5813 0.543726C12.4313 0.449976 12.225 0.412476 12 0.412476C11.775 0.412476 11.5688 0.468726 11.4188 0.543726L2.41875 5.77498C2.1 5.96248 1.875 6.43123 1.875 6.78748V17.2312C1.875 17.4375 1.9125 17.6812 2.0625 17.8875L22.0875 6.26248C21.975 6.03748 21.8063 5.86873 21.6375 5.75623Z\" fill=\"#659AD3\"/>\n<path d=\"M2.00623 17.8688C2.09998 18.0188 2.23123 18.15 2.36248 18.225L11.4 23.4563C11.55 23.55 11.7562 23.5875 11.9812 23.5875C12.2062 23.5875 12.4125 23.5313 12.5625 23.4563L21.5625 18.225C21.8812 18.0375 22.1062 17.5688 22.1062 17.2125V6.76877C22.1062 6.60002 22.0875 6.41252 21.9937 6.24377L2.00623 17.8688Z\" fill=\"#03599C\"/>\n<path d=\"M15.9938 14.2687C15.2063 15.6562 13.7063 16.5938 12 16.5938C9.46875 16.5938 7.40625 14.5312 7.40625 12C7.40625 9.46875 9.46875 7.40625 12 7.40625C13.7063 7.40625 15.2063 8.34375 15.9938 9.75L18.4313 8.34375C17.1563 6.1125 14.7563 4.59375 12 4.59375C7.9125 4.59375 4.59375 7.9125 4.59375 12C4.59375 16.0875 7.9125 19.4062 12 19.4062C14.7375 19.4062 17.1375 17.9062 18.4125 15.6937L15.9938 14.2687Z\" fill=\"white\"/>`\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 language-c-icon\"\n    data-testid=\"kui-icon-wrapper-language-c-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-language-c-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,GASzDM,IAAsB,GADJlB,EAAM,QAAQ,2CAA2Ce,EAAWf,EAAM,KAAK,CAAC,aAAa,EACvE,GAAIA,EAAM,YAAuDD,IAA3CS,EAAqBT,CAAkB,CAAsB;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"kong-icons.es466.js","sources":["../src/components/multi-color/LanguageCIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * LanguageCIcon.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 = `<path d=\"M21.6375 5.75623L12.5813 0.543726C12.4313 0.449976 12.225 0.412476 12 0.412476C11.775 0.412476 11.5688 0.468726 11.4188 0.543726L2.41875 5.77498C2.1 5.96248 1.875 6.43123 1.875 6.78748V17.2312C1.875 17.4375 1.9125 17.6812 2.0625 17.8875L22.0875 6.26248C21.975 6.03748 21.8063 5.86873 21.6375 5.75623Z\" fill=\"#659AD3\"/>\n<path d=\"M2.00623 17.8688C2.09998 18.0188 2.23123 18.15 2.36248 18.225L11.4 23.4563C11.55 23.55 11.7562 23.5875 11.9812 23.5875C12.2062 23.5875 12.4125 23.5313 12.5625 23.4563L21.5625 18.225C21.8812 18.0375 22.1062 17.5688 22.1062 17.2125V6.76877C22.1062 6.60002 22.0875 6.41252 21.9937 6.24377L2.00623 17.8688Z\" fill=\"#03599C\"/>\n<path d=\"M15.9938 14.2687C15.2063 15.6562 13.7063 16.5938 12 16.5938C9.46875 16.5938 7.40625 14.5312 7.40625 12C7.40625 9.46875 9.46875 7.40625 12 7.40625C13.7063 7.40625 15.2063 8.34375 15.9938 9.75L18.4313 8.34375C17.1563 6.1125 14.7563 4.59375 12 4.59375C7.9125 4.59375 4.59375 7.9125 4.59375 12C4.59375 16.0875 7.9125 19.4062 12 19.4062C14.7375 19.4062 17.1375 17.9062 18.4125 15.6937L15.9938 14.2687Z\" fill=\"white\"/>`\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 language-c-icon\"\n    data-testid=\"kui-icon-wrapper-language-c-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-language-c-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,GASzDM,IAAsB,GADJlB,EAAM,QAAQ,2CAA2Ce,EAAWf,EAAM,KAAK,CAAC,aAAa,EACvE,GAAIA,EAAM,YAAuDD,IAA3CS,EAAqBT,CAAkB,CAAsB;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/kong-icons.es468.js

@@ -1,6 +1,6 @@
 import { defineComponent as _, computed as d, openBlock as k, createBlock as o, resolveDynamicComponent as f, normalizeStyle as y, withCtx as M, createElementBlock as H } from "vue";
 import { KUI_ICON_SIZE_50 as h } from "./kong-icons.es1223.js";
-const Z = ["aria-hidden"], r = `<mask id="mask0_2_1240" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="3" y="0" width="18" height="24">
+const Z = ["aria-hidden", "tabindex"], r = `<mask id="mask0_2_1240" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="3" y="0" width="18" height="24">
 <path d="M3.52502 0.1875H20.4938V23.8125H3.52502V0.1875Z" fill="white"/>
 </mask>
 <g mask="url(#mask0_2_1240)">
@@ -274,13 +274,14 @@ const Z = ["aria-hidden"], r = `<mask id="mask0_2_1240" style="mask-type:luminan
       flexShrink: "0",
       height: t.value,
       lineHeight: "0",
-      width: t.value
+      width: t.value,
+      ...e.decorative && { pointerEvents: "none" }
     })), p = (i) => {
       const a = {}, m = Math.random().toString(36).substring(2, 12);
-      return i.replace(/id="([^"]+)"/g, (C, l) => {
-        const n = `${m}-${l}`;
-        return a[l] = n, `id="${n}"`;
-      }).replace(/#([^\s^")]+)/g, (C, l) => a[l] ? `#${a[l]}` : C);
+      return i.replace(/id="([^"]+)"/g, (n, l) => {
+        const C = `${m}-${l}`;
+        return a[l] = C, `id="${C}"`;
+      }).replace(/#([^\s^")]+)/g, (n, l) => a[l] ? `#${a[l]}` : n);
     }, c = (i) => {
       const a = {
         "<": "&lt;",
@@ -304,6 +305,7 @@ const Z = ["aria-hidden"], r = `<mask id="mask0_2_1240" style="mask-type:luminan
           fill: "none",
           height: "100%",
           role: "img",
+          tabindex: s.decorative ? "-1" : void 0,
           viewBox: "0 0 24 24",
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg",