@arc-ui/components 12.0.0-beta.18 → 12.0.0-beta.20

package/lib/Drawer/Drawer.mjs

@@ -1,13 +1,11 @@
 'use client';
 import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-B6CM-NUr.mjs';
-import * as React from 'react';
 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, C as Content, T as Title } from '../_shared/esm/index-J5IHetgg.mjs';
-import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-CN_Ed5b1.mjs';
 import { e as useThemeElement } from '../_shared/esm/index-Bz2JQq34.mjs';
-import { H as Heading } from '../_shared/esm/Heading-CxHWefi7.mjs';
-import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-Duhm0zXP.mjs';
+import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-CN_Ed5b1.mjs';
+import { R as Rule } from '../_shared/esm/Rule-3gdMHH-R.mjs';
 import '../_shared/esm/Combination-BpO6XTeS.mjs';
 import 'react/jsx-runtime';
 import 'react-dom';
@@ -16,295 +14,11 @@ import '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';
 import '../_shared/esm/index-Spae4j7j.mjs';
 import '../_shared/esm/Surface-Colbp3Zx.mjs';
 
-const LEFT = "Left";
-const RIGHT = "Right";
-const UP = "Up";
-const DOWN = "Down";
-
-/* global document */
-const defaultProps = {
-    delta: 10,
-    preventScrollOnSwipe: false,
-    rotationAngle: 0,
-    trackMouse: false,
-    trackTouch: true,
-    swipeDuration: Infinity,
-    touchEventOptions: { passive: true },
-};
-const initialState = {
-    first: true,
-    initial: [0, 0],
-    start: 0,
-    swiping: false,
-    xy: [0, 0],
-};
-const mouseMove = "mousemove";
-const mouseUp = "mouseup";
-const touchEnd = "touchend";
-const touchMove = "touchmove";
-const touchStart = "touchstart";
-function getDirection(absX, absY, deltaX, deltaY) {
-    if (absX > absY) {
-        if (deltaX > 0) {
-            return RIGHT;
-        }
-        return LEFT;
-    }
-    else if (deltaY > 0) {
-        return DOWN;
-    }
-    return UP;
-}
-function rotateXYByAngle(pos, angle) {
-    if (angle === 0)
-        return pos;
-    const angleInRadians = (Math.PI / 180) * angle;
-    const x = pos[0] * Math.cos(angleInRadians) + pos[1] * Math.sin(angleInRadians);
-    const y = pos[1] * Math.cos(angleInRadians) - pos[0] * Math.sin(angleInRadians);
-    return [x, y];
-}
-function getHandlers(set, handlerProps) {
-    const onStart = (event) => {
-        const isTouch = "touches" in event;
-        // if more than a single touch don't track, for now...
-        if (isTouch && event.touches.length > 1)
-            return;
-        set((state, props) => {
-            // setup mouse listeners on document to track swipe since swipe can leave container
-            if (props.trackMouse && !isTouch) {
-                document.addEventListener(mouseMove, onMove);
-                document.addEventListener(mouseUp, onUp);
-            }
-            const { clientX, clientY } = isTouch ? event.touches[0] : event;
-            const xy = rotateXYByAngle([clientX, clientY], props.rotationAngle);
-            props.onTouchStartOrOnMouseDown &&
-                props.onTouchStartOrOnMouseDown({ event });
-            return Object.assign(Object.assign(Object.assign({}, state), initialState), { initial: xy.slice(), xy, start: event.timeStamp || 0 });
-        });
-    };
-    const onMove = (event) => {
-        set((state, props) => {
-            const isTouch = "touches" in event;
-            // Discount a swipe if additional touches are present after
-            // a swipe has started.
-            if (isTouch && event.touches.length > 1) {
-                return state;
-            }
-            // if swipe has exceeded duration stop tracking
-            if (event.timeStamp - state.start > props.swipeDuration) {
-                return state.swiping ? Object.assign(Object.assign({}, state), { swiping: false }) : state;
-            }
-            const { clientX, clientY } = isTouch ? event.touches[0] : event;
-            const [x, y] = rotateXYByAngle([clientX, clientY], props.rotationAngle);
-            const deltaX = x - state.xy[0];
-            const deltaY = y - state.xy[1];
-            const absX = Math.abs(deltaX);
-            const absY = Math.abs(deltaY);
-            const time = (event.timeStamp || 0) - state.start;
-            const velocity = Math.sqrt(absX * absX + absY * absY) / (time || 1);
-            const vxvy = [deltaX / (time || 1), deltaY / (time || 1)];
-            const dir = getDirection(absX, absY, deltaX, deltaY);
-            // if swipe is under delta and we have not started to track a swipe: skip update
-            const delta = typeof props.delta === "number"
-                ? props.delta
-                : props.delta[dir.toLowerCase()] ||
-                    defaultProps.delta;
-            if (absX < delta && absY < delta && !state.swiping)
-                return state;
-            const eventData = {
-                absX,
-                absY,
-                deltaX,
-                deltaY,
-                dir,
-                event,
-                first: state.first,
-                initial: state.initial,
-                velocity,
-                vxvy,
-            };
-            // call onSwipeStart if present and is first swipe event
-            eventData.first && props.onSwipeStart && props.onSwipeStart(eventData);
-            // call onSwiping if present
-            props.onSwiping && props.onSwiping(eventData);
-            // track if a swipe is cancelable (handler for swiping or swiped(dir) exists)
-            // so we can call preventDefault if needed
-            let cancelablePageSwipe = false;
-            if (props.onSwiping ||
-                props.onSwiped ||
-                props[`onSwiped${dir}`]) {
-                cancelablePageSwipe = true;
-            }
-            if (cancelablePageSwipe &&
-                props.preventScrollOnSwipe &&
-                props.trackTouch &&
-                event.cancelable) {
-                event.preventDefault();
-            }
-            return Object.assign(Object.assign({}, state), { 
-                // first is now always false
-                first: false, eventData, swiping: true });
-        });
-    };
-    const onEnd = (event) => {
-        set((state, props) => {
-            let eventData;
-            if (state.swiping && state.eventData) {
-                // if swipe is less than duration fire swiped callbacks
-                if (event.timeStamp - state.start < props.swipeDuration) {
-                    eventData = Object.assign(Object.assign({}, state.eventData), { event });
-                    props.onSwiped && props.onSwiped(eventData);
-                    const onSwipedDir = props[`onSwiped${eventData.dir}`];
-                    onSwipedDir && onSwipedDir(eventData);
-                }
-            }
-            else {
-                props.onTap && props.onTap({ event });
-            }
-            props.onTouchEndOrOnMouseUp && props.onTouchEndOrOnMouseUp({ event });
-            return Object.assign(Object.assign(Object.assign({}, state), initialState), { eventData });
-        });
-    };
-    const cleanUpMouse = () => {
-        // safe to just call removeEventListener
-        document.removeEventListener(mouseMove, onMove);
-        document.removeEventListener(mouseUp, onUp);
-    };
-    const onUp = (e) => {
-        cleanUpMouse();
-        onEnd(e);
-    };
-    /**
-     * The value of passive on touchMove depends on `preventScrollOnSwipe`:
-     * - true => { passive: false }
-     * - false => { passive: true } // Default
-     *
-     * NOTE: When preventScrollOnSwipe is true, we attempt to call preventDefault to prevent scroll.
-     *
-     * props.touchEventOptions can also be set for all touch event listeners,
-     * but for `touchmove` specifically when `preventScrollOnSwipe` it will
-     * supersede and force passive to false.
-     *
-     */
-    const attachTouch = (el, props) => {
-        let cleanup = () => { };
-        if (el && el.addEventListener) {
-            const baseOptions = Object.assign(Object.assign({}, defaultProps.touchEventOptions), props.touchEventOptions);
-            // attach touch event listeners and handlers
-            const tls = [
-                [touchStart, onStart, baseOptions],
-                // preventScrollOnSwipe option supersedes touchEventOptions.passive
-                [
-                    touchMove,
-                    onMove,
-                    Object.assign(Object.assign({}, baseOptions), (props.preventScrollOnSwipe ? { passive: false } : {})),
-                ],
-                [touchEnd, onEnd, baseOptions],
-            ];
-            tls.forEach(([e, h, o]) => el.addEventListener(e, h, o));
-            // return properly scoped cleanup method for removing listeners, options not required
-            cleanup = () => tls.forEach(([e, h]) => el.removeEventListener(e, h));
-        }
-        return cleanup;
-    };
-    const onRef = (el) => {
-        // "inline" ref functions are called twice on render, once with null then again with DOM element
-        // ignore null here
-        if (el === null)
-            return;
-        set((state, props) => {
-            // if the same DOM el as previous just return state
-            if (state.el === el)
-                return state;
-            const addState = {};
-            // if new DOM el clean up old DOM and reset cleanUpTouch
-            if (state.el && state.el !== el && state.cleanUpTouch) {
-                state.cleanUpTouch();
-                addState.cleanUpTouch = void 0;
-            }
-            // only attach if we want to track touch
-            if (props.trackTouch && el) {
-                addState.cleanUpTouch = attachTouch(el, props);
-            }
-            // store event attached DOM el for comparison, clean up, and re-attachment
-            return Object.assign(Object.assign(Object.assign({}, state), { el }), addState);
-        });
-    };
-    // set ref callback to attach touch event listeners
-    const output = {
-        ref: onRef,
-    };
-    // if track mouse attach mouse down listener
-    if (handlerProps.trackMouse) {
-        output.onMouseDown = onStart;
-    }
-    return [output, attachTouch];
-}
-function updateTransientState(state, props, previousProps, attachTouch) {
-    // if trackTouch is off or there is no el, then remove handlers if necessary and exit
-    if (!props.trackTouch || !state.el) {
-        if (state.cleanUpTouch) {
-            state.cleanUpTouch();
-        }
-        return Object.assign(Object.assign({}, state), { cleanUpTouch: undefined });
-    }
-    // trackTouch is on, so if there are no handlers attached, attach them and exit
-    if (!state.cleanUpTouch) {
-        return Object.assign(Object.assign({}, state), { cleanUpTouch: attachTouch(state.el, props) });
-    }
-    // trackTouch is on and handlers are already attached, so if preventScrollOnSwipe changes value,
-    // remove and reattach handlers (this is required to update the passive option when attaching
-    // the handlers)
-    if (props.preventScrollOnSwipe !== previousProps.preventScrollOnSwipe ||
-        props.touchEventOptions.passive !== previousProps.touchEventOptions.passive) {
-        state.cleanUpTouch();
-        return Object.assign(Object.assign({}, state), { cleanUpTouch: attachTouch(state.el, props) });
-    }
-    return state;
-}
-function useSwipeable(options) {
-    const { trackMouse } = options;
-    const transientState = React.useRef(Object.assign({}, initialState));
-    const transientProps = React.useRef(Object.assign({}, defaultProps));
-    // track previous rendered props
-    const previousProps = React.useRef(Object.assign({}, transientProps.current));
-    previousProps.current = Object.assign({}, transientProps.current);
-    // update current render props & defaults
-    transientProps.current = Object.assign(Object.assign({}, defaultProps), options);
-    // Force defaults for config properties
-    let defaultKey;
-    for (defaultKey in defaultProps) {
-        if (transientProps.current[defaultKey] === void 0) {
-            transientProps.current[defaultKey] = defaultProps[defaultKey];
-        }
-    }
-    const [handlers, attachTouch] = React.useMemo(() => getHandlers((stateSetter) => (transientState.current = stateSetter(transientState.current, transientProps.current)), { trackMouse }), [trackMouse]);
-    transientState.current = updateTransientState(transientState.current, transientProps.current, previousProps.current, attachTouch);
-    return handlers;
-}
-
 var Drawer = function (_a) {
-    var isOpen = _a.isOpen, title = _a.title, children = _a.children, onRequestClose = _a.onRequestClose, footer = _a.footer, _b = _a.position, position = _b === void 0 ? "right" : _b, _c = _a.isOverlayVisible, isOverlayVisible = _c === void 0 ? true : _c, _d = _a.shouldReturnFocus, shouldReturnFocus = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? "s" : _e, props = __rest(_a, ["isOpen", "title", "children", "onRequestClose", "footer", "position", "isOverlayVisible", "shouldReturnFocus", "size"]);
+    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, props = __rest(_a, ["isOpen", "children", "onRequestClose", "noOverlay", "shouldReturnFocus", "size", "height", "width", "position"]);
     var _f = useThemeElement(), themeElement = _f[0], setThemeElement = _f[1];
     var triggerRef = useRef(null);
     var _g = useState(null), exitTranslateValue = _g[0], setExitTranslateValue = _g[1];
-    var handlers = useSwipeable({
-        onSwiped: function (_a) {
-            var dir = _a.dir;
-            if (position === "left" && dir === "Left") {
-                setExitTranslateValue([-100, 0]);
-            }
-            if (position === "right" && dir === "Right") {
-                setExitTranslateValue([100, 0]);
-            }
-            if (position === "top" && dir === "Up") {
-                setExitTranslateValue([0, -100]);
-            }
-            if (position === "bottom" && dir === "Down") {
-                setExitTranslateValue([0, 100]);
-            }
-        },
-    });
     var setTriggerElement = function () {
         return shouldReturnFocus &&
             (triggerRef.current = document.activeElement);
@@ -326,30 +40,54 @@ var Drawer = function (_a) {
             },
         }
         : {};
+    var sizingProperties = __assign(__assign({}, (position !== "bottom" && { width: width })), (position === "bottom" && { height: height }));
     return (React__default.createElement("div", { ref: setThemeElement },
         React__default.createElement(Root, { open: isOpen },
             React__default.createElement(Portal, { container: themeElement },
                 React__default.createElement(Overlay, { style: exitTransitionStyle.overlay, className: classNames("arc-Drawer-overlay", {
-                        "arc-Drawer-overlay--visible": isOverlayVisible,
+                        "arc-Drawer-overlay--visible": !noOverlay,
                     }) },
                     React__default.createElement(Content, __assign({ onTransitionEnd: function () {
                             setExitTranslateValue(null);
                             onRequestClose();
-                        }, className: classNames("arc-Drawer-slider", "arc-Drawer-slider--".concat(size), "arc-Drawer-slider--".concat(position)), style: exitTransitionStyle.slider, onOpenAutoFocus: setTriggerElement, onCloseAutoFocus: focusTriggerElement, onEscapeKeyDown: onRequestClose, onInteractOutside: onRequestClose, "aria-modal": "true" }, handlers, filterAttrs(props)),
-                        React__default.createElement("div", { className: "arc-Drawer-content" },
-                            React__default.createElement("div", { className: "arc-Drawer-section" }, children)),
-                        React__default.createElement("div", { className: "arc-Drawer-footer" },
-                            React__default.createElement(VerticalSpace, { size: "32" }),
-                            footer),
-                        React__default.createElement("div", { className: "arc-Drawer-header" },
-                            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: 48, icon: "drawerClose" }))),
-                            React__default.createElement("div", { className: "arc-Drawer-headerContent" },
-                                React__default.createElement("div", { className: "arc-Drawer-titleContainer" },
-                                    React__default.createElement(Title, { asChild: true },
-                                        React__default.createElement(Heading, { level: "1", size: "l" }, title)))),
-                            React__default.createElement(VerticalSpace, { size: "32" }))))))));
+                        }, className: classNames("arc-Drawer-slider", "arc-Drawer-slider--".concat(size), "arc-Drawer-slider--".concat(position)), style: (__assign({}, sizingProperties)), onOpenAutoFocus: setTriggerElement, onCloseAutoFocus: focusTriggerElement, onEscapeKeyDown: onRequestClose, onInteractOutside: onRequestClose, "aria-modal": "true" }, filterAttrs(props)),
+                        children,
+                        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" })))))))));
+};
+
+var DrawerHeader = function (_a) {
+    var title = _a.title, _b = _a.isFixed, isFixed = _b === void 0 ? false : _b, props = __rest(_a, ["title", "isFixed"]);
+    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("h1", { className: "arc-DrawerHeader-title" }, 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 };
+export { Drawer, DrawerContent, DrawerFooter, DrawerHeader };

package/lib/Drawer/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-18 .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-beta-18 .arc .arc-Drawer-overlay--visible{animation:overlay-show 0.3s ease;background-color:var(--overlay-colors-overlay-default)}.arc-v12-0-0-beta-18 .arc .arc-Drawer-slider{animation:drawer-show 0.3s ease;background:#ffffff;box-shadow:var(--sem-box-shadow-01);display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;padding:32px;position:absolute;width:100%}.arc-v12-0-0-beta-18 .arc .arc-Drawer-slider--top{animation:drawer-slide-down 0.3s ease;left:0;right:0;top:0}.arc-v12-0-0-beta-18 .arc .arc-Drawer-slider--right{animation:drawer-slide-left 0.3s ease;bottom:0;right:0;top:0}.arc-v12-0-0-beta-18 .arc .arc-Drawer-slider--bottom{animation:drawer-slide-up 0.3s ease;bottom:0;left:0;right:0}.arc-v12-0-0-beta-18 .arc .arc-Drawer-slider--left{animation:drawer-slide-right 0.3s ease;bottom:0;left:0;top:0}.arc-v12-0-0-beta-18 .arc .arc-Drawer-content{grid-area:2/1/2/2;overflow-y:auto}.arc-v12-0-0-beta-18 .arc .arc-Drawer-header{grid-area:1/1/1/2}.arc-v12-0-0-beta-18 .arc .arc-Drawer-closeButtonContainer{display:flex;justify-content:flex-end;margin-bottom:12px}.arc-v12-0-0-beta-18 .arc .arc-Drawer-closeButton{background:none;border:none;cursor:pointer;margin:0;outline:none;padding:0}.arc-v12-0-0-beta-18 .arc .arc-Drawer-slider--bottom,.arc-v12-0-0-beta-18 .arc .arc-Drawer-slider--top{height:90vh}.arc-v12-0-0-beta-18 .arc .arc-Drawer-slider--left,.arc-v12-0-0-beta-18 .arc .arc-Drawer-slider--right{width:90vw}.arc-v12-0-0-beta-18 .arc .arc-Drawer-slider--s.arc-Drawer-slider--left,.arc-v12-0-0-beta-18 .arc .arc-Drawer-slider--s.arc-Drawer-slider--right{max-width:378px}.arc-v12-0-0-beta-18 .arc .arc-Drawer-slider--s.arc-Drawer-slider--top,.arc-v12-0-0-beta-18 .arc .arc-Drawer-slider--s.arc-Drawer-slider--bottom{max-height:378px}.arc-v12-0-0-beta-18 .arc .arc-Drawer-slider--l.arc-Drawer-slider--left,.arc-v12-0-0-beta-18 .arc .arc-Drawer-slider--l.arc-Drawer-slider--right{max-width:736px}.arc-v12-0-0-beta-18 .arc .arc-Drawer-slider--l.arc-Drawer-slider--top,.arc-v12-0-0-beta-18 .arc .arc-Drawer-slider--l.arc-Drawer-slider--bottom{max-height:736px}.arc-v12-0-0-beta-18 .arc .arc-Drawer-headerContent{align-items:baseline;display:flex}.arc-v12-0-0-beta-18 .arc .arc-Drawer-titleContainer{flex:1 1 auto;position:relative;top:5px}.arc-v12-0-0-beta-18 .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)}}@keyframes drawer-slide-down{from{transform:translateY(-100%)}to{transform:translateX(0)}}
+.arc-v12-0-0-beta-20 .arc .arc-DrawerHeader{background-color:#ffffff;padding:24px 24px 0;position:relative;z-index:3}.arc-v12-0-0-beta-20 .arc .arc-DrawerHeader--isFixed{left:0;padding:24px;position:sticky;top:0;width:100%}.arc-v12-0-0-beta-20 .arc .arc-DrawerHeader-content{align-items:baseline;display:flex}.arc-v12-0-0-beta-20 .arc .arc-DrawerHeader-titleContainer{flex:1 1 auto;margin-right:15px;position:relative}.arc-v12-0-0-beta-20 .arc .arc-DrawerHeader-title{font:var(--sem-type-mobile-semi-s);margin:0}@media (min-width:636px){.arc-v12-0-0-beta-20 .arc .arc-DrawerHeader-title{font:var(--sem-type-desktop-semi-m)}}.arc-v12-0-0-beta-20 .arc .arc-DrawerHeader-divider{bottom:0;left:0;position:absolute;width:100%}.arc-v12-0-0-beta-20 .arc .arc-DrawerHeader--isFixed~.arc-Drawer-closeButtonContainer{position:fixed;z-index:1000}.arc-v12-0-0-beta-20 .arc .arc-DrawerFooter{background-color:#ffffff;grid-area:3;padding:0 24px 24px}.arc-v12-0-0-beta-20 .arc .arc-DrawerFooter--isFixed{bottom:0;left:0;padding:24px;position:sticky;width:100%}.arc-v12-0-0-beta-20 .arc .arc-DrawerFooter-divider{left:0;position:absolute;top:0;width:100%}.arc-v12-0-0-beta-20 .arc .arc-DrawerContent{grid-area:2/1/2/2;padding:24px;position:relative}.arc-v12-0-0-beta-20 .arc .arc-DrawerContent--isFullBleed{padding:0}.arc-v12-0-0-beta-20 .arc .arc-DrawerContent-section{overflow-y:scroll}.arc-v12-0-0-beta-20 .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-beta-20 .arc .arc-Drawer-overlay--visible{animation:overlay-show 0.3s ease;background-color:var(--overlay-colors-overlay-default)}.arc-v12-0-0-beta-20 .arc .arc-Drawer-slider{background:#ffffff;box-shadow:var(--elevation-03);display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;overflow-y:auto;position:absolute}.arc-v12-0-0-beta-20 .arc .arc-Drawer-slider--left,.arc-v12-0-0-beta-20 .arc .arc-Drawer-slider--right{max-width:calc(100vw - 44px)}.arc-v12-0-0-beta-20 .arc .arc-Drawer-slider--bottom.arc-Drawer-slider--s{height:362px}.arc-v12-0-0-beta-20 .arc .arc-Drawer-slider--bottom.arc-Drawer-slider--m{height:462px}.arc-v12-0-0-beta-20 .arc .arc-Drawer-slider--bottom.arc-Drawer-slider--l{height:100%}.arc-v12-0-0-beta-20 .arc .arc-Drawer-slider--s{height:100%;width:408px}.arc-v12-0-0-beta-20 .arc .arc-Drawer-slider--m{height:100%;width:520px}.arc-v12-0-0-beta-20 .arc .arc-Drawer-slider--l{height:100%;width:612px}.arc-v12-0-0-beta-20 .arc .arc-Drawer-slider--bottom .arc-Drawer-slider--auto{height:auto}.arc-v12-0-0-beta-20 .arc .arc-Drawer-slider--left .arc-Drawer-slider--auto,.arc-v12-0-0-beta-20 .arc .arc-Drawer-slider--right .arc-Drawer-slider--auto{width:auto}.arc-v12-0-0-beta-20 .arc .arc-Drawer-slider--right{animation:drawer-slide-left 0.3s ease;bottom:0;right:0;top:0}.arc-v12-0-0-beta-20 .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(100vh - 44px);right:0;width:100vw}.arc-v12-0-0-beta-20 .arc .arc-Drawer-slider--left{animation:drawer-slide-right 0.3s ease;bottom:0;left:0;top:0}.arc-v12-0-0-beta-20 .arc .arc-Drawer-closeButtonContainer{background:#ffffff;border-radius:16px;height:32px;position:absolute;right:8px;top:8px;z-index:4}.arc-v12-0-0-beta-20 .arc .arc-Drawer-closeButton{background:none;border:none;cursor:pointer;margin:0;outline:none;padding:0}.arc-v12-0-0-beta-20 .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-beta-20 .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/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-18 .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-beta-18 .arc .arc-Elevation--fullWidth{width:100%}.arc-v12-0-0-beta-18 .arc .arc-Elevation .arc-Elevation{border-radius:0;box-shadow:none}.arc-v12-0-0-beta-18 .arc .arc-Elevation--levelOne{box-shadow:var(--elevation-02)}.arc-v12-0-0-beta-18 .arc .arc-Elevation--levelTwo{box-shadow:var(--elevation-05)}
+.arc-v12-0-0-beta-20 .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-beta-20 .arc .arc-Elevation--fullWidth{width:100%}.arc-v12-0-0-beta-20 .arc .arc-Elevation .arc-Elevation{border-radius:0;box-shadow:none}.arc-v12-0-0-beta-20 .arc .arc-Elevation--levelOne{box-shadow:var(--elevation-02)}.arc-v12-0-0-beta-20 .arc .arc-Elevation--levelTwo{box-shadow:var(--elevation-05)}

package/lib/Filter/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-18 .arc .arc-FilterControls{display:flex;flex-wrap:wrap;gap:var(--filter-gap-l);justify-content:center;margin-bottom:var(--filter-margin-m)}.arc-v12-0-0-beta-18 .arc .arc-FilterControls--alignLeft{justify-content:left}.arc-v12-0-0-beta-18 .arc .arc-FilterControls--alignRight{justify-content:right}.arc-v12-0-0-beta-18 .arc .arc-FilterControl{align-items:center;background:var(--filter-colors-light-bg-default);border:none;border-radius:var(--filter-border-radius-s);display:flex;height:var(--filter-size-s);outline:var(--filter-border-weight-s) solid var(--filter-colors-light-border-default);outline-offset:calc(var(--filter-border-weight-s) * -1);padding:var(--filter-padding-s) var(--filter-padding-m);position:relative;width:-moz-fit-content;width:fit-content}.arc-v12-0-0-beta-18 .arc .arc-FilterControl-text{color:var(--filter-colors-light-text-default);font:var(--sem-type-interface-semi-xs)}.arc-v12-0-0-beta-18 .arc .arc-FilterControl--selected .arc-FilterControl-text{color:var(--filter-colors-light-text-default-alt)}.arc-v12-0-0-beta-18 .arc .arc-FilterControl--onDarkSurface .arc-FilterControl-text{color:var(--filter-colors-dark-text-default-alt)}.arc-v12-0-0-beta-18 .arc .arc-FilterControl:hover{cursor:pointer;outline-color:var(--filter-colors-light-border-hover);outline-offset:calc(var(--filter-border-weight-m) * -1);outline-width:var(--filter-border-weight-m)}.arc-v12-0-0-beta-18 .arc .arc-FilterControl:hover .arc-FilterControl-text{color:var(--filter-colors-light-text-hover)}.arc-v12-0-0-beta-18 .arc .arc-FilterControl--selected:hover .arc-FilterControl-text{color:var(--filter-colors-light-text-default-alt)}.arc-v12-0-0-beta-18 .arc .arc-FilterControl--onDarkSurface:hover .arc-FilterControl-text{color:var(--filter-colors-dark-text-hover)}.arc-v12-0-0-beta-18 .arc .arc-FilterControl--onDarkSurface.arc-FilterControl--selected .arc-FilterControl-text,.arc-v12-0-0-beta-18 .arc .arc-FilterControl--onDarkSurface.arc-FilterControl--selected:hover .arc-FilterControl-text{color:var(--filter-colors-light-text-default)}.arc-v12-0-0-beta-18 .arc .arc-FilterControl--selected{background:var(--filter-colors-light-bg-selected);outline-color:transparent}.arc-v12-0-0-beta-18 .arc .arc-FilterControl--selected::after,.arc-v12-0-0-beta-18 .arc .arc-FilterControl--onDarkSurface.arc-FilterControl--selected::after{content:none}.arc-v12-0-0-beta-18 .arc .arc-FilterControl--onDarkSurface{background:var(--filter-colors-dark-bg-default);outline-color:var(--filter-colors-dark-border-default)}.arc-v12-0-0-beta-18 .arc .arc-FilterControl--onDarkSurface::after{background:var(--filter-colors-dark-border-default) border-box;border:var(--filter-border-weight-s) solid transparent;border-radius:var(--filter-border-radius-s);bottom:0;content:"";left:0;-webkit-mask:linear-gradient(#ffffff 0,#ffffff 0) padding-box,linear-gradient(#ffffff 0,#ffffff 0);mask:linear-gradient(#ffffff 0,#ffffff 0) padding-box,linear-gradient(#ffffff 0,#ffffff 0);-webkit-mask:linear-gradient(#ffffff 0,#ffffff 0) padding-box,linear-gradient(#ffffff 0,#ffffff 0);mask:linear-gradient(#ffffff 0,#ffffff 0) padding-box,linear-gradient(#ffffff 0,#ffffff 0);-webkit-mask:linear-gradient(#ffffff 0 0) padding-box,linear-gradient(#ffffff 0 0);mask:linear-gradient(#ffffff 0 0) padding-box,linear-gradient(#ffffff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;position:absolute;right:0;top:0}.arc-v12-0-0-beta-18 .arc .arc-FilterControl--onDarkSurface.arc-FilterControl--selected{background:var(--filter-colors-dark-bg-selected);color:var(--filter-colors-light-text-default);outline-color:transparent}.arc-v12-0-0-beta-18 .arc .arc-FilterControl--onDarkSurface:hover{outline-color:var(--filter-colors-dark-border-hover)}.arc-v12-0-0-beta-18 .arc .arc-FilterControl--onDarkSurface:hover::after{content:none}.arc-v12-0-0-beta-18 .arc .arc-FilterControl--onDarkSurface.arc-FilterControl--selected:hover{outline-color:var(--filter-colors-dark-border-hover)}.arc-v12-0-0-beta-18 .arc .arc-FilterControl:focus-visible::before{border:2px solid var(--focus-colors-light-border-subtle);border-radius:var(--filter-border-radius-s);bottom:-3px;content:"";left:-3px;position:absolute;right:-3px;top:-3px}.arc-v12-0-0-beta-18 .arc .arc-FilterControl--onDarkSurface:focus-visible::before{border-color:var(--focus-colors-dark-border-subtle)}:root{--arc-filter-items-grid-column-width:1fr;--arc-filter-items-grid-gap:16px}.arc-v12-0-0-beta-18 .arc .arc-FilterItems--grid{display:grid;grid-gap:var(--arc-filter-items-grid-gap)}.arc-v12-0-0-beta-18 .arc .arc-FilterItems--list{display:grid;grid-gap:var(--arc-filter-items-grid-gap);grid-template-columns:var(--arc-filter-items-grid-column-width)}.arc-v12-0-0-beta-18 .arc .arc-FilterItems-separator{background-color:var(--sem-color-bg-secondary-dark-strong);height:1px;margin:10px 0}@media (min-width:636px){.arc-v12-0-0-beta-18 .arc .arc-FilterItems--grid{grid-template-columns:var(--arc-filter-items-grid-column-width)}}@media (min-width:768px){.arc-v12-0-0-beta-18 .arc .arc-FilterItems--grid{grid-template-columns:repeat(2,var(--arc-filter-items-grid-column-width))}}@media (min-width:1024px){.arc-v12-0-0-beta-18 .arc .arc-FilterItems--grid{grid-template-columns:repeat(3,var(--arc-filter-items-grid-column-width))}.arc-v12-0-0-beta-18 .arc .arc-FilterItems-offscreen{clip:rect(1px,1px,1px,1px);height:1px;margin-top:-1px;overflow:hidden;position:relative;width:1px}}.arc-v12-0-0-beta-18 .arc .arc-Filter-content{display:flex;flex-wrap:wrap}
+.arc-v12-0-0-beta-20 .arc .arc-FilterControls{display:flex;flex-wrap:wrap;gap:var(--filter-gap-l);justify-content:center;margin-bottom:var(--filter-margin-m)}.arc-v12-0-0-beta-20 .arc .arc-FilterControls--alignLeft{justify-content:left}.arc-v12-0-0-beta-20 .arc .arc-FilterControls--alignRight{justify-content:right}.arc-v12-0-0-beta-20 .arc .arc-FilterControl{align-items:center;background:var(--filter-colors-light-bg-default);border:none;border-radius:var(--filter-border-radius-s);display:flex;height:var(--filter-size-s);outline:var(--filter-border-weight-s) solid var(--filter-colors-light-border-default);outline-offset:calc(var(--filter-border-weight-s) * -1);padding:var(--filter-padding-s) var(--filter-padding-m);position:relative;width:-moz-fit-content;width:fit-content}.arc-v12-0-0-beta-20 .arc .arc-FilterControl-text{color:var(--filter-colors-light-text-default);font:var(--sem-type-interface-semi-xs)}.arc-v12-0-0-beta-20 .arc .arc-FilterControl--selected .arc-FilterControl-text{color:var(--filter-colors-light-text-default-alt)}.arc-v12-0-0-beta-20 .arc .arc-FilterControl--onDarkSurface .arc-FilterControl-text{color:var(--filter-colors-dark-text-default-alt)}.arc-v12-0-0-beta-20 .arc .arc-FilterControl:hover{cursor:pointer;outline-color:var(--filter-colors-light-border-hover);outline-offset:calc(var(--filter-border-weight-m) * -1);outline-width:var(--filter-border-weight-m)}.arc-v12-0-0-beta-20 .arc .arc-FilterControl:hover .arc-FilterControl-text{color:var(--filter-colors-light-text-hover)}.arc-v12-0-0-beta-20 .arc .arc-FilterControl--selected:hover .arc-FilterControl-text{color:var(--filter-colors-light-text-default-alt)}.arc-v12-0-0-beta-20 .arc .arc-FilterControl--onDarkSurface:hover .arc-FilterControl-text{color:var(--filter-colors-dark-text-hover)}.arc-v12-0-0-beta-20 .arc .arc-FilterControl--onDarkSurface.arc-FilterControl--selected .arc-FilterControl-text,.arc-v12-0-0-beta-20 .arc .arc-FilterControl--onDarkSurface.arc-FilterControl--selected:hover .arc-FilterControl-text{color:var(--filter-colors-light-text-default)}.arc-v12-0-0-beta-20 .arc .arc-FilterControl--selected{background:var(--filter-colors-light-bg-selected);outline-color:transparent}.arc-v12-0-0-beta-20 .arc .arc-FilterControl--selected::after,.arc-v12-0-0-beta-20 .arc .arc-FilterControl--onDarkSurface.arc-FilterControl--selected::after{content:none}.arc-v12-0-0-beta-20 .arc .arc-FilterControl--onDarkSurface{background:var(--filter-colors-dark-bg-default);outline-color:var(--filter-colors-dark-border-default)}.arc-v12-0-0-beta-20 .arc .arc-FilterControl--onDarkSurface::after{background:var(--filter-colors-dark-border-default) border-box;border:var(--filter-border-weight-s) solid transparent;border-radius:var(--filter-border-radius-s);bottom:0;content:"";left:0;-webkit-mask:linear-gradient(#ffffff 0,#ffffff 0) padding-box,linear-gradient(#ffffff 0,#ffffff 0);mask:linear-gradient(#ffffff 0,#ffffff 0) padding-box,linear-gradient(#ffffff 0,#ffffff 0);-webkit-mask:linear-gradient(#ffffff 0,#ffffff 0) padding-box,linear-gradient(#ffffff 0,#ffffff 0);mask:linear-gradient(#ffffff 0,#ffffff 0) padding-box,linear-gradient(#ffffff 0,#ffffff 0);-webkit-mask:linear-gradient(#ffffff 0 0) padding-box,linear-gradient(#ffffff 0 0);mask:linear-gradient(#ffffff 0 0) padding-box,linear-gradient(#ffffff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;position:absolute;right:0;top:0}.arc-v12-0-0-beta-20 .arc .arc-FilterControl--onDarkSurface.arc-FilterControl--selected{background:var(--filter-colors-dark-bg-selected);color:var(--filter-colors-light-text-default);outline-color:transparent}.arc-v12-0-0-beta-20 .arc .arc-FilterControl--onDarkSurface:hover{outline-color:var(--filter-colors-dark-border-hover)}.arc-v12-0-0-beta-20 .arc .arc-FilterControl--onDarkSurface:hover::after{content:none}.arc-v12-0-0-beta-20 .arc .arc-FilterControl--onDarkSurface.arc-FilterControl--selected:hover{outline-color:var(--filter-colors-dark-border-hover)}.arc-v12-0-0-beta-20 .arc .arc-FilterControl:focus-visible::before{border:2px solid var(--focus-colors-light-border-subtle);border-radius:var(--filter-border-radius-s);bottom:-3px;content:"";left:-3px;position:absolute;right:-3px;top:-3px}.arc-v12-0-0-beta-20 .arc .arc-FilterControl--onDarkSurface:focus-visible::before{border-color:var(--focus-colors-dark-border-subtle)}:root{--arc-filter-items-grid-column-width:1fr;--arc-filter-items-grid-gap:16px}.arc-v12-0-0-beta-20 .arc .arc-FilterItems--grid{display:grid;grid-gap:var(--arc-filter-items-grid-gap)}.arc-v12-0-0-beta-20 .arc .arc-FilterItems--list{display:grid;grid-gap:var(--arc-filter-items-grid-gap);grid-template-columns:var(--arc-filter-items-grid-column-width)}.arc-v12-0-0-beta-20 .arc .arc-FilterItems-separator{background-color:var(--sem-color-bg-secondary-dark-strong);height:1px;margin:10px 0}@media (min-width:636px){.arc-v12-0-0-beta-20 .arc .arc-FilterItems--grid{grid-template-columns:var(--arc-filter-items-grid-column-width)}}@media (min-width:768px){.arc-v12-0-0-beta-20 .arc .arc-FilterItems--grid{grid-template-columns:repeat(2,var(--arc-filter-items-grid-column-width))}}@media (min-width:1024px){.arc-v12-0-0-beta-20 .arc .arc-FilterItems--grid{grid-template-columns:repeat(3,var(--arc-filter-items-grid-column-width))}.arc-v12-0-0-beta-20 .arc .arc-FilterItems-offscreen{clip:rect(1px,1px,1px,1px);height:1px;margin-top:-1px;overflow:hidden;position:relative;width:1px}}.arc-v12-0-0-beta-20 .arc .arc-Filter-content{display:flex;flex-wrap:wrap}

package/lib/FormControl/FormControl.cjs

@@ -1,7 +1,7 @@
 'use client';
 'use strict';
 
-var FormControl = require('../_shared/cjs/FormControl-D3-JbAVb.cjs');
+var FormControl = require('../_shared/cjs/FormControl-BPnKQrCm.cjs');
 require('../_shared/cjs/filter-attrs-eK6E_34o.cjs');
 require('react');
 require('../_shared/cjs/index-CTlXMLug.cjs');

package/lib/FormControl/FormControl.mjs

@@ -1,5 +1,5 @@
 'use client';
-export { F as FormControl, C as FormControlContext } from '../_shared/esm/FormControl-B9fp1ilz.mjs';
+export { F as FormControl, C as FormControlContext } from '../_shared/esm/FormControl-CWyrVi1u.mjs';
 import '../_shared/esm/filter-attrs-B6CM-NUr.mjs';
 import 'react';
 import '../_shared/esm/index-5C0-U8cc.mjs';

package/lib/FormControl/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-18 .arc .arc-FormControl{border:none;margin:0;padding:0;width:100%}.arc-v12-0-0-beta-18 .arc .arc-FormControl-label{color:var(--radio-colors-light-text-default);display:block;font:var(--sem-type-label-reg-l);margin-bottom:12px;padding:0}.arc-v12-0-0-beta-18 .arc .arc-FormControl--sideLabel{align-items:center;display:flex;flex-direction:row}.arc-v12-0-0-beta-18 .arc .arc-FormControl--sideLabel .arc-FormControl-label{margin-right:12px}.arc-v12-0-0-beta-18 .arc .arc-FormControl-helper{color:var(--textarea-colors-light-text-default);font:var(--sem-type-body-reg-s)}.arc-v12-0-0-beta-18 .arc .arc-FormControl-error{align-items:flex-start;color:var(--textinput-colors-light-text-error);display:flex;font:var(--sem-type-body-reg-s)}.arc-v12-0-0-beta-18 .arc .arc-FormControl-labelOptional{color:var(--textinput-colors-light-text-default);font:var(--sem-type-label-reg-xxs);margin-left:1ch}.arc-v12-0-0-beta-18 .arc .arc-FormControl-supplementaryInfo{padding-left:4px}.arc-v12-0-0-beta-18 .arc .arc-FormControl-info{align-items:flex-start;display:flex;justify-content:flex-end}.arc-v12-0-0-beta-18 .arc .arc-FormControl-info--hasContent{margin-top:var(--textarea-gap-m)}.arc-v12-0-0-beta-18 .arc .arc-FormControl-helperContainer{flex:1 1 auto}.arc-v12-0-0-beta-18 .arc .arc-FormControl--smallLabel .arc-FormControl-label{font:var(--sem-type-label-reg-m)}.arc-v12-0-0-beta-18 .arc .arc-FormControl--smallLabel .arc-FormControl-helper,.arc-v12-0-0-beta-18 .arc .arc-FormControl--smallLabel .arc-FormControl-labelOptional{font:var(--sem-type-body-reg-xs)}.arc-v12-0-0-beta-18 .arc .arc-FormControl--smallLabel .arc-FormControl-error{font:var(--sem-type-body-reg-s)}.arc-v12-0-0-beta-18 .arc .arc-FormControl .arc-FormControl-helper--underLabel{margin-bottom:12px;margin-top:0}.arc-v12-0-0-beta-18 .arc .arc-FormControl-label--withHelperUnderLabel{margin-bottom:0}.arc-v12-0-0-beta-18 .arc .arc-FormControl-label[\:has\(\%2B\%20.arc-VerticalSpace\)],.arc-v12-0-0-beta-18 .arc .arc-FormControl .arc-FormControl-helper--underLabel[\:has\(\%2B\%20.arc-VerticalSpace\)]{margin-bottom:0}.arc-v12-0-0-beta-18 .arc .arc-FormControl-label:has(+.arc-VerticalSpace),.arc-v12-0-0-beta-18 .arc .arc-FormControl .arc-FormControl-helper--underLabel:has(+.arc-VerticalSpace){margin-bottom:0}.arc-v12-0-0-beta-18 .arc .arc-FormControl-label:empty{display:none}.arc-v12-0-0-beta-18 .arc .arc-FormControl-error .arc-FormControl-error--icon{color:currentColor;content:"";flex-shrink:0;height:24px;margin-right:4px;margin-top:-2px;width:24px}.arc-v12-0-0-beta-18 .arc .arc-FormControl--onDarkSurface .arc-FormControl-label,.arc-v12-0-0-beta-18 .arc .arc-FormControl--onDarkSurface .arc-FormControl-labelOptional,.arc-v12-0-0-beta-18 .arc .arc-FormControl--onDarkSurface .arc-FormControl-helper{color:var(--textarea-colors-dark-text-strong)}.arc-v12-0-0-beta-18 .arc .arc-FormControl--onDarkSurface .arc-FormControl-error{color:var(--textarea-colors-dark-text-error)}.arc-v12-0-0-beta-18 .arc .arc-FormControl--isDisabled .arc-FormControl-label,.arc-v12-0-0-beta-18 .arc .arc-FormControl--isDisabled .arc-FormControl-labelOptional,.arc-v12-0-0-beta-18 .arc .arc-FormControl--isDisabled .arc-FormControl-helper{color:var(--textarea-colors-light-text-disabled)}.arc-v12-0-0-beta-18 .arc .arc-FormControl--onDarkSurface.arc-FormControl--isDisabled .arc-FormControl-label,.arc-v12-0-0-beta-18 .arc .arc-FormControl--onDarkSurface.arc-FormControl--isDisabled .arc-FormControl-labelOptional,.arc-v12-0-0-beta-18 .arc .arc-FormControl--onDarkSurface.arc-FormControl--isDisabled .arc-FormControl-helper{color:var(--textarea-colors-dark-text-disabled)}
+.arc-v12-0-0-beta-20 .arc .arc-FormControl{border:none;margin:0;padding:0;width:100%}.arc-v12-0-0-beta-20 .arc .arc-FormControl-label{color:var(--form-control-colors-light-text-default);display:block;font:var(--form-control-type-label-default-l);margin-bottom:var(--form-control-space-gap-m);padding:0}.arc-v12-0-0-beta-20 .arc .arc-FormControl-labelText--withOptional{margin-right:var(--form-control-space-gap-s)}.arc-v12-0-0-beta-20 .arc .arc-FormControl--sideLabel{align-items:center;display:flex;flex-direction:row}.arc-v12-0-0-beta-20 .arc .arc-FormControl--sideLabel .arc-FormControl-label{margin-right:var(--form-control-space-gap-m)}.arc-v12-0-0-beta-20 .arc .arc-FormControl-helper{color:var(--form-control-colors-light-text-default);font:var(--form-control-type-helper-default-l)}.arc-v12-0-0-beta-20 .arc .arc-FormControl-error{align-items:flex-start;color:var(--form-control-colors-light-text-error);display:flex;font:var(--form-control-type-helper-default-m)}.arc-v12-0-0-beta-20 .arc .arc-FormControl-labelOptional{color:var(--form-control-colors-light-text-default);font:var(--form-control-type-optional-default-s)}.arc-v12-0-0-beta-20 .arc .arc-FormControl-supplementaryInfo{padding-left:var(--form-control-space-gap-m)}.arc-v12-0-0-beta-20 .arc .arc-FormControl-info{align-items:flex-start;display:flex;justify-content:flex-end}.arc-v12-0-0-beta-20 .arc .arc-FormControl-info--hasContent{margin-top:var(--form-control-space-gap-m)}.arc-v12-0-0-beta-20 .arc .arc-FormControl-helperContainer{flex:1 1 auto}.arc-v12-0-0-beta-20 .arc .arc-FormControl--s .arc-FormControl-label{font:var(--form-control-type-label-default-s)}.arc-v12-0-0-beta-20 .arc .arc-FormControl--s .arc-FormControl-helper{font:var(--form-control-type-helper-default-s)}.arc-v12-0-0-beta-20 .arc .arc-FormControl--s .arc-FormControl-labelOptional{font:var(--form-control-type-optional-default-s)}.arc-v12-0-0-beta-20 .arc .arc-FormControl--m .arc-FormControl-label{font:var(--form-control-type-label-default-m)}.arc-v12-0-0-beta-20 .arc .arc-FormControl--m .arc-FormControl-labelOptional{font:var(--form-control-type-optional-default-s)}.arc-v12-0-0-beta-20 .arc .arc-FormControl--m .arc-FormControl-helper{font:var(--form-control-type-helper-default-m)}.arc-v12-0-0-beta-20 .arc .arc-FormControl .arc-FormControl-helper--underLabel{margin-bottom:var(--form-control-space-gap-m);margin-top:0}.arc-v12-0-0-beta-20 .arc .arc-FormControl-label--withHelperUnderLabel{margin-bottom:0}.arc-v12-0-0-beta-20 .arc .arc-FormControl-label[\:has\(\%2B\%20.arc-VerticalSpace\)],.arc-v12-0-0-beta-20 .arc .arc-FormControl .arc-FormControl-helper--underLabel[\:has\(\%2B\%20.arc-VerticalSpace\)]{margin-bottom:0}.arc-v12-0-0-beta-20 .arc .arc-FormControl-label:has(+.arc-VerticalSpace),.arc-v12-0-0-beta-20 .arc .arc-FormControl .arc-FormControl-helper--underLabel:has(+.arc-VerticalSpace){margin-bottom:0}.arc-v12-0-0-beta-20 .arc .arc-FormControl-label:empty{display:none}.arc-v12-0-0-beta-20 .arc .arc-FormControl-error .arc-FormControl-error--icon{color:currentColor;content:"";flex-shrink:0;height:var(--form-control-size-icon);margin-right:4px;margin-top:-2px;width:var(--form-control-size-icon)}.arc-v12-0-0-beta-20 .arc .arc-FormControl--onDarkSurface .arc-FormControl-label,.arc-v12-0-0-beta-20 .arc .arc-FormControl--onDarkSurface .arc-FormControl-labelOptional,.arc-v12-0-0-beta-20 .arc .arc-FormControl--onDarkSurface .arc-FormControl-helper{color:var(--form-control-colors-dark-text-default)}.arc-v12-0-0-beta-20 .arc .arc-FormControl--onDarkSurface .arc-FormControl-error{color:var(--form-control-colors-dark-text-error)}.arc-v12-0-0-beta-20 .arc .arc-FormControl--isDisabled .arc-FormControl-label,.arc-v12-0-0-beta-20 .arc .arc-FormControl--isDisabled .arc-FormControl-labelOptional,.arc-v12-0-0-beta-20 .arc .arc-FormControl--isDisabled .arc-FormControl-helper{color:var(--form-control-colors-light-text-disabled)}.arc-v12-0-0-beta-20 .arc .arc-FormControl--onDarkSurface.arc-FormControl--isDisabled .arc-FormControl-label,.arc-v12-0-0-beta-20 .arc .arc-FormControl--onDarkSurface.arc-FormControl--isDisabled .arc-FormControl-labelOptional,.arc-v12-0-0-beta-20 .arc .arc-FormControl--onDarkSurface.arc-FormControl--isDisabled .arc-FormControl-helper{color:var(--form-control-colors-dark-text-disabled)}

package/lib/GhostedHeroBanner/GhostedHeroBanner.cjs

@@ -16,7 +16,7 @@ var GhostedHeroBanner = function (_a) {
     return (React.createElement("div", filterAttrs.__assign({ className: "arc-GhostedHeroBanner" }, filterAttrs.filterAttrs(props)),
         React.createElement("div", { className: "arc-GhostedHeroBanner-content" },
             label && (React.createElement(React.Fragment, null,
-                React.createElement(Heading.Heading, { size: "xxs" }, label.toUpperCase()),
+                React.createElement(Heading.Heading, { fontStyle: "overline" }, label),
                 React.createElement(VerticalSpace.VerticalSpace, { size: "8" }))),
             React.createElement(Heading.Heading, { level: headingLevel, size: "xl" }, heading),
             text && (React.createElement(React.Fragment, null,

package/lib/GhostedHeroBanner/GhostedHeroBanner.mjs

@@ -14,7 +14,7 @@ var GhostedHeroBanner = function (_a) {
     return (React__default.createElement("div", __assign({ className: "arc-GhostedHeroBanner" }, filterAttrs(props)),
         React__default.createElement("div", { className: "arc-GhostedHeroBanner-content" },
             label && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(Heading, { size: "xxs" }, label.toUpperCase()),
+                React__default.createElement(Heading, { fontStyle: "overline" }, label),
                 React__default.createElement(VerticalSpace, { size: "8" }))),
             React__default.createElement(Heading, { level: headingLevel, size: "xl" }, heading),
             text && (React__default.createElement(React__default.Fragment, null,

package/lib/GhostedHeroBanner/styles.css

@@ -1 +1 @@
-.arc-v12-0-0-beta-18 .arc .arc-GhostedHeroBanner{align-items:center;display:flex;flex-basis:0;flex-direction:column-reverse;gap:24px;margin:0 auto;max-width:1280px;min-height:268px}.arc-v12-0-0-beta-18 .arc .arc-GhostedHeroBanner-content{flex:1}.arc-v12-0-0-beta-18 .arc .arc-GhostedHeroBanner-image{flex:1}@media (min-width:768px){.arc-v12-0-0-beta-18 .arc .arc-GhostedHeroBanner{flex-direction:row}}@media (min-width:1024px){.arc-v12-0-0-beta-18 .arc .arc-GhostedHeroBanner{min-height:358px}}@media (min-width:1280px){.arc-v12-0-0-beta-18 .arc .arc-GhostedHeroBanner{gap:32px;min-height:454px}}
+.arc-v12-0-0-beta-20 .arc .arc-GhostedHeroBanner{align-items:center;display:flex;flex-basis:0;flex-direction:column-reverse;gap:24px;margin:0 auto;max-width:1280px;min-height:268px}.arc-v12-0-0-beta-20 .arc .arc-GhostedHeroBanner-content{flex:1}.arc-v12-0-0-beta-20 .arc .arc-GhostedHeroBanner-image{flex:1}@media (min-width:768px){.arc-v12-0-0-beta-20 .arc .arc-GhostedHeroBanner{flex-direction:row}}@media (min-width:1024px){.arc-v12-0-0-beta-20 .arc .arc-GhostedHeroBanner{min-height:358px}}@media (min-width:1280px){.arc-v12-0-0-beta-20 .arc .arc-GhostedHeroBanner{gap:32px;min-height:454px}}