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

package/dist/{Autocomplete-CLvWVHp6.js → Autocomplete-C5ubHBTi.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-D6AL0bia.js";
+import "./Button-mmhMLwp9.js";
 import "./components/Button/CloseButton/CloseButton.js";
 import "./components/Tag/Tag.styles.js";
 import "./components/Tag/TagInput/TagInput.js";

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

@@ -277,7 +277,10 @@ const h = {}, Z = [
   ...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({
-    active: o ?? G?.isActiveActivator(m.current),
+    active: (
+      // eslint-disable-next-line react-hooks/refs -- ref needed for forwarding
+      o ?? G?.isActiveActivator(m.current)
+    ),
     fluid: x === !0 ? "true" : x,
     inButtonGroup: !!n,
     mode: H,

package/dist/{Provider-BXQiO7Gp.js → Provider-8wS70V56.js}

@@ -1,16 +1,16 @@
-import { jsxs as $, jsx as t } from "react/jsx-runtime";
+import { jsxs as $, jsx as r } from "react/jsx-runtime";
 import "./components/Modal/Modal.styles.js";
 import "react";
-import "./Button-D6AL0bia.js";
+import "./Button-mmhMLwp9.js";
 import "./components/Button/CloseButton/CloseButton.js";
 import "./components/Modal/hooks/useModal.js";
-import { IressModalProvider as a } from "./components/Modal/ModalProvider.js";
+import { IressModalProvider as n } from "./components/Modal/ModalProvider.js";
 import { IressToasterProvider as m } from "./components/Toaster/ToasterProvider.js";
 import "./components/Toaster/hooks/useToaster.js";
 import "./components/Toaster/Toaster.styles.js";
 import "./components/Toaster/components/Toast/Toast.styles.js";
 import "./components/Slideout/Slideout.styles.js";
-import "./index-CvOVcYUc.js";
+import "./index-CZ9ot38T.js";
 import "./components/Slideout/hooks/useSlideout.js";
 import { IressSlideoutProvider as d } from "./components/Slideout/SlideoutProvider.js";
 import { createPortal as y } from "react-dom";
@@ -18,22 +18,22 @@ var o = /* @__PURE__ */ ((e) => (e.Color = "color", e.Dimension = "dimension", e
 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.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, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension;
+o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension, o.Dimension;
 const h = [
   "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
 ];
-o.FontSize, o.FontFamily, o.FontFamily, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography;
+o.FontSize, o.FontFamily, o.FontFamily, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography, o.Typography;
 const z = ({
   children: e,
-  container: r,
+  container: t,
   noDefaultFont: i,
   noIcons: s,
   position: l,
-  ...n
-}) => /* @__PURE__ */ $(a, { container: r, children: [
-  /* @__PURE__ */ t(m, { container: r, position: l, children: /* @__PURE__ */ t(d, { container: r, ...n, children: e }) }),
+  ...a
+}) => /* @__PURE__ */ $(n, { container: t, children: [
+  /* @__PURE__ */ r(m, { container: t, position: l, children: /* @__PURE__ */ r(d, { container: t, ...a, children: e }) }),
   !i && y(
-    h.map((p) => /* @__PURE__ */ t(
+    h.map((p) => /* @__PURE__ */ r(
       "link",
       {
         rel: "stylesheet",
@@ -46,7 +46,7 @@ const z = ({
     "design-system-font"
   ),
   !s && y(
-    /* @__PURE__ */ t(
+    /* @__PURE__ */ r(
       "link",
       {
         rel: "stylesheet",
@@ -60,5 +60,5 @@ const z = ({
 ] });
 export {
   z as I,
-  h as n
+  h as i
 };

package/dist/{TableProvider-_4Whj6P5.js → TableProvider-bdUNuoG-.js}

@@ -1,18 +1,8 @@
 import { jsx as f } from "react/jsx-runtime";
 import * as s from "react";
 import { createContext as g, useMemo as c } from "react";
-import { c as d, a as p, g as b, b as C } from "./composeTableColumnDefs-Hmd6yfdj.js";
+import { c as d, a as p, g as b, b as C } from "./composeTableColumnDefs-BfFBOARB.js";
 import { composeTableInitialSorting as m } from "./components/Table/helpers/composeTableInitialSorting.js";
-/**
-   * react-table
-   *
-   * Copyright (c) TanStack
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE.md file in the root directory of this source tree.
-   *
-   * @license MIT
-   */
 function P(t, e) {
   return t ? y(t) ? /* @__PURE__ */ s.createElement(t, e) : t : null;
 }

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-D6AL0bia.js";
+import { I as E } from "../../Button-mmhMLwp9.js";
 import { IressCloseButton as V } from "../Button/CloseButton/CloseButton.js";
 import "../Inline/Inline.styles.js";
 import { IressInline as $ } from "../Inline/Inline.js";
@@ -77,7 +77,7 @@ const F = {
               className: e.footer,
               "data-testid": h(l["data-testid"], "footer"),
               children: [
-                p && /* @__PURE__ */ t($, { gap: "sm", pb: "spacing.050", children: n?.map((s, T) => /* @__PURE__ */ y(
+                p && /* @__PURE__ */ t($, { gap: "sm", pb: "spacing.1", children: n?.map((s, T) => /* @__PURE__ */ y(
                   E,
                   {
                     ...s,

package/dist/components/Alert/Alert.styles.js

@@ -14,12 +14,12 @@ const e = o({
     alert: {
       display: "flex",
       flexWrap: "nowrap",
-      gap: "spacing.200",
+      gap: "spacing.2",
       boxSizing: "border-box",
-      marginBottom: "spacing.400",
+      marginBottom: "spacing.4",
       borderRadius: "radius.system.form",
-      paddingBlock: "spacing.200",
-      paddingInline: "spacing.300",
+      paddingBlock: "spacing.2",
+      paddingInline: "spacing.3",
       textStyle: "typography.body.md",
       border: "alert",
       height: "auto",
@@ -35,25 +35,25 @@ const e = o({
     },
     heading: {
       display: "inline-block",
-      marginRight: "spacing.100",
+      marginRight: "spacing.1",
       _empty: {
         display: "none"
       },
       _directNestedHeadings: {
-        marginBlock: "spacing.000",
+        marginBlock: "spacing.0",
         textStyle: "typography.body.md.strong"
       }
     },
     children: {
-      marginBlock: "spacing.000",
-      "& > p": { marginBlock: "spacing.000" }
+      marginBlock: "spacing.0",
+      "& > p": { marginBlock: "spacing.0" }
     },
     footer: {
-      paddingBlockStart: "spacing.100"
+      paddingBlockStart: "spacing.1"
     },
     action: {
       minHeight: "[0]",
-      py: "spacing.100",
+      py: "spacing.1",
       _before: {
         bg: "transparent",
         border: "divider",
@@ -72,9 +72,9 @@ const e = o({
     },
     dismiss: {
       marginLeft: "auto",
-      marginTop: "-spacing.200",
-      marginRight: "-spacing.300",
-      marginBottom: "-spacing.200"
+      marginTop: "-spacing.2",
+      marginRight: "-spacing.3",
+      marginBottom: "-spacing.2"
     }
   },
   variants: {
@@ -187,7 +187,7 @@ const e = o({
           borderBottomLeftRadius: "radius.000",
           borderWidth: "[0]",
           borderLeftWidth: "[2.5px]",
-          paddingBlock: "spacing.400"
+          paddingBlock: "spacing.4"
         }
       },
       "site-wide": {

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-CLvWVHp6.js";
+import { a as R } from "../../Autocomplete-C5ubHBTi.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-D6AL0bia.js";
+import "../../Button-mmhMLwp9.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-CLvWVHp6.js";
+import { a as t } from "../../Autocomplete-C5ubHBTi.js";
 import { autoComplete as m } from "./Autocomplete.styles.js";
 import { useAutocompleteSearch as a } from "./hooks/useAutocompleteSearch.js";
 export {

package/dist/components/Badge/Badge.styles.js

@@ -19,8 +19,8 @@ const r = o({
       alignItems: "center",
       justifyContent: "center",
       borderRadius: "radius.system.badge",
-      paddingBlock: "spacing.100",
-      paddingInline: "spacing.100",
+      paddingBlock: "spacing.1",
+      paddingInline: "spacing.1",
       "& > span": {
         lineHeight: 1,
         display: "inline-block"
@@ -36,8 +36,8 @@ const r = o({
       true: {
         badge: {
           position: "absolute",
-          insetBlockStart: "spacing.000",
-          insetInlineEnd: "spacing.000",
+          insetBlockStart: "spacing.0",
+          insetInlineEnd: "spacing.0",
           zIndex: "100",
           transformOrigin: "100% 0",
           borderRadius: "radius.100",

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-D6AL0bia.js";
+import { I as B } from "../../Button-mmhMLwp9.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-D6AL0bia.js";
+import { I as e } from "../../../Button-mmhMLwp9.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-D6AL0bia.js";
+import { I as s, b as r } from "../../Button-mmhMLwp9.js";
 import { IressCloseButton as n } from "./CloseButton/CloseButton.js";
 export {
   s as IressButton,

package/dist/components/Card/Card.styles.js

@@ -11,7 +11,7 @@ const e = t({
       textStyle: "typography.body.md.regular",
       textAlign: "start",
       noGutter: !0,
-      padding: "spacing.400",
+      padding: "spacing.4",
       transition: "all",
       _focus: {
         layerStyle: "elevation.focus"
@@ -19,14 +19,14 @@ const e = t({
     },
     prepend: {
       gridArea: "prepend",
-      padding: "spacing.400"
+      padding: "spacing.4"
     },
     heading: {
       gridArea: "heading",
-      padding: "spacing.400",
+      padding: "spacing.4",
       "& > h1:not([class]), & > h2:not([class]), & > h3:not([class]), & > h4:not([class]), & > h5:not([class]), & > h6:not([class])": {
         textStyle: "typography.heading.4",
-        mb: "spacing.000"
+        mb: "spacing.0"
       },
       "& a": {
         color: "colour.primary.text",
@@ -38,11 +38,11 @@ const e = t({
     },
     topRight: {
       gridArea: "topRight",
-      padding: "spacing.200"
+      padding: "spacing.2"
     },
     media: {
       gridArea: "media",
-      padding: "spacing.000",
+      padding: "spacing.0",
       borderRadius: "radius.system.layout",
       overflow: "hidden",
       "& img": {
@@ -57,11 +57,11 @@ const e = t({
     },
     body: {
       gridArea: "body",
-      padding: "spacing.400"
+      padding: "spacing.4"
     },
     footer: {
       gridArea: "footer",
-      padding: "spacing.400",
+      padding: "spacing.4",
       borderBlockStart: "divider"
     }
   },
@@ -123,7 +123,7 @@ const e = t({
           gridTemplateAreas: '"prepend body topRight" "footer footer footer"',
           gridAutoColumns: "[minmax(0, min-content) auto min-content]",
           gridAutoRows: "[auto min-content]",
-          padding: "spacing.000"
+          padding: "spacing.0"
         }
       }
     },
@@ -136,7 +136,7 @@ const e = t({
     hasMedia: {
       true: {
         root: {
-          padding: "spacing.000"
+          padding: "spacing.0"
         }
       }
     }
@@ -153,11 +153,11 @@ const e = t({
         },
         heading: {
           "&:not(:last-child)": {
-            paddingBlockEnd: "spacing.200"
+            paddingBlockEnd: "spacing.2"
           }
         },
         body: {
-          paddingBlockStart: "spacing.000"
+          paddingBlockStart: "spacing.0"
         }
       }
     },
@@ -170,7 +170,7 @@ const e = t({
           gridAutoColumns: "[minmax(0, min-content) auto]",
           gridAutoRows: "[min-content auto min-content]",
           position: "relative",
-          padding: "spacing.000"
+          padding: "spacing.0"
         }
       }
     },
@@ -185,7 +185,7 @@ const e = t({
           gridAutoRows: "[min-content min-content auto min-content]"
         },
         topRight: {
-          pt: "spacing.250"
+          pt: "spacing.3"
         }
       }
     },
@@ -194,10 +194,10 @@ const e = t({
       hasPrepend: !0,
       css: {
         heading: {
-          paddingInlineStart: "spacing.000"
+          paddingInlineStart: "spacing.0"
         },
         body: {
-          paddingInlineStart: "spacing.000"
+          paddingInlineStart: "spacing.0"
         }
       }
     }

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

@@ -24,14 +24,14 @@ const o = r({
     label: {
       position: "relative",
       lineHeight: "1.5",
-      margin: "spacing.000",
+      margin: "spacing.0",
       display: "inline-flex",
       cursor: "pointer"
     },
     labelSpan: {},
     mark: {
       color: "[currentColor]",
-      marginInlineEnd: "spacing.200",
+      marginInlineEnd: "spacing.2",
       flexShrink: 0,
       _groupFocusWithin: {
         layerStyle: "elevation.focus"
@@ -45,7 +45,7 @@ const o = r({
           display: "inline-block"
         },
         mark: {
-          marginInlineEnd: "spacing.000"
+          marginInlineEnd: "spacing.0"
         },
         labelSpan: {
           srOnly: !0
@@ -56,7 +56,7 @@ const o = r({
       true: {
         label: {
           position: "relative",
-          padding: "spacing.000",
+          padding: "spacing.0",
           width: "[100%]",
           cursor: "pointer",
           borderRadius: "radius.system.form",
@@ -85,7 +85,7 @@ const o = r({
           borderStyle: "solid",
           borderWidth: "1px",
           borderRadius: "radius.system.form",
-          padding: "spacing.300"
+          padding: "spacing.3"
         }
       }
     },

package/dist/components/CheckboxGroup/CheckboxGroup.styles.js

@@ -3,14 +3,14 @@ const i = a({
   base: {
     display: "flex",
     flexWrap: "wrap",
-    rowGap: "spacing.200"
+    rowGap: "spacing.2"
   },
   variants: {
     layout: {
       block: {
         display: "flex",
         flexWrap: "wrap",
-        rowGap: "spacing.200",
+        rowGap: "spacing.2",
         "& label": {
           display: "flex",
           flexBasis: "[100%]"
@@ -25,7 +25,7 @@ const i = a({
       stack: {
         display: "flex",
         flexWrap: "wrap",
-        rowGap: "spacing.200",
+        rowGap: "spacing.2",
         "& > *": {
           flexBasis: "[100%]"
         }
@@ -34,8 +34,8 @@ const i = a({
         display: "flex",
         flexFlow: "row wrap",
         width: "[100%]",
-        rowGap: "spacing.200",
-        columnGap: "spacing.400"
+        rowGap: "spacing.2",
+        columnGap: "spacing.4"
       }
     },
     readOnly: {
@@ -47,7 +47,7 @@ const i = a({
       readOnly: !0,
       layout: "stack",
       css: {
-        paddingInlineStart: "spacing.400",
+        paddingInlineStart: "spacing.4",
         "& > *": {
           display: "list-item"
         }
@@ -57,7 +57,7 @@ const i = a({
       readOnly: !0,
       layout: "block",
       css: {
-        paddingInlineStart: "spacing.400",
+        paddingInlineStart: "spacing.4",
         "& > *": {
           display: "list-item"
         }
@@ -67,13 +67,13 @@ const i = a({
       readOnly: !0,
       layout: "inline",
       css: {
-        paddingInlineStart: "spacing.400",
+        paddingInlineStart: "spacing.4",
         "& > *": {
           display: "list-item",
-          marginInlineEnd: "spacing.600"
+          marginInlineEnd: "spacing.6"
         },
         "& > *:last-child": {
-          marginInlineEnd: "spacing.000"
+          marginInlineEnd: "spacing.0"
         }
       }
     }

package/dist/components/Container/Container.styles.js

@@ -3,7 +3,7 @@ const n = a({
   base: {
     borderRadius: "radius.system.layout",
     paddingBlock: void 0,
-    paddingInline: "spacing.400",
+    paddingInline: "spacing.4",
     marginInline: "auto",
     width: "[100%]"
   },

package/dist/components/Divider/Divider.styles.js

@@ -4,7 +4,7 @@ const t = r({
     display: "block",
     color: "colour.neutral.30",
     borderColor: "[currentColor]",
-    m: "spacing.000"
+    m: "spacing.0"
   },
   variants: {
     vertical: {

package/dist/components/Expander/Expander.styles.js

@@ -41,7 +41,7 @@ const o = e({
       overflow: "hidden"
     },
     content: {
-      py: "spacing.200"
+      py: "spacing.2"
     }
   },
   variants: {
@@ -53,11 +53,11 @@ const o = e({
           alignItems: "flex-end",
           width: "[100%]",
           textStyle: "typography.heading.4",
-          py: "spacing.300",
+          py: "spacing.3",
           borderBottom: "divider",
           transition: "[all 0.2s ease-in-out]",
           _after: {
-            mr: "spacing.200"
+            mr: "spacing.2"
           },
           _hover: {
             color: "colour.primary.text",

package/dist/components/Field/Field.styles.js

@@ -21,18 +21,18 @@ const o = e({
     },
     hint: {
       color: "colour.neutral.70",
-      mb: "spacing.100",
+      mb: "spacing.1",
       textStyle: "typography.body.sm"
     },
     footer: {
       textStyle: "typography.body.sm.regular",
-      mt: "spacing.100"
+      mt: "spacing.1"
     },
     supplementary: {
       fontSize: "inherit"
     },
     label: {
-      mb: "spacing.100"
+      mb: "spacing.1"
     },
     labelContainer: {},
     fieldContainer: {}
@@ -45,7 +45,7 @@ const o = e({
           gridTemplateColumns: "auto 1fr",
           gridTemplateRows: "auto auto",
           gridTemplateAreas: '"label field" ". footer"',
-          columnGap: "spacing.200",
+          columnGap: "spacing.2",
           alignItems: "center"
         },
         labelContainer: {
@@ -57,7 +57,7 @@ const o = e({
         },
         footer: {
           gridArea: "footer",
-          mt: "spacing.100"
+          mt: "spacing.1"
         },
         label: {
           mb: "none"
@@ -76,7 +76,7 @@ const o = e({
     hasHint: {
       true: {
         label: {
-          mb: "spacing.000"
+          mb: "spacing.0"
         }
       }
     },
@@ -117,10 +117,10 @@ const o = e({
         },
         footer: {
           position: "absolute",
-          left: "spacing.000",
-          right: "spacing.000",
+          left: "spacing.0",
+          right: "spacing.0",
           top: "[100%]",
-          mt: "spacing.100"
+          mt: "spacing.1"
         }
       }
     }

package/dist/components/Field/FieldGroup/FieldGroup.styles.js

@@ -8,16 +8,16 @@ const o = e({
       mb: "field.footer",
       position: "relative",
       border: "[none]",
-      margin: "spacing.000",
-      padding: "spacing.000"
+      margin: "spacing.0",
+      padding: "spacing.0"
     },
     hint: {
       color: "colour.neutral.70",
       textStyle: "typography.body.sm"
     },
     legend: {
-      mb: "spacing.100",
-      px: "spacing.000",
+      mb: "spacing.1",
+      px: "spacing.0",
       float: "start",
       "& + *": {
         clear: "left"
@@ -28,7 +28,7 @@ const o = e({
       flexDirection: "column",
       _nestedFormLabels: {
         color: "colour.neutral.70",
-        mb: "spacing.050"
+        mb: "spacing.1"
       }
     }
   },

package/dist/components/Field/components/FieldHint.js

@@ -42,7 +42,7 @@ const v = ({
       {
         name: "info-circle",
         screenreaderText: "More information",
-        ml: "spacing.100"
+        ml: "spacing.1"
       }
     )
   }