@drawbridge/components 0.0.74 → 0.0.76

package/dist/advertisement.js

@@ -36,11 +36,14 @@ module.exports = __toCommonJS(advertisement_exports);
 var import_cdn2 = require("@drawbridge/drawbridge-utils/cdn");
 
 // components/product.js
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
 var import_cdn = require("@drawbridge/shopify/cdn");
 var import_drawbridge_utils = require("@drawbridge/drawbridge-utils");
 
+// components/input-group.js
+var import_react2 = require("react");
+
 // components/input-group-error.js
 var import_react = require("react");
 
@@ -148,17 +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> wrapping the control (not a bare <span>) so the label
-  // is programmatically associated with the input — screen readers
-  // announce the field name, clicking the text focuses the input, and
-  // getByLabel()/role queries can find it. Wrapping gives the association
-  // implicitly, so it works for any control passed via `input` without
-  // having to thread an id through every input component.
-  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,6 +223,31 @@ var InputGroup = ({
   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"
   ];
@@ -187,26 +268,33 @@ var InputGroup = ({
         }
       },
       children: [
-        label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-          "label",
-          {
-            ...{
-              className: "space-y-2 block"
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                "span",
-                {
-                  ...{
-                    className: "block"
-                  },
-                  children: label
-                }
-              ),
-              input
-            ]
-          }
-        ) : input,
+        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,
           {
@@ -225,7 +313,7 @@ var InputGroup = ({
 var input_group_default = InputGroup;
 
 // components/input-select.js
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // components/icons/chevron-down.js
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -253,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 = ({
@@ -312,8 +350,8 @@ var InputSelect = ({
   value,
   ...rest
 }) => {
-  const [keyboard, setKeyboard] = (0, import_react2.useState)(false);
-  (0, import_react2.useEffect)(() => {
+  const [keyboard, setKeyboard] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
     const down = (e) => {
       if (e.key === "Tab") setKeyboard(true);
     };
@@ -391,9 +429,9 @@ var InputSelect = ({
 var input_select_default = InputSelect;
 
 // components/wrapper-gradient.js
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var WrapperGradientContext = (0, import_react3.createContext)(null);
+var WrapperGradientContext = (0, import_react4.createContext)(null);
 var WrapperGradient = ({
   children,
   className,
@@ -451,14 +489,14 @@ var WrapperGradient = ({
     left: "linear-gradient( to right, " + color + " 0%, transparent 100% )",
     right: "linear-gradient( to left, " + color + " 0%, transparent 100% )"
   };
-  const containerRef = (0, import_react3.useRef)(null);
-  const [scroll, setScroll] = (0, import_react3.useState)({
+  const containerRef = (0, import_react4.useRef)(null);
+  const [scroll, setScroll] = (0, import_react4.useState)({
     top: 0,
     left: 0,
     atBottom: true,
     atRight: true
   });
-  (0, import_react3.useEffect)(
+  (0, import_react4.useEffect)(
     () => {
       const container = containerRef.current;
       const handleScroll = () => {
@@ -508,7 +546,7 @@ var WrapperGradient = ({
     },
     [horizontal]
   );
-  const contextValue = (0, import_react3.useMemo)(
+  const contextValue = (0, import_react4.useMemo)(
     () => ({
       atBottom: scroll.atBottom,
       atRight: scroll.atRight
@@ -679,14 +717,14 @@ var Product = ({
     }
   };
   const imageRadius = ((_c = resolved == null ? void 0 : resolved.image) == null ? void 0 : _c.radius) != null ? resolved.image.radius + "px" : "12px";
-  const available = (0, import_react4.useMemo)(
+  const available = (0, import_react5.useMemo)(
     () => ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale),
     [product]
   );
-  const [activeImage, setActiveImage] = (0, import_react4.useState)(0);
+  const [activeImage, setActiveImage] = (0, import_react5.useState)(0);
   const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)();
   const selectedVariant = available.find((v) => v.id === variant) || available[0] || null;
-  const images = (0, import_react4.useMemo)(
+  const images = (0, import_react5.useMemo)(
     () => {
       const variants = ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale);
       const result = [];
@@ -711,7 +749,7 @@ var Product = ({
     },
     [product]
   );
-  (0, import_react4.useEffect)(
+  (0, import_react5.useEffect)(
     () => {
       if (!emblaApi) return;
       const onSelect = () => {

package/dist/advertisement.mjs

@@ -1,12 +1,12 @@
 "use client";
 import {
   product_default
-} from "./chunk-W2NXIBPS.mjs";
+} from "./chunk-TFZRXJYH.mjs";
 import "./chunk-PT7UR6AO.mjs";
 import "./chunk-7GRIGQDC.mjs";
 import "./chunk-FYA7EAMR.mjs";
 import "./chunk-2ZYGRSSA.mjs";
-import "./chunk-IIP5OKPN.mjs";
+import "./chunk-TSVDDA5K.mjs";
 import "./chunk-OHJMWJAQ.mjs";
 import "./chunk-Q3UIVGPQ.mjs";
 import {

package/dist/{chunk-W2NXIBPS.mjs → chunk-TFZRXJYH.mjs}

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

package/dist/chunk-TSVDDA5K.mjs

@@ -0,0 +1,122 @@
+import {
+  input_group_error_default
+} from "./chunk-OHJMWJAQ.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,
+  label,
+  message,
+  style = {},
+  ...rest
+}) => {
+  const generated = useId();
+  const id = isValidElement(input) ? input.props.id || generated : generated;
+  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"
+  ];
+  if (className) {
+    classes.push(className);
+  }
+  if (error) {
+    classes.push("error");
+  }
+  return /* @__PURE__ */ 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__ */ jsxs(
+            "label",
+            {
+              ...{
+                className: "space-y-2 block",
+                htmlFor: id
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    ...{
+                      className: "block"
+                    },
+                    children: label
+                  }
+                ),
+                control
+              ]
+            }
+          )
+        ) : control,
+        /* @__PURE__ */ jsx(
+          input_group_error_default,
+          {
+            ...{
+              error,
+              label,
+              message,
+              style
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+var input_group_default = InputGroup;
+
+export {
+  input_group_default
+};

package/dist/input-group.js

@@ -1,3 +1,4 @@
+"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -22,6 +23,7 @@ __export(input_group_exports, {
   default: () => input_group_default
 });
 module.exports = __toCommonJS(input_group_exports);
+var import_react2 = require("react");
 
 // components/input-group-error.js
 var import_react = require("react");
@@ -130,17 +132,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> wrapping the control (not a bare <span>) so the label
-  // is programmatically associated with the input — screen readers
-  // announce the field name, clicking the text focuses the input, and
-  // getByLabel()/role queries can find it. Wrapping gives the association
-  // implicitly, so it works for any control passed via `input` without
-  // having to thread an id through every input component.
-  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,
@@ -149,6 +175,31 @@ var InputGroup = ({
   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"
   ];
@@ -169,26 +220,33 @@ var InputGroup = ({
         }
       },
       children: [
-        label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-          "label",
-          {
-            ...{
-              className: "space-y-2 block"
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                "span",
-                {
-                  ...{
-                    className: "block"
-                  },
-                  children: label
-                }
-              ),
-              input
-            ]
-          }
-        ) : input,
+        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,8 +1,10 @@
+"use client";
 import {
   input_group_default
-} from "./chunk-IIP5OKPN.mjs";
+} from "./chunk-TSVDDA5K.mjs";
 import "./chunk-OHJMWJAQ.mjs";
 import "./chunk-Q3UIVGPQ.mjs";
+import "./chunk-6F23WKP2.mjs";
 export {
   input_group_default as default
 };

package/dist/input-name.js

@@ -23,6 +23,9 @@ __export(input_name_exports, {
 });
 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");
 
@@ -130,17 +133,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> wrapping the control (not a bare <span>) so the label
-  // is programmatically associated with the input — screen readers
-  // announce the field name, clicking the text focuses the input, and
-  // getByLabel()/role queries can find it. Wrapping gives the association
-  // implicitly, so it works for any control passed via `input` without
-  // having to thread an id through every input component.
-  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,
@@ -149,6 +176,31 @@ var InputGroup = ({
   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"
   ];
@@ -169,26 +221,33 @@ var InputGroup = ({
         }
       },
       children: [
-        label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-          "label",
-          {
-            ...{
-              className: "space-y-2 block"
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                "span",
-                {
-                  ...{
-                    className: "block"
-                  },
-                  children: label
-                }
-              ),
-              input
-            ]
-          }
-        ) : input,
+        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,
           {
@@ -206,27 +265,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,7 +3,7 @@ import {
 } from "./chunk-Y466XTIK.mjs";
 import {
   input_group_default
-} from "./chunk-IIP5OKPN.mjs";
+} from "./chunk-TSVDDA5K.mjs";
 import "./chunk-OHJMWJAQ.mjs";
 import "./chunk-Q3UIVGPQ.mjs";
 import "./chunk-6F23WKP2.mjs";

package/dist/input-phone.js

@@ -96,7 +96,10 @@ var InputPhone = ({
   countries = [],
   onChange,
   style,
-  value = {}
+  value = {},
+  // Reaches the number field, not the country select. InputGroup names its
+  // 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]));
@@ -225,6 +228,7 @@ var InputPhone = ({
               import_input.default,
               {
                 ...{
+                  ...rest,
                   "aria-label": "Phone Number",
                   className: "input w-full border-none focus:outline-none focus:ring-0 focus:border-inherit",
                   onChange: (val) => {

package/dist/input-phone.mjs

@@ -19,7 +19,10 @@ var InputPhone = ({
   countries = [],
   onChange,
   style,
-  value = {}
+  value = {},
+  // Reaches the number field, not the country select. InputGroup names its
+  // 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]));
@@ -148,6 +151,7 @@ var InputPhone = ({
               Input,
               {
                 ...{
+                  ...rest,
                   "aria-label": "Phone Number",
                   className: "input w-full border-none focus:outline-none focus:ring-0 focus:border-inherit",
                   onChange: (val) => {

package/dist/product.js

@@ -33,11 +33,14 @@ __export(product_exports, {
   default: () => product_default
 });
 module.exports = __toCommonJS(product_exports);
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
 var import_cdn = require("@drawbridge/shopify/cdn");
 var import_drawbridge_utils = require("@drawbridge/drawbridge-utils");
 
+// components/input-group.js
+var import_react2 = require("react");
+
 // components/input-group-error.js
 var import_react = require("react");
 
@@ -145,17 +148,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> wrapping the control (not a bare <span>) so the label
-  // is programmatically associated with the input — screen readers
-  // announce the field name, clicking the text focuses the input, and
-  // getByLabel()/role queries can find it. Wrapping gives the association
-  // implicitly, so it works for any control passed via `input` without
-  // having to thread an id through every input component.
-  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,
@@ -164,6 +220,31 @@ var InputGroup = ({
   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"
   ];
@@ -184,26 +265,33 @@ var InputGroup = ({
         }
       },
       children: [
-        label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-          "label",
-          {
-            ...{
-              className: "space-y-2 block"
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                "span",
-                {
-                  ...{
-                    className: "block"
-                  },
-                  children: label
-                }
-              ),
-              input
-            ]
-          }
-        ) : input,
+        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,
           {
@@ -222,7 +310,7 @@ var InputGroup = ({
 var input_group_default = InputGroup;
 
 // components/input-select.js
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // components/icons/chevron-down.js
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -250,56 +338,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 = ({
@@ -309,8 +347,8 @@ var InputSelect = ({
   value,
   ...rest
 }) => {
-  const [keyboard, setKeyboard] = (0, import_react2.useState)(false);
-  (0, import_react2.useEffect)(() => {
+  const [keyboard, setKeyboard] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
     const down = (e) => {
       if (e.key === "Tab") setKeyboard(true);
     };
@@ -388,9 +426,9 @@ var InputSelect = ({
 var input_select_default = InputSelect;
 
 // components/wrapper-gradient.js
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var WrapperGradientContext = (0, import_react3.createContext)(null);
+var WrapperGradientContext = (0, import_react4.createContext)(null);
 var WrapperGradient = ({
   children,
   className,
@@ -448,14 +486,14 @@ var WrapperGradient = ({
     left: "linear-gradient( to right, " + color + " 0%, transparent 100% )",
     right: "linear-gradient( to left, " + color + " 0%, transparent 100% )"
   };
-  const containerRef = (0, import_react3.useRef)(null);
-  const [scroll, setScroll] = (0, import_react3.useState)({
+  const containerRef = (0, import_react4.useRef)(null);
+  const [scroll, setScroll] = (0, import_react4.useState)({
     top: 0,
     left: 0,
     atBottom: true,
     atRight: true
   });
-  (0, import_react3.useEffect)(
+  (0, import_react4.useEffect)(
     () => {
       const container = containerRef.current;
       const handleScroll = () => {
@@ -505,7 +543,7 @@ var WrapperGradient = ({
     },
     [horizontal]
   );
-  const contextValue = (0, import_react3.useMemo)(
+  const contextValue = (0, import_react4.useMemo)(
     () => ({
       atBottom: scroll.atBottom,
       atRight: scroll.atRight
@@ -676,14 +714,14 @@ var Product = ({
     }
   };
   const imageRadius = ((_c = resolved == null ? void 0 : resolved.image) == null ? void 0 : _c.radius) != null ? resolved.image.radius + "px" : "12px";
-  const available = (0, import_react4.useMemo)(
+  const available = (0, import_react5.useMemo)(
     () => ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale),
     [product]
   );
-  const [activeImage, setActiveImage] = (0, import_react4.useState)(0);
+  const [activeImage, setActiveImage] = (0, import_react5.useState)(0);
   const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)();
   const selectedVariant = available.find((v) => v.id === variant) || available[0] || null;
-  const images = (0, import_react4.useMemo)(
+  const images = (0, import_react5.useMemo)(
     () => {
       const variants = ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale);
       const result = [];
@@ -708,7 +746,7 @@ var Product = ({
     },
     [product]
   );
-  (0, import_react4.useEffect)(
+  (0, import_react5.useEffect)(
     () => {
       if (!emblaApi) return;
       const onSelect = () => {

package/dist/product.mjs

@@ -1,12 +1,12 @@
 "use client";
 import {
   product_default
-} from "./chunk-W2NXIBPS.mjs";
+} from "./chunk-TFZRXJYH.mjs";
 import "./chunk-PT7UR6AO.mjs";
 import "./chunk-7GRIGQDC.mjs";
 import "./chunk-FYA7EAMR.mjs";
 import "./chunk-2ZYGRSSA.mjs";
-import "./chunk-IIP5OKPN.mjs";
+import "./chunk-TSVDDA5K.mjs";
 import "./chunk-OHJMWJAQ.mjs";
 import "./chunk-Q3UIVGPQ.mjs";
 import "./chunk-6F23WKP2.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawbridge/components",
-  "version": "0.0.74",
+  "version": "0.0.76",
   "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;

package/dist/chunk-IIP5OKPN.mjs

@@ -1,83 +0,0 @@
-import {
-  input_group_error_default
-} from "./chunk-OHJMWJAQ.mjs";
-
-// components/input-group.js
-import { jsx, jsxs } from "react/jsx-runtime";
-var InputGroup = ({
-  className,
-  error,
-  input,
-  label,
-  message,
-  style = {},
-  ...rest
-}) => {
-  const classes = [
-    "input-group"
-  ];
-  if (className) {
-    classes.push(className);
-  }
-  if (error) {
-    classes.push("error");
-  }
-  return /* @__PURE__ */ 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> wrapping the control (not a bare <span>) so the label
-          // is programmatically associated with the input — screen readers
-          // announce the field name, clicking the text focuses the input, and
-          // getByLabel()/role queries can find it. Wrapping gives the association
-          // implicitly, so it works for any control passed via `input` without
-          // having to thread an id through every input component.
-          /* @__PURE__ */ jsxs(
-            "label",
-            {
-              ...{
-                className: "space-y-2 block"
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    ...{
-                      className: "block"
-                    },
-                    children: label
-                  }
-                ),
-                input
-              ]
-            }
-          )
-        ) : input,
-        /* @__PURE__ */ jsx(
-          input_group_error_default,
-          {
-            ...{
-              error,
-              label,
-              message,
-              style
-            }
-          }
-        )
-      ]
-    }
-  );
-};
-var input_group_default = InputGroup;
-
-export {
-  input_group_default
-};