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

package/dist/_shared/esm/{SiteFooter-86f910b4.js → SiteFooter-ef6f0cdc.js}

@@ -1,18 +1,18 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
-import { u as useMediaQuery, A as ArcBreakpointM } from './use-media-query-4c807227.js';
-import { B as BtIconChevronDown2Px } from './BtIconChevronDown2Px.esm-217276c2.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import { S as SemSizeBreakpointsM } from './index.es-3139cf9e.js';
 import React__default, { useEffect, Fragment } from 'react';
-import { B as BrandLogo } from './BrandLogo-1af78f76.js';
-import { C as Curve } from './Curve-e05b3c3f.js';
-import { S as Section } from './Section-73781b56.js';
-import { S as Surface } from './Surface-0ca6817d.js';
+import { B as BrandLogo } from './BrandLogo-7ed8aeda.js';
+import { u as useMediaQuery } from './use-media-query-d3622da8.js';
+import { S as Section } from './Section-1acbc06a.js';
+import { S as Surface } from './Surface-71d21a9e.js';
 import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
+import { T as ThemeIcon } from './ThemeIcon-c2dc41a6.js';
 
 /**
  * Use `SiteFooter` to display information at the bottom of a page.
  */
 var SiteFooter = function (_a) {
-    var children = _a.children, currentYear = _a.currentYear, _b = _a.curve, curve = _b === void 0 ? true : _b, logoLabel = _a.logoLabel, main = _a.main, siteName = _a.siteName, props = __rest(_a, ["children", "currentYear", "curve", "logoLabel", "main", "siteName"]);
+    var children = _a.children, currentYear = _a.currentYear, logoLabel = _a.logoLabel, main = _a.main, siteName = _a.siteName, props = __rest(_a, ["children", "currentYear", "logoLabel", "main", "siteName"]);
     useEffect(function () {
         React__default.Children.map(children, function (item) {
             if (item && item.type !== SiteFooterItem) {
@@ -21,9 +21,8 @@ var SiteFooter = function (_a) {
         });
     }, [children]);
     return (React__default.createElement(React__default.Fragment, null,
-        curve ? (React__default.createElement(Curve, { bottomColor: "brand-flat", from: "topLeft", size: "s" })) : null,
         React__default.createElement("footer", __assign({ className: "arc-SiteFooter" }, filterDataAttrs(props)),
-            React__default.createElement(Surface, { background: "brand-flat", paddingVertical: "24" },
+            React__default.createElement(Surface, { background: "dark-brand-01", paddingVertical: "24" },
                 (siteName || main) && (React__default.createElement(React__default.Fragment, null,
                     React__default.createElement(Section, null,
                         siteName && (React__default.createElement("div", { className: "arc-SiteFooter-name" }, siteName)),
@@ -39,7 +38,7 @@ var SiteFooter = function (_a) {
 };
 var SiteFooterItemGroup = function (_a) {
     var children = _a.children, title = _a.title;
-    var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcBreakpointM, "px)"));
+    var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsM, ")"));
     useEffect(function () {
         React__default.Children.map(children, function (item) {
             if (item && item.type !== SiteFooterItem && item.type !== Fragment) {
@@ -50,7 +49,7 @@ var SiteFooterItemGroup = function (_a) {
     return (React__default.createElement("details", { className: "arc-SiteFooter-disclosure", open: isMinWidthArcBreakpointM },
         React__default.createElement("summary", { className: "arc-SiteFooter-summary", tabIndex: isMinWidthArcBreakpointM ? -1 : 0 },
             React__default.createElement("span", { className: "arc-SiteFooter-icon" },
-                React__default.createElement(BtIconChevronDown2Px, null)),
+                React__default.createElement(ThemeIcon, { icon: "siteFooterExpand" })),
             React__default.createElement("h2", { className: "arc-SiteFooter-title" }, title)),
         React__default.createElement("ul", { className: "arc-SiteFooter-mainItems" }, children)));
 };

package/dist/_shared/esm/{SiteHeaderV2-a7c1b1cb.js → SiteHeaderV2-a041b889.js}

@@ -1,17 +1,18 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
-import { u as useMediaQuery, b as ArcBreakpointL } from './use-media-query-4c807227.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import { b as SemSizeBreakpointsL } from './index.es-3139cf9e.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { useEffect, Fragment, useRef, useState, createContext, useContext } from 'react';
-import { B as BrandLogo } from './BrandLogo-1af78f76.js';
-import { S as Surface } from './Surface-0ca6817d.js';
+import { B as BrandLogo } from './BrandLogo-7ed8aeda.js';
+import { u as useMediaQuery } from './use-media-query-d3622da8.js';
+import { S as Surface } from './Surface-71d21a9e.js';
 import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
-import { B as BtIconChevronRightMid } from './BtIconChevronRightMid.esm-32268f1a.js';
+import { B as BtIconChevronRightMid } from './BtIconChevronRightMid.esm-4764708f.js';
+import './Heading-906c7c7c.js';
 import { C as ConditionalWrapper } from './ConditionalWrapper-59be8f35.js';
-import { B as BtIconChevronLeft2Px, a as BtIconChevronRight2Px } from './BtIconChevronRight2Px.esm-75e92636.js';
-import { B as Button } from './Button-a7d134c6.js';
-import { s as suffixModifier } from './suffix-modifier-3d548e45.js';
-import { T as Text } from './Text-14f586ac.js';
-import { I as Icon } from './Icon-15799695.js';
+import { B as ButtonV2 } from './ButtonV2-49cd0615.js';
+import { s as suffixModifier } from './suffix-modifier-1ce05abe.js';
+import { T as Text } from './Text-a46fb76b.js';
+import { I as Icon } from './Icon-512f834f.js';
 
 var Item = function (_a) {
     var _b;
@@ -28,7 +29,7 @@ var Item = function (_a) {
 
 var ItemGroup = function (_a) {
     var children = _a.children, href = _a.href, title = _a.title, subtitle = _a.subtitle, onClick = _a.onClick, viewAllTitle = _a.viewAllTitle, props = __rest(_a, ["children", "href", "title", "subtitle", "onClick", "viewAllTitle"]);
-    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsL, ")"));
     useEffect(function () {
         React__default.Children.map(children, function (item) {
             if (item && item.type !== Item && item.type !== Fragment) {
@@ -68,6 +69,23 @@ var Column = function (_a) {
         React__default.createElement("ul", { className: "arc-SiteHeaderV2Column-items", role: "none" }, children)));
 };
 
+const BtIconChevronLeft2Px = (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: "M22.5,29.99854a.99676.99676,0,0,1-.707-.293L8.08594,15.99268,21.793,2.294A1.00023,1.00023,0,0,1,23.207,3.709l-12.293,12.28467L23.207,28.2915a1,1,0,0,1-.707,1.707Z",
+      fill: "currentColor",
+    }),
+  );
+
 var BackButton = function (_a) {
     var setOpen = _a.setOpen, setOpenPanelOnFirstClick = _a.setOpenPanelOnFirstClick;
     return (React__default.createElement("button", { className: "arc-SiteHeaderV2BackButton", onClick: function () {
@@ -82,7 +100,7 @@ var BackButton = function (_a) {
 var Panel = function (_a) {
     var _b, _c, _d, _e, _f;
     var children = _a.children, navItemRef = _a.navItemRef, isNavItem = _a.isNavItem, open = _a.open, setOpen = _a.setOpen, setOpenPanelOnFirstClick = _a.setOpenPanelOnFirstClick, subNavItemRef = _a.subNavItemRef; _a.navLink; var _h = _a.subNavLink, subNavLink = _h === void 0 ? "" : _h, title = _a.title, subtitle = _a.subtitle, viewAll = _a.viewAll, withSubNav = _a.withSubNav; _a.fade; var isPrimary = _a.isPrimary, props = __rest(_a, ["children", "navItemRef", "isNavItem", "open", "setOpen", "setOpenPanelOnFirstClick", "subNavItemRef", "navLink", "subNavLink", "title", "subtitle", "viewAll", "withSubNav", "fade", "isPrimary"]);
-    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsL, ")"));
     var menubarRef = useHeaderV2Context().menubarRef;
     useEffect(function () {
         // Where appropriate, close the Panel when clicking outside of it,
@@ -155,7 +173,7 @@ var Panel = function (_a) {
         var handleKeydown = function (e) {
             var _a, _b;
             // Check the viewport width at time of press
-            var isMinWidthArcBreakpointL = window.matchMedia("(min-width: ".concat(ArcBreakpointL, "px)")).matches;
+            var isMinWidthArcBreakpointL = window.matchMedia("(min-width: ".concat(SemSizeBreakpointsL, ")")).matches;
             if (e.key === "Escape" || e.keyCode === 27) {
                 if (isMinWidthArcBreakpointL && subNavItemRef) {
                     // Don't close Panels inside SubNavItems when viewport width is above
@@ -180,7 +198,7 @@ var Panel = function (_a) {
                 _b["arc-SiteHeaderV2Panel--withSubNav"] = withSubNav,
                 _b["arc-SiteHeaderV2Panel-onlyPanel"] = isPrimary && isNavItem,
                 _b)) }, filterDataAttrs(props)),
-            React__default.createElement(Surface, { background: "white" },
+            React__default.createElement(Surface, { background: "light-white" },
                 React__default.createElement(BackButton, { setOpen: setOpen, setOpenPanelOnFirstClick: setOpenPanelOnFirstClick }),
                 React__default.createElement("div", { className: classNames((_c = {},
                         _c["arc-SiteHeaderV2Panel-inner"] = !isNavItem && withSubNav,
@@ -210,21 +228,18 @@ var Panel = function (_a) {
                     withSubNav && viewAll)))));
 };
 var ViewAll = function (_a) {
-    var href = _a.href, title = _a.title, onClick = _a.onClick, fill = _a.fill;
-    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
-    if (fill === "outlined") {
+    var href = _a.href, title = _a.title, onClick = _a.onClick, buttonStyle = _a.buttonStyle;
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsL, ")"));
+    if (buttonStyle === "secondary") {
         return isMinWidthArcBreakpointL ? (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-viewAllOutlined" },
-            React__default.createElement(Button, { fill: fill, label: title !== null && title !== void 0 ? title : "", href: href, onClick: onClick }),
-            " ")) : (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-mobileViewAll arc-SiteHeaderV2Panel-mobileViewAllOutlined" },
+            React__default.createElement(ButtonV2, { buttonStyle: buttonStyle, label: title !== null && title !== void 0 ? title : "", href: href, onClick: onClick }))) : (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-mobileViewAll arc-SiteHeaderV2Panel-mobileViewAllOutlined" },
             React__default.createElement("a", { className: "arc-SiteHeaderV2Item-link", onClick: handleLinkClick({
                     handler: onClick
                 }), href: href }, title)));
     }
     else {
         return isMinWidthArcBreakpointL ? (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-viewAll" },
-            " ",
-            React__default.createElement(Button, { fill: fill, label: title !== null && title !== void 0 ? title : "", isFullWidth: true, href: href, onClick: onClick }),
-            " ")) : (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-mobileViewAll" },
+            React__default.createElement(ButtonV2, { buttonStyle: buttonStyle, label: title !== null && title !== void 0 ? title : "", isFullWidth: true, href: href, onClick: onClick }))) : (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-mobileViewAll" },
             React__default.createElement("a", { className: "arc-SiteHeaderV2Item-link", onClick: handleLinkClick({
                     handler: onClick
                 }), href: href }, title)));
@@ -232,6 +247,23 @@ var ViewAll = function (_a) {
 };
 Panel.ViewAll = ViewAll;
 
+const BtIconChevronRight2Px = (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: "M9.5,29.99854A1.00025,1.00025,0,0,1,8.793,28.291l12.293-12.28467L8.793,3.7085A.99989.99989,0,0,1,10.207,2.29443l13.707,13.71289L10.207,29.70605A.99827.99827,0,0,1,9.5,29.99854Z",
+      fill: "currentColor",
+    }),
+  );
+
 var NavItem = function (_a) {
     var _b, _c, _d, _e, _f;
     var children = _a.children, href = _a.href, isCurrent = _a.isCurrent, onClick = _a.onClick, title = _a.title; _a.viewAllTitle; var isPrimary = _a.isPrimary, opensFirstWithPanel = _a.opensFirstWithPanel, subTitle = _a.subTitle, props = __rest(_a, ["children", "href", "isCurrent", "onClick", "title", "viewAllTitle", "isPrimary", "opensFirstWithPanel", "subTitle"]);
@@ -239,7 +271,7 @@ var NavItem = function (_a) {
     var _g = useState(false), panelOpen = _g[0], setPanelOpen = _g[1];
     var _h = useState(true), openSecondaryWithSubNav = _h[0], setOpenSecondaryWithSubNav = _h[1];
     var _j = useState(false), animation = _j[0], setAnimation = _j[1];
-    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsL, ")"));
     useEffect(function () {
         React__default.Children.map(children, function (item) {
             if (item &&
@@ -293,7 +325,7 @@ var NavItem = function (_a) {
                         _f)) }))),
         React__default.createElement(Panel, { navItemRef: navItem, isNavItem: true, isPrimary: isPrimary, open: opensFirstWithPanel && isMinWidthArcBreakpointL
                 ? openSecondaryWithSubNav
-                : panelOpen, setOpenPanelOnFirstClick: setOpenSecondaryWithSubNav, setOpen: setPanelOpen, fade: animation, viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: "See all solutions", fill: "solid" })) : undefined }, children)))));
+                : panelOpen, setOpenPanelOnFirstClick: setOpenSecondaryWithSubNav, setOpen: setPanelOpen, fade: animation, viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: "See all solutions", buttonStyle: "primary" })) : undefined }, children)))));
 };
 
 var HorizontalPanel = function (_a) {
@@ -321,7 +353,7 @@ var HorizontalPanel = function (_a) {
     useEffect(function () {
         var handleKeydown = function (e) {
             // Check the viewport width at time of press
-            var isMinWidthArcBreakpointL = window.matchMedia("(min-width: ".concat(ArcBreakpointL, "px)")).matches;
+            var isMinWidthArcBreakpointL = window.matchMedia("(min-width: ".concat(SemSizeBreakpointsL, ")")).matches;
             if (e.key === "Escape" || e.keyCode === 27) {
                 if (isMinWidthArcBreakpointL && subNavItemRef) {
                     // Don't close Panels inside SubNavItems when viewport width is above
@@ -341,7 +373,7 @@ var HorizontalPanel = function (_a) {
             _b["arc-SiteHeaderV2HorizontalPanel--open"] = open,
             _b["arc-SiteHeaderV2HorizontalPanel--withSubNav"] = withSubNav,
             _b)) }, filterDataAttrs(props)),
-        React__default.createElement(Surface, { background: "light" },
+        React__default.createElement(Surface, { background: "light-neutral-02" },
             React__default.createElement("div", { className: classNames((_c = {},
                     _c["arc-SiteHeaderV2HorizontalPanel-container"] = true,
                     _c)) },
@@ -364,7 +396,7 @@ var NavItemWithSubNav = function (_a) {
     var _k = useState(false), horizontalPanelOpen = _k[0], setHorizontalPanelOpen = _k[1];
     var _l = useState(false), animation = _l[0], setAnimation = _l[1];
     var _m = useState(true), openSecondaryWithSubNav = _m[0], setOpenSecondaryWithSubNav = _m[1];
-    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsL, ")"));
     useEffect(function () {
         React__default.Children.map(slot1, function (item) {
             if (item.props.isDefaultItem) {
@@ -448,7 +480,7 @@ var NavItemWithSubNav = function (_a) {
                 slot5)),
             React__default.createElement(Panel, { navItemRef: navItem, open: opensFirstWithPanel && isMinWidthArcBreakpointL
                     ? openSecondaryWithSubNav
-                    : panelOpen, fade: animation, setOpenPanelOnFirstClick: setOpenSecondaryWithSubNav, setOpen: setPanelOpen, title: !isMinWidthArcBreakpointL && title, subtitle: subTitle, navLink: "", viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onViewAllClick, title: viewAllTitle, fill: "solid" })) : undefined, withSubNav: true, isNavItem: false },
+                    : panelOpen, fade: animation, setOpenPanelOnFirstClick: setOpenSecondaryWithSubNav, setOpen: setPanelOpen, title: !isMinWidthArcBreakpointL && title, subtitle: subTitle, navLink: "", viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onViewAllClick, title: viewAllTitle, buttonStyle: "primary" })) : undefined, withSubNav: true, isNavItem: false },
                 defaultItem
                     ? React__default.cloneElement(slot1, { isDefaultItem: defaultItem })
                     : slot1,
@@ -485,7 +517,7 @@ var SubNavItem = function (_a) {
     var subNavItem = useRef();
     var _e = useState(false), panelOpen = _e[0], setPanelOpen = _e[1];
     var _f = useState(false), fade = _f[0], setFade = _f[1];
-    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsL, ")"));
     useEffect(function () {
         React__default.Children.map(children, function (item) {
             if (item &&
@@ -531,7 +563,7 @@ var SubNavItem = function (_a) {
                 React__default.createElement("span", { "data-cy": "linkTitle", className: "arc-SiteHeaderV2SubNavItem-linkSlotTitle" }, linkTitle))),
         React__default.createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, setOpenPanelOnFirstClick: function () { }, subNavLink: "arc-SiteHeaderV2SubNavItem-link", title: React__default.createElement("span", null,
                 title,
-                subTitle && (React__default.createElement(Text, { size: "xs", tone: "supporting" }, subTitle))), viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "See all ".concat(title), fill: "outlined" })) : undefined, isNavItem: false, fade: fade }, children)))));
+                subTitle && (React__default.createElement(Text, { size: "xs", tone: "supporting" }, subTitle))), viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "See all ".concat(title), buttonStyle: "secondary" })) : undefined, isNavItem: false, fade: fade }, children)))));
 };
 
 var VerticalDivider = function () {
@@ -549,7 +581,7 @@ var SiteHeaderV2 = function (_a) {
     var children = _a.children, basket = _a.basket, _c = _a.hasLogin, hasLogin = _c === void 0 ? true : _c, _d = _a.isTransparent, isTransparent = _d === void 0 ? false : _d, _e = _a.loginHref, loginHref = _e === void 0 ? "/login" : _e, logoOnClick = _a.logoOnClick, loginOnClick = _a.loginOnClick, _f = _a.loginTitle, loginTitle = _f === void 0 ? "Log in / Register" : _f, _g = _a.logoHref, logoHref = _g === void 0 ? "/" : _g, _h = _a.logoLabel, logoLabel = _h === void 0 ? "Home" : _h, search = _a.search, subBrand = _a.subBrand, props = __rest(_a, ["children", "basket", "hasLogin", "isTransparent", "loginHref", "logoOnClick", "loginOnClick", "loginTitle", "logoHref", "logoLabel", "search", "subBrand"]);
     var _j = useState(false), hasClientSideJavaScript = _j[0], setHasClientSideJavaScript = _j[1];
     var _k = useState(false), menuOpen = _k[0], setMenuOpen = _k[1];
-    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsL, ")"));
     var menubarRef = useRef();
     useEffect(function () {
         React__default.Children.map(children, function (item) {
@@ -610,7 +642,7 @@ var SiteHeaderV2 = function (_a) {
                 _b["arc-no-js"] = !hasClientSideJavaScript,
                 _b)) }, filterDataAttrs(props), { "data-transparent": isTransparent || null }),
             React__default.createElement(Surface, { background: !isTransparent || (menuOpen && !isMinWidthArcBreakpointL)
-                    ? "brand-flat"
+                    ? "dark-brand-01"
                     : undefined },
                 React__default.createElement("div", { className: "arc-SiteHeaderV2-inner" },
                     React__default.createElement("a", { className: "arc-SiteHeaderV2-brand", onClick: handleLinkClick({

package/dist/_shared/esm/{Surface-0ca6817d.js → Surface-71d21a9e.js}

@@ -1,4 +1,4 @@
-import { b as __spreadArray, _ as __rest, a as __assign, c as camelCase, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
+import { b as __spreadArray, _ as __rest, a as __assign, c as camelcase, f as filterDataAttrs } from './index-288c66b5.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { createContext } from 'react';
 
@@ -12,18 +12,18 @@ var Surface = function (_a) {
     var _b;
     var background = _a.background, children = _a.children, _c = _a.growVertically, growVertically = _c === void 0 ? false : _c, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, props = __rest(_a, ["background", "children", "growVertically", "padding", "paddingHorizontal", "paddingVertical"]);
     var surface = "light";
-    if (background === "black" ||
-        background === "brand" ||
-        background === "brand-flat" ||
-        background === "dark" ||
-        background === "darker") {
+    if (background === "dark-black" ||
+        background === "dark-brand-01" ||
+        background === "dark-brand-02" ||
+        background === "dark-neutral-01" ||
+        background === "dark-neutral-02") {
         surface = "dark";
     }
     return (React__default.createElement(Provider, { value: { surface: surface } },
         React__default.createElement("div", __assign({ "data-testid": "arc-surface", className: classNames((_b = {
                     "arc-Surface": true
                 },
-                _b["arc-Surface--".concat(background && camelCase(background), "Background")] = background,
+                _b["arc-Surface--".concat(background && camelcase(background), "Background")] = background,
                 _b["arc-Surface--growVertically"] = growVertically,
                 _b["arc-Surface--padding".concat(padding)] = padding,
                 _b["arc-Surface--paddingHorizontal".concat(paddingHorizontal)] = paddingHorizontal,
@@ -31,16 +31,16 @@ var Surface = function (_a) {
                 _b)) }, filterDataAttrs(props)), children)));
 };
 var backgroundsShared = [
-    "black",
-    "brand",
-    "brand-flat",
-    "dark",
-    "darker",
-    "coral",
-    "turquoise",
-    "light",
-    "lighter",
-    "white",
+    "dark-black",
+    "dark-brand-01",
+    "dark-brand-02",
+    "dark-neutral-01",
+    "dark-neutral-02",
+    "light-brand-01",
+    "light-brand-02",
+    "light-neutral-01",
+    "light-neutral-02",
+    "light-white",
 ];
 var backgrounds = __spreadArray([], backgroundsShared, true);
 var backgroundsBT = __spreadArray([], backgroundsShared, true);

package/dist/_shared/esm/{Tabs-9485cab6.js → Tabs-21ac7dfe.js}

@@ -1,15 +1,14 @@
-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, { forwardRef, createElement, useRef, useState, useEffect, useCallback, useContext } from 'react';
-import { _ as _extends } from './extends-8cc61aad.js';
-import { $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, b as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, a as $71cd76cc60e0454e$export$6f32135080cb4c3, f as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a, e as $8927f6f2acc4f386$export$250ffa63cdc0d034, d as $e42e1063c40fb3ef$export$b9ecd428b558ff10 } from './index-7b531fa7.js';
-import { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from './index-044da8d0.js';
-import { $ as $1746a345f3d73bb7$export$f680877a34711e37 } from './index-efa9be1a.js';
+import { $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, _ as _extends, b as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, a as $71cd76cc60e0454e$export$6f32135080cb4c3, f as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a, e as $8927f6f2acc4f386$export$250ffa63cdc0d034, d as $e42e1063c40fb3ef$export$b9ecd428b558ff10 } from './index-cace3545.js';
+import { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from './index-f97466e9.js';
+import { $ as $1746a345f3d73bb7$export$f680877a34711e37 } from './index-7740883c.js';
 import { $ as $f631663db3294ace$export$b39126d51d94e6f3 } from './index-a624de47.js';
-import { $ as $921a889cee6df7e8$export$99c2b779aa4e8b8b } from './index-ca72c9d5.js';
-import { I as Icon } from './Icon-15799695.js';
-import { C as Context } from './Surface-0ca6817d.js';
+import { $ as $921a889cee6df7e8$export$99c2b779aa4e8b8b } from './index-fa93ec97.js';
+import { I as Icon } from './Icon-512f834f.js';
+import { C as Context } from './Surface-71d21a9e.js';
 import { c as classNames } from './index-2e73c2e9.js';
-import { B as BtIconArrowRightFill } from './BtIconArrowRightFill.esm-99019d1a.js';
+import { T as ThemeIcon } from './ThemeIcon-c2dc41a6.js';
 
 const $d7bdfb9eb0fdf311$var$ENTRY_FOCUS = 'rovingFocusGroup.onEntryFocus';
 const $d7bdfb9eb0fdf311$var$EVENT_OPTIONS = {
@@ -389,7 +388,7 @@ var Tab = function (_a) {
             React__default.createElement(Icon, { icon: icon }))),
         iconActive && (React__default.createElement("div", { className: "arc-Tab-triggerIcon arc-Tab-triggerIcon--active", "data-testid": "arc-Tab-TriggerIconActive" },
             React__default.createElement(Icon, { icon: iconActive }))),
-        label));
+        React__default.createElement("span", { className: "arc-Tab-triggerText" }, label)));
 };
 
 var TabContent = function (_a) {
@@ -397,23 +396,6 @@ var TabContent = function (_a) {
     return (React__default.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { className: "arc-Tab-content", value: value }, children));
 };
 
-const BtIconArrowLeftFill = (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: "M30,16A14,14,0,1,0,16,30,14,14,0,0,0,30,16ZM13.14648,20.35352,8.793,16l4.35351-4.35352a.5.5,0,0,1,.707.707L10.707,15.5H22.5a.5.5,0,0,1,0,1H10.707l3.14649,3.14648a.5.5,0,0,1-.707.707Z",
-      fill: "currentColor",
-    }),
-  );
-
 var TabsList = function (_a) {
     var children = _a.children, type = _a.type, isJustified = _a.isJustified, ariaLabel = _a.ariaLabel, props = __rest(_a, ["children", "type", "isJustified", "ariaLabel"]);
     var surface = useContext(Context).surface;
@@ -457,11 +439,11 @@ var TabsList = function (_a) {
         leftOverflow && (React__default.createElement("button", { className: classNames("arc-Tabs-overflowIcon arc-Tabs-overflowIcon--left", {
                 "arc-Tabs-overflowIcon--onDarkSurface": surface === "dark"
             }), onClick: function () { return scrollTabs(-300); }, "aria-label": "Scroll Tabs Left", "data-testid": "arc-Tabs-overflowIconLeft" },
-            React__default.createElement(Icon, { icon: BtIconArrowLeftFill, size: 40, color: "brand" }))),
+            React__default.createElement(ThemeIcon, { icon: "tabsPrevious", size: 40, color: "brand" }))),
         rightOverflow && (React__default.createElement("button", { className: classNames("arc-Tabs-overflowIcon", {
                 "arc-Tabs-overflowIcon--onDarkSurface": surface === "dark"
             }), onClick: function () { return scrollTabs(300); }, "aria-label": "Scroll Tabs Right", "data-testid": "arc-Tabs-overflowIconRight" },
-            React__default.createElement(Icon, { icon: BtIconArrowRightFill, size: 40, color: "brand" })))));
+            React__default.createElement(ThemeIcon, { icon: "tabsNext", size: 40, color: "brand" })))));
 };
 
 /** Use `Tabs` to allow users to navigate between different sections of relevant content. */

package/dist/_shared/esm/{Tag-cb35d57b.js → Tag-2513c185.js}

@@ -1,60 +1,20 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
-import React__default, { useContext, useState } from 'react';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-288c66b5.js';
+import React__default, { useState } from 'react';
 import { c as classNames } from './index-2e73c2e9.js';
-import { C as Context } from './Surface-0ca6817d.js';
-import { I as Icon } from './Icon-15799695.js';
-
-const BtIconCross = (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: "M20.85352,11.14648a.49983.49983,0,0,0-.707,0L16,15.293l-4.14648-4.14649a.5.5,0,0,0-.707.707L15.293,16l-4.14649,4.14648a.5.5,0,1,0,.707.707L16,16.707l4.14648,4.14649a.5.5,0,0,0,.707-.707L16.707,16l4.14649-4.14648A.49983.49983,0,0,0,20.85352,11.14648Z",
-      fill: "currentColor",
-    }),
-  );
-
-const BtIconCrossFill = (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,2Zm4.85352,18.14648a.5.5,0,1,1-.707.707L16,16.707l-4.14648,4.14649a.5.5,0,0,1-.707-.707L15.293,16l-4.14649-4.14648a.5.5,0,0,1,.707-.707L16,15.293l4.14648-4.14649a.5.5,0,0,1,.707.707L16.707,16Z",
-      fill: "currentColor",
-    }),
-  );
+import { I as Icon } from './Icon-512f834f.js';
+import { T as ThemeIcon } from './ThemeIcon-c2dc41a6.js';
 
 /**
  * Use `Tag` to promote features and manage filtering.
  */
 var Tag = function (_a) {
     var children = _a.children, isRemovable = _a.isRemovable, link = _a.link, icon = _a.icon, onClick = _a.onClick, onRemove = _a.onRemove, title = _a.title, props = __rest(_a, ["children", "isRemovable", "link", "icon", "onClick", "onRemove", "title"]);
-    var surface = useContext(Context).surface;
     var _b = useState(false), isRemoved = _b[0], setIsRemoved = _b[1];
     var onRemoveHandler = function () {
         setIsRemoved(function (p) { return !p; });
         onRemove && onRemove();
     };
     return (React__default.createElement("div", __assign({ className: classNames("arc-Tag", {
-            "arc-Tag--onDarkSurface": surface === "dark",
             "arc-Tag--isRemovable": isRemovable,
             "arc-Tag--hasIcon": icon,
             "arc-Tag--hasLink": link || onClick,
@@ -71,8 +31,8 @@ var Tag = function (_a) {
                 React__default.createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
             React__default.createElement("div", { className: "arc-Tag-label", title: title }, children))))),
         isRemovable && (React__default.createElement("button", { className: "arc-Tag-icon arc-Tag-icon--removable", onClick: onRemoveHandler, "data-testid": "arc-Tag-icon-removable", "aria-live": "polite", "aria-roledescription": "remove tag" },
-            React__default.createElement(Icon, { icon: BtIconCross, color: "brand", size: 20 }),
-            React__default.createElement(Icon, { icon: BtIconCrossFill, color: "brand", size: 20 })))));
+            React__default.createElement(ThemeIcon, { icon: "tagRemove", color: "brand", size: 20 }),
+            React__default.createElement(ThemeIcon, { icon: "tagRemoveInteractive", color: "brand", size: 20 })))));
 };
 
 export { Tag as T };

package/dist/_shared/esm/{Text-14f586ac.js → Text-a46fb76b.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 `Text` to display text.

package/dist/_shared/esm/{TextInput-c0388103.js → TextInput-94c7b1a4.js}

@@ -1,10 +1,10 @@
-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, useState } from 'react';
-import { u as useAriaDescribedby, F as FormControl } from './FormControl-8e836656.js';
-import { C as Context } from './Surface-0ca6817d.js';
+import { u as useAriaDescribedby, F as FormControl } from './FormControl-d873f7fa.js';
+import { C as Context } from './Surface-71d21a9e.js';
 import { V as VisuallyHidden } from './VisuallyHidden-06692fd3.js';
-import { I as Icon } from './Icon-15799695.js';
+import { I as Icon } from './Icon-512f834f.js';
 
 /**
  * Infer the correct inputMode, pattern and type if specifying a `number` type.

package/dist/_shared/esm/ThemeIcon-c2dc41a6.js

@@ -0,0 +1,21 @@
+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-1ce05abe.js';
+import { C as Context } from './Surface-71d21a9e.js';
+
+var ThemeIcon = function (_a) {
+    var _b;
+    var size = _a.size, icon = _a.icon, _c = _a.color, color = _c === void 0 ? "auto" : _c, props = __rest(_a, ["size", "icon", "color"]);
+    var surface = useContext(Context).surface;
+    return (React__default.createElement("span", __assign({ style: {
+            height: size,
+            width: size
+        }, className: classNames("arc-ThemeIcon", "arc-ThemeIcon--".concat(icon), (_b = {
+                "arc-ThemeIcon--onDarkSurface": surface === "dark"
+            },
+            _b[suffixModifier("arc-ThemeIcon--color", color)] = color !== "auto",
+            _b)) }, filterDataAttrs(props))));
+};
+
+export { ThemeIcon as T };

package/dist/_shared/esm/{Toast-fcbfc194.js → Toast-de6ca2f3.js}

@@ -1,17 +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 React__default, { forwardRef, useContext, useState, useEffect, createElement, useRef, createContext, useCallback, useMemo, Fragment } from 'react';
-import { _ as _extends } from './extends-8cc61aad.js';
-import $7SXl2$reactdom__default, { createPortal } from 'react-dom';
-import { b as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, e as $8927f6f2acc4f386$export$250ffa63cdc0d034, d as $e42e1063c40fb3ef$export$b9ecd428b558ff10, f as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a, g as $8927f6f2acc4f386$export$6d1a0317bde7de7f, $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, h as $9f79659886946c16$export$e5c5a5f917a5871c, a as $71cd76cc60e0454e$export$6f32135080cb4c3 } from './index-7b531fa7.js';
-import { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from './index-044da8d0.js';
-import { $ as $addc16e1bbe58fd0$export$3a72a57244d6e765 } from './index-2cfab9f2.js';
-import { $ as $921a889cee6df7e8$export$99c2b779aa4e8b8b } from './index-ca72c9d5.js';
-import { $ as $ea1ef594cf570d83$export$439d29a4e110a164 } from './index-25a5b393.js';
+import { b as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, e as $8927f6f2acc4f386$export$250ffa63cdc0d034, _ as _extends, d as $e42e1063c40fb3ef$export$b9ecd428b558ff10, f as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a, g as $8927f6f2acc4f386$export$6d1a0317bde7de7f, $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, h as $9f79659886946c16$export$e5c5a5f917a5871c, a as $71cd76cc60e0454e$export$6f32135080cb4c3 } from './index-cace3545.js';
+import ReactDOM__default, { createPortal } from 'react-dom';
+import { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from './index-f97466e9.js';
+import { $ as $addc16e1bbe58fd0$export$3a72a57244d6e765 } from './index-6028d797.js';
+import { $ as $921a889cee6df7e8$export$99c2b779aa4e8b8b } from './index-fa93ec97.js';
+import { $ as $ea1ef594cf570d83$export$439d29a4e110a164 } from './index-5113ed53.js';
 import { c as classNames } from './index-2e73c2e9.js';
-import { B as BtIconCrossAlt2Px } from './BtIconCrossAlt2Px.esm-7165ab1a.js';
-import { B as BtIconNotification, a as BtIconAlertTriangle, b as BtIconTick } from './BtIconTick.esm-e265098f.js';
-import { B as BtIconAlert } from './BtIconAlert.esm-a4608d47.js';
-import { I as Icon } from './Icon-15799695.js';
+import { T as ThemeIcon } from './ThemeIcon-c2dc41a6.js';
 
 const $5cb92bef7577960e$var$CONTEXT_UPDATE = 'dismissableLayer.update';
 const $5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';
@@ -265,7 +261,7 @@ const $5cb92bef7577960e$export$aecb2ddcb55c95be = $5cb92bef7577960e$export$4d5eb
 const $f1701beae083dbae$export$602eac185826482c = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     var _globalThis$document;
     const { container: container = globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$document = globalThis.document) === null || _globalThis$document === void 0 ? void 0 : _globalThis$document.body , ...portalProps } = props;
-    return container ? /*#__PURE__*/ $7SXl2$reactdom__default.createPortal(/*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({}, portalProps, {
+    return container ? /*#__PURE__*/ ReactDOM__default.createPortal(/*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({}, portalProps, {
         ref: forwardedRef
     })), container) : null;
 });
@@ -930,10 +926,10 @@ const $054eb8030ebde76e$export$f39c2d165cd861fe = $054eb8030ebde76e$export$811e7
 var ToastNotification = function (_a) {
     var link = _a.link, title = _a.title, isOpen = _a.isOpen, onOpenChange = _a.onOpenChange, _b = _a.isStatusIconVisible, isStatusIconVisible = _b === void 0 ? true : _b, _c = _a.isCloseButtonVisible, isCloseButtonVisible = _c === void 0 ? true : _c, _d = _a.status, status = _d === void 0 ? "general" : _d, props = __rest(_a, ["link", "title", "isOpen", "onOpenChange", "isStatusIconVisible", "isCloseButtonVisible", "status"]);
     var statusIcons = {
-        general: BtIconNotification,
-        error: BtIconAlertTriangle,
-        warning: BtIconAlert,
-        success: BtIconTick
+        general: "toastGeneral",
+        error: "toastError",
+        warning: "toastWarning",
+        success: "toastSuccess"
     };
     var handleLinkClick = function (handler) { return function (event) {
         event.preventDefault();
@@ -942,13 +938,13 @@ var ToastNotification = function (_a) {
     return (React__default.createElement($054eb8030ebde76e$export$be92b6f5f03c0fe9, __assign({ className: "arc-Toast-root", open: isOpen, onOpenChange: onOpenChange }, filterDataAttrs(props)),
         React__default.createElement("div", { "data-testid": "toast-notification-wrapper", className: classNames("arc-Toast", "arc-Toast-status--".concat(status)) },
             isStatusIconVisible && (React__default.createElement("div", { "data-testid": "status-icon", className: "arc-Toast-icon" },
-                React__default.createElement(Icon, { size: 24, icon: statusIcons[status] }))),
+                React__default.createElement(ThemeIcon, { size: 24, icon: statusIcons[status] }))),
             React__default.createElement($054eb8030ebde76e$export$f99233281efd08a0, { className: "arc-Toast-title" },
                 React__default.createElement("span", null, title)),
             link && (React__default.createElement($054eb8030ebde76e$export$e19cd5f9376f8cee, { className: "arc-Toast-action", asChild: true, altText: link.text },
                 React__default.createElement("a", __assign({ className: "arc-Toast-link", href: link.href, "aria-label": link.ariaLabel }, (link.onClick && { onClick: handleLinkClick(link.onClick) })), link.text))),
             isCloseButtonVisible && !link && (React__default.createElement($054eb8030ebde76e$export$f39c2d165cd861fe, { className: "arc-Toast-dismiss", "aria-label": "Close" },
-                React__default.createElement(Icon, { icon: BtIconCrossAlt2Px, size: 24 }))))));
+                React__default.createElement(ThemeIcon, { icon: "toastDismiss", size: 24 }))))));
 };
 
 /** Use `Toast` to display temporary messages at the bottom of the screen. */