@arc-ui/components 11.4.2 → 11.6.0

package/dist/_shared/esm/Breadcrumbs-04590057.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/esm/Breadcrumbs-04590057.js

@@ -0,0 +1,100 @@
+import React__default, { useRef, useState, useEffect } from 'react';
+import { d as debounce_1 } from './debounce-e228705f.js';
+import { B as BtIconChevronLeft2Px_2, a as BtIconChevronRight2Px_2 } from './BtIconChevronRight2Px-b8e7b4ad.js';
+import { I as Icon } from './Icon-fd247973.js';
+import { a as __assign } from './filter-data-attrs-afdb7d32.js';
+import { c as classNames } from './index-2ae58626.js';
+import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
+
+var BreadcrumbsItem = function (_a) {
+    var spacerIconAfter = _a.spacerIconAfter, spacerIconBefore = _a.spacerIconBefore, children = _a.children;
+    return (React__default.createElement("li", { className: "arc-Breadcrumbs-item" },
+        spacerIconBefore && (React__default.createElement("div", { className: "arc-Breadcrumbs-spacerIcon", "data-testid": "arc-chevron-left-2px" },
+            React__default.createElement(Icon, { icon: BtIconChevronLeft2Px_2 }))),
+        children,
+        spacerIconAfter && (React__default.createElement("div", { className: "arc-Breadcrumbs-spacerIcon" },
+            React__default.createElement(Icon, { icon: BtIconChevronRight2Px_2 })))));
+};
+
+var BreadcrumbsLink = React__default.forwardRef(function (_a, ref) {
+    var onClick = _a.onClick, href = _a.href, isActive = _a.isActive, children = _a.children;
+    return (React__default.createElement(React__default.Fragment, null, isActive || href === undefined ? (React__default.createElement("span", __assign({}, (isActive && { "aria-hidden": "true" }), { onClick: onClick, className: classNames({
+            "arc-Breadcrumbs-text": true,
+            "arc-Breadcrumbs-text--active": isActive
+        }) }), children)) : (React__default.createElement("a", __assign({}, (onClick && ref
+        ? { onClick: onClick }
+        : { onClick: handleLinkClick({ handler: onClick }) }), { className: "arc-Breadcrumbs-text", ref: ref, href: href }), children))));
+});
+
+/** Use `Breadcrumbs` to add a secondary navigation scheme that reveals the user’s location. Each item should be wrapped with `Breadcrumbs.Item` */
+var Breadcrumbs = function (_a) {
+    var isLight = _a.isLight, children = _a.children;
+    var breadcrumbsList = useRef(null);
+    var _b = useState(false), isCompressed = _b[0], setIsCompressed = _b[1];
+    var _c = useState(false), showBackTrail = _c[0], setShowBackTrail = _c[1];
+    useEffect(function () {
+        React__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]);
+    useEffect(function () {
+        var handleResize = 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.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.Children.toArray(children);
+    return (React__default.createElement("nav", { "aria-label": "Breadcrumbs", role: "navigation", className: classNames({
+            "arc-Breadcrumbs": true,
+            "arc-Breadcrumbs--dark": isLight
+        }) },
+        React__default.createElement("ul", { className: "arc-Breadcrumbs-list", ref: breadcrumbsList }, showBackTrail ? (React__default.createElement(React__default.Fragment, null, items.length < 3 ? (React__default.createElement(Breadcrumbs.Item, { spacerIconBefore: true }, items[0].props.children)) : (React__default.createElement(Breadcrumbs.Item, { spacerIconBefore: true }, items[items.length - 2].props.children)))) : (React__default.createElement(React__default.Fragment, null, isCompressed ? (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Breadcrumbs.Item, { spacerIconAfter: true }, items[0].props.children),
+            React__default.createElement(Breadcrumbs.Item, { spacerIconAfter: true },
+                React__default.createElement("button", { className: "arc-Breadcrumbs-expand arc-Breadcrumbs-text", onClick: function () { return setIsCompressed(false); }, "aria-label": "Expand Breadcrumbs", type: "button", "data-testid": "expand-ellipsis" }, "...")),
+            React__default.createElement(Breadcrumbs.Item, null, items[items.length - 1].props &&
+                items[items.length - 1].props.children &&
+                React__default.cloneElement(items[items.length - 1].props.children, {
+                    isActive: true
+                })))) : (React__default.createElement(React__default.Fragment, null,
+            items
+                .slice(0, items.length - 1)
+                .map(function (item, index) {
+                return (React__default.createElement(React__default.Fragment, { key: "listItem-".concat(index) },
+                    React__default.createElement(Breadcrumbs.Item, { spacerIconAfter: true }, item.props.children)));
+            }),
+            React__default.createElement(Breadcrumbs.Item, null, items[items.length - 1].props &&
+                items[items.length - 1].props.children &&
+                React__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;
+
+export { Breadcrumbs as B };

package/dist/_shared/esm/BtIconAlert-55a6ed5c.js

@@ -0,0 +1,32 @@
+import React__default from 'react';
+
+const React = React__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;
+
+export { BtIconAlert_2 as B };

package/dist/_shared/esm/BtIconChevronLeftMid-9f4f3a3d.js

@@ -0,0 +1,25 @@
+import React__default from 'react';
+
+const React = React__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;
+
+export { BtIconChevronLeftMid_2 as B };

package/dist/_shared/esm/BtIconCrossAlt2Px-a6a9f431.js

@@ -0,0 +1,23 @@
+import React__default from 'react';
+
+const React = React__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;
+
+export { BtIconCrossAlt2Px_2 as B };

package/dist/_shared/esm/{Button-10700df4.js → Button-d319fa11.js}

@@ -1,32 +1,11 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
-import React__default, { forwardRef, useContext } from 'react';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-afdb7d32.js';
+import { B as BtIconChevronLeftMid_2 } from './BtIconChevronLeftMid-9f4f3a3d.js';
 import { B as BtIconChevronRightMid_2 } from './BtIconChevronRightMid-d9b11761.js';
 import { c as classNames } from './index-2ae58626.js';
-import { s as suffixModifier } from './suffix-modifier-f5e28822.js';
-import { I as Icon } from './Icon-61f7237a.js';
-import { C as Context } from './Surface-bf201530.js';
-
-const React = React__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;
+import React__default, { forwardRef, useContext } from 'react';
+import { s as suffixModifier } from './suffix-modifier-7e640670.js';
+import { I as Icon } from './Icon-fd247973.js';
+import { C as Context } from './Surface-bb100ef8.js';
 
 /**
  * Use `Button` to allow users to take actions with clicks and taps.

package/dist/_shared/esm/Card-e79eb6c8.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/esm/Card-e79eb6c8.js

@@ -0,0 +1,118 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-afdb7d32.js';
+import { c as classNames } from './index-2ae58626.js';
+import React__default, { useState, useEffect, useContext } from 'react';
+import { B as BtIconChevronRightMid_2 } from './BtIconChevronRightMid-d9b11761.js';
+import { I as Icon } from './Icon-fd247973.js';
+import { I as Image } from './Image-3596ce55.js';
+import { H as Heading } from './Heading-b61432fb.js';
+import { s as suffixModifier } from './suffix-modifier-7e640670.js';
+import { C as Context, S as Surface } from './Surface-bb100ef8.js';
+import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
+
+/**
+ * Detect interaction mode
+ */
+var useInteractionMode = function () {
+    var _a = useState("pointer"), interactionMode = _a[0], setInteractionMode = _a[1];
+    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 = __rest(_a, ["actionId", "actionLabel", "children", "fill", "href", "imageAlt", "imageHeight", "imageLoading", "imageSrc", "imageSrcSet", "linkData", "minHeight", "onClick", "target", "title", "titleSize"]);
+    var surface = useContext(Context).surface;
+    var interactionMode = useInteractionMode().interactionMode;
+    var Wrapper = function (_a) {
+        var children = _a.children;
+        return fill === "outlined" || fill === "neutral" ? (React__default.createElement("div", null, children)) : (React__default.createElement(Surface, { background: surface === "dark" ? "white" : "darker" }, children));
+    };
+    var coverImage = imageSrc && (React__default.createElement(CardImage, { alt: imageAlt, height: imageHeight, loading: imageLoading, src: imageSrc, srcSet: imageSrcSet }));
+    return (React__default.createElement("div", __assign({ className: classNames((_b = {
+                "arc-Card": true,
+                "arc-Card--onDarkSurface": surface === "dark"
+            },
+            _b[suffixModifier("arc-Card--fill", fill)] = fill !== "solid",
+            _b["arc-is-".concat(interactionMode, "InteractionMode")] = interactionMode,
+            _b)) }, filterDataAttrs(props)),
+        React__default.createElement(Wrapper, null,
+            React__default.createElement("div", { className: "arc-Card-inner", style: { minHeight: minHeight } },
+                React__default.createElement("div", { className: "arc-Card-header" },
+                    React__default.createElement("div", { className: "arc-Card-title" },
+                        React__default.createElement(Heading, { size: titleSize },
+                            React__default.createElement(CardLink, { stretch: true, onClick: onClick, actionId: actionId, fill: fill, href: href, linkData: linkData, target: target }, title))),
+                    coverImage),
+                React__default.createElement("div", { className: "arc-Card-children" },
+                    React__default.createElement(Card.Block, null, children)),
+                href && (React__default.createElement(CardBlock, null,
+                    React__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.createElement("div", { className: 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.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.createElement("div", { className: classNames({
+            "arc-Card-image": true
+        }) },
+        React__default.createElement(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 = useContext(Context).surface;
+    return (React__default.createElement("a", __assign({ onClick: handleLinkClick({ handler: onClick }), "aria-describedby": actionId, className: 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(linkData)),
+        React__default.createElement("span", { className: "arc-Card-linkText" }, children),
+        isButton && (React__default.createElement("span", { className: "arc-Card-linkIcon" },
+            React__default.createElement(Icon, { testId: "cardIcon", icon: BtIconChevronRightMid_2, size: 24 })))));
+};
+
+export { Card as C };

package/dist/_shared/esm/Checkbox-94300d8c.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 };

package/dist/_shared/esm/Checkbox-94300d8c.js

@@ -0,0 +1,56 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-afdb7d32.js';
+import React__default, { forwardRef, useContext } from 'react';
+import { B as BtIconTickAlt2Px_2 } from './BtIconTickAlt2Px-da97e9ae.js';
+import { B as BtIconAlert_2 } from './BtIconAlert-55a6ed5c.js';
+import { c as classNames } from './index-2ae58626.js';
+import { C as Context, u as useAriaDescribedby } from './FormControl-5e3fdca3.js';
+import { C as Context$1 } from './Surface-bb100ef8.js';
+
+/**
+ *  Use `Checkbox` to allow users to select individual options.
+ */
+var Checkbox = forwardRef(function (_a, ref) {
+    var _b = _a.checked, checked = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isRequired, isRequired = _d === void 0 ? false : _d, label = _a.label, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _e = _a.size, size = _e === void 0 ? "l" : _e, value = _a.value, _f = _a.checkboxAlignment, checkboxAlignment = _f === void 0 ? "center" : _f, props = __rest(_a, ["checked", "errorMessage", "helper", "id", "isDisabled", "isRequired", "label", "name", "onBlur", "onChange", "size", "value", "checkboxAlignment"]);
+    var requirementStatus = useContext(Context).requirementStatus;
+    var surface = useContext(Context$1).surface;
+    var _g = useAriaDescribedby({
+        id: id,
+        errorMessage: errorMessage
+    }), ariaDescribedby = _g.ariaDescribedby, idError = _g.idError;
+    var idLabel = "".concat(id, "-label");
+    var checkedProps = {};
+    if (typeof onChange === "function") {
+        checkedProps.checked = checked;
+    }
+    else if (checked && !onChange) {
+        checkedProps.defaultChecked = true;
+    }
+    if (requirementStatus === "required") {
+        isRequired = true;
+    }
+    return (React__default.createElement("div", { className: classNames({
+            "arc-Checkbox": true,
+            "arc-Checkbox--disabled": isDisabled,
+            "arc-Checkbox--invalid": errorMessage,
+            "arc-Checkbox--small": size === "s",
+            "arc-Checkbox--onDarkSurface": surface === "dark"
+        }) },
+        React__default.createElement("label", { id: idLabel, htmlFor: id, className: classNames("arc-Checkbox-label", {
+                "arc-Checkbox-label--top": checkboxAlignment === "top"
+            }) },
+            React__default.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-Checkbox-input" }, checkedProps, { disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: ref, required: isRequired, type: "checkbox", value: value }, filterDataAttrs(props))),
+            React__default.createElement("span", { className: "arc-Checkbox-box" },
+                React__default.createElement(BtIconTickAlt2Px_2, null)),
+            React__default.createElement("span", __assign({}, (checkboxAlignment === "top" && {
+                className: "arc-Checkbox-content--marginTop"
+            })),
+                label,
+                !isRequired && requirementStatus !== "optional" ? (React__default.createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
+                helper && React__default.createElement("span", { className: "arc-Checkbox-helper" }, helper))),
+        errorMessage && (React__default.createElement("div", { id: idError, className: "arc-Checkbox-error" },
+            React__default.createElement("span", { className: "arc-Checkbox-error--icon" },
+                React__default.createElement(BtIconAlert_2, null)),
+            errorMessage))));
+});
+
+export { Checkbox as C };