@arc-ui/components 10.7.0 → 10.8.1

package/dist/Breadcrumbs/{index.js → Breadcrumbs.esm.js}

@@ -1,11 +1,11 @@
 import React, { useRef, useState, useEffect } from 'react';
-import { I as Icon } from '../_shared/Icon-b053f03d.js';
-import { a as __assign } from '../_shared/index-e3c83626.js';
-import { c as classNames } from '../_shared/index-56d9df62.js';
-import { h as handleLinkClick } from '../_shared/handle-link-click-35e09d0c.js';
-import '../_shared/index.es-ff960629.js';
-import '../_shared/suffix-modifier-2a93822c.js';
-import '../_shared/Surface-3fe44a2a.js';
+import { I as Icon } from '../_shared/esm/Icon-2fd92daa.js';
+import { a as __assign } from '../_shared/esm/index-229fc864.js';
+import { c as classNames } from '../_shared/esm/index-2ae58626.js';
+import { h as handleLinkClick } from '../_shared/esm/handle-link-click-f64f55a2.js';
+import '../_shared/esm/index.es-42f84e2d.js';
+import '../_shared/esm/suffix-modifier-f5e28822.js';
+import '../_shared/esm/Surface-d515d212.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 

package/dist/Breadcrumbs/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/breadcrumbs",
+  "types": "./Breadcrumbs.esm.d.ts",
+  "main": "./Breadcrumbs.cjs.js",
+  "module": "./Breadcrumbs.esm.js",
+  "private": true
+}

package/dist/Button/Button.cjs.d.ts

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

package/dist/Button/Button.cjs.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Button = require('../_shared/cjs/Button-1743b3ec.js');
+require('../_shared/cjs/index-78b35bc1.js');
+require('../_shared/cjs/index-45bfb67b.js');
+require('react');
+require('../_shared/cjs/suffix-modifier-edf7851e.js');
+require('../_shared/cjs/Icon-bb5a5fd1.js');
+require('../_shared/cjs/index.es-f590caaf.js');
+require('../_shared/cjs/Surface-d6b8010e.js');
+
+
+
+exports.Button = Button.Button;

package/dist/Button/Button.esm.d.ts

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

package/dist/Button/Button.esm.js

@@ -0,0 +1,8 @@
+export { B as Button } from '../_shared/esm/Button-d59c31a2.js';
+import '../_shared/esm/index-229fc864.js';
+import '../_shared/esm/index-2ae58626.js';
+import 'react';
+import '../_shared/esm/suffix-modifier-f5e28822.js';
+import '../_shared/esm/Icon-2fd92daa.js';
+import '../_shared/esm/index.es-42f84e2d.js';
+import '../_shared/esm/Surface-d515d212.js';

package/dist/Button/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/button",
+  "types": "./Button.esm.d.ts",
+  "main": "./Button.cjs.js",
+  "module": "./Button.esm.js",
+  "private": true
+}

package/dist/Card/Card.cjs.js

@@ -0,0 +1,126 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../_shared/cjs/index-78b35bc1.js');
+var index$1 = require('../_shared/cjs/index-45bfb67b.js');
+var React = require('react');
+var Icon = require('../_shared/cjs/Icon-bb5a5fd1.js');
+var Image = require('../_shared/cjs/Image-fe760a06.js');
+var Heading = require('../_shared/cjs/Heading-cc38c3ec.js');
+var suffixModifier = require('../_shared/cjs/suffix-modifier-edf7851e.js');
+var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
+var handleLinkClick = require('../_shared/cjs/handle-link-click-17a44cf4.js');
+require('../_shared/cjs/index.es-f590caaf.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 = index.__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", index.__assign({ className: index$1.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)) }, index.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$1.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$1.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", index.__assign({ onClick: handleLinkClick.handleLinkClick({ handler: onClick }), "aria-describedby": actionId, className: index$1.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 }, index.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, { icon: "btChevronRightMid", size: 16 })))));
+};
+
+exports.Card = Card;

package/dist/Card/Card.esm.d.ts

@@ -0,0 +1,130 @@
+/// <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<{
+    /**
+     * 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 { Card };

package/dist/Card/{index.js → Card.esm.js}

@@ -1,13 +1,13 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/index-e3c83626.js';
-import { c as classNames } from '../_shared/index-56d9df62.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index-229fc864.js';
+import { c as classNames } from '../_shared/esm/index-2ae58626.js';
 import React, { useState, useEffect, useContext } from 'react';
-import { I as Icon } from '../_shared/Icon-b053f03d.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-ff960629.js';
+import { I as Icon } from '../_shared/esm/Icon-2fd92daa.js';
+import { I as Image } from '../_shared/esm/Image-7e4948f6.js';
+import { H as Heading } from '../_shared/esm/Heading-183be76c.js';
+import { s as suffixModifier } from '../_shared/esm/suffix-modifier-f5e28822.js';
+import { C as Context, S as Surface } from '../_shared/esm/Surface-d515d212.js';
+import { h as handleLinkClick } from '../_shared/esm/handle-link-click-f64f55a2.js';
+import '../_shared/esm/index.es-42f84e2d.js';
 
 /**
  * Detect interaction mode

package/dist/Card/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/card",
+  "types": "./Card.esm.d.ts",
+  "main": "./Card.cjs.js",
+  "module": "./Card.esm.js",
+  "private": true
+}

package/dist/Checkbox/Checkbox.cjs.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../_shared/cjs/index-78b35bc1.js');
+var React = require('react');
+var index$1 = require('../_shared/cjs/index-45bfb67b.js');
+var FormControl = require('../_shared/cjs/FormControl-7d8e10fa.js');
+var Surface = require('../_shared/cjs/Surface-d6b8010e.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, props = index.__rest(_a, ["checked", "errorMessage", "helper", "id", "isDisabled", "isRequired", "label", "name", "onBlur", "onChange", "size", "value"]);
+    var requirementStatus = React.useContext(FormControl.Context).requirementStatus;
+    var surface = React.useContext(Surface.Context).surface;
+    var _f = FormControl.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__default["default"].createElement("div", { className: index$1.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: "arc-Checkbox-label" },
+            React__default["default"].createElement("input", index.__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 }, index.filterDataAttrs(props))),
+            React__default["default"].createElement("span", { className: "arc-Checkbox-box" }),
+            React__default["default"].createElement("span", null,
+                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" }, errorMessage))));
+});
+
+exports.Checkbox = Checkbox;

package/dist/Checkbox/Checkbox.esm.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 → Checkbox.esm.js}

@@ -1,8 +1,8 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/index-e3c83626.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index-229fc864.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';
+import { c as classNames } from '../_shared/esm/index-2ae58626.js';
+import { C as Context, u as useAriaDescribedby } from '../_shared/esm/FormControl-33194106.js';
+import { C as Context$1 } from '../_shared/esm/Surface-d515d212.js';
 
 /**
  *  Use `Checkbox` to allow users to select individual options.

package/dist/Checkbox/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/checkbox",
+  "types": "./Checkbox.esm.d.ts",
+  "main": "./Checkbox.cjs.js",
+  "module": "./Checkbox.esm.js",
+  "private": true
+}

package/dist/Clock/Clock.cjs.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../_shared/cjs/index-78b35bc1.js');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(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 = index.__rest(_a, ["locale"]);
+    var _c = React.useState(new Date()), time = _c[0], setTime = _c[1];
+    var _d = React.useState(time.toLocaleTimeString(locale)), humanTime = _d[0], setHumanTime = _d[1];
+    React.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__default["default"].createElement("time", index.__assign({ className: "arc-Clock", dateTime: time.toISOString() }, index.filterDataAttrs(props), { "data-locale": locale }), humanTime));
+};
+
+var Clock_rehydrator = (function (el) { return index.__awaiter(void 0, void 0, void 0, function () {
+    var props;
+    return index.__generator(this, function (_a) {
+        props = {
+            locale: el.dataset.locale
+        };
+        return [2 /*return*/, React__default["default"].createElement(Clock, index.__assign({}, props))];
+    });
+}); });
+
+exports.Clock = Clock;
+exports.ClockRehydrator = Clock_rehydrator;

package/dist/Clock/Clock.esm.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 → Clock.esm.js}

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs, d as __awaiter, e as __generator } from '../_shared/index-e3c83626.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs, d as __awaiter, e as __generator } from '../_shared/esm/index-229fc864.js';
 import React, { useState, useEffect } from 'react';
 
 /**

package/dist/Clock/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/clock",
+  "types": "./Clock.esm.d.ts",
+  "main": "./Clock.cjs.js",
+  "module": "./Clock.esm.js",
+  "private": true
+}

package/dist/Columns/Columns.cjs.js

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../_shared/cjs/index-78b35bc1.js');
+var index$1 = require('../_shared/cjs/index-45bfb67b.js');
+var React = require('react');
+var suffixModifier = require('../_shared/cjs/suffix-modifier-edf7851e.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 = index.__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", index.__assign({ className: index$1.classNames({
+            "arc-Columns": true,
+            "arc-Columns--gutterless": isGutterless
+        }) }, index.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 = index.__rest(_a, ["align", "children", "isDebugVisible", "offset", "offsetS", "offsetM", "offsetL", "offsetXL", "span", "spanS", "spanM", "spanL", "spanXL"]);
+    return (React__default["default"].createElement("div", index.__assign({ className: index$1.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)) }, index.filterDataAttrs(props)), children));
+};
+Col.displayName = "Columns.Col";
+Columns.Col = Col;
+
+exports.Columns = Columns;