@gobizweb/core 0.0.7

package/lib/components/Skeleton/SkeletonText.component.js

@@ -0,0 +1,62 @@
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 });
+exports.SkeletonText = void 0;
+var React = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var withStyles_1 = require("../../decorators/withStyles");
+var SkeletonWrapper_component_1 = require("./SkeletonWrapper.component");
+var SkeletonTextEl = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: rgba(10, 20, 30, 0.05);\n  border-radius: 2px;\n\n  > * {\n    opacity: 0;\n  }\n"], ["\n  background-color: rgba(10, 20, 30, 0.05);\n  border-radius: 2px;\n\n  > * {\n    opacity: 0;\n  }\n"])));
+exports.SkeletonText = withStyles_1.withStyles(function (_a) {
+    var children = _a.children, others = __rest(_a, ["children"]);
+    return (React.createElement(SkeletonWrapper_component_1.SkeletonWrapper, __assign({}, others),
+        React.createElement(SkeletonTextEl, null, children)));
+});
+var templateObject_1;

package/lib/components/Skeleton/SkeletonWrapper.component.js

@@ -0,0 +1,46 @@
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonWrapper = void 0;
+var React = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var withStyles_1 = require("../../decorators/withStyles");
+var WrapperEl = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow: hidden;\n  position: relative;\n  border-radius: ", ";\n\n  @keyframes load {\n    from {\n      left: -150px;\n    }\n    to {\n      left: 100%;\n    }\n  }\n\n  :before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    left: -150px;\n    top: 0;\n    height: 100%;\n    width: 150px;\n    background: linear-gradient(\n      to right,\n      transparent 0%,\n      white 50%,\n      transparent 100%\n    );\n    animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  }\n"], ["\n  overflow: hidden;\n  position: relative;\n  border-radius: ", ";\n\n  @keyframes load {\n    from {\n      left: -150px;\n    }\n    to {\n      left: 100%;\n    }\n  }\n\n  :before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    left: -150px;\n    top: 0;\n    height: 100%;\n    width: 150px;\n    background: linear-gradient(\n      to right,\n      transparent 0%,\n      white 50%,\n      transparent 100%\n    );\n    animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  }\n"])), function (p) { return (p.circle ? "50%" : "unset"); });
+exports.SkeletonWrapper = withStyles_1.withStyles(function (props) { return (React.createElement(WrapperEl, __assign({}, props))); });
+var templateObject_1;

package/lib/components/Skeleton/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./SkeletonApp.component"), exports);
+__exportStar(require("./SkeletonTable.component"), exports);
+__exportStar(require("./SkeletonText.component"), exports);
+__exportStar(require("./SkeletonWrapper.component"), exports);

package/lib/components/Stepper/Stepper.component.js

@@ -0,0 +1,126 @@
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Stepper = exports.StepperItem = void 0;
+var iconpack_1 = require("@asphalt-react/iconpack");
+var React = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var mobx_react_lite_1 = require("mobx-react-lite");
+var Translation_provider_1 = require("../../providers/Translation.provider");
+var Box_1 = require("../Box");
+var Text_1 = require("../Text");
+var withStyles_1 = require("../../decorators/withStyles");
+var StepperEl = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  overflow: hidden;\n  justify-content: center;\n  padding: 16px;\n\n  ", "\n"], ["\n  display: flex;\n  overflow: hidden;\n  justify-content: center;\n  padding: 16px;\n\n  ",
+    "\n"])), function (p) {
+    return p.vertical && styled_components_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-direction: column;\n    "], ["\n      flex-direction: column;\n    "])));
+});
+var StepperItemEl = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  font-size: ", ";\n  text-align: center;\n  position: relative;\n  width: 30%;\n\n  ", "\n\n  &:before {\n    background-color: ", ";\n    content: \"\";\n    position: absolute;\n    top: 13px;\n\n    ", "\n\n    ", "\n  }\n\n  &:after {\n    color: ", ";\n    content: \"", "\";\n    font-weight: ", ";\n    font-size: ", ";\n\n    ", "\n\n    ", "\n  }\n\n  &:last-child {\n    &:before {\n      display: none;\n    }\n  }\n"], ["\n  font-size: ", ";\n  text-align: center;\n  position: relative;\n  width: 30%;\n\n  ",
+    "\n\n  &:before {\n    background-color: ", ";\n    content: \"\";\n    position: absolute;\n    top: 13px;\n\n    ",
+    "\n\n    ",
+    "\n  }\n\n  &:after {\n    color: ", ";\n    content: \"", "\";\n    font-weight: ", ";\n    font-size: ", ";\n\n    ",
+    "\n\n    ",
+    "\n  }\n\n  &:last-child {\n    &:before {\n      display: none;\n    }\n  }\n"])), function (p) { return p.theme.text.size.small; }, function (p) {
+    return p.vertical && styled_components_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      height: 72px;\n      width: 100%;\n    "], ["\n      height: 72px;\n      width: 100%;\n    "])));
+}, function (p) { return p.theme.colors.background.accent; }, function (p) {
+    return p.vertical
+        ? styled_components_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            border-left-style: solid;\n            border-left-width: 4px;\n            bottom: 0;\n            color: ", ";\n            left: 12px;\n            position: absolute;\n            top: 0;\n          "], ["\n            border-left-style: solid;\n            border-left-width: 4px;\n            bottom: 0;\n            color: ", ";\n            left: 12px;\n            position: absolute;\n            top: 0;\n          "])), p.theme.colors.borders.appBar) : styled_components_1.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            height: 4px;\n            width: 100%;\n          "], ["\n            height: 4px;\n            width: 100%;\n          "])));
+}, function (p) {
+    return p.completed && styled_components_1.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        background-color: ", ";\n        color: ", ";\n      "], ["\n        background-color: ", ";\n        color: ", ";\n      "])), p.theme.colors.background.primaryLight, p.theme.colors.background.primaryLight);
+}, function (p) { return p.theme.colors.text.placeholder; }, function (p) { return p.text; }, function (p) { return p.theme.text.fontWeight.book; }, function (p) { return p.theme.text.size.small; }, function (p) {
+    return p.vertical && styled_components_1.css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        position: absolute;\n        top: 7px;\n        left: 38px;\n        font-weight: ", ";\n        font-size: ", ";\n      "], ["\n        position: absolute;\n        top: 7px;\n        left: 38px;\n        font-weight: ", ";\n        font-size: ", ";\n      "])), function (p) { return p.theme.text.fontWeight.demi; }, function (p) { return p.theme.text.size.normal; });
+}, function (p) {
+    return p.active && styled_components_1.css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), function (p) { return p.theme.colors.text.readable; });
+});
+var StepperIconEl = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 50%;\n  box-shadow: 0 3px 9px -2px rgba(0, 0, 0, 0.25);\n  color: ", ";\n  display: flex;\n  height: 28px;\n  justify-content: center;\n  line-height: 30px;\n  margin: 0 auto 10px auto;\n  text-align: center;\n  position: relative;\n  width: 28px;\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 50%;\n  box-shadow: 0 3px 9px -2px rgba(0, 0, 0, 0.25);\n  color: ", ";\n  display: flex;\n  height: 28px;\n  justify-content: center;\n  line-height: 30px;\n  margin: 0 auto 10px auto;\n  text-align: center;\n  position: relative;\n  width: 28px;\n\n  ",
+    "\n\n  ",
+    "\n\n  ",
+    "\n"])), function (p) { return p.theme.colors.background.white; }, function (p) { return p.theme.colors.background.white; }, function (p) {
+    return p.vertical && styled_components_1.css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      margin: 0;\n    "], ["\n      margin: 0;\n    "])));
+}, function (p) {
+    return p.active && styled_components_1.css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), function (p) { return p.theme.colors.background.white; });
+}, function (p) {
+    return p.completed && styled_components_1.css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      background-color: ", ";\n    "], ["\n      background-color: ", ";\n    "])), function (p) { return p.theme.colors.background.primary; });
+});
+var RippleAnimation = styled_components_1.keyframes(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  0% {\n    opacity: 1;\n    transform: scale(0);\n  }\n  100% {\n    opacity: 0;\n    transform: scale(2);\n  }\n"], ["\n  0% {\n    opacity: 1;\n    transform: scale(0);\n  }\n  100% {\n    opacity: 0;\n    transform: scale(2);\n  }\n"])));
+var InProgressIconEl = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  &:before,\n  &:after {\n    background: ", ";\n    border-radius: 50%;\n    content: \"\";\n    height: 10px;\n    left: 0;\n    margin-left: auto;\n    margin-right: auto;\n    position: absolute;\n    right: 0;\n    top: 8px;\n    text-align: center;\n    width: 10px;\n  }\n\n  &:after {\n    animation: ", ";\n    animation-duration: 1.8s;\n    animation-iteration-count: infinite;\n  }\n"], ["\n  &:before,\n  &:after {\n    background: ", ";\n    border-radius: 50%;\n    content: \"\";\n    height: 10px;\n    left: 0;\n    margin-left: auto;\n    margin-right: auto;\n    position: absolute;\n    right: 0;\n    top: 8px;\n    text-align: center;\n    width: 10px;\n  }\n\n  &:after {\n    animation: ", ";\n    animation-duration: 1.8s;\n    animation-iteration-count: infinite;\n  }\n"])), function (p) { return p.theme.colors.background.primary; }, RippleAnimation);
+var CombinedStepperContainerEl = styled_components_1.default(Box_1.Box)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  ", "\n"], ["\n  align-items: center;\n  display: flex;\n  ",
+    "\n"])), function (p) {
+    return styled_components_1.css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      padding: ", "px ", "px;\n    "], ["\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      padding: ", "px ", "px;\n    "])), p.theme.colors.borders.stepper, p.theme.dimension.borderRadius[1], p.theme.layout.margin.s, p.theme.layout.margin.l);
+});
+exports.StepperItem = function (props) {
+    var active = props.active, completed = props.completed, vertical = props.vertical, text = props.text;
+    var iconState = function () {
+        if (completed) {
+            return React.createElement(iconpack_1.Tick, null);
+        }
+        if (active) {
+            return React.createElement(InProgressIconEl, null);
+        }
+        return;
+    };
+    return (React.createElement(StepperItemEl, { active: active, completed: completed, vertical: vertical, text: text },
+        React.createElement(StepperIconEl, { active: active, completed: completed, vertical: vertical }, iconState())));
+};
+exports.Stepper = mobx_react_lite_1.observer(withStyles_1.withStyles(function (props) {
+    var children = props.children, _a = props.activeIndex, activeIndex = _a === void 0 ? 0 : _a, vertical = props.vertical, combine = props.combine, className = props.className;
+    var injectChildrenProps = React.Children.map(children, function (child, index) {
+        return React.cloneElement(child, __assign(__assign({}, child.props), { active: index <= activeIndex, completed: index < activeIndex, vertical: vertical }));
+    });
+    var translate = Translation_provider_1.useTranslation(require("./translations.json"));
+    if (combine) {
+        var totalChild = React.Children.count(children);
+        var getActiveChild = React.Children.toArray(children)[activeIndex];
+        var currentNumber = activeIndex + 1;
+        var text = "";
+        if (React.isValidElement(getActiveChild)) {
+            text = getActiveChild.props.text;
+        }
+        return (React.createElement(CombinedStepperContainerEl, { width100: true },
+            React.createElement(Box_1.Box, null,
+                React.createElement(Text_1.Text, { fontWeight: "demi", fontSize: "small" },
+                    translate("steps"),
+                    " ",
+                    currentNumber,
+                    React.createElement(Text_1.Text, { as: "span", fontWeight: "demi", color: "placeholder", fontSize: "small" },
+                        " ",
+                        "/ ",
+                        totalChild)),
+                React.createElement(Text_1.Text, { fontWeight: "demi" }, text))));
+    }
+    return (React.createElement(Box_1.Box, { marginBottomL: true, className: className },
+        React.createElement(StepperEl, { vertical: vertical }, injectChildrenProps)));
+}));
+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, templateObject_16, templateObject_17;

package/lib/components/Stepper/WithStepper.js

@@ -0,0 +1,65 @@
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withStepper = void 0;
+var React = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var constants_1 = require("../../constants");
+var hooks_1 = require("../../hooks");
+var Breakpoint_1 = require("../Breakpoint");
+var Card_1 = require("../Card");
+var Stepper_component_1 = require("./Stepper.component");
+var ContainerEl = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: table;\n\n  ", " {\n    height: calc(", "px - 88px);\n  }\n\n  ", " {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    margin: auto;\n    max-width: 600px;\n  }\n"], ["\n  display: table;\n\n  ", " {\n    height: calc(", "px - 88px);\n  }\n\n  ", " {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    margin: auto;\n    max-width: 600px;\n  }\n"])), constants_1.MediaQueries.screen.medium.maxWidth, function (p) { return p.height; }, constants_1.MediaQueries.screen.medium.minWidth);
+exports.withStepper = function (activeIndex) { return function (Component) {
+    return function (props) {
+        var innerHeight = hooks_1.useWindow().innerHeight;
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Breakpoint_1.Breakpoint, { medium: true, up: true },
+                React.createElement(ContainerEl, { height: innerHeight },
+                    React.createElement(Stepper_component_1.Stepper, { activeIndex: activeIndex }, props.stepperItems.map(function (item, key) { return (React.createElement(Stepper_component_1.StepperItem, { key: key, text: item })); })),
+                    React.createElement(Card_1.Card, { paddingS: true },
+                        React.createElement(Card_1.CardBody, { flex: true, flexDirectionColumn: true },
+                            React.createElement(Component, __assign({}, props)))))),
+            React.createElement(Breakpoint_1.Breakpoint, { medium: true, down: true },
+                React.createElement(ContainerEl, { height: innerHeight },
+                    React.createElement(Stepper_component_1.Stepper, { activeIndex: activeIndex }, props.stepperItems.map(function (item, key) { return (React.createElement(Stepper_component_1.StepperItem, { key: key, text: item })); })),
+                    React.createElement(Component, __assign({}, props))))));
+    };
+}; };
+var templateObject_1;

package/lib/components/Stepper/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Stepper_component_1 = require("./Stepper.component");
+Object.defineProperty(exports, "Stepper", { enumerable: true, get: function () { return Stepper_component_1.Stepper; } });
+Object.defineProperty(exports, "StepperItem", { enumerable: true, get: function () { return Stepper_component_1.StepperItem; } });
+__exportStar(require("./WithStepper"), exports);

package/lib/components/Table/Table.component.js

@@ -0,0 +1,71 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableData = exports.TableHeading = exports.TableRow = exports.TableBody = exports.TableHeader = exports.Table = void 0;
+var React = __importStar(require("react"));
+var withStyles_1 = require("../../decorators/withStyles");
+var Table_styled_1 = require("./Table.styled");
+exports.Table = withStyles_1.withStyles(function (_a) {
+    var striped = _a.striped, fixed = _a.fixed, children = _a.children;
+    return (React.createElement(Table_styled_1.TableEl, { striped: striped, fixed: fixed }, children));
+});
+exports.TableHeader = function (_a) {
+    var children = _a.children, other = __rest(_a, ["children"]);
+    return (React.createElement(Table_styled_1.TableTheadEl, __assign({}, other), children));
+};
+exports.TableBody = function (_a) {
+    var children = _a.children, other = __rest(_a, ["children"]);
+    return (React.createElement("tbody", __assign({}, other), children));
+};
+exports.TableRow = function (_a) {
+    var children = _a.children, other = __rest(_a, ["children"]);
+    return React.createElement(Table_styled_1.TableRowEl, __assign({}, other), children);
+};
+exports.TableHeading = function (_a) {
+    var children = _a.children, other = __rest(_a, ["children"]);
+    return React.createElement(Table_styled_1.TableHeadingEl, __assign({}, other), children);
+};
+exports.TableData = function (_a) {
+    var children = _a.children, other = __rest(_a, ["children"]);
+    return React.createElement(Table_styled_1.TableDataEl, __assign({}, other), children);
+};

package/lib/components/Table/Table.styled.js

@@ -0,0 +1,51 @@
+"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;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableDataEl = exports.TableRowEl = exports.TableTheadEl = exports.TableHeadingEl = exports.TableEl = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+exports.TableEl = styled_components_1.default.table(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border: none;\n  border-collapse: collapse;\n  border-spacing: 0;\n  max-width: 100%;\n  width: 100%;\n\n  ", "\n\n  ", "\n"], ["\n  border: none;\n  border-collapse: collapse;\n  border-spacing: 0;\n  max-width: 100%;\n  width: 100%;\n\n  ",
+    "\n\n  ",
+    "\n"])), function (props) {
+    return props.fixed && styled_components_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      table-layout: fixed;\n      td {\n        white-space: break-spaces !important;\n      }\n    "], ["\n      table-layout: fixed;\n      td {\n        white-space: break-spaces !important;\n      }\n    "])));
+}, function (props) {
+    return (props === null || props === void 0 ? void 0 : props.striped) && styled_components_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      tbody > tr > td {\n        height: 48px;\n      }\n      tbody > tr:nth-child(even) > td {\n        background-color: rgb(249, 249, 249);\n      }\n      tbody > tr > td {\n        padding: 12px 16px;\n      }\n      thead tr > th {\n        line-height: 48px;\n      }\n    "], ["\n      tbody > tr > td {\n        height: 48px;\n      }\n      tbody > tr:nth-child(even) > td {\n        background-color: rgb(249, 249, 249);\n      }\n      tbody > tr > td {\n        padding: 12px 16px;\n      }\n      thead tr > th {\n        line-height: 48px;\n      }\n    "])));
+});
+exports.TableHeadingEl = styled_components_1.default.th(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  text-align: left;\n  color: rgb(27, 40, 66);\n  font-family: \"Maison Neue\", sans-serif;\n  font-weight: 600;\n  font-size: 14px;\n  line-height: 40px;\n  padding: 0 16px;\n  text-transform: none;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  ", "\n  ", "\n"], ["\n  text-align: left;\n  color: rgb(27, 40, 66);\n  font-family: \"Maison Neue\", sans-serif;\n  font-weight: 600;\n  font-size: 14px;\n  line-height: 40px;\n  padding: 0 16px;\n  text-transform: none;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  ",
+    "\n  ",
+    "\n"])), function (props) {
+    return (props === null || props === void 0 ? void 0 : props.center) && styled_components_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      text-align: center;\n    "], ["\n      text-align: center;\n    "])));
+}, function (props) {
+    return (props === null || props === void 0 ? void 0 : props.right) && styled_components_1.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      text-align: right;\n    "], ["\n      text-align: right;\n    "])));
+});
+exports.TableTheadEl = styled_components_1.default.thead(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: #000;\n  font-size: 1em;\n  font-weight: ", ";\n  background-color: #e9ecef;\n"], ["\n  color: #000;\n  font-size: 1em;\n  font-weight: ", ";\n  background-color: #e9ecef;\n"])), function (p) { var _a; return (_a = p.theme.text) === null || _a === void 0 ? void 0 : _a.fontWeight.bold; });
+exports.TableRowEl = styled_components_1.default.tr(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  :first-child {\n    > td {\n      border-top: 1px solid #e9ecef;\n    }\n  }\n"], ["\n  :first-child {\n    > td {\n      border-top: 1px solid #e9ecef;\n    }\n  }\n"])));
+exports.TableDataEl = styled_components_1.default.td(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", "\n"], ["\n  ",
+    "\n"])), function (props) {
+    var _a, _b, _c, _d;
+    return styled_components_1.css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      border: none;\n      padding: ", "px\n        ", "px;\n      background-color: ", ";\n      color: ", ";\n      line-height: 1.5rem;\n      position: static;\n      vertical-align: top;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n\n      ", "\n\n      ", "\n    "], ["\n      border: none;\n      padding: ", "px\n        ", "px;\n      background-color: ", ";\n      color: ", ";\n      line-height: 1.5rem;\n      position: static;\n      vertical-align: top;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n\n      ",
+        "\n\n      ",
+        "\n    "])), (_a = props.theme.dimension) === null || _a === void 0 ? void 0 : _a.spacing.s, (_b = props.theme.dimension) === null || _b === void 0 ? void 0 : _b.spacing.l, (_c = props.theme.colors) === null || _c === void 0 ? void 0 : _c.background.white, (_d = props.theme.colors) === null || _d === void 0 ? void 0 : _d.text.black, props.center && styled_components_1.css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        display: flex;\n        justify-content: center;\n      "], ["\n        display: flex;\n        justify-content: center;\n      "]))), props.right && styled_components_1.css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n        display: flex;\n        justify-content: flex-end;\n      "], ["\n        display: flex;\n        justify-content: flex-end;\n      "]))));
+});
+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;

package/lib/components/Table/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Table.component"), exports);

package/lib/components/TableContainer/TableContainer.js

@@ -0,0 +1,32 @@
+"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;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableContainer = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var Box_1 = require("../Box");
+exports.TableContainer = styled_components_1.default(Box_1.Box)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  & table > tbody > tr {\n    ", "\n\n    &:nth-child(even) {\n      ", "\n    }\n  }\n"], ["\n  & table > tbody > tr {\n    ",
+    "\n\n    &:nth-child(even) {\n      ",
+    "\n    }\n  }\n"])), function (props) { return styled_components_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: ", "px 0;\n    "], ["\n      padding: ", "px 0;\n    "])), props.theme.dimension.spacing.l); }, function (props) { return styled_components_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        background-color: ", ";\n      "], ["\n        background-color: ", ";\n      "])), props.theme.colors.background.tableStrip); });
+var templateObject_1, templateObject_2, templateObject_3;

package/lib/components/TableContainer/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TableContainer"), exports);

package/lib/components/Text/Text.component.js

@@ -0,0 +1,90 @@
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = void 0;
+var React = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var withStyles_1 = require("../../decorators/withStyles");
+var TextEl = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  line-height: 1.33;\n  font-family: ", ";\n\n  ", "\n\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", ";\n"], ["\n  line-height: 1.33;\n  font-family: ", ";\n\n  ",
+    "\n\n  ",
+    "\n  ",
+    "\n    ",
+    "\n    ",
+    "\n    ",
+    "\n    ",
+    "\n    ",
+    "\n    ",
+    "\n    ",
+    ";\n"])), function (p) { return p.theme.text.fontFamily.normal; }, function (p) {
+    return p.fontFamily && styled_components_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n    "], ["\n      font-family: ", ";\n    "])), p.theme.text.fontFamily[p.fontFamily]);
+}, function (p) {
+    var _a, _b, _c, _d;
+    return p && styled_components_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      color: ", ";\n      font-weight: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      color: ", ";\n      font-weight: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])), (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text[p.color], (_b = p.theme.text) === null || _b === void 0 ? void 0 : _b.fontWeight[p.fontWeight], (_c = p.theme.text) === null || _c === void 0 ? void 0 : _c.size[p.fontSize], (_d = p.theme.text) === null || _d === void 0 ? void 0 : _d.lineHeight[p.lineHeight]);
+}, function (p) {
+    return p.uppercase && styled_components_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      text-transform: uppercase;\n    "], ["\n      text-transform: uppercase;\n    "])));
+}, function (p) {
+    return p.capitalize && styled_components_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      text-transform: capitalize;\n    "], ["\n      text-transform: capitalize;\n    "])));
+}, function (p) {
+    return p.underline && styled_components_1.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      text-decoration: underline;\n    "], ["\n      text-decoration: underline;\n    "])));
+}, function (p) {
+    return p.truncate && styled_components_1.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      display: -webkit-box;\n      -webkit-line-clamp: ", ";\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      hyphens: auto;\n    "], ["\n      display: -webkit-box;\n      -webkit-line-clamp: ", ";\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      hyphens: auto;\n    "])), p.maxLine || 2);
+}, function (p) {
+    return p.whiteSpace && styled_components_1.css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      white-space: ", ";\n    "], ["\n      white-space: ", ";\n    "])), p.whiteSpace);
+}, function (p) {
+    return p.wordBreak && styled_components_1.css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      word-break: ", ";\n    "], ["\n      word-break: ", ";\n    "])), p.wordBreak);
+}, function (p) {
+    return p.align && styled_components_1.css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      text-align: ", ";\n    "], ["\n      text-align: ", ";\n    "])), p.align);
+}, function (p) {
+    return p.italic && styled_components_1.css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      font-style: italic;\n    "], ["\n      font-style: italic;\n    "])));
+});
+TextEl.displayName = "Text";
+exports.Text = withStyles_1.withStyles(function (_a) {
+    var children = _a.children, other = __rest(_a, ["children"]);
+    var _propsWithDefaultValues = __assign({ as: "p", fontWeight: "normal", fontSize: "normal", color: "readable" }, other);
+    return React.createElement(TextEl, __assign({}, _propsWithDefaultValues), children);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;