krl-alfred 1.82.5 → 1.82.7

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/BlogCard/BlogCard.styled.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/BlogCard/BlogCard.styled.js CHANGED
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
10
10
  exports.BlogCardStyled = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  var devices_1 = require("../../constants/devices");
13
- exports.BlogCardStyled = 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 padding: 1.5rem;\n transition: all .2s ease;\n &:hover{\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n .author {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n margin-bottom: 1rem;\n\n .img {\n width: 40px;\n height: 40px;\n overflow: hidden;\n border-radius: 50%;\n position: relative;\n\n * {\n display: block !important;\n height: 100% !important;\n width: 100% !important;\n object-fit: cover !important;\n }\n }\n\n .title {\n color: var(--dark-opacity-50);\n font: var(--caption-semi-bold-12-15);\n margin-left: 0.5rem;\n }\n }\n\n .content {\n ", "\n .contentImg {\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n padding-bottom: ", ";\n margin-bottom: ", ";\n\n > * {\n display: block !important;\n width: 100% !important;\n height: 100% !important;\n position: absolute !important;\n left: 50% !important;\n top: 50% !important;\n transform: translate(-50%, -50%) !important;\n\n img {\n object-fit: cover;\n }\n }\n }\n\n .contentBottom {\n ", "\n .tagWrapper {\n margin-bottom: ", ";\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n .tags {\n font: var(--caption-semi-bold-12-15);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n padding-right: 2rem;\n }\n\n .date {\n font: var(--caption-medium-11-13);\n color: var(--grey-50);\n }\n }\n\n .contentTitle {\n font: ", ";\n margin-bottom: ", ";\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n overflow: hidden;\n min-height: ", ";\n }\n\n .contentDesc {\n display: block;\n font: ", ";\n margin: 0;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n overflow: hidden;\n ", "\n margin-bottom: ", ";\n }\n }\n }\n\n ", "\n"], ["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n padding: 1.5rem;\n transition: all .2s ease;\n &:hover{\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n .author {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n margin-bottom: 1rem;\n\n .img {\n width: 40px;\n height: 40px;\n overflow: hidden;\n border-radius: 50%;\n position: relative;\n\n * {\n display: block !important;\n height: 100% !important;\n width: 100% !important;\n object-fit: cover !important;\n }\n }\n\n .title {\n color: var(--dark-opacity-50);\n font: var(--caption-semi-bold-12-15);\n margin-left: 0.5rem;\n }\n }\n\n .content {\n ", "\n .contentImg {\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n padding-bottom: ", ";\n margin-bottom: ", ";\n\n > * {\n display: block !important;\n width: 100% !important;\n height: 100% !important;\n position: absolute !important;\n left: 50% !important;\n top: 50% !important;\n transform: translate(-50%, -50%) !important;\n\n img {\n object-fit: cover;\n }\n }\n }\n\n .contentBottom {\n ", "\n .tagWrapper {\n margin-bottom: ", ";\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n .tags {\n font: var(--caption-semi-bold-12-15);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n padding-right: 2rem;\n }\n\n .date {\n font: var(--caption-medium-11-13);\n color: var(--grey-50);\n }\n }\n\n .contentTitle {\n font: ", ";\n margin-bottom: ", ";\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n overflow: hidden;\n min-height: ", ";\n }\n\n .contentDesc {\n display: block;\n font: ", ";\n margin: 0;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n overflow: hidden;\n ", "\n margin-bottom: ", ";\n }\n }\n }\n\n ", "\n"])), function (props) { return props.$direction === "horizontal" ? "\n display: grid;\n align-items: center;\n justify-content: space-between;\n grid-template-columns: 104px 1fr;\n column-gap: 1.5rem;\n " : ""; }, function (props) { return props.$direction === "horizontal" ? "100%" : props.$size === "lg" ? "71.9%" : "58.2%"; }, function (props) { return props.$direction === "horizontal" ? "0" : "1.5rem"; }, function (props) { return props.$direction === "horizontal" ? "\n display: flex;\n flex-direction: column-reverse;\n " : ""; }, function (props) { return props.$direction === "horizontal" ? "0" : props.$size === "lg" ? "1.5rem" : "1rem"; }, function (props) { return props.$size === "lg" ? "var(--headline-bold-18-22)" : "var(--title-bold-16-19)"; }, function (props) { return props.$size === "lg" ? "1.5rem" : "1rem"; }, function (props) { return props.$direction === "horizontal" ? "3" : props.$size === "lg" ? "2" : "3"; }, function (props) { return props.$size === "lg" ? "22px" : "57px"; }, function (props) { return props.$size === "lg" ? "var(--title-regular-16-19)" : "var(--body-regular-14-17)"; }, function (props) { return props.$size === "lg" ? "5" : "3"; }, function (props) { return props.$direction === "horizontal" ? "\n display: none;\n " : ""; }, function (props) { return props.$size === "lg" ? "12px" : "0"; }, function (props) { return props.$size === "lg" ? "\n @media only screen and ".concat(devices_1.devices.lg, " {\n .content{\n display:block;\n .contentImg{\n padding-bottom: 58.2%;\n margin-bottom: 1.5rem;\n }\n .contentBottom{\n display:block;\n .tagWrapper{\n margin-bottom: 1rem;\n }\n .contentTitle {\n font: var(--title-bold-16-19);\n margin-bottom: 1rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n min-height: initial;\n }\n \n .contentDesc {\n display: block;\n font: var(--body-regular-14-17);\n margin: 0;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin-bottom: 0;\n }\n }\n }\n }\n ") : ""; });
13
+ exports.BlogCardStyled = 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 padding: 1.5rem;\n transition: all .2s ease;\n &:hover{\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n .author {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n margin-bottom: 1rem;\n\n .img {\n width: 40px;\n height: 40px;\n overflow: hidden;\n border-radius: 50%;\n position: relative;\n\n * {\n display: block !important;\n height: 100% !important;\n width: 100% !important;\n object-fit: cover !important;\n }\n }\n\n .title {\n color: var(--dark-opacity-50);\n font: var(--caption-semi-bold-12-15);\n margin-left: 0.5rem;\n }\n }\n\n .content {\n ", "\n .contentImg {\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n padding-bottom: ", ";\n margin-bottom: ", ";\n\n > * {\n display: block !important;\n width: 100% !important;\n height: 100% !important;\n position: absolute !important;\n left: 50% !important;\n top: 50% !important;\n transform: translate(-50%, -50%) !important;\n\n img {\n object-fit: cover;\n }\n }\n }\n\n .contentBottom {\n ", "\n .tagWrapper {\n margin-bottom: ", ";\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n .tags {\n font: var(--caption-semi-bold-12-15);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n padding-right: 2rem;\n }\n\n .date {\n font: var(--caption-medium-11-13);\n color: var(--grey-50);\n }\n }\n\n .contentTitle {\n font: ", ";\n margin-bottom: ", ";\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n overflow: hidden;\n min-height: ", ";\n }\n\n .contentDesc {\n display: block;\n font: ", ";\n margin: 0;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n overflow: hidden;\n ", "\n margin-bottom: ", ";\n }\n }\n }\n\n ", "\n"], ["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n padding: 1.5rem;\n transition: all .2s ease;\n &:hover{\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n .author {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n margin-bottom: 1rem;\n\n .img {\n width: 40px;\n height: 40px;\n overflow: hidden;\n border-radius: 50%;\n position: relative;\n\n * {\n display: block !important;\n height: 100% !important;\n width: 100% !important;\n object-fit: cover !important;\n }\n }\n\n .title {\n color: var(--dark-opacity-50);\n font: var(--caption-semi-bold-12-15);\n margin-left: 0.5rem;\n }\n }\n\n .content {\n ", "\n .contentImg {\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n padding-bottom: ", ";\n margin-bottom: ", ";\n\n > * {\n display: block !important;\n width: 100% !important;\n height: 100% !important;\n position: absolute !important;\n left: 50% !important;\n top: 50% !important;\n transform: translate(-50%, -50%) !important;\n\n img {\n object-fit: cover;\n }\n }\n }\n\n .contentBottom {\n ", "\n .tagWrapper {\n margin-bottom: ", ";\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n .tags {\n font: var(--caption-semi-bold-12-15);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n padding-right: 2rem;\n }\n\n .date {\n font: var(--caption-medium-11-13);\n color: var(--grey-50);\n }\n }\n\n .contentTitle {\n font: ", ";\n margin-bottom: ", ";\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n overflow: hidden;\n min-height: ", ";\n }\n\n .contentDesc {\n display: block;\n font: ", ";\n margin: 0;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n overflow: hidden;\n ", "\n margin-bottom: ", ";\n }\n }\n }\n\n ", "\n"])), function (props) { return props.$direction === "horizontal" ? "\n display: grid;\n align-items: center;\n justify-content: space-between;\n grid-template-columns: 104px 1fr;\n column-gap: 1.5rem;\n " : ""; }, function (props) { return props.$direction === "horizontal" ? "100%" : props.$size === "lg" ? "71.9%" : "58.2%"; }, function (props) { return props.$direction === "horizontal" ? "0" : "1.5rem"; }, function (props) { return props.$direction === "horizontal" ? "\n display: flex;\n flex-direction: column-reverse;\n " : ""; }, function (props) { return props.$direction === "horizontal" ? "0" : props.$size === "lg" ? "1.5rem" : "1rem"; }, function (props) { return props.$size === "lg" ? "var(--headline-bold-18-22)" : "var(--title-bold-16-19)"; }, function (props) { return props.$size === "lg" ? "1.5rem" : "1rem"; }, function (props) { return props.$direction === "horizontal" ? "3" : props.$size === "lg" ? "2" : "3"; }, function (props) { return props.$size === "lg" ? "22px" : "57px"; }, function (props) { return props.$size === "lg" ? "var(--title-regular-16-19)" : "var(--body-regular-14-17)"; }, function (props) { return props.$size === "lg" ? "5" : "3"; }, function (props) { return props.$direction === "horizontal" ? "\n display: none;\n " : ""; }, function (props) { return props.$size === "lg" ? "12px" : "0"; }, function (props) { return props.$size === "lg" ? "\n @media only screen and ".concat(devices_1.devices.lg, " {\n .content{\n display:block;\n .contentImg{\n padding-bottom: 58.2%;\n margin-bottom: 1.5rem;\n }\n .contentBottom{\n display:block;\n .tagWrapper{\n margin-bottom: 1rem;\n }\n .contentTitle {\n font: var(--title-bold-16-19);\n margin-bottom: 1rem;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n min-height: 57px !important;\n }\n \n .contentDesc {\n display: block;\n font: var(--body-regular-14-17);\n margin: 0;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin-bottom: 0;\n }\n }\n }\n }\n ") : ""; });
14
14
  var templateObject_1;
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"], ["\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"])), 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.5",
3
+ "version": "1.82.7",
4
4
  "files": [
5
5
  "dist"
6
6
  ],