krl-alfred 1.61.0 → 1.61.2

package/dist/components/Agreement/Agreement.js

@@ -25,6 +25,9 @@ var Agreement = function (props) {
     (0, react_1.useEffect)(function () {
         props.onExpanded({ isExpanded: expanded });
     }, [expanded]);
+    (0, react_1.useEffect)(function () {
+        setExpanded(props.expanded);
+    }, [props.expanded]);
     var onCheckBoxChange = function (event) {
         if (!expanded && event.target.checked)
             setExpanded(true);

package/dist/components/Banner/Banner.js

@@ -15,37 +15,29 @@ 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 Banner_styled_1 = require("./Banner.styled");
-var react_slick_1 = __importDefault(require("react-slick"));
-var Button_1 = __importDefault(require("../Button"));
-var Icon_1 = __importDefault(require("../Icon/Icon"));
-var classnames_1 = __importDefault(require("classnames"));
+var props_1 = require("./props");
+var layout1_1 = __importDefault(require("./layouts/layout1"));
+var layout2_1 = __importDefault(require("./layouts/layout2"));
+var layout3_1 = __importDefault(require("./layouts/layout3"));
+var layout4_1 = __importDefault(require("./layouts/layout4"));
 var Banner = function (props) {
-    var data = props.data;
-    var _a = (0, react_1.useState)(0), activeSlide = _a[0], setActiveSlide = _a[1];
-    var sliderRef = (0, react_1.useRef)(null);
-    var settings = {
-        dots: false,
-        infinite: false,
-        speed: 500,
-        slidesToShow: 1,
-        slidesToScroll: 1,
-        afterChange: function (index) { return setActiveSlide(index); }
-    };
-    var next = function () { return sliderRef.slickNext(); };
-    var previous = function () { return sliderRef.slickPrev(); };
-    return ((0, jsx_runtime_1.jsxs)(Banner_styled_1.BannerStyled, { children: [(0, jsx_runtime_1.jsx)("div", { className: "inner", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_slick_1.default, __assign({}, settings, { ref: function (slider) {
-                            sliderRef = slider;
-                        }, children: data === null || data === void 0 ? void 0 : data.map(function (item, key) {
-                            return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { className: "item", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text", children: [(item === null || item === void 0 ? void 0 : item.title) && (0, jsx_runtime_1.jsx)("strong", { className: "title headline-extra-bold-32-39", children: item === null || item === void 0 ? void 0 : item.title }), (item === null || item === void 0 ? void 0 : item.description) && (0, jsx_runtime_1.jsx)("p", { className: "description title-regular-16-19", children: item === null || item === void 0 ? void 0 : item.description }), (item === null || item === void 0 ? void 0 : item.buttonText) && (0, jsx_runtime_1.jsx)(Button_1.default, { size: "big", variant: "primary", onClick: item === null || item === void 0 ? void 0 : item.onClick, children: item === null || item === void 0 ? void 0 : item.buttonText })] }), (0, jsx_runtime_1.jsx)("div", { className: "img", children: item === null || item === void 0 ? void 0 : item.img }), (0, jsx_runtime_1.jsxs)("div", { className: "textMobile title-medium-16-19", onClick: item === null || item === void 0 ? void 0 : item.onClick, children: [(0, jsx_runtime_1.jsx)("div", { className: "titleSm", dangerouslySetInnerHTML: { __html: item === null || item === void 0 ? void 0 : item.shortDesc } }), (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRightBig" })] })] }) }, key));
-                        }) })) }) }), props.showThumbnails && ((0, jsx_runtime_1.jsxs)("div", { className: "thumbnailSlider", children: [(0, jsx_runtime_1.jsx)("button", { className: "swiperNavigation swiperPrev", onClick: previous, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { width: "24px", height: "24px", name: "ArrowLeft" }) }), (0, jsx_runtime_1.jsx)("div", { className: "thumbnailInner", children: data.map(function (item, key) {
-                            var _a;
-                            return ((0, jsx_runtime_1.jsx)("div", { onClick: function () { return sliderRef.slickGoTo(key); }, className: (0, classnames_1.default)("thumbnailItem", (_a = {}, _a["active"] = key === activeSlide, _a)), children: item === null || item === void 0 ? void 0 : item.thumbnail }, key));
-                        }) }), (0, jsx_runtime_1.jsx)("button", { className: "swiperNavigation swiperNext", onClick: next, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { width: "24px", height: "24px", name: "ArrowRight" }) })] }))] }));
+    var layout = props.layout;
+    switch (layout) {
+        case 'layout1':
+            return (0, jsx_runtime_1.jsx)(layout1_1.default, __assign({}, props));
+        case 'layout2':
+            return (0, jsx_runtime_1.jsx)(layout2_1.default, __assign({}, props));
+        case 'layout3':
+            return (0, jsx_runtime_1.jsx)(layout3_1.default, __assign({}, props));
+        case 'layout4':
+            return (0, jsx_runtime_1.jsx)(layout4_1.default, __assign({}, props));
+        default:
+            return (0, jsx_runtime_1.jsx)(layout1_1.default, __assign({}, props));
+    }
 };
 Banner.defaultProps = {
     showThumbnails: true,
     allowTouchMove: true,
+    layout: props_1.layouts[0],
 };
 exports.default = Banner;

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

@@ -0,0 +1,47 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Banner_styled_1 = require("../../Banner.styled");
+var Button_1 = __importDefault(require("../../../Button"));
+var Icon_1 = __importDefault(require("../../../Icon/Icon"));
+var classnames_1 = __importDefault(require("classnames"));
+var react_slick_1 = __importDefault(require("react-slick"));
+var Index = function (props) {
+    var data = props.data;
+    var _a = (0, react_1.useState)(0), activeSlide = _a[0], setActiveSlide = _a[1];
+    var sliderRef = (0, react_1.useRef)(null);
+    var settings = {
+        dots: false,
+        infinite: false,
+        speed: 500,
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        afterChange: function (index) { return setActiveSlide(index); }
+    };
+    var next = function () { return sliderRef.slickNext(); };
+    var previous = function () { return sliderRef.slickPrev(); };
+    return ((0, jsx_runtime_1.jsxs)(Banner_styled_1.BannerStyled, { children: [(0, jsx_runtime_1.jsx)("div", { className: "inner", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_slick_1.default, __assign({}, settings, { ref: function (slider) {
+                            sliderRef = slider;
+                        }, children: data === null || data === void 0 ? void 0 : data.map(function (item, key) {
+                            return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { className: "item", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text", children: [(item === null || item === void 0 ? void 0 : item.title) && (0, jsx_runtime_1.jsx)("strong", { className: "title headline-extra-bold-32-39", children: item === null || item === void 0 ? void 0 : item.title }), (item === null || item === void 0 ? void 0 : item.description) && (0, jsx_runtime_1.jsx)("p", { className: "description title-regular-16-19", children: item === null || item === void 0 ? void 0 : item.description }), (item === null || item === void 0 ? void 0 : item.buttonText) && (0, jsx_runtime_1.jsx)(Button_1.default, { size: "big", variant: "primary", onClick: item === null || item === void 0 ? void 0 : item.onClick, children: item === null || item === void 0 ? void 0 : item.buttonText })] }), (0, jsx_runtime_1.jsx)("div", { className: "img", children: item === null || item === void 0 ? void 0 : item.img }), (0, jsx_runtime_1.jsxs)("div", { className: "textMobile title-medium-16-19", onClick: item === null || item === void 0 ? void 0 : item.onClick, children: [(0, jsx_runtime_1.jsx)("div", { className: "titleSm", dangerouslySetInnerHTML: { __html: item === null || item === void 0 ? void 0 : item.shortDesc } }), (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRightBig" })] })] }) }, key));
+                        }) })) }) }), props.showThumbnails && ((0, jsx_runtime_1.jsxs)("div", { className: "thumbnailSlider", children: [(0, jsx_runtime_1.jsx)("button", { className: "swiperNavigation swiperPrev", onClick: previous, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { width: "24px", height: "24px", name: "ArrowLeft" }) }), (0, jsx_runtime_1.jsx)("div", { className: "thumbnailInner", children: data.map(function (item, key) {
+                            var _a;
+                            return ((0, jsx_runtime_1.jsx)("div", { onClick: function () { return sliderRef.slickGoTo(key); }, className: (0, classnames_1.default)("thumbnailItem", (_a = {}, _a["active"] = key === activeSlide, _a)), children: item === null || item === void 0 ? void 0 : item.thumbnail }, key));
+                        }) }), (0, jsx_runtime_1.jsx)("button", { className: "swiperNavigation swiperNext", onClick: next, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { width: "24px", height: "24px", name: "ArrowRight" }) })] }))] }));
+};
+exports.default = Index;

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

@@ -0,0 +1,14 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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  .inner {\n    border-radius: 0.5rem;\n    box-shadow: 0 6px 30px 0 #EAE9F0;\n    position: relative;\n    overflow: hidden; \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: 1rem;\n      color: white;\n      align-items: center;\n      justify-content: space-between;\n\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        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: 2.5rem 2.5rem 1rem;\n        text-align: center;\n      }\n    }\n  }\n\n  .thumbnailSlider {\n    margin-top: 3rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    @media only screen and ", " {\n      display: none;\n    }\n\n    .thumbnailInner {\n      justify-content: center;\n      display: flex;\n      align-items: center;\n      margin: 0 2.5rem;\n\n      .thumbnailItem {\n        border: 1px solid var(--dark-opacity-10);\n        height: 50px;\n        border-radius: 0.5rem;\n        position: relative;\n        overflow: hidden;\n        margin: 0 4px;\n        box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n        width: 70px;\n        padding: 8px;\n        box-sizing: border-box;\n        cursor: pointer;\n        transition: all .1s ease;\n\n        &:is(.active) {\n          border-color: var(--primary);\n        }\n\n        > * {\n          display: block;\n          width: 100%;\n          height: 100%;\n          object-fit: contain;\n          object-position: center center;\n        }\n      }\n    }\n\n    .swiperNavigation {\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  .inner {\n    border-radius: 0.5rem;\n    box-shadow: 0 6px 30px 0 #EAE9F0;\n    position: relative;\n    overflow: hidden; \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: 1rem;\n      color: white;\n      align-items: center;\n      justify-content: space-between;\n\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        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: 2.5rem 2.5rem 1rem;\n        text-align: center;\n      }\n    }\n  }\n\n  .thumbnailSlider {\n    margin-top: 3rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    @media only screen and ", " {\n      display: none;\n    }\n\n    .thumbnailInner {\n      justify-content: center;\n      display: flex;\n      align-items: center;\n      margin: 0 2.5rem;\n\n      .thumbnailItem {\n        border: 1px solid var(--dark-opacity-10);\n        height: 50px;\n        border-radius: 0.5rem;\n        position: relative;\n        overflow: hidden;\n        margin: 0 4px;\n        box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n        width: 70px;\n        padding: 8px;\n        box-sizing: border-box;\n        cursor: pointer;\n        transition: all .1s ease;\n\n        &:is(.active) {\n          border-color: var(--primary);\n        }\n\n        > * {\n          display: block;\n          width: 100%;\n          height: 100%;\n          object-fit: contain;\n          object-position: center center;\n        }\n      }\n    }\n\n    .swiperNavigation {\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);
+var templateObject_1;

package/dist/components/Banner/layouts/layout2/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var layout2_styled_1 = require("./layout2.styled");
+var classnames_1 = __importDefault(require("classnames"));
+var Index = function (props) {
+    var data = props.data, isMobile = props.isMobile;
+    return ((0, jsx_runtime_1.jsx)(layout2_styled_1.BannerStyled, { children: (0, jsx_runtime_1.jsxs)("div", { className: "item", children: [(0, jsx_runtime_1.jsx)("div", { className: "img", children: data === null || data === void 0 ? void 0 : data.img }), (0, jsx_runtime_1.jsxs)("div", { className: "text", children: [(data === null || data === void 0 ? void 0 : data.title) && (0, jsx_runtime_1.jsx)("strong", { className: (0, classnames_1.default)('title', (isMobile ? 'headline-extra-bold-20-24' : 'headline-extra-bold-24-29')), children: data === null || data === void 0 ? void 0 : data.title }), (data === null || data === void 0 ? void 0 : data.description) && (0, jsx_runtime_1.jsx)("p", { className: "description body-regular-14-17", children: data === null || data === void 0 ? void 0 : data.description })] })] }) }));
+};
+exports.default = Index;

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

@@ -0,0 +1,14 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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  .item {\n    background-color: var(--primary-opacity-10);\n    box-shadow: 0 6px 30px 0 #EAE9F0;\n    padding: 0 5rem;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-wrap: wrap;\n\n    @media only screen and ", " {\n      padding: 1.5rem 1rem;\n      margin-top: 3rem;\n      display: flex;\n      justify-content: center;\n    }\n\n    .text {\n      flex: 1 0;\n      max-width: 349px;\n      @media only screen and ", " {\n        max-width: initial;\n      }\n\n      .title {\n        margin-bottom: 1rem;\n        display: block;\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n      }\n    }\n\n\n    .img {\n      margin-top: -44px;\n\n      @media only screen and ", " {\n        width: 100%;\n        margin-bottom: 24px;\n      }\n      img {\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n    }\n\n\n"], ["\n  max-width: 1050px;\n  margin: 0 auto;\n\n  .item {\n    background-color: var(--primary-opacity-10);\n    box-shadow: 0 6px 30px 0 #EAE9F0;\n    padding: 0 5rem;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-wrap: wrap;\n\n    @media only screen and ", " {\n      padding: 1.5rem 1rem;\n      margin-top: 3rem;\n      display: flex;\n      justify-content: center;\n    }\n\n    .text {\n      flex: 1 0;\n      max-width: 349px;\n      @media only screen and ", " {\n        max-width: initial;\n      }\n\n      .title {\n        margin-bottom: 1rem;\n        display: block;\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n      }\n    }\n\n\n    .img {\n      margin-top: -44px;\n\n      @media only screen and ", " {\n        width: 100%;\n        margin-bottom: 24px;\n      }\n      img {\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n    }\n\n\n"])), devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
+var templateObject_1;

package/dist/components/Banner/layouts/layout3/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var layout3_styled_1 = require("./layout3.styled");
+var classnames_1 = __importDefault(require("classnames"));
+var Index = function (props) {
+    var data = props.data, isMobile = props.isMobile;
+    return ((0, jsx_runtime_1.jsx)(layout3_styled_1.BannerStyled, { children: (0, jsx_runtime_1.jsxs)("div", { className: "item", children: [(0, jsx_runtime_1.jsx)("div", { className: "img", children: data === null || data === void 0 ? void 0 : data.img }), (0, jsx_runtime_1.jsxs)("div", { className: "text", children: [(data === null || data === void 0 ? void 0 : data.title) && (0, jsx_runtime_1.jsx)("strong", { className: (0, classnames_1.default)('title', (isMobile ? 'headline-extra-bold-20-24' : 'headline-extra-bold-32-39')), children: data === null || data === void 0 ? void 0 : data.title }), (data === null || data === void 0 ? void 0 : data.description) && (0, jsx_runtime_1.jsx)("p", { className: (0, classnames_1.default)('description', (isMobile ? 'body-regular-14-17' : 'title-regular-16-19')), children: data === null || data === void 0 ? void 0 : data.description })] })] }) }));
+};
+exports.default = Index;

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

@@ -0,0 +1,14 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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  .item {\n    background-color: white;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-wrap: wrap;\n\n    @media only screen and ", " {\n      justify-content: center;\n    }\n\n    .text {\n      flex: 1 0;\n      max-width: 446px;\n      @media only screen and ", " {\n        max-width: initial;\n        margin-top: 1rem;\n      }\n\n      .title {\n        margin-bottom: 2rem;\n        display: block;\n        @media only screen and ", " {\n          margin-bottom: 1rem;\n        }\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: var(--dark-opacity-75);\n      }\n    }\n\n\n    .img {\n      @media only screen and ", " {\n        width: 100%; \n      }\n      img {\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n    }\n\n\n"], ["\n  max-width: 1050px;\n  margin: 0 auto;\n\n  .item {\n    background-color: white;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-wrap: wrap;\n\n    @media only screen and ", " {\n      justify-content: center;\n    }\n\n    .text {\n      flex: 1 0;\n      max-width: 446px;\n      @media only screen and ", " {\n        max-width: initial;\n        margin-top: 1rem;\n      }\n\n      .title {\n        margin-bottom: 2rem;\n        display: block;\n        @media only screen and ", " {\n          margin-bottom: 1rem;\n        }\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: var(--dark-opacity-75);\n      }\n    }\n\n\n    .img {\n      @media only screen and ", " {\n        width: 100%; \n      }\n      img {\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n    }\n\n\n"])), devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
+var templateObject_1;

package/dist/components/Banner/layouts/layout4/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var layout4_styled_1 = require("./layout4.styled");
+var classnames_1 = __importDefault(require("classnames"));
+var Button_1 = __importDefault(require("../../../Button"));
+var Index = function (props) {
+    var data = props.data;
+    return ((0, jsx_runtime_1.jsx)(layout4_styled_1.BannerStyled, { children: (0, jsx_runtime_1.jsxs)("div", { className: "item", children: [(data === null || data === void 0 ? void 0 : data.img) && (0, jsx_runtime_1.jsx)("div", { className: "img", children: data === null || data === void 0 ? void 0 : data.img }), (0, jsx_runtime_1.jsxs)("div", { className: "text", children: [(data === null || data === void 0 ? void 0 : data.title) && (0, jsx_runtime_1.jsx)("strong", { className: (0, classnames_1.default)('title', 'headline-extra-bold-32-39'), children: data === null || data === void 0 ? void 0 : data.title }), (data === null || data === void 0 ? void 0 : data.description) && (0, jsx_runtime_1.jsx)("p", { className: (0, classnames_1.default)('description', 'title-regular-16-19'), children: data === null || data === void 0 ? void 0 : data.description }), (data === null || data === void 0 ? void 0 : data.buttonText) && (0, jsx_runtime_1.jsx)(Button_1.default, { size: "big", variant: "primary", onClick: data === null || data === void 0 ? void 0 : data.onClick, children: data === null || data === void 0 ? void 0 : data.buttonText })] })] }) }));
+};
+exports.default = Index;

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

@@ -0,0 +1,14 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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  .item {\n    background-color: var(--primary-opacity-5);\n    display: block;\n    padding: 3rem;\n    border-radius: 0.5rem;\n\n    @media only screen and ", " {\n      padding: 3rem 1.5rem;\n    }\n  }\n\n  .text {\n    margin-top: 2rem;\n\n    .title {\n      margin-bottom: 1rem;\n      display: block;\n    }\n\n    .description {\n      margin: 0 0 2rem 0;\n      display: block;\n      color: var(--dark-opacity-75);\n    }\n  }\n  \n  .img {\n    @media only screen and ", " {\n      width: 100%;\n    }\n\n    img {\n      max-height: 100%;\n      max-width: 100%;\n      @media only screen and ", " {\n        height: auto;\n      }\n    }\n  }\n\n\n"], ["\n  max-width: 1050px;\n  margin: 0 auto;\n\n  .item {\n    background-color: var(--primary-opacity-5);\n    display: block;\n    padding: 3rem;\n    border-radius: 0.5rem;\n\n    @media only screen and ", " {\n      padding: 3rem 1.5rem;\n    }\n  }\n\n  .text {\n    margin-top: 2rem;\n\n    .title {\n      margin-bottom: 1rem;\n      display: block;\n    }\n\n    .description {\n      margin: 0 0 2rem 0;\n      display: block;\n      color: var(--dark-opacity-75);\n    }\n  }\n  \n  .img {\n    @media only screen and ", " {\n      width: 100%;\n    }\n\n    img {\n      max-height: 100%;\n      max-width: 100%;\n      @media only screen and ", " {\n        height: auto;\n      }\n    }\n  }\n\n\n"])), devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
+var templateObject_1;

package/dist/components/Banner/props.js

@@ -1,3 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var BannerDefault = {};
+exports.layouts = void 0;
+exports.layouts = ['layout1', 'layout2', 'layout3', 'layout4'];
+var BannerDefault = {
+    layout: exports.layouts[0]
+};

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

@@ -3,17 +3,57 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Layout4 = exports.Layout3 = exports.Layout2 = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var Banner_1 = __importDefault(require("../Banner"));
 var Banners_1 = __importDefault(require("./../../../jsons/Banners"));
+var props_1 = require("../props");
 exports.default = {
     title: 'Components/Banner',
     component: Banner_1.default,
     tags: ['autodocs'],
-    argTypes: {}
+    argTypes: {
+        layout: { control: 'select', options: props_1.layouts },
+    }
 };
 exports.Default = {
     args: {
-        data: Banners_1.default
+        data: Banners_1.default,
+        layout: props_1.layouts[0],
+        showThumbnails: true
+    },
+};
+exports.Layout2 = {
+    args: {
+        data: {
+            img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/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.",
+        },
+        layout: props_1.layouts[1],
+        showThumbnails: true
+    },
+};
+exports.Layout3 = {
+    args: {
+        data: {
+            img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/kiralama-uzat-main.png", 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!",
+        },
+        layout: props_1.layouts[2],
+        showThumbnails: true
+    },
+};
+exports.Layout4 = {
+    args: {
+        data: {
+            img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/qnblogo3.svg", height: "48px" }),
+            title: "QNB Finansbank G\u00FCvencesi",
+            description: "Kiralars\u0131n, QNB Finansbank'\u0131n destekleriyle faaliyete ge\u00E7ti. QNB Finansbank Sanal POS g\u00FCvencesiyle \u00F6demelerinizi g\u00FCvenli bir \u015Fekilde yapabilirsiniz.",
+            buttonText: "Detayl\u0131 Bilgi"
+        },
+        layout: props_1.layouts[3],
+        showThumbnails: true
     },
 };

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

@@ -11,6 +11,6 @@ exports.HorizontalStyled = exports.StandartStyled = exports.ChecklistStyled = vo
 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  width: 240px;\n  padding: 1rem;\n  transition: all .2s ease;\n  position: relative;\n  box-sizing: border-box;\n  a{\n    text-decoration: none;\n    color: inherit;\n  }\n  &:hover{\n    box-shadow: 0 6px 30px 0 #B8B8CD;\n  }\n  .discount{\n    position: absolute;\n    left: 9px;\n    top: 12px;\n    z-index: 2;\n    filter: drop-shadow(4px 4px 15px rgba(151,99,246,.5));\n    svg{\n      display: block;\n    }\n    .text{\n      position: absolute;\n      width: 90px;\n      text-align: center;\n      height: 16px;\n      color: white;\n      transform: rotate(-45deg);\n      top: 27px;\n      left: -7px;\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    padding-bottom: 148px;\n    box-sizing: border-box;\n    z-index: 1;\n    text-align: center;\n    > * {\n      width: 100%;\n      display: block;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%,-50%);\n    }\n  }\n  .productCardContent{\n    padding: 1rem ;\n    .productCardTitle{\n      display: block;\n      color: var(--dark);\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      height: 38px;\n      word-break: break-word;\n    }\n    .productCardDescription{\n      display: block;\n      margin-top: 0.5rem;\n      color: var(--grey-40);\n      margin-bottom: 1rem;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      height: 32px;\n      word-break: break-word;\n    }\n    .productCardPriceContent{\n      display: grid;\n      align-items: end;\n      justify-content: flex-start;\n      height: 36px;\n      grid-template-columns: ", ";\n      .discountRate{\n        margin-right: 0.5rem;\n        width: 48px;\n        height: 36px;\n        border-radius: 8px;\n        background-color: var(--primary-opacity-10);\n        color: var(--primary);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .oldPrice, .newPrice{\n        display: flex;\n        align-items: end;\n        justify-content: flex-start;\n        .price{\n          margin-right: 2px;\n        }\n      }\n      .oldPrice{\n        color: var(--dark-opacity-25);\n        margin-bottom: 2px;\n        .price , .period {\n          text-decoration: line-through;\n        }\n      }\n      .newPrice{\n        \n      }\n    }\n  }\n"], ["\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  border-radius: 0.5rem;\n  width: 240px;\n  padding: 1rem;\n  transition: all .2s ease;\n  position: relative;\n  box-sizing: border-box;\n  a{\n    text-decoration: none;\n    color: inherit;\n  }\n  &:hover{\n    box-shadow: 0 6px 30px 0 #B8B8CD;\n  }\n  .discount{\n    position: absolute;\n    left: 9px;\n    top: 12px;\n    z-index: 2;\n    filter: drop-shadow(4px 4px 15px rgba(151,99,246,.5));\n    svg{\n      display: block;\n    }\n    .text{\n      position: absolute;\n      width: 90px;\n      text-align: center;\n      height: 16px;\n      color: white;\n      transform: rotate(-45deg);\n      top: 27px;\n      left: -7px;\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    padding-bottom: 148px;\n    box-sizing: border-box;\n    z-index: 1;\n    text-align: center;\n    > * {\n      width: 100%;\n      display: block;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%,-50%);\n    }\n  }\n  .productCardContent{\n    padding: 1rem ;\n    .productCardTitle{\n      display: block;\n      color: var(--dark);\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      height: 38px;\n      word-break: break-word;\n    }\n    .productCardDescription{\n      display: block;\n      margin-top: 0.5rem;\n      color: var(--grey-40);\n      margin-bottom: 1rem;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      height: 32px;\n      word-break: break-word;\n    }\n    .productCardPriceContent{\n      display: grid;\n      align-items: end;\n      justify-content: flex-start;\n      height: 36px;\n      grid-template-columns: ", ";\n      .discountRate{\n        margin-right: 0.5rem;\n        width: 48px;\n        height: 36px;\n        border-radius: 8px;\n        background-color: var(--primary-opacity-10);\n        color: var(--primary);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .oldPrice, .newPrice{\n        display: flex;\n        align-items: end;\n        justify-content: flex-start;\n        .price{\n          margin-right: 2px;\n        }\n      }\n      .oldPrice{\n        color: var(--dark-opacity-25);\n        margin-bottom: 2px;\n        .price , .period {\n          text-decoration: line-through;\n        }\n      }\n      .newPrice{\n        \n      }\n    }\n  }\n"])), function (props) { return props.discountRate ? 'auto 1fr' : '1fr'; });
+exports.StandartStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  border-radius: 0.5rem;\n  min-width: 240px;\n  padding: 1rem;\n  transition: all .2s ease;\n  position: relative;\n  box-sizing: border-box;\n  a{\n    text-decoration: none;\n    color: inherit;\n  }\n  &:hover{\n    box-shadow: 0 6px 30px 0 #B8B8CD;\n  }\n  .discount{\n    position: absolute;\n    left: 9px;\n    top: 12px;\n    z-index: 2;\n    filter: drop-shadow(4px 4px 15px rgba(151,99,246,.5));\n    svg{\n      display: block;\n    }\n    .text{\n      position: absolute;\n      width: 90px;\n      text-align: center;\n      height: 16px;\n      color: white;\n      transform: rotate(-45deg);\n      top: 27px;\n      left: -7px;\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    padding-bottom: 71.2%;\n    box-sizing: border-box;\n    z-index: 1;\n    text-align: center;\n    > * {\n      width: 100%;\n      display: block;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%,-50%);\n    }\n  }\n  .productCardContent{\n    padding: 1rem ;\n    .productCardTitle{\n      display: block;\n      color: var(--dark);\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      height: 38px;\n      word-break: break-word;\n    }\n    .productCardDescription{\n      display: block;\n      margin-top: 0.5rem;\n      color: var(--grey-40);\n      margin-bottom: 1rem;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      height: 32px;\n      word-break: break-word;\n    }\n    .productCardPriceContent{\n      display: grid;\n      align-items: end;\n      justify-content: flex-start;\n      height: 36px;\n      grid-template-columns: ", ";\n      .discountRate{\n        margin-right: 0.5rem;\n        width: 48px;\n        height: 36px;\n        border-radius: 8px;\n        background-color: var(--primary-opacity-10);\n        color: var(--primary);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .oldPrice, .newPrice{\n        display: flex;\n        align-items: end;\n        justify-content: flex-start;\n        .price{\n          margin-right: 2px;\n        }\n      }\n      .oldPrice{\n        color: var(--dark-opacity-25);\n        margin-bottom: 2px;\n        .price , .period {\n          text-decoration: line-through;\n        }\n      }\n      .newPrice{\n        \n      }\n    }\n  }\n"], ["\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  border-radius: 0.5rem;\n  min-width: 240px;\n  padding: 1rem;\n  transition: all .2s ease;\n  position: relative;\n  box-sizing: border-box;\n  a{\n    text-decoration: none;\n    color: inherit;\n  }\n  &:hover{\n    box-shadow: 0 6px 30px 0 #B8B8CD;\n  }\n  .discount{\n    position: absolute;\n    left: 9px;\n    top: 12px;\n    z-index: 2;\n    filter: drop-shadow(4px 4px 15px rgba(151,99,246,.5));\n    svg{\n      display: block;\n    }\n    .text{\n      position: absolute;\n      width: 90px;\n      text-align: center;\n      height: 16px;\n      color: white;\n      transform: rotate(-45deg);\n      top: 27px;\n      left: -7px;\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    padding-bottom: 71.2%;\n    box-sizing: border-box;\n    z-index: 1;\n    text-align: center;\n    > * {\n      width: 100%;\n      display: block;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%,-50%);\n    }\n  }\n  .productCardContent{\n    padding: 1rem ;\n    .productCardTitle{\n      display: block;\n      color: var(--dark);\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      height: 38px;\n      word-break: break-word;\n    }\n    .productCardDescription{\n      display: block;\n      margin-top: 0.5rem;\n      color: var(--grey-40);\n      margin-bottom: 1rem;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      height: 32px;\n      word-break: break-word;\n    }\n    .productCardPriceContent{\n      display: grid;\n      align-items: end;\n      justify-content: flex-start;\n      height: 36px;\n      grid-template-columns: ", ";\n      .discountRate{\n        margin-right: 0.5rem;\n        width: 48px;\n        height: 36px;\n        border-radius: 8px;\n        background-color: var(--primary-opacity-10);\n        color: var(--primary);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .oldPrice, .newPrice{\n        display: flex;\n        align-items: end;\n        justify-content: flex-start;\n        .price{\n          margin-right: 2px;\n        }\n      }\n      .oldPrice{\n        color: var(--dark-opacity-25);\n        margin-bottom: 2px;\n        .price , .period {\n          text-decoration: line-through;\n        }\n      }\n      .newPrice{\n        \n      }\n    }\n  }\n"])), function (props) { return props.discountRate ? 'auto 1fr' : '1fr'; });
 exports.HorizontalStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: var(--dark);\n  padding: 0.5rem;\n  transition: all .2s ease;\n  border-radius: 8px;\n  &:hover{\n    background: var(--dark-opacity-3);\n  }\n  a{\n    text-decoration: none;\n    color: inherit;\n  }\n  .horizontalWrapper{ \n    text-decoration: none;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    align-items: center;\n    .img{\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      overflow: hidden;\n      width: 142px;\n      height: 88px; \n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 1rem;\n      background: white;\n      @media only screen and ", " {\n        margin-right: 0.5rem;\n        width: 71px;\n        height: 50px;\n        box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n        border:0;\n      }\n      > * {\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        object-position: center center;\n        display: block;\n      }\n    }\n    .title{\n      \n    }\n    .description{\n      color: var(--grey-50);\n      margin-top: 0.5rem;\n      margin-bottom: 0.5rem;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      word-break: break-word;\n    }\n    .priceContent{\n      display: flex;\n      align-items: end;\n      justify-content: flex-start;\n      .price{\n        margin-right: 2px;\n      }\n      .period{\n        \n      }\n    }\n  }\n"], ["\n  color: var(--dark);\n  padding: 0.5rem;\n  transition: all .2s ease;\n  border-radius: 8px;\n  &:hover{\n    background: var(--dark-opacity-3);\n  }\n  a{\n    text-decoration: none;\n    color: inherit;\n  }\n  .horizontalWrapper{ \n    text-decoration: none;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    align-items: center;\n    .img{\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      overflow: hidden;\n      width: 142px;\n      height: 88px; \n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 1rem;\n      background: white;\n      @media only screen and ", " {\n        margin-right: 0.5rem;\n        width: 71px;\n        height: 50px;\n        box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n        border:0;\n      }\n      > * {\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        object-position: center center;\n        display: block;\n      }\n    }\n    .title{\n      \n    }\n    .description{\n      color: var(--grey-50);\n      margin-top: 0.5rem;\n      margin-bottom: 0.5rem;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      word-break: break-word;\n    }\n    .priceContent{\n      display: flex;\n      align-items: end;\n      justify-content: flex-start;\n      .price{\n        margin-right: 2px;\n      }\n      .period{\n        \n      }\n    }\n  }\n"])), devices_1.devices.sm);
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -1,15 +1,26 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Standart = exports.Checklist = exports.Horizontal = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var ProductCard_1 = __importDefault(require("../ProductCard"));
 var props_1 = require("../props");
 exports.default = {
     title: "Components/ProductCard",
-    component: ProductCard_1.default,
+    component: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: props.layout === "standart" ? '240px' : 'initial' }, children: (0, jsx_runtime_1.jsx)(ProductCard_1.default, __assign({}, props)) }); },
     tags: ['autodocs'],
     argTypes: {
         contentAlignment: { control: 'select', options: props_1.contentAlignments },
@@ -33,8 +44,16 @@ exports.Default = {
         period: "hafta",
         content: "Content",
         contentAlignment: "left",
-        layout: "checklist",
         productCardOnChange: function () { return console.log("test"); },
         image: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" })
     },
 };
+exports.Horizontal = {
+    args: __assign(__assign({}, exports.Default.args), { layout: "horizontal" }),
+};
+exports.Checklist = {
+    args: __assign(__assign({}, exports.Default.args), { layout: "checklist" }),
+};
+exports.Standart = {
+    args: __assign(__assign({}, exports.Default.args), { layout: "standart" }),
+};

package/dist/components/ValueProposition/layouts/horizontal/Horizontal.styled.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImageWrapper = exports.Description = exports.Title = exports.TextWrapper = exports.HorizontalStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../../../constants/devices");
-exports.HorizontalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 2rem;\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: 672px;\n  color: var(--dark);\n  text-align: start;\n  align-content: center;\n  position: relative;\n  @media only screen and ", " {\n    aspect-ratio: 1/1;\n    padding: 1rem;\n    text-align: center;\n  }\n"], ["\n  padding: 2rem;\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: 672px;\n  color: var(--dark);\n  text-align: start;\n  align-content: center;\n  position: relative;\n  @media only screen and ", " {\n    aspect-ratio: 1/1;\n    padding: 1rem;\n    text-align: center;\n  }\n"])), devices_1.devices.md);
+exports.HorizontalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 2rem;\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: 672px;\n  color: var(--dark);\n  text-align: start;\n  align-content: center;\n  position: relative;\n  box-sizing: border-box;\n  @media only screen and ", " {\n    aspect-ratio: 1/1;\n    padding: 1rem;\n    text-align: center;\n  }\n"], ["\n  padding: 2rem;\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: 672px;\n  color: var(--dark);\n  text-align: start;\n  align-content: center;\n  position: relative;\n  box-sizing: border-box;\n  @media only screen and ", " {\n    aspect-ratio: 1/1;\n    padding: 1rem;\n    text-align: center;\n  }\n"])), devices_1.devices.md);
 exports.TextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 1rem;\n"], ["\n  margin-top: 1rem;\n"])));
 exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n  @media only screen and ", " {\n    min-height: 38px;\n    color: var(--primary);\n  }\n"], ["\n  display: block;\n  @media only screen and ", " {\n    min-height: 38px;\n    color: var(--primary);\n  }\n"])), devices_1.devices.md);
 exports.Description = styled_components_1.default.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 1rem 0 0 0;\n  min-height: 76px;\n  @media only screen and ", " {\n    display: none;\n  }\n"], ["\n  margin: 1rem 0 0 0;\n  min-height: 76px;\n  @media only screen and ", " {\n    display: none;\n  }\n"])), devices_1.devices.md);

package/dist/components/ValueProposition/layouts/square/Square.styled.js

@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SquareDivider = exports.ImageWrapper = exports.Description = exports.Title = exports.TextWrapper = exports.SquareStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.SquareStyled = 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: 250px;\n  color: var(--dark);\n  text-align: center;\n  align-content: center;\n  position: relative; \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: 250px;\n  color: var(--dark);\n  text-align: center;\n  align-content: center;\n  position: relative; \n"])));
+exports.SquareStyled = 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: 250px;\n  color: var(--dark);\n  text-align: center;\n  align-content: center;\n  position: relative;\n  box-sizing: border-box;\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: 250px;\n  color: var(--dark);\n  text-align: center;\n  align-content: center;\n  position: relative;\n  box-sizing: border-box;\n"])));
 exports.TextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 1.5rem;\n"], ["\n  margin-top: 1.5rem;\n"])));
 exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n  min-height: 38px;\n"], ["\n  display: block;\n  min-height: 38px;\n"])));
 exports.Description = styled_components_1.default.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 1rem 0 0 0;\n  min-height: 76px;\n"], ["\n  margin: 1rem 0 0 0;\n  min-height: 76px;\n"])));

package/dist/components/ValueProposition/layouts/vertical/Vertical.styled.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Number = exports.ImageWrapper = exports.Description = exports.Title = exports.TextWrapper = exports.VerticalStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../../../constants/devices");
-exports.VerticalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0 4.5rem;\n  border-radius: 8px;\n  background: #FFF;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  max-width: 672px;\n  color: var(--dark);\n  text-align: start;\n  align-content: center;\n  position: relative;\n  min-height: 333px;\n  @media only screen and ", " {\n    grid-template-columns: 1fr;\n    min-height: initial;\n    padding: 3.5rem 3rem;\n  }\n"], ["\n  padding: 0 4.5rem;\n  border-radius: 8px;\n  background: #FFF;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  max-width: 672px;\n  color: var(--dark);\n  text-align: start;\n  align-content: center;\n  position: relative;\n  min-height: 333px;\n  @media only screen and ", " {\n    grid-template-columns: 1fr;\n    min-height: initial;\n    padding: 3.5rem 3rem;\n  }\n"])), devices_1.devices.md);
+exports.VerticalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0 4.5rem;\n  border-radius: 8px;\n  background: #FFF;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  max-width: 672px;\n  color: var(--dark);\n  text-align: start;\n  align-content: center;\n  position: relative;\n  min-height: 333px;\n  box-sizing: border-box;\n  @media only screen and ", " {\n    grid-template-columns: 1fr;\n    min-height: initial;\n    padding: 3.5rem 3rem;\n  }\n"], ["\n  padding: 0 4.5rem;\n  border-radius: 8px;\n  background: #FFF;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  max-width: 672px;\n  color: var(--dark);\n  text-align: start;\n  align-content: center;\n  position: relative;\n  min-height: 333px;\n  box-sizing: border-box;\n  @media only screen and ", " {\n    grid-template-columns: 1fr;\n    min-height: initial;\n    padding: 3.5rem 3rem;\n  }\n"])), devices_1.devices.md);
 exports.TextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 1rem;\n"], ["\n  margin-top: 1rem;\n"])));
 exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
 exports.Description = styled_components_1.default.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 1rem 0 0 0;\n"], ["\n  margin: 1rem 0 0 0;\n"])));

package/dist/components/ValueProposition/layouts/vertical/index.js

@@ -17,9 +17,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Vertical_styled_1 = require("../vertical/Vertical.styled");
 var classnames_1 = __importDefault(require("classnames"));
-var react_device_detect_1 = require("react-device-detect");
 var Vertical = function (props) {
-    var image = props.image, title = props.title, description = props.description, numberAlignment = props.numberAlignment, hasNumber = props.hasNumber, number = props.number;
-    return ((0, jsx_runtime_1.jsxs)(Vertical_styled_1.VerticalStyled, __assign({}, props, { children: [hasNumber && (0, jsx_runtime_1.jsx)(Vertical_styled_1.Number, { numberAlignment: numberAlignment, className: (react_device_detect_1.isMobile ? 'headline-black-48-58' : 'display-black-72-87'), children: number }), (0, jsx_runtime_1.jsx)(Vertical_styled_1.ImageWrapper, { children: image }), (0, jsx_runtime_1.jsxs)(Vertical_styled_1.TextWrapper, { children: [(0, jsx_runtime_1.jsx)(Vertical_styled_1.Title, { className: (0, classnames_1.default)((react_device_detect_1.isMobile ? 'title-bold-16-19' : 'headline-bold-20-24')), children: title }), description && (0, jsx_runtime_1.jsx)(Vertical_styled_1.Description, { className: (0, classnames_1.default)((react_device_detect_1.isMobile ? 'body-regular-13-16' : 'title-regular-16-19')), children: description })] })] })));
+    var image = props.image, title = props.title, description = props.description, numberAlignment = props.numberAlignment, hasNumber = props.hasNumber, number = props.number, isMobile = props.isMobile;
+    return ((0, jsx_runtime_1.jsxs)(Vertical_styled_1.VerticalStyled, __assign({}, props, { children: [hasNumber && (0, jsx_runtime_1.jsx)(Vertical_styled_1.Number, { numberAlignment: numberAlignment, className: (isMobile ? 'headline-black-48-58' : 'display-black-72-87'), children: number }), (0, jsx_runtime_1.jsx)(Vertical_styled_1.ImageWrapper, { children: image }), (0, jsx_runtime_1.jsxs)(Vertical_styled_1.TextWrapper, { children: [(0, jsx_runtime_1.jsx)(Vertical_styled_1.Title, { className: (0, classnames_1.default)((isMobile ? 'title-bold-16-19' : 'headline-bold-20-24')), children: title }), description && (0, jsx_runtime_1.jsx)(Vertical_styled_1.Description, { className: (0, classnames_1.default)((isMobile ? 'body-regular-13-16' : 'title-regular-16-19')), children: description })] })] })));
 };
 exports.default = Vertical;

package/dist/components/ValueProposition/stories/ValueProposition.stories.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Square = exports.Vertical = exports.Horizontal = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var ValueProposition_1 = __importDefault(require("../ValueProposition"));
 var props_1 = require("../props");
@@ -31,7 +31,7 @@ exports.default = {
 };
 exports.Default = {
     args: {
-        image: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/logo.svg", width: 164, height: 164 }),
+        image: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/icon-value-prop-box.svg", width: 164, height: 164 }),
         title: 'Kurye ile eve teslim',
         description: 'Kargoya gitmene hiç gerek yok! Cihazı istediğin gün adresine teslim ediyoruz ve tekrar adresinden teslim alıyoruz.',
         hasNumber: false,
@@ -42,3 +42,12 @@ exports.Default = {
         hasDivider: false,
     },
 };
+exports.Horizontal = {
+    args: __assign(__assign({}, exports.Default.args), { layout: 'horizontal', image: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/icon-value-prop-box.svg", width: 164, height: 164 }) }),
+};
+exports.Vertical = {
+    args: __assign(__assign({}, exports.Default.args), { layout: 'vertical', image: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/how-it-works-step-1.svg", width: 88, height: 88 }), hasNumber: true }),
+};
+exports.Square = {
+    args: __assign(__assign({}, exports.Default.args), { image: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/how-it-works-step-1.svg", width: 88, height: 88 }), layout: 'square', hasDivider: true, dividerType: "waveArrowUp" }),
+};

package/package.json

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