@plumile/ui 0.1.185 → 0.1.188

package/lib/esm/atomic/molecules/dropdown/Dropdown.js

@@ -1,10 +1,11 @@
 import { cx as e } from "../../../theme/tools.js";
-import { container as t, content as n, contentPositioned as r } from "./dropdown.css.js";
-import { cloneElement as i, createContext as a, isValidElement as o, useCallback as s, useContext as c, useEffect as l, useLayoutEffect as u, useRef as d, useState as f } from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-import { createPortal as h } from "react-dom";
+import { container as t, content as ee, contentPositioned as n } from "./dropdown.css.js";
+import { getAnchoredFloatingPosition as r } from "../../../shared/anchoredFloatingPosition.js";
+import { cloneElement as i, createContext as a, isValidElement as o, useCallback as s, useContext as c, useEffect as l, useLayoutEffect as te, useRef as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { createPortal as m } from "react-dom";
 //#region src/atomic/molecules/dropdown/Dropdown.tsx
-var ee = new Set([
+var h = new Set([
 	"menu",
 	"listbox",
 	"tree",
@@ -15,136 +16,115 @@ var ee = new Set([
 	if (e == null) throw Error("useDropdown must be used within a <Dropdown />");
 	return e;
 }, v = (e) => typeof e != "object" || !e ? !1 : e.$$typeof === Symbol.for("react.forward_ref"), y = ({ trigger: a, children: c, className: _, contentClassName: y, placement: b = "bottom-start", offset: x = 4, matchTriggerWidth: S = !0, open: C, defaultOpen: w = !1, onOpenChange: T, closeOnItemClick: E = !1, portalContainer: D, contentRole: O = "menu", contentAriaLabel: k, ariaLabel: A }) => {
-	let j = C != null, [M, N] = f(w), P = M;
-	j && (P = !!C);
-	let F = d(null), I = d(null), L = d(null), [R, z] = f(null), B = s((e) => {
-		j || N(e), T?.(e);
-	}, [j, T]), V = s(() => {
-		B(!P);
-	}, [P, B]), H = s(() => {
-		B(!1);
-	}, [B]), U = s(() => {
-		B(!0);
-	}, [B]), W = s(() => {
-		let e = I.current, t = L.current;
-		if (e == null || t == null) return;
-		let n = e.getBoundingClientRect(), r = 0, i = 0;
-		switch (b) {
-			case "bottom-start":
-				r = n.bottom + x, i = n.left;
-				break;
-			case "bottom-end":
-				r = n.bottom + x, i = n.right - t.offsetWidth;
-				break;
-			case "top-start":
-				r = n.top - t.offsetHeight - x, i = n.left;
-				break;
-			case "top-end":
-				r = n.top - t.offsetHeight - x, i = n.right - t.offsetWidth;
-				break;
-			default: r = n.bottom + x, i = n.left;
-		}
-		let a = window.innerWidth, o = window.innerHeight, s;
-		S && (s = n.width);
-		let c = s ?? t.offsetWidth;
-		i + c > a - 4 && (i = Math.max(4, a - c - 4)), i < 4 && (i = 4);
-		let l = t.offsetHeight;
-		if (r + l > o - 4) if (b.startsWith("bottom")) {
-			let e = n.top - l - x;
-			r = e >= 4 ? e : Math.max(4, o - l - 4);
-		} else r = Math.max(4, o - l - 4);
-		r < 4 && (r = 4), z({
-			top: r,
-			left: i,
-			width: s
-		});
+	let j = C != null, [ne, re] = d(w), M = ne;
+	j && (M = !!C);
+	let N = u(null), P = u(null), F = u(null), [I, L] = d(null), R = s((e) => {
+		j || re(e), T?.(e);
+	}, [j, T]), z = s(() => {
+		R(!M);
+	}, [M, R]), B = s(() => {
+		R(!1);
+	}, [R]), V = s(() => {
+		R(!0);
+	}, [R]), H = s(() => {
+		let e = P.current, t = F.current;
+		e != null && t != null && L(r({
+			anchorRect: e.getBoundingClientRect(),
+			floatingWidth: t.offsetWidth,
+			floatingHeight: t.offsetHeight,
+			placement: b,
+			offset: x,
+			matchAnchorWidth: S,
+			viewportWidth: window.innerWidth,
+			viewportHeight: window.innerHeight
+		}));
 	}, [
 		b,
 		x,
 		S
 	]);
-	u(() => {
-		P && W();
+	te(() => {
+		M && H();
 	}, [
-		P,
-		W,
+		M,
+		H,
 		c
 	]), l(() => {
-		if (!P) return;
+		if (!M) return;
 		let e = () => {
-			W();
+			H();
 		};
 		return window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
 			window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
 		};
-	}, [P, W]), l(() => {
-		if (!P) return;
+	}, [M, H]), l(() => {
+		if (!M) return;
 		let e = (e) => {
 			let t = e.target;
-			F.current != null && L.current != null && !F.current.contains(t) && !L.current.contains(t) && H();
+			N.current != null && F.current != null && !N.current.contains(t) && !F.current.contains(t) && B();
 		}, t = (e) => {
-			e.key === "Escape" && (H(), I.current?.focus());
+			e.key === "Escape" && (B(), P.current?.focus());
 		};
 		return document.addEventListener("mousedown", e), document.addEventListener("keydown", t), () => {
 			document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
 		};
-	}, [P, H]), l(() => {
-		P && (L.current?.querySelector("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])"))?.focus();
-	}, [P]), l(() => {
-		if (!P || !E) return;
+	}, [M, B]), l(() => {
+		M && (F.current?.querySelector("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])"))?.focus();
+	}, [M]), l(() => {
+		if (!M || !E) return;
 		let e = (e) => {
-			L.current?.contains(e.target) && H();
+			F.current?.contains(e.target) && B();
 		};
 		return document.addEventListener("click", e, { capture: !0 }), () => {
 			document.removeEventListener("click", e, !0);
 		};
 	}, [
-		P,
+		M,
 		E,
-		H
+		B
 	]);
-	let G = a;
-	if (typeof a == "function" && (G = a(P)), !o(G)) throw Error("Dropdown trigger must be a React element.");
-	let K = typeof G.type == "string", q = K && G.type === "button";
-	if (!(K || typeof G.type == "function" || v(G.type))) throw Error("Dropdown trigger must be a DOM element or component that accepts a ref.");
-	let J = G.props.ref ?? G.ref, te = (e) => {
-		I.current = e, typeof J == "function" ? J(e) : J != null && (J.current = e);
-	}, Y = G.props, ne = (e) => {
-		Y.onClick?.(e), !e.defaultPrevented && V();
-	}, re = (e) => {
-		Y.onKeyDown?.(e), !e.defaultPrevented && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), V());
+	let U = a;
+	if (typeof a == "function" && (U = a(M)), !o(U)) throw Error("Dropdown trigger must be a React element.");
+	let W = typeof U.type == "string", G = W && U.type === "button";
+	if (!(W || typeof U.type == "function" || v(U.type))) throw Error("Dropdown trigger must be a DOM element or component that accepts a ref.");
+	let K = U.props.ref ?? U.ref, q = (e) => {
+		P.current = e, typeof K == "function" ? K(e) : K != null && (K.current = e);
+	}, J = U.props, Y = (e) => {
+		J.onClick?.(e), !e.defaultPrevented && z();
+	}, ie = (e) => {
+		J.onKeyDown?.(e), !e.defaultPrevented && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), z());
 	}, X = !0;
-	ee.has(O) && (X = O);
+	h.has(O) && (X = O);
 	let Z = {
-		onClick: ne,
+		onClick: Y,
 		"aria-haspopup": X,
-		"aria-expanded": P
+		"aria-expanded": M
 	};
-	A != null && A !== "" && (Z["aria-label"] = A), q ? Y.type ?? (Z.type = "button") : (Z.onKeyDown = re, Y.role ?? (Z.role = "button"), Y.tabIndex ?? (Z.tabIndex = 0)), Z.ref = te;
+	A != null && A !== "" && (Z["aria-label"] = A), G ? J.type ?? (Z.type = "button") : (Z.onKeyDown = ie, J.role ?? (Z.role = "button"), J.tabIndex ?? (Z.tabIndex = 0)), Z.ref = q;
 	let Q = {};
-	R != null && (Q = {
-		top: R.top,
-		left: R.left,
-		width: R.width
+	I != null && (Q = {
+		top: I.top,
+		left: I.left,
+		width: I.width
 	});
-	let ie = D ?? document.body, ae = {
-		close: H,
-		open: U,
-		isOpen: P
+	let ae = D ?? document.body, oe = {
+		close: B,
+		open: V,
+		isOpen: M
 	}, $ = null;
-	return P && ($ = h(/* @__PURE__ */ p("div", {
-		ref: L,
+	return M && ($ = m(/* @__PURE__ */ f("div", {
+		ref: F,
 		role: O,
 		"aria-label": k,
-		className: e(n, r, y),
+		className: e(ee, n, y),
 		style: Q,
 		children: c
-	}), ie)), /* @__PURE__ */ m(g.Provider, {
-		value: ae,
-		children: [/* @__PURE__ */ p("div", {
+	}), ae)), /* @__PURE__ */ p(g.Provider, {
+		value: oe,
+		children: [/* @__PURE__ */ f("div", {
 			className: e(t, _),
-			ref: F,
-			children: i(G, Z)
+			ref: N,
+			children: i(U, Z)
 		}), $]
 	});
 };

package/lib/esm/atomic/molecules/dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","names":[],"sources":["../../../../../src/atomic/molecules/dropdown/Dropdown.tsx"],"sourcesContent":["import {\n  useState,\n  useRef,\n  useEffect,\n  useLayoutEffect,\n  useCallback,\n  type ReactNode,\n  type ReactElement,\n  type JSX,\n  type Ref,\n  type AriaRole,\n  type HTMLAttributes,\n  type MouseEvent as ReactMouseEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n  createContext,\n  useContext,\n  isValidElement,\n  cloneElement,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport * as classes from './dropdown.css.js';\nimport { cx } from '../../../theme/tools.js';\n\n// Types\nexport type DropdownPlacement =\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'top-start'\n  | 'top-end';\n\ntype TriggerAriaHaspopup =\n  | true\n  | 'menu'\n  | 'listbox'\n  | 'tree'\n  | 'grid'\n  | 'dialog';\n\nconst triggerAriaHaspopupRoles: ReadonlySet<string> = new Set([\n  'menu',\n  'listbox',\n  'tree',\n  'grid',\n  'dialog',\n]);\n\ninterface DropdownContextValue {\n  close: () => void;\n  open: () => void;\n  isOpen: boolean;\n}\n\nconst DropdownContext = createContext<DropdownContextValue | null>(null);\n/**\n * Access the nearest Dropdown context. Throws if used outside a <Dropdown />.\n */\nexport const useDropdown = (): DropdownContextValue => {\n  const ctx = useContext(DropdownContext);\n  if (ctx == null) {\n    throw new Error('useDropdown must be used within a <Dropdown />');\n  }\n  return ctx;\n};\n\nexport interface DropdownProps {\n  trigger: ReactElement | ((isOpen: boolean) => ReactElement);\n  children: ReactNode;\n  className?: string;\n  contentClassName?: string;\n  placement?: DropdownPlacement;\n  offset?: number;\n  matchTriggerWidth?: boolean;\n  open?: boolean; // controlled\n  defaultOpen?: boolean; // uncontrolled\n  onOpenChange?: (open: boolean) => void;\n  closeOnItemClick?: boolean;\n  portalContainer?: HTMLElement | null;\n  contentRole?: AriaRole;\n  contentAriaLabel?: string;\n  // Accessible label if trigger is an icon only\n  ariaLabel?: string;\n}\n\ninterface PositionState {\n  top: number;\n  left: number;\n  width?: number;\n}\n\nconst isForwardRefComponent = (type: unknown): boolean => {\n  if (type == null || typeof type !== 'object') {\n    return false;\n  }\n  return (\n    (type as { $$typeof?: symbol }).$$typeof === Symbol.for('react.forward_ref')\n  );\n};\n\n/**\n * A scalable, portal-based dropdown component with basic collision handling,\n * controlled/uncontrolled modes, accessibility attributes, and optional\n * trigger width matching. Content is rendered in a React portal (default: document.body).\n */\nexport const Dropdown = ({\n  trigger,\n  children,\n  className,\n  contentClassName,\n  placement = 'bottom-start',\n  offset = 4,\n  matchTriggerWidth = true,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  closeOnItemClick = false,\n  portalContainer,\n  contentRole = 'menu',\n  contentAriaLabel,\n  ariaLabel,\n}: DropdownProps): JSX.Element => {\n  const isControlled = open != null;\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  let isOpen = uncontrolledOpen;\n  if (isControlled) {\n    isOpen = Boolean(open);\n  }\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [position, setPosition] = useState<PositionState | null>(null);\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (!isControlled) {\n        setUncontrolledOpen(next);\n      }\n      onOpenChange?.(next);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  const toggle = useCallback(() => {\n    setOpen(!isOpen);\n  }, [isOpen, setOpen]);\n  const close = useCallback(() => {\n    setOpen(false);\n  }, [setOpen]);\n  const openFn = useCallback(() => {\n    setOpen(true);\n  }, [setOpen]);\n\n  // Positioning logic\n  const computePosition = useCallback(() => {\n    const triggerEl = triggerRef.current;\n    const contentEl = contentRef.current;\n    if (triggerEl == null) {\n      return;\n    }\n    if (contentEl == null) {\n      return;\n    }\n\n    const rect = triggerEl.getBoundingClientRect();\n    let top = 0;\n    let left = 0;\n\n    switch (placement) {\n      case 'bottom-start':\n        top = rect.bottom + offset;\n        left = rect.left;\n        break;\n      case 'bottom-end':\n        top = rect.bottom + offset;\n        left = rect.right - contentEl.offsetWidth;\n        break;\n      case 'top-start':\n        top = rect.top - contentEl.offsetHeight - offset;\n        left = rect.left;\n        break;\n      case 'top-end':\n        top = rect.top - contentEl.offsetHeight - offset;\n        left = rect.right - contentEl.offsetWidth;\n        break;\n      default:\n        top = rect.bottom + offset;\n        left = rect.left;\n    }\n\n    // Keep within viewport (basic collision handling)\n    const vw = window.innerWidth;\n    const vh = window.innerHeight;\n    let width: number | undefined;\n    if (matchTriggerWidth) {\n      width = rect.width;\n    }\n    const contentWidth = width ?? contentEl.offsetWidth;\n\n    if (left + contentWidth > vw - 4) {\n      left = Math.max(4, vw - contentWidth - 4);\n    }\n    if (left < 4) left = 4;\n    const contentHeight = contentEl.offsetHeight;\n    if (top + contentHeight > vh - 4) {\n      // Try flip to top if bottom overflows and initial was bottom\n      if (placement.startsWith('bottom')) {\n        const flippedTop = rect.top - contentHeight - offset;\n        if (flippedTop >= 4) {\n          top = flippedTop;\n        } else {\n          top = Math.max(4, vh - contentHeight - 4);\n        }\n      } else {\n        top = Math.max(4, vh - contentHeight - 4);\n      }\n    }\n    if (top < 4) top = 4;\n\n    setPosition({ top, left, width });\n  }, [placement, offset, matchTriggerWidth]);\n\n  useLayoutEffect(() => {\n    if (isOpen) computePosition();\n  }, [isOpen, computePosition, children]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      return undefined;\n    }\n    const handle = () => {\n      computePosition();\n    };\n    window.addEventListener('resize', handle);\n    window.addEventListener('scroll', handle, true);\n\n    return () => {\n      window.removeEventListener('resize', handle);\n      window.removeEventListener('scroll', handle, true);\n    };\n  }, [isOpen, computePosition]);\n\n  // Outside click & Escape\n  useEffect(() => {\n    if (!isOpen) {\n      return undefined;\n    }\n    const onDocMouseDown = (e: globalThis.MouseEvent) => {\n      const target = e.target as Node;\n      if (\n        containerRef.current != null &&\n        contentRef.current != null &&\n        !containerRef.current.contains(target) &&\n        !contentRef.current.contains(target)\n      ) {\n        close();\n      }\n    };\n    const onKey = (e: globalThis.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        close();\n        triggerRef.current?.focus();\n      }\n    };\n    document.addEventListener('mousedown', onDocMouseDown);\n    document.addEventListener('keydown', onKey);\n\n    return () => {\n      document.removeEventListener('mousedown', onDocMouseDown);\n      document.removeEventListener('keydown', onKey);\n    };\n  }, [isOpen, close]);\n\n  // Keyboard navigation basic (ArrowDown focuses first focusable)\n  useEffect(() => {\n    if (!isOpen) return;\n    const firstFocusable = contentRef.current?.querySelector<HTMLElement>(\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n    );\n    firstFocusable?.focus();\n  }, [isOpen]);\n\n  // Close on item click if enabled\n  useEffect(() => {\n    if (!isOpen || !closeOnItemClick) {\n      return undefined;\n    }\n    const handler = (e: globalThis.MouseEvent) => {\n      if (contentRef.current?.contains(e.target as Node)) {\n        close();\n      }\n    };\n    document.addEventListener('click', handler, { capture: true });\n\n    return () => {\n      document.removeEventListener('click', handler, true);\n    };\n  }, [isOpen, closeOnItemClick, close]);\n\n  let triggerElement = trigger;\n  if (typeof trigger === 'function') {\n    triggerElement = trigger(isOpen);\n  }\n\n  if (!isValidElement(triggerElement)) {\n    throw new Error('Dropdown trigger must be a React element.');\n  }\n\n  const isHostElement = typeof triggerElement.type === 'string';\n  const isButtonElement = isHostElement && triggerElement.type === 'button';\n  const canAttachRef =\n    isHostElement ||\n    typeof triggerElement.type === 'function' ||\n    isForwardRefComponent(triggerElement.type);\n\n  if (!canAttachRef) {\n    throw new Error(\n      'Dropdown trigger must be a DOM element or component that accepts a ref.',\n    );\n  }\n\n  const triggerElementRef =\n    (triggerElement.props as { ref?: Ref<HTMLElement> }).ref ??\n    (triggerElement as ReactElement & { ref?: Ref<HTMLElement> }).ref;\n  const setTriggerRef = (node: HTMLElement | null) => {\n    triggerRef.current = node;\n    if (typeof triggerElementRef === 'function') {\n      triggerElementRef(node);\n    } else if (triggerElementRef != null) {\n      triggerElementRef.current = node;\n    }\n  };\n\n  const triggerProps = triggerElement.props as HTMLAttributes<HTMLElement> & {\n    type?: string;\n  };\n\n  const handleTriggerClick = (event: ReactMouseEvent<HTMLElement>) => {\n    triggerProps.onClick?.(event);\n    if (event.defaultPrevented) {\n      return;\n    }\n    toggle();\n  };\n\n  const handleTriggerKeyDown = (event: ReactKeyboardEvent<HTMLElement>) => {\n    triggerProps.onKeyDown?.(event);\n    if (event.defaultPrevented) {\n      return;\n    }\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      toggle();\n    }\n  };\n\n  let triggerAriaHaspopup: TriggerAriaHaspopup = true;\n  if (triggerAriaHaspopupRoles.has(contentRole)) {\n    triggerAriaHaspopup = contentRole as TriggerAriaHaspopup;\n  }\n\n  const mergedTriggerProps: Record<string, unknown> = {\n    onClick: handleTriggerClick,\n    'aria-haspopup': triggerAriaHaspopup,\n    'aria-expanded': isOpen,\n  };\n\n  if (ariaLabel != null && ariaLabel !== '') {\n    mergedTriggerProps['aria-label'] = ariaLabel;\n  }\n\n  if (isButtonElement) {\n    if (triggerProps.type == null) {\n      mergedTriggerProps.type = 'button';\n    }\n  } else {\n    mergedTriggerProps.onKeyDown = handleTriggerKeyDown;\n    if (triggerProps.role == null) {\n      mergedTriggerProps.role = 'button';\n    }\n    if (triggerProps.tabIndex == null) {\n      mergedTriggerProps.tabIndex = 0;\n    }\n  }\n\n  mergedTriggerProps.ref = setTriggerRef;\n\n  let contentStyles: React.CSSProperties = {};\n  if (position != null) {\n    contentStyles = {\n      top: position.top,\n      left: position.left,\n      width: position.width,\n    };\n  }\n\n  const portalTarget = portalContainer ?? document.body;\n\n  const contextValue: DropdownContextValue = {\n    close,\n    open: openFn,\n    isOpen,\n  };\n\n  let dropdownContent: JSX.Element | null = null;\n  if (isOpen) {\n    dropdownContent = createPortal(\n      <div\n        ref={contentRef}\n        role={contentRole}\n        aria-label={contentAriaLabel}\n        className={cx(\n          classes.content,\n          classes.contentPositioned,\n          contentClassName,\n        )}\n        style={contentStyles}\n      >\n        {children}\n      </div>,\n      portalTarget,\n    );\n  }\n\n  return (\n    <DropdownContext.Provider value={contextValue}>\n      <div className={cx(classes.container, className)} ref={containerRef}>\n        {cloneElement(triggerElement, mergedTriggerProps)}\n      </div>\n      {dropdownContent}\n    </DropdownContext.Provider>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","names":[],"sources":["../../../../../src/atomic/molecules/dropdown/Dropdown.tsx"],"sourcesContent":["import {\n  useState,\n  useRef,\n  useEffect,\n  useLayoutEffect,\n  useCallback,\n  type ReactNode,\n  type ReactElement,\n  type JSX,\n  type Ref,\n  type AriaRole,\n  type HTMLAttributes,\n  type MouseEvent as ReactMouseEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n  createContext,\n  useContext,\n  isValidElement,\n  cloneElement,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport * as classes from './dropdown.css.js';\nimport { cx } from '../../../theme/tools.js';\nimport {\n  getAnchoredFloatingPosition,\n  type AnchoredFloatingPlacement,\n} from '../../../shared/anchoredFloatingPosition.js';\n\n// Types\nexport type DropdownPlacement = AnchoredFloatingPlacement;\n\ntype TriggerAriaHaspopup =\n  | true\n  | 'menu'\n  | 'listbox'\n  | 'tree'\n  | 'grid'\n  | 'dialog';\n\nconst triggerAriaHaspopupRoles: ReadonlySet<string> = new Set([\n  'menu',\n  'listbox',\n  'tree',\n  'grid',\n  'dialog',\n]);\n\ninterface DropdownContextValue {\n  close: () => void;\n  open: () => void;\n  isOpen: boolean;\n}\n\nconst DropdownContext = createContext<DropdownContextValue | null>(null);\n/**\n * Access the nearest Dropdown context. Throws if used outside a <Dropdown />.\n */\nexport const useDropdown = (): DropdownContextValue => {\n  const ctx = useContext(DropdownContext);\n  if (ctx == null) {\n    throw new Error('useDropdown must be used within a <Dropdown />');\n  }\n  return ctx;\n};\n\nexport interface DropdownProps {\n  trigger: ReactElement | ((isOpen: boolean) => ReactElement);\n  children: ReactNode;\n  className?: string;\n  contentClassName?: string;\n  placement?: DropdownPlacement;\n  offset?: number;\n  matchTriggerWidth?: boolean;\n  open?: boolean; // controlled\n  defaultOpen?: boolean; // uncontrolled\n  onOpenChange?: (open: boolean) => void;\n  closeOnItemClick?: boolean;\n  portalContainer?: HTMLElement | null;\n  contentRole?: AriaRole;\n  contentAriaLabel?: string;\n  // Accessible label if trigger is an icon only\n  ariaLabel?: string;\n}\n\nconst isForwardRefComponent = (type: unknown): boolean => {\n  if (type == null || typeof type !== 'object') {\n    return false;\n  }\n  return (\n    (type as { $$typeof?: symbol }).$$typeof === Symbol.for('react.forward_ref')\n  );\n};\n\n/**\n * A scalable, portal-based dropdown component with basic collision handling,\n * controlled/uncontrolled modes, accessibility attributes, and optional\n * trigger width matching. Content is rendered in a React portal (default: document.body).\n */\nexport const Dropdown = ({\n  trigger,\n  children,\n  className,\n  contentClassName,\n  placement = 'bottom-start',\n  offset = 4,\n  matchTriggerWidth = true,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  closeOnItemClick = false,\n  portalContainer,\n  contentRole = 'menu',\n  contentAriaLabel,\n  ariaLabel,\n}: DropdownProps): JSX.Element => {\n  const isControlled = open != null;\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  let isOpen = uncontrolledOpen;\n  if (isControlled) {\n    isOpen = Boolean(open);\n  }\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [position, setPosition] = useState<React.CSSProperties | null>(null);\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (!isControlled) {\n        setUncontrolledOpen(next);\n      }\n      onOpenChange?.(next);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  const toggle = useCallback(() => {\n    setOpen(!isOpen);\n  }, [isOpen, setOpen]);\n  const close = useCallback(() => {\n    setOpen(false);\n  }, [setOpen]);\n  const openFn = useCallback(() => {\n    setOpen(true);\n  }, [setOpen]);\n\n  // Positioning logic\n  const computePosition = useCallback(() => {\n    const triggerEl = triggerRef.current;\n    const contentEl = contentRef.current;\n    if (triggerEl == null) {\n      return;\n    }\n    if (contentEl == null) {\n      return;\n    }\n\n    setPosition(\n      getAnchoredFloatingPosition({\n        anchorRect: triggerEl.getBoundingClientRect(),\n        floatingWidth: contentEl.offsetWidth,\n        floatingHeight: contentEl.offsetHeight,\n        placement,\n        offset,\n        matchAnchorWidth: matchTriggerWidth,\n        viewportWidth: window.innerWidth,\n        viewportHeight: window.innerHeight,\n      }),\n    );\n  }, [placement, offset, matchTriggerWidth]);\n\n  useLayoutEffect(() => {\n    if (isOpen) computePosition();\n  }, [isOpen, computePosition, children]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      return undefined;\n    }\n    const handle = () => {\n      computePosition();\n    };\n    window.addEventListener('resize', handle);\n    window.addEventListener('scroll', handle, true);\n\n    return () => {\n      window.removeEventListener('resize', handle);\n      window.removeEventListener('scroll', handle, true);\n    };\n  }, [isOpen, computePosition]);\n\n  // Outside click & Escape\n  useEffect(() => {\n    if (!isOpen) {\n      return undefined;\n    }\n    const onDocMouseDown = (e: globalThis.MouseEvent) => {\n      const target = e.target as Node;\n      if (\n        containerRef.current != null &&\n        contentRef.current != null &&\n        !containerRef.current.contains(target) &&\n        !contentRef.current.contains(target)\n      ) {\n        close();\n      }\n    };\n    const onKey = (e: globalThis.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        close();\n        triggerRef.current?.focus();\n      }\n    };\n    document.addEventListener('mousedown', onDocMouseDown);\n    document.addEventListener('keydown', onKey);\n\n    return () => {\n      document.removeEventListener('mousedown', onDocMouseDown);\n      document.removeEventListener('keydown', onKey);\n    };\n  }, [isOpen, close]);\n\n  // Keyboard navigation basic (ArrowDown focuses first focusable)\n  useEffect(() => {\n    if (!isOpen) return;\n    const firstFocusable = contentRef.current?.querySelector<HTMLElement>(\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n    );\n    firstFocusable?.focus();\n  }, [isOpen]);\n\n  // Close on item click if enabled\n  useEffect(() => {\n    if (!isOpen || !closeOnItemClick) {\n      return undefined;\n    }\n    const handler = (e: globalThis.MouseEvent) => {\n      if (contentRef.current?.contains(e.target as Node)) {\n        close();\n      }\n    };\n    document.addEventListener('click', handler, { capture: true });\n\n    return () => {\n      document.removeEventListener('click', handler, true);\n    };\n  }, [isOpen, closeOnItemClick, close]);\n\n  let triggerElement = trigger;\n  if (typeof trigger === 'function') {\n    triggerElement = trigger(isOpen);\n  }\n\n  if (!isValidElement(triggerElement)) {\n    throw new Error('Dropdown trigger must be a React element.');\n  }\n\n  const isHostElement = typeof triggerElement.type === 'string';\n  const isButtonElement = isHostElement && triggerElement.type === 'button';\n  const canAttachRef =\n    isHostElement ||\n    typeof triggerElement.type === 'function' ||\n    isForwardRefComponent(triggerElement.type);\n\n  if (!canAttachRef) {\n    throw new Error(\n      'Dropdown trigger must be a DOM element or component that accepts a ref.',\n    );\n  }\n\n  const triggerElementRef =\n    (triggerElement.props as { ref?: Ref<HTMLElement> }).ref ??\n    (triggerElement as ReactElement & { ref?: Ref<HTMLElement> }).ref;\n  const setTriggerRef = (node: HTMLElement | null) => {\n    triggerRef.current = node;\n    if (typeof triggerElementRef === 'function') {\n      triggerElementRef(node);\n    } else if (triggerElementRef != null) {\n      triggerElementRef.current = node;\n    }\n  };\n\n  const triggerProps = triggerElement.props as HTMLAttributes<HTMLElement> & {\n    type?: string;\n  };\n\n  const handleTriggerClick = (event: ReactMouseEvent<HTMLElement>) => {\n    triggerProps.onClick?.(event);\n    if (event.defaultPrevented) {\n      return;\n    }\n    toggle();\n  };\n\n  const handleTriggerKeyDown = (event: ReactKeyboardEvent<HTMLElement>) => {\n    triggerProps.onKeyDown?.(event);\n    if (event.defaultPrevented) {\n      return;\n    }\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      toggle();\n    }\n  };\n\n  let triggerAriaHaspopup: TriggerAriaHaspopup = true;\n  if (triggerAriaHaspopupRoles.has(contentRole)) {\n    triggerAriaHaspopup = contentRole as TriggerAriaHaspopup;\n  }\n\n  const mergedTriggerProps: Record<string, unknown> = {\n    onClick: handleTriggerClick,\n    'aria-haspopup': triggerAriaHaspopup,\n    'aria-expanded': isOpen,\n  };\n\n  if (ariaLabel != null && ariaLabel !== '') {\n    mergedTriggerProps['aria-label'] = ariaLabel;\n  }\n\n  if (isButtonElement) {\n    if (triggerProps.type == null) {\n      mergedTriggerProps.type = 'button';\n    }\n  } else {\n    mergedTriggerProps.onKeyDown = handleTriggerKeyDown;\n    if (triggerProps.role == null) {\n      mergedTriggerProps.role = 'button';\n    }\n    if (triggerProps.tabIndex == null) {\n      mergedTriggerProps.tabIndex = 0;\n    }\n  }\n\n  mergedTriggerProps.ref = setTriggerRef;\n\n  let contentStyles: React.CSSProperties = {};\n  if (position != null) {\n    contentStyles = {\n      top: position.top,\n      left: position.left,\n      width: position.width,\n    };\n  }\n\n  const portalTarget = portalContainer ?? document.body;\n\n  const contextValue: DropdownContextValue = {\n    close,\n    open: openFn,\n    isOpen,\n  };\n\n  let dropdownContent: JSX.Element | null = null;\n  if (isOpen) {\n    dropdownContent = createPortal(\n      <div\n        ref={contentRef}\n        role={contentRole}\n        aria-label={contentAriaLabel}\n        className={cx(\n          classes.content,\n          classes.contentPositioned,\n          contentClassName,\n        )}\n        style={contentStyles}\n      >\n        {children}\n      </div>,\n      portalTarget,\n    );\n  }\n\n  return (\n    <DropdownContext.Provider value={contextValue}>\n      <div className={cx(classes.container, className)} ref={containerRef}>\n        {cloneElement(triggerElement, mergedTriggerProps)}\n      </div>\n      {dropdownContent}\n    </DropdownContext.Provider>\n  );\n};\n"],"mappings":"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"}

package/lib/esm/atomic/molecules/dropdown/dropdown.css.js

@@ -1,7 +1,7 @@
 /* empty css                                      */
 /* empty css                        */
 //#region src/atomic/molecules/dropdown/dropdown.css.ts
-var e = "mr2gir0 txvbqb13i7", t = "mr2gir1 txvbqb1b85 txvbqb28o txvbqb2sj txvbqb1d9 txvbqb2up txvbqb1avm txvbqbwr6", n = "mr2gir2 txvbqb13ik txvbqb18f5 txvbqblvq", r = "mr2gir3 txvbqbfok", i = "mr2gir4 txvbqbwlr", a = "mr2gir5 txvbqbo6s txvbqbo7v txvbqbwvi", o = "mr2gir6 txvbqbv";
+var e = "mr2gir0 txvbqb13ik", t = "mr2gir1 txvbqb1b8v txvbqb28o txvbqb2sj txvbqb1d9 txvbqb2up txvbqb1awc txvbqbwr6", n = "mr2gir2 txvbqb13ix txvbqb18fi txvbqblvq", r = "mr2gir3 txvbqbfok", i = "mr2gir4 txvbqbwlr", a = "mr2gir5 txvbqbo6s txvbqbo7v txvbqbwvv", o = "mr2gir6 txvbqbv";
 //#endregion
 export { e as container, t as content, n as contentPositioned, i as focusOutlineReset, r as hidden, a as menu, o as menuItem };
 

package/lib/esm/atomic/molecules/empty-state/EmptyState.css.js

@@ -3,36 +3,36 @@
 import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/atomic/molecules/empty-state/EmptyState.css.ts
 var t = e({
-	defaultClassName: "_1lrdacm7 _1lrdacm0 txvbqb19uf",
+	defaultClassName: "_1lrdacm7 _1lrdacm0 txvbqb19us",
 	variantClassNames: {
 		variant: {
 			framed: "_1lrdacm8",
-			plain: "_1lrdacm9 _1lrdacm1 txvbqbfpn txvbqbh4x txvbqbls4 txvbqb1bg3"
+			plain: "_1lrdacm9 _1lrdacm1 txvbqbfpn txvbqbh4x txvbqbls4 txvbqb1bgt"
 		},
 		density: {
 			default: "_1lrdacma _1lrdacm2 txvbqbhdl",
-			compact: "_1lrdacmb _1lrdacm3 txvbqb10na txvbqb11kv txvbqb12km txvbqbxwp txvbqbhdy"
+			compact: "_1lrdacmb _1lrdacm3 txvbqb10nn txvbqb11l8 txvbqb12kz txvbqbxx2 txvbqbhdy"
 		},
 		align: {
-			center: "_1lrdacmc _1lrdacm4 txvbqbey txvbqb18dp",
-			start: "_1lrdacmd _1lrdacm5 txvbqbel txvbqb18dc"
+			center: "_1lrdacmc _1lrdacm4 txvbqbey txvbqb18e2",
+			start: "_1lrdacmd _1lrdacm5 txvbqbel txvbqb18dp"
 		}
 	},
 	defaultVariants: {},
 	compoundVariants: [[{
 		variant: "plain",
 		density: "default"
-	}, "_1lrdacm6 txvbqb10o0 txvbqb11ll txvbqb12lc txvbqbxxf"]]
+	}, "_1lrdacm6 txvbqb10od txvbqb11ly txvbqb12lp txvbqbxxs"]]
 }), n = e({
-	defaultClassName: "_1lrdacmj _1lrdacme txvbqb19uf txvbqbfpn txvbqbh4x txvbqbls4",
+	defaultClassName: "_1lrdacmj _1lrdacme txvbqb19us txvbqbfpn txvbqbh4x txvbqbls4",
 	variantClassNames: {
 		density: {
 			default: "_1lrdacmk _1lrdacmf txvbqbhdl",
 			compact: "_1lrdacml _1lrdacmg txvbqbhdy"
 		},
 		align: {
-			center: "_1lrdacmm _1lrdacmh txvbqbey txvbqb18dp",
-			start: "_1lrdacmn _1lrdacmi txvbqbel txvbqb18dc"
+			center: "_1lrdacmm _1lrdacmh txvbqbey txvbqb18e2",
+			start: "_1lrdacmn _1lrdacmi txvbqbel txvbqb18dp"
 		}
 	},
 	defaultVariants: {},
@@ -40,17 +40,17 @@ var t = e({
 }), r = e({
 	defaultClassName: "_1lrdacmv _1lrdacmo txvbqbfpn txvbqbey txvbqbls4 txvbqbam",
 	variantClassNames: { tone: {
-		neutral: "_1lrdacmw _1lrdacmp txvbqb1bg1",
-		muted: "_1lrdacmx _1lrdacmq txvbqb1bg3",
-		info: "_1lrdacmy _1lrdacmr txvbqb1bj1",
-		success: "_1lrdacmz _1lrdacms txvbqb1bit",
-		warning: "_1lrdacm10 _1lrdacmt txvbqb1bix",
-		danger: "_1lrdacm11 _1lrdacmu txvbqb1bij"
+		neutral: "_1lrdacmw _1lrdacmp txvbqb1bgr",
+		muted: "_1lrdacmx _1lrdacmq txvbqb1bgt",
+		info: "_1lrdacmy _1lrdacmr txvbqb1bjr",
+		success: "_1lrdacmz _1lrdacms txvbqb1bjj",
+		warning: "_1lrdacm10 _1lrdacmt txvbqb1bjn",
+		danger: "_1lrdacm11 _1lrdacmu txvbqb1bj9"
 	} },
 	defaultVariants: {},
 	compoundVariants: []
 }), i = e({
-	defaultClassName: "_1lrdacm15 _1lrdacm12 txvbqbo7v txvbqbhbf txvbqb1bg1",
+	defaultClassName: "_1lrdacm15 _1lrdacm12 txvbqbo7v txvbqbhbf txvbqb1bgr",
 	variantClassNames: { density: {
 		default: "_1lrdacm16 _1lrdacm13 txvbqba9",
 		compact: "_1lrdacm17 _1lrdacm14 txvbqba9"
@@ -58,7 +58,7 @@ var t = e({
 	defaultVariants: {},
 	compoundVariants: []
 }), a = e({
-	defaultClassName: "_1lrdacm1b _1lrdacm18 txvbqbo7v txvbqb9j txvbqb1bg3",
+	defaultClassName: "_1lrdacm1b _1lrdacm18 txvbqbo7v txvbqb9j txvbqb1bgt",
 	variantClassNames: { density: {
 		default: "_1lrdacm1c _1lrdacm19 txvbqbu5n",
 		compact: "_1lrdacm1d _1lrdacm1a txvbqbu4x"

package/lib/esm/atomic/molecules/form/formStyles.css.js

@@ -2,7 +2,7 @@
 /* empty css                                             */
 /* empty css                          */
 //#region src/atomic/molecules/form/formStyles.css.ts
-var e = "_14h3k5k0 txvbqbfpn txvbqbh4x txvbqbhf1", t = "_14h3k5k1", n = "_14h3k5k2 txvbqbfpn txvbqbh4x txvbqbhd8", r = "_14h3k5k4 _14h3k5k3 txvbqb1b87 txvbqb1cw txvbqb2up txvbqb2sj txvbqb28o txvbqb1bg1 txvbqb9j txvbqbwwy txvbqb7g txvbqb76 txvbqb7t", i = "_14h3k5k5 txvbqb1bij txvbqb96 txvbqbryk", a = "_14h3k5k6 txvbqbfpn txvbqblsh txvbqbhdy txvbqbryx", o = "_14h3k5k8 _14h3k5k7 txvbqb10o0 txvbqb11ll txvbqb12hq txvbqbxtt txvbqb2tz txvbqbv txvbqb9j txvbqbhb2 txvbqb7h txvbqb76 txvbqb7t", s = "_14h3k5ka txvbqbfpn txvbqbey txvbqbhd8", c = "_14h3k5kc _14h3k5kb txvbqbfr3 txvbqb19fm txvbqbjl1 txvbqb1i txvbqb2w5 txvbqb2z1", l = "_14h3k5ke _14h3k5kd txvbqbfpn txvbqbh4x", u = "_14h3k5kg _14h3k5kf txvbqb10lu txvbqb11jf txvbqb12i3 txvbqbxu6";
+var e = "_14h3k5k0 txvbqbfpn txvbqbh4x txvbqbhf1", t = "_14h3k5k1", n = "_14h3k5k2 txvbqbfpn txvbqbh4x txvbqbhd8", r = "_14h3k5k4 _14h3k5k3 txvbqb1b8x txvbqb1cw txvbqb2up txvbqb2sj txvbqb28o txvbqb1bgr txvbqb9j txvbqbwxb txvbqb7g txvbqb76 txvbqb7t", i = "_14h3k5k5 txvbqb1bj9 txvbqb96 txvbqbryk", a = "_14h3k5k6 txvbqbfpn txvbqblsh txvbqbhdy txvbqbryx", o = "_14h3k5k8 _14h3k5k7 txvbqb10od txvbqb11ly txvbqb12i3 txvbqbxu6 txvbqb2tz txvbqbv txvbqb9j txvbqbhb2 txvbqb7h txvbqb76 txvbqb7t", s = "_14h3k5ka txvbqbfpn txvbqbey txvbqbhd8", c = "_14h3k5kc _14h3k5kb txvbqbfr3 txvbqb19fz txvbqbjl1 txvbqb1i txvbqb2w5 txvbqb2z1", l = "_14h3k5ke _14h3k5kd txvbqbfpn txvbqbh4x", u = "_14h3k5kg _14h3k5kf txvbqb10m7 txvbqb11js txvbqb12ig txvbqbxuj";
 //#endregion
 export { o as button, u as checkboxItem, l as checkboxSection, t as createProjectTheme, i as errorMessage, e as form, a as formActions, n as formGroup, r as input, c as spinner, s as spinnerContainer };
 

package/lib/esm/atomic/molecules/form_error/formError.css.js

@@ -1,7 +1,7 @@
 /* empty css                                      */
 /* empty css                         */
 //#region src/atomic/molecules/form_error/formError.css.ts
-var e = "jc43j0 txvbqbey txvbqb2tz txvbqb1bij txvbqbfpn txvbqbhdl txvbqbh7g txvbqb9j txvbqbhb2 txvbqbp7m txvbqbwwy txvbqb1bb1", t = "jc43j1 txvbqbh6d", n = "jc43j2 txvbqbh60 txvbqbv7x";
+var e = "jc43j0 txvbqbey txvbqb2tz txvbqb1bj9 txvbqbfpn txvbqbhdl txvbqbh7g txvbqb9j txvbqbhb2 txvbqbp7m txvbqbwxb txvbqb1bbr", t = "jc43j1 txvbqbh6d", n = "jc43j2 txvbqbh60 txvbqbv7x";
 //#endregion
 export { e as formError, t as icon, n as message };
 

package/lib/esm/atomic/molecules/form_field/formField.css.js

@@ -1,7 +1,7 @@
 /* empty css                                      */
 /* empty css                         */
 //#region src/atomic/molecules/form_field/formField.css.ts
-var e = "_1p1qs5o0 txvbqbp7m txvbqb19uf";
+var e = "_1p1qs5o0 txvbqbp7m txvbqb19us";
 //#endregion
 export { e as formField };
 

package/lib/esm/atomic/molecules/form_field_layout/FormFieldLayout.js

@@ -0,0 +1,55 @@
+import { cx as e } from "../../../theme/tools.js";
+import { Label as t } from "../../atoms/label/Label.js";
+import { control as n, description as r, error as i, fieldset as a, legend as o, root as s } from "./formFieldLayout.css.js";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/atomic/molecules/form_field_layout/FormFieldLayout.tsx
+var d = ({ as: d = "div", children: f, className: p, controlClassName: m, description: h, descriptionId: g, error: _, errorId: v, label: y, labelFor: b, labelId: x, required: S = !1, ...C }) => {
+	let w = null;
+	y != null && (w = d === "fieldset" ? /* @__PURE__ */ u("legend", {
+		id: x,
+		className: o,
+		children: [y, S && /* @__PURE__ */ l("span", {
+			className: "_95x9ml3 txvbqb1bj9 txvbqbqyg",
+			children: "*"
+		})]
+	}) : /* @__PURE__ */ l(t, {
+		htmlFor: b,
+		id: x,
+		required: S,
+		children: y
+	}));
+	let T = null;
+	h != null && (T = /* @__PURE__ */ l("div", {
+		id: g,
+		className: r,
+		children: h
+	}));
+	let E = null;
+	_ != null && (E = /* @__PURE__ */ l("div", {
+		id: v,
+		className: i,
+		children: _
+	}));
+	let D = /* @__PURE__ */ u(c, { children: [
+		w,
+		T,
+		/* @__PURE__ */ l("div", {
+			className: e(n, m),
+			children: f
+		}),
+		E
+	] });
+	return d === "fieldset" ? /* @__PURE__ */ l("fieldset", {
+		...C,
+		className: e(a, s, p),
+		children: D
+	}) : /* @__PURE__ */ l("div", {
+		...C,
+		className: e(s, p),
+		children: D
+	});
+};
+//#endregion
+export { d as FormFieldLayout, d as default };
+
+//# sourceMappingURL=FormFieldLayout.js.map

package/lib/esm/atomic/molecules/form_field_layout/FormFieldLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldLayout.js","names":[],"sources":["../../../../../src/atomic/molecules/form_field_layout/FormFieldLayout.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, type JSX, type ReactNode } from 'react';\n\nimport { Label } from '../../atoms/label/Label.js';\nimport { cx } from '../../../theme/tools.js';\n\nimport * as styles from './formFieldLayout.css.js';\n\ntype FieldContainerProps = Omit<\n  ComponentPropsWithoutRef<'div'>,\n  'className' | 'children'\n>;\n\ntype FieldsetContainerProps = Omit<\n  ComponentPropsWithoutRef<'fieldset'>,\n  'className' | 'children'\n>;\n\nexport type FormFieldLayoutProps = {\n  as?: 'div' | 'fieldset';\n  children: ReactNode;\n  className?: string;\n  controlClassName?: string;\n  description?: ReactNode;\n  descriptionId?: string;\n  error?: ReactNode;\n  errorId?: string;\n  label?: ReactNode;\n  labelFor?: string;\n  labelId?: string;\n  required?: boolean;\n} & (FieldContainerProps | FieldsetContainerProps);\n\nexport const FormFieldLayout = ({\n  as = 'div',\n  children,\n  className,\n  controlClassName,\n  description,\n  descriptionId,\n  error,\n  errorId,\n  label,\n  labelFor,\n  labelId,\n  required = false,\n  ...rest\n}: FormFieldLayoutProps): JSX.Element => {\n  let labelNode: JSX.Element | null = null;\n  if (label != null) {\n    if (as === 'fieldset') {\n      labelNode = (\n        <legend id={labelId} className={styles.legend}>\n          {label}\n          {required && <span className={styles.requiredMark}>*</span>}\n        </legend>\n      );\n    } else {\n      labelNode = (\n        <Label htmlFor={labelFor} id={labelId} required={required}>\n          {label}\n        </Label>\n      );\n    }\n  }\n\n  let descriptionNode: JSX.Element | null = null;\n  if (description != null) {\n    descriptionNode = (\n      <div id={descriptionId} className={styles.description}>\n        {description}\n      </div>\n    );\n  }\n\n  let errorNode: JSX.Element | null = null;\n  if (error != null) {\n    errorNode = (\n      <div id={errorId} className={styles.error}>\n        {error}\n      </div>\n    );\n  }\n\n  const content = (\n    <>\n      {labelNode}\n      {descriptionNode}\n      <div className={cx(styles.control, controlClassName)}>{children}</div>\n      {errorNode}\n    </>\n  );\n\n  if (as === 'fieldset') {\n    return (\n      <fieldset\n        {...(rest as FieldsetContainerProps)}\n        className={cx(styles.fieldset, styles.root, className)}\n      >\n        {content}\n      </fieldset>\n    );\n  }\n\n  return (\n    <div\n      {...(rest as FieldContainerProps)}\n      className={cx(styles.root, className)}\n    >\n      {content}\n    </div>\n  );\n};\n\nexport default FormFieldLayout;\n"],"mappings":";;;;;AAgCA,IAAa,KAAmB,EAC9B,QAAK,OACL,aACA,cACA,qBACA,aAAA,GACA,kBACA,OAAA,GACA,YACA,UACA,aACA,YACA,cAAW,IACX,GAAG,QACoC;CACvC,IAAI,IAAgC;CACpC,AAAI,KAAS,SACX,AAQE,IARE,MAAO,aAEP,kBAAC,UAAD;EAAQ,IAAI;EAAS,WAAW;YAAhC,CACG,GACA,KAAY,kBAAC,QAAD;GAAM,WAAW;aAAqB;EAAO,CAAA,CACpD;MAIR,kBAAC,GAAD;EAAO,SAAS;EAAU,IAAI;EAAmB;YAC9C;CACI,CAAA;CAKb,IAAI,IAAsC;CAC1C,AAAI,KAAe,SACjB,IACE,kBAAC,OAAD;EAAK,IAAI;EAAe,WAAW;YAChC;CACE,CAAA;CAIT,IAAI,IAAgC;CACpC,AAAI,KAAS,SACX,IACE,kBAAC,OAAD;EAAK,IAAI;EAAS,WAAW;YAC1B;CACE,CAAA;CAIT,IAAM,IACJ,kBAAA,GAAA,EAAA,UAAA;EACG;EACA;EACD,kBAAC,OAAD;GAAK,WAAW,EAAG,GAAgB,CAAgB;GAAI;EAAc,CAAA;EACpE;CACD,EAAA,CAAA;CAcJ,OAXI,MAAO,aAEP,kBAAC,YAAD;EACE,GAAK;EACL,WAAW,EAAG,GAAiB,GAAa,CAAS;YAEpD;CACO,CAAA,IAKZ,kBAAC,OAAD;EACE,GAAK;EACL,WAAW,EAAG,GAAa,CAAS;YAEnC;CACE,CAAA;AAET"}

package/lib/esm/atomic/molecules/form_field_layout/formFieldLayout.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                               */
+//#region src/atomic/molecules/form_field_layout/formFieldLayout.css.ts
+var e = "_95x9ml0 txvbqbfpn txvbqbh4x txvbqbhd8 txvbqbv7x", t = "_95x9ml1 txvbqb1tv txvbqbo7v txvbqbwvv", n = "_95x9ml2 txvbqbfox txvbqb9j txvbqbhb2 txvbqb1bgr txvbqbwvv", r = "_95x9ml3 txvbqb1bj9 txvbqbqyg", i = "_95x9ml4 txvbqb96 txvbqb1bg5", a = "_95x9ml5 txvbqbv7x", o = "_95x9ml6 txvbqb96 txvbqb1bj9";
+//#endregion
+export { a as control, i as description, o as error, t as fieldset, n as legend, r as requiredMark, e as root };
+
+//# sourceMappingURL=formFieldLayout.css.js.map

package/lib/esm/atomic/molecules/form_field_layout/formFieldLayout.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formFieldLayout.css.js","names":[],"sources":["../../../../../src/atomic/molecules/form_field_layout/formFieldLayout.css.ts"],"sourcesContent":["import { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const root = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  minWidth: 0,\n});\n\nexport const fieldset = sprinkles({\n  borderWidth: 0,\n  margin: 0,\n  padding: 0,\n});\n\nexport const legend = sprinkles({\n  display: 'block',\n  fontSize: 'sm',\n  fontWeight: 'medium',\n  color: 'text',\n  padding: 0,\n});\n\nexport const requiredMark = sprinkles({\n  color: 'error',\n  marginLeft: 0.5,\n});\n\nexport const description = sprinkles({\n  fontSize: 'xs',\n  color: 'secondary',\n});\n\nexport const control = sprinkles({\n  minWidth: 0,\n});\n\nexport const error = sprinkles({\n  fontSize: 'xs',\n  color: 'error',\n});\n"],"mappings":""}

package/lib/esm/atomic/molecules/form_grid/FormGrid.css.js

@@ -1,8 +1,17 @@
 /* empty css                                      */
 /* empty css                        */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/atomic/molecules/form_grid/FormGrid.css.ts
-var e = "var(--_1nx8f960)", t = "_1nx8f962 _1nx8f961 txvbqbfq0 txvbqbhdy txvbqb19uf";
+var t = "var(--_1nx8f960)", n = e({
+	defaultClassName: "_1nx8f964 _1nx8f961 txvbqbfq0 txvbqbheb txvbqb19us",
+	variantClassNames: { layout: {
+		auto: "_1nx8f965 _1nx8f962",
+		vertical: "_1nx8f966 _1nx8f963"
+	} },
+	defaultVariants: { layout: "auto" },
+	compoundVariants: []
+});
 //#endregion
-export { t as grid, e as minColumnWidthVar };
+export { n as grid, t as minColumnWidthVar };
 
 //# sourceMappingURL=FormGrid.css.js.map

package/lib/esm/atomic/molecules/form_grid/FormGrid.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormGrid.css.js","names":[],"sources":["../../../../../src/atomic/molecules/form_grid/FormGrid.css.ts"],"sourcesContent":["import { createVar, style } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const minColumnWidthVar = createVar();\n\nexport const grid = style([\n  sprinkles({\n    display: 'grid',\n    gap: 3,\n    width: 'full',\n  }),\n  {\n    gridTemplateColumns: `repeat(auto-fit, minmax(${minColumnWidthVar}, 1fr))`,\n  },\n]);\n"],"mappings":""}
+{"version":3,"file":"FormGrid.css.js","names":[],"sources":["../../../../../src/atomic/molecules/form_grid/FormGrid.css.ts"],"sourcesContent":["import { createVar, style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const minColumnWidthVar = createVar();\n\nconst gridBase = sprinkles({\n  display: 'grid',\n  gap: 4,\n  width: 'full',\n});\n\nconst autoGrid = style({\n  gridTemplateColumns: `repeat(auto-fit, minmax(min(100%, ${minColumnWidthVar}), 1fr))`,\n});\n\nconst verticalGrid = style({\n  gridTemplateColumns: 'minmax(0, 1fr)',\n});\n\nexport const grid = recipe({\n  base: gridBase,\n  variants: {\n    layout: {\n      auto: autoGrid,\n      vertical: verticalGrid,\n    },\n  },\n  defaultVariants: {\n    layout: 'auto',\n  },\n});\n"],"mappings":""}

package/lib/esm/atomic/molecules/form_grid/FormGrid.js

@@ -2,15 +2,19 @@ import { cx as e } from "../../../theme/tools.js";
 import { grid as t, minColumnWidthVar as n } from "./FormGrid.css.js";
 import { jsx as r } from "react/jsx-runtime";
 //#region src/atomic/molecules/form_grid/FormGrid.tsx
-var i = ({ children: i, className: a, minColumnWidth: o = "220px" }) => {
-	let s = { [n]: o };
+var i = (e) => {
+	let t = /^var\((--[^)]+)\)$/.exec(e);
+	if (t == null) throw Error(`Invalid Vanilla Extract variable: ${e}`);
+	return t[1];
+}, a = ({ children: a, className: o, layout: s = "auto", minColumnWidth: c = "220px" }) => {
+	let l = { [i(n)]: c };
 	return /* @__PURE__ */ r("div", {
-		className: e(t, a),
-		style: s,
-		children: i
+		className: e(t({ layout: s }), o),
+		style: l,
+		children: a
 	});
 };
 //#endregion
-export { i as FormGrid, i as default };
+export { a as FormGrid, a as default };
 
 //# sourceMappingURL=FormGrid.js.map

package/lib/esm/atomic/molecules/form_grid/FormGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormGrid.js","names":[],"sources":["../../../../../src/atomic/molecules/form_grid/FormGrid.tsx"],"sourcesContent":["import { type CSSProperties, type JSX, type ReactNode } from 'react';\n\nimport { cx } from '../../../theme/tools.js';\n\nimport * as styles from './FormGrid.css.js';\n\nexport type FormGridProps = {\n  children: ReactNode;\n  minColumnWidth?: string;\n  className?: string;\n};\n\nexport const FormGrid = ({\n  children,\n  className,\n  minColumnWidth = '220px',\n}: FormGridProps): JSX.Element => {\n  const style = {\n    [styles.minColumnWidthVar]: minColumnWidth,\n  } as CSSProperties;\n\n  return (\n    <div className={cx(styles.grid, className)} style={style}>\n      {children}\n    </div>\n  );\n};\n\nexport default FormGrid;\n"],"mappings":";;;;AAYA,IAAa,KAAY,EACvB,aACA,cACA,oBAAiB,cACe;CAChC,IAAM,IAAQ,GACX,IAA2B,EAC9B;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAa,CAAS;EAAU;EAChD;CACE,CAAA;AAET"}
+{"version":3,"file":"FormGrid.js","names":[],"sources":["../../../../../src/atomic/molecules/form_grid/FormGrid.tsx"],"sourcesContent":["import { type CSSProperties, type JSX, type ReactNode } from 'react';\n\nimport { cx } from '../../../theme/tools.js';\n\nimport * as styles from './FormGrid.css.js';\n\nexport type FormGridProps = {\n  children: ReactNode;\n  minColumnWidth?: string;\n  layout?: 'auto' | 'vertical';\n  className?: string;\n};\n\nconst getInlineVarName = (variable: string): `--${string}` => {\n  const match = /^var\\((--[^)]+)\\)$/.exec(variable);\n  if (match == null) {\n    throw new Error(`Invalid Vanilla Extract variable: ${variable}`);\n  }\n  return match[1] as `--${string}`;\n};\n\nexport const FormGrid = ({\n  children,\n  className,\n  layout = 'auto',\n  minColumnWidth = '220px',\n}: FormGridProps): JSX.Element => {\n  const style = {\n    [getInlineVarName(styles.minColumnWidthVar)]: minColumnWidth,\n  } as CSSProperties;\n\n  return (\n    <div className={cx(styles.grid({ layout }), className)} style={style}>\n      {children}\n    </div>\n  );\n};\n\nexport default FormGrid;\n"],"mappings":";;;;AAaA,IAAM,KAAoB,MAAoC;CAC5D,IAAM,IAAQ,qBAAqB,KAAK,CAAQ;CAChD,IAAI,KAAS,MACX,MAAU,MAAM,qCAAqC,GAAU;CAEjE,OAAO,EAAM;AACf,GAEa,KAAY,EACvB,aACA,cACA,YAAS,QACT,oBAAiB,cACe;CAChC,IAAM,IAAQ,GACX,EAAiB,CAAwB,IAAI,EAChD;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW,EAAG,EAAY,EAAE,UAAO,CAAC,GAAG,CAAS;EAAU;EAC5D;CACE,CAAA;AAET"}

package/lib/esm/atomic/molecules/highlight/HighlightCode.css.js

@@ -1,7 +1,7 @@
 /* empty css                                      */
 /* empty css                             */
 //#region src/atomic/molecules/highlight/HighlightCode.css.ts
-var e = "_14wey9t0 txvbqbp6w txvbqb1b97 txvbqb28o txvbqb2sj txvbqb1d9 txvbqb2uc txvbqb1bgv txvbqbu4k txvbqbv7x txvbqbwr6 txvbqb13i7 txvbqb19uf", t = "_14wey9t1 txvbqbey txvbqbfpn txvbqblt7 txvbqb10mx txvbqb11ki txvbqb12i3 txvbqbxu6 txvbqb1b9b txvbqbhdl", n = "_14wey9t2 txvbqb10mk txvbqb11k5 txvbqb13cf txvbqbyoi txvbqb1b9n txvbqb2wi txvbqb1bhb txvbqb96 txvbqbhb2 txvbqb6a", r = "_14wey9t3 txvbqb10mx txvbqb11ki txvbqb12i3 txvbqbxu6 txvbqbtay txvbqbu4k txvbqbv7x txvbqbwu2 txvbqb19uf", i = "_14wey9t4 txvbqb10mx txvbqb11ki txvbqb12i3 txvbqbxu6 txvbqbtay txvbqbu4k txvbqbv7x txvbqbwuf txvbqb19uf", a = "_14wey9t5 ", o = "_14wey9t6 txvbqbo7v", s = "_14wey9t7 txvbqb1bgv txvbqbh99 txvbqb9j txvbqbny4 txvbqbo7v txvbqb1awp", c = "_14wey9t8 txvbqb1bgv txvbqbh99 txvbqb9j txvbqbny4 txvbqbo7v txvbqbws9 txvbqb1ax2 txvbqb1ara", l = "_14wey9t9 txvbqb1bg3 txvbqb9j txvbqb1o";
+var e = "_14wey9t0 txvbqbp6w txvbqb1b9x txvbqb28o txvbqb2sj txvbqb1d9 txvbqb2uc txvbqb1bhl txvbqbu4k txvbqbv7x txvbqbwr6 txvbqb13ik txvbqb19us", t = "_14wey9t1 txvbqbey txvbqbfpn txvbqblt7 txvbqb10na txvbqb11kv txvbqb12ig txvbqbxuj txvbqb1ba1 txvbqbhdl", n = "_14wey9t2 txvbqb10mx txvbqb11ki txvbqb13cs txvbqbyov txvbqb1bad txvbqb2wi txvbqb1bi1 txvbqb96 txvbqbhb2 txvbqb6a", r = "_14wey9t3 txvbqb10na txvbqb11kv txvbqb12ig txvbqbxuj txvbqbtay txvbqbu4k txvbqbv7x txvbqbwuf txvbqb19us", i = "_14wey9t4 txvbqb10na txvbqb11kv txvbqb12ig txvbqbxuj txvbqbtay txvbqbu4k txvbqbv7x txvbqbwus txvbqb19us", a = "_14wey9t5 ", o = "_14wey9t6 txvbqbo7v", s = "_14wey9t7 txvbqb1bhl txvbqbh99 txvbqb9j txvbqbny4 txvbqbo7v txvbqb1axf", c = "_14wey9t8 txvbqb1bhl txvbqbh99 txvbqb9j txvbqbny4 txvbqbo7v txvbqbws9 txvbqb1axs txvbqb1arn", l = "_14wey9t9 txvbqb1bgt txvbqb9j txvbqb1o";
 //#endregion
 export { n as badge, e as container, r as content, i as contentWrapped, s as fallbackCode, c as fallbackCodeWrapped, l as placeholder, o as shikiPre, a as shikiWrapper, t as toolbar };
 

package/lib/esm/atomic/molecules/highlight/highlightStyles.css.js

@@ -1,7 +1,7 @@
 /* empty css                                      */
 /* empty css                               */
 //#region src/atomic/molecules/highlight/highlightStyles.css.ts
-var e = "_1ke2cro0 txvbqbp6w txvbqb1b97 txvbqb28o txvbqb2sj txvbqb1d9 txvbqb2uc txvbqb1bgv txvbqbwr6 txvbqb13i7", t = "_1ke2cro1 txvbqbey txvbqbfpn txvbqblt7 txvbqb10mx txvbqb11ki txvbqb12i3 txvbqbxu6 txvbqb1b9b txvbqbhdl", n = "_1ke2cro2 txvbqb10mk txvbqb11k5 txvbqb13cf txvbqbyoi txvbqb1b9n txvbqb2wi txvbqb1bhb txvbqb96 txvbqbhb2 txvbqb6a", r = "_1ke2cro3 txvbqb10mx txvbqb11ki txvbqb12i3 txvbqbxu6 txvbqbtay txvbqbwu2", i = "_1ke2cro4 ", a = "_1ke2cro5 txvbqbo7v", o = "_1ke2cro6 txvbqb1bgv txvbqbh99 txvbqb9j txvbqbny4 txvbqbo7v txvbqb1awp";
+var e = "_1ke2cro0 txvbqbp6w txvbqb1b9x txvbqb28o txvbqb2sj txvbqb1d9 txvbqb2uc txvbqb1bhl txvbqbwr6 txvbqb13ik", t = "_1ke2cro1 txvbqbey txvbqbfpn txvbqblt7 txvbqb10na txvbqb11kv txvbqb12ig txvbqbxuj txvbqb1ba1 txvbqbhdl", n = "_1ke2cro2 txvbqb10mx txvbqb11ki txvbqb13cs txvbqbyov txvbqb1bad txvbqb2wi txvbqb1bi1 txvbqb96 txvbqbhb2 txvbqb6a", r = "_1ke2cro3 txvbqb10na txvbqb11kv txvbqb12ig txvbqbxuj txvbqbtay txvbqbwuf", i = "_1ke2cro4 ", a = "_1ke2cro5 txvbqbo7v", o = "_1ke2cro6 txvbqb1bhl txvbqbh99 txvbqb9j txvbqbny4 txvbqbo7v txvbqb1axf";
 //#endregion
 export { n as highlightBadge, e as highlightContainer, r as highlightContent, o as highlightFallbackCode, a as highlightShikiPre, i as highlightShikiWrapper, t as highlightToolbar };
 

package/lib/esm/atomic/molecules/markdown/LazyMarkdownRenderer.css.js

@@ -6,7 +6,7 @@
 /* empty css                                  */
 /* empty css                                    */
 //#region src/atomic/molecules/markdown/LazyMarkdownRenderer.css.ts
-var e = "_1ltp1xc0 txvbqbws9 txvbqb1ax2";
+var e = "_1ltp1xc0 txvbqbwsm txvbqb1axs";
 //#endregion
 export { e as fallback };
 

package/lib/esm/atomic/molecules/markdown/LazyMarkdownRenderer.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"LazyMarkdownRenderer.css.js","names":[],"sources":["../../../../../src/atomic/molecules/markdown/LazyMarkdownRenderer.css.ts"],"sourcesContent":["import { sprinkles } from '../../../theme/index.js';\n\nexport const fallback = sprinkles({\n  overflowWrap: 'anywhere',\n  whiteSpace: 'pre-wrap',\n});\n"],"mappings":""}
+{"version":3,"file":"LazyMarkdownRenderer.css.js","names":[],"sources":["../../../../../src/atomic/molecules/markdown/LazyMarkdownRenderer.css.ts"],"sourcesContent":["import { sprinkles } from '../../../theme/index.js';\n\nexport const fallback = sprinkles({\n  overflowWrap: 'break-word',\n  whiteSpace: 'pre-wrap',\n});\n"],"mappings":""}

package/lib/esm/atomic/molecules/markdown/components/MarkdownArticleContainer.css.js

@@ -1,4 +1,5 @@
 /* empty css                                         */
+/* empty css                             */
 /* empty css                                        */
 //#region src/atomic/molecules/markdown/components/MarkdownArticleContainer.css.ts
 var e = "_7ez1431 _7ez1430 txvbqbfpn txvbqbh4x txvbqbheb";