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

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",

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
 };

package/dist/components/CheckboxGroup/CheckboxGroup.styles.js

@@ -1,4 +1,4 @@
-import { a } from "../../cva-B2x59Dph.js";
+import { c as a } from "../../cva-JiDXAa83.js";
 const i = a({
   base: {
     display: "flex",

package/dist/components/CheckboxMark/CheckboxMark.js

@@ -1,8 +1,8 @@
 import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { c as o } from "../../cva-B2x59Dph.js";
+import { c as o } from "../../css-fGu_jDvv.js";
 import { c as p } from "../../cx-DN21T1EH.js";
 import { checkboxMark as x } from "./CheckboxMark.styles.js";
-import { s as k } from "../../is-valid-prop-DFFvE05x.js";
+import { s as k } from "../../is-valid-prop-Ce0wiweq.js";
 import { GlobalCSSClass as f } from "../../enums.js";
 const d = ({
   checked: r,

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

@@ -1,4 +1,4 @@
-import { s as r } from "../../sva-TRyehFkb.js";
+import { s as r } from "../../sva-OmxClA9g.js";
 const e = r({
   slots: ["root", "indeterminateMark", "checkedMark"],
   base: {
@@ -13,7 +13,7 @@ const e = r({
       borderColor: "colour.neutral.70",
       borderRadius: "radius.025",
       bg: "colour.neutral.10",
-      transitionProperty: "all",
+      transitionProperty: "[all]",
       transitionDuration: "0.2s",
       transitionTimingFunction: "ease-out",
       color: "colour.primary.fill",

package/dist/components/Col/Col.js

@@ -1,5 +1,5 @@
 import { jsx as m } from "react/jsx-runtime";
-import { s as r } from "../../factory-DHLOr79I.js";
+import { s as r } from "../../factory-oPXoMw9H.js";
 import { col as t } from "./Col.styles.js";
 import { c as l } from "../../cx-DN21T1EH.js";
 import { GlobalCSSClass as p } from "../../enums.js";

package/dist/components/Col/Col.styles.js

@@ -1,4 +1,4 @@
-import { a } from "../../cva-B2x59Dph.js";
+import { c as a } from "../../cva-JiDXAa83.js";
 const t = a({
   base: {
     display: "block",

package/dist/components/Container/Container.js

@@ -1,5 +1,5 @@
 import { jsx as s } from "react/jsx-runtime";
-import { s as t } from "../../factory-DHLOr79I.js";
+import { s as t } from "../../factory-oPXoMw9H.js";
 import { container as m } from "./Container.styles.js";
 import { c as n } from "../../cx-DN21T1EH.js";
 import { GlobalCSSClass as a } from "../../enums.js";

package/dist/components/Container/Container.styles.js

@@ -1,10 +1,11 @@
-import { a } from "../../cva-B2x59Dph.js";
+import { c as a } from "../../cva-JiDXAa83.js";
 const n = a({
   base: {
     borderRadius: "radius.system.layout",
     paddingBlock: void 0,
     paddingInline: "spacing.400",
-    marginInline: "auto"
+    marginInline: "auto",
+    width: "[100%]"
   },
   variants: {
     /**

package/dist/components/Divider/Divider.js

@@ -1,8 +1,8 @@
 import { jsx as m } from "react/jsx-runtime";
-import { c as p } from "../../cva-B2x59Dph.js";
+import { c as p } from "../../css-fGu_jDvv.js";
 import { c as e } from "../../cx-DN21T1EH.js";
 import { divider as a } from "./Divider.styles.js";
-import { s as c } from "../../is-valid-prop-DFFvE05x.js";
+import { s as c } from "../../is-valid-prop-Ce0wiweq.js";
 import { GlobalCSSClass as l } from "../../enums.js";
 const P = ({
   className: r,

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

@@ -1,4 +1,4 @@
-import { a as r } from "../../cva-B2x59Dph.js";
+import { c as r } from "../../cva-JiDXAa83.js";
 const t = r({
   base: {
     display: "block",

package/dist/components/Expander/Expander.js

@@ -1,60 +1,65 @@
-import { jsxs as E, jsx as d } from "react/jsx-runtime";
+import { jsxs as P, jsx as a } from "react/jsx-runtime";
 import { useState as j, useEffect as k } from "react";
-import { propagateTestid as m } from "../../helpers/utility/propagateTestid.js";
-import { useIdIfNeeded as O } from "../../hooks/useIdIfNeeded.js";
-import { expander as T } from "./Expander.styles.js";
-import { c } from "../../cx-DN21T1EH.js";
-import { IressText as p } from "../Text/Text.js";
-import { s as $ } from "../../factory-DHLOr79I.js";
-import { GlobalCSSClass as h } from "../../enums.js";
-const H = ({
+import { propagateTestid as d } from "../../helpers/utility/propagateTestid.js";
+import { useIdIfNeeded as w } from "../../hooks/useIdIfNeeded.js";
+import { expander as m } from "./Expander.styles.js";
+import { c as y } from "../../css-fGu_jDvv.js";
+import { c as p } from "../../cx-DN21T1EH.js";
+import { IressText as l } from "../Text/Text.js";
+import { s as O } from "../../factory-oPXoMw9H.js";
+import { s as S } from "../../is-valid-prop-Ce0wiweq.js";
+import { GlobalCSSClass as T } from "../../enums.js";
+const J = ({
   activator: f,
-  activatorStyle: s,
-  children: l,
-  className: x,
+  activatorStyle: e = {},
+  children: x,
+  className: N,
   "data-testid": o,
-  onChange: i,
-  id: N,
-  mode: u = "section",
-  noGutter: I,
-  open: n = !1,
-  ..._
+  onChange: u,
+  id: I,
+  mode: i = "section",
+  noGutter: h,
+  open: r = !1,
+  ...C
 }) => {
-  const [r, t] = j(n), a = O({ id: N }), e = T({ mode: u, open: r });
+  const [s, c] = j(r), n = w({ id: I }), t = m({ mode: i, open: s }), _ = m.raw({ mode: i, open: s });
   k(() => {
-    t(n);
-  }, [n]);
+    c(r);
+  }, [r]);
   const b = () => {
-    t(!r), i == null || i(!r);
-  };
-  return /* @__PURE__ */ E(
-    p,
+    c(!s), u?.(!s);
+  }, [v, E] = S(e);
+  return /* @__PURE__ */ P(
+    l,
     {
-      className: c(x, e.root, h.Expander),
-      ..._,
+      className: p(N, t.root, T.Expander),
+      ...C,
       "data-testid": o,
-      id: a,
+      id: n,
       children: [
-        /* @__PURE__ */ d(
-          $.button,
+        /* @__PURE__ */ a(
+          O.button,
           {
-            ...s,
-            "aria-expanded": r,
-            "aria-controls": `${a}__container`,
-            className: c(s == null ? void 0 : s.className, e.activator),
-            "data-testid": (s == null ? void 0 : s["data-testid"]) ?? m(o, "activator"),
+            ...E,
+            "aria-expanded": s,
+            "aria-controls": `${n}__container`,
+            className: p(
+              e?.className,
+              y(_.activator, v)
+            ),
+            "data-testid": e?.["data-testid"] ?? d(o, "activator"),
             onClick: b,
             type: "button",
             children: f
           }
         ),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ a(
           "div",
           {
-            id: `${a}__container`,
-            className: e.container,
-            "data-testid": m(o, "container"),
-            children: /* @__PURE__ */ d("div", { className: e.containerInner, children: /* @__PURE__ */ d(p, { className: e.content, noGutter: I, children: l }) })
+            id: `${n}__container`,
+            className: t.container,
+            "data-testid": d(o, "container"),
+            children: /* @__PURE__ */ a("div", { className: t.containerInner, children: /* @__PURE__ */ a(l, { className: t.content, noGutter: h, children: x }) })
           }
         )
       ]
@@ -62,5 +67,5 @@ const H = ({
   );
 };
 export {
-  H as IressExpander
+  J as IressExpander
 };

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

@@ -1,4 +1,4 @@
-import { s as e } from "../../sva-TRyehFkb.js";
+import { s as e } from "../../sva-OmxClA9g.js";
 const o = e({
   slots: ["root", "activator", "content", "container", "containerInner"],
   base: {
@@ -10,7 +10,7 @@ const o = e({
       alignItems: "center",
       justifyContent: "space-between",
       width: "auto",
-      backgroundColor: "transparent",
+      bg: "transparent",
       cursor: "pointer",
       tableChevron: !0,
       position: "relative",