@iress-oss/ids-components 6.0.1 → 6.2.0

package/dist/patterns/DropdownMenu/DropdownMenu.js

@@ -1,155 +1,167 @@
-import { t as e } from "../../css-D3KwXbP0.js";
-import { t } from "../../cx-CZ8IJJTy.js";
-import { n } from "../../is-valid-prop-BoZ7GJt2.js";
-import { GlobalCSSClass as r } from "../../enums.js";
-import { IressIcon as i } from "../../components/Icon/Icon.js";
-import { t as a } from "../../Button-bZPKq0ue.js";
+import { t as e } from "../../css-R34N3rft.js";
+import { t } from "../../cx-QcEwjve6.js";
+import { n } from "../../is-valid-prop-BVyYPT21.js";
+import { GlobalCSSClass as ee } from "../../enums.js";
+import { IressIcon as r } from "../../components/Icon/Icon.js";
+import { t as i } from "../../Button-BY2qzshw.js";
+import { IressText as a } from "../../components/Text/Text.js";
 import { propagateTestid as o } from "../../helpers/utility/propagateTestid.js";
-import { toArray as s } from "../../helpers/formatting/toArray.js";
-import { useControlledState as c } from "../../hooks/useControlledState.js";
-import { useIdIfNeeded as ee } from "../../hooks/useIdIfNeeded.js";
-import { IressPopover as l } from "../../components/Popover/Popover.js";
-import { usePopoverItem as u } from "../../components/Popover/hooks/usePopoverItem.js";
-import { t as d } from "../../useAutocompleteSearch-BJ_hhoKp.js";
-import { IressDivider as f } from "../../components/Divider/Divider.js";
-import { IressSelectMenu as p } from "../../components/Select/SelectMenu/SelectMenu.js";
-import { IressSelectSearchInput as m } from "../../components/Select/SelectSearchInput/SelectSearchInput.js";
-import { IressStyled as h } from "../../components/Styled/Styled.js";
-import { dropdownMenu as g } from "./DropdownMenu.styles.js";
-import { useDropdownMenuFlags as te } from "./hooks/useDropdownMenuFlags.js";
-import { forwardRef as _, useImperativeHandle as v, useMemo as y, useRef as b, useState as x } from "react";
-import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
+import { IressSpinner as s } from "../../components/Spinner/Spinner.js";
+import { toArray as c } from "../../helpers/formatting/toArray.js";
+import { useControlledState as l } from "../../hooks/useControlledState.js";
+import { useIdIfNeeded as u } from "../../hooks/useIdIfNeeded.js";
+import { IressPopover as d } from "../../components/Popover/Popover.js";
+import { usePopoverItem as f } from "../../components/Popover/hooks/usePopoverItem.js";
+import { t as te } from "../../useAutocompleteSearch-BYzUn7Ag.js";
+import { IressDivider as ne } from "../../components/Divider/Divider.js";
+import { IressInline as re } from "../../components/Inline/Inline.js";
+import { IressSelectMenu as ie } from "../../components/Select/SelectMenu/SelectMenu.js";
+import { IressSelectSearchInput as ae } from "../../components/Select/SelectSearchInput/SelectSearchInput.js";
+import { IressStyled as p } from "../../components/Styled/Styled.js";
+import { dropdownMenu as m } from "./DropdownMenu.styles.js";
+import { useDropdownMenuFlags as h } from "./hooks/useDropdownMenuFlags.js";
+import { forwardRef as g, useImperativeHandle as _, useMemo as v, useRef as y, useState as b } from "react";
+import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
 //#region src/patterns/DropdownMenu/DropdownMenu.tsx
-var T = g.raw(), E = g(), D = _((e, t) => {
-	let n = b(null), { isActiveInPopover: r, ...i } = u();
-	return v(t, () => n.current), /* @__PURE__ */ C(a, {
+var oe = m.raw(), w = m(), se = g((e, t) => {
+	let n = y(null), { isActiveInPopover: ee, ...r } = f();
+	return _(t, () => n.current), /* @__PURE__ */ S(i, {
 		...e,
-		...i,
-		className: E.reset,
+		...r,
+		className: w.reset,
 		mode: "quaternary",
 		ref: (e) => {
-			n.current = e, i?.ref?.(n.current);
+			n.current = e, r?.ref?.(n.current);
 		}
 	});
-}), O = _(({ activatorStyle: a = {}, align: u = "bottom-start", container: g, className: _, "data-testid": O, defaultSelected: ne, debounceThreshold: re, footer: ie, header: ae, label: k, id: oe, initialOptions: se, inputProps: ce = {
+}), T = g(({ activatorStyle: i = {}, align: f = "bottom-start", container: m, className: g, "data-testid": T, defaultSelected: ce, debounceThreshold: le, footer: ue, header: de, label: E, id: fe, initialOptions: pe, loadingDelay: D, inputProps: O = {
 	clearable: !0,
-	prepend: /* @__PURE__ */ C(i, { name: "search" })
-}, limitDesktop: le = 12, limitMobile: A = 6, multiSelect: j, onChange: M, onReset: N, options: P, searchable: F, searchNoResultsText: I, selected: L, selectedOptionsText: R = " ({{numOptions}})", visibleResetButton: z, ...B }, V) => {
-	let H = ee({ id: oe }), U = `${H}-sr-text`, W = b(null), G = y(() => F ?? typeof P == "function", [P, F]), ue = {
+	prepend: /* @__PURE__ */ S(r, { name: "search" })
+}, limitDesktop: k = 12, limitMobile: A = 6, multiSelect: j, onChange: M, onReset: N, options: P, searchable: F, searchNoResultsText: I, selected: L, selectedOptionsText: R = " ({{numOptions}})", visibleResetButton: z, ...B }, me) => {
+	let V = u({ id: fe }), H = `${V}-sr-text`, U = y(null), W = v(() => F ?? typeof P == "function", [P, F]), he = {
 		clearable: !0,
-		prepend: /* @__PURE__ */ C(i, { name: "search" }),
-		...ce
-	}, { value: K, setValue: de } = c({
+		prepend: /* @__PURE__ */ S(r, { name: "search" }),
+		...O
+	}, { value: G, setValue: K } = l({
 		component: "IressDropdownMenu",
-		defaultValue: ne,
+		defaultValue: ce,
 		value: L
-	}), [fe, q] = x(""), [J, Y] = x(!1), [pe, me] = y(() => n(B), [B]), [he, ge] = y(() => n(a), [a]), _e = (e) => {
+	}), [ge, q] = b(""), [J, Y] = b(!1), [_e, ve] = v(() => n(B), [B]), [ye, be] = v(() => n(i), [i]), xe = (e) => {
 		q(e.target.value);
-	}, ve = () => {
+	}, Se = () => {
 		q("");
-	}, ye = (e) => {
-		e && (M?.(e), de(e), j || Y(!1));
-	}, be = () => {
-		N?.(), j || Y(!1);
+	}, Ce = (e) => {
+		e && (M?.(e), K(e), j || Y(!1));
+	}, X = () => {
+		K(void 0), N?.(), j || Y(!1);
 	};
-	v(V, () => ({
-		...W.current,
+	_(me, () => ({
+		...U.current,
 		clearSearch: () => q("")
 	}));
-	let { debouncedQuery: xe, loading: X, results: Z, shouldShowInstructions: Q, shouldShowDebounceWaiting: Se, shouldShowNoResults: Ce } = d({
-		debounceThreshold: re,
-		initialOptions: se ?? (typeof P == "function" ? void 0 : P),
+	let { debouncedQuery: we, loading: Z, results: Q, shouldShowInstructions: Te, shouldShowDebounceWaiting: Ee, shouldShowNoResults: De } = te({
+		debounceThreshold: le,
+		initialOptions: pe ?? (typeof P == "function" ? void 0 : P),
+		loadingDelay: D,
 		options: P,
-		query: fe
-	}), $ = te({
-		debouncedQuery: xe,
-		loading: X,
-		results: Z,
-		searchable: G,
-		shouldShowInstructions: Q,
-		shouldShowDebounceWaiting: Se,
-		shouldShowNoResults: Ce,
+		query: ge
+	}), $ = h({
+		debouncedQuery: we,
+		loading: Z,
+		results: Q,
+		searchable: W,
+		shouldShowInstructions: Te,
+		shouldShowDebounceWaiting: Ee,
+		shouldShowNoResults: De,
 		visibleResetButton: z
-	}), we = y(() => {
-		let e = s(K);
-		return j ? /* @__PURE__ */ w(S, { children: [k, R.replace("{{numOptions}}", e.length.toString())] }) : e[0]?.label ?? k;
+	}), Oe = v(() => {
+		let e = c(G);
+		return j ? /* @__PURE__ */ C(x, { children: [E, R.replace("{{numOptions}}", e.length.toString())] }) : e[0]?.label ?? E;
 	}, [
-		K,
+		G,
 		j,
-		k,
+		E,
 		R
-	]), Te = y(() => X ? "loading" : J && !Z.length ? I : J && Z.length ? `${Z.length} results` : k, [
-		k,
-		X,
-		Z.length,
+	]), ke = v(() => Z ? "loading" : J && !Q.length ? I : J && Q.length ? `${Q.length} results` : E, [
+		E,
+		Z,
+		Q.length,
 		I,
 		J
 	]);
-	return /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ w(l, {
+	return /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ C(d, {
 		matchActivatorWidth: !0,
-		...me,
-		activator: /* @__PURE__ */ C("button", {
-			...ge,
-			"aria-describedby": U,
-			"data-testid": a?.["data-testid"] ?? o(O, "activator-button__button"),
+		...ve,
+		activator: /* @__PURE__ */ S("button", {
+			...be,
+			"aria-describedby": H,
+			"data-testid": i?.["data-testid"] ?? o(T, "activator-button__button"),
 			onClick: () => Y(!0),
-			className: t(a?.className, e(T.activator, he)),
-			children: we
+			className: t(i?.className, e(oe.activator, ye)),
+			children: Oe
 		}),
-		align: u,
-		className: t(_, e(pe), E.root, r.Filter),
-		container: g,
+		align: f,
+		className: t(g, e(_e), w.root, ee.Filter),
+		container: m,
 		contentStyle: {
-			className: E.popoverContent,
+			className: w.popoverContent,
 			p: "none"
 		},
-		"data-testid": O,
-		id: H,
+		"data-testid": T,
+		id: V,
 		show: J,
 		onActivated: () => Y(!0),
 		onDeactivated: () => Y(!1),
-		ref: W,
+		ref: U,
 		type: "listbox",
 		children: [
-			ae,
-			$.showHeader && /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ w(h, {
-				className: E.searchHeader,
-				children: [G && /* @__PURE__ */ C(m, {
-					...ue,
+			de,
+			$.showHeader && /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ C(p, {
+				className: w.searchHeader,
+				children: [W && /* @__PURE__ */ S(ae, {
+					...he,
 					role: "searchbox",
-					className: E.searchInput,
-					"data-testid": o(O, "input"),
-					loading: X,
-					onChange: _e,
-					onClear: ve
-				}), z && K && /* @__PURE__ */ C(D, {
-					"data-testid": o(O, "reset-button"),
-					onClick: be,
+					className: w.searchInput,
+					"data-testid": o(T, "input"),
+					onChange: xe,
+					onClear: Se
+				}), z && G && /* @__PURE__ */ S(se, {
+					"data-testid": o(T, "reset-button"),
+					onClick: X,
 					children: typeof z == "string" ? z : "Reset filter"
 				})]
-			}), $.showResults && /* @__PURE__ */ C(f, {})] }),
-			$.showResults && /* @__PURE__ */ C(p, {
-				className: E.optionList,
-				"data-testid": o(O, "menu"),
-				items: Z,
-				limitDesktop: le,
+			}), $.showResults && /* @__PURE__ */ S(ne, {})] }),
+			$.showResults && /* @__PURE__ */ S(ie, {
+				className: w.optionList,
+				"data-testid": o(T, "menu"),
+				items: Q,
+				limitDesktop: k,
 				limitMobile: A,
 				multiSelect: j,
-				onChange: ye,
-				selected: K
+				onChange: Ce,
+				selected: G
+			}),
+			$.showLoading && /* @__PURE__ */ C(re, {
+				gap: "sm",
+				verticalAlign: "middle",
+				p: "spacing.3",
+				children: [/* @__PURE__ */ S(s, { color: "colour.neutral.70" }), /* @__PURE__ */ S(a, {
+					color: "colour.neutral.70",
+					children: "Loading results..."
+				})]
 			}),
-			$.showNoResults && /* @__PURE__ */ C("div", {
-				className: E.noResults,
+			$.showNoResults && /* @__PURE__ */ S("div", {
+				className: w.noResults,
 				children: I
 			}),
-			ie
+			ue
 		]
-	}), /* @__PURE__ */ C(h, {
+	}), /* @__PURE__ */ S(p, {
 		srOnly: !0,
-		id: U,
-		children: Te
+		id: H,
+		children: ke
 	})] });
 });
-O.displayName = "IressDropdownMenu";
+T.displayName = "IressDropdownMenu";
 //#endregion
-export { O as IressDropdownMenu };
+export { T as IressDropdownMenu };

package/dist/patterns/DropdownMenu/DropdownMenu.styles.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../sva-DOLIp5Dd.js";
+import { t as e } from "../../sva-DGhdmNso.js";
 //#region src/patterns/DropdownMenu/DropdownMenu.styles.ts
 var t = e({
 	slots: [

package/dist/patterns/DropdownMenu/hooks/useDropdownMenuFlags.d.ts

@@ -2,6 +2,7 @@ import { AutocompleteSearchHookReturn } from '../../../components/Autocomplete';
 import { IressDropdownMenuProps } from '../DropdownMenu';
 export declare const useDropdownMenuFlags: ({ debouncedQuery, loading, results, searchable, visibleResetButton, }: Omit<AutocompleteSearchHookReturn, "clearError" | "error" | "startSearch" | "stopSearch"> & Pick<IressDropdownMenuProps, "searchable" | "visibleResetButton">) => {
     showHeader: string | boolean | undefined;
+    showLoading: boolean;
     showNoResults: string | false;
     showResults: boolean;
 };

package/dist/patterns/DropdownMenu/hooks/useDropdownMenuFlags.js

@@ -4,6 +4,7 @@ var t = ({ debouncedQuery: t, loading: n, results: r, searchable: i, visibleRese
 	let o = e(() => i || a, [i, a]), s = e(() => !!r.length, [r]);
 	return {
 		showHeader: o,
+		showLoading: e(() => n && !r.length, [n, r.length]),
 		showNoResults: e(() => r.length === 0 && !n && t, [
 			t,
 			n,

package/dist/patterns/Form/Form.styles.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../sva-DOLIp5Dd.js";
+import { t as e } from "../../sva-DGhdmNso.js";
 //#region src/patterns/Form/Form.styles.ts
 var t = e({
 	slots: [

package/dist/patterns/Form/FormField/FormFieldset.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { Control, FieldPath, FieldPathValue, FieldValues, UseControllerProps } from 'react-hook-form';
-import { IressFieldGroupProps } from '../../../components/Field';
+import { IressFieldGroupProps } from '../../../components/FieldGroup';
 import { CustomRules } from './helpers/transformCustomRulesToValidateRule';
 import { FormFieldRenderProps } from './FormField';
 export interface IressFormFieldsetProps<T extends FieldValues = FieldValues, TName extends FieldPath<T> = FieldPath<T>> extends Omit<IressFieldGroupProps, 'children' | 'htmlFor' | 'required' | 'join' | 'inline'>, Omit<UseControllerProps<T, FieldPath<T>>, 'disabled'> {

package/dist/patterns/Form/FormField/FormFieldset.js

@@ -1,5 +1,5 @@
 import { FormContext as e } from "../FormContext.js";
-import { IressFieldGroup as t } from "../../../components/Field/FieldGroup/FieldGroup.js";
+import { IressFieldGroup as t } from "../../../components/FieldGroup/FieldGroup.js";
 import { getErrorTypeMessage as n } from "./helpers/getErrorTypeMessage.js";
 import { transformCustomRulesToValidateRule as r } from "./helpers/transformCustomRulesToValidateRule.js";
 import { useFieldRenderProps as i } from "./hooks/useFieldRenderProps.js";

package/dist/patterns/Form/FormField/helpers/getErrorTypeMessage.js

@@ -2,9 +2,9 @@ import { stringReplacer as e } from "../../../../helpers/formatting/stringReplac
 //#region src/patterns/Form/FormField/helpers/getErrorTypeMessage.ts
 var t = /* @__PURE__ */ function(e) {
 	return e.required = "Please fill out this field", e.maxLength = "Please shorten this text to {{attrValue}} characters or less", e.minLength = "Please lengthen this text to {{attrValue}} characters or more", e.max = "Please enter a value less than or equal to {{attrValue}}", e.min = "Please enter a value greater than or equal to {{attrValue}}", e.minDate = "Please enter a date that is on or after {{attrValue}}", e.maxDate = "Please enter a date that is on or before {{attrValue}}", e.pattern = "Please match the requested format", e.email = "Please enter a valid email address", e.validate = "Please enter a valid value", e;
-}({}), n = (n, r, i, a = "") => n || `${a}${r ? e(t[r] ?? t.validate, [{
+}({}), n = (n, r, i, a = "") => n || `${a}${r ? e(t[r] ?? "Please enter a valid value", [{
 	name: "{{attrValue}}",
 	value: String(i?.[r])
-}]) : t.validate}`;
+}]) : "Please enter a valid value"}`;
 //#endregion
 export { t as FormFieldErrorMessages, n as getErrorTypeMessage };

package/dist/patterns/Form/FormField/helpers/transformCustomRulesToValidateRule.js

@@ -5,15 +5,15 @@ var t = ({ email: t, minDate: n, maxDate: r, validate: i, ...a }) => {
 	let o = i ?? {};
 	if (t && (o.email = (e) => {
 		if (!e) return !0;
-		let n = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/, r = typeof t == "string" ? t : !1;
+		let n = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/, r = typeof t == "string" && t;
 		return n.test(e) || r;
 	}), n) {
-		let t = "value" in n ? n.value : n, r = "message" in n ? n.message : !1;
-		o.minDate = (n) => n ? e(n) >= t || r : !0;
+		let t = "value" in n ? n.value : n, r = "message" in n && n.message;
+		o.minDate = (n) => !n || e(n) >= t || r;
 	}
 	if (r) {
-		let t = "value" in r ? r.value : r, n = "message" in r ? r.message : !1;
-		o.maxDate = (r) => r ? e(r) <= t || n : !0;
+		let t = "value" in r ? r.value : r, n = "message" in r && r.message;
+		o.maxDate = (r) => !r || e(r) <= t || n;
 	}
 	return {
 		...a,

package/dist/patterns/Form/FormValidationSummary/FormValidationSummary.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../../factory-sKbby7-S.js";
+import { t as e } from "../../../factory-BKr3zaf6.js";
 import { propagateTestid as t } from "../../../helpers/utility/propagateTestid.js";
 import { IressAlert as n } from "../../../components/Alert/Alert.js";
 import { FormContext as r } from "../FormContext.js";
@@ -42,6 +42,7 @@ var c = e("div", { base: {
 			role: "none",
 			status: "danger",
 			variant: g,
+			multiLine: !0,
 			children: /* @__PURE__ */ s(i, {
 				..._,
 				"data-testid": t(u, "messages"),

package/dist/patterns/Form/HookForm/HookForm.js

@@ -1,5 +1,5 @@
-import { t as e } from "../../../cx-CZ8IJJTy.js";
-import { t } from "../../../factory-sKbby7-S.js";
+import { t as e } from "../../../cx-QcEwjve6.js";
+import { t } from "../../../factory-BKr3zaf6.js";
 import { GlobalCSSClass as n } from "../../../enums.js";
 import { propagateTestid as r } from "../../../helpers/utility/propagateTestid.js";
 import { useIdIfNeeded as i } from "../../../hooks/useIdIfNeeded.js";

package/dist/patterns/Form/components/LongForm.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../../cx-CZ8IJJTy.js";
+import { t as e } from "../../../cx-QcEwjve6.js";
 import { IressText as t } from "../../../components/Text/Text.js";
 import { IressPanel as n } from "../../../components/Panel/Panel.js";
 import { IressInline as r } from "../../../components/Inline/Inline.js";
@@ -7,7 +7,7 @@ import { IressHookForm as a } from "../HookForm/HookForm.js";
 import { forwardRef as o, useMemo as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 import { useForm as u } from "react-hook-form";
-var d = o(({ actions: o, alert: d, children: f, className: p, criteriaMode: m, context: h, defaultValues: g, delayError: _, footer: v, heading: y, mode: b = "onBlur", panelStyle: x = { bg: "alt" }, progressive: S, resetOptions: C, resolver: w, reValidateMode: T = "onChange", shouldUseNativeValidation: E, shouldUnregister: D, sticky: O = !1, values: k, ...A }, j) => {
+var d = o(({ actions: o, alert: d, children: f, className: p, criteriaMode: m, context: h, defaultValues: g, delayError: _, footer: v, heading: y, mode: b = "onBlur", panelStyle: x = { p: "spacing.0" }, progressive: S, resetOptions: C, resolver: w, reValidateMode: T = "onChange", shouldUseNativeValidation: E, shouldUnregister: D, sticky: O = !1, values: k, ...A }, j) => {
 	let M = u({
 		criteriaMode: m,
 		context: h,
@@ -40,6 +40,7 @@ var d = o(({ actions: o, alert: d, children: f, className: p, criteriaMode: m, c
 				horizontalAlign: "between",
 				verticalAlign: "bottom",
 				className: N.header,
+				noWrap: !0,
 				children: [P, /* @__PURE__ */ c("div", {
 					className: N.actions,
 					children: o
@@ -48,6 +49,7 @@ var d = o(({ actions: o, alert: d, children: f, className: p, criteriaMode: m, c
 			/* @__PURE__ */ l(n, {
 				...x,
 				className: e(N.children, x.className),
+				noBorder: !0,
 				children: [d, f]
 			}),
 			v && /* @__PURE__ */ c("div", {

package/dist/patterns/Form/components/ShortForm.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../../cx-CZ8IJJTy.js";
+import { t as e } from "../../../cx-QcEwjve6.js";
 import { IressText as t } from "../../../components/Text/Text.js";
 import { form as n } from "../Form.styles.js";
 import { IressHookForm as r } from "../HookForm/HookForm.js";
@@ -22,6 +22,7 @@ var l = i(({ actions: i, alert: l, children: u, className: d, criteriaMode: f, c
 		values: w
 	}), O = n({ pattern: "short" }), k = a(() => typeof g == "string" ? /* @__PURE__ */ o(t, {
 		element: "h2",
+		mb: "spacing.4",
 		children: g
 	}) : g, [g]);
 	return /* @__PURE__ */ s(r, {

package/dist/patterns/Loading/Loading.styles.d.ts

@@ -37,6 +37,9 @@ export declare const loading: import('../../styled-system/types').SlotRecipeRunt
                 opacity: number;
                 transition: "[opacity 0.3s ease-in-out]";
                 zIndex: "100";
+                display: "inline-flex";
+                alignItems: "center";
+                gap: "spacing.2";
             };
             overlay: {
                 position: "absolute";

package/dist/patterns/Loading/Loading.styles.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../sva-DOLIp5Dd.js";
+import { t as e } from "../../sva-DGhdmNso.js";
 //#region src/patterns/Loading/Loading.styles.ts
 var t = e({
 	slots: [
@@ -37,7 +37,10 @@ var t = e({
 					borderRadius: "radius.system.tag",
 					opacity: 0,
 					transition: "[opacity 0.3s ease-in-out]",
-					zIndex: "100"
+					zIndex: "100",
+					display: "inline-flex",
+					alignItems: "center",
+					gap: "spacing.2"
 				},
 				overlay: {
 					position: "absolute",

package/dist/patterns/Loading/components/ComponentLoading.js

@@ -1,7 +1,7 @@
-import { t as e } from "../../../css-D3KwXbP0.js";
-import { t } from "../../../cx-CZ8IJJTy.js";
-import { n } from "../../../is-valid-prop-BoZ7GJt2.js";
-import { t as r } from "../../../factory-sKbby7-S.js";
+import { t as e } from "../../../css-R34N3rft.js";
+import { t } from "../../../cx-QcEwjve6.js";
+import { n } from "../../../is-valid-prop-BVyYPT21.js";
+import { t as r } from "../../../factory-BKr3zaf6.js";
 import { IressSpinner as i } from "../../../components/Spinner/Spinner.js";
 import { IressSkeleton as a } from "../../../components/Skeleton/Skeleton.js";
 import { loading as o } from "../Loading.styles.js";

package/dist/patterns/Loading/components/DefaultLoading.js

@@ -1,5 +1,5 @@
-import { t as e } from "../../../cx-CZ8IJJTy.js";
-import { t } from "../../../factory-sKbby7-S.js";
+import { t as e } from "../../../cx-QcEwjve6.js";
+import { t } from "../../../factory-BKr3zaf6.js";
 import { IressText as n } from "../../../components/Text/Text.js";
 import { IressSpinner as r } from "../../../components/Spinner/Spinner.js";
 import { IressInline as i } from "../../../components/Inline/Inline.js";

package/dist/patterns/Loading/components/LongLoading.js

@@ -1,7 +1,7 @@
-import { t as e } from "../../../css-D3KwXbP0.js";
-import { t } from "../../../cx-CZ8IJJTy.js";
-import { n } from "../../../is-valid-prop-BoZ7GJt2.js";
-import { t as r } from "../../../factory-sKbby7-S.js";
+import { t as e } from "../../../css-R34N3rft.js";
+import { t } from "../../../cx-QcEwjve6.js";
+import { n } from "../../../is-valid-prop-BVyYPT21.js";
+import { t as r } from "../../../factory-BKr3zaf6.js";
 import { IressText as i } from "../../../components/Text/Text.js";
 import { propagateTestid as a } from "../../../helpers/utility/propagateTestid.js";
 import { IressPanel as o } from "../../../components/Panel/Panel.js";

package/dist/patterns/Loading/components/PageLoading.js

@@ -1,9 +1,9 @@
-import { t as e } from "../../../cx-CZ8IJJTy.js";
-import { t } from "../../../factory-sKbby7-S.js";
+import { t as e } from "../../../cx-QcEwjve6.js";
+import { t } from "../../../factory-BKr3zaf6.js";
 import { propagateTestid as n } from "../../../helpers/utility/propagateTestid.js";
 import { IressCard as r } from "../../../components/Card/Card.js";
-import { IressInline as i } from "../../../components/Inline/Inline.js";
-import { IressDivider as a } from "../../../components/Divider/Divider.js";
+import { IressDivider as i } from "../../../components/Divider/Divider.js";
+import { IressInline as a } from "../../../components/Inline/Inline.js";
 import { IressCol as o } from "../../../components/Col/Col.js";
 import { IressContainer as s } from "../../../components/Container/Container.js";
 import { IressStack as c } from "../../../components/Stack/Stack.js";
@@ -75,7 +75,7 @@ var _ = () => /* @__PURE__ */ h(o, {
 				children: [/* @__PURE__ */ h(u, {
 					textStyle: "typography.heading.1",
 					width: "25%"
-				}), /* @__PURE__ */ g(i, {
+				}), /* @__PURE__ */ g(a, {
 					gap: "lg",
 					children: [/* @__PURE__ */ h(u, {
 						textStyle: "typography.heading.4",
@@ -86,7 +86,7 @@ var _ = () => /* @__PURE__ */ h(o, {
 					})]
 				})]
 			}),
-			/* @__PURE__ */ h(a, {}),
+			/* @__PURE__ */ h(i, {}),
 			/* @__PURE__ */ g(l, {
 				gutter: "lg",
 				children: [

package/dist/patterns/Loading/components/StartUpLoading.js

@@ -1,5 +1,5 @@
-import { t as e } from "../../../css-D3KwXbP0.js";
-import { t } from "../../../cx-CZ8IJJTy.js";
+import { t as e } from "../../../css-R34N3rft.js";
+import { t } from "../../../cx-QcEwjve6.js";
 import { IressText as n } from "../../../components/Text/Text.js";
 import { propagateTestid as r } from "../../../helpers/utility/propagateTestid.js";
 import { IressProgress as i } from "../../../components/Progress/Progress.js";

package/dist/patterns/Loading/components/ValidateLoading.js

@@ -1,6 +1,6 @@
-import { t as e } from "../../../cx-CZ8IJJTy.js";
-import { t } from "../../../factory-sKbby7-S.js";
-import { t as n } from "../../../Button-bZPKq0ue.js";
+import { t as e } from "../../../cx-QcEwjve6.js";
+import { t } from "../../../factory-BKr3zaf6.js";
+import { t as n } from "../../../Button-BY2qzshw.js";
 import { loading as r } from "../Loading.styles.js";
 import { useEffect as i, useState as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";

package/dist/patterns/Shadow/Shadow.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../Shadow-OHZiBoEb.js";
+import { t as e } from "../../Shadow-DAfthdT2.js";
 export { e as IressShadow };

package/dist/patterns/Shadow/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../Shadow-OHZiBoEb.js";
+import { t as e } from "../../Shadow-DAfthdT2.js";
 export { e as IressShadow };

package/dist/patterns/SideNav/SideNav.d.ts

@@ -30,6 +30,12 @@ export interface SideNavSideMenuGroup {
     children: SideNavSubItem[];
     /** Whether this drawer is active/expanded. */
     active?: boolean;
+    /** URL for the group activator link. */
+    href?: string;
+    /** Custom element type for third-party routing libraries. */
+    element?: ElementType;
+    /** Optional click handler for the group activator. */
+    onClick?: MouseEventHandler;
 }
 /**
  * A panel content entry — either a flat item or a group of items.