@askrjs/themes 0.0.9 → 0.0.10

package/dist/components/navbar/navbar.js

@@ -1,232 +1,125 @@
 import { classes } from "../_internal/classes.js";
-import { mergeProps } from "../_internal/merge-props.js";
+import { Block } from "../block/block.js";
+import { DropdownContent as DropdownContent$1 } from "../overlays/dropdown-content.js";
 import { isJsxElement, toChildArray } from "../_internal/jsx.js";
-import { ShellPanelWatcher, ShellResponsiveWatcher, renderKeyedShellChildren } from "../shell/shell-responsive.js";
-import { renderNavbarCollapseContents } from "./navbar.render.js";
-import { NavbarResponsiveContext } from "./navbar.context.js";
-import { NavbarPanel } from "./navbar-panel.js";
-import { isNavbarCollapsed, resolveNavGroupAlign } from "./navbar.shared.js";
-import { Fragment, jsx, jsxs } from "@askrjs/askr/jsx-runtime";
-import { state } from "@askrjs/askr";
+import { Dropdown, DropdownTrigger } from "@askrjs/ui";
+import { jsx, jsxs } from "@askrjs/askr/jsx-runtime";
 //#region src/components/navbar/navbar.tsx
-function splitNavbarChildren(children) {
-	let brand;
-	let hasBrand = false;
-	let panelItems;
-	for (let index = 0; index < children.length; index += 1) {
-		const child = children[index];
-		if (isJsxElement(child) && child.type === NavBrand) {
-			if (!hasBrand) {
-				brand = child;
-				hasBrand = true;
-			}
-			panelItems ??= children.slice(0, index);
-			continue;
-		}
-		panelItems?.push(child);
-	}
-	return {
-		brand: hasBrand ? brand : void 0,
-		panelItems: panelItems ?? children
-	};
-}
-/**
-* Responsive mobile-first navbar component.
-*
-* Composition: Navbar should contain NavBrand (extracted to mobile panel), NavGroup items with optional align,
-* and NavLink children. Brand must be first child to appear in mobile menu.
-*
-* @example
-* <Navbar breakpoint="md" aria-label="Main navigation">
-*   <NavBrand><a href="/">Logo</a></NavBrand>
-*   <NavGroup align="center">
-*     <NavLink href="/docs">Docs</NavLink>
-*   </NavGroup>
-*   <NavGroup align="end">
-*     <NavLink href="/settings">Settings</NavLink>
-*   </NavGroup>
-* </Navbar>
-*/
-function Navbar(props) {
-	const { children, breakpoint, collapseIcon, collapseIconPlacement = "start", collapseLabel, ref, class: className, id, "aria-label": ariaLabel, ...rest } = props;
-	const effectiveCollapseLabel = collapseLabel ?? "Menu";
-	const responsiveChildren = toChildArray(children);
-	const navbarChildren = splitNavbarChildren(responsiveChildren);
-	const desktopChildren = renderKeyedShellChildren(responsiveChildren, "navbar-desktop");
-	const panelChildren = renderKeyedShellChildren(navbarChildren.panelItems, "navbar-panel");
-	const responsiveCollapsedState = breakpoint !== void 0 ? state(isNavbarCollapsed(breakpoint)) : void 0;
-	const mobileMenuState = state(false);
-	const mobileMenuOpen = mobileMenuState();
-	const panelId = typeof id === "string" ? `${id}-panel` : void 0;
-	const responsiveCollapsed = breakpoint !== void 0 ? responsiveCollapsedState?.() : false;
-	const panelOpen = Boolean(responsiveCollapsed && mobileMenuOpen);
-	const closePanel = () => mobileMenuState.set(false);
-	const closePanelOnNavActivation = (event) => {
-		const target = event.target;
-		if (!(target instanceof Element)) return;
-		if (target.closest("a[data-slot=\"nav-link\"], a[data-slot=\"nav-item\"], a.navbar-item")) closePanel();
-	};
-	const togglePanel = () => {
-		mobileMenuState.set(!mobileMenuState());
-	};
-	const contextValue = {
-		active: () => breakpoint !== void 0,
-		collapseLabel: () => effectiveCollapseLabel,
-		closePanel,
-		panelId: () => panelId,
-		panelOpen: () => Boolean(responsiveCollapsedState?.() && mobileMenuOpen),
-		togglePanel
-	};
-	const finalProps = mergeProps(rest, {
-		"aria-label": ariaLabel,
-		ref,
-		class: classes("navbar", className),
-		"data-collapse-below": breakpoint,
-		"data-responsive-collapsed": responsiveCollapsed ? "true" : "false",
-		"data-slot": "navbar"
+const ASKR_FRAGMENT = Symbol.for("askr.fragment");
+function flattenNavbarChildren(children) {
+	return toChildArray(children).flatMap((child) => {
+		if (isJsxElement(child) && child.type === ASKR_FRAGMENT) return flattenNavbarChildren(child.props?.children);
+		return [child];
 	});
-	return /* @__PURE__ */ jsx(NavbarResponsiveContext.Scope, {
-		value: contextValue,
-		children: /* @__PURE__ */ jsxs("nav", {
-			...finalProps,
-			children: [
-				breakpoint !== void 0 ? /* @__PURE__ */ jsx("div", {
-					class: "navbar-mobile",
-					"data-slot": "navbar-mobile",
-					children: /* @__PURE__ */ jsx(NavToggle, {
-						active: breakpoint !== void 0,
-						"aria-controls": panelId,
-						"aria-label": effectiveCollapseLabel,
-						icon: collapseIcon,
-						iconPlacement: collapseIconPlacement,
-						label: effectiveCollapseLabel,
-						onToggle: togglePanel,
-						open: panelOpen,
-						panelId
-					})
-				}) : null,
-				/* @__PURE__ */ jsx("div", {
-					class: "navbar-shell",
-					"data-slot": "navbar-shell",
-					children: desktopChildren
-				}),
-				breakpoint !== void 0 ? /* @__PURE__ */ jsx(NavbarPanel, {
-					active: breakpoint !== void 0,
-					brand: navbarChildren.brand,
-					collapseLabel: effectiveCollapseLabel,
-					onClose: closePanel,
-					onClick: closePanelOnNavActivation,
-					open: panelOpen,
-					panelId,
-					children: panelChildren
-				}) : null,
-				responsiveCollapsed && mobileMenuOpen ? /* @__PURE__ */ jsx("button", {
-					"aria-label": `Close ${effectiveCollapseLabel}`,
-					class: "navbar-backdrop",
-					"data-slot": "navbar-backdrop",
-					"data-state": "open",
-					tabIndex: -1,
-					type: "button",
-					onClick: closePanel
-				}) : null,
-				breakpoint !== void 0 ? /* @__PURE__ */ jsx(ShellResponsiveWatcher, {
-					breakpoint,
-					isCollapsed: isNavbarCollapsed,
-					onResize: (nextCollapsed) => {
-						responsiveCollapsedState?.set(nextCollapsed);
-					},
-					onExpand: () => {
-						mobileMenuState?.set(false);
-					}
-				}) : null,
-				/* @__PURE__ */ jsx(ShellPanelWatcher, {
-					contentId: panelId,
-					open: panelOpen,
-					panelSlot: "navbar-panel",
-					onClose: closePanel
-				})
-			]
-		})
+}
+function isNavBrandChild(child) {
+	return isJsxElement(child) && (child.type === NavBrand || child.props?.["data-slot"] === "nav-brand");
+}
+function hasRenderableChildren(children) {
+	return children.some((child) => {
+		if (Array.isArray(child)) return hasRenderableChildren(child);
+		return child !== void 0 && child !== null && typeof child !== "boolean";
 	});
 }
-/**
-* Menu toggle button for responsive navbar collapse.
-* Auto-renders when navbar is responsive (collapseBelow set).
-*/
-function NavToggle(props) {
-	const { children, class: className, active, icon, iconPlacement = "start", label = "Menu", ref, onToggle, open, panelId, ...rest } = props;
-	if (active === false) return null;
-	const isOpen = open === true;
-	return /* @__PURE__ */ jsx("button", {
-		...mergeProps(rest, {
-			ref,
-			class: classes("navbar-toggle", className),
-			"aria-controls": panelId,
-			"aria-expanded": isOpen ? "true" : "false",
-			"aria-label": label,
+function Navbar(props) {
+	const { breakpoint, children, collapseAt = breakpoint ?? false, collapseIcon, collapseLabel = "Menu", ...rest } = props;
+	if (!collapseAt) return /* @__PURE__ */ jsx(Block, {
+		as: "nav",
+		direction: "row",
+		align: "center",
+		gap: "md",
+		width: "full",
+		...rest,
+		"data-slot": "navbar",
+		children
+	});
+	const navbarChildren = flattenNavbarChildren(children);
+	const brandChildren = navbarChildren.filter(isNavBrandChild);
+	const navChildren = navbarChildren.filter((child) => !isNavBrandChild(child));
+	const collapse = hasRenderableChildren(navChildren) ? /* @__PURE__ */ jsxs("details", {
+		"data-slot": "navbar-collapse",
+		children: [/* @__PURE__ */ jsxs("summary", {
+			"aria-label": collapseLabel,
 			"data-slot": "navbar-toggle",
-			"data-state": isOpen ? "open" : "closed",
-			type: "button",
-			onClick: () => onToggle?.()
-		}),
-		children: children ?? renderNavbarCollapseContents(label, icon, iconPlacement)
+			children: [collapseIcon, /* @__PURE__ */ jsx("span", {
+				"data-slot": "navbar-toggle-label",
+				children: collapseLabel
+			})]
+		}), /* @__PURE__ */ jsx(Block, {
+			direction: "row",
+			align: "center",
+			gap: "md",
+			width: "full",
+			"data-slot": "navbar-content",
+			children: navChildren
+		})]
+	}) : null;
+	return /* @__PURE__ */ jsx(Block, {
+		as: "nav",
+		direction: "row",
+		align: "center",
+		gap: "md",
+		width: "full",
+		...rest,
+		"data-collapse-at": collapseAt,
+		"data-slot": "navbar",
+		children: [...brandChildren, collapse]
 	});
 }
-/**
-* Brand/logo container displayed in navbar and mobile panel header.
-*/
 function NavBrand(props) {
-	const { children, ref, class: className, ...rest } = props;
-	return /* @__PURE__ */ jsx("div", {
+	const { children, ...rest } = props;
+	return /* @__PURE__ */ jsx(Block, {
+		direction: "row",
+		align: "center",
+		gap: "sm",
+		shrink: false,
 		...rest,
-		ref,
-		class: classes("navbar-brand", className),
-		"data-slot": "navbar-brand",
+		"data-slot": "nav-brand",
 		children
 	});
 }
-/**
-* Navigation group for organizing related nav items.
-*
-* @param align - Alignment: "start" (default), "center", or "end". Using align="end" automatically right-aligns the group.
-* @param label - Optional accessible label for grouped items.
-*
-* @example
-* <NavGroup align="center">
-*   <NavLink href="/docs">Docs</NavLink>
-* </NavGroup>
-*/
 function NavGroup(props) {
-	const { children, id, ref, class: className, label, ...rest } = props;
-	const rawAlign = rest["data-align"];
-	const align = props.align ?? (rawAlign === "start" || rawAlign === "center" || rawAlign === "end" ? rawAlign : void 0);
-	const hasLabel = label !== void 0 && label !== null;
-	const labelId = hasLabel && id ? `${id}-label` : void 0;
-	const accessibleLabel = typeof label === "string" ? label : void 0;
-	return /* @__PURE__ */ jsx("div", {
+	const { align, children, label, title = label, ...rest } = props;
+	return /* @__PURE__ */ jsxs(Block, {
+		align,
+		gap: "sm",
 		...rest,
-		id,
-		ref,
-		class: classes("navbar-group", className),
-		"aria-label": labelId ? void 0 : accessibleLabel,
-		"aria-labelledby": labelId,
-		role: hasLabel ? "group" : rest.role,
-		"data-align": resolveNavGroupAlign(align),
-		"data-has-label": hasLabel ? "true" : void 0,
-		"data-slot": "navbar-group",
-		children: hasLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-			id: labelId,
-			class: "navbar-group-label",
-			"data-slot": "navbar-group-label",
-			children: label
-		}), /* @__PURE__ */ jsx("div", {
-			class: "navbar-group-body",
-			"data-slot": "navbar-group-body",
+		"data-align": align,
+		"data-slot": "nav-group",
+		children: [title !== void 0 ? /* @__PURE__ */ jsx("div", {
+			"data-slot": "nav-group-label",
+			children: title
+		}) : null, /* @__PURE__ */ jsx(Block, {
+			gap: "xs",
+			"data-slot": "nav-group-body",
 			children
-		})] }) : children
+		})]
+	});
+}
+function NavDropdown(props) {
+	const { align = "end", children, label, side = "bottom", sideOffset = 6, ...rest } = props;
+	return /* @__PURE__ */ jsx(Block, {
+		direction: "row",
+		align: "center",
+		"data-slot": "nav-dropdown",
+		children: /* @__PURE__ */ jsxs(Dropdown, {
+			...rest,
+			children: [/* @__PURE__ */ jsx(DropdownTrigger, {
+				class: classes("nav-item"),
+				"data-slot": "nav-dropdown-trigger",
+				children: label
+			}), /* @__PURE__ */ jsx(DropdownContent$1, {
+				align,
+				class: classes("dropdown-content"),
+				"data-slot": "nav-dropdown-content",
+				side,
+				sideOffset,
+				children
+			})]
+		})
 	});
 }
 //#endregion
-export { NavBrand, NavGroup, NavToggle, Navbar };
+export { NavBrand, NavDropdown, NavGroup, Navbar };
 
 //# sourceMappingURL=navbar.js.map

package/dist/components/navbar/navbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.js","names":[],"sources":["../../../src/components/navbar/navbar.tsx"],"sourcesContent":["import { state } from \"@askrjs/askr\";\nimport { classes } from \"../_internal/classes\";\nimport { isJsxElement, toChildArray } from \"../_internal/jsx\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport {\n  renderKeyedShellChildren,\n  ShellPanelWatcher,\n  ShellResponsiveWatcher,\n} from \"../shell/shell-responsive\";\nimport { renderNavbarCollapseContents } from \"./navbar.render\";\nimport { NavbarPanel } from \"./navbar-panel\";\nimport { NavbarResponsiveContext } from \"./navbar.context\";\nimport { isNavbarCollapsed, resolveNavGroupAlign } from \"./navbar.shared\";\nimport type { NavBrandProps, NavGroupProps, NavToggleProps, NavbarProps } from \"./navbar.types\";\n\ntype NavbarChildren = {\n  brand?: unknown;\n  panelItems: unknown[];\n};\n\nfunction splitNavbarChildren(children: unknown[]): NavbarChildren {\n  let brand: unknown;\n  let hasBrand = false;\n  let panelItems: unknown[] | undefined;\n\n  for (let index = 0; index < children.length; index += 1) {\n    const child = children[index];\n\n    if (isJsxElement(child) && child.type === NavBrand) {\n      if (!hasBrand) {\n        brand = child;\n        hasBrand = true;\n      }\n\n      panelItems ??= children.slice(0, index);\n      continue;\n    }\n\n    panelItems?.push(child);\n  }\n\n  return {\n    brand: hasBrand ? brand : undefined,\n    panelItems: panelItems ?? children,\n  };\n}\n\n/**\n * Responsive mobile-first navbar component.\n *\n * Composition: Navbar should contain NavBrand (extracted to mobile panel), NavGroup items with optional align,\n * and NavLink children. Brand must be first child to appear in mobile menu.\n *\n * @example\n * <Navbar breakpoint=\"md\" aria-label=\"Main navigation\">\n *   <NavBrand><a href=\"/\">Logo</a></NavBrand>\n *   <NavGroup align=\"center\">\n *     <NavLink href=\"/docs\">Docs</NavLink>\n *   </NavGroup>\n *   <NavGroup align=\"end\">\n *     <NavLink href=\"/settings\">Settings</NavLink>\n *   </NavGroup>\n * </Navbar>\n */\nexport function Navbar(props: NavbarProps): JSX.Element {\n  const {\n    children,\n    breakpoint,\n    collapseIcon,\n    collapseIconPlacement = \"start\",\n    collapseLabel,\n    ref,\n    class: className,\n    id,\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = props;\n  const effectiveCollapseLabel = collapseLabel ?? \"Menu\";\n  const responsiveChildren = toChildArray(children);\n  const navbarChildren = splitNavbarChildren(responsiveChildren);\n  const desktopChildren = renderKeyedShellChildren(responsiveChildren, \"navbar-desktop\");\n  const panelChildren = renderKeyedShellChildren(navbarChildren.panelItems, \"navbar-panel\");\n  // Extract brand to display in mobile panel header\n  const responsiveCollapsedState =\n    breakpoint !== undefined ? state(isNavbarCollapsed(breakpoint)) : undefined;\n  const mobileMenuState = state(false);\n  const mobileMenuOpen = mobileMenuState();\n  const panelId = typeof id === \"string\" ? `${id}-panel` : undefined;\n  const responsiveCollapsed = breakpoint !== undefined ? responsiveCollapsedState?.() : false;\n  const panelOpen = Boolean(responsiveCollapsed && mobileMenuOpen);\n  const closePanel = () => mobileMenuState.set(false);\n  const closePanelOnNavActivation = (event: MouseEvent) => {\n    const target = event.target;\n\n    if (!(target instanceof Element)) {\n      return;\n    }\n\n    if (target.closest('a[data-slot=\"nav-link\"], a[data-slot=\"nav-item\"], a.navbar-item')) {\n      closePanel();\n    }\n  };\n  const togglePanel = () => {\n    mobileMenuState.set(!mobileMenuState());\n  };\n  const contextValue = {\n    active: () => breakpoint !== undefined,\n    collapseLabel: () => effectiveCollapseLabel,\n    closePanel,\n    panelId: () => panelId,\n    panelOpen: () => Boolean(responsiveCollapsedState?.() && mobileMenuOpen),\n    togglePanel,\n  };\n  const finalProps = mergeProps(rest, {\n    \"aria-label\": ariaLabel,\n    ref,\n    class: classes(\"navbar\", className),\n    \"data-collapse-below\": breakpoint,\n    \"data-responsive-collapsed\": responsiveCollapsed ? \"true\" : \"false\",\n    \"data-slot\": \"navbar\",\n  });\n\n  return (\n    <NavbarResponsiveContext.Scope value={contextValue}>\n      <nav {...finalProps}>\n        {breakpoint !== undefined ? (\n          <div class=\"navbar-mobile\" data-slot=\"navbar-mobile\">\n            <NavToggle\n              active={breakpoint !== undefined}\n              aria-controls={panelId}\n              aria-label={effectiveCollapseLabel}\n              icon={collapseIcon}\n              iconPlacement={collapseIconPlacement}\n              label={effectiveCollapseLabel}\n              onToggle={togglePanel}\n              open={panelOpen}\n              panelId={panelId}\n            />\n          </div>\n        ) : null}\n\n        <div class=\"navbar-shell\" data-slot=\"navbar-shell\">\n          {desktopChildren}\n        </div>\n\n        {breakpoint !== undefined ? (\n          <NavbarPanel\n            active={breakpoint !== undefined}\n            brand={navbarChildren.brand}\n            collapseLabel={effectiveCollapseLabel}\n            onClose={closePanel}\n            onClick={closePanelOnNavActivation}\n            open={panelOpen}\n            panelId={panelId}\n          >\n            {panelChildren}\n          </NavbarPanel>\n        ) : null}\n\n        {responsiveCollapsed && mobileMenuOpen ? (\n          <button\n            aria-label={`Close ${effectiveCollapseLabel}`}\n            class=\"navbar-backdrop\"\n            data-slot=\"navbar-backdrop\"\n            data-state=\"open\"\n            tabIndex={-1}\n            type=\"button\"\n            onClick={closePanel}\n          />\n        ) : null}\n\n        {breakpoint !== undefined ? (\n          <ShellResponsiveWatcher\n            breakpoint={breakpoint}\n            isCollapsed={isNavbarCollapsed}\n            onResize={(nextCollapsed) => {\n              responsiveCollapsedState?.set(nextCollapsed);\n            }}\n            onExpand={() => {\n              mobileMenuState?.set(false);\n            }}\n          />\n        ) : null}\n\n        <ShellPanelWatcher\n          contentId={panelId}\n          open={panelOpen}\n          panelSlot=\"navbar-panel\"\n          onClose={closePanel}\n        />\n      </nav>\n    </NavbarResponsiveContext.Scope>\n  );\n}\n\n/**\n * Menu toggle button for responsive navbar collapse.\n * Auto-renders when navbar is responsive (collapseBelow set).\n */\nexport function NavToggle(props: NavToggleProps): JSX.Element | null {\n  const {\n    children,\n    class: className,\n    active,\n    icon,\n    iconPlacement = \"start\",\n    label = \"Menu\",\n    ref,\n    onToggle,\n    open,\n    panelId,\n    ...rest\n  } = props;\n\n  if (active === false) {\n    return null;\n  }\n\n  const isOpen = open === true;\n\n  const finalProps = mergeProps(rest, {\n    ref,\n    class: classes(\"navbar-toggle\", className),\n    \"aria-controls\": panelId,\n    \"aria-expanded\": isOpen ? \"true\" : \"false\",\n    \"aria-label\": label,\n    \"data-slot\": \"navbar-toggle\",\n    \"data-state\": isOpen ? \"open\" : \"closed\",\n    type: \"button\",\n    onClick: () => onToggle?.(),\n  });\n\n  return (\n    <button {...finalProps}>\n      {children ?? renderNavbarCollapseContents(label, icon, iconPlacement)}\n    </button>\n  );\n}\n\n/**\n * Brand/logo container displayed in navbar and mobile panel header.\n */\nexport function NavBrand(props: NavBrandProps): JSX.Element {\n  const { children, ref, class: className, ...rest } = props;\n\n  return (\n    <div {...rest} ref={ref} class={classes(\"navbar-brand\", className)} data-slot=\"navbar-brand\">\n      {children}\n    </div>\n  );\n}\n\n/**\n * Navigation group for organizing related nav items.\n *\n * @param align - Alignment: \"start\" (default), \"center\", or \"end\". Using align=\"end\" automatically right-aligns the group.\n * @param label - Optional accessible label for grouped items.\n *\n * @example\n * <NavGroup align=\"center\">\n *   <NavLink href=\"/docs\">Docs</NavLink>\n * </NavGroup>\n */\nexport function NavGroup(props: NavGroupProps): JSX.Element {\n  const { children, id, ref, class: className, label, ...rest } = props;\n  const rawAlign = (rest as Record<string, unknown>)[\"data-align\"];\n  const align =\n    props.align ??\n    (rawAlign === \"start\" || rawAlign === \"center\" || rawAlign === \"end\"\n      ? (rawAlign as NavGroupProps[\"align\"])\n      : undefined);\n  const hasLabel = label !== undefined && label !== null;\n  const labelId = hasLabel && id ? `${id}-label` : undefined;\n  const accessibleLabel = typeof label === \"string\" ? label : undefined;\n\n  return (\n    <div\n      {...rest}\n      id={id}\n      ref={ref}\n      class={classes(\"navbar-group\", className)}\n      aria-label={labelId ? undefined : accessibleLabel}\n      aria-labelledby={labelId}\n      role={hasLabel ? \"group\" : rest.role}\n      data-align={resolveNavGroupAlign(align)}\n      data-has-label={hasLabel ? \"true\" : undefined}\n      data-slot=\"navbar-group\"\n    >\n      {hasLabel ? (\n        <>\n          <div id={labelId} class=\"navbar-group-label\" data-slot=\"navbar-group-label\">\n            {label}\n          </div>\n          <div class=\"navbar-group-body\" data-slot=\"navbar-group-body\">\n            {children}\n          </div>\n        </>\n      ) : (\n        children\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"navbar.js","names":["DropdownContent"],"sources":["../../../src/components/navbar/navbar.tsx"],"sourcesContent":["import { Dropdown, DropdownTrigger } from \"@askrjs/ui\";\nimport { Block } from \"../block\";\nimport { classes } from \"../_internal/classes\";\nimport { isJsxElement, toChildArray } from \"../_internal/jsx\";\nimport { DropdownContent } from \"../overlays/dropdown-content\";\nimport type { NavBrandProps, NavDropdownProps, NavGroupProps, NavbarProps } from \"./navbar.types\";\n\nconst ASKR_FRAGMENT = Symbol.for(\"askr.fragment\");\n\nfunction flattenNavbarChildren(children: unknown): unknown[] {\n  return toChildArray(children).flatMap((child) => {\n    if (isJsxElement(child) && child.type === ASKR_FRAGMENT) {\n      return flattenNavbarChildren(child.props?.children);\n    }\n\n    return [child];\n  });\n}\n\nfunction isNavBrandChild(child: unknown): boolean {\n  return (\n    isJsxElement(child) && (child.type === NavBrand || child.props?.[\"data-slot\"] === \"nav-brand\")\n  );\n}\n\nfunction hasRenderableChildren(children: readonly unknown[]): boolean {\n  return children.some((child) => {\n    if (Array.isArray(child)) {\n      return hasRenderableChildren(child);\n    }\n\n    return child !== undefined && child !== null && typeof child !== \"boolean\";\n  });\n}\n\nexport function Navbar(props: NavbarProps): JSX.Element {\n  const {\n    breakpoint,\n    children,\n    collapseAt = breakpoint ?? false,\n    collapseIcon,\n    collapseLabel = \"Menu\",\n    ...rest\n  } = props;\n\n  if (!collapseAt) {\n    return (\n      <Block\n        as=\"nav\"\n        direction=\"row\"\n        align=\"center\"\n        gap=\"md\"\n        width=\"full\"\n        {...rest}\n        data-slot=\"navbar\"\n      >\n        {children}\n      </Block>\n    );\n  }\n\n  const navbarChildren = flattenNavbarChildren(children);\n  const brandChildren = navbarChildren.filter(isNavBrandChild);\n  const navChildren = navbarChildren.filter((child) => !isNavBrandChild(child));\n  const hasNavContent = hasRenderableChildren(navChildren);\n  const content = (\n    <Block direction=\"row\" align=\"center\" gap=\"md\" width=\"full\" data-slot=\"navbar-content\">\n      {navChildren}\n    </Block>\n  );\n  const collapse = hasNavContent ? (\n    <details data-slot=\"navbar-collapse\">\n      <summary aria-label={collapseLabel} data-slot=\"navbar-toggle\">\n        {collapseIcon}\n        <span data-slot=\"navbar-toggle-label\">{collapseLabel}</span>\n      </summary>\n      {content}\n    </details>\n  ) : null;\n\n  return (\n    <Block\n      as=\"nav\"\n      direction=\"row\"\n      align=\"center\"\n      gap=\"md\"\n      width=\"full\"\n      {...rest}\n      data-collapse-at={collapseAt}\n      data-slot=\"navbar\"\n    >\n      {[...brandChildren, collapse]}\n    </Block>\n  );\n}\n\nexport function NavBrand(props: NavBrandProps): JSX.Element {\n  const { children, ...rest } = props;\n\n  return (\n    <Block direction=\"row\" align=\"center\" gap=\"sm\" shrink={false} {...rest} data-slot=\"nav-brand\">\n      {children}\n    </Block>\n  );\n}\n\nexport function NavGroup(props: NavGroupProps): JSX.Element {\n  const { align, children, label, title = label, ...rest } = props;\n\n  return (\n    <Block align={align} gap=\"sm\" {...rest} data-align={align} data-slot=\"nav-group\">\n      {title !== undefined ? <div data-slot=\"nav-group-label\">{title}</div> : null}\n      <Block gap=\"xs\" data-slot=\"nav-group-body\">\n        {children}\n      </Block>\n    </Block>\n  );\n}\n\nexport function NavDropdown(props: NavDropdownProps): JSX.Element {\n  const { align = \"end\", children, label, side = \"bottom\", sideOffset = 6, ...rest } = props;\n\n  return (\n    <Block direction=\"row\" align=\"center\" data-slot=\"nav-dropdown\">\n      <Dropdown {...rest}>\n        <DropdownTrigger class={classes(\"nav-item\")} data-slot=\"nav-dropdown-trigger\">\n          {label}\n        </DropdownTrigger>\n        <DropdownContent\n          align={align}\n          class={classes(\"dropdown-content\")}\n          data-slot=\"nav-dropdown-content\"\n          side={side}\n          sideOffset={sideOffset}\n        >\n          {children}\n        </DropdownContent>\n      </Dropdown>\n    </Block>\n  );\n}\n"],"mappings":";;;;;;;AAOA,MAAM,gBAAgB,OAAO,IAAI,eAAe;AAEhD,SAAS,sBAAsB,UAA8B;CAC3D,OAAO,aAAa,QAAQ,CAAC,CAAC,SAAS,UAAU;EAC/C,IAAI,aAAa,KAAK,KAAK,MAAM,SAAS,eACxC,OAAO,sBAAsB,MAAM,OAAO,QAAQ;EAGpD,OAAO,CAAC,KAAK;CACf,CAAC;AACH;AAEA,SAAS,gBAAgB,OAAyB;CAChD,OACE,aAAa,KAAK,MAAM,MAAM,SAAS,YAAY,MAAM,QAAQ,iBAAiB;AAEtF;AAEA,SAAS,sBAAsB,UAAuC;CACpE,OAAO,SAAS,MAAM,UAAU;EAC9B,IAAI,MAAM,QAAQ,KAAK,GACrB,OAAO,sBAAsB,KAAK;EAGpC,OAAO,UAAU,KAAA,KAAa,UAAU,QAAQ,OAAO,UAAU;CACnE,CAAC;AACH;AAEA,SAAgB,OAAO,OAAiC;CACtD,MAAM,EACJ,YACA,UACA,aAAa,cAAc,OAC3B,cACA,gBAAgB,QAChB,GAAG,SACD;CAEJ,IAAI,CAAC,YACH,OACE,oBAAC,OAAD;EACE,IAAG;EACH,WAAU;EACV,OAAM;EACN,KAAI;EACJ,OAAM;EACN,GAAI;EACJ,aAAU;EAET;CACI,CAAA;CAIX,MAAM,iBAAiB,sBAAsB,QAAQ;CACrD,MAAM,gBAAgB,eAAe,OAAO,eAAe;CAC3D,MAAM,cAAc,eAAe,QAAQ,UAAU,CAAC,gBAAgB,KAAK,CAAC;CAO5E,MAAM,WANgB,sBAAsB,WAMf,IAC3B,qBAAC,WAAD;EAAS,aAAU;YAAnB,CACE,qBAAC,WAAD;GAAS,cAAY;GAAe,aAAU;aAA9C,CACG,cACD,oBAAC,QAAD;IAAM,aAAU;cAAuB;GAAoB,CAAA,CACpD;MACR,oBAVF,OAAD;GAAO,WAAU;GAAM,OAAM;GAAS,KAAI;GAAK,OAAM;GAAO,aAAU;aACnE;EACI,CAQE,CACA;MACP;CAEJ,OACE,oBAAC,OAAD;EACE,IAAG;EACH,WAAU;EACV,OAAM;EACN,KAAI;EACJ,OAAM;EACN,GAAI;EACJ,oBAAkB;EAClB,aAAU;YAET,CAAC,GAAG,eAAe,QAAQ;CACvB,CAAA;AAEX;AAEA,SAAgB,SAAS,OAAmC;CAC1D,MAAM,EAAE,UAAU,GAAG,SAAS;CAE9B,OACE,oBAAC,OAAD;EAAO,WAAU;EAAM,OAAM;EAAS,KAAI;EAAK,QAAQ;EAAO,GAAI;EAAM,aAAU;EAC/E;CACI,CAAA;AAEX;AAEA,SAAgB,SAAS,OAAmC;CAC1D,MAAM,EAAE,OAAO,UAAU,OAAO,QAAQ,OAAO,GAAG,SAAS;CAE3D,OACE,qBAAC,OAAD;EAAc;EAAO,KAAI;EAAK,GAAI;EAAM,cAAY;EAAO,aAAU;YAArE,CACG,UAAU,KAAA,IAAY,oBAAC,OAAD;GAAK,aAAU;aAAmB;EAAW,CAAA,IAAI,MACxE,oBAAC,OAAD;GAAO,KAAI;GAAK,aAAU;GACvB;EACI,CAAA,CACF;;AAEX;AAEA,SAAgB,YAAY,OAAsC;CAChE,MAAM,EAAE,QAAQ,OAAO,UAAU,OAAO,OAAO,UAAU,aAAa,GAAG,GAAG,SAAS;CAErF,OACE,oBAAC,OAAD;EAAO,WAAU;EAAM,OAAM;EAAS,aAAU;YAC9C,qBAAC,UAAD;GAAU,GAAI;aAAd,CACE,oBAAC,iBAAD;IAAiB,OAAO,QAAQ,UAAU;IAAG,aAAU;cACpD;GACc,CAAA,GACjB,oBAACA,mBAAD;IACS;IACP,OAAO,QAAQ,kBAAkB;IACjC,aAAU;IACJ;IACM;IAEX;GACc,CAAA,CACT;;CACL,CAAA;AAEX"}

package/dist/components/navbar/navbar.types.d.ts

@@ -1,33 +1,23 @@
-import { NavItemAsChildProps, NavItemProps, NavItemVariant, NavLinkProps } from "../nav/nav.types.js";
-import { CollapseBreakpoint, CollapseIconPlacement } from "../shell/shell-nav.types.js";
+import { BlockAsChildProps, BlockDivProps, BlockElementProps } from "../block/block.types.js";
+import { DropdownContentOwnProps, DropdownProps } from "@askrjs/ui";
 
 //#region src/components/navbar/navbar.types.d.ts
-type NavGroupAlign = "start" | "center" | "end";
-type NavbarProps = Omit<JSX.IntrinsicElements["nav"], "children"> & {
-  children?: unknown;
-  breakpoint?: CollapseBreakpoint;
-  collapseIcon?: unknown;
-  collapseIconPlacement?: CollapseIconPlacement;
+type NavbarCollapseBreakpoint = "sm" | "md" | "lg" | "xl";
+type NavbarProps = Omit<BlockElementProps<"nav">, "as" | "direction" | "align"> & {
+  breakpoint?: NavbarCollapseBreakpoint | false;
+  collapseAt?: NavbarCollapseBreakpoint | false;
   collapseLabel?: string;
+  collapseIcon?: unknown;
 };
-type NavBrandProps = Omit<JSX.IntrinsicElements["div"], "children"> & {
-  children?: unknown;
-};
-type NavToggleProps = Omit<JSX.IntrinsicElements["button"], "children" | "type" | "onClick"> & {
-  children?: unknown;
-  active?: boolean;
-  icon?: unknown;
-  iconPlacement?: CollapseIconPlacement;
-  label?: string;
-  onToggle?: () => void;
-  open?: boolean;
-  panelId?: string;
+type NavBrandProps = BlockDivProps | BlockElementProps<"a"> | BlockAsChildProps;
+type NavGroupProps = Omit<BlockDivProps, "title"> & {
+  label?: unknown;
+  title?: unknown;
 };
-type NavGroupProps = Omit<JSX.IntrinsicElements["div"], "children"> & {
-  align?: NavGroupAlign;
+type NavDropdownProps = Omit<DropdownProps, "children"> & Pick<DropdownContentOwnProps, "align" | "side" | "sideOffset"> & {
+  label: unknown;
   children?: unknown;
-  label?: unknown;
 };
 //#endregion
-export { NavBrandProps, NavGroupProps, NavToggleProps, NavbarProps };
+export { NavBrandProps, NavDropdownProps, NavGroupProps, NavbarCollapseBreakpoint, NavbarProps };
 //# sourceMappingURL=navbar.types.d.ts.map

package/dist/components/page/index.d.ts

@@ -0,0 +1,2 @@
+import { PageProps } from "./page.types.js";
+import { Page } from "./page.js";

package/dist/components/page/page.d.ts

@@ -0,0 +1,7 @@
+import { PageProps } from "./page.types.js";
+
+//#region src/components/page/page.d.ts
+declare function Page(props: PageProps): JSX.Element;
+//#endregion
+export { Page };
+//# sourceMappingURL=page.d.ts.map

package/dist/components/page/page.js

@@ -0,0 +1,22 @@
+import { Block } from "../block/block.js";
+import { Container } from "../container/container.js";
+import { jsx } from "@askrjs/askr/jsx-runtime";
+//#region src/components/page/page.tsx
+function Page(props) {
+	const { children, ...rest } = props;
+	return /* @__PURE__ */ jsx(Block, {
+		as: "main",
+		grow: true,
+		...rest,
+		"data-slot": "page",
+		children: /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Block, {
+			paddingY: "xl",
+			gap: "lg",
+			children
+		}) })
+	});
+}
+//#endregion
+export { Page };
+
+//# sourceMappingURL=page.js.map

package/dist/components/page/page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.js","names":[],"sources":["../../../src/components/page/page.tsx"],"sourcesContent":["import { Block } from \"../block\";\nimport { Container } from \"../container\";\nimport type { PageProps } from \"./page.types\";\n\nexport function Page(props: PageProps): JSX.Element {\n  const { children, ...rest } = props;\n\n  return (\n    <Block as=\"main\" grow {...rest} data-slot=\"page\">\n      <Container>\n        <Block paddingY=\"xl\" gap=\"lg\">\n          {children}\n        </Block>\n      </Container>\n    </Block>\n  );\n}\n"],"mappings":";;;;AAIA,SAAgB,KAAK,OAA+B;CAClD,MAAM,EAAE,UAAU,GAAG,SAAS;CAE9B,OACE,oBAAC,OAAD;EAAO,IAAG;EAAO,MAAA;EAAK,GAAI;EAAM,aAAU;YACxC,oBAAC,WAAD,EAAA,UACE,oBAAC,OAAD;GAAO,UAAS;GAAK,KAAI;GACtB;EACI,CAAA,EACE,CAAA;CACN,CAAA;AAEX"}

package/dist/components/page/page.types.d.ts

@@ -0,0 +1,6 @@
+import { MainProps } from "../main/main.types.js";
+//#region src/components/page/page.types.d.ts
+type PageProps = MainProps;
+//#endregion
+export { PageProps };
+//# sourceMappingURL=page.types.d.ts.map

package/dist/components/page-header/index.d.ts

@@ -0,0 +1,2 @@
+import { PageHeaderProps } from "./page-header.types.js";
+import { PageHeader } from "./page-header.js";

package/dist/components/page-header/page-header.d.ts

@@ -0,0 +1,7 @@
+import { PageHeaderProps } from "./page-header.types.js";
+
+//#region src/components/page-header/page-header.d.ts
+declare function PageHeader(props: PageHeaderProps): JSX.Element;
+//#endregion
+export { PageHeader };
+//# sourceMappingURL=page-header.d.ts.map

package/dist/components/page-header/page-header.js

@@ -0,0 +1,37 @@
+import { Block } from "../block/block.js";
+import { jsx, jsxs } from "@askrjs/askr/jsx-runtime";
+//#region src/components/page-header/page-header.tsx
+function PageHeader(props) {
+	const { title, description, actions, ...rest } = props;
+	return /* @__PURE__ */ jsxs(Block, {
+		rowFrom: "md",
+		align: {
+			base: "start",
+			md: "center"
+		},
+		justify: "between",
+		gap: "lg",
+		...rest,
+		"data-slot": "page-header",
+		children: [/* @__PURE__ */ jsxs(Block, {
+			gap: "xs",
+			"data-slot": "page-header-copy",
+			children: [/* @__PURE__ */ jsx("h1", {
+				"data-slot": "page-header-title",
+				children: title
+			}), description !== void 0 ? /* @__PURE__ */ jsx("p", {
+				"data-slot": "page-header-description",
+				children: description
+			}) : null]
+		}), actions !== void 0 ? /* @__PURE__ */ jsx(Block, {
+			direction: "row",
+			gap: "sm",
+			"data-slot": "page-header-actions",
+			children: actions
+		}) : null]
+	});
+}
+//#endregion
+export { PageHeader };
+
+//# sourceMappingURL=page-header.js.map

package/dist/components/page-header/page-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.js","names":[],"sources":["../../../src/components/page-header/page-header.tsx"],"sourcesContent":["import { Block } from \"../block\";\nimport type { PageHeaderProps } from \"./page-header.types\";\n\nexport function PageHeader(props: PageHeaderProps): JSX.Element {\n  const { title, description, actions, ...rest } = props;\n\n  return (\n    <Block\n      rowFrom=\"md\"\n      align={{ base: \"start\", md: \"center\" }}\n      justify=\"between\"\n      gap=\"lg\"\n      {...rest}\n      data-slot=\"page-header\"\n    >\n      <Block gap=\"xs\" data-slot=\"page-header-copy\">\n        <h1 data-slot=\"page-header-title\">{title}</h1>\n        {description !== undefined ? (\n          <p data-slot=\"page-header-description\">{description}</p>\n        ) : null}\n      </Block>\n      {actions !== undefined ? (\n        <Block direction=\"row\" gap=\"sm\" data-slot=\"page-header-actions\">\n          {actions}\n        </Block>\n      ) : null}\n    </Block>\n  );\n}\n"],"mappings":";;;AAGA,SAAgB,WAAW,OAAqC;CAC9D,MAAM,EAAE,OAAO,aAAa,SAAS,GAAG,SAAS;CAEjD,OACE,qBAAC,OAAD;EACE,SAAQ;EACR,OAAO;GAAE,MAAM;GAAS,IAAI;EAAS;EACrC,SAAQ;EACR,KAAI;EACJ,GAAI;EACJ,aAAU;YANZ,CAQE,qBAAC,OAAD;GAAO,KAAI;GAAK,aAAU;aAA1B,CACE,oBAAC,MAAD;IAAI,aAAU;cAAqB;GAAU,CAAA,GAC5C,gBAAgB,KAAA,IACf,oBAAC,KAAD;IAAG,aAAU;cAA2B;GAAe,CAAA,IACrD,IACC;MACN,YAAY,KAAA,IACX,oBAAC,OAAD;GAAO,WAAU;GAAM,KAAI;GAAK,aAAU;aACvC;EACI,CAAA,IACL,IACC;;AAEX"}

package/dist/components/page-header/page-header.types.d.ts

@@ -0,0 +1,10 @@
+import { BlockDivProps } from "../block/block.types.js";
+//#region src/components/page-header/page-header.types.d.ts
+type PageHeaderProps = BlockDivProps & {
+  title: unknown;
+  description?: unknown;
+  actions?: unknown;
+};
+//#endregion
+export { PageHeaderProps };
+//# sourceMappingURL=page-header.types.d.ts.map

package/dist/components/section/index.d.ts

@@ -1,3 +1,2 @@
-import { SectionAsChildProps, SectionElementProps, SectionOwnProps, SectionProps } from "./section.types.js";
-import { Section } from "./section.js";
-import { SECTION_A11Y_CONTRACT, SectionA11yContract } from "./section.a11y.js";
+import { SectionProps } from "./section.types.js";
+import { Section } from "./section.js";

package/dist/components/section/section.d.ts

@@ -1,8 +1,7 @@
-import { SectionAsChildProps, SectionElementProps } from "./section.types.js";
+import { SectionProps } from "./section.types.js";
 
 //#region src/components/section/section.d.ts
-declare function Section(props: SectionElementProps): JSX.Element;
-declare function Section(props: SectionAsChildProps): JSX.Element;
+declare function Section(props: SectionProps): JSX.Element;
 //#endregion
 export { Section };
 //# sourceMappingURL=section.d.ts.map

package/dist/components/section/section.js

@@ -1,37 +1,14 @@
-import { mergeProps } from "../_internal/merge-props.js";
-import { serializeResponsiveValueIf } from "../_internal/layout.js";
-import { applyBoxLayoutStyles, splitBoxLayoutProps, withBoxLayoutClass } from "../_internal/box-layout.js";
+import { Block } from "../block/block.js";
 import { jsx } from "@askrjs/askr/jsx-runtime";
-import { Slot } from "@askrjs/askr/foundations";
 //#region src/components/section/section.tsx
-function isSectionSizeToken(value) {
-	return typeof value === "string" && [
-		"1",
-		"2",
-		"3",
-		"4"
-	].includes(value.trim());
-}
 function Section(props) {
-	const { asChild, children, size = "3", ref, style: userStyle, ...rest } = props;
-	const { boxProps, rest: passthroughProps } = splitBoxLayoutProps(rest);
-	const layoutStyle = {};
-	applyBoxLayoutStyles(layoutStyle, boxProps);
-	const layoutClass = withBoxLayoutClass(layoutStyle, userStyle);
-	const finalProps = mergeProps(passthroughProps, {
-		ref,
+	const { children, ...rest } = props;
+	return /* @__PURE__ */ jsx(Block, {
+		as: "section",
+		gap: "lg",
+		paddingY: "xl",
+		...rest,
 		"data-slot": "section",
-		"data-ak-layout": "true",
-		"data-size": serializeResponsiveValueIf(size, isSectionSizeToken),
-		...layoutClass ? { class: layoutClass } : {}
-	});
-	if (asChild) return /* @__PURE__ */ jsx(Slot, {
-		asChild: true,
-		...finalProps,
-		children
-	});
-	return /* @__PURE__ */ jsx("section", {
-		...finalProps,
 		children
 	});
 }

package/dist/components/section/section.js.map

@@ -1 +1 @@
-{"version":3,"file":"section.js","names":[],"sources":["../../../src/components/section/section.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport {\n  applyBoxLayoutStyles,\n  splitBoxLayoutProps,\n  withBoxLayoutClass,\n} from \"../_internal/box-layout\";\nimport { serializeResponsiveValueIf } from \"../_internal/layout\";\nimport type { SectionAsChildProps, SectionElementProps } from \"./section.types\";\n\nfunction isSectionSizeToken(value: unknown): value is string {\n  return typeof value === \"string\" && [\"1\", \"2\", \"3\", \"4\"].includes(value.trim());\n}\n\nexport function Section(props: SectionElementProps): JSX.Element;\nexport function Section(props: SectionAsChildProps): JSX.Element;\nexport function Section(props: SectionElementProps | SectionAsChildProps) {\n  const { asChild, children, size = \"3\", ref, style: userStyle, ...rest } = props;\n\n  const { boxProps, rest: passthroughProps } = splitBoxLayoutProps(rest);\n  const layoutStyle: Record<string, string | number> = {};\n  applyBoxLayoutStyles(layoutStyle, boxProps);\n  const layoutClass = withBoxLayoutClass(layoutStyle, userStyle);\n\n  const finalProps = mergeProps(passthroughProps, {\n    ref,\n    \"data-slot\": \"section\",\n    \"data-ak-layout\": \"true\",\n    \"data-size\": serializeResponsiveValueIf(size, isSectionSizeToken),\n    ...(layoutClass ? { class: layoutClass } : {}),\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children} />;\n  }\n\n  return <section {...finalProps}>{children}</section>;\n}\n"],"mappings":";;;;;;AAUA,SAAS,mBAAmB,OAAiC;CAC3D,OAAO,OAAO,UAAU,YAAY;EAAC;EAAK;EAAK;EAAK;CAAG,CAAC,CAAC,SAAS,MAAM,KAAK,CAAC;AAChF;AAIA,SAAgB,QAAQ,OAAkD;CACxE,MAAM,EAAE,SAAS,UAAU,OAAO,KAAK,KAAK,OAAO,WAAW,GAAG,SAAS;CAE1E,MAAM,EAAE,UAAU,MAAM,qBAAqB,oBAAoB,IAAI;CACrE,MAAM,cAA+C,CAAC;CACtD,qBAAqB,aAAa,QAAQ;CAC1C,MAAM,cAAc,mBAAmB,aAAa,SAAS;CAE7D,MAAM,aAAa,WAAW,kBAAkB;EAC9C;EACA,aAAa;EACb,kBAAkB;EAClB,aAAa,2BAA2B,MAAM,kBAAkB;EAChE,GAAI,cAAc,EAAE,OAAO,YAAY,IAAI,CAAC;CAC9C,CAAC;CAED,IAAI,SACF,OAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;CAAW,CAAA;CAG5D,OAAO,oBAAC,WAAD;EAAS,GAAI;EAAa;CAAkB,CAAA;AACrD"}
+{"version":3,"file":"section.js","names":[],"sources":["../../../src/components/section/section.tsx"],"sourcesContent":["import { Block } from \"../block\";\nimport type { SectionProps } from \"./section.types\";\n\nexport function Section(props: SectionProps): JSX.Element {\n  const { children, ...rest } = props;\n\n  return (\n    <Block as=\"section\" gap=\"lg\" paddingY=\"xl\" {...rest} data-slot=\"section\">\n      {children}\n    </Block>\n  );\n}\n"],"mappings":";;;AAGA,SAAgB,QAAQ,OAAkC;CACxD,MAAM,EAAE,UAAU,GAAG,SAAS;CAE9B,OACE,oBAAC,OAAD;EAAO,IAAG;EAAU,KAAI;EAAK,UAAS;EAAK,GAAI;EAAM,aAAU;EAC5D;CACI,CAAA;AAEX"}