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

package/dist/components/Alert/Alert.js

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

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

@@ -22,7 +22,6 @@ const e = o({
       paddingInline: "spacing.3",
       textStyle: "typography.body.md",
       border: "alert",
-      height: "auto",
       justifyContent: "flex-start",
       alignItems: "flex-start"
     },

package/dist/components/ButtonGroup/ButtonGroup.js

@@ -1,50 +1,60 @@
-import { jsx as r, jsxs as f } from "react/jsx-runtime";
+import { jsx as o, jsxs as v } from "react/jsx-runtime";
 import "react";
-import { useIdIfNeeded as b } from "../../hooks/useIdIfNeeded.js";
-import { propagateTestid as G } from "../../helpers/utility/propagateTestid.js";
-import { buttonGroup as v } from "./ButtonGroup.styles.js";
-import { c as N } from "../../cx-DN21T1EH.js";
-import { s as x } from "../../factory-CsinCTPr.js";
-import { ButtonGroupProvider as B } from "./ButtonGroupProvider.js";
-import { GlobalCSSClass as I } from "../../enums.js";
+import { useIdIfNeeded as N } from "../../hooks/useIdIfNeeded.js";
+import { propagateTestid as x } from "../../helpers/utility/propagateTestid.js";
+import { buttonGroup as l } from "./ButtonGroup.styles.js";
+import { c as B } from "../../css-DNdLYQld.js";
+import { c as I } from "../../cx-DN21T1EH.js";
+import { s as C } from "../../factory-CsinCTPr.js";
+import { s as P } from "../../is-valid-prop-DweT-eOL.js";
+import { ButtonGroupProvider as S } from "./ButtonGroupProvider.js";
+import { GlobalCSSClass as g } from "../../enums.js";
 const h = ({
-  children: i,
-  className: l,
-  "data-testid": t,
+  children: m,
+  className: p,
+  "data-testid": s,
   defaultSelected: d,
-  hiddenLabel: m,
-  label: p,
-  multiple: u,
-  onChange: c,
-  selected: n,
-  ...s
+  hiddenLabel: r,
+  label: c,
+  multiple: n,
+  onChange: u,
+  selected: f,
+  ...t
 }) => {
-  const e = b({ id: s.id }), a = `${e}--label`, o = v({ hiddenLabel: m });
-  return /* @__PURE__ */ r(
-    B,
+  const e = N({ id: t.id }), a = `${e}--label`, i = l({ hiddenLabel: r }), b = l.raw({ hiddenLabel: r }), [y, G] = P(t);
+  return /* @__PURE__ */ o(
+    S,
     {
       defaultSelected: d,
-      multiple: u,
-      onChange: c,
-      selected: n,
-      children: /* @__PURE__ */ f(
-        x.div,
+      multiple: n,
+      onChange: u,
+      selected: f,
+      children: /* @__PURE__ */ v(
+        C.div,
         {
-          className: N(l, o.root, I.ButtonGroup),
+          className: I(p, i.root, g.ButtonGroup),
           id: e,
-          "data-testid": t,
-          ...s,
+          "data-testid": s,
+          ...G,
           children: [
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ o(
               "div",
               {
-                className: o.label,
-                "data-testid": G(t, "label"),
+                className: i.label,
+                "data-testid": x(s, "label"),
                 id: a,
-                children: p
+                children: c
               }
             ),
-            /* @__PURE__ */ r("div", { role: "group", "aria-labelledby": a, className: o.values, children: i })
+            /* @__PURE__ */ o(
+              "div",
+              {
+                role: "group",
+                "aria-labelledby": a,
+                className: B(b.values, y),
+                children: m
+              }
+            )
           ]
         }
       )

package/dist/components/Card/Card.d.ts

@@ -39,7 +39,7 @@ export type IressCardProps<E extends ElementType = 'div'> = ElementProps<E> & In
 export type IressButtonCardProps = IressCardProps<'button'>;
 export type IressLinkCardProps = IressCardProps<'a'>;
 export declare const IressCard: {
-    <E extends ElementType = "div">({ element, className, selected, stretch, children, footer, heading, media, prepend, topRight, ...restProps }: IressCardProps<E>): import("react/jsx-runtime").JSX.Element;
+    <E extends ElementType = "div">({ element, className, selected, children, footer, heading, media, prepend, topRight, ...restProps }: IressCardProps<E>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const IressButtonCard: {

package/dist/components/Card/Card.js

@@ -1,107 +1,114 @@
-import { jsx as s, jsxs as E, Fragment as P } from "react/jsx-runtime";
-import { s as j } from "../../is-valid-prop-DweT-eOL.js";
-import { card as B } from "./Card.styles.js";
+import { jsx as t, jsxs as E, Fragment as j } from "react/jsx-runtime";
+import { s as B } from "../../is-valid-prop-DweT-eOL.js";
+import { card as L } from "./Card.styles.js";
 import { c as e } from "../../css-DNdLYQld.js";
-import { c as L } from "../../cx-DN21T1EH.js";
+import { c as M } from "../../cx-DN21T1EH.js";
 import { propagateTestid as o } from "../../helpers/utility/propagateTestid.js";
-import { useMemo as M } from "react";
-import { GlobalCSSClass as w } from "../../enums.js";
+import { useMemo as w } from "react";
+import { GlobalCSSClass as F } from "../../enums.js";
 const N = ({
-  element: t,
-  className: c,
-  selected: l,
-  stretch: u,
-  children: m,
-  footer: p,
-  heading: h,
-  media: d,
-  prepend: i,
-  topRight: y,
-  ...C
+  element: s,
+  className: l,
+  selected: m,
+  children: p,
+  footer: h,
+  heading: y,
+  media: i,
+  prepend: n,
+  topRight: C,
+  ...f
 }) => {
-  const n = typeof h == "string" ? /* @__PURE__ */ s("h2", { children: h }) : h, v = !!i, f = !!(i ?? y ?? d ?? n ?? p), I = !!n, b = !!d, S = t == "button" || t == "a" || !!C.onClick, a = B.raw({
-    clickable: S,
+  const c = typeof y == "string" ? /* @__PURE__ */ t("h2", { children: y }) : y, I = !!n, u = !!(n ?? C ?? i ?? c ?? h), b = !!c, S = !!i, g = s == "button" || s == "a" || !!f.onClick, [P, v] = B(f), { stretch: k, ...d } = P, a = L.raw({
+    clickable: g,
     // Convert the element to a string for compatibility with the card.raw function
-    element: String(t),
-    selected: l,
-    stretch: u,
-    hasSlots: f,
-    hasHeading: I,
-    hasMedia: b,
-    hasPrepend: v
-  }), r = C["data-testid"], [g, k] = j(C), x = M(() => t ?? "div", [t]);
-  return /* @__PURE__ */ s(
+    element: String(s),
+    selected: m,
+    stretch: !!k,
+    hasSlots: u,
+    hasHeading: b,
+    hasMedia: S,
+    hasPrepend: I
+  }), r = v["data-testid"], x = w(() => s ?? "div", [s]);
+  return /* @__PURE__ */ t(
     x,
     {
-      ...k,
-      className: L(
-        e(a.root, g),
-        c,
-        w.Card
+      ...v,
+      className: M(
+        e(a.root, d),
+        l,
+        F.Card
       ),
-      children: f ? /* @__PURE__ */ E(P, { children: [
-        i && /* @__PURE__ */ s(
+      children: u ? /* @__PURE__ */ E(j, { children: [
+        n && /* @__PURE__ */ t(
           "div",
           {
-            className: e(a.prepend),
+            className: e(a.prepend, {
+              p: d.p
+            }),
             "data-testid": o(r, "prepend"),
-            children: i
+            children: n
           }
         ),
-        y && /* @__PURE__ */ s(
+        C && /* @__PURE__ */ t(
           "div",
           {
             className: e(a.topRight),
             "data-testid": o(r, "topRight"),
-            children: y
+            children: C
           }
         ),
-        d && /* @__PURE__ */ s(
+        i && /* @__PURE__ */ t(
           "div",
           {
             className: e(a.media),
             "data-testid": o(r, "media"),
-            children: d
+            children: i
           }
         ),
-        n && /* @__PURE__ */ s(
+        c && /* @__PURE__ */ t(
           "div",
           {
-            className: e(a.heading),
+            className: e(a.heading, {
+              p: d.p
+            }),
             "data-testid": o(r, "heading"),
-            children: n
+            children: c
           }
         ),
-        m && /* @__PURE__ */ s(
+        p && /* @__PURE__ */ t(
           "div",
           {
-            className: e(a.body),
+            className: e(a.body, {
+              p: d.p
+            }),
             "data-testid": o(r, "body"),
-            children: m
+            children: p
           }
         ),
-        p && /* @__PURE__ */ s(
+        h && /* @__PURE__ */ t(
           "div",
           {
-            className: e(a.footer),
+            className: e(a.footer, {
+              p: d.p
+            }),
             "data-testid": o(r, "footer"),
-            children: p
+            children: h
           }
         )
-      ] }) : m
+      ] }) : p
     }
   );
 };
 N.displayName = "IressCard";
-const F = (t) => {
-  const { type: c = "button", ...l } = t;
-  return /* @__PURE__ */ s(N, { element: "button", type: c, ...l });
+const G = (s) => {
+  const { type: l = "button", ...m } = s;
+  return /* @__PURE__ */ t(N, { element: "button", type: l, ...m });
 };
-F.displayName = "IressButtonCard";
-const G = (t) => /* @__PURE__ */ s(N, { element: "a", ...t });
-G.displayName = "IressLinkCard";
+G.displayName = "IressButtonCard";
+const H = (s) => /* @__PURE__ */ t(N, { element: "a", ...s });
+H.displayName = "IressLinkCard";
 export {
-  F as IressButtonCard,
+  G as IressButtonCard,
   N as IressCard,
-  G as IressLinkCard
+  H as IressLinkCard
 };

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

@@ -13,7 +13,7 @@ export declare const expander: import('../../styled-system/types').SlotRecipeRun
             activator: {
                 display: "flex";
                 justifyContent: "space-between";
-                alignItems: "flex-end";
+                alignItems: "flex-start";
                 width: "[100%]";
                 textStyle: "typography.heading.3";
                 _hover: {

package/dist/components/Expander/Expander.styles.js

@@ -1,5 +1,5 @@
-import { s as e } from "../../sva-B7kca5XO.js";
-const r = e({
+import { s as o } from "../../sva-B7kca5XO.js";
+const r = o({
   slots: [
     "root",
     "activator",
@@ -60,7 +60,7 @@ const r = e({
         activator: {
           display: "flex",
           justifyContent: "space-between",
-          alignItems: "flex-end",
+          alignItems: "flex-start",
           width: "[100%]",
           textStyle: "typography.heading.3",
           _hover: {

package/dist/patterns/Shadow/Shadow.js

@@ -4154,10 +4154,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     justify-content: space-between;
 }
 
-  .ai_flex-end {
-    align-items: flex-end;
-}
-
   .c_colour\\.neutral\\.90 {
     color: var(--colors-colour\\.neutral\\.90);
 }
@@ -4291,6 +4287,10 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     justify-content: flex-end;
 }
 
+  .ai_flex-end {
+    align-items: flex-end;
+}
+
   .ai_stretch {
     align-items: stretch;
 }
@@ -4377,7 +4377,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 
   .scrollable_y {
     overflow-y: auto;
-    scrollbar-gutter: stable;
 }
 
   .scrollable_y::-webkit-scrollbar {
@@ -5262,7 +5261,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 
   .scrollable_x {
     overflow-x: auto;
-    scrollbar-gutter: stable;
 }
 
   .scrollable_x::-webkit-scrollbar {
@@ -5295,7 +5293,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 
   .scrollable_true {
     overflow: auto;
-    scrollbar-gutter: stable;
 }
 
   .scrollable_true::-webkit-scrollbar {
@@ -5346,10 +5343,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     margin-bottom: var(--spacing-spacing\\.4);
 }
 
-  .h_auto {
-    height: auto;
-}
-
   .bdr-tl_radius\\.000 {
     border-top-left-radius: var(--radii-radius\\.000);
 }
@@ -5402,6 +5395,10 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     min-width: 1.35em;
 }
 
+  .h_auto {
+    height: auto;
+}
+
   .w_\\[100\\%\\] {
     width: 100%;
 }