krl-alfred 1.2.0 → 1.4.0

package/dist/assets/svg/ArrowRightIcon.js

@@ -10,13 +10,9 @@ var __assign = (this && this.__assign) || function () {
     };
     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 react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var ArrowRightIcon = function (props) {
-    return (react_1.default.createElement("svg", __assign({}, props, { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }),
-        react_1.default.createElement("path", { d: "M5.66602 3.33268L10.3327 7.99935L5.66602 12.666", stroke: props.color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({}, props, { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M5.66602 3.33268L10.3327 7.99935L5.66602 12.666", stroke: props.color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })));
 };
 exports.default = ArrowRightIcon;

package/dist/assets/svg/SpinnerIcon.js

@@ -10,20 +10,9 @@ var __assign = (this && this.__assign) || function () {
     };
     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 react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var SpinnerIcon = function (props) {
-    return (react_1.default.createElement("svg", __assign({}, props, { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }),
-        react_1.default.createElement("circle", { cx: "8", cy: "2", r: "2", fill: "white" }),
-        react_1.default.createElement("path", { d: "M13.3327 3.66732C13.3327 4.12756 12.9596 4.50065 12.4993 4.50065C12.0391 4.50065 11.666 4.12756 11.666 3.66732C11.666 3.20708 12.0391 2.83398 12.4993 2.83398C12.9596 2.83398 13.3327 3.20708 13.3327 3.66732Z", fill: "white" }),
-        react_1.default.createElement("ellipse", { cx: "7.99935", cy: "14.6673", rx: "1.33333", ry: "1.33333", fill: "white" }),
-        react_1.default.createElement("path", { d: "M5.00065 3.66732C5.00065 4.67984 4.17984 5.50065 3.16732 5.50065C2.1548 5.50065 1.33398 4.67984 1.33398 3.66732C1.33398 2.6548 2.1548 1.83398 3.16732 1.83398C4.17984 1.83398 5.00065 2.6548 5.00065 3.66732Z", fill: "white" }),
-        react_1.default.createElement("path", { d: "M3.33333 8.33268C3.33333 9.25316 2.58714 9.99935 1.66667 9.99935C0.746192 9.99935 0 9.25316 0 8.33268C0 7.41221 0.746192 6.66602 1.66667 6.66602C2.58714 6.66602 3.33333 7.41221 3.33333 8.33268Z", fill: "white" }),
-        react_1.default.createElement("path", { d: "M15.666 8.33398C15.666 8.88627 15.2183 9.33398 14.666 9.33398C14.1137 9.33398 13.666 8.88627 13.666 8.33398C13.666 7.7817 14.1137 7.33398 14.666 7.33398C15.2183 7.33398 15.666 7.7817 15.666 8.33398Z", fill: "white" }),
-        react_1.default.createElement("path", { d: "M4.83398 12.834C4.83398 13.6624 4.16241 14.334 3.33398 14.334C2.50556 14.334 1.83398 13.6624 1.83398 12.834C1.83398 12.0056 2.50556 11.334 3.33398 11.334C4.16241 11.334 4.83398 12.0056 4.83398 12.834Z", fill: "white" }),
-        react_1.default.createElement("path", { d: "M13.8333 12.5007C13.8333 13.145 13.311 13.6673 12.6667 13.6673C12.0223 13.6673 11.5 13.145 11.5 12.5007C11.5 11.8563 12.0223 11.334 12.6667 11.334C13.311 11.334 13.8333 11.8563 13.8333 12.5007Z", fill: "white" })));
+    return ((0, jsx_runtime_1.jsxs)("svg", __assign({}, props, { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "8", cy: "2", r: "2", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { d: "M13.3327 3.66732C13.3327 4.12756 12.9596 4.50065 12.4993 4.50065C12.0391 4.50065 11.666 4.12756 11.666 3.66732C11.666 3.20708 12.0391 2.83398 12.4993 2.83398C12.9596 2.83398 13.3327 3.20708 13.3327 3.66732Z", fill: "white" }), (0, jsx_runtime_1.jsx)("ellipse", { cx: "7.99935", cy: "14.6673", rx: "1.33333", ry: "1.33333", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { d: "M5.00065 3.66732C5.00065 4.67984 4.17984 5.50065 3.16732 5.50065C2.1548 5.50065 1.33398 4.67984 1.33398 3.66732C1.33398 2.6548 2.1548 1.83398 3.16732 1.83398C4.17984 1.83398 5.00065 2.6548 5.00065 3.66732Z", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { d: "M3.33333 8.33268C3.33333 9.25316 2.58714 9.99935 1.66667 9.99935C0.746192 9.99935 0 9.25316 0 8.33268C0 7.41221 0.746192 6.66602 1.66667 6.66602C2.58714 6.66602 3.33333 7.41221 3.33333 8.33268Z", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { d: "M15.666 8.33398C15.666 8.88627 15.2183 9.33398 14.666 9.33398C14.1137 9.33398 13.666 8.88627 13.666 8.33398C13.666 7.7817 14.1137 7.33398 14.666 7.33398C15.2183 7.33398 15.666 7.7817 15.666 8.33398Z", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { d: "M4.83398 12.834C4.83398 13.6624 4.16241 14.334 3.33398 14.334C2.50556 14.334 1.83398 13.6624 1.83398 12.834C1.83398 12.0056 2.50556 11.334 3.33398 11.334C4.16241 11.334 4.83398 12.0056 4.83398 12.834Z", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { d: "M13.8333 12.5007C13.8333 13.145 13.311 13.6673 12.6667 13.6673C12.0223 13.6673 11.5 13.145 11.5 12.5007C11.5 11.8563 12.0223 11.334 12.6667 11.334C13.311 11.334 13.8333 11.8563 13.8333 12.5007Z", fill: "white" })] })));
 };
 exports.default = SpinnerIcon;

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,77 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(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 Breadcrumbs = function (props) {
+    var data = props.data, subMenuRowLength = props.subMenuRowLength;
+    var _a = react_1.default.useState(false), showDropdown = _a[0], setShowDropdown = _a[1];
+    var breadcrumbSmRef = react_1.default.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 || [];
+        }
+        return [];
+    };
+    var ButtonLinkComponent = function (_a) {
+        var item = _a.item, children = _a.children;
+        return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
+    };
+    react_1.default.useEffect(function () {
+        if (breadcrumbSmRef && breadcrumbSmRef.current)
+            breadcrumbSmRef.current.scrollLeft = 0;
+    }, [data]);
+    var SubMenu = function (_a) {
+        var data = _a.data;
+        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, __assign({ 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, __assign({ isActive: child.isActive, className: "caption-medium-12-15" }, { children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: child }, { children: child.name })) })));
+                            }) }) }));
+                }) })) }));
+    };
+    var SubMenuMobile = function () {
+        var _a;
+        return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubMenuMobileWrapper, __assign({ 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, __assign({ isActive: item.isActive, className: "caption-bold-12-15" }, { children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ 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, { 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, __assign({ onClick: function () { return setShowDropdown(!showDropdown); }, className: "caption-bold-12-15" }, { children: [breadCrumbItem.name, (0, jsx_runtime_1.jsx)(Icon_1.default, { name: !showDropdown ? "ArrowSmallDown" : "ArrowSmallUp" })] })), showDropdown && (0, jsx_runtime_1.jsx)(SubMenu, { data: breadCrumbItem.children })] })) : ((0, jsx_runtime_1.jsxs)(ButtonLinkComponent, __assign({ 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, __assign({ className: "caption-bold-12-15" }, { children: breadCrumbItem.name }))] })))] }, breadCrumbItem.id));
+                }) }), (0, jsx_runtime_1.jsx)(SubMenuMobile, {})] }));
+};
+exports.default = Breadcrumbs;
+Breadcrumbs.propTypes = {
+    subMenuRowLength: prop_types_1.default.number,
+};
+Breadcrumbs.defaultProps = {
+    subMenuRowLength: 7,
+};

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

@@ -0,0 +1,28 @@
+"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.SubMenuMobileItem = exports.SubMenuMobileWrapper = exports.BreadcrumbsListDropdownListItem = exports.SubCategoryItemListItem = exports.SubCategoryItemList = exports.SubCategoryItem = exports.DropdownList = exports.BreadcrumbsListDropdownOpener = exports.BreadcrumbsListDropdownWrapper = exports.BreadcrumbsListItemBackIconWrapper = exports.BreadcrumbsListItemIconWrapper = exports.BreadcrumbsListItemInner = exports.BreadcrumbsListItem = exports.BreadcrumbsList = exports.BreadcrumbsWrapper = void 0;
+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.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"], ["\n  position: relative;\n  margin: 0;\n  display: block;\n  color: var(--dark-opacity-50);\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.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: block;\n  padding: 0;\n"], ["\n  display: block;\n  padding: 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  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"])), function (props) { return (props.isActive ? "" : "&:hover{"); }, function (props) { return (props.isActive ? "" : "}"); });
+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-bottom: 30px;\n  margin-bottom: 0;\n  margin-top: 24px;\n  display: none;\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-bottom: 30px;\n  margin-bottom: 0;\n  margin-top: 24px;\n  display: none;\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: 10px 24px;\n    background: #ffffff;\n    border: 1px solid ", ";\n    box-shadow: 0px 6px 30px #eae9f0;\n    border-radius: 4px;\n    text-align: center;\n    color: ", ";\n  }\n"], ["\n  display: block;\n  a {\n    display: block;\n    padding: 10px 24px;\n    background: #ffffff;\n    border: 1px solid ", ";\n    box-shadow: 0px 6px 30px #eae9f0;\n    border-radius: 4px;\n    text-align: center;\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/Breadcrumbs/index.js

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

package/dist/components/Breadcrumbs/props.js

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

package/dist/components/Breadcrumbs/stories/Breadcrumbs.stories.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var Breadcrumbs_1 = __importDefault(require("../Breadcrumbs"));
+var breadcrumbs_json_1 = __importDefault(require("../../../jsons/breadcrumbs.json"));
+exports.default = {
+    title: "Components/Breadcrumbs",
+    component: Breadcrumbs_1.default,
+    tags: ["autodocs"],
+    argTypes: {},
+};
+exports.Default = {
+    argTypes: {
+        subMenuRowLength: { control: "number" },
+        data: { control: "disabled" },
+    },
+    args: {
+        data: breadcrumbs_json_1.default,
+        subMenuRowLength: 5,
+    },
+};

package/dist/components/Button/Button.js

@@ -1,22 +1,32 @@
 "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 react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var Button_styled_1 = require("./Button.styled");
 var Spinner_1 = __importDefault(require("../Spinner"));
 var classnames_1 = __importDefault(require("classnames"));
+var Icon_1 = __importDefault(require("../Icon/Icon"));
 var Children = function (props) {
     var children = props.children, icon = props.icon;
-    return react_1.default.createElement(react_1.default.Fragment, null,
-        children,
-        icon && react_1.default.createElement(Button_styled_1.IconStyled, null, icon));
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, icon && (0, jsx_runtime_1.jsx)(Button_styled_1.IconStyled, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon }) })] });
 };
 var Button = function (props) {
     var _a;
     var isLoading = props.isLoading, onClick = props.onClick, disabled = props.disabled, size = props.size, variant = props.variant, width = props.width, icon = props.icon, children = props.children;
-    return (react_1.default.createElement(Button_styled_1.ButtonStyled, { className: (0, classnames_1.default)("body-bold-14-17", (_a = {}, _a["loading"] = isLoading, _a)), onClick: onClick, disabled: disabled || isLoading, size: size, variant: variant, width: width }, isLoading ? react_1.default.createElement(Spinner_1.default, { width: "16px", height: "16px", variant: variant === 'primary' ? 'secondary' : 'primary' }) :
-        react_1.default.createElement(Children, { icon: icon }, children)));
+    return ((0, jsx_runtime_1.jsx)(Button_styled_1.ButtonStyled, __assign({ className: (0, classnames_1.default)("body-bold-14-17", (_a = {}, _a["loading"] = isLoading, _a)), onClick: onClick, disabled: disabled || isLoading, size: size, variant: variant, width: width }, { children: isLoading ? (0, jsx_runtime_1.jsx)(Spinner_1.default, { width: "16px", height: "16px", variant: variant === 'primary' ? 'secondary' : 'primary' }) :
+            (0, jsx_runtime_1.jsx)(Children, __assign({ icon: icon }, { children: children })) })));
 };
 exports.default = Button;

package/dist/components/Button/props.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sizes = exports.variants = void 0;
+exports.iconNames = exports.sizes = exports.variants = void 0;
+var Icon_1 = require("../Icon");
 exports.variants = ['primary', 'secondary', 'inverted'];
 exports.sizes = ['big', 'medium', 'small', 'xsmall'];
+exports.iconNames = Object.keys(Icon_1.iconList);
 var ButtonDefault = { size: 'medium', variant: 'primary', isLoading: false, width: "auto" };

package/dist/components/Button/stories/Button.stories.js

@@ -15,22 +15,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Icon = exports.Default = void 0;
-var react_1 = __importDefault(require("react"));
 var Button_1 = __importDefault(require("../Button"));
 var props_1 = require("../props");
-var ArrowRightIcon_1 = __importDefault(require("../../../assets/svg/ArrowRightIcon"));
+var Icon_1 = require("../../Icon");
 exports.default = {
-    title: 'Button',
+    title: 'Components/Button',
     component: Button_1.default,
     tags: ['autodocs'],
     argTypes: {
         variant: { control: 'select', options: props_1.variants },
         size: { control: 'select', options: props_1.sizes },
-        icon: {
-            table: {
-                disable: true,
-            }
-        },
+        icon: { control: 'select', options: Object.keys(Icon_1.iconList) },
         onClick: { action: 'clicked' }
     }
 };
@@ -45,5 +40,5 @@ exports.Default = {
     },
 };
 exports.Icon = {
-    args: __assign(__assign({}, exports.Default.args), { icon: react_1.default.createElement(ArrowRightIcon_1.default, { width: "16px", height: "16px", color: "white" }) }),
+    args: __assign(__assign({}, exports.Default.args), { icon: 'Again' }),
 };

package/dist/components/CategoryMenu/CategoryMenu.js

@@ -0,0 +1,61 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 prop_types_1 = __importDefault(require("prop-types"));
+var CategoryMenu_styled_1 = require("./CategoryMenu.styled");
+var refactorColumn_1 = __importDefault(require("./../../utils/refactorColumn"));
+var Icon_1 = __importDefault(require("../Icon/Icon"));
+var CategoryMenu = function (props) {
+    var data = props.data, subMenuRowLength = props.subMenuRowLength;
+    var ButtonLinkComponent = function (_a) {
+        var item = _a.item, children = _a.children;
+        return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
+    };
+    var MenuButton = function (_a) {
+        var item = __rest(_a, []);
+        return ((0, jsx_runtime_1.jsxs)(CategoryMenu_styled_1.CategoryItem, __assign({ isActiveCategory: item.isActive }, { children: [(0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ 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, __assign({ className: "caption-semi-bold-12-15" }, { children: item.name }))] }) })), item.children] })));
+    };
+    var CategorySubMenu = function (_a) {
+        var data = _a.data;
+        var grid = subMenuRowLength && Math.ceil(data.length / subMenuRowLength);
+        var dataWithColumn = (0, refactorColumn_1.default)(data, subMenuRowLength || 0);
+        return ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubMenu, __assign({ gridTemplateColumns: grid }, { children: dataWithColumn.map(function (item, key) {
+                return ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubCategoryItem, { children: (0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubCategoryInner, { children: item.map(function (subItem, subKey) { return ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubCategoryInnerItem, __assign({ isSeeAll: subItem.isSeeAll }, { children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: subItem }, { children: (0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubCategoryInnerItemButtonInner, __assign({ className: "caption-medium-12-15" }, { children: subItem.name })) })) }), subItem.id)); }) }) }, key));
+            }) })));
+    };
+    return ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryMenuWrapper, { children: data === null || data === void 0 ? void 0 : data.map(function (item) {
+            return ((0, jsx_runtime_1.jsx)(MenuButton, __assign({}, item, { children: item.children.length > 0 && ((0, jsx_runtime_1.jsx)(CategorySubMenu, { data: item.children })) }), item.id));
+        }) }));
+};
+exports.default = CategoryMenu;
+CategoryMenu.propTypes = {
+    subMenuRowLength: prop_types_1.default.number,
+};
+CategoryMenu.defaultProps = {
+    subMenuRowLength: 7,
+};

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

@@ -0,0 +1,43 @@
+"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 __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 });
+exports.SubCategoryInnerItemButtonInner = exports.SubCategoryInnerItem = exports.SubCategoryInner = exports.SubCategoryItem = exports.SubMenu = exports.CategoryItemButtonTitle = exports.CategoryItemButtonIcon = exports.CategoryItemButtonInner = exports.CategoryItem = exports.CategoryMenuWrapper = void 0;
+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.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"])));
+exports.SubMenu = styled_components_1.default.ul(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    padding: 8px;\n    border: 1px solid var(--grey-10);\n    background-color: white;\n    position: absolute;\n    left: 0;\n    border-radius: 8px;\n    top: 100%;\n    transition: all 0.2s ease-in-out;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(10px);\n    display: grid;\n    gap: 0 16px;\n    grid-template-columns: repeat(", ", 154px)\n"], ["\n    padding: 8px;\n    border: 1px solid var(--grey-10);\n    background-color: white;\n    position: absolute;\n    left: 0;\n    border-radius: 8px;\n    top: 100%;\n    transition: all 0.2s ease-in-out;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(10px);\n    display: grid;\n    gap: 0 16px;\n    grid-template-columns: repeat(", ", 154px)\n"])), function (props) { return props.gridTemplateColumns || '3'; });
+exports.SubCategoryItem = styled_components_1.default.li(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    display: block;\n    padding: 0;\n"], ["\n    display: block;\n    padding: 0;\n"])));
+exports.SubCategoryInner = styled_components_1.default.ul(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    padding: 0;\n    display: block;\n"], ["\n    padding: 0;\n    display: block;\n"])));
+exports.SubCategoryInnerItem = styled_components_1.default.li(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    padding: 0;\n    display: block;\n    a > span {\n        font-weight: ", ";\n    }\n"], ["\n    padding: 0;\n    display: block;\n    a > span {\n        font-weight: ", ";\n    }\n"])), function (props) { return props.isSeeAll ? '600' : '500'; });
+exports.SubCategoryInnerItemButtonInner = styled_components_1.default.span(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    display:block;\n    padding: 0;\n    text-decoration: none;\n    color: var(--dark);\n    padding: 8px;\n    border-radius: 5px;\n    display: block;\n    background: transparent;\n    outline:0;\n    border:0;\n    width:100%;\n    text-align:start;\n    font-family:inherit;\n    cursor:pointer;\n    box-sizing: border-box;\n    &:hover {\n        background-color: var(--primary-opacity-10);\n        color: var(--primary);\n        font-weight: 600;\n    }\n"], ["\n    display:block;\n    padding: 0;\n    text-decoration: none;\n    color: var(--dark);\n    padding: 8px;\n    border-radius: 5px;\n    display: block;\n    background: transparent;\n    outline:0;\n    border:0;\n    width:100%;\n    text-align:start;\n    font-family:inherit;\n    cursor:pointer;\n    box-sizing: border-box;\n    &:hover {\n        background-color: var(--primary-opacity-10);\n        color: var(--primary);\n        font-weight: 600;\n    }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/dist/components/CategoryMenu/index.js

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

package/dist/components/CategoryMenu/props.js

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

package/dist/components/CategoryMenu/stories/CategoryMenu.stories.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var CategoryMenu_1 = __importDefault(require("../CategoryMenu"));
+var categories_json_1 = __importDefault(require("./../../../jsons/categories.json"));
+exports.default = {
+    title: 'Components/CategoryMenu',
+    component: CategoryMenu_1.default,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+exports.Default = {
+    argTypes: {
+        subMenuRowLength: { control: 'number' },
+        data: { control: 'disabled' }
+    },
+    args: {
+        subMenuRowLength: 7,
+        data: categories_json_1.default,
+    },
+};

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,39 @@
+"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 Checkbox_styled_1 = require("./Checkbox.styled");
+var prop_types_1 = __importDefault(require("prop-types"));
+var classnames_1 = __importDefault(require("classnames"));
+var Checkbox = function (props) {
+    var _a, _b, _c, _d;
+    var value = props.value, checked = props.checked, onChange = props.onChange, name = props.name, id = props.id, label = props.label, disabled = props.disabled, size = props.size, description = props.description, valid = props.valid;
+    return ((0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxStyled, __assign({ htmlFor: id, disabled: disabled, checked: checked, size: size, valid: valid }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "labelsWrapper" }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ className: (0, classnames_1.default)("label", (_a = {}, _a["body-medium-14-17"] = size === "small", _a), (_b = {}, _b["title-medium-16-19"] = size === "medium", _b)), htmlFor: id }, { children: label })), (0, jsx_runtime_1.jsx)("label", __assign({ className: (0, classnames_1.default)("description", (_c = {}, _c["body-regular-13-16"] = size === "small", _c), (_d = {}, _d["body-regular-13-16"] = size === "medium", _d)), htmlFor: id }, { children: description }))] }))] })));
+};
+exports.default = Checkbox;
+Checkbox.propTypes = {
+    id: prop_types_1.default.string,
+    size: prop_types_1.default.string,
+    label: prop_types_1.default.string,
+    description: prop_types_1.default.string,
+    valid: prop_types_1.default.bool,
+    disabled: prop_types_1.default.bool,
+};
+Checkbox.defaultProps = {
+    id: "styledChecbox_".concat(Math.floor(Math.random() * (99999999999 - 11111111111) + 11111111111)),
+    size: "small",
+    valid: true,
+};

package/dist/components/Checkbox/Checkbox.styled.js

@@ -0,0 +1,34 @@
+"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.CheckboxStyled = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+var Icon_1 = __importDefault(require("../Icon/Icon"));
+var svgToBase65_1 = __importDefault(require("./../../utils/svgToBase65"));
+exports.CheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex:1;\n    position:relative;\n    display:flex;\n    align-items:flex-start;\n    justify-content:flex-start;\n    input[type=\"checkbox\"]{\n        height: 0;\n        width: 0;\n        opacity: 0;\n        z-index: -1;\n        &:checked ~ .indicator{\n            background-image:url('", "');\n        }\n    }\n    div.indicator{\n        background-image:url('", "');\n        background-size:100% 100%;\n        display:block;\n        position:relative;\n        width: ", ";\n        height: ", ";\n        &::disabled {\n            cursor: not-allowed;\n        }\n    }\n    div.labelsWrapper{\n        position: relative;\n        display: inline-block;\n        cursor: ", ";\n        margin: ", ";\n        color:", ";\n        label.label{\n            display:block;\n            margin:0;\n        }\n        label.description{\n            display:block;\n            margin:0;\n        }\n    }\n"], ["\n    flex:1;\n    position:relative;\n    display:flex;\n    align-items:flex-start;\n    justify-content:flex-start;\n    input[type=\"checkbox\"]{\n        height: 0;\n        width: 0;\n        opacity: 0;\n        z-index: -1;\n        &:checked ~ .indicator{\n            background-image:url('", "');\n        }\n    }\n    div.indicator{\n        background-image:url('", "');\n        background-size:100% 100%;\n        display:block;\n        position:relative;\n        width: ", ";\n        height: ", ";\n        &::disabled {\n            cursor: not-allowed;\n        }\n    }\n    div.labelsWrapper{\n        position: relative;\n        display: inline-block;\n        cursor: ", ";\n        margin: ", ";\n        color:", ";\n        label.label{\n            display:block;\n            margin:0;\n        }\n        label.description{\n            display:block;\n            margin:0;\n        }\n    }\n"])), (0, svgToBase65_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementChecked" })), function (props) { return props.disabled ? (0, svgToBase65_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementDisabled" })) : (props.valid ? (0, svgToBase65_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementUncheck" })) : (0, svgToBase65_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementInvalid" }))); }, function (props) {
+    switch (props.size) {
+        case 'small':
+            return "16px";
+        case 'medium':
+            return "24px";
+        default:
+            return "16px";
+    }
+}, function (props) {
+    switch (props.size) {
+        case 'small':
+            return "16px";
+        case 'medium':
+            return "24px";
+        default:
+            return "16px";
+    }
+}, function (props) { return (props.disabled ? "not-allowed" : "pointer"); }, function (props) { return (props.size === "small" ? "0 0 0 8px" : "2px 0 0 16px"); }, function (props) { return props.valid ? '#000000' : 'var(--red)'; });
+var templateObject_1;

package/dist/components/Checkbox/index.js

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

package/dist/components/Checkbox/props.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sizes = void 0;
+exports.sizes = ["small", "medium"];
+var CheckboxDefault = {
+    size: "small",
+    checked: false,
+    valid: true
+};

package/dist/components/Checkbox/stories/Checkbox.stories.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var Checkbox_1 = __importDefault(require("../Checkbox"));
+var props_1 = require("../props");
+exports.default = {
+    title: "Components/Checkbox",
+    component: Checkbox_1.default,
+    tags: ["autodocs"],
+    argTypes: {
+        id: { control: "disabled" },
+        size: { control: "select", options: props_1.sizes },
+        label: { control: "text" },
+        description: { control: "text" },
+    },
+};
+exports.Default = {
+    argTypes: {
+        size: { control: "select", options: props_1.sizes },
+        label: { control: "text" },
+        description: { control: "text" },
+    },
+    args: {
+        label: "Text",
+        description: "Description",
+        valid: true,
+    },
+};