@arc-ui/components 11.2.0 → 11.4.0

package/dist/Switch/Switch.cjs.js

@@ -4,11 +4,12 @@ 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 VerticalSpace = require('../_shared/cjs/VerticalSpace-65ad083c.js');
+var FormControl = require('../_shared/cjs/FormControl-d4d9c665.js');
+var VerticalSpace = require('../_shared/cjs/VerticalSpace-7aed88ab.js');
 var Text = require('../_shared/cjs/Text-1d3844be.js');
 require('react-dom');
 require('../_shared/cjs/index-78b35bc1.js');
@@ -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,10 +1,11 @@
 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 { V as VerticalSpace } from '../_shared/esm/VerticalSpace-6b4f5e50.js';
+import { F as FormControl } from '../_shared/esm/FormControl-2cb96de7.js';
+import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-3579b20e.js';
 import { T as Text } from '../_shared/esm/Text-6b958ad8.js';
 import 'react-dom';
 import '../_shared/esm/index-229fc864.js';

package/dist/Tag/Tag.cjs.d.ts

@@ -0,0 +1,33 @@
+import { FC, ReactNode } from "react";
+import { ArcIcon } from "../_shared/cjs/arc-icon-17594b2f";
+/**
+ * use `Tag` to promote features and manage filtering.
+ */
+declare const Tag: FC<TagProps>;
+interface TagProps {
+    /**
+     * Content to render within the Tag
+     */
+    children: ReactNode;
+    /**
+     * Determine if the Tag is removable.
+     */
+    isRemovable?: boolean;
+    /**
+     * Provide a link for the tag
+     */
+    link?: string;
+    /**
+     * Determine a icon to display within the tag.
+     */
+    icon?: ArcIcon;
+    /**
+     * onClick Handler for Tag
+     */
+    onClick?: () => void;
+    /**
+     * Execute function on remove
+     */
+    onRemove?: () => void;
+}
+export { Tag };

package/dist/Tag/Tag.cjs.js

@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../_shared/cjs/index-78b35bc1.js');
+var React$1 = require('react');
+var index$1 = require('../_shared/cjs/index-45bfb67b.js');
+var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
+var Icon = require('../_shared/cjs/Icon-719d13d4.js');
+require('../_shared/cjs/suffix-modifier-edf7851e.js');
+
+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 BtIconCross = 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:
+        "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
+      fill: "currentColor"
+    }),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M20.85352,11.14648a.49983.49983,0,0,0-.707,0L16,15.293l-4.14648-4.14649a.5.5,0,0,0-.707.707L15.293,16l-4.14649,4.14648a.5.5,0,1,0,.707.707L16,16.707l4.14648,4.14649a.5.5,0,0,0,.707-.707L16.707,16l4.14649-4.14648A.49983.49983,0,0,0,20.85352,11.14648Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconCross_2 = BtIconCross;
+
+/**
+ * use `Tag` to promote features and manage filtering.
+ */
+var Tag = function (_a) {
+    var children = _a.children, isRemovable = _a.isRemovable, link = _a.link, icon = _a.icon, onClick = _a.onClick, onRemove = _a.onRemove, props = index.__rest(_a, ["children", "isRemovable", "link", "icon", "onClick", "onRemove"]);
+    var surface = React$1.useContext(Surface.Context).surface;
+    var _b = React$1.useState(false), isRemoved = _b[0], setIsRemoved = _b[1];
+    var onRemoveHandler = function () {
+        setIsRemoved(function (p) { return !p; });
+        onRemove && onRemove();
+    };
+    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames("arc-Tag", {
+            "arc-Tag--onDarkSurface": surface === "dark",
+            "arc-Tag--isRemovable": isRemovable,
+            "arc-Tag--hasIcon": icon,
+            "arc-Tag--hasLink": link || onClick,
+            "arc-Tag--removed": isRemoved
+        }) }, (isRemoved && { "aria-hidden": true }), index.filterDataAttrs(props)),
+        link ? (React__default["default"].createElement("a", { className: "arc-Tag-content", href: link, tabIndex: 0 },
+            icon && (React__default["default"].createElement("span", { className: "arc-Tag-icon" },
+                React__default["default"].createElement(Icon.Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
+            React__default["default"].createElement("div", { className: "arc-Tag-label" }, children))) : (React__default["default"].createElement(React__default["default"].Fragment, null, onClick ? (React__default["default"].createElement("button", { className: "arc-Tag-content", onClick: onClick, "data-testid": "arc-Tag-content" },
+            icon && (React__default["default"].createElement("span", { className: "arc-Tag-icon" },
+                React__default["default"].createElement(Icon.Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
+            React__default["default"].createElement("div", { className: "arc-Tag-label" }, children))) : (React__default["default"].createElement("div", { className: "arc-Tag-content", "data-testid": "arc-Tag-content" },
+            icon && (React__default["default"].createElement("span", { className: "arc-Tag-icon" },
+                React__default["default"].createElement(Icon.Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
+            React__default["default"].createElement("div", { className: "arc-Tag-label" }, children))))),
+        isRemovable && (React__default["default"].createElement("button", { className: "arc-Tag-icon arc-Tag-icon--removable", onClick: onRemoveHandler, "data-testid": "arc-Tag-icon-removable", "aria-live": "polite", "aria-roledescription": "remove tag" },
+            React__default["default"].createElement(Icon.Icon, { icon: BtIconCross_2, color: "brand", size: 20 })))));
+};
+
+exports.Tag = Tag;

package/dist/Tag/Tag.esm.d.ts

@@ -0,0 +1,33 @@
+import { FC, ReactNode } from "react";
+import { ArcIcon } from "../_shared/esm/arc-icon-17594b2f";
+/**
+ * use `Tag` to promote features and manage filtering.
+ */
+declare const Tag: FC<TagProps>;
+interface TagProps {
+    /**
+     * Content to render within the Tag
+     */
+    children: ReactNode;
+    /**
+     * Determine if the Tag is removable.
+     */
+    isRemovable?: boolean;
+    /**
+     * Provide a link for the tag
+     */
+    link?: string;
+    /**
+     * Determine a icon to display within the tag.
+     */
+    icon?: ArcIcon;
+    /**
+     * onClick Handler for Tag
+     */
+    onClick?: () => void;
+    /**
+     * Execute function on remove
+     */
+    onRemove?: () => void;
+}
+export { Tag };

package/dist/Tag/Tag.esm.js

@@ -0,0 +1,65 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index-229fc864.js';
+import React__default, { useContext, useState } from 'react';
+import { c as classNames } from '../_shared/esm/index-2ae58626.js';
+import { C as Context } from '../_shared/esm/Surface-bf201530.js';
+import { I as Icon } from '../_shared/esm/Icon-61f7237a.js';
+import '../_shared/esm/suffix-modifier-f5e28822.js';
+
+const React = React__default;
+const BtIconCross = 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:
+        "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
+      fill: "currentColor"
+    }),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M20.85352,11.14648a.49983.49983,0,0,0-.707,0L16,15.293l-4.14648-4.14649a.5.5,0,0,0-.707.707L15.293,16l-4.14649,4.14648a.5.5,0,1,0,.707.707L16,16.707l4.14648,4.14649a.5.5,0,0,0,.707-.707L16.707,16l4.14649-4.14648A.49983.49983,0,0,0,20.85352,11.14648Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconCross_2 = BtIconCross;
+
+/**
+ * use `Tag` to promote features and manage filtering.
+ */
+var Tag = function (_a) {
+    var children = _a.children, isRemovable = _a.isRemovable, link = _a.link, icon = _a.icon, onClick = _a.onClick, onRemove = _a.onRemove, props = __rest(_a, ["children", "isRemovable", "link", "icon", "onClick", "onRemove"]);
+    var surface = useContext(Context).surface;
+    var _b = useState(false), isRemoved = _b[0], setIsRemoved = _b[1];
+    var onRemoveHandler = function () {
+        setIsRemoved(function (p) { return !p; });
+        onRemove && onRemove();
+    };
+    return (React__default.createElement("div", __assign({ className: classNames("arc-Tag", {
+            "arc-Tag--onDarkSurface": surface === "dark",
+            "arc-Tag--isRemovable": isRemovable,
+            "arc-Tag--hasIcon": icon,
+            "arc-Tag--hasLink": link || onClick,
+            "arc-Tag--removed": isRemoved
+        }) }, (isRemoved && { "aria-hidden": true }), filterDataAttrs(props)),
+        link ? (React__default.createElement("a", { className: "arc-Tag-content", href: link, tabIndex: 0 },
+            icon && (React__default.createElement("span", { className: "arc-Tag-icon" },
+                React__default.createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
+            React__default.createElement("div", { className: "arc-Tag-label" }, children))) : (React__default.createElement(React__default.Fragment, null, onClick ? (React__default.createElement("button", { className: "arc-Tag-content", onClick: onClick, "data-testid": "arc-Tag-content" },
+            icon && (React__default.createElement("span", { className: "arc-Tag-icon" },
+                React__default.createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
+            React__default.createElement("div", { className: "arc-Tag-label" }, children))) : (React__default.createElement("div", { className: "arc-Tag-content", "data-testid": "arc-Tag-content" },
+            icon && (React__default.createElement("span", { className: "arc-Tag-icon" },
+                React__default.createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
+            React__default.createElement("div", { className: "arc-Tag-label" }, children))))),
+        isRemovable && (React__default.createElement("button", { className: "arc-Tag-icon arc-Tag-icon--removable", onClick: onRemoveHandler, "data-testid": "arc-Tag-icon-removable", "aria-live": "polite", "aria-roledescription": "remove tag" },
+            React__default.createElement(Icon, { icon: BtIconCross_2, color: "brand", size: 20 })))));
+};
+
+export { Tag };

package/dist/Tag/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/tag",
+  "types": "./Tag.esm.d.ts",
+  "main": "./Tag.cjs.js",
+  "module": "./Tag.esm.js",
+  "private": true
+}

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/VerticalSpace/VerticalSpace.cjs.d.ts

@@ -1 +1 @@
-export { VerticalSpace } from "../_shared/cjs/VerticalSpace-65ad083c";
+export { VerticalSpace } from "../_shared/cjs/VerticalSpace-7aed88ab";

package/dist/VerticalSpace/VerticalSpace.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var VerticalSpace = require('../_shared/cjs/VerticalSpace-65ad083c.js');
+var VerticalSpace = require('../_shared/cjs/VerticalSpace-7aed88ab.js');
 require('../_shared/cjs/index-78b35bc1.js');
 require('../_shared/cjs/index-45bfb67b.js');
 require('react');

package/dist/VerticalSpace/VerticalSpace.esm.d.ts

@@ -1 +1 @@
-export { VerticalSpace } from "../_shared/esm/VerticalSpace-6b4f5e50";
+export { VerticalSpace } from "../_shared/esm/VerticalSpace-3579b20e";

package/dist/VerticalSpace/VerticalSpace.esm.js

@@ -1,4 +1,4 @@
-export { V as VerticalSpace } from '../_shared/esm/VerticalSpace-6b4f5e50.js';
+export { V as VerticalSpace } from '../_shared/esm/VerticalSpace-3579b20e.js';
 import '../_shared/esm/index-229fc864.js';
 import '../_shared/esm/index-2ae58626.js';
 import 'react';

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/cjs/{Button-b3a69953.js → Button-1af6868c.js}

@@ -71,10 +71,7 @@ var Button = React$1.forwardRef(function (_a, ref) {
 });
 var ButtonIcon = function (_a) {
     var icon = _a.icon, isChevron = _a.isChevron, isBeforeText = _a.isBeforeText;
-    return (React__default["default"].createElement("span", { className: index$1.classNames({
-            "arc-Button-icon": true,
-            "arc-Button-icon--chevron": isChevron
-        }) }, isChevron ? (React__default["default"].createElement(Icon.Icon, { icon: isBeforeText ? BtIconChevronLeftMid_2 : BtIconChevronRightMid.BtIconChevronRightMid_2 })) : (React__default["default"].createElement(Icon.Icon, { icon: icon }))));
+    return (React__default["default"].createElement("span", { className: "arc-Button-icon" }, isChevron ? (React__default["default"].createElement(Icon.Icon, { icon: isBeforeText ? BtIconChevronLeftMid_2 : BtIconChevronRightMid.BtIconChevronRightMid_2 })) : (React__default["default"].createElement(Icon.Icon, { icon: icon }))));
 };
 
 exports.Button = Button;

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-7aed88ab.d.ts

@@ -0,0 +1,34 @@
+import { FC } from "react";
+/**
+ * Use `VerticalSpace` to create vertical space between components.
+ */
+declare const VerticalSpace: FC<VerticalSpaceProps>;
+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
+     * purposes?
+     */
+    isDebugVisible?: boolean;
+    /**
+     * Size of the VerticalSpace.
+     */
+    size?: VerticalSpaceSize;
+    /**
+     * Size of the VerticalSpace from the small breakpoint upwards.
+     */
+    sizeS?: VerticalSpaceSize;
+    /**
+     * Size of the VerticalSpace from the medium breakpoint upwards.
+     */
+    sizeM?: VerticalSpaceSize;
+    /**
+     * Size of the VerticalSpace from the large breakpoint upwards.
+     */
+    sizeL?: VerticalSpaceSize;
+    /**
+     * Size of the VerticalSpace from the extra large breakpoint upwards.
+     */
+    sizeXL?: VerticalSpaceSize;
+}
+export { VerticalSpace, VerticalSpaceSize, VerticalSpaceProps };

package/dist/_shared/cjs/{VerticalSpace-65ad083c.js → VerticalSpace-7aed88ab.js}

@@ -13,11 +13,15 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  */
 var VerticalSpace = function (_a) {
     var _b;
-    var _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "24" : _d, props = index.__rest(_a, ["isDebugVisible", "size"]);
+    var _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "24" : _d, sizeS = _a.sizeS, sizeM = _a.sizeM, sizeL = _a.sizeL, sizeXL = _a.sizeXL, props = index.__rest(_a, ["isDebugVisible", "size", "sizeS", "sizeM", "sizeL", "sizeXL"]);
     return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames((_b = {
                 "arc-VerticalSpace": true
             },
-            _b["arc-VerticalSpace--size".concat(size)] = size && size !== "24",
+            _b["arc-VerticalSpace--size".concat(size)] = size,
+            _b["arc-VerticalSpace--sizeS".concat(sizeS)] = sizeS && sizeS,
+            _b["arc-VerticalSpace--sizeM".concat(sizeM)] = sizeM && sizeM,
+            _b["arc-VerticalSpace--sizeL".concat(sizeL)] = sizeL && sizeL,
+            _b["arc-VerticalSpace--sizeXL".concat(sizeXL)] = sizeXL && sizeXL,
             _b["arc-VerticalSpace--debugVisible"] = isDebugVisible,
             _b)) }, index.filterDataAttrs(props))));
 };

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";