@willphan1712000/frontend 1.0.0

package/dist/index.js

@@ -0,0 +1,662 @@
+"use strict";
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _type_of(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = function(target, all) {
+    for(var name in all)__defProp(target, name, {
+        get: all[name],
+        enumerable: true
+    });
+};
+var __copyProps = function(to, from, except, desc) {
+    if (from && (typeof from === "undefined" ? "undefined" : _type_of(from)) === "object" || typeof from === "function") {
+        var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+        try {
+            var _loop = function() {
+                var key = _step.value;
+                if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+                    get: function() {
+                        return from[key];
+                    },
+                    enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+                });
+            };
+            for(var _iterator = __getOwnPropNames(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true)_loop();
+        } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+        } finally{
+            try {
+                if (!_iteratorNormalCompletion && _iterator.return != null) {
+                    _iterator.return();
+                }
+            } finally{
+                if (_didIteratorError) {
+                    throw _iteratorError;
+                }
+            }
+        }
+    }
+    return to;
+};
+var __toCommonJS = function(mod) {
+    return __copyProps(__defProp({}, "__esModule", {
+        value: true
+    }), mod);
+};
+// index.ts
+var index_exports = {};
+__export(index_exports, {
+    ColorPickerSlider: function() {
+        return ColorPickerSlider_default;
+    },
+    DropdownSelect: function() {
+        return DropdownSelect_default;
+    },
+    OptionSlider: function() {
+        return OptionSlider_default;
+    },
+    RangeSlider: function() {
+        return RangeSlider_default;
+    }
+});
+module.exports = __toCommonJS(index_exports);
+// src/components/DropdownSelect/DropdownSelect.tsx
+var import_react3 = require("react");
+// src/components/DropdownSelect/context.ts
+var import_react = require("react");
+var MyContext = (0, import_react.createContext)(void 0);
+function useMyContext() {
+    var data = (0, import_react.useContext)(MyContext);
+    if (data === void 0) throw new Error("Select context is undefined");
+    return data;
+}
+// src/components/DropdownSelect/Dropdown.tsx
+var import_react2 = require("react");
+// scss-module:./dropdownSelect.module.css#scss-module
+var dropdownSelect_module_default = {
+    "select_box": "dropdownSelect-module__select_box___Q8S31",
+    "value": "dropdownSelect-module__value___izaXQ",
+    "close": "dropdownSelect-module__close___axGDo",
+    "element": "dropdownSelect-module__element___Q56x3",
+    "dropdown": "dropdownSelect-module__dropdown___cjfHn",
+    "search_border": "dropdownSelect-module__search_border___xQU5q",
+    "search": "dropdownSelect-module__search___kGmqs"
+};
+// src/components/DropdownSelect/Search.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Search = function(param) {
+    var options = param.options, onSearch = param.onSearch;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+        className: dropdownSelect_module_default.search_border,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+            placeholder: "Search",
+            className: dropdownSelect_module_default.search,
+            id: "search",
+            name: "search",
+            onChange: function(e) {
+                return onSearch(options.filter(function(ele) {
+                    return ele.value.toLowerCase().includes(e.target.value.toLowerCase());
+                }));
+            }
+        })
+    });
+};
+var Search_default = Search;
+// src/components/DropdownSelect/Dropdown.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Dropdown = function() {
+    var _useMyContext = useMyContext(), options = _useMyContext.options, onChange = _useMyContext.onChange, setOpen = _useMyContext.setOpen;
+    var _ref = _sliced_to_array((0, import_react2.useState)(true), 2), isVisible = _ref[0], setVisible = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react2.useState)(options), 2), optionsCopy = _ref1[0], setOption = _ref1[1];
+    var dropdownRef = (0, import_react2.useRef)(null);
+    var handleResize = function() {
+        var dropdown = dropdownRef.current;
+        var dimension = dropdown.getBoundingClientRect();
+        var distanceToBottom = window.innerHeight - dimension.bottom;
+        var distanceToTop = dimension.top;
+        if (distanceToBottom < 0) {
+            setVisible(false);
+        }
+        if (distanceToTop < 0) {
+            setVisible(true);
+        }
+    };
+    (0, import_react2.useEffect)(function() {
+        handleResize();
+        window.addEventListener("scroll", handleResize);
+        return function() {
+            window.removeEventListener("scroll", handleResize);
+        };
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
+        className: dropdownSelect_module_default.dropdown,
+        ref: dropdownRef,
+        style: isVisible ? {
+            top: "calc(100% + 5px)"
+        } : {
+            bottom: "calc(100% + 5px)"
+        },
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Search_default, {
+                options: options,
+                onSearch: setOption
+            }),
+            optionsCopy.map(function(option, key) {
+                return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
+                    className: dropdownSelect_module_default.element,
+                    onClick: function() {
+                        onChange(option.value);
+                        setOpen(function(prev) {
+                            return !prev;
+                        });
+                    },
+                    children: option.label
+                }, key);
+            })
+        ]
+    });
+};
+var Dropdown_default = Dropdown;
+// src/components/DropdownSelect/DropdownSelect.tsx
+var import_io = require("react-icons/io");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var DropdownSelect = function(param) {
+    var options = param.options, value = param.value, onChange = param.onChange, _param_width = param.width, width = _param_width === void 0 ? "200" : _param_width;
+    var _ref = _sliced_to_array((0, import_react3.useState)(false), 2), open = _ref[0], setOpen = _ref[1];
+    var selectRef = (0, import_react3.useRef)(null);
+    var clickHandler = function(e) {
+        var select = selectRef.current;
+        if (!select.contains(e.target)) {
+            setOpen(false);
+        }
+    };
+    (0, import_react3.useEffect)(function() {
+        window.addEventListener("click", clickHandler);
+        return function() {
+            return window.removeEventListener("click", clickHandler);
+        };
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MyContext.Provider, {
+        value: {
+            options: options,
+            value: value,
+            onChange: onChange,
+            setOpen: setOpen
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", {
+            style: {
+                width: "".concat(width, "px"),
+                position: "relative"
+            },
+            ref: selectRef,
+            children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", {
+                    className: dropdownSelect_module_default.select_box,
+                    onClick: function() {
+                        return setOpen(function(prev) {
+                            return !prev;
+                        });
+                    },
+                    children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", {
+                            className: dropdownSelect_module_default.value,
+                            children: value
+                        }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", {
+                            className: dropdownSelect_module_default.close,
+                            title: "clear",
+                            onClick: function() {
+                                onChange("");
+                                setOpen(function(prev) {
+                                    return !prev;
+                                });
+                            },
+                            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_io.IoMdClose, {})
+                        })
+                    ]
+                }),
+                open && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dropdown_default, {})
+            ]
+        })
+    });
+};
+var DropdownSelect_default = DropdownSelect;
+// src/components/RangeSlider/RangeSlider.tsx
+var import_react4 = require("react");
+// scss-module:./rangeSlider.module.css#scss-module
+var rangeSlider_module_default = {
+    "slider_border": "rangeSlider-module__slider_border___CoeFx",
+    "thumb": "rangeSlider-module__thumb___OnFSM",
+    "thumb_shadow": "rangeSlider-module__thumb_shadow___L16TY",
+    "fill": "rangeSlider-module__fill___urGCN",
+    "rest": "rangeSlider-module__rest___pO2pi",
+    "value": "rangeSlider-module__value___Evg0D"
+};
+// src/components/RangeSlider/functions.ts
+function encode(value, min, max) {
+    return (parseInt(value) - parseInt(min)) * 100 / (parseInt(max) - parseInt(min));
+}
+function decode(percent, min, max) {
+    return Math.round(parseInt(min) + percent * (parseInt(max) - parseInt(min)));
+}
+// src/components/RangeSlider/RangeSlider.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var RangeSlider = function(param) {
+    var _param_min = param.min, min = _param_min === void 0 ? "0" : _param_min, _param_max = param.max, max = _param_max === void 0 ? "100" : _param_max, _param_color = param.color, color = _param_color === void 0 ? "#f0f0f7" : _param_color, _param_width = param.width, width = _param_width === void 0 ? "200" : _param_width, value = param.value, onChange = param.onChange;
+    var percentage = encode(value, min, max);
+    var sliderBorderRef = (0, import_react4.useRef)(null);
+    var _ref = _sliced_to_array((0, import_react4.useState)(false), 2), isMouseDown = _ref[0], setMouseDown = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react4.useState)(false), 2), isHover = _ref1[0], setHover = _ref1[1];
+    var handleDrag = function(isClicked, e) {
+        if (!isMouseDown && !isClicked) return;
+        var sliderBorder = sliderBorderRef.current;
+        var dimension = sliderBorder.getBoundingClientRect();
+        var clientX;
+        if ("touches" in e) {
+            clientX = e.touches[0].clientX;
+        } else {
+            clientX = e.clientX;
+        }
+        percentage = (clientX - dimension.left) / dimension.width;
+        var currentValue = decode(percentage, min, max);
+        if (currentValue > parseInt(max)) {
+            currentValue = parseInt(max);
+        }
+        if (currentValue < parseInt(min)) {
+            currentValue = parseInt(min);
+        }
+        onChange(currentValue.toString());
+    };
+    (0, import_react4.useEffect)(function() {
+        var handleMove = function(e) {
+            if (e.type === "touchmove") {
+                e.preventDefault();
+            }
+            handleDrag(false, e);
+        };
+        var handleMouseUp = function() {
+            setMouseDown(false);
+        };
+        if (isMouseDown) {
+            document.addEventListener("mousemove", handleMove);
+            document.addEventListener("mouseup", handleMouseUp);
+            document.addEventListener("touchmove", handleMove, {
+                passive: false
+            });
+            document.addEventListener("touchend", handleMouseUp);
+        }
+        return function() {
+            document.removeEventListener("mousemove", handleMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+            document.removeEventListener("touchmove", handleMove);
+            document.removeEventListener("touchend", handleMouseUp);
+        };
+    }, [
+        isMouseDown
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", {
+        className: rangeSlider_module_default.slider_border,
+        style: {
+            width: "".concat(width, "px")
+        },
+        onMouseDown: function(e) {
+            handleDrag(true, e);
+            setMouseDown(true);
+        },
+        onTouchStart: function(e) {
+            handleDrag(true, e);
+            setMouseDown(true);
+        },
+        ref: sliderBorderRef,
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", {
+                className: rangeSlider_module_default.fill,
+                style: {
+                    background: color,
+                    width: "".concat(percentage, "%")
+                }
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", {
+                className: rangeSlider_module_default.thumb,
+                style: {
+                    background: color,
+                    left: "".concat(percentage, "%")
+                },
+                onMouseMove: function() {
+                    return setHover(true);
+                },
+                onMouseLeave: function() {
+                    return setHover(false);
+                },
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", {
+                        className: rangeSlider_module_default.value,
+                        style: {
+                            scale: isMouseDown || isHover ? "1" : "0"
+                        },
+                        children: value
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", {
+                        className: rangeSlider_module_default.thumb_shadow,
+                        style: {
+                            background: color,
+                            scale: isMouseDown || isHover ? "1" : "0"
+                        }
+                    })
+                ]
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", {
+                className: rangeSlider_module_default.rest,
+                style: {
+                    background: color
+                }
+            })
+        ]
+    });
+};
+var RangeSlider_default = RangeSlider;
+// scss-module:./optionSlider.module.css#scss-module
+var optionSlider_module_default = {
+    "border": "optionSlider-module__border___DvXkD",
+    "background": "optionSlider-module__background___P6MQP",
+    "options": "optionSlider-module__options___OLBcd",
+    "element": "optionSlider-module__element___obtjI"
+};
+// src/components/OptionSlider/OptionSlider.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var OptionSlider = function(param) {
+    var value = param.value, onChange = param.onChange, _param_width = param.width, width = _param_width === void 0 ? "200" : _param_width, options = param.options, _param_color = param.color, color = _param_color === void 0 ? "#f0f0f7" : _param_color;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", {
+        className: optionSlider_module_default.border,
+        style: {
+            width: "".concat(width, "px")
+        },
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", {
+                className: optionSlider_module_default.background,
+                style: {
+                    background: color
+                }
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", {
+                className: optionSlider_module_default.options,
+                children: options.map(function(option, key) {
+                    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", {
+                        style: {
+                            background: color,
+                            border: value === option.value ? "solid 2px #000" : "solid 1px #000"
+                        },
+                        className: optionSlider_module_default.element,
+                        onClick: function() {
+                            return onChange(option.value);
+                        },
+                        title: option.value,
+                        children: option.label
+                    }, key);
+                })
+            })
+        ]
+    });
+};
+var OptionSlider_default = OptionSlider;
+// src/components/ColorPickerSlider/ColorPickerSlider.tsx
+var import_react5 = require("react");
+// scss-module:./colorPickerSlider.module.css#scss-module
+var colorPickerSlider_module_default = {
+    "border": "colorPickerSlider-module__border___-6cw8",
+    "thumb": "colorPickerSlider-module__thumb___p2fHW",
+    "label": "colorPickerSlider-module__label___Aa0AV"
+};
+// src/components/ColorPickerSlider/functions.ts
+function encode2(color) {
+    var h = hexToHsl(color).h;
+    return h * 100 / 360;
+}
+function decode2(percent) {
+    return hslToHex(percent * 360, 100, 50);
+}
+function hexToHsl(hex) {
+    if (hex.length === 7) {
+        hex = hex.substring(1);
+    }
+    var r = parseInt(hex.substring(0, 2), 16) / 255;
+    var g = parseInt(hex.substring(2, 4), 16) / 255;
+    var b = parseInt(hex.substring(4, 6), 16) / 255;
+    var cmax = Math.max(r, g, b);
+    var cmin = Math.min(r, g, b);
+    var delta = cmax - cmin;
+    var h = 0;
+    var s = 0;
+    var l = (cmax + cmin) / 2;
+    if (delta !== 0) {
+        s = delta / (1 - Math.abs(2 * l - 1));
+        if (cmax === r) {
+            h = (g - b) / delta;
+        } else if (cmax === g) {
+            h = (b - r) / delta + 2;
+        } else {
+            h = (r - g) / delta + 4;
+        }
+        h = h * 60;
+        if (h < 0) {
+            h += 360;
+        }
+    }
+    return {
+        h: Math.round(h),
+        s: Math.round(s * 100),
+        l: Math.round(l * 100)
+    };
+}
+function hslToHex(h, s, l) {
+    s /= 100;
+    l /= 100;
+    var c = (1 - Math.abs(2 * l - 1)) * s;
+    var x = c * (1 - Math.abs(h / 60 % 2 - 1));
+    var m = l - c / 2;
+    var r_prime = 0;
+    var g_prime = 0;
+    var b_prime = 0;
+    var sector = h / 60;
+    if (sector >= 0 && sector < 1) {
+        var ref;
+        ref = [
+            c,
+            x,
+            0
+        ], r_prime = ref[0], g_prime = ref[1], b_prime = ref[2], ref;
+    } else if (sector >= 1 && sector < 2) {
+        var ref1;
+        ref1 = [
+            x,
+            c,
+            0
+        ], r_prime = ref1[0], g_prime = ref1[1], b_prime = ref1[2], ref1;
+    } else if (sector >= 2 && sector < 3) {
+        var ref2;
+        ref2 = [
+            0,
+            c,
+            x
+        ], r_prime = ref2[0], g_prime = ref2[1], b_prime = ref2[2], ref2;
+    } else if (sector >= 3 && sector < 4) {
+        var ref3;
+        ref3 = [
+            0,
+            x,
+            c
+        ], r_prime = ref3[0], g_prime = ref3[1], b_prime = ref3[2], ref3;
+    } else if (sector >= 4 && sector < 5) {
+        var ref4;
+        ref4 = [
+            x,
+            0,
+            c
+        ], r_prime = ref4[0], g_prime = ref4[1], b_prime = ref4[2], ref4;
+    } else if (sector >= 5 && sector < 6) {
+        var ref5;
+        ref5 = [
+            c,
+            0,
+            x
+        ], r_prime = ref5[0], g_prime = ref5[1], b_prime = ref5[2], ref5;
+    }
+    var r = Math.round((r_prime + m) * 255);
+    var g = Math.round((g_prime + m) * 255);
+    var b = Math.round((b_prime + m) * 255);
+    var toHex = function(c2) {
+        var hex = c2.toString(16).toUpperCase();
+        return hex.length === 1 ? "0" + hex : hex;
+    };
+    return "#".concat(toHex(r)).concat(toHex(g)).concat(toHex(b));
+}
+// src/components/ColorPickerSlider/ColorPickerSlider.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ColorPickerSlider = function(param) {
+    var value = param.value, onChange = param.onChange, _param_width = param.width, width = _param_width === void 0 ? "200" : _param_width;
+    var percentage = encode2(value);
+    var sliderBorderRef = (0, import_react5.useRef)(null);
+    var _ref = _sliced_to_array((0, import_react5.useState)(false), 2), isMouseDown = _ref[0], setMouseDown = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react5.useState)(false), 2), isHover = _ref1[0], setHover = _ref1[1];
+    var handleDrag = function(isClicked, e) {
+        if (!isMouseDown && !isClicked) return;
+        var sliderBorder = sliderBorderRef.current;
+        var dimension = sliderBorder.getBoundingClientRect();
+        var clientX;
+        if ("touches" in e) {
+            clientX = e.touches[0].clientX;
+        } else {
+            clientX = e.clientX;
+        }
+        percentage = (clientX - dimension.left) / dimension.width;
+        if (percentage < 0) percentage = 0;
+        if (percentage > 1) percentage = 0.99;
+        onChange(decode2(percentage));
+    };
+    (0, import_react5.useEffect)(function() {
+        var handleMove = function(e) {
+            if (e.type === "touchmove") {
+                e.preventDefault();
+            }
+            handleDrag(false, e);
+        };
+        var handleMouseUp = function() {
+            setMouseDown(false);
+        };
+        if (isMouseDown) {
+            document.addEventListener("mousemove", handleMove);
+            document.addEventListener("mouseup", handleMouseUp);
+            document.addEventListener("touchmove", handleMove, {
+                passive: false
+            });
+            document.addEventListener("touchend", handleMouseUp);
+        }
+        return function() {
+            document.removeEventListener("mousemove", handleMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+            document.removeEventListener("touchmove", handleMove);
+            document.removeEventListener("touchend", handleMouseUp);
+        };
+    }, [
+        isMouseDown
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", {
+        className: colorPickerSlider_module_default.border,
+        style: {
+            width: "".concat(width, "px")
+        },
+        onMouseDown: function(e) {
+            handleDrag(true, e);
+            setMouseDown(true);
+        },
+        onTouchStart: function(e) {
+            handleDrag(true, e);
+            setMouseDown(true);
+        },
+        ref: sliderBorderRef,
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", {
+                className: colorPickerSlider_module_default.thumb,
+                style: {
+                    width: "".concat(parseInt(width) * 0.1, "px"),
+                    background: value,
+                    left: "".concat(percentage, "%")
+                },
+                onMouseMove: function() {
+                    return setHover(true);
+                },
+                onMouseLeave: function() {
+                    return setHover(false);
+                }
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", {
+                className: colorPickerSlider_module_default.label,
+                style: {
+                    left: "".concat(percentage, "%"),
+                    scale: isHover || isMouseDown ? "1" : "0"
+                },
+                children: value
+            })
+        ]
+    });
+};
+var ColorPickerSlider_default = ColorPickerSlider;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+    ColorPickerSlider: ColorPickerSlider,
+    DropdownSelect: DropdownSelect,
+    OptionSlider: OptionSlider,
+    RangeSlider: RangeSlider
+});