@arc-ui/components 10.8.1 → 11.0.0

package/dist/SiteHeader/SiteHeader.cjs.js

@@ -3,17 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var index = require('../_shared/cjs/index-78b35bc1.js');
-var index_es = require('../_shared/cjs/index.es-f590caaf.js');
+var index_es = require('../_shared/cjs/index.es-77def0c9.js');
 var index$1 = require('../_shared/cjs/index-45bfb67b.js');
 var React = require('react');
 var BrandLogo = require('../_shared/cjs/BrandLogo-3c6102ef.js');
-var Button = require('../_shared/cjs/Button-1743b3ec.js');
-var useMediaQuery = require('../_shared/cjs/use-media-query-75d1bbae.js');
+var Button = require('../_shared/cjs/Button-b3a69953.js');
 var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
+var BtIconChevronDown2Px = require('../_shared/cjs/BtIconChevronDown2Px-8fb4e2eb.js');
 var handleLinkClick = require('../_shared/cjs/handle-link-click-17a44cf4.js');
+var BtIconChevronRight2Px = require('../_shared/cjs/BtIconChevronRight2Px-a8e40136.js');
 var suffixModifier = require('../_shared/cjs/suffix-modifier-edf7851e.js');
 var Text = require('../_shared/cjs/Text-1d3844be.js');
-require('../_shared/cjs/Icon-bb5a5fd1.js');
+require('../_shared/cjs/BtIconChevronRightMid-5a38d855.js');
+require('../_shared/cjs/Icon-719d13d4.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,13 +28,16 @@ var Item = function (_a) {
             _b["arc-SiteHeaderItem"] = true,
             _b["arc-SiteHeaderItem--emphasised"] = isEmphasised,
             _b)) }, index.filterDataAttrs(props)),
-        React__default["default"].createElement("a", { onClick: handleLinkClick.handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderItem-link", href: href }, children)));
+        React__default["default"].createElement("a", { onClick: handleLinkClick.handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderItem-link", href: href },
+            isEmphasised && (React__default["default"].createElement("span", { className: "arc-SiteHeaderItem-linkIcon" },
+                React__default["default"].createElement(BtIconChevronRight2Px.BtIconChevronRight2Px_2, null))),
+            children)));
 };
 
 var ItemGroup = function (_a) {
     var children = _a.children, href = _a.href, title = _a.title, onClick = _a.onClick, viewAllTitle = _a.viewAllTitle, props = index.__rest(_a, ["children", "href", "title", "onClick", "viewAllTitle"]);
     var _b = React.useState(false), hasClientSideJavaScript = _b[0], setHasClientSideJavaScript = _b[1];
-    var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointL, "px)"));
+    var isMinWidthArcBreakpointL = index_es.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointL, "px)"));
     React.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item && item.type !== Item && item.type !== React.Fragment) {
@@ -52,7 +57,10 @@ var ItemGroup = function (_a) {
         React__default["default"].createElement(ElementType, index.__assign({ className: "arc-SiteHeaderItemGroup-details", open: Boolean(title && isMinWidthArcBreakpointL) }, index.filterDataAttrs(props)),
             title ? (React__default["default"].createElement("summary", { className: "arc-SiteHeaderItemGroup-summary", tabIndex: isMinWidthArcBreakpointL ? -1 : 0 }, href ? (React__default["default"].createElement("a", { onClick: handleLinkClick.handleLinkClick({
                     handler: onClick
-                }), className: "arc-SiteHeaderItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL ? 0 : -1 }, title)) : (React__default["default"].createElement("div", { className: "arc-SiteHeaderItemGroup-title" }, title)))) : null,
+                }), className: "arc-SiteHeaderItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL ? 0 : -1 },
+                title,
+                React__default["default"].createElement("span", { className: "arc-SiteHeaderItemGroup-titleIcon" },
+                    React__default["default"].createElement(BtIconChevronDown2Px.BtIconChevronDown2Px_2, null)))) : (React__default["default"].createElement("div", { className: "arc-SiteHeaderItemGroup-title" }, title)))) : null,
             React__default["default"].createElement("ul", { className: "arc-SiteHeaderItemGroup-items" },
                 children,
                 href && title ? (React__default["default"].createElement("li", { className: "arc-SiteHeaderItem arc-SiteHeaderItem--viewAll" },
@@ -109,6 +117,8 @@ var BackButton = function (_a) {
     return (React__default["default"].createElement("button", { className: "arc-SiteHeaderBackButton", onClick: function () {
             setOpen(false);
         } },
+        React__default["default"].createElement("span", { className: "arc-SiteHeaderBackButton-icon" },
+            React__default["default"].createElement(BtIconChevronRight2Px.BtIconChevronLeft2Px_2, null)),
         React__default["default"].createElement("span", { className: "arc-SiteHeaderBackButton-text" }, "Back")));
 };
 
@@ -189,7 +199,10 @@ var Panel = function (_a) {
 };
 var ViewAll = function (_a) {
     var href = _a.href, title = _a.title, onClick = _a.onClick;
-    return (React__default["default"].createElement("a", { onClick: handleLinkClick.handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderPanel-viewAll", href: href }, title));
+    return (React__default["default"].createElement("a", { onClick: handleLinkClick.handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderPanel-viewAll", href: href },
+        title,
+        React__default["default"].createElement("span", { className: "arc-SiteHeaderPanel-viewAllIcon" },
+            React__default["default"].createElement(BtIconChevronRight2Px.BtIconChevronRight2Px_2, null))));
 };
 ViewAll.displayName = "Panel.ViewAll";
 Panel.ViewAll = ViewAll;
@@ -199,6 +212,7 @@ var NavItem = function (_a) {
     var children = _a.children, href = _a.href, isCurrent = _a.isCurrent, onClick = _a.onClick, promo = _a.promo, title = _a.title, viewAllTitle = _a.viewAllTitle, props = index.__rest(_a, ["children", "href", "isCurrent", "onClick", "promo", "title", "viewAllTitle"]);
     var navItem = React.useRef();
     var _d = React.useState(false), panelOpen = _d[0], setPanelOpen = _d[1];
+    var isMinWidthArcBreakpointL = index_es.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointL, "px)"));
     React.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item &&
@@ -221,7 +235,9 @@ var NavItem = function (_a) {
                 _c)), onClick: function (e) {
                 e.preventDefault();
                 setPanelOpen(!panelOpen);
-            } }, title),
+            } },
+            React__default["default"].createElement("span", null, title),
+            React__default["default"].createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" }, isMinWidthArcBreakpointL ? (React__default["default"].createElement(BtIconChevronDown2Px.BtIconChevronDown2Px_2, null)) : (React__default["default"].createElement(BtIconChevronRight2Px.BtIconChevronRight2Px_2, null)))),
         React__default["default"].createElement(Panel, { navItemRef: navItem, open: panelOpen, promo: promo, setOpen: setPanelOpen, viewAll: href ? (React__default["default"].createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined) }, children)))));
 };
 
@@ -273,7 +289,7 @@ var SubNavItem = function (_a) {
     var navItem = React.useContext(Context$1).navItem;
     var subNavItem = React.useRef();
     var _e = React.useState(false), panelOpen = _e[0], setPanelOpen = _e[1];
-    var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointL, "px)"));
+    var isMinWidthArcBreakpointL = index_es.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointL, "px)"));
     React.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item &&
@@ -305,7 +321,10 @@ var SubNavItem = function (_a) {
                 _c["arc-SiteHeaderSubNavItem-link--itemHasChildren"] = children,
                 _c)), onClick: function () {
                 setPanelOpen(true);
-            } }, linkTitle),
+            } },
+            linkTitle,
+            children && (React__default["default"].createElement("span", { className: "arc-SiteHeaderSubNavItem-linkIcon" },
+                React__default["default"].createElement(BtIconChevronRight2Px.BtIconChevronRight2Px_2, null)))),
         React__default["default"].createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, subNavLink: "arc-SiteHeaderSubNavItem-link", promo: promo, title: React__default["default"].createElement("span", null,
                 title,
                 subTitle && (React__default["default"].createElement(Text.Text, { size: "xs", tone: "supporting" }, subTitle))), viewAll: href ? (React__default["default"].createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined) }, children)))));
@@ -376,6 +395,7 @@ var NavItemWithSubNav = function (_a) {
     var navItem = React.useRef();
     var _e = React.useState(true), defaultItem = _e[0], setDefaultItem = _e[1];
     var _f = React.useState(false), panelOpen = _f[0], setPanelOpen = _f[1];
+    var isMinWidthArcBreakpointL = index_es.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointL, "px)"));
     React.useEffect(function () {
         React__default["default"].Children.map(slot1, function (item) {
             if (item && item.type !== SubNavItem && item.type !== React.Fragment) {
@@ -413,7 +433,9 @@ var NavItemWithSubNav = function (_a) {
                     _c)), onClick: function (e) {
                     e.preventDefault();
                     setPanelOpen(!panelOpen);
-                } }, title),
+                } },
+                title,
+                React__default["default"].createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" }, isMinWidthArcBreakpointL ? (React__default["default"].createElement(BtIconChevronDown2Px.BtIconChevronDown2Px_2, null)) : (React__default["default"].createElement(BtIconChevronRight2Px.BtIconChevronRight2Px_2, null)))),
             React__default["default"].createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, title: subTitle, viewAll: href ? (React__default["default"].createElement(Panel.ViewAll, { href: href, onClick: onViewAllClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined), withSubNav: true },
                 defaultItem
                     ? React__default["default"].cloneElement(slot1, { isDefaultItem: defaultItem })
@@ -502,7 +524,7 @@ var SiteHeader = 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 = index.__rest(_a, ["children", "basket", "hasLogin", "isTransparent", "loginHref", "logoOnClick", "loginOnClick", "loginTitle", "logoHref", "logoLabel", "search", "subBrand"]);
     var _j = React.useState(false), hasClientSideJavaScript = _j[0], setHasClientSideJavaScript = _j[1];
     var _k = React.useState(false), menuOpen = _k[0], setMenuOpen = _k[1];
-    var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointL, "px)"));
+    var isMinWidthArcBreakpointL = index_es.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointL, "px)"));
     React.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item &&

package/dist/SiteHeader/SiteHeader.esm.js

@@ -1,15 +1,17 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs, d as __awaiter, e as __generator } from '../_shared/esm/index-229fc864.js';
-import { a as ArcBreakpointL } from '../_shared/esm/index.es-42f84e2d.js';
+import { u as useMediaQuery, a as ArcBreakpointL } from '../_shared/esm/index.es-00cb3bcb.js';
 import { c as classNames } from '../_shared/esm/index-2ae58626.js';
 import React, { useState, useEffect, Fragment, useContext, useRef, createContext } from 'react';
 import { B as BrandLogo } from '../_shared/esm/BrandLogo-ea3dd0e6.js';
-import { B as Button } from '../_shared/esm/Button-d59c31a2.js';
-import { u as useMediaQuery } from '../_shared/esm/use-media-query-38faed7f.js';
+import { B as Button } from '../_shared/esm/Button-5ff56a7b.js';
 import { S as Surface } from '../_shared/esm/Surface-d515d212.js';
+import { B as BtIconChevronDown2Px_2 } from '../_shared/esm/BtIconChevronDown2Px-4abd079b.js';
 import { h as handleLinkClick } from '../_shared/esm/handle-link-click-f64f55a2.js';
+import { a as BtIconChevronRight2Px_2, B as BtIconChevronLeft2Px_2 } from '../_shared/esm/BtIconChevronRight2Px-a5cc1d05.js';
 import { s as suffixModifier } from '../_shared/esm/suffix-modifier-f5e28822.js';
 import { T as Text } from '../_shared/esm/Text-d8988620.js';
-import '../_shared/esm/Icon-2fd92daa.js';
+import '../_shared/esm/BtIconChevronRightMid-386cf272.js';
+import '../_shared/esm/Icon-76d0d8c0.js';
 
 var Item = function (_a) {
     var _b;
@@ -18,7 +20,10 @@ var Item = function (_a) {
             _b["arc-SiteHeaderItem"] = true,
             _b["arc-SiteHeaderItem--emphasised"] = isEmphasised,
             _b)) }, filterDataAttrs(props)),
-        React.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderItem-link", href: href }, children)));
+        React.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderItem-link", href: href },
+            isEmphasised && (React.createElement("span", { className: "arc-SiteHeaderItem-linkIcon" },
+                React.createElement(BtIconChevronRight2Px_2, null))),
+            children)));
 };
 
 var ItemGroup = function (_a) {
@@ -44,7 +49,10 @@ var ItemGroup = function (_a) {
         React.createElement(ElementType, __assign({ className: "arc-SiteHeaderItemGroup-details", open: Boolean(title && isMinWidthArcBreakpointL) }, filterDataAttrs(props)),
             title ? (React.createElement("summary", { className: "arc-SiteHeaderItemGroup-summary", tabIndex: isMinWidthArcBreakpointL ? -1 : 0 }, href ? (React.createElement("a", { onClick: handleLinkClick({
                     handler: onClick
-                }), className: "arc-SiteHeaderItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL ? 0 : -1 }, title)) : (React.createElement("div", { className: "arc-SiteHeaderItemGroup-title" }, title)))) : null,
+                }), className: "arc-SiteHeaderItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL ? 0 : -1 },
+                title,
+                React.createElement("span", { className: "arc-SiteHeaderItemGroup-titleIcon" },
+                    React.createElement(BtIconChevronDown2Px_2, null)))) : (React.createElement("div", { className: "arc-SiteHeaderItemGroup-title" }, title)))) : null,
             React.createElement("ul", { className: "arc-SiteHeaderItemGroup-items" },
                 children,
                 href && title ? (React.createElement("li", { className: "arc-SiteHeaderItem arc-SiteHeaderItem--viewAll" },
@@ -101,6 +109,8 @@ var BackButton = function (_a) {
     return (React.createElement("button", { className: "arc-SiteHeaderBackButton", onClick: function () {
             setOpen(false);
         } },
+        React.createElement("span", { className: "arc-SiteHeaderBackButton-icon" },
+            React.createElement(BtIconChevronLeft2Px_2, null)),
         React.createElement("span", { className: "arc-SiteHeaderBackButton-text" }, "Back")));
 };
 
@@ -181,7 +191,10 @@ var Panel = function (_a) {
 };
 var ViewAll = function (_a) {
     var href = _a.href, title = _a.title, onClick = _a.onClick;
-    return (React.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderPanel-viewAll", href: href }, title));
+    return (React.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderPanel-viewAll", href: href },
+        title,
+        React.createElement("span", { className: "arc-SiteHeaderPanel-viewAllIcon" },
+            React.createElement(BtIconChevronRight2Px_2, null))));
 };
 ViewAll.displayName = "Panel.ViewAll";
 Panel.ViewAll = ViewAll;
@@ -191,6 +204,7 @@ var NavItem = function (_a) {
     var children = _a.children, href = _a.href, isCurrent = _a.isCurrent, onClick = _a.onClick, promo = _a.promo, title = _a.title, viewAllTitle = _a.viewAllTitle, props = __rest(_a, ["children", "href", "isCurrent", "onClick", "promo", "title", "viewAllTitle"]);
     var navItem = useRef();
     var _d = useState(false), panelOpen = _d[0], setPanelOpen = _d[1];
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
     useEffect(function () {
         React.Children.map(children, function (item) {
             if (item &&
@@ -213,7 +227,9 @@ var NavItem = function (_a) {
                 _c)), onClick: function (e) {
                 e.preventDefault();
                 setPanelOpen(!panelOpen);
-            } }, title),
+            } },
+            React.createElement("span", null, title),
+            React.createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" }, isMinWidthArcBreakpointL ? (React.createElement(BtIconChevronDown2Px_2, null)) : (React.createElement(BtIconChevronRight2Px_2, null)))),
         React.createElement(Panel, { navItemRef: navItem, open: panelOpen, promo: promo, setOpen: setPanelOpen, viewAll: href ? (React.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined) }, children)))));
 };
 
@@ -297,7 +313,10 @@ var SubNavItem = function (_a) {
                 _c["arc-SiteHeaderSubNavItem-link--itemHasChildren"] = children,
                 _c)), onClick: function () {
                 setPanelOpen(true);
-            } }, linkTitle),
+            } },
+            linkTitle,
+            children && (React.createElement("span", { className: "arc-SiteHeaderSubNavItem-linkIcon" },
+                React.createElement(BtIconChevronRight2Px_2, null)))),
         React.createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, subNavLink: "arc-SiteHeaderSubNavItem-link", promo: promo, title: React.createElement("span", null,
                 title,
                 subTitle && (React.createElement(Text, { size: "xs", tone: "supporting" }, subTitle))), viewAll: href ? (React.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined) }, children)))));
@@ -368,6 +387,7 @@ var NavItemWithSubNav = function (_a) {
     var navItem = useRef();
     var _e = useState(true), defaultItem = _e[0], setDefaultItem = _e[1];
     var _f = useState(false), panelOpen = _f[0], setPanelOpen = _f[1];
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
     useEffect(function () {
         React.Children.map(slot1, function (item) {
             if (item && item.type !== SubNavItem && item.type !== Fragment) {
@@ -405,7 +425,9 @@ var NavItemWithSubNav = function (_a) {
                     _c)), onClick: function (e) {
                     e.preventDefault();
                     setPanelOpen(!panelOpen);
-                } }, title),
+                } },
+                title,
+                React.createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" }, isMinWidthArcBreakpointL ? (React.createElement(BtIconChevronDown2Px_2, null)) : (React.createElement(BtIconChevronRight2Px_2, null)))),
             React.createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, title: subTitle, viewAll: href ? (React.createElement(Panel.ViewAll, { href: href, onClick: onViewAllClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined), withSubNav: true },
                 defaultItem
                     ? React.cloneElement(slot1, { isDefaultItem: defaultItem })

package/dist/TextInput/TextInput.cjs.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
 import { FC } from "react";
-import { FormControlProps } from "../_shared/cjs/FormControl-7d8e10fa";
+import { FormControlProps } from "../_shared/cjs/FormControl-a1b7421b";
 type EventType = React.ChangeEvent<HTMLInputElement>;
 /**
  * Use `TextInput` to allow custom user text entry with a keyboard.

package/dist/TextInput/TextInput.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var index = require('../_shared/cjs/index-78b35bc1.js');
 var index$1 = require('../_shared/cjs/index-45bfb67b.js');
 var React = require('react');
-var FormControl = require('../_shared/cjs/FormControl-7d8e10fa.js');
+var FormControl = require('../_shared/cjs/FormControl-a1b7421b.js');
 var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/dist/TextInput/TextInput.esm.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
 import { FC } from "react";
-import { FormControlProps } from "../_shared/esm/FormControl-33194106";
+import { FormControlProps } from "../_shared/esm/FormControl-feedc495";
 type EventType = React.ChangeEvent<HTMLInputElement>;
 /**
  * Use `TextInput` to allow custom user text entry with a keyboard.

package/dist/TextInput/TextInput.esm.js

@@ -1,7 +1,7 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index-229fc864.js';
 import { c as classNames } from '../_shared/esm/index-2ae58626.js';
 import React, { forwardRef, useContext } from 'react';
-import { u as useAriaDescribedby, F as FormControl } from '../_shared/esm/FormControl-33194106.js';
+import { u as useAriaDescribedby, F as FormControl } from '../_shared/esm/FormControl-feedc495.js';
 import { C as Context } from '../_shared/esm/Surface-d515d212.js';
 
 /**

package/dist/_shared/cjs/BtIconChevronDown2Px-8fb4e2eb.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var React$1 = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
+
+const React = React__default["default"];
+const BtIconChevronDown2Px = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M15.99316,23.91406,2.294,10.207A.99989.99989,0,1,1,3.708,8.793l12.28515,12.293L28.292,8.793A.99989.99989,0,1,1,29.70605,10.207Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconChevronDown2Px_2 = BtIconChevronDown2Px;
+
+exports.BtIconChevronDown2Px_2 = BtIconChevronDown2Px_2;

package/dist/_shared/cjs/BtIconChevronRight2Px-a8e40136.js

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

package/dist/_shared/cjs/BtIconChevronRightMid-5a38d855.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var React$1 = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
+
+const React = React__default["default"];
+const BtIconChevronRightMid = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d:
+        "M9.04543 8.0002L6.19676 5.1482C6.07077 5.02196 6 4.85089 6 4.67253C6 4.49418 6.07077 4.32311 6.19676 4.19687C6.25906 4.13446 6.33304 4.08495 6.41449 4.05117C6.49594 4.01739 6.58325 4 6.67143 4C6.75961 4 6.84692 4.01739 6.92837 4.05117C7.00982 4.08495 7.0838 4.13446 7.1461 4.19687L10.4701 7.52487C10.5959 7.65108 10.6665 7.82201 10.6665 8.0002C10.6665 8.1784 10.5959 8.34932 10.4701 8.47553L7.1461 11.8035C7.0838 11.8659 7.00982 11.9155 6.92837 11.9492C6.84692 11.983 6.75961 12.0004 6.67143 12.0004C6.58325 12.0004 6.49594 11.983 6.41449 11.9492C6.33304 11.9155 6.25906 11.8659 6.19676 11.8035C6.07077 11.6773 6 11.5062 6 11.3279C6 11.1495 6.07077 10.9784 6.19676 10.8522L9.04543 8.0002Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconChevronRightMid_2 = BtIconChevronRightMid;
+
+exports.BtIconChevronRightMid_2 = BtIconChevronRightMid_2;

package/dist/_shared/cjs/{Button-1743b3ec.d.ts → Button-b3a69953.d.ts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { icons } from "@arc-ui/tokens";
 import React from "react";
 import { FC } from "react";
+import { ArcIcon } from "./arc-icon-17594b2f";
 type ElementUnion = HTMLButtonElement | HTMLAnchorElement;
 type Ref = React.Ref<ElementUnion> | null;
 /**
@@ -12,7 +12,7 @@ interface ButtonIconProps {
     /**
      * Icon variant.
      */
-    icon?: typeof icons[number];
+    icon?: ArcIcon;
     /**
      * Should the icon be a default chevron?
      */
@@ -57,7 +57,7 @@ interface ButtonProps extends ButtonElementProps, LinkElementProps {
     /**
      * Button icon variant.
      */
-    icon?: typeof icons[number];
+    icon?: ArcIcon;
     /**
      * How should a Button icon be displayed?
      */

package/dist/_shared/cjs/{Button-1743b3ec.js → Button-b3a69953.js}

@@ -1,23 +1,46 @@
 'use strict';
 
 var index = require('./index-78b35bc1.js');
+var React$1 = require('react');
+var BtIconChevronRightMid = require('./BtIconChevronRightMid-5a38d855.js');
 var index$1 = require('./index-45bfb67b.js');
-var React = require('react');
 var suffixModifier = require('./suffix-modifier-edf7851e.js');
-var Icon = require('./Icon-bb5a5fd1.js');
+var Icon = require('./Icon-719d13d4.js');
 var Surface = require('./Surface-d6b8010e.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
+
+const React = React__default["default"];
+const BtIconChevronLeftMid = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d:
+        "M7.62107 8.00023L10.4697 10.8522C10.5957 10.9785 10.6665 11.1495 10.6665 11.3279C10.6665 11.5063 10.5957 11.6773 10.4697 11.8036C10.4074 11.866 10.3335 11.9155 10.252 11.9493C10.1706 11.983 10.0833 12.0004 9.99507 12.0004C9.9069 12.0004 9.81959 11.983 9.73814 11.9493C9.65669 11.9155 9.5827 11.866 9.52041 11.8036L6.19641 8.47556C6.07061 8.34935 5.99998 8.17842 5.99998 8.00023C5.99998 7.82203 6.07061 7.6511 6.19641 7.52489L9.52041 4.19689C9.5827 4.13449 9.65669 4.08498 9.73814 4.0512C9.81959 4.01741 9.9069 4.00003 9.99507 4.00003C10.0832 4.00003 10.1706 4.01741 10.252 4.0512C10.3335 4.08498 10.4074 4.13449 10.4697 4.19689C10.5957 4.32313 10.6665 4.4942 10.6665 4.67256C10.6665 4.85092 10.5957 5.02199 10.4697 5.14823L7.62107 8.00023Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconChevronLeftMid_2 = BtIconChevronLeftMid;
 
 /**
  * Use `Button` to allow users to take actions with clicks and taps.
  */
-var Button = React.forwardRef(function (_a, ref) {
+var Button = React$1.forwardRef(function (_a, ref) {
     var _b;
     var ariaLabel = _a.ariaLabel, _c = _a.fill, fill = _c === void 0 ? "solid" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPosition, iconPosition = _d === void 0 ? "afterText" : _d, id = _a.id, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isDisplayBlock, isDisplayBlock = _f === void 0 ? false : _f, _g = _a.isFullWidth, isFullWidth = _g === void 0 ? false : _g, label = _a.label, onClick = _a.onClick, rel = _a.rel, supportingText = _a.supportingText, target = _a.target, type = _a.type, props = index.__rest(_a, ["ariaLabel", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "supportingText", "target", "type"]);
-    var surface = React.useContext(Surface.Context).surface;
+    var surface = React$1.useContext(Surface.Context).surface;
     var buttonClasses = index$1.classNames((_b = {
             "arc-Button": true,
             "arc-Button--displayBlock": isDisplayBlock
@@ -51,7 +74,7 @@ var ButtonIcon = function (_a) {
     return (React__default["default"].createElement("span", { className: index$1.classNames({
             "arc-Button-icon": true,
             "arc-Button-icon--chevron": isChevron
-        }) }, isChevron ? (React__default["default"].createElement(Icon.Icon, { icon: "btChevron".concat(isBeforeText ? "Left" : "Right", "Mid") })) : (React__default["default"].createElement(Icon.Icon, { icon: icon }))));
+        }) }, isChevron ? (React__default["default"].createElement(Icon.Icon, { icon: isBeforeText ? BtIconChevronLeftMid_2 : BtIconChevronRightMid.BtIconChevronRightMid_2 })) : (React__default["default"].createElement(Icon.Icon, { icon: icon }))));
 };
 
 exports.Button = Button;

package/dist/_shared/cjs/{FormControl-7d8e10fa.js → FormControl-a1b7421b.js}

@@ -2,12 +2,12 @@
 
 var index = require('./index-78b35bc1.js');
 var index$1 = require('./index-45bfb67b.js');
-var React = require('react');
+var React$1 = require('react');
 var Surface = require('./Surface-d6b8010e.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
 
 /**
  * Optionally define ariaDescribedBy if errorMessage or helper exist.
@@ -32,17 +32,46 @@ var useAriaDescribedby = function (_a) {
     return { ariaDescribedby: ariaDescribedby, idError: idError, idHelper: idHelper };
 };
 
+const React = React__default["default"];
+const BtIconAlert = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.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.createElement("path", {
+      fill: "currentColor",
+      d: "M16 20.99335A1 1 0 1 0 16 22.99335 1 1 0 1 0 16 20.99335z"
+    }),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M16.00488,19.00977a.49972.49972,0,0,0,.5-.5L16.50684,9.5a.5.5,0,0,0-1,0l-.002,9.00977A.5.5,0,0,0,16.00488,19.00977Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconAlert_2 = BtIconAlert;
+
 var defaultContext = {
     requirementStatus: null
 };
-var Context = React.createContext(defaultContext);
+var Context = React$1.createContext(defaultContext);
 var Provider = Context.Provider;
 /**
  * Use `FormControl` to provide inputs with labels, helper text and error messages
  */
 var FormControl = function (_a) {
     var children = _a.children, _b = _a.elementType, ElementType = _b === void 0 ? "div" : _b, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.requirementStatus, requirementStatus = _d === void 0 ? "optional" : _d, props = index.__rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "id", "label", "labelSize", "requirementStatus"]);
-    var surface = React.useContext(Surface.Context).surface;
+    var surface = React$1.useContext(Surface.Context).surface;
     var _e = useAriaDescribedby({
         errorMessage: errorMessage,
         helper: helper,
@@ -74,9 +103,13 @@ var FormControl = function (_a) {
                 requirementStatus === "optional" && (React__default["default"].createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))),
             helper && (React__default["default"].createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper)),
             children,
-            errorMessage && (React__default["default"].createElement("div", { className: "arc-FormControl-error", id: idError }, errorMessage)))));
+            errorMessage && (React__default["default"].createElement("div", { className: "arc-FormControl-error", id: idError },
+                React__default["default"].createElement("span", { className: "arc-FormControl-error--icon" },
+                    React__default["default"].createElement(BtIconAlert_2, null)),
+                errorMessage)))));
 };
 
+exports.BtIconAlert_2 = BtIconAlert_2;
 exports.Context = Context;
 exports.FormControl = FormControl;
 exports.useAriaDescribedby = useAriaDescribedby;

package/dist/_shared/cjs/{Icon-bb5a5fd1.d.ts → Icon-719d13d4.d.ts}

@@ -1,5 +1,5 @@
-import { icons } from "@arc-ui/tokens";
 import { FC } from "react";
+import { ArcIcon } from "./arc-icon-17594b2f";
 /**
  * Use `Icon` to display brand iconography.
  */
@@ -14,14 +14,10 @@ interface IconProps {
      * Should the Icon component be styled as an inline element?
      */
     isInline?: boolean;
-    /**
-     * Should a selected variant of the Icon be shown?
-     */
-    isSelected?: boolean;
     /**
      * Icon variant.
      */
-    icon?: typeof icons[number];
+    icon?: ArcIcon;
     /**
      * Alternative text label for the Icon.
      */
@@ -30,5 +26,9 @@ interface IconProps {
      * Size of the Icon, in pixels.
      */
     size?: number;
+    /**
+     * value for data-testid
+     */
+    testId?: string;
 }
 export { Icon, colors, IconProps };