@arc-ui/components 12.0.0-alpha.0 → 12.0.0-beta.3

package/dist/_shared/cjs/index-996dec94.js

@@ -0,0 +1,131 @@
+'use strict';
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+var index = require('./index-3dd54df1.js');
+
+function $fe963b355347cc68$export$3e6543de14f8614f(initialState, machine) {
+    return React.useReducer((state, event)=>{
+        const nextState = machine[state][event];
+        return nextState !== null && nextState !== void 0 ? nextState : state;
+    }, initialState);
+}
+
+
+const $921a889cee6df7e8$export$99c2b779aa4e8b8b = (props)=>{
+    const { present: present , children: children  } = props;
+    const presence = $921a889cee6df7e8$var$usePresence(present);
+    const child = typeof children === 'function' ? children({
+        present: presence.isPresent
+    }) : React.Children.only(children);
+    const ref = index.$6ed0406888f73fc4$export$c7b2cbe3552a0d05(presence.ref, child.ref);
+    const forceMount = typeof children === 'function';
+    return forceMount || presence.isPresent ? /*#__PURE__*/ React.cloneElement(child, {
+        ref: ref
+    }) : null;
+};
+$921a889cee6df7e8$export$99c2b779aa4e8b8b.displayName = 'Presence';
+/* -------------------------------------------------------------------------------------------------
+ * usePresence
+ * -----------------------------------------------------------------------------------------------*/ function $921a889cee6df7e8$var$usePresence(present) {
+    const [node1, setNode] = React.useState();
+    const stylesRef = React.useRef({});
+    const prevPresentRef = React.useRef(present);
+    const prevAnimationNameRef = React.useRef('none');
+    const initialState = present ? 'mounted' : 'unmounted';
+    const [state, send] = $fe963b355347cc68$export$3e6543de14f8614f(initialState, {
+        mounted: {
+            UNMOUNT: 'unmounted',
+            ANIMATION_OUT: 'unmountSuspended'
+        },
+        unmountSuspended: {
+            MOUNT: 'mounted',
+            ANIMATION_END: 'unmounted'
+        },
+        unmounted: {
+            MOUNT: 'mounted'
+        }
+    });
+    React.useEffect(()=>{
+        const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(stylesRef.current);
+        prevAnimationNameRef.current = state === 'mounted' ? currentAnimationName : 'none';
+    }, [
+        state
+    ]);
+    index.$9f79659886946c16$export$e5c5a5f917a5871c(()=>{
+        const styles = stylesRef.current;
+        const wasPresent = prevPresentRef.current;
+        const hasPresentChanged = wasPresent !== present;
+        if (hasPresentChanged) {
+            const prevAnimationName = prevAnimationNameRef.current;
+            const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(styles);
+            if (present) send('MOUNT');
+            else if (currentAnimationName === 'none' || (styles === null || styles === void 0 ? void 0 : styles.display) === 'none') // If there is no exit animation or the element is hidden, animations won't run
+            // so we unmount instantly
+            send('UNMOUNT');
+            else {
+                /**
+         * When `present` changes to `false`, we check changes to animation-name to
+         * determine whether an animation has started. We chose this approach (reading
+         * computed styles) because there is no `animationrun` event and `animationstart`
+         * fires after `animation-delay` has expired which would be too late.
+         */ const isAnimating = prevAnimationName !== currentAnimationName;
+                if (wasPresent && isAnimating) send('ANIMATION_OUT');
+                else send('UNMOUNT');
+            }
+            prevPresentRef.current = present;
+        }
+    }, [
+        present,
+        send
+    ]);
+    index.$9f79659886946c16$export$e5c5a5f917a5871c(()=>{
+        if (node1) {
+            /**
+       * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`
+       * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we
+       * make sure we only trigger ANIMATION_END for the currently active animation.
+       */ const handleAnimationEnd = (event)=>{
+                const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(stylesRef.current);
+                const isCurrentAnimation = currentAnimationName.includes(event.animationName);
+                if (event.target === node1 && isCurrentAnimation) // With React 18 concurrency this update is applied
+                // a frame after the animation ends, creating a flash of visible content.
+                // By manually flushing we ensure they sync within a frame, removing the flash.
+                ReactDOM.flushSync(()=>send('ANIMATION_END')
+                );
+            };
+            const handleAnimationStart = (event)=>{
+                if (event.target === node1) // if animation occurred, store its name as the previous animation.
+                prevAnimationNameRef.current = $921a889cee6df7e8$var$getAnimationName(stylesRef.current);
+            };
+            node1.addEventListener('animationstart', handleAnimationStart);
+            node1.addEventListener('animationcancel', handleAnimationEnd);
+            node1.addEventListener('animationend', handleAnimationEnd);
+            return ()=>{
+                node1.removeEventListener('animationstart', handleAnimationStart);
+                node1.removeEventListener('animationcancel', handleAnimationEnd);
+                node1.removeEventListener('animationend', handleAnimationEnd);
+            };
+        } else // Transition to the unmounted state if the node is removed prematurely.
+        // We avoid doing so during cleanup as the node may change but still exist.
+        send('ANIMATION_END');
+    }, [
+        node1,
+        send
+    ]);
+    return {
+        isPresent: [
+            'mounted',
+            'unmountSuspended'
+        ].includes(state),
+        ref: React.useCallback((node)=>{
+            if (node) stylesRef.current = getComputedStyle(node);
+            setNode(node);
+        }, [])
+    };
+}
+/* -----------------------------------------------------------------------------------------------*/ function $921a889cee6df7e8$var$getAnimationName(styles) {
+    return (styles === null || styles === void 0 ? void 0 : styles.animationName) || 'none';
+}
+
+exports.$921a889cee6df7e8$export$99c2b779aa4e8b8b = $921a889cee6df7e8$export$99c2b779aa4e8b8b;

package/dist/_shared/cjs/index-dcfdd5da.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var React = require('react');
+
+const $f631663db3294ace$var$DirectionContext = /*#__PURE__*/ React.createContext(undefined);
+/* -----------------------------------------------------------------------------------------------*/ function $f631663db3294ace$export$b39126d51d94e6f3(localDir) {
+    const globalDir = React.useContext($f631663db3294ace$var$DirectionContext);
+    return localDir || globalDir || 'ltr';
+}
+
+exports.$f631663db3294ace$export$b39126d51d94e6f3 = $f631663db3294ace$export$b39126d51d94e6f3;

package/dist/_shared/cjs/{filter-data-attrs-1c9a530c.js → index-df60851b.js}

@@ -38,44 +38,6 @@ function __rest(s, e) {
   return t;
 }
 
-function __awaiter(thisArg, _arguments, P, generator) {
-  function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-  return new (P || (P = Promise))(function (resolve, reject) {
-      function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-      function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-      function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-      step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-}
-
-function __generator(thisArg, body) {
-  var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-  return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-  function verb(n) { return function (v) { return step([n, v]); }; }
-  function step(op) {
-      if (f) throw new TypeError("Generator is already executing.");
-      while (g && (g = 0, op[0] && (_ = 0)), _) try {
-          if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-          if (y = 0, t) op = [op[0] & 2, t.value];
-          switch (op[0]) {
-              case 0: case 1: t = op; break;
-              case 4: _.label++; return { value: op[1], done: false };
-              case 5: _.label++; y = op[1]; op = [0]; continue;
-              case 7: op = _.ops.pop(); _.trys.pop(); continue;
-              default:
-                  if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                  if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                  if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                  if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                  if (t[2]) _.ops.pop();
-                  _.trys.pop(); continue;
-          }
-          op = body.call(thisArg, _);
-      } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-      if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-  }
-}
-
 function __spreadArray(to, from, pack) {
   if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
       if (ar || !(i in from)) {
@@ -91,7 +53,19 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var camelcase = {exports: {}};
+var dataAttrRe = /^(data-.*)$/;
+var filterDataAttrs = function (props) {
+    var filteredProps = {};
+    for (var prop in props) {
+        if (Object.prototype.hasOwnProperty.call(props, prop) &&
+            dataAttrRe.test(prop)) {
+            filteredProps[prop] = props[prop];
+        }
+    }
+    return filteredProps;
+};
+
+var camelcase$1 = {exports: {}};
 
 const UPPERCASE = /[\p{Lu}]/u;
 const LOWERCASE = /[\p{Ll}]/u;
@@ -201,27 +175,13 @@ const camelCase = (input, options) => {
 	return postProcess(input, toUpperCase);
 };
 
-camelcase.exports = camelCase;
+camelcase$1.exports = camelCase;
 // TODO: Remove this for the next major release
-camelcase.exports.default = camelCase;
+camelcase$1.exports.default = camelCase;
 
-var camelCase$1 = camelcase.exports;
-
-var dataAttrRe = /^(data-.*)$/;
-var filterDataAttrs = function (props) {
-    var filteredProps = {};
-    for (var prop in props) {
-        if (Object.prototype.hasOwnProperty.call(props, prop) &&
-            dataAttrRe.test(prop)) {
-            filteredProps[prop] = props[prop];
-        }
-    }
-    return filteredProps;
-};
+var camelcase = camelcase$1.exports;
 
-exports.__awaiter = __awaiter;
-exports.__generator = __generator;
 exports.__rest = __rest;
 exports.__spreadArray = __spreadArray;
-exports.camelCase = camelCase$1;
+exports.camelcase = camelcase;
 exports.filterDataAttrs = filterDataAttrs;

package/dist/_shared/cjs/index.es-8b018b0d.js

@@ -0,0 +1,13 @@
+'use strict';
+
+/**
+ * Do not edit directly
+ * Generated on Fri, 23 Aug 2024 15:46:35 GMT
+ */
+var SemSizeBreakpointsS = "576px"; // Small (SM) - 576px 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.
+
+exports.SemSizeBreakpointsL = SemSizeBreakpointsL;
+exports.SemSizeBreakpointsM = SemSizeBreakpointsM;
+exports.SemSizeBreakpointsS = SemSizeBreakpointsS;

package/dist/_shared/cjs/{suffix-modifier-64dcd338.js → suffix-modifier-c8a34402.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
+var index = require('./index-df60851b.js');
 
 /**
  * Suffixes a modifier value onto the end of a className, converting it to
@@ -11,7 +11,7 @@ var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
  * @param suffix The suffix to convert into pascal case.
  */
 var suffixModifier = function (rootClassName, suffix) {
-    return "".concat(rootClassName).concat(filterDataAttrs.camelCase(suffix, {
+    return "".concat(rootClassName).concat(index.camelcase(suffix, {
         pascalCase: true
     }));
 };

package/dist/_shared/cjs/{index.es-77def0c9.js → use-media-query-d34c83b9.js}

@@ -38,13 +38,4 @@ var useMediaQuery = function (mediaQuery) {
     return matches;
 };
 
-/**
- * Do not edit directly
- * Generated file
- */
-var ArcBreakpointM = 768;
-var ArcBreakpointL = 1024;
-
-exports.ArcBreakpointL = ArcBreakpointL;
-exports.ArcBreakpointM = ArcBreakpointM;
 exports.useMediaQuery = useMediaQuery;

package/dist/_shared/esm/ArcIconEclipse.esm-bb48b82a.js

@@ -0,0 +1,22 @@
+import React__default from 'react';
+
+const ArcIconEclipse = (props) =>
+  /*#__PURE__*/ React__default.createElement(
+    "svg",
+    Object.assign(
+      {
+        viewBox: "0 0 28 28",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default.createElement("path", {
+      d: "M23.2 14C23.2 15.6967 22.7308 17.3603 21.8443 18.807C20.9578 20.2536 19.6885 21.427 18.1767 22.1973C16.665 22.9675 14.9696 23.3048 13.2782 23.1716C11.5867 23.0385 9.96502 22.4402 8.59238 21.443C7.21973 20.4457 6.1496 19.0882 5.50031 17.5207C4.85102 15.9532 4.64785 14.2366 4.91327 12.5608C5.17869 10.885 5.90236 9.31525 7.00426 8.02508C8.10617 6.73491 9.5434 5.77459 11.157 5.25028",
+      stroke: "currentColor",
+      strokeWidth: 1.6,
+      strokeLinecap: "round",
+    }),
+  );
+
+export { ArcIconEclipse as A };

package/dist/_shared/esm/Avatar-38cc0595.js

@@ -0,0 +1,43 @@
+import { a as __assign, _ as __rest, f as filterDataAttrs } from './index-288c66b5.js';
+import React__default from 'react';
+import { c as classNames } from './index-2e73c2e9.js';
+import { H as Heading } from './Heading-906c7c7c.js';
+import './Surface-71d21a9e.js';
+import { C as ConditionalWrapper } from './ConditionalWrapper-59be8f35.js';
+import { T as ThemeIcon } from './ThemeIcon-c2dc41a6.js';
+import { I as Image } from './Image-57d08939.js';
+
+var AvatarContent = function (_a) {
+    var img = _a.img, initials = _a.initials, _b = _a.size, size = _b === void 0 ? "xl" : _b;
+    var textSize = {
+        s: "xxxs",
+        m: "xxs",
+        l: "xs",
+        xl: "s"
+    };
+    var iconSize = {
+        s: 16,
+        m: 24,
+        l: 32,
+        xl: 40
+    };
+    if (img) {
+        return React__default.createElement(Image, __assign({ fit: "cover" }, img));
+    }
+    if (initials) {
+        return (React__default.createElement(Heading, { size: textSize[size] }, initials.substring(0, 3).toUpperCase()));
+    }
+    return React__default.createElement(ThemeIcon, { size: iconSize[size], icon: "avatarUser" });
+};
+
+/** Use `Avatar` to visually represent a user. */
+var Avatar = function (_a) {
+    var img = _a.img, initials = _a.initials, href = _a.href, title = _a.title, ariaLabel = _a.ariaLabel, onClick = _a.onClick, _b = _a.size, size = _b === void 0 ? "xl" : _b, props = __rest(_a, ["img", "initials", "href", "title", "ariaLabel", "onClick", "size"]);
+    var wrapperAttrs = __assign({ className: classNames("arc-Avatar", "arc-Avatar--".concat(size), {
+            "arc-Avatar--img": Boolean(img)
+        }) }, filterDataAttrs(props));
+    return (React__default.createElement(ConditionalWrapper, { condition: Boolean(href), wrapper: function (children) { return (React__default.createElement("a", __assign({ href: href, "aria-label": ariaLabel, onClick: onClick, title: title }, wrapperAttrs), children)); }, fallback: function (children) { return React__default.createElement("div", __assign({}, wrapperAttrs), children); } },
+        React__default.createElement(AvatarContent, { size: size, img: img, initials: initials })));
+};
+
+export { Avatar as A };

package/dist/_shared/esm/{BrandLogo-1af78f76.js → BrandLogo-7ed8aeda.js}

@@ -1,8 +1,8 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { useContext } from 'react';
-import { s as suffixModifier } from './suffix-modifier-3d548e45.js';
-import { C as Context } from './Surface-0ca6817d.js';
+import { s as suffixModifier } from './suffix-modifier-1ce05abe.js';
+import { C as Context } from './Surface-71d21a9e.js';
 
 /**
  * Use `BrandLogo` to display the brand logo.

package/dist/_shared/esm/{Breadcrumbs-c4b65cff.js → Breadcrumbs-9078b68e.js}

@@ -1,23 +1,23 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
 import React__default, { useRef, useState, useEffect } from 'react';
-import { d as debounce_1 } from './debounce-6fed6b84.js';
-import { T as ThemeIcon } from './ThemeIcon-eab5a4d0.js';
+import { d as debounce_1 } from './debounce-c8e41002.js';
+import { T as ThemeIcon } from './ThemeIcon-c2dc41a6.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
 
 var BreadcrumbsItem = function (_a) {
     var spacerIconAfter = _a.spacerIconAfter, spacerIconBefore = _a.spacerIconBefore, children = _a.children, props = __rest(_a, ["spacerIconAfter", "spacerIconBefore", "children"]);
     return (React__default.createElement("li", __assign({ className: "arc-Breadcrumbs-item" }, filterDataAttrs(props)),
-        spacerIconBefore && (React__default.createElement("div", { className: "arc-Breadcrumbs-spacerIcon", "data-testid": "arc-chevron-left-2px" },
+        spacerIconBefore && (React__default.createElement("div", { className: "arc-Breadcrumbs-spacerIcon", "data-testid": "arc-chevron-left-2px", "aria-hidden": "true" },
             React__default.createElement(ThemeIcon, { icon: "breadcrumbLeft" }))),
         children,
-        spacerIconAfter && (React__default.createElement("div", { className: "arc-Breadcrumbs-spacerIcon" },
+        spacerIconAfter && (React__default.createElement("div", { className: "arc-Breadcrumbs-spacerIcon", "aria-hidden": "true" },
             React__default.createElement(ThemeIcon, { icon: "breadcrumbRight" })))));
 };
 
 var BreadcrumbsLink = React__default.forwardRef(function (_a, ref) {
     var onClick = _a.onClick, href = _a.href, isActive = _a.isActive, children = _a.children, props = __rest(_a, ["onClick", "href", "isActive", "children"]);
-    return (React__default.createElement(React__default.Fragment, null, isActive || href === undefined ? (React__default.createElement("span", __assign({}, (isActive && { "aria-hidden": "true" }), { onClick: onClick, className: classNames({
+    return (React__default.createElement(React__default.Fragment, null, isActive || href === undefined ? (React__default.createElement("span", __assign({ onClick: onClick, className: classNames({
             "arc-Breadcrumbs-text": true,
             "arc-Breadcrumbs-text--active": isActive
         }) }, filterDataAttrs(props)), children)) : (React__default.createElement("a", __assign({}, (onClick && ref
@@ -66,11 +66,11 @@ var Breadcrumbs = function (_a) {
         // eslint-disable-next-line
     }, []);
     var items = React__default.Children.toArray(children);
-    return (React__default.createElement("nav", __assign({ "aria-label": "Breadcrumbs", role: "navigation", className: classNames({
+    return (React__default.createElement("nav", __assign({ "aria-label": "Breadcrumbs", className: classNames({
             "arc-Breadcrumbs": true,
             "arc-Breadcrumbs--light": isLight
         }) }, filterDataAttrs(props)),
-        React__default.createElement("ul", { className: "arc-Breadcrumbs-list", ref: breadcrumbsList }, showBackTrail ? (React__default.createElement(React__default.Fragment, null, items.length < 3 ? (React__default.createElement(Breadcrumbs.Item, { spacerIconBefore: true }, items[0].props.children)) : (React__default.createElement(Breadcrumbs.Item, { spacerIconBefore: true }, items[items.length - 2].props.children)))) : (React__default.createElement(React__default.Fragment, null, isCompressed ? (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("ol", { className: "arc-Breadcrumbs-list", ref: breadcrumbsList }, showBackTrail ? (React__default.createElement(React__default.Fragment, null, items.length < 3 ? (React__default.createElement(Breadcrumbs.Item, { spacerIconBefore: true }, items[0].props.children)) : (React__default.createElement(Breadcrumbs.Item, { spacerIconBefore: true }, items[items.length - 2].props.children)))) : (React__default.createElement(React__default.Fragment, null, isCompressed ? (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(Breadcrumbs.Item, { spacerIconAfter: true }, items[0].props.children),
             React__default.createElement(Breadcrumbs.Item, { spacerIconAfter: true },
                 React__default.createElement("button", { className: "arc-Breadcrumbs-expand arc-Breadcrumbs-text", onClick: function () { return setIsCompressed(false); }, "aria-label": "Expand Breadcrumbs", type: "button", "data-testid": "expand-ellipsis" }, "...")),

package/dist/_shared/esm/BtIconArrowRight.esm-6a17d0ce.js

@@ -0,0 +1,31 @@
+import { a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import React__default from 'react';
+import { H as Heading } from './Heading-906c7c7c.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;
+    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 }, filterDataAttrs(linkData)), heading)) : (heading)));
+};
+
+const BtIconArrowRight = (props) =>
+  /*#__PURE__*/ React__default.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default.createElement("defs", null),
+    /*#__PURE__*/ React__default.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__default.createElement("path", {
+      d: "M18.14648,11.64648a.49983.49983,0,0,0,0,.707L21.293,15.5H9.5a.5.5,0,0,0,0,1H21.293l-3.14649,3.14648a.5.5,0,1,0,.707.707L23.207,16l-4.35351-4.35352A.49983.49983,0,0,0,18.14648,11.64648Z",
+      fill: "currentColor",
+    }),
+  );
+
+export { BtIconArrowRight as B, CardHeading as C };

package/dist/_shared/esm/BtIconChevronRightMid.esm-4764708f.js

@@ -0,0 +1,22 @@
+import React__default from 'react';
+
+const BtIconChevronRightMid = (props) =>
+  /*#__PURE__*/ React__default.createElement(
+    "svg",
+    Object.assign(
+      {
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M9.04543 8.0002L6.19676 5.1482C6.07077 5.02196 6 4.85089 6 4.67253C6 4.49418 6.07077 4.32311 6.19676 4.19687C6.25906 4.13446 6.33304 4.08495 6.41449 4.05117C6.49594 4.01739 6.58325 4 6.67143 4C6.75961 4 6.84692 4.01739 6.92837 4.05117C7.00982 4.08495 7.0838 4.13446 7.1461 4.19687L10.4701 7.52487C10.5959 7.65108 10.6665 7.82201 10.6665 8.0002C10.6665 8.1784 10.5959 8.34932 10.4701 8.47553L7.1461 11.8035C7.0838 11.8659 7.00982 11.9155 6.92837 11.9492C6.84692 11.983 6.75961 12.0004 6.67143 12.0004C6.58325 12.0004 6.49594 11.983 6.41449 11.9492C6.33304 11.9155 6.25906 11.8659 6.19676 11.8035C6.07077 11.6773 6 11.5062 6 11.3279C6 11.1495 6.07077 10.9784 6.19676 10.8522L9.04543 8.0002Z",
+      fill: "currentColor",
+    }),
+  );
+
+export { BtIconChevronRightMid as B };

package/dist/_shared/esm/BtIconPlayFill.esm-05fc0344.js

@@ -0,0 +1,24 @@
+import React__default from 'react';
+
+const BtIconPlayFill = (props) =>
+  /*#__PURE__*/ React__default.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default.createElement("defs", null),
+    /*#__PURE__*/ React__default.createElement("path", {
+      d: "M13.16113,11.76172a.10284.10284,0,0,0-.10742,0A.10229.10229,0,0,0,13,11.85449v8.2876a.10314.10314,0,0,0,.05371.09326.10451.10451,0,0,0,.10742.00049l7.17774-4.14453a.10285.10285,0,0,0,.05371-.09277.10421.10421,0,0,0-.05371-.09375Z",
+      fill: "currentColor",
+    }),
+    /*#__PURE__*/ React__default.createElement("path", {
+      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm4.83887,14.957-7.17774,4.14453A1.10791,1.10791,0,0,1,12,20.14209v-8.2876a1.107,1.107,0,0,1,1.66113-.95849l7.17774,4.14355a1.10688,1.10688,0,0,1,0,1.91748Z",
+      fill: "currentColor",
+    }),
+  );
+
+export { BtIconPlayFill as B };

package/dist/_shared/esm/{Button-c3348ed8.js → Button-dde2b46a.js}

@@ -1,13 +1,13 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { forwardRef, useContext } from 'react';
-import { s as suffixModifier } from './suffix-modifier-3d548e45.js';
-import { I as Icon } from './Icon-9ecaaeab.js';
-import { C as Context } from './Surface-0ca6817d.js';
-import { T as ThemeIcon } from './ThemeIcon-eab5a4d0.js';
+import { s as suffixModifier } from './suffix-modifier-1ce05abe.js';
+import { I as Icon } from './Icon-512f834f.js';
+import { C as Context } from './Surface-71d21a9e.js';
+import { T as ThemeIcon } from './ThemeIcon-c2dc41a6.js';
 
 /**
- * Use `Button` to allow users to take actions with clicks and taps.
+ * Use `Button` to let a user complete an action like ‘Log in’ or ‘Register’.
  */
 var Button = forwardRef(function (_a, ref) {
     var _b;

package/dist/_shared/esm/ButtonV2-49cd0615.js

@@ -0,0 +1,42 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import React__default, { forwardRef, useContext } from 'react';
+import { c as classNames } from './index-2e73c2e9.js';
+import { I as Icon } from './Icon-512f834f.js';
+import { C as Context } from './Surface-71d21a9e.js';
+import { A as ArcIconEclipse } from './ArcIconEclipse.esm-bb48b82a.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 ButtonV2Classes = classNames("arc-ButtonV2", ["arc-ButtonV2--".concat(buttonStyle)], ["arc-ButtonV2--".concat(size)], {
+        "arc-ButtonV2--onDarkSurface": surface === "dark",
+        "arc-ButtonV2--emptyLabel": !label,
+        "arc-ButtonV2--isLoading": isLoading,
+        "arc-ButtonV2--isFullWidth": isFullWidth,
+        "arc-ButtonV2--withIcon": icon || isLoading,
+        "arc-ButtonV2--withIconBeforeText": iconPosition === "beforeText" && (icon || isLoading)
+    });
+    var commonProps = __assign({ id: id, onClick: onClick, ref: ref }, filterDataAttrs(props));
+    if (href && !isLoading) {
+        return (React__default.createElement("a", __assign({}, commonProps, { className: ButtonV2Classes, href: href, rel: rel, "aria-label": ariaLabel, target: target }),
+            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(Icon, { size: size === "s" ? 16 : 32, icon: ArcIconEclipse }))),
+                icon && !isLoading && (React__default.createElement("span", { className: "arc-ButtonV2-icon" },
+                    React__default.createElement(Icon, { size: size === "s" ? 16 : 32, 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", {
+                "arc-ButtonV2-inner--iconBeforeText": iconPosition === "beforeText"
+            }) },
+            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 }))),
+            isLoading && (React__default.createElement("span", { className: "arc-ButtonV2-icon" },
+                React__default.createElement(Icon, { size: size === "s" ? 16 : 32, icon: ArcIconEclipse }))))));
+});
+
+export { ButtonV2 as B };