@drawbridge/components 0.0.78 → 0.1.0

package/dist/input-number.mjs

@@ -1,24 +1,18 @@
-import {
-  plus_default
-} from "./chunk-HH7WF5BT.mjs";
-import {
-  minus_default
-} from "./chunk-T5QQBFM3.mjs";
-import {
-  inputStyle
-} from "./chunk-6F23WKP2.mjs";
-
-// components/input-number.js
-import { useCallback, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var accepts = (raw, decimal) => (decimal ? /^-?\d*\.?\d*$/ : /^-?\d*$/).test(raw);
-var emit = (raw) => {
+import Minus from "./icons/minus";
+import Plus from "./icons/plus";
+import Button from "./shared/button";
+import { inputStyle } from "./styles";
+import { useCallback, useEffect, useState } from "react";
+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,
@@ -62,6 +56,8 @@ var InputNumber = ({
   }
   ;
   const dividerBorder = "1px solid " + inputStyle(style).borderColor;
+  const atMax = max != null && Number(value || 0) >= max;
+  const atMin = min != null && Number(value || 0) <= min;
   const increment = useCallback(
     () => {
       const newValue = Number(value || 0) + 1;
@@ -79,25 +75,27 @@ var InputNumber = ({
     [min, onChange, value]
   );
   const decrementButton = /* @__PURE__ */ jsx(
-    "button",
+    Button,
     {
       ...{
         "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__ */ 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__ */ jsx(
-            minus_default,
+            Minus,
             {
               ...{
                 className: "w-4 h-4 text-inherit"
@@ -109,24 +107,26 @@ var InputNumber = ({
     }
   );
   const incrementButton = /* @__PURE__ */ jsx(
-    "button",
+    Button,
     {
       ...{
         "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__ */ 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__ */ jsx(
-            plus_default,
+            Plus,
             {
               ...{
                 className: "w-4 h-4 text-inherit"
@@ -142,12 +142,13 @@ var InputNumber = ({
     {
       ...{
         ...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.

package/dist/input-phone.js

@@ -26,74 +26,25 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// components/input-phone.js
 var input_phone_exports = {};
 __export(input_phone_exports, {
   default: () => input_phone_default,
   isValidPhone: () => isValidPhone
 });
 module.exports = __toCommonJS(input_phone_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_input = __toESM(require("react-phone-number-input/input"));
 var import_phone = require("@drawbridge/drawbridge-utils/phone");
-
-// components/icons/chevron-down.js
-var import_jsx_runtime = require("react/jsx-runtime");
-var ChevronDown = (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: "m19.5 8.25-7.5 7.5-7.5-7.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      }
-    )
-  }
-);
-var chevron_down_default = ChevronDown;
-
-// 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)
-  };
-};
-var inputPhoneStyle = (style) => inputStyle(style);
-
-// components/input-phone.js
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var isValidPhone = (number = "", country = "") => {
+var import_chevron_down = __toESM(require("./icons/chevron-down"));
+var import_styles = require("./styles");
+const isValidPhone = (number = "", country = "") => {
   const valid = (0, import_phone.isValid)(number, country);
   return valid;
 };
-var InputPhone = ({
+const InputPhone = ({
   countries = [],
+  disabled,
   onChange,
   style,
   value = {},
@@ -101,7 +52,6 @@ var InputPhone = ({
   // control by id, and the number is the field the label means.
   ...rest
 }) => {
-  var _a, _b;
   const [country, setCountry] = (0, import_react.useState)((value == null ? void 0 : value.country) || (countries == null ? void 0 : countries[0]));
   const [number, setNumber] = (0, import_react.useState)((value == null ? void 0 : value.number) || "");
   (0, import_react.useEffect)(
@@ -115,8 +65,8 @@ var InputPhone = ({
       ;
       const tags = [navigator.language, ...navigator.languages || []];
       const locale = tags.map((tag) => {
-        var _a2, _b2;
-        return (_b2 = (_a2 = tag == null ? void 0 : tag.split("-")) == null ? void 0 : _a2[1]) == null ? void 0 : _b2.toUpperCase();
+        var _a, _b;
+        return (_b = (_a = tag == null ? void 0 : tag.split("-")) == null ? void 0 : _a[1]) == null ? void 0 : _b.toUpperCase();
       }).find((code) => code && countries.includes(code));
       if (locale) setCountry(locale);
     },
@@ -147,34 +97,35 @@ var InputPhone = ({
     },
     []
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       ...{
         className: "flex items-center input !p-0 overflow-hidden",
-        style: inputPhoneStyle(style)
+        style: (0, import_styles.inputPhoneStyle)(style)
       },
       children: [
-        (countries == null ? void 0 : countries.length) > 1 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        (countries == null ? void 0 : countries.length) > 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "div",
           {
             ...{
               className: "relative"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "select",
                 {
                   ...{
                     className: "pl-3 pr-6 bg-none appearance-none border-none " + (keyboard ? "focus-visible:!border focus-visible:!border-inherit !rounded-none " : "focus-visible:!outline-0 focus-visible:!ring-0"),
+                    disabled,
                     onChange: ({ target }) => {
                       setCountry(target.value);
                       setNumber("");
                     },
-                    style: inputPhoneStyle(style),
+                    style: (0, import_styles.inputPhoneStyle)(style),
                     value: country
                   },
-                  children: countries.map((item, key) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  children: countries.map((item, key) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     "option",
                     {
                       ...{
@@ -186,15 +137,15 @@ var InputPhone = ({
                   ))
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "div",
                 {
                   ...{
                     "aria-hidden": true,
                     className: "h-full flex items-center absolute inset-y-0 right-1.5 pointer-events-none"
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                    chevron_down_default,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_chevron_down.default,
                     {
                       ...{
                         className: "w-4 h-4 text-inherit"
@@ -205,38 +156,41 @@ var InputPhone = ({
               )
             ]
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "span",
           {
             ...{
               className: "px-3 flex items-center",
-              style: inputPhoneStyle(style)
+              style: (0, import_styles.inputPhoneStyle)(style)
             },
             children: (countries == null ? void 0 : countries[0]) || ""
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
             ...{
               className: "w-full",
               style: {
-                borderLeft: "solid 1px " + ((_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.hex)
+                // The field's own border colour, which falls back to black
+                // without a brand ( text.color.hex alone drew 'solid 1px undefined' ).
+                borderLeft: "solid 1px " + (0, import_styles.inputPhoneStyle)(style).borderColor
               }
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_input.default,
               {
                 ...{
                   ...rest,
                   "aria-label": "Phone Number",
-                  className: "input w-full border-none focus:outline-none focus:ring-0 focus:border-inherit",
+                  disabled,
+                  className: "input w-full border-none focus:outline-hidden focus:ring-0 focus:border-inherit",
                   onChange: (val) => {
                     setNumber(val);
                     const detected = (0, import_phone.detectCountry)(val);
                     if (detected && countries.includes(detected)) setCountry(detected);
                   },
-                  style: inputPhoneStyle(style),
+                  style: (0, import_styles.inputPhoneStyle)(style),
                   value: number,
                   // country-mode pins the input to the selected calling code, so
                   // detection can only follow countries SHARING that code (US/CA

package/dist/input-phone.mjs

@@ -1,22 +1,17 @@
 "use client";
-import {
-  chevron_down_default
-} from "./chunk-FYA7EAMR.mjs";
-import {
-  inputPhoneStyle
-} from "./chunk-6F23WKP2.mjs";
-
-// components/input-phone.js
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import Input from "react-phone-number-input/input";
 import { detectCountry, isValid } from "@drawbridge/drawbridge-utils/phone";
-import { jsx, jsxs } from "react/jsx-runtime";
-var isValidPhone = (number = "", country = "") => {
+import ChevronDown from "./icons/chevron-down";
+import { inputPhoneStyle } from "./styles";
+const isValidPhone = (number = "", country = "") => {
   const valid = isValid(number, country);
   return valid;
 };
-var InputPhone = ({
+const InputPhone = ({
   countries = [],
+  disabled,
   onChange,
   style,
   value = {},
@@ -24,7 +19,6 @@ var InputPhone = ({
   // control by id, and the number is the field the label means.
   ...rest
 }) => {
-  var _a, _b;
   const [country, setCountry] = useState((value == null ? void 0 : value.country) || (countries == null ? void 0 : countries[0]));
   const [number, setNumber] = useState((value == null ? void 0 : value.number) || "");
   useEffect(
@@ -38,8 +32,8 @@ var InputPhone = ({
       ;
       const tags = [navigator.language, ...navigator.languages || []];
       const locale = tags.map((tag) => {
-        var _a2, _b2;
-        return (_b2 = (_a2 = tag == null ? void 0 : tag.split("-")) == null ? void 0 : _a2[1]) == null ? void 0 : _b2.toUpperCase();
+        var _a, _b;
+        return (_b = (_a = tag == null ? void 0 : tag.split("-")) == null ? void 0 : _a[1]) == null ? void 0 : _b.toUpperCase();
       }).find((code) => code && countries.includes(code));
       if (locale) setCountry(locale);
     },
@@ -90,6 +84,7 @@ var InputPhone = ({
                 {
                   ...{
                     className: "pl-3 pr-6 bg-none appearance-none border-none " + (keyboard ? "focus-visible:!border focus-visible:!border-inherit !rounded-none " : "focus-visible:!outline-0 focus-visible:!ring-0"),
+                    disabled,
                     onChange: ({ target }) => {
                       setCountry(target.value);
                       setNumber("");
@@ -117,7 +112,7 @@ var InputPhone = ({
                     className: "h-full flex items-center absolute inset-y-0 right-1.5 pointer-events-none"
                   },
                   children: /* @__PURE__ */ jsx(
-                    chevron_down_default,
+                    ChevronDown,
                     {
                       ...{
                         className: "w-4 h-4 text-inherit"
@@ -144,7 +139,9 @@ var InputPhone = ({
             ...{
               className: "w-full",
               style: {
-                borderLeft: "solid 1px " + ((_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.hex)
+                // The field's own border colour, which falls back to black
+                // without a brand ( text.color.hex alone drew 'solid 1px undefined' ).
+                borderLeft: "solid 1px " + inputPhoneStyle(style).borderColor
               }
             },
             children: /* @__PURE__ */ jsx(
@@ -153,7 +150,8 @@ var InputPhone = ({
                 ...{
                   ...rest,
                   "aria-label": "Phone Number",
-                  className: "input w-full border-none focus:outline-none focus:ring-0 focus:border-inherit",
+                  disabled,
+                  className: "input w-full border-none focus:outline-hidden focus:ring-0 focus:border-inherit",
                   onChange: (val) => {
                     setNumber(val);
                     const detected = detectCountry(val);

package/dist/input-select.js

@@ -1,7 +1,9 @@
 "use client";
+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)
@@ -15,66 +17,25 @@ 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-select.js
 var input_select_exports = {};
 __export(input_select_exports, {
   default: () => input_select_default
 });
 module.exports = __toCommonJS(input_select_exports);
-var import_react = require("react");
-
-// components/icons/chevron-down.js
 var import_jsx_runtime = require("react/jsx-runtime");
-var ChevronDown = (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: "m19.5 8.25-7.5 7.5-7.5-7.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      }
-    )
-  }
-);
-var chevron_down_default = ChevronDown;
-
-// 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-select.js
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var InputSelect = ({
+var import_react = require("react");
+var import_chevron_down = __toESM(require("./icons/chevron-down"));
+var import_styles = require("./styles");
+const InputSelect = ({
   onChange,
   options = [],
   style,
@@ -94,25 +55,26 @@ var InputSelect = ({
       window.removeEventListener("mousedown", click);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       ...{
         className: "relative"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "select",
           {
             ...{
               ...rest,
-              className: "input appearance-none " + (keyboard ? "focus-visible:!outline-1 focus-visible:!ring-1 focus-visible:!ring-blue-600" : "focus-visible:!outline-0 focus-visible:!ring-0"),
+              // A brand's keyboard ring has no colour class, so it draws in currentColor: the brand's text.
+              className: "input appearance-none " + (keyboard ? "focus-visible:!outline-1 focus-visible:!ring-1" + (style ? "" : " focus-visible:!ring-blue-600") : "focus-visible:!outline-0 focus-visible:!ring-0"),
               onChange: ({ target }) => onChange(target == null ? void 0 : target.value),
-              style: inputStyle(style),
+              style: (0, import_styles.inputStyle)(style),
               value
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "option",
                 {
                   ...{
@@ -123,7 +85,7 @@ var InputSelect = ({
                   children: "Select"
                 }
               ),
-              options.map(({ label, option, value: optValue }, key) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              options.map(({ label, option, value: optValue }, key) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "option",
                 {
                   ...{
@@ -136,15 +98,17 @@ var InputSelect = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
             ...{
               "aria-hidden": true,
-              className: "h-full flex items-center absolute inset-y-0 right-0 pointer-events-none px-2.5"
+              className: "h-full flex items-center absolute inset-y-0 right-0 pointer-events-none px-2.5",
+              // The chevron sits outside the select, so it takes the brand's text colour itself.
+              ...style && { style: (0, import_styles.textStyle)(style) }
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              chevron_down_default,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_chevron_down.default,
               {
                 ...{
                   className: "w-5 h-5 text-inherit"

package/dist/input-select.mjs

@@ -1,9 +1,95 @@
 "use client";
-import {
-  input_select_default
-} from "./chunk-7GRIGQDC.mjs";
-import "./chunk-FYA7EAMR.mjs";
-import "./chunk-6F23WKP2.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import ChevronDown from "./icons/chevron-down";
+import { inputStyle, textStyle } from "./styles";
+const InputSelect = ({
+  onChange,
+  options = [],
+  style,
+  value,
+  ...rest
+}) => {
+  const [keyboard, setKeyboard] = useState(false);
+  useEffect(() => {
+    const down = (e) => {
+      if (e.key === "Tab") setKeyboard(true);
+    };
+    const click = () => setKeyboard(false);
+    window.addEventListener("keydown", down);
+    window.addEventListener("mousedown", click);
+    return () => {
+      window.removeEventListener("keydown", down);
+      window.removeEventListener("mousedown", click);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: "relative"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            ...{
+              ...rest,
+              // A brand's keyboard ring has no colour class, so it draws in currentColor: the brand's text.
+              className: "input appearance-none " + (keyboard ? "focus-visible:!outline-1 focus-visible:!ring-1" + (style ? "" : " focus-visible:!ring-blue-600") : "focus-visible:!outline-0 focus-visible:!ring-0"),
+              onChange: ({ target }) => onChange(target == null ? void 0 : target.value),
+              style: inputStyle(style),
+              value
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "option",
+                {
+                  ...{
+                    disabled: true,
+                    "aria-label": "Select option",
+                    value: ""
+                  },
+                  children: "Select"
+                }
+              ),
+              options.map(({ label, option, value: optValue }, key) => /* @__PURE__ */ jsx(
+                "option",
+                {
+                  ...{
+                    value: optValue ?? option
+                  },
+                  children: label ?? option
+                },
+                "input-select-option-" + key
+              ))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...{
+              "aria-hidden": true,
+              className: "h-full flex items-center absolute inset-y-0 right-0 pointer-events-none px-2.5",
+              // The chevron sits outside the select, so it takes the brand's text colour itself.
+              ...style && { style: textStyle(style) }
+            },
+            children: /* @__PURE__ */ jsx(
+              ChevronDown,
+              {
+                ...{
+                  className: "w-5 h-5 text-inherit"
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var input_select_default = InputSelect;
 export {
   input_select_default as default
 };