@arc-ui/components 12.0.0-alpha.0 → 12.0.0-beta.11

package/dist/_shared/esm/DatePicker-6a9fa08d.js

@@ -0,0 +1,309 @@
+import { b as __spreadArray, _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-dce6c01d.js';
+import React__default, { forwardRef, useState, useRef, useEffect } from 'react';
+import { c as classNames } from './index-2e73c2e9.js';
+import { R as Root2, A as Anchor2, P as Portal, C as Content2 } from './index-6fd7da96.js';
+import { C as Calendar, i as isBefore, a as isAfter, c as compareAsc } from './Calendar-661f377b.js';
+import { r as requiredArgs, t as toDate, b as isValid, f as format } from './index-ce6dee84.js';
+import { u as useThemeElement } from './index-77f860f1.js';
+import { T as TextInputWithPlaceHolder } from './TextInput-4e1b1b89.js';
+
+/**
+ * @name startOfDay
+ * @category Day Helpers
+ * @summary Return the start of a day for the given date.
+ *
+ * @description
+ * Return the start of a day for the given date.
+ * The result will be in the local timezone.
+ *
+ * @param {Date|Number} date - the original date
+ * @returns {Date} the start of a day
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // The start of a day for 2 September 2014 11:55:00:
+ * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))
+ * //=> Tue Sep 02 2014 00:00:00
+ */
+function startOfDay(dirtyDate) {
+  requiredArgs(1, arguments);
+  var date = toDate(dirtyDate);
+  date.setHours(0, 0, 0, 0);
+  return date;
+}
+
+/**
+ * @name isSameDay
+ * @category Day Helpers
+ * @summary Are the given dates in the same day (and year and month)?
+ *
+ * @description
+ * Are the given dates in the same day (and year and month)?
+ *
+ * @param {Date|Number} dateLeft - the first date to check
+ * @param {Date|Number} dateRight - the second date to check
+ * @returns {Boolean} the dates are in the same day (and year and month)
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Are 4 September 06:00:00 and 4 September 18:00:00 in the same day?
+ * const result = isSameDay(new Date(2014, 8, 4, 6, 0), new Date(2014, 8, 4, 18, 0))
+ * //=> true
+ *
+ * @example
+ * // Are 4 September and 4 October in the same day?
+ * const result = isSameDay(new Date(2014, 8, 4), new Date(2014, 9, 4))
+ * //=> false
+ *
+ * @example
+ * // Are 4 September, 2014 and 4 September, 2015 in the same day?
+ * const result = isSameDay(new Date(2014, 8, 4), new Date(2015, 8, 4))
+ * //=> false
+ */
+function isSameDay(dirtyDateLeft, dirtyDateRight) {
+  requiredArgs(2, arguments);
+  var dateLeftStartOfDay = startOfDay(dirtyDateLeft);
+  var dateRightStartOfDay = startOfDay(dirtyDateRight);
+  return dateLeftStartOfDay.getTime() === dateRightStartOfDay.getTime();
+}
+
+var parseRangeString = function (value) {
+    if (value === void 0) { value = ""; }
+    var _a = value.replace(/\s/g, "").split("-"), _b = _a[0], start = _b === void 0 ? "" : _b, _c = _a[1], end = _c === void 0 ? "" : _c;
+    var _d = start.split("/"), startDay = _d[0], startMonth = _d[1], startYear = _d[2];
+    var _e = end.split("/"), endDay = _e[0], endMonth = _e[1], endYear = _e[2];
+    return {
+        start: {
+            date: start,
+            day: startDay,
+            month: startMonth,
+            year: startYear
+        },
+        end: {
+            date: end,
+            day: endDay,
+            month: endMonth,
+            year: endYear
+        }
+    };
+};
+
+var parseDateString = function (value) {
+    var _a = value.split("/"), day = _a[0], month = _a[1], year = _a[2];
+    return {
+        day: day,
+        month: month,
+        year: year
+    };
+};
+
+var isDateValid = function (value) {
+    if (value === void 0) { value = ""; }
+    var _a = value.split("/"), day = _a[0], month = _a[1], year = _a[2];
+    return (/^\d{2}\/\d{2}\/\d{4}$/.test(value) &&
+        isValid(new Date("".concat(year, "-").concat(month, "-").concat(day))));
+};
+
+var isRangeValid = function (value) {
+    if (value === void 0) { value = ""; }
+    var _a = value.replace(/\s/g, "").split("-"), _b = _a[0], start = _b === void 0 ? "" : _b, _c = _a[1], end = _c === void 0 ? "" : _c;
+    return isDateValid(start) && isDateValid(end);
+};
+
+var DATE_FORMAT = "dd/MM/yyyy";
+
+var formatDate = function (value) {
+    return format(value, DATE_FORMAT);
+};
+
+var isDisabledDate = function (disabledDates, date) {
+    return Boolean(disabledDates &&
+        disabledDates.find(function (disabledDate) { return isSameDay(date, disabledDate); }));
+};
+
+var convertDateStringToDate = function (value) {
+    if (value === void 0) { value = ""; }
+    var _a = parseDateString(value), day = _a.day, month = _a.month, year = _a.year;
+    var isValidDate = isDateValid(value);
+    return isValidDate ? new Date("".concat(year, "-").concat(month, "-").concat(day)) : new Date();
+};
+
+var convertRangeStringToDates = function (value) {
+    if (value === void 0) { value = ""; }
+    var _a = parseRangeString(value), start = _a.start, end = _a.end;
+    return __spreadArray(__spreadArray([], (isDateValid(start.date)
+        ? [new Date("".concat(start.year, "-").concat(start.month, "-").concat(start.day))]
+        : []), true), (isDateValid(end.date)
+        ? [new Date("".concat(end.year, "-").concat(end.month, "-").concat(end.day))]
+        : []), true);
+};
+
+/**
+ * Use `DatePicker` to clearly present available dates and allow users to choose a way to enter information.
+ */
+var DatePicker = forwardRef(function (_a, ref) {
+    var errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, label = _a.label, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, isRequired = _a.isRequired, labelSize = _a.labelSize, inputSize = _a.inputSize, _b = _a.value, value = _b === void 0 ? "" : _b, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onDateSelect = _a.onDateSelect, onRangeSelect = _a.onRangeSelect, onClickDisclosure = _a.onClickDisclosure, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, type = _a.type, _c = _a.isFluid, isFluid = _c === void 0 ? false : _c, _d = _a.selectionType, selectionType = _d === void 0 ? "single" : _d, disabledDates = _a.disabledDates, minDate = _a.minDate, maxDate = _a.maxDate, props = __rest(_a, ["errorMessage", "helper", "id", "label", "isDisabled", "isReadOnly", "isRequired", "labelSize", "inputSize", "value", "name", "onBlur", "onChange", "onDateSelect", "onRangeSelect", "onClickDisclosure", "disclosureTitle", "disclosureText", "type", "isFluid", "selectionType", "disabledDates", "minDate", "maxDate"]);
+    var _e = useThemeElement(), themeElement = _e[0], setThemeElement = _e[1];
+    var _f = useState("Choose date"), ariaLabel = _f[0], setAriaLabel = _f[1];
+    var _g = useState(false), showCalendar = _g[0], setShowCalendar = _g[1];
+    var buttonRef = useRef(null);
+    var ourRef = useRef(null);
+    var previousValidValue = useRef(value);
+    var lowerCaseDateFormat = DATE_FORMAT.toLowerCase();
+    var placeHolder = selectionType === "range"
+        ? "".concat(lowerCaseDateFormat, " - ").concat(lowerCaseDateFormat)
+        : lowerCaseDateFormat;
+    useEffect(function () {
+        if (selectionType === "single" &&
+            isDateValid(value) &&
+            !isDisabledDate(disabledDates, convertDateStringToDate(value))) {
+            previousValidValue.current = value;
+        }
+        if (selectionType === "range" && isRangeValid(value)) {
+            var rangeHasDisabledDates = convertRangeStringToDates(value).some(function (rangeValue) { return isDisabledDate(disabledDates, rangeValue); });
+            if (!rangeHasDisabledDates) {
+                previousValidValue.current = value;
+            }
+        }
+    }, [value, disabledDates, selectionType]);
+    var getDatePickerRef = function (elementRef) {
+        ourRef.current = elementRef;
+        if (ref && typeof ref === "object") {
+            ref.current = elementRef;
+        }
+        if (ref && typeof ref === "function") {
+            ref(elementRef);
+        }
+    };
+    var dispatchChangeEvent = function (e, value) {
+        onChange &&
+            onChange(__assign(__assign({}, e), { target: __assign(__assign({}, e.target), { value: value }) }));
+    };
+    var handleRangeSelect = function (rangeSelection) {
+        var start = formatDate(rangeSelection.start);
+        var end = rangeSelection.end ? formatDate(rangeSelection.end) : null;
+        onRangeSelect &&
+            onRangeSelect(__assign(__assign({}, rangeSelection), { formattedRange: "".concat(start).concat(end ? " - ".concat(end) : "") }));
+        rangeSelection.isSelectionComplete && setShowCalendar(false);
+    };
+    var handleDateSelect = function (value) {
+        onDateSelect &&
+            onDateSelect({
+                date: value,
+                formattedDate: formatDate(value)
+            });
+        setShowCalendar(false);
+    };
+    var handleSingleSelectionBlur = function (e) {
+        if (value && isDateValid(value) && selectionType === "single") {
+            var _a = parseDateString(value), day = _a.day, month = _a.month, year = _a.year;
+            var date = new Date("".concat(year, "-").concat(month, "-").concat(day));
+            var isDateBeforeMinDate = minDate && isBefore(date, minDate);
+            var isDateAfterMaxDate = maxDate && isAfter(date, maxDate);
+            var isDisabledValue = isDisabledDate(disabledDates, date);
+            if (isDateBeforeMinDate) {
+                return dispatchChangeEvent(e, "".concat(formatDate(minDate)));
+            }
+            if (isDateAfterMaxDate) {
+                return dispatchChangeEvent(e, "".concat(formatDate(maxDate)));
+            }
+            if (isDisabledValue) {
+                var date_1 = previousValidValue.current
+                    ? convertDateStringToDate(previousValidValue.current)
+                    : new Date();
+                return dispatchChangeEvent(e, "".concat(formatDate(date_1)));
+            }
+        }
+    };
+    var handleRangeSelectionBlur = function (e) {
+        if (isRangeValid(value) && selectionType === "range") {
+            var _a = convertRangeStringToDates(value), start = _a[0], end = _a[1];
+            var isStartDateBeforeMinDate = minDate && isBefore(start, minDate);
+            var isEndDateAfterMaxDate = maxDate && isAfter(end, maxDate);
+            var isStartDateDisabled = isDisabledDate(disabledDates, start);
+            var isEndDateDisabled = isDisabledDate(disabledDates, end);
+            if (isStartDateBeforeMinDate && isEndDateAfterMaxDate) {
+                return dispatchChangeEvent(e, "".concat(formatDate(minDate), " - ").concat(formatDate(maxDate)));
+            }
+            if (isStartDateBeforeMinDate) {
+                return dispatchChangeEvent(e, "".concat(formatDate(minDate), " - ").concat(formatDate(end)));
+            }
+            if (isEndDateAfterMaxDate) {
+                return dispatchChangeEvent(e, "".concat(formatDate(start), " - ").concat(formatDate(maxDate)));
+            }
+            if (isStartDateDisabled || isEndDateDisabled) {
+                var _b = previousValidValue.current
+                    ? convertRangeStringToDates(previousValidValue.current)
+                    : [], start_1 = _b[0], end_1 = _b[1];
+                return dispatchChangeEvent(e, start_1 && end_1 ? "".concat(formatDate(start_1), " - ").concat(formatDate(end_1)) : "");
+            }
+            if (isAfter(start, end)) {
+                var _c = [start, end].sort(compareAsc), orderedStart = _c[0], orderedEnd = _c[1];
+                return dispatchChangeEvent(e, "".concat(formatDate(orderedStart), " - ").concat(formatDate(orderedEnd)));
+            }
+        }
+    };
+    var handleBlur = function (e) {
+        onBlur && onBlur(e);
+        if (selectionType === "single") {
+            handleSingleSelectionBlur(e);
+        }
+        if (selectionType === "range") {
+            handleRangeSelectionBlur(e);
+        }
+    };
+    var handleChange = function (e) {
+        onChange && onChange(e);
+    };
+    var handleCalendarOpenChange = function (isOpen) {
+        if (document.activeElement)
+            setShowCalendar(isOpen);
+    };
+    var handleIconClick = function () {
+        var _a;
+        !((_a = ourRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) &&
+            !isDisabled &&
+            !isReadOnly &&
+            setShowCalendar(true);
+    };
+    var handleIconFocus = function () {
+        if (selectionType === "range" && isRangeValid(value)) {
+            var _a = convertRangeStringToDates(value), start = _a[0], end = _a[1];
+            return setAriaLabel("Change dates, currently selected dates are ".concat(format(start, "EEEE do MMMM, yyyy"), " to ").concat(format(end, "EEEE do MMMM, yyyy")));
+        }
+        if (selectionType === "single" && isDateValid(value)) {
+            var date = convertDateStringToDate(value);
+            return setAriaLabel("Change date, currently selected date is ".concat(format(date, "EEEE do MMMM, yyyy")));
+        }
+        setAriaLabel("Choose Date");
+    };
+    var handleCalendarClose = function () {
+        var _a, _b;
+        if (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.tagName) === "BODY") {
+            (_b = buttonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    };
+    var onCancelClick = function () {
+        setShowCalendar(false);
+    };
+    var handleAutoFocus = function (e) {
+        e.preventDefault();
+    };
+    return (React__default.createElement("div", { ref: setThemeElement, className: classNames({
+            "arc-DatePicker--constrained": !isFluid
+        }) },
+        React__default.createElement(TextInputWithPlaceHolder, __assign({ ref: getDatePickerRef, iconButton: {
+                onClick: handleIconClick,
+                onFocus: handleIconFocus,
+                icon: "datePickerCalendar",
+                label: ariaLabel,
+                ref: buttonRef
+            }, placeholder: placeHolder, errorMessage: errorMessage, helper: helper, id: id, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, label: label, labelSize: labelSize, maxLength: selectionType === "range" ? 23 : 10, name: name, onBlur: handleBlur, onChange: handleChange, onClickDisclosure: onClickDisclosure, type: "text", value: value, disclosureTitle: disclosureTitle, disclosureText: disclosureText, inputSize: inputSize }, props, filterDataAttrs(props))),
+        React__default.createElement(Root2, __assign({ open: showCalendar, onOpenChange: handleCalendarOpenChange }, filterDataAttrs(props)),
+            React__default.createElement(Anchor2, null),
+            React__default.createElement(Portal, { container: themeElement },
+                React__default.createElement(Content2, { align: "start", "aria-modal": "true", "aria-label": "Choose Date", className: "arc-DatePicker-modal", onOpenAutoFocus: handleAutoFocus, onCloseAutoFocus: handleCalendarClose },
+                    React__default.createElement(Calendar, { autoFocusOnMount: true, type: type, onCancelClick: onCancelClick, selectionType: selectionType, selectedDate: convertDateStringToDate(value), selectedRange: convertRangeStringToDates(value), disabledDates: disabledDates, minDate: minDate, maxDate: maxDate, onDateSelect: handleDateSelect, onRangeSelect: handleRangeSelect }))))));
+});
+
+export { DATE_FORMAT as D, parseDateString as a, isDateValid as b, DatePicker as c, isRangeValid as i, parseRangeString as p };

package/dist/_shared/esm/{DisclosureMini-bf95a9db.js → DisclosureMini-4a124bc5.js}

@@ -1,13 +1,12 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-dce6c01d.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { useContext, useState } from 'react';
-import { T as Text } from './Text-14f586ac.js';
-import { C as Context } from './Surface-0ca6817d.js';
-import { T as ThemeIcon } from './ThemeIcon-eab5a4d0.js';
+import { T as Text } from './Text-65f0a980.js';
+import { C as Context } from './Surface-a19b8f20.js';
+import { T as ThemeIcon } from './ThemeIcon-933104d6.js';
 
 /**
- * Use `DisclosureMini` to display content that is only visible when toggled into
- * an "open" state.
+ * Use `DisclosureMini` to show and hide sections of content.
  */
 var DisclosureMini = function (_a) {
     var children = _a.children, summary = _a.summary, onClick = _a.onClick, id = _a.id, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.iconPosition, iconPosition = _c === void 0 ? "left" : _c, _d = _a.size, size = _d === void 0 ? "l" : _d, props = __rest(_a, ["children", "summary", "onClick", "id", "isOpen", "iconPosition", "size"]);
@@ -17,13 +16,11 @@ var DisclosureMini = function (_a) {
         onClick && onClick();
         setDisclosureState(function (prevState) { return !prevState; });
     };
-    return (React__default.createElement("details", __assign({ "data-testid": "DisclosureMini", className: classNames({
-            "arc-DisclosureMini": true,
+    return (React__default.createElement("details", __assign({ "data-testid": "DisclosureMini", className: classNames("arc-DisclosureMini", {
             "arc-DisclosureMini--onDarkSurface": surface === "dark"
         }), open: isOpen }, filterDataAttrs(props)),
-        React__default.createElement("summary", { "data-testid": "DisclosureMiniSummary", className: classNames("arc-DisclosureMini-summary", {
-                "arc-DisclosureMini-summary--icon-left": iconPosition === "left",
-                "arc-DisclosureMini-summary--icon-right": iconPosition === "right"
+        React__default.createElement("summary", { "data-testid": "DisclosureMiniSummary", className: classNames("arc-DisclosureMini-summary arc-DisclosureMini-summary--icon-".concat(iconPosition), {
+                "arc-DisclosureMini-summary--small": size === "s"
             }), onClick: handleOnClick, "aria-expanded": disclousreState },
             React__default.createElement("div", { className: classNames("arc-DisclosureMini-summary-icon", {
                     "arc-DisclosureMini-summary-icon--small": size === "s"

package/dist/_shared/esm/Download-d96cbe5a.js

@@ -0,0 +1,37 @@
+import { a as __assign } from './index.es-dce6c01d.js';
+import React__default from 'react';
+import { c as classNames } from './index-2e73c2e9.js';
+import { T as Text } from './Text-65f0a980.js';
+import { T as ThemeIcon } from './ThemeIcon-933104d6.js';
+import { V as VerticalSpace } from './VerticalSpace-1928ee49.js';
+
+var Download = function (_a) {
+    var name = _a.name, onClick = _a.onClick, description = _a.description, href = _a.href, type = _a.type, size = _a.size, _b = _a.icon, icon = _b === void 0 ? "downloadFile" : _b, _c = _a.isCompact, isCompact = _c === void 0 ? false : _c, _d = _a.isFullWidth, isFullWidth = _d === void 0 ? true : _d;
+    var linkProps = href
+        ? {
+            href: href,
+            download: true,
+            target: "_blank",
+            rel: "noreferrer"
+        }
+        : {
+            role: "button"
+        };
+    return (React__default.createElement("a", __assign({}, linkProps, { className: classNames("arc-Download", {
+            "arc-Download--maxContent": !isFullWidth,
+            "arc-Download--compact": isCompact
+        }), "aria-label": name, onClick: onClick }),
+        React__default.createElement("div", { className: "arc-Download-iconContainer" },
+            React__default.createElement(ThemeIcon, { size: isCompact ? 40 : 64, icon: icon })),
+        React__default.createElement("div", { className: "arc-Download-contentContainer" },
+            React__default.createElement("span", { className: "arc-Download-name" }, name),
+            React__default.createElement(Text, { tone: "muted", size: "xs" },
+                type,
+                "\u00A0",
+                size && "| ".concat(size)),
+            description && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(VerticalSpace, { size: "4" }),
+                React__default.createElement(Text, { tone: "supporting" }, description))))));
+};
+
+export { Download as D };

package/dist/_shared/esm/{Filter-58a42358.js → Filter-25f0a8c8.js}

@@ -1,7 +1,8 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs, b as __spreadArray } from './filter-data-attrs-ea8f4ed4.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs, b as __spreadArray } from './index.es-dce6c01d.js';
 import React__default, { useContext, useState, useEffect } from 'react';
-import { C as Context } from './Surface-0ca6817d.js';
+import { C as Context } from './Surface-a19b8f20.js';
 import { c as classNames } from './index-2e73c2e9.js';
+import { V as VisuallyHidden } from './VisuallyHidden-ecde5867.js';
 
 var FilterControl = function (_a) {
     var children = _a.children, onClick = _a.onClick, _b = _a.isSelected, isSelected = _b === void 0 ? false : _b;
@@ -14,37 +15,44 @@ var FilterControl = function (_a) {
     return (React__default.createElement("button", { className: classNames("arc-FilterControl", {
             "arc-FilterControl--onDarkSurface": surface === "dark",
             "arc-FilterControl--selected": selected
-        }), onClick: onClickHandler, tabIndex: 0 },
-        React__default.createElement("div", { className: "arc-FilterControl-text" }, children)));
+        }), onClick: onClickHandler, tabIndex: 0, "aria-pressed": selected },
+        React__default.createElement("div", { className: "arc-FilterControl-text" },
+            React__default.createElement(VisuallyHidden, null, "Filter by"),
+            " ",
+            children)));
 };
 
 var FilterControls = function (_a) {
-    var children = _a.children, controlsAlignment = _a.controlsAlignment, props = __rest(_a, ["children", "controlsAlignment"]);
-    return (React__default.createElement("div", __assign({ className: classNames("arc-FilterControls", {
+    var children = _a.children, controlsAlignment = _a.controlsAlignment;
+    return (React__default.createElement("div", { className: classNames("arc-FilterControls", {
             "arc-FilterControls--alignLeft": controlsAlignment === "left",
             "arc-FilterControls--alignRight": controlsAlignment === "right"
-        }) }, filterDataAttrs(props)), children));
+        }) }, children));
 };
 
 var FilterItem = function (_a) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    return (React__default.createElement("div", __assign({ className: "arc-FilterItem" }, filterDataAttrs(props)), children));
+    var children = _a.children;
+    return React__default.createElement("div", { className: "arc-FilterItem" }, children);
 };
 
 var FilterItems = function (_a) {
-    var children = _a.children, _b = _a.displayType, displayType = _b === void 0 ? "grid" : _b, props = __rest(_a, ["children", "displayType"]);
-    return (React__default.createElement("div", __assign({ className: classNames("arc-FilterItems", {
-            "arc-FilterItems--list": displayType === "list",
-            "arc-FilterItems--grid": displayType === "grid"
-        }) }, filterDataAttrs(props)), displayType === "list"
-        ? React__default.Children.toArray(children).map(function (child, index, array) { return (React__default.createElement(React__default.Fragment, { key: index },
-            child,
-            index !== array.length - 1 && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("div", { className: "arc-FilterItems-separator", "data-testid": "arc-FilterItems-separator" }))))); })
-        : children));
+    var children = _a.children, error = _a.error, _b = _a.displayType, displayType = _b === void 0 ? "grid" : _b;
+    return React__default.Children.toArray(children).length > 0 ? (React__default.createElement("div", null,
+        React__default.createElement("div", { className: "arc-FilterItems-offscreen", "aria-live": "assertive" }, React__default.Children.toArray(children).length > 0
+            ? "".concat(React__default.Children.toArray(children).length, " records listed.")
+            : null),
+        React__default.createElement("div", { className: classNames("arc-FilterItems", {
+                "arc-FilterItems--list": displayType === "list",
+                "arc-FilterItems--grid": displayType === "grid"
+            }) }, displayType === "list"
+            ? React__default.Children.toArray(children).map(function (child, index, array) { return (React__default.createElement(React__default.Fragment, { key: index },
+                child,
+                index !== array.length - 1 && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement("div", { className: "arc-FilterItems-separator", "data-testid": "arc-FilterItems-separator" }))))); })
+            : children))) : (React__default.createElement("div", { "aria-live": "assertive" }, error));
 };
 
-/** use `Filter` for interactive elements that filter and categorise page content. */
+/** Use `Filter` to filter and categorise page content. */
 var Filter = function (_a) {
     var children = _a.children, onChange = _a.onChange, displayType = _a.displayType, controlsAlignment = _a.controlsAlignment, _b = _a.logicType, logicType = _b === void 0 ? "OR" : _b, error = _a.error, props = __rest(_a, ["children", "onChange", "displayType", "controlsAlignment", "logicType", "error"]);
     var _c = useState([]), selectedControls = _c[0], setSelectedControls = _c[1];
@@ -101,7 +109,7 @@ var Filter = function (_a) {
         React__default.createElement(FilterControls, { controlsAlignment: controlsAlignment }, controls &&
             React__default.isValidElement(controls) &&
             React__default.Children.map(controls.props.children, function (control, index) { return (React__default.createElement(FilterControl, { key: index, onClick: function () { return handleControlClick(control.props.children); }, isSelected: control.props.isSelected }, control.props.children)); })),
-        filteredItems.length === 0 ? (React__default.createElement(React__default.Fragment, null, error)) : (React__default.createElement(FilterItems, { displayType: displayType }, filteredItems.map(function (item) { return item.props.children; })))));
+        React__default.createElement(FilterItems, { displayType: displayType, error: error }, filteredItems.map(function (item) { return item.props.children; }))));
 };
 Filter.Controls = FilterControls;
 Filter.Control = FilterControl;

package/dist/_shared/esm/{FormControl-433228f5.js → FormControl-496f7c47.js}

@@ -1,9 +1,10 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-dce6c01d.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { createContext, useContext } from 'react';
-import { C as Context$1 } from './Surface-0ca6817d.js';
-import { D as DisclosureMini } from './DisclosureMini-bf95a9db.js';
-import { T as ThemeIcon } from './ThemeIcon-eab5a4d0.js';
+import { C as Context$1 } from './Surface-a19b8f20.js';
+import { D as DisclosureMini } from './DisclosureMini-4a124bc5.js';
+import { V as VisuallyHidden } from './VisuallyHidden-ecde5867.js';
+import { T as ThemeIcon } from './ThemeIcon-933104d6.js';
 
 /**
  * Optionally define ariaDescribedBy if errorMessage or helper exist.
@@ -41,14 +42,14 @@ var Provider = Context.Provider;
  * Use `FormControl` to provide inputs with labels, helper text and error messages
  */
 var FormControl = function (_a) {
-    var children = _a.children, _b = _a.elementType, ElementType = _b === void 0 ? "div" : _b, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, supplementaryInfo = _a.supplementaryInfo, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.requirementStatus, requirementStatus = _d === void 0 ? "optional" : _d, _e = _a.helperUnderLabel, helperUnderLabel = _e === void 0 ? false : _e, isDisabled = _a.isDisabled, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = __rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "supplementaryInfo", "id", "label", "labelSize", "requirementStatus", "helperUnderLabel", "isDisabled", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
+    var children = _a.children, _b = _a.elementType, ElementType = _b === void 0 ? "div" : _b, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, supplementaryInfo = _a.supplementaryInfo, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.requirementStatus, requirementStatus = _d === void 0 ? "optional" : _d, _e = _a.helperUnderLabel, helperUnderLabel = _e === void 0 ? false : _e, isDisabled = _a.isDisabled, _f = _a.hideLabel, hideLabel = _f === void 0 ? false : _f, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = __rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "supplementaryInfo", "id", "label", "labelSize", "requirementStatus", "helperUnderLabel", "isDisabled", "hideLabel", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
     var surface = useContext(Context$1).surface;
-    var _f = useAriaDescribedby({
+    var _g = useAriaDescribedby({
         disclosureText: disclosureText,
         errorMessage: errorMessage,
         helper: helper,
         id: htmlFor || id
-    }), ariaDescribedby = _f.ariaDescribedby, idError = _f.idError, idHelper = _f.idHelper, idDisclosure = _f.idDisclosure;
+    }), ariaDescribedby = _g.ariaDescribedby, idError = _g.idError, idHelper = _g.idHelper, idDisclosure = _g.idDisclosure;
     var LabelType = ElementType === "div" ? "label" : "legend";
     var elementProps = {};
     var labelProps = {};
@@ -64,6 +65,9 @@ var FormControl = function (_a) {
     else {
         elementProps["aria-describedby"] = ariaDescribedby;
     }
+    var hasInfo = helperUnderLabel
+        ? Boolean(errorMessage || disclosureTitle || supplementaryInfo)
+        : Boolean(errorMessage || disclosureTitle || helper || supplementaryInfo);
     return (React__default.createElement(Provider, { value: { requirementStatus: requirementStatus } },
         React__default.createElement(ElementType, __assign({ className: classNames({
                 "arc-FormControl": true,
@@ -71,17 +75,28 @@ var FormControl = function (_a) {
                 "arc-FormControl--smallLabel": labelSize === "s",
                 "arc-FormControl--onDarkSurface": surface === "dark"
             }), id: id }, elementProps, filterDataAttrs(props)),
-            React__default.createElement(LabelType, __assign({ className: "arc-FormControl-label" }, labelProps),
+            hideLabel === true ? (React__default.createElement(VisuallyHidden, null,
+                React__default.createElement(LabelType, __assign({ className: classNames("arc-FormControl-label", {
+                        "arc-FormControl-label--withHelperUnderLabel": helperUnderLabel && helper
+                    }) }, labelProps),
+                    label,
+                    requirementStatus === "optional" && (React__default.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))))) : (React__default.createElement(LabelType, __assign({ className: classNames("arc-FormControl-label", {
+                    "arc-FormControl-label--withHelperUnderLabel": helperUnderLabel && helper
+                }) }, labelProps),
                 label,
-                requirementStatus === "optional" && (React__default.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))),
-            helperUnderLabel && (React__default.createElement(React__default.Fragment, null, helper && (React__default.createElement("div", { className: "arc-FormControl-helper arc-FormControl-helper--underLabel", id: idHelper }, helper)))),
+                requirementStatus === "optional" && (React__default.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)")))),
+            helperUnderLabel && helper && (React__default.createElement("div", { className: "arc-FormControl-helper arc-FormControl-helper--underLabel", id: idHelper }, helper)),
             children,
-            React__default.createElement("div", { className: "arc-FormControl-info" },
-                !helperUnderLabel && (React__default.createElement("div", { className: "arc-FormControl-helperContainer" }, errorMessage ? (React__default.createElement("div", { className: "arc-FormControl-error", id: idError },
+            React__default.createElement("div", { className: classNames("arc-FormControl-info", {
+                    "arc-FormControl-info--hasContent": hasInfo
+                }) },
+                ((helper && !helperUnderLabel) ||
+                    errorMessage ||
+                    disclosureTitle) && (React__default.createElement("div", { className: "arc-FormControl-helperContainer" }, errorMessage ? (React__default.createElement("div", { className: "arc-FormControl-error", id: idError },
                     React__default.createElement("span", { className: "arc-FormControl-error--icon" },
                         React__default.createElement(ThemeIcon, { icon: "formControlAlert" })),
-                    errorMessage)) : disclosureTitle ? (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(DisclosureMini, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize, id: idDisclosure }, disclosureText))) : (helper && (React__default.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))),
+                    errorMessage)) : (!helperUnderLabel &&
+                    (disclosureTitle ? (React__default.createElement(DisclosureMini, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize, id: idDisclosure }, disclosureText)) : (helper && (React__default.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))))),
                 supplementaryInfo && (React__default.createElement("div", { className: "arc-FormControl-supplementaryInfo" }, supplementaryInfo))))));
 };
 

package/dist/_shared/esm/Grid-0109c562.js

@@ -0,0 +1,39 @@
+import { a as __assign, f as filterDataAttrs, _ as __rest, s as suffixModifier } from './index.es-dce6c01d.js';
+import React__default from 'react';
+import { c as classNames } from './index-2e73c2e9.js';
+
+var BREAKPOINTS = ["xs", "s", "m", "l", "xl"];
+
+var Col = function (props) {
+    return (React__default.createElement("div", __assign({ className: classNames("arc-Grid-col", BREAKPOINTS.reduce(function (acc, bp) {
+            var _a;
+            var _b, _c, _d;
+            var sizeValue = props === null || props === void 0 ? void 0 : props[bp];
+            var orderValue = (_b = props.order) === null || _b === void 0 ? void 0 : _b[bp];
+            var offsetValue = (_c = props.offset) === null || _c === void 0 ? void 0 : _c[bp];
+            var alignValue = (_d = props.align) === null || _d === void 0 ? void 0 : _d[bp];
+            return __assign(__assign({}, acc), (_a = {}, _a["arc-Grid-col--".concat(bp).concat(sizeValue)] = sizeValue !== undefined, _a["arc-Grid-order--".concat(bp).concat(orderValue)] = orderValue !== undefined, _a["arc-Grid-offset--".concat(bp).concat(offsetValue)] = offsetValue !== undefined, _a["arc-Grid-align--".concat(bp).concat(alignValue)] = alignValue !== undefined, _a));
+        }, {})) }, filterDataAttrs(props)), props.children));
+};
+
+var Row = function (_a) {
+    var _b = _a.direction, direction = _b === void 0 ? "row" : _b, _c = _a.align, align = _c === void 0 ? "normal" : _c, _d = _a.justify, justify = _d === void 0 ? "normal" : _d, children = _a.children, props = __rest(_a, ["direction", "align", "justify", "children"]);
+    return (React__default.createElement("div", __assign({ className: classNames("arc-Grid-row", "".concat(suffixModifier("arc-Grid-row--direction", direction)), "".concat(suffixModifier("arc-Grid-row--justify", justify)), "".concat(suffixModifier("arc-Grid-row--align", align))) }, filterDataAttrs(props)), children));
+};
+
+/**
+ * Use `Grid` to compose layouts on a 12-column grid.
+ */
+var Grid = function (_a) {
+    var children = _a.children, isFluid = _a.isFluid, isDebugVisible = _a.isDebugVisible, isGutterless = _a.isGutterless, props = __rest(_a, ["children", "isFluid", "isDebugVisible", "isGutterless"]);
+    return (React__default.createElement("div", __assign({ className: classNames("arc-Grid", {
+            "arc-Grid--fluid": isFluid,
+            "arc-Grid--debugVisible": isDebugVisible,
+            "arc-Grid--gutterless": isGutterless
+        }) }, filterDataAttrs(props)),
+        React__default.createElement("div", { className: "arc-Grid-inner" }, children)));
+};
+Grid.Row = Row;
+Grid.Col = Col;
+
+export { Grid as G };

package/dist/_shared/esm/{Group-73fdb896.js → Group-d06aba74.js}

@@ -1,7 +1,7 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-dce6c01d.js';
 import { c as classNames } from './index-2e73c2e9.js';
-import React__default, { useContext, useEffect } from 'react';
-import { C as Context } from './Surface-0ca6817d.js';
+import React__default, { useContext } from 'react';
+import { C as Context } from './Surface-a19b8f20.js';
 
 /**
  * Use `Group` to arrange flexible items in a row.
@@ -10,13 +10,6 @@ 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__default.Children.map(children, function (item) {
-            if (item && item.type !== Group.Item) {
-                throw new Error("Illegal child passed to <Group />. Ensure to only use <Group.Item />.");
-            }
-        });
-    }, [children]);
     return (React__default.createElement("div", __assign({ className: classNames((_b = {},
             _b["arc-Group"] = true,
             _b["arc-Group--grow"] = grow,