@apple-pie/slice 0.0.5 → 0.0.7

package/dist/esm/chunks/DrggablePanel-Bg3UKK1k.mjs

@@ -0,0 +1,214 @@
+import { _ as __rest } from "./tslib.es6-c-7TIv71.mjs";
+
+import { jsxs, jsx } from "react/jsx-runtime";
+
+import React, { useRef, useState, useCallback, useEffect, useMemo } from "react";
+
+import { useTheme } from "../hooks/useTheme.mjs";
+
+import "../theme/colors.mjs";
+
+import "../hooks/useWindow.mjs";
+
+import { useObserveResize } from "../hooks/useObserveResize.mjs";
+
+import { p as pointerPosition } from "./utils-BQ1v7VE4.mjs";
+
+import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
+
+var css_panel = "DraggablePanel-module_panel__r-Dm- flexBox-module_columnStart__Kg8cV", css_content = "DraggablePanel-module_content__K1gRd flexBox-module_columnStart__Kg8cV", css_handle = "DraggablePanel-module_handle__yVrgS";
+
+styleInject(".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");
+
+const DraggablePanel = React.memo(props => {
+    const theme = useTheme(), {children: children, sizeConstraints: sizeConstraints = {
+        initial: 250,
+        min: 250,
+        max: 500
+    }, dragsRight: dragsRight = !0, isClosed: isClosed = !0, resizeHandle: resizeHandle = {
+        width: 10,
+        color: "transparent",
+        offsetX: !0
+    }, borderRight: borderRight = "1px solid var(--core-outline-primary)", borderLeft: borderLeft = null, bgColor: bgColor = "transparent", drags: drags = !0, isTouchDevice: isTouchDevice = !1, disableOnContext: disableOnContext = !0, dragHandle: dragHandle = !0, dragHandleStyle: dragHandleStyle, containerRef: containerRef, onResize: onResize = () => null, onResizeStart: onResizeStart = () => null, onResizeEnd: onResizeEnd = () => null} = props, divAttributes = __rest(props, [ "children", "sizeConstraints", "dragsRight", "isClosed", "resizeHandle", "borderRight", "borderLeft", "bgColor", "drags", "isTouchDevice", "disableOnContext", "dragHandle", "dragHandleStyle", "containerRef", "onResize", "onResizeStart", "onResizeEnd" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", handle = useRef(null), div = useRef(null), [isDragging, setIsDragging] = useState(!1), isOver = useRef(!1), gripper = Object.assign({}, resizeHandle), containerSize = useObserveResize(containerRef), [handleHighlight, setHandleHighlight] = useState(!1), [lastWidth, setLastWidth] = useState(null), [panelClosed, setPanelClosed] = useState(isClosed), [constraints, setConstraints] = useState(sizeConstraints), [contWidth, setContWidth] = useState(void 0), timer = useRef(null), startX = useRef(0), startWidth = useRef(0), divWidth = useRef(0), divHeight = useRef(0), deltaWidth = useRef(0), handleWindowResize = useCallback(() => {
+        (null == containerRef ? void 0 : containerRef.current) || setContWidth(window.innerWidth);
+    }, [ containerRef ]), handleMouseOver = useCallback(() => {
+        isOver.current = !0, setHighlight(!0);
+    }, []), handleMouseOut = useCallback(() => {
+        isOver.current = !1, isDragging || setHighlight(!1);
+    }, [ isDragging ]), handleFocus = useCallback(() => {
+        isOver.current = !0, setHighlight(!0);
+    }, []), handleBlur = useCallback(() => {
+        isOver.current = !1, isDragging || setHighlight(!1);
+    }, [ isDragging ]), handleTouchStart = useCallback(() => {
+        isOver.current = !0, setHighlight(!0);
+    }, []), handleTouchEnd = useCallback(() => {
+        isOver.current = !1, isDragging || setHighlight(!1);
+    }, [ isDragging ]);
+    useEffect(() => {
+        containerRef && containerSize.width > 0 && setContWidth(containerSize.width);
+    }, [ containerSize, containerRef ]), useEffect(() => (contWidth || setContWidth(window.innerWidth), 
+    globalThis.addEventListener("resize", handleWindowResize), () => globalThis.removeEventListener("resize", handleWindowResize)), []), 
+    useEffect(() => setPanelClosed(isClosed), [ isClosed ]);
+    const adjustCurrentWidth = useCallback(relConst => {
+        if ((null == div ? void 0 : div.current) && relConst.max) {
+            div.current.offsetWidth > relConst.max && (div.current.style.width = `${relConst.max}px`, 
+            divWidth.current = relConst.max, setLastWidth(relConst.max));
+        }
+    }, []);
+    useEffect(() => {
+        if (!contWidth) return;
+        const {min: min, max: max, initial: initial} = sizeConstraints, relativeConstraints = {
+            min: min,
+            max: max,
+            initial: initial
+        };
+        for (const [key, value] of Object.entries(sizeConstraints)) {
+            let calc = value;
+            calc <= 1 && calc >= 0 && (calc = contWidth * value), calc > 1 && calc < 50 && (calc = 50), 
+            relativeConstraints[key] = calc;
+        }
+        relativeConstraints.min < relativeConstraints.initial && (relativeConstraints.initial = relativeConstraints.min), 
+        setConstraints(relativeConstraints), adjustCurrentWidth(relativeConstraints);
+    }, [ sizeConstraints, contWidth, adjustCurrentWidth ]);
+    const setHighlight = useCallback(state => {
+        timer.current && clearTimeout(timer.current), state ? timer.current = setTimeout(() => {
+            setHandleHighlight(state);
+        }, isTouchDevice ? 0 : 350) : setHandleHighlight(!1);
+    }, [ isTouchDevice ]), getClientX = useCallback(e => pointerPosition(e), []), getNewWidth = useCallback(clientX => dragsRight ? startWidth.current + clientX - startX.current : startWidth.current - clientX + startX.current, [ dragsRight ]), canDrag = useCallback((newWidth, clientX) => {
+        if (null == constraints ? void 0 : constraints.min) {
+            if (newWidth <= constraints.min) return !1;
+            if (newWidth < constraints.min) return !1;
+        }
+        return !((null == constraints ? void 0 : constraints.max) && newWidth >= constraints.max && clientX - startX.current > 0);
+    }, [ constraints ]), doDrag = useCallback(e => {
+        if (null == div ? void 0 : div.current) {
+            e.stopPropagation(), e.preventDefault();
+            const el = div.current, clientX = getClientX(e), newWidth = getNewWidth(clientX);
+            if (!canDrag(newWidth, clientX)) return;
+            el.style.width = `${newWidth}px`, divWidth.current = newWidth, deltaWidth.current = clientX - startX.current, 
+            onResize({
+                div: div,
+                divWidth: divWidth.current,
+                divHeight: divHeight.current,
+                deltaWidth: deltaWidth.current
+            });
+        }
+        return !1;
+    }, [ onResize, canDrag, getNewWidth, getClientX ]), stopDrag = useCallback(() => {
+        if (setIsDragging(!1), document.documentElement.removeEventListener("mousemove", doDrag, !1), 
+        document.documentElement.removeEventListener("mouseup", stopDrag, !1), document.documentElement.removeEventListener("touchmove", doDrag, !1), 
+        document.documentElement.removeEventListener("touchend", stopDrag, !1), document.documentElement.style.userSelect = "auto", 
+        document.documentElement.style.webkitUserSelect = "auto", null == div ? void 0 : div.current) {
+            divWidth.current = div.current.offsetWidth, divHeight.current = div.current.offsetHeight, 
+            deltaWidth.current = 0;
+            const update = {
+                div: div,
+                divWidth: divWidth.current,
+                divHeight: divHeight.current,
+                deltaWidth: deltaWidth.current
+            };
+            onResize(update), onResizeEnd(update);
+        }
+        setLastWidth(divWidth.current), isOver.current || setHighlight(!1);
+    }, [ doDrag, onResizeEnd, onResize, setHighlight ]), initDrag = useCallback(e => {
+        if ((null == div ? void 0 : div.current) && document.defaultView) {
+            setIsDragging(!0);
+            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, !1), document.documentElement.addEventListener("mouseup", stopDrag, !1), 
+            document.documentElement.addEventListener("touchmove", doDrag, !1), document.documentElement.addEventListener("touchend", stopDrag, !1), 
+            document.documentElement.style.userSelect = "none", document.documentElement.style.webkitUserSelect = "none";
+            const update = {
+                div: div,
+                divWidth: divWidth.current,
+                divHeight: divHeight.current,
+                deltaWidth: deltaWidth.current
+            };
+            onResize(update), onResizeStart(update);
+        }
+    }, [ doDrag, stopDrag, onResize, onResizeStart ]);
+    useEffect(() => {
+        const hl = null == handle ? void 0 : handle.current;
+        return hl && drags && (hl.addEventListener("mousedown", initDrag, !1), hl.addEventListener("touchstart", initDrag, {
+            passive: !0
+        })), () => {
+            hl && (hl.removeEventListener("mousedown", initDrag, !1), hl.removeEventListener("touchstart", initDrag));
+        };
+    }, [ drags, initDrag ]);
+    const leftRightStyle = useMemo(() => dragsRight ? {
+        right: isTouchDevice ? -22 : -(gripper.width || 10) / 2
+    } : {
+        left: isTouchDevice ? -22 : -(gripper.width || 10) / 2
+    }, [ dragsRight, isTouchDevice, gripper.width ]), width = useMemo(() => drags ? panelClosed ? 0 : lastWidth || constraints.initial : "100%", [ drags, panelClosed, lastWidth, constraints.initial ]), cssVars = useMemo(() => ({
+        "--panel-bg": null != bgColor ? bgColor : "transparent"
+    }), [ bgColor ]);
+    return jsxs("div", Object.assign({
+        id: divId,
+        className: `${css_panel}${divClass}`,
+        ref: div,
+        onContextMenu: e => (disableOnContext && e.preventDefault(), !0),
+        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 ? borderRight : "none",
+            borderLeft: !panelClosed && borderLeft && drags ? borderLeft : "none"
+        })
+    }, 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({}, null != dragHandleStyle ? 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
+        }) ]
+    }));
+}), DragHandle = React.memo(props => {
+    const {width: width = 6, height: height = 6, radius: radius = 100, stroke: stroke = 1, color: color = "var(--core-surface-primary)", strokeColor: strokeColor = "var(--core-outline-primary)"} = props, cssVars = useMemo(() => ({
+        "--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-D7KyGLkM.mjs

@@ -0,0 +1,114 @@
+import { _ as __rest } from "./tslib.es6-c-7TIv71.mjs";
+
+import { jsx, jsxs } from "react/jsx-runtime";
+
+import React, { useState, useRef, useEffect, useCallback, useMemo } from "react";
+
+import { useTheme } from "../hooks/useTheme.mjs";
+
+import "../theme/colors.mjs";
+
+import "../hooks/useWindow.mjs";
+
+import { I as Icon } from "./_types-KZDzhaiK.mjs";
+
+import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
+
+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(".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_body-xl-regular__zDf-z {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-medium__R5GpK {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-bold__SI-hC {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-medium__jGIb2 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-bold__QFgN8 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\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: 500;\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: 600;\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: 500;\n\tfont-size: 30px;\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: 600;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-medium__PUi44 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-bold__1B6fk {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 36px;\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");
+
+const DropDown = React.memo(props => {
+    const theme = useTheme(), {name: name = "Select", width: width = "100%", height: height = "auto", selectedIndex: selectedIndex = 0, selectedValue: selectedValue = "", options: options = [], placeholder: placeholder = !0, validate: validate = !0, borderRadius: borderRadius = 4, bgColor: bgColor = "transparent", iconColor: iconColor = theme.current.colors["core-icon-primary"], paddingLeft: paddingLeft = "8px", paddingRight: paddingRight = "12px", paddingTops: paddingTops = "8px", iconSize: iconSize = 20, disabled: disabled = !1, unframed: unframed = !1, focused: focused = !1, gap: gap = 0, size: size = "medium", onChange: onChange = () => null, onValidate: onValidate = () => null, onFocus: onFocus = () => null, onBlur: 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" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [index, setIndex] = useState(selectedIndex), [selectedText, setSelectedText] = useState("Select an option"), [initiated, setInitiated] = useState(!1), [color, setColor] = useState(iconColor), ref = useRef(null);
+    useEffect(() => setColor(theme.current.colors["core-icon-primary"]), [ theme ]), 
+    useEffect(() => {
+        let valid = !0;
+        validate && placeholder && 0 === index && (valid = !1), initiated || (valid = !0), 
+        onValidate(valid);
+    }, [ index, validate, placeholder, initiated, onValidate ]), useEffect(() => {
+        focused && (null == ref ? void 0 : ref.current) && (setInitiated(!0), ref.current.click());
+    }, [ focused ]), useEffect(() => {
+        if (null == ref ? void 0 : ref.current) {
+            if (!(null == options ? void 0 : options[selectedIndex])) return;
+            const label = options[selectedIndex].label || "Select an option";
+            setIndex(selectedIndex), setSelectedText(label), ref.current.selectedIndex = selectedIndex;
+        }
+    }, [ selectedIndex, options ]), useEffect(() => {
+        if (!options || 0 === options.length || "" === selectedValue) return;
+        const foundIndex = options.findIndex(option => {
+            var _a, _b, _c;
+            return (null === (_a = null == option ? void 0 : option.value) || void 0 === _a ? void 0 : _a.toLowerCase()) === selectedValue.toString().toLowerCase() || (null === (_b = null == option ? void 0 : option.label) || void 0 === _b ? void 0 : _b.toLowerCase()) === selectedValue.toString().toLowerCase() || (null === (_c = null == option ? void 0 : option.alt) || void 0 === _c ? void 0 : _c.toLowerCase()) === selectedValue.toString().toLowerCase();
+        });
+        if (-1 !== foundIndex) {
+            const label = options[foundIndex].label || "Select an option";
+            setSelectedText(label), setIndex(foundIndex), ref.current && (ref.current.selectedIndex = foundIndex);
+        }
+    }, [ selectedValue, options ]);
+    const handleChange = useCallback(i => {
+        if (!options) return;
+        const label = options[i].label || "Select an option";
+        setIndex(i), setSelectedText(label), index !== i && onChange(i, options[i]), onBlur(options[i].label || "");
+    }, [ options, index, onChange, onBlur ]), handleFocus = useCallback(() => {
+        setInitiated(!0), onFocus();
+    }, [ onFocus ]), renderedOptions = useMemo(() => options ? options.map((option, i) => jsx("option", {
+        value: null == option ? void 0 : option.value,
+        onMouseUp: () => handleChange(i),
+        children: null == option ? void 0 : option.label
+    }, `${null == option ? void 0 : option.value}_${i}`)) : null, [ options, handleChange ]), displayText = useMemo(() => selectedText.replace("-- ", ""), [ selectedText ]), handleMouseDown = useCallback(e => {
+        disabled && e.preventDefault(), handleFocus();
+    }, [ disabled, handleFocus ]), handleSelectChange = useCallback(e => {
+        handleChange(e.target.selectedIndex);
+    }, [ handleChange ]), getSize = useCallback(value => "string" == typeof value ? value : `${value}px`, []), cssVars = useMemo(() => ({
+        "--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": null != bgColor ? 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 && 0 === index ? "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 };

package/dist/esm/chunks/ErrorSummary-CZw06dSh.mjs

@@ -0,0 +1,68 @@
+import { _ as __rest } from "./tslib.es6-c-7TIv71.mjs";
+
+import { jsxs, jsx } from "react/jsx-runtime";
+
+import { AnimatePresence, motion } from "motion/react";
+
+import React, { useMemo } from "react";
+
+import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
+
+var css_errorBox = "ErrorSummary-module_errorBox__-R7XM flexBox-module_columnStart__Kg8cV type-module_body-m-regular__Qtp5G", css_error = "ErrorSummary-module_error__YCQLh flexBox-module_columnStart__Kg8cV", css_p = "ErrorSummary-module_p__lbLpS type-module_body-m-regular__Qtp5G", css_strong = "ErrorSummary-module_strong__XVtAe type-module_body-m-bold__0lZ3I", css_ul = "ErrorSummary-module_ul__d0xoc", css_li = "ErrorSummary-module_li__jym6S type-module_body-m-regular__Qtp5G";
+
+styleInject(".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_body-xl-regular__zDf-z {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-medium__R5GpK {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-bold__SI-hC {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-medium__jGIb2 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-bold__QFgN8 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\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: 500;\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: 600;\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: 500;\n\tfont-size: 30px;\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: 600;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-medium__PUi44 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-bold__1B6fk {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.ErrorSummary-module_errorBox__-R7XM {\n\twidth: 100%;\n\tbackground: var(--core-surface-secondary);\n\tcolor: var(--feedback-warning);\n\tborder: 1px solid var(--feedback-warning);\n\tborder-radius: 4px;\n\tpadding: 0 16px 16px 16px !important;\n\toverflow: hidden;\n\tmargin-bottom: 44px !important;\n}\n\n.ErrorSummary-module_error__YCQLh {\n\twidth: 100%;\n}\n\n.ErrorSummary-module_p__lbLpS {\n\tmargin: 0;\n\tpadding: 16px 0 0 0;\n}\n\n.ErrorSummary-module_strong__XVtAe {\n}\n\n.ErrorSummary-module_ul__d0xoc {\n\tlist-style-type: none;\n\tlist-style-position: outside;\n\tmargin: 0;\n\tpadding: 0;\n}\n\n.ErrorSummary-module_li__jym6S {\n\tmargin: 3px 0 3px 0;\n\tline-height: 1.2em;\n\tpadding: 0;\n}\n");
+
+const ErrorSummary = React.memo(props => {
+    const {entries: entries, errors: errors = []} = props, divAttributes = __rest(props, [ "entries", "errors" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", variants = useMemo(() => ({
+        enter: {
+            opacity: 0,
+            maxHeight: 0
+        },
+        animate: {
+            opacity: 1,
+            maxHeight: 500
+        },
+        exit: {
+            opacity: 0,
+            maxHeight: 0
+        }
+    }), []), transition = useMemo(() => ({
+        ease: "easeInOut",
+        duration: .25
+    }), []), renderedErrors = useMemo(() => entries ? entries.map((error, index) => {
+        var _a;
+        return errors.includes(index) || errors.includes(error.id) ? jsxs("div", {
+            className: css_error,
+            children: [ jsx("p", {
+                className: css_p,
+                children: jsx("strong", {
+                    className: css_strong,
+                    children: error.title
+                })
+            }), jsx("ul", {
+                className: css_ul,
+                children: null === (_a = error.bullets) || void 0 === _a ? void 0 : _a.map((bullet, index) => jsx("li", {
+                    className: css_li,
+                    children: bullet
+                }, `${error.title}_bullet_${index}`))
+            }) ]
+        }, `${error.id}_${index}`) : null;
+    }) : null, [ entries, errors ]);
+    return jsx(AnimatePresence, {
+        initial: !1,
+        children: entries && errors && errors.length > 0 && jsx(motion.div, Object.assign({
+            id: divId,
+            className: `${css_errorBox}${divClass}`,
+            style: divStyle,
+            initial: "enter",
+            animate: "animate",
+            exit: "exit",
+            variants: variants,
+            transition: transition
+        }, rest, {
+            children: renderedErrors
+        }))
+    });
+});
+
+export { ErrorSummary as E };