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

package/dist/{Autocomplete-C5ubHBTi.js → Autocomplete-BQ_YPb5A.js}

@@ -31,7 +31,7 @@ import "./components/RichSelect/SelectMenu/SelectMenu.styles.js";
 import "./components/RichSelect/SelectSearch/SelectSearch.styles.js";
 import "./components/RichSelect/SelectSearchInput/SelectSearchInput.js";
 import "./components/RichSelect/SelectTags/SelectTags.styles.js";
-import "./Button-mmhMLwp9.js";
+import "./Button-B4nt3P1v.js";
 import "./components/Button/CloseButton/CloseButton.js";
 import "./components/Tag/Tag.styles.js";
 import "./components/Tag/TagInput/TagInput.js";

package/dist/{Button-mmhMLwp9.js → Button-B4nt3P1v.js}

@@ -172,15 +172,6 @@ const h = {}, Z = [
       }
     }
   },
-  {
-    mode: "primary",
-    inButtonGroup: !0,
-    css: {
-      root: {
-        boxShadow: "none"
-      }
-    }
-  },
   {
     mode: "tertiary",
     inButtonGroup: !0,
@@ -265,25 +256,25 @@ const h = {}, Z = [
   append: e,
   children: t,
   className: d,
-  element: p,
+  element: l,
   fluid: x,
   loading: r = !1,
   mode: y = "secondary",
-  prepend: l,
+  prepend: p,
   noWrap: C = !1,
   onClick: b,
   status: F,
-  value: w,
+  value: I,
   ...g
-}, B) => {
-  const i = E(), I = w ?? (typeof t == "string" || typeof t == "number" || typeof t == "boolean" ? t : void 0), G = W(Y), m = k(null), n = U({ value: I }), H = u(() => n ? n.active ? "primary" : "tertiary" : y, [n, y]), s = so({
+}, w) => {
+  const i = E(), B = I ?? (typeof t == "string" || typeof t == "number" || typeof t == "boolean" ? t : void 0), H = W(Y), m = k(null), n = U({ value: B }), G = u(() => n ? n.active ? "primary" : "tertiary" : y, [n, y]), s = so({
     active: (
       // eslint-disable-next-line react-hooks/refs -- ref needed for forwarding
-      o ?? G?.isActiveActivator(m.current)
+      o ?? H?.isActiveActivator(m.current)
     ),
     fluid: x === !0 ? "true" : x,
     inButtonGroup: !!n,
-    mode: H,
+    mode: G,
     loading: !!r,
     noWrap: C,
     status: F
@@ -298,7 +289,7 @@ const h = {}, Z = [
   ), P = u(
     () => ({
       children: /* @__PURE__ */ M(N, { children: [
-        l && !r && /* @__PURE__ */ a("span", { className: s.prepend, children: l }),
+        p && !r && /* @__PURE__ */ a("span", { className: s.prepend, children: p }),
         !!r && /* @__PURE__ */ a(
           O,
           {
@@ -327,7 +318,7 @@ const h = {}, Z = [
       d,
       v,
       r,
-      l,
+      p,
       i,
       _,
       s.append,
@@ -336,16 +327,16 @@ const h = {}, Z = [
       s.spinner
     ]
   );
-  K(B, () => m.current);
+  K(w, () => m.current);
   const V = u(
-    () => p ?? (c.href ? "a" : "button"),
-    [p, c.href]
+    () => l ?? (c.href ? "a" : "button"),
+    [l, c.href]
   );
   return /* @__PURE__ */ a(
     V,
     {
       "aria-describedby": r ? i : void 0,
-      type: p || !c.href ? "button" : void 0,
+      type: l || !c.href ? "button" : void 0,
       ...P,
       ...n?.props,
       ...c,

package/dist/{Provider-BPeo5YfI.js → Provider-CDIbqQK0.js}

@@ -1,7 +1,7 @@
 import { jsxs as $, jsx as r } from "react/jsx-runtime";
 import "./components/Modal/Modal.styles.js";
 import "react";
-import "./Button-mmhMLwp9.js";
+import "./Button-B4nt3P1v.js";
 import "./components/Button/CloseButton/CloseButton.js";
 import "./components/Modal/hooks/useModal.js";
 import { IressModalProvider as n } from "./components/Modal/ModalProvider.js";
@@ -16,7 +16,7 @@ import { IressSlideoutProvider as d } from "./components/Slideout/SlideoutProvid
 import { createPortal as y } from "react-dom";
 var o = /* @__PURE__ */ ((e) => (e.Color = "color", e.Dimension = "dimension", e.FontFamily = "fontFamily", e.FontSize = "fontSize", e.Background = "background", e.Border = "border", e.Radius = "radius", e.Shadow = "shadow", e.Typography = "typography", e))(o || {});
 o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color, o.Color;
-o.Shadow, o.Border, o.Shadow, o.Border, o.Shadow, o.Border, o.Shadow, o.Shadow, o.Color;
+o.Shadow, o.Border, o.Shadow, o.Border, o.Shadow, o.Border, o.Shadow, o.Color, o.Shadow, o.Color;
 o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Radius, o.Radius, o.Radius, o.Radius;
 o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension;
 const h = [

package/dist/components/Alert/Alert.js

@@ -7,7 +7,7 @@ import { propagateTestid as h } from "../../helpers/utility/propagateTestid.js";
 import { alert as w } from "./Alert.styles.js";
 import { c as N } from "../../cx-DN21T1EH.js";
 import { GlobalCSSClass as B } from "../../enums.js";
-import { I as E } from "../../Button-mmhMLwp9.js";
+import { I as E } from "../../Button-B4nt3P1v.js";
 import { IressCloseButton as V } from "../Button/CloseButton/CloseButton.js";
 import "../Inline/Inline.styles.js";
 import { IressInline as $ } from "../Inline/Inline.js";

package/dist/components/Autocomplete/Autocomplete.js

@@ -16,7 +16,7 @@ import "../../helpers/form/getFormControlValueAsStringIfDefined.js";
 import "./hooks/useAutocompleteSearch.js";
 import "../Icon/Icon.js";
 import "./components/AutocompleteInstructions.js";
-import { a as R } from "../../Autocomplete-C5ubHBTi.js";
+import { a as R } from "../../Autocomplete-BQ_YPb5A.js";
 import "../RichSelect/SelectBody/SelectBody.styles.js";
 import "../../enums.js";
 import "../Menu/Menu.js";
@@ -30,7 +30,7 @@ import "../RichSelect/SelectMenu/SelectMenu.js";
 import "../RichSelect/SelectSearch/SelectSearch.styles.js";
 import "../RichSelect/SelectSearchInput/SelectSearchInput.js";
 import "../RichSelect/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/Autocomplete/index.js

@@ -1,4 +1,4 @@
-import { a as t } from "../../Autocomplete-C5ubHBTi.js";
+import { a as t } from "../../Autocomplete-BQ_YPb5A.js";
 import { autoComplete as m } from "./Autocomplete.styles.js";
 import { useAutocompleteSearch as a } from "./hooks/useAutocompleteSearch.js";
 export {

package/dist/components/Button/Button.js

@@ -9,7 +9,7 @@ import "../../cx-DN21T1EH.js";
 import "../../is-valid-prop-Ce0wiweq.js";
 import "../ButtonGroup/ButtonGroupProvider.js";
 import "../ButtonGroup/hooks/useButtonGroupItem.js";
-import { I as B } from "../../Button-mmhMLwp9.js";
+import { I as B } from "../../Button-B4nt3P1v.js";
 import "../Popover/hooks/usePopover.js";
 export {
   B as IressButton

package/dist/components/Button/CloseButton/CloseButton.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { I as e } from "../../../Button-mmhMLwp9.js";
+import { I as e } from "../../../Button-B4nt3P1v.js";
 import { IressIcon as a } from "../../Icon/Icon.js";
 import "../../Icon/Icon.styles.js";
 import { forwardRef as i } from "react";

package/dist/components/Button/index.js

@@ -1,4 +1,4 @@
-import { I as s, b as r } from "../../Button-mmhMLwp9.js";
+import { I as s, b as r } from "../../Button-B4nt3P1v.js";
 import { IressCloseButton as n } from "./CloseButton/CloseButton.js";
 export {
   s as IressButton,

package/dist/components/Checkbox/Checkbox.styles.js

@@ -16,7 +16,8 @@ const o = r({
     root: {
       color: "colour.primary.fill",
       display: "flex",
-      position: "relative"
+      position: "relative",
+      textStyle: "typography.body.md"
     },
     input: {
       srOnly: !0
@@ -28,7 +29,9 @@ const o = r({
       display: "inline-flex",
       cursor: "pointer"
     },
-    labelSpan: {},
+    labelSpan: {
+      font: "inherit"
+    },
     mark: {
       color: "[currentColor]",
       marginInlineEnd: "spacing.2",

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

@@ -5,9 +5,9 @@ const e = r({
     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})]",
+      width: "[1.4em]",
+      minWidth: "[1.4em]",
+      height: "[1.4em]",
       borderWidth: "1px",
       borderStyle: "solid",
       borderColor: "colour.neutral.70",

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-mmhMLwp9.js";
+import { I as ne } from "../../Button-B4nt3P1v.js";
 import "../Button/CloseButton/CloseButton.js";
 import { useRichSelectState as me } from "../RichSelect/hooks/useRichSelectState.js";
-import "../../Autocomplete-C5ubHBTi.js";
+import "../../Autocomplete-BQ_YPb5A.js";
 import "../RichSelect/SelectBody/SelectBody.styles.js";
 import { GlobalCSSClass as pe } from "../../enums.js";
 import { useIdIfNeeded as le } from "../../hooks/useIdIfNeeded.js";

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-mmhMLwp9.js";
+import { I as i } from "../../../Button-B4nt3P1v.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/Input/Input.js

@@ -13,7 +13,7 @@ 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 "../../Button-B4nt3P1v.js";
 import { IressCloseButton as Z } from "../Button/CloseButton/CloseButton.js";
 const _ = ({ rows: a, ...f }, S) => {
   const {

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

@@ -1,5 +1,5 @@
 import { s as r } from "../../sva-OmxClA9g.js";
-const t = r({
+const o = r({
   slots: ["root", "wrapper", "inline", "addon", "internal", "formControl"],
   base: {
     wrapper: {
@@ -12,7 +12,6 @@ const t = r({
       flexGrow: "1",
       border: "input",
       "&:has(input:focus, textarea:focus)": {
-        borderColor: "colour.primary.fill",
         layerStyle: "elevation.focus"
       }
     },
@@ -205,5 +204,5 @@ const t = r({
   defaultVariants: {}
 });
 export {
-  t as input
+  o as input
 };

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

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

package/dist/components/Modal/Modal.js

@@ -1,8 +1,8 @@
-import { jsx as n, jsxs as w } from "react/jsx-runtime";
-import { useState as Z, useEffect as N, useMemo as oo } from "react";
-import "../../Button-mmhMLwp9.js";
+import { jsx as n, jsxs as N } from "react/jsx-runtime";
+import { useState as Z, useEffect as w, useMemo as oo } from "react";
+import "../../Button-B4nt3P1v.js";
 import { IressCloseButton as eo } from "../Button/CloseButton/CloseButton.js";
-import { u as to, b as ro, c as so, d as no, e as ao, F as io, f as lo, g as co } from "../../floating-ui.react-BetVZ099.js";
+import { u as to, b as so, c as ro, d as no, e as ao, F as io, f as lo, g as co } from "../../floating-ui.react-BetVZ099.js";
 import { idsLogger as mo } from "../../helpers/utility/idsLogger.js";
 import { propagateTestid as l } from "../../helpers/utility/propagateTestid.js";
 import { useIdIfNeeded as fo } from "../../hooks/useIdIfNeeded.js";
@@ -33,80 +33,81 @@ const Ro = ({
   onStatus: b,
   onTransitionEnd: _,
   show: c,
+  size: $ = "md",
   static: a,
-  style: $,
+  style: G,
   ...m
 }) => {
-  const [G, L] = Z(E);
+  const [L, U] = Z(E);
   let y = 240;
-  const s = go(m.id), F = fo({ id: m.id }), f = `${F}--heading`, U = s.opened || c || G, I = (o) => {
-    s.show(o), L(o), R?.(o);
+  const r = go(m.id), F = fo({ id: m.id }), f = `${F}--heading`, q = r.opened || c || L, I = (o) => {
+    r.show(o), U(o), R?.(o);
   }, { context: e } = to({
-    open: U,
+    open: q,
     onOpenChange: I
-  }), q = ro(e, {
+  }), z = so(e, {
     enabled: !B,
     outsidePress: (o) => !o.target.closest(`.${p.Toaster}`),
     outsidePressEvent: "mousedown"
-  }), z = so(e), A = no([q, z]);
+  }), A = ro(e), H = no([z, A]);
   e.refs.floating.current && (y = yo(
     e.refs.floating.current,
     1.2,
     240
   ));
-  const { isMounted: H, status: i } = ao(e, {
+  const { isMounted: J, status: i } = ao(e, {
     duration: {
       close: y
     }
-  }), r = ho({
+  }), s = ho({
     fixedFooter: T,
+    size: $,
     static: a,
     status: i
-  }), [J, K] = bo(m), { p: v = "lg", width: Q = "overlay.md", ...V } = J;
-  N(() => {
-    s.opened && c && mo(
+  }), [K, Q] = bo(m), { p: x = "lg", ...V } = K;
+  w(() => {
+    r.opened && c && mo(
       "IressModal: Please use either IressModalProvider for uncontrolled components, or the show prop for controlled components, rather than both. If you use both, the open state of the modal will become unpredictable. If you want to show a modal by default in uncontrolled mode, use the defaultShow prop."
     );
-  }, [s.opened, c]), N(() => {
+  }, [r.opened, c]), w(() => {
     b?.(i);
   }, [i, b]);
-  const x = oo(() => typeof d == "string" ? /* @__PURE__ */ n(
+  const M = oo(() => typeof d == "string" ? /* @__PURE__ */ n(
     po,
     {
-      className: r.header,
+      className: s.header,
       id: f,
       element: "h2",
       "data-testid": l(t, "heading"),
       children: d
     }
-  ) : d, [t, f, d, r.header]), W = (o) => {
+  ) : d, [t, f, d, s.header]), W = (o) => {
     _?.(o), !(!(o.propertyName === "opacity" || !o.propertyName) || o.target !== o.currentTarget) && (i === "open" ? (D?.(), a || e.refs.floating?.current?.focus()) : i === "close" && O?.());
   };
-  if (!H) return null;
-  const M = /* @__PURE__ */ n(
+  if (!J) return null;
+  const v = /* @__PURE__ */ n(
     io,
     {
-      className: C(k, r.backdrop, p.ModalBackdrop),
+      className: C(k, s.backdrop, p.ModalBackdrop),
       "data-testid": l(t, "backdrop"),
       lockScroll: !a,
-      style: $,
+      style: G,
       children: /* @__PURE__ */ n(
         lo,
         {
           context: e,
           initialFocus: e.refs.floating,
           disabled: a,
-          children: /* @__PURE__ */ w(
+          children: /* @__PURE__ */ N(
             u.div,
             {
               ref: (o) => e.refs.setFloating(o),
-              className: C(r.modal, uo(), p.Modal),
+              className: C(s.modal, uo(), p.Modal),
               id: F,
               "data-testid": t,
-              "aria-labelledby": x ? f : void 0,
-              ...A.getFloatingProps(K),
+              "aria-labelledby": M ? f : void 0,
+              ...H.getFloatingProps(Q),
               ...V,
-              w: Q,
               onTransitionEnd: W,
               children: [
                 !j && /* @__PURE__ */ n(
@@ -114,18 +115,18 @@ const Ro = ({
                   {
                     onClick: () => I(!1),
                     screenreaderText: S,
-                    className: r.closeButton,
+                    className: s.closeButton,
                     "data-testid": l(t, "close-button__button")
                   }
                 ),
-                /* @__PURE__ */ w(
+                /* @__PURE__ */ N(
                   u.div,
                   {
-                    className: r.content,
+                    className: s.content,
                     "data-testid": l(t, "content"),
-                    p: v,
+                    p: x,
                     children: [
-                      x,
+                      M,
                       P
                     ]
                   }
@@ -133,9 +134,9 @@ const Ro = ({
                 h && /* @__PURE__ */ n(
                   u.div,
                   {
-                    className: r.footer,
+                    className: s.footer,
                     "data-testid": l(t, "footer"),
-                    p: v,
+                    p: x,
                     children: h
                   }
                 )
@@ -145,8 +146,8 @@ const Ro = ({
         }
       )
     }
-  ), X = g ?? s?.container;
-  return a && !X ? M : /* @__PURE__ */ n(co, { root: g ?? s?.container, children: M });
+  ), X = g ?? r?.container;
+  return a && !X ? v : /* @__PURE__ */ n(co, { root: g ?? r?.container, children: v });
 };
 export {
   Ro as IressModal

package/dist/components/Modal/Modal.styles.js

@@ -73,6 +73,29 @@ const o = [
         }
       }
     },
+    /**
+     * Size of the modal
+     * - `sm`: Small modals communicate the outcome of an irreversible action. They should be concise and straightforward, containing a single action and, in some cases, a single input field.
+     * - `md`: Medium modals provide optional supporting information to help users understand the context of a word or screen. They may contain a single action and, in some cases, a larger input such as a textarea.
+     * - `lg`: Large modals are used for more complex tasks that require multiple steps or a lot of information as well as media such as video and PDF documents. They can contain multiple actions, inputs, and supporting information.
+     */
+    size: {
+      sm: {
+        modal: {
+          width: "overlay.sm"
+        }
+      },
+      md: {
+        modal: {
+          width: "overlay.md"
+        }
+      },
+      lg: {
+        modal: {
+          width: "overlay.lg"
+        }
+      }
+    },
     /**
      * The state of the modal.
      */

package/dist/components/Provider/Provider.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "../Modal/Modal.styles.js";
 import "react";
-import "../../Button-mmhMLwp9.js";
+import "../../Button-B4nt3P1v.js";
 import "../Button/CloseButton/CloseButton.js";
 import "../Modal/hooks/useModal.js";
 import "../Modal/ModalProvider.js";
@@ -14,7 +14,7 @@ import "../../index-aTLA1VIV.js";
 import "../Slideout/hooks/useSlideout.js";
 import "../Slideout/SlideoutProvider.js";
 import "react-dom";
-import { I as h } from "../../Provider-BPeo5YfI.js";
+import { I as h } from "../../Provider-CDIbqQK0.js";
 export {
   h as IressProvider
 };

package/dist/components/Provider/index.js

@@ -1,4 +1,4 @@
-import { I as o } from "../../Provider-BPeo5YfI.js";
+import { I as o } from "../../Provider-CDIbqQK0.js";
 export {
   o as IressProvider
 };