krl-alfred 2.17.13 → 2.17.15

package/dist/components/Input/Input.styled.js

@@ -12,5 +12,5 @@ var styled_components_1 = __importDefault(require("styled-components"));
 exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    right: 8px;\n    top: -20px;\n    height: 28px;\n    border-radius: 0.5rem;\n    background-color: white;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 1rem;\n    user-select: none;\n    pointer-events: none;\n    transition: opacity .4s ease;\n    opacity: ", ";\n    font: var(--caption-medium-10-12);\n"], ["\n    position: absolute;\n    right: 8px;\n    top: -20px;\n    height: 28px;\n    border-radius: 0.5rem;\n    background-color: white;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 1rem;\n    user-select: none;\n    pointer-events: none;\n    transition: opacity .4s ease;\n    opacity: ", ";\n    font: var(--caption-medium-10-12);\n"])), function (props) { return props.$visible ? '1' : '0'; });
 exports.Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    width: ", ";\n\n    .top {\n        display: flex;\n        margin-bottom: 16px;\n        font: var(--caption-bold-12-15);\n\n        &.justify-between {\n            justify-content: space-between;\n        }\n\n        label {\n            margin: 0;\n            color: var(--dark-opacity-50);\n            display: block;\n        }\n\n        /*a {\n          margin: 0;\n          color: var(--primary);\n          text-decoration: none;\n          cursor: pointer;\n          &:hover,:focus,:active{\n            color: var(--primary-hover) !important;\n          }\n        }*/\n    }\n\n    .input {\n        position: relative;\n\n        .inputIcon {\n            position: absolute;\n            width: 24px;\n            height: 24px;\n            top: 16px;\n            right: 16px;\n            cursor: pointer;\n\n            &:not(.hasNoBg) {\n                &:hover {\n                    background-color: var(--primary-opacity-5);\n                }\n            }\n        }\n\n        .removeIcon {\n            position: absolute;\n            top: 16px;\n            right: 1rem;\n            cursor: pointer;\n            *{\n                display: block;\n            }\n        }\n\n        .popupText {\n            font: var(--caption-semi-bold-11-13);\n            text-align: center;\n        }\n    }\n\n    .error {\n        display: flex;\n        align-items: center;\n        margin-top: 8px;\n        color: var(--red);\n\n        svg {\n            margin-right: 8px;\n        }\n\n        p {\n            margin: 0;\n            font: var(--caption-semi-bold-11-13);\n        }\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n    width: ", ";\n\n    .top {\n        display: flex;\n        margin-bottom: 16px;\n        font: var(--caption-bold-12-15);\n\n        &.justify-between {\n            justify-content: space-between;\n        }\n\n        label {\n            margin: 0;\n            color: var(--dark-opacity-50);\n            display: block;\n        }\n\n        /*a {\n          margin: 0;\n          color: var(--primary);\n          text-decoration: none;\n          cursor: pointer;\n          &:hover,:focus,:active{\n            color: var(--primary-hover) !important;\n          }\n        }*/\n    }\n\n    .input {\n        position: relative;\n\n        .inputIcon {\n            position: absolute;\n            width: 24px;\n            height: 24px;\n            top: 16px;\n            right: 16px;\n            cursor: pointer;\n\n            &:not(.hasNoBg) {\n                &:hover {\n                    background-color: var(--primary-opacity-5);\n                }\n            }\n        }\n\n        .removeIcon {\n            position: absolute;\n            top: 16px;\n            right: 1rem;\n            cursor: pointer;\n            *{\n                display: block;\n            }\n        }\n\n        .popupText {\n            font: var(--caption-semi-bold-11-13);\n            text-align: center;\n        }\n    }\n\n    .error {\n        display: flex;\n        align-items: center;\n        margin-top: 8px;\n        color: var(--red);\n\n        svg {\n            margin-right: 8px;\n        }\n\n        p {\n            margin: 0;\n            font: var(--caption-semi-bold-11-13);\n        }\n    }\n"])), function (props) { return props.$width || '370px'; });
 exports.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    box-sizing: border-box;\n    width: 100%;\n    height: 56px;\n    background: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    padding: ", ";\n    color: ", ";\n    ", "\n    font: var(--body-semi-bold-14-17);\n    outline: none;\n    user-select: ", ";\n    pointer-events: ", ";\n    -webkit-appearance: none;\n\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    &:focus {\n        padding: 18.5px 23px;\n        border: 2px solid ", ";\n        color: ", ";\n        background: white;\n    }\n\n    &:is([disabled]) {\n        color: var(--dark-opacity-25);\n    }\n\n"], ["\n    box-sizing: border-box;\n    width: 100%;\n    height: 56px;\n    background: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    padding: ", ";\n    color: ", ";\n    ", "\n    font: var(--body-semi-bold-14-17);\n    outline: none;\n    user-select: ", ";\n    pointer-events: ", ";\n    -webkit-appearance: none;\n\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    &:focus {\n        padding: 18.5px 23px;\n        border: 2px solid ", ";\n        color: ", ";\n        background: white;\n    }\n\n    &:is([disabled]) {\n        color: var(--dark-opacity-25);\n    }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.$hasError ? 'white' : 'var(--dark-opacity-3)'); }, function (props) { return props.$hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.$hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.$hasIcon ? 'padding-right: 45px !important;' : ''; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; });
-exports.DatePickerWrapperStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([";\n    .react-datepicker-wrapper {\n        display: block;\n    }\n\n    .react-datepicker-popper {\n        transform: none !important;\n        top: 100% !important;\n        width: 100%;\n        z-index: 5;\n\n        .react-datepicker__triangle {\n            display: none !important;\n        }\n\n    }\n    .react-datepicker {\n        font-family: inherit !important;\n        width: 100%;\n        border: none !important;\n        border-radius: 0 0 0.5rem 0.5rem !important;\n        box-shadow: ", ";\n\n        .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n            background-color: transparent !important;\n            color: inherit !important;\n        }\n\n        .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n            margin: 0 !important;\n            width: 1.5rem !important;\n            height: 1.5rem !important;\n            line-height: 1.5rem !important;\n        }\n\n        .react-datepicker__navigation {\n            position: static;\n            border-radius: 0.5rem;\n            transition: all .2s ease;\n            &:is([disabled]){\n                cursor: not-allowed;\n            }\n            &:not([disabled]):hover {\n                background-color: white;\n                box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                z-index: 2;\n                cursor: pointer;\n            }\n        }\n\n        .react-datepicker__month-container {\n            float: none !important;\n\n            .react-datepicker__header {\n                background-color: white !important;\n                border: none !important;\n                padding: 0 0 0 0 !important;\n\n                .headerTopContent {\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-between;\n                    padding: ", ";\n\n                    .react-datepicker__navigation {\n                        width: 1.5rem;\n                        height: 1.5rem;\n                    }\n\n                    .leftButtons, .rightButtons {\n                        display: flex;\n                        align-items: center;\n                        justify-content: space-between;\n                        color: var(--dark-opacity-50);\n\n                        svg {\n                            color: var(--dark-opacity-50);\n                        }\n                    }\n                }\n\n                .react-datepicker__current-month {\n                    display: block !important;\n                    font: var(--body-semi-bold-14-17);\n                }\n            }\n\n            .react-datepicker__month {\n                margin: ", ";\n            }\n\n            .react-datepicker__day-names {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                margin: ", ";\n\n                .react-datepicker__day-name {\n                    color: var(--grey-50);\n                    font: var(--body-medium-13-16);\n                }\n            }\n\n            .react-datepicker__week {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n\n                + .react-datepicker__week {\n                    margin-top: 0.5rem;\n                }\n\n\n                .react-datepicker__day {\n                    font: var(--caption-bold-12-15);\n                    color: var(--dark);\n                    outline: none !important;\n                    \n                    &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n                        border-radius: 0.25rem;\n                        background-color: var(--primary-opacity-10) !important;\n                        color: var(--primary) !important;\n                        cursor: pointer;\n                    }\n\n                    &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n                        color: var(--primary) !important;\n                    }\n\n                    &:is(.react-datepicker__day--outside-month) {\n                        color: var(--grey-50);\n                    }\n                }\n                .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n                    color: var(--grey-50) !important;\n                    background-color: transparent !important;\n                    text-decoration: line-through;\n                }\n            }\n        }\n    }\n\n    input {\n        &:is(.react-datepicker-ignore-onclickoutside) {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n    }\n\n"], [";\n    .react-datepicker-wrapper {\n        display: block;\n    }\n\n    .react-datepicker-popper {\n        transform: none !important;\n        top: 100% !important;\n        width: 100%;\n        z-index: 5;\n\n        .react-datepicker__triangle {\n            display: none !important;\n        }\n\n    }\n    .react-datepicker {\n        font-family: inherit !important;\n        width: 100%;\n        border: none !important;\n        border-radius: 0 0 0.5rem 0.5rem !important;\n        box-shadow: ", ";\n\n        .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n            background-color: transparent !important;\n            color: inherit !important;\n        }\n\n        .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n            margin: 0 !important;\n            width: 1.5rem !important;\n            height: 1.5rem !important;\n            line-height: 1.5rem !important;\n        }\n\n        .react-datepicker__navigation {\n            position: static;\n            border-radius: 0.5rem;\n            transition: all .2s ease;\n            &:is([disabled]){\n                cursor: not-allowed;\n            }\n            &:not([disabled]):hover {\n                background-color: white;\n                box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                z-index: 2;\n                cursor: pointer;\n            }\n        }\n\n        .react-datepicker__month-container {\n            float: none !important;\n\n            .react-datepicker__header {\n                background-color: white !important;\n                border: none !important;\n                padding: 0 0 0 0 !important;\n\n                .headerTopContent {\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-between;\n                    padding: ", ";\n\n                    .react-datepicker__navigation {\n                        width: 1.5rem;\n                        height: 1.5rem;\n                    }\n\n                    .leftButtons, .rightButtons {\n                        display: flex;\n                        align-items: center;\n                        justify-content: space-between;\n                        color: var(--dark-opacity-50);\n\n                        svg {\n                            color: var(--dark-opacity-50);\n                        }\n                    }\n                }\n\n                .react-datepicker__current-month {\n                    display: block !important;\n                    font: var(--body-semi-bold-14-17);\n                }\n            }\n\n            .react-datepicker__month {\n                margin: ", ";\n            }\n\n            .react-datepicker__day-names {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                margin: ", ";\n\n                .react-datepicker__day-name {\n                    color: var(--grey-50);\n                    font: var(--body-medium-13-16);\n                }\n            }\n\n            .react-datepicker__week {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n\n                + .react-datepicker__week {\n                    margin-top: 0.5rem;\n                }\n\n\n                .react-datepicker__day {\n                    font: var(--caption-bold-12-15);\n                    color: var(--dark);\n                    outline: none !important;\n                    \n                    &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n                        border-radius: 0.25rem;\n                        background-color: var(--primary-opacity-10) !important;\n                        color: var(--primary) !important;\n                        cursor: pointer;\n                    }\n\n                    &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n                        color: var(--primary) !important;\n                    }\n\n                    &:is(.react-datepicker__day--outside-month) {\n                        color: var(--grey-50);\n                    }\n                }\n                .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n                    color: var(--grey-50) !important;\n                    background-color: transparent !important;\n                    text-decoration: line-through;\n                }\n            }\n        }\n    }\n\n    input {\n        &:is(.react-datepicker-ignore-onclickoutside) {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n    }\n\n"])), function (props) { return props.$inline ? "none" : "0 6px 30px 0 var(--box-shadow-color)"; }, function (props) { return props.$inline ? "0 0 1rem 0" : "1rem 1.5rem"; }, function (props) { return props.$inline ? "0 !important" : "0 1.5rem 1rem 1.5rem !important"; }, function (props) { return props.$inline ? "0.5rem 0 !important" : "0.5rem 1.5rem !important"; });
+exports.DatePickerWrapperStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([";\n    .react-datepicker-wrapper {\n        display: block;\n    }\n\n    .react-datepicker-popper {\n        transform: none !important;\n        top: 100% !important;\n        width: 100%;\n        z-index: 5;\n\n        .react-datepicker__triangle {\n            display: none !important;\n        }\n\n    }\n    .react-datepicker {\n        font-family: inherit !important;\n        width: 100%;\n        border: none !important;\n        border-radius: 0 0 0.5rem 0.5rem !important;\n        box-shadow: ", ";\n\n        .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n            background-color: transparent !important;\n            color: inherit !important;\n        }\n\n        .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n            margin: 0 !important;\n            width: 1.5rem !important;\n            height: 1.5rem !important;\n            line-height: 1.5rem !important;\n        }\n\n        .react-datepicker__navigation {\n            position: static;\n            border-radius: 0.5rem;\n            transition: all .2s ease;\n            &:is([disabled]){\n                cursor: not-allowed;\n            }\n            &:not([disabled]):hover {\n                background-color: white;\n                box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                z-index: 2;\n                cursor: pointer;\n            }\n        }\n\n        .react-datepicker__month-container {\n            float: none !important;\n\n            .react-datepicker__header {\n                background-color: white !important;\n                border: none !important;\n                padding: 0 0 0 0 !important;\n\n                .headerTopContent {\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-between;\n                    padding: ", ";\n\n                    .react-datepicker__navigation {\n                        width: 1.5rem;\n                        height: 1.5rem;\n                    }\n\n                    .leftButtons, .rightButtons {\n                        display: flex;\n                        align-items: center;\n                        justify-content: space-between;\n                        color: var(--dark-opacity-50);\n\n                        svg {\n                            color: var(--dark-opacity-50);\n                        }\n                    }\n                }\n\n                .react-datepicker__current-month {\n                    display: block !important;\n                    font: var(--body-semi-bold-14-17);\n                }\n            }\n\n            .react-datepicker__month {\n                margin: ", ";\n            }\n\n            .react-datepicker__day-names {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                margin: ", ";\n\n                .react-datepicker__day-name {\n                    color: var(--grey-50);\n                    font: var(--body-medium-13-16);\n                }\n            }\n\n            .react-datepicker__week {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n\n                + .react-datepicker__week {\n                    margin-top: 0.5rem;\n                }\n\n\n                .react-datepicker__day {\n                    font: var(--caption-bold-12-15);\n                    color: var(--dark);\n                    outline: none !important;\n                    \n                    &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n                        border-radius: 0.25rem;\n                        background-color: var(--primary-opacity-10) !important;\n                        color: var(--primary) !important;\n                        cursor: pointer;\n                    }\n\n                    &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n                        color: var(--primary) !important;\n                    }\n\n                    &:is(.react-datepicker__day--outside-month) {\n                        color: var(--grey-50);\n                    }\n                }\n                .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n                    color: var(--grey-50) !important;\n                    background-color: transparent !important;\n                    text-decoration: line-through;\n                    cursor: no-drop;\n                }\n                .react-datepicker__day--outside-month{\n                    visibility: hidden;\n                }\n            }\n        }\n    }\n\n    input {\n        &:is(.react-datepicker-ignore-onclickoutside) {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n    }\n\n"], [";\n    .react-datepicker-wrapper {\n        display: block;\n    }\n\n    .react-datepicker-popper {\n        transform: none !important;\n        top: 100% !important;\n        width: 100%;\n        z-index: 5;\n\n        .react-datepicker__triangle {\n            display: none !important;\n        }\n\n    }\n    .react-datepicker {\n        font-family: inherit !important;\n        width: 100%;\n        border: none !important;\n        border-radius: 0 0 0.5rem 0.5rem !important;\n        box-shadow: ", ";\n\n        .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n            background-color: transparent !important;\n            color: inherit !important;\n        }\n\n        .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n            margin: 0 !important;\n            width: 1.5rem !important;\n            height: 1.5rem !important;\n            line-height: 1.5rem !important;\n        }\n\n        .react-datepicker__navigation {\n            position: static;\n            border-radius: 0.5rem;\n            transition: all .2s ease;\n            &:is([disabled]){\n                cursor: not-allowed;\n            }\n            &:not([disabled]):hover {\n                background-color: white;\n                box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n                z-index: 2;\n                cursor: pointer;\n            }\n        }\n\n        .react-datepicker__month-container {\n            float: none !important;\n\n            .react-datepicker__header {\n                background-color: white !important;\n                border: none !important;\n                padding: 0 0 0 0 !important;\n\n                .headerTopContent {\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-between;\n                    padding: ", ";\n\n                    .react-datepicker__navigation {\n                        width: 1.5rem;\n                        height: 1.5rem;\n                    }\n\n                    .leftButtons, .rightButtons {\n                        display: flex;\n                        align-items: center;\n                        justify-content: space-between;\n                        color: var(--dark-opacity-50);\n\n                        svg {\n                            color: var(--dark-opacity-50);\n                        }\n                    }\n                }\n\n                .react-datepicker__current-month {\n                    display: block !important;\n                    font: var(--body-semi-bold-14-17);\n                }\n            }\n\n            .react-datepicker__month {\n                margin: ", ";\n            }\n\n            .react-datepicker__day-names {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                margin: ", ";\n\n                .react-datepicker__day-name {\n                    color: var(--grey-50);\n                    font: var(--body-medium-13-16);\n                }\n            }\n\n            .react-datepicker__week {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n\n                + .react-datepicker__week {\n                    margin-top: 0.5rem;\n                }\n\n\n                .react-datepicker__day {\n                    font: var(--caption-bold-12-15);\n                    color: var(--dark);\n                    outline: none !important;\n                    \n                    &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n                        border-radius: 0.25rem;\n                        background-color: var(--primary-opacity-10) !important;\n                        color: var(--primary) !important;\n                        cursor: pointer;\n                    }\n\n                    &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n                        color: var(--primary) !important;\n                    }\n\n                    &:is(.react-datepicker__day--outside-month) {\n                        color: var(--grey-50);\n                    }\n                }\n                .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n                    color: var(--grey-50) !important;\n                    background-color: transparent !important;\n                    text-decoration: line-through;\n                    cursor: no-drop;\n                }\n                .react-datepicker__day--outside-month{\n                    visibility: hidden;\n                }\n            }\n        }\n    }\n\n    input {\n        &:is(.react-datepicker-ignore-onclickoutside) {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n    }\n\n"])), function (props) { return props.$inline ? "none" : "0 6px 30px 0 var(--box-shadow-color)"; }, function (props) { return props.$inline ? "0 0 1rem 0" : "1rem 1.5rem"; }, function (props) { return props.$inline ? "0 !important" : "0 1.5rem 1rem 1.5rem !important"; }, function (props) { return props.$inline ? "0.5rem 0 !important" : "0.5rem 1.5rem !important"; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/ReviewBlock/ReviewBlock.d.ts

@@ -1,3 +1,3 @@
 import { ReviewBlockProps } from './props';
-declare const ReviewBlock: ({ rating, customerName, date, comment, productReviews, maxStars, hasDropdown, hasApproveButton, hasBadge, badgeText, badgeVariant, onApproveButtonClick, onRemoveButtonClick, }: ReviewBlockProps) => import("react/jsx-runtime").JSX.Element;
+declare const ReviewBlock: ({ rating, customerName, date, comment, productReviews, maxStars, hasDropdown, hasApproveButton, hasBadge, badgeText, badgeVariant, hasShadow, onApproveButtonClick, onRemoveButtonClick, }: ReviewBlockProps) => import("react/jsx-runtime").JSX.Element;
 export default ReviewBlock;

package/dist/components/ReviewBlock/ReviewBlock.js

@@ -23,7 +23,7 @@ var react_i18next_1 = require("react-i18next");
 var TextLink_1 = __importDefault(require("../TextLink"));
 var Dropdown_1 = __importDefault(require("../Dropdown"));
 var ReviewBlock = function (_a) {
-    var _b = _a.rating, rating = _b === void 0 ? props_1.ReviewBlockDefault.rating : _b, customerName = _a.customerName, date = _a.date, _c = _a.comment, comment = _c === void 0 ? props_1.ReviewBlockDefault.comment : _c, productReviews = _a.productReviews, _d = _a.maxStars, maxStars = _d === void 0 ? props_1.ReviewBlockDefault.maxStars : _d, _e = _a.hasDropdown, hasDropdown = _e === void 0 ? props_1.ReviewBlockDefault.hasDropdown : _e, _f = _a.hasApproveButton, hasApproveButton = _f === void 0 ? props_1.ReviewBlockDefault.hasApproveButton : _f, _g = _a.hasBadge, hasBadge = _g === void 0 ? props_1.ReviewBlockDefault.hasBadge : _g, _h = _a.badgeText, badgeText = _h === void 0 ? props_1.ReviewBlockDefault.badgeText : _h, _j = _a.badgeVariant, badgeVariant = _j === void 0 ? props_1.ReviewBlockDefault.badgeVariant : _j, onApproveButtonClick = _a.onApproveButtonClick, onRemoveButtonClick = _a.onRemoveButtonClick;
+    var _b = _a.rating, rating = _b === void 0 ? props_1.ReviewBlockDefault.rating : _b, customerName = _a.customerName, date = _a.date, _c = _a.comment, comment = _c === void 0 ? props_1.ReviewBlockDefault.comment : _c, productReviews = _a.productReviews, _d = _a.maxStars, maxStars = _d === void 0 ? props_1.ReviewBlockDefault.maxStars : _d, _e = _a.hasDropdown, hasDropdown = _e === void 0 ? props_1.ReviewBlockDefault.hasDropdown : _e, _f = _a.hasApproveButton, hasApproveButton = _f === void 0 ? props_1.ReviewBlockDefault.hasApproveButton : _f, _g = _a.hasBadge, hasBadge = _g === void 0 ? props_1.ReviewBlockDefault.hasBadge : _g, _h = _a.badgeText, badgeText = _h === void 0 ? props_1.ReviewBlockDefault.badgeText : _h, _j = _a.badgeVariant, badgeVariant = _j === void 0 ? props_1.ReviewBlockDefault.badgeVariant : _j, _k = _a.hasShadow, hasShadow = _k === void 0 ? props_1.ReviewBlockDefault.hasShadow : _k, onApproveButtonClick = _a.onApproveButtonClick, onRemoveButtonClick = _a.onRemoveButtonClick;
     var t = (0, react_i18next_1.useTranslation)().t;
     var percentage = (rating / maxStars) * 100;
     var dropdownList = [
@@ -32,9 +32,9 @@ var ReviewBlock = function (_a) {
             onClick: onRemoveButtonClick,
         }
     ];
-    return ((0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.ReviewCard, { children: [(0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.Header, __assign({ "$hasDropdown": hasDropdown, "$hasApproveButton": hasApproveButton }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.StarsWrapper, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "notFilleds" }, { children: Array.from({ length: maxStars }).map(function (_, i) { return ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "StarfullSmall", color: "var(--dark-opacity-10)" }, i)); }) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "filleds", style: { width: "".concat(percentage, "%") } }, { children: Array.from({ length: maxStars }).map(function (_, i) { return ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "StarfullSmall", color: "var(--yellowDark)" }, i)); }) }))] }), (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.CustomerName, { children: customerName })] }), (0, jsx_runtime_1.jsxs)("div", { children: [hasApproveButton && ((0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.TextLinkWrapper, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: onApproveButtonClick }, { children: t("POST_COMMENTS") })) })), hasBadge && ((0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.BadgeWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: badgeVariant, title: badgeText }) })), hasDropdown && ((0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(Dropdown_1.default, { size: "small", list: dropdownList, isShowTopChevron: false, Toggle: function () { return (0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.DropdownToggleButton, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "MoreCircle" }), " "] }); }, childrenVariant: "primary", right: "0", width: "145px", top: "calc(100% + 4px)" }) })), (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.Date, { children: date })] })] })), comment && (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.PlatformReview, { children: comment }), productReviews === null || productReviews === void 0 ? void 0 : productReviews.map(function (product, idx) {
+    return ((0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.ReviewCard, __assign({ "$hasShadow": hasShadow }, { children: [(0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.Header, __assign({ "$hasDropdown": hasDropdown, "$hasApproveButton": hasApproveButton }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.StarsWrapper, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "notFilleds" }, { children: Array.from({ length: maxStars }).map(function (_, i) { return ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "StarfullSmall", color: "var(--dark-opacity-10)" }, i)); }) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "filleds", style: { width: "".concat(percentage, "%") } }, { children: Array.from({ length: maxStars }).map(function (_, i) { return ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "StarfullSmall", color: "var(--yellowDark)" }, i)); }) }))] }), (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.CustomerName, { children: customerName })] }), (0, jsx_runtime_1.jsxs)("div", { children: [hasApproveButton && ((0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.TextLinkWrapper, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: onApproveButtonClick }, { children: t("POST_COMMENTS") })) })), hasBadge && ((0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.BadgeWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: badgeVariant, title: badgeText }) })), hasDropdown && ((0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(Dropdown_1.default, { size: "small", list: dropdownList, isShowTopChevron: false, Toggle: function () { return (0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.DropdownToggleButton, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "MoreCircle" }), " "] }); }, childrenVariant: "primary", right: "0", width: "145px", top: "calc(100% + 4px)" }) })), (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.Date, { children: date })] })] })), comment && (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.PlatformReview, { children: comment }), productReviews === null || productReviews === void 0 ? void 0 : productReviews.map(function (product, idx) {
                 var _a, _b;
                 return ((0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.ProductReviewBlock, { children: [(0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.ProductWrapper, { children: [(0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.ProductImage, { children: product === null || product === void 0 ? void 0 : product.image }), (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.ProductReviewContent, { children: (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.ProductName, { children: product === null || product === void 0 ? void 0 : product.name }) })] }), (product === null || product === void 0 ? void 0 : product.question) && (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.ProductQuestion, { children: product === null || product === void 0 ? void 0 : product.question }), (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.ProductAnswer, { children: product === null || product === void 0 ? void 0 : product.answer }), ((_a = product === null || product === void 0 ? void 0 : product.tags) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.Tags, { children: (_b = product === null || product === void 0 ? void 0 : product.tags) === null || _b === void 0 ? void 0 : _b.map(function (tag, i) { return ((0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: tag }, i)); }) }))] }, idx));
-            })] }));
+            })] })));
 };
 exports.default = ReviewBlock;

package/dist/components/ReviewBlock/ReviewBlock.styled.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ReviewBlockStyledProps } from "./props";
-export declare const ReviewCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ReviewCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ReviewBlockStyledProps>> & string;
 export declare const Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ReviewBlockStyledProps>> & string;
 export declare const CustomerName: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const Date: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/ReviewBlock/ReviewBlock.styled.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownToggleButton = exports.DropdownWrapper = exports.StarsWrapper = exports.BadgeWrapper = exports.TextLinkWrapper = exports.Tags = exports.ProductAnswer = exports.ProductQuestion = exports.ProductName = exports.ProductReviewContent = exports.ProductImage = exports.ProductWrapper = exports.ProductReviewBlock = exports.PlatformReview = exports.Date = exports.CustomerName = exports.Header = exports.ReviewCard = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.ReviewCard = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background: white;\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--grey-10);\n"], ["\n    background: white;\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--grey-10);\n"])));
+exports.ReviewCard = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background: white;\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    ", "\n"], ["\n    background: white;\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    ", "\n"])), function (props) { return props.$hasShadow ? "\n        box-shadow: 0px 6px 30px 0px var(--box-shadow-color);\n    " : "\n        border: 1px solid var(--grey-10);\n    "; });
 exports.Header = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    justify-content: space-between;\n    align-items: ", ";\n    border-bottom: 1px solid var(--dark-opacity-10);\n    padding-bottom: 1rem;\n    margin-bottom: 1rem;\n"], ["\n    display: flex;\n    justify-content: space-between;\n    align-items: ", ";\n    border-bottom: 1px solid var(--dark-opacity-10);\n    padding-bottom: 1rem;\n    margin-bottom: 1rem;\n"])), function (props) { return props.$hasDropdown || props.$hasApproveButton ? "center" : "flex-end"; });
 exports.CustomerName = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font: var(--body-semi-bold-13-16);\n    color: var(--dark-opacity-50);\n    margin-top: 1rem;\n"], ["\n    font: var(--body-semi-bold-13-16);\n    color: var(--dark-opacity-50);\n    margin-top: 1rem;\n"])));
 exports.Date = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font: var(--caption-semi-bold-12-15);\n    color: var(--dark-opacity-50);\n    margin-top: 1rem;\n    text-align: end;\n"], ["\n    font: var(--caption-semi-bold-12-15);\n    color: var(--dark-opacity-50);\n    margin-top: 1rem;\n    text-align: end;\n"])));

package/dist/components/ReviewBlock/props.d.ts

@@ -20,9 +20,11 @@ export type ReviewBlockProps = {
     hasBadge?: boolean;
     badgeText?: string;
     badgeVariant?: string;
+    hasShadow?: boolean;
 };
 export type ReviewBlockStyledProps = {
     $hasApproveButton?: boolean;
     $hasDropdown?: boolean;
+    $hasShadow?: boolean;
 };
 export declare const ReviewBlockDefault: ReviewBlockProps;

package/dist/components/ReviewBlock/props.js

@@ -10,4 +10,5 @@ exports.ReviewBlockDefault = {
     hasBadge: false,
     badgeText: "badgeText",
     badgeVariant: "light",
+    hasShadow: false,
 };

package/package.json

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