import { useClipboard } from "../hooks/useClipboard.js";
import clipboard_default from "../icons/clipboard.js";
import tick_shield_default from "../icons/tick-shield.js";
import { descriptors } from "../customizables/elementDescriptors.js";
import { Button, Flex, Icon, Input } from "../customizables/index.js";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";

//#region src/elements/ClipboardInput.tsx
const ClipboardInput = (props) => {
	const { id, value, copyIcon = clipboard_default, copiedIcon = tick_shield_default, sx,...rest } = props;
	const { onCopy, hasCopied } = useClipboard(value);
	return /* @__PURE__ */ jsxs(Flex, {
		direction: "col",
		justify: "center",
		sx: [{ position: "relative" }, sx],
		children: [/* @__PURE__ */ jsx(Input, {
			...rest,
			value,
			isDisabled: true,
			sx: (theme) => ({ paddingRight: theme.space.$8 })
		}), /* @__PURE__ */ jsx(Button, {
			elementDescriptor: descriptors.formFieldInputCopyToClipboardButton,
			variant: "ghost",
			onClick: onCopy,
			sx: {
				position: "absolute",
				right: 0
			},
			children: /* @__PURE__ */ jsx(Icon, {
				elementDescriptor: descriptors.formFieldInputCopyToClipboardIcon,
				icon: hasCopied ? copiedIcon : copyIcon,
				size: "sm"
			})
		})]
	});
};

//#endregion
export { ClipboardInput };
//# sourceMappingURL=ClipboardInput.js.map