@diwauhris/ui 1.0.0

package/lib/index25.mjs

@@ -0,0 +1,175 @@
+import { useFieldContext } from "./index12.mjs";
+/* empty css         */
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { CalendarDays, ChevronLeft, ChevronRight } from "lucide-react";
+import Calendar from "react-calendar";
+import { format, isValid, parse } from "date-fns";
+//#region src/ui-library/gallery/date-picker/DatePicker.tsx
+/**
+* DatePicker — Gallery-native date picker.
+* Copied from shared/components/PisDatePicker.tsx.
+* Updated to import FieldContext from gallery-local field directory.
+* Uses react-calendar and date-fns.
+* Note: CSS for .pis-datepicker-popover and .pis-rc-calendar is in index.css.
+*/
+var MAX_DATE = new Date(2026, 11, 31);
+var POPOVER_WIDTH = 352;
+var CALENDAR_HEIGHT = 360;
+function DatePicker({ value, onChange, placeholder, className, disabled, error, minDate, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, required }) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [popupStyle, setPopupStyle] = useState({});
+	const wrapperRef = useRef(null);
+	const inputRef = useRef(null);
+	const internalId = useId();
+	const ctx = useFieldContext();
+	const inputId = id ?? ctx?.inputId ?? internalId;
+	const resolvedRequired = required ?? ctx?.required ?? false;
+	const resolvedInvalid = error ? true : ctx?.invalid ?? false;
+	const describedBy = ctx?.invalid && ctx?.errorId ? ctx.errorId : void 0;
+	const selectedDate = value ? (() => {
+		const d = parse(value, "yyyy-MM-dd", /* @__PURE__ */ new Date());
+		if (isValid(d)) return d;
+		const d2 = new Date(value);
+		return isNaN(d2.getTime()) ? void 0 : d2;
+	})() : void 0;
+	const displayValue = selectedDate ? format(selectedDate, "MMM d, yyyy") : "";
+	const skipNextOpen = useRef(false);
+	const openPopup = useCallback(() => {
+		if (disabled || !wrapperRef.current) return;
+		if (skipNextOpen.current) {
+			skipNextOpen.current = false;
+			return;
+		}
+		const rect = wrapperRef.current.getBoundingClientRect();
+		const spaceBelow = window.innerHeight - rect.bottom;
+		const spaceAbove = rect.top;
+		const isNarrow = window.innerWidth < 368;
+		const style = {
+			position: "fixed",
+			left: isNarrow ? 8 : Math.max(8, Math.min(rect.left, window.innerWidth - POPOVER_WIDTH - 8)),
+			width: isNarrow ? `calc(100vw - 16px)` : void 0
+		};
+		if (spaceBelow >= CALENDAR_HEIGHT || spaceBelow >= spaceAbove) style.top = rect.bottom + 6;
+		else style.top = rect.top - CALENDAR_HEIGHT - 6;
+		setPopupStyle(style);
+		setIsOpen(true);
+	}, [disabled]);
+	useEffect(() => {
+		function handleClickOutside(e) {
+			if (wrapperRef.current && !wrapperRef.current.contains(e.target)) setIsOpen(false);
+		}
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, []);
+	useEffect(() => {
+		if (!isOpen) return;
+		function handleScroll() {
+			setIsOpen(false);
+		}
+		window.addEventListener("scroll", handleScroll, { capture: true });
+		window.addEventListener("resize", handleScroll);
+		return () => {
+			window.removeEventListener("scroll", handleScroll, { capture: true });
+			window.removeEventListener("resize", handleScroll);
+		};
+	}, [isOpen]);
+	useEffect(() => {
+		if (!isOpen) return;
+		function handleFocusOut(e) {
+			if (!e.relatedTarget) return;
+			if (wrapperRef.current && !wrapperRef.current.contains(e.relatedTarget)) setIsOpen(false);
+		}
+		const wrapper = wrapperRef.current;
+		wrapper?.addEventListener("focusout", handleFocusOut);
+		return () => wrapper?.removeEventListener("focusout", handleFocusOut);
+	}, [isOpen]);
+	function handleKeyDown(e) {
+		if (e.key === "Escape") {
+			e.preventDefault();
+			setIsOpen(false);
+			inputRef.current?.focus();
+			return;
+		}
+		if (e.key === " " || e.key === "Enter") {
+			e.preventDefault();
+			if (isOpen) setIsOpen(false);
+			else openPopup();
+		}
+	}
+	const inputClasses = [
+		"w-full rounded-xl border bg-slate-50 px-4 py-2.5 text-sm font-medium text-slate-900 outline-none transition placeholder:text-slate-400 pr-8 cursor-pointer select-none",
+		error ? "border-rose-300 focus:border-rose-400 focus:ring-2 focus:ring-rose-100" : "border-slate-200 focus:border-brand-blue/40 focus:ring-2 focus:ring-brand-blue/15",
+		disabled ? "cursor-not-allowed opacity-60" : "",
+		className ?? ""
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs("div", {
+		ref: wrapperRef,
+		className: "relative",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ jsx("input", {
+				ref: inputRef,
+				id: inputId,
+				type: "text",
+				readOnly: true,
+				value: displayValue,
+				onFocus: openPopup,
+				onClick: openPopup,
+				onKeyDown: handleKeyDown,
+				placeholder,
+				disabled,
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledBy,
+				"aria-required": resolvedRequired ? "true" : void 0,
+				"aria-invalid": resolvedInvalid ? "true" : void 0,
+				"aria-describedby": describedBy,
+				"aria-haspopup": "dialog",
+				"aria-expanded": isOpen,
+				role: "combobox",
+				className: inputClasses
+			}), /* @__PURE__ */ jsx(CalendarDays, {
+				size: 16,
+				className: `absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none ${isOpen ? "text-brand-blue" : "text-slate-300"}`,
+				"aria-hidden": "true"
+			})]
+		}), isOpen && !disabled && /* @__PURE__ */ jsx("div", {
+			className: "pis-datepicker-popover",
+			style: popupStyle,
+			role: "dialog",
+			"aria-label": ariaLabel ? `${ariaLabel} calendar` : "Date picker",
+			"aria-modal": "false",
+			children: /* @__PURE__ */ jsx(Calendar, {
+				value: selectedDate ?? null,
+				onChange: (val) => {
+					if (val instanceof Date) {
+						onChange(format(val, "yyyy-MM-dd"));
+						setIsOpen(false);
+						skipNextOpen.current = true;
+						requestAnimationFrame(() => inputRef.current?.focus());
+					}
+				},
+				defaultActiveStartDate: selectedDate ?? minDate,
+				minDate,
+				maxDate: MAX_DATE,
+				defaultView: "month",
+				showNeighboringDecade: true,
+				showNeighboringCentury: true,
+				prevLabel: /* @__PURE__ */ jsx(ChevronLeft, { size: 14 }),
+				nextLabel: /* @__PURE__ */ jsx(ChevronRight, { size: 14 }),
+				prev2Label: null,
+				next2Label: null,
+				navigationLabel: ({ date, view }) => {
+					if (view === "month") return format(date, "MMMM yyyy");
+					if (view === "year") return format(date, "yyyy");
+					return `${Math.floor(date.getFullYear() / 10) * 10} – ${Math.floor(date.getFullYear() / 10) * 10 + 9}`;
+				},
+				className: "pis-rc-calendar"
+			}, isOpen ? "open" : "closed")
+		})]
+	});
+}
+//#endregion
+export { DatePicker };
+
+//# sourceMappingURL=index25.mjs.map

package/lib/index25.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index25.mjs","names":[],"sources":["../src/ui-library/gallery/date-picker/DatePicker.tsx"],"sourcesContent":["/**\n * DatePicker — Gallery-native date picker.\n * Copied from shared/components/PisDatePicker.tsx.\n * Updated to import FieldContext from gallery-local field directory.\n * Uses react-calendar and date-fns.\n * Note: CSS for .pis-datepicker-popover and .pis-rc-calendar is in index.css.\n */\nimport { useState, useRef, useEffect, useCallback, useId } from 'react';\nimport Calendar from 'react-calendar';\nimport { format, parse, isValid } from 'date-fns';\nimport { CalendarDays, ChevronLeft, ChevronRight } from 'lucide-react';\nimport 'react-calendar/dist/Calendar.css';\nimport { useFieldContext } from '../field/FieldContext';\n\ninterface DatePickerProps {\n  value: string;\n  onChange: (value: string) => void;\n  placeholder?: string;\n  className?: string;\n  disabled?: boolean;\n  error?: string;\n  minDate?: Date;\n  id?: string;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  required?: boolean;\n}\n\nconst MAX_DATE = new Date(2026, 11, 31);\nconst CALENDAR_WIDTH = 320;\nconst POPOVER_WIDTH = CALENDAR_WIDTH + 32;\nconst CALENDAR_HEIGHT = 360;\n\nexport function DatePicker({\n  value,\n  onChange,\n  placeholder,\n  className,\n  disabled,\n  error,\n  minDate,\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  required,\n}: DatePickerProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [popupStyle, setPopupStyle] = useState<React.CSSProperties>({});\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const internalId = useId();\n\n  const ctx = useFieldContext();\n  const inputId          = id       ?? ctx?.inputId  ?? internalId;\n  const resolvedRequired = required ?? ctx?.required ?? false;\n  const resolvedInvalid  = error    ? true           : (ctx?.invalid ?? false);\n  const describedBy      = ctx?.invalid && ctx?.errorId ? ctx.errorId : undefined;\n\n  const selectedDate = value\n    ? (() => {\n        const d = parse(value, 'yyyy-MM-dd', new Date());\n        if (isValid(d)) return d;\n        const d2 = new Date(value);\n        return isNaN(d2.getTime()) ? undefined : d2;\n      })()\n    : undefined;\n\n  const displayValue = selectedDate ? format(selectedDate, 'MMM d, yyyy') : '';\n\n  const skipNextOpen = useRef(false);\n\n  const openPopup = useCallback(() => {\n    if (disabled || !wrapperRef.current) return;\n    if (skipNextOpen.current) {\n      skipNextOpen.current = false;\n      return;\n    }\n    const rect = wrapperRef.current.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - rect.bottom;\n    const spaceAbove = rect.top;\n\n    const isNarrow = window.innerWidth < POPOVER_WIDTH + 16;\n    const style: React.CSSProperties = {\n      position: 'fixed',\n      left: isNarrow ? 8 : Math.max(8, Math.min(rect.left, window.innerWidth - POPOVER_WIDTH - 8)),\n      width: isNarrow ? `calc(100vw - 16px)` : undefined,\n    };\n\n    if (spaceBelow >= CALENDAR_HEIGHT || spaceBelow >= spaceAbove) {\n      style.top = rect.bottom + 6;\n    } else {\n      style.top = rect.top - CALENDAR_HEIGHT - 6;\n    }\n\n    setPopupStyle(style);\n    setIsOpen(true);\n  }, [disabled]);\n\n  useEffect(() => {\n    function handleClickOutside(e: MouseEvent) {\n      if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {\n        setIsOpen(false);\n      }\n    }\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, []);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    function handleScroll() { setIsOpen(false); }\n    window.addEventListener('scroll', handleScroll, { capture: true });\n    window.addEventListener('resize', handleScroll);\n    return () => {\n      window.removeEventListener('scroll', handleScroll, { capture: true });\n      window.removeEventListener('resize', handleScroll);\n    };\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    function handleFocusOut(e: FocusEvent) {\n      if (!e.relatedTarget) return;\n      if (wrapperRef.current && !wrapperRef.current.contains(e.relatedTarget as Node)) {\n        setIsOpen(false);\n      }\n    }\n    const wrapper = wrapperRef.current;\n    wrapper?.addEventListener('focusout', handleFocusOut);\n    return () => wrapper?.removeEventListener('focusout', handleFocusOut);\n  }, [isOpen]);\n\n  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      setIsOpen(false);\n      inputRef.current?.focus();\n      return;\n    }\n    if (e.key === ' ' || e.key === 'Enter') {\n      e.preventDefault();\n      if (isOpen) setIsOpen(false);\n      else openPopup();\n    }\n  }\n\n  const inputClasses = [\n    'w-full rounded-xl border bg-slate-50 px-4 py-2.5 text-sm font-medium text-slate-900 outline-none transition placeholder:text-slate-400 pr-8 cursor-pointer select-none',\n    error ? 'border-rose-300 focus:border-rose-400 focus:ring-2 focus:ring-rose-100' : 'border-slate-200 focus:border-brand-blue/40 focus:ring-2 focus:ring-brand-blue/15',\n    disabled ? 'cursor-not-allowed opacity-60' : '',\n    className ?? '',\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div ref={wrapperRef} className=\"relative\">\n      <div className=\"relative\">\n        <input\n          ref={inputRef}\n          id={inputId}\n          type=\"text\"\n          readOnly\n          value={displayValue}\n          onFocus={openPopup}\n          onClick={openPopup}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          disabled={disabled}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-required={resolvedRequired ? 'true' : undefined}\n          aria-invalid={resolvedInvalid ? 'true' : undefined}\n          aria-describedby={describedBy}\n          aria-haspopup=\"dialog\"\n          aria-expanded={isOpen}\n          role=\"combobox\"\n          className={inputClasses}\n        />\n        <CalendarDays\n          size={16}\n          className={`absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none ${isOpen ? 'text-brand-blue' : 'text-slate-300'}`}\n          aria-hidden=\"true\"\n        />\n      </div>\n\n      {isOpen && !disabled && (\n        <div\n          className=\"pis-datepicker-popover\"\n          style={popupStyle}\n          role=\"dialog\"\n          aria-label={ariaLabel ? `${ariaLabel} calendar` : 'Date picker'}\n          aria-modal=\"false\"\n        >\n          <Calendar\n            key={isOpen ? 'open' : 'closed'}\n            value={selectedDate ?? null}\n            onChange={(val) => {\n              if (val instanceof Date) {\n                onChange(format(val, 'yyyy-MM-dd'));\n                setIsOpen(false);\n                skipNextOpen.current = true;\n                requestAnimationFrame(() => inputRef.current?.focus());\n              }\n            }}\n            defaultActiveStartDate={selectedDate ?? minDate}\n            minDate={minDate}\n            maxDate={MAX_DATE}\n            defaultView=\"month\"\n            showNeighboringDecade={true}\n            showNeighboringCentury={true}\n            prevLabel={<ChevronLeft size={14} />}\n            nextLabel={<ChevronRight size={14} />}\n            prev2Label={null}\n            next2Label={null}\n            navigationLabel={({ date, view }) => {\n              if (view === 'month') return format(date, 'MMMM yyyy');\n              if (view === 'year') return format(date, 'yyyy');\n              return `${Math.floor(date.getFullYear() / 10) * 10} – ${Math.floor(date.getFullYear() / 10) * 10 + 9}`;\n            }}\n            className=\"pis-rc-calendar\"\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/lib/index26.cjs

@@ -0,0 +1,108 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+//#region src/ui-library/gallery/otp-input/OtpInput.tsx
+/**
+* OtpInput — Design System Component
+*
+* A segmented one-time-password / PIN entry field.
+* Each digit occupies its own visually-separated cell.
+*
+* Features:
+*   - Configurable length (default: 6)
+*   - Auto-advance on digit entry
+*   - Backspace moves to previous cell
+*   - Paste fills all cells
+*   - Error state with aria-invalid
+*   - Disabled state
+*
+* Accessibility:
+*   - Single logical input via aria-label on the first visible cell
+*   - role="group" + aria-label on the container
+*   - aria-invalid on cells when error is present
+*   - All cells share a common aria-describedby pointing to the error message
+*/
+function OtpInput({ length = 6, value, onChange, disabled = false, error = false, errorMessage, "aria-label": ariaLabel = "One-time password", className = "" }) {
+	const [internal, setInternal] = (0, react.useState)(() => Array(length).fill(""));
+	const cells = value ?? internal;
+	const inputRefs = (0, react.useRef)([]);
+	const errorId = "otp-error";
+	const update = (next) => {
+		if (!value) setInternal(next);
+		onChange?.(next);
+	};
+	const handleKeyDown = (i) => (e) => {
+		if (e.key === "Backspace") {
+			e.preventDefault();
+			if (cells[i]) {
+				const next = [...cells];
+				next[i] = "";
+				update(next);
+			} else if (i > 0) {
+				const next = [...cells];
+				next[i - 1] = "";
+				update(next);
+				inputRefs.current[i - 1]?.focus();
+			}
+		} else if (e.key === "ArrowLeft" && i > 0) inputRefs.current[i - 1]?.focus();
+		else if (e.key === "ArrowRight" && i < length - 1) inputRefs.current[i + 1]?.focus();
+	};
+	const handleInput = (i) => (e) => {
+		const raw = e.target.value.replace(/\D/g, "").slice(-1);
+		const next = [...cells];
+		next[i] = raw;
+		update(next);
+		if (raw && i < length - 1) inputRefs.current[i + 1]?.focus();
+	};
+	const handlePaste = (e) => {
+		e.preventDefault();
+		const digits = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
+		const next = Array(length).fill("");
+		for (let i = 0; i < digits.length; i++) next[i] = digits[i] ?? "";
+		update(next);
+		const focusIdx = Math.min(digits.length, length - 1);
+		inputRefs.current[focusIdx]?.focus();
+	};
+	const cellBase = [
+		"h-12 w-10 rounded-xl border text-center text-lg font-bold",
+		"outline-none transition",
+		"focus:border-brand-blue/50 focus:ring-2 focus:ring-brand-blue/15",
+		"disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400"
+	].join(" ");
+	const cellClass = error ? `${cellBase} border-rose-400 bg-rose-50/40 text-rose-800 focus:ring-rose-100` : `${cellBase} border-slate-200 bg-white text-slate-900`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `space-y-2 ${className}`,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			role: "group",
+			"aria-label": ariaLabel,
+			"aria-describedby": errorMessage ? errorId : void 0,
+			className: "flex items-center gap-2",
+			children: Array.from({ length }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				ref: (el) => {
+					inputRefs.current[i] = el;
+				},
+				type: "text",
+				inputMode: "numeric",
+				maxLength: 1,
+				value: cells[i] ?? "",
+				disabled,
+				"aria-invalid": error,
+				"aria-label": i === 0 ? `${ariaLabel}, digit ${i + 1} of ${length}` : `digit ${i + 1} of ${length}`,
+				"aria-describedby": errorMessage ? errorId : void 0,
+				className: cellClass,
+				onChange: handleInput(i),
+				onKeyDown: handleKeyDown(i),
+				onPaste: handlePaste,
+				onFocus: (e) => e.target.select()
+			}, i))
+		}), errorMessage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			id: errorId,
+			className: "text-xs font-semibold text-rose-600",
+			role: "alert",
+			children: errorMessage
+		})]
+	});
+}
+//#endregion
+exports.OtpInput = OtpInput;
+
+//# sourceMappingURL=index26.cjs.map

package/lib/index26.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index26.cjs","names":[],"sources":["../src/ui-library/gallery/otp-input/OtpInput.tsx"],"sourcesContent":["/**\n * OtpInput — Design System Component\n *\n * A segmented one-time-password / PIN entry field.\n * Each digit occupies its own visually-separated cell.\n *\n * Features:\n *   - Configurable length (default: 6)\n *   - Auto-advance on digit entry\n *   - Backspace moves to previous cell\n *   - Paste fills all cells\n *   - Error state with aria-invalid\n *   - Disabled state\n *\n * Accessibility:\n *   - Single logical input via aria-label on the first visible cell\n *   - role=\"group\" + aria-label on the container\n *   - aria-invalid on cells when error is present\n *   - All cells share a common aria-describedby pointing to the error message\n */\n\nimport { useRef, useState, type KeyboardEvent, type ClipboardEvent } from 'react';\n\nexport interface OtpInputProps {\n  /** Number of digits. Default: 6 */\n  length?: number;\n  /** Current value (array of digit strings). Controlled. */\n  value?: string[];\n  /** Called when the value changes. */\n  onChange?: (value: string[]) => void;\n  /** Disables all cells. */\n  disabled?: boolean;\n  /** Shows error styling. */\n  error?: boolean;\n  /** Error message text. If provided, shown below and linked via aria-describedby. */\n  errorMessage?: string;\n  /** Accessible label for the group. Default: \"One-time password\" */\n  'aria-label'?: string;\n  /** Additional class on the root element. */\n  className?: string;\n}\n\nexport function OtpInput({\n  length = 6,\n  value,\n  onChange,\n  disabled = false,\n  error = false,\n  errorMessage,\n  'aria-label': ariaLabel = 'One-time password',\n  className = '',\n}: OtpInputProps) {\n  const [internal, setInternal] = useState<string[]>(() => Array(length).fill(''));\n  const cells = value ?? internal;\n  const inputRefs = useRef<Array<HTMLInputElement | null>>([]);\n  const errorId = 'otp-error';\n\n  const update = (next: string[]) => {\n    if (!value) setInternal(next);\n    onChange?.(next);\n  };\n\n  const handleKeyDown = (i: number) => (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Backspace') {\n      e.preventDefault();\n      if (cells[i]) {\n        const next = [...cells];\n        next[i] = '';\n        update(next);\n      } else if (i > 0) {\n        const next = [...cells];\n        next[i - 1] = '';\n        update(next);\n        inputRefs.current[i - 1]?.focus();\n      }\n    } else if (e.key === 'ArrowLeft' && i > 0) {\n      inputRefs.current[i - 1]?.focus();\n    } else if (e.key === 'ArrowRight' && i < length - 1) {\n      inputRefs.current[i + 1]?.focus();\n    }\n  };\n\n  const handleInput = (i: number) => (e: React.ChangeEvent<HTMLInputElement>) => {\n    const raw = e.target.value.replace(/\\D/g, '').slice(-1);\n    const next = [...cells];\n    next[i] = raw;\n    update(next);\n    if (raw && i < length - 1) {\n      inputRefs.current[i + 1]?.focus();\n    }\n  };\n\n  const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {\n    e.preventDefault();\n    const digits = e.clipboardData.getData('text').replace(/\\D/g, '').slice(0, length);\n    const next = Array(length).fill('');\n    for (let i = 0; i < digits.length; i++) next[i] = digits[i] ?? '';\n    update(next);\n    const focusIdx = Math.min(digits.length, length - 1);\n    inputRefs.current[focusIdx]?.focus();\n  };\n\n  const cellBase = [\n    'h-12 w-10 rounded-xl border text-center text-lg font-bold',\n    'outline-none transition',\n    'focus:border-brand-blue/50 focus:ring-2 focus:ring-brand-blue/15',\n    'disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400',\n  ].join(' ');\n\n  const cellClass = error\n    ? `${cellBase} border-rose-400 bg-rose-50/40 text-rose-800 focus:ring-rose-100`\n    : `${cellBase} border-slate-200 bg-white text-slate-900`;\n\n  return (\n    <div className={`space-y-2 ${className}`}>\n      <div\n        role=\"group\"\n        aria-label={ariaLabel}\n        aria-describedby={errorMessage ? errorId : undefined}\n        className=\"flex items-center gap-2\"\n      >\n        {Array.from({ length }).map((_, i) => (\n          <input\n            key={i}\n            ref={(el) => { inputRefs.current[i] = el; }}\n            type=\"text\"\n            inputMode=\"numeric\"\n            maxLength={1}\n            value={cells[i] ?? ''}\n            disabled={disabled}\n            aria-invalid={error}\n            aria-label={i === 0 ? `${ariaLabel}, digit ${i + 1} of ${length}` : `digit ${i + 1} of ${length}`}\n            aria-describedby={errorMessage ? errorId : undefined}\n            className={cellClass}\n            onChange={handleInput(i)}\n            onKeyDown={handleKeyDown(i)}\n            onPaste={handlePaste}\n            onFocus={(e) => e.target.select()}\n          />\n        ))}\n      </div>\n\n      {errorMessage && (\n        <p id={errorId} className=\"text-xs font-semibold text-rose-600\" role=\"alert\">\n          {errorMessage}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/lib/index26.mjs

@@ -0,0 +1,108 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+//#region src/ui-library/gallery/otp-input/OtpInput.tsx
+/**
+* OtpInput — Design System Component
+*
+* A segmented one-time-password / PIN entry field.
+* Each digit occupies its own visually-separated cell.
+*
+* Features:
+*   - Configurable length (default: 6)
+*   - Auto-advance on digit entry
+*   - Backspace moves to previous cell
+*   - Paste fills all cells
+*   - Error state with aria-invalid
+*   - Disabled state
+*
+* Accessibility:
+*   - Single logical input via aria-label on the first visible cell
+*   - role="group" + aria-label on the container
+*   - aria-invalid on cells when error is present
+*   - All cells share a common aria-describedby pointing to the error message
+*/
+function OtpInput({ length = 6, value, onChange, disabled = false, error = false, errorMessage, "aria-label": ariaLabel = "One-time password", className = "" }) {
+	const [internal, setInternal] = useState(() => Array(length).fill(""));
+	const cells = value ?? internal;
+	const inputRefs = useRef([]);
+	const errorId = "otp-error";
+	const update = (next) => {
+		if (!value) setInternal(next);
+		onChange?.(next);
+	};
+	const handleKeyDown = (i) => (e) => {
+		if (e.key === "Backspace") {
+			e.preventDefault();
+			if (cells[i]) {
+				const next = [...cells];
+				next[i] = "";
+				update(next);
+			} else if (i > 0) {
+				const next = [...cells];
+				next[i - 1] = "";
+				update(next);
+				inputRefs.current[i - 1]?.focus();
+			}
+		} else if (e.key === "ArrowLeft" && i > 0) inputRefs.current[i - 1]?.focus();
+		else if (e.key === "ArrowRight" && i < length - 1) inputRefs.current[i + 1]?.focus();
+	};
+	const handleInput = (i) => (e) => {
+		const raw = e.target.value.replace(/\D/g, "").slice(-1);
+		const next = [...cells];
+		next[i] = raw;
+		update(next);
+		if (raw && i < length - 1) inputRefs.current[i + 1]?.focus();
+	};
+	const handlePaste = (e) => {
+		e.preventDefault();
+		const digits = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
+		const next = Array(length).fill("");
+		for (let i = 0; i < digits.length; i++) next[i] = digits[i] ?? "";
+		update(next);
+		const focusIdx = Math.min(digits.length, length - 1);
+		inputRefs.current[focusIdx]?.focus();
+	};
+	const cellBase = [
+		"h-12 w-10 rounded-xl border text-center text-lg font-bold",
+		"outline-none transition",
+		"focus:border-brand-blue/50 focus:ring-2 focus:ring-brand-blue/15",
+		"disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400"
+	].join(" ");
+	const cellClass = error ? `${cellBase} border-rose-400 bg-rose-50/40 text-rose-800 focus:ring-rose-100` : `${cellBase} border-slate-200 bg-white text-slate-900`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `space-y-2 ${className}`,
+		children: [/* @__PURE__ */ jsx("div", {
+			role: "group",
+			"aria-label": ariaLabel,
+			"aria-describedby": errorMessage ? errorId : void 0,
+			className: "flex items-center gap-2",
+			children: Array.from({ length }).map((_, i) => /* @__PURE__ */ jsx("input", {
+				ref: (el) => {
+					inputRefs.current[i] = el;
+				},
+				type: "text",
+				inputMode: "numeric",
+				maxLength: 1,
+				value: cells[i] ?? "",
+				disabled,
+				"aria-invalid": error,
+				"aria-label": i === 0 ? `${ariaLabel}, digit ${i + 1} of ${length}` : `digit ${i + 1} of ${length}`,
+				"aria-describedby": errorMessage ? errorId : void 0,
+				className: cellClass,
+				onChange: handleInput(i),
+				onKeyDown: handleKeyDown(i),
+				onPaste: handlePaste,
+				onFocus: (e) => e.target.select()
+			}, i))
+		}), errorMessage && /* @__PURE__ */ jsx("p", {
+			id: errorId,
+			className: "text-xs font-semibold text-rose-600",
+			role: "alert",
+			children: errorMessage
+		})]
+	});
+}
+//#endregion
+export { OtpInput };
+
+//# sourceMappingURL=index26.mjs.map

package/lib/index26.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index26.mjs","names":[],"sources":["../src/ui-library/gallery/otp-input/OtpInput.tsx"],"sourcesContent":["/**\n * OtpInput — Design System Component\n *\n * A segmented one-time-password / PIN entry field.\n * Each digit occupies its own visually-separated cell.\n *\n * Features:\n *   - Configurable length (default: 6)\n *   - Auto-advance on digit entry\n *   - Backspace moves to previous cell\n *   - Paste fills all cells\n *   - Error state with aria-invalid\n *   - Disabled state\n *\n * Accessibility:\n *   - Single logical input via aria-label on the first visible cell\n *   - role=\"group\" + aria-label on the container\n *   - aria-invalid on cells when error is present\n *   - All cells share a common aria-describedby pointing to the error message\n */\n\nimport { useRef, useState, type KeyboardEvent, type ClipboardEvent } from 'react';\n\nexport interface OtpInputProps {\n  /** Number of digits. Default: 6 */\n  length?: number;\n  /** Current value (array of digit strings). Controlled. */\n  value?: string[];\n  /** Called when the value changes. */\n  onChange?: (value: string[]) => void;\n  /** Disables all cells. */\n  disabled?: boolean;\n  /** Shows error styling. */\n  error?: boolean;\n  /** Error message text. If provided, shown below and linked via aria-describedby. */\n  errorMessage?: string;\n  /** Accessible label for the group. Default: \"One-time password\" */\n  'aria-label'?: string;\n  /** Additional class on the root element. */\n  className?: string;\n}\n\nexport function OtpInput({\n  length = 6,\n  value,\n  onChange,\n  disabled = false,\n  error = false,\n  errorMessage,\n  'aria-label': ariaLabel = 'One-time password',\n  className = '',\n}: OtpInputProps) {\n  const [internal, setInternal] = useState<string[]>(() => Array(length).fill(''));\n  const cells = value ?? internal;\n  const inputRefs = useRef<Array<HTMLInputElement | null>>([]);\n  const errorId = 'otp-error';\n\n  const update = (next: string[]) => {\n    if (!value) setInternal(next);\n    onChange?.(next);\n  };\n\n  const handleKeyDown = (i: number) => (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Backspace') {\n      e.preventDefault();\n      if (cells[i]) {\n        const next = [...cells];\n        next[i] = '';\n        update(next);\n      } else if (i > 0) {\n        const next = [...cells];\n        next[i - 1] = '';\n        update(next);\n        inputRefs.current[i - 1]?.focus();\n      }\n    } else if (e.key === 'ArrowLeft' && i > 0) {\n      inputRefs.current[i - 1]?.focus();\n    } else if (e.key === 'ArrowRight' && i < length - 1) {\n      inputRefs.current[i + 1]?.focus();\n    }\n  };\n\n  const handleInput = (i: number) => (e: React.ChangeEvent<HTMLInputElement>) => {\n    const raw = e.target.value.replace(/\\D/g, '').slice(-1);\n    const next = [...cells];\n    next[i] = raw;\n    update(next);\n    if (raw && i < length - 1) {\n      inputRefs.current[i + 1]?.focus();\n    }\n  };\n\n  const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {\n    e.preventDefault();\n    const digits = e.clipboardData.getData('text').replace(/\\D/g, '').slice(0, length);\n    const next = Array(length).fill('');\n    for (let i = 0; i < digits.length; i++) next[i] = digits[i] ?? '';\n    update(next);\n    const focusIdx = Math.min(digits.length, length - 1);\n    inputRefs.current[focusIdx]?.focus();\n  };\n\n  const cellBase = [\n    'h-12 w-10 rounded-xl border text-center text-lg font-bold',\n    'outline-none transition',\n    'focus:border-brand-blue/50 focus:ring-2 focus:ring-brand-blue/15',\n    'disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400',\n  ].join(' ');\n\n  const cellClass = error\n    ? `${cellBase} border-rose-400 bg-rose-50/40 text-rose-800 focus:ring-rose-100`\n    : `${cellBase} border-slate-200 bg-white text-slate-900`;\n\n  return (\n    <div className={`space-y-2 ${className}`}>\n      <div\n        role=\"group\"\n        aria-label={ariaLabel}\n        aria-describedby={errorMessage ? errorId : undefined}\n        className=\"flex items-center gap-2\"\n      >\n        {Array.from({ length }).map((_, i) => (\n          <input\n            key={i}\n            ref={(el) => { inputRefs.current[i] = el; }}\n            type=\"text\"\n            inputMode=\"numeric\"\n            maxLength={1}\n            value={cells[i] ?? ''}\n            disabled={disabled}\n            aria-invalid={error}\n            aria-label={i === 0 ? `${ariaLabel}, digit ${i + 1} of ${length}` : `digit ${i + 1} of ${length}`}\n            aria-describedby={errorMessage ? errorId : undefined}\n            className={cellClass}\n            onChange={handleInput(i)}\n            onKeyDown={handleKeyDown(i)}\n            onPaste={handlePaste}\n            onFocus={(e) => e.target.select()}\n          />\n        ))}\n      </div>\n\n      {errorMessage && (\n        <p id={errorId} className=\"text-xs font-semibold text-rose-600\" role=\"alert\">\n          {errorMessage}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/lib/index27.cjs

@@ -0,0 +1,120 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let lucide_react = require("lucide-react");
+//#region src/ui-library/gallery/file-upload/FileUpload.tsx
+/**
+* FileUpload — Design System Component
+*
+* A styled file-selection trigger. Wraps a native <input type="file"> with a
+* drag-and-drop zone. Presentation-only — no HTTP upload logic.
+*
+* States: idle, drag-active, selected, disabled
+*
+* Accessibility:
+*   - The visible zone is a <label> wrapping a visually-hidden <input>.
+*   - <input> has aria-label describing the expected file.
+*   - Keyboard: Tab to focus the input; Enter/Space to open the picker.
+*   - Disabled: input has disabled attr; zone has aria-disabled="true".
+*/
+function FileUpload({ onFiles, accept, multiple = false, disabled = false, "aria-label": ariaLabel = "Upload file", className = "" }) {
+	const inputRef = (0, react.useRef)(null);
+	const [dragging, setDragging] = (0, react.useState)(false);
+	const [selected, setSelected] = (0, react.useState)([]);
+	const handleFiles = (files) => {
+		if (!files || files.length === 0) return;
+		const arr = Array.from(files);
+		setSelected(multiple ? arr : [arr[0]]);
+		onFiles?.(multiple ? arr : [arr[0]]);
+	};
+	const handleChange = (e) => {
+		handleFiles(e.target.files);
+		e.target.value = "";
+	};
+	const handleDrop = (e) => {
+		e.preventDefault();
+		setDragging(false);
+		if (disabled) return;
+		handleFiles(e.dataTransfer.files);
+	};
+	const handleDragOver = (e) => {
+		e.preventDefault();
+		if (!disabled) setDragging(true);
+	};
+	const handleDragLeave = () => setDragging(false);
+	const removeFile = (i) => {
+		setSelected((prev) => prev.filter((_, idx) => idx !== i));
+	};
+	const zoneClass = [
+		"flex flex-col items-center justify-center gap-3",
+		"rounded-2xl border-2 border-dashed p-8 text-center cursor-pointer",
+		"transition-colors focus-within:outline-none focus-within:ring-2 focus-within:ring-brand-blue/20",
+		dragging ? "border-brand-blue/60 bg-blue-50" : disabled ? "border-slate-100 bg-slate-50/40 cursor-not-allowed" : "border-slate-200 bg-white hover:border-brand-sky/50 hover:bg-[#eef2f8]",
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+			className: zoneClass,
+			onDrop: handleDrop,
+			onDragOver: handleDragOver,
+			onDragLeave: handleDragLeave,
+			"aria-disabled": disabled,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					ref: inputRef,
+					type: "file",
+					accept,
+					multiple,
+					disabled,
+					onChange: handleChange,
+					"aria-label": ariaLabel,
+					className: "sr-only"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.UploadCloud, {
+					size: 32,
+					className: dragging ? "text-brand-blue" : disabled ? "text-slate-300" : "text-slate-400",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: `text-sm font-semibold ${disabled ? "text-slate-400" : "text-slate-700"}`,
+					children: dragging ? "Drop to upload" : "Click or drag files here"
+				}), accept && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "mt-0.5 text-xs font-medium text-slate-400",
+					children: accept
+				})] })
+			]
+		}), selected.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			className: "space-y-1.5",
+			"aria-label": "Selected files",
+			children: selected.map((file, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+				className: "flex items-center gap-3 rounded-xl border border-slate-200 bg-white px-3 py-2.5",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.File, {
+						size: 14,
+						className: "shrink-0 text-brand-sky",
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "min-w-0 flex-1 truncate text-xs font-semibold text-slate-700",
+						children: file.name
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "shrink-0 text-[10px] font-medium text-slate-400",
+						children: [(file.size / 1024).toFixed(0), " KB"]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: () => removeFile(i),
+						"aria-label": `Remove ${file.name}`,
+						className: "ml-1 shrink-0 rounded p-0.5 text-slate-400 hover:bg-rose-50 hover:text-rose-500 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-200",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { size: 12 })
+					})
+				]
+			}, `${file.name}-${i}`))
+		})]
+	});
+}
+//#endregion
+exports.FileUpload = FileUpload;
+
+//# sourceMappingURL=index27.cjs.map

package/lib/index27.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index27.cjs","names":[],"sources":["../src/ui-library/gallery/file-upload/FileUpload.tsx"],"sourcesContent":["/**\n * FileUpload — Design System Component\n *\n * A styled file-selection trigger. Wraps a native <input type=\"file\"> with a\n * drag-and-drop zone. Presentation-only — no HTTP upload logic.\n *\n * States: idle, drag-active, selected, disabled\n *\n * Accessibility:\n *   - The visible zone is a <label> wrapping a visually-hidden <input>.\n *   - <input> has aria-label describing the expected file.\n *   - Keyboard: Tab to focus the input; Enter/Space to open the picker.\n *   - Disabled: input has disabled attr; zone has aria-disabled=\"true\".\n */\n\nimport { useRef, useState, type ChangeEvent, type DragEvent } from 'react';\nimport { UploadCloud, X, File } from 'lucide-react';\n\nexport interface FileUploadProps {\n  /** Called when files are selected via picker or drop. */\n  onFiles?: (files: File[]) => void;\n  /** Accepted MIME types / extensions, forwarded to <input accept>. */\n  accept?: string;\n  /** Allow selecting multiple files. Default: false */\n  multiple?: boolean;\n  /** Disable the upload zone. */\n  disabled?: boolean;\n  /** Accessible label describing the expected file type. */\n  'aria-label'?: string;\n  /** Additional class on the root element. */\n  className?: string;\n}\n\nexport function FileUpload({\n  onFiles,\n  accept,\n  multiple = false,\n  disabled = false,\n  'aria-label': ariaLabel = 'Upload file',\n  className = '',\n}: FileUploadProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [dragging, setDragging] = useState(false);\n  const [selected, setSelected] = useState<File[]>([]);\n\n  const handleFiles = (files: FileList | null) => {\n    if (!files || files.length === 0) return;\n    const arr = Array.from(files);\n    setSelected(multiple ? arr : [arr[0]!]);\n    onFiles?.(multiple ? arr : [arr[0]!]);\n  };\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    handleFiles(e.target.files);\n    // Reset so same file can be re-selected\n    e.target.value = '';\n  };\n\n  const handleDrop = (e: DragEvent<HTMLLabelElement>) => {\n    e.preventDefault();\n    setDragging(false);\n    if (disabled) return;\n    handleFiles(e.dataTransfer.files);\n  };\n\n  const handleDragOver = (e: DragEvent<HTMLLabelElement>) => {\n    e.preventDefault();\n    if (!disabled) setDragging(true);\n  };\n\n  const handleDragLeave = () => setDragging(false);\n\n  const removeFile = (i: number) => {\n    setSelected((prev) => prev.filter((_, idx) => idx !== i));\n  };\n\n  const zoneClass = [\n    'flex flex-col items-center justify-center gap-3',\n    'rounded-2xl border-2 border-dashed p-8 text-center cursor-pointer',\n    'transition-colors focus-within:outline-none focus-within:ring-2 focus-within:ring-brand-blue/20',\n    dragging\n      ? 'border-brand-blue/60 bg-blue-50'\n      : disabled\n      ? 'border-slate-100 bg-slate-50/40 cursor-not-allowed'\n      : 'border-slate-200 bg-white hover:border-brand-sky/50 hover:bg-[#eef2f8]',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className=\"space-y-3\">\n      <label\n        className={zoneClass}\n        onDrop={handleDrop}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        aria-disabled={disabled}\n      >\n        <input\n          ref={inputRef}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          onChange={handleChange}\n          aria-label={ariaLabel}\n          className=\"sr-only\"\n        />\n        <UploadCloud\n          size={32}\n          className={dragging ? 'text-brand-blue' : disabled ? 'text-slate-300' : 'text-slate-400'}\n          aria-hidden=\"true\"\n        />\n        <div>\n          <p className={`text-sm font-semibold ${disabled ? 'text-slate-400' : 'text-slate-700'}`}>\n            {dragging ? 'Drop to upload' : 'Click or drag files here'}\n          </p>\n          {accept && (\n            <p className=\"mt-0.5 text-xs font-medium text-slate-400\">{accept}</p>\n          )}\n        </div>\n      </label>\n\n      {selected.length > 0 && (\n        <ul className=\"space-y-1.5\" aria-label=\"Selected files\">\n          {selected.map((file, i) => (\n            <li\n              key={`${file.name}-${i}`}\n              className=\"flex items-center gap-3 rounded-xl border border-slate-200 bg-white px-3 py-2.5\"\n            >\n              <File size={14} className=\"shrink-0 text-brand-sky\" aria-hidden=\"true\" />\n              <span className=\"min-w-0 flex-1 truncate text-xs font-semibold text-slate-700\">\n                {file.name}\n              </span>\n              <span className=\"shrink-0 text-[10px] font-medium text-slate-400\">\n                {(file.size / 1024).toFixed(0)} KB\n              </span>\n              <button\n                type=\"button\"\n                onClick={() => removeFile(i)}\n                aria-label={`Remove ${file.name}`}\n                className=\"ml-1 shrink-0 rounded p-0.5 text-slate-400 hover:bg-rose-50 hover:text-rose-500 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-200\"\n              >\n                <X size={12} />\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiCA,SAAgB,WAAW,EACzB,SACA,QACA,WAAW,OACX,WAAW,OACX,cAAc,YAAY,eAC1B,YAAY,MACM;CAClB,MAAM,YAAA,GAAW,MAAA,OAAA,CAAyB,IAAI;CAC9C,MAAM,CAAC,UAAU,gBAAA,GAAe,MAAA,SAAA,CAAS,KAAK;CAC9C,MAAM,CAAC,UAAU,gBAAA,GAAe,MAAA,SAAA,CAAiB,CAAC,CAAC;CAEnD,MAAM,eAAe,UAA2B;EAC9C,IAAI,CAAC,SAAS,MAAM,WAAW,GAAG;EAClC,MAAM,MAAM,MAAM,KAAK,KAAK;EAC5B,YAAY,WAAW,MAAM,CAAC,IAAI,EAAG,CAAC;EACtC,UAAU,WAAW,MAAM,CAAC,IAAI,EAAG,CAAC;CACtC;CAEA,MAAM,gBAAgB,MAAqC;EACzD,YAAY,EAAE,OAAO,KAAK;EAE1B,EAAE,OAAO,QAAQ;CACnB;CAEA,MAAM,cAAc,MAAmC;EACrD,EAAE,eAAe;EACjB,YAAY,KAAK;EACjB,IAAI,UAAU;EACd,YAAY,EAAE,aAAa,KAAK;CAClC;CAEA,MAAM,kBAAkB,MAAmC;EACzD,EAAE,eAAe;EACjB,IAAI,CAAC,UAAU,YAAY,IAAI;CACjC;CAEA,MAAM,wBAAwB,YAAY,KAAK;CAE/C,MAAM,cAAc,MAAc;EAChC,aAAa,SAAS,KAAK,QAAQ,GAAG,QAAQ,QAAQ,CAAC,CAAC;CAC1D;CAEA,MAAM,YAAY;EAChB;EACA;EACA;EACA,WACI,oCACA,WACA,uDACA;EACJ;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,SAAD;GACE,WAAW;GACX,QAAQ;GACR,YAAY;GACZ,aAAa;GACb,iBAAe;GALjB,UAAA;IAOE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;KACE,KAAK;KACL,MAAK;KACG;KACE;KACA;KACV,UAAU;KACV,cAAY;KACZ,WAAU;IACX,CAAA;IACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,aAAD;KACE,MAAM;KACN,WAAW,WAAW,oBAAoB,WAAW,mBAAmB;KACxE,eAAY;IACb,CAAA;IACD,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;KAAG,WAAW,yBAAyB,WAAW,mBAAmB;KAClE,UAAA,WAAW,mBAAmB;IAC9B,CAAA,GACF,UACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;KAAG,WAAU;KAA6C,UAAA;IAAU,CAAA,CAEnE,EAAA,CAAA;GACA;EAEN,CAAA,GAAA,SAAS,SAAS,KACjB,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;GAAI,WAAU;GAAc,cAAW;GACpC,UAAA,SAAS,KAAK,MAAM,MACnB,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;IAEE,WAAU;IAFZ,UAAA;KAIE,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,MAAD;MAAM,MAAM;MAAI,WAAU;MAA0B,eAAY;KAAQ,CAAA;KACxE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MAAM,WAAU;MACb,UAAA,KAAK;KACF,CAAA;KACN,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,EACI,KAAK,OAAO,KAAA,CAAM,QAAQ,CAAC,GAAE,KAC3B;;KACN,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;MACE,MAAK;MACL,eAAe,WAAW,CAAC;MAC3B,cAAY,UAAU,KAAK;MAC3B,WAAU;MAEV,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,GAAD,EAAG,MAAM,GAAK,CAAA;KACR,CAAA;IACN;GAlBG,GAAA,GAAG,KAAK,KAAK,GAAG,GAkBnB,CACL;EACC,CAAA,CAEH;;AAET"}