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

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

@@ -0,0 +1,82 @@
+import { s as r } from "../../sva-TRyehFkb.js";
+const e = r({
+  slots: ["root", "indeterminateMark", "checkedMark"],
+  base: {
+    root: {
+      display: "inline-flex",
+      position: "relative",
+      width: "[calc(1.5 * {sizes.typography.base})]",
+      minWidth: "[calc(1.5 * {sizes.typography.base})]",
+      height: "[calc(1.5 * {sizes.typography.base})]",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: "colour.neutral.70",
+      borderRadius: "radius.025",
+      bg: "colour.neutral.10",
+      transitionProperty: "all",
+      transitionDuration: "0.2s",
+      transitionTimingFunction: "ease-out",
+      color: "colour.primary.fill",
+      _hover: {
+        bg: "colour.primary.surfaceHover"
+      }
+    },
+    indeterminateMark: {
+      stroke: "colour.primary.onFill",
+      fill: "[transparent]",
+      strokeWidth: 22,
+      display: "none"
+    },
+    checkedMark: {
+      stroke: "colour.neutral.10",
+      fill: "[transparent]",
+      strokeWidth: 22,
+      display: "none"
+    }
+  },
+  variants: {
+    indeterminate: {
+      true: {
+        root: {
+          bg: "[currentColor]",
+          borderColor: "[currentColor]",
+          _hover: {
+            borderColor: "colour.primary.fillHover",
+            bg: "colour.primary.fillHover",
+            stroke: "colour.primary.onFill"
+          }
+        },
+        indeterminateMark: {
+          display: "revert"
+        }
+      }
+    },
+    checked: {
+      true: {
+        root: {
+          bg: "[currentColor]",
+          borderColor: "[currentColor]",
+          _hover: {
+            borderColor: "colour.primary.fillHover",
+            bg: "colour.primary.fillHover",
+            stroke: "colour.primary.onFill"
+          }
+        },
+        checkedMark: {
+          display: "revert"
+        }
+      }
+    },
+    size: {
+      sm: {
+        root: {
+          width: "[calc(1.25 * {sizes.typography.base})]",
+          height: "[calc(1.25 * {sizes.typography.base})]"
+        }
+      }
+    }
+  }
+});
+export {
+  e as checkboxMark
+};

package/dist/components/CheckboxMark/index.js

@@ -1,6 +1,6 @@
-import { IressCheckboxStyles as o } from "./CheckboxMark.types.js";
-import { IressCheckboxMark as x } from "./CheckboxMark.js";
+import { IressCheckboxMark as e } from "./CheckboxMark.js";
+import { checkboxMark as x } from "./CheckboxMark.styles.js";
 export {
-  x as IressCheckboxMark,
-  o as IressCheckboxStyles
+  e as IressCheckboxMark,
+  x as checkboxMark
 };

package/dist/components/Col/Col.js

@@ -1,33 +1,9 @@
 import { jsx as m } from "react/jsx-runtime";
-import { c as p } from "../../index-2QXL0WYc.js";
-import { ColCssClass as s, ColAlignSelf as n, ColOffset as C, ColSpan as S } from "./Col.types.js";
-import { getResponsiveLayoutModifiers as f } from "../../helpers/responsive/getResponsiveLayoutModifiers.js";
-const o = ({
-  alignSelf: e,
-  children: l,
-  className: t,
-  offset: a,
-  span: r = "auto",
-  ...i
-}) => /* @__PURE__ */ m(
-  "div",
-  {
-    className: p(
-      t,
-      s.Base,
-      f(s.Span, r, "12"),
-      f(s.Offset, a),
-      {
-        [`${s.AlignSelf}--${e}`]: !!e
-      }
-    ),
-    ...i,
-    children: l
-  }
-);
-o.AlignSelf = n;
-o.Offset = C;
-o.Span = S;
+import { s as r } from "../../factory-DHLOr79I.js";
+import { col as t } from "./Col.styles.js";
+import { c as l } from "../../cx-DN21T1EH.js";
+import { GlobalCSSClass as p } from "../../enums.js";
+const a = r("div", t), n = ({ className: o, ...s }) => /* @__PURE__ */ m(a, { ...s, className: l(o, p.Col) });
 export {
-  o as IressCol
+  n as IressCol
 };

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

@@ -0,0 +1,28 @@
+import { a } from "../../cva-B2x59Dph.js";
+const t = a({
+  base: {
+    display: "block",
+    boxSizing: "border-box",
+    span: "auto"
+  },
+  variants: {
+    alignSelf: {
+      start: {
+        alignSelf: "start"
+      },
+      end: {
+        alignSelf: "end"
+      },
+      center: {
+        alignSelf: "center"
+      },
+      stretch: {
+        alignSelf: "stretch"
+      }
+    }
+  },
+  defaultVariants: {}
+});
+export {
+  t as col
+};

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-2QXL0WYc.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-DHLOr79I.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,45 @@
+import { a } from "../../cva-B2x59Dph.js";
+const n = a({
+  base: {
+    borderRadius: "radius.system.layout",
+    paddingBlock: void 0,
+    paddingInline: "spacing.400",
+    marginInline: "auto"
+  },
+  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-2QXL0WYc.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 "../../cva-B2x59Dph.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 { 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 { a as r } from "../../cva-B2x59Dph.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,66 @@
-import { jsxs as k, jsx as t } from "react/jsx-runtime";
-import { c } from "../../index-2QXL0WYc.js";
-import { useState as h, useEffect as _ } from "react";
-import { propagateTestid as d } from "../../helpers/utility/propagateTestid.js";
-import { ExpanderMode as E } from "./Expander.types.js";
-import { useIdIfNeeded as b } from "../../hooks/useIdIfNeeded.js";
-const j = "ids-expander--link-v5170", y = "ids-expander--heading-v5170", M = "ids-expander--activator-v5170", O = "ids-expander--section-v5170", $ = "ids-expander-v5170", A = "ids-expander--container-v5170", S = "ids-expander--open-v5170", T = "ids-expander--container-inner-v5170", g = "ids-expander--content-v5170", e = {
-  link: j,
-  heading: y,
-  activator: M,
-  section: O,
-  expander: $,
-  container: A,
-  open: S,
-  containerInner: T,
-  content: g
-}, q = ({
-  activator: p,
+import { jsxs as E, jsx as d } 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 = ({
+  activator: f,
+  activatorStyle: s,
   children: l,
-  className: m,
-  "data-testid": a,
-  onChange: s,
-  id: v,
-  mode: x = "section",
-  open: i = !1,
-  ...f
+  className: x,
+  "data-testid": o,
+  onChange: i,
+  id: N,
+  mode: u = "section",
+  noGutter: I,
+  open: n = !1,
+  ..._
 }) => {
-  const [n, r] = h(i), o = b({ id: v }), N = c(
-    m,
-    e.expander,
-    e[x],
-    {
-      [e.open]: n
-    }
-  ), I = c(e.container, {
-    [e.open]: n
-  });
-  _(() => {
-    r(i);
-  }, [i]);
-  const u = () => {
-    r(!n), s == null || s({ open: !n });
+  const [r, t] = j(n), a = O({ id: N }), e = T({ mode: u, open: r });
+  k(() => {
+    t(n);
+  }, [n]);
+  const b = () => {
+    t(!r), i == null || i(!r);
   };
-  return /* @__PURE__ */ k(
-    "div",
+  return /* @__PURE__ */ E(
+    p,
     {
-      className: N,
-      ...f,
-      "data-testid": a,
-      id: o,
+      className: c(x, e.root, h.Expander),
+      ..._,
+      "data-testid": o,
+      id: a,
       children: [
-        /* @__PURE__ */ t(
-          "button",
+        /* @__PURE__ */ d(
+          $.button,
           {
-            className: e.activator,
-            "aria-expanded": n,
-            "aria-controls": `${o}__container`,
-            onClick: u,
+            ...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"),
+            onClick: b,
             type: "button",
-            "data-testid": d(a, "activator"),
-            children: p
+            children: f
           }
         ),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ d(
           "div",
           {
-            id: `${o}__container`,
-            className: I,
-            "data-testid": d(a, "container"),
-            children: /* @__PURE__ */ t("div", { className: e.containerInner, children: /* @__PURE__ */ t("div", { className: e.content, children: l }) })
+            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 }) })
           }
         )
       ]
     }
   );
 };
-q.Mode = E;
 export {
-  q as IressExpander
+  H as IressExpander
 };

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

@@ -0,0 +1,99 @@
+import { s as e } from "../../sva-TRyehFkb.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",
+      backgroundColor: "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
 };