@launchpad-ui/form - npm Package Compare versions

Comparing version 0.3.5 to 0.4.0

dist/Checkbox.d.ts

@@ -1,2 +0,2 @@
-import type { InputHTMLAttributes } from 'react';
+import type { InputHTMLAttributes, ReactNode } from 'react';
 import './styles/Form.css';
@@ -17,3 +17,3 @@ declare type CheckboxProps = InputHTMLAttributes<HTMLInputElement> & {
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
@@ -42,3 +42,3 @@ * The className to pass into the Checkbox's Label component
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
@@ -45,0 +45,0 @@ * The className to pass into the Checkbox's Label component

dist/index.es.js

@@ -1,12 +0,13 @@
-// src/Checkbox.tsx
-import { forwardRef } from "react";
-
-// src/Label.tsx
-import { cx as cx2 } from "classix";
-
-// src/RequiredAsterisk.tsx
+import './style.css';
+import { forwardRef, useState, useRef, Children, isValidElement, cloneElement } from "react";
 import { cx } from "classix";
-import "./styles/RequiredAsterisk.css";
-import { jsx } from "react/jsx-runtime";
-var RequiredAsterisk = ({ className, testId, ...rest }) => {
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { IconSize } from "@launchpad-ui/icons";
+import { VisuallyHidden } from "@react-aria/visually-hidden";
+const RequiredAsterisk$1 = "";
+const RequiredAsterisk = ({
+  className,
+  testId,
+  ...rest
+}) => {
   const classes = cx("RequiredAsterisk");
@@ -20,7 +21,4 @@ return /* @__PURE__ */ jsx("span", {
 };
-
-// src/Label.tsx
-import "./styles/Form.css";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var Label = ({
+const Form$1 = "";
+const Label = ({
   htmlFor,
@@ -34,3 +32,3 @@ disabled,
 }) => {
-  const classes = cx2("Form-label", className, disabled && "Form-label--disabled");
+  const classes = cx("Form-label", className, disabled && "Form-label--disabled");
   return /* @__PURE__ */ jsxs("label", {
@@ -40,183 +38,148 @@ ...other,
     htmlFor,
-    children: [
-      children,
-      optional && !required && /* @__PURE__ */ jsx2("small", {
-        className: "Form-labelOptional",
-        children: "(optional)"
-      }),
-      required && !optional && /* @__PURE__ */ jsx2(RequiredAsterisk, {})
-    ]
+    children: [children, optional && !required && /* @__PURE__ */ jsx("small", {
+      className: "Form-labelOptional",
+      children: "(optional)"
+    }), required && !optional && /* @__PURE__ */ jsx(RequiredAsterisk, {})]
   });
 };
-
-// src/Checkbox.tsx
-import "./styles/Form.css";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-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__ */ 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
-      ]
+const 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__ */ jsxs(Label, {
+    className: labelClassName,
+    children: [/* @__PURE__ */ 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__ */ jsx("span", {
+      className: "Form-label--disabled",
+      children
+    }) : children]
+  });
+});
+Checkbox.displayName = "Checkbox";
+const FormInput = "";
+const createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
+const TextField = forwardRef(({
+  className,
+  type = "text",
+  tiny = false,
+  readOnly,
+  tabIndex = 0,
+  testId,
+  suffix,
+  overrideWidth,
+  ...rest
+}, ref) => {
+  const classes = overrideWidth ? className : cx("FormInput", `FormInput-${type}`, className, tiny && "FormInput--tiny");
+  if (suffix) {
+    return /* @__PURE__ */ jsxs("div", {
+      className: "FormInput-suffixContainer",
+      children: [/* @__PURE__ */ jsx("input", {
+        ...rest,
+        type,
+        className: cx(classes, "FormInput-suffix"),
+        readOnly,
+        ref,
+        "data-test-id": testId,
+        "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
+      }), /* @__PURE__ */ jsx("label", {
+        className: "FormInput-suffix",
+        htmlFor: rest.id,
+        children: suffix
+      })]
     });
   }
-);
-Checkbox.displayName = "Checkbox";
-
-// src/CompactTextField.tsx
-import { cx as cx4 } from "classix";
-import { forwardRef as forwardRef3, useState } from "react";
-
-// src/TextField.tsx
-import { cx as cx3 } from "classix";
-import { forwardRef as forwardRef2 } from "react";
-import "./styles/FormInput.css";
-
-// src/utils/index.ts
-var createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
-
-// src/TextField.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var TextField = forwardRef2(
-  ({
-    className,
-    type = "text",
-    tiny = false,
+  return /* @__PURE__ */ jsx("input", {
+    ...rest,
+    type,
+    className: classes,
     readOnly,
-    tabIndex = 0,
-    testId,
-    suffix,
-    overrideWidth,
-    ...rest
-  }, ref) => {
-    const classes = overrideWidth ? className : cx3("FormInput", `FormInput-${type}`, className, tiny && "FormInput--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
-          })
-        ]
-      });
+    tabIndex,
+    ref,
+    "data-test-id": testId,
+    style: overrideWidth ? {
+      width: overrideWidth
+    } : void 0,
+    "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
+  });
+});
+TextField.displayName = "TextField";
+const CompactTextField$1 = "";
+const CompactTextField = forwardRef(({
+  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 = cx("CompactTextField", className, isActiveState && "is-active");
+  const placeholder = isActiveState ? "" : label;
+  const handleFocus = (event) => {
+    setIsActive(true);
+    if (onFocus) {
+      onFocus(event);
     }
-    return /* @__PURE__ */ jsx4("input", {
+  };
+  const handleBlur = (event) => {
+    const value2 = event.target.value || "";
+    setIsActive(value2.trim().length !== 0);
+    if (onBlur) {
+      onBlur(event);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", {
+    className: classes,
+    children: [/* @__PURE__ */ jsx(Label, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsx(TextField, {
       ...rest,
+      id,
+      name,
       type,
-      className: classes,
-      readOnly,
-      tabIndex,
+      placeholder,
+      value,
       ref,
-      "data-test-id": testId,
-      style: overrideWidth ? {
-        width: overrideWidth
-      } : void 0,
-      "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
-    });
-  }
-);
-TextField.displayName = "TextField";
-
-// src/CompactTextField.tsx
-import "./styles/CompactTextField.css";
-import "./styles/FormInput.css";
-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, isActiveState && "is-active");
-    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
-        })
-      ]
-    });
-  }
-);
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    })]
+  });
+});
 CompactTextField.displayName = "CompactTextField";
-
-// src/FieldError.tsx
-import { cx as cx5 } from "classix";
-import "./styles/Form.css";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var FieldError = ({ name, errorMessage, className }) => {
+const FieldError = ({
+  name,
+  errorMessage,
+  className
+}) => {
   if (!errorMessage) {
     return null;
   }
-  return /* @__PURE__ */ jsx6("span", {
-    className: cx5("Form-fieldError", className),
+  return /* @__PURE__ */ jsx("span", {
+    className: cx("Form-fieldError", className),
     "aria-live": "polite",
@@ -227,8 +190,8 @@ id: createFieldErrorId(name),
 };
-
-// src/FieldSet.tsx
-import "./styles/FieldSet.css";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var FieldSet = ({ children, testId }) => {
-  return /* @__PURE__ */ jsx7("fieldset", {
+const FieldSet$1 = "";
+const FieldSet = ({
+  children,
+  testId
+}) => {
+  return /* @__PURE__ */ jsx("fieldset", {
     className: "FieldSet",
@@ -239,16 +202,15 @@ "data-test-id": testId,
 };
-
-// src/Form.tsx
-import { cx as cx6 } from "classix";
-import "./styles/Form.css";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var Form = (props) => {
-  const { id, name, className, inline, children, ariaLabel, hasIncreasedErrorMargin, ...rest } = props;
-  const classes = cx6(
-    "Form",
+const Form = (props) => {
+  const {
+    id,
+    name,
     className,
-    inline && "Form--inline",
-    !!hasIncreasedErrorMargin && "Form--increasedErrorMargin"
-  );
-  return /* @__PURE__ */ jsx8("form", {
+    inline,
+    children,
+    ariaLabel,
+    hasIncreasedErrorMargin,
+    ...rest
+  } = props;
+  const classes = cx("Form", className, inline && "Form--inline", !!hasIncreasedErrorMargin && "Form--increasedErrorMargin");
+  return /* @__PURE__ */ jsx("form", {
     id,
@@ -262,14 +224,14 @@ name,
 };
-
-// src/FormField.tsx
-import { cx as cx9 } from "classix";
-
-// src/FormGroup.tsx
-import { cx as cx7 } from "classix";
-import "./styles/Form.css";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var FormGroup = (props) => {
-  const { className, name, ignoreValidation, isInvalid, children, testId, ...other } = props;
-  const classes = cx7("Form-group", className, !ignoreValidation && isInvalid && "is-invalid");
-  return /* @__PURE__ */ jsx9("div", {
+const FormGroup = (props) => {
+  const {
+    className,
+    name,
+    ignoreValidation,
+    isInvalid,
+    children,
+    testId,
+    ...other
+  } = props;
+  const classes = cx("Form-group", className, !ignoreValidation && isInvalid && "is-invalid");
+  return /* @__PURE__ */ jsx("div", {
     className: classes,
@@ -281,10 +243,10 @@ "data-test-id": testId,
 };
-
-// src/FormHint.tsx
-import { cx as cx8 } from "classix";
-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__ */ jsx10("div", {
+const FormHint$1 = "";
+const FormHint = ({
+  className,
+  children,
+  ...rest
+}) => {
+  const classes = cx("Form-hint", className);
+  return /* @__PURE__ */ jsx("div", {
     ...rest,
@@ -295,7 +257,4 @@ className: classes,
 };
-
-// src/FormField.tsx
-import "./styles/FormField.css";
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
-var FormField = ({
+const FormField$1 = "";
+const FormField = ({
   isRequired,
@@ -316,4 +275,4 @@ label,
   };
-  return /* @__PURE__ */ jsxs5(FormGroup, {
-    className: cx9("FormField", className),
+  return /* @__PURE__ */ jsxs(FormGroup, {
+    className: cx("FormField", className),
     name,
@@ -323,48 +282,36 @@ ignoreValidation,
     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
-      })
-    ]
+    children: [label && /* @__PURE__ */ jsxs("label", {
+      htmlFor,
+      children: [label, isRequired && /* @__PURE__ */ jsx(RequiredAsterisk, {})]
+    }), hint && /* @__PURE__ */ jsx(FormHint, {
+      className: "FormField-hint",
+      children: hint
+    }), children, /* @__PURE__ */ jsx(FieldError, {
+      className: "FormField-errorMessage",
+      name,
+      errorMessage
+    })]
   });
 };
-
-// src/IconField.tsx
-import { IconSize } from "@launchpad-ui/icons";
-import "./styles/IconField.css";
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
-var IconField = ({ icon, children }) => {
+const IconField$1 = "";
+const IconField = ({
+  icon,
+  children
+}) => {
   const Icon = icon;
-  return /* @__PURE__ */ jsxs6("div", {
+  return /* @__PURE__ */ jsxs("div", {
     className: "IconField",
-    children: [
-      children,
-      /* @__PURE__ */ jsx12(Icon, {
-        size: IconSize.SMALL
-      })
-    ]
+    children: [children, /* @__PURE__ */ jsx(Icon, {
+      size: IconSize.SMALL
+    })]
   });
 };
-
-// src/InputGroup.tsx
-import { cx as cx10 } from "classix";
-import "./styles/InputGroup.css";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var InputGroup = ({ className, children, ...other }) => {
-  const classes = cx10("InputGroup", className);
-  return /* @__PURE__ */ jsx13("div", {
+const InputGroup$1 = "";
+const InputGroup = ({
+  className,
+  children,
+  ...other
+}) => {
+  const classes = cx("InputGroup", className);
+  return /* @__PURE__ */ jsx("div", {
     ...other,
@@ -375,8 +322,3 @@ className: classes,
 };
-
-// src/Radio.tsx
-import { cx as cx11 } from "classix";
-import "./styles/Form.css";
-import { Fragment, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
-var Radio = ({
+const Radio = ({
   "aria-label": ariaLabel,
@@ -398,43 +340,41 @@ "aria-labelledby": ariaLabelledby,
   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__ */ 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
-      })
-    ]
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx("input", {
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      className: cx("Form-radio", className),
+      checked,
+      disabled,
+      id,
+      name,
+      onChange,
+      type: "radio",
+      value,
+      ...props
+    }), /* @__PURE__ */ jsx(Label, {
+      className: labelClassName,
+      htmlFor: id,
+      style: labelStyle,
+      children: disabled ? /* @__PURE__ */ jsx("span", {
+        className: "Form-label--disabled",
+        children
+      }) : children
+    })]
   });
 };
-
-// src/RadioGroup.tsx
-import { VisuallyHidden } from "@react-aria/visually-hidden";
-import { Children, cloneElement, isValidElement, useRef } from "react";
-import "./styles/Form.css";
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
-var RadioGroup = (props) => {
-  const { name, value, onChange, children, disabled, legend, ...other } = props;
+const RadioGroup = (props) => {
+  const {
+    name,
+    value,
+    onChange,
+    children,
+    disabled,
+    legend,
+    ...other
+  } = props;
   const fieldsetRef = useRef(null);
   function updateRadioElems(elem) {
+    var _a, _b;
     if (!isValidElement(elem)) {
@@ -444,3 +384,3 @@ return elem;
     const item = elem;
-    if (item?.type && item.type === Radio) {
+    if ((item == null ? void 0 : item.type) && item.type === Radio) {
       return cloneElement(item, {
@@ -451,6 +391,6 @@ ...item.props,
         onChange,
-        disabled: typeof item.props?.disabled !== "undefined" ? item.props.disabled : disabled
+        disabled: typeof ((_a = item.props) == null ? void 0 : _a.disabled) !== "undefined" ? item.props.disabled : disabled
       });
     }
-    if (item?.type && item.type === Label) {
+    if ((item == null ? void 0 : item.type) && item.type === Label) {
       return cloneElement(item, {
@@ -462,3 +402,3 @@ ...item.props,
     }
-    const elemChildren = item?.props?.children;
+    const elemChildren = (_b = item == null ? void 0 : item.props) == null ? void 0 : _b.children;
     if (elemChildren) {
@@ -474,3 +414,3 @@ if (Array.isArray(elemChildren)) {
     }
-    if (item?.type && item.type !== Radio && item.type !== Label) {
+    if ((item == null ? void 0 : item.type) && item.type !== Radio && item.type !== Label) {
       return item;
@@ -481,25 +421,22 @@ }
   const radios = Children.map(children, (child) => updateRadioElems(child));
-  return /* @__PURE__ */ jsxs8("fieldset", {
+  return /* @__PURE__ */ jsxs("fieldset", {
     ref: fieldsetRef,
-    children: [
-      legend && /* @__PURE__ */ jsx15("legend", {
-        children: /* @__PURE__ */ jsx15(VisuallyHidden, {
-          children: legend
-        })
-      }),
-      /* @__PURE__ */ jsx15("div", {
-        ...other,
-        children: radios
+    children: [legend && /* @__PURE__ */ jsx("legend", {
+      children: /* @__PURE__ */ jsx(VisuallyHidden, {
+        children: legend
       })
-    ]
+    }), /* @__PURE__ */ jsx("div", {
+      ...other,
+      children: radios
+    })]
   });
 };
-
-// src/Select.tsx
-import { cx as cx12 } from "classix";
-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__ */ jsx16("select", {
+const Select = ({
+  className,
+  children,
+  testId,
+  ...rest
+}) => {
+  const classes = cx("FormInput", "FormInput-select", className);
+  return /* @__PURE__ */ jsx("select", {
     ...rest,
@@ -511,9 +448,6 @@ className: classes,
 };
-
-// src/TextArea.tsx
-import { cx as cx13 } from "classix";
-import { forwardRef as forwardRef4 } from "react";
-import "./styles/FormInput.css";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var TextArea = forwardRef4(({ className, ...props }, ref) => {
+const TextArea = forwardRef(({
+  className,
+  ...props
+}, ref) => {
   const onKeyDown = (e) => {
@@ -527,5 +461,5 @@ if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
   };
-  return /* @__PURE__ */ jsx17("textarea", {
+  return /* @__PURE__ */ jsx("textarea", {
     ...props,
-    className: cx13("FormInput", className),
+    className: cx("FormInput", className),
     ref,
@@ -532,0 +466,0 @@ "aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),

dist/index.js

@@ -0,56 +1,17 @@
+require('./style.css');
 "use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  Checkbox: () => Checkbox,
-  CompactTextField: () => CompactTextField,
-  FieldError: () => FieldError,
-  FieldSet: () => FieldSet,
-  Form: () => Form,
-  FormField: () => FormField,
-  FormGroup: () => FormGroup,
-  FormHint: () => FormHint,
-  IconField: () => IconField,
-  InputGroup: () => InputGroup,
-  Label: () => Label,
-  Radio: () => Radio,
-  RadioGroup: () => RadioGroup,
-  RequiredAsterisk: () => RequiredAsterisk,
-  Select: () => Select,
-  TextArea: () => TextArea,
-  TextField: () => TextField
-});
-module.exports = __toCommonJS(src_exports);
-
-// src/Checkbox.tsx
-var import_react = require("react");
-
-// src/Label.tsx
-var import_classix2 = require("classix");
-
-// src/RequiredAsterisk.tsx
-var import_classix = require("classix");
-var import_RequiredAsterisk = require("./styles/RequiredAsterisk.css");
-var import_jsx_runtime = require("react/jsx-runtime");
-var RequiredAsterisk = ({ className, testId, ...rest }) => {
-  const classes = (0, import_classix.cx)("RequiredAsterisk");
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const react = require("react");
+const classix = require("classix");
+const jsxRuntime = require("react/jsx-runtime");
+const icons = require("@launchpad-ui/icons");
+const visuallyHidden = require("@react-aria/visually-hidden");
+const RequiredAsterisk$1 = "";
+const RequiredAsterisk = ({
+  className,
+  testId,
+  ...rest
+}) => {
+  const classes = classix.cx("RequiredAsterisk");
+  return /* @__PURE__ */ jsxRuntime.jsx("span", {
     className: classes,
@@ -62,7 +23,4 @@ "data-test-id": testId,
 };
-
-// src/Label.tsx
-var import_Form = require("./styles/Form.css");
-var import_jsx_runtime = require("react/jsx-runtime");
-var Label = ({
+const Form$1 = "";
+const Label = ({
   htmlFor,
@@ -76,188 +34,153 @@ disabled,
 }) => {
-  const classes = (0, import_classix2.cx)("Form-label", className, disabled && "Form-label--disabled");
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
+  const classes = classix.cx("Form-label", className, disabled && "Form-label--disabled");
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", {
     ...other,
     className: classes,
     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, {})
-    ]
+    children: [children, optional && !required && /* @__PURE__ */ jsxRuntime.jsx("small", {
+      className: "Form-labelOptional",
+      children: "(optional)"
+    }), required && !optional && /* @__PURE__ */ jsxRuntime.jsx(RequiredAsterisk, {})]
   });
 };
-
-// src/Checkbox.tsx
-var import_Form2 = require("./styles/Form.css");
-var import_jsx_runtime = require("react/jsx-runtime");
-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__ */ (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
-      ]
+const Checkbox = 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__ */ jsxRuntime.jsxs(Label, {
+    className: labelClassName,
+    children: [/* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", {
+      className: "Form-label--disabled",
+      children
+    }) : children]
+  });
+});
+Checkbox.displayName = "Checkbox";
+const FormInput = "";
+const createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
+const TextField = react.forwardRef(({
+  className,
+  type = "text",
+  tiny = false,
+  readOnly,
+  tabIndex = 0,
+  testId,
+  suffix,
+  overrideWidth,
+  ...rest
+}, ref) => {
+  const classes = overrideWidth ? className : classix.cx("FormInput", `FormInput-${type}`, className, tiny && "FormInput--tiny");
+  if (suffix) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: "FormInput-suffixContainer",
+      children: [/* @__PURE__ */ jsxRuntime.jsx("input", {
+        ...rest,
+        type,
+        className: classix.cx(classes, "FormInput-suffix"),
+        readOnly,
+        ref,
+        "data-test-id": testId,
+        "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
+      }), /* @__PURE__ */ jsxRuntime.jsx("label", {
+        className: "FormInput-suffix",
+        htmlFor: rest.id,
+        children: suffix
+      })]
     });
   }
-);
-Checkbox.displayName = "Checkbox";
-
-// src/CompactTextField.tsx
-var import_classix4 = require("classix");
-var import_react3 = require("react");
-
-// src/TextField.tsx
-var import_classix3 = require("classix");
-var import_react2 = require("react");
-var import_FormInput = require("./styles/FormInput.css");
-
-// src/utils/index.ts
-var createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
-
-// src/TextField.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var TextField = (0, import_react2.forwardRef)(
-  ({
-    className,
-    type = "text",
-    tiny = false,
+  return /* @__PURE__ */ jsxRuntime.jsx("input", {
+    ...rest,
+    type,
+    className: classes,
     readOnly,
-    tabIndex = 0,
-    testId,
-    suffix,
-    overrideWidth,
-    ...rest
-  }, ref) => {
-    const classes = overrideWidth ? className : (0, import_classix3.cx)("FormInput", `FormInput-${type}`, className, tiny && "FormInput--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_classix3.cx)(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
-          })
-        ]
-      });
+    tabIndex,
+    ref,
+    "data-test-id": testId,
+    style: overrideWidth ? {
+      width: overrideWidth
+    } : void 0,
+    "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
+  });
+});
+TextField.displayName = "TextField";
+const CompactTextField$1 = "";
+const CompactTextField = react.forwardRef(({
+  className,
+  id,
+  name,
+  label,
+  type,
+  needsErrorFeedback,
+  value,
+  onFocus,
+  onBlur,
+  ...rest
+}, ref) => {
+  const [isActive, setIsActive] = react.useState((typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0);
+  const isActiveState = isActive || needsErrorFeedback;
+  const classes = classix.cx("CompactTextField", className, isActiveState && "is-active");
+  const placeholder = isActiveState ? "" : label;
+  const handleFocus = (event) => {
+    setIsActive(true);
+    if (onFocus) {
+      onFocus(event);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+  };
+  const handleBlur = (event) => {
+    const value2 = event.target.value || "";
+    setIsActive(value2.trim().length !== 0);
+    if (onBlur) {
+      onBlur(event);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    className: classes,
+    children: [/* @__PURE__ */ jsxRuntime.jsx(Label, {
+      htmlFor: id,
+      children: label
+    }), /* @__PURE__ */ jsxRuntime.jsx(TextField, {
       ...rest,
+      id,
+      name,
       type,
-      className: classes,
-      readOnly,
-      tabIndex,
+      placeholder,
+      value,
       ref,
-      "data-test-id": testId,
-      style: overrideWidth ? {
-        width: overrideWidth
-      } : void 0,
-      "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
-    });
-  }
-);
-TextField.displayName = "TextField";
-
-// src/CompactTextField.tsx
-var import_CompactTextField = require("./styles/CompactTextField.css");
-var import_FormInput2 = require("./styles/FormInput.css");
-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_classix4.cx)("CompactTextField", className, isActiveState && "is-active");
-    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
-        })
-      ]
-    });
-  }
-);
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    })]
+  });
+});
 CompactTextField.displayName = "CompactTextField";
-
-// src/FieldError.tsx
-var import_classix5 = require("classix");
-var import_Form3 = require("./styles/Form.css");
-var import_jsx_runtime = require("react/jsx-runtime");
-var FieldError = ({ name, errorMessage, className }) => {
+const FieldError = ({
+  name,
+  errorMessage,
+  className
+}) => {
   if (!errorMessage) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-    className: (0, import_classix5.cx)("Form-fieldError", className),
+  return /* @__PURE__ */ jsxRuntime.jsx("span", {
+    className: classix.cx("Form-fieldError", className),
     "aria-live": "polite",
@@ -268,8 +191,8 @@ id: createFieldErrorId(name),
 };
-
-// src/FieldSet.tsx
-var import_FieldSet = require("./styles/FieldSet.css");
-var import_jsx_runtime = require("react/jsx-runtime");
-var FieldSet = ({ children, testId }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("fieldset", {
+const FieldSet$1 = "";
+const FieldSet = ({
+  children,
+  testId
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("fieldset", {
     className: "FieldSet",
@@ -280,16 +203,15 @@ "data-test-id": testId,
 };
-
-// src/Form.tsx
-var import_classix6 = require("classix");
-var import_Form4 = require("./styles/Form.css");
-var import_jsx_runtime = require("react/jsx-runtime");
-var Form = (props) => {
-  const { id, name, className, inline, children, ariaLabel, hasIncreasedErrorMargin, ...rest } = props;
-  const classes = (0, import_classix6.cx)(
-    "Form",
+const Form = (props) => {
+  const {
+    id,
+    name,
     className,
-    inline && "Form--inline",
-    !!hasIncreasedErrorMargin && "Form--increasedErrorMargin"
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("form", {
+    inline,
+    children,
+    ariaLabel,
+    hasIncreasedErrorMargin,
+    ...rest
+  } = props;
+  const classes = classix.cx("Form", className, inline && "Form--inline", !!hasIncreasedErrorMargin && "Form--increasedErrorMargin");
+  return /* @__PURE__ */ jsxRuntime.jsx("form", {
     id,
@@ -303,14 +225,14 @@ name,
 };
-
-// src/FormField.tsx
-var import_classix9 = require("classix");
-
-// src/FormGroup.tsx
-var import_classix7 = require("classix");
-var import_Form5 = require("./styles/Form.css");
-var import_jsx_runtime = require("react/jsx-runtime");
-var FormGroup = (props) => {
-  const { className, name, ignoreValidation, isInvalid, children, testId, ...other } = props;
-  const classes = (0, import_classix7.cx)("Form-group", className, !ignoreValidation && isInvalid && "is-invalid");
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+const FormGroup = (props) => {
+  const {
+    className,
+    name,
+    ignoreValidation,
+    isInvalid,
+    children,
+    testId,
+    ...other
+  } = props;
+  const classes = classix.cx("Form-group", className, !ignoreValidation && isInvalid && "is-invalid");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: classes,
@@ -322,10 +244,10 @@ "data-test-id": testId,
 };
-
-// src/FormHint.tsx
-var import_classix8 = require("classix");
-var import_FormHint = require("./styles/FormHint.css");
-var import_jsx_runtime = require("react/jsx-runtime");
-var FormHint = ({ className, children, ...rest }) => {
-  const classes = (0, import_classix8.cx)("Form-hint", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+const FormHint$1 = "";
+const FormHint = ({
+  className,
+  children,
+  ...rest
+}) => {
+  const classes = classix.cx("Form-hint", className);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     ...rest,
@@ -336,7 +258,4 @@ className: classes,
 };
-
-// src/FormField.tsx
-var import_FormField = require("./styles/FormField.css");
-var import_jsx_runtime = require("react/jsx-runtime");
-var FormField = ({
+const FormField$1 = "";
+const FormField = ({
   isRequired,
@@ -357,4 +276,4 @@ label,
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FormGroup, {
-    className: (0, import_classix9.cx)("FormField", className),
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormGroup, {
+    className: classix.cx("FormField", className),
     name,
@@ -364,48 +283,36 @@ ignoreValidation,
     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
-      })
-    ]
+    children: [label && /* @__PURE__ */ jsxRuntime.jsxs("label", {
+      htmlFor,
+      children: [label, isRequired && /* @__PURE__ */ jsxRuntime.jsx(RequiredAsterisk, {})]
+    }), hint && /* @__PURE__ */ jsxRuntime.jsx(FormHint, {
+      className: "FormField-hint",
+      children: hint
+    }), children, /* @__PURE__ */ jsxRuntime.jsx(FieldError, {
+      className: "FormField-errorMessage",
+      name,
+      errorMessage
+    })]
   });
 };
-
-// src/IconField.tsx
-var import_icons = require("@launchpad-ui/icons");
-var import_IconField = require("./styles/IconField.css");
-var import_jsx_runtime = require("react/jsx-runtime");
-var IconField = ({ icon, children }) => {
+const IconField$1 = "";
+const IconField = ({
+  icon,
+  children
+}) => {
   const Icon = icon;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     className: "IconField",
-    children: [
-      children,
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
-        size: import_icons.IconSize.SMALL
-      })
-    ]
+    children: [children, /* @__PURE__ */ jsxRuntime.jsx(Icon, {
+      size: icons.IconSize.SMALL
+    })]
   });
 };
-
-// src/InputGroup.tsx
-var import_classix10 = require("classix");
-var import_InputGroup = require("./styles/InputGroup.css");
-var import_jsx_runtime = require("react/jsx-runtime");
-var InputGroup = ({ className, children, ...other }) => {
-  const classes = (0, import_classix10.cx)("InputGroup", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+const InputGroup$1 = "";
+const InputGroup = ({
+  className,
+  children,
+  ...other
+}) => {
+  const classes = classix.cx("InputGroup", className);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     ...other,
@@ -416,8 +323,3 @@ className: classes,
 };
-
-// src/Radio.tsx
-var import_classix11 = require("classix");
-var import_Form6 = require("./styles/Form.css");
-var import_jsx_runtime = require("react/jsx-runtime");
-var Radio = ({
+const Radio = ({
   "aria-label": ariaLabel,
@@ -439,49 +341,47 @@ "aria-labelledby": ariaLabelledby,
   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__ */ (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_classix11.cx)("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
-      })
-    ]
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */ jsxRuntime.jsx("input", {
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      className: classix.cx("Form-radio", className),
+      checked,
+      disabled,
+      id,
+      name,
+      onChange,
+      type: "radio",
+      value,
+      ...props
+    }), /* @__PURE__ */ jsxRuntime.jsx(Label, {
+      className: labelClassName,
+      htmlFor: id,
+      style: labelStyle,
+      children: disabled ? /* @__PURE__ */ jsxRuntime.jsx("span", {
+        className: "Form-label--disabled",
+        children
+      }) : children
+    })]
   });
 };
-
-// src/RadioGroup.tsx
-var import_visually_hidden = require("@react-aria/visually-hidden");
-var import_react4 = require("react");
-var import_Form7 = require("./styles/Form.css");
-var import_jsx_runtime = require("react/jsx-runtime");
-var RadioGroup = (props) => {
-  const { name, value, onChange, children, disabled, legend, ...other } = props;
-  const fieldsetRef = (0, import_react4.useRef)(null);
+const RadioGroup = (props) => {
+  const {
+    name,
+    value,
+    onChange,
+    children,
+    disabled,
+    legend,
+    ...other
+  } = props;
+  const fieldsetRef = react.useRef(null);
   function updateRadioElems(elem) {
-    if (!(0, import_react4.isValidElement)(elem)) {
+    var _a, _b;
+    if (!react.isValidElement(elem)) {
       return elem;
     }
     const item = elem;
-    if (item?.type && item.type === Radio) {
-      return (0, import_react4.cloneElement)(item, {
+    if ((item == null ? void 0 : item.type) && item.type === Radio) {
+      return react.cloneElement(item, {
         ...item.props,
@@ -491,7 +391,7 @@ name,
         onChange,
-        disabled: typeof item.props?.disabled !== "undefined" ? item.props.disabled : disabled
+        disabled: typeof ((_a = item.props) == null ? void 0 : _a.disabled) !== "undefined" ? item.props.disabled : disabled
       });
     }
-    if (item?.type && item.type === Label) {
-      return (0, import_react4.cloneElement)(item, {
+    if ((item == null ? void 0 : item.type) && item.type === Label) {
+      return react.cloneElement(item, {
         ...item.props,
@@ -502,14 +402,14 @@ onChange,
     }
-    const elemChildren = item?.props?.children;
+    const elemChildren = (_b = item == null ? void 0 : item.props) == null ? void 0 : _b.children;
     if (elemChildren) {
       if (Array.isArray(elemChildren)) {
-        return (0, import_react4.cloneElement)(item, {
-          children: import_react4.Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild))
+        return react.cloneElement(item, {
+          children: react.Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild))
         });
       }
-      return (0, import_react4.cloneElement)(item, {
+      return react.cloneElement(item, {
         children: updateRadioElems(elemChildren)
       });
     }
-    if (item?.type && item.type !== Radio && item.type !== Label) {
+    if ((item == null ? void 0 : item.type) && item.type !== Radio && item.type !== Label) {
       return item;
@@ -519,26 +419,23 @@ }
   }
-  const radios = import_react4.Children.map(children, (child) => updateRadioElems(child));
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", {
+  const radios = react.Children.map(children, (child) => updateRadioElems(child));
+  return /* @__PURE__ */ jsxRuntime.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
+    children: [legend && /* @__PURE__ */ jsxRuntime.jsx("legend", {
+      children: /* @__PURE__ */ jsxRuntime.jsx(visuallyHidden.VisuallyHidden, {
+        children: legend
       })
-    ]
+    }), /* @__PURE__ */ jsxRuntime.jsx("div", {
+      ...other,
+      children: radios
+    })]
   });
 };
-
-// src/Select.tsx
-var import_classix12 = require("classix");
-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_classix12.cx)("FormInput", "FormInput-select", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("select", {
+const Select = ({
+  className,
+  children,
+  testId,
+  ...rest
+}) => {
+  const classes = classix.cx("FormInput", "FormInput-select", className);
+  return /* @__PURE__ */ jsxRuntime.jsx("select", {
     ...rest,
@@ -550,9 +447,6 @@ className: classes,
 };
-
-// src/TextArea.tsx
-var import_classix13 = require("classix");
-var import_react5 = require("react");
-var import_FormInput4 = require("./styles/FormInput.css");
-var import_jsx_runtime = require("react/jsx-runtime");
-var TextArea = (0, import_react5.forwardRef)(({ className, ...props }, ref) => {
+const TextArea = react.forwardRef(({
+  className,
+  ...props
+}, ref) => {
   const onKeyDown = (e) => {
@@ -566,5 +460,5 @@ if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", {
+  return /* @__PURE__ */ jsxRuntime.jsx("textarea", {
     ...props,
-    className: (0, import_classix13.cx)("FormInput", className),
+    className: classix.cx("FormInput", className),
     ref,
@@ -576,22 +470,19 @@ "aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
 TextArea.displayName = "TextArea";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Checkbox,
-  CompactTextField,
-  FieldError,
-  FieldSet,
-  Form,
-  FormField,
-  FormGroup,
-  FormHint,
-  IconField,
-  InputGroup,
-  Label,
-  Radio,
-  RadioGroup,
-  RequiredAsterisk,
-  Select,
-  TextArea,
-  TextField
-});
+exports.Checkbox = Checkbox;
+exports.CompactTextField = CompactTextField;
+exports.FieldError = FieldError;
+exports.FieldSet = FieldSet;
+exports.Form = Form;
+exports.FormField = FormField;
+exports.FormGroup = FormGroup;
+exports.FormHint = FormHint;
+exports.IconField = IconField;
+exports.InputGroup = InputGroup;
+exports.Label = Label;
+exports.Radio = Radio;
+exports.RadioGroup = RadioGroup;
+exports.RequiredAsterisk = RequiredAsterisk;
+exports.Select = Select;
+exports.TextArea = TextArea;
+exports.TextField = TextField;
 //# sourceMappingURL=index.js.map

dist/Label.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import type { CSSProperties, ReactNode } from 'react';
 import './styles/Form.css';
@@ -8,5 +8,5 @@ declare type LabelProps = {
     disabled?: boolean;
-    children?: React.ReactNode;
+    children?: ReactNode;
     className?: string;
-    style?: React.CSSProperties;
+    style?: CSSProperties;
     hidden?: boolean;
@@ -13,0 +13,0 @@ };

dist/Radio.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import type { ChangeEvent, CSSProperties, ReactNode } from 'react';
 import './styles/Form.css';
@@ -19,3 +19,3 @@ declare type RadioProps = {
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
@@ -44,7 +44,7 @@ * Custom classname(s) to add to the Radio.
      */
-    onChange?(e: React.ChangeEvent): void;
+    onChange?(e: ChangeEvent): void;
     /**
      * Optional inline CSS styles to add to the Radio label.
      */
-    labelStyle?: React.CSSProperties;
+    labelStyle?: CSSProperties;
     /**
@@ -51,0 +51,0 @@ * The value passed into Radio.

dist/RadioGroup.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import type { ChangeEvent, FormEvent, ReactNode } from 'react';
 import './styles/Form.css';
@@ -12,3 +12,3 @@ declare type RadioGroupProps = {
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
@@ -33,3 +33,3 @@ * Custom classname(s) passed to the fieldset inner div.
      */
-    onChange?(e: React.ChangeEvent | React.FormEvent<HTMLInputElement>): void;
+    onChange?(e: ChangeEvent | FormEvent<HTMLInputElement>): void;
     /**
@@ -36,0 +36,0 @@ * The value to compare against the Radio's value to determine if the Radio will be checked.

package.json

 {
   "name": "@launchpad-ui/form",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "status": "beta",
@@ -25,7 +25,7 @@ "publishConfig": {
     "./package.json": "./package.json",
-    "./styles/*": "./dist/styles/*"
+    "./style.css": "./dist/style.css"
   },
   "source": "src/index.ts",
   "dependencies": {
-    "@launchpad-ui/icons": "~0.3.3",
+    "@launchpad-ui/icons": "~0.4.0",
     "@launchpad-ui/tokens": "~0.1.5",
@@ -44,3 +44,3 @@ "@react-aria/visually-hidden": "^3.4.0",
   "scripts": {
-    "build": "tsc --project tsconfig.build.json && node ../../scripts/build.js",
+    "build": "vite build -c ../../vite.config.ts && tsc --project tsconfig.build.json",
     "clean": "rm -rf dist",
@@ -47,0 +47,0 @@ "e2e": "playwright test --config=../../playwright.config.ct.ts",

No alert changes

Improved metrics

Lines of code

1644

increased by9.82%

Worsened metrics

Total package byte prevSize

121339

decreased by-19.94%

Number of package files

45

decreased by-29.69%

Dependency changes

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

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

• Updated@launchpad-ui/icons@~0.4.0