@apple-pie/slice 0.0.1 → 0.0.3

package/dist/esm/chunks/DrggablePanel-CYYwTmFd.js

@@ -0,0 +1,300 @@
+import { _ as __rest } from './tslib.es6-0pkUdtrF.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useRef, useState, useCallback, useEffect, useMemo } from 'react';
+import { useTheme } from '../hooks/useTheme.js';
+import '../theme/colors.js';
+import '../hooks/useWindow.js';
+import { useObserveResize } from '../hooks/useObserveResize.js';
+import { p as pointerPosition } from './utils-BRZK2Drn.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+
+var css_248z = ".flexBox-module_row__PWxbe {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__27lKK {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__nJZnW {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__dHcOU {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__MP2Xd {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__Kg8cV {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__zcmtk {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__157yI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__u2nwI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}\n\n.DraggablePanel-module_panel__r-Dm- {\n\tposition: relative;\n\tbackground-color: var(--panel-bg);\n}\n\n.DraggablePanel-module_content__K1gRd {\n\twidth: 100%;\n\theight: 100%;\n\toverflow: hidden;\n}\n\n.DraggablePanel-module_handle__yVrgS {\n\twidth: var(--drag-handle-width);\n\theight: var(--drag-handle-height);\n\tmin-width: var(--drag-handle-width);\n\tmin-height: var(--drag-handle-height);\n\tborder-radius: var(--drag-handle-radius);\n\tborder: var(--drag-handle-border) solid var(--drag-handle-border-color);\n\tbackground: var(--drag-handle-bg);\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translateX(-50%) translateY(-50%);\n\tz-index: 15000;\n}\n";
+var css = {"panel":"DraggablePanel-module_panel__r-Dm- flexBox-module_columnStart__Kg8cV","content":"DraggablePanel-module_content__K1gRd flexBox-module_columnStart__Kg8cV","handle":"DraggablePanel-module_handle__yVrgS"};
+styleInject(css_248z);
+
+const MIN_SIZE = 50;
+const DraggablePanel = React.memo((props) => {
+    const theme = useTheme();
+    const { children, sizeConstraints = { initial: 250, min: 250, max: 500 }, dragsRight = true, isClosed = true, resizeHandle = {
+        width: 10,
+        color: 'transparent',
+        offsetX: true,
+    }, borderRight = '1px solid var(--core-outline-primary)', borderLeft = null, bgColor = 'transparent', drags = true, isTouchDevice = false, disableOnContext = true, dragHandle = true, dragHandleStyle, containerRef, onResize = () => null, onResizeStart = () => null, onResizeEnd = () => null } = props, divAttributes = __rest(props, ["children", "sizeConstraints", "dragsRight", "isClosed", "resizeHandle", "borderRight", "borderLeft", "bgColor", "drags", "isTouchDevice", "disableOnContext", "dragHandle", "dragHandleStyle", "containerRef", "onResize", "onResizeStart", "onResizeEnd"]);
+    const { id: divId, className, style } = divAttributes, rest = __rest(divAttributes, ["id", "className", "style"]);
+    const divStyle = style !== null && style !== void 0 ? style : {};
+    const divClass = className ? ` ${className}` : '';
+    const handle = useRef(null);
+    const div = useRef(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const isOver = useRef(false);
+    const gripper = Object.assign({}, resizeHandle);
+    const containerSize = useObserveResize(containerRef);
+    const [handleHighlight, setHandleHighlight] = useState(false);
+    const [lastWidth, setLastWidth] = useState(null);
+    const [panelClosed, setPanelClosed] = useState(isClosed);
+    const [constraints, setConstraints] = useState(sizeConstraints);
+    const [contWidth, setContWidth] = useState(undefined);
+    const timer = useRef(null);
+    const startX = useRef(0);
+    const startWidth = useRef(0);
+    const divWidth = useRef(0);
+    const divHeight = useRef(0);
+    const deltaWidth = useRef(0);
+    // handle window resize call back - use the window object only if containerRef is undefined
+    const handleWindowResize = useCallback(() => {
+        if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current))
+            setContWidth(window.innerWidth);
+    }, [containerRef]);
+    const handleMouseOver = useCallback(() => {
+        isOver.current = true;
+        setHighlight(true);
+    }, []);
+    const handleMouseOut = useCallback(() => {
+        isOver.current = false;
+        if (!isDragging)
+            setHighlight(false);
+    }, [isDragging]);
+    const handleFocus = useCallback(() => {
+        isOver.current = true;
+        setHighlight(true);
+    }, []);
+    const handleBlur = useCallback(() => {
+        isOver.current = false;
+        if (!isDragging)
+            setHighlight(false);
+    }, [isDragging]);
+    const handleTouchStart = useCallback(() => {
+        isOver.current = true;
+        setHighlight(true);
+    }, []);
+    const handleTouchEnd = useCallback(() => {
+        isOver.current = false;
+        if (!isDragging)
+            setHighlight(false);
+    }, [isDragging]);
+    // handle container resize - if continerRef and width more than 0 use this to set container size
+    useEffect(() => {
+        if (!containerRef)
+            return;
+        if (containerSize.width > 0)
+            setContWidth(containerSize.width);
+    }, [containerSize, containerRef]);
+    // listen to then window resize event
+    // biome-ignore lint/correctness/useExhaustiveDependencies: on mount only
+    useEffect(() => {
+        if (!contWidth)
+            setContWidth(window.innerWidth);
+        globalThis.addEventListener('resize', handleWindowResize);
+        return () => globalThis.removeEventListener('resize', handleWindowResize);
+    }, []);
+    // close/open on prop change
+    useEffect(() => setPanelClosed(isClosed), [isClosed]);
+    // on constraints update, check and adjust div width to not exceed max
+    const adjustCurrentWidth = useCallback((relConst) => {
+        if ((div === null || div === void 0 ? void 0 : div.current) && relConst.max) {
+            const currentWidth = div.current.offsetWidth;
+            if (currentWidth > relConst.max) {
+                div.current.style.width = `${relConst.max}px`;
+                divWidth.current = relConst.max;
+                setLastWidth(relConst.max);
+            }
+        }
+    }, []);
+    // reset constraints on prop changes
+    useEffect(() => {
+        if (!contWidth)
+            return;
+        const { min, max, initial } = sizeConstraints;
+        const relativeConstraints = { min, max, initial };
+        for (const [key, value] of Object.entries(sizeConstraints)) {
+            let calc = value;
+            if (calc <= 1 && calc >= 0)
+                calc = contWidth * value; // handle "percent" values
+            if (calc > 1 && calc < MIN_SIZE)
+                calc = MIN_SIZE; // ensure values no smaller than MIN_SIZE
+            relativeConstraints[key] = calc;
+        }
+        if (relativeConstraints.min < relativeConstraints.initial) {
+            relativeConstraints.initial = relativeConstraints.min; // ensure "initial" is not smaller than "min"
+        }
+        setConstraints(relativeConstraints);
+        adjustCurrentWidth(relativeConstraints);
+    }, [sizeConstraints, contWidth, adjustCurrentWidth]);
+    // callback for hilight when hovering over the resize handle
+    const setHighlight = useCallback((state) => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        if (state) {
+            timer.current = setTimeout(() => {
+                setHandleHighlight(state);
+            }, isTouchDevice ? 0 : 350);
+        }
+        else
+            setHandleHighlight(false);
+    }, [isTouchDevice]);
+    // get the current mouse X position using touch or mouse event
+    const getClientX = useCallback((e) => {
+        return pointerPosition(e);
+    }, []);
+    // calculate the drag amount based on starting point and new client x point
+    const getNewWidth = useCallback((clientX) => {
+        return dragsRight
+            ? startWidth.current + clientX - startX.current
+            : startWidth.current - clientX + startX.current;
+    }, [dragsRight]);
+    // check constraints to prevent over dragging
+    const canDrag = useCallback((newWidth, clientX) => {
+        if (constraints === null || constraints === void 0 ? void 0 : constraints.min) {
+            if (newWidth <= constraints.min)
+                return false;
+            if (newWidth < constraints.min)
+                return false;
+        }
+        if (constraints === null || constraints === void 0 ? void 0 : constraints.max) {
+            if (newWidth >= constraints.max) {
+                if (clientX - startX.current > 0)
+                    return false;
+            }
+        }
+        return true;
+    }, [constraints]);
+    // process drag
+    const doDrag = useCallback((e) => {
+        if (div === null || div === void 0 ? void 0 : div.current) {
+            e.stopPropagation();
+            e.preventDefault();
+            const el = div.current;
+            const clientX = getClientX(e);
+            const newWidth = getNewWidth(clientX);
+            if (!canDrag(newWidth, clientX))
+                return;
+            el.style.width = `${newWidth}px`;
+            divWidth.current = newWidth;
+            deltaWidth.current = clientX - startX.current;
+            onResize({
+                div,
+                divWidth: divWidth.current,
+                divHeight: divHeight.current,
+                deltaWidth: deltaWidth.current,
+            });
+        }
+        return false;
+    }, [onResize, canDrag, getNewWidth, getClientX]);
+    // handle stopping drag
+    const stopDrag = useCallback(() => {
+        setIsDragging(false);
+        document.documentElement.removeEventListener('mousemove', doDrag, false);
+        document.documentElement.removeEventListener('mouseup', stopDrag, false);
+        document.documentElement.removeEventListener('touchmove', doDrag, false);
+        document.documentElement.removeEventListener('touchend', stopDrag, false);
+        document.documentElement.style.userSelect = 'auto';
+        // noinspection JSDeprecatedSymbols
+        document.documentElement.style.webkitUserSelect = 'auto'; // reuqired for safari / iOS
+        if (div === null || div === void 0 ? void 0 : div.current) {
+            divWidth.current = div.current.offsetWidth;
+            divHeight.current = div.current.offsetHeight;
+            deltaWidth.current = 0;
+            const update = {
+                div,
+                divWidth: divWidth.current,
+                divHeight: divHeight.current,
+                deltaWidth: deltaWidth.current,
+            };
+            onResize(update);
+            onResizeEnd(update);
+        }
+        setLastWidth(divWidth.current);
+        if (!isOver.current)
+            setHighlight(false);
+    }, [doDrag, onResizeEnd, onResize, setHighlight]);
+    // handle starting drag
+    const initDrag = useCallback((e) => {
+        if ((div === null || div === void 0 ? void 0 : div.current) && document.defaultView) {
+            setIsDragging(true);
+            const el = div.current;
+            divWidth.current = div.current.offsetWidth;
+            divHeight.current = div.current.offsetHeight;
+            deltaWidth.current = 0;
+            startX.current = pointerPosition(e);
+            startWidth.current = Number.parseInt(document.defaultView.getComputedStyle(el).width, 10);
+            document.documentElement.addEventListener('mousemove', doDrag, false);
+            document.documentElement.addEventListener('mouseup', stopDrag, false);
+            document.documentElement.addEventListener('touchmove', doDrag, false);
+            document.documentElement.addEventListener('touchend', stopDrag, false);
+            document.documentElement.style.userSelect = 'none';
+            // noinspection JSDeprecatedSymbols
+            document.documentElement.style.webkitUserSelect = 'none'; // reuqired for safari / iOS
+            const update = {
+                div,
+                divWidth: divWidth.current,
+                divHeight: divHeight.current,
+                deltaWidth: deltaWidth.current,
+            };
+            onResize(update);
+            onResizeStart(update);
+        }
+    }, [doDrag, stopDrag, onResize, onResizeStart]);
+    useEffect(() => {
+        const hl = handle === null || handle === void 0 ? void 0 : handle.current;
+        if (hl && drags) {
+            hl.addEventListener('mousedown', initDrag, false);
+            hl.addEventListener('touchstart', initDrag, { passive: true });
+        }
+        return () => {
+            if (hl) {
+                hl.removeEventListener('mousedown', initDrag, false);
+                hl.removeEventListener('touchstart', initDrag);
+            }
+        };
+    }, [drags, initDrag]);
+    const leftRightStyle = useMemo(() => {
+        if (dragsRight) {
+            return { right: isTouchDevice ? -22 : -((gripper.width || 10) / 2) };
+        }
+        return { left: isTouchDevice ? -22 : -((gripper.width || 10) / 2) };
+    }, [dragsRight, isTouchDevice, gripper.width]);
+    const width = useMemo(() => {
+        if (!drags)
+            return '100%';
+        if (panelClosed)
+            return 0;
+        if (lastWidth)
+            return lastWidth;
+        return constraints.initial;
+    }, [drags, panelClosed, lastWidth, constraints.initial]);
+    const cssVars = useMemo(() => {
+        return {
+            '--panel-bg': bgColor !== null && bgColor !== void 0 ? bgColor : 'transparent',
+        };
+    }, [bgColor]);
+    return (jsxs("div", Object.assign({ id: divId, className: `${css.panel}${divClass}`, ref: div, onContextMenu: (e) => {
+            if (disableOnContext)
+                e.preventDefault();
+            return true;
+        }, style: Object.assign(Object.assign(Object.assign({}, divStyle), cssVars), { overflow: 'visible', width: width, height: '100%', maxWidth: drags ? constraints.max : 'unset', transition: isDragging ? '' : 'width 0.2s ease', borderRight: panelClosed || !borderRight || !drags ? 'none' : borderRight, borderLeft: panelClosed || !borderLeft || !drags ? 'none' : borderLeft }) }, rest, { children: [jsxs("div", { ref: handle, style: Object.assign(Object.assign({ position: 'absolute', boxSizing: 'border-box', display: panelClosed || !drags ? 'none' : 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1, top: 0 }, leftRightStyle), { bottom: 0, width: isTouchDevice ? 44 : gripper.width, backgroundColor: resizeHandle.color, cursor: 'col-resize', overflow: 'visible' }), onMouseOver: handleMouseOver, onMouseOut: handleMouseOut, onFocus: handleFocus, onBlur: handleBlur, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, children: [dragHandle && !panelClosed && (jsx(DragHandle, Object.assign({}, (dragHandleStyle !== null && dragHandleStyle !== void 0 ? dragHandleStyle : {})))), jsx("div", { style: {
+                            backgroundColor: handleHighlight
+                                ? theme.current.colors['core-outline-primary']
+                                : 'transparent',
+                            flex: 1,
+                            maxWidth: 3,
+                            height: '100%',
+                            pointerEvents: 'none',
+                            transition: 'background-color 0.2s ease',
+                        } })] }), jsx("div", { className: css.content, children: children })] })));
+});
+const DragHandle = React.memo((props) => {
+    const { width = 6, height = 6, radius = 100, stroke = 1, color = 'var(--core-surface-primary)', strokeColor = 'var(--core-outline-primary)', } = props;
+    const cssVars = useMemo(() => {
+        return {
+            '--drag-handle-width': `${width}px`,
+            '--drag-handle-height': `${height}px`,
+            '--drag-handle-radius': `${radius}px`,
+            '--drag-handle-border': `${stroke}px`,
+            '--drag-handle-border-color': `${strokeColor}`,
+            '--drag-handle-bg': `${color}`,
+        };
+    }, [width, height, radius, stroke, color, strokeColor]);
+    return jsx("div", { className: css.handle, style: cssVars });
+});
+
+export { DraggablePanel as D };

package/dist/esm/chunks/DropDown-D4t6EhKL.js

@@ -0,0 +1,152 @@
+import { _ as __rest } from './tslib.es6-0pkUdtrF.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { useTheme } from '../hooks/useTheme.js';
+import '../theme/colors.js';
+import '../hooks/useWindow.js';
+import { I as Icon } from './_types-BaYeLEWK.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+
+var css_248z = ".flexBox-module_row__PWxbe {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__27lKK {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__nJZnW {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__dHcOU {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__MP2Xd {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__Kg8cV {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__zcmtk {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__157yI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__u2nwI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.type-module_body-xs-regular__QWEzl {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__FxEAv {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__rf7AV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__8-FO- {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__qyYq- {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__7GQ5Z {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__Qtp5G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__Ieh9K {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__0lZ3I {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__Ar4d3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__6tV1n {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__I8Q1v {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-bold__QFgN8 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 650;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-medium__jGIb2 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 560;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-bold__tdBSi {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 650;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-medium__-7Uyu {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 560;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-medium__8hGYF {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 560;\n\tfont-size: 28px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-bold__Cryjg {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 650;\n\tfont-size: 28px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.DropDown-module_wrapper__56asG {\n\tposition: relative;\n\tgap: var(--dd-gap);\n\tmin-width: var(--dd-width);\n\twidth: var(--dd-width);\n\tborder-radius: var(--dd-border-radius);\n\tbackground-color: var(--dd-bg-color);\n\tbox-shadow: 0 0 0 var(--dd-box-shadow-size) var(--dd-border-color);\n\tpadding: var(--dd-padding-tops) var(--dd-padding-left) var(--dd-padding-tops)\n\t\tvar(--dd-padding-right) !important;\n\ttransition: all 0.2s ease-in-out 0s;\n}\n\n.DropDown-module_face__kF56R {\n\tflex: 1;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: 1;\n\t-webkit-box-orient: vertical;\n\ttext-overflow: ellipsis;\n\tword-break: break-all;\n\tcolor: var(--dd-color);\n}\n\n.DropDown-module_small__QYoM4 {\n}\n\n.DropDown-module_medium__FrKVH {\n}\n\n.DropDown-module_large__O1hDm {\n}\n\n.DropDown-module_chevron__upYr7 {\n\tmin-height: var(--dd-icon-size);\n\tmax-height: var(--dd-icon-size);\n\tmin-width: var(--dd-icon-size);\n\tmax-width: var(--dd-icon-size);\n}\n\n.DropDown-module_select__1rQRA {\n\tposition: absolute;\n\topacity: 0;\n\twidth: 100%;\n\theight: 100%;\n\tfont-size: 14px;\n\tbackground-color: #1f99cd;\n\tbackground-position: right 10px center;\n\tbackground-repeat: no-repeat;\n\tbackground-size: auto 50%;\n\tborder: none;\n\toutline: none;\n\t-moz-appearance: none;\n\t-webkit-appearance: none;\n\tappearance: none;\n\t&::-ms-expand {\n\t\tdisplay: none;\n\t}\n}\n";
+var css = {"wrapper":"DropDown-module_wrapper__56asG flexBox-module_rowStart__nJZnW","face":"DropDown-module_face__kF56R flexBox-module_rowStart__nJZnW","small":"DropDown-module_small__QYoM4 type-module_body-s-regular__8-FO-","medium":"DropDown-module_medium__FrKVH type-module_body-m-regular__Qtp5G","large":"DropDown-module_large__O1hDm type-module_body-l-regular__Ar4d3","chevron":"DropDown-module_chevron__upYr7 flexBox-module_rowStart__nJZnW","select":"DropDown-module_select__1rQRA"};
+styleInject(css_248z);
+
+const DropDown = React.memo((props) => {
+    const theme = useTheme();
+    const { name = 'Select', width = '100%', height = 'auto', selectedIndex = 0, selectedValue = '', options = [], placeholder = true, validate = true, borderRadius = 4, bgColor = 'transparent', iconColor = theme.current.colors['core-icon-primary'], paddingLeft = '8px', paddingRight = '12px', paddingTops = '8px', iconSize = 20, disabled = false, unframed = false, focused = false, gap = 0, size = 'medium', onChange = () => null, onValidate = () => null, onFocus = () => null, onBlur = () => null } = props, divAttributes = __rest(props, ["name", "width", "height", "selectedIndex", "selectedValue", "options", "placeholder", "validate", "borderRadius", "bgColor", "iconColor", "paddingLeft", "paddingRight", "paddingTops", "iconSize", "disabled", "unframed", "focused", "gap", "size", "onChange", "onValidate", "onFocus", "onBlur"]);
+    const { id: divId, className, style } = divAttributes, rest = __rest(divAttributes, ["id", "className", "style"]);
+    const divStyle = style !== null && style !== void 0 ? style : {};
+    const divClass = className ? ` ${className}` : '';
+    const [index, setIndex] = useState(selectedIndex);
+    const [selectedText, setSelectedText] = useState('Select an option');
+    const [initiated, setInitiated] = useState(false);
+    const [color, setColor] = useState(iconColor);
+    const ref = useRef(null);
+    useEffect(() => setColor(theme.current.colors['core-icon-primary']), [theme]);
+    // validate selection and if there's a placeholder
+    // with a validate flag, set error state and event error
+    useEffect(() => {
+        let valid = true;
+        if (validate && placeholder && index === 0)
+            valid = false;
+        if (!initiated)
+            valid = true;
+        onValidate(valid);
+    }, [index, validate, placeholder, initiated, onValidate]);
+    // set focus
+    useEffect(() => {
+        if (focused && (ref === null || ref === void 0 ? void 0 : ref.current)) {
+            setInitiated(true);
+            ref.current.click();
+        }
+    }, [focused]);
+    // set selected by index
+    useEffect(() => {
+        if (ref === null || ref === void 0 ? void 0 : ref.current) {
+            if (!(options === null || options === void 0 ? void 0 : options[selectedIndex]))
+                return;
+            const label = options[selectedIndex].label || 'Select an option';
+            setIndex(selectedIndex);
+            setSelectedText(label);
+            ref.current.selectedIndex = selectedIndex;
+        }
+    }, [selectedIndex, options]);
+    // set selected by value - FIXED: potential infinite loop
+    useEffect(() => {
+        if (!options || options.length === 0 || selectedValue === '')
+            return;
+        const foundIndex = options.findIndex((option) => {
+            var _a, _b, _c;
+            return ((_a = option === null || option === void 0 ? void 0 : option.value) === null || _a === void 0 ? void 0 : _a.toLowerCase()) ===
+                selectedValue.toString().toLowerCase() ||
+                ((_b = option === null || option === void 0 ? void 0 : option.label) === null || _b === void 0 ? void 0 : _b.toLowerCase()) ===
+                    selectedValue.toString().toLowerCase() ||
+                ((_c = option === null || option === void 0 ? void 0 : option.alt) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === selectedValue.toString().toLowerCase();
+        });
+        if (foundIndex !== -1) {
+            const label = options[foundIndex].label || 'Select an option';
+            setSelectedText(label);
+            setIndex(foundIndex);
+            if (ref.current)
+                ref.current.selectedIndex = foundIndex;
+        }
+    }, [selectedValue, options]);
+    // memo on change
+    const handleChange = useCallback((i) => {
+        if (!options)
+            return;
+        const label = options[i].label || 'Select an option';
+        setIndex(i);
+        setSelectedText(label);
+        if (index !== i)
+            onChange(i, options[i]);
+        onBlur(options[i].label || '');
+    }, [options, index, onChange, onBlur]);
+    // memo focus
+    const handleFocus = useCallback(() => {
+        setInitiated(true);
+        onFocus();
+    }, [onFocus]);
+    // Memoize renderOptions
+    const renderedOptions = useMemo(() => {
+        if (!options)
+            return null;
+        return options.map((option, i) => (jsx("option", { value: option === null || option === void 0 ? void 0 : option.value, onMouseUp: () => handleChange(i), children: option === null || option === void 0 ? void 0 : option.label }, `${option === null || option === void 0 ? void 0 : option.value}_${i}`)));
+    }, [options, handleChange]);
+    // Memoize displayed text
+    const displayText = useMemo(() => selectedText.replace('-- ', ''), [selectedText]);
+    // Memoize handleMouseDown
+    const handleMouseDown = useCallback((e) => {
+        if (disabled)
+            e.preventDefault();
+        handleFocus();
+    }, [disabled, handleFocus]);
+    // Memoize onChange handler
+    const handleSelectChange = useCallback((e) => {
+        handleChange(e.target.selectedIndex);
+    }, [handleChange]);
+    const getSize = useCallback((value) => {
+        if (typeof value === 'string')
+            return value;
+        return `${value}px`;
+    }, []);
+    const cssVars = useMemo(() => {
+        return {
+            '--dd-gap': `${gap}px`,
+            '--dd-height': `${getSize(height)}`,
+            '--dd-width': `${getSize(width)}`,
+            '--dd-margin': '8px',
+            '--dd-border-radius': borderRadius ? `${borderRadius}px` : '4px',
+            '--dd-box-shadow-size': unframed ? '0' : '1px',
+            '--dd-border-color': unframed
+                ? 'transparent'
+                : 'var(--core-outline-primary)',
+            '--dd-bg-color': bgColor !== null && bgColor !== void 0 ? bgColor : 'transparent',
+            '--dd-padding-left': unframed ? '0' : `${getSize(paddingLeft)}`,
+            '--dd-padding-right': unframed ? '0' : `${getSize(paddingRight)}`,
+            '--dd-padding-tops': unframed ? '0' : `${getSize(paddingTops)}`,
+            '--dd-icon-size': `${iconSize}px`,
+            '--dd-color': placeholder && index === 0
+                ? 'var(--core-text-tertiary)'
+                : 'var(--core-text-primary)',
+        };
+    }, [
+        gap,
+        height,
+        width,
+        borderRadius,
+        bgColor,
+        paddingLeft,
+        paddingRight,
+        paddingTops,
+        unframed,
+        placeholder,
+        iconSize,
+        index,
+        getSize,
+    ]);
+    return (jsxs("div", Object.assign({ id: divId, className: `${css.wrapper}${divClass}`, style: Object.assign(Object.assign({}, divStyle), cssVars) }, rest, { children: [jsx("div", { className: `${css.face} ${css[size]}`, children: displayText }), jsx("div", { className: css.chevron, children: jsx(Icon, { name: "chevron down", size: iconSize, strokeColor: color }) }), jsx("select", { className: css.select, defaultValue: index, ref: ref, onFocus: handleFocus, onMouseDown: handleMouseDown, onChange: handleSelectChange, "aria-label": name, children: renderedOptions })] })));
+});
+DropDown.displayName = 'DropDown';
+
+export { DropDown as D };