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

package/dist/components/Icon/hooks/useDynamicFontSubsetting.js

@@ -0,0 +1,78 @@
+import { useState as w, useRef as N, useCallback as s, useEffect as F } from "react";
+const P = ({
+  icons: f,
+  buildUrl: m,
+  dataAttribute: l,
+  fontFamily: u,
+  disabled: i = !1,
+  noSubsetting: c = !1
+}) => {
+  const [h, $] = w(/* @__PURE__ */ new Set()), [E, y] = w(!1), a = N(null), o = s((e) => {
+    $((t) => {
+      const n = new Set(t);
+      return e.forEach((L) => n.add(L)), n;
+    });
+  }, []), p = s((e) => {
+    e?.parentNode && e.parentNode.removeChild(e);
+  }, []), C = s(
+    (e, t) => {
+      o(t), p(e), c && y(!0);
+    },
+    [o, p, c]
+  ), d = s(
+    (e) => {
+      setTimeout(() => {
+        o(e);
+      }, 3e3);
+    },
+    [o]
+  ), S = s(
+    (e, t) => {
+      "fonts" in document ? (document.fonts.check(`24px "${u}"`) ? Promise.resolve() : document.fonts.load(`24px "${u}"`).catch(() => {
+      })).then(() => C(e, t)).catch(() => d(t)) : setTimeout(() => o(t), 1e3);
+    },
+    [u, C, d, o]
+  );
+  return F(() => () => {
+    a.current?.parentNode && a.current.parentNode.removeChild(a.current);
+  }, []), F(() => {
+    if (i)
+      return;
+    const e = Array.from(f);
+    e.sort((x, v) => x.localeCompare(v));
+    const t = m(e), n = document.querySelector(`style[data-${l}]`);
+    if (n?.getAttribute("data-url") === t) {
+      c && y(!0);
+      return;
+    }
+    (async () => {
+      try {
+        const I = `@layer reset { ${await (await fetch(t)).text()} }`, r = document.createElement("style");
+        r.textContent = I, r.setAttribute(`data-${l}`, "true"), r.setAttribute("data-url", t), document.head.appendChild(r), a.current = r, S(n, e);
+      } catch {
+        d(e);
+      }
+    })();
+  }, [
+    f,
+    m,
+    l,
+    i,
+    S,
+    d
+  ]), {
+    /**
+     * Set of icons that have been loaded and are ready to use
+     */
+    loadedIcons: h,
+    /**
+     * Check if a specific icon has been loaded
+     * In noSubsetting mode, returns true if fullyLoaded
+     * In subsetting mode, only returns true for individually loaded icons
+     */
+    isIconLoaded: (e) => c ? E : h.has(e)
+  };
+};
+export {
+  P as useDynamicFontSubsetting
+};

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

@@ -1,2 +1,4 @@
 export * from './Icon';
+export * from './Icon.constants';
 export * from './Icon.styles';
+export { IressIconProvider, type IressIconProviderProps } from './IconProvider';

package/dist/components/Icon/index.js

@@ -1,6 +1,10 @@
 import { IressIcon as e } from "./Icon.js";
-import { icon as f } from "./Icon.styles.js";
+import { MATERIAL_SYMBOLS as f } from "./Icon.constants.js";
+import { icon as p } from "./Icon.styles.js";
+import { IressIconProvider as t } from "./IconProvider.js";
 export {
   e as IressIcon,
-  f as icon
+  t as IressIconProvider,
+  f as MATERIAL_SYMBOLS,
+  p as icon
 };

package/dist/components/Input/Input.js

@@ -13,7 +13,7 @@ import { input as X } from "./Input.styles.js";
 import { s as Z } from "../../factory-CsinCTPr.js";
 import { s as _ } from "../../is-valid-prop-DweT-eOL.js";
 import { useNoDefaultValueInForms as ee } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
-import "../../Button-BTkololu.js";
+import "../../Button-BwZzMODc.js";
 import { IressCloseButton as te } from "../Button/CloseButton/CloseButton.js";
 const re = ({ rows: t, ...c }, P) => {
   const {

package/dist/components/Input/Input.styles.js

@@ -4,7 +4,7 @@ const o = r({
   base: {
     wrapper: {
       // Performance: CSS containment limits style recalculation scope
-      contain: "style paint",
+      contain: "style",
       display: "flex",
       alignItems: "stretch",
       borderRadius: "radius.system.form",
@@ -221,6 +221,17 @@ const o = r({
       }
     }
   },
+  compoundVariants: [
+    {
+      isTextarea: !0,
+      stretched: !0,
+      css: {
+        formControl: {
+          height: "[100%]"
+        }
+      }
+    }
+  ],
   defaultVariants: {}
 });
 export {

package/dist/components/Link/Link.js

@@ -1,85 +1,84 @@
-import { jsxs as L, Fragment as N, jsx as e } from "react/jsx-runtime";
+import { jsxs as L, Fragment as N, jsx as o } from "react/jsx-runtime";
 import { forwardRef as S, useId as P, useMemo as m, useCallback as j } from "react";
 import { IressSpinner as v } from "../Spinner/Spinner.js";
 import "../Spinner/Spinner.styles.js";
 import { s as w } from "../../is-valid-prop-DweT-eOL.js";
-import { c as o } from "../../css-DNdLYQld.js";
+import { c as e } from "../../css-DNdLYQld.js";
 import { c as G } from "../../cx-DN21T1EH.js";
 import { link as F } from "./Link.styles.js";
-import { GlobalCSSClass as k } from "../../enums.js";
+import { GlobalCSSClass as b } from "../../enums.js";
 const M = ({
-  active: b,
+  active: h,
   append: n,
-  children: i,
+  children: p,
   className: f,
-  element: p,
+  element: c,
   loading: r = !1,
   onClick: l,
-  prepend: c,
-  ...d
-}, x) => {
-  const a = P(), s = F.raw({
-    active: b,
+  prepend: a,
+  ...u
+}, y) => {
+  const i = P(), s = F.raw({
+    active: h,
     loading: !!r
-  }), [u, t] = m(
-    () => w(d),
-    [d]
-  ), h = j(
+  }), [d, t] = m(
+    () => w(u),
+    [u]
+  ), k = j(
     (I) => {
       r || l?.(I);
     },
     [r, l]
-  ), y = m(
+  ), C = m(
     () => ({
       children: /* @__PURE__ */ L(N, { children: [
-        c && !r && /* @__PURE__ */ e("span", { className: o(s.prepend), children: c }),
-        !!r && /* @__PURE__ */ e(
+        a && !r && /* @__PURE__ */ o("span", { className: e(s.prepend), children: a }),
+        !!r && /* @__PURE__ */ o(
           v,
           {
-            className: o(s.spinner),
-            fixedWidth: !0,
-            id: a,
+            className: e(s.spinner),
+            id: i,
             screenreaderText: r === !0 ? "Loading" : r
           }
         ),
-        i && /* @__PURE__ */ e("span", { className: o(s.content), children: i }),
-        n && /* @__PURE__ */ e("span", { className: o(s.append), children: n })
+        p && /* @__PURE__ */ o("span", { className: e(s.content), children: p }),
+        n && /* @__PURE__ */ o("span", { className: e(s.append), children: n })
       ] }),
       className: G(
         f,
-        o(s.root, u),
-        k.Group,
-        k.Link
+        e(s.root, d),
+        b.Group,
+        b.Link
       ),
-      onClick: h
+      onClick: k
     }),
     [
       n,
-      i,
+      p,
       f,
-      h,
+      k,
       r,
-      c,
       a,
-      u,
+      i,
+      d,
       s.append,
       s.content,
       s.prepend,
       s.root,
       s.spinner
     ]
-  ), C = m(
-    () => p ?? (t.href ? "a" : "button"),
-    [p, t.href]
+  ), x = m(
+    () => c ?? (t.href ? "a" : "button"),
+    [c, t.href]
   );
-  return /* @__PURE__ */ e(
-    C,
+  return /* @__PURE__ */ o(
+    x,
     {
-      "aria-describedby": r ? a : void 0,
-      type: p || !t.href ? "button" : void 0,
-      ...y,
+      "aria-describedby": r ? i : void 0,
+      type: c || !t.href ? "button" : void 0,
+      ...C,
       ...t,
-      ref: x
+      ref: y
     }
   );
 }, R = S(M);

package/dist/components/Modal/Modal.js

@@ -1,6 +1,6 @@
 import { jsx as n, jsxs as v } from "react/jsx-runtime";
 import { useState as Z, useEffect as w, useMemo as oo } from "react";
-import "../../Button-BTkololu.js";
+import "../../Button-BwZzMODc.js";
 import { IressCloseButton as eo } from "../Button/CloseButton/CloseButton.js";
 import { u as to, b as so, c as ro, d as no, e as ao, F as io, f as lo, g as co } from "../../floating-ui.react-BlU6Nz_4.js";
 import { idsLogger as mo } from "../../helpers/utility/idsLogger.js";

package/dist/components/Panel/Panel.styles.js

@@ -2,7 +2,7 @@ import { c as a } from "../../cva-DtPMccE9.js";
 const o = a({
   base: {
     // Performance: CSS containment (no paint to allow overflow)
-    contain: "layout style",
+    contain: "style",
     display: "block",
     boxSizing: "border-box",
     borderRadius: "radius.system.layout",

package/dist/components/Placeholder/Placeholder.d.ts

@@ -5,6 +5,10 @@ export interface IressPlaceholderProps extends Omit<IressStyledProps, 'width'> {
      * Description of the placeholder's envisioned contents.
      */
     children?: ReactNode;
+    /**
+     * Title for the placeholder content.
+     */
+    heading?: ReactNode;
     /**
      * Sets the height of the placeholder.
      */
@@ -19,6 +23,6 @@ export interface IressPlaceholderProps extends Omit<IressStyledProps, 'width'> {
     width?: string | number;
 }
 export declare const IressPlaceholder: {
-    ({ children, className, height, stretch, style, width, ...restProps }: IressPlaceholderProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, className, heading, height, stretch, style, width, ...restProps }: IressPlaceholderProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/Placeholder/Placeholder.js

@@ -1,40 +1,60 @@
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import { toCSSLengthValue as a } from "../../helpers/formatting/toCSSLengthValue.js";
-import { c as p } from "../../cx-DN21T1EH.js";
-import { placeholder as x } from "./Placeholder.styles.js";
-import { IressText as d } from "../Text/Text.js";
-import { GlobalCSSClass as g } from "../../enums.js";
-const u = ({
-  children: c,
-  className: m,
-  height: o = "auto",
-  stretch: i,
-  style: s,
-  width: l = "auto",
-  ...n
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { toCSSLengthValue as m } from "../../helpers/formatting/toCSSLengthValue.js";
+import { c as g } from "../../cx-DN21T1EH.js";
+import { placeholder as y } from "./Placeholder.styles.js";
+import { IressText as n } from "../Text/Text.js";
+import { GlobalCSSClass as u } from "../../enums.js";
+const f = ({
+  children: l,
+  className: i,
+  heading: o,
+  height: t = "auto",
+  stretch: p,
+  style: r,
+  width: a = "auto",
+  ...h
 }) => {
-  const h = o === "auto" ? i ? "100%" : o : a(o), e = x();
-  return /* @__PURE__ */ r(
-    d,
+  const x = t === "auto" ? p ? "100%" : t : m(t), e = y(), d = !l && !o;
+  return /* @__PURE__ */ c(
+    n,
     {
-      className: p(m, e.root, g.Placeholder),
-      ...n,
+      className: g(i, e.root, u.Placeholder),
+      ...h,
       style: {
-        ...s,
-        width: l ? a(l) : s?.width,
-        height: h
+        ...r,
+        width: a ? m(a) : r?.width,
+        height: x
       },
       children: [
-        /* @__PURE__ */ r("svg", { xmlns: "http://www.w3.org/2000/svg", className: e.svg, children: [
-          /* @__PURE__ */ t("line", { x1: "0", y1: "0", x2: "100%", y2: "100%", className: e.line }),
-          /* @__PURE__ */ t("line", { x1: "100%", y1: "0", x2: "0", y2: "100%", className: e.line })
+        d && /* @__PURE__ */ c("svg", { xmlns: "http://www.w3.org/2000/svg", className: e.svg, children: [
+          /* @__PURE__ */ s(
+            "line",
+            {
+              x1: "0",
+              y1: "0",
+              x2: "100%",
+              y2: "100%",
+              className: e.line
+            }
+          ),
+          /* @__PURE__ */ s(
+            "line",
+            {
+              x1: "100%",
+              y1: "0",
+              x2: "0",
+              y2: "100%",
+              className: e.line
+            }
+          )
         ] }),
-        c
+        o && /* @__PURE__ */ s(n, { element: "strong", textStyle: "typography.heading.4", children: o }),
+        l
       ]
     }
   );
 };
-u.displayName = "IressPlaceholder";
+f.displayName = "IressPlaceholder";
 export {
-  u as IressPlaceholder
+  f as IressPlaceholder
 };

package/dist/components/Placeholder/Placeholder.styles.js

@@ -1,12 +1,12 @@
-import { s as e } from "../../sva-B7kca5XO.js";
-const t = e({
+import { s as o } from "../../sva-B7kca5XO.js";
+const r = o({
   slots: ["root", "svg", "line"],
   base: {
     root: {
       alignItems: "center",
-      bg: "colour.neutral.20",
-      border: "placeholder",
-      borderRadius: "radius.system.layout",
+      flexDirection: "column",
+      bg: "colour.primary.surface",
+      color: "colour.primary.text",
       boxSizing: "border-box",
       display: "flex",
       justifyContent: "center",
@@ -21,12 +21,13 @@ const t = e({
       zIndex: "[-1]"
     },
     line: {
-      strokeWidth: "1.5px",
-      stroke: "colour.neutral.30",
-      strokeOpacity: "0.5"
+      display: "none",
+      strokeWidth: "0.5px",
+      stroke: "colour.primary.fill",
+      strokeOpacity: "0.1"
     }
   }
 });
 export {
-  t as placeholder
+  r as placeholder
 };

package/dist/components/Progress/Progress.js

@@ -6,7 +6,7 @@ import { progress as b } from "./Progress.styles.js";
 import { s as p } from "../../factory-CsinCTPr.js";
 import { s as x } from "../../is-valid-prop-DweT-eOL.js";
 import { GlobalCSSClass as C } from "../../enums.js";
-import { t as N } from "../../index-0AvnPY9d.js";
+import { t as N } from "../../index-Bir9MtY7.js";
 const h = ({
   backgroundImage: e,
   borderRadius: t,

package/dist/components/Provider/Provider.d.ts

@@ -2,6 +2,7 @@ import { FloatingUIContainer } from '../../types';
 import { ReactNode } from 'react';
 import { IressToasterProviderProps } from '../Toaster';
 import { IressSlideoutProviderProps } from '../Slideout';
+import { IressIconProviderProps } from '../Icon';
 export interface IressProviderProps extends IressSlideoutProviderProps, Pick<IressToasterProviderProps, 'position'> {
     /**
      * The contents of your application, and/or the components which will be calling slideouts, modals and toasts.
@@ -13,15 +14,18 @@ export interface IressProviderProps extends IressSlideoutProviderProps, Pick<Ire
      */
     container?: FloatingUIContainer;
     /**
-     * If you don't want to load the default Iress font from the CDN, set this to true.
+     * Disable automatic font subsetting via Google Fonts CDN
+     * When false, only icons actually used in the component tree are loaded
+     * When true, the full Material Symbols font is loaded
+     * @default false
      */
-    noDefaultFont?: boolean;
+    noSubsetting?: IressIconProviderProps['noSubsetting'];
     /**
-     * If you don't want to load the Iress Icon CSS from the CDN, set this to true.
+     * If you don't want to load the default Iress font from the CDN, set this to true.
      */
-    noIcons?: boolean;
+    noDefaultFont?: boolean;
 }
 export declare const IressProvider: {
-    ({ children, container, noDefaultFont, noIcons, position, ...restProps }: IressProviderProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, container, noDefaultFont, position, ...restProps }: IressProviderProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/Provider/Provider.js

@@ -12,7 +12,10 @@ import "../Slideout/Slideout.styles.js";
 import "../Slideout/SlideoutProvider.js";
 import "../Slideout/hooks/useSlideout.js";
 import "react-dom";
-import { I as c } from "../../Provider-B87u_maF.js";
+import { I as j } from "../../Provider-Dw49edAo.js";
+import "../Icon/Icon.js";
+import "../Icon/Icon.styles.js";
+import "../Icon/IconProvider.js";
 export {
-  c as IressProvider
+  j as IressProvider
 };

package/dist/components/Provider/index.js

@@ -1,4 +1,4 @@
-import { I as o } from "../../Provider-B87u_maF.js";
+import { I as o } from "../../Provider-Dw49edAo.js";
 export {
   o as IressProvider
 };

package/dist/components/RichSelect/RichSelect.styles.js

@@ -10,7 +10,7 @@ const i = c({
   base: {
     richSelect: {
       // Performance: CSS containment (no paint to allow focus ring/shadow)
-      contain: "layout style",
+      contain: "style",
       display: "block"
     },
     popoverContent: {

package/dist/components/RichSelect/SelectCreate/SelectCreate.js

@@ -8,6 +8,7 @@ import { IressMenuItem as I } from "../../Menu/MenuItem/MenuItem.js";
 import "../../Menu/MenuText/MenuText.js";
 import { IressIcon as f } from "../../Icon/Icon.js";
 import "../../Icon/Icon.styles.js";
+import "../../Icon/IconProvider.js";
 import { IressSelectHeading as u } from "../SelectHeading/SelectHeading.js";
 const b = ({
   fluid: m = !0,

package/dist/components/RichSelect/SelectHeading/SelectHeading.js

@@ -8,7 +8,7 @@ import "../../Menu/MenuDivider/MenuDivider.js";
 import "../../Menu/MenuItem/MenuItem.js";
 import { IressMenuHeading as g } from "../../Menu/MenuText/MenuText.js";
 import { GlobalCSSClass as a } from "../../../enums.js";
-import { I as h } from "../../../Button-BTkololu.js";
+import { I as h } from "../../../Button-BwZzMODc.js";
 import "../../Button/CloseButton/CloseButton.js";
 import "../../Popover/Popover.js";
 import "../../Popover/Popover.styles.js";

package/dist/components/RichSelect/SelectLabel/SelectLabel.styles.d.ts

@@ -1,4 +1,4 @@
-export declare const selectLabel: import('../../../styled-system/types').SlotRecipeRuntimeFn<"placeholder" | "contents" | "append" | "prepend" | "selectLabel", {
+export declare const selectLabel: import('../../../styled-system/types').SlotRecipeRuntimeFn<"contents" | "placeholder" | "append" | "prepend" | "selectLabel", {
     showDefaultChevron: {
         true: {
             selectLabel: {

package/dist/components/RichSelect/SelectSearchInput/SelectSearchInput.js

@@ -4,6 +4,7 @@ import { c as h } from "../../../cx-DN21T1EH.js";
 import { selectSearchInput as v } from "./SelectSearchInput.styles.js";
 import { IressIcon as b } from "../../Icon/Icon.js";
 import "../../Icon/Icon.styles.js";
+import "../../Icon/IconProvider.js";
 import { IressInput as d } from "../../Input/Input.js";
 import "../../Input/Input.styles.js";
 import { usePopoverItem as x } from "../../Popover/hooks/usePopoverItem.js";
@@ -11,30 +12,30 @@ import { GlobalCSSClass as R } from "../../../enums.js";
 const P = u(
   ({
     "aria-label": s,
-    autoComplete: a = "off",
-    className: m,
-    placeholder: r = "Search",
+    autoComplete: m = "off",
+    className: a,
+    placeholder: e = "Search",
     prepend: c = /* @__PURE__ */ t(b, { name: "search" }),
     ...p
   }, n) => {
-    const e = I(null), { isActiveInPopover: i, ...o } = x(), l = v({ isActiveInPopover: i });
-    return S(n, () => e.current), /* @__PURE__ */ t(
+    const r = I(null), { isActiveInPopover: i, ...o } = x(), l = v({ isActiveInPopover: i });
+    return S(n, () => r.current), /* @__PURE__ */ t(
       d,
       {
         ...p,
         ...o,
         tabIndex: void 0,
-        "aria-label": s ?? r ?? "Search",
-        autoComplete: a,
+        "aria-label": s ?? e ?? "Search",
+        autoComplete: m,
         className: h(
           l.root,
-          m,
+          a,
           R.RichSelectSearchInput
         ),
-        placeholder: r,
+        placeholder: e,
         prepend: c,
         ref: (f) => {
-          e.current = f, o?.ref?.(e.current?.input ?? null);
+          r.current = f, o?.ref?.(r.current?.input ?? null);
         }
       }
     );

package/dist/components/RichSelect/SelectTags/SelectTags.js

@@ -21,10 +21,11 @@ import "../../Popover/Popover.styles.js";
 import "../../Popover/InputPopover/InputPopover.js";
 import { usePopover as V } from "../../Popover/hooks/usePopover.js";
 import "../../Popover/hooks/useFloatingPopover.js";
-import { I as G } from "../../../Button-BTkololu.js";
+import { I as G } from "../../../Button-BwZzMODc.js";
 import "../../Button/CloseButton/CloseButton.js";
 import { IressIcon as R } from "../../Icon/Icon.js";
 import "../../Icon/Icon.styles.js";
+import "../../Icon/IconProvider.js";
 import { GlobalCSSClass as S } from "../../../enums.js";
 import "../../Inline/Inline.styles.js";
 import { IressInline as W } from "../../Inline/Inline.js";
@@ -83,7 +84,7 @@ const C = (r, s) => {
       deleteButton: /* @__PURE__ */ o(
         L,
         {
-          activator: /* @__PURE__ */ o(G, { mode: "tertiary", children: /* @__PURE__ */ o(
+          activator: /* @__PURE__ */ o(G, { mode: "muted", children: /* @__PURE__ */ o(
             R,
             {
               name: "chevron-circle-down",

package/dist/components/RichSelect/SelectTags/SelectTags.styles.d.ts

@@ -1,4 +1,4 @@
-export declare const selectTags: import('../../../styled-system/types').SlotRecipeRuntimeFn<"placeholder" | "tag" | "root" | "append" | "prepend" | "tagsList", {
+export declare const selectTags: import('../../../styled-system/types').SlotRecipeRuntimeFn<"tag" | "root" | "placeholder" | "append" | "prepend" | "tagsList", {
     showDefaultChevron: {
         true: {
             root: {

package/dist/components/SkipLink/SkipLink.js

@@ -1,6 +1,6 @@
 import { jsx as p } from "react/jsx-runtime";
 import { forwardRef as t } from "react";
-import { I as m } from "../../Button-BTkololu.js";
+import { I as m } from "../../Button-BwZzMODc.js";
 import "../Button/CloseButton/CloseButton.js";
 import { c as k } from "../../cx-DN21T1EH.js";
 import { skipLink as n } from "./SkipLink.styles.js";

package/dist/components/Slideout/components/SlideoutInner.js

@@ -1,6 +1,6 @@
 import { jsxs as c, jsx as d } from "react/jsx-runtime";
 import { propagateTestid as o } from "../../../helpers/utility/propagateTestid.js";
-import "../../../Button-BTkololu.js";
+import "../../../Button-BwZzMODc.js";
 import { IressCloseButton as j } from "../../Button/CloseButton/CloseButton.js";
 import { slideout as v } from "../Slideout.styles.js";
 import { s as f } from "../../../factory-CsinCTPr.js";

package/dist/components/Slideout/hooks/usePushElement.js

@@ -1,6 +1,6 @@
 import { useRef as m, useEffect as y } from "react";
 import { GlobalCSSClass as e } from "../../../enums.js";
-import { t as p } from "../../../index-0AvnPY9d.js";
+import { t as p } from "../../../index-Bir9MtY7.js";
 import { useBreakpoint as S } from "../../../hooks/useBreakpoint.js";
 function h({
   element: r,