@iress-oss/ids-components 6.0.0-alpha.12 → 6.0.0-alpha.14

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

@@ -1,13 +1,13 @@
-import { jsxs as N, Fragment as j, jsx as a } from "react/jsx-runtime";
-import { forwardRef as M, useId as R, useRef as E, useMemo as l, useCallback as W, useImperativeHandle as A } from "react";
-import { IressSpinner as K } from "./components/Spinner/Spinner.js";
+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 "./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 O } from "./components/ButtonGroup/hooks/useButtonGroupItem.js";
-import { s as D } from "./is-valid-prop-DweT-eOL.js";
-import { m as L, a as T, s as q, i as z, c as J } from "./css-DNdLYQld.js";
+import { useButtonGroupItem as K } from "./components/ButtonGroup/hooks/useButtonGroupItem.js";
+import { s as O } 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";
 import "./components/Popover/Popover.js";
@@ -15,27 +15,21 @@ import "./components/Popover/Popover.styles.js";
 import "./components/Popover/InputPopover/InputPopover.js";
 import { usePopover as X } from "./components/Popover/hooks/usePopover.js";
 import "./components/Popover/hooks/useFloatingPopover.js";
-const H = {}, Y = [
+const h = {}, Y = [
   {
     mode: "primary",
     status: "danger",
     css: {
       root: {
+        bg: "colour.system.danger.fill",
+        borderColor: "colour.system.danger.fill",
         color: "colour.system.danger.onFill",
-        _before: {
-          content: "''",
-          bg: "colour.system.danger.fill",
-          borderColor: "colour.system.danger.fill"
-        },
-        _after: {
-          content: "''",
+        _hover: {
           bg: "colour.system.danger.fillHover",
           borderColor: "colour.system.danger.fillHover"
         },
         _active: {
-          _after: {
-            boxShadow: "color-mix(in srgb, {colors.colour.system.danger.fill}, transparent 80%) 0px 0px 0px 3px"
-          }
+          boxShadow: "color-mix(in srgb, {colors.colour.system.danger.fill}, transparent 80%) 0px 0px 0px 3px"
         }
       },
       spinner: {
@@ -48,21 +42,15 @@ const H = {}, Y = [
     status: "danger",
     css: {
       root: {
+        bg: "colour.system.danger.surface",
+        borderColor: "[color-mix(in srgb, {colors.colour.system.danger.surface}, black 5%)]",
         color: "colour.system.danger.text",
-        _before: {
-          content: "''",
-          bg: "colour.system.danger.surface",
-          borderColor: "[color-mix(in srgb, {colors.colour.system.danger.surface}, black 5%)]"
-        },
-        _after: {
-          content: "''",
+        _hover: {
           bg: "colour.system.danger.surfaceHover",
           borderColor: "[color-mix(in srgb, {colors.colour.system.danger.surfaceHover}, black 5%)]"
         },
         _active: {
-          _after: {
-            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 60%) 0px 0px 0px 3px"
         }
       },
       spinner: {
@@ -75,18 +63,32 @@ const H = {}, Y = [
     status: "danger",
     css: {
       root: {
+        borderColor: "colour.system.danger.fill",
         color: "colour.system.danger.text",
-        _before: {
-          borderColor: "colour.system.danger.fill"
+        _hover: {
+          bg: "colour.system.danger.surfaceHover"
         },
-        _after: {
-          bg: "colour.system.danger.surfaceHover",
-          borderColor: "colour.system.danger.fill"
+        _active: {
+          boxShadow: "color-mix(in srgb, {colors.colour.system.danger.surface}, transparent 60%) 0px 0px 0px 3px"
+        }
+      },
+      spinner: {
+        color: "colour.system.danger.text"
+      }
+    }
+  },
+  {
+    mode: "quaternary",
+    status: "danger",
+    css: {
+      root: {
+        borderColor: "colour.system.danger.surface",
+        color: "colour.system.danger.text",
+        _hover: {
+          bg: "colour.system.danger.surfaceHover"
         },
         _active: {
-          _after: {
-            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 60%) 0px 0px 0px 3px"
         }
       },
       spinner: {
@@ -100,7 +102,7 @@ const H = {}, Y = [
     css: {
       root: {
         color: "colour.system.danger.text",
-        _after: {
+        _hover: {
           bg: "colour.system.danger.surfaceHover",
           borderColor: "colour.system.danger.surfaceHover"
         }
@@ -115,19 +117,14 @@ const H = {}, Y = [
     status: "success",
     css: {
       root: {
+        bg: "colour.system.success.fill",
+        borderColor: "colour.system.success.fill",
         color: "colour.system.success.onFill",
-        _before: {
-          bg: "colour.system.success.fill",
-          borderColor: "colour.system.success.fill"
-        },
-        _after: {
-          bg: "colour.system.success.fillHover",
-          borderColor: "colour.system.success.fill"
+        _hover: {
+          bg: "colour.system.success.fillHover"
         },
         _active: {
-          _after: {
-            boxShadow: "color-mix(in srgb, {colors.colour.system.success.fill}, transparent 80%) 0px 0px 0px 3px"
-          }
+          boxShadow: "color-mix(in srgb, {colors.colour.system.success.fill}, transparent 80%) 0px 0px 0px 3px"
         }
       },
       spinner: {
@@ -140,19 +137,15 @@ const H = {}, Y = [
     status: "success",
     css: {
       root: {
+        bg: "colour.system.success.surface",
+        borderColor: "[color-mix(in srgb, {colors.colour.system.success.surface}, black 5%)]",
         color: "colour.system.success.text",
-        _before: {
-          bg: "colour.system.success.surface",
-          borderColor: "[color-mix(in srgb, {colors.colour.system.success.surface}, black 5%)]"
-        },
-        _after: {
+        _hover: {
           bg: "colour.system.success.surfaceHover",
           borderColor: "[color-mix(in srgb, {colors.colour.system.success.surfaceHover}, black 5%)]"
         },
         _active: {
-          _after: {
-            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 60%) 0px 0px 0px 3px"
         }
       },
       spinner: {
@@ -165,18 +158,13 @@ const H = {}, Y = [
     status: "success",
     css: {
       root: {
+        borderColor: "colour.system.success.fill",
         color: "colour.system.success.text",
-        _before: {
-          borderColor: "colour.system.success.fill"
-        },
-        _after: {
-          bg: "colour.system.success.surfaceHover",
-          borderColor: "colour.system.success.fill"
+        _hover: {
+          bg: "colour.system.success.surfaceHover"
         },
         _active: {
-          _after: {
-            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 60%) 0px 0px 0px 3px"
         }
       },
       spinner: {
@@ -185,14 +173,17 @@ const H = {}, Y = [
     }
   },
   {
-    mode: "muted",
+    mode: "quaternary",
     status: "success",
     css: {
       root: {
+        borderColor: "colour.system.success.surface",
         color: "colour.system.success.text",
-        _after: {
-          bg: "colour.system.success.surfaceHover",
-          borderColor: "colour.system.success.surfaceHover"
+        _hover: {
+          bg: "colour.system.success.surfaceHover"
+        },
+        _active: {
+          boxShadow: "color-mix(in srgb, {colors.colour.system.success.surface}, transparent 60%) 0px 0px 0px 3px"
         }
       },
       spinner: {
@@ -201,23 +192,28 @@ const H = {}, Y = [
     }
   },
   {
-    mode: "primary",
-    loading: !0,
+    mode: "muted",
+    status: "success",
     css: {
       root: {
-        color: "colour.neutral.60"
+        color: "colour.system.success.text",
+        _hover: {
+          bg: "colour.system.success.surfaceHover",
+          borderColor: "colour.system.success.surfaceHover"
+        }
       },
       spinner: {
-        color: "colour.neutral.60"
+        color: "colour.system.success.text"
       }
     }
   },
   {
-    mode: "secondary",
+    mode: "primary",
     loading: !0,
     css: {
       root: {
-        borderColor: "colour.neutral.60",
+        bg: "colour.neutral.30",
+        borderColor: "colour.neutral.30",
         color: "colour.neutral.60"
       },
       spinner: {
@@ -226,10 +222,15 @@ const H = {}, Y = [
     }
   },
   {
-    mode: "tertiary",
+    mode: [
+      "secondary",
+      "tertiary",
+      "quaternary"
+    ],
     loading: !0,
     css: {
       root: {
+        bg: "colour.neutral.30",
         borderColor: "colour.neutral.60",
         color: "colour.neutral.60"
       },
@@ -258,7 +259,7 @@ const H = {}, Y = [
     css: {
       root: {
         color: "colour.neutral.80",
-        _after: {
+        _hover: {
           bg: "colour.primary.surfaceHover"
         }
       }
@@ -267,11 +268,16 @@ const H = {}, Y = [
   {
     mode: [
       "primary",
+      "secondary",
+      "tertiary",
+      "quaternary",
       "muted"
     ],
     active: !0,
     css: {
       root: {
+        bg: "colour.primary.surface",
+        borderColor: "colour.primary.text",
         color: "colour.primary.text"
       }
     }
@@ -293,7 +299,7 @@ const H = {}, Y = [
     "spinner",
     "button__spinner"
   ]
-], $ = /* @__PURE__ */ Z.map(([o, t]) => [o, U(t, H, z(Y, o))]), oo = L((o = {}) => Object.fromEntries($.map(([t, s]) => [t, s.recipeFn(o)]))), C = [
+], $ = /* @__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 = [
   "active",
   "fluid",
   "inButtonGroup",
@@ -301,7 +307,7 @@ const H = {}, Y = [
   "mode",
   "noWrap",
   "status"
-], ro = (o) => ({ ...H, ...T(o) }), so = /* @__PURE__ */ Object.assign(oo, {
+], ro = (o) => ({ ...h, ...L(o) }), so = /* @__PURE__ */ Object.assign(oo, {
   __recipe__: !1,
   __name__: "button",
   raw: (o) => o,
@@ -330,6 +336,7 @@ const H = {}, Y = [
       "primary",
       "secondary",
       "tertiary",
+      "quaternary",
       "muted"
     ],
     noWrap: [
@@ -341,50 +348,50 @@ const H = {}, Y = [
     ]
   },
   splitVariantProps(o) {
-    return q(o, C);
+    return T(o, C);
   },
   getVariantProps: ro
 }), eo = ({
   active: o,
   append: t,
   children: s,
-  className: f,
-  element: u,
+  className: y,
+  element: l,
   fluid: b,
   loading: r = !1,
-  mode: y = "secondary",
+  mode: x = "secondary",
   prepend: m,
-  noWrap: S = !1,
-  onClick: x,
-  status: h,
-  value: F,
-  ...g
-}, I) => {
-  const i = R(), B = F ?? (typeof s == "string" || typeof s == "number" || typeof s == "boolean" ? s : void 0), w = X(), p = E(null), c = O({ value: B }), G = l(() => c ? c.active ? "primary" : "tertiary" : y, [c, y]), e = so({
+  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 = K({ 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 ?? w?.isActiveActivator(p.current)
+      o ?? B?.isActiveActivator(p.current)
     ),
     fluid: b === !0 ? "true" : b,
     inButtonGroup: !!c,
     mode: G,
     loading: !!r,
-    noWrap: S,
-    status: h
-  }), [_, n] = l(
-    () => D(g),
-    [g]
-  ), v = W(
+    noWrap: H,
+    status: S
+  }), [v, a] = n(
+    () => O(f),
+    [f]
+  ), _ = E(
     (V) => {
-      r || (x?.(V), c?.toggle());
+      r || (g?.(V), c?.toggle());
     },
-    [c, r, x]
-  ), P = l(
+    [c, r, g]
+  ), P = n(
     () => ({
-      children: /* @__PURE__ */ N(j, { children: [
-        m && !r && /* @__PURE__ */ a("span", { className: e.prepend, children: m }),
-        !!r && /* @__PURE__ */ a(
-          K,
+      children: /* @__PURE__ */ q(N, { children: [
+        m && !r && /* @__PURE__ */ u("span", { className: e.prepend, children: m }),
+        !!r && /* @__PURE__ */ u(
+          A,
           {
             className: e.spinner,
             fixedWidth: !0,
@@ -393,50 +400,50 @@ const H = {}, Y = [
           }
         ),
         s,
-        t && /* @__PURE__ */ a("span", { className: e.append, children: t })
+        t && /* @__PURE__ */ u("span", { className: e.append, children: t })
       ] }),
       className: Q(
-        f,
+        y,
         d.FormElement,
         d.FormElementInner,
         e.root,
-        J(_),
+        J(v),
         d.Button
       ),
-      onClick: v
+      onClick: _
     }),
     [
       t,
       s,
-      f,
-      v,
+      y,
+      _,
       r,
       m,
       i,
-      _,
+      v,
       e.append,
       e.prepend,
       e.root,
       e.spinner
     ]
   );
-  A(I, () => p.current);
-  const k = l(
-    () => u ?? (n.href ? "a" : "button"),
-    [u, n.href]
+  W(F, () => p.current);
+  const k = n(
+    () => l ?? (a.href ? "a" : "button"),
+    [l, a.href]
   );
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ u(
     k,
     {
       "aria-describedby": r ? i : void 0,
-      type: u || !n.href ? "button" : void 0,
+      type: l || !a.href ? "button" : void 0,
       ...P,
       ...c?.props,
-      ...n,
+      ...a,
       ref: p
     }
   );
-}, to = M(eo);
+}, to = j(eo);
 to.displayName = "IressButton";
 export {
   to as I,

package/dist/{Provider-BPoPUE-B.js → Provider-B87u_maF.js}

@@ -3,13 +3,13 @@ import "./components/Modal/Modal.styles.js";
 import "./components/Modal/Modal.js";
 import { IressModalProvider as n } from "./components/Modal/ModalProvider.js";
 import "./components/Modal/hooks/useModal.js";
-import { IressToasterProvider as m } from "./components/Toaster/ToasterProvider.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 d } from "./components/Slideout/SlideoutProvider.js";
+import { IressSlideoutProvider as m } from "./components/Slideout/SlideoutProvider.js";
 import "./components/Slideout/hooks/useSlideout.js";
 import { createPortal as y } from "react-dom";
 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 || {});
@@ -20,7 +20,7 @@ o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.
 const C = [
   "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, o.Typography, o.Typography, o.Typography, o.Typography;
+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 = ({
   children: e,
   container: t,
@@ -29,7 +29,7 @@ const h = ({
   position: s,
   ...$
 }) => /* @__PURE__ */ a(n, { container: t, children: [
-  /* @__PURE__ */ r(m, { container: t, position: s, children: /* @__PURE__ */ r(d, { container: t, ...$, children: e }) }),
+  /* @__PURE__ */ r(d, { container: t, position: s, children: /* @__PURE__ */ r(m, { container: t, ...$, children: e }) }),
   !l && y(
     C.map((p) => /* @__PURE__ */ r(
       "link",

package/dist/components/Alert/Alert.js

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