krl-alfred 1.68.1 → 1.68.2

package/dist/components/Banner/layouts/layout1/layout1.styled.js

@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BannerStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../../../constants/devices");
-exports.BannerStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: 1050px;\n  margin: 0 auto;\n\n  .swiper-wrapper {\n    align-items: center;\n  }\n\n  .slick-list {\n    border-radius: 0.5rem;\n    box-shadow: 0 6px 30px 0 #EAE9F0;\n    position: relative;\n    overflow: hidden; \n  }\n  .slick-arrow{\n    display: none !important;\n  }\n\n  .item {\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n\n    .text {\n      @media only screen and ", " {\n        display: none;\n      }\n\n      .title {\n        margin-bottom: 1.5rem;\n        display: block;\n      }\n\n      .description {\n        margin-top: 0;\n        margin-bottom: 1.5rem;\n        display: block;\n      }\n    }\n\n    .textMobile {\n      display: none;\n      background-color: var(--primary-shades-dark);\n      padding: 0 1rem;\n      color: white;\n      align-items: center;\n      justify-content: space-between;\n      border-radius: 0;\n      height: 70px;\n      svg {\n        path {\n          stroke: white;\n        }\n      }\n\n      b {\n        display: block;\n      }\n\n      @media only screen and ", " {\n        display: flex;\n      }\n    }\n\n    .img {\n      text-align: end;\n      \n      img {\n        display: inline-block !important;\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 0;\n        text-align: center;\n        height: 228px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n  }\n\n  .thumbnailSlider {\n    margin-top: 3rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    @media only screen and ", " {\n      display: none;\n    }\n\n    .thumbnailInner {\n      justify-content: center;\n      display: flex;\n      align-items: center;\n      margin: 0 2.5rem;\n\n      .thumbnailItem {\n        border: 1px solid var(--dark-opacity-10);\n        height: 50px;\n        border-radius: 0.5rem;\n        position: relative;\n        overflow: hidden;\n        margin: 0 4px;\n        box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n        width: 70px;\n        padding: 8px;\n        box-sizing: border-box;\n        cursor: pointer;\n        transition: all .1s ease;\n\n        &:is(.active) {\n          border-color: var(--primary);\n        }\n\n        > * {\n          display: block;\n          width: 100%;\n          height: 100%;\n          object-fit: contain;\n          object-position: center center;\n        }\n      }\n    }\n\n    .navigation {\n      box-sizing: border-box;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: 8px;\n      font-family: var(--font-family-sans-serif);\n      cursor: pointer;\n      transition: all .2s;\n      width: 48px;\n      height: 48px;\n      box-shadow: 0 0 16px 0 white;\n      border: 0;\n      background-color: white;\n\n      svg {\n        path {\n          stroke: var(--primary);\n        }\n      }\n\n      &:hover {\n        box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n      }\n    }\n  }\n"], ["\n  max-width: 1050px;\n  margin: 0 auto;\n\n  .swiper-wrapper {\n    align-items: center;\n  }\n\n  .slick-list {\n    border-radius: 0.5rem;\n    box-shadow: 0 6px 30px 0 #EAE9F0;\n    position: relative;\n    overflow: hidden; \n  }\n  .slick-arrow{\n    display: none !important;\n  }\n\n  .item {\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n\n    .text {\n      @media only screen and ", " {\n        display: none;\n      }\n\n      .title {\n        margin-bottom: 1.5rem;\n        display: block;\n      }\n\n      .description {\n        margin-top: 0;\n        margin-bottom: 1.5rem;\n        display: block;\n      }\n    }\n\n    .textMobile {\n      display: none;\n      background-color: var(--primary-shades-dark);\n      padding: 0 1rem;\n      color: white;\n      align-items: center;\n      justify-content: space-between;\n      border-radius: 0;\n      height: 70px;\n      svg {\n        path {\n          stroke: white;\n        }\n      }\n\n      b {\n        display: block;\n      }\n\n      @media only screen and ", " {\n        display: flex;\n      }\n    }\n\n    .img {\n      text-align: end;\n      \n      img {\n        display: inline-block !important;\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 0;\n        text-align: center;\n        height: 228px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n  }\n\n  .thumbnailSlider {\n    margin-top: 3rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    @media only screen and ", " {\n      display: none;\n    }\n\n    .thumbnailInner {\n      justify-content: center;\n      display: flex;\n      align-items: center;\n      margin: 0 2.5rem;\n\n      .thumbnailItem {\n        border: 1px solid var(--dark-opacity-10);\n        height: 50px;\n        border-radius: 0.5rem;\n        position: relative;\n        overflow: hidden;\n        margin: 0 4px;\n        box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n        width: 70px;\n        padding: 8px;\n        box-sizing: border-box;\n        cursor: pointer;\n        transition: all .1s ease;\n\n        &:is(.active) {\n          border-color: var(--primary);\n        }\n\n        > * {\n          display: block;\n          width: 100%;\n          height: 100%;\n          object-fit: contain;\n          object-position: center center;\n        }\n      }\n    }\n\n    .navigation {\n      box-sizing: border-box;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: 8px;\n      font-family: var(--font-family-sans-serif);\n      cursor: pointer;\n      transition: all .2s;\n      width: 48px;\n      height: 48px;\n      box-shadow: 0 0 16px 0 white;\n      border: 0;\n      background-color: white;\n\n      svg {\n        path {\n          stroke: var(--primary);\n        }\n      }\n\n      &:hover {\n        box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n      }\n    }\n  }\n"])), devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
+exports.BannerStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: 1050px;\n  margin: 0 auto;\n\n  .swiper-wrapper {\n    align-items: center;\n  }\n\n  .slick-list {\n    border-radius: 0.5rem;\n    box-shadow: 0 6px 30px 0 #EAE9F0;\n    position: relative;\n    overflow: hidden; \n  }\n  .slick-arrow{\n    display: none !important;\n  }\n\n  @media only screen and ", " {\n    .slick-active{\n      box-shadow: 0 0.375rem 1.875rem 0 #EAE9F0;\n      position: relative;\n      z-index: 5;\n    }\n  } \n\n  .item {\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n\n    .text {\n      @media only screen and ", " {\n        display: none;\n      }\n\n      .title {\n        margin-bottom: 1.5rem;\n        display: block;\n      }\n\n      .description {\n        margin-top: 0;\n        margin-bottom: 1.5rem;\n        display: block;\n      }\n    }\n\n    .textMobile {\n      display: none;\n      background-color: var(--primary-shades-dark);\n      padding: 0 1rem;\n      color: white;\n      align-items: center;\n      justify-content: space-between;\n      border-radius: 0 0 8px 8px;\n      height: 70px;\n      svg {\n        path {\n          stroke: white;\n        }\n      }\n\n      b {\n        display: block;\n      }\n\n      @media only screen and ", " {\n        display: flex;\n      }\n    }\n\n    .img {\n      text-align: end;\n      \n      img {\n        display: inline-block !important;\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 0;\n        text-align: center;\n        height: 228px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n  }\n\n  .thumbnailSlider {\n    margin-top: 3rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    @media only screen and ", " {\n      display: none;\n    }\n\n    .thumbnailInner {\n      justify-content: center;\n      display: flex;\n      align-items: center;\n      margin: 0 2.5rem;\n\n      .thumbnailItem {\n        border: 1px solid var(--dark-opacity-10);\n        height: 50px;\n        border-radius: 0.5rem;\n        position: relative;\n        overflow: hidden;\n        margin: 0 4px;\n        box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n        width: 70px;\n        padding: 8px;\n        box-sizing: border-box;\n        cursor: pointer;\n        transition: all .1s ease;\n\n        &:is(.active) {\n          border-color: var(--primary);\n        }\n\n        > * {\n          display: block;\n          width: 100%;\n          height: 100%;\n          object-fit: contain;\n          object-position: center center;\n        }\n      }\n    }\n\n    .navigation {\n      box-sizing: border-box;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: 8px;\n      font-family: var(--font-family-sans-serif);\n      cursor: pointer;\n      transition: all .2s;\n      width: 48px;\n      height: 48px;\n      box-shadow: 0 0 16px 0 white;\n      border: 0;\n      background-color: white;\n\n      svg {\n        path {\n          stroke: var(--primary);\n        }\n      }\n\n      &:hover {\n        box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n      }\n    }\n  }\n"], ["\n  max-width: 1050px;\n  margin: 0 auto;\n\n  .swiper-wrapper {\n    align-items: center;\n  }\n\n  .slick-list {\n    border-radius: 0.5rem;\n    box-shadow: 0 6px 30px 0 #EAE9F0;\n    position: relative;\n    overflow: hidden; \n  }\n  .slick-arrow{\n    display: none !important;\n  }\n\n  @media only screen and ", " {\n    .slick-active{\n      box-shadow: 0 0.375rem 1.875rem 0 #EAE9F0;\n      position: relative;\n      z-index: 5;\n    }\n  } \n\n  .item {\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n\n    .text {\n      @media only screen and ", " {\n        display: none;\n      }\n\n      .title {\n        margin-bottom: 1.5rem;\n        display: block;\n      }\n\n      .description {\n        margin-top: 0;\n        margin-bottom: 1.5rem;\n        display: block;\n      }\n    }\n\n    .textMobile {\n      display: none;\n      background-color: var(--primary-shades-dark);\n      padding: 0 1rem;\n      color: white;\n      align-items: center;\n      justify-content: space-between;\n      border-radius: 0 0 8px 8px;\n      height: 70px;\n      svg {\n        path {\n          stroke: white;\n        }\n      }\n\n      b {\n        display: block;\n      }\n\n      @media only screen and ", " {\n        display: flex;\n      }\n    }\n\n    .img {\n      text-align: end;\n      \n      img {\n        display: inline-block !important;\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 0;\n        text-align: center;\n        height: 228px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n  }\n\n  .thumbnailSlider {\n    margin-top: 3rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    @media only screen and ", " {\n      display: none;\n    }\n\n    .thumbnailInner {\n      justify-content: center;\n      display: flex;\n      align-items: center;\n      margin: 0 2.5rem;\n\n      .thumbnailItem {\n        border: 1px solid var(--dark-opacity-10);\n        height: 50px;\n        border-radius: 0.5rem;\n        position: relative;\n        overflow: hidden;\n        margin: 0 4px;\n        box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n        width: 70px;\n        padding: 8px;\n        box-sizing: border-box;\n        cursor: pointer;\n        transition: all .1s ease;\n\n        &:is(.active) {\n          border-color: var(--primary);\n        }\n\n        > * {\n          display: block;\n          width: 100%;\n          height: 100%;\n          object-fit: contain;\n          object-position: center center;\n        }\n      }\n    }\n\n    .navigation {\n      box-sizing: border-box;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: 8px;\n      font-family: var(--font-family-sans-serif);\n      cursor: pointer;\n      transition: all .2s;\n      width: 48px;\n      height: 48px;\n      box-shadow: 0 0 16px 0 white;\n      border: 0;\n      background-color: white;\n\n      svg {\n        path {\n          stroke: var(--primary);\n        }\n      }\n\n      &:hover {\n        box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n      }\n    }\n  }\n"])), devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
 var templateObject_1;

package/dist/components/Carousel/Carousel.styled.js

@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CarouselStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.CarouselStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: 100%;\n  margin: 0 auto;\n  box-sizing: border-box;\n  position: relative;\n\n  .inner {\n    border-radius: 0.5rem;\n    position: relative;\n    border: 1px solid var(--dark-opacity-10);\n    background: #fff;\n    box-sizing: border-box;\n  }\n\n  .item {\n    padding: 0 0;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    aspect-ratio: 1/1;\n    box-sizing: border-box;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n    .img {\n      text-align: end;\n      padding: 1rem;\n      > * {\n        display: block !important;\n      }\n      img {\n        max-height: 100%;\n        max-width: 100%;\n        margin: 0 auto;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 2.5rem 2.5rem 1rem;\n        text-align: center;\n      }\n    }\n  }\n\n  .thumbnailSlider {\n    margin-top: 1.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    \n    .thumbnailInner {\n      justify-content: center;\n      display: flex;\n      align-items: center;\n      margin: 0 0;\n      gap: 0 1.5rem;\n      @media only screen and ", " {\n        gap: 0 1rem;\n      }\n      .thumbnailItem {\n        border: 1px solid var(--dark-opacity-10);\n        border-radius: 0.5rem;\n        position: relative;\n        overflow: hidden;\n        margin: 0 0;\n        max-width: 96px;\n        aspect-ratio: 1/1;\n        padding: 8px;\n        box-sizing: border-box;\n        cursor: pointer;\n        transition: all .1s ease;\n        @media only screen and ", " {\n          max-width: 74px;\n        }\n\n        &:is(.active) {\n          border-color: var(--primary);\n        }\n\n        > * {\n          display: block;\n          width: 100%;\n          height: 100%;\n          object-fit: contain;\n          object-position: center center;\n        }\n      }\n    }\n  }\n\n  .navigation {\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all .2s;\n    width: 32px;\n    height: 32px;\n    border: 1px solid var(--dark-opacity-10);\n    background-color: #fff;\n    position: absolute;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%) translateX(-50%);\n    z-index: 5;\n    &:before{\n      display: none;\n    }\n    &:is(.next){\n      right: 0;\n      left: auto;\n      transform: translateY(-50%) translateX(50%);\n    }\n    &:is(.prev){\n      \n    }\n    svg {\n      path {\n        stroke: var(--grey-40);\n      }\n    }\n    @media only screen and ", " {\n      display: none;\n    }\n  }\n  .slick-prev, .slick-next{\n    display: none !important;\n  }\n"], ["\n  max-width: 100%;\n  margin: 0 auto;\n  box-sizing: border-box;\n  position: relative;\n\n  .inner {\n    border-radius: 0.5rem;\n    position: relative;\n    border: 1px solid var(--dark-opacity-10);\n    background: #fff;\n    box-sizing: border-box;\n  }\n\n  .item {\n    padding: 0 0;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    aspect-ratio: 1/1;\n    box-sizing: border-box;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n    .img {\n      text-align: end;\n      padding: 1rem;\n      > * {\n        display: block !important;\n      }\n      img {\n        max-height: 100%;\n        max-width: 100%;\n        margin: 0 auto;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 2.5rem 2.5rem 1rem;\n        text-align: center;\n      }\n    }\n  }\n\n  .thumbnailSlider {\n    margin-top: 1.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    \n    .thumbnailInner {\n      justify-content: center;\n      display: flex;\n      align-items: center;\n      margin: 0 0;\n      gap: 0 1.5rem;\n      @media only screen and ", " {\n        gap: 0 1rem;\n      }\n      .thumbnailItem {\n        border: 1px solid var(--dark-opacity-10);\n        border-radius: 0.5rem;\n        position: relative;\n        overflow: hidden;\n        margin: 0 0;\n        max-width: 96px;\n        aspect-ratio: 1/1;\n        padding: 8px;\n        box-sizing: border-box;\n        cursor: pointer;\n        transition: all .1s ease;\n        @media only screen and ", " {\n          max-width: 74px;\n        }\n\n        &:is(.active) {\n          border-color: var(--primary);\n        }\n\n        > * {\n          display: block;\n          width: 100%;\n          height: 100%;\n          object-fit: contain;\n          object-position: center center;\n        }\n      }\n    }\n  }\n\n  .navigation {\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all .2s;\n    width: 32px;\n    height: 32px;\n    border: 1px solid var(--dark-opacity-10);\n    background-color: #fff;\n    position: absolute;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%) translateX(-50%);\n    z-index: 5;\n    &:before{\n      display: none;\n    }\n    &:is(.next){\n      right: 0;\n      left: auto;\n      transform: translateY(-50%) translateX(50%);\n    }\n    &:is(.prev){\n      \n    }\n    svg {\n      path {\n        stroke: var(--grey-40);\n      }\n    }\n    @media only screen and ", " {\n      display: none;\n    }\n  }\n  .slick-prev, .slick-next{\n    display: none !important;\n  }\n"])), devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
+exports.CarouselStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: 100%;\n  margin: 0 auto;\n  box-sizing: border-box;\n  position: relative;\n\n  .inner {\n    border-radius: 0.5rem;\n    position: relative;\n    border: 1px solid var(--dark-opacity-10);\n    background: #fff;\n    box-sizing: border-box;\n  }\n\n  .item {\n    padding: 0 0;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    aspect-ratio: 1/1;\n    box-sizing: border-box;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n    .img {\n      text-align: end;\n      padding: 1rem;\n      > * {\n        display: block !important;\n      }\n      img {\n        max-height: 100%;\n        max-width: 100%;\n        margin: 0 auto;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 2.5rem 2.5rem 1rem;\n        text-align: center;\n      }\n    }\n  }\n\n  .thumbnailSlider {\n    margin-top: 1.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    \n    .thumbnailInner {\n      justify-content: center;\n      display: flex;\n      align-items: center;\n      margin: 0 0;\n      gap: 0 1.5rem;\n      width: 100%;\n      @media only screen and ", " {\n        gap: 0 1rem;\n      }\n      .thumbnailItem {\n        border: 1px solid var(--dark-opacity-10);\n        border-radius: 0.5rem;\n        position: relative;\n        overflow: hidden;\n        margin: 0 0;\n        aspect-ratio: 1/1;\n        padding: 8px;\n        box-sizing: border-box;\n        cursor: pointer;\n        transition: all .1s ease;\n        width: calc((100% / 4) - 12px); \n\n        &:is(.active) {\n          border-color: var(--primary);\n        }\n\n        > * {\n          display: block;\n          width: 100%;\n          height: 100%;\n          object-fit: contain;\n          object-position: center center;\n        }\n      }\n    }\n  }\n\n  .navigation {\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all .2s;\n    width: 32px;\n    height: 32px;\n    border: 1px solid var(--dark-opacity-10);\n    background-color: #fff;\n    position: absolute;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%) translateX(-50%);\n    z-index: 5;\n    &:before{\n      display: none;\n    }\n    &:is(.next){\n      right: 0;\n      left: auto;\n      transform: translateY(-50%) translateX(50%);\n    }\n    &:is(.prev){\n      \n    }\n    svg {\n      path {\n        stroke: var(--grey-40);\n      }\n    }\n    @media only screen and ", " {\n      display: none;\n    }\n  }\n  .slick-prev, .slick-next{\n    display: none !important;\n  }\n"], ["\n  max-width: 100%;\n  margin: 0 auto;\n  box-sizing: border-box;\n  position: relative;\n\n  .inner {\n    border-radius: 0.5rem;\n    position: relative;\n    border: 1px solid var(--dark-opacity-10);\n    background: #fff;\n    box-sizing: border-box;\n  }\n\n  .item {\n    padding: 0 0;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    aspect-ratio: 1/1;\n    box-sizing: border-box;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n    .img {\n      text-align: end;\n      padding: 1rem;\n      > * {\n        display: block !important;\n      }\n      img {\n        max-height: 100%;\n        max-width: 100%;\n        margin: 0 auto;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 2.5rem 2.5rem 1rem;\n        text-align: center;\n      }\n    }\n  }\n\n  .thumbnailSlider {\n    margin-top: 1.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    \n    .thumbnailInner {\n      justify-content: center;\n      display: flex;\n      align-items: center;\n      margin: 0 0;\n      gap: 0 1.5rem;\n      width: 100%;\n      @media only screen and ", " {\n        gap: 0 1rem;\n      }\n      .thumbnailItem {\n        border: 1px solid var(--dark-opacity-10);\n        border-radius: 0.5rem;\n        position: relative;\n        overflow: hidden;\n        margin: 0 0;\n        aspect-ratio: 1/1;\n        padding: 8px;\n        box-sizing: border-box;\n        cursor: pointer;\n        transition: all .1s ease;\n        width: calc((100% / 4) - 12px); \n\n        &:is(.active) {\n          border-color: var(--primary);\n        }\n\n        > * {\n          display: block;\n          width: 100%;\n          height: 100%;\n          object-fit: contain;\n          object-position: center center;\n        }\n      }\n    }\n  }\n\n  .navigation {\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all .2s;\n    width: 32px;\n    height: 32px;\n    border: 1px solid var(--dark-opacity-10);\n    background-color: #fff;\n    position: absolute;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%) translateX(-50%);\n    z-index: 5;\n    &:before{\n      display: none;\n    }\n    &:is(.next){\n      right: 0;\n      left: auto;\n      transform: translateY(-50%) translateX(50%);\n    }\n    &:is(.prev){\n      \n    }\n    svg {\n      path {\n        stroke: var(--grey-40);\n      }\n    }\n    @media only screen and ", " {\n      display: none;\n    }\n  }\n  .slick-prev, .slick-next{\n    display: none !important;\n  }\n"])), devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
 var templateObject_1;

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

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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      .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: 66px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      text-align: start;\n    }\n    .ProductCardContent{ \n      margin: 24px auto 0 0;\n      grid-column-start: 1;\n      grid-column-end: 4;\n      width: 100%;\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      .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: 66px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      text-align: start;\n    }\n    .ProductCardContent{ \n      margin: 24px auto 0 0;\n      grid-column-start: 1;\n      grid-column-end: 4;\n      width: 100%;\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);
+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      .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: 66px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      text-align: start;\n    }\n    .productCardContent{ \n      margin: 24px auto 0 0;\n      grid-column-start: 1;\n      grid-column-end: 4;\n      width: 100%;\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      .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: 66px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      text-align: start;\n    }\n    .productCardContent{ \n      margin: 24px auto 0 0;\n      grid-column-start: 1;\n      grid-column-end: 4;\n      width: 100%;\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);
 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: ", ";\n  transition: all .2s ease;\n  position: relative;\n  box-sizing: border-box;\n  a{\n    text-decoration: none;\n    color: inherit;\n  }\n  &:hover{\n    box-shadow: 0 6px 30px 0 #B8B8CD;\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: ", ";\n    box-sizing: border-box;\n    z-index: 1;\n    text-align: center;\n    > * {\n      width: 100%;\n      display: block;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%,-50%);\n    }\n  }\n  .productCardContent{ \n    padding: ", ";\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: ", ";\n      word-break: break-word;\n    }\n    .productCardDescription{\n      display: block;\n      margin-top: 0.5rem;\n      color: var(--grey-40);\n      margin-bottom: ", ";\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      height: ", ";\n      word-break: break-word;\n    }\n    .productCardPriceContent{\n      display: grid;\n      align-items: ", ";\n      justify-content: flex-start;\n      height: ", ";\n      grid-template-columns: ", ";\n      .discountRate{\n        margin-right: 0.5rem;\n        width: ", ";\n        height: ", ";\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      }\n      .oldPrice, .newPrice{\n        display: flex;\n        align-items: end;\n        justify-content: flex-start;\n        .price{\n          margin-right: 2px;\n        }\n      }\n      .oldPrice{\n        color: var(--dark-opacity-25);\n        margin-bottom: 2px;\n        .price , .period {\n          text-decoration: line-through;\n        }\n      }\n      .newPrice{\n        \n      }\n    }\n  }\n"], ["\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  border-radius: 0.5rem;\n  min-width: 240px;\n  padding: ", ";\n  transition: all .2s ease;\n  position: relative;\n  box-sizing: border-box;\n  a{\n    text-decoration: none;\n    color: inherit;\n  }\n  &:hover{\n    box-shadow: 0 6px 30px 0 #B8B8CD;\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: ", ";\n    box-sizing: border-box;\n    z-index: 1;\n    text-align: center;\n    > * {\n      width: 100%;\n      display: block;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%,-50%);\n    }\n  }\n  .productCardContent{ \n    padding: ", ";\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: ", ";\n      word-break: break-word;\n    }\n    .productCardDescription{\n      display: block;\n      margin-top: 0.5rem;\n      color: var(--grey-40);\n      margin-bottom: ", ";\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      height: ", ";\n      word-break: break-word;\n    }\n    .productCardPriceContent{\n      display: grid;\n      align-items: ", ";\n      justify-content: flex-start;\n      height: ", ";\n      grid-template-columns: ", ";\n      .discountRate{\n        margin-right: 0.5rem;\n        width: ", ";\n        height: ", ";\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      }\n      .oldPrice, .newPrice{\n        display: flex;\n        align-items: end;\n        justify-content: flex-start;\n        .price{\n          margin-right: 2px;\n        }\n      }\n      .oldPrice{\n        color: var(--dark-opacity-25);\n        margin-bottom: 2px;\n        .price , .period {\n          text-decoration: line-through;\n        }\n      }\n      .newPrice{\n        \n      }\n    }\n  }\n"])), function (props) { return props.isMobile ? '1.5rem' : '1rem'; }, function (props) { return props.isMobile ? '215px' : '150px'; }, function (props) { return props.isMobile ? '1.5rem 0 0.5rem 0' : '1rem 0 0.5rem 0'; }, function (props) { return props.isMobile ? '44px' : '38px'; }, function (props) { return props.isMobile ? '1.5rem' : '1.5rem'; }, function (props) { return props.isMobile ? '37px' : '34px'; }, function (props) { return props.discountRate ? 'center' : 'end'; }, function (props) { return props.isMobile ? '48px' : '36px'; }, function (props) { return props.discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.isMobile ? '65px' : '48px'; }, function (props) { return props.isMobile ? '48px' : '36px'; });
 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  &:hover{\n    background: var(--dark-opacity-3);\n  }\n  a{\n    text-decoration: none;\n    color: inherit;\n  }\n  .horizontalWrapper{ \n    text-decoration: none;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    align-items: center;\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        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: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      word-break: break-word;\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    }\n    .priceContent{\n      display: flex;\n      align-items: end;\n      justify-content: flex-start;\n      .price{\n        margin-right: 2px;\n      }\n      .period{ \n        \n      }\n    }\n  }\n"], ["\n  color: var(--dark);\n  padding: 0.5rem;\n  transition: all .2s ease;\n  border-radius: 8px;\n  &:hover{\n    background: var(--dark-opacity-3);\n  }\n  a{\n    text-decoration: none;\n    color: inherit;\n  }\n  .horizontalWrapper{ \n    text-decoration: none;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    align-items: center;\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        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: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      word-break: break-word;\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    }\n    .priceContent{\n      display: flex;\n      align-items: end;\n      justify-content: flex-start;\n      .price{\n        margin-right: 2px;\n      }\n      .period{ \n        \n      }\n    }\n  }\n"])), devices_1.devices.sm);
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -31,6 +31,6 @@ var Checkbox_1 = __importDefault(require("../../Checkbox"));
 var react_device_detect_1 = require("react-device-detect");
 var Checklist = function (props) {
     var name = props.name, productCardOnChange = props.productCardOnChange, title = props.title, content = props.content, value = props.value, other = __rest(props, ["name", "productCardOnChange", "title", "content", "value"]);
-    return (0, jsx_runtime_1.jsx)(ProductCard_styled_1.ChecklistStyled, __assign({}, other, { children: (0, jsx_runtime_1.jsxs)("div", { className: "ProductCardInner", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: props.checkboxId, className: "ProductCardCheckboxContent", children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: props.checkboxId, size: react_device_detect_1.isMobile ? "small" : "medium", label: "", onChange: props.productCardOnChange, value: props.value, name: props.name }) }), props.image && ((0, jsx_runtime_1.jsx)("label", { htmlFor: props.checkboxId, className: "ProductCardImg", children: props.image })), (0, jsx_runtime_1.jsxs)("div", { className: "ProductCardText", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: props.checkboxId, className: "ProductCardTitle title-semi-bold-16-19", children: props.title }), props.contentAlignment === "center" && props.content && (0, jsx_runtime_1.jsx)("div", { className: "ProductCardContent", children: props.content })] }), props.contentAlignment === "left" && props.content && (0, jsx_runtime_1.jsx)("div", { className: "ProductCardContent", children: props.content })] }) }));
+    return (0, jsx_runtime_1.jsx)(ProductCard_styled_1.ChecklistStyled, __assign({}, other, { children: (0, jsx_runtime_1.jsxs)("div", { className: "productCardInner", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: props.checkboxId, className: "productCardCheckboxContent", children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: props.checkboxId, size: react_device_detect_1.isMobile ? "small" : "medium", label: "", onChange: props.productCardOnChange, value: props.value, name: props.name }) }), props.image && ((0, jsx_runtime_1.jsx)("label", { htmlFor: props.checkboxId, className: "productCardImg", children: props.image })), (0, jsx_runtime_1.jsxs)("div", { className: "productCardText", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: props.checkboxId, className: "productCardTitle title-semi-bold-16-19", children: props.title }), props.contentAlignment === "center" && props.content && (0, jsx_runtime_1.jsx)("div", { className: "productCardContent", children: props.content })] }), props.contentAlignment === "left" && props.content && (0, jsx_runtime_1.jsx)("div", { className: "productCardContent", children: props.content })] }) }));
 };
 exports.default = Checklist;

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

@@ -24,6 +24,6 @@ var Standart = 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", { href: item.slug, children: children }));
     };
-    return ((0, jsx_runtime_1.jsx)(ProductCard_styled_1.StandartStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, { item: props, children: [hasDiscount && (0, jsx_runtime_1.jsx)(Badges_1.default, { size: "medium", left: (isMobile ? '17px' : '9px'), top: (isMobile ? '17px' : '9px'), title: "\u0130ndirimli" }), (0, jsx_runtime_1.jsx)("div", { className: "img", children: image }), (0, jsx_runtime_1.jsxs)("div", { className: "productCardContent", children: [(0, jsx_runtime_1.jsx)("strong", { className: (0, classnames_1.default)('productCardTitle', (isMobile ? 'headline-bold-18-22' : 'title-bold-16-19')), children: title }), (0, jsx_runtime_1.jsx)("p", { className: (0, classnames_1.default)('productCardDescription', (isMobile ? 'title-medium-16-19' : 'body-medium-14-17')), children: description }), (0, jsx_runtime_1.jsxs)("div", { className: "productCardPriceContent", children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('discountRate', (isMobile ? 'title-extra-bold-16-19' : 'body-extra-bold-13-16')), children: ["%", discountRate] }), (0, jsx_runtime_1.jsxs)("div", { children: [oldPrice && discountRate > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('oldPrice'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('price', (isMobile ? 'body-semi-bold-13-16' : 'caption-semi-bold-12-15')), children: oldPrice }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('period', 'caption-regular-12-15'), children: ["/ ", oldPricePeriod] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "newPrice", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('price', (isMobile ? 'title-extra-bold-16-19' : 'body-extra-bold-14-17')), children: price }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('period', (isMobile ? 'body-regular-14-17' : 'body-regular-13-16')), children: ["/ ", period] })] })] })] })] })] }) })));
+    return ((0, jsx_runtime_1.jsx)(ProductCard_styled_1.StandartStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, { item: props, children: [hasDiscount && (0, jsx_runtime_1.jsx)(Badges_1.default, { size: "medium", left: (isMobile ? '16px' : '8px'), top: (isMobile ? '16px' : '8px'), title: "\u0130ndirimli" }), (0, jsx_runtime_1.jsx)("div", { className: "img", children: image }), (0, jsx_runtime_1.jsxs)("div", { className: "productCardContent", children: [(0, jsx_runtime_1.jsx)("strong", { className: (0, classnames_1.default)('productCardTitle', (isMobile ? 'headline-bold-18-22' : 'title-bold-16-19')), children: title }), (0, jsx_runtime_1.jsx)("p", { className: (0, classnames_1.default)('productCardDescription', (isMobile ? 'title-medium-16-19' : 'body-medium-14-17')), children: description }), (0, jsx_runtime_1.jsxs)("div", { className: "productCardPriceContent", children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('discountRate', (isMobile ? 'title-extra-bold-16-19' : 'body-extra-bold-13-16')), children: ["%", discountRate] }), (0, jsx_runtime_1.jsxs)("div", { children: [oldPrice && discountRate > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('oldPrice'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('price', (isMobile ? 'body-semi-bold-13-16' : 'caption-semi-bold-12-15')), children: oldPrice }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('period', 'caption-regular-12-15'), children: ["/ ", oldPricePeriod] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "newPrice", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('price', (isMobile ? 'title-extra-bold-16-19' : 'body-extra-bold-14-17')), children: price }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('period', (isMobile ? 'body-regular-14-17' : 'body-regular-13-16')), children: ["/ ", period] })] })] })] })] })] }) })));
 };
 exports.default = Standart;

package/package.json

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