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

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

@@ -1,8 +1,8 @@
-import { jsxs as j, Fragment as M, jsx as a } from "react/jsx-runtime";
-import { forwardRef as R, useId as E, useRef as W, useMemo as u, useCallback as k, useImperativeHandle as A } from "react";
+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 "./components/Spinner/Spinner.styles.js";
-import { GlobalCSSClass as f } from "./enums.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";
@@ -15,7 +15,7 @@ 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",
@@ -24,11 +24,13 @@ const h = {}, Y = [
         color: "colour.system.danger.onFill",
         _before: {
           content: "''",
-          bg: "colour.system.danger.fill"
+          bg: "colour.system.danger.fill",
+          borderColor: "colour.system.danger.fill"
         },
         _after: {
           content: "''",
-          bg: "colour.system.danger.fillHover"
+          bg: "colour.system.danger.fillHover",
+          borderColor: "colour.system.danger.fillHover"
         },
         _active: {
           _after: {
@@ -49,11 +51,13 @@ const h = {}, Y = [
         color: "colour.system.danger.text",
         _before: {
           content: "''",
-          bg: "colour.system.danger.surface"
+          bg: "colour.system.danger.surface",
+          borderColor: "[color-mix(in srgb, {colors.colour.system.danger.surface}, black 5%)]"
         },
         _after: {
           content: "''",
-          bg: "colour.system.danger.surfaceHover"
+          bg: "colour.system.danger.surfaceHover",
+          borderColor: "[color-mix(in srgb, {colors.colour.system.danger.surfaceHover}, black 5%)]"
         },
         _active: {
           _after: {
@@ -72,9 +76,12 @@ const h = {}, Y = [
     css: {
       root: {
         color: "colour.system.danger.text",
+        _before: {
+          borderColor: "colour.system.danger.fill"
+        },
         _after: {
-          content: "''",
-          bg: "colour.system.danger.surfaceHover"
+          bg: "colour.system.danger.surfaceHover",
+          borderColor: "colour.system.danger.fill"
         },
         _active: {
           _after: {
@@ -87,6 +94,22 @@ const h = {}, Y = [
       }
     }
   },
+  {
+    mode: "muted",
+    status: "danger",
+    css: {
+      root: {
+        color: "colour.system.danger.text",
+        _after: {
+          bg: "colour.system.danger.surfaceHover",
+          borderColor: "colour.system.danger.surfaceHover"
+        }
+      },
+      spinner: {
+        color: "colour.system.danger.text"
+      }
+    }
+  },
   {
     mode: "primary",
     status: "success",
@@ -94,12 +117,12 @@ const h = {}, Y = [
       root: {
         color: "colour.system.success.onFill",
         _before: {
-          content: "''",
-          bg: "colour.system.success.fill"
+          bg: "colour.system.success.fill",
+          borderColor: "colour.system.success.fill"
         },
         _after: {
-          content: "''",
-          bg: "colour.system.success.fillHover"
+          bg: "colour.system.success.fillHover",
+          borderColor: "colour.system.success.fill"
         },
         _active: {
           _after: {
@@ -119,12 +142,12 @@ const h = {}, Y = [
       root: {
         color: "colour.system.success.text",
         _before: {
-          content: "''",
-          bg: "colour.system.success.surface"
+          bg: "colour.system.success.surface",
+          borderColor: "[color-mix(in srgb, {colors.colour.system.success.surface}, black 5%)]"
         },
         _after: {
-          content: "''",
-          bg: "colour.system.success.surfaceHover"
+          bg: "colour.system.success.surfaceHover",
+          borderColor: "[color-mix(in srgb, {colors.colour.system.success.surfaceHover}, black 5%)]"
         },
         _active: {
           _after: {
@@ -143,9 +166,12 @@ const h = {}, Y = [
     css: {
       root: {
         color: "colour.system.success.text",
+        _before: {
+          borderColor: "colour.system.success.fill"
+        },
         _after: {
-          content: "''",
-          bg: "colour.system.success.surfaceHover"
+          bg: "colour.system.success.surfaceHover",
+          borderColor: "colour.system.success.fill"
         },
         _active: {
           _after: {
@@ -158,12 +184,31 @@ const h = {}, Y = [
       }
     }
   },
+  {
+    mode: "muted",
+    status: "success",
+    css: {
+      root: {
+        color: "colour.system.success.text",
+        _after: {
+          bg: "colour.system.success.surfaceHover",
+          borderColor: "colour.system.success.surfaceHover"
+        }
+      },
+      spinner: {
+        color: "colour.system.success.text"
+      }
+    }
+  },
   {
     mode: "primary",
     loading: !0,
     css: {
       root: {
-        bg: "colour.primary.fill"
+        color: "colour.neutral.60"
+      },
+      spinner: {
+        color: "colour.neutral.60"
       }
     }
   },
@@ -172,7 +217,38 @@ const h = {}, Y = [
     loading: !0,
     css: {
       root: {
-        bg: "colour.primary.surface"
+        borderColor: "colour.neutral.60",
+        color: "colour.neutral.60"
+      },
+      spinner: {
+        color: "colour.neutral.60"
+      }
+    }
+  },
+  {
+    mode: "tertiary",
+    loading: !0,
+    css: {
+      root: {
+        borderColor: "colour.neutral.60",
+        color: "colour.neutral.60"
+      },
+      spinner: {
+        color: "colour.neutral.60"
+      }
+    }
+  },
+  {
+    mode: "muted",
+    loading: !0,
+    css: {
+      root: {
+        bg: "transparent",
+        borderColor: "transparent",
+        color: "colour.neutral.60"
+      },
+      spinner: {
+        color: "colour.neutral.60"
       }
     }
   },
@@ -187,6 +263,18 @@ const h = {}, Y = [
         }
       }
     }
+  },
+  {
+    mode: [
+      "primary",
+      "muted"
+    ],
+    active: !0,
+    css: {
+      root: {
+        color: "colour.primary.text"
+      }
+    }
   }
 ], Z = [
   [
@@ -205,7 +293,7 @@ const h = {}, Y = [
     "spinner",
     "button__spinner"
   ]
-], $ = /* @__PURE__ */ Z.map(([o, e]) => [o, U(e, h, z(Y, o))]), oo = L((o = {}) => Object.fromEntries($.map(([e, t]) => [e, t.recipeFn(o)]))), S = [
+], $ = /* @__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 = [
   "active",
   "fluid",
   "inButtonGroup",
@@ -213,12 +301,12 @@ const h = {}, Y = [
   "mode",
   "noWrap",
   "status"
-], ro = (o) => ({ ...h, ...T(o) }), to = /* @__PURE__ */ Object.assign(oo, {
+], ro = (o) => ({ ...H, ...T(o) }), so = /* @__PURE__ */ Object.assign(oo, {
   __recipe__: !1,
   __name__: "button",
   raw: (o) => o,
   classNameMap: {},
-  variantKeys: S,
+  variantKeys: C,
   variantMap: {
     active: [
       "true"
@@ -241,7 +329,8 @@ const h = {}, Y = [
     mode: [
       "primary",
       "secondary",
-      "tertiary"
+      "tertiary",
+      "muted"
     ],
     noWrap: [
       "true"
@@ -252,104 +341,104 @@ const h = {}, Y = [
     ]
   },
   splitVariantProps(o) {
-    return q(o, S);
+    return q(o, C);
   },
   getVariantProps: ro
-}), so = ({
+}), eo = ({
   active: o,
-  append: e,
-  children: t,
-  className: d,
-  element: p,
-  fluid: y,
+  append: t,
+  children: s,
+  className: f,
+  element: u,
+  fluid: b,
   loading: r = !1,
-  mode: b = "secondary",
-  prepend: l,
-  noWrap: F = !1,
+  mode: y = "secondary",
+  prepend: m,
+  noWrap: S = !1,
   onClick: x,
-  status: I,
-  value: B,
+  status: h,
+  value: F,
   ...g
-}, w) => {
-  const i = E(), C = B ?? (typeof t == "string" || typeof t == "number" || typeof t == "boolean" ? t : void 0), H = X(), m = W(null), n = O({ value: C }), G = u(() => n ? n.active ? "primary" : "tertiary" : b, [n, b]), s = to({
+}, 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({
     active: (
       // eslint-disable-next-line react-hooks/refs -- ref needed for forwarding
-      o ?? H?.isActiveActivator(m.current)
+      o ?? w?.isActiveActivator(p.current)
     ),
-    fluid: y === !0 ? "true" : y,
-    inButtonGroup: !!n,
+    fluid: b === !0 ? "true" : b,
+    inButtonGroup: !!c,
     mode: G,
     loading: !!r,
-    noWrap: F,
-    status: I
-  }), [_, c] = u(
+    noWrap: S,
+    status: h
+  }), [_, n] = l(
     () => D(g),
     [g]
-  ), v = k(
-    (N) => {
-      r || (x?.(N), n?.toggle());
+  ), v = W(
+    (V) => {
+      r || (x?.(V), c?.toggle());
     },
-    [n, r, x]
-  ), P = u(
+    [c, r, x]
+  ), P = l(
     () => ({
-      children: /* @__PURE__ */ j(M, { children: [
-        l && !r && /* @__PURE__ */ a("span", { className: s.prepend, children: l }),
+      children: /* @__PURE__ */ N(j, { children: [
+        m && !r && /* @__PURE__ */ a("span", { className: e.prepend, children: m }),
         !!r && /* @__PURE__ */ a(
           K,
           {
-            className: s.spinner,
+            className: e.spinner,
             fixedWidth: !0,
             id: i,
             screenreaderText: r === !0 ? "Loading" : r
           }
         ),
-        t,
-        e && /* @__PURE__ */ a("span", { className: s.append, children: e })
+        s,
+        t && /* @__PURE__ */ a("span", { className: e.append, children: t })
       ] }),
       className: Q(
-        d,
-        f.FormElement,
-        f.FormElementInner,
-        s.root,
+        f,
+        d.FormElement,
+        d.FormElementInner,
+        e.root,
         J(_),
-        f.Button
+        d.Button
       ),
       onClick: v
     }),
     [
-      e,
       t,
-      d,
+      s,
+      f,
       v,
       r,
-      l,
+      m,
       i,
       _,
-      s.append,
-      s.prepend,
-      s.root,
-      s.spinner
+      e.append,
+      e.prepend,
+      e.root,
+      e.spinner
     ]
   );
-  A(w, () => m.current);
-  const V = u(
-    () => p ?? (c.href ? "a" : "button"),
-    [p, c.href]
+  A(I, () => p.current);
+  const k = l(
+    () => u ?? (n.href ? "a" : "button"),
+    [u, n.href]
   );
   return /* @__PURE__ */ a(
-    V,
+    k,
     {
       "aria-describedby": r ? i : void 0,
-      type: p || !c.href ? "button" : void 0,
+      type: u || !n.href ? "button" : void 0,
       ...P,
-      ...n?.props,
-      ...c,
-      ref: m
+      ...c?.props,
+      ...n,
+      ref: p
     }
   );
-}, eo = R(so);
-eo.displayName = "IressButton";
+}, to = M(eo);
+to.displayName = "IressButton";
 export {
-  eo as I,
-  to as b
+  to as I,
+  so as b
 };

package/dist/components/Alert/Alert.js

@@ -7,7 +7,7 @@ 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-tcXF8Gpw.js";
+import { I as E } from "../../Button-ZGbOkyOo.js";
 import { IressCloseButton as V } from "../Button/CloseButton/CloseButton.js";
 import "../Inline/Inline.styles.js";
 import { IressInline as $ } from "../Inline/Inline.js";

package/dist/components/Badge/Badge.styles.js

@@ -12,8 +12,7 @@ const r = o({
       whiteSpace: "nowrap",
       textDecoration: "none",
       minHeight: "[1.35em]",
-      minWidth: "[1.35em]",
-      alignSelf: "flex-start"
+      minWidth: "[1.35em]"
     },
     badge: {
       alignItems: "center",

package/dist/components/Button/Button.d.ts

@@ -58,13 +58,14 @@ export interface InternalButtonProps<C extends ElementType | undefined = undefin
      * - Primary: Used for the main action on a page. Usually only used once per screen.
      * - Secondary: Used for secondary actions on a page, often an action on multiple `IressPanel`s. Can used multiple times per screen.
      * - Tertiary: Used for tertiary actions on a page, often the secondary action on multiple `IressPanel`s. Can used multiple times per screen.
+     * - Muted: Used for less prominent actions, often used in toolbars or inline with headings. They are mainly used with icons only.
      *
      * **Migrating to version 6**
      * - `link` mode has been removed. If it is an action, use the `tertiary` mode. If it is a link inside a paragraph, use the new `IressLink` component instead.
      * - `danger` has been removed. Please use the `status` prop instead.
      * - `positive` and `success` have been removed. Please use the `status` prop instead.
      */
-    mode?: 'primary' | 'secondary' | 'tertiary';
+    mode?: 'primary' | 'secondary' | 'tertiary' | 'muted';
     /**
      * Emitted when the menu item is clicked.
      */

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-tcXF8Gpw.js";
+import { I as g } from "../../Button-ZGbOkyOo.js";
 import "../Popover/Popover.js";
 import "../Popover/Popover.styles.js";
 import "../Popover/InputPopover/InputPopover.js";

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

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

package/dist/components/Button/index.js

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

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

@@ -24,7 +24,7 @@ export declare const checkbox: import('../../styled-system/types').SlotRecipeRun
                 borderStyle: "solid";
                 borderWidth: "1px";
                 _hover: {
-                    backgroundColor: "colour.primary.surfaceHover";
+                    backgroundColor: "colour.neutral.20";
                 };
                 _groupFocusWithin: {
                     layerStyle: "elevation.focus";

package/dist/components/Checkbox/Checkbox.styles.js

@@ -67,7 +67,7 @@ const o = r({
           borderStyle: "solid",
           borderWidth: "1px",
           _hover: {
-            backgroundColor: "colour.primary.surfaceHover"
+            backgroundColor: "colour.neutral.20"
           },
           _groupFocusWithin: {
             layerStyle: "elevation.focus"
@@ -106,7 +106,10 @@ const o = r({
       checked: !0,
       css: {
         label: {
-          topLeftTriangle: !0
+          topLeftTriangle: !0,
+          _before: {
+            borderTopLeftRadius: "none"
+          }
         },
         mark: {
           checkmark: !0

package/dist/components/CheckboxMark/CheckboxMark.styles.js

@@ -11,7 +11,7 @@ const e = r({
       borderWidth: "1px",
       borderStyle: "solid",
       borderColor: "colour.neutral.70",
-      borderRadius: "radius.system.badge",
+      borderRadius: "radius.system.form",
       bg: "colour.neutral.10",
       transitionProperty: "[all]",
       transitionDuration: "0.2s",

package/dist/components/Filter/Filter.js

@@ -7,7 +7,7 @@ import { IressPopover as ae } from "../Popover/Popover.js";
 import "../Popover/Popover.styles.js";
 import "../Popover/InputPopover/InputPopover.js";
 import "../Popover/hooks/useFloatingPopover.js";
-import { I as ne } from "../../Button-tcXF8Gpw.js";
+import { I as ne } from "../../Button-ZGbOkyOo.js";
 import "../Button/CloseButton/CloseButton.js";
 import { useRichSelectState as le } from "../RichSelect/hooks/useRichSelectState.js";
 import "../../Autocomplete-DUsna_OY.js";

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-tcXF8Gpw.js";
+import { I as i } from "../../../Button-ZGbOkyOo.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/Input/Input.js

@@ -13,7 +13,7 @@ import { input as Q } from "./Input.styles.js";
 import { s as W } from "../../factory-CsinCTPr.js";
 import { s as X } from "../../is-valid-prop-DweT-eOL.js";
 import { useNoDefaultValueInForms as Y } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
-import "../../Button-tcXF8Gpw.js";
+import "../../Button-ZGbOkyOo.js";
 import { IressCloseButton as Z } from "../Button/CloseButton/CloseButton.js";
 const _ = ({ rows: a, ...f }, S) => {
   const {

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

@@ -71,7 +71,7 @@ const o = r({
         borderRadius: "radius.system.form",
         py: "spacing.2",
         px: "spacing.2",
-        m: "-spacing.1",
+        ml: "-spacing.1",
         mr: "spacing.2",
         cursor: "pointer",
         _hover: {

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-tcXF8Gpw.js";
+import "../../Button-ZGbOkyOo.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/Progress/Progress.js

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

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 y } from "../../../Button-tcXF8Gpw.js";
+import { I as y } from "../../../Button-ZGbOkyOo.js";
 import "../../Button/CloseButton/CloseButton.js";
 import "../../Popover/Popover.js";
 import "../../Popover/Popover.styles.js";

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

@@ -21,7 +21,7 @@ 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-tcXF8Gpw.js";
+import { I as G } from "../../../Button-ZGbOkyOo.js";
 import "../../Button/CloseButton/CloseButton.js";
 import { IressIcon as R } from "../../Icon/Icon.js";
 import "../../Icon/Icon.styles.js";

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-tcXF8Gpw.js";
+import { I as m } from "../../Button-ZGbOkyOo.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-tcXF8Gpw.js";
+import "../../../Button-ZGbOkyOo.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-DrLngwHq.js";
+import { t as p } from "../../../index-gmMGso0u.js";
 import { useBreakpoint as S } from "../../../hooks/useBreakpoint.js";
 function h({
   element: r,