krl-alfred 1.69.0 → 1.69.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    @media only screen and ", " {\n      background: #f1f1f1;\n    }\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        background-color: white;\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    @media only screen and ", " {\n      background: #f1f1f1;\n    }\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        background-color: white;\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, 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    @media only screen and ", " {\n      background: #f1f1f1;\n    }\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      img {\n        display: inline-block !important;\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 0;\n        text-align: center;\n        height: 228px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: white;\n        span {\n          height: 174px !important;\n        }\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    @media only screen and ", " {\n      background: #f1f1f1;\n    }\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      img {\n        display: inline-block !important;\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 0;\n        text-align: center;\n        height: 228px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: white;\n        span {\n          height: 174px !important;\n        }\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, devices_1.devices.lg);
 var templateObject_1;

package/dist/components/Banner/stories/Banner.stories.js

@@ -26,7 +26,7 @@ exports.Default = {
 exports.Layout2 = {
     args: {
         data: {
-            img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/extendOrderBanner.svg", height: "308px" }),
+            img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/extendOrderBanner.svg", height: "308px" }),
             title: "Kiralama s\u00FCreni uzat veya cihaz\u0131 sat\u0131n al",
             description: "Cihaz\u0131 daha uzun s\u00FCreli kullanmaya karar verirsen kolayca i\u015Flem yapabilirsin! Kiralaman\u0131n son g\u00FCn\u00FCne kadar dilersen kira s\u00FCreni sipari\u015Flerim panelinden kolayca uzatabilir veya \u2018kiralad\u0131\u011F\u0131m\u0131 sat\u0131n al\u2019 \u00F6zelli\u011Fiyle 2. el de\u011Ferinden sat\u0131n alabilirsin.",
         },
@@ -37,7 +37,7 @@ exports.Layout2 = {
 exports.Layout3 = {
     args: {
         data: {
-            img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/kiralama-uzat-main.png", height: "422px" }),
+            img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/kiralama-uzat-main.svg", height: "422px" }),
             title: "\u0130ster kira s\u00FCreni uzat, ister sat\u0131n al!",
             description: "Sipari\u015F s\u00FCrecin tamamland\u0131ktan sonra sipari\u015Flerim sayfandan kira s\u00FCreni kolayca uzatabilir veya denedikten sonra cihaz\u0131 sat\u0131n alabilirsin! \u00DCstelik dilersen kiralad\u0131\u011F\u0131n cihaz\u0131 2. el olarak sat\u0131n alabilir, dilersen de s\u0131f\u0131r cihaz sipari\u015Fi olu\u015Fturabilirsin. \u00D6nce Kiralars\u0131n, denedikten sonra istersen sat\u0131n al\u0131rs\u0131n!",
         },

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -24,16 +24,14 @@ var Breadcrumbs = function (props) {
         return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", { href: item.slug, children: children }));
     };
     (0, react_1.useEffect)(function () {
-        setTimeout(function () {
-            var _a, _b;
-            if (window && typeof window !== "undefined") {
-                var elem = (_a = window === null || window === void 0 ? void 0 : window.document) === null || _a === void 0 ? void 0 : _a.querySelector(".breadcrumbSm");
-                var activeItem = (_b = window === null || window === void 0 ? void 0 : window.document) === null || _b === void 0 ? void 0 : _b.querySelector(".breadcrumbSm li.active");
-                if (activeItem && elem) {
-                    elem.scrollLeft = activeItem.offsetLeft - 15;
-                }
+        var _a, _b;
+        if (window && typeof window !== "undefined") {
+            var elem = (_a = window === null || window === void 0 ? void 0 : window.document) === null || _a === void 0 ? void 0 : _a.querySelector(".breadcrumbSm");
+            var activeItem = (_b = window === null || window === void 0 ? void 0 : window.document) === null || _b === void 0 ? void 0 : _b.querySelector(".breadcrumbSm li.active");
+            if (activeItem && elem) {
+                elem.scrollLeft = activeItem.offsetLeft - 15;
             }
-        }, 100);
+        }
     }, [data]);
     var SubMenu = function (_a) {
         var data = _a.data, item = _a.item;

package/dist/components/Breadcrumbs/Breadcrumbs.styled.js

@@ -12,10 +12,10 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
 exports.BreadcrumbsWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display:block;\n  a {\n    text-decoration: none;\n    color: inherit;\n  }\n"], ["\n  display:block;\n  a {\n    text-decoration: none;\n    color: inherit;\n  }\n"])));
 exports.BreadcrumbsList = styled_components_1.default.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  padding: 0;\n  margin:0;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  padding: 0;\n  margin:0;\n"])));
-exports.BreadcrumbsListItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  margin: 0 0;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  @media only screen and ", " {\n    &:not(:nth-child(2)) {\n      display: none;\n    }\n  }\n  > a {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-family: inherit;\n  }\n  &:hover{\n    ul{\n      opacity: 1;\n      visibility: visible;\n      transform: translateY(0);\n    }\n    button {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n"], ["\n  position: relative;\n  margin: 0 0;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  @media only screen and ", " {\n    &:not(:nth-child(2)) {\n      display: none;\n    }\n  }\n  > a {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-family: inherit;\n  }\n  &:hover{\n    ul{\n      opacity: 1;\n      visibility: visible;\n      transform: translateY(0);\n    }\n    button {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n"])), devices_1.devices.md);
+exports.BreadcrumbsListItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  margin: 0 0;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  @media only screen and ", " {\n    &:not(:nth-child(2)) {\n      display: none;\n    }\n  }\n  > a {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-family: inherit;\n  }\n  &:hover{\n    ul{\n      opacity: 1;\n      visibility: visible;\n      transform: translateY(0);\n    }\n    button {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n"], ["\n  position: relative;\n  margin: 0 0;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  @media only screen and ", " {\n    &:not(:nth-child(2)) {\n      display: none;\n    }\n  }\n  > a {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-family: inherit;\n  }\n  &:hover{\n    ul{\n      opacity: 1;\n      visibility: visible;\n      transform: translateY(0);\n    }\n    button {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n"])), devices_1.devices.xl);
 exports.BreadcrumbsListItemInner = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  margin: 0;\n  display: block;\n  color: var(--dark-opacity-50);\n  max-width: 150px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  position: relative;\n  margin: 0;\n  display: block;\n  color: var(--dark-opacity-50);\n  max-width: 150px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
-exports.BreadcrumbsListItemIconWrapper = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  margin-left: 16px;\n  margin-right: 16px;\n\n  @media only screen and ", " {\n    display: none;\n  }\n  svg {\n    display: block;\n    path{\n      stroke:var(--dark-opacity-50);\n    }\n  }\n"], ["\n  display: block;\n  margin-left: 16px;\n  margin-right: 16px;\n\n  @media only screen and ", " {\n    display: none;\n  }\n  svg {\n    display: block;\n    path{\n      stroke:var(--dark-opacity-50);\n    }\n  }\n"])), devices_1.devices.md);
-exports.BreadcrumbsListItemBackIconWrapper = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-left: 0;\n  margin-right: 16px;\n  display: none;\n  @media only screen and ", " {\n    display: block;\n  }\n  svg {\n    display: block;\n  }\n"], ["\n  margin-left: 0;\n  margin-right: 16px;\n  display: none;\n  @media only screen and ", " {\n    display: block;\n  }\n  svg {\n    display: block;\n  }\n"])), devices_1.devices.md);
+exports.BreadcrumbsListItemIconWrapper = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  margin-left: 16px;\n  margin-right: 16px;\n\n  @media only screen and ", " {\n    display: none;\n  }\n  svg {\n    display: block;\n    path{\n      stroke:var(--dark-opacity-50);\n    }\n  }\n"], ["\n  display: block;\n  margin-left: 16px;\n  margin-right: 16px;\n\n  @media only screen and ", " {\n    display: none;\n  }\n  svg {\n    display: block;\n    path{\n      stroke:var(--dark-opacity-50);\n    }\n  }\n"])), devices_1.devices.xl);
+exports.BreadcrumbsListItemBackIconWrapper = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-left: 0;\n  margin-right: 16px;\n  display: none;\n  @media only screen and ", " {\n    display: block;\n  }\n  svg {\n    display: block;\n  }\n"], ["\n  margin-left: 0;\n  margin-right: 16px;\n  display: none;\n  @media only screen and ", " {\n    display: block;\n  }\n  svg {\n    display: block;\n  }\n"])), devices_1.devices.xl);
 exports.BreadcrumbsListDropdownWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n\n"])));
 exports.BreadcrumbsListDropdownOpener = styled_components_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--primary);\n  border-radius: 4px;\n  color: var(--primary);\n  padding: 0 8px;\n  background-color: white;\n  height: 24px;\n  cursor: pointer;\n  outline: none !important;\n  svg {\n    display: inline-block;\n    vertical-align: middle;\n    width: 16px;\n    height: 16px;\n    margin-left: 8px;\n    transition: all 0.2s ease-in-out;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--primary);\n  border-radius: 4px;\n  color: var(--primary);\n  padding: 0 8px;\n  background-color: white;\n  height: 24px;\n  cursor: pointer;\n  outline: none !important;\n  svg {\n    display: inline-block;\n    vertical-align: middle;\n    width: 16px;\n    height: 16px;\n    margin-left: 8px;\n    transition: all 0.2s ease-in-out;\n  }\n"])));
 exports.DropdownList = styled_components_1.default.ul(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  border: 1px solid var(--grey-10);\n  background: white;\n  z-index:5;\n  border-radius: 8px;\n  box-shadow: 0 6px 30px var(--grey-10);\n  display: grid;\n  padding: 8px;\n  grid-template-columns: repeat(\n    ", ",\n    154px\n  );\n  text-align: start;\n  gap: 0 16px;\n  position: absolute;\n  left: 48px;\n  top: calc(100% + 8px);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(10px);\n  transition: all 0.2s ease-in-out;\n"], ["\n  border: 1px solid var(--grey-10);\n  background: white;\n  z-index:5;\n  border-radius: 8px;\n  box-shadow: 0 6px 30px var(--grey-10);\n  display: grid;\n  padding: 8px;\n  grid-template-columns: repeat(\n    ", ",\n    154px\n  );\n  text-align: start;\n  gap: 0 16px;\n  position: absolute;\n  left: 48px;\n  top: calc(100% + 8px);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(10px);\n  transition: all 0.2s ease-in-out;\n"])), function (props) { return props.gridTemplateColumns || "3"; });
@@ -23,6 +23,6 @@ exports.SubCategoryItem = styled_components_1.default.li(templateObject_10 || (t
 exports.SubCategoryItemList = styled_components_1.default.ul(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: grid;\n  padding: 0;\n  gap: 4px 0;\n"], ["\n  display: grid;\n  padding: 0;\n  gap: 4px 0;\n"])));
 exports.SubCategoryItemListItem = styled_components_1.default.li(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: block;\n  padding: 0;\n  > a {\n    text-decoration: none;\n    color: var(--dark);\n    padding: 8px;\n    border-radius: 5px;\n    display: block;\n    ", "\n      background-color : var(--primary-opacity-10);\n      color: var(--primary);\n      font-weight: 700;\n    ", "\n    ", "\n  }\n"], ["\n  display: block;\n  padding: 0;\n  > a {\n    text-decoration: none;\n    color: var(--dark);\n    padding: 8px;\n    border-radius: 5px;\n    display: block;\n    ", "\n      background-color : var(--primary-opacity-10);\n      color: var(--primary);\n      font-weight: 700;\n    ", "\n    ", "\n  }\n"])), function (props) { return (props.isActive ? "" : "&:hover{"); }, function (props) { return (props.isActive ? "" : "}"); }, function (props) { return (props.isSeeAll ? "font-weight: 700;" : ""); });
 exports.BreadcrumbsListDropdownListItem = styled_components_1.default.li(templateObject_13 || (templateObject_13 = __makeTemplateObject([""], [""])));
-exports.SubMenuMobileWrapper = styled_components_1.default.ul(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  position: relative;\n  overflow: auto;\n  white-space: nowrap;\n  gap: 8px;\n  scroll-snap-type: x proximity;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  overflow-x: scroll;\n  padding: 2rem 15px 2rem 15px;\n  margin: 0 -15px 0 -15px;\n  display: none;\n  width: calc(100% + 30px);\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  &:empty {\n    padding: 2rem 15px 0.5rem 15px;\n  }\n  @media only screen and ", " {\n    display: flex;\n  }\n"], ["\n  position: relative;\n  overflow: auto;\n  white-space: nowrap;\n  gap: 8px;\n  scroll-snap-type: x proximity;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  overflow-x: scroll;\n  padding: 2rem 15px 2rem 15px;\n  margin: 0 -15px 0 -15px;\n  display: none;\n  width: calc(100% + 30px);\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  &:empty {\n    padding: 2rem 15px 0.5rem 15px;\n  }\n  @media only screen and ", " {\n    display: flex;\n  }\n"])), devices_1.devices.md);
+exports.SubMenuMobileWrapper = styled_components_1.default.ul(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  position: relative;\n  overflow: auto;\n  white-space: nowrap;\n  gap: 8px;\n  scroll-snap-type: x proximity;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  overflow-x: scroll;\n  padding: 2rem 15px 2rem 15px;\n  margin: 0 -15px 0 -15px;\n  display: none;\n  width: calc(100% + 30px);\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  &:empty {\n    padding: 2rem 15px 0.5rem 15px;\n  }\n  @media only screen and ", " {\n    display: flex;\n  }\n"], ["\n  position: relative;\n  overflow: auto;\n  white-space: nowrap;\n  gap: 8px;\n  scroll-snap-type: x proximity;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  overflow-x: scroll;\n  padding: 2rem 15px 2rem 15px;\n  margin: 0 -15px 0 -15px;\n  display: none;\n  width: calc(100% + 30px);\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  &:empty {\n    padding: 2rem 15px 0.5rem 15px;\n  }\n  @media only screen and ", " {\n    display: flex;\n  }\n"])), devices_1.devices.xl);
 exports.SubMenuMobileItem = styled_components_1.default.li(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: block;\n  a {\n    display: block;\n    padding: 0 24px;\n    height:40px;\n    line-height:38px;\n    background: #ffffff;\n    border: 1px solid ", ";\n    box-shadow: 0 6px 30px #eae9f0;\n    border-radius: 8px;\n    text-align: center;\n    box-sizing:border-box;\n    color: ", ";\n  }\n"], ["\n  display: block;\n  a {\n    display: block;\n    padding: 0 24px;\n    height:40px;\n    line-height:38px;\n    background: #ffffff;\n    border: 1px solid ", ";\n    box-shadow: 0 6px 30px #eae9f0;\n    border-radius: 8px;\n    text-align: center;\n    box-sizing:border-box;\n    color: ", ";\n  }\n"])), function (props) { return (props.isActive ? "var(--primary)" : "var(--grey-10)"); }, function (props) { return (props.isActive ? "var(--primary)" : "var(--dark-opacity-75)"); });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;

package/dist/components/{Assurance/Assurance.js → InsuranceBox/InsuranceBox.js}

@@ -4,18 +4,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var Assurance_styled_1 = require("./Assurance.styled");
+var InsuranceBox_styled_1 = require("./InsuranceBox.styled");
 var Checkbox_1 = __importDefault(require("../Checkbox"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var Tooltip_1 = __importDefault(require("../Tooltip"));
-var Assurance = function (props) {
+var InsuranceBox = function (props) {
     var popupWidth = props.popupWidth, disabled = props.disabled, hasBorder = props.hasBorder, hasBgColor = props.hasBgColor, priceText = props.priceText, onChange = props.onChange, width = props.width, isMobile = props.isMobile, checked = props.checked, height = props.height, tooltipTitle = props.tooltipTitle, tooltipDescription = props.tooltipDescription, tooltipPosition = props.tooltipPosition, isTitleWrap = props.isTitleWrap, hasCloseOnOutsideClick = props.hasCloseOnOutsideClick;
-    var AssuranceText = function () {
+    var InsuranceText = function () {
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h1", { className: "body-extra-bold-13-16", children: "Tamamlars\u0131n %100\u2019e Tamamlay\u0131c\u0131 Ek G\u00FCvence Paketi " }), (0, jsx_runtime_1.jsx)("p", { className: "caption-medium-11-13", children: "Tamamlars\u0131n, kira s\u00FCreniz boyunca cihaz\u0131n\u0131za ek g\u00FCvence sa\u011Flar. Ek g\u00FCvence kapsam\u0131nda cihaz\u0131n\u0131z de\u011Fi\u015Ftirilir veya \u00FCcretsiz onar\u0131l\u0131r. Ek g\u00FCvenceli kiralamalarda kira s\u00FCrenizi uzat\u0131rken, yeni kira s\u00FCresine ait ek g\u00FCvenceniz otomatik olarak sepete eklenir. Ek g\u00FCvencesiz yap\u0131lan kiralamalarda, s\u00FCre uzat\u0131m\u0131 s\u0131ras\u0131nda sonradan ek g\u00FCvence eklenemez." }), (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsx)("li", { className: "caption-medium-11-13", children: "D\u00FC\u015Fme, \u00E7arpma gibi kazalarda olu\u015Fan hasarlar" }), (0, jsx_runtime_1.jsx)("li", { className: "caption-medium-11-13", children: "S\u0131v\u0131 temas\u0131" }), (0, jsx_runtime_1.jsx)("li", { className: "caption-medium-11-13", children: "Ekran vb par\u00E7a k\u0131r\u0131lmalar\u0131" }), (0, jsx_runtime_1.jsx)("li", { className: "caption-medium-11-13", children: "\u00C7izilmeler" }), (0, jsx_runtime_1.jsx)("li", { className: "caption-medium-11-13", children: "Kutu hasarlar\u0131" }), (0, jsx_runtime_1.jsx)("li", { className: "caption-medium-11-13", children: "K\u0131sa devre, voltaj nedeniyle olu\u015Fabilecek sorunlar" }), (0, jsx_runtime_1.jsx)("li", { className: "caption-medium-11-13", children: "Hatal\u0131 aksesuar kullan\u0131m\u0131 sorunlar\u0131" })] }), (0, jsx_runtime_1.jsxs)("p", { className: "caption-medium-11-13", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Uyar\u0131:" }), " Kay\u0131p, \u00E7al\u0131nma, kas\u0131tl\u0131 zarar verme, onar\u0131lamaz duruma getirme, cihaz\u0131n kutusunu kaybetme gibi durumlarda ve 5.000 TL\u2019yi a\u015Fan hasarlarda ek g\u00FCvence paketi ge\u00E7erli de\u011Fildir."] })] }));
     };
-    return ((0, jsx_runtime_1.jsxs)(Assurance_styled_1.AssuranceStyled, { hasBorder: hasBorder, hasBgColor: hasBgColor, width: width, height: height, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { disabled: disabled, onChange: onChange, checked: checked, size: "medium" }) }), (0, jsx_runtime_1.jsxs)(Assurance_styled_1.InnerWrapper, { children: [(0, jsx_runtime_1.jsx)(Assurance_styled_1.Logo, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Tamamlarsin", width: isMobile ? "116px" : "64.51px", height: isMobile ? "13.25px" : "7.37px" }) }), (0, jsx_runtime_1.jsxs)(Assurance_styled_1.DescriptionWrapper, { children: [(0, jsx_runtime_1.jsxs)(Assurance_styled_1.Description, { className: "caption-semi-bold-12-15", children: ["Hasar g\u00FCvenceni %100\u2019e ", isTitleWrap && (0, jsx_runtime_1.jsx)("br", {}), "tamamlars\u0131n! ", (0, jsx_runtime_1.jsx)("b", { className: "body-extra-bold-13-16", children: priceText })] }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { title: tooltipTitle, position: tooltipPosition, hasCloseOnOutsideClick: hasCloseOnOutsideClick, hasClickAction: true, popupWidth: popupWidth, iconWidth: "24px", iconHeight: "24px", children: tooltipDescription || ((0, jsx_runtime_1.jsx)(Assurance_styled_1.TooltipDescription, { children: (0, jsx_runtime_1.jsx)(AssuranceText, {}) })) })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.InsuranceBoxStyled, { hasBorder: hasBorder, hasBgColor: hasBgColor, width: width, height: height, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { disabled: disabled, onChange: onChange, checked: checked, size: "medium" }) }), (0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.InnerWrapper, { children: [(0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.Logo, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Tamamlarsin", width: isMobile ? "116px" : "64.51px", height: isMobile ? "13.25px" : "7.37px" }) }), (0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.DescriptionWrapper, { children: [(0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.Description, { className: "caption-semi-bold-12-15", children: ["Hasar g\u00FCvenceni %100\u2019e ", isTitleWrap && (0, jsx_runtime_1.jsx)("br", {}), "tamamlars\u0131n! ", (0, jsx_runtime_1.jsx)("b", { className: "body-extra-bold-13-16", children: priceText })] }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { title: tooltipTitle, position: tooltipPosition, hasCloseOnOutsideClick: hasCloseOnOutsideClick, hasClickAction: true, popupWidth: popupWidth, iconWidth: "24px", iconHeight: "24px", children: tooltipDescription || ((0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.TooltipDescription, { children: (0, jsx_runtime_1.jsx)(InsuranceText, {}) })) })] })] })] }));
 };
-Assurance.defaultProps = {
+InsuranceBox.defaultProps = {
     height: "90px",
     checked: false,
     isTitleWrap: true,
@@ -25,4 +25,4 @@ Assurance.defaultProps = {
     tooltipPosition: "topCenter",
     popupWidth: "351px"
 };
-exports.default = Assurance;
+exports.default = InsuranceBox;

package/dist/components/{Assurance/Assurance.styled.js → InsuranceBox/InsuranceBox.styled.js}

@@ -7,10 +7,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TooltipDescription = exports.Description = exports.Logo = exports.DescriptionWrapper = exports.InnerWrapper = exports.AssuranceStyled = void 0;
+exports.TooltipDescription = exports.Description = exports.Logo = exports.DescriptionWrapper = exports.InnerWrapper = exports.InsuranceBoxStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.AssuranceStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0 1.5rem;\n  height: ", ";\n  background: ", ";\n  border: ", ";\n  border-radius: 8px;\n  width: ", ";\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  @media only screen and ", " {\n    padding: 1rem;\n    height: auto;\n    align-items: flex-start;\n  }\n"], ["\n  padding: 0 1.5rem;\n  height: ", ";\n  background: ", ";\n  border: ", ";\n  border-radius: 8px;\n  width: ", ";\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  @media only screen and ", " {\n    padding: 1rem;\n    height: auto;\n    align-items: flex-start;\n  }\n"])), function (props) { return props.height; }, function (props) { return props.hasBgColor ? 'var(--primary-opacity-5)' : '#fff'; }, function (props) { return props.hasBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.width ? props.width : "466px"; }, devices_1.devices.md);
+exports.InsuranceBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0 1.5rem;\n  height: ", ";\n  background: ", ";\n  border: ", ";\n  border-radius: 8px;\n  width: ", ";\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  box-sizing: border-box;\n  @media only screen and ", " {\n    padding: 1rem;\n    height: auto;\n    align-items: flex-start;\n  }\n"], ["\n  padding: 0 1.5rem;\n  height: ", ";\n  background: ", ";\n  border: ", ";\n  border-radius: 8px;\n  width: ", ";\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  box-sizing: border-box;\n  @media only screen and ", " {\n    padding: 1rem;\n    height: auto;\n    align-items: flex-start;\n  }\n"])), function (props) { return props.height; }, function (props) { return props.hasBgColor ? 'var(--primary-opacity-5)' : '#fff'; }, function (props) { return props.hasBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.width ? props.width : "466px"; }, devices_1.devices.md);
 exports.InnerWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  @media only screen and ", " {\n    grid-template-columns: 1fr;\n  }\n"], ["\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  @media only screen and ", " {\n    grid-template-columns: 1fr;\n  }\n"])), devices_1.devices.md);
 exports.DescriptionWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  @media only screen and ", " {\n    margin-top: 18px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  @media only screen and ", " {\n    margin-top: 18px;\n  }\n"])), devices_1.devices.md);
 exports.Logo = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: white;\n  width: 80px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 0.5rem;\n  border: 1px solid var(--dark-opacity-5);\n  svg{\n    display: block;\n  }\n  @media only screen and ", " {\n    display: block;\n    background-color: transparent;\n    width: auto;\n    height: auto;\n    border: 0;\n    border-radius: 0;\n    margin-top: 6px;\n  }\n"], ["\n  background-color: white;\n  width: 80px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 0.5rem;\n  border: 1px solid var(--dark-opacity-5);\n  svg{\n    display: block;\n  }\n  @media only screen and ", " {\n    display: block;\n    background-color: transparent;\n    width: auto;\n    height: auto;\n    border: 0;\n    border-radius: 0;\n    margin-top: 6px;\n  }\n"])), devices_1.devices.md);

package/dist/components/{Assurance → InsuranceBox}/index.js

@@ -4,5 +4,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
-var Assurance_1 = require("./Assurance");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Assurance_1).default; } });
+var InsuranceBox_1 = require("./InsuranceBox");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(InsuranceBox_1).default; } });

package/dist/components/{Assurance/stories/Assurance.stories.js → InsuranceBox/stories/InsuranceBox.stories.js}

@@ -16,12 +16,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var Assurance_1 = __importDefault(require("../Assurance"));
+var InsuranceBox_1 = __importDefault(require("../InsuranceBox"));
 var props_1 = require("../../Tooltip/props");
 exports.default = {
-    title: 'Components/Assurance',
-    //component: (props) => <div style={{margin : "15rem 0 0 11rem", display:"block"}}><Assurance {...props}/></div>,
-    component: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { margin: "15rem 0 0 0", display: "block" }, children: (0, jsx_runtime_1.jsx)(Assurance_1.default, __assign({}, props)) }); },
+    title: 'Components/InsuranceBox',
+    component: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { margin: "15rem 0 0 0", display: "block" }, children: (0, jsx_runtime_1.jsx)(InsuranceBox_1.default, __assign({}, props)) }); },
     tags: ['autodocs'],
     argTypes: {
         checked: { control: 'boolean' },

package/dist/components/ListGroup/ListGroup.js

@@ -5,7 +5,7 @@ var ListGroup_styled_1 = require("./ListGroup.styled");
 var ListGroup = function (props) {
     var data = props.data;
     return ((0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupStyled, { children: data === null || data === void 0 ? void 0 : data.map(function (item, key) {
-            return (0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupItem, { children: (0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupItemButton, { isActive: item.isActive, onClick: item.onClick, className: "headline-bold-18-22", children: item.title }) }, key);
+            return (0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupItem, { children: (0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupItemButton, { isActive: item.isActive, onClick: item.onClick, className: "title-bold-16-19", children: item.title }) }, key);
         }) }));
 };
 ListGroup.defaultProps = {};

package/dist/components/ListGroup/ListGroup.styled.js

@@ -11,5 +11,5 @@ exports.ListGroupItemButton = exports.ListGroupItem = exports.ListGroupStyled =
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.ListGroupStyled = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  padding: 0;\n  margin: 0;\n"], ["\n  display: block;\n  padding: 0;\n  margin: 0;\n"])));
 exports.ListGroupItem = styled_components_1.default.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 0;\n  margin: 0; \n  display: block;\n  + li {\n    margin-top: 1rem;\n  }\n"], ["\n  padding: 0;\n  margin: 0; \n  display: block;\n  + li {\n    margin-top: 1rem;\n  }\n"])));
-exports.ListGroupItemButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 0 1.5rem;\n  margin: 0;\n  height: 70px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: 0.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  color: ", ";\n  border: 0;\n  width: 100%;\n  font-family: inherit;\n  position: relative;\n  outline: none;\n  &:before{\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    user-select: none;\n    pointer-events: none;\n    border-radius: inherit;\n    border: ", " ;\n  }\n"], ["\n  padding: 0 1.5rem;\n  margin: 0;\n  height: 70px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: 0.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  color: ", ";\n  border: 0;\n  width: 100%;\n  font-family: inherit;\n  position: relative;\n  outline: none;\n  &:before{\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    user-select: none;\n    pointer-events: none;\n    border-radius: inherit;\n    border: ", " ;\n  }\n"])), function (props) { return props.isActive ? "#fff" : "var(--dark-opacity-3)"; }, function (props) { return props.isActive ? "var(--primary)" : "var(--dark)"; }, function (props) { return props.isActive ? "2px solid var(--primary)" : "none"; });
+exports.ListGroupItemButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 0 1.5rem;\n  margin: 0;\n  height: 67px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: 0.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  color: ", ";\n  border: 0;\n  width: 100%;\n  font-family: inherit;\n  position: relative;\n  outline: none;\n  &:before{\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    user-select: none;\n    pointer-events: none;\n    border-radius: inherit;\n    border: ", " ;\n  }\n"], ["\n  padding: 0 1.5rem;\n  margin: 0;\n  height: 67px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: 0.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  color: ", ";\n  border: 0;\n  width: 100%;\n  font-family: inherit;\n  position: relative;\n  outline: none;\n  &:before{\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    user-select: none;\n    pointer-events: none;\n    border-radius: inherit;\n    border: ", " ;\n  }\n"])), function (props) { return props.isActive ? "#fff" : "var(--dark-opacity-3)"; }, function (props) { return props.isActive ? "var(--primary)" : "var(--dark)"; }, function (props) { return props.isActive ? "2px solid var(--primary)" : "none"; });
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -11,7 +11,7 @@ exports.HorizontalSmStyled = exports.HorizontalStyled = exports.StandartStyled =
 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.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\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: ", ";\n    box-sizing: border-box;\n    z-index: 1;\n    text-align: center;\n\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\n    .productCardPriceContent {\n      display: grid;\n      align-items: ", ";\n      justify-content: flex-start;\n      height: ", ";\n      grid-template-columns: ", ";\n\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\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\n        .price, .period {\n          text-decoration: line-through;\n        }\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\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: ", ";\n    box-sizing: border-box;\n    z-index: 1;\n    text-align: center;\n\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\n    .productCardPriceContent {\n      display: grid;\n      align-items: ", ";\n      justify-content: flex-start;\n      height: ", ";\n      grid-template-columns: ", ";\n\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\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\n        .price, .period {\n          text-decoration: line-through;\n        }\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.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\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: ", ";\n    box-sizing: border-box;\n    z-index: 1;\n    text-align: center;\n\n    > * {\n      width: 100%;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%,-50%);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n  .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\n    .productCardPriceContent {\n      display: grid;\n      align-items: ", ";\n      justify-content: flex-start;\n      height: ", ";\n      grid-template-columns: ", ";\n\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\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\n        .price, .period {\n          text-decoration: line-through;\n        }\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\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: ", ";\n    box-sizing: border-box;\n    z-index: 1;\n    text-align: center;\n\n    > * {\n      width: 100%;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%,-50%);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n  .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\n    .productCardPriceContent {\n      display: grid;\n      align-items: ", ";\n      justify-content: flex-start;\n      height: ", ";\n      grid-template-columns: ", ";\n\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\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\n        .price, .period {\n          text-decoration: line-through;\n        }\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\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    }\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\n    .priceContent {\n      display: flex;\n      align-items: end;\n      justify-content: flex-start;\n\n      .price {\n        margin-right: 2px;\n      }\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\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    }\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\n    .priceContent {\n      display: flex;\n      align-items: end;\n      justify-content: flex-start;\n\n      .price {\n        margin-right: 2px;\n      }\n\n      .period {\n\n      }\n    }\n  }\n"])), devices_1.devices.sm);
 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: 0.5rem;\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      }\n    }\n\n    .priceContent {\n      text-align: end;\n\n      .period {\n        display: block;\n        margin-bottom: 4px;\n      }\n\n      .price {\n        display: block;\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: 0.5rem;\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      }\n    }\n\n    .priceContent {\n      text-align: end;\n\n      .period {\n        display: block;\n        margin-bottom: 4px;\n      }\n\n      .price {\n        display: block;\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'; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/SearchBox/SearchBox.js

@@ -4,15 +4,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var SearchBox_styled_1 = require("./SearchBox.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var Spinner_1 = __importDefault(require("../Spinner"));
 var SearchBox = function (props) {
+    var _a;
     var onKeyUp = props.onKeyUp, onBlur = props.onBlur, onFocus = props.onFocus, children = props.children, isLoading = props.isLoading, showResultList = props.showResultList, placeholder = props.placeholder;
+    var _b = (0, react_1.useState)("48px"), shadowHeight = _b[0], setShadowHeight = _b[1];
     var LoadingContent = function () {
         return (0, jsx_runtime_1.jsx)(SearchBox_styled_1.LoadingStyled, { children: (0, jsx_runtime_1.jsx)(Spinner_1.default, { variant: "primary", width: "32px", height: "32px" }) });
     };
-    return ((0, jsx_runtime_1.jsxs)(SearchBox_styled_1.SearchBoxStyled, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "inputWrapper", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: placeholder, onKeyUp: onKeyUp, onBlur: onBlur, onFocus: onFocus }), (0, jsx_runtime_1.jsx)("div", { className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", width: "16px", height: "16px" }) })] }), showResultList && ((0, jsx_runtime_1.jsx)("div", { className: "resultList", children: isLoading ? (0, jsx_runtime_1.jsx)(LoadingContent, {}) : children }))] }));
+    var resultRef = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
+        var _a, _b;
+        if (((_a = resultRef === null || resultRef === void 0 ? void 0 : resultRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) && showResultList) {
+            setShadowHeight((50 + ((_b = resultRef === null || resultRef === void 0 ? void 0 : resultRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)) + "px");
+        }
+        else {
+            setShadowHeight("48px");
+        }
+    }, [(_a = resultRef === null || resultRef === void 0 ? void 0 : resultRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight, showResultList, isLoading]);
+    return ((0, jsx_runtime_1.jsxs)(SearchBox_styled_1.SearchBoxStyled, { shadowHeight: shadowHeight, children: [(0, jsx_runtime_1.jsx)("div", { className: "shadow" }), (0, jsx_runtime_1.jsxs)("div", { className: "inputWrapper", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: placeholder, onKeyUp: onKeyUp, onBlur: onBlur, onFocus: onFocus }), (0, jsx_runtime_1.jsx)("div", { className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", width: "16px", height: "16px" }) })] }), showResultList && ((0, jsx_runtime_1.jsx)("div", { ref: resultRef, className: "resultList", children: isLoading ? (0, jsx_runtime_1.jsx)(LoadingContent, {}) : children }))] }));
 };
 SearchBox.defaultProps = {
     showResultList: false,

package/dist/components/SearchBox/SearchBox.styled.js

@@ -10,6 +10,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoadingStyled = exports.SearchBoxStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.SearchBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  .inputWrapper {\n    position: relative;\n    z-index: 5;\n    box-shadow: 0 6px 30px 0 var(--dark-opacity-10);\n    input {\n      box-sizing: border-box;\n      width: 100%;\n      height: 48px;\n      background: white;\n      border-radius: 8px;\n      border: 1px solid var(--dark-opacity-10);\n      padding: 8px 24px;\n      color: var(--dark);\n      font-family: inherit;\n      font-style: normal;\n      font-weight: 500;\n      font-size: 14px;\n      line-height: normal;\n      outline: none;\n\n      &::placeholder {\n        color: var(--dark-opacity-50);\n      }\n    }\n    @media only screen and ", " {\n      box-shadow: 0 0 16px 0 var(--dark-opacity-10) !important;\n      border-radius: 8px;\n    }\n    .icon {\n      position: absolute;\n      right: 1rem;\n      top: 50%;\n      transform: translateY(-50%);\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      svg {\n        path, circle {\n          stroke: var(--primary);\n        }\n      }\n    }\n  }\n\n  .resultList {\n    border: 1px solid var(--dark-opacity-10);\n    padding: 1.5rem;\n    border-radius: 8px;\n    background: white;\n    max-height: 408px;\n    box-sizing: border-box;\n    overflow: auto;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 4;\n    display: grid;\n    row-gap: 1.5rem;\n    box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n    @media only screen and ", " {\n      row-gap: 0.5rem;\n      max-height: 326px;\n    }\n  }\n"], ["\n  position: relative;\n  .inputWrapper {\n    position: relative;\n    z-index: 5;\n    box-shadow: 0 6px 30px 0 var(--dark-opacity-10);\n    input {\n      box-sizing: border-box;\n      width: 100%;\n      height: 48px;\n      background: white;\n      border-radius: 8px;\n      border: 1px solid var(--dark-opacity-10);\n      padding: 8px 24px;\n      color: var(--dark);\n      font-family: inherit;\n      font-style: normal;\n      font-weight: 500;\n      font-size: 14px;\n      line-height: normal;\n      outline: none;\n\n      &::placeholder {\n        color: var(--dark-opacity-50);\n      }\n    }\n    @media only screen and ", " {\n      box-shadow: 0 0 16px 0 var(--dark-opacity-10) !important;\n      border-radius: 8px;\n    }\n    .icon {\n      position: absolute;\n      right: 1rem;\n      top: 50%;\n      transform: translateY(-50%);\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      svg {\n        path, circle {\n          stroke: var(--primary);\n        }\n      }\n    }\n  }\n\n  .resultList {\n    border: 1px solid var(--dark-opacity-10);\n    padding: 1.5rem;\n    border-radius: 8px;\n    background: white;\n    max-height: 408px;\n    box-sizing: border-box;\n    overflow: auto;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 4;\n    display: grid;\n    row-gap: 1.5rem;\n    box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n    @media only screen and ", " {\n      row-gap: 0.5rem;\n      max-height: 326px;\n    }\n  }\n"])), devices_1.devices.xl, devices_1.devices.xl);
+exports.SearchBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  .shadow{\n    height: ", "; \n    position: absolute;\n    width: calc(100% - 10px);\n    left: 50%;\n    transform: translateX(-50%);\n    border-radius: 8px;\n    box-shadow: 0 6px 30px 0 var(--dark-opacity-10);\n    @media only screen and ", " {\n      box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n    }\n  }\n  .inputWrapper {\n    position: relative;\n    z-index: 5;\n    border-radius: 8px;\n    input {\n      box-sizing: border-box;\n      width: 100%;\n      height: 48px;\n      background: white;\n      border-radius: 8px;\n      border: 1px solid var(--dark-opacity-10);\n      padding: 8px 24px;\n      color: var(--dark);\n      font-family: inherit;\n      font-style: normal;\n      font-weight: 500;\n      font-size: 14px;\n      line-height: normal;\n      outline: none;\n\n      &::placeholder {\n        color: var(--dark-opacity-50);\n      }\n    }\n    .icon {\n      position: absolute;\n      right: 1rem;\n      top: 50%;\n      transform: translateY(-50%);\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      svg {\n        path, circle {\n          stroke: var(--primary);\n        }\n      }\n    }\n  }\n\n  .resultList {\n    border: 1px solid var(--dark-opacity-10);\n    padding: 1.5rem;\n    border-radius: 8px;\n    background: white;\n    max-height: 408px;\n    box-sizing: border-box;\n    overflow: auto;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 4;\n    display: grid;\n    row-gap: 1.5rem;\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    //box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n    @media only screen and ", " {\n      row-gap: 0.5rem;\n      max-height: 326px;\n    }\n  }\n"], ["\n  position: relative;\n  .shadow{\n    height: ", "; \n    position: absolute;\n    width: calc(100% - 10px);\n    left: 50%;\n    transform: translateX(-50%);\n    border-radius: 8px;\n    box-shadow: 0 6px 30px 0 var(--dark-opacity-10);\n    @media only screen and ", " {\n      box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n    }\n  }\n  .inputWrapper {\n    position: relative;\n    z-index: 5;\n    border-radius: 8px;\n    input {\n      box-sizing: border-box;\n      width: 100%;\n      height: 48px;\n      background: white;\n      border-radius: 8px;\n      border: 1px solid var(--dark-opacity-10);\n      padding: 8px 24px;\n      color: var(--dark);\n      font-family: inherit;\n      font-style: normal;\n      font-weight: 500;\n      font-size: 14px;\n      line-height: normal;\n      outline: none;\n\n      &::placeholder {\n        color: var(--dark-opacity-50);\n      }\n    }\n    .icon {\n      position: absolute;\n      right: 1rem;\n      top: 50%;\n      transform: translateY(-50%);\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      svg {\n        path, circle {\n          stroke: var(--primary);\n        }\n      }\n    }\n  }\n\n  .resultList {\n    border: 1px solid var(--dark-opacity-10);\n    padding: 1.5rem;\n    border-radius: 8px;\n    background: white;\n    max-height: 408px;\n    box-sizing: border-box;\n    overflow: auto;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 4;\n    display: grid;\n    row-gap: 1.5rem;\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    //box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n    @media only screen and ", " {\n      row-gap: 0.5rem;\n      max-height: 326px;\n    }\n  }\n"])), function (props) { return props.shadowHeight; }, devices_1.devices.xl, devices_1.devices.xl);
 exports.LoadingStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n"], ["\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n"])));
 var templateObject_1, templateObject_2;

package/dist/components/Toast/Toast.styled.js

@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OverlayStyled = exports.ToastStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.ToastStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: white;\n  border-radius: 8px;\n  box-sizing: border-box;\n  max-width: calc(100vw - 2rem);\n  padding: 2rem;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  min-height: ", ";\n  > div{\n    width: 100%;\n  }\n\n\n  .icon{\n\n    width: ", ";\n\n    height: ", ";\n    border-radius: 50%;\n    background-color: var(--primary);\n    text-align: center;\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    margin: 0 auto;\n    svg{\n\n      width: ", ";\n\n      height: ", ";\n      path{\n        fill: #fff;\n      }\n    }\n  }\n\n  .title {\n    margin: 2rem 0 0 0;\n    padding: 0;\n  }\n  \n  .content {\n    margin: 2rem 0 0 0;\n    &:is(:empty){\n      display: none;\n    }\n  }\n  .bottom{\n    margin: 2rem 0 0 0;\n    text-align: center;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n"], ["\n  background: white;\n  border-radius: 8px;\n  box-sizing: border-box;\n  max-width: calc(100vw - 2rem);\n  padding: 2rem;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  min-height: ", ";\n  > div{\n    width: 100%;\n  }\n\n\n  .icon{\n\n    width: ", ";\n\n    height: ", ";\n    border-radius: 50%;\n    background-color: var(--primary);\n    text-align: center;\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    margin: 0 auto;\n    svg{\n\n      width: ", ";\n\n      height: ", ";\n      path{\n        fill: #fff;\n      }\n    }\n  }\n\n  .title {\n    margin: 2rem 0 0 0;\n    padding: 0;\n  }\n  \n  .content {\n    margin: 2rem 0 0 0;\n    &:is(:empty){\n      display: none;\n    }\n  }\n  .bottom{\n    margin: 2rem 0 0 0;\n    text-align: center;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n"])), function (props) {
+exports.ToastStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: white;\n  border-radius: 8px;\n  box-sizing: border-box;\n  max-width: calc(100vw - 2rem);\n  padding: 2rem;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  min-height: ", ";\n  > div{\n    width: 100%;\n  }\n\n\n  .icon{\n\n    width: ", ";\n\n    height: ", ";\n    border-radius: 50%;\n    background-color: var(--primary);\n    text-align: center;\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    margin: 0 auto 2rem auto;\n    svg{\n\n      width: ", ";\n\n      height: ", ";\n      path{\n        fill: #fff;\n      }\n    }\n  }\n\n  .title {\n    margin: 2rem 0 0 0;\n    padding: 0;\n  }\n  \n  .content {\n    margin: 0 0 0 0;\n    &:is(:empty){\n      display: none;\n    }\n  }\n  .bottom{\n    margin: 2rem 0 0 0;\n    text-align: center;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n"], ["\n  background: white;\n  border-radius: 8px;\n  box-sizing: border-box;\n  max-width: calc(100vw - 2rem);\n  padding: 2rem;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  min-height: ", ";\n  > div{\n    width: 100%;\n  }\n\n\n  .icon{\n\n    width: ", ";\n\n    height: ", ";\n    border-radius: 50%;\n    background-color: var(--primary);\n    text-align: center;\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    margin: 0 auto 2rem auto;\n    svg{\n\n      width: ", ";\n\n      height: ", ";\n      path{\n        fill: #fff;\n      }\n    }\n  }\n\n  .title {\n    margin: 2rem 0 0 0;\n    padding: 0;\n  }\n  \n  .content {\n    margin: 0 0 0 0;\n    &:is(:empty){\n      display: none;\n    }\n  }\n  .bottom{\n    margin: 2rem 0 0 0;\n    text-align: center;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n"])), function (props) {
     switch (props.size) {
         case 'small':
             return "249px";

package/dist/components/Tooltip/Tooltip.js

@@ -16,7 +16,7 @@ var Tooltip = function (props) {
     }, [isOpen]);
     var tooltipRef = (0, react_1.useRef)();
     (0, useOnClickOutside_1.default)(tooltipRef, function () { return setIsOpenTooltip(false); }, hasCloseOnOutsideClick);
-    return ((0, jsx_runtime_1.jsxs)(Tooltip_styled_1.TooltipStyled, { ref: tooltipRef, hasClickAction: hasClickAction, children: [(0, jsx_runtime_1.jsx)(Tooltip_styled_1.Selector, { hasClickAction: hasClickAction, onClick: function () { return setIsOpenTooltip(!isOpenTooltip); }, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "InfoSquare", width: iconWidth, height: iconHeight }) }), (0, jsx_runtime_1.jsxs)(Tooltip_styled_1.Popup, { position: position, popupWidth: popupWidth, isOpen: isOpenTooltip, hasClickAction: hasClickAction, className: "caption-medium-11-13", children: [title && (0, jsx_runtime_1.jsx)(Tooltip_styled_1.Title, { className: "body-extra-bold-13-16", children: title }), children] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Tooltip_styled_1.TooltipStyled, { ref: tooltipRef, hasClickAction: hasClickAction, children: [(0, jsx_runtime_1.jsx)(Tooltip_styled_1.Selector, { hasClickAction: hasClickAction, onClick: function () { return setIsOpenTooltip(!isOpenTooltip); }, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "InfoSquare", width: iconWidth, height: iconHeight }) }), (0, jsx_runtime_1.jsxs)(Tooltip_styled_1.Popup, { iconWidth: iconWidth, position: position, popupWidth: popupWidth, isOpen: isOpenTooltip, hasClickAction: hasClickAction, className: "caption-medium-11-13", children: [title && (0, jsx_runtime_1.jsx)(Tooltip_styled_1.Title, { className: "body-extra-bold-13-16", children: title }), children] })] }));
 };
 Tooltip.defaultProps = {
     iconWidth: "16px",

package/dist/components/Tooltip/Tooltip.styled.js

@@ -13,37 +13,37 @@ var devices_1 = require("../../constants/devices");
 exports.TooltipStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  position: relative;\n  vertical-align: middle;\n  color: var(--dark);\n  ", "\n"], ["\n  display: block;\n  position: relative;\n  vertical-align: middle;\n  color: var(--dark);\n  ", "\n"])), function (props) { return !props.hasClickAction && "\n      &:hover {\n        > div {\n          opacity: 1;\n        }\n      }\n  "; });
 exports.Selector = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  cursor: ", ";\n\n  svg {\n    display: block;\n\n    path {\n      stroke: var(--primary);\n    }\n  }\n"], ["\n  display: block;\n  cursor: ", ";\n\n  svg {\n    display: block;\n\n    path {\n      stroke: var(--primary);\n    }\n  }\n"])), function (props) { return props.hasClickAction ? 'pointer' : 'initial'; });
 exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n  margin-bottom: 0.5rem;\n"], ["\n  display: block;\n  margin-bottom: 0.5rem;\n"])));
-exports.Popup = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\n  position: absolute;\n  width: ", ";\n  padding: 1rem;\n  border-radius: 0.5rem;\n  background-color: var(--primary-opacity-10);\n  z-index: 99999;\n  ", ";\n  user-select: none;\n  pointer-events: none;\n  transition: all 0.15s ease;\n  opacity: ", ";\n\n  @media only screen and ", " {\n    left: auto;\n    transform: none;\n    right: -1.5rem;\n    &:before {\n      left: auto !important;\n      transform: rotate(45deg) !important;\n      right: 1.9rem !important;\n    }\n  }\n\n  &:before {\n    content: '';\n    position: absolute;\n\n    ", ";\n    background-color: var(--primary-opacity-10);\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n  }\n"], ["\n\n  position: absolute;\n  width: ", ";\n  padding: 1rem;\n  border-radius: 0.5rem;\n  background-color: var(--primary-opacity-10);\n  z-index: 99999;\n  ", ";\n  user-select: none;\n  pointer-events: none;\n  transition: all 0.15s ease;\n  opacity: ", ";\n\n  @media only screen and ", " {\n    left: auto;\n    transform: none;\n    right: -1.5rem;\n    &:before {\n      left: auto !important;\n      transform: rotate(45deg) !important;\n      right: 1.9rem !important;\n    }\n  }\n\n  &:before {\n    content: '';\n    position: absolute;\n\n    ", ";\n    background-color: var(--primary-opacity-10);\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n  }\n"])), function (props) { return props.popupWidth ? props.popupWidth : "151px"; }, function (props) {
+exports.Popup = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\n  position: absolute;\n  width: ", ";\n  padding: 1rem;\n  border-radius: 0.5rem;\n  background-color: var(--primary-opacity-10);\n  z-index: 99999;\n  box-sizing: border-box;\n  ", ";\n  user-select: none;\n  pointer-events: none;\n  transition: all 0.15s ease;\n  opacity: ", ";\n\n  @media only screen and ", " {\n    left: auto;\n    transform: none;\n    right: -1.5rem;\n    &:before {\n      left: auto !important;\n      transform: rotate(45deg) !important;\n      right: ", " !important;\n    }\n  }\n\n  &:before {\n    content: '';\n    position: absolute;\n\n    ", ";\n    background-color: var(--primary-opacity-10);\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n  }\n"], ["\n\n  position: absolute;\n  width: ", ";\n  padding: 1rem;\n  border-radius: 0.5rem;\n  background-color: var(--primary-opacity-10);\n  z-index: 99999;\n  box-sizing: border-box;\n  ", ";\n  user-select: none;\n  pointer-events: none;\n  transition: all 0.15s ease;\n  opacity: ", ";\n\n  @media only screen and ", " {\n    left: auto;\n    transform: none;\n    right: -1.5rem;\n    &:before {\n      left: auto !important;\n      transform: rotate(45deg) !important;\n      right: ", " !important;\n    }\n  }\n\n  &:before {\n    content: '';\n    position: absolute;\n\n    ", ";\n    background-color: var(--primary-opacity-10);\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n  }\n"])), function (props) { return props.popupWidth ? props.popupWidth : "151px"; }, function (props) {
     switch (props.position) {
         case 'bottomRight':
-            return "\n          right: -0.5rem;\n          top: calc(100% + 10px);\n        ";
+            return "\n          right: -22px;\n          top: calc(100% + 10px);\n        ";
         case 'bottomCenter':
             return "\n          left: 50%;\n          top: calc(100% + 10px);\n          transform: translateX(-50%);\n        ";
         case 'bottomLeft':
-            return "\n          left: 0;\n          top: calc(100% + 10px);\n        ";
+            return "\n          left: -22px;\n          top: calc(100% + 10px);\n        ";
         case 'topRight':
-            return "\n          right: -0.5rem;\n          bottom: calc(100% + 10px);\n        ";
+            return "\n          right: -22px;\n          bottom: calc(100% + 10px);\n        ";
         case 'topCenter':
             return "\n          left: 50%;\n          bottom: calc(100% + 10px);\n          transform: translateX(-50%);\n        ";
         case 'topLeft':
-            return "\n          left: 0;\n          bottom: calc(100% + 10px);\n        ";
+            return "\n          left: -22px;\n          bottom: calc(100% + 10px);\n        ";
         default:
             return "\n          left: 50%;\n          bottom: calc(100% + 10px);\n          transform: translateX(-50%);\n        ";
     }
-}, function (props) { return (props.hasClickAction && props.isOpen) ? '1' : "0"; }, devices_1.devices.xl, function (props) {
+}, function (props) { return (props.hasClickAction && props.isOpen) ? '1' : "0"; }, devices_1.devices.xl, function (props) { return props.iconWidth === "16px" ? "27px" : "30px"; }, function (props) {
     switch (props.position) {
         case 'bottomRight':
-            return "\n            bottom: calc(100% - 7px);\n            right: 10px;\n            transform: rotate(45deg);\n        ";
+            return "\n            bottom: calc(100% - 7px);\n            right: ".concat(props.iconWidth === "16px" ? "24px" : "28px", ";\n            transform: rotate(45deg);\n        ");
         case 'bottomCenter':
             return "\n            bottom: calc(100% - 7px);\n            left: 50%;\n            transform: translateX(-50%) rotate(45deg);\n        ";
         case 'bottomLeft':
-            return "\n            bottom: calc(100% - 7px);\n            left: 10px;\n            transform: rotate(45deg);\n        ";
+            return "\n            bottom: calc(100% - 7px);\n            left: ".concat(props.iconWidth === "16px" ? "24px" : "28px", ";\n            transform: rotate(45deg);\n        ");
         case 'topRight':
-            return "\n            top: calc(100% - 7px);\n            right: 10px;\n            transform: rotate(45deg);\n        ";
+            return "\n            top: calc(100% - 7px);\n            right: ".concat(props.iconWidth === "16px" ? "24px" : "28px", ";\n            transform: rotate(45deg);\n        ");
         case 'topCenter':
             return "\n            top: calc(100% - 7px);\n            left: 50%;\n            transform: translateX(-50%) rotate(45deg);\n        ";
         case 'topLeft':
-            return "\n            top: calc(100% - 7px);\n            left: 10px;\n            transform: rotate(45deg);\n        ";
+            return "\n            top: calc(100% - 7px);\n            left: ".concat(props.iconWidth === "16px" ? "24px" : "28px", ";\n            transform: rotate(45deg);\n        ");
         default:
             return "\n            top: calc(100% - 7px);\n            left: 50%;\n            transform: translateX(-50%) rotate(45deg);\n        ";
     }

package/dist/components/ValueProposition/layouts/popover/Popover.styled.js

@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImageWrapper = exports.Description = exports.Title = exports.Close = exports.TextWrapper = exports.PopoverStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.PopoverStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 1.5rem;\n  border-radius: 8px;\n  background: #FFF;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: grid;\n  grid-template-columns: 1fr;\n  align-items: center;\n  max-width: 456px;\n  color: var(--dark);\n  text-align: start;\n  align-content: center;\n  position: relative;\n  box-sizing: border-box;\n  aspect-ratio: 1/1;\n  opacity: 0;\n  user-select: none;\n  pointer-events: none;\n  transition: all .2s cubic-bezier(0,0,.2,1) 0s;\n  transform: scale(.9);\n  ", "\n"], ["\n  padding: 1.5rem;\n  border-radius: 8px;\n  background: #FFF;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: grid;\n  grid-template-columns: 1fr;\n  align-items: center;\n  max-width: 456px;\n  color: var(--dark);\n  text-align: start;\n  align-content: center;\n  position: relative;\n  box-sizing: border-box;\n  aspect-ratio: 1/1;\n  opacity: 0;\n  user-select: none;\n  pointer-events: none;\n  transition: all .2s cubic-bezier(0,0,.2,1) 0s;\n  transform: scale(.9);\n  ", "\n"])), function (props) { return props.show && "\n      opacity: 1;\n      user-select: initial;\n      pointer-events: initial;\n      transform: scale(1);\n  "; });
+exports.PopoverStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 1.5rem;\n  border-radius: 8px;\n  background: #FFF;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: grid;\n  grid-template-columns: 1fr;\n  align-items: center;\n  //max-width: 456px;\n  color: var(--dark);\n  text-align: start;\n  align-content: center;\n  position: relative;\n  box-sizing: border-box;\n  aspect-ratio: 1/1;\n  opacity: 0;\n  user-select: none;\n  pointer-events: none;\n  transition: all .2s cubic-bezier(0,0,.2,1) 0s;\n  transform: scale(.9);\n  ", "\n"], ["\n  padding: 1.5rem;\n  border-radius: 8px;\n  background: #FFF;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: grid;\n  grid-template-columns: 1fr;\n  align-items: center;\n  //max-width: 456px;\n  color: var(--dark);\n  text-align: start;\n  align-content: center;\n  position: relative;\n  box-sizing: border-box;\n  aspect-ratio: 1/1;\n  opacity: 0;\n  user-select: none;\n  pointer-events: none;\n  transition: all .2s cubic-bezier(0,0,.2,1) 0s;\n  transform: scale(.9);\n  ", "\n"])), function (props) { return props.show && "\n      opacity: 1;\n      user-select: initial;\n      pointer-events: initial;\n      transform: scale(1);\n  "; });
 exports.TextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 1rem;\n"], ["\n  margin-top: 1rem;\n"])));
 exports.Close = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  right: 1.5rem;\n  top: 1.5rem;\n  cursor: pointer;\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  background: white;\n  transition: all .2s;\n\n  &:hover {\n    box-shadow: 0 6px 30px #EAE9F0;\n  }\n"], ["\n  position: absolute;\n  right: 1.5rem;\n  top: 1.5rem;\n  cursor: pointer;\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  background: white;\n  transition: all .2s;\n\n  &:hover {\n    box-shadow: 0 6px 30px #EAE9F0;\n  }\n"])));
 exports.Title = styled_components_1.default.strong(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));

package/dist/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InfoBox = exports.ContentBox = exports.ListGroup = exports.Assurance = exports.Tooltip = exports.TextLink = exports.SelectBox = exports.Badges = exports.Carousel = exports.SuggestBox = exports.Toast = exports.Banner = exports.Accordion = exports.Divider = exports.SearchBox = exports.ValueProposition = exports.Textarea = exports.ActionButton = exports.RadioButton = exports.Icon = exports.Agreement = exports.Alert = exports.Stepper = exports.ProductCard = exports.OtpInput = exports.Modal = exports.Input = exports.CircleProgress = exports.Checkbox = exports.CategoryMenu = exports.Breadcrumbs = exports.Spinner = exports.Button = void 0;
+exports.InfoBox = exports.ContentBox = exports.ListGroup = exports.InsuranceBox = exports.Tooltip = exports.TextLink = exports.SelectBox = exports.Badges = exports.Carousel = exports.SuggestBox = exports.Toast = exports.Banner = exports.Accordion = exports.Divider = exports.SearchBox = exports.ValueProposition = exports.Textarea = exports.ActionButton = exports.RadioButton = exports.Icon = exports.Agreement = exports.Alert = exports.Stepper = exports.ProductCard = exports.OtpInput = exports.Modal = exports.Input = exports.CircleProgress = exports.Checkbox = exports.CategoryMenu = exports.Breadcrumbs = exports.Spinner = exports.Button = void 0;
 var Button_1 = __importDefault(require("./components/Button"));
 exports.Button = Button_1.default;
 var Spinner_1 = __importDefault(require("./components/Spinner"));
@@ -62,8 +62,8 @@ var TextLink_1 = __importDefault(require("./components/TextLink"));
 exports.TextLink = TextLink_1.default;
 var Tooltip_1 = __importDefault(require("./components/Tooltip"));
 exports.Tooltip = Tooltip_1.default;
-var Assurance_1 = __importDefault(require("./components/Assurance"));
-exports.Assurance = Assurance_1.default;
+var InsuranceBox_1 = __importDefault(require("./components/InsuranceBox"));
+exports.InsuranceBox = InsuranceBox_1.default;
 var ListGroup_1 = __importDefault(require("./components/ListGroup"));
 exports.ListGroup = ListGroup_1.default;
 var ContentBox_1 = __importDefault(require("./components/ContentBox"));

package/dist/jsons/Banners.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 exports.default = [
     {
-        thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/nasil-calisir.svg" }),
-        img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/nasil-calisir.svg", height: "260px" }),
+        thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/nasil-calisir.svg" }),
+        img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/nasil-calisir.svg", height: "260px" }),
         title: "K\u0130RALARSIN NED\u0130R?",
         description: 'Kiralarsın, bir süreliğine ihtiyaç duyduğun veya denemek istediğin elektronik cihazları güvenle ve kolayca kiralayabileceğin bir platformdur.',
         shortDesc: 'Kiralarsın nasıl çalışır?<b>Görmek için tıkla!</b>',
@@ -13,8 +13,8 @@ exports.default = [
         hasRightArrow: true,
     },
     {
-        thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/sehir.svg" }),
-        img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/sehir.svg", height: "260px" }),
+        thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/sehir.svg" }),
+        img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/sehir.svg", height: "260px" }),
         title: "K\u0130RALARSIN \u015E\u0130MD\u0130 81 \u0130LDE!",
         description: 'Tüm Türkiye’deki şehirlerden kolayca kiralama yapabilirsin.',
         shortDesc: 'Kiralarsın şimdi 81 ilde! <b>Detaylı bilgi için tıkla.</b>',
@@ -23,8 +23,8 @@ exports.default = [
         hasRightArrow: true,
     },
     {
-        thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/kiralama-uzatma.png" }),
-        img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/kiralama-uzatma.png", height: "260px" }),
+        thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/kiralama-uzatma.png" }),
+        img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/kiralama-uzatma.png", height: "260px" }),
         title: 'İSTER KİRALAMA SÜRENİ UZAT, İSTER SATIN AL!',
         description: 'Kiralama süreni siparişlerim panelinden kolayca uzatabilir, veya cihaza gerçekten ihtiyacın olduğuna karar verdiysen satın alabilirsin.',
         shortDesc: 'Kiraladıktan sonra ister süre uzat, ister satın al!',
@@ -33,8 +33,8 @@ exports.default = [
         hasRightArrow: false,
     },
     {
-        thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/phones.png" }),
-        img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/phones.png", height: "260px" }),
+        thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/phones.png" }),
+        img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/phones.png", height: "260px" }),
         title: 'KİRALARSIN, SENİNMİŞ GİBİ KULLANIRSIN!',
         description: 'Alıp almamaya bir türlü karar veremediğin teknolojik cihazı kiralayarak kullanmaya ne dersin?',
         shortDesc: 'Elektronik cihazını kiralayarak kullanmaya ne dersin?',
@@ -43,8 +43,8 @@ exports.default = [
         hasRightArrow: false,
     },
     {
-        thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/drone.png" }),
-        img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/drone.png", height: "260px" }),
+        thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/drone.png" }),
+        img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/drone.png", height: "260px" }),
         title: 'ELEKTRONİKTE KİRALAMA DÖNEMİ BAŞLASIN',
         description: 'İhtiyacın olan elektronik  cihazı kirala, belirlediğin süre içinde kullan!',
         shortDesc: 'İstediğin cihazı kirala, belirlediğin süre içinde kullan!',
@@ -53,8 +53,8 @@ exports.default = [
         hasRightArrow: false,
     },
     {
-        thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/variousItems.png" }),
-        img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/variousItems.png", height: "260px" }),
+        thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/variousItems.png" }),
+        img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/variousItems.png", height: "260px" }),
         title: 'ARTAN DİJİTALLEŞME GEZEGENİMİZİ ETKİLİYOR',
         description: 'Birkaç kez kullanacağın cihazları kiralayarak döngüsel ekonomiye katkı sağlayabilir, e-atıklara birlikte çözüm olabiliriz.',
         shortDesc: 'Cihazlarını kiralayarak döngüsel ekonomiye katkı sağla!',
@@ -63,8 +63,8 @@ exports.default = [
         hasRightArrow: false,
     },
     {
-        thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/motorcycle-courier.png" }),
-        img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/motorcycle-courier.png", height: "260px" }),
+        thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/carbon-notr.svg" }),
+        img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/carbon-notr.svg", height: "260px" }),
         title: "TÜRKİYE'NİN İLK KARBON NÖTR TESLİMAT YAPAN E-TİCARET SİTESİ",
         description: "Ürün taşıması sırasında oluşan karbon ayak izini hesaplıyoruz ve doğrulanmış karbon azalım projeleriyle nötr'lüyoruz.",
         shortDesc: 'Türkiye’nin ilk Karbon Nötr teslimat yapan E-ticaret sitesi Kiralarsın!',

package/package.json

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