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

package/dist/components/Filter/components/FilterResultsDescriptor.js

@@ -1,17 +1,17 @@
-import { jsx as l } from "react/jsx-runtime";
+import { jsx as c } from "react/jsx-runtime";
 import { useMemo as p } from "react";
-import { GlobalCSSClass as c } from "../../../enums.js";
-import { composeLabelValueDescriptor as n } from "../../../helpers/label-value/composeLabelValueDescriptor.js";
+import { composeLabelValueDescriptor as s } from "../../../helpers/label-value/composeLabelValueDescriptor.js";
+import { c as l } from "../../../css-fGu_jDvv.js";
 const D = ({
   loading: t,
   noResultsText: o = "No results",
   results: r = [],
   show: e,
   value: i,
-  ...m
+  ...n
 }) => {
-  const s = p(() => t ? "loading" : e && !r.length ? o : e && r.length ? n(r, "{{numOptions}} results") : n(i) || "None selected", [t, o, r, e, i]);
-  return /* @__PURE__ */ l("div", { ...m, className: c.SROnly, children: s });
+  const m = p(() => t ? "loading" : e && !r.length ? o : e && r.length ? s(r, "{{numOptions}} results") : s(i) || "None selected", [t, o, r, e, i]);
+  return /* @__PURE__ */ c("div", { ...n, className: l({ srOnly: !0 }), children: m });
 };
 export {
   D as FilterResultsDescriptor

package/dist/components/Filter/components/FilterSearch.js

@@ -1,33 +1,32 @@
-import { jsx as n } from "react/jsx-runtime";
-import { filter as o } from "../Filter.styles.js";
-import { usePopoverItem as f } from "../../Popover/hooks/usePopoverItem.js";
-import { forwardRef as l, useRef as u, useImperativeHandle as h } from "react";
-import { c as p } from "../../../cx-DN21T1EH.js";
-import { IressInput as d } from "../../Input/Input.js";
+import { jsx as c } from "react/jsx-runtime";
+import { filter as p } from "../Filter.styles.js";
+import { usePopoverItem as a } from "../../Popover/hooks/usePopoverItem.js";
+import { forwardRef as i, useRef as n, useImperativeHandle as f } from "react";
+import { c as l } from "../../../cx-DN21T1EH.js";
+import { IressInput as u } from "../../Input/Input.js";
 import "../../Input/Input.styles.js";
-const x = l(
-  (t, a) => {
-    const r = u(null), { isActiveInPopover: y, ...e } = f();
-    h(a, () => r.current);
-    const i = o();
-    return /* @__PURE__ */ n(
-      d,
+const I = i(
+  (r, o) => {
+    const e = n(null), { isActiveInPopover: h, ...t } = a();
+    f(o, () => e.current);
+    const s = p();
+    return /* @__PURE__ */ c(
+      u,
       {
+        ...r,
         ...t,
-        ...e,
         autoCorrect: "off",
-        className: p(i.searchInput, t.className),
+        className: l(s.searchInput, r.className),
         style: { width: "100%" },
         ref: (m) => {
-          var s, c;
-          r.current = m, (c = e == null ? void 0 : e.ref) == null || c.call(e, ((s = r.current) == null ? void 0 : s.input) ?? null);
+          e.current = m, t?.ref?.(e.current?.input ?? null);
         },
         type: "search"
       }
     );
   }
 );
-x.displayName = "FilterSearch";
+I.displayName = "FilterSearch";
 export {
-  x as FilterSearch
+  I as FilterSearch
 };

package/dist/components/Filter/index.js

@@ -1,4 +1,4 @@
-import { a as s } from "../../Filter-Bwk7SIlJ.js";
+import { IressFilter as o } from "./Filter.js";
 export {
-  s as IressFilter
+  o as IressFilter
 };

package/dist/components/Hide/Hide.js

@@ -1,6 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
 import { normaliseHideValues as m } from "./helpers/normaliseHideValues.js";
-import { s as d } from "../../factory-DHLOr79I.js";
+import { s as d } from "../../factory-oPXoMw9H.js";
 const n = d("div"), f = ({
   children: s,
   hiddenOn: e,

package/dist/components/Icon/Icon.js

@@ -1,5 +1,5 @@
 import { jsx as p } from "react/jsx-runtime";
-import { s as n } from "../../factory-DHLOr79I.js";
+import { s as n } from "../../factory-oPXoMw9H.js";
 import { c as e } from "../../cx-DN21T1EH.js";
 import { icon as x } from "./Icon.styles.js";
 import { GlobalCSSClass as I } from "../../enums.js";

package/dist/components/Icon/Icon.styles.js

@@ -1,4 +1,4 @@
-import { a } from "../../cva-B2x59Dph.js";
+import { c as a } from "../../cva-JiDXAa83.js";
 const n = a({
   variants: {
     flip: {

package/dist/components/Image/Image.js

@@ -2,7 +2,7 @@ import { jsx as e } from "react/jsx-runtime";
 import { GlobalCSSClass as a } from "../../enums.js";
 import { image as i } from "./Image.styles.js";
 import { c as l } from "../../cx-DN21T1EH.js";
-import { s as c } from "../../factory-DHLOr79I.js";
+import { s as c } from "../../factory-oPXoMw9H.js";
 const n = c("img", i), y = ({
   className: m,
   maxWidth: s = "100%",

package/dist/components/Image/Image.styles.js

@@ -1,4 +1,4 @@
-import { a } from "../../cva-B2x59Dph.js";
+import { c as a } from "../../cva-JiDXAa83.js";
 const i = a({
   base: {
     display: "block",

package/dist/components/Inline/Inline.js

@@ -1,6 +1,6 @@
 import { jsx as m } from "react/jsx-runtime";
 import { inline as r } from "./Inline.styles.js";
-import { s as i } from "../../factory-DHLOr79I.js";
+import { s as i } from "../../factory-oPXoMw9H.js";
 import { GlobalCSSClass as n } from "../../enums.js";
 import { c as t } from "../../cx-DN21T1EH.js";
 const e = i("div", r), x = ({ className: o, ...s }) => /* @__PURE__ */ m(e, { ...s, className: t(o, n.Inline) });

package/dist/components/Inline/Inline.styles.js

@@ -1,9 +1,9 @@
-import { a as e } from "../../cva-B2x59Dph.js";
+import { c as e } from "../../cva-JiDXAa83.js";
 const n = e({
   base: {
     display: "flex",
     flexDirection: "row",
-    gap: "spacing.000"
+    gap: "spacing.0"
   },
   variants: {
     horizontalAlign: {

package/dist/components/Input/Input.js

@@ -1,150 +1,144 @@
-import { jsx as n, jsxs as M } from "react/jsx-runtime";
-import { forwardRef as U, useRef as D, useState as z, useMemo as R, useImperativeHandle as J } from "react";
-import { GlobalCSSClass as g } from "../../enums.js";
-import { getFormControlValueAsString as K } from "../../helpers/form/getFormControlValueAsString.js";
-import { InputBase as L } from "./InputBase/InputBase.js";
-import { IressSpinner as Q } from "../Spinner/Spinner.js";
+import { jsx as r, jsxs as F } from "react/jsx-runtime";
+import { forwardRef as A, useRef as N, useState as G, useImperativeHandle as H } from "react";
+import { GlobalCSSClass as d } from "../../enums.js";
+import { getFormControlValueAsString as U } from "../../helpers/form/getFormControlValueAsString.js";
+import { InputBase as z } from "./InputBase/InputBase.js";
+import { IressSpinner as J } from "../Spinner/Spinner.js";
 import "../Spinner/Spinner.styles.js";
-import { useControlledState as W } from "../../hooks/useControlledState.js";
-import { IressReadonly as X } from "../Readonly/Readonly.js";
+import { useControlledState as K } from "../../hooks/useControlledState.js";
+import { IressReadonly as L } from "../Readonly/Readonly.js";
 import "../Readonly/Readonly.styles.js";
-import { c } from "../../cx-DN21T1EH.js";
-import { input as Y } from "./Input.styles.js";
-import { s as Z } from "../../factory-DHLOr79I.js";
-import { s as _ } from "../../is-valid-prop-DFFvE05x.js";
-import { useNoDefaultValueInForms as $ } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
-import "../../Button-BXzmntRi.js";
-import { IressCloseButton as P } from "../Button/CloseButton/CloseButton.js";
-const ee = ({ rows: s, ...h }, B) => {
+import { c as s } from "../../cx-DN21T1EH.js";
+import { input as Q } from "./Input.styles.js";
+import { s as W } from "../../factory-oPXoMw9H.js";
+import { s as X } from "../../is-valid-prop-Ce0wiweq.js";
+import { useNoDefaultValueInForms as Y } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
+import "../../Button-mmhMLwp9.js";
+import { IressCloseButton as Z } from "../Button/CloseButton/CloseButton.js";
+const _ = ({ rows: a, ...f }, S) => {
   const {
-    loading: i = !1,
-    clearable: E = !1,
-    defaultValue: C,
-    onClear: m,
-    width: T,
-    prepend: y,
-    append: d,
-    onChange: f,
-    className: x,
-    readOnly: j,
-    formatter: o,
-    type: V,
-    inline: O,
-    alignRight: b,
-    ...e
-  } = h;
-  $({
+    loading: l = !1,
+    clearable: P = !1,
+    defaultValue: v,
+    onClear: D,
+    width: M,
+    prepend: g,
+    append: u,
+    onChange: R,
+    className: C,
+    readOnly: B,
+    formatter: i,
+    type: E,
+    inline: T,
+    alignRight: I,
+    ...t
+  } = f;
+  Y({
     component: "IressInput",
-    defaultValue: C
+    defaultValue: v
   });
-  const p = D(null), v = D(null), { value: l, setValue: F } = W({
+  const c = N(null), p = N(null), { value: m, setValue: h } = K({
     component: "IressInput",
-    defaultValue: C,
-    value: h.value
-  }), I = K(l), [u, N] = z(!1), [k, q] = _(e), S = R(() => o && !u ? o(l) : I, [o, l, I, u]), A = R(() => {
-    if (s === void 0)
-      return o && !u ? { type: "text" } : { type: V };
-  }, [o, u, V, s]);
-  if (J(
-    B,
+    defaultValue: v,
+    value: f.value
+  }), y = U(m), [x, V] = G(!1), [j, O] = X(t), b = i && !x ? i(m) : y;
+  let w = i && !x ? { type: "text" } : { type: E };
+  if (a !== void 0 && (w = void 0), H(
+    S,
     () => ({
-      ...p.current,
+      ...c.current,
       extras: {
         additionalOnChangeProps: ["onClear"]
       }
     })
-  ), j)
-    return /* @__PURE__ */ n(
-      X,
+  ), B)
+    return /* @__PURE__ */ r(
+      L,
       {
-        ...e,
+        ...t,
         defaultValue: void 0,
-        value: l,
-        alignRight: b,
-        append: d,
-        className: x,
-        children: S
+        value: m,
+        alignRight: I,
+        append: u,
+        className: C,
+        children: b
       }
     );
-  const G = (r) => {
-    var w;
-    F(""), (w = p.current) == null || w.focus();
-    const t = new Event("change", {
+  const k = (e) => {
+    h(""), c.current?.focus();
+    const o = new Event("change", {
       bubbles: !0
     });
-    Object.defineProperty(t, "target", {
+    Object.defineProperty(o, "target", {
       writable: !1,
-      value: { value: "", ...r.target }
-    }), m == null || m(t);
-  }, H = (r) => {
-    const t = r.target.value;
-    F(t), f == null || f(r, t);
-  }, a = Y({
-    alignRight: b,
-    inline: O,
-    isTextarea: s !== void 0,
-    width: T
+      value: { value: "", ...e.target }
+    }), D?.(o);
+  }, q = (e) => {
+    const o = e.target.value;
+    h(o), R?.(e, o);
+  }, n = Q({
+    alignRight: I,
+    inline: T,
+    isTextarea: a !== void 0,
+    width: M
   });
-  return /* @__PURE__ */ M(
-    Z.div,
+  return /* @__PURE__ */ F(
+    W.div,
     {
-      className: c(
+      className: s(
         // classes.root,
-        g.FormElement,
-        g.Input,
-        x,
-        a.wrapper,
-        g.FormElementInner
+        d.FormElement,
+        d.Input,
+        C,
+        n.wrapper,
+        d.FormElementInner
       ),
-      "data-testid": e["data-testid"],
-      ...k,
+      "data-testid": t["data-testid"],
+      ...j,
       children: [
-        y && /* @__PURE__ */ n("div", { className: c(a.addon), children: y }),
-        /* @__PURE__ */ n(
-          L,
+        g && /* @__PURE__ */ r("div", { className: s(n.addon), children: g }),
+        /* @__PURE__ */ r(
+          z,
           {
-            ...q,
-            ...A,
-            className: a.formControl,
-            value: S,
-            onChange: H,
-            onFocus: (r) => {
-              var t;
-              N(!0), (t = e == null ? void 0 : e.onFocus) == null || t.call(e, r), v.current ? v.current = null : queueMicrotask(() => r.target.select());
+            ...O,
+            ...w,
+            className: n.formControl,
+            value: b,
+            onChange: q,
+            onFocus: (e) => {
+              V(!0), t?.onFocus?.(e), p.current ? p.current = null : queueMicrotask(() => e.target.select());
             },
-            onMouseDown: (r) => {
-              var t;
-              (t = e == null ? void 0 : e.onMouseDown) == null || t.call(e, r), v.current = !0;
+            onMouseDown: (e) => {
+              t?.onMouseDown?.(e), p.current = !0;
             },
-            onBlur: (r) => {
-              var t;
-              N(!1), (t = e == null ? void 0 : e.onBlur) == null || t.call(e, r);
+            onBlur: (e) => {
+              V(!1), t?.onBlur?.(e);
             },
-            rows: s,
-            ref: p
+            rows: a,
+            ref: c
           }
         ),
-        /* @__PURE__ */ M("div", { className: c(a.internal), children: [
-          i && /* @__PURE__ */ n(
-            Q,
+        /* @__PURE__ */ F("div", { className: s(n.internal), children: [
+          l && /* @__PURE__ */ r(
+            J,
             {
-              screenreaderText: i === !0 ? "loading" : i
+              screenreaderText: l === !0 ? "loading" : l
             }
           ),
-          I && E && /* @__PURE__ */ n(
-            P,
+          y && P && /* @__PURE__ */ r(
+            Z,
             {
-              onClick: G,
-              onMouseDown: (r) => r.preventDefault(),
+              onClick: k,
+              onMouseDown: (e) => e.preventDefault(),
               screenreaderText: "Clear"
             }
           )
         ] }),
-        d && /* @__PURE__ */ n("div", { className: c(a.addon), children: d })
+        u && /* @__PURE__ */ r("div", { className: s(n.addon), children: u })
       ]
     }
   );
-}, he = U(ee);
+}, ge = A(_);
 export {
-  he as IressInput
+  ge as IressInput
 };

package/dist/components/Input/Input.styles.js

@@ -1,4 +1,4 @@
-import { s as r } from "../../sva-TRyehFkb.js";
+import { s as r } from "../../sva-OmxClA9g.js";
 const o = r({
   slots: ["root", "wrapper", "inline", "addon", "internal", "formControl"],
   base: {
@@ -27,7 +27,7 @@ const o = r({
       alignItems: "center",
       py: "none",
       "&:not(:empty)": {
-        px: "spacing.250"
+        px: "spacing.3"
       },
       _empty: {
         display: "none"
@@ -40,7 +40,7 @@ const o = r({
       display: "flex",
       alignItems: "center",
       "& > *": {
-        padding: "[0 {spacing.spacing.250}]"
+        padding: "[0 {spacing.spacing.3}]"
       },
       _empty: {
         display: "none"
@@ -49,7 +49,7 @@ const o = r({
     formControl: {
       borderWidth: 0,
       borderRadius: "radius.system.form",
-      padding: "spacing.200",
+      padding: "spacing.2",
       backgroundColor: "colour.neutral.10",
       textStyle: "typography.body.md",
       color: "colour.neutral.80",
@@ -69,10 +69,10 @@ const o = r({
         backgroundColor: "colour.primary.surface",
         color: "colour.primary.text",
         borderRadius: "radius.system.form",
-        py: "spacing.150",
-        px: "spacing.200",
-        m: "-spacing.100",
-        mr: "spacing.200",
+        py: "spacing.2",
+        px: "spacing.2",
+        m: "-spacing.1",
+        mr: "spacing.2",
         cursor: "pointer",
         _hover: {
           backgroundColor: "colour.primary.surfaceHover"

package/dist/components/Input/InputBase/InputBase.js

@@ -1,36 +1,36 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as d, useRef as f, useImperativeHandle as x } from "react";
-import { s as i } from "../../../factory-DHLOr79I.js";
-const l = ({ "data-testid": r, rows: e, ...n }, c) => {
-  const o = e !== void 0, u = f(null), a = f(null);
-  if (x(c, () => {
-    const t = o ? a.current : u.current;
+import { jsx as p } from "react/jsx-runtime";
+import { forwardRef as l, useRef as s, useImperativeHandle as d } from "react";
+import { s as f } from "../../../factory-oPXoMw9H.js";
+const m = ({ "data-testid": t, rows: e, ...u }, i) => {
+  const a = e !== void 0, r = s(null), n = s(null);
+  if (d(i, () => {
+    const c = a ? n.current : r.current;
     return {
-      focus: () => t == null ? void 0 : t.focus(),
-      blur: () => t == null ? void 0 : t.blur(),
-      input: o ? a.current : u.current
+      focus: () => c?.focus(),
+      blur: () => c?.blur(),
+      input: a ? n.current : r.current
     };
   }), e !== void 0)
-    return /* @__PURE__ */ s(
-      i.textarea,
+    return /* @__PURE__ */ p(
+      f.textarea,
       {
         rows: e,
-        ...r && { "data-testid": `${r}__textarea` },
-        ...n,
-        ref: a
+        ...t && { "data-testid": `${t}__textarea` },
+        ...u,
+        ref: n
       }
     );
-  const p = n;
-  return /* @__PURE__ */ s(
-    i.input,
+  const o = u;
+  return /* @__PURE__ */ p(
+    f.input,
     {
-      ...r && { "data-testid": `${r}__input` },
-      ...p,
-      type: p.type ?? "text",
-      ref: u
+      ...t && { "data-testid": `${t}__input` },
+      ...o,
+      type: o.type ?? "text",
+      ref: r
     }
   );
-}, v = d(l);
+}, v = l(m);
 export {
   v as InputBase
 };

package/dist/components/Label/Label.styles.js

@@ -1,4 +1,4 @@
-import { s as t } from "../../sva-TRyehFkb.js";
+import { s as t } from "../../sva-OmxClA9g.js";
 const e = t({
   slots: ["root", "required", "text"],
   base: {
@@ -10,8 +10,8 @@ const e = t({
       display: "inline-block",
       position: "relative",
       textStyle: "typography.body.sm.strong",
-      top: "-spacing.100",
-      mr: "spacing.100"
+      top: "-spacing.1",
+      mr: "spacing.1"
     },
     text: {
       textStyle: "typography.body.md.strong"
@@ -23,7 +23,7 @@ const e = t({
       hiddenLabel: !0,
       css: {
         root: {
-          mb: "spacing.000"
+          mb: "spacing.0"
         }
       }
     }

package/dist/components/Label/LabelBase/LabelBase.js

@@ -1,50 +1,50 @@
-import { jsxs as l, jsx as o, Fragment as b } from "react/jsx-runtime";
+import { jsxs as l, jsx as a, Fragment as b } from "react/jsx-runtime";
 import { GlobalCSSClass as g } from "../../../enums.js";
 import { propagateTestid as y } from "../../../helpers/utility/propagateTestid.js";
 import { useState as C, useMemo as S } from "react";
-import { s as e } from "../../../factory-DHLOr79I.js";
+import { s as r } from "../../../factory-oPXoMw9H.js";
 import { label as j } from "../Label.styles.js";
 import { c as q } from "../../../cx-DN21T1EH.js";
 const R = ({
-  append: m,
-  children: p,
-  className: d,
-  "data-testid": i,
-  element: c,
-  hiddenLabel: s = !1,
-  required: f,
-  ...u
+  append: o,
+  children: c,
+  className: p,
+  "data-testid": m,
+  element: n,
+  hiddenLabel: t = !1,
+  required: d,
+  ...f
 }) => {
-  const [n, x] = C(), a = j({ hasAppend: !!m, hiddenLabel: s }), N = (t) => {
-    const r = t == null ? void 0 : t.textContent;
-    r && r !== n && x(r);
-  }, h = S(
-    () => e(c ?? "label"),
-    [c]
+  const [i, u] = C(), e = j({ hasAppend: !!o, hiddenLabel: t }), x = (h) => {
+    const s = h?.textContent;
+    s && s !== i && u(s);
+  }, N = S(
+    () => r(n ?? "label"),
+    [n]
   );
   return /* @__PURE__ */ l(
-    h,
+    N,
     {
-      className: q(d, g.FormLabel, a.root),
-      "data-testid": i,
-      ...u,
-      "data-name": n,
+      className: q(p, g.FormLabel, e.root),
+      "data-testid": m,
+      ...f,
+      "data-name": i,
       children: [
-        f && /* @__PURE__ */ l(b, { children: [
-          !s && /* @__PURE__ */ o("span", { className: a.required, "aria-hidden": !0, children: "*" }),
-          /* @__PURE__ */ o(e.span, { srOnly: !0, children: "Required" })
+        d && /* @__PURE__ */ l(b, { children: [
+          !t && /* @__PURE__ */ a("span", { className: e.required, "aria-hidden": !0, children: "*" }),
+          /* @__PURE__ */ a(r.span, { srOnly: !0, children: "Required" })
         ] }),
-        /* @__PURE__ */ o(
-          e.span,
+        /* @__PURE__ */ a(
+          r.span,
           {
-            className: a.text,
-            "data-testid": y(i, "text"),
-            ref: N,
-            srOnly: s,
-            children: p
+            className: e.text,
+            "data-testid": y(m, "text"),
+            ref: x,
+            srOnly: t,
+            children: c
           }
         ),
-        m
+        o
       ]
     }
   );