@iress-oss/ids-components 6.0.0-alpha.12 → 6.0.0-alpha.14

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

@@ -1,4 +1,4 @@
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { jsx as s, jsxs as l } from "react/jsx-runtime";
 import { c as p } from "../../../cx-DN21T1EH.js";
 import { richSelect as d } from "../RichSelect.styles.js";
 import { forwardRef as f, useRef as u, useImperativeHandle as I } from "react";
@@ -8,7 +8,7 @@ import "../../Menu/MenuDivider/MenuDivider.js";
 import "../../Menu/MenuItem/MenuItem.js";
 import { IressMenuHeading as g } from "../../Menu/MenuText/MenuText.js";
 import { GlobalCSSClass as a } from "../../../enums.js";
-import { I as y } from "../../../Button-ZGbOkyOo.js";
+import { I as h } from "../../../Button-BTkololu.js";
 import "../../Button/CloseButton/CloseButton.js";
 import "../../Popover/Popover.js";
 import "../../Popover/Popover.styles.js";
@@ -16,22 +16,22 @@ import "../../Popover/InputPopover/InputPopover.js";
 import "../../Popover/hooks/useFloatingPopover.js";
 import { usePopoverItem as v } from "../../Popover/hooks/usePopoverItem.js";
 import "../../Inline/Inline.styles.js";
-import { IressInline as h } from "../../Inline/Inline.js";
-const l = d(), S = f(
-  (o, i) => {
-    const e = u(null), { isActiveInPopover: r, ...t } = v("", {
-      onKeyDown: o.onKeyDown
+import { IressInline as y } from "../../Inline/Inline.js";
+const c = d(), S = f(
+  (r, i) => {
+    const e = u(null), { isActiveInPopover: o, ...t } = v("", {
+      onKeyDown: r.onKeyDown
     });
     return I(i, () => e.current), /* @__PURE__ */ s(
-      y,
+      h,
       {
-        ...o,
+        ...r,
         ...t,
         className: p(
-          l.dropdownClear,
+          c.dropdownClear,
           a.RichSelectClearButton
         ),
-        active: r,
+        active: o,
         mode: "tertiary",
         ref: (n) => {
           e.current = n, t?.ref?.(e.current);
@@ -40,31 +40,31 @@ const l = d(), S = f(
     );
   }
 ), w = ({
-  children: o,
+  children: r,
   className: i,
   clearAll: e,
-  onClearAll: r,
-  textStyle: t = "typography.body.lg.strong",
+  onClearAll: o,
+  textStyle: t = "typography.heading.4",
   ...n
 }) => /* @__PURE__ */ s(
   g,
   {
     ...n,
     className: p(
-      l.dropdownSelectedHeading,
+      c.dropdownSelectedHeading,
       i,
       a.RichSelectHeading
     ),
     role: void 0,
     textStyle: t,
-    children: /* @__PURE__ */ c(h, { horizontalAlign: "between", verticalAlign: "middle", children: [
-      o,
+    children: /* @__PURE__ */ l(y, { horizontalAlign: "between", verticalAlign: "middle", children: [
+      r,
       e && /* @__PURE__ */ s(
         S,
         {
-          onClick: r,
+          onClick: o,
           onKeyDown: (m) => {
-            m.key === "Enter" && (m.preventDefault(), r?.(m));
+            m.key === "Enter" && (m.preventDefault(), o?.(m));
           },
           children: typeof e == "boolean" ? "Clear all" : e
         }

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

@@ -21,7 +21,7 @@ import "../../Popover/Popover.styles.js";
 import "../../Popover/InputPopover/InputPopover.js";
 import { usePopover as V } from "../../Popover/hooks/usePopover.js";
 import "../../Popover/hooks/useFloatingPopover.js";
-import { I as G } from "../../../Button-ZGbOkyOo.js";
+import { I as G } from "../../../Button-BTkololu.js";
 import "../../Button/CloseButton/CloseButton.js";
 import { IressIcon as R } from "../../Icon/Icon.js";
 import "../../Icon/Icon.styles.js";

package/dist/components/SkipLink/SkipLink.js

@@ -1,6 +1,6 @@
 import { jsx as p } from "react/jsx-runtime";
 import { forwardRef as t } from "react";
-import { I as m } from "../../Button-ZGbOkyOo.js";
+import { I as m } from "../../Button-BTkololu.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-ZGbOkyOo.js";
+import "../../../Button-BTkololu.js";
 import { IressCloseButton as j } from "../../Button/CloseButton/CloseButton.js";
 import { slideout as v } from "../Slideout.styles.js";
 import { s as f } from "../../../factory-CsinCTPr.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-gmMGso0u.js";
+import { t as p } from "../../../index-Bm5rQqn5.js";
 import { useBreakpoint as S } from "../../../hooks/useBreakpoint.js";
 function h({
   element: r,

package/dist/components/Stack/Stack.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { PositiveSpacingToken, HorizontalAligns, IressStyledProps, ResponsiveProp } from '../../types';
+import { PositiveSpacingToken, HorizontalAligns, VerticalAligns, IressStyledProps, ResponsiveProp } from '../../types';
 export type IressStackProps<E extends keyof React.JSX.IntrinsicElements = 'div'> = IressStyledProps<E> & {
     /**
      * Content to be separated by a gutter.
@@ -19,6 +19,10 @@ export type IressStackProps<E extends keyof React.JSX.IntrinsicElements = 'div'>
      * Sets the horizontal alignment of the stack content.
      */
     horizontalAlign?: HorizontalAligns;
+    /**
+     * Sets the vertical alignment of the stack content.
+     */
+    verticalAlign?: Omit<VerticalAligns, 'stretch'> | 'between' | 'around' | 'evenly';
 };
 export declare const IressStack: {
     <E extends keyof React.JSX.IntrinsicElements = "div">({ className, element, ...restProps }: IressStackProps<E>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Stack/Stack.styles.d.ts

@@ -10,4 +10,24 @@ export declare const stack: import('../../styled-system/types').RecipeRuntimeFn<
             alignItems: "flex-end";
         };
     };
+    verticalAlign: {
+        top: {
+            justifyContent: "flex-start";
+        };
+        middle: {
+            justifyContent: "center";
+        };
+        bottom: {
+            justifyContent: "flex-end";
+        };
+        between: {
+            justifyContent: "space-between";
+        };
+        around: {
+            justifyContent: "space-around";
+        };
+        evenly: {
+            justifyContent: "space-evenly";
+        };
+    };
 }>;

package/dist/components/Stack/Stack.styles.js

@@ -1,5 +1,5 @@
-import { c as e } from "../../cva-DtPMccE9.js";
-const i = e({
+import { c as t } from "../../cva-DtPMccE9.js";
+const n = t({
   base: {
     display: "flex",
     flexDirection: "column",
@@ -19,9 +19,29 @@ const i = e({
       right: {
         alignItems: "flex-end"
       }
+    },
+    verticalAlign: {
+      top: {
+        justifyContent: "flex-start"
+      },
+      middle: {
+        justifyContent: "center"
+      },
+      bottom: {
+        justifyContent: "flex-end"
+      },
+      between: {
+        justifyContent: "space-between"
+      },
+      around: {
+        justifyContent: "space-around"
+      },
+      evenly: {
+        justifyContent: "space-evenly"
+      }
     }
   }
 });
 export {
-  i as stack
+  n as stack
 };

package/dist/components/TabSet/TabSet.styles.js

@@ -44,7 +44,7 @@ const e = t({
       top: "spacing.2",
       bottom: "spacing.2",
       left: "[0]",
-      bg: "colour.primary.surfaceHover",
+      bg: "colour.neutral.20",
       transition: "all",
       borderRadius: "radius.system.button",
       pointerEvents: "none"

package/dist/components/Tag/Tag.d.ts

@@ -1,10 +1,14 @@
-import { FocusEvent, ReactNode, SyntheticEvent } from 'react';
-import { IressTextProps } from '../Text';
-export interface IressTagProps extends Omit<IressTextProps<'span'>, 'element'> {
+import { MouseEventHandler, FocusEvent, ReactNode, SyntheticEvent } from 'react';
+import { IressStyledProps } from '../../types';
+interface TagBaseProps {
     /**
      * Contents of the tag.
      */
     children?: ReactNode;
+    /**
+     * If true, reduces the padding and height of the tag. Useful when used inside an input component.
+     */
+    compact?: boolean;
     /**
      * You can completely replace the delete button to provide your own functionality.
      * When this is provided, `deleteButtonText` will not be used and `onDelete` and `onDeleteButtonBlur` will not be called.
@@ -23,7 +27,26 @@ export interface IressTagProps extends Omit<IressTextProps<'span'>, 'element'> {
      */
     onDeleteButtonBlur?: (e: FocusEvent<HTMLButtonElement>) => void;
 }
+/**
+ * Props for IressTag when onClick is provided (renders as button)
+ */
+type ClickableTagProps = Omit<IressStyledProps<'button'>, 'onClick'> & TagBaseProps & {
+    /**
+     * Callback triggered when the tag is clicked.
+     * If this prop is provided, the tag will render as a `<button>` element with hover styles to indicate it is clickable.
+     */
+    onClick: MouseEventHandler<HTMLButtonElement>;
+};
+/**
+ * Props for IressTag when onClick is not provided (renders as span)
+ */
+type StaticTagProps = IressStyledProps<'span'> & TagBaseProps & {
+    onClick?: never;
+};
+export type IressTagProps = ClickableTagProps | StaticTagProps;
 export declare const IressTag: {
-    ({ children, className, "data-testid": dataTestId, deleteButton, deleteButtonText, onDelete, onDeleteButtonBlur, ...restProps }: IressTagProps): import("react/jsx-runtime").JSX.Element;
+    (props: StaticTagProps): React.JSX.Element;
+    (props: ClickableTagProps): React.JSX.Element;
     displayName: string;
 };
+export {};

package/dist/components/Tag/Tag.js

@@ -1,46 +1,63 @@
-import { jsxs as f, jsx as e } from "react/jsx-runtime";
-import { useRef as d } from "react";
-import { propagateTestid as u } from "../../helpers/utility/propagateTestid.js";
-import "../../Button-ZGbOkyOo.js";
-import { IressCloseButton as x } from "../Button/CloseButton/CloseButton.js";
-import { IressText as g } from "../Text/Text.js";
-import { tag as C } from "./Tag.styles.js";
-import { c as T } from "../../cx-DN21T1EH.js";
-import { GlobalCSSClass as N } from "../../enums.js";
-const b = ({
-  children: a,
-  className: n,
-  "data-testid": o,
+import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import { useRef as B, useMemo as D } from "react";
+import { propagateTestid as P } from "../../helpers/utility/propagateTestid.js";
+import "../../Button-BTkololu.js";
+import { IressCloseButton as j } from "../Button/CloseButton/CloseButton.js";
+import { tag as l } from "./Tag.styles.js";
+import { c as w } from "../../css-DNdLYQld.js";
+import { c as C } from "../../cx-DN21T1EH.js";
+import { GlobalCSSClass as I } from "../../enums.js";
+import { s as p } from "../../factory-CsinCTPr.js";
+import { s as R } from "../../is-valid-prop-DweT-eOL.js";
+const c = ({
+  children: i,
+  className: u,
+  compact: o,
+  "data-testid": r,
   deleteButton: s,
-  deleteButtonText: m = "Delete",
-  onDelete: l,
-  onDeleteButtonBlur: i,
-  ...c
+  deleteButtonText: f = "Delete",
+  onClick: t,
+  onDelete: a,
+  onDeleteButtonBlur: d,
+  ...b
 }) => {
-  const r = d(null), t = C({ customDeleteButton: !!s });
-  return /* @__PURE__ */ f(
-    g,
+  const n = B(null), m = l({
+    customDeleteButton: !!s,
+    clickable: !!t,
+    compact: o
+  }), y = l.raw({
+    customDeleteButton: !!s,
+    clickable: !!t,
+    compact: o
+  }), g = !!(a ?? s), [x, T] = R(b), N = D(() => t ? p.button : p.span, [t]);
+  return /* @__PURE__ */ h(
+    N,
     {
-      className: T(n, t.root, N.Tag),
-      "data-testid": o,
-      element: "span",
-      ...c,
+      className: C(
+        u,
+        w(y.root, x),
+        I.Tag
+      ),
+      "data-testid": r,
+      ...t ? { onClick: t, type: "button" } : {},
+      ...T,
       children: [
-        /* @__PURE__ */ e("span", { ref: r, className: t.content, children: a }),
-        /* @__PURE__ */ e("span", { className: t.deleteButton, children: s ?? /* @__PURE__ */ e(
-          x,
+        /* @__PURE__ */ e("span", { ref: n, className: m.content, children: i }),
+        g && /* @__PURE__ */ e("span", { className: m.deleteButton, children: s ?? /* @__PURE__ */ e(
+          j,
           {
-            "data-testid": u(o, "delete-button__button"),
-            onBlur: i,
-            onClick: (p) => l?.(r.current?.textContent ?? "", p),
-            screenreaderText: m
+            "data-testid": P(r, "delete-button__button"),
+            onBlur: d,
+            onClick: (S) => a?.(n.current?.textContent ?? "", S),
+            screenreaderText: f
           }
         ) })
       ]
     }
   );
 };
-b.displayName = "IressTag";
+c.displayName = "IressTag";
+const K = c;
 export {
-  b as IressTag
+  K as IressTag
 };

package/dist/components/Tag/Tag.styles.d.ts

@@ -8,6 +8,31 @@ export declare const tag: import('../../styled-system/types').SlotRecipeRuntimeF
             };
         };
     };
+    clickable: {
+        true: {
+            root: {
+                _hover: {
+                    bg: "colour.primary.surface";
+                    borderColor: "colour.primary.fill";
+                    color: "colour.primary.text";
+                    cursor: "pointer";
+                };
+                _active: {
+                    boxShadow: "color-mix(in srgb, {colors.colour.primary.surface}, transparent 60%) 0px 0px 0px 3px";
+                };
+            };
+        };
+    };
+    compact: {
+        true: {
+            root: {
+                height: "[calc({sizes.input.height} - {spacing.spacing.2} - 2px)]";
+                py: "none";
+                px: "xs";
+                textStyle: "typography.body.sm";
+            };
+        };
+    };
     customDeleteButton: {
         true: {
             root: {

package/dist/components/Tag/Tag.styles.js

@@ -1,5 +1,5 @@
-import { s as o } from "../../sva-B7kca5XO.js";
-const t = o({
+import { s as r } from "../../sva-B7kca5XO.js";
+const t = r({
   slots: ["root", "content", "deleteButton"],
   base: {
     root: {
@@ -7,25 +7,27 @@ const t = o({
       bg: "colour.neutral.20",
       border: "divider",
       borderRadius: "radius.system.badge",
+      color: "colour.neutral.80",
       display: "inline-flex",
       gap: "spacing.1",
-      px: "xs",
-      transition: "colors"
-    },
-    content: {
-      lineHeight: 1
+      py: "xs",
+      px: "sm",
+      transition: "[all .2s]",
+      textStyle: "typography.body.md"
     },
     deleteButton: {
+      my: "-spacing.1",
+      mr: "-spacing.1",
       "& button": {
         color: "[inherit]",
         fontSize: "inherit",
         minWidth: "[0]",
         minHeight: "[0]",
-        py: "spacing.0",
-        px: "spacing.0",
-        mx: "spacing.1",
-        _after: {
-          display: "none"
+        p: "spacing.1",
+        m: "spacing.0",
+        _hover: {
+          bg: "transparent",
+          borderColor: "transparent"
         }
       }
     }
@@ -40,6 +42,31 @@ const t = o({
         }
       }
     },
+    clickable: {
+      true: {
+        root: {
+          _hover: {
+            bg: "colour.primary.surface",
+            borderColor: "colour.primary.fill",
+            color: "colour.primary.text",
+            cursor: "pointer"
+          },
+          _active: {
+            boxShadow: "color-mix(in srgb, {colors.colour.primary.surface}, transparent 60%) 0px 0px 0px 3px"
+          }
+        }
+      }
+    },
+    compact: {
+      true: {
+        root: {
+          height: "[calc({sizes.input.height} - {spacing.spacing.2} - 2px)]",
+          py: "none",
+          px: "xs",
+          textStyle: "typography.body.sm"
+        }
+      }
+    },
     customDeleteButton: {
       true: {
         root: {

package/dist/components/Tag/TagInput/TagInput.js

@@ -1,103 +1,106 @@
-import { jsxs as h, jsx as d } from "react/jsx-runtime";
+import { jsxs as h, jsx as c } from "react/jsx-runtime";
 import { forwardRef as b, useState as z, useCallback as F } from "react";
 import { IressInput as G } from "../../Input/Input.js";
 import "../../Input/Input.styles.js";
 import { useControlledState as H } from "../../../hooks/useControlledState.js";
 import { getValueAsEvent as p } from "../../../helpers/form/getValueAsEvent.js";
-import { IressTag as y } from "../Tag.js";
+import { IressTag as I } from "../Tag.js";
 import { propagateTestid as v } from "../../../helpers/utility/propagateTestid.js";
 import "../../Inline/Inline.styles.js";
 import { IressInline as J } from "../../Inline/Inline.js";
 import { tagInput as L } from "./TagInput.styles.js";
 const w = ({
-  "data-testid": o,
-  onTagDelete: c,
+  "data-testid": l,
+  onTagDelete: d,
   onTagDeleteAll: i,
   onTagDeleteButtonBlur: u,
-  selectedOptionsTagText: n,
-  tags: r = [],
+  selectedOptionsTagText: r,
+  tags: n = [],
   tagLimit: m = 5
-}) => r.length ? r.length <= m ? r.map((l) => /* @__PURE__ */ d(
-  y,
+}) => n.length ? n.length <= m ? n.map((s) => /* @__PURE__ */ c(
+  I,
   {
-    deleteButtonText: `Delete ${l}`,
-    onDelete: c,
+    deleteButtonText: `Delete ${s}`,
+    onDelete: d,
     onDeleteButtonBlur: u,
-    "data-testid": v(o, "tag"),
-    ml: "xs",
-    children: l
+    "data-testid": v(l, "tag"),
+    compact: !0,
+    my: "spacing.1",
+    mr: "spacing.1",
+    children: s
   },
-  l
+  s
 )) : /* @__PURE__ */ h(
-  y,
+  I,
   {
     onDelete: i,
     onDeleteButtonBlur: u,
-    "data-testid": v(o, "tag"),
-    ml: "xs",
-    py: "none",
+    "data-testid": v(l, "tag"),
+    compact: !0,
+    my: "spacing.1",
+    mr: "spacing.1",
     children: [
-      String(r.length) || "0",
+      String(n.length) || "0",
       " ",
-      n
+      r
     ]
   }
 ) : null;
 w.displayName = "Tags";
 const M = b(
   ({
-    className: o,
-    defaultValue: c,
+    className: l,
+    defaultValue: d,
     name: i,
     onBlur: u,
-    onChange: n,
-    onExistingTag: r,
+    onChange: r,
+    onExistingTag: n,
     onKeyDown: m,
-    onTagDelete: l,
+    onTagDelete: s,
     onTagDeleteAll: B,
-    onTagDeleteButtonBlur: x,
-    selectedOptionsTagText: k = "selected",
-    style: j,
+    onTagDeleteButtonBlur: k,
+    selectedOptionsTagText: j = "selected",
+    style: x,
     tagLimit: A = 5,
     width: N = "100%",
     value: S,
     ...f
   }, E) => {
-    const [D, g] = z(""), { value: a, setValue: s } = H({
+    const [y, g] = z(""), { value: a, setValue: o } = H({
       component: "IressTagInput",
-      defaultValue: c,
+      defaultValue: d,
       value: S
-    }), K = L(), I = F(
+    }), K = L(), D = F(
       (e = "") => {
         if (!e)
           return;
         if (a?.includes(e)) {
-          r?.(e);
+          n?.(e);
           return;
         }
         const t = [...a ?? [], e];
-        n?.(p(t), t), s(t);
+        r?.(p(t), t), o(t);
       },
-      [n, r, s, a]
+      [r, n, o, a]
     ), V = (e) => {
-      u?.(e), I(e.currentTarget.value), g("");
+      u?.(e), D(e.currentTarget.value), g("");
     }, q = (e) => {
-      if (m?.(e), e.key === "Backspace" && !D) {
+      if (m?.(e), e.key === "Backspace" && !y) {
         const t = a?.slice(0, -1);
-        n?.(p(t), t), s(t);
+        r?.(p(t), t), o(t);
       } else if (e.key === "Enter") {
         const t = e.currentTarget;
-        t.value && (e.preventDefault(), I(t.value), g(""));
+        t.value && (e.preventDefault(), D(t.value), g(""));
       }
     }, Q = (e, t) => {
-      t.stopPropagation(), l?.(e, t);
+      t.stopPropagation(), s?.(e, t);
       const T = a?.filter(($) => $ !== e);
-      n?.(p(T), T), s(T);
+      r?.(p(T), T), o(T);
     }, R = (e, t) => {
-      t.stopPropagation(), B?.(e, t), n?.(p([]), []), s([]);
+      t.stopPropagation(), B?.(e, t), r?.(p([]), []), o([]);
     };
-    return /* @__PURE__ */ h(J, { gap: "sm", className: o, style: j, children: [
-      /* @__PURE__ */ d(
+    return /* @__PURE__ */ h(J, { gap: "sm", className: l, style: x, children: [
+      /* @__PURE__ */ c(
         G,
         {
           ...f,
@@ -105,24 +108,24 @@ const M = b(
           onBlur: V,
           onChange: (e) => g(e.currentTarget.value),
           onKeyDown: q,
-          prepend: /* @__PURE__ */ d(
+          prepend: /* @__PURE__ */ c(
             w,
             {
               "data-testid": f["data-testid"],
               onTagDelete: Q,
               onTagDeleteAll: R,
-              onTagDeleteButtonBlur: x,
-              selectedOptionsTagText: k,
+              onTagDeleteButtonBlur: k,
+              selectedOptionsTagText: j,
               tags: a ?? [],
               tagLimit: A
             }
           ),
           ref: E,
           width: N,
-          value: D
+          value: y
         }
       ),
-      i && /* @__PURE__ */ d(
+      i && /* @__PURE__ */ c(
         "input",
         {
           type: "hidden",