@arc-ui/components 11.5.0 → 11.7.0

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-b4d6ccc8.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');
+var Icon = require('./Icon-e1dd45eb.js');
+var Surface = require('./Surface-b7c51b2b.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React$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-f1108bfe.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-f1108bfe.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-e1dd45eb.js');
+var Image = require('./Image-0e393cbf.js');
+var Heading = require('./Heading-ed1cb455.js');
+var suffixModifier = require('./suffix-modifier-1ee2da04.js');
+var Surface = require('./Surface-b7c51b2b.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-c927b62f.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/cjs/Checkbox-c927b62f.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var filterDataAttrs = require('./filter-data-attrs-a30dcf5f.js');
+var React = require('react');
+var BtIconTickAlt2Px = require('./BtIconTickAlt2Px-bdf06f8c.js');
+var BtIconAlert = require('./BtIconAlert-637db790.js');
+var index = require('./index-45bfb67b.js');
+var FormControl = require('./FormControl-78b007b7.js');
+var Surface = require('./Surface-b7c51b2b.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ *  Use `Checkbox` to allow users to select individual options.
+ */
+var Checkbox = React.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 = filterDataAttrs.__rest(_a, ["checked", "errorMessage", "helper", "id", "isDisabled", "isRequired", "label", "name", "onBlur", "onChange", "size", "value", "checkboxAlignment"]);
+    var requirementStatus = React.useContext(FormControl.Context).requirementStatus;
+    var surface = React.useContext(Surface.Context).surface;
+    var _g = FormControl.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["default"].createElement("div", { className: index.classNames({
+            "arc-Checkbox": true,
+            "arc-Checkbox--disabled": isDisabled,
+            "arc-Checkbox--invalid": errorMessage,
+            "arc-Checkbox--small": size === "s",
+            "arc-Checkbox--onDarkSurface": surface === "dark"
+        }) },
+        React__default["default"].createElement("label", { id: idLabel, htmlFor: id, className: index.classNames("arc-Checkbox-label", {
+                "arc-Checkbox-label--top": checkboxAlignment === "top"
+            }) },
+            React__default["default"].createElement("input", filterDataAttrs.__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.filterDataAttrs(props))),
+            React__default["default"].createElement("span", { className: "arc-Checkbox-box" },
+                React__default["default"].createElement(BtIconTickAlt2Px.BtIconTickAlt2Px_2, null)),
+            React__default["default"].createElement("span", filterDataAttrs.__assign({}, (checkboxAlignment === "top" && {
+                className: "arc-Checkbox-content--marginTop"
+            })),
+                label,
+                !isRequired && requirementStatus !== "optional" ? (React__default["default"].createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
+                helper && React__default["default"].createElement("span", { className: "arc-Checkbox-helper" }, helper))),
+        errorMessage && (React__default["default"].createElement("div", { id: idError, className: "arc-Checkbox-error" },
+            React__default["default"].createElement("span", { className: "arc-Checkbox-error--icon" },
+                React__default["default"].createElement(BtIconAlert.BtIconAlert_2, null)),
+            errorMessage))));
+});
+
+exports.Checkbox = Checkbox;

package/dist/_shared/cjs/Columns-e90798f8.d.ts

@@ -0,0 +1,76 @@
+import { FC, ReactNode } from "react";
+/**
+ * Use `Columns` to compose layouts on a 12-column grid.
+ */
+declare const Columns: FC<ColumnsProps> & {
+    Col: typeof Col;
+};
+declare const Col: FC<ColProps>;
+type Span = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type Offset = "0" | "24" | "48" | "72" | "96" | "120" | "144" | "168" | "192" | "216" | "240" | "264" | "288" | "312" | "336" | "360" | "384";
+interface ColProps {
+    /**
+     * Vertically align the Column.
+     */
+    align?: "top" | "center" | "bottom";
+    /**
+     * Content to display in the Column.
+     */
+    children?: ReactNode;
+    /**
+     * Should the Column be visible for debugging and documentation
+     * purposes?
+     */
+    isDebugVisible?: boolean;
+    /**
+     * Overlay the column over the previous content on the default breakpoint and above. Multiples of 24 up to 384. Use with caution, and ensure to check responsive behaviour.
+     */
+    offset?: Offset;
+    /**
+     * Overlay the column over the previous content on the S breakpoint and above. Multiples of 24 up to 384. Use with caution, and ensure to check responsive behaviour.
+     */
+    offsetS?: Offset;
+    /**
+     * Overlay the column over the previous content on the M breakpoint and above. Multiples of 24 up to 384. Use with caution, and ensure to check responsive behaviour.
+     */
+    offsetM?: Offset;
+    /**
+     * Overlay the column over the previous content on the L breakpoint and above. Multiples of 24 up to 384. Use with caution, and ensure to check responsive behaviour.
+     */
+    offsetL?: Offset;
+    /**
+     * Overlay the column over the previous content on the XL breakpoint and above. Multiples of 24 up to 384. Use with caution, and ensure to check responsive behaviour.
+     */
+    offsetXL?: Offset;
+    /**
+     * The number of columns to span on the default breakpoint and above, from 1 to 12.
+     */
+    span?: Span;
+    /**
+     * The number of columns to span on the S breakpoint and above, from 1 to 12.
+     */
+    spanS?: Span;
+    /**
+     * The number of columns to span on the M breakpoint and above, from 1 to 12.
+     */
+    spanM?: Span;
+    /**
+     * The number of columns to span on the L breakpoint and above, from 1 to 12.
+     */
+    spanL?: Span;
+    /**
+     * The number of columns to span on the XL breakpoint and above, from 1 to 12.
+     */
+    spanXL?: Span;
+}
+interface ColumnsProps {
+    /**
+     * Contents of the Columns. Should only contain `Columns.Col`.
+     */
+    children: ReactNode;
+    /**
+     * Should the Columns be gutterless?
+     */
+    isGutterless?: boolean;
+}
+export { Columns, Col, ColProps, ColumnsProps };

package/dist/_shared/cjs/Columns-e90798f8.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var filterDataAttrs = require('./filter-data-attrs-a30dcf5f.js');
+var index = require('./index-45bfb67b.js');
+var React = require('react');
+var suffixModifier = require('./suffix-modifier-1ee2da04.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Use `Columns` to compose layouts on a 12-column grid.
+ */
+var Columns = function (_a) {
+    var children = _a.children, _b = _a.isGutterless, isGutterless = _b === void 0 ? false : _b, props = filterDataAttrs.__rest(_a, ["children", "isGutterless"]);
+    React.useEffect(function () {
+        React__default["default"].Children.map(children, function (item) {
+            if (item && item.type !== Col) {
+                throw new Error("Illegal child passed to <Columns />. Ensure to only use <Columns.Col />.");
+            }
+        });
+    }, [children]);
+    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames({
+            "arc-Columns": true,
+            "arc-Columns--gutterless": isGutterless
+        }) }, filterDataAttrs.filterDataAttrs(props)),
+        React__default["default"].createElement("div", { className: "arc-Columns-inner" }, children)));
+};
+var Col = function (_a) {
+    var _b;
+    var align = _a.align, children = _a.children, _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, offset = _a.offset, offsetS = _a.offsetS, offsetM = _a.offsetM, offsetL = _a.offsetL, offsetXL = _a.offsetXL, span = _a.span, spanS = _a.spanS, spanM = _a.spanM, spanL = _a.spanL, spanXL = _a.spanXL, props = filterDataAttrs.__rest(_a, ["align", "children", "isDebugVisible", "offset", "offsetS", "offsetM", "offsetL", "offsetXL", "span", "spanS", "spanM", "spanL", "spanXL"]);
+    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames((_b = {},
+            _b["arc-Columns-col"] = true,
+            _b[suffixModifier.suffixModifier("arc-Columns-col--align", align || "")] = align,
+            _b["arc-Columns-col--".concat(span)] = typeof span !== "undefined",
+            _b["arc-Columns-col--s".concat(spanS)] = typeof spanS !== "undefined",
+            _b["arc-Columns-col--m".concat(spanM)] = typeof spanM !== "undefined",
+            _b["arc-Columns-col--l".concat(spanL)] = typeof spanL !== "undefined",
+            _b["arc-Columns-col--xL".concat(spanXL)] = typeof spanXL !== "undefined",
+            _b["arc-Columns-col--offset"] = typeof offset !== "undefined" ||
+                typeof offsetS !== "undefined" ||
+                typeof offsetM !== "undefined" ||
+                typeof offsetL !== "undefined" ||
+                typeof offsetXL !== "undefined",
+            _b["arc-Columns-col--offset".concat(offset)] = typeof offset !== "undefined",
+            _b["arc-Columns-col--offsetS".concat(offsetS)] = typeof offsetS !== "undefined",
+            _b["arc-Columns-col--offsetM".concat(offsetM)] = typeof offsetM !== "undefined",
+            _b["arc-Columns-col--offsetL".concat(offsetL)] = typeof offsetL !== "undefined",
+            _b["arc-Columns-col--offsetXL".concat(offsetXL)] = typeof offsetXL !== "undefined",
+            _b["arc-Columns-col--debugVisible"] = isDebugVisible,
+            _b)) }, filterDataAttrs.filterDataAttrs(props)), children));
+};
+Col.displayName = "Columns.Col";
+Columns.Col = Col;
+
+exports.Columns = Columns;

package/dist/_shared/cjs/{DisclosureMini-5af13d3c.js → DisclosureMini-2a10006e.js}

@@ -4,8 +4,8 @@ var filterDataAttrs = require('./filter-data-attrs-a30dcf5f.js');
 var index = require('./index-45bfb67b.js');
 var React = require('react');
 var BtIconChevronDown2Px = require('./BtIconChevronDown2Px-8fb4e2eb.js');
-var Text = require('./Text-6f2827e6.js');
-var Surface = require('./Surface-6da0a78e.js');
+var Text = require('./Text-555a29a4.js');
+var Surface = require('./Surface-b7c51b2b.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -31,7 +31,9 @@ var DisclosureMini = function (_a) {
                 "arc-DisclosureMini-summary--icon-left": iconPosition === "left",
                 "arc-DisclosureMini-summary--icon-right": iconPosition === "right"
             }), onClick: handleOnClick, "aria-expanded": disclousreState },
-            React__default["default"].createElement("span", { className: "arc-DisclosureMini-summary-icon" },
+            React__default["default"].createElement("div", { className: index.classNames("arc-DisclosureMini-summary-icon", {
+                    "arc-DisclosureMini-summary-icon--small": size === "s"
+                }) },
                 React__default["default"].createElement(BtIconChevronDown2Px.BtIconChevronDown2Px_2, null)),
             React__default["default"].createElement(Text.Text, { size: size === "l" ? "m" : "s" }, summary)),
         React__default["default"].createElement("div", { className: "arc-DisclosureMini-details" },