@plastic-js/tsumiki 0.1.22 → 0.1.24

package/dist/components/Field.js

@@ -1,7 +1,123 @@
-import { Field } from "@plastic-js/ark";
+import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
+import { mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
 //#region src/components/Field.jsx
-var Field_default = Field;
+var _tmpl4 = template("<p></p>");
+var _tmpl3 = template("<div></div>");
+var _tmpl2 = template("<span>*</span>");
+var _tmpl = template("<span><!><!></span>");
+var rootClass = css({
+	display: "flex",
+	flexDirection: "column",
+	gap: "var(--tsu-spacing-xs)"
+});
+var compactRootClass = css({
+	display: "flex",
+	flexDirection: "row",
+	alignItems: "center",
+	flexWrap: "wrap",
+	gap: "var(--tsu-spacing-xs)"
+});
+var labelClass = css({
+	fontSize: "var(--tsu-font-size-sm)",
+	fontWeight: 500,
+	color: "var(--tsu-fg)"
+});
+var compactLabelClass = css({
+	flexShrink: 0,
+	marginRight: "var(--tsu-spacing-sm)"
+});
+var inputWrapClass = css({
+	display: "flex",
+	flexDirection: "column",
+	flex: 1,
+	minWidth: 0,
+	gap: "var(--tsu-spacing-xs)"
+});
+var requiredClass = css({
+	color: "var(--tsu-danger-9)",
+	marginLeft: "var(--tsu-spacing-xxs)"
+});
+var errorTextClass = css({
+	fontSize: "var(--tsu-font-size-sm)",
+	color: "var(--tsu-danger-9)",
+	margin: 0,
+	flexBasis: "100%"
+});
+var helperTextClass = css({
+	fontSize: "var(--tsu-font-size-sm)",
+	color: "var(--tsu-neutral-11)",
+	margin: 0,
+	flexBasis: "100%"
+});
+var read = (v) => typeof v === "function" ? v() : v;
+var Field = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$1({
+		label: "",
+		error: "",
+		helper: "",
+		required: false,
+		compact: false
+	}, props), [
+		"label",
+		"error",
+		"helper",
+		"required",
+		"compact",
+		"className",
+		"children"
+	]);
+	const error = () => read(local.error);
+	const helper = () => read(local.helper);
+	const hasError = () => !!error();
+	const hasHelper = () => !!helper();
+	const isCompact = () => read(local.compact);
+	return jsx("div", mergeProps(rest, {
+		className: () => [isCompact() ? compactRootClass : rootClass, local.className].filter(Boolean).join(" "),
+		get "data-invalid"() {
+			return hasError() ? "" : void 0;
+		},
+		children: [
+			() => {
+				const label = read(local.label);
+				if (!label) return null;
+				return () => {
+					const _el0 = _tmpl.cloneNode(true);
+					const _el1 = _el0.firstChild;
+					const _el2 = _el0.firstChild.nextSibling;
+					insert(_el0, () => label, _el1);
+					insert(_el0, () => read(local.required) && (() => {
+						const _el0 = _tmpl2.cloneNode(true);
+						setProp(_el0, "className", () => requiredClass);
+						return _el0;
+					})(), _el2);
+					setProp(_el0, "className", () => [labelClass, isCompact() && compactLabelClass].filter(Boolean).join(" "));
+					return _el0;
+				};
+			},
+			() => isCompact() ? () => {
+				const _el0 = _tmpl3.cloneNode(true);
+				insert(_el0, () => local.children);
+				setProp(_el0, "className", () => inputWrapClass);
+				return _el0;
+			} : local.children,
+			() => {
+				if (hasError()) return () => {
+					const _el0 = _tmpl4.cloneNode(true);
+					insert(_el0, () => error());
+					setProp(_el0, "className", () => errorTextClass);
+					return _el0;
+				};
+				if (hasHelper()) return () => {
+					const _el0 = _tmpl4.cloneNode(true);
+					insert(_el0, () => helper());
+					setProp(_el0, "className", () => helperTextClass);
+					return _el0;
+				};
+				return null;
+			}
+		]
+	}));
+};
 //#endregion
-export { Field_default as default };
-
-//# sourceMappingURL=Field.js.map
+export { Field as default };

package/dist/components/Fieldset.js

@@ -1,7 +1,66 @@
-import { Fieldset } from "@plastic-js/ark";
+import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
+import { mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
 //#region src/components/Fieldset.jsx
-var Fieldset_default = Fieldset;
+var _tmpl2 = template("<p></p>");
+var _tmpl = template("<div></div>");
+var rootClass = css({
+	display: "flex",
+	flexDirection: "column",
+	gap: "var(--tsu-spacing-xs)",
+	border: "1px solid var(--tsu-neutral-7)",
+	borderRadius: "var(--tsu-radius-l1-md)",
+	padding: "var(--tsu-spacing-lg)"
+});
+var legendClass = css({
+	fontSize: "var(--tsu-font-size-md)",
+	fontWeight: 600,
+	color: "var(--tsu-fg)",
+	padding: 0,
+	margin: 0
+});
+var helperClass = css({
+	fontSize: "var(--tsu-font-size-sm)",
+	color: "var(--tsu-neutral-11)",
+	margin: 0
+});
+var read = (v) => typeof v === "function" ? v() : v;
+var Fieldset = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$1({
+		legend: "",
+		helper: ""
+	}, props), [
+		"legend",
+		"helper",
+		"className",
+		"children"
+	]);
+	return jsx("div", mergeProps(rest, {
+		className: () => [rootClass, local.className].filter(Boolean).join(" "),
+		children: [
+			() => {
+				const legend = read(local.legend);
+				if (!legend) return null;
+				return () => {
+					const _el0 = _tmpl.cloneNode(true);
+					insert(_el0, () => legend);
+					setProp(_el0, "className", () => legendClass);
+					return _el0;
+				};
+			},
+			() => local.children,
+			() => {
+				const helper = read(local.helper);
+				if (!helper) return null;
+				return () => {
+					const _el0 = _tmpl2.cloneNode(true);
+					insert(_el0, () => helper);
+					setProp(_el0, "className", () => helperClass);
+					return _el0;
+				};
+			}
+		]
+	}));
+};
 //#endregion
-export { Fieldset_default as default };
-
-//# sourceMappingURL=Fieldset.js.map
+export { Fieldset as default };

package/dist/components/FileUpload.js

@@ -1,7 +1,184 @@
+import { jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
 import { FileUpload } from "@plastic-js/ark";
+import { splitProps } from "@plastic-js/plastic";
 //#region src/components/FileUpload.jsx
-var FileUpload_default = FileUpload;
+var _tmpl2 = template("<span>Drop files here or click to browse</span>");
+var _tmpl = template("<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"M18 6 6 18M6 6l12 12\"></path></svg>");
+var read = (v) => typeof v === "function" ? v() : v;
+var formatSize = (bytes) => {
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+	return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+var rootClass = css({
+	display: "flex",
+	flexDirection: "column",
+	gap: "var(--tsu-spacing-md)"
+});
+var dropzoneClass = css({
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "center",
+	justifyContent: "center",
+	gap: "var(--tsu-spacing-sm)",
+	padding: "var(--tsu-spacing-xl)",
+	border: "2px dashed var(--tsu-accent-7)",
+	borderRadius: "var(--tsu-radius-l2-md)",
+	backgroundColor: "var(--tsu-bg)",
+	cursor: "pointer",
+	minHeight: "120px",
+	transition: "border-color var(--tsu-transition-fast), background-color var(--tsu-transition-fast)",
+	touchAction: "manipulation",
+	"&[data-disabled]": {
+		opacity: .5,
+		cursor: "not-allowed",
+		pointerEvents: "none"
+	}
+});
+var dropzoneTextClass = css({
+	fontSize: "var(--tsu-font-size-sm)",
+	color: "var(--tsu-neutral-9)",
+	textAlign: "center"
+});
+var itemGroupClass = css({
+	display: "flex",
+	flexDirection: "column",
+	gap: "var(--tsu-spacing-sm)",
+	listStyle: "none",
+	margin: 0,
+	padding: 0
+});
+var itemClass = css({
+	display: "flex",
+	alignItems: "center",
+	gap: "var(--tsu-spacing-sm)",
+	padding: "var(--tsu-spacing-sm) var(--tsu-spacing-md)",
+	backgroundColor: "var(--tsu-bg)",
+	border: "1px solid var(--tsu-neutral-5)",
+	borderRadius: "var(--tsu-radius-l2-md)"
+});
+var itemNameClass = css({
+	flex: 1,
+	fontSize: "var(--tsu-font-size-sm)",
+	color: "var(--tsu-fg)",
+	whiteSpace: "nowrap",
+	overflow: "hidden",
+	textOverflow: "ellipsis"
+});
+var itemSizeTextClass = css({
+	fontSize: "var(--tsu-font-size-xs)",
+	color: "var(--tsu-neutral-9)",
+	marginTop: "var(--tsu-spacing-xxs)"
+});
+var itemDeleteClass = css({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	width: "var(--tsu-level-primary-sm)",
+	height: "var(--tsu-level-primary-sm)",
+	flexShrink: 0,
+	border: "none",
+	background: "none",
+	color: "var(--tsu-neutral-9)",
+	cursor: "pointer",
+	borderRadius: "var(--tsu-radius-l1-md)",
+	padding: 0
+});
+var clearClass = css({
+	display: "inline-flex",
+	alignItems: "center",
+	gap: "var(--tsu-spacing-xs)",
+	padding: "var(--tsu-spacing-sm) var(--tsu-spacing-md)",
+	border: "1px solid var(--tsu-neutral-7)",
+	borderRadius: "var(--tsu-radius-l2-md)",
+	backgroundColor: "var(--tsu-bg)",
+	color: "var(--tsu-neutral-11)",
+	fontSize: "var(--tsu-font-size-sm)",
+	cursor: "pointer",
+	fontFamily: "inherit",
+	touchAction: "manipulation",
+	"&:disabled": {
+		opacity: .5,
+		cursor: "not-allowed"
+	}
+});
+var deleteIcon = _tmpl.cloneNode(true);
+var FileUpload$1 = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className", "children"]);
+	return jsx(FileUpload.Root, mergeProps(rest, {
+		get className() {
+			return [rootClass, local.className].filter(Boolean).join(" ");
+		},
+		children: [
+			jsx(FileUpload.Dropzone, mergeProps({
+				className: dropzoneClass,
+				children: (() => {
+					const _el0 = _tmpl2.cloneNode(true);
+					setProp(_el0, "className", () => dropzoneTextClass);
+					return _el0;
+				})()
+			})),
+			() => local.children,
+			jsx(FileUpload.HiddenInput, {})
+		]
+	}));
+};
+var FileUploadItemGroup = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className", "children"]);
+	return jsx(FileUpload.ItemGroup, mergeProps(rest, {
+		get className() {
+			return [itemGroupClass, local.className].filter(Boolean).join(" ");
+		},
+		children: () => local.children
+	}));
+};
+var FileUploadItem = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className", "file"]);
+	return jsx(FileUpload.Item, mergeProps(rest, {
+		get file() {
+			return local.file;
+		},
+		get className() {
+			return [itemClass, local.className].filter(Boolean).join(" ");
+		},
+		children: [
+			jsx(FileUpload.ItemName, mergeProps({
+				className: itemNameClass,
+				children: () => read(local.file).name
+			})),
+			jsx(FileUpload.ItemSizeText, mergeProps({
+				className: itemSizeTextClass,
+				children: () => formatSize(read(local.file).size)
+			})),
+			jsx(FileUpload.ItemDeleteTrigger, mergeProps({
+				className: itemDeleteClass,
+				children: deleteIcon
+			}))
+		]
+	}));
+};
+var FileUploadClearTrigger = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className", "children"]);
+	return jsx(FileUpload.ClearTrigger, mergeProps(rest, {
+		get className() {
+			return [clearClass, local.className].filter(Boolean).join(" ");
+		},
+		children: () => local.children || "Clear"
+	}));
+};
+FileUpload$1.origin = {
+	Root: FileUpload.Root,
+	Label: FileUpload.Label,
+	Dropzone: FileUpload.Dropzone,
+	Trigger: FileUpload.Trigger,
+	ItemGroup: FileUpload.ItemGroup,
+	Item: FileUpload.Item,
+	ItemName: FileUpload.ItemName,
+	ItemSizeText: FileUpload.ItemSizeText,
+	ItemDeleteTrigger: FileUpload.ItemDeleteTrigger,
+	ClearTrigger: FileUpload.ClearTrigger,
+	HiddenInput: FileUpload.HiddenInput
+};
 //#endregion
-export { FileUpload_default as default };
-
-//# sourceMappingURL=FileUpload.js.map
+export { FileUploadClearTrigger, FileUploadItem, FileUploadItemGroup, FileUpload$1 as default };

package/dist/components/FocusTrap.js

@@ -3,5 +3,3 @@ import { FocusTrap } from "@plastic-js/ark";
 var FocusTrap_default = FocusTrap;
 //#endregion
 export { FocusTrap_default as default };
-
-//# sourceMappingURL=FocusTrap.js.map

package/dist/components/Icon.js

@@ -1,7 +1,9 @@
 import { setProp, template } from "@plastic-js/plastic/jsx-runtime";
 import { css } from "@emotion/css";
+import { mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
 //#region src/components/Icon.jsx
 var _tmpl = template("<span></span>");
+var read = (v) => typeof v === "function" ? v() : v;
 var iconClass = css({
 	display: "inline-flex",
 	alignItems: "center",
@@ -14,24 +16,37 @@ var iconClass = css({
 		strokeWidth: "var(--icon-sw)"
 	}
 });
-var Icon = ({ svg, size = 22, strokeWidth = 1.25, className }) => {
-	const style = {
-		width: `${size}px`,
-		height: `${size}px`,
-		"--icon-sw": strokeWidth
+var Icon = (props = {}) => {
+	const [local] = splitProps(mergeProps$1({
+		size: 22,
+		strokeWidth: 1.25
+	}, props), [
+		"svg",
+		"size",
+		"strokeWidth",
+		"className"
+	]);
+	return () => {
+		const svgContent = read(local.svg);
+		const s = read(local.size);
+		const sw = read(local.strokeWidth);
+		const cls = read(local.className);
+		const style = {
+			width: `${s}px`,
+			height: `${s}px`,
+			"--icon-sw": sw
+		};
+		const setEl = (el) => {
+			if (el && el.innerHTML !== svgContent) el.innerHTML = svgContent;
+		};
+		return (() => {
+			const _el0 = _tmpl.cloneNode(true);
+			setProp(_el0, "className", () => cls ? `${iconClass} ${cls}` : iconClass);
+			setProp(_el0, "ref", () => setEl);
+			setProp(_el0, "style", () => style);
+			return _el0;
+		})();
 	};
-	const setEl = (el) => {
-		if (el && el.innerHTML !== svg) el.innerHTML = svg;
-	};
-	return (() => {
-		const _el0 = _tmpl.cloneNode(true);
-		setProp(_el0, "className", () => className ? `${iconClass} ${className}` : iconClass);
-		setProp(_el0, "ref", () => setEl);
-		setProp(_el0, "style", () => style);
-		return _el0;
-	})();
 };
 //#endregion
 export { Icon as default };
-
-//# sourceMappingURL=Icon.js.map

package/dist/components/Input.js

@@ -0,0 +1,211 @@
+import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
+import { createSignal, mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
+import { ark } from "@plastic-js/ark/factory";
+//#region src/components/Input.jsx
+var _tmpl5 = template("<svg fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" viewBox=\"0 0 24 24\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"></path><circle cx=\"12\" cy=\"12\" r=\"3\"></circle></svg>");
+var _tmpl4 = template("<svg fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" viewBox=\"0 0 24 24\"><path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94\"></path><path d=\"M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19\"></path><line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"></line></svg>");
+var _tmpl3 = template("<button type=\"button\"></button>");
+var _tmpl2 = template("<div><!><!><!></div>");
+var _tmpl = template("<span></span>");
+var wrapperClass = css({
+	display: "flex",
+	alignItems: "center",
+	width: "100%",
+	gap: "var(--tsu-spacing-xs)",
+	fontFamily: "inherit",
+	transition: "background-color var(--tsu-transition-fast), border-color var(--tsu-transition-fast)"
+});
+var sizeClasses = {
+	xs: css({
+		height: "var(--tsu-comp-height-xs)",
+		padding: "var(--tsu-comp-padding-y-xs) var(--tsu-comp-padding-x-xs)",
+		fontSize: "var(--tsu-comp-font-size-xs)",
+		borderRadius: "var(--tsu-radius-l1-xs)"
+	}),
+	sm: css({
+		height: "var(--tsu-comp-height-sm)",
+		padding: "var(--tsu-comp-padding-y-sm) var(--tsu-comp-padding-x-sm)",
+		fontSize: "var(--tsu-comp-font-size-sm)",
+		borderRadius: "var(--tsu-radius-l1-sm)"
+	}),
+	md: css({
+		height: "var(--tsu-comp-height-md)",
+		padding: "var(--tsu-comp-padding-y-md) var(--tsu-comp-padding-x-md)",
+		fontSize: "var(--tsu-comp-font-size-md)",
+		borderRadius: "var(--tsu-radius-l1-md)"
+	}),
+	lg: css({
+		height: "var(--tsu-comp-height-lg)",
+		padding: "var(--tsu-comp-padding-y-lg) var(--tsu-comp-padding-x-lg)",
+		fontSize: "var(--tsu-comp-font-size-lg)",
+		borderRadius: "var(--tsu-radius-l1-lg)"
+	}),
+	xl: css({
+		height: "var(--tsu-comp-height-xl)",
+		padding: "var(--tsu-comp-padding-y-xl) var(--tsu-comp-padding-x-xl)",
+		fontSize: "var(--tsu-comp-font-size-xl)",
+		borderRadius: "var(--tsu-radius-l1-xl)"
+	})
+};
+var variantClasses = {
+	solid: css({
+		backgroundColor: "var(--tsu-neutral-3)",
+		border: "1px solid transparent",
+		color: "var(--tsu-fg)",
+		"&:focus-within": {
+			backgroundColor: "var(--tsu-focus-bg)",
+			borderColor: "var(--tsu-focus-border)"
+		}
+	}),
+	outline: css({
+		backgroundColor: "var(--tsu-bg)",
+		border: "1px solid var(--tsu-accent-8)",
+		color: "var(--tsu-fg)",
+		"&:focus-within": {
+			backgroundColor: "var(--tsu-focus-bg)",
+			borderColor: "var(--tsu-focus-border)"
+		}
+	})
+};
+var errorClass = css({
+	borderColor: "var(--tsu-danger-9) !important",
+	"&:focus-within": { borderColor: "var(--tsu-danger-9) !important" }
+});
+var disabledClass = css({
+	backgroundColor: "var(--tsu-disabled-bg) !important",
+	borderColor: "var(--tsu-disabled-border) !important",
+	color: "var(--tsu-disabled-fg) !important",
+	cursor: "not-allowed"
+});
+var inputClass = css({
+	flex: 1,
+	minWidth: 0,
+	border: "none",
+	outline: "none",
+	background: "transparent",
+	fontFamily: "inherit",
+	fontSize: "inherit",
+	color: "inherit",
+	padding: 0,
+	"&::placeholder": { color: "var(--tsu-neutral-11)" }
+});
+var affixClass = css({
+	flexShrink: 0,
+	display: "inline-flex",
+	alignItems: "center",
+	color: "var(--tsu-neutral-11)",
+	userSelect: "none",
+	"& > svg": {
+		width: "1.3em",
+		height: "1.3em",
+		display: "block"
+	}
+});
+var eyeButtonClass = css({
+	flexShrink: 0,
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	width: "1.7em",
+	height: "1.7em",
+	padding: 0,
+	background: "none",
+	border: "none",
+	borderRadius: "var(--tsu-radius-l1-sm)",
+	color: "var(--tsu-neutral-11)",
+	cursor: "pointer",
+	"& svg": {
+		width: "100%",
+		height: "100%",
+		display: "block"
+	},
+	"&:hover": { color: "var(--tsu-fg)" },
+	"&:focus-visible": {
+		outline: "2px solid var(--tsu-accent-9)",
+		outlineOffset: "1px"
+	}
+});
+var read = (v) => typeof v === "function" ? v() : v;
+var Input = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$1({
+		solid: false,
+		size: "md",
+		disabled: false,
+		invalid: false
+	}, props), [
+		"solid",
+		"size",
+		"disabled",
+		"invalid",
+		"className",
+		"inputClassName",
+		"type",
+		"prefix",
+		"suffix",
+		"ref"
+	]);
+	const showPassword = createSignal(false);
+	const isPassword = read(local.type) === "password";
+	const wrapperClassName = () => [
+		wrapperClass,
+		sizeClasses[read(local.size)],
+		read(local.solid) ? variantClasses.solid : variantClasses.outline,
+		read(local.invalid) && errorClass,
+		read(local.disabled) && disabledClass,
+		read(local.className)
+	].filter(Boolean).join(" ");
+	const inputType = () => {
+		if (!isPassword) return read(local.type);
+		return showPassword() ? "text" : "password";
+	};
+	const renderAffix = (content) => {
+		if (content == null) return null;
+		return () => {
+			const _el0 = _tmpl.cloneNode(true);
+			insert(_el0, () => content);
+			setProp(_el0, "className", () => affixClass);
+			return _el0;
+		};
+	};
+	return () => {
+		const _el0 = _tmpl2.cloneNode(true);
+		const _el1 = _el0.firstChild;
+		const _el2 = _el0.firstChild.nextSibling;
+		const _el3 = _el0.firstChild.nextSibling.nextSibling;
+		insert(_el0, () => {
+			const p = read(local.prefix);
+			if (p == null) return null;
+			return renderAffix(p);
+		}, _el1);
+		insert(_el0, () => jsx(ark.input, mergeProps({ get ref() {
+			return local.ref;
+		} }, rest, {
+			type: inputType,
+			disabled: () => read(local.disabled),
+			className: () => [inputClass, read(local.inputClassName)].filter(Boolean).join(" ")
+		})), _el2);
+		insert(_el0, () => {
+			if (isPassword && read(local.suffix) == null) {
+				const visible = showPassword();
+				return () => {
+					const _el0 = _tmpl3.cloneNode(true);
+					insert(_el0, () => visible ? _tmpl4.cloneNode(true) : _tmpl5.cloneNode(true));
+					setProp(_el0, "className", () => eyeButtonClass);
+					setProp(_el0, "onClick", () => showPassword(!visible));
+					setProp(_el0, "tabIndex", () => -1);
+					setProp(_el0, "aria-label", () => visible ? "Hide password" : "Show password");
+					return _el0;
+				};
+			}
+			const s = read(local.suffix);
+			if (s == null) return null;
+			return renderAffix(s);
+		}, _el3);
+		setProp(_el0, "className", () => wrapperClassName);
+		return _el0;
+	};
+};
+Input.origin = { Root: ark.input };
+//#endregion
+export { Input as default };