@iress-oss/ids-components 6.0.1 → 6.2.0

package/dist/components/Select/components/SelectOptions.d.ts

@@ -1,11 +1,11 @@
 import { IressSelectProps, SelectOptionsRenderProps } from '../Select';
-interface SelectOptionsProps<TMultiple extends boolean = false> extends Pick<IressSelectProps<TMultiple, false>, 'autoHighlight' | 'minSearchLength' | 'multiSelect' | 'onChange' | 'options' | 'renderOptions' | 'initialOptions'>, Omit<SelectOptionsRenderProps<TMultiple>, 'close' | 'handleClear' | 'handleMenuChange'> {
+interface SelectOptionsProps<TMultiple extends boolean = false> extends Pick<IressSelectProps<TMultiple, false>, 'autoHighlight' | 'errorText' | 'minSearchLength' | 'multiSelect' | 'onChange' | 'options' | 'renderOptions' | 'initialOptions'>, Omit<SelectOptionsRenderProps<TMultiple>, 'close' | 'handleClear' | 'handleMenuChange'> {
     setShow: (show: boolean) => void;
     shouldShowInstructions?: boolean;
     shouldShowNoResults?: boolean;
 }
 export declare const SelectOptions: {
-    <TMultiple extends boolean = false>({ autoHighlight, debouncedQuery, error, initialOptions: initialOptionsProp, loading, minSearchLength, multiSelect, onChange, options, query, renderOptions, results, setQuery, setShow, setValue, show, shouldShowInstructions, shouldShowNoResults, value, }: SelectOptionsProps<TMultiple>): string | number | bigint | boolean | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+    <TMultiple extends boolean = false>({ autoHighlight, debouncedQuery, error, errorText, initialOptions: initialOptionsProp, loading, minSearchLength, multiSelect, onChange, options, query, renderOptions, results, setQuery, setShow, setValue, show, shouldShowInstructions, shouldShowNoResults, value, }: SelectOptionsProps<TMultiple>): string | number | bigint | boolean | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
     displayName: string;
 };
 export {};

package/dist/components/Select/components/SelectOptions.js

@@ -1,149 +1,168 @@
-import { toArray as e } from "../../../helpers/formatting/toArray.js";
-import { IressAlert as t } from "../../Alert/Alert.js";
-import { getValueAsEvent as n } from "../../../helpers/form/getValueAsEvent.js";
-import { IressMenuDivider as r } from "../../Menu/MenuDivider/MenuDivider.js";
-import { toPrimitiveValue as i } from "../helpers/toPrimitiveValue.js";
-import { IressSelectSearch as a } from "../SelectSearch/SelectSearch.js";
-import { IressSelectHeading as o } from "../SelectHeading/SelectHeading.js";
-import { IressSelectMenu as s } from "../SelectMenu/SelectMenu.js";
-import { IressSelectSearchInput as c } from "../SelectSearchInput/SelectSearchInput.js";
-import { useCallback as l, useEffect as u, useId as d, useRef as f } from "react";
-import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { IressText as e } from "../../Text/Text.js";
+import { IressSpinner as t } from "../../Spinner/Spinner.js";
+import { toArray as n } from "../../../helpers/formatting/toArray.js";
+import { IressAlert as r } from "../../Alert/Alert.js";
+import { getValueAsEvent as i } from "../../../helpers/form/getValueAsEvent.js";
+import { IressMenuDivider as a } from "../../Menu/MenuDivider/MenuDivider.js";
+import { IressInline as o } from "../../Inline/Inline.js";
+import { toPrimitiveValue as s } from "../helpers/toPrimitiveValue.js";
+import { IressSelectSearch as c } from "../SelectSearch/SelectSearch.js";
+import { IressSelectHeading as l } from "../SelectHeading/SelectHeading.js";
+import { IressSelectMenu as u } from "../SelectMenu/SelectMenu.js";
+import { IressSelectSearchInput as d } from "../SelectSearchInput/SelectSearchInput.js";
+import { useCallback as f, useEffect as p, useId as m, useRef as h } from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/components/Select/components/SelectOptions.tsx
-var g = ({ minSearchLength: e, multiSelect: t, onChange: n, query: r, results: i, shouldShowInstructions: a, shouldShowNoResults: o, value: c }) => /* @__PURE__ */ m(s, {
-	heading: t ? "Search results" : void 0,
-	items: i,
-	multiSelect: t,
+var y = ({ debouncedQuery: e, minSearchLength: t, multiSelect: n, onChange: r, query: i, results: a, shouldShowInstructions: o, shouldShowNoResults: s, value: c }) => /* @__PURE__ */ _(u, {
+	heading: n && a.length && e ? `Search results (${a.length})` : void 0,
+	items: a,
+	multiSelect: n,
 	noResults: (() => {
-		if (r) {
-			if (a) return `Type at least ${e} character${e === 1 ? "" : "s"} to search`;
-			if (o) return "No results found";
+		if (i) {
+			if (o) return `Type at least ${t} character${t === 1 ? "" : "s"} to search`;
+			if (s) return "No results found";
 		}
 	})(),
-	onChange: n,
+	onChange: r,
 	selected: c,
-	hideSelectedItems: t
+	hideSelectedItems: n
 });
-g.displayName = "SelectAsyncResults";
-var _ = ({ error: e }) => e ? /* @__PURE__ */ m(t, {
+y.displayName = "SelectAsyncResults";
+var b = ({ error: e, errorText: t }) => e ? t === void 0 ? /* @__PURE__ */ _(r, {
 	status: "danger",
-	children: typeof e == "string" ? e : /* @__PURE__ */ h(p, { children: [
+	variant: "full-width",
+	mb: "none",
+	children: typeof e == "string" ? e : /* @__PURE__ */ v(g, { children: [
 		"An unknown error occurred.",
-		/* @__PURE__ */ m("br", {}),
+		/* @__PURE__ */ _("br", {}),
 		" Please contact support if the error persists."
 	] })
-}) : null;
-_.displayName = "SelectAsyncError";
-var v = ({ autoHighlight: t, error: n, loading: i, minSearchLength: l, multiSelect: p, onChange: v, onClear: y, query: b, results: x, setQuery: S, show: C, value: w, shouldShowInstructions: T, shouldShowNoResults: E }) => {
-	let D = e(w).map((e) => {
+}) : typeof t == "function" ? t(e) : t : null;
+b.displayName = "SelectAsyncError";
+var x = ({ autoHighlight: r, debouncedQuery: i, error: s, errorText: f, loading: g, minSearchLength: x, multiSelect: S, onChange: C, onClear: w, query: T, results: E, setQuery: D, show: O, value: k, shouldShowInstructions: A, shouldShowNoResults: j }) => {
+	let M = n(k).map((e) => {
 		let { formattedLabel: t, ...n } = e;
 		return n;
-	}), O = !n && (!!x?.length || b && !i), k = !!D.length && p, A = O && k, j = f(null), M = d();
-	u(() => {
-		C || S?.("");
-	}, [C, S]);
-	let N = k ? D.length + 1 : 0;
-	return /* @__PURE__ */ h(a, {
-		activator: /* @__PURE__ */ m(c, {
+	}), N = !s && (!!E?.length || T && !g), P = !!M.length && S, F = N && P, I = h(null), L = m();
+	p(() => {
+		O || D?.("");
+	}, [O, D]);
+	let R = P ? M.length + 1 : 0;
+	return /* @__PURE__ */ v(c, {
+		activator: /* @__PURE__ */ _(d, {
 			"aria-label": "Search",
-			loading: i,
-			onChange: (e) => S?.(e.target.value),
-			ref: j,
+			onChange: (e) => D?.(e.target.value),
+			ref: I,
 			placeholder: "Search and select",
-			value: b
+			value: T
 		}),
-		autoHighlight: t,
-		focusStartIndex: t ? b && O ? N : +!!k : void 0,
+		autoHighlight: r,
+		focusStartIndex: r ? T && N ? R : +!!P : void 0,
 		children: [
-			k && /* @__PURE__ */ m(s, {
-				"aria-labelledby": M,
-				heading: /* @__PURE__ */ m(o, {
+			P && /* @__PURE__ */ _(u, {
+				"aria-labelledby": L,
+				heading: /* @__PURE__ */ _(l, {
 					clearAll: !0,
 					onClearAll: (e) => {
-						y?.(e), j.current?.focus();
+						w?.(e), I.current?.focus();
 					},
-					children: /* @__PURE__ */ h("h2", {
-						id: M,
+					children: /* @__PURE__ */ v("span", {
+						id: L,
 						children: [
 							"Selected (",
-							D.length,
+							M.length,
 							")"
 						]
 					})
 				}),
-				items: D,
-				multiSelect: p,
-				onChange: v,
-				selected: w
+				items: M,
+				multiSelect: S,
+				onChange: C,
+				selected: k
 			}),
-			A && /* @__PURE__ */ m(r, {}),
-			O && /* @__PURE__ */ m(g, {
-				minSearchLength: l,
-				multiSelect: p,
-				onChange: v,
-				query: b,
-				results: x,
-				value: w,
-				shouldShowInstructions: T,
-				shouldShowNoResults: E
+			F && /* @__PURE__ */ _(a, {}),
+			g && !E.length && /* @__PURE__ */ v(o, {
+				gap: "sm",
+				verticalAlign: "middle",
+				p: "spacing.3",
+				children: [/* @__PURE__ */ _(t, { color: "colour.neutral.70" }), /* @__PURE__ */ _(e, {
+					color: "colour.neutral.70",
+					children: "Loading results..."
+				})]
 			}),
-			/* @__PURE__ */ m(_, { error: n })
+			N && /* @__PURE__ */ _(y, {
+				debouncedQuery: i,
+				minSearchLength: x,
+				multiSelect: S,
+				onChange: C,
+				query: T,
+				results: E,
+				value: k,
+				shouldShowInstructions: A,
+				shouldShowNoResults: j
+			}),
+			/* @__PURE__ */ _(b, {
+				error: s,
+				errorText: f
+			})
 		]
 	});
 };
-v.displayName = "SelectAsyncOptions";
-var y = ({ autoHighlight: e, debouncedQuery: t, error: r, initialOptions: a, loading: o, minSearchLength: c, multiSelect: u, onChange: d, options: f, query: p, renderOptions: h, results: g, setQuery: _, setShow: y, setValue: b, show: x, shouldShowInstructions: S, shouldShowNoResults: C, value: w }) => {
-	let T = typeof f == "function", E = a ?? (T ? [] : f), D = g.length ? g : E, O = l((e) => {
+x.displayName = "SelectAsyncOptions";
+var S = ({ autoHighlight: e, debouncedQuery: t, error: n, errorText: r, initialOptions: a, loading: o, minSearchLength: c, multiSelect: l, onChange: d, options: p, query: m, renderOptions: h, results: g, setQuery: v, setShow: y, setValue: b, show: S, shouldShowInstructions: C, shouldShowNoResults: w, value: T }) => {
+	let E = typeof p == "function", D = a ?? (E ? [] : p), O = g.length ? g : D, k = f((e) => {
 		b(e);
-		let t = i(e);
-		d?.(n(t), t, e), u || y(!1);
+		let t = s(e);
+		d?.(i(t), t, e), l || y(!1);
 	}, [
 		y,
 		b,
 		d,
-		u
-	]), k = l((e) => {
+		l
+	]), A = f((e) => {
 		e.stopPropagation();
 		let t = [];
 		b(t);
-		let r = i(t);
-		d?.(n(r), r, t);
+		let n = s(t);
+		d?.(i(n), n, t);
 	}, [b, d]);
 	return h ? h({
 		close: () => y(!1),
 		debouncedQuery: t,
-		error: r,
-		handleClear: k,
-		handleMenuChange: O,
+		error: n,
+		handleClear: A,
+		handleMenuChange: k,
 		loading: o,
-		query: p,
-		results: D,
+		query: m,
+		results: O,
 		setValue: b,
-		setQuery: _,
-		show: x,
-		value: w
-	}) : T ? /* @__PURE__ */ m(v, {
+		setQuery: v,
+		show: S,
+		value: T
+	}) : E ? /* @__PURE__ */ _(x, {
 		autoHighlight: e,
-		error: r,
+		debouncedQuery: t,
+		error: n,
+		errorText: r,
 		loading: o,
 		minSearchLength: c,
-		multiSelect: u,
-		onChange: O,
-		onClear: k,
-		query: p,
+		multiSelect: l,
+		onChange: k,
+		onClear: A,
+		query: m,
 		results: g,
-		setQuery: _,
-		show: x,
-		value: w,
-		shouldShowInstructions: S,
-		shouldShowNoResults: C
-	}) : /* @__PURE__ */ m(s, {
-		items: D,
-		multiSelect: u,
-		onChange: O,
-		selected: w
+		setQuery: v,
+		show: S,
+		value: T,
+		shouldShowInstructions: C,
+		shouldShowNoResults: w
+	}) : /* @__PURE__ */ _(u, {
+		items: O,
+		multiSelect: l,
+		onChange: k,
+		selected: T
 	});
 };
-y.displayName = "SelectOptions";
+S.displayName = "SelectOptions";
 //#endregion
-export { y as SelectOptions };
+export { S as SelectOptions };

package/dist/components/Select/index.js

@@ -6,7 +6,7 @@ import { IressSelectHeading as i } from "./SelectHeading/SelectHeading.js";
 import { IressSelectMenu as a } from "./SelectMenu/SelectMenu.js";
 import { IressSelectSearchInput as o } from "./SelectSearchInput/SelectSearchInput.js";
 import { nativeSelect as s } from "./components/NativeSelect.styles.js";
-import { n as c } from "../../Autocomplete-CuUjmIAw.js";
+import { n as c } from "../../Autocomplete-DKufjQU5.js";
 import { IressSelectBody as l } from "./SelectBody/SelectBody.js";
 import { IressSelectCreate as u } from "./SelectCreate/SelectCreate.js";
 export { c as IressSelect, l as IressSelectBody, u as IressSelectCreate, i as IressSelectHeading, t as IressSelectLabel, a as IressSelectMenu, r as IressSelectSearch, o as IressSelectSearchInput, n as IressSelectTags, s as nativeSelect, e as select };

package/dist/components/Skeleton/Skeleton.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../cx-CZ8IJJTy.js";
+import { t as e } from "../../cx-QcEwjve6.js";
 import { GlobalCSSClass as t } from "../../enums.js";
 import { IressText as n } from "../Text/Text.js";
 import { toCSSLengthValue as r } from "../../helpers/formatting/toCSSLengthValue.js";

package/dist/components/Skeleton/Skeleton.styles.js

@@ -1,4 +1,4 @@
-import { n as e } from "../../cva-BWFp4eLV.js";
+import { n as e } from "../../cva-DcOwIar2.js";
 //#region src/components/Skeleton/Skeleton.styles.ts
 var t = e({
 	base: {

package/dist/components/SkipLink/SkipLink.js

@@ -1,6 +1,6 @@
-import { t as e } from "../../cx-CZ8IJJTy.js";
+import { t as e } from "../../cx-QcEwjve6.js";
 import { GlobalCSSClass as t } from "../../enums.js";
-import { t as n } from "../../Button-bZPKq0ue.js";
+import { t as n } from "../../Button-BY2qzshw.js";
 import { skipLink as r } from "./SkipLink.styles.js";
 import { forwardRef as i } from "react";
 import { jsx as a } from "react/jsx-runtime";

package/dist/components/SkipLink/SkipLink.styles.js

@@ -1,4 +1,4 @@
-import { n as e } from "../../cva-BWFp4eLV.js";
+import { n as e } from "../../cva-DcOwIar2.js";
 //#region src/components/SkipLink/SkipLink.styles.ts
 var t = e({ base: {
 	position: "absolute",

package/dist/components/Slideout/Slideout.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../Slideout-RnRSkJsj.js";
+import { t as e } from "../../Slideout-BOH2gwIN.js";
 export { e as IressSlideout };

package/dist/components/Slideout/Slideout.styles.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../sva-DOLIp5Dd.js";
+import { t as e } from "../../sva-DGhdmNso.js";
 //#region src/components/Slideout/Slideout.styles.ts
 var t = e({
 	slots: [
@@ -33,6 +33,7 @@ var t = e({
 		footer: { borderBlockStart: "divider" },
 		closeButton: {
 			position: "absolute",
+			zIndex: "[1]",
 			insetInlineEnd: "spacing.1",
 			insetBlockStart: "spacing.1"
 		}

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

@@ -1,5 +1,5 @@
-import { n as e } from "../../../is-valid-prop-BoZ7GJt2.js";
-import { t } from "../../../factory-sKbby7-S.js";
+import { n as e } from "../../../is-valid-prop-BVyYPT21.js";
+import { t } from "../../../factory-BKr3zaf6.js";
 import { IressText as n } from "../../Text/Text.js";
 import { propagateTestid as r } from "../../../helpers/utility/propagateTestid.js";
 import { IressCloseButton as i } from "../../Button/CloseButton/CloseButton.js";

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

@@ -1,6 +1,6 @@
 import { GlobalCSSClass as e } from "../../../enums.js";
 import { useBreakpoint as t } from "../../../hooks/useBreakpoint.js";
-import { t as n } from "../../../tokens-CG_Rn1W3.js";
+import { t as n } from "../../../tokens-DQsbW5to.js";
 import { useEffect as r, useRef as i } from "react";
 //#region src/components/Slideout/hooks/usePushElement.tsx
 function a({ element: a, isActive: o, position: s, size: c, status: l, onOpen: u, onClose: d }) {

package/dist/components/Slideout/index.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../Slideout-RnRSkJsj.js";
+import { t as e } from "../../Slideout-BOH2gwIN.js";
 import { slideout as t } from "./Slideout.styles.js";
 import { SlideoutContext as n, useSlideout as r } from "./hooks/useSlideout.js";
 import { IressSlideoutProvider as i } from "./SlideoutProvider.js";

package/dist/components/Slider/Slider.js

@@ -1,6 +1,6 @@
-import { t as e } from "../../cx-CZ8IJJTy.js";
-import { n as t } from "../../is-valid-prop-BoZ7GJt2.js";
-import { t as n } from "../../factory-sKbby7-S.js";
+import { t as e } from "../../cx-QcEwjve6.js";
+import { n as t } from "../../is-valid-prop-BVyYPT21.js";
+import { t as n } from "../../factory-BKr3zaf6.js";
 import { GlobalCSSClass as r } from "../../enums.js";
 import { propagateTestid as i } from "../../helpers/utility/propagateTestid.js";
 import { useControlledState as a } from "../../hooks/useControlledState.js";

package/dist/components/Slider/Slider.styles.js

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

package/dist/components/Slider/components/SliderTicks.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 { propagateTestid as n } from "../../../helpers/utility/propagateTestid.js";
 import { slider as r } from "../Slider.styles.js";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";

package/dist/components/Spinner/Spinner.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../cx-CZ8IJJTy.js";
+import { t as e } from "../../cx-QcEwjve6.js";
 import { GlobalCSSClass as t } from "../../enums.js";
 import { IressIcon as n } from "../Icon/Icon.js";
 import { chatty as r, spinner as i } from "./Spinner.styles.js";

package/dist/components/Spinner/Spinner.styles.js

@@ -1,5 +1,5 @@
-import { n as e } from "../../cva-BWFp4eLV.js";
-import { t } from "../../sva-DOLIp5Dd.js";
+import { n as e } from "../../cva-DcOwIar2.js";
+import { t } from "../../sva-DGhdmNso.js";
 //#region src/components/Spinner/Spinner.styles.ts
 var n = e({
 	base: { boxSizing: "border-box" },

package/dist/components/Stack/Stack.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 { stack as r } from "./Stack.styles.js";
 import { useMemo as i } from "react";

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

@@ -1,4 +1,4 @@
-import { n as e } from "../../cva-BWFp4eLV.js";
+import { n as e } from "../../cva-DcOwIar2.js";
 //#region src/components/Stack/Stack.styles.ts
 var t = e({ base: {
 	display: "flex",

package/dist/components/Styled/Styled.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../factory-sKbby7-S.js";
+import { t as e } from "../../factory-BKr3zaf6.js";
 import { forwardRef as t, useMemo as n } from "react";
 import { jsx as r } from "react/jsx-runtime";
 //#region src/components/Styled/Styled.tsx

package/dist/components/TabSet/Tab/Tab.js

@@ -1,10 +1,10 @@
-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 { idsLogger as r } from "../../../helpers/utility/idsLogger.js";
 import { useIdIfNeeded as i } from "../../../hooks/useIdIfNeeded.js";
 import { focusableElements as a } from "../../../helpers/dom/focusableElements.js";
-import { n as o } from "../../../floating-ui.react-COiJC198.js";
+import { n as o } from "../../../floating-ui.react-TDMXDOBr.js";
 import { TabSetContext as s } from "../TabSetProvider.js";
 import { tab as c } from "./Tab.styles.js";
 import { forwardRef as l, useCallback as u, useContext as d, useEffect as f, useImperativeHandle as p, useLayoutEffect as m, useMemo as h, useRef as g } from "react";

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

@@ -1,4 +1,4 @@
-import { n as e } from "../../../cva-BWFp4eLV.js";
+import { n as e } from "../../../cva-DcOwIar2.js";
 //#region src/components/TabSet/Tab/Tab.styles.ts
 var t = e({
 	base: {

package/dist/components/TabSet/TabSet.d.ts

@@ -3,6 +3,11 @@ import { ReactNode } from 'react';
 import { FormControlValue, IressStyledProps } from '../../types';
 import { IressCustomiseSlot } from '../../interfaces';
 export interface IressTabSetProps extends Omit<IressStyledProps, 'onChange'> {
+    /**
+     * Content rendered alongside the tablist in the tab bar row, but outside the tablist itself.
+     * Useful for placing action buttons (e.g. "Add tab") at the end of the tab bar.
+     */
+    append?: ReactNode;
     /**
      * Content to be displayed inside the IressTabs, usually multiple `IressTab`.
      */
@@ -43,6 +48,6 @@ export interface IressTabSetProps extends Omit<IressStyledProps, 'onChange'> {
     type?: 'primary' | 'secondary';
 }
 export declare const IressTabSet: {
-    ({ children, className, defaultSelected, layout, onChange, panelStyle, selected, tabHolderStyle, type, ...restProps }: IressTabSetProps): import("react/jsx-runtime").JSX.Element;
+    ({ append, children, className, defaultSelected, layout, onChange, panelStyle, selected, tabHolderStyle, type, ...restProps }: IressTabSetProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/TabSet/TabSet.js

@@ -1,8 +1,8 @@
-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 { t as i } from "../../floating-ui.react-COiJC198.js";
+import { t as i } from "../../floating-ui.react-TDMXDOBr.js";
 import { TabSetContext as a, TabSetProvider as o } from "./TabSetProvider.js";
 import { tabSet as s } from "./TabSet.styles.js";
 import { useContext as c, useEffect as l, useLayoutEffect as u, useRef as d, useState as f } from "react";
@@ -38,9 +38,9 @@ var g = (e) => {
 			if (e && i.current) {
 				let t = i.current.parentElement;
 				if (t) {
-					let r = t.getBoundingClientRect(), i = e.getBoundingClientRect();
+					let r = t.getBoundingClientRect(), i = e.getBoundingClientRect(), a = i.left - r.left + t.scrollLeft;
 					n({
-						left: `${i.left - r.left + t.scrollLeft}px`,
+						left: `${a}px`,
 						width: `${i.width}px`
 					});
 				}
@@ -62,18 +62,18 @@ var g = (e) => {
 		ref: i,
 		style: t
 	});
-}, v = ({ children: a, className: c, defaultSelected: u, layout: v = "top-left", onChange: y, panelStyle: b, selected: x, tabHolderStyle: S, type: C, ...w }) => {
-	let [T, E] = f(null), [D, O] = f(!1), [k, A] = f(!1), j = d(null), M = s({
-		layout: v,
-		overflowStart: D,
-		overflowEnd: k,
-		type: C
+}, v = ({ append: a, children: c, className: u, defaultSelected: v, layout: y = "top-left", onChange: b, panelStyle: x, selected: S, tabHolderStyle: C, type: w, ...T }) => {
+	let [E, D] = f(null), [O, k] = f(!1), [A, j] = f(!1), M = d(null), N = s({
+		layout: y,
+		overflowStart: O,
+		overflowEnd: A,
+		type: w
 	});
 	return l(() => {
-		let e = j.current?.querySelector("[role=\"tablist\"]"), t = () => {
+		let e = M.current?.querySelector("[role=\"tablist\"]"), t = () => {
 			if (e) {
 				let { scrollWidth: t, clientWidth: n, scrollLeft: r } = e;
-				t > n ? (O(r > 1), A(r < t - n - 1)) : (O(!1), A(!1));
+				t > n ? (k(r > 1), j(r < t - n - 1)) : (k(!1), j(!1));
 			}
 		};
 		t(), e?.addEventListener("scroll", t);
@@ -81,40 +81,44 @@ var g = (e) => {
 		return e && typeof ResizeObserver < "u" && (n = new ResizeObserver(t), n.observe(e)), () => {
 			e?.removeEventListener("scroll", t), n?.disconnect();
 		};
-	}, [a]), /* @__PURE__ */ m(o, {
-		defaultSelected: u,
-		onChange: y,
-		panel: T,
-		selected: x,
-		type: C,
+	}, [c]), /* @__PURE__ */ m(o, {
+		defaultSelected: v,
+		onChange: b,
+		panel: E,
+		selected: S,
+		type: w,
 		children: /* @__PURE__ */ m(t.div, {
-			className: e(c, M.root, n.TabSet),
-			...w,
-			children: a && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ h(t.div, {
-				...S,
-				ref: j,
-				className: e(M.listHolder, S?.className),
+			className: e(u, N.root, n.TabSet),
+			...T,
+			children: c && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ h(t.div, {
+				...C,
+				ref: M,
+				className: e(N.listHolder, C?.className),
 				children: [
-					D && /* @__PURE__ */ m("div", { className: M.overflowStartIndicator }),
-					k && /* @__PURE__ */ m("div", { className: M.overflowEndIndicator }),
+					O && /* @__PURE__ */ m("div", { className: N.overflowStartIndicator }),
+					A && /* @__PURE__ */ m("div", { className: N.overflowEndIndicator }),
 					/* @__PURE__ */ h(i, {
 						render: /* @__PURE__ */ m("div", {
-							className: M.list,
+							className: N.list,
 							role: "tablist"
 						}),
 						loop: !1,
 						children: [
-							/* @__PURE__ */ m(_, { className: M.activeIndicator }),
-							/* @__PURE__ */ m(g, { className: M.hoverIndicator }),
-							a
+							/* @__PURE__ */ m(_, { className: N.activeIndicator }),
+							/* @__PURE__ */ m(g, { className: N.hoverIndicator }),
+							c
 						]
+					}),
+					a && /* @__PURE__ */ m("div", {
+						className: N.append,
+						children: a
 					})
 				]
 			}), /* @__PURE__ */ m(t.div, {
-				...b,
-				className: e(M.panel, b?.className),
-				"data-testid": b?.["data-testid"] ?? r(w["data-testid"], "panel"),
-				ref: E
+				...x,
+				className: e(N.panel, x?.className),
+				"data-testid": x?.["data-testid"] ?? r(T["data-testid"], "panel"),
+				ref: D
 			})] })
 		})
 	});

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

@@ -1,4 +1,4 @@
-export declare const tabSet: import('../../styled-system/types').SlotRecipeRuntimeFn<"list" | "root" | "hoverIndicator" | "panel" | "listHolder" | "activeIndicator" | "overflowEndIndicator" | "overflowStartIndicator", {
+export declare const tabSet: import('../../styled-system/types').SlotRecipeRuntimeFn<"append" | "list" | "root" | "hoverIndicator" | "panel" | "listHolder" | "activeIndicator" | "overflowEndIndicator" | "overflowStartIndicator", {
     layout: {
         'top-left': {
             list: {