krl-alfred 1.8.0 → 1.9.0

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -4,27 +4,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
 var prop_types_1 = __importDefault(require("prop-types"));
 var Breadcrumbs_styled_1 = require("./Breadcrumbs.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var refactorColumn_1 = __importDefault(require("./../../utils/refactorColumn"));
+var classnames_1 = __importDefault(require("classnames"));
 var Breadcrumbs = function (props) {
     var data = props.data, subMenuRowLength = props.subMenuRowLength, onClickBackIcon = props.onClickBackIcon;
-    var _a = (0, react_1.useState)(false), showDropdown = _a[0], setShowDropdown = _a[1];
-    var breadcrumbSmRef = (0, react_1.useRef)(null);
     var getSubData = function () {
-        var _a;
-        // active menu on mobile is fixed to the first place.
-        var refactorData = (_a = JSON.parse(JSON.stringify(data))) === null || _a === void 0 ? void 0 : _a.find(function (dataItem) { var _a; return ((_a = dataItem.children) === null || _a === void 0 ? void 0 : _a.length) > 0; });
-        var responseData = [];
-        if (refactorData) {
-            responseData = refactorData.children;
-            var activeIndex = responseData.findIndex(function (item) { return item.isActive; });
-            if (activeIndex > 0) {
-                responseData.splice(0, 0, responseData.splice(activeIndex, 1)[0]);
-            }
-            return responseData || [];
+        var refactorData = data === null || data === void 0 ? void 0 : data.find(function (dataItem) { var _a; return ((_a = dataItem.children) === null || _a === void 0 ? void 0 : _a.length) > 0; });
+        if (refactorData && refactorData.children) {
+            return refactorData === null || refactorData === void 0 ? void 0 : refactorData.children;
         }
         return [];
     };
@@ -32,30 +22,33 @@ var Breadcrumbs = function (props) {
         var item = _a.item, children = _a.children;
         return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", { href: item.slug, children: children }));
     };
-    (0, react_1.useEffect)(function () {
-        if (breadcrumbSmRef && breadcrumbSmRef.current)
-            breadcrumbSmRef.current.scrollLeft = 0;
-        setShowDropdown(false);
-    }, [data]);
+    setTimeout(function () {
+        var elem = document.querySelector('.breadcrumbSm');
+        var activeItem = document.querySelector('.breadcrumbSm li.active');
+        if (activeItem) {
+            elem.scrollLeft = activeItem.offsetLeft;
+        }
+    }, 100);
     var SubMenu = function (_a) {
         var data = _a.data, item = _a.item;
         var grid = subMenuRowLength && Math.ceil(data.length / subMenuRowLength);
         var dataWithColumn = (0, refactorColumn_1.default)(data, subMenuRowLength || 0);
         return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.DropdownList, { gridTemplateColumns: grid, children: dataWithColumn === null || dataWithColumn === void 0 ? void 0 : dataWithColumn.map(function (childColumn) {
                     return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubCategoryItem, { children: (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubCategoryItemList, { children: childColumn === null || childColumn === void 0 ? void 0 : childColumn.map(function (child) {
-                                return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubCategoryItemListItem, { isActive: child.isActive, isSeeAll: child.isSeeAll, className: "caption-medium-12-15", onClick: function () { return setShowDropdown(false); }, children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, { item: child, children: child.name }) }));
+                                return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubCategoryItemListItem, { isActive: child.isActive, isSeeAll: child.isSeeAll, className: "caption-medium-12-15", children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, { item: child, children: child.name }) }));
                             }) }) }));
                 }) }) }));
     };
     var SubMenuMobile = function () {
         var _a;
-        return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubMenuMobileWrapper, { ref: breadcrumbSmRef, children: (_a = getSubData()) === null || _a === void 0 ? void 0 : _a.map(function (item) {
-                return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubMenuMobileItem, { isActive: item.isActive, className: "caption-bold-12-15", children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, { item: item, onClick: function () { return setShowDropdown(false); }, children: item.name }) }));
+        return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubMenuMobileWrapper, { className: "breadcrumbSm", children: (_a = getSubData()) === null || _a === void 0 ? void 0 : _a.map(function (item) {
+                var _a;
+                return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubMenuMobileItem, { isActive: item.isActive, className: (0, classnames_1.default)("caption-bold-12-15", (_a = {}, _a["active"] = item.isActive, _a)), children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, { item: item, children: item.name }) }));
             }) }));
     };
     return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsWrapper, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsList, { children: data === null || data === void 0 ? void 0 : data.map(function (breadCrumbItem, key) {
                     var _a;
-                    return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListItem, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemBackIconWrapper, { onClick: onClickBackIcon, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowLeft" }) }), ((_a = breadCrumbItem === null || breadCrumbItem === void 0 ? void 0 : breadCrumbItem.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownWrapper, { children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRight" }) })), (0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownOpener, { onClick: function () { return setShowDropdown(!showDropdown); }, className: "caption-bold-12-15", children: [breadCrumbItem.name, (0, jsx_runtime_1.jsx)(Icon_1.default, { stroke: "#9763F6", name: !showDropdown ? "ArrowSmallDown" : "ArrowSmallUp" })] }), showDropdown && (0, jsx_runtime_1.jsx)(SubMenu, { item: breadCrumbItem, data: breadCrumbItem.children })] })) : ((0, jsx_runtime_1.jsxs)(ButtonLinkComponent, { item: breadCrumbItem, onClick: function () { return setShowDropdown(false); }, children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRight" }) })), (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemInner, { className: "caption-bold-12-15", children: breadCrumbItem.name })] }))] }, breadCrumbItem.id));
+                    return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListItem, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemBackIconWrapper, { onClick: onClickBackIcon, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowLeft" }) }), ((_a = breadCrumbItem === null || breadCrumbItem === void 0 ? void 0 : breadCrumbItem.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownWrapper, { children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRight" }) })), (0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownOpener, { className: "caption-bold-12-15", children: [breadCrumbItem.name, (0, jsx_runtime_1.jsx)(Icon_1.default, { stroke: "#9763F6", name: "ArrowSmallDown" })] }), (0, jsx_runtime_1.jsx)(SubMenu, { item: breadCrumbItem, data: breadCrumbItem.children })] })) : ((0, jsx_runtime_1.jsxs)(ButtonLinkComponent, { item: breadCrumbItem, children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRight" }) })), (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemInner, { className: "caption-bold-12-15", children: breadCrumbItem.name })] }))] }, breadCrumbItem.id));
                 }) }), (0, jsx_runtime_1.jsx)(SubMenuMobile, {})] }));
 };
 exports.default = Breadcrumbs;

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

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

@@ -26,7 +26,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
 var prop_types_1 = __importDefault(require("prop-types"));
 var CategoryMenu_styled_1 = require("./CategoryMenu.styled");
 var refactorColumn_1 = __importDefault(require("./../../utils/refactorColumn"));
@@ -39,8 +38,7 @@ var CategoryMenu = function (props) {
     };
     var MenuButton = function (_a) {
         var item = __rest(_a, []);
-        var _b = (0, react_1.useState)("#474C6D"), menuIconColor = _b[0], setMenuIconColor = _b[1];
-        return ((0, jsx_runtime_1.jsxs)(CategoryMenu_styled_1.CategoryItem, { isActiveCategory: item.isActive, onMouseEnter: function () { return setMenuIconColor("#0A103D"); }, onMouseLeave: function () { return setMenuIconColor("#474C6D"); }, children: [(0, jsx_runtime_1.jsx)(ButtonLinkComponent, { item: item, children: (0, jsx_runtime_1.jsxs)(CategoryMenu_styled_1.CategoryItemButtonInner, { children: [(0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: item.icon, stroke: menuIconColor }) }), (0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonTitle, { className: "caption-semi-bold-12-15", children: item.name })] }) }), item.children] }));
+        return ((0, jsx_runtime_1.jsxs)(CategoryMenu_styled_1.CategoryItem, { isActiveCategory: item.isActive, children: [(0, jsx_runtime_1.jsx)(ButtonLinkComponent, { item: item, children: (0, jsx_runtime_1.jsxs)(CategoryMenu_styled_1.CategoryItemButtonInner, { children: [(0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: item.icon }) }), (0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonTitle, { className: "caption-semi-bold-12-15", children: item.name })] }) }), item.children] }));
     };
     var CategorySubMenu = function (_a) {
         var item = _a.item, children = _a.children;

package/dist/components/CategoryMenu/CategoryMenu.styled.js

@@ -31,7 +31,7 @@ exports.SubCategoryInnerItemButtonInner = exports.SubCategoryInnerItem = exports
 var styled_components_1 = __importStar(require("styled-components"));
 exports.CategoryMenuWrapper = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    padding:0;\n    margin: 11px 0;\n    a {\n        text-decoration:none\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    padding:0;\n    margin: 11px 0;\n    a {\n        text-decoration:none\n    }\n"])));
 var hoverAndActive = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: var(--dark);\n    &:before{\n        border-color: var(--grey-10);\n        box-shadow: 0px 6px 30px 0px #EAE9F0;\n    }\n"], ["\n    color: var(--dark);\n    &:before{\n        border-color: var(--grey-10);\n        box-shadow: 0px 6px 30px 0px #EAE9F0;\n    }\n"])));
-exports.CategoryItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    margin: 0 8.5px;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    &:hover{\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n        }\n        > a {\n            > span{\n                ", "\n            }\n        }\n    }\n    ", "\n"], ["\n    display: block;\n    position: relative;\n    margin: 0 8.5px;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    &:hover{\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n        }\n        > a {\n            > span{\n                ", "\n            }\n        }\n    }\n    ", "\n"])), hoverAndActive, function (props) { return props.isActiveCategory ? "\n        > a > span{\n            ".concat(hoverAndActive, "\n        }\n    ") : ""; });
+exports.CategoryItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    margin: 0 8.5px;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    path, circle {\n        stroke : var(--dark-opacity-75)\n    }\n    &:hover{\n        path , circle {\n            stroke : var(--dark);\n        }\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n        }\n        > a {\n            > span{\n                ", "\n            }\n        }\n    }\n    ", "\n"], ["\n    display: block;\n    position: relative;\n    margin: 0 8.5px;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    path, circle {\n        stroke : var(--dark-opacity-75)\n    }\n    &:hover{\n        path , circle {\n            stroke : var(--dark);\n        }\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n        }\n        > a {\n            > span{\n                ", "\n            }\n        }\n    }\n    ", "\n"])), hoverAndActive, function (props) { return props.isActiveCategory ? "\n        > a > span{\n            ".concat(hoverAndActive, "\n        }\n    ") : ""; });
 exports.CategoryItemButtonInner = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    text-decoration: none;\n    padding: 12px 16px;\n    color: var(--dark-opacity-75);\n    margin: 0;\n    transition: all 0.2s ease-in-out;\n    text-align: center;\n    outline: none;\n    display: block;\n    position: relative;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    width: 100%;\n    font-family:inherit;\n    cursor:pointer;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        border: 1px solid white;\n        color: var(--dark-opacity-75);\n        background-color: white;\n        border-radius: 8px;\n        z-index: -1;\n        transition: all 0.2s ease-in-out;\n    }\n"], ["\n    text-decoration: none;\n    padding: 12px 16px;\n    color: var(--dark-opacity-75);\n    margin: 0;\n    transition: all 0.2s ease-in-out;\n    text-align: center;\n    outline: none;\n    display: block;\n    position: relative;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    width: 100%;\n    font-family:inherit;\n    cursor:pointer;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        border: 1px solid white;\n        color: var(--dark-opacity-75);\n        background-color: white;\n        border-radius: 8px;\n        z-index: -1;\n        transition: all 0.2s ease-in-out;\n    }\n"])));
 exports.CategoryItemButtonIcon = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    height: 24px;\n    display:block;\n"], ["\n    height: 24px;\n    display:block;\n"])));
 exports.CategoryItemButtonTitle = styled_components_1.default.strong(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    margin-top: 8px;\n    display:block;\n"], ["\n    margin-top: 8px;\n    display:block;\n"])));

package/dist/components/Modal/Modal.js

@@ -44,7 +44,7 @@ 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"]);
-    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: "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: props.children }), (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', children: props.primaryButtonText }), props.showSecondaryButton && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.buttonsAlignment === 'vertical' && (0, jsx_runtime_1.jsx)("div", { className: "divider caption-medium-12-15", children: "veya" }), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onSecondaryAction, size: 'big', variant: 'inverted', children: props.secondaryButtonText })] })] })] })) }), document.body);
+    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: "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.jsxs)("div", { className: "content", children: [props.contentTitle && (0, jsx_runtime_1.jsx)("strong", { className: "contentTitle headline-semi-bold-20-24", children: props.contentTitle }), (0, jsx_runtime_1.jsx)("div", { className: "contentInner", children: props.children })] }), (0, jsx_runtime_1.jsxs)("div", { className: "buttons", children: [props.showPrimaryButton && (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: onPrimaryAction, size: 'big', variant: 'primary' }, props.primaryButtonProps, { children: props.primaryButtonText })), props.showSecondaryButton && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.buttonsAlignment === 'vertical' && (0, jsx_runtime_1.jsx)("div", { className: "divider caption-medium-12-15", children: "veya" }), (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: onSecondaryAction, size: 'big', variant: 'inverted' }, props.secondaryButtonProps, { children: props.secondaryButtonText }))] })] })] })) }), document.body);
 };
 exports.default = Modal;
 Modal.defaultProps = {
@@ -61,5 +61,8 @@ Modal.defaultProps = {
     },
     showHeaderBorder: false,
     showFooterBorder: false,
-    titleAlignment: 'center'
+    showContentBorder: false,
+    hasFixedHeight: false,
+    titleAlignment: 'center',
+    contentTitle: ''
 };

package/dist/components/Modal/Modal.styled.js

@@ -9,7 +9,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OverlayStyled = exports.ModalStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: white;\n  border-radius: 8px;\n  box-sizing: border-box;\n  width: ", ";\n  \n\n  div.header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 24px;\n    border-bottom: ", ";\n    box-sizing: border-box;\n\n    div.empty {\n      width: 32px;\n      height: 32px;\n    }\n\n    div.icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 8px;\n      cursor: pointer;\n      background: white;\n      transition: all .2s;\n\n      &:hover {\n        box-shadow: 0 6px 30px #EAE9F0;\n      }\n\n    }\n    div.title {\n      h5 {\n        margin: 0;\n        padding: 0;\n      }\n      p {\n        margin: 8px 0 0;\n      }\n    }\n   \n  }\n\n  div.content {\n    padding: 24px;\n  }\n\n  div.buttons {\n    padding: 24px;\n    display: flex;\n    justify-content: space-between;\n    box-sizing: border-box;\n    border-top: ", ";\n    flex-direction: ", ";\n\n    div.divider {\n      overflow: hidden;\n      text-align: center;\n      width: 100%;\n      color: #E7E7EC;\n      margin: 16px 0;\n\n      &:before, &:after {\n        background-color: #E7E7EC;\n        content: \"\";\n        display: inline-block;\n        height: 1px;\n        position: relative;\n        vertical-align: middle;\n        width: 50%;\n      }\n\n      &:before {\n        right: 8px;\n        margin-left: -50%;\n      }\n\n      &:after {\n        left: 8px;\n        margin-right: -50%;\n      }\n    }\n\n    button {\n      width: ", ";\n    }\n  }\n"], ["\n  background: white;\n  border-radius: 8px;\n  box-sizing: border-box;\n  width: ", ";\n  \n\n  div.header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 24px;\n    border-bottom: ", ";\n    box-sizing: border-box;\n\n    div.empty {\n      width: 32px;\n      height: 32px;\n    }\n\n    div.icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 8px;\n      cursor: pointer;\n      background: white;\n      transition: all .2s;\n\n      &:hover {\n        box-shadow: 0 6px 30px #EAE9F0;\n      }\n\n    }\n    div.title {\n      h5 {\n        margin: 0;\n        padding: 0;\n      }\n      p {\n        margin: 8px 0 0;\n      }\n    }\n   \n  }\n\n  div.content {\n    padding: 24px;\n  }\n\n  div.buttons {\n    padding: 24px;\n    display: flex;\n    justify-content: space-between;\n    box-sizing: border-box;\n    border-top: ", ";\n    flex-direction: ", ";\n\n    div.divider {\n      overflow: hidden;\n      text-align: center;\n      width: 100%;\n      color: #E7E7EC;\n      margin: 16px 0;\n\n      &:before, &:after {\n        background-color: #E7E7EC;\n        content: \"\";\n        display: inline-block;\n        height: 1px;\n        position: relative;\n        vertical-align: middle;\n        width: 50%;\n      }\n\n      &:before {\n        right: 8px;\n        margin-left: -50%;\n      }\n\n      &:after {\n        left: 8px;\n        margin-right: -50%;\n      }\n    }\n\n    button {\n      width: ", ";\n    }\n  }\n"])), function (props) {
+var devices_1 = require("../../constants/devices");
+exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: white;\n  border-radius: 8px;\n  box-sizing: border-box;\n  width: ", ";\n  \n  @media only screen and ", " {\n    display: grid;\n    height: 100dvh;\n    align-content: space-between;\n    border-radius: 0;\n  }\n  \n  div.header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 24px;\n    border-bottom: ", ";\n    margin-bottom: ", "; \n    box-sizing: border-box;\n\n    div.empty {\n      width: 32px;\n      height: 32px;\n    }\n\n    div.icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 8px;\n      cursor: pointer;\n      background: white;\n      transition: all .2s;\n\n      &:hover {\n        box-shadow: 0 6px 30px #EAE9F0;\n      }\n\n    }\n    div.title {\n      h5 {\n        margin: 0;\n        padding: 0;\n      }\n      p {\n        margin: 8px 0 0;\n      }\n    }\n   \n  }\n\n  div.content {\n    padding: 0 24px;\n    .contentTitle{\n      margin-bottom:32px;\n      display:block;\n    }\n    .contentInner{\n      @media only screen and ", " {\n        height : calc(100dvh - 251px);\n        position:relative;\n        overflow: auto;\n      }\n      box-sizing:border-box;\n      height: ", ";\n      position: relative;\n      overflow: auto;\n      ", "\n    }\n  }\n\n  div.buttons {\n    padding: 24px;\n    display: flex;\n    justify-content: ", ";\n    box-sizing: border-box;\n    border-top: ", ";\n    margin-top: ", ";\n    flex-direction: ", ";\n\n    div.divider {\n      overflow: hidden;\n      text-align: center;\n      width: 100%;\n      color: var(--dark-opacity-10);\n      margin: 16px 0;\n\n      &:before, &:after {\n        background-color: var(--dark-opacity-10);\n        content: \"\";\n        display: inline-block;\n        height: 1px;\n        position: relative;\n        vertical-align: middle;\n        width: 50%;\n      }\n\n      &:before {\n        right: 8px;\n        margin-left: -50%;\n      }\n\n      &:after {\n        left: 8px;\n        margin-right: -50%;\n      }\n    }\n\n    button {\n      width: auto;\n    }\n    button + button {\n      margin-right: ", ";\n    }\n  }\n"], ["\n  background: white;\n  border-radius: 8px;\n  box-sizing: border-box;\n  width: ", ";\n  \n  @media only screen and ", " {\n    display: grid;\n    height: 100dvh;\n    align-content: space-between;\n    border-radius: 0;\n  }\n  \n  div.header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 24px;\n    border-bottom: ", ";\n    margin-bottom: ", "; \n    box-sizing: border-box;\n\n    div.empty {\n      width: 32px;\n      height: 32px;\n    }\n\n    div.icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 8px;\n      cursor: pointer;\n      background: white;\n      transition: all .2s;\n\n      &:hover {\n        box-shadow: 0 6px 30px #EAE9F0;\n      }\n\n    }\n    div.title {\n      h5 {\n        margin: 0;\n        padding: 0;\n      }\n      p {\n        margin: 8px 0 0;\n      }\n    }\n   \n  }\n\n  div.content {\n    padding: 0 24px;\n    .contentTitle{\n      margin-bottom:32px;\n      display:block;\n    }\n    .contentInner{\n      @media only screen and ", " {\n        height : calc(100dvh - 251px);\n        position:relative;\n        overflow: auto;\n      }\n      box-sizing:border-box;\n      height: ", ";\n      position: relative;\n      overflow: auto;\n      ", "\n    }\n  }\n\n  div.buttons {\n    padding: 24px;\n    display: flex;\n    justify-content: ", ";\n    box-sizing: border-box;\n    border-top: ", ";\n    margin-top: ", ";\n    flex-direction: ", ";\n\n    div.divider {\n      overflow: hidden;\n      text-align: center;\n      width: 100%;\n      color: var(--dark-opacity-10);\n      margin: 16px 0;\n\n      &:before, &:after {\n        background-color: var(--dark-opacity-10);\n        content: \"\";\n        display: inline-block;\n        height: 1px;\n        position: relative;\n        vertical-align: middle;\n        width: 50%;\n      }\n\n      &:before {\n        right: 8px;\n        margin-left: -50%;\n      }\n\n      &:after {\n        left: 8px;\n        margin-right: -50%;\n      }\n    }\n\n    button {\n      width: auto;\n    }\n    button + button {\n      margin-right: ", ";\n    }\n  }\n"])), function (props) {
     switch (props.size) {
         case 'small':
             return "375px";
@@ -20,7 +21,7 @@ exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templ
         default:
             return "462px";
     }
-}, function (props) { return props.showHeaderBorder ? '1px solid #E7E7EC;' : 'none'; }, function (props) { return props.showFooterBorder ? '1px solid #E7E7EC;' : 'none'; }, function (props) {
+}, devices_1.devices.md, function (props) { return props.showHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.showHeaderBorder ? '24px' : '0'; }, devices_1.devices.md, function (props) { return props.hasFixedHeight ? '507px' : 'auto'; }, function (props) { return props.showContentBorder ? ("\n          border:1px solid var(--dark-opacity-10);\n          border-radius: 8px;\n          padding: 24px;\n        ") : (""); }, function (props) { return props.buttonsAlignment == 'horizontal' ? 'flex-start' : 'space-between'; }, function (props) { return props.showFooterBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.showFooterBorder ? '24px' : '0'; }, function (props) {
     switch (props.buttonsAlignment) {
         case 'vertical':
             return 'column';
@@ -29,6 +30,6 @@ exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templ
         default:
             return 'column';
     }
-}, function (props) { return props.buttonsAlignment == 'horizontal' ? 'calc(50% - 12px)' : 'auto'; });
+}, function (props) { return props.buttonsAlignment == 'horizontal' ? '24px' : '0'; });
 exports.OverlayStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--grey-40);\n  overflow: hidden;\n  left: 0;\n  top: 0;\n  z-index: 999999;\n"], ["\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--grey-40);\n  overflow: hidden;\n  left: 0;\n  top: 0;\n  z-index: 999999;\n"])));
 var templateObject_1, templateObject_2;

package/dist/components/Modal/stories/Modal.stories.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.Default = void 0;
+exports.Type6 = exports.Type5 = exports.Type4 = exports.Type3 = exports.Type2 = exports.Type1 = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Modal_1 = __importDefault(require("../Modal"));
 var props_1 = require("../props");
@@ -23,7 +23,7 @@ exports.default = {
             defaultValue: 'Title',
         },
         onPrimaryAction: { action: 'primary clicked' },
-        onSecondaryAction: { action: 'secondary clicked' }
+        onSecondaryAction: { action: 'secondary clicked' },
     }
 };
 exports.Default = {
@@ -34,8 +34,103 @@ exports.Default = {
         title: 'Title',
         showPrimaryButton: true,
         showSecondaryButton: true,
-        primaryButtonText: 'Primary',
-        secondaryButtonText: 'Secondary',
+        hasFixedHeight: false,
+        primaryButtonText: 'Primary Action',
+        secondaryButtonText: 'Other',
+        children: (0, jsx_runtime_1.jsx)("div", { children: "Content" })
+    },
+};
+exports.Type1 = {
+    args: {
+        showBackIcon: true,
+        showCloseIcon: true,
+        show: true,
+        title: 'Title',
+        showPrimaryButton: true,
+        showSecondaryButton: true,
+        primaryButtonText: 'Primary Action',
+        secondaryButtonText: 'Other',
+        children: (0, jsx_runtime_1.jsx)("div", { children: "Content" })
+    },
+};
+exports.Type2 = {
+    args: {
+        showBackIcon: true,
+        showCloseIcon: true,
+        show: true,
+        title: 'Title',
+        showPrimaryButton: true,
+        showSecondaryButton: false,
+        primaryButtonText: 'Primary Action',
+        secondaryButtonText: 'Other',
+        children: (0, jsx_runtime_1.jsx)("div", { children: "Content" })
+    },
+};
+exports.Type3 = {
+    args: {
+        showBackIcon: false,
+        showCloseIcon: true,
+        show: true,
+        contentTitle: 'Title',
+        showPrimaryButton: true,
+        showSecondaryButton: false,
+        buttonsAlignment: 'horizontal',
+        primaryButtonText: 'Primary Action',
+        secondaryButtonText: 'Other',
+        children: (0, jsx_runtime_1.jsx)("div", { children: "Content" })
+    },
+};
+exports.Type4 = {
+    args: {
+        showBackIcon: false,
+        showCloseIcon: true,
+        show: true,
+        contentTitle: 'Title',
+        showPrimaryButton: true,
+        showSecondaryButton: true,
+        buttonsAlignment: 'horizontal',
+        primaryButtonText: 'Primary Action',
+        secondaryButtonText: 'Other',
+        children: (0, jsx_runtime_1.jsx)("div", { children: "Content" })
+    },
+};
+exports.Type5 = {
+    args: {
+        showBackIcon: false,
+        showCloseIcon: true,
+        show: true,
+        title: 'Title',
+        titleDescription: 'Body Text',
+        buttonsAlignment: 'horizontal',
+        showPrimaryButton: true,
+        showSecondaryButton: false,
+        showHeaderBorder: true,
+        showContentBorder: true,
+        showFooterBorder: true,
+        hasFixedHeight: false,
+        primaryButtonText: 'Primary Action',
+        secondaryButtonText: 'Other',
+        titleAlignment: 'left',
+        children: (0, jsx_runtime_1.jsx)("div", { children: "Content" })
+    },
+};
+exports.Type6 = {
+    args: {
+        showBackIcon: false,
+        showCloseIcon: true,
+        show: true,
+        title: 'Title',
+        titleDescription: 'Body Text',
+        buttonsAlignment: 'horizontal',
+        showPrimaryButton: true,
+        showSecondaryButton: true,
+        showHeaderBorder: true,
+        showContentBorder: true,
+        showFooterBorder: true,
+        hasFixedHeight: false,
+        primaryButtonText: 'Primary Action',
+        secondaryButtonText: 'Other',
+        titleAlignment: 'left',
         children: (0, jsx_runtime_1.jsx)("div", { children: "Content" })
     },
 };

package/package.json

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