krl-alfred 1.68.4 → 1.69.0

package/dist/components/Assurance/Assurance.js

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

package/dist/components/Assurance/Assurance.styled.js

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

package/dist/components/Assurance/stories/Assurance.stories.js

@@ -17,18 +17,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Assurance_1 = __importDefault(require("../Assurance"));
+var props_1 = require("../../Tooltip/props");
 exports.default = {
     title: 'Components/Assurance',
     //component: (props) => <div style={{margin : "15rem 0 0 11rem", display:"block"}}><Assurance {...props}/></div>,
     component: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { margin: "15rem 0 0 0", display: "block" }, children: (0, jsx_runtime_1.jsx)(Assurance_1.default, __assign({}, props)) }); },
     tags: ['autodocs'],
-    argTypes: {}
+    argTypes: {
+        checked: { control: 'boolean' },
+        hasBgColor: { control: 'boolean' },
+        hasBorder: { control: 'boolean' },
+        isTitleWrap: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        tooltipPosition: { control: 'select', options: props_1.positions },
+    }
 };
 exports.Default = {
     args: {
         priceText: '+115 TL',
         onChange: function (e) { return console.log(e.target.checked); },
         isMobile: false,
+        height: "90px",
+        tooltipTitle: "",
+        tooltipDescription: ""
         //width : "90%",
     },
 };

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

@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BannerStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../../../constants/devices");
-exports.BannerStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: 1050px;\n  margin: 0 auto;\n\n  .item {\n    background-color: var(--primary-opacity-10);\n    border-radius: 0.5rem;\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: -21px;\n\n      > * {\n        display: block !important;\n      }\n\n      @media only screen and ", " {\n        width: 100%;\n        margin-bottom: 24px;\n        margin-top: -55px;\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-10);\n    border-radius: 0.5rem;\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: -21px;\n\n      > * {\n        display: block !important;\n      }\n\n      @media only screen and ", " {\n        width: 100%;\n        margin-bottom: 24px;\n        margin-top: -55px;\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, devices_1.devices.lg);
+exports.BannerStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: 1050px;\n  margin: 0 auto;\n\n  .item {\n    background-color: var(--primary-opacity-10);\n    border-radius: 0.5rem;\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: calc(3rem + 55px);\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: -21px;\n\n      > * {\n        display: block !important;\n      }\n\n      @media only screen and ", " {\n        width: 100%;\n        margin-bottom: 24px;\n        margin-top: -55px;\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-10);\n    border-radius: 0.5rem;\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: calc(3rem + 55px);\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: -21px;\n\n      > * {\n        display: block !important;\n      }\n\n      @media only screen and ", " {\n        width: 100%;\n        margin-bottom: 24px;\n        margin-top: -55px;\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, devices_1.devices.lg);
 var templateObject_1;

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

@@ -23,6 +23,6 @@ exports.SubCategoryItem = styled_components_1.default.li(templateObject_10 || (t
 exports.SubCategoryItemList = styled_components_1.default.ul(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: grid;\n  padding: 0;\n  gap: 4px 0;\n"], ["\n  display: grid;\n  padding: 0;\n  gap: 4px 0;\n"])));
 exports.SubCategoryItemListItem = styled_components_1.default.li(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: block;\n  padding: 0;\n  > a {\n    text-decoration: none;\n    color: var(--dark);\n    padding: 8px;\n    border-radius: 5px;\n    display: block;\n    ", "\n      background-color : var(--primary-opacity-10);\n      color: var(--primary);\n      font-weight: 700;\n    ", "\n    ", "\n  }\n"], ["\n  display: block;\n  padding: 0;\n  > a {\n    text-decoration: none;\n    color: var(--dark);\n    padding: 8px;\n    border-radius: 5px;\n    display: block;\n    ", "\n      background-color : var(--primary-opacity-10);\n      color: var(--primary);\n      font-weight: 700;\n    ", "\n    ", "\n  }\n"])), function (props) { return (props.isActive ? "" : "&:hover{"); }, function (props) { return (props.isActive ? "" : "}"); }, function (props) { return (props.isSeeAll ? "font-weight: 700;" : ""); });
 exports.BreadcrumbsListDropdownListItem = styled_components_1.default.li(templateObject_13 || (templateObject_13 = __makeTemplateObject([""], [""])));
-exports.SubMenuMobileWrapper = styled_components_1.default.ul(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  position: relative;\n  overflow: auto;\n  white-space: nowrap;\n  gap: 8px;\n  scroll-snap-type: x proximity;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  overflow-x: scroll;\n  padding: 2rem 15px 2rem 15px;\n  margin: 0 -15px 0 -15px;\n  display: none;\n  width: calc(100% + 30px);\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  &:empty {\n    padding: 2rem 15px 1rem 15px;\n  }\n  @media only screen and ", " {\n    display: flex;\n  }\n"], ["\n  position: relative;\n  overflow: auto;\n  white-space: nowrap;\n  gap: 8px;\n  scroll-snap-type: x proximity;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  overflow-x: scroll;\n  padding: 2rem 15px 2rem 15px;\n  margin: 0 -15px 0 -15px;\n  display: none;\n  width: calc(100% + 30px);\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  &:empty {\n    padding: 2rem 15px 1rem 15px;\n  }\n  @media only screen and ", " {\n    display: flex;\n  }\n"])), devices_1.devices.md);
+exports.SubMenuMobileWrapper = styled_components_1.default.ul(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  position: relative;\n  overflow: auto;\n  white-space: nowrap;\n  gap: 8px;\n  scroll-snap-type: x proximity;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  overflow-x: scroll;\n  padding: 2rem 15px 2rem 15px;\n  margin: 0 -15px 0 -15px;\n  display: none;\n  width: calc(100% + 30px);\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  &:empty {\n    padding: 2rem 15px 0.5rem 15px;\n  }\n  @media only screen and ", " {\n    display: flex;\n  }\n"], ["\n  position: relative;\n  overflow: auto;\n  white-space: nowrap;\n  gap: 8px;\n  scroll-snap-type: x proximity;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  overflow-x: scroll;\n  padding: 2rem 15px 2rem 15px;\n  margin: 0 -15px 0 -15px;\n  display: none;\n  width: calc(100% + 30px);\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  &:empty {\n    padding: 2rem 15px 0.5rem 15px;\n  }\n  @media only screen and ", " {\n    display: flex;\n  }\n"])), devices_1.devices.md);
 exports.SubMenuMobileItem = styled_components_1.default.li(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: block;\n  a {\n    display: block;\n    padding: 0 24px;\n    height:40px;\n    line-height:38px;\n    background: #ffffff;\n    border: 1px solid ", ";\n    box-shadow: 0 6px 30px #eae9f0;\n    border-radius: 8px;\n    text-align: center;\n    box-sizing:border-box;\n    color: ", ";\n  }\n"], ["\n  display: block;\n  a {\n    display: block;\n    padding: 0 24px;\n    height:40px;\n    line-height:38px;\n    background: #ffffff;\n    border: 1px solid ", ";\n    box-shadow: 0 6px 30px #eae9f0;\n    border-radius: 8px;\n    text-align: center;\n    box-sizing:border-box;\n    color: ", ";\n  }\n"])), function (props) { return (props.isActive ? "var(--primary)" : "var(--grey-10)"); }, function (props) { return (props.isActive ? "var(--primary)" : "var(--dark-opacity-75)"); });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;

package/dist/components/ContentBox/ContentBox.js

@@ -16,5 +16,9 @@ var ContentBox_styled_1 = require("./ContentBox.styled");
 var ContentBox = function (props) {
     return ((0, jsx_runtime_1.jsx)(ContentBox_styled_1.ContentBoxStyled, __assign({}, props, { children: props.children })));
 };
-ContentBox.defaultProps = {};
+ContentBox.defaultProps = {
+    variant: "standart",
+    size: "medium",
+    hasBorder: true,
+};
 exports.default = ContentBox;

package/dist/components/ContentBox/ContentBox.styled.js

@@ -9,14 +9,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContentBoxStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.ContentBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: ", ";\n  border-radius: 8px;\n  border: 1px solid var(--dark-opacity-10);\n  background: #fff;\n"], ["\n  padding: ", ";\n  border-radius: 8px;\n  border: 1px solid var(--dark-opacity-10);\n  background: #fff;\n"])), function (props) {
+exports.ContentBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: ", ";\n  border-radius: ", ";\n  background: ", ";\n  border: ", ";\n"], ["\n  padding: ", ";\n  border-radius: ", ";\n  background: ", ";\n  border: ", ";\n"])), function (props) {
     switch (props.size) {
+        case 'xsmall':
+            return "1rem";
         case 'small':
             return "1.5rem";
         case 'medium':
             return "2rem";
+        case 'none':
+            return "0";
         default:
             return "1.5rem";
     }
-});
+}, function (props) { return props.hasBorder ? "8px" : "0"; }, function (props) { return props.variant === "colorful" ? "var(--primary-opacity-5)" : "transparent"; }, function (props) { return props.hasBorder ? "1px solid var(--dark-opacity-10)" : "none"; });
 var templateObject_1;

package/dist/components/ContentBox/props.js

@@ -1,4 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sizes = void 0;
-exports.sizes = ['small', 'medium'];
+exports.variants = exports.sizes = void 0;
+exports.sizes = ['xsmall', 'small', 'medium', 'none'];
+exports.variants = ['standart', 'colorful'];

package/dist/components/ContentBox/stories/ContentBox.stories.js

@@ -13,6 +13,7 @@ exports.default = {
     tags: ['autodocs'],
     argTypes: {
         size: { control: 'select', options: props_1.sizes },
+        variant: { control: 'select', options: props_1.variants },
     }
 };
 exports.Default = {

package/dist/components/Icon/Copy.js

@@ -0,0 +1,40 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var React = __importStar(require("react"));
+var SvgCopy = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("rect", { x: 9, y: 5, width: 9, height: 11, rx: 2, fill: "white", stroke: "#9763F6", strokeWidth: 2 }), (0, jsx_runtime_1.jsx)("rect", { x: 6, y: 8, width: 9, height: 11, rx: 2, fill: "white", stroke: "#9763F6", strokeWidth: 2 })] }))); };
+exports.default = SvgCopy;

package/dist/components/Icon/index.js

@@ -26,9 +26,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Call = exports.Calendar = exports.BuyBig = exports.Buy = exports.ButtonIcon = exports.Box = exports.Bookmark = exports.Bag3 = exports.Bag = exports.Bag2 = exports.Baby = exports.AskedQuestions = exports.ArrowUpSquare = exports.ArrowUpCircle = exports.ArrowUpBig = exports.ArrowUpAnimate = exports.ArrowUp = exports.ArrowSmallUp = exports.ArrowSmallRightStroke = exports.ArrowSmallRightBackground = exports.ArrowSmallRight = exports.ArrowSmallLeftStroke = exports.ArrowSmallLeftHover = exports.ArrowSmallLeft = exports.ArrowSmallDown = exports.ArrowShare = exports.ArrowRightSquare = exports.ArrowRightCircle = exports.ArrowRightBig = exports.ArrowRightAnimate = exports.ArrowRight = exports.ArrowPlusCircle = exports.ArrowMediumRight = exports.ArrowMedium = exports.ArrowLeftSquare = exports.ArrowLeftCircle = exports.ArrowLeftBig = exports.ArrowLeftAnimate = exports.ArrowLeft = exports.ArrowGo = exports.ArrowDownSquare = exports.ArrowDownCircle = exports.ArrowDownBig = exports.ArrowDownAnimate = exports.ArrowDown = exports.AgreementArrowUp = exports.AgreementArrowDown = exports.Again = exports.AddUser = exports.Activity = void 0;
-exports.InfoSquare = exports.InfoCircle = exports.Image = exports.House = exports.Home = exports.Hide = exports.Heart = exports.Grid = exports.Graph = exports.Game = exports.Folder = exports.FilterUp = exports.FilterDown = exports.Filter2 = exports.Filter = exports.FacebookStroke = exports.Facebook = exports.ErrorIcon = exports.EditSquare = exports.Edit = exports.Download = exports.Document = exports.Discovery = exports.Discount = exports.Delete = exports.DarkBadge = exports.Danger = exports.CloseSquare = exports.CloseMiniHover = exports.Closemini = exports.CloseHover = exports.CloseBigHover = exports.CloseBig = exports.Close = exports.CheckMark = exports.CheckboxElementUncheck = exports.CheckboxElementInvalid = exports.CheckboxElementDisabled = exports.CheckboxElementChecked = exports.Chat = exports.Chart = exports.Category = exports.Cargo2 = exports.Cargo = exports.Cargo1 = exports.Campaign = exports.Camera = exports.CallSilent = exports.CallMissed = exports.Calling = void 0;
-exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.ProfilNamePassive = exports.ProfilName = exports.Profile = exports.PriceTag = exports.PoweredByQnbLogo = exports.Pointinghand = exports.PointFinger = exports.PlusSmall = exports.PlusBig = exports.Plus = exports.Play = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = exports.Paper = exports.OrderProgressIcons = exports.NotificationSimpleSmall = exports.NotificationSimple = exports.Notification = exports.Notification1 = exports.NegativeSmall = exports.NegativeBig = exports.MoreSquare = exports.MoreCircle = exports.More = exports.Money = exports.Minus = exports.Message = exports.Mastercard = exports.Logout = exports.Login = exports.Lock = exports.Location = exports.Loading = exports.Live = exports.List = exports.LinkedinStroke = exports.LinkedIn = exports.LikeV1 = exports.Like = exports.Laptop = exports.Language2 = exports.KeyboardClose = exports.Keyboard = exports.InstagramNegative = void 0;
-exports.iconList = exports.Youtube = exports.Work = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet = exports.VolumeUp = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Visa = exports.Video = exports.Upload = exports.Unlock = exports.TwoUser = exports.TwitterStroke = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircle = exports.TickSquare = exports.TicketStar = exports.Ticket = exports.ThreeUser = exports.Tamamlarsin = exports.SwitchPassive = exports.Swap = exports.Steps = exports.Steps2 = exports.Steps1 = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDone = exports.Setting = exports.Setting1 = exports.Send = exports.Securitywithtik = exports.Search = exports.Scan = exports.Sandwatch = exports.Rectangle = exports.RadioButtonElementUnchecked = exports.RadioButtonElementInvalid = void 0;
+exports.InfoCircle = exports.Image = exports.House = exports.Home = exports.Hide = exports.Heart = exports.Grid = exports.Graph = exports.Game = exports.Folder = exports.FilterUp = exports.FilterDown = exports.Filter2 = exports.Filter = exports.FacebookStroke = exports.Facebook = exports.ErrorIcon = exports.EditSquare = exports.Edit = exports.Download = exports.Document = exports.Discovery = exports.Discount = exports.Delete = exports.DarkBadge = exports.Danger = exports.Copy = exports.CloseSquare = exports.CloseMiniHover = exports.Closemini = exports.CloseHover = exports.CloseBigHover = exports.CloseBig = exports.Close = exports.CheckMark = exports.CheckboxElementUncheck = exports.CheckboxElementInvalid = exports.CheckboxElementDisabled = exports.CheckboxElementChecked = exports.Chat = exports.Chart = exports.Category = exports.Cargo2 = exports.Cargo = exports.Cargo1 = exports.Campaign = exports.Camera = exports.CallSilent = exports.CallMissed = exports.Calling = void 0;
+exports.RadioButtonElementChecked = exports.ProfilNamePassive = exports.ProfilName = exports.Profile = exports.PriceTag = exports.PoweredByQnbLogo = exports.Pointinghand = exports.PointFinger = exports.PlusSmall = exports.PlusBig = exports.Plus = exports.Play = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = exports.Paper = exports.OrderProgressIcons = exports.NotificationSimpleSmall = exports.NotificationSimple = exports.Notification = exports.Notification1 = exports.NegativeSmall = exports.NegativeBig = exports.MoreSquare = exports.MoreCircle = exports.More = exports.Money = exports.Minus = exports.Message = exports.Mastercard = exports.Logout = exports.Login = exports.Lock = exports.Location = exports.Loading = exports.Live = exports.List = exports.LinkedinStroke = exports.LinkedIn = exports.LikeV1 = exports.Like = exports.Laptop = exports.Language2 = exports.KeyboardClose = exports.Keyboard = exports.InstagramNegative = exports.InfoSquare = void 0;
+exports.iconList = exports.Youtube = exports.Work = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet = exports.VolumeUp = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Visa = exports.Video = exports.Upload = exports.Unlock = exports.TwoUser = exports.TwitterStroke = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircle = exports.TickSquare = exports.TicketStar = exports.Ticket = exports.ThreeUser = exports.Tamamlarsin = exports.SwitchPassive = exports.Swap = exports.Steps = exports.Steps2 = exports.Steps1 = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDone = exports.Setting = exports.Setting1 = exports.Send = exports.Securitywithtik = exports.Search = exports.Scan = exports.Sandwatch = exports.Rectangle = exports.RadioButtonElementUnchecked = exports.RadioButtonElementInvalid = exports.RadioButtonElementDisabled = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Activity_1 = __importDefault(require("./Activity"));
 Object.defineProperty(exports, "Activity", { enumerable: true, get: function () { return Activity_1.default; } });
@@ -176,6 +176,8 @@ var CloseMiniHover_1 = __importDefault(require("./CloseMiniHover"));
 Object.defineProperty(exports, "CloseMiniHover", { enumerable: true, get: function () { return CloseMiniHover_1.default; } });
 var CloseSquare_1 = __importDefault(require("./CloseSquare"));
 Object.defineProperty(exports, "CloseSquare", { enumerable: true, get: function () { return CloseSquare_1.default; } });
+var Copy_1 = __importDefault(require("./Copy"));
+Object.defineProperty(exports, "Copy", { enumerable: true, get: function () { return Copy_1.default; } });
 var Danger_1 = __importDefault(require("./Danger"));
 Object.defineProperty(exports, "Danger", { enumerable: true, get: function () { return Danger_1.default; } });
 var DarkBadge_1 = __importDefault(require("./DarkBadge"));
@@ -717,6 +719,10 @@ exports.iconList = {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(CloseSquare_1.default, __assign({}, props));
     },
+    Copy: function (_a) {
+        var props = __rest(_a, []);
+        return (0, jsx_runtime_1.jsx)(Copy_1.default, __assign({}, props));
+    },
     Danger: function (_a) {
         var props = __rest(_a, []);
         return (0, jsx_runtime_1.jsx)(Danger_1.default, __assign({}, props));

package/dist/components/InfoBox/InfoBox.js

@@ -0,0 +1,25 @@
+"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 InfoBox_styled_1 = require("./InfoBox.styled");
+var Icon_1 = __importDefault(require("../Icon/Icon"));
+var InfoBox = function (props) {
+    var title = props.title, description = props.description, radius = props.radius;
+    return ((0, jsx_runtime_1.jsxs)(InfoBox_styled_1.InfoBoxStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)(InfoBox_styled_1.IconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "InfoSquare", width: "24px", height: "24px" }) }), (0, jsx_runtime_1.jsxs)("div", { children: [title && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Title, { className: "caption-bold-12-15", children: title }), description && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Description, { className: "caption-medium-12-15", children: description })] })] })));
+};
+InfoBox.defaultProps = {};
+exports.default = InfoBox;

package/dist/components/InfoBox/InfoBox.styled.js

@@ -0,0 +1,16 @@
+"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.Description = exports.Title = exports.IconWrapper = exports.InfoBoxStyled = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.InfoBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: ", ";\n  background: var(--primary-opacity-10);\n  padding: 1rem;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: ", ";\n  background: var(--primary-opacity-10);\n  padding: 1rem;\n"])), function (props) { return props.radius ? props.radius : "8px"; });
+exports.IconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  margin-right: 1rem;\n"], ["\n  display: block;\n  margin-right: 1rem;\n"])));
+exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n  margin: 0;\n"], ["\n  display: block;\n  margin: 0;\n"])));
+exports.Description = styled_components_1.default.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: block;\n  margin: 0;\n"], ["\n  display: block;\n  margin: 0;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/{Footer → InfoBox}/index.js

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

package/dist/components/InfoBox/stories/InfoBox.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 InfoBox_1 = __importDefault(require("../InfoBox"));
+exports.default = {
+    title: 'Components/InfoBox',
+    component: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { width: "180px" }, children: (0, jsx_runtime_1.jsx)(InfoBox_1.default, __assign({}, props)) }); },
+    tags: ['autodocs'],
+    argTypes: {}
+};
+exports.Default = {
+    args: {
+        title: "Info text",
+        description: "Body text",
+    },
+};

package/dist/components/Input/Input.js

@@ -36,14 +36,29 @@ var Input = function (props) {
     var _a;
     var type = props.type, other = __rest(props, ["type"]);
     var _b = (0, react_1.useState)(type), inputType = _b[0], setInputType = _b[1];
+    var _c = (0, react_1.useState)(false), alert = _c[0], setAlert = _c[1];
+    var inputRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         setInputType(type);
     }, [type]);
+    (0, react_1.useEffect)(function () {
+        if (alert) {
+            setTimeout(function () {
+                setAlert(false);
+            }, 2000);
+        }
+    }, [alert]);
     var toggleInputType = function () {
         var newType = inputType === 'password' ? 'text' : 'password';
         setInputType(newType);
     };
-    return (0, jsx_runtime_1.jsxs)(Input_styled_1.Container, { width: props.width, children: [(props === null || props === void 0 ? void 0 : props.label) && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("top caption-bold-12-15", (_a = {}, _a["justify-between"] = props === null || props === void 0 ? void 0 : props.customLinkText, _a)), children: [(0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }), (props === null || props === void 0 ? void 0 : props.customLinkText) && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (props.customLinkHref && { href: props.customLinkHref }), { onClick: props.onCustomLinkClick, children: props === null || props === void 0 ? void 0 : props.customLinkText }))] })), (0, jsx_runtime_1.jsxs)("div", { className: "input", children: [props.mask ? (0, jsx_runtime_1.jsx)(react_input_mask_1.default, __assign({ alwaysShowMask: props.alwaysShowMask, maskChar: props.maskChar, mask: props.mask }, props, { children: function (inputProps) { return (0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({}, inputProps, { type: inputType })); } })) : (0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ type: inputType }, other)), (props === null || props === void 0 ? void 0 : props.type) === 'password' && (0, jsx_runtime_1.jsx)("div", { onClick: toggleInputType, className: "showHide", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: inputType === 'password' ? 'Show' : 'Hide' }) })] }), (props === null || props === void 0 ? void 0 : props.hasError) && (0, jsx_runtime_1.jsxs)("div", { className: "error", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { className: "caption-semi-bold-11-13", children: props === null || props === void 0 ? void 0 : props.errorMessage })] })] });
+    var copyToClipboard = function (e) {
+        inputRef.current.select();
+        document.execCommand('copy');
+        setAlert(true);
+        inputRef.current.blur();
+    };
+    return (0, jsx_runtime_1.jsxs)(Input_styled_1.Container, { width: props.width, children: [(props === null || props === void 0 ? void 0 : props.label) && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("top caption-bold-12-15", (_a = {}, _a["justify-between"] = props === null || props === void 0 ? void 0 : props.customLinkText, _a)), children: [(0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }), (props === null || props === void 0 ? void 0 : props.customLinkText) && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (props.customLinkHref && { href: props.customLinkHref }), { onClick: props.onCustomLinkClick, children: props === null || props === void 0 ? void 0 : props.customLinkText }))] })), (0, jsx_runtime_1.jsxs)("div", { className: "input", children: [props.mask ? (0, jsx_runtime_1.jsx)(react_input_mask_1.default, __assign({ alwaysShowMask: props.alwaysShowMask, maskChar: props.maskChar, mask: props.mask }, props, { children: function (inputProps) { return (0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef }, inputProps, { type: inputType })); } })) : (0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType }, other)), (props === null || props === void 0 ? void 0 : props.type) === 'password' && (0, jsx_runtime_1.jsx)("div", { onClick: toggleInputType, className: "inputIcon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: inputType === 'password' ? 'Show' : 'Hide' }) }), (props === null || props === void 0 ? void 0 : props.hasCopyButton) && (0, jsx_runtime_1.jsx)("div", { onClick: copyToClipboard, className: "inputIcon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: 'Copy' }) }), alert && (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, { className: "caption-medium-10-12", children: "Kopyaland\u0131" })] }), (props === null || props === void 0 ? void 0 : props.hasError) && (0, jsx_runtime_1.jsxs)("div", { className: "error", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { className: "caption-semi-bold-11-13", children: props === null || props === void 0 ? void 0 : props.errorMessage })] })] });
 };
 Input.defaultValues = {
     hasError: false,

package/dist/components/Input/Input.styled.js

@@ -7,8 +7,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputStyled = exports.Container = void 0;
+exports.InputStyled = exports.Container = exports.AlertStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n\n    &.justify-between {\n      justify-content: space-between;\n    }\n\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n\n    /*a {\n      margin: 0;\n      color: var(--primary);\n      text-decoration: none;\n      cursor: pointer;\n      &:hover,:focus,:active{\n        color: var(--primary-hover) !important;\n      }\n    }*/\n  }\n\n  .input {\n    position: relative;\n\n    .showHide {\n      position: absolute;\n      width: 24px;\n      height: 24px;\n      top: 16px;\n      right: 16px;\n      cursor: pointer;\n      path{\n        stroke:var(--dark-opacity-50);\n      }\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n\n    svg {\n      margin-right: 8px;\n      margin-left: 4px;\n    }\n\n    p {\n      margin: 0;\n      color: var(--red);\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n\n    &.justify-between {\n      justify-content: space-between;\n    }\n\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n\n    /*a {\n      margin: 0;\n      color: var(--primary);\n      text-decoration: none;\n      cursor: pointer;\n      &:hover,:focus,:active{\n        color: var(--primary-hover) !important;\n      }\n    }*/\n  }\n\n  .input {\n    position: relative;\n\n    .showHide {\n      position: absolute;\n      width: 24px;\n      height: 24px;\n      top: 16px;\n      right: 16px;\n      cursor: pointer;\n      path{\n        stroke:var(--dark-opacity-50);\n      }\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n\n    svg {\n      margin-right: 8px;\n      margin-left: 4px;\n    }\n\n    p {\n      margin: 0;\n      color: var(--red);\n    }\n  }\n"])), function (props) { return props.width || '370px'; });
-exports.InputStyled = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font-family: var(--font-family-sans-serif);\n  font-style: normal;\n  font-weight: 600;\n  font-size: 14px;\n  line-height: 17px;\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font-family: var(--font-family-sans-serif);\n  font-style: normal;\n  font-weight: 600;\n  font-size: 14px;\n  line-height: 17px;\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n\n"])), function (props) { return props.hasError ? 'white' : 'var(--dark-opacity-3)'; }, function (props) { return props.hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; });
-var templateObject_1, templateObject_2;
+exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  right: 8px;\n  top: -20px;\n  height: 28px;\n  border-radius: 8px;\n  background-color: white;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1rem;\n  user-select: none;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  right: 8px;\n  top: -20px;\n  height: 28px;\n  border-radius: 8px;\n  background-color: white;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1rem;\n  user-select: none;\n  pointer-events: none;\n"])));
+exports.Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n\n    &.justify-between {\n      justify-content: space-between;\n    }\n\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n\n    /*a {\n      margin: 0;\n      color: var(--primary);\n      text-decoration: none;\n      cursor: pointer;\n      &:hover,:focus,:active{\n        color: var(--primary-hover) !important;\n      }\n    }*/\n  }\n\n  .input {\n    position: relative;\n\n    .inputIcon {\n      position: absolute;\n      width: 24px;\n      height: 24px;\n      top: 16px;\n      right: 16px;\n      cursor: pointer;\n      &:hover{\n        background-color: var(--primary-opacity-5);\n      }\n      path{\n        stroke:var(--dark-opacity-50);\n      }\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n\n    svg {\n      margin-right: 8px;\n      margin-left: 4px;\n    }\n\n    p {\n      margin: 0;\n      color: var(--red);\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n\n    &.justify-between {\n      justify-content: space-between;\n    }\n\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n\n    /*a {\n      margin: 0;\n      color: var(--primary);\n      text-decoration: none;\n      cursor: pointer;\n      &:hover,:focus,:active{\n        color: var(--primary-hover) !important;\n      }\n    }*/\n  }\n\n  .input {\n    position: relative;\n\n    .inputIcon {\n      position: absolute;\n      width: 24px;\n      height: 24px;\n      top: 16px;\n      right: 16px;\n      cursor: pointer;\n      &:hover{\n        background-color: var(--primary-opacity-5);\n      }\n      path{\n        stroke:var(--dark-opacity-50);\n      }\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n\n    svg {\n      margin-right: 8px;\n      margin-left: 4px;\n    }\n\n    p {\n      margin: 0;\n      color: var(--red);\n    }\n  }\n"])), function (props) { return props.width || '370px'; });
+exports.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font-family: var(--font-family-sans-serif);\n  font-style: normal;\n  font-weight: 600;\n  font-size: 14px;\n  line-height: 17px;\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font-family: var(--font-family-sans-serif);\n  font-style: normal;\n  font-weight: 600;\n  font-size: 14px;\n  line-height: 17px;\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n\n"])), function (props) { return props.hasError ? 'white' : 'var(--dark-opacity-3)'; }, function (props) { return props.hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; });
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/Input/stories/Input.stories.js

@@ -11,6 +11,7 @@ exports.default = {
     tags: ['autodocs'],
     argTypes: {
         hasError: { control: 'boolean' },
+        hasCopyButton: { control: 'boolean' },
         onCustomLinkClick: { action: 'clicked' },
         type: { control: 'select', options: ["text", "number", "password"] },
     }

package/dist/components/ListGroup/ListGroup.js

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

package/dist/components/Modal/Modal.js

@@ -33,6 +33,7 @@ var Icon_1 = __importDefault(require("../Icon/Icon"));
 var Button_1 = __importDefault(require("../Button"));
 var react_device_detect_1 = require("react-device-detect");
 var Divider_1 = __importDefault(require("../Divider"));
+var useOnClickOutside_1 = __importDefault(require("../../hooks/useOnClickOutside"));
 var Modal = function (props) {
     var _a = (0, react_1.useState)(props.show), showModal = _a[0], setShowModal = _a[1];
     (0, react_1.useEffect)(function () {
@@ -50,14 +51,17 @@ var Modal = function (props) {
         (props === null || props === void 0 ? void 0 : props.onClose) && props.onClose();
     };
     var onPrimaryAction = props.onPrimaryAction, onSecondaryAction = props.onSecondaryAction, onBack = props.onBack, other = __rest(props, ["onPrimaryAction", "onSecondaryAction", "onBack"]);
+    var modalRef = (0, react_1.useRef)();
+    (0, useOnClickOutside_1.default)(modalRef, function () { return setShowModal(false); }, props.hasCloseOnOutsideClick);
     return (showModal &&
-        react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(Modal_styled_1.OverlayStyled, { children: (0, jsx_runtime_1.jsxs)(Modal_styled_1.ModalStyled, __assign({}, other, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "header", children: [props.showBackIcon ? ((0, jsx_runtime_1.jsx)("div", { onClick: onBack, className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowMedium" }) })) : (props.titleAlignment === "center" && (0, jsx_runtime_1.jsx)("div", { className: "empty" })), (0, jsx_runtime_1.jsxs)("div", { className: "title", children: [props.title && ((0, jsx_runtime_1.jsx)("h5", { className: props.titleAlignment === "left" ? (react_device_detect_1.isMobile ? "title-semi-bold-16-19" : "headline-semi-bold-18-22") : "headline-semi-bold-20-24", children: props.title })), props.titleDescription && ((0, jsx_runtime_1.jsx)("p", { className: "body-regular-14-17", children: props.titleDescription }))] }), props.showCloseIcon ? ((0, jsx_runtime_1.jsx)("div", { onClick: onClose, className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close" }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "empty" }))] }), (0, jsx_runtime_1.jsx)("div", { className: "content", children: (0, jsx_runtime_1.jsx)("div", { className: "contentInner", children: props.children }) }), (props.showPrimaryButton || props.showSecondaryButton) && (0, jsx_runtime_1.jsxs)("div", { className: "buttons", children: [props.showPrimaryButton && ((0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onPrimaryAction, size: "big", variant: "primary", isLoading: props.isPrimaryButtonLoading, disabled: props.isPrimaryButtonDisabled, width: props.primaryButtonWidth, children: props.primaryButtonText })), props.showSecondaryButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.buttonsAlignment === "vertical" && ((0, jsx_runtime_1.jsx)(Divider_1.default, {})), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onSecondaryAction, size: "big", variant: "inverted", isLoading: props.isSecondaryButtonLoading, disabled: props.isSecondaryButtonDisabled, width: props.secondaryButtonWidth, children: props.secondaryButtonText })] }))] })] })) }), document.body));
+        react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(Modal_styled_1.OverlayStyled, { children: (0, jsx_runtime_1.jsxs)(Modal_styled_1.ModalStyled, __assign({ ref: modalRef }, other, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "header", children: [props.showBackIcon ? ((0, jsx_runtime_1.jsx)("div", { onClick: onBack, className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowMedium" }) })) : (props.titleAlignment === "center" && (0, jsx_runtime_1.jsx)("div", { className: "empty" })), (0, jsx_runtime_1.jsxs)("div", { className: "title", children: [props.title && ((0, jsx_runtime_1.jsx)("h5", { className: props.titleAlignment === "left" ? (react_device_detect_1.isMobile ? "title-semi-bold-16-19" : "headline-semi-bold-18-22") : "headline-semi-bold-20-24", children: props.title })), props.titleDescription && ((0, jsx_runtime_1.jsx)("p", { className: "body-regular-14-17", children: props.titleDescription }))] }), props.showCloseIcon ? ((0, jsx_runtime_1.jsx)("div", { onClick: onClose, className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close" }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "empty" }))] }), (0, jsx_runtime_1.jsx)("div", { className: "content", children: (0, jsx_runtime_1.jsx)("div", { className: "contentInner", children: props.children }) }), (props.showPrimaryButton || props.showSecondaryButton) && (0, jsx_runtime_1.jsxs)("div", { className: "buttons", children: [props.showPrimaryButton && ((0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onPrimaryAction, size: "big", variant: "primary", isLoading: props.isPrimaryButtonLoading, disabled: props.isPrimaryButtonDisabled, width: props.primaryButtonWidth, icon: props.primaryButtonIcon, children: props.primaryButtonText })), props.showSecondaryButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.buttonsAlignment === "vertical" && ((0, jsx_runtime_1.jsx)(Divider_1.default, {})), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onSecondaryAction, size: "big", variant: "inverted", isLoading: props.isSecondaryButtonLoading, disabled: props.isSecondaryButtonDisabled, width: props.secondaryButtonWidth, icon: props.secondaryButtonIcon, children: props.secondaryButtonText })] }))] })] })) }), document.body));
 };
 exports.default = Modal;
 Modal.defaultProps = {
     size: "small",
     showBackIcon: true,
     showCloseIcon: true,
+    hasCloseOnOutsideClick: false,
     show: true,
     buttonsAlignment: "vertical",
     primaryButtonText: "Primary",

package/dist/components/Modal/props.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.titleAlignment = exports.alignment = exports.sizes = void 0;
+exports.iconNames = exports.titleAlignment = exports.alignment = exports.sizes = void 0;
+var Icon_1 = require("../Icon");
 exports.sizes = ['small', 'medium', 'large'];
 exports.alignment = ['vertical', 'horizontal'];
 exports.titleAlignment = ['left', 'center'];
+exports.iconNames = Object.keys(Icon_1.iconList);
 var ModalDefault = {
     size: 'small',
     showBackIcon: true,

package/dist/components/Modal/stories/Modal.stories.js

@@ -7,6 +7,7 @@ exports.Type6 = exports.Type5 = exports.Type4 = exports.Type3 = exports.Type2 =
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Modal_1 = __importDefault(require("../Modal"));
 var props_1 = require("../props");
+var Icon_1 = require("../../Icon");
 exports.default = {
     title: 'Components/Modal',
     component: Modal_1.default,
@@ -24,6 +25,8 @@ exports.default = {
         },
         onPrimaryAction: { action: 'primary clicked' },
         onSecondaryAction: { action: 'secondary clicked' },
+        primaryButtonIcon: { control: 'select', options: Object.keys(Icon_1.iconList) },
+        secondaryButtonIcon: { control: 'select', options: Object.keys(Icon_1.iconList) },
     }
 };
 exports.Default = {
@@ -34,6 +37,7 @@ exports.Default = {
         title: 'Title',
         showPrimaryButton: true,
         showSecondaryButton: true,
+        hasCloseOnOutsideClick: false,
         primaryButtonText: 'Primary Action',
         secondaryButtonText: 'Other',
         children: (0, jsx_runtime_1.jsx)("div", { children: "Content" })

package/dist/components/ProductCard/ProductCard.js

@@ -20,6 +20,7 @@ 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 HorizontalSm_1 = __importDefault(require("./layouts/HorizontalSm"));
 var ProductCard = function (props) {
     switch (props.layout) {
         case 'checklist':
@@ -28,6 +29,8 @@ var ProductCard = function (props) {
             return (0, jsx_runtime_1.jsx)(Standart_1.default, __assign({}, props));
         case 'horizontal':
             return (0, jsx_runtime_1.jsx)(Horizontal_1.default, __assign({}, props));
+        case 'horizontalSm':
+            return (0, jsx_runtime_1.jsx)(HorizontalSm_1.default, __assign({}, props));
         default:
             return (0, jsx_runtime_1.jsx)(Checklist_1.default, __assign({}, props));
     }