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

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

@@ -1,16 +1,16 @@
-import { a } from "../../cva-B2x59Dph.js";
+import { c as a } from "../../cva-JiDXAa83.js";
 const i = a({
   base: {
     display: "flex",
     flexWrap: "wrap",
-    rowGap: "spacing.200"
+    rowGap: "spacing.2"
   },
   variants: {
     layout: {
       block: {
         display: "flex",
         flexWrap: "wrap",
-        rowGap: "spacing.200",
+        rowGap: "spacing.2",
         "& label": {
           display: "flex",
           flexBasis: "[100%]"
@@ -25,7 +25,7 @@ const i = a({
       stack: {
         display: "flex",
         flexWrap: "wrap",
-        rowGap: "spacing.200",
+        rowGap: "spacing.2",
         "& > *": {
           flexBasis: "[100%]"
         }
@@ -34,8 +34,8 @@ const i = a({
         display: "flex",
         flexFlow: "row wrap",
         width: "[100%]",
-        rowGap: "spacing.200",
-        columnGap: "spacing.400"
+        rowGap: "spacing.2",
+        columnGap: "spacing.4"
       }
     },
     readOnly: {
@@ -47,7 +47,7 @@ const i = a({
       readOnly: !0,
       layout: "stack",
       css: {
-        paddingInlineStart: "spacing.400",
+        paddingInlineStart: "spacing.4",
         "& > *": {
           display: "list-item"
         }
@@ -57,7 +57,7 @@ const i = a({
       readOnly: !0,
       layout: "block",
       css: {
-        paddingInlineStart: "spacing.400",
+        paddingInlineStart: "spacing.4",
         "& > *": {
           display: "list-item"
         }
@@ -67,13 +67,13 @@ const i = a({
       readOnly: !0,
       layout: "inline",
       css: {
-        paddingInlineStart: "spacing.400",
+        paddingInlineStart: "spacing.4",
         "& > *": {
           display: "list-item",
-          marginInlineEnd: "spacing.600"
+          marginInlineEnd: "spacing.6"
         },
         "& > *:last-child": {
-          marginInlineEnd: "spacing.000"
+          marginInlineEnd: "spacing.0"
         }
       }
     }

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"
+    paddingInline: "spacing.4",
+    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,10 +1,10 @@
-import { a as r } from "../../cva-B2x59Dph.js";
+import { c as r } from "../../cva-JiDXAa83.js";
 const t = r({
   base: {
     display: "block",
     color: "colour.neutral.30",
     borderColor: "[currentColor]",
-    m: "spacing.000"
+    m: "spacing.0"
   },
   variants: {
     vertical: {

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",
@@ -41,7 +41,7 @@ const o = e({
       overflow: "hidden"
     },
     content: {
-      py: "spacing.200"
+      py: "spacing.2"
     }
   },
   variants: {
@@ -53,11 +53,11 @@ const o = e({
           alignItems: "flex-end",
           width: "[100%]",
           textStyle: "typography.heading.4",
-          py: "spacing.300",
+          py: "spacing.3",
           borderBottom: "divider",
           transition: "[all 0.2s ease-in-out]",
           _after: {
-            mr: "spacing.200"
+            mr: "spacing.2"
           },
           _hover: {
             color: "colour.primary.text",

package/dist/components/Field/Field.js

@@ -1,95 +1,96 @@
-import { jsxs as u, jsx as o } from "react/jsx-runtime";
-import { isValidElement as q } from "react";
-import { IressLabel as w } from "../Label/Label.js";
+import { jsxs as u, jsx as s } from "react/jsx-runtime";
+import { isValidElement as E } from "react";
+import { IressLabel as q } from "../Label/Label.js";
 import "../Label/Label.styles.js";
 import { propagateTestid as y } from "../../helpers/utility/propagateTestid.js";
-import { toArray as A } from "../../helpers/formatting/toArray.js";
-import { s as d } from "../../factory-DHLOr79I.js";
-import { s as G } from "../../is-valid-prop-DFFvE05x.js";
-import { field as V } from "./Field.styles.js";
-import { c as r } from "../../cva-B2x59Dph.js";
-import { c as $ } from "../../cx-DN21T1EH.js";
-import { FieldFooter as h } from "./components/FieldFooter.js";
-import { FieldHintIcon as k, FieldHint as B } from "./components/FieldHint.js";
-import { GlobalCSSClass as D } from "../../enums.js";
-const g = ({
-  children: s,
+import { toArray as w } from "../../helpers/formatting/toArray.js";
+import { s as p } from "../../factory-oPXoMw9H.js";
+import { s as A } from "../../is-valid-prop-Ce0wiweq.js";
+import { field as G } from "./Field.styles.js";
+import { c as e } from "../../css-fGu_jDvv.js";
+import { c as V } from "../../cx-DN21T1EH.js";
+import { FieldFooter as $ } from "./components/FieldFooter.js";
+import { FieldHintIcon as h, FieldHint as k } from "./components/FieldHint.js";
+import { GlobalCSSClass as B } from "../../enums.js";
+const M = ({
+  children: i,
   className: N,
-  "data-testid": l,
+  "data-testid": t,
   error: f,
-  errorMessages: i,
-  hiddenLabel: a,
-  hint: m,
-  horizontal: e,
+  errorMessages: d,
+  hiddenLabel: m,
+  hint: o,
+  horizontal: l,
   label: v,
   labelWidth: n,
   required: b,
   readOnly: x,
-  removeErrorMargin: H,
+  removeErrorMargin: H = !1,
   supplementary: P,
   ...c
 }) => {
   const { htmlFor: F } = c;
-  let p;
-  F === void 0 && q(s) ? p = A(s)[0].props.id : p = F;
-  const t = V.raw({
-    hasError: !!f || !!(i != null && i.length),
-    hiddenLabel: a,
-    horizontal: e,
+  let a;
+  F === void 0 && E(i) ? a = w(i)[0].props.id : a = F;
+  const r = G.raw({
+    hasError: !!f || !!d?.length,
+    hasHint: !!o,
+    hiddenLabel: m,
+    horizontal: l,
     multipleFields: !1,
     // Add this as needed
     removeErrorMargin: H
-  }), [S, j] = G(c), E = () => {
+  }), [S, g] = A(c), j = () => {
     const C = /* @__PURE__ */ u(
-      w,
+      q,
       {
-        className: r(t.label),
-        "data-testid": y(l, "label"),
-        hiddenLabel: a,
-        htmlFor: p,
+        className: e(r.label),
+        "data-testid": y(t, "label"),
+        hiddenLabel: m,
+        htmlFor: a,
         required: x ? !1 : !!b,
         children: [
           v,
-          e && m && /* @__PURE__ */ o(k, { hint: m })
+          l && o && /* @__PURE__ */ s(h, { hint: o })
         ]
       }
     );
-    return m ? /* @__PURE__ */ o(
-      B,
+    return o ? /* @__PURE__ */ s(
+      k,
       {
-        hint: m,
-        horizontal: e,
-        hiddenLabel: a,
-        dataTestId: l,
+        hint: o,
+        horizontal: l,
+        hiddenLabel: m,
+        dataTestId: t,
         children: C
       }
     ) : C;
   };
   return /* @__PURE__ */ u(
-    d.div,
+    p.div,
     {
-      className: $(
+      className: V(
         N,
-        r(t.root, S),
-        D.Field
+        e(r.root, S),
+        B.Field
       ),
       style: {
-        ...e && n && {
+        ...l && n && {
           gridTemplateColumns: `${n} 1fr`
         }
       },
-      "data-testid": l,
-      ...j,
+      "data-testid": t,
+      ...g,
       children: [
-        /* @__PURE__ */ o(d.div, { className: r(t.labelContainer), children: E() }),
-        /* @__PURE__ */ o(d.div, { className: r(t.fieldContainer), children: /* @__PURE__ */ o("div", { className: r(t.element), children: s }) }),
-        /* @__PURE__ */ o(
-          h,
+        /* @__PURE__ */ s(p.div, { className: e(r.labelContainer), children: j() }),
+        /* @__PURE__ */ s(p.div, { className: e(r.fieldContainer), children: /* @__PURE__ */ s("div", { className: e(r.element), children: i }) }),
+        /* @__PURE__ */ s(
+          $,
           {
-            className: r(t.footer),
-            "data-testid": y(l, "error"),
+            className: e(r.footer),
+            "data-testid": y(t, "error"),
             error: f,
-            errorMessages: i,
+            errorMessages: d,
             supplementary: P
           }
         )
@@ -98,5 +99,5 @@ const g = ({
   );
 };
 export {
-  g as IressField
+  M as IressField
 };

package/dist/components/Field/Field.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",
@@ -17,22 +17,22 @@ const o = e({
       position: "relative"
     },
     element: {
-      position: "relative",
-      zIndex: "[1]"
+      position: "relative"
     },
     hint: {
       color: "colour.neutral.70",
+      mb: "spacing.1",
       textStyle: "typography.body.sm"
     },
     footer: {
       textStyle: "typography.body.sm.regular",
-      mt: "spacing.100"
+      mt: "spacing.1"
     },
     supplementary: {
       fontSize: "inherit"
     },
     label: {
-      mb: "spacing.100"
+      mb: "spacing.1"
     },
     labelContainer: {},
     fieldContainer: {}
@@ -45,7 +45,7 @@ const o = e({
           gridTemplateColumns: "auto 1fr",
           gridTemplateRows: "auto auto",
           gridTemplateAreas: '"label field" ". footer"',
-          columnGap: "spacing.200",
+          columnGap: "spacing.2",
           alignItems: "center"
         },
         labelContainer: {
@@ -57,7 +57,7 @@ const o = e({
         },
         footer: {
           gridArea: "footer",
-          mt: "spacing.100"
+          mt: "spacing.1"
         },
         label: {
           mb: "none"
@@ -73,6 +73,13 @@ const o = e({
         }
       }
     },
+    hasHint: {
+      true: {
+        label: {
+          mb: "spacing.0"
+        }
+      }
+    },
     hiddenLabel: {
       true: {
         label: {
@@ -110,10 +117,10 @@ const o = e({
         },
         footer: {
           position: "absolute",
-          left: "spacing.000",
-          right: "spacing.000",
+          left: "spacing.0",
+          right: "spacing.0",
           top: "[100%]",
-          mt: "spacing.100"
+          mt: "spacing.1"
         }
       }
     }