@arc-ui/components 11.4.2 → 11.6.0

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/BtIconAlert-637db790.js

@@ -0,0 +1,38 @@
+'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 BtIconAlert = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
+      fill: "currentColor"
+    }),
+    /*#__PURE__*/ React.createElement("path", {
+      fill: "currentColor",
+      d: "M16 20.99335A1 1 0 1 0 16 22.99335 1 1 0 1 0 16 20.99335z"
+    }),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M16.00488,19.00977a.49972.49972,0,0,0,.5-.5L16.50684,9.5a.5.5,0,0,0-1,0l-.002,9.00977A.5.5,0,0,0,16.00488,19.00977Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconAlert_2 = BtIconAlert;
+
+exports.BtIconAlert_2 = BtIconAlert_2;

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/BtIconCrossAlt2Px-30dc2688.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var React$1 = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
+
+const React = React__default["default"];
+const BtIconCrossAlt2Px = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M17.41406,16l3.793-3.793A.99989.99989,0,0,0,19.793,10.793L16,14.58594l-3.793-3.793A.99989.99989,0,0,0,10.793,12.207L14.58594,16l-3.793,3.793A.99989.99989,0,1,0,12.207,21.207L16,17.41406l3.793,3.793A.99989.99989,0,0,0,21.207,19.793Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconCrossAlt2Px_2 = BtIconCrossAlt2Px;
+
+exports.BtIconCrossAlt2Px_2 = BtIconCrossAlt2Px_2;

package/dist/_shared/cjs/{Button-1af6868c.js → Button-27512fee.js}

@@ -1,47 +1,26 @@
 'use strict';
 
-var index = require('./index-78b35bc1.js');
-var React$1 = require('react');
+var filterDataAttrs = require('./filter-data-attrs-a30dcf5f.js');
+var BtIconChevronLeftMid = require('./BtIconChevronLeftMid-df952a3e.js');
 var BtIconChevronRightMid = require('./BtIconChevronRightMid-5a38d855.js');
-var index$1 = require('./index-45bfb67b.js');
-var suffixModifier = require('./suffix-modifier-edf7851e.js');
-var Icon = require('./Icon-719d13d4.js');
-var Surface = require('./Surface-d6b8010e.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 = index.__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 buttonClasses = index$1.classNames((_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.useContext(Surface.Context).surface;
+    var buttonClasses = index.classNames((_b = {
             "arc-Button": true,
             "arc-Button--displayBlock": isDisplayBlock
         },
@@ -53,25 +32,25 @@ var Button = React$1.forwardRef(function (_a, ref) {
         _b["arc-Button--hasSupportingText"] = supportingText,
         _b["arc-Button--onDarkSurface"] = surface === "dark",
         _b));
-    var commonProps = index.__assign({ id: id, onClick: onClick, ref: ref }, index.filterDataAttrs(props));
+    var commonProps = filterDataAttrs.__assign({ id: id, onClick: onClick, ref: ref }, filterDataAttrs.filterDataAttrs(props));
     var buttonText = supportingText ? (React__default["default"].createElement("span", null,
         React__default["default"].createElement("span", { className: "arc-Button-text" }, label),
         React__default["default"].createElement("span", { className: "arc-Button-supportingText" }, supportingText))) : (React__default["default"].createElement("span", { className: "arc-Button-text" }, label));
     var buttonIcon = icon || fill === "flat" ? (React__default["default"].createElement(ButtonIcon, { icon: icon, isChevron: !icon && fill === "flat", isBeforeText: iconPosition === "beforeText" })) : null;
     if (href && !isDisabled) {
-        return (React__default["default"].createElement("a", index.__assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, href: href, rel: rel, target: target }),
+        return (React__default["default"].createElement("a", filterDataAttrs.__assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, href: href, rel: rel, target: target }),
             React__default["default"].createElement("span", { className: "arc-Button-inner" },
                 buttonText,
                 buttonIcon)));
     }
-    return (React__default["default"].createElement("button", index.__assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, disabled: isDisabled, type: type }),
+    return (React__default["default"].createElement("button", filterDataAttrs.__assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, disabled: isDisabled, type: type }),
         React__default["default"].createElement("span", { className: "arc-Button-inner" },
             buttonText,
             buttonIcon)));
 });
 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 };

package/dist/_shared/cjs/Card-804ab0e5.js

@@ -0,0 +1,124 @@
+'use strict';
+
+var filterDataAttrs = require('./filter-data-attrs-a30dcf5f.js');
+var index = require('./index-45bfb67b.js');
+var React = require('react');
+var BtIconChevronRightMid = require('./BtIconChevronRightMid-5a38d855.js');
+var Icon = require('./Icon-9ae8dbe1.js');
+var Image = require('./Image-3bf4b4f3.js');
+var Heading = require('./Heading-d45f6a7f.js');
+var suffixModifier = require('./suffix-modifier-1ee2da04.js');
+var Surface = require('./Surface-6da0a78e.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);
+
+/**
+ * Detect interaction mode
+ */
+var useInteractionMode = function () {
+    var _a = React.useState("pointer"), interactionMode = _a[0], setInteractionMode = _a[1];
+    React.useEffect(function () {
+        var onKeyDown = function (event) {
+            if (event.altKey || event.ctrlKey || event.metaKey) {
+                return;
+            }
+            setInteractionMode("keyboard");
+        };
+        var onPointerDown = function () {
+            setInteractionMode("pointer");
+        };
+        if (typeof window !== "undefined") {
+            document.addEventListener("keydown", onKeyDown, true);
+            document.addEventListener("click", onPointerDown, true);
+        }
+        return function () {
+            if (typeof window !== "undefined") {
+                document.removeEventListener("keydown", onKeyDown);
+                document.removeEventListener("click", onPointerDown);
+            }
+        };
+    }, []);
+    return { interactionMode: interactionMode };
+};
+
+/**
+ * Use `Card` to contain content and actions about a single subject.
+ */
+var Card = function (_a) {
+    var _b;
+    var actionId = _a.actionId, _c = _a.actionLabel, actionLabel = _c === void 0 ? "Read more" : _c, children = _a.children, _d = _a.fill, fill = _d === void 0 ? "solid" : _d, href = _a.href, imageAlt = _a.imageAlt, imageHeight = _a.imageHeight, imageLoading = _a.imageLoading, imageSrc = _a.imageSrc, imageSrcSet = _a.imageSrcSet, linkData = _a.linkData, minHeight = _a.minHeight, onClick = _a.onClick, target = _a.target, title = _a.title, _e = _a.titleSize, titleSize = _e === void 0 ? "s" : _e, props = filterDataAttrs.__rest(_a, ["actionId", "actionLabel", "children", "fill", "href", "imageAlt", "imageHeight", "imageLoading", "imageSrc", "imageSrcSet", "linkData", "minHeight", "onClick", "target", "title", "titleSize"]);
+    var surface = React.useContext(Surface.Context).surface;
+    var interactionMode = useInteractionMode().interactionMode;
+    var Wrapper = function (_a) {
+        var children = _a.children;
+        return fill === "outlined" || fill === "neutral" ? (React__default["default"].createElement("div", null, children)) : (React__default["default"].createElement(Surface.Surface, { background: surface === "dark" ? "white" : "darker" }, children));
+    };
+    var coverImage = imageSrc && (React__default["default"].createElement(CardImage, { alt: imageAlt, height: imageHeight, loading: imageLoading, src: imageSrc, srcSet: imageSrcSet }));
+    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames((_b = {
+                "arc-Card": true,
+                "arc-Card--onDarkSurface": surface === "dark"
+            },
+            _b[suffixModifier.suffixModifier("arc-Card--fill", fill)] = fill !== "solid",
+            _b["arc-is-".concat(interactionMode, "InteractionMode")] = interactionMode,
+            _b)) }, filterDataAttrs.filterDataAttrs(props)),
+        React__default["default"].createElement(Wrapper, null,
+            React__default["default"].createElement("div", { className: "arc-Card-inner", style: { minHeight: minHeight } },
+                React__default["default"].createElement("div", { className: "arc-Card-header" },
+                    React__default["default"].createElement("div", { className: "arc-Card-title" },
+                        React__default["default"].createElement(Heading.Heading, { size: titleSize },
+                            React__default["default"].createElement(CardLink, { stretch: true, onClick: onClick, actionId: actionId, fill: fill, href: href, linkData: linkData, target: target }, title))),
+                    coverImage),
+                React__default["default"].createElement("div", { className: "arc-Card-children" },
+                    React__default["default"].createElement(Card.Block, null, children)),
+                href && (React__default["default"].createElement(CardBlock, null,
+                    React__default["default"].createElement(CardLink, { href: href, fill: fill, actionId: actionId, onClick: onClick, isButton: true }, actionLabel)))))));
+};
+/**
+ * Internal `Card.Block` component to section blocks of content within a Card.
+ */
+var CardBlock = function (_a) {
+    var _b = _a.align, align = _b === void 0 ? "left" : _b, children = _a.children, _c = _a.isFullWidth, isFullWidth = _c === void 0 ? false : _c, _d = _a.grow, grow = _d === void 0 ? false : _d;
+    return (React__default["default"].createElement("div", { className: index.classNames({
+            "arc-Card-block": true,
+            "arc-Card-block--alignCenter": align === "center",
+            "arc-Card-block--alignRight": align === "right",
+            "arc-Card-block--fullWidth": isFullWidth,
+            "arc-Card-block--grow": grow
+        }) },
+        React__default["default"].createElement("div", { className: "arc-Card-blockInner" }, children)));
+};
+CardBlock.displayName = "Card.Block";
+Card.Block = CardBlock;
+/**
+ * Internal `Card.Image` component to show an image within a Card.
+ */
+var CardImage = function (_a) {
+    var _b = _a.alt, alt = _b === void 0 ? "" : _b, _c = _a.height, height = _c === void 0 ? 176 : _c, loading = _a.loading, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet;
+    return (React__default["default"].createElement("div", { className: index.classNames({
+            "arc-Card-image": true
+        }) },
+        React__default["default"].createElement(Image.Image, { alt: alt, fit: "cover", height: height, loading: loading, sizes: sizes, src: src, srcSet: srcSet })));
+};
+CardImage.displayName = "Card.Image";
+Card.Image = CardImage;
+/**
+ * Internal `CardLink` component.
+ */
+var CardLink = function (_a) {
+    var actionId = _a.actionId, isButton = _a.isButton, children = _a.children, fill = _a.fill, href = _a.href, _b = _a.linkData, linkData = _b === void 0 ? {} : _b, onClick = _a.onClick, stretch = _a.stretch, target = _a.target;
+    var surface = React.useContext(Surface.Context).surface;
+    return (React__default["default"].createElement("a", filterDataAttrs.__assign({ onClick: handleLinkClick.handleLinkClick({ handler: onClick }), "aria-describedby": actionId, className: index.classNames({
+            "arc-Card-link": true,
+            "arc-Card-link--button": isButton,
+            "arc-Card-link--onDarkSurface": surface === "dark" && fill !== "neutral",
+            "arc-Card-link--stretch": stretch
+        }), href: href, rel: target === "_blank" ? "noopener noreferrer" : undefined, tabIndex: isButton ? -1 : undefined, target: target }, filterDataAttrs.filterDataAttrs(linkData)),
+        React__default["default"].createElement("span", { className: "arc-Card-linkText" }, children),
+        isButton && (React__default["default"].createElement("span", { className: "arc-Card-linkIcon" },
+            React__default["default"].createElement(Icon.Icon, { testId: "cardIcon", icon: BtIconChevronRightMid.BtIconChevronRightMid_2, size: 24 })))));
+};
+
+exports.Card = Card;

package/dist/_shared/cjs/Checkbox-21d3c4f6.d.ts

@@ -0,0 +1,64 @@
+/// <reference types="react" />
+import React from "react";
+type EventType = React.ChangeEvent<HTMLInputElement>;
+/**
+ *  Use `Checkbox` to allow users to select individual options.
+ */
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+interface CheckboxProps {
+    /**
+     * Error message for the Checkbox.
+     */
+    errorMessage?: string;
+    /**
+     * Helper text for the Checkbox, shown below the label.
+     */
+    helper?: React.ReactNode;
+    /**
+     * Determine the alignment the Checkbox.
+     *
+     */
+    checkboxAlignment?: "top" | "center";
+    /**
+     * ID for the Checkbox.
+     */
+    id: string;
+    /**
+     * Is the input checked?
+     */
+    checked?: boolean;
+    /**
+     * `isDisabled` is a legacy property and not recommended from a UX usability best practice perspective.
+     */
+    isDisabled?: boolean;
+    /**
+     * Is the Checkbox required?
+     */
+    isRequired?: boolean;
+    /**
+     * Label for the Checkbox.
+     */
+    label: React.ReactNode;
+    /**
+     * Name for the Checkbox.
+     */
+    name?: string;
+    /**
+     * Function to call when the Checkbox loses focus.
+     */
+    onBlur?: (e: EventType) => void;
+    /**
+     * Callback function to update the Checkbox's controlled `checked` prop, for
+     * example `e => setChecked(e.target.checked)`.
+     */
+    onChange?: (event: EventType) => void;
+    /**
+     * Size of the Checkbox.
+     */
+    size?: "s" | "l";
+    /**
+     * Value for the Checkbox.
+     */
+    value?: string;
+}
+export { Checkbox, CheckboxProps };