@iress-oss/ids-components 6.0.0-alpha.23 → 6.0.0-alpha.25

package/dist/{Button-BrpmQKsB.js → Button-DNFXX5JD.js}

@@ -1,21 +1,26 @@
-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 A } from "react";
-import { IressSpinner as K } from "./components/Spinner/Spinner.js";
+import { jsxs as N, Fragment as O, jsx as n } from "react/jsx-runtime";
+import { forwardRef as j, useId as M, useRef as R, useMemo as d, useCallback as E, useImperativeHandle as T } from "react";
+import { IressSpinner as A } from "./components/Spinner/Spinner.js";
 import "./components/Spinner/Spinner.styles.js";
-import { GlobalCSSClass as d } from "./enums.js";
+import { GlobalCSSClass as b } from "./enums.js";
 import "./components/ButtonGroup/ButtonGroup.js";
 import "./components/ButtonGroup/ButtonGroup.styles.js";
-import { useButtonGroupItem as O } from "./components/ButtonGroup/hooks/useButtonGroupItem.js";
-import { s as W } from "./is-valid-prop-DTA0i8bT.js";
-import { m as D, a as L, s as T, i as z, c as J } from "./css-BStWZDQe.js";
-import { c as Q } from "./cx-DN21T1EH.js";
-import { c as U } from "./create-recipe-DUTadmvy.js";
+import { useButtonGroupItem as K } from "./components/ButtonGroup/hooks/useButtonGroupItem.js";
+import { s as L } from "./is-valid-prop-C5D641yn.js";
+import { m as W, a as D, s as z, i as J, c as Q } from "./css-DVJ-ALYD.js";
+import { c as U } from "./cx-DN21T1EH.js";
+import { c as X } from "./create-recipe-BDTG8O8S.js";
 import "./components/Popover/Popover.js";
 import "./components/Popover/Popover.styles.js";
 import "./components/Popover/InputPopover/InputPopover.js";
-import { usePopover as X } from "./components/Popover/hooks/usePopover.js";
+import { usePopover as Y } from "./components/Popover/hooks/usePopover.js";
 import "./components/Popover/hooks/useFloatingPopover.js";
-const h = {}, Y = [
+import { IressIcon as Z } from "./components/Icon/Icon.js";
+import "./components/Icon/Icon.styles.js";
+import "./components/Icon/IconProvider.js";
+import { IressTooltip as $ } from "./components/Tooltip/Tooltip.js";
+import "./components/Tooltip/Tooltip.styles.js";
+const I = {}, oo = [
   {
     mode: "primary",
     status: "danger",
@@ -50,7 +55,7 @@ const h = {}, Y = [
           borderColor: "[color-mix(in srgb, {colors.colour.system.danger.surfaceHover}, black 5%)]"
         },
         _active: {
-          boxShadow: "color-mix(in srgb, {colors.colour.system.danger.surface}, transparent 60%) 0px 0px 0px 3px"
+          boxShadow: "color-mix(in srgb, {colors.colour.system.danger.surface}, transparent 40%) 0px 0px 0px 3px"
         }
       },
       spinner: {
@@ -69,7 +74,7 @@ const h = {}, Y = [
           bg: "colour.system.danger.surfaceHover"
         },
         _active: {
-          boxShadow: "color-mix(in srgb, {colors.colour.system.danger.surface}, transparent 60%) 0px 0px 0px 3px"
+          boxShadow: "color-mix(in srgb, {colors.colour.system.danger.surface}, transparent 40%) 0px 0px 0px 3px"
         }
       },
       spinner: {
@@ -88,7 +93,7 @@ const h = {}, Y = [
           bg: "colour.system.danger.surfaceHover"
         },
         _active: {
-          boxShadow: "color-mix(in srgb, {colors.colour.system.danger.surface}, transparent 60%) 0px 0px 0px 3px"
+          boxShadow: "color-mix(in srgb, {colors.colour.system.danger.surface}, transparent 40%) 0px 0px 0px 3px"
         }
       },
       spinner: {
@@ -145,7 +150,7 @@ const h = {}, Y = [
           borderColor: "[color-mix(in srgb, {colors.colour.system.success.surfaceHover}, black 5%)]"
         },
         _active: {
-          boxShadow: "color-mix(in srgb, {colors.colour.system.success.surface}, transparent 60%) 0px 0px 0px 3px"
+          boxShadow: "color-mix(in srgb, {colors.colour.system.success.surface}, transparent 40%) 0px 0px 0px 3px"
         }
       },
       spinner: {
@@ -164,7 +169,7 @@ const h = {}, Y = [
           bg: "colour.system.success.surfaceHover"
         },
         _active: {
-          boxShadow: "color-mix(in srgb, {colors.colour.system.success.surface}, transparent 60%) 0px 0px 0px 3px"
+          boxShadow: "color-mix(in srgb, {colors.colour.system.success.surface}, transparent 40%) 0px 0px 0px 3px"
         }
       },
       spinner: {
@@ -183,7 +188,7 @@ const h = {}, Y = [
           bg: "colour.system.success.surfaceHover"
         },
         _active: {
-          boxShadow: "color-mix(in srgb, {colors.colour.system.success.surface}, transparent 60%) 0px 0px 0px 3px"
+          boxShadow: "color-mix(in srgb, {colors.colour.system.success.surface}, transparent 40%) 0px 0px 0px 3px"
         }
       },
       spinner: {
@@ -207,35 +212,131 @@ const h = {}, Y = [
       }
     }
   },
+  {
+    mode: "secondary",
+    status: "info",
+    css: {
+      root: {
+        bg: "colour.system.info.surface",
+        borderColor: "[color-mix(in srgb, {colors.colour.system.info.surface}, black 5%)]",
+        color: "colour.system.info.text",
+        _hover: {
+          bg: "colour.system.info.surfaceHover",
+          borderColor: "[color-mix(in srgb, {colors.colour.system.info.surfaceHover}, black 5%)]"
+        },
+        _active: {
+          boxShadow: "[color-mix(in srgb, {colors.colour.system.info.surface}, transparent 40%) 0px 0px 0px 3px]"
+        }
+      },
+      spinner: {
+        color: "colour.system.info.text"
+      }
+    }
+  },
+  {
+    mode: "tertiary",
+    status: "info",
+    css: {
+      root: {
+        borderColor: "colour.system.info.fill",
+        color: "colour.system.info.text",
+        _hover: {
+          bg: "colour.system.info.surfaceHover"
+        },
+        _active: {
+          boxShadow: "[color-mix(in srgb, {colors.colour.system.info.surface}, transparent 40%) 0px 0px 0px 3px]"
+        }
+      },
+      spinner: {
+        color: "colour.system.info.text"
+      }
+    }
+  },
+  {
+    mode: "secondary",
+    status: "warning",
+    css: {
+      root: {
+        bg: "colour.system.warning.surface",
+        borderColor: "[color-mix(in srgb, {colors.colour.system.warning.surface}, black 5%)]",
+        color: "colour.system.warning.text",
+        _hover: {
+          bg: "colour.system.warning.surfaceHover",
+          borderColor: "[color-mix(in srgb, {colors.colour.system.warning.surfaceHover}, black 5%)]"
+        },
+        _active: {
+          boxShadow: "[color-mix(in srgb, {colors.colour.system.warning.surface}, transparent 40%) 0px 0px 0px 3px]"
+        }
+      },
+      spinner: {
+        color: "colour.system.warning.text"
+      }
+    }
+  },
+  {
+    mode: "tertiary",
+    status: "warning",
+    css: {
+      root: {
+        borderColor: "colour.system.warning.fill",
+        color: "colour.system.warning.text",
+        _hover: {
+          bg: "colour.system.warning.surfaceHover"
+        },
+        _active: {
+          boxShadow: "[color-mix(in srgb, {colors.colour.system.warning.surface}, transparent 40%) 0px 0px 0px 3px]"
+        }
+      },
+      spinner: {
+        color: "colour.system.warning.text"
+      }
+    }
+  },
   {
     mode: "primary",
     loading: !0,
     css: {
       root: {
-        bg: "colour.neutral.30",
-        borderColor: "colour.neutral.30",
-        color: "colour.neutral.60"
+        bg: "colour.neutral.20",
+        borderColor: "colour.neutral.20",
+        color: "colour.neutral.70"
       },
       spinner: {
-        color: "colour.neutral.60"
+        color: "colour.neutral.70"
       }
     }
   },
   {
     mode: [
       "secondary",
-      "tertiary",
       "quaternary"
     ],
     loading: !0,
     css: {
       root: {
-        bg: "colour.neutral.30",
-        borderColor: "colour.neutral.60",
-        color: "colour.neutral.60"
+        bg: "colour.neutral.20",
+        borderColor: "colour.neutral.40",
+        color: "colour.neutral.70",
+        _hover: {
+          boxShadow: "none"
+        }
       },
       spinner: {
-        color: "colour.neutral.60"
+        color: "colour.neutral.70"
+      }
+    }
+  },
+  {
+    mode: "tertiary",
+    loading: !0,
+    css: {
+      root: {
+        bg: "colour.neutral.20",
+        borderColor: "colour.neutral.70",
+        color: "colour.neutral.70"
+      },
+      spinner: {
+        color: "colour.neutral.70"
       }
     }
   },
@@ -282,7 +383,7 @@ const h = {}, Y = [
       }
     }
   }
-], Z = [
+], ro = [
   [
     "root",
     "button__root"
@@ -299,20 +400,21 @@ const h = {}, Y = [
     "spinner",
     "button__spinner"
   ]
-], $ = /* @__PURE__ */ Z.map(([o, t]) => [o, U(t, h, z(Y, o))]), oo = D((o = {}) => Object.fromEntries($.map(([t, s]) => [t, s.recipeFn(o)]))), C = [
+], so = /* @__PURE__ */ ro.map(([o, c]) => [o, X(c, I, J(oo, o))]), eo = W((o = {}) => Object.fromEntries(so.map(([c, r]) => [c, r.recipeFn(o)]))), S = [
   "active",
   "fluid",
   "inButtonGroup",
+  "iconOnly",
   "loading",
   "mode",
   "noWrap",
   "status"
-], ro = (o) => ({ ...h, ...L(o) }), so = /* @__PURE__ */ Object.assign(oo, {
+], to = (o) => ({ ...I, ...D(o) }), co = /* @__PURE__ */ Object.assign(eo, {
   __recipe__: !1,
   __name__: "button",
   raw: (o) => o,
   classNameMap: {},
-  variantKeys: C,
+  variantKeys: S,
   variantMap: {
     active: [
       "true"
@@ -329,6 +431,9 @@ const h = {}, Y = [
     inButtonGroup: [
       "true"
     ],
+    iconOnly: [
+      "true"
+    ],
     loading: [
       "true"
     ],
@@ -344,107 +449,127 @@ const h = {}, Y = [
     ],
     status: [
       "success",
-      "danger"
+      "danger",
+      "info",
+      "warning"
     ]
   },
   splitVariantProps(o) {
-    return T(o, C);
+    return z(o, S);
   },
-  getVariantProps: ro
-}), eo = ({
+  getVariantProps: to
+}), no = ({
   active: o,
-  append: t,
-  children: s,
-  className: y,
-  element: l,
-  fluid: b,
-  loading: r = !1,
-  mode: x = "secondary",
-  prepend: m,
-  noWrap: H = !1,
-  onClick: g,
-  status: S,
-  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 = O({ value: I }), G = n(() => c ? c.active ? "primary" : "tertiary" : x, [c, x]), e = so({
+  append: c,
+  children: r,
+  className: x,
+  element: u,
+  fluid: f,
+  icon: l,
+  loading: s = !1,
+  mode: g = "secondary",
+  prepend: y,
+  noWrap: k = !1,
+  onClick: v,
+  status: F,
+  value: B,
+  ..._
+}, G) => {
+  const i = M(), P = B ?? (typeof r == "string" || typeof r == "number" || typeof r == "boolean" ? r : void 0), V = Y(), m = R(null), e = K({ value: P }), q = d(() => e ? e.active ? "primary" : "tertiary" : g, [e, g]), t = co({
     active: (
       // eslint-disable-next-line react-hooks/refs -- ref needed for forwarding
-      o ?? B?.isActiveActivator(p.current)
+      o ?? V?.isActiveActivator(m.current)
     ),
-    fluid: b === !0 ? "true" : b,
-    inButtonGroup: !!c,
-    mode: G,
-    loading: !!r,
-    noWrap: H,
-    status: S
-  }), [v, a] = n(
-    () => W(f),
-    [f]
-  ), _ = E(
-    (V) => {
-      r || (g?.(V), c?.toggle());
+    fluid: f === !0 ? "true" : f,
+    inButtonGroup: !!e,
+    mode: q,
+    iconOnly: !!l,
+    loading: !!s,
+    noWrap: k,
+    status: F
+  }), [h, a] = d(
+    () => L(_),
+    [_]
+  ), C = E(
+    (p) => {
+      s || (v?.(p), e?.toggle());
     },
-    [c, r, g]
-  ), P = n(
+    [e, s, v]
+  ), w = d(
     () => ({
-      children: /* @__PURE__ */ q(N, { children: [
-        m && !r && /* @__PURE__ */ u("span", { className: e.prepend, children: m }),
-        !!r && /* @__PURE__ */ u(
-          K,
+      children: /* @__PURE__ */ N(O, { children: [
+        y && !s && /* @__PURE__ */ n("span", { className: t.prepend, children: y }),
+        !!s && /* @__PURE__ */ n(
+          A,
           {
-            className: e.spinner,
+            className: t.spinner,
             id: i,
-            screenreaderText: r === !0 ? "Loading" : r
+            screenreaderText: s === !0 ? "Loading" : s
           }
         ),
-        s,
-        t && /* @__PURE__ */ u("span", { className: e.append, children: t })
+        l ? /* @__PURE__ */ n(Z, { name: l }) : r,
+        c && /* @__PURE__ */ n("span", { className: t.append, children: c })
       ] }),
-      className: Q(
-        y,
-        d.FormElement,
-        d.FormElementInner,
-        e.root,
-        J(v),
-        d.Button
+      className: U(
+        x,
+        b.FormElement,
+        b.FormElementInner,
+        t.root,
+        Q(h),
+        b.Button
       ),
-      onClick: _
+      onClick: C
     }),
     [
-      t,
+      c,
+      r,
+      x,
+      C,
+      l,
       s,
       y,
-      _,
-      r,
-      m,
       i,
-      v,
-      e.append,
-      e.prepend,
-      e.root,
-      e.spinner
+      h,
+      t.append,
+      t.prepend,
+      t.root,
+      t.spinner
     ]
   );
-  A(F, () => p.current);
-  const k = n(
-    () => l ?? (a.href ? "a" : "button"),
-    [l, a.href]
+  T(G, () => m.current);
+  const H = d(
+    () => u ?? (a.href ? "a" : "button"),
+    [u, a.href]
   );
-  return /* @__PURE__ */ u(
-    k,
+  if (l && r) {
+    const p = String(r);
+    return /* @__PURE__ */ n($, { tooltipText: p, children: /* @__PURE__ */ n(
+      H,
+      {
+        "aria-label": p,
+        "aria-describedby": s ? i : void 0,
+        type: u || !a.href ? "button" : void 0,
+        ...w,
+        ...e?.props,
+        ...a,
+        ref: m
+      }
+    ) });
+  }
+  return /* @__PURE__ */ n(
+    H,
     {
-      "aria-describedby": r ? i : void 0,
-      type: l || !a.href ? "button" : void 0,
-      ...P,
-      ...c?.props,
+      "aria-describedby": s ? i : void 0,
+      type: u || !a.href ? "button" : void 0,
+      ...w,
+      ...e?.props,
       ...a,
-      ref: p
+      ref: m
     }
   );
-}, to = j(eo);
-to.displayName = "IressButton";
+}, ao = j(no);
+ao.displayName = "IressButton";
 export {
-  to as I,
-  so as b
+  ao as I,
+  co as b
 };

package/dist/Provider-uPW2d6U5.js

@@ -0,0 +1,49 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import "./components/Modal/Modal.styles.js";
+import "./components/Modal/Modal.js";
+import { IressModalProvider as m } from "./components/Modal/ModalProvider.js";
+import "./components/Modal/hooks/useModal.js";
+import { IressToasterProvider as d } 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 g } from "./components/Slideout/SlideoutProvider.js";
+import "./components/Slideout/hooks/useSlideout.js";
+import { createPortal as n } from "react-dom";
+import "./components/Icon/Icon.js";
+import "./components/Icon/Icon.styles.js";
+import { IressIconProvider as h } from "./components/Icon/IconProvider.js";
+var r = /* @__PURE__ */ ((o) => (o.Color = "color", o.Dimension = "dimension", o.FontFamily = "fontFamily", o.FontSize = "fontSize", o.Background = "background", o.Border = "border", o.Radius = "radius", o.Shadow = "shadow", o.Typography = "typography", o))(r || {});
+const l = [
+  "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"
+];
+r.FontSize, r.FontFamily, r.FontFamily, r.Typography, r.Typography, r.Typography, r.Typography, r.Typography, r.Typography, r.Typography, r.Typography, r.Typography, r.Typography, r.Typography, r.Typography, r.Typography, r.Typography;
+const $ = ({
+  children: o,
+  container: p,
+  noDefaultFont: y,
+  position: i,
+  ...s
+}) => /* @__PURE__ */ a(m, { container: p, children: [
+  /* @__PURE__ */ e(d, { container: p, position: i, children: /* @__PURE__ */ e(g, { container: p, ...s, children: /* @__PURE__ */ e(h, { container: p, noSubsetting: !0, children: o }) }) }),
+  !y && n(
+    l.map((t) => /* @__PURE__ */ e(
+      "link",
+      {
+        rel: "stylesheet",
+        href: t,
+        "data-iress-design-system-font": !0
+      },
+      t
+    )),
+    document.head,
+    "design-system-font"
+  )
+] });
+$.displayName = "IressProvider";
+export {
+  $ as I,
+  l as i
+};

package/dist/components/Alert/Alert.d.ts

@@ -3,22 +3,25 @@ import { IressTextProps } from '../Text';
 import { ReactNode } from 'react';
 import { Statuses } from '../../types';
 import { IressButtonProps, IressCloseButtonProps } from '../Button';
+export interface IressAlertButtonProps extends Omit<IressButtonProps, 'mode' | 'status'> {
+    mode?: 'secondary' | 'tertiary';
+}
 export interface IressAlertProps extends Omit<IressTextProps, 'element'> {
     /**
      * Actions to display in the alert. These will be rendered as buttons with opinionated styling.
      * If you want to use custom buttons, use the `footer` prop instead.
      **/
-    actions?: Omit<IressButtonProps, 'mode' | 'status'>[];
+    actions?: IressAlertButtonProps[];
     /**
      * Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
      **/
     children?: ReactNode;
     /**
-     * Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+     * If true, the alert will be dismissed and unrendered from the DOM. Use for uncontrolled dismissal of the alert, where the component manages its own dismissed state internally.
      **/
     defaultDismissed?: boolean;
     /**
-     * Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+     * If true, the alert will be dismissed and unrendered from the DOM. Use for controlled dismissal of the alert, where the parent component manages the dismissed state and passes it down via this prop.
      **/
     dismissed?: boolean;
     /**
@@ -36,6 +39,10 @@ export interface IressAlertProps extends Omit<IressTextProps, 'element'> {
      * If not provided, the icon will be determined by the `status` prop.
      **/
     icon?: IressIconProps['name'] | false;
+    /**
+     * If true, the alert will have a layout that supports longer content, with increased spacing and the icon aligned to the top of the alert instead of centered. Should be used when the content of the alert is more than a couple of sentences.
+     */
+    multiLine?: boolean;
     /**
      * Icon to display in the alert.
      * If set to `false`, no icon will be displayed.
@@ -50,11 +57,11 @@ export interface IressAlertProps extends Omit<IressTextProps, 'element'> {
     /**
      * Variants of the alert, allowing it to be styled differently based on where its used in the application.
      * - Sidebar: The icon will be aligned to the heading, and the text will appear below the icon.
-     * - Site-wide: The border will be removed, except for the bottom border.
+     * - Full-width: The border will be removed, except for the bottom border.
      */
-    variant?: 'sidebar' | 'site-wide';
+    variant?: 'sidebar' | 'full-width';
 }
 export declare const IressAlert: {
-    ({ actions, children, className, defaultDismissed, dismissed: dismissedProp, footer, heading, icon: iconProp, onDismiss, status, variant, ...restProps }: IressAlertProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ actions, children, className, defaultDismissed, dismissed: dismissedProp, footer, heading, icon: iconProp, multiLine, onDismiss, status, variant, ...restProps }: IressAlertProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };