@maanlamp/react-web-ui 0.0.0-stage → 0.1.0

package/dist/components/nav/nav-item-view.js

@@ -0,0 +1,243 @@
+import { Icon } from "../icon/icon.js";
+import { NavContext, NavItemLayoutContext } from "./nav-context.js";
+import nav_module_default from "./nav.module.js";
+import { c } from "react/compiler-runtime";
+import { use } from "react";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Tooltip } from "@base-ui/react/tooltip";
+import { useRender } from "@base-ui/react/use-render";
+// src/components/nav/nav-item-view.tsx
+/**
+* Hangs an entry's element off the nav's one tooltip, which names it while it
+* is unlabelled. Outside a `Nav.Root` the element stands alone.
+*/
+var EntryShell = (t0) => {
+	const $ = c(8);
+	const { layout: t1, labelled: t2, label, element } = t0;
+	const layout = t1 === void 0 ? "row" : t1;
+	const labelled = t2 === void 0 ? true : t2;
+	const nav = use(NavContext);
+	let t3;
+	if ($[0] !== element || $[1] !== label || $[2] !== labelled || $[3] !== nav) {
+		t3 = nav === null ? element : /* @__PURE__ */ jsx(Tooltip.Trigger, {
+			handle: nav.hint,
+			payload: label,
+			disabled: labelled,
+			render: element
+		});
+		$[0] = element;
+		$[1] = label;
+		$[2] = labelled;
+		$[3] = nav;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== layout || $[6] !== t3) {
+		t4 = /* @__PURE__ */ jsx(NavItemLayoutContext, {
+			value: layout,
+			children: t3
+		});
+		$[5] = layout;
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	return t4;
+};
+/** The attributes an entry's element carries for its layout and label. */
+var entryAttributes = ({ layout = "row", labelled = true, label }) => ({
+	"data-layout": layout,
+	"data-labelled": labelled ? void 0 : "false",
+	"aria-label": labelled ? void 0 : label
+});
+var NavItemElement = (t0) => {
+	const $ = c(8);
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = ref;
+		$[3] = render;
+	} else {
+		props = $[1];
+		ref = $[2];
+		render = $[3];
+	}
+	let t1;
+	if ($[4] !== props || $[5] !== ref || $[6] !== render) {
+		t1 = {
+			defaultTagName: "button",
+			render,
+			ref,
+			props
+		};
+		$[4] = props;
+		$[5] = ref;
+		$[6] = render;
+		$[7] = t1;
+	} else t1 = $[7];
+	return useRender(t1);
+};
+/**
+* The shell every nav entry shares, over whatever element `render` names — a
+* `Drawer.Trigger`, a router link, or the default `<button>`. Mark the current
+* destination with `data-active="true"` or `aria-current="page"`.
+*/
+var Root = (t0) => {
+	const $ = c(21);
+	let className;
+	let label;
+	let labelled;
+	let layout;
+	let props;
+	if ($[0] !== t0) {
+		({layout, labelled, label, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = label;
+		$[3] = labelled;
+		$[4] = layout;
+		$[5] = props;
+	} else {
+		className = $[1];
+		label = $[2];
+		labelled = $[3];
+		layout = $[4];
+		props = $[5];
+	}
+	let t1;
+	if ($[6] !== label || $[7] !== labelled || $[8] !== layout) {
+		t1 = entryAttributes({
+			layout,
+			labelled,
+			label
+		});
+		$[6] = label;
+		$[7] = labelled;
+		$[8] = layout;
+		$[9] = t1;
+	} else t1 = $[9];
+	let t2;
+	if ($[10] !== className) {
+		t2 = clsx(nav_module_default.item, className);
+		$[10] = className;
+		$[11] = t2;
+	} else t2 = $[11];
+	let t3;
+	if ($[12] !== props || $[13] !== t1 || $[14] !== t2) {
+		t3 = /* @__PURE__ */ jsx(NavItemElement, {
+			...t1,
+			className: t2,
+			...props
+		});
+		$[12] = props;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	let t4;
+	if ($[16] !== label || $[17] !== labelled || $[18] !== layout || $[19] !== t3) {
+		t4 = /* @__PURE__ */ jsx(EntryShell, {
+			layout,
+			labelled,
+			label,
+			element: t3
+		});
+		$[16] = label;
+		$[17] = labelled;
+		$[18] = layout;
+		$[19] = t3;
+		$[20] = t4;
+	} else t4 = $[20];
+	return t4;
+};
+/**
+* The entry's glyph. A stacked entry's icon carries the destination on its own,
+* so it takes 24px over the row's text-matched 16px.
+*/
+var NavItemIcon = (t0) => {
+	const $ = c(8);
+	const { svg, className } = t0;
+	const layout = use(NavItemLayoutContext);
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(nav_module_default.iconSlot, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	const t2 = layout === "stack" ? 1.5 : 1;
+	let t3;
+	if ($[2] !== svg || $[3] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Icon, {
+			svg,
+			label: "",
+			size: t2
+		});
+		$[2] = svg;
+		$[3] = t2;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== t1 || $[6] !== t3) {
+		t4 = /* @__PURE__ */ jsx("span", {
+			className: t1,
+			children: t3
+		});
+		$[5] = t1;
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	return t4;
+};
+/** The entry's text. Fades out where the entry is named by its tooltip instead. */
+var Label = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(nav_module_default.label, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/**
+* The parts of one nav entry: the `Root` shell, its `Icon` and its `Label`.
+* `Nav.Link` is the same shell as an `<a>`; reach for `Root` for an entry that
+* is not a link, such as the trigger of an overflow sheet.
+*
+* @example
+* <NavItemView.Root render={<Drawer.Trigger />} label="More" layout="stack">
+* 	<NavItemView.Icon svg={MoreIcon} />
+* 	<NavItemView.Label>More</NavItemView.Label>
+* </NavItemView.Root>
+*/
+var NavItemView = {
+	Root,
+	Icon: NavItemIcon,
+	Label
+};
+export { EntryShell, NavItemView, entryAttributes };

package/dist/components/nav/nav.css

@@ -0,0 +1,310 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._scroller_t5y6k_3 {
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+  }
+  ._list_t5y6k_7 {
+    list-style: none;
+  }
+  ._list_t5y6k_7[data-orientation=vertical] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nav-gap, var(--sys-unit-2));
+  }
+  ._list_t5y6k_7[data-orientation=horizontal] {
+    position: relative;
+    display: flex;
+    gap: var(--tab-gap, var(--sys-unit-2));
+    min-inline-size: max-content;
+  }
+  ._indicator_t5y6k_21 {
+    --_indicator-slack: var(
+    	--sliding-indicator-slack,
+    	0px
+    );
+    --_indicator-slide: var(--sys-motion-short)
+    	var(--sys-motion-emphasized);
+    position: absolute;
+    inset-inline-start: calc(var(--active-tab-left, 0) - var(--_indicator-slack));
+    inset-block-start: calc(var(--active-tab-top, 0) - var(--_indicator-slack));
+    overflow: hidden;
+    inline-size: calc(var(--active-tab-width, 0) + 2 * var(--_indicator-slack));
+    block-size: calc(var(--active-tab-height, 0) + 2 * var(--_indicator-slack));
+    opacity: 1;
+    scale: 1;
+    pointer-events: none;
+  }
+  @media not (prefers-reduced-motion) {
+    ._indicator_t5y6k_21 {
+      transition: inset-inline-start var(--_indicator-slide), inset-block-start var(--_indicator-slide), inline-size var(--_indicator-slide), block-size var(--_indicator-slide), opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-short) var(--sys-motion-overshoot);
+    }
+  }
+  ._indicator_t5y6k_21[data-jump] {
+    --_indicator-slide: 0s;
+  }
+  ._indicator_t5y6k_21[data-empty] {
+    opacity: 0;
+    scale: 0;
+  }
+  @media not (prefers-reduced-motion) {
+    ._indicator_t5y6k_21[data-empty] {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._indicator_t5y6k_21 {
+    border-radius: var(--sys-radius-full);
+    background: var(--tab-indicator, var(--sys-color-primary));
+  }
+  ._tab_t5y6k_59 {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sys-unit-4);
+    padding: var(--sys-unit-6) var(--sys-unit-10);
+    border-radius: var(--sys-radius-full);
+    color: var(--tab-fg, var(--sys-color-text-muted));
+    font: var(--sys-font-label-medium);
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+  ._tab_t5y6k_59 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._tab_t5y6k_59:focus-visible {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  ._tab_t5y6k_59 {
+    outline-offset: calc(-1 * var(--sys-focus-ring-width));
+  }
+  @media not (prefers-reduced-motion) {
+    ._tab_t5y6k_59 {
+      transition: background-color var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._tab_t5y6k_59:hover {
+    background: var(--tab-bg-hover, var(--sys-color-primary-container));
+  }
+  ._tab_t5y6k_59 {
+    position: relative;
+  }
+  @media not (prefers-reduced-motion) {
+    ._tab_t5y6k_59 {
+      transition: background-color var(--sys-motion-instant) var(--sys-motion-standard), color var(--sys-motion-short) var(--sys-motion-emphasized);
+    }
+  }
+  ._tab_t5y6k_59[aria-current=page], ._tab_t5y6k_59[data-active=true] {
+    color: var(--tab-fg-active, var(--sys-color-on-primary));
+  }
+  ._tab_t5y6k_59[aria-current=page]:hover, ._tab_t5y6k_59[data-active=true]:hover {
+    background: none;
+  }
+  ._iconSlot_t5y6k_103 {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+  }
+  ._item_t5y6k_109 {
+    display: flex;
+    gap: var(--sys-unit-6);
+    align-items: center;
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-block-size: var(--nav-item-min-size, var(--sys-unit-24));
+    padding: var(--sys-unit-4) var(--sys-unit-8);
+    border-radius: var(--sys-radius-full);
+    color: var(--nav-item-fg, var(--sys-color-text));
+    font: var(--sys-font-label-medium);
+    text-align: start;
+    text-decoration: none;
+  }
+  ._item_t5y6k_109 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._item_t5y6k_109:focus-visible {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  ._item_t5y6k_109 {
+    position: relative;
+    isolation: isolate;
+  }
+  ._item_t5y6k_109::after {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    inset: 0;
+    border-radius: inherit;
+    background: currentcolor;
+    opacity: 0;
+    pointer-events: none;
+  }
+  @media not (prefers-reduced-motion) {
+    ._item_t5y6k_109::after {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._item_t5y6k_109:hover:not(:disabled, [data-disabled])::after {
+    opacity: var(--sys-state-hover);
+  }
+  ._item_t5y6k_109:active:not(:disabled, [data-disabled])::after {
+    opacity: var(--sys-state-pressed);
+  }
+  @media not (prefers-reduced-motion) {
+    ._item_t5y6k_109 {
+      transition: background-color var(--sys-motion-short) var(--sys-motion-standard), color var(--sys-motion-short) var(--sys-motion-standard);
+    }
+  }
+  ._item_t5y6k_109[data-active=true], ._item_t5y6k_109[aria-current=page] {
+    background-color: var(--sys-color-primary-container);
+    color: var(--sys-color-on-primary-container);
+    font: var(--sys-font-label-medium-strong);
+  }
+  ._item_t5y6k_109[data-labelled=false] > ._label_t5y6k_165 {
+    opacity: 0;
+  }
+  ._item_t5y6k_109[data-layout=stack] {
+    display: grid;
+    grid-row: span 2;
+    grid-template-rows: subgrid;
+    gap: var(--sys-unit-2);
+    justify-items: center;
+    align-items: start;
+    min-inline-size: 0;
+    padding: var(--sys-unit-2);
+    border-radius: var(--sys-radius-md);
+    font: var(--sys-font-label-small);
+    text-align: center;
+  }
+  ._item_t5y6k_109[data-layout=stack][data-active=true], ._item_t5y6k_109[data-layout=stack][aria-current=page] {
+    background-color: transparent;
+    color: var(--sys-color-on-primary-container);
+    font: var(--sys-font-label-small-strong);
+  }
+  ._item_t5y6k_109[data-layout=stack] > ._iconSlot_t5y6k_103 {
+    inline-size: 100%;
+    max-inline-size: var(--sys-unit-24);
+    block-size: var(--sys-unit-16);
+    border-radius: var(--sys-radius-full);
+  }
+  @media not (prefers-reduced-motion) {
+    ._item_t5y6k_109[data-layout=stack] > ._iconSlot_t5y6k_103 {
+      transition: background-color var(--sys-motion-short) var(--sys-motion-standard);
+    }
+  }
+  ._item_t5y6k_109[data-layout=stack][data-active=true] > ._iconSlot_t5y6k_103, ._item_t5y6k_109[data-layout=stack][aria-current=page] > ._iconSlot_t5y6k_103 {
+    background-color: var(--sys-color-primary-container);
+  }
+  ._label_t5y6k_165 {
+    min-inline-size: 0;
+    overflow-wrap: normal;
+    hyphens: auto;
+    white-space: var(--nav-label-wrap, normal);
+  }
+  @media not (prefers-reduced-motion) {
+    ._label_t5y6k_165 {
+      transition: opacity var(--sys-motion-short) var(--sys-motion-standard);
+    }
+  }
+  ._hintPositioner_t5y6k_211 {
+    inline-size: var(--positioner-width);
+    block-size: var(--positioner-height);
+  }
+  @media not (prefers-reduced-motion) {
+    ._hintPositioner_t5y6k_211 {
+      transition: top var(--sys-motion-short) var(--sys-motion-standard), left var(--sys-motion-short) var(--sys-motion-standard);
+    }
+  }
+  ._hintViewport_t5y6k_220 {
+    overflow: hidden;
+  }
+  @media not (prefers-reduced-motion) {
+    ._hintViewport_t5y6k_220 > [data-current],
+    ._hintViewport_t5y6k_220 > [data-previous] {
+      transition: opacity var(--sys-motion-short) var(--sys-motion-standard);
+    }
+    ._hintViewport_t5y6k_220 > [data-current][data-starting-style],
+    ._hintViewport_t5y6k_220 > [data-previous][data-ending-style] {
+      opacity: 0;
+    }
+  }
+  ._group_t5y6k_233 {
+    display: flex;
+    flex-direction: column;
+  }
+  ._groupHeader_t5y6k_237 {
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-columns: minmax(0, 1fr);
+    align-items: center;
+    gap: var(--sys-unit-2);
+    border-radius: var(--sys-radius-full);
+  }
+  @media not (prefers-reduced-motion) {
+    ._groupHeader_t5y6k_237 {
+      transition: background-color var(--sys-motion-short) var(--sys-motion-standard);
+    }
+  }
+  ._groupHeader_t5y6k_237:has(> [data-active=true]), ._groupHeader_t5y6k_237:has(> [aria-current=page]) {
+    background-color: var(--sys-color-primary-container);
+  }
+  ._groupToggle_t5y6k_253 {
+    --btn-pad-y: var(--sys-unit-8);
+  }
+  ._groupPanel_t5y6k_256 {
+    overflow: hidden;
+  }
+  ._groupPanel_t5y6k_256[hidden]:not([hidden=until-found]) {
+    display: none;
+  }
+  @media not (prefers-reduced-motion) {
+    ._groupPanel_t5y6k_256 {
+      block-size: var(--collapsible-panel-height);
+      transition: block-size var(--sys-motion-short) var(--sys-motion-standard);
+    }
+    ._groupPanel_t5y6k_256[data-starting-style], ._groupPanel_t5y6k_256[data-ending-style] {
+      block-size: 0;
+    }
+  }
+  ._groupList_t5y6k_271 {
+    --branch-reach: var(--sys-unit-8);
+    --branch-line: color-mix(
+    	in oklab,
+    	var(--sys-color-border) 66.66%,
+    	var(--sys-color-surface)
+    );
+    --nav-item-min-size: var(--sys-unit-20);
+    --nav-item-fg: var(--sys-color-text-muted);
+    display: flex;
+    flex-direction: column;
+    gap: var(--sys-unit-2);
+    padding-block: var(--sys-unit-2);
+    padding-inline-start: var(--sys-unit-20);
+    list-style: none;
+  }
+  ._groupList_t5y6k_271 > li {
+    position: relative;
+  }
+  ._groupList_t5y6k_271 > li::before {
+    content: "";
+    position: absolute;
+    inset-block-start: calc(-1 * var(--sys-unit-2));
+    inset-inline-start: calc(-1 * var(--branch-reach));
+    inline-size: var(--branch-reach);
+    block-size: calc(50% + var(--sys-unit-2));
+    border-inline-start: 1px solid var(--branch-line);
+    border-block-end: 1px solid var(--branch-line);
+  }
+  ._groupList_t5y6k_271 > li:last-child::before {
+    border-end-start-radius: var(--sys-radius-sm);
+  }
+  ._groupList_t5y6k_271 > li:not(:last-child)::after {
+    content: "";
+    position: absolute;
+    inset-block: 50% 0;
+    inset-inline-start: calc(-1 * var(--branch-reach));
+    border-inline-start: 1px solid var(--branch-line);
+  }
+}

package/dist/components/nav/nav.d.ts

@@ -0,0 +1,84 @@
+import { type ComponentPropsWithRef, type ReactNode } from "react";
+import { type NavOrientation } from "./nav-context.ts";
+import { type NavEntryProps } from "./nav-item-view.tsx";
+export type NavRootProps = Omit<ComponentPropsWithRef<"nav">, "aria-label"> & Readonly<{
+    /** What the nav leads through, such as "Main". */
+    "aria-label": string;
+    /** A bar of tabs that lead to pages, or the app's rail. @default "vertical" */
+    orientation?: NavOrientation;
+}>;
+declare const Root: ({ orientation, className, children, ...props }: NavRootProps) => ReactNode;
+export type NavListProps = ComponentPropsWithRef<"ul">;
+/**
+ * The entries. In a horizontal nav a pill slides to the entry marked
+ * `aria-current="page"` or `data-active="true"`.
+ */
+declare const List: ({ className, children, ref, ...props }: NavListProps) => ReactNode;
+export type NavItemProps = ComponentPropsWithRef<"li">;
+declare const Item: (props: NavItemProps) => ReactNode;
+export type NavLinkProps = ComponentPropsWithRef<"a"> & NavEntryProps;
+/**
+ * A destination. It spreads every other prop onto the `<a>` and forwards its
+ * ref, so a router's `createLink` can wrap it; the router's
+ * `aria-current="page"` marks the current one.
+ */
+declare const Link: ({ layout, labelled, label, className, ...props }: NavLinkProps) => ReactNode;
+export type NavGroupProps = Omit<ComponentPropsWithRef<"div">, "onToggle"> & Readonly<{
+    /** Whether the subpages show, when controlled. */
+    open?: boolean;
+    /** Whether the subpages show at first, when uncontrolled. @default false */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}>;
+/**
+ * A destination with subpages: a `GroupHeader` holding its own `Link` and a
+ * `GroupToggle`, over a `GroupPanel` that folds the subpages open.
+ */
+declare const Group: ({ open, defaultOpen, onOpenChange, className, children, ...props }: NavGroupProps) => ReactNode;
+export type NavGroupHeaderProps = ComponentPropsWithRef<"div">;
+/** The group's row: its own `Link`, then its `GroupToggle`. Filled while that link is current. */
+declare const GroupHeader: ({ className, ...props }: NavGroupHeaderProps) => ReactNode;
+export type NavGroupToggleProps = Readonly<{
+    /** Accessible name, such as "Show subpages", surfaced as the tooltip hint and the `aria-label`. */
+    label: string;
+}>;
+declare const GroupToggle: ({ label, }: NavGroupToggleProps) => ReactNode;
+export type NavGroupPanelProps = Readonly<{
+    className?: string;
+    /** The subpages, each a `Nav.Item` holding a `Nav.Link`. */
+    children: ReactNode;
+}>;
+declare const GroupPanel: ({ className, children, }: NavGroupPanelProps) => ReactNode;
+type NavParts = Readonly<{
+    Root: typeof Root;
+    List: typeof List;
+    Item: typeof Item;
+    Link: typeof Link;
+    Group: typeof Group;
+    GroupHeader: typeof GroupHeader;
+    GroupToggle: typeof GroupToggle;
+    GroupPanel: typeof GroupPanel;
+}>;
+/**
+ * Navigation between pages as `nav > ul > li > a`: a horizontal bar of tabs
+ * with a pill that slides to the current page, or the app's vertical rail,
+ * whose destinations with subpages fold them open in a `Group`. An entry that
+ * is not a link is a `NavItemView.Root`.
+ *
+ * @example
+ * const NavLink = createLink(Nav.Link);
+ *
+ * <Nav.Root aria-label="Main">
+ * 	<Nav.List>
+ * 		<Nav.Item>
+ * 			<NavLink to="/" label="Home" activeOptions={{ exact: true }}>
+ * 				<NavItemView.Icon svg={HomeIcon} />
+ * 				<NavItemView.Label>Home</NavItemView.Label>
+ * 			</NavLink>
+ * 		</Nav.Item>
+ * 	</Nav.List>
+ * </Nav.Root>
+ */
+export declare const Nav: NavParts;
+export {};
+//# sourceMappingURL=nav.d.ts.map

package/dist/components/nav/nav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav.d.ts","sourceRoot":"","sources":["../../../src/components/nav/nav.tsx"],"names":[],"mappings":"AAMA,OAAO,EACN,KAAK,qBAAqB,EAE1B,KAAK,SAAS,EAGd,MAAM,OAAO,CAAC;AAIf,OAAO,EAEN,KAAK,cAAc,EACnB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAGN,KAAK,aAAa,EAClB,MAAM,qBAAqB,CAAC;AAM7B,MAAM,MAAM,YAAY,GAAG,IAAI,CAC9B,qBAAqB,CAAC,KAAK,CAAC,EAC5B,YAAY,CACZ,GACA,QAAQ,CAAC;IACR,kDAAkD;IAClD,YAAY,EAAE,MAAM,CAAC;IACrB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,cAAc,CAAC;CAC7B,CAAC,CAAC;AAEJ,QAAA,MAAM,IAAI,mDAKP,YAAY,KAAG,SAmCjB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;AAKvD;;;GAGG;AACH,QAAA,MAAM,IAAI,2CAKP,YAAY,KAAG,SAmCjB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;AAEvD,QAAA,MAAM,IAAI,UAAW,YAAY,KAAG,SAEnC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,qBAAqB,CAAC,GAAG,CAAC,GACpD,aAAa,CAAC;AAEf;;;;GAIG;AACH,QAAA,MAAM,IAAI,qDAMP,YAAY,KAAG,SAsBjB,CAAC;AAIF,MAAM,MAAM,aAAa,GAAG,IAAI,CAC/B,qBAAqB,CAAC,KAAK,CAAC,EAC5B,UAAU,CACV,GACA,QAAQ,CAAC;IACR,kDAAkD;IAClD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,4EAA4E;IAC5E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC,CAAC,CAAC;AAEJ;;;GAGG;AACH,QAAA,MAAM,KAAK,uEAOR,aAAa,KAAG,SAkBlB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAC9B,qBAAqB,CAAC,KAAK,CAAC,CAAC;AAE9B,kGAAkG;AAClG,QAAA,MAAM,WAAW,4BAGd,mBAAmB,KAAG,SAKxB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC;IAC1C,mGAAmG;IACnG,KAAK,EAAE,MAAM,CAAC;CACd,CAAC,CAAC;AAEH,QAAA,MAAM,WAAW,eAEd,mBAAmB,KAAG,SAaxB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,QAAQ,EAAE,SAAS,CAAC;CACpB,CAAC,CAAC;AAEH,QAAA,MAAM,UAAU,6BAGb,kBAAkB,KAAG,SAMvB,CAAC;AAEF,KAAK,QAAQ,GAAG,QAAQ,CAAC;IACxB,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,WAAW,EAAE,OAAO,WAAW,CAAC;IAChC,WAAW,EAAE,OAAO,WAAW,CAAC;IAChC,UAAU,EAAE,OAAO,UAAU,CAAC;CAC9B,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,GAAG,EAAE,QASjB,CAAC"}