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

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

@@ -4,7 +4,7 @@ export declare const alert: import('../../styled-system/types').SlotRecipeRuntim
             alert: {
                 backgroundColor: "colour.system.danger.surface";
                 color: "colour.neutral.80";
-                borderColor: "colour.system.danger.fill";
+                borderColor: "colour.system.danger.text";
             };
             heading: {
                 color: "colour.system.danger.text";
@@ -13,14 +13,12 @@ export declare const alert: import('../../styled-system/types').SlotRecipeRuntim
                 color: "colour.system.danger.text";
             };
             action: {
-                color: "colour.system.danger.text";
-                _before: {
-                    borderColor: "colour.system.danger.text";
-                };
-                _after: {
-                    bg: "colour.system.danger.fill";
-                };
+                bg: "colour.system.danger.fill";
+                borderColor: "colour.system.danger.fill";
+                color: "colour.system.danger.onFill";
                 _hover: {
+                    bg: "colour.system.danger.fillHover";
+                    borderColor: "colour.system.danger.fillHover";
                     color: "colour.system.danger.onFill";
                 };
             };
@@ -29,7 +27,7 @@ export declare const alert: import('../../styled-system/types').SlotRecipeRuntim
             alert: {
                 backgroundColor: "colour.system.info.surface";
                 color: "colour.neutral.80";
-                borderColor: "colour.system.info.fill";
+                borderColor: "colour.system.info.text";
             };
             heading: {
                 color: "colour.system.info.text";
@@ -38,14 +36,12 @@ export declare const alert: import('../../styled-system/types').SlotRecipeRuntim
                 color: "colour.system.info.text";
             };
             action: {
-                color: "colour.system.info.text";
-                _before: {
-                    borderColor: "colour.system.info.text";
-                };
-                _after: {
-                    bg: "colour.system.info.fill";
-                };
+                bg: "colour.system.info.fill";
+                borderColor: "colour.system.info.fill";
+                color: "colour.system.info.onFill";
                 _hover: {
+                    bg: "colour.system.info.fillHover";
+                    borderColor: "colour.system.info.fillHover";
                     color: "colour.system.info.onFill";
                 };
             };
@@ -54,7 +50,7 @@ export declare const alert: import('../../styled-system/types').SlotRecipeRuntim
             alert: {
                 backgroundColor: "colour.system.success.surface";
                 color: "colour.neutral.80";
-                borderColor: "colour.system.success.fill";
+                borderColor: "colour.system.success.text";
             };
             heading: {
                 color: "colour.system.success.text";
@@ -63,14 +59,12 @@ export declare const alert: import('../../styled-system/types').SlotRecipeRuntim
                 color: "colour.system.success.text";
             };
             action: {
-                color: "colour.system.success.text";
-                _before: {
-                    borderColor: "colour.system.success.text";
-                };
-                _after: {
-                    bg: "colour.system.success.fill";
-                };
+                bg: "colour.system.success.fill";
+                borderColor: "colour.system.success.fill";
+                color: "colour.system.success.onFill";
                 _hover: {
+                    bg: "colour.system.success.fillHover";
+                    borderColor: "colour.system.success.fillHover";
                     color: "colour.system.success.onFill";
                 };
             };
@@ -79,7 +73,7 @@ export declare const alert: import('../../styled-system/types').SlotRecipeRuntim
             alert: {
                 backgroundColor: "colour.system.warning.surface";
                 color: "colour.neutral.80";
-                borderColor: "colour.system.warning.fill";
+                borderColor: "colour.system.warning.text";
             };
             heading: {
                 color: "colour.system.warning.text";
@@ -88,14 +82,12 @@ export declare const alert: import('../../styled-system/types').SlotRecipeRuntim
                 color: "colour.system.warning.text";
             };
             action: {
-                color: "colour.system.warning.text";
-                _before: {
-                    borderColor: "colour.system.warning.text";
-                };
-                _after: {
-                    bg: "colour.system.warning.fill";
-                };
+                bg: "colour.system.warning.fill";
+                borderColor: "colour.system.warning.fill";
+                color: "colour.system.warning.onFill";
                 _hover: {
+                    bg: "colour.system.warning.fillHover";
+                    borderColor: "colour.system.warning.fillHover";
                     color: "colour.system.warning.onFill";
                 };
             };

package/dist/components/Alert/Alert.styles.js

@@ -83,7 +83,7 @@ const e = o({
         alert: {
           backgroundColor: "colour.system.danger.surface",
           color: "colour.neutral.80",
-          borderColor: "colour.system.danger.fill"
+          borderColor: "colour.system.danger.text"
         },
         heading: {
           color: "colour.system.danger.text"
@@ -92,14 +92,12 @@ const e = o({
           color: "colour.system.danger.text"
         },
         action: {
-          color: "colour.system.danger.text",
-          _before: {
-            borderColor: "colour.system.danger.text"
-          },
-          _after: {
-            bg: "colour.system.danger.fill"
-          },
+          bg: "colour.system.danger.fill",
+          borderColor: "colour.system.danger.fill",
+          color: "colour.system.danger.onFill",
           _hover: {
+            bg: "colour.system.danger.fillHover",
+            borderColor: "colour.system.danger.fillHover",
             color: "colour.system.danger.onFill"
           }
         }
@@ -108,7 +106,7 @@ const e = o({
         alert: {
           backgroundColor: "colour.system.info.surface",
           color: "colour.neutral.80",
-          borderColor: "colour.system.info.fill"
+          borderColor: "colour.system.info.text"
         },
         heading: {
           color: "colour.system.info.text"
@@ -117,14 +115,12 @@ const e = o({
           color: "colour.system.info.text"
         },
         action: {
-          color: "colour.system.info.text",
-          _before: {
-            borderColor: "colour.system.info.text"
-          },
-          _after: {
-            bg: "colour.system.info.fill"
-          },
+          bg: "colour.system.info.fill",
+          borderColor: "colour.system.info.fill",
+          color: "colour.system.info.onFill",
           _hover: {
+            bg: "colour.system.info.fillHover",
+            borderColor: "colour.system.info.fillHover",
             color: "colour.system.info.onFill"
           }
         }
@@ -133,7 +129,7 @@ const e = o({
         alert: {
           backgroundColor: "colour.system.success.surface",
           color: "colour.neutral.80",
-          borderColor: "colour.system.success.fill"
+          borderColor: "colour.system.success.text"
         },
         heading: {
           color: "colour.system.success.text"
@@ -142,14 +138,12 @@ const e = o({
           color: "colour.system.success.text"
         },
         action: {
-          color: "colour.system.success.text",
-          _before: {
-            borderColor: "colour.system.success.text"
-          },
-          _after: {
-            bg: "colour.system.success.fill"
-          },
+          bg: "colour.system.success.fill",
+          borderColor: "colour.system.success.fill",
+          color: "colour.system.success.onFill",
           _hover: {
+            bg: "colour.system.success.fillHover",
+            borderColor: "colour.system.success.fillHover",
             color: "colour.system.success.onFill"
           }
         }
@@ -158,7 +152,7 @@ const e = o({
         alert: {
           backgroundColor: "colour.system.warning.surface",
           color: "colour.neutral.80",
-          borderColor: "colour.system.warning.fill"
+          borderColor: "colour.system.warning.text"
         },
         heading: {
           color: "colour.system.warning.text"
@@ -167,14 +161,12 @@ const e = o({
           color: "colour.system.warning.text"
         },
         action: {
-          color: "colour.system.warning.text",
-          _before: {
-            borderColor: "colour.system.warning.text"
-          },
-          _after: {
-            bg: "colour.system.warning.fill"
-          },
+          bg: "colour.system.warning.fill",
+          borderColor: "colour.system.warning.fill",
+          color: "colour.system.warning.onFill",
           _hover: {
+            bg: "colour.system.warning.fillHover",
+            borderColor: "colour.system.warning.fillHover",
             color: "colour.system.warning.onFill"
           }
         }

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

@@ -58,14 +58,15 @@ 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.
+     * - Quaternary: Used for less prominent actions, often used for preference toggles (eg. Collapse all).
+     * - Muted: Used for less prominent actions, often used 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' | 'muted';
+    mode?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | '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-ZGbOkyOo.js";
+import { I as g } from "../../Button-BTkololu.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-ZGbOkyOo.js";
+import { I as e } from "../../../Button-BTkololu.js";
 import { IressIcon as a } from "../../Icon/Icon.js";
 import "../../Icon/Icon.styles.js";
 import { forwardRef as i } from "react";

package/dist/components/Button/index.js

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

package/dist/components/Card/Card.styles.js

@@ -25,7 +25,7 @@ const e = t({
       gridArea: "heading",
       padding: "spacing.4",
       "& > h1:not([class]), & > h2:not([class]), & > h3:not([class]), & > h4:not([class]), & > h5:not([class]), & > h6:not([class])": {
-        textStyle: "typography.heading.4",
+        textStyle: "typography.heading.3",
         mb: "spacing.0"
       },
       "& a": {

package/dist/components/Divider/Divider.d.ts

@@ -6,6 +6,6 @@ export interface IressDividerProps extends IressStyledProps<'hr'> {
     vertical?: boolean;
 }
 export declare const IressDivider: {
-    ({ className, vertical, ...restProps }: IressDividerProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, stretch, vertical, ...restProps }: IressDividerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/Divider/Divider.js

@@ -1,31 +1,35 @@
-import { jsx as t } from "react/jsx-runtime";
-import { c as e } from "../../css-DNdLYQld.js";
-import { c as p } from "../../cx-DN21T1EH.js";
-import { divider as a } from "./Divider.styles.js";
+import { jsx as m } from "react/jsx-runtime";
+import { c as p } from "../../css-DNdLYQld.js";
+import { c as a } from "../../cx-DN21T1EH.js";
+import { divider as c } from "./Divider.styles.js";
 import { s as l } from "../../is-valid-prop-DweT-eOL.js";
-import { GlobalCSSClass as c } from "../../enums.js";
-const d = ({
-  className: r,
-  vertical: s,
-  ...o
+import { GlobalCSSClass as d } from "../../enums.js";
+const f = ({
+  className: s,
+  stretch: o,
+  vertical: r,
+  ...i
 }) => {
-  const [i, m] = l(o);
-  return /* @__PURE__ */ t(
+  const [t, e] = l(i);
+  return /* @__PURE__ */ m(
     "hr",
     {
-      className: p(
-        r,
-        e({
-          ...a.raw({ vertical: !!s }),
-          ...i
+      className: a(
+        s,
+        p({
+          ...c.raw({
+            vertical: !!r,
+            verticalStretch: !!o && r
+          }),
+          ...t
         }),
-        c.Divider
+        d.Divider
       ),
-      ...m
+      ...e
     }
   );
 };
-d.displayName = "IressDivider";
+f.displayName = "IressDivider";
 export {
-  d as IressDivider
+  f as IressDivider
 };

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

@@ -5,7 +5,6 @@ export declare const divider: import('../../styled-system/types').RecipeRuntimeF
             alignSelf: "stretch";
             borderInlineStartWidth: "1px";
             borderInlineStartStyle: "solid";
-            height: "auto";
             minHeight: "[1em]";
             verticalAlign: "middle";
         };
@@ -15,4 +14,10 @@ export declare const divider: import('../../styled-system/types').RecipeRuntimeF
             borderBlockStartStyle: "solid";
         };
     };
+    verticalStretch: {
+        true: {
+            height: "[100%]";
+            alignSelf: "center";
+        };
+    };
 }>;

package/dist/components/Divider/Divider.styles.js

@@ -1,5 +1,5 @@
 import { c as r } from "../../cva-DtPMccE9.js";
-const t = r({
+const e = r({
   base: {
     display: "block",
     color: "colour.neutral.30",
@@ -13,7 +13,6 @@ const t = r({
         alignSelf: "stretch",
         borderInlineStartWidth: "1px",
         borderInlineStartStyle: "solid",
-        height: "auto",
         minHeight: "[1em]",
         verticalAlign: "middle"
       },
@@ -22,12 +21,27 @@ const t = r({
         borderBlockStartWidth: "1px",
         borderBlockStartStyle: "solid"
       }
+    },
+    verticalStretch: {
+      true: {
+        height: "[100%]",
+        alignSelf: "center"
+      }
     }
   },
+  compoundVariants: [
+    {
+      vertical: !0,
+      verticalStretch: !1,
+      css: {
+        height: "auto"
+      }
+    }
+  ],
   defaultVariants: {
     vertical: !1
   }
 });
 export {
-  t as divider
+  e as divider
 };

package/dist/components/Expander/Expander.js

@@ -1,72 +1,85 @@
-import { jsxs as y, jsx as a } from "react/jsx-runtime";
-import { useState as P, useEffect as j } from "react";
-import { propagateTestid as d } from "../../helpers/utility/propagateTestid.js";
-import { useIdIfNeeded as k } from "../../hooks/useIdIfNeeded.js";
-import { expander as m } from "./Expander.styles.js";
-import { c as w } from "../../css-DNdLYQld.js";
-import { c as p } from "../../cx-DN21T1EH.js";
-import { IressText as l } from "../Text/Text.js";
-import { s as O } from "../../factory-CsinCTPr.js";
-import { s as S } from "../../is-valid-prop-DweT-eOL.js";
-import { GlobalCSSClass as T } from "../../enums.js";
-const $ = ({
-  activator: f,
-  activatorStyle: e = {},
-  children: x,
-  className: N,
-  "data-testid": r,
-  onChange: I,
-  id: u,
-  mode: i = "section",
-  noGutter: h,
-  open: o = !1,
+import { jsxs as m, jsx as s } from "react/jsx-runtime";
+import { useState as b, useEffect as y } from "react";
+import { propagateTestid as p } from "../../helpers/utility/propagateTestid.js";
+import { useIdIfNeeded as L } from "../../hooks/useIdIfNeeded.js";
+import { expander as l } from "./Expander.styles.js";
+import { c as P } from "../../css-DNdLYQld.js";
+import { c as f } from "../../cx-DN21T1EH.js";
+import { IressText as x } from "../Text/Text.js";
+import { s as j } from "../../factory-CsinCTPr.js";
+import { s as k } from "../../is-valid-prop-DweT-eOL.js";
+import { GlobalCSSClass as h } from "../../enums.js";
+const G = ({ className: a }) => /* @__PURE__ */ s(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 -960 960 960",
+    className: a,
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ s("path", { d: "M480-372.92q-7.23 0-13.46-2.31t-11.85-7.92L274.92-562.92q-8.3-8.31-8.5-20.89-.19-12.57 8.5-21.27 8.7-8.69 21.08-8.69 12.38 0 21.08 8.69L480-442.15l162.92-162.93q8.31-8.3 20.89-8.5 12.57-.19 21.27 8.5 8.69 8.7 8.69 21.08 0 12.38-8.69 21.08L505.31-383.15q-5.62 5.61-11.85 7.92-6.23 2.31-13.46 2.31Z" })
+  }
+), O = ({
+  activator: a,
+  activatorStyle: r = {},
+  children: N,
+  className: u,
+  "data-testid": o,
+  onChange: v,
+  id: w,
+  mode: c = "section",
+  noGutter: I,
+  open: n = !1,
   ...C
 }) => {
-  const [s, c] = P(o), n = k({ id: u }), t = m({ mode: i, open: s }), E = m.raw({ mode: i, open: s });
-  j(() => {
-    c(o);
-  }, [o]);
-  const _ = () => {
-    c(!s), I?.(!s);
-  }, [b, v] = S(e);
-  return /* @__PURE__ */ y(
-    l,
+  const [t, d] = b(n), i = L({ id: w }), e = l({ mode: c, open: t }), g = l.raw({ mode: c, open: t });
+  y(() => {
+    d(n);
+  }, [n]);
+  const q = () => {
+    d(!t), v?.(!t);
+  }, [E, _] = k(r);
+  return /* @__PURE__ */ m(
+    x,
     {
-      className: p(N, t.root, T.Expander),
+      className: f(u, e.root, h.Expander),
       ...C,
-      "data-testid": r,
-      id: n,
+      "data-testid": o,
+      id: i,
       children: [
-        /* @__PURE__ */ a(
-          O.button,
+        /* @__PURE__ */ m(
+          j.button,
           {
-            ...v,
-            "aria-expanded": s,
-            "aria-controls": `${n}__container`,
-            className: p(
-              e?.className,
-              w(E.activator, b)
+            ..._,
+            "aria-expanded": t,
+            "aria-controls": `${i}__container`,
+            className: f(
+              r?.className,
+              P(g.activator, E),
+              h.Group
             ),
-            "data-testid": e?.["data-testid"] ?? d(r, "activator"),
-            onClick: _,
+            "data-testid": r?.["data-testid"] ?? p(o, "activator"),
+            onClick: q,
             type: "button",
-            children: f
+            children: [
+              a,
+              /* @__PURE__ */ s(G, { className: e.chevron })
+            ]
           }
         ),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ s(
           "div",
           {
-            id: `${n}__container`,
-            className: t.container,
-            "data-testid": d(r, "container"),
-            children: /* @__PURE__ */ a("div", { className: t.containerInner, children: /* @__PURE__ */ a(l, { className: t.content, noGutter: h, children: x }) })
+            id: `${i}__container`,
+            className: e.container,
+            "data-testid": p(o, "container"),
+            children: /* @__PURE__ */ s("div", { className: e.containerInner, children: /* @__PURE__ */ s(x, { className: e.content, noGutter: I, children: N }) })
           }
         )
       ]
     }
   );
 };
-$.displayName = "IressExpander";
+O.displayName = "IressExpander";
 export {
-  $ as IressExpander
+  O as IressExpander
 };

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

@@ -1,21 +1,30 @@
-export declare const expander: import('../../styled-system/types').SlotRecipeRuntimeFn<"container" | "content" | "root" | "activator" | "containerInner", {
+export declare const expander: import('../../styled-system/types').SlotRecipeRuntimeFn<"container" | "content" | "root" | "activator" | "chevron" | "containerInner", {
     mode: {
         section: {
+            root: {
+                border: "table";
+                borderRadius: "radius.system.layout";
+                p: "spacing.4";
+                transition: "colors";
+                '&:has([aria-controls]:hover)': {
+                    borderColor: "colour.primary.fill";
+                };
+            };
             activator: {
                 display: "flex";
                 justifyContent: "space-between";
                 alignItems: "flex-end";
                 width: "[100%]";
-                textStyle: "typography.heading.4";
-                py: "spacing.3";
-                borderBottom: "divider";
-                transition: "[all 0.2s ease-in-out]";
-                _after: {
-                    mr: "spacing.2";
-                };
+                textStyle: "typography.heading.3";
                 _hover: {
                     color: "colour.primary.text";
-                    borderBottom: "hover";
+                };
+            };
+            chevron: {
+                bg: "colour.neutral.30";
+                borderRadius: "50%";
+                _groupHover: {
+                    bg: "colour.primary.surfaceHover";
                 };
             };
         };
@@ -30,12 +39,15 @@ export declare const expander: import('../../styled-system/types').SlotRecipeRun
                     textDecoration: "none";
                 };
             };
+            chevron: {
+                display: "inline";
+            };
         };
     };
     open: {
         true: {
-            activator: {
-                tableChevron: false;
+            chevron: {
+                transform: "rotate(180deg)";
             };
             container: {
                 gridTemplateRows: "1fr";