@arc-ui/components 11.5.0 → 11.6.0

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-1631dbc4.js';
+import '../_shared/esm/filter-data-attrs-afdb7d32.js';
+import '../_shared/esm/index-2ae58626.js';
+import 'react';
+import '../_shared/esm/FormControl-5e3fdca3.js';
 import '../_shared/esm/BtIconAlert-55a6ed5c.js';
-import '../_shared/esm/DisclosureMini-322fccc0.js';
+import '../_shared/esm/Surface-bb100ef8.js';
+import '../_shared/esm/DisclosureMini-022beae3.js';
 import '../_shared/esm/BtIconChevronDown2Px-782876e2.js';
 import '../_shared/esm/Text-00e9743b.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-cc1d9e5a";

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-cc1d9e5a.js');
+require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
+require('react');
+require('../_shared/cjs/Surface-6da0a78e.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-7926abde";

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-7926abde.js';
+import '../_shared/esm/filter-data-attrs-afdb7d32.js';
+import 'react';
+import '../_shared/esm/Surface-bb100ef8.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/Breadcrumbs-8b554370.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-8b554370.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-9ae8dbe1.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;

package/dist/_shared/cjs/BtIconChevronLeftMid-df952a3e.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 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;
+
+exports.BtIconChevronLeftMid_2 = BtIconChevronLeftMid_2;

package/dist/_shared/cjs/{Button-5dff284a.js → Button-27512fee.js}

@@ -1,46 +1,25 @@
 'use strict';
 
 var filterDataAttrs = require('./filter-data-attrs-a30dcf5f.js');
-var React$1 = require('react');
+var BtIconChevronLeftMid = require('./BtIconChevronLeftMid-df952a3e.js');
 var BtIconChevronRightMid = require('./BtIconChevronRightMid-5a38d855.js');
 var index = require('./index-45bfb67b.js');
+var React = require('react');
 var suffixModifier = require('./suffix-modifier-1ee2da04.js');
 var Icon = require('./Icon-9ae8dbe1.js');
 var Surface = require('./Surface-6da0a78e.js');
 
 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 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;
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 /**
  * Use `Button` to allow users to take actions with clicks and taps.
  */
-var Button = React$1.forwardRef(function (_a, ref) {
+var Button = React.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 = filterDataAttrs.__rest(_a, ["ariaLabel", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "supportingText", "target", "type"]);
-    var surface = React$1.useContext(Surface.Context).surface;
+    var surface = React.useContext(Surface.Context).surface;
     var buttonClasses = index.classNames((_b = {
             "arc-Button": true,
             "arc-Button--displayBlock": isDisplayBlock
@@ -71,7 +50,7 @@ var Button = React$1.forwardRef(function (_a, ref) {
 });
 var ButtonIcon = function (_a) {
     var icon = _a.icon, isChevron = _a.isChevron, isBeforeText = _a.isBeforeText;
-    return (React__default["default"].createElement("span", { className: "arc-Button-icon" }, isChevron ? (React__default["default"].createElement(Icon.Icon, { icon: isBeforeText ? BtIconChevronLeftMid_2 : BtIconChevronRightMid.BtIconChevronRightMid_2 })) : (React__default["default"].createElement(Icon.Icon, { icon: icon }))));
+    return (React__default["default"].createElement("span", { className: "arc-Button-icon" }, isChevron ? (React__default["default"].createElement(Icon.Icon, { icon: isBeforeText ? BtIconChevronLeftMid.BtIconChevronLeftMid_2 : BtIconChevronRightMid.BtIconChevronRightMid_2 })) : (React__default["default"].createElement(Icon.Icon, { icon: icon }))));
 };
 
 exports.Button = Button;

package/dist/_shared/cjs/Card-804ab0e5.d.ts

@@ -0,0 +1,136 @@
+/// <reference types="react" />
+import React from "react";
+import { FC, HTMLAttributes } from "react";
+/**
+ * Detect interaction mode
+ */
+declare const useInteractionMode: () => {
+    interactionMode: string;
+};
+/**
+ * Use `Card` to contain content and actions about a single subject.
+ */
+declare const Card: FC<CardProps> & {
+    Block: typeof CardBlock;
+    Image: typeof CardImage;
+};
+/**
+ * Internal `Card.Block` component to section blocks of content within a Card.
+ */
+declare const CardBlock: FC<{
+    /**
+     * Contents of the CardBlock.
+     */
+    children: React.ReactNode;
+    /**
+     * How should the content of the block be aligned?
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * Should the block stretch to the width of the Card?
+     */
+    isFullWidth?: boolean;
+    /**
+     * Should the block grow to the fill the available vertical space? Used when the Card appears in a column.
+     */
+    grow?: boolean;
+}>;
+/**
+ * Internal `Card.Image` component to show an image within a Card.
+ */
+declare const CardImage: FC<{
+    /**
+     * Alternative text for the Card.Image, shown if the image cannot be displayed.
+     */
+    alt?: string;
+    /**
+     * Height of the Card.Image.
+     */
+    height?: number;
+    /**
+     * Loading behaviour of the Card.Image.
+     */
+    loading?: "eager" | "lazy";
+    /**
+     * The HTML [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes) attribute. Required if srcSet is defined.
+     */
+    sizes?: string;
+    /**
+     * HTML src for the Card.Image.
+     */
+    src: string;
+    /**
+     * A comma-separated list indicating a set of possible image sources for the user agent to use for different screen sizes. Same format as [srcSet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes), i.e. `my-image-200.png 200w, my-image-200.png 200w`.
+     */
+    srcSet?: string;
+}>;
+type TitleSize = "xs" | "s" | "m" | "l" | "xl";
+interface CardProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * The HTML ID passed to the Card Button for aria- attributes.
+     */
+    actionId?: string;
+    /**
+     * Label for the Card's Button. You should specify this if defining an href.
+     */
+    actionLabel?: string;
+    /**
+     * A `Card.Image` to use for the cover image.
+     */
+    coverImage?: React.ReactNode;
+    /**
+     * Card fill.
+     */
+    fill?: "solid" | "outlined" | "neutral";
+    /**
+     * A URL to link to when the Card is clicked or touched.
+     */
+    href: string;
+    /**
+     * Alternative text for the Card cover image, shown if the image cannot be displayed.
+     */
+    imageAlt?: string;
+    /**
+     * Height of the Card cover image.
+     */
+    imageHeight?: number;
+    /**
+     * Loading behaviour of the Card cover image.
+     */
+    imageLoading?: "eager" | "lazy";
+    /**
+     * HTML src for the Card cover image.
+     */
+    imageSrc?: string;
+    /**
+     * A comma-separated list indicating a set of possible image sources for the user agent to use for different screen sizes in the Card cover image. Same format as [srcSet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes), i.e. `my-image-200.png 200w, my-image-200.png 200w`.
+     */
+    imageSrcSet?: string;
+    /**
+     * Object of `data-` attributes to render on internal anchor element, e.g.
+     * `{ data-analytics-link: "My link"}` => `<a data-analytics-link="My link">`.
+     */
+    linkData?: {};
+    /**
+     * The minimum height of the card. Cards in a series of columns will match the
+     * height of the tallest Card.
+     */
+    minHeight?: number;
+    /**
+     * Link target attribute for the Card link.
+     */
+    target?: "_blank" | "_parent" | "_self" | "_top";
+    /**
+     * The title for the Card, describing the content. This is required to provide good accessibility to screen readers.
+     */
+    title: string;
+    /**
+     * The size for the Card title.
+     */
+    titleSize?: TitleSize;
+    /**
+     * On click handler.
+     */
+    onClick?: () => void;
+}
+export { useInteractionMode, Card, TitleSize, CardProps };