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

package/dist/components/Filter/Filter.js

@@ -7,10 +7,10 @@ import { IressPopover as ae } from "../Popover/Popover.js";
 import "../Popover/Popover.styles.js";
 import "../Popover/InputPopover/InputPopover.js";
 import "../Popover/hooks/usePopover.js";
-import { I as ne } from "../../Button-D6AL0bia.js";
+import { I as ne } from "../../Button-mmhMLwp9.js";
 import "../Button/CloseButton/CloseButton.js";
 import { useRichSelectState as me } from "../RichSelect/hooks/useRichSelectState.js";
-import "../../Autocomplete-CLvWVHp6.js";
+import "../../Autocomplete-C5ubHBTi.js";
 import "../RichSelect/SelectBody/SelectBody.styles.js";
 import { GlobalCSSClass as pe } from "../../enums.js";
 import { useIdIfNeeded as le } from "../../hooks/useIdIfNeeded.js";
@@ -163,7 +163,7 @@ const I = {
             children: [
               E,
               p.showHeader && /* @__PURE__ */ n(T, { children: [
-                /* @__PURE__ */ n(fe, { bg: "transparent", p: "spacing.200", children: [
+                /* @__PURE__ */ n(fe, { bg: "transparent", p: "spacing.2", children: [
                   S && /* @__PURE__ */ e(
                     ve,
                     {

package/dist/components/Filter/Filter.styles.js

@@ -16,7 +16,7 @@ const e = t({
     root: {},
     chevron: {
       selectChevron: !0,
-      marginInlineStart: "spacing.200",
+      marginInlineStart: "spacing.2",
       _rtl: {
         selectChevronRtl: !0
       }
@@ -25,11 +25,11 @@ const e = t({
       minWidth: "[270px]",
       position: "relative",
       "&:not(:last-child)": {
-        marginBottom: "spacing.400"
+        marginBottom: "spacing.4"
       },
       "& .ids-spinner": {
         position: "absolute",
-        right: "spacing.500"
+        right: "spacing.5"
       }
     },
     optionList: {

package/dist/components/Filter/components/FilterResetButton.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { I as i } from "../../../Button-D6AL0bia.js";
+import { I as i } from "../../../Button-mmhMLwp9.js";
 import "../../Button/CloseButton/CloseButton.js";
 import { filter as p } from "../Filter.styles.js";
 import { usePopoverItem as f } from "../../Popover/hooks/usePopoverItem.js";

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

@@ -3,7 +3,7 @@ const n = e({
   base: {
     display: "flex",
     flexDirection: "row",
-    gap: "spacing.000"
+    gap: "spacing.0"
   },
   variants: {
     horizontalAlign: {

package/dist/components/Input/Input.js

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

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

@@ -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/Label/Label.styles.js

@@ -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/Link/Link.styles.js

@@ -18,9 +18,9 @@ const e = ["root", "content", "prepend", "append", "spinner"], n = o({
       cursor: "pointer",
       display: "inline-flex",
       fontKerning: "none",
-      gap: "spacing.100",
+      gap: "spacing.1",
       pointerEvents: "auto",
-      textStyle: "typography.body.md",
+      textStyle: "typography.body.md.medium",
       whiteSpace: "normal",
       width: "auto",
       color: "colour.primary.text",

package/dist/components/Menu/Menu.js

@@ -2,7 +2,7 @@ import { jsx as p } from "react/jsx-runtime";
 import { createContext as w, useContext as z, useMemo as s, useCallback as E, useEffect as G } from "react";
 import { useControlledState as H } from "../../hooks/useControlledState.js";
 import { useIdIfNeeded as K } from "../../hooks/useIdIfNeeded.js";
-import { C as R } from "../../floating-ui.react-CmSaAiNF.js";
+import { C as R } from "../../floating-ui.react-BetVZ099.js";
 import { s as v } from "../../factory-oPXoMw9H.js";
 import { toArray as q } from "../../helpers/formatting/toArray.js";
 import { menu as B } from "./Menu.styles.js";

package/dist/components/Menu/Menu.styles.js

@@ -77,8 +77,8 @@ const o = e({
     insidePopover: {
       true: {
         root: {
-          my: "spacing.200",
-          px: "spacing.200"
+          my: "spacing.2",
+          px: "spacing.2"
         }
       }
     },
@@ -96,13 +96,13 @@ const o = e({
           display: "inline-flex",
           flexWrap: "wrap",
           flexDirection: "column",
-          rowGap: "spacing.100"
+          rowGap: "spacing.1"
         }
       },
       inline: {
         root: {
           display: "inline-flex",
-          columnGap: "spacing.100",
+          columnGap: "spacing.1",
           flexWrap: "wrap"
         },
         item: {
@@ -115,7 +115,7 @@ const o = e({
         root: {
           display: "flex",
           flexDirection: "row",
-          columnGap: "spacing.100",
+          columnGap: "spacing.1",
           "& > :not(hr)": {
             flex: "1",
             textAlign: "center"
@@ -173,9 +173,9 @@ const o = e({
           _after: {
             content: '""',
             position: "absolute",
-            top: "spacing.000",
-            left: "spacing.000",
-            bottom: "spacing.000",
+            top: "spacing.0",
+            left: "spacing.0",
+            bottom: "spacing.0",
             width: "[{radii.radius.025}]",
             bg: "colour.primary.fill",
             borderRadius: "radius.system.badge"
@@ -192,9 +192,9 @@ const o = e({
           _after: {
             content: '""',
             position: "absolute",
-            left: "spacing.000",
-            right: "spacing.000",
-            bottom: "spacing.000",
+            left: "spacing.0",
+            right: "spacing.0",
+            bottom: "spacing.0",
             height: "[{radii.radius.025}]",
             bg: "colour.primary.fill",
             borderRadius: "radius.system.badge"

package/dist/components/Menu/MenuItem/MenuItem.js

@@ -14,7 +14,7 @@ import "../../Popover/Popover.js";
 import "../../Popover/Popover.styles.js";
 import "../../Popover/InputPopover/InputPopover.js";
 import { usePopoverItem as ee } from "../../Popover/hooks/usePopoverItem.js";
-import { a as te } from "../../../floating-ui.react-CmSaAiNF.js";
+import { a as te } from "../../../floating-ui.react-BetVZ099.js";
 import { IressMenuDivider as re } from "../MenuDivider/MenuDivider.js";
 import { PopoverContext as oe } from "../../Popover/hooks/usePopover.js";
 import { GlobalCSSClass as se } from "../../../enums.js";
@@ -179,7 +179,7 @@ const ie = ({
   const R = n(() => u === "listitem" ? /* @__PURE__ */ l("span", { role: "listitem", children: g }) : g, [g, u]);
   return /* @__PURE__ */ K(U, { children: [
     e?.isComposite ? /* @__PURE__ */ l(te, { render: (t) => $(R, t) }) : R,
-    D && /* @__PURE__ */ l(re, { mt: "spacing.100" })
+    D && /* @__PURE__ */ l(re, { mt: "spacing.1" })
   ] });
 }, Ae = H(ie);
 export {

package/dist/components/Menu/MenuText/MenuText.js

@@ -59,7 +59,7 @@ const R = (s, o) => (s && ["h1", "h2", "h3", "h4", "h5", "h6"].includes(s)) ?? (
         ]
       }
     ),
-    g && /* @__PURE__ */ r(T, { mt: "spacing.100" })
+    g && /* @__PURE__ */ r(T, { mt: "spacing.1" })
   ] });
 }, B = ({
   className: s,