@povio/ui 3.0.0-rc.3 → 3.1.0

package/dist/components/inputs/TextEditor/Toolbar/TextStyleSelect.js

@@ -1,157 +1,54 @@
 import { Typography } from "../../../text/Typography/Typography.js";
 import "../../../../config/i18n.js";
 import { Select } from "../../Selection/Select/Select.js";
-import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/TextEditor/Toolbar/TextStyleSelect.tsx
-var TextStyleSelect = (t0) => {
-	const $0 = c(35);
-	const { editor } = t0;
+var TextStyleSelect = ({ editor }) => {
 	const { t } = useTranslation("ui");
-	if (!!!editor.extensionManager.extensions.find(_temp)) return null;
-	let t1;
-	if ($0[0] !== t) {
-		t1 = (level) => ({
+	if (!!!editor.extensionManager.extensions.find((extension) => extension.name === "heading")) return null;
+	const getItem = (level) => {
+		return {
 			id: level,
 			label: t(($) => $.ui.textEditor.textStyle[`heading${level}`]),
 			content: /* @__PURE__ */ jsx(Typography, {
 				size: `title-${level}`,
-				children: t(($_0) => $_0.ui.textEditor.textStyle[`heading${level}`])
+				children: t(($) => $.ui.textEditor.textStyle[`heading${level}`])
 			})
-		});
-		$0[0] = t;
-		$0[1] = t1;
-	} else t1 = $0[1];
-	const getItem = t1;
-	let t2;
-	if ($0[2] !== editor) {
-		t2 = (val) => {
-			if (!val) {
-				const currentLevel = editor.getAttributes("heading")?.level;
-				if (!currentLevel) return;
-				editor.chain().focus().toggleHeading({ level: currentLevel }).run();
-				return;
-			}
-			if (!editor.can().setHeading({ level: val })) return;
-			editor.chain().focus().setHeading({ level: val }).run();
 		};
-		$0[2] = editor;
-		$0[3] = t2;
-	} else t2 = $0[3];
-	const onChange = t2;
-	let t3;
-	if ($0[4] !== t) {
-		t3 = t(_temp2);
-		$0[4] = t;
-		$0[5] = t3;
-	} else t3 = $0[5];
-	let t4;
-	if ($0[6] !== t) {
-		t4 = t(_temp3);
-		$0[6] = t;
-		$0[7] = t4;
-	} else t4 = $0[7];
-	let t5;
-	if ($0[8] !== t) {
-		t5 = t(_temp4);
-		$0[8] = t;
-		$0[9] = t5;
-	} else t5 = $0[9];
-	let t6;
-	if ($0[10] !== t5) {
-		t6 = {
-			id: 0,
-			label: t5
-		};
-		$0[10] = t5;
-		$0[11] = t6;
-	} else t6 = $0[11];
-	let t10;
-	let t11;
-	let t12;
-	let t7;
-	let t8;
-	let t9;
-	if ($0[12] !== editor || $0[13] !== getItem) {
-		t7 = editor.can().toggleHeading({ level: 1 }) ? [getItem(1)] : [];
-		t8 = editor.can().toggleHeading({ level: 2 }) ? [getItem(2)] : [];
-		t9 = editor.can().toggleHeading({ level: 3 }) ? [getItem(3)] : [];
-		t10 = editor.can().toggleHeading({ level: 4 }) ? [getItem(4)] : [];
-		t11 = editor.can().toggleHeading({ level: 5 }) ? [getItem(5)] : [];
-		t12 = editor.can().toggleHeading({ level: 6 }) ? [getItem(6)] : [];
-		$0[12] = editor;
-		$0[13] = getItem;
-		$0[14] = t10;
-		$0[15] = t11;
-		$0[16] = t12;
-		$0[17] = t7;
-		$0[18] = t8;
-		$0[19] = t9;
-	} else {
-		t10 = $0[14];
-		t11 = $0[15];
-		t12 = $0[16];
-		t7 = $0[17];
-		t8 = $0[18];
-		t9 = $0[19];
-	}
-	let t13;
-	if ($0[20] !== t10 || $0[21] !== t11 || $0[22] !== t12 || $0[23] !== t6 || $0[24] !== t7 || $0[25] !== t8 || $0[26] !== t9) {
-		t13 = [
-			t6,
-			...t7,
-			...t8,
-			...t9,
-			...t10,
-			...t11,
-			...t12
-		];
-		$0[20] = t10;
-		$0[21] = t11;
-		$0[22] = t12;
-		$0[23] = t6;
-		$0[24] = t7;
-		$0[25] = t8;
-		$0[26] = t9;
-		$0[27] = t13;
-	} else t13 = $0[27];
-	const t14 = editor.getAttributes("heading")?.level || 0;
-	const t15 = !editor.isEditable;
-	let t16;
-	if ($0[28] !== onChange || $0[29] !== t13 || $0[30] !== t14 || $0[31] !== t15 || $0[32] !== t3 || $0[33] !== t4) {
-		t16 = /* @__PURE__ */ jsx(Select, {
-			as: "inline",
-			placeholder: t3,
-			label: t4,
-			hideLabel: true,
-			ignoreTriggerWidth: true,
-			onChange,
-			items: t13,
-			value: t14,
-			isDisabled: t15
-		});
-		$0[28] = onChange;
-		$0[29] = t13;
-		$0[30] = t14;
-		$0[31] = t15;
-		$0[32] = t3;
-		$0[33] = t4;
-		$0[34] = t16;
-	} else t16 = $0[34];
-	return t16;
+	};
+	const onChange = (val) => {
+		if (!val) {
+			const currentLevel = editor.getAttributes("heading")?.level;
+			if (!currentLevel) return;
+			editor.chain().focus().toggleHeading({ level: currentLevel }).run();
+			return;
+		}
+		if (!editor.can().setHeading({ level: val })) return;
+		editor.chain().focus().setHeading({ level: val }).run();
+	};
+	return /* @__PURE__ */ jsx(Select, {
+		as: "inline",
+		placeholder: t(($) => $.ui.textEditor.textStyle.label),
+		label: t(($) => $.ui.textEditor.textStyle.label),
+		hideLabel: true,
+		ignoreTriggerWidth: true,
+		onChange,
+		items: [
+			{
+				id: 0,
+				label: t(($) => $.ui.textEditor.textStyle.normal)
+			},
+			...editor.can().toggleHeading({ level: 1 }) ? [getItem(1)] : [],
+			...editor.can().toggleHeading({ level: 2 }) ? [getItem(2)] : [],
+			...editor.can().toggleHeading({ level: 3 }) ? [getItem(3)] : [],
+			...editor.can().toggleHeading({ level: 4 }) ? [getItem(4)] : [],
+			...editor.can().toggleHeading({ level: 5 }) ? [getItem(5)] : [],
+			...editor.can().toggleHeading({ level: 6 }) ? [getItem(6)] : []
+		],
+		value: editor.getAttributes("heading")?.level || 0,
+		isDisabled: !editor.isEditable
+	});
 };
-function _temp(extension) {
-	return extension.name === "heading";
-}
-function _temp2($_1) {
-	return $_1.ui.textEditor.textStyle.label;
-}
-function _temp3($_2) {
-	return $_2.ui.textEditor.textStyle.label;
-}
-function _temp4($_3) {
-	return $_3.ui.textEditor.textStyle.normal;
-}
 //#endregion
 export { TextStyleSelect };

package/dist/components/inputs/Toggle/Toggle.d.ts

@@ -9,7 +9,6 @@ interface ToggleBaseProps extends FormFieldErrorProps, ToggleVariantProps, Omit<
     children?: string;
     isDirty?: boolean;
     isRequired?: boolean;
-    fireBlurOnChange?: boolean;
 }
 export type ToggleProps = ToggleBaseProps;
 export type ControlledToggleProps<TFieldValues extends FieldValues> = ControlProps<ToggleProps, TFieldValues, "isSelected">;

package/dist/components/inputs/Toggle/Toggle.js

@@ -2,8 +2,7 @@ import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import { FormFieldError } from "../FormField/FormFieldError.js";
 import { CheckContent } from "../shared/CheckContent.js";
-import { toggleContentClassName, toggleDefinition, toggleTypography } from "./toggle.cva.js";
-import { c } from "react/compiler-runtime";
+import { toggleDefinition, toggleTypography } from "./toggle.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Switch } from "react-aria-components";
@@ -11,228 +10,52 @@ import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 //#region src/components/inputs/Toggle/Toggle.tsx
 var ToggleBase = (props) => {
-	const $ = c(50);
 	const ui = UIConfig.useConfig();
 	const toggleCva = UIOverrides.useCva("toggle.cva", toggleDefinition);
 	const toggleTypographyMap = UIOverrides.useMapper("toggle.typography", toggleTypography);
-	const toggleContentClassNameMap = UIOverrides.useMapper("toggle.contentClassName", toggleContentClassName);
-	let T0;
-	let T1;
-	let children;
-	let formFieldErrorProps;
-	let t0;
-	let t1;
-	let t2;
-	let t3;
-	let t4;
-	let t5;
-	let t6;
-	let t7;
-	let t8;
-	let t9;
-	if ($[0] !== props || $[1] !== toggleContentClassNameMap || $[2] !== toggleCva || $[3] !== toggleTypographyMap || $[4] !== ui) {
-		const { className, children: t10, isDisabled, error, variant: variantProp, fireBlurOnChange: fireBlurOnChangeProp, onChange, onBlur, ...rest } = props;
-		children = t10;
-		const variant = variantProp ?? ui.toggle.variant;
-		const fireBlurOnChange = fireBlurOnChangeProp ?? ui.toggle.fireBlurOnChange;
-		let t11;
-		if ($[19] !== error || $[20] !== isDisabled) {
-			t11 = {
-				error,
-				isDisabled
-			};
-			$[19] = error;
-			$[20] = isDisabled;
-			$[21] = t11;
-		} else t11 = $[21];
-		formFieldErrorProps = t11;
-		let t12;
-		if ($[22] !== fireBlurOnChange || $[23] !== onBlur || $[24] !== onChange) {
-			t12 = (isSelected) => {
-				onChange?.(isSelected);
-				if (fireBlurOnChange) onBlur?.({});
-			};
-			$[22] = fireBlurOnChange;
-			$[23] = onBlur;
-			$[24] = onChange;
-			$[25] = t12;
-		} else t12 = $[25];
-		const handleChange = t12;
-		T1 = Switch;
-		t2 = rest;
-		t3 = props.isDirty || void 0;
-		t4 = props.isRequired || void 0;
-		t5 = isDisabled;
-		t6 = handleChange;
-		t7 = onBlur;
-		const t13 = !isDisabled && "cursor-pointer";
-		if ($[26] !== className || $[27] !== t13) {
-			t8 = clsx("group flex items-center gap-2", t13, className);
-			$[26] = className;
-			$[27] = t13;
-			$[28] = t8;
-		} else t8 = $[28];
-		t9 = /* @__PURE__ */ jsx("div", { className: toggleCva({
+	const { className, children, isDisabled, error, variant = ui.toggle.variant, ...rest } = props;
+	const formFieldErrorProps = {
+		error,
+		isDisabled
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Switch, {
+		...rest,
+		"data-is-dirty": props.isDirty || void 0,
+		"data-is-required": props.isRequired || void 0,
+		isDisabled,
+		className: clsx("group flex items-center gap-2", !isDisabled && "cursor-pointer", className),
+		children: [/* @__PURE__ */ jsx("div", { className: toggleCva({
 			variant,
 			...rest
-		}) });
-		T0 = CheckContent;
-		t0 = toggleTypographyMap({
-			variant,
-			...rest
-		});
-		t1 = toggleContentClassNameMap({
-			variant,
-			...rest
-		});
-		$[0] = props;
-		$[1] = toggleContentClassNameMap;
-		$[2] = toggleCva;
-		$[3] = toggleTypographyMap;
-		$[4] = ui;
-		$[5] = T0;
-		$[6] = T1;
-		$[7] = children;
-		$[8] = formFieldErrorProps;
-		$[9] = t0;
-		$[10] = t1;
-		$[11] = t2;
-		$[12] = t3;
-		$[13] = t4;
-		$[14] = t5;
-		$[15] = t6;
-		$[16] = t7;
-		$[17] = t8;
-		$[18] = t9;
-	} else {
-		T0 = $[5];
-		T1 = $[6];
-		children = $[7];
-		formFieldErrorProps = $[8];
-		t0 = $[9];
-		t1 = $[10];
-		t2 = $[11];
-		t3 = $[12];
-		t4 = $[13];
-		t5 = $[14];
-		t6 = $[15];
-		t7 = $[16];
-		t8 = $[17];
-		t9 = $[18];
-	}
-	let t10;
-	if ($[29] !== T0 || $[30] !== children || $[31] !== t0 || $[32] !== t1) {
-		t10 = /* @__PURE__ */ jsx(T0, {
-			typography: t0,
-			contentClassName: t1,
+		}) }), /* @__PURE__ */ jsx(CheckContent, {
+			typography: toggleTypographyMap({
+				variant,
+				...rest
+			}),
 			children
-		});
-		$[29] = T0;
-		$[30] = children;
-		$[31] = t0;
-		$[32] = t1;
-		$[33] = t10;
-	} else t10 = $[33];
-	let t11;
-	if ($[34] !== T1 || $[35] !== t10 || $[36] !== t2 || $[37] !== t3 || $[38] !== t4 || $[39] !== t5 || $[40] !== t6 || $[41] !== t7 || $[42] !== t8 || $[43] !== t9) {
-		t11 = /* @__PURE__ */ jsxs(T1, {
-			...t2,
-			"data-is-dirty": t3,
-			"data-is-required": t4,
-			isDisabled: t5,
-			onChange: t6,
-			onBlur: t7,
-			className: t8,
-			children: [t9, t10]
-		});
-		$[34] = T1;
-		$[35] = t10;
-		$[36] = t2;
-		$[37] = t3;
-		$[38] = t4;
-		$[39] = t5;
-		$[40] = t6;
-		$[41] = t7;
-		$[42] = t8;
-		$[43] = t9;
-		$[44] = t11;
-	} else t11 = $[44];
-	let t12;
-	if ($[45] !== formFieldErrorProps) {
-		t12 = /* @__PURE__ */ jsx(FormFieldError, { ...formFieldErrorProps });
-		$[45] = formFieldErrorProps;
-		$[46] = t12;
-	} else t12 = $[46];
-	let t13;
-	if ($[47] !== t11 || $[48] !== t12) {
-		t13 = /* @__PURE__ */ jsxs(Fragment, { children: [t11, t12] });
-		$[47] = t11;
-		$[48] = t12;
-		$[49] = t13;
-	} else t13 = $[49];
-	return t13;
+		})]
+	}), /* @__PURE__ */ jsx(FormFieldError, { ...formFieldErrorProps })] });
 };
 var Toggle = (props) => {
-	const $ = c(15);
 	if ("formControl" in props && props.formControl) {
-		let formControl;
-		let innerProps;
-		let ref;
-		if ($[0] !== props) {
-			({formControl, ref, ...innerProps} = props);
-			$[0] = props;
-			$[1] = formControl;
-			$[2] = innerProps;
-			$[3] = ref;
-		} else {
-			formControl = $[1];
-			innerProps = $[2];
-			ref = $[3];
-		}
-		let t0;
-		if ($[4] !== innerProps || $[5] !== props.error || $[6] !== props.isDisabled || $[7] !== ref) {
-			t0 = (t1) => {
-				const { field, fieldState: t2 } = t1;
-				const { error, isDirty } = t2;
-				return /* @__PURE__ */ jsx(ToggleBase, {
-					...innerProps,
-					ref: mergeRefs(ref, field.ref),
-					isSelected: field.value,
-					onChange: field.onChange,
-					onBlur: field.onBlur,
-					name: field.name,
-					isDirty,
-					isDisabled: field.disabled || props.isDisabled,
-					error: props.error ?? error?.message
-				});
-			};
-			$[4] = innerProps;
-			$[5] = props.error;
-			$[6] = props.isDisabled;
-			$[7] = ref;
-			$[8] = t0;
-		} else t0 = $[8];
-		let t1;
-		if ($[9] !== formControl.control || $[10] !== formControl.name || $[11] !== t0) {
-			t1 = /* @__PURE__ */ jsx(Controller, {
-				control: formControl.control,
-				name: formControl.name,
-				render: t0
-			});
-			$[9] = formControl.control;
-			$[10] = formControl.name;
-			$[11] = t0;
-			$[12] = t1;
-		} else t1 = $[12];
-		return t1;
+		const { formControl, ref, ...innerProps } = props;
+		return /* @__PURE__ */ jsx(Controller, {
+			control: formControl.control,
+			name: formControl.name,
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(ToggleBase, {
+				...innerProps,
+				ref: mergeRefs(ref, field.ref),
+				isSelected: field.value,
+				onChange: field.onChange,
+				onBlur: field.onBlur,
+				name: field.name,
+				isDirty,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message
+			})
+		});
 	}
-	let t0;
-	if ($[13] !== props) {
-		t0 = /* @__PURE__ */ jsx(ToggleBase, { ...props });
-		$[13] = props;
-		$[14] = t0;
-	} else t0 = $[14];
-	return t0;
+	return /* @__PURE__ */ jsx(ToggleBase, { ...props });
 };
 //#endregion
 export { Toggle };

package/dist/components/inputs/Toggle/toggle.cva.d.ts

@@ -14,6 +14,3 @@ export interface ToggleVariantProps extends UIOverrides.VariantProps<ToggleConfi
 export declare const toggleTypography: (props: {
     readonly variant?: "default" | null | undefined;
 }) => TypographyVariantProps | undefined;
-export declare const toggleContentClassName: (props: {
-    readonly variant?: "default" | null | undefined;
-}) => string | undefined;

package/dist/components/inputs/Toggle/toggle.cva.js

@@ -30,6 +30,5 @@ var toggleTypography = compoundMapper({ default: {
 	sizeMobile: "label-1",
 	variant: "default"
 } });
-var toggleContentClassName = compoundMapper({ default: "text-text-default-2" });
 //#endregion
-export { toggleContentClassName, toggleDefinition, toggleTypography };
+export { toggleDefinition, toggleTypography };

package/dist/components/inputs/shared/CheckContent.d.ts

@@ -3,7 +3,6 @@ import { TypographyVariantProps } from '../../text/Typography/typography.cva';
 interface CheckContentProps {
     typography?: TypographyVariantProps;
     className?: string;
-    contentClassName?: string;
 }
-export declare const CheckContent: ({ children, className, contentClassName, ...props }: PropsWithChildren<CheckContentProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckContent: ({ children, className, ...props }: PropsWithChildren<CheckContentProps>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/shared/CheckContent.js

@@ -1,29 +1,19 @@
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { typographyDefinition } from "../../text/Typography/typography.cva.js";
-import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import clsx$1 from "clsx";
 //#region src/components/inputs/shared/CheckContent.tsx
-var CheckContent = (t0) => {
-	const $ = c(3);
-	const { children, className, contentClassName, ...props } = t0;
-	const t1 = clsx$1(UIOverrides.useCva("typography.cva", typographyDefinition)({
-		size: "label-1",
-		sizeMobile: "label-1",
-		variant: "default",
-		...props.typography
-	}), contentClassName, className);
-	let t2;
-	if ($[0] !== children || $[1] !== t1) {
-		t2 = /* @__PURE__ */ jsx("div", {
-			className: t1,
-			children
-		});
-		$[0] = children;
-		$[1] = t1;
-		$[2] = t2;
-	} else t2 = $[2];
-	return t2;
+var CheckContent = ({ children, className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx$1(UIOverrides.useCva("typography.cva", typographyDefinition)({
+			size: "label-1",
+			sizeMobile: "label-1",
+			variant: "default",
+			...props.typography,
+			className: "text-text-default-2"
+		}), className),
+		children
+	});
 };
 //#endregion
 export { CheckContent };

package/dist/components/inputs/shared/InputClear.d.ts

@@ -2,9 +2,8 @@ import { CSSProperties } from 'react';
 interface InputClearProps {
     onClear: () => void;
     show?: boolean;
-    renderStatic?: boolean;
     className?: string;
     style?: CSSProperties;
 }
-export declare const InputClear: ({ onClear, className, style, show, renderStatic }: InputClearProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputClear: ({ onClear, className, style, show }: InputClearProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/shared/InputClear.js

@@ -2,99 +2,23 @@ import { CloseIcon } from "../../../assets/icons/Close.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import { InlineIconButton } from "../../buttons/InlineIconButton/InlineIconButton.js";
 import "../../../config/i18n.js";
-import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/shared/InputClear.tsx
-var InputClear = (t0) => {
-	const $ = c(12);
-	const { onClear, className, style, show, renderStatic } = t0;
-	const alwaysShowClear = UIConfig.useConfig().input.alwaysShowClear;
-	let clearClassName;
-	let t1;
-	if ($[0] !== alwaysShowClear || $[1] !== className || $[2] !== renderStatic || $[3] !== show || $[4] !== style) {
-		t1 = Symbol.for("react.early_return_sentinel");
-		bb0: {
-			clearClassName = clsx("relative z-1 flex items-center", !alwaysShowClear && "md:invisible group-focus-within:visible group-hover/date-picker-content:visible group-hover/select-content:visible group-hover/text-area:visible group-hover:visible", "border-0!", !show && "invisible!", className);
-			if (renderStatic) {
-				let t2;
-				if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-					t2 = /* @__PURE__ */ jsx(CloseIcon, { className: "h-6 w-6 shrink-0" });
-					$[7] = t2;
-				} else t2 = $[7];
-				t1 = /* @__PURE__ */ jsx("button", {
-					type: "button",
-					"aria-hidden": "true",
-					tabIndex: -1,
-					className: clsx("group inline-flex items-center justify-center border border-solid border-support-transparent-outline", "rounded-button-rounding-s p-0 text-interactive-text-secondary-idle", clearClassName),
-					style,
-					children: t2
-				});
-				break bb0;
-			}
-		}
-		$[0] = alwaysShowClear;
-		$[1] = className;
-		$[2] = renderStatic;
-		$[3] = show;
-		$[4] = style;
-		$[5] = clearClassName;
-		$[6] = t1;
-	} else {
-		clearClassName = $[5];
-		t1 = $[6];
-	}
-	if (t1 !== Symbol.for("react.early_return_sentinel")) return t1;
-	let t2;
-	if ($[8] !== clearClassName || $[9] !== onClear || $[10] !== style) {
-		t2 = /* @__PURE__ */ jsx(InputClearButton, {
-			onClear,
-			className: clearClassName,
-			style
-		});
-		$[8] = clearClassName;
-		$[9] = onClear;
-		$[10] = style;
-		$[11] = t2;
-	} else t2 = $[11];
-	return t2;
-};
-var InputClearButton = (t0) => {
-	const $ = c(7);
-	const { onClear, className, style } = t0;
+var InputClear = ({ onClear, className, style, show }) => {
 	const { t } = useTranslation("ui");
-	let t1;
-	if ($[0] !== t) {
-		t1 = t(_temp);
-		$[0] = t;
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] !== className || $[3] !== onClear || $[4] !== style || $[5] !== t1) {
-		t2 = /* @__PURE__ */ jsx(InlineIconButton, {
-			color: "secondary",
-			className,
-			label: t1,
-			icon: CloseIcon,
-			onPress: onClear,
-			onMouseDown: _temp2,
-			excludeFromTabOrder: true,
-			style
-		});
-		$[2] = className;
-		$[3] = onClear;
-		$[4] = style;
-		$[5] = t1;
-		$[6] = t2;
-	} else t2 = $[6];
-	return t2;
+	const alwaysShowClear = UIConfig.useConfig().input.alwaysShowClear;
+	return /* @__PURE__ */ jsx(InlineIconButton, {
+		color: "secondary",
+		className: clsx("relative z-raised flex items-center", !alwaysShowClear && "md:invisible group-focus-within:visible group-hover/date-picker-content:visible group-hover/select-content:visible group-hover/text-area:visible group-hover:visible", "border-0!", !show && "invisible!", className),
+		label: t(($) => $.ui.clearAlt),
+		icon: CloseIcon,
+		onPress: onClear,
+		onMouseDown: (e) => e.preventDefault(),
+		excludeFromTabOrder: true,
+		style
+	});
 };
-function _temp($) {
-	return $.ui.clearAlt;
-}
-function _temp2(e) {
-	return e.preventDefault();
-}
 //#endregion
 export { InputClear };