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

package/dist/kong-icons.es712.js

@@ -1,6 +1,6 @@
-import { defineComponent as C, computed as c, openBlock as d, createBlock as S, resolveDynamicComponent as h, normalizeStyle as y, withCtx as b, createElementBlock as x } from "vue";
+import { defineComponent as C, computed as c, openBlock as l, 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 N = ["aria-hidden"], g = '<path d="M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z" fill="currentColor"/>', H = /* @__PURE__ */ C({
+const N = ["aria-hidden", "tabindex"], g = '<path d="M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z" fill="currentColor"/>', H = /* @__PURE__ */ C({
   __name: "NotificationIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -70,7 +70,7 @@ const N = ["aria-hidden"], g = '<path d="M4 19V17H6V10C6 8.61667 6.41667 7.3875
           return `${t}px`;
       }
       return u;
-    }), p = c(() => ({
+    }), f = c(() => ({
       boxSizing: "border-box",
       color: e.color,
       display: e.display,
@@ -78,14 +78,14 @@ const N = ["aria-hidden"], g = '<path d="M4 19V17H6V10C6 8.61667 6.41667 7.3875
       height: n.value,
       lineHeight: "0",
       width: n.value,
-      pointerEvents: e.decorative ? "none" : "all"
-    })), f = (r) => {
-      const t = {}, s = Math.random().toString(36).substring(2, 12);
-      return r.replace(/id="([^"]+)"/g, (a, o) => {
-        const l = `${s}-${o}`;
-        return t[o] = l, `id="${l}"`;
-      }).replace(/#([^\s^")]+)/g, (a, o) => t[o] ? `#${t[o]}` : a);
-    }, m = (r) => {
+      ...e.decorative && { pointerEvents: "none" }
+    })), p = (r) => {
+      const t = {}, a = Math.random().toString(36).substring(2, 12);
+      return r.replace(/id="([^"]+)"/g, (s, o) => {
+        const d = `${a}-${o}`;
+        return t[o] = d, `id="${d}"`;
+      }).replace(/#([^\s^")]+)/g, (s, o) => t[o] ? `#${t[o]}` : s);
+    }, v = (r) => {
       const t = {
         "<": "&lt;",
         ">": "&gt;",
@@ -93,29 +93,31 @@ const N = ["aria-hidden"], g = '<path d="M4 19V17H6V10C6 8.61667 6.41667 7.3875
         "'": "&#039;",
         "`": "&#039;"
       };
-      return r.replace(/[<>"'`]/g, (s) => t[s]);
-    }, v = `${e.title ? `<title data-testid="kui-icon-svg-title">${m(e.title)}</title>` : ""}${e.staticIds ? g : f(g)}`;
-    return (r, t) => (d(), S(h(i.as), {
+      return r.replace(/[<>"'`]/g, (a) => t[a]);
+    }, m = `${e.title ? `<title data-testid="kui-icon-svg-title">${v(e.title)}</title>` : ""}${e.staticIds ? g : p(g)}`;
+    return (r, t) => (l(), S(h(i.as), {
       "aria-hidden": i.decorative ? "true" : void 0,
       class: "kui-icon notification-icon",
       "data-testid": "kui-icon-wrapper-notification-icon",
-      style: y(p.value)
+      style: y(f.value),
+      tabindex: i.decorative ? "-1" : void 0
     }, {
       default: b(() => [
-        (d(), x("svg", {
+        (l(), x("svg", {
           "aria-hidden": i.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-notification-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: v
+          innerHTML: m
         }, null, 8, N))
       ]),
       _: 1
-    }, 8, ["aria-hidden", "style"]));
+    }, 8, ["aria-hidden", "style", "tabindex"]));
   }
 });
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"kong-icons.es712.js","sources":["../src/components/solid/NotificationIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * NotificationIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Wed, 30 Oct 2024 13:57:09 GMT\n *\n * GitHub: https://github.com/Kong/icons\n * License: Apache-2.0\n */\n\nimport { computed } from 'vue'\nimport { KUI_ICON_SIZE_50 } from '@kong/design-tokens'\n\nconst props = defineProps({\n  /** The accessibility text provided to screen readers */\n  title: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  /** The icon color. Defaults to `currentColor` which inherits text color from the parent element */\n  color: {\n    type: String,\n    required: false,\n    default: 'currentColor',\n  },\n  /** The CSS display property for the icon. Defaults to `block` */\n  display: {\n    type: String,\n    required: false,\n    default: 'block',\n  },\n  /** Whether the icon is just eye-candy or is meaningful to the page (should screen-readers ignore the icon?) */\n  decorative: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  /** The icon size */\n  size: {\n    type: [Number, String],\n    required: false,\n    default: KUI_ICON_SIZE_50, // if setting to the imported const fails, just pass a number of 24 as the default.\n    validator: (sizeValue: number | string): boolean => {\n      if (typeof sizeValue === 'number' && sizeValue > 0) {\n        return true\n      }\n\n      if (typeof sizeValue === 'string') {\n        // Strip `px` from the string\n        const sanitizedSize = String(sizeValue).replace(/px/gi, '')\n        const sizeNumber = Number(sanitizedSize)\n        if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n          return true\n        }\n      }\n\n      return false\n    },\n  },\n  /** The HTML tag to utilize for the icon's wrapper element. Defaults to `span` */\n  as: {\n    type: String,\n    required: false,\n    default: 'span',\n  },\n  /**\n   * A boolean to disable prefixing any internal SVG ids with a unique string which is done to resolve the potential for multiple SVG instances on the same page and the SVG utilizing the same ids and references internally (e.g. in the `<defs>` tag).\n   * Typically only set to `true` during snapshot testing.\n   * Defaults to `false`.\n   */\n  staticIds: {\n    type: Boolean,\n    default: false,\n  },\n})\n\nconst iconSize = computed((): string => {\n  // If props.size is a number, ensure it's greater than zero\n  if (typeof props.size === 'number' && props.size > 0) {\n    return `${props.size}px`\n  }\n\n  if (typeof props.size === 'string') {\n    // Strip `px` from the string\n    const sanitizedSize = String(props.size).replace(/px/gi, '')\n    const sizeNumber = Number(sanitizedSize)\n    if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n      return `${sizeNumber}px`\n    }\n  }\n\n  // Return the default icon size\n  return KUI_ICON_SIZE_50\n})\n\n/**\n * We are adding styles inline to avoid additional stylesheet imports in the host application/component.\n * All of the properties should be mapped to component props for customization.\n */\nconst rootElementStyles = computed((): Record<string, string> => ({\n  boxSizing: 'border-box',\n  color: props.color,\n  display: props.display,\n  flexShrink: '0',\n  height: iconSize.value,\n  lineHeight: '0',\n  width: iconSize.value,\n  pointerEvents: props.decorative ? 'none' : 'all',\n}))\n\n/**\n * Prefix all SVG IDs in the given SVG string with a random prefix to ensure uniqueness.\n *\n * This function performs the following steps:\n * 1. Generates a random prefix.\n * 2. Replaces all `id` attributes in the SVG string with the new prefixed IDs.\n * 3. Updates all ID references (e.g., `url(#id)`, `href=\"#id\"`, etc.) to use the new prefixed IDs.\n *\n * @param {string} svgString - The SVG string in which to prefix IDs.\n * @returns {string} - The SVG string with prefixed IDs.\n */\nconst prefixSvgIdsInString = (svgString: string): string => {\n  const idMap: Record<string, string> = {}\n  const randomPrefix = Math.random().toString(36).substring(2, 12)\n\n  // Replace IDs in the SVG string\n  const updatedSvgString = svgString.replace(/id=\"([^\"]+)\"/g, (match, originalId) => {\n    const newId = `${randomPrefix}-${originalId}`\n    idMap[originalId] = newId\n    return `id=\"${newId}\"`\n  })\n\n  // Replace ID references (e.g., url(#id), href=\"#id\", etc.)\n  const processedSvgString = updatedSvgString.replace(/#([^\\s^\")]+)/g, (match, originalId) => idMap[originalId] ? `#${idMap[originalId]}` : match)\n\n  // Return the processed SVG string\n  return processedSvgString\n}\n\nconst escapeHtml = (str: string) => {\n  const htmlEntities: { [key: string]: string } = {\n    '<': '&lt;',\n    '>': '&gt;',\n    '\"': '&quot;',\n    \"'\": '&#039;',\n    '`': '&#039;',\n  }\n\n  return str.replace(/[<>\"'`]/g, (match) => htmlEntities[match])\n}\n\n// The `svgOriginalContent` template string will be replaced with the SVG innerHTML in the generate script.\n// eslint-disable-next-line @stylistic/quotes\nconst svgOriginalContent = `<path d=\"M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z\" fill=\"currentColor\"/>`\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 notification-icon\"\n    data-testid=\"kui-icon-wrapper-notification-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-notification-icon\"\n      fill=\"none\"\n      height=\"100%\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      width=\"100%\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      v-html=\"svgProcessedContent\"\n    />\n  </component>\n</template>\n\n<style>\n/**\n * !Important: Do not add styles into this component file.\n *\n * We are adding styles inline to avoid additional stylesheet imports in the consuming application/component.\n */\n</style>\n"],"names":["svgOriginalContent","props","__props","iconSize","computed","sanitizedSize","sizeNumber","KUI_ICON_SIZE_50","rootElementStyles","prefixSvgIdsInString","svgString","idMap","randomPrefix","match","originalId","newId","escapeHtml","str","htmlEntities","svgProcessedContent"],"mappings":";;2BA0JMA,IAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA7I3B,UAAMC,IAAQC,GAgERC,IAAWC,EAAS,MAAc;AAEtC,UAAI,OAAOH,EAAM,QAAS,YAAYA,EAAM,OAAO;AAC1C,eAAA,GAAGA,EAAM,IAAI;AAGlB,UAAA,OAAOA,EAAM,QAAS,UAAU;AAElC,cAAMI,IAAgB,OAAOJ,EAAM,IAAI,EAAE,QAAQ,QAAQ,EAAE,GACrDK,IAAa,OAAOD,CAAa;AACnC,YAAAC,KAAc,CAAC,MAAMA,CAAU,KAAK,OAAO,UAAUA,CAAU,KAAKA,IAAa;AACnF,iBAAO,GAAGA,CAAU;AAAA,MAExB;AAGO,aAAAC;AAAA,IAAA,CACR,GAMKC,IAAoBJ,EAAS,OAA+B;AAAA,MAChE,WAAW;AAAA,MACX,OAAOH,EAAM;AAAA,MACb,SAASA,EAAM;AAAA,MACf,YAAY;AAAA,MACZ,QAAQE,EAAS;AAAA,MACjB,YAAY;AAAA,MACZ,OAAOA,EAAS;AAAA,MAChB,eAAeF,EAAM,aAAa,SAAS;AAAA,IAC3C,EAAA,GAaIQ,IAAuB,CAACC,MAA8B;AAC1D,YAAMC,IAAgC,CAAA,GAChCC,IAAe,KAAK,SAAS,SAAS,EAAE,EAAE,UAAU,GAAG,EAAE;AAaxD,aAVkBF,EAAU,QAAQ,iBAAiB,CAACG,GAAOC,MAAe;AACjF,cAAMC,IAAQ,GAAGH,CAAY,IAAIE,CAAU;AAC3C,eAAAH,EAAMG,CAAU,IAAIC,GACb,OAAOA,CAAK;AAAA,MAAA,CACpB,EAG2C,QAAQ,iBAAiB,CAACF,GAAOC,MAAeH,EAAMG,CAAU,IAAI,IAAIH,EAAMG,CAAU,CAAC,KAAKD,CAAK;AAAA,IAGxI,GAGHG,IAAa,CAACC,MAAgB;AAClC,YAAMC,IAA0C;AAAA,QAC9C,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,MAAA;AAGP,aAAOD,EAAI,QAAQ,YAAY,CAACJ,MAAUK,EAAaL,CAAK,CAAC;AAAA,IAAA,GAOzDM,IAAsB,GADJlB,EAAM,QAAQ,2CAA2Ce,EAAWf,EAAM,KAAK,CAAC,aAAa,EACvE,GAAIA,EAAM,YAAuDD,IAA3CS,EAAqBT,CAAkB,CAAsB;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"kong-icons.es712.js","sources":["../src/components/solid/NotificationIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * NotificationIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Wed, 30 Oct 2024 15:04:56 GMT\n *\n * GitHub: https://github.com/Kong/icons\n * License: Apache-2.0\n */\n\nimport { computed } from 'vue'\nimport { KUI_ICON_SIZE_50 } from '@kong/design-tokens'\n\nconst props = defineProps({\n  /** The accessibility text provided to screen readers */\n  title: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  /** The icon color. Defaults to `currentColor` which inherits text color from the parent element */\n  color: {\n    type: String,\n    required: false,\n    default: 'currentColor',\n  },\n  /** The CSS display property for the icon. Defaults to `block` */\n  display: {\n    type: String,\n    required: false,\n    default: 'block',\n  },\n  /** Whether the icon is just eye-candy or is meaningful to the page (should screen-readers ignore the icon?) */\n  decorative: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  /** The icon size */\n  size: {\n    type: [Number, String],\n    required: false,\n    default: KUI_ICON_SIZE_50, // if setting to the imported const fails, just pass a number of 24 as the default.\n    validator: (sizeValue: number | string): boolean => {\n      if (typeof sizeValue === 'number' && sizeValue > 0) {\n        return true\n      }\n\n      if (typeof sizeValue === 'string') {\n        // Strip `px` from the string\n        const sanitizedSize = String(sizeValue).replace(/px/gi, '')\n        const sizeNumber = Number(sanitizedSize)\n        if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n          return true\n        }\n      }\n\n      return false\n    },\n  },\n  /** The HTML tag to utilize for the icon's wrapper element. Defaults to `span` */\n  as: {\n    type: String,\n    required: false,\n    default: 'span',\n  },\n  /**\n   * A boolean to disable prefixing any internal SVG ids with a unique string which is done to resolve the potential for multiple SVG instances on the same page and the SVG utilizing the same ids and references internally (e.g. in the `<defs>` tag).\n   * Typically only set to `true` during snapshot testing.\n   * Defaults to `false`.\n   */\n  staticIds: {\n    type: Boolean,\n    default: false,\n  },\n})\n\nconst iconSize = computed((): string => {\n  // If props.size is a number, ensure it's greater than zero\n  if (typeof props.size === 'number' && props.size > 0) {\n    return `${props.size}px`\n  }\n\n  if (typeof props.size === 'string') {\n    // Strip `px` from the string\n    const sanitizedSize = String(props.size).replace(/px/gi, '')\n    const sizeNumber = Number(sanitizedSize)\n    if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n      return `${sizeNumber}px`\n    }\n  }\n\n  // Return the default icon size\n  return KUI_ICON_SIZE_50\n})\n\n/**\n * We are adding styles inline to avoid additional stylesheet imports in the host application/component.\n * All of the properties should be mapped to component props for customization.\n */\nconst rootElementStyles = computed((): Record<string, string> => ({\n  boxSizing: 'border-box',\n  color: props.color,\n  display: props.display,\n  flexShrink: '0',\n  height: iconSize.value,\n  lineHeight: '0',\n  width: iconSize.value,\n  ...(props.decorative && { pointerEvents: 'none' }),\n}))\n\n/**\n * Prefix all SVG IDs in the given SVG string with a random prefix to ensure uniqueness.\n *\n * This function performs the following steps:\n * 1. Generates a random prefix.\n * 2. Replaces all `id` attributes in the SVG string with the new prefixed IDs.\n * 3. Updates all ID references (e.g., `url(#id)`, `href=\"#id\"`, etc.) to use the new prefixed IDs.\n *\n * @param {string} svgString - The SVG string in which to prefix IDs.\n * @returns {string} - The SVG string with prefixed IDs.\n */\nconst prefixSvgIdsInString = (svgString: string): string => {\n  const idMap: Record<string, string> = {}\n  const randomPrefix = Math.random().toString(36).substring(2, 12)\n\n  // Replace IDs in the SVG string\n  const updatedSvgString = svgString.replace(/id=\"([^\"]+)\"/g, (match, originalId) => {\n    const newId = `${randomPrefix}-${originalId}`\n    idMap[originalId] = newId\n    return `id=\"${newId}\"`\n  })\n\n  // Replace ID references (e.g., url(#id), href=\"#id\", etc.)\n  const processedSvgString = updatedSvgString.replace(/#([^\\s^\")]+)/g, (match, originalId) => idMap[originalId] ? `#${idMap[originalId]}` : match)\n\n  // Return the processed SVG string\n  return processedSvgString\n}\n\nconst escapeHtml = (str: string) => {\n  const htmlEntities: { [key: string]: string } = {\n    '<': '&lt;',\n    '>': '&gt;',\n    '\"': '&quot;',\n    \"'\": '&#039;',\n    '`': '&#039;',\n  }\n\n  return str.replace(/[<>\"'`]/g, (match) => htmlEntities[match])\n}\n\n// The `svgOriginalContent` template string will be replaced with the SVG innerHTML in the generate script.\n// eslint-disable-next-line @stylistic/quotes\nconst svgOriginalContent = `<path d=\"M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z\" fill=\"currentColor\"/>`\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 notification-icon\"\n    data-testid=\"kui-icon-wrapper-notification-icon\"\n    :style=\"rootElementStyles\"\n    :tabindex=\"decorative ? '-1' : undefined\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-notification-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,GAOzDM,IAAsB,GADJlB,EAAM,QAAQ,2CAA2Ce,EAAWf,EAAM,KAAK,CAAC,aAAa,EACvE,GAAIA,EAAM,YAAuDD,IAA3CS,EAAqBT,CAAkB,CAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/kong-icons.es714.js

@@ -1,6 +1,6 @@
-import { defineComponent as S, computed as c, openBlock as d, createBlock as h, resolveDynamicComponent as H, normalizeStyle as y, withCtx as z, createElementBlock as b } from "vue";
+import { defineComponent as S, computed as l, openBlock as c, createBlock as h, 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 x = ["aria-hidden"], g = '<path d="M2 21V3H12V7H22V21H2ZM4 19H10V17H4V19ZM4 15H10V13H4V15ZM4 11H10V9H4V11ZM4 7H10V5H4V7ZM12 19H20V9H12V19ZM14 13V11H18V13H14ZM14 17V15H18V17H14Z" fill="currentColor"/>', k = /* @__PURE__ */ S({
+const z = ["aria-hidden", "tabindex"], g = '<path d="M2 21V3H12V7H22V21H2ZM4 19H10V17H4V19ZM4 15H10V13H4V15ZM4 11H10V9H4V11ZM4 7H10V5H4V7ZM12 19H20V9H12V19ZM14 13V11H18V13H14ZM14 17V15H18V17H14Z" fill="currentColor"/>', k = /* @__PURE__ */ S({
   __name: "OrganizationIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -61,7 +61,7 @@ const x = ["aria-hidden"], g = '<path d="M2 21V3H12V7H22V21H2ZM4 19H10V17H4V19ZM
     }
   },
   setup(i) {
-    const e = i, n = c(() => {
+    const e = i, n = l(() => {
       if (typeof e.size == "number" && e.size > 0)
         return `${e.size}px`;
       if (typeof e.size == "string") {
@@ -70,7 +70,7 @@ const x = ["aria-hidden"], g = '<path d="M2 21V3H12V7H22V21H2ZM4 19H10V17H4V19ZM
           return `${t}px`;
       }
       return u;
-    }), p = c(() => ({
+    }), p = l(() => ({
       boxSizing: "border-box",
       color: e.color,
       display: e.display,
@@ -78,14 +78,14 @@ const x = ["aria-hidden"], g = '<path d="M2 21V3H12V7H22V21H2ZM4 19H10V17H4V19ZM
       height: n.value,
       lineHeight: "0",
       width: n.value,
-      pointerEvents: e.decorative ? "none" : "all"
+      ...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}`;
-        return t[o] = l, `id="${l}"`;
-      }).replace(/#([^\s^")]+)/g, (a, o) => t[o] ? `#${t[o]}` : a);
-    }, m = (r) => {
+      const t = {}, a = Math.random().toString(36).substring(2, 12);
+      return r.replace(/id="([^"]+)"/g, (s, o) => {
+        const d = `${a}-${o}`;
+        return t[o] = d, `id="${d}"`;
+      }).replace(/#([^\s^")]+)/g, (s, o) => t[o] ? `#${t[o]}` : s);
+    }, v = (r) => {
       const t = {
         "<": "&lt;",
         ">": "&gt;",
@@ -93,29 +93,31 @@ const x = ["aria-hidden"], g = '<path d="M2 21V3H12V7H22V21H2ZM4 19H10V17H4V19ZM
         "'": "&#039;",
         "`": "&#039;"
       };
-      return r.replace(/[<>"'`]/g, (s) => t[s]);
-    }, v = `${e.title ? `<title data-testid="kui-icon-svg-title">${m(e.title)}</title>` : ""}${e.staticIds ? g : f(g)}`;
-    return (r, t) => (d(), h(H(i.as), {
+      return r.replace(/[<>"'`]/g, (a) => t[a]);
+    }, m = `${e.title ? `<title data-testid="kui-icon-svg-title">${v(e.title)}</title>` : ""}${e.staticIds ? g : f(g)}`;
+    return (r, t) => (c(), h(H(i.as), {
       "aria-hidden": i.decorative ? "true" : void 0,
       class: "kui-icon organization-icon",
       "data-testid": "kui-icon-wrapper-organization-icon",
-      style: y(p.value)
+      style: y(p.value),
+      tabindex: i.decorative ? "-1" : void 0
     }, {
-      default: z(() => [
-        (d(), b("svg", {
+      default: b(() => [
+        (c(), x("svg", {
           "aria-hidden": i.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-organization-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: v
-        }, null, 8, x))
+          innerHTML: m
+        }, null, 8, z))
       ]),
       _: 1
-    }, 8, ["aria-hidden", "style"]));
+    }, 8, ["aria-hidden", "style", "tabindex"]));
   }
 });
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"kong-icons.es714.js","sources":["../src/components/solid/OrganizationIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * OrganizationIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Wed, 30 Oct 2024 13:57:09 GMT\n *\n * GitHub: https://github.com/Kong/icons\n * License: Apache-2.0\n */\n\nimport { computed } from 'vue'\nimport { KUI_ICON_SIZE_50 } from '@kong/design-tokens'\n\nconst props = defineProps({\n  /** The accessibility text provided to screen readers */\n  title: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  /** The icon color. Defaults to `currentColor` which inherits text color from the parent element */\n  color: {\n    type: String,\n    required: false,\n    default: 'currentColor',\n  },\n  /** The CSS display property for the icon. Defaults to `block` */\n  display: {\n    type: String,\n    required: false,\n    default: 'block',\n  },\n  /** Whether the icon is just eye-candy or is meaningful to the page (should screen-readers ignore the icon?) */\n  decorative: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  /** The icon size */\n  size: {\n    type: [Number, String],\n    required: false,\n    default: KUI_ICON_SIZE_50, // if setting to the imported const fails, just pass a number of 24 as the default.\n    validator: (sizeValue: number | string): boolean => {\n      if (typeof sizeValue === 'number' && sizeValue > 0) {\n        return true\n      }\n\n      if (typeof sizeValue === 'string') {\n        // Strip `px` from the string\n        const sanitizedSize = String(sizeValue).replace(/px/gi, '')\n        const sizeNumber = Number(sanitizedSize)\n        if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n          return true\n        }\n      }\n\n      return false\n    },\n  },\n  /** The HTML tag to utilize for the icon's wrapper element. Defaults to `span` */\n  as: {\n    type: String,\n    required: false,\n    default: 'span',\n  },\n  /**\n   * A boolean to disable prefixing any internal SVG ids with a unique string which is done to resolve the potential for multiple SVG instances on the same page and the SVG utilizing the same ids and references internally (e.g. in the `<defs>` tag).\n   * Typically only set to `true` during snapshot testing.\n   * Defaults to `false`.\n   */\n  staticIds: {\n    type: Boolean,\n    default: false,\n  },\n})\n\nconst iconSize = computed((): string => {\n  // If props.size is a number, ensure it's greater than zero\n  if (typeof props.size === 'number' && props.size > 0) {\n    return `${props.size}px`\n  }\n\n  if (typeof props.size === 'string') {\n    // Strip `px` from the string\n    const sanitizedSize = String(props.size).replace(/px/gi, '')\n    const sizeNumber = Number(sanitizedSize)\n    if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n      return `${sizeNumber}px`\n    }\n  }\n\n  // Return the default icon size\n  return KUI_ICON_SIZE_50\n})\n\n/**\n * We are adding styles inline to avoid additional stylesheet imports in the host application/component.\n * All of the properties should be mapped to component props for customization.\n */\nconst rootElementStyles = computed((): Record<string, string> => ({\n  boxSizing: 'border-box',\n  color: props.color,\n  display: props.display,\n  flexShrink: '0',\n  height: iconSize.value,\n  lineHeight: '0',\n  width: iconSize.value,\n  pointerEvents: props.decorative ? 'none' : 'all',\n}))\n\n/**\n * Prefix all SVG IDs in the given SVG string with a random prefix to ensure uniqueness.\n *\n * This function performs the following steps:\n * 1. Generates a random prefix.\n * 2. Replaces all `id` attributes in the SVG string with the new prefixed IDs.\n * 3. Updates all ID references (e.g., `url(#id)`, `href=\"#id\"`, etc.) to use the new prefixed IDs.\n *\n * @param {string} svgString - The SVG string in which to prefix IDs.\n * @returns {string} - The SVG string with prefixed IDs.\n */\nconst prefixSvgIdsInString = (svgString: string): string => {\n  const idMap: Record<string, string> = {}\n  const randomPrefix = Math.random().toString(36).substring(2, 12)\n\n  // Replace IDs in the SVG string\n  const updatedSvgString = svgString.replace(/id=\"([^\"]+)\"/g, (match, originalId) => {\n    const newId = `${randomPrefix}-${originalId}`\n    idMap[originalId] = newId\n    return `id=\"${newId}\"`\n  })\n\n  // Replace ID references (e.g., url(#id), href=\"#id\", etc.)\n  const processedSvgString = updatedSvgString.replace(/#([^\\s^\")]+)/g, (match, originalId) => idMap[originalId] ? `#${idMap[originalId]}` : match)\n\n  // Return the processed SVG string\n  return processedSvgString\n}\n\nconst escapeHtml = (str: string) => {\n  const htmlEntities: { [key: string]: string } = {\n    '<': '&lt;',\n    '>': '&gt;',\n    '\"': '&quot;',\n    \"'\": '&#039;',\n    '`': '&#039;',\n  }\n\n  return str.replace(/[<>\"'`]/g, (match) => htmlEntities[match])\n}\n\n// The `svgOriginalContent` template string will be replaced with the SVG innerHTML in the generate script.\n// eslint-disable-next-line @stylistic/quotes\nconst svgOriginalContent = `<path d=\"M2 21V3H12V7H22V21H2ZM4 19H10V17H4V19ZM4 15H10V13H4V15ZM4 11H10V9H4V11ZM4 7H10V5H4V7ZM12 19H20V9H12V19ZM14 13V11H18V13H14ZM14 17V15H18V17H14Z\" fill=\"currentColor\"/>`\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 organization-icon\"\n    data-testid=\"kui-icon-wrapper-organization-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-organization-icon\"\n      fill=\"none\"\n      height=\"100%\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      width=\"100%\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      v-html=\"svgProcessedContent\"\n    />\n  </component>\n</template>\n\n<style>\n/**\n * !Important: Do not add styles into this component file.\n *\n * We are adding styles inline to avoid additional stylesheet imports in the consuming application/component.\n */\n</style>\n"],"names":["svgOriginalContent","props","__props","iconSize","computed","sanitizedSize","sizeNumber","KUI_ICON_SIZE_50","rootElementStyles","prefixSvgIdsInString","svgString","idMap","randomPrefix","match","originalId","newId","escapeHtml","str","htmlEntities","svgProcessedContent"],"mappings":";;2BA0JMA,IAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA7I3B,UAAMC,IAAQC,GAgERC,IAAWC,EAAS,MAAc;AAEtC,UAAI,OAAOH,EAAM,QAAS,YAAYA,EAAM,OAAO;AAC1C,eAAA,GAAGA,EAAM,IAAI;AAGlB,UAAA,OAAOA,EAAM,QAAS,UAAU;AAElC,cAAMI,IAAgB,OAAOJ,EAAM,IAAI,EAAE,QAAQ,QAAQ,EAAE,GACrDK,IAAa,OAAOD,CAAa;AACnC,YAAAC,KAAc,CAAC,MAAMA,CAAU,KAAK,OAAO,UAAUA,CAAU,KAAKA,IAAa;AACnF,iBAAO,GAAGA,CAAU;AAAA,MAExB;AAGO,aAAAC;AAAA,IAAA,CACR,GAMKC,IAAoBJ,EAAS,OAA+B;AAAA,MAChE,WAAW;AAAA,MACX,OAAOH,EAAM;AAAA,MACb,SAASA,EAAM;AAAA,MACf,YAAY;AAAA,MACZ,QAAQE,EAAS;AAAA,MACjB,YAAY;AAAA,MACZ,OAAOA,EAAS;AAAA,MAChB,eAAeF,EAAM,aAAa,SAAS;AAAA,IAC3C,EAAA,GAaIQ,IAAuB,CAACC,MAA8B;AAC1D,YAAMC,IAAgC,CAAA,GAChCC,IAAe,KAAK,SAAS,SAAS,EAAE,EAAE,UAAU,GAAG,EAAE;AAaxD,aAVkBF,EAAU,QAAQ,iBAAiB,CAACG,GAAOC,MAAe;AACjF,cAAMC,IAAQ,GAAGH,CAAY,IAAIE,CAAU;AAC3C,eAAAH,EAAMG,CAAU,IAAIC,GACb,OAAOA,CAAK;AAAA,MAAA,CACpB,EAG2C,QAAQ,iBAAiB,CAACF,GAAOC,MAAeH,EAAMG,CAAU,IAAI,IAAIH,EAAMG,CAAU,CAAC,KAAKD,CAAK;AAAA,IAGxI,GAGHG,IAAa,CAACC,MAAgB;AAClC,YAAMC,IAA0C;AAAA,QAC9C,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,MAAA;AAGP,aAAOD,EAAI,QAAQ,YAAY,CAACJ,MAAUK,EAAaL,CAAK,CAAC;AAAA,IAAA,GAOzDM,IAAsB,GADJlB,EAAM,QAAQ,2CAA2Ce,EAAWf,EAAM,KAAK,CAAC,aAAa,EACvE,GAAIA,EAAM,YAAuDD,IAA3CS,EAAqBT,CAAkB,CAAsB;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"kong-icons.es714.js","sources":["../src/components/solid/OrganizationIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * OrganizationIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Wed, 30 Oct 2024 15:04:56 GMT\n *\n * GitHub: https://github.com/Kong/icons\n * License: Apache-2.0\n */\n\nimport { computed } from 'vue'\nimport { KUI_ICON_SIZE_50 } from '@kong/design-tokens'\n\nconst props = defineProps({\n  /** The accessibility text provided to screen readers */\n  title: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  /** The icon color. Defaults to `currentColor` which inherits text color from the parent element */\n  color: {\n    type: String,\n    required: false,\n    default: 'currentColor',\n  },\n  /** The CSS display property for the icon. Defaults to `block` */\n  display: {\n    type: String,\n    required: false,\n    default: 'block',\n  },\n  /** Whether the icon is just eye-candy or is meaningful to the page (should screen-readers ignore the icon?) */\n  decorative: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  /** The icon size */\n  size: {\n    type: [Number, String],\n    required: false,\n    default: KUI_ICON_SIZE_50, // if setting to the imported const fails, just pass a number of 24 as the default.\n    validator: (sizeValue: number | string): boolean => {\n      if (typeof sizeValue === 'number' && sizeValue > 0) {\n        return true\n      }\n\n      if (typeof sizeValue === 'string') {\n        // Strip `px` from the string\n        const sanitizedSize = String(sizeValue).replace(/px/gi, '')\n        const sizeNumber = Number(sanitizedSize)\n        if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n          return true\n        }\n      }\n\n      return false\n    },\n  },\n  /** The HTML tag to utilize for the icon's wrapper element. Defaults to `span` */\n  as: {\n    type: String,\n    required: false,\n    default: 'span',\n  },\n  /**\n   * A boolean to disable prefixing any internal SVG ids with a unique string which is done to resolve the potential for multiple SVG instances on the same page and the SVG utilizing the same ids and references internally (e.g. in the `<defs>` tag).\n   * Typically only set to `true` during snapshot testing.\n   * Defaults to `false`.\n   */\n  staticIds: {\n    type: Boolean,\n    default: false,\n  },\n})\n\nconst iconSize = computed((): string => {\n  // If props.size is a number, ensure it's greater than zero\n  if (typeof props.size === 'number' && props.size > 0) {\n    return `${props.size}px`\n  }\n\n  if (typeof props.size === 'string') {\n    // Strip `px` from the string\n    const sanitizedSize = String(props.size).replace(/px/gi, '')\n    const sizeNumber = Number(sanitizedSize)\n    if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n      return `${sizeNumber}px`\n    }\n  }\n\n  // Return the default icon size\n  return KUI_ICON_SIZE_50\n})\n\n/**\n * We are adding styles inline to avoid additional stylesheet imports in the host application/component.\n * All of the properties should be mapped to component props for customization.\n */\nconst rootElementStyles = computed((): Record<string, string> => ({\n  boxSizing: 'border-box',\n  color: props.color,\n  display: props.display,\n  flexShrink: '0',\n  height: iconSize.value,\n  lineHeight: '0',\n  width: iconSize.value,\n  ...(props.decorative && { pointerEvents: 'none' }),\n}))\n\n/**\n * Prefix all SVG IDs in the given SVG string with a random prefix to ensure uniqueness.\n *\n * This function performs the following steps:\n * 1. Generates a random prefix.\n * 2. Replaces all `id` attributes in the SVG string with the new prefixed IDs.\n * 3. Updates all ID references (e.g., `url(#id)`, `href=\"#id\"`, etc.) to use the new prefixed IDs.\n *\n * @param {string} svgString - The SVG string in which to prefix IDs.\n * @returns {string} - The SVG string with prefixed IDs.\n */\nconst prefixSvgIdsInString = (svgString: string): string => {\n  const idMap: Record<string, string> = {}\n  const randomPrefix = Math.random().toString(36).substring(2, 12)\n\n  // Replace IDs in the SVG string\n  const updatedSvgString = svgString.replace(/id=\"([^\"]+)\"/g, (match, originalId) => {\n    const newId = `${randomPrefix}-${originalId}`\n    idMap[originalId] = newId\n    return `id=\"${newId}\"`\n  })\n\n  // Replace ID references (e.g., url(#id), href=\"#id\", etc.)\n  const processedSvgString = updatedSvgString.replace(/#([^\\s^\")]+)/g, (match, originalId) => idMap[originalId] ? `#${idMap[originalId]}` : match)\n\n  // Return the processed SVG string\n  return processedSvgString\n}\n\nconst escapeHtml = (str: string) => {\n  const htmlEntities: { [key: string]: string } = {\n    '<': '&lt;',\n    '>': '&gt;',\n    '\"': '&quot;',\n    \"'\": '&#039;',\n    '`': '&#039;',\n  }\n\n  return str.replace(/[<>\"'`]/g, (match) => htmlEntities[match])\n}\n\n// The `svgOriginalContent` template string will be replaced with the SVG innerHTML in the generate script.\n// eslint-disable-next-line @stylistic/quotes\nconst svgOriginalContent = `<path d=\"M2 21V3H12V7H22V21H2ZM4 19H10V17H4V19ZM4 15H10V13H4V15ZM4 11H10V9H4V11ZM4 7H10V5H4V7ZM12 19H20V9H12V19ZM14 13V11H18V13H14ZM14 17V15H18V17H14Z\" fill=\"currentColor\"/>`\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 organization-icon\"\n    data-testid=\"kui-icon-wrapper-organization-icon\"\n    :style=\"rootElementStyles\"\n    :tabindex=\"decorative ? '-1' : undefined\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-organization-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,GAOzDM,IAAsB,GADJlB,EAAM,QAAQ,2CAA2Ce,EAAWf,EAAM,KAAK,CAAC,aAAa,EACvE,GAAIA,EAAM,YAAuDD,IAA3CS,EAAqBT,CAAkB,CAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/kong-icons.es716.js

@@ -1,6 +1,6 @@
-import { defineComponent as S, computed as d, openBlock as c, createBlock as h, resolveDynamicComponent as y, normalizeStyle as b, withCtx as w, createElementBlock as x } from "vue";
+import { defineComponent as S, computed as l, openBlock as c, createBlock as h, resolveDynamicComponent as y, normalizeStyle as b, withCtx as x, createElementBlock as w } from "vue";
 import { KUI_ICON_SIZE_50 as u } from "./kong-icons.es1223.js";
-const z = ["aria-hidden"], p = '<path fill-rule="evenodd" clip-rule="evenodd" d="M9.92421 2.40002L5.76021 9.60002H18.2402L12.0002 20.4L5.76021 9.60002L1.51221 16.968L3.67221 20.4H21.2402L22.8482 17.592L14.0882 2.40002H9.91221H9.92421Z" fill="currentColor"/>', L = /* @__PURE__ */ S({
+const z = ["aria-hidden", "tabindex"], g = '<path fill-rule="evenodd" clip-rule="evenodd" d="M9.92421 2.40002L5.76021 9.60002H18.2402L12.0002 20.4L5.76021 9.60002L1.51221 16.968L3.67221 20.4H21.2402L22.8482 17.592L14.0882 2.40002H9.91221H9.92421Z" fill="currentColor"/>', L = /* @__PURE__ */ S({
   __name: "OverviewIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -61,7 +61,7 @@ const z = ["aria-hidden"], p = '<path fill-rule="evenodd" clip-rule="evenodd" d=
     }
   },
   setup(i) {
-    const e = i, r = d(() => {
+    const e = i, r = l(() => {
       if (typeof e.size == "number" && e.size > 0)
         return `${e.size}px`;
       if (typeof e.size == "string") {
@@ -70,7 +70,7 @@ const z = ["aria-hidden"], p = '<path fill-rule="evenodd" clip-rule="evenodd" d=
           return `${t}px`;
       }
       return u;
-    }), g = d(() => ({
+    }), v = l(() => ({
       boxSizing: "border-box",
       color: e.color,
       display: e.display,
@@ -78,14 +78,14 @@ const z = ["aria-hidden"], p = '<path fill-rule="evenodd" clip-rule="evenodd" d=
       height: r.value,
       lineHeight: "0",
       width: r.value,
-      pointerEvents: e.decorative ? "none" : "all"
-    })), f = (n) => {
+      ...e.decorative && { pointerEvents: "none" }
+    })), p = (n) => {
       const t = {}, s = Math.random().toString(36).substring(2, 12);
       return n.replace(/id="([^"]+)"/g, (a, o) => {
-        const l = `${s}-${o}`;
-        return t[o] = l, `id="${l}"`;
+        const d = `${s}-${o}`;
+        return t[o] = d, `id="${d}"`;
       }).replace(/#([^\s^")]+)/g, (a, o) => t[o] ? `#${t[o]}` : a);
-    }, v = (n) => {
+    }, f = (n) => {
       const t = {
         "<": "&lt;",
         ">": "&gt;",
@@ -94,20 +94,22 @@ const z = ["aria-hidden"], p = '<path fill-rule="evenodd" clip-rule="evenodd" d=
         "`": "&#039;"
       };
       return n.replace(/[<>"'`]/g, (s) => t[s]);
-    }, m = `${e.title ? `<title data-testid="kui-icon-svg-title">${v(e.title)}</title>` : ""}${e.staticIds ? p : f(p)}`;
+    }, m = `${e.title ? `<title data-testid="kui-icon-svg-title">${f(e.title)}</title>` : ""}${e.staticIds ? g : p(g)}`;
     return (n, t) => (c(), h(y(i.as), {
       "aria-hidden": i.decorative ? "true" : void 0,
       class: "kui-icon overview-icon",
       "data-testid": "kui-icon-wrapper-overview-icon",
-      style: b(g.value)
+      style: b(v.value),
+      tabindex: i.decorative ? "-1" : void 0
     }, {
-      default: w(() => [
-        (c(), x("svg", {
+      default: x(() => [
+        (c(), w("svg", {
           "aria-hidden": i.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-overview-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",
@@ -115,7 +117,7 @@ const z = ["aria-hidden"], p = '<path fill-rule="evenodd" clip-rule="evenodd" d=
         }, null, 8, z))
       ]),
       _: 1
-    }, 8, ["aria-hidden", "style"]));
+    }, 8, ["aria-hidden", "style", "tabindex"]));
   }
 });
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"kong-icons.es716.js","sources":["../src/components/solid/OverviewIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * OverviewIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Wed, 30 Oct 2024 13:57:09 GMT\n *\n * GitHub: https://github.com/Kong/icons\n * License: Apache-2.0\n */\n\nimport { computed } from 'vue'\nimport { KUI_ICON_SIZE_50 } from '@kong/design-tokens'\n\nconst props = defineProps({\n  /** The accessibility text provided to screen readers */\n  title: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  /** The icon color. Defaults to `currentColor` which inherits text color from the parent element */\n  color: {\n    type: String,\n    required: false,\n    default: 'currentColor',\n  },\n  /** The CSS display property for the icon. Defaults to `block` */\n  display: {\n    type: String,\n    required: false,\n    default: 'block',\n  },\n  /** Whether the icon is just eye-candy or is meaningful to the page (should screen-readers ignore the icon?) */\n  decorative: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  /** The icon size */\n  size: {\n    type: [Number, String],\n    required: false,\n    default: KUI_ICON_SIZE_50, // if setting to the imported const fails, just pass a number of 24 as the default.\n    validator: (sizeValue: number | string): boolean => {\n      if (typeof sizeValue === 'number' && sizeValue > 0) {\n        return true\n      }\n\n      if (typeof sizeValue === 'string') {\n        // Strip `px` from the string\n        const sanitizedSize = String(sizeValue).replace(/px/gi, '')\n        const sizeNumber = Number(sanitizedSize)\n        if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n          return true\n        }\n      }\n\n      return false\n    },\n  },\n  /** The HTML tag to utilize for the icon's wrapper element. Defaults to `span` */\n  as: {\n    type: String,\n    required: false,\n    default: 'span',\n  },\n  /**\n   * A boolean to disable prefixing any internal SVG ids with a unique string which is done to resolve the potential for multiple SVG instances on the same page and the SVG utilizing the same ids and references internally (e.g. in the `<defs>` tag).\n   * Typically only set to `true` during snapshot testing.\n   * Defaults to `false`.\n   */\n  staticIds: {\n    type: Boolean,\n    default: false,\n  },\n})\n\nconst iconSize = computed((): string => {\n  // If props.size is a number, ensure it's greater than zero\n  if (typeof props.size === 'number' && props.size > 0) {\n    return `${props.size}px`\n  }\n\n  if (typeof props.size === 'string') {\n    // Strip `px` from the string\n    const sanitizedSize = String(props.size).replace(/px/gi, '')\n    const sizeNumber = Number(sanitizedSize)\n    if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n      return `${sizeNumber}px`\n    }\n  }\n\n  // Return the default icon size\n  return KUI_ICON_SIZE_50\n})\n\n/**\n * We are adding styles inline to avoid additional stylesheet imports in the host application/component.\n * All of the properties should be mapped to component props for customization.\n */\nconst rootElementStyles = computed((): Record<string, string> => ({\n  boxSizing: 'border-box',\n  color: props.color,\n  display: props.display,\n  flexShrink: '0',\n  height: iconSize.value,\n  lineHeight: '0',\n  width: iconSize.value,\n  pointerEvents: props.decorative ? 'none' : 'all',\n}))\n\n/**\n * Prefix all SVG IDs in the given SVG string with a random prefix to ensure uniqueness.\n *\n * This function performs the following steps:\n * 1. Generates a random prefix.\n * 2. Replaces all `id` attributes in the SVG string with the new prefixed IDs.\n * 3. Updates all ID references (e.g., `url(#id)`, `href=\"#id\"`, etc.) to use the new prefixed IDs.\n *\n * @param {string} svgString - The SVG string in which to prefix IDs.\n * @returns {string} - The SVG string with prefixed IDs.\n */\nconst prefixSvgIdsInString = (svgString: string): string => {\n  const idMap: Record<string, string> = {}\n  const randomPrefix = Math.random().toString(36).substring(2, 12)\n\n  // Replace IDs in the SVG string\n  const updatedSvgString = svgString.replace(/id=\"([^\"]+)\"/g, (match, originalId) => {\n    const newId = `${randomPrefix}-${originalId}`\n    idMap[originalId] = newId\n    return `id=\"${newId}\"`\n  })\n\n  // Replace ID references (e.g., url(#id), href=\"#id\", etc.)\n  const processedSvgString = updatedSvgString.replace(/#([^\\s^\")]+)/g, (match, originalId) => idMap[originalId] ? `#${idMap[originalId]}` : match)\n\n  // Return the processed SVG string\n  return processedSvgString\n}\n\nconst escapeHtml = (str: string) => {\n  const htmlEntities: { [key: string]: string } = {\n    '<': '&lt;',\n    '>': '&gt;',\n    '\"': '&quot;',\n    \"'\": '&#039;',\n    '`': '&#039;',\n  }\n\n  return str.replace(/[<>\"'`]/g, (match) => htmlEntities[match])\n}\n\n// The `svgOriginalContent` template string will be replaced with the SVG innerHTML in the generate script.\n// eslint-disable-next-line @stylistic/quotes\nconst svgOriginalContent = `<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.92421 2.40002L5.76021 9.60002H18.2402L12.0002 20.4L5.76021 9.60002L1.51221 16.968L3.67221 20.4H21.2402L22.8482 17.592L14.0882 2.40002H9.91221H9.92421Z\" fill=\"currentColor\"/>`\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 overview-icon\"\n    data-testid=\"kui-icon-wrapper-overview-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-overview-icon\"\n      fill=\"none\"\n      height=\"100%\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      width=\"100%\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      v-html=\"svgProcessedContent\"\n    />\n  </component>\n</template>\n\n<style>\n/**\n * !Important: Do not add styles into this component file.\n *\n * We are adding styles inline to avoid additional stylesheet imports in the consuming application/component.\n */\n</style>\n"],"names":["svgOriginalContent","props","__props","iconSize","computed","sanitizedSize","sizeNumber","KUI_ICON_SIZE_50","rootElementStyles","prefixSvgIdsInString","svgString","idMap","randomPrefix","match","originalId","newId","escapeHtml","str","htmlEntities","svgProcessedContent"],"mappings":";;2BA0JMA,IAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA7I3B,UAAMC,IAAQC,GAgERC,IAAWC,EAAS,MAAc;AAEtC,UAAI,OAAOH,EAAM,QAAS,YAAYA,EAAM,OAAO;AAC1C,eAAA,GAAGA,EAAM,IAAI;AAGlB,UAAA,OAAOA,EAAM,QAAS,UAAU;AAElC,cAAMI,IAAgB,OAAOJ,EAAM,IAAI,EAAE,QAAQ,QAAQ,EAAE,GACrDK,IAAa,OAAOD,CAAa;AACnC,YAAAC,KAAc,CAAC,MAAMA,CAAU,KAAK,OAAO,UAAUA,CAAU,KAAKA,IAAa;AACnF,iBAAO,GAAGA,CAAU;AAAA,MAExB;AAGO,aAAAC;AAAA,IAAA,CACR,GAMKC,IAAoBJ,EAAS,OAA+B;AAAA,MAChE,WAAW;AAAA,MACX,OAAOH,EAAM;AAAA,MACb,SAASA,EAAM;AAAA,MACf,YAAY;AAAA,MACZ,QAAQE,EAAS;AAAA,MACjB,YAAY;AAAA,MACZ,OAAOA,EAAS;AAAA,MAChB,eAAeF,EAAM,aAAa,SAAS;AAAA,IAC3C,EAAA,GAaIQ,IAAuB,CAACC,MAA8B;AAC1D,YAAMC,IAAgC,CAAA,GAChCC,IAAe,KAAK,SAAS,SAAS,EAAE,EAAE,UAAU,GAAG,EAAE;AAaxD,aAVkBF,EAAU,QAAQ,iBAAiB,CAACG,GAAOC,MAAe;AACjF,cAAMC,IAAQ,GAAGH,CAAY,IAAIE,CAAU;AAC3C,eAAAH,EAAMG,CAAU,IAAIC,GACb,OAAOA,CAAK;AAAA,MAAA,CACpB,EAG2C,QAAQ,iBAAiB,CAACF,GAAOC,MAAeH,EAAMG,CAAU,IAAI,IAAIH,EAAMG,CAAU,CAAC,KAAKD,CAAK;AAAA,IAGxI,GAGHG,IAAa,CAACC,MAAgB;AAClC,YAAMC,IAA0C;AAAA,QAC9C,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,MAAA;AAGP,aAAOD,EAAI,QAAQ,YAAY,CAACJ,MAAUK,EAAaL,CAAK,CAAC;AAAA,IAAA,GAOzDM,IAAsB,GADJlB,EAAM,QAAQ,2CAA2Ce,EAAWf,EAAM,KAAK,CAAC,aAAa,EACvE,GAAIA,EAAM,YAAuDD,IAA3CS,EAAqBT,CAAkB,CAAsB;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"kong-icons.es716.js","sources":["../src/components/solid/OverviewIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * OverviewIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Wed, 30 Oct 2024 15:04:56 GMT\n *\n * GitHub: https://github.com/Kong/icons\n * License: Apache-2.0\n */\n\nimport { computed } from 'vue'\nimport { KUI_ICON_SIZE_50 } from '@kong/design-tokens'\n\nconst props = defineProps({\n  /** The accessibility text provided to screen readers */\n  title: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  /** The icon color. Defaults to `currentColor` which inherits text color from the parent element */\n  color: {\n    type: String,\n    required: false,\n    default: 'currentColor',\n  },\n  /** The CSS display property for the icon. Defaults to `block` */\n  display: {\n    type: String,\n    required: false,\n    default: 'block',\n  },\n  /** Whether the icon is just eye-candy or is meaningful to the page (should screen-readers ignore the icon?) */\n  decorative: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  /** The icon size */\n  size: {\n    type: [Number, String],\n    required: false,\n    default: KUI_ICON_SIZE_50, // if setting to the imported const fails, just pass a number of 24 as the default.\n    validator: (sizeValue: number | string): boolean => {\n      if (typeof sizeValue === 'number' && sizeValue > 0) {\n        return true\n      }\n\n      if (typeof sizeValue === 'string') {\n        // Strip `px` from the string\n        const sanitizedSize = String(sizeValue).replace(/px/gi, '')\n        const sizeNumber = Number(sanitizedSize)\n        if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n          return true\n        }\n      }\n\n      return false\n    },\n  },\n  /** The HTML tag to utilize for the icon's wrapper element. Defaults to `span` */\n  as: {\n    type: String,\n    required: false,\n    default: 'span',\n  },\n  /**\n   * A boolean to disable prefixing any internal SVG ids with a unique string which is done to resolve the potential for multiple SVG instances on the same page and the SVG utilizing the same ids and references internally (e.g. in the `<defs>` tag).\n   * Typically only set to `true` during snapshot testing.\n   * Defaults to `false`.\n   */\n  staticIds: {\n    type: Boolean,\n    default: false,\n  },\n})\n\nconst iconSize = computed((): string => {\n  // If props.size is a number, ensure it's greater than zero\n  if (typeof props.size === 'number' && props.size > 0) {\n    return `${props.size}px`\n  }\n\n  if (typeof props.size === 'string') {\n    // Strip `px` from the string\n    const sanitizedSize = String(props.size).replace(/px/gi, '')\n    const sizeNumber = Number(sanitizedSize)\n    if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n      return `${sizeNumber}px`\n    }\n  }\n\n  // Return the default icon size\n  return KUI_ICON_SIZE_50\n})\n\n/**\n * We are adding styles inline to avoid additional stylesheet imports in the host application/component.\n * All of the properties should be mapped to component props for customization.\n */\nconst rootElementStyles = computed((): Record<string, string> => ({\n  boxSizing: 'border-box',\n  color: props.color,\n  display: props.display,\n  flexShrink: '0',\n  height: iconSize.value,\n  lineHeight: '0',\n  width: iconSize.value,\n  ...(props.decorative && { pointerEvents: 'none' }),\n}))\n\n/**\n * Prefix all SVG IDs in the given SVG string with a random prefix to ensure uniqueness.\n *\n * This function performs the following steps:\n * 1. Generates a random prefix.\n * 2. Replaces all `id` attributes in the SVG string with the new prefixed IDs.\n * 3. Updates all ID references (e.g., `url(#id)`, `href=\"#id\"`, etc.) to use the new prefixed IDs.\n *\n * @param {string} svgString - The SVG string in which to prefix IDs.\n * @returns {string} - The SVG string with prefixed IDs.\n */\nconst prefixSvgIdsInString = (svgString: string): string => {\n  const idMap: Record<string, string> = {}\n  const randomPrefix = Math.random().toString(36).substring(2, 12)\n\n  // Replace IDs in the SVG string\n  const updatedSvgString = svgString.replace(/id=\"([^\"]+)\"/g, (match, originalId) => {\n    const newId = `${randomPrefix}-${originalId}`\n    idMap[originalId] = newId\n    return `id=\"${newId}\"`\n  })\n\n  // Replace ID references (e.g., url(#id), href=\"#id\", etc.)\n  const processedSvgString = updatedSvgString.replace(/#([^\\s^\")]+)/g, (match, originalId) => idMap[originalId] ? `#${idMap[originalId]}` : match)\n\n  // Return the processed SVG string\n  return processedSvgString\n}\n\nconst escapeHtml = (str: string) => {\n  const htmlEntities: { [key: string]: string } = {\n    '<': '&lt;',\n    '>': '&gt;',\n    '\"': '&quot;',\n    \"'\": '&#039;',\n    '`': '&#039;',\n  }\n\n  return str.replace(/[<>\"'`]/g, (match) => htmlEntities[match])\n}\n\n// The `svgOriginalContent` template string will be replaced with the SVG innerHTML in the generate script.\n// eslint-disable-next-line @stylistic/quotes\nconst svgOriginalContent = `<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.92421 2.40002L5.76021 9.60002H18.2402L12.0002 20.4L5.76021 9.60002L1.51221 16.968L3.67221 20.4H21.2402L22.8482 17.592L14.0882 2.40002H9.91221H9.92421Z\" fill=\"currentColor\"/>`\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 overview-icon\"\n    data-testid=\"kui-icon-wrapper-overview-icon\"\n    :style=\"rootElementStyles\"\n    :tabindex=\"decorative ? '-1' : undefined\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-overview-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,GAOzDM,IAAsB,GADJlB,EAAM,QAAQ,2CAA2Ce,EAAWf,EAAM,KAAK,CAAC,aAAa,EACvE,GAAIA,EAAM,YAAuDD,IAA3CS,EAAqBT,CAAkB,CAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/kong-icons.es718.js

@@ -1,6 +1,6 @@
-import { defineComponent as v, computed as c, openBlock as d, createBlock as S, resolveDynamicComponent as h, normalizeStyle as y, withCtx as b, createElementBlock as x } from "vue";
+import { defineComponent as m, 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"], p = '<path d="M1 20V17.2C1 16.6333 1.14583 16.1125 1.4375 15.6375C1.72917 15.1625 2.11667 14.8 2.6 14.55C3.63333 14.0333 4.68333 13.6458 5.75 13.3875C6.81667 13.1292 7.9 13 9 13C10.1 13 11.1833 13.1292 12.25 13.3875C13.3167 13.6458 14.3667 14.0333 15.4 14.55C15.8833 14.8 16.2708 15.1625 16.5625 15.6375C16.8542 16.1125 17 16.6333 17 17.2V20H1ZM19 20V17C19 16.2667 18.7958 15.5625 18.3875 14.8875C17.9792 14.2125 17.4 13.6333 16.65 13.15C17.5 13.25 18.3 13.4208 19.05 13.6625C19.8 13.9042 20.5 14.2 21.15 14.55C21.75 14.8833 22.2083 15.2542 22.525 15.6625C22.8417 16.0708 23 16.5167 23 17V20H19ZM9 12C7.9 12 6.95833 11.6083 6.175 10.825C5.39167 10.0417 5 9.1 5 8C5 6.9 5.39167 5.95833 6.175 5.175C6.95833 4.39167 7.9 4 9 4C10.1 4 11.0417 4.39167 11.825 5.175C12.6083 5.95833 13 6.9 13 8C13 9.1 12.6083 10.0417 11.825 10.825C11.0417 11.6083 10.1 12 9 12ZM19 8C19 9.1 18.6083 10.0417 17.825 10.825C17.0417 11.6083 16.1 12 15 12C14.8167 12 14.5833 11.9792 14.3 11.9375C14.0167 11.8958 13.7833 11.85 13.6 11.8C14.05 11.2667 14.3958 10.675 14.6375 10.025C14.8792 9.375 15 8.7 15 8C15 7.3 14.8792 6.625 14.6375 5.975C14.3958 5.325 14.05 4.73333 13.6 4.2C13.8333 4.11667 14.0667 4.0625 14.3 4.0375C14.5333 4.0125 14.7667 4 15 4C16.1 4 17.0417 4.39167 17.825 5.175C18.6083 5.95833 19 6.9 19 8Z" fill="currentColor"/>', q = /* @__PURE__ */ v({
+const z = ["aria-hidden", "tabindex"], p = '<path d="M1 20V17.2C1 16.6333 1.14583 16.1125 1.4375 15.6375C1.72917 15.1625 2.11667 14.8 2.6 14.55C3.63333 14.0333 4.68333 13.6458 5.75 13.3875C6.81667 13.1292 7.9 13 9 13C10.1 13 11.1833 13.1292 12.25 13.3875C13.3167 13.6458 14.3667 14.0333 15.4 14.55C15.8833 14.8 16.2708 15.1625 16.5625 15.6375C16.8542 16.1125 17 16.6333 17 17.2V20H1ZM19 20V17C19 16.2667 18.7958 15.5625 18.3875 14.8875C17.9792 14.2125 17.4 13.6333 16.65 13.15C17.5 13.25 18.3 13.4208 19.05 13.6625C19.8 13.9042 20.5 14.2 21.15 14.55C21.75 14.8833 22.2083 15.2542 22.525 15.6625C22.8417 16.0708 23 16.5167 23 17V20H19ZM9 12C7.9 12 6.95833 11.6083 6.175 10.825C5.39167 10.0417 5 9.1 5 8C5 6.9 5.39167 5.95833 6.175 5.175C6.95833 4.39167 7.9 4 9 4C10.1 4 11.0417 4.39167 11.825 5.175C12.6083 5.95833 13 6.9 13 8C13 9.1 12.6083 10.0417 11.825 10.825C11.0417 11.6083 10.1 12 9 12ZM19 8C19 9.1 18.6083 10.0417 17.825 10.825C17.0417 11.6083 16.1 12 15 12C14.8167 12 14.5833 11.9792 14.3 11.9375C14.0167 11.8958 13.7833 11.85 13.6 11.8C14.05 11.2667 14.3958 10.675 14.6375 10.025C14.8792 9.375 15 8.7 15 8C15 7.3 14.8792 6.625 14.6375 5.975C14.3958 5.325 14.05 4.73333 13.6 4.2C13.8333 4.11667 14.0667 4.0625 14.3 4.0375C14.5333 4.0125 14.7667 4 15 4C16.1 4 17.0417 4.39167 17.825 5.175C18.6083 5.95833 19 6.9 19 8Z" fill="currentColor"/>', q = /* @__PURE__ */ m({
   __name: "PeopleIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -37,8 +37,8 @@ const z = ["aria-hidden"], p = '<path d="M1 20V17.2C1 16.6333 1.14583 16.1125 1.
         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;
@@ -61,31 +61,31 @@ const z = ["aria-hidden"], p = '<path d="M1 20V17.2C1 16.6333 1.14583 16.1125 1.
     }
   },
   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;
-    }), C = c(() => ({
+    }), C = d(() => ({
       boxSizing: "border-box",
       color: e.color,
       display: e.display,
       flexShrink: "0",
-      height: r.value,
+      height: n.value,
       lineHeight: "0",
-      width: r.value,
-      pointerEvents: e.decorative ? "none" : "all"
-    })), g = (n) => {
+      width: n.value,
+      ...e.decorative && { pointerEvents: "none" }
+    })), g = (r) => {
       const t = {}, s = Math.random().toString(36).substring(2, 12);
-      return n.replace(/id="([^"]+)"/g, (a, o) => {
+      return r.replace(/id="([^"]+)"/g, (a, o) => {
         const l = `${s}-${o}`;
         return t[o] = l, `id="${l}"`;
       }).replace(/#([^\s^")]+)/g, (a, o) => t[o] ? `#${t[o]}` : a);
-    }, f = (n) => {
+    }, f = (r) => {
       const t = {
         "<": "&lt;",
         ">": "&gt;",
@@ -93,29 +93,31 @@ const z = ["aria-hidden"], p = '<path d="M1 20V17.2C1 16.6333 1.14583 16.1125 1.
         "'": "&#039;",
         "`": "&#039;"
       };
-      return n.replace(/[<>"'`]/g, (s) => t[s]);
-    }, m = `${e.title ? `<title data-testid="kui-icon-svg-title">${f(e.title)}</title>` : ""}${e.staticIds ? p : g(p)}`;
-    return (n, t) => (d(), S(h(i.as), {
+      return r.replace(/[<>"'`]/g, (s) => t[s]);
+    }, v = `${e.title ? `<title data-testid="kui-icon-svg-title">${f(e.title)}</title>` : ""}${e.staticIds ? p : g(p)}`;
+    return (r, t) => (c(), S(h(i.as), {
       "aria-hidden": i.decorative ? "true" : void 0,
       class: "kui-icon people-icon",
       "data-testid": "kui-icon-wrapper-people-icon",
-      style: y(C.value)
+      style: y(C.value),
+      tabindex: i.decorative ? "-1" : void 0
     }, {
       default: b(() => [
-        (d(), x("svg", {
+        (c(), x("svg", {
           "aria-hidden": i.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-people-icon",
           fill: "none",
           height: "100%",
           role: "img",
+          tabindex: i.decorative ? "-1" : void 0,
           viewBox: "0 0 24 24",
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg",
-          innerHTML: m
+          innerHTML: v
         }, null, 8, z))
       ]),
       _: 1
-    }, 8, ["aria-hidden", "style"]));
+    }, 8, ["aria-hidden", "style", "tabindex"]));
   }
 });
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"kong-icons.es718.js","sources":["../src/components/solid/PeopleIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * PeopleIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Wed, 30 Oct 2024 13:57:09 GMT\n *\n * GitHub: https://github.com/Kong/icons\n * License: Apache-2.0\n */\n\nimport { computed } from 'vue'\nimport { KUI_ICON_SIZE_50 } from '@kong/design-tokens'\n\nconst props = defineProps({\n  /** The accessibility text provided to screen readers */\n  title: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  /** The icon color. Defaults to `currentColor` which inherits text color from the parent element */\n  color: {\n    type: String,\n    required: false,\n    default: 'currentColor',\n  },\n  /** The CSS display property for the icon. Defaults to `block` */\n  display: {\n    type: String,\n    required: false,\n    default: 'block',\n  },\n  /** Whether the icon is just eye-candy or is meaningful to the page (should screen-readers ignore the icon?) */\n  decorative: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  /** The icon size */\n  size: {\n    type: [Number, String],\n    required: false,\n    default: KUI_ICON_SIZE_50, // if setting to the imported const fails, just pass a number of 24 as the default.\n    validator: (sizeValue: number | string): boolean => {\n      if (typeof sizeValue === 'number' && sizeValue > 0) {\n        return true\n      }\n\n      if (typeof sizeValue === 'string') {\n        // Strip `px` from the string\n        const sanitizedSize = String(sizeValue).replace(/px/gi, '')\n        const sizeNumber = Number(sanitizedSize)\n        if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n          return true\n        }\n      }\n\n      return false\n    },\n  },\n  /** The HTML tag to utilize for the icon's wrapper element. Defaults to `span` */\n  as: {\n    type: String,\n    required: false,\n    default: 'span',\n  },\n  /**\n   * A boolean to disable prefixing any internal SVG ids with a unique string which is done to resolve the potential for multiple SVG instances on the same page and the SVG utilizing the same ids and references internally (e.g. in the `<defs>` tag).\n   * Typically only set to `true` during snapshot testing.\n   * Defaults to `false`.\n   */\n  staticIds: {\n    type: Boolean,\n    default: false,\n  },\n})\n\nconst iconSize = computed((): string => {\n  // If props.size is a number, ensure it's greater than zero\n  if (typeof props.size === 'number' && props.size > 0) {\n    return `${props.size}px`\n  }\n\n  if (typeof props.size === 'string') {\n    // Strip `px` from the string\n    const sanitizedSize = String(props.size).replace(/px/gi, '')\n    const sizeNumber = Number(sanitizedSize)\n    if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n      return `${sizeNumber}px`\n    }\n  }\n\n  // Return the default icon size\n  return KUI_ICON_SIZE_50\n})\n\n/**\n * We are adding styles inline to avoid additional stylesheet imports in the host application/component.\n * All of the properties should be mapped to component props for customization.\n */\nconst rootElementStyles = computed((): Record<string, string> => ({\n  boxSizing: 'border-box',\n  color: props.color,\n  display: props.display,\n  flexShrink: '0',\n  height: iconSize.value,\n  lineHeight: '0',\n  width: iconSize.value,\n  pointerEvents: props.decorative ? 'none' : 'all',\n}))\n\n/**\n * Prefix all SVG IDs in the given SVG string with a random prefix to ensure uniqueness.\n *\n * This function performs the following steps:\n * 1. Generates a random prefix.\n * 2. Replaces all `id` attributes in the SVG string with the new prefixed IDs.\n * 3. Updates all ID references (e.g., `url(#id)`, `href=\"#id\"`, etc.) to use the new prefixed IDs.\n *\n * @param {string} svgString - The SVG string in which to prefix IDs.\n * @returns {string} - The SVG string with prefixed IDs.\n */\nconst prefixSvgIdsInString = (svgString: string): string => {\n  const idMap: Record<string, string> = {}\n  const randomPrefix = Math.random().toString(36).substring(2, 12)\n\n  // Replace IDs in the SVG string\n  const updatedSvgString = svgString.replace(/id=\"([^\"]+)\"/g, (match, originalId) => {\n    const newId = `${randomPrefix}-${originalId}`\n    idMap[originalId] = newId\n    return `id=\"${newId}\"`\n  })\n\n  // Replace ID references (e.g., url(#id), href=\"#id\", etc.)\n  const processedSvgString = updatedSvgString.replace(/#([^\\s^\")]+)/g, (match, originalId) => idMap[originalId] ? `#${idMap[originalId]}` : match)\n\n  // Return the processed SVG string\n  return processedSvgString\n}\n\nconst escapeHtml = (str: string) => {\n  const htmlEntities: { [key: string]: string } = {\n    '<': '&lt;',\n    '>': '&gt;',\n    '\"': '&quot;',\n    \"'\": '&#039;',\n    '`': '&#039;',\n  }\n\n  return str.replace(/[<>\"'`]/g, (match) => htmlEntities[match])\n}\n\n// The `svgOriginalContent` template string will be replaced with the SVG innerHTML in the generate script.\n// eslint-disable-next-line @stylistic/quotes\nconst svgOriginalContent = `<path d=\"M1 20V17.2C1 16.6333 1.14583 16.1125 1.4375 15.6375C1.72917 15.1625 2.11667 14.8 2.6 14.55C3.63333 14.0333 4.68333 13.6458 5.75 13.3875C6.81667 13.1292 7.9 13 9 13C10.1 13 11.1833 13.1292 12.25 13.3875C13.3167 13.6458 14.3667 14.0333 15.4 14.55C15.8833 14.8 16.2708 15.1625 16.5625 15.6375C16.8542 16.1125 17 16.6333 17 17.2V20H1ZM19 20V17C19 16.2667 18.7958 15.5625 18.3875 14.8875C17.9792 14.2125 17.4 13.6333 16.65 13.15C17.5 13.25 18.3 13.4208 19.05 13.6625C19.8 13.9042 20.5 14.2 21.15 14.55C21.75 14.8833 22.2083 15.2542 22.525 15.6625C22.8417 16.0708 23 16.5167 23 17V20H19ZM9 12C7.9 12 6.95833 11.6083 6.175 10.825C5.39167 10.0417 5 9.1 5 8C5 6.9 5.39167 5.95833 6.175 5.175C6.95833 4.39167 7.9 4 9 4C10.1 4 11.0417 4.39167 11.825 5.175C12.6083 5.95833 13 6.9 13 8C13 9.1 12.6083 10.0417 11.825 10.825C11.0417 11.6083 10.1 12 9 12ZM19 8C19 9.1 18.6083 10.0417 17.825 10.825C17.0417 11.6083 16.1 12 15 12C14.8167 12 14.5833 11.9792 14.3 11.9375C14.0167 11.8958 13.7833 11.85 13.6 11.8C14.05 11.2667 14.3958 10.675 14.6375 10.025C14.8792 9.375 15 8.7 15 8C15 7.3 14.8792 6.625 14.6375 5.975C14.3958 5.325 14.05 4.73333 13.6 4.2C13.8333 4.11667 14.0667 4.0625 14.3 4.0375C14.5333 4.0125 14.7667 4 15 4C16.1 4 17.0417 4.39167 17.825 5.175C18.6083 5.95833 19 6.9 19 8Z\" fill=\"currentColor\"/>`\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 people-icon\"\n    data-testid=\"kui-icon-wrapper-people-icon\"\n    :style=\"rootElementStyles\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-people-icon\"\n      fill=\"none\"\n      height=\"100%\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      width=\"100%\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      v-html=\"svgProcessedContent\"\n    />\n  </component>\n</template>\n\n<style>\n/**\n * !Important: Do not add styles into this component file.\n *\n * We are adding styles inline to avoid additional stylesheet imports in the consuming application/component.\n */\n</style>\n"],"names":["svgOriginalContent","props","__props","iconSize","computed","sanitizedSize","sizeNumber","KUI_ICON_SIZE_50","rootElementStyles","prefixSvgIdsInString","svgString","idMap","randomPrefix","match","originalId","newId","escapeHtml","str","htmlEntities","svgProcessedContent"],"mappings":";;2BA0JMA,IAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA7I3B,UAAMC,IAAQC,GAgERC,IAAWC,EAAS,MAAc;AAEtC,UAAI,OAAOH,EAAM,QAAS,YAAYA,EAAM,OAAO;AAC1C,eAAA,GAAGA,EAAM,IAAI;AAGlB,UAAA,OAAOA,EAAM,QAAS,UAAU;AAElC,cAAMI,IAAgB,OAAOJ,EAAM,IAAI,EAAE,QAAQ,QAAQ,EAAE,GACrDK,IAAa,OAAOD,CAAa;AACnC,YAAAC,KAAc,CAAC,MAAMA,CAAU,KAAK,OAAO,UAAUA,CAAU,KAAKA,IAAa;AACnF,iBAAO,GAAGA,CAAU;AAAA,MAExB;AAGO,aAAAC;AAAA,IAAA,CACR,GAMKC,IAAoBJ,EAAS,OAA+B;AAAA,MAChE,WAAW;AAAA,MACX,OAAOH,EAAM;AAAA,MACb,SAASA,EAAM;AAAA,MACf,YAAY;AAAA,MACZ,QAAQE,EAAS;AAAA,MACjB,YAAY;AAAA,MACZ,OAAOA,EAAS;AAAA,MAChB,eAAeF,EAAM,aAAa,SAAS;AAAA,IAC3C,EAAA,GAaIQ,IAAuB,CAACC,MAA8B;AAC1D,YAAMC,IAAgC,CAAA,GAChCC,IAAe,KAAK,SAAS,SAAS,EAAE,EAAE,UAAU,GAAG,EAAE;AAaxD,aAVkBF,EAAU,QAAQ,iBAAiB,CAACG,GAAOC,MAAe;AACjF,cAAMC,IAAQ,GAAGH,CAAY,IAAIE,CAAU;AAC3C,eAAAH,EAAMG,CAAU,IAAIC,GACb,OAAOA,CAAK;AAAA,MAAA,CACpB,EAG2C,QAAQ,iBAAiB,CAACF,GAAOC,MAAeH,EAAMG,CAAU,IAAI,IAAIH,EAAMG,CAAU,CAAC,KAAKD,CAAK;AAAA,IAGxI,GAGHG,IAAa,CAACC,MAAgB;AAClC,YAAMC,IAA0C;AAAA,QAC9C,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,MAAA;AAGP,aAAOD,EAAI,QAAQ,YAAY,CAACJ,MAAUK,EAAaL,CAAK,CAAC;AAAA,IAAA,GAOzDM,IAAsB,GADJlB,EAAM,QAAQ,2CAA2Ce,EAAWf,EAAM,KAAK,CAAC,aAAa,EACvE,GAAIA,EAAM,YAAuDD,IAA3CS,EAAqBT,CAAkB,CAAsB;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"kong-icons.es718.js","sources":["../src/components/solid/PeopleIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * PeopleIcon.vue\n * This file was generated via the build script. Do not edit this file directly.\n * Generated on Wed, 30 Oct 2024 15:04:56 GMT\n *\n * GitHub: https://github.com/Kong/icons\n * License: Apache-2.0\n */\n\nimport { computed } from 'vue'\nimport { KUI_ICON_SIZE_50 } from '@kong/design-tokens'\n\nconst props = defineProps({\n  /** The accessibility text provided to screen readers */\n  title: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  /** The icon color. Defaults to `currentColor` which inherits text color from the parent element */\n  color: {\n    type: String,\n    required: false,\n    default: 'currentColor',\n  },\n  /** The CSS display property for the icon. Defaults to `block` */\n  display: {\n    type: String,\n    required: false,\n    default: 'block',\n  },\n  /** Whether the icon is just eye-candy or is meaningful to the page (should screen-readers ignore the icon?) */\n  decorative: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  /** The icon size */\n  size: {\n    type: [Number, String],\n    required: false,\n    default: KUI_ICON_SIZE_50, // if setting to the imported const fails, just pass a number of 24 as the default.\n    validator: (sizeValue: number | string): boolean => {\n      if (typeof sizeValue === 'number' && sizeValue > 0) {\n        return true\n      }\n\n      if (typeof sizeValue === 'string') {\n        // Strip `px` from the string\n        const sanitizedSize = String(sizeValue).replace(/px/gi, '')\n        const sizeNumber = Number(sanitizedSize)\n        if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n          return true\n        }\n      }\n\n      return false\n    },\n  },\n  /** The HTML tag to utilize for the icon's wrapper element. Defaults to `span` */\n  as: {\n    type: String,\n    required: false,\n    default: 'span',\n  },\n  /**\n   * A boolean to disable prefixing any internal SVG ids with a unique string which is done to resolve the potential for multiple SVG instances on the same page and the SVG utilizing the same ids and references internally (e.g. in the `<defs>` tag).\n   * Typically only set to `true` during snapshot testing.\n   * Defaults to `false`.\n   */\n  staticIds: {\n    type: Boolean,\n    default: false,\n  },\n})\n\nconst iconSize = computed((): string => {\n  // If props.size is a number, ensure it's greater than zero\n  if (typeof props.size === 'number' && props.size > 0) {\n    return `${props.size}px`\n  }\n\n  if (typeof props.size === 'string') {\n    // Strip `px` from the string\n    const sanitizedSize = String(props.size).replace(/px/gi, '')\n    const sizeNumber = Number(sanitizedSize)\n    if (sizeNumber && !isNaN(sizeNumber) && Number.isInteger(sizeNumber) && sizeNumber > 0) {\n      return `${sizeNumber}px`\n    }\n  }\n\n  // Return the default icon size\n  return KUI_ICON_SIZE_50\n})\n\n/**\n * We are adding styles inline to avoid additional stylesheet imports in the host application/component.\n * All of the properties should be mapped to component props for customization.\n */\nconst rootElementStyles = computed((): Record<string, string> => ({\n  boxSizing: 'border-box',\n  color: props.color,\n  display: props.display,\n  flexShrink: '0',\n  height: iconSize.value,\n  lineHeight: '0',\n  width: iconSize.value,\n  ...(props.decorative && { pointerEvents: 'none' }),\n}))\n\n/**\n * Prefix all SVG IDs in the given SVG string with a random prefix to ensure uniqueness.\n *\n * This function performs the following steps:\n * 1. Generates a random prefix.\n * 2. Replaces all `id` attributes in the SVG string with the new prefixed IDs.\n * 3. Updates all ID references (e.g., `url(#id)`, `href=\"#id\"`, etc.) to use the new prefixed IDs.\n *\n * @param {string} svgString - The SVG string in which to prefix IDs.\n * @returns {string} - The SVG string with prefixed IDs.\n */\nconst prefixSvgIdsInString = (svgString: string): string => {\n  const idMap: Record<string, string> = {}\n  const randomPrefix = Math.random().toString(36).substring(2, 12)\n\n  // Replace IDs in the SVG string\n  const updatedSvgString = svgString.replace(/id=\"([^\"]+)\"/g, (match, originalId) => {\n    const newId = `${randomPrefix}-${originalId}`\n    idMap[originalId] = newId\n    return `id=\"${newId}\"`\n  })\n\n  // Replace ID references (e.g., url(#id), href=\"#id\", etc.)\n  const processedSvgString = updatedSvgString.replace(/#([^\\s^\")]+)/g, (match, originalId) => idMap[originalId] ? `#${idMap[originalId]}` : match)\n\n  // Return the processed SVG string\n  return processedSvgString\n}\n\nconst escapeHtml = (str: string) => {\n  const htmlEntities: { [key: string]: string } = {\n    '<': '&lt;',\n    '>': '&gt;',\n    '\"': '&quot;',\n    \"'\": '&#039;',\n    '`': '&#039;',\n  }\n\n  return str.replace(/[<>\"'`]/g, (match) => htmlEntities[match])\n}\n\n// The `svgOriginalContent` template string will be replaced with the SVG innerHTML in the generate script.\n// eslint-disable-next-line @stylistic/quotes\nconst svgOriginalContent = `<path d=\"M1 20V17.2C1 16.6333 1.14583 16.1125 1.4375 15.6375C1.72917 15.1625 2.11667 14.8 2.6 14.55C3.63333 14.0333 4.68333 13.6458 5.75 13.3875C6.81667 13.1292 7.9 13 9 13C10.1 13 11.1833 13.1292 12.25 13.3875C13.3167 13.6458 14.3667 14.0333 15.4 14.55C15.8833 14.8 16.2708 15.1625 16.5625 15.6375C16.8542 16.1125 17 16.6333 17 17.2V20H1ZM19 20V17C19 16.2667 18.7958 15.5625 18.3875 14.8875C17.9792 14.2125 17.4 13.6333 16.65 13.15C17.5 13.25 18.3 13.4208 19.05 13.6625C19.8 13.9042 20.5 14.2 21.15 14.55C21.75 14.8833 22.2083 15.2542 22.525 15.6625C22.8417 16.0708 23 16.5167 23 17V20H19ZM9 12C7.9 12 6.95833 11.6083 6.175 10.825C5.39167 10.0417 5 9.1 5 8C5 6.9 5.39167 5.95833 6.175 5.175C6.95833 4.39167 7.9 4 9 4C10.1 4 11.0417 4.39167 11.825 5.175C12.6083 5.95833 13 6.9 13 8C13 9.1 12.6083 10.0417 11.825 10.825C11.0417 11.6083 10.1 12 9 12ZM19 8C19 9.1 18.6083 10.0417 17.825 10.825C17.0417 11.6083 16.1 12 15 12C14.8167 12 14.5833 11.9792 14.3 11.9375C14.0167 11.8958 13.7833 11.85 13.6 11.8C14.05 11.2667 14.3958 10.675 14.6375 10.025C14.8792 9.375 15 8.7 15 8C15 7.3 14.8792 6.625 14.6375 5.975C14.3958 5.325 14.05 4.73333 13.6 4.2C13.8333 4.11667 14.0667 4.0625 14.3 4.0375C14.5333 4.0125 14.7667 4 15 4C16.1 4 17.0417 4.39167 17.825 5.175C18.6083 5.95833 19 6.9 19 8Z\" fill=\"currentColor\"/>`\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 people-icon\"\n    data-testid=\"kui-icon-wrapper-people-icon\"\n    :style=\"rootElementStyles\"\n    :tabindex=\"decorative ? '-1' : undefined\"\n  >\n    <svg\n      :aria-hidden=\"decorative ? 'true' : undefined\"\n      data-testid=\"kui-icon-svg-people-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,GAOzDM,IAAsB,GADJlB,EAAM,QAAQ,2CAA2Ce,EAAWf,EAAM,KAAK,CAAC,aAAa,EACvE,GAAIA,EAAM,YAAuDD,IAA3CS,EAAqBT,CAAkB,CAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;"}