@arc-ui/components 11.2.0 → 11.4.0

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/esm/{Button-69439f8f.js → Button-10700df4.js}

@@ -65,10 +65,7 @@ var Button = forwardRef(function (_a, ref) {
 });
 var ButtonIcon = function (_a) {
     var icon = _a.icon, isChevron = _a.isChevron, isBeforeText = _a.isBeforeText;
-    return (React__default.createElement("span", { className: classNames({
-            "arc-Button-icon": true,
-            "arc-Button-icon--chevron": isChevron
-        }) }, isChevron ? (React__default.createElement(Icon, { icon: isBeforeText ? BtIconChevronLeftMid_2 : BtIconChevronRightMid_2 })) : (React__default.createElement(Icon, { icon: icon }))));
+    return (React__default.createElement("span", { className: "arc-Button-icon" }, isChevron ? (React__default.createElement(Icon, { icon: isBeforeText ? BtIconChevronLeftMid_2 : BtIconChevronRightMid_2 })) : (React__default.createElement(Icon, { icon: icon }))));
 };
 
 export { Button 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-3579b20e.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/esm/{VerticalSpace-6b4f5e50.js → VerticalSpace-3579b20e.js}

@@ -7,11 +7,15 @@ import React__default from '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 = __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 = __rest(_a, ["isDebugVisible", "size", "sizeS", "sizeM", "sizeL", "sizeXL"]);
     return (React__default.createElement("div", __assign({ className: 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)) }, filterDataAttrs(props))));
 };

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

package/dist/_shared/esm/{BtIconTickAlt2Px-2c4ec3be.js → index.module-599b86dd.js}

@@ -1,4 +1,4 @@
-import React__default, { createContext, useMemo, createElement, useContext, useCallback, forwardRef, Children, isValidElement, cloneElement, Fragment, useEffect, useRef, useLayoutEffect, useState } from 'react';
+import { createContext, useMemo, createElement, useContext, useCallback, forwardRef, Children, isValidElement, cloneElement, Fragment, useEffect, useRef, useLayoutEffect, useState } from 'react';
 import { flushSync } from 'react-dom';
 
 function _extends() {
@@ -385,24 +385,4 @@ function $010c2913dbd2fe3d$export$5cae361ad82dce8b(value) {
     ]);
 }
 
-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 { $c512c27ab02ef895$export$50c7b4e9d9f19c1 as $, BtIconTickAlt2Px_2 as B, _extends as _, $6ed0406888f73fc4$export$c7b2cbe3552a0d05 as a, $5e63c961fc1ce211$export$8c6ed5c666ac1360 as b, $b1b2314f5f9a1d84$export$25bec8c6f54ee79a as c, $8927f6f2acc4f386$export$250ffa63cdc0d034 as d, $e42e1063c40fb3ef$export$b9ecd428b558ff10 as e, $8927f6f2acc4f386$export$6d1a0317bde7de7f as f, $9f79659886946c16$export$e5c5a5f917a5871c as g, $71cd76cc60e0454e$export$6f32135080cb4c3 as h, $010c2913dbd2fe3d$export$5cae361ad82dce8b as i };
+export { $c512c27ab02ef895$export$50c7b4e9d9f19c1 as $, _extends as _, $6ed0406888f73fc4$export$c7b2cbe3552a0d05 as a, $5e63c961fc1ce211$export$8c6ed5c666ac1360 as b, $b1b2314f5f9a1d84$export$25bec8c6f54ee79a as c, $8927f6f2acc4f386$export$250ffa63cdc0d034 as d, $e42e1063c40fb3ef$export$b9ecd428b558ff10 as e, $8927f6f2acc4f386$export$6d1a0317bde7de7f as f, $9f79659886946c16$export$e5c5a5f917a5871c as g, $71cd76cc60e0454e$export$6f32135080cb4c3 as h, $010c2913dbd2fe3d$export$5cae361ad82dce8b as i };

package/dist/index.es.js

@@ -1178,10 +1178,7 @@ var Button = forwardRef(function (_a, ref) {
 });
 var ButtonIcon = function (_a) {
     var icon = _a.icon, isChevron = _a.isChevron, isBeforeText = _a.isBeforeText;
-    return (React__default.createElement("span", { className: classNames({
-            "arc-Button-icon": true,
-            "arc-Button-icon--chevron": isChevron
-        }) }, isChevron ? (React__default.createElement(Icon, { icon: isBeforeText ? BtIconChevronLeftMid_2 : BtIconChevronRightMid_2 })) : (React__default.createElement(Icon, { icon: icon }))));
+    return (React__default.createElement("span", { className: "arc-Button-icon" }, isChevron ? (React__default.createElement(Icon, { icon: isBeforeText ? BtIconChevronLeftMid_2 : BtIconChevronRightMid_2 })) : (React__default.createElement(Icon, { icon: icon }))));
 };
 
 /**
@@ -1438,11 +1435,11 @@ var CardLink = function (_a) {
         }), href: href, rel: target === "_blank" ? "noopener noreferrer" : undefined, tabIndex: isButton ? -1 : undefined, target: target }, filterDataAttrs(linkData)),
         React__default.createElement("span", { className: "arc-Card-linkText" }, children),
         isButton && (React__default.createElement("span", { className: "arc-Card-linkIcon" },
-            React__default.createElement(Icon, { testId: "cardIcon", icon: BtIconChevronRightMid_2, size: 16 })))));
+            React__default.createElement(Icon, { testId: "cardIcon", icon: BtIconChevronRightMid_2, size: 24 })))));
 };
 
 const React$4 = React__default;
-const BtIconTickVariant = props =>
+const BtIconTickAlt2Px = props =>
   /*#__PURE__*/ React$4.createElement(
     "svg",
     Object.assign(
@@ -1455,11 +1452,11 @@ const BtIconTickVariant = props =>
     /*#__PURE__*/ React$4.createElement("defs", null),
     /*#__PURE__*/ React$4.createElement("path", {
       d:
-        "M13.5,21.207,9.14648,16.85352a.5.5,0,0,1,.707-.707L13.5,19.793l8.64648-8.64649a.5.5,0,0,1,.707.707Z",
+        "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 BtIconTickVariant_2 = BtIconTickVariant;
+var BtIconTickAlt2Px_2 = BtIconTickAlt2Px;
 
 const React$3 = React__default;
 const BtIconAlert = props =>
@@ -1543,14 +1540,14 @@ var Provider$3 = Context$2.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$2(_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$2(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "id", "label", "labelSize", "requirementStatus", "helperUnderLabel", "isDisabled", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
     var surface = useContext(Context$3).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 = {};
@@ -1576,11 +1573,12 @@ var FormControl = function (_a) {
             React__default.createElement(LabelType, __assign$2({ 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))))))));
 };
 
 /**
@@ -1615,7 +1613,7 @@ var Checkbox = forwardRef(function (_a, ref) {
         React__default.createElement("label", { id: idLabel, htmlFor: id, className: "arc-Checkbox-label" },
             React__default.createElement("input", __assign$2({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-Checkbox-input" }, checkedProps, { disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: ref, required: isRequired, type: "checkbox", value: value }, filterDataAttrs(props))),
             React__default.createElement("span", { className: "arc-Checkbox-box" },
-                React__default.createElement(BtIconTickVariant_2, null)),
+                React__default.createElement(BtIconTickAlt2Px_2, null)),
             React__default.createElement("span", null,
                 label,
                 !isRequired && requirementStatus !== "optional" ? (React__default.createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
@@ -1931,7 +1929,7 @@ var RadioGroup = function (_a) {
             size: size
         } },
         React__default.createElement("div", __assign$2({ className: "arc-RadioGroup" }, filterDataAttrs(props)),
-            React__default.createElement(FormControl, { elementType: "fieldset", label: label, labelSize: labelSize, helper: helper, id: id, requirementStatus: "not-applicable" }, children))));
+            React__default.createElement(FormControl, { elementType: "fieldset", label: label, labelSize: labelSize, helper: helper, id: id, requirementStatus: "not-applicable", helperUnderLabel: true }, children))));
 };
 RadioButton.displayName = "RadioGroup.RadioButton";
 RadioGroup.RadioButton = RadioButton;
@@ -35728,26 +35726,6 @@ const BtIconChevronUp2Px = props =>
   );
 var BtIconChevronUp2Px_2 = BtIconChevronUp2Px;
 
-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;
-
 /** Use `Select` to choose from a dropdown list of options. */
 var Select = function (_a) {
     var isRequired = _a.isRequired, isDisabled = _a.isDisabled, placeholder = _a.placeholder, label = _a.label, options = _a.options, onOpenChange = _a.onOpenChange, isDefaultOpen = _a.isDefaultOpen, defaultValue = _a.defaultValue, errorMessage = _a.errorMessage, labelSize = _a.labelSize, helper = _a.helper, name = _a.name, isFluid = _a.isFluid, onBlur = _a.onBlur, onChange = _a.onChange, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure;
@@ -36686,11 +36664,15 @@ const $6be4966fd9bbc698$export$6521433ed15a34db = $6be4966fd9bbc698$export$4d07b
  */
 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 = __rest$2(_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 = __rest$2(_a, ["isDebugVisible", "size", "sizeS", "sizeM", "sizeL", "sizeXL"]);
     return (React__default.createElement("div", __assign$2({ className: 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)) }, filterDataAttrs(props))));
 };
@@ -36743,6 +36725,63 @@ var Badge = function (_a) {
             React__default.createElement(Text, { size: size === "default" ? "xs" : "m" }, children))));
 };
 
+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$2(_a, ["children", "isRemovable", "link", "icon", "onClick", "onRemove"]);
+    var surface = useContext(Context$3).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$2({ 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 })))));
+};
+
 /**
  * Provides text for screen readers that is visually hidden.
  */
@@ -36794,5 +36833,5 @@ var Truncate = function (_a) {
     return (React__default.createElement("div", { className: "arc-Truncate", style: { maxWidth: "".concat(maxWidth, "%") }, title: title }, children));
 };
 
-export { Align, Badge, Base, BrandLogo, Breadcrumbs, Button, Card, Checkbox, Clock, Clock_rehydrator as ClockRehydrator, Columns, Curve, Disclosure, Elevation, FormControl, Group, Heading, Icon, Image, Markup, Poster, RadioGroup, Rule, Section, Select, SiteFooter, SiteFooter_rehydrator as SiteFooterRehydrator, SiteHeader, SiteHeaderRehydrator, Surface, Context$3 as SurfaceContext, Switch, Text, TextInput, Truncate, UniversalHeader, VerticalSpace, VisuallyHidden };
+export { Align, Badge, Base, BrandLogo, Breadcrumbs, Button, Card, Checkbox, Clock, Clock_rehydrator as ClockRehydrator, Columns, Curve, Disclosure, Elevation, FormControl, Group, Heading, Icon, Image, Markup, Poster, RadioGroup, Rule, Section, Select, SiteFooter, SiteFooter_rehydrator as SiteFooterRehydrator, SiteHeader, SiteHeaderRehydrator, Surface, Context$3 as SurfaceContext, Switch, Tag, Text, TextInput, Truncate, UniversalHeader, VerticalSpace, VisuallyHidden };
 //# sourceMappingURL=index.es.js.map