krl-alfred 1.82.7 → 1.82.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -38,6 +38,6 @@ var Children = function (props) {
|
|
|
38
38
|
};
|
|
39
39
|
var Button = (0, react_1.forwardRef)(function (props, ref) {
|
|
40
40
|
var type = props.type, isLoading = props.isLoading, onClick = props.onClick, disabled = props.disabled, size = props.size, variant = props.variant, width = props.width, _a = props.icon, icon = _a === void 0 ? props_1.ButtonDefault.icon : _a, children = props.children, _b = props.iconSize, iconSize = _b === void 0 ? props_1.ButtonDefault.iconSize : _b, _c = props.tooltip, tooltip = _c === void 0 ? props_1.ButtonDefault.tooltip : _c, other = __rest(props, ["type", "isLoading", "onClick", "disabled", "size", "variant", "width", "icon", "children", "iconSize", "tooltip"]);
|
|
41
|
-
return ((0, jsx_runtime_1.jsxs)(Button_styled_1.ButtonStyled, __assign({ className: (0, classnames_1.default)({ "loading": isLoading }), onClick: onClick, disabled: disabled
|
|
41
|
+
return ((0, jsx_runtime_1.jsxs)(Button_styled_1.ButtonStyled, __assign({ className: (0, classnames_1.default)({ "loading": isLoading }), onClick: onClick, disabled: disabled, "$size": size, "$variant": variant, "$width": width, "$icon": icon, type: type, ref: ref, "$isLoading": isLoading, "$tooltip": tooltip }, other, { children: [(0, jsx_runtime_1.jsxs)(Children, __assign({ isLoading: isLoading, icon: icon, iconSize: iconSize }, { children: [isLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "loadingContent" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { width: ["small", "xsmall"].includes(size) ? "1rem" : "1.5rem", height: ["small", "xsmall"].includes(size) ? "1rem" : "1.5rem", variant: variant === 'primary' ? 'secondary' : 'primary' }) }))), (0, jsx_runtime_1.jsx)("span", { children: children })] })), tooltip && (0, jsx_runtime_1.jsx)("div", __assign({ className: "buttonTooltip" }, { children: tooltip }))] })));
|
|
42
42
|
});
|
|
43
43
|
exports.default = Button;
|
|
@@ -86,7 +86,7 @@ var ghost = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
|
|
|
86
86
|
return "var(--body-bold-14-17)";
|
|
87
87
|
}
|
|
88
88
|
}, devices_1.devices.mdUp, devices_1.devices.md);
|
|
89
|
-
exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-sizing: border-box;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 0.5rem;\n padding: ", ";\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n outline: none;\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n background-color: transparent;\n border-radius: inherit;\n &:is(.isLoading){\n background-color: inherit;\n }\n &:empty{\n margin-right: 0;\n }\n }\n .loadingContent{\n position: absolute;\n background-color: inherit;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 5;\n border-radius: inherit;\n svg{\n color: inherit;\n }\n }\n .buttonTooltip{\n position: absolute;\n right: 0;\n top: calc(100% + 5px);\n background: white;\n color: var(--dark);\n font: var(--caption-medium-10-12);\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n user-select: none;\n pointer-events: none;\n transition: all .2s ease;\n opacity: 0;\n transition-delay: 0s;\n }\n &:hover{\n .buttonTooltip{\n opacity: 1;\n transition-delay: 0.5s;\n }\n }\n"], ["\n box-sizing: border-box;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 0.5rem;\n padding: ", ";\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n outline: none;\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n background-color: transparent;\n border-radius: inherit;\n &:is(.isLoading){\n background-color: inherit;\n }\n &:empty{\n margin-right: 0;\n }\n }\n .loadingContent{\n position: absolute;\n background-color: inherit;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 5;\n border-radius: inherit;\n svg{\n color: inherit;\n }\n }\n .buttonTooltip{\n position: absolute;\n right: 0;\n top: calc(100% + 5px);\n background: white;\n color: var(--dark);\n font: var(--caption-medium-10-12);\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n user-select: none;\n pointer-events: none;\n transition: all .2s ease;\n opacity: 0;\n transition-delay: 0s;\n }\n &:hover{\n .buttonTooltip{\n opacity: 1;\n transition-delay: 0.5s;\n }\n }\n"])), function (props) { return props.$width ? '0' : '0 24px'; }, function (props) { return props.$width; }, function (props) {
|
|
89
|
+
exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-sizing: border-box;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 0.5rem;\n padding: ", ";\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n outline: none;\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n background-color: transparent;\n border-radius: inherit;\n &:is(.isLoading){\n background-color: inherit;\n }\n &:empty{\n margin-right: 0;\n }\n }\n .loadingContent{\n position: absolute;\n background-color: inherit;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 5;\n border-radius: inherit;\n svg{\n color: inherit;\n }\n }\n .buttonTooltip{\n position: absolute;\n right: 0;\n top: calc(100% + 5px);\n background: white;\n color: var(--dark);\n font: var(--caption-medium-10-12);\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n user-select: none;\n pointer-events: none;\n transition: all .2s ease;\n opacity: 0;\n transition-delay: 0s;\n }\n &:hover{\n .buttonTooltip{\n opacity: 1;\n transition-delay: 0.5s;\n }\n }\n &:is(.loading) {\n user-select: none;\n pointer-events: none;\n .children{\n > span{\n opacity: 0;\n } \n }\n > *:not(.children){\n opacity: 0;\n }\n }\n"], ["\n box-sizing: border-box;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 0.5rem;\n padding: ", ";\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n outline: none;\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n background-color: transparent;\n border-radius: inherit;\n &:is(.isLoading){\n background-color: inherit;\n }\n &:empty{\n margin-right: 0;\n }\n }\n .loadingContent{\n position: absolute;\n background-color: inherit;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 5;\n border-radius: inherit;\n svg{\n color: inherit;\n }\n }\n .buttonTooltip{\n position: absolute;\n right: 0;\n top: calc(100% + 5px);\n background: white;\n color: var(--dark);\n font: var(--caption-medium-10-12);\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n user-select: none;\n pointer-events: none;\n transition: all .2s ease;\n opacity: 0;\n transition-delay: 0s;\n }\n &:hover{\n .buttonTooltip{\n opacity: 1;\n transition-delay: 0.5s;\n }\n }\n &:is(.loading) {\n user-select: none;\n pointer-events: none;\n .children{\n > span{\n opacity: 0;\n } \n }\n > *:not(.children){\n opacity: 0;\n }\n }\n"])), function (props) { return props.$width ? '0' : '0 24px'; }, function (props) { return props.$width; }, function (props) {
|
|
90
90
|
switch (props.$variant) {
|
|
91
91
|
case 'primary':
|
|
92
92
|
return primary;
|
|
@@ -58,25 +58,32 @@ var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
|
58
58
|
var async_1 = __importDefault(require("react-select/async"));
|
|
59
59
|
var simplebar_react_1 = __importDefault(require("simplebar-react"));
|
|
60
60
|
var Loader_1 = __importDefault(require("../Loader"));
|
|
61
|
+
var Checkbox_1 = __importDefault(require("../Checkbox"));
|
|
61
62
|
var SelectBox = (0, react_1.forwardRef)(function (_a, ref) {
|
|
62
63
|
var _b, _c, _d, _e;
|
|
63
64
|
var _f = _a.isSearchable, isSearchable = _f === void 0 ? props_1.SelectBoxDefault.isSearchable : _f, _g = _a.menuIsOpen, menuIsOpen = _g === void 0 ? props_1.SelectBoxDefault.menuIsOpen : _g, _h = _a.label, label = _h === void 0 ? props_1.SelectBoxDefault.label : _h, _j = _a.width, width = _j === void 0 ? props_1.SelectBoxDefault.width : _j, _k = _a.name, name = _k === void 0 ? props_1.SelectBoxDefault.name : _k, _l = _a.placeholder, placeholder = _l === void 0 ? props_1.SelectBoxDefault.placeholder : _l, _m = _a.instanceId, instanceId = _m === void 0 ? props_1.SelectBoxDefault.instanceId : _m, _o = _a.options, options = _o === void 0 ? props_1.SelectBoxDefault.options : _o, _p = _a.lightBg, lightBg = _p === void 0 ? props_1.SelectBoxDefault.lightBg : _p, _q = _a.onChange, onChange = _q === void 0 ? props_1.SelectBoxDefault.onChange : _q, _r = _a.filterOption, filterOption = _r === void 0 ? props_1.SelectBoxDefault.filterOption : _r, _s = _a.hasError, hasError = _s === void 0 ? props_1.SelectBoxDefault.hasError : _s, _t = _a.errorMessage, errorMessage = _t === void 0 ? props_1.SelectBoxDefault.errorMessage : _t, _u = _a.maxOptionListHeight, maxOptionListHeight = _u === void 0 ? props_1.SelectBoxDefault.maxOptionListHeight : _u, _v = _a.isAsync, isAsync = _v === void 0 ? props_1.SelectBoxDefault.isAsync : _v, _w = _a.hasShowDropdownIcon, hasShowDropdownIcon = _w === void 0 ? props_1.SelectBoxDefault.hasShowDropdownIcon : _w, _x = _a.hasShowSearchIcon, hasShowSearchIcon = _x === void 0 ? props_1.SelectBoxDefault.hasShowSearchIcon : _x, _y = _a.autoComplete, autoComplete = _y === void 0 ? props_1.SelectBoxDefault.autoComplete : _y, _z = _a.menuPlacement, menuPlacement = _z === void 0 ? props_1.SelectBoxDefault.menuPlacement : _z, _0 = _a.id, id = _0 === void 0 ? props_1.SelectBoxDefault.id : _0, _1 = _a.isClearable, isClearable = _1 === void 0 ? props_1.SelectBoxDefault.isClearable : _1, _2 = _a.size, size = _2 === void 0 ? props_1.SelectBoxDefault.size : _2, _3 = _a.isMulti, isMulti = _3 === void 0 ? props_1.SelectBoxDefault.isMulti : _3, _4 = _a.menuPosition, menuPosition = _4 === void 0 ? props_1.SelectBoxDefault.menuPosition : _4, defaultValue = _a.defaultValue, other = __rest(_a, ["isSearchable", "menuIsOpen", "label", "width", "name", "placeholder", "instanceId", "options", "lightBg", "onChange", "filterOption", "hasError", "errorMessage", "maxOptionListHeight", "isAsync", "hasShowDropdownIcon", "hasShowSearchIcon", "autoComplete", "menuPlacement", "id", "isClearable", "size", "isMulti", "menuPosition", "defaultValue"]);
|
|
64
65
|
var simplebarRef = (0, react_1.useRef)(null);
|
|
65
66
|
var formatOptionLabel = function (_a) {
|
|
66
|
-
var _b
|
|
67
|
+
var _b;
|
|
67
68
|
var innerRef = _a.innerRef, innerProps = _a.innerProps, isDisabled = _a.isDisabled, data = _a.data, label = _a.label, type = _a.type, isFocused = _a.isFocused, isSelected = _a.isSelected, clearValue = _a.clearValue, cx = _a.cx, getStyles = _a.getStyles, getClassNames = _a.getClassNames, getValue = _a.getValue, hasValue = _a.hasValue, isMulti = _a.isMulti, isRtl = _a.isRtl, options = _a.options, selectOption = _a.selectOption, selectProps = _a.selectProps, setValue = _a.setValue, theme = _a.theme;
|
|
68
69
|
var event = window === null || window === void 0 ? void 0 : window.event;
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
70
|
+
var isFixedBottom = data === null || data === void 0 ? void 0 : data.isFixedBottom;
|
|
71
|
+
var isSmall = !data.labelBottom;
|
|
72
|
+
var isCustom = data === null || data === void 0 ? void 0 : data.isCustom;
|
|
73
|
+
var isDisabledOption = data === null || data === void 0 ? void 0 : data.isDisabled;
|
|
74
|
+
var isHideSelected = data === null || data === void 0 ? void 0 : data.isHideSelected;
|
|
75
|
+
return ((0, jsx_runtime_1.jsx)("div", __assign({ ref: innerRef }, innerProps, { className: (0, classnames_1.default)("customSelect__option", "option", (_b = {},
|
|
76
|
+
_b["customSelect__option--is-focused"] = isFocused,
|
|
77
|
+
_b["customSelect__option--is-selected"] = isSelected && !isHideSelected,
|
|
78
|
+
_b["optionSm"] = isSmall,
|
|
79
|
+
_b["fixedBottom"] = isFixedBottom,
|
|
80
|
+
_b["isDisabled"] = isDisabledOption,
|
|
81
|
+
_b["isCustom"] = isCustom,
|
|
82
|
+
_b)), onClick: function (e) {
|
|
83
|
+
if (!isDisabledOption) {
|
|
84
|
+
innerProps.onClick(e);
|
|
85
|
+
}
|
|
86
|
+
} }, { children: isCustom ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "customContent" }, { children: data.customContent }))) : ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "option-container" }, { children: [isMulti && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "checkbox-container" }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: "insuranceCheckbox", checked: isSelected, size: "small" }) }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "option-content" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "left" }, { children: [((data === null || data === void 0 ? void 0 : data.optionLabel) || data.label) && (0, jsx_runtime_1.jsx)("strong", { children: (data === null || data === void 0 ? void 0 : data.optionLabel) || (data === null || data === void 0 ? void 0 : data.label) }), data.labelBottom && (0, jsx_runtime_1.jsx)("span", { children: data.labelBottom })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "right" }, { children: [data.price && (0, jsx_runtime_1.jsxs)("strong", { children: [data.price, data.priceSm && (0, jsx_runtime_1.jsx)("small", { children: data.priceSm })] }), data.period && (0, jsx_runtime_1.jsx)("span", { children: data.period })] }))] }))] }))) })));
|
|
80
87
|
};
|
|
81
88
|
var Input = function (props) { return (0, jsx_runtime_1.jsx)(react_select_1.components.Input, __assign({}, props, { autoComplete: autoComplete })); };
|
|
82
89
|
var DropdownIndicator = function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ className: "customSelect__indicator customSelect__dropdown-indicator" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "ArrowDownBig" }) })); };
|
|
@@ -84,6 +91,32 @@ var SelectBox = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
84
91
|
var MenuList = function (props) {
|
|
85
92
|
return ((0, jsx_runtime_1.jsx)(react_select_1.components.MenuList, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(simplebar_react_1.default, __assign({ ref: simplebarRef, autoHide: false }, { children: props.children })) })));
|
|
86
93
|
};
|
|
87
|
-
|
|
94
|
+
// Custom components for multi-select appearance
|
|
95
|
+
var MultiValue = function (props) {
|
|
96
|
+
var data = props.data, selectProps = props.selectProps;
|
|
97
|
+
var selectedValues = selectProps.value || [];
|
|
98
|
+
// Only render for the first selected item
|
|
99
|
+
if (selectedValues.indexOf(data) !== 0) {
|
|
100
|
+
return null;
|
|
101
|
+
}
|
|
102
|
+
// Get the first selected option's label
|
|
103
|
+
var firstOption = selectedValues[0];
|
|
104
|
+
var firstLabel = firstOption.label || firstOption.title || '';
|
|
105
|
+
// Add +N indicator if there are additional selections
|
|
106
|
+
var additionalCount = selectedValues.length - 1;
|
|
107
|
+
var additionalText = additionalCount > 0 ? " (+".concat(additionalCount, ")") : '';
|
|
108
|
+
return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "customSelect__multi-value" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "customSelect__multi-value__label" }, { children: [(0, jsx_runtime_1.jsx)("span", { children: firstLabel }), (0, jsx_runtime_1.jsx)("span", { children: additionalText })] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "customSelect__multi-value__remove", onClick: function (e) {
|
|
109
|
+
e.stopPropagation();
|
|
110
|
+
// Use onChange to clear all selections
|
|
111
|
+
if (selectProps.onChange) {
|
|
112
|
+
selectProps.onChange([], { action: 'clear' });
|
|
113
|
+
}
|
|
114
|
+
} }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CloseSmall", width: "10px", height: "10px", color: "var(--dark)" }) }))] })));
|
|
115
|
+
};
|
|
116
|
+
// Override the default container to ensure our custom MultiValue is properly positioned
|
|
117
|
+
var ValueContainer = function (props) {
|
|
118
|
+
return ((0, jsx_runtime_1.jsx)(react_select_1.components.ValueContainer, __assign({}, props, { children: props.children })));
|
|
119
|
+
};
|
|
120
|
+
return ((0, jsx_runtime_1.jsxs)(SelectBox_styled_1.Container, __assign({ "$width": width, "$hasError": hasError, "$maxOptionListHeight": maxOptionListHeight, "$hasShowDropdownIcon": hasShowDropdownIcon, "$MenuPlacement": menuPlacement, "$size": size, "$isMulti": isMulti, "$menuPosition": menuPosition }, { children: [label && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "top" }, { children: (0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: id }, { children: label })) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "select" }, { children: isAsync ? ((0, jsx_runtime_1.jsx)(async_1.default, __assign({ components: { Option: formatOptionLabel, Input: Input, DropdownIndicator: DropdownIndicator, MenuList: MenuList, LoadingIndicator: LoadingIndicator, MultiValue: MultiValue }, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_b = {}, _b['isSearchable'] = isSearchable && hasShowSearchIcon, _b), (_c = {}, _c['lightBg'] = lightBg, _c)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; }, loadingMessage: function () { return 'Sonuç bulunamadı'; }, captureMenuScroll: false, isClearable: isClearable, defaultValue: defaultValue, isMulti: isMulti, closeMenuOnSelect: !isMulti, hideSelectedOptions: false }, other, { ref: ref, id: id }))) : ((0, jsx_runtime_1.jsx)(react_select_1.default, __assign({ components: { Option: formatOptionLabel, Input: Input, DropdownIndicator: DropdownIndicator, MenuList: MenuList, LoadingIndicator: LoadingIndicator, MultiValue: MultiValue }, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_d = {}, _d['isSearchable'] = isSearchable && hasShowSearchIcon, _d), (_e = {}, _e['lightBg'] = lightBg, _e)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; }, captureMenuScroll: false, isClearable: isClearable, defaultValue: defaultValue, isMulti: isMulti, closeMenuOnSelect: !isMulti, hideSelectedOptions: false }, other, { ref: ref, id: id }))) })), hasError && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
|
|
88
121
|
});
|
|
89
122
|
exports.default = SelectBox;
|
|
@@ -13,7 +13,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
|
|
|
13
13
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
14
14
|
var svgToBase64_1 = __importDefault(require("./../../utils/svgToBase64"));
|
|
15
15
|
var devices_1 = require("../../constants/devices");
|
|
16
|
-
exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n }\n\n [data-simplebar] {\n max-height: ", " !important;\n height: auto !important;\n padding: 0 !important;\n\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font: var(--caption-semi-bold-11-13);\n }\n }\n\n .select {\n position: relative;\n\n .customSelect {\n &:is(.lightBg) {\n .customSelect__control {\n background-color: white;\n }\n }\n\n .customSelect__control {\n background-color: var(--dark-opacity-3);\n border: 0;\n padding: ", ";\n cursor: pointer;\n\n &:before {\n content: \"\";\n position: absolute;\n inset: 0;\n user-select: none;\n pointer-events: none;\n border-width: ", ";\n border-style: solid;\n border-radius: 0.5rem;\n border-color: ", ";\n }\n ", "\n /*&:hover {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n }\n }*/\n\n .customSelect__value-container {\n padding: 0;\n min-height: ", ";\n\n &:is(.customSelect__value-container--is-multi) {\n display: block;\n padding: 1rem 0;\n }\n\n .customSelect__multi-value {\n border: 1px solid var(--grey-10);\n border-radius: 0.25rem;\n background-color: var(--dark-opacity-3);\n margin: 0;\n justify-content: space-between;\n display: grid;\n grid-template-columns: 1fr auto;\n position: relative;\n z-index: 5;\n + .customSelect__multi-value {\n margin-top: 0.5rem;\n }\n\n .customSelect__multi-value__label {\n font: var(--body-semi-bold-13-16);\n }\n\n .customSelect__multi-value__remove {\n background-color: transparent !important;\n color: var(--dark) !important;\n }\n }\n\n .customSelect__placeholder {\n font: var(--body-semi-bold-14-17);\n color: ", ";\n margin: 0;\n line-height: 1.5rem;\n }\n\n .customSelect__single-value {\n margin: 0;\n padding: 0;\n font: var(--body-semi-bold-14-17);\n color: ", ";\n }\n\n .customSelect__input-container {\n margin: 0;\n padding: 0;\n position: absolute;\n bottom: 0;\n top: 0;\n margin-top: 0;\n width: 100% !important;\n display: block !important;\n &:after {\n display: none;\n }\n\n input {\n font: var(--body-semi-bold-14-17) !important;\n width: 100% !important;\n display: block !important;\n height: 100% !important;\n }\n }\n }\n .customSelect__value-container--has-value{\n .customSelect__input-container {\n margin-top: ", " !important;\n position: static !important;\n }\n }\n .customSelect__indicators{\n height: 56px;\n }\n .customSelect__indicator {\n padding: 0;\n margin: 0 0 0 0.5rem;\n width: 1.5rem;\n height: 1.5rem;\n transition: all .2s ease;\n\n &:is(.customSelect__dropdown-indicator) {\n ", ";\n }\n\n &:is(.customSelect__clear-indicator) {\n width: 1.5rem;\n height: 1.5rem;\n display: block !important;\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: center center;\n svg {\n display: none;\n }\n\n ~ .customSelect__dropdown-indicator {\n display: none;\n }\n }\n\n div {\n display: block;\n }\n }\n\n .customSelect__indicator-separator {\n display: none;\n }\n .customSelect__loading-indicator{\n width: 1.5rem;\n span{\n display: none;\n }\n ~ *{\n display: none !important;\n ~ *{\n display: none !important;\n }\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__value-container {\n background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');\n background-repeat: no-repeat;\n background-position: 0 center;\n padding: 11px 24px 11px 2rem;\n\n &.customSelect__value-container--has-value {\n background-image: ", ";\n }\n }\n }\n .customSelect__control--is-focused {\n border-color: var(--primary);\n box-shadow: none;\n &:is(.customSelect__control--menu-is-open){\n .customSelect__input-container {\n margin-top: 0 !important;\n }\n .customSelect__value-container--has-value{\n .customSelect__input-container {\n margin-top: ", ";\n position: static;\n\n input {\n\n }\n }\n }\n }\n }\n\n .customSelect__menu-notice {\n text-align: start;\n padding: 1rem 1.5rem;\n font: var(--body-medium-14-17);\n color: var(--dark-opacity-50);\n }\n\n .customSelect__menu {\n margin: 0;\n border-radius: 0 0 0.5rem 0.5rem;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n position: ", ";\n .customSelect__menu-list {\n padding: 0;\n //max-height: ", ";\n max-height: initial !important;\n //scroll-margin: 0 10px 30px 0;\n //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n //scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n\n .option {\n height: 70px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n box-sizing: border-box;\n\n &:hover, &:is(.customSelect__option--is-selected) {\n background-color: var(--dark-opacity-3) !important;\n\n @media only screen and ", " {\n //background-color: transparent !important;\n }\n }\n\n &:is(.customSelect__option--is-focused) {\n background-color: transparent;\n }\n\n &:active {\n background-color: var(--dark-opacity-3);\n\n @media only screen and ", " {\n background-color: transparent !important;\n }\n }\n\n &:is(.optionSm) {\n height: auto;\n min-height: 51px;\n padding: 1rem 1.5rem;\n }\n\n &:is(.fixedBottom) {\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n\n strong {\n color: var(--dark-opacity-50);\n }\n }\n\n > div {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n\n .left {\n strong {\n display: block;\n font: var(--title-bold-16-19);\n }\n\n span {\n display: block;\n font: var(--body-medium-13-16);\n }\n }\n\n .right {\n display: flex;\n align-items: end;\n justify-content: flex-end;\n\n strong {\n display: block;\n font: var(--title-extra-bold-16-19);\n line-height: 17px;\n\n small {\n font: var(--body-extra-bold-14-17);\n }\n }\n\n span {\n display: block;\n font: var(--body-regular-13-16);\n margin-left: 0.2rem;\n }\n }\n }\n\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__control--menu-is-open {\n .customSelect__value-container {\n background-image: url('", "') !important;\n }\n }\n }\n\n .customSelect__control--menu-is-open {\n &:before {\n border-color: var(--primary);\n border-width: 2px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n box-shadow: none;\n\n .customSelect__indicator {\n &:is(.customSelect__dropdown-indicator) {\n transform: rotate(180deg);\n }\n }\n\n .customSelect__value-container {\n .customSelect__placeholder {\n color: var(--dark-opacity-50);\n }\n }\n\n\n .customSelect__clear-indicator {\n display: none !important;\n }\n\n\n .customSelect__single-value {\n color: var(--dark) !important;\n }\n }\n }\n }\n\n .placement-top {\n .customSelect__menu {\n border-radius: 0.5rem 0.5rem 0 0 !important;\n top: auto !important;\n bottom: 100% !important;\n }\n\n .customSelect__control--menu-is-open {\n &:before {\n border-radius: 0 0 0.5rem 0.5rem !important;\n }\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n }\n\n [data-simplebar] {\n max-height: ", " !important;\n height: auto !important;\n padding: 0 !important;\n\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font: var(--caption-semi-bold-11-13);\n }\n }\n\n .select {\n position: relative;\n\n .customSelect {\n &:is(.lightBg) {\n .customSelect__control {\n background-color: white;\n }\n }\n\n .customSelect__control {\n background-color: var(--dark-opacity-3);\n border: 0;\n padding: ", ";\n cursor: pointer;\n\n &:before {\n content: \"\";\n position: absolute;\n inset: 0;\n user-select: none;\n pointer-events: none;\n border-width: ", ";\n border-style: solid;\n border-radius: 0.5rem;\n border-color: ", ";\n }\n ", "\n /*&:hover {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n }\n }*/\n\n .customSelect__value-container {\n padding: 0;\n min-height: ", ";\n\n &:is(.customSelect__value-container--is-multi) {\n display: block;\n padding: 1rem 0;\n }\n\n .customSelect__multi-value {\n border: 1px solid var(--grey-10);\n border-radius: 0.25rem;\n background-color: var(--dark-opacity-3);\n margin: 0;\n justify-content: space-between;\n display: grid;\n grid-template-columns: 1fr auto;\n position: relative;\n z-index: 5;\n + .customSelect__multi-value {\n margin-top: 0.5rem;\n }\n\n .customSelect__multi-value__label {\n font: var(--body-semi-bold-13-16);\n }\n\n .customSelect__multi-value__remove {\n background-color: transparent !important;\n color: var(--dark) !important;\n }\n }\n\n .customSelect__placeholder {\n font: var(--body-semi-bold-14-17);\n color: ", ";\n margin: 0;\n line-height: 1.5rem;\n }\n\n .customSelect__single-value {\n margin: 0;\n padding: 0;\n font: var(--body-semi-bold-14-17);\n color: ", ";\n }\n\n .customSelect__input-container {\n margin: 0;\n padding: 0;\n position: absolute;\n bottom: 0;\n top: 0;\n margin-top: 0;\n width: 100% !important;\n display: block !important;\n &:after {\n display: none;\n }\n\n input {\n font: var(--body-semi-bold-14-17) !important;\n width: 100% !important;\n display: block !important;\n height: 100% !important;\n }\n }\n }\n .customSelect__value-container--has-value{\n .customSelect__input-container {\n margin-top: ", " !important;\n position: static !important;\n }\n }\n .customSelect__indicators{\n height: 56px;\n }\n .customSelect__indicator {\n padding: 0;\n margin: 0 0 0 0.5rem;\n width: 1.5rem;\n height: 1.5rem;\n transition: all .2s ease;\n\n &:is(.customSelect__dropdown-indicator) {\n ", ";\n }\n\n &:is(.customSelect__clear-indicator) {\n width: 1.5rem;\n height: 1.5rem;\n display: block !important;\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: center center;\n svg {\n display: none;\n }\n\n ~ .customSelect__dropdown-indicator {\n display: none;\n }\n }\n\n div {\n display: block;\n }\n }\n\n .customSelect__indicator-separator {\n display: none;\n }\n .customSelect__loading-indicator{\n width: 1.5rem;\n span{\n display: none;\n }\n ~ *{\n display: none !important;\n ~ *{\n display: none !important;\n }\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__value-container {\n background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');\n background-repeat: no-repeat;\n background-position: 0 center;\n padding: 11px 24px 11px 2rem;\n\n &.customSelect__value-container--has-value {\n background-image: ", ";\n }\n }\n }\n .customSelect__control--is-focused {\n border-color: var(--primary);\n box-shadow: none;\n &:is(.customSelect__control--menu-is-open){\n .customSelect__input-container {\n margin-top: 0 !important;\n }\n .customSelect__value-container--has-value{\n .customSelect__input-container {\n margin-top: ", ";\n position: static;\n\n input {\n\n }\n }\n }\n }\n }\n\n .customSelect__menu-notice {\n text-align: start;\n padding: 1rem 1.5rem;\n font: var(--body-medium-14-17);\n color: var(--dark-opacity-50);\n }\n\n .customSelect__menu {\n margin: 0;\n border-radius: 0 0 0.5rem 0.5rem;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n position: ", ";\n .customSelect__menu-list {\n padding: 0;\n //max-height: ", ";\n max-height: initial !important;\n //scroll-margin: 0 10px 30px 0;\n //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n //scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n\n .option {\n height: 70px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n box-sizing: border-box;\n\n &:hover, &:is(.customSelect__option--is-selected) {\n background-color: var(--dark-opacity-3) !important;\n\n @media only screen and ", " {\n //background-color: transparent !important;\n }\n }\n\n &:is(.customSelect__option--is-focused) {\n background-color: transparent;\n }\n\n &:active {\n background-color: var(--dark-opacity-3);\n\n @media only screen and ", " {\n background-color: transparent !important;\n }\n }\n\n &:is(.optionSm) {\n height: auto;\n min-height: 51px;\n padding: 1rem 1.5rem;\n }\n\n &:is(.fixedBottom) {\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n\n strong {\n color: var(--dark-opacity-50);\n }\n }\n\n > div {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n\n .left {\n strong {\n display: block;\n font: var(--title-bold-16-19);\n }\n\n span {\n display: block;\n font: var(--body-medium-13-16);\n }\n }\n\n .right {\n display: flex;\n align-items: end;\n justify-content: flex-end;\n\n strong {\n display: block;\n font: var(--title-extra-bold-16-19);\n line-height: 17px;\n\n small {\n font: var(--body-extra-bold-14-17);\n }\n }\n\n span {\n display: block;\n font: var(--body-regular-13-16);\n margin-left: 0.2rem;\n }\n }\n }\n\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__control--menu-is-open {\n .customSelect__value-container {\n background-image: url('", "') !important;\n }\n }\n }\n\n .customSelect__control--menu-is-open {\n &:before {\n border-color: var(--primary);\n border-width: 2px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n box-shadow: none;\n\n .customSelect__indicator {\n &:is(.customSelect__dropdown-indicator) {\n transform: rotate(180deg);\n }\n }\n\n .customSelect__value-container {\n .customSelect__placeholder {\n color: var(--dark-opacity-50);\n }\n }\n\n\n .customSelect__clear-indicator {\n display: none !important;\n }\n\n\n .customSelect__single-value {\n color: var(--dark) !important;\n }\n }\n }\n }\n\n .placement-top {\n .customSelect__menu {\n border-radius: 0.5rem 0.5rem 0 0 !important;\n top: auto !important;\n bottom: 100% !important;\n }\n\n .customSelect__control--menu-is-open {\n &:before {\n border-radius: 0 0 0.5rem 0.5rem !important;\n }\n }\n }\n"])), function (props) { return props.$width || '370px'; }, function (props) { return props.$maxOptionListHeight && props.$maxOptionListHeight; }, function (props) { return props.$hasShowDropdownIcon ? "0 1rem 0 1.5rem" : "0 1.5rem"; }, function (props) { return props.$hasError ? "2px" : "1px"; }, function (props) { return props.$hasError ? "var(--red)" : "var(--dark-opacity-10)"; }, function (props) { return props.$isMulti ? "\n &:is(.customSelect__control--menu-is-open){\n background-color: white !important;\n }\n " : ""; }, function (props) {
|
|
16
|
+
exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n /* Checkbox styling for multi-select options */\n .option-container {\n display: flex;\n align-items: center;\n width: 100%;\n }\n \n .checkbox-container {\n display: flex;\n align-items: center;\n }\n \n .custom-checkbox {\n width: 16px;\n height: 16px;\n border: 1px solid var(--dark-opacity-10);\n border-radius: 3px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: white;\n }\n \n .custom-checkbox.checked {\n background-color: var(--primary);\n border-color: var(--primary);\n }\n \n .option-content {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n }\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n }\n\n [data-simplebar] {\n max-height: ", " !important;\n height: auto !important;\n padding: 0 !important;\n\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font: var(--caption-semi-bold-11-13);\n }\n }\n\n .select {\n position: relative;\n z-index: 2;\n .customSelect {\n &:is(.lightBg) {\n .customSelect__control {\n background-color: white;\n }\n }\n\n .customSelect__control {\n background-color: var(--dark-opacity-3);\n border: 0;\n padding: ", ";\n cursor: pointer;\n\n &:before {\n content: \"\";\n position: absolute;\n inset: 0;\n user-select: none;\n pointer-events: none;\n border-width: ", ";\n border-style: solid;\n border-radius: 0.5rem;\n border-color: ", ";\n }\n ", "\n /*&:hover {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n }\n }*/\n\n .customSelect__value-container {\n padding: 0;\n min-height: ", ";\n\n &:is(.customSelect__value-container--is-multi) {\n display: block;\n padding: 1rem 0;\n }\n\n .customSelect__multi-value {\n border: 1px solid var(--grey-10);\n border-radius: 0.25rem;\n background-color: var(--dark-opacity-3);\n margin: 0;\n justify-content: space-between;\n display: grid;\n grid-template-columns: 1fr auto;\n position: relative;\n z-index: 5;\n + .customSelect__multi-value {\n margin-top: 0.5rem;\n }\n\n .customSelect__multi-value__label {\n font: var(--body-semi-bold-13-16); \n white-space: nowrap;\n border-radius: 2px;\n color: hsl(0, 0%, 20%);\n padding: 3px 3px 3px 6px;\n box-sizing: border-box;\n display: grid;\n align-items: center;\n grid-template-columns: auto auto;\n justify-content: flex-start;\n span{\n overflow: hidden;\n text-overflow: ellipsis;\n &:nth-child(2){\n margin-left: 0.25rem;\n }\n }\n }\n\n .customSelect__multi-value__remove {\n background-color: transparent !important;\n color: var(--dark) !important;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n border-radius: 2px;\n padding-left: 4px;\n padding-right: 4px;\n box-sizing: border-box;\n svg{\n width: 1rem;\n height: 1rem;\n }\n }\n }\n\n .customSelect__placeholder {\n font: var(--body-semi-bold-14-17);\n color: ", ";\n margin: 0;\n line-height: 1.5rem;\n }\n\n .customSelect__single-value {\n margin: 0;\n padding: 0;\n font: var(--body-semi-bold-14-17);\n color: ", ";\n }\n\n .customSelect__input-container {\n margin: 0;\n padding: 0;\n position: absolute;\n bottom: 0;\n top: 0;\n margin-top: 0;\n width: 100% !important;\n display: block !important;\n &:after {\n display: none;\n }\n\n input {\n font: var(--body-semi-bold-14-17) !important;\n width: 100% !important;\n display: block !important;\n height: 100% !important;\n }\n }\n }\n .customSelect__value-container--has-value{\n .customSelect__input-container {\n margin-top: ", " !important;\n //position: static !important;\n }\n }\n .customSelect__indicators{\n height: 56px;\n }\n .customSelect__indicator {\n padding: 0;\n margin: 0 0 0 0.5rem;\n width: 1.5rem;\n height: 1.5rem;\n transition: all .2s ease;\n\n &:is(.customSelect__dropdown-indicator) {\n ", ";\n }\n\n &:is(.customSelect__clear-indicator) {\n width: 1.5rem;\n height: 1.5rem;\n display: block !important;\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: center center;\n svg {\n display: none;\n }\n\n ~ .customSelect__dropdown-indicator {\n display: none;\n }\n }\n\n div {\n display: block;\n }\n }\n\n .customSelect__indicator-separator {\n display: none;\n }\n .customSelect__loading-indicator{\n width: 1.5rem;\n span{\n display: none;\n }\n ~ *{\n display: none !important;\n ~ *{\n display: none !important;\n }\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__value-container {\n background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');\n background-repeat: no-repeat;\n background-position: 0 center;\n padding: 11px 24px 11px 2rem;\n\n &.customSelect__value-container--has-value {\n background-image: ", ";\n }\n }\n }\n .customSelect__control--is-focused {\n border-color: var(--primary);\n box-shadow: none;\n .customSelect__input-container {\n margin-top: 0 !important;\n }\n .customSelect__value-container--has-value{\n .customSelect__input-container {\n margin-top: ", ";\n position: static;\n\n input {\n\n }\n }\n }\n }\n\n .customSelect__menu-notice {\n text-align: start;\n padding: 1rem 1.5rem;\n font: var(--body-medium-14-17);\n color: var(--dark-opacity-50);\n }\n\n .customSelect__menu {\n margin: 0;\n border-radius: 0 0 0.5rem 0.5rem;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n position: ", ";\n .customSelect__menu-list {\n padding: 0;\n //max-height: ", ";\n max-height: initial !important;\n //scroll-margin: 0 10px 30px 0;\n //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n //scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n\n .option {\n height: 70px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n box-sizing: border-box;\n\n &:hover, &:is(.customSelect__option--is-selected) {\n background-color: var(--dark-opacity-3) !important;\n\n @media only screen and ", " {\n //background-color: transparent !important;\n }\n }\n\n &:is(.customSelect__option--is-focused) {\n background-color: transparent;\n }\n\n &:active {\n background-color: var(--dark-opacity-3);\n\n @media only screen and ", " {\n background-color: transparent !important;\n }\n }\n\n &:is(.optionSm) {\n height: auto;\n min-height: 51px;\n padding: 1rem 1.5rem;\n }\n\n &:is(.fixedBottom) {\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n\n strong {\n color: var(--dark-opacity-50);\n }\n }\n\n > div {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n\n .left {\n strong {\n display: block;\n font: var(--title-bold-16-19);\n }\n\n span {\n display: block;\n font: var(--body-medium-13-16);\n }\n }\n\n .right {\n display: flex;\n align-items: end;\n justify-content: flex-end;\n\n strong {\n display: block;\n font: var(--title-extra-bold-16-19);\n line-height: 17px;\n\n small {\n font: var(--body-extra-bold-14-17);\n }\n }\n\n span {\n display: block;\n font: var(--body-regular-13-16);\n margin-left: 0.2rem;\n }\n }\n }\n\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__control--menu-is-open {\n .customSelect__value-container {\n background-image: url('", "') !important;\n }\n }\n }\n\n .customSelect__control--menu-is-open {\n &:before {\n border-color: var(--primary);\n border-width: 2px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n box-shadow: none;\n\n .customSelect__indicator {\n &:is(.customSelect__dropdown-indicator) {\n transform: rotate(180deg);\n }\n }\n\n .customSelect__value-container {\n .customSelect__placeholder {\n color: var(--dark-opacity-50);\n }\n }\n\n\n .customSelect__clear-indicator {\n display: none !important;\n }\n\n\n .customSelect__single-value {\n color: var(--dark) !important;\n }\n }\n }\n }\n\n .placement-top {\n .customSelect__menu {\n border-radius: 0.5rem 0.5rem 0 0 !important;\n top: auto !important;\n bottom: 100% !important;\n }\n\n .customSelect__control--menu-is-open {\n &:before {\n border-radius: 0 0 0.5rem 0.5rem !important;\n }\n }\n }\n"], ["\n /* Checkbox styling for multi-select options */\n .option-container {\n display: flex;\n align-items: center;\n width: 100%;\n }\n \n .checkbox-container {\n display: flex;\n align-items: center;\n }\n \n .custom-checkbox {\n width: 16px;\n height: 16px;\n border: 1px solid var(--dark-opacity-10);\n border-radius: 3px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: white;\n }\n \n .custom-checkbox.checked {\n background-color: var(--primary);\n border-color: var(--primary);\n }\n \n .option-content {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n }\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n }\n\n [data-simplebar] {\n max-height: ", " !important;\n height: auto !important;\n padding: 0 !important;\n\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font: var(--caption-semi-bold-11-13);\n }\n }\n\n .select {\n position: relative;\n z-index: 2;\n .customSelect {\n &:is(.lightBg) {\n .customSelect__control {\n background-color: white;\n }\n }\n\n .customSelect__control {\n background-color: var(--dark-opacity-3);\n border: 0;\n padding: ", ";\n cursor: pointer;\n\n &:before {\n content: \"\";\n position: absolute;\n inset: 0;\n user-select: none;\n pointer-events: none;\n border-width: ", ";\n border-style: solid;\n border-radius: 0.5rem;\n border-color: ", ";\n }\n ", "\n /*&:hover {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n }\n }*/\n\n .customSelect__value-container {\n padding: 0;\n min-height: ", ";\n\n &:is(.customSelect__value-container--is-multi) {\n display: block;\n padding: 1rem 0;\n }\n\n .customSelect__multi-value {\n border: 1px solid var(--grey-10);\n border-radius: 0.25rem;\n background-color: var(--dark-opacity-3);\n margin: 0;\n justify-content: space-between;\n display: grid;\n grid-template-columns: 1fr auto;\n position: relative;\n z-index: 5;\n + .customSelect__multi-value {\n margin-top: 0.5rem;\n }\n\n .customSelect__multi-value__label {\n font: var(--body-semi-bold-13-16); \n white-space: nowrap;\n border-radius: 2px;\n color: hsl(0, 0%, 20%);\n padding: 3px 3px 3px 6px;\n box-sizing: border-box;\n display: grid;\n align-items: center;\n grid-template-columns: auto auto;\n justify-content: flex-start;\n span{\n overflow: hidden;\n text-overflow: ellipsis;\n &:nth-child(2){\n margin-left: 0.25rem;\n }\n }\n }\n\n .customSelect__multi-value__remove {\n background-color: transparent !important;\n color: var(--dark) !important;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n border-radius: 2px;\n padding-left: 4px;\n padding-right: 4px;\n box-sizing: border-box;\n svg{\n width: 1rem;\n height: 1rem;\n }\n }\n }\n\n .customSelect__placeholder {\n font: var(--body-semi-bold-14-17);\n color: ", ";\n margin: 0;\n line-height: 1.5rem;\n }\n\n .customSelect__single-value {\n margin: 0;\n padding: 0;\n font: var(--body-semi-bold-14-17);\n color: ", ";\n }\n\n .customSelect__input-container {\n margin: 0;\n padding: 0;\n position: absolute;\n bottom: 0;\n top: 0;\n margin-top: 0;\n width: 100% !important;\n display: block !important;\n &:after {\n display: none;\n }\n\n input {\n font: var(--body-semi-bold-14-17) !important;\n width: 100% !important;\n display: block !important;\n height: 100% !important;\n }\n }\n }\n .customSelect__value-container--has-value{\n .customSelect__input-container {\n margin-top: ", " !important;\n //position: static !important;\n }\n }\n .customSelect__indicators{\n height: 56px;\n }\n .customSelect__indicator {\n padding: 0;\n margin: 0 0 0 0.5rem;\n width: 1.5rem;\n height: 1.5rem;\n transition: all .2s ease;\n\n &:is(.customSelect__dropdown-indicator) {\n ", ";\n }\n\n &:is(.customSelect__clear-indicator) {\n width: 1.5rem;\n height: 1.5rem;\n display: block !important;\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: center center;\n svg {\n display: none;\n }\n\n ~ .customSelect__dropdown-indicator {\n display: none;\n }\n }\n\n div {\n display: block;\n }\n }\n\n .customSelect__indicator-separator {\n display: none;\n }\n .customSelect__loading-indicator{\n width: 1.5rem;\n span{\n display: none;\n }\n ~ *{\n display: none !important;\n ~ *{\n display: none !important;\n }\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__value-container {\n background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');\n background-repeat: no-repeat;\n background-position: 0 center;\n padding: 11px 24px 11px 2rem;\n\n &.customSelect__value-container--has-value {\n background-image: ", ";\n }\n }\n }\n .customSelect__control--is-focused {\n border-color: var(--primary);\n box-shadow: none;\n .customSelect__input-container {\n margin-top: 0 !important;\n }\n .customSelect__value-container--has-value{\n .customSelect__input-container {\n margin-top: ", ";\n position: static;\n\n input {\n\n }\n }\n }\n }\n\n .customSelect__menu-notice {\n text-align: start;\n padding: 1rem 1.5rem;\n font: var(--body-medium-14-17);\n color: var(--dark-opacity-50);\n }\n\n .customSelect__menu {\n margin: 0;\n border-radius: 0 0 0.5rem 0.5rem;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n position: ", ";\n .customSelect__menu-list {\n padding: 0;\n //max-height: ", ";\n max-height: initial !important;\n //scroll-margin: 0 10px 30px 0;\n //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n //scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n\n .option {\n height: 70px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n box-sizing: border-box;\n\n &:hover, &:is(.customSelect__option--is-selected) {\n background-color: var(--dark-opacity-3) !important;\n\n @media only screen and ", " {\n //background-color: transparent !important;\n }\n }\n\n &:is(.customSelect__option--is-focused) {\n background-color: transparent;\n }\n\n &:active {\n background-color: var(--dark-opacity-3);\n\n @media only screen and ", " {\n background-color: transparent !important;\n }\n }\n\n &:is(.optionSm) {\n height: auto;\n min-height: 51px;\n padding: 1rem 1.5rem;\n }\n\n &:is(.fixedBottom) {\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n\n strong {\n color: var(--dark-opacity-50);\n }\n }\n\n > div {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n\n .left {\n strong {\n display: block;\n font: var(--title-bold-16-19);\n }\n\n span {\n display: block;\n font: var(--body-medium-13-16);\n }\n }\n\n .right {\n display: flex;\n align-items: end;\n justify-content: flex-end;\n\n strong {\n display: block;\n font: var(--title-extra-bold-16-19);\n line-height: 17px;\n\n small {\n font: var(--body-extra-bold-14-17);\n }\n }\n\n span {\n display: block;\n font: var(--body-regular-13-16);\n margin-left: 0.2rem;\n }\n }\n }\n\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__control--menu-is-open {\n .customSelect__value-container {\n background-image: url('", "') !important;\n }\n }\n }\n\n .customSelect__control--menu-is-open {\n &:before {\n border-color: var(--primary);\n border-width: 2px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n box-shadow: none;\n\n .customSelect__indicator {\n &:is(.customSelect__dropdown-indicator) {\n transform: rotate(180deg);\n }\n }\n\n .customSelect__value-container {\n .customSelect__placeholder {\n color: var(--dark-opacity-50);\n }\n }\n\n\n .customSelect__clear-indicator {\n display: none !important;\n }\n\n\n .customSelect__single-value {\n color: var(--dark) !important;\n }\n }\n }\n }\n\n .placement-top {\n .customSelect__menu {\n border-radius: 0.5rem 0.5rem 0 0 !important;\n top: auto !important;\n bottom: 100% !important;\n }\n\n .customSelect__control--menu-is-open {\n &:before {\n border-radius: 0 0 0.5rem 0.5rem !important;\n }\n }\n }\n"])), function (props) { return props.$width || '370px'; }, function (props) { return props.$maxOptionListHeight && props.$maxOptionListHeight; }, function (props) { return props.$hasShowDropdownIcon ? "0 1rem 0 1.5rem" : "0 1.5rem"; }, function (props) { return props.$hasError ? "2px" : "1px"; }, function (props) { return props.$hasError ? "var(--red)" : "var(--dark-opacity-10)"; }, function (props) { return props.$isMulti ? "\n &:is(.customSelect__control--menu-is-open){\n background-color: white !important;\n }\n " : ""; }, function (props) {
|
|
17
17
|
switch (props.$size) {
|
|
18
18
|
case 'medium':
|
|
19
19
|
return "56px";
|