@arc-ui/components 12.0.0-beta7 → 12.0.0

package/lib/Download/Download.cjs

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+var Download = require('../_shared/cjs/Download-Chs-DEGO.cjs');
+require('../_shared/cjs/tslib.es6-CCZ3TN_7.cjs');
+require('react');
+require('../_shared/cjs/index-CTlXMLug.cjs');
+require('../_shared/cjs/Text-jwsn80lQ.cjs');
+require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
+require('../_shared/cjs/index-DR8Rkav9.cjs');
+require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
+require('../_shared/cjs/Surface-DIU5ciDT.cjs');
+require('../_shared/cjs/ThemeIcon-CwYN77IF.cjs');
+require('../_shared/cjs/VerticalSpace-DLQUYsvc.cjs');
+
+
+
+exports.Download = Download.Download;

package/lib/Download/Download.mjs

@@ -0,0 +1,12 @@
+'use client';
+export { D as Download } from '../_shared/esm/Download-CsJLNRAD.mjs';
+import '../_shared/esm/tslib.es6-w7hdJ3oZ.mjs';
+import 'react';
+import '../_shared/esm/index-5C0-U8cc.mjs';
+import '../_shared/esm/Text-BAzOkkzN.mjs';
+import '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';
+import '../_shared/esm/index-Spae4j7j.mjs';
+import '../_shared/esm/filter-attrs-v_SweZXP.mjs';
+import '../_shared/esm/Surface-C69KVzkY.mjs';
+import '../_shared/esm/ThemeIcon-B0n6cKRb.mjs';
+import '../_shared/esm/VerticalSpace-BLWB02I7.mjs';

package/lib/Download/styles.css

@@ -0,0 +1 @@
+.arc-v12-0-0 .arc .arc-Download{align-items:center;background:var(--sem-color-bg-secondary-light-default);border-radius:var(--sem-border-radius-xs);color:var(--sem-color-fg-secondary-light-default);cursor:pointer;display:flex;max-width:100%;outline:var(--sem-border-width-xs) solid var(--sem-color-border-secondary-light-subtle);padding:var(--sem-space-padding-70) var(--sem-space-padding-130) var(--sem-space-padding-70) var(--sem-space-padding-70);text-decoration:none}.arc-v12-0-0 .arc .arc-Download--compact{padding:var(--sem-space-padding-60) var(--sem-space-padding-110) var(--sem-space-padding-60) var(--sem-space-padding-60)}.arc-v12-0-0 .arc .arc-Download--maxContent{width:-moz-max-content;width:max-content}.arc-v12-0-0 .arc .arc-Download-name{color:var(--sem-color-fg-primary-light-default);display:block;font:var(--sem-type-body-reg-l);font-weight:var(--sem-font-weight-bold);text-decoration:underline}.arc-v12-0-0 .arc .arc-Download--compact .arc-Download-name{font:var(--sem-type-body-reg-m);font-weight:var(--sem-font-weight-bold)}.arc-v12-0-0 .arc .arc-Download:focus-visible{border-radius:var(--sem-border-radius-xs);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle)}.arc-v12-0-0 .arc .arc-Download--onDarkSurface:focus-visible{border-radius:var(--sem-border-radius-xs);outline:var(--focus-border-weight-s) solid var(--focus-colors-dark-border-subtle)}.arc-v12-0-0 .arc .arc-Download:focus:not(:focus-visible){border-radius:var(--sem-border-radius-xs);outline:var(--sem-border-width-xs) solid var(--sem-color-border-secondary-light-subtle);outline-offset:0}.arc-v12-0-0 .arc .arc-Download:hover,.arc-v12-0-0 .arc .arc-Download:hover:focus:not(:focus-visible){color:var(--sem-color-fg-secondary-light-default);outline:var(--sem-border-width-s) solid var(--sem-color-border-primary-light-strong)}.arc-v12-0-0 .arc .arc-Download:hover .arc-Download-name{color:var(--sem-color-fg-primary-light-strong)}.arc-v12-0-0 .arc .arc-Download-title{color:var(--sem-color-fg-primary-light-default)}.arc-v12-0-0 .arc .arc-Download-iconContainer{flex:0 1 auto}.arc-v12-0-0 .arc .arc-Download-contentContainer{flex:1 1 0;padding-left:var(--sem-space-padding-50)}.arc-v12-0-0 .arc .arc-Download--compact .arc-Download-contentContainer{padding-left:var(--sem-space-padding-30)}

package/lib/Drawer/Drawer.cjs

@@ -0,0 +1,218 @@
+'use client';
+'use strict';
+
+var tslib_es6 = require('../_shared/cjs/tslib.es6-CCZ3TN_7.cjs');
+var React = require('react');
+var index$2 = require('../_shared/cjs/index-CTlXMLug.cjs');
+var index$1 = require('../_shared/cjs/index-D9onmVh5.cjs');
+var filterAttrs = require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
+var index = require('../_shared/cjs/index-DXNM3D1d.cjs');
+var ThemeIcon = require('../_shared/cjs/ThemeIcon-CwYN77IF.cjs');
+var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-CQg3cOVK.cjs');
+var Surface = require('../_shared/cjs/Surface-DIU5ciDT.cjs');
+var Heading = require('../_shared/cjs/Heading-BYBmZkmS.cjs');
+var Rule = require('../_shared/cjs/Rule-jmvOpci7.cjs');
+require('../_shared/cjs/Combination-6m6aOXZq.cjs');
+require('react/jsx-runtime');
+require('react-dom');
+require('../_shared/cjs/index-BGGFOAAx.cjs');
+require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
+require('../_shared/cjs/index-DR8Rkav9.cjs');
+require('../_shared/cjs/SemanticHeading-C1-fyc3V.cjs');
+
+var Drawer = function (_a) {
+    var isOpen = _a.isOpen, children = _a.children, onRequestClose = _a.onRequestClose, _b = _a.noOverlay, noOverlay = _b === void 0 ? false : _b, _c = _a.shouldReturnFocus, shouldReturnFocus = _c === void 0 ? true : _c, _d = _a.size, size = _d === void 0 ? "m" : _d, height = _a.height, width = _a.width, _e = _a.position, position = _e === void 0 ? "right" : _e, _f = _a.draggable, draggable = _f === void 0 ? false : _f, _g = _a.snapPoints, snapPoints = _g === void 0 ? ["30%", "60%", "90%"] : _g, _h = _a.snapBehaviour, snapBehaviour = _h === void 0 ? "nearest" : _h, dragDownToDismiss = _a.dragDownToDismiss, onDragHandleClick = _a.onDragHandleClick, ariaDescription = _a.ariaDescription, props = tslib_es6.__rest(_a, ["isOpen", "children", "onRequestClose", "noOverlay", "shouldReturnFocus", "size", "height", "width", "position", "draggable", "snapPoints", "snapBehaviour", "dragDownToDismiss", "onDragHandleClick", "ariaDescription"]);
+    var _j = index.useThemeElement(), themeElement = _j[0], setThemeElement = _j[1];
+    var triggerRef = React.useRef(null);
+    var contentRef = React.useRef(null);
+    var _k = React.useState(0), drawerHeight = _k[0], setDrawerHeight = _k[1];
+    var normalisedSnapPoints = snapPoints && snapPoints.length > 0 ? snapPoints : ["30%", "60%", "90%"];
+    var setTriggerElement = function () {
+        return shouldReturnFocus &&
+            (triggerRef.current = document.activeElement);
+    };
+    var focusTriggerElement = function () {
+        if (triggerRef.current) {
+            triggerRef.current.focus();
+        }
+    };
+    var dragRef = React.useRef({
+        active: false,
+        startY: 0,
+        deltaY: 0,
+        startH: 0,
+    });
+    var sizingProperties = tslib_es6.__assign(tslib_es6.__assign({}, (position !== "bottom" && { width: width })), (position === "bottom" && { height: drawerHeight || height }));
+    var onHandleUp = function (e) {
+        onHandleUpCore(e.nativeEvent);
+    };
+    var onHandleClick = function (e) {
+        onHandleUpCore(e.nativeEvent);
+        onDragHandleClick === null || onDragHandleClick === void 0 ? void 0 : onDragHandleClick(e);
+    };
+    var onHandleMove = function (e) {
+        if (!dragRef.current.active)
+            return;
+        dragRef.current.deltaY = e.clientY - dragRef.current.startY;
+        var newHeight = dragRef.current.startH - dragRef.current.deltaY;
+        setDrawerHeight(Math.round(newHeight));
+    };
+    var resolveToPx = function (input) {
+        // if already a number, assume px
+        if (typeof input === "number")
+            return input;
+        var str = input.trim().toLowerCase();
+        if (str.endsWith("%")) {
+            var percentValue = parseFloat(str);
+            return (window.innerHeight * percentValue) / 100;
+        }
+        if (str.endsWith("px")) {
+            var pixelValue = parseFloat(str);
+            return pixelValue;
+        }
+        var numericValue = Number(str);
+        return Number.isFinite(numericValue) ? numericValue : undefined;
+    };
+    var onHandleUpCore = function (e) {
+        if (!dragRef.current.active || !contentRef.current)
+            return;
+        if (dragDownToDismiss && contentRef.current.clientHeight < 100) {
+            dragRef.current.active = false;
+            dragRef.current.deltaY = 0;
+            e.currentTarget.releasePointerCapture(e.pointerId);
+            setDrawerHeight(undefined);
+            onRequestClose();
+            return;
+        }
+        dragRef.current.active = false;
+        e.currentTarget.releasePointerCapture(e.pointerId);
+        var currentHeight = contentRef.current.clientHeight;
+        // turn all snapPoints into px values. Order the values.
+        var snapsPx = (normalisedSnapPoints !== null && normalisedSnapPoints !== void 0 ? normalisedSnapPoints : [])
+            .map(resolveToPx)
+            .filter(function (value) { return value !== undefined; }) // remove undefined values
+            .sort(function (a, b) { return a - b; });
+        var targetSnap = undefined;
+        if (snapBehaviour === "next") {
+            var deltaY = Math.sign(dragRef.current.deltaY);
+            if (deltaY === -1) {
+                // User scrolled up
+                for (var i = 0; i < snapsPx.length; i++) {
+                    if (snapsPx[i] > currentHeight) {
+                        targetSnap = snapsPx[i];
+                        break;
+                    }
+                    else if (currentHeight > snapsPx[snapsPx.length - 1]) {
+                        targetSnap = snapsPx[snapsPx.length - 1];
+                    }
+                }
+            }
+            else if (deltaY === 1) {
+                // User scrolled down
+                for (var i = 0; i < snapsPx.length; i++) {
+                    if (snapsPx[i] < currentHeight) {
+                        targetSnap = snapsPx[i];
+                    }
+                    else if (currentHeight < snapsPx[0]) {
+                        targetSnap = snapsPx[0];
+                    }
+                }
+            }
+            else if (deltaY === 0) {
+                // User clicked without moving go to next snap point
+                for (var i = 0; i < snapsPx.length; i++) {
+                    if (snapsPx[i] > currentHeight) {
+                        targetSnap = snapsPx[i];
+                        break;
+                    }
+                }
+                // If no bigger snap was found → loop back to the first
+                if (!targetSnap) {
+                    targetSnap = snapsPx[0];
+                }
+            }
+        }
+        if (snapBehaviour === "nearest") {
+            targetSnap = Math.round(snapsPx[0]);
+            var bestDiff = Math.abs(currentHeight - snapsPx[0]);
+            for (var i = 0; i < snapsPx.length; i++) {
+                var diff = Math.abs(currentHeight - snapsPx[i]);
+                if (diff < bestDiff) {
+                    targetSnap = Math.round(snapsPx[i]);
+                    bestDiff = diff;
+                }
+            }
+        }
+        if (snapBehaviour === "none") {
+            targetSnap = currentHeight;
+        }
+        setDrawerHeight(targetSnap);
+    };
+    var onHandleDown = function (e) {
+        if (!contentRef.current)
+            return;
+        dragRef.current.active = true;
+        // record where the pointer was when dragging started
+        dragRef.current.startY = e.clientY;
+        // record inital height of drawer
+        dragRef.current.startH = contentRef.current.clientHeight;
+        // keep moving drawer even if cursor has left pill
+        e.target.setPointerCapture(e.pointerId);
+    };
+    return (React.createElement("div", { ref: setThemeElement },
+        React.createElement(index$1.Root, { open: isOpen },
+            React.createElement(index$1.Portal, { container: themeElement },
+                React.createElement(index$1.Overlay, { className: index$2.classNames("arc-Drawer-overlay", {
+                        "arc-Drawer-overlay--visible": !noOverlay,
+                    }) },
+                    React.createElement(VisuallyHidden.VisuallyHidden, null,
+                        React.createElement(index$1.Description, null, ariaDescription)),
+                    React.createElement(Surface.Surface, { background: "light-brand-01", isTransparent: true },
+                        React.createElement(index$1.Content, tslib_es6.__assign({ className: index$2.classNames("arc-Drawer-slider", "arc-Drawer-slider--".concat(size), "arc-Drawer-slider--".concat(position), { "arc-Drawer-slider--draggable": draggable }, {
+                                "arc-Drawer-slider--transition": !dragRef.current.active,
+                            }), style: tslib_es6.__assign({}, sizingProperties), onOpenAutoFocus: setTriggerElement, onCloseAutoFocus: focusTriggerElement, onEscapeKeyDown: onRequestClose, onInteractOutside: onRequestClose, "aria-modal": "true", ref: contentRef }, filterAttrs.filterAttrs(props)),
+                            React.createElement("div", { className: "arc-Drawer-closeButtonContainer" },
+                                React.createElement("button", { "aria-label": "close", onClick: onRequestClose, className: "arc-Drawer-closeButton" },
+                                    React.createElement(ThemeIcon.ThemeIcon, { size: 32, icon: "drawerClose" })),
+                                draggable && position === "bottom" && (React.createElement("div", { className: "arc-Drawer-dragHandle", onPointerDown: onHandleDown, onPointerUp: onHandleUp, onPointerMove: onHandleMove, onClick: onHandleClick, role: "separator", "aria-label": "Drag to resize the drawer" },
+                                    React.createElement("div", { className: "arc-Drawer-dragHandlePill", "data-testid": "arc-Drawer-dragHandlePill" })))),
+                            children)))))));
+};
+
+var DrawerHeader = function (_a) {
+    var title = _a.title, _b = _a.isFixed, isFixed = _b === void 0 ? false : _b, isResponsive = _a.isResponsive, props = tslib_es6.__rest(_a, ["title", "isFixed", "isResponsive"]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", tslib_es6.__assign({ className: index$2.classNames("arc-DrawerHeader", {
+                "arc-DrawerHeader--isFixed": isFixed,
+            }) }, filterAttrs.filterAttrs(props)),
+            React.createElement("div", { className: "arc-DrawerHeader-content" },
+                React.createElement("div", { className: "arc-DrawerHeader-titleContainer" },
+                    React.createElement(index$1.Title, { asChild: true },
+                        React.createElement(Heading.Heading, { isResponsive: isResponsive, size: "m" }, title)))),
+            isFixed && (React.createElement("div", { className: "arc-DrawerHeader-divider" },
+                React.createElement(Rule.Rule, null))))));
+};
+
+var DrawerFooter = function (_a) {
+    var isFixed = _a.isFixed, children = _a.children;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: index$2.classNames("arc-DrawerFooter", {
+                "arc-DrawerFooter--isFixed": isFixed,
+            }) },
+            isFixed && (React.createElement("div", { className: "arc-DrawerFooter-divider" },
+                React.createElement(Rule.Rule, null))),
+            children)));
+};
+
+var DrawerContent = function (_a) {
+    var isFullBleed = _a.isFullBleed, children = _a.children;
+    return (React.createElement("div", { className: index$2.classNames("arc-DrawerContent", {
+            "arc-DrawerContent--isFullBleed": isFullBleed,
+        }) },
+        React.createElement("div", { className: "arc-Drawer-section" }, children)));
+};
+
+exports.Drawer = Drawer;
+exports.DrawerContent = DrawerContent;
+exports.DrawerFooter = DrawerFooter;
+exports.DrawerHeader = DrawerHeader;

package/lib/Drawer/Drawer.mjs

@@ -0,0 +1,213 @@
+'use client';
+import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-w7hdJ3oZ.mjs';
+import React__default, { useRef, useState } from 'react';
+import { c as classNames } from '../_shared/esm/index-5C0-U8cc.mjs';
+import { R as Root, P as Portal, O as Overlay, D as Description, C as Content, T as Title } from '../_shared/esm/index-CN4hP3Wu.mjs';
+import { f as filterAttrs } from '../_shared/esm/filter-attrs-v_SweZXP.mjs';
+import { e as useThemeElement } from '../_shared/esm/index-Bz2JQq34.mjs';
+import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-B0n6cKRb.mjs';
+import { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-aSQ4RA1o.mjs';
+import { S as Surface } from '../_shared/esm/Surface-C69KVzkY.mjs';
+import { H as Heading } from '../_shared/esm/Heading-Da-o0d5x.mjs';
+import { R as Rule } from '../_shared/esm/Rule-I1w3EaZi.mjs';
+import '../_shared/esm/Combination-BQ4XBtF-.mjs';
+import 'react/jsx-runtime';
+import 'react-dom';
+import '../_shared/esm/index-GCEHSsY8.mjs';
+import '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';
+import '../_shared/esm/index-Spae4j7j.mjs';
+import '../_shared/esm/SemanticHeading-DpEBq7pG.mjs';
+
+var Drawer = function (_a) {
+    var isOpen = _a.isOpen, children = _a.children, onRequestClose = _a.onRequestClose, _b = _a.noOverlay, noOverlay = _b === void 0 ? false : _b, _c = _a.shouldReturnFocus, shouldReturnFocus = _c === void 0 ? true : _c, _d = _a.size, size = _d === void 0 ? "m" : _d, height = _a.height, width = _a.width, _e = _a.position, position = _e === void 0 ? "right" : _e, _f = _a.draggable, draggable = _f === void 0 ? false : _f, _g = _a.snapPoints, snapPoints = _g === void 0 ? ["30%", "60%", "90%"] : _g, _h = _a.snapBehaviour, snapBehaviour = _h === void 0 ? "nearest" : _h, dragDownToDismiss = _a.dragDownToDismiss, onDragHandleClick = _a.onDragHandleClick, ariaDescription = _a.ariaDescription, props = __rest(_a, ["isOpen", "children", "onRequestClose", "noOverlay", "shouldReturnFocus", "size", "height", "width", "position", "draggable", "snapPoints", "snapBehaviour", "dragDownToDismiss", "onDragHandleClick", "ariaDescription"]);
+    var _j = useThemeElement(), themeElement = _j[0], setThemeElement = _j[1];
+    var triggerRef = useRef(null);
+    var contentRef = useRef(null);
+    var _k = useState(0), drawerHeight = _k[0], setDrawerHeight = _k[1];
+    var normalisedSnapPoints = snapPoints && snapPoints.length > 0 ? snapPoints : ["30%", "60%", "90%"];
+    var setTriggerElement = function () {
+        return shouldReturnFocus &&
+            (triggerRef.current = document.activeElement);
+    };
+    var focusTriggerElement = function () {
+        if (triggerRef.current) {
+            triggerRef.current.focus();
+        }
+    };
+    var dragRef = useRef({
+        active: false,
+        startY: 0,
+        deltaY: 0,
+        startH: 0,
+    });
+    var sizingProperties = __assign(__assign({}, (position !== "bottom" && { width: width })), (position === "bottom" && { height: drawerHeight || height }));
+    var onHandleUp = function (e) {
+        onHandleUpCore(e.nativeEvent);
+    };
+    var onHandleClick = function (e) {
+        onHandleUpCore(e.nativeEvent);
+        onDragHandleClick === null || onDragHandleClick === void 0 ? void 0 : onDragHandleClick(e);
+    };
+    var onHandleMove = function (e) {
+        if (!dragRef.current.active)
+            return;
+        dragRef.current.deltaY = e.clientY - dragRef.current.startY;
+        var newHeight = dragRef.current.startH - dragRef.current.deltaY;
+        setDrawerHeight(Math.round(newHeight));
+    };
+    var resolveToPx = function (input) {
+        // if already a number, assume px
+        if (typeof input === "number")
+            return input;
+        var str = input.trim().toLowerCase();
+        if (str.endsWith("%")) {
+            var percentValue = parseFloat(str);
+            return (window.innerHeight * percentValue) / 100;
+        }
+        if (str.endsWith("px")) {
+            var pixelValue = parseFloat(str);
+            return pixelValue;
+        }
+        var numericValue = Number(str);
+        return Number.isFinite(numericValue) ? numericValue : undefined;
+    };
+    var onHandleUpCore = function (e) {
+        if (!dragRef.current.active || !contentRef.current)
+            return;
+        if (dragDownToDismiss && contentRef.current.clientHeight < 100) {
+            dragRef.current.active = false;
+            dragRef.current.deltaY = 0;
+            e.currentTarget.releasePointerCapture(e.pointerId);
+            setDrawerHeight(undefined);
+            onRequestClose();
+            return;
+        }
+        dragRef.current.active = false;
+        e.currentTarget.releasePointerCapture(e.pointerId);
+        var currentHeight = contentRef.current.clientHeight;
+        // turn all snapPoints into px values. Order the values.
+        var snapsPx = (normalisedSnapPoints !== null && normalisedSnapPoints !== void 0 ? normalisedSnapPoints : [])
+            .map(resolveToPx)
+            .filter(function (value) { return value !== undefined; }) // remove undefined values
+            .sort(function (a, b) { return a - b; });
+        var targetSnap = undefined;
+        if (snapBehaviour === "next") {
+            var deltaY = Math.sign(dragRef.current.deltaY);
+            if (deltaY === -1) {
+                // User scrolled up
+                for (var i = 0; i < snapsPx.length; i++) {
+                    if (snapsPx[i] > currentHeight) {
+                        targetSnap = snapsPx[i];
+                        break;
+                    }
+                    else if (currentHeight > snapsPx[snapsPx.length - 1]) {
+                        targetSnap = snapsPx[snapsPx.length - 1];
+                    }
+                }
+            }
+            else if (deltaY === 1) {
+                // User scrolled down
+                for (var i = 0; i < snapsPx.length; i++) {
+                    if (snapsPx[i] < currentHeight) {
+                        targetSnap = snapsPx[i];
+                    }
+                    else if (currentHeight < snapsPx[0]) {
+                        targetSnap = snapsPx[0];
+                    }
+                }
+            }
+            else if (deltaY === 0) {
+                // User clicked without moving go to next snap point
+                for (var i = 0; i < snapsPx.length; i++) {
+                    if (snapsPx[i] > currentHeight) {
+                        targetSnap = snapsPx[i];
+                        break;
+                    }
+                }
+                // If no bigger snap was found → loop back to the first
+                if (!targetSnap) {
+                    targetSnap = snapsPx[0];
+                }
+            }
+        }
+        if (snapBehaviour === "nearest") {
+            targetSnap = Math.round(snapsPx[0]);
+            var bestDiff = Math.abs(currentHeight - snapsPx[0]);
+            for (var i = 0; i < snapsPx.length; i++) {
+                var diff = Math.abs(currentHeight - snapsPx[i]);
+                if (diff < bestDiff) {
+                    targetSnap = Math.round(snapsPx[i]);
+                    bestDiff = diff;
+                }
+            }
+        }
+        if (snapBehaviour === "none") {
+            targetSnap = currentHeight;
+        }
+        setDrawerHeight(targetSnap);
+    };
+    var onHandleDown = function (e) {
+        if (!contentRef.current)
+            return;
+        dragRef.current.active = true;
+        // record where the pointer was when dragging started
+        dragRef.current.startY = e.clientY;
+        // record inital height of drawer
+        dragRef.current.startH = contentRef.current.clientHeight;
+        // keep moving drawer even if cursor has left pill
+        e.target.setPointerCapture(e.pointerId);
+    };
+    return (React__default.createElement("div", { ref: setThemeElement },
+        React__default.createElement(Root, { open: isOpen },
+            React__default.createElement(Portal, { container: themeElement },
+                React__default.createElement(Overlay, { className: classNames("arc-Drawer-overlay", {
+                        "arc-Drawer-overlay--visible": !noOverlay,
+                    }) },
+                    React__default.createElement(VisuallyHidden, null,
+                        React__default.createElement(Description, null, ariaDescription)),
+                    React__default.createElement(Surface, { background: "light-brand-01", isTransparent: true },
+                        React__default.createElement(Content, __assign({ className: classNames("arc-Drawer-slider", "arc-Drawer-slider--".concat(size), "arc-Drawer-slider--".concat(position), { "arc-Drawer-slider--draggable": draggable }, {
+                                "arc-Drawer-slider--transition": !dragRef.current.active,
+                            }), style: __assign({}, sizingProperties), onOpenAutoFocus: setTriggerElement, onCloseAutoFocus: focusTriggerElement, onEscapeKeyDown: onRequestClose, onInteractOutside: onRequestClose, "aria-modal": "true", ref: contentRef }, filterAttrs(props)),
+                            React__default.createElement("div", { className: "arc-Drawer-closeButtonContainer" },
+                                React__default.createElement("button", { "aria-label": "close", onClick: onRequestClose, className: "arc-Drawer-closeButton" },
+                                    React__default.createElement(ThemeIcon, { size: 32, icon: "drawerClose" })),
+                                draggable && position === "bottom" && (React__default.createElement("div", { className: "arc-Drawer-dragHandle", onPointerDown: onHandleDown, onPointerUp: onHandleUp, onPointerMove: onHandleMove, onClick: onHandleClick, role: "separator", "aria-label": "Drag to resize the drawer" },
+                                    React__default.createElement("div", { className: "arc-Drawer-dragHandlePill", "data-testid": "arc-Drawer-dragHandlePill" })))),
+                            children)))))));
+};
+
+var DrawerHeader = function (_a) {
+    var title = _a.title, _b = _a.isFixed, isFixed = _b === void 0 ? false : _b, isResponsive = _a.isResponsive, props = __rest(_a, ["title", "isFixed", "isResponsive"]);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", __assign({ className: classNames("arc-DrawerHeader", {
+                "arc-DrawerHeader--isFixed": isFixed,
+            }) }, filterAttrs(props)),
+            React__default.createElement("div", { className: "arc-DrawerHeader-content" },
+                React__default.createElement("div", { className: "arc-DrawerHeader-titleContainer" },
+                    React__default.createElement(Title, { asChild: true },
+                        React__default.createElement(Heading, { isResponsive: isResponsive, size: "m" }, title)))),
+            isFixed && (React__default.createElement("div", { className: "arc-DrawerHeader-divider" },
+                React__default.createElement(Rule, null))))));
+};
+
+var DrawerFooter = function (_a) {
+    var isFixed = _a.isFixed, children = _a.children;
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: classNames("arc-DrawerFooter", {
+                "arc-DrawerFooter--isFixed": isFixed,
+            }) },
+            isFixed && (React__default.createElement("div", { className: "arc-DrawerFooter-divider" },
+                React__default.createElement(Rule, null))),
+            children)));
+};
+
+var DrawerContent = function (_a) {
+    var isFullBleed = _a.isFullBleed, children = _a.children;
+    return (React__default.createElement("div", { className: classNames("arc-DrawerContent", {
+            "arc-DrawerContent--isFullBleed": isFullBleed,
+        }) },
+        React__default.createElement("div", { className: "arc-Drawer-section" }, children)));
+};
+
+export { Drawer, DrawerContent, DrawerFooter, DrawerHeader };

package/lib/Drawer/styles.css

@@ -0,0 +1 @@
+.arc-v12-0-0 .arc .arc-DrawerHeader{background-color:#ffffff;padding:24px 24px 0;position:relative;z-index:3}.arc-v12-0-0 .arc .arc-DrawerHeader--isFixed{left:0;padding:24px;position:sticky;top:0;width:100%}.arc-v12-0-0 .arc .arc-DrawerHeader-content{align-items:baseline;display:flex}.arc-v12-0-0 .arc .arc-DrawerHeader-titleContainer{flex:1 1 auto;margin-right:15px;position:relative}.arc-v12-0-0 .arc .arc-DrawerHeader-divider{bottom:0;left:0;position:absolute;width:100%}.arc-v12-0-0 .arc .arc-DrawerFooter{background-color:#ffffff;margin-top:auto;padding:0 24px 24px}.arc-v12-0-0 .arc .arc-DrawerFooter--isFixed{bottom:0;left:0;padding:24px;position:sticky;width:100%}.arc-v12-0-0 .arc .arc-DrawerFooter-divider{left:0;position:absolute;top:0;width:100%}.arc-v12-0-0 .arc .arc-DrawerContent{grid-area:2/1/2/2;padding:24px;position:relative}.arc-v12-0-0 .arc .arc-DrawerContent--isFullBleed{height:100%;padding:0}.arc-v12-0-0 .arc .arc-DrawerContent-section{overflow-y:scroll}.arc-v12-0-0 .arc .arc-Drawer-slider--bottom .arc-DrawerHeader--isFixed~.arc-DrawerContent{overflow-y:auto}.arc-v12-0-0 .arc .arc-Drawer-overlay{align-items:center;display:flex;height:100%;justify-content:center;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:100}.arc-v12-0-0 .arc .arc-Drawer-overlay--visible{animation:overlay-show 0.3s ease;background-color:var(--overlay-colors-overlay-default)}.arc-v12-0-0 .arc .arc-Drawer-dragHandle{cursor:grab;display:flex;height:40px;justify-content:center;padding-top:16px;position:absolute;top:0;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;z-index:4}.arc-v12-0-0 .arc .arc-Drawer-dragHandlePill{background-color:black;border-radius:9999px;height:4px;opacity:0.4;width:44px}.arc-v12-0-0 .arc .arc-Drawer-slider--transition{transition:height 0.3s ease-in-out}.arc-v12-0-0 .arc .arc-Drawer-slider{background:#ffffff;box-shadow:var(--elevation-03);display:flex;flex-direction:column;overflow-y:auto;position:absolute}.arc-v12-0-0 .arc .arc-Drawer-slider--left,.arc-v12-0-0 .arc .arc-Drawer-slider--right{max-width:calc(100dvw - 44px)}.arc-v12-0-0 .arc .arc-Drawer-slider--bottom.arc-Drawer-slider--s{height:362px}.arc-v12-0-0 .arc .arc-Drawer-slider--bottom.arc-Drawer-slider--m{height:462px}.arc-v12-0-0 .arc .arc-Drawer-slider--bottom.arc-Drawer-slider--l{height:100%}.arc-v12-0-0 .arc .arc-Drawer-slider--s{height:100%;width:408px}.arc-v12-0-0 .arc .arc-Drawer-slider--m{height:100%;width:520px}.arc-v12-0-0 .arc .arc-Drawer-slider--l{height:100%;width:612px}.arc-v12-0-0 .arc .arc-Drawer-slider--bottom .arc-Drawer-slider--auto{height:auto}.arc-v12-0-0 .arc .arc-Drawer-slider--left .arc-Drawer-slider--auto,.arc-v12-0-0 .arc .arc-Drawer-slider--right .arc-Drawer-slider--auto{width:auto}.arc-v12-0-0 .arc .arc-Drawer-slider--right{animation:drawer-slide-left 0.3s ease;bottom:0;right:0;top:0}.arc-v12-0-0 .arc .arc-Drawer-slider--bottom{animation:drawer-slide-up 0.3s ease;border-radius:24px 24px 0 0;bottom:0;left:0;max-height:calc(100dvh - 44px);right:0;width:100vw}.arc-v12-0-0 .arc .arc-Drawer-slider--left{animation:drawer-slide-right 0.3s ease;bottom:0;left:0;top:0}.arc-v12-0-0 .arc .arc-Drawer-closeButtonContainer{display:flex;height:32px;justify-content:flex-end;margin-bottom:-32px;padding-right:8px;padding-top:8px;position:sticky;top:0;z-index:4}.arc-v12-0-0 .arc .arc-Drawer-closeButton{background:#ffffff;border:none;border-radius:16px;cursor:pointer;height:32px;margin:0;outline:none;padding:0;z-index:6}.arc-v12-0-0 .arc .arc-Drawer-closeButton:focus-visible{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:-4px}.arc-v12-0-0 .arc .arc-Drawer-actionContainer{display:flex;flex:0 1 auto;flex-wrap:wrap;gap:8px;padding-left:8px}@keyframes overlay-show{from{opacity:1}to{opacity:1}}@keyframes drawer-slide-left{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes drawer-slide-right{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes drawer-slide-up{from{transform:translateY(100%)}to{transform:translateX(0)}}

package/lib/Elevation/Elevation.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+var tslib_es6 = require('../_shared/cjs/tslib.es6-CCZ3TN_7.cjs');
+var React = require('react');
+var index = require('../_shared/cjs/index-CTlXMLug.cjs');
+var filterAttrs = require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
+
+/**
+ * Use `Elevation` to elevate what matters.
+ */
+var Elevation = function (_a) {
+    var _b;
+    var children = _a.children, _c = _a.level, level = _c === void 0 ? "5" : _c, _d = _a.isFullWidth, isFullWidth = _d === void 0 ? false : _d, props = tslib_es6.__rest(_a, ["children", "level", "isFullWidth"]);
+    return (React.createElement("div", tslib_es6.__assign({ className: index.classNames((_b = {},
+            _b["arc-Elevation"] = true,
+            _b["arc-Elevation--fullWidth"] = isFullWidth,
+            _b["arc-Elevation--levelOne"] = level === "1",
+            _b["arc-Elevation--levelTwo"] = level === "2",
+            _b["arc-Elevation--levelThree"] = level === "3",
+            _b["arc-Elevation--levelFour"] = level === "4",
+            _b["arc-Elevation--levelFive"] = level === "5",
+            _b)) }, filterAttrs.filterAttrs(props)), children));
+};
+
+exports.Elevation = Elevation;

package/lib/Elevation/Elevation.mjs

@@ -0,0 +1,23 @@
+import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-w7hdJ3oZ.mjs';
+import React__default from 'react';
+import { c as classNames } from '../_shared/esm/index-5C0-U8cc.mjs';
+import { f as filterAttrs } from '../_shared/esm/filter-attrs-v_SweZXP.mjs';
+
+/**
+ * Use `Elevation` to elevate what matters.
+ */
+var Elevation = function (_a) {
+    var _b;
+    var children = _a.children, _c = _a.level, level = _c === void 0 ? "5" : _c, _d = _a.isFullWidth, isFullWidth = _d === void 0 ? false : _d, props = __rest(_a, ["children", "level", "isFullWidth"]);
+    return (React__default.createElement("div", __assign({ className: classNames((_b = {},
+            _b["arc-Elevation"] = true,
+            _b["arc-Elevation--fullWidth"] = isFullWidth,
+            _b["arc-Elevation--levelOne"] = level === "1",
+            _b["arc-Elevation--levelTwo"] = level === "2",
+            _b["arc-Elevation--levelThree"] = level === "3",
+            _b["arc-Elevation--levelFour"] = level === "4",
+            _b["arc-Elevation--levelFive"] = level === "5",
+            _b)) }, filterAttrs(props)), children));
+};
+
+export { Elevation };

package/lib/Elevation/styles.css

@@ -0,0 +1 @@
+.arc-v12-0-0 .arc .arc-Elevation{background:transparent;border-radius:var(--sem-border-radius-s);max-width:100%;width:-moz-max-content;width:max-content}.arc-v12-0-0 .arc .arc-Elevation--fullWidth{width:100%}.arc-v12-0-0 .arc .arc-Elevation .arc-Elevation{border-radius:0;box-shadow:none}.arc-v12-0-0 .arc .arc-Elevation--levelOne{box-shadow:var(--elevation-01)}.arc-v12-0-0 .arc .arc-Elevation--levelTwo{box-shadow:var(--elevation-02)}.arc-v12-0-0 .arc .arc-Elevation--levelThree{box-shadow:var(--elevation-03)}.arc-v12-0-0 .arc .arc-Elevation--levelFour{box-shadow:var(--elevation-04)}.arc-v12-0-0 .arc .arc-Elevation--levelFive{box-shadow:var(--elevation-05)}

package/lib/Filter/Filter.cjs

@@ -0,0 +1,91 @@
+'use client';
+'use strict';
+
+var tslib_es6 = require('../_shared/cjs/tslib.es6-CCZ3TN_7.cjs');
+var React = require('react');
+var filterAttrs = require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
+var FilterControl = require('../_shared/cjs/FilterControl-BIwtgTjP.cjs');
+var index = require('../_shared/cjs/index-CTlXMLug.cjs');
+require('../_shared/cjs/Surface-DIU5ciDT.cjs');
+require('../_shared/cjs/index-DR8Rkav9.cjs');
+require('../_shared/cjs/VisuallyHidden-CQg3cOVK.cjs');
+
+var FilterControls = function (_a) {
+    var children = _a.children, controlsAlignment = _a.controlsAlignment;
+    return (React.createElement("div", { className: index.classNames("arc-FilterControls", {
+            "arc-FilterControls--alignLeft": controlsAlignment === "left",
+            "arc-FilterControls--alignRight": controlsAlignment === "right",
+        }) }, children));
+};
+
+var FilterItems = function (_a) {
+    var children = _a.children, error = _a.error, _b = _a.displayType, displayType = _b === void 0 ? "grid" : _b;
+    return React.Children.toArray(children).length > 0 ? (React.createElement("div", null,
+        React.createElement("div", { className: "arc-FilterItems-offscreen", "aria-live": "assertive" }, React.Children.toArray(children).length > 0
+            ? "".concat(React.Children.toArray(children).length, " records listed.")
+            : null),
+        React.createElement("div", { className: index.classNames("arc-FilterItems", {
+                "arc-FilterItems--list": displayType === "list",
+                "arc-FilterItems--grid": displayType === "grid",
+            }) }, displayType === "list"
+            ? React.Children.toArray(children).map(function (child, index, array) { return (React.createElement(React.Fragment, { key: index },
+                child,
+                index !== array.length - 1 && (React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: "arc-FilterItems-separator", "data-testid": "arc-FilterItems-separator" }))))); })
+            : children))) : (React.createElement("div", { "aria-live": "assertive" }, error));
+};
+
+/** Use `Filter` to filter and categorise page content. */
+var Filter = function (_a) {
+    var children = _a.children, onChange = _a.onChange, controls = _a.controls, displayType = _a.displayType, controlsAlignment = _a.controlsAlignment, _b = _a.logicType, logicType = _b === void 0 ? "OR" : _b, error = _a.error, props = tslib_es6.__rest(_a, ["children", "onChange", "controls", "displayType", "controlsAlignment", "logicType", "error"]);
+    var _c = React.useState(controls), filterControls = _c[0], setFilterControls = _c[1];
+    var handleControlClick = function (index) {
+        var updatedControls = filterControls.toSpliced(index, 1, tslib_es6.__assign(tslib_es6.__assign({}, filterControls[index]), { isSelected: !filterControls[index].isSelected }));
+        var selectedControlLabels = updatedControls
+            .filter(function (control) { return control.isSelected; })
+            .map(function (control) { return control.label; });
+        filterControls[index].onClick && filterControls[index].onClick();
+        onChange && onChange(selectedControlLabels);
+        setFilterControls(updatedControls);
+    };
+    var selectedControls = filterControls.filter(function (_a) {
+        var isSelected = _a.isSelected;
+        return isSelected;
+    });
+    var filterItems = React.Children.toArray(children);
+    var filteredItems = filterItems.filter(function (filteredItem) {
+        // If no tags are selected, show all items
+        if (selectedControls.length === 0) {
+            return true;
+        }
+        // If logicType is "AND", all selected tags should be present in the item's tags
+        if (logicType === "AND") {
+            return selectedControls.every(function (control) {
+                return filteredItem.props.tags.includes(control.label);
+            });
+        }
+        else {
+            // Check if item has tags property and if any selected tags are present in item's tags
+            return selectedControls.some(function (control) {
+                return filteredItem.props.tags.includes(control.label);
+            });
+        }
+    });
+    return (React.createElement("div", tslib_es6.__assign({ className: "arc-Filter" }, filterAttrs.filterAttrs(props)),
+        React.createElement(FilterControls, { controlsAlignment: controlsAlignment }, filterControls.map(function (_a, index) {
+            var label = _a.label, isSelected = _a.isSelected;
+            return (React.createElement(FilterControl.FilterControl, { key: index, onClick: function () { return handleControlClick(index); }, isSelected: isSelected }, label));
+        })),
+        React.createElement(FilterItems, { displayType: displayType, error: error }, filteredItems.map(function (item) { return item.props.children; }))));
+};
+
+var FilterItem = function (_a) {
+    var children = _a.children;
+    return React.createElement("div", { className: "arc-FilterItem" }, children);
+};
+
+exports.FilterControl = FilterControl.FilterControl;
+exports.Filter = Filter;
+exports.FilterControls = FilterControls;
+exports.FilterItem = FilterItem;
+exports.FilterItems = FilterItems;