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

package/dist/components/Col/index.js

@@ -1,12 +1,6 @@
-import { COL_ALIGN_SELFS as l, COL_OFFSETS as S, COL_SPANS as s, ColAlignSelf as e, ColCssClass as f, ColOffset as r, ColSpan as L } from "./Col.types.js";
-import { IressCol as _ } from "./Col.js";
+import { col as e } from "./Col.styles.js";
+import { IressCol as l } from "./Col.js";
 export {
-  l as COL_ALIGN_SELFS,
-  S as COL_OFFSETS,
-  s as COL_SPANS,
-  e as ColAlignSelf,
-  f as ColCssClass,
-  r as ColOffset,
-  L as ColSpan,
-  _ as IressCol
+  l as IressCol,
+  e as col
 };

package/dist/components/Container/Container.js

@@ -1,21 +1,18 @@
-import { jsx as e } from "react/jsx-runtime";
-import { c as i } from "../../index-cbHCAGLB.js";
-import { ContainerCssClass as s } from "./Container.types.js";
-const l = ({
-  children: o,
-  className: r,
-  fluid: a,
-  ...m
-}) => /* @__PURE__ */ e(
-  "div",
+import { jsx as s } from "react/jsx-runtime";
+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";
+const i = t("div", m), C = ({
+  className: o,
+  ...r
+}) => /* @__PURE__ */ s(
+  i,
   {
-    ...m,
-    className: i(r, s.Base, {
-      [s.Fluid]: a
-    }),
-    children: o
+    ...r,
+    className: n(o, a.Container)
   }
 );
 export {
-  l as IressContainer
+  C as IressContainer
 };

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

@@ -0,0 +1,46 @@
+import { c as a } from "../../cva-JiDXAa83.js";
+const n = a({
+  base: {
+    borderRadius: "radius.system.layout",
+    paddingBlock: void 0,
+    paddingInline: "spacing.400",
+    marginInline: "auto",
+    width: "[100%]"
+  },
+  variants: {
+    /**
+     * Container stretches to fill the width of the browser window if true.
+     */
+    fluid: {
+      true: {
+        maxWidth: "[100%]"
+      },
+      false: {
+        xs: {
+          maxWidth: "container.xs"
+        },
+        sm: {
+          maxWidth: "container.sm"
+        },
+        md: {
+          maxWidth: "container.md"
+        },
+        lg: {
+          maxWidth: "container.lg"
+        },
+        xl: {
+          maxWidth: "container.xl"
+        },
+        xxl: {
+          maxWidth: "container.xxl"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    fluid: !1
+  }
+});
+export {
+  n as container
+};

package/dist/components/Container/index.js

@@ -1,6 +1,6 @@
-import { ContainerCssClass as s } from "./Container.types.js";
-import { IressContainer as n } from "./Container.js";
+import { container as e } from "./Container.styles.js";
+import { IressContainer as t } from "./Container.js";
 export {
-  s as ContainerCssClass,
-  n as IressContainer
+  t as IressContainer,
+  e as container
 };

package/dist/components/Divider/Divider.js

@@ -1,21 +1,30 @@
 import { jsx as m } from "react/jsx-runtime";
-import { c as o } from "../../index-cbHCAGLB.js";
-import { DividerCssClass as s } from "./Divider.types.js";
-const p = ({
-  className: a,
-  gutter: r,
-  vertical: e,
-  ...i
-}) => /* @__PURE__ */ m(
-  "hr",
-  {
-    className: o(a, s.Base, {
-      [`${s.Gutter}--${r}`]: r,
-      [s.Vertical]: e
-    }),
-    ...i
-  }
-);
+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-Ce0wiweq.js";
+import { GlobalCSSClass as l } from "../../enums.js";
+const P = ({
+  className: r,
+  vertical: s,
+  ...o
+}) => {
+  const [i, t] = c(o);
+  return /* @__PURE__ */ m(
+    "hr",
+    {
+      className: e(
+        r,
+        p({
+          ...a.raw({ vertical: !!s }),
+          ...i
+        }),
+        l.Divider
+      ),
+      ...t
+    }
+  );
+};
 export {
-  p as IressDivider
+  P as IressDivider
 };

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

@@ -0,0 +1,33 @@
+import { c as r } from "../../cva-JiDXAa83.js";
+const t = r({
+  base: {
+    display: "block",
+    color: "colour.neutral.30",
+    borderColor: "[currentColor]",
+    m: "spacing.000"
+  },
+  variants: {
+    vertical: {
+      true: {
+        display: "inline-block",
+        alignSelf: "stretch",
+        borderInlineStartWidth: "1px",
+        borderInlineStartStyle: "solid",
+        height: "auto",
+        minHeight: "[1em]",
+        verticalAlign: "middle"
+      },
+      false: {
+        display: "block",
+        borderBlockStartWidth: "1px",
+        borderBlockStartStyle: "solid"
+      }
+    }
+  },
+  defaultVariants: {
+    vertical: !1
+  }
+});
+export {
+  t as divider
+};

package/dist/components/Divider/index.js

@@ -1,6 +1,6 @@
-import { DividerCssClass as e } from "./Divider.types.js";
-import { IressDivider as o } from "./Divider.js";
+import { IressDivider as i } from "./Divider.js";
+import { divider as d } from "./Divider.styles.js";
 export {
-  e as DividerCssClass,
-  o as IressDivider
+  i as IressDivider,
+  d as divider
 };

package/dist/components/Expander/Expander.js

@@ -1,80 +1,71 @@
-import { jsxs as u, jsx as t } from "react/jsx-runtime";
-import { c as r } from "../../index-cbHCAGLB.js";
-import { useState as k, useEffect as g } from "react";
-import { propagateTestid as c } from "../../helpers/utility/propagateTestid.js";
-import { ExpanderMode as C } from "./Expander.types.js";
-import { useIdIfNeeded as _ } from "../../hooks/useIdIfNeeded.js";
-const E = "ids-expander--link-v5202", b = "ids-expander--heading-v5202", j = "ids-expander--activator-v5202", y = "ids-expander--section-v5202", M = "ids-expander-v5202", O = "ids-expander--container-v5202", $ = "ids-expander--open-v5202", A = "ids-expander--container-inner-v5202", S = "ids-expander--content-v5202", n = {
-  link: E,
-  heading: b,
-  activator: j,
-  section: y,
-  expander: M,
-  container: O,
-  open: $,
-  containerInner: A,
-  content: S
-}, T = ({
-  activator: d,
-  children: p,
-  className: l,
-  "data-testid": a,
-  onChange: m,
-  id: v,
-  mode: x = "section",
-  open: o = !1,
-  ...f
+import { jsxs as P, jsx as a } from "react/jsx-runtime";
+import { useState as j, useEffect as k } from "react";
+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: e = {},
+  children: x,
+  className: N,
+  "data-testid": o,
+  onChange: u,
+  id: I,
+  mode: i = "section",
+  noGutter: h,
+  open: r = !1,
+  ...C
 }) => {
-  const [e, i] = k(o), s = _({ id: v }), N = r(
+  const [s, c] = j(r), n = w({ id: I }), t = m({ mode: i, open: s }), _ = m.raw({ mode: i, open: s });
+  k(() => {
+    c(r);
+  }, [r]);
+  const b = () => {
+    c(!s), u?.(!s);
+  }, [v, E] = S(e);
+  return /* @__PURE__ */ P(
     l,
-    n.expander,
-    n[x],
     {
-      [n.open]: e
-    }
-  ), h = r(n.container, {
-    [n.open]: e
-  });
-  g(() => {
-    i(o);
-  }, [o]);
-  const I = () => {
-    i(!e), m?.({ open: !e });
-  };
-  return /* @__PURE__ */ u(
-    "div",
-    {
-      className: N,
-      ...f,
-      "data-testid": a,
-      id: s,
+      className: p(N, t.root, T.Expander),
+      ...C,
+      "data-testid": o,
+      id: n,
       children: [
-        /* @__PURE__ */ t(
-          "button",
+        /* @__PURE__ */ a(
+          O.button,
           {
-            className: n.activator,
-            "aria-expanded": e,
-            "aria-controls": `${s}__container`,
-            onClick: I,
+            ...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",
-            "data-testid": c(a, "activator"),
-            children: d
+            children: f
           }
         ),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ a(
           "div",
           {
-            id: `${s}__container`,
-            className: h,
-            "data-testid": c(a, "container"),
-            children: /* @__PURE__ */ t("div", { className: n.containerInner, children: /* @__PURE__ */ t("div", { className: n.content, children: p }) })
+            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 }) })
           }
         )
       ]
     }
   );
 };
-T.Mode = C;
 export {
-  T as IressExpander
+  J as IressExpander
 };

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

@@ -0,0 +1,99 @@
+import { s as e } from "../../sva-OmxClA9g.js";
+const o = e({
+  slots: ["root", "activator", "content", "container", "containerInner"],
+  base: {
+    root: {
+      display: "block"
+    },
+    activator: {
+      display: "inline-block",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "auto",
+      bg: "transparent",
+      cursor: "pointer",
+      tableChevron: !0,
+      position: "relative",
+      _before: {
+        content: '""',
+        position: "absolute",
+        top: "[-1.5px]",
+        left: "[-1.5px]",
+        right: "[-1.5px]",
+        bottom: "[-1.5px]",
+        pointerEvents: "none",
+        zIndex: "[-1]",
+        borderRadius: "radius.system.badge"
+      },
+      _focusVisible: {
+        outline: "[none]",
+        _before: {
+          layerStyle: "elevation.focus"
+        }
+      }
+    },
+    container: {
+      display: "grid",
+      gridTemplateRows: "0fr",
+      transition: "[grid-template-rows 0.3s ease-in-out]"
+    },
+    containerInner: {
+      overflow: "hidden"
+    },
+    content: {
+      py: "spacing.200"
+    }
+  },
+  variants: {
+    mode: {
+      section: {
+        activator: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "flex-end",
+          width: "[100%]",
+          textStyle: "typography.heading.4",
+          py: "spacing.300",
+          borderBottom: "divider",
+          transition: "[all 0.2s ease-in-out]",
+          _after: {
+            mr: "spacing.200"
+          },
+          _hover: {
+            color: "colour.primary.text",
+            borderBottom: "hover"
+          }
+        }
+      },
+      link: {
+        activator: {
+          color: "colour.primary.text",
+          textDecoration: "underline",
+          _before: {
+            borderRadius: "radius.system.badge"
+          },
+          _hover: {
+            textDecoration: "none"
+          }
+        }
+      }
+    },
+    open: {
+      true: {
+        activator: {
+          tableChevron: !1
+        },
+        container: {
+          gridTemplateRows: "1fr"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    mode: "section",
+    open: !1
+  }
+});
+export {
+  o as expander
+};

package/dist/components/Expander/index.js

@@ -1,7 +1,6 @@
-import { EXPANDER_MODES as o, ExpanderMode as E } from "./Expander.types.js";
-import { IressExpander as x } from "./Expander.js";
+import { IressExpander as o } from "./Expander.js";
+import { expander as x } from "./Expander.styles.js";
 export {
-  o as EXPANDER_MODES,
-  E as ExpanderMode,
-  x as IressExpander
+  o as IressExpander,
+  x as expander
 };

package/dist/components/Field/Field.js

@@ -1,71 +1,103 @@
-import { jsx as e, jsxs as b } from "react/jsx-runtime";
-import { c as h } from "../../index-cbHCAGLB.js";
-import { F as j, s as o } from "../../FieldAppendToLabel-CWIO4lAR.js";
-import { useMemo as d, isValidElement as y } from "react";
-import { IressLabel as A } from "../Label/Label.js";
-import { propagateTestid as E } from "../../helpers/utility/propagateTestid.js";
-import { toArray as q } from "../../helpers/formatting/toArray.js";
-const D = ({
-  children: a,
-  className: f,
-  "data-testid": m,
-  error: t,
-  errorMessages: l,
-  hiddenLabel: i,
-  hint: s,
-  htmlFor: n,
-  label: r,
-  optional: c,
-  required: u,
-  readOnly: F,
-  ...v
+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 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": t,
+  error: f,
+  errorMessages: d,
+  hiddenLabel: m,
+  hint: o,
+  horizontal: l,
+  label: v,
+  labelWidth: n,
+  required: b,
+  readOnly: x,
+  removeErrorMargin: H = !1,
+  supplementary: P,
+  ...c
 }) => {
-  const x = d(
-    () => !!t || l?.length,
-    [t, l?.length]
-  ), N = d(
-    () => !s && !t && !l?.length ? null : /* @__PURE__ */ e(
-      j,
+  const { htmlFor: F } = c;
+  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, g] = A(c), j = () => {
+    const C = /* @__PURE__ */ u(
+      q,
       {
-        hint: s,
-        error: t,
-        errorMessages: l,
-        hiddenLabel: i,
-        "data-parent-testid": m
+        className: e(r.label),
+        "data-testid": y(t, "label"),
+        hiddenLabel: m,
+        htmlFor: a,
+        required: x ? !1 : !!b,
+        children: [
+          v,
+          l && o && /* @__PURE__ */ s(h, { hint: o })
+        ]
       }
-    ),
-    [m, t, l, i, s]
-  );
-  let p = n;
-  return p === void 0 && y(a) && (p = q(a)[0].props.id), /* @__PURE__ */ b(
-    "div",
+    );
+    return o ? /* @__PURE__ */ s(
+      k,
+      {
+        hint: o,
+        horizontal: l,
+        hiddenLabel: m,
+        dataTestId: t,
+        children: C
+      }
+    ) : C;
+  };
+  return /* @__PURE__ */ u(
+    p.div,
     {
-      className: h(f, {
-        [o.field]: !0,
-        [o.invalid]: x,
-        [o.hiddenLabel]: i === !0
-      }),
-      "data-testid": m,
-      ...v,
+      className: V(
+        N,
+        e(r.root, S),
+        B.Field
+      ),
+      style: {
+        ...l && n && {
+          gridTemplateColumns: `${n} 1fr`
+        }
+      },
+      "data-testid": t,
+      ...g,
       children: [
-        /* @__PURE__ */ e(
-          A,
+        /* @__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(
+          $,
           {
-            append: N,
-            className: o.label,
-            "data-testid": E(m, "label"),
-            hiddenLabel: i,
-            htmlFor: p,
-            optional: c,
-            required: F ? !1 : !!u,
-            children: r
+            className: e(r.footer),
+            "data-testid": y(t, "error"),
+            error: f,
+            errorMessages: d,
+            supplementary: P
           }
-        ),
-        a
+        )
       ]
     }
   );
 };
 export {
-  D as IressField
+  M as IressField
 };