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

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,11 +17,11 @@ const o = e({
       position: "relative"
     },
     element: {
-      position: "relative",
-      zIndex: "[1]"
+      position: "relative"
     },
     hint: {
       color: "colour.neutral.70",
+      mb: "spacing.100",
       textStyle: "typography.body.sm"
     },
     footer: {
@@ -73,6 +73,13 @@ const o = e({
         }
       }
     },
+    hasHint: {
+      true: {
+        label: {
+          mb: "spacing.000"
+        }
+      }
+    },
     hiddenLabel: {
       true: {
         label: {

package/dist/components/Field/FieldGroup/FieldGroup.js

@@ -1,20 +1,20 @@
-import { jsxs as G, jsx as i } from "react/jsx-runtime";
-import { propagateTestid as m } from "../../../helpers/utility/propagateTestid.js";
-import { s as N } from "../../../factory-DHLOr79I.js";
-import { s as C } from "../../../is-valid-prop-DFFvE05x.js";
-import { FieldFooter as P } from "../components/FieldFooter.js";
-import { fieldGroup as S } from "./FieldGroup.styles.js";
-import { c as l } from "../../../cva-B2x59Dph.js";
-import { c as j } from "../../../cx-DN21T1EH.js";
-import { GlobalCSSClass as v } from "../../../enums.js";
-import { LabelBase as w } from "../../Label/LabelBase/LabelBase.js";
+import { jsxs as x, jsx as t } from "react/jsx-runtime";
+import { propagateTestid as i } from "../../../helpers/utility/propagateTestid.js";
+import { s as G } from "../../../factory-oPXoMw9H.js";
+import { s as N } from "../../../is-valid-prop-Ce0wiweq.js";
+import { FieldFooter as C } from "../components/FieldFooter.js";
+import { fieldGroup as P } from "./FieldGroup.styles.js";
+import { c as o } from "../../../css-fGu_jDvv.js";
+import { c as S } from "../../../cx-DN21T1EH.js";
+import { GlobalCSSClass as j } from "../../../enums.js";
+import { LabelBase as v } from "../../Label/LabelBase/LabelBase.js";
 const H = ({
   children: a,
   className: d,
-  "data-testid": t,
-  error: e,
-  errorMessages: o,
-  hiddenLabel: r,
+  "data-testid": s,
+  error: l,
+  errorMessages: m,
+  hiddenLabel: e,
   hint: p,
   inline: n,
   join: c,
@@ -23,50 +23,50 @@ const H = ({
   supplementary: y,
   ...F
 }) => {
-  const s = S.raw({
-    hasError: !!e || !!(o != null && o.length),
-    hiddenLabel: r,
+  const r = P.raw({
+    hasError: !!l || !!m?.length,
+    hiddenLabel: e,
     inline: n,
     join: c
-  }), [h, x] = C(F);
-  return /* @__PURE__ */ G(
+  }), [g, h] = N(F);
+  return /* @__PURE__ */ x(
     "fieldset",
     {
-      className: j(
+      className: S(
         d,
-        l(s.root, h),
-        v.FieldGroup
+        o(r.root, g),
+        j.FieldGroup
       ),
-      "data-testid": t,
-      ...x,
+      "data-testid": s,
+      ...h,
       children: [
-        /* @__PURE__ */ i(
-          w,
+        /* @__PURE__ */ t(
+          v,
           {
-            append: p && /* @__PURE__ */ i(
-              N.div,
+            append: p && /* @__PURE__ */ t(
+              G.div,
               {
-                className: l(s.hint),
-                "data-testid": m(t, "hint"),
-                srOnly: r,
+                className: o(r.hint),
+                "data-testid": i(s, "hint"),
+                srOnly: e,
                 children: p
               }
             ),
-            className: l(s.legend),
+            className: o(r.legend),
             element: "legend",
-            "data-testid": m(t, "legend"),
-            hiddenLabel: r,
+            "data-testid": i(s, "legend"),
+            hiddenLabel: e,
             required: u,
             children: f
           }
         ),
-        /* @__PURE__ */ i("div", { className: l(s.fields), children: a }),
-        /* @__PURE__ */ i(
-          P,
+        /* @__PURE__ */ t("div", { className: o(r.fields), children: a }),
+        /* @__PURE__ */ t(
+          C,
           {
-            "data-testid": m(t, "error"),
-            error: e,
-            errorMessages: o,
+            "data-testid": i(s, "error"),
+            error: l,
+            errorMessages: m,
             multipleFields: !0,
             supplementary: y
           }

package/dist/components/Field/FieldGroup/FieldGroup.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", "hint", "legend", "fields"],
   base: {

package/dist/components/Field/components/FieldFooter.js

@@ -1,50 +1,50 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { getUniqueItemsByKey as u } from "../helpers/getUniqueItemsByKey.js";
-import { useRef as p, useMemo as y, useEffect as x } from "react";
-import { s as h } from "../../../factory-DHLOr79I.js";
-import { c as n } from "../../../cva-B2x59Dph.js";
-import { c as g } from "../../../cx-DN21T1EH.js";
-import { IressText as I } from "../../Text/Text.js";
-import { IressValidationSummary as S } from "../../ValidationMessage/ValidationSummary/ValidationSummary.js";
-import { IressIcon as E } from "../../Icon/Icon.js";
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { getUniqueItemsByKey as x } from "../helpers/getUniqueItemsByKey.js";
+import { useRef as a, useMemo as y, useEffect as h } from "react";
+import { s as g } from "../../../factory-oPXoMw9H.js";
+import { c } from "../../../css-fGu_jDvv.js";
+import { c as I } from "../../../cx-DN21T1EH.js";
+import { IressText as S } from "../../Text/Text.js";
+import { IressValidationSummary as E } from "../../ValidationMessage/ValidationSummary/ValidationSummary.js";
+import { IressIcon as b } from "../../Icon/Icon.js";
 import "../../Icon/Icon.styles.js";
-import { field as b } from "../Field.styles.js";
-const v = (o) => /* @__PURE__ */ r(E, { name: "exclamation-triangle", ...o }), U = ({
+import { field as v } from "../Field.styles.js";
+const C = (o) => /* @__PURE__ */ r(b, { name: "exclamation-triangle", ...o, pr: "xs" }), U = ({
   className: o,
-  "data-testid": l,
+  "data-testid": f,
   error: s,
-  errorMessages: i = [],
-  multipleFields: f,
-  supplementary: m,
-  ...c
+  errorMessages: n = [],
+  multipleFields: u,
+  supplementary: i,
+  ...d
 }) => {
-  const a = b({ multipleFields: f }), t = p(null), e = y(
-    () => !!s || i.length > 0,
-    [s, i.length]
+  const m = v({ multipleFields: u }), t = a(null), l = a(null), e = y(
+    () => !!s || n.length > 0,
+    [s, n.length]
   );
-  return x(() => {
-    t.current && (t.current.classList.remove(
-      n({ animationStyle: "field-footer" })
-    ), t.current.offsetHeight, t.current.classList.add(n({ animationStyle: "field-footer" })));
-  }, [m, e]), !m && !e ? null : /* @__PURE__ */ d(
-    h.div,
+  return h(() => {
+    !t.current || t.current.textContent === l.current || (t.current.classList.remove(
+      c({ animationStyle: "field-footer" })
+    ), t.current.offsetHeight, l.current = t.current.textContent, t.current.classList.add(c({ animationStyle: "field-footer" })));
+  }, [i, e]), !i && !e ? null : /* @__PURE__ */ p(
+    g.div,
     {
-      ...c,
-      className: g(o, a.footer),
+      ...d,
+      className: I(o, m.footer),
       ref: t,
       children: [
         e && /* @__PURE__ */ r(
-          S,
+          E,
           {
             itemStyle: { textStyle: "typography.body.sm" },
-            messages: u(i, "message"),
-            "data-testid": l,
-            prefix: /* @__PURE__ */ r(v, { "aria-label": "Error: " }),
+            messages: x(n, "message"),
+            "data-testid": f,
+            prefix: /* @__PURE__ */ r(C, { "aria-label": "Error: " }),
             visiblePrefix: !0,
             children: s
           }
         ),
-        !e && /* @__PURE__ */ r(I, { className: a.supplementary, children: m })
+        !e && /* @__PURE__ */ r(S, { className: m.supplementary, children: i })
       ]
     }
   );

package/dist/components/Field/components/FieldHint.js

@@ -4,8 +4,8 @@ import "../../Icon/Icon.styles.js";
 import { IressTooltip as p } from "../../Tooltip/Tooltip.js";
 import "../../Tooltip/Tooltip.styles.js";
 import { propagateTestid as f } from "../../../helpers/utility/propagateTestid.js";
-import { c } from "../../../cva-B2x59Dph.js";
-import { s as d } from "../../../factory-DHLOr79I.js";
+import { c } from "../../../css-fGu_jDvv.js";
+import { s as d } from "../../../factory-oPXoMw9H.js";
 import { field as g } from "../Field.styles.js";
 const v = ({
   hint: r,