@arc-ui/components 11.5.0 → 11.7.0

package/dist/TextInput/TextInput.cjs.js

@@ -2,85 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
-var index = require('../_shared/cjs/index-45bfb67b.js');
-var React = require('react');
-var FormControl = require('../_shared/cjs/FormControl-42360ae8.js');
-var Surface = require('../_shared/cjs/Surface-6da0a78e.js');
-var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-e2c8b291.js');
+var TextInput = require('../_shared/cjs/TextInput-b768e346.js');
+require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
+require('../_shared/cjs/index-45bfb67b.js');
+require('react');
+require('../_shared/cjs/FormControl-78b007b7.js');
 require('../_shared/cjs/BtIconAlert-637db790.js');
-require('../_shared/cjs/DisclosureMini-5af13d3c.js');
+require('../_shared/cjs/Surface-b7c51b2b.js');
+require('../_shared/cjs/DisclosureMini-2a10006e.js');
 require('../_shared/cjs/BtIconChevronDown2Px-8fb4e2eb.js');
-require('../_shared/cjs/Text-6f2827e6.js');
+require('../_shared/cjs/Text-555a29a4.js');
 require('../_shared/cjs/suffix-modifier-1ee2da04.js');
-require('../_shared/cjs/VerticalSpace-86f697e7.js');
+require('../_shared/cjs/VisuallyHidden-e2c8b291.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-/**
- * Infer the correct inputMode, pattern and type if specifying a `number` type.
- */
-var useNumericInput = function (props) {
-    var type = props.type === "number" ? "text" : props.type;
-    var inputMode = props.inputMode;
-    if (!props.inputMode) {
-        if (props.type === "email") {
-            inputMode = "email";
-        }
-        else if (props.type === "number") {
-            inputMode = "numeric";
-        }
-        else if (props.type === "tel") {
-            inputMode = "tel";
-        }
-        else if (props.type === "url") {
-            inputMode = "url";
-        }
-    }
-    var pattern = props.pattern;
-    if (!props.pattern && props.type === "number") {
-        pattern = "[0-9]*";
-    }
-    return { inputMode: inputMode, pattern: pattern, type: type };
-};
-
-/**
- * Use `TextInput` to allow custom user text entry with a keyboard.
- */
-var TextInput = React.forwardRef(function (_a, ref) {
-    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, inputMode = _a.inputMode, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, label = _a.label, _f = _a.labelSize, labelSize = _f === void 0 ? "l" : _f, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, _h = _a.showPassword, showPassword = _h === void 0 ? false : _h, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, props = filterDataAttrs.__rest(_a, ["defaultValue", "errorMessage", "helper", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText"]);
-    var surface = React.useContext(Surface.Context).surface;
-    var _j = React.useState(false), showPasswordToggle = _j[0], setShowPasswordToggle = _j[1];
-    var inferredInputProps = useNumericInput({
-        inputMode: inputMode,
-        pattern: pattern,
-        type: showPasswordToggle ? "text" : type
-    });
-    // Although this is used within FormControlWrapper, it's deterministic so we can call it here too
-    var ariaDescribedby = FormControl.useAriaDescribedby({
-        errorMessage: errorMessage,
-        id: id,
-        helper: helper,
-        disclosureText: disclosureText
-    }).ariaDescribedby;
-    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames({
-            "arc-TextInput": true,
-            "arc-TextInput--withPasswordToggle": showPassword,
-            "arc-TextInput--invalid": errorMessage,
-            "arc-TextInput--onDarkSurface": surface === "dark"
-        }) }, filterDataAttrs.filterDataAttrs(props)),
-        React__default["default"].createElement(FormControl.FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
-            React__default["default"].createElement("div", { className: "arc-TextInput-inputWrapper" },
-                React__default["default"].createElement("input", filterDataAttrs.__assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined }, inferredInputProps)),
-                showPassword && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement("button", { className: "arc-TextInput-passwordToggle", onClick: function () { return setShowPasswordToggle(function (p) { return !p; }); }, type: "button" }, showPasswordToggle ? "Hide" : "Show"),
-                    React__default["default"].createElement(VisuallyHidden.VisuallyHidden, null,
-                        React__default["default"].createElement("div", { "aria-live": "polite" },
-                            React__default["default"].createElement("p", null, showPasswordToggle
-                                ? "Your password is shown"
-                                : "Your password is hidden")))))))));
-});
-
-exports.TextInput = TextInput;
+exports.TextInput = TextInput.TextInput;

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

@@ -1,75 +1 @@
-/// <reference types="react" />
-import React from "react";
-import { FC } from "react";
-import { FormControlProps } from "../_shared/esm/FormControl-0744f93f";
-type EventType = React.ChangeEvent<HTMLInputElement>;
-/**
- * Use `TextInput` to allow custom user text entry with a keyboard.
- */
-declare const TextInput: FC<TextInputProps>;
-interface TextInputProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel"> {
-    /**
-     * Uncontrolled default value of the TextInput. If the TextInput is controlled
-     * via `value`/`onChange`, `defaultValue` will be ignored.
-     */
-    defaultValue?: string;
-    /**
-     * ID for the TextInput.
-     */
-    id: string;
-    /**
-     * Mode for the input. If not defined, inferred by type.
-     */
-    inputMode?: "email" | "numeric" | "tel" | "url";
-    /**
-     * Should the control be disabled?
-     */
-    isDisabled?: boolean;
-    /**
-     * Should the control be read-only?
-     */
-    isReadOnly?: boolean;
-    /**
-     * Should the control be required?
-     */
-    isRequired?: boolean;
-    /**
-     * Maximum number of characters.
-     */
-    maxLength?: number;
-    /**
-     * Minimum number of characters.
-     */
-    minLength?: number;
-    /**
-     * Name of the input.
-     */
-    name?: string;
-    /**
-     * Function to call when the TextInput loses focus.
-     */
-    onBlur?: (e: EventType) => void;
-    /**
-     * Callback function commonly used to update the TextInput's controlled
-     * `value`, for example `e => setValue(e.target.value)`.
-     */
-    onChange?: (e: EventType) => void;
-    /**
-     * Validation regex pattern.
-     */
-    pattern?: string;
-    /**
-     * Enable button to toggle TextInput type from `Selected Type` to `Text`
-     */
-    showPassword?: boolean;
-    /**
-     * Type for the input. `number` will be changed to `text` and set the `numeric` inputMode.
-     */
-    type?: "email" | "number" | "password" | "tel" | "text" | "url";
-    /**
-     * Current value of the TextInput. Must be controlled via an
-     * `onChange` callback function. Otherwise, use `defaultValue` (or `isReadOnly`).
-     */
-    value?: string;
-}
-export { TextInput };
+export { TextInput } from "../_shared/esm/TextInput-7ed03a48";

package/dist/TextInput/TextInput.esm.js

@@ -1,78 +1,12 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-afdb7d32.js';
-import { c as classNames } from '../_shared/esm/index-2ae58626.js';
-import React__default, { forwardRef, useContext, useState } from 'react';
-import { u as useAriaDescribedby, F as FormControl } from '../_shared/esm/FormControl-0744f93f.js';
-import { C as Context } from '../_shared/esm/Surface-bb100ef8.js';
-import { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-b9eebf71.js';
+export { T as TextInput } from '../_shared/esm/TextInput-62bb7dee.js';
+import '../_shared/esm/filter-data-attrs-afdb7d32.js';
+import '../_shared/esm/index-2ae58626.js';
+import 'react';
+import '../_shared/esm/FormControl-2fa7aae5.js';
 import '../_shared/esm/BtIconAlert-55a6ed5c.js';
-import '../_shared/esm/DisclosureMini-322fccc0.js';
+import '../_shared/esm/Surface-dde51789.js';
+import '../_shared/esm/DisclosureMini-78a8f392.js';
 import '../_shared/esm/BtIconChevronDown2Px-782876e2.js';
-import '../_shared/esm/Text-00e9743b.js';
+import '../_shared/esm/Text-14deb70e.js';
 import '../_shared/esm/suffix-modifier-7e640670.js';
-import '../_shared/esm/VerticalSpace-93980c9c.js';
-
-/**
- * Infer the correct inputMode, pattern and type if specifying a `number` type.
- */
-var useNumericInput = function (props) {
-    var type = props.type === "number" ? "text" : props.type;
-    var inputMode = props.inputMode;
-    if (!props.inputMode) {
-        if (props.type === "email") {
-            inputMode = "email";
-        }
-        else if (props.type === "number") {
-            inputMode = "numeric";
-        }
-        else if (props.type === "tel") {
-            inputMode = "tel";
-        }
-        else if (props.type === "url") {
-            inputMode = "url";
-        }
-    }
-    var pattern = props.pattern;
-    if (!props.pattern && props.type === "number") {
-        pattern = "[0-9]*";
-    }
-    return { inputMode: inputMode, pattern: pattern, type: type };
-};
-
-/**
- * Use `TextInput` to allow custom user text entry with a keyboard.
- */
-var TextInput = forwardRef(function (_a, ref) {
-    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, inputMode = _a.inputMode, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, label = _a.label, _f = _a.labelSize, labelSize = _f === void 0 ? "l" : _f, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, _h = _a.showPassword, showPassword = _h === void 0 ? false : _h, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText"]);
-    var surface = useContext(Context).surface;
-    var _j = useState(false), showPasswordToggle = _j[0], setShowPasswordToggle = _j[1];
-    var inferredInputProps = useNumericInput({
-        inputMode: inputMode,
-        pattern: pattern,
-        type: showPasswordToggle ? "text" : type
-    });
-    // Although this is used within FormControlWrapper, it's deterministic so we can call it here too
-    var ariaDescribedby = useAriaDescribedby({
-        errorMessage: errorMessage,
-        id: id,
-        helper: helper,
-        disclosureText: disclosureText
-    }).ariaDescribedby;
-    return (React__default.createElement("div", __assign({ className: classNames({
-            "arc-TextInput": true,
-            "arc-TextInput--withPasswordToggle": showPassword,
-            "arc-TextInput--invalid": errorMessage,
-            "arc-TextInput--onDarkSurface": surface === "dark"
-        }) }, filterDataAttrs(props)),
-        React__default.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
-            React__default.createElement("div", { className: "arc-TextInput-inputWrapper" },
-                React__default.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined }, inferredInputProps)),
-                showPassword && (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement("button", { className: "arc-TextInput-passwordToggle", onClick: function () { return setShowPasswordToggle(function (p) { return !p; }); }, type: "button" }, showPasswordToggle ? "Hide" : "Show"),
-                    React__default.createElement(VisuallyHidden, null,
-                        React__default.createElement("div", { "aria-live": "polite" },
-                            React__default.createElement("p", null, showPasswordToggle
-                                ? "Your password is shown"
-                                : "Your password is hidden")))))))));
-});
-
-export { TextInput };
+import '../_shared/esm/VisuallyHidden-b9eebf71.js';

package/dist/UniversalHeader/UniversalHeader.cjs.d.ts

@@ -1,26 +1 @@
-import { FC, ReactNode } from "react";
-/**
- * Use `UniversalHeader` to display a group-level page header.
- */
-declare const UniversalHeader: FC<UniversalHeaderProps> & {
-    Item: typeof UniversalHeaderItem;
-};
-declare const UniversalHeaderItem: FC<UniversalHeaderItemProps>;
-interface UniversalHeaderItemProps {
-    /**
-     * Contents of the UniversalHeaderItem.
-     */
-    children: ReactNode;
-    /**
-     * A URL to link to when the Item is clicked or touched.
-     */
-    href: string;
-}
-interface UniversalHeaderProps {
-    /**
-     * Contents of the UniversalHeader. Must be
-     * UniversalHeader.Item components.
-     */
-    children: ReactNode;
-}
-export { UniversalHeader };
+export { UniversalHeader } from "../_shared/cjs/UniversalHeader-da622e1a";

package/dist/UniversalHeader/UniversalHeader.cjs.js

@@ -2,37 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
-var React = require('react');
-var Surface = require('../_shared/cjs/Surface-6da0a78e.js');
+var UniversalHeader = require('../_shared/cjs/UniversalHeader-da622e1a.js');
+require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
+require('react');
+require('../_shared/cjs/Surface-b7c51b2b.js');
 require('../_shared/cjs/index-45bfb67b.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-/**
- * Use `UniversalHeader` to display a group-level page header.
- */
-var UniversalHeader = function (_a) {
-    var children = _a.children, props = filterDataAttrs.__rest(_a, ["children"]);
-    React.useEffect(function () {
-        React__default["default"].Children.map(children, function (item) {
-            if (item && item.type !== UniversalHeaderItem) {
-                throw new Error("Illegal child passed to <UniversalHeader />. Ensure to only use <UniversalHeader.Item />.");
-            }
-        });
-    }, [children]);
-    return (React__default["default"].createElement("nav", filterDataAttrs.__assign({ className: "arc-UniversalHeader" }, filterDataAttrs.filterDataAttrs(props)),
-        React__default["default"].createElement(Surface.Surface, { background: "light" },
-            React__default["default"].createElement("ul", { className: "arc-UniversalHeader-items" }, children))));
-};
-var UniversalHeaderItem = function (_a) {
-    var children = _a.children, href = _a.href, props = filterDataAttrs.__rest(_a, ["children", "href"]);
-    return (React__default["default"].createElement("li", filterDataAttrs.__assign({}, filterDataAttrs.filterDataAttrs(props)),
-        React__default["default"].createElement("a", { className: "arc-UniversalHeader-link", href: href }, children)));
-};
-UniversalHeaderItem.displayName = "UniversalHeader.Item";
-UniversalHeader.Item = UniversalHeaderItem;
-
-exports.UniversalHeader = UniversalHeader;
+exports.UniversalHeader = UniversalHeader.UniversalHeader;

package/dist/UniversalHeader/UniversalHeader.esm.d.ts

@@ -1,26 +1 @@
-import { FC, ReactNode } from "react";
-/**
- * Use `UniversalHeader` to display a group-level page header.
- */
-declare const UniversalHeader: FC<UniversalHeaderProps> & {
-    Item: typeof UniversalHeaderItem;
-};
-declare const UniversalHeaderItem: FC<UniversalHeaderItemProps>;
-interface UniversalHeaderItemProps {
-    /**
-     * Contents of the UniversalHeaderItem.
-     */
-    children: ReactNode;
-    /**
-     * A URL to link to when the Item is clicked or touched.
-     */
-    href: string;
-}
-interface UniversalHeaderProps {
-    /**
-     * Contents of the UniversalHeader. Must be
-     * UniversalHeader.Item components.
-     */
-    children: ReactNode;
-}
-export { UniversalHeader };
+export { UniversalHeader } from "../_shared/esm/UniversalHeader-1c5a886d";

package/dist/UniversalHeader/UniversalHeader.esm.js

@@ -1,30 +1,5 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-afdb7d32.js';
-import React__default, { useEffect } from 'react';
-import { S as Surface } from '../_shared/esm/Surface-bb100ef8.js';
+export { U as UniversalHeader } from '../_shared/esm/UniversalHeader-1c5a886d.js';
+import '../_shared/esm/filter-data-attrs-afdb7d32.js';
+import 'react';
+import '../_shared/esm/Surface-dde51789.js';
 import '../_shared/esm/index-2ae58626.js';
-
-/**
- * Use `UniversalHeader` to display a group-level page header.
- */
-var UniversalHeader = function (_a) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    useEffect(function () {
-        React__default.Children.map(children, function (item) {
-            if (item && item.type !== UniversalHeaderItem) {
-                throw new Error("Illegal child passed to <UniversalHeader />. Ensure to only use <UniversalHeader.Item />.");
-            }
-        });
-    }, [children]);
-    return (React__default.createElement("nav", __assign({ className: "arc-UniversalHeader" }, filterDataAttrs(props)),
-        React__default.createElement(Surface, { background: "light" },
-            React__default.createElement("ul", { className: "arc-UniversalHeader-items" }, children))));
-};
-var UniversalHeaderItem = function (_a) {
-    var children = _a.children, href = _a.href, props = __rest(_a, ["children", "href"]);
-    return (React__default.createElement("li", __assign({}, filterDataAttrs(props)),
-        React__default.createElement("a", { className: "arc-UniversalHeader-link", href: href }, children)));
-};
-UniversalHeaderItem.displayName = "UniversalHeader.Item";
-UniversalHeader.Item = UniversalHeaderItem;
-
-export { UniversalHeader };

package/dist/_shared/cjs/Box-ebe2b7be.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+import { SurfaceBackgroundColor, SurfacePadding } from "./Surface-b7c51b2b";
+/**
+ * Use `Box` as a simple way to group bespoke content and interactive elements together.
+ */
+declare const Box: FC<BoxProps>;
+interface BoxProps {
+    /**
+     * Contents of the Box.
+     */
+    children: React.ReactNode;
+    /**
+     * Set Box to fill parent element.
+     */
+    isFullHeight?: boolean;
+    /**
+     * Add rounded corners to the box.
+     */
+    isBorderRadius?: boolean;
+    /**
+     * The border width of the box.
+     */
+    borderWidth?: "thin" | "medium";
+    /**
+     * Box shadow for the box.
+     */
+    elevationLevel?: "1" | "2";
+    /**
+     * Padding for the box.
+     */
+    padding?: SurfacePadding;
+    /**
+     * Background color for the box.
+     */
+    surface?: SurfaceBackgroundColor;
+}
+export { Box, BoxProps };

package/dist/_shared/cjs/Box-ebe2b7be.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var filterDataAttrs = require('./filter-data-attrs-a30dcf5f.js');
+var React = require('react');
+var index = require('./index-45bfb67b.js');
+var Surface = require('./Surface-b7c51b2b.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+// Do equal height boxes story
+/**
+ * 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 ? "white" : _e, props = filterDataAttrs.__rest(_a, ["children", "borderWidth", "elevationLevel", "padding", "isFullHeight", "isBorderRadius", "surface"]);
+    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.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.filterDataAttrs(props)),
+        React__default["default"].createElement(Surface.Surface, { padding: padding, background: surface }, children)));
+};
+
+exports.Box = Box;

package/dist/_shared/cjs/{BrandLogo-8008f0c4.js → BrandLogo-8107d59f.js}

@@ -4,7 +4,7 @@ var filterDataAttrs = require('./filter-data-attrs-a30dcf5f.js');
 var index = require('./index-45bfb67b.js');
 var React = require('react');
 var suffixModifier = require('./suffix-modifier-1ee2da04.js');
-var Surface = require('./Surface-6da0a78e.js');
+var Surface = require('./Surface-b7c51b2b.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/_shared/cjs/Breadcrumbs-9f580f69.d.ts

@@ -0,0 +1,61 @@
+/// <reference types="react" />
+import React from "react";
+import { FC, ReactNode } from "react";
+declare const BreadcrumbsLink: FC<LinkProps>;
+interface LinkProps {
+    /**
+     * Render children of `breadcrumbs.link`
+     */
+    children?: ReactNode;
+    /**
+     * Where breadcrumb linkshould lead too
+     */
+    href?: string;
+    /**
+     * Pass a function to the breadcrumb item
+     */
+    onClick?: () => void;
+    /**
+     * Highlights item in breadcrumb (This also removes the a tag and any links)
+     */
+    isActive?: boolean;
+    /**
+     * Ref to `<a>` tag
+     */
+    ref?: React.Ref<HTMLAnchorElement>;
+    /**
+     * React router property
+     */
+    navigate?: () => void;
+}
+declare const BreadcrumbsItem: FC<ItemProps>;
+interface ItemProps {
+    /**
+     * Render child elements within `Breadcrumbs.Item`
+     */
+    children?: ReactNode;
+    /**
+     * Use icon as a spacer that will be positioned after `Breadcrumbs.Item`.
+     */
+    spacerIconAfter?: boolean;
+    /**
+     * Use icon as a spacer that will be positioned before `Breadcrumbs.Item`.
+     */
+    spacerIconBefore?: boolean;
+}
+/** Use `Breadcrumbs` to add a secondary navigation scheme that reveals the user’s location. Each item should be wrapped with `Breadcrumbs.Item` */
+declare const Breadcrumbs: FC<BreadcrumbsProps> & {
+    Item: typeof BreadcrumbsItem;
+    Link: typeof BreadcrumbsLink;
+};
+interface BreadcrumbsProps {
+    /**
+     * Contents of the Breadcrumbs. Should only contain `Breadcrumb.Item`.
+     */
+    children: ReactNode;
+    /**
+     * Select if you want the Nav items to be Light
+     */
+    isLight?: boolean;
+}
+export { BreadcrumbsLink as default, LinkProps, ItemProps, Breadcrumbs, BreadcrumbsProps };

package/dist/_shared/cjs/Breadcrumbs-9f580f69.js

@@ -0,0 +1,106 @@
+'use strict';
+
+var React = require('react');
+var debounce = require('./debounce-506538c5.js');
+var BtIconChevronRight2Px = require('./BtIconChevronRight2Px-a8e40136.js');
+var Icon = require('./Icon-e1dd45eb.js');
+var filterDataAttrs = require('./filter-data-attrs-a30dcf5f.js');
+var index = require('./index-45bfb67b.js');
+var handleLinkClick = require('./handle-link-click-17a44cf4.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var BreadcrumbsItem = function (_a) {
+    var spacerIconAfter = _a.spacerIconAfter, spacerIconBefore = _a.spacerIconBefore, children = _a.children;
+    return (React__default["default"].createElement("li", { className: "arc-Breadcrumbs-item" },
+        spacerIconBefore && (React__default["default"].createElement("div", { className: "arc-Breadcrumbs-spacerIcon", "data-testid": "arc-chevron-left-2px" },
+            React__default["default"].createElement(Icon.Icon, { icon: BtIconChevronRight2Px.BtIconChevronLeft2Px_2 }))),
+        children,
+        spacerIconAfter && (React__default["default"].createElement("div", { className: "arc-Breadcrumbs-spacerIcon" },
+            React__default["default"].createElement(Icon.Icon, { icon: BtIconChevronRight2Px.BtIconChevronRight2Px_2 })))));
+};
+
+var BreadcrumbsLink = React__default["default"].forwardRef(function (_a, ref) {
+    var onClick = _a.onClick, href = _a.href, isActive = _a.isActive, children = _a.children;
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, isActive || href === undefined ? (React__default["default"].createElement("span", filterDataAttrs.__assign({}, (isActive && { "aria-hidden": "true" }), { onClick: onClick, className: index.classNames({
+            "arc-Breadcrumbs-text": true,
+            "arc-Breadcrumbs-text--active": isActive
+        }) }), children)) : (React__default["default"].createElement("a", filterDataAttrs.__assign({}, (onClick && ref
+        ? { onClick: onClick }
+        : { onClick: handleLinkClick.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` */
+var Breadcrumbs = function (_a) {
+    var isLight = _a.isLight, children = _a.children;
+    var breadcrumbsList = React.useRef(null);
+    var _b = React.useState(false), isCompressed = _b[0], setIsCompressed = _b[1];
+    var _c = React.useState(false), showBackTrail = _c[0], setShowBackTrail = _c[1];
+    React.useEffect(function () {
+        React__default["default"].Children.map(children, function (item) {
+            if (item && item.type !== BreadcrumbsItem) {
+                throw new Error("Illegal child passed to <Breadcrumbs />. Ensure to only use <Breadcrumbs.Item />");
+            }
+        });
+    }, [children]);
+    React.useEffect(function () {
+        var handleResize = debounce.debounce_1(function () {
+            var _a;
+            setShowBackTrail(false);
+            setIsCompressed(false);
+            if (window.innerWidth < 426) {
+                setShowBackTrail(true);
+            }
+            /**
+             * TODO! Revise this if statement
+             */
+            if (children != null &&
+                React__default["default"].Children.count(children) > 2 &&
+                breadcrumbsList.current != null &&
+                (breadcrumbsList.current.offsetWidth ===
+                    ((_a = breadcrumbsList.current.parentElement) === null || _a === void 0 ? void 0 : _a.offsetWidth) ||
+                    breadcrumbsList.current.offsetHeight > 24)) {
+                setIsCompressed(true);
+            }
+        }, 200);
+        handleResize();
+        window.addEventListener("resize", handleResize);
+        return function () {
+            window.removeEventListener("resize", handleResize);
+        };
+        // eslint-disable-next-line
+    }, []);
+    var items = React__default["default"].Children.toArray(children);
+    return (React__default["default"].createElement("nav", { "aria-label": "Breadcrumbs", role: "navigation", className: index.classNames({
+            "arc-Breadcrumbs": true,
+            "arc-Breadcrumbs--dark": isLight
+        }) },
+        React__default["default"].createElement("ul", { className: "arc-Breadcrumbs-list", ref: breadcrumbsList }, showBackTrail ? (React__default["default"].createElement(React__default["default"].Fragment, null, items.length < 3 ? (React__default["default"].createElement(Breadcrumbs.Item, { spacerIconBefore: true }, items[0].props.children)) : (React__default["default"].createElement(Breadcrumbs.Item, { spacerIconBefore: true }, items[items.length - 2].props.children)))) : (React__default["default"].createElement(React__default["default"].Fragment, null, isCompressed ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(Breadcrumbs.Item, { spacerIconAfter: true }, items[0].props.children),
+            React__default["default"].createElement(Breadcrumbs.Item, { spacerIconAfter: true },
+                React__default["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" }, "...")),
+            React__default["default"].createElement(Breadcrumbs.Item, null, items[items.length - 1].props &&
+                items[items.length - 1].props.children &&
+                React__default["default"].cloneElement(items[items.length - 1].props.children, {
+                    isActive: true
+                })))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+            items
+                .slice(0, items.length - 1)
+                .map(function (item, index) {
+                return (React__default["default"].createElement(React__default["default"].Fragment, { key: "listItem-".concat(index) },
+                    React__default["default"].createElement(Breadcrumbs.Item, { spacerIconAfter: true }, item.props.children)));
+            }),
+            React__default["default"].createElement(Breadcrumbs.Item, null, items[items.length - 1].props &&
+                items[items.length - 1].props.children &&
+                React__default["default"].cloneElement(items[items.length - 1].props.children, {
+                    isActive: items.length > 1
+                })))))))));
+};
+BreadcrumbsItem.displayName = "Breadcrumbs.Item";
+BreadcrumbsLink.displayName = "Breadcrumbs.Link";
+Breadcrumbs.Item = BreadcrumbsItem;
+Breadcrumbs.Link = BreadcrumbsLink;
+
+exports.Breadcrumbs = Breadcrumbs;