@apple-pie/slice 0.1.59 → 0.2.0

package/dist/cjs/chunks/Dot-0Dv8WX0n.js

@@ -0,0 +1,92 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-B8JY5ZGw.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js"), resolveColorProps = require("./resolveColorProps-DE1k1P-Z.js"), usePrefersReducedMotion = require("./usePrefersReducedMotion-GpD17CAE.js"), css_dot = "Dot-module_dot__RNz87 flexBox-module_row__z24tF";
+
+const DEFAULT_VARIANTS = {
+    initial: {
+        opacity: 0
+    },
+    animate: {
+        opacity: 1
+    },
+    exit: {
+        opacity: 0
+    }
+}, DEFAULT_TRANSITION = {
+    type: "tween",
+    ease: [ .36, 0, .64, 1 ],
+    duration: .25
+}, Dot = React.memo(rawProps => {
+    const props = resolveColorProps.resolveColorProps(rawProps), reduceMotion = usePrefersReducedMotion.usePrefersReducedMotion(), themeMotion = hooks_useTheme.useTheme().current.motion, {size: size = 8, offSet: offSet = 2, topOffset: topOffset = offSet, rightOffset: rightOffset = offSet, border: border = 3, position: position = "corner", color: color, transition: transition, motionValues: motionValues, show: show = !1, state: state} = props, divAttributes = tslib_es6.__rest(props, [ "size", "offSet", "topOffset", "rightOffset", "border", "position", "color", "transition", "motionValues", "show", "state" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", variants = React.useMemo(() => motionValues ? Object.assign(Object.assign({}, DEFAULT_VARIANTS), motionValues) : DEFAULT_VARIANTS, [ motionValues ]), trans = React.useMemo(() => {
+        var _a;
+        const curve = null === (_a = themeMotion["motion-water"].match(/cubic-bezier\(([^)]+)\)/)) || void 0 === _a ? void 0 : _a[1].split(",").map(Number), durationText = themeMotion["motion-water-duration"], duration = Number.parseFloat(durationText) / (durationText.endsWith("ms") ? 1e3 : 1);
+        return Object.assign(Object.assign(Object.assign(Object.assign({}, DEFAULT_TRANSITION), 4 === (null == curve ? void 0 : curve.length) && curve.every(Number.isFinite) ? {
+            ease: curve
+        } : {}), Number.isFinite(duration) && duration >= 0 ? {
+            duration: duration
+        } : {}), transition);
+    }, [ themeMotion, transition ]), bgColor = React.useMemo(() => {
+        if (color) return color;
+        if (state) switch (state) {
+          case "red":
+            return "var(--feedback-warning)";
+
+          case "yellow":
+            return "var(--feedback-attention)";
+
+          case "green":
+            return "var(--feedback-positive)";
+
+          case "blue":
+            return "var(--core-gp-logo-primary)";
+
+          case "grey":
+            return "var(--core-text-secondary)";
+        }
+        return "var(--core-gp-logo-primary)";
+    }, [ state, color ]), cssVars = React.useMemo(() => ({
+        "--dot-size": `${size}px`,
+        "--dot-display": "inline" === position ? "inline-flex" : "flex",
+        "--dot-position": "inline" === position ? "relative" : "absolute",
+        "--dot-top": "inline" === position ? "unset" : -topOffset + "px",
+        "--dot-right": "inline" === position ? "unset" : -rightOffset + "px",
+        "--dot-vertical-align": "inline" === position ? "middle" : "unset",
+        "--dot-border": `${border}px solid`,
+        "--dot-border-color": "var(--core-surface-primary)",
+        "--dot-bg": `${bgColor}`
+    }), [ size, position, topOffset, rightOffset, border, bgColor ]);
+    return reduceMotion ? show ? jsxRuntime.jsx("div", Object.assign({
+        id: divId,
+        className: `${css_dot}${divClass}`,
+        style: Object.assign(Object.assign({}, divStyle), cssVars),
+        role: "status",
+        "aria-live": "polite",
+        "aria-label": "Blue dot indicating active or new"
+    }, rest, {
+        children: jsxRuntime.jsx("div", {
+            className: "dot"
+        })
+    })) : null : jsxRuntime.jsx(react.AnimatePresence, {
+        initial: !1,
+        children: show && jsxRuntime.jsx(react.motion.div, Object.assign({
+            id: divId,
+            className: `${css_dot}${divClass}`,
+            style: Object.assign(Object.assign({}, divStyle), cssVars),
+            initial: "initial",
+            animate: "animate",
+            exit: "exit",
+            transition: trans,
+            variants: variants,
+            role: "status",
+            "aria-live": "polite",
+            "aria-label": "Blue dot indicating active or new"
+        }, rest, {
+            children: jsxRuntime.jsx("div", {
+                className: "dot"
+            })
+        }))
+    });
+});
+
+exports.Dot = Dot;

package/dist/cjs/chunks/DrggablePanel-zi27w3wY.js

@@ -0,0 +1,251 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-B8JY5ZGw.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react");
+
+require("../theme/colors.js");
+
+var theme_corners = require("../theme/corners.js");
+
+require("../theme/type.js"), require("./resolveColor-DkYThq2J.js"), require("./breakpoints-BDw1OJh9.js");
+
+var misc = require("./misc-PmT7cZzC.js");
+
+require("./broadcastChannel-DdPZ3LUB.js"), require("./files-RYD9L_pI.js"), require("./webRTCStore-OGkXAovD.js"), 
+require("./microphoneStore-D7DuvQeX.js"), require("./volumeStore-BoEoo9wA.js");
+
+var hooks_useObserveResize = require("../hooks/useObserveResize.js"), resolveColorProps = require("./resolveColorProps-DE1k1P-Z.js"), usePrefersReducedMotion = require("./usePrefersReducedMotion-GpD17CAE.js"), css_panel = "DraggablePanel-module_panel__vuq2R flexBox-module_columnStart__C7P44", css_content = "DraggablePanel-module_content__SBL0T flexBox-module_columnStart__C7P44", css_handle = "DraggablePanel-module_handle__LPZw8", css_rail = "DraggablePanel-module_rail__P-7yb", css_highlight = "DraggablePanel-module_highlight__5d-cs";
+
+const defaults_initial = 250, defaults_min = 250, defaults_max = 500;
+
+function resolve(value, containerWidth, fallback) {
+    return !Number.isFinite(value) || value < 0 ? fallback : value <= 1 ? void 0 === containerWidth ? 0 : containerWidth * value : Math.max(50, value);
+}
+
+/** Relative widths wait for a real container measurement; fixed widths are SSR-safe. */ const defaultConstraints = {
+    initial: 250,
+    min: 250,
+    max: 500
+}, DraggablePanel = React.memo(function(rawProps) {
+    var _a, _b, _c;
+    const props = resolveColorProps.resolveColorProps(rawProps), {children: children, sizeConstraints: sizeConstraints = defaultConstraints, isClosed: isClosed = !0, resizeHandle: resizeHandle, resizeHandleLabel: resizeHandleLabel = "Resize panel", borderRight: borderRight = "1px solid var(--core-outline-secondary)", borderLeft: borderLeft = "1px solid var(--core-outline-secondary)", backgroundColor: backgroundColor = "transparent", drags: drags = "right", isTouchDevice: isTouchDevice = !1, disableOnContext: disableOnContext = !1, dragHandle: dragHandle = !0, dragHandleStyle: dragHandleStyle = {
+        height: 24,
+        width: 9
+    }, transitionDurationOnInit: transitionDurationOnInit, containerRef: containerRef, onResize: onResize, onResizeStart: onResizeStart, onResizeEnd: onResizeEnd, onContextMenu: onContextMenu, id: id, className: className, style: style} = props, attributes = tslib_es6.__rest(props, [ "children", "sizeConstraints", "isClosed", "resizeHandle", "resizeHandleLabel", "borderRight", "borderLeft", "backgroundColor", "drags", "isTouchDevice", "disableOnContext", "dragHandle", "dragHandleStyle", "transitionDurationOnInit", "containerRef", "onResize", "onResizeStart", "onResizeEnd", "onContextMenu", "id", "className", "style" ]), div = React.useRef(null), handle = React.useRef(null), generatedId = React.useId(), panelId = null != id ? id : generatedId, containerSize = hooks_useObserveResize.useObserveResize(containerRef), [windowWidth, setWindowWidth] = React.useState(), containerWidth = containerRef ? containerSize.width || void 0 : windowWidth, {initial: initial, min: min, max: max} = function(values, containerWidth) {
+        const min = resolve(values.min, containerWidth, defaults_min), max = Math.max(min, resolve(values.max, containerWidth, defaults_max));
+        return {
+            initial: Math.min(max, Math.max(min, resolve(values.initial, containerWidth, defaults_initial))),
+            min: min,
+            max: max
+        };
+    }(sizeConstraints, containerWidth), [lastWidth, setLastWidth] = React.useState(), [dragWidth, setDragWidth] = React.useState(), [highlight, setHighlight] = React.useState(!1), timer = React.useRef(void 0), gesture = React.useRef(void 0), latest = React.useRef({
+        onResize: onResize,
+        onResizeStart: onResizeStart,
+        onResizeEnd: onResizeEnd,
+        min: min,
+        max: max
+    });
+    React.useLayoutEffect(() => {
+        latest.current = {
+            onResize: onResize,
+            onResizeStart: onResizeStart,
+            onResizeEnd: onResizeEnd,
+            min: min,
+            max: max
+        };
+    });
+    const reducedMotion = usePrefersReducedMotion.usePrefersReducedMotion(), width = Math.min(max, Math.max(min, null !== (_a = null != dragWidth ? dragWidth : lastWidth) && void 0 !== _a ? _a : initial)), unresolvedInitial = void 0 === lastWidth && void 0 === containerWidth && sizeConstraints.initial >= 0 && sizeConstraints.initial <= 1, closed = isClosed || Boolean(drags) && (width <= 1 || unresolvedInitial), [settled, setSettled] = React.useState(!1);
+    React.useEffect(() => {
+        void 0 !== containerWidth && setSettled(!0);
+    }, [ containerWidth ]), React.useEffect(() => {
+        var _a;
+        if (containerRef) return;
+        const view = null === (_a = div.current) || void 0 === _a ? void 0 : _a.ownerDocument.defaultView;
+        if (!view) return;
+        const update = () => setWindowWidth(view.innerWidth);
+        return update(), view.addEventListener("resize", update), () => view.removeEventListener("resize", update);
+    }, [ containerRef ]);
+    const clearHighlightTimer = React.useCallback(() => {
+        void 0 !== timer.current && clearTimeout(timer.current), timer.current = void 0;
+    }, []), hideHighlight = () => {
+        clearHighlightTimer(), gesture.current || setHighlight(!1);
+    }, info = (nextWidth, height, deltaWidth = 0) => ({
+        div: div,
+        divWidth: nextWidth,
+        divHeight: height,
+        deltaWidth: deltaWidth
+    }), finish = React.useCallback(notify => {
+        var _a, _b, _c, _d, _e, _f;
+        const active = gesture.current;
+        if (!active) return;
+        if (gesture.current = void 0, active.release(), !notify) return void clearHighlightTimer();
+        const finalWidth = Math.min(latest.current.max, Math.max(latest.current.min, active.width));
+        setLastWidth(finalWidth), setDragWidth(void 0), clearHighlightTimer(), setHighlight(!1);
+        const update = {
+            div: div,
+            divWidth: finalWidth,
+            divHeight: null !== (_b = null === (_a = div.current) || void 0 === _a ? void 0 : _a.offsetHeight) && void 0 !== _b ? _b : active.height,
+            deltaWidth: 0
+        };
+        null === (_d = (_c = latest.current).onResize) || void 0 === _d || _d.call(_c, update), 
+        null === (_f = (_e = latest.current).onResizeEnd) || void 0 === _f || _f.call(_e, update);
+    }, [ clearHighlightTimer ]);
+    React.useLayoutEffect(() => {
+        gesture.current && finish(!0);
+    }, [ isClosed, drags, min, max, finish ]), React.useEffect(() => () => {
+        finish(!1), clearHighlightTimer();
+    }, [ finish, clearHighlightTimer ]);
+    const railWidth = isTouchDevice ? 44 : null !== (_b = null == resizeHandle ? void 0 : resizeHandle.width) && void 0 !== _b ? _b : 10, offset = isTouchDevice ? -22 : -railWidth / 2, variables = {
+        "--panel-bg": null != backgroundColor ? backgroundColor : "transparent"
+    };
+    return jsxRuntime.jsxs("div", Object.assign({}, attributes, {
+        id: panelId,
+        ref: div,
+        className: `${css_panel}${className ? ` ${className}` : ""}`,
+        onContextMenu: event => {
+            null == onContextMenu || onContextMenu(event), disableOnContext && event.preventDefault();
+        },
+        style: Object.assign(Object.assign(Object.assign({}, style), variables), {
+            overflow: "visible",
+            flexShrink: 0,
+            width: isClosed ? 0 : drags ? unresolvedInitial ? "0px" : width : "100%",
+            height: "100%",
+            maxWidth: drags ? max : "unset",
+            transition: (() => {
+                if (void 0 !== dragWidth || reducedMotion) return "none";
+                if (!settled && void 0 !== transitionDurationOnInit) {
+                    return `width ${"number" == typeof transitionDurationOnInit ? `${Math.max(0, transitionDurationOnInit)}ms` : transitionDurationOnInit} var(--motion-water)`;
+                }
+                return "width var(--motion-water-duration) var(--motion-water)";
+            })(),
+            borderRight: closed || "right" !== drags ? "none" : null != borderRight ? borderRight : void 0,
+            borderLeft: closed || "left" !== drags ? "none" : null != borderLeft ? borderLeft : void 0
+        }),
+        children: [ jsxRuntime.jsx("div", {
+            className: css_content,
+            inert: closed || void 0,
+            "aria-hidden": closed || void 0,
+            children: children
+        }), jsxRuntime.jsxs("div", {
+            ref: handle,
+            className: css_rail,
+            role: "separator",
+            "aria-orientation": "vertical",
+            "aria-label": resizeHandleLabel.trim() || "Resize panel",
+            "aria-controls": panelId,
+            "aria-valuemin": min,
+            "aria-valuemax": max,
+            "aria-valuenow": width,
+            "aria-valuetext": `${Math.round(width)} pixels`,
+            tabIndex: closed || !drags ? -1 : 0,
+            onKeyDown: event => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+                if (event.currentTarget.removeAttribute("data-pointer-focus"), !drags || closed || gesture.current || event.altKey || event.ctrlKey || event.metaKey) return;
+                const current = width;
+                let next;
+                if ("Home" === event.key) next = min; else if ("End" === event.key) next = max; else {
+                    if ("ArrowLeft" !== event.key && "ArrowRight" !== event.key) return;
+                    next = current + ("ArrowRight" === event.key ? 1 : -1) * (event.shiftKey ? 50 : 10) * ("right" === drags ? 1 : -1);
+                }
+                if (event.preventDefault(), next = Math.min(max, Math.max(min, next)), next === current) return;
+                const height = null !== (_b = null === (_a = div.current) || void 0 === _a ? void 0 : _a.offsetHeight) && void 0 !== _b ? _b : 0;
+                null === (_d = (_c = latest.current).onResize) || void 0 === _d || _d.call(_c, info(current, height)), 
+                null === (_f = (_e = latest.current).onResizeStart) || void 0 === _f || _f.call(_e, info(current, height)), 
+                setLastWidth(next), null === (_h = (_g = latest.current).onResize) || void 0 === _h || _h.call(_g, info(next, height, (next - current) * ("right" === drags ? 1 : -1))), 
+                null === (_k = (_j = latest.current).onResize) || void 0 === _k || _k.call(_j, info(next, height)), 
+                null === (_m = (_l = latest.current).onResizeEnd) || void 0 === _m || _m.call(_l, info(next, height));
+            },
+            onPointerDown: event => {
+                var _a, _b, _c, _d;
+                if (closed || !drags || 0 !== event.button || !event.isPrimary || gesture.current) return;
+                event.preventDefault();
+                const panel = div.current, rail = event.currentTarget, document = rail.ownerDocument, view = document.defaultView;
+                if (!panel || !view) return;
+                rail.setAttribute("data-pointer-focus", ""), rail.focus({
+                    preventScroll: !0
+                }), clearHighlightTimer();
+                const root = document.documentElement, previous = {
+                    userSelect: root.style.userSelect,
+                    webkitUserSelect: root.style.webkitUserSelect
+                }, startWidth = panel.offsetWidth, active = {
+                    pointerId: event.pointerId,
+                    startX: event.clientX,
+                    startWidth: startWidth,
+                    width: startWidth,
+                    height: panel.offsetHeight,
+                    release: () => {}
+                };
+                gesture.current = active;
+                const move = next => {
+                    var _a, _b;
+                    if (next.pointerId !== active.pointerId) return;
+                    next.preventDefault();
+                    const delta = next.clientX - active.startX, nextWidth = active.startWidth + ("right" === drags ? delta : -delta);
+                    nextWidth < min || nextWidth > max || (active.width = nextWidth, panel.style.width = `${nextWidth}px`, 
+                    rail.setAttribute("aria-valuenow", String(nextWidth)), rail.setAttribute("aria-valuetext", `${Math.round(nextWidth)} pixels`), 
+                    null === (_b = (_a = latest.current).onResize) || void 0 === _b || _b.call(_a, info(nextWidth, active.height, delta)));
+                }, end = next => {
+                    next.pointerId === active.pointerId && finish(!0);
+                }, cancel = () => finish(!0), handleEscape = next => {
+                    "Escape" === next.key && finish(!0);
+                };
+                active.release = () => {
+                    document.removeEventListener("pointermove", move), document.removeEventListener("pointerup", end), 
+                    document.removeEventListener("pointercancel", end), rail.removeEventListener("lostpointercapture", cancel), 
+                    view.removeEventListener("blur", cancel), view.removeEventListener("keydown", handleEscape), 
+                    rail.hasPointerCapture(active.pointerId) && rail.releasePointerCapture(active.pointerId), 
+                    root.style.userSelect = previous.userSelect, root.style.webkitUserSelect = previous.webkitUserSelect;
+                }, document.addEventListener("pointermove", move, {
+                    passive: !1
+                }), document.addEventListener("pointerup", end), document.addEventListener("pointercancel", end), 
+                rail.addEventListener("lostpointercapture", cancel), view.addEventListener("blur", cancel), 
+                view.addEventListener("keydown", handleEscape), root.style.userSelect = "none", 
+                root.style.webkitUserSelect = "none";
+                try {
+                    rail.setPointerCapture(active.pointerId);
+                } catch (_e) {}
+                setDragWidth(startWidth), setHighlight(!0);
+                const update = info(startWidth, active.height);
+                null === (_b = (_a = latest.current).onResize) || void 0 === _b || _b.call(_a, update), 
+                null === (_d = (_c = latest.current).onResizeStart) || void 0 === _d || _d.call(_c, update);
+            },
+            onPointerEnter: () => {
+                clearHighlightTimer(), timer.current = setTimeout(() => setHighlight(!0), isTouchDevice ? 0 : 350);
+            },
+            onPointerLeave: hideHighlight,
+            onFocus: () => {
+                clearHighlightTimer(), setHighlight(!0);
+            },
+            onBlur: event => {
+                event.currentTarget.removeAttribute("data-pointer-focus"), hideHighlight();
+            },
+            onPointerCancel: () => finish(!0),
+            style: {
+                display: closed || !drags ? "none" : "flex",
+                width: railWidth,
+                backgroundColor: null !== (_c = null == resizeHandle ? void 0 : resizeHandle.color) && void 0 !== _c ? _c : "transparent",
+                right: "right" === drags ? offset : void 0,
+                left: "left" === drags ? offset : void 0
+            },
+            children: [ dragHandle && !closed && jsxRuntime.jsx(DragHandle, Object.assign({}, dragHandleStyle)), jsxRuntime.jsx("span", {
+                className: css_highlight,
+                "data-active": highlight || void 0
+            }) ]
+        }) ]
+    }));
+}), DragHandle = React.memo(rawProps => {
+    const props = resolveColorProps.resolveColorProps(rawProps), {width: width = 6, height: height = 6, radius: radius = theme_corners.corners["corner-round"], stroke: stroke = 1, color: color = "var(--core-surface-primary-tint)", strokeColor: strokeColor = "var(--core-outline-secondary)"} = props, cssVars = React.useMemo(() => ({
+        "--drag-handle-width": `${width}px`,
+        "--drag-handle-height": `${height}px`,
+        "--drag-handle-radius": misc.setStyle(radius),
+        "--drag-handle-border": `${stroke}px`,
+        "--drag-handle-border-color": `${strokeColor}`,
+        "--drag-handle-bg": `${color}`
+    }), [ width, height, radius, stroke, color, strokeColor ]);
+    return jsxRuntime.jsx("div", {
+        className: css_handle,
+        style: cssVars
+    });
+});
+
+exports.DraggablePanel = DraggablePanel;

package/dist/cjs/chunks/DropDown-BcTjhAtE.js

@@ -0,0 +1,269 @@
+'use client';
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-B8JY5ZGw.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-PmT7cZzC.js"), theme_corners = require("../theme/corners.js");
+
+require("./resolveColor-DkYThq2J.js"), require("./broadcastChannel-DdPZ3LUB.js"), 
+require("./files-RYD9L_pI.js");
+
+var resolveColorProps = require("./resolveColorProps-DE1k1P-Z.js"), type_module = require("./type.module-Dk5b_rHG.js"), usePrefersReducedMotion = require("./usePrefersReducedMotion-GpD17CAE.js"), Icon = require("./Icon-COY7IZkK.js"), css = {
+    field: "DropDown-module_field__Me5dj",
+    message: "DropDown-module_message__msDvZ",
+    wrapper: "DropDown-module_wrapper__CyX0u",
+    face: "DropDown-module_face__6gyF3",
+    faceText: "DropDown-module_faceText__glhB3",
+    label: "DropDown-module_label__Mrwbp",
+    chevron: "DropDown-module_chevron__LkYsE",
+    select: "DropDown-module_select__mzNnv",
+    xs: "DropDown-module_xs__7L71q type-module_body-xs-regular__ZAFft",
+    s: "DropDown-module_s__vAxXD type-module_body-s-regular__vRHSP",
+    m: "DropDown-module_m__K6JPk type-module_body-m-regular__LuQBA",
+    l: "DropDown-module_l__Kib48 type-module_body-l-regular__lOYbg",
+    xl: "DropDown-module_xl__mwc0C type-module_body-xl-regular__pF2kC",
+    labelSlot: "DropDown-module_labelSlot__RRaeq",
+    separator: "DropDown-module_separator__2eu0p"
+};
+
+const emptyOptions = [], invalidChild = "DropDown children must be native <option> elements. Fragments and conditional options are allowed.";
+
+function optionText(children) {
+    let text = "";
+    return React.Children.forEach(children, child => {
+        if (null != child && "boolean" != typeof child) if ("string" != typeof child && "number" != typeof child && "bigint" != typeof child) {
+            if (!React.isValidElement(child) || child.type !== React.Fragment) throw new Error("DropDown option content must be plain text.");
+            text += optionText(child.props.children);
+        } else text += String(child);
+    }), text;
+}
+
+function collectOptions(children, elements) {
+    React.Children.forEach(children, child => {
+        if (null != child && "boolean" != typeof child && ("string" != typeof child || "" !== child.trim())) {
+            if (!React.isValidElement(child)) throw new Error(invalidChild);
+            if (child.type !== React.Fragment) {
+                if ("option" !== child.type) throw new Error(invalidChild);
+                elements.push(child);
+            } else collectOptions(child.props.children, elements);
+        }
+    });
+}
+
+function resolveOptions(items, children) {
+    if (void 0 !== items && null != children) throw new Error("DropDown accepts either options or <option> children, not both.");
+    if (null == children) return {
+        options: null != items ? items : emptyOptions,
+        elements: void 0
+    };
+    const elements = [];
+    collectOptions(children, elements);
+    return {
+        options: elements.map(element => {
+            var _a;
+            const props = element.props;
+            if (void 0 !== props.selected) throw new Error("Use DropDown value or defaultValue instead of selected on <option>.");
+            if (void 0 !== props.value && "string" != typeof props.value && "number" != typeof props.value) throw new Error("DropDown <option> values must be strings or numbers.");
+            const text = optionText(props.children).replace(/[\t\n\f\r ]+/g, " ").trim();
+            return {
+                value: void 0 === props.value ? text : String(props.value),
+                label: null !== (_a = props.label) && void 0 !== _a ? _a : text,
+                disabled: props.disabled
+            };
+        }),
+        elements: elements
+    };
+}
+
+const useClientLayoutEffect = "undefined" == typeof window ? React.useEffect : React.useLayoutEffect, withoutAria = attributes => Object.fromEntries(Object.entries(attributes).filter(([key]) => !key.startsWith("aria-") && "role" !== key));
+
+function resolveValueKey(value, valueKey) {
+    if (valueKey && null !== value && "object" == typeof value) return value[valueKey];
+}
+
+function formValue(option, index, valueKey) {
+    if (void 0 !== option.formValue) return option.formValue;
+    const value = option.value;
+    if ("string" == typeof value || "number" == typeof value || "boolean" == typeof value || "bigint" == typeof value) return String(value);
+    const key = resolveValueKey(value, valueKey);
+    return String("string" == typeof key || "number" == typeof key || "boolean" == typeof key || "bigint" == typeof key ? key : index);
+}
+
+function optionLabel(option) {
+    return void 0 !== option.label ? option.label : "object" == typeof option.value ? "Select an option" : String(option.value);
+}
+
+function DropDownComponent(rawProps) {
+    var _a, _b, _c, _d;
+    const props = resolveColorProps.resolveColorProps(rawProps), {name: name, inputName: inputName, inputId: inputId, inputAttributes: inputAttributes = {}, label: label, variant: variant = "simple", behavior: behavior = "persistent", labelSize: labelSize = "m", stackedGap: stackedGap = 2, stackedLabelTextSize: stackedLabelTextSize = "body-xs-regular", labelBackgroundColor: labelBackgroundColor = "var(--core-surface-primary)", tip: tip, errorMessage: errorMessage, textColorError: textColorError = "var(--feedback-warning)", labelColor: labelColor = "var(--core-text-primary)", textSize: textSize = "m", width: width = "100%", height: height = "auto", inline: inline = !1, value: value, defaultValue: defaultValue, valueKey: valueKey, options: optionItems, children: children, placeholder: placeholderProp, borderRadius: borderRadius = theme_corners.corners["corner-m"], backgroundColor: backgroundColor, iconColor: iconColor = "var(--core-text-primary)", textColor: textColor = "var(--core-text-primary)", textColorDisabled: textColorDisabled = "var(--core-text-disabled)", textColorPlaceholder: textColorPlaceholder = "var(--core-text-tertiary)", borderWidth: borderWidth = 1, borderColor: borderColor = "var(--core-outline-primary)", borderColorFocused: borderColorFocused = "var(--core-link-primary)", borderColorError: borderColorError = "var(--feedback-warning)", borderColorDisabled: borderColorDisabled = "var(--core-outline-primary)", padding: padding, paddingLeft: paddingLeft, paddingRight: paddingRight, paddingTop: paddingTop, paddingBottom: paddingBottom, borderStyle: borderStyle = "box", iconSize: iconSize = 20, disabled: disabled = !1, error: error = !1, gap: gap = 8, onChange: onChange, onChangeOption: onChangeOption, className: className, style: style} = props, spanAttributes = tslib_es6.__rest(props, [ "name", "inputName", "inputId", "inputAttributes", "label", "variant", "behavior", "labelSize", "stackedGap", "stackedLabelTextSize", "labelBackgroundColor", "tip", "errorMessage", "textColorError", "labelColor", "textSize", "width", "height", "inline", "value", "defaultValue", "valueKey", "options", "children", "placeholder", "borderRadius", "backgroundColor", "iconColor", "textColor", "textColorDisabled", "textColorPlaceholder", "borderWidth", "borderColor", "borderColorFocused", "borderColorError", "borderColorDisabled", "padding", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "borderStyle", "iconSize", "disabled", "error", "gap", "onChange", "onChangeOption", "className", "style" ]), {options: options, elements: optionElements} = React.useMemo(() => resolveOptions(optionItems, children), [ optionItems, children ]), placeholder = null != placeholderProp ? placeholderProp : "" === (null === (_a = options[0]) || void 0 === _a ? void 0 : _a.value), generatedId = React.useId(), id = inputId || generatedId, hasLabel = Boolean(null == label ? void 0 : label.trim()), ref = React.useRef(null), wrapperRef = React.useRef(null), faceRef = React.useRef(null), reduced = usePrefersReducedMotion.usePrefersReducedMotion(), message = null === (_b = error ? errorMessage : tip) || void 0 === _b ? void 0 : _b.trim(), messageId = `${id}-message`, initialValue = React.useRef(void 0 === defaultValue ? null === (_c = options[0]) || void 0 === _c ? void 0 : _c.value : defaultValue), [localSelection, setLocalSelection] = React.useState({
+        value: initialValue.current
+    }), localValue = localSelection.value, [isFocused, setIsFocused] = React.useState(!1), controlled = void 0 !== value, selectedValue = (() => {
+        var _a;
+        return controlled ? value : void 0 === localValue ? null === (_a = options[0]) || void 0 === _a ? void 0 : _a.value : localValue;
+    })(), index = null == selectedValue ? -1 : options.findIndex(option => function(left, right, valueKey) {
+        if (Object.is(left, right)) return !0;
+        const key = resolveValueKey(left, valueKey);
+        return void 0 !== key && Object.is(key, resolveValueKey(right, valueKey));
+    }(option.value, selectedValue, valueKey)), option = options[index], appearing = "stacked" === variant && "appear" === behavior && !reduced && hasLabel, collapsedLabel = appearing && (index < 0 || placeholder && ("" === selectedValue || 0 === index)), nativeValue = option ? formValue(option, index, valueKey) : "", latestNativeValue = React.useRef(nativeValue);
+    latestNativeValue.current = nativeValue, React.useEffect(() => {
+        !controlled && void 0 === localValue && options.length && setLocalSelection({
+            value: options[0].value
+        });
+    }, [ controlled, localValue, options ]), React.useEffect(() => {
+        const select = ref.current, form = null == select ? void 0 : select.form;
+        if (!select || !form) return;
+        let resetTimer;
+        const reset = event => {
+            clearTimeout(resetTimer), resetTimer = setTimeout(() => {
+                event.defaultPrevented || (controlled ? select.value = latestNativeValue.current : setLocalSelection({
+                    value: initialValue.current
+                }));
+            }, 0);
+        };
+        return form.addEventListener("reset", reset), () => {
+            clearTimeout(resetTimer), form.removeEventListener("reset", reset);
+        };
+    }, [ controlled, inputAttributes.form ]), React.useEffect(() => {
+        disabled && setIsFocused(!1);
+    }, [ disabled ]), useClientLayoutEffect(() => {
+        const wrapper = wrapperRef.current, face = faceRef.current;
+        if (!wrapper || !face) return;
+        const slot = face.querySelector("[data-label-slot]"), floatingLabel = null == slot ? void 0 : slot.querySelector("label"), measure = () => {
+            var _a, _b;
+            "outlined" === variant && floatingLabel && wrapper.style.setProperty("--dd-label-font-size", getComputedStyle(floatingLabel).fontSize), 
+            face.style.setProperty("--dd-column-top", `${face.offsetTop}px`);
+            const padding = getComputedStyle(wrapper), leftInset = Number.parseFloat(padding.paddingLeft) + Number.parseFloat(padding.borderLeftWidth), rightInset = Number.parseFloat(padding.paddingRight) + Number.parseFloat(padding.borderRightWidth);
+            if (null === (_a = wrapper.parentElement) || void 0 === _a || _a.style.setProperty("--dd-content-left", `${leftInset}px`), 
+            null === (_b = wrapper.parentElement) || void 0 === _b || _b.style.setProperty("--dd-content-right", `${rightInset}px`), 
+            "stacked" === variant && slot) {
+                const style = getComputedStyle(slot), space = (Number.parseFloat(style.height) || 0) + (Number.parseFloat(style.marginBottom) || 0);
+                wrapper.style.setProperty("--dd-label-space", `${space}px`);
+            }
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        return observer.observe(wrapper), observer.observe(face), slot && observer.observe(slot), 
+        () => observer.disconnect();
+    }, [ variant, label, labelSize, stackedLabelTextSize, stackedGap, padding, paddingLeft, paddingRight, paddingTop, paddingBottom, width, height, iconSize, message, style ]);
+    const getBorder = () => "none" === borderStyle ? "none" : `${misc.setStyle(borderWidth)} solid ${disabled ? borderColorDisabled : error ? borderColorError : isFocused ? borderColorFocused : borderColor}`, sidePadding = {};
+    null != paddingTop && (sidePadding.paddingTop = misc.setStyle(paddingTop)), null != paddingRight && (sidePadding.paddingRight = misc.setStyle(paddingRight)), 
+    null != paddingBottom && (sidePadding.paddingBottom = misc.setStyle(paddingBottom)), 
+    null != paddingLeft && (sidePadding.paddingLeft = misc.setStyle(paddingLeft));
+    const cssVars = {
+        "--dd-gap": misc.setStyle(gap),
+        "--dd-height": misc.setStyle(height),
+        "--dd-width": misc.setStyle(width),
+        "--dd-margin": inline ? "0 var(--spacing-xs)" : "0",
+        "--dd-border-radius": "box" === borderStyle ? misc.setStyle(borderRadius) : "0px",
+        "--dd-border": "box" === borderStyle ? getBorder() : "none",
+        "--dd-border-bottom": getBorder(),
+        "--dd-color": disabled ? textColorDisabled : placeholder && (collapsedLabel || index <= 0) ? textColorPlaceholder : textColor,
+        "--dd-bg-color": void 0 !== backgroundColor ? backgroundColor : "underline" === borderStyle ? "transparent" : "var(--core-surface-secondary)",
+        "--dd-padding": null != padding ? misc.setStyle(padding) : "none" === borderStyle ? "0 0 var(--spacing-s) 0" : "outlined" === variant ? "calc(var(--spacing-s) + var(--dd-label-font-size, 0px) / 2) var(--spacing-m) var(--spacing-s)" : "var(--spacing-s) calc(var(--spacing-m) - var(--spacing-xs)) var(--spacing-s) var(--spacing-m)",
+        "--dd-icon-size": misc.setStyle(iconSize),
+        "--dd-label-color": disabled ? textColorDisabled : labelColor,
+        "--dd-display": inline ? "inline-flex" : "flex",
+        "--dd-stacked-gap": misc.setStyle(Number.isFinite(stackedGap) ? Math.max(0, stackedGap) : 2),
+        "--dd-label-background": labelBackgroundColor
+    };
+    return jsxRuntime.jsxs("span", {
+        className: css.field,
+        style: cssVars,
+        children: [ jsxRuntime.jsxs("span", Object.assign({}, withoutAria(spanAttributes), {
+            ref: wrapperRef,
+            "data-variant": variant,
+            "data-appear": appearing || void 0,
+            "data-collapsed-label": collapsedLabel || void 0,
+            className: `${css.wrapper}${className ? ` ${className}` : ""}`,
+            style: Object.assign(Object.assign(Object.assign({}, style), cssVars), sidePadding),
+            children: [ hasLabel && "simple" === variant && jsxRuntime.jsx("label", {
+                className: `${css.label} ${css[labelSize]}`,
+                htmlFor: id,
+                children: label
+            }), hasLabel && "simple" === variant && jsxRuntime.jsx("span", {
+                className: `${css.separator} ${css[labelSize]}`,
+                "aria-hidden": "true",
+                children: "|"
+            }), jsxRuntime.jsxs("span", {
+                ref: faceRef,
+                className: `${css.face} ${css[textSize]}`,
+                children: [ hasLabel && "simple" !== variant && jsxRuntime.jsx("span", {
+                    className: css.labelSlot,
+                    "data-label-slot": !0,
+                    children: jsxRuntime.jsx("label", {
+                        className: `${css.label} ${null !== (_d = type_module.typeCss[stackedLabelTextSize]) && void 0 !== _d ? _d : type_module.typeCss["body-xs-regular"]}`,
+                        htmlFor: id,
+                        children: label
+                    })
+                }), jsxRuntime.jsx("span", {
+                    className: css.faceText,
+                    "aria-hidden": "true",
+                    children: (collapsedLabel ? label : option ? optionLabel(option).replace(/^--\s*/, "") : placeholder ? "Select an option" : "") || " "
+                }) ]
+            }), jsxRuntime.jsx("span", {
+                className: css.chevron,
+                "aria-hidden": "true",
+                children: jsxRuntime.jsx(Icon.Icon, {
+                    name: "arrows.chevron-down",
+                    size: iconSize,
+                    strokeColor: disabled ? textColorDisabled : iconColor
+                })
+            }), jsxRuntime.jsxs("select", Object.assign({}, withoutAria(inputAttributes), {
+                className: `${css.select} ${css[textSize]}`,
+                value: nativeValue,
+                ref: ref,
+                id: id,
+                name: name,
+                disabled: disabled,
+                "aria-label": (null == inputName ? void 0 : inputName.trim()) ? inputName.trim() : hasLabel ? void 0 : (null == name ? void 0 : name.trim()) || "Select an option",
+                "aria-invalid": error || void 0,
+                "aria-describedby": message ? messageId : void 0,
+                onFocus: event => {
+                    var _a;
+                    setIsFocused(!0), null === (_a = inputAttributes.onFocus) || void 0 === _a || _a.call(inputAttributes, event);
+                },
+                onBlur: event => {
+                    var _a;
+                    setIsFocused(!1), null === (_a = inputAttributes.onBlur) || void 0 === _a || _a.call(inputAttributes, event);
+                },
+                onChange: event => {
+                    var _a;
+                    if (disabled) return;
+                    const selectedIndex = null === (_a = event.currentTarget.selectedOptions[0]) || void 0 === _a ? void 0 : _a.getAttribute("data-index");
+                    if (null == selectedIndex) return;
+                    const nextIndex = Number(selectedIndex), next = options[nextIndex];
+                    next && !next.disabled && nextIndex !== index && (controlled || setLocalSelection({
+                        value: next.value
+                    }), null == onChange || onChange(next.value, next, nextIndex), null == onChangeOption || onChangeOption(next));
+                },
+                children: [ index < 0 && jsxRuntime.jsx("option", {
+                    value: "",
+                    hidden: !0,
+                    disabled: !0
+                }), options.map((item, i) => {
+                    const element = null == optionElements ? void 0 : optionElements[i], key = formValue(item, i, valueKey), attributes = {
+                        value: formValue(item, i, valueKey),
+                        "data-index": i,
+                        disabled: item.disabled
+                    };
+                    return element ? React.cloneElement(element, Object.assign(Object.assign({}, attributes), {
+                        key: key
+                    })) : jsxRuntime.jsx("option", Object.assign({}, attributes, {
+                        children: optionLabel(item)
+                    }), key);
+                }) ]
+            })) ]
+        })), message && jsxRuntime.jsx("span", {
+            id: messageId,
+            className: `${css.message} ${type_module.typeCss["body-xs-regular"]}`,
+            style: {
+                color: error ? textColorError : "var(--core-text-tertiary)"
+            },
+            children: message
+        }) ]
+    });
+}
+
+DropDownComponent.displayName = "DropDown";
+
+const DropDown = React.memo(DropDownComponent);
+
+exports.DropDown = DropDown;