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

package/dist/components/Toggle/Toggle.js

@@ -1,82 +1,87 @@
-import { jsxs as N, jsx as o } from "react/jsx-runtime";
-import { useState as S, useRef as y, useId as B, useEffect as g } from "react";
-import { propagateTestid as p } from "../../helpers/utility/propagateTestid.js";
-import { IressCheckboxMark as L } from "../CheckboxMark/CheckboxMark.js";
+import { jsxs as x, jsx as o } from "react/jsx-runtime";
+import { useRef as N, useId as S, useEffect as T } from "react";
+import { propagateTestid as f } from "../../helpers/utility/propagateTestid.js";
+import { IressCheckboxMark as y } from "../CheckboxMark/CheckboxMark.js";
 import "../CheckboxMark/CheckboxMark.styles.js";
-import { toggle as k } from "./Toggle.styles.js";
-import { c as u } from "../../cva-B2x59Dph.js";
-import { c as b } from "../../cx-DN21T1EH.js";
-import { GlobalCSSClass as T } from "../../enums.js";
-import { s as _ } from "../../factory-DHLOr79I.js";
+import { toggle as p } from "./Toggle.styles.js";
+import { c as g } from "../../css-fGu_jDvv.js";
+import { c as u } from "../../cx-DN21T1EH.js";
+import { GlobalCSSClass as B } from "../../enums.js";
+import { s as L } from "../../factory-oPXoMw9H.js";
+import { useControlledState as _ } from "../../hooks/useControlledState.js";
 const j = ({
-  hiddenLabel: s,
-  layout: c,
-  children: i,
-  "data-testid": r,
-  ...n
+  hiddenLabel: r,
+  layout: l,
+  children: c,
+  "data-testid": n,
+  ...s
 }) => {
-  const t = k({ hiddenLabel: s, layout: c });
+  const i = p({ hiddenLabel: r, layout: l });
   return /* @__PURE__ */ o(
     "span",
     {
-      ...n,
-      className: t.label,
-      "data-testid": p(r, "label"),
-      children: i
+      ...s,
+      className: i.label,
+      "data-testid": f(n, "label"),
+      children: c
     }
   );
 }, D = ({
-  checked: s = !1,
-  hiddenLabel: c,
-  children: i,
-  layout: r = "inline",
-  className: n,
-  onChange: t,
+  checked: r,
+  hiddenLabel: l,
+  defaultChecked: c,
+  children: n,
+  layout: s = "inline",
+  className: i,
+  onChange: b,
   "data-testid": d,
-  ...x
+  ...h
 }) => {
-  const [e, m] = S(s), a = y(null), f = `toggleLabel--${B()}`, I = {
-    hiddenLabel: c,
-    id: f,
+  const t = N(null), m = `toggleLabel--${S()}`, k = {
+    hiddenLabel: l,
+    id: m,
     "data-testid": d
-  }, h = (v) => {
-    m(!e), t == null || t(!e, v);
+  }, { value: e, setValue: C } = _({
+    component: "IressToggle",
+    propName: "checked",
+    defaultValue: c,
+    value: r
+  }), v = (I) => {
+    C(!e), b?.(!e, I);
   };
-  g(() => {
-    m(s);
-  }, [s, t]), g(() => {
-    a.current && (a.current.classList.remove(
-      u({ _before: { animationStyle: "toggle-active" } })
-    ), a.current.offsetHeight, a.current.classList.add(
-      u({ _before: { animationStyle: "toggle-active" } })
+  T(() => {
+    t.current && (t.current.classList.remove(
+      g({ _before: { animationStyle: "toggle-active" } })
+    ), t.current.offsetHeight, t.current.classList.add(
+      g({ _before: { animationStyle: "toggle-active" } })
     ));
   }, [e]);
-  const l = k({ layout: r, checked: e });
-  return /* @__PURE__ */ N(
-    _.div,
+  const a = p({ layout: s, checked: !!e });
+  return /* @__PURE__ */ x(
+    L.div,
     {
       "data-testid": d,
-      ...x,
-      className: b(n, l.toggleBase, T.Toggle),
+      ...h,
+      className: u(i, a.toggleBase, B.Toggle),
       children: [
-        /* @__PURE__ */ o(j, { ...I, layout: r, children: i }),
-        /* @__PURE__ */ o("div", { className: l.toggleButtonContainer, children: /* @__PURE__ */ o(
+        /* @__PURE__ */ o(j, { ...k, layout: s, children: n }),
+        /* @__PURE__ */ o("div", { className: a.toggleButtonContainer, children: /* @__PURE__ */ o(
           "button",
           {
-            className: b(l.toggleButton),
+            className: u(a.toggleButton),
             role: "switch",
             type: "button",
-            "aria-checked": e,
-            onClick: h,
-            "aria-labelledby": f,
-            "data-testid": p(d, "button__button"),
-            ref: a,
+            "aria-checked": !!e,
+            onClick: v,
+            "aria-labelledby": m,
+            "data-testid": f(d, "button__button"),
+            ref: t,
             children: /* @__PURE__ */ o(
-              L,
+              y,
               {
-                className: l.checkboxMark,
+                className: a.checkboxMark,
                 bg: "transparent",
-                checked: e,
+                checked: !!e,
                 size: "sm"
               }
             )

package/dist/components/Toggle/Toggle.styles.js

@@ -1,4 +1,4 @@
-import { s as e } from "../../sva-TRyehFkb.js";
+import { s as e } from "../../sva-OmxClA9g.js";
 const t = e({
   slots: [
     "toggleBase",
@@ -11,7 +11,7 @@ const t = e({
   base: {
     toggleBase: {
       display: "inline-flex",
-      gap: "spacing.050",
+      gap: "spacing.1",
       color: "colour.primary.fill"
     },
     toggleButtonContainer: {
@@ -38,7 +38,7 @@ const t = e({
       position: "relative",
       justifyContent: "flex-start",
       alignItems: "center",
-      padding: "spacing.000",
+      padding: "spacing.0",
       cursor: "pointer",
       border: "[none]",
       backgroundColor: "transparent",
@@ -51,10 +51,10 @@ const t = e({
       },
       _before: {
         content: '""',
-        top: "spacing.000",
-        left: "spacing.000",
-        right: "spacing.000",
-        bottom: "spacing.000",
+        top: "spacing.0",
+        left: "spacing.0",
+        right: "spacing.0",
+        bottom: "spacing.0",
         position: "absolute",
         borderRadius: "[{sizes.toggle.thumb}]",
         pointerEvents: "none",
@@ -81,14 +81,14 @@ const t = e({
     },
     checkboxMark: {
       opacity: 0,
-      marginInlineStart: "spacing.050",
+      marginInlineStart: "spacing.1",
       "&&:hover": {
         bg: "transparent"
       }
     },
     label: {
       display: "inline-block",
-      marginInlineEnd: "spacing.100",
+      marginInlineEnd: "spacing.1",
       color: "colour.neutral.80",
       textStyle: "typography.body.md.strong",
       lineHeight: "1.5rem"
@@ -109,8 +109,8 @@ const t = e({
           flexDirection: "row-reverse"
         },
         label: {
-          marginInlineStart: "spacing.100",
-          marginInlineEnd: "spacing.000"
+          marginInlineStart: "spacing.1",
+          marginInlineEnd: "spacing.0"
         }
       },
       "inline-between": {
@@ -129,7 +129,7 @@ const t = e({
         },
         label: {
           display: "block",
-          marginBlockEnd: "spacing.100"
+          marginBlockEnd: "spacing.1"
         }
       }
     },
@@ -140,7 +140,7 @@ const t = e({
           display: "inline-block"
         },
         checkboxMark: {
-          marginInlineEnd: "spacing.100"
+          marginInlineEnd: "spacing.1"
         }
       }
     },

package/dist/components/Tooltip/Tooltip.js

@@ -1,13 +1,13 @@
 import { jsxs as m, jsx as a } from "react/jsx-runtime";
 import { useState as w, useEffect as j, Fragment as N } from "react";
 import { c as O } from "../../cx-DN21T1EH.js";
-import { u as P, o as R, i as E, j as G, s as H, k as L, l as k, b as B, c as D, d as M } from "../../floating-ui.react-CPN4oQCc.js";
+import { u as P, o as R, i as E, j as G, s as H, k as L, l as k, b as B, c as D, d as M } from "../../floating-ui.react-BetVZ099.js";
 import { propagateTestid as p } from "../../helpers/utility/propagateTestid.js";
 import { toArray as W } from "../../helpers/formatting/toArray.js";
 import { idsLogger as q } from "../../helpers/utility/idsLogger.js";
 import { focusableElements as z } from "../../helpers/dom/focusableElements.js";
 import { tooltip as J } from "./Tooltip.styles.js";
-import { s as K } from "../../factory-DHLOr79I.js";
+import { s as K } from "../../factory-oPXoMw9H.js";
 import { GlobalCSSClass as Q } from "../../enums.js";
 const re = ({
   children: o,

package/dist/components/Tooltip/Tooltip.styles.js

@@ -1,4 +1,4 @@
-import { s as o } from "../../sva-TRyehFkb.js";
+import { s as o } from "../../sva-OmxClA9g.js";
 const a = o({
   slots: ["root", "activator", "content"],
   base: {
@@ -11,7 +11,7 @@ const a = o({
       zIndex: "600",
       width: "[max-content]",
       maxWidth: "[20em]",
-      padding: "spacing.200",
+      padding: "spacing.2",
       borderRadius: "radius.system.form",
       borderStyle: "solid",
       layerStyle: "elevation.floating",

package/dist/components/ValidationMessage/ValidationMessage.js

@@ -1,43 +1,42 @@
-import { jsxs as f, jsx as o } from "react/jsx-runtime";
-import { capitalizeFirstLetter as u } from "../../helpers/formatting/capitalizeFirstLetter.js";
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { capitalizeFirstLetter as f } from "../../helpers/formatting/capitalizeFirstLetter.js";
 import { c as p } from "../../cx-DN21T1EH.js";
-import { IressText as x } from "../Text/Text.js";
-import { s as m } from "../../factory-DHLOr79I.js";
-import { GlobalCSSClass as y } from "../../enums.js";
-import { isValidFormInputElement as b } from "../../helpers/form/isValidFormInputElement.js";
-const v = ({
-  prefix: t,
-  status: r = "danger"
-}) => t || `${r === "danger" ? "Error" : u(r)}: `, j = ({
-  children: t,
-  className: r,
+import { IressText as u } from "../Text/Text.js";
+import { s as l } from "../../factory-oPXoMw9H.js";
+import { GlobalCSSClass as x } from "../../enums.js";
+import { isValidFormInputElement as y } from "../../helpers/form/isValidFormInputElement.js";
+const b = ({
+  prefix: r,
+  status: i = "danger"
+}) => r || `${i === "danger" ? "Error" : f(i)}: `, $ = ({
+  children: r,
+  className: i,
   linkToTarget: e,
-  prefix: d,
-  status: s = "danger",
-  visiblePrefix: c = !1,
+  prefix: m,
+  status: o = "danger",
+  visiblePrefix: d = !1,
   ...n
-}) => /* @__PURE__ */ f(
-  x,
+}) => /* @__PURE__ */ c(
+  u,
   {
-    color: `colour.system.${s}.text`,
+    color: `colour.system.${o}.text`,
     display: "block",
     ...n,
     element: e ? "a" : "div",
     href: e ? `#${e}` : void 0,
     onClick: (a) => {
-      var l;
-      if ((l = n.onClick) == null || l.call(n, a), !e)
+      if (n.onClick?.(a), !e)
         return;
-      const i = document.getElementById(e);
-      i && (a.preventDefault(), b(i) ? i.focus() : (i.setAttribute("tabIndex", "-1"), i.focus(), i.removeAttribute("tabIndex")));
+      const t = document.getElementById(e);
+      t && (a.preventDefault(), y(t) ? t.focus() : (t.setAttribute("tabIndex", "-1"), t.focus(), t.removeAttribute("tabIndex")));
     },
-    className: p(r, y.ValidationMessage),
+    className: p(i, x.ValidationMessage),
     children: [
-      /* @__PURE__ */ o(m.div, { srOnly: !c, display: "inline", pe: "spacing.100", children: /* @__PURE__ */ o(v, { prefix: d, status: s }) }),
-      /* @__PURE__ */ o(m.div, { display: "inline", children: t })
+      /* @__PURE__ */ s(l.div, { srOnly: !d, display: "inline", pe: "spacing.1", children: /* @__PURE__ */ s(b, { prefix: m, status: o }) }),
+      /* @__PURE__ */ s(l.div, { display: "inline", children: r })
     ]
   }
 );
 export {
-  j as IressValidationMessage
+  $ as IressValidationMessage
 };

package/dist/components/ValidationMessage/ValidationSummary/ValidationSummary.js

@@ -3,7 +3,7 @@ import { propagateTestid as p } from "../../../helpers/utility/propagateTestid.j
 import { IressValidationMessage as c } from "../ValidationMessage.js";
 import "react";
 import { useIdIfNeeded as g } from "../../../hooks/useIdIfNeeded.js";
-import { s as e } from "../../../factory-DHLOr79I.js";
+import { s as e } from "../../../factory-oPXoMw9H.js";
 import { c as S } from "../../../cx-DN21T1EH.js";
 import { GlobalCSSClass as h } from "../../../enums.js";
 const N = ({
@@ -24,15 +24,15 @@ const N = ({
     {
       "data-testid": a,
       listStyle: "none",
-      m: "spacing.000",
-      p: "spacing.000",
+      m: "spacing.0",
+      p: "spacing.0",
       ...m,
       className: S(u, h.ValidationSummary),
       children: [
         o.map((i) => /* @__PURE__ */ r(
           e.li,
           {
-            m: "spacing.000",
+            m: "spacing.0",
             children: /* @__PURE__ */ r(
               c,
               {
@@ -48,7 +48,7 @@ const N = ({
           },
           `${x}-${i.linkToTarget}-${i.message}`
         )),
-        t && /* @__PURE__ */ r(e.li, { m: "spacing.000", children: /* @__PURE__ */ r(
+        t && /* @__PURE__ */ r(e.li, { m: "spacing.0", children: /* @__PURE__ */ r(
           c,
           {
             status: n,