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

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

@@ -1,14 +1,15 @@
 import { jsxs as d, jsx as r } from "react/jsx-runtime";
 import { getUniqueItemsByKey as y } from "../helpers/getUniqueItemsByKey.js";
 import { useRef as l, useMemo as x, useEffect as h } from "react";
-import { s as g } from "../../../factory-CsinCTPr.js";
+import { s as g } from "../../../factory-BrouwSOb.js";
 import "../../ValidationMessage/ValidationMessage.js";
 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 } from "../../../css-BStWZDQe.js";
 import { c as v } from "../../../cx-DN21T1EH.js";
 import { IressText as F } from "../../Text/Text.js";
 const b = (o) => /* @__PURE__ */ r(E, { name: "exclamation-triangle", ...o, pr: "xs" }), N = ({
@@ -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,11 +1,12 @@
 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";
-import { c } from "../../../css-DNdLYQld.js";
-import { s as d } from "../../../factory-CsinCTPr.js";
+import { c } from "../../../css-BStWZDQe.js";
+import { s as d } from "../../../factory-BrouwSOb.js";
 import { field as g } from "../Field.styles.js";
 const x = ({
   hint: r,
@@ -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

@@ -2,14 +2,14 @@ import { jsx as e, jsxs as m, Fragment as re } from "react/jsx-runtime";
 import { forwardRef as oe, useRef as se, useMemo as R, useState as I, useImperativeHandle as ie } from "react";
 import { c as ae } from "../../cx-DN21T1EH.js";
 import { filter as ne } from "./Filter.styles.js";
-import { s as le } from "../../factory-CsinCTPr.js";
-import { s as pe } from "../../is-valid-prop-DweT-eOL.js";
+import { s as le } from "../../factory-BrouwSOb.js";
+import { s as pe } from "../../is-valid-prop-DTA0i8bT.js";
 import { propagateTestid as o } from "../../helpers/utility/propagateTestid.js";
 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-BrpmQKsB.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/Filter.styles.js

@@ -1,4 +1,4 @@
-import { s as t } from "../../sva-B7kca5XO.js";
+import { s as t } from "../../sva-Df1FmoEW.js";
 const n = t({
   slots: [
     "root",

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-BrpmQKsB.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/FilterResultsDescriptor.js

@@ -1,7 +1,7 @@
 import { jsx as c } from "react/jsx-runtime";
 import { useMemo as p } from "react";
 import { composeLabelValueDescriptor as i } from "../../../helpers/label-value/composeLabelValueDescriptor.js";
-import { c as l } from "../../../css-DNdLYQld.js";
+import { c as l } from "../../../css-BStWZDQe.js";
 const u = ({
   loading: t,
   noResultsText: o = "No results",

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/Hide/Hide.js

@@ -1,6 +1,6 @@
 import { jsx as m } from "react/jsx-runtime";
 import { normaliseHideValues as n } from "./helpers/normaliseHideValues.js";
-import { s as p } from "../../factory-CsinCTPr.js";
+import { s as p } from "../../factory-BrouwSOb.js";
 import { useBreakpoint as a } from "../../hooks/useBreakpoint.js";
 import "react";
 const d = p("div"), l = ({

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;
 };

package/dist/components/Icon/Icon.js

@@ -1,43 +1,81 @@
-import { jsx as p } from "react/jsx-runtime";
-import { s as e } from "../../factory-CsinCTPr.js";
-import { c as n } from "../../cx-DN21T1EH.js";
+import { jsx as c } from "react/jsx-runtime";
+import { s as d } from "../../factory-BrouwSOb.js";
+import { s as v } from "../../is-valid-prop-DTA0i8bT.js";
+import { c as L } from "../../css-BStWZDQe.js";
+import { c as p } from "../../cx-DN21T1EH.js";
 import { icon as I } from "./Icon.styles.js";
-import { GlobalCSSClass as x } from "../../enums.js";
-const d = ({
-  className: s,
-  fixedWidth: r,
-  flip: a,
-  name: i,
-  rotate: m,
-  screenreaderText: o,
-  set: f = "fal",
-  spin: l,
+import { GlobalCSSClass as u } from "../../enums.js";
+import { useContext as M, useEffect as N } from "react";
+import { IconContext as S } from "./IconProvider.js";
+import { idsLogger as _ } from "../../helpers/utility/idsLogger.js";
+import { FA_TO_MATERIAL_MAP as $ } from "./helpers/iconMapping.js";
+const E = ({
+  className: r,
+  flip: m,
+  name: s,
+  rotate: l,
+  screenreaderText: a,
+  spin: n,
+  type: f,
   ...t
 }) => {
-  const c = I({
-    flip: a,
-    rotate: m,
-    spin: l
+  const i = M(S), e = f ?? i?.type ?? "material";
+  f == "fontawesome" && _(
+    `[IressIcon] Font Awesome is deprecated and will be removed in a future version. Please migrate to Material Symbols. Icon name: "${s}"`
+  );
+  let o;
+  if (e === "material" && (o = $[s] ?? s), N(() => {
+    e === "material" && i && o && i.registerIcon(o);
+  }, [e, i, o]), e === "material" && o) {
+    const x = i ? i.isIconLoaded(o) : !0, C = I.raw({
+      flip: m,
+      rotate: l,
+      spin: n,
+      filled: t.filled,
+      type: e,
+      loading: !x
+    }), [w, A] = v(t);
+    return /* @__PURE__ */ c(
+      d.span,
+      {
+        role: "img",
+        className: p(
+          L(C, w),
+          u.Icon,
+          "material-symbols-rounded",
+          r
+        ),
+        "aria-hidden": !a && "true",
+        "aria-label": a,
+        ...A,
+        children: o
+      }
+    );
+  }
+  const g = "fa-", y = t.set ?? "fal", b = t.fixedWidth ?? !1, h = I({
+    flip: m,
+    rotate: l,
+    spin: n
   });
-  return /* @__PURE__ */ p(
-    e.span,
+  return /* @__PURE__ */ c(
+    d.span,
     {
       role: "img",
-      className: n(
-        c,
-        x.Icon,
-        f,
-        `fa-${i}`,
-        r && "fa-fw",
-        s
+      className: p(
+        h,
+        u.Icon,
+        y,
+        `${g}${s}`,
+        b && "fa-fw",
+        r
       ),
-      "aria-hidden": !o && "true",
-      "aria-label": o,
+      "aria-hidden": !a && "true",
+      "aria-label": a,
       ...t
     }
   );
 };
-d.displayName = "IressIcon";
+E.displayName = "IressIcon";
 export {
-  d as IressIcon
+  E as IressIcon
 };

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

@@ -1,4 +1,20 @@
 export declare const icon: import('../../styled-system/types').RecipeRuntimeFn<{
+    type: {
+        fontawesome: {};
+        material: {
+            fontFamily: "Material Symbols Rounded";
+            textStyle: "inherit";
+            verticalAlign: "middle";
+            materialSymbols: "true";
+            scale: "[1.5]";
+            fontFeatureSettings: "liga";
+        };
+    };
+    filled: {
+        true: {
+            materialSymbols: "filled";
+        };
+    };
     flip: {
         horizontal: {
             transform: "scaleX(-1)";
@@ -10,6 +26,13 @@ export declare const icon: import('../../styled-system/types').RecipeRuntimeFn<{
             transform: "scale(-1)";
         };
     };
+    loading: {
+        true: {
+            visibility: "hidden";
+            width: "[1em]";
+            height: "[1em]";
+        };
+    };
     rotate: {
         90: {
             transform: "rotate(90deg)";

package/dist/components/Icon/Icon.styles.js

@@ -1,6 +1,23 @@
-import { c as a } from "../../cva-DtPMccE9.js";
-const n = a({
+import { c as t } from "../../cva-DJVW1KHF.js";
+const i = t({
+  base: {},
   variants: {
+    type: {
+      fontawesome: {},
+      material: {
+        fontFamily: "Material Symbols Rounded",
+        textStyle: "inherit",
+        verticalAlign: "middle",
+        materialSymbols: "true",
+        scale: "[1.5]",
+        fontFeatureSettings: "liga"
+      }
+    },
+    filled: {
+      true: {
+        materialSymbols: "filled"
+      }
+    },
     flip: {
       horizontal: {
         transform: "scaleX(-1)"
@@ -12,6 +29,13 @@ const n = a({
         transform: "scale(-1)"
       }
     },
+    loading: {
+      true: {
+        visibility: "hidden",
+        width: "[1em]",
+        height: "[1em]"
+      }
+    },
     rotate: {
       90: {
         transform: "rotate(90deg)"
@@ -37,8 +61,17 @@ const n = a({
         animationStyle: "icon-spin-3"
       }
     }
-  }
+  },
+  compoundVariants: [
+    {
+      type: "material",
+      filled: !0,
+      css: {
+        materialSymbols: "filled"
+      }
+    }
+  ]
 });
 export {
-  n as icon
+  i as icon
 };

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

@@ -0,0 +1,100 @@
+import { PropsWithChildren } from 'react';
+import { MaterialSymbol } from 'material-symbols';
+import { ShadowContainer } from '../../types';
+import { IressTestProps } from '../../interfaces';
+export type IconType = 'fontawesome' | 'material';
+export interface IconContextValue<P extends IconType = IconType> {
+    /**
+     * Check if an icon is already loaded (for Material Symbols only)
+     * @param name - The name of the Material Symbol icon
+     * @returns True if the icon is loaded, false otherwise
+     */
+    isIconLoaded: (name: MaterialSymbol) => boolean;
+    /**
+     * Register an icon as used (for Material Symbols only)
+     * @param name - The name of the Material Symbol icon
+     * @returns void
+     */
+    registerIcon: (name: MaterialSymbol) => void;
+    /**
+     * The icon provider type being used
+     * @default 'material'
+     */
+    type: P;
+}
+export declare const IconContext: import('react').Context<IconContextValue<IconType> | null>;
+export interface IressIconProviderProps<P extends IconType = 'material'> extends PropsWithChildren, IressTestProps {
+    /**
+     * Optional container to inject the font styles into.
+     * Can be a ShadowRoot, HTMLElement, or a ref to either.
+     * Note: Font is always injected into document head as well.
+     */
+    container?: ShadowContainer;
+    /**
+     * 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
+     */
+    noSubsetting?: P extends 'material' ? boolean : never;
+    /**
+     * The icon provider to use for all child icons
+     * @default 'material'
+     */
+    type?: P;
+}
+/**
+ * This provider tracks Material Symbols usage across your app and dynamically
+ * loads only the icons you use via Google Fonts CDN, dramatically reducing
+ * font payload size.
+ *
+ * Loads Material Symbols Rounded with fixed parameters:
+ * - Weight: 300
+ * - FILL: 0 (default state) to 1 (active state)
+ * - Grade: 24
+ * - Optical Size: 24dp
+ *
+ * @example
+ * ```tsx
+ * import { IconProvider } from '@iress-oss/ids-components';
+ *
+ * function App() {
+ *   return (
+ *     <IconProvider>
+ *       <YourApp />
+ *     </IconProvider>
+ *   );
+ * }
+ * ```
+ *
+ * **Bundle Size Optimization:**
+ * - Full font: ~1.4MB
+ * - 18 icons (typical usage): ~15-20KB (85% savings)
+ * - Auto-optimizes based on actual usage
+ *
+ * **Trade-offs:**
+ * - ✅ Automatic optimization (no consumer config needed)
+ * - ✅ Works for any number of icons (1 to 1000+)
+ * - ✅ Google CDN handles caching
+ * - ⚠️ Requires internet connection
+ * - ⚠️ Brief icon loading delay
+ *
+ * **When to Use:**
+ * - You want automatic bundle size optimization
+ * - Network connectivity is expected
+ * - Icon loading delay is acceptable (typically <500ms on fast connections)
+ *
+ * **When NOT to Use:**
+ * - Using more than ~50 icons (consider full font instead)
+ * - Offline apps (use full bundled font instead)
+ * - SSR with critical icons (icons may flash during hydration)
+ * - Need deterministic font versions (Google controls CDN updates)
+ *
+ * ---
+ *
+ * It also provides Font Awesome fonts when using that icon set.
+ */
+export declare const IressIconProvider: {
+    <P extends IconType = "material">({ children, container, "data-testid": dataTestId, type, noSubsetting, }: IressIconProviderProps<P>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Icon/IconProvider.js

@@ -0,0 +1,66 @@
+import { jsxs as h, jsx as l } from "react/jsx-runtime";
+import { createContext as w, useState as y, useCallback as S } from "react";
+import { FontLoader as m } from "./components/FontLoader.js";
+import { useDynamicFontSubsetting as g } from "./hooks/useDynamicFontSubsetting.js";
+import { MATERIAL_SYMBOLS as e } from "./Icon.constants.js";
+const L = w(null), $ = ({
+  children: c,
+  container: i,
+  "data-testid": n,
+  type: t = "material",
+  noSubsetting: a = !1
+}) => {
+  const [d, f] = y(/* @__PURE__ */ new Set()), u = S(
+    (o) => {
+      a || f((s) => {
+        if (!s.has(o)) {
+          const r = new Set(s);
+          return r.add(o), r;
+        }
+        return s;
+      });
+    },
+    [a]
+  ), { isIconLoaded: I } = g({
+    icons: d,
+    buildUrl: (o) => {
+      let s = a ? "" : `&icon_names=${encodeURIComponent(o.join(","))}`;
+      return `https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@${e.opticalSize},${e.weight},0..1,${e.grade}${s}`;
+    },
+    dataAttribute: "material-icons-subset",
+    fontFamily: "Material Symbols Rounded",
+    disabled: t !== "material",
+    noSubsetting: a
+  }), p = {
+    type: t,
+    registerIcon: u,
+    isIconLoaded: (o) => t !== "material" ? !0 : I(o)
+  };
+  return /* @__PURE__ */ h(L.Provider, { value: p, children: [
+    c,
+    t === "material" && i && /* @__PURE__ */ l(
+      m,
+      {
+        url: `https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@${e.opticalSize},${e.weight},0..1,${e.grade}`,
+        container: i,
+        onlyShadow: !0,
+        keyPrefix: "material-symbols-fonts",
+        "data-testid": n
+      }
+    ),
+    t === "fontawesome" && /* @__PURE__ */ l(
+      m,
+      {
+        url: "https://cdn.iress.com/icons/5.15.4/css/combined.min.css",
+        container: i,
+        keyPrefix: "font-awesome-fonts",
+        "data-testid": n
+      }
+    )
+  ] });
+};
+$.displayName = "IressIconProvider";
+export {
+  L as IconContext,
+  $ as IressIconProvider
+};

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

@@ -0,0 +1,31 @@
+import { ShadowContainer } from '../../../types';
+import { IressTestProps } from '../../../interfaces';
+export interface FontLoaderProps extends IressTestProps {
+    /**
+     * Optional container to inject the font styles into.
+     * Can be a ShadowRoot, HTMLElement, or a ref to either.
+     * Note: Font is always injected into document head as well.
+     */
+    container?: ShadowContainer;
+    /**
+     * Unique key prefix for the portal keys
+     */
+    keyPrefix: string;
+    /**
+     * Only load into the shadow container, not the head
+     * Used when the font is already loaded in the head in a different method (eg. subsetting)
+     */
+    onlyShadow?: boolean;
+    /**
+     * The URL of the font stylesheet to load
+     */
+    url: string;
+}
+/**
+ * Shared component for injecting font stylesheets into document head and optional shadow container.
+ * This component uses React's createPortal to ensure the font styles are added where required.
+ *
+ * Uses <style> tags with @import to support CSS layers, which has lower priority
+ * than Panda CSS utilities. This allows Panda CSS styling props to override the default font styles.
+ */
+export declare const FontLoader: ({ container, keyPrefix, onlyShadow, url, }: FontLoaderProps) => import("react/jsx-runtime").JSX.Element | null;