@bysages/svelte 0.3.1 → 0.4.1

package/dist/DatePicker-BGt2KYR_.mjs

@@ -0,0 +1,346 @@
+import { t as useElementId } from "./id-Alz497yI.mjs";
+import { t as InternalIcon } from "./InternalIcon-Clwbj4MY.mjs";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { Portal } from "@ark-ui/svelte/portal";
+import { DatePicker } from "@ark-ui/svelte/date-picker";
+//#region src/components/date-picker/DatePickerRoot.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"size",
+	"children"
+]);
+function DatePickerRoot($$anchor, $$props) {
+	const generatedId = $.props_id();
+	$.push($$props, true);
+	injectComponentStyle("date-picker");
+	let size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes$1);
+	const id = $.derived(() => useElementId("date-picker", generatedId, $$props.id));
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => DatePicker.Root, ($$anchor, ArkDatePicker_Root) => {
+		ArkDatePicker_Root($$anchor, $.spread_props(() => rest, {
+			get id() {
+				return $.get(id);
+			},
+			get "data-size"() {
+				return size();
+			},
+			children: ($$anchor, $$slotProps) => {
+				var fragment_1 = $.comment();
+				var node_1 = $.first_child(fragment_1);
+				$.snippet(node_1, () => $$props.children ?? $.noop);
+				$.append($$anchor, fragment_1);
+			},
+			$$slots: { default: true }
+		}));
+	});
+	$.append($$anchor, fragment);
+	$.pop();
+}
+//#endregion
+//#region src/components/date-picker/DatePicker.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"value",
+	"defaultValue",
+	"label",
+	"placeholder",
+	"disabled",
+	"invalid",
+	"required",
+	"children"
+]);
+var root = $.from_html(`<!> <!>`, 1);
+var root_1 = $.from_html(`<!> <!> <!>`, 1);
+var root_2 = $.from_html(`<!> <!> <!> <!>`, 1);
+function DatePicker$1($$anchor, $$props) {
+	$.push($$props, true);
+	let value = $.prop($$props, "value", 15), disabled = $.prop($$props, "disabled", 3, false), invalid = $.prop($$props, "invalid", 3, false), required = $.prop($$props, "required", 3, false), rest = $.rest_props($$props, rest_excludes);
+	DatePickerRoot($$anchor, $.spread_props({
+		get defaultValue() {
+			return $$props.defaultValue;
+		},
+		get placeholder() {
+			return $$props.placeholder;
+		},
+		get disabled() {
+			return disabled();
+		},
+		get invalid() {
+			return invalid();
+		},
+		get required() {
+			return required();
+		}
+	}, () => rest, {
+		get value() {
+			return value();
+		},
+		set value($$value) {
+			value($$value);
+		},
+		children: ($$anchor, $$slotProps) => {
+			var fragment_1 = root_2();
+			var node = $.first_child(fragment_1);
+			var consequent = ($$anchor) => {
+				var fragment_2 = $.comment();
+				var node_1 = $.first_child(fragment_2);
+				$.component(node_1, () => DatePicker.Label, ($$anchor, ArkDatePicker_Label) => {
+					ArkDatePicker_Label($$anchor, {
+						children: ($$anchor, $$slotProps) => {
+							$.next();
+							var text = $.text();
+							$.template_effect(() => $.set_text(text, $$props.label));
+							$.append($$anchor, text);
+						},
+						$$slots: { default: true }
+					});
+				});
+				$.append($$anchor, fragment_2);
+			};
+			$.if(node, ($$render) => {
+				if ($$props.label) $$render(consequent);
+			});
+			var node_2 = $.sibling(node, 2);
+			$.component(node_2, () => DatePicker.Control, ($$anchor, ArkDatePicker_Control) => {
+				ArkDatePicker_Control($$anchor, {
+					children: ($$anchor, $$slotProps) => {
+						var fragment_4 = root();
+						var node_3 = $.first_child(fragment_4);
+						{
+							let $0 = $.derived(() => $$props.label ? void 0 : $$props.placeholder);
+							$.component(node_3, () => DatePicker.Input, ($$anchor, ArkDatePicker_Input) => {
+								ArkDatePicker_Input($$anchor, { get "aria-label"() {
+									return $.get($0);
+								} });
+							});
+						}
+						var node_4 = $.sibling(node_3, 2);
+						$.component(node_4, () => DatePicker.Trigger, ($$anchor, ArkDatePicker_Trigger) => {
+							ArkDatePicker_Trigger($$anchor, {
+								children: ($$anchor, $$slotProps) => {
+									InternalIcon($$anchor, { name: "calendar" });
+								},
+								$$slots: { default: true }
+							});
+						});
+						$.append($$anchor, fragment_4);
+					},
+					$$slots: { default: true }
+				});
+			});
+			var node_5 = $.sibling(node_2, 2);
+			Portal(node_5, {
+				children: ($$anchor, $$slotProps) => {
+					var fragment_6 = $.comment();
+					var node_6 = $.first_child(fragment_6);
+					$.component(node_6, () => DatePicker.Positioner, ($$anchor, ArkDatePicker_Positioner) => {
+						ArkDatePicker_Positioner($$anchor, {
+							children: ($$anchor, $$slotProps) => {
+								var fragment_7 = $.comment();
+								var node_7 = $.first_child(fragment_7);
+								$.component(node_7, () => DatePicker.Content, ($$anchor, ArkDatePicker_Content) => {
+									ArkDatePicker_Content($$anchor, {
+										children: ($$anchor, $$slotProps) => {
+											var fragment_8 = $.comment();
+											var node_8 = $.first_child(fragment_8);
+											$.component(node_8, () => DatePicker.View, ($$anchor, ArkDatePicker_View) => {
+												ArkDatePicker_View($$anchor, {
+													view: "day",
+													children: ($$anchor, $$slotProps) => {
+														var fragment_9 = $.comment();
+														var node_9 = $.first_child(fragment_9);
+														{
+															const children = ($$anchor, dp = $.noop) => {
+																var fragment_10 = root();
+																var node_10 = $.first_child(fragment_10);
+																$.component(node_10, () => DatePicker.ViewControl, ($$anchor, ArkDatePicker_ViewControl) => {
+																	ArkDatePicker_ViewControl($$anchor, {
+																		children: ($$anchor, $$slotProps) => {
+																			var fragment_11 = root_1();
+																			var node_11 = $.first_child(fragment_11);
+																			$.component(node_11, () => DatePicker.PrevTrigger, ($$anchor, ArkDatePicker_PrevTrigger) => {
+																				ArkDatePicker_PrevTrigger($$anchor, {
+																					children: ($$anchor, $$slotProps) => {
+																						InternalIcon($$anchor, { name: "chevron-left" });
+																					},
+																					$$slots: { default: true }
+																				});
+																			});
+																			var node_12 = $.sibling(node_11, 2);
+																			$.component(node_12, () => DatePicker.ViewTrigger, ($$anchor, ArkDatePicker_ViewTrigger) => {
+																				ArkDatePicker_ViewTrigger($$anchor, {
+																					children: ($$anchor, $$slotProps) => {
+																						var fragment_13 = $.comment();
+																						var node_13 = $.first_child(fragment_13);
+																						$.component(node_13, () => DatePicker.RangeText, ($$anchor, ArkDatePicker_RangeText) => {
+																							ArkDatePicker_RangeText($$anchor, {});
+																						});
+																						$.append($$anchor, fragment_13);
+																					},
+																					$$slots: { default: true }
+																				});
+																			});
+																			var node_14 = $.sibling(node_12, 2);
+																			$.component(node_14, () => DatePicker.NextTrigger, ($$anchor, ArkDatePicker_NextTrigger) => {
+																				ArkDatePicker_NextTrigger($$anchor, {
+																					children: ($$anchor, $$slotProps) => {
+																						InternalIcon($$anchor, { name: "chevron-right" });
+																					},
+																					$$slots: { default: true }
+																				});
+																			});
+																			$.append($$anchor, fragment_11);
+																		},
+																		$$slots: { default: true }
+																	});
+																});
+																var node_15 = $.sibling(node_10, 2);
+																$.component(node_15, () => DatePicker.Table, ($$anchor, ArkDatePicker_Table) => {
+																	ArkDatePicker_Table($$anchor, {
+																		children: ($$anchor, $$slotProps) => {
+																			var fragment_15 = root();
+																			var node_16 = $.first_child(fragment_15);
+																			$.component(node_16, () => DatePicker.TableHead, ($$anchor, ArkDatePicker_TableHead) => {
+																				ArkDatePicker_TableHead($$anchor, {
+																					children: ($$anchor, $$slotProps) => {
+																						var fragment_16 = $.comment();
+																						var node_17 = $.first_child(fragment_16);
+																						$.component(node_17, () => DatePicker.TableRow, ($$anchor, ArkDatePicker_TableRow) => {
+																							ArkDatePicker_TableRow($$anchor, {
+																								children: ($$anchor, $$slotProps) => {
+																									var fragment_17 = $.comment();
+																									var node_18 = $.first_child(fragment_17);
+																									$.each(node_18, 17, () => dp()().weekDays, $.index, ($$anchor, day) => {
+																										var fragment_18 = $.comment();
+																										var node_19 = $.first_child(fragment_18);
+																										$.component(node_19, () => DatePicker.TableHeader, ($$anchor, ArkDatePicker_TableHeader) => {
+																											ArkDatePicker_TableHeader($$anchor, {
+																												get "aria-label"() {
+																													return $.get(day).long;
+																												},
+																												children: ($$anchor, $$slotProps) => {
+																													$.next();
+																													var text_1 = $.text();
+																													$.template_effect(() => $.set_text(text_1, $.get(day).narrow));
+																													$.append($$anchor, text_1);
+																												},
+																												$$slots: { default: true }
+																											});
+																										});
+																										$.append($$anchor, fragment_18);
+																									});
+																									$.append($$anchor, fragment_17);
+																								},
+																								$$slots: { default: true }
+																							});
+																						});
+																						$.append($$anchor, fragment_16);
+																					},
+																					$$slots: { default: true }
+																				});
+																			});
+																			var node_20 = $.sibling(node_16, 2);
+																			$.component(node_20, () => DatePicker.TableBody, ($$anchor, ArkDatePicker_TableBody) => {
+																				ArkDatePicker_TableBody($$anchor, {
+																					children: ($$anchor, $$slotProps) => {
+																						var fragment_20 = $.comment();
+																						var node_21 = $.first_child(fragment_20);
+																						$.each(node_21, 17, () => dp()().weeks, $.index, ($$anchor, week) => {
+																							var fragment_21 = $.comment();
+																							var node_22 = $.first_child(fragment_21);
+																							$.component(node_22, () => DatePicker.TableRow, ($$anchor, ArkDatePicker_TableRow_1) => {
+																								ArkDatePicker_TableRow_1($$anchor, {
+																									children: ($$anchor, $$slotProps) => {
+																										var fragment_22 = $.comment();
+																										var node_23 = $.first_child(fragment_22);
+																										$.each(node_23, 17, () => $.get(week), $.index, ($$anchor, day) => {
+																											var fragment_23 = $.comment();
+																											var node_24 = $.first_child(fragment_23);
+																											$.component(node_24, () => DatePicker.TableCell, ($$anchor, ArkDatePicker_TableCell) => {
+																												ArkDatePicker_TableCell($$anchor, {
+																													get value() {
+																														return $.get(day);
+																													},
+																													children: ($$anchor, $$slotProps) => {
+																														var fragment_24 = $.comment();
+																														var node_25 = $.first_child(fragment_24);
+																														$.component(node_25, () => DatePicker.TableCellTrigger, ($$anchor, ArkDatePicker_TableCellTrigger) => {
+																															ArkDatePicker_TableCellTrigger($$anchor, {
+																																children: ($$anchor, $$slotProps) => {
+																																	$.next();
+																																	var text_2 = $.text();
+																																	$.template_effect(() => $.set_text(text_2, $.get(day).day));
+																																	$.append($$anchor, text_2);
+																																},
+																																$$slots: { default: true }
+																															});
+																														});
+																														$.append($$anchor, fragment_24);
+																													},
+																													$$slots: { default: true }
+																												});
+																											});
+																											$.append($$anchor, fragment_23);
+																										});
+																										$.append($$anchor, fragment_22);
+																									},
+																									$$slots: { default: true }
+																								});
+																							});
+																							$.append($$anchor, fragment_21);
+																						});
+																						$.append($$anchor, fragment_20);
+																					},
+																					$$slots: { default: true }
+																				});
+																			});
+																			$.append($$anchor, fragment_15);
+																		},
+																		$$slots: { default: true }
+																	});
+																});
+																$.append($$anchor, fragment_10);
+															};
+															$.component(node_9, () => DatePicker.Context, ($$anchor, ArkDatePicker_Context) => {
+																ArkDatePicker_Context($$anchor, {
+																	children,
+																	$$slots: { default: true }
+																});
+															});
+														}
+														$.append($$anchor, fragment_9);
+													},
+													$$slots: { default: true }
+												});
+											});
+											$.append($$anchor, fragment_8);
+										},
+										$$slots: { default: true }
+									});
+								});
+								$.append($$anchor, fragment_7);
+							},
+							$$slots: { default: true }
+						});
+					});
+					$.append($$anchor, fragment_6);
+				},
+				$$slots: { default: true }
+			});
+			var node_26 = $.sibling(node_5, 2);
+			$.snippet(node_26, () => $$props.children ?? $.noop);
+			$.append($$anchor, fragment_1);
+		},
+		$$slots: { default: true }
+	}));
+	$.pop();
+}
+//#endregion
+export { DatePickerRoot as n, DatePicker$1 as t };

package/dist/Dialog-C_fbKqoA.mjs

@@ -0,0 +1,178 @@
+import { t as useElementId } from "./id-Alz497yI.mjs";
+import { t as iconHtml } from "./icon-lWVQxDG6.mjs";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { Portal } from "@ark-ui/svelte/portal";
+import { Dialog } from "@ark-ui/svelte/dialog";
+//#region src/components/dialog/DialogRoot.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"open",
+	"children"
+]);
+function DialogRoot($$anchor, $$props) {
+	const generatedId = $.props_id();
+	$.push($$props, true);
+	injectComponentStyle("dialog");
+	let open = $.prop($$props, "open", 15), rest = $.rest_props($$props, rest_excludes$1);
+	const id = $.derived(() => useElementId("dialog", generatedId, $$props.id));
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => Dialog.Root, ($$anchor, ArkDialog_Root) => {
+		ArkDialog_Root($$anchor, $.spread_props(() => rest, {
+			get id() {
+				return $.get(id);
+			},
+			get open() {
+				return open();
+			},
+			set open($$value) {
+				open($$value);
+			},
+			children: ($$anchor, $$slotProps) => {
+				var fragment_1 = $.comment();
+				var node_1 = $.first_child(fragment_1);
+				$.snippet(node_1, () => $$props.children ?? $.noop);
+				$.append($$anchor, fragment_1);
+			},
+			$$slots: { default: true }
+		}));
+	});
+	$.append($$anchor, fragment);
+	$.pop();
+}
+//#endregion
+//#region src/components/dialog/Dialog.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"open",
+	"trigger",
+	"label",
+	"description",
+	"disabled",
+	"children"
+]);
+var root = $.from_html(`<!> <!> <!> <!>`, 1);
+var root_1 = $.from_html(`<!> <!>`, 1);
+function Dialog$1($$anchor, $$props) {
+	$.push($$props, true);
+	let open = $.prop($$props, "open", 15), trigger = $.prop($$props, "trigger", 3, "Open"), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes);
+	DialogRoot($$anchor, $.spread_props(() => rest, {
+		get open() {
+			return open();
+		},
+		set open($$value) {
+			open($$value);
+		},
+		children: ($$anchor, $$slotProps) => {
+			var fragment_1 = root_1();
+			var node = $.first_child(fragment_1);
+			$.component(node, () => Dialog.Trigger, ($$anchor, ArkDialog_Trigger) => {
+				ArkDialog_Trigger($$anchor, {
+					get disabled() {
+						return disabled();
+					},
+					children: ($$anchor, $$slotProps) => {
+						$.next();
+						var text = $.text();
+						$.template_effect(() => $.set_text(text, trigger()));
+						$.append($$anchor, text);
+					},
+					$$slots: { default: true }
+				});
+			});
+			var node_1 = $.sibling(node, 2);
+			Portal(node_1, {
+				children: ($$anchor, $$slotProps) => {
+					var fragment_3 = root_1();
+					var node_2 = $.first_child(fragment_3);
+					$.component(node_2, () => Dialog.Backdrop, ($$anchor, ArkDialog_Backdrop) => {
+						ArkDialog_Backdrop($$anchor, {});
+					});
+					var node_3 = $.sibling(node_2, 2);
+					$.component(node_3, () => Dialog.Positioner, ($$anchor, ArkDialog_Positioner) => {
+						ArkDialog_Positioner($$anchor, {
+							children: ($$anchor, $$slotProps) => {
+								var fragment_4 = $.comment();
+								var node_4 = $.first_child(fragment_4);
+								$.component(node_4, () => Dialog.Content, ($$anchor, ArkDialog_Content) => {
+									ArkDialog_Content($$anchor, {
+										children: ($$anchor, $$slotProps) => {
+											var fragment_5 = root();
+											var node_5 = $.first_child(fragment_5);
+											$.component(node_5, () => Dialog.Title, ($$anchor, ArkDialog_Title) => {
+												ArkDialog_Title($$anchor, {
+													children: ($$anchor, $$slotProps) => {
+														$.next();
+														var text_1 = $.text();
+														$.template_effect(() => $.set_text(text_1, $$props.label ?? trigger()));
+														$.append($$anchor, text_1);
+													},
+													$$slots: { default: true }
+												});
+											});
+											var node_6 = $.sibling(node_5, 2);
+											var consequent = ($$anchor) => {
+												var fragment_7 = $.comment();
+												var node_7 = $.first_child(fragment_7);
+												$.component(node_7, () => Dialog.Description, ($$anchor, ArkDialog_Description) => {
+													ArkDialog_Description($$anchor, {
+														children: ($$anchor, $$slotProps) => {
+															$.next();
+															var text_2 = $.text();
+															$.template_effect(() => $.set_text(text_2, $$props.description));
+															$.append($$anchor, text_2);
+														},
+														$$slots: { default: true }
+													});
+												});
+												$.append($$anchor, fragment_7);
+											};
+											$.if(node_6, ($$render) => {
+												if ($$props.description) $$render(consequent);
+											});
+											var node_8 = $.sibling(node_6, 2);
+											$.snippet(node_8, () => $$props.children ?? $.noop);
+											var node_9 = $.sibling(node_8, 2);
+											$.component(node_9, () => Dialog.CloseTrigger, ($$anchor, ArkDialog_CloseTrigger) => {
+												ArkDialog_CloseTrigger($$anchor, {
+													"aria-label": "Close",
+													children: ($$anchor, $$slotProps) => {
+														var fragment_9 = $.comment();
+														var node_10 = $.first_child(fragment_9);
+														$.html(node_10, () => iconHtml("x", {
+															width: "14",
+															height: "14"
+														}));
+														$.append($$anchor, fragment_9);
+													},
+													$$slots: { default: true }
+												});
+											});
+											$.append($$anchor, fragment_5);
+										},
+										$$slots: { default: true }
+									});
+								});
+								$.append($$anchor, fragment_4);
+							},
+							$$slots: { default: true }
+						});
+					});
+					$.append($$anchor, fragment_3);
+				},
+				$$slots: { default: true }
+			});
+			$.append($$anchor, fragment_1);
+		},
+		$$slots: { default: true }
+	}));
+	$.pop();
+}
+//#endregion
+export { DialogRoot as n, Dialog$1 as t };

package/dist/Drawer-DOOnBSMq.mjs

@@ -0,0 +1,178 @@
+import { t as useElementId } from "./id-Alz497yI.mjs";
+import { t as iconHtml } from "./icon-lWVQxDG6.mjs";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { Portal } from "@ark-ui/svelte/portal";
+import { Drawer } from "@ark-ui/svelte/drawer";
+//#region src/components/drawer/DrawerRoot.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"open",
+	"children"
+]);
+function DrawerRoot($$anchor, $$props) {
+	const generatedId = $.props_id();
+	$.push($$props, true);
+	injectComponentStyle("drawer");
+	let open = $.prop($$props, "open", 15), rest = $.rest_props($$props, rest_excludes$1);
+	const id = $.derived(() => useElementId("drawer", generatedId, $$props.id));
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => Drawer.Root, ($$anchor, ArkDrawer_Root) => {
+		ArkDrawer_Root($$anchor, $.spread_props(() => rest, {
+			get id() {
+				return $.get(id);
+			},
+			get open() {
+				return open();
+			},
+			set open($$value) {
+				open($$value);
+			},
+			children: ($$anchor, $$slotProps) => {
+				var fragment_1 = $.comment();
+				var node_1 = $.first_child(fragment_1);
+				$.snippet(node_1, () => $$props.children ?? $.noop);
+				$.append($$anchor, fragment_1);
+			},
+			$$slots: { default: true }
+		}));
+	});
+	$.append($$anchor, fragment);
+	$.pop();
+}
+//#endregion
+//#region src/components/drawer/Drawer.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"open",
+	"trigger",
+	"label",
+	"description",
+	"disabled",
+	"children"
+]);
+var root = $.from_html(`<!> <!> <!> <!>`, 1);
+var root_1 = $.from_html(`<!> <!>`, 1);
+function Drawer$1($$anchor, $$props) {
+	$.push($$props, true);
+	let open = $.prop($$props, "open", 15), trigger = $.prop($$props, "trigger", 3, "Open"), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes);
+	DrawerRoot($$anchor, $.spread_props(() => rest, {
+		get open() {
+			return open();
+		},
+		set open($$value) {
+			open($$value);
+		},
+		children: ($$anchor, $$slotProps) => {
+			var fragment_1 = root_1();
+			var node = $.first_child(fragment_1);
+			$.component(node, () => Drawer.Trigger, ($$anchor, ArkDrawer_Trigger) => {
+				ArkDrawer_Trigger($$anchor, {
+					get disabled() {
+						return disabled();
+					},
+					children: ($$anchor, $$slotProps) => {
+						$.next();
+						var text = $.text();
+						$.template_effect(() => $.set_text(text, trigger()));
+						$.append($$anchor, text);
+					},
+					$$slots: { default: true }
+				});
+			});
+			var node_1 = $.sibling(node, 2);
+			Portal(node_1, {
+				children: ($$anchor, $$slotProps) => {
+					var fragment_3 = root_1();
+					var node_2 = $.first_child(fragment_3);
+					$.component(node_2, () => Drawer.Backdrop, ($$anchor, ArkDrawer_Backdrop) => {
+						ArkDrawer_Backdrop($$anchor, {});
+					});
+					var node_3 = $.sibling(node_2, 2);
+					$.component(node_3, () => Drawer.Positioner, ($$anchor, ArkDrawer_Positioner) => {
+						ArkDrawer_Positioner($$anchor, {
+							children: ($$anchor, $$slotProps) => {
+								var fragment_4 = $.comment();
+								var node_4 = $.first_child(fragment_4);
+								$.component(node_4, () => Drawer.Content, ($$anchor, ArkDrawer_Content) => {
+									ArkDrawer_Content($$anchor, {
+										children: ($$anchor, $$slotProps) => {
+											var fragment_5 = root();
+											var node_5 = $.first_child(fragment_5);
+											$.component(node_5, () => Drawer.Title, ($$anchor, ArkDrawer_Title) => {
+												ArkDrawer_Title($$anchor, {
+													children: ($$anchor, $$slotProps) => {
+														$.next();
+														var text_1 = $.text();
+														$.template_effect(() => $.set_text(text_1, $$props.label ?? trigger()));
+														$.append($$anchor, text_1);
+													},
+													$$slots: { default: true }
+												});
+											});
+											var node_6 = $.sibling(node_5, 2);
+											var consequent = ($$anchor) => {
+												var fragment_7 = $.comment();
+												var node_7 = $.first_child(fragment_7);
+												$.component(node_7, () => Drawer.Description, ($$anchor, ArkDrawer_Description) => {
+													ArkDrawer_Description($$anchor, {
+														children: ($$anchor, $$slotProps) => {
+															$.next();
+															var text_2 = $.text();
+															$.template_effect(() => $.set_text(text_2, $$props.description));
+															$.append($$anchor, text_2);
+														},
+														$$slots: { default: true }
+													});
+												});
+												$.append($$anchor, fragment_7);
+											};
+											$.if(node_6, ($$render) => {
+												if ($$props.description) $$render(consequent);
+											});
+											var node_8 = $.sibling(node_6, 2);
+											$.snippet(node_8, () => $$props.children ?? $.noop);
+											var node_9 = $.sibling(node_8, 2);
+											$.component(node_9, () => Drawer.CloseTrigger, ($$anchor, ArkDrawer_CloseTrigger) => {
+												ArkDrawer_CloseTrigger($$anchor, {
+													"aria-label": "Close",
+													children: ($$anchor, $$slotProps) => {
+														var fragment_9 = $.comment();
+														var node_10 = $.first_child(fragment_9);
+														$.html(node_10, () => iconHtml("x", {
+															width: "14",
+															height: "14"
+														}));
+														$.append($$anchor, fragment_9);
+													},
+													$$slots: { default: true }
+												});
+											});
+											$.append($$anchor, fragment_5);
+										},
+										$$slots: { default: true }
+									});
+								});
+								$.append($$anchor, fragment_4);
+							},
+							$$slots: { default: true }
+						});
+					});
+					$.append($$anchor, fragment_3);
+				},
+				$$slots: { default: true }
+			});
+			$.append($$anchor, fragment_1);
+		},
+		$$slots: { default: true }
+	}));
+	$.pop();
+}
+//#endregion
+export { DrawerRoot as n, Drawer$1 as t };