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

package/dist/components/Radio/Radio.js

@@ -1,25 +1,35 @@
-import { jsx as e, jsxs as f } from "react/jsx-runtime";
-import { forwardRef as A, useContext as B } from "react";
-import { useControlledState as E } from "../../hooks/useControlledState.js";
-import { useIdIfNeeded as H } from "../../hooks/useIdIfNeeded.js";
-import { propagateTestid as m } from "../../helpers/utility/propagateTestid.js";
-import { IressReadonly as P } from "../Readonly/Readonly.js";
+import { jsx as e, jsxs as k } from "react/jsx-runtime";
+import { forwardRef as j, useContext as A } from "react";
+import { useControlledState as B } from "../../hooks/useControlledState.js";
+import { useIdIfNeeded as E } from "../../hooks/useIdIfNeeded.js";
+import { propagateTestid as l } from "../../helpers/utility/propagateTestid.js";
+import { IressReadonly as H } from "../Readonly/Readonly.js";
 import "../Readonly/Readonly.styles.js";
-import { getFormControlValueAsString as z } from "../../helpers/form/getFormControlValueAsString.js";
-import { c as k } from "../../css-fGu_jDvv.js";
-import { c as D } from "../../cx-DN21T1EH.js";
-import { radio as J } from "./Radio.styles.js";
-import { GlobalCSSClass as l } from "../../enums.js";
-import { IressCheckboxMark as K } from "../CheckboxMark/CheckboxMark.js";
+import { getFormControlValueAsString as P } from "../../helpers/form/getFormControlValueAsString.js";
+import { c as C } from "../../css-fGu_jDvv.js";
+import { c as z } from "../../cx-DN21T1EH.js";
+import { radio as D } from "./Radio.styles.js";
+import { GlobalCSSClass as p } from "../../enums.js";
+import { IressCheckboxMark as J } from "../CheckboxMark/CheckboxMark.js";
 import "../CheckboxMark/CheckboxMark.styles.js";
-import { getRadioGroupContext as L } from "../RadioGroup/RadioGroup.js";
+import { getRadioGroupContext as K } from "../RadioGroup/RadioGroup.js";
 import "../RadioGroup/RadioGroup.styles.js";
-import { s as p } from "../../factory-oPXoMw9H.js";
-import { s as Q } from "../../is-valid-prop-Ce0wiweq.js";
-import { IressText as T } from "../Text/Text.js";
-const U = ({
-  checked: C,
-  children: h,
+import { s as h } from "../../factory-oPXoMw9H.js";
+import { s as L } from "../../is-valid-prop-Ce0wiweq.js";
+import { IressText as Q } from "../Text/Text.js";
+const T = (a) => /* @__PURE__ */ e(
+  h.svg,
+  {
+    version: "1.1",
+    viewBox: "0 0 200 200",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...a,
+    className: p.FormElement,
+    children: /* @__PURE__ */ e("circle", { cx: "100", cy: "100", r: "70" })
+  }
+), U = ({
+  checked: a,
+  children: u,
   className: x,
   "data-testid": i,
   defaultChecked: g,
@@ -30,84 +40,80 @@ const U = ({
   required: b,
   value: r,
   touch: M,
-  ...a
+  ...n
 }, N) => {
-  const u = H(a), o = B(L()), { value: S, setValue: G } = E({
+  const f = E(n), o = A(K()), { value: S, setValue: G } = B({
     component: "Radio",
     defaultValue: !!g,
-    value: C,
+    value: a,
     propName: "checked"
-  }), n = !!o?.onChange, s = n ? o.value === r : S;
-  if (n ? o.readOnly : v)
+  }), d = !!o?.onChange, s = d ? o.value === r : S;
+  if (d ? o.readOnly : v)
     return s ? /* @__PURE__ */ e(
-      P,
+      H,
       {
-        ...a,
+        ...n,
         width: void 0,
-        value: z(r),
-        children: h
+        value: P(r),
+        children: u
       }
     ) : null;
-  const I = o?.name ?? R, d = o?.hiddenRadio ?? y, O = o?.required ?? b, q = o?.touch ?? M, t = J.raw({
-    hiddenControl: d,
+  const I = o?.name ?? R, c = o?.hiddenRadio ?? y, O = o?.required ?? b, q = o?.touch ?? M, t = D.raw({
+    hiddenControl: c,
     touch: q,
     checked: s
-  }), F = () => /* @__PURE__ */ e(
-    p.svg,
-    {
-      version: "1.1",
-      viewBox: "0 0 200 200",
-      xmlns: "http://www.w3.org/2000/svg",
-      ...t.radioMark,
-      className: l.FormElement,
-      children: /* @__PURE__ */ e("circle", { cx: "100", cy: "100", r: "70" })
-    }
-  ), [V, j] = Q(a);
-  return /* @__PURE__ */ f(
+  }), [F, V] = L(n);
+  return /* @__PURE__ */ k(
     "div",
     {
       "data-testid": i,
-      className: D(
+      className: z(
         x,
-        k(t.root, V),
-        l.Group,
-        l.Radio
+        C(t.root, F),
+        p.Group,
+        p.Radio
       ),
       children: [
         /* @__PURE__ */ e(
-          p.input,
+          h.input,
           {
-            ...j,
+            ...V,
             ...t.input,
             type: "radio",
-            id: u,
+            id: f,
             name: I,
             ref: N,
-            "data-testid": m(i, "input"),
-            onChange: (c) => {
-              n || G(c.target.checked), w?.(c, r), o?.onChange?.(c, r);
+            "data-testid": l(i, "input"),
+            onChange: (m) => {
+              d || G(m.target.checked), w?.(m, r), o?.onChange?.(m, r);
             },
             value: String(r),
             checked: s,
             required: O
           }
         ),
-        /* @__PURE__ */ f(p.label, { htmlFor: u, ...t.label, children: [
-          !d && /* @__PURE__ */ e(F, { "data-testid": m(i, "radioMark") }),
-          d && /* @__PURE__ */ e(
-            K,
+        /* @__PURE__ */ k(h.label, { htmlFor: f, ...t.label, children: [
+          !c && /* @__PURE__ */ e(
+            T,
+            {
+              ...t.radioMark,
+              "data-testid": l(i, "radioMark")
+            }
+          ),
+          c && /* @__PURE__ */ e(
+            J,
             {
-              className: k(t.checkboxMark),
+              className: C(t.checkboxMark),
               checked: s,
-              "data-testid": m(i, "checkboxMark")
+              "data-testid": l(i, "checkboxMark")
             }
           ),
-          /* @__PURE__ */ e(T, { element: "span", children: h })
+          /* @__PURE__ */ e(Q, { element: "span", children: u })
         ] })
       ]
     }
   );
-}, fo = A(U);
+}, fo = j(U);
 export {
   fo as IressRadio
 };

package/dist/components/Radio/Radio.styles.js

@@ -13,7 +13,7 @@ const e = r({
       color: "colour.primary.fill",
       display: "flex",
       position: "relative",
-      padding: "spacing.000",
+      padding: "spacing.0",
       transition: "[all 0.2s ease-out]",
       "&:has(svg:hover)": {
         color: "colour.primary.fillHover"
@@ -25,14 +25,14 @@ const e = r({
       height: "[1px]",
       margin: "[-1px]",
       overflow: "hidden",
-      padding: "spacing.000",
+      padding: "spacing.0",
       position: "absolute",
       width: "[1px]"
     },
     label: {
       display: "inline-flex",
       alignItems: "center",
-      padding: "spacing.000",
+      padding: "spacing.0",
       border: "[0px solid transparent]",
       borderRadius: "radius.system.form",
       backgroundColor: "[transparent]",
@@ -54,7 +54,7 @@ const e = r({
       width: "[calc(1.3 * 1rem)]",
       height: "[calc(1.3 * 1rem)]",
       borderRadius: "[100%]",
-      marginInlineEnd: "spacing.150",
+      marginInlineEnd: "spacing.2",
       flexShrink: 0,
       color: "[currentColor]",
       "& circle": {
@@ -94,7 +94,7 @@ const e = r({
           borderStyle: "solid",
           borderColor: "colour.neutral.40",
           borderRadius: "radius.050",
-          padding: "spacing.400"
+          padding: "spacing.4"
         }
       }
     },

package/dist/components/RadioGroup/RadioGroup.styles.js

@@ -6,7 +6,7 @@ const i = a({
       stack: {
         display: "inline-flex",
         flexFlow: "column wrap",
-        rowGap: "spacing.200",
+        rowGap: "spacing.2",
         "& > *": {
           flexBasis: "[0]"
         }
@@ -14,7 +14,7 @@ const i = a({
       block: {
         display: "flex",
         flexFlow: "column wrap",
-        rowGap: "spacing.200",
+        rowGap: "spacing.2",
         "& label": {
           flexBasis: "[100%]"
         }
@@ -23,7 +23,7 @@ const i = a({
         display: "flex",
         flexFlow: "row wrap",
         width: "[100%]",
-        gap: "spacing.200",
+        gap: "spacing.2",
         "& label": {
           flexBasis: "[auto]",
           flexGrow: "[0]"
@@ -31,7 +31,7 @@ const i = a({
       },
       inlineFlex: {
         display: "inline-flex",
-        gap: "spacing.200"
+        gap: "spacing.2"
       },
       inlineEqualWidth: {
         display: "flex",

package/dist/components/Readonly/Readonly.styles.js

@@ -26,16 +26,16 @@ const i = t({
         display: "none"
       },
       "& > *": {
-        px: "spacing.250"
+        px: "spacing.3"
       },
       _first: {
         "& > *": {
-          pl: "spacing.000"
+          pl: "spacing.0"
         }
       },
       _last: {
         "& > *": {
-          pr: "spacing.000"
+          pr: "spacing.0"
         }
       }
     },
@@ -43,7 +43,7 @@ const i = t({
       display: "flex",
       alignItems: "center",
       "& > *": {
-        padding: "[0 {spacing.spacing.250}]"
+        padding: "[0 {spacing.spacing.3}]"
       },
       _empty: {
         display: "none"

package/dist/components/RichSelect/RichSelect.js

@@ -3,7 +3,7 @@ import "react";
 import "../../cx-DN21T1EH.js";
 import "./RichSelect.styles.js";
 import "./hooks/useRichSelectState.js";
-import { I as K } from "../../Autocomplete-CLvWVHp6.js";
+import { I as K } from "../../Autocomplete-C5ubHBTi.js";
 import "./SelectBody/SelectBody.styles.js";
 import "../../enums.js";
 import "../Menu/Menu.js";
@@ -21,7 +21,7 @@ import "../Popover/Popover.styles.js";
 import "../Popover/InputPopover/InputPopover.js";
 import "./SelectSearchInput/SelectSearchInput.js";
 import "./SelectTags/SelectTags.styles.js";
-import "../../Button-D6AL0bia.js";
+import "../../Button-mmhMLwp9.js";
 import "../Button/CloseButton/CloseButton.js";
 import "../Tag/Tag.styles.js";
 import "../Tag/TagInput/TagInput.js";

package/dist/components/RichSelect/RichSelect.styles.js

@@ -20,8 +20,8 @@ const i = c({
       width: "[100%]"
     },
     dropdownClear: {
-      paddingX: "spacing.200",
-      paddingY: "spacing.100",
+      paddingX: "spacing.2",
+      paddingY: "spacing.1",
       minHeight: "[0px]",
       boxShadow: "[none]"
     },
@@ -35,37 +35,37 @@ const i = c({
     width: {
       2: {
         richSelect: {
-          width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.2})]"
+          width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.2})]"
         }
       },
       4: {
         richSelect: {
-          width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.4})]"
+          width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.4})]"
         }
       },
       6: {
         richSelect: {
-          width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.6})]"
+          width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.6})]"
         }
       },
       8: {
         richSelect: {
-          width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.8})]"
+          width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.8})]"
         }
       },
       10: {
         richSelect: {
-          width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.10})]"
+          width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.10})]"
         }
       },
       12: {
         richSelect: {
-          width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.12})]"
+          width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.12})]"
         }
       },
       16: {
         richSelect: {
-          width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.16})]"
+          width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.16})]"
         }
       },
       "25perc": {

package/dist/components/RichSelect/SelectHeading/SelectHeading.js

@@ -8,7 +8,7 @@ import "../../Divider/Divider.styles.js";
 import { GlobalCSSClass as p } from "../../../enums.js";
 import "../../Menu/MenuItem/MenuItem.js";
 import { IressMenuHeading as I } from "../../Menu/MenuText/MenuText.js";
-import { I as v } from "../../../Button-D6AL0bia.js";
+import { I as v } from "../../../Button-mmhMLwp9.js";
 import "../../Button/CloseButton/CloseButton.js";
 import "../../Popover/Popover.js";
 import "../../Popover/Popover.styles.js";

package/dist/components/RichSelect/SelectLabel/SelectLabel.styles.js

@@ -8,8 +8,8 @@ const n = e({
       justifyContent: "space-between",
       alignItems: "center",
       minHeight: "input.height",
-      paddingInline: "spacing.200",
-      paddingBlock: "spacing.000",
+      paddingInline: "spacing.2",
+      paddingBlock: "spacing.0",
       backgroundColor: "colour.neutral.10",
       border: "input",
       borderRadius: "radius.system.form",
@@ -59,14 +59,14 @@ const n = e({
       display: "inline-flex",
       alignItems: "center",
       color: "colour.neutral.40",
-      gap: "spacing.100"
+      gap: "spacing.1"
     },
     append: {
       display: "inline-flex",
       alignItems: "center",
       color: "colour.neutral.70",
-      gap: "spacing.100",
-      marginInlineEnd: "spacing.100",
+      gap: "spacing.1",
+      marginInlineEnd: "spacing.1",
       pointerEvents: "none"
     }
   },

package/dist/components/RichSelect/SelectTags/SelectTags.js

@@ -1,132 +1,130 @@
 import { jsxs as N, jsx as o } from "react/jsx-runtime";
 import { propagateTestid as b } from "../../../helpers/utility/propagateTestid.js";
-import { toArray as P } from "../../../helpers/formatting/toArray.js";
-import { composeLabelValueDescriptor as k } from "../../../helpers/label-value/composeLabelValueDescriptor.js";
-import { getFormControlValueAsStringIfDefined as w } from "../../../helpers/form/getFormControlValueAsStringIfDefined.js";
-import { useMemo as M, useState as j, useContext as B, useCallback as I, useEffect as O } from "react";
-import { focusableElements as L } from "../../../helpers/dom/focusableElements.js";
-import { PopoverContext as V } from "../../Popover/hooks/usePopover.js";
+import { toArray as k } from "../../../helpers/formatting/toArray.js";
+import { composeLabelValueDescriptor as w } from "../../../helpers/label-value/composeLabelValueDescriptor.js";
+import { getFormControlValueAsStringIfDefined as E } from "../../../helpers/form/getFormControlValueAsStringIfDefined.js";
+import { useMemo as M, useState as j, useContext as A, useCallback as I } from "react";
+import { focusableElements as B } from "../../../helpers/dom/focusableElements.js";
+import { PopoverContext as O } from "../../Popover/hooks/usePopover.js";
 import { IressText as v } from "../../Text/Text.js";
-import { c as A } from "../../../cx-DN21T1EH.js";
-import { selectTags as E } from "./SelectTags.styles.js";
+import { c as L } from "../../../cx-DN21T1EH.js";
+import { selectTags as F } from "./SelectTags.styles.js";
 import { IressTag as T } from "../../Tag/Tag.js";
 import "../../Tag/Tag.styles.js";
 import "../../Tag/TagInput/TagInput.js";
-import { IressMenu as G } from "../../Menu/Menu.js";
+import { IressMenu as V } from "../../Menu/Menu.js";
 import "../../Menu/Menu.styles.js";
 import "../../Divider/Divider.styles.js";
 import { GlobalCSSClass as C } from "../../../enums.js";
 import { IressMenuItem as D } from "../../Menu/MenuItem/MenuItem.js";
-import { IressPopover as R } from "../../Popover/Popover.js";
+import { IressPopover as G } from "../../Popover/Popover.js";
 import "../../Popover/Popover.styles.js";
 import "../../Popover/InputPopover/InputPopover.js";
-import { I as W } from "../../../Button-D6AL0bia.js";
+import { I as R } from "../../../Button-mmhMLwp9.js";
 import "../../Button/CloseButton/CloseButton.js";
-import { IressIcon as $ } from "../../Icon/Icon.js";
+import { IressIcon as W } from "../../Icon/Icon.js";
 import "../../Icon/Icon.styles.js";
 import "../../Inline/Inline.styles.js";
-import { IressInline as q } from "../../Inline/Inline.js";
+import { IressInline as $ } from "../../Inline/Inline.js";
 const S = (r, s) => {
   if (!r?.api.elements.reference || !s)
     return;
-  const a = r.getFocusableActivator(), n = L(
+  const a = r.getFocusableActivator(), n = B(
     r.api.elements.reference
   ).filter((l) => l !== a);
   if (n.length < 1)
     a?.focus();
   else {
-    const l = n.indexOf(s.currentTarget), e = n.filter(
+    const l = n.indexOf(s.currentTarget), t = n.filter(
       (m) => m !== s.currentTarget
     ), i = Math.max(l - 1, 0);
-    !e[i] && e[0] ? e[0].focus() : e[0] ? e[i].focus() : a?.focus();
+    !t[i] && t[0] ? t[0].focus() : t[0] ? t[i].focus() : a?.focus();
   }
-}, z = ({
+}, q = ({
   "data-testid": r,
   limit: s = 5,
   onDelete: a,
   onDeleteAll: n,
   onToggleActions: l,
-  selectedArray: e,
+  selectedArray: t,
   selectedOptionsText: i
 }) => {
-  const [m, f] = j(!1), c = B(V), p = E(), h = I(
-    (t, u) => {
+  const [m, u] = j(!1), c = A(O), p = F(), h = I(
+    (e, f) => {
       a?.(
-        e.find((x) => x.label === t),
-        u
-      ), u.stopPropagation(), S(c, u);
+        t.find((x) => x.label === e),
+        f
+      ), f.stopPropagation(), S(c, f);
     },
-    [a, c, e]
+    [a, c, t]
   ), g = I(
-    (t) => {
-      n?.(t), c?.getFocusableActivator()?.focus();
+    (e) => {
+      n?.(e), c?.getFocusableActivator()?.focus();
     },
     [n, c]
   );
-  return O(() => {
-    e.length || f(!1);
-  }, [e]), m || !s || e.length <= s ? e.map((t) => /* @__PURE__ */ o(
+  return m || !s || t.length <= s ? t.map((e) => /* @__PURE__ */ o(
     T,
     {
       className: p.tag,
       "data-testid": b(r, "tag"),
-      deleteButtonText: `Delete ${t.label}`,
+      deleteButtonText: `Delete ${e.label}`,
       onDelete: h,
-      children: t.label
+      children: e.label
     },
-    w(t.value) ?? t.label
+    E(e.value) ?? e.label
   )) : /* @__PURE__ */ o(
     T,
     {
       className: p.tag,
       "data-testid": b(r, "tag"),
       deleteButton: /* @__PURE__ */ o(
-        R,
+        G,
         {
-          activator: /* @__PURE__ */ o(W, { mode: "tertiary", children: /* @__PURE__ */ o(
-            $,
+          activator: /* @__PURE__ */ o(R, { mode: "tertiary", children: /* @__PURE__ */ o(
+            W,
             {
               name: "chevron-circle-down",
               screenreaderText: "Actions"
             }
           ) }),
           onActivated: () => l?.(!0),
-          onClick: (t) => {
-            t.stopPropagation(), S(c, t);
+          onClick: (e) => {
+            e.stopPropagation(), S(c, e);
           },
           onDeactivated: () => l?.(!1),
-          children: /* @__PURE__ */ N(G, { children: [
-            /* @__PURE__ */ o(D, { onClick: () => f(!0), children: "Expand all" }),
+          children: /* @__PURE__ */ N(V, { children: [
+            /* @__PURE__ */ o(D, { onClick: () => u(!0), children: "Expand all" }),
             /* @__PURE__ */ o(D, { onClick: g, children: "Delete all" })
           ] })
         }
       ),
-      children: k(e, i)
+      children: w(t, i)
     }
   );
-}, be = ({
+}, xe = ({
   append: r = "",
   className: s,
   "data-testid": a,
   id: n,
   limit: l = 5,
-  onDelete: e,
+  onDelete: t,
   onDeleteAll: i,
   onToggleActions: m,
-  placeholder: f,
+  placeholder: u,
   prepend: c,
   selected: p,
   selectedOptionsText: h = "{{numOptions}} selected",
   ...g
 }) => {
-  const t = M(() => P(p), [p]), u = !t.length && f, x = !!t.length, F = r == null || r === "" || !r, d = E({ showDefaultChevron: F });
+  const e = M(() => k(p), [p]), f = !e.length && u, x = !!e.length, P = r == null || r === "" || !r, d = F({ showDefaultChevron: P });
   return /* @__PURE__ */ N(
     v,
     {
       ...g,
       id: n,
       tabIndex: 0,
-      className: A(
+      className: L(
         s,
         d.root,
         C.FormElementInner,
@@ -134,16 +132,16 @@ const S = (r, s) => {
       ),
       children: [
         c && /* @__PURE__ */ o("span", { className: d.prepend, children: c }),
-        u && /* @__PURE__ */ o(v, { className: d.placeholder, children: f }),
-        x && /* @__PURE__ */ o(q, { gap: "sm", className: d.tagsList, children: /* @__PURE__ */ o(
-          z,
+        f && /* @__PURE__ */ o(v, { className: d.placeholder, children: u }),
+        x && /* @__PURE__ */ o($, { gap: "sm", className: d.tagsList, children: /* @__PURE__ */ o(
+          q,
           {
             "data-testid": a,
             limit: l,
-            onDelete: e,
+            onDelete: t,
             onDeleteAll: i,
             onToggleActions: m,
-            selectedArray: t,
+            selectedArray: e,
             selectedOptionsText: h
           }
         ) }),
@@ -161,5 +159,5 @@ const S = (r, s) => {
   );
 };
 export {
-  be as IressSelectTags
+  xe as IressSelectTags
 };

package/dist/components/RichSelect/SelectTags/SelectTags.styles.js

@@ -6,8 +6,8 @@ const r = o({
       display: "flex",
       alignItems: "center",
       width: "[100%]",
-      paddingBlock: "spacing.050",
-      paddingInline: "spacing.200",
+      paddingBlock: "spacing.1",
+      paddingInline: "spacing.2",
       minHeight: "input.height",
       alignSelf: "auto",
       backgroundColor: "colour.neutral.10",
@@ -52,7 +52,7 @@ const r = o({
     prepend: {
       display: "inline-flex",
       alignItems: "center",
-      gap: "spacing.000",
+      gap: "spacing.0",
       color: "colour.neutral.70"
     },
     append: {},

package/dist/components/RichSelect/index.js

@@ -1,5 +1,5 @@
 import { useRichSelectState as t } from "./hooks/useRichSelectState.js";
-import { I as s } from "../../Autocomplete-CLvWVHp6.js";
+import { I as s } from "../../Autocomplete-C5ubHBTi.js";
 import { IressSelectBody as S } from "./SelectBody/SelectBody.js";
 import { IressSelectCreate as p } from "./SelectCreate/SelectCreate.js";
 import { IressSelectHeading as f } from "./SelectHeading/SelectHeading.js";