@arc-ui/components 12.0.0-beta.6 → 12.0.0-beta7

package/dist/_shared/cjs/{index-c137700a.js → index-ba3141f5.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-6f33b8c0.js');
+var index = require('./index-76f7dd53.js');
 
 function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
     const [size, setSize] = React.useState(undefined);

package/dist/_shared/cjs/{index-677557a4.js → index-dbc843d3.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-6f33b8c0.js');
+var index = require('./index-76f7dd53.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/_shared/cjs/{index.es-ba095ee5.js → index.es-f23456fa.js}

@@ -2,9 +2,9 @@
 
 /**
  * Do not edit directly
- * Generated on Wed, 18 Sep 2024 09:30:43 GMT
+ * Generated on Fri, 25 Oct 2024 08:31:41 GMT
  */
-var SemSizeBreakpointsS = "576px"; // Small (SM) - 576px to 767px: This is often used for smartphones in landscape mode and small tablets.
+var SemSizeBreakpointsS = "636px"; // Small (SM) - 636px to 767px: This is often used for smartphones in landscape mode and small tablets.
 var SemSizeBreakpointsM = "768px"; // Medium (MD) - 768px to 991px: This is commonly used for larger tablets and smaller desktop screens.
 var SemSizeBreakpointsL = "1024px"; // Large (LG) - 1024px - 1279px: This breakpoint is often applied to larger desktop screens and some laptops.
 

package/dist/_shared/esm/{Avatar-b5ac0a89.js → Avatar-3537bca7.js}

@@ -2,9 +2,9 @@ import { a as __assign, _ as __rest, f as filterDataAttrs } from './index.es-549
 import React__default from 'react';
 import { c as classNames } from './index-2e73c2e9.js';
 import { C as ConditionalWrapper } from './ConditionalWrapper-b85979de.js';
-import { T as ThemeIcon } from './ThemeIcon-9fac63d0.js';
+import { T as ThemeIcon } from './ThemeIcon-e1e19266.js';
 import { I as Image } from './Image-c1dc10b5.js';
-import { H as Heading } from './Heading-0dfbdb24.js';
+import { H as Heading } from './Heading-0a8d3545.js';
 
 var AvatarContent = function (_a) {
     var img = _a.img, initials = _a.initials, _b = _a.size, size = _b === void 0 ? "xl" : _b;

package/dist/_shared/esm/Badge-7bc80706.js

@@ -0,0 +1,11 @@
+import { _ as __rest, a as __assign, s as suffixModifier, f as filterDataAttrs } from './index.es-5496ec12.js';
+import React__default from 'react';
+import { c as classNames } from './index-2e73c2e9.js';
+
+/** Use `Badge` as a static, non-interactive way to provide short updates. */
+var Badge = function (_a) {
+    var children = _a.children, _b = _a.state, state = _b === void 0 ? "default" : _b, ariaLabel = _a.ariaLabel, ariaRole = _a.ariaRole, props = __rest(_a, ["children", "state", "ariaLabel", "ariaRole"]);
+    return (React__default.createElement("div", __assign({ className: classNames("arc-Badge", suffixModifier("arc-Badge--state", state)) }, (ariaLabel && { "aria-label": ariaLabel }), (ariaRole && { role: ariaRole }), filterDataAttrs(props)), children));
+};
+
+export { Badge as B };

package/dist/_shared/esm/Box-557fb3b1.js

@@ -0,0 +1,23 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
+import React__default from 'react';
+import { c as classNames } from './index-2e73c2e9.js';
+import { S as Surface } from './Surface-0af6a69a.js';
+
+/**
+ * Use `Box` as a simple way to group bespoke content and interactive elements together.
+ */
+var Box = function (_a) {
+    var _b;
+    var children = _a.children, borderWidth = _a.borderWidth, elevationLevel = _a.elevationLevel, padding = _a.padding, _c = _a.isFullHeight, isFullHeight = _c === void 0 ? false : _c, _d = _a.isBorderRadius, isBorderRadius = _d === void 0 ? false : _d, _e = _a.surface, surface = _e === void 0 ? "light-white" : _e, isSurfaceTransparent = _a.isSurfaceTransparent, props = __rest(_a, ["children", "borderWidth", "elevationLevel", "padding", "isFullHeight", "isBorderRadius", "surface", "isSurfaceTransparent"]);
+    return (React__default.createElement("div", __assign({ className: classNames("arc-Box", (_b = {},
+            _b["arc-Box--fullHeight"] = isFullHeight,
+            _b["arc-Box--borderRadius"] = isBorderRadius,
+            _b["arc-Box--borderThin"] = borderWidth === "thin",
+            _b["arc-Box--borderMedium"] = borderWidth === "medium",
+            _b["arc-Box--elevation1"] = elevationLevel === "1",
+            _b["arc-Box--elevation2"] = elevationLevel === "2",
+            _b)) }, filterDataAttrs(props)),
+        React__default.createElement(Surface, { padding: padding, background: surface, isTransparent: isSurfaceTransparent }, children)));
+};
+
+export { Box as B };

package/dist/_shared/esm/{BrandLogo-fb863b5b.js → BrandLogo-45d0d795.js}

@@ -1,7 +1,7 @@
 import { _ as __rest, a as __assign, s as suffixModifier, f as filterDataAttrs } from './index.es-5496ec12.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { useContext } from 'react';
-import { C as Context } from './Surface-c425e5e6.js';
+import { C as Context } from './Surface-0af6a69a.js';
 
 /**
  * Use `BrandLogo` to display the brand logo.

package/dist/_shared/esm/{Breadcrumbs-01ebed9b.js → Breadcrumbs-bcf9ca79.js}

@@ -1,7 +1,7 @@
 import { a as __assign, _ as __rest, f as filterDataAttrs } from './index.es-5496ec12.js';
 import React__default, { useRef, useState, useEffect } from 'react';
 import { d as debounce_1 } from './debounce-c8e41002.js';
-import { T as ThemeIcon } from './ThemeIcon-9fac63d0.js';
+import { T as ThemeIcon } from './ThemeIcon-e1e19266.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
 

package/dist/_shared/esm/{Button-1491784f.js → Button-0506afa7.js}

@@ -1,9 +1,9 @@
 import { _ as __rest, s as suffixModifier, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { forwardRef, useContext } from 'react';
-import { I as Icon } from './Icon-428e8061.js';
-import { C as Context } from './Surface-c425e5e6.js';
-import { T as ThemeIcon } from './ThemeIcon-9fac63d0.js';
+import { I as Icon } from './Icon-a5cb17de.js';
+import { C as Context } from './Surface-0af6a69a.js';
+import { T as ThemeIcon } from './ThemeIcon-e1e19266.js';
 
 /**
  * Use `Button` to let a user complete an action like ‘Log in’ or ‘Register’.

package/dist/_shared/esm/{ButtonV2-f9019e00.js → ButtonV2-c83db10c.js}

@@ -1,13 +1,18 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
 import React__default, { forwardRef, useContext } from 'react';
 import { c as classNames } from './index-2e73c2e9.js';
-import { I as Icon } from './Icon-428e8061.js';
-import { C as Context } from './Surface-c425e5e6.js';
-import { A as ArcIconEclipse } from './ArcIconEclipse.esm-bb48b82a.js';
+import { I as Icon } from './Icon-a5cb17de.js';
+import { C as Context } from './Surface-0af6a69a.js';
+import { S as Spinner } from './Spinner-6704017c.js';
 
 var ButtonV2 = forwardRef(function (_a, ref) {
     var label = _a.label, _b = _a.buttonStyle, buttonStyle = _b === void 0 ? "primary" : _b, icon = _a.icon, _c = _a.iconPosition, iconPosition = _c === void 0 ? "beforeText" : _c, _d = _a.size, size = _d === void 0 ? "m" : _d, ariaLabel = _a.ariaLabel, _e = _a.isFullWidth, isFullWidth = _e === void 0 ? false : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, onClick = _a.onClick, href = _a.href, id = _a.id, rel = _a.rel, target = _a.target, type = _a.type, form = _a.form, props = __rest(_a, ["label", "buttonStyle", "icon", "iconPosition", "size", "ariaLabel", "isFullWidth", "isLoading", "onClick", "href", "id", "rel", "target", "type", "form"]);
     var surface = useContext(Context).surface;
+    var iconSizes = {
+        s: 16,
+        m: 32,
+        l: 40
+    };
     var ButtonV2Classes = classNames("arc-ButtonV2", ["arc-ButtonV2--".concat(buttonStyle)], ["arc-ButtonV2--".concat(size)], {
         "arc-ButtonV2--onDarkSurface": surface === "dark",
         "arc-ButtonV2--emptyLabel": !label,
@@ -24,9 +29,9 @@ var ButtonV2 = forwardRef(function (_a, ref) {
                 }) },
                 label && React__default.createElement("span", { className: "arc-ButtonV2-label" }, label),
                 isLoading && (React__default.createElement("span", { className: "arc-ButtonV2-icon" },
-                    React__default.createElement(Icon, { size: size === "s" ? 16 : 32, icon: ArcIconEclipse }))),
+                    React__default.createElement(Spinner, { size: size }))),
                 icon && !isLoading && (React__default.createElement("span", { className: "arc-ButtonV2-icon" },
-                    React__default.createElement(Icon, { size: size === "s" ? 16 : 32, icon: icon }))))));
+                    React__default.createElement(Icon, { size: iconSizes[size], icon: icon }))))));
     }
     return (React__default.createElement("button", __assign({}, commonProps, { className: ButtonV2Classes, "aria-label": ariaLabel, disabled: isLoading, type: type, form: form }),
         React__default.createElement("span", { className: classNames("arc-ButtonV2-inner", {
@@ -34,9 +39,9 @@ var ButtonV2 = forwardRef(function (_a, ref) {
             }) },
             label && React__default.createElement("span", { className: "arc-ButtonV2-label" }, label),
             icon && !isLoading && (React__default.createElement("span", { className: "arc-ButtonV2-icon" },
-                React__default.createElement(Icon, { size: size === "s" ? 16 : 32, icon: icon }))),
+                React__default.createElement(Icon, { size: iconSizes[size], icon: icon }))),
             isLoading && (React__default.createElement("span", { className: "arc-ButtonV2-icon" },
-                React__default.createElement(Icon, { size: size === "s" ? 16 : 32, icon: ArcIconEclipse }))))));
+                React__default.createElement(Spinner, { size: size }))))));
 });
 
 export { ButtonV2 as B };

package/dist/_shared/esm/{Calendar-5c2fb044.js → Calendar-34b10bd5.js}

@@ -1,15 +1,15 @@
 import { b as __spreadArray, a as __assign, _ as __rest, f as filterDataAttrs } from './index.es-5496ec12.js';
 import React__default, { createContext, forwardRef, useContext, useCallback, useRef, useState, useReducer, useEffect } from 'react';
 import { r as requiredArgs, t as toDate, a as toInteger, _ as _typeof, g as getDefaultOptions, f as format } from './index-ce6dee84.js';
-import { S as SemSizeBreakpointsM } from './index.es-974af4a2.js';
+import { S as SemSizeBreakpointsM } from './index.es-932db59a.js';
 import { u as useMediaQuery } from './use-media-query-d3622da8.js';
 import { c as classNames } from './index-2e73c2e9.js';
-import { T as Text } from './Text-96d8a35f.js';
+import { T as Text } from './Text-df93be85.js';
 import { V as VisuallyHidden } from './VisuallyHidden-cf45ac18.js';
-import { S as Surface } from './Surface-c425e5e6.js';
-import { H as Heading } from './Heading-0dfbdb24.js';
+import { S as Surface } from './Surface-0af6a69a.js';
+import { H as Heading } from './Heading-0a8d3545.js';
 import { B as BtIconChevronRightMid } from './BtIconChevronRightMid.esm-4764708f.js';
-import { I as Icon } from './Icon-428e8061.js';
+import { I as Icon } from './Icon-a5cb17de.js';
 
 /**
  * @name addMonths
@@ -1117,7 +1117,7 @@ var CalendarDayNumber = forwardRef(function (_a, autoFocusRef) {
         onClick: onDayNumberClick(date),
         onMouseEnter: onDayNumberHover(date)
     };
-    return (React__default.createElement("td", __assign({ ref: handleRefs, "data-date": date.getTime() }, (shouldRender ? tableCellProps : {})), shouldRender && (React__default.createElement(React__default.Fragment, null,
+    return (React__default.createElement("td", __assign({ ref: handleRefs, "data-date": date.getTime() }, (shouldRender ? tableCellProps : {}), { role: "gridcell" }), shouldRender && (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(VisuallyHidden, null, format(date, "MMMM do, yyyy")),
         React__default.createElement("div", { className: "arc-CalendarDayNumber-buttonOuter" },
             React__default.createElement("div", { className: "arc-CalendarDayNumber-buttonInner" },

package/dist/_shared/esm/{CardFooter-e4380cda.js → CardFooter-bf886438.js}

@@ -2,7 +2,7 @@ import React__default from 'react';
 import { c as classNames } from './index-2e73c2e9.js';
 import { B as BtIconArrowRight } from './BtIconArrowRight.esm-93da96bb.js';
 import { B as BtIconPlayFill } from './BtIconPlayFill.esm-05fc0344.js';
-import { I as Icon } from './Icon-428e8061.js';
+import { I as Icon } from './Icon-a5cb17de.js';
 import { i as isDate, f as format } from './index-ce6dee84.js';
 
 const BtIconPlay = (props) =>
@@ -65,9 +65,9 @@ var CardFooter = function (_a) {
                     React__default.createElement("div", { className: classNames("arc-CardFooter-buttonIconRight", {
                             "arc-CardFooter-buttonIconRight--isHovered": isHovered
                         }) },
-                        React__default.createElement(Icon, { icon: icons[buttonIcon].regular, size: 40 })),
+                        React__default.createElement(Icon, { icon: icons[buttonIcon].regular })),
                     React__default.createElement("div", { className: "arc-CardFooter-buttonIconLeft" },
-                        React__default.createElement(Icon, { icon: icons[buttonIcon].regular, size: 40 }))))))));
+                        React__default.createElement(Icon, { icon: icons[buttonIcon].regular }))))))));
 };
 
 export { CardFooter as C };

package/dist/_shared/esm/{CardHeading-4223432d.js → CardHeading-c65f9fb2.js}

@@ -1,6 +1,6 @@
 import { a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
 import React__default from 'react';
-import { H as Heading } from './Heading-0dfbdb24.js';
+import { H as Heading } from './Heading-0a8d3545.js';
 
 var CardHeading = function (_a) {
     var onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onBlur = _a.onBlur, onFocus = _a.onFocus, href = _a.href, heading = _a.heading, _b = _a.size, size = _b === void 0 ? "m" : _b, _c = _a.linkData, linkData = _c === void 0 ? {} : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d;

package/dist/_shared/esm/{Checkbox-97def257.js → Checkbox-8195c42c.js}

@@ -1,22 +1,26 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
 import React__default, { forwardRef, useContext } from 'react';
 import { c as classNames } from './index-2e73c2e9.js';
-import { C as Context, u as useAriaDescribedby } from './FormControl-e0acdf7a.js';
-import { C as Context$1 } from './Surface-c425e5e6.js';
-import { T as ThemeIcon } from './ThemeIcon-9fac63d0.js';
+import { C as Context, u as useAriaDescribedby } from './FormControl-ff671eb8.js';
+import { C as Context$1 } from './Surface-0af6a69a.js';
+import { T as ThemeIcon } from './ThemeIcon-e1e19266.js';
 import { V as VisuallyHidden } from './VisuallyHidden-cf45ac18.js';
 
 /**
  *  Use `Checkbox` to allow users to select individual options.
  */
 var Checkbox = forwardRef(function (_a, ref) {
-    var _b = _a.checked, checked = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isRequired, isRequired = _d === void 0 ? false : _d, label = _a.label, _e = _a.hideLabel, hideLabel = _e === void 0 ? false : _e, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _f = _a.size, size = _f === void 0 ? "l" : _f, value = _a.value, _g = _a.checkboxAlignment, checkboxAlignment = _g === void 0 ? "center" : _g, props = __rest(_a, ["checked", "errorMessage", "helper", "id", "isDisabled", "isRequired", "label", "hideLabel", "name", "onBlur", "onChange", "size", "value", "checkboxAlignment"]);
+    var _b = _a.checked, checked = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isRequired, isRequired = _d === void 0 ? false : _d, label = _a.label, _e = _a.hideLabel, hideLabel = _e === void 0 ? false : _e, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _f = _a.size, size = _f === void 0 ? "m" : _f, value = _a.value, _g = _a.checkboxAlignment, checkboxAlignment = _g === void 0 ? "center" : _g, props = __rest(_a, ["checked", "errorMessage", "helper", "id", "isDisabled", "isRequired", "label", "hideLabel", "name", "onBlur", "onChange", "size", "value", "checkboxAlignment"]);
     var requirementStatus = useContext(Context).requirementStatus;
     var surface = useContext(Context$1).surface;
     var _h = useAriaDescribedby({
         id: id,
         errorMessage: errorMessage
     }), ariaDescribedby = _h.ariaDescribedby, idError = _h.idError;
+    var tickSize = {
+        s: { width: 14, height: 11 },
+        m: { width: 18, height: 14 }
+    };
     var idLabel = "".concat(id, "-label");
     var checkedProps = {};
     if (typeof onChange === "function") {
@@ -40,7 +44,8 @@ var Checkbox = forwardRef(function (_a, ref) {
             }) },
             React__default.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", "aria-checked": checked ? "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(ThemeIcon, { icon: "checkboxChecked" })),
+                React__default.createElement("svg", { style: tickSize[size], viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                    React__default.createElement("path", { d: "M5.99459 14L0.350576 8.23277C0.126079 8.00285 0 7.69132 0 7.36653C0 7.04173 0.126079 6.7302 0.350576 6.50028C0.578979 6.27752 0.88258 6.15324 1.19832 6.15324C1.51405 6.15324 1.81765 6.27752 2.04606 6.50028L5.99459 10.535L15.9385 0.374054C16.0491 0.25703 16.1814 0.163688 16.3277 0.0994738C16.474 0.0352599 16.6313 0.00145997 16.7905 4.626e-05C16.9497 -0.00136745 17.1076 0.0296342 17.255 0.0912406C17.4023 0.152847 17.5362 0.243825 17.6488 0.358867C17.7614 0.473908 17.8504 0.610709 17.9107 0.761287C17.971 0.911865 18.0013 1.0732 18 1.23589C17.9986 1.39858 17.9655 1.55936 17.9026 1.70884C17.8398 1.85833 17.7485 1.99352 17.6339 2.10655L5.99459 14Z", fill: "currentColor" }))),
             React__default.createElement("span", __assign({}, (checkboxAlignment === "top" && {
                 className: "arc-Checkbox-content--marginTop"
             })), hideLabel ? (React__default.createElement(VisuallyHidden, null,

package/dist/_shared/esm/ContentSwitcher-bae1f0a7.js

@@ -0,0 +1,92 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
+import React__default, { forwardRef, useState, useRef, useEffect } from 'react';
+import { $ as $69cb30bb0017df05$export$41fb9f06171c75f4, a as $69cb30bb0017df05$export$7c6e2c02157bb7d2, b as $69cb30bb0017df05$export$54c2e3dc7acea9f5, c as $69cb30bb0017df05$export$be92b6f5f03c0fe9 } from './index-89a7c31c.js';
+import { T as Text } from './Text-df93be85.js';
+import { c as classNames } from './index-2e73c2e9.js';
+
+var ContentSwitcherTab = forwardRef(function (_a, ref) {
+    var label = _a.label, value = _a.value, onClick = _a.onClick, props = __rest(_a, ["label", "value", "onClick"]);
+    return (React__default.createElement($69cb30bb0017df05$export$41fb9f06171c75f4, __assign({ className: "arc-ContentSwitcherTab", value: value, ref: ref, onClick: onClick }, filterDataAttrs(props)),
+        React__default.createElement(Text, { size: "m" }, label)));
+});
+
+var ContentSwitcherContent = function (_a) {
+    var children = _a.children, value = _a.value;
+    return (React__default.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { className: "arc-ContentSwitcherContent", value: value }, children));
+};
+
+var ContentSwitcherList = function (_a) {
+    var children = _a.children, type = _a.type, isJustified = _a.isJustified, ariaLabel = _a.ariaLabel, isInset = _a.isInset, props = __rest(_a, ["children", "type", "isJustified", "ariaLabel", "isInset"]);
+    var _b = useState(false), rightOverflow = _b[0], setRightOverflow = _b[1];
+    var _c = useState(false), leftOverflow = _c[0], setLeftOverflow = _c[1];
+    var tabRefs = useRef([]);
+    var listRef = useRef(null);
+    var checkOverflow = function () {
+        if (listRef.current) {
+            setRightOverflow(listRef.current.scrollLeft + listRef.current.clientWidth <
+                listRef.current.scrollWidth);
+            setLeftOverflow(listRef.current.scrollLeft > 0);
+        }
+    };
+    var scrollTabIntoView = function (tabRef) {
+        if (tabRef.current && listRef.current) {
+            var scrollLeft = tabRef.current.offsetLeft -
+                listRef.current.clientWidth / 2 +
+                tabRef.current.clientWidth / 2;
+            listRef.current.scrollTo({
+                left: scrollLeft,
+                behavior: "smooth"
+            });
+        }
+    };
+    var handleScroll = function () {
+        checkOverflow();
+    };
+    useEffect(function () {
+        var list = listRef.current;
+        checkOverflow();
+        if (list) {
+            list.addEventListener("scroll", handleScroll);
+        }
+        return function () {
+            if (list) {
+                list.removeEventListener("scroll", handleScroll);
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (React__default.createElement("span", { className: "arc-ContentSwitcherList-wrapper" },
+        React__default.createElement($69cb30bb0017df05$export$54c2e3dc7acea9f5, __assign({ className: classNames("arc-ContentSwitcherList", {
+                "arc-ContentSwitcherList--contained": type === "contained",
+                "arc-ContentSwitcherList--isJustified": isJustified,
+                "arc-ContentSwitcherList--isInset": isInset
+            }), ref: listRef, "aria-label": ariaLabel }, filterDataAttrs(props)),
+            React__default.createElement("div", { className: "arc-ContentSwitcherList-inner" }, React__default.Children.map(children, function (child, index) {
+                if (tabRefs) {
+                    return React__default.cloneElement(child, {
+                        ref: function (el) { return (tabRefs.current[index] = el); },
+                        onClick: function () {
+                            return scrollTabIntoView({ current: tabRefs.current[index] });
+                        }
+                    });
+                }
+                else {
+                    return null;
+                }
+            }))),
+        React__default.createElement("span", { className: "arc-ContentSwitcherList-overflowWrapper" },
+            leftOverflow && (React__default.createElement("div", { className: "arc-ContentSwitcherList--leftOverflow", "data-testid": "arc-ContentSwitcherList--leftOverflow" })),
+            rightOverflow && (React__default.createElement("div", { className: "arc-ContentSwitcherList--rightOverflow", "data-testid": "arc-ContentSwitcherList--rightOverflow" })))));
+};
+
+/** Use `ContentSwitcher` to allow users to navigate between different sections of relevant content. */
+var ContentSwitcher = function (_a) {
+    var children = _a.children, defaultValue = _a.defaultValue, onValueChange = _a.onValueChange, activationMode = _a.activationMode, props = __rest(_a, ["children", "defaultValue", "onValueChange", "activationMode"]);
+    return (React__default.createElement("span", { className: "arc-ContentSwitcher" },
+        React__default.createElement($69cb30bb0017df05$export$be92b6f5f03c0fe9, __assign({ className: "arc-ContentSwitcher-root", defaultValue: defaultValue, onValueChange: onValueChange, activationMode: activationMode }, filterDataAttrs(props)), children)));
+};
+ContentSwitcher.Tab = ContentSwitcherTab;
+ContentSwitcher.List = ContentSwitcherList;
+ContentSwitcher.Content = ContentSwitcherContent;
+
+export { ContentSwitcher as C };

package/dist/_shared/esm/ContentSwitcherDropdown-65291c09.js

@@ -0,0 +1,41 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
+import React__default, { useState, isValidElement } from 'react';
+import { $ as $cc7e05a45900e73f$export$be92b6f5f03c0fe9, a as $cc7e05a45900e73f$export$41fb9f06171c75f4, b as $cc7e05a45900e73f$export$4c8d1a57a761ef94, c as $cc7e05a45900e73f$export$f04a61298a47a40f, d as $cc7e05a45900e73f$export$602eac185826482c, e as $cc7e05a45900e73f$export$7c6e2c02157bb7d2, f as $cc7e05a45900e73f$export$2f60d3ec9ad468f2, g as $cc7e05a45900e73f$export$d5c6c08dc2d3ca7, h as $cc7e05a45900e73f$export$6d08773d2e66f8f2, i as $cc7e05a45900e73f$export$d6e5bf9c43ea9319, j as $cc7e05a45900e73f$export$c3468e2714d175fa, k as $cc7e05a45900e73f$export$bf1aedc3039c8d63 } from './index-afbf540d.js';
+import { T as ThemeIcon } from './ThemeIcon-e1e19266.js';
+import { u as useThemeElement } from './component-3e60a45e.js';
+
+var ContentSwitcherDropdown = function (_a) {
+    var defaultValue = _a.defaultValue, tabs = _a.tabs, onValueChange = _a.onValueChange, children = _a.children, props = __rest(_a, ["defaultValue", "tabs", "onValueChange", "children"]);
+    var initialValue = defaultValue || tabs[0].value;
+    var _b = useThemeElement(), themeElement = _b[0], setThemeElement = _b[1];
+    var _c = useState(initialValue), selectedValue = _c[0], setSelectedValue = _c[1];
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement($cc7e05a45900e73f$export$be92b6f5f03c0fe9, { defaultValue: initialValue, onValueChange: children ? function (value) { return setSelectedValue(value); } : onValueChange },
+            React__default.createElement("span", __assign({ className: "arc-ContentSwitcherDropdown-selectTriggerWrapper", ref: setThemeElement }, filterDataAttrs(props)),
+                React__default.createElement($cc7e05a45900e73f$export$41fb9f06171c75f4, { className: "arc-ContentSwitcherDropdown-selectTrigger" },
+                    React__default.createElement($cc7e05a45900e73f$export$4c8d1a57a761ef94, null),
+                    React__default.createElement($cc7e05a45900e73f$export$f04a61298a47a40f, { className: "arc-ContentSwitcherDropdown-selectTriggerIcon" },
+                        React__default.createElement(ThemeIcon, { size: 24, icon: "selectTrigger" })))),
+            React__default.createElement($cc7e05a45900e73f$export$602eac185826482c, { container: themeElement },
+                React__default.createElement($cc7e05a45900e73f$export$7c6e2c02157bb7d2, { className: "arc-ContentSwitcherDropdown-selectContent", sideOffset: 8, position: "popper" },
+                    React__default.createElement($cc7e05a45900e73f$export$2f60d3ec9ad468f2, null),
+                    React__default.createElement($cc7e05a45900e73f$export$d5c6c08dc2d3ca7, null, tabs.map(function (item, index) { return (React__default.createElement($cc7e05a45900e73f$export$6d08773d2e66f8f2, { value: item.value, key: index, className: "arc-ContentSwitcherDropdown-selectItem", id: "arc-content-switcher-dropdown-trigger-".concat(item.value) },
+                        React__default.createElement($cc7e05a45900e73f$export$d6e5bf9c43ea9319, null, item.label),
+                        React__default.createElement($cc7e05a45900e73f$export$c3468e2714d175fa, null,
+                            React__default.createElement(ThemeIcon, { size: 24, icon: "selectIndicator" })))); })),
+                    React__default.createElement($cc7e05a45900e73f$export$bf1aedc3039c8d63, null)))),
+        React__default.Children.map(children, function (child) {
+            if (!isValidElement(child)) {
+                return null;
+            }
+            var isActive = child.props.value === selectedValue;
+            return (React__default.createElement("div", __assign({ role: "tabpanel", className: "arc-ContentSwitcherDropdown-content", id: "arc-content-switcher-dropdown-content-".concat(child.props.value), "aria-labelledby": "arc-content-switcher-dropdown-trigger-".concat(child.props.value), "data-state": isActive ? "active" : "inactive", tabIndex: 0, hidden: !isActive }, filterDataAttrs(child.props)), child));
+        })));
+};
+var ContentSwitcherDropdownContent = function (_a) {
+    var children = _a.children;
+    return React__default.createElement(React__default.Fragment, null, children);
+};
+ContentSwitcherDropdown.Content = ContentSwitcherDropdownContent;
+
+export { ContentSwitcherDropdown as C };

package/dist/_shared/esm/{DatePicker-2d891441.js → DatePicker-aafbdea8.js}

@@ -6,9 +6,9 @@ import { P as Primitive, u as useLayoutEffect2, c as createContextScope, a as us
 import { u as useFloating, a as autoUpdate, o as offset, s as shift, l as limitShift, f as flip, b as size, c as arrow, h as hide } from './floating-ui.react-dom-1bb71aae.js';
 import { jsx } from 'react/jsx-runtime';
 import { h as hideOthers, u as useThemeElement } from './component-3e60a45e.js';
-import { C as Calendar, i as isBefore, a as isAfter, c as compareAsc } from './Calendar-5c2fb044.js';
+import { C as Calendar, i as isBefore, a as isAfter, c as compareAsc } from './Calendar-34b10bd5.js';
 import { r as requiredArgs, t as toDate, b as isValid, f as format } from './index-ce6dee84.js';
-import { T as TextInputWithPlaceHolder } from './TextInput-8e3b81bf.js';
+import { T as TextInputWithPlaceHolder } from './TextInput-7ab39a54.js';
 
 /**
  * @name startOfDay

package/dist/_shared/esm/{DisclosureMini-6292f721.js → DisclosureMini-f6d8c9bc.js}

@@ -1,9 +1,9 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { useContext, useState } from 'react';
-import { T as Text } from './Text-96d8a35f.js';
-import { C as Context } from './Surface-c425e5e6.js';
-import { T as ThemeIcon } from './ThemeIcon-9fac63d0.js';
+import { T as Text } from './Text-df93be85.js';
+import { C as Context } from './Surface-0af6a69a.js';
+import { T as ThemeIcon } from './ThemeIcon-e1e19266.js';
 
 /**
  * Use `DisclosureMini` to show and hide sections of content.

package/dist/_shared/esm/{Filter-71e06965.js → Filter-a5bf3fe3.js}

@@ -1,6 +1,6 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs, b as __spreadArray } from './index.es-5496ec12.js';
 import React__default, { useContext, useState, useEffect } from 'react';
-import { C as Context } from './Surface-c425e5e6.js';
+import { C as Context } from './Surface-0af6a69a.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import { V as VisuallyHidden } from './VisuallyHidden-cf45ac18.js';
 

package/dist/_shared/esm/{FormControl-e0acdf7a.js → FormControl-ff671eb8.js}

@@ -1,10 +1,10 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { createContext, useContext } from 'react';
-import { C as Context$1 } from './Surface-c425e5e6.js';
-import { D as DisclosureMini } from './DisclosureMini-6292f721.js';
+import { C as Context$1 } from './Surface-0af6a69a.js';
+import { D as DisclosureMini } from './DisclosureMini-f6d8c9bc.js';
 import { V as VisuallyHidden } from './VisuallyHidden-cf45ac18.js';
-import { T as ThemeIcon } from './ThemeIcon-9fac63d0.js';
+import { T as ThemeIcon } from './ThemeIcon-e1e19266.js';
 
 /**
  * Optionally define ariaDescribedBy if errorMessage or helper exist.

package/dist/_shared/esm/{Group-b1b14ab4.js → Group-c4f6c745.js}

@@ -1,7 +1,7 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { useContext } from 'react';
-import { C as Context } from './Surface-c425e5e6.js';
+import { C as Context } from './Surface-0af6a69a.js';
 
 /**
  * Use `Group` to arrange flexible items in a row.

package/dist/_shared/esm/{Heading-0dfbdb24.js → Heading-0a8d3545.js}

@@ -1,7 +1,7 @@
 import { _ as __rest, a as __assign, s as suffixModifier, f as filterDataAttrs } from './index.es-5496ec12.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { useContext } from 'react';
-import { C as Context } from './Surface-c425e5e6.js';
+import { C as Context } from './Surface-0af6a69a.js';
 
 /**
  * Use `Heading` to display heading text.

package/dist/_shared/esm/{HeroButton-bb983125.js → HeroButton-a98767b7.js}

@@ -1,9 +1,9 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
 import React__default, { forwardRef, useContext } from 'react';
 import { c as classNames } from './index-2e73c2e9.js';
-import { C as Context, c as camelcase } from './Surface-c425e5e6.js';
-import { I as Icon } from './Icon-428e8061.js';
-import { A as ArcIconEclipse } from './ArcIconEclipse.esm-bb48b82a.js';
+import { C as Context, c as camelcase } from './Surface-0af6a69a.js';
+import { I as Icon } from './Icon-a5cb17de.js';
+import { S as Spinner } from './Spinner-6704017c.js';
 
 const BtIconArrowAltRight = (props) =>
   /*#__PURE__*/ React__default.createElement(
@@ -100,7 +100,7 @@ var HeroButton = forwardRef(function (_a, ref) {
             React__default.createElement("span", { className: classNames("arc-HeroButton-inner") },
                 label && React__default.createElement("span", { className: "arc-HeroButton-label" }, label),
                 isLoading && (React__default.createElement("span", { className: "arc-HeroButton-icon" },
-                    React__default.createElement(Icon, { size: 48, icon: ArcIconEclipse }))),
+                    React__default.createElement(Spinner, { size: "xxl" }))),
                 icon && !isLoading && (React__default.createElement("span", { className: "arc-HeroButton-icon" },
                     React__default.createElement(Icon, { size: 48, icon: buttonStyle === "warning"
                             ? HeroButtonIcons["warning"]
@@ -114,7 +114,7 @@ var HeroButton = forwardRef(function (_a, ref) {
                         ? HeroButtonIcons["warning"]
                         : HeroButtonIcons[icon] }))),
             isLoading && (React__default.createElement("span", { className: "arc-HeroButton-icon" },
-                React__default.createElement(Icon, { size: 48, icon: ArcIconEclipse }))))));
+                React__default.createElement(Spinner, { size: "xxl" }))))));
 });
 
 export { HeroButton as H };

package/dist/_shared/esm/{Icon-428e8061.js → Icon-a5cb17de.js}

@@ -1,7 +1,7 @@
 import { _ as __rest, a as __assign, s as suffixModifier, f as filterDataAttrs } from './index.es-5496ec12.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { useContext } from 'react';
-import { C as Context } from './Surface-c425e5e6.js';
+import { C as Context } from './Surface-0af6a69a.js';
 
 /**
  * Use `Icon` to display brand iconography.
@@ -10,11 +10,23 @@ var Icon = function (_a) {
     var _b;
     var testId = _a.testId, icon = _a.icon, _c = _a.color, color = _c === void 0 ? "auto" : _c, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isPresentationIcon, isPresentationIcon = _e === void 0 ? false : _e, label = _a.label, size = _a.size, props = __rest(_a, ["testId", "icon", "color", "isInline", "isPresentationIcon", "label", "size"]);
     var surface = useContext(Context).surface;
-    var Icon = icon || (function () { return React__default.createElement(React__default.Fragment, null); });
     var presentationIconProps = {
         role: "presentation",
         "aria-hidden": true
     };
+    var renderIcon = function () {
+        if (!icon)
+            return null;
+        var accessibleProps = isPresentationIcon ? presentationIconProps : {};
+        if (typeof icon === "function") {
+            var IconComponent = icon || (function () { return React__default.createElement(React__default.Fragment, null); });
+            return React__default.createElement(IconComponent, __assign({}, accessibleProps));
+        }
+        if (React__default.isValidElement(icon) && icon.type === "svg") {
+            return React__default.cloneElement(icon, accessibleProps);
+        }
+        return null;
+    };
     return (React__default.createElement("span", __assign({ "data-testid": testId, "aria-label": label, className: classNames((_b = {},
             _b["arc-Icon"] = true,
             _b[suffixModifier("arc-Icon--color", color)] = color !== "auto",
@@ -23,8 +35,7 @@ var Icon = function (_a) {
             _b)), role: label ? "img" : undefined, style: {
             height: size,
             width: size
-        } }, filterDataAttrs(props)),
-        React__default.createElement(Icon, __assign({}, (isPresentationIcon ? presentationIconProps : {})))));
+        } }, filterDataAttrs(props)), renderIcon()));
 };
 
 export { Icon as I };

package/dist/_shared/esm/{MediaCard-d83b5561.js → MediaCard-fdc76670.js}

@@ -1,15 +1,15 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
 import React__default, { useContext, useState, useEffect, Suspense } from 'react';
 import { c as classNames } from './index-2e73c2e9.js';
-import { a as SemSizeBreakpointsS } from './index.es-974af4a2.js';
+import { a as SemSizeBreakpointsS } from './index.es-932db59a.js';
 import { u as useMediaQuery } from './use-media-query-d3622da8.js';
 import { I as Image } from './Image-c1dc10b5.js';
-import { H as Heading } from './Heading-0dfbdb24.js';
-import { C as Context, S as Surface } from './Surface-c425e5e6.js';
-import { T as Text } from './Text-96d8a35f.js';
+import { H as Heading } from './Heading-0a8d3545.js';
+import { C as Context, S as Surface } from './Surface-0af6a69a.js';
+import { T as Text } from './Text-df93be85.js';
 import { V as VerticalSpace } from './VerticalSpace-6a3533db.js';
-import { C as CardHeading } from './CardHeading-4223432d.js';
-import { C as CardFooter } from './CardFooter-e4380cda.js';
+import { C as CardHeading } from './CardHeading-c65f9fb2.js';
+import { C as CardFooter } from './CardFooter-bf886438.js';
 import { C as ConditionalWrapper } from './ConditionalWrapper-b85979de.js';
 
 var VideoPlayer = React__default.lazy(function () {

package/dist/_shared/esm/{Poster-ac72059a.js → Poster-dc3d7ee8.js}

@@ -1,7 +1,7 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs, s as suffixModifier } from './index.es-5496ec12.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default from 'react';
-import { S as Surface } from './Surface-c425e5e6.js';
+import { S as Surface } from './Surface-0af6a69a.js';
 import { I as Image } from './Image-c1dc10b5.js';
 
 var PosterImage = function (_a) {