@payfit/unity-components 3.23.14 → 3.23.16

package/dist/esm/ai-kit.js

@@ -17,12 +17,22 @@ import { AIComposerActions as g } from "./modules/ai-kit/components/ai-composer/
 import { AIComposerAlert as _ } from "./modules/ai-kit/components/ai-composer/parts/AIComposerAlert.js";
 import { AIComposerSubmitAction as v } from "./modules/ai-kit/components/ai-composer/parts/AIComposerSubmitAction.js";
 import { AIComposerTextArea as y } from "./modules/ai-kit/components/ai-composer/parts/AIComposerTextArea.js";
-import { useAIKitFieldContext as b, useAIKitFormContext as x } from "./modules/ai-kit/hooks/ai-kit-form-context.js";
-import { aiKitForm as S, useAIKitForm as C } from "./modules/ai-kit/hooks/use-ai-kit-form.js";
-import { AIChatEventFeedback as w } from "./modules/ai-kit/components/aichat-event-feedback/AIChatEventFeedback.js";
-import { AIOutcomeCardIcon as T } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardIcon.js";
-import { AIOutcomeCardTitle as E } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardTitle.js";
-import { AIOutcomeCardDescription as D } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardDescription.js";
-import { AIOutcomeCardActions as O } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardActions.js";
-import { AIOutcomeCardAction as k } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardAction.js";
-export { r as AIButton, w as AIChatEventFeedback, m as AIComposer, h as AIComposerAction, g as AIComposerActions, _ as AIComposerAlert, f as AIComposerAttachment, p as AIComposerAttachmentsGroup, v as AIComposerSubmitAction, y as AIComposerTextArea, k as AIOutcomeCardAction, O as AIOutcomeCardActions, D as AIOutcomeCardDescription, T as AIOutcomeCardIcon, E as AIOutcomeCardTitle, i as AIProposalCard, l as AIProposalCardActions, c as AIProposalCardContent, a as AIProposalCardHeader, o as AIProposalCardSubtitle, s as AIProposalCardTitle, d as AITriggerButton, u as PayfitAIBrand, e as RawAIOutcomeCard, t as aiGradientEffect, n as aiGradientSurfaceEffect, S as aiKitForm, b as useAIKitFieldContext, C as useAIKitForm, x as useAIKitFormContext };
+import { AIStructuredInputStep as b } from "./modules/ai-kit/components/ai-structured-input/parts/AIStructuredInputStep.js";
+import { AIStructuredInput as x } from "./modules/ai-kit/components/ai-structured-input/AIStructuredInput.js";
+import { AIStructuredInputAnswers as S } from "./modules/ai-kit/components/ai-structured-input/parts/AIStructuredInputAnswers.js";
+import { AIStructuredInputAnswer as C } from "./modules/ai-kit/components/ai-structured-input/parts/AIStructuredInputAnswer.js";
+import { AIStructuredInputFreeTextAnswer as w } from "./modules/ai-kit/components/ai-structured-input/parts/AIStructuredInputFreeTextAnswer.js";
+import { AIStructuredInputStepTitle as T } from "./modules/ai-kit/components/ai-structured-input/parts/AIStructuredInputStepTitle.js";
+import { useAIStructuredInputNavigation as E } from "./modules/ai-kit/components/ai-structured-input/hooks/use-ai-structured-input-navigation.js";
+import { useAIKitFieldContext as D, useAIKitFormContext as O } from "./modules/ai-kit/hooks/ai-kit-form-context.js";
+import { aiKitForm as k, useAIKitForm as A } from "./modules/ai-kit/hooks/use-ai-kit-form.js";
+import { AIChatEventFeedback as j } from "./modules/ai-kit/components/aichat-event-feedback/AIChatEventFeedback.js";
+import { AIOutcomeCardIcon as M } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardIcon.js";
+import { AIOutcomeCardTitle as N } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardTitle.js";
+import { AIOutcomeCardDescription as P } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardDescription.js";
+import { AIOutcomeCardActions as F } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardActions.js";
+import { AIOutcomeCardAction as I } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardAction.js";
+import { AIStructuredInputContent as L } from "./modules/ai-kit/components/ai-structured-input/parts/AIStructuredInputContent.js";
+import { AIStructuredInputActions as R } from "./modules/ai-kit/components/ai-structured-input/parts/AIStructuredInputActions.js";
+import { AIStructuredInputHeader as z } from "./modules/ai-kit/components/ai-structured-input/parts/AIStructuredInputHeader.js";
+export { r as AIButton, j as AIChatEventFeedback, m as AIComposer, h as AIComposerAction, g as AIComposerActions, _ as AIComposerAlert, f as AIComposerAttachment, p as AIComposerAttachmentsGroup, v as AIComposerSubmitAction, y as AIComposerTextArea, I as AIOutcomeCardAction, F as AIOutcomeCardActions, P as AIOutcomeCardDescription, M as AIOutcomeCardIcon, N as AIOutcomeCardTitle, i as AIProposalCard, l as AIProposalCardActions, c as AIProposalCardContent, a as AIProposalCardHeader, o as AIProposalCardSubtitle, s as AIProposalCardTitle, x as AIStructuredInput, R as AIStructuredInputActions, C as AIStructuredInputAnswer, S as AIStructuredInputAnswers, L as AIStructuredInputContent, w as AIStructuredInputFreeTextAnswer, z as AIStructuredInputHeader, b as AIStructuredInputStep, T as AIStructuredInputStepTitle, d as AITriggerButton, u as PayfitAIBrand, e as RawAIOutcomeCard, t as aiGradientEffect, n as aiGradientSurfaceEffect, k as aiKitForm, D as useAIKitFieldContext, A as useAIKitForm, O as useAIKitFormContext, E as useAIStructuredInputNavigation };

package/dist/esm/core/components/radio-button-group/parts/RadioButton.js

@@ -1,7 +1,7 @@
 import { Text as e } from "../../text/Text.js";
-import { Flex as t } from "../../flex/Flex.js";
-import { RadioButtonHelper as n } from "./RadioButtonHelper.js";
-import { RadioIndicator as r } from "./RadioIndicator.js";
+import { RadioIndicator as t } from "./RadioIndicator.js";
+import { Flex as n } from "../../flex/Flex.js";
+import { RadioButtonHelper as r } from "./RadioButtonHelper.js";
 import { forwardRef as i, useContext as a } from "react";
 import { uyTv as o } from "@payfit/unity-themes";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
@@ -30,7 +30,7 @@ var f = o({ slots: {
 	]
 } }), p = i(({ children: i, value: o, isDisabled: p, helperText: m, ...h }, g) => {
 	let { base: _, label: v, container: y, radio: b } = f(), x = a(d), S = x?.isReadOnly ? "readonly" : x?.isDisabled || p ? "disabled" : x?.isInvalid ? "invalid" : "enabled";
-	return /* @__PURE__ */ c(t, {
+	return /* @__PURE__ */ c(n, {
 		direction: "col",
 		gap: "50",
 		className: y(),
@@ -39,11 +39,11 @@ var f = o({ slots: {
 			value: o,
 			isDisabled: p,
 			className: "uy:contents",
-			children: ({ isSelected: t }) => /* @__PURE__ */ c(l, {
+			children: ({ isSelected: n }) => /* @__PURE__ */ c(l, {
 				ref: g,
 				className: () => _(),
-				children: [/* @__PURE__ */ s(r, {
-					isSelected: t,
+				children: [/* @__PURE__ */ s(t, {
+					isSelected: n,
 					state: S,
 					className: b()
 				}), /* @__PURE__ */ s(e, {
@@ -52,9 +52,9 @@ var f = o({ slots: {
 					children: i
 				})]
 			})
-		}), m ? /* @__PURE__ */ s(n, { children: m }) : null]
+		}), m ? /* @__PURE__ */ s(r, { children: m }) : null]
 	});
 });
 p.displayName = "RadioButton";
 //#endregion
-export { p as RadioButton, r as RadioIndicator, f as radioButton };
+export { p as RadioButton, t as RadioIndicator, f as radioButton };

package/dist/esm/core/components/select-list/SelectList.context.d.ts

@@ -0,0 +1,9 @@
+export type SelectListIndicatorPosition = 'start' | 'end';
+export type SelectListSelectionMode = 'single' | 'multiple';
+interface SelectListContextValue {
+    selectionMode: SelectListSelectionMode;
+    indicatorPosition: SelectListIndicatorPosition;
+}
+export declare const SelectListContextProvider: import('react').Provider<SelectListContextValue>;
+export declare function useSelectListContext(): SelectListContextValue;
+export {};

package/dist/esm/core/components/select-list/SelectList.context.js

@@ -0,0 +1,11 @@
+import { createContext as e, useContext as t } from "react";
+//#region src/core/components/select-list/SelectList.context.tsx
+var n = e({
+	selectionMode: "multiple",
+	indicatorPosition: "start"
+}), r = n.Provider;
+function i() {
+	return t(n);
+}
+//#endregion
+export { r as SelectListContextProvider, i as useSelectListContext };

package/dist/esm/core/components/select-list/SelectList.d.ts

@@ -1,10 +1,11 @@
 import { JSX, Ref } from 'react';
 import { ListBoxProps as AriaListBoxProps } from 'react-aria-components/ListBox';
+import { SelectListSelectionMode, SelectListIndicatorPosition } from './SelectList.context.js';
 /**
  * Props for the SelectList component.
  * @template TType - The type of items in the list
  */
-export interface SelectListProps<TType extends object = object> extends Omit<AriaListBoxProps<TType>, 'className' | 'style' | 'selectedKeys' | 'onSelectionChange' | 'children'> {
+export interface SelectListProps<TType extends object = object> extends Omit<AriaListBoxProps<TType>, 'className' | 'style' | 'selectedKeys' | 'onSelectionChange' | 'children' | 'selectionMode'> {
     /**
      * An iterable data structure containing items to render in the list.
      */
@@ -22,6 +23,12 @@ export interface SelectListProps<TType extends object = object> extends Omit<Ari
      * @param keys - The new selection as a `Selection` type (Set of keys or "all")
      */
     onChange: AriaListBoxProps<TType>['onSelectionChange'];
+    /**
+     * The type of selection allowed in the list. Omission currently defaults to `multiple`.
+     * In Unity v4, this prop will be required and will have no default.
+     * @default 'multiple'
+     */
+    selectionMode?: SelectListSelectionMode;
     /**
      * Controls whether to display a search input at the top of the list. Set to `true` to always show the search bar, or `false` to never show it. When undefined, the search bar appears automatically when there are 10 or more items.
      * @default undefined - Auto-shows when items >= 10
@@ -42,6 +49,8 @@ export interface SelectListProps<TType extends object = object> extends Omit<Ari
      * Additional CSS classes to apply to the list container. Use this to customize height or other container styles.
      */
     className?: string;
+    /** Additional CSS classes to apply to the outer list wrapper. */
+    wrapperClassName?: string;
     /**
      * Enables selected-first sorting, which moves selected items into a dedicated section at the top of the list. Selected items can be deselected directly from this section.
      * @default false
@@ -52,6 +61,11 @@ export interface SelectListProps<TType extends object = object> extends Omit<Ari
      * @default "Selected"
      */
     selectedSectionLabel?: string;
+    /**
+     * Controls where the selection indicator is rendered in each option.
+     * @default 'start'
+     */
+    indicatorPosition?: SelectListIndicatorPosition;
     /**
      *
      */
@@ -65,7 +79,7 @@ type SelectListComponent = {
 };
 /**
  * Provides a high-performance, accessible list for selecting items with built-in virtualization, search, and sorting capabilities.
- * Use this component to allow users to select one or multiple items from a list of options. The component automatically handles large datasets through virtualization, provides built-in search functionality when needed, and can optionally organize selected items into a dedicated section at the top for better visibility.
+ * Use this component to allow users to select one or multiple items from a list of options. The component automatically handles large datasets through virtualization, provides built-in search functionality when needed, and can optionally organize selected items into a dedicated section at the top for better visibility. Single selection displays radio indicators, multiple selection displays checkbox indicators, and `indicatorPosition` controls where each indicator appears.
  * @param {SelectListProps} props - Regular props from React Aria's ListBox, plus selection, search, and sorting configuration
  * @example
  * ```tsx
@@ -92,11 +106,12 @@ type SelectListComponent = {
  * ```
  * @remarks
  * - List items are automatically virtualized for optimal performance with large datasets (hundreds or thousands of items)
- * - Search bar appears automatically when the list contains 10 or more items, or can be controlled via the `showSearch` prop
+ * - Search bar appears automatically when the list contains 10 or more items; explicitly setting `showSearch` to `false` disables it
  * - Set `sortSelectedFirst` to `true` to move selected items into a dedicated section at the top of the list
  * - The component requires the dynamic API pattern: provide both `items` array and a render function as `children`
  * - Selection state is fully controlled via the `value` and `onChange` props following React's controlled component pattern
  * - Supports both flat item lists and grouped sections using `SelectListOptGroup`
+ * - Use `wrapperClassName` to adjust the outer wrapper when the list is embedded in another component surface.
  * @see {@link SelectListProps} for all available props
  * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/core/components/select-list GitHub}
  * @see Design specs in {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}

package/dist/esm/core/components/select-list/SelectList.js

@@ -1,18 +1,19 @@
-import { VIRTUALIZATION_CONFIG as e } from "./constants.js";
-import { useControlledSelection as t } from "./hooks/useControlledSelection.js";
-import { useSelectedFirstSorting as n } from "./hooks/useSelectedFirstSorting.js";
-import { SelectedItemsSection as r } from "./parts/SelectedItemsSection.js";
-import { SelectListEmptyState as i } from "./parts/SelectListEmptyState.js";
-import { SelectListSearchInput as a } from "./parts/SelectListSearchInput.js";
-import { forwardRef as o, useMemo as s } from "react";
-import { uyTv as c } from "@payfit/unity-themes";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
-import { Separator as f } from "react-aria-components/Separator";
-import { Collection as p, ListBox as m } from "react-aria-components/ListBox";
-import { Autocomplete as h, useFilter as g } from "react-aria-components/Autocomplete";
-import { Virtualizer as _ } from "react-aria-components/Virtualizer";
+import { SelectListContextProvider as e } from "./SelectList.context.js";
+import { VIRTUALIZATION_CONFIG as t } from "./constants.js";
+import { useControlledSelection as n } from "./hooks/useControlledSelection.js";
+import { useSelectedFirstSorting as r } from "./hooks/useSelectedFirstSorting.js";
+import { SelectedItemsSection as i } from "./parts/SelectedItemsSection.js";
+import { SelectListEmptyState as a } from "./parts/SelectListEmptyState.js";
+import { SelectListSearchInput as o } from "./parts/SelectListSearchInput.js";
+import { forwardRef as s, useMemo as c } from "react";
+import { uyTv as l } from "@payfit/unity-themes";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Separator as p } from "react-aria-components/Separator";
+import { Collection as m, ListBox as h } from "react-aria-components/ListBox";
+import { Autocomplete as g, useFilter as _ } from "react-aria-components/Autocomplete";
+import { Virtualizer as v } from "react-aria-components/Virtualizer";
 //#region src/core/components/select-list/SelectList.tsx
-var v = c({ slots: {
+var y = l({ slots: {
 	wrapper: "uy:bg-surface-neutral uy:p-100 uy:overscroll-contain",
 	base: "uy:flex uy:w-full uy:gap-100 uy:h-500 uy:border uy:border-solid uy:rounded-75 uy:py-100 uy:border-border-form-enabled uy:bg-surface-form-enabled uy:px-150 uy:typography-body uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:border-border-form-active",
 	inputContainer: "uy:sticky uy:top-0 uy:bg-surface-neutral",
@@ -20,56 +21,64 @@ var v = c({ slots: {
 	list: "uy:overflow-y-auto uy:mt-100 uy:max-h-[300px]",
 	selectedListBox: "uy:bg-surface-neutral uy:border-b uy:border-border-neutral uy:py-100 uy:data-[empty=true]:border-0 uy:data-[is-last=true]:border-0 uy:data-[is-last=true]:py-0"
 } });
-function y({ items: o, children: c, value: y, onChange: b, className: x, showSearch: S = !1, searchPlaceholder: C, searchAutoFocus: w = !1, sortSelectedFirst: T = !1, selectedSectionLabel: E = "Selected", ...D }, O) {
-	let { contains: k } = g({ sensitivity: "base" }), { wrapper: A, inputContainer: j, list: M, separator: N, selectedListBox: P } = v(), [F, I] = t(y, b), L = s(() => (Array.isArray(o) ? o.length : Array.from(o).length) >= 10 || S, [o, S]), R = n(o, F, T), z = s(() => R.remainingItems ? !R.remainingItems[Symbol.iterator]().next().done : !1, [R.remainingItems]), B = /* @__PURE__ */ u(r, {
-		items: R.selectedItems,
-		selectedKeys: F,
-		onSelectionChange: I,
-		selectionMode: D.selectionMode,
-		selectionBehavior: D.selectionBehavior,
-		label: E,
-		className: P(),
-		"data-is-last": !z
-	}), V = /* @__PURE__ */ u(m, {
-		...D,
-		autoFocus: L && w ? !1 : D.autoFocus,
-		className: M({ className: x }),
-		items: R.remainingItems,
-		selectedKeys: F,
-		onSelectionChange: I,
-		renderEmptyState: i,
-		children: /* @__PURE__ */ u(p, {
-			items: R.remainingItems,
-			children: c
+function b({ items: s, children: l, value: b, onChange: x, className: S, wrapperClassName: C, showSearch: w, searchPlaceholder: T, searchAutoFocus: E = !1, sortSelectedFirst: D = !1, selectedSectionLabel: O = "Selected", selectionMode: k = "multiple", indicatorPosition: A = "start", ...j }, M) {
+	let { contains: N } = _({ sensitivity: "base" }), { wrapper: P, inputContainer: F, list: I, separator: L, selectedListBox: R } = y(), [z, B] = n(b, x), V = c(() => w === void 0 ? (Array.isArray(s) ? s.length : Array.from(s).length) >= 10 : w, [s, w]), H = r(s, z, D), U = c(() => H.remainingItems ? !H.remainingItems[Symbol.iterator]().next().done : !1, [H.remainingItems]), W = /* @__PURE__ */ d(i, {
+		items: H.selectedItems,
+		selectedKeys: z,
+		onSelectionChange: B,
+		selectionMode: k,
+		selectionBehavior: j.selectionBehavior,
+		label: O,
+		className: R(),
+		"data-is-last": !U,
+		children: l
+	}), G = /* @__PURE__ */ d(h, {
+		...j,
+		selectionMode: k,
+		autoFocus: V && E ? !1 : j.autoFocus,
+		className: I({ className: S }),
+		items: H.remainingItems,
+		selectedKeys: z,
+		onSelectionChange: B,
+		renderEmptyState: a,
+		children: /* @__PURE__ */ d(m, {
+			items: H.remainingItems,
+			children: l
 		})
 	});
-	return /* @__PURE__ */ u("div", {
-		ref: O,
-		className: A(),
-		children: L ? /* @__PURE__ */ d(h, {
-			filter: k,
-			children: [
-				/* @__PURE__ */ d("div", {
-					className: j(),
-					"data-dd-privacy": "mask",
-					children: [/* @__PURE__ */ u(a, {
-						placeholder: C,
-						autoFocus: w
-					}), /* @__PURE__ */ u(f, { className: N() })]
-				}),
-				B,
-				z && /* @__PURE__ */ u(_, {
-					...e,
-					children: V
-				})
-			]
-		}) : /* @__PURE__ */ d(l, { children: [B, z && /* @__PURE__ */ u(_, {
-			...e,
-			children: V
-		})] })
+	return /* @__PURE__ */ d(e, {
+		value: {
+			selectionMode: k,
+			indicatorPosition: A
+		},
+		children: /* @__PURE__ */ d("div", {
+			ref: M,
+			className: P({ className: C }),
+			children: V ? /* @__PURE__ */ f(g, {
+				filter: N,
+				children: [
+					/* @__PURE__ */ f("div", {
+						className: F(),
+						"data-dd-privacy": "mask",
+						children: [/* @__PURE__ */ d(o, {
+							placeholder: T,
+							autoFocus: E
+						}), /* @__PURE__ */ d(p, { className: L() })]
+					}),
+					W,
+					U && /* @__PURE__ */ d(v, {
+						...t,
+						children: G
+					})
+				]
+			}) : /* @__PURE__ */ f(u, { children: [W, U && /* @__PURE__ */ d(v, {
+				...t,
+				children: G
+			})] })
+		})
 	});
 }
-var b = o(y);
-b.displayName = "SelectList";
+var x = s(b);
+x.displayName = "SelectList";
 //#endregion
-export { b as SelectList };
+export { x as SelectList };

package/dist/esm/core/components/select-list/hooks/useSelectedFirstSorting.js

@@ -8,14 +8,21 @@ function i(i, a, o) {
 			selectedItems: [],
 			remainingItems: i
 		};
-		if (e(i)) {
-			let e = n(i, s);
+		let r = Array.from(i);
+		if (e(r)) {
+			let e = n(r, s), t = new Set(e.selectedItems.map((e) => e.id));
 			return {
-				selectedItems: e.selectedItems,
+				selectedItems: r.map((e) => {
+					let n = e;
+					return {
+						...n,
+						children: n.children.filter((e) => t.has(e.id))
+					};
+				}).filter((e) => e.children.length > 0),
 				remainingItems: e.remainingSections
 			};
 		} else {
-			let e = t(i, s);
+			let e = t(r, s);
 			return {
 				selectedItems: e.selectedItems,
 				remainingItems: e.remainingItems

package/dist/esm/core/components/select-list/parts/SelectListOption.d.ts

@@ -5,6 +5,8 @@ import { ListBoxItemProps } from 'react-aria-components/ListBox';
  * @template TType - The type of the item this option represents
  */
 export interface SelectListOptionProps<TType extends object> extends Omit<ListBoxItemProps<TType>, 'ref' | 'className' | 'style'> {
+    /** Adds or overrides styles on the option container. */
+    className?: string;
     /**
      * The content to display for this option. Typically a text label or rich content.
      */
@@ -18,6 +20,19 @@ export interface SelectListOptionProps<TType extends object> extends Omit<ListBo
      * Supplementary text displayed below the main option label. Use this to provide additional context or description about the option.
      */
     helperText?: string;
+    /**
+     * Content displayed before the option label, after a start-position indicator.
+     */
+    prefixElement?: ReactNode;
+    /**
+     * Content displayed after the option label and before an end-position indicator.
+     */
+    suffixElement?: ReactNode;
+    /**
+     * Applies a presentational hint to the option without changing its selection or focus state.
+     * @default false
+     */
+    isHinted?: boolean;
 }
 export declare const SelectListOption: <T extends object>(props: SelectListOptionProps<T> & {
     ref?: React.ForwardedRef<HTMLDivElement>;

package/dist/esm/core/components/select-list/parts/SelectListOption.js

@@ -1,11 +1,13 @@
 import e from "../../../hooks/use-id.js";
 import { CheckboxIndicator as t } from "../../checkbox/parts/CheckboxIndicator.js";
-import { forwardRef as n } from "react";
-import { uyTv as r } from "@payfit/unity-themes";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { ListBoxItem as o } from "react-aria-components/ListBox";
+import { RadioIndicator as n } from "../../radio-button-group/parts/RadioIndicator.js";
+import { useSelectListContext as r } from "../SelectList.context.js";
+import { forwardRef as i } from "react";
+import { uyMerge as a, uyTv as o } from "@payfit/unity-themes";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { ListBoxItem as l } from "react-aria-components/ListBox";
 //#region src/core/components/select-list/parts/SelectListOption.tsx
-var s = r({
+var u = o({
 	slots: {
 		base: [
 			"uy:flex uy:flex-col uy:transition",
@@ -15,42 +17,79 @@ var s = r({
 			"uy:active:bg-surface-neutral-pressed",
 			"uy:data-[focus-visible]:outline uy:data-[focus-visible]:outline-2 uy:data-[focus-visible]:outline-utility-focus-ring uy:data-[focus-visible]:-outline-offset-2"
 		],
-		label: "uy:inline-flex uy:items-center uy:gap-100 uy:text-content-neutral uy:typography-body",
+		label: "uy:flex uy:items-center uy:gap-100 uy:text-content-neutral uy:typography-body",
+		content: "uy:flex uy:min-w-0 uy:flex-1 uy:flex-col",
+		optionLabel: "uy:min-w-0 uy:flex-1",
 		helperText: "uy:inline-block uy:typography-body uy:text-content-neutral-low uy:pl-300"
 	},
-	variants: { isDisabled: {
-		true: {
-			base: "uy:cursor-not-allowed!",
-			label: "uy:text-content-neutral-disabled"
+	variants: {
+		isDisabled: {
+			true: {
+				base: "uy:cursor-not-allowed!",
+				label: "uy:text-content-neutral-disabled"
+			},
+			false: { base: "" }
 		},
-		false: { base: "" }
-	} }
+		isHinted: {
+			true: { base: "uy:data-[hinted=true]:bg-surface-neutral-hover" },
+			false: { base: "" }
+		}
+	}
 });
-function c({ children: n, isDisabled: r = !1, textValue: c, helperText: l, ...u }, d) {
-	let f = e(), { base: p, label: m, helperText: h } = s({ isDisabled: r });
-	return /* @__PURE__ */ i(o, {
+function d({ children: i, isDisabled: o = !1, textValue: d, helperText: f, prefixElement: p, suffixElement: m, isHinted: h = !1, className: g, ..._ }, v) {
+	let y = e(), { selectionMode: b, indicatorPosition: x } = r(), { base: S, label: C, content: w, optionLabel: T, helperText: E } = u({
+		isDisabled: o,
+		isHinted: h
+	}), D = (e) => b === "multiple" ? /* @__PURE__ */ s("span", {
+		"aria-hidden": "true",
+		"data-unity-slot": "selection-indicator",
+		"data-indicator": "checkbox",
+		children: /* @__PURE__ */ s(t, {
+			isSelected: e,
+			isDisabled: o
+		})
+	}) : b === "single" ? /* @__PURE__ */ s("span", {
+		"aria-hidden": "true",
+		"data-unity-slot": "selection-indicator",
+		"data-indicator": "radio",
+		children: /* @__PURE__ */ s(n, {
+			isSelected: e,
+			state: o ? "disabled" : "enabled"
+		})
+	}) : null;
+	return /* @__PURE__ */ s(l, {
 		"data-dd-privacy": "mask",
-		...u,
-		className: p(),
-		textValue: c ?? n,
-		"aria-describedby": l ? `${f}-helper-text` : void 0,
-		children: ({ isSelected: e }) => /* @__PURE__ */ a("div", {
-			ref: d,
-			children: [/* @__PURE__ */ a("div", {
-				className: m(),
-				children: [/* @__PURE__ */ i(t, {
-					isSelected: e,
-					isDisabled: r
-				}), n]
-			}), l && /* @__PURE__ */ i("span", {
-				id: `${f}-helper-text`,
-				className: h(),
-				children: l
-			})]
+		..._,
+		className: a(S(), g),
+		"data-hinted": h || void 0,
+		textValue: d ?? i,
+		"aria-describedby": f ? `${y}-helper-text` : void 0,
+		children: ({ isSelected: e }) => /* @__PURE__ */ s("div", {
+			ref: v,
+			children: /* @__PURE__ */ c("div", {
+				className: C(),
+				children: [
+					x === "start" && D(e),
+					p,
+					/* @__PURE__ */ c("div", {
+						className: w(),
+						children: [/* @__PURE__ */ s("span", {
+							className: T(),
+							children: i
+						}), f && /* @__PURE__ */ s("span", {
+							id: `${y}-helper-text`,
+							className: E(),
+							children: f
+						})]
+					}),
+					m,
+					x === "end" && D(e)
+				]
+			})
 		})
 	});
 }
-c.displayName = "SelectListOption";
-var l = n(c);
+d.displayName = "SelectListOption";
+var f = i(d);
 //#endregion
-export { l as SelectListOption };
+export { f as SelectListOption };

package/dist/esm/core/components/select-list/parts/SelectedItemsSection.d.ts

@@ -1,6 +1,7 @@
 import { SelectionBehavior } from '@react-types/shared';
 import { Key } from 'react-aria-components/Breadcrumbs';
 import { Selection, SelectionMode } from 'react-aria-components/GridList';
+import { ReactElement } from 'react';
 interface SelectableItem {
     id: Key;
     label: string;
@@ -35,6 +36,7 @@ export interface SelectedItemsSectionProps<TType extends SelectableItem> {
      * CSS class for the ListBox
      */
     className: string;
+    children: (item: TType) => ReactElement;
 }
 /**
  * Displays selected items in a dedicated section at the top of the list.
@@ -51,5 +53,5 @@ export interface SelectedItemsSectionProps<TType extends SelectableItem> {
  * />
  * ```
  */
-export declare function SelectedItemsSection<TType extends SelectableItem>({ items, selectedKeys, onSelectionChange, selectionMode, selectionBehavior, label, className, ...rest }: SelectedItemsSectionProps<TType>): import('react/jsx-runtime').JSX.Element | null;
+export declare function SelectedItemsSection<TType extends SelectableItem>({ items, selectedKeys, onSelectionChange, selectionMode, selectionBehavior, label, className, children, ...rest }: SelectedItemsSectionProps<TType>): import('react/jsx-runtime').JSX.Element | null;
 export {};

package/dist/esm/core/components/select-list/parts/SelectedItemsSection.js

@@ -1,30 +1,26 @@
-import { SelectListOption as e } from "./SelectListOption.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { Collection as r, Header as i, ListBox as a } from "react-aria-components/ListBox";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { Collection as n, Header as r, ListBox as i } from "react-aria-components/ListBox";
 //#region src/core/components/select-list/parts/SelectedItemsSection.tsx
-function o({ items: o, selectedKeys: s, onSelectionChange: c, selectionMode: l, selectionBehavior: u, label: d, className: f, ...p }) {
-	return o.length === 0 ? null : /* @__PURE__ */ n("div", { children: [/* @__PURE__ */ t(i, {
+function a({ items: a, selectedKeys: o, onSelectionChange: s, selectionMode: c, selectionBehavior: l, label: u, className: d, children: f, ...p }) {
+	return a.length === 0 ? null : /* @__PURE__ */ t("div", { children: [/* @__PURE__ */ e(r, {
 		className: "uy:sr-only",
-		children: d
-	}), /* @__PURE__ */ t(a, {
-		"aria-label": d,
-		className: f,
-		items: o,
-		selectedKeys: s,
-		onSelectionChange: c,
-		selectionMode: l,
-		selectionBehavior: u,
+		children: u
+	}), /* @__PURE__ */ e(i, {
+		"aria-label": u,
+		className: d,
+		items: a,
+		selectedKeys: o,
+		onSelectionChange: s,
+		selectionMode: c,
+		selectionBehavior: l,
 		escapeKeyBehavior: "none",
 		shouldFocusWrap: !1,
 		...p,
-		children: /* @__PURE__ */ t(r, {
-			items: o,
-			children: (n) => /* @__PURE__ */ t(e, {
-				id: n.id,
-				children: n.label
-			})
+		children: /* @__PURE__ */ e(n, {
+			items: a,
+			children: f
 		})
 	})] });
 }
 //#endregion
-export { o as SelectedItemsSection };
+export { a as SelectedItemsSection };