@arc-ui/components 10.1.0 → 10.2.0

package/dist/Group/index.d.ts

@@ -0,0 +1,46 @@
+import { FC, ReactNode } from "react";
+/**
+ * Use `Group` to arrange flexible items in a row.
+ */
+declare const Group: FC<GroupProps> & {
+    Item: typeof GroupItem;
+};
+declare const GroupItem: FC<ItemProps>;
+interface ItemProps {
+    /**
+     * Content to display in the Group.Item.
+     */
+    children?: ReactNode;
+    /**
+     * Should the Group.Item be visible for debugging and documentation
+     * purposes?
+     */
+    isDebugVisible?: boolean;
+    /**
+     * Should the Group.Item stretch to fill the available space?
+     */
+    grow?: boolean;
+}
+interface GroupProps {
+    /**
+     * Contents of the Group. Should only contain `Group.Item`.
+     */
+    children: ReactNode;
+    /**
+     * Should all Group.Items in the Group stretch to fill the available space?
+     */
+    grow?: boolean;
+    /**
+     * Should all Group.Items in the Group stretch to fill the available space with equal widths?
+     */
+    growEqual?: boolean;
+    /**
+     * Should a border be shown between Group.Items? **Warning: Sets CSS property `overflow:hidden`.**
+     */
+    gutterBorder?: boolean;
+    /**
+     * Should wrapping of Group.Items in the Group be disabled?
+     */
+    noWrap?: boolean;
+}
+export { Group };

package/dist/Group/index.js

@@ -0,0 +1,42 @@
+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, useEffect } from 'react';
+import { C as Context } from '../_shared/Surface-3fe44a2a.js';
+
+/**
+ * Use `Group` to arrange flexible items in a row.
+ */
+var Group = function (_a) {
+    var _b;
+    var children = _a.children, _c = _a.grow, grow = _c === void 0 ? false : _c, _d = _a.growEqual, growEqual = _d === void 0 ? false : _d, _e = _a.gutterBorder, gutterBorder = _e === void 0 ? false : _e, _f = _a.noWrap, noWrap = _f === void 0 ? false : _f, props = __rest(_a, ["children", "grow", "growEqual", "gutterBorder", "noWrap"]);
+    var surface = useContext(Context).surface;
+    useEffect(function () {
+        React.Children.map(children, function (item) {
+            if (item && item.type !== GroupItem) {
+                throw new Error("Illegal child passed to <Group />. Ensure to only use <Group.Item />.");
+            }
+        });
+    }, [children]);
+    return (React.createElement("div", __assign({ className: classNames((_b = {},
+            _b["arc-Group"] = true,
+            _b["arc-Group--grow"] = grow,
+            _b["arc-Group--growEqual"] = growEqual,
+            _b["arc-Group--gutterBorder"] = gutterBorder,
+            _b["arc-Group--noWrap"] = noWrap,
+            _b["arc-Group--onDarkSurface"] = surface === "dark",
+            _b)) }, filterDataAttrs(props)),
+        React.createElement("div", { className: "arc-Group-inner" }, children)));
+};
+var GroupItem = function (_a) {
+    var _b;
+    var children = _a.children, _c = _a.grow, grow = _c === void 0 ? false : _c, _d = _a.isDebugVisible, isDebugVisible = _d === void 0 ? false : _d, props = __rest(_a, ["children", "grow", "isDebugVisible"]);
+    return (React.createElement("div", __assign({ className: classNames((_b = {},
+            _b["arc-Group-item"] = true,
+            _b["arc-Group-item--grow"] = grow,
+            _b["arc-Group-item--debugVisible"] = isDebugVisible,
+            _b)) }, filterDataAttrs(props)), children));
+};
+GroupItem.displayName = "Group.Item";
+Group.Item = GroupItem;
+
+export { Group };

package/dist/Heading/index.d.ts

@@ -0,0 +1 @@
+export { Heading } from "../_shared/Heading-8c640dd1";

package/dist/Heading/index.js

@@ -0,0 +1,6 @@
+export { H as Heading } from '../_shared/Heading-8c640dd1.js';
+import '../_shared/index-e3c83626.js';
+import '../_shared/index-56d9df62.js';
+import 'react';
+import '../_shared/suffix-modifier-2a93822c.js';
+import '../_shared/Surface-3fe44a2a.js';

package/dist/Icon/index.d.ts

@@ -0,0 +1 @@
+export { Icon } from "../_shared/Icon-4d523b46";

package/dist/Icon/index.js

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

package/dist/Image/index.d.ts

@@ -0,0 +1 @@
+export { Image } from "../_shared/Image-a3225049";

package/dist/Image/index.js

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

package/dist/Markup/index.d.ts

@@ -0,0 +1,16 @@
+import { FC, ReactNode } from "react";
+/**
+ * Use `Markup` to display HTML-formatted text.
+ */
+declare const Markup: FC<MarkupProps>;
+interface MarkupProps {
+    /**
+     * HTML-formatted text to display in Markup.
+     */
+    children: ReactNode;
+    /**
+     * Should the Markup width be constrained to a typographic measure?
+     */
+    isMeasured?: boolean;
+}
+export { Markup };

package/dist/Markup/index.js

@@ -0,0 +1,19 @@
+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 { C as Context } from '../_shared/Surface-3fe44a2a.js';
+
+/**
+ * Use `Markup` to display HTML-formatted text.
+ */
+var Markup = function (_a) {
+    var children = _a.children, _b = _a.isMeasured, isMeasured = _b === void 0 ? false : _b, props = __rest(_a, ["children", "isMeasured"]);
+    var surface = useContext(Context).surface;
+    return (React.createElement("div", __assign({ className: classNames({
+            "arc-Markup": true,
+            "arc-Markup--measured": isMeasured,
+            "arc-Markup--onDarkSurface": surface === "dark"
+        }) }, filterDataAttrs(props)), children));
+};
+
+export { Markup };

package/dist/Poster/index.d.ts

@@ -0,0 +1,76 @@
+import { FC, ReactNode } from "react";
+import { anchorPoints } from "../_shared/index-9483ad5f";
+import { loadingOptions } from "../_shared/Image-a3225049";
+declare const PosterImage: FC<PosterImageProps>;
+interface PosterImageProps {
+    /**
+     * Alternative text for the Poster.Image, shown if the image cannot be displayed. Consider avoiding this prop if the image is for decorative purposes only.
+     */
+    alt?: string;
+    /**
+     * Anchor point for the Poster.Image.
+     */
+    anchor?: typeof anchorPoints[number];
+    /**
+     * Loading behaviour of the Poster.Image.
+     */
+    loading?: typeof loadingOptions[number];
+    /**
+     * The HTML [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes) attribute for the Poster.Image. Required if `srcSet` is defined.
+     */
+    sizes?: string;
+    /**
+     * The `src` for the Poster.Image. Used if srcSet is not defined, or as a fallback.
+     */
+    src: string;
+    /**
+     * A comma-separated list indicating a set of possible sources for the user agent to use for different screen sizes for the Poster.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`.
+     */
+    srcSet?: string;
+}
+declare const PosterVideo: FC<PosterVideoProps>;
+interface PosterVideoProps {
+    /**
+     * Anchor point for the Poster.Video,
+     */
+    anchor?: typeof anchorPoints[number];
+    /**
+     * Should the Poster.Video autoplay?
+     */
+    autoPlay?: boolean;
+    /**
+     * HTML video sources for the Poster.Video. [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video).
+     */
+    children: ReactNode;
+    /**
+     * Should the Poster.Video loop?
+     */
+    loop?: boolean;
+}
+/**
+ * Use `Poster` to compose content on an image or video background.
+ */
+declare const Poster: FC<PosterProps> & {
+    Image: typeof PosterImage;
+    Video: typeof PosterVideo;
+};
+interface PosterProps {
+    /**
+     * Poster background to overlay content on top of. Must be one of Poster.Image or Poster.Video.
+     */
+    background: ReactNode;
+    /**
+     * Contents of the Poster. Each item will be wrapped in an PosterItem component.
+     */
+    children: ReactNode;
+    /**
+     * Apply an overlay to the Poster background, e.g. a scrim gradient for text legibility.
+     */
+    overlay?: boolean;
+    /**
+     * The background surface colour to show behind the Poster content before it loads.
+     * If using `overlay`, the gradient will match the surface.
+     */
+    surface?: "darker" | "lighter";
+}
+export { Poster };

package/dist/Poster/index.js

@@ -0,0 +1,44 @@
+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';
+import { S as Surface } from '../_shared/Surface-3fe44a2a.js';
+import { I as Image } from '../_shared/Image-a3225049.js';
+import { s as suffixModifier } from '../_shared/suffix-modifier-2a93822c.js';
+
+var PosterImage = function (_a) {
+    var alt = _a.alt, _b = _a.anchor, anchor = _b === void 0 ? "C" : _b, loading = _a.loading, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, props = __rest(_a, ["alt", "anchor", "loading", "sizes", "src", "srcSet"]);
+    return (React.createElement(Image, __assign({ alt: alt, anchor: anchor, fit: "cover", loading: loading, sizes: sizes, src: src, srcSet: srcSet }, props)));
+};
+PosterImage.displayName = "Poster.Image";
+
+var PosterVideo = function (_a) {
+    var _b;
+    var _c = _a.anchor, anchor = _c === void 0 ? "C" : _c, _d = _a.autoPlay, autoPlay = _d === void 0 ? true : _d, children = _a.children, _e = _a.loop, loop = _e === void 0 ? true : _e, props = __rest(_a, ["anchor", "autoPlay", "children", "loop"]);
+    return (React.createElement("video", __assign({ className: classNames((_b = {
+                "arc-PosterVideo": true
+            },
+            _b[suffixModifier("arc-PosterVideo--anchor", anchor)] = anchor,
+            _b)), autoPlay: autoPlay, muted: true, loop: loop }, filterDataAttrs(props)), children));
+};
+PosterVideo.displayName = "Poster.Video";
+
+/**
+ * Use `Poster` to compose content on an image or video background.
+ */
+var Poster = function (_a) {
+    var background = _a.background, children = _a.children, _b = _a.overlay, overlay = _b === void 0 ? true : _b, _c = _a.surface, surface = _c === void 0 ? "darker" : _c, props = __rest(_a, ["background", "children", "overlay", "surface"]);
+    return (React.createElement(Surface, { background: surface },
+        React.createElement("div", __assign({ className: classNames({
+                "arc-Poster": true,
+                "arc-Poster--overlay": overlay,
+                "arc-Poster--overlayLight": surface === "lighter"
+            }) }, filterDataAttrs(props)),
+            React.createElement("div", { className: "arc-Poster-backgroundWrapper" }, background),
+            React.createElement("div", { className: "arc-Poster-body" }, children))));
+};
+PosterImage.displayName = "Poster.Image";
+Poster.Image = PosterImage;
+PosterVideo.displayName = "Poster.Video";
+Poster.Video = PosterVideo;
+
+export { Poster };

package/dist/RadioGroup/index.d.ts

@@ -0,0 +1,85 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+import { FormControlProps } from "../_shared/FormControl-9dc9ecc3";
+/**
+ * Radio Button component.
+ */
+declare const RadioButton: FC<RadioButtonProps>;
+interface RadioButtonProps {
+    /**
+     * ID for the Radio Button.
+     */
+    id: string;
+    /**
+     * Should the RadioButton be disabled?
+     */
+    isDisabled?: boolean;
+    /**
+     * Helper text for the RadioButton, shown below the label.
+     */
+    helper?: string;
+    /**
+     * Label for the RadioButton.
+     */
+    label: string;
+    /**
+     * Current value (controlled).
+     */
+    value: string;
+}
+type EventType = React.ChangeEvent<HTMLInputElement>;
+/**
+ * Use `RadioGroup` to wrap and control radio buttons and apply default values
+ */
+declare const RadioGroup: FC<RadioGroupProps> & {
+    RadioButton: typeof RadioButton;
+};
+interface RadioGroupProps extends Omit<FormControlProps, "children" | "elementType" | "errorMessage" | "htmlFor" | "labelSize" | "requirementStatus"> {
+    /**
+     * Contents of the RadioGroup. Should only contain `RadioGroup.RadioButton`
+     */
+    children?: React.ReactNode;
+    /**
+     * Value of the RadioButton that should be checked by default.
+     */
+    checkedValue: string;
+    /**
+     * Should all controls be disabled?
+     */
+    isDisabled?: boolean;
+    /**
+     * Helper message for the RadioGroup.
+     */
+    helper?: string;
+    /**
+     * ID for the RadioGroup.
+     */
+    id: string;
+    /**
+     * Label for the RadioGroup.
+     */
+    label: string;
+    /**
+     * Label size for the RadioGroup
+     */
+    labelSize?: "s" | "l";
+    /**
+     * Name for the RadioGroup.
+     */
+    name: string;
+    /**
+     * Function to call when the RadioGroup loses focus.
+     */
+    onBlur?: (e: EventType) => void;
+    /**
+     * Callback function to update the RadioGroup's controlled `checkedValue` prop,
+     * for example `e => setCheckedValue(e.target.value)`.
+     */
+    onChange?: (event: EventType) => void;
+    /**
+     * Size of the RadioGroup.
+     */
+    size?: "s" | "l";
+}
+export { RadioGroup };

package/dist/RadioGroup/index.js

@@ -0,0 +1,64 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/index-e3c83626.js';
+import React, { createContext, useContext, forwardRef, useEffect } from 'react';
+import { F as FormControl } from '../_shared/FormControl-9dc9ecc3.js';
+import { c as classNames } from '../_shared/index-56d9df62.js';
+import { C as Context } from '../_shared/Surface-3fe44a2a.js';
+
+var RadioContext = createContext({});
+var Provider = RadioContext.Provider;
+var useRadioContext = function () {
+    var context = useContext(RadioContext);
+    return context;
+};
+
+/**
+ * Radio Button component.
+ */
+var RadioButton = forwardRef(function (_a, ref) {
+    var helper = _a.helper, id = _a.id, isDisabled = _a.isDisabled, label = _a.label, value = _a.value, props = __rest(_a, ["helper", "id", "isDisabled", "label", "value"]);
+    var _b = useRadioContext(), blurEvent = _b.blurEvent, changeEvent = _b.changeEvent, groupDisabled = _b.groupDisabled, checkedValue = _b.checkedValue, labelSize = _b.labelSize, name = _b.name, size = _b.size;
+    var surface = useContext(Context).surface;
+    var idLabel = "".concat(id, "-label");
+    var checked = checkedValue === value ? true : false;
+    return (React.createElement("div", __assign({ className: classNames({
+            "arc-RadioButton": true,
+            "arc-RadioButton--disabled": isDisabled || groupDisabled,
+            "arc-RadioButton--small": size === "s",
+            "arc-RadioButton--smallLabel": labelSize === "s",
+            "arc-RadioButton--onDarkSurface": surface === "dark"
+        }) }, filterDataAttrs(props)),
+        React.createElement("label", { className: "arc-RadioButton-label", htmlFor: id, id: idLabel },
+            React.createElement("input", { className: "arc-RadioButton-input", checked: typeof changeEvent !== "function" ? undefined : checked, defaultChecked: typeof changeEvent !== "function" ? checked : undefined, disabled: isDisabled || groupDisabled, id: id, name: name, onBlur: blurEvent, onChange: changeEvent, ref: ref, type: "radio", value: value }),
+            React.createElement("span", null,
+                label,
+                helper && React.createElement("span", { className: "arc-RadioButton-helper" }, helper)))));
+});
+
+/**
+ * Use `RadioGroup` to wrap and control radio buttons and apply default values
+ */
+var RadioGroup = function (_a) {
+    var children = _a.children, checkedValue = _a.checkedValue, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, id = _a.id, helper = _a.helper, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? "l" : _d, props = __rest(_a, ["children", "checkedValue", "isDisabled", "id", "helper", "label", "labelSize", "name", "onBlur", "onChange", "size"]);
+    useEffect(function () {
+        React.Children.map(children, function (item) {
+            if (item && item.type !== RadioButton) {
+                throw new Error("Illegal child passed to <RadioGroup />. Ensure to only use <RadioGroup.RadioButton />.");
+            }
+        });
+    }, [children]);
+    return (React.createElement(Provider, { value: {
+            blurEvent: onBlur,
+            changeEvent: onChange,
+            groupDisabled: isDisabled,
+            checkedValue: checkedValue,
+            labelSize: labelSize,
+            name: name,
+            size: size
+        } },
+        React.createElement("div", __assign({ className: "arc-RadioGroup" }, filterDataAttrs(props)),
+            React.createElement(FormControl, { elementType: "fieldset", label: label, labelSize: labelSize, helper: helper, id: id, requirementStatus: "not-applicable" }, children))));
+};
+RadioButton.displayName = "RadioGroup.RadioButton";
+RadioGroup.RadioButton = RadioButton;
+
+export { RadioGroup };

package/dist/Rule/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+/**
+ * Use `Rule` to display a horizontal rule.
+ */
+declare const Rule: FC<RuleProps>;
+interface RuleProps {
+}
+export { Rule };

package/dist/Rule/index.js

@@ -0,0 +1,17 @@
+import { 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 { C as Context } from '../_shared/Surface-3fe44a2a.js';
+
+/**
+ * Use `Rule` to display a horizontal rule.
+ */
+var Rule = function (props) {
+    var surface = useContext(Context).surface;
+    return (React.createElement("hr", __assign({ className: classNames({
+            "arc-Rule": true,
+            "arc-Rule--onDarkSurface": surface === "dark"
+        }) }, filterDataAttrs(props))));
+};
+
+export { Rule };

package/dist/Section/index.d.ts

@@ -0,0 +1 @@
+export { Section } from "../_shared/Section-927988cb";

package/dist/Section/index.js

@@ -0,0 +1,4 @@
+export { S as Section } from '../_shared/Section-927988cb.js';
+import '../_shared/index-e3c83626.js';
+import '../_shared/index-56d9df62.js';
+import 'react';

package/dist/SiteFooter/index.d.ts

@@ -0,0 +1,64 @@
+/// <reference types="react" />
+import { FC, ReactNode } from "react";
+/**
+ * Use `SiteFooter` to display information at the bottom of a page.
+ */
+declare const SiteFooter: FC<SiteFooterProps> & {
+    Item: typeof SiteFooterItem;
+    ItemGroup: typeof SiteFooterItemGroup;
+};
+declare const SiteFooterItemGroup: FC<SiteFooterItemGroupProps>;
+declare const SiteFooterItem: FC<SiteFooterItemProps>;
+interface SiteFooterItemGroupProps {
+    /**
+     * Contents of the SiteFooterItemGroup. Must be SiteFooter.Item components.
+     */
+    children: ReactNode;
+    /**
+     * Title text for the SiteFooterItemGroup.
+     */
+    title: string;
+}
+interface SiteFooterItemProps {
+    /**
+     * Contents of the SiteFooterItem.
+     */
+    children: ReactNode;
+    /**
+     * A URL to link to when the Item is clicked or touched.
+     */
+    href: string;
+    /**
+     * On click handler.
+     */
+    onClick?: () => void;
+}
+interface SiteFooterProps {
+    /**
+     * Secondary content of the SiteFooter. Must be SiteFooter.Item components.
+     */
+    children?: ReactNode;
+    /**
+     * Copyright year.
+     */
+    currentYear?: string;
+    /**
+     * Should the SiteFooter include a Curve?
+     */
+    curve?: boolean;
+    /**
+     * Accessible text for the SiteFooter logo.
+     */
+    logoLabel?: string;
+    /**
+     * Main content of the SiteFooter. Must be SiteFooter.ItemGroup components.
+     */
+    main?: ReactNode;
+    /**
+     * Text that appears at the top of the footer. Can be the name of the site, a
+     * brand strapline, or similar.
+     */
+    siteName?: string;
+}
+declare const _default: (el: HTMLDivElement, rehydrateChildren: any) => Promise<JSX.Element>;
+export { SiteFooter, _default as SiteFooterRehydrator };

package/dist/SiteFooter/index.js

@@ -0,0 +1,88 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs, d as __awaiter, e as __generator } from '../_shared/index-e3c83626.js';
+import { A as ArcBreakpointM } from '../_shared/index.es-f5886c3a.js';
+import React, { useEffect, Fragment } from 'react';
+import { B as BrandLogo } from '../_shared/BrandLogo-6cc8202e.js';
+import { C as Curve } from '../_shared/Curve-5f476d0b.js';
+import { u as useMediaQuery } from '../_shared/use-media-query-f11805d4.js';
+import { S as Section } from '../_shared/Section-927988cb.js';
+import { S as Surface } from '../_shared/Surface-3fe44a2a.js';
+import { h as handleLinkClick } from '../_shared/handle-link-click-35e09d0c.js';
+import '../_shared/index-56d9df62.js';
+import '../_shared/suffix-modifier-2a93822c.js';
+
+/**
+ * Use `SiteFooter` to display information at the bottom of a page.
+ */
+var SiteFooter = function (_a) {
+    var children = _a.children, currentYear = _a.currentYear, _b = _a.curve, curve = _b === void 0 ? true : _b, logoLabel = _a.logoLabel, main = _a.main, siteName = _a.siteName, props = __rest(_a, ["children", "currentYear", "curve", "logoLabel", "main", "siteName"]);
+    useEffect(function () {
+        React.Children.map(children, function (item) {
+            if (item && item.type !== SiteFooterItem) {
+                throw new Error("Illegal child passed to <SiteFooter />. Ensure to only use <SiteFooter.Item />.");
+            }
+        });
+    }, [children]);
+    return (React.createElement(React.Fragment, null,
+        curve ? (React.createElement(Curve, { bottomColor: "brand-flat", from: "topLeft", size: "s" })) : null,
+        React.createElement("footer", __assign({ className: "arc-SiteFooter" }, filterDataAttrs(props)),
+            React.createElement(Surface, { background: "brand-flat", paddingVertical: "24" },
+                (siteName || main) && (React.createElement(React.Fragment, null,
+                    React.createElement(Section, null,
+                        siteName && (React.createElement("div", { className: "arc-SiteFooter-name" }, siteName)),
+                        main && React.createElement("div", { className: "arc-SiteFooter-main" }, main)),
+                    React.createElement("hr", { className: "arc-SiteFooter-rule" }))),
+                React.createElement(Section, null,
+                    React.createElement("div", { className: "arc-SiteFooter-secondary" },
+                        children && (React.createElement("ul", { className: "arc-SiteFooter-secondaryItems" }, children)),
+                        React.createElement("div", { className: "arc-SiteFooter-brand" },
+                            React.createElement("div", { className: "arc-SiteFooter-copyright" },
+                                React.createElement("span", { className: "arc-SiteFooter-copyrightSymbol" }, "\u00A9"), " ".concat(currentYear || new Date().getFullYear())),
+                            React.createElement(BrandLogo, { label: logoLabel }))))))));
+};
+var SiteFooterItemGroup = function (_a) {
+    var children = _a.children, title = _a.title;
+    var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcBreakpointM, "px)"));
+    useEffect(function () {
+        React.Children.map(children, function (item) {
+            if (item && item.type !== SiteFooterItem && item.type !== Fragment) {
+                throw new Error("Illegal child passed to <SiteFooterItemGroup />. Ensure to only use <SiteFooter.Item />.");
+            }
+        });
+    }, [children]);
+    return (React.createElement("details", { className: "arc-SiteFooter-disclosure", open: isMinWidthArcBreakpointM },
+        React.createElement("summary", { className: "arc-SiteFooter-summary", tabIndex: isMinWidthArcBreakpointM ? -1 : 0 },
+            React.createElement("h2", { className: "arc-SiteFooter-title" }, title)),
+        React.createElement("ul", { className: "arc-SiteFooter-mainItems" }, children)));
+};
+var SiteFooterItem = function (_a) {
+    var children = _a.children, href = _a.href, onClick = _a.onClick, props = __rest(_a, ["children", "href", "onClick"]);
+    return (React.createElement("li", __assign({ className: "arc-SiteFooter-item" }, filterDataAttrs(props)),
+        React.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteFooter-link", href: href }, children)));
+};
+SiteFooterItem.displayName = "SiteFooter.Item";
+SiteFooter.Item = SiteFooterItem;
+SiteFooterItemGroup.displayName = "SiteFooter.ItemGroup";
+SiteFooter.ItemGroup = SiteFooterItemGroup;
+
+var SiteFooter_rehydrator = (function (el, rehydrateChildren) { return __awaiter(void 0, void 0, void 0, function () {
+    var children, titleElement, title, props;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, rehydrateChildren(el.querySelector(".arc-SiteFooter-mainItems"))];
+            case 1:
+                children = _a.sent();
+                titleElement = el.querySelector(".arc-SiteFooter-title");
+                title = "";
+                if (titleElement) {
+                    title = titleElement.textContent || /* istanbul ignore next */ "";
+                }
+                props = {
+                    children: children,
+                    title: title
+                };
+                return [2 /*return*/, React.createElement(SiteFooter.ItemGroup, __assign({}, props), children)];
+        }
+    });
+}); });
+
+export { SiteFooter, SiteFooter_rehydrator as SiteFooterRehydrator };