@arc-ui/components 11.3.0 → 11.4.0

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/{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/VerticalSpace-6b4f5e50.d.ts → cjs/VerticalSpace-7aed88ab.d.ts}

@@ -14,5 +14,21 @@ interface VerticalSpaceProps {
      * 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/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/VerticalSpace-65ad083c.d.ts → esm/VerticalSpace-3579b20e.d.ts}

@@ -14,5 +14,21 @@ interface VerticalSpaceProps {
      * 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/index.es.js

@@ -1,4 +1,4 @@
-import * as React$9 from 'react';
+import * as React$a from 'react';
 import React__default, { createContext, useContext, useRef, useState, useEffect, forwardRef, useMemo, createElement, useCallback, Children, isValidElement, cloneElement, Fragment, useLayoutEffect, useId } from 'react';
 
 /*! *****************************************************************************
@@ -853,9 +853,9 @@ function debounce(func, wait, options) {
 
 var debounce_1 = debounce;
 
-const React$8 = React__default;
+const React$9 = React__default;
 const BtIconChevronLeft2Px = props =>
-  /*#__PURE__*/ React$8.createElement(
+  /*#__PURE__*/ React$9.createElement(
     "svg",
     Object.assign(
       {
@@ -864,8 +864,8 @@ const BtIconChevronLeft2Px = props =>
       },
       props
     ),
-    /*#__PURE__*/ React$8.createElement("defs", null),
-    /*#__PURE__*/ React$8.createElement("path", {
+    /*#__PURE__*/ React$9.createElement("defs", null),
+    /*#__PURE__*/ React$9.createElement("path", {
       d:
         "M22.5,29.99854a.99676.99676,0,0,1-.707-.293L8.08594,15.99268,21.793,2.294A1.00023,1.00023,0,0,1,23.207,3.709l-12.293,12.28467L23.207,28.2915a1,1,0,0,1-.707,1.707Z",
       fill: "currentColor"
@@ -873,9 +873,9 @@ const BtIconChevronLeft2Px = props =>
   );
 var BtIconChevronLeft2Px_2 = BtIconChevronLeft2Px;
 
-const React$7 = React__default;
+const React$8 = React__default;
 const BtIconChevronRight2Px = props =>
-  /*#__PURE__*/ React$7.createElement(
+  /*#__PURE__*/ React$8.createElement(
     "svg",
     Object.assign(
       {
@@ -884,8 +884,8 @@ const BtIconChevronRight2Px = props =>
       },
       props
     ),
-    /*#__PURE__*/ React$7.createElement("defs", null),
-    /*#__PURE__*/ React$7.createElement("path", {
+    /*#__PURE__*/ React$8.createElement("defs", null),
+    /*#__PURE__*/ React$8.createElement("path", {
       d:
         "M9.5,29.99854A1.00025,1.00025,0,0,1,8.793,28.291l12.293-12.28467L8.793,3.7085A.99989.99989,0,0,1,10.207,2.29443l13.707,13.71289L10.207,29.70605A.99827.99827,0,0,1,9.5,29.99854Z",
       fill: "currentColor"
@@ -893,9 +893,9 @@ const BtIconChevronRight2Px = props =>
   );
 var BtIconChevronRight2Px_2 = BtIconChevronRight2Px;
 
-const React$6 = React__default;
+const React$7 = React__default;
 const ArcIconArc = props =>
-  /*#__PURE__*/ React$6.createElement(
+  /*#__PURE__*/ React$7.createElement(
     "svg",
     Object.assign(
       {
@@ -904,7 +904,7 @@ const ArcIconArc = props =>
       },
       props
     ),
-    /*#__PURE__*/ React$6.createElement("path", {
+    /*#__PURE__*/ React$7.createElement("path", {
       fill: "none",
       d: "M3.472 11.69a6.5 6.5 0 012.321-6.839A6.5 6.5 0 0113 4.38",
       stroke: "currentColor"
@@ -1097,9 +1097,9 @@ var BrandLogo = function (_a) {
         } }, filterDataAttrs(props)), label ? React__default.createElement("span", { className: "arc-BrandLogo-text" }, label) : null));
 };
 
-const React$5 = React__default;
+const React$6 = React__default;
 const BtIconChevronLeftMid = props =>
-  /*#__PURE__*/ React$5.createElement(
+  /*#__PURE__*/ React$6.createElement(
     "svg",
     Object.assign(
       {
@@ -1109,7 +1109,7 @@ const BtIconChevronLeftMid = props =>
       },
       props
     ),
-    /*#__PURE__*/ React$5.createElement("path", {
+    /*#__PURE__*/ React$6.createElement("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
       d:
@@ -1119,9 +1119,9 @@ const BtIconChevronLeftMid = props =>
   );
 var BtIconChevronLeftMid_2 = BtIconChevronLeftMid;
 
-const React$4 = React__default;
+const React$5 = React__default;
 const BtIconChevronRightMid = props =>
-  /*#__PURE__*/ React$4.createElement(
+  /*#__PURE__*/ React$5.createElement(
     "svg",
     Object.assign(
       {
@@ -1131,7 +1131,7 @@ const BtIconChevronRightMid = props =>
       },
       props
     ),
-    /*#__PURE__*/ React$4.createElement("path", {
+    /*#__PURE__*/ React$5.createElement("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
       d:
@@ -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,12 +1435,12 @@ 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$3 = React__default;
+const React$4 = React__default;
 const BtIconTickAlt2Px = props =>
-  /*#__PURE__*/ React$3.createElement(
+  /*#__PURE__*/ React$4.createElement(
     "svg",
     Object.assign(
       {
@@ -1452,8 +1449,8 @@ const BtIconTickAlt2Px = props =>
       },
       props
     ),
-    /*#__PURE__*/ React$3.createElement("defs", null),
-    /*#__PURE__*/ React$3.createElement("path", {
+    /*#__PURE__*/ React$4.createElement("defs", null),
+    /*#__PURE__*/ React$4.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"
@@ -1461,9 +1458,9 @@ const BtIconTickAlt2Px = props =>
   );
 var BtIconTickAlt2Px_2 = BtIconTickAlt2Px;
 
-const React$2 = React__default;
+const React$3 = React__default;
 const BtIconAlert = props =>
-  /*#__PURE__*/ React$2.createElement(
+  /*#__PURE__*/ React$3.createElement(
     "svg",
     Object.assign(
       {
@@ -1472,17 +1469,17 @@ const BtIconAlert = props =>
       },
       props
     ),
-    /*#__PURE__*/ React$2.createElement("defs", null),
-    /*#__PURE__*/ React$2.createElement("path", {
+    /*#__PURE__*/ React$3.createElement("defs", null),
+    /*#__PURE__*/ React$3.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$2.createElement("path", {
+    /*#__PURE__*/ React$3.createElement("path", {
       fill: "currentColor",
       d: "M16 20.99335A1 1 0 1 0 16 22.99335 1 1 0 1 0 16 20.99335z"
     }),
-    /*#__PURE__*/ React$2.createElement("path", {
+    /*#__PURE__*/ React$3.createElement("path", {
       d:
         "M16.00488,19.00977a.49972.49972,0,0,0,.5-.5L16.50684,9.5a.5.5,0,0,0-1,0l-.002,9.00977A.5.5,0,0,0,16.00488,19.00977Z",
       fill: "currentColor"
@@ -1720,9 +1717,9 @@ var Curve = function (_a) {
             _b)) }, filterDataAttrs(props))));
 };
 
-const React$1 = React__default;
+const React$2 = React__default;
 const BtIconChevronDown2Px = props =>
-  /*#__PURE__*/ React$1.createElement(
+  /*#__PURE__*/ React$2.createElement(
     "svg",
     Object.assign(
       {
@@ -1731,8 +1728,8 @@ const BtIconChevronDown2Px = props =>
       },
       props
     ),
-    /*#__PURE__*/ React$1.createElement("defs", null),
-    /*#__PURE__*/ React$1.createElement("path", {
+    /*#__PURE__*/ React$2.createElement("defs", null),
+    /*#__PURE__*/ React$2.createElement("path", {
       d:
         "M15.99316,23.91406,2.294,10.207A.99989.99989,0,1,1,3.708,8.793l12.28515,12.293L28.292,8.793A.99989.99989,0,1,1,29.70605,10.207Z",
       fill: "currentColor"
@@ -33756,11 +33753,11 @@ function $d3863c46a17e8a28$var$removeLinks(items) {
  * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
  */ const $9f79659886946c16$export$e5c5a5f917a5871c = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? useLayoutEffect : ()=>{};
 
-const $1746a345f3d73bb7$var$useReactId = React$9['useId'.toString()] || (()=>undefined
+const $1746a345f3d73bb7$var$useReactId = React$a['useId'.toString()] || (()=>undefined
 );
 let $1746a345f3d73bb7$var$count = 0;
 function $1746a345f3d73bb7$export$f680877a34711e37(deterministicId) {
-    const [id, setId] = React$9.useState($1746a345f3d73bb7$var$useReactId()); // React versions older than 18 will have client-side ids only.
+    const [id, setId] = React$a.useState($1746a345f3d73bb7$var$useReactId()); // React versions older than 18 will have client-side ids only.
     $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
         if (!deterministicId) setId((reactId)=>reactId !== null && reactId !== void 0 ? reactId : String($1746a345f3d73bb7$var$count++)
         );
@@ -34245,7 +34242,7 @@ var SideCar$1 = function (_a) {
     if (!Target) {
         throw new Error('Sidecar medium not found');
     }
-    return React$9.createElement(Target, __assign({}, rest));
+    return React$a.createElement(Target, __assign({}, rest));
 };
 SideCar$1.isSideCarExport = true;
 function exportSidecar(medium, exported) {
@@ -34261,9 +34258,9 @@ var nothing = function () {
 /**
  * Removes scrollbar from the page and contain the scroll within the Lock
  */
-var RemoveScroll = React$9.forwardRef(function (props, parentRef) {
-    var ref = React$9.useRef(null);
-    var _a = React$9.useState({
+var RemoveScroll = React$a.forwardRef(function (props, parentRef) {
+    var ref = React$a.useRef(null);
+    var _a = React$a.useState({
         onScrollCapture: nothing,
         onWheelCapture: nothing,
         onTouchMoveCapture: nothing,
@@ -34272,9 +34269,9 @@ var RemoveScroll = React$9.forwardRef(function (props, parentRef) {
     var SideCar = sideCar;
     var containerRef = useMergeRefs([ref, parentRef]);
     var containerProps = __assign$1(__assign$1({}, rest), callbacks);
-    return (React$9.createElement(React$9.Fragment, null,
-        enabled && (React$9.createElement(SideCar, { sideCar: effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref })),
-        forwardProps ? (React$9.cloneElement(React$9.Children.only(children), __assign$1(__assign$1({}, containerProps), { ref: containerRef }))) : (React$9.createElement(Container, __assign$1({}, containerProps, { className: className, ref: containerRef }), children))));
+    return (React$a.createElement(React$a.Fragment, null,
+        enabled && (React$a.createElement(SideCar, { sideCar: effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref })),
+        forwardProps ? (React$a.cloneElement(React$a.Children.only(children), __assign$1(__assign$1({}, containerProps), { ref: containerRef }))) : (React$a.createElement(Container, __assign$1({}, containerProps, { className: className, ref: containerRef }), children))));
 });
 RemoveScroll.defaultProps = {
     enabled: true,
@@ -34353,7 +34350,7 @@ var stylesheetSingleton = function () {
 var styleHookSingleton = function () {
     var sheet = stylesheetSingleton();
     return function (styles, isDynamic) {
-        React$9.useEffect(function () {
+        React$a.useEffect(function () {
             sheet.add(styles);
             return function () {
                 sheet.remove();
@@ -34434,8 +34431,8 @@ var RemoveScrollBar = function (props) {
      however it will be used only by the "first" invocation
      due to singleton nature of <Style
      */
-    var gap = React$9.useMemo(function () { return getGapWidth(gapMode); }, [gapMode]);
-    return React$9.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? '!important' : '') });
+    var gap = React$a.useMemo(function () { return getGapWidth(gapMode); }, [gapMode]);
+    return React$a.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? '!important' : '') });
 };
 
 var passiveSupported = false;
@@ -34567,16 +34564,16 @@ var generateStyle = function (id) { return "\n  .block-interactivity-".concat(id
 var idCounter = 0;
 var lockStack = [];
 function RemoveScrollSideCar(props) {
-    var shouldPreventQueue = React$9.useRef([]);
-    var touchStartRef = React$9.useRef([0, 0]);
-    var activeAxis = React$9.useRef();
-    var id = React$9.useState(idCounter++)[0];
-    var Style = React$9.useState(function () { return styleSingleton(); })[0];
-    var lastProps = React$9.useRef(props);
-    React$9.useEffect(function () {
+    var shouldPreventQueue = React$a.useRef([]);
+    var touchStartRef = React$a.useRef([0, 0]);
+    var activeAxis = React$a.useRef();
+    var id = React$a.useState(idCounter++)[0];
+    var Style = React$a.useState(function () { return styleSingleton(); })[0];
+    var lastProps = React$a.useRef(props);
+    React$a.useEffect(function () {
         lastProps.current = props;
     }, [props]);
-    React$9.useEffect(function () {
+    React$a.useEffect(function () {
         if (props.inert) {
             document.body.classList.add("block-interactivity-".concat(id));
             var allow_1 = __spreadArray([props.lockRef.current], (props.shards || []).map(extractRef), true).filter(Boolean);
@@ -34588,7 +34585,7 @@ function RemoveScrollSideCar(props) {
         }
         return;
     }, [props.inert, props.lockRef.current, props.shards]);
-    var shouldCancelEvent = React$9.useCallback(function (event, parent) {
+    var shouldCancelEvent = React$a.useCallback(function (event, parent) {
         if ('touches' in event && event.touches.length === 2) {
             return !lastProps.current.allowPinchZoom;
         }
@@ -34627,7 +34624,7 @@ function RemoveScrollSideCar(props) {
         var cancelingAxis = activeAxis.current || currentAxis;
         return handleScroll(cancelingAxis, parent, event, cancelingAxis === 'h' ? deltaX : deltaY, true);
     }, []);
-    var shouldPrevent = React$9.useCallback(function (_event) {
+    var shouldPrevent = React$a.useCallback(function (_event) {
         var event = _event;
         if (!lockStack.length || lockStack[lockStack.length - 1] !== Style) {
             // not the last active
@@ -34656,24 +34653,24 @@ function RemoveScrollSideCar(props) {
             }
         }
     }, []);
-    var shouldCancel = React$9.useCallback(function (name, delta, target, should) {
+    var shouldCancel = React$a.useCallback(function (name, delta, target, should) {
         var event = { name: name, delta: delta, target: target, should: should };
         shouldPreventQueue.current.push(event);
         setTimeout(function () {
             shouldPreventQueue.current = shouldPreventQueue.current.filter(function (e) { return e !== event; });
         }, 1);
     }, []);
-    var scrollTouchStart = React$9.useCallback(function (event) {
+    var scrollTouchStart = React$a.useCallback(function (event) {
         touchStartRef.current = getTouchXY(event);
         activeAxis.current = undefined;
     }, []);
-    var scrollWheel = React$9.useCallback(function (event) {
+    var scrollWheel = React$a.useCallback(function (event) {
         shouldCancel(event.type, getDeltaXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
     }, []);
-    var scrollTouchMove = React$9.useCallback(function (event) {
+    var scrollTouchMove = React$a.useCallback(function (event) {
         shouldCancel(event.type, getTouchXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
     }, []);
-    React$9.useEffect(function () {
+    React$a.useEffect(function () {
         lockStack.push(Style);
         props.setCallbacks({
             onScrollCapture: scrollWheel,
@@ -34691,14 +34688,14 @@ function RemoveScrollSideCar(props) {
         };
     }, []);
     var removeScrollBar = props.removeScrollBar, inert = props.inert;
-    return (React$9.createElement(React$9.Fragment, null,
-        inert ? React$9.createElement(Style, { styles: generateStyle(id) }) : null,
-        removeScrollBar ? React$9.createElement(RemoveScrollBar, { gapMode: "margin" }) : null));
+    return (React$a.createElement(React$a.Fragment, null,
+        inert ? React$a.createElement(Style, { styles: generateStyle(id) }) : null,
+        removeScrollBar ? React$a.createElement(RemoveScrollBar, { gapMode: "margin" }) : null));
 }
 
 var SideCar = exportSidecar(effectCar, RemoveScrollSideCar);
 
-var ReactRemoveScroll = React$9.forwardRef(function (props, ref) { return (React$9.createElement(RemoveScroll, __assign$1({}, props, { ref: ref, sideCar: SideCar }))); });
+var ReactRemoveScroll = React$a.forwardRef(function (props, ref) { return (React$a.createElement(RemoveScroll, __assign$1({}, props, { ref: ref, sideCar: SideCar }))); });
 ReactRemoveScroll.classNames = RemoveScroll.classNames;
 var $01b9c$RemoveScroll = ReactRemoveScroll;
 
@@ -35709,9 +35706,9 @@ const $cc7e05a45900e73f$export$c3468e2714d175fa = $cc7e05a45900e73f$export$6b919
 const $cc7e05a45900e73f$export$2f60d3ec9ad468f2 = $cc7e05a45900e73f$export$d8117927658af6d7;
 const $cc7e05a45900e73f$export$bf1aedc3039c8d63 = $cc7e05a45900e73f$export$ff951e476c12189;
 
-const React = React__default;
+const React$1 = React__default;
 const BtIconChevronUp2Px = props =>
-  /*#__PURE__*/ React.createElement(
+  /*#__PURE__*/ React$1.createElement(
     "svg",
     Object.assign(
       {
@@ -35720,8 +35717,8 @@ const BtIconChevronUp2Px = props =>
       },
       props
     ),
-    /*#__PURE__*/ React.createElement("defs", null),
-    /*#__PURE__*/ React.createElement("path", {
+    /*#__PURE__*/ React$1.createElement("defs", null),
+    /*#__PURE__*/ React$1.createElement("path", {
       d:
         "M28.999,23.5a.99676.99676,0,0,1-.707-.293l-12.28515-12.293L3.708,23.207A.99989.99989,0,0,1,2.294,21.793l13.71289-13.707L29.70605,21.793a.99976.99976,0,0,1-.707,1.707Z",
       fill: "currentColor"
@@ -36667,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))));
 };
@@ -36724,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.
  */
@@ -36775,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