@arc-ui/components 10.1.0 → 10.2.0

package/dist/Button/index.d.ts

@@ -0,0 +1 @@
+export { Button } from "../_shared/Button-abfb12d4";

package/dist/Button/index.js

@@ -0,0 +1,8 @@
+export { B as Button } from '../_shared/Button-abfb12d4.js';
+import '../_shared/index-e3c83626.js';
+import '../_shared/index-56d9df62.js';
+import 'react';
+import '../_shared/suffix-modifier-2a93822c.js';
+import '../_shared/Icon-4d523b46.js';
+import '../_shared/index.es-f5886c3a.js';
+import '../_shared/Surface-3fe44a2a.js';

package/dist/Card/index.d.ts

@@ -0,0 +1,126 @@
+/// <reference types="react" />
+import React from "react";
+import { FC, HTMLAttributes } from "react";
+/**
+ * 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<{
+    /**
+     * 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 { Card };

package/dist/Card/index.js

@@ -0,0 +1,118 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/index-e3c83626.js';
+import { c as classNames } from '../_shared/index-56d9df62.js';
+import React, { useState, useEffect, useContext } from 'react';
+import { I as Icon } from '../_shared/Icon-4d523b46.js';
+import { I as Image } from '../_shared/Image-a3225049.js';
+import { H as Heading } from '../_shared/Heading-8c640dd1.js';
+import { s as suffixModifier } from '../_shared/suffix-modifier-2a93822c.js';
+import { C as Context, S as Surface } from '../_shared/Surface-3fe44a2a.js';
+import { h as handleLinkClick } from '../_shared/handle-link-click-35e09d0c.js';
+import '../_shared/index.es-f5886c3a.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.createElement("div", null, children)) : (React.createElement(Surface, { background: surface === "dark" ? "white" : "darker" }, children));
+    };
+    var coverImage = imageSrc && (React.createElement(CardImage, { alt: imageAlt, height: imageHeight, loading: imageLoading, src: imageSrc, srcSet: imageSrcSet }));
+    return (React.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.createElement(Wrapper, null,
+            React.createElement("div", { className: "arc-Card-inner", style: { minHeight: minHeight } },
+                React.createElement("div", { className: "arc-Card-header" },
+                    React.createElement("div", { className: "arc-Card-title" },
+                        React.createElement(Heading, { size: titleSize },
+                            React.createElement(CardLink, { stretch: true, onClick: onClick, actionId: actionId, fill: fill, href: href, linkData: linkData, target: target }, title))),
+                    coverImage),
+                React.createElement("div", { className: "arc-Card-children" },
+                    React.createElement(Card.Block, null, children)),
+                href && (React.createElement(CardBlock, null,
+                    React.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.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.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.createElement("div", { className: classNames({
+            "arc-Card-image": true
+        }) },
+        React.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.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.createElement("span", { className: "arc-Card-linkText" }, children),
+        isButton && (React.createElement("span", { className: "arc-Card-linkIcon" },
+            React.createElement(Icon, { icon: "btChevronRight2px", size: 8 })))));
+};
+
+export { Card };

package/dist/Checkbox/index.d.ts

@@ -0,0 +1,59 @@
+/// <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;
+    /**
+     * ID for the Checkbox.
+     */
+    id: string;
+    /**
+     * Is the input checked?
+     */
+    checked?: boolean;
+    /**
+     * Should the Checkbox be disabled?
+     */
+    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 };

package/dist/Checkbox/index.js

@@ -0,0 +1,46 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/index-e3c83626.js';
+import React, { forwardRef, useContext } from 'react';
+import { c as classNames } from '../_shared/index-56d9df62.js';
+import { C as Context, u as useAriaDescribedby } from '../_shared/FormControl-9dc9ecc3.js';
+import { C as Context$1 } from '../_shared/Surface-3fe44a2a.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, props = __rest(_a, ["checked", "errorMessage", "helper", "id", "isDisabled", "isRequired", "label", "name", "onBlur", "onChange", "size", "value"]);
+    var requirementStatus = useContext(Context).requirementStatus;
+    var surface = useContext(Context$1).surface;
+    var _f = useAriaDescribedby({
+        id: id,
+        errorMessage: errorMessage
+    }), ariaDescribedby = _f.ariaDescribedby, idError = _f.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.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.createElement("label", { id: idLabel, htmlFor: id, className: "arc-Checkbox-label" },
+            React.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.createElement("span", { className: "arc-Checkbox-box" }),
+            React.createElement("span", null,
+                label,
+                !isRequired && requirementStatus !== "optional" ? (React.createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
+                helper && React.createElement("span", { className: "arc-Checkbox-helper" }, helper))),
+        errorMessage && (React.createElement("div", { id: idError, className: "arc-Checkbox-error" }, errorMessage))));
+});
+
+export { Checkbox };

package/dist/Clock/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { FC } from "react";
+/**
+ * `Clock` is a demo component that shows the current time.
+ */
+declare const Clock: FC<ClockProps>;
+type LocaleType = "en-GB" | "en-US" | "ar-EG";
+interface ClockProps {
+    /**
+     * Locale for the Clock.
+     */
+    locale?: LocaleType;
+}
+declare const _default: (el: HTMLTimeElement) => Promise<JSX.Element>;
+export { Clock, _default as ClockRehydrator };

package/dist/Clock/index.js

@@ -0,0 +1,34 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs, d as __awaiter, e as __generator } from '../_shared/index-e3c83626.js';
+import React, { useState, useEffect } from 'react';
+
+/**
+ * `Clock` is a demo component that shows the current time.
+ */
+var Clock = function (_a) {
+    var _b = _a.locale, locale = _b === void 0 ? "en-GB" : _b, props = __rest(_a, ["locale"]);
+    var _c = useState(new Date()), time = _c[0], setTime = _c[1];
+    var _d = useState(time.toLocaleTimeString(locale)), humanTime = _d[0], setHumanTime = _d[1];
+    useEffect(function () {
+        var tick = function () {
+            var newTime = new Date();
+            setTime(newTime);
+            setHumanTime(newTime.toLocaleTimeString(locale));
+        };
+        tick();
+        var interval = setInterval(tick, 1000);
+        return function () { return clearInterval(interval); };
+    }, [locale]);
+    return (React.createElement("time", __assign({ className: "arc-Clock", dateTime: time.toISOString() }, filterDataAttrs(props), { "data-locale": locale }), humanTime));
+};
+
+var Clock_rehydrator = (function (el) { return __awaiter(void 0, void 0, void 0, function () {
+    var props;
+    return __generator(this, function (_a) {
+        props = {
+            locale: el.dataset.locale
+        };
+        return [2 /*return*/, React.createElement(Clock, __assign({}, props))];
+    });
+}); });
+
+export { Clock, Clock_rehydrator as ClockRehydrator };

package/dist/Columns/index.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 };

package/dist/Columns/index.js

@@ -0,0 +1,51 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/index-e3c83626.js';
+import { c as classNames } from '../_shared/index-56d9df62.js';
+import React, { useEffect } from 'react';
+import { s as suffixModifier } from '../_shared/suffix-modifier-2a93822c.js';
+
+/**
+ * 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 = __rest(_a, ["children", "isGutterless"]);
+    useEffect(function () {
+        React.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.createElement("div", __assign({ className: classNames({
+            "arc-Columns": true,
+            "arc-Columns--gutterless": isGutterless
+        }) }, filterDataAttrs(props)),
+        React.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 = __rest(_a, ["align", "children", "isDebugVisible", "offset", "offsetS", "offsetM", "offsetL", "offsetXL", "span", "spanS", "spanM", "spanL", "spanXL"]);
+    return (React.createElement("div", __assign({ className: classNames((_b = {},
+            _b["arc-Columns-col"] = true,
+            _b[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(props)), children));
+};
+Col.displayName = "Columns.Col";
+Columns.Col = Col;
+
+export { Columns };

package/dist/Curve/index.d.ts

@@ -0,0 +1 @@
+export { Curve } from "../_shared/Curve-5f476d0b";

package/dist/Curve/index.js

@@ -0,0 +1,5 @@
+export { C as Curve } from '../_shared/Curve-5f476d0b.js';
+import '../_shared/index-e3c83626.js';
+import '../_shared/index-56d9df62.js';
+import 'react';
+import '../_shared/suffix-modifier-2a93822c.js';

package/dist/Disclosure/index.d.ts

@@ -0,0 +1,31 @@
+import { FC, ReactNode } from "react";
+import { HeadingLevel } from "../_shared/Heading-8c640dd1";
+/**
+ * Use `Disclosure` to display content that is only visible when toggled into
+ * an "open" state.
+ */
+declare const Disclosure: FC<DisclosureProps>;
+interface DisclosureProps {
+    /**
+     * Content to display in the Disclosure.
+     */
+    children: ReactNode;
+    /**
+     * HTML section heading level of the Disclosure summary. If not provided, will
+     * render as a span.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Should Disclosure details be indented to line-up with summary text?
+     */
+    indentDetails?: boolean;
+    /**
+     * Should the Disclosure content be open by default?
+     */
+    isOpen?: boolean;
+    /**
+     * The Disclosure summary text.
+     */
+    summary: string;
+}
+export { Disclosure };

package/dist/Disclosure/index.js

@@ -0,0 +1,25 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/index-e3c83626.js';
+import { c as classNames } from '../_shared/index-56d9df62.js';
+import React, { useContext } from 'react';
+import { H as Heading } from '../_shared/Heading-8c640dd1.js';
+import { C as Context } from '../_shared/Surface-3fe44a2a.js';
+import '../_shared/suffix-modifier-2a93822c.js';
+
+/**
+ * Use `Disclosure` to display content that is only visible when toggled into
+ * an "open" state.
+ */
+var Disclosure = function (_a) {
+    var children = _a.children, headingLevel = _a.headingLevel, _b = _a.indentDetails, indentDetails = _b === void 0 ? false : _b, _c = _a.isOpen, isOpen = _c === void 0 ? false : _c, summary = _a.summary, props = __rest(_a, ["children", "headingLevel", "indentDetails", "isOpen", "summary"]);
+    var surface = useContext(Context).surface;
+    return (React.createElement("details", __assign({ className: classNames({
+            "arc-Disclosure": true,
+            "arc-Disclosure--indentDetails": indentDetails,
+            "arc-Disclosure--onDarkSurface": surface === "dark"
+        }), open: isOpen }, filterDataAttrs(props)),
+        React.createElement("summary", { className: "arc-Disclosure-summary" },
+            React.createElement(Heading, { level: headingLevel, size: "s" }, summary)),
+        React.createElement("div", { className: "arc-Disclosure-details" }, children)));
+};
+
+export { Disclosure };

package/dist/Elevation/index.d.ts

@@ -0,0 +1,16 @@
+import { FC, ReactNode } from "react";
+/**
+ * Use `Elevation` to elevate what matters.
+ */
+declare const Elevation: FC<ElevationProps>;
+interface ElevationProps {
+    /**
+     * Contents to Elevate.
+     */
+    children: ReactNode;
+    /**
+     * Should the Elevation be full width?
+     */
+    isFullWidth?: boolean;
+}
+export { Elevation };

package/dist/Elevation/index.js

@@ -0,0 +1,17 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/index-e3c83626.js';
+import { c as classNames } from '../_shared/index-56d9df62.js';
+import React from 'react';
+
+/**
+ * Use `Elevation` to elevate what matters.
+ */
+var Elevation = function (_a) {
+    var _b;
+    var children = _a.children, _c = _a.isFullWidth, isFullWidth = _c === void 0 ? false : _c, props = __rest(_a, ["children", "isFullWidth"]);
+    return (React.createElement("div", __assign({ className: classNames((_b = {},
+            _b["arc-Elevation"] = true,
+            _b["arc-Elevation--fullWidth"] = isFullWidth,
+            _b)) }, filterDataAttrs(props)), children));
+};
+
+export { Elevation };

package/dist/FormControl/index.d.ts

@@ -0,0 +1 @@
+export { FormControl, FormControlContext } from "../_shared/FormControl-9dc9ecc3";

package/dist/FormControl/index.js

@@ -0,0 +1,5 @@
+export { F as FormControl, C as FormControlContext } from '../_shared/FormControl-9dc9ecc3.js';
+import '../_shared/index-e3c83626.js';
+import '../_shared/index-56d9df62.js';
+import 'react';
+import '../_shared/Surface-3fe44a2a.js';