@arc-ui/components 11.2.0 → 11.3.0

package/dist/Switch/Switch.cjs.js

@@ -4,10 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var index = require('../_shared/cjs/index-45bfb67b.js');
-var BtIconTickAlt2Px = require('../_shared/cjs/BtIconTickAlt2Px-b12ecc78.js');
+var index_module = require('../_shared/cjs/index.module-af7c85f2.js');
 var Icon = require('../_shared/cjs/Icon-719d13d4.js');
+var BtIconTickAlt2Px = require('../_shared/cjs/BtIconTickAlt2Px-bdf06f8c.js');
 var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
-var FormControl = require('../_shared/cjs/FormControl-e6b7d7c5.js');
+var FormControl = require('../_shared/cjs/FormControl-d4d9c665.js');
 var VerticalSpace = require('../_shared/cjs/VerticalSpace-65ad083c.js');
 var Text = require('../_shared/cjs/Text-1d3844be.js');
 require('react-dom');
@@ -21,7 +22,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
     const [size, setSize] = React.useState(undefined);
-    BtIconTickAlt2Px.$9f79659886946c16$export$e5c5a5f917a5871c(()=>{
+    index_module.$9f79659886946c16$export$e5c5a5f917a5871c(()=>{
         if (element) {
             // provide size as early as possible
             setSize({
@@ -69,16 +70,16 @@ function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
 /* -------------------------------------------------------------------------------------------------
  * Switch
  * -----------------------------------------------------------------------------------------------*/ const $6be4966fd9bbc698$var$SWITCH_NAME = 'Switch';
-const [$6be4966fd9bbc698$var$createSwitchContext, $6be4966fd9bbc698$export$cf7f5f17f69cbd43] = BtIconTickAlt2Px.$c512c27ab02ef895$export$50c7b4e9d9f19c1($6be4966fd9bbc698$var$SWITCH_NAME);
+const [$6be4966fd9bbc698$var$createSwitchContext, $6be4966fd9bbc698$export$cf7f5f17f69cbd43] = index_module.$c512c27ab02ef895$export$50c7b4e9d9f19c1($6be4966fd9bbc698$var$SWITCH_NAME);
 const [$6be4966fd9bbc698$var$SwitchProvider, $6be4966fd9bbc698$var$useSwitchContext] = $6be4966fd9bbc698$var$createSwitchContext($6be4966fd9bbc698$var$SWITCH_NAME);
 const $6be4966fd9bbc698$export$b5d5cf8927ab7262 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     const { __scopeSwitch: __scopeSwitch , name: name , checked: checkedProp , defaultChecked: defaultChecked , required: required , disabled: disabled , value: value = 'on' , onCheckedChange: onCheckedChange , ...switchProps } = props;
     const [button, setButton] = React.useState(null);
-    const composedRefs = BtIconTickAlt2Px.$6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setButton(node)
+    const composedRefs = index_module.$6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setButton(node)
     );
     const hasConsumerStoppedPropagationRef = React.useRef(false); // We set this to true by default so that events bubble to forms without JS (SSR)
     const isFormControl = button ? Boolean(button.closest('form')) : true;
-    const [checked = false, setChecked] = BtIconTickAlt2Px.$71cd76cc60e0454e$export$6f32135080cb4c3({
+    const [checked = false, setChecked] = index_module.$71cd76cc60e0454e$export$6f32135080cb4c3({
         prop: checkedProp,
         defaultProp: defaultChecked,
         onChange: onCheckedChange
@@ -87,7 +88,7 @@ const $6be4966fd9bbc698$export$b5d5cf8927ab7262 = /*#__PURE__*/ React.forwardRef
         scope: __scopeSwitch,
         checked: checked,
         disabled: disabled
-    }, /*#__PURE__*/ React.createElement(BtIconTickAlt2Px.$8927f6f2acc4f386$export$250ffa63cdc0d034.button, BtIconTickAlt2Px._extends({
+    }, /*#__PURE__*/ React.createElement(index_module.$8927f6f2acc4f386$export$250ffa63cdc0d034.button, index_module._extends({
         type: "button",
         role: "switch",
         "aria-checked": checked,
@@ -98,7 +99,7 @@ const $6be4966fd9bbc698$export$b5d5cf8927ab7262 = /*#__PURE__*/ React.forwardRef
         value: value
     }, switchProps, {
         ref: composedRefs,
-        onClick: BtIconTickAlt2Px.$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onClick, (event)=>{
+        onClick: index_module.$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onClick, (event)=>{
             setChecked((prevChecked)=>!prevChecked
             );
             if (isFormControl) {
@@ -128,7 +129,7 @@ const $6be4966fd9bbc698$export$b5d5cf8927ab7262 = /*#__PURE__*/ React.forwardRef
 const $6be4966fd9bbc698$export$4d07bf653ea69106 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     const { __scopeSwitch: __scopeSwitch , ...thumbProps } = props;
     const context = $6be4966fd9bbc698$var$useSwitchContext($6be4966fd9bbc698$var$THUMB_NAME, __scopeSwitch);
-    return /*#__PURE__*/ React.createElement(BtIconTickAlt2Px.$8927f6f2acc4f386$export$250ffa63cdc0d034.span, BtIconTickAlt2Px._extends({
+    return /*#__PURE__*/ React.createElement(index_module.$8927f6f2acc4f386$export$250ffa63cdc0d034.span, index_module._extends({
         "data-state": $6be4966fd9bbc698$var$getState(context.checked),
         "data-disabled": context.disabled ? '' : undefined
     }, thumbProps, {
@@ -138,7 +139,7 @@ const $6be4966fd9bbc698$export$4d07bf653ea69106 = /*#__PURE__*/ React.forwardRef
 /* ---------------------------------------------------------------------------------------------- */ const $6be4966fd9bbc698$var$BubbleInput = (props)=>{
     const { control: control , checked: checked , bubbles: bubbles = true , ...inputProps } = props;
     const ref = React.useRef(null);
-    const prevChecked = BtIconTickAlt2Px.$010c2913dbd2fe3d$export$5cae361ad82dce8b(checked);
+    const prevChecked = index_module.$010c2913dbd2fe3d$export$5cae361ad82dce8b(checked);
     const controlSize = $db6c3485150b8e66$export$1ab7ae714698c4b8(control); // Bubble checked change to parents (e.g form change event)
     React.useEffect(()=>{
         const input = ref.current;
@@ -157,7 +158,7 @@ const $6be4966fd9bbc698$export$4d07bf653ea69106 = /*#__PURE__*/ React.forwardRef
         checked,
         bubbles
     ]);
-    return /*#__PURE__*/ React.createElement("input", BtIconTickAlt2Px._extends({
+    return /*#__PURE__*/ React.createElement("input", index_module._extends({
         type: "checkbox",
         "aria-hidden": true,
         defaultChecked: checked

package/dist/Switch/Switch.esm.d.ts

@@ -1,6 +1,6 @@
 import { FC } from "react";
 import { SwitchProps as RadixSwitchProps } from "@radix-ui/react-switch";
-import { FormControlProps } from "../_shared/esm/FormControl-84c9ace6";
+import { FormControlProps } from "../_shared/esm/FormControl-2cb96de7";
 /** Use `Switch` to toggle between checked and not checked. */
 declare const Switch: FC<SwitchProps>;
 interface SwitchProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helper"> {

package/dist/Switch/Switch.esm.js

@@ -1,9 +1,10 @@
 import React__default, { useState, forwardRef, useRef, createElement, useEffect, useContext } from 'react';
 import { c as classNames } from '../_shared/esm/index-2ae58626.js';
-import { g as $9f79659886946c16$export$e5c5a5f917a5871c, $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, a as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, h as $71cd76cc60e0454e$export$6f32135080cb4c3, d as $8927f6f2acc4f386$export$250ffa63cdc0d034, _ as _extends, e as $e42e1063c40fb3ef$export$b9ecd428b558ff10, i as $010c2913dbd2fe3d$export$5cae361ad82dce8b, B as BtIconTickAlt2Px_2 } from '../_shared/esm/BtIconTickAlt2Px-2c4ec3be.js';
+import { g as $9f79659886946c16$export$e5c5a5f917a5871c, $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, a as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, h as $71cd76cc60e0454e$export$6f32135080cb4c3, d as $8927f6f2acc4f386$export$250ffa63cdc0d034, _ as _extends, e as $e42e1063c40fb3ef$export$b9ecd428b558ff10, i as $010c2913dbd2fe3d$export$5cae361ad82dce8b } from '../_shared/esm/index.module-599b86dd.js';
 import { I as Icon } from '../_shared/esm/Icon-61f7237a.js';
+import { B as BtIconTickAlt2Px_2 } from '../_shared/esm/BtIconTickAlt2Px-da97e9ae.js';
 import { C as Context } from '../_shared/esm/Surface-bf201530.js';
-import { F as FormControl } from '../_shared/esm/FormControl-84c9ace6.js';
+import { F as FormControl } from '../_shared/esm/FormControl-2cb96de7.js';
 import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-6b4f5e50.js';
 import { T as Text } from '../_shared/esm/Text-6b958ad8.js';
 import 'react-dom';

package/dist/TextInput/TextInput.cjs.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
 import React from "react";
 import { FC } from "react";
-import { FormControlProps } from "../_shared/cjs/FormControl-e6b7d7c5";
+import { FormControlProps } from "../_shared/cjs/FormControl-d4d9c665";
 type EventType = React.ChangeEvent<HTMLInputElement>;
 /**
  * Use `TextInput` to allow custom user text entry with a keyboard.
  */
 declare const TextInput: FC<TextInputProps>;
-interface TextInputProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus"> {
+interface TextInputProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel"> {
     /**
      * Uncontrolled default value of the TextInput. If the TextInput is controlled
      * via `value`/`onChange`, `defaultValue` will be ignored.

package/dist/TextInput/TextInput.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var index = require('../_shared/cjs/index-78b35bc1.js');
 var index$1 = require('../_shared/cjs/index-45bfb67b.js');
 var React = require('react');
-var FormControl = require('../_shared/cjs/FormControl-e6b7d7c5.js');
+var FormControl = require('../_shared/cjs/FormControl-d4d9c665.js');
 var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
 var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-e2c8b291.js');
 require('../_shared/cjs/Text-1d3844be.js');

package/dist/TextInput/TextInput.esm.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
 import React from "react";
 import { FC } from "react";
-import { FormControlProps } from "../_shared/esm/FormControl-84c9ace6";
+import { FormControlProps } from "../_shared/esm/FormControl-2cb96de7";
 type EventType = React.ChangeEvent<HTMLInputElement>;
 /**
  * Use `TextInput` to allow custom user text entry with a keyboard.
  */
 declare const TextInput: FC<TextInputProps>;
-interface TextInputProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus"> {
+interface TextInputProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel"> {
     /**
      * Uncontrolled default value of the TextInput. If the TextInput is controlled
      * via `value`/`onChange`, `defaultValue` will be ignored.

package/dist/TextInput/TextInput.esm.js

@@ -1,7 +1,7 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index-229fc864.js';
 import { c as classNames } from '../_shared/esm/index-2ae58626.js';
 import React__default, { forwardRef, useContext, useState } from 'react';
-import { u as useAriaDescribedby, F as FormControl } from '../_shared/esm/FormControl-84c9ace6.js';
+import { u as useAriaDescribedby, F as FormControl } from '../_shared/esm/FormControl-2cb96de7.js';
 import { C as Context } from '../_shared/esm/Surface-bf201530.js';
 import { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-b9eebf71.js';
 import '../_shared/esm/Text-6b958ad8.js';

package/dist/_shared/cjs/BtIconTickAlt2Px-bdf06f8c.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var React$1 = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
+
+const React = React__default["default"];
+const BtIconTickAlt2Px = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M13.49963,21.91418l-4.707-4.707a1.0014,1.0014,0,0,1,0-1.41406,1.02353,1.02353,0,0,1,1.41406,0l3.293,3.293,8.293-8.293a.99989.99989,0,1,1,1.41406,1.41406Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconTickAlt2Px_2 = BtIconTickAlt2Px;
+
+exports.BtIconTickAlt2Px_2 = BtIconTickAlt2Px_2;

package/dist/_shared/{esm/FormControl-84c9ace6.d.ts → cjs/FormControl-d4d9c665.d.ts}

@@ -114,5 +114,9 @@ interface FormControlProps {
      * onClick handler for FormControlDisclosure
      */
     onClickDisclosure?: () => void;
+    /**
+     * Position helper text under label. This is set to `false` by default.
+     */
+    helperUnderLabel?: boolean;
 }
 export { FormControlDisclosure, FormControlDisclosureProps, useAriaDescribedby, FormControl, FormControlProps, Context as FormControlContext };

package/dist/_shared/cjs/{FormControl-e6b7d7c5.js → FormControl-d4d9c665.js}

@@ -101,14 +101,14 @@ var Provider = Context.Provider;
  * Use `FormControl` to provide inputs with labels, helper text and error messages
  */
 var FormControl = function (_a) {
-    var children = _a.children, _b = _a.elementType, ElementType = _b === void 0 ? "div" : _b, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.requirementStatus, requirementStatus = _d === void 0 ? "optional" : _d, isDisabled = _a.isDisabled, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = index.__rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "id", "label", "labelSize", "requirementStatus", "isDisabled", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
+    var children = _a.children, _b = _a.elementType, ElementType = _b === void 0 ? "div" : _b, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.requirementStatus, requirementStatus = _d === void 0 ? "optional" : _d, _e = _a.helperUnderLabel, helperUnderLabel = _e === void 0 ? false : _e, isDisabled = _a.isDisabled, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = index.__rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "id", "label", "labelSize", "requirementStatus", "helperUnderLabel", "isDisabled", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
     var surface = React$1.useContext(Surface.Context).surface;
-    var _e = useAriaDescribedby({
+    var _f = useAriaDescribedby({
         disclosureText: disclosureText,
         errorMessage: errorMessage,
         helper: helper,
         id: htmlFor || id // `htmlFor` is preference to keep this deterministic with TextInput
-    }), ariaDescribedby = _e.ariaDescribedby, idError = _e.idError, idHelper = _e.idHelper, idDisclosure = _e.idDisclosure;
+    }), ariaDescribedby = _f.ariaDescribedby, idError = _f.idError, idHelper = _f.idHelper, idDisclosure = _f.idDisclosure;
     var LabelType = ElementType === "div" ? "label" : "legend";
     var elementProps = {};
     var labelProps = {};
@@ -134,11 +134,12 @@ var FormControl = function (_a) {
             React__default["default"].createElement(LabelType, index.__assign({ className: "arc-FormControl-label" }, labelProps),
                 label,
                 requirementStatus === "optional" && (React__default["default"].createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))),
+            helperUnderLabel && (React__default["default"].createElement(React__default["default"].Fragment, null, helper && (React__default["default"].createElement("div", { className: "arc-FormControl-helper arc-FormControl-helper--underLabel", id: idHelper }, helper)))),
             children,
-            errorMessage ? (React__default["default"].createElement("div", { className: "arc-FormControl-error", id: idError },
+            !helperUnderLabel && (React__default["default"].createElement(React__default["default"].Fragment, null, errorMessage ? (React__default["default"].createElement("div", { className: "arc-FormControl-error", id: idError },
                 React__default["default"].createElement("span", { className: "arc-FormControl-error--icon" },
                     React__default["default"].createElement(BtIconAlert_2, null)),
-                errorMessage)) : disclosureTitle ? (React__default["default"].createElement(FormControlDisclosure, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize, id: idDisclosure }, disclosureText)) : (helper && (React__default["default"].createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))));
+                errorMessage)) : disclosureTitle ? (React__default["default"].createElement(FormControlDisclosure, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize, id: idDisclosure }, disclosureText)) : (helper && (React__default["default"].createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))))));
 };
 
 exports.BtIconAlert_2 = BtIconAlert_2;

package/dist/_shared/cjs/VerticalSpace-65ad083c.d.ts

@@ -3,7 +3,7 @@ import { FC } from "react";
  * Use `VerticalSpace` to create vertical space between components.
  */
 declare const VerticalSpace: FC<VerticalSpaceProps>;
-type VerticalSpaceSize = "4" | "8" | "12" | "16" | "24" | "32" | "48" | "64" | "96" | "128";
+type VerticalSpaceSize = "4" | "8" | "12" | "16" | "20" | "24" | "28" | "32" | "40" | "48" | "64" | "96" | "128";
 interface VerticalSpaceProps {
     /**
      * Should the VerticalSpace be visible for debugging and documentation

package/dist/_shared/cjs/index-c81c9401.d.ts

@@ -1,4 +1,4 @@
-export * from "./FormControl-e6b7d7c5";
+export * from "./FormControl-d4d9c665";
 export * from "../../Card/Card.cjs";
 export * from "./index.es-77def0c9";
 export * from "../../TextInput/TextInput.cjs";

package/dist/_shared/cjs/{BtIconTickAlt2Px-b12ecc78.js → index.module-af7c85f2.js}

@@ -1,12 +1,8 @@
 'use strict';
 
-var React$1 = require('react');
+var React = require('react');
 var $7SXl2$reactdom = require('react-dom');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
-
 function _extends() {
   _extends = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -39,7 +35,7 @@ function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEven
     /* -----------------------------------------------------------------------------------------------
    * createContext
    * ---------------------------------------------------------------------------------------------*/ function $c512c27ab02ef895$export$fd42f52fd3ae1109(rootComponentName, defaultContext) {
-        const BaseContext = /*#__PURE__*/ React$1.createContext(defaultContext);
+        const BaseContext = /*#__PURE__*/ React.createContext(defaultContext);
         const index = defaultContexts.length;
         defaultContexts = [
             ...defaultContexts,
@@ -49,15 +45,15 @@ function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEven
             const { scope: scope , children: children , ...context } = props;
             const Context = (scope === null || scope === void 0 ? void 0 : scope[scopeName][index]) || BaseContext; // Only re-memoize when prop values change
             // eslint-disable-next-line react-hooks/exhaustive-deps
-            const value = React$1.useMemo(()=>context
+            const value = React.useMemo(()=>context
             , Object.values(context));
-            return /*#__PURE__*/ React$1.createElement(Context.Provider, {
+            return /*#__PURE__*/ React.createElement(Context.Provider, {
                 value: value
             }, children);
         }
         function useContext(consumerName, scope) {
             const Context = (scope === null || scope === void 0 ? void 0 : scope[scopeName][index]) || BaseContext;
-            const context = React$1.useContext(Context);
+            const context = React.useContext(Context);
             if (context) return context;
             if (defaultContext !== undefined) return defaultContext; // if a defaultContext wasn't specified, it's a required context.
             throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
@@ -72,11 +68,11 @@ function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEven
    * createScope
    * ---------------------------------------------------------------------------------------------*/ const createScope = ()=>{
         const scopeContexts = defaultContexts.map((defaultContext)=>{
-            return /*#__PURE__*/ React$1.createContext(defaultContext);
+            return /*#__PURE__*/ React.createContext(defaultContext);
         });
         return function useScope(scope) {
             const contexts = (scope === null || scope === void 0 ? void 0 : scope[scopeName]) || scopeContexts;
-            return React$1.useMemo(()=>({
+            return React.useMemo(()=>({
                     [`__scope${scopeName}`]: {
                         ...scope,
                         [scopeName]: contexts
@@ -117,7 +113,7 @@ function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEven
                     ...currentScope
                 };
             }, {});
-            return React$1.useMemo(()=>({
+            return React.useMemo(()=>({
                     [`__scope${baseScope.scopeName}`]: nextScopes1
                 })
             , [
@@ -149,14 +145,14 @@ function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEven
  * Accepts callback refs and RefObject(s)
  */ function $6ed0406888f73fc4$export$c7b2cbe3552a0d05(...refs) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    return React$1.useCallback($6ed0406888f73fc4$export$43e446d32b3d21af(...refs), refs);
+    return React.useCallback($6ed0406888f73fc4$export$43e446d32b3d21af(...refs), refs);
 }
 
 /* -------------------------------------------------------------------------------------------------
  * Slot
- * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$8c6ed5c666ac1360 = /*#__PURE__*/ React$1.forwardRef((props, forwardedRef)=>{
+ * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$8c6ed5c666ac1360 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     const { children: children , ...slotProps } = props;
-    const childrenArray = React$1.Children.toArray(children);
+    const childrenArray = React.Children.toArray(children);
     const slottable = childrenArray.find($5e63c961fc1ce211$var$isSlottable);
     if (slottable) {
         // the new element to render is the one passed as a child of `Slottable`
@@ -165,37 +161,37 @@ function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEven
             if (child === slottable) {
                 // because the new element will be the one rendered, we are only interested
                 // in grabbing its children (`newElement.props.children`)
-                if (React$1.Children.count(newElement) > 1) return React$1.Children.only(null);
-                return /*#__PURE__*/ React$1.isValidElement(newElement) ? newElement.props.children : null;
+                if (React.Children.count(newElement) > 1) return React.Children.only(null);
+                return /*#__PURE__*/ React.isValidElement(newElement) ? newElement.props.children : null;
             } else return child;
         });
-        return /*#__PURE__*/ React$1.createElement($5e63c961fc1ce211$var$SlotClone, _extends({}, slotProps, {
+        return /*#__PURE__*/ React.createElement($5e63c961fc1ce211$var$SlotClone, _extends({}, slotProps, {
             ref: forwardedRef
-        }), /*#__PURE__*/ React$1.isValidElement(newElement) ? /*#__PURE__*/ React$1.cloneElement(newElement, undefined, newChildren) : null);
+        }), /*#__PURE__*/ React.isValidElement(newElement) ? /*#__PURE__*/ React.cloneElement(newElement, undefined, newChildren) : null);
     }
-    return /*#__PURE__*/ React$1.createElement($5e63c961fc1ce211$var$SlotClone, _extends({}, slotProps, {
+    return /*#__PURE__*/ React.createElement($5e63c961fc1ce211$var$SlotClone, _extends({}, slotProps, {
         ref: forwardedRef
     }), children);
 });
 $5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = 'Slot';
 /* -------------------------------------------------------------------------------------------------
  * SlotClone
- * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$var$SlotClone = /*#__PURE__*/ React$1.forwardRef((props, forwardedRef)=>{
+ * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$var$SlotClone = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     const { children: children , ...slotProps } = props;
-    if (/*#__PURE__*/ React$1.isValidElement(children)) return /*#__PURE__*/ React$1.cloneElement(children, {
+    if (/*#__PURE__*/ React.isValidElement(children)) return /*#__PURE__*/ React.cloneElement(children, {
         ...$5e63c961fc1ce211$var$mergeProps(slotProps, children.props),
         ref: $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, children.ref)
     });
-    return React$1.Children.count(children) > 1 ? React$1.Children.only(null) : null;
+    return React.Children.count(children) > 1 ? React.Children.only(null) : null;
 });
 $5e63c961fc1ce211$var$SlotClone.displayName = 'SlotClone';
 /* -------------------------------------------------------------------------------------------------
  * Slottable
  * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$d9f1ccf0bdb05d45 = ({ children: children  })=>{
-    return /*#__PURE__*/ React$1.createElement(React$1.Fragment, null, children);
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, children);
 };
 /* ---------------------------------------------------------------------------------------------- */ function $5e63c961fc1ce211$var$isSlottable(child) {
-    return /*#__PURE__*/ React$1.isValidElement(child) && child.type === $5e63c961fc1ce211$export$d9f1ccf0bdb05d45;
+    return /*#__PURE__*/ React.isValidElement(child) && child.type === $5e63c961fc1ce211$export$d9f1ccf0bdb05d45;
 }
 function $5e63c961fc1ce211$var$mergeProps(slotProps, childProps) {
     // all child props should override
@@ -249,13 +245,13 @@ const $8927f6f2acc4f386$var$NODES = [
 /* -------------------------------------------------------------------------------------------------
  * Primitive
  * -----------------------------------------------------------------------------------------------*/ const $8927f6f2acc4f386$export$250ffa63cdc0d034 = $8927f6f2acc4f386$var$NODES.reduce((primitive, node)=>{
-    const Node = /*#__PURE__*/ React$1.forwardRef((props, forwardedRef)=>{
+    const Node = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
         const { asChild: asChild , ...primitiveProps } = props;
         const Comp = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : node;
-        React$1.useEffect(()=>{
+        React.useEffect(()=>{
             window[Symbol.for('radix-ui')] = true;
         }, []);
-        return /*#__PURE__*/ React$1.createElement(Comp, _extends({}, primitiveProps, {
+        return /*#__PURE__*/ React.createElement(Comp, _extends({}, primitiveProps, {
             ref: forwardedRef
         }));
     });
@@ -311,11 +307,11 @@ const $8927f6f2acc4f386$var$NODES = [
  * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
  * prop or avoid re-executing effects when passed as a dependency
  */ function $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(callback) {
-    const callbackRef = React$1.useRef(callback);
-    React$1.useEffect(()=>{
+    const callbackRef = React.useRef(callback);
+    React.useEffect(()=>{
         callbackRef.current = callback;
     }); // https://github.com/facebook/react/issues/19240
-    return React$1.useMemo(()=>(...args)=>{
+    return React.useMemo(()=>(...args)=>{
             var _callbackRef$current;
             return (_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call(callbackRef, ...args);
         }
@@ -328,7 +324,7 @@ const $8927f6f2acc4f386$var$NODES = [
  * We use this safe version which suppresses the warning by replacing it with a noop on the server.
  *
  * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
- */ const $9f79659886946c16$export$e5c5a5f917a5871c = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? React$1.useLayoutEffect : ()=>{};
+ */ const $9f79659886946c16$export$e5c5a5f917a5871c = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? React.useLayoutEffect : ()=>{};
 
 function $71cd76cc60e0454e$export$6f32135080cb4c3({ prop: prop , defaultProp: defaultProp , onChange: onChange = ()=>{}  }) {
     const [uncontrolledProp, setUncontrolledProp] = $71cd76cc60e0454e$var$useUncontrolledState({
@@ -338,7 +334,7 @@ function $71cd76cc60e0454e$export$6f32135080cb4c3({ prop: prop , defaultProp: de
     const isControlled = prop !== undefined;
     const value1 = isControlled ? prop : uncontrolledProp;
     const handleChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onChange);
-    const setValue = React$1.useCallback((nextValue)=>{
+    const setValue = React.useCallback((nextValue)=>{
         if (isControlled) {
             const setter = nextValue;
             const value = typeof nextValue === 'function' ? setter(prop) : nextValue;
@@ -356,11 +352,11 @@ function $71cd76cc60e0454e$export$6f32135080cb4c3({ prop: prop , defaultProp: de
     ];
 }
 function $71cd76cc60e0454e$var$useUncontrolledState({ defaultProp: defaultProp , onChange: onChange  }) {
-    const uncontrolledState = React$1.useState(defaultProp);
+    const uncontrolledState = React.useState(defaultProp);
     const [value] = uncontrolledState;
-    const prevValueRef = React$1.useRef(value);
+    const prevValueRef = React.useRef(value);
     const handleChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onChange);
-    React$1.useEffect(()=>{
+    React.useEffect(()=>{
         if (prevValueRef.current !== value) {
             handleChange(value);
             prevValueRef.current = value;
@@ -374,13 +370,13 @@ function $71cd76cc60e0454e$var$useUncontrolledState({ defaultProp: defaultProp ,
 }
 
 function $010c2913dbd2fe3d$export$5cae361ad82dce8b(value) {
-    const ref = React$1.useRef({
+    const ref = React.useRef({
         value: value,
         previous: value
     }); // We compare values before making an update to ensure that
     // a change has been made. This ensures the previous value is
     // persisted correctly between renders.
-    return React$1.useMemo(()=>{
+    return React.useMemo(()=>{
         if (ref.current.value !== value) {
             ref.current.previous = ref.current.value;
             ref.current.value = value;
@@ -391,26 +387,6 @@ function $010c2913dbd2fe3d$export$5cae361ad82dce8b(value) {
     ]);
 }
 
-const React = React__default["default"];
-const BtIconTickAlt2Px = props =>
-  /*#__PURE__*/ React.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32"
-      },
-      props
-    ),
-    /*#__PURE__*/ React.createElement("defs", null),
-    /*#__PURE__*/ React.createElement("path", {
-      d:
-        "M13.49963,21.91418l-4.707-4.707a1.0014,1.0014,0,0,1,0-1.41406,1.02353,1.02353,0,0,1,1.41406,0l3.293,3.293,8.293-8.293a.99989.99989,0,1,1,1.41406,1.41406Z",
-      fill: "currentColor"
-    })
-  );
-var BtIconTickAlt2Px_2 = BtIconTickAlt2Px;
-
 exports.$010c2913dbd2fe3d$export$5cae361ad82dce8b = $010c2913dbd2fe3d$export$5cae361ad82dce8b;
 exports.$5e63c961fc1ce211$export$8c6ed5c666ac1360 = $5e63c961fc1ce211$export$8c6ed5c666ac1360;
 exports.$6ed0406888f73fc4$export$c7b2cbe3552a0d05 = $6ed0406888f73fc4$export$c7b2cbe3552a0d05;
@@ -421,5 +397,4 @@ exports.$9f79659886946c16$export$e5c5a5f917a5871c = $9f79659886946c16$export$e5c
 exports.$b1b2314f5f9a1d84$export$25bec8c6f54ee79a = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a;
 exports.$c512c27ab02ef895$export$50c7b4e9d9f19c1 = $c512c27ab02ef895$export$50c7b4e9d9f19c1;
 exports.$e42e1063c40fb3ef$export$b9ecd428b558ff10 = $e42e1063c40fb3ef$export$b9ecd428b558ff10;
-exports.BtIconTickAlt2Px_2 = BtIconTickAlt2Px_2;
 exports._extends = _extends;

package/dist/_shared/esm/BtIconTickAlt2Px-da97e9ae.js

@@ -0,0 +1,23 @@
+import React__default from 'react';
+
+const React = React__default;
+const BtIconTickAlt2Px = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M13.49963,21.91418l-4.707-4.707a1.0014,1.0014,0,0,1,0-1.41406,1.02353,1.02353,0,0,1,1.41406,0l3.293,3.293,8.293-8.293a.99989.99989,0,1,1,1.41406,1.41406Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconTickAlt2Px_2 = BtIconTickAlt2Px;
+
+export { BtIconTickAlt2Px_2 as B };

package/dist/_shared/{cjs/FormControl-e6b7d7c5.d.ts → esm/FormControl-2cb96de7.d.ts}

@@ -114,5 +114,9 @@ interface FormControlProps {
      * onClick handler for FormControlDisclosure
      */
     onClickDisclosure?: () => void;
+    /**
+     * Position helper text under label. This is set to `false` by default.
+     */
+    helperUnderLabel?: boolean;
 }
 export { FormControlDisclosure, FormControlDisclosureProps, useAriaDescribedby, FormControl, FormControlProps, Context as FormControlContext };

package/dist/_shared/esm/{FormControl-84c9ace6.js → FormControl-2cb96de7.js}

@@ -95,14 +95,14 @@ var Provider = Context.Provider;
  * Use `FormControl` to provide inputs with labels, helper text and error messages
  */
 var FormControl = function (_a) {
-    var children = _a.children, _b = _a.elementType, ElementType = _b === void 0 ? "div" : _b, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.requirementStatus, requirementStatus = _d === void 0 ? "optional" : _d, isDisabled = _a.isDisabled, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = __rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "id", "label", "labelSize", "requirementStatus", "isDisabled", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
+    var children = _a.children, _b = _a.elementType, ElementType = _b === void 0 ? "div" : _b, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.requirementStatus, requirementStatus = _d === void 0 ? "optional" : _d, _e = _a.helperUnderLabel, helperUnderLabel = _e === void 0 ? false : _e, isDisabled = _a.isDisabled, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = __rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "id", "label", "labelSize", "requirementStatus", "helperUnderLabel", "isDisabled", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
     var surface = useContext(Context$1).surface;
-    var _e = useAriaDescribedby({
+    var _f = useAriaDescribedby({
         disclosureText: disclosureText,
         errorMessage: errorMessage,
         helper: helper,
         id: htmlFor || id // `htmlFor` is preference to keep this deterministic with TextInput
-    }), ariaDescribedby = _e.ariaDescribedby, idError = _e.idError, idHelper = _e.idHelper, idDisclosure = _e.idDisclosure;
+    }), ariaDescribedby = _f.ariaDescribedby, idError = _f.idError, idHelper = _f.idHelper, idDisclosure = _f.idDisclosure;
     var LabelType = ElementType === "div" ? "label" : "legend";
     var elementProps = {};
     var labelProps = {};
@@ -128,11 +128,12 @@ var FormControl = function (_a) {
             React__default.createElement(LabelType, __assign({ className: "arc-FormControl-label" }, labelProps),
                 label,
                 requirementStatus === "optional" && (React__default.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))),
+            helperUnderLabel && (React__default.createElement(React__default.Fragment, null, helper && (React__default.createElement("div", { className: "arc-FormControl-helper arc-FormControl-helper--underLabel", id: idHelper }, helper)))),
             children,
-            errorMessage ? (React__default.createElement("div", { className: "arc-FormControl-error", id: idError },
+            !helperUnderLabel && (React__default.createElement(React__default.Fragment, null, errorMessage ? (React__default.createElement("div", { className: "arc-FormControl-error", id: idError },
                 React__default.createElement("span", { className: "arc-FormControl-error--icon" },
                     React__default.createElement(BtIconAlert_2, null)),
-                errorMessage)) : disclosureTitle ? (React__default.createElement(FormControlDisclosure, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize, id: idDisclosure }, disclosureText)) : (helper && (React__default.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))));
+                errorMessage)) : disclosureTitle ? (React__default.createElement(FormControlDisclosure, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize, id: idDisclosure }, disclosureText)) : (helper && (React__default.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))))));
 };
 
 export { BtIconAlert_2 as B, Context as C, FormControl as F, useAriaDescribedby as u };

package/dist/_shared/esm/VerticalSpace-6b4f5e50.d.ts

@@ -3,7 +3,7 @@ import { FC } from "react";
  * Use `VerticalSpace` to create vertical space between components.
  */
 declare const VerticalSpace: FC<VerticalSpaceProps>;
-type VerticalSpaceSize = "4" | "8" | "12" | "16" | "24" | "32" | "48" | "64" | "96" | "128";
+type VerticalSpaceSize = "4" | "8" | "12" | "16" | "20" | "24" | "28" | "32" | "40" | "48" | "64" | "96" | "128";
 interface VerticalSpaceProps {
     /**
      * Should the VerticalSpace be visible for debugging and documentation

package/dist/_shared/esm/index-c81c9401.d.ts

@@ -1,4 +1,4 @@
-export * from "./FormControl-84c9ace6";
+export * from "./FormControl-2cb96de7";
 export * from "../../Card/Card.esm";
 export * from "./index.es-00cb3bcb";
 export * from "../../TextInput/TextInput.esm";