krl-alfred 1.76.23 → 1.76.24

package/dist/components/AutocompleteInput/AutocompleteInput.styled.js

@@ -11,6 +11,6 @@ exports.DropdownInnerStyled = exports.DropdownStyled = exports.InputStyled = exp
 var styled_components_1 = __importDefault(require("styled-components"));
 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    &.justify-between {\n      justify-content: space-between;\n    }\n\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\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    .hiddenInput{\n        opacity: 0;\n        user-select: none;\n        pointer-events: none;\n        position: absolute;\n        left: 0;\n        width: 0;\n    }\n    .inputIcon {\n      position: absolute;\n      top: 50%;\n      right: 24px;\n      transform: translateY(-50%);\n      cursor: pointer;\n      div{\n        display: block;\n      }\n    }\n  }\n\n  .error {\n      display: flex;\n      align-items: center;\n      margin-top: 8px;\n      color: var(--red);\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    &.justify-between {\n      justify-content: space-between;\n    }\n\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\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    .hiddenInput{\n        opacity: 0;\n        user-select: none;\n        pointer-events: none;\n        position: absolute;\n        left: 0;\n        width: 0;\n    }\n    .inputIcon {\n      position: absolute;\n      top: 50%;\n      right: 24px;\n      transform: translateY(-50%);\n      cursor: pointer;\n      div{\n        display: block;\n      }\n    }\n  }\n\n  .error {\n      display: flex;\n      align-items: center;\n      margin-top: 8px;\n      color: var(--red);\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'; });
 exports.InputStyled = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font : var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n  text-transform: uppercase;\n  &::placeholder {\n    color: ", ";\n    text-transform: initial;\n  }\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\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: ", ";\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font : var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n  text-transform: uppercase;\n  &::placeholder {\n    color: ", ";\n    text-transform: initial;\n  }\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\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.isShowDropdown ? '8px 8px 0 0' : '8px 8px 8px 8px'; }, 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)'; });
-exports.DropdownStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    border-radius: 0 0 8px 8px;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: hidden;\n    max-height: ", ";\n    border-top: 0;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    padding: 0;\n    margin: 0;\n    [data-simplebar] {\n        height: auto !important;\n        max-height: ", " !important;\n        padding: 0 !important;\n    }\n"], ["\n    border-radius: 0 0 8px 8px;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: hidden;\n    max-height: ", ";\n    border-top: 0;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    padding: 0;\n    margin: 0;\n    [data-simplebar] {\n        height: auto !important;\n        max-height: ", " !important;\n        padding: 0 !important;\n    }\n"])), function (props) { return props.dropdownMaxHeight && props.dropdownMaxHeight; }, function (props) { return props.dropdownMaxHeight && props.dropdownMaxHeight; });
+exports.DropdownStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    border-radius: 0 0 8px 8px;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: hidden;\n    max-height: ", ";\n    border-top: 0;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    padding: 0;\n    margin: 0;\n    [data-simplebar] {\n        height: auto !important;\n        max-height: ", " !important;\n        padding: 0 !important;\n        .simplebar-track.simplebar-vertical {\n            width: 9px !important;\n        }\n    }\n"], ["\n    border-radius: 0 0 8px 8px;\n    box-shadow: none;\n    border: 1px solid var(--dark-opacity-10);\n    overflow: hidden;\n    max-height: ", ";\n    border-top: 0;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 10;\n    padding: 0;\n    margin: 0;\n    [data-simplebar] {\n        height: auto !important;\n        max-height: ", " !important;\n        padding: 0 !important;\n        .simplebar-track.simplebar-vertical {\n            width: 9px !important;\n        }\n    }\n"])), function (props) { return props.dropdownMaxHeight && props.dropdownMaxHeight; }, function (props) { return props.dropdownMaxHeight && props.dropdownMaxHeight; });
 exports.DropdownInnerStyled = styled_components_1.default.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n    position: relative;\n    > li {\n        height: 51px;\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        font : var(--title-bold-16-19);\n        &:not(.hasNoResult):hover{\n            background-color: var(--dark-opacity-3);\n        }\n        &:is(.isSelected){\n            background-color: var(--dark-opacity-3);\n        }\n        &.isFixedBottom{\n            color: var(--dark-opacity-50);\n            position: sticky;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            z-index: 4;\n        }\n        &.hasNoResult{\n            cursor: initial;\n            height: auto;\n        }\n    }\n"], ["\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n    position: relative;\n    > li {\n        height: 51px;\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        font : var(--title-bold-16-19);\n        &:not(.hasNoResult):hover{\n            background-color: var(--dark-opacity-3);\n        }\n        &:is(.isSelected){\n            background-color: var(--dark-opacity-3);\n        }\n        &.isFixedBottom{\n            color: var(--dark-opacity-50);\n            position: sticky;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            z-index: 4;\n        }\n        &.hasNoResult{\n            cursor: initial;\n            height: auto;\n        }\n    }\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/ProductCard/ProductCard.styled.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HorizontalSmStyled = exports.HorizontalStyled = exports.StandartStyled = exports.ChecklistStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.ChecklistStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  max-width: 634px;\n  ", "\n  .productCardInner {\n    border: 1px solid var(--dark-opacity-10);\n    border-radius: 8px;\n    padding: ", ";\n    background-color: white;\n    grid-template-columns: auto auto 1fr;\n    display: grid;\n    justify-content: flex-start;\n    @media only screen and ", " {\n      padding: 24px 16px;\n    }\n    .productCardCheckboxContent{\n      height: 64px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      &:is(.hidden){\n        display: none;\n      }\n      .indicator{ \n        margin-right: ", ";\n        @media only screen and ", " {\n          margin-right: 8px;\n        }\n      }\n    }\n    .productCardImg {\n      width: 64px;\n      height: 64px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 16px;\n      overflow: hidden;\n      box-sizing: border-box;\n      > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n      }\n    }\n    .productCardTitle{\n      min-height: 64px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      text-align: start;\n      font:var(--title-semi-bold-16-19);\n    }\n    .productCardContent{ \n      margin: 1.5rem auto 0 ", ";\n      grid-column-start: 1;\n      grid-column-end: 4;\n      width: ", ";\n      ", ";\n      @media only screen and ", " {\n        margin: 1rem auto 0 0;\n        width: 100%;\n      }\n    }\n  }\n"], ["\n  display: block;\n  max-width: 634px;\n  ", "\n  .productCardInner {\n    border: 1px solid var(--dark-opacity-10);\n    border-radius: 8px;\n    padding: ", ";\n    background-color: white;\n    grid-template-columns: auto auto 1fr;\n    display: grid;\n    justify-content: flex-start;\n    @media only screen and ", " {\n      padding: 24px 16px;\n    }\n    .productCardCheckboxContent{\n      height: 64px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      &:is(.hidden){\n        display: none;\n      }\n      .indicator{ \n        margin-right: ", ";\n        @media only screen and ", " {\n          margin-right: 8px;\n        }\n      }\n    }\n    .productCardImg {\n      width: 64px;\n      height: 64px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 16px;\n      overflow: hidden;\n      box-sizing: border-box;\n      > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n      }\n    }\n    .productCardTitle{\n      min-height: 64px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      text-align: start;\n      font:var(--title-semi-bold-16-19);\n    }\n    .productCardContent{ \n      margin: 1.5rem auto 0 ", ";\n      grid-column-start: 1;\n      grid-column-end: 4;\n      width: ", ";\n      ", ";\n      @media only screen and ", " {\n        margin: 1rem auto 0 0;\n        width: 100%;\n      }\n    }\n  }\n"])), function (props) { return props.disabled ? "\n    user-select:none;\n    pointer-events:none;\n  " : ""; }, function (props) {
+exports.ChecklistStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  max-width: 634px;\n  ", "\n  .productCardInner {\n    border: 1px solid var(--dark-opacity-10);\n    border-radius: 8px;\n    padding: ", ";\n    background-color: white;\n    grid-template-columns: auto auto 1fr;\n    display: grid;\n    justify-content: flex-start;\n    @media only screen and ", " {\n      padding: 24px 16px;\n    }\n    .productCardCheckboxContent{\n      height: 64px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      &:is(.hidden){\n        display: none;\n      }\n      .indicator{ \n        margin-right: ", ";\n        @media only screen and ", " {\n          margin-right: 8px;\n        }\n      }\n    }\n    .productCardImg {\n      width: 64px;\n      height: 64px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 16px;\n      overflow: hidden;\n      box-sizing: border-box;\n      > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n      }\n    }\n    .productCardTitle{\n      min-height: 64px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      text-align: start;\n      font:var(--title-semi-bold-16-19);\n    }\n    .productCardContent{ \n      margin: 1.5rem auto 0 ", ";\n      grid-column-start: 1;\n      grid-column-end: 4;\n      width: ", ";\n      ", ";\n      @media only screen and ", " {\n        margin: 1rem auto 0 0;\n        width: 100%;\n      }\n    }\n  }\n"], ["\n  display: block;\n  max-width: 634px;\n  ", "\n  .productCardInner {\n    border: 1px solid var(--dark-opacity-10);\n    border-radius: 8px;\n    padding: ", ";\n    background-color: white;\n    grid-template-columns: auto auto 1fr;\n    display: grid;\n    justify-content: flex-start;\n    @media only screen and ", " {\n      padding: 24px 16px;\n    }\n    .productCardCheckboxContent{\n      height: 64px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      &:is(.hidden){\n        display: none;\n      }\n      .indicator{ \n        margin-right: ", ";\n        @media only screen and ", " {\n          margin-right: 8px;\n        }\n      }\n    }\n    .productCardImg {\n      width: 64px;\n      height: 64px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 16px;\n      overflow: hidden;\n      box-sizing: border-box;\n      > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n      }\n    }\n    .productCardTitle{\n      min-height: 64px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      text-align: start;\n      font:var(--title-semi-bold-16-19);\n    }\n    .productCardContent{ \n      margin: 1.5rem auto 0 ", ";\n      grid-column-start: 1;\n      grid-column-end: 4;\n      width: ", ";\n      ", ";\n      @media only screen and ", " {\n        margin: 1rem auto 0 0;\n        width: 100%;\n      }\n    }\n  }\n"])), function (props) { return props.disabled ? "\n    user-select:none;\n    pointer-events:none;\n  " : "\n    cursor: pointer;\n    *{\n      cursor: pointer;\n    }\n  "; }, function (props) {
     switch (props.size) {
         case 'small':
             return "24px 16px";

package/dist/components/ProductCard/layouts/Checklist.js

@@ -31,7 +31,7 @@ var Checkbox_1 = __importDefault(require("../../Checkbox"));
 var react_device_detect_1 = require("react-device-detect");
 var classnames_1 = __importDefault(require("classnames"));
 var Checklist = function (props) {
-    var hasCheckbox = props.hasCheckbox, checked = props.checked, name = props.name, productCardOnChange = props.productCardOnChange, title = props.title, content = props.content, value = props.value, size = props.size, other = __rest(props, ["hasCheckbox", "checked", "name", "productCardOnChange", "title", "content", "value", "size"]);
-    return ((0, jsx_runtime_1.jsx)(ProductCard_styled_1.ChecklistStyled, __assign({}, other, { size: size }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardInner" }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: props.checkboxId, className: (0, classnames_1.default)({ "hidden": !hasCheckbox }, "productCardCheckboxContent") }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: props.checkboxId, size: size === "small" ? "small" : react_device_detect_1.isMobile ? "small" : "medium", label: "", onChange: productCardOnChange, value: value, checked: checked, name: name }) })), props.image && ((0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: props.checkboxId, className: "productCardImg" }, { children: props.image }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardText" }, { children: (0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: props.checkboxId, className: "productCardTitle" }, { children: props.title })) })), props.content && (0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardContent" }, { children: props.content }))] })) })));
+    var hasCheckbox = props.hasCheckbox, checked = props.checked, name = props.name, productCardOnChange = props.productCardOnChange, title = props.title, content = props.content, value = props.value, size = props.size, disabled = props.disabled, image = props.image, checkboxId = props.checkboxId, other = __rest(props, ["hasCheckbox", "checked", "name", "productCardOnChange", "title", "content", "value", "size", "disabled", "image", "checkboxId"]);
+    return ((0, jsx_runtime_1.jsx)(ProductCard_styled_1.ChecklistStyled, __assign({}, other, { disabled: disabled, size: size }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardInner" }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: checkboxId, className: (0, classnames_1.default)({ "hidden": !hasCheckbox }, "productCardCheckboxContent") }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: checkboxId, size: size === "small" ? "small" : react_device_detect_1.isMobile ? "small" : "medium", label: "", onChange: productCardOnChange, value: value, checked: checked, name: name, disabled: disabled }) })), image && ((0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: checkboxId, className: "productCardImg" }, { children: image }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardText" }, { children: (0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: checkboxId, className: "productCardTitle" }, { children: props.title })) })), props.content && (0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardContent" }, { children: props.content }))] })) })));
 };
 exports.default = Checklist;

package/dist/components/SelectBox/SelectBox.styled.js

@@ -12,5 +12,5 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var svgToBase64_1 = __importDefault(require("./../../utils/svgToBase64"));
-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    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  [data-simplebar] {\n    max-height: ", " !important;\n      height: auto !important;\n      padding: 0 !important;\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    .customSelect{\n      &:is(.lightBg){\n        .customSelect__control {\n          background-color: white;\n        }\n      }\n      .customSelect__control {\n        height: 56px;\n        background-color: var(--dark-opacity-3);\n        border: 0;\n        padding: 0 1.5rem;\n        cursor: pointer;\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: 8px;\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          .customSelect__placeholder {\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n            margin: 0;\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            grid-template-columns: 0;\n            input {\n              font: var(--body-semi-bold-14-17) !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0;\n          margin: 0 0 0 1rem;\n          width: 16px;\n          height: 16px;\n          transition: all .2s ease;\n          &:is(.customSelect__dropdown-indicator){\n              ", ";   \n          }\n          &:is(.customSelect__clear-indicator){\n              background-image: url('", "');\n          }\n          div{\n            display: block;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\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            &.customSelect__value-container--has-value{\n                background-image: ", ";\n            }\n        }\n      }\n\n      .customSelect__control--is-focused {\n        border-color: var(--primary);\n        box-shadow: none;\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 8px 8px;\n        box-shadow: none;\n        border: 1px solid var(--dark-opacity-10);\n        overflow: hidden;\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\n            &:active {\n              background-color: var(--dark-opacity-3);\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              strong{\n                color: var(--dark-opacity-50);\n              }\n            }\n\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      }\n\n      &:is(.isSearchable) {\n          .customSelect__control--menu-is-open {\n              .customSelect__value-container {\n                  background-image: url('", "') !important;\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        box-shadow: none;\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__single-value, .customSelect__clear-indicator  {\n          display: none !important;\n        }\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    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  [data-simplebar] {\n    max-height: ", " !important;\n      height: auto !important;\n      padding: 0 !important;\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    .customSelect{\n      &:is(.lightBg){\n        .customSelect__control {\n          background-color: white;\n        }\n      }\n      .customSelect__control {\n        height: 56px;\n        background-color: var(--dark-opacity-3);\n        border: 0;\n        padding: 0 1.5rem;\n        cursor: pointer;\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: 8px;\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          .customSelect__placeholder {\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n            margin: 0;\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            grid-template-columns: 0;\n            input {\n              font: var(--body-semi-bold-14-17) !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0;\n          margin: 0 0 0 1rem;\n          width: 16px;\n          height: 16px;\n          transition: all .2s ease;\n          &:is(.customSelect__dropdown-indicator){\n              ", ";   \n          }\n          &:is(.customSelect__clear-indicator){\n              background-image: url('", "');\n          }\n          div{\n            display: block;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\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            &.customSelect__value-container--has-value{\n                background-image: ", ";\n            }\n        }\n      }\n\n      .customSelect__control--is-focused {\n        border-color: var(--primary);\n        box-shadow: none;\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 8px 8px;\n        box-shadow: none;\n        border: 1px solid var(--dark-opacity-10);\n        overflow: hidden;\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\n            &:active {\n              background-color: var(--dark-opacity-3);\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              strong{\n                color: var(--dark-opacity-50);\n              }\n            }\n\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      }\n\n      &:is(.isSearchable) {\n          .customSelect__control--menu-is-open {\n              .customSelect__value-container {\n                  background-image: url('", "') !important;\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        box-shadow: none;\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__single-value, .customSelect__clear-indicator  {\n          display: none !important;\n        }\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.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: "Close", hasWrapper: false, width: "16px", height: "16px" })), 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.maxOptionListHeight; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", hasWrapper: false, width: "16px", height: "16px" })));
+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    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  [data-simplebar] {\n    max-height: ", " !important;\n      height: auto !important;\n      padding: 0 !important;\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    .customSelect{\n      &:is(.lightBg){\n        .customSelect__control {\n          background-color: white;\n        }\n      }\n      .customSelect__control {\n        height: 56px;\n        background-color: var(--dark-opacity-3);\n        border: 0;\n        padding: 0 1.5rem;\n        cursor: pointer;\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: 8px;\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          .customSelect__placeholder {\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n            margin: 0;\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            grid-template-columns: 0;\n            input {\n              font: var(--body-semi-bold-14-17) !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0;\n          margin: 0 0 0 1rem;\n          width: 16px;\n          height: 16px;\n          transition: all .2s ease;\n          &:is(.customSelect__dropdown-indicator){\n              ", ";   \n          }\n          &:is(.customSelect__clear-indicator){\n              background-image: url('", "');\n          }\n          div{\n            display: block;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\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            &.customSelect__value-container--has-value{\n                background-image: ", ";\n            }\n        }\n      }\n\n      .customSelect__control--is-focused {\n        border-color: var(--primary);\n        box-shadow: none;\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 8px 8px;\n        box-shadow: none;\n        border: 1px solid var(--dark-opacity-10);\n        overflow: hidden;\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\n            &:active {\n              background-color: var(--dark-opacity-3);\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              strong{\n                color: var(--dark-opacity-50);\n              }\n            }\n\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      }\n\n      &:is(.isSearchable) {\n          .customSelect__control--menu-is-open {\n              .customSelect__value-container {\n                  background-image: url('", "') !important;\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        box-shadow: none;\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__single-value, .customSelect__clear-indicator  {\n          display: none !important;\n        }\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    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  [data-simplebar] {\n    max-height: ", " !important;\n      height: auto !important;\n      padding: 0 !important;\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    .customSelect{\n      &:is(.lightBg){\n        .customSelect__control {\n          background-color: white;\n        }\n      }\n      .customSelect__control {\n        height: 56px;\n        background-color: var(--dark-opacity-3);\n        border: 0;\n        padding: 0 1.5rem;\n        cursor: pointer;\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: 8px;\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          .customSelect__placeholder {\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n            margin: 0;\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            grid-template-columns: 0;\n            input {\n              font: var(--body-semi-bold-14-17) !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0;\n          margin: 0 0 0 1rem;\n          width: 16px;\n          height: 16px;\n          transition: all .2s ease;\n          &:is(.customSelect__dropdown-indicator){\n              ", ";   \n          }\n          &:is(.customSelect__clear-indicator){\n              background-image: url('", "');\n          }\n          div{\n            display: block;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\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            &.customSelect__value-container--has-value{\n                background-image: ", ";\n            }\n        }\n      }\n\n      .customSelect__control--is-focused {\n        border-color: var(--primary);\n        box-shadow: none;\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 8px 8px;\n        box-shadow: none;\n        border: 1px solid var(--dark-opacity-10);\n        overflow: hidden;\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\n            &:active {\n              background-color: var(--dark-opacity-3);\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              strong{\n                color: var(--dark-opacity-50);\n              }\n            }\n\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      }\n\n      &:is(.isSearchable) {\n          .customSelect__control--menu-is-open {\n              .customSelect__value-container {\n                  background-image: url('", "') !important;\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        box-shadow: none;\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__single-value, .customSelect__clear-indicator  {\n          display: none !important;\n        }\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.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: "Close", hasWrapper: false, width: "16px", height: "16px" })), 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.maxOptionListHeight; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", hasWrapper: false, width: "16px", height: "16px" })));
 var templateObject_1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "krl-alfred",
-  "version": "1.76.23",
+  "version": "1.76.24",
   "files": [
     "dist"
   ],