@iress-oss/ids-components 5.17.0 → 6.0.0-alpha.0

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

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

package/dist/components/Button/index.js

@@ -1,11 +1,7 @@
-import { BUTTON_MODES as s, BUTTON_TYPES as e, ButtonCssClass as B, ButtonMode as r, ButtonType as T } from "./Button.types.js";
-import { b as u, c as a } from "../../LoadingSuspense-BjzbePWa.js";
+import { I as s, b as r } from "../../Button-BXzmntRi.js";
+import { IressCloseButton as n } from "./CloseButton/CloseButton.js";
 export {
-  s as BUTTON_MODES,
-  e as BUTTON_TYPES,
-  B as ButtonCssClass,
-  r as ButtonMode,
-  T as ButtonType,
-  u as IressButton,
-  a as IressCloseButton
+  s as IressButton,
+  n as IressCloseButton,
+  r as button
 };

package/dist/components/ButtonGroup/ButtonGroup.js

@@ -1,66 +1,50 @@
-import { jsx as o, jsxs as d } from "react/jsx-runtime";
-import { c as n } from "../../index-2QXL0WYc.js";
-import { s } from "../../useIDSButtonGroupItem-NdNvcZnJ.js";
-import G, { useMemo as _ } from "react";
-import { toArray as g } from "../../helpers/formatting/toArray.js";
-import { useIdIfNeeded as x } from "../../hooks/useIdIfNeeded.js";
-import { IressButtonGroupProvider as B } from "./ButtonGroupProvider.js";
-import { propagateTestid as u } from "../../helpers/utility/propagateTestid.js";
-import { b as I } from "../../LoadingSuspense-BjzbePWa.js";
-import { GlobalCSSClass as S } from "../../enums.js";
+import { jsx as r, jsxs as f } from "react/jsx-runtime";
+import "react";
+import { useIdIfNeeded as b } from "../../hooks/useIdIfNeeded.js";
+import { propagateTestid as v } from "../../helpers/utility/propagateTestid.js";
+import { buttonGroup as G } from "./ButtonGroup.styles.js";
+import { c as x } from "../../cx-DN21T1EH.js";
+import { s as N } from "../../factory-DHLOr79I.js";
+import { ButtonGroupProvider as h } from "./ButtonGroupProvider.js";
+import { GlobalCSSClass as B } from "../../enums.js";
 const w = ({
-  children: c,
-  className: f,
+  children: i,
+  className: l,
   "data-testid": t,
-  defaultSelected: p,
-  hiddenLabel: i,
-  label: r,
-  multiple: b,
-  onChange: v,
-  options: y,
-  selected: N,
-  ...a
+  defaultSelected: d,
+  hiddenLabel: m,
+  label: p,
+  multiple: c,
+  onChange: n,
+  selected: u,
+  ...e
 }) => {
-  const l = x({ id: a.id }), e = `${l}--label`, h = _(() => typeof r == "string" ? /* @__PURE__ */ o(
-    "div",
+  const s = b({ id: e.id }), a = `${s}--label`, o = G({ hiddenLabel: m });
+  return /* @__PURE__ */ r(
+    h,
     {
-      id: e,
-      className: n(s.label, {
-        [S.SROnly]: i
-      }),
-      "data-testid": u(t, "label"),
-      children: r
-    }
-  ) : G.cloneElement(r, {
-    id: e
-  }), [t, i, e, r]);
-  return /* @__PURE__ */ o(
-    B,
-    {
-      defaultSelected: p,
-      multiple: b,
-      onChange: v,
-      selected: N,
-      children: /* @__PURE__ */ d(
-        "div",
+      defaultSelected: d,
+      multiple: c,
+      onChange: n,
+      selected: u,
+      children: /* @__PURE__ */ f(
+        N.div,
         {
-          className: n(f, s.buttonGroup),
-          id: l,
+          className: x(l, o.root, B.ButtonGroup),
+          id: s,
           "data-testid": t,
-          ...a,
+          ...e,
           children: [
-            h,
-            /* @__PURE__ */ d("div", { role: "group", "aria-labelledby": e, className: s.values, children: [
-              c,
-              g(y).map((m) => /* @__PURE__ */ o(
-                I,
-                {
-                  "data-testid": u(t, "button__button"),
-                  children: m
-                },
-                m
-              ))
-            ] })
+            /* @__PURE__ */ r(
+              "div",
+              {
+                className: o.label,
+                "data-testid": v(t, "label"),
+                id: a,
+                children: p
+              }
+            ),
+            /* @__PURE__ */ r("div", { role: "group", "aria-labelledby": a, className: o.values, children: i })
           ]
         }
       )

package/dist/components/ButtonGroup/ButtonGroup.styles.js

@@ -0,0 +1,34 @@
+import { s as r } from "../../sva-TRyehFkb.js";
+const s = r({
+  slots: ["root", "label", "values"],
+  base: {
+    root: {
+      display: "contents"
+    },
+    label: {
+      marginBlockEnd: "sm",
+      textStyle: "typography.body.md.strong"
+    },
+    values: {
+      bg: "colour.neutral.20",
+      border: "divider",
+      borderRadius: "radius.system.button",
+      display: "inline-flex",
+      flexWrap: "wrap",
+      p: "xs",
+      gap: "xs"
+    }
+  },
+  variants: {
+    hiddenLabel: {
+      true: {
+        label: {
+          srOnly: !0
+        }
+      }
+    }
+  }
+});
+export {
+  s as buttonGroup
+};

package/dist/components/ButtonGroup/ButtonGroupProvider.js

@@ -1,34 +1,41 @@
-import { jsx as m } from "react/jsx-runtime";
-import { createContext as i, useMemo as n } from "react";
-import { toArray as s } from "../../helpers/formatting/toArray.js";
-import { useControlledState as a } from "../../hooks/useControlledState.js";
-const v = i(void 0), A = ({
-  children: l,
-  defaultSelected: u,
-  multiple: c,
-  onChange: t,
-  selected: d
+import { jsx as a } from "react/jsx-runtime";
+import { createContext as i, useMemo as m } from "react";
+import { toArray as d } from "../../helpers/formatting/toArray.js";
+import { useControlledState as f } from "../../hooks/useControlledState.js";
+function v() {
+  return i(
+    void 0
+  );
+}
+function x() {
+  return g;
+}
+const g = v(), P = ({
+  children: r,
+  defaultSelected: n,
+  multiple: u = !1,
+  onChange: c,
+  selected: s
 }) => {
-  const { value: o, toggleValue: r } = a({
+  const { value: t, toggleValue: e } = f({
     component: "IressButtonGroup",
-    defaultValue: u,
-    multiple: c,
-    onChange: (e) => {
-      t == null || t({ selected: e });
-    },
+    defaultValue: n,
+    multiple: u,
+    onChange: c,
     propName: "selected",
-    value: d
-  }), p = n(
+    value: s
+  }), l = m(
     () => ({
-      isActive: (e) => !!(e && s(o).includes(e)),
-      toggle: r,
-      selected: s(o)
+      isActive: (o) => !!(o && d(t).includes(o)),
+      toggle: e,
+      selected: t
     }),
-    [r, o]
-  );
-  return /* @__PURE__ */ m(v.Provider, { value: p, children: l });
+    [e, t]
+  ), { Provider: p } = x();
+  return /* @__PURE__ */ a(p, { value: l, children: r });
 };
 export {
-  v as ButtonGroupContext,
-  A as IressButtonGroupProvider
+  g as ButtonGroupContext,
+  P as ButtonGroupProvider,
+  x as getButtonGroupContext
 };

package/dist/components/ButtonGroup/hooks/useButtonGroupItem.js

@@ -0,0 +1,22 @@
+import { useContext as i } from "react";
+import { ButtonGroupContext as s } from "../ButtonGroupProvider.js";
+const m = ({
+  value: e
+}) => {
+  const t = i(s);
+  if (!t) return;
+  const o = t.isActive(e);
+  return {
+    active: o,
+    props: {
+      "aria-pressed": o
+    },
+    toggle() {
+      var r;
+      e !== void 0 && ((r = t == null ? void 0 : t.toggle) == null || r.call(t, e, !o));
+    }
+  };
+};
+export {
+  m as useButtonGroupItem
+};

package/dist/components/ButtonGroup/index.js

@@ -1,6 +1,8 @@
 import { IressButtonGroup as t } from "./ButtonGroup.js";
-import { u as e } from "../../useIDSButtonGroupItem-NdNvcZnJ.js";
+import { buttonGroup as e } from "./ButtonGroup.styles.js";
+import { useButtonGroupItem as m } from "./hooks/useButtonGroupItem.js";
 export {
   t as IressButtonGroup,
-  e as useIDSButtonGroupItem
+  e as buttonGroup,
+  m as useButtonGroupItem
 };

package/dist/components/Card/Card.js

@@ -1,50 +1,102 @@
-import { jsx as a } from "react/jsx-runtime";
-import { PaddingSize as i, HeadingLevel as r } from "../../enums.js";
-import { composeIDSCard as h } from "./helpers/composeIDSCard.js";
-import { composeIDSCardSlots as k } from "./helpers/composeIDSCardSlots.js";
-import { HeadingWithDeprecatedFallback as D } from "../HeadingWithDeprecatedFallback/HeadingWithDeprecatedFallback.js";
-const t = ({
-  className: n,
-  padding: c = i.Md,
-  selected: m,
-  stretch: s,
-  children: l,
+import { jsx as t, jsxs as k, Fragment as P } from "react/jsx-runtime";
+import { s as j } from "../../is-valid-prop-DFFvE05x.js";
+import { card as M } from "./Card.styles.js";
+import { c as e } from "../../cva-B2x59Dph.js";
+import { c as w } from "../../cx-DN21T1EH.js";
+import { propagateTestid as r } from "../../helpers/utility/propagateTestid.js";
+import { useMemo as B } from "react";
+import { GlobalCSSClass as F } from "../../enums.js";
+const y = ({
+  element: s,
+  className: c,
+  selected: l,
+  stretch: C,
+  children: m,
   footer: p,
-  heading: d,
-  headingLevel: g = r.H2,
-  headingText: e,
-  media: f,
-  prepend: C,
-  topRight: H,
-  ...o
+  heading: h,
+  media: n,
+  prepend: i,
+  topRight: f,
+  ...v
 }) => {
-  const v = d || e ? /* @__PURE__ */ a(
-    D,
+  const d = typeof h == "string" ? /* @__PURE__ */ t("h2", { children: h }) : h, b = !!i, u = !!(i ?? f ?? n ?? d ?? p), N = !!d, I = !!n, S = s == "button" || s == "a" || !!v.onClick, a = M.raw({
+    clickable: S,
+    // Convert the element to a string for compatibility with the card.raw function
+    element: String(s),
+    selected: l,
+    stretch: C,
+    hasSlots: u,
+    hasHeading: N,
+    hasMedia: I,
+    hasPrepend: b
+  }), o = v["data-testid"], [g, x] = j(v), E = B(() => s ?? "div", [s]);
+  return /* @__PURE__ */ t(
+    E,
     {
-      component: "IressCard",
-      heading: d,
-      headingText: e,
-      HeadingTag: g
+      ...x,
+      className: w(
+        e(a.root, g),
+        c,
+        F.Card
+      ),
+      children: u ? /* @__PURE__ */ k(P, { children: [
+        i && /* @__PURE__ */ t(
+          "div",
+          {
+            className: e(a.prepend),
+            "data-testid": r(o, "prepend"),
+            children: i
+          }
+        ),
+        f && /* @__PURE__ */ t(
+          "div",
+          {
+            className: e(a.topRight),
+            "data-testid": r(o, "topRight"),
+            children: f
+          }
+        ),
+        n && /* @__PURE__ */ t(
+          "div",
+          {
+            className: e(a.media),
+            "data-testid": r(o, "media"),
+            children: n
+          }
+        ),
+        d && /* @__PURE__ */ t(
+          "div",
+          {
+            className: e(a.heading),
+            "data-testid": r(o, "heading"),
+            children: d
+          }
+        ),
+        m && /* @__PURE__ */ t(
+          "div",
+          {
+            className: e(a.body),
+            "data-testid": r(o, "body"),
+            children: m
+          }
+        ),
+        p && /* @__PURE__ */ t(
+          "div",
+          {
+            className: e(a.footer),
+            "data-testid": r(o, "footer"),
+            children: p
+          }
+        )
+      ] }) : m
     }
-  ) : void 0, I = h({
-    className: n,
-    clickable: !!o.onClick,
-    padding: c,
-    selected: m,
-    stretch: s
-  }), S = k({
-    children: l,
-    "data-testid": o["data-testid"],
-    footer: p,
-    heading: v,
-    media: f,
-    prepend: C,
-    topRight: H
-  });
-  return /* @__PURE__ */ a("div", { ...o, ...I, children: S });
-};
-t.HeadingLevel = r;
-t.Padding = i;
+  );
+}, K = (s) => {
+  const { type: c = "button", ...l } = s;
+  return /* @__PURE__ */ t(y, { element: "button", type: c, ...l });
+}, O = (s) => /* @__PURE__ */ t(y, { element: "a", ...s });
 export {
-  t as IressCard
+  K as IressButtonCard,
+  y as IressCard,
+  O as IressLinkCard
 };

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

@@ -0,0 +1,209 @@
+import { s as t } from "../../sva-TRyehFkb.js";
+const e = t({
+  slots: ["root", "prepend", "heading", "topRight", "media", "body", "footer"],
+  base: {
+    root: {
+      position: "relative",
+      borderRadius: "radius.system.layout",
+      bg: "colour.neutral.10",
+      color: "colour.neutral.80",
+      layerStyle: "elevation.raised",
+      textStyle: "typography.body.md.regular",
+      textAlign: "start",
+      noGutter: !0,
+      padding: "spacing.400",
+      transition: "all",
+      _focus: {
+        layerStyle: "elevation.focus"
+      }
+    },
+    prepend: {
+      gridArea: "prepend",
+      padding: "spacing.400"
+    },
+    heading: {
+      gridArea: "heading",
+      padding: "spacing.400",
+      "& > h1:not([class]), & > h2:not([class]), & > h3:not([class]), & > h4:not([class]), & > h5:not([class]), & > h6:not([class])": {
+        textStyle: "typography.heading.4",
+        mb: "spacing.000"
+      },
+      "& a": {
+        color: "colour.primary.text",
+        textDecoration: "underline",
+        _hover: {
+          textDecoration: "none"
+        }
+      }
+    },
+    topRight: {
+      gridArea: "topRight",
+      padding: "spacing.200"
+    },
+    media: {
+      gridArea: "media",
+      padding: "spacing.000",
+      borderRadius: "radius.system.layout",
+      overflow: "hidden",
+      "& img": {
+        display: "block",
+        width: "[100%]",
+        height: "auto",
+        maxWidth: "[100%]"
+      },
+      "&:not(:last-child)": {
+        borderBottomRadius: "radius.000"
+      }
+    },
+    body: {
+      gridArea: "body",
+      padding: "spacing.400"
+    },
+    footer: {
+      gridArea: "footer",
+      padding: "spacing.400",
+      borderBlockStart: "divider"
+    }
+  },
+  variants: {
+    clickable: {
+      true: {
+        root: {
+          cursor: "pointer",
+          _hover: {
+            borderColor: "colour.primary.fill"
+          },
+          _focus: {
+            layerStyle: "elevation.focus",
+            outline: "[none]"
+          }
+        }
+      }
+    },
+    element: {
+      a: {},
+      button: {
+        root: {
+          width: "[100%]"
+        }
+      },
+      div: {}
+    },
+    selected: {
+      true: {
+        root: {
+          borderWidth: "[0px]",
+          borderColor: "colour.primary.fill",
+          _after: {
+            content: '""',
+            position: "absolute",
+            inset: "[0]",
+            borderColor: "colour.primary.fill",
+            borderStyle: "solid",
+            borderWidth: "[2px]",
+            borderRadius: "radius.system.form",
+            pointerEvents: "[none]"
+          }
+        }
+      }
+    },
+    stretch: {
+      true: {
+        root: {
+          flex: "1",
+          width: "[100%]",
+          stretch: !0
+        }
+      }
+    },
+    hasSlots: {
+      true: {
+        root: {
+          display: "grid",
+          gridTemplateAreas: '"prepend body topRight" "footer footer footer"',
+          gridAutoColumns: "[minmax(0, min-content) auto min-content]",
+          gridAutoRows: "[auto min-content]",
+          padding: "spacing.000"
+        }
+      }
+    },
+    hasPrepend: {
+      true: {}
+    },
+    hasHeading: {
+      true: {}
+    },
+    hasMedia: {
+      true: {
+        root: {
+          padding: "spacing.000"
+        }
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      hasSlots: !0,
+      hasHeading: !0,
+      css: {
+        root: {
+          gridTemplateAreas: '"prepend heading topRight" "prepend body body" "footer footer footer"',
+          gridAutoColumns: "[minmax(0, min-content) auto min-content]",
+          gridAutoRows: "[min-content auto min-content]"
+        },
+        heading: {
+          "&:not(:last-child)": {
+            paddingBlockEnd: "spacing.200"
+          }
+        },
+        body: {
+          paddingBlockStart: "spacing.000"
+        }
+      }
+    },
+    {
+      hasSlots: !0,
+      hasMedia: !0,
+      css: {
+        root: {
+          gridTemplateAreas: '"prepend media media" "prepend body topRight" "footer footer footer"',
+          gridAutoColumns: "[minmax(0, min-content) auto]",
+          gridAutoRows: "[min-content auto min-content]",
+          position: "relative",
+          padding: "spacing.000"
+        }
+      }
+    },
+    {
+      hasSlots: !0,
+      hasHeading: !0,
+      hasMedia: !0,
+      css: {
+        root: {
+          gridTemplateAreas: '"prepend media media" "prepend heading topRight" "prepend body body" "footer footer footer"',
+          gridAutoColumns: "[minmax(0, min-content) auto]",
+          gridAutoRows: "[min-content min-content auto min-content]"
+        },
+        topRight: {
+          pt: "spacing.250"
+        }
+      }
+    },
+    {
+      hasSlots: !0,
+      hasPrepend: !0,
+      css: {
+        heading: {
+          paddingInlineStart: "spacing.000"
+        },
+        body: {
+          paddingInlineStart: "spacing.000"
+        }
+      }
+    }
+  ],
+  defaultVariants: {}
+});
+export {
+  e as card
+};

package/dist/components/Card/index.js

@@ -1,15 +1,8 @@
-import { CardCssClass as s, CardSlotClass as e } from "./Card.types.js";
-import { IressCard as C } from "./Card.js";
-import { IressButtonCard as m } from "./components/ButtonCard.js";
-import { IressLinkCard as d } from "./components/LinkCard.js";
-import { composeIDSCard as x } from "./helpers/composeIDSCard.js";
-import { composeIDSCardSlots as l } from "./helpers/composeIDSCardSlots.js";
+import { IressButtonCard as e, IressCard as o, IressLinkCard as a } from "./Card.js";
+import { card as t } from "./Card.styles.js";
 export {
-  s as CardCssClass,
-  e as CardSlotClass,
-  m as IressButtonCard,
-  C as IressCard,
-  d as IressLinkCard,
-  x as composeIDSCard,
-  l as composeIDSCardSlots
+  e as IressButtonCard,
+  o as IressCard,
+  a as IressLinkCard,
+  t as card
 };