@arc-ui/components 11.13.0 → 12.0.0-alpha.0

package/dist/_shared/esm/{SiteHeader.rehydrator-8f554bfd.js → SiteHeader.rehydrator-97900e11.js}

@@ -1,13 +1,12 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs, d as __awaiter, e as __generator } from './filter-data-attrs-ea8f4ed4.js';
 import React__default, { useState, useEffect, Fragment, useContext, useRef, createContext } from 'react';
 import { c as classNames } from './index-2e73c2e9.js';
+import { S as Surface } from './Surface-0ca6817d.js';
 import { u as useMediaQuery, a as ArcBreakpointL } from './index.es-00cb3bcb.js';
-import { B as BtIconChevronDown2Px } from './BtIconChevronDown2Px.esm-217276c2.js';
 import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
-import { a as BtIconChevronRight2Px, B as BtIconChevronLeft2Px } from './BtIconChevronRight2Px.esm-75e92636.js';
-import { S as Surface } from './Surface-0ca6817d.js';
+import { T as ThemeIcon } from './ThemeIcon-eab5a4d0.js';
 import { B as BrandLogo } from './BrandLogo-1af78f76.js';
-import { B as Button } from './Button-a453e8e4.js';
+import { B as Button } from './Button-c3348ed8.js';
 import { s as suffixModifier } from './suffix-modifier-3d548e45.js';
 import { T as Text } from './Text-14f586ac.js';
 
@@ -20,7 +19,7 @@ var Item = function (_a) {
             _b)) }, filterDataAttrs(props)),
         React__default.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderItem-link", href: href },
             isEmphasised && (React__default.createElement("span", { className: "arc-SiteHeaderItem-linkIcon" },
-                React__default.createElement(BtIconChevronRight2Px, null))),
+                React__default.createElement(ThemeIcon, { icon: "siteHeaderLink" }))),
             children)));
 };
 
@@ -50,7 +49,7 @@ var ItemGroup = function (_a) {
                 }), className: "arc-SiteHeaderItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL ? 0 : -1 },
                 title,
                 React__default.createElement("span", { className: "arc-SiteHeaderItemGroup-titleIcon" },
-                    React__default.createElement(BtIconChevronDown2Px, null)))) : (React__default.createElement("div", { className: "arc-SiteHeaderItemGroup-title" }, title)))) : null,
+                    React__default.createElement(ThemeIcon, { icon: "siteHeaderItemGroupExpand" })))) : (React__default.createElement("div", { className: "arc-SiteHeaderItemGroup-title" }, title)))) : null,
             React__default.createElement("ul", { className: "arc-SiteHeaderItemGroup-items" },
                 children,
                 href && title ? (React__default.createElement("li", { className: "arc-SiteHeaderItem arc-SiteHeaderItem--viewAll" },
@@ -108,7 +107,7 @@ var BackButton = function (_a) {
             setOpen(false);
         } },
         React__default.createElement("span", { className: "arc-SiteHeaderBackButton-icon" },
-            React__default.createElement(BtIconChevronLeft2Px, null)),
+            React__default.createElement(ThemeIcon, { icon: "siteHeaderBack" })),
         React__default.createElement("span", { className: "arc-SiteHeaderBackButton-text" }, "Back")));
 };
 
@@ -192,7 +191,7 @@ var ViewAll = function (_a) {
     return (React__default.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderPanel-viewAll", href: href },
         title,
         React__default.createElement("span", { className: "arc-SiteHeaderPanel-viewAllIcon" },
-            React__default.createElement(BtIconChevronRight2Px, null))));
+            React__default.createElement(ThemeIcon, { icon: "siteHeaderViewAll" }))));
 };
 Panel.ViewAll = ViewAll;
 
@@ -226,7 +225,10 @@ var NavItem = function (_a) {
                 setPanelOpen(!panelOpen);
             } },
             React__default.createElement("span", null, title),
-            React__default.createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" }, isMinWidthArcBreakpointL ? (React__default.createElement(BtIconChevronDown2Px, null)) : (React__default.createElement(BtIconChevronRight2Px, null)))),
+            React__default.createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" },
+                React__default.createElement(ThemeIcon, { icon: isMinWidthArcBreakpointL
+                        ? "siteHeaderNavItemExpand"
+                        : "siteHeaderNavItemExpandAlt" }))),
         React__default.createElement(Panel, { navItemRef: navItem, open: panelOpen, promo: promo, setOpen: setPanelOpen, viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : undefined }, children)))));
 };
 
@@ -313,7 +315,7 @@ var SubNavItem = function (_a) {
             } },
             linkTitle,
             children && (React__default.createElement("span", { className: "arc-SiteHeaderSubNavItem-linkIcon" },
-                React__default.createElement(BtIconChevronRight2Px, null)))),
+                React__default.createElement(ThemeIcon, { icon: "siteHeaderSubNavOpen" })))),
         React__default.createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, subNavLink: "arc-SiteHeaderSubNavItem-link", promo: promo, 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 || "View all ".concat(title.toLowerCase()) })) : undefined }, children)))));
@@ -424,7 +426,10 @@ var NavItemWithSubNav = function (_a) {
                     setPanelOpen(!panelOpen);
                 } },
                 title,
-                React__default.createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" }, isMinWidthArcBreakpointL ? (React__default.createElement(BtIconChevronDown2Px, null)) : (React__default.createElement(BtIconChevronRight2Px, null)))),
+                React__default.createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" },
+                    React__default.createElement(ThemeIcon, { icon: isMinWidthArcBreakpointL
+                            ? "siteHeaderNavItemExpand"
+                            : "siteHeaderNavItemExpandAlt" }))),
             React__default.createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, title: subTitle, viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onViewAllClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : undefined, withSubNav: true },
                 defaultItem
                     ? React__default.cloneElement(slot1, { isDefaultItem: defaultItem })

package/dist/_shared/esm/{Tabs-f903187a.js → Tabs-39d24a7d.js}

@@ -1,12 +1,13 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
 import React__default, { useContext, createContext, forwardRef, createElement, useRef, useState, useEffect, useCallback } from 'react';
 import { _ as _extends } from './extends-8cc61aad.js';
-import { c as $c512c27ab02ef895$export$50c7b4e9d9f19c1, a as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, d as $71cd76cc60e0454e$export$6f32135080cb4c3, $ as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a, b as $8927f6f2acc4f386$export$250ffa63cdc0d034, g as $e42e1063c40fb3ef$export$b9ecd428b558ff10, e as $921a889cee6df7e8$export$99c2b779aa4e8b8b } from './index-13d575cc.js';
-import { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from './index-a1d2d9b3.js';
-import { $ as $1746a345f3d73bb7$export$f680877a34711e37 } from './index-efd9ef1c.js';
-import { I as Icon } from './Icon-abd0d990.js';
+import { c as $c512c27ab02ef895$export$50c7b4e9d9f19c1, a as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, d as $71cd76cc60e0454e$export$6f32135080cb4c3, $ as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a, b as $8927f6f2acc4f386$export$250ffa63cdc0d034, g as $e42e1063c40fb3ef$export$b9ecd428b558ff10, e as $921a889cee6df7e8$export$99c2b779aa4e8b8b } from './index-87a828b8.js';
+import { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from './index-65264b4e.js';
+import { $ as $1746a345f3d73bb7$export$f680877a34711e37 } from './index-3147c5b0.js';
+import { I as Icon } from './Icon-9ecaaeab.js';
 import { C as Context } from './Surface-0ca6817d.js';
 import { c as classNames } from './index-2e73c2e9.js';
+import { T as ThemeIcon } from './ThemeIcon-eab5a4d0.js';
 
 const $f631663db3294ace$var$DirectionContext = /*#__PURE__*/ createContext(undefined);
 /* -----------------------------------------------------------------------------------------------*/ function $f631663db3294ace$export$b39126d51d94e6f3(localDir) {
@@ -392,7 +393,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) {
@@ -400,40 +401,6 @@ var TabContent = function (_a) {
     return (React__default.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { className: "arc-Tab-content", value: value }, children));
 };
 
-const BtIconArrowRightFill = (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: "M2,16A14,14,0,1,0,16,2,14,14,0,0,0,2,16Zm16.85352-4.35352L23.207,16l-4.35351,4.35352a.5.5,0,0,1-.707-.707L21.293,16.5H9.5a.5.5,0,0,1,0-1H21.293l-3.14649-3.14648a.5.5,0,0,1,.707-.707Z",
-      fill: "currentColor",
-    }),
-  );
-
-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;
@@ -477,11 +444,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" })))));
 };
 
 var Tabs = function (_a) {

package/dist/_shared/esm/{TextInput-991804b6.js → TextInput-28f18769.js}

@@ -1,7 +1,7 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.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-351e5f1b.js';
+import { u as useAriaDescribedby, F as FormControl } from './FormControl-433228f5.js';
 import { C as Context } from './Surface-0ca6817d.js';
 import { V as VisuallyHidden } from './VisuallyHidden-b9eebf71.js';
 

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

@@ -0,0 +1,21 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.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';
+
+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-37549e68.js → Toast-dce2d01e.js}

@@ -2,14 +2,11 @@ import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-
 import React__default, { forwardRef, createElement, useState, useRef, useCallback, useEffect, useMemo, Fragment } from 'react';
 import { _ as _extends } from './extends-8cc61aad.js';
 import { createPortal } from 'react-dom';
-import { b as $8927f6f2acc4f386$export$250ffa63cdc0d034, c as $c512c27ab02ef895$export$50c7b4e9d9f19c1, a as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, $ as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a, g as $e42e1063c40fb3ef$export$b9ecd428b558ff10, h as $9f79659886946c16$export$e5c5a5f917a5871c, d as $71cd76cc60e0454e$export$6f32135080cb4c3, e as $921a889cee6df7e8$export$99c2b779aa4e8b8b, i as $8927f6f2acc4f386$export$6d1a0317bde7de7f } from './index-13d575cc.js';
-import { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from './index-a1d2d9b3.js';
-import { b as $5cb92bef7577960e$export$aecb2ddcb55c95be, c as $5cb92bef7577960e$export$be92b6f5f03c0fe9, $ as $f1701beae083dbae$export$602eac185826482c } from './index-3797d77e.js';
+import { b as $8927f6f2acc4f386$export$250ffa63cdc0d034, c as $c512c27ab02ef895$export$50c7b4e9d9f19c1, a as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, $ as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a, g as $e42e1063c40fb3ef$export$b9ecd428b558ff10, h as $9f79659886946c16$export$e5c5a5f917a5871c, d as $71cd76cc60e0454e$export$6f32135080cb4c3, e as $921a889cee6df7e8$export$99c2b779aa4e8b8b, i as $8927f6f2acc4f386$export$6d1a0317bde7de7f } from './index-87a828b8.js';
+import { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from './index-65264b4e.js';
+import { b as $5cb92bef7577960e$export$aecb2ddcb55c95be, c as $5cb92bef7577960e$export$be92b6f5f03c0fe9, $ as $f1701beae083dbae$export$602eac185826482c } from './index-4f8d3888.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-abd0d990.js';
+import { T as ThemeIcon } from './ThemeIcon-eab5a4d0.js';
 
 const $ea1ef594cf570d83$export$439d29a4e110a164 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends({}, props, {
@@ -691,10 +688,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();
@@ -703,13 +700,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 viewport. */

package/dist/_shared/esm/{index-efd9ef1c.js → index-3147c5b0.js}

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { h as $9f79659886946c16$export$e5c5a5f917a5871c } from './index-13d575cc.js';
+import { h as $9f79659886946c16$export$e5c5a5f917a5871c } from './index-87a828b8.js';
 
 const $1746a345f3d73bb7$var$useReactId = React['useId'.toString()] || (()=>undefined
 );

package/dist/_shared/esm/{index-3797d77e.js → index-4f8d3888.js}

@@ -1,6 +1,6 @@
 import { _ as _extends } from './extends-8cc61aad.js';
 import { useEffect, forwardRef, useContext, useState, createElement, useRef, createContext } from 'react';
-import { $ as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a, a as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, b as $8927f6f2acc4f386$export$250ffa63cdc0d034, g as $e42e1063c40fb3ef$export$b9ecd428b558ff10, i as $8927f6f2acc4f386$export$6d1a0317bde7de7f } from './index-13d575cc.js';
+import { $ as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a, a as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, b as $8927f6f2acc4f386$export$250ffa63cdc0d034, g as $e42e1063c40fb3ef$export$b9ecd428b558ff10, i as $8927f6f2acc4f386$export$6d1a0317bde7de7f } from './index-87a828b8.js';
 import $7SXl2$reactdom from 'react-dom';
 
 /**

package/dist/_shared/esm/{index-a1d2d9b3.js → index-65264b4e.js}

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { c as $c512c27ab02ef895$export$50c7b4e9d9f19c1, a as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, f as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from './index-13d575cc.js';
+import { c as $c512c27ab02ef895$export$50c7b4e9d9f19c1, a as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, f as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from './index-87a828b8.js';
 
 // We have resorted to returning slots directly rather than exposing primitives that can then
 // be slotted like `<CollectionItem as={Slot}>…</CollectionItem>`.