@iress-oss/ids-components 6.0.0-alpha.20 → 6.0.0-alpha.21

package/dist/{Button-BTkololu.js → Button-BwZzMODc.js}

@@ -1,12 +1,12 @@
 import { jsxs as q, Fragment as N, jsx as u } from "react/jsx-runtime";
-import { forwardRef as j, useId as M, useRef as R, useMemo as n, useCallback as E, useImperativeHandle as W } from "react";
-import { IressSpinner as A } from "./components/Spinner/Spinner.js";
+import { forwardRef as j, useId as M, useRef as R, useMemo as n, useCallback as E, useImperativeHandle as A } from "react";
+import { IressSpinner as K } from "./components/Spinner/Spinner.js";
 import "./components/Spinner/Spinner.styles.js";
 import { GlobalCSSClass as d } from "./enums.js";
 import "./components/ButtonGroup/ButtonGroup.js";
 import "./components/ButtonGroup/ButtonGroup.styles.js";
-import { useButtonGroupItem as K } from "./components/ButtonGroup/hooks/useButtonGroupItem.js";
-import { s as O } from "./is-valid-prop-DweT-eOL.js";
+import { useButtonGroupItem as O } from "./components/ButtonGroup/hooks/useButtonGroupItem.js";
+import { s as W } from "./is-valid-prop-DweT-eOL.js";
 import { m as D, a as L, s as T, i as z, c as J } from "./css-DNdLYQld.js";
 import { c as Q } from "./cx-DN21T1EH.js";
 import { c as U } from "./create-recipe-DjqynAXe.js";
@@ -367,7 +367,7 @@ const h = {}, Y = [
   value: w,
   ...f
 }, F) => {
-  const i = M(), I = w ?? (typeof s == "string" || typeof s == "number" || typeof s == "boolean" ? s : void 0), B = X(), p = R(null), c = K({ value: I }), G = n(() => c ? c.active ? "primary" : "tertiary" : x, [c, x]), e = so({
+  const i = M(), I = w ?? (typeof s == "string" || typeof s == "number" || typeof s == "boolean" ? s : void 0), B = X(), p = R(null), c = O({ value: I }), G = n(() => c ? c.active ? "primary" : "tertiary" : x, [c, x]), e = so({
     active: (
       // eslint-disable-next-line react-hooks/refs -- ref needed for forwarding
       o ?? B?.isActiveActivator(p.current)
@@ -379,7 +379,7 @@ const h = {}, Y = [
     noWrap: H,
     status: S
   }), [v, a] = n(
-    () => O(f),
+    () => W(f),
     [f]
   ), _ = E(
     (V) => {
@@ -391,10 +391,9 @@ const h = {}, Y = [
       children: /* @__PURE__ */ q(N, { children: [
         m && !r && /* @__PURE__ */ u("span", { className: e.prepend, children: m }),
         !!r && /* @__PURE__ */ u(
-          A,
+          K,
           {
             className: e.spinner,
-            fixedWidth: !0,
             id: i,
             screenreaderText: r === !0 ? "Loading" : r
           }
@@ -427,7 +426,7 @@ const h = {}, Y = [
       e.spinner
     ]
   );
-  W(F, () => p.current);
+  A(F, () => p.current);
   const k = n(
     () => l ?? (a.href ? "a" : "button"),
     [l, a.href]

package/dist/{Provider-B87u_maF.js → Provider-Dw49edAo.js}

@@ -1,37 +1,39 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { jsxs as $, jsx as t } from "react/jsx-runtime";
 import "./components/Modal/Modal.styles.js";
 import "./components/Modal/Modal.js";
-import { IressModalProvider as n } from "./components/Modal/ModalProvider.js";
+import { IressModalProvider as s } from "./components/Modal/ModalProvider.js";
 import "./components/Modal/hooks/useModal.js";
-import { IressToasterProvider as d } from "./components/Toaster/ToasterProvider.js";
+import { IressToasterProvider as a } from "./components/Toaster/ToasterProvider.js";
 import "./components/Toaster/hooks/useToaster.js";
 import "./components/Toaster/Toaster.styles.js";
 import "./components/Toaster/components/Toast/Toast.styles.js";
 import "./components/Slideout/Slideout.js";
 import "./components/Slideout/Slideout.styles.js";
-import { IressSlideoutProvider as m } from "./components/Slideout/SlideoutProvider.js";
+import { IressSlideoutProvider as n } from "./components/Slideout/SlideoutProvider.js";
 import "./components/Slideout/hooks/useSlideout.js";
-import { createPortal as y } from "react-dom";
+import { createPortal as C } from "react-dom";
+import "./components/Icon/Icon.js";
+import "./components/Icon/Icon.styles.js";
+import { IressIconProvider as m } from "./components/Icon/IconProvider.js";
 var o = /* @__PURE__ */ ((e) => (e.Color = "color", e.Dimension = "dimension", e.FontFamily = "fontFamily", e.FontSize = "fontSize", e.Background = "background", e.Border = "border", e.Radius = "radius", e.Shadow = "shadow", e.Typography = "typography", e))(o || {});
 o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color;
 o.Shadow, o.Border, o.Shadow, o.Border, o.Shadow, o.Border, o.Shadow, o.Color, o.Shadow, o.Color;
 o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Radius, o.Radius, o.Radius, o.Radius;
 o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension;
-const C = [
+const d = [
   "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
 ];
 o.FontSize, o.FontFamily, o.FontFamily, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography;
-const h = ({
+const f = ({
   children: e,
-  container: t,
-  noDefaultFont: l,
-  noIcons: i,
-  position: s,
-  ...$
-}) => /* @__PURE__ */ a(n, { container: t, children: [
-  /* @__PURE__ */ r(d, { container: t, position: s, children: /* @__PURE__ */ r(m, { container: t, ...$, children: e }) }),
-  !l && y(
-    C.map((p) => /* @__PURE__ */ r(
+  container: r,
+  noDefaultFont: y,
+  position: l,
+  ...i
+}) => /* @__PURE__ */ $(s, { container: r, children: [
+  /* @__PURE__ */ t(a, { container: r, position: l, children: /* @__PURE__ */ t(n, { container: r, ...i, children: /* @__PURE__ */ t(m, { container: r, noSubsetting: !0, children: e }) }) }),
+  !y && C(
+    d.map((p) => /* @__PURE__ */ t(
       "link",
       {
         rel: "stylesheet",
@@ -42,22 +44,10 @@ const h = ({
     )),
     document.head,
     "design-system-font"
-  ),
-  !i && y(
-    /* @__PURE__ */ r(
-      "link",
-      {
-        rel: "stylesheet",
-        href: "https://cdn.iress.com/icons/5.15.4/css/combined.min.css",
-        "data-iress-design-system-icons": !0
-      }
-    ),
-    document.head,
-    "design-system-icons"
   )
 ] });
-h.displayName = "IressProvider";
+f.displayName = "IressProvider";
 export {
-  h as I,
-  C as i
+  f as I,
+  d as i
 };

package/dist/components/Alert/Alert.js

@@ -1,39 +1,40 @@
-import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { jsx as o, jsxs as i } from "react/jsx-runtime";
 import { useMemo as B, createElement as E } from "react";
 import { IressIcon as V } from "../Icon/Icon.js";
 import "../Icon/Icon.styles.js";
+import "../Icon/IconProvider.js";
 import { IressText as u } from "../Text/Text.js";
 import { propagateTestid as N } from "../../helpers/utility/propagateTestid.js";
 import { alert as h } from "./Alert.styles.js";
 import { c as q } from "../../css-DNdLYQld.js";
 import { c as I } from "../../cx-DN21T1EH.js";
 import { GlobalCSSClass as F } from "../../enums.js";
-import { I as G } from "../../Button-BTkololu.js";
+import { I as G } from "../../Button-BwZzMODc.js";
 import { IressCloseButton as L } from "../Button/CloseButton/CloseButton.js";
 import "../Inline/Inline.styles.js";
 import { IressInline as M } from "../Inline/Inline.js";
 import { useControlledState as O } from "../../hooks/useControlledState.js";
 import { s as R } from "../../is-valid-prop-DweT-eOL.js";
-const W = {
+const _ = {
   danger: "ban",
   info: "info-square",
   success: "check",
   warning: "exclamation-triangle"
-}, _ = ({
+}, $ = ({
   actions: n,
   children: g,
   className: x,
   defaultDismissed: C,
   dismissed: b,
   footer: c,
-  heading: o,
+  heading: t,
   icon: m,
   onDismiss: d,
   status: r = "info",
-  variant: i,
+  variant: a,
   ...l
 }) => {
-  const y = !!d, e = h({ status: r, variant: i }), A = h.raw({ status: r, variant: i }), p = !!n?.length, S = !!c || p, [T, k] = R(l), { value: v, setValue: w } = O({
+  const y = !!d, s = h({ status: r, variant: a }), A = h.raw({ status: r, variant: a }), p = !!n?.length, S = !!c || p, [T, k] = R(l), { value: v, setValue: w } = O({
     component: "IressAlert",
     defaultValue: C,
     propName: "dismissed",
@@ -41,18 +42,17 @@ const W = {
   }), f = B(() => {
     if (m === !1)
       return null;
-    const s = m ?? W[r];
-    return /* @__PURE__ */ t(
+    const e = m ?? _[r];
+    return /* @__PURE__ */ o(
       V,
       {
-        name: s,
+        name: e,
         screenreaderText: `${r}: `,
-        fixedWidth: !0,
-        className: e.icon
+        className: s.icon
       }
     );
-  }, [e.icon, m, r]);
-  return v ? null : /* @__PURE__ */ a(
+  }, [s.icon, m, r]);
+  return v ? null : /* @__PURE__ */ i(
     u,
     {
       className: I(
@@ -62,32 +62,32 @@ const W = {
       ),
       ...k,
       children: [
-        i !== "sidebar" && f,
-        /* @__PURE__ */ a("div", { className: e.wrapper, children: [
-          o && /* @__PURE__ */ t(
+        a !== "sidebar" && f,
+        /* @__PURE__ */ i("div", { className: s.wrapper, children: [
+          t && /* @__PURE__ */ o(
             "div",
             {
-              className: e.heading,
+              className: s.heading,
               "data-testid": N(l["data-testid"], "heading"),
-              children: typeof o == "string" ? /* @__PURE__ */ a(u, { element: "h2", className: e.heading, children: [
-                i === "sidebar" && f,
+              children: typeof t == "string" ? /* @__PURE__ */ i(u, { element: "h2", className: s.heading, children: [
+                a === "sidebar" && f,
                 " ",
-                o
-              ] }) : o
+                t
+              ] }) : t
             }
           ),
-          /* @__PURE__ */ t("div", { className: e.children, children: g }),
-          S && /* @__PURE__ */ a(
+          /* @__PURE__ */ o("div", { className: s.children, children: g }),
+          S && /* @__PURE__ */ i(
             "div",
             {
-              className: e.footer,
+              className: s.footer,
               "data-testid": N(l["data-testid"], "footer"),
               children: [
-                p && /* @__PURE__ */ t(M, { gap: "sm", pb: "spacing.1", children: n?.map((s, j) => /* @__PURE__ */ E(
+                p && /* @__PURE__ */ o(M, { gap: "sm", pb: "spacing.1", children: n?.map((e, j) => /* @__PURE__ */ E(
                   G,
                   {
-                    ...s,
-                    className: I(s.className, e.action),
+                    ...e,
+                    className: I(e.className, s.action),
                     key: j
                   }
                 )) }),
@@ -96,12 +96,12 @@ const W = {
             }
           )
         ] }),
-        y && /* @__PURE__ */ t(
+        y && /* @__PURE__ */ o(
           L,
           {
-            className: e.dismiss,
-            onClick: (s) => {
-              d?.(s), w(!0);
+            className: s.dismiss,
+            onClick: (e) => {
+              d?.(e), w(!0);
             }
           }
         )
@@ -109,7 +109,7 @@ const W = {
     }
   );
 };
-_.displayName = "IressAlert";
+$.displayName = "IressAlert";
 export {
-  _ as IressAlert
+  $ as IressAlert
 };

package/dist/components/Button/Button.js

@@ -9,7 +9,7 @@ import "../ButtonGroup/hooks/useButtonGroupItem.js";
 import "../../is-valid-prop-DweT-eOL.js";
 import "../../css-DNdLYQld.js";
 import "../../cx-DN21T1EH.js";
-import { I as g } from "../../Button-BTkololu.js";
+import { I as g } from "../../Button-BwZzMODc.js";
 import "../Popover/Popover.js";
 import "../Popover/Popover.styles.js";
 import "../Popover/InputPopover/InputPopover.js";

package/dist/components/Button/CloseButton/CloseButton.js

@@ -1,27 +1,28 @@
 import { jsx as o } from "react/jsx-runtime";
-import { I as e } from "../../../Button-BTkololu.js";
-import { IressIcon as a } from "../../Icon/Icon.js";
+import { I as e } from "../../../Button-BwZzMODc.js";
+import { IressIcon as i } from "../../Icon/Icon.js";
 import "../../Icon/Icon.styles.js";
-import { forwardRef as i } from "react";
+import "../../Icon/IconProvider.js";
+import { forwardRef as a } from "react";
 import { c as l } from "../../../cx-DN21T1EH.js";
-import { GlobalCSSClass as n } from "../../../enums.js";
-const p = i(
+import { GlobalCSSClass as p } from "../../../enums.js";
+const n = a(
   ({
-    className: s,
-    screenreaderText: r = "Close button",
+    className: r,
+    screenreaderText: s = "Close button",
     ...t
   }, m) => /* @__PURE__ */ o(
     e,
     {
       ...t,
-      className: l(s, n.CloseButton),
+      className: l(r, p.CloseButton),
       mode: "muted",
       ref: m,
-      children: /* @__PURE__ */ o(a, { name: "times", screenreaderText: r })
+      children: /* @__PURE__ */ o(i, { name: "times", screenreaderText: s })
     }
   )
 );
-p.displayName = "IressCloseButton";
+n.displayName = "IressCloseButton";
 export {
-  p as IressCloseButton
+  n as IressCloseButton
 };

package/dist/components/Button/index.js

@@ -1,4 +1,4 @@
-import { I as s, b as r } from "../../Button-BTkololu.js";
+import { I as s, b as r } from "../../Button-BwZzMODc.js";
 import { IressCloseButton as n } from "./CloseButton/CloseButton.js";
 export {
   s as IressButton,

package/dist/components/Field/components/FieldFooter.js

@@ -7,6 +7,7 @@ import "../../ValidationMessage/ValidationLink/ValidationLink.js";
 import { IressValidationSummary as I } from "../../ValidationMessage/ValidationSummary/ValidationSummary.js";
 import { IressIcon as E } from "../../Icon/Icon.js";
 import "../../Icon/Icon.styles.js";
+import "../../Icon/IconProvider.js";
 import { field as S } from "../Field.styles.js";
 import { c } from "../../../css-DNdLYQld.js";
 import { c as v } from "../../../cx-DN21T1EH.js";
@@ -20,26 +21,26 @@ const b = (o) => /* @__PURE__ */ r(E, { name: "exclamation-triangle", ...o, pr:
   supplementary: n,
   ...u
 }) => {
-  const a = S({ multipleFields: p }), t = l(null), m = l(null), e = x(
+  const a = S({ multipleFields: p }), e = l(null), m = l(null), t = x(
     () => !!s || i.length > 0,
     [s, i.length]
   );
   return h(() => {
-    if (!t.current || m.current === e) {
-      m.current = e;
+    if (!e.current || m.current === t) {
+      m.current = t;
       return;
     }
-    t.current.classList.remove(
+    e.current.classList.remove(
       c({ animationStyle: "field-footer" })
-    ), t.current.offsetHeight, m.current = e, t.current.classList.add(c({ animationStyle: "field-footer" }));
-  }, [e]), !n && !e ? null : /* @__PURE__ */ d(
+    ), e.current.offsetHeight, m.current = t, e.current.classList.add(c({ animationStyle: "field-footer" }));
+  }, [t]), !n && !t ? null : /* @__PURE__ */ d(
     g.div,
     {
       ...u,
       className: v(o, a.footer),
-      ref: t,
+      ref: e,
       children: [
-        e && /* @__PURE__ */ r(
+        t && /* @__PURE__ */ r(
           I,
           {
             itemStyle: { textStyle: "typography.body.sm" },
@@ -50,7 +51,7 @@ const b = (o) => /* @__PURE__ */ r(E, { name: "exclamation-triangle", ...o, pr:
             children: s
           }
         ),
-        !e && /* @__PURE__ */ r(F, { className: a.supplementary, children: n })
+        !t && /* @__PURE__ */ r(F, { className: a.supplementary, children: n })
       ]
     }
   );

package/dist/components/Field/components/FieldHint.js

@@ -1,6 +1,7 @@
 import { jsx as t, Fragment as s, jsxs as a } from "react/jsx-runtime";
 import { IressIcon as l } from "../../Icon/Icon.js";
 import "../../Icon/Icon.styles.js";
+import "../../Icon/IconProvider.js";
 import { IressTooltip as p } from "../../Tooltip/Tooltip.js";
 import "../../Tooltip/Tooltip.styles.js";
 import { propagateTestid as f } from "../../../helpers/utility/propagateTestid.js";
@@ -32,7 +33,7 @@ const x = ({
       }
     )
   ] });
-}, v = ({ hint: r }) => /* @__PURE__ */ t(
+}, w = ({ hint: r }) => /* @__PURE__ */ t(
   p,
   {
     tooltipText: typeof r == "string" ? r : "Additional information",
@@ -50,5 +51,5 @@ const x = ({
 x.displayName = "FieldHint";
 export {
   x as FieldHint,
-  v as FieldHintIcon
+  w as FieldHintIcon
 };

package/dist/components/Filter/Filter.js

@@ -9,7 +9,7 @@ import { IressPopover as me } from "../Popover/Popover.js";
 import "../Popover/Popover.styles.js";
 import "../Popover/InputPopover/InputPopover.js";
 import "../Popover/hooks/useFloatingPopover.js";
-import { I as ce } from "../../Button-BTkololu.js";
+import { I as ce } from "../../Button-BwZzMODc.js";
 import "../Button/CloseButton/CloseButton.js";
 import { useRichSelectState as de } from "../RichSelect/hooks/useRichSelectState.js";
 import "../../Autocomplete-DUsna_OY.js";
@@ -34,6 +34,7 @@ import { FilterResetButton as be } from "./components/FilterResetButton.js";
 import { FilterLabel as Se } from "./components/FilterLabel.js";
 import { IressIcon as w } from "../Icon/Icon.js";
 import "../Icon/Icon.styles.js";
+import "../Icon/IconProvider.js";
 import { GlobalCSSClass as Ce } from "../../enums.js";
 import { FilterResultsDescriptor as Pe } from "./components/FilterResultsDescriptor.js";
 const N = {

package/dist/components/Filter/components/FilterResetButton.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { I as i } from "../../../Button-BTkololu.js";
+import { I as i } from "../../../Button-BwZzMODc.js";
 import "../../Button/CloseButton/CloseButton.js";
 import { filter as p } from "../Filter.styles.js";
 import { usePopoverItem as f } from "../../Popover/hooks/usePopoverItem.js";

package/dist/components/Filter/components/FilterSearch.d.ts

@@ -1,5 +1,5 @@
 import { InputRef } from '../../Input/InputBase/InputBase';
-export declare const FilterSearch: import('react').ForwardRefExoticComponent<Omit<import('../../Input').InputBaseProps<undefined>, "defaultValue" | "onChange" | "value"> & {
+export declare const FilterSearch: import('react').ForwardRefExoticComponent<Omit<import('../../Input').InputBaseProps<undefined>, "value" | "defaultValue" | "onChange"> & {
     alignRight?: boolean;
     append?: import('react').ReactNode;
     defaultValue?: string | number | undefined;

package/dist/components/Icon/Icon.constants.d.ts

@@ -0,0 +1,7 @@
+export declare const MATERIAL_SYMBOLS: {
+    readonly figmaGrade: "Emphasis";
+    readonly figmaOpticalSize: "24dp";
+    readonly grade: 0;
+    readonly opticalSize: 36;
+    readonly weight: 300;
+};

package/dist/components/Icon/Icon.constants.js

@@ -0,0 +1,10 @@
+const i = {
+  figmaGrade: "Emphasis",
+  figmaOpticalSize: "24dp",
+  grade: 0,
+  opticalSize: 36,
+  weight: 300
+};
+export {
+  i as MATERIAL_SYMBOLS
+};

package/dist/components/Icon/Icon.d.ts

@@ -1,39 +1,57 @@
 import { IressStyledProps } from '../../types';
 import { IconName } from '@fortawesome/fontawesome-common-types';
-export interface IressIconProps extends IressStyledProps<'span'> {
+import { MaterialSymbol } from 'material-symbols';
+import { IconType } from './IconProvider';
+import { FontAwesomeIconWithMaterialEquivalent } from './helpers/iconMapping';
+export type IressIconProps<P extends IconType = 'material'> = IressStyledProps<'span'> & {
     /**
-     * The name of the icon
+     * Filled variant for Material Symbols
+     * When true, icon uses filled style (fill=1)
+     * Useful for active/selected states
+     * @default false
      */
-    name: IconName;
+    filled?: P extends 'material' ? boolean : never;
     /**
-     * Adds screen reader text if the icon needs to be visible to screen reader users
+     * Adds fixed width class for Font Awesome icons - fa-fw
+     * @deprecated Font Awesome specific. Material Symbols inherit text size automatically.
      */
-    screenreaderText?: string;
+    fixedWidth?: P extends 'fontawesome' ? boolean : never;
     /**
-     * The icon set to be used:
-     * - `fal`: Font Awesome Light
-     * - `fab`: Font Awesome Brand
-     * @default 'fal'
+     * The name of the icon.
+     * Note: Font Awesome is deprecated. Please migrate to Material Symbols.
      */
-    set?: 'fal' | 'fab';
+    name: P extends 'fontawesome' ? IconName : MaterialSymbol | FontAwesomeIconWithMaterialEquivalent;
     /**
-     * Amount of degrees to rotate the icon.
+     * Adds screen reader text if the icon needs to be visible to screen reader users
      */
-    rotate?: 90 | 180 | 270;
+    screenreaderText?: string;
     /**
-     * Adds fixed width class for Font Awesome icons - fa-fw
+     * Amount of degrees to rotate the icon.
      */
-    fixedWidth?: boolean;
+    rotate?: 90 | 180 | 270;
     /**
      * Flip the icon horizontally, vertically or both axes.
      */
     flip?: 'horizontal' | 'vertical' | 'both';
+    /**
+     * The icon set to be used (Font Awesome only):
+     * - `fal`: Font Awesome Light
+     * - `fab`: Font Awesome Brand
+     * @default 'fal'
+     * @deprecated Font Awesome is deprecated. Please migrate to Material Symbols.
+     */
+    set?: P extends 'fontawesome' ? 'fal' | 'fab' : never;
     /**
      * Accepts a numeric value for speed for one rotation.
      */
     spin?: 'half' | 1 | 2 | 3;
-}
+    /**
+     * The icon provider to use
+     * Note: Font Awesome is deprecated. Please migrate to Material Symbols.
+     */
+    type?: P;
+};
 export declare const IressIcon: {
-    ({ className, fixedWidth, flip, name, rotate, screenreaderText, set, spin, ...restProps }: IressIconProps): import("react/jsx-runtime").JSX.Element;
+    <P extends IconType = "material">({ className, flip, name, rotate, screenreaderText, spin, type, ...restProps }: IressIconProps<P>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };