@iress-oss/ids-components 6.0.0-alpha.5 → 6.0.0-alpha.7

package/dist/components/Radio/Radio.js

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

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

@@ -4,6 +4,7 @@ const e = r({
     "root",
     "input",
     "label",
+    "labelContent",
     "radioMark",
     "checkedRadioMark",
     "checkboxMark"
@@ -15,6 +16,7 @@ const e = r({
       position: "relative",
       padding: "spacing.0",
       transition: "[all 0.2s ease-out]",
+      textStyle: "typography.body.md",
       "&:has(svg:hover)": {
         color: "colour.primary.fillHover"
       }
@@ -41,6 +43,9 @@ const e = r({
       margin: "[0px]",
       cursor: "pointer"
     },
+    labelContent: {
+      font: "inherit"
+    },
     radioMark: {
       boxSizing: "border-box",
       position: "relative",
@@ -51,8 +56,8 @@ const e = r({
       display: "inline-flex",
       alignItems: "center",
       justifyContent: "center",
-      width: "[calc(1.3 * 1rem)]",
-      height: "[calc(1.3 * 1rem)]",
+      width: "[1.4em]",
+      height: "[1.4em]",
       borderRadius: "[100%]",
       marginInlineEnd: "spacing.2",
       flexShrink: 0,

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-C5ubHBTi.js";
+import { I as K } from "../../Autocomplete-BQ_YPb5A.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-mmhMLwp9.js";
+import "../../Button-B4nt3P1v.js";
 import "../Button/CloseButton/CloseButton.js";
 import "../Tag/Tag.styles.js";
 import "../Tag/TagInput/TagInput.js";

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-mmhMLwp9.js";
+import { I as v } from "../../../Button-B4nt3P1v.js";
 import "../../Button/CloseButton/CloseButton.js";
 import "../../Popover/Popover.js";
 import "../../Popover/Popover.styles.js";

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

@@ -1,5 +1,5 @@
 import { s as e } from "../../../sva-OmxClA9g.js";
-const n = e({
+const o = e({
   slots: ["selectLabel", "contents", "placeholder", "prepend", "append"],
   base: {
     selectLabel: {
@@ -22,13 +22,11 @@ const n = e({
       transition: "common",
       _focusWithin: {
         backgroundColor: "colour.neutral.10",
-        borderColor: "colour.primary.fill",
         layerStyle: "elevation.focus",
         outline: "[none]"
       },
       _active: {
         backgroundColor: "colour.neutral.10",
-        borderColor: "colour.primary.fill",
         layerStyle: "elevation.focus",
         outline: "[none]"
       }
@@ -87,5 +85,5 @@ const n = e({
   }
 });
 export {
-  n as selectLabel
+  o as selectLabel
 };

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

@@ -20,7 +20,7 @@ import { IressMenuItem as D } from "../../Menu/MenuItem/MenuItem.js";
 import { IressPopover as G } from "../../Popover/Popover.js";
 import "../../Popover/Popover.styles.js";
 import "../../Popover/InputPopover/InputPopover.js";
-import { I as R } from "../../../Button-mmhMLwp9.js";
+import { I as R } from "../../../Button-B4nt3P1v.js";
 import "../../Button/CloseButton/CloseButton.js";
 import { IressIcon as W } from "../../Icon/Icon.js";
 import "../../Icon/Icon.styles.js";

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

@@ -1,5 +1,5 @@
-import { s as o } from "../../../sva-OmxClA9g.js";
-const r = o({
+import { s as e } from "../../../sva-OmxClA9g.js";
+const l = e({
   slots: ["root", "placeholder", "prepend", "append", "tag", "tagsList"],
   base: {
     root: {
@@ -24,13 +24,11 @@ const r = o({
       },
       "&:focus": {
         backgroundColor: "colour.neutral.10",
-        borderColor: "colour.primary.fill",
         layerStyle: "elevation.focus",
         outline: "[none]"
       },
       "&:focus-within": {
         backgroundColor: "colour.neutral.10",
-        borderColor: "colour.primary.fill",
         layerStyle: "elevation.focus",
         outline: "[none]"
       },
@@ -82,5 +80,5 @@ const r = o({
   }
 });
 export {
-  r as selectTags
+  l as selectTags
 };

package/dist/components/RichSelect/components/SelectOptions.js

@@ -1,9 +1,9 @@
-import { jsx as s, jsxs as F, Fragment as W } from "react/jsx-runtime";
-import { getValueAsEvent as E } from "../../../helpers/form/getValueAsEvent.js";
+import { jsx as s, jsxs as y, Fragment as W } from "react/jsx-runtime";
+import { getValueAsEvent as F } from "../../../helpers/form/getValueAsEvent.js";
 import { useCallback as O, useRef as j, useId as k, useEffect as P } from "react";
 import { IressSelectSearch as $ } from "../SelectSearch/SelectSearch.js";
 import { toArray as D } from "../../../helpers/formatting/toArray.js";
-import { IressSelectMenu as y } from "../SelectMenu/SelectMenu.js";
+import { IressSelectMenu as E } from "../SelectMenu/SelectMenu.js";
 import { IressAlert as T } from "../../Alert/Alert.js";
 import "../../Alert/Alert.styles.js";
 import { IressSelectSearchInput as z } from "../SelectSearchInput/SelectSearchInput.js";
@@ -15,19 +15,19 @@ import "../../Menu/MenuItem/MenuItem.js";
 import "../../Popover/hooks/usePopover.js";
 const H = ({
   minSearchLength: e,
-  multiSelect: n,
-  onChange: a,
+  multiSelect: r,
+  onChange: i,
   query: I,
   results: o,
   shouldShowInstructions: d,
   shouldShowNoResults: c,
   value: t
 }) => /* @__PURE__ */ s(
-  y,
+  E,
   {
-    heading: n ? "Search results" : void 0,
+    heading: r ? "Search results" : void 0,
     items: o,
-    multiSelect: n,
+    multiSelect: r,
     noResults: (() => {
       if (I) {
         if (d)
@@ -36,18 +36,18 @@ const H = ({
           return "No results found";
       }
     })(),
-    onChange: a,
+    onChange: i,
     selected: t,
-    hideSelectedItems: n
+    hideSelectedItems: r
   }
-), J = ({ error: e }) => e ? /* @__PURE__ */ s(T, { className: "iress-m--sm", status: "danger", children: typeof e == "string" ? e : /* @__PURE__ */ F(W, { children: [
+), J = ({ error: e }) => e ? /* @__PURE__ */ s(T, { className: "iress-m--sm", status: "danger", children: typeof e == "string" ? e : /* @__PURE__ */ y(W, { children: [
   "An unknown error occurred.",
   /* @__PURE__ */ s("br", {}),
   " Please contact support if the error persists."
 ] }) }) : null, K = ({
   autoHighlight: e,
-  error: n,
-  loading: a,
+  error: r,
+  loading: i,
   minSearchLength: I,
   multiSelect: o,
   onChange: d,
@@ -56,62 +56,62 @@ const H = ({
   results: f,
   setQuery: p,
   show: A,
-  value: i,
+  value: l,
   shouldShowInstructions: R,
   shouldShowNoResults: S
 }) => {
-  const r = D(i).map(
-    (l) => {
-      const { formattedLabel: g, ...b } = l;
-      return b;
+  const n = D(l).map(
+    (a) => {
+      const { formattedLabel: g, ...N } = a;
+      return N;
     }
-  ), u = !n && (!!f?.length || t && !a), m = !!r.length && o, N = u && m, h = j(null), x = k();
+  ), u = !r && (!!f?.length || t && !i), m = !!n.length && o, v = u && m, h = j(null), x = k();
   P(() => {
     A || p?.("");
   }, [A, p]);
-  const v = m ? r.length + 1 : 0;
-  return /* @__PURE__ */ F(
+  const M = m ? n.length + 1 : 0;
+  return /* @__PURE__ */ y(
     $,
     {
       activator: /* @__PURE__ */ s(
         z,
         {
           "aria-label": "Search",
-          loading: a,
-          onChange: (l) => p?.(l.target.value),
+          loading: i,
+          onChange: (a) => p?.(a.target.value),
           ref: h,
           placeholder: "Search and select",
           value: t
         }
       ),
       autoHighlight: e,
-      focusStartIndex: e ? t && u ? v : m ? 1 : 0 : void 0,
+      focusStartIndex: e ? t && u ? M : m ? 1 : 0 : void 0,
       children: [
         m && /* @__PURE__ */ s(
-          y,
+          E,
           {
             "aria-labelledby": x,
             heading: /* @__PURE__ */ s(
               B,
               {
                 clearAll: !0,
-                onClearAll: (l) => {
-                  c?.(l), h.current?.focus();
+                onClearAll: (a) => {
+                  c?.(a), h.current?.focus();
                 },
-                children: /* @__PURE__ */ F("h2", { id: x, children: [
+                children: /* @__PURE__ */ y("h2", { id: x, children: [
                   "Selected (",
-                  r.length,
+                  n.length,
                   ")"
                 ] })
               }
             ),
-            items: r,
+            items: n,
             multiSelect: o,
             onChange: d,
-            selected: i
+            selected: l
           }
         ),
-        N && /* @__PURE__ */ s(G, {}),
+        v && /* @__PURE__ */ s(G, {}),
         u && /* @__PURE__ */ s(
           H,
           {
@@ -120,19 +120,19 @@ const H = ({
             onChange: d,
             query: t,
             results: f,
-            value: i,
+            value: l,
             shouldShowInstructions: R,
             shouldShowNoResults: S
           }
         ),
-        /* @__PURE__ */ s(J, { error: n })
+        /* @__PURE__ */ s(J, { error: r })
       ]
     }
   );
 }, oe = ({
   autoHighlight: e,
-  debouncedQuery: n,
-  error: a,
+  debouncedQuery: r,
+  error: i,
   initialOptions: I,
   loading: o,
   minSearchLength: d,
@@ -141,36 +141,38 @@ const H = ({
   options: f,
   query: p,
   renderOptions: A,
-  results: i,
+  results: l,
   setQuery: R,
   setShow: S,
-  setValue: r,
+  setValue: n,
   show: u,
   shouldShowInstructions: m,
-  shouldShowNoResults: N,
+  shouldShowNoResults: v,
   value: h
 }) => {
-  const x = typeof f == "function", v = I ?? (x ? [] : f), M = i.length ? i : v, C = O(
+  const x = typeof f == "function", M = I ?? (x ? [] : f), C = l.length ? l : M, b = O(
     (g) => {
-      r(g), t?.(E(g), g), c || S(!1);
+      n(g), t?.(F(g), g), c || S(!1);
     },
-    [S, r, t, c]
-  ), l = O(
+    [S, n, t, c]
+  ), a = O(
     (g) => {
       g.stopPropagation();
-      const b = [];
-      r(b), t?.(E([]), b);
+      const N = [];
+      n(N), t?.(F([]), N);
     },
-    [r, t]
+    [n, t]
   );
   return A ? A({
     close: () => S(!1),
-    debouncedQuery: n,
-    error: a,
+    debouncedQuery: r,
+    error: i,
+    handleClear: a,
+    handleMenuChange: b,
     loading: o,
     query: p,
-    results: M,
-    setValue: r,
+    results: C,
+    setValue: n,
     setQuery: R,
     show: u,
     value: h
@@ -178,28 +180,27 @@ const H = ({
     K,
     {
       autoHighlight: e,
-      error: a,
+      error: i,
       loading: o,
       minSearchLength: d,
       multiSelect: c,
-      onChange: C,
-      onClear: l,
+      onChange: b,
+      onClear: a,
       query: p,
-      results: i,
+      results: l,
       setQuery: R,
       show: u,
       value: h,
       shouldShowInstructions: m,
-      shouldShowNoResults: N
+      shouldShowNoResults: v
     }
   ) : /* @__PURE__ */ s(
-    y,
+    E,
     {
-      items: M,
+      items: C,
       multiSelect: c,
-      onChange: C,
-      selected: h,
-      selectedFirst: !0
+      onChange: b,
+      selected: h
     }
   );
 };

package/dist/components/RichSelect/index.js

@@ -1,5 +1,5 @@
 import { useRichSelectState as t } from "./hooks/useRichSelectState.js";
-import { I as s } from "../../Autocomplete-C5ubHBTi.js";
+import { I as s } from "../../Autocomplete-BQ_YPb5A.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";

package/dist/components/Select/Select.styles.js

@@ -5,7 +5,10 @@ const t = ["wrapper", "control", "element"], c = e({
     wrapper: {
       display: "block",
       position: "relative",
-      lineHeight: 1
+      lineHeight: 1,
+      "&:has(select:focus)": {
+        layerStyle: "elevation.focus"
+      }
     },
     control: {
       position: "relative",

package/dist/components/SkipLink/SkipLink.js

@@ -1,6 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
 import { forwardRef as m } from "react";
-import { I as p } from "../../Button-mmhMLwp9.js";
+import { I as p } from "../../Button-B4nt3P1v.js";
 import "../Button/CloseButton/CloseButton.js";
 import { c as k } from "../../cx-DN21T1EH.js";
 import { skipLink as n } from "./SkipLink.styles.js";

package/dist/components/Slideout/components/SlideoutInner.js

@@ -1,6 +1,6 @@
 import { jsxs as c, jsx as d } from "react/jsx-runtime";
 import { propagateTestid as o } from "../../../helpers/utility/propagateTestid.js";
-import "../../../Button-mmhMLwp9.js";
+import "../../../Button-B4nt3P1v.js";
 import { IressCloseButton as j } from "../../Button/CloseButton/CloseButton.js";
 import { slideout as v } from "../Slideout.styles.js";
 import { s as f } from "../../../factory-oPXoMw9H.js";

package/dist/components/Slideout/hooks/usePushElement.js

@@ -1,6 +1,6 @@
 import { useRef as m, useEffect as y } from "react";
 import { GlobalCSSClass as e } from "../../../enums.js";
-import { t as p } from "../../../index-CZ9ot38T.js";
+import { t as p } from "../../../index-aTLA1VIV.js";
 import { useBreakpoint as S } from "../../../hooks/useBreakpoint.js";
 function h({
   element: r,

package/dist/components/Tag/Tag.js

@@ -1,7 +1,7 @@
 import { jsxs as f, jsx as e } from "react/jsx-runtime";
 import { useRef as u } from "react";
 import { propagateTestid as d } from "../../helpers/utility/propagateTestid.js";
-import "../../Button-mmhMLwp9.js";
+import "../../Button-B4nt3P1v.js";
 import { IressCloseButton as x } from "../Button/CloseButton/CloseButton.js";
 import { IressText as C } from "../Text/Text.js";
 import { tag as g } from "./Tag.styles.js";

package/dist/components/Toaster/components/Toast/Toast.js

@@ -1,6 +1,6 @@
 import { jsx as o, jsxs as a } from "react/jsx-runtime";
 import { propagateTestid as i } from "../../../../helpers/utility/propagateTestid.js";
-import "../../../../Button-mmhMLwp9.js";
+import "../../../../Button-B4nt3P1v.js";
 import { IressCloseButton as h } from "../../../Button/CloseButton/CloseButton.js";
 import "../../../Inline/Inline.styles.js";
 import { IressInline as y } from "../../../Inline/Inline.js";

package/dist/components/Toggle/Toggle.styles.js

@@ -12,7 +12,8 @@ const t = e({
     toggleBase: {
       display: "inline-flex",
       gap: "spacing.1",
-      color: "colour.primary.fill"
+      color: "colour.primary.fill",
+      textStyle: "typography.body.md.strong"
     },
     toggleButtonContainer: {
       position: "relative",
@@ -81,7 +82,8 @@ const t = e({
     },
     checkboxMark: {
       opacity: 0,
-      marginInlineStart: "spacing.1",
+      marginInlineStart: "[calc({spacing.spacing.1} * 0.5)]",
+      textStyle: "typography.body.md",
       "&&:hover": {
         bg: "transparent"
       }
@@ -90,7 +92,6 @@ const t = e({
       display: "inline-block",
       marginInlineEnd: "spacing.1",
       color: "colour.neutral.80",
-      textStyle: "typography.body.md.strong",
       lineHeight: "1.5rem"
     }
   },

package/dist/constants.js

@@ -1,4 +1,4 @@
-const t = "6.0.0-alpha.5", e = {
+const t = "6.0.0-alpha.7", e = {
   /**
    * Extra small breakpoint, for mobile devices
    */