krl-alfred 1.76.18 → 1.76.19

package/dist/components/Divider/Divider.js

@@ -24,9 +24,9 @@ var Divider = function (props) {
         case 'horizontal':
             return ((0, jsx_runtime_1.jsx)(Divider_styled_1.DividerStyled, { children: (0, jsx_runtime_1.jsxs)(Divider_styled_1.Horizontal, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)("div", {}), hasText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { children: text }), (0, jsx_runtime_1.jsx)("div", {})] }))] })) }));
         case 'waveArrowUp':
-            return ((0, jsx_runtime_1.jsx)(Divider_styled_1.DividerStyled, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "WaveArrowUp", width: "97px", height: "53px" }) }));
+            return ((0, jsx_runtime_1.jsx)(Divider_styled_1.DividerStyled, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "WaveArrowUp", width: "97px", height: "53px", color: "var(--primary)" }) }));
         case 'waveArrowDown':
-            return ((0, jsx_runtime_1.jsx)(Divider_styled_1.DividerStyled, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "WaveArrowDown", width: "97px", height: "53px" }) }));
+            return ((0, jsx_runtime_1.jsx)(Divider_styled_1.DividerStyled, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "WaveArrowDown", width: "97px", height: "53px", color: "var(--primary)" }) }));
         default:
             return ((0, jsx_runtime_1.jsx)(Divider_styled_1.DividerStyled, { children: "default" }));
     }

package/dist/components/Modal/Modal.styled.js

@@ -3,35 +3,14 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OverlayStyled = exports.ModalStyled = void 0;
-var styled_components_1 = __importStar(require("styled-components"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-var mobileHorizontalButton = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  button {\n    padding: 0;\n    &:is(:nth-child(1)) {\n      width: 50%;\n    }\n    &:is(:nth-child(2)) {\n      width: 50%;\n    }\n  }\n"], ["\n  button {\n    padding: 0;\n    &:is(:nth-child(1)) {\n      width: 50%;\n    }\n    &:is(:nth-child(2)) {\n      width: 50%;\n    }\n  }\n"])));
-exports.ModalStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: white;\n  border-radius: 8px;\n  box-sizing: border-box;\n  max-height: 800px;\n  min-height: 300px;\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  max-width: calc(100vw - 2rem);\n  width: ", ";\n  ", ";\n  \n  div.header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 24px;\n    border-bottom: ", ";\n    box-sizing: border-box;\n\n    div.empty {\n      width: 32px;\n      height: 32px;\n    }\n\n    div.icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 8px;\n      cursor: pointer;\n      background: white;\n      transition: all .2s;\n      color: var(--dark);\n      &:hover {\n        box-shadow: 0 6px 30px #EAE9F0;\n      }\n\n    }\n    div.title {\n      h5 {\n        margin: 0;\n        font : ", ";\n      }\n      p {\n        margin: 8px 0 0;\n        font:var(--body-regular-14-17);\n      }\n    }\n   \n  }\n\n  div.content {\n    padding : ", ";\n    overflow: auto;\n    position: relative;\n    scrollbar-color: var(--dark-opacity-10) white;\n    scrollbar-width: thin;\n\n    &::-webkit-scrollbar {\n      width: 4px;\n      background-color: #ffffff;\n    }\n    &::-webkit-scrollbar-track {\n      border-radius: 10px;\n      background: white;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: 10px;\n      background: var(--dark-opacity-10);\n    }\n    \n    .contentInner{\n      //height: 100%;\n    }\n  }\n\n  div.buttons {\n    padding: 24px;\n    display: flex;\n    box-sizing: border-box;\n    border-top: ", ";\n    ", "\n\n    @media only screen and ", " {\n      ", "\n    }\n    \n  }\n"], ["\n  background: white;\n  border-radius: 8px;\n  box-sizing: border-box;\n  max-height: 800px;\n  min-height: 300px;\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  max-width: calc(100vw - 2rem);\n  width: ", ";\n  ", ";\n  \n  div.header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 24px;\n    border-bottom: ", ";\n    box-sizing: border-box;\n\n    div.empty {\n      width: 32px;\n      height: 32px;\n    }\n\n    div.icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 8px;\n      cursor: pointer;\n      background: white;\n      transition: all .2s;\n      color: var(--dark);\n      &:hover {\n        box-shadow: 0 6px 30px #EAE9F0;\n      }\n\n    }\n    div.title {\n      h5 {\n        margin: 0;\n        font : ", ";\n      }\n      p {\n        margin: 8px 0 0;\n        font:var(--body-regular-14-17);\n      }\n    }\n   \n  }\n\n  div.content {\n    padding : ", ";\n    overflow: auto;\n    position: relative;\n    scrollbar-color: var(--dark-opacity-10) white;\n    scrollbar-width: thin;\n\n    &::-webkit-scrollbar {\n      width: 4px;\n      background-color: #ffffff;\n    }\n    &::-webkit-scrollbar-track {\n      border-radius: 10px;\n      background: white;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: 10px;\n      background: var(--dark-opacity-10);\n    }\n    \n    .contentInner{\n      //height: 100%;\n    }\n  }\n\n  div.buttons {\n    padding: 24px;\n    display: flex;\n    box-sizing: border-box;\n    border-top: ", ";\n    ", "\n\n    @media only screen and ", " {\n      ", "\n    }\n    \n  }\n"])), function (props) {
+exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: white;\n  border-radius: 8px;\n  box-sizing: border-box;\n  max-height: 800px;\n  min-height: 300px;\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  max-width: calc(100vw - 2rem);\n  width: ", ";\n  ", ";\n  \n  div.header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 24px;\n    border-bottom: ", ";\n    box-sizing: border-box;\n\n    div.empty {\n      width: 32px;\n      height: 32px;\n    }\n\n    div.icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 8px;\n      cursor: pointer;\n      background: white;\n      transition: all .2s;\n      color: var(--dark);\n      &:hover {\n        box-shadow: 0 6px 30px #EAE9F0;\n      }\n\n    }\n    div.title {\n      h5 {\n        margin: 0;\n        font : ", ";\n      }\n      p {\n        margin: 8px 0 0;\n        font:var(--body-regular-14-17);\n      }\n    }\n   \n  }\n\n  div.content {\n    padding : ", ";\n    overflow: auto;\n    position: relative;\n    scrollbar-color: var(--dark-opacity-10) white;\n    scrollbar-width: thin;\n\n    &::-webkit-scrollbar {\n      width: 4px;\n      background-color: #ffffff;\n    }\n    &::-webkit-scrollbar-track {\n      border-radius: 10px;\n      background: white;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: 10px;\n      background: var(--dark-opacity-10);\n    }\n    \n    .contentInner{\n      //height: 100%;\n    }\n  }\n\n  div.buttons {\n    padding: 24px;\n    display: flex;\n    box-sizing: border-box;\n    border-top: ", ";\n    ", "\n\n    @media only screen and ", " {\n      ", "\n    }\n    \n  }\n"], ["\n  background: white;\n  border-radius: 8px;\n  box-sizing: border-box;\n  max-height: 800px;\n  min-height: 300px;\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  max-width: calc(100vw - 2rem);\n  width: ", ";\n  ", ";\n  \n  div.header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 24px;\n    border-bottom: ", ";\n    box-sizing: border-box;\n\n    div.empty {\n      width: 32px;\n      height: 32px;\n    }\n\n    div.icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 8px;\n      cursor: pointer;\n      background: white;\n      transition: all .2s;\n      color: var(--dark);\n      &:hover {\n        box-shadow: 0 6px 30px #EAE9F0;\n      }\n\n    }\n    div.title {\n      h5 {\n        margin: 0;\n        font : ", ";\n      }\n      p {\n        margin: 8px 0 0;\n        font:var(--body-regular-14-17);\n      }\n    }\n   \n  }\n\n  div.content {\n    padding : ", ";\n    overflow: auto;\n    position: relative;\n    scrollbar-color: var(--dark-opacity-10) white;\n    scrollbar-width: thin;\n\n    &::-webkit-scrollbar {\n      width: 4px;\n      background-color: #ffffff;\n    }\n    &::-webkit-scrollbar-track {\n      border-radius: 10px;\n      background: white;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: 10px;\n      background: var(--dark-opacity-10);\n    }\n    \n    .contentInner{\n      //height: 100%;\n    }\n  }\n\n  div.buttons {\n    padding: 24px;\n    display: flex;\n    box-sizing: border-box;\n    border-top: ", ";\n    ", "\n\n    @media only screen and ", " {\n      ", "\n    }\n    \n  }\n"])), function (props) {
     switch (props.size) {
         case 'xxsmall':
             return "311px";
@@ -49,12 +28,12 @@ exports.ModalStyled = styled_components_1.default.div(templateObject_2 || (templ
 }, function (props) { return !props.autoHeight && "\n      @media only screen and ".concat(devices_1.devices.sm, " {\n        display: grid;\n        height: 100dvh;\n        align-content: space-between;\n        border-radius: 0;\n        width: 100%;\n        max-width: 100%;\n        max-height: initial;\n      }\n  "); }, function (props) { return props.showHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.titleAlignment === "left" ? "var(--title-semi-bold-16-19)" : "var(--headline-semi-bold-20-24)"; }, function (props) { return props.customContent ? '0' : '0 24px'; }, function (props) { return props.showFooterBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) {
     switch (props.buttonsAlignment) {
         case 'horizontal':
-            return "\n            justify-content: flex-start;\n            flex-direction: row-reverse;\n            gap: 0;\n            button {\n              + button{\n                margin-right: ".concat((props.size === 'small' ? '16px' : '24px'), ";\n                @media only screen and ").concat(devices_1.devices.sm, " {\n                  margin-right: 16px;\n                }\n              }\n            }\n            @media only screen and ").concat(devices_1.devices.sm, " {\n              button {\n                &:is(:nth-child(1)) {\n                  width: ").concat((props.showSecondaryButton ? '50%' : '100%'), ";\n                  white-space: nowrap;\n                  box-sizing: content-box;\n                }\n                + button {\n                  width: 50%;\n                  margin-right: 1rem;\n                }\n              }\n            }\n          ");
+            return "\n            justify-content: flex-start;\n            flex-direction: row-reverse;\n            gap: 0;\n            button {\n              + button{\n                margin-right: ".concat((props.size === 'small' ? '16px' : '24px'), ";\n                @media only screen and ").concat(devices_1.devices.sm, " {\n                  margin-right: 16px;\n                }\n              }\n            }\n            @media only screen and ").concat(devices_1.devices.sm, " {\n              button {\n                &:is(:nth-child(1)) {\n                  min-width: ").concat((props.showSecondaryButton ? 'calc(50% - 3rem)' : '100%'), ";\n                  white-space: nowrap;\n                  box-sizing: content-box;\n                }\n                + button {\n                  flex: 1 0 auto;\n                  margin-right: 1rem;\n                }\n              }\n            }\n          ");
         case 'vertical':
             return "\n            justify-content: space-between;\n            flex-direction: column;\n            gap: ".concat(props.showDivider ? '0.5rem' : '1rem', ";\n          ");
         default:
             return "";
     }
 }, devices_1.devices.md, function (props) { return props.buttonsAlignmentOnMobile === 'vertical' ? "\n        flex-direction : column;\n        button {\n          margin : 0 !important;\n          + button {\n            margin-top:1rem !important;\n          }\n        }\n    " : " "; });
-exports.OverlayStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #a3a5ad40;\n  overflow: auto;\n  left: 0;\n  top: 0;\n  z-index: 999999;\n"], ["\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #a3a5ad40;\n  overflow: auto;\n  left: 0;\n  top: 0;\n  z-index: 999999;\n"])));
-var templateObject_1, templateObject_2, templateObject_3;
+exports.OverlayStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #a3a5ad40;\n  overflow: auto;\n  left: 0;\n  top: 0;\n  z-index: 999999;\n"], ["\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #a3a5ad40;\n  overflow: auto;\n  left: 0;\n  top: 0;\n  z-index: 999999;\n"])));
+var templateObject_1, templateObject_2;

package/dist/components/ProductCard/ProductCard.styled.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HorizontalSmStyled = exports.HorizontalStyled = exports.StandartStyled = exports.ChecklistStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.ChecklistStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  max-width: 634px;\n  ", "\n  .productCardInner {\n    border: 1px solid var(--dark-opacity-10);\n    border-radius: 8px;\n    padding: 24px;\n    background-color: white;\n    grid-template-columns: auto auto 1fr;\n    display: grid;\n    justify-content: flex-start;\n    @media only screen and ", " {\n      padding: 24px 16px;\n    }\n    .productCardCheckboxContent{\n      height: 64px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      &:is(.hidden){\n        display: none;\n      }\n      .indicator{ \n        margin-right: 24px;\n        @media only screen and ", " {\n          margin-right: 8px;\n        }\n      }\n    }\n    .productCardImg {\n      width: 64px;\n      height: 64px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 16px;\n      overflow: hidden;\n      @media only screen and ", " {\n        margin-right: 16px;\n      }\n\n      > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n      }\n    }\n    .productCardTitle{\n      min-height: 64px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      text-align: start;\n      font:var(--title-semi-bold-16-19);\n    }\n    .productCardContent{ \n      margin: 1.5rem auto 0 0;\n      grid-column-start: 1;\n      grid-column-end: 4;\n      width: 100%;\n\n      @media only screen and ", " {\n        margin: 1rem auto 0 0;\n      }\n    }\n  }\n"], ["\n  display: block;\n  max-width: 634px;\n  ", "\n  .productCardInner {\n    border: 1px solid var(--dark-opacity-10);\n    border-radius: 8px;\n    padding: 24px;\n    background-color: white;\n    grid-template-columns: auto auto 1fr;\n    display: grid;\n    justify-content: flex-start;\n    @media only screen and ", " {\n      padding: 24px 16px;\n    }\n    .productCardCheckboxContent{\n      height: 64px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      &:is(.hidden){\n        display: none;\n      }\n      .indicator{ \n        margin-right: 24px;\n        @media only screen and ", " {\n          margin-right: 8px;\n        }\n      }\n    }\n    .productCardImg {\n      width: 64px;\n      height: 64px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 16px;\n      overflow: hidden;\n      @media only screen and ", " {\n        margin-right: 16px;\n      }\n\n      > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n      }\n    }\n    .productCardTitle{\n      min-height: 64px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      text-align: start;\n      font:var(--title-semi-bold-16-19);\n    }\n    .productCardContent{ \n      margin: 1.5rem auto 0 0;\n      grid-column-start: 1;\n      grid-column-end: 4;\n      width: 100%;\n\n      @media only screen and ", " {\n        margin: 1rem auto 0 0;\n      }\n    }\n  }\n"])), function (props) { return props.disabled ? "\n    user-select:none;\n    pointer-events:none;\n  " : ""; }, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.lg);
+exports.ChecklistStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  max-width: 634px;\n  ", "\n  .productCardInner {\n    border: 1px solid var(--dark-opacity-10);\n    border-radius: 8px;\n    padding: 24px;\n    background-color: white;\n    grid-template-columns: auto auto 1fr;\n    display: grid;\n    justify-content: flex-start;\n    @media only screen and ", " {\n      padding: 24px 16px;\n    }\n    .productCardCheckboxContent{\n      height: 64px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      &:is(.hidden){\n        display: none;\n      }\n      .indicator{ \n        margin-right: 24px;\n        @media only screen and ", " {\n          margin-right: 8px;\n        }\n      }\n    }\n    .productCardImg {\n      width: 64px;\n      height: 64px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 16px;\n      overflow: hidden;\n      box-sizing: border-box;\n      @media only screen and ", " {\n        margin-right: 16px;\n      }\n\n      > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n      }\n    }\n    .productCardTitle{\n      min-height: 64px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      text-align: start;\n      font:var(--title-semi-bold-16-19);\n    }\n    .productCardContent{ \n      margin: 1.5rem auto 0 ", ";\n      grid-column-start: 1;\n      grid-column-end: 4;\n      width: ", ";\n\n      @media only screen and ", " {\n        margin: 1rem auto 0 0;\n        width: 100%;\n      }\n    }\n  }\n"], ["\n  display: block;\n  max-width: 634px;\n  ", "\n  .productCardInner {\n    border: 1px solid var(--dark-opacity-10);\n    border-radius: 8px;\n    padding: 24px;\n    background-color: white;\n    grid-template-columns: auto auto 1fr;\n    display: grid;\n    justify-content: flex-start;\n    @media only screen and ", " {\n      padding: 24px 16px;\n    }\n    .productCardCheckboxContent{\n      height: 64px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      &:is(.hidden){\n        display: none;\n      }\n      .indicator{ \n        margin-right: 24px;\n        @media only screen and ", " {\n          margin-right: 8px;\n        }\n      }\n    }\n    .productCardImg {\n      width: 64px;\n      height: 64px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 16px;\n      overflow: hidden;\n      box-sizing: border-box;\n      @media only screen and ", " {\n        margin-right: 16px;\n      }\n\n      > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n      }\n    }\n    .productCardTitle{\n      min-height: 64px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      text-align: start;\n      font:var(--title-semi-bold-16-19);\n    }\n    .productCardContent{ \n      margin: 1.5rem auto 0 ", ";\n      grid-column-start: 1;\n      grid-column-end: 4;\n      width: ", ";\n\n      @media only screen and ", " {\n        margin: 1rem auto 0 0;\n        width: 100%;\n      }\n    }\n  }\n"])), function (props) { return props.disabled ? "\n    user-select:none;\n    pointer-events:none;\n  " : ""; }, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm, function (props) { return props.isContentOffset ? '128px' : '0'; }, function (props) { return props.isContentOffset ? 'calc(100% - 128px)' : '100%'; }, devices_1.devices.md);
 exports.StandartStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-shadow: 0 6px 30px 0 #EAE9F0;\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  .cartBadge{\n    position: absolute;\n    left: 8px;\n    top: 8px;\n    z-index: 2;\n  }\n  a {\n    text-decoration: none;\n    color: inherit;\n  }\n\n  &:hover {\n    box-shadow: 0 6px 30px 0 #B8B8CD;\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    > * {\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  }\n  .productCardContent{ \n    padding: 1rem 0 0.5rem 0;\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    .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: 8px;\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: 2px;\n        }\n      }\n\n      .oldPrice {\n        color: var(--dark-opacity-25);\n        margin-bottom: 2px;\n        .price, .period {\n          text-decoration: line-through;\n        }\n        .price{\n          font: var(--caption-semi-bold-12-15);\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        .period{\n          font: var(--body-regular-13-16);\n        }\n      }\n    }\n  }\n\n  ", "\n"], ["\n  box-shadow: 0 6px 30px 0 #EAE9F0;\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  .cartBadge{\n    position: absolute;\n    left: 8px;\n    top: 8px;\n    z-index: 2;\n  }\n  a {\n    text-decoration: none;\n    color: inherit;\n  }\n\n  &:hover {\n    box-shadow: 0 6px 30px 0 #B8B8CD;\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    > * {\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  }\n  .productCardContent{ \n    padding: 1rem 0 0.5rem 0;\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    .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: 8px;\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: 2px;\n        }\n      }\n\n      .oldPrice {\n        color: var(--dark-opacity-25);\n        margin-bottom: 2px;\n        .price, .period {\n          text-decoration: line-through;\n        }\n        .price{\n          font: var(--caption-semi-bold-12-15);\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        .period{\n          font: var(--body-regular-13-16);\n        }\n      }\n    }\n  }\n\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        }\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  "); });
 exports.HorizontalStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __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(--dark-opacity-5);\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:", ";\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    }\n\n    .priceContent {\n      display: flex;\n      align-items: end;\n      justify-content: flex-start;\n\n      .price {\n        margin-right: 2px;\n        font:", ";\n      }\n\n      .period {\n        font:", ";\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(--dark-opacity-5);\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:", ";\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    }\n\n    .priceContent {\n      display: flex;\n      align-items: end;\n      justify-content: flex-start;\n\n      .price {\n        margin-right: 2px;\n        font:", ";\n      }\n\n      .period {\n        font:", ";\n      }\n    }\n  }\n"])), devices_1.devices.sm, function (props) { return (props.isMobile ? 'var(--caption-semi-bold-12-15)' : 'var(--title-semi-bold-16-19)'); }, function (props) { return (props.isMobile ? 'var(--caption-extra-bold-12-15)' : 'var(--body-extra-bold-14-17)'); }, function (props) { return (props.isMobile ? 'var(--caption-regular-12-15)' : 'var(--body-regular-13-16)'); });
 exports.HorizontalSmStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: var(--dark);\n  padding: 0 0.5rem;\n  transition: all .2s ease;\n  border-radius: 8px;\n  border: 1px solid var(--grey-10);\n\n  a {\n    text-decoration: none;\n    color: inherit;\n  }\n\n  .horizontalSmWrapper {\n    text-decoration: none;\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    height: 66px;\n    padding-right: 1rem;\n\n    .img {\n      border: ", ";\n      border-radius: 8px;\n      position: relative;\n      overflow: hidden;\n      width: ", ";\n      height: ", ";\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 1rem;\n      background: white;\n\n      > * {\n        vertical-align: middle !important;\n      }\n    }\n\n    .text {\n      padding-right: ", ";\n      .title {\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-semi-bold-14-17);\n      }\n    }\n\n    .priceContent {\n      text-align: end;\n\n      .period {\n        display: block;\n        margin-bottom: 4px;\n        font:var(--body-regular-14-17);\n      }\n\n      .price {\n        display: block;\n        font:var(--title-extra-bold-16-19);\n      }\n    }\n  }\n"], ["\n  color: var(--dark);\n  padding: 0 0.5rem;\n  transition: all .2s ease;\n  border-radius: 8px;\n  border: 1px solid var(--grey-10);\n\n  a {\n    text-decoration: none;\n    color: inherit;\n  }\n\n  .horizontalSmWrapper {\n    text-decoration: none;\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    height: 66px;\n    padding-right: 1rem;\n\n    .img {\n      border: ", ";\n      border-radius: 8px;\n      position: relative;\n      overflow: hidden;\n      width: ", ";\n      height: ", ";\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 1rem;\n      background: white;\n\n      > * {\n        vertical-align: middle !important;\n      }\n    }\n\n    .text {\n      padding-right: ", ";\n      .title {\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-semi-bold-14-17);\n      }\n    }\n\n    .priceContent {\n      text-align: end;\n\n      .period {\n        display: block;\n        margin-bottom: 4px;\n        font:var(--body-regular-14-17);\n      }\n\n      .price {\n        display: block;\n        font:var(--title-extra-bold-16-19);\n      }\n    }\n  }\n"])), function (props) { return props.hasImageBorder ? '1px solid var(--dark-opacity-5)' : 'none'; }, function (props) { return props.imageWidth ? props.imageWidth : '71px'; }, function (props) { return props.imageHeight ? props.imageHeight : '50px'; }, function (props) { return props.period ? "2rem" : "0"; });

package/dist/components/ProductCard/layouts/Checklist.js

@@ -32,6 +32,6 @@ var react_device_detect_1 = require("react-device-detect");
 var classnames_1 = __importDefault(require("classnames"));
 var Checklist = function (props) {
     var hasCheckbox = props.hasCheckbox, checked = props.checked, name = props.name, productCardOnChange = props.productCardOnChange, title = props.title, content = props.content, value = props.value, other = __rest(props, ["hasCheckbox", "checked", "name", "productCardOnChange", "title", "content", "value"]);
-    return (0, jsx_runtime_1.jsx)(ProductCard_styled_1.ChecklistStyled, __assign({}, other, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardInner" }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: props.checkboxId, className: (0, classnames_1.default)({ "hidden": !hasCheckbox }, "productCardCheckboxContent") }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: props.checkboxId, size: react_device_detect_1.isMobile ? "small" : "medium", label: "", onChange: productCardOnChange, value: value, checked: checked, name: name }) })), props.image && ((0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: props.checkboxId, className: "productCardImg" }, { children: props.image }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardText" }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: props.checkboxId, className: "productCardTitle" }, { children: props.title })), props.contentAlignment === "center" && props.content && (0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardContent" }, { children: props.content }))] })), props.contentAlignment === "left" && props.content && (0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardContent" }, { children: props.content }))] })) }));
+    return (0, jsx_runtime_1.jsx)(ProductCard_styled_1.ChecklistStyled, __assign({}, other, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardInner" }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: props.checkboxId, className: (0, classnames_1.default)({ "hidden": !hasCheckbox }, "productCardCheckboxContent") }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: props.checkboxId, size: react_device_detect_1.isMobile ? "small" : "medium", label: "", onChange: productCardOnChange, value: value, checked: checked, name: name }) })), props.image && ((0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: props.checkboxId, className: "productCardImg" }, { children: props.image }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardText" }, { children: (0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: props.checkboxId, className: "productCardTitle" }, { children: props.title })) })), props.content && (0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardContent" }, { children: props.content }))] })) }));
 };
 exports.default = Checklist;

package/dist/components/ProductCard/props.js

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.layouts = exports.contentAlignments = void 0;
-exports.contentAlignments = ['left', 'center'];
+exports.layouts = void 0;
 exports.layouts = ['checklist', 'standart', 'horizontal', 'horizontalSm'];
 var ProductCardDefault = {
     hasCheckbox: true,
-    contentAlignment: exports.contentAlignments[0],
+    isContentOffset: false,
     layout: exports.layouts[0],
     productChecked: false,
     disabled: false,

package/dist/components/ProductCard/stories/ProductCard.stories.js

@@ -34,7 +34,6 @@ exports.default = {
     },
     tags: ['autodocs'],
     argTypes: {
-        contentAlignment: { control: 'select', options: props_1.contentAlignments },
         layout: { control: 'select', options: props_1.layouts },
         disabled: { control: 'boolean' },
         hasDiscount: { control: 'boolean' },
@@ -54,7 +53,6 @@ exports.Default = {
         oldPricePeriod: "hafta",
         period: "hafta",
         content: "Content",
-        contentAlignment: "left",
         isMobile: false,
         productCardOnChange: function () { return console.log("test"); },
         image: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" })

package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js

@@ -24,7 +24,8 @@ var ShoppingCartProduct = function (props) {
         var item = _a.item, children = _a.children;
         return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
     };
-    return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "inner" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: props.image })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: props }, { children: (0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: props.title })) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [props.discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate" }, { children: ["%", props.discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [props.oldPrice && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: props.oldPrice })), props.oldPricePeriod && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "period" }, { children: ["/ ", props.oldPricePeriod] }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: props.price })), props.period && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "period" }, { children: ["/ ", props.period] }))] }))] })] })), (0, jsx_runtime_1.jsxs)("p", __assign({ className: "productCardDeliveryText" }, { children: [props.deliveryDangerText && (0, jsx_runtime_1.jsx)("span", __assign({ className: "productCardDeliveryDanger" }, { children: props.deliveryDangerText })), props.deliveryText] }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "actions" }, { children: [!props.hasDisableActions && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading || props.hasError, onClick: props.onIncrement, className: "actionButton" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall", width: "16px", height: "16px" }), props.hasError && (0, jsx_runtime_1.jsx)("div", __assign({ className: "popup" }, { children: props.errorText }))] }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "quantity" }, { children: props.hasLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) : props.quantity })), !props.hasDisableActions && (props.hasRemove ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, onClick: props.onRemove, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, onClick: props.onDecrement, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "NegativeSmall", width: "16px", height: "16px" }) }))))] }))] })), props.hasInsurance && ((0, jsx_runtime_1.jsxs)("div", __assign({ onClick: !props.hasLoading && props.toggleInsurance, className: "insurance" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "insuranceImg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Tamamlarsin", width: "80px", height: "9.14px" }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [props.insuranceText, props.insurancePrice && (0, jsx_runtime_1.jsxs)("p", __assign({ className: "price" }, { children: [props.insurancePrice, (0, jsx_runtime_1.jsx)("span", __assign({ className: "quantity" }, { children: props.insuranceQuantity }))] }))] })), props.hasInsuranceActions && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "actions" }, { children: props.hasInsuranceTooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupRight: "-16px", hasClickAction: props.hasInsuranceTooltipClickAction, popupWidth: props.insuranceTooltipWidth, position: "bottomRight" }, { children: props.insuranceTooltipText }))) : (props.insurancePrice ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight", width: "24px", height: "24px" }) })))) })))] })))] })));
+    return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "inner" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: props }, { children: props.image })) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text" }, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, __assign({ item: props }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: props.title })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [props.discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate" }, { children: ["%", props.discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [props.oldPrice && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: props.oldPrice })), props.oldPricePeriod && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "period" }, { children: ["/ ", props.oldPricePeriod] }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: props.price })), props.period && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "period" }, { children: ["/ ", props.period] }))] }))] })] })), (0, jsx_runtime_1.jsxs)("p", __assign({ className: "productCardDeliveryText" }, { children: [props.deliveryDangerText &&
+                                            (0, jsx_runtime_1.jsx)("span", __assign({ className: "productCardDeliveryDanger" }, { children: props.deliveryDangerText })), props.deliveryText] }))] })) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "actions" }, { children: [!props.hasDisableActions && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading || props.hasError, onClick: props.onIncrement, className: "actionButton" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall", width: "16px", height: "16px" }), props.hasError && (0, jsx_runtime_1.jsx)("div", __assign({ className: "popup" }, { children: props.errorText }))] }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "quantity" }, { children: props.hasLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) : props.quantity })), !props.hasDisableActions && (props.hasRemove ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, onClick: props.onRemove, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, onClick: props.onDecrement, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "NegativeSmall", width: "16px", height: "16px" }) }))))] }))] })), props.hasInsurance && ((0, jsx_runtime_1.jsxs)("div", __assign({ onClick: !props.hasLoading && props.toggleInsurance, className: "insurance" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "insuranceImg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Tamamlarsin", width: "80px", height: "9.14px" }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [props.insuranceText, props.insurancePrice && (0, jsx_runtime_1.jsxs)("p", __assign({ className: "price" }, { children: [props.insurancePrice, (0, jsx_runtime_1.jsx)("span", __assign({ className: "quantity" }, { children: props.insuranceQuantity }))] }))] })), props.hasInsuranceActions && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "actions" }, { children: props.hasInsuranceTooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupRight: "-16px", hasClickAction: props.hasInsuranceTooltipClickAction, popupWidth: props.insuranceTooltipWidth, position: "bottomRight" }, { children: props.insuranceTooltipText }))) : (props.insurancePrice ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight", width: "24px", height: "24px" }) })))) })))] })))] })));
 };
 ShoppingCartProduct.defaultProps = {
     insuranceText: "Tamamlayıcı ek güvence ekle",

package/package.json

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