krl-alfred 1.77.14 → 1.77.16

package/dist/components/BannerCard/BannerCard.styled.js

@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BannerCardStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.BannerCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n    ", "\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    background-color: ", ";\n    border-radius: 0.5rem;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n\n    .text {\n      @media only screen and ", " {\n        display: none;\n      }\n      max-width: 478px;\n\n      .title {\n        margin-bottom: 1.5rem;\n        display: block;\n        color: ", ";\n        font:var(--headline-extra-bold-32-39);\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: ", ";\n        font:var(--title-regular-16-19);\n      }\n      button{\n        margin-top: 1.5rem;\n      }\n    }\n\n    .textMobile {\n      display: none;\n      background-color: var(--primary-shades-dark);\n      padding: 0 1rem;\n      color: white;\n      align-items: center;\n      justify-content: space-between;\n      border-radius: 0 0 8px 8px;\n      height: 70px;\n      font:var(--title-medium-16-19);\n      svg {\n        margin-left: 1rem;\n      }\n\n      b {\n        display: block;\n      }\n\n      @media only screen and ", " {\n        display: flex;\n      }\n    }\n\n    .img {\n      text-align: end;\n      img {\n        display: inline-block !important;\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 0;\n        text-align: center;\n        height: 228px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: ", ";\n        border-radius: 0.5rem;\n        * {\n          height: 174px !important;\n          max-height: 174px !important;\n        }\n      }\n    }\n"], ["\n\n    ", "\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    background-color: ", ";\n    border-radius: 0.5rem;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n\n    .text {\n      @media only screen and ", " {\n        display: none;\n      }\n      max-width: 478px;\n\n      .title {\n        margin-bottom: 1.5rem;\n        display: block;\n        color: ", ";\n        font:var(--headline-extra-bold-32-39);\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: ", ";\n        font:var(--title-regular-16-19);\n      }\n      button{\n        margin-top: 1.5rem;\n      }\n    }\n\n    .textMobile {\n      display: none;\n      background-color: var(--primary-shades-dark);\n      padding: 0 1rem;\n      color: white;\n      align-items: center;\n      justify-content: space-between;\n      border-radius: 0 0 8px 8px;\n      height: 70px;\n      font:var(--title-medium-16-19);\n      svg {\n        margin-left: 1rem;\n      }\n\n      b {\n        display: block;\n      }\n\n      @media only screen and ", " {\n        display: flex;\n      }\n    }\n\n    .img {\n      text-align: end;\n      img {\n        display: inline-block !important;\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 0;\n        text-align: center;\n        height: 228px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: ", ";\n        border-radius: 0.5rem;\n        * {\n          height: 174px !important;\n          max-height: 174px !important;\n        }\n      }\n    }\n"])), function (props) { return props.$hasShadow ? "\"box-shadow: 0 6px 30px 0 var(--box-shadow-color);\"" : null; }, function (props) { return props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lg, devices_1.devices.lg, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, function (props) { return props.$hasDarkTheme ? "var(--dark)" : "#fff"; });
+exports.BannerCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n    ", "\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    background-color: ", ";\n    border-radius: 0.5rem;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n\n    .text {\n      @media only screen and ", " {\n        display: none;\n      }\n      max-width: 478px;\n\n      .title {\n        margin-bottom: 1.5rem;\n        display: block;\n        color: ", ";\n        font:var(--headline-extra-bold-32-39);\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: ", ";\n        font:var(--title-regular-16-19);\n      }\n      button{\n        margin-top: 1.5rem;\n      }\n    }\n\n    .textMobile {\n      display: none;\n      background-color: var(--primary-shades-dark);\n      padding: 0 1rem;\n      color: white;\n      align-items: center;\n      justify-content: space-between;\n      border-radius: 0 0 8px 8px;\n      height: 70px;\n      font:var(--title-medium-16-19);\n      svg {\n        margin-left: 1rem;\n      }\n\n      b {\n        display: block;\n      }\n\n      @media only screen and ", " {\n        display: flex;\n      }\n    }\n\n    .img {\n      text-align: end;\n      img {\n        display: inline-block !important;\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 0;\n        text-align: center;\n        height: 228px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: ", ";\n        border-radius: 0.5rem;\n        * {\n          height: 174px !important;\n          max-height: 174px !important;\n        }\n      }\n    }\n"], ["\n\n    ", "\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    background-color: ", ";\n    border-radius: 0.5rem;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n\n    .text {\n      @media only screen and ", " {\n        display: none;\n      }\n      max-width: 478px;\n\n      .title {\n        margin-bottom: 1.5rem;\n        display: block;\n        color: ", ";\n        font:var(--headline-extra-bold-32-39);\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: ", ";\n        font:var(--title-regular-16-19);\n      }\n      button{\n        margin-top: 1.5rem;\n      }\n    }\n\n    .textMobile {\n      display: none;\n      background-color: var(--primary-shades-dark);\n      padding: 0 1rem;\n      color: white;\n      align-items: center;\n      justify-content: space-between;\n      border-radius: 0 0 8px 8px;\n      height: 70px;\n      font:var(--title-medium-16-19);\n      svg {\n        margin-left: 1rem;\n      }\n\n      b {\n        display: block;\n      }\n\n      @media only screen and ", " {\n        display: flex;\n      }\n    }\n\n    .img {\n      text-align: end;\n      img {\n        display: inline-block !important;\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 0;\n        text-align: center;\n        height: 228px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: ", ";\n        border-radius: 0.5rem;\n        * {\n          height: 174px !important;\n          max-height: 174px !important;\n        }\n      }\n    }\n"])), function (props) { return props.$hasShadow ? "box-shadow: 0 6px 30px 0 var(--box-shadow-color);" : null; }, function (props) { return props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lg, devices_1.devices.lg, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, function (props) { return props.$hasDarkTheme ? "var(--dark)" : "#fff"; });
 var templateObject_1;

package/dist/components/Dropdown/Dropdown.js

@@ -41,7 +41,7 @@ var Dropdown = function (props) {
         var children = _a.children;
         return props.toggle ? ((0, jsx_runtime_1.jsx)("span", __assign({ onClick: function () { return setShowDropdown(!showDropdown); } }, { children: (0, jsx_runtime_1.jsx)(props.toggle, { children: children }) }))) : ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ size: "big", variant: "primary", onClick: function () { return setShowDropdown(!showDropdown); } }, { children: "Toggle" })));
     };
-    return ((0, jsx_runtime_1.jsxs)(Dropdown_styled_1.DropdownStyled, __assign({ ref: dropdownRef, "$show": showDropdown }, { children: [(0, jsx_runtime_1.jsx)(ToggleButton, {}), (0, jsx_runtime_1.jsx)(Dropdown_styled_1.DropdownMenu, __assign({ "$show": showDropdown, "$size": props.size, "$isShowTopChevron": props.isShowTopChevron, "$childrenVariant": props.childrenVariant, "$right": props.right, "$width": props.width }, { children: (0, jsx_runtime_1.jsx)("ul", { children: (_a = props === null || props === void 0 ? void 0 : props.list) === null || _a === void 0 ? void 0 : _a.map(function (item, key) {
+    return ((0, jsx_runtime_1.jsxs)(Dropdown_styled_1.DropdownStyled, __assign({ ref: dropdownRef, "$show": showDropdown }, { children: [(0, jsx_runtime_1.jsx)(ToggleButton, {}), (0, jsx_runtime_1.jsx)(Dropdown_styled_1.DropdownMenu, __assign({ "$show": showDropdown, "$size": props.size, "$isShowTopChevron": props.isShowTopChevron, "$childrenVariant": props.childrenVariant, "$right": props.right, "$width": props.width, "$top": props.top }, { children: (0, jsx_runtime_1.jsx)("ul", { children: (_a = props === null || props === void 0 ? void 0 : props.list) === null || _a === void 0 ? void 0 : _a.map(function (item, key) {
                         return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: item }, { children: item.title })) }, key));
                     }) }) }))] })));
 };

package/dist/components/Dropdown/Dropdown.styled.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownMenu = exports.DropdownStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.DropdownStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n"], ["\n    position: relative;\n"])));
-exports.DropdownMenu = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  border-radius: 8px;\n  background-color: white;\n  box-sizing: border-box;\n  z-index: 9;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  right: ", ";\n  top: calc(100% + 16px);\n  opacity: ", ";\n  visibility: ", ";\n  padding: ", ";\n  min-width: ", ";\n  &:before {\n    content: \"\";\n    position: absolute;\n    transform: rotate(45deg);\n    right: 18px;\n    transition: all 0.15s ease;\n    background-color: white;\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n    bottom: calc(100% - 6px);\n    display: ", ";\n  }\n\n  ul{\n    padding: 0;\n    margin: 0;\n    li{\n      display: block;\n      margin: 0;\n      padding: 0;\n      a{\n        cursor: pointer;\n        text-decoration: none;\n        padding: ", ";\n        font: ", ";\n        display: block;\n        color: var(--dark);\n        border-radius: 0.5rem;\n        position: relative;\n        ", "\n        &:is(.hasNotification){\n          &:after{\n            content: \"\";\n            position: absolute;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 8px;\n            height: 8px;\n            border-radius: 50%;\n            background-color: var(--primary);\n          } \n        }\n      }\n      + li{\n        margin-top: 0.25rem;\n      }\n    }\n  }\n"], ["\n  position: absolute;\n  border-radius: 8px;\n  background-color: white;\n  box-sizing: border-box;\n  z-index: 9;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  right: ", ";\n  top: calc(100% + 16px);\n  opacity: ", ";\n  visibility: ", ";\n  padding: ", ";\n  min-width: ", ";\n  &:before {\n    content: \"\";\n    position: absolute;\n    transform: rotate(45deg);\n    right: 18px;\n    transition: all 0.15s ease;\n    background-color: white;\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n    bottom: calc(100% - 6px);\n    display: ", ";\n  }\n\n  ul{\n    padding: 0;\n    margin: 0;\n    li{\n      display: block;\n      margin: 0;\n      padding: 0;\n      a{\n        cursor: pointer;\n        text-decoration: none;\n        padding: ", ";\n        font: ", ";\n        display: block;\n        color: var(--dark);\n        border-radius: 0.5rem;\n        position: relative;\n        ", "\n        &:is(.hasNotification){\n          &:after{\n            content: \"\";\n            position: absolute;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 8px;\n            height: 8px;\n            border-radius: 50%;\n            background-color: var(--primary);\n          } \n        }\n      }\n      + li{\n        margin-top: 0.25rem;\n      }\n    }\n  }\n"])), function (props) { return props.$right || "0"; }, function (props) { return props.$show ? "1" : "0"; }, function (props) { return props.$show ? "visible" : "hidden"; }, function (props) {
+exports.DropdownMenu = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  border-radius: 8px;\n  background-color: white;\n  box-sizing: border-box;\n  z-index: 9;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  right: ", ";\n  top: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  padding: ", ";\n  min-width: ", ";\n  &:before {\n    content: \"\";\n    position: absolute;\n    transform: rotate(45deg);\n    right: 18px;\n    transition: all 0.15s ease;\n    background-color: white;\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n    bottom: calc(100% - 6px);\n    display: ", ";\n  }\n\n  ul{\n    padding: 0;\n    margin: 0;\n    li{\n      display: block;\n      margin: 0;\n      padding: 0;\n      a{\n        cursor: pointer;\n        text-decoration: none;\n        padding: ", ";\n        font: ", ";\n        display: block;\n        color: var(--dark);\n        border-radius: 0.5rem;\n        position: relative;\n        ", "\n        &:is(.hasNotification){\n          &:after{\n            content: \"\";\n            position: absolute;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 8px;\n            height: 8px;\n            border-radius: 50%;\n            background-color: var(--primary);\n          } \n        }\n      }\n      + li{\n        margin-top: 0.25rem;\n      }\n    }\n  }\n"], ["\n  position: absolute;\n  border-radius: 8px;\n  background-color: white;\n  box-sizing: border-box;\n  z-index: 9;\n  box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n  right: ", ";\n  top: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  padding: ", ";\n  min-width: ", ";\n  &:before {\n    content: \"\";\n    position: absolute;\n    transform: rotate(45deg);\n    right: 18px;\n    transition: all 0.15s ease;\n    background-color: white;\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n    bottom: calc(100% - 6px);\n    display: ", ";\n  }\n\n  ul{\n    padding: 0;\n    margin: 0;\n    li{\n      display: block;\n      margin: 0;\n      padding: 0;\n      a{\n        cursor: pointer;\n        text-decoration: none;\n        padding: ", ";\n        font: ", ";\n        display: block;\n        color: var(--dark);\n        border-radius: 0.5rem;\n        position: relative;\n        ", "\n        &:is(.hasNotification){\n          &:after{\n            content: \"\";\n            position: absolute;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 8px;\n            height: 8px;\n            border-radius: 50%;\n            background-color: var(--primary);\n          } \n        }\n      }\n      + li{\n        margin-top: 0.25rem;\n      }\n    }\n  }\n"])), function (props) { return props.$right || "0"; }, function (props) { return props.$top || "calc(100% + 16px)"; }, function (props) { return props.$show ? "1" : "0"; }, function (props) { return props.$show ? "visible" : "hidden"; }, function (props) {
     switch (props.$size) {
         case 'small':
             return "0.5rem";

package/dist/components/PaymentCart/PaymentCart.js

@@ -49,7 +49,7 @@ var PaymentCart = function (props) {
         }
         setPaymentDropdownList(list);
     }, [props.isShowChoosePrimary, props.isShowChooseSpare, props.isShowDelete]);
-    return ((0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.PaymentCartStyled, __assign({ "$checked": props.checked, htmlFor: props.id }, { children: [(0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.LeftFrame, { children: [props.isShowRadio && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.RadioButtonWrapper, { children: (0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: props.id, onChange: props.onChange, checked: props.checked, isWrapText: false, layout: "basic", size: "small", name: props.name, value: props.value }) })), (0, jsx_runtime_1.jsx)(PaymentCart_styled_1.ImageWrapper, { children: props.cartIcon }), (0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.Title, { children: [props.titlePrefix && (0, jsx_runtime_1.jsx)("span", { children: props.titlePrefix }), (0, jsx_runtime_1.jsx)("span", { children: props.title })] })] }), (0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.RightFrame, { children: [props.badgeText && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.BadgeWrapper, __assign({ "$isHideMobileBadge": props.isHideMobileBadge }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: props.badgeText, layout: "text", variant: props.badgeVariant }) }))), props.infoText && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.TooltipWrapper, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ iconStrokeWidth: "2px", popupSize: "small", position: "topRight", popupWidth: "147px", iconWidth: "24px", iconHeight: "24px", popupRight: "-8px" }, { children: (0, jsx_runtime_1.jsx)(PaymentCart_styled_1.TooltipDescription, { children: props.infoText }) })) })), props.isShowTextLink && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.TextLinkWrapper, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: props.onClickTextLink }, { children: props.textLinkText })) })), props.isShowDropdown && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(Dropdown_1.default, { size: "small", list: paymentDropdownList, isShowTopChevron: true, toggle: function () { return (0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.DropdownToggleButton, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "MoreCircle" }), " "] }); }, childrenVariant: "primary", right: "-12px", width: "170px" }) }))] })] })));
+    return ((0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.PaymentCartStyled, __assign({ "$checked": props.checked, htmlFor: props.id, "$isShowRadio": props.isShowRadio }, { children: [(0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.LeftFrame, { children: [props.isShowRadio && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.RadioButtonWrapper, { children: (0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: props.id, onChange: props.onChange, checked: props.checked, isWrapText: false, layout: "basic", size: "small", name: props.name, value: props.value }) })), (0, jsx_runtime_1.jsx)(PaymentCart_styled_1.ImageWrapper, { children: props.cartIcon }), (0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.Title, { children: [props.titlePrefix && (0, jsx_runtime_1.jsx)("span", { children: props.titlePrefix }), (0, jsx_runtime_1.jsx)("span", { children: props.title })] })] }), (0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.RightFrame, { children: [props.badgeText && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.BadgeWrapper, __assign({ "$isHideMobileBadge": props.isHideMobileBadge }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: props.badgeText, layout: "text", variant: props.badgeVariant }) }))), props.infoText && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.TooltipWrapper, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ iconStrokeWidth: "2px", popupSize: "small", position: "topRight", popupWidth: "147px", iconWidth: "24px", iconHeight: "24px", popupRight: "-8px" }, { children: (0, jsx_runtime_1.jsx)(PaymentCart_styled_1.TooltipDescription, { children: props.infoText }) })) })), props.isShowTextLink && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.TextLinkWrapper, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: props.onClickTextLink }, { children: props.textLinkText })) })), props.isShowDropdown && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(Dropdown_1.default, { size: "small", list: paymentDropdownList, isShowTopChevron: true, toggle: function () { return (0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.DropdownToggleButton, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "MoreCircle" }), " "] }); }, childrenVariant: "primary", right: "-12px", width: "170px", top: "calc(100% + 10px)" }) }))] })] })));
 };
 PaymentCart.defaultProps = {
     badgeText: "Badge text",

package/dist/components/PaymentCart/PaymentCart.styled.js

@@ -10,11 +10,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioButtonWrapper = exports.TextLinkWrapper = exports.TooltipDescription = exports.Title = exports.DropdownToggleButton = exports.DropdownWrapper = exports.TooltipWrapper = exports.BadgeWrapper = exports.RightFrame = exports.LeftFrame = exports.ImageWrapper = exports.PaymentCartStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.PaymentCartStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border : 1px solid var(--grey-10);\n    border-radius: 0.5rem;\n    padding: 1rem 1.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    position: relative;\n    ", ";\n"], ["\n    border : 1px solid var(--grey-10);\n    border-radius: 0.5rem;\n    padding: 1rem 1.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    position: relative;\n    ", ";\n"])), function (props) { return props.$checked && "\n        &:before{\n            content : \"\";\n            position: absolute;\n            user-select: none;\n            pointer-events: none;\n            border-radius: inherit;\n            border: 2px solid var(--primary);\n            inset:-1px;\n        }\n    "; });
+exports.PaymentCartStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border : 1px solid var(--grey-10);\n    border-radius: 0.5rem;\n    padding: 1rem 1.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    position: relative;\n    &:before{\n        content : \"\";\n        position: absolute;\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n    ", ";\n    ", ";\n"], ["\n    border : 1px solid var(--grey-10);\n    border-radius: 0.5rem;\n    padding: 1rem 1.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    position: relative;\n    &:before{\n        content : \"\";\n        position: absolute;\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n    ", ";\n    ", ";\n"])), function (props) { return props.$checked && "\n        &:before{\n            border: 2px solid var(--primary) !important;\n            inset:-1px !important;\n        }\n    "; }, function (props) { return props.$isShowRadio && "\n        cursor:pointer;\n        &:hover:before{\n            border: 1px solid var(--primary);\n            inset:-1px;\n        }\n    "; });
 exports.ImageWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: inline-block;\n    vertical-align: middle;\n    height: 22px;\n    margin-right: 0.5rem;\n"], ["\n    display: inline-block;\n    vertical-align: middle;\n    height: 22px;\n    margin-right: 0.5rem;\n"])));
 exports.LeftFrame = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n"])));
 exports.RightFrame = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n"])));
-exports.BadgeWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    ", ";\n"], ["\n    ", ";\n"])), function (props) { return props.$isHideMobileBadge && "\n        @media only screen and ".concat(devices_1.devices.lg, " {\n            display: none;\n        }\n    "); });
+exports.BadgeWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    > * {\n        display: block !important;\n    }\n    ", ";\n"], ["\n    > * {\n        display: block !important;\n    }\n    ", ";\n"])), function (props) { return props.$isHideMobileBadge && "\n        @media only screen and ".concat(devices_1.devices.lg, " {\n            display: none !important;\n        }\n    "); });
 exports.TooltipWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    margin-left: 1rem;\n"], ["\n    margin-left: 1rem;\n"])));
 exports.DropdownWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-left: 1rem;\n"], ["\n    margin-left: 1rem;\n"])));
 exports.DropdownToggleButton = styled_components_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 0;\n    padding: 0;\n    cursor: pointer;\n    transition: all .2s;\n    outline: none;\n    border:0;\n    background: none;\n    color: var(--primary);\n"], ["\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 0;\n    padding: 0;\n    cursor: pointer;\n    transition: all .2s;\n    outline: none;\n    border:0;\n    background: none;\n    color: var(--primary);\n"])));

package/dist/components/ProductCardHorizontal/ProductCardHorizontal.styled.js

@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProductCardHorizontalStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.ProductCardHorizontalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: var(--dark);\n    padding: 0.5rem;\n    transition: all .2s ease;\n    border-radius: 8px;\n\n    &:hover {\n        background: var(--dark-opacity-3);\n    }\n\n    a {\n        text-decoration: none;\n        color: inherit;\n    }\n\n    .horizontalWrapper {\n        text-decoration: none;\n        display: grid;\n        grid-template-columns: auto 1fr;\n        align-items: center;\n\n        .img {\n            border: 1px solid var(--dark-opacity-5);\n            border-radius: 8px;\n            position: relative;\n            overflow: hidden;\n            width: 142px;\n            height: 88px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-right: 1rem;\n            background: white;\n            @media only screen and ", " {\n                margin-right: 0.5rem;\n                width: 71px;\n                height: 50px;\n                box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n                border: 0;\n            }\n\n            > * {\n                width: 100%;\n                height: 100%;\n                object-fit: contain;\n                object-position: center center;\n                display: block;\n            }\n        }\n        .title{\n            display: block;\n            display: -webkit-box;\n            -webkit-line-clamp: 1;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            word-break: break-word;\n            font: var(--title-semi-bold-16-19);\n            @media only screen and ", " {\n                font: var(--caption-semi-bold-12-15);\n            }\n        }\n\n        .description {\n            color: var(--grey-50);\n            margin-top: 0.5rem;\n            margin-bottom: 0.5rem;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            word-break: break-word;\n            font:var(--body-medium-14-17);\n            @media only screen and ", " {\n                display: none;\n            }\n        }\n\n        .priceContent {\n            display: flex;\n            align-items: end;\n            justify-content: flex-start;\n\n            .price {\n                margin-right: 4px;\n                font:var(--body-extra-bold-14-17);\n                @media only screen and ", " {\n                    font: var(--caption-extra-bold-12-15);\n                }\n            }\n\n            .period {\n                font:var(--body-regular-13-16);\n                @media only screen and ", " {\n                    font: var(--caption-regular-12-15);\n                }\n            }\n        }\n    }\n"], ["\n    color: var(--dark);\n    padding: 0.5rem;\n    transition: all .2s ease;\n    border-radius: 8px;\n\n    &:hover {\n        background: var(--dark-opacity-3);\n    }\n\n    a {\n        text-decoration: none;\n        color: inherit;\n    }\n\n    .horizontalWrapper {\n        text-decoration: none;\n        display: grid;\n        grid-template-columns: auto 1fr;\n        align-items: center;\n\n        .img {\n            border: 1px solid var(--dark-opacity-5);\n            border-radius: 8px;\n            position: relative;\n            overflow: hidden;\n            width: 142px;\n            height: 88px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-right: 1rem;\n            background: white;\n            @media only screen and ", " {\n                margin-right: 0.5rem;\n                width: 71px;\n                height: 50px;\n                box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n                border: 0;\n            }\n\n            > * {\n                width: 100%;\n                height: 100%;\n                object-fit: contain;\n                object-position: center center;\n                display: block;\n            }\n        }\n        .title{\n            display: block;\n            display: -webkit-box;\n            -webkit-line-clamp: 1;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            word-break: break-word;\n            font: var(--title-semi-bold-16-19);\n            @media only screen and ", " {\n                font: var(--caption-semi-bold-12-15);\n            }\n        }\n\n        .description {\n            color: var(--grey-50);\n            margin-top: 0.5rem;\n            margin-bottom: 0.5rem;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            word-break: break-word;\n            font:var(--body-medium-14-17);\n            @media only screen and ", " {\n                display: none;\n            }\n        }\n\n        .priceContent {\n            display: flex;\n            align-items: end;\n            justify-content: flex-start;\n\n            .price {\n                margin-right: 4px;\n                font:var(--body-extra-bold-14-17);\n                @media only screen and ", " {\n                    font: var(--caption-extra-bold-12-15);\n                }\n            }\n\n            .period {\n                font:var(--body-regular-13-16);\n                @media only screen and ", " {\n                    font: var(--caption-regular-12-15);\n                }\n            }\n        }\n    }\n"])), devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm);
+exports.ProductCardHorizontalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: var(--dark);\n    padding: 0.5rem;\n    transition: all .2s ease;\n    border-radius: 8px;\n\n    &:hover {\n        background: var(--dark-opacity-3);\n    }\n\n    a {\n        text-decoration: none;\n        color: inherit;\n    }\n\n    .horizontalWrapper {\n        text-decoration: none;\n        display: grid;\n        grid-template-columns: auto 1fr;\n        align-items: center;\n\n        .img {\n            border: 1px solid var(--dark-opacity-5);\n            border-radius: 8px;\n            position: relative;\n            overflow: hidden;\n            width: 142px;\n            height: 88px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-right: 1rem;\n            background: white;\n            @media only screen and ", " {\n                margin-right: 0.5rem;\n                width: 71px;\n                height: 50px;\n                box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n                border: 0;\n            }\n\n            * {\n                width: 90% !important;\n                height: 90% !important;\n                object-fit: contain;\n                object-position: center center;\n                display: block !important;\n            }\n        }\n        .title{\n            display: block;\n            display: -webkit-box;\n            -webkit-line-clamp: 1;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            word-break: break-word;\n            font: var(--title-semi-bold-16-19);\n            @media only screen and ", " {\n                font: var(--caption-semi-bold-12-15);\n            }\n        }\n\n        .description {\n            color: var(--grey-50);\n            margin-top: 0.5rem;\n            margin-bottom: 0.5rem;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            word-break: break-word;\n            font:var(--body-medium-14-17);\n            @media only screen and ", " {\n                display: none;\n            }\n        }\n\n        .priceContent {\n            display: flex;\n            align-items: end;\n            justify-content: flex-start;\n\n            .price {\n                margin-right: 4px;\n                font:var(--body-extra-bold-14-17);\n                @media only screen and ", " {\n                    font: var(--caption-extra-bold-12-15);\n                }\n            }\n\n            .period {\n                font:var(--body-regular-13-16);\n                @media only screen and ", " {\n                    font: var(--caption-regular-12-15);\n                }\n            }\n        }\n    }\n"], ["\n    color: var(--dark);\n    padding: 0.5rem;\n    transition: all .2s ease;\n    border-radius: 8px;\n\n    &:hover {\n        background: var(--dark-opacity-3);\n    }\n\n    a {\n        text-decoration: none;\n        color: inherit;\n    }\n\n    .horizontalWrapper {\n        text-decoration: none;\n        display: grid;\n        grid-template-columns: auto 1fr;\n        align-items: center;\n\n        .img {\n            border: 1px solid var(--dark-opacity-5);\n            border-radius: 8px;\n            position: relative;\n            overflow: hidden;\n            width: 142px;\n            height: 88px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-right: 1rem;\n            background: white;\n            @media only screen and ", " {\n                margin-right: 0.5rem;\n                width: 71px;\n                height: 50px;\n                box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n                border: 0;\n            }\n\n            * {\n                width: 90% !important;\n                height: 90% !important;\n                object-fit: contain;\n                object-position: center center;\n                display: block !important;\n            }\n        }\n        .title{\n            display: block;\n            display: -webkit-box;\n            -webkit-line-clamp: 1;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            word-break: break-word;\n            font: var(--title-semi-bold-16-19);\n            @media only screen and ", " {\n                font: var(--caption-semi-bold-12-15);\n            }\n        }\n\n        .description {\n            color: var(--grey-50);\n            margin-top: 0.5rem;\n            margin-bottom: 0.5rem;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            word-break: break-word;\n            font:var(--body-medium-14-17);\n            @media only screen and ", " {\n                display: none;\n            }\n        }\n\n        .priceContent {\n            display: flex;\n            align-items: end;\n            justify-content: flex-start;\n\n            .price {\n                margin-right: 4px;\n                font:var(--body-extra-bold-14-17);\n                @media only screen and ", " {\n                    font: var(--caption-extra-bold-12-15);\n                }\n            }\n\n            .period {\n                font:var(--body-regular-13-16);\n                @media only screen and ", " {\n                    font: var(--caption-regular-12-15);\n                }\n            }\n        }\n    }\n"])), devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm);
 var templateObject_1;

package/package.json

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