@adecore/ui 0.53.3 → 0.54.0

package/dist/Banner.d.ts

@@ -1,5 +1,5 @@
-import type { ReactNode, Ref } from 'react';
 import type { LucideIcon } from 'lucide-react';
+import type { ReactNode, Ref } from 'react';
 export type BannerTone = 'attention' | 'error' | 'neutral';
 export interface BannerProps {
     icon: LucideIcon;

package/dist/ButtonGroup.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
 /* Icon buttons that belong together sit 1px apart; groups keep the wider gap of their container. */
 export function ButtonGroup(t0) {
   const $ = _c(14);

package/dist/Checkbox.js

@@ -1,7 +1,7 @@
 import { c as _c } from "react/compiler-runtime";
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
 import clsx from 'clsx';
 import { Check, Minus } from 'lucide-react';
-import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
 import { Icon } from "./Icon.js";
 /* Picked or not, as one item out of a list or an option that waits for a Save button. */
 import { jsx as _jsx } from "react/jsx-runtime";

package/dist/ChoiceCards.d.ts

@@ -1,5 +1,5 @@
-import { type ReactNode, type Ref } from 'react';
 import type { LucideIcon } from 'lucide-react';
+import { type ReactNode, type Ref } from 'react';
 export interface Choice<Value extends string | number> {
     value: Value;
     title: string;

package/dist/ChoiceCards.js

@@ -1,8 +1,8 @@
 import { c as _c } from "react/compiler-runtime";
-import { Fragment, useId } from 'react';
-import clsx from 'clsx';
 import { Radio } from '@base-ui/react/radio';
 import { RadioGroup } from '@base-ui/react/radio-group';
+import clsx from 'clsx';
+import { Fragment, useId } from 'react';
 import { Icon } from "./Icon.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function ChoiceCard(t0) {

package/dist/CloseButton.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import { X } from 'lucide-react';
 import { Dialog } from '@base-ui/react/dialog';
+import { X } from 'lucide-react';
 import { IconButton } from "./IconButton.js";
 /* The close button in the header of every panel and dialog. In a dialog it is that dialog's own close part. */
 import { jsx as _jsx } from "react/jsx-runtime";

package/dist/ColorSwatch.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentProps } from 'react';
 import { useRender } from '@base-ui/react/use-render';
+import type { ComponentProps } from 'react';
 declare const PICKED_RING: {
     readonly surface: 'ring-2 ring-accent ring-offset-2 ring-offset-surface';
     readonly popup: 'ring-2 ring-accent ring-offset-1 ring-offset-surface-raised';

package/dist/ColorSwatch.js

@@ -1,7 +1,7 @@
 import { c as _c } from "react/compiler-runtime";
+import { useRender } from '@base-ui/react/use-render';
 import clsx from 'clsx';
 import { Check } from 'lucide-react';
-import { useRender } from '@base-ui/react/use-render';
 import { Icon } from "./Icon.js";
 /* `focus-ring` for the swatch that is a menu item rather than a button, which the keyboard reaches all the same. */
 import { jsx as _jsx } from "react/jsx-runtime";

package/dist/ColorWheelPicker.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import { useEffect, useId, useRef, useState } from 'react';
 import { ChevronDown } from 'lucide-react';
+import { useEffect, useId, useRef, useState } from 'react';
 import { ColorSwatch } from "./ColorSwatch.js";
 import { Icon } from "./Icon.js";
 import { PopoverPopup, PopoverRoot, PopoverTrigger } from "./popover/parts.js";

package/dist/CopyButton.js

@@ -1,7 +1,7 @@
 import { c as _c } from "react/compiler-runtime";
+import { Check, Copy } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Check, Copy } from 'lucide-react';
 import { Button } from "./Button.js";
 import { copyText } from './clipboard.js';
 import { Icon } from "./Icon.js";

package/dist/DockShell.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import { useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
+import { useEffect, useRef, useState } from 'react';
 import { Surface } from "./Surface.js";
 /* How close to the bottom of the window the pointer has to come before a hidden dock slides back. */
 import { jsx as _jsx } from "react/jsx-runtime";

package/dist/EmptyState.d.ts

@@ -1,5 +1,5 @@
-import { type ReactElement, type ReactNode, type Ref } from 'react';
 import type { LucideIcon } from 'lucide-react';
+import { type ReactElement, type ReactNode, type Ref } from 'react';
 export interface EmptyStateProps {
     icon?: LucideIcon | ReactElement<{
         size?: number;

package/dist/EmptyState.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import { cloneElement, isValidElement } from 'react';
 import clsx from 'clsx';
+import { cloneElement, isValidElement } from 'react';
 import { Icon } from "./Icon.js";
 import { Spinner } from "./Spinner.js";
 // One size in a panel, a card and a dialog alike, so no caller picks its own.

package/dist/ErrorBoundary.js

@@ -1,13 +1,14 @@
 import { c as _c } from "react/compiler-runtime";
-import { Component } from 'react';
 import clsx from 'clsx';
 import { RotateCw, TriangleAlert } from 'lucide-react';
+import { Component } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from "./Button.js";
 import { ButtonGroup } from "./ButtonGroup.js";
 import { CopyButton } from "./CopyButton.js";
 import { errorMessageOf, errorReport, shouldReset } from './error-boundary.js';
 import { Icon } from "./Icon.js";
+import { ScrollArea } from "./ScrollArea.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CLEAR = {
   error: null,
@@ -16,7 +17,7 @@ const CLEAR = {
 };
 /* A function component, so the words come from the i18next instance the app renders with. */
 function ErrorFallback(t0) {
-  const $ = _c(46);
+  const $ = _c(48);
   const {
     label,
     error,
@@ -29,101 +30,108 @@ function ErrorFallback(t0) {
   const {
     t
   } = useTranslation("ui");
-  const t1 = compact ? "p-3" : "p-6";
-  let t2;
-  if ($[0] !== className || $[1] !== t1) {
-    t2 = clsx("grid place-items-center overflow-auto bg-surface", t1, className);
+  let t1;
+  if ($[0] !== className) {
+    t1 = clsx("bg-surface", className);
     $[0] = className;
     $[1] = t1;
-    $[2] = t2;
   } else {
-    t2 = $[2];
+    t1 = $[1];
   }
-  const t3 = compact ? "gap-1" : "gap-2";
-  let t4;
-  if ($[3] !== t3) {
-    t4 = clsx("flex max-w-[360px] flex-col items-center text-center", t3);
+  const t2 = compact ? "p-3" : "p-6";
+  let t3;
+  if ($[2] !== t2) {
+    t3 = clsx("grid place-items-center", t2);
+    $[2] = t2;
     $[3] = t3;
-    $[4] = t4;
   } else {
-    t4 = $[4];
+    t3 = $[3];
   }
+  const t4 = compact ? "gap-1" : "gap-2";
   let t5;
-  if ($[5] !== compact) {
-    t5 = !compact && /*#__PURE__*/_jsx(Icon, {
+  if ($[4] !== t4) {
+    t5 = clsx("flex max-w-[360px] flex-col items-center text-center", t4);
+    $[4] = t4;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  let t6;
+  if ($[6] !== compact) {
+    t6 = !compact && /*#__PURE__*/_jsx(Icon, {
       icon: TriangleAlert,
       size: 20,
       className: "text-status-error"
     });
-    $[5] = compact;
-    $[6] = t5;
+    $[6] = compact;
+    $[7] = t6;
   } else {
-    t5 = $[6];
+    t6 = $[7];
   }
-  let t6;
-  if ($[7] !== label) {
-    t6 = /*#__PURE__*/_jsx("p", {
+  let t7;
+  if ($[8] !== label) {
+    t7 = /*#__PURE__*/_jsx("p", {
       className: "text-sm font-medium text-text",
       children: label
     });
-    $[7] = label;
-    $[8] = t6;
+    $[8] = label;
+    $[9] = t7;
   } else {
-    t6 = $[8];
+    t7 = $[9];
   }
-  let t7;
-  if ($[9] !== error) {
-    t7 = errorMessageOf(error);
-    $[9] = error;
-    $[10] = t7;
+  let t8;
+  if ($[10] !== error) {
+    t8 = errorMessageOf(error);
+    $[10] = error;
+    $[11] = t8;
   } else {
-    t7 = $[10];
+    t8 = $[11];
   }
-  let t8;
-  if ($[11] !== t7) {
-    t8 = /*#__PURE__*/_jsx("p", {
+  let t9;
+  if ($[12] !== t8) {
+    t9 = /*#__PURE__*/_jsx("p", {
       className: "line-clamp-4 text-xs break-words text-text-muted",
-      children: t7
+      children: t8
     });
-    $[11] = t7;
     $[12] = t8;
-  } else {
-    t8 = $[12];
-  }
-  const t9 = compact ? "mt-1" : "mt-2";
-  let t10;
-  if ($[13] !== t9) {
-    t10 = clsx("flex items-center gap-2", t9);
     $[13] = t9;
-    $[14] = t10;
   } else {
-    t10 = $[14];
+    t9 = $[13];
   }
+  const t10 = compact ? "mt-1" : "mt-2";
   let t11;
-  if ($[15] !== t) {
-    t11 = t("action.retry");
-    $[15] = t;
-    $[16] = t11;
+  if ($[14] !== t10) {
+    t11 = clsx("flex items-center gap-2", t10);
+    $[14] = t10;
+    $[15] = t11;
   } else {
-    t11 = $[16];
+    t11 = $[15];
   }
   let t12;
-  if ($[17] !== onRetry || $[18] !== t11) {
-    t12 = /*#__PURE__*/_jsx(Button, {
+  if ($[16] !== t) {
+    t12 = t("action.retry");
+    $[16] = t;
+    $[17] = t12;
+  } else {
+    t12 = $[17];
+  }
+  let t13;
+  if ($[18] !== onRetry || $[19] !== t12) {
+    t13 = /*#__PURE__*/_jsx(Button, {
       variant: "secondary",
       size: "sm",
       onClick: onRetry,
-      children: t11
+      children: t12
     });
-    $[17] = onRetry;
-    $[18] = t11;
+    $[18] = onRetry;
     $[19] = t12;
+    $[20] = t13;
   } else {
-    t12 = $[19];
+    t13 = $[20];
   }
-  let t13;
-  if ($[20] !== reload || $[21] !== t) {
-    t13 = reload && /*#__PURE__*/_jsxs(Button, {
+  let t14;
+  if ($[21] !== reload || $[22] !== t) {
+    t14 = reload && /*#__PURE__*/_jsxs(Button, {
       variant: "secondary",
       size: "sm",
       onClick: _temp,
@@ -132,88 +140,90 @@ function ErrorFallback(t0) {
         size: 14
       }), t("action.reload")]
     });
-    $[20] = reload;
-    $[21] = t;
-    $[22] = t13;
+    $[21] = reload;
+    $[22] = t;
+    $[23] = t14;
   } else {
-    t13 = $[22];
-  }
-  let t14;
-  if ($[23] !== componentStack || $[24] !== error || $[25] !== label) {
-    t14 = errorReport(label, error, componentStack);
-    $[23] = componentStack;
-    $[24] = error;
-    $[25] = label;
-    $[26] = t14;
-  } else {
-    t14 = $[26];
+    t14 = $[23];
   }
   let t15;
-  if ($[27] !== t) {
-    t15 = t("action.copyError");
-    $[27] = t;
-    $[28] = t15;
+  if ($[24] !== componentStack || $[25] !== error || $[26] !== label) {
+    t15 = errorReport(label, error, componentStack);
+    $[24] = componentStack;
+    $[25] = error;
+    $[26] = label;
+    $[27] = t15;
   } else {
-    t15 = $[28];
+    t15 = $[27];
   }
   let t16;
-  if ($[29] !== t14 || $[30] !== t15) {
-    t16 = /*#__PURE__*/_jsx(ButtonGroup, {
+  if ($[28] !== t) {
+    t16 = t("action.copyError");
+    $[28] = t;
+    $[29] = t16;
+  } else {
+    t16 = $[29];
+  }
+  let t17;
+  if ($[30] !== t15 || $[31] !== t16) {
+    t17 = /*#__PURE__*/_jsx(ButtonGroup, {
       children: /*#__PURE__*/_jsx(CopyButton, {
-        text: t14,
-        label: t15,
+        text: t15,
+        label: t16,
         size: "sm"
       })
     });
-    $[29] = t14;
     $[30] = t15;
     $[31] = t16;
+    $[32] = t17;
   } else {
-    t16 = $[31];
+    t17 = $[32];
   }
-  let t17;
-  if ($[32] !== t10 || $[33] !== t12 || $[34] !== t13 || $[35] !== t16) {
-    t17 = /*#__PURE__*/_jsxs("div", {
-      className: t10,
-      children: [t12, t13, t16]
+  let t18;
+  if ($[33] !== t11 || $[34] !== t13 || $[35] !== t14 || $[36] !== t17) {
+    t18 = /*#__PURE__*/_jsxs("div", {
+      className: t11,
+      children: [t13, t14, t17]
     });
-    $[32] = t10;
-    $[33] = t12;
+    $[33] = t11;
     $[34] = t13;
-    $[35] = t16;
+    $[35] = t14;
     $[36] = t17;
+    $[37] = t18;
   } else {
-    t17 = $[36];
+    t18 = $[37];
   }
-  let t18;
-  if ($[37] !== t17 || $[38] !== t4 || $[39] !== t5 || $[40] !== t6 || $[41] !== t8) {
-    t18 = /*#__PURE__*/_jsxs("div", {
-      className: t4,
-      children: [t5, t6, t8, t17]
+  let t19;
+  if ($[38] !== t18 || $[39] !== t5 || $[40] !== t6 || $[41] !== t7 || $[42] !== t9) {
+    t19 = /*#__PURE__*/_jsxs("div", {
+      className: t5,
+      children: [t6, t7, t9, t18]
     });
-    $[37] = t17;
-    $[38] = t4;
+    $[38] = t18;
     $[39] = t5;
     $[40] = t6;
-    $[41] = t8;
-    $[42] = t18;
+    $[41] = t7;
+    $[42] = t9;
+    $[43] = t19;
   } else {
-    t18 = $[42];
+    t19 = $[43];
   }
-  let t19;
-  if ($[43] !== t18 || $[44] !== t2) {
-    t19 = /*#__PURE__*/_jsx("div", {
+  let t20;
+  if ($[44] !== t1 || $[45] !== t19 || $[46] !== t3) {
+    t20 = /*#__PURE__*/_jsx(ScrollArea, {
       role: "alert",
-      className: t2,
-      children: t18
+      className: t1,
+      viewportClassName: t3,
+      children: t19
     });
-    $[43] = t18;
-    $[44] = t2;
+    $[44] = t1;
     $[45] = t19;
+    $[46] = t3;
+    $[47] = t20;
   } else {
-    t19 = $[45];
+    t20 = $[47];
   }
-  return t19;
+  return t20;
 }
 /* Without one React unmounts the whole tree, and whatever lives in it (an embedded page, a running terminal) goes down with it. */
 function _temp() {

package/dist/Field.d.ts

@@ -1,5 +1,5 @@
-import { type ReactNode, type Ref } from 'react';
 import { useRender } from '@base-ui/react/use-render';
+import { type ReactNode, type Ref } from 'react';
 export type FieldHintProps = useRender.ComponentProps<'p'>;
 export declare function FieldHint({ render, className, ref, ...props }: FieldHintProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type FormErrorProps = useRender.ComponentProps<'p'>;

package/dist/Field.js

@@ -1,7 +1,7 @@
 import { c as _c } from "react/compiler-runtime";
-import { useId } from 'react';
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
+import { useId } from 'react';
 import { FieldContext } from './field-context.js';
 import { SectionLabel } from "./SectionLabel.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/FileIcon.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import { useInsertionEffect } from 'react';
 import clsx from 'clsx';
+import { useInsertionEffect } from 'react';
 import { fileIconFor, fileIconOverrideFor, mountFileIconSprite } from './file-icon.js';
 /*
  * The one place the library steps outside Lucide. The glyphs are Seti's, and so are their colors: a

package/dist/Icon.d.ts

@@ -1,5 +1,5 @@
-import type { Ref } from 'react';
 import type { LucideIcon } from 'lucide-react';
+import type { Ref } from 'react';
 export interface IconProps {
     icon: LucideIcon;
     size?: number;

package/dist/IconButton.d.ts

@@ -1,9 +1,9 @@
-import type { ComponentProps, ReactNode } from 'react';
-import type { LucideIcon } from 'lucide-react';
 import { useRender } from '@base-ui/react/use-render';
+import type { LucideIcon } from 'lucide-react';
+import type { ComponentProps, ReactNode } from 'react';
+import { type IconButtonSize } from './icon-button-size.ts';
 import type { Shortcut } from './shortcut.ts';
 import { type TooltipSide } from './Tooltip.tsx';
-import { type IconButtonSize } from './icon-button-size.ts';
 export type { IconButtonSize };
 export interface IconButtonProps extends Omit<ComponentProps<'button'>, 'children'> {
     icon?: LucideIcon;

package/dist/IconButton.js

@@ -1,10 +1,10 @@
 import { c as _c } from "react/compiler-runtime";
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
+import { ICON_BUTTON_CLASS, ICON_BUTTON_ICON_SIZE } from './icon-button-size.js';
 import { Icon } from "./Icon.js";
 import { Spinner } from "./Spinner.js";
 import { Tooltip } from "./Tooltip.js";
-import { ICON_BUTTON_CLASS, ICON_BUTTON_ICON_SIZE } from './icon-button-size.js';
 /* The one place the icon inside an icon button is sized. */
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export function IconButton(t0) {

package/dist/IconPicker.js

@@ -1,15 +1,16 @@
 import { c as _c } from "react/compiler-runtime";
-import { useId, useLayoutEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { Ban, ChevronDown, Search, X } from 'lucide-react';
+import { useId, useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from "./Button.js";
 import { EmptyState } from "./EmptyState.js";
 import { formatNumber } from './format/number.js';
+import { cellForKey, escapeClearsSearch, filterSections, isGrouped, sectionsOf, tabStopOf } from './icon-picker.js';
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
-import { cellForKey, escapeClearsSearch, filterSections, isGrouped, sectionsOf, tabStopOf } from './icon-picker.js';
 import { PopoverPopup, PopoverRoot, PopoverTrigger } from "./popover/parts.js";
+import { ScrollArea } from "./ScrollArea.js";
 import { SectionLabel } from "./SectionLabel.js";
 import { Tooltip } from "./Tooltip.js";
 /* A row of cells is 28 high with a gap of 4. Under a heading of 28 the last row keeps 8 below it; without headings the grid has 6 above as well. */
@@ -364,7 +365,7 @@ function _temp(section) {
   return section.icons;
 }
 function IconPickerPanel(t0) {
-  const $ = _c(34);
+  const $ = _c(35);
   const {
     id,
     name,
@@ -479,12 +480,13 @@ function IconPickerPanel(t0) {
   } else {
     t5 = $[10];
   }
+  const T0 = ScrollArea;
   const t6 = `${id}-grid`;
   const t7 = "radiogroup";
   const t8 = headed ? "scroll-pt-7" : "px-1.5 pt-1.5 pb-2";
   let t9;
   if ($[11] !== t8) {
-    t9 = clsx("relative overflow-y-auto overscroll-contain", t8);
+    t9 = clsx("relative overscroll-contain", t8);
     $[11] = t8;
     $[12] = t9;
   } else {
@@ -555,31 +557,32 @@ function IconPickerPanel(t0) {
     }, section_0.id);
   });
   let t14;
-  if ($[16] !== moveFocus || $[17] !== name || $[18] !== t10 || $[19] !== t11 || $[20] !== t12 || $[21] !== t6 || $[22] !== t9) {
-    t14 = /*#__PURE__*/_jsx("div", {
-      ref: area,
+  if ($[16] !== T0 || $[17] !== moveFocus || $[18] !== name || $[19] !== t10 || $[20] !== t11 || $[21] !== t12 || $[22] !== t6 || $[23] !== t9) {
+    t14 = /*#__PURE__*/_jsx(T0, {
+      viewportRef: area,
       id: t6,
       role: t7,
       "aria-label": name,
-      className: t9,
+      viewportClassName: t9,
       style: t10,
       onScroll: t11,
       onKeyDown: moveFocus,
       children: t12
     });
-    $[16] = moveFocus;
-    $[17] = name;
-    $[18] = t10;
-    $[19] = t11;
-    $[20] = t12;
-    $[21] = t6;
-    $[22] = t9;
-    $[23] = t14;
-  } else {
-    t14 = $[23];
+    $[16] = T0;
+    $[17] = moveFocus;
+    $[18] = name;
+    $[19] = t10;
+    $[20] = t11;
+    $[21] = t12;
+    $[22] = t6;
+    $[23] = t9;
+    $[24] = t14;
+  } else {
+    t14 = $[24];
   }
   let t15;
-  if ($[24] !== disabled || $[25] !== onClear || $[26] !== t || $[27] !== value) {
+  if ($[25] !== disabled || $[26] !== onClear || $[27] !== t || $[28] !== value) {
     t15 = onClear && /*#__PURE__*/_jsx("div", {
       className: "flex border-t border-border p-1",
       children: /*#__PURE__*/_jsxs(Button, {
@@ -592,27 +595,27 @@ function IconPickerPanel(t0) {
         }), t("iconPicker.none")]
       })
     });
-    $[24] = disabled;
-    $[25] = onClear;
-    $[26] = t;
-    $[27] = value;
-    $[28] = t15;
+    $[25] = disabled;
+    $[26] = onClear;
+    $[27] = t;
+    $[28] = value;
+    $[29] = t15;
   } else {
-    t15 = $[28];
+    t15 = $[29];
   }
   let t16;
-  if ($[29] !== clearSearchFirst || $[30] !== t14 || $[31] !== t15 || $[32] !== t5) {
+  if ($[30] !== clearSearchFirst || $[31] !== t14 || $[32] !== t15 || $[33] !== t5) {
     t16 = /*#__PURE__*/_jsxs("div", {
       onKeyDown: clearSearchFirst,
       children: [t5, t14, t15]
     });
-    $[29] = clearSearchFirst;
-    $[30] = t14;
-    $[31] = t15;
-    $[32] = t5;
-    $[33] = t16;
+    $[30] = clearSearchFirst;
+    $[31] = t14;
+    $[32] = t15;
+    $[33] = t5;
+    $[34] = t16;
   } else {
-    t16 = $[33];
+    t16 = $[34];
   }
   return t16;
 }

package/dist/Input.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentProps, ReactNode } from 'react';
 import type { LucideIcon } from 'lucide-react';
+import type { ComponentProps, ReactNode } from 'react';
 export interface InputProps extends Omit<ComponentProps<'input'>, 'size'> {
     size?: 'md' | 'sm';
     mono?: boolean;