@drawbridge/components 0.0.78 → 0.1.0

package/dist/input-name.js

@@ -1,6 +1,8 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -14,293 +16,24 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// components/input-name.js
 var input_name_exports = {};
 __export(input_name_exports, {
   default: () => input_name_default
 });
 module.exports = __toCommonJS(input_name_exports);
-
-// components/input-group.js
-var import_react2 = require("react");
-
-// components/input-group-error.js
-var import_react = require("react");
-
-// components/icons/warning.js
 var import_jsx_runtime = require("react/jsx-runtime");
-var Warning = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  "svg",
-  {
-    ...{
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 1.5,
-      viewBox: "0 0 24 24",
-      ...props
-    },
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "path",
-      {
-        ...{
-          d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      }
-    )
-  }
-);
-var warning_default = Warning;
-
-// components/input-group-error.js
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var InputGroupError = ({
-  className,
-  error,
-  label,
-  message,
-  style = {}
-}) => {
-  var _a, _b, _c, _d;
-  if (!(error || message)) {
-    return null;
-  }
-  const classes = [
-    "flex items-center justify-start space-x-2 py-1 rounded text-sm"
-  ];
-  if (error) {
-    classes.push("px-1.5");
-  }
-  if (className) {
-    classes.push(className);
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    "p",
-    {
-      ...{
-        className: classes.join(" "),
-        ...error && {
-          style: {
-            backgroundColor: (((_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb) || "rgb( 0, 0, 0 )").replace(")", ",.1)"),
-            color: ((_d = (_c = style == null ? void 0 : style.text) == null ? void 0 : _c.color) == null ? void 0 : _d.rgb) || "rgb( 0, 0, 0 )"
-          }
-        }
-      },
-      children: [
-        error && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            warning_default,
-            {
-              ...{
-                // shrink-0: a long error ("Expected your CNAME record to be …
-                // but found …") wraps, and a flex item with no floor gets
-                // squeezed to a sliver beside it.
-                className: "w-4 h-4 shrink-0",
-                "aria-hidden": true
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-            "span",
-            {
-              ...{
-                className: "text-[0px] opacity-0 w-0 h-0 absolute"
-              },
-              children: [
-                label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
-                  label,
-                  ": "
-                ] }) : null,
-                error
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "span",
-          {
-            ...{
-              ...error && {
-                "aria-hidden": true
-              }
-            },
-            children: error || message
-          }
-        )
-      ]
-    }
-  );
-};
-var input_group_error_default = InputGroupError;
-
-// components/styles.js
-var WHITE = "rgb( 255, 255, 255 )";
-var BLACK = "rgb( 0, 0, 0 )";
-var bgColor = (style) => {
-  var _a, _b;
-  return ((_b = (_a = style == null ? void 0 : style.background) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb) || WHITE;
-};
-var textColor = (style) => {
-  var _a, _b;
-  return ((_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb) || BLACK;
-};
-var inputStyle = (style) => {
-  var _a;
-  return {
-    backgroundColor: bgColor(style),
-    borderColor: textColor(style),
-    borderRadius: ((_a = style == null ? void 0 : style.input) == null ? void 0 : _a.radius) != null ? style.input.radius / 4 + "px" : void 0,
-    color: textColor(style)
-  };
-};
-
-// components/input-group.js
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Addon = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-  "span",
-  {
-    ...{
-      className: typeof children === "string" ? "flex items-center shrink-0 px-3 font-mono text-sm opacity-60 whitespace-nowrap select-none" : "flex items-center shrink-0 px-2"
-    },
-    children
-  }
-);
-var InputGroup = ({
-  after,
-  before,
-  className,
-  error,
-  input,
-  label,
-  message,
-  style = {},
-  ...rest
-}) => {
-  const generated = (0, import_react2.useId)();
-  const id = (0, import_react2.isValidElement)(input) ? input.props.id || generated : generated;
-  const named = (0, import_react2.isValidElement)(input) && !input.props.id ? (0, import_react2.cloneElement)(input, { id }) : input;
-  const addons = after != null || before != null;
-  const control = addons && (0, import_react2.isValidElement)(named) ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "div",
-    {
-      ...{
-        className: "input flex items-center overflow-hidden",
-        style: {
-          ...inputStyle(style),
-          // Inline, not `p-0`: see InputNumber — share's unlayered `.input`
-          // padding beats a layered utility, an inline style beats both.
-          padding: 0
-        }
-      },
-      children: [
-        before != null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Addon, { children: before }),
-        (0, import_react2.cloneElement)(named, {
-          className: [named.props.className, "!border-0 !rounded-none !ring-0 !shadow-none flex-1 min-w-0"].filter(Boolean).join(" ")
-        }),
-        after != null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Addon, { children: after })
-      ]
-    }
-  ) : named;
-  const classes = [
-    "input-group"
-  ];
-  if (className) {
-    classes.push(className);
-  }
-  if (error) {
-    classes.push("error");
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "div",
-    {
-      ...{
-        className: classes.join(" "),
-        "aria-live": "polite",
-        ...(rest == null ? void 0 : rest["data-guide"]) && {
-          "data-guide": rest["data-guide"]
-        }
-      },
-      children: [
-        label ? (
-          // A real <label> (not a bare <span>) so the field name is announced by
-          // screen readers, clicking the text focuses the control, and
-          // getByLabel()/role queries can find it. The association comes from
-          // `htmlFor`, never from the wrapping — see the note above the id.
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-            "label",
-            {
-              ...{
-                className: "space-y-2 block",
-                htmlFor: id
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  "span",
-                  {
-                    ...{
-                      className: "block"
-                    },
-                    children: label
-                  }
-                ),
-                control
-              ]
-            }
-          )
-        ) : control,
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          input_group_error_default,
-          {
-            ...{
-              error,
-              label,
-              message,
-              style
-            }
-          }
-        )
-      ]
-    }
-  );
-};
-var input_group_default = InputGroup;
-
-// components/input-text.js
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var InputText = ({
-  className,
-  max,
-  onChange,
-  style,
-  value,
-  ...rest
-}) => {
-  const classes = ["input"];
-  if (className) {
-    classes.push(className);
-  }
-  ;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "input",
-    {
-      ...{
-        ...rest,
-        className: classes.join(" "),
-        onChange: ({ target }) => onChange(target.value),
-        style: inputStyle(style),
-        value
-      }
-    }
-  );
-};
-var input_text_default = InputText;
-
-// components/input-name.js
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var InputName = ({
+var import_input_group = __toESM(require("./input-group"));
+var import_input_text = __toESM(require("./input-text"));
+const InputName = ({
   error,
   onChange,
   settings,
@@ -309,13 +42,13 @@ var InputName = ({
 }) => {
   var _a, _b, _c;
   const inputs = {
-    first: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      input_group_default,
+    first: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_input_group.default,
       {
         ...{
           error: (_a = error == null ? void 0 : error.first) == null ? void 0 : _a.message,
-          input: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            input_text_default,
+          input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_input_text.default,
             {
               ...{
                 "aria-label": "First Name",
@@ -333,13 +66,13 @@ var InputName = ({
         }
       }
     ),
-    last: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      input_group_default,
+    last: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_input_group.default,
       {
         ...{
           error: (_b = error == null ? void 0 : error.last) == null ? void 0 : _b.message,
-          input: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            input_text_default,
+          input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_input_text.default,
             {
               ...{
                 "aria-label": "Last Name",
@@ -357,13 +90,13 @@ var InputName = ({
         }
       }
     ),
-    name: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      input_group_default,
+    name: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_input_group.default,
       {
         ...{
           error: (_c = error == null ? void 0 : error.name) == null ? void 0 : _c.message,
-          input: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            input_text_default,
+          input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_input_text.default,
             {
               ...{
                 onChange: (name) => onChange({
@@ -381,13 +114,13 @@ var InputName = ({
       }
     )
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       ...{
         className: "flex flex-col space-y-4"
       },
-      children: (settings.capture || []).map((input, key) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      children: (settings.capture || []).map((input, key) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
         {
           ...{

package/dist/input-name.mjs

@@ -1,16 +1,7 @@
-import {
-  input_text_default
-} from "./chunk-Y466XTIK.mjs";
-import {
-  input_group_default
-} from "./chunk-WUZE3BIA.mjs";
-import "./chunk-KSCQQUFC.mjs";
-import "./chunk-Q3UIVGPQ.mjs";
-import "./chunk-6F23WKP2.mjs";
-
-// components/input-name.js
 import { jsx } from "react/jsx-runtime";
-var InputName = ({
+import InputGroup from "./input-group";
+import InputText from "./input-text";
+const InputName = ({
   error,
   onChange,
   settings,
@@ -20,12 +11,12 @@ var InputName = ({
   var _a, _b, _c;
   const inputs = {
     first: /* @__PURE__ */ jsx(
-      input_group_default,
+      InputGroup,
       {
         ...{
           error: (_a = error == null ? void 0 : error.first) == null ? void 0 : _a.message,
           input: /* @__PURE__ */ jsx(
-            input_text_default,
+            InputText,
             {
               ...{
                 "aria-label": "First Name",
@@ -44,12 +35,12 @@ var InputName = ({
       }
     ),
     last: /* @__PURE__ */ jsx(
-      input_group_default,
+      InputGroup,
       {
         ...{
           error: (_b = error == null ? void 0 : error.last) == null ? void 0 : _b.message,
           input: /* @__PURE__ */ jsx(
-            input_text_default,
+            InputText,
             {
               ...{
                 "aria-label": "Last Name",
@@ -68,12 +59,12 @@ var InputName = ({
       }
     ),
     name: /* @__PURE__ */ jsx(
-      input_group_default,
+      InputGroup,
       {
         ...{
           error: (_c = error == null ? void 0 : error.name) == null ? void 0 : _c.message,
           input: /* @__PURE__ */ jsx(
-            input_text_default,
+            InputText,
             {
               ...{
                 onChange: (name) => onChange({

package/dist/input-number.js

@@ -1,6 +1,8 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -14,9 +16,15 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// components/input-number.js
 var input_number_exports = {};
 __export(input_number_exports, {
   accepts: () => accepts,
@@ -24,91 +32,21 @@ __export(input_number_exports, {
   emit: () => emit
 });
 module.exports = __toCommonJS(input_number_exports);
-
-// components/icons/minus.js
 var import_jsx_runtime = require("react/jsx-runtime");
-var Minus = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  "svg",
-  {
-    ...{
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 1.5,
-      viewBox: "0 0 24 24",
-      ...props
-    },
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "path",
-      {
-        ...{
-          d: "M5 12h14",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      }
-    )
-  }
-);
-var minus_default = Minus;
-
-// components/icons/plus.js
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var Plus = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-  "svg",
-  {
-    ...{
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 1.5,
-      viewBox: "0 0 24 24",
-      ...props
-    },
-    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "path",
-      {
-        ...{
-          d: "M12 4.5v15m7.5-7.5h-15",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      }
-    )
-  }
-);
-var plus_default = Plus;
-
-// components/styles.js
-var WHITE = "rgb( 255, 255, 255 )";
-var BLACK = "rgb( 0, 0, 0 )";
-var bgColor = (style) => {
-  var _a, _b;
-  return ((_b = (_a = style == null ? void 0 : style.background) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb) || WHITE;
-};
-var textColor = (style) => {
-  var _a, _b;
-  return ((_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb) || BLACK;
-};
-var inputStyle = (style) => {
-  var _a;
-  return {
-    backgroundColor: bgColor(style),
-    borderColor: textColor(style),
-    borderRadius: ((_a = style == null ? void 0 : style.input) == null ? void 0 : _a.radius) != null ? style.input.radius / 4 + "px" : void 0,
-    color: textColor(style)
-  };
-};
-
-// components/input-number.js
+var import_minus = __toESM(require("./icons/minus"));
+var import_plus = __toESM(require("./icons/plus"));
+var import_button = __toESM(require("./shared/button"));
+var import_styles = require("./styles");
 var import_react = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var accepts = (raw, decimal) => (decimal ? /^-?\d*\.?\d*$/ : /^-?\d*$/).test(raw);
-var emit = (raw) => {
+const accepts = (raw, decimal) => (decimal ? /^-?\d*\.?\d*$/ : /^-?\d*$/).test(raw);
+const emit = (raw) => {
   if (raw === "") return null;
   const numeric = Number(raw);
   return Number.isNaN(numeric) ? void 0 : numeric;
 };
-var InputNumber = ({
+const InputNumber = ({
   className,
+  disabled,
   inline = false,
   layout = "after",
   max,
@@ -151,7 +89,9 @@ var InputNumber = ({
     classes.push(className);
   }
   ;
-  const dividerBorder = "1px solid " + inputStyle(style).borderColor;
+  const dividerBorder = "1px solid " + (0, import_styles.inputStyle)(style).borderColor;
+  const atMax = max != null && Number(value || 0) >= max;
+  const atMin = min != null && Number(value || 0) <= min;
   const increment = (0, import_react.useCallback)(
     () => {
       const newValue = Number(value || 0) + 1;
@@ -168,26 +108,28 @@ var InputNumber = ({
     },
     [min, onChange, value]
   );
-  const decrementButton = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    "button",
+  const decrementButton = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_button.default,
     {
       ...{
         "aria-label": "decrement",
-        type: "button",
+        disabled: disabled || atMin,
+        inline: true,
         onClick: decrement,
-        className: (small ? "h-[34px] w-[34px]" : "h-[42px] w-[42px]") + " flex justify-center items-center text-inherit shrink-0 grow-0",
-        // split: decrement is leftmost, so its divider is on the right (before
-        // the input); after: it follows the input, so the divider is on its left.
-        style: layout === "split" ? { borderRight: dividerBorder } : { borderLeft: dividerBorder }
+        variant: "link"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "span",
         {
           ...{
-            "aria-hidden": true
+            "aria-hidden": true,
+            className: (small ? "h-[34px] w-[34px]" : "h-[42px] w-[42px]") + " flex justify-center items-center text-inherit",
+            // split: decrement is leftmost, so its divider is on the right (before
+            // the input); after: it follows the input, so the divider is on its left.
+            style: layout === "split" ? { borderRight: dividerBorder } : { borderLeft: dividerBorder }
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            minus_default,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_minus.default,
             {
               ...{
                 className: "w-4 h-4 text-inherit"
@@ -198,25 +140,27 @@ var InputNumber = ({
       )
     }
   );
-  const incrementButton = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    "button",
+  const incrementButton = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_button.default,
     {
       ...{
         "aria-label": "increment",
-        type: "button",
+        disabled: disabled || atMax,
+        inline: true,
         onClick: increment,
-        className: (small ? "h-[34px] w-[34px]" : "h-[42px] w-[42px]") + " flex justify-center items-center text-inherit shrink-0 grow-0",
-        // increment is always rightmost, so its divider is always on its left.
-        style: { borderLeft: dividerBorder }
+        variant: "link"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "span",
         {
           ...{
-            "aria-hidden": true
+            "aria-hidden": true,
+            className: (small ? "h-[34px] w-[34px]" : "h-[42px] w-[42px]") + " flex justify-center items-center text-inherit",
+            // increment is always rightmost, so its divider is always on its left.
+            style: { borderLeft: dividerBorder }
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            plus_default,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_plus.default,
             {
               ...{
                 className: "w-4 h-4 text-inherit"
@@ -227,17 +171,18 @@ var InputNumber = ({
       )
     }
   );
-  const input = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  const input = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "input",
     {
       ...{
         ...rest,
+        disabled,
         max,
         min,
         // Focus reset uses the v3+v4-common outline utility, and the fill is
         // an inline flex grow rather than a version-specific grow utility, so
         // this works in BOTH consumers (app-web is Tailwind v3, share is v4).
-        className: "text-inherit bg-transparent focus:outline-none focus:ring-0 " + (small ? "py-1 px-2" : "py-2 px-3") + (inline ? small ? " w-10" : " w-12" : "") + (layout === "split" ? " text-center" : ""),
+        className: "text-inherit bg-transparent focus:outline-hidden focus:ring-0 " + (small ? "py-1 px-2" : "py-2 px-3") + (inline ? small ? " w-10" : " w-12" : "") + (layout === "split" ? " text-center" : ""),
         // `type="text"` (not "number") so in-progress decimal strings survive
         // each render; inputMode still surfaces the numeric/decimal keypad on
         // mobile and handleChange enforces the numeric character set.
@@ -257,7 +202,7 @@ var InputNumber = ({
       }
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       ...{
@@ -267,7 +212,7 @@ var InputNumber = ({
         // var that isn't reliably set for a class used only in this dist, so
         // the utility could render zero-width. inputStyle supplies the color.
         style: {
-          ...inputStyle(style),
+          ...(0, import_styles.inputStyle)(style),
           ...inline ? {
             borderStyle: "solid",
             borderWidth: 1