krl-alfred 2.24.0 → 2.24.2
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/ActionButton/ActionButton.styled.js +1 -1
- package/dist/components/ActionButton/stories/ActionButton.stories.js +1 -1
- package/dist/components/AddressCard/AddressCard.styled.js +1 -1
- package/dist/components/AutocompleteInput/AutocompleteInput.styled.js +3 -3
- package/dist/components/BannerCard/BannerCard.styled.js +1 -1
- package/dist/components/BannerCard/stories/BannerCard.stories.js +1 -1
- package/dist/components/Breadcrumbs/Breadcrumbs.styled.js +2 -2
- package/dist/components/Button/Button.styled.js +1 -1
- package/dist/components/ColorCard/ColorCard.styled.js +2 -2
- package/dist/components/ColorPalette/ColorPalette.js +1 -1
- package/dist/components/ColorPalette/ColorPalette.styled.d.ts +7 -1
- package/dist/components/ColorPalette/ColorPalette.styled.js +5 -5
- package/dist/components/ColorPalette/ColorPalette.test.d.ts +1 -0
- package/dist/components/ColorPalette/ColorPalette.test.js +31 -0
- package/dist/components/DescriptionCard/DescriptionCard.d.ts +1 -1
- package/dist/components/DescriptionCard/DescriptionCard.js +9 -6
- package/dist/components/DescriptionCard/DescriptionCard.styled.d.ts +1 -1
- package/dist/components/DescriptionCard/DescriptionCard.styled.js +5 -5
- package/dist/components/DescriptionCard/DescriptionCard.test.js +36 -4
- package/dist/components/DescriptionCard/SortableDescriptionCard.js +1 -1
- package/dist/components/DescriptionCard/props.d.ts +3 -0
- package/dist/components/DescriptionCard/props.js +1 -0
- package/dist/components/DescriptionCard/stories/DescriptionCard.stories.d.ts +33 -1
- package/dist/components/DescriptionCard/stories/DescriptionCard.stories.js +6 -1
- package/dist/components/Dropdown/Dropdown.styled.js +1 -1
- package/dist/components/Dropdown/stories/Dropdown.stories.js +1 -1
- package/dist/components/InfoBox/InfoBox.styled.js +1 -1
- package/dist/components/Input/Input.d.ts +1 -1
- package/dist/components/Input/Input.js +10 -9
- package/dist/components/Input/Input.styled.js +4 -4
- package/dist/components/Input/Input.test.js +20 -0
- package/dist/components/Input/props.d.ts +3 -0
- package/dist/components/Input/props.js +2 -0
- package/dist/components/Input/stories/Input.stories.d.ts +17 -0
- package/dist/components/Input/stories/Input.stories.js +20 -1
- package/dist/components/InsuranceBox/InsuranceBox.styled.js +2 -2
- package/dist/components/ListGroup/ListGroup.styled.js +1 -1
- package/dist/components/Modal/Modal.styled.js +1 -1
- package/dist/components/OptionMenu/OptionMenu.styled.js +1 -1
- package/dist/components/Pagination/Pagination.styled.js +1 -1
- package/dist/components/ProductCardCheckbox/ProductCardCheckbox.styled.js +1 -1
- package/dist/components/ProductCardHorizontal/ProductCardHorizontal.styled.js +1 -1
- package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.styled.js +2 -2
- package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.styled.js +1 -1
- package/dist/components/ProductCardRadio/ProductCardRadio.styled.js +1 -1
- package/dist/components/ProductCardVertical/ProductCardVertical.styled.js +2 -2
- package/dist/components/QuantitySelector/QuantitySelector.styled.js +1 -1
- package/dist/components/RadioButton/layouts/boxedWithIcon/BoxedWithIcon.styled.js +1 -1
- package/dist/components/RadioButton/layouts/horizontal/Horizontal.styled.js +1 -1
- package/dist/components/ReviewBlock/ReviewBlock.styled.js +2 -2
- package/dist/components/RichTextEditor/RichTextEditor.styled.js +1 -1
- package/dist/components/SearchBox/SearchBox.styled.js +1 -1
- package/dist/components/SelectBox/SelectBox.styled.js +3 -3
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.styled.js +1 -1
- package/dist/components/StepSlider/StepSlider.styled.js +2 -2
- package/dist/components/SuggestBox/stories/SuggestBox.stories.js +1 -1
- package/dist/components/Tag/Tag.styled.js +1 -1
- package/dist/components/TagInput/TagInput.styled.js +1 -1
- package/dist/components/TextLink/TextLink.styled.js +1 -1
- package/dist/components/Textarea/Textarea.styled.js +1 -1
- package/dist/components/Toast/Toast.styled.js +1 -1
- package/dist/components/Uploader/Uploader.styled.js +3 -3
- package/dist/jsons/colors.json +18 -0
- package/dist/style/style.min.css +1 -1
- package/dist/style/style.min.css.map +1 -1
- package/package.json +7 -7
|
@@ -14,13 +14,13 @@ var styled_components_1 = __importDefault(require("styled-components"));
|
|
|
14
14
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
15
15
|
var svgToBase64_1 = __importDefault(require("./../../utils/svgToBase64"));
|
|
16
16
|
var devices_1 = require("../../constants/devices");
|
|
17
|
-
exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n /* Checkbox styling for multi-select options */\n .option-container {\n display: flex;\n align-items: center;\n width: 100%;\n }\n \n .checkbox-container {\n display: flex;\n align-items: center;\n }\n \n .custom-checkbox {\n width: 16px;\n height: 16px;\n border: 1px solid var(--dark-opacity-10);\n border-radius: 3px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: white;\n }\n \n .custom-checkbox.checked {\n background-color: var(--primary);\n border-color: var(--primary);\n }\n \n .option-content {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n }\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n }\n\n [data-simplebar] {\n max-height: ", " !important;\n height: auto !important;\n padding: 0 !important;\n\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font: var(--caption-semi-bold-11-13);\n }\n }\n\n .select {\n position: relative;\n z-index: 2;\n .customSelect {\n &:is(.lightBg) {\n .customSelect__control {\n background-color: ", ";\n }\n }\n\n .customSelect__control {\n background-color: ", ";\n border: 0;\n padding: ", ";\n cursor: ", ";\n\n &:before {\n content: \"\";\n position: absolute;\n inset: 0;\n user-select: none;\n pointer-events: none;\n border-width: ", ";\n border-style: solid;\n border-radius: 0.5rem;\n border-color: ", ";\n }\n ", "\n /*&:hover {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n }\n }*/\n\n .customSelect__value-container {\n padding: 0;\n min-height: ", ";\n\n &:is(.customSelect__value-container--is-multi) {\n display: block;\n padding: 1rem 0;\n }\n\n .customSelect__multi-value {\n border: 1px solid var(--grey-10);\n border-radius: 0.25rem;\n background-color: var(--dark-opacity-3);\n margin: 0;\n justify-content: space-between;\n display: grid;\n grid-template-columns: 1fr auto;\n position: relative;\n z-index: 5;\n + .customSelect__multi-value {\n margin-top: 0.5rem;\n }\n\n .customSelect__multi-value__label {\n font: var(--body-semi-bold-13-16); \n white-space: nowrap;\n border-radius: 2px;\n color: hsl(0, 0%, 20%);\n padding: 3px 3px 3px 6px;\n box-sizing: border-box;\n display: grid;\n align-items: center;\n grid-template-columns: auto auto;\n justify-content: flex-start;\n span{\n overflow: hidden;\n text-overflow: ellipsis;\n &:nth-child(2){\n margin-left: 0.25rem;\n }\n }\n }\n\n .customSelect__multi-value__remove {\n background-color: transparent !important;\n color: var(--dark) !important;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n border-radius: 2px;\n padding-left: 4px;\n padding-right: 4px;\n box-sizing: border-box;\n svg{\n width: 1rem;\n height: 1rem;\n }\n }\n }\n\n .customSelect__placeholder {\n font: var(--body-semi-bold-14-17);\n color: ", ";\n margin: 0;\n line-height: 1.5rem;\n }\n\n .customSelect__single-value {\n margin: 0;\n padding: 0;\n font: var(--body-semi-bold-14-17);\n color: ", ";\n }\n\n .customSelect__input-container {\n margin: 0;\n padding: 0;\n position: absolute;\n bottom: 0;\n top: 0;\n margin-top: 0;\n width: 100% !important;\n display: block !important;\n &:after {\n display: none;\n }\n\n input {\n font: var(--body-semi-bold-14-17) !important;\n width: 100% !important;\n display: block !important;\n height: 100% !important;\n }\n }\n }\n .customSelect__value-container--has-value{\n .customSelect__input-container {\n margin-top: ", " !important;\n //position: static !important;\n }\n }\n .customSelect__indicators{\n height: ", ";\n }\n .customSelect__indicator {\n padding: 0;\n //margin: 0 0 0 0.5rem;\n width: 1.5rem;\n height: 1.5rem;\n transition: all .2s ease;\n align-items: center;\n justify-content: center;\n &:is(.customSelect__dropdown-indicator) {\n ", ";\n }\n\n &:is(.customSelect__clear-indicator) {\n width: 1.5rem;\n height: 1.5rem;\n display: block !important;\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: center center;\n svg {\n display: none;\n }\n\n ~ .customSelect__dropdown-indicator {\n display: none;\n }\n }\n\n div {\n display: block;\n }\n }\n\n .customSelect__indicator-separator {\n display: none;\n }\n .customSelect__loading-indicator{\n width: 1.5rem;\n span{\n display: none;\n }\n ~ *{\n display: none !important;\n ~ *{\n display: none !important;\n }\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__value-container {\n background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');\n background-repeat: no-repeat;\n background-position: 0 center;\n padding: 11px 24px 11px 2rem;\n\n &.customSelect__value-container--has-value {\n background-image: ", ";\n }\n }\n }\n .customSelect__control--is-focused {\n border-color: var(--primary);\n box-shadow: none;\n .customSelect__input-container {\n margin-top: 0 !important;\n }\n .customSelect__value-container--has-value{\n .customSelect__input-container {\n margin-top: ", ";\n position: static;\n\n input {\n\n }\n }\n }\n }\n\n .customSelect__control--is-disabled {\n background-color: var(--dark-opacity-5) !important;\n cursor: not-allowed;\n opacity: 1;\n\n &:before {\n border-width: 1px;\n border-color: var(--dark-opacity-10);\n }\n\n .customSelect__placeholder,\n .customSelect__single-value {\n color: var(--dark-opacity-25);\n }\n }\n\n .customSelect__menu-notice {\n text-align: start;\n padding: 1rem 1.5rem;\n font: var(--body-medium-14-17);\n color: var(--dark-opacity-50);\n }\n\n .customSelect__menu {\n margin: 0;\n border-radius: 0 0 0.5rem 0.5rem;\n box-shadow: ", ";\n border: ", ";\n overflow: hidden;\n position: ", ";\n min-width: ", ";\n left: ", ";\n right: ", ";\n .customSelect__menu-list {\n padding: 0;\n max-height: ", ";\n //max-height: initial !important;\n //scroll-margin: 0 10px 30px 0;\n //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n //scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n\n .option {\n height: 70px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n box-sizing: border-box;\n\n &:hover, &:is(.customSelect__option--is-selected) {\n background-color: var(--dark-opacity-3) !important;\n\n @media only screen and ", " {\n //background-color: transparent !important;\n }\n }\n\n &:is(.customSelect__option--is-focused) {\n background-color: transparent;\n }\n\n &:active {\n background-color: var(--dark-opacity-3);\n\n @media only screen and ", " {\n background-color: transparent !important;\n }\n }\n\n &:is(.optionSm) {\n height: auto;\n min-height: 51px;\n padding: 1rem 1.5rem;\n }\n\n &:is(.fixedBottom) {\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n\n strong {\n color: var(--dark-opacity-50);\n }\n }\n\n &:is(.fixedTop) {\n position: sticky;\n top: 0;\n left: 0;\n right: 0;\n z-index: 4;\n background-color: #fff;\n border-bottom: 1px solid var(--dark-opacity-10);\n \n &:hover {\n background-color: var(--dark-opacity-3) !important;\n }\n }\n\n > div {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n\n .left {\n strong {\n display: block;\n font: var(--title-bold-16-19);\n }\n\n span {\n display: block;\n font: var(--body-medium-13-16);\n }\n }\n\n .right {\n display: flex;\n align-items: end;\n justify-content: flex-end;\n\n strong {\n display: block;\n font: var(--title-extra-bold-16-19);\n line-height: 17px;\n\n small {\n font: var(--body-extra-bold-14-17);\n }\n }\n\n span {\n display: block;\n font: var(--body-regular-13-16);\n margin-left: 0.2rem;\n }\n }\n }\n\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__control--menu-is-open {\n .customSelect__value-container {\n background-image: url('", "') !important;\n }\n }\n }\n\n .customSelect__control--menu-is-open {\n &:before {\n border-color: var(--primary);\n border-width: 2px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n box-shadow: none;\n\n .customSelect__indicator {\n &:is(.customSelect__dropdown-indicator) {\n transform: rotate(180deg);\n }\n }\n\n .customSelect__value-container {\n .customSelect__placeholder {\n color: var(--dark-opacity-50);\n }\n }\n\n\n .customSelect__clear-indicator {\n display: none !important;\n }\n\n\n .customSelect__single-value {\n color: var(--dark) !important;\n }\n }\n }\n }\n\n .placement-top {\n .customSelect__menu {\n border-radius: 0.5rem 0.5rem 0 0 !important;\n top: auto !important;\n bottom: 100% !important;\n }\n\n .customSelect__control--menu-is-open {\n &:before {\n border-radius: 0 0 0.5rem 0.5rem !important;\n }\n }\n }\n"], ["\n /* Checkbox styling for multi-select options */\n .option-container {\n display: flex;\n align-items: center;\n width: 100%;\n }\n \n .checkbox-container {\n display: flex;\n align-items: center;\n }\n \n .custom-checkbox {\n width: 16px;\n height: 16px;\n border: 1px solid var(--dark-opacity-10);\n border-radius: 3px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: white;\n }\n \n .custom-checkbox.checked {\n background-color: var(--primary);\n border-color: var(--primary);\n }\n \n .option-content {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n }\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n }\n\n [data-simplebar] {\n max-height: ", " !important;\n height: auto !important;\n padding: 0 !important;\n\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font: var(--caption-semi-bold-11-13);\n }\n }\n\n .select {\n position: relative;\n z-index: 2;\n .customSelect {\n &:is(.lightBg) {\n .customSelect__control {\n background-color: ", ";\n }\n }\n\n .customSelect__control {\n background-color: ", ";\n border: 0;\n padding: ", ";\n cursor: ", ";\n\n &:before {\n content: \"\";\n position: absolute;\n inset: 0;\n user-select: none;\n pointer-events: none;\n border-width: ", ";\n border-style: solid;\n border-radius: 0.5rem;\n border-color: ", ";\n }\n ", "\n /*&:hover {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n }\n }*/\n\n .customSelect__value-container {\n padding: 0;\n min-height: ", ";\n\n &:is(.customSelect__value-container--is-multi) {\n display: block;\n padding: 1rem 0;\n }\n\n .customSelect__multi-value {\n border: 1px solid var(--grey-10);\n border-radius: 0.25rem;\n background-color: var(--dark-opacity-3);\n margin: 0;\n justify-content: space-between;\n display: grid;\n grid-template-columns: 1fr auto;\n position: relative;\n z-index: 5;\n + .customSelect__multi-value {\n margin-top: 0.5rem;\n }\n\n .customSelect__multi-value__label {\n font: var(--body-semi-bold-13-16); \n white-space: nowrap;\n border-radius: 2px;\n color: hsl(0, 0%, 20%);\n padding: 3px 3px 3px 6px;\n box-sizing: border-box;\n display: grid;\n align-items: center;\n grid-template-columns: auto auto;\n justify-content: flex-start;\n span{\n overflow: hidden;\n text-overflow: ellipsis;\n &:nth-child(2){\n margin-left: 0.25rem;\n }\n }\n }\n\n .customSelect__multi-value__remove {\n background-color: transparent !important;\n color: var(--dark) !important;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n border-radius: 2px;\n padding-left: 4px;\n padding-right: 4px;\n box-sizing: border-box;\n svg{\n width: 1rem;\n height: 1rem;\n }\n }\n }\n\n .customSelect__placeholder {\n font: var(--body-semi-bold-14-17);\n color: ", ";\n margin: 0;\n line-height: 1.5rem;\n }\n\n .customSelect__single-value {\n margin: 0;\n padding: 0;\n font: var(--body-semi-bold-14-17);\n color: ", ";\n }\n\n .customSelect__input-container {\n margin: 0;\n padding: 0;\n position: absolute;\n bottom: 0;\n top: 0;\n margin-top: 0;\n width: 100% !important;\n display: block !important;\n &:after {\n display: none;\n }\n\n input {\n font: var(--body-semi-bold-14-17) !important;\n width: 100% !important;\n display: block !important;\n height: 100% !important;\n }\n }\n }\n .customSelect__value-container--has-value{\n .customSelect__input-container {\n margin-top: ", " !important;\n //position: static !important;\n }\n }\n .customSelect__indicators{\n height: ", ";\n }\n .customSelect__indicator {\n padding: 0;\n //margin: 0 0 0 0.5rem;\n width: 1.5rem;\n height: 1.5rem;\n transition: all .2s ease;\n align-items: center;\n justify-content: center;\n &:is(.customSelect__dropdown-indicator) {\n ", ";\n }\n\n &:is(.customSelect__clear-indicator) {\n width: 1.5rem;\n height: 1.5rem;\n display: block !important;\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: center center;\n svg {\n display: none;\n }\n\n ~ .customSelect__dropdown-indicator {\n display: none;\n }\n }\n\n div {\n display: block;\n }\n }\n\n .customSelect__indicator-separator {\n display: none;\n }\n .customSelect__loading-indicator{\n width: 1.5rem;\n span{\n display: none;\n }\n ~ *{\n display: none !important;\n ~ *{\n display: none !important;\n }\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__value-container {\n background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');\n background-repeat: no-repeat;\n background-position: 0 center;\n padding: 11px 24px 11px 2rem;\n\n &.customSelect__value-container--has-value {\n background-image: ", ";\n }\n }\n }\n .customSelect__control--is-focused {\n border-color: var(--primary);\n box-shadow: none;\n .customSelect__input-container {\n margin-top: 0 !important;\n }\n .customSelect__value-container--has-value{\n .customSelect__input-container {\n margin-top: ", ";\n position: static;\n\n input {\n\n }\n }\n }\n }\n\n .customSelect__control--is-disabled {\n background-color: var(--dark-opacity-5) !important;\n cursor: not-allowed;\n opacity: 1;\n\n &:before {\n border-width: 1px;\n border-color: var(--dark-opacity-10);\n }\n\n .customSelect__placeholder,\n .customSelect__single-value {\n color: var(--dark-opacity-25);\n }\n }\n\n .customSelect__menu-notice {\n text-align: start;\n padding: 1rem 1.5rem;\n font: var(--body-medium-14-17);\n color: var(--dark-opacity-50);\n }\n\n .customSelect__menu {\n margin: 0;\n border-radius: 0 0 0.5rem 0.5rem;\n box-shadow: ", ";\n border: ", ";\n overflow: hidden;\n position: ", ";\n min-width: ", ";\n left: ", ";\n right: ", ";\n .customSelect__menu-list {\n padding: 0;\n max-height: ", ";\n //max-height: initial !important;\n //scroll-margin: 0 10px 30px 0;\n //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n //scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n\n .option {\n height: 70px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n box-sizing: border-box;\n\n &:hover, &:is(.customSelect__option--is-selected) {\n background-color: var(--dark-opacity-3) !important;\n\n @media only screen and ", " {\n //background-color: transparent !important;\n }\n }\n\n &:is(.customSelect__option--is-focused) {\n background-color: transparent;\n }\n\n &:active {\n background-color: var(--dark-opacity-3);\n\n @media only screen and ", " {\n background-color: transparent !important;\n }\n }\n\n &:is(.optionSm) {\n height: auto;\n min-height: 51px;\n padding: 1rem 1.5rem;\n }\n\n &:is(.fixedBottom) {\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n\n strong {\n color: var(--dark-opacity-50);\n }\n }\n\n &:is(.fixedTop) {\n position: sticky;\n top: 0;\n left: 0;\n right: 0;\n z-index: 4;\n background-color: #fff;\n border-bottom: 1px solid var(--dark-opacity-10);\n \n &:hover {\n background-color: var(--dark-opacity-3) !important;\n }\n }\n\n > div {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n\n .left {\n strong {\n display: block;\n font: var(--title-bold-16-19);\n }\n\n span {\n display: block;\n font: var(--body-medium-13-16);\n }\n }\n\n .right {\n display: flex;\n align-items: end;\n justify-content: flex-end;\n\n strong {\n display: block;\n font: var(--title-extra-bold-16-19);\n line-height: 17px;\n\n small {\n font: var(--body-extra-bold-14-17);\n }\n }\n\n span {\n display: block;\n font: var(--body-regular-13-16);\n margin-left: 0.2rem;\n }\n }\n }\n\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__control--menu-is-open {\n .customSelect__value-container {\n background-image: url('", "') !important;\n }\n }\n }\n\n .customSelect__control--menu-is-open {\n &:before {\n border-color: var(--primary);\n border-width: 2px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n box-shadow: none;\n\n .customSelect__indicator {\n &:is(.customSelect__dropdown-indicator) {\n transform: rotate(180deg);\n }\n }\n\n .customSelect__value-container {\n .customSelect__placeholder {\n color: var(--dark-opacity-50);\n }\n }\n\n\n .customSelect__clear-indicator {\n display: none !important;\n }\n\n\n .customSelect__single-value {\n color: var(--dark) !important;\n }\n }\n }\n }\n\n .placement-top {\n .customSelect__menu {\n border-radius: 0.5rem 0.5rem 0 0 !important;\n top: auto !important;\n bottom: 100% !important;\n }\n\n .customSelect__control--menu-is-open {\n &:before {\n border-radius: 0 0 0.5rem 0.5rem !important;\n }\n }\n }\n"])), function (props) { return props.$width || '370px'; }, function (props) { return props.$maxOptionListHeight && props.$maxOptionListHeight; }, function (props) { return props.$disabled ? 'var(--dark-opacity-5)' : 'white'; }, function (props) {
|
|
17
|
+
exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n /* Checkbox styling for multi-select options */\n .option-container {\n display: flex;\n align-items: center;\n width: 100%;\n }\n \n .checkbox-container {\n display: flex;\n align-items: center;\n }\n \n .custom-checkbox {\n width: 16px;\n height: 16px;\n border: 1px solid var(--dark-opacity-10);\n border-radius: 3px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--theme-bg-color);\n }\n \n .custom-checkbox.checked {\n background-color: var(--primary);\n border-color: var(--primary);\n }\n \n .option-content {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n }\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n }\n\n [data-simplebar] {\n max-height: ", " !important;\n height: auto !important;\n padding: 0 !important;\n\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font: var(--caption-semi-bold-11-13);\n }\n }\n\n .select {\n position: relative;\n z-index: 2;\n .customSelect {\n &:is(.lightBg) {\n .customSelect__control {\n background-color: ", ";\n }\n }\n\n .customSelect__control {\n background-color: ", ";\n border: 0;\n padding: ", ";\n cursor: ", ";\n\n &:before {\n content: \"\";\n position: absolute;\n inset: 0;\n user-select: none;\n pointer-events: none;\n border-width: ", ";\n border-style: solid;\n border-radius: 0.5rem;\n border-color: ", ";\n }\n ", "\n /*&:hover {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n }\n }*/\n\n .customSelect__value-container {\n padding: 0;\n min-height: ", ";\n\n &:is(.customSelect__value-container--is-multi) {\n display: block;\n padding: 1rem 0;\n }\n\n .customSelect__multi-value {\n border: 1px solid var(--grey-10);\n border-radius: 0.25rem;\n background-color: var(--dark-opacity-3);\n margin: 0;\n justify-content: space-between;\n display: grid;\n grid-template-columns: 1fr auto;\n position: relative;\n z-index: 5;\n + .customSelect__multi-value {\n margin-top: 0.5rem;\n }\n\n .customSelect__multi-value__label {\n font: var(--body-semi-bold-13-16); \n white-space: nowrap;\n border-radius: 2px;\n color: hsl(0, 0%, 20%);\n padding: 3px 3px 3px 6px;\n box-sizing: border-box;\n display: grid;\n align-items: center;\n grid-template-columns: auto auto;\n justify-content: flex-start;\n span{\n overflow: hidden;\n text-overflow: ellipsis;\n &:nth-child(2){\n margin-left: 0.25rem;\n }\n }\n }\n\n .customSelect__multi-value__remove {\n background-color: transparent !important;\n color: var(--dark) !important;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n border-radius: 2px;\n padding-left: 4px;\n padding-right: 4px;\n box-sizing: border-box;\n svg{\n width: 1rem;\n height: 1rem;\n }\n }\n }\n\n .customSelect__placeholder {\n font: var(--body-semi-bold-14-17);\n color: ", ";\n margin: 0;\n line-height: 1.5rem;\n }\n\n .customSelect__single-value {\n margin: 0;\n padding: 0;\n font: var(--body-semi-bold-14-17);\n color: ", ";\n }\n\n .customSelect__input-container {\n margin: 0;\n padding: 0;\n position: absolute;\n bottom: 0;\n top: 0;\n margin-top: 0;\n width: 100% !important;\n display: block !important;\n &:after {\n display: none;\n }\n\n input {\n font: var(--body-semi-bold-14-17) !important;\n width: 100% !important;\n display: block !important;\n height: 100% !important;\n }\n }\n }\n .customSelect__value-container--has-value{\n .customSelect__input-container {\n margin-top: ", " !important;\n //position: static !important;\n }\n }\n .customSelect__indicators{\n height: ", ";\n }\n .customSelect__indicator {\n padding: 0;\n //margin: 0 0 0 0.5rem;\n width: 1.5rem;\n height: 1.5rem;\n transition: all .2s ease;\n align-items: center;\n justify-content: center;\n &:is(.customSelect__dropdown-indicator) {\n ", ";\n }\n\n &:is(.customSelect__clear-indicator) {\n width: 1.5rem;\n height: 1.5rem;\n display: block !important;\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: center center;\n svg {\n display: none;\n }\n\n ~ .customSelect__dropdown-indicator {\n display: none;\n }\n }\n\n div {\n display: block;\n }\n }\n\n .customSelect__indicator-separator {\n display: none;\n }\n .customSelect__loading-indicator{\n width: 1.5rem;\n span{\n display: none;\n }\n ~ *{\n display: none !important;\n ~ *{\n display: none !important;\n }\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__value-container {\n background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');\n background-repeat: no-repeat;\n background-position: 0 center;\n padding: 11px 24px 11px 2rem;\n\n &.customSelect__value-container--has-value {\n background-image: ", ";\n }\n }\n }\n .customSelect__control--is-focused {\n border-color: var(--primary);\n box-shadow: none;\n .customSelect__input-container {\n margin-top: 0 !important;\n }\n .customSelect__value-container--has-value{\n .customSelect__input-container {\n margin-top: ", ";\n position: static;\n\n input {\n\n }\n }\n }\n }\n\n .customSelect__control--is-disabled {\n background-color: var(--dark-opacity-5) !important;\n cursor: not-allowed;\n opacity: 1;\n\n &:before {\n border-width: 1px;\n border-color: var(--dark-opacity-10);\n }\n\n .customSelect__placeholder,\n .customSelect__single-value {\n color: var(--dark-opacity-25);\n }\n }\n\n .customSelect__menu-notice {\n text-align: start;\n padding: 1rem 1.5rem;\n font: var(--body-medium-14-17);\n color: var(--dark-opacity-50);\n }\n\n .customSelect__menu {\n margin: 0;\n border-radius: 0 0 0.5rem 0.5rem;\n box-shadow: ", ";\n border: ", ";\n overflow: hidden;\n position: ", ";\n min-width: ", ";\n left: ", ";\n right: ", ";\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: var(--theme-bg-color);\n }\n\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: var(--theme-bg-color);\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: var(--theme-bg-color);\n position: relative;\n color: var(--dark);\n cursor: pointer;\n box-sizing: border-box;\n\n &:hover, &:is(.customSelect__option--is-selected) {\n background-color: var(--dark-opacity-3) !important;\n\n @media only screen and ", " {\n //background-color: transparent !important;\n }\n }\n\n &:is(.customSelect__option--is-focused) {\n background-color: transparent;\n }\n\n &:active {\n background-color: var(--dark-opacity-3);\n\n @media only screen and ", " {\n background-color: transparent !important;\n }\n }\n\n &:is(.optionSm) {\n height: auto;\n min-height: 51px;\n padding: 1rem 1.5rem;\n }\n\n &:is(.fixedBottom) {\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n\n strong {\n color: var(--dark-opacity-50);\n }\n }\n\n &:is(.fixedTop) {\n position: sticky;\n top: 0;\n left: 0;\n right: 0;\n z-index: 4;\n background-color: var(--theme-bg-color);\n border-bottom: 1px solid var(--dark-opacity-10);\n \n &:hover {\n background-color: var(--dark-opacity-3) !important;\n }\n }\n\n > div {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n\n .left {\n strong {\n display: block;\n font: var(--title-bold-16-19);\n }\n\n span {\n display: block;\n font: var(--body-medium-13-16);\n }\n }\n\n .right {\n display: flex;\n align-items: end;\n justify-content: flex-end;\n\n strong {\n display: block;\n font: var(--title-extra-bold-16-19);\n line-height: 17px;\n\n small {\n font: var(--body-extra-bold-14-17);\n }\n }\n\n span {\n display: block;\n font: var(--body-regular-13-16);\n margin-left: 0.2rem;\n }\n }\n }\n\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__control--menu-is-open {\n .customSelect__value-container {\n background-image: url('", "') !important;\n }\n }\n }\n\n .customSelect__control--menu-is-open {\n &:before {\n border-color: var(--primary);\n border-width: 2px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n box-shadow: none;\n\n .customSelect__indicator {\n &:is(.customSelect__dropdown-indicator) {\n transform: rotate(180deg);\n }\n }\n\n .customSelect__value-container {\n .customSelect__placeholder {\n color: var(--dark-opacity-50);\n }\n }\n\n\n .customSelect__clear-indicator {\n display: none !important;\n }\n\n\n .customSelect__single-value {\n color: var(--dark) !important;\n }\n }\n }\n }\n\n .placement-top {\n .customSelect__menu {\n border-radius: 0.5rem 0.5rem 0 0 !important;\n top: auto !important;\n bottom: 100% !important;\n }\n\n .customSelect__control--menu-is-open {\n &:before {\n border-radius: 0 0 0.5rem 0.5rem !important;\n }\n }\n }\n"], ["\n /* Checkbox styling for multi-select options */\n .option-container {\n display: flex;\n align-items: center;\n width: 100%;\n }\n \n .checkbox-container {\n display: flex;\n align-items: center;\n }\n \n .custom-checkbox {\n width: 16px;\n height: 16px;\n border: 1px solid var(--dark-opacity-10);\n border-radius: 3px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--theme-bg-color);\n }\n \n .custom-checkbox.checked {\n background-color: var(--primary);\n border-color: var(--primary);\n }\n \n .option-content {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n }\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n }\n\n [data-simplebar] {\n max-height: ", " !important;\n height: auto !important;\n padding: 0 !important;\n\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font: var(--caption-semi-bold-11-13);\n }\n }\n\n .select {\n position: relative;\n z-index: 2;\n .customSelect {\n &:is(.lightBg) {\n .customSelect__control {\n background-color: ", ";\n }\n }\n\n .customSelect__control {\n background-color: ", ";\n border: 0;\n padding: ", ";\n cursor: ", ";\n\n &:before {\n content: \"\";\n position: absolute;\n inset: 0;\n user-select: none;\n pointer-events: none;\n border-width: ", ";\n border-style: solid;\n border-radius: 0.5rem;\n border-color: ", ";\n }\n ", "\n /*&:hover {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n }\n }*/\n\n .customSelect__value-container {\n padding: 0;\n min-height: ", ";\n\n &:is(.customSelect__value-container--is-multi) {\n display: block;\n padding: 1rem 0;\n }\n\n .customSelect__multi-value {\n border: 1px solid var(--grey-10);\n border-radius: 0.25rem;\n background-color: var(--dark-opacity-3);\n margin: 0;\n justify-content: space-between;\n display: grid;\n grid-template-columns: 1fr auto;\n position: relative;\n z-index: 5;\n + .customSelect__multi-value {\n margin-top: 0.5rem;\n }\n\n .customSelect__multi-value__label {\n font: var(--body-semi-bold-13-16); \n white-space: nowrap;\n border-radius: 2px;\n color: hsl(0, 0%, 20%);\n padding: 3px 3px 3px 6px;\n box-sizing: border-box;\n display: grid;\n align-items: center;\n grid-template-columns: auto auto;\n justify-content: flex-start;\n span{\n overflow: hidden;\n text-overflow: ellipsis;\n &:nth-child(2){\n margin-left: 0.25rem;\n }\n }\n }\n\n .customSelect__multi-value__remove {\n background-color: transparent !important;\n color: var(--dark) !important;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n border-radius: 2px;\n padding-left: 4px;\n padding-right: 4px;\n box-sizing: border-box;\n svg{\n width: 1rem;\n height: 1rem;\n }\n }\n }\n\n .customSelect__placeholder {\n font: var(--body-semi-bold-14-17);\n color: ", ";\n margin: 0;\n line-height: 1.5rem;\n }\n\n .customSelect__single-value {\n margin: 0;\n padding: 0;\n font: var(--body-semi-bold-14-17);\n color: ", ";\n }\n\n .customSelect__input-container {\n margin: 0;\n padding: 0;\n position: absolute;\n bottom: 0;\n top: 0;\n margin-top: 0;\n width: 100% !important;\n display: block !important;\n &:after {\n display: none;\n }\n\n input {\n font: var(--body-semi-bold-14-17) !important;\n width: 100% !important;\n display: block !important;\n height: 100% !important;\n }\n }\n }\n .customSelect__value-container--has-value{\n .customSelect__input-container {\n margin-top: ", " !important;\n //position: static !important;\n }\n }\n .customSelect__indicators{\n height: ", ";\n }\n .customSelect__indicator {\n padding: 0;\n //margin: 0 0 0 0.5rem;\n width: 1.5rem;\n height: 1.5rem;\n transition: all .2s ease;\n align-items: center;\n justify-content: center;\n &:is(.customSelect__dropdown-indicator) {\n ", ";\n }\n\n &:is(.customSelect__clear-indicator) {\n width: 1.5rem;\n height: 1.5rem;\n display: block !important;\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: center center;\n svg {\n display: none;\n }\n\n ~ .customSelect__dropdown-indicator {\n display: none;\n }\n }\n\n div {\n display: block;\n }\n }\n\n .customSelect__indicator-separator {\n display: none;\n }\n .customSelect__loading-indicator{\n width: 1.5rem;\n span{\n display: none;\n }\n ~ *{\n display: none !important;\n ~ *{\n display: none !important;\n }\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__value-container {\n background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');\n background-repeat: no-repeat;\n background-position: 0 center;\n padding: 11px 24px 11px 2rem;\n\n &.customSelect__value-container--has-value {\n background-image: ", ";\n }\n }\n }\n .customSelect__control--is-focused {\n border-color: var(--primary);\n box-shadow: none;\n .customSelect__input-container {\n margin-top: 0 !important;\n }\n .customSelect__value-container--has-value{\n .customSelect__input-container {\n margin-top: ", ";\n position: static;\n\n input {\n\n }\n }\n }\n }\n\n .customSelect__control--is-disabled {\n background-color: var(--dark-opacity-5) !important;\n cursor: not-allowed;\n opacity: 1;\n\n &:before {\n border-width: 1px;\n border-color: var(--dark-opacity-10);\n }\n\n .customSelect__placeholder,\n .customSelect__single-value {\n color: var(--dark-opacity-25);\n }\n }\n\n .customSelect__menu-notice {\n text-align: start;\n padding: 1rem 1.5rem;\n font: var(--body-medium-14-17);\n color: var(--dark-opacity-50);\n }\n\n .customSelect__menu {\n margin: 0;\n border-radius: 0 0 0.5rem 0.5rem;\n box-shadow: ", ";\n border: ", ";\n overflow: hidden;\n position: ", ";\n min-width: ", ";\n left: ", ";\n right: ", ";\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: var(--theme-bg-color);\n }\n\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: var(--theme-bg-color);\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: var(--theme-bg-color);\n position: relative;\n color: var(--dark);\n cursor: pointer;\n box-sizing: border-box;\n\n &:hover, &:is(.customSelect__option--is-selected) {\n background-color: var(--dark-opacity-3) !important;\n\n @media only screen and ", " {\n //background-color: transparent !important;\n }\n }\n\n &:is(.customSelect__option--is-focused) {\n background-color: transparent;\n }\n\n &:active {\n background-color: var(--dark-opacity-3);\n\n @media only screen and ", " {\n background-color: transparent !important;\n }\n }\n\n &:is(.optionSm) {\n height: auto;\n min-height: 51px;\n padding: 1rem 1.5rem;\n }\n\n &:is(.fixedBottom) {\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n\n strong {\n color: var(--dark-opacity-50);\n }\n }\n\n &:is(.fixedTop) {\n position: sticky;\n top: 0;\n left: 0;\n right: 0;\n z-index: 4;\n background-color: var(--theme-bg-color);\n border-bottom: 1px solid var(--dark-opacity-10);\n \n &:hover {\n background-color: var(--dark-opacity-3) !important;\n }\n }\n\n > div {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n\n .left {\n strong {\n display: block;\n font: var(--title-bold-16-19);\n }\n\n span {\n display: block;\n font: var(--body-medium-13-16);\n }\n }\n\n .right {\n display: flex;\n align-items: end;\n justify-content: flex-end;\n\n strong {\n display: block;\n font: var(--title-extra-bold-16-19);\n line-height: 17px;\n\n small {\n font: var(--body-extra-bold-14-17);\n }\n }\n\n span {\n display: block;\n font: var(--body-regular-13-16);\n margin-left: 0.2rem;\n }\n }\n }\n\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__control--menu-is-open {\n .customSelect__value-container {\n background-image: url('", "') !important;\n }\n }\n }\n\n .customSelect__control--menu-is-open {\n &:before {\n border-color: var(--primary);\n border-width: 2px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n box-shadow: none;\n\n .customSelect__indicator {\n &:is(.customSelect__dropdown-indicator) {\n transform: rotate(180deg);\n }\n }\n\n .customSelect__value-container {\n .customSelect__placeholder {\n color: var(--dark-opacity-50);\n }\n }\n\n\n .customSelect__clear-indicator {\n display: none !important;\n }\n\n\n .customSelect__single-value {\n color: var(--dark) !important;\n }\n }\n }\n }\n\n .placement-top {\n .customSelect__menu {\n border-radius: 0.5rem 0.5rem 0 0 !important;\n top: auto !important;\n bottom: 100% !important;\n }\n\n .customSelect__control--menu-is-open {\n &:before {\n border-radius: 0 0 0.5rem 0.5rem !important;\n }\n }\n }\n"])), function (props) { return props.$width || '370px'; }, function (props) { return props.$maxOptionListHeight && props.$maxOptionListHeight; }, function (props) { return props.$disabled ? 'var(--dark-opacity-5)' : 'var(--theme-bg-color)'; }, function (props) {
|
|
18
18
|
if (props.$disabled)
|
|
19
19
|
return 'var(--dark-opacity-5)';
|
|
20
20
|
if (props.$hasError)
|
|
21
|
-
return '
|
|
21
|
+
return 'var(--theme-bg-color)';
|
|
22
22
|
return 'var(--dark-opacity-3)';
|
|
23
|
-
}, function (props) { return props.$hasShowDropdownIcon ? "0 1rem 0 1.5rem" : "0 1.5rem"; }, function (props) { return props.$disabled ? 'not-allowed' : 'pointer'; }, function (props) { return props.$hasError && !props.$disabled ? "2px" : "1px"; }, function (props) { return props.$hasError && !props.$disabled ? "var(--red)" : "var(--dark-opacity-10)"; }, function (props) { return props.$isMulti && !props.$disabled ? "\n &:is(.customSelect__control--menu-is-open){\n background-color:
|
|
23
|
+
}, function (props) { return props.$hasShowDropdownIcon ? "0 1rem 0 1.5rem" : "0 1.5rem"; }, function (props) { return props.$disabled ? 'not-allowed' : 'pointer'; }, function (props) { return props.$hasError && !props.$disabled ? "2px" : "1px"; }, function (props) { return props.$hasError && !props.$disabled ? "var(--red)" : "var(--dark-opacity-10)"; }, function (props) { return props.$isMulti && !props.$disabled ? "\n &:is(.customSelect__control--menu-is-open){\n background-color: var(--theme-bg-color) !important;\n }\n " : ""; }, function (props) {
|
|
24
24
|
switch (props.$size) {
|
|
25
25
|
case 'medium':
|
|
26
26
|
return "56px";
|
|
@@ -16,7 +16,7 @@ var svgToBase64_1 = __importDefault(require("../../utils/svgToBase64"));
|
|
|
16
16
|
exports.ProductCardLink = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n text-decoration: none;\n color: inherit;\n"], ["\n text-decoration: none;\n color: inherit;\n"])));
|
|
17
17
|
exports.ProductTitle = styled_components_1.default.strong(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 19px;\n word-break: break-word;\n margin-bottom: 0.5rem;\n font: var(--title-semi-bold-16-19);\n transition: all .2s ease;\n"], ["\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 19px;\n word-break: break-word;\n margin-bottom: 0.5rem;\n font: var(--title-semi-bold-16-19);\n transition: all .2s ease;\n"])));
|
|
18
18
|
exports.ProductText = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding-right: 0.5rem;\n\n a:hover ", " {\n color: var(--primary-hover);\n }\n"], ["\n padding-right: 0.5rem;\n\n a:hover ", " {\n color: var(--primary-hover);\n }\n"])), exports.ProductTitle);
|
|
19
|
-
exports.ProductImage = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background:
|
|
19
|
+
exports.ProductImage = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--theme-bg-color);\n\n &:hover ~ ", " ", " {\n color: var(--primary-hover);\n }\n img{\n width: calc(100% - 1rem);\n height: calc(100% - 1rem);\n object-fit: cover;\n border-radius: 0.5rem;\n display: block;\n margin: 0 auto;\n }\n"], ["\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--theme-bg-color);\n\n &:hover ~ ", " ", " {\n color: var(--primary-hover);\n }\n img{\n width: calc(100% - 1rem);\n height: calc(100% - 1rem);\n object-fit: cover;\n border-radius: 0.5rem;\n display: block;\n margin: 0 auto;\n }\n"])), exports.ProductText, exports.ProductTitle);
|
|
20
20
|
exports.ProductInner = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n"], ["\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n"])));
|
|
21
21
|
exports.ProductPriceContent = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n grid-template-columns: ", ";\n"], ["\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n grid-template-columns: ", ";\n"])), function (props) { return props.$discountRate ? 'center' : 'end'; }, function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; });
|
|
22
22
|
exports.ProductDiscountRate = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font: var(--body-extra-bold-13-16);\n"], ["\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font: var(--body-extra-bold-13-16);\n"])));
|
|
@@ -10,8 +10,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.StepOptionStyled = exports.IndicatorStyled = exports.StepsWrapper = exports.StepSliderStyled = exports.Container = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .top {\n display: flex;\n margin-bottom: 1rem;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n }\n"], ["\n .top {\n display: flex;\n margin-bottom: 1rem;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n }\n"])));
|
|
13
|
-
exports.StepSliderStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n background-color:
|
|
13
|
+
exports.StepSliderStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n background-color: var(--theme-bg-color);\n border-radius: 0.5rem;\n border: 1px solid var(--grey-10);\n height: 48px;\n padding: 0 1.5rem;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n margin-bottom: 0.5rem;\n"], ["\n position: relative;\n background-color: var(--theme-bg-color);\n border-radius: 0.5rem;\n border: 1px solid var(--grey-10);\n height: 48px;\n padding: 0 1.5rem;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n margin-bottom: 0.5rem;\n"])));
|
|
14
14
|
exports.StepsWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));\n justify-content: space-between;\n align-items: center;\n height: 100%;\n position: relative;\n z-index: 1;\n pointer-events: none;\n"], ["\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));\n justify-content: space-between;\n align-items: center;\n height: 100%;\n position: relative;\n z-index: 1;\n pointer-events: none;\n"])));
|
|
15
|
-
exports.IndicatorStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n top: 50%;\n transform: translateY(-50%) translateX(-16px);\n background-color:
|
|
15
|
+
exports.IndicatorStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n top: 50%;\n transform: translateY(-50%) translateX(-16px);\n background-color: var(--theme-bg-color);\n border-radius: 6px;\n transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);\n z-index: 0;\n width: 64px !important;\n height: 64px;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n"], ["\n position: absolute;\n top: 50%;\n transform: translateY(-50%) translateX(-16px);\n background-color: var(--theme-bg-color);\n border-radius: 6px;\n transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);\n z-index: 0;\n width: 64px !important;\n height: 64px;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n"])));
|
|
16
16
|
exports.StepOptionStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n text-align: center;\n display: flex;\n justify-content: center;\n padding: 0 0;\n border-radius: 6px;\n cursor: pointer;\n color: var(--grey-50);\n background-color: transparent;\n transition: color 0.3s ease;\n z-index: 1;\n font: var(--body-semi-bold-14-17);\n min-width: 34px;\n user-select: ", ";\n pointer-events: ", ";\n &:hover {\n color: var(--dark);\n }\n span {\n display: block;\n text-align: center;\n font: var(--body-semi-bold-14-17);\n color: var(--grey-50);\n b {\n display: block;\n font: var(--headline-extra-bold-18-22);\n color: var(--dark);\n }\n }\n &:first-child {\n justify-content: start;\n }\n &:last-child {\n justify-content: end;\n }\n"], ["\n text-align: center;\n display: flex;\n justify-content: center;\n padding: 0 0;\n border-radius: 6px;\n cursor: pointer;\n color: var(--grey-50);\n background-color: transparent;\n transition: color 0.3s ease;\n z-index: 1;\n font: var(--body-semi-bold-14-17);\n min-width: 34px;\n user-select: ", ";\n pointer-events: ", ";\n &:hover {\n color: var(--dark);\n }\n span {\n display: block;\n text-align: center;\n font: var(--body-semi-bold-14-17);\n color: var(--grey-50);\n b {\n display: block;\n font: var(--headline-extra-bold-18-22);\n color: var(--dark);\n }\n }\n &:first-child {\n justify-content: start;\n }\n &:last-child {\n justify-content: end;\n }\n"])), function (props) { return props.isActive ? 'none' : 'auto'; }, function (props) { return props.isActive ? 'none' : 'auto'; });
|
|
17
17
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -58,7 +58,7 @@ exports.InSearchEmptyState = {
|
|
|
58
58
|
padding: 24,
|
|
59
59
|
border: "1px solid var(--dark-opacity-10)",
|
|
60
60
|
borderRadius: 8,
|
|
61
|
-
background: "
|
|
61
|
+
background: "var(--theme-bg-color)",
|
|
62
62
|
} }, { children: [(0, jsx_runtime_1.jsx)("p", __assign({ style: {
|
|
63
63
|
margin: "0 0 16px",
|
|
64
64
|
font: "var(--body-regular-14-17)",
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.TagRemoveButton = exports.TagLabel = exports.TagStar = exports.TagDragHandle = exports.TagStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.TagStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n max-width: 100%;\n padding: 0.5rem 1rem 0.5rem ", ";\n border-radius: 0.25rem;\n border: 1px solid var(--grey-10);\n background-color: var(--dark-opacity-3);\n box-sizing: border-box;\n cursor: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n max-width: 100%;\n padding: 0.5rem 1rem 0.5rem ", ";\n border-radius: 0.25rem;\n border: 1px solid var(--grey-10);\n background-color: var(--dark-opacity-3);\n box-sizing: border-box;\n cursor: ", ";\n"])), function (props) { return (props.$hasDragHandle ? '0.5rem' : '1rem'); }, function (props) { return (props.$disabled ? 'not-allowed' : props.$clickable ? 'pointer' : 'default'); });
|
|
13
|
-
exports.TagDragHandle = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n margin-right: 0.5rem;\n padding: 0;\n box-shadow: 0px 0px 16px 0px var(--dark-opacity-10);\n border-radius: 0.25rem;\n background-color:
|
|
13
|
+
exports.TagDragHandle = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n margin-right: 0.5rem;\n padding: 0;\n box-shadow: 0px 0px 16px 0px var(--dark-opacity-10);\n border-radius: 0.25rem;\n background-color: var(--theme-bg-color);\n cursor: grab;\n color: var(--primary);\n touch-action: none;\n border: none;\n transition: all 0.2s ease-in-out;\n\n &:hover {\n background-color: var(--primary);\n color: white;\n }\n\n &:active {\n cursor: grabbing;\n background-color: var(--primary);\n color: white;\n }\n\n &:disabled {\n cursor: not-allowed;\n box-shadow: none;\n color: var(--dark-opacity-25);\n background-color: var(--dark-opacity-3);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n margin-right: 0.5rem;\n padding: 0;\n box-shadow: 0px 0px 16px 0px var(--dark-opacity-10);\n border-radius: 0.25rem;\n background-color: var(--theme-bg-color);\n cursor: grab;\n color: var(--primary);\n touch-action: none;\n border: none;\n transition: all 0.2s ease-in-out;\n\n &:hover {\n background-color: var(--primary);\n color: white;\n }\n\n &:active {\n cursor: grabbing;\n background-color: var(--primary);\n color: white;\n }\n\n &:disabled {\n cursor: not-allowed;\n box-shadow: none;\n color: var(--dark-opacity-25);\n background-color: var(--dark-opacity-3);\n }\n"])));
|
|
14
14
|
exports.TagStar = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-right: 0.25rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-right: 0.25rem;\n"])));
|
|
15
15
|
exports.TagLabel = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font: var(--body-semi-bold-13-16);\n color: var(--dark);\n word-break: break-word;\n"], ["\n font: var(--body-semi-bold-13-16);\n color: var(--dark);\n word-break: break-word;\n"])));
|
|
16
16
|
exports.TagRemoveButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--dark);\n cursor: pointer;\n flex-shrink: 0;\n margin-left: 0.5rem;\n &:disabled {\n cursor: not-allowed;\n color: var(--dark-opacity-25);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--dark);\n cursor: pointer;\n flex-shrink: 0;\n margin-left: 0.5rem;\n &:disabled {\n cursor: not-allowed;\n color: var(--dark-opacity-25);\n }\n"])));
|
|
@@ -12,7 +12,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
|
|
|
12
12
|
exports.TagInputStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n"])));
|
|
13
13
|
exports.TagInputLabel = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin: 0 0 0.5rem;\n color: var(--dark-opacity-50);\n display: block;\n font: var(--caption-bold-12-15);\n"], ["\n margin: 0 0 0.5rem;\n color: var(--dark-opacity-50);\n display: block;\n font: var(--caption-bold-12-15);\n"])));
|
|
14
14
|
exports.TagInputFields = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: flex-start;\n gap: 1rem;\n"], ["\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: flex-start;\n gap: 1rem;\n"])));
|
|
15
|
-
exports.TagInputField = styled_components_1.default.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n padding: 19.5px 24px;\n color: ", ";\n font: var(--body-semi-bold-14-17);\n outline: none;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n background:
|
|
15
|
+
exports.TagInputField = styled_components_1.default.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n padding: 19.5px 24px;\n color: ", ";\n font: var(--body-semi-bold-14-17);\n outline: none;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n background: var(--theme-bg-color);\n }\n\n &:disabled {\n color: var(--dark-opacity-25);\n cursor: not-allowed;\n }\n"], ["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n padding: 19.5px 24px;\n color: ", ";\n font: var(--body-semi-bold-14-17);\n outline: none;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n background: var(--theme-bg-color);\n }\n\n &:disabled {\n color: var(--dark-opacity-25);\n cursor: not-allowed;\n }\n"])), function (props) { return props.$disabled ? 'var(--dark-opacity-5)' : 'var(--dark-opacity-3)'; }, function (props) { return props.$hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; });
|
|
16
16
|
exports.TagList = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n margin-top: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n margin-top: 1rem;\n"])));
|
|
17
17
|
exports.TagInputError = styled_components_1.default.p(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin: 0.5rem 0 0;\n color: var(--red);\n font: var(--caption-semi-bold-11-13);\n"], ["\n margin: 0.5rem 0 0;\n color: var(--red);\n font: var(--caption-semi-bold-11-13);\n"])));
|
|
18
18
|
exports.TagInputHiddenInputs = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
|
|
@@ -22,7 +22,7 @@ exports.TextLinkStyled = styled_components_1.default.a(templateObject_1 || (temp
|
|
|
22
22
|
}, function (props) { return props.$variant === "primary" ? "var(--primary-hover)" : "var(--grey-50)"; }, devices_1.devices.lg, function (props) { return props.$variant === "primary" ? "var(--primary)" : "var(--grey-50)"; }, function (props) { return props.$variant === "primary" ? "var(--primary-hover)" : "var(--grey-50)"; });
|
|
23
23
|
exports.IconStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (props) { return props.$iconDirection === 'right' ? "margin-left: 0.5rem;" : 'margin-right: 0.5rem;'; });
|
|
24
24
|
exports.Inner = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex-direction: ", ";\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex-direction: ", ";\n"])), function (props) { return props.$iconDirection === 'right' ? "row-reverse" : 'row'; });
|
|
25
|
-
exports.AlertStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n height: 28px;\n border-radius: 0.5rem;\n background-color:
|
|
25
|
+
exports.AlertStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n height: 28px;\n border-radius: 0.5rem;\n background-color: var(--theme-bg-color);\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n transition: opacity .4s ease;\n font: var(--caption-medium-10-12);\n color: var(--dark);\n z-index: 99;\n white-space: nowrap;\n \n ", "\n"], ["\n position: absolute;\n height: 28px;\n border-radius: 0.5rem;\n background-color: var(--theme-bg-color);\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n transition: opacity .4s ease;\n font: var(--caption-medium-10-12);\n color: var(--dark);\n z-index: 99;\n white-space: nowrap;\n \n ", "\n"])), function (props) {
|
|
26
26
|
switch (props.$alertposition) {
|
|
27
27
|
case 'top':
|
|
28
28
|
return "\n bottom: calc(100% + 6px);\n left: 50%;\n transform: translateX(-50%);\n ";
|
|
@@ -16,5 +16,5 @@ Object.defineProperty(exports, "FieldLabel", { enumerable: true, get: function (
|
|
|
16
16
|
Object.defineProperty(exports, "FieldTop", { enumerable: true, get: function () { return Input_styled_1.FieldTop; } });
|
|
17
17
|
Object.defineProperty(exports, "FieldTopActions", { enumerable: true, get: function () { return Input_styled_1.FieldTopActions; } });
|
|
18
18
|
exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\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 margin-left: 4px;\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 .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n\n svg {\n margin-right: 8px;\n margin-left: 4px;\n }\n\n p {\n margin: 0;\n font:var(--caption-semi-bold-11-13);\n }\n }\n"])), function (props) { return props.$width || '370px'; });
|
|
19
|
-
exports.TextareaStyled = styled_components_1.default.textarea(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: ", ";\n background: var(--dark-opacity-3);\n border-radius: 0.5rem;\n border: ", ";\n padding: ", ";\n color: ", ";\n outline: none;\n resize: ", ";\n display: block;\n font:var(--body-semi-bold-14-17);\n &::placeholder {\n color: ", ";\n }\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background:
|
|
19
|
+
exports.TextareaStyled = styled_components_1.default.textarea(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: ", ";\n background: var(--dark-opacity-3);\n border-radius: 0.5rem;\n border: ", ";\n padding: ", ";\n color: ", ";\n outline: none;\n resize: ", ";\n display: block;\n font:var(--body-semi-bold-14-17);\n &::placeholder {\n color: ", ";\n }\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: var(--theme-bg-color);\n }\n\n"], ["\n box-sizing: border-box;\n width: 100%;\n height: ", ";\n background: var(--dark-opacity-3);\n border-radius: 0.5rem;\n border: ", ";\n padding: ", ";\n color: ", ";\n outline: none;\n resize: ", ";\n display: block;\n font:var(--body-semi-bold-14-17);\n &::placeholder {\n color: ", ";\n }\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: var(--theme-bg-color);\n }\n\n"])), function (props) { return props.$height; }, 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.$resize; }, 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)'; });
|
|
20
20
|
var templateObject_1, templateObject_2;
|
|
@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.OverlayStyled = exports.ToastStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.ToastStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background:
|
|
12
|
+
exports.ToastStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: var(--theme-bg-color);\n border-radius: 0.5rem;\n box-sizing: border-box;\n max-width: calc(100vw - 2rem);\n padding: 2rem;\n display: flex;\n align-items: center;\n position: relative;\n ", ";\n width: ", ";\n min-height: ", ";\n > div{\n width: 100%;\n }\n \n .icon{\n width: ", ";\n\n height: ", ";\n border-radius: 50%;\n background-color: ", ";\n text-align: center;\n align-items: center;\n justify-content: center;\n display: flex;\n margin:\n ", ";\n svg{\n\n width: ", ";\n\n height: ", ";\n color: #fff;\n }\n }\n .loaderWrapper{\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .title {\n margin: 2rem 0 0 0;\n padding: 0;\n font:var(--title-extra-bold-16-19);\n }\n \n .content {\n margin: 1rem 0 0 0;\n font:var(--body-regular-14-17);\n &:is(:empty){\n display: none;\n }\n }\n .bottom{\n margin: 2rem 0 0 0;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n column-gap: 1rem;\n button{\n white-space: nowrap;\n }\n }\n\n .toastrHeader{\n align-items: center;\n justify-content: flex-end;\n width: 100%;\n padding: 0 0 24px 0;\n display: flex;\n \n .closeIcon {\n width: 32px;\n height: 32px;\n border-radius: 0.5rem;\n cursor: pointer;\n background: var(--theme-bg-color);\n transition: all .2s;\n color: var(--dark);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1;\n &:hover {\n box-shadow: 0 6px 30px var(--box-shadow-color);\n }\n }\n }\n"], ["\n background: var(--theme-bg-color);\n border-radius: 0.5rem;\n box-sizing: border-box;\n max-width: calc(100vw - 2rem);\n padding: 2rem;\n display: flex;\n align-items: center;\n position: relative;\n ", ";\n width: ", ";\n min-height: ", ";\n > div{\n width: 100%;\n }\n \n .icon{\n width: ", ";\n\n height: ", ";\n border-radius: 50%;\n background-color: ", ";\n text-align: center;\n align-items: center;\n justify-content: center;\n display: flex;\n margin:\n ", ";\n svg{\n\n width: ", ";\n\n height: ", ";\n color: #fff;\n }\n }\n .loaderWrapper{\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .title {\n margin: 2rem 0 0 0;\n padding: 0;\n font:var(--title-extra-bold-16-19);\n }\n \n .content {\n margin: 1rem 0 0 0;\n font:var(--body-regular-14-17);\n &:is(:empty){\n display: none;\n }\n }\n .bottom{\n margin: 2rem 0 0 0;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n column-gap: 1rem;\n button{\n white-space: nowrap;\n }\n }\n\n .toastrHeader{\n align-items: center;\n justify-content: flex-end;\n width: 100%;\n padding: 0 0 24px 0;\n display: flex;\n \n .closeIcon {\n width: 32px;\n height: 32px;\n border-radius: 0.5rem;\n cursor: pointer;\n background: var(--theme-bg-color);\n transition: all .2s;\n color: var(--dark);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1;\n &:hover {\n box-shadow: 0 6px 30px var(--box-shadow-color);\n }\n }\n }\n"])), function (props) {
|
|
13
13
|
switch (props.$alignment) {
|
|
14
14
|
case 'left':
|
|
15
15
|
return "\n justify-content: flex-start;\n text-align: start;\n ";
|
|
@@ -34,8 +34,8 @@ exports.UploaderHeader = styled_components_1.default.div(templateObject_2 || (te
|
|
|
34
34
|
exports.UploaderTitle = styled_components_1.default.h3(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: 0;\n color: var(--dark-opacity-50);\n font: var(--caption-bold-12-15);\n"], ["\n margin: 0;\n color: var(--dark-opacity-50);\n font: var(--caption-bold-12-15);\n"])));
|
|
35
35
|
exports.UploaderDescription = styled_components_1.default.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: 0.5rem 0 0;\n color: var(--dark-opacity-50);\n font: var(--caption-medium-12-15);\n"], ["\n margin: 0.5rem 0 0;\n color: var(--dark-opacity-50);\n font: var(--caption-medium-12-15);\n"])));
|
|
36
36
|
exports.UploaderGrid = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ", minmax(0, 1fr));\n gap: 1rem;\n width: 100%;\n"], ["\n display: grid;\n grid-template-columns: repeat(", ", minmax(0, 1fr));\n gap: 1rem;\n width: 100%;\n"])), function (props) { return props.$columnCount; });
|
|
37
|
-
var slotSelectedStyles = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n border: 2px solid var(--primary);\n background-color:
|
|
38
|
-
var slotFilledStyles = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border: 1px solid var(--dark-opacity-10);\n background-color:
|
|
37
|
+
var slotSelectedStyles = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n border: 2px solid var(--primary);\n background-color: var(--theme-bg-color);\n"], ["\n border: 2px solid var(--primary);\n background-color: var(--theme-bg-color);\n"])));
|
|
38
|
+
var slotFilledStyles = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border: 1px solid var(--dark-opacity-10);\n background-color: var(--theme-bg-color);\n"], ["\n border: 1px solid var(--dark-opacity-10);\n background-color: var(--theme-bg-color);\n"])));
|
|
39
39
|
var slotEmptyStyles = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n border: 1px solid var(--dark-opacity-10);\n background-color: var(--dark-opacity-3);\n\n &:hover:not(:disabled) {\n border-color: var(--primary);\n }\n"], ["\n border: 1px solid var(--dark-opacity-10);\n background-color: var(--dark-opacity-3);\n\n &:hover:not(:disabled) {\n border-color: var(--primary);\n }\n"])));
|
|
40
40
|
exports.UploaderSlot = styled_components_1.default.button(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n aspect-ratio: 1;\n padding: 0;\n border-radius: 0.5rem;\n cursor: ", ";\n overflow: hidden;\n transition: border-color 0.2s ease;\n\n ", "\n\n &:disabled {\n cursor: not-allowed;\n }\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n aspect-ratio: 1;\n padding: 0;\n border-radius: 0.5rem;\n cursor: ", ";\n overflow: hidden;\n transition: border-color 0.2s ease;\n\n ", "\n\n &:disabled {\n cursor: not-allowed;\n }\n"])), function (props) { return props.$disabled ? 'not-allowed' : 'pointer'; }, function (props) {
|
|
41
41
|
if (props.$isSelected)
|
|
@@ -50,6 +50,6 @@ exports.UploaderUploadContent = styled_components_1.default.div(templateObject_1
|
|
|
50
50
|
exports.UploaderUploadBadgeWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n margin-bottom: 0.5rem;\n"], ["\n margin-bottom: 0.5rem;\n"])));
|
|
51
51
|
exports.UploaderUploadLabel = styled_components_1.default.span(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n color: var(--primary);\n font: var(--body-semi-bold-14-17);\n visibility: ", ";\n"], ["\n color: var(--primary);\n font: var(--body-semi-bold-14-17);\n visibility: ", ";\n"])), function (props) { return props.$isHidden ? 'hidden' : 'visible'; });
|
|
52
52
|
exports.UploaderUploadIcon = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 0.5rem;\n visibility: ", ";\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 0.5rem;\n visibility: ", ";\n"])), function (props) { return props.$isHidden ? 'hidden' : 'visible'; });
|
|
53
|
-
exports.UploaderRemoveButton = styled_components_1.default.button(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n width: 32px;\n height: 32px;\n border-radius: 0.5rem;\n cursor: pointer;\n background:
|
|
53
|
+
exports.UploaderRemoveButton = styled_components_1.default.button(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n width: 32px;\n height: 32px;\n border-radius: 0.5rem;\n cursor: pointer;\n background: var(--theme-bg-color);\n transition: all 0.2s;\n color: var(--dark);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n z-index: 1;\n\n &:hover {\n box-shadow: 0 6px 30px var(--box-shadow-color);\n }\n"], ["\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n width: 32px;\n height: 32px;\n border-radius: 0.5rem;\n cursor: pointer;\n background: var(--theme-bg-color);\n transition: all 0.2s;\n color: var(--dark);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n z-index: 1;\n\n &:hover {\n box-shadow: 0 6px 30px var(--box-shadow-color);\n }\n"])));
|
|
54
54
|
exports.UploaderHiddenInput = styled_components_1.default.input(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
|
|
55
55
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
package/dist/jsons/colors.json
CHANGED
|
@@ -305,6 +305,24 @@
|
|
|
305
305
|
}
|
|
306
306
|
]
|
|
307
307
|
},
|
|
308
|
+
{
|
|
309
|
+
"name": "Theme",
|
|
310
|
+
"children": [
|
|
311
|
+
{
|
|
312
|
+
"name": "Background",
|
|
313
|
+
"variants": [
|
|
314
|
+
{
|
|
315
|
+
"data": {
|
|
316
|
+
"name": "Theme Background",
|
|
317
|
+
"hex": "#ffffff",
|
|
318
|
+
"rgb": "255, 255, 255"
|
|
319
|
+
},
|
|
320
|
+
"gradient": []
|
|
321
|
+
}
|
|
322
|
+
]
|
|
323
|
+
}
|
|
324
|
+
]
|
|
325
|
+
},
|
|
308
326
|
{
|
|
309
327
|
"name": "Shadow",
|
|
310
328
|
"children": [
|