krl-alfred 1.56.0 → 1.57.0

package/dist/components/ProductCard/ProductCard.js

@@ -19,12 +19,15 @@ var props_1 = require("./props");
 var prop_types_1 = __importDefault(require("prop-types"));
 var Checklist_1 = __importDefault(require("./types/Checklist"));
 var Standart_1 = __importDefault(require("./types/Standart"));
+var Horizontal_1 = __importDefault(require("./types/Horizontal"));
 var ProductCard = function (props) {
-    switch (props.type) {
+    switch (props.layout) {
         case 'checklist':
             return (0, jsx_runtime_1.jsx)(Checklist_1.default, __assign({}, props));
         case 'standart':
             return (0, jsx_runtime_1.jsx)(Standart_1.default, __assign({}, props));
+        case 'horizontal':
+            return (0, jsx_runtime_1.jsx)(Horizontal_1.default, __assign({}, props));
         default:
             return (0, jsx_runtime_1.jsx)(Checklist_1.default, __assign({}, props));
     }
@@ -42,6 +45,6 @@ ProductCard.defaultProps = {
     description: "10.9” Retina Display, 12MP Rear Camera, Touch ID,...",
     productChecked: false,
     disabled: false,
-    type: props_1.types[0],
+    layout: props_1.layouts[0],
     //checkboxId : `productCheckBox_${(Math.random() + 1).toString(36).substring(2)}`
 };

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

@@ -7,9 +7,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StandartStyled = exports.ChecklistStyled = void 0;
+exports.HorizontalStyled = exports.StandartStyled = exports.ChecklistStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
 exports.ChecklistStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  max-width: 634px;\n  ", "\n  .ProductCardInner {\n    border: 1px solid var(--dark-opacity-10);\n    border-radius: 8px;\n    padding: 24px;\n    background-color: white;\n    grid-template-columns: auto auto 1fr;\n    display: grid;\n    justify-content: flex-start;\n    @media only screen and ", " {\n      padding: 24px 16px;\n    }\n    .ProductCardCheckboxContent{\n      height: 64px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      .indicator{ \n        margin-right: 24px;\n        @media only screen and ", " {\n          margin-right: 8px;\n        }\n      }\n    }\n    .ProductCardImg {\n      width: 64px;\n      height: 64px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 16px;\n      overflow: hidden;\n      @media only screen and ", " {\n        margin-right: 16px;\n      }\n\n      > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n      }\n    }\n    .ProductCardTitle{\n      min-height: 66px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      text-align: start;\n    }\n    .ProductCardContent{ \n      margin: 24px auto 0 0;\n      grid-column-start: 1;\n      grid-column-end: 4;\n      width: 100%;\n    }\n  }\n"], ["\n  display: block;\n  max-width: 634px;\n  ", "\n  .ProductCardInner {\n    border: 1px solid var(--dark-opacity-10);\n    border-radius: 8px;\n    padding: 24px;\n    background-color: white;\n    grid-template-columns: auto auto 1fr;\n    display: grid;\n    justify-content: flex-start;\n    @media only screen and ", " {\n      padding: 24px 16px;\n    }\n    .ProductCardCheckboxContent{\n      height: 64px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      .indicator{ \n        margin-right: 24px;\n        @media only screen and ", " {\n          margin-right: 8px;\n        }\n      }\n    }\n    .ProductCardImg {\n      width: 64px;\n      height: 64px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 16px;\n      overflow: hidden;\n      @media only screen and ", " {\n        margin-right: 16px;\n      }\n\n      > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n      }\n    }\n    .ProductCardTitle{\n      min-height: 66px;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      text-align: start;\n    }\n    .ProductCardContent{ \n      margin: 24px auto 0 0;\n      grid-column-start: 1;\n      grid-column-end: 4;\n      width: 100%;\n    }\n  }\n"])), function (props) { return props.disabled ? "\n  user-select:none;\n  pointer-events:none;\n  " : ""; }, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm);
 exports.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'; });
-var templateObject_1, templateObject_2;
+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/props.js

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

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

@@ -13,7 +13,7 @@ exports.default = {
     tags: ['autodocs'],
     argTypes: {
         contentAlignment: { control: 'select', options: props_1.contentAlignments },
-        type: { control: 'select', options: props_1.types },
+        layout: { control: 'select', options: props_1.layouts },
         disabled: { control: 'boolean' },
         hasDiscount: { control: 'boolean' },
     }
@@ -33,7 +33,7 @@ exports.Default = {
         period: "hafta",
         content: "Content",
         contentAlignment: "left",
-        type: "checklist",
+        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" })
     },

package/dist/components/ProductCard/types/Horizontal.js

@@ -0,0 +1,29 @@
+"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 ProductCard_styled_1 = require("../ProductCard.styled");
+var react_device_detect_1 = require("react-device-detect");
+var classnames_1 = __importDefault(require("classnames"));
+var Horizontal = function (props) {
+    var discountRate = props.discountRate, image = props.image, hasDiscount = props.hasDiscount, title = props.title, description = props.description, oldPrice = props.oldPrice, oldPricePeriod = props.oldPricePeriod, price = props.price, period = props.period;
+    var LinkComponent = function (_a) {
+        var item = _a.item, children = _a.children;
+        return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", { href: item.slug, children: children }));
+    };
+    return ((0, jsx_runtime_1.jsx)(ProductCard_styled_1.HorizontalStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(LinkComponent, { item: props, children: (0, jsx_runtime_1.jsxs)("div", { className: "horizontalWrapper", children: [(0, jsx_runtime_1.jsx)("div", { className: "img", children: image }), (0, jsx_runtime_1.jsxs)("div", { className: "text", children: [(0, jsx_runtime_1.jsx)("strong", { className: (0, classnames_1.default)('title', (react_device_detect_1.isMobile ? 'caption-semi-bold-11-13' : 'title-semi-bold-16-19')), children: title }), !react_device_detect_1.isMobile && (0, jsx_runtime_1.jsx)("p", { className: (0, classnames_1.default)('description', 'body-medium-14-17'), children: description }), (0, jsx_runtime_1.jsxs)("div", { className: "priceContent", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("price", (react_device_detect_1.isMobile ? 'caption-extra-bold-12-15' : 'body-extra-bold-14-17')), children: price }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("period", (react_device_detect_1.isMobile ? 'caption-regular-12-15' : 'body-regular-13-16')), children: ["/ ", period] })] })] })] }) }) })));
+};
+exports.default = Horizontal;

package/dist/components/SearchBox/SearchBox.js

@@ -0,0 +1,21 @@
+"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 SearchBox_styled_1 = require("./SearchBox.styled");
+var Icon_1 = __importDefault(require("../Icon/Icon"));
+var Spinner_1 = __importDefault(require("../Spinner"));
+var SearchBox = function (props) {
+    var onKeyUp = props.onKeyUp, onBlur = props.onBlur, onFocus = props.onFocus, children = props.children, isLoading = props.isLoading, showResultList = props.showResultList;
+    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: "Teknolojik \u00FCr\u00FCn ara...", 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 }))] }));
+};
+SearchBox.defaultProps = {
+    showResultList: false,
+    isLoading: false,
+};
+exports.default = SearchBox;

package/dist/components/SearchBox/SearchBox.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.LoadingStyled = exports.SearchBoxStyled = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.SearchBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  .inputWrapper {\n    position: relative;\n\n    input {\n      box-sizing: border-box;\n      width: 100%;\n      height: 56px;\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\n    .icon {\n      position: absolute;\n      right: 8px;\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: 536px;\n    box-sizing: border-box;\n    overflow: auto;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 5;\n  }\n"], ["\n  position: relative;\n  .inputWrapper {\n    position: relative;\n\n    input {\n      box-sizing: border-box;\n      width: 100%;\n      height: 56px;\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\n    .icon {\n      position: absolute;\n      right: 8px;\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: 536px;\n    box-sizing: border-box;\n    overflow: auto;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: 5;\n  }\n"])));
+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: center;\n"], ["\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+var templateObject_1, templateObject_2;

package/dist/components/SearchBox/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var SearchBox_1 = require("./SearchBox");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SearchBox_1).default; } });

package/dist/components/SearchBox/props.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/SearchBox/stories/SearchBox.stories.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var SearchBox_1 = __importDefault(require("../SearchBox"));
+exports.default = {
+    title: 'Components/SearchBox',
+    component: SearchBox_1.default,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+exports.Default = {
+    args: {
+        onBlur: function (e) { return console.log(e, "onBlur"); },
+        onFocus: function (e) { return console.log(e, "onFocus"); },
+        onKeyUp: function (e) { return console.log(e.target.value, "onKeyUp"); },
+    },
+};

package/dist/components/ValueProposition/ValueProposition.js

@@ -0,0 +1,31 @@
+"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 ValueProposition_styled_1 = require("./ValueProposition.styled");
+var classnames_1 = __importDefault(require("classnames"));
+var ValueProposition = function (props) {
+    var image = props.image, title = props.title, description = props.description, isInverted = props.isInverted, hasNumber = props.hasNumber, layout = props.layout, size = props.size;
+    return ((0, jsx_runtime_1.jsxs)(ValueProposition_styled_1.ValuePropositionStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)(ValueProposition_styled_1.ImageWrapper, { layout: layout, children: image }), (0, jsx_runtime_1.jsxs)(ValueProposition_styled_1.TextWrapper, { layout: layout, children: [(0, jsx_runtime_1.jsx)(ValueProposition_styled_1.Title, { layout: layout, isInverted: isInverted, className: (0, classnames_1.default)(size === 'large' ? 'headline-bold-20-24' : 'title-bold-16-19'), children: title }), description && (0, jsx_runtime_1.jsx)(ValueProposition_styled_1.Description, { layout: layout, className: "title-regular-16-19", children: description })] })] })));
+};
+ValueProposition.defaultProps = {
+    layout: 'vertical',
+    size: 'large',
+    title: 'Kurye ile eve teslim',
+    isInverted: false,
+    hasNumber: false,
+};
+exports.default = ValueProposition;

package/dist/components/ValueProposition/ValueProposition.styled.js

@@ -0,0 +1,17 @@
+"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.ImageWrapper = exports.Description = exports.Title = exports.TextWrapper = exports.ValuePropositionStyled = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.ValuePropositionStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: ", ";\n  border-radius: 8px;\n  background: ", ";\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: grid;\n  grid-template-columns: ", ";\n  align-items: center;\n  max-width: 600px;\n  color: var(--dark);\n  text-align: ", ";\n  aspect-ratio: ", ";\n  align-content: center;\n"], ["\n  padding: ", ";\n  border-radius: 8px;\n  background: ", ";\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: grid;\n  grid-template-columns: ", ";\n  align-items: center;\n  max-width: 600px;\n  color: var(--dark);\n  text-align: ", ";\n  aspect-ratio: ", ";\n  align-content: center;\n"])), function (props) { return props.size === 'small' ? '1rem' : '2rem'; }, function (props) { return props.isInverted ? 'var(--primary-opacity-10)' : '#FFF'; }, function (props) { return props.layout === 'vertical' ? '1fr' : 'auto 1fr'; }, function (props) { return props.size === 'small' ? 'center' : 'start'; }, function (props) { return props.size === 'small' ? '1/1' : 'initial'; });
+exports.TextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (props) { return props.layout === 'vertical' ? '1rem' : '0'; });
+exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  display: block;\n  min-height: ", ";\n"], ["\n  color: ", ";\n  display: block;\n  min-height: ", ";\n"])), function (props) { return props.isInverted ? 'var(--primary)' : 'inherit'; }, function (props) { return props.size === 'small' ? '38px' : 'initial'; });
+exports.Description = styled_components_1.default.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 1rem 0 0 0;\n  min-height: ", ";;\n"], ["\n  margin: 1rem 0 0 0;\n  min-height: ", ";;\n"])), function (props) { return props.layout === 'vertical' ? '76px' : 'initial'; });
+exports.ImageWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (props) { return props.layout === 'vertical' ? '0' : '2rem'; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/ValueProposition/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var ValueProposition_1 = require("./ValueProposition");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ValueProposition_1).default; } });

package/dist/components/ValueProposition/props.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sizes = exports.layouts = void 0;
+exports.layouts = ['vertical', 'horizontal'];
+exports.sizes = ['small', 'medium', 'large'];
+var ValuePropositionDefault = {
+    layout: exports.layouts[0],
+    size: exports.sizes[0],
+};

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

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ValueProposition_1 = __importDefault(require("../ValueProposition"));
+var props_1 = require("../props");
+exports.default = {
+    title: 'Components/ValueProposition',
+    component: ValueProposition_1.default,
+    tags: ['autodocs'],
+    argTypes: {
+        layout: { control: 'select', options: props_1.layouts },
+        size: { control: 'select', options: props_1.sizes },
+    }
+};
+exports.Default = {
+    args: {
+        image: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/logo.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,
+        isInverted: false,
+        layout: 'horizontal',
+        size: 'large'
+    },
+};

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.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.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"));
@@ -38,3 +38,7 @@ var ActionButton_1 = __importDefault(require("./components/ActionButton/ActionBu
 exports.ActionButton = ActionButton_1.default;
 var Textarea_1 = __importDefault(require("./components/Textarea"));
 exports.Textarea = Textarea_1.default;
+var ValueProposition_1 = __importDefault(require("./components/ValueProposition"));
+exports.ValueProposition = ValueProposition_1.default;
+var SearchBox_1 = __importDefault(require("./components/SearchBox"));
+exports.SearchBox = SearchBox_1.default;

package/package.json

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