@plastic-js/tsumiki 0.1.22 → 0.1.24

package/dist/components/Switch.js

@@ -1,7 +1,150 @@
+import { jsx, mergeProps } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
 import { Switch } from "@plastic-js/ark";
+import { mergeProps as mergeProps$2, splitProps } from "@plastic-js/plastic";
 //#region src/components/Switch.jsx
-var Switch_default = Switch;
+var sizeClasses = {
+	xs: css({
+		"--_sw-track-height": "var(--tsu-comp-secondary-height-xs)",
+		"--_sw-track-width": "calc(2 * var(--tsu-comp-secondary-height-xs))",
+		"--_sw-track-radius": "calc(var(--tsu-comp-secondary-height-xs) / 2)",
+		"--_sw-thumb-size": "calc(var(--tsu-comp-secondary-height-xs) - 4px)",
+		"--_sw-thumb-offset": "2px",
+		"--_sw-thumb-travel": "var(--tsu-comp-secondary-height-xs)",
+		"--_sw-gap": "var(--tsu-spacing-sm)",
+		"--_sw-min-height": "var(--tsu-comp-height-xs)",
+		"--_sw-font-size": "var(--tsu-comp-font-size-xs)",
+		"--_sw-line-height": "var(--tsu-comp-line-height-xs)"
+	}),
+	sm: css({
+		"--_sw-track-height": "var(--tsu-comp-secondary-height-sm)",
+		"--_sw-track-width": "calc(2 * var(--tsu-comp-secondary-height-sm))",
+		"--_sw-track-radius": "calc(var(--tsu-comp-secondary-height-sm) / 2)",
+		"--_sw-thumb-size": "calc(var(--tsu-comp-secondary-height-sm) - 4px)",
+		"--_sw-thumb-offset": "2px",
+		"--_sw-thumb-travel": "var(--tsu-comp-secondary-height-sm)",
+		"--_sw-gap": "9px",
+		"--_sw-min-height": "var(--tsu-comp-height-sm)",
+		"--_sw-font-size": "var(--tsu-comp-font-size-sm)",
+		"--_sw-line-height": "var(--tsu-comp-line-height-sm)"
+	}),
+	md: css({
+		"--_sw-track-height": "var(--tsu-comp-secondary-height-md)",
+		"--_sw-track-width": "calc(2 * var(--tsu-comp-secondary-height-md))",
+		"--_sw-track-radius": "calc(var(--tsu-comp-secondary-height-md) / 2)",
+		"--_sw-thumb-size": "calc(var(--tsu-comp-secondary-height-md) - 4px)",
+		"--_sw-thumb-offset": "2px",
+		"--_sw-thumb-travel": "var(--tsu-comp-secondary-height-md)",
+		"--_sw-gap": "10px",
+		"--_sw-min-height": "var(--tsu-comp-height-md)",
+		"--_sw-font-size": "var(--tsu-comp-font-size-md)",
+		"--_sw-line-height": "var(--tsu-comp-line-height-md)"
+	}),
+	lg: css({
+		"--_sw-track-height": "var(--tsu-comp-secondary-height-lg)",
+		"--_sw-track-width": "calc(2 * var(--tsu-comp-secondary-height-lg))",
+		"--_sw-track-radius": "calc(var(--tsu-comp-secondary-height-lg) / 2)",
+		"--_sw-thumb-size": "calc(var(--tsu-comp-secondary-height-lg) - 4px)",
+		"--_sw-thumb-offset": "2px",
+		"--_sw-thumb-travel": "var(--tsu-comp-secondary-height-lg)",
+		"--_sw-gap": "11px",
+		"--_sw-min-height": "var(--tsu-comp-height-lg)",
+		"--_sw-font-size": "var(--tsu-comp-font-size-lg)",
+		"--_sw-line-height": "var(--tsu-comp-line-height-lg)"
+	}),
+	xl: css({
+		"--_sw-track-height": "var(--tsu-comp-secondary-height-xl)",
+		"--_sw-track-width": "calc(2 * var(--tsu-comp-secondary-height-xl))",
+		"--_sw-track-radius": "calc(var(--tsu-comp-secondary-height-xl) / 2)",
+		"--_sw-thumb-size": "calc(var(--tsu-comp-secondary-height-xl) - 4px)",
+		"--_sw-thumb-offset": "2px",
+		"--_sw-thumb-travel": "var(--tsu-comp-secondary-height-xl)",
+		"--_sw-gap": "var(--tsu-spacing-md)",
+		"--_sw-min-height": "var(--tsu-comp-height-xl)",
+		"--_sw-font-size": "var(--tsu-comp-font-size-xl)",
+		"--_sw-line-height": "var(--tsu-comp-line-height-xl)"
+	})
+};
+var rootClass = css({
+	display: "inline-flex",
+	alignItems: "center",
+	gap: "var(--_sw-gap, 10px)",
+	minHeight: "var(--_sw-min-height, var(--tsu-comp-height-md))",
+	cursor: "pointer",
+	fontFamily: "inherit",
+	userSelect: "none",
+	touchAction: "manipulation",
+	WebkitTapHighlightColor: "transparent",
+	"&[data-disabled]": { cursor: "not-allowed" }
+});
+var controlClass = css({
+	position: "relative",
+	width: "var(--_sw-track-width, calc(2 * var(--tsu-comp-secondary-height-md)))",
+	height: "var(--_sw-track-height, var(--tsu-comp-secondary-height-md))",
+	flexShrink: 0,
+	borderRadius: "var(--_sw-track-radius, calc(var(--tsu-comp-secondary-height-md) / 2))",
+	backgroundColor: "var(--tsu-neutral-7)",
+	transition: "background-color var(--tsu-transition-fast)",
+	"&[data-state=\"checked\"]": { backgroundColor: "var(--tsu-accent-9)" },
+	"&[data-disabled]": { backgroundColor: "var(--tsu-neutral-5)" },
+	"&[data-disabled][data-state=\"checked\"]": { backgroundColor: "var(--tsu-disabled-border)" }
+});
+var thumbClass = css({
+	position: "absolute",
+	top: "var(--_sw-thumb-offset, 2px)",
+	left: "var(--_sw-thumb-offset, 2px)",
+	width: "var(--_sw-thumb-size, calc(var(--tsu-comp-secondary-height-md) - 4px))",
+	height: "var(--_sw-thumb-size, calc(var(--tsu-comp-secondary-height-md) - 4px))",
+	borderRadius: "50%",
+	backgroundColor: "var(--tsu-bg)",
+	boxShadow: "0 1px 3px rgba(0,0,0,0.15)",
+	transform: "translateX(0)",
+	transition: "transform var(--tsu-transition-fast)",
+	"&[data-state=\"checked\"]": { transform: "translateX(var(--_sw-thumb-travel, var(--tsu-comp-secondary-height-md)))" },
+	"&[data-disabled]": {
+		backgroundColor: "var(--tsu-neutral-8)",
+		boxShadow: "none"
+	},
+	"&[data-disabled][data-state=\"checked\"]": { backgroundColor: "var(--tsu-bg)" }
+});
+var labelClass = css({
+	fontSize: "var(--_sw-font-size, var(--tsu-comp-font-size-md))",
+	lineHeight: "var(--_sw-line-height, var(--tsu-comp-line-height-md))",
+	color: "var(--tsu-fg)",
+	"&[data-disabled]": { color: "var(--tsu-disabled-fg)" }
+});
+var Switch$1 = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$2({ size: "md" }, props), [
+		"size",
+		"className",
+		"children"
+	]);
+	const classNames = [
+		rootClass,
+		sizeClasses[local.size],
+		local.className
+	].filter(Boolean).join(" ");
+	return jsx(Switch.Root, mergeProps(rest, {
+		className: classNames,
+		children: [
+			jsx(Switch.Control, mergeProps({
+				className: controlClass,
+				children: jsx(Switch.Thumb, mergeProps({ className: thumbClass }))
+			})),
+			() => local.children && jsx(Switch.Label, mergeProps({
+				className: labelClass,
+				children: () => local.children
+			})),
+			jsx(Switch.HiddenInput, {})
+		]
+	}));
+};
+Switch$1.origin = {
+	Root: Switch.Root,
+	Control: Switch.Control,
+	Thumb: Switch.Thumb,
+	Label: Switch.Label,
+	HiddenInput: Switch.HiddenInput
+};
 //#endregion
-export { Switch_default as default };
-
-//# sourceMappingURL=Switch.js.map
+export { Switch$1 as default };

package/dist/components/Tabs.js

@@ -1,7 +1,83 @@
+import { jsx, mergeProps } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
 import { Tabs } from "@plastic-js/ark";
+import { splitProps } from "@plastic-js/plastic";
 //#region src/components/Tabs.jsx
-var Tabs_default = Tabs;
+var listClass = css({
+	position: "relative",
+	display: "flex",
+	borderBottom: "1px solid var(--tsu-neutral-7)"
+});
+var triggerClass = css({
+	position: "relative",
+	zIndex: 1,
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	height: "40px",
+	padding: "0 var(--tsu-container-padding-md)",
+	border: "none",
+	background: "transparent",
+	color: "var(--tsu-neutral-11)",
+	fontSize: "var(--tsu-comp-font-size-md)",
+	fontFamily: "inherit",
+	cursor: "pointer",
+	whiteSpace: "nowrap",
+	"&[data-selected]": { color: "var(--tsu-accent-9)" },
+	"&[data-disabled]": {
+		opacity: .4,
+		cursor: "not-allowed"
+	}
+});
+var indicatorClass = css({
+	position: "absolute",
+	bottom: "-1px",
+	height: "2px",
+	backgroundColor: "var(--tsu-accent-9)",
+	borderRadius: "1px",
+	transition: "left var(--tsu-transition-fast), width var(--tsu-transition-fast)",
+	width: "var(--width)",
+	zIndex: 0
+});
+var contentClass = css({ paddingTop: "var(--tsu-container-padding-md)" });
+var Tabs$1 = (props = {}) => {
+	const [local, rest] = splitProps(props, [
+		"triggers",
+		"className",
+		"children"
+	]);
+	const triggers = local.triggers.map((t) => {
+		if (typeof t === "string") return {
+			key: t,
+			value: t,
+			disabled: false
+		};
+		return {
+			key: t.key,
+			value: t.value,
+			disabled: t.disabled ?? false
+		};
+	});
+	const children = [].concat(local.children).filter(Boolean);
+	return jsx(Tabs.Root, mergeProps(rest, { children: [jsx(Tabs.List, mergeProps({
+		className: listClass,
+		children: [() => triggers.map((t) => jsx(Tabs.Trigger, mergeProps({
+			get value() {
+				return t.key;
+			},
+			get disabled() {
+				return t.disabled;
+			},
+			className: triggerClass,
+			children: () => t.value
+		}))), jsx(Tabs.Indicator, mergeProps({ className: indicatorClass }))]
+	})), () => triggers.map((t, i) => jsx(Tabs.Content, mergeProps({
+		get value() {
+			return t.key;
+		},
+		className: contentClass,
+		children: () => children[i]
+	})))] }));
+};
 //#endregion
-export { Tabs_default as default };
-
-//# sourceMappingURL=Tabs.js.map
+export { Tabs$1 as default };

package/dist/components/TagsInput.js

@@ -1,7 +1,131 @@
+import { jsx, mergeProps, template } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
 import { TagsInput } from "@plastic-js/ark";
+import { mergeProps as mergeProps$2, splitProps } from "@plastic-js/plastic";
 //#region src/components/TagsInput.jsx
-var TagsInput_default = TagsInput;
+var _tmpl = template("<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" width=\"10\" height=\"10\" aria-hidden=\"true\"><path d=\"M18 6 6 18M6 6l12 12\"></path></svg>");
+var rootClass = css({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: "var(--tsu-spacing-xs)",
+	padding: "var(--tsu-spacing-xs) var(--tsu-spacing-sm)",
+	border: "1px solid var(--tsu-accent-8)",
+	borderRadius: "var(--tsu-radius-l1-md)",
+	backgroundColor: "var(--tsu-bg)",
+	minHeight: "var(--tsu-comp-height-lg)",
+	"&:focus-within": { borderColor: "var(--tsu-focus-border)" }
+});
+var tagClass = css({
+	display: "inline-flex",
+	alignItems: "center",
+	gap: "4px",
+	padding: "2px 8px",
+	borderRadius: "var(--tsu-radius-l1-xs)",
+	backgroundColor: "var(--tsu-accent-3)",
+	color: "var(--tsu-accent-9)",
+	fontSize: "var(--tsu-font-size-sm)",
+	fontWeight: 500
+});
+var tagDeleteClass = css({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	width: "16px",
+	height: "16px",
+	borderRadius: "50%",
+	border: "none",
+	background: "transparent",
+	color: "var(--tsu-accent-9)",
+	cursor: "pointer",
+	padding: 0,
+	fontSize: "12px",
+	lineHeight: 1
+});
+var controlClass = css({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: "var(--tsu-spacing-xs)"
+});
+var previewClass = css({
+	display: "flex",
+	alignItems: "center",
+	gap: "4px"
+});
+var inputClass = css({
+	flex: 1,
+	minWidth: "80px",
+	border: "none",
+	outline: "none",
+	background: "transparent",
+	color: "var(--tsu-fg)",
+	fontSize: "var(--tsu-comp-font-size-md)",
+	fontFamily: "inherit",
+	padding: 0,
+	"&::placeholder": { color: "var(--tsu-neutral-11)" }
+});
+var labelClass = css({
+	fontSize: "var(--tsu-comp-font-size-md)",
+	fontWeight: 500,
+	color: "var(--tsu-fg)",
+	marginBottom: "var(--tsu-spacing-xs)"
+});
+var TagItem = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className", "children"]);
+	return jsx(TagsInput.Item, mergeProps(rest, {
+		get className() {
+			return [tagClass, local.className].filter(Boolean).join(" ");
+		},
+		children: [jsx(TagsInput.ItemPreview, mergeProps({
+			className: previewClass,
+			children: [jsx(TagsInput.ItemText, mergeProps({ children: () => rest.value })), jsx(TagsInput.ItemDeleteTrigger, mergeProps({
+				className: tagDeleteClass,
+				children: _tmpl.cloneNode(true)
+			}))]
+		})), jsx(TagsInput.ItemInput, {})]
+	}));
+};
+var TagsInput$1 = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$2({}, props), [
+		"className",
+		"label",
+		"placeholder"
+	]);
+	return jsx(TagsInput.Root, mergeProps(rest, {
+		get className() {
+			return [rootClass, local.className].filter(Boolean).join(" ");
+		},
+		children: [() => local.label && jsx(TagsInput.Label, mergeProps({
+			className: labelClass,
+			children: () => local.label
+		})), jsx(TagsInput.Control, mergeProps({
+			className: controlClass,
+			children: [() => (rest.value?.() || []).map((tag, i) => jsx(TagItem, mergeProps({
+				key: tag,
+				index: i,
+				value: tag
+			}))), jsx(TagsInput.Input, mergeProps({
+				className: inputClass,
+				get placeholder() {
+					return local.placeholder;
+				}
+			}))]
+		}))]
+	}));
+};
+TagsInput$1.origin = {
+	Root: TagsInput.Root,
+	Label: TagsInput.Label,
+	Control: TagsInput.Control,
+	Input: TagsInput.Input,
+	Item: TagsInput.Item,
+	ItemPreview: TagsInput.ItemPreview,
+	ItemText: TagsInput.ItemText,
+	ItemDeleteTrigger: TagsInput.ItemDeleteTrigger,
+	ItemInput: TagsInput.ItemInput,
+	ClearTrigger: TagsInput.ClearTrigger,
+	HiddenInput: TagsInput.HiddenInput
+};
 //#endregion
-export { TagsInput_default as default };
-
-//# sourceMappingURL=TagsInput.js.map
+export { TagsInput$1 as default };

package/dist/components/Toast.js

@@ -1,7 +1,177 @@
+import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
 import { Toast, createToaster } from "@plastic-js/ark";
+import { splitProps } from "@plastic-js/plastic";
 //#region src/components/Toast.jsx
-var Toast_default = Object.assign(Toast, { createToaster });
+var _tmpl2 = template("<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 6 6 18M6 6l12 12\"></path></svg>");
+var _tmpl = template("<span></span>");
+var createToaster$1 = (options = {}) => {
+	return createToaster({
+		overlap: false,
+		...options
+	});
+};
+var toastClass = css({
+	display: "flex",
+	alignItems: "flex-start",
+	gap: "12px",
+	width: "min(92vw, 340px)",
+	padding: "16px",
+	background: "var(--tsu-bg)",
+	border: "1px solid var(--tsu-neutral-6)",
+	borderRadius: "var(--tsu-radius-l2-lg)",
+	borderLeft: "3px solid var(--tsu-neutral-7)",
+	boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
+	pointerEvents: "auto",
+	translate: "var(--x) var(--y)",
+	scale: "var(--scale)",
+	zIndex: "var(--z-index)",
+	height: "var(--height)",
+	opacity: "var(--opacity)",
+	willChange: "translate, opacity, scale",
+	transition: `
+    translate 400ms cubic-bezier(0.21, 1.02, 0.73, 1),
+    scale 400ms cubic-bezier(0.21, 1.02, 0.73, 1),
+    opacity 400ms cubic-bezier(0.21, 1.02, 0.73, 1),
+    height 400ms cubic-bezier(0.21, 1.02, 0.73, 1),
+    box-shadow 200ms cubic-bezier(0.21, 1.02, 0.73, 1)
+  `,
+	"&[data-state=\"closed\"]": { transition: `
+      translate 400ms cubic-bezier(0.06, 0.71, 0.55, 1),
+      scale 400ms cubic-bezier(0.06, 0.71, 0.55, 1),
+      opacity 200ms cubic-bezier(0.06, 0.71, 0.55, 1)
+    ` },
+	"&[data-type=\"success\"]": { borderLeftColor: "var(--tsu-success-9)" },
+	"&[data-type=\"error\"]": { borderLeftColor: "var(--tsu-danger-9)" },
+	"&[data-type=\"info\"]": { borderLeftColor: "var(--tsu-info-9)" },
+	"&[data-type=\"warning\"]": { borderLeftColor: "var(--tsu-warning-9)" }
+});
+var titleClass = css({
+	margin: 0,
+	fontSize: "15px",
+	fontWeight: 700,
+	lineHeight: 1.3,
+	letterSpacing: "-0.01em",
+	color: "var(--tsu-fg)",
+	wordBreak: "break-word"
+});
+var descriptionClass = css({
+	margin: "6px 0 0",
+	fontSize: "14px",
+	lineHeight: 1.5,
+	color: "var(--tsu-neutral-11)",
+	wordBreak: "break-word"
+});
+var closeClass = css({
+	flexShrink: 0,
+	alignSelf: "flex-start",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	width: "28px",
+	height: "28px",
+	margin: "-4px -8px 0 auto",
+	padding: 0,
+	border: "none",
+	borderRadius: "999px",
+	background: "transparent",
+	color: "var(--tsu-neutral-11)",
+	cursor: "pointer",
+	"& svg": {
+		width: "14px",
+		height: "14px",
+		display: "block"
+	}
+});
+css({
+	flex: 1,
+	minWidth: 0
+});
+var iconClass = css({
+	flexShrink: 0,
+	width: "20px",
+	height: "20px",
+	marginTop: "2px",
+	"& svg": {
+		display: "block",
+		width: "100%",
+		height: "100%"
+	},
+	".toast-wrapper[data-type=\"success\"] &": { color: "var(--tsu-success-9)" },
+	".toast-wrapper[data-type=\"error\"]   &": { color: "var(--tsu-danger-9)" },
+	".toast-wrapper[data-type=\"info\"]    &": { color: "var(--tsu-info-9)" },
+	".toast-wrapper[data-type=\"warning\"] &": { color: "var(--tsu-warning-9)" }
+});
+var typeIcons = {
+	success: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>`,
+	error: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>`,
+	info: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>`,
+	warning: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`,
+	loading: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"/><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"/><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"/></svg>`
+};
+var wrapperClass = css({ display: "contents" });
+var Toast$1 = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className"]);
+	return () => {
+		const _el0 = _tmpl.cloneNode(true);
+		insert(_el0, () => jsx(Toast.Root, mergeProps(rest, { get className() {
+			return [
+				"toast-wrapper",
+				toastClass,
+				local.className
+			].filter(Boolean).join(" ");
+		} })));
+		setProp(_el0, "className", () => wrapperClass);
+		return _el0;
+	};
+};
+var ToastTitle = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className"]);
+	return jsx(Toast.Title, mergeProps(rest, { get className() {
+		return [titleClass, local.className].filter(Boolean).join(" ");
+	} }));
+};
+var ToastDescription = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className"]);
+	return jsx(Toast.Description, mergeProps(rest, { get className() {
+		return [descriptionClass, local.className].filter(Boolean).join(" ");
+	} }));
+};
+var ToastCloseTrigger = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className"]);
+	return jsx(Toast.CloseTrigger, mergeProps(rest, {
+		get className() {
+			return [closeClass, local.className].filter(Boolean).join(" ");
+		},
+		children: () => local.children || _tmpl2.cloneNode(true)
+	}));
+};
+var ToastIcon = ({ icon, type, className } = {}) => {
+	const svg = icon ?? (type ? typeIcons[type] : null);
+	if (!svg) return null;
+	if (typeof svg === "function") {
+		const IconComponent = svg;
+		return () => {
+			const _el0 = _tmpl.cloneNode(true);
+			insert(_el0, () => jsx(IconComponent, {}));
+			setProp(_el0, "className", () => [iconClass, className].filter(Boolean).join(" "));
+			return _el0;
+		};
+	}
+	return (() => {
+		const _el0 = _tmpl.cloneNode(true);
+		setProp(_el0, "className", () => [iconClass, className].filter(Boolean).join(" "));
+		setProp(_el0, "innerHTML", () => svg);
+		return _el0;
+	})();
+};
+var ToastToaster = Toast.Toaster;
+Toast$1.origin = {
+	Root: Toast.Root,
+	Title: Toast.Title,
+	Description: Toast.Description,
+	CloseTrigger: Toast.CloseTrigger,
+	Toaster: Toast.Toaster
+};
 //#endregion
-export { Toast_default as default };
-
-//# sourceMappingURL=Toast.js.map
+export { ToastCloseTrigger, ToastDescription, ToastIcon, ToastTitle, ToastToaster, createToaster$1 as createToaster, Toast$1 as default };

package/dist/components/Toggle.js

@@ -1,7 +1,42 @@
+import { jsx, mergeProps } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
 import { Toggle } from "@plastic-js/ark";
+import { splitProps } from "@plastic-js/plastic";
 //#region src/components/Toggle.jsx
-var Toggle_default = Toggle;
+var rootClass = css({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	padding: "var(--tsu-spacing-sm) var(--tsu-spacing-md)",
+	border: "1px solid var(--tsu-neutral-7)",
+	borderRadius: "var(--tsu-radius-l1-md)",
+	backgroundColor: "var(--tsu-bg)",
+	color: "var(--tsu-neutral-11)",
+	fontSize: "var(--tsu-font-size-sm)",
+	fontWeight: 500,
+	cursor: "pointer",
+	fontFamily: "inherit",
+	touchAction: "manipulation",
+	WebkitTapHighlightColor: "transparent",
+	transition: "background-color var(--tsu-transition-fast), border-color var(--tsu-transition-fast), color var(--tsu-transition-fast)",
+	"&[data-pressed]": {
+		backgroundColor: "var(--tsu-accent-9)",
+		borderColor: "var(--tsu-accent-8)",
+		color: "var(--tsu-bg)"
+	},
+	"&:disabled": {
+		opacity: .5,
+		cursor: "not-allowed"
+	}
+});
+var Toggle$1 = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className", "children"]);
+	const classNames = [rootClass, local.className].filter(Boolean).join(" ");
+	return jsx(Toggle.Root, mergeProps(rest, {
+		className: classNames,
+		children: () => local.children
+	}));
+};
+Toggle$1.origin = { Root: Toggle.Root };
 //#endregion
-export { Toggle_default as default };
-
-//# sourceMappingURL=Toggle.js.map
+export { Toggle$1 as default };