@arc-ui/components 11.24.1 → 12.0.0-beta.3

package/dist/_shared/cjs/{index-d38f1bd0.js → index-996dec94.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var $7SXl2$reactdom = require('react-dom');
-var index = require('./index-dd1d18ea.js');
+var ReactDOM = require('react-dom');
+var index = require('./index-3dd54df1.js');
 
 function $fe963b355347cc68$export$3e6543de14f8614f(initialState, machine) {
     return React.useReducer((state, event)=>{
@@ -91,7 +91,7 @@ $921a889cee6df7e8$export$99c2b779aa4e8b8b.displayName = 'Presence';
                 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.
-                $7SXl2$reactdom.flushSync(()=>send('ANIMATION_END')
+                ReactDOM.flushSync(()=>send('ANIMATION_END')
                 );
             };
             const handleAnimationStart = (event)=>{

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/{use-media-query-e61881d8.js → use-media-query-d34c83b9.js}

@@ -2,14 +2,6 @@
 
 var React = require('react');
 
-/**
- * Do not edit directly
- * Generated file
- */
-var ArcBreakpointS = 636;
-var ArcBreakpointM = 768;
-var ArcBreakpointL = 1024;
-
 /**
  * @typedef MediaQueryOutputs
  * @param {boolean} matches - does the document match the media query?
@@ -46,7 +38,4 @@ var useMediaQuery = function (mediaQuery) {
     return matches;
 };
 
-exports.ArcBreakpointL = ArcBreakpointL;
-exports.ArcBreakpointM = ArcBreakpointM;
-exports.ArcBreakpointS = ArcBreakpointS;
 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-320313f0.js → Avatar-38cc0595.js}

@@ -1,28 +1,11 @@
-import { a as __assign, _ as __rest, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
+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 './Surface-0ca6817d.js';
+import { H as Heading } from './Heading-906c7c7c.js';
+import './Surface-71d21a9e.js';
 import { C as ConditionalWrapper } from './ConditionalWrapper-59be8f35.js';
-import { I as Icon } from './Icon-15799695.js';
-import { I as Image } from './Image-12fbd327.js';
-import { H as Heading } from './Heading-d16e0e53.js';
-
-const BtIconUser = (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: "M20.87579,16.014a6.99843,6.99843,0,1,0-9.75378.00091C6.725,17.77887,4,21.452,4,25.66113V27a1.001,1.001,0,0,0,1,1H27a1.001,1.001,0,0,0,1-1V25.66113C28,21.45129,25.27423,17.77765,20.87579,16.014ZM10,11a5.998,5.998,0,1,1,6,6A6.0068,6.0068,0,0,1,10,11ZM27,27H5V25.66113c0-4.61181,3.46484-7.57324,6.707-8.80761l.29492-.11206a6.97581,6.97581,0,0,0,7.99457-.00062l.29645.11268C23.53516,18.08789,27,21.04932,27,25.66113Z",
-      fill: "currentColor",
-    }),
-  );
+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;
@@ -44,7 +27,7 @@ var AvatarContent = function (_a) {
     if (initials) {
         return (React__default.createElement(Heading, { size: textSize[size] }, initials.substring(0, 3).toUpperCase()));
     }
-    return React__default.createElement(Icon, { size: iconSize[size], icon: BtIconUser });
+    return React__default.createElement(ThemeIcon, { size: iconSize[size], icon: "avatarUser" });
 };
 
 /** Use `Avatar` to visually represent a user. */

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-7d55e1a6.js → Breadcrumbs-9078b68e.js}

@@ -1,8 +1,7 @@
-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 { B as BtIconChevronLeft2Px, a as BtIconChevronRight2Px } from './BtIconChevronRight2Px.esm-75e92636.js';
-import { I as Icon } from './Icon-15799695.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';
 
@@ -10,10 +9,10 @@ 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", "aria-hidden": "true" },
-            React__default.createElement(Icon, { icon: BtIconChevronLeft2Px }))),
+            React__default.createElement(ThemeIcon, { icon: "breadcrumbLeft" }))),
         children,
         spacerIconAfter && (React__default.createElement("div", { className: "arc-Breadcrumbs-spacerIcon", "aria-hidden": "true" },
-            React__default.createElement(Icon, { icon: BtIconChevronRight2Px })))));
+            React__default.createElement(ThemeIcon, { icon: "breadcrumbRight" })))));
 };
 
 var BreadcrumbsLink = React__default.forwardRef(function (_a, ref) {

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/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-a7d134c6.js → Button-dde2b46a.js}

@@ -1,11 +1,10 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
-import { B as BtIconChevronLeftMid } from './BtIconChevronLeftMid.esm-1ed8330b.js';
-import { B as BtIconChevronRightMid } from './BtIconChevronRightMid.esm-32268f1a.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-15799695.js';
-import { C as Context } from './Surface-0ca6817d.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 let a user complete an action like ‘Log in’ or ‘Register’.
@@ -20,9 +19,7 @@ var Button = forwardRef(function (_a, ref) {
         },
         _b[suffixModifier("arc-Button--fill", fill)] = fill !== "solid",
         _b["arc-Button--fullWidth"] = isFullWidth,
-        _b[suffixModifier("arc-Button--icon", iconPosition.replace("icon", ""))] = (icon || fill === "flat") &&
-            iconPosition &&
-            iconPosition !== "afterText",
+        _b[suffixModifier("arc-Button--icon", iconPosition.replace("icon", ""))] = (icon || fill === "flat") && iconPosition,
         _b["arc-Button--hasSupportingText"] = supportingText,
         _b["arc-Button--onDarkSurface"] = surface === "dark",
         _b["arc-Button--size".concat(size && size.toUpperCase())] = size && size !== "m",
@@ -45,7 +42,7 @@ var Button = forwardRef(function (_a, ref) {
 });
 var ButtonIcon = function (_a) {
     var icon = _a.icon, isChevron = _a.isChevron, isBeforeText = _a.isBeforeText;
-    return (React__default.createElement("span", { className: "arc-Button-icon" }, isChevron ? (React__default.createElement(Icon, { icon: isBeforeText ? BtIconChevronLeftMid : BtIconChevronRightMid })) : (React__default.createElement(Icon, { icon: icon }))));
+    return (React__default.createElement("span", { className: "arc-Button-icon" }, isChevron ? (React__default.createElement(ThemeIcon, { icon: isBeforeText ? "buttonLeft" : "buttonRight" })) : (React__default.createElement(Icon, { icon: icon }))));
 };
 
 export { Button as 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 };