import { Box, Flex, Input } from "../customizables/index.js";
import React from "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";

//#region src/elements/InputWithIcon.tsx
const InputWithIcon = React.forwardRef((props, ref) => {
	const { leftIcon, sx,...rest } = props;
	return /* @__PURE__ */ jsxs(Flex, {
		center: true,
		sx: {
			width: "100%",
			position: "relative"
		},
		children: [leftIcon ? /* @__PURE__ */ jsx(Box, {
			sx: (theme) => [{
				position: "absolute",
				left: theme.space.$3x5,
				width: theme.sizes.$3x5,
				height: theme.sizes.$3x5,
				pointerEvents: "none",
				display: "grid",
				placeContent: "center",
				"& svg": {
					position: "absolute",
					width: "100%",
					height: "100%"
				}
			}],
			children: leftIcon
		}) : null, /* @__PURE__ */ jsx(Input, {
			...rest,
			sx: [(theme) => ({
				width: "100%",
				paddingLeft: theme.space.$10
			}), sx],
			ref
		})]
	});
});

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