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

package/dist/components/Button/index.js

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

package/dist/components/ButtonGroup/ButtonGroup.js

@@ -4,7 +4,7 @@ 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 { s as N } from "../../factory-oPXoMw9H.js";
 import { ButtonGroupProvider as h } from "./ButtonGroupProvider.js";
 import { GlobalCSSClass as B } from "../../enums.js";
 const w = ({

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

@@ -1,4 +1,4 @@
-import { s as r } from "../../sva-TRyehFkb.js";
+import { s as r } from "../../sva-OmxClA9g.js";
 const s = r({
   slots: ["root", "label", "values"],
   base: {

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

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

package/dist/components/Card/Card.js

@@ -1,7 +1,7 @@
 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 { s as j } from "../../is-valid-prop-Ce0wiweq.js";
 import { card as M } from "./Card.styles.js";
-import { c as e } from "../../cva-B2x59Dph.js";
+import { c as e } from "../../css-fGu_jDvv.js";
 import { c as w } from "../../cx-DN21T1EH.js";
 import { propagateTestid as r } from "../../helpers/utility/propagateTestid.js";
 import { useMemo as B } from "react";

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

@@ -1,4 +1,4 @@
-import { s as t } from "../../sva-TRyehFkb.js";
+import { s as t } from "../../sva-OmxClA9g.js";
 const e = t({
   slots: ["root", "prepend", "heading", "topRight", "media", "body", "footer"],
   base: {
@@ -11,7 +11,7 @@ const e = t({
       textStyle: "typography.body.md.regular",
       textAlign: "start",
       noGutter: !0,
-      padding: "spacing.400",
+      padding: "spacing.4",
       transition: "all",
       _focus: {
         layerStyle: "elevation.focus"
@@ -19,14 +19,14 @@ const e = t({
     },
     prepend: {
       gridArea: "prepend",
-      padding: "spacing.400"
+      padding: "spacing.4"
     },
     heading: {
       gridArea: "heading",
-      padding: "spacing.400",
+      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",
-        mb: "spacing.000"
+        mb: "spacing.0"
       },
       "& a": {
         color: "colour.primary.text",
@@ -38,11 +38,11 @@ const e = t({
     },
     topRight: {
       gridArea: "topRight",
-      padding: "spacing.200"
+      padding: "spacing.2"
     },
     media: {
       gridArea: "media",
-      padding: "spacing.000",
+      padding: "spacing.0",
       borderRadius: "radius.system.layout",
       overflow: "hidden",
       "& img": {
@@ -57,11 +57,11 @@ const e = t({
     },
     body: {
       gridArea: "body",
-      padding: "spacing.400"
+      padding: "spacing.4"
     },
     footer: {
       gridArea: "footer",
-      padding: "spacing.400",
+      padding: "spacing.4",
       borderBlockStart: "divider"
     }
   },
@@ -123,7 +123,7 @@ const e = t({
           gridTemplateAreas: '"prepend body topRight" "footer footer footer"',
           gridAutoColumns: "[minmax(0, min-content) auto min-content]",
           gridAutoRows: "[auto min-content]",
-          padding: "spacing.000"
+          padding: "spacing.0"
         }
       }
     },
@@ -136,7 +136,7 @@ const e = t({
     hasMedia: {
       true: {
         root: {
-          padding: "spacing.000"
+          padding: "spacing.0"
         }
       }
     }
@@ -153,11 +153,11 @@ const e = t({
         },
         heading: {
           "&:not(:last-child)": {
-            paddingBlockEnd: "spacing.200"
+            paddingBlockEnd: "spacing.2"
           }
         },
         body: {
-          paddingBlockStart: "spacing.000"
+          paddingBlockStart: "spacing.0"
         }
       }
     },
@@ -170,7 +170,7 @@ const e = t({
           gridAutoColumns: "[minmax(0, min-content) auto]",
           gridAutoRows: "[min-content auto min-content]",
           position: "relative",
-          padding: "spacing.000"
+          padding: "spacing.0"
         }
       }
     },
@@ -185,7 +185,7 @@ const e = t({
           gridAutoRows: "[min-content min-content auto min-content]"
         },
         topRight: {
-          pt: "spacing.250"
+          pt: "spacing.3"
         }
       }
     },
@@ -194,10 +194,10 @@ const e = t({
       hasPrepend: !0,
       css: {
         heading: {
-          paddingInlineStart: "spacing.000"
+          paddingInlineStart: "spacing.0"
         },
         body: {
-          paddingInlineStart: "spacing.000"
+          paddingInlineStart: "spacing.0"
         }
       }
     }

package/dist/components/Checkbox/Checkbox.js

@@ -1,127 +1,126 @@
-import { jsx as m, jsxs as y } from "react/jsx-runtime";
-import { forwardRef as W, useRef as X, useId as Y, useState as Z, useContext as _, useCallback as $, useImperativeHandle as E } from "react";
-import { getFormControlValueAsString as b } from "../../helpers/form/getFormControlValueAsString.js";
-import { IressCheckboxMark as G } from "../CheckboxMark/CheckboxMark.js";
+import { jsx as c, jsxs as I } from "react/jsx-runtime";
+import { forwardRef as K, useRef as L, useId as Q, useState as W, useContext as X, useCallback as Y, useImperativeHandle as Z } from "react";
+import { getFormControlValueAsString as g } from "../../helpers/form/getFormControlValueAsString.js";
+import { IressCheckboxMark as _ } from "../CheckboxMark/CheckboxMark.js";
 import "../CheckboxMark/CheckboxMark.styles.js";
-import { useControlledState as ee } from "../../hooks/useControlledState.js";
-import { IressReadonly as te } from "../Readonly/Readonly.js";
+import { useControlledState as $ } from "../../hooks/useControlledState.js";
+import { IressReadonly as ee } from "../Readonly/Readonly.js";
 import "../Readonly/Readonly.styles.js";
 import { checkbox as oe } from "./Checkbox.styles.js";
-import { c as l } from "../../cva-B2x59Dph.js";
-import { c as g } from "../../cx-DN21T1EH.js";
-import { propagateTestid as se } from "../../helpers/utility/propagateTestid.js";
-import { getCheckboxGroupContext as re } from "../CheckboxGroup/CheckboxGroup.js";
+import { c as l } from "../../css-fGu_jDvv.js";
+import { c as y } from "../../cx-DN21T1EH.js";
+import { propagateTestid as te } from "../../helpers/utility/propagateTestid.js";
+import { getCheckboxGroupContext as se } from "../CheckboxGroup/CheckboxGroup.js";
 import "../CheckboxGroup/CheckboxGroup.styles.js";
-import { GlobalCSSClass as d } from "../../enums.js";
-import { s as F } from "../../factory-DHLOr79I.js";
-import { s as ne } from "../../is-valid-prop-DFFvE05x.js";
-import { IressText as ae } from "../Text/Text.js";
-import { useNoDefaultValueInForms as ie } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
-const me = ({
+import { GlobalCSSClass as i } from "../../enums.js";
+import { s as F } from "../../factory-oPXoMw9H.js";
+import { s as re } from "../../is-valid-prop-Ce0wiweq.js";
+import { IressText as ne } from "../Text/Text.js";
+import { useNoDefaultValueInForms as ce } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
+const ae = ({
   checked: S,
   className: V,
-  defaultChecked: c,
-  hiddenControl: v,
-  hiddenLabel: N,
-  indeterminate: p,
-  id: R,
-  name: w,
-  onChange: i,
-  value: t,
-  children: u,
-  readOnly: P,
+  defaultChecked: d,
+  hiddenControl: N,
+  hiddenLabel: R,
+  indeterminate: u,
+  id: G,
+  name: v,
+  onChange: p,
+  value: o,
+  children: h,
+  readOnly: w,
   touch: j,
   "data-testid": f,
-  ...h
-}, H) => {
-  ie({
+  ...k
+}, E) => {
+  ce({
     component: "IressCheckbox",
-    defaultValue: c,
+    defaultValue: d,
     message: "Using the `defaultChecked` prop on an `IressCheckbox` inside an `IressForm` component is not supported. Please use the `defaultValue` prop on the `IressFormField`, or use `defaultValues` on the `IressForm` component (recommended) to ensure a single source of truth for your form."
   });
-  const C = X(null), o = C.current, M = Y(), k = R ?? M, [T, q] = Z(
-    p ?? !1
-  ), e = _(re()), A = e ? void 0 : c, D = e && t ? e.value.includes(t) : S, O = (e == null ? void 0 : e.hiddenCheckbox) ?? v, U = (e == null ? void 0 : e.touch) ?? j, z = (e == null ? void 0 : e.readOnly) ?? P, B = (e == null ? void 0 : e.name) ?? w, {
-    value: s,
-    setValue: I,
-    isControlled: r
-  } = ee({
+  const C = L(null), a = C.current, H = Q(), b = G ?? H, [M, P] = W(
+    u ?? !1
+  ), e = X(se()), T = e ? void 0 : d, q = e?.hiddenCheckbox ?? N, A = e?.touch ?? j, D = e?.readOnly ?? w, O = e?.name ?? v;
+  let m = S;
+  e && o ? m = e.value.includes(o) : !e && typeof o == "boolean" && (m = o);
+  const {
+    value: t,
+    setValue: x,
+    isControlled: s
+  } = $({
     component: "IressCheckbox",
     propName: "checked",
-    defaultValue: A,
-    value: D
-  }), J = r ? p : T, K = $(
-    (a) => {
-      var x;
-      r || q(!1), I(a.target.checked), i == null || i(a, a.target.checked, t), (x = e == null ? void 0 : e.onChange) == null || x.call(e, a, a.target.checked, t);
+    defaultValue: T,
+    value: m
+  }), U = s ? u : M, z = Y(
+    (n) => {
+      s || P(!1), x(n.target.checked), p?.(n, n.target.checked, o), e?.onChange?.(n, n.target.checked, o);
     },
-    [e, r, i, I, t]
+    [e, s, p, x, o]
   );
-  if (E(H, () => ({
-    focus: () => o == null ? void 0 : o.focus(),
-    blur: () => o == null ? void 0 : o.blur(),
-    input: o,
-    extras: {
-      valueProp: "checked"
-    }
-  })), z)
-    return s ? /* @__PURE__ */ m(
-      te,
+  if (Z(E, () => ({
+    focus: () => a?.focus(),
+    blur: () => a?.blur(),
+    input: a
+  })), D)
+    return t ? /* @__PURE__ */ c(
+      ee,
       {
-        ...h,
+        ...k,
         width: void 0,
-        value: b(t),
-        children: u
+        value: g(o),
+        children: h
       }
     ) : null;
-  const n = oe.raw({
-    hiddenControl: O,
-    hiddenLabel: N,
-    touch: U,
-    checked: s
-  }), [L, Q] = ne(h);
-  return /* @__PURE__ */ y(
+  const r = oe.raw({
+    hiddenControl: q,
+    hiddenLabel: R,
+    touch: A,
+    checked: t
+  }), [B, J] = re(k);
+  return /* @__PURE__ */ I(
     "div",
     {
       "data-testid": f,
-      className: g(
+      className: y(
         V,
-        l(n.root, L),
-        d.Group,
-        d.Checkbox
+        l(r.root, B),
+        i.Group,
+        i.Checkbox
       ),
       children: [
-        /* @__PURE__ */ m(
+        /* @__PURE__ */ c(
           F.input,
           {
-            ...Q,
-            ...n.input,
-            value: b(t),
+            ...J,
+            ...r.input,
+            value: g(o),
             type: "checkbox",
-            id: k,
-            defaultChecked: r ? void 0 : s,
-            checked: r ? s : void 0,
-            onChange: K,
+            id: b,
+            defaultChecked: s ? void 0 : t,
+            checked: s ? t : void 0,
+            onChange: z,
             ref: C,
-            name: B
+            name: O
           }
         ),
-        /* @__PURE__ */ y(F.label, { htmlFor: k, ...n.label, children: [
-          /* @__PURE__ */ m(
-            G,
+        /* @__PURE__ */ I(F.label, { htmlFor: b, ...r.label, children: [
+          /* @__PURE__ */ c(
+            _,
             {
-              className: g(l(n.mark), d.FormElement),
-              checked: s,
-              indeterminate: J,
-              "data-testid": se(f, "checkboxMark")
+              className: y(l(r.mark), i.FormElement),
+              checked: t,
+              indeterminate: U,
+              "data-testid": te(f, "checkboxMark")
             }
           ),
-          /* @__PURE__ */ m(ae, { element: "span", className: l(n.labelSpan), children: u })
+          /* @__PURE__ */ c(ne, { element: "span", className: l(r.labelSpan), children: h })
         ] })
       ]
     }
   );
-}, Re = W(me);
+}, Re = K(ae);
 export {
   Re as IressCheckbox
 };

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

@@ -1,4 +1,4 @@
-import { s as r } from "../../sva-TRyehFkb.js";
+import { s as r } from "../../sva-OmxClA9g.js";
 const o = r({
   slots: [
     "formElement",
@@ -24,14 +24,14 @@ const o = r({
     label: {
       position: "relative",
       lineHeight: "1.5",
-      margin: "spacing.000",
+      margin: "spacing.0",
       display: "inline-flex",
       cursor: "pointer"
     },
     labelSpan: {},
     mark: {
       color: "[currentColor]",
-      marginInlineEnd: "spacing.200",
+      marginInlineEnd: "spacing.2",
       flexShrink: 0,
       _groupFocusWithin: {
         layerStyle: "elevation.focus"
@@ -45,7 +45,7 @@ const o = r({
           display: "inline-block"
         },
         mark: {
-          marginInlineEnd: "spacing.000"
+          marginInlineEnd: "spacing.0"
         },
         labelSpan: {
           srOnly: !0
@@ -56,7 +56,7 @@ const o = r({
       true: {
         label: {
           position: "relative",
-          padding: "spacing.000",
+          padding: "spacing.0",
           width: "[100%]",
           cursor: "pointer",
           borderRadius: "radius.system.form",
@@ -85,7 +85,7 @@ const o = r({
           borderStyle: "solid",
           borderWidth: "1px",
           borderRadius: "radius.system.form",
-          padding: "spacing.300"
+          padding: "spacing.3"
         }
       }
     },

package/dist/components/CheckboxGroup/CheckboxGroup.js

@@ -1,92 +1,87 @@
-import { jsx as x } from "react/jsx-runtime";
-import { forwardRef as V, createContext as j, useRef as w, useImperativeHandle as y, useMemo as A } from "react";
-import { toArray as C } from "../../helpers/formatting/toArray.js";
-import { useControlledState as D } from "../../hooks/useControlledState.js";
-import { checkboxGroup as H } from "./CheckboxGroup.styles.js";
-import { c as M } from "../../cx-DN21T1EH.js";
-import { GlobalCSSClass as _ } from "../../enums.js";
-import { useNoDefaultValueInForms as z } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
-function J() {
-  return j(void 0);
+import { jsx as p } from "react/jsx-runtime";
+import { forwardRef as N, createContext as T, useRef as V, useImperativeHandle as j, useMemo as w } from "react";
+import { toArray as m } from "../../helpers/formatting/toArray.js";
+import { useControlledState as y } from "../../hooks/useControlledState.js";
+import { checkboxGroup as A } from "./CheckboxGroup.styles.js";
+import { c as D } from "../../cx-DN21T1EH.js";
+import { GlobalCSSClass as E } from "../../enums.js";
+import { useNoDefaultValueInForms as H } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
+function M() {
+  return T(void 0);
 }
-function K() {
-  return L;
+function _() {
+  return z;
 }
-const L = J(), P = ({
-  className: v,
-  value: a,
-  defaultValue: c,
-  children: b,
-  layout: d = "stack",
-  onBlur: u,
-  onChange: h,
-  onFocus: s,
-  hiddenCheckbox: p,
-  name: f,
-  role: k = "group",
-  readOnly: n,
-  touch: l,
-  ...G
-}, g) => {
-  z({
+const z = M(), J = ({
+  className: f,
+  value: n,
+  defaultValue: r,
+  children: x,
+  layout: C = "stack",
+  onBlur: v,
+  onChange: b,
+  onFocus: d,
+  hiddenCheckbox: s,
+  name: l,
+  role: h = "group",
+  readOnly: t,
+  touch: i,
+  ...k
+}, G) => {
+  H({
     component: "IressCheckboxGroup",
-    defaultValue: c
+    defaultValue: r
   });
-  const { value: m, setValue: I, toggleValue: i } = D({
+  const { value: a, setValue: g, toggleValue: u } = y({
     component: "IressCheckbox",
-    defaultValue: c === void 0 ? void 0 : C(c),
+    defaultValue: r === void 0 ? void 0 : m(r),
     multiple: !0,
-    onChange: h,
-    value: a === void 0 ? void 0 : C(a)
-  }), r = w(null), e = r.current;
-  y(g, () => ({
+    onChange: b,
+    value: n === void 0 ? void 0 : m(n)
+  }), e = V(null), c = e.current;
+  j(G, () => ({
     // React hook form requires the focus, blur, input
-    focus: () => {
-      var o;
-      return (o = e == null ? void 0 : e.querySelector("input")) == null ? void 0 : o.focus();
-    },
-    blur: () => e == null ? void 0 : e.blur(),
-    input: e,
+    focus: () => c?.querySelector("input")?.focus(),
+    blur: () => c?.blur(),
+    input: c,
     // Custom methods allowing you to interact with an uncontrolled checkbox group
-    check: (o) => i(o, !0),
-    reset: () => I([])
+    check: (o) => u(o, !0),
+    reset: () => g([])
   }));
-  const S = A(
+  const I = w(
     () => ({
-      hiddenCheckbox: p,
-      name: f,
-      onChange: (o, t, T) => i(T, t),
-      readOnly: n,
-      touch: l,
-      value: m ?? []
+      hiddenCheckbox: s,
+      name: l,
+      onChange: (o, q, B) => u(B, q),
+      readOnly: t,
+      touch: i,
+      value: a ?? []
     }),
-    [f, m, p, n, l, i]
-  ), R = (o) => {
-    var t;
-    s == null || s(o), o.target === r.current && ((t = r.current.querySelector("input")) == null || t.focus());
-  }, q = (o) => {
-    var t;
-    o.relatedTarget && !((t = r.current) != null && t.contains(o.relatedTarget)) && (u == null || u(o));
-  }, { Provider: N } = K();
-  return /* @__PURE__ */ x(N, { value: S, children: /* @__PURE__ */ x(
+    [l, a, s, t, i, u]
+  ), S = (o) => {
+    d?.(o), o.target === e.current && e.current.querySelector("input")?.focus();
+  }, F = (o) => {
+    o.relatedTarget && !e.current?.contains(o.relatedTarget) && v?.(o);
+  }, { Provider: R } = _();
+  return /* @__PURE__ */ p(R, { value: I, children: /* @__PURE__ */ p(
     "div",
     {
-      ...G,
-      role: k,
-      ref: r,
-      className: M(
-        v,
-        H({ layout: d, readOnly: n }),
-        _.CheckboxGroup
+      ...k,
+      role: h,
+      ref: e,
+      className: D(
+        f,
+        A({ layout: C, readOnly: t }),
+        E.CheckboxGroup
       ),
-      onBlur: q,
-      onFocus: R,
-      children: b
+      onBlur: F,
+      onFocus: S,
+      children: x
     }
   ) });
-}, B = V(P);
+}, Z = N(J);
 export {
-  L as CheckboxGroupContext,
-  B as IressCheckboxGroup,
-  K as getCheckboxGroupContext
+  z as CheckboxGroupContext,
+  Z as IressCheckboxGroup,
+  _ as getCheckboxGroupContext
 };