krl-alfred 1.82.6 → 1.82.8

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.
Files changed (4) hide show
  1. package/dist/components/Button/Button.js +1 -1
  2. package/dist/components/Button/Button.styled.js +5 -5
  3. package/dist/components/ProductCardVertical/ProductCardVertical.styled.js +1 -1
  4. package/package.json +1 -1
package/dist/components/Button/Button.js CHANGED
@@ -38,6 +38,6 @@ var Children = function (props) {
38
38
  };
39
39
  var Button = (0, react_1.forwardRef)(function (props, ref) {
40
40
  var type = props.type, isLoading = props.isLoading, onClick = props.onClick, disabled = props.disabled, size = props.size, variant = props.variant, width = props.width, _a = props.icon, icon = _a === void 0 ? props_1.ButtonDefault.icon : _a, children = props.children, _b = props.iconSize, iconSize = _b === void 0 ? props_1.ButtonDefault.iconSize : _b, _c = props.tooltip, tooltip = _c === void 0 ? props_1.ButtonDefault.tooltip : _c, other = __rest(props, ["type", "isLoading", "onClick", "disabled", "size", "variant", "width", "icon", "children", "iconSize", "tooltip"]);
41
- return ((0, jsx_runtime_1.jsxs)(Button_styled_1.ButtonStyled, __assign({ className: (0, classnames_1.default)({ "loading": isLoading }), onClick: onClick, disabled: disabled || isLoading, "$size": size, "$variant": variant, "$width": width, "$icon": icon, type: type, ref: ref, "$isLoading": isLoading, "$tooltip": tooltip }, other, { children: [(0, jsx_runtime_1.jsxs)(Children, __assign({ isLoading: isLoading, icon: icon, iconSize: iconSize }, { children: [isLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "loadingContent" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { width: ["small", "xsmall"].includes(size) ? "1rem" : "1.5rem", height: ["small", "xsmall"].includes(size) ? "1rem" : "1.5rem", variant: variant === 'primary' ? 'secondary' : 'primary' }) }))), children] })), tooltip && (0, jsx_runtime_1.jsx)("div", __assign({ className: "buttonTooltip" }, { children: tooltip }))] })));
41
+ return ((0, jsx_runtime_1.jsxs)(Button_styled_1.ButtonStyled, __assign({ className: (0, classnames_1.default)({ "loading": isLoading }), onClick: onClick, disabled: disabled, "$size": size, "$variant": variant, "$width": width, "$icon": icon, type: type, ref: ref, "$isLoading": isLoading, "$tooltip": tooltip }, other, { children: [(0, jsx_runtime_1.jsxs)(Children, __assign({ isLoading: isLoading, icon: icon, iconSize: iconSize }, { children: [isLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "loadingContent" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { width: ["small", "xsmall"].includes(size) ? "1rem" : "1.5rem", height: ["small", "xsmall"].includes(size) ? "1rem" : "1.5rem", variant: variant === 'primary' ? 'secondary' : 'primary' }) }))), (0, jsx_runtime_1.jsx)("span", { children: children })] })), tooltip && (0, jsx_runtime_1.jsx)("div", __assign({ className: "buttonTooltip" }, { children: tooltip }))] })));
42
42
  });
43
43
  exports.default = Button;
package/dist/components/Button/Button.styled.js CHANGED
@@ -30,7 +30,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
30
30
  exports.IconStyled = exports.ButtonStyled = void 0;
31
31
  var styled_components_1 = __importStar(require("styled-components"));
32
32
  var devices_1 = require("../../constants/devices");
33
- var primary = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: var(--primary-initial);\n color: white;\n border: 1px solid transparent;\n font: ", ";\n \n @media only screen and ", " {\n &:hover {\n background-color: var(--primary-hover);\n }\n }\n \n\n &:active {\n background-color: var(--primary-press);\n @media only screen and ", " {\n background-color: var(--primary-hover);\n }\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n }\n"], ["\n background-color: var(--primary-initial);\n color: white;\n border: 1px solid transparent;\n font: ", ";\n \n @media only screen and ", " {\n &:hover {\n background-color: var(--primary-hover);\n }\n }\n \n\n &:active {\n background-color: var(--primary-press);\n @media only screen and ", " {\n background-color: var(--primary-hover);\n }\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n }\n"])), function (props) {
33
+ var primary = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: var(--primary-initial);\n color: white;\n border: 1px solid transparent;\n font: ", ";\n \n @media only screen and ", " {\n &:hover {\n background-color: var(--primary-hover);\n }\n }\n \n\n &:active {\n background-color: var(--primary-press);\n @media only screen and ", " {\n background-color: var(--primary-hover);\n }\n }\n\n &:disabled {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n }\n"], ["\n background-color: var(--primary-initial);\n color: white;\n border: 1px solid transparent;\n font: ", ";\n \n @media only screen and ", " {\n &:hover {\n background-color: var(--primary-hover);\n }\n }\n \n\n &:active {\n background-color: var(--primary-press);\n @media only screen and ", " {\n background-color: var(--primary-hover);\n }\n }\n\n &:disabled {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n }\n"])), function (props) {
34
34
  switch (props.$size) {
35
35
  case 'xsmall':
36
36
  return "var(--caption-bold-12-15)";
@@ -44,7 +44,7 @@ var primary = (0, styled_components_1.css)(templateObject_1 || (templateObject_1
44
44
  return "var(--body-bold-14-17)";
45
45
  }
46
46
  }, devices_1.devices.mdUp, devices_1.devices.md);
47
- var secondary = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: var(--primary-opacity-5);\n color: var(--primary-initial);\n border: 1px solid transparent;\n font: ", ";\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n }\n }\n\n \n\n &:active {\n color: var(--primary-press);\n @media only screen and ", " {\n color: var(--primary-hover);\n }\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n }\n"], ["\n background-color: var(--primary-opacity-5);\n color: var(--primary-initial);\n border: 1px solid transparent;\n font: ", ";\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n }\n }\n\n \n\n &:active {\n color: var(--primary-press);\n @media only screen and ", " {\n color: var(--primary-hover);\n }\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n }\n"])), function (props) {
47
+ var secondary = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: var(--primary-opacity-5);\n color: var(--primary-initial);\n border: 1px solid transparent;\n font: ", ";\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n }\n }\n\n \n\n &:active {\n color: var(--primary-press);\n @media only screen and ", " {\n color: var(--primary-hover);\n }\n }\n\n &:disabled {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n }\n"], ["\n background-color: var(--primary-opacity-5);\n color: var(--primary-initial);\n border: 1px solid transparent;\n font: ", ";\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n }\n }\n\n \n\n &:active {\n color: var(--primary-press);\n @media only screen and ", " {\n color: var(--primary-hover);\n }\n }\n\n &:disabled {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n }\n"])), function (props) {
48
48
  switch (props.$size) {
49
49
  case 'xsmall':
50
50
  return "var(--caption-bold-12-15)";
@@ -58,7 +58,7 @@ var secondary = (0, styled_components_1.css)(templateObject_2 || (templateObject
58
58
  return "var(--body-bold-14-17)";
59
59
  }
60
60
  }, devices_1.devices.mdUp, devices_1.devices.md);
61
- var inverted = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: transparent;\n color: var(--primary-initial);\n border: 1px solid;\n border-color: var(--primary-initial);\n font: ", ";\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n border-color: var(--primary-hover);\n }\n }\n \n \n\n &:active {\n color: var(--primary-press);\n border-color: var(--primary-press);\n\n @media only screen and ", " {\n color: var(--primary-hover);\n border-color: var(--primary-hover);\n }\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n border-color: var(--dark-opacity-25);\n }\n"], ["\n background-color: transparent;\n color: var(--primary-initial);\n border: 1px solid;\n border-color: var(--primary-initial);\n font: ", ";\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n border-color: var(--primary-hover);\n }\n }\n \n \n\n &:active {\n color: var(--primary-press);\n border-color: var(--primary-press);\n\n @media only screen and ", " {\n color: var(--primary-hover);\n border-color: var(--primary-hover);\n }\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n border-color: var(--dark-opacity-25);\n }\n"])), function (props) {
61
+ var inverted = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: transparent;\n color: var(--primary-initial);\n border: 1px solid;\n border-color: var(--primary-initial);\n font: ", ";\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n border-color: var(--primary-hover);\n }\n }\n \n \n\n &:active {\n color: var(--primary-press);\n border-color: var(--primary-press);\n\n @media only screen and ", " {\n color: var(--primary-hover);\n border-color: var(--primary-hover);\n }\n }\n\n &:disabled {\n color: var(--dark-opacity-25);\n border-color: var(--dark-opacity-25);\n }\n"], ["\n background-color: transparent;\n color: var(--primary-initial);\n border: 1px solid;\n border-color: var(--primary-initial);\n font: ", ";\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n border-color: var(--primary-hover);\n }\n }\n \n \n\n &:active {\n color: var(--primary-press);\n border-color: var(--primary-press);\n\n @media only screen and ", " {\n color: var(--primary-hover);\n border-color: var(--primary-hover);\n }\n }\n\n &:disabled {\n color: var(--dark-opacity-25);\n border-color: var(--dark-opacity-25);\n }\n"])), function (props) {
62
62
  switch (props.$size) {
63
63
  case 'xsmall':
64
64
  return "var(--caption-bold-12-15)";
@@ -72,7 +72,7 @@ var inverted = (0, styled_components_1.css)(templateObject_3 || (templateObject_
72
72
  return "var(--body-bold-14-17)";
73
73
  }
74
74
  }, devices_1.devices.mdUp, devices_1.devices.md);
75
- var ghost = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: transparent;\n color: var(--primary-initial);\n border: 0;\n font: ", ";\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-initial);\n background-color: var(--primary-opacity-5);\n }\n }\n\n \n &:active {\n color: var(--primary-hover);\n background-color: var(--primary-opacity-5);\n\n @media only screen and ", " {\n color: var(--primary-initial);\n }\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n }\n"], ["\n background-color: transparent;\n color: var(--primary-initial);\n border: 0;\n font: ", ";\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-initial);\n background-color: var(--primary-opacity-5);\n }\n }\n\n \n &:active {\n color: var(--primary-hover);\n background-color: var(--primary-opacity-5);\n\n @media only screen and ", " {\n color: var(--primary-initial);\n }\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n }\n"])), function (props) {
75
+ var ghost = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: transparent;\n color: var(--primary-initial);\n border: 0;\n font: ", ";\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-initial);\n background-color: var(--primary-opacity-5);\n }\n }\n\n \n &:active {\n color: var(--primary-hover);\n background-color: var(--primary-opacity-5);\n\n @media only screen and ", " {\n color: var(--primary-initial);\n }\n }\n\n &:disabled {\n color: var(--dark-opacity-25);\n }\n"], ["\n background-color: transparent;\n color: var(--primary-initial);\n border: 0;\n font: ", ";\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-initial);\n background-color: var(--primary-opacity-5);\n }\n }\n\n \n &:active {\n color: var(--primary-hover);\n background-color: var(--primary-opacity-5);\n\n @media only screen and ", " {\n color: var(--primary-initial);\n }\n }\n\n &:disabled {\n color: var(--dark-opacity-25);\n }\n"])), function (props) {
76
76
  switch (props.$size) {
77
77
  case 'xsmall':
78
78
  return "var(--body-bold-13-16)";
@@ -86,7 +86,7 @@ var ghost = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
86
86
  return "var(--body-bold-14-17)";
87
87
  }
88
88
  }, devices_1.devices.mdUp, devices_1.devices.md);
89
- exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-sizing: border-box;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 0.5rem;\n padding: ", ";\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n outline: none;\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n background-color: transparent;\n border-radius: inherit;\n &:is(.isLoading){\n background-color: inherit;\n }\n &:empty{\n margin-right: 0;\n }\n }\n .loadingContent{\n position: absolute;\n background-color: inherit;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 5;\n border-radius: inherit;\n }\n .buttonTooltip{\n position: absolute;\n right: 0;\n top: calc(100% + 5px);\n background: white;\n color: var(--dark);\n font: var(--caption-medium-10-12);\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n user-select: none;\n pointer-events: none;\n transition: all .2s ease;\n opacity: 0;\n transition-delay: 0s;\n }\n &:hover{\n .buttonTooltip{\n opacity: 1;\n transition-delay: 0.5s;\n }\n }\n"], ["\n box-sizing: border-box;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 0.5rem;\n padding: ", ";\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n outline: none;\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n background-color: transparent;\n border-radius: inherit;\n &:is(.isLoading){\n background-color: inherit;\n }\n &:empty{\n margin-right: 0;\n }\n }\n .loadingContent{\n position: absolute;\n background-color: inherit;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 5;\n border-radius: inherit;\n }\n .buttonTooltip{\n position: absolute;\n right: 0;\n top: calc(100% + 5px);\n background: white;\n color: var(--dark);\n font: var(--caption-medium-10-12);\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n user-select: none;\n pointer-events: none;\n transition: all .2s ease;\n opacity: 0;\n transition-delay: 0s;\n }\n &:hover{\n .buttonTooltip{\n opacity: 1;\n transition-delay: 0.5s;\n }\n }\n"])), function (props) { return props.$width ? '0' : '0 24px'; }, function (props) { return props.$width; }, function (props) {
89
+ exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-sizing: border-box;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 0.5rem;\n padding: ", ";\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n outline: none;\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n background-color: transparent;\n border-radius: inherit;\n &:is(.isLoading){\n background-color: inherit;\n }\n &:empty{\n margin-right: 0;\n }\n }\n .loadingContent{\n position: absolute;\n background-color: inherit;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 5;\n border-radius: inherit;\n svg{\n color: inherit;\n }\n }\n .buttonTooltip{\n position: absolute;\n right: 0;\n top: calc(100% + 5px);\n background: white;\n color: var(--dark);\n font: var(--caption-medium-10-12);\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n user-select: none;\n pointer-events: none;\n transition: all .2s ease;\n opacity: 0;\n transition-delay: 0s;\n }\n &:hover{\n .buttonTooltip{\n opacity: 1;\n transition-delay: 0.5s;\n }\n }\n &:is(.loading) {\n user-select: none;\n pointer-events: none;\n .children{\n > span{\n opacity: 0;\n } \n }\n > *:not(.children){\n opacity: 0;\n }\n }\n"], ["\n box-sizing: border-box;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 0.5rem;\n padding: ", ";\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n outline: none;\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n background-color: transparent;\n border-radius: inherit;\n &:is(.isLoading){\n background-color: inherit;\n }\n &:empty{\n margin-right: 0;\n }\n }\n .loadingContent{\n position: absolute;\n background-color: inherit;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 5;\n border-radius: inherit;\n svg{\n color: inherit;\n }\n }\n .buttonTooltip{\n position: absolute;\n right: 0;\n top: calc(100% + 5px);\n background: white;\n color: var(--dark);\n font: var(--caption-medium-10-12);\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n user-select: none;\n pointer-events: none;\n transition: all .2s ease;\n opacity: 0;\n transition-delay: 0s;\n }\n &:hover{\n .buttonTooltip{\n opacity: 1;\n transition-delay: 0.5s;\n }\n }\n &:is(.loading) {\n user-select: none;\n pointer-events: none;\n .children{\n > span{\n opacity: 0;\n } \n }\n > *:not(.children){\n opacity: 0;\n }\n }\n"])), function (props) { return props.$width ? '0' : '0 24px'; }, function (props) { return props.$width; }, function (props) {
90
90
  switch (props.$variant) {
91
91
  case 'primary':
92
92
  return primary;
package/dist/components/ProductCardVertical/ProductCardVertical.styled.js CHANGED
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
10
10
  exports.ProductCardVerticalStyled = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  var devices_1 = require("../../constants/devices");
13
- exports.ProductCardVerticalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n\n .cartBadge {\n position: absolute;\n left: 8px;\n top: 8px;\n z-index: 2;\n\n &:is(.hasInset) {\n left: 7px;\n top: 0;\n }\n }\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n &:hover {\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n\n .img {\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n height: 150px;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n padding: 0.5rem;\n ", "\n .outOfStock{\n width: 100% !important;\n height: 100% !important;\n background-color: #BABBC280;\n > div{\n height: 17px !important;\n aspect-ratio: initial !important;\n }\n }\n }\n\n .productCardContent {\n padding: 1rem 0 0.5rem 0;\n\n .productCardTitle {\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 38px;\n word-break: break-word;\n font: var(--title-bold-16-19);\n }\n\n .productCardDescription {\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: 1.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 34px;\n word-break: break-word;\n font: var(--body-medium-14-17);\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\n\n .discountRate {\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\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 4px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price, .period {\n text-decoration: line-through;\n }\n\n .price {\n font: var(--caption-semi-bold-12-15);\n }\n\n .period {\n font: var(--caption-regular-12-15);\n }\n }\n\n .newPrice {\n .price {\n font: var(--body-extra-bold-14-17);\n }\n\n .period {\n font: var(--body-regular-13-16);\n }\n }\n }\n }\n\n ", "\n"], ["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n\n .cartBadge {\n position: absolute;\n left: 8px;\n top: 8px;\n z-index: 2;\n\n &:is(.hasInset) {\n left: 7px;\n top: 0;\n }\n }\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n &:hover {\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n\n .img {\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n height: 150px;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n padding: 0.5rem;\n ", "\n .outOfStock{\n width: 100% !important;\n height: 100% !important;\n background-color: #BABBC280;\n > div{\n height: 17px !important;\n aspect-ratio: initial !important;\n }\n }\n }\n\n .productCardContent {\n padding: 1rem 0 0.5rem 0;\n\n .productCardTitle {\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 38px;\n word-break: break-word;\n font: var(--title-bold-16-19);\n }\n\n .productCardDescription {\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: 1.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 34px;\n word-break: break-word;\n font: var(--body-medium-14-17);\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\n\n .discountRate {\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\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 4px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price, .period {\n text-decoration: line-through;\n }\n\n .price {\n font: var(--caption-semi-bold-12-15);\n }\n\n .period {\n font: var(--caption-regular-12-15);\n }\n }\n\n .newPrice {\n .price {\n font: var(--body-extra-bold-14-17);\n }\n\n .period {\n font: var(--body-regular-13-16);\n }\n }\n }\n }\n\n ", "\n"])), function (props) { return props.$hasNewImageType ? "\n *{\n height: 100% !important;\n object-fit: contain;\n max-width: 100%;\n }\n " : "\n > * {\n width: 100%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n *{ \n height: calc(100% - 0.5rem) !important;\n aspect-ratio: 1 / 1 !important;\n }\n "; }, function (props) { return props.$discountRate ? 'center' : 'end'; }, function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.$isResponsive && "\n @media only screen and ".concat(devices_1.devices.sm, " {\n padding: 1.5rem;\n .cartBadge{\n left: 16px;\n top: 16px;\n &:is(.hasInset){\n left: 15px;\n top: 8px;\n }\n }\n .img {\n height: 215px;\n }\n .productCardContent{\n padding: 1.5rem 0 0.5rem 0;\n .productCardTitle{\n height: 44px;\n font: var(--headline-bold-18-22);\n }\n .productCardDescription{\n margin-bottom: 1.5rem;\n height: 37px;\n font: var(--title-medium-16-19);\n }\n .productCardPriceContent{\n height: 48px;\n .discountRate{\n width: 65px;\n height: 48px;\n font: var(--title-extra-bold-16-19);\n }\n \n .oldPrice {\n .price{\n font: var(--body-semi-bold-13-16);\n }\n }\n .newPrice {\n .price{\n font: var(--title-extra-bold-16-19);\n }\n .period{\n font: var(--body-regular-14-17);\n }\n }\n }\n }\n }\n "); });
13
+ exports.ProductCardVerticalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n\n .cartBadge {\n position: absolute;\n left: 8px;\n top: 8px;\n z-index: 2;\n\n &:is(.hasInset) {\n left: 7px;\n top: 0;\n }\n }\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n &:hover {\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n\n .img {\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n height: 150px;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n padding: 0.5rem;\n ", "\n .outOfStock{\n width: 100% !important;\n height: 100% !important;\n background-color: #BABBC280;\n > div{\n height: 17px !important;\n aspect-ratio: initial !important;\n }\n }\n }\n\n .productCardContent {\n padding: 1rem 0 0.5rem 0;\n\n .productCardTitle {\n display: block;\n color: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 38px;\n word-break: break-word;\n font: var(--title-bold-16-19);\n }\n\n .productCardDescription {\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: 1.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 34px;\n word-break: break-word;\n font: var(--body-medium-14-17);\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\n color: ", ";\n .discountRate {\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\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 4px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price, .period {\n text-decoration: line-through;\n }\n\n .price {\n font: var(--caption-semi-bold-12-15);\n }\n\n .period {\n font: var(--caption-regular-12-15);\n }\n }\n\n .newPrice {\n .price {\n font: var(--body-extra-bold-14-17);\n }\n\n .period {\n font: var(--body-regular-13-16);\n }\n }\n }\n }\n\n ", "\n"], ["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n\n .cartBadge {\n position: absolute;\n left: 8px;\n top: 8px;\n z-index: 2;\n\n &:is(.hasInset) {\n left: 7px;\n top: 0;\n }\n }\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n &:hover {\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n\n .img {\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n height: 150px;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n padding: 0.5rem;\n ", "\n .outOfStock{\n width: 100% !important;\n height: 100% !important;\n background-color: #BABBC280;\n > div{\n height: 17px !important;\n aspect-ratio: initial !important;\n }\n }\n }\n\n .productCardContent {\n padding: 1rem 0 0.5rem 0;\n\n .productCardTitle {\n display: block;\n color: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 38px;\n word-break: break-word;\n font: var(--title-bold-16-19);\n }\n\n .productCardDescription {\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: 1.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 34px;\n word-break: break-word;\n font: var(--body-medium-14-17);\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\n color: ", ";\n .discountRate {\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\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 4px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price, .period {\n text-decoration: line-through;\n }\n\n .price {\n font: var(--caption-semi-bold-12-15);\n }\n\n .period {\n font: var(--caption-regular-12-15);\n }\n }\n\n .newPrice {\n .price {\n font: var(--body-extra-bold-14-17);\n }\n\n .period {\n font: var(--body-regular-13-16);\n }\n }\n }\n }\n\n ", "\n"])), function (props) { return props.$hasNewImageType ? "\n *{\n height: 100% !important;\n object-fit: contain;\n max-width: 100%;\n }\n " : "\n > * {\n width: 100%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n *{ \n height: calc(100% - 0.5rem) !important;\n aspect-ratio: 1 / 1 !important;\n }\n "; }, function (props) { return props.$hasOutOfStock ? "var(--dark-opacity-50)" : "var(--dark)"; }, function (props) { return props.$discountRate ? 'center' : 'end'; }, function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.$hasOutOfStock ? "var(--dark-opacity-50)" : "var(--dark)"; }, function (props) { return props.$isResponsive && "\n @media only screen and ".concat(devices_1.devices.sm, " {\n padding: 1.5rem;\n .cartBadge{\n left: 16px;\n top: 16px;\n &:is(.hasInset){\n left: 15px;\n top: 8px;\n }\n }\n .img {\n height: 215px;\n }\n .productCardContent{\n padding: 1.5rem 0 0.5rem 0;\n .productCardTitle{\n height: 44px;\n font: var(--headline-bold-18-22);\n }\n .productCardDescription{\n margin-bottom: 1.5rem;\n height: 37px;\n font: var(--title-medium-16-19);\n }\n .productCardPriceContent{\n height: 48px;\n .discountRate{\n width: 65px;\n height: 48px;\n font: var(--title-extra-bold-16-19);\n }\n \n .oldPrice {\n .price{\n font: var(--body-semi-bold-13-16);\n }\n }\n .newPrice {\n .price{\n font: var(--title-extra-bold-16-19);\n }\n .period{\n font: var(--body-regular-14-17);\n }\n }\n }\n }\n }\n "); });
14
14
  var templateObject_1;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "krl-alfred",
3
- "version": "1.82.6",
3
+ "version": "1.82.8",
4
4
  "files": [
5
5
  "dist"
6
6
  ],