@cypress-design/react-statusicon 0.4.6 → 0.4.8

package/.turbo/turbo-build.log

@@ -8,5 +8,5 @@ $ rollup -c ./rollup.config.mjs
 index.ts
 
 Consumers of your bundle will have to use chunk.default to access their default export, which may not be what you want. Use `output.exports: "named"` to disable this warning.
-created ./dist/index.umd.js, ./dist/index.es.mjs in 17.7s
+created ./dist/index.umd.js, ./dist/index.es.mjs in 21.8s
 $ tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @cypress-design/react-statusicon
 
+## 0.4.8
+
+### Patch Changes
+
+- Updated dependencies [[`e390827`](https://github.com/cypress-io/cypress-design/commit/e3908270ece513886c64cebcb78cebe0cd0d8c3d)]:
+  - @cypress-design/react-icon@0.23.0
+
+## 0.4.7
+
+### Patch Changes
+
+- [#234](https://github.com/cypress-io/cypress-design/pull/234) [`ff95963`](https://github.com/cypress-io/cypress-design/commit/ff95963feb7ae5d9eb01e6122e5e411517f105b9) Thanks [@elevatebart](https://github.com/elevatebart)! - allow to use a gradient icon more than once
+
+- Updated dependencies [[`ff95963`](https://github.com/cypress-io/cypress-design/commit/ff95963feb7ae5d9eb01e6122e5e411517f105b9)]:
+  - @cypress-design/react-icon@0.22.2
+
 ## 0.4.6
 
 ### Patch Changes

package/_OutlineStatusIcon.ts

@@ -14,6 +14,7 @@ export const OutlineStatusIcon: React.FC<
       statuses: outline.statuses,
       className: rest.className,
       size,
+      variantName: 'outline',
     }),
   })
 }

package/_SimpleStatusIcon.ts

@@ -14,6 +14,7 @@ export const SimpleStatusIcon: React.FC<
       statuses: simple.statuses,
       className: rest.className,
       size,
+      variantName: 'simple',
     }),
   })
 }

package/_SolidStatusIcon.ts

@@ -14,6 +14,7 @@ export const SolidStatusIcon: React.FC<
       statuses: solid.statuses,
       className: rest.className,
       size,
+      variantName: 'solid',
     }),
   })
 }

package/compileProps.ts

@@ -11,9 +11,11 @@ export const compileProps = ({
   statuses,
   className,
   size,
+  variantName,
 }: VariantStatusIconProps & {
   statuses: Record<string, IconSet>
   className: string | undefined
+  variantName: string
 }) => {
   const statusInfo = status ? statuses[status] : statuses.placeholder
 
@@ -34,5 +36,6 @@ export const compileProps = ({
     body: iconData,
     compiledClasses: [...compiledClasses, classes],
     size,
+    name: `status_${status}_${size}_${variantName}`,
   })
 }

package/dist/_OutlineStatusIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_OutlineStatusIcon.d.ts","sourceRoot":"./","sources":["_OutlineStatusIcon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAA;AAGlF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CACtC,sBAAsB,GAAG,QAAQ,CAAC,aAAa,CAAC,CAWjD,CAAA;AAED,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"_OutlineStatusIcon.d.ts","sourceRoot":"./","sources":["_OutlineStatusIcon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAA;AAGlF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CACtC,sBAAsB,GAAG,QAAQ,CAAC,aAAa,CAAC,CAYjD,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/dist/_SimpleStatusIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_SimpleStatusIcon.d.ts","sourceRoot":"./","sources":["_SimpleStatusIcon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAA;AAGlF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CACrC,sBAAsB,GAAG,QAAQ,CAAC,aAAa,CAAC,CAWjD,CAAA;AAED,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"_SimpleStatusIcon.d.ts","sourceRoot":"./","sources":["_SimpleStatusIcon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAA;AAGlF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CACrC,sBAAsB,GAAG,QAAQ,CAAC,aAAa,CAAC,CAYjD,CAAA;AAED,eAAe,gBAAgB,CAAA"}

package/dist/_SolidStatusIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_SolidStatusIcon.d.ts","sourceRoot":"./","sources":["_SolidStatusIcon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAA;AAGlF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CACpC,sBAAsB,GAAG,QAAQ,CAAC,aAAa,CAAC,CAWjD,CAAA;AAED,eAAe,eAAe,CAAA"}
+{"version":3,"file":"_SolidStatusIcon.d.ts","sourceRoot":"./","sources":["_SolidStatusIcon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAA;AAGlF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CACpC,sBAAsB,GAAG,QAAQ,CAAC,aAAa,CAAC,CAYjD,CAAA;AAED,eAAe,eAAe,CAAA"}

package/dist/compileProps.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
 /// <reference types="react" />
 import type { IconSet, VariantStatusIconProps } from '@cypress-design/constants-statusicon';
-export declare const compileProps: ({ status, statuses, className, size, }: VariantStatusIconProps & {
+export declare const compileProps: ({ status, statuses, className, size, variantName, }: VariantStatusIconProps & {
     statuses: Record<string, IconSet>;
     className: string | undefined;
+    variantName: string;
 }) => {
+    suppressHydrationWarning?: boolean | undefined;
     className: string | undefined;
     color?: string | undefined;
     height: string | number;
@@ -24,8 +26,8 @@ export declare const compileProps: ({ status, statuses, className, size, }: Vari
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     accentHeight?: string | number | undefined;
     accumulate?: "none" | "sum" | undefined;
-    additive?: "replace" | "sum" | undefined;
-    alignmentBaseline?: "alphabetic" | "hanging" | "ideographic" | "mathematical" | "inherit" | "auto" | "baseline" | "middle" | "after-edge" | "before-edge" | "central" | "text-after-edge" | "text-before-edge" | undefined;
+    additive?: "sum" | "replace" | undefined;
+    alignmentBaseline?: "alphabetic" | "hanging" | "ideographic" | "mathematical" | "auto" | "baseline" | "before-edge" | "text-before-edge" | "middle" | "central" | "after-edge" | "text-after-edge" | "inherit" | undefined;
     allowReorder?: "no" | "yes" | undefined;
     alphabetic?: string | number | undefined;
     amplitude?: string | number | undefined;
@@ -33,7 +35,7 @@ export declare const compileProps: ({ status, statuses, className, size, }: Vari
     ascent?: string | number | undefined;
     attributeName?: string | undefined;
     attributeType?: string | undefined;
-    autoReverse?: boolean | "false" | "true" | undefined;
+    autoReverse?: boolean | "true" | "false" | undefined;
     azimuth?: string | number | undefined;
     baseFrequency?: string | number | undefined;
     baselineShift?: string | number | undefined;
@@ -49,7 +51,7 @@ export declare const compileProps: ({ status, statuses, className, size, }: Vari
     clipPathUnits?: string | number | undefined;
     clipRule?: string | number | undefined;
     colorInterpolation?: string | number | undefined;
-    colorInterpolationFilters?: "inherit" | "auto" | "linearRGB" | "sRGB" | undefined;
+    colorInterpolationFilters?: "auto" | "inherit" | "sRGB" | "linearRGB" | undefined;
     colorProfile?: string | number | undefined;
     colorRendering?: string | number | undefined;
     contentScriptType?: string | number | undefined;
@@ -73,16 +75,16 @@ export declare const compileProps: ({ status, statuses, className, size, }: Vari
     enableBackground?: string | number | undefined;
     end?: string | number | undefined;
     exponent?: string | number | undefined;
-    externalResourcesRequired?: boolean | "false" | "true" | undefined;
+    externalResourcesRequired?: boolean | "true" | "false" | undefined;
     fill: string;
     fillOpacity?: string | number | undefined;
-    fillRule?: "inherit" | "evenodd" | "nonzero" | undefined;
+    fillRule?: "inherit" | "nonzero" | "evenodd" | undefined;
     filter?: string | undefined;
     filterRes?: string | number | undefined;
     filterUnits?: string | number | undefined;
     floodColor?: string | number | undefined;
     floodOpacity?: string | number | undefined;
-    focusable?: boolean | "auto" | "false" | "true" | undefined;
+    focusable?: boolean | "auto" | "true" | "false" | undefined;
     fontFamily?: string | undefined;
     fontSize?: string | number | undefined;
     fontSizeAdjust?: string | number | undefined;
@@ -162,7 +164,7 @@ export declare const compileProps: ({ status, statuses, className, size, }: Vari
     pointsAtX?: string | number | undefined;
     pointsAtY?: string | number | undefined;
     pointsAtZ?: string | number | undefined;
-    preserveAlpha?: boolean | "false" | "true" | undefined;
+    preserveAlpha?: boolean | "true" | "false" | undefined;
     preserveAspectRatio?: string | undefined;
     primitiveUnits?: string | number | undefined;
     r?: string | number | undefined;
@@ -201,8 +203,8 @@ export declare const compileProps: ({ status, statuses, className, size, }: Vari
     stroke?: string | undefined;
     strokeDasharray?: string | number | undefined;
     strokeDashoffset?: string | number | undefined;
-    strokeLinecap?: "inherit" | "round" | "butt" | "square" | undefined;
-    strokeLinejoin?: "inherit" | "round" | "bevel" | "miter" | undefined;
+    strokeLinecap?: "inherit" | "butt" | "round" | "square" | undefined;
+    strokeLinejoin?: "inherit" | "round" | "miter" | "bevel" | undefined;
     strokeMiterlimit?: string | number | undefined;
     strokeOpacity?: string | number | undefined;
     strokeWidth?: string | number | undefined;
@@ -265,47 +267,52 @@ export declare const compileProps: ({ status, statuses, className, size, }: Vari
     z?: string | number | undefined;
     zoomAndPan?: string | undefined;
     'aria-activedescendant'?: string | undefined;
-    'aria-atomic'?: boolean | "false" | "true" | undefined;
-    'aria-autocomplete'?: "both" | "none" | "inline" | "list" | undefined;
-    'aria-busy'?: boolean | "false" | "true" | undefined;
-    'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
+    'aria-atomic'?: boolean | "true" | "false" | undefined;
+    'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
+    'aria-braillelabel'?: string | undefined;
+    'aria-brailleroledescription'?: string | undefined;
+    'aria-busy'?: boolean | "true" | "false" | undefined;
+    'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
     'aria-colcount'?: number | undefined;
     'aria-colindex'?: number | undefined;
+    'aria-colindextext'?: string | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
+    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined;
+    'aria-description'?: string | undefined;
     'aria-details'?: string | undefined;
-    'aria-disabled'?: boolean | "false" | "true" | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    'aria-disabled'?: boolean | "true" | "false" | undefined;
+    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
-    'aria-expanded'?: boolean | "false" | "true" | undefined;
+    'aria-expanded'?: boolean | "true" | "false" | undefined;
     'aria-flowto'?: string | undefined;
-    'aria-grabbed'?: boolean | "false" | "true" | undefined;
-    'aria-haspopup'?: boolean | "dialog" | "menu" | "listbox" | "grid" | "false" | "true" | "tree" | undefined;
-    'aria-hidden'?: boolean | "false" | "true" | undefined;
-    'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+    'aria-grabbed'?: boolean | "true" | "false" | undefined;
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
+    'aria-hidden'?: boolean | "true" | "false" | undefined;
+    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
     'aria-label'?: string | undefined;
     'aria-labelledby'?: string | undefined;
     'aria-level'?: number | undefined;
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
-    'aria-modal'?: boolean | "false" | "true" | undefined;
-    'aria-multiline'?: boolean | "false" | "true" | undefined;
-    'aria-multiselectable'?: boolean | "false" | "true" | undefined;
+    'aria-modal'?: boolean | "true" | "false" | undefined;
+    'aria-multiline'?: boolean | "true" | "false" | undefined;
+    'aria-multiselectable'?: boolean | "true" | "false" | undefined;
     'aria-orientation'?: "horizontal" | "vertical" | undefined;
     'aria-owns'?: string | undefined;
     'aria-placeholder'?: string | undefined;
     'aria-posinset'?: number | undefined;
-    'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
-    'aria-readonly'?: boolean | "false" | "true" | undefined;
-    'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-    'aria-required'?: boolean | "false" | "true" | undefined;
+    'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
+    'aria-readonly'?: boolean | "true" | "false" | undefined;
+    'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+    'aria-required'?: boolean | "true" | "false" | undefined;
     'aria-roledescription'?: string | undefined;
     'aria-rowcount'?: number | undefined;
     'aria-rowindex'?: number | undefined;
+    'aria-rowindextext'?: string | undefined;
     'aria-rowspan'?: number | undefined;
-    'aria-selected'?: boolean | "false" | "true" | undefined;
+    'aria-selected'?: boolean | "true" | "false" | undefined;
     'aria-setsize'?: number | undefined;
     'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
     'aria-valuemax'?: number | undefined;

package/dist/compileProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"compileProps.d.ts","sourceRoot":"./","sources":["compileProps.ts"],"names":[],"mappings":";;AAAA,OAAO,KAAK,EACV,OAAO,EACP,sBAAsB,EACvB,MAAM,sCAAsC,CAAA;AAK7C,eAAO,MAAM,YAAY;cAMb,OAAO,MAAM,EAAE,OAAO,CAAC;eACtB,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsB9B,CAAA"}
+{"version":3,"file":"compileProps.d.ts","sourceRoot":"./","sources":["compileProps.ts"],"names":[],"mappings":";;AAAA,OAAO,KAAK,EACV,OAAO,EACP,sBAAsB,EACvB,MAAM,sCAAsC,CAAA;AAK7C,eAAO,MAAM,YAAY;cAOb,OAAO,MAAM,EAAE,OAAO,CAAC;eACtB,MAAM,GAAG,SAAS;iBAChB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuBpB,CAAA"}

package/dist/index.es.mjs

@@ -16,7 +16,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 
 var __assign$1 = function() {
@@ -50,7 +50,12 @@ function __spreadArray(to, from, pack) {
         }
     }
     return to.concat(ar || Array.prototype.slice.call(from));
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 /**
  * This "const" is used to create the list of statuses
@@ -416,7 +421,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 
 var __assign = function() {
@@ -440,10 +445,15 @@ function __rest(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 var compileReactIconProperties = function (_a) {
-    var body = _a.body, compiledClasses = _a.compiledClasses, size = _a.size, attributes = __rest(_a, ["body", "compiledClasses", "size"]);
+    var body = _a.body, defs = _a.defs, compiledClasses = _a.compiledClasses, size = _a.size, name = _a.name, attributes = __rest(_a, ["body", "defs", "compiledClasses", "size", "name"]);
     var filteredAttributes = Object.keys(attributes).reduce(function (newAttributes, attrName) {
         if (!ICON_COLOR_PROP_NAMES.includes(attrName) &&
             attrName !== 'name') {
@@ -454,6 +464,20 @@ var compileReactIconProperties = function (_a) {
         }
         return newAttributes;
     }, {});
+    React.useEffect(function () {
+        var iconFileId = "".concat(name, "_").concat(size);
+        if (defs) {
+            if (document.querySelector("[data-cy-svg-defs=\"".concat(iconFileId, "\"]"))) {
+                return;
+            }
+            var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            svgElement.setAttribute('data-cy-svg-defs', iconFileId);
+            svgElement.setAttribute('width', '0');
+            svgElement.setAttribute('height', '0');
+            svgElement.innerHTML = defs;
+            document.body.appendChild(svgElement);
+        }
+    }, [defs]);
     var componentProps = __assign({ width: size, height: size, viewBox: "0 0 ".concat(size, " ").concat(size), fill: 'none', dangerouslySetInnerHTML: {
             __html: body,
         }, className: undefined }, filteredAttributes);
@@ -467,10 +491,10 @@ var compileReactIconProperties = function (_a) {
 };
 
 
-/* <wind-keep class="filter"> */
+/* <wind-keep class="filter icon-light-secondary icon-dark-secondary"> */
 
 var compileProps = function (_a) {
-    var status = _a.status, statuses = _a.statuses, className = _a.className, size = _a.size;
+    var status = _a.status, statuses = _a.statuses, className = _a.className, size = _a.size, variantName = _a.variantName;
     var statusInfo = status ? statuses[status] : statuses.placeholder;
     var iconInfo = status ? statuses$3[status] : statuses$3.placeholder;
     var iconData = statusInfo["size".concat(size, "Icon")].data;
@@ -485,6 +509,7 @@ var compileProps = function (_a) {
         body: iconData,
         compiledClasses: __spreadArray(__spreadArray([], compiledClasses, true), [classes], false),
         size: size,
+        name: "status_".concat(status, "_").concat(size, "_").concat(variantName),
     });
 };
 
@@ -495,6 +520,7 @@ var OutlineStatusIcon = function (_a) {
         statuses: statuses$2,
         className: rest.className,
         size: size,
+        variantName: 'outline',
     })));
 };
 
@@ -505,6 +531,7 @@ var SimpleStatusIcon = function (_a) {
         statuses: statuses$1,
         className: rest.className,
         size: size,
+        variantName: 'simple',
     })));
 };
 
@@ -515,6 +542,7 @@ var SolidStatusIcon = function (_a) {
         statuses: statuses,
         className: rest.className,
         size: size,
+        variantName: 'solid',
     })));
 };
 
@@ -532,4 +560,4 @@ var StatusIcon = function (_a) {
 export { OutlineStatusIcon, SimpleStatusIcon, SolidStatusIcon, StatusIcon as default };
 //# sourceMappingURL=index.es.mjs.map
 
-/* <wind-keep class="outline inline-block"> */
+/* <wind-keep class="outline inline-block icon-dark-indigo-400 icon-light-gray-100 icon-dark-jade-400 icon-dark-red-400 icon-dark-gray-100 icon-dark-gray-300 icon-dark-orange-400 icon-dark-gray-400"> */