krl-alfred 1.77.8 → 1.77.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.
- package/dist/components/RadioButton/layouts/boxed/Boxed.styled.js +1 -1
- package/dist/components/SelectBox/SelectBox.js +1 -1
- package/dist/components/SelectBox/SelectBox.styled.js +2 -1
- package/dist/components/Tabs/TabItem.js +1 -1
- package/dist/components/Tabs/Tabs.js +1 -3
- package/dist/components/Tabs/Tabs.styled.js +1 -1
- package/dist/components/Tabs/stories/Tabs.stories.js +1 -1
- package/dist/components/Toast/Toast.js +1 -1
- package/dist/jsons/SelectValues.json +2 -1
- package/package.json +1 -1
|
@@ -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.BoxedStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 1px solid var(--dark-opacity-10);\n position: relative;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 128px;\n cursor: pointer;\n @media only screen and ", " {\n height: 69px;\n }\n\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked ~ .indicator {\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%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%228%22%20fill%3D%22%239763F6%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%224%22%20fill%3D%22white%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E');\n }\n\n &:checked , &:hover {\n ~ div.labelsWrapper {\n &:before {\n content: \"\";\n position: absolute;\n inset: -1px;\n border-radius: 8px;\n user-select: none;\n pointer-events: none;\n }\n }\n }\n \n &:checked {\n ~ div.labelsWrapper {\n &:before {\n border: 2px solid var(--primary) !important;\n }\n }\n }\n &:hover {\n ~ div.labelsWrapper {\n &:before {\n border: 1px solid var(--primary-hover);\n }\n }\n }\n }\n\n div.indicator {\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: absolute;\n left: 12px;\n top: 12px;\n margin: ", ";\n width: ", ";\n height: ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n }\n\n div.labelsWrapper {\n row-gap:
|
|
16
|
+
exports.BoxedStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 1px solid var(--dark-opacity-10);\n position: relative;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 128px;\n cursor: pointer;\n @media only screen and ", " {\n height: 69px;\n }\n\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked ~ .indicator {\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%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%228%22%20fill%3D%22%239763F6%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%224%22%20fill%3D%22white%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E');\n }\n\n &:checked , &:hover {\n ~ div.labelsWrapper {\n &:before {\n content: \"\";\n position: absolute;\n inset: -1px;\n border-radius: 8px;\n user-select: none;\n pointer-events: none;\n }\n }\n }\n \n &:checked {\n ~ div.labelsWrapper {\n &:before {\n border: 2px solid var(--primary) !important;\n }\n }\n }\n &:hover {\n ~ div.labelsWrapper {\n &:before {\n border: 1px solid var(--primary-hover);\n }\n }\n }\n }\n\n div.indicator {\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: absolute;\n left: 12px;\n top: 12px;\n margin: ", ";\n width: ", ";\n height: ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n }\n\n div.labelsWrapper {\n row-gap: 4px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n padding: 0;\n display: grid;\n text-align: center;\n\n @media only screen and ", " {\n //display: flex;\n //align-items: center;\n //justify-content: center;\n row-gap: 4px;\n }\n label.label {\n display: block;\n margin: 0 0 4px 0;\n vertical-align: middle;\n cursor: pointer;\n font:var(--title-bold-16-19);\n .labelSm{\n font:var(--title-regular-16-19);\n margin-left: 0.25rem;\n }\n @media only screen and ", " {\n margin: 0;\n }\n }\n\n label.description {\n display: block;\n vertical-align: middle;\n margin: 0;\n cursor: pointer;\n font:var(--body-regular-14-17);\n @media only screen and ", " {\n margin: 0 0 0 4px;\n }\n }\n }\n .boxedBadgesWrapper{\n position: absolute;\n right: -9px;\n top: -8px;\n transform: rotate(90deg);\n @media only screen and ", " {\n right: -6px;\n top: -6px;\n }\n }\n"], ["\n border: 1px solid var(--dark-opacity-10);\n position: relative;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 128px;\n cursor: pointer;\n @media only screen and ", " {\n height: 69px;\n }\n\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked ~ .indicator {\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%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%228%22%20fill%3D%22%239763F6%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%224%22%20fill%3D%22white%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E');\n }\n\n &:checked , &:hover {\n ~ div.labelsWrapper {\n &:before {\n content: \"\";\n position: absolute;\n inset: -1px;\n border-radius: 8px;\n user-select: none;\n pointer-events: none;\n }\n }\n }\n \n &:checked {\n ~ div.labelsWrapper {\n &:before {\n border: 2px solid var(--primary) !important;\n }\n }\n }\n &:hover {\n ~ div.labelsWrapper {\n &:before {\n border: 1px solid var(--primary-hover);\n }\n }\n }\n }\n\n div.indicator {\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: absolute;\n left: 12px;\n top: 12px;\n margin: ", ";\n width: ", ";\n height: ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n }\n\n div.labelsWrapper {\n row-gap: 4px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n padding: 0;\n display: grid;\n text-align: center;\n\n @media only screen and ", " {\n //display: flex;\n //align-items: center;\n //justify-content: center;\n row-gap: 4px;\n }\n label.label {\n display: block;\n margin: 0 0 4px 0;\n vertical-align: middle;\n cursor: pointer;\n font:var(--title-bold-16-19);\n .labelSm{\n font:var(--title-regular-16-19);\n margin-left: 0.25rem;\n }\n @media only screen and ", " {\n margin: 0;\n }\n }\n\n label.description {\n display: block;\n vertical-align: middle;\n margin: 0;\n cursor: pointer;\n font:var(--body-regular-14-17);\n @media only screen and ", " {\n margin: 0 0 0 4px;\n }\n }\n }\n .boxedBadgesWrapper{\n position: absolute;\n right: -9px;\n top: -8px;\n transform: rotate(90deg);\n @media only screen and ", " {\n right: -6px;\n top: -6px;\n }\n }\n"])), devices_1.devices.lg, function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementDisabled" })) : (props.valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementInvalid" }))); }, function (props) { return (props.size === "small" ? "0 8px 0 0" : "0 16px 0 0"); }, function (props) {
|
|
17
17
|
switch (props.size) {
|
|
18
18
|
case 'small':
|
|
19
19
|
return "16px";
|
|
@@ -74,7 +74,7 @@ var SelectBox = (0, react_1.forwardRef)(function (props, ref) {
|
|
|
74
74
|
});
|
|
75
75
|
}, 50);
|
|
76
76
|
}
|
|
77
|
-
return ((0, jsx_runtime_1.jsx)(react_select_1.components.Option, __assign({ innerRef: innerRef, innerProps: innerProps, label: label, type: type, data: data, isDisabled: isDisabled, isFocused: isFocused, isSelected: isSelected, clearValue: clearValue, cx: cx, getStyles: getStyles, getClassNames: getClassNames, getValue: getValue, hasValue: hasValue, isMulti: isMulti, isRtl: isRtl, options: options, selectOption: selectOption, selectProps: selectProps, setValue: setValue, theme: theme, className: (0, classnames_1.default)("option", (_b = {}, _b["optionSm"] = !data.labelBottom, _b), (_c = {}, _c["fixedBottom"] = data.isFixedBottom, _c), (_d = {}, _d["secondary"] = data.isSecondary, _d)) }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "left" }, { children: [((data === null || data === void 0 ? void 0 : data.optionLabel) || data.label) && (0, jsx_runtime_1.jsx)("strong", { children: (data === null || data === void 0 ? void 0 : data.optionLabel) || (data === null || data === void 0 ? void 0 : data.label) }), data.labelBottom && (0, jsx_runtime_1.jsx)("span", { children: data.labelBottom })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "right" }, { children: [data.price && (0, jsx_runtime_1.
|
|
77
|
+
return ((0, jsx_runtime_1.jsx)(react_select_1.components.Option, __assign({ innerRef: innerRef, innerProps: innerProps, label: label, type: type, data: data, isDisabled: isDisabled, isFocused: isFocused, isSelected: isSelected, clearValue: clearValue, cx: cx, getStyles: getStyles, getClassNames: getClassNames, getValue: getValue, hasValue: hasValue, isMulti: isMulti, isRtl: isRtl, options: options, selectOption: selectOption, selectProps: selectProps, setValue: setValue, theme: theme, className: (0, classnames_1.default)("option", (_b = {}, _b["optionSm"] = !data.labelBottom, _b), (_c = {}, _c["fixedBottom"] = data.isFixedBottom, _c), (_d = {}, _d["secondary"] = data.isSecondary, _d)) }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "left" }, { children: [((data === null || data === void 0 ? void 0 : data.optionLabel) || data.label) && (0, jsx_runtime_1.jsx)("strong", { children: (data === null || data === void 0 ? void 0 : data.optionLabel) || (data === null || data === void 0 ? void 0 : data.label) }), data.labelBottom && (0, jsx_runtime_1.jsx)("span", { children: data.labelBottom })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "right" }, { children: [data.price && (0, jsx_runtime_1.jsxs)("strong", { children: [data.price, data.priceSm && (0, jsx_runtime_1.jsx)("small", { children: data.priceSm })] }), data.period && (0, jsx_runtime_1.jsx)("span", { children: data.period })] }))] }) })));
|
|
78
78
|
};
|
|
79
79
|
var Input = function (props) { return (0, jsx_runtime_1.jsx)(react_select_1.components.Input, __assign({}, props, { autoComplete: autoComplete })); };
|
|
80
80
|
var DropdownIndicator = function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ className: "customSelect__indicator customSelect__dropdown-indicator" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", strokeWidth: "3px", name: "ArrowDown", width: "16px", height: "16px" }) })); };
|
|
@@ -12,5 +12,6 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
12
12
|
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
|
-
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 >div{\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\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 .right{\n display: flex;\n align-items: end;\n justify-content: flex-end;\n strong {\n display: block;\n font:var(--title-extra-bold-16-19);\n line-height: 17px;\n }\n\n span {\n display: block;\n font:var(--body-regular-14-17);\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 .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 >div{\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\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 .right{\n display: flex;\n align-items: end;\n justify-content: flex-end;\n strong {\n display: block;\n font:var(--title-extra-bold-16-19);\n line-height: 17px;\n }\n\n span {\n display: block;\n font:var(--body-regular-14-17);\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 .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" })));
|
|
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 &.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 @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 strong{\n color: var(--dark-opacity-50);\n }\n }\n >div{\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\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 .right{\n display: flex;\n align-items: end;\n justify-content: flex-end;\n strong {\n display: block;\n font:var(--title-extra-bold-16-19);\n line-height: 17px;\n small{\n font:var(--body-extra-bold-14-17);\n }\n }\n\n span {\n display: block;\n font:var(--body-regular-14-17);\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 .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 @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 strong{\n color: var(--dark-opacity-50);\n }\n }\n >div{\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\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 .right{\n display: flex;\n align-items: end;\n justify-content: flex-end;\n strong {\n display: block;\n font:var(--title-extra-bold-16-19);\n line-height: 17px;\n small{\n font:var(--body-extra-bold-14-17);\n }\n }\n\n span {\n display: block;\n font:var(--body-regular-14-17);\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 .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; }, 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" })));
|
|
16
17
|
var templateObject_1;
|
|
@@ -31,6 +31,6 @@ var TabItem = function (props) {
|
|
|
31
31
|
if (props.isActive)
|
|
32
32
|
setActiveContent(props.children);
|
|
33
33
|
}, [props.isActive]);
|
|
34
|
-
return ((0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemStyled, { children: (0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemTitleStyled, __assign({ "$isActive": props.isActive, onClick: onClickTab }, { children: props.title })) }, props.key));
|
|
34
|
+
return ((0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemStyled, __assign({ "$isDisabled": props.isDisabled }, { children: (0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemTitleStyled, __assign({ "$isActive": props.isActive, onClick: onClickTab }, { children: props.title })) }), props.key));
|
|
35
35
|
};
|
|
36
36
|
exports.default = TabItem;
|
|
@@ -45,9 +45,7 @@ var TabItem_1 = __importDefault(require("./TabItem"));
|
|
|
45
45
|
var Tabs = function (props) {
|
|
46
46
|
var _a = (0, react_1.useState)(props.activeIndex || 0), activeIndex = _a[0], setActiveIndex = _a[1];
|
|
47
47
|
var _b = (0, react_1.useState)(null), activeContent = _b[0], setActiveContent = _b[1];
|
|
48
|
-
var onActive = function (e) {
|
|
49
|
-
props.onActive(e);
|
|
50
|
-
};
|
|
48
|
+
var onActive = function (e) { return props.onActive(e); };
|
|
51
49
|
var getTabsContext = (0, react_1.useCallback)(function (index) {
|
|
52
50
|
var activateTab = function (nextIndex) {
|
|
53
51
|
setActiveIndex(nextIndex);
|
|
@@ -11,7 +11,7 @@ exports.TabItemContentStyled = exports.TabItemTitleStyled = exports.TabItemStyle
|
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.TabsStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex:1;\n"], ["\n flex:1;\n"])));
|
|
13
13
|
exports.TabHeaderStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n column-gap: 1rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n column-gap: 1rem;\n"])));
|
|
14
|
-
exports.TabItemStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 1 0;\n"], ["\n flex: 1 0;\n"])));
|
|
14
|
+
exports.TabItemStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 1 0;\n ", "\n"], ["\n flex: 1 0;\n ", "\n"])), function (props) { return props.$isDisabled ? "\n cursor: no-drop;\n pointer-events: none;\n user-select: none;\n " : ""; });
|
|
15
15
|
exports.TabItemTitleStyled = styled_components_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background: transparent;\n color:", ";\n border: 1px solid ", ";\n width: 100%;\n box-shadow: 0 6px 30px 0 ", ";\n border-radius: 0.5rem;\n transition: all .2s ease;\n padding: 0;\n height: 40px;\n cursor:pointer;\n font: var(--body-semi-bold-14-17);\n &:hover{\n color:var(--dark);\n border: 1px solid var(--grey-10);\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n }\n"], ["\n background: transparent;\n color:", ";\n border: 1px solid ", ";\n width: 100%;\n box-shadow: 0 6px 30px 0 ", ";\n border-radius: 0.5rem;\n transition: all .2s ease;\n padding: 0;\n height: 40px;\n cursor:pointer;\n font: var(--body-semi-bold-14-17);\n &:hover{\n color:var(--dark);\n border: 1px solid var(--grey-10);\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n }\n"])), function (props) { return props.$isActive ? "var(--dark)" : "var(--dark-opacity-75)"; }, function (props) { return props.$isActive ? "var(--grey-10)" : "transparent"; }, function (props) { return props.$isActive ? "var(--box-shadow-color)" : "transparent"; });
|
|
16
16
|
exports.TabItemContentStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding-top: 1rem;\n"], ["\n padding-top: 1rem;\n"])));
|
|
17
17
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -20,7 +20,7 @@ var Tabs_1 = __importDefault(require("../Tabs"));
|
|
|
20
20
|
exports.default = {
|
|
21
21
|
title: 'Components/Tabs',
|
|
22
22
|
component: function (props) {
|
|
23
|
-
return ((0, jsx_runtime_1.jsxs)(Tabs_1.default, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 1" }, { children: "Tab 1" })), (0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 2" }, { children: "Tab 2" })), (0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 3" }, { children: "Tab 3" })), (0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 4" }, { children: "Tab 4" })), (0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 5" }, { children: "Tab 5" }))] })));
|
|
23
|
+
return ((0, jsx_runtime_1.jsxs)(Tabs_1.default, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 1" }, { children: "Tab 1" })), (0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 2" }, { children: "Tab 2" })), (0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 3" }, { children: "Tab 3" })), (0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 4" }, { children: "Tab 4" })), (0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ isDisabled: true, title: "Tab 5" }, { children: "Tab 5 (disabled)" }))] })));
|
|
24
24
|
},
|
|
25
25
|
tags: ['autodocs'],
|
|
26
26
|
argTypes: {}
|
|
@@ -43,7 +43,7 @@ var Toast = function (props) {
|
|
|
43
43
|
}
|
|
44
44
|
}, [show]);
|
|
45
45
|
return (show &&
|
|
46
|
-
react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(Toast_styled_1.OverlayStyled, { children: (0, jsx_runtime_1.jsx)(Toast_styled_1.ToastStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)("div", { children: [icon && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon, width: "24px", height: "24px" }) }))), title && ((0, jsx_runtime_1.jsx)("h5",
|
|
46
|
+
react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(Toast_styled_1.OverlayStyled, { children: (0, jsx_runtime_1.jsx)(Toast_styled_1.ToastStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)("div", { children: [icon && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon, width: "24px", height: "24px" }) }))), title && ((0, jsx_runtime_1.jsx)("h5", { className: "title", dangerouslySetInnerHTML: { __html: title } })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "content" }, { children: children })), showPrimaryButton && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "bottom" }, { children: (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: onPrimaryAction, size: "big", variant: "primary", width: "100%", isLoading: isPrimaryButtonLoading, disabled: isPrimaryButtonDisabled }, { children: primaryButtonText })) })))] }) })) }), document.body));
|
|
47
47
|
};
|
|
48
48
|
Toast.defaultProps = {
|
|
49
49
|
icon: "CheckMark",
|