@arc-ui/components 12.0.0-beta.23 → 12.0.0-beta.24

package/lib/_shared/cjs/{VerticalSpace-BJvST6WP.cjs → VerticalSpace-DLQUYsvc.cjs}

@@ -1,16 +1,17 @@
 'use strict';
 
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
 
 /**
  * Use `VerticalSpace` to create vertical space between components.
  */
 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, sizeS = _a.sizeS, sizeM = _a.sizeM, sizeL = _a.sizeL, sizeXL = _a.sizeXL, props = filterAttrs.__rest(_a, ["isDebugVisible", "size", "sizeS", "sizeM", "sizeL", "sizeXL"]);
-    return (React.createElement("div", filterAttrs.__assign({ className: index.classNames((_b = {
+    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, sizeXXL = _a.sizeXXL, props = tslib_es6.__rest(_a, ["isDebugVisible", "size", "sizeS", "sizeM", "sizeL", "sizeXL", "sizeXXL"]);
+    return (React.createElement("div", tslib_es6.__assign({ className: index.classNames((_b = {
                 "arc-VerticalSpace": true
             },
             _b["arc-VerticalSpace--size".concat(size)] = size,
@@ -18,6 +19,7 @@ var VerticalSpace = function (_a) {
             _b["arc-VerticalSpace--sizeM".concat(sizeM)] = sizeM,
             _b["arc-VerticalSpace--sizeL".concat(sizeL)] = sizeL,
             _b["arc-VerticalSpace--sizeXL".concat(sizeXL)] = sizeXL,
+            _b["arc-VerticalSpace--sizeXXL".concat(sizeXXL)] = sizeXXL,
             _b["arc-VerticalSpace--debugVisible"] = isDebugVisible,
             _b)) }, filterAttrs.filterAttrs(props))));
 };

package/lib/_shared/cjs/{Visible-vchtZSfm.cjs → Visible-DZWtZ5qG.cjs}

@@ -1,12 +1,13 @@
 'use strict';
 
-var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
 var React = require('react');
 var index = require('./index-CTlXMLug.cjs');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
 
 var Visible = function (_a) {
-    var children = _a.children, xs = _a.xs, s = _a.s, m = _a.m, l = _a.l, xl = _a.xl, xxl = _a.xxl, props = filterAttrs.__rest(_a, ["children", "xs", "s", "m", "l", "xl", "xxl"]);
-    return (React.createElement("div", filterAttrs.__assign({ className: index.classNames("arc-Visible", {
+    var children = _a.children, xs = _a.xs, s = _a.s, m = _a.m, l = _a.l, xl = _a.xl, xxl = _a.xxl, props = tslib_es6.__rest(_a, ["children", "xs", "s", "m", "l", "xl", "xxl"]);
+    return (React.createElement("div", tslib_es6.__assign({ className: index.classNames("arc-Visible", {
             "arc-Visible--xs": xs,
             "arc-Visible--s": s,
             "arc-Visible--m": m,

package/lib/_shared/cjs/VisuallyHidden-CQg3cOVK.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.cjs');
+var React = require('react');
+var filterAttrs = require('./filter-attrs-D19P2s1V.cjs');
+
+/**
+ * Use `VisuallyHidden` to provide text for screen readers that is visually hidden on screen.
+ */
+var VisuallyHidden = function (_a) {
+    var children = _a.children, props = tslib_es6.__rest(_a, ["children"]);
+    return (React.createElement("span", tslib_es6.__assign({ "data-testid": "visually-hidden", className: "arc-VisuallyHidden" }, filterAttrs.filterAttrs(props)), children));
+};
+
+exports.VisuallyHidden = VisuallyHidden;

package/lib/_shared/cjs/{arc-breakpoints-CS8JVk5T.cjs → arc-breakpoints-BDA1EnFK.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index_es = require('./index.es-fkulh7qu.cjs');
+var index_es = require('./index.es-VcVPUNjD.cjs');
 
 /**
  * Provides an object of breakpoints for responsive designs.
@@ -19,5 +19,15 @@ var ArcBreakpoints = {
     s: parseInt(index_es.ArcSizeBreakpointsS, 10),
     xs: parseInt(index_es.ArcSizeBreakpointsXs, 10),
 };
+var ARC_MIN_S_BREAKPOINT = "(min-width: ".concat(index_es.ArcSizeBreakpointsS, ")");
+var ARC_MIN_M_BREAKPOINT = "(min-width: ".concat(index_es.ArcSizeBreakpointsM, ")");
+var ARC_MIN_L_BREAKPOINT = "(min-width: ".concat(index_es.ArcSizeBreakpointsL, ")");
+var ARC_MIN_XL_BREAKPOINT = "(min-width: ".concat(index_es.ArcSizeBreakpointsXl, ")");
+var ARC_MIN_XXL_BREAKPOINT = "(min-width: ".concat(index_es.ArcSizeBreakpointsXxl, ")");
 
+exports.ARC_MIN_L_BREAKPOINT = ARC_MIN_L_BREAKPOINT;
+exports.ARC_MIN_M_BREAKPOINT = ARC_MIN_M_BREAKPOINT;
+exports.ARC_MIN_S_BREAKPOINT = ARC_MIN_S_BREAKPOINT;
+exports.ARC_MIN_XL_BREAKPOINT = ARC_MIN_XL_BREAKPOINT;
+exports.ARC_MIN_XXL_BREAKPOINT = ARC_MIN_XXL_BREAKPOINT;
 exports.ArcBreakpoints = ArcBreakpoints;

package/lib/_shared/cjs/filter-attrs-D19P2s1V.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+// src/filter-attrs/filter-attrs.ts
+var attributePrefixes = ["data-", "aria-"];
+var filterAttrs = (props) => {
+  const filteredProps = {};
+  for (const prop in props) {
+    if (Object.prototype.hasOwnProperty.call(props, prop) && attributePrefixes.some((prefix) => prop.startsWith(prefix))) {
+      filteredProps[prop] = props[prop];
+    }
+  }
+  return filteredProps;
+};
+
+exports.filterAttrs = filterAttrs;

package/lib/_shared/cjs/{index-Dv1xvB_E.cjs → index-BGGFOAAx.cjs}

@@ -2,7 +2,7 @@
 'use strict';
 
 var React = require('react');
-var Combination = require('./Combination-B-rSVLfT.cjs');
+var Combination = require('./Combination-6m6aOXZq.cjs');
 var index = require('./index-DXNM3D1d.cjs');
 
 function _interopNamespaceDefault(e) {

package/lib/_shared/cjs/{index-CaO6cOF0.cjs → index-BWfgSvRQ.cjs}

@@ -2,10 +2,10 @@
 'use strict';
 
 var React = require('react');
-var Combination = require('./Combination-B-rSVLfT.cjs');
+var Combination = require('./Combination-6m6aOXZq.cjs');
 var index = require('./index-DXNM3D1d.cjs');
-var index$1 = require('./index-Bt7hfZBc.cjs');
-var index$2 = require('./index-Dv1xvB_E.cjs');
+var index$1 = require('./index-KrMgv4q_.cjs');
+var index$2 = require('./index-BGGFOAAx.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespaceDefault(e) {

package/lib/_shared/cjs/{index-C_Rl7v2g.cjs → index-CDVpHNP8.cjs}

@@ -3,10 +3,10 @@
 
 var React = require('react');
 var ReactDOM = require('react-dom');
-var Combination = require('./Combination-B-rSVLfT.cjs');
-var index = require('./index-EFXw1jWg.cjs');
+var Combination = require('./Combination-6m6aOXZq.cjs');
+var index = require('./index-CklPiHsS.cjs');
 var index$1 = require('./index-DXNM3D1d.cjs');
-var index$2 = require('./index-Bt7hfZBc.cjs');
+var index$2 = require('./index-KrMgv4q_.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespaceDefault(e) {

package/lib/_shared/cjs/{index-EFXw1jWg.cjs → index-CklPiHsS.cjs}

@@ -3,7 +3,7 @@
 
 var React = require('react');
 var index = require('./index-DXNM3D1d.cjs');
-var Combination = require('./Combination-B-rSVLfT.cjs');
+var Combination = require('./Combination-6m6aOXZq.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespaceDefault(e) {

package/lib/_shared/cjs/{index-DAr_oO4-.cjs → index-D9onmVh5.cjs}

@@ -2,9 +2,9 @@
 'use strict';
 
 var React = require('react');
-var Combination = require('./Combination-B-rSVLfT.cjs');
+var Combination = require('./Combination-6m6aOXZq.cjs');
 var index = require('./index-DXNM3D1d.cjs');
-var index$1 = require('./index-Dv1xvB_E.cjs');
+var index$1 = require('./index-BGGFOAAx.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespaceDefault(e) {

package/lib/_shared/cjs/{index-Bt7hfZBc.cjs → index-KrMgv4q_.cjs}

@@ -3,7 +3,7 @@
 
 var React = require('react');
 var index$1 = require('./index-B11wQrRa.cjs');
-var Combination = require('./Combination-B-rSVLfT.cjs');
+var Combination = require('./Combination-6m6aOXZq.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var index = require('./index-DXNM3D1d.cjs');
 

package/lib/_shared/cjs/{index.es-fkulh7qu.cjs → index.es-VcVPUNjD.cjs}

@@ -2,7 +2,7 @@
 
 /**
  * Do not edit directly
- * Generated on Tue, 02 Sep 2025 09:31:53 GMT
+ * Generated on Fri, 24 Oct 2025 10:49:57 GMT
  */
 var ArcSizeBreakpointsXs = "320px";
 var ArcSizeBreakpointsS = "636px";

package/lib/_shared/cjs/{filter-attrs-eK6E_34o.cjs → tslib.es6-CCZ3TN_7.cjs}

@@ -55,18 +55,5 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-// src/filter-attrs/filter-attrs.ts
-var attributePrefixes = ["data-", "aria-"];
-var filterAttrs = (props) => {
-  const filteredProps = {};
-  for (const prop in props) {
-    if (Object.prototype.hasOwnProperty.call(props, prop) && attributePrefixes.some((prefix) => prop.startsWith(prefix))) {
-      filteredProps[prop] = props[prop];
-    }
-  }
-  return filteredProps;
-};
-
 exports.__rest = __rest;
 exports.__spreadArray = __spreadArray;
-exports.filterAttrs = filterAttrs;

package/lib/_shared/cjs/use-media-query-DqZqShGX.cjs

@@ -0,0 +1,58 @@
+'use strict';
+
+var React = require('react');
+
+var IS_SERVER = typeof window === "undefined";
+/**
+ * @typedef MediaQueryOutputs
+ * @param {boolean} matches - does the document match the media query?
+ */
+/**
+ * Handle with care!
+ *
+ * If you need to change something in the browser based on @media query, you
+ * probably don’t need this hook. Use CSS media queries instead.
+ *
+ * Sometimes UI requirements are not achievable with CSS media queries alone. In
+ * these rare cases, use this hook to make media query matches available
+ * to React JavaScript code.
+ *
+ * @param {string} mediaQuery - the media query to parse
+ * @returns {MediaQueryOutputs}
+ */
+var useMediaQuery = function (mediaQuery) {
+    var getMatches = function (query) {
+        if (IS_SERVER) {
+            return false;
+        }
+        return window.matchMedia(query).matches;
+    };
+    var _a = React.useState(false), matches = _a[0], setMatches = _a[1];
+    // Handles the change event of the media query.
+    var handleChange = function () {
+        setMatches(getMatches(mediaQuery));
+    };
+    React.useEffect(function () {
+        var matchMedia = window.matchMedia(mediaQuery);
+        // Triggered at the first client-side load and if query changes
+        handleChange();
+        // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
+        if (matchMedia.addListener) {
+            matchMedia.addListener(handleChange);
+        }
+        else {
+            matchMedia.addEventListener("change", handleChange);
+        }
+        return function () {
+            if (matchMedia.removeListener) {
+                matchMedia.removeListener(handleChange);
+            }
+            else {
+                matchMedia.removeEventListener("change", handleChange);
+            }
+        };
+    }, [mediaQuery]);
+    return matches;
+};
+
+exports.useMediaQuery = useMediaQuery;

package/lib/_shared/esm/{Avatar-Fb1E5MA9.mjs → Avatar-Cyqjgj85.mjs}

@@ -1,11 +1,12 @@
-import { a as __assign, _ as __rest, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import { a as __assign, _ as __rest } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
 import { C as ConditionalWrapper } from './ConditionalWrapper-WoJxFYwS.mjs';
-import { V as VisuallyHidden } from './VisuallyHidden-DqAgoqJo.mjs';
-import { T as ThemeIcon } from './ThemeIcon-CN_Ed5b1.mjs';
-import { I as Image } from './Image-Dl8oH1Rn.mjs';
-import { H as Heading } from './Heading-CxHWefi7.mjs';
+import { V as VisuallyHidden } from './VisuallyHidden-aSQ4RA1o.mjs';
+import { T as ThemeIcon } from './ThemeIcon-B0SruPZC.mjs';
+import { I as Image } from './Image-LemsonUX.mjs';
+import { H as Heading } from './Heading-B9cbwfoz.mjs';
 
 var AvatarContent = function (_a) {
     var img = _a.img, initials = _a.initials, _b = _a.size, size = _b === void 0 ? "xl" : _b;

package/lib/_shared/esm/{Badge-BZ7E0zcQ.mjs → Badge-C_3PBa0p.mjs}

@@ -1,7 +1,8 @@
-import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
 import { s as suffixModifier } from './suffix-modifier-B_pO0UkF.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
 
 /** Use `Badge` as a static, non-interactive way to provide short updates. */
 var Badge = function (_a) {

package/lib/_shared/esm/{BannerImage-BTsixvUH.mjs → BannerImage-CgjgaYkJ.mjs}

@@ -1,6 +1,6 @@
-import { _ as __rest, a as __assign } from './filter-attrs-B6CM-NUr.mjs';
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default from 'react';
-import { I as Image } from './Image-Dl8oH1Rn.mjs';
+import { I as Image } from './Image-LemsonUX.mjs';
 
 var BannerImage = function (_a) {
     var sources = _a.sources, ariaHidden = _a.ariaHidden, props = __rest(_a, ["sources", "ariaHidden"]);

package/lib/_shared/esm/{Box-BYm_GTct.mjs → Box-C8iK8x5c.mjs}

@@ -1,7 +1,8 @@
-import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { S as Surface } from './Surface-Colbp3Zx.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+import { S as Surface } from './Surface-C69KVzkY.mjs';
 
 /**
  * Use `Box` as a simple way to group bespoke content and interactive elements together.

package/lib/_shared/esm/{BrandLogo-_2Z_8I2Y.mjs → BrandLogo-Dc-d_8ZN.mjs}

@@ -1,8 +1,9 @@
-import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default, { useContext } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
 import { s as suffixModifier } from './suffix-modifier-B_pO0UkF.mjs';
-import { C as Context } from './Surface-Colbp3Zx.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+import { C as Context } from './Surface-C69KVzkY.mjs';
 
 /**
  * Use `BrandLogo` to display the brand logo.

package/lib/_shared/esm/{Button-BxuM3_gz.mjs → Button-BpQQut8P.mjs}

@@ -1,10 +1,11 @@
-import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default, { forwardRef, useContext } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
 import { s as suffixModifier } from './suffix-modifier-B_pO0UkF.mjs';
-import { I as Icon } from './Icon-CcPOJcQm.mjs';
-import { C as Context } from './Surface-Colbp3Zx.mjs';
-import { T as ThemeIcon } from './ThemeIcon-CN_Ed5b1.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+import { I as Icon } from './Icon-CCUbr_AO.mjs';
+import { C as Context } from './Surface-C69KVzkY.mjs';
+import { T as ThemeIcon } from './ThemeIcon-B0SruPZC.mjs';
 
 /**
  * Use `Button` to let a user complete an action like ‘Log in’ or ‘Register’.

package/lib/_shared/esm/{ButtonV2-DwYBAojW.mjs → ButtonV2-C4a_kkhh.mjs}

@@ -1,12 +1,13 @@
-import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default, { forwardRef, useContext } from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { I as Icon } from './Icon-CcPOJcQm.mjs';
-import { C as Context } from './Surface-Colbp3Zx.mjs';
-import { S as Spinner } from './Spinner-Cd7LiPTy.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+import { I as Icon } from './Icon-CCUbr_AO.mjs';
+import { C as Context } from './Surface-C69KVzkY.mjs';
+import { S as Spinner } from './Spinner-DvngCIwx.mjs';
 
 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, ariaControls = _a.ariaControls, ariaExpanded = _a.ariaExpanded, ariaHasPopup = _a.ariaHasPopup, _e = _a.isFullWidth, isFullWidth = _e === void 0 ? false : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, isSpan = _a.isSpan, 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", "ariaControls", "ariaExpanded", "ariaHasPopup", "isFullWidth", "isLoading", "isSpan", "onClick", "href", "id", "rel", "target", "type", "form"]);
+    var label = _a.label, _b = _a.buttonStyle, buttonStyle = _b === void 0 ? "primary" : _b, icon = _a.icon, iconActive = _a.iconActive, _c = _a.iconPosition, iconPosition = _c === void 0 ? "beforeText" : _c, _d = _a.size, size = _d === void 0 ? "m" : _d, ariaLabel = _a.ariaLabel, ariaControls = _a.ariaControls, ariaExpanded = _a.ariaExpanded, ariaHasPopup = _a.ariaHasPopup, _e = _a.isFullWidth, isFullWidth = _e === void 0 ? false : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, isSpan = _a.isSpan, 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", "iconActive", "iconPosition", "size", "ariaLabel", "ariaControls", "ariaExpanded", "ariaHasPopup", "isFullWidth", "isLoading", "isSpan", "onClick", "href", "id", "rel", "target", "type", "form"]);
     var surface = useContext(Context).surface;
     var ButtonElement = isSpan ? "span" : "button";
     var iconSizes = {
@@ -33,21 +34,23 @@ var ButtonV2 = forwardRef(function (_a, ref) {
                 return "auto";
         }
     };
-    var buttonContent = (React__default.createElement("span", { className: classNames("arc-ButtonV2-inner", {
+    var renderButtonContent = function () { return (React__default.createElement("span", { className: classNames("arc-ButtonV2-inner", {
             "arc-ButtonV2-inner--iconBeforeText": iconPosition === "beforeText",
         }) },
         label && React__default.createElement("span", { className: "arc-ButtonV2-label" }, label),
         isLoading && (React__default.createElement("span", { className: "arc-ButtonV2-icon" },
             React__default.createElement(Spinner, { size: size }))),
-        icon && !isLoading && (React__default.createElement("span", { className: "arc-ButtonV2-icon" },
-            React__default.createElement(Icon, { color: getIconColor(buttonStyle), size: iconSizes[size], icon: icon })))));
+        icon && !isLoading && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("span", { className: classNames("arc-ButtonV2-icon", {
+                    "arc-ButtonV2-icon--hasActive": iconActive,
+                }) },
+                React__default.createElement(Icon, { color: getIconColor(buttonStyle), size: iconSizes[size], icon: icon })),
+            iconActive && (React__default.createElement("span", { className: "arc-ButtonV2-icon--active" },
+                React__default.createElement(Icon, { color: getIconColor(buttonStyle), size: iconSizes[size], icon: iconActive }))))))); };
     if (href && !isLoading) {
-        return (React__default.createElement("a", __assign({}, commonProps, { className: ButtonV2Classes, href: href, rel: rel, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, target: target }), buttonContent));
+        return (React__default.createElement("a", __assign({}, commonProps, { className: ButtonV2Classes, href: href, rel: rel, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, target: target }), renderButtonContent()));
     }
-    return (React__default.createElement(ButtonElement, __assign({}, commonProps, { className: ButtonV2Classes, "aria-label": ariaLabel, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, disabled: isLoading, type: type, form: form }),
-        React__default.createElement("span", { className: classNames("arc-ButtonV2-inner", {
-                "arc-ButtonV2-inner--iconBeforeText": iconPosition === "beforeText",
-            }) }, buttonContent)));
+    return (React__default.createElement(ButtonElement, __assign({}, commonProps, { className: ButtonV2Classes, "aria-label": ariaLabel, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, disabled: isLoading, type: type, form: form }), renderButtonContent()));
 });
 
 export { ButtonV2 as B };

package/lib/_shared/esm/{Calendar-Drh_NJ9I.mjs → Calendar-CFdUlPXh.mjs}

@@ -1,16 +1,17 @@
-import { b as __spreadArray, a as __assign, _ as __rest, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import { b as __spreadArray, a as __assign, _ as __rest } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default, { createContext, forwardRef, useContext, useCallback, useRef, useState, useReducer, useEffect } from 'react';
 import { r as requiredArgs, t as toDate, b as toInteger, _ as _typeof, g as getDefaultOptions, f as format } from './index-Cr6KeQLU.mjs';
-import { c as ArcSizeBreakpointsM } from './index.es-CtRkzfKP.mjs';
-import { u as useMediaQuery } from './use-media-query-DmKuIDEM.mjs';
+import { c as ArcSizeBreakpointsM } from './index.es-tyrXzvpp.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+import { u as useMediaQuery } from './use-media-query-BmsMeo2M.mjs';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { T as Text } from './Text-CBlnm5CT.mjs';
-import { V as VisuallyHidden } from './VisuallyHidden-DqAgoqJo.mjs';
+import { T as Text } from './Text-BAzOkkzN.mjs';
+import { V as VisuallyHidden } from './VisuallyHidden-aSQ4RA1o.mjs';
 import './index-Spae4j7j.mjs';
-import { S as Surface } from './Surface-Colbp3Zx.mjs';
-import { H as Heading } from './Heading-CxHWefi7.mjs';
-import { B as BtIconChevronRightMid } from './BtIconChevronRightMid-DE4lmVaG.mjs';
-import { I as Icon } from './Icon-CcPOJcQm.mjs';
+import { S as Surface } from './Surface-C69KVzkY.mjs';
+import { H as Heading } from './Heading-B9cbwfoz.mjs';
+import { T as ThemeIcon } from './ThemeIcon-B0SruPZC.mjs';
+import { I as Icon } from './Icon-CCUbr_AO.mjs';
 
 /**
  * @name addMonths
@@ -1326,25 +1327,18 @@ var CalendarDayGrid = function (_a) {
             React__default.createElement("tbody", { onKeyDown: handleKeyDown }, getWeeksInMonth(month).map(function (week, i) { return (React__default.createElement("tr", { key: "".concat(month.getTime(), "-week-").concat(i) }, week.map(function (day) { return (React__default.createElement(CalendarDayNumber, { ref: autoFocusRef, shouldRender: isSameMonth(month, day), key: day.getTime(), date: day, isFocusWithinDayGrid: isFocusWithinDayGrid })); }))); }))))); })));
 };
 
-/**
- * Do not edit directly
- * Generated file
- */
-
-const BtIconChevronLeftMid =
-  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='currentColor' fill-rule='evenodd' d='m7.621 8 2.849 2.852a.673.673 0 0 1-.732 1.097.7.7 0 0 1-.218-.145L6.196 8.476a.673.673 0 0 1 0-.951L9.52 4.197a.67.67 0 0 1 1.146.476c0 .178-.07.349-.196.475z' clip-rule='evenodd'/%3e%3c/svg%3e";
-
 var CalendarNavButton = function (_a) {
     var isDisabled = _a.isDisabled, onClick = _a.onClick, direction = _a.direction, ariaLabel = _a.ariaLabel;
     var icons = {
-        previous: BtIconChevronLeftMid,
-        next: BtIconChevronRightMid,
+        previous: "calendarLeft",
+        next: "calendarRight",
     };
     return (React__default.createElement("button", { "aria-label": ariaLabel, disabled: isDisabled, onClick: onClick, type: "button", className: classNames("arc-CalendarNavButton", {
             "arc-CalendarNavButton--previous": direction === "previous",
             "arc-CalendarNavButton--next": direction === "next",
         }) },
-        React__default.createElement(Icon, { size: 32, icon: icons[direction] })));
+        React__default.createElement("div", { className: "arc-CalendarNavButton-icon" },
+            React__default.createElement(ThemeIcon, { icon: icons[direction] }))));
 };
 
 var CalendarDoubleMonthView = function (_a) {

package/lib/_shared/esm/{CardFooter-fsAY4cc6.mjs → CardFooter-BpVSztgE.mjs}

@@ -1,24 +1,13 @@
 import React__default from 'react';
 import { c as classNames } from './index-5C0-U8cc.mjs';
-import { I as Icon } from './Icon-CcPOJcQm.mjs';
+import { T as ThemeIcon } from './ThemeIcon-B0SruPZC.mjs';
 import { i as isDate, f as format } from './index-Cr6KeQLU.mjs';
 
-var ArrowRight = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M18.146 11.646a.5.5 0 0 0 0 .707l3.147 3.147H9.5a.5.5 0 0 0 0 1h11.793l-3.146 3.146a.5.5 0 1 0 .707.707L23.207 16l-4.354-4.354a.5.5 0 0 0-.707 0'/%3e%3c/svg%3e";
-var ArrowRightFill = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='M2 16A14 14 0 1 0 16 2 14 14 0 0 0 2 16m16.854-4.354L23.207 16l-4.354 4.354a.5.5 0 0 1-.707-.707l3.147-3.147H9.5a.5.5 0 0 1 0-1h11.793l-3.146-3.146a.5.5 0 0 1 .707-.707'/%3e%3c/svg%3e";
-var Play = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='m20.839 15.04-7.178-4.144a1.107 1.107 0 0 0-1.661.958v8.288a1.105 1.105 0 0 0 1.661.96l7.178-4.145a1.107 1.107 0 0 0 0-1.917m-.5 1.051-7.178 4.145a.1.1 0 0 1-.107 0 .1.1 0 0 1-.054-.094v-8.288a.1.1 0 0 1 .054-.092.1.1 0 0 1 .107 0l7.178 4.143a.1.1 0 0 1 .054.094.1.1 0 0 1-.054.092'/%3e%3c/svg%3e";
-var PlayFill = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2m4.839 14.957-7.178 4.145a1.108 1.108 0 0 1-1.661-.96v-8.288a1.107 1.107 0 0 1 1.661-.958l7.178 4.144a1.107 1.107 0 0 1 0 1.917'/%3e%3c/svg%3e";
-
 var CardFooter = function (_a) {
     var metaText = _a.metaText, _b = _a.buttonIcon, buttonIcon = _b === void 0 ? "arrow" : _b, _c = _a.buttonSize, buttonSize = _c === void 0 ? "m" : _c, _d = _a.isDarkPathway, isDarkPathway = _d === void 0 ? false : _d, _e = _a.showButton, showButton = _e === void 0 ? true : _e, _f = _a.isHovered, isHovered = _f === void 0 ? false : _f;
     var icons = {
-        arrow: {
-            regular: ArrowRight,
-            filled: ArrowRightFill,
-        },
-        play: {
-            regular: Play,
-            filled: PlayFill,
-        },
+        arrow: "cardRight",
+        play: "cardPlay",
     };
     return (React__default.createElement("div", { className: classNames("arc-CardFooter", {
             "arc-CardFooter--darkPathway": isDarkPathway,
@@ -32,9 +21,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 })),
+                        React__default.createElement(ThemeIcon, { icon: icons[buttonIcon] })),
                     React__default.createElement("div", { className: "arc-CardFooter-buttonIconLeft" },
-                        React__default.createElement(Icon, { icon: icons[buttonIcon].regular }))))))));
+                        React__default.createElement(ThemeIcon, { icon: icons[buttonIcon] }))))))));
 };
 
 export { CardFooter as C };

package/lib/_shared/esm/{CardHeading-_setRRjq.mjs → CardHeading-q6k7obu0.mjs}

@@ -1,10 +1,11 @@
-import { a as __assign, f as filterAttrs } from './filter-attrs-B6CM-NUr.mjs';
+import { a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
 import React__default from 'react';
-import { H as Heading } from './Heading-CxHWefi7.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+import { H as Heading } from './Heading-B9cbwfoz.mjs';
 
 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;
-    return (React__default.createElement(Heading, { level: headingLevel, size: size }, href ? (React__default.createElement("a", __assign({ className: "arc-CardHeading-link", href: href, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, filterAttrs(linkData)), heading)) : (heading)));
+    return (React__default.createElement(Heading, { level: headingLevel, size: size, isWordWrap: false }, href ? (React__default.createElement("a", __assign({ className: "arc-CardHeading-link", href: href, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, filterAttrs(linkData)), heading)) : (heading)));
 };
 
 export { CardHeading as C };

package/lib/_shared/esm/CheckboxIcon-Bzto2Tke.mjs

@@ -0,0 +1,50 @@
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
+import React__default, { useContext, useRef, useEffect } from 'react';
+import { c as classNames } from './index-5C0-U8cc.mjs';
+import { T as ThemeIcon } from './ThemeIcon-B0SruPZC.mjs';
+import { C as Context$1 } from './Surface-C69KVzkY.mjs';
+import { C as Context } from './FormControl-Pc1aHUNM.mjs';
+
+var CheckboxIcon = function (_a) {
+    var id = _a.id, name = _a.name, checked = _a.checked, _b = _a.indeterminate, indeterminate = _b === void 0 ? false : _b, isDisabled = _a.isDisabled, isRequired = _a.isRequired, _c = _a.size, size = _c === void 0 ? "m" : _c, value = _a.value, error = _a.error, ariaDescribedBy = _a.ariaDescribedBy, onBlur = _a.onBlur, onChange = _a.onChange, props = __rest(_a, ["id", "name", "checked", "indeterminate", "isDisabled", "isRequired", "size", "value", "error", "ariaDescribedBy", "onBlur", "onChange"]);
+    var requirementStatus = useContext(Context).requirementStatus;
+    var internalRef = useRef(null);
+    var surface = useContext(Context$1).surface;
+    useEffect(function () {
+        if (internalRef.current) {
+            internalRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate, checked]);
+    var tickSize = {
+        s: 14,
+        m: 18,
+    };
+    var isControlled = typeof checked !== "undefined" && typeof onChange === "function";
+    var checkedProps = isControlled
+        ? { checked: checked }
+        : checked
+            ? { defaultChecked: true }
+            : {};
+    if (!checked && onChange) {
+        indeterminate = false;
+    }
+    if (requirementStatus === "required") {
+        isRequired = true;
+    }
+    return (React__default.createElement("label", { htmlFor: id, className: classNames({
+            "arc-CheckboxIcon": true,
+            "arc-CheckboxIcon--disabled": isDisabled,
+            "arc-CheckboxIcon--invalid": error,
+            "arc-CheckboxIcon--small": size === "s",
+            "arc-CheckboxIcon--onDarkSurface": surface === "dark",
+        }) },
+        React__default.createElement("input", __assign({ "aria-describedby": ariaDescribedBy ? ariaDescribedBy : error ? "id-error" : undefined, "aria-invalid": error, "aria-checked": checked && !indeterminate
+                ? true
+                : indeterminate && checked
+                    ? "mixed"
+                    : false, className: classNames("arc-CheckboxIcon-input"), disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: internalRef, required: isRequired, type: "checkbox", value: value }, checkedProps, props)),
+        React__default.createElement("span", { className: classNames("arc-CheckboxIcon-box") }, indeterminate ? (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "none" },
+            React__default.createElement("rect", { x: "4", y: "8", width: "7.51", height: "1", rx: "0.5", fill: "currentColor" }))) : (React__default.createElement(ThemeIcon, { icon: "checkboxChecked", size: tickSize[size] })))));
+};
+
+export { CheckboxIcon as C };

package/lib/_shared/esm/ClientSideVisible-D_iBE-3U.mjs

@@ -0,0 +1,14 @@
+import React__default, { useState, useEffect } from 'react';
+
+var ClientSideVisible = function (_a) {
+    var children = _a.children;
+    var _b = useState(false), canRender = _b[0], setCanRender = _b[1];
+    useEffect(function () {
+        if (typeof window !== "undefined") {
+            setCanRender(true);
+        }
+    }, [setCanRender]);
+    return (React__default.createElement("div", { style: { visibility: canRender ? "visible" : "hidden" } }, children));
+};
+
+export { ClientSideVisible as C };

package/lib/_shared/esm/{Combination-BpO6XTeS.mjs → Combination-BQ4XBtF-.mjs}

@@ -5,7 +5,7 @@ import { g as useEscapeKeydown, f as useCallbackRef$1, b as useLayoutEffect2 } f
 import { jsx, Fragment } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
-import { a as __assign, _ as __rest, b as __spreadArray } from './filter-attrs-B6CM-NUr.mjs';
+import { a as __assign, _ as __rest, b as __spreadArray } from './tslib.es6-w7hdJ3oZ.mjs';
 
 // packages/core/primitive/src/primitive.tsx
 function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {