@kong/icons 1.62.0 → 1.62.1-pr.885.a6004ce.0

package/README.md

@@ -110,6 +110,52 @@ The HTML tag to use in place of the default wrapper `<span>` tag.
 <CloseIcon as="button" />
 ```
 
+#### `colorGradientStart` and `colorGradientStop`
+
+- type: `String`
+- required: `false`
+- default: `''`
+
+Optionally apply a dynamically-generated linear gradient to a **solid** icon. When **both** `colorGradientStart` and `colorGradientStop` are provided and valid, the gradient recolors the icon's single-color (`currentColor`) fills.
+
+Gradients apply to **solid (single-color) icons only** (those generated from the `/svg/solid/` directory). Multi-color icons and flags must retain their official colors, so passing gradient props to them is a silent no-op.
+
+The feature is fully opt-in: when either prop is omitted or invalid, the icon renders exactly as it does by default (no gradient). For solid icons, a development-only `console.warn` is emitted when a gradient is attempted with a missing or invalid color.
+
+Each color accepts a hex, `rgb()`/`rgba()`, or CSS `var()` custom-property value:
+
+```html
+<!-- hex -->
+<CloudIcon color-gradient-start="#0044F4" color-gradient-stop="#00D6A4" />
+
+<!-- rgb() -->
+<CloudIcon color-gradient-start="rgb(0, 68, 244)" color-gradient-stop="rgb(0, 214, 164)" />
+
+<!-- CSS custom properties -->
+<CloudIcon
+  :color-gradient-start="`var(--kui-color-text-primary, ${KUI_COLOR_TEXT_PRIMARY})`"
+  :color-gradient-stop="`var(--kui-color-text-decorative-aqua, ${KUI_COLOR_DECORATIVE_AQUA})`"
+/>
+```
+
+> **Note**: The gradient is applied to `currentColor` **fills** only; `stroke` colors and `fill="none"` regions are left unchanged.
+
+#### `colorGradientDirection`
+
+- type: `[String, Number]`
+- required: `false`
+- default: `'135deg'`
+
+The direction of the generated gradient, expressed as a standard CSS gradient angle following the [`linear-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient) convention (`0deg` points up, increasing clockwise). Accepts a `number` (e.g. `45`) or a `string` (e.g. `'90deg'`). Only takes effect when a valid gradient is applied; invalid values fall back to the default `135deg` (top-left to bottom-right).
+
+```html
+<CloudIcon
+  color-gradient-start="#0044F4"
+  color-gradient-stop="#00D6A4"
+  color-gradient-direction="90deg"
+/>
+```
+
 ## Contributing & Local Development
 
 To get started, install the package dependencies

package/dist/kong-icons10.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("vue"),c=require("./kong-icons1694.cjs"),S=["aria-hidden"],u=`<g clip-path="url(#clip0_1_2256)">
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue"),p=require("./kong-icons1694.cjs"),f=require("./kong-icons1695.cjs"),b=["aria-hidden","innerHTML"],g=`<g clip-path="url(#clip0_1_2256)">
 <path d="M24 12C24 18.6274 18.6274 24 12 24C5.37262 24 0 18.6274 0 12C0 12.0029 12 0.0013125 12 0C18.6274 0 24 5.37262 24 12Z" fill="#0052B4"/>
 <path d="M11.9679 11.9999H12C12 11.9891 12 11.9786 12 11.9678C11.9893 11.9785 11.9786 11.9892 11.9679 11.9999Z" fill="#F0F0F0"/>
 <path d="M12 6.26086C12 4.14938 12 2.76586 12 0H11.998C5.37145 0.001125 0 5.37323 0 12H6.26086V8.47448L9.78638 12H11.9679C11.9786 11.9893 11.9893 11.9786 12 11.9679C12 11.1594 12 10.4381 12 9.78647L8.47444 6.26086H12Z" fill="#F0F0F0"/>
@@ -14,4 +14,4 @@
 <clipPath id="clip0_1_2256">
 <rect width="24" height="24" fill="white"/>
 </clipPath>
-</defs>`,m=r.defineComponent({__name:"FlagAiIcon",props:{title:{type:String,required:!1,default:""},color:{type:String,required:!1,default:"currentColor"},display:{type:String,required:!1,default:"block"},decorative:{type:Boolean,required:!1,default:!1},size:{type:[Number,String],required:!1,default:c.KUI_ICON_SIZE_50,validator:t=>{if(typeof t=="string"&&/^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(t)||typeof t=="number"&&t>0)return!0;if(typeof t=="string"){const e=String(t).replace(/px/gi,""),s=Number(e);if(s&&!isNaN(s)&&Number.isInteger(s)&&s>0)return!0}return!1}},as:{type:String,required:!1,default:"span"},staticIds:{type:Boolean,default:!1}},setup(t){const e=t,s=n=>typeof n=="string"&&/^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(n),l=r.computed(()=>{if(s(e.size))return e.size;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,""),i=Number(n);if(i&&!isNaN(i)&&Number.isInteger(i)&&i>0)return`${i}px`}return c.KUI_ICON_SIZE_50}),p=r.computed(()=>({boxSizing:"border-box",color:e.color,display:e.display,flexShrink:"0",height:l.value,lineHeight:"0",width:l.value,pointerEvents:e.decorative?"none":void 0})),f=n=>{const i={},v=Math.random().toString(36).substring(2,12);return n.replace(/id="([^"]+)"/g,(o,a)=>{const d=`${v}-${a}`;return i[a]=d,`id="${d}"`}).replace(/#([^\s^")]+)/g,(o,a)=>i[a]?`#${i[a]}`:o)},g={"<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;","&":"&amp;"},C=n=>n.replace(/[<>"'&]/g,i=>g[i]),h=`${e.title?`<title data-testid="kui-icon-svg-title">${C(e.title)}</title>`:""}${e.staticIds?u:f(u)}`;return(n,i)=>(r.openBlock(),r.createBlock(r.resolveDynamicComponent(t.as),{"aria-hidden":t.decorative?"true":void 0,class:"kui-icon flag-ai-icon","data-testid":"kui-icon-wrapper-flag-ai-icon",style:r.normalizeStyle(p.value),tabindex:t.decorative?"-1":void 0},{default:r.withCtx(()=>[(r.openBlock(),r.createElementBlock("svg",{"aria-hidden":t.decorative?"true":void 0,"data-testid":"kui-icon-svg-flag-ai-icon",fill:"none",height:"100%",role:"img",viewBox:"0 0 24 24",width:"100%",xmlns:"http://www.w3.org/2000/svg",innerHTML:h},null,8,S))]),_:1},8,["aria-hidden","style","tabindex"]))}});exports.default=m;
+</defs>`,F=n.defineComponent({__name:"FlagAiIcon",props:{title:{type:String,required:!1,default:""},color:{type:String,required:!1,default:"currentColor"},display:{type:String,required:!1,default:"block"},decorative:{type:Boolean,required:!1,default:!1},size:{type:[Number,String],required:!1,default:p.KUI_ICON_SIZE_50,validator:r=>{if(typeof r=="string"&&/^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(r)||typeof r=="number"&&r>0)return!0;if(typeof r=="string"){const t=String(r).replace(/px/gi,""),o=Number(t);if(o&&!isNaN(o)&&Number.isInteger(o)&&o>0)return!0}return!1}},as:{type:String,required:!1,default:"span"},staticIds:{type:Boolean,default:!1},colorGradientStart:{type:String,required:!1,default:""},colorGradientStop:{type:String,required:!1,default:""},colorGradientDirection:{type:[String,Number],required:!1,default:"135deg"}},setup(r){const t=r,o=i=>typeof i=="string"&&/^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(i),l=n.computed(()=>{if(o(t.size))return t.size;if(typeof t.size=="number"&&t.size>0)return`${t.size}px`;if(typeof t.size=="string"){const i=String(t.size).replace(/px/gi,""),e=Number(i);if(e&&!isNaN(e)&&Number.isInteger(e)&&e>0)return`${e}px`}return p.KUI_ICON_SIZE_50}),C=n.computed(()=>({boxSizing:"border-box",color:t.color,display:t.display,flexShrink:"0",height:l.value,lineHeight:"0",width:l.value,pointerEvents:t.decorative?"none":void 0})),S=i=>{const e={},s=Math.random().toString(36).substring(2,12);return i.replace(/id="([^"]+)"/g,(c,a)=>{const u=`${s}-${a}`;return e[a]=u,`id="${u}"`}).replace(/#([^\s^")]+)/g,(c,a)=>e[a]?`#${e[a]}`:c)},h={"<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;","&":"&amp;"},m=i=>i.replace(/[<>"'&]/g,e=>h[e]);f.createGradientId(t.staticIds);const v=n.computed(()=>{const i=typeof t.colorGradientStart=="string"?t.colorGradientStart.trim():"",e=typeof t.colorGradientStop=="string"?t.colorGradientStop.trim():"";return null}),y=n.computed(()=>{const i=t.title?`<title data-testid="kui-icon-svg-title">${m(t.title)}</title>`:"",e=v.value,s=e?f.applyColorGradient(g,e):g,d=t.staticIds?s:S(s);return`${i}${d}`});return(i,e)=>(n.openBlock(),n.createBlock(n.resolveDynamicComponent(r.as),{"aria-hidden":r.decorative?"true":void 0,class:"kui-icon flag-ai-icon","data-testid":"kui-icon-wrapper-flag-ai-icon",style:n.normalizeStyle(C.value),tabindex:r.decorative?"-1":void 0},{default:n.withCtx(()=>[(n.openBlock(),n.createElementBlock("svg",{"aria-hidden":r.decorative?"true":void 0,"data-testid":"kui-icon-svg-flag-ai-icon",fill:"none",height:"100%",role:"img",viewBox:"0 0 24 24",width:"100%",xmlns:"http://www.w3.org/2000/svg",innerHTML:y.value},null,8,b))]),_:1},8,["aria-hidden","style","tabindex"]))}});exports.default=F;

package/dist/kong-icons10.es.js

@@ -1,6 +1,7 @@
-import { defineComponent as S, computed as d, openBlock as c, createBlock as y, resolveDynamicComponent as F, normalizeStyle as b, withCtx as x, createElementBlock as H } from "vue";
-import { KUI_ICON_SIZE_50 as p } from "./kong-icons1694.es.js";
-const w = ["aria-hidden"], f = `<g clip-path="url(#clip0_1_2256)">
+import { defineComponent as b, computed as s, openBlock as f, createBlock as F, resolveDynamicComponent as x, normalizeStyle as H, withCtx as w, createElementBlock as M } from "vue";
+import { KUI_ICON_SIZE_50 as u } from "./kong-icons1694.es.js";
+import { createGradientId as N, applyColorGradient as z } from "./kong-icons1695.es.js";
+const L = ["aria-hidden", "innerHTML"], g = `<g clip-path="url(#clip0_1_2256)">
 <path d="M24 12C24 18.6274 18.6274 24 12 24C5.37262 24 0 18.6274 0 12C0 12.0029 12 0.0013125 12 0C18.6274 0 24 5.37262 24 12Z" fill="#0052B4"/>
 <path d="M11.9679 11.9999H12C12 11.9891 12 11.9786 12 11.9678C11.9893 11.9785 11.9786 11.9892 11.9679 11.9999Z" fill="#F0F0F0"/>
 <path d="M12 6.26086C12 4.14938 12 2.76586 12 0H11.998C5.37145 0.001125 0 5.37323 0 12H6.26086V8.47448L9.78638 12H11.9679C11.9786 11.9893 11.9893 11.9786 12 11.9679C12 11.1594 12 10.4381 12 9.78647L8.47444 6.26086H12Z" fill="#F0F0F0"/>
@@ -16,7 +17,7 @@ const w = ["aria-hidden"], f = `<g clip-path="url(#clip0_1_2256)">
 <clipPath id="clip0_1_2256">
 <rect width="24" height="24" fill="white"/>
 </clipPath>
-</defs>`, $ = /* @__PURE__ */ S({
+</defs>`, G = /* @__PURE__ */ b({
   __name: "FlagAiIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -47,13 +48,13 @@ const w = ["aria-hidden"], f = `<g clip-path="url(#clip0_1_2256)">
     size: {
       type: [Number, String],
       required: !1,
-      default: p,
+      default: u,
       // if setting to the imported const fails, just pass a number of 24 as the default.
-      validator: (e) => {
-        if (typeof e == "string" && /^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(e) || typeof e == "number" && e > 0)
+      validator: (r) => {
+        if (typeof r == "string" && /^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(r) || typeof r == "number" && r > 0)
           return !0;
-        if (typeof e == "string") {
-          const t = String(e).replace(/px/gi, ""), n = Number(t);
+        if (typeof r == "string") {
+          const t = String(r).replace(/px/gi, ""), n = Number(t);
           if (n && !isNaN(n) && Number.isInteger(n) && n > 0)
             return !0;
         }
@@ -74,52 +75,92 @@ const w = ["aria-hidden"], f = `<g clip-path="url(#clip0_1_2256)">
     staticIds: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * The start color of an optional, dynamically-generated linear gradient.
+     * Accepts a hex, `rgb()`/`rgba()`, or CSS `var()` custom-property value.
+     * The gradient is applied only when both `colorGradientStart` and `colorGradientStop` are provided and valid,
+     * overriding any existing gradient or flat fills. Defaults to an empty string (no gradient).
+     */
+    colorGradientStart: {
+      type: String,
+      required: !1,
+      default: ""
+    },
+    /**
+     * The stop (end) color of an optional, dynamically-generated linear gradient.
+     * Accepts a hex, `rgb()`/`rgba()`, or CSS `var()` custom-property value.
+     * The gradient is applied only when both `colorGradientStart` and `colorGradientStop` are provided and valid,
+     * overriding any existing gradient or flat fills. Defaults to an empty string (no gradient).
+     */
+    colorGradientStop: {
+      type: String,
+      required: !1,
+      default: ""
+    },
+    /**
+     * The direction of the generated linear gradient, expressed as a standard CSS gradient angle
+     * (e.g. `45`, `"90deg"`) following the `linear-gradient()` convention (`0deg` points up, increasing clockwise).
+     * Invalid values fall back to the default. Defaults to `135deg` (top-left to bottom-right).
+     */
+    colorGradientDirection: {
+      type: [String, Number],
+      required: !1,
+      default: "135deg"
     }
   },
-  setup(e) {
-    const t = e, n = (r) => typeof r == "string" && /^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(r), a = d(() => {
+  setup(r) {
+    const t = r, n = (i) => typeof i == "string" && /^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(i), l = s(() => {
       if (n(t.size))
         return t.size;
       if (typeof t.size == "number" && t.size > 0)
         return `${t.size}px`;
       if (typeof t.size == "string") {
-        const r = String(t.size).replace(/px/gi, ""), i = Number(r);
-        if (i && !isNaN(i) && Number.isInteger(i) && i > 0)
-          return `${i}px`;
+        const i = String(t.size).replace(/px/gi, ""), e = Number(i);
+        if (e && !isNaN(e) && Number.isInteger(e) && e > 0)
+          return `${e}px`;
       }
-      return p;
-    }), u = d(() => ({
+      return u;
+    }), C = s(() => ({
       boxSizing: "border-box",
       color: t.color,
       display: t.display,
       flexShrink: "0",
-      height: a.value,
+      height: l.value,
       lineHeight: "0",
-      width: a.value,
+      width: l.value,
       pointerEvents: t.decorative ? "none" : void 0
-    })), g = (r) => {
-      const i = {}, v = Math.random().toString(36).substring(2, 12);
-      return r.replace(/id="([^"]+)"/g, (o, s) => {
-        const l = `${v}-${s}`;
-        return i[s] = l, `id="${l}"`;
-      }).replace(/#([^\s^")]+)/g, (o, s) => i[s] ? `#${i[s]}` : o);
-    }, C = {
+    })), h = (i) => {
+      const e = {}, a = Math.random().toString(36).substring(2, 12);
+      return i.replace(/id="([^"]+)"/g, (c, o) => {
+        const p = `${a}-${o}`;
+        return e[o] = p, `id="${p}"`;
+      }).replace(/#([^\s^")]+)/g, (c, o) => e[o] ? `#${e[o]}` : c);
+    }, m = {
       "<": "&lt;",
       ">": "&gt;",
       '"': "&quot;",
       "'": "&#39;",
       "&": "&amp;"
-    }, h = (r) => r.replace(/[<>"'&]/g, (i) => C[i]), m = `${t.title ? `<title data-testid="kui-icon-svg-title">${h(t.title)}</title>` : ""}${t.staticIds ? f : g(f)}`;
-    return (r, i) => (c(), y(F(e.as), {
-      "aria-hidden": e.decorative ? "true" : void 0,
+    }, S = (i) => i.replace(/[<>"'&]/g, (e) => m[e]);
+    N(t.staticIds);
+    const v = s(() => {
+      const i = typeof t.colorGradientStart == "string" ? t.colorGradientStart.trim() : "", e = typeof t.colorGradientStop == "string" ? t.colorGradientStop.trim() : "";
+      return null;
+    }), y = s(() => {
+      const i = t.title ? `<title data-testid="kui-icon-svg-title">${S(t.title)}</title>` : "", e = v.value, a = e ? z(g, e) : g, d = t.staticIds ? a : h(a);
+      return `${i}${d}`;
+    });
+    return (i, e) => (f(), F(x(r.as), {
+      "aria-hidden": r.decorative ? "true" : void 0,
       class: "kui-icon flag-ai-icon",
       "data-testid": "kui-icon-wrapper-flag-ai-icon",
-      style: b(u.value),
-      tabindex: e.decorative ? "-1" : void 0
+      style: H(C.value),
+      tabindex: r.decorative ? "-1" : void 0
     }, {
-      default: x(() => [
-        (c(), H("svg", {
-          "aria-hidden": e.decorative ? "true" : void 0,
+      default: w(() => [
+        (f(), M("svg", {
+          "aria-hidden": r.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-flag-ai-icon",
           fill: "none",
           height: "100%",
@@ -127,13 +168,13 @@ const w = ["aria-hidden"], f = `<g clip-path="url(#clip0_1_2256)">
           viewBox: "0 0 24 24",
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg",
-          innerHTML: m
-        }, null, 8, w))
+          innerHTML: y.value
+        }, null, 8, L))
       ]),
       _: 1
     }, 8, ["aria-hidden", "style", "tabindex"]));
   }
 });
 export {
-  $ as default
+  G as default
 };

package/dist/kong-icons100.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("vue"),d=require("./kong-icons1694.cjs"),m=["aria-hidden"],u=`<g clip-path="url(#clip0_1_2312)">
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue"),p=require("./kong-icons1694.cjs"),g=require("./kong-icons1695.cjs"),b=["aria-hidden","innerHTML"],f=`<g clip-path="url(#clip0_1_2312)">
 <path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#F0F0F0"/>
 <path d="M10.9565 12C10.9565 12 3.52171 20.487 3.51468 20.4853C5.68621 22.6568 8.68626 24 12 24C18.6274 24 24 18.6274 24 12H10.9565Z" fill="#D80027"/>
 <path d="M3.51468 3.51465C-1.1716 8.20093 -1.1716 15.7989 3.51468 20.4853C5.45123 18.5487 7.31371 16.6862 12 12L3.51468 3.51465Z" fill="#0052B4"/>
@@ -7,4 +7,4 @@
 <clipPath id="clip0_1_2312">
 <rect width="24" height="24" fill="white"/>
 </clipPath>
-</defs>`,y=r.defineComponent({__name:"FlagCzIcon",props:{title:{type:String,required:!1,default:""},color:{type:String,required:!1,default:"currentColor"},display:{type:String,required:!1,default:"block"},decorative:{type:Boolean,required:!1,default:!1},size:{type:[Number,String],required:!1,default:d.KUI_ICON_SIZE_50,validator:t=>{if(typeof t=="string"&&/^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(t)||typeof t=="number"&&t>0)return!0;if(typeof t=="string"){const e=String(t).replace(/px/gi,""),s=Number(e);if(s&&!isNaN(s)&&Number.isInteger(s)&&s>0)return!0}return!1}},as:{type:String,required:!1,default:"span"},staticIds:{type:Boolean,default:!1}},setup(t){const e=t,s=n=>typeof n=="string"&&/^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(n),a=r.computed(()=>{if(s(e.size))return e.size;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,""),i=Number(n);if(i&&!isNaN(i)&&Number.isInteger(i)&&i>0)return`${i}px`}return d.KUI_ICON_SIZE_50}),g=r.computed(()=>({boxSizing:"border-box",color:e.color,display:e.display,flexShrink:"0",height:a.value,lineHeight:"0",width:a.value,pointerEvents:e.decorative?"none":void 0})),p=n=>{const i={},S=Math.random().toString(36).substring(2,12);return n.replace(/id="([^"]+)"/g,(l,o)=>{const c=`${S}-${o}`;return i[o]=c,`id="${c}"`}).replace(/#([^\s^")]+)/g,(l,o)=>i[o]?`#${i[o]}`:l)},f={"<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;","&":"&amp;"},v=n=>n.replace(/[<>"'&]/g,i=>f[i]),h=`${e.title?`<title data-testid="kui-icon-svg-title">${v(e.title)}</title>`:""}${e.staticIds?u:p(u)}`;return(n,i)=>(r.openBlock(),r.createBlock(r.resolveDynamicComponent(t.as),{"aria-hidden":t.decorative?"true":void 0,class:"kui-icon flag-cz-icon","data-testid":"kui-icon-wrapper-flag-cz-icon",style:r.normalizeStyle(g.value),tabindex:t.decorative?"-1":void 0},{default:r.withCtx(()=>[(r.openBlock(),r.createElementBlock("svg",{"aria-hidden":t.decorative?"true":void 0,"data-testid":"kui-icon-svg-flag-cz-icon",fill:"none",height:"100%",role:"img",viewBox:"0 0 24 24",width:"100%",xmlns:"http://www.w3.org/2000/svg",innerHTML:h},null,8,m))]),_:1},8,["aria-hidden","style","tabindex"]))}});exports.default=y;
+</defs>`,x=n.defineComponent({__name:"FlagCzIcon",props:{title:{type:String,required:!1,default:""},color:{type:String,required:!1,default:"currentColor"},display:{type:String,required:!1,default:"block"},decorative:{type:Boolean,required:!1,default:!1},size:{type:[Number,String],required:!1,default:p.KUI_ICON_SIZE_50,validator:i=>{if(typeof i=="string"&&/^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(i)||typeof i=="number"&&i>0)return!0;if(typeof i=="string"){const e=String(i).replace(/px/gi,""),o=Number(e);if(o&&!isNaN(o)&&Number.isInteger(o)&&o>0)return!0}return!1}},as:{type:String,required:!1,default:"span"},staticIds:{type:Boolean,default:!1},colorGradientStart:{type:String,required:!1,default:""},colorGradientStop:{type:String,required:!1,default:""},colorGradientDirection:{type:[String,Number],required:!1,default:"135deg"}},setup(i){const e=i,o=r=>typeof r=="string"&&/^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(r),l=n.computed(()=>{if(o(e.size))return e.size;if(typeof e.size=="number"&&e.size>0)return`${e.size}px`;if(typeof e.size=="string"){const r=String(e.size).replace(/px/gi,""),t=Number(r);if(t&&!isNaN(t)&&Number.isInteger(t)&&t>0)return`${t}px`}return p.KUI_ICON_SIZE_50}),S=n.computed(()=>({boxSizing:"border-box",color:e.color,display:e.display,flexShrink:"0",height:l.value,lineHeight:"0",width:l.value,pointerEvents:e.decorative?"none":void 0})),m=r=>{const t={},a=Math.random().toString(36).substring(2,12);return r.replace(/id="([^"]+)"/g,(d,s)=>{const u=`${a}-${s}`;return t[s]=u,`id="${u}"`}).replace(/#([^\s^")]+)/g,(d,s)=>t[s]?`#${t[s]}`:d)},v={"<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;","&":"&amp;"},h=r=>r.replace(/[<>"'&]/g,t=>v[t]);g.createGradientId(e.staticIds);const y=n.computed(()=>{const r=typeof e.colorGradientStart=="string"?e.colorGradientStart.trim():"",t=typeof e.colorGradientStop=="string"?e.colorGradientStop.trim():"";return null}),C=n.computed(()=>{const r=e.title?`<title data-testid="kui-icon-svg-title">${h(e.title)}</title>`:"",t=y.value,a=t?g.applyColorGradient(f,t):f,c=e.staticIds?a:m(a);return`${r}${c}`});return(r,t)=>(n.openBlock(),n.createBlock(n.resolveDynamicComponent(i.as),{"aria-hidden":i.decorative?"true":void 0,class:"kui-icon flag-cz-icon","data-testid":"kui-icon-wrapper-flag-cz-icon",style:n.normalizeStyle(S.value),tabindex:i.decorative?"-1":void 0},{default:n.withCtx(()=>[(n.openBlock(),n.createElementBlock("svg",{"aria-hidden":i.decorative?"true":void 0,"data-testid":"kui-icon-svg-flag-cz-icon",fill:"none",height:"100%",role:"img",viewBox:"0 0 24 24",width:"100%",xmlns:"http://www.w3.org/2000/svg",innerHTML:C.value},null,8,b))]),_:1},8,["aria-hidden","style","tabindex"]))}});exports.default=x;

package/dist/kong-icons100.es.js

@@ -1,6 +1,7 @@
-import { defineComponent as y, computed as c, openBlock as d, createBlock as C, resolveDynamicComponent as b, normalizeStyle as x, withCtx as z, createElementBlock as w } from "vue";
-import { KUI_ICON_SIZE_50 as u } from "./kong-icons1694.es.js";
-const N = ["aria-hidden"], g = `<g clip-path="url(#clip0_1_2312)">
+import { defineComponent as b, computed as a, openBlock as p, createBlock as x, resolveDynamicComponent as z, normalizeStyle as w, withCtx as N, createElementBlock as I } from "vue";
+import { KUI_ICON_SIZE_50 as f } from "./kong-icons1694.es.js";
+import { createGradientId as $, applyColorGradient as q } from "./kong-icons1695.es.js";
+const G = ["aria-hidden", "innerHTML"], g = `<g clip-path="url(#clip0_1_2312)">
 <path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#F0F0F0"/>
 <path d="M10.9565 12C10.9565 12 3.52171 20.487 3.51468 20.4853C5.68621 22.6568 8.68626 24 12 24C18.6274 24 24 18.6274 24 12H10.9565Z" fill="#D80027"/>
 <path d="M3.51468 3.51465C-1.1716 8.20093 -1.1716 15.7989 3.51468 20.4853C5.45123 18.5487 7.31371 16.6862 12 12L3.51468 3.51465Z" fill="#0052B4"/>
@@ -9,7 +10,7 @@ const N = ["aria-hidden"], g = `<g clip-path="url(#clip0_1_2312)">
 <clipPath id="clip0_1_2312">
 <rect width="24" height="24" fill="white"/>
 </clipPath>
-</defs>`, B = /* @__PURE__ */ y({
+</defs>`, E = /* @__PURE__ */ b({
   __name: "FlagCzIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -40,13 +41,13 @@ const N = ["aria-hidden"], g = `<g clip-path="url(#clip0_1_2312)">
     size: {
       type: [Number, String],
       required: !1,
-      default: u,
+      default: f,
       // if setting to the imported const fails, just pass a number of 24 as the default.
-      validator: (t) => {
-        if (typeof t == "string" && /^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(t) || typeof t == "number" && t > 0)
+      validator: (i) => {
+        if (typeof i == "string" && /^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(i) || typeof i == "number" && i > 0)
           return !0;
-        if (typeof t == "string") {
-          const e = String(t).replace(/px/gi, ""), n = Number(e);
+        if (typeof i == "string") {
+          const t = String(i).replace(/px/gi, ""), n = Number(t);
           if (n && !isNaN(n) && Number.isInteger(n) && n > 0)
             return !0;
         }
@@ -67,52 +68,92 @@ const N = ["aria-hidden"], g = `<g clip-path="url(#clip0_1_2312)">
     staticIds: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * The start color of an optional, dynamically-generated linear gradient.
+     * Accepts a hex, `rgb()`/`rgba()`, or CSS `var()` custom-property value.
+     * The gradient is applied only when both `colorGradientStart` and `colorGradientStop` are provided and valid,
+     * overriding any existing gradient or flat fills. Defaults to an empty string (no gradient).
+     */
+    colorGradientStart: {
+      type: String,
+      required: !1,
+      default: ""
+    },
+    /**
+     * The stop (end) color of an optional, dynamically-generated linear gradient.
+     * Accepts a hex, `rgb()`/`rgba()`, or CSS `var()` custom-property value.
+     * The gradient is applied only when both `colorGradientStart` and `colorGradientStop` are provided and valid,
+     * overriding any existing gradient or flat fills. Defaults to an empty string (no gradient).
+     */
+    colorGradientStop: {
+      type: String,
+      required: !1,
+      default: ""
+    },
+    /**
+     * The direction of the generated linear gradient, expressed as a standard CSS gradient angle
+     * (e.g. `45`, `"90deg"`) following the `linear-gradient()` convention (`0deg` points up, increasing clockwise).
+     * Invalid values fall back to the default. Defaults to `135deg` (top-left to bottom-right).
+     */
+    colorGradientDirection: {
+      type: [String, Number],
+      required: !1,
+      default: "135deg"
     }
   },
-  setup(t) {
-    const e = t, n = (r) => typeof r == "string" && /^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(r), o = c(() => {
-      if (n(e.size))
-        return e.size;
-      if (typeof e.size == "number" && e.size > 0)
-        return `${e.size}px`;
-      if (typeof e.size == "string") {
-        const r = String(e.size).replace(/px/gi, ""), i = Number(r);
-        if (i && !isNaN(i) && Number.isInteger(i) && i > 0)
-          return `${i}px`;
+  setup(i) {
+    const t = i, n = (r) => typeof r == "string" && /^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(r), l = a(() => {
+      if (n(t.size))
+        return t.size;
+      if (typeof t.size == "number" && t.size > 0)
+        return `${t.size}px`;
+      if (typeof t.size == "string") {
+        const r = String(t.size).replace(/px/gi, ""), e = Number(r);
+        if (e && !isNaN(e) && Number.isInteger(e) && e > 0)
+          return `${e}px`;
       }
-      return u;
-    }), p = c(() => ({
+      return f;
+    }), m = a(() => ({
       boxSizing: "border-box",
-      color: e.color,
-      display: e.display,
+      color: t.color,
+      display: t.display,
       flexShrink: "0",
-      height: o.value,
+      height: l.value,
       lineHeight: "0",
-      width: o.value,
-      pointerEvents: e.decorative ? "none" : void 0
-    })), f = (r) => {
-      const i = {}, S = Math.random().toString(36).substring(2, 12);
-      return r.replace(/id="([^"]+)"/g, (a, s) => {
-        const l = `${S}-${s}`;
-        return i[s] = l, `id="${l}"`;
-      }).replace(/#([^\s^")]+)/g, (a, s) => i[s] ? `#${i[s]}` : a);
-    }, m = {
+      width: l.value,
+      pointerEvents: t.decorative ? "none" : void 0
+    })), S = (r) => {
+      const e = {}, s = Math.random().toString(36).substring(2, 12);
+      return r.replace(/id="([^"]+)"/g, (c, o) => {
+        const u = `${s}-${o}`;
+        return e[o] = u, `id="${u}"`;
+      }).replace(/#([^\s^")]+)/g, (c, o) => e[o] ? `#${e[o]}` : c);
+    }, v = {
       "<": "&lt;",
       ">": "&gt;",
       '"': "&quot;",
       "'": "&#39;",
       "&": "&amp;"
-    }, v = (r) => r.replace(/[<>"'&]/g, (i) => m[i]), h = `${e.title ? `<title data-testid="kui-icon-svg-title">${v(e.title)}</title>` : ""}${e.staticIds ? g : f(g)}`;
-    return (r, i) => (d(), C(b(t.as), {
-      "aria-hidden": t.decorative ? "true" : void 0,
+    }, h = (r) => r.replace(/[<>"'&]/g, (e) => v[e]);
+    $(t.staticIds);
+    const y = a(() => {
+      const r = typeof t.colorGradientStart == "string" ? t.colorGradientStart.trim() : "", e = typeof t.colorGradientStop == "string" ? t.colorGradientStop.trim() : "";
+      return null;
+    }), C = a(() => {
+      const r = t.title ? `<title data-testid="kui-icon-svg-title">${h(t.title)}</title>` : "", e = y.value, s = e ? q(g, e) : g, d = t.staticIds ? s : S(s);
+      return `${r}${d}`;
+    });
+    return (r, e) => (p(), x(z(i.as), {
+      "aria-hidden": i.decorative ? "true" : void 0,
       class: "kui-icon flag-cz-icon",
       "data-testid": "kui-icon-wrapper-flag-cz-icon",
-      style: x(p.value),
-      tabindex: t.decorative ? "-1" : void 0
+      style: w(m.value),
+      tabindex: i.decorative ? "-1" : void 0
     }, {
-      default: z(() => [
-        (d(), w("svg", {
-          "aria-hidden": t.decorative ? "true" : void 0,
+      default: N(() => [
+        (p(), I("svg", {
+          "aria-hidden": i.decorative ? "true" : void 0,
           "data-testid": "kui-icon-svg-flag-cz-icon",
           fill: "none",
           height: "100%",
@@ -120,13 +161,13 @@ const N = ["aria-hidden"], g = `<g clip-path="url(#clip0_1_2312)">
           viewBox: "0 0 24 24",
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg",
-          innerHTML: h
-        }, null, 8, N))
+          innerHTML: C.value
+        }, null, 8, G))
       ]),
       _: 1
     }, 8, ["aria-hidden", "style", "tabindex"]));
   }
 });
 export {
-  B as default
+  E as default
 };

package/dist/kong-icons1000.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("vue"),l=require("./kong-icons1694.cjs"),m=["aria-hidden"],u='<path d="M6.175 19.825C5.39167 19.0417 5 18.1 5 17V8.825C4.41667 8.60833 3.9375 8.24583 3.5625 7.7375C3.1875 7.22917 3 6.65 3 6C3 5.16667 3.29167 4.45833 3.875 3.875C4.45833 3.29167 5.16667 3 6 3C6.83333 3 7.54167 3.29167 8.125 3.875C8.70833 4.45833 9 5.16667 9 6C9 6.65 8.8125 7.22917 8.4375 7.7375C8.0625 8.24583 7.58333 8.60833 7 8.825V17C7 17.55 7.19583 18.0208 7.5875 18.4125C7.97917 18.8042 8.45 19 9 19C9.55 19 10.0208 18.8042 10.4125 18.4125C10.8042 18.0208 11 17.55 11 17V7C11 5.9 11.3917 4.95833 12.175 4.175C12.9583 3.39167 13.9 3 15 3C16.1 3 17.0417 3.39167 17.825 4.175C18.6083 4.95833 19 5.9 19 7V15.175C19.5833 15.3917 20.0625 15.7542 20.4375 16.2625C20.8125 16.7708 21 17.35 21 18C21 18.8333 20.7083 19.5417 20.125 20.125C19.5417 20.7083 18.8333 21 18 21C17.1667 21 16.4583 20.7083 15.875 20.125C15.2917 19.5417 15 18.8333 15 18C15 17.35 15.1875 16.7667 15.5625 16.25C15.9375 15.7333 16.4167 15.375 17 15.175V7C17 6.45 16.8042 5.97917 16.4125 5.5875C16.0208 5.19583 15.55 5 15 5C14.45 5 13.9792 5.19583 13.5875 5.5875C13.1958 5.97917 13 6.45 13 7V17C13 18.1 12.6083 19.0417 11.825 19.825C11.0417 20.6083 10.1 21 9 21C7.9 21 6.95833 20.6083 6.175 19.825ZM6 7C6.28333 7 6.52083 6.90417 6.7125 6.7125C6.90417 6.52083 7 6.28333 7 6C7 5.71667 6.90417 5.47917 6.7125 5.2875C6.52083 5.09583 6.28333 5 6 5C5.71667 5 5.47917 5.09583 5.2875 5.2875C5.09583 5.47917 5 5.71667 5 6C5 6.28333 5.09583 6.52083 5.2875 6.7125C5.47917 6.90417 5.71667 7 6 7ZM18 19C18.2833 19 18.5208 18.9042 18.7125 18.7125C18.9042 18.5208 19 18.2833 19 18C19 17.7167 18.9042 17.4792 18.7125 17.2875C18.5208 17.0958 18.2833 17 18 17C17.7167 17 17.4792 17.0958 17.2875 17.2875C17.0958 17.4792 17 17.7167 17 18C17 18.2833 17.0958 18.5208 17.2875 18.7125C17.4792 18.9042 17.7167 19 18 19Z" fill="currentColor"/>',y=r.defineComponent({__name:"RouteIcon",props:{title:{type:String,required:!1,default:""},color:{type:String,required:!1,default:"currentColor"},display:{type:String,required:!1,default:"block"},decorative:{type:Boolean,required:!1,default:!1},size:{type:[Number,String],required:!1,default:l.KUI_ICON_SIZE_50,validator:t=>{if(typeof t=="string"&&/^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(t)||typeof t=="number"&&t>0)return!0;if(typeof t=="string"){const e=String(t).replace(/px/gi,""),s=Number(e);if(s&&!isNaN(s)&&Number.isInteger(s)&&s>0)return!0}return!1}},as:{type:String,required:!1,default:"span"},staticIds:{type:Boolean,default:!1}},setup(t){const e=t,s=n=>typeof n=="string"&&/^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(n),a=r.computed(()=>{if(s(e.size))return e.size;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,""),i=Number(n);if(i&&!isNaN(i)&&Number.isInteger(i)&&i>0)return`${i}px`}return l.KUI_ICON_SIZE_50}),C=r.computed(()=>({boxSizing:"border-box",color:e.color,display:e.display,flexShrink:"0",height:a.value,lineHeight:"0",width:a.value,pointerEvents:e.decorative?"none":void 0})),g=n=>{const i={},S=Math.random().toString(36).substring(2,12);return n.replace(/id="([^"]+)"/g,(d,o)=>{const c=`${S}-${o}`;return i[o]=c,`id="${c}"`}).replace(/#([^\s^")]+)/g,(d,o)=>i[o]?`#${i[o]}`:d)},p={"<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;","&":"&amp;"},f=n=>n.replace(/[<>"'&]/g,i=>p[i]),v=`${e.title?`<title data-testid="kui-icon-svg-title">${f(e.title)}</title>`:""}${e.staticIds?u:g(u)}`;return(n,i)=>(r.openBlock(),r.createBlock(r.resolveDynamicComponent(t.as),{"aria-hidden":t.decorative?"true":void 0,class:"kui-icon route-icon","data-testid":"kui-icon-wrapper-route-icon",style:r.normalizeStyle(C.value),tabindex:t.decorative?"-1":void 0},{default:r.withCtx(()=>[(r.openBlock(),r.createElementBlock("svg",{"aria-hidden":t.decorative?"true":void 0,"data-testid":"kui-icon-svg-route-icon",fill:"none",height:"100%",role:"img",viewBox:"0 0 24 24",width:"100%",xmlns:"http://www.w3.org/2000/svg",innerHTML:v},null,8,m))]),_:1},8,["aria-hidden","style","tabindex"]))}});exports.default=y;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue"),p=require("./kong-icons1694.cjs"),d=require("./kong-icons1695.cjs"),x=["aria-hidden","innerHTML"],g='<path d="M6.175 19.825C5.39167 19.0417 5 18.1 5 17V8.825C4.41667 8.60833 3.9375 8.24583 3.5625 7.7375C3.1875 7.22917 3 6.65 3 6C3 5.16667 3.29167 4.45833 3.875 3.875C4.45833 3.29167 5.16667 3 6 3C6.83333 3 7.54167 3.29167 8.125 3.875C8.70833 4.45833 9 5.16667 9 6C9 6.65 8.8125 7.22917 8.4375 7.7375C8.0625 8.24583 7.58333 8.60833 7 8.825V17C7 17.55 7.19583 18.0208 7.5875 18.4125C7.97917 18.8042 8.45 19 9 19C9.55 19 10.0208 18.8042 10.4125 18.4125C10.8042 18.0208 11 17.55 11 17V7C11 5.9 11.3917 4.95833 12.175 4.175C12.9583 3.39167 13.9 3 15 3C16.1 3 17.0417 3.39167 17.825 4.175C18.6083 4.95833 19 5.9 19 7V15.175C19.5833 15.3917 20.0625 15.7542 20.4375 16.2625C20.8125 16.7708 21 17.35 21 18C21 18.8333 20.7083 19.5417 20.125 20.125C19.5417 20.7083 18.8333 21 18 21C17.1667 21 16.4583 20.7083 15.875 20.125C15.2917 19.5417 15 18.8333 15 18C15 17.35 15.1875 16.7667 15.5625 16.25C15.9375 15.7333 16.4167 15.375 17 15.175V7C17 6.45 16.8042 5.97917 16.4125 5.5875C16.0208 5.19583 15.55 5 15 5C14.45 5 13.9792 5.19583 13.5875 5.5875C13.1958 5.97917 13 6.45 13 7V17C13 18.1 12.6083 19.0417 11.825 19.825C11.0417 20.6083 10.1 21 9 21C7.9 21 6.95833 20.6083 6.175 19.825ZM6 7C6.28333 7 6.52083 6.90417 6.7125 6.7125C6.90417 6.52083 7 6.28333 7 6C7 5.71667 6.90417 5.47917 6.7125 5.2875C6.52083 5.09583 6.28333 5 6 5C5.71667 5 5.47917 5.09583 5.2875 5.2875C5.09583 5.47917 5 5.71667 5 6C5 6.28333 5.09583 6.52083 5.2875 6.7125C5.47917 6.90417 5.71667 7 6 7ZM18 19C18.2833 19 18.5208 18.9042 18.7125 18.7125C18.9042 18.5208 19 18.2833 19 18C19 17.7167 18.9042 17.4792 18.7125 17.2875C18.5208 17.0958 18.2833 17 18 17C17.7167 17 17.4792 17.0958 17.2875 17.2875C17.0958 17.4792 17 17.7167 17 18C17 18.2833 17.0958 18.5208 17.2875 18.7125C17.4792 18.9042 17.7167 19 18 19Z" fill="currentColor"/>',G=n.defineComponent({__name:"RouteIcon",props:{title:{type:String,required:!1,default:""},color:{type:String,required:!1,default:"currentColor"},display:{type:String,required:!1,default:"block"},decorative:{type:Boolean,required:!1,default:!1},size:{type:[Number,String],required:!1,default:p.KUI_ICON_SIZE_50,validator:i=>{if(typeof i=="string"&&/^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(i)||typeof i=="number"&&i>0)return!0;if(typeof i=="string"){const e=String(i).replace(/px/gi,""),s=Number(e);if(s&&!isNaN(s)&&Number.isInteger(s)&&s>0)return!0}return!1}},as:{type:String,required:!1,default:"span"},staticIds:{type:Boolean,default:!1},colorGradientStart:{type:String,required:!1,default:""},colorGradientStop:{type:String,required:!1,default:""},colorGradientDirection:{type:[String,Number],required:!1,default:"135deg"}},setup(i){const e=i,s=r=>typeof r=="string"&&/^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(r),c=n.computed(()=>{if(s(e.size))return e.size;if(typeof e.size=="number"&&e.size>0)return`${e.size}px`;if(typeof e.size=="string"){const r=String(e.size).replace(/px/gi,""),t=Number(r);if(t&&!isNaN(t)&&Number.isInteger(t)&&t>0)return`${t}px`}return p.KUI_ICON_SIZE_50}),f=n.computed(()=>({boxSizing:"border-box",color:e.color,display:e.display,flexShrink:"0",height:c.value,lineHeight:"0",width:c.value,pointerEvents:e.decorative?"none":void 0})),S=r=>{const t={},o=Math.random().toString(36).substring(2,12);return r.replace(/id="([^"]+)"/g,(u,a)=>{const C=`${o}-${a}`;return t[a]=C,`id="${C}"`}).replace(/#([^\s^")]+)/g,(u,a)=>t[a]?`#${t[a]}`:u)},v={"<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;","&":"&amp;"},m=r=>r.replace(/[<>"'&]/g,t=>v[t]),y=d.createGradientId(e.staticIds),b=n.computed(()=>{const r=typeof e.colorGradientStart=="string"?e.colorGradientStart.trim():"",t=typeof e.colorGradientStop=="string"?e.colorGradientStop.trim():"";if(!r&&!t)return null;const o=d.resolveColorGradient({id:y,start:r,stop:t,direction:e.colorGradientDirection});return o||(console.warn(`[kong-icons] Ignoring invalid linear gradient: both \`colorGradientStart\` and \`colorGradientStop\` must be a valid hex, rgb()/rgba(), or var() color. Received start="${e.colorGradientStart}", stop="${e.colorGradientStop}".`),null)}),h=n.computed(()=>{const r=e.title?`<title data-testid="kui-icon-svg-title">${m(e.title)}</title>`:"",t=b.value,o=t?d.applyColorGradient(g,t):g,l=e.staticIds?o:S(o);return`${r}${l}`});return(r,t)=>(n.openBlock(),n.createBlock(n.resolveDynamicComponent(i.as),{"aria-hidden":i.decorative?"true":void 0,class:"kui-icon route-icon","data-testid":"kui-icon-wrapper-route-icon",style:n.normalizeStyle(f.value),tabindex:i.decorative?"-1":void 0},{default:n.withCtx(()=>[(n.openBlock(),n.createElementBlock("svg",{"aria-hidden":i.decorative?"true":void 0,"data-testid":"kui-icon-svg-route-icon",fill:"none",height:"100%",role:"img",viewBox:"0 0 24 24",width:"100%",xmlns:"http://www.w3.org/2000/svg",innerHTML:h.value},null,8,x))]),_:1},8,["aria-hidden","style","tabindex"]))}});exports.default=G;