@apple-pie/slice 0.0.5 → 0.0.7

package/dist/cjs/chunks/Chip-CPHF1zn-.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+
+require("../theme/colors.js"), require("../hooks/useWindow.js");
+
+var _types = require("./_types-B5xXv4NA.js"), sharedTypes = require("./sharedTypes-gCECyn2N.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css = {
+    chip: "Chip-module_chip__vVT0i flexBox-module_row__PWxbe",
+    icon: "Chip-module_icon__5LFmE flexBox-module_row__PWxbe",
+    s: "Chip-module_s__6LsPB type-module_body-s-regular__8-FO-",
+    m: "Chip-module_m__bEYCv type-module_body-m-regular__Qtp5G",
+    l: "Chip-module_l__aFto- type-module_body-l-regular__Ar4d3"
+};
+
+styleInject_es.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.Chip-module_chip__vVT0i {\n\tpadding: var(--ui-chip-padding) !important;\n\twidth: min-content;\n\tmin-height: 30px;\n\tgap: var(--ui-chip-gap);\n\tbackground: var(--ui-chip-background);\n\tline-height: 1em;\n\tcolor: var(--ui-chip-color);\n\tborder: var(--ui-chip-border) solid var(--ui-chip-border-color);\n\tborder-radius: var(--ui-chip-border-radius);\n\ttransition: all 0.25s ease-in-out 0s;\n\tcursor: pointer;\n\twhite-space: nowrap;\n\tuser-select: none;\n\t-webkit-user-select: none;\n}\n\n.Chip-module_icon__5LFmE {\n\theight: var(--ui-chip-icon-size);\n\tmin-height: var(--ui-chip-icon-size);\n\twidth: var(--ui-chip-icon-size);\n\tmin-width: var(--ui-chip-icon-size);\n}\n\n.Chip-module_s__6LsPB {\n}\n\n.Chip-module_m__bEYCv {\n}\n\n.Chip-module_l__aFto- {\n}\n");
+
+const Chip = React.memo(props => {
+    const {label: label, icon: icon, background: background, disabled: disabled = !1, focused: focused = !1, variant: variant = "regular", unframed: unframed = !1, iconRight: iconRight = !1, labelSize: labelSize = "m", tooltip: tooltip, iconColor: iconColor, onToolTip: onToolTip = () => null, onClick: onClick = () => null, onMouseDown: onMouseDown = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "label", "icon", "background", "disabled", "focused", "variant", "unframed", "iconRight", "labelSize", "tooltip", "iconColor", "onToolTip", "onClick", "onMouseDown" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", theme = hooks_useTheme.useTheme(), [isFocused, setIsFocused] = React.useState(focused), [isHovered, setIsHovered] = React.useState(!1);
+    React.useEffect(() => setIsFocused(focused), [ focused ]);
+    const handleClick = React.useCallback(e => {
+        disabled || onClick(e);
+    }, [ disabled, onClick ]), handleMouseDown = React.useCallback(e => {
+        disabled || onMouseDown(e);
+    }, [ disabled, onMouseDown ]), handleMouseEnter = React.useCallback((enter, event) => {
+        if (enter) {
+            if (tooltip) {
+                const tip = {
+                    type: sharedTypes.ToolTipType.button,
+                    payload: {
+                        label: tooltip
+                    },
+                    ref: null,
+                    event: event
+                };
+                onToolTip(tip);
+            }
+            setIsHovered(!0);
+        } else onToolTip(null), setIsHovered(!1);
+    }, [ tooltip, onToolTip ]), padding = React.useMemo(() => {
+        const isSmall = "small" === variant;
+        return icon ? icon && iconRight ? isSmall ? "6px 6px 6px 10px" : "9px 12px 9px 16px" : isSmall ? "6px 10px 6px 6px" : "9px 16px 9px 12px" : isSmall ? "6px" : "9px 16px 9px 16px";
+    }, [ variant, icon, iconRight ]), computedIconColor = React.useMemo(() => iconColor || (disabled ? theme.current.colors["core-icon-disabled"] : isHovered || isFocused ? theme.current.colors["core-link-primary"] : theme.current.colors["core-text-primary"]), [ iconColor, disabled, isFocused, isHovered, theme ]), cssVars = React.useMemo(() => ({
+        "--ui-chip-padding": padding,
+        "--ui-chip-background": background || "transparent",
+        "--ui-chip-gap": "small" === variant ? "4px" : "8px",
+        "--ui-chip-color": computedIconColor,
+        "--ui-chip-border-radius": "small" === variant ? "4px" : "8px",
+        "--ui-chip-border": unframed ? "0" : "1px",
+        "--ui-chip-border-color": unframed ? "transparent" : computedIconColor
+    }), [ padding, background, variant, unframed, computedIconColor ]);
+    return jsxRuntime.jsxs("div", Object.assign({
+        id: divId,
+        className: `${css.chip}${divClass}`,
+        style: Object.assign(Object.assign({}, divStyle), cssVars),
+        onMouseDown: handleMouseDown,
+        onKeyDown: () => null,
+        onClick: handleClick,
+        onMouseEnter: e => handleMouseEnter(!0, e),
+        onMouseLeave: e => handleMouseEnter(!1, e),
+        onFocus: () => setIsFocused(!0),
+        onBlur: () => setIsFocused(!1)
+    }, rest, {
+        children: [ icon && !iconRight && jsxRuntime.jsx("div", {
+            className: css.icon,
+            children: jsxRuntime.jsx(_types.Icon, {
+                name: icon,
+                size: "regular" === variant ? 20 : 16,
+                strokeColor: computedIconColor
+            })
+        }), jsxRuntime.jsx("div", {
+            className: css[labelSize],
+            children: label
+        }), icon && iconRight && jsxRuntime.jsx("div", {
+            className: css.icon,
+            children: jsxRuntime.jsx(_types.Icon, {
+                name: icon,
+                size: "regular" === variant ? 20 : 16,
+                strokeColor: computedIconColor
+            })
+        }) ]
+    }));
+});
+
+exports.Chip = Chip;

package/dist/cjs/chunks/DivInput-DDQVtlot.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), utils = require("./utils-BsBHecUI.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css_wrapper = "DivInput-module_wrapper__gljOU", css_input = "DivInput-module_input__R8myv type-module_body-m-regular__Qtp5G";
+
+styleInject_es.styleInject(".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.DivInput-module_wrapper__gljOU {\n\tpadding: var(--div-input-padding);\n\twidth: var(--div-input-width);\n\tborder-radius: var(--div-input-border-radius);\n\tbackground: var(--div-input-wrapper-bg);\n\t&:hover {\n\t\tbackground: var(--div-input-bg);\n\t}\n}\n\n.DivInput-module_input__R8myv {\n\tcolor: var(--div-input-color);\n\tuser-select: var(--div-input-user-select);\n\t-webkit-user-select: var(--div-input-user-select);\n\ttext-align: var(--div-input-text-align);\n\tpointer-events: all;\n\tbackground: transparent;\n\tborder-radius: 4px;\n\tborder: 0;\n\toutline: none;\n\ttext-overflow: ellipsis;\n\tdisplay: -webkit-box;\n\toverflow: hidden;\n\twhite-space: var(--div-input-white-space);\n\t-webkit-line-clamp: var(--div-input-line-clamp);\n\t-webkit-box-orient: vertical;\n\tcursor: var(--div-input-cursor);\n\ttransition: background 0.2s ease-in-out 0s;\n}\n");
+
+const DivInput = React.memo(props => {
+    const {value: value = "", name: name = "Input Field", placeholder: placeholder = "Placeholder", isEditable: isEditable = !0, wrap: wrap = !1, focus: focus = !1, width: width = "auto", textAlign: textAlign = "left", clamp: clamp = 3, padding: padding = "0px", onChange: onChange = () => null, onSubmit: onSubmit = () => null, onFocus: onFocus = () => null, onBlur: onBlur = () => null, onDblClick: onDblClick = () => null, onClick: onClick = () => null, radius: radius = 4, bgColor: bgColor = "var(--core-surface-secondary)"} = props, divAttributes = tslib_es6.__rest(props, [ "value", "name", "placeholder", "isEditable", "wrap", "focus", "width", "textAlign", "clamp", "padding", "onChange", "onSubmit", "onFocus", "onBlur", "onDblClick", "onClick", "radius", "bgColor" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", ref = React.useRef(null), innerText = React.useRef("" === value ? utils.cleanString(placeholder) : utils.cleanString(value)), [isFocused, setIsFocused] = React.useState(focus), [text, setText] = React.useState(innerText.current), [isPlaceholder, setIsPlaceholder] = React.useState(!1), setCursor = React.useCallback((to, length = 1) => {
+        if (ref.current) {
+            const range = document.createRange();
+            range.setStart(ref.current, "start" === to ? 0 : length), range.setEnd(ref.current, "start" === to ? 0 : 1);
+            const selection = globalThis.getSelection();
+            null == selection || selection.removeAllRanges(), null == selection || selection.addRange(range);
+        }
+    }, []), handleSelectAll = React.useCallback(() => {
+        var _a, _b, _c;
+        if (!(null === (_a = ref.current) || void 0 === _a ? void 0 : _a.firstChild)) return;
+        const range = document.createRange();
+        range.selectNode(ref.current.firstChild), null === (_b = globalThis.getSelection()) || void 0 === _b || _b.removeAllRanges(), 
+        null === (_c = globalThis.getSelection()) || void 0 === _c || _c.addRange(range);
+    }, []);
+    React.useEffect(() => {
+        if (!ref.current) return;
+        ref.current.contentEditable = isEditable ? "true" : "false", focus && (handleSelectAll(), 
+        ref.current.focus()), setIsFocused(focus);
+        const newText = "" === value ? utils.cleanString(placeholder) : utils.cleanString(value);
+        innerText.current = newText, ref.current.innerText = newText, setText(newText);
+    }, [ value, placeholder, focus, isEditable, handleSelectAll ]), React.useEffect(() => {
+        placeholder && setIsPlaceholder(text === placeholder);
+    }, [ placeholder, text ]);
+    const handleSetValue = React.useCallback(e => {
+        let textString = "";
+        if (0 === e.currentTarget.innerText.replaceAll(/\s+/g, "").length && placeholder && ref.current) ref.current.innerText = placeholder, 
+        setIsPlaceholder(!0), setCursor("start"); else if (isPlaceholder) {
+            const textString = e.currentTarget.innerText.replace(placeholder, "");
+            innerText.current = utils.cleanString(textString), ref.current && (ref.current.innerText = utils.cleanString(textString), 
+            setCursor("end"));
+        } else textString = e.currentTarget.innerText, innerText.current = utils.cleanString(textString || "");
+        onChange(innerText.current), setText(innerText.current);
+    }, [ placeholder, isPlaceholder, onChange, setCursor ]), handleKeyDown = React.useCallback(e => (e.stopPropagation(), 
+    "Enter" === e.key && ref.current ? (e.preventDefault(), ref.current.innerHTML = utils.cleanString(innerText.current), 
+    onChange(null), onSubmit(innerText.current), null == ref || ref.current.blur(), 
+    !0) : "<" === e.key || ">" === e.key ? (e.preventDefault(), !1) : void 0), [ onChange, onSubmit ]), handlePaste = React.useCallback(e => {
+        var _a;
+        if (e.preventDefault(), !e.clipboardData) return;
+        const textData = e.clipboardData.getData("text/plain");
+        if (!textData) return;
+        const pasteText = utils.cleanString(textData), selection = globalThis.getSelection();
+        if (!(null == selection ? void 0 : selection.rangeCount)) return;
+        null == selection || selection.deleteFromDocument(), null == selection || selection.getRangeAt(0).insertNode(document.createTextNode(pasteText)), 
+        null == selection || selection.collapseToEnd();
+        const newText = (null === (_a = ref.current) || void 0 === _a ? void 0 : _a.innerText) || "";
+        return onChange(utils.cleanString(newText)), innerText.current = utils.cleanString(newText), 
+        !0;
+    }, [ onChange ]), handleFocus = React.useCallback(e => {
+        setIsFocused(!0), onFocus(e);
+    }, [ onFocus ]), handleBlur = React.useCallback(_e => {
+        if (!ref.current) return;
+        const blurText = utils.cleanString(innerText.current);
+        "" === blurText && (ref.current.innerText = placeholder, innerText.current = placeholder), 
+        onChange(null), onSubmit(innerText.current), setIsFocused(!1), onBlur(blurText);
+    }, [ placeholder, onChange, onSubmit, onBlur ]), handleClick = React.useCallback(e => {
+        e.preventDefault(), e.stopPropagation(), isPlaceholder && setTimeout(() => setCursor("start"), 50), 
+        onClick();
+    }, [ isPlaceholder, setCursor, onClick ]), setWidth = React.useCallback(width => "string" == typeof width ? width : `${width}px`, []), cssVars = React.useMemo(() => ({
+        "--div-input-color": isPlaceholder ? "var(--core-text-tertiary)" : "var(--core-text-primary)",
+        "--div-input-width": `${setWidth(width)}`,
+        "--div-input-user-select": isEditable ? "text" : "none",
+        "--div-input-padding": null != padding ? padding : "0",
+        "--div-input-text-align": null != textAlign ? textAlign : "left",
+        "--div-input-white-space": isEditable && wrap ? "wrap" : "no-wrap",
+        "--div-input-line-clamp": isEditable && isFocused ? "none" : null != clamp ? clamp : "none",
+        "--div-input-cursor": isEditable ? "text" : "default",
+        "--div-input-bg": isEditable ? null != bgColor ? bgColor : "var(--core-surface-secondary)" : "transparent",
+        "--div-input-wrapper-bg": isEditable && isFocused ? null != bgColor ? bgColor : "var(--core-surface-secondary)" : "transparent",
+        "--div-input-border-radius": `${radius}px`
+    }), [ clamp, wrap, isEditable, width, textAlign, isFocused, padding, isPlaceholder, setWidth, bgColor, radius ]);
+    return jsxRuntime.jsx("div", Object.assign({
+        id: divId,
+        className: `${css_wrapper}${divClass}`,
+        style: Object.assign(Object.assign({}, divStyle), cssVars)
+    }, rest, {
+        children: jsxRuntime.jsx(react.motion.div, {
+            className: css_input,
+            ref: ref,
+            contentEditable: isEditable,
+            suppressContentEditableWarning: !0,
+            onInput: handleSetValue,
+            onKeyDown: handleKeyDown,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onPaste: handlePaste,
+            onDoubleClick: onDblClick,
+            onClick: handleClick,
+            role: "textbox",
+            "aria-label": name,
+            children: null != value ? value : placeholder
+        })
+    }));
+});
+
+DivInput.displayName = "DivInput", exports.DivInput = DivInput;

package/dist/cjs/chunks/DocIcons-B5TcBqSH.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+
+require("../theme/colors.js"), require("../hooks/useWindow.js");
+
+const DocIcons = React.memo(props => {
+    const {type: type = "pdf", height: height = 36} = props, divAttributes = tslib_es6.__rest(props, [ "type", "height" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", theme = hooks_useTheme.useTheme(), renderIcon = React.useMemo(() => {
+        const item = [ {
+            name: "not supported",
+            svg: jsxRuntime.jsxs("svg", {
+                viewBox: "0 0 24 24",
+                xmlns: "http://www.w3.org/2000/svg",
+                height: height,
+                "aria-label": "Not supported",
+                children: [ jsxRuntime.jsx("title", {
+                    children: "Not supported"
+                }), jsxRuntime.jsx("path", {
+                    d: "M 13.944 0 L 21.798 8 L 21.798 21.2 C 21.798 22.746 20.568 24 19.049 24 L 4.911 24 C 3.393 24 2.162 22.745 2.162 21.2 L 2.162 2.8 C 2.162 1.254 3.393 0 4.911 0 Z",
+                    fill: "rgb(102, 113, 127)"
+                }), jsxRuntime.jsx("path", {
+                    d: "M 12.021 16.249 C 12.461 16.249 12.733 15.968 12.733 15.625 L 12.733 15.52 C 12.733 15.028 13.014 14.711 13.63 14.307 C 14.482 13.744 15.089 13.235 15.089 12.18 C 15.089 10.72 13.788 9.93 12.294 9.93 C 10.782 9.93 9.789 10.65 9.552 11.46 C 9.508 11.6 9.482 11.74 9.482 11.89 C 9.482 12.285 9.789 12.496 10.079 12.496 C 10.378 12.496 10.571 12.356 10.729 12.145 L 10.887 11.934 C 11.195 11.424 11.652 11.125 12.241 11.125 C 13.041 11.125 13.559 11.582 13.559 12.25 C 13.559 12.848 13.19 13.138 12.426 13.674 C 11.793 14.114 11.318 14.579 11.318 15.441 L 11.318 15.555 C 11.318 16.012 11.573 16.249 12.021 16.249 Z M 12.004 18.869 C 12.514 18.869 12.953 18.464 12.953 17.954 C 12.953 17.444 12.523 17.04 12.003 17.04 C 11.485 17.04 11.054 17.453 11.054 17.954 C 11.054 18.455 11.494 18.868 12.004 18.868 Z",
+                    fill: "rgb(255, 255, 255)"
+                }), jsxRuntime.jsx("path", {
+                    d: "M 21.798 8 L 16.832 8 C 15.314 8 13.944 6.605 13.944 5.058 L 13.944 0 Z",
+                    fill: "rgba(255,255,255,0.4)"
+                }) ]
+            })
+        }, {
+            name: "text",
+            svg: jsxRuntime.jsxs("svg", {
+                viewBox: "0 0 1024 1024",
+                xmlns: "http://www.w3.org/2000/svg",
+                height: height,
+                "aria-label": "Text document",
+                children: [ jsxRuntime.jsx("title", {
+                    children: "Text document"
+                }), jsxRuntime.jsx("path", {
+                    d: "M137.902 0a48.573 48.573 0 0 0-35.589 15.294 53.965 53.965 0 0 0-15.273 35.64v917.412a48.707 48.707 0 0 0 15.273 35.64 49.971 49.971 0 0 0 35.59 15.293h746.336a48.64 48.64 0 0 0 35.59-15.293 50.37 50.37 0 0 0 15.273-35.64V288.717L646.728 0H137.902z",
+                    fill: "#FD7541"
+                }), jsxRuntime.jsx("path", {
+                    d: "M935.102 288.717H697.656c-27.822-.666-50.227-23.076-50.928-50.934V0l288.374 288.717z",
+                    fill: "#FFFFFF",
+                    opacity: .4
+                }), jsxRuntime.jsx("path", {
+                    d: "M248.126 365.184h220.518a25.518 25.518 0 0 0 24.192-25.497 25.518 25.518 0 0 0-24.197-25.503H248.126a25.518 25.518 0 0 0-24.197 25.498 25.518 25.518 0 0 0 24.197 25.497zm0 169.825H773.95a25.446 25.446 0 0 0 25.43-25.466 25.446 25.446 0 0 0-25.43-25.467H248.126a25.446 25.446 0 0 0-25.431 25.467 25.446 25.446 0 0 0 25.43 25.466zM773.95 653.896H248.126a25.518 25.518 0 0 0-24.197 25.497 25.518 25.518 0 0 0 24.197 25.503H773.95a25.518 25.518 0 0 0 24.197-25.497A25.518 25.518 0 0 0 773.95 653.9z",
+                    fill: "#FFF"
+                }) ]
+            })
+        }, {
+            name: "docx",
+            svg: jsxRuntime.jsxs("svg", {
+                viewBox: "0 0 1024 1024",
+                xmlns: "http://www.w3.org/2000/svg",
+                height: height,
+                "aria-label": "Word document",
+                children: [ jsxRuntime.jsx("title", {
+                    children: "Word document"
+                }), jsxRuntime.jsx("path", {
+                    d: "m594.944 0 335.124 341.32v563.2c0 65.996-52.5 119.48-117.294 119.48H209.546c-64.793 0-117.299-53.53-117.299-119.48V119.48C92.252 53.484 144.757 0 209.551 0h385.393z",
+                    fill: theme.current.colors["core-button-primary"]
+                }), jsxRuntime.jsx("path", {
+                    d: "M930.068 341.32H718.152c-64.748 0-123.208-59.49-123.208-125.492V0l335.124 341.32z",
+                    fill: "#ffffff",
+                    fillOpacity: ".7"
+                }), jsxRuntime.jsx("path", {
+                    d: "M427.377 725.32V768H259.814v-42.68h167.563zM594.944 640v42.68h-335.13V640h335.13zm0-85.32v42.64h-335.13v-42.64h335.13zm0-85.36V512h-335.13v-42.68h335.13z",
+                    fill: "#FFF"
+                }) ]
+            })
+        }, {
+            name: "pdf",
+            svg: jsxRuntime.jsxs("svg", {
+                viewBox: "0 0 1024 1024",
+                xmlns: "http://www.w3.org/2000/svg",
+                height: height,
+                "aria-label": "PDF document",
+                children: [ jsxRuntime.jsx("title", {
+                    children: "PDF document"
+                }), jsxRuntime.jsx("path", {
+                    d: "m594.944 0 335.124 341.32v563.2c0 65.996-52.5 119.48-117.294 119.48H209.546c-64.793 0-117.299-53.53-117.299-119.48V119.48C92.252 53.484 144.757 0 209.551 0h385.393z",
+                    fill: "#E94848"
+                }), jsxRuntime.jsx("path", {
+                    d: "M482.954 375.48a40.586 40.586 0 0 0-40.028 40.776c0 27.786 15.17 62.326 31.18 94.771-12.564 39.834-26.715 82.473-44.82 118.503-37.094 14.796-70.195 25.83-90.06 42.168a41.708 41.708 0 0 0-12.39 29.926c0 22.344 18.063 40.776 40.038 40.776a39.332 39.332 0 0 0 29.27-12.472c14.618-17.828 31.888-50.13 47.294-79.642 35.42-14.198 72.607-28.672 108.447-37.325 26.163 21.453 64.051 35.65 95.186 35.65 21.97 0 40.033-18.385 40.033-40.775a40.586 40.586 0 0 0-40.033-40.724c-24.991 0-61.297 9.072-89.037 18.616a301.338 301.338 0 0 1-58.092-76.984c10.66-33.332 23.04-66.658 23.04-92.488a40.586 40.586 0 0 0-40.028-40.776zm0 24.438c8.98 0 16.01 7.168 16.01 16.292 0 12.237-6.42 34.816-13.87 59.018-9.958-23.552-18.15-46.172-18.15-58.972 0-9.165 7.025-16.292 16.01-16.292v-.046zm6.887 139.546a323.574 323.574 0 0 0 41.523 53.76c-23.742 6.604-46.92 15.078-69.822 23.92 11.08-25.364 19.917-51.758 28.299-77.726v.046zm157.235 52.126c8.98 0 16.01 7.122 16.01 16.292 0 9.124-7.03 16.292-16.015 16.292-18.059 0-43.659-8.284-64.185-19.876 23.552-6.794 49.204-12.749 64.185-12.749v.041zM408.15 664.576c-11.264 20.48-22.436 39.562-30.26 49.152a15.078 15.078 0 0 1-11.028 4.188 15.964 15.964 0 0 1-16.01-16.292 17.707 17.707 0 0 1 4.234-11.356c9.4-7.398 29.835-16.292 53.064-25.692z",
+                    fill: "#FFF"
+                }), jsxRuntime.jsx("path", {
+                    d: "M930.068 341.32H718.152c-64.748 0-123.208-59.49-123.208-125.492V0l335.124 341.32z",
+                    fill: "#FFF",
+                    fillOpacity: ".4"
+                }) ]
+            })
+        } ].filter(data => type === data.name);
+        return item ? item[0].svg : null;
+    }, [ height, type, theme ]);
+    return jsxRuntime.jsx("div", Object.assign({
+        id: divId,
+        className: divClass.trim(),
+        style: Object.assign(Object.assign({}, divStyle), {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center"
+        })
+    }, rest, {
+        children: renderIcon
+    }));
+});
+
+exports.DocIcons = DocIcons;

package/dist/cjs/chunks/Dot-BSSClfHQ.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css_dot = "Dot-module_dot__8eYTa flexBox-module_row__PWxbe";
+
+styleInject_es.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}.Dot-module_dot__8eYTa {\n\tdisplay: var(--dot-display);\n\tbox-sizing: content-box;\n\tposition: var(--dot-position);\n\ttop: var(--dot-top);\n\tright: var(--dot-right);\n\tvertical-align: var(--dot-vertical-align);\n\tmin-height: var(--dot-size);\n\tmin-width: var(--dot-size);\n\theight: var(--dot-size);\n\twidth: var(--dot-size);\n\tborder: var(--dot-border) solid var(--core-surface-primary);\n\tbackground: var(--dot-bg);\n\tborder-radius: 100%;\n\tz-index: var(--elevation-status);\n}\n");
+
+const DEFAULT_VARIANTS = {
+    initial: {
+        opacity: 0
+    },
+    animate: {
+        opacity: 1
+    },
+    exit: {
+        opacity: 0
+    }
+}, DEFAULT_TRANSITION = {
+    ease: "easeInOut",
+    duration: .5
+}, Dot = React.memo(props => {
+    const {size: size = 8, topOffset: topOffset = 2, rightOffset: rightOffset = 2, border: border = 3, position: position = "corner", color: color, transition: transition, motionValues: motionValues, show: show = !1, state: state} = props, divAttributes = tslib_es6.__rest(props, [ "size", "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(() => transition ? Object.assign(Object.assign({}, DEFAULT_TRANSITION), transition) : DEFAULT_TRANSITION, [ 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-text-special)";
+    }, [ 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 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-wWLPesc8.js

@@ -0,0 +1,202 @@
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+
+require("../theme/colors.js"), require("../hooks/useWindow.js");
+
+var hooks_useObserveResize = require("../hooks/useObserveResize.js"), utils = require("./utils-BsBHecUI.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), 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_es.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 = hooks_useTheme.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 = tslib_es6.__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 = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", handle = React.useRef(null), div = React.useRef(null), [isDragging, setIsDragging] = React.useState(!1), isOver = React.useRef(!1), gripper = Object.assign({}, resizeHandle), containerSize = hooks_useObserveResize.useObserveResize(containerRef), [handleHighlight, setHandleHighlight] = React.useState(!1), [lastWidth, setLastWidth] = React.useState(null), [panelClosed, setPanelClosed] = React.useState(isClosed), [constraints, setConstraints] = React.useState(sizeConstraints), [contWidth, setContWidth] = React.useState(void 0), timer = React.useRef(null), startX = React.useRef(0), startWidth = React.useRef(0), divWidth = React.useRef(0), divHeight = React.useRef(0), deltaWidth = React.useRef(0), handleWindowResize = React.useCallback(() => {
+        (null == containerRef ? void 0 : containerRef.current) || setContWidth(window.innerWidth);
+    }, [ containerRef ]), handleMouseOver = React.useCallback(() => {
+        isOver.current = !0, setHighlight(!0);
+    }, []), handleMouseOut = React.useCallback(() => {
+        isOver.current = !1, isDragging || setHighlight(!1);
+    }, [ isDragging ]), handleFocus = React.useCallback(() => {
+        isOver.current = !0, setHighlight(!0);
+    }, []), handleBlur = React.useCallback(() => {
+        isOver.current = !1, isDragging || setHighlight(!1);
+    }, [ isDragging ]), handleTouchStart = React.useCallback(() => {
+        isOver.current = !0, setHighlight(!0);
+    }, []), handleTouchEnd = React.useCallback(() => {
+        isOver.current = !1, isDragging || setHighlight(!1);
+    }, [ isDragging ]);
+    React.useEffect(() => {
+        containerRef && containerSize.width > 0 && setContWidth(containerSize.width);
+    }, [ containerSize, containerRef ]), React.useEffect(() => (contWidth || setContWidth(window.innerWidth), 
+    globalThis.addEventListener("resize", handleWindowResize), () => globalThis.removeEventListener("resize", handleWindowResize)), []), 
+    React.useEffect(() => setPanelClosed(isClosed), [ isClosed ]);
+    const adjustCurrentWidth = React.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));
+        }
+    }, []);
+    React.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 = React.useCallback(state => {
+        timer.current && clearTimeout(timer.current), state ? timer.current = setTimeout(() => {
+            setHandleHighlight(state);
+        }, isTouchDevice ? 0 : 350) : setHandleHighlight(!1);
+    }, [ isTouchDevice ]), getClientX = React.useCallback(e => utils.pointerPosition(e), []), getNewWidth = React.useCallback(clientX => dragsRight ? startWidth.current + clientX - startX.current : startWidth.current - clientX + startX.current, [ dragsRight ]), canDrag = React.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 = React.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 = React.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 = React.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 = utils.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 ]);
+    React.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 = React.useMemo(() => dragsRight ? {
+        right: isTouchDevice ? -22 : -(gripper.width || 10) / 2
+    } : {
+        left: isTouchDevice ? -22 : -(gripper.width || 10) / 2
+    }, [ dragsRight, isTouchDevice, gripper.width ]), width = React.useMemo(() => drags ? panelClosed ? 0 : lastWidth || constraints.initial : "100%", [ drags, panelClosed, lastWidth, constraints.initial ]), cssVars = React.useMemo(() => ({
+        "--panel-bg": null != bgColor ? bgColor : "transparent"
+    }), [ bgColor ]);
+    return jsxRuntime.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: [ jsxRuntime.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 && jsxRuntime.jsx(DragHandle, Object.assign({}, null != dragHandleStyle ? dragHandleStyle : {})), jsxRuntime.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"
+                }
+            }) ]
+        }), jsxRuntime.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 = React.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 jsxRuntime.jsx("div", {
+        className: css_handle,
+        style: cssVars
+    });
+});
+
+exports.DraggablePanel = DraggablePanel;