@povio/ui 2.1.14 → 2.1.16

package/dist/FileUploadContentEmpty.js

@@ -0,0 +1,54 @@
+import { Typography } from "./Typography.js";
+import { Button } from "./Button.js";
+import { TextButton } from "./TextButton.js";
+import { UploadIcon } from "./Upload.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+const FileUploadContentEmpty = ({ variant, as, isDisabled, title, browseText, uploadText, singleFile, hideButton = false, className }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("flex w-full items-center gap-file-upload-content-gap-text-to-text", className, {
+			"flex-col": variant === "vertical",
+			"min-h-11 flex-row justify-between": variant === "horizontal"
+		}),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: clsx("flex items-center gap-file-upload-content-gap-icon-to-content", {
+				"flex-col": variant === "vertical",
+				"flex-row": variant === "horizontal",
+				"opacity-50": isDisabled
+			}),
+			children: [/* @__PURE__ */ jsx(UploadIcon, { className: "h-6 w-6 text-text-default-1" }), /* @__PURE__ */ jsx(Typography, {
+				variant: "prominent-1",
+				size: "label-1",
+				as: "span",
+				className: clsx("self-stretch text-text-default-1", { "text-center": variant === "vertical" }),
+				children: title
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: clsx("flex items-center justify-center", {
+				"flex-col": variant === "vertical" && as === "button",
+				"gap-file-upload-content-gap-text-to-text": as === "link",
+				"gap-file-upload-content-gap-content-to-button": as === "button"
+			}),
+			children: [/* @__PURE__ */ jsx(Typography, {
+				variant: "default",
+				size: singleFile ? "label-2" : "label-3",
+				as: "span",
+				className: clsx("text-text-default-2", {
+					"text-center": variant === "vertical",
+					"opacity-50": isDisabled
+				}),
+				children: uploadText
+			}), !hideButton && browseText && (as === "link" ? /* @__PURE__ */ jsx(TextButton, {
+				className: "text-interactive-text-primary-idle lowercase",
+				children: browseText
+			}) : /* @__PURE__ */ jsx(Button, {
+				variant: "outlined",
+				size: "xs",
+				width: "hug",
+				isDisabled,
+				children: browseText
+			}))]
+		})]
+	});
+};
+export { FileUploadContentEmpty };

package/dist/FileUploadContentError.js

@@ -0,0 +1,109 @@
+import { CloseIcon } from "./Close.js";
+import { Typography } from "./Typography.js";
+import { Button as Button$1 } from "./Button.js";
+import { InlineIconButton } from "./InlineIconButton.js";
+import { TextButton } from "./TextButton.js";
+import { ns } from "./i18n.js";
+import { WarningFilledIcon } from "./WarningFilled.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { FileTrigger } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+const FileUploadContentError = ({ variant, as, isDisabled, state, browseText, fileTriggerProps, removeWithIcon = false, singleFile, onRemove }) => {
+	const { t } = useTranslation("ui");
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("flex w-full flex-fill flex-col items-start"),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: clsx("flex w-full items-center", {
+				"flex-row gap-file-upload-content-gap-left-to-right-content": variant === "horizontal",
+				"flex-col": variant === "vertical",
+				"gap-file-upload-content-gap-content-to-button": variant === "vertical" && as === "button",
+				"gap-file-upload-content-gap-text-to-text": variant === "vertical" && as === "link"
+			}),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: clsx("flex min-w-0 max-w-full flex-grow items-center gap-file-upload-content-gap-icon-to-content", {
+					"flex-col": variant === "vertical",
+					"flex-row": variant === "horizontal",
+					"opacity-50": isDisabled
+				}),
+				children: [/* @__PURE__ */ jsx(WarningFilledIcon, { className: "h-6 w-6 text-elevation-fill-warning-1" }), /* @__PURE__ */ jsxs("div", {
+					className: clsx("flex flex-col gap-file-upload-content-gap-text-to-text", {
+						"max-w-full items-center": variant === "vertical",
+						"max-w-[calc(100%_-_32px)]": variant === "horizontal"
+					}),
+					children: [/* @__PURE__ */ jsx(Typography, {
+						variant: "prominent-1",
+						size: "label-1",
+						as: "span",
+						className: clsx("self-stretch truncate text-text-default-1", { "text-center": variant === "vertical" }),
+						children: state.file.name
+					}), /* @__PURE__ */ jsx(Typography, {
+						variant: "default",
+						size: singleFile ? "label-2" : "label-3",
+						as: "span",
+						className: clsx("text-text-default-2", { "text-center": variant === "vertical" }),
+						children: state.error?.serverMessage ?? state.error?.message
+					})]
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: clsx("flex flex-none items-center justify-end", {
+					"flex-col": variant === "vertical" && as === "button",
+					"gap-file-upload-content-gap-text-to-text": as === "link",
+					"gap-file-upload-content-gap-content-to-button": as === "button"
+				}),
+				children: as === "link" ? /* @__PURE__ */ jsxs(Fragment, { children: [fileTriggerProps && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FileTrigger, {
+					...fileTriggerProps,
+					children: /* @__PURE__ */ jsx(TextButton, {
+						className: "text-interactive-text-primary-idle",
+						children: browseText ?? ""
+					})
+				}), /* @__PURE__ */ jsx(Typography, {
+					variant: "default",
+					size: "label-2",
+					as: "span",
+					className: "text-text-default-2",
+					children: t(($) => $.ui.fileUpload.or)
+				})] }), removeWithIcon ? /* @__PURE__ */ jsx(InlineIconButton, {
+					label: "Cancel",
+					color: "secondary",
+					onPress: () => {
+						onRemove(state.id ?? "");
+					},
+					icon: CloseIcon
+				}) : /* @__PURE__ */ jsx(TextButton, {
+					className: "text-interactive-text-primary-idle lowercase",
+					onPress: () => {
+						onRemove(state.id ?? "");
+					},
+					children: t(($) => $.ui.fileUpload.removeFile)
+				})] }) : /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-center gap-file-upload-content-gap-button-to-button self-stretch",
+					children: [fileTriggerProps && /* @__PURE__ */ jsx(FileTrigger, {
+						...fileTriggerProps,
+						children: /* @__PURE__ */ jsx(Button$1, {
+							variant: "outlined",
+							size: "xs",
+							width: "hug",
+							isDisabled,
+							children: browseText ?? ""
+						})
+					}), removeWithIcon ? /* @__PURE__ */ jsx(InlineIconButton, {
+						label: "Cancel",
+						color: "secondary",
+						onPress: () => {
+							onRemove(state.id ?? "");
+						},
+						icon: CloseIcon
+					}) : /* @__PURE__ */ jsx(TextButton, {
+						color: "secondary",
+						onPress: () => {
+							onRemove(state.id ?? "");
+						},
+						children: t(($) => $.ui.fileUpload.removeFile)
+					})]
+				})
+			})]
+		})
+	});
+};
+export { FileUploadContentError };

package/dist/FileUploadContentFilled.js

@@ -0,0 +1,112 @@
+import { CloseIcon } from "./Close.js";
+import { Typography } from "./Typography.js";
+import { Button as Button$1 } from "./Button.js";
+import { InlineIconButton } from "./InlineIconButton.js";
+import { TextButton } from "./TextButton.js";
+import { ns } from "./i18n.js";
+import { FileUtils } from "./file.utils.js";
+import { CheckCircleIcon } from "./CheckCircle.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { FileTrigger } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+const FileUploadContentFilled = ({ variant, as, isDisabled, state, browseText, fileTriggerProps, removeWithIcon = false, singleFile, onRemove }) => {
+	const { t } = useTranslation("ui");
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("flex w-full flex-fill flex-col items-start"),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: clsx("flex w-full items-center", {
+				"flex-row gap-file-upload-content-gap-left-to-right-content": variant === "horizontal",
+				"flex-col": variant === "vertical",
+				"gap-file-upload-content-gap-content-to-button": variant === "vertical" && as === "button",
+				"gap-file-upload-content-gap-text-to-text": variant === "vertical" && as === "link"
+			}),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: clsx("flex min-w-0 max-w-full grow items-center gap-file-upload-content-gap-icon-to-content", {
+					"flex-col": variant === "vertical",
+					"flex-row": variant === "horizontal",
+					"opacity-50": isDisabled
+				}),
+				children: [/* @__PURE__ */ jsx(CheckCircleIcon, { className: "h-6 w-6 text-text-default-1" }), /* @__PURE__ */ jsxs("div", {
+					className: clsx("flex flex-col gap-file-upload-content-gap-text-to-text", {
+						"max-w-full items-center": variant === "vertical",
+						"max-w-[calc(100%-32px)]": variant === "horizontal"
+					}),
+					children: [/* @__PURE__ */ jsx(Typography, {
+						variant: "prominent-1",
+						size: "label-1",
+						as: "span",
+						className: "self-stretch truncate text-center text-text-default-1",
+						children: state.file.name
+					}), /* @__PURE__ */ jsx(Typography, {
+						variant: "default",
+						size: singleFile ? "label-2" : "label-3",
+						as: "span",
+						className: "text-text-default-2",
+						children: FileUtils.getCalculatedFileSize(state.file)
+					})]
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: clsx("flex flex-none items-center justify-end", {
+					"flex-col": variant === "vertical" && as === "button",
+					"gap-file-upload-content-gap-text-to-text": as === "link" && variant === "vertical",
+					"gap-file-upload-content-gap-content-to-button": as === "button" && variant === "vertical",
+					"gap-file-upload-content-gap-button-to-button": variant === "horizontal"
+				}),
+				children: as === "link" ? /* @__PURE__ */ jsxs(Fragment, { children: [fileTriggerProps && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FileTrigger, {
+					...fileTriggerProps,
+					children: /* @__PURE__ */ jsx(TextButton, {
+						className: clsx("text-interactive-text-primary-idle", { "[&>span>span]:font-medium!": variant === "vertical" }),
+						children: browseText ?? ""
+					})
+				}), variant === "vertical" && /* @__PURE__ */ jsx(Typography, {
+					variant: "default",
+					size: "label-2",
+					as: "span",
+					className: "text-text-default-2",
+					children: t(($) => $.ui.fileUpload.or)
+				})] }), removeWithIcon ? /* @__PURE__ */ jsx(InlineIconButton, {
+					label: "Cancel",
+					color: "secondary",
+					onPress: () => {
+						onRemove(state.id ?? "");
+					},
+					icon: CloseIcon
+				}) : /* @__PURE__ */ jsx(TextButton, {
+					className: clsx(variant === "vertical" && "text-interactive-text-primary-idle lowercase [&>span>span]:font-medium!"),
+					color: variant === "horizontal" ? "secondary" : "primary",
+					onPress: () => {
+						onRemove(state.id ?? "");
+					},
+					children: t(($) => $.ui.fileUpload.removeFile)
+				})] }) : /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-center gap-file-upload-content-gap-button-to-button self-stretch",
+					children: [fileTriggerProps && /* @__PURE__ */ jsx(FileTrigger, {
+						...fileTriggerProps,
+						children: /* @__PURE__ */ jsx(Button$1, {
+							variant: "outlined",
+							size: "xs",
+							width: "hug",
+							isDisabled,
+							children: browseText ?? ""
+						})
+					}), removeWithIcon ? /* @__PURE__ */ jsx(InlineIconButton, {
+						label: "Cancel",
+						color: "secondary",
+						onPress: () => {
+							onRemove(state.id ?? "");
+						},
+						icon: CloseIcon
+					}) : /* @__PURE__ */ jsx(TextButton, {
+						color: "secondary",
+						onPress: () => {
+							onRemove(state.id ?? "");
+						},
+						children: t(($) => $.ui.fileUpload.removeFile)
+					})]
+				})
+			})]
+		})
+	});
+};
+export { FileUploadContentFilled };

package/dist/FileUploadContentLoading.js

@@ -0,0 +1,76 @@
+import { CloseIcon } from "./Close.js";
+import { Typography } from "./Typography.js";
+import { Button } from "./Button.js";
+import { InlineIconButton } from "./InlineIconButton.js";
+import { ns } from "./i18n.js";
+import { FileUtils } from "./file.utils.js";
+import { FileIcon } from "./File.js";
+import { ProgressBar } from "./ProgressBar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useTranslation } from "react-i18next";
+const FileUploadContentLoading = ({ index, variant, as, state, isDisabled, singleFile, onCancel }) => {
+	const { t } = useTranslation("ui");
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("flex w-full flex-col items-center", {
+			"flex-col": variant === "vertical",
+			"flex-row": variant === "horizontal",
+			"gap-file-upload-content-gap-content-to-button": as === "button"
+		}),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: clsx("flex w-full items-center justify-between", {
+				"flex-col gap-file-upload-content-gap-text-to-progress": variant === "vertical",
+				"flex-row gap-file-upload-content-gap-left-to-right-content": variant === "horizontal",
+				"opacity-50": isDisabled
+			}),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: clsx("flex items-center gap-file-upload-content-gap-icon-to-content", {
+					"w-full flex-col": variant === "vertical",
+					"w-1/2": variant === "horizontal"
+				}),
+				children: [/* @__PURE__ */ jsx(FileIcon, { className: "h-6 w-6 text-text-default-1" }), /* @__PURE__ */ jsxs("div", {
+					className: clsx("flex flex-col", {
+						"max-w-full gap-file-upload-content-gap-icon-to-content text-center": variant === "vertical",
+						"max-w-[calc(100%-32px)] gap-file-upload-content-gap-text-to-text": variant === "horizontal"
+					}),
+					children: [/* @__PURE__ */ jsx(Typography, {
+						variant: "prominent-1",
+						size: "label-1",
+						as: "span",
+						className: "self-stretch truncate text-center text-text-default-1",
+						children: state.file.name
+					}), /* @__PURE__ */ jsx(Typography, {
+						variant: "default",
+						size: singleFile ? "label-2" : "label-3",
+						as: "span",
+						className: "text-text-default-2",
+						children: FileUtils.getCalculatedFileSize(state.file)
+					})]
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: clsx("flex items-center gap-1", {
+					"w-1/2": variant === "horizontal",
+					"w-full": variant === "vertical"
+				}),
+				children: [/* @__PURE__ */ jsx(ProgressBar, { progress: state.progress }), (as === "link" || variant === "horizontal") && /* @__PURE__ */ jsx(InlineIconButton, {
+					label: "Cancel",
+					color: "secondary",
+					onPress: () => {
+						onCancel(index);
+					},
+					icon: CloseIcon
+				})]
+			})]
+		}), as === "button" && variant === "vertical" && /* @__PURE__ */ jsx(Button, {
+			variant: "outlined",
+			size: "xs",
+			color: "secondary",
+			width: "hug",
+			onPress: () => {
+				onCancel(index);
+			},
+			children: t(($) => $.ui.fileUpload.cancel)
+		})]
+	});
+};
+export { FileUploadContentLoading };

package/dist/Form.js

@@ -0,0 +1,42 @@
+import { InputItem } from "./InputItem.js";
+import { StringUtils } from "./string.utils.js";
+import { ZodUtils } from "./zod.utils.js";
+import { getDefaultInputComponentType } from "./dynamicInputs.js";
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { z } from "zod";
+var createFieldComponent = (field, schemaKeyType, form) => {
+	return function FieldComponent({ inputType, label, placeholder,...inputProps }) {
+		return /* @__PURE__ */ jsx(InputItem, {
+			form,
+			inputDef: {
+				name: field,
+				type: inputType ?? getDefaultInputComponentType(schemaKeyType),
+				label,
+				placeholder,
+				props: {
+					...ZodUtils.unwrapZodType(schemaKeyType) instanceof z.ZodArray ? { selectionMode: "multiple" } : {},
+					...inputProps
+				}
+			}
+		});
+	};
+};
+function Form({ form, schema, onSubmit, onError, className, children }) {
+	const components = useMemo(() => {
+		const fieldComponents = {};
+		const fields = Object.keys(schema.shape);
+		for (const field of fields) {
+			const componentName = StringUtils.capitalize(String(field));
+			const schemaKeyType = schema.shape[field];
+			fieldComponents[componentName] = createFieldComponent(field, schemaKeyType, form);
+		}
+		return fieldComponents;
+	}, [schema.shape, form]);
+	return /* @__PURE__ */ jsx("form", {
+		onSubmit: form.handleSubmit(onSubmit, onError),
+		className,
+		children: children(components)
+	});
+}
+export { Form };

package/dist/FormField.js

@@ -0,0 +1,35 @@
+import { FormFieldError } from "./FormFieldError.js";
+import { FormFieldHeader } from "./FormFieldHeader.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const FormField = ({ ref, as, label, tooltipText, helperText, isRequired, rightContent, isDisabled, error, hideLabel, headerClassName, errorClassName, children, className, labelProps, isHeaderHidden, tabIndex, onMouseEnter, onFocusCapture }) => {
+	const headerProps = {
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: hideLabel || isHeaderHidden,
+		isDisabled,
+		className: headerClassName,
+		labelProps
+	};
+	const errorProps = {
+		error,
+		isDisabled,
+		isHidden: isHeaderHidden,
+		className: errorClassName
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className,
+		tabIndex,
+		onMouseEnter,
+		onFocusCapture,
+		children: [
+			!["filter", "floating"].includes(as ?? "") && /* @__PURE__ */ jsx(FormFieldHeader, { ...headerProps }),
+			children,
+			/* @__PURE__ */ jsx(FormFieldError, { ...errorProps })
+		]
+	});
+};
+export { FormField };

package/dist/FormFieldError.js

@@ -0,0 +1,11 @@
+import { Typography } from "./Typography.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+const FormFieldError = ({ error, isDisabled, isHidden, className }) => {
+	return /* @__PURE__ */ jsx(Typography, {
+		className: clsx("text-text-error-1", !error || isDisabled || isHidden ? "sr-only" : "mt-1-5", className),
+		size: "label-3",
+		children: error
+	});
+};
+export { FormFieldError };

package/dist/FormFieldHeader.js

@@ -0,0 +1,36 @@
+import { InfoIcon } from "./Info.js";
+import { Typography } from "./Typography.js";
+import { Tooltip as Tooltip$1 } from "./Tooltip.js";
+import { FormFieldLabel } from "./FormFieldLabel.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Focusable } from "react-aria-components";
+const FormFieldHeader = ({ label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, isDisabled, className, labelProps }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx(isHeaderHidden ? "sr-only" : "mb-1", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start justify-between",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start gap-1",
+				children: [/* @__PURE__ */ jsx(FormFieldLabel, {
+					label,
+					isRequired,
+					isDisabled,
+					labelProps
+				}), tooltipText && /* @__PURE__ */ jsx(Tooltip$1, {
+					text: tooltipText,
+					children: /* @__PURE__ */ jsx(Focusable, { children: /* @__PURE__ */ jsx(InfoIcon, {
+						className: clsx("size-6", isDisabled ? "text-interactive-text-secondary-disabled" : "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover"),
+						tabIndex: 0
+					}) })
+				})]
+			}), rightContent]
+		}), helperText && /* @__PURE__ */ jsx(Typography, {
+			slot: "description",
+			size: "label-2",
+			className: "text-text-default-2",
+			children: helperText
+		})]
+	});
+};
+export { FormFieldHeader };

package/dist/FormFieldHeaderClose.js

@@ -0,0 +1,15 @@
+import { CloseIcon } from "./Close.js";
+import { ns } from "./i18n.js";
+import { jsx } from "react/jsx-runtime";
+import { Button } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+const FormFieldHeaderClose = ({ onClose }) => {
+	const { t } = useTranslation("ui");
+	return /* @__PURE__ */ jsx(Button, {
+		onPress: onClose,
+		"aria-label": t(($) => $.ui.closeAlt),
+		className: "shrink-0 focus-visible:outline-interactive-text-secondary-focus",
+		children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-6 text-interactive-text-secondary-idle" })
+	});
+};
+export { FormFieldHeaderClose };

package/dist/FormFieldLabel.js

@@ -0,0 +1,32 @@
+import { UIStyle } from "./uiStyle.context.js";
+import { Typography } from "./Typography.js";
+import { inputSide } from "./input.cva.js";
+import { labelBase, labelTypography } from "./label.cva.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Label } from "react-aria-components";
+const FormFieldLabel = ({ ref, as, label, isRequired, isDisabled, labelProps, size }) => {
+	const uiStyle = UIStyle.useConfig();
+	const labelTypographyMap = uiStyle?.label?.typography ?? labelTypography;
+	const labelBaseCva = uiStyle?.label?.cva ?? labelBase;
+	const inputSideCva = uiStyle?.input?.sideCva ?? inputSide;
+	return /* @__PURE__ */ jsx(Label, {
+		...labelProps,
+		children: /* @__PURE__ */ jsxs(Typography, {
+			ref,
+			as: "span",
+			size: "label-2",
+			variant: "prominent-1",
+			...labelTypographyMap({ as }),
+			className: clsx(labelBaseCva({ as }), as && ["filter", "floating"].includes(as) && inputSideCva({
+				size,
+				type: "left"
+			}), labelProps?.className),
+			children: [label, isRequired && /* @__PURE__ */ jsx("span", {
+				className: clsx(!isDisabled && "text-text-error-1"),
+				children: "*"
+			})]
+		})
+	});
+};
+export { FormFieldLabel };

package/dist/HeaderText.js

@@ -0,0 +1,10 @@
+import { Typography } from "./Typography.js";
+import { jsx } from "react/jsx-runtime";
+const HeaderText = ({ children }) => /* @__PURE__ */ jsx(Typography, {
+	variant: "default",
+	size: "label-1",
+	as: "span",
+	className: "overflow-hidden text-ellipsis px-table-cell-content-side-m py-table-cell-content-height-m text-text-default-1",
+	children
+});
+export { HeaderText };

package/dist/Highlight.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+const HighlightIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "m14.302 12.145-2.6-2.6-3.942 3.942a.29.29 0 0 0-.087.211q0 .125.087.212l2.161 2.177a.29.29 0 0 0 .212.086.29.29 0 0 0 .211-.086zm-1.53-3.654 2.584 2.584 4.27-4.254a.3.3 0 0 0 .086-.22.3.3 0 0 0-.087-.222l-2.158-2.158a.3.3 0 0 0-.22-.086.3.3 0 0 0-.222.086zm-1.582-.543 4.708 4.708-4.484 4.5q-.543.542-1.274.542-.73 0-1.273-.542l-.096-.096-.404.388q-.246.216-.556.34a1.7 1.7 0 0 1-.642.126H5.071q-.31 0-.43-.276-.117-.276.103-.497l2.07-2.054-.077-.077a1.82 1.82 0 0 1-.558-1.288q-.016-.747.527-1.289zm0 0 4.79-4.79q.543-.542 1.274-.542.73 0 1.273.542l2.177 2.161q.542.543.542 1.273 0 .732-.542 1.273l-4.806 4.791z"
+	})
+});
+export { HighlightIcon };

package/dist/HighlightOn.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const HighlightOnIcon = ({ highlightColor,...props }) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsxs("g", {
+		fill: "currentColor",
+		children: [/* @__PURE__ */ jsx("path", {
+			d: "M14.3021 12.1445L11.7021 9.54447L7.75955 13.4867C7.70188 13.5444 7.67305 13.6149 7.67305 13.6982C7.67305 13.7816 7.70188 13.8521 7.75955 13.91L9.92105 16.0867C9.97888 16.1444 10.0495 16.1732 10.1328 16.1732C10.2161 16.1732 10.2866 16.1444 10.3443 16.0867L14.3021 12.1445ZM12.7711 8.49072L15.3558 11.0752L19.6251 6.82147C19.6827 6.76381 19.7116 6.69006 19.7116 6.60022C19.7116 6.51039 19.6827 6.43664 19.6251 6.37897L17.4673 4.22147C17.4096 4.16381 17.336 4.13497 17.2463 4.13497C17.1565 4.13497 17.0827 4.16381 17.0251 4.22147L12.7711 8.49072ZM11.1903 7.94847L15.8981 12.656L11.4136 17.156C11.0519 17.5175 10.6275 17.6982 10.1403 17.6982C9.65313 17.6982 9.2288 17.5175 8.8673 17.156L8.77105 17.0597L8.3673 17.4482C8.20313 17.5919 8.01755 17.7054 7.81055 17.7887C7.60355 17.8721 7.3898 17.9137 7.1693 17.9137H5.0713C4.86363 17.9137 4.72038 17.8217 4.64155 17.6377C4.56255 17.4537 4.5968 17.2881 4.7443 17.1407L6.81355 15.0867L6.73655 15.01C6.37505 14.6483 6.18913 14.2188 6.1788 13.7215C6.16863 13.224 6.3443 12.7945 6.7058 12.433L11.1903 7.94847ZM11.1903 7.94847L15.9808 3.15797C16.3423 2.79647 16.7666 2.61572 17.2538 2.61572C17.741 2.61572 18.1654 2.79647 18.5271 3.15797L20.7038 5.31947C21.0653 5.68097 21.2461 6.10531 21.2461 6.59247C21.2461 7.07964 21.0653 7.50397 20.7038 7.86547L15.8981 12.656L11.1903 7.94847Z",
+			fill: "currentColor"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M2.84872 23.741C3.02105 23.9135 3.23613 23.9998 3.49397 23.9998H20.686C20.9438 23.9998 21.1589 23.9135 21.3312 23.741C21.5037 23.5687 21.59 23.3537 21.59 23.096V21.1728C21.59 20.9151 21.5037 20.7001 21.3312 20.5278C21.1589 20.3553 20.9438 20.269 20.686 20.269H3.49397C3.23613 20.269 3.02105 20.3553 2.84872 20.5278C2.67622 20.7001 2.58997 20.9151 2.58997 21.1728V23.096C2.58997 23.3537 2.67622 23.5687 2.84872 23.741Z",
+			fill: highlightColor || "black"
+		})]
+	})
+});
+export { HighlightOnIcon };

package/dist/HyperlinkAction.js

@@ -0,0 +1,70 @@
+import { LinkIcon } from "./Link.js";
+import { Button } from "./Button.js";
+import { InlineIconButton } from "./InlineIconButton.js";
+import { ns } from "./i18n.js";
+import { TextInput } from "./TextInput.js";
+import { ResponsivePopover } from "./ResponsivePopover.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+const HyperlinkAction = ({ editor }) => {
+	const { t } = useTranslation("ui");
+	const [isOpen, setIsOpen] = useState(false);
+	const [url, setUrl] = useState("");
+	const isLinkEnabled = !!editor.extensionManager.extensions.find((extension) => extension.name === "link");
+	const linkHref = editor.getAttributes("link")?.href;
+	useEffect(() => {
+		setUrl(linkHref || "");
+	}, [linkHref]);
+	if (!isLinkEnabled) return null;
+	const onRemove = () => {
+		editor.chain().focus().extendMarkRange("link").unsetLink().run();
+		setIsOpen(false);
+	};
+	const onApply = () => {
+		editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+		setIsOpen(false);
+	};
+	return /* @__PURE__ */ jsxs(ResponsivePopover, {
+		isOpen,
+		onOpenChange: setIsOpen,
+		sheetLabel: t(($) => $.ui.textEditor.link.label),
+		trigger: /* @__PURE__ */ jsx(InlineIconButton, {
+			color: "secondary",
+			label: t(($) => $.ui.textEditor.link.label),
+			icon: LinkIcon,
+			className: clsx(editor.isActive("link") && "!text-interactive-text-primary-idle"),
+			isDisabled: !editor.isEditable
+		}),
+		children: [/* @__PURE__ */ jsx(TextInput, {
+			variant: "outlined",
+			hideLabel: true,
+			label: t(($) => $.ui.textEditor.link.urlLabel),
+			placeholder: t(($) => $.ui.textEditor.link.urlPlaceholder),
+			value: url,
+			onChange: setUrl,
+			className: "mb-4"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex justify-between",
+			children: [/* @__PURE__ */ jsx(Button, {
+				variant: "contained",
+				color: "secondary",
+				size: "xs",
+				width: "hug",
+				onPress: onApply,
+				isDisabled: !url,
+				children: t(($) => $.ui.textEditor.link.apply)
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "outlined",
+				color: "secondary",
+				size: "xs",
+				width: "hug",
+				onPress: onRemove,
+				isDisabled: !editor.isActive("link"),
+				children: t(($) => $.ui.textEditor.link.remove)
+			})]
+		})]
+	});
+};
+export { HyperlinkAction };

package/dist/IconButton.js

@@ -0,0 +1,12 @@
+import { Button } from "./Button.js";
+import { jsx } from "react/jsx-runtime";
+const IconButton = ({ label,...props }) => {
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		iconOnly: true,
+		width: "hug",
+		disableTooltip: props.disableTooltip,
+		children: label
+	});
+};
+export { IconButton };