@povio/ui 5.0.0-rc.9 → 6.0.0-rc.1

package/dist/components/alert-dialog.js

@@ -1,8 +1,9 @@
-import { t as UIConfig } from "../uiConfig.context-BS3r_kTS.js";
+import { t as UIConfig } from "../uiConfig.context-CT9EVqC5.js";
 import { t as clsx } from "../clsx-CnD0nOiA.js";
 import { t as Typography } from "../Typography-LU4z2pR1.js";
-import { t as Button } from "../Button-C5rv4Cr2.js";
-import { t as Dialog } from "../Dialog-9manOgMA.js";
+import { t as Button } from "../Button-DER_6cxv.js";
+import { t as Dialog } from "../Dialog-DSl1Fkqi.js";
+import { useId } from "react";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/overlays/AlertDialog/AlertDialog.tsx
@@ -12,7 +13,7 @@ const textAlignClassMap = {
 	right: "text-right"
 };
 const AlertDialog = (t0) => {
-	const $ = c(52);
+	const $ = c(54);
 	let description;
 	let descriptionClassName;
 	let descriptionTypography;
@@ -57,6 +58,7 @@ const AlertDialog = (t0) => {
 	const buttonSize = t1 === void 0 ? "default" : t1;
 	const textAlign = t2 === void 0 ? "left" : t2;
 	const ui = UIConfig.useConfig();
+	const headingId = useId();
 	const textAlignClass = textAlignClassMap[textAlign];
 	let t3;
 	if ($[13] !== dialogClassName) {
@@ -64,60 +66,63 @@ const AlertDialog = (t0) => {
 		$[13] = dialogClassName;
 		$[14] = t3;
 	} else t3 = $[14];
-	const t4 = titleTypography ?? ui.alertDialog.titleTypography;
-	let t5;
+	const t4 = modalProps["aria-labelledby"] ?? (modalProps["aria-label"] ? void 0 : headingId);
+	const t5 = titleTypography ?? ui.alertDialog.titleTypography;
+	let t6;
 	if ($[15] !== textAlignClass || $[16] !== titleClassName) {
-		t5 = clsx("text-surface-default-card-foreground", textAlignClass, titleClassName);
+		t6 = clsx("text-content-primary", textAlignClass, titleClassName);
 		$[15] = textAlignClass;
 		$[16] = titleClassName;
-		$[17] = t5;
-	} else t5 = $[17];
-	let t6;
-	if ($[18] !== heading || $[19] !== t4 || $[20] !== t5) {
-		t6 = /* @__PURE__ */ jsx(Typography, {
-			...t4,
+		$[17] = t6;
+	} else t6 = $[17];
+	let t7;
+	if ($[18] !== heading || $[19] !== headingId || $[20] !== t5 || $[21] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Typography, {
+			...t5,
 			as: "h2",
-			className: t5,
+			id: headingId,
+			className: t6,
 			children: heading
 		});
 		$[18] = heading;
-		$[19] = t4;
+		$[19] = headingId;
 		$[20] = t5;
 		$[21] = t6;
-	} else t6 = $[21];
-	const t7 = descriptionTypography ?? ui.alertDialog.descriptionTypography;
-	let t8;
-	if ($[22] !== descriptionClassName || $[23] !== textAlignClass) {
-		t8 = clsx("text-surface-default-card-foreground", textAlignClass, descriptionClassName);
-		$[22] = descriptionClassName;
-		$[23] = textAlignClass;
-		$[24] = t8;
-	} else t8 = $[24];
+		$[22] = t7;
+	} else t7 = $[22];
+	const t8 = descriptionTypography ?? ui.alertDialog.descriptionTypography;
 	let t9;
-	if ($[25] !== description || $[26] !== t7 || $[27] !== t8) {
-		t9 = /* @__PURE__ */ jsx(Typography, {
-			...t7,
-			className: t8,
+	if ($[23] !== descriptionClassName || $[24] !== textAlignClass) {
+		t9 = clsx("text-content-primary", textAlignClass, descriptionClassName);
+		$[23] = descriptionClassName;
+		$[24] = textAlignClass;
+		$[25] = t9;
+	} else t9 = $[25];
+	let t10;
+	if ($[26] !== description || $[27] !== t8 || $[28] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Typography, {
+			...t8,
+			className: t9,
 			children: description
 		});
-		$[25] = description;
-		$[26] = t7;
+		$[26] = description;
 		$[27] = t8;
 		$[28] = t9;
-	} else t9 = $[28];
-	let t10;
-	if ($[29] !== t6 || $[30] !== t9) {
-		t10 = /* @__PURE__ */ jsxs("div", {
+		$[29] = t10;
+	} else t10 = $[29];
+	let t11;
+	if ($[30] !== t10 || $[31] !== t7) {
+		t11 = /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-modal-gap-text",
-			children: [t6, t9]
+			children: [t7, t10]
 		});
-		$[29] = t6;
-		$[30] = t9;
-		$[31] = t10;
-	} else t10 = $[31];
-	let t11;
-	if ($[32] !== buttonSize || $[33] !== secondaryAction) {
-		t11 = secondaryAction && /* @__PURE__ */ jsx(Button, {
+		$[30] = t10;
+		$[31] = t7;
+		$[32] = t11;
+	} else t11 = $[32];
+	let t12;
+	if ($[33] !== buttonSize || $[34] !== secondaryAction) {
+		t12 = secondaryAction && /* @__PURE__ */ jsx(Button, {
 			variant: secondaryAction?.variant ?? "contained",
 			size: buttonSize,
 			color: secondaryAction?.color ?? "secondary",
@@ -126,63 +131,65 @@ const AlertDialog = (t0) => {
 			className: clsx("min-w-40 flex-1 shrink-0", secondaryAction?.className),
 			children: secondaryAction?.label
 		});
-		$[32] = buttonSize;
-		$[33] = secondaryAction;
-		$[34] = t11;
-	} else t11 = $[34];
-	const t12 = primaryAction?.variant ?? "contained";
-	const t13 = primaryAction?.color ?? "primary";
-	const t14 = primaryAction.onPress;
-	const t15 = primaryAction?.className;
-	let t16;
-	if ($[35] !== t15) {
-		t16 = clsx("min-w-40 flex-1 shrink-0", t15);
-		$[35] = t15;
-		$[36] = t16;
-	} else t16 = $[36];
+		$[33] = buttonSize;
+		$[34] = secondaryAction;
+		$[35] = t12;
+	} else t12 = $[35];
+	const t13 = primaryAction?.variant ?? "contained";
+	const t14 = primaryAction?.color ?? "primary";
+	const t15 = primaryAction.onPress;
+	const t16 = primaryAction?.className;
 	let t17;
-	if ($[37] !== buttonSize || $[38] !== primaryAction.label || $[39] !== primaryAction.onPress || $[40] !== t12 || $[41] !== t13 || $[42] !== t16) {
-		t17 = /* @__PURE__ */ jsx(Button, {
-			variant: t12,
+	if ($[36] !== t16) {
+		t17 = clsx("min-w-40 flex-1 shrink-0", t16);
+		$[36] = t16;
+		$[37] = t17;
+	} else t17 = $[37];
+	let t18;
+	if ($[38] !== buttonSize || $[39] !== primaryAction.label || $[40] !== primaryAction.onPress || $[41] !== t13 || $[42] !== t14 || $[43] !== t17) {
+		t18 = /* @__PURE__ */ jsx(Button, {
+			variant: t13,
 			size: buttonSize,
-			color: t13,
+			color: t14,
 			width: "fill",
-			onPress: t14,
-			className: t16,
+			onPress: t15,
+			className: t17,
 			children: primaryAction.label
 		});
-		$[37] = buttonSize;
-		$[38] = primaryAction.label;
-		$[39] = primaryAction.onPress;
-		$[40] = t12;
+		$[38] = buttonSize;
+		$[39] = primaryAction.label;
+		$[40] = primaryAction.onPress;
 		$[41] = t13;
-		$[42] = t16;
+		$[42] = t14;
 		$[43] = t17;
-	} else t17 = $[43];
-	let t18;
-	if ($[44] !== t11 || $[45] !== t17) {
-		t18 = /* @__PURE__ */ jsxs("div", {
+		$[44] = t18;
+	} else t18 = $[44];
+	let t19;
+	if ($[45] !== t12 || $[46] !== t18) {
+		t19 = /* @__PURE__ */ jsxs("div", {
 			className: "flex w-full flex-wrap gap-modal-gap-buttons pt-1",
-			children: [t11, t17]
+			children: [t12, t18]
 		});
-		$[44] = t11;
-		$[45] = t17;
+		$[45] = t12;
 		$[46] = t18;
-	} else t18 = $[46];
-	let t19;
-	if ($[47] !== modalProps || $[48] !== t10 || $[49] !== t18 || $[50] !== t3) {
-		t19 = /* @__PURE__ */ jsxs(Dialog, {
+		$[47] = t19;
+	} else t19 = $[47];
+	let t20;
+	if ($[48] !== modalProps || $[49] !== t11 || $[50] !== t19 || $[51] !== t3 || $[52] !== t4) {
+		t20 = /* @__PURE__ */ jsxs(Dialog, {
 			dialogClassName: t3,
 			...modalProps,
-			children: [t10, t18]
+			"aria-labelledby": t4,
+			children: [t11, t19]
 		});
-		$[47] = modalProps;
-		$[48] = t10;
-		$[49] = t18;
-		$[50] = t3;
-		$[51] = t19;
-	} else t19 = $[51];
-	return t19;
+		$[48] = modalProps;
+		$[49] = t11;
+		$[50] = t19;
+		$[51] = t3;
+		$[52] = t4;
+		$[53] = t20;
+	} else t20 = $[53];
+	return t20;
 };
 //#endregion
 export { AlertDialog };

package/dist/components/alert.d.ts

@@ -1,2 +1,2 @@
-import { n as AlertProps, t as Alert } from "../Alert-DfiJbKH0.js";
+import { n as AlertProps, t as Alert } from "../Alert-Cee_nKWj.js";
 export { Alert, AlertProps };

package/dist/components/alert.js

@@ -1,2 +1,117 @@
-import { t as Alert } from "../Alert-CnvEb1D_.js";
+import { t as UIOverrides } from "../uiOverrides.context-BTCH9y5a.js";
+import { t as IconSlot } from "../IconSlot-DSK7qNxc.js";
+import { t as Typography } from "../Typography-LU4z2pR1.js";
+import { t as Spinner } from "../Spinner-BeVTUzzx.js";
+import { n as statusSeparatorDefinition, r as alertDefinition, t as statusIconDefinition } from "../status.cva-BFGMKZO_.js";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/status/Alert/Alert.tsx
+const Alert = (t0) => {
+	const $ = c(31);
+	const { variant, color, text, isLoading: t1, rightContent, hasSeparator, icon: Icon, className } = t0;
+	const isLoading = t1 === void 0 ? false : t1;
+	const alertCva = UIOverrides.useCva("alert.cva", alertDefinition);
+	const iconCva = UIOverrides.useCva("status.iconCva", statusIconDefinition);
+	const separatorCva = UIOverrides.useCva("status.separatorCva", statusSeparatorDefinition);
+	let t2;
+	if ($[0] !== alertCva || $[1] !== className || $[2] !== color || $[3] !== variant) {
+		t2 = alertCva({
+			variant,
+			color,
+			className
+		});
+		$[0] = alertCva;
+		$[1] = className;
+		$[2] = color;
+		$[3] = variant;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== isLoading) {
+		t3 = isLoading && /* @__PURE__ */ jsx(Spinner, {
+			size: "default",
+			className: "shrink-0"
+		});
+		$[5] = isLoading;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== Icon || $[8] !== color || $[9] !== iconCva || $[10] !== isLoading || $[11] !== variant) {
+		t4 = !isLoading && Icon && /* @__PURE__ */ jsx(IconSlot, {
+			icon: Icon,
+			className: iconCva({
+				variant,
+				color
+			})
+		});
+		$[7] = Icon;
+		$[8] = color;
+		$[9] = iconCva;
+		$[10] = isLoading;
+		$[11] = variant;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== text) {
+		t5 = /* @__PURE__ */ jsx(Typography, {
+			size: "large",
+			children: text
+		});
+		$[13] = text;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[15] !== t3 || $[16] !== t4 || $[17] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full items-start gap-alert-gap-icon-to-text px-alert-side-default py-alert-height-content",
+			children: [
+				t3,
+				t4,
+				t5
+			]
+		});
+		$[15] = t3;
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t6;
+	} else t6 = $[18];
+	let t7;
+	if ($[19] !== color || $[20] !== hasSeparator || $[21] !== rightContent || $[22] !== separatorCva || $[23] !== variant) {
+		t7 = !!rightContent && /* @__PURE__ */ jsxs(Fragment, { children: [hasSeparator && /* @__PURE__ */ jsx("div", { className: separatorCva({
+			variant,
+			color
+		}) }), /* @__PURE__ */ jsx("div", {
+			className: "flex w-full shrink-0 flex-wrap items-center justify-end gap-toast-gap-action px-alert-side-default py-alert-height-actions-mobile md:w-auto md:justify-center md:py-alert-height-actions-desktop",
+			children: rightContent
+		})] });
+		$[19] = color;
+		$[20] = hasSeparator;
+		$[21] = rightContent;
+		$[22] = separatorCva;
+		$[23] = variant;
+		$[24] = t7;
+	} else t7 = $[24];
+	let t8;
+	if ($[25] !== t6 || $[26] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("div", {
+			className: "flex w-auto flex-col items-center md:flex-row",
+			children: [t6, t7]
+		});
+		$[25] = t6;
+		$[26] = t7;
+		$[27] = t8;
+	} else t8 = $[27];
+	let t9;
+	if ($[28] !== t2 || $[29] !== t8) {
+		t9 = /* @__PURE__ */ jsx("div", {
+			className: t2,
+			children: t8
+		});
+		$[28] = t2;
+		$[29] = t8;
+		$[30] = t9;
+	} else t9 = $[30];
+	return t9;
+};
+//#endregion
 export { Alert };

package/dist/components/autocomplete.d.ts

@@ -1,2 +1,2 @@
-import { n as AutocompleteProps, r as ControlledAutocompleteProps, t as Autocomplete } from "../Autocomplete-BwNHp8fy.js";
-export { Autocomplete, AutocompleteProps, ControlledAutocompleteProps };
+import { a as AutocompleteProps, i as AutocompleteItem, n as AutocompleteComponent, r as AutocompleteInner, t as Autocomplete } from "../Autocomplete-D_4gEL7D.js";
+export { Autocomplete, type AutocompleteComponent, type AutocompleteInner, type AutocompleteItem, type AutocompleteProps };

package/dist/components/autocomplete.js

@@ -1,135 +1,2 @@
-import { t as UIConfig } from "../uiConfig.context-BS3r_kTS.js";
-import { r as selectInputTagsContentWrapperDefinition } from "../selectDesktop.cva-CHAMxhfO.js";
-import { t as clsx } from "../clsx-CnD0nOiA.js";
-import { t as UIOverrides } from "../uiOverrides.context-BTCH9y5a.js";
-import { n as StaticSelectTrailingContent, r as SelectBase, t as getStaticSelectValue } from "../staticSelect.utils-uHa8f_c6.js";
-import { r as $a8ea2faf2ebe4d2f$re_export$mergeRefs } from "../import-BE0r63d8.js";
-import { t as FieldController } from "../form.binding-CG1RPv6o.js";
-import { i as InputFrame, n as useStaticInputHandoff, t as getStaticInputFocusTarget } from "../useStaticInputHandoff-NeZVnci-.js";
-import { memo, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/inputs/Selection/Autocomplete/Autocomplete.tsx
-function AutocompleteInner({ renderStaticInput, isFormControlDisabled, ...props }) {
-	const ui = UIConfig.useConfig();
-	const selectInputTagsContentWrapperCva = UIOverrides.useCva("select.tagsContentWrapperCva", selectInputTagsContentWrapperDefinition);
-	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.select.renderStaticInput ?? ui.renderStaticInput));
-	const rootRef = useRef(null);
-	const { renderRealInput, replayStaticInputChange, replayStaticInputPress } = useStaticInputHandoff({
-		inputRef: rootRef,
-		renderInput,
-		setRenderInput,
-		getFocusTarget: (root, _staticTarget, fromEnd) => fromEnd ? getStaticInputFocusTarget(root, true) : root.querySelector("input, [data-type='select-trigger'], button, [tabindex]")
-	});
-	const currentValue = props.value;
-	if (!renderInput && !!props.customTrigger) setRenderInput(true);
-	if (!renderInput) {
-		const as = props.as ?? ui.input.as;
-		const size = props.size ?? ui.input.size;
-		let isDisabled = !!props.isDisabled;
-		if (isFormControlDisabled) isDisabled = true;
-		const mode = props.selectionMode ?? ui.select.selectionMode;
-		const { selectedItem, displayValue, isEmpty } = getStaticSelectValue({
-			items: props.items,
-			value: currentValue,
-			selectionMode: mode,
-			initialSelection: props.initialSelection,
-			mapInitialToSelectItem: props.mapInitialToSelectItem,
-			showSelectionContent: props.showSelectionContent,
-			isDisabled,
-			collapseAfter: props.collapseAfter ?? ui.select.collapseAfter,
-			selectedTagsType: props.selectedTagsType ?? ui.select.selectedTagsType
-		});
-		const isMultiple = mode === "multiple";
-		const trailingContent = /* @__PURE__ */ jsx(StaticSelectTrailingContent, {
-			trailingContent: props.trailingContent,
-			hideDropdownIcon: props.hideDropdownIcon,
-			isDisabled,
-			size
-		});
-		const placeholder = as === "floating" ? null : props.placeholder;
-		const shouldRenderPlaceholderAfterValue = mode !== "single" && props.placeholder && !isEmpty;
-		const inputValue = !isMultiple && selectedItem ? selectedItem.label : "";
-		const dataAttributes = {
-			dataIsEmpty: isEmpty,
-			dataIsFilled: !isEmpty,
-			dataIsDirty: props.isDirty,
-			dataIsRequired: props.isRequired,
-			dataIsDisabled: isDisabled,
-			dataDisabled: isDisabled,
-			dataInvalid: !!props.error,
-			dataHasSelection: !isEmpty,
-			dataHasSearch: false
-		};
-		return /* @__PURE__ */ jsx(InputFrame, {
-			...props,
-			isDisabled,
-			isLoading: false,
-			className: clsx("w-full", props.containerClassName),
-			inputClassName: clsx(props.className, props.inputClassName),
-			contentWrapperClassName: selectInputTagsContentWrapperCva({ isSearchable: true }),
-			contentGroup: "select",
-			labelPlacement: "content-row",
-			dataAttributes,
-			onStaticInteract: renderRealInput,
-			onStaticPress: replayStaticInputPress,
-			wrapTrailingContent: false,
-			leadingContent: props.leadingContent && /* @__PURE__ */ jsx("div", {
-				className: "ml-input-side-default flex shrink-0 items-center",
-				children: props.leadingContent
-			}),
-			trailingContent,
-			children: (dataAttributeProps) => /* @__PURE__ */ jsxs(Fragment$1, { children: [isMultiple && !isEmpty && displayValue, /* @__PURE__ */ jsx("input", {
-				disabled: isDisabled,
-				tabIndex: -1,
-				role: "combobox",
-				"aria-autocomplete": "list",
-				"aria-controls": `${dataAttributeProps.id}-listbox`,
-				"aria-expanded": false,
-				value: inputValue,
-				placeholder: isMultiple && shouldRenderPlaceholderAfterValue ? props.placeholder : placeholder ?? void 0,
-				className: clsx("w-full flex-1 bg-transparent outline-none placeholder:text-surface-default-popover-foreground disabled:text-inherit", props.inputClassName),
-				onChange: (event) => replayStaticInputChange(event.target.value),
-				...dataAttributeProps,
-				"data-rac": true
-			})] })
-		});
-	}
-	return /* @__PURE__ */ jsx(SelectBase, {
-		...props,
-		ref: $a8ea2faf2ebe4d2f$re_export$mergeRefs(props.ref, rootRef),
-		isSearchable: true
-	});
-}
-function AutocompleteComponent({ renderStaticInput, ...props }) {
-	if ("field" in props && props.field) {
-		const { ignoreInputValueFiltering = true, field, ref, ...innerProps } = props;
-		const controlWithOptions = field.form;
-		return /* @__PURE__ */ jsx(FieldController, {
-			control: field.form,
-			name: field.name,
-			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(AutocompleteInner, {
-				...innerProps,
-				ref: $a8ea2faf2ebe4d2f$re_export$mergeRefs(ref, field.ref),
-				value: field.value,
-				onChange: (value) => {
-					field.onChange(value);
-					field.onBlur();
-				},
-				onBlur: field.onBlur,
-				isDirty,
-				isDisabled: field.disabled || props.isDisabled,
-				isFormControlDisabled: !!controlWithOptions._options?.disabled,
-				error: props.error ?? error?.message,
-				ignoreInputValueFiltering,
-				renderStaticInput
-			})
-		});
-	}
-	return /* @__PURE__ */ jsx(AutocompleteInner, {
-		...props,
-		renderStaticInput
-	});
-}
-const Autocomplete = memo(AutocompleteComponent);
-//#endregion
+import { t as Autocomplete } from "../Autocomplete-CWU9Ev3J.js";
 export { Autocomplete };

package/dist/components/badge-button.d.ts

@@ -1,2 +1,2 @@
-import { n as BadgeButtonProps, t as BadgeButton } from "../BadgeButton-Ccgt3oGO.js";
+import { n as BadgeButtonProps, t as BadgeButton } from "../BadgeButton-h3MeQYcp.js";
 export { BadgeButton, BadgeButtonProps };

package/dist/components/badge-button.js

@@ -1,10 +1,10 @@
 import { t as X } from "../x-B6vfz8Ps.js";
 import { t as clsx } from "../clsx-CnD0nOiA.js";
 import { t as UIOverrides } from "../uiOverrides.context-BTCH9y5a.js";
-import { n as $7705c033048f6da7$export$353f5b6fc5456de1 } from "../Button-D6KlWSFL.js";
-import { t as $75afe627ae0cc0fa$export$d2b052e7b4be1756 } from "../ToggleButton-BW1ensey.js";
+import { n as $7705c033048f6da7$export$353f5b6fc5456de1 } from "../Button-C1YB5dOw.js";
+import { t as $75afe627ae0cc0fa$export$d2b052e7b4be1756 } from "../ToggleButton-DUQ8nwKY.js";
 import { t as ButtonContent } from "../ButtonContent-c7lJayVQ.js";
-import { a as badgeButtonTypography, i as badgeButtonIconSize, r as badgeButtonDefinition, t as badgeButtonContent } from "../badgeButton.cva-CvN4CTx5.js";
+import { a as badgeButtonTypography, i as badgeButtonIconSize, r as badgeButtonDefinition, t as badgeButtonContent } from "../badgeButton.cva-BPyVejxO.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/buttons/BadgeButton/BadgeButton.tsx

package/dist/components/badge.d.ts

@@ -1,2 +1,2 @@
-import { n as BadgeProps, t as Badge } from "../Badge-CBNpj823.js";
+import { n as BadgeProps, t as Badge } from "../Badge-C4HI9XX4.js";
 export { Badge, BadgeProps };

package/dist/components/badge.js

@@ -1,12 +1,12 @@
-import { t as UIConfig } from "../uiConfig.context-BS3r_kTS.js";
+import { t as UIConfig } from "../uiConfig.context-CT9EVqC5.js";
 import { t as X } from "../x-B6vfz8Ps.js";
 import { t as clsx } from "../clsx-CnD0nOiA.js";
 import { t as UIOverrides } from "../uiOverrides.context-BTCH9y5a.js";
 import { t as IconSlot } from "../IconSlot-DSK7qNxc.js";
-import { n as $7705c033048f6da7$export$353f5b6fc5456de1 } from "../Button-D6KlWSFL.js";
+import { n as $7705c033048f6da7$export$353f5b6fc5456de1 } from "../Button-C1YB5dOw.js";
 import { t as Typography } from "../Typography-LU4z2pR1.js";
-import { r as badgeButtonDefinition } from "../badgeButton.cva-CvN4CTx5.js";
-import "../i18n-CX2EjhJI.js";
+import { r as badgeButtonDefinition } from "../badgeButton.cva-BPyVejxO.js";
+import "../i18n-BjNKHh_D.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";

package/dist/components/bottom-sheet-header.d.ts

@@ -0,0 +1,16 @@
+import { t as TypographyVariantProps } from "../typography.cva-GpC6QQNx.js";
+import { ReactNode } from "react";
+import { DragControls } from "motion/react";
+//#region src/components/overlays/BottomSheet/BottomSheetHeader.d.ts
+interface BottomSheetHeaderProps {
+  label?: ReactNode;
+  isDismissable?: boolean;
+  dragControls?: DragControls;
+  hideHeader?: boolean;
+  hideThumb?: boolean;
+  headerTypography?: TypographyVariantProps;
+  onClose?: () => void;
+}
+declare const BottomSheetHeader: ({ label, dragControls, isDismissable, hideThumb, hideHeader, headerTypography, onClose }: BottomSheetHeaderProps) => import("react").JSX.Element;
+//#endregion
+export { BottomSheetHeader, BottomSheetHeaderProps };

package/dist/components/bottom-sheet-header.js

@@ -0,0 +1,79 @@
+import { t as X } from "../x-B6vfz8Ps.js";
+import { t as clsx } from "../clsx-CnD0nOiA.js";
+import { t as IconSlot } from "../IconSlot-DSK7qNxc.js";
+import { n as $7705c033048f6da7$export$353f5b6fc5456de1 } from "../Button-C1YB5dOw.js";
+import { t as Typography } from "../Typography-LU4z2pR1.js";
+import "../i18n-BjNKHh_D.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/overlays/BottomSheet/BottomSheetHeader.tsx
+const BottomSheetHeader = (t0) => {
+	const $ = c(17);
+	const { label, dragControls, isDismissable, hideThumb, hideHeader, headerTypography, onClose } = t0;
+	const { t } = useTranslation("ui");
+	const t1 = !isDismissable && "pt-list-height-title-top";
+	let t2;
+	if ($[0] !== t1) {
+		t2 = clsx("pb-list-height-title-bottom", t1);
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== dragControls || $[3] !== hideThumb || $[4] !== isDismissable) {
+		t3 = isDismissable && !hideThumb && /* @__PURE__ */ jsx("div", {
+			className: "flex shrink-0 cursor-grab touch-none justify-center px-list-side-title pt-list-height-title-top pb-2.5",
+			onPointerDown: (e) => {
+				e.preventDefault();
+				dragControls?.start(e);
+			},
+			"aria-hidden": true,
+			children: /* @__PURE__ */ jsx("div", { className: "h-1 w-16 shrink-0 rounded-full bg-surface-default-sunken" })
+		});
+		$[2] = dragControls;
+		$[3] = hideThumb;
+		$[4] = isDismissable;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== headerTypography || $[7] !== hideHeader || $[8] !== isDismissable || $[9] !== label || $[10] !== onClose || $[11] !== t) {
+		t4 = !hideHeader && /* @__PURE__ */ jsxs("div", {
+			className: "flex justify-between px-list-side-title",
+			children: [/* @__PURE__ */ jsx(Typography, {
+				size: "small",
+				className: "font-bold",
+				...headerTypography,
+				children: label
+			}), onClose && isDismissable && /* @__PURE__ */ jsx($7705c033048f6da7$export$353f5b6fc5456de1, {
+				onPress: onClose,
+				"aria-label": t(_temp),
+				className: "-m-2 shrink-0 p-2 text-content-secondary focus-visible:outline-interactive-ring",
+				children: /* @__PURE__ */ jsx(IconSlot, { icon: X })
+			})]
+		});
+		$[6] = headerTypography;
+		$[7] = hideHeader;
+		$[8] = isDismissable;
+		$[9] = label;
+		$[10] = onClose;
+		$[11] = t;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== t2 || $[14] !== t3 || $[15] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("div", {
+			className: t2,
+			children: [t3, t4]
+		});
+		$[13] = t2;
+		$[14] = t3;
+		$[15] = t4;
+		$[16] = t5;
+	} else t5 = $[16];
+	return t5;
+};
+function _temp($) {
+	return $.ui.closeAlt;
+}
+//#endregion
+export { BottomSheetHeader };

package/dist/components/bottom-sheet.d.ts

@@ -1,3 +1,3 @@
-import { t as BottomSheetProps } from "../BottomSheet-DbQuzfAB.js";
-import { t as BottomSheet } from "../BottomSheet.lazy-D9LCEo7s.js";
+import { t as BottomSheetProps } from "../BottomSheet-BQXSdxoX.js";
+import { t as BottomSheet } from "../BottomSheet.lazy-BzvLg8Ea.js";
 export { BottomSheet, type BottomSheetProps };

package/dist/components/bottom-sheet.js

@@ -1,9 +1,9 @@
-import { t as $f2ff30fde7b014be$export$2e1e1122cf0cba88 } from "../Dialog-CKLkS00H.js";
+import { t as $f2ff30fde7b014be$export$2e1e1122cf0cba88 } from "../Dialog-lFYX-7Ax.js";
 import { Suspense, lazy, useEffect, useState } from "react";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/overlays/BottomSheet/BottomSheet.lazy.tsx
-const BottomSheetRenderer = lazy(() => import("../BottomSheet-BXLE3161.js").then(({ BottomSheet }) => ({ default: BottomSheet })));
+const BottomSheetRenderer = lazy(() => import("../BottomSheet-z5brMtDt.js").then(({ BottomSheet }) => ({ default: BottomSheet })));
 const BottomSheet = (t0) => {
 	const $ = c(26);
 	let isOpen;