@arc-ui/components 12.0.0-alpha.0 → 12.0.0-beta.11

package/dist/_shared/cjs/index-ba3141f5.js

@@ -0,0 +1,72 @@
+'use strict';
+
+var React = require('react');
+var index = require('./index-76f7dd53.js');
+
+function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
+    const [size, setSize] = React.useState(undefined);
+    index.$9f79659886946c16$export$e5c5a5f917a5871c(()=>{
+        if (element) {
+            // provide size as early as possible
+            setSize({
+                width: element.offsetWidth,
+                height: element.offsetHeight
+            });
+            const resizeObserver = new ResizeObserver((entries)=>{
+                if (!Array.isArray(entries)) return;
+                 // Since we only observe the one element, we don't need to loop over the
+                // array
+                if (!entries.length) return;
+                const entry = entries[0];
+                let width;
+                let height;
+                if ('borderBoxSize' in entry) {
+                    const borderSizeEntry = entry['borderBoxSize']; // iron out differences between browsers
+                    const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
+                    width = borderSize['inlineSize'];
+                    height = borderSize['blockSize'];
+                } else {
+                    // for browsers that don't support `borderBoxSize`
+                    // we calculate it ourselves to get the correct border box.
+                    width = element.offsetWidth;
+                    height = element.offsetHeight;
+                }
+                setSize({
+                    width: width,
+                    height: height
+                });
+            });
+            resizeObserver.observe(element, {
+                box: 'border-box'
+            });
+            return ()=>resizeObserver.unobserve(element)
+            ;
+        } else // We only want to reset to `undefined` when the element becomes `null`,
+        // not if it changes to another element.
+        setSize(undefined);
+    }, [
+        element
+    ]);
+    return size;
+}
+
+function $010c2913dbd2fe3d$export$5cae361ad82dce8b(value) {
+    const ref = React.useRef({
+        value: value,
+        previous: value
+    }); // We compare values before making an update to ensure that
+    // a change has been made. This ensures the previous value is
+    // persisted correctly between renders.
+    return React.useMemo(()=>{
+        if (ref.current.value !== value) {
+            ref.current.previous = ref.current.value;
+            ref.current.value = value;
+        }
+        return ref.current.previous;
+    }, [
+        value
+    ]);
+}
+
+exports.$010c2913dbd2fe3d$export$5cae361ad82dce8b = $010c2913dbd2fe3d$export$5cae361ad82dce8b;
+exports.$db6c3485150b8e66$export$1ab7ae714698c4b8 = $db6c3485150b8e66$export$1ab7ae714698c4b8;

package/dist/_shared/cjs/{index-23b4f49f.js → index-dbc843d3.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-4aa11039.js');
+var index = require('./index-76f7dd53.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/_shared/cjs/index-e97b4194.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var React = require('react');
+
+var useThemeElement = function () {
+    var _a = React.useState(undefined), themeElement = _a[0], setElement = _a[1];
+    var setThemeElement = function (el) {
+        el &&
+            setElement(el.closest(".arc-ds-sys-theme") || undefined);
+    };
+    return [themeElement, setThemeElement];
+};
+
+exports.useThemeElement = useThemeElement;

package/dist/_shared/cjs/index.es-3783ed64.js

@@ -0,0 +1,348 @@
+'use strict';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+exports.__assign = function() {
+  exports.__assign = Object.assign || function __assign(t) {
+      for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+      return t;
+  };
+  return exports.__assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+          if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+              t[p[i]] = s[p[i]];
+      }
+  return t;
+}
+
+function __spreadArray(to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+      if (ar || !(i in from)) {
+          if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+          ar[i] = from[i];
+      }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/**
+ * Filters out data attributes from the given props object.
+ *
+ * This function extracts all properties that match the `data-*` attribute pattern
+ * and returns a new object containing only those properties.
+ *
+ * @param props - The object containing properties to filter.
+ * @returns A new object containing only the `data-*` attributes from the input props.
+ */
+/**
+ * Regular expression to match `data-*` attributes.
+ */
+var dataAttrRe = /^(data-.*)$/;
+var filterDataAttrs = function (props) {
+    var filteredProps = {};
+    for (var prop in props) {
+        if (Object.prototype.hasOwnProperty.call(props, prop) &&
+            dataAttrRe.test(prop)) {
+            filteredProps[prop] = props[prop];
+        }
+    }
+    return filteredProps;
+};
+
+var camelcase = {exports: {}};
+
+const UPPERCASE = /[\p{Lu}]/u;
+const LOWERCASE = /[\p{Ll}]/u;
+const LEADING_CAPITAL = /^[\p{Lu}](?![\p{Lu}])/gu;
+const IDENTIFIER = /([\p{Alpha}\p{N}_]|$)/u;
+const SEPARATORS = /[_.\- ]+/;
+
+const LEADING_SEPARATORS = new RegExp('^' + SEPARATORS.source);
+const SEPARATORS_AND_IDENTIFIER = new RegExp(SEPARATORS.source + IDENTIFIER.source, 'gu');
+const NUMBERS_AND_IDENTIFIER = new RegExp('\\d+' + IDENTIFIER.source, 'gu');
+
+const preserveCamelCase = (string, toLowerCase, toUpperCase) => {
+	let isLastCharLower = false;
+	let isLastCharUpper = false;
+	let isLastLastCharUpper = false;
+
+	for (let i = 0; i < string.length; i++) {
+		const character = string[i];
+
+		if (isLastCharLower && UPPERCASE.test(character)) {
+			string = string.slice(0, i) + '-' + string.slice(i);
+			isLastCharLower = false;
+			isLastLastCharUpper = isLastCharUpper;
+			isLastCharUpper = true;
+			i++;
+		} else if (isLastCharUpper && isLastLastCharUpper && LOWERCASE.test(character)) {
+			string = string.slice(0, i - 1) + '-' + string.slice(i - 1);
+			isLastLastCharUpper = isLastCharUpper;
+			isLastCharUpper = false;
+			isLastCharLower = true;
+		} else {
+			isLastCharLower = toLowerCase(character) === character && toUpperCase(character) !== character;
+			isLastLastCharUpper = isLastCharUpper;
+			isLastCharUpper = toUpperCase(character) === character && toLowerCase(character) !== character;
+		}
+	}
+
+	return string;
+};
+
+const preserveConsecutiveUppercase = (input, toLowerCase) => {
+	LEADING_CAPITAL.lastIndex = 0;
+
+	return input.replace(LEADING_CAPITAL, m1 => toLowerCase(m1));
+};
+
+const postProcess = (input, toUpperCase) => {
+	SEPARATORS_AND_IDENTIFIER.lastIndex = 0;
+	NUMBERS_AND_IDENTIFIER.lastIndex = 0;
+
+	return input.replace(SEPARATORS_AND_IDENTIFIER, (_, identifier) => toUpperCase(identifier))
+		.replace(NUMBERS_AND_IDENTIFIER, m => toUpperCase(m));
+};
+
+const camelCase = (input, options) => {
+	if (!(typeof input === 'string' || Array.isArray(input))) {
+		throw new TypeError('Expected the input to be `string | string[]`');
+	}
+
+	options = {
+		pascalCase: false,
+		preserveConsecutiveUppercase: false,
+		...options
+	};
+
+	if (Array.isArray(input)) {
+		input = input.map(x => x.trim())
+			.filter(x => x.length)
+			.join('-');
+	} else {
+		input = input.trim();
+	}
+
+	if (input.length === 0) {
+		return '';
+	}
+
+	const toLowerCase = options.locale === false ?
+		string => string.toLowerCase() :
+		string => string.toLocaleLowerCase(options.locale);
+	const toUpperCase = options.locale === false ?
+		string => string.toUpperCase() :
+		string => string.toLocaleUpperCase(options.locale);
+
+	if (input.length === 1) {
+		return options.pascalCase ? toUpperCase(input) : toLowerCase(input);
+	}
+
+	const hasUpperCase = input !== toLowerCase(input);
+
+	if (hasUpperCase) {
+		input = preserveCamelCase(input, toLowerCase, toUpperCase);
+	}
+
+	input = input.replace(LEADING_SEPARATORS, '');
+
+	if (options.preserveConsecutiveUppercase) {
+		input = preserveConsecutiveUppercase(input, toLowerCase);
+	} else {
+		input = toLowerCase(input);
+	}
+
+	if (options.pascalCase) {
+		input = toUpperCase(input.charAt(0)) + input.slice(1);
+	}
+
+	return postProcess(input, toUpperCase);
+};
+
+camelcase.exports = camelCase;
+// TODO: Remove this for the next major release
+camelcase.exports.default = camelCase;
+
+var camelCase$1 = camelcase.exports;
+
+/**
+ * Suffixes a modifier value onto the end of a className, converting it to
+ * pascal case. i.e. turns suffixModifier("MyComponent--display", display)
+ * returns MyComponent--displayBlock.
+ *
+ * @param rootClassName The root className to append the suffix onto
+ * @param suffix The suffix to convert into pascal case.
+ */
+var suffixModifier = function (rootClassName, suffix) {
+    return "".concat(rootClassName).concat(camelCase$1(suffix, {
+        pascalCase: true
+    }));
+};
+
+var name = "@arc-ui/arc-ui";
+var homepage = "https://ui.digital-ent-int.bt.com";
+var author = "BT Business Digital UI Team <ui-digital-ent-int@bt.com>";
+var version = "12.0.0-beta.11";
+var engines = {
+	node: "20.x"
+};
+var devDependencies = {
+	"@commitlint/cli": "^17.1.2",
+	"@commitlint/config-conventional": "^17.1.0",
+	"@testing-library/dom": "^8.5.0",
+	"@testing-library/jest-dom": "^5.16.1",
+	"@testing-library/react": "^13.3.0",
+	"@testing-library/user-event": "^13.5.0",
+	"@types/jest": "^27.0.3",
+	"@types/testing-library__jest-dom": "^5.14.2",
+	"@typescript-eslint/eslint-plugin": "^4.5.0",
+	"@typescript-eslint/parser": "^4.5.0",
+	"conventional-recommended-bump": "^6.0.5",
+	eslint: "^7.27.0",
+	"eslint-config-react-app": "^6.0.0",
+	husky: "^8.0.0",
+	jest: "^27.4.3",
+	lerna: "^7.3.0",
+	"postcss-scss": "^4.0.3",
+	prettier: "^3.0.3",
+	"resize-observer-polyfill": "1.5.1",
+	semver: "^7.3.2",
+	"standard-changelog": "^2.0.21",
+	stylelint: "^14.5.3",
+	"stylelint-config-prettier": "^9.0.3",
+	"stylelint-config-standard": "^25.0.0",
+	"stylelint-config-suitcss": "^18.0.0",
+	"stylelint-selector-bem-pattern": "^2.1.1",
+	"ts-jest": "^27.1.0"
+};
+var scripts = {
+	build: "pnpm run build:deps && pnpm run build:components",
+	"build:deps": "pnpm run build:helpers && pnpm run build:icons && pnpm run build:tokens:web && pnpm run build:illustrations",
+	"build:components": "pnpm run --filter @arc-ui/components build",
+	"build:helpers": "pnpm run --filter @arc-ui/helpers build",
+	"build:icons": "pnpm run build:icons:bt && pnpm run build:icons:ee",
+	"build:icons:bt": "pnpm run --filter @arc-ui/icons-bt build",
+	"build:icons:ee": "pnpm run --filter @arc-ui/icons-ee build",
+	"build:illustrations": "pnpm run --filter @arc-ui/illustrations-bt build",
+	"build:tokens:web": "pnpm run build:tokens:arc && pnpm run build:tokens:bt:enterprise && pnpm run build:tokens:ee && pnpm run build:tokens:bt:business",
+	"build:tokens:arc": "pnpm run --filter @arc-ui/tokens-arc build",
+	"build:tokens:bt:enterprise": "pnpm run --filter @arc-ui/tokens-bt-enterprise build",
+	"build:tokens:bt:business": "pnpm run --filter @arc-ui/tokens-bt-business build",
+	"build:tokens:ee": "pnpm run --filter @arc-ui/tokens-ee build",
+	"build:storybook": "pnpm run --filter @arc-ui/components storybook:build",
+	"build:website": "pnpm run --filter website build && pnpm run build:website:storybook",
+	"build:website:quick": "pnpm run --filter website build && pnpm run build:website:storybook:copy",
+	"build:website:storybook": "pnpm run build:storybook && pnpm run build:website:storybook:copy",
+	"build:website:storybook:copy": "cp -R packages/arc-components/storybook-static apps/website/build/storybook",
+	changelog: "node scripts/create-changelog",
+	"internal:prettier": "prettier './**/*.{css,html,js,json,md,ts,tsx,scss}'",
+	"test:prettier": "pnpm run internal:prettier --check",
+	prettier: "pnpm run internal:prettier --write",
+	lint: "stylelint '**/*{.css,.scss}' && eslint .",
+	"lint:ci": "pnpm run lint --max-warnings 0",
+	"lint:commit-message": "pnpm dlx commitlint --edit $1",
+	precommit: "pnpm run lint && pnpm run test && pnpm run test:components:ci",
+	"start:storybook": "pnpm run --filter @arc-ui/components storybook:quiet",
+	"start:website": "pnpm run --filter website start",
+	test: "pnpm run test:prettier && pnpm run test:unit",
+	"test:components": "pnpm run --filter @arc-ui/components test:components",
+	"test:components:ci": "pnpm run --filter @arc-ui/components test:components:pipeline",
+	"test:components:changed": "node scripts/run-cypress-on-changed-files.js",
+	"test:coverage": "pnpm run test:unit --coverage",
+	"test:unit": "TZ=UTC jest",
+	"test:watch": "pnpm run test:unit --changedSince=origin/master --coverage --watch",
+	release: "conventional-recommended-bump -p angular | xargs pnpm version --no-git-tag-version",
+	"release-commit": "git add -u && git commit -m \"release: v${npm_package_version}\" --no-verify",
+	version: "pnpm run changelog && lerna version --force-publish -y --no-push --no-changelog --no-git-tag-version $npm_package_version",
+	"update-versions": "node scripts/update-versions",
+	prepare: "husky install",
+	prerelease: "lerna version --force-publish -y --no-push --no-changelog --no-git-tag-version",
+	"generate:component": "pnpm run --filter @arc-ui/components generate:component $1 "
+};
+var browserslist = [
+	"defaults",
+	"last 1 Chrome version",
+	"last 1 ChromeAndroid version",
+	"last 1 Edge version",
+	"last 1 Firefox version",
+	"Firefox ESR",
+	"Firefox 91",
+	"Firefox 78",
+	"Firefox 68",
+	"Safari >= 14",
+	"iOS >= 14",
+	"Samsung >= 16",
+	"not IE 11",
+	"not Edge < 18",
+	"not and_qq > 0",
+	"not UCAndroid > 0",
+	"not OperaMini all"
+];
+var pkg = {
+	name: name,
+	homepage: homepage,
+	author: author,
+	"private": true,
+	version: version,
+	engines: engines,
+	devDependencies: devDependencies,
+	scripts: scripts,
+	browserslist: browserslist
+};
+
+// @ts-ignore
+var getVersionClassName = function () {
+    return "arc-v".concat(pkg.version.replace(/\./g, "-"));
+};
+
+/**
+ * Helper function to measure the width of a given text using a specified font.
+ *
+ * @param text - The text to measure.
+ * @param font - (Optional) The font to use for measurement (e.g., "16px BT Curve").
+ * @returns The width of the text in pixels.
+ */
+var getTextWidth = function (text, font) {
+    var canvas = document.createElement("canvas");
+    var context = canvas.getContext("2d");
+    if (context) {
+        context.font = font || getComputedStyle(document.body).font;
+        return context.measureText(text).width;
+    }
+    return 0;
+};
+
+exports.__rest = __rest;
+exports.__spreadArray = __spreadArray;
+exports.filterDataAttrs = filterDataAttrs;
+exports.getTextWidth = getTextWidth;
+exports.getVersionClassName = getVersionClassName;
+exports.suffixModifier = suffixModifier;

package/dist/_shared/cjs/index.es-73f966b4.js

@@ -0,0 +1,13 @@
+'use strict';
+
+/**
+ * Do not edit directly
+ * Generated on Fri, 29 Nov 2024 12:01:11 GMT
+ */
+var SemSizeBreakpointsS = "636px"; // Small (SM) - 636px to 767px: This is often used for smartphones in landscape mode and small tablets.
+var SemSizeBreakpointsM = "768px"; // Medium (MD) - 768px to 991px: This is commonly used for larger tablets and smaller desktop screens.
+var SemSizeBreakpointsL = "1024px"; // Large (LG) - 1024px - 1279px: This breakpoint is often applied to larger desktop screens and some laptops.
+
+exports.SemSizeBreakpointsL = SemSizeBreakpointsL;
+exports.SemSizeBreakpointsM = SemSizeBreakpointsM;
+exports.SemSizeBreakpointsS = SemSizeBreakpointsS;

package/dist/_shared/cjs/{index.es-77def0c9.js → use-media-query-d34c83b9.js}

@@ -38,13 +38,4 @@ var useMediaQuery = function (mediaQuery) {
     return matches;
 };
 
-/**
- * Do not edit directly
- * Generated file
- */
-var ArcBreakpointM = 768;
-var ArcBreakpointL = 1024;
-
-exports.ArcBreakpointL = ArcBreakpointL;
-exports.ArcBreakpointM = ArcBreakpointM;
 exports.useMediaQuery = useMediaQuery;

package/dist/_shared/esm/Avatar-83528b82.js

@@ -0,0 +1,42 @@
+import { a as __assign, _ as __rest, f as filterDataAttrs } from './index.es-dce6c01d.js';
+import React__default from 'react';
+import { c as classNames } from './index-2e73c2e9.js';
+import { C as ConditionalWrapper } from './ConditionalWrapper-b85979de.js';
+import { T as ThemeIcon } from './ThemeIcon-933104d6.js';
+import { I as Image } from './Image-b38dd168.js';
+import { H as Heading } from './Heading-3427a6f3.js';
+
+var AvatarContent = function (_a) {
+    var img = _a.img, initials = _a.initials, _b = _a.size, size = _b === void 0 ? "xl" : _b;
+    var textSize = {
+        s: "xxxs",
+        m: "xxs",
+        l: "xs",
+        xl: "s"
+    };
+    var iconSize = {
+        s: 16,
+        m: 24,
+        l: 32,
+        xl: 40
+    };
+    if (img) {
+        return React__default.createElement(Image, __assign({ fit: "cover" }, img));
+    }
+    if (initials) {
+        return (React__default.createElement(Heading, { size: textSize[size] }, initials.substring(0, 3).toUpperCase()));
+    }
+    return React__default.createElement(ThemeIcon, { size: iconSize[size], icon: "avatarUser" });
+};
+
+/** Use `Avatar` to visually represent a user. */
+var Avatar = function (_a) {
+    var img = _a.img, initials = _a.initials, href = _a.href, title = _a.title, ariaLabel = _a.ariaLabel, onClick = _a.onClick, _b = _a.size, size = _b === void 0 ? "xl" : _b, props = __rest(_a, ["img", "initials", "href", "title", "ariaLabel", "onClick", "size"]);
+    var wrapperAttrs = __assign({ className: classNames("arc-Avatar", "arc-Avatar--".concat(size), {
+            "arc-Avatar--img": Boolean(img)
+        }) }, filterDataAttrs(props));
+    return (React__default.createElement(ConditionalWrapper, { condition: Boolean(href), wrapper: function (children) { return (React__default.createElement("a", __assign({ href: href, "aria-label": ariaLabel, onClick: onClick, title: title }, wrapperAttrs), children)); }, fallback: function (children) { return React__default.createElement("div", __assign({}, wrapperAttrs), children); } },
+        React__default.createElement(AvatarContent, { size: size, img: img, initials: initials })));
+};
+
+export { Avatar as A };

package/dist/_shared/esm/Badge-fa2e38c4.js

@@ -0,0 +1,11 @@
+import { _ as __rest, a as __assign, s as suffixModifier, f as filterDataAttrs } from './index.es-dce6c01d.js';
+import React__default from 'react';
+import { c as classNames } from './index-2e73c2e9.js';
+
+/** Use `Badge` as a static, non-interactive way to provide short updates. */
+var Badge = function (_a) {
+    var children = _a.children, _b = _a.state, state = _b === void 0 ? "default" : _b, ariaLabel = _a.ariaLabel, ariaRole = _a.ariaRole, props = __rest(_a, ["children", "state", "ariaLabel", "ariaRole"]);
+    return (React__default.createElement("div", __assign({ className: classNames("arc-Badge", suffixModifier("arc-Badge--state", state)) }, (ariaLabel && { "aria-label": ariaLabel }), (ariaRole && { role: ariaRole }), filterDataAttrs(props)), children));
+};
+
+export { Badge as B };

package/dist/_shared/esm/Box-b4b5b755.js

@@ -0,0 +1,23 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-dce6c01d.js';
+import React__default from 'react';
+import { c as classNames } from './index-2e73c2e9.js';
+import { S as Surface } from './Surface-a19b8f20.js';
+
+/**
+ * Use `Box` as a simple way to group bespoke content and interactive elements together.
+ */
+var Box = function (_a) {
+    var _b;
+    var children = _a.children, borderWidth = _a.borderWidth, elevationLevel = _a.elevationLevel, padding = _a.padding, _c = _a.isFullHeight, isFullHeight = _c === void 0 ? false : _c, _d = _a.isBorderRadius, isBorderRadius = _d === void 0 ? false : _d, _e = _a.surface, surface = _e === void 0 ? "light-white" : _e, isSurfaceTransparent = _a.isSurfaceTransparent, props = __rest(_a, ["children", "borderWidth", "elevationLevel", "padding", "isFullHeight", "isBorderRadius", "surface", "isSurfaceTransparent"]);
+    return (React__default.createElement("div", __assign({ className: classNames("arc-Box", (_b = {},
+            _b["arc-Box--fullHeight"] = isFullHeight,
+            _b["arc-Box--borderRadius"] = isBorderRadius,
+            _b["arc-Box--borderThin"] = borderWidth === "thin",
+            _b["arc-Box--borderMedium"] = borderWidth === "medium",
+            _b["arc-Box--elevation1"] = elevationLevel === "1",
+            _b["arc-Box--elevation2"] = elevationLevel === "2",
+            _b)) }, filterDataAttrs(props)),
+        React__default.createElement(Surface, { padding: padding, background: surface, isTransparent: isSurfaceTransparent }, children)));
+};
+
+export { Box as B };

package/dist/_shared/esm/{BrandLogo-1af78f76.js → BrandLogo-9aec8206.js}

@@ -1,8 +1,7 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
+import { _ as __rest, a as __assign, s as suffixModifier, f as filterDataAttrs } from './index.es-dce6c01d.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { useContext } from 'react';
-import { s as suffixModifier } from './suffix-modifier-3d548e45.js';
-import { C as Context } from './Surface-0ca6817d.js';
+import { C as Context } from './Surface-a19b8f20.js';
 
 /**
  * Use `BrandLogo` to display the brand logo.

package/dist/_shared/esm/{Breadcrumbs-c4b65cff.js → Breadcrumbs-6bbeed2e.js}

@@ -1,28 +1,29 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
+import { a as __assign, _ as __rest, f as filterDataAttrs } from './index.es-dce6c01d.js';
 import React__default, { useRef, useState, useEffect } from 'react';
-import { d as debounce_1 } from './debounce-6fed6b84.js';
-import { T as ThemeIcon } from './ThemeIcon-eab5a4d0.js';
+import { d as debounce_1 } from './debounce-c8e41002.js';
+import { I as Icon } from './Icon-21868dfc.js';
+import { B as BtIconChevronLeft2Px, a as BtIconChevronRight2Px } from './BtIconChevronRight2Px.esm-c939e317.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
 
 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(ThemeIcon, { icon: "breadcrumbLeft" }))),
+    var spacerIconAfter = _a.spacerIconAfter, spacerIconBefore = _a.spacerIconBefore, children = _a.children;
+    return (React__default.createElement("li", { className: "arc-Breadcrumbs-item" },
+        spacerIconBefore && (React__default.createElement("div", { className: "arc-Breadcrumbs-spacerIcon", "data-testid": "arc-chevron-left-2px", "aria-hidden": "true" },
+            React__default.createElement(Icon, { icon: BtIconChevronLeft2Px }))),
         children,
-        spacerIconAfter && (React__default.createElement("div", { className: "arc-Breadcrumbs-spacerIcon" },
-            React__default.createElement(ThemeIcon, { icon: "breadcrumbRight" })))));
+        spacerIconAfter && (React__default.createElement("div", { className: "arc-Breadcrumbs-spacerIcon", "aria-hidden": "true" },
+            React__default.createElement(Icon, { icon: BtIconChevronRight2Px })))));
 };
 
 var BreadcrumbsLink = React__default.forwardRef(function (_a, ref) {
-    var onClick = _a.onClick, href = _a.href, isActive = _a.isActive, children = _a.children, props = __rest(_a, ["onClick", "href", "isActive", "children"]);
-    return (React__default.createElement(React__default.Fragment, null, isActive || href === undefined ? (React__default.createElement("span", __assign({}, (isActive && { "aria-hidden": "true" }), { onClick: onClick, className: classNames({
+    var onClick = _a.onClick, href = _a.href, isActive = _a.isActive, children = _a.children;
+    return (React__default.createElement(React__default.Fragment, null, isActive || href === undefined ? (React__default.createElement("span", { onClick: onClick, className: classNames({
             "arc-Breadcrumbs-text": true,
             "arc-Breadcrumbs-text--active": isActive
-        }) }, filterDataAttrs(props)), children)) : (React__default.createElement("a", __assign({}, (onClick && ref
+        }) }, children)) : (React__default.createElement("a", __assign({}, (onClick && ref
         ? { onClick: onClick }
-        : { onClick: handleLinkClick({ handler: onClick }) }), { className: "arc-Breadcrumbs-text", ref: ref, href: href }, filterDataAttrs(props)), children))));
+        : { onClick: handleLinkClick({ handler: onClick }) }), { className: "arc-Breadcrumbs-text", ref: ref, href: href }), children))));
 });
 
 /** Use `Breadcrumbs` to add a secondary navigation scheme that reveals the user’s location. Each item should be wrapped with `Breadcrumbs.Item` */
@@ -66,11 +67,11 @@ var Breadcrumbs = function (_a) {
         // eslint-disable-next-line
     }, []);
     var items = React__default.Children.toArray(children);
-    return (React__default.createElement("nav", __assign({ "aria-label": "Breadcrumbs", role: "navigation", className: classNames({
+    return (React__default.createElement("nav", __assign({ "aria-label": "Breadcrumbs", className: classNames({
             "arc-Breadcrumbs": true,
             "arc-Breadcrumbs--light": isLight
         }) }, filterDataAttrs(props)),
-        React__default.createElement("ul", { className: "arc-Breadcrumbs-list", ref: breadcrumbsList }, showBackTrail ? (React__default.createElement(React__default.Fragment, null, items.length < 3 ? (React__default.createElement(Breadcrumbs.Item, { spacerIconBefore: true }, items[0].props.children)) : (React__default.createElement(Breadcrumbs.Item, { spacerIconBefore: true }, items[items.length - 2].props.children)))) : (React__default.createElement(React__default.Fragment, null, isCompressed ? (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("ol", { className: "arc-Breadcrumbs-list", ref: breadcrumbsList }, showBackTrail ? (React__default.createElement(React__default.Fragment, null, items.length < 3 ? (React__default.createElement(Breadcrumbs.Item, { spacerIconBefore: true }, items[0].props.children)) : (React__default.createElement(Breadcrumbs.Item, { spacerIconBefore: true }, items[items.length - 2].props.children)))) : (React__default.createElement(React__default.Fragment, null, isCompressed ? (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(Breadcrumbs.Item, { spacerIconAfter: true }, items[0].props.children),
             React__default.createElement(Breadcrumbs.Item, { spacerIconAfter: true },
                 React__default.createElement("button", { className: "arc-Breadcrumbs-expand arc-Breadcrumbs-text", onClick: function () { return setIsCompressed(false); }, "aria-label": "Expand Breadcrumbs", type: "button", "data-testid": "expand-ellipsis" }, "...")),

package/dist/_shared/esm/BtIconArrowRight.esm-93da96bb.js

@@ -0,0 +1,24 @@
+import React__default from 'react';
+
+const BtIconArrowRight = (props) =>
+  /*#__PURE__*/ React__default.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default.createElement("defs", null),
+    /*#__PURE__*/ React__default.createElement("path", {
+      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
+      fill: "currentColor",
+    }),
+    /*#__PURE__*/ React__default.createElement("path", {
+      d: "M18.14648,11.64648a.49983.49983,0,0,0,0,.707L21.293,15.5H9.5a.5.5,0,0,0,0,1H21.293l-3.14649,3.14648a.5.5,0,1,0,.707.707L23.207,16l-4.35351-4.35352A.49983.49983,0,0,0,18.14648,11.64648Z",
+      fill: "currentColor",
+    }),
+  );
+
+export { BtIconArrowRight as B };