@mova-ui/react 0.4.6 → 0.4.8

package/registry/conveyor-loop.json

@@ -1,7 +1,7 @@
 {
   "id": "conveyor-loop",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "conveyor-loop.tsx",
   "sourcePath": "ui/loading/conveyor-loop.tsx",
   "registryFile": "conveyor-loop.json",

package/registry/credit-score-barcode-meter.json

@@ -1,7 +1,7 @@
 {
   "id": "credit-score-barcode-meter",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "credit-score-barcode-meter.tsx",
   "registryFile": "credit-score-barcode-meter.json",
   "exports": [

package/registry/cross-spinner.json

@@ -1,7 +1,7 @@
 {
   "id": "cross-spinner",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "cross-spinner.tsx",
   "sourcePath": "ui/loading/cross-spinner.tsx",
   "registryFile": "cross-spinner.json",

package/registry/cube-flip-spring.json

@@ -1,7 +1,7 @@
 {
   "id": "cube-flip-spring",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "cube-flip-spring.tsx",
   "sourcePath": "ui/loading/cube-flip-spring.tsx",
   "registryFile": "cube-flip-spring.json",

package/registry/cursor-trail.json

@@ -1,7 +1,7 @@
 {
   "id": "cursor-trail",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "cursor-trail.tsx",
   "sourcePath": "ui/cursor/cursor-trail.tsx",
   "registryFile": "cursor-trail.json",

package/registry/dash-ring.json

@@ -1,7 +1,7 @@
 {
   "id": "dash-ring",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "dash-ring.tsx",
   "sourcePath": "ui/loading/dash-ring.tsx",
   "registryFile": "dash-ring.json",

package/registry/dashed-spiral.json

@@ -1,7 +1,7 @@
 {
   "id": "dashed-spiral",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "dashed-spiral.tsx",
   "sourcePath": "ui/loading/dashed-spiral.tsx",
   "registryFile": "dashed-spiral.json",

package/registry/date-position-selector.json

@@ -1,7 +1,7 @@
 {
   "id": "date-position-selector",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "date-position-selector.tsx",
   "sourcePath": "components/css-animations/yui-components/YuiUiKit1.tsx",
   "registryFile": "date-position-selector.json",

package/registry/day-trading-order-ticket.json

@@ -0,0 +1,17 @@
+{
+  "id": "day-trading-order-ticket",
+  "tier": "free",
+  "version": "0.4.8",
+  "file": "day-trading-order-ticket.tsx",
+  "sourcePath": "ui/cards/day-trading-order-ticket.tsx",
+  "registryFile": "day-trading-order-ticket.json",
+  "exports": [
+    "DayTradingOrderDraft",
+    "DayTradingOrderTicket",
+    "DayTradingOrderTicketProps"
+  ],
+  "dependencies": [],
+  "license": "MIT",
+  "previewMode": "client",
+  "content": "\"use client\";\n\"use client\";\n\n/** Adapted from the supplied Transitions.dev order-ticket reference. Local preview only; no brokerage connection. */\nimport * as React from \"react\";\n\nexport interface DayTradingOrderDraft {\n  symbol: string;\n  side: \"buy\" | \"sell\";\n  type: \"market\" | \"limit\" | \"stop\" | \"trail\";\n  shares: number;\n  price: number;\n  estimatedTotal: number;\n  /** Trailing-stop distance; price remains the quote used for the estimate. */\n  trailAmount?: number;\n}\nexport interface DayTradingOrderTicketProps {\n  symbol?: string;\n  company?: string;\n  quote?: number;\n  change?: string;\n  initialShares?: number;\n  onSubmit?: (draft: DayTradingOrderDraft) => void | Promise<void>;\n  theme?: \"light\" | \"dark\";\n  className?: string;\n  style?: React.CSSProperties;\n}\nconst types = [\n  { id: \"market\", label: \"Market\", priceLabel: \"\", hint: \"\" },\n  { id: \"limit\", label: \"Limit\", priceLabel: \"Limit price\", hint: \"a limit price\" },\n  { id: \"stop\", label: \"Stop market\", priceLabel: \"Stop price\", hint: \"a stop price\" },\n  { id: \"trail\", label: \"Trailing stop\", priceLabel: \"Trail amount\", hint: \"a trail amount\" },\n] as const;\nconst money = (value: number) => new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency: \"USD\" }).format(value);\n\nfunction SwapText({ text }: { text: string }) {\n  const ref = React.useRef<HTMLSpanElement>(null);\n  const [shown, setShown] = React.useState(text);\n  const entering = React.useRef(false);\n  React.useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    if (text === shown) { el.classList.remove(\"mot-is-exit\"); return; }\n    if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) { setShown(text); return; }\n    el.classList.remove(\"mot-is-enter-start\");\n    el.classList.add(\"mot-is-exit\");\n    const timer = window.setTimeout(() => { entering.current = true; setShown(text); }, 150);\n    return () => window.clearTimeout(timer);\n  }, [text, shown]);\n  React.useLayoutEffect(() => {\n    if (!entering.current || !ref.current) return;\n    entering.current = false;\n    ref.current.classList.remove(\"mot-is-exit\");\n    ref.current.classList.add(\"mot-is-enter-start\");\n    void ref.current.offsetHeight;\n    ref.current.classList.remove(\"mot-is-enter-start\");\n  }, [shown]);\n  return <span ref={ref} className=\"mot-t-text-swap\">{shown}</span>;\n}\nfunction PopNumber({ value }: { value: string }) {\n  const ref = React.useRef<HTMLSpanElement>(null);\n  const previous = React.useRef(value);\n  const samePrefix = React.useRef(value.length);\n  if (previous.current !== value) {\n    let same = 0;\n    while (same < previous.current.length && same < value.length && previous.current[same] === value[same]) same++;\n    samePrefix.current = same;\n  }\n  const same = samePrefix.current;\n  React.useLayoutEffect(() => {\n    if (previous.current === value || !ref.current) return;\n    previous.current = value;\n    ref.current.classList.remove(\"mot-is-animating\");\n    void ref.current.offsetHeight;\n    ref.current.classList.add(\"mot-is-animating\");\n  }, [value]);\n  return <span ref={ref} className=\"mot-t-digit-group\" aria-hidden=\"true\">{value.split(\"\").map((character, index) => <span key={index} className=\"mot-t-digit\" data-same={index < same ? \"\" : undefined} data-stagger={index === value.length - 2 ? \"1\" : index === value.length - 1 ? \"2\" : undefined}>{character}</span>)}</span>;\n}\nfunction CheckMark({ size = 16 }: { size?: number }) {\n  return <svg className=\"mot-hi\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={size === 24 ? 2 : 3} aria-hidden=\"true\"><path d=\"M5.25 12.7033 9.40385 17.37 18.75 6.87\" /></svg>;\n}\nfunction useFieldError() {\n  const [error, setError] = React.useState(false);\n  const [shake, setShake] = React.useState(0);\n  const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const box = React.useRef<HTMLDivElement>(null);\n  React.useEffect(() => () => { if (timer.current) clearTimeout(timer.current); }, []);\n  React.useLayoutEffect(() => {\n    if (!error || !box.current) return;\n    box.current.classList.remove(\"mot-is-shaking\");\n    void box.current.offsetWidth;\n    box.current.classList.add(\"mot-is-shaking\");\n    const shakeTimer = setTimeout(() => box.current?.classList.remove(\"mot-is-shaking\"), 300);\n    return () => clearTimeout(shakeTimer);\n  }, [error, shake]);\n  const clear = () => { if (timer.current) clearTimeout(timer.current); setError(false); };\n  const show = () => {\n    if (timer.current) clearTimeout(timer.current);\n    setError(true); setShake(value => value + 1);\n    timer.current = setTimeout(() => setError(false), 3280);\n  };\n  return { error, box, clear, show };\n}\n\nexport function DayTradingOrderTicket({ symbol = \"NOVA\", company = \"Novaline Robotics\", quote = 184.20, change = \"+1.24%\", initialShares = 10, onSubmit, theme = \"light\", className = \"\", style }: DayTradingOrderTicketProps = {}) {\n  const [side, setSide] = React.useState<DayTradingOrderDraft[\"side\"]>(\"buy\");\n  const [type, setType] = React.useState<DayTradingOrderDraft[\"type\"]>(\"limit\");\n  const [shares, setShares] = React.useState(String(Math.min(9999, Math.max(0, Math.trunc(Number.isFinite(initialShares) ? initialShares : 10)))));\n  const [price, setPrice] = React.useState(quote.toFixed(2));\n  const [menuOpen, setMenuOpen] = React.useState(false);\n  const [menuClosing, setMenuClosing] = React.useState(false);\n  const [busy, setBusy] = React.useState(false);\n  const [done, setDone] = React.useState<DayTradingOrderDraft | null>(null);\n  const [submitError, setSubmitError] = React.useState(\"\");\n  const sharesError = useFieldError();\n  const priceError = useFieldError();\n  const guard = React.useRef(false);\n  const alive = React.useRef(true);\n  const placedTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const menuTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const menu = React.useRef<HTMLDivElement>(null);\n  const typeButton = React.useRef<HTMLButtonElement>(null);\n  const heading = React.useRef<HTMLHeadingElement>(null);\n  const shareInput = React.useRef<HTMLInputElement>(null);\n  const priceInput = React.useRef<HTMLInputElement>(null);\n  const newOrderFocus = React.useRef(false);\n  const id = React.useId();\n  const typeInfo = types.find(item => item.id === type)!;\n  const count = parseInt(shares, 10) || 0;\n  const numericPrice = parseFloat(price);\n  const effectivePrice = type === \"limit\" || type === \"stop\" ? numericPrice : quote;\n  const total = count > 0 && Number.isFinite(effectivePrice) && effectivePrice > 0 ? count * effectivePrice : 0;\n  const totalText = money(total);\n  const description = (draft: DayTradingOrderDraft) => draft.type === \"market\" ? \"at market\" : draft.type === \"limit\" ? `at ${money(draft.price)}` : draft.type === \"stop\" ? `stop ${money(draft.price)}` : `trailing ${money(draft.trailAmount ?? 0)}`;\n  React.useEffect(() => {\n    alive.current = true;\n    return () => { alive.current = false; if (placedTimer.current) clearTimeout(placedTimer.current); if (menuTimer.current) clearTimeout(menuTimer.current); };\n  }, []);\n  React.useEffect(() => {\n    if (done) heading.current?.focus();\n    else if (newOrderFocus.current) { newOrderFocus.current = false; (type === \"market\" ? typeButton : shareInput).current?.focus(); }\n  }, [done, type]);\n  function closeMenu(focus = false) {\n    setMenuOpen(false); setMenuClosing(true);\n    if (menuTimer.current) clearTimeout(menuTimer.current);\n    menuTimer.current = setTimeout(() => setMenuClosing(false), 150);\n    if (focus) typeButton.current?.focus();\n  }\n  React.useEffect(() => {\n    if (!menuOpen) return;\n    const onDown = (event: PointerEvent) => { if (!menu.current?.contains(event.target as Node)) closeMenu(); };\n    const onKey = (event: KeyboardEvent) => { if (event.key === \"Escape\") { event.preventDefault(); closeMenu(true); } };\n    document.addEventListener(\"pointerdown\", onDown); document.addEventListener(\"keydown\", onKey);\n    return () => { document.removeEventListener(\"pointerdown\", onDown); document.removeEventListener(\"keydown\", onKey); };\n  }, [menuOpen]);\n  function openMenu(focusIndex?: number) {\n    if (menuTimer.current) clearTimeout(menuTimer.current);\n    setMenuClosing(false); setMenuOpen(true);\n    if (focusIndex !== undefined) requestAnimationFrame(() => menu.current?.querySelectorAll<HTMLButtonElement>('[role=\"menuitemradio\"]')[focusIndex]?.focus());\n  }\n  function selectType(value: DayTradingOrderDraft[\"type\"]) {\n    if ((value === \"trail\") !== (type === \"trail\")) setPrice(value === \"trail\" ? \"1.50\" : quote.toFixed(2));\n    priceError.clear(); sharesError.clear(); setSubmitError(\"\"); setType(value); closeMenu(true);\n  }\n  const updateShares = (value: string) => { setShares(value); sharesError.clear(); setSubmitError(\"\"); };\n  async function submit(event: React.FormEvent) {\n    event.preventDefault();\n    if (guard.current || done) return;\n    const invalidShares = count < 1 || count > 9999;\n    const invalidPrice = type !== \"market\" && !(Number.isFinite(numericPrice) && numericPrice > 0);\n    if (invalidShares) sharesError.show();\n    if (invalidPrice) priceError.show();\n    if (invalidShares || invalidPrice) { if (type === \"market\") typeButton.current?.focus(); else (invalidShares ? shareInput : priceInput).current?.focus(); return; }\n    if (!Number.isFinite(effectivePrice) || effectivePrice <= 0) { setSubmitError(\"The quote must be greater than zero.\"); return; }\n    const draft: DayTradingOrderDraft = { symbol, side, type, shares: count, price: effectivePrice, estimatedTotal: total, ...(type === \"trail\" ? { trailAmount: numericPrice } : {}) };\n    guard.current = true; setBusy(true); setSubmitError(\"\"); closeMenu();\n    try {\n      await Promise.all([onSubmit?.(draft), new Promise<void>(resolve => { placedTimer.current = setTimeout(() => { placedTimer.current = null; resolve(); }, 1800); })]);\n      if (alive.current) setDone(draft);\n    } catch {\n      if (placedTimer.current) { clearTimeout(placedTimer.current); placedTimer.current = null; }\n      if (alive.current) setSubmitError(\"The order could not be submitted. Please try again.\");\n    } finally { guard.current = false; if (alive.current) setBusy(false); }\n  }\n  return <section className={`mova-order ${className}`} data-theme={theme} style={style} aria-label=\"Trading order ticket\">\n    <style>{css}</style>\n    {!onSubmit && <p className=\"mot-sr-only\">Interactive preview · no real order</p>}\n    <div className=\"mot-t-page-slide\" data-page={done ? 2 : 1}>\n      <form className=\"mot-t-page mot-page-form\" data-page-id=\"1\" onSubmit={event => void submit(event)} noValidate inert={!!done} aria-hidden={done ? true : undefined}>\n        <header className=\"mot-head\"><div className=\"mot-head-main\"><h2 className=\"mot-ticker\">{symbol}</h2><p className=\"mot-company\">{company}</p></div><div className=\"mot-quote\"><span className=\"mot-quote-price\">{money(quote)}</span><span className=\"mot-badge\" data-negative={change.trim().startsWith(\"-\")}>{change}</span></div></header>\n        <div className=\"mot-t-tabs\" role=\"tablist\" aria-label=\"Order side\"><span className=\"mot-t-tabs-pill\" aria-hidden=\"true\" style={{ transform: `translateX(${side === \"buy\" ? \"3px\" : \"calc(100% + 6px)\"})` }} />{([\"buy\", \"sell\"] as const).map((value, index) => <button key={value} type=\"button\" role=\"tab\" className=\"mot-t-tab\" aria-selected={value === side} tabIndex={value === side ? 0 : -1} disabled={busy} onClick={() => setSide(value)} onKeyDown={event => { if ([\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"].includes(event.key)) { event.preventDefault(); const next = event.key === \"Home\" ? \"buy\" : event.key === \"End\" ? \"sell\" : index === 0 ? \"sell\" : \"buy\"; setSide(next); (event.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]')[next === \"buy\" ? 0 : 1])?.focus(); } }}>{value === \"buy\" ? \"Buy\" : \"Sell\"}</button>)}</div>\n        <div className=\"mot-fields\">\n          <div className=\"mot-field\"><span className=\"mot-field-label\" id={`${id}-type-label`}>Order type</span><div className=\"mot-type-anchor\" ref={menu}>\n            <button type=\"button\" ref={typeButton} className=\"mot-box mot-type-btn mot-t-input\" aria-haspopup=\"menu\" aria-expanded={menuOpen} aria-controls={`${id}-types`} aria-labelledby={`${id}-type-label ${id}-type-value`} disabled={busy} onClick={() => menuOpen ? closeMenu() : openMenu()} onKeyDown={event => { if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") { event.preventDefault(); openMenu(event.key === \"ArrowDown\" ? 0 : types.length - 1); } }}><span className=\"mot-type-btn-label\" id={`${id}-type-value`}><SwapText text={typeInfo.label} /></span><svg className=\"mot-hi\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M4.46967 6.46967C4.76256 6.17678 5.23744 6.17678 5.53033 6.46967L8 8.93934L10.4697 6.46967C10.7626 6.17678 11.2374 6.17678 11.5303 6.46967C11.8232 6.76256 11.8232 7.23744 11.5303 7.53033L8.53033 10.5303C8.23744 10.8232 7.76256 10.8232 7.46967 10.5303L4.46967 7.53033C4.17678 7.23744 4.17678 6.76256 4.46967 6.46967Z\" /></svg></button>\n            <div id={`${id}-types`} className={`mot-t-dropdown${menuOpen ? \" mot-is-open\" : menuClosing ? \" mot-is-closing\" : \"\"}`} role=\"menu\" aria-label=\"Order type\" aria-hidden={!menuOpen} inert={!menuOpen} onKeyDown={event => { const items = Array.from(event.currentTarget.querySelectorAll<HTMLButtonElement>('[role=\"menuitemradio\"]')); const current = items.indexOf(document.activeElement as HTMLButtonElement); const next = event.key === \"ArrowDown\" ? (current + 1) % items.length : event.key === \"ArrowUp\" ? (current + items.length - 1) % items.length : event.key === \"Home\" ? 0 : event.key === \"End\" ? items.length - 1 : -1; if (next >= 0) { event.preventDefault(); items[next]?.focus(); } if (event.key === \"Tab\") closeMenu(); }}>\n              {types.map(item => <button key={item.id} type=\"button\" role=\"menuitemradio\" aria-checked={item.id === type} className=\"mot-menu-item\" tabIndex={menuOpen ? 0 : -1} onClick={() => selectType(item.id)}><span>{item.label}</span>{item.id === type && <CheckMark />}</button>)}\n            </div>\n          </div></div>\n          <div className=\"mot-t-acc\" data-open={type !== \"market\"} aria-hidden={type === \"market\"} inert={type === \"market\"}><div className=\"mot-t-acc-panel\"><div className=\"mot-t-acc-panel-inner\"><div className=\"mot-t-acc-body\">\n            <div className={`mot-field mot-t-input-wrap${sharesError.error ? \" mot-is-error\" : \"\"}`}><label className=\"mot-field-label\" htmlFor={`${id}-shares`}>Shares</label><div className={`mot-box mot-t-input${sharesError.error ? \" mot-is-error\" : \"\"}`} ref={sharesError.box}><button type=\"button\" className=\"mot-step\" aria-label=\"One share less\" disabled={busy} onClick={() => updateShares(String(Math.max(0, count - 1)))}><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeWidth=\"2.25\" aria-hidden=\"true\"><path d=\"M5 12h14\" /></svg></button><input ref={shareInput} id={`${id}-shares`} inputMode=\"numeric\" value={shares} disabled={busy} aria-invalid={sharesError.error} aria-describedby={sharesError.error ? `${id}-shares-error` : undefined} onChange={event => updateShares(event.target.value.replace(/\\D/g, \"\").slice(0, 4))} /><button type=\"button\" className=\"mot-step\" aria-label=\"One share more\" disabled={busy} onClick={() => updateShares(String(Math.min(9999, count + 1)))}><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeWidth=\"2.25\" aria-hidden=\"true\"><path d=\"M12 4.5v15m7.5-7.5h-15\" /></svg></button></div><p className=\"mot-t-error-msg\" id={`${id}-shares-error`} role={sharesError.error ? \"alert\" : undefined}>Enter at least 1 share</p></div>\n            <div className={`mot-field mot-t-input-wrap${priceError.error ? \" mot-is-error\" : \"\"}`}><label className=\"mot-field-label\" htmlFor={`${id}-price`}><SwapText text={typeInfo.priceLabel || \"Limit price\"} /></label><div className={`mot-box mot-price mot-t-input${priceError.error ? \" mot-is-error\" : \"\"}`} ref={priceError.box}><span className=\"mot-prefix\" aria-hidden=\"true\">$</span><input ref={priceInput} id={`${id}-price`} tabIndex={type === \"market\" ? -1 : 0} inputMode=\"decimal\" value={price} disabled={busy} aria-invalid={priceError.error} aria-describedby={priceError.error ? `${id}-price-error` : undefined} onChange={event => { setPrice(event.target.value.replace(/[^0-9.]/g, \"\").replace(/(\\..*)\\./g, \"$1\").slice(0, 8)); priceError.clear(); setSubmitError(\"\"); }} /></div><p className=\"mot-t-error-msg\" id={`${id}-price-error`} role={priceError.error ? \"alert\" : undefined}>Enter {typeInfo.hint || \"a limit price\"}</p></div>\n          </div></div></div></div>\n        </div>\n        <div className=\"mot-divider\" aria-hidden=\"true\" />\n        <div className=\"mot-total\"><span className=\"mot-total-label\">Est. total</span><span className=\"mot-total-value\"><PopNumber value={totalText} /><span className=\"mot-sr-only\" aria-live=\"polite\">{totalText}</span></span></div>\n        {submitError && <p className=\"mot-submit-error\" role=\"alert\">{submitError}</p>}\n        <button type=\"submit\" className={`mot-submit${busy ? \" mot-is-loading\" : \"\"}`} aria-live=\"polite\" aria-busy={busy} disabled={busy}><span className=\"mot-btn-loader\"><span className=\"mot-t-matrix\" aria-hidden=\"true\">{Array.from({ length: 16 }, (_, index) => <i key={index} className={[0, 3, 12, 15].includes(index) ? \"mot-is-gap\" : undefined} style={{ \"--d\": (index % 4) * 120 } as React.CSSProperties} />)}</span></span><SwapText text={busy ? \"Placing order\" : side === \"buy\" ? \"Buy\" : \"Sell\"} /></button>\n      </form>\n      <section className=\"mot-t-page mot-page-done\" data-page-id=\"2\" aria-hidden={!done} inert={!done}>\n        <div className=\"mot-done-head\"><span className=\"mot-done-icon\"><CheckMark size={24} /></span><h2 className=\"mot-done-title\" ref={heading} tabIndex={-1}>{onSubmit ? \"Order submitted\" : \"Order preview ready\"}</h2><p className=\"mot-done-meta\">{done ? `${done.side === \"buy\" ? \"Buy\" : \"Sell\"} ${done.shares} ${done.symbol} ${description(done)}` : `Buy ${count} ${symbol} at ${money(quote)}`}</p></div>\n        <div className=\"mot-divider\" aria-hidden=\"true\" /><div className=\"mot-total\"><span className=\"mot-total-label\">Est. total</span><span className=\"mot-total-value\">{money(done?.estimatedTotal ?? total)}</span></div>\n        <button type=\"button\" className=\"mot-again\" tabIndex={done ? 0 : -1} onClick={() => { newOrderFocus.current = true; setDone(null); }}>New order</button>\n      </section>\n    </div>\n  </section>;\n}\n\nconst css = `\n.mova-order{--stage-fg:#0d0d0d;--stage-muted:#6c6c6c;--stage-border:rgba(0,0,0,.08);--stage-surface:#fff;--stage-accent:#17181c;--stage-on-accent:#fff;color-scheme:light;font:400 13px/20px \"Inter Variable\",Inter,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-optical-sizing:auto;font-feature-settings:\"liga\" 1,\"calt\" 1;letter-spacing:0;-webkit-font-smoothing:antialiased}\n.mova-order[data-theme=dark]{--stage-fg:#f2f2f2;--stage-muted:rgba(202,202,202,.7);--stage-border:rgba(255,255,255,.08);--stage-surface:#1d1d1d;--stage-accent:#fff;--stage-on-accent:#0d0d0d;color-scheme:dark}\n.mova-order *{box-sizing:border-box}\n.mova-order {\n  --page-slide-dur: 250ms;\n  --page-fade-dur: 250ms;\n  --page-slide-distance: 8px;\n  --page-blur: 3px;\n  --page-stagger: 0ms;\n  --page-exit-enabled: 1;\n  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);\n  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);\n  --matrix-cycle: 1200ms;\n  --matrix-base: color-mix(in srgb, var(--stage-on-accent) 35%, transparent);\n  --matrix-active: var(--stage-on-accent);\n  --matrix-ease: ease-in-out;\n  --done-pop-dur: 500ms;\n  --done-pop-scale: 0.6;\n  --shake-distance: 6px;\n  --shake-overshoot: 4px;\n  --shake-dur-a: 80ms;\n  --shake-dur-b: 60ms;\n  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);\n  --revert-hold: 3000ms;\n  --revert-dur: 280ms;\n  --digit-dur: 500ms;\n  --digit-distance: 8px;\n  --digit-stagger: 70ms;\n  --digit-blur: 2px;\n  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);\n  --digit-dir-x: 0;\n  --digit-dir-y: 1;\n  --tabs-dur: 250ms;\n  --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);\n  --tabs-text-muted: var(--stage-muted);\n  --tabs-text-active: var(--stage-fg);\n  --tabs-bar-bg: var(--chip);\n  --tabs-pill-bg: var(--stage-surface);\n  --text-swap-dur: 150ms;\n  --text-swap-translate-y: 4px;\n  --text-swap-blur: 2px;\n  --text-swap-ease: ease-in-out;\n  --press-scale: 0.99;\n  --press-dur: 150ms;\n  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);\n  --duration-quick: 150ms;\n  --ease-out: ease-out;\n\n  --dropdown-open-dur: 250ms;\n  --dropdown-close-dur: 150ms;\n  --dropdown-pre-scale: 0.97;\n  --dropdown-closing-scale: 0.99;\n  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);\n  --acc-expand: 250ms;\n  --acc-collapse: 250ms;\n  --acc-chevron: 250ms;\n  --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);\n  --menu-shadow: 0 4px 42px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.06);\n\n  --chip: rgba(0,0,0,.04);\n  --chip-hover: rgba(0,0,0,.06);\n  --chip-press: rgba(0,0,0,.08);\n  --ring-soft: rgba(0,0,0,.06);\n  --err: #EC4A4A;\n  --divider: color-mix(in srgb, var(--stage-border) 49%, transparent);\n  --badge-fill: #E7F9F3;\n  --badge-ink: #216E55;\n  --pill-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);\n  --cta-shadow: 0 1px 2px 0 rgba(0,0,0,.2);\n  --cta-hover: rgba(255,255,255,.06);\n  --card-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 8px 32px -4px rgba(0,0,0,.06), 0 1px 3px 0 rgba(0,0,0,.04);\n}\n.mova-order[data-theme=\"dark\"] {\n  --chip: rgba(255,255,255,.07);\n  --chip-hover: rgba(255,255,255,.10);\n  --chip-press: rgba(255,255,255,.08);\n  --ring-soft: rgba(255,255,255,.10);\n  --err: #FF6B6B;\n  --badge-fill: rgba(33,110,85,.28);\n  --badge-ink: #7FDDB8;\n  --tabs-pill-bg: rgba(255,255,255,.10);\n  --pill-shadow: 0 1px 2px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);\n  --cta-shadow: 0 1px 2px 0 rgba(0,0,0,.4);\n  --cta-hover: rgba(0,0,0,.06);\n  --card-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 8px 32px -4px rgba(0,0,0,.3), 0 1px 3px 0 rgba(0,0,0,.2);\n}\n\n.mova-order {\n  width: 300px;\n  max-width: 100%;\n  box-sizing: border-box;\n  padding: 24px;\n  border-radius: 24px;\n  background: var(--stage-surface);\n  box-shadow: var(--card-shadow);\n  color: var(--stage-fg);\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n:where(.mova-order) :is(button, input) { font: inherit; color: inherit; }\n:where(.mova-order) button { padding: 0; border: 0; background: none; cursor: pointer; }\n:where(.mova-order) p { margin: 0; }\n.mova-order :focus-visible:not(input) {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--stage-surface), 0 0 0 4px var(--stage-accent);\n}\n\n.mot-head { display: flex; align-items: flex-start; gap: 12px; }\n.mot-head-main { flex: 1; min-width: 0; }\n.mot-ticker { font-size: 16px; line-height: 22px; font-weight: 500; margin: 0; }\n.mot-company { font-size: 12px; line-height: 16px; color: var(--stage-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.mot-quote { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }\n.mot-quote-price { font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; }\n.mot-badge {\n  display: inline-flex; align-items: center;\n  height: 18px; padding: 0 6px; border-radius: 50px;\n  font-size: 11px; line-height: 16px; font-weight: 500;\n  background: var(--badge-fill); color: var(--badge-ink);\n  box-shadow: 0 1px 3px rgba(0,0,0,.04), inset 0 0 0 1px color-mix(in srgb, var(--badge-ink) 14%, transparent), inset 0 -1px 0 0 color-mix(in srgb, var(--badge-ink) 10%, transparent);\n  font-variant-numeric: tabular-nums;\n}\n\n/* Tabs sliding */\n.mot-t-tabs {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 3px;\n  padding: 3px;\n  border-radius: 48px;\n  background: var(--tabs-bar-bg);\n}\n.mot-t-tab {\n  position: relative;\n  flex: 1;\n  appearance: none;\n  border: 0;\n  background: transparent;\n  height: 30px;\n  padding: 4px 12px;\n  font-size: 13px;\n  line-height: 20px;\n  font-weight: 500;\n  color: var(--tabs-text-muted);\n  cursor: pointer;\n  border-radius: 48px;\n  z-index: 1;\n  --press-scale: 0.97;\n  transition: color var(--tabs-dur) var(--tabs-ease), transform var(--press-dur) var(--ease-smooth-out);\n}\n.mova-order .mot-t-tab { color: var(--tabs-text-muted); }\n.mova-order .mot-t-tab[aria-selected=\"true\"] { color: var(--tabs-text-active); }\n@media (hover: hover) and (pointer: fine) { .mova-order .mot-t-tab:not([aria-selected=\"true\"]):hover { color: var(--tabs-text-active); } }\n.mot-t-tabs-pill {\n  position: absolute;\n  top: 3px;\n  left: 0;\n  height: 30px;\n  width: calc((100% - 9px) / 2);\n  background: var(--tabs-pill-bg);\n  box-shadow: var(--pill-shadow);\n  border-radius: 48px;\n  transform: translateX(0);\n  transition: transform var(--tabs-dur) var(--tabs-ease), width var(--tabs-dur) var(--tabs-ease);\n  will-change: transform, width;\n  z-index: 0;\n  pointer-events: none;\n}\n\n/* Fields */\n.mot-fields { display: flex; flex-direction: column; gap: 4px; }\n.mot-field {\n  display: grid;\n  grid-template-columns: 1fr auto;\n  align-items: center;\n  column-gap: 12px;\n}\n.mot-field-label { font-size: 13px; line-height: 20px; }\n.mot-box {\n  width: 136px;\n  height: 36px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 0 4px;\n  border-radius: 10px;\n  background: var(--stage-surface);\n  box-shadow: 0 0 0 1px var(--stage-border);\n}\n.mot-t-input {\n  transition: box-shadow var(--duration-quick) var(--ease-out);\n  will-change: transform;\n}\n.mot-box:focus-within { box-shadow: 0 0 0 1px var(--stage-accent), 0 0 0 3px var(--ring-soft); }\n.mot-t-input.mot-is-error,\n.mot-t-input.mot-is-error:focus-within {\n  box-shadow: 0 0 0 1px var(--err), 0 0 0 3px color-mix(in srgb, var(--err) 14%, transparent);\n  transition: box-shadow var(--revert-dur, 280ms) ease-out;\n}\n.mot-box input {\n  flex: 1;\n  min-width: 0;\n  height: 100%;\n  border: 0;\n  outline: none;\n  background: none;\n  padding: 0;\n  font-size: 13px;\n  line-height: 20px;\n  font-weight: 400;\n  font-variant-numeric: tabular-nums;\n  color: var(--stage-fg);\n  text-align: center;\n}\n.mot-box.mot-price { padding: 0 12px; gap: 2px; }\n.mot-box.mot-price input { text-align: right; }\n.mot-prefix { font-size: 13px; line-height: 20px; color: var(--stage-muted); }\n.mot-step {\n  flex: none;\n  width: 28px;\n  height: 28px;\n  border-radius: 6px;\n  display: grid;\n  place-items: center;\n  color: var(--stage-muted);\n  --press-scale: 0.95;\n  transition: background-color var(--duration-quick) var(--ease-out), transform var(--press-dur) var(--ease-smooth-out);\n}\n@media (hover: hover) and (pointer: fine) { .mot-step:hover { background: var(--chip); } }\n.mot-step:is(:active,.mot-is-pressed) { background: var(--chip-press); transform: scale(var(--press-scale)); }\n\n.mot-t-error-msg {\n  grid-column: 1 / -1;\n  margin: 4px 0 0;\n  height: 16px;\n  font-size: 12px;\n  line-height: 16px;\n  text-align: right;\n  color: var(--err);\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity var(--revert-dur, 280ms) ease-out, visibility 0s linear var(--revert-dur, 280ms);\n}\n.mot-t-input-wrap.mot-is-error .mot-t-error-msg {\n  opacity: 1;\n  visibility: visible;\n  transition: opacity var(--revert-dur, 280ms) ease-out, visibility 0s linear 0s;\n}\n.mot-t-input.mot-is-shaking {\n  animation: mot-t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear;\n}\n@keyframes mot-t-input-shake {\n  0%      { transform: translateX(0);                                 animation-timing-function: var(--shake-ease); }\n  28.57%  { transform: translateX(var(--shake-distance));             animation-timing-function: var(--shake-ease); }\n  57.14%  { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }\n  78.57%  { transform: translateX(var(--shake-overshoot));            animation-timing-function: var(--shake-ease); }\n  100%    { transform: translateX(0); }\n}\n\n/* Total */\n.mot-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--divider) 20%, var(--divider) 80%, transparent); }\n.mot-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 20px; }\n.mot-total-label { color: var(--stage-muted); }\n.mot-total-value { font-variant-numeric: tabular-nums; }\n\n@keyframes mot-t-digit-pop-in {\n  0% {\n    transform: translate(calc(var(--digit-distance) * var(--digit-dir-x)), calc(var(--digit-distance) * var(--digit-dir-y)));\n    opacity: 0;\n    filter: blur(var(--digit-blur));\n  }\n  100% { transform: translate(0, 0); opacity: 1; filter: blur(0); }\n}\n.mot-t-digit-group { display: inline-flex; align-items: baseline; }\n.mot-t-digit { display: inline-block; white-space: pre; }\n.mot-t-digit-group.mot-is-animating .mot-t-digit { animation: mot-t-digit-pop-in var(--digit-dur) var(--digit-ease) both; }\n.mot-t-digit-group.mot-is-animating .mot-t-digit[data-stagger=\"1\"] { animation-delay: var(--digit-stagger); }\n.mot-t-digit-group.mot-is-animating .mot-t-digit[data-stagger=\"2\"] { animation-delay: calc(var(--digit-stagger) * 2); }\n.mot-t-digit-group.mot-is-animating .mot-t-digit[data-same] { animation: none; }\n\n/* Submit */\n.mot-submit {\n  height: 36px;\n  width: 100%;\n  border-radius: 40px;\n  background: var(--stage-accent);\n  color: var(--stage-on-accent);\n  box-shadow: var(--cta-shadow);\n  font-size: 13px;\n  line-height: 20px;\n  font-weight: 500;\n  padding: 0 12px;\n  overflow: hidden;\n  transition: transform var(--press-dur) var(--ease-smooth-out), background-color var(--duration-quick) var(--ease-out);\n}\n.mova-order .mot-submit { color: var(--stage-on-accent); }\n@media (hover: hover) and (pointer: fine) { .mot-submit:hover { background-image: linear-gradient(var(--cta-hover), var(--cta-hover)); } }\n.mot-submit:is(:active,.mot-is-pressed) { transform: scale(var(--press-scale)); }\n.mot-t-tab:is(:active,.mot-is-pressed) { transform: scale(var(--press-scale)); }\n\n.mot-t-text-swap {\n  display: inline-block;\n  transform: translateY(0);\n  filter: blur(0);\n  opacity: 1;\n  transition: transform var(--text-swap-dur) var(--text-swap-ease), filter var(--text-swap-dur) var(--text-swap-ease), opacity var(--text-swap-dur) var(--text-swap-ease);\n}\n.mot-t-text-swap.mot-is-exit { transform: translateY(calc(var(--text-swap-translate-y) * -1)); filter: blur(var(--text-swap-blur)); opacity: 0; }\n.mot-t-text-swap.mot-is-enter-start { transform: translateY(var(--text-swap-translate-y)); filter: blur(var(--text-swap-blur)); opacity: 0; transition: none; }\n\n/* Page side-by-side */\n.mot-t-page-slide { position: relative; display: grid; }\n.mot-t-page-slide .mot-t-page[data-page-id=\"1\"] { --t-page-from-x: calc(var(--page-slide-distance) * -1); }\n.mot-t-page-slide .mot-t-page[data-page-id=\"2\"] { --t-page-from-x: var(--page-slide-distance); }\n.mot-t-page-slide .mot-t-page {\n  grid-area: 1 / 1;\n  opacity: 0;\n  pointer-events: none;\n  transform: translateX(calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled)));\n  filter: blur(calc(var(--page-blur) * var(--page-exit-enabled)));\n  transition: opacity var(--page-fade-dur) var(--page-fade-ease), transform var(--page-slide-dur) var(--page-slide-ease), filter var(--page-slide-dur) var(--page-slide-ease);\n}\n.mot-t-page-slide[data-page=\"1\"] .mot-t-page[data-page-id=\"1\"],\n.mot-t-page-slide[data-page=\"2\"] .mot-t-page[data-page-id=\"2\"] {\n  opacity: 1;\n  pointer-events: auto;\n  transform: translateX(0);\n  filter: blur(0);\n  transition-delay: var(--page-stagger);\n}\n.mot-page-form { display: flex; flex-direction: column; gap: 16px; }\n.mot-page-done { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 16px; text-align: center; }\n.mot-done-head { display: flex; flex-direction: column; align-items: center; gap: 4px; }\n.mot-done-icon {\n  width: 48px; height: 48px; border-radius: 50%;\n  display: grid; place-items: center;\n  margin-bottom: 8px;\n  background: var(--badge-fill); color: var(--badge-ink);\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--badge-ink) 14%, transparent);\n  opacity: 0;\n  transform: scale(var(--done-pop-scale));\n  transition: opacity var(--done-pop-dur) var(--ease-smooth-out), transform var(--done-pop-dur) var(--ease-smooth-out);\n}\n.mot-t-page-slide[data-page=\"2\"] .mot-done-icon { opacity: 1; transform: scale(1); transition-delay: var(--page-slide-dur); }\n.mot-done-title { font-size: 16px; line-height: 22px; font-weight: 500; }\n.mot-done-meta { font-size: 12px; line-height: 16px; color: var(--stage-muted); }\n.mot-again {\n  height: 36px; width: 100%; border-radius: 40px;\n  background: var(--chip); color: var(--stage-fg);\n  font-size: 13px; line-height: 20px; font-weight: 500;\n  --press-scale: 0.97;\n  transition: transform var(--press-dur) var(--ease-smooth-out), background-color var(--duration-quick) var(--ease-out);\n}\n@media (hover: hover) and (pointer: fine) { .mot-again:hover { background: var(--chip-hover); } }\n.mot-again:is(:active,.mot-is-pressed) { background: var(--chip-press); transform: scale(var(--press-scale)); }\n\n/* Matrix dot loader */\n.mot-btn-loader { position: absolute; left: 16px; top: 50%; translate: 0 -50%; opacity: 0; transition: opacity var(--duration-quick) var(--ease-out); }\n.mot-submit.mot-is-loading .mot-btn-loader { opacity: 1; }\n.mot-submit { position: relative; }\n.mot-t-matrix { display: grid; grid-template-columns: repeat(4, 2px); grid-auto-rows: 2px; gap: 2px; }\n.mot-t-matrix i { display: block; background: var(--matrix-base); animation: mot-t-matrix-pulse var(--matrix-cycle) var(--matrix-ease) infinite; animation-delay: calc(var(--d, 0) * 1ms); }\n.mot-t-matrix i.mot-is-gap { visibility: hidden; animation: none; }\n@keyframes mot-t-matrix-pulse {\n  0%, 45%, 100% { background-color: var(--matrix-base); }\n  15% { background-color: var(--matrix-active); }\n}\n\n.mot-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n\n@media (prefers-reduced-motion: reduce) {\n  .mot-t-input { animation: none !important; transform: none !important; }\n  .mot-t-digit-group .mot-t-digit { animation: none !important; }\n  .mot-t-tabs-pill, .mot-t-tab { transition: none !important; }\n  .mot-t-text-swap { transition: none !important; }\n  .mot-t-page-slide .mot-t-page, .mot-done-icon { transition: none !important; }\n  .mot-t-matrix i { animation: none !important; }\n  .mot-again:is(:active,.mot-is-pressed) { transform: none; }\n  .mot-submit:is(:active,.mot-is-pressed), .mot-step:is(:active,.mot-is-pressed), .mot-t-tab:is(:active,.mot-is-pressed) { transform: none; }\n}\n/* Order type menu */\n.mova-order[data-theme=\"dark\"] { --menu-shadow: 0 1px 3px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.04), inset 0 0 0 1px rgba(196,196,196,.08); }\n.mot-type-anchor { position: relative; }\n.mot-box.mot-type-btn {\n  width: 136px;\n  justify-content: space-between;\n  padding: 0 10px 0 12px;\n  gap: 6px;\n  font-size: 13px;\n  line-height: 20px;\n  --press-scale: 0.97;\n  transition: box-shadow var(--duration-quick) var(--ease-out), transform var(--press-dur) var(--ease-smooth-out);\n}\n.mot-box.mot-type-btn:is(:active,.mot-is-pressed) { transform: scale(var(--press-scale)); }\n.mot-type-btn .mot-hi, .mot-type-btn [data-icon] { color: var(--stage-muted); flex: none; }\n.mot-type-btn-label { overflow: hidden; white-space: nowrap; }\n.mova-order .mot-box.mot-type-btn:focus-visible { box-shadow: 0 0 0 1px var(--stage-accent), 0 0 0 3px var(--ring-soft); }\n.mot-t-dropdown {\n  position: absolute;\n  top: 40px;\n  right: 0;\n  z-index: 5;\n  width: 168px;\n  box-sizing: border-box;\n  padding: 6px;\n  border-radius: 12px;\n  background: var(--stage-surface);\n  box-shadow: var(--menu-shadow);\n  transform-origin: top right;\n  transform: scale(var(--dropdown-pre-scale));\n  opacity: 0;\n  pointer-events: none;\n  transition: transform var(--dropdown-open-dur) var(--dropdown-ease), opacity var(--dropdown-open-dur) var(--dropdown-ease);\n  will-change: transform, opacity;\n}\n.mot-t-dropdown.mot-is-open { transform: scale(1); opacity: 1; pointer-events: auto; }\n.mot-t-dropdown.mot-is-closing {\n  transform: scale(var(--dropdown-closing-scale));\n  opacity: 0;\n  pointer-events: none;\n  transition: transform var(--dropdown-close-dur) var(--dropdown-ease), opacity var(--dropdown-close-dur) var(--dropdown-ease);\n}\n.mot-menu-item {\n  width: 100%;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 0 6px 0 8px;\n  border-radius: 8px;\n  font-size: 13px;\n  line-height: 20px;\n  text-align: left;\n  --press-scale: 0.97;\n  transition: background-color var(--duration-quick) var(--ease-out), transform var(--press-dur) var(--ease-smooth-out);\n}\n@media (hover: hover) and (pointer: fine) { .mot-menu-item:hover { background: var(--chip); } }\n.mot-menu-item:is(:active,.mot-is-pressed) { background: var(--chip-press); transform: scale(var(--press-scale)); }\n.mot-menu-item [data-icon], .mot-menu-item .mot-hi { color: var(--stage-muted); }\n\n/* Accordion expand */\n.mot-t-acc { margin: -4px -4px; }\n.mot-t-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--acc-collapse) var(--acc-ease); }\n.mot-t-acc[data-open=\"true\"] .mot-t-acc-panel { grid-template-rows: 1fr; transition: grid-template-rows var(--acc-expand) var(--acc-ease); }\n.mot-t-acc-panel-inner {\n  min-height: 0;\n  overflow: hidden;\n  opacity: 0;\n  filter: blur(2px);\n  transition: opacity var(--acc-collapse) var(--acc-ease), filter var(--acc-collapse) var(--acc-ease);\n}\n.mot-t-acc[data-open=\"true\"] .mot-t-acc-panel-inner {\n  opacity: 1;\n  filter: blur(0);\n  transition: opacity var(--acc-expand) var(--acc-ease), filter var(--acc-expand) var(--acc-ease);\n}\n.mot-t-acc-body { padding: 4px; }\n\n@media (prefers-reduced-motion: reduce) {\n  .mot-t-dropdown, .mot-box.mot-type-btn, .mot-menu-item { transition: none !important; }\n  .mot-box.mot-type-btn:is(:active,.mot-is-pressed), .mot-menu-item:is(:active,.mot-is-pressed) { transform: none; }\n  .mot-t-acc-panel, .mot-t-acc-panel-inner, .mot-t-acc-chevron { transition: none !important; }\n}\n\n/* Icons: Heroicons (outline), Copyright (c) Tailwind Labs, Inc. MIT License */\n.mot-hi-play{translate:1px 0}.mot-hi-heart{translate:0 1px}\n\n/* Touch press feedback stays local to this component. */\n.mova-order :is(button,[role=\"tab\"],[role=\"menuitemradio\"]){-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-touch-callout:none}\n\n.mova-order .mot-done-title{margin:0}\n.mova-order .mot-done-title:focus{outline:none;box-shadow:none}\n.mova-order button:disabled{cursor:default}\n.mova-order .mot-badge[data-negative=true]{--badge-fill:#fbe9e9;--badge-ink:#ad3c3c}\n.mova-order[data-theme=dark] .mot-badge[data-negative=true]{--badge-fill:#4c2b2b;--badge-ink:#ffaaaa}\n.mova-order .mot-submit-error{font-size:12px;line-height:16px;color:var(--err)}\n@media(prefers-reduced-motion:reduce){.mova-order *{animation:none!important;transition:none!important}.mova-order .mot-t-text-swap{transform:none;filter:none;opacity:1}}\n`;\n"
+}

package/registry/dia-text-reveal.json

@@ -1,7 +1,7 @@
 {
   "id": "dia-text-reveal",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "dia-text-reveal.tsx",
   "registryFile": "dia-text-reveal.json",
   "exports": [

package/registry/diamond-grid.json

@@ -1,7 +1,7 @@
 {
   "id": "diamond-grid",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "diamond-grid.tsx",
   "sourcePath": "ui/loading/diamond-grid.tsx",
   "registryFile": "diamond-grid.json",

package/registry/diamond-rotate-spring.json

@@ -1,7 +1,7 @@
 {
   "id": "diamond-rotate-spring",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "diamond-rotate-spring.tsx",
   "sourcePath": "ui/loading/diamond-rotate-spring.tsx",
   "registryFile": "diamond-rotate-spring.json",

package/registry/dislike-toggle.json

@@ -1,7 +1,7 @@
 {
   "id": "dislike-toggle",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "dislike-toggle.tsx",
   "registryFile": "dislike-toggle.json",
   "exports": [

package/registry/dither-book.json

@@ -1,7 +1,7 @@
 {
   "id": "dither-book",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "dither-book.tsx",
   "registryFile": "dither-book.json",
   "exports": [

package/registry/domino-cascade.json

@@ -1,7 +1,7 @@
 {
   "id": "domino-cascade",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "domino-cascade.tsx",
   "sourcePath": "components/css-animations/whimsical/WhimsicalVariations.tsx",
   "registryFile": "domino-cascade.json",

package/registry/dot-spinner.json

@@ -1,7 +1,7 @@
 {
   "id": "dot-spinner",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "dot-spinner.tsx",
   "sourcePath": "ui/loading/dot-spinner.tsx",
   "registryFile": "dot-spinner.json",

package/registry/dots-ring.json

@@ -1,7 +1,7 @@
 {
   "id": "dots-ring",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "dots-ring.tsx",
   "sourcePath": "ui/loading/dots-ring.tsx",
   "registryFile": "dots-ring.json",

package/registry/double-bounce-toggle.json

@@ -1,7 +1,7 @@
 {
   "id": "double-bounce-toggle",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "double-bounce-toggle.tsx",
   "registryFile": "double-bounce-toggle.json",
   "exports": [

package/registry/double-ring.json

@@ -1,7 +1,7 @@
 {
   "id": "double-ring",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "double-ring.tsx",
   "sourcePath": "ui/loading/double-ring.tsx",
   "registryFile": "double-ring.json",

package/registry/download-icons.json

@@ -1,7 +1,7 @@
 {
   "id": "download-icons",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "download-icons.tsx",
   "sourcePath": "components/css-animations/yui-components/YuiUiKit2.tsx",
   "registryFile": "download-icons.json",

package/registry/drop-dot.json

@@ -1,7 +1,7 @@
 {
   "id": "drop-dot",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "drop-dot.tsx",
   "sourcePath": "ui/loading/drop-dot.tsx",
   "registryFile": "drop-dot.json",

package/registry/drop-in-char.json

@@ -1,7 +1,7 @@
 {
   "id": "drop-in-char",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "drop-in-char.tsx",
   "registryFile": "drop-in-char.json",
   "exports": [

package/registry/droplet-squish.json

@@ -1,7 +1,7 @@
 {
   "id": "droplet-squish",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "droplet-squish.tsx",
   "sourcePath": "components/css-animations/whimsical/ConceptTrios3.tsx",
   "registryFile": "droplet-squish.json",

package/registry/dual-arc.json

@@ -1,7 +1,7 @@
 {
   "id": "dual-arc",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "dual-arc.tsx",
   "sourcePath": "ui/loading/dual-arc.tsx",
   "registryFile": "dual-arc.json",

package/registry/dual-magnet-dipole.json

@@ -1,7 +1,7 @@
 {
   "id": "dual-magnet-dipole",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "dual-magnet-dipole.tsx",
   "sourcePath": "components/css-animations/whimsical/RedesignedPhysicsTrios.tsx",
   "registryFile": "dual-magnet-dipole.json",

package/registry/dynamic-island.json

@@ -1,7 +1,7 @@
 {
   "id": "dynamic-island",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "dynamic-island.tsx",
   "sourcePath": "ui/loading/dynamic-island.tsx",
   "registryFile": "dynamic-island.json",

package/registry/elastic-bars.json

@@ -1,7 +1,7 @@
 {
   "id": "elastic-bars",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "elastic-bars.tsx",
   "sourcePath": "ui/loading/elastic-bars.tsx",
   "registryFile": "elastic-bars.json",

package/registry/elastic-square.json

@@ -1,7 +1,7 @@
 {
   "id": "elastic-square",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "elastic-square.tsx",
   "sourcePath": "ui/loading/elastic-square.tsx",
   "registryFile": "elastic-square.json",

package/registry/elastic-tag-snap.json

@@ -1,7 +1,7 @@
 {
   "id": "elastic-tag-snap",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "elastic-tag-snap.tsx",
   "sourcePath": "components/css-animations/whimsical/RedesignedPhysicsTrios.tsx",
   "registryFile": "elastic-tag-snap.json",

package/registry/error-shake.json

@@ -1,7 +1,7 @@
 {
   "id": "error-shake",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "error-shake.tsx",
   "registryFile": "error-shake.json",
   "exports": [

package/registry/expanding-cross.json

@@ -1,7 +1,7 @@
 {
   "id": "expanding-cross",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "expanding-cross.tsx",
   "sourcePath": "ui/loading/expanding-cross.tsx",
   "registryFile": "expanding-cross.json",

package/registry/expanding-icon-tabs.json

@@ -1,7 +1,7 @@
 {
   "id": "expanding-icon-tabs",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "expanding-icon-tabs.tsx",
   "sourcePath": "ui/patterns/expanding-icon-tabs.tsx",
   "registryFile": "expanding-icon-tabs.json",

package/registry/face-id-scan.json

@@ -1,7 +1,7 @@
 {
   "id": "face-id-scan",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "face-id-scan.tsx",
   "sourcePath": "ui/loading/face-id-scan.tsx",
   "registryFile": "face-id-scan.json",

package/registry/fade-arc.json

@@ -1,7 +1,7 @@
 {
   "id": "fade-arc",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "fade-arc.tsx",
   "sourcePath": "ui/loading/fade-arc.tsx",
   "registryFile": "fade-arc.json",

package/registry/fade-dots.json

@@ -1,7 +1,7 @@
 {
   "id": "fade-dots",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "fade-dots.tsx",
   "sourcePath": "ui/loading/fade-dots.tsx",
   "registryFile": "fade-dots.json",

package/registry/fade-down.json

@@ -1,7 +1,7 @@
 {
   "id": "fade-down",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "fade-down.tsx",
   "sourcePath": "ui/entrance/fade-down.tsx",
   "registryFile": "fade-down.json",

package/registry/fade-in-char.json

@@ -1,7 +1,7 @@
 {
   "id": "fade-in-char",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "fade-in-char.tsx",
   "registryFile": "fade-in-char.json",
   "exports": [

package/registry/fade-in-text.json

@@ -1,7 +1,7 @@
 {
   "id": "fade-in-text",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "fade-in-text.tsx",
   "registryFile": "fade-in-text.json",
   "exports": [

package/registry/fade-in-word.json

@@ -1,7 +1,7 @@
 {
   "id": "fade-in-word",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "fade-in-word.tsx",
   "registryFile": "fade-in-word.json",
   "exports": [

package/registry/fade-in.json

@@ -1,7 +1,7 @@
 {
   "id": "fade-in",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "fade-in.tsx",
   "sourcePath": "ui/entrance/fade-in.tsx",
   "registryFile": "fade-in.json",

package/registry/fade-up.json

@@ -1,7 +1,7 @@
 {
   "id": "fade-up",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "fade-up.tsx",
   "sourcePath": "ui/entrance/fade-up.tsx",
   "registryFile": "fade-up.json",

package/registry/file-upload-dropzone.json

@@ -1,7 +1,7 @@
 {
   "id": "file-upload-dropzone",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "file-upload-dropzone.tsx",
   "registryFile": "file-upload-dropzone.json",
   "exports": [

package/registry/filter-tag-pill.json

@@ -1,7 +1,7 @@
 {
   "id": "filter-tag-pill",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "filter-tag-pill.tsx",
   "sourcePath": "components/css-animations/yui-components/UiKitTrios.tsx",
   "registryFile": "filter-tag-pill.json",

package/registry/flip-square.json

@@ -1,7 +1,7 @@
 {
   "id": "flip-square",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "flip-square.tsx",
   "sourcePath": "ui/loading/flip-square.tsx",
   "registryFile": "flip-square.json",

package/registry/flip-x-char.json

@@ -1,7 +1,7 @@
 {
   "id": "flip-x-char",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "flip-x-char.tsx",
   "registryFile": "flip-x-char.json",
   "exports": [

package/registry/flip-y-char.json

@@ -1,7 +1,7 @@
 {
   "id": "flip-y-char",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "flip-y-char.tsx",
   "registryFile": "flip-y-char.json",
   "exports": [

package/registry/float-char.json

@@ -1,7 +1,7 @@
 {
   "id": "float-char",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "float-char.tsx",
   "registryFile": "float-char.json",
   "exports": [

package/registry/float-word.json

@@ -1,7 +1,7 @@
 {
   "id": "float-word",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "float-word.tsx",
   "registryFile": "float-word.json",
   "exports": [

package/registry/floating-diamonds.json

@@ -1,7 +1,7 @@
 {
   "id": "floating-diamonds",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "floating-diamonds.tsx",
   "sourcePath": "ui/loading/floating-diamonds.tsx",
   "registryFile": "floating-diamonds.json",

package/registry/floating-label-input.json

@@ -1,7 +1,7 @@
 {
   "id": "floating-label-input",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "floating-label-input.tsx",
   "registryFile": "floating-label-input.json",
   "exports": [