krl-alfred 1.80.8 → 1.80.10

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.
Files changed (4) hide show
  1. package/dist/components/Input/Input.js +2 -2
  2. package/dist/components/Input/Input.styled.js +1 -1
  3. package/dist/components/SelectBox/SelectBox.styled.js +2 -2
  4. package/package.json +1 -1
package/dist/components/Input/Input.js CHANGED
@@ -74,7 +74,7 @@ var Input = function (_a) {
74
74
  inputRef.current.blur();
75
75
  };
76
76
  var CustomDateInput = (0, react_1.forwardRef)(function (props, ref) {
77
- return ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: ref, "$hasError": hasError }, props)));
77
+ return ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: ref, "$hasError": hasError, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText }, props)));
78
78
  });
79
79
  var handleClearValue = function () {
80
80
  setInputValue(null);
@@ -98,6 +98,6 @@ var Input = function (_a) {
98
98
  } }) })) : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError, disabled: disabled, onChange: function (e) {
99
99
  onChange(e);
100
100
  setInputValue(e.currentTarget.value);
101
- }, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, id: id }, other))), (isClearable && inputValue) ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClearValue, className: "removeIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "CloseBig", width: "1rem", height: "1rem" }) }))) : (type === 'password' ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))) : (type === 'date' ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--grey-50)", name: "Calendar" }) }))) : (hasCopyButton && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) })))))), infoText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ iconStrokeWidth: "2px", popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), hasError && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }))] }));
101
+ }, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, id: id, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText }, other))), (isClearable && inputValue) ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClearValue, className: "removeIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "CloseBig", width: "1rem", height: "1rem" }) }))) : (type === 'password' ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))) : (type === 'date' ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--grey-50)", name: "Calendar" }) }))) : (hasCopyButton && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) })))))), infoText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ iconStrokeWidth: "2px", popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), hasError && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }))] }));
102
102
  };
103
103
  exports.default = Input;
package/dist/components/Input/Input.styled.js CHANGED
@@ -11,6 +11,6 @@ exports.DatePickerWrapperStyled = exports.InputStyled = exports.Container = expo
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n right: 8px;\n top: -20px;\n height: 28px;\n border-radius: 0.5rem;\n background-color: white;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n transition: opacity .4s ease;\n opacity: ", ";\n font: var(--caption-medium-10-12);\n"], ["\n position: absolute;\n right: 8px;\n top: -20px;\n height: 28px;\n border-radius: 0.5rem;\n background-color: white;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n transition: opacity .4s ease;\n opacity: ", ";\n font: var(--caption-medium-10-12);\n"])), function (props) { return props.$visible ? '1' : '0'; });
13
13
  exports.Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __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 /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n\n .inputIcon {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n\n &:not(.hasNoBg) {\n &:hover {\n background-color: var(--primary-opacity-5);\n }\n }\n }\n\n .removeIcon {\n position: absolute;\n top: 20.5px;\n right: 1.5rem;\n cursor: pointer;\n *{\n display: block;\n }\n }\n\n .popupText {\n font: var(--caption-semi-bold-11-13);\n text-align: center;\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 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 /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n\n .inputIcon {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n\n &:not(.hasNoBg) {\n &:hover {\n background-color: var(--primary-opacity-5);\n }\n }\n }\n\n .removeIcon {\n position: absolute;\n top: 20.5px;\n right: 1.5rem;\n cursor: pointer;\n *{\n display: block;\n }\n }\n\n .popupText {\n font: var(--caption-semi-bold-11-13);\n text-align: center;\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"])), function (props) { return props.$width || '370px'; });
14
- exports.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n padding: ", ";\n color: ", ";\n font: var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n -webkit-appearance: none;\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n\n &:is([disabled]) {\n color: var(--dark-opacity-25);\n }\n\n"], ["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n padding: ", ";\n color: ", ";\n font: var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n -webkit-appearance: none;\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n\n &:is([disabled]) {\n color: var(--dark-opacity-25);\n }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.$hasError ? 'white' : 'var(--dark-opacity-3)'); }, function (props) { return props.$hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.$hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; });
14
+ exports.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n padding: ", ";\n color: ", ";\n ", "\n font: var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n -webkit-appearance: none;\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n\n &:is([disabled]) {\n color: var(--dark-opacity-25);\n }\n\n"], ["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n padding: ", ";\n color: ", ";\n ", "\n font: var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n -webkit-appearance: none;\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n\n &:is([disabled]) {\n color: var(--dark-opacity-25);\n }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.$hasError ? 'white' : 'var(--dark-opacity-3)'); }, function (props) { return props.$hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.$hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.$hasIcon ? 'padding-right: 45px !important;' : ''; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; });
15
15
  exports.DatePickerWrapperStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n .react-datepicker-wrapper {\n display: block;\n }\n\n .react-datepicker-popper {\n transform: none !important;\n top: 100% !important;\n width: 100%;\n z-index: 5;\n\n .react-datepicker__triangle {\n display: none !important;\n }\n\n .react-datepicker {\n font-family: inherit !important;\n width: 100%;\n border: none !important;\n border-radius: 0 0 0.5rem 0.5rem !important;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n\n .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n background-color: transparent !important;\n color: inherit !important;\n }\n\n .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n margin: 0 !important;\n width: 1.5rem !important;\n height: 1.5rem !important;\n line-height: 1.5rem !important;\n }\n\n .react-datepicker__navigation {\n position: static;\n border-radius: 0.5rem;\n transition: all .2s ease;\n\n &:hover {\n background-color: white;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: 2;\n }\n }\n\n .react-datepicker__month-container {\n float: none !important;\n\n .react-datepicker__header {\n background-color: white !important;\n border: none !important;\n padding: 0 0 0 0 !important;\n\n .headerTopContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 1rem 1.5rem;\n\n .react-datepicker__navigation {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n .leftButtons, .rightButtons {\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--dark-opacity-50);\n\n svg {\n color: var(--dark-opacity-50);\n }\n }\n }\n\n .react-datepicker__current-month {\n display: block !important;\n font: var(--body-semi-bold-14-17);\n }\n }\n\n .react-datepicker__month {\n margin: 0 1.5rem 1rem 1.5rem !important;\n }\n\n .react-datepicker__day-names {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0.5rem 1.5rem !important;\n\n .react-datepicker__day-name {\n color: var(--grey-50);\n font: var(--body-medium-13-16);\n }\n }\n\n .react-datepicker__week {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n + .react-datepicker__week {\n margin-top: 0.5rem;\n }\n\n .react-datepicker__day {\n font: var(--caption-bold-12-15);\n color: var(--dark);\n outline: none !important;\n\n &:is(.react-datepicker__day--selected), &:hover {\n border-radius: 0.25rem;\n background-color: var(--primary-opacity-10) !important;\n color: var(--primary) !important;\n }\n\n &:is(.react-datepicker__day--today) {\n color: var(--primary) !important;\n }\n\n &:is(.react-datepicker__day--outside-month) {\n color: var(--grey-50);\n }\n }\n }\n }\n }\n }\n\n input {\n &:is(.react-datepicker-ignore-onclickoutside) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n"], ["\n .react-datepicker-wrapper {\n display: block;\n }\n\n .react-datepicker-popper {\n transform: none !important;\n top: 100% !important;\n width: 100%;\n z-index: 5;\n\n .react-datepicker__triangle {\n display: none !important;\n }\n\n .react-datepicker {\n font-family: inherit !important;\n width: 100%;\n border: none !important;\n border-radius: 0 0 0.5rem 0.5rem !important;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n\n .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n background-color: transparent !important;\n color: inherit !important;\n }\n\n .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n margin: 0 !important;\n width: 1.5rem !important;\n height: 1.5rem !important;\n line-height: 1.5rem !important;\n }\n\n .react-datepicker__navigation {\n position: static;\n border-radius: 0.5rem;\n transition: all .2s ease;\n\n &:hover {\n background-color: white;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: 2;\n }\n }\n\n .react-datepicker__month-container {\n float: none !important;\n\n .react-datepicker__header {\n background-color: white !important;\n border: none !important;\n padding: 0 0 0 0 !important;\n\n .headerTopContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 1rem 1.5rem;\n\n .react-datepicker__navigation {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n .leftButtons, .rightButtons {\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--dark-opacity-50);\n\n svg {\n color: var(--dark-opacity-50);\n }\n }\n }\n\n .react-datepicker__current-month {\n display: block !important;\n font: var(--body-semi-bold-14-17);\n }\n }\n\n .react-datepicker__month {\n margin: 0 1.5rem 1rem 1.5rem !important;\n }\n\n .react-datepicker__day-names {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0.5rem 1.5rem !important;\n\n .react-datepicker__day-name {\n color: var(--grey-50);\n font: var(--body-medium-13-16);\n }\n }\n\n .react-datepicker__week {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n + .react-datepicker__week {\n margin-top: 0.5rem;\n }\n\n .react-datepicker__day {\n font: var(--caption-bold-12-15);\n color: var(--dark);\n outline: none !important;\n\n &:is(.react-datepicker__day--selected), &:hover {\n border-radius: 0.25rem;\n background-color: var(--primary-opacity-10) !important;\n color: var(--primary) !important;\n }\n\n &:is(.react-datepicker__day--today) {\n color: var(--primary) !important;\n }\n\n &:is(.react-datepicker__day--outside-month) {\n color: var(--grey-50);\n }\n }\n }\n }\n }\n }\n\n input {\n &:is(.react-datepicker-ignore-onclickoutside) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n"])));
16
16
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/dist/components/SelectBox/SelectBox.styled.js CHANGED
@@ -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: 0 1.5rem;\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: 0.5rem !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: 16px;\n height: 16px;\n transition: all .2s ease;\n\n &:is(.customSelect__dropdown-indicator) {\n ", ";\n }\n\n &:is(.customSelect__clear-indicator) {\n width: 1rem;\n height: 1rem;\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-focused) {\n background-color: var(--dark-opacity-3);\n\n @media only screen and ", " {\n background-color: transparent !important;\n }\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: 0 1.5rem;\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: 0.5rem !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: 16px;\n height: 16px;\n transition: all .2s ease;\n\n &:is(.customSelect__dropdown-indicator) {\n ", ";\n }\n\n &:is(.customSelect__clear-indicator) {\n width: 1rem;\n height: 1rem;\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-focused) {\n background-color: var(--dark-opacity-3);\n\n @media only screen and ", " {\n background-color: transparent !important;\n }\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.$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 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: 0 1.5rem;\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: 16px;\n height: 16px;\n transition: all .2s ease;\n\n &:is(.customSelect__dropdown-indicator) {\n ", ";\n }\n\n &:is(.customSelect__clear-indicator) {\n width: 1rem;\n height: 1rem;\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-focused) {\n background-color: var(--dark-opacity-3);\n\n @media only screen and ", " {\n background-color: transparent !important;\n }\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: 0 1.5rem;\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: 16px;\n height: 16px;\n transition: all .2s ease;\n\n &:is(.customSelect__dropdown-indicator) {\n ", ";\n }\n\n &:is(.customSelect__clear-indicator) {\n width: 1rem;\n height: 1rem;\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-focused) {\n background-color: var(--dark-opacity-3);\n\n @media only screen and ", " {\n background-color: transparent !important;\n }\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.$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";
@@ -22,5 +22,5 @@ exports.Container = styled_components_1.default.div(templateObject_1 || (templat
22
22
  default:
23
23
  return "56px";
24
24
  }
25
- }, function (props) { return props.$hasError ? "var(--red)" : "var(--dark-opacity-50)"; }, function (props) { return props.$hasError ? "var(--red)" : "var(--dark)"; }, function (props) { return props.$hasShowDropdownIcon ? "display:inline-block" : "display:none"; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CloseBig", hasWrapper: false, width: "1rem", height: "1rem" })), function (props) { return props.$hasError ? "FF1F1F" : "84879E"; }, function (props) { return props.$hasError ? "FF1F1F" : "84879E"; }, function (props) { return !props.$hasError && "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%230A103D%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%230A103D%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')"; }, function (props) { return props.$isMulti ? "0.5rem !important" : "0 !important"; }, function (props) { return props.$menuPosition; }, function (props) { return props.$maxOptionListHeight; }, devices_1.devices.lg, devices_1.devices.lg, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", hasWrapper: false, width: "16px", height: "16px" })));
25
+ }, function (props) { return props.$hasError ? "var(--red)" : "var(--dark-opacity-50)"; }, function (props) { return props.$hasError ? "var(--red)" : "var(--dark)"; }, function (props) { return props.$isMulti ? "0.5rem" : "0"; }, function (props) { return props.$hasShowDropdownIcon ? "display:inline-block" : "display:none"; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CloseBig", hasWrapper: false, width: "1rem", height: "1rem" })), function (props) { return props.$hasError ? "FF1F1F" : "84879E"; }, function (props) { return props.$hasError ? "FF1F1F" : "84879E"; }, function (props) { return !props.$hasError && "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%230A103D%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%230A103D%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')"; }, function (props) { return props.$isMulti ? "0.5rem !important" : "0 !important"; }, function (props) { return props.$menuPosition; }, function (props) { return props.$maxOptionListHeight; }, devices_1.devices.lg, devices_1.devices.lg, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", hasWrapper: false, width: "16px", height: "16px" })));
26
26
  var templateObject_1;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "krl-alfred",
3
- "version": "1.80.8",
3
+ "version": "1.80.10",
4
4
  "files": [
5
5
  "dist"
6
6
  ],