krl-alfred 1.62.0 → 1.63.0

package/dist/components/ProductCard/ProductCard.js

@@ -20,15 +20,12 @@ var prop_types_1 = __importDefault(require("prop-types"));
 var Checklist_1 = __importDefault(require("./layouts/Checklist"));
 var Standart_1 = __importDefault(require("./layouts/Standart"));
 var Horizontal_1 = __importDefault(require("./layouts/Horizontal"));
-var Suggestion_1 = __importDefault(require("./layouts/Suggestion"));
 var ProductCard = function (props) {
     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 'suggestion':
-            return (0, jsx_runtime_1.jsx)(Suggestion_1.default, __assign({}, props));
         case 'horizontal':
             return (0, jsx_runtime_1.jsx)(Horizontal_1.default, __assign({}, props));
         default:
@@ -42,7 +39,6 @@ ProductCard.propTypes = {
     checkboxId: prop_types_1.default.string,
     description: prop_types_1.default.string,
     value: prop_types_1.default.string,
-    buttonText: prop_types_1.default.string
 };
 ProductCard.defaultProps = {
     title: "Apple İpad Air WİFİ 64GB (2020)",
@@ -50,6 +46,5 @@ ProductCard.defaultProps = {
     productChecked: false,
     disabled: false,
     layout: props_1.layouts[0],
-    buttonText: "Cihaz Öner",
     //checkboxId : `productCheckBox_${(Math.random() + 1).toString(36).substring(2)}`
 };

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

@@ -7,11 +7,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HorizontalStyled = exports.SuggestionStyled = 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  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.SuggestionStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __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  text-align: center;\n  min-height: 346px;\n  display: grid;\n  grid-template-rows: 1fr auto;\n  align-items: center;\n  .icon{\n    width: 56px;\n    height: 56px;\n    border-radius: 50%;\n    background-color: var(--primary-opacity-5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0 auto 1.5rem auto;\n    svg{\n      path , circle{\n        stroke:var(--primary)\n      }\n    }\n  }\n  .productCardContent{\n    .productCardTitle{\n      display: block;\n      color: var(--dark);\n    }\n    .productCardDescription{\n      display: block;\n      margin-top: 1rem;\n      color: var(--grey-40);\n      margin-bottom: 0;\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  text-align: center;\n  min-height: 346px;\n  display: grid;\n  grid-template-rows: 1fr auto;\n  align-items: center;\n  .icon{\n    width: 56px;\n    height: 56px;\n    border-radius: 50%;\n    background-color: var(--primary-opacity-5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0 auto 1.5rem auto;\n    svg{\n      path , circle{\n        stroke:var(--primary)\n      }\n    }\n  }\n  .productCardContent{\n    .productCardTitle{\n      display: block;\n      color: var(--dark);\n    }\n    .productCardDescription{\n      display: block;\n      margin-top: 1rem;\n      color: var(--grey-40);\n      margin-bottom: 0;\n    }\n  }\n"])));
-exports.HorizontalStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __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, templateObject_4;
+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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.layouts = exports.contentAlignments = void 0;
 exports.contentAlignments = ['left', 'center'];
-exports.layouts = ['checklist', 'standart', 'horizontal', 'suggestion'];
+exports.layouts = ['checklist', 'standart', 'horizontal'];
 var ProductCardDefault = {
     hasCheckbox: false,
     contentAlignment: exports.contentAlignments[0],

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

@@ -14,13 +14,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Suggestion = exports.Standart = exports.Checklist = exports.Horizontal = 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: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: ["standart", "suggestion"].includes(props.layout) ? '240px' : 'initial' }, children: (0, jsx_runtime_1.jsx)(ProductCard_1.default, __assign({}, props)) }); },
+    component: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: ["standart"].includes(props.layout) ? '240px' : 'initial' }, children: (0, jsx_runtime_1.jsx)(ProductCard_1.default, __assign({}, props)) }); },
     tags: ['autodocs'],
     argTypes: {
         contentAlignment: { control: 'select', options: props_1.contentAlignments },
@@ -57,6 +57,3 @@ exports.Checklist = {
 exports.Standart = {
     args: __assign(__assign({}, exports.Default.args), { layout: "standart" }),
 };
-exports.Suggestion = {
-    args: __assign(__assign({}, exports.Default.args), { layout: "suggestion", title: "Aradığını bulamadın mı?", description: "Aradığını bulamadıysan, dilediğin cihazı Kiralarsın.com’a önerebilirsin." }),
-};

package/dist/components/SuggestBox/SuggestBox.js

@@ -0,0 +1,25 @@
+"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 SuggestBox_styled_1 = require("./SuggestBox.styled");
+var Icon_1 = __importDefault(require("../Icon/Icon"));
+var Button_1 = __importDefault(require("../Button"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var SuggestBox = function (props) {
+    var buttonOnClick = props.buttonOnClick, title = props.title, description = props.description, buttonText = props.buttonText;
+    return ((0, jsx_runtime_1.jsxs)(SuggestBox_styled_1.SuggestBoxStyled, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", width: "16px", height: "16px" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "productCardContent", children: [(0, jsx_runtime_1.jsx)("strong", { className: "productCardTitle title-bold-16-19", children: title }), (0, jsx_runtime_1.jsx)("p", { className: "productCardDescription body-medium-14-17", children: description })] })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: buttonOnClick, size: "big", width: "100%", variant: "primary", children: buttonText }) })] }));
+};
+SuggestBox.propTypes = {
+    description: prop_types_1.default.string,
+    value: prop_types_1.default.string,
+    buttonText: prop_types_1.default.string
+};
+SuggestBox.defaultProps = {
+    title: "Aradığını bulamadın mı?",
+    description: "Aradığını bulamadıysan, dilediğin cihazı Kiralarsın.com’a önerebilirsin.",
+    buttonText: "Cihaz Öner",
+};
+exports.default = SuggestBox;

package/dist/components/SuggestBox/SuggestBox.styled.js

@@ -0,0 +1,13 @@
+"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.SuggestBoxStyled = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.SuggestBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __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  text-align: center;\n  min-height: 346px;\n  display: grid;\n  grid-template-rows: 1fr auto;\n  align-items: center;\n  .icon{\n    width: 56px;\n    height: 56px;\n    border-radius: 50%;\n    background-color: var(--primary-opacity-5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0 auto 1.5rem auto;\n    svg{\n      path , circle{\n        stroke:var(--primary)\n      }\n    }\n  }\n  .productCardContent{\n    .productCardTitle{\n      display: block;\n      color: var(--dark);\n    }\n    .productCardDescription{\n      display: block;\n      margin-top: 1rem;\n      color: var(--grey-40);\n      margin-bottom: 0;\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  text-align: center;\n  min-height: 346px;\n  display: grid;\n  grid-template-rows: 1fr auto;\n  align-items: center;\n  .icon{\n    width: 56px;\n    height: 56px;\n    border-radius: 50%;\n    background-color: var(--primary-opacity-5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0 auto 1.5rem auto;\n    svg{\n      path , circle{\n        stroke:var(--primary)\n      }\n    }\n  }\n  .productCardContent{\n    .productCardTitle{\n      display: block;\n      color: var(--dark);\n    }\n    .productCardDescription{\n      display: block;\n      margin-top: 1rem;\n      color: var(--grey-40);\n      margin-bottom: 0;\n    }\n  }\n"])));
+var templateObject_1;

package/dist/components/SuggestBox/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 SuggestBox_1 = require("./SuggestBox");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SuggestBox_1).default; } });

package/dist/components/SuggestBox/props.js

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

package/dist/components/SuggestBox/stories/SuggestBox.stories.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 });
+exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var SuggestBox_1 = __importDefault(require("../SuggestBox"));
+exports.default = {
+    title: 'Components/SuggestBox',
+    component: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: '240px' }, children: (0, jsx_runtime_1.jsx)(SuggestBox_1.default, __assign({}, props)) }); },
+    tags: ['autodocs'],
+    argTypes: {}
+};
+exports.Default = {
+    args: {
+        title: "Aradığını bulamadın mı?",
+        description: "Aradığını bulamadıysan, dilediğin cihazı Kiralarsın.com’a önerebilirsin.",
+    },
+};

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.Toast = exports.Banner = exports.Footer = exports.Accordion = exports.Divider = exports.SearchBox = exports.ValueProposition = exports.Textarea = exports.ActionButton = exports.RadioButton = exports.Icon = exports.Agreement = exports.Alert = exports.Stepper = exports.ProductCard = exports.OtpInput = exports.Modal = exports.Input = exports.CircleProgress = exports.Checkbox = exports.CategoryMenu = exports.Breadcrumbs = exports.Spinner = exports.Button = void 0;
+exports.SuggestBox = exports.Toast = exports.Banner = exports.Footer = exports.Accordion = exports.Divider = exports.SearchBox = exports.ValueProposition = exports.Textarea = exports.ActionButton = exports.RadioButton = exports.Icon = exports.Agreement = exports.Alert = exports.Stepper = exports.ProductCard = exports.OtpInput = exports.Modal = exports.Input = exports.CircleProgress = exports.Checkbox = exports.CategoryMenu = exports.Breadcrumbs = exports.Spinner = exports.Button = void 0;
 var Button_1 = __importDefault(require("./components/Button"));
 exports.Button = Button_1.default;
 var Spinner_1 = __importDefault(require("./components/Spinner"));
@@ -52,3 +52,5 @@ var Banner_1 = __importDefault(require("./components/Banner"));
 exports.Banner = Banner_1.default;
 var Toast_1 = __importDefault(require("./components/Toast"));
 exports.Toast = Toast_1.default;
+var SuggestBox_1 = __importDefault(require("./components/SuggestBox"));
+exports.SuggestBox = SuggestBox_1.default;

package/package.json

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

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

@@ -1,25 +0,0 @@
-"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 Icon_1 = __importDefault(require("../../Icon/Icon"));
-var Button_1 = __importDefault(require("../../Button"));
-var Suggestion = function (props) {
-    var buttonOnClick = props.buttonOnClick, title = props.title, description = props.description, buttonText = props.buttonText;
-    return ((0, jsx_runtime_1.jsxs)(ProductCard_styled_1.SuggestionStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", width: "16px", height: "16px" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "productCardContent", children: [(0, jsx_runtime_1.jsx)("strong", { className: "productCardTitle title-bold-16-19", children: title }), (0, jsx_runtime_1.jsx)("p", { className: "productCardDescription body-medium-14-17", children: description })] })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: buttonOnClick, size: "big", width: "100%", variant: "primary", children: buttonText }) })] })));
-};
-exports.default = Suggestion;