@payfit/unity-components 3.1.14 → 3.1.16

package/dist/esm/components/select-field/TanstackSelectField.d.ts

@@ -1,124 +0,0 @@
-import { ForwardedRef, JSX, ReactNode } from 'react';
-import { LabelProps } from '../label/Label.js';
-import { TanstackSelectProps } from '../select/TanstackSelect.js';
-interface FieldProps<T extends object> extends Pick<LabelProps, 'isRequired' | 'requiredVariant'>, TanstackSelectProps<T> {
-    /** The label for the select field. */
-    label: string;
-    /** Helper text to display below the select field. */
-    helperText?: ReactNode;
-    /** A contextual link to display below the select field. */
-    contextualLink?: ReactNode;
-}
-export type TanstackSelectFieldProps<T extends object> = FieldProps<T>;
-type TanstackSelectFieldComponent = (<TItems extends object>(props: TanstackSelectFieldProps<TItems> & {
-    ref?: ForwardedRef<HTMLDivElement>;
-}) => JSX.Element) & {
-    displayName?: string;
-};
-/**
- * The `TanstackSelectField` component renders a complete select field (label, select, feedback)
- * wired to the TanStack Form context. It manages state and accessibility via the
- * context provided by `useTanstackUnityForm` and `<form.AppField name="…">`.
- *
- * Behavior:
- * - Renders a full field structure including `TanstackFormLabel`, `TanstackFormHelperText`,
- *   `TanstackSelect`, and `TanstackFormFeedbackText`.
- * - Supports both static options (using `SelectOption` components) and dynamic options
- *   (using the `items` prop with a render function).
- * - Can be configured with search functionality via the `isSearchable` prop.
- * - Displays validation feedback automatically based on the form's validation state.
- *
- * Accessibility:
- * - Automatically wires `aria-labelledby`, `aria-describedby` (helper/feedback), and
- *   `aria-details` using identifiers from the `a11y` context.
- *
- * Key props:
- * - `label: string` — label text for the field.
- * - `children: ReactNode | ((item: T) => ReactNode)` — static options or render function for dynamic items.
- * - `items?: Iterable<T>` — array of items for dynamic rendering.
- * - `isSearchable?: boolean` — enables search input in the select dropdown.
- * - `helperText?: ReactNode` — helper text displayed below the field.
- * - `contextualLink?: ReactNode` — optional contextual link, referenced via `aria-details`.
- * - `isRequired?`, `requiredVariant?` — control the required indicator in the label.
- * - `placeholder?: string` — placeholder text when no value is selected.
- * - `placement?: 'top' | 'bottom'` — popover placement.
- *
- * Example (static options):
- * ```tsx
- * import { TanstackSelectField } from "@/components/select/TanstackSelectField"
- * import { SelectOption } from "@/components/select/parts/SelectOption"
- * import { useTanstackUnityForm } from "@/hooks/use-tanstack-form"
- * import { z } from "zod"
- *
- * function Example() {
- *   const schema = z.object({
- *     fruit: z.string().min(1, 'Please select a fruit'),
- *   })
- *
- *   const form = useTanstackUnityForm({
- *     validators: { onBlur: schema },
- *     defaultValues: { fruit: '' }
- *   })
- *
- *   return (
- *     <form>
- *       <form.AppField name="fruit">
- *         {() => (
- *           <TanstackSelectField
- *             label="Favorite Fruit"
- *             helperText="Select your favorite fruit"
- *             placeholder="Choose a fruit"
- *           >
- *             <SelectOption id="Apple">Apple</SelectOption>
- *             <SelectOption id="Banana">Banana</SelectOption>
- *             <SelectOption id="Orange">Orange</SelectOption>
- *           </TanstackSelectField>
- *         )}
- *       </form.AppField>
- *     </form>
- *   )
- * }
- * ```
- *
- * Example (dynamic items with search):
- * ```tsx
- * function ExampleDynamic() {
- *   const items = [
- *     { id: 'Apple', name: 'Apple' },
- *     { id: 'Banana', name: 'Banana' },
- *     { id: 'Orange', name: 'Orange' },
- *   ]
- *
- *   const schema = z.object({
- *     fruit: z.string(),
- *   })
- *
- *   const form = useTanstackUnityForm({
- *     validators: { onBlur: schema },
- *     defaultValues: { fruit: '' }
- *   })
- *
- *   return (
- *     <form>
- *       <form.AppField name="fruit">
- *         {() => (
- *           <TanstackSelectField
- *             label="Favorite Fruit"
- *             isSearchable
- *             items={items}
- *           >
- *             {item => <SelectOption id={item.id}>{item.name}</SelectOption>}
- *           </TanstackSelectField>
- *         )}
- *       </form.AppField>
- *     </form>
- *   )
- * }
- * ```
- * @remarks Migration from `SelectField` (non-TanStack):
- * - Do not pass a `name` prop to the field: use `<form.AppField name="…">`.
- * - `value`, `defaultValue`, `onChange`, and `isInvalid` are derived from the TanStack form context.
- * - The field automatically manages validation state and displays error messages.
- */
-declare const TanstackSelectField: TanstackSelectFieldComponent;
-export { TanstackSelectField };

package/dist/esm/components/select-field/TanstackSelectField.js

@@ -1,30 +0,0 @@
-import { TanstackFormFeedbackText as e } from "../form-field/parts/TanstackFormFeedbackText.js";
-import { TanstackFormField as t } from "../form-field/TanstackFormField.js";
-import { TanstackFormHelperText as n } from "../form-field/parts/TanstackFormHelperText.js";
-import { TanstackFormLabel as r } from "../form-field/parts/TanstackFormLabel.js";
-import { TanstackSelect as i } from "../select/TanstackSelect.js";
-import { forwardRef as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-//#region src/components/select-field/TanstackSelectField.tsx
-var c = ({ label: a, helperText: c, contextualLink: l, isRequired: u, isDisabled: d, isReadOnly: f, requiredVariant: p, renderValue: m, ...h }, g) => /* @__PURE__ */ s(t, { children: [
-	/* @__PURE__ */ o(r, {
-		requiredVariant: p,
-		isRequired: u,
-		children: a
-	}),
-	c && /* @__PURE__ */ o(n, { children: c }),
-	/* @__PURE__ */ o(i, {
-		ref: g,
-		isDisabled: d,
-		isReadOnly: f,
-		renderValue: m,
-		...h
-	}),
-	/* @__PURE__ */ o(e, {}),
-	l
-] }), l = a(function(e, t) {
-	return c(e, t);
-});
-l.displayName = "TanstackSelectField";
-//#endregion
-export { l as TanstackSelectField };

package/dist/esm/components/select-field/test-utils.js

@@ -1,11 +0,0 @@
-import { screen as e, userEvent as t, within as n } from "storybook/test";
-//#region src/components/select-field/test-utils.ts
-var r = (r) => ({ selectOption: async ({ labelText: i, optionName: a, container: o = r.canvasElement }) => {
-	await r.step(`Select option "${a}" in "${i}"`, async () => {
-		let r = n(o).getByLabelText(i, { exact: !1 });
-		if (!r) throw Error(`Select not found for label ${i}`);
-		await t.click(r, { delay: 100 }), await t.click(e.getByRole("option", { name: a }), { delay: 100 }), await t.tab({ delay: 100 });
-	});
-} });
-//#endregion
-export { r as getTestingUtilsSelect };

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

@@ -1,95 +0,0 @@
-import { JSX, Ref } from 'react';
-import { ListBoxProps as AriaListBoxProps } from 'react-aria-components/ListBox';
-/**
- * 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'> {
-    /**
-     * An iterable data structure containing items to render in the list.
-     */
-    items: Iterable<TType>;
-    /**
-     * Render function for each item. Receives an item and should generally returns a `SelectListOption` component.
-     */
-    children: (item: TType) => React.ReactElement;
-    /**
-     * The current selected keys of the list. Pass a `Set` of keys to control the selection state.
-     */
-    value: AriaListBoxProps<TType>['selectedKeys'];
-    /**
-     * Callback function invoked when the user selection changes. Use this to update the controlled `value` prop.
-     * @param keys - The new selection as a `Selection` type (Set of keys or "all")
-     */
-    onChange: AriaListBoxProps<TType>['onSelectionChange'];
-    /**
-     * 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
-     */
-    showSearch?: boolean;
-    /**
-     * Additional CSS classes to apply to the list container. Use this to customize height or other container styles.
-     */
-    className?: 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
-     */
-    sortSelectedFirst?: boolean;
-    /**
-     * Accessible label for the selected items section. This label is screen-reader only and provides context for the separated selected items.
-     * @default "Selected"
-     */
-    selectedSectionLabel?: string;
-    /**
-     *
-     */
-    isLoading?: boolean;
-}
-type SelectListComponent = {
-    <TType extends object>(props: SelectListProps<TType> & {
-        ref?: Ref<HTMLDivElement>;
-    }): JSX.Element;
-    displayName: string;
-};
-/**
- * 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.
- * @param {SelectListProps} props - Regular props from React Aria's ListBox, plus selection, search, and sorting configuration
- * @example
- * ```tsx
- * import { SelectList, SelectListOption } from '@payfit/unity-components'
- *
- * function FruitSelector() {
- *   const [selected, setSelected] = useState(new Set())
- *   const fruits = [
- *     { id: 'apple', label: 'Apple' },
- *     { id: 'banana', label: 'Banana' }
- *   ]
- *
- *   return (
- *     <SelectList
- *       items={fruits}
- *       value={selected}
- *       onChange={setSelected}
- *       selectionMode="multiple"
- *     >
- *       {item => <SelectListOption id={item.id}>{item.label}</SelectListOption>}
- *     </SelectList>
- *   )
- * }
- * ```
- * @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
- * - 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`
- * @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/components/select-list GitHub}
- * @see Design specs in {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
- * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/data-selectlist unity-components.payfit.io}
- */
-declare const SelectList: SelectListComponent;
-export { SelectList };

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

@@ -1,71 +0,0 @@
-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";
-//#region src/components/select-list/SelectList.tsx
-var v = c({ 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",
-	separator: "uy:h-[1px] uy:border-border-neutral uy:w-full uy:mt-100",
-	list: "uy:overflow-y-auto uy:mt-100 uy: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, sortSelectedFirst: C = !1, selectedSectionLabel: w = "Selected", ...T }, E) {
-	let { contains: D } = g({ sensitivity: "base" }), { wrapper: O, inputContainer: k, list: A, separator: j, selectedListBox: M } = v(), [N, P] = t(y, b), F = s(() => (Array.isArray(o) ? o.length : Array.from(o).length) >= 10 || S, [o, S]), I = n(o, N, C), L = s(() => I.remainingItems ? !I.remainingItems[Symbol.iterator]().next().done : !1, [I.remainingItems]), R = /* @__PURE__ */ u(r, {
-		items: I.selectedItems,
-		selectedKeys: N,
-		onSelectionChange: P,
-		selectionMode: T.selectionMode,
-		selectionBehavior: T.selectionBehavior,
-		label: w,
-		className: M(),
-		"data-is-last": !L
-	}), z = /* @__PURE__ */ u(m, {
-		...T,
-		className: A({ className: x }),
-		items: I.remainingItems,
-		selectedKeys: N,
-		onSelectionChange: P,
-		renderEmptyState: i,
-		children: /* @__PURE__ */ u(p, {
-			items: I.remainingItems,
-			children: c
-		})
-	});
-	return /* @__PURE__ */ u("div", {
-		ref: E,
-		className: O(),
-		children: F ? /* @__PURE__ */ d(h, {
-			filter: D,
-			children: [
-				/* @__PURE__ */ d("div", {
-					className: k(),
-					"data-dd-privacy": "mask",
-					children: [/* @__PURE__ */ u(a, {}), /* @__PURE__ */ u(f, { className: j() })]
-				}),
-				R,
-				L && /* @__PURE__ */ u(_, {
-					...e,
-					children: z
-				})
-			]
-		}) : /* @__PURE__ */ d(l, { children: [R, L && /* @__PURE__ */ u(_, {
-			...e,
-			children: z
-		})] })
-	});
-}
-var b = o(y);
-b.displayName = "SelectList";
-//#endregion
-export { b as SelectList };

package/dist/esm/components/select-list/constants.js

@@ -1,14 +0,0 @@
-import * as e from "@payfit/unity-themes/tokens/common/spacings.json";
-import { ListLayout as t } from "react-aria-components/Virtualizer";
-//#region src/components/select-list/constants.ts
-var n = (e) => parseInt(e.replace("px", "").trim(), 10), r = {
-	layout: t,
-	layoutOptions: {
-		estimatedRowHeight: n(e.spacing[500].$value),
-		estimatedHeadingHeight: n(e.spacing[400].$value),
-		gap: 0,
-		padding: 0
-	}
-};
-//#endregion
-export { r as VIRTUALIZATION_CONFIG };

package/dist/esm/components/select-list/helpers.js

@@ -1,42 +0,0 @@
-import { partition as e } from "./utils/partition.js";
-//#region src/components/select-list/helpers.ts
-function t(e) {
-	return typeof e == "object" && !!e && "children" in e && Array.isArray(e.children);
-}
-function n(e) {
-	let n = e[Symbol.iterator]().next();
-	return !n.done && t(n.value);
-}
-function r(t, n) {
-	let [r, i] = e(Array.from(t), (e) => n.has(e.id));
-	return {
-		selectedItems: r,
-		remainingItems: i
-	};
-}
-function i(e) {
-	let n = [];
-	return Array.from(e).forEach((e) => {
-		t(e) && e.children.forEach((e) => {
-			n.push(e);
-		});
-	}), { allItems: n };
-}
-function a(e, n) {
-	let { allItems: r } = i(e);
-	return {
-		selectedItems: r.filter((e) => n.has(e.id)),
-		remainingSections: Array.from(e).map((e) => {
-			if (t(e)) {
-				let t = e.children.filter((e) => !n.has(e.id));
-				return {
-					...e,
-					children: t
-				};
-			}
-			return e;
-		}).filter((e) => t(e) && e.children.length > 0)
-	};
-}
-//#endregion
-export { i as extractAllSelectableItems, t as hasSectionChildren, n as isNestedStructure, r as processSelectedItemsForFlatDynamicItems, a as processSelectedItemsForNestedDynamicItems };

package/dist/esm/components/select-list/hooks/useControlledSelection.js

@@ -1,14 +0,0 @@
-import { useCallback as e, useMemo as t, useState as n } from "react";
-//#region src/components/select-list/hooks/useControlledSelection.ts
-function r(r, i) {
-	let [a, o] = n(/* @__PURE__ */ new Set()), s = r !== void 0;
-	return [t(() => s ? r === "all" ? "all" : r instanceof Set ? r : new Set(r) : a, [
-		s,
-		r,
-		a
-	]), e((e) => {
-		s || o(e === "all" ? /* @__PURE__ */ new Set() : e), i?.(e);
-	}, [s, i])];
-}
-//#endregion
-export { r as useControlledSelection };

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

@@ -1,31 +0,0 @@
-import { isNestedStructure as e, processSelectedItemsForFlatDynamicItems as t, processSelectedItemsForNestedDynamicItems as n } from "../helpers.js";
-import { useMemo as r } from "react";
-//#region src/components/select-list/hooks/useSelectedFirstSorting.ts
-function i(i, a, o) {
-	let s = r(() => a === "all" ? /* @__PURE__ */ new Set() : a, [a]);
-	return r(() => {
-		if (!o || !i || s.size === 0) return {
-			selectedItems: [],
-			remainingItems: i
-		};
-		if (e(i)) {
-			let e = n(i, s);
-			return {
-				selectedItems: e.selectedItems,
-				remainingItems: e.remainingSections
-			};
-		} else {
-			let e = t(i, s);
-			return {
-				selectedItems: e.selectedItems,
-				remainingItems: e.remainingItems
-			};
-		}
-	}, [
-		i,
-		s,
-		o
-	]);
-}
-//#endregion
-export { i as useSelectedFirstSorting };

package/dist/esm/components/select-list/parts/SelectListEmptyState.js

@@ -1,25 +0,0 @@
-import { Text as e } from "../../text/Text.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { FormattedMessage as r } from "react-intl";
-import { Icon as i } from "@payfit/unity-icons";
-//#region src/components/select-list/parts/SelectListEmptyState.tsx
-var a = () => /* @__PURE__ */ n("div", {
-	className: "uy:flex uy:flex-col uy:gap-200 uy:items-center uy:justify-center uy:h-full uy:py-600",
-	children: [/* @__PURE__ */ t(e, {
-		variant: "body",
-		className: "uy:w-500 uy:h-500 uy:bg-surface-neutral-lowest uy:flex uy:items-center uy:justify-center uy:rounded-75",
-		children: /* @__PURE__ */ t(i, {
-			size: 24,
-			src: "MagnifyingGlassOutlined"
-		})
-	}), /* @__PURE__ */ t(e, {
-		variant: "bodyLarge",
-		children: /* @__PURE__ */ t(r, {
-			id: "unity:component:autocomplete:panel:empty:label",
-			defaultMessage: "No results found"
-		})
-	})]
-});
-a.displayName = "SelectListEmptyState";
-//#endregion
-export { a as SelectListEmptyState };

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

@@ -1,118 +0,0 @@
-import { ListBoxSectionProps } from 'react-aria-components/ListBox';
-export declare const selectListOptGroup: import('tailwind-variants').TVReturnType<{
-    [key: string]: {
-        [key: string]: import('tailwind-variants').ClassValue | {
-            base?: import('tailwind-variants').ClassValue;
-            label?: import('tailwind-variants').ClassValue;
-            separator?: import('tailwind-variants').ClassValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import('tailwind-variants').ClassValue | {
-            base?: import('tailwind-variants').ClassValue;
-            label?: import('tailwind-variants').ClassValue;
-            separator?: import('tailwind-variants').ClassValue;
-        };
-    };
-} | {}, {
-    base: string;
-    label: string;
-    separator: string;
-}, undefined, {
-    [key: string]: {
-        [key: string]: import('tailwind-variants').ClassValue | {
-            base?: import('tailwind-variants').ClassValue;
-            label?: import('tailwind-variants').ClassValue;
-            separator?: import('tailwind-variants').ClassValue;
-        };
-    };
-} | {}, {
-    base: string;
-    label: string;
-    separator: string;
-}, import('tailwind-variants').TVReturnTypeLike<unknown, {
-    base: string;
-    label: string;
-    separator: string;
-}>>;
-/**
- * Props for the SelectListOptGroup component.
- * @template TType - The type of items when using the dynamic API
- */
-export interface SelectListOptGroupProps<TType extends object> extends ListBoxSectionProps<TType> {
-    /**
-     * The heading text for this group of options. Displayed above the group's options to provide visual and semantic organization.
-     */
-    label: string;
-    /**
-     * Adds a visual separator line below this group to create clear visual boundaries between groups. Set to `true` to enhance visual separation.
-     * @default false
-     */
-    withSeparator?: boolean;
-}
-/**
- * Organizes related options into labeled sections within a `SelectList` component.
- * Use this component to group related options together under a common label, improving scannability and organization for users. The component supports both static (directly nested children) and dynamic (items array with render function) APIs, and can optionally display a separator line to create clear visual boundaries between groups.
- * @param {SelectListOptGroupProps} props - Regular props from React Aria's ListBoxSection, plus label and separator configuration
- * @example
- * ```tsx
- * import { SelectList, SelectListOptGroup, SelectListOption } from '@payfit/unity-components'
- *
- * function Example() {
- *   const sections = [
- *     {
- *       id: 'fruits',
- *       label: 'Fruits',
- *       children: [
- *         { id: 'apple', label: 'Apple' },
- *         { id: 'banana', label: 'Banana' }
- *       ]
- *     },
- *     {
- *       id: 'vegetables',
- *       label: 'Vegetables',
- *       children: [
- *         { id: 'carrot', label: 'Carrot' },
- *         { id: 'lettuce', label: 'Lettuce' }
- *       ]
- *     }
- *   ]
- *
- *   return (
- *     <SelectList items={sections} selectionMode="multiple" value={new Set()} onChange={() => {}}>
- *       {section => (
- *         <SelectListOptGroup
- *           id={section.id}
- *           label={section.label}
- *           items={section.children}
- *           withSeparator
- *         >
- *           {item => (
- *             <SelectListOption id={item.id}>
- *               {item.label}
- *             </SelectListOption>
- *           )}
- *         </SelectListOptGroup>
- *       )}
- *     </SelectList>
- *   )
- * }
- * ```
- * @remarks
- * - Use the `label` prop to provide a descriptive heading that clearly identifies the group's category
- * - Set `withSeparator` to `true` to add a visual separator line below the group for enhanced visual organization
- * - Supports both static API (directly nest `SelectListOption` components) and dynamic API (provide `items` array with render function)
- * - This component must be used within a `SelectList` parent component to function properly
- * - Groups are accessible with proper ARIA semantics for screen readers
- * @see {@link SelectListOptGroupProps} for all available props
- * @see {@link SelectListOption} for the child option component
- * @see {@link SelectList} for the parent component's API
- * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/select-list/parts GitHub}
- * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/data-selectlist-selectlistoptgroup unity-components.payfit.io}
- */
-declare function SelectListOptGroup<T extends object>(props: SelectListOptGroupProps<T>): import("react/jsx-runtime").JSX.Element;
-declare namespace SelectListOptGroup {
-    var displayName: string;
-}
-export { SelectListOptGroup };

package/dist/esm/components/select-list/parts/SelectListOptGroup.js

@@ -1,34 +0,0 @@
-import "react";
-import { uyTv as e } from "@payfit/unity-themes";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { Header as r } from "react-aria-components/Header";
-import { Separator as i } from "react-aria-components/Separator";
-import { ListBoxSection as a } from "react-aria-components/ListBox";
-import { Collection as o } from "react-aria-components/Collection";
-//#region src/components/select-list/parts/SelectListOptGroup.tsx
-var s = e({ slots: {
-	base: "uy:flex uy:flex-col uy:bg-surface-neutral",
-	label: "uy:px-150 uy:py-100 uy:typography-body-strong uy:text-content-neutral",
-	separator: "uy:my-100 uy:border-t uy:border-border-neutral uy:border-solid"
-} });
-function c(e) {
-	let { base: c, label: l, separator: u } = s(), { label: d, withSeparator: f = !1, children: p, ...m } = e;
-	return /* @__PURE__ */ n(a, {
-		...m,
-		className: c(),
-		children: [
-			d && /* @__PURE__ */ t(r, {
-				className: l(),
-				children: d
-			}),
-			typeof p == "function" ? /* @__PURE__ */ t(o, {
-				items: e.items,
-				children: p
-			}) : p,
-			f && /* @__PURE__ */ t(i, { className: u() })
-		]
-	});
-}
-c.displayName = "SelectListOptGroup";
-//#endregion
-export { c as SelectListOptGroup, s as selectListOptGroup };