@arc-ui/components 11.25.0 → 12.0.0-beta.10

package/dist/VideoPlayer/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/videoplayer",
+  "types": "../types/components/VideoPlayer/index.d.ts",
+  "main": "./VideoPlayer.cjs.js",
+  "module": "./VideoPlayer.esm.js",
+  "private": true
+}

package/dist/VideoPlayer/styles.css

@@ -0,0 +1 @@
+.arc .arc-VideoPlayer{height:100%;width:100%}.arc .arc-VideoPlayer-wrapper{aspect-ratio:16/9;overflow:hidden;width:100%}.arc .arc-VideoPlayer-wrapper--borderRadius{border-radius:var(--sem-border-radius-s)}.arc .arc-VideoPlayer iframe{border:none;height:100%;width:100%}.arc .arc-VideoPlayer-icon{color:var(--sem-color-bg-secondary-light-minimal);height:80px;opacity:0.8;transition:0.4s ease opacity;width:80px}.arc .arc-VideoPlayer-icon:hover{opacity:1}.arc .arc-VideoPlayer-transcriptSectionHeading{display:inline}

package/dist/Visible/Visible.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
+var index_es = require('../_shared/cjs/index.es-0c2c97f4.js');
 var React = require('react');
 var index = require('../_shared/cjs/index-9947ac13.js');
 
@@ -11,14 +11,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var Visible = function (_a) {
-    var children = _a.children, xs = _a.xs, s = _a.s, m = _a.m, l = _a.l, xl = _a.xl, props = filterDataAttrs.__rest(_a, ["children", "xs", "s", "m", "l", "xl"]);
-    return (React__default["default"].createElement("div", filterDataAttrs.__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, props = index_es.__rest(_a, ["children", "xs", "s", "m", "l", "xl"]);
+    return (React__default["default"].createElement("div", index_es.__assign({ className: index.classNames("arc-Visible", {
             "arc-Visible--xs": xs,
             "arc-Visible--s": s,
             "arc-Visible--m": m,
             "arc-Visible--l": l,
             "arc-Visible--xl": xl
-        }) }, filterDataAttrs.filterDataAttrs(props)), children));
+        }) }, index_es.filterDataAttrs(props)), children));
 };
 
 exports.Visible = Visible;

package/dist/Visible/Visible.esm.js

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index.es-fc59ba8f.js';
 import React__default from 'react';
 import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
 

package/dist/Visible/styles.css

@@ -0,0 +1 @@
+.arc .arc-Visible{display:none}.arc .arc-Visible--xs{display:block}@media (min-width:636px){.arc .arc-Visible--xs{display:none}.arc .arc-Visible--s{display:block}}@media (min-width:768px){.arc .arc-Visible--s{display:none}.arc .arc-Visible--m{display:block}}@media (min-width:1024px){.arc .arc-Visible--m{display:none}.arc .arc-Visible--l{display:block}}@media (min-width:1280px){.arc .arc-Visible--l{display:none}.arc .arc-Visible--xl{display:block}}

package/dist/VisuallyHidden/VisuallyHidden.cjs.js

@@ -2,7 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-b0de4c7b.js');
+var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-c691ea4d.js');
+require('../_shared/cjs/index.es-0c2c97f4.js');
 require('react');
 
 

package/dist/VisuallyHidden/VisuallyHidden.esm.js

@@ -1,2 +1,3 @@
-export { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-06692fd3.js';
+export { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-59f004f5.js';
+import '../_shared/esm/index.es-fc59ba8f.js';
 import 'react';

package/dist/VisuallyHidden/styles.css

@@ -0,0 +1 @@
+.arc .arc-VisuallyHidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;word-wrap:"normal"}

package/dist/_shared/cjs/Avatar-d37e7dee.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var index_es = require('./index.es-0c2c97f4.js');
+var React = require('react');
+var index = require('./index-9947ac13.js');
+var ConditionalWrapper = require('./ConditionalWrapper-bf944594.js');
+var ThemeIcon = require('./ThemeIcon-cf6ddb34.js');
+var Image = require('./Image-bb696c61.js');
+var Heading = require('./Heading-b4b65724.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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["default"].createElement(Image.Image, index_es.__assign({ fit: "cover" }, img));
+    }
+    if (initials) {
+        return (React__default["default"].createElement(Heading.Heading, { size: textSize[size] }, initials.substring(0, 3).toUpperCase()));
+    }
+    return React__default["default"].createElement(ThemeIcon.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 = index_es.__rest(_a, ["img", "initials", "href", "title", "ariaLabel", "onClick", "size"]);
+    var wrapperAttrs = index_es.__assign({ className: index.classNames("arc-Avatar", "arc-Avatar--".concat(size), {
+            "arc-Avatar--img": Boolean(img)
+        }) }, index_es.filterDataAttrs(props));
+    return (React__default["default"].createElement(ConditionalWrapper.ConditionalWrapper, { condition: Boolean(href), wrapper: function (children) { return (React__default["default"].createElement("a", index_es.__assign({ href: href, "aria-label": ariaLabel, onClick: onClick, title: title }, wrapperAttrs), children)); }, fallback: function (children) { return React__default["default"].createElement("div", index_es.__assign({}, wrapperAttrs), children); } },
+        React__default["default"].createElement(AvatarContent, { size: size, img: img, initials: initials })));
+};
+
+exports.Avatar = Avatar;

package/dist/_shared/cjs/Badge-e5e57c0d.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var index_es = require('./index.es-0c2c97f4.js');
+var React = require('react');
+var index = require('./index-9947ac13.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/** 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 = index_es.__rest(_a, ["children", "state", "ariaLabel", "ariaRole"]);
+    return (React__default["default"].createElement("div", index_es.__assign({ className: index.classNames("arc-Badge", index_es.suffixModifier("arc-Badge--state", state)) }, (ariaLabel && { "aria-label": ariaLabel }), (ariaRole && { role: ariaRole }), index_es.filterDataAttrs(props)), children));
+};
+
+exports.Badge = Badge;

package/dist/_shared/cjs/Banner-a28364b4.js

@@ -0,0 +1,66 @@
+'use strict';
+
+var index_es = require('./index.es-0c2c97f4.js');
+var React = require('react');
+var index = require('./index-9947ac13.js');
+var index_es$1 = require('./index.es-0f681622.js');
+var useMediaQuery = require('./use-media-query-d34c83b9.js');
+var Heading = require('./Heading-b4b65724.js');
+var Image = require('./Image-bb696c61.js');
+var Grid = require('./Grid-102905c8.js');
+var VerticalSpace = require('./VerticalSpace-a5cf4d4e.js');
+var Text = require('./Text-1b3e4fb6.js');
+var Box = require('./Box-a8f42d4f.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var Banner = function (_a) {
+    var heading = _a.heading, label = _a.label, text = _a.text, img = _a.img, _b = _a.contentRatio, contentRatio = _b === void 0 ? "1/1" : _b, children = _a.children, _c = _a.alignment, alignment = _c === void 0 ? "center" : _c, additionalTopMargin = _a.additionalTopMargin, _d = _a.minHeight, minHeight = _d === void 0 ? 576 : _d, _e = _a.headingSize, headingSize = _e === void 0 ? "xl" : _e, _f = _a.isReversed, isReversed = _f === void 0 ? false : _f, _g = _a.isElevated, isElevated = _g === void 0 ? false : _g, _h = _a.headingLevel, headingLevel = _h === void 0 ? "2" : _h, _j = _a.type, type = _j === void 0 ? "light" : _j, props = index_es.__rest(_a, ["heading", "label", "text", "img", "contentRatio", "children", "alignment", "additionalTopMargin", "minHeight", "headingSize", "isReversed", "isElevated", "headingLevel", "type"]);
+    var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es$1.SemSizeBreakpointsM, ")"));
+    var backgrounds = {
+        dark: "dark-brand-02",
+        light: "light-white",
+        contained: "light-white"
+    };
+    var imageAlignment = {
+        bottom: "end",
+        top: "start",
+        center: "center"
+    };
+    var isContained = type === "contained";
+    var borderWidth = isContained && !isElevated ? "thin" : undefined;
+    var direction = isReversed && isMinWidthArcBreakpointM ? "row-reverse" : "row";
+    return (React__default["default"].createElement("div", index_es.__assign({ style: { minHeight: minHeight }, className: index.classNames("arc-Banner arc-Banner-background--".concat(type), {
+            "arc-Banner--elevation": isElevated
+        }) }, index_es.filterDataAttrs(props)),
+        React__default["default"].createElement(Box.Box, { "data-testid": "arc-Banner-box", isBorderRadius: true, borderWidth: borderWidth, surface: backgrounds[type], isSurfaceTransparent: true },
+            React__default["default"].createElement(Grid.Grid, { isGutterless: true, isFluid: true },
+                React__default["default"].createElement(Grid.Grid.Row, { "data-testid": "arc-Banner-gridRow", direction: direction },
+                    React__default["default"].createElement(Grid.Grid.Col, { "data-testid": "arc-Banner-contentCol", align: { m: alignment === "start" ? "start" : "center" }, order: { xs: isContained ? 2 : undefined, m: 0 }, xs: 12, m: contentRatio === "2/3" && img
+                            ? 8
+                            : contentRatio === "1/1" && img
+                                ? 6
+                                : 12 },
+                        React__default["default"].createElement("div", { className: index.classNames("arc-Banner-content", {
+                                "arc-Banner-content--additionalTopMargin": additionalTopMargin && alignment === "start"
+                            }) },
+                            label && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                                React__default["default"].createElement(Heading.Heading, { size: "xxs" }, label.toUpperCase()),
+                                React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "8" }))),
+                            React__default["default"].createElement(Heading.Heading, { level: headingLevel, size: headingSize }, heading),
+                            text && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                                React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "16" }),
+                                React__default["default"].createElement("p", { className: "arc-Banner-text" },
+                                    React__default["default"].createElement(Text.Text, null, text)))),
+                            children && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                                React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "32" }),
+                                children)))),
+                    img && contentRatio !== "1/0" && (React__default["default"].createElement(Grid.Grid.Col, index_es.__assign({ "data-testid": "arc-Banner-imageCol", align: img.fit !== "cover"
+                            ? { m: imageAlignment[img.alignment || "center"] }
+                            : undefined, xs: 12 }, (contentRatio === "2/3" && img ? { m: 4 } : { m: 6 })),
+                        React__default["default"].createElement(Image.Image, index_es.__assign({}, img)))))))));
+};
+
+exports.Banner = Banner;

package/dist/_shared/cjs/Box-a8f42d4f.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var index_es = require('./index.es-0c2c97f4.js');
+var React = require('react');
+var index = require('./index-9947ac13.js');
+var Surface = require('./Surface-ca708a8c.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * 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 = index_es.__rest(_a, ["children", "borderWidth", "elevationLevel", "padding", "isFullHeight", "isBorderRadius", "surface", "isSurfaceTransparent"]);
+    return (React__default["default"].createElement("div", index_es.__assign({ className: index.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)) }, index_es.filterDataAttrs(props)),
+        React__default["default"].createElement(Surface.Surface, { padding: padding, background: surface, isTransparent: isSurfaceTransparent }, children)));
+};
+
+exports.Box = Box;

package/dist/_shared/cjs/{BrandLogo-aea340c8.js → BrandLogo-5aef900a.js}

@@ -1,10 +1,9 @@
 'use strict';
 
-var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
+var index_es = require('./index.es-0c2c97f4.js');
 var index = require('./index-9947ac13.js');
 var React = require('react');
-var suffixModifier = require('./suffix-modifier-64dcd338.js');
-var Surface = require('./Surface-038db6e1.js');
+var Surface = require('./Surface-ca708a8c.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -15,17 +14,17 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  */
 var BrandLogo = function (_a) {
     var _b;
-    var _c = _a.color, color = _c === void 0 ? "auto" : _c, label = _a.label, _d = _a.size, size = _d === void 0 ? 34 : _d, subBrand = _a.subBrand, props = filterDataAttrs.__rest(_a, ["color", "label", "size", "subBrand"]);
+    var _c = _a.color, color = _c === void 0 ? "auto" : _c, label = _a.label, _d = _a.size, size = _d === void 0 ? 34 : _d, subBrand = _a.subBrand, props = index_es.__rest(_a, ["color", "label", "size", "subBrand"]);
     var surface = React.useContext(Surface.Context).surface;
-    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames((_b = {
+    return (React__default["default"].createElement("div", index_es.__assign({ className: index.classNames((_b = {
                 "arc-BrandLogo": true,
                 "arc-BrandLogo--colorBrand": color === "brand",
                 "arc-BrandLogo--onDarkSurface": surface === "dark"
             },
-            _b[suffixModifier.suffixModifier("arc-BrandLogo--subBrand", subBrand || "")] = subBrand,
+            _b[index_es.suffixModifier("arc-BrandLogo--subBrand", subBrand || "")] = subBrand,
             _b)), style: {
             width: size !== 34 ? size : undefined
-        } }, filterDataAttrs.filterDataAttrs(props)), label ? React__default["default"].createElement("span", { className: "arc-BrandLogo-text" }, label) : null));
+        } }, index_es.filterDataAttrs(props)), label ? React__default["default"].createElement("span", { className: "arc-BrandLogo-text" }, label) : null));
 };
 
 exports.BrandLogo = BrandLogo;

package/dist/_shared/cjs/{Breadcrumbs-c6eaf5c4.js → Breadcrumbs-edf76698.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
+var index_es = require('./index.es-0c2c97f4.js');
 var React = require('react');
-var debounce = require('./debounce-123468fb.js');
-var BtIconChevronRight2Px_esm = require('./BtIconChevronRight2Px.esm-dbf8cbee.js');
-var Icon = require('./Icon-b46897a3.js');
+var debounce = require('./debounce-a74c28cf.js');
+var Icon = require('./Icon-5dd78f2b.js');
+var BtIconChevronRight2Px_esm = require('./BtIconChevronRight2Px.esm-2e4d117e.js');
 var index = require('./index-9947ac13.js');
 var handleLinkClick = require('./handle-link-click-17a44cf4.js');
 
@@ -13,8 +13,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var BreadcrumbsItem = function (_a) {
-    var spacerIconAfter = _a.spacerIconAfter, spacerIconBefore = _a.spacerIconBefore, children = _a.children, props = filterDataAttrs.__rest(_a, ["spacerIconAfter", "spacerIconBefore", "children"]);
-    return (React__default["default"].createElement("li", filterDataAttrs.__assign({ className: "arc-Breadcrumbs-item" }, filterDataAttrs.filterDataAttrs(props)),
+    var spacerIconAfter = _a.spacerIconAfter, spacerIconBefore = _a.spacerIconBefore, children = _a.children;
+    return (React__default["default"].createElement("li", { className: "arc-Breadcrumbs-item" },
         spacerIconBefore && (React__default["default"].createElement("div", { className: "arc-Breadcrumbs-spacerIcon", "data-testid": "arc-chevron-left-2px", "aria-hidden": "true" },
             React__default["default"].createElement(Icon.Icon, { icon: BtIconChevronRight2Px_esm.BtIconChevronLeft2Px }))),
         children,
@@ -23,18 +23,18 @@ var BreadcrumbsItem = function (_a) {
 };
 
 var BreadcrumbsLink = React__default["default"].forwardRef(function (_a, ref) {
-    var onClick = _a.onClick, href = _a.href, isActive = _a.isActive, children = _a.children, props = filterDataAttrs.__rest(_a, ["onClick", "href", "isActive", "children"]);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, isActive || href === undefined ? (React__default["default"].createElement("span", filterDataAttrs.__assign({ onClick: onClick, className: index.classNames({
+    var onClick = _a.onClick, href = _a.href, isActive = _a.isActive, children = _a.children;
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, isActive || href === undefined ? (React__default["default"].createElement("span", { onClick: onClick, className: index.classNames({
             "arc-Breadcrumbs-text": true,
             "arc-Breadcrumbs-text--active": isActive
-        }) }, filterDataAttrs.filterDataAttrs(props)), children)) : (React__default["default"].createElement("a", filterDataAttrs.__assign({}, (onClick && ref
+        }) }, children)) : (React__default["default"].createElement("a", index_es.__assign({}, (onClick && ref
         ? { onClick: onClick }
-        : { onClick: handleLinkClick.handleLinkClick({ handler: onClick }) }), { className: "arc-Breadcrumbs-text", ref: ref, href: href }, filterDataAttrs.filterDataAttrs(props)), children))));
+        : { onClick: handleLinkClick.handleLinkClick({ handler: onClick }) }), { className: "arc-Breadcrumbs-text", ref: ref, href: href }), children))));
 });
 
 /** Use `Breadcrumbs` to add a secondary navigation scheme that reveals the user’s location. Each item should be wrapped with `Breadcrumbs.Item` */
 var Breadcrumbs = function (_a) {
-    var isLight = _a.isLight, children = _a.children, props = filterDataAttrs.__rest(_a, ["isLight", "children"]);
+    var isLight = _a.isLight, children = _a.children, props = index_es.__rest(_a, ["isLight", "children"]);
     var breadcrumbsList = React.useRef(null);
     var _b = React.useState(false), isCompressed = _b[0], setIsCompressed = _b[1];
     var _c = React.useState(false), showBackTrail = _c[0], setShowBackTrail = _c[1];
@@ -73,10 +73,10 @@ var Breadcrumbs = function (_a) {
         // eslint-disable-next-line
     }, []);
     var items = React__default["default"].Children.toArray(children);
-    return (React__default["default"].createElement("nav", filterDataAttrs.__assign({ "aria-label": "Breadcrumbs", className: index.classNames({
+    return (React__default["default"].createElement("nav", index_es.__assign({ "aria-label": "Breadcrumbs", className: index.classNames({
             "arc-Breadcrumbs": true,
             "arc-Breadcrumbs--light": isLight
-        }) }, filterDataAttrs.filterDataAttrs(props)),
+        }) }, index_es.filterDataAttrs(props)),
         React__default["default"].createElement("ol", { className: "arc-Breadcrumbs-list", ref: breadcrumbsList }, showBackTrail ? (React__default["default"].createElement(React__default["default"].Fragment, null, items.length < 3 ? (React__default["default"].createElement(Breadcrumbs.Item, { spacerIconBefore: true }, items[0].props.children)) : (React__default["default"].createElement(Breadcrumbs.Item, { spacerIconBefore: true }, items[items.length - 2].props.children)))) : (React__default["default"].createElement(React__default["default"].Fragment, null, isCompressed ? (React__default["default"].createElement(React__default["default"].Fragment, null,
             React__default["default"].createElement(Breadcrumbs.Item, { spacerIconAfter: true }, items[0].props.children),
             React__default["default"].createElement(Breadcrumbs.Item, { spacerIconAfter: true },

package/dist/_shared/cjs/{BtIconAlert.esm-1a0ff9f0.js → BtIconArrowRight.esm-6053bb79.js}

@@ -6,7 +6,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const BtIconAlert = (props) =>
+const BtIconArrowRight = (props) =>
   /*#__PURE__*/ React__default["default"].createElement(
     "svg",
     Object.assign(
@@ -22,13 +22,9 @@ const BtIconAlert = (props) =>
       fill: "currentColor",
     }),
     /*#__PURE__*/ React__default["default"].createElement("path", {
-      fill: "currentColor",
-      d: "M16 20.99335A1 1 0 1 0 16 22.99335 1 1 0 1 0 16 20.99335z",
-    }),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M16.00488,19.00977a.49972.49972,0,0,0,.5-.5L16.50684,9.5a.5.5,0,0,0-1,0l-.002,9.00977A.5.5,0,0,0,16.00488,19.00977Z",
+      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",
     }),
   );
 
-exports.BtIconAlert = BtIconAlert;
+exports.BtIconArrowRight = BtIconArrowRight;

package/dist/_shared/cjs/BtIconPlayFill.esm-b8997cfc.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const BtIconPlayFill = (props) =>
+  /*#__PURE__*/ React__default["default"].createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default["default"].createElement("defs", null),
+    /*#__PURE__*/ React__default["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["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",
+    }),
+  );
+
+exports.BtIconPlayFill = BtIconPlayFill;

package/dist/_shared/cjs/{Button-6ba21d3b.js → Button-82df14c9.js}

@@ -1,13 +1,11 @@
 'use strict';
 
-var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
-var BtIconChevronLeftMid_esm = require('./BtIconChevronLeftMid.esm-0aaa6770.js');
-var BtIconChevronRightMid_esm = require('./BtIconChevronRightMid.esm-d01ebbd4.js');
+var index_es = require('./index.es-0c2c97f4.js');
 var index = require('./index-9947ac13.js');
 var React = require('react');
-var suffixModifier = require('./suffix-modifier-64dcd338.js');
-var Icon = require('./Icon-b46897a3.js');
-var Surface = require('./Surface-038db6e1.js');
+var Icon = require('./Icon-5dd78f2b.js');
+var Surface = require('./Surface-ca708a8c.js');
+var ThemeIcon = require('./ThemeIcon-cf6ddb34.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -18,40 +16,38 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  */
 var Button = React.forwardRef(function (_a, ref) {
     var _b;
-    var ariaLabel = _a.ariaLabel, _c = _a.fill, fill = _c === void 0 ? "solid" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPosition, iconPosition = _d === void 0 ? "afterText" : _d, id = _a.id, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isDisplayBlock, isDisplayBlock = _f === void 0 ? false : _f, _g = _a.isFullWidth, isFullWidth = _g === void 0 ? false : _g, label = _a.label, onClick = _a.onClick, rel = _a.rel, _h = _a.size, size = _h === void 0 ? "m" : _h, supportingText = _a.supportingText, target = _a.target, type = _a.type, form = _a.form, props = filterDataAttrs.__rest(_a, ["ariaLabel", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "size", "supportingText", "target", "type", "form"]);
+    var ariaLabel = _a.ariaLabel, _c = _a.fill, fill = _c === void 0 ? "solid" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPosition, iconPosition = _d === void 0 ? "afterText" : _d, id = _a.id, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isDisplayBlock, isDisplayBlock = _f === void 0 ? false : _f, _g = _a.isFullWidth, isFullWidth = _g === void 0 ? false : _g, label = _a.label, onClick = _a.onClick, rel = _a.rel, _h = _a.size, size = _h === void 0 ? "m" : _h, supportingText = _a.supportingText, target = _a.target, type = _a.type, form = _a.form, props = index_es.__rest(_a, ["ariaLabel", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "size", "supportingText", "target", "type", "form"]);
     var surface = React.useContext(Surface.Context).surface;
     var buttonClasses = index.classNames((_b = {
             "arc-Button": true,
             "arc-Button--displayBlock": isDisplayBlock
         },
-        _b[suffixModifier.suffixModifier("arc-Button--fill", fill)] = fill !== "solid",
+        _b[index_es.suffixModifier("arc-Button--fill", fill)] = fill !== "solid",
         _b["arc-Button--fullWidth"] = isFullWidth,
-        _b[suffixModifier.suffixModifier("arc-Button--icon", iconPosition.replace("icon", ""))] = (icon || fill === "flat") &&
-            iconPosition &&
-            iconPosition !== "afterText",
+        _b[index_es.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",
         _b));
-    var commonProps = filterDataAttrs.__assign({ id: id, onClick: onClick, ref: ref }, filterDataAttrs.filterDataAttrs(props));
+    var commonProps = index_es.__assign({ id: id, onClick: onClick, ref: ref }, index_es.filterDataAttrs(props));
     var buttonText = supportingText ? (React__default["default"].createElement("span", null,
         React__default["default"].createElement("span", { className: "arc-Button-text" }, label),
         React__default["default"].createElement("span", { className: "arc-Button-supportingText" }, supportingText))) : (React__default["default"].createElement("span", { className: "arc-Button-text" }, label));
     var buttonIcon = icon || fill === "flat" ? (React__default["default"].createElement(ButtonIcon, { icon: icon, isChevron: !icon && fill === "flat", isBeforeText: iconPosition === "beforeText" })) : null;
     if (href && !isDisabled) {
-        return (React__default["default"].createElement("a", filterDataAttrs.__assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, href: href, rel: rel, target: target }),
+        return (React__default["default"].createElement("a", index_es.__assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, href: href, rel: rel, target: target }),
             React__default["default"].createElement("span", { className: "arc-Button-inner" },
                 buttonText,
                 buttonIcon)));
     }
-    return (React__default["default"].createElement("button", filterDataAttrs.__assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, disabled: isDisabled, type: type, form: form }),
+    return (React__default["default"].createElement("button", index_es.__assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, disabled: isDisabled, type: type, form: form }),
         React__default["default"].createElement("span", { className: "arc-Button-inner" },
             buttonText,
             buttonIcon)));
 });
 var ButtonIcon = function (_a) {
     var icon = _a.icon, isChevron = _a.isChevron, isBeforeText = _a.isBeforeText;
-    return (React__default["default"].createElement("span", { className: "arc-Button-icon" }, isChevron ? (React__default["default"].createElement(Icon.Icon, { icon: isBeforeText ? BtIconChevronLeftMid_esm.BtIconChevronLeftMid : BtIconChevronRightMid_esm.BtIconChevronRightMid })) : (React__default["default"].createElement(Icon.Icon, { icon: icon }))));
+    return (React__default["default"].createElement("span", { className: "arc-Button-icon" }, isChevron ? (React__default["default"].createElement(ThemeIcon.ThemeIcon, { icon: isBeforeText ? "buttonLeft" : "buttonRight" })) : (React__default["default"].createElement(Icon.Icon, { icon: icon }))));
 };
 
 exports.Button = Button;

package/dist/_shared/cjs/ButtonV2-0679b44b.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var index_es = require('./index.es-0c2c97f4.js');
+var React = require('react');
+var index = require('./index-9947ac13.js');
+var Icon = require('./Icon-5dd78f2b.js');
+var Surface = require('./Surface-ca708a8c.js');
+var Spinner = require('./Spinner-0f578e7f.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ButtonV2 = React.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 = index_es.__rest(_a, ["label", "buttonStyle", "icon", "iconPosition", "size", "ariaLabel", "isFullWidth", "isLoading", "onClick", "href", "id", "rel", "target", "type", "form"]);
+    var surface = React.useContext(Surface.Context).surface;
+    var iconSizes = {
+        s: 16,
+        m: 32,
+        l: 40
+    };
+    var ButtonV2Classes = index.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 = index_es.__assign({ id: id, onClick: onClick, ref: ref }, index_es.filterDataAttrs(props));
+    if (href && !isLoading) {
+        return (React__default["default"].createElement("a", index_es.__assign({}, commonProps, { className: ButtonV2Classes, href: href, rel: rel, "aria-label": ariaLabel, target: target }),
+            React__default["default"].createElement("span", { className: index.classNames("arc-ButtonV2-inner", {
+                    "arc-ButtonV2-inner--iconBeforeText": iconPosition === "beforeText"
+                }) },
+                label && React__default["default"].createElement("span", { className: "arc-ButtonV2-label" }, label),
+                isLoading && (React__default["default"].createElement("span", { className: "arc-ButtonV2-icon" },
+                    React__default["default"].createElement(Spinner.Spinner, { size: size }))),
+                icon && !isLoading && (React__default["default"].createElement("span", { className: "arc-ButtonV2-icon" },
+                    React__default["default"].createElement(Icon.Icon, { size: iconSizes[size], icon: icon }))))));
+    }
+    return (React__default["default"].createElement("button", index_es.__assign({}, commonProps, { className: ButtonV2Classes, "aria-label": ariaLabel, disabled: isLoading, type: type, form: form }),
+        React__default["default"].createElement("span", { className: index.classNames("arc-ButtonV2-inner", {
+                "arc-ButtonV2-inner--iconBeforeText": iconPosition === "beforeText"
+            }) },
+            label && React__default["default"].createElement("span", { className: "arc-ButtonV2-label" }, label),
+            icon && !isLoading && (React__default["default"].createElement("span", { className: "arc-ButtonV2-icon" },
+                React__default["default"].createElement(Icon.Icon, { size: iconSizes[size], icon: icon }))),
+            isLoading && (React__default["default"].createElement("span", { className: "arc-ButtonV2-icon" },
+                React__default["default"].createElement(Spinner.Spinner, { size: size }))))));
+});
+
+exports.ButtonV2 = ButtonV2;