@launchpad-ui/form - npm Package Compare versions

Comparing version 0.2.9 to 0.3.0

dist/index.es.js

@@ -13,9 +13,11 @@ // ../../scripts/react-shim.js
 import "./styles/RequiredAsterisk.css";
+import { jsx } from "react/jsx-runtime";
 var RequiredAsterisk = ({ className, testId, ...rest }) => {
   const classes = cx("RequiredAsterisk");
-  return /* @__PURE__ */ React.createElement("span", {
+  return /* @__PURE__ */ jsx("span", {
     className: classes,
     "data-test-id": testId,
-    ...rest
-  }, "*");
+    ...rest,
+    children: "*"
+  });
 };
@@ -25,2 +27,3 @@
 import "./styles/Form.css";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var Label = ({
@@ -36,9 +39,15 @@ htmlFor,
   const classes = cx2("Form-label", className, { "Form-label--disabled": disabled });
-  return /* @__PURE__ */ React.createElement("label", {
+  return /* @__PURE__ */ jsxs("label", {
     ...other,
     className: classes,
-    htmlFor
-  }, children, optional && !required && /* @__PURE__ */ React.createElement("small", {
-    className: "Form-labelOptional"
-  }, "(optional)"), required && !optional && /* @__PURE__ */ React.createElement(RequiredAsterisk, null));
+    htmlFor,
+    children: [
+      children,
+      optional && !required && /* @__PURE__ */ jsx2("small", {
+        className: "Form-labelOptional",
+        children: "(optional)"
+      }),
+      required && !optional && /* @__PURE__ */ jsx2(RequiredAsterisk, {})
+    ]
+  });
 };
@@ -48,33 +57,44 @@
 import "./styles/Form.css";
-var Checkbox = forwardRef(({
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledby,
-  children,
-  disabled,
-  testId,
-  checked,
-  labelClassName,
-  ...other
-}, ref) => {
-  const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
-  if (!children && !hasAriaLabel) {
-    console.warn("If you do not provide children, you must specify an aria-label for accessibility");
-  }
-  return /* @__PURE__ */ React.createElement(Label, {
-    className: labelClassName
-  }, /* @__PURE__ */ React.createElement("input", {
-    ...other,
-    ref,
-    checked,
-    "aria-checked": checked ? "true" : "false",
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Checkbox = forwardRef(
+  ({
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
-    className: "Form-checkbox",
+    children,
     disabled,
-    "data-test-id": testId,
-    type: "checkbox"
-  }), " ", disabled ? /* @__PURE__ */ React.createElement("span", {
-    className: "Form-label--disabled"
-  }, children) : children);
-});
+    testId,
+    checked,
+    labelClassName,
+    ...other
+  }, ref) => {
+    const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
+    if (!children && !hasAriaLabel) {
+      console.warn(
+        "If you do not provide children, you must specify an aria-label for accessibility"
+      );
+    }
+    return /* @__PURE__ */ jsxs2(Label, {
+      className: labelClassName,
+      children: [
+        /* @__PURE__ */ jsx3("input", {
+          ...other,
+          ref,
+          checked,
+          "aria-checked": checked ? "true" : "false",
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledby,
+          className: "Form-checkbox",
+          disabled,
+          "data-test-id": testId,
+          type: "checkbox"
+        }),
+        " ",
+        disabled ? /* @__PURE__ */ jsx3("span", {
+          className: "Form-label--disabled",
+          children
+        }) : children
+      ]
+    });
+  }
+);
 Checkbox.displayName = "Checkbox";
@@ -95,46 +115,54 @@
 // src/TextField.tsx
-var TextField = forwardRef2(({
-  className,
-  type = "text",
-  tiny = false,
-  readOnly,
-  tabIndex = 0,
-  testId,
-  suffix,
-  overrideWidth,
-  ...rest
-}, ref) => {
-  const classes = overrideWidth ? className : cx3("FormInput", `FormInput-${type}`, className, {
-    "FormInput--tiny": tiny
-  });
-  if (suffix) {
-    return /* @__PURE__ */ React.createElement("div", {
-      className: "FormInput-suffixContainer"
-    }, /* @__PURE__ */ React.createElement("input", {
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var TextField = forwardRef2(
+  ({
+    className,
+    type = "text",
+    tiny = false,
+    readOnly,
+    tabIndex = 0,
+    testId,
+    suffix,
+    overrideWidth,
+    ...rest
+  }, ref) => {
+    const classes = overrideWidth ? className : cx3("FormInput", `FormInput-${type}`, className, {
+      "FormInput--tiny": tiny
+    });
+    if (suffix) {
+      return /* @__PURE__ */ jsxs3("div", {
+        className: "FormInput-suffixContainer",
+        children: [
+          /* @__PURE__ */ jsx4("input", {
+            ...rest,
+            type,
+            className: cx3(classes, "FormInput-suffix"),
+            readOnly,
+            ref,
+            "data-test-id": testId,
+            "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
+          }),
+          /* @__PURE__ */ jsx4("label", {
+            className: "FormInput-suffix",
+            htmlFor: rest.id,
+            children: suffix
+          })
+        ]
+      });
+    }
+    return /* @__PURE__ */ jsx4("input", {
       ...rest,
       type,
-      className: cx3(classes, "FormInput-suffix"),
+      className: classes,
       readOnly,
+      tabIndex,
       ref,
       "data-test-id": testId,
+      style: overrideWidth ? {
+        width: overrideWidth
+      } : void 0,
       "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
-    }), /* @__PURE__ */ React.createElement("label", {
-      className: "FormInput-suffix",
-      htmlFor: rest.id
-    }, suffix));
+    });
   }
-  return /* @__PURE__ */ React.createElement("input", {
-    ...rest,
-    type,
-    className: classes,
-    readOnly,
-    tabIndex,
-    ref,
-    "data-test-id": testId,
-    style: overrideWidth ? {
-      width: overrideWidth
-    } : void 0,
-    "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
-  });
-});
+);
 TextField.displayName = "TextField";
@@ -145,38 +173,48 @@
 import "./styles/FormInput.css";
-var CompactTextField = forwardRef3(({ className, id, name, label, type, needsErrorFeedback, value, onFocus, onBlur, ...rest }, ref) => {
-  const [isActive, setIsActive] = useState((typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0);
-  const isActiveState = isActive || needsErrorFeedback;
-  const classes = cx4("CompactTextField", className, {
-    "is-active": isActiveState
-  });
-  const placeholder = isActiveState ? "" : label;
-  const handleFocus = (event) => {
-    setIsActive(true);
-    if (onFocus) {
-      onFocus(event);
-    }
-  };
-  const handleBlur = (event) => {
-    const value2 = event.target.value || "";
-    setIsActive(value2.trim().length !== 0);
-    if (onBlur) {
-      onBlur(event);
-    }
-  };
-  return /* @__PURE__ */ React.createElement("div", {
-    className: classes
-  }, /* @__PURE__ */ React.createElement(Label, {
-    htmlFor: id
-  }, label), /* @__PURE__ */ React.createElement(TextField, {
-    ...rest,
-    id,
-    name,
-    type,
-    placeholder,
-    value,
-    ref,
-    onFocus: handleFocus,
-    onBlur: handleBlur
-  }));
-});
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var CompactTextField = forwardRef3(
+  ({ className, id, name, label, type, needsErrorFeedback, value, onFocus, onBlur, ...rest }, ref) => {
+    const [isActive, setIsActive] = useState(
+      (typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0
+    );
+    const isActiveState = isActive || needsErrorFeedback;
+    const classes = cx4("CompactTextField", className, {
+      "is-active": isActiveState
+    });
+    const placeholder = isActiveState ? "" : label;
+    const handleFocus = (event) => {
+      setIsActive(true);
+      if (onFocus) {
+        onFocus(event);
+      }
+    };
+    const handleBlur = (event) => {
+      const value2 = event.target.value || "";
+      setIsActive(value2.trim().length !== 0);
+      if (onBlur) {
+        onBlur(event);
+      }
+    };
+    return /* @__PURE__ */ jsxs4("div", {
+      className: classes,
+      children: [
+        /* @__PURE__ */ jsx5(Label, {
+          htmlFor: id,
+          children: label
+        }),
+        /* @__PURE__ */ jsx5(TextField, {
+          ...rest,
+          id,
+          name,
+          type,
+          placeholder,
+          value,
+          ref,
+          onFocus: handleFocus,
+          onBlur: handleBlur
+        })
+      ]
+    });
+  }
+);
 CompactTextField.displayName = "CompactTextField";
@@ -187,2 +225,3 @@
 import "./styles/Form.css";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var FieldError = ({ name, errorMessage, className }) => {
@@ -192,7 +231,8 @@ if (!errorMessage) {
   }
-  return /* @__PURE__ */ React.createElement("span", {
+  return /* @__PURE__ */ jsx6("span", {
     className: cx5("Form-fieldError", className),
     "aria-live": "polite",
-    id: createFieldErrorId(name)
-  }, `Error - ${errorMessage}`);
+    id: createFieldErrorId(name),
+    children: `Error - ${errorMessage}`
+  });
 };
@@ -202,7 +242,9 @@
 import "./styles/FieldSet.css";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var FieldSet = ({ children, testId }) => {
-  return /* @__PURE__ */ React.createElement("fieldset", {
+  return /* @__PURE__ */ jsx7("fieldset", {
     className: "FieldSet",
-    "data-test-id": testId
-  }, children);
+    "data-test-id": testId,
+    children
+  });
 };
@@ -213,2 +255,3 @@
 import "./styles/Form.css";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var Form = (props) => {
@@ -220,3 +263,3 @@ const { id, name, className, inline, children, ariaLabel, hasIncreasedErrorMargin, ...rest } = props;
   });
-  return /* @__PURE__ */ React.createElement("form", {
+  return /* @__PURE__ */ jsx8("form", {
     id,
@@ -226,4 +269,5 @@ name,
     ...rest,
-    className: classes
-  }, children);
+    className: classes,
+    children
+  });
 };
@@ -237,2 +281,3 @@
 import "./styles/Form.css";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var FormGroup = (props) => {
@@ -243,7 +288,8 @@ const { className, name, ignoreValidation, isInvalid, children, testId, ...other } = props;
   });
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsx9("div", {
     className: classes,
     "data-test-id": testId,
-    ...other
-  }, children);
+    ...other,
+    children
+  });
 };
@@ -254,8 +300,10 @@
 import "./styles/FormHint.css";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var FormHint = ({ className, children, ...rest }) => {
   const classes = cx8("Form-hint", className);
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsx10("div", {
     ...rest,
-    className: classes
-  }, children);
+    className: classes,
+    children
+  });
 };
@@ -265,2 +313,3 @@
 import "./styles/FormField.css";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 var FormField = ({
@@ -282,3 +331,3 @@ isRequired,
   };
-  return /* @__PURE__ */ React.createElement(FormGroup, {
+  return /* @__PURE__ */ jsxs5(FormGroup, {
     className: cx9("FormField", className),
@@ -288,12 +337,23 @@ name,
     isInvalid,
-    onBlur: handleBlur
-  }, label && /* @__PURE__ */ React.createElement("label", {
-    htmlFor
-  }, label, isRequired && /* @__PURE__ */ React.createElement(RequiredAsterisk, null)), hint && /* @__PURE__ */ React.createElement(FormHint, {
-    className: "FormField-hint"
-  }, hint), children, /* @__PURE__ */ React.createElement(FieldError, {
-    className: "FormField-errorMessage",
-    name,
-    errorMessage
-  }));
+    onBlur: handleBlur,
+    children: [
+      label && /* @__PURE__ */ jsxs5("label", {
+        htmlFor,
+        children: [
+          label,
+          isRequired && /* @__PURE__ */ jsx11(RequiredAsterisk, {})
+        ]
+      }),
+      hint && /* @__PURE__ */ jsx11(FormHint, {
+        className: "FormField-hint",
+        children: hint
+      }),
+      children,
+      /* @__PURE__ */ jsx11(FieldError, {
+        className: "FormField-errorMessage",
+        name,
+        errorMessage
+      })
+    ]
+  });
 };
@@ -304,9 +364,14 @@
 import "./styles/IconField.css";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 var IconField = ({ icon, children }) => {
   const Icon = icon;
-  return /* @__PURE__ */ React.createElement("div", {
-    className: "IconField"
-  }, children, /* @__PURE__ */ React.createElement(Icon, {
-    size: IconSize.SMALL
-  }));
+  return /* @__PURE__ */ jsxs6("div", {
+    className: "IconField",
+    children: [
+      children,
+      /* @__PURE__ */ jsx12(Icon, {
+        size: IconSize.SMALL
+      })
+    ]
+  });
 };
@@ -317,8 +382,10 @@
 import "./styles/InputGroup.css";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var InputGroup = ({ className, children, ...other }) => {
   const classes = cx10("InputGroup", className);
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsx13("div", {
     ...other,
-    className: classes
-  }, children);
+    className: classes,
+    children
+  });
 };
@@ -329,2 +396,3 @@
 import "./styles/Form.css";
+import { Fragment, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 var Radio = ({
@@ -347,23 +415,32 @@ "aria-label": ariaLabel,
   if (!children && !hasAriaLabel) {
-    console.warn("If you do not provide children, you must specify an aria-label for accessibility");
+    console.warn(
+      "If you do not provide children, you must specify an aria-label for accessibility"
+    );
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("input", {
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledby,
-    className: cx11("Form-radio", className),
-    checked,
-    disabled,
-    id,
-    name,
-    onChange,
-    type: "radio",
-    value,
-    ...props
-  }), /* @__PURE__ */ React.createElement(Label, {
-    className: labelClassName,
-    htmlFor: id,
-    style: labelStyle
-  }, disabled ? /* @__PURE__ */ React.createElement("span", {
-    className: "Form-label--disabled"
-  }, children) : children));
+  return /* @__PURE__ */ jsxs7(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx14("input", {
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledby,
+        className: cx11("Form-radio", className),
+        checked,
+        disabled,
+        id,
+        name,
+        onChange,
+        type: "radio",
+        value,
+        ...props
+      }),
+      /* @__PURE__ */ jsx14(Label, {
+        className: labelClassName,
+        htmlFor: id,
+        style: labelStyle,
+        children: disabled ? /* @__PURE__ */ jsx14("span", {
+          className: "Form-label--disabled",
+          children
+        }) : children
+      })
+    ]
+  });
 };
@@ -375,2 +452,3 @@
 import "./styles/Form.css";
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 var RadioGroup = (props) => {
@@ -416,7 +494,16 @@ const { name, value, onChange, children, disabled, legend, ...other } = props;
   const radios = Children.map(children, (child) => updateRadioElems(child));
-  return /* @__PURE__ */ React.createElement("fieldset", {
-    ref: fieldsetRef
-  }, legend && /* @__PURE__ */ React.createElement("legend", null, /* @__PURE__ */ React.createElement(VisuallyHidden, null, legend)), /* @__PURE__ */ React.createElement("div", {
-    ...other
-  }, radios));
+  return /* @__PURE__ */ jsxs8("fieldset", {
+    ref: fieldsetRef,
+    children: [
+      legend && /* @__PURE__ */ jsx15("legend", {
+        children: /* @__PURE__ */ jsx15(VisuallyHidden, {
+          children: legend
+        })
+      }),
+      /* @__PURE__ */ jsx15("div", {
+        ...other,
+        children: radios
+      })
+    ]
+  });
 };
@@ -427,9 +514,11 @@
 import "./styles/FormInput.css";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var Select = ({ className, children, testId, ...rest }) => {
   const classes = cx12("FormInput", "FormInput-select", className);
-  return /* @__PURE__ */ React.createElement("select", {
+  return /* @__PURE__ */ jsx16("select", {
     ...rest,
     className: classes,
-    "data-test-id": testId
-  }, children);
+    "data-test-id": testId,
+    children
+  });
 };
@@ -441,2 +530,3 @@
 import "./styles/FormInput.css";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var TextArea = forwardRef4(({ className, ...props }, ref) => {
@@ -451,3 +541,3 @@ const onKeyDown = (e) => {
   };
-  return /* @__PURE__ */ React.createElement("textarea", {
+  return /* @__PURE__ */ jsx17("textarea", {
     ...props,
@@ -454,0 +544,0 @@ className: cx13("FormInput", className),

dist/index.js

@@ -20,3 +20,6 @@ "use strict";
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
@@ -59,9 +62,11 @@
 var import_RequiredAsterisk = require("./styles/RequiredAsterisk.css");
+var import_jsx_runtime = require("react/jsx-runtime");
 var RequiredAsterisk = ({ className, testId, ...rest }) => {
   const classes = (0, import_clsx.default)("RequiredAsterisk");
-  return /* @__PURE__ */ React.createElement("span", {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
     className: classes,
     "data-test-id": testId,
-    ...rest
-  }, "*");
+    ...rest,
+    children: "*"
+  });
 };
@@ -71,2 +76,3 @@
 var import_Form = require("./styles/Form.css");
+var import_jsx_runtime = require("react/jsx-runtime");
 var Label = ({
@@ -82,9 +88,15 @@ htmlFor,
   const classes = (0, import_clsx2.default)("Form-label", className, { "Form-label--disabled": disabled });
-  return /* @__PURE__ */ React.createElement("label", {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
     ...other,
     className: classes,
-    htmlFor
-  }, children, optional && !required && /* @__PURE__ */ React.createElement("small", {
-    className: "Form-labelOptional"
-  }, "(optional)"), required && !optional && /* @__PURE__ */ React.createElement(RequiredAsterisk, null));
+    htmlFor,
+    children: [
+      children,
+      optional && !required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", {
+        className: "Form-labelOptional",
+        children: "(optional)"
+      }),
+      required && !optional && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RequiredAsterisk, {})
+    ]
+  });
 };
@@ -94,33 +106,44 @@
 var import_Form2 = require("./styles/Form.css");
-var Checkbox = (0, import_react.forwardRef)(({
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledby,
-  children,
-  disabled,
-  testId,
-  checked,
-  labelClassName,
-  ...other
-}, ref) => {
-  const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
-  if (!children && !hasAriaLabel) {
-    console.warn("If you do not provide children, you must specify an aria-label for accessibility");
-  }
-  return /* @__PURE__ */ React.createElement(Label, {
-    className: labelClassName
-  }, /* @__PURE__ */ React.createElement("input", {
-    ...other,
-    ref,
-    checked,
-    "aria-checked": checked ? "true" : "false",
+var import_jsx_runtime = require("react/jsx-runtime");
+var Checkbox = (0, import_react.forwardRef)(
+  ({
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
-    className: "Form-checkbox",
+    children,
     disabled,
-    "data-test-id": testId,
-    type: "checkbox"
-  }), " ", disabled ? /* @__PURE__ */ React.createElement("span", {
-    className: "Form-label--disabled"
-  }, children) : children);
-});
+    testId,
+    checked,
+    labelClassName,
+    ...other
+  }, ref) => {
+    const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
+    if (!children && !hasAriaLabel) {
+      console.warn(
+        "If you do not provide children, you must specify an aria-label for accessibility"
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Label, {
+      className: labelClassName,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+          ...other,
+          ref,
+          checked,
+          "aria-checked": checked ? "true" : "false",
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledby,
+          className: "Form-checkbox",
+          disabled,
+          "data-test-id": testId,
+          type: "checkbox"
+        }),
+        " ",
+        disabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+          className: "Form-label--disabled",
+          children
+        }) : children
+      ]
+    });
+  }
+);
 Checkbox.displayName = "Checkbox";
@@ -141,46 +164,54 @@
 // src/TextField.tsx
-var TextField = (0, import_react2.forwardRef)(({
-  className,
-  type = "text",
-  tiny = false,
-  readOnly,
-  tabIndex = 0,
-  testId,
-  suffix,
-  overrideWidth,
-  ...rest
-}, ref) => {
-  const classes = overrideWidth ? className : (0, import_clsx3.default)("FormInput", `FormInput-${type}`, className, {
-    "FormInput--tiny": tiny
-  });
-  if (suffix) {
-    return /* @__PURE__ */ React.createElement("div", {
-      className: "FormInput-suffixContainer"
-    }, /* @__PURE__ */ React.createElement("input", {
+var import_jsx_runtime = require("react/jsx-runtime");
+var TextField = (0, import_react2.forwardRef)(
+  ({
+    className,
+    type = "text",
+    tiny = false,
+    readOnly,
+    tabIndex = 0,
+    testId,
+    suffix,
+    overrideWidth,
+    ...rest
+  }, ref) => {
+    const classes = overrideWidth ? className : (0, import_clsx3.default)("FormInput", `FormInput-${type}`, className, {
+      "FormInput--tiny": tiny
+    });
+    if (suffix) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+        className: "FormInput-suffixContainer",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+            ...rest,
+            type,
+            className: (0, import_clsx3.default)(classes, "FormInput-suffix"),
+            readOnly,
+            ref,
+            "data-test-id": testId,
+            "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
+            className: "FormInput-suffix",
+            htmlFor: rest.id,
+            children: suffix
+          })
+        ]
+      });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
       ...rest,
       type,
-      className: (0, import_clsx3.default)(classes, "FormInput-suffix"),
+      className: classes,
       readOnly,
+      tabIndex,
       ref,
       "data-test-id": testId,
+      style: overrideWidth ? {
+        width: overrideWidth
+      } : void 0,
       "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
-    }), /* @__PURE__ */ React.createElement("label", {
-      className: "FormInput-suffix",
-      htmlFor: rest.id
-    }, suffix));
+    });
   }
-  return /* @__PURE__ */ React.createElement("input", {
-    ...rest,
-    type,
-    className: classes,
-    readOnly,
-    tabIndex,
-    ref,
-    "data-test-id": testId,
-    style: overrideWidth ? {
-      width: overrideWidth
-    } : void 0,
-    "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
-  });
-});
+);
 TextField.displayName = "TextField";
@@ -191,38 +222,48 @@
 var import_FormInput2 = require("./styles/FormInput.css");
-var CompactTextField = (0, import_react3.forwardRef)(({ className, id, name, label, type, needsErrorFeedback, value, onFocus, onBlur, ...rest }, ref) => {
-  const [isActive, setIsActive] = (0, import_react3.useState)((typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0);
-  const isActiveState = isActive || needsErrorFeedback;
-  const classes = (0, import_clsx4.default)("CompactTextField", className, {
-    "is-active": isActiveState
-  });
-  const placeholder = isActiveState ? "" : label;
-  const handleFocus = (event) => {
-    setIsActive(true);
-    if (onFocus) {
-      onFocus(event);
-    }
-  };
-  const handleBlur = (event) => {
-    const value2 = event.target.value || "";
-    setIsActive(value2.trim().length !== 0);
-    if (onBlur) {
-      onBlur(event);
-    }
-  };
-  return /* @__PURE__ */ React.createElement("div", {
-    className: classes
-  }, /* @__PURE__ */ React.createElement(Label, {
-    htmlFor: id
-  }, label), /* @__PURE__ */ React.createElement(TextField, {
-    ...rest,
-    id,
-    name,
-    type,
-    placeholder,
-    value,
-    ref,
-    onFocus: handleFocus,
-    onBlur: handleBlur
-  }));
-});
+var import_jsx_runtime = require("react/jsx-runtime");
+var CompactTextField = (0, import_react3.forwardRef)(
+  ({ className, id, name, label, type, needsErrorFeedback, value, onFocus, onBlur, ...rest }, ref) => {
+    const [isActive, setIsActive] = (0, import_react3.useState)(
+      (typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0
+    );
+    const isActiveState = isActive || needsErrorFeedback;
+    const classes = (0, import_clsx4.default)("CompactTextField", className, {
+      "is-active": isActiveState
+    });
+    const placeholder = isActiveState ? "" : label;
+    const handleFocus = (event) => {
+      setIsActive(true);
+      if (onFocus) {
+        onFocus(event);
+      }
+    };
+    const handleBlur = (event) => {
+      const value2 = event.target.value || "";
+      setIsActive(value2.trim().length !== 0);
+      if (onBlur) {
+        onBlur(event);
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+      className: classes,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, {
+          htmlFor: id,
+          children: label
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextField, {
+          ...rest,
+          id,
+          name,
+          type,
+          placeholder,
+          value,
+          ref,
+          onFocus: handleFocus,
+          onBlur: handleBlur
+        })
+      ]
+    });
+  }
+);
 CompactTextField.displayName = "CompactTextField";
@@ -233,2 +274,3 @@
 var import_Form3 = require("./styles/Form.css");
+var import_jsx_runtime = require("react/jsx-runtime");
 var FieldError = ({ name, errorMessage, className }) => {
@@ -238,7 +280,8 @@ if (!errorMessage) {
   }
-  return /* @__PURE__ */ React.createElement("span", {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
     className: (0, import_clsx5.default)("Form-fieldError", className),
     "aria-live": "polite",
-    id: createFieldErrorId(name)
-  }, `Error - ${errorMessage}`);
+    id: createFieldErrorId(name),
+    children: `Error - ${errorMessage}`
+  });
 };
@@ -248,7 +291,9 @@
 var import_FieldSet = require("./styles/FieldSet.css");
+var import_jsx_runtime = require("react/jsx-runtime");
 var FieldSet = ({ children, testId }) => {
-  return /* @__PURE__ */ React.createElement("fieldset", {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("fieldset", {
     className: "FieldSet",
-    "data-test-id": testId
-  }, children);
+    "data-test-id": testId,
+    children
+  });
 };
@@ -259,2 +304,3 @@
 var import_Form4 = require("./styles/Form.css");
+var import_jsx_runtime = require("react/jsx-runtime");
 var Form = (props) => {
@@ -266,3 +312,3 @@ const { id, name, className, inline, children, ariaLabel, hasIncreasedErrorMargin, ...rest } = props;
   });
-  return /* @__PURE__ */ React.createElement("form", {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("form", {
     id,
@@ -272,4 +318,5 @@ name,
     ...rest,
-    className: classes
-  }, children);
+    className: classes,
+    children
+  });
 };
@@ -283,2 +330,3 @@
 var import_Form5 = require("./styles/Form.css");
+var import_jsx_runtime = require("react/jsx-runtime");
 var FormGroup = (props) => {
@@ -289,7 +337,8 @@ const { className, name, ignoreValidation, isInvalid, children, testId, ...other } = props;
   });
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
     className: classes,
     "data-test-id": testId,
-    ...other
-  }, children);
+    ...other,
+    children
+  });
 };
@@ -300,8 +349,10 @@
 var import_FormHint = require("./styles/FormHint.css");
+var import_jsx_runtime = require("react/jsx-runtime");
 var FormHint = ({ className, children, ...rest }) => {
   const classes = (0, import_clsx8.default)("Form-hint", className);
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
     ...rest,
-    className: classes
-  }, children);
+    className: classes,
+    children
+  });
 };
@@ -311,2 +362,3 @@
 var import_FormField = require("./styles/FormField.css");
+var import_jsx_runtime = require("react/jsx-runtime");
 var FormField = ({
@@ -328,3 +380,3 @@ isRequired,
   };
-  return /* @__PURE__ */ React.createElement(FormGroup, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FormGroup, {
     className: (0, import_clsx9.default)("FormField", className),
@@ -334,12 +386,23 @@ name,
     isInvalid,
-    onBlur: handleBlur
-  }, label && /* @__PURE__ */ React.createElement("label", {
-    htmlFor
-  }, label, isRequired && /* @__PURE__ */ React.createElement(RequiredAsterisk, null)), hint && /* @__PURE__ */ React.createElement(FormHint, {
-    className: "FormField-hint"
-  }, hint), children, /* @__PURE__ */ React.createElement(FieldError, {
-    className: "FormField-errorMessage",
-    name,
-    errorMessage
-  }));
+    onBlur: handleBlur,
+    children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
+        htmlFor,
+        children: [
+          label,
+          isRequired && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RequiredAsterisk, {})
+        ]
+      }),
+      hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormHint, {
+        className: "FormField-hint",
+        children: hint
+      }),
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldError, {
+        className: "FormField-errorMessage",
+        name,
+        errorMessage
+      })
+    ]
+  });
 };
@@ -350,9 +413,14 @@
 var import_IconField = require("./styles/IconField.css");
+var import_jsx_runtime = require("react/jsx-runtime");
 var IconField = ({ icon, children }) => {
   const Icon = icon;
-  return /* @__PURE__ */ React.createElement("div", {
-    className: "IconField"
-  }, children, /* @__PURE__ */ React.createElement(Icon, {
-    size: import_icons.IconSize.SMALL
-  }));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+    className: "IconField",
+    children: [
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
+        size: import_icons.IconSize.SMALL
+      })
+    ]
+  });
 };
@@ -363,8 +431,10 @@
 var import_InputGroup = require("./styles/InputGroup.css");
+var import_jsx_runtime = require("react/jsx-runtime");
 var InputGroup = ({ className, children, ...other }) => {
   const classes = (0, import_clsx10.default)("InputGroup", className);
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
     ...other,
-    className: classes
-  }, children);
+    className: classes,
+    children
+  });
 };
@@ -375,2 +445,3 @@
 var import_Form6 = require("./styles/Form.css");
+var import_jsx_runtime = require("react/jsx-runtime");
 var Radio = ({
@@ -393,23 +464,32 @@ "aria-label": ariaLabel,
   if (!children && !hasAriaLabel) {
-    console.warn("If you do not provide children, you must specify an aria-label for accessibility");
+    console.warn(
+      "If you do not provide children, you must specify an aria-label for accessibility"
+    );
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("input", {
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledby,
-    className: (0, import_clsx11.default)("Form-radio", className),
-    checked,
-    disabled,
-    id,
-    name,
-    onChange,
-    type: "radio",
-    value,
-    ...props
-  }), /* @__PURE__ */ React.createElement(Label, {
-    className: labelClassName,
-    htmlFor: id,
-    style: labelStyle
-  }, disabled ? /* @__PURE__ */ React.createElement("span", {
-    className: "Form-label--disabled"
-  }, children) : children));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledby,
+        className: (0, import_clsx11.default)("Form-radio", className),
+        checked,
+        disabled,
+        id,
+        name,
+        onChange,
+        type: "radio",
+        value,
+        ...props
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, {
+        className: labelClassName,
+        htmlFor: id,
+        style: labelStyle,
+        children: disabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+          className: "Form-label--disabled",
+          children
+        }) : children
+      })
+    ]
+  });
 };
@@ -421,2 +501,3 @@
 var import_Form7 = require("./styles/Form.css");
+var import_jsx_runtime = require("react/jsx-runtime");
 var RadioGroup = (props) => {
@@ -462,7 +543,16 @@ const { name, value, onChange, children, disabled, legend, ...other } = props;
   const radios = import_react4.Children.map(children, (child) => updateRadioElems(child));
-  return /* @__PURE__ */ React.createElement("fieldset", {
-    ref: fieldsetRef
-  }, legend && /* @__PURE__ */ React.createElement("legend", null, /* @__PURE__ */ React.createElement(import_visually_hidden.VisuallyHidden, null, legend)), /* @__PURE__ */ React.createElement("div", {
-    ...other
-  }, radios));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", {
+    ref: fieldsetRef,
+    children: [
+      legend && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("legend", {
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_visually_hidden.VisuallyHidden, {
+          children: legend
+        })
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+        ...other,
+        children: radios
+      })
+    ]
+  });
 };
@@ -473,9 +563,11 @@
 var import_FormInput3 = require("./styles/FormInput.css");
+var import_jsx_runtime = require("react/jsx-runtime");
 var Select = ({ className, children, testId, ...rest }) => {
   const classes = (0, import_clsx12.default)("FormInput", "FormInput-select", className);
-  return /* @__PURE__ */ React.createElement("select", {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("select", {
     ...rest,
     className: classes,
-    "data-test-id": testId
-  }, children);
+    "data-test-id": testId,
+    children
+  });
 };
@@ -487,2 +579,3 @@
 var import_FormInput4 = require("./styles/FormInput.css");
+var import_jsx_runtime = require("react/jsx-runtime");
 var TextArea = (0, import_react5.forwardRef)(({ className, ...props }, ref) => {
@@ -497,3 +590,3 @@ const onKeyDown = (e) => {
   };
-  return /* @__PURE__ */ React.createElement("textarea", {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", {
     ...props,
@@ -500,0 +593,0 @@ className: (0, import_clsx13.default)("FormInput", className),

package.json

 {
   "name": "@launchpad-ui/form",
-  "version": "0.2.9",
+  "version": "0.3.0",
   "status": "beta",
@@ -29,3 +29,3 @@ "publishConfig": {
   "dependencies": {
-    "@launchpad-ui/icons": "~0.2.4",
+    "@launchpad-ui/icons": "~0.3.0",
     "@launchpad-ui/tokens": "~0.1.5",
@@ -36,4 +36,4 @@ "@react-aria/visually-hidden": "^3.4.0",
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
@@ -40,0 +40,0 @@ "devDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

151747

increased by4.84%

Lines of code

1511

increased by13.78%

Dependency changes

• + Added@launchpad-ui/icons@0.3.3(transitive)

• + Addedclassix@2.1.38(transitive)

• - Removed@launchpad-ui/icons@0.2.4(transitive)

• - Removeduuid@8.3.2(transitive)

• Updated@launchpad-ui/icons@~0.3.0