@drawbridge/components 0.0.75 → 0.0.77

package/dist/advertisement.js

@@ -113,7 +113,10 @@ var InputGroupError = ({
             warning_default,
             {
               ...{
-                className: "w-4 h-4",
+                // 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
               }
             }
@@ -151,15 +154,70 @@ var InputGroupError = ({
 };
 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 DEFAULT_FAMILY = "Roboto Flex";
+var FONT_FALLBACK = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+var toFontFamily = (family) => '"' + (family || DEFAULT_FAMILY) + '", ' + FONT_FALLBACK;
+var toFontWeight = (variant) => {
+  var _a;
+  if (!variant) return void 0;
+  if (variant.includes("italic")) return (_a = variant.match(/^\d+/)) == null ? void 0 : _a[0];
+  if (variant.includes("regular")) return "normal";
+  return variant;
+};
+var toFontStyle = (variant) => (variant == null ? void 0 : variant.includes("italic")) ? "italic" : void 0;
+var buttonStyle = (style) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  return {
+    backgroundColor: ((_c = (_b = (_a = style == null ? void 0 : style.button) == null ? void 0 : _a.background) == null ? void 0 : _b.color) == null ? void 0 : _c.rgb) || textColor(style),
+    borderColor: ((_f = (_e = (_d = style == null ? void 0 : style.button) == null ? void 0 : _d.background) == null ? void 0 : _e.color) == null ? void 0 : _f.rgb) || textColor(style),
+    borderRadius: ((_g = style == null ? void 0 : style.button) == null ? void 0 : _g.radius) != null ? style.button.radius / 4 + "px" : void 0,
+    color: ((_j = (_i = (_h = style == null ? void 0 : style.button) == null ? void 0 : _h.text) == null ? void 0 : _i.color) == null ? void 0 : _j.rgb) || bgColor(style)
+  };
+};
+var headerStyle = (style) => {
+  var _a, _b, _c, _d;
+  return {
+    fontFamily: toFontFamily((_a = style == null ? void 0 : style.heading) == null ? void 0 : _a.family),
+    fontWeight: toFontWeight((_b = style == null ? void 0 : style.heading) == null ? void 0 : _b.weight),
+    fontStyle: toFontStyle((_c = style == null ? void 0 : style.heading) == null ? void 0 : _c.weight),
+    textTransform: (_d = style == null ? void 0 : style.heading) == null ? void 0 : _d.transform
+  };
+};
+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 = (
-  // 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.
-  require("react/jsx-runtime")
+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,
@@ -170,7 +228,29 @@ var InputGroup = ({
 }) => {
   const generated = (0, import_react2.useId)();
   const id = (0, import_react2.isValidElement)(input) ? input.props.id || generated : generated;
-  const control = (0, import_react2.isValidElement)(input) && !input.props.id ? (0, import_react2.cloneElement)(input, { id }) : input;
+  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"
   ];
@@ -191,26 +271,32 @@ var InputGroup = ({
         }
       },
       children: [
-        label ? /* @__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
-            ]
-          }
+        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,
@@ -258,56 +344,6 @@ var ChevronDown = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
 );
 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 DEFAULT_FAMILY = "Roboto Flex";
-var FONT_FALLBACK = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
-var toFontFamily = (family) => '"' + (family || DEFAULT_FAMILY) + '", ' + FONT_FALLBACK;
-var toFontWeight = (variant) => {
-  var _a;
-  if (!variant) return void 0;
-  if (variant.includes("italic")) return (_a = variant.match(/^\d+/)) == null ? void 0 : _a[0];
-  if (variant.includes("regular")) return "normal";
-  return variant;
-};
-var toFontStyle = (variant) => (variant == null ? void 0 : variant.includes("italic")) ? "italic" : void 0;
-var buttonStyle = (style) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-  return {
-    backgroundColor: ((_c = (_b = (_a = style == null ? void 0 : style.button) == null ? void 0 : _a.background) == null ? void 0 : _b.color) == null ? void 0 : _c.rgb) || textColor(style),
-    borderColor: ((_f = (_e = (_d = style == null ? void 0 : style.button) == null ? void 0 : _d.background) == null ? void 0 : _e.color) == null ? void 0 : _f.rgb) || textColor(style),
-    borderRadius: ((_g = style == null ? void 0 : style.button) == null ? void 0 : _g.radius) != null ? style.button.radius / 4 + "px" : void 0,
-    color: ((_j = (_i = (_h = style == null ? void 0 : style.button) == null ? void 0 : _h.text) == null ? void 0 : _i.color) == null ? void 0 : _j.rgb) || bgColor(style)
-  };
-};
-var headerStyle = (style) => {
-  var _a, _b, _c, _d;
-  return {
-    fontFamily: toFontFamily((_a = style == null ? void 0 : style.heading) == null ? void 0 : _a.family),
-    fontWeight: toFontWeight((_b = style == null ? void 0 : style.heading) == null ? void 0 : _b.weight),
-    fontStyle: toFontStyle((_c = style == null ? void 0 : style.heading) == null ? void 0 : _c.weight),
-    textTransform: (_d = style == null ? void 0 : style.heading) == null ? void 0 : _d.transform
-  };
-};
-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_runtime5 = require("react/jsx-runtime");
 var InputSelect = ({

package/dist/advertisement.mjs

@@ -1,13 +1,13 @@
 "use client";
 import {
   product_default
-} from "./chunk-PURM4QR2.mjs";
+} from "./chunk-PNM4PZ4L.mjs";
 import "./chunk-PT7UR6AO.mjs";
 import "./chunk-7GRIGQDC.mjs";
 import "./chunk-FYA7EAMR.mjs";
 import "./chunk-2ZYGRSSA.mjs";
-import "./chunk-MKBY26H7.mjs";
-import "./chunk-OHJMWJAQ.mjs";
+import "./chunk-WUZE3BIA.mjs";
+import "./chunk-KSCQQUFC.mjs";
 import "./chunk-Q3UIVGPQ.mjs";
 import {
   buttonStyle

package/dist/{chunk-OHJMWJAQ.mjs → chunk-KSCQQUFC.mjs}

@@ -43,7 +43,10 @@ var InputGroupError = ({
             warning_default,
             {
               ...{
-                className: "w-4 h-4",
+                // 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
               }
             }

package/dist/{chunk-PURM4QR2.mjs → chunk-PNM4PZ4L.mjs}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-2ZYGRSSA.mjs";
 import {
   input_group_default
-} from "./chunk-MKBY26H7.mjs";
+} from "./chunk-WUZE3BIA.mjs";
 import {
   buttonStyle,
   headerStyle,

package/dist/{chunk-MKBY26H7.mjs → chunk-WUZE3BIA.mjs}

@@ -1,11 +1,25 @@
 import {
   input_group_error_default
-} from "./chunk-OHJMWJAQ.mjs";
+} from "./chunk-KSCQQUFC.mjs";
+import {
+  inputStyle
+} from "./chunk-6F23WKP2.mjs";
 
 // components/input-group.js
 import { cloneElement, isValidElement, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+var Addon = ({ children }) => /* @__PURE__ */ 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,
@@ -16,7 +30,29 @@ var InputGroup = ({
 }) => {
   const generated = useId();
   const id = isValidElement(input) ? input.props.id || generated : generated;
-  const control = isValidElement(input) && !input.props.id ? cloneElement(input, { id }) : input;
+  const named = isValidElement(input) && !input.props.id ? cloneElement(input, { id }) : input;
+  const addons = after != null || before != null;
+  const control = addons && isValidElement(named) ? /* @__PURE__ */ 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__ */ jsx(Addon, { children: before }),
+        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__ */ jsx(Addon, { children: after })
+      ]
+    }
+  ) : named;
   const classes = [
     "input-group"
   ];

package/dist/input-group-error.js

@@ -90,7 +90,10 @@ var InputGroupError = ({
             warning_default,
             {
               ...{
-                className: "w-4 h-4",
+                // 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
               }
             }

package/dist/input-group-error.mjs

@@ -1,6 +1,6 @@
 import {
   input_group_error_default
-} from "./chunk-OHJMWJAQ.mjs";
+} from "./chunk-KSCQQUFC.mjs";
 import "./chunk-Q3UIVGPQ.mjs";
 export {
   input_group_error_default as default

package/dist/input-group.js

@@ -94,7 +94,10 @@ var InputGroupError = ({
             warning_default,
             {
               ...{
-                className: "w-4 h-4",
+                // 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
               }
             }
@@ -132,15 +135,41 @@ var InputGroupError = ({
 };
 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 = (
-  // 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.
-  require("react/jsx-runtime")
+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,
@@ -151,7 +180,29 @@ var InputGroup = ({
 }) => {
   const generated = (0, import_react2.useId)();
   const id = (0, import_react2.isValidElement)(input) ? input.props.id || generated : generated;
-  const control = (0, import_react2.isValidElement)(input) && !input.props.id ? (0, import_react2.cloneElement)(input, { id }) : input;
+  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"
   ];
@@ -172,26 +223,32 @@ var InputGroup = ({
         }
       },
       children: [
-        label ? /* @__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
-            ]
-          }
+        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,

package/dist/input-group.mjs

@@ -1,9 +1,10 @@
 "use client";
 import {
   input_group_default
-} from "./chunk-MKBY26H7.mjs";
-import "./chunk-OHJMWJAQ.mjs";
+} from "./chunk-WUZE3BIA.mjs";
+import "./chunk-KSCQQUFC.mjs";
 import "./chunk-Q3UIVGPQ.mjs";
+import "./chunk-6F23WKP2.mjs";
 export {
   input_group_default as default
 };

package/dist/input-name.js

@@ -95,7 +95,10 @@ var InputGroupError = ({
             warning_default,
             {
               ...{
-                className: "w-4 h-4",
+                // 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
               }
             }
@@ -133,15 +136,41 @@ var InputGroupError = ({
 };
 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 = (
-  // 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.
-  require("react/jsx-runtime")
+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,
@@ -152,7 +181,29 @@ var InputGroup = ({
 }) => {
   const generated = (0, import_react2.useId)();
   const id = (0, import_react2.isValidElement)(input) ? input.props.id || generated : generated;
-  const control = (0, import_react2.isValidElement)(input) && !input.props.id ? (0, import_react2.cloneElement)(input, { id }) : input;
+  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"
   ];
@@ -173,26 +224,32 @@ var InputGroup = ({
         }
       },
       children: [
-        label ? /* @__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
-            ]
-          }
+        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,
@@ -211,27 +268,6 @@ var InputGroup = ({
 };
 var input_group_default = InputGroup;
 
-// 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-text.js
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var InputText = ({

package/dist/input-name.mjs

@@ -3,8 +3,8 @@ import {
 } from "./chunk-Y466XTIK.mjs";
 import {
   input_group_default
-} from "./chunk-MKBY26H7.mjs";
-import "./chunk-OHJMWJAQ.mjs";
+} from "./chunk-WUZE3BIA.mjs";
+import "./chunk-KSCQQUFC.mjs";
 import "./chunk-Q3UIVGPQ.mjs";
 import "./chunk-6F23WKP2.mjs";
 

package/dist/product.js

@@ -110,7 +110,10 @@ var InputGroupError = ({
             warning_default,
             {
               ...{
-                className: "w-4 h-4",
+                // 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
               }
             }
@@ -148,15 +151,70 @@ var InputGroupError = ({
 };
 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 DEFAULT_FAMILY = "Roboto Flex";
+var FONT_FALLBACK = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+var toFontFamily = (family) => '"' + (family || DEFAULT_FAMILY) + '", ' + FONT_FALLBACK;
+var toFontWeight = (variant) => {
+  var _a;
+  if (!variant) return void 0;
+  if (variant.includes("italic")) return (_a = variant.match(/^\d+/)) == null ? void 0 : _a[0];
+  if (variant.includes("regular")) return "normal";
+  return variant;
+};
+var toFontStyle = (variant) => (variant == null ? void 0 : variant.includes("italic")) ? "italic" : void 0;
+var buttonStyle = (style) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  return {
+    backgroundColor: ((_c = (_b = (_a = style == null ? void 0 : style.button) == null ? void 0 : _a.background) == null ? void 0 : _b.color) == null ? void 0 : _c.rgb) || textColor(style),
+    borderColor: ((_f = (_e = (_d = style == null ? void 0 : style.button) == null ? void 0 : _d.background) == null ? void 0 : _e.color) == null ? void 0 : _f.rgb) || textColor(style),
+    borderRadius: ((_g = style == null ? void 0 : style.button) == null ? void 0 : _g.radius) != null ? style.button.radius / 4 + "px" : void 0,
+    color: ((_j = (_i = (_h = style == null ? void 0 : style.button) == null ? void 0 : _h.text) == null ? void 0 : _i.color) == null ? void 0 : _j.rgb) || bgColor(style)
+  };
+};
+var headerStyle = (style) => {
+  var _a, _b, _c, _d;
+  return {
+    fontFamily: toFontFamily((_a = style == null ? void 0 : style.heading) == null ? void 0 : _a.family),
+    fontWeight: toFontWeight((_b = style == null ? void 0 : style.heading) == null ? void 0 : _b.weight),
+    fontStyle: toFontStyle((_c = style == null ? void 0 : style.heading) == null ? void 0 : _c.weight),
+    textTransform: (_d = style == null ? void 0 : style.heading) == null ? void 0 : _d.transform
+  };
+};
+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 = (
-  // 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.
-  require("react/jsx-runtime")
+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,
@@ -167,7 +225,29 @@ var InputGroup = ({
 }) => {
   const generated = (0, import_react2.useId)();
   const id = (0, import_react2.isValidElement)(input) ? input.props.id || generated : generated;
-  const control = (0, import_react2.isValidElement)(input) && !input.props.id ? (0, import_react2.cloneElement)(input, { id }) : input;
+  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"
   ];
@@ -188,26 +268,32 @@ var InputGroup = ({
         }
       },
       children: [
-        label ? /* @__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
-            ]
-          }
+        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,
@@ -255,56 +341,6 @@ var ChevronDown = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
 );
 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 DEFAULT_FAMILY = "Roboto Flex";
-var FONT_FALLBACK = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
-var toFontFamily = (family) => '"' + (family || DEFAULT_FAMILY) + '", ' + FONT_FALLBACK;
-var toFontWeight = (variant) => {
-  var _a;
-  if (!variant) return void 0;
-  if (variant.includes("italic")) return (_a = variant.match(/^\d+/)) == null ? void 0 : _a[0];
-  if (variant.includes("regular")) return "normal";
-  return variant;
-};
-var toFontStyle = (variant) => (variant == null ? void 0 : variant.includes("italic")) ? "italic" : void 0;
-var buttonStyle = (style) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-  return {
-    backgroundColor: ((_c = (_b = (_a = style == null ? void 0 : style.button) == null ? void 0 : _a.background) == null ? void 0 : _b.color) == null ? void 0 : _c.rgb) || textColor(style),
-    borderColor: ((_f = (_e = (_d = style == null ? void 0 : style.button) == null ? void 0 : _d.background) == null ? void 0 : _e.color) == null ? void 0 : _f.rgb) || textColor(style),
-    borderRadius: ((_g = style == null ? void 0 : style.button) == null ? void 0 : _g.radius) != null ? style.button.radius / 4 + "px" : void 0,
-    color: ((_j = (_i = (_h = style == null ? void 0 : style.button) == null ? void 0 : _h.text) == null ? void 0 : _i.color) == null ? void 0 : _j.rgb) || bgColor(style)
-  };
-};
-var headerStyle = (style) => {
-  var _a, _b, _c, _d;
-  return {
-    fontFamily: toFontFamily((_a = style == null ? void 0 : style.heading) == null ? void 0 : _a.family),
-    fontWeight: toFontWeight((_b = style == null ? void 0 : style.heading) == null ? void 0 : _b.weight),
-    fontStyle: toFontStyle((_c = style == null ? void 0 : style.heading) == null ? void 0 : _c.weight),
-    textTransform: (_d = style == null ? void 0 : style.heading) == null ? void 0 : _d.transform
-  };
-};
-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_runtime5 = require("react/jsx-runtime");
 var InputSelect = ({

package/dist/product.mjs

@@ -1,13 +1,13 @@
 "use client";
 import {
   product_default
-} from "./chunk-PURM4QR2.mjs";
+} from "./chunk-PNM4PZ4L.mjs";
 import "./chunk-PT7UR6AO.mjs";
 import "./chunk-7GRIGQDC.mjs";
 import "./chunk-FYA7EAMR.mjs";
 import "./chunk-2ZYGRSSA.mjs";
-import "./chunk-MKBY26H7.mjs";
-import "./chunk-OHJMWJAQ.mjs";
+import "./chunk-WUZE3BIA.mjs";
+import "./chunk-KSCQQUFC.mjs";
 import "./chunk-Q3UIVGPQ.mjs";
 import "./chunk-6F23WKP2.mjs";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawbridge/components",
-  "version": "0.0.75",
+  "version": "0.0.77",
   "exports": {
     "./advertisement": {
       "types": "./types/advertisement.d.ts",

package/types/input-group.d.ts

@@ -2,6 +2,10 @@ import { ComponentType, ReactNode } from 'react';
 import { BrandStyle } from './styles';
 
 export interface InputGroupProps {
+	/** Rendered inside the field's border after the control: a string reads as a fixed half of the value, a node renders as given. */
+	after?: ReactNode;
+	/** Rendered inside the field's border before the control. */
+	before?: ReactNode;
 	className?: string;
 	error?: ReactNode;
 	input?: ReactNode;