@arc-ui/components 12.0.0-beta.5 → 12.0.0-beta7

package/dist/Carousel/Carousel.esm.js

@@ -0,0 +1,431 @@
+import { a as __assign } from '../_shared/esm/index.es-5496ec12.js';
+import * as React from 'react';
+import React__default, { useMemo, useId, useState, useEffect } from 'react';
+import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
+import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-e1e19266.js';
+import { u as useMediaQuery } from '../_shared/esm/use-media-query-d3622da8.js';
+import '../_shared/esm/Surface-0af6a69a.js';
+
+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;
+}
+
+/**
+ * Do not edit directly
+ * Generated on Fri, 25 Oct 2024 08:31:13 GMT
+ */
+var ArcSizeBreakpointsXs = "320px";
+var ArcSizeBreakpointsS = "636px";
+var ArcSizeBreakpointsM = "768px";
+var ArcSizeBreakpointsL = "1024px";
+var ArcSizeBreakpointsXl = "1280px";
+
+var isSlideHidden = function (slides, visibleSlideIndex, itemId) {
+    return slides.length ? !slides[visibleSlideIndex].itemIds.includes(itemId) : false;
+};
+
+var isLastSlide = function (slides, visibleSlideIndex) {
+    return slides.length === 0 ? true : visibleSlideIndex === slides.length - 1;
+};
+
+var getSliderPosition = function (_a) {
+    var slides = _a.slides, visibleSlideIndex = _a.visibleSlideIndex, slideWidth = _a.slideWidth, widthAdjustment = _a.widthAdjustment;
+    return slides.length
+        ? slides[visibleSlideIndex].itemsToScroll * slideWidth -
+            (isLastSlide(slides, visibleSlideIndex) ? widthAdjustment : 0)
+        : 0;
+};
+
+var getSlideConfig = function (screenSizes, slideAmount, itemsPerSlide, partialVisible, responsive) {
+    var responsiveConfig = responsive &&
+        Object.keys(screenSizes)
+            .reverse()
+            .find(function (size) {
+            return responsive && screenSizes[size] && responsive[size];
+        });
+    return responsiveConfig
+        ? responsive[responsiveConfig]
+        : { slideAmount: slideAmount, itemsPerSlide: itemsPerSlide, partialVisible: partialVisible };
+};
+
+var useSlides = function (_a) {
+    var children = _a.children, itemsPerSlide = _a.itemsPerSlide, partialVisible = _a.partialVisible, slideAmount = _a.slideAmount, responsive = _a.responsive, screenSizes = _a.screenSizes;
+    return useMemo(function () {
+        var slideConfig = getSlideConfig(screenSizes, slideAmount, itemsPerSlide, partialVisible, responsive);
+        var totalItems = React__default.Children.count(children);
+        var itemsPerView = slideConfig.itemsPerSlide > totalItems
+            ? totalItems
+            : Math.max(1, slideConfig.itemsPerSlide);
+        var widthAdjustment = slideConfig.partialVisible ? 10 : 0;
+        var slideWidth = (100 - widthAdjustment) / itemsPerView;
+        var slideIncrement = Math.max(1, slideConfig.slideAmount > totalItems
+            ? totalItems
+            : slideConfig.slideAmount);
+        var itemsToScroll = totalItems - itemsPerView;
+        var slideCount = itemsToScroll > 0 ? Math.ceil(itemsToScroll / slideIncrement + 1) : 0;
+        var slides = Array.from({ length: slideCount }, function (_, slideIndex) {
+            var itemIds = Array.from({ length: itemsPerView }, function (_, i) { return i + slideIndex * slideIncrement; });
+            var filteredItems = itemIds.filter(function (id) { return id < totalItems; });
+            var hasFilteredItems = filteredItems.length < itemsPerView;
+            var getScrollAmount = function () {
+                return (slideIndex * slideIncrement -
+                    (hasFilteredItems ? itemsPerView - filteredItems.length : 0));
+            };
+            return {
+                itemsToScroll: getScrollAmount(),
+                itemIds: hasFilteredItems
+                    ? itemIds.map(function (id) { return id - (slideConfig.itemsPerSlide - filteredItems.length); })
+                    : itemIds
+            };
+        });
+        return {
+            slides: slides,
+            slideWidth: slideWidth,
+            widthAdjustment: widthAdjustment
+        };
+    }, [
+        children,
+        itemsPerSlide,
+        partialVisible,
+        slideAmount,
+        responsive,
+        screenSizes,
+    ]);
+};
+
+var Carousel = function (_a) {
+    var children = _a.children, responsive = _a.responsive, _b = _a.slideAmount, slideAmount = _b === void 0 ? 1 : _b, _c = _a.itemsPerSlide, itemsPerSlide = _c === void 0 ? 1 : _c, _d = _a.withGutter, withGutter = _d === void 0 ? true : _d, _e = _a.partialVisible, partialVisible = _e === void 0 ? false : _e;
+    var id = useId();
+    var _f = useState(0), visibleSlideIndex = _f[0], setVisibleSlideIndex = _f[1];
+    var isMinWidthArcBreakpointXs = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsXs, ")"));
+    var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsS, ")"));
+    var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsM, ")"));
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsL, ")"));
+    var isMinWidthArcBreakpointXl = useMediaQuery("(min-width: ".concat(ArcSizeBreakpointsXl, ")"));
+    var handlers = useSwipeable({
+        onSwipedLeft: function () {
+            !isLastSlide(slides, visibleSlideIndex) &&
+                setVisibleSlideIndex(visibleSlideIndex + 1);
+        },
+        onSwipedRight: function () {
+            visibleSlideIndex > 0 && setVisibleSlideIndex(visibleSlideIndex - 1);
+        }
+    });
+    var _g = useSlides({
+        children: children,
+        partialVisible: partialVisible,
+        slideAmount: slideAmount,
+        itemsPerSlide: itemsPerSlide,
+        responsive: responsive,
+        screenSizes: {
+            xs: isMinWidthArcBreakpointXs,
+            s: isMinWidthArcBreakpointS,
+            m: isMinWidthArcBreakpointM,
+            l: isMinWidthArcBreakpointL,
+            xl: isMinWidthArcBreakpointXl
+        }
+    }), slides = _g.slides, slideWidth = _g.slideWidth, widthAdjustment = _g.widthAdjustment;
+    useEffect(function () {
+        setVisibleSlideIndex(0);
+    }, [
+        isMinWidthArcBreakpointXs,
+        isMinWidthArcBreakpointS,
+        isMinWidthArcBreakpointM,
+        isMinWidthArcBreakpointL,
+        isMinWidthArcBreakpointXl,
+    ]);
+    var currentSlideIndex = Math.min(slides.length - 1, visibleSlideIndex);
+    var sliderPosition = getSliderPosition({
+        slides: slides,
+        slideWidth: slideWidth,
+        widthAdjustment: widthAdjustment,
+        visibleSlideIndex: currentSlideIndex
+    });
+    return (React__default.createElement("div", { className: "arc-Carousel" },
+        React__default.createElement("div", { className: "arc-Carousel-nav" },
+            React__default.createElement("button", { className: classNames("arc-Carousel-navButton", {
+                    "arc-Carousel-navButton--hidden": visibleSlideIndex === 0
+                }), onClick: function () { return setVisibleSlideIndex(visibleSlideIndex - 1); }, "aria-label": "Show slide ".concat(visibleSlideIndex) },
+                React__default.createElement(ThemeIcon, { size: 32, icon: "carouselLeft" })),
+            React__default.createElement("div", { className: "arc-Carousel-dotContainer", role: "tablist" }, slides.map(function (_, i) { return (React__default.createElement("button", { className: classNames("arc-Carousel-dot", {
+                    "arc-Carousel-dot--selected": visibleSlideIndex === i
+                }), onClick: function () { return setVisibleSlideIndex(i); }, "aria-selected": visibleSlideIndex === i, key: "".concat(id, "-dot-").concat(i), role: "tab", "aria-label": "Show slide ".concat(i + 1) })); })),
+            React__default.createElement("button", { className: classNames("arc-Carousel-navButton", {
+                    "arc-Carousel-navButton--hidden": isLastSlide(slides, visibleSlideIndex)
+                }), onClick: function () { return setVisibleSlideIndex(visibleSlideIndex + 1); }, "aria-label": "Show slide ".concat(visibleSlideIndex + 2) },
+                React__default.createElement(ThemeIcon, { size: 32, icon: "carouselRight" }))),
+        React__default.createElement("div", { className: "arc-Carousel-outer" },
+            React__default.createElement("div", { className: classNames("arc-Carousel-inner", {
+                    "arc-Carousel-inner--gutterless": !withGutter
+                }) },
+                React__default.createElement("div", __assign({ className: classNames("arc-Carousel-slider", {
+                        "arc-Carousel-slider--gutter": withGutter
+                    }), style: {
+                        transform: "translateX(-".concat(sliderPosition, "%)")
+                    }, role: "region", "aria-roledescription": "carousel" }, handlers), React__default.Children.map(children, function (child, i) { return (React__default.createElement("div", { style: { flex: "0 0 ".concat(slideWidth, "%"), width: "".concat(slideWidth, "%") }, className: "arc-Carousel-item", key: "".concat(id, "-option-").concat(i), role: "group", "aria-hidden": isSlideHidden(slides, currentSlideIndex, i), "aria-roledescription": "slide" }, child)); }))))));
+};
+
+export { Carousel };

package/dist/Carousel/package.json

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

package/dist/Carousel/styles.css

@@ -0,0 +1 @@
+.arc .arc-Carousel{display:flex;flex-direction:column}.arc .arc-Carousel-outer{order:1;overflow:hidden}.arc .arc-Carousel-inner{margin:0 -12px}.arc .arc-Carousel-inner--gutterless{margin:0}.arc .arc-Carousel-slider{display:flex;padding:12px 0;transition:1s cubic-bezier(0.13,0.93,0.71,0.97) transform;width:100%}.arc .arc-Carousel-slider--gutter .arc-Carousel-item{padding:0 12px}.arc .arc-Carousel-navButton{background:#ffffff;border:none;border-radius:50%;box-shadow:0 2px 6px 0 rgba(0,0,0,0.25);color:var(--sem-color-bg-primary-light-default);cursor:pointer;padding:0;width:32px}.arc .arc-Carousel-nav .arc-Carousel-navButton:first-of-type span{transform:translateX(-1px)}.arc .arc-Carousel-nav .arc-Carousel-navButton:last-of-type span{transform:translateX(1px)}.arc .arc-Carousel-navButton:focus-visible{outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc .arc-Carousel-navButton--hidden{pointer-events:none;visibility:hidden}.arc .arc-Carousel-navButtonIcons{display:flex}@media (hover:hover){.arc .arc-Carousel-navButton:hover{background:#e3e3e3}}.arc .arc-Carousel-navButton:active{background:#c8c8c8}.arc .arc-Carousel-nav{align-items:center;display:flex;gap:24px;justify-content:center;margin-top:28px;order:2}.arc .arc-Carousel-dotContainer{align-items:center;display:flex;gap:20px}.arc .arc-Carousel-dot{background-color:#d9d9d9;border:none;border-radius:50%;cursor:pointer;height:8px;margin:0;outline:none;padding:0;transition:0.4s ease background-color;width:8px}.arc .arc-Carousel-dot:focus-visible{outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc .arc-Carousel-dot--selected{background-color:#2a2a2a}

package/dist/Checkbox/Checkbox.cjs.js

@@ -2,17 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Checkbox = require('../_shared/cjs/Checkbox-0e423653.js');
-require('../_shared/cjs/index-df60851b.js');
+var Checkbox = require('../_shared/cjs/Checkbox-f6712cc5.js');
+require('../_shared/cjs/index.es-c26e8978.js');
 require('react');
 require('../_shared/cjs/index-9947ac13.js');
-require('../_shared/cjs/FormControl-88d48f42.js');
-require('../_shared/cjs/Surface-8599dbe4.js');
-require('../_shared/cjs/DisclosureMini-c01ecce0.js');
-require('../_shared/cjs/Text-1c1110a4.js');
-require('../_shared/cjs/suffix-modifier-c8a34402.js');
-require('../_shared/cjs/ThemeIcon-ee814862.js');
-require('../_shared/cjs/VisuallyHidden-b0de4c7b.js');
+require('../_shared/cjs/FormControl-0fba93b8.js');
+require('../_shared/cjs/Surface-1b5c2ac8.js');
+require('../_shared/cjs/DisclosureMini-a46a4838.js');
+require('../_shared/cjs/Text-c187d9ef.js');
+require('../_shared/cjs/ThemeIcon-7f537bd2.js');
+require('../_shared/cjs/VisuallyHidden-25393f58.js');
 
 
 

package/dist/Checkbox/Checkbox.esm.js

@@ -1,11 +1,10 @@
-export { C as Checkbox } from '../_shared/esm/Checkbox-0baca464.js';
-import '../_shared/esm/index-288c66b5.js';
+export { C as Checkbox } from '../_shared/esm/Checkbox-8195c42c.js';
+import '../_shared/esm/index.es-5496ec12.js';
 import 'react';
 import '../_shared/esm/index-2e73c2e9.js';
-import '../_shared/esm/FormControl-d873f7fa.js';
-import '../_shared/esm/Surface-71d21a9e.js';
-import '../_shared/esm/DisclosureMini-38f4c459.js';
-import '../_shared/esm/Text-a46fb76b.js';
-import '../_shared/esm/suffix-modifier-1ce05abe.js';
-import '../_shared/esm/ThemeIcon-c2dc41a6.js';
-import '../_shared/esm/VisuallyHidden-06692fd3.js';
+import '../_shared/esm/FormControl-ff671eb8.js';
+import '../_shared/esm/Surface-0af6a69a.js';
+import '../_shared/esm/DisclosureMini-f6d8c9bc.js';
+import '../_shared/esm/Text-df93be85.js';
+import '../_shared/esm/ThemeIcon-e1e19266.js';
+import '../_shared/esm/VisuallyHidden-cf45ac18.js';

package/dist/Checkbox/styles.css

@@ -0,0 +1 @@
+.arc .arc-Checkbox{line-height:1;position:relative}.arc .arc-Checkbox-box{align-items:center;background:var(--checkbox-colors-light-bg-default-alt);border:var(--checkbox-border-weight-s) solid var(--checkbox-colors-light-border-default);border-radius:var(--checkbox-border-radius-s);color:var(--checkbox-colors-light-fg-default);display:inline-flex;flex-shrink:0;height:var(--checkbox-size-l);justify-content:center;margin-right:var(--checkbox-gap-s);width:var(--checkbox-size-l)}.arc .arc-Checkbox-label{align-items:center;cursor:pointer;display:inline-flex;font:var(--checkbox-type-label-m)}.arc .arc-Checkbox-labelOptional{font:var(--sem-type-label-reg-xs);margin-left:4px}.arc .arc-Checkbox--disabled .arc-Checkbox-label{cursor:not-allowed}.arc .arc-Checkbox-box svg{width:100%}.arc .arc-Checkbox--onDarkSurface .arc-Checkbox-box{background:var(--checkbox-colors-dark-bg-default-alt);border-color:var(--checkbox-colors-dark-border-default);color:var(--checkbox-colors-dark-bg-default-alt)}.arc .arc-Checkbox-box::after{content:"";display:inline-block;pointer-events:none}.arc .arc-Checkbox-helper{color:var(--checkbox-colors-light-text-default);display:block;font:var(--sem-type-support-reg-s)}.arc .arc-Checkbox--onDarkSurface .arc-Checkbox-helper{color:var(--checkbox-colors-dark-text-default)}.arc .arc-Checkbox-error{align-items:center;color:var(--checkbox-colors-light-border-error);display:flex;line-height:1.5;margin-top:var(--checkbox-gap-m)}.arc .arc-Checkbox-label--top{align-items:flex-start}.arc .arc-Checkbox-content--marginTop{margin-top:4px}.arc .arc-Checkbox--small .arc-Checkbox-content--marginTop{margin-top:2px}.arc .arc-Checkbox-input{clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.arc .arc-Checkbox--small .arc-Checkbox-box{border-radius:var(--checkbox-border-radius-xs);height:var(--checkbox-size-s);width:var(--checkbox-size-s)}.arc .arc-Checkbox--small .arc-Checkbox-label{font:var(--checkbox-type-label-s)}.arc .arc-Checkbox--small .arc-Checkbox-labelOptional{font:var(--sem-type-label-reg-xxs)}.arc .arc-Checkbox--small .arc-Checkbox-helper{font:var(--sem-type-support-reg-xs)}.arc .arc-Checkbox-input:checked+.arc-Checkbox-box{background:var(--checkbox-colors-light-bg-default);border-color:transparent}.arc .arc-Checkbox-input[disabled]+.arc-Checkbox-box{background:var(--checkbox-colors-light-bg-disabled);border-color:var(--checkbox-colors-light-border-disabled);color:transparent}.arc .arc-Checkbox-input:focus+.arc-Checkbox-box,.arc .arc-Checkbox-input:focus-visible+.arc-Checkbox-box{outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc .arc-Checkbox--invalid .arc-Checkbox-input:not(:checked)+.arc-Checkbox-box{background:var(--checkbox-colors-light-bg-error);border-color:var(--checkbox-colors-light-border-error);color:var(--checkbox-colors-light-bg-error)}.arc .arc-Checkbox-error .arc-Checkbox-error--icon{color:currentColor;flex-shrink:0;height:24px;margin-right:4px;width:24px}.arc .arc-Checkbox--onDarkSurface{color:var(--checkbox-colors-dark-text-default)}.arc .arc-Checkbox--disabled{color:var(--checkbox-colors-light-text-disabled)}.arc .arc-Checkbox--onDarkSurface.arc-Checkbox--disabled{color:var(--checkbox-colors-dark-text-disabled)}.arc .arc-Checkbox--onDarkSurface .arc-Checkbox-input:checked+.arc-Checkbox-box{background:var(--checkbox-colors-dark-bg-default);border-color:transparent;color:var(--checkbox-colors-dark-fg-default)}.arc .arc-Checkbox--onDarkSurface .arc-Checkbox-input[disabled]+.arc-Checkbox-box{background:var(--checkbox-colors-dark-bg-default-alt);border-color:var(--checkbox-colors-dark-border-default);color:transparent}.arc .arc-Checkbox--onDarkSurface .arc-Checkbox-input:focus+.arc-Checkbox-box,.arc .arc-Checkbox--onDarkSurface .arc-Checkbox-input:focus-visible+.arc-Checkbox-box{outline:var(--focus-border-weight-s) solid var(--focus-colors-dark-border-subtle);outline-offset:2px}.arc .arc-Checkbox-input[disabled].arc-Checkbox-input:checked+.arc-Checkbox-box{background:var(--checkbox-colors-light-bg-disabled);border-color:var(--checkbox-colors-light-border-disabled);color:var(--checkbox-colors-light-fg-disabled)}.arc .arc-Checkbox--onDarkSurface .arc-Checkbox-input[disabled].arc-Checkbox-input:checked+.arc-Checkbox-box{background:var(--checkbox-colors-dark-bg-disabled);border-color:var(--checkbox-colors-dark-border-disabled);color:var(--checkbox-colors-dark-fg-disabled)}.arc .arc-Checkbox--onDarkSurface .arc-Checkbox-error{color:#fa9590}.arc .arc-Checkbox-input:focus:not(:focus-visible)+.arc-Checkbox-box{box-shadow:none;outline:none}

package/dist/Columns/Columns.cjs.js

@@ -2,11 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Columns = require('../_shared/cjs/Columns-1224bdff.js');
-require('../_shared/cjs/index-df60851b.js');
+var Columns = require('../_shared/cjs/Columns-5c6bab74.js');
+require('../_shared/cjs/index.es-c26e8978.js');
 require('../_shared/cjs/index-9947ac13.js');
 require('react');
-require('../_shared/cjs/suffix-modifier-c8a34402.js');
 
 
 

package/dist/Columns/Columns.esm.js

@@ -1,5 +1,4 @@
-export { C as Columns } from '../_shared/esm/Columns-6a8f6fbb.js';
-import '../_shared/esm/index-288c66b5.js';
+export { C as Columns } from '../_shared/esm/Columns-9aa5df4a.js';
+import '../_shared/esm/index.es-5496ec12.js';
 import '../_shared/esm/index-2e73c2e9.js';
 import 'react';
-import '../_shared/esm/suffix-modifier-1ce05abe.js';

package/dist/Columns/styles.css

@@ -0,0 +1 @@
+.arc .arc-Columns-inner,.arc .arc-Columns-col{--arc-columns-gap:24px;--arc-columns-gap-wide:32px;--arc-columns-count:12;--arc-column-width:calc((100%/var(--arc-columns-count)) - var(--arc-columns-gap));--arc-column-width-with-gap:calc(var(--arc-column-width) + var(--arc-columns-gap));--arc-columns-span-1-width:calc((var(--arc-column-width-with-gap) * 1) - var(--arc-columns-gap));--arc-columns-span-2-width:calc((var(--arc-column-width-with-gap) * 2) - var(--arc-columns-gap));--arc-columns-span-3-width:calc((var(--arc-column-width-with-gap) * 3) - var(--arc-columns-gap));--arc-columns-span-4-width:calc((var(--arc-column-width-with-gap) * 4) - var(--arc-columns-gap));--arc-columns-span-5-width:calc((var(--arc-column-width-with-gap) * 5) - var(--arc-columns-gap));--arc-columns-span-6-width:calc((var(--arc-column-width-with-gap) * 6) - var(--arc-columns-gap));--arc-columns-span-7-width:calc((var(--arc-column-width-with-gap) * 7) - var(--arc-columns-gap));--arc-columns-span-8-width:calc((var(--arc-column-width-with-gap) * 8) - var(--arc-columns-gap));--arc-columns-span-9-width:calc((var(--arc-column-width-with-gap) * 9) - var(--arc-columns-gap));--arc-columns-span-10-width:calc((var(--arc-column-width-with-gap) * 10) - var(--arc-columns-gap));--arc-columns-span-11-width:calc((var(--arc-column-width-with-gap) * 11) - var(--arc-columns-gap));--arc-columns-span-12-width:calc((var(--arc-column-width-with-gap) * 12) - var(--arc-columns-gap))}@media (min-width:1280px){.arc .arc-Columns-inner,.arc .arc-Columns-col{--arc-columns-gap:var(--arc-columns-gap-wide)}}.arc .arc-Columns{padding-top:1px}.arc .arc-Columns-inner{display:flex;flex-wrap:wrap;margin-left:calc(0px - var(--arc-columns-gap));margin-top:calc(-1px - var(--arc-columns-gap));pointer-events:none}.arc .arc-Columns-col{margin-left:var(--arc-columns-gap);margin-top:var(--arc-columns-gap);max-width:var(--arc-columns-span-12-width);pointer-events:auto;position:relative;width:100%}.arc .arc-Columns--gutterless .arc-Columns-inner,.arc .arc-Columns--gutterless .arc-Columns-col{--arc-columns-gap:0px}.arc .arc-Columns-col--alignBottom{align-self:flex-end}.arc .arc-Columns-col--alignCenter{align-self:center}.arc .arc-Columns-col--alignTop{align-self:flex-start}.arc .arc-Columns-col--debugVisible::before{align-items:center;background:rgba(207,58,138,0.5);bottom:0;content:"Col";display:flex;justify-content:center;left:0;outline:1px dashed #cf3a8a;outline-offset:-1px;position:absolute;right:0;top:0}.arc .arc-Columns-col:empty{display:none}.arc .arc-Columns-col--0,.arc .arc-Columns-col--0:empty{display:none}.arc .arc-Columns-col--1,.arc .arc-Columns-col--1:empty{display:block;max-width:var(--arc-columns-span-1-width)}.arc .arc-Columns-col--2,.arc .arc-Columns-col--2:empty{display:block;max-width:var(--arc-columns-span-2-width)}.arc .arc-Columns-col--3,.arc .arc-Columns-col--3:empty{display:block;max-width:var(--arc-columns-span-3-width)}.arc .arc-Columns-col--4,.arc .arc-Columns-col--4:empty{display:block;max-width:var(--arc-columns-span-4-width)}.arc .arc-Columns-col--5,.arc .arc-Columns-col--5:empty{display:block;max-width:var(--arc-columns-span-5-width)}.arc .arc-Columns-col--6,.arc .arc-Columns-col--6:empty{display:block;max-width:var(--arc-columns-span-6-width)}.arc .arc-Columns-col--7,.arc .arc-Columns-col--7:empty{display:block;max-width:var(--arc-columns-span-7-width)}.arc .arc-Columns-col--8,.arc .arc-Columns-col--8:empty{display:block;max-width:var(--arc-columns-span-8-width)}.arc .arc-Columns-col--9,.arc .arc-Columns-col--9:empty{display:block;max-width:var(--arc-columns-span-9-width)}.arc .arc-Columns-col--10,.arc .arc-Columns-col--10:empty{display:block;max-width:var(--arc-columns-span-10-width)}.arc .arc-Columns-col--11,.arc .arc-Columns-col--11:empty{display:block;max-width:var(--arc-columns-span-11-width)}.arc .arc-Columns-col--12,.arc .arc-Columns-col--12:empty{display:block;max-width:100%}@media (min-width:636px){.arc .arc-Columns-col--s0,.arc .arc-Columns-col--s0:empty{display:none;max-width:0}.arc .arc-Columns-col--s1,.arc .arc-Columns-col--s1:empty{display:block;max-width:var(--arc-columns-span-1-width)}.arc .arc-Columns-col--s2,.arc .arc-Columns-col--s2:empty{display:block;max-width:var(--arc-columns-span-2-width)}.arc .arc-Columns-col--s3,.arc .arc-Columns-col--s3:empty{display:block;max-width:var(--arc-columns-span-3-width)}.arc .arc-Columns-col--s4,.arc .arc-Columns-col--s4:empty{display:block;max-width:var(--arc-columns-span-4-width)}.arc .arc-Columns-col--s5,.arc .arc-Columns-col--s5:empty{display:block;max-width:var(--arc-columns-span-5-width)}.arc .arc-Columns-col--s6,.arc .arc-Columns-col--s6:empty{display:block;max-width:var(--arc-columns-span-6-width)}.arc .arc-Columns-col--s7,.arc .arc-Columns-col--s7:empty{display:block;max-width:var(--arc-columns-span-7-width)}.arc .arc-Columns-col--s8,.arc .arc-Columns-col--s8:empty{display:block;max-width:var(--arc-columns-span-8-width)}.arc .arc-Columns-col--s9,.arc .arc-Columns-col--s9:empty{display:block;max-width:var(--arc-columns-span-9-width)}.arc .arc-Columns-col--s10,.arc .arc-Columns-col--s10:empty{display:block;max-width:var(--arc-columns-span-10-width)}.arc .arc-Columns-col--s11,.arc .arc-Columns-col--s11:empty{display:block;max-width:var(--arc-columns-span-11-width)}.arc .arc-Columns-col--s12,.arc .arc-Columns-col--s12:empty{display:block;max-width:100%}}@media (min-width:768px){.arc .arc-Columns-col--m0,.arc .arc-Columns-col--m0:empty{display:none;max-width:0}.arc .arc-Columns-col--m1,.arc .arc-Columns-col--m1:empty{display:block;max-width:var(--arc-columns-span-1-width)}.arc .arc-Columns-col--m2,.arc .arc-Columns-col--m2:empty{display:block;max-width:var(--arc-columns-span-2-width)}.arc .arc-Columns-col--m3,.arc .arc-Columns-col--m3:empty{display:block;max-width:var(--arc-columns-span-3-width)}.arc .arc-Columns-col--m4,.arc .arc-Columns-col--m4:empty{display:block;max-width:var(--arc-columns-span-4-width)}.arc .arc-Columns-col--m5,.arc .arc-Columns-col--m5:empty{display:block;max-width:var(--arc-columns-span-5-width)}.arc .arc-Columns-col--m6,.arc .arc-Columns-col--m6:empty{display:block;max-width:var(--arc-columns-span-6-width)}.arc .arc-Columns-col--m7,.arc .arc-Columns-col--m7:empty{display:block;max-width:var(--arc-columns-span-7-width)}.arc .arc-Columns-col--m8,.arc .arc-Columns-col--m8:empty{display:block;max-width:var(--arc-columns-span-8-width)}.arc .arc-Columns-col--m9,.arc .arc-Columns-col--m9:empty{display:block;max-width:var(--arc-columns-span-9-width)}.arc .arc-Columns-col--m10,.arc .arc-Columns-col--m10:empty{display:block;max-width:var(--arc-columns-span-10-width)}.arc .arc-Columns-col--m11,.arc .arc-Columns-col--m11:empty{display:block;max-width:var(--arc-columns-span-11-width)}.arc .arc-Columns-col--m12,.arc .arc-Columns-col--m12:empty{display:block;max-width:100%}}@media (min-width:1024px){.arc .arc-Columns-col--l0,.arc .arc-Columns-col--l0:empty{display:none;max-width:0}.arc .arc-Columns-col--l1,.arc .arc-Columns-col--l1:empty{display:block;max-width:var(--arc-columns-span-1-width)}.arc .arc-Columns-col--l2,.arc .arc-Columns-col--l2:empty{display:block;max-width:var(--arc-columns-span-2-width)}.arc .arc-Columns-col--l3,.arc .arc-Columns-col--l3:empty{display:block;max-width:var(--arc-columns-span-3-width)}.arc .arc-Columns-col--l4,.arc .arc-Columns-col--l4:empty{display:block;max-width:var(--arc-columns-span-4-width)}.arc .arc-Columns-col--l5,.arc .arc-Columns-col--l5:empty{display:block;max-width:var(--arc-columns-span-5-width)}.arc .arc-Columns-col--l6,.arc .arc-Columns-col--l6:empty{display:block;max-width:var(--arc-columns-span-6-width)}.arc .arc-Columns-col--l7,.arc .arc-Columns-col--l7:empty{display:block;max-width:var(--arc-columns-span-7-width)}.arc .arc-Columns-col--l8,.arc .arc-Columns-col--l8:empty{display:block;max-width:var(--arc-columns-span-8-width)}.arc .arc-Columns-col--l9,.arc .arc-Columns-col--l9:empty{display:block;max-width:var(--arc-columns-span-9-width)}.arc .arc-Columns-col--l10,.arc .arc-Columns-col--l10:empty{display:block;max-width:var(--arc-columns-span-10-width)}.arc .arc-Columns-col--l11,.arc .arc-Columns-col--l11:empty{display:block;max-width:var(--arc-columns-span-11-width)}.arc .arc-Columns-col--l12,.arc .arc-Columns-col--l12:empty{display:block;max-width:100%}}@media (min-width:1280px){.arc .arc-Columns-col--xL0,.arc .arc-Columns-col--xL0:empty{display:none;max-width:0}.arc .arc-Columns-col--xL1,.arc .arc-Columns-col--xL1:empty{display:block;max-width:var(--arc-columns-span-1-width)}.arc .arc-Columns-col--xL2,.arc .arc-Columns-col--xL2:empty{display:block;max-width:var(--arc-columns-span-2-width)}.arc .arc-Columns-col--xL3,.arc .arc-Columns-col--xL3:empty{display:block;max-width:var(--arc-columns-span-3-width)}.arc .arc-Columns-col--xL4,.arc .arc-Columns-col--xL4:empty{display:block;max-width:var(--arc-columns-span-4-width)}.arc .arc-Columns-col--xL5,.arc .arc-Columns-col--xL5:empty{display:block;max-width:var(--arc-columns-span-5-width)}.arc .arc-Columns-col--xL6,.arc .arc-Columns-col--xL6:empty{display:block;max-width:var(--arc-columns-span-6-width)}.arc .arc-Columns-col--xL7,.arc .arc-Columns-col--xL7:empty{display:block;max-width:var(--arc-columns-span-7-width)}.arc .arc-Columns-col--xL8,.arc .arc-Columns-col--xL8:empty{display:block;max-width:var(--arc-columns-span-8-width)}.arc .arc-Columns-col--xL9,.arc .arc-Columns-col--xL9:empty{display:block;max-width:var(--arc-columns-span-9-width)}.arc .arc-Columns-col--xL10,.arc .arc-Columns-col--xL10:empty{display:block;max-width:var(--arc-columns-span-10-width)}.arc .arc-Columns-col--xL11,.arc .arc-Columns-col--xL11:empty{display:block;max-width:var(--arc-columns-span-11-width)}.arc .arc-Columns-col--xL12,.arc .arc-Columns-col--xL12:empty{display:block;max-width:100%}}

package/dist/ConditionalWrapper/ConditionalWrapper.cjs.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ConditionalWrapper = require('../_shared/cjs/ConditionalWrapper-bf944594.js');
+require('react');
+
+
+
+exports.ConditionalWrapper = ConditionalWrapper.ConditionalWrapper;

package/dist/ConditionalWrapper/ConditionalWrapper.esm.js

@@ -0,0 +1,2 @@
+export { C as ConditionalWrapper } from '../_shared/esm/ConditionalWrapper-b85979de.js';
+import 'react';

package/dist/ConditionalWrapper/package.json

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

package/dist/ContentSwitcher/ContentSwitcher.cjs.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ContentSwitcher = require('../_shared/cjs/ContentSwitcher-88b00e11.js');
+require('../_shared/cjs/index.es-c26e8978.js');
+require('react');
+require('../_shared/cjs/index-1e7a1fce.js');
+require('../_shared/cjs/index-76f7dd53.js');
+require('react-dom');
+require('../_shared/cjs/index-dbc843d3.js');
+require('../_shared/cjs/index-879e71ee.js');
+require('../_shared/cjs/index-527f962b.js');
+require('../_shared/cjs/Text-c187d9ef.js');
+require('../_shared/cjs/index-9947ac13.js');
+require('../_shared/cjs/Surface-1b5c2ac8.js');
+
+
+
+exports.ContentSwitcher = ContentSwitcher.ContentSwitcher;

package/dist/ContentSwitcher/ContentSwitcher.esm.js

@@ -0,0 +1,12 @@
+export { C as ContentSwitcher } from '../_shared/esm/ContentSwitcher-bae1f0a7.js';
+import '../_shared/esm/index.es-5496ec12.js';
+import 'react';
+import '../_shared/esm/index-89a7c31c.js';
+import '../_shared/esm/index-57d4cb34.js';
+import 'react-dom';
+import '../_shared/esm/index-14c7f4da.js';
+import '../_shared/esm/index-b9923ee4.js';
+import '../_shared/esm/index-f2ddcbe2.js';
+import '../_shared/esm/Text-df93be85.js';
+import '../_shared/esm/index-2e73c2e9.js';
+import '../_shared/esm/Surface-0af6a69a.js';

package/dist/ContentSwitcher/package.json

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

package/dist/ContentSwitcher/styles.css

@@ -0,0 +1 @@
+.arc .arc-ContentSwitcherTab{align-items:center;background:var(--content-switcher-colors-light-bg-default);border:none;border-radius:var(--content-switcher-border-radius-pill);display:flex;height:48px;max-width:300px;padding:var(--content-switcher-padding-m) var(--content-switcher-padding-l);transition:background 0.3s ease;white-space:nowrap}.arc .arc-ContentSwitcherTab>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.arc .arc-ContentSwitcherTab:hover{background:var(--content-switcher-colors-light-bg-hover);cursor:pointer}.arc .arc-ContentSwitcherTab:focus-visible{outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc .arc-ContentSwitcherTab[data-state="active"]{background:var(--content-switcher-colors-light-bg-default-alt);color:var(--content-switcher-colors-light-text-default-alt)}:root{--arc-content-switcher-height:48px}.arc .arc-ContentSwitcherList{background:var(--content-switcher-colors-light-bg-default);border-radius:var(--sem-border-radius-xxl);box-shadow:var(--content-switcher-elevations-02,0 0 1px 0 rgba(0,0,0,0.25),0 4px 12px 0 rgba(0,0,0,0.1));margin-bottom:10px;max-width:1000px;overflow:scroll;-ms-overflow-style:none;position:relative;scrollbar-width:none;text-align:center;z-index:1}.arc .arc-ContentSwitcherList::-webkit-scrollbar{display:none}.arc .arc-ContentSwitcherList-overflowWrapper{height:calc(var(--arc-content-switcher-height) + (var(--content-switcher-padding-s) * 2));left:50%;max-width:1000px;pointer-events:none;position:absolute;top:0;transform:translateX(-50%);width:100%;z-index:2}.arc .arc-ContentSwitcherList-wrapper{display:flex;justify-content:center;margin:0 32px;position:relative}.arc .arc-ContentSwitcherList-inner{display:inline-flex;gap:var(--content-switcher-padding-s);padding:var(--content-switcher-padding-s)}.arc .arc-ContentSwitcherList--rightOverflow,.arc .arc-ContentSwitcherList--leftOverflow{content:"";display:block;height:100%;pointer-events:none;position:absolute;top:0;width:96px}.arc .arc-ContentSwitcherList--rightOverflow{background:linear-gradient(90deg,rgba(255,255,255,0) 0.61%,#ffffff 75.15%);border-radius:0 var(--sem-border-radius-xxl) var(--sem-border-radius-xxl) 0;right:0}.arc .arc-ContentSwitcherList--leftOverflow{background:linear-gradient(270deg,rgba(255,255,255,0) 0.61%,#ffffff 75.15%);border-radius:var(--sem-border-radius-xxl) 0 0 var(--sem-border-radius-xxl);left:0}.arc .arc-ContentSwitcherList--isInset{margin-bottom:calc((var(--arc-content-switcher-height) * -1) + var(--content-switcher-padding-s))}.arc .arc-ContentSwitcherContent{display:flex;justify-content:center;opacity:1;transition:opacity 0.5s ease}.arc .arc-ContentSwitcherContent[data-state="inactive"]{opacity:0}.arc .arc-ContentSwitcher{margin:0 auto}.arc .arc-ContentSwitcher-root{position:relative}