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

package/dist/_shared/cjs/{index-adbb63da.js → index-d75774a9.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-c575a255.js');
+var index = require('./index-4aa11039.js');
 
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;

package/dist/_shared/esm/{Breadcrumbs-87e2bd46.js → Breadcrumbs-c4b65cff.js}

@@ -1,8 +1,7 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
 import React__default, { useRef, useState, useEffect } from 'react';
 import { d as debounce_1 } from './debounce-6fed6b84.js';
-import { B as BtIconChevronLeft2Px, a as BtIconChevronRight2Px } from './BtIconChevronRight2Px.esm-75e92636.js';
-import { I as Icon } from './Icon-abd0d990.js';
+import { T as ThemeIcon } from './ThemeIcon-eab5a4d0.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
 
@@ -10,10 +9,10 @@ var BreadcrumbsItem = function (_a) {
     var spacerIconAfter = _a.spacerIconAfter, spacerIconBefore = _a.spacerIconBefore, children = _a.children, props = __rest(_a, ["spacerIconAfter", "spacerIconBefore", "children"]);
     return (React__default.createElement("li", __assign({ className: "arc-Breadcrumbs-item" }, filterDataAttrs(props)),
         spacerIconBefore && (React__default.createElement("div", { className: "arc-Breadcrumbs-spacerIcon", "data-testid": "arc-chevron-left-2px" },
-            React__default.createElement(Icon, { icon: BtIconChevronLeft2Px }))),
+            React__default.createElement(ThemeIcon, { icon: "breadcrumbLeft" }))),
         children,
         spacerIconAfter && (React__default.createElement("div", { className: "arc-Breadcrumbs-spacerIcon" },
-            React__default.createElement(Icon, { icon: BtIconChevronRight2Px })))));
+            React__default.createElement(ThemeIcon, { icon: "breadcrumbRight" })))));
 };
 
 var BreadcrumbsLink = React__default.forwardRef(function (_a, ref) {

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

@@ -1,11 +1,10 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
-import { B as BtIconChevronLeftMid } from './BtIconChevronLeftMid.esm-1ed8330b.js';
-import { B as BtIconChevronRightMid } from './BtIconChevronRightMid.esm-32268f1a.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { forwardRef, useContext } from 'react';
 import { s as suffixModifier } from './suffix-modifier-3d548e45.js';
-import { I as Icon } from './Icon-abd0d990.js';
+import { I as Icon } from './Icon-9ecaaeab.js';
 import { C as Context } from './Surface-0ca6817d.js';
+import { T as ThemeIcon } from './ThemeIcon-eab5a4d0.js';
 
 /**
  * Use `Button` to allow users to take actions with clicks and taps.
@@ -20,9 +19,7 @@ var Button = forwardRef(function (_a, ref) {
         },
         _b[suffixModifier("arc-Button--fill", fill)] = fill !== "solid",
         _b["arc-Button--fullWidth"] = isFullWidth,
-        _b[suffixModifier("arc-Button--icon", iconPosition.replace("icon", ""))] = (icon || fill === "flat") &&
-            iconPosition &&
-            iconPosition !== "afterText",
+        _b[suffixModifier("arc-Button--icon", iconPosition.replace("icon", ""))] = (icon || fill === "flat") && iconPosition,
         _b["arc-Button--hasSupportingText"] = supportingText,
         _b["arc-Button--onDarkSurface"] = surface === "dark",
         _b["arc-Button--size".concat(size && size.toUpperCase())] = size && size !== "m",
@@ -45,7 +42,7 @@ var Button = forwardRef(function (_a, ref) {
 });
 var ButtonIcon = function (_a) {
     var icon = _a.icon, isChevron = _a.isChevron, isBeforeText = _a.isBeforeText;
-    return (React__default.createElement("span", { className: "arc-Button-icon" }, isChevron ? (React__default.createElement(Icon, { icon: isBeforeText ? BtIconChevronLeftMid : BtIconChevronRightMid })) : (React__default.createElement(Icon, { icon: icon }))));
+    return (React__default.createElement("span", { className: "arc-Button-icon" }, isChevron ? (React__default.createElement(ThemeIcon, { icon: isBeforeText ? "buttonLeft" : "buttonRight" })) : (React__default.createElement(Icon, { icon: icon }))));
 };
 
 export { Button as B };

package/dist/_shared/esm/{Card-201e9f28.js → Card-45e8e10a.js}

@@ -1,13 +1,12 @@
 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, { useState, useEffect, useContext } from 'react';
-import { B as BtIconChevronRightMid } from './BtIconChevronRightMid.esm-32268f1a.js';
-import { I as Icon } from './Icon-abd0d990.js';
 import { I as Image } from './Image-12fbd327.js';
 import { H as Heading } from './Heading-d16e0e53.js';
 import { s as suffixModifier } from './suffix-modifier-3d548e45.js';
 import { C as Context, S as Surface } from './Surface-0ca6817d.js';
 import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
+import { T as ThemeIcon } from './ThemeIcon-eab5a4d0.js';
 
 /**
  * Detect interaction mode
@@ -110,7 +109,7 @@ var CardLink = function (_a) {
         }), href: href, rel: target === "_blank" ? "noopener noreferrer" : undefined, tabIndex: isButton ? -1 : undefined, target: target }, filterDataAttrs(linkData)),
         React__default.createElement("span", { className: "arc-Card-linkText" }, children),
         isButton && (React__default.createElement("span", { className: "arc-Card-linkIcon" },
-            React__default.createElement(Icon, { testId: "cardIcon", icon: BtIconChevronRightMid, size: 24 })))));
+            React__default.createElement(ThemeIcon, { "data-testid": "cardIcon", size: 24, icon: "cardButton" })))));
 };
 
 export { Card as C };

package/dist/_shared/esm/{Checkbox-d6ec5024.js → Checkbox-2a623386.js}

@@ -1,10 +1,9 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
 import React__default, { forwardRef, useContext } from 'react';
-import { B as BtIconTickAlt2Px } from './BtIconTickAlt2Px.esm-0bc2ded0.js';
-import { B as BtIconAlert } from './BtIconAlert.esm-a4608d47.js';
 import { c as classNames } from './index-2e73c2e9.js';
-import { C as Context, u as useAriaDescribedby } from './FormControl-351e5f1b.js';
+import { C as Context, u as useAriaDescribedby } from './FormControl-433228f5.js';
 import { C as Context$1 } from './Surface-0ca6817d.js';
+import { T as ThemeIcon } from './ThemeIcon-eab5a4d0.js';
 
 /**
  *  Use `Checkbox` to allow users to select individual options.
@@ -40,7 +39,7 @@ var Checkbox = forwardRef(function (_a, ref) {
             }) },
             React__default.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-Checkbox-input" }, checkedProps, { disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: ref, required: isRequired, type: "checkbox", value: value }, filterDataAttrs(props))),
             React__default.createElement("span", { className: "arc-Checkbox-box" },
-                React__default.createElement(BtIconTickAlt2Px, null)),
+                React__default.createElement(ThemeIcon, { icon: "checkboxChecked" })),
             React__default.createElement("span", __assign({}, (checkboxAlignment === "top" && {
                 className: "arc-Checkbox-content--marginTop"
             })),
@@ -49,7 +48,7 @@ var Checkbox = forwardRef(function (_a, ref) {
                 helper && React__default.createElement("span", { className: "arc-Checkbox-helper" }, helper))),
         errorMessage && (React__default.createElement("div", { id: idError, className: "arc-Checkbox-error" },
             React__default.createElement("span", { className: "arc-Checkbox-error--icon" },
-                React__default.createElement(BtIconAlert, null)),
+                React__default.createElement(ThemeIcon, { icon: "checkboxError" })),
             errorMessage))));
 });
 

package/dist/_shared/esm/{DisclosureMini-ec17b008.js → DisclosureMini-bf95a9db.js}

@@ -1,9 +1,9 @@
 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, useState } from 'react';
-import { B as BtIconChevronDown2Px } from './BtIconChevronDown2Px.esm-217276c2.js';
 import { T as Text } from './Text-14f586ac.js';
 import { C as Context } from './Surface-0ca6817d.js';
+import { T as ThemeIcon } from './ThemeIcon-eab5a4d0.js';
 
 /**
  * Use `DisclosureMini` to display content that is only visible when toggled into
@@ -28,7 +28,7 @@ var DisclosureMini = function (_a) {
             React__default.createElement("div", { className: classNames("arc-DisclosureMini-summary-icon", {
                     "arc-DisclosureMini-summary-icon--small": size === "s"
                 }) },
-                React__default.createElement(BtIconChevronDown2Px, null)),
+                React__default.createElement(ThemeIcon, { icon: "disclosureMiniExpand" })),
             React__default.createElement(Text, { size: size === "l" ? "m" : "s" }, summary)),
         React__default.createElement("div", { className: "arc-DisclosureMini-details" },
             React__default.createElement(Text, { size: size === "l" ? "m" : "s" },

package/dist/_shared/esm/{FormControl-351e5f1b.js → FormControl-433228f5.js}

@@ -1,9 +1,9 @@
 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, { createContext, useContext } from 'react';
-import { B as BtIconAlert } from './BtIconAlert.esm-a4608d47.js';
 import { C as Context$1 } from './Surface-0ca6817d.js';
-import { D as DisclosureMini } from './DisclosureMini-ec17b008.js';
+import { D as DisclosureMini } from './DisclosureMini-bf95a9db.js';
+import { T as ThemeIcon } from './ThemeIcon-eab5a4d0.js';
 
 /**
  * Optionally define ariaDescribedBy if errorMessage or helper exist.
@@ -79,7 +79,7 @@ var FormControl = function (_a) {
             React__default.createElement("div", { className: "arc-FormControl-info" },
                 !helperUnderLabel && (React__default.createElement("div", { className: "arc-FormControl-helperContainer" }, errorMessage ? (React__default.createElement("div", { className: "arc-FormControl-error", id: idError },
                     React__default.createElement("span", { className: "arc-FormControl-error--icon" },
-                        React__default.createElement(BtIconAlert, null)),
+                        React__default.createElement(ThemeIcon, { icon: "formControlAlert" })),
                     errorMessage)) : disclosureTitle ? (React__default.createElement(React__default.Fragment, null,
                     React__default.createElement(DisclosureMini, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize, id: idDisclosure }, disclosureText))) : (helper && (React__default.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))),
                 supplementaryInfo && (React__default.createElement("div", { className: "arc-FormControl-supplementaryInfo" }, supplementaryInfo))))));

package/dist/_shared/esm/{Icon-abd0d990.js → Icon-9ecaaeab.js}

@@ -1,34 +1,17 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
-import React__default, { useContext } from 'react';
 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';
 
-const ArcIconArc = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        viewBox: "0 0 16 16",
-        xmlns: "http://www.w3.org/2000/svg",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("path", {
-      fill: "none",
-      d: "M3.472 11.69a6.5 6.5 0 012.321-6.839A6.5 6.5 0 0113 4.38",
-      stroke: "currentColor",
-    }),
-  );
-
 /**
  * Use `Icon` to display brand iconography.
  */
 var Icon = function (_a) {
     var _b;
-    var testId = _a.testId, _c = _a.color, color = _c === void 0 ? "auto" : _c, _d = _a.icon, icon = _d === void 0 ? ArcIconArc : _d, _e = _a.isInline, isInline = _e === void 0 ? false : _e, label = _a.label, size = _a.size, props = __rest(_a, ["testId", "color", "icon", "isInline", "label", "size"]);
+    var testId = _a.testId, icon = _a.icon, _c = _a.color, color = _c === void 0 ? "auto" : _c, _d = _a.isInline, isInline = _d === void 0 ? false : _d, label = _a.label, size = _a.size, props = __rest(_a, ["testId", "icon", "color", "isInline", "label", "size"]);
     var surface = useContext(Context).surface;
-    var Icon = icon;
+    var Icon = icon || (function () { return React__default.createElement(React__default.Fragment, null); });
     return (React__default.createElement("span", __assign({ "data-testid": testId, "aria-label": label, className: classNames((_b = {},
             _b["arc-Icon"] = true,
             _b[suffixModifier("arc-Icon--color", color)] = color !== "auto",

package/dist/_shared/esm/{Poster-4ec2f679.js → Poster-699dc89b.js}

@@ -21,7 +21,7 @@ var PosterVideo = function (_a) {
 };
 
 /**
- * Use `Poster` to compose content on an image or video background.
+ * Use `Poster` to compose content on an image or video background. BT Brand Only.
  */
 var Poster = function (_a) {
     var background = _a.background, children = _a.children, _b = _a.overlay, overlay = _b === void 0 ? true : _b, _c = _a.surface, surface = _c === void 0 ? "darker" : _c, props = __rest(_a, ["background", "children", "overlay", "surface"]);

package/dist/_shared/esm/{ProgressStepper-f51f86c3.js → ProgressStepper-5de34269.js}

@@ -1,74 +1,20 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
 import React__default, { useContext } from 'react';
 import { c as classNames } from './index-2e73c2e9.js';
-import { B as BtIconAlert } from './BtIconAlert.esm-a4608d47.js';
-import { I as Icon } from './Icon-abd0d990.js';
 import { C as Context } from './Surface-0ca6817d.js';
 import { V as VerticalSpace } from './VerticalSpace-43cd9138.js';
 import { V as VisuallyHidden } from './VisuallyHidden-b9eebf71.js';
-
-const BtIconTickVariant = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M13.5,21.207,9.14648,16.85352a.5.5,0,0,1,.707-.707L13.5,19.793l8.64648-8.64649a.5.5,0,0,1,.707.707Z",
-      fill: "currentColor",
-    }),
-  );
-
-const BtIconCrossAlt = (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.70709,16.02l4.48236-4.49365a.4996.4996,0,1,0-.707-.70606l-4.481,4.49225-4.481-4.49225a.4996.4996,0,1,0-.707.70606L15.29584,16.02l-4.48236,4.49365a.4996.4996,0,1,0,.707.70606l4.481-4.49225,4.481,4.49225a.4996.4996,0,1,0,.707-.70606Z",
-      fill: "currentColor",
-    }),
-  );
-
-const BtIconCircle = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        viewBox: "0 0 32 32",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M9 16C9 19.87 12.13 23 16 23C19.87 23 23 19.87 23 16C23 12.13 19.87 9 16 9C12.13 9 9 12.13 9 16ZM16 7C11.03 7 7 11.03 7 16C7 20.97 11.03 25 16 25C20.97 25 25 20.97 25 16C25 11.03 20.97 7 16 7Z",
-      fill: "currentColor",
-    }),
-  );
+import { T as ThemeIcon } from './ThemeIcon-eab5a4d0.js';
 
 var ProgressStepperItem = function (_a) {
     var _b, _c, _d;
     var title = _a.title, titleHref = _a.titleHref, subTitle = _a.subTitle, _e = _a.direction, direction = _e === void 0 ? "horizontal" : _e, _f = _a.status, status = _f === void 0 ? "todo" : _f, _g = _a.size, size = _g === void 0 ? "large" : _g, _h = _a.position, position = _h === void 0 ? "middle" : _h, isFluid = _a.isFluid, ariaLabel = _a.ariaLabel, onClick = _a.onClick, previousStep = _a.previousStep, isExpandable = _a.isExpandable, stepContent = _a.stepContent, isStepContentHidden = _a.isStepContentHidden, props = __rest(_a, ["title", "titleHref", "subTitle", "direction", "status", "size", "position", "isFluid", "ariaLabel", "onClick", "previousStep", "isExpandable", "stepContent", "isStepContentHidden"]);
     var surface = useContext(Context).surface;
     var statusIcons = {
-        completed: BtIconTickVariant,
-        current: BtIconCircle,
-        warning: BtIconAlert,
-        error: BtIconCrossAlt
+        completed: "progressStepperComplete",
+        current: "progressStepperCurrent",
+        warning: "progressStepperWarning",
+        error: "progressStepperError"
     };
     var onClickHandler = function (event) {
         event.preventDefault();
@@ -94,7 +40,8 @@ var ProgressStepperItem = function (_a) {
                     _d)), "data-testid": "arc-ProgressStepperItem-iconWrapper" }, statusIcons[status] === undefined ? (React__default.createElement("div", { style: {
                     width: size === "small" ? "16px" : "32px",
                     height: size === "small" ? "16px" : "32px"
-                } })) : (React__default.createElement(Icon, { size: size === "small" ? 16 : 32, icon: statusIcons[status] }))),
+                } })) : (React__default.createElement("span", { className: "arc-ProgressStepperItem-statusIcon" },
+                React__default.createElement(ThemeIcon, { icon: statusIcons[status], size: size === "small" ? 16 : 32 })))),
             React__default.createElement("div", { className: "arc-ProgressStepperItem-iconSectionTrailAfter" })),
         React__default.createElement("div", { className: "arc-ProgressStepperItem-textSection" },
             status !== "todo" && (React__default.createElement(VisuallyHidden, null,

package/dist/_shared/esm/{RadioGroup-c838764c.js → RadioGroup-002a32ba.js}

@@ -1,6 +1,6 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
 import React__default, { createContext, useContext, forwardRef, useEffect } from 'react';
-import { F as FormControl } from './FormControl-351e5f1b.js';
+import { F as FormControl } from './FormControl-433228f5.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import { C as Context } from './Surface-0ca6817d.js';
 

package/dist/_shared/esm/{SiteFooter-233bb926.js → SiteFooter-d21da7ab.js}

@@ -1,18 +1,17 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
 import { u as useMediaQuery, A as ArcBreakpointM } from './index.es-00cb3bcb.js';
-import { B as BtIconChevronDown2Px } from './BtIconChevronDown2Px.esm-217276c2.js';
 import React__default, { useEffect, Fragment } from 'react';
 import { B as BrandLogo } from './BrandLogo-1af78f76.js';
-import { C as Curve } from './Curve-d8679dde.js';
 import { S as Section } from './Section-73781b56.js';
 import { S as Surface } from './Surface-0ca6817d.js';
 import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
+import { T as ThemeIcon } from './ThemeIcon-eab5a4d0.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,7 +20,6 @@ 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" },
                 (siteName || main) && (React__default.createElement(React__default.Fragment, null,
@@ -50,7 +48,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/{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
 );