@xivart/tangram 0.0.1-security → 2.712.1

package/components/Skeleton/styled/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Skeleton = void 0;
+var Skeleton_1 = require("./Skeleton");
+Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return __importDefault(Skeleton_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Slogan/Slogan.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var S = (0, tslib_1.__importStar)(require("./styled"));
+var Slogan = function (_a) {
+    var text = _a.text;
+    return text ? (0, jsx_runtime_1.jsx)(S.Slogan, { children: text }, void 0) : null;
+};
+exports.default = Slogan;
+//# sourceMappingURL=Slogan.js.map

package/components/Slogan/index.js

@@ -0,0 +1,9 @@
+"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 Slogan_1 = require("./Slogan");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Slogan_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Slogan/styled/Slogan.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styles = void 0;
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = (0, tslib_1.__importStar)(require("../../../utils/themedStyledComponents"));
+exports.styles = (0, themedStyledComponents_1.css)(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: 36px;\n"], ["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: 36px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.PRIMARY;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.primary.fontFamily;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.sizes.fs800;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.primary.weight.fw500;
+});
+var H3 = themedStyledComponents_1.default.h3(templateObject_2 || (templateObject_2 = (0, tslib_1.__makeTemplateObject)(["\n  ", "\n"], ["\n  ", "\n"])), exports.styles);
+exports.default = H3;
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=Slogan.js.map

package/components/Slogan/styled/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slogan = void 0;
+var Slogan_1 = require("./Slogan");
+Object.defineProperty(exports, "Slogan", { enumerable: true, get: function () { return __importDefault(Slogan_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/SmallText/SmallText.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Text_1 = tslib_1.__importDefault(require("../Text"));
+var SmallText = function (_a) {
+    var children = _a.children, props = tslib_1.__rest(_a, ["children"]);
+    return (jsx_runtime_1.jsx(Text_1.default, tslib_1.__assign({ fontSize: "fs200", lineHeight: 1.67 }, props, { children: children }), void 0));
+};
+exports.default = SmallText;
+//# sourceMappingURL=SmallText.js.map

package/components/SmallText/index.js

@@ -0,0 +1,9 @@
+"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 SmallText_1 = require("./SmallText");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SmallText_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/SnakeNavigation/NavigationStep.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var S = tslib_1.__importStar(require("./styled"));
+var DefaultProps = {
+    amount: 2,
+    currentStep: 1,
+    index: 0,
+    onClick: function () { },
+    step: '',
+};
+var NavigationStep = (function (_super) {
+    tslib_1.__extends(NavigationStep, _super);
+    function NavigationStep() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.handleClick = function () {
+            var _a = _this
+                .props, index = _a.index, step = _a.step, onClick = _a.onClick;
+            onClick({ index: index, value: step });
+        };
+        return _this;
+    }
+    NavigationStep.prototype.renderContent = function (isDone) {
+        var index = this.props.index;
+        return isDone ? (jsx_runtime_1.jsx(S.StepIcon, { color: "CONTENT_BACKGROUND", name: "check" }, void 0)) : (jsx_runtime_1.jsx("span", { children: index + 1 }, void 0));
+    };
+    NavigationStep.prototype.render = function () {
+        var _a = this
+            .props, amount = _a.amount, currentStep = _a.currentStep, index = _a.index, step = _a.step;
+        var isActive = index === currentStep;
+        var isDone = index < currentStep;
+        var isNext = index > currentStep;
+        var isFirst = index === 0;
+        var isLast = index === amount - 1;
+        return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsxs(S.NavigationStepContainer, tslib_1.__assign({ isFirst: isFirst, isLast: isLast }, { children: [jsx_runtime_1.jsx(S.StepContainer, tslib_1.__assign({ isActive: isActive, isNext: isNext, onClick: isActive || isNext ? undefined : this.handleClick }, { children: this.renderContent(isDone) }), void 0),
+                        jsx_runtime_1.jsx(S.StepLabel, tslib_1.__assign({ isActive: isActive, isNext: isNext }, { children: step }), void 0)] }), index),
+                !isLast && (jsx_runtime_1.jsx(S.NavigationSeparator, { isDone: isDone }, "separator-" + index))] }, void 0));
+    };
+    NavigationStep.defaultProps = DefaultProps;
+    return NavigationStep;
+}(react_1.PureComponent));
+exports.default = NavigationStep;
+//# sourceMappingURL=NavigationStep.js.map

package/components/SnakeNavigation/SnakeNavigation.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Container_1 = tslib_1.__importDefault(require("../Container"));
+var S = tslib_1.__importStar(require("./styled"));
+var NavigationStep_1 = tslib_1.__importDefault(require("./NavigationStep"));
+var SnakeNavigation = function (props) {
+    var currentStep = props.currentStep, onClick = props.onClick, steps = props.steps;
+    var amount = steps.length;
+    return (jsx_runtime_1.jsx(S.NavigationContainer, { children: jsx_runtime_1.jsx(Container_1.default, { children: jsx_runtime_1.jsx(S.NavigationStepList, { children: steps.map(function (step, index) { return (jsx_runtime_1.jsx(NavigationStep_1.default, { amount: amount, currentStep: currentStep, index: index, onClick: onClick, step: step }, step)); }) }, void 0) }, void 0) }, void 0));
+};
+var DefaultProps = {
+    onClick: function () { },
+};
+SnakeNavigation.defaultProps = DefaultProps;
+exports.default = SnakeNavigation;
+//# sourceMappingURL=SnakeNavigation.js.map

package/components/SnakeNavigation/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SnakeNavigationSkeleton = exports.default = void 0;
+var SnakeNavigation_1 = require("./SnakeNavigation");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SnakeNavigation_1).default; } });
+var SnakeNavigationSkeleton_1 = require("./skeletons/SnakeNavigationSkeleton");
+Object.defineProperty(exports, "SnakeNavigationSkeleton", { enumerable: true, get: function () { return SnakeNavigationSkeleton_1.SnakeNavigationSkeleton; } });
+//# sourceMappingURL=index.js.map

package/components/SnakeNavigation/skeletons/SnakeNavigationSkeleton.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SnakeNavigationSkeleton = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Container_1 = tslib_1.__importDefault(require("../../../components/Container"));
+var Flex_1 = tslib_1.__importDefault(require("../../../components/Flex"));
+var Layout_1 = tslib_1.__importDefault(require("../../../components/Layout"));
+var Skeleton_1 = tslib_1.__importDefault(require("../../../components/Skeleton"));
+var SnakeNavigationSkeleton = function () { return (jsx_runtime_1.jsx(Layout_1.default, tslib_1.__assign({ background: "PRIMARY_LIGHT" }, { children: jsx_runtime_1.jsx(Container_1.default, { children: jsx_runtime_1.jsx(Flex_1.default, tslib_1.__assign({ justifyContent: "space-between", m: {
+                maxInlineSize: '476px',
+                paddingBlock: 's400',
+                paddingInline: 0,
+            }, margin: "auto", paddingBlockEnd: "s300", paddingBlockStart: "s400", paddingInline: "s200", position: "relative", s: {
+                paddingInline: 's400',
+            } }, { children: [1, 2, 3, 4, 5].map(function (key) {
+                var alignItems = key === 1 ? 'flex-start' : 'center';
+                if (key === 5) {
+                    alignItems = 'flex-end';
+                }
+                return (jsx_runtime_1.jsxs(react_1.Fragment, { children: [jsx_runtime_1.jsxs(Flex_1.default, tslib_1.__assign({ alignItems: alignItems, flexDirection: "column", inlineSize: "24px", justifyContent: "flex-start", m: { inlineSize: '19px' } }, { children: [jsx_runtime_1.jsx(Layout_1.default, tslib_1.__assign({ m: { size: '19px' }, size: "24px" }, { children: jsx_runtime_1.jsx(Skeleton_1.default, { backgroundColor: "PRIMARY_LIGHTER", elliptical: true }, void 0) }), void 0),
+                                jsx_runtime_1.jsx(Layout_1.default, tslib_1.__assign({ blockSize: "12px", inlineSize: "31px", marginBlockStart: "s200" }, { children: jsx_runtime_1.jsx(Skeleton_1.default, { backgroundColor: "PRIMARY_LIGHTER" }, void 0) }), void 0)] }), void 0),
+                        key !== 5 && (jsx_runtime_1.jsx(Flex_1.default, tslib_1.__assign({ flexGrow: 1, position: "relative" }, { children: jsx_runtime_1.jsx(Layout_1.default, tslib_1.__assign({ blockSize: "2px", inlineSize: "100%", insetBlockStart: "12px", m: { insetBlockStart: '9px', blockSize: '1px' }, position: "absolute" }, { children: jsx_runtime_1.jsx(Skeleton_1.default, { backgroundColor: "PRIMARY_LIGHTER" }, void 0) }), void 0) }), void 0))] }, key));
+            }) }), void 0) }, void 0) }), void 0)); };
+exports.SnakeNavigationSkeleton = SnakeNavigationSkeleton;
+//# sourceMappingURL=SnakeNavigationSkeleton.js.map

package/components/SnakeNavigation/styled/NavigationContainer.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var NavigationContainer = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.PRIMARY_LIGHT;
+});
+exports.default = NavigationContainer;
+var templateObject_1;
+//# sourceMappingURL=NavigationContainer.js.map

package/components/SnakeNavigation/styled/NavigationSeparator.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var media_1 = tslib_1.__importDefault(require("../../../utils/media"));
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var NavigationSeparator = themedStyledComponents_1.default.li(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  position: relative;\n\n  flex-grow: 1;\n\n  &::before {\n    background-color: ", ";\n    content: '\\0020';\n\n    position: absolute;\n    top: 12px;\n    width: 100%;\n    height: 2px;\n\n    ", "\n  }\n"], ["\n  position: relative;\n\n  flex-grow: 1;\n\n  &::before {\n    background-color: ",
+    ";\n    content: '\\\\0020';\n\n    position: absolute;\n    top: 12px;\n    width: 100%;\n    height: 2px;\n\n    ",
+    "\n  }\n"])), function (_a) {
+    var isDone = _a.isDone, theme = _a.theme;
+    return isDone ? theme.colors.CONTENT_BACKGROUND : theme.colors.PRIMARY_LIGHTER;
+}, media_1.default.m(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n      top: 9px;\n      height: 1px;\n    "], ["\n      top: 9px;\n      height: 1px;\n    "]))));
+exports.default = NavigationSeparator;
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=NavigationSeparator.js.map

package/components/SnakeNavigation/styled/NavigationStepContainer.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var media_1 = tslib_1.__importDefault(require("../../../utils/media"));
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var NavigationStepContainer = themedStyledComponents_1.default.li(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  align-items: ", ";\n  justify-content: flex-start;\n\n  width: 24px;\n  margin: 0;\n  padding: 0;\n\n  ", "\n"], ["\n  display: flex;\n  flex-flow: column;\n  align-items: ",
+    ";\n  justify-content: flex-start;\n\n  width: 24px;\n  margin: 0;\n  padding: 0;\n\n  ",
+    "\n"])), function (_a) {
+    var isFirst = _a.isFirst, isLast = _a.isLast;
+    if (isFirst) {
+        return 'flex-start';
+    }
+    if (isLast) {
+        return 'flex-end';
+    }
+    return 'center';
+}, media_1.default.m(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    align-items: center;\n    width: 19px;\n  "], ["\n    align-items: center;\n    width: 19px;\n  "]))));
+exports.default = NavigationStepContainer;
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=NavigationStepContainer.js.map

package/components/SnakeNavigation/styled/NavigationStepList.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var media_1 = tslib_1.__importDefault(require("../../../utils/media"));
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var NavigationStepList = themedStyledComponents_1.default.ul(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  position: relative;\n\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n\n  margin: auto;\n  padding: ", ";\n\n  list-style: none;\n\n  ", "\n\n  ", "\n"], ["\n  position: relative;\n\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n\n  margin: auto;\n  padding: ",
+    ";\n\n  list-style: none;\n\n  ",
+    "\n\n  ",
+    "\n"])), function (_a) {
+    var spacings = _a.theme.spacings;
+    return spacings.s400 + " " + spacings.s200 + " " + spacings.s300;
+}, media_1.default.s(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacings.s400;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacings.s400;
+}), media_1.default.m(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n    max-width: 476px;\n    padding: ", ";\n  "], ["\n    max-width: 476px;\n    padding: ", ";\n  "])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacings.s400 + " 0";
+}));
+exports.default = NavigationStepList;
+var templateObject_1, templateObject_2, templateObject_3;
+//# sourceMappingURL=NavigationStepList.js.map

package/components/SnakeNavigation/styled/StepContainer.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var media_1 = tslib_1.__importDefault(require("../../../utils/media"));
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var StepContainer = themedStyledComponents_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  flex-shrink: 0;\n\n  width: 24px;\n  height: 24px;\n\n  cursor: ", ";\n  border-radius: 50%;\n\n  color: ", ";\n\n  border: ", ";\n  border-color: ", ";\n\n  background-color: ", ";\n\n  ", "\n"], ["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  flex-shrink: 0;\n\n  width: 24px;\n  height: 24px;\n\n  cursor: ", ";\n  border-radius: 50%;\n\n  color: ", ";\n\n  border: ",
+    ";\n  border-color: ",
+    ";\n\n  background-color: ",
+    ";\n\n  ",
+    "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.primary.fontFamily;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.sizes.fs200;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.primary.weight.fw700;
+}, function (_a) {
+    var onClick = _a.onClick;
+    return (onClick ? 'pointer' : 'default');
+}, function (_a) {
+    var theme = _a.theme;
+    return "" + theme.colors.CONTENT_BACKGROUND;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.borders.width.bw200 + " " + theme.borders.style.SOLID;
+}, function (_a) {
+    var theme = _a.theme, isNext = _a.isNext;
+    return isNext ? theme.colors.PRIMARY_LIGHTER : theme.colors.CONTENT_BACKGROUND;
+}, function (_a) {
+    var theme = _a.theme, isActive = _a.isActive;
+    return isActive ? theme.colors.ACTIVE : theme.colors.PRIMARY_LIGHT;
+}, media_1.default.m(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    font-size: ", ";\n    width: 19px;\n    height: 19px;\n    border-width: ", ";\n  "], ["\n    font-size: ", ";\n    width: 19px;\n    height: 19px;\n    border-width: ", ";\n  "])), function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.sizes.fs100;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.borders.width.bw100;
+}));
+exports.default = StepContainer;
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=StepContainer.js.map

package/components/SnakeNavigation/styled/StepIcon.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var media_1 = tslib_1.__importDefault(require("../../../utils/media"));
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var Icon_1 = tslib_1.__importDefault(require("../../Icon"));
+var StepIcon = themedStyledComponents_1.default(Icon_1.default)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  width: 11px;\n  height: 9px;\n\n  ", "\n"], ["\n  width: 11px;\n  height: 9px;\n\n  ",
+    "\n"])), media_1.default.m(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    width: 9px;\n    height: 7px;\n  "], ["\n    width: 9px;\n    height: 7px;\n  "]))));
+exports.default = StepIcon;
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=StepIcon.js.map

package/components/SnakeNavigation/styled/StepLabel.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var media_1 = tslib_1.__importDefault(require("../../../utils/media"));
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var StepLabel = themedStyledComponents_1.default.span(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: 14px;\n\n  ", "\n\n  margin: ", " 0 0;\n  padding: 0;\n  white-space: nowrap;\n\n  color: ", ";\n\n  ", "\n"], ["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: 14px;\n\n  ", "\n\n  margin: ", " 0 0;\n  padding: 0;\n  white-space: nowrap;\n\n  color: ",
+    ";\n\n  ",
+    "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.primary.fontFamily;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.sizes.fs200;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.primary.weight.fw700;
+}, function (_a) {
+    var isActive = _a.isActive;
+    return (!isActive ? "display: none;" : '');
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacings.s200;
+}, function (_a) {
+    var theme = _a.theme, isNext = _a.isNext;
+    return isNext ? theme.colors.SECONDARY_DARK : theme.colors.CONTENT_BACKGROUND;
+}, media_1.default.m(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    display: inline-block;\n  "], ["\n    display: inline-block;\n  "]))));
+exports.default = StepLabel;
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=StepLabel.js.map

package/components/SnakeNavigation/styled/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepContainer = exports.StepIcon = exports.StepLabel = exports.NavigationStepContainer = exports.NavigationStepList = exports.NavigationSeparator = exports.NavigationContainer = void 0;
+var NavigationContainer_1 = require("./NavigationContainer");
+Object.defineProperty(exports, "NavigationContainer", { enumerable: true, get: function () { return __importDefault(NavigationContainer_1).default; } });
+var NavigationSeparator_1 = require("./NavigationSeparator");
+Object.defineProperty(exports, "NavigationSeparator", { enumerable: true, get: function () { return __importDefault(NavigationSeparator_1).default; } });
+var NavigationStepList_1 = require("./NavigationStepList");
+Object.defineProperty(exports, "NavigationStepList", { enumerable: true, get: function () { return __importDefault(NavigationStepList_1).default; } });
+var NavigationStepContainer_1 = require("./NavigationStepContainer");
+Object.defineProperty(exports, "NavigationStepContainer", { enumerable: true, get: function () { return __importDefault(NavigationStepContainer_1).default; } });
+var StepLabel_1 = require("./StepLabel");
+Object.defineProperty(exports, "StepLabel", { enumerable: true, get: function () { return __importDefault(StepLabel_1).default; } });
+var StepIcon_1 = require("./StepIcon");
+Object.defineProperty(exports, "StepIcon", { enumerable: true, get: function () { return __importDefault(StepIcon_1).default; } });
+var StepContainer_1 = require("./StepContainer");
+Object.defineProperty(exports, "StepContainer", { enumerable: true, get: function () { return __importDefault(StepContainer_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Spinner/Spinner.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var S = tslib_1.__importStar(require("./styled"));
+var defaultProps = {
+    size: 'xs',
+};
+var Spinner = function (props) {
+    var size = props.size;
+    return (jsx_runtime_1.jsx(S.Spinner, tslib_1.__assign({ size: size }, { children: jsx_runtime_1.jsx(S.SpinnerAsset, { name: "spinner" }, void 0) }), void 0));
+};
+Spinner.defaultProps = defaultProps;
+exports.default = Spinner;
+//# sourceMappingURL=Spinner.js.map

package/components/Spinner/index.js

@@ -0,0 +1,9 @@
+"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 Spinner_1 = require("./Spinner");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Spinner_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Spinner/styled/Spinner.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var omitAttrs_1 = tslib_1.__importDefault(require("../../../utils/omitAttrs"));
+var dimensions = {
+    xs: 25,
+    s: 36,
+    m: 50,
+    l: 75,
+    xl: 100,
+};
+var Spinner = themedStyledComponents_1.default.div.withConfig(omitAttrs_1.default('size'))(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: inline-block;\n  font-size: 0;\n  width: ", "px;\n"], ["\n  display: inline-block;\n  font-size: 0;\n  width: ", "px;\n"])), function (_a) {
+    var size = _a.size;
+    return dimensions[size];
+});
+exports.default = Spinner;
+var templateObject_1;
+//# sourceMappingURL=Spinner.js.map

package/components/Spinner/styled/SpinnerAsset.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var StaticAsset_1 = tslib_1.__importDefault(require("../../StaticAsset"));
+var rotationFrames = Array.from(Array(11)).reduce(function (acc, _cur, i) { return "\n  " + acc + "\n  " + i * 10 + "% {\n  animation-timing-function: steps(1, end);\n  transform: rotate(" + i * 36 + "deg);\n  }\n"; }, '');
+var SpinnerAsset = themedStyledComponents_1.default(StaticAsset_1.default)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  animation: rotation infinite 0.7s;\n  fill: ", ";\n\n  @keyframes rotation {\n    ", "\n  }\n"], ["\n  animation: rotation infinite 0.7s;\n  fill: ", ";\n\n  @keyframes rotation {\n    ", "\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.CONTENT_BACKGROUND;
+}, rotationFrames);
+exports.default = SpinnerAsset;
+var templateObject_1;
+//# sourceMappingURL=SpinnerAsset.js.map

package/components/Spinner/styled/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spinner = exports.SpinnerAsset = void 0;
+var SpinnerAsset_1 = require("./SpinnerAsset");
+Object.defineProperty(exports, "SpinnerAsset", { enumerable: true, get: function () { return __importDefault(SpinnerAsset_1).default; } });
+var Spinner_1 = require("./Spinner");
+Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return __importDefault(Spinner_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Spotlight/Backdrop.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var S = (0, tslib_1.__importStar)(require("./styled"));
+var Backdrop = function (_a) {
+    var isActive = _a.isActive, onClick = _a.onClick;
+    var _b = (0, tslib_1.__read)((0, react_1.useState)(false), 2), visible = _b[0], setVisible = _b[1];
+    (0, react_1.useEffect)(function () {
+        if (isActive) {
+            setVisible(true);
+        }
+    }, [isActive]);
+    if (!visible)
+        return null;
+    var handleAnimationEnd = function (event) {
+        if (!isActive) {
+            setVisible(false);
+        }
+        event.stopPropagation();
+    };
+    return ((0, jsx_runtime_1.jsx)(S.Backdrop, { isActive: isActive, onAnimationEnd: handleAnimationEnd, onClick: onClick }, void 0));
+};
+exports.default = Backdrop;
+//# sourceMappingURL=Backdrop.js.map

package/components/Spotlight/Forefront.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var S = (0, tslib_1.__importStar)(require("./styled"));
+var Forefront = function (_a) {
+    var dataAttrs = _a.dataAttrs, restProps = (0, tslib_1.__rest)(_a, ["dataAttrs"]);
+    return ((0, jsx_runtime_1.jsx)(S.Forefront, (0, tslib_1.__assign)({ position: "relative" }, dataAttrs, restProps), void 0));
+};
+exports.default = Forefront;
+//# sourceMappingURL=Forefront.js.map

package/components/Spotlight/Spotlight.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Backdrop_1 = (0, tslib_1.__importDefault)(require("./Backdrop"));
+var Forefront_1 = (0, tslib_1.__importDefault)(require("./Forefront"));
+var Spotlight = function (_a) {
+    var children = _a.children, isActive = _a.isActive, onBackdropClick = _a.onBackdropClick;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Backdrop_1.default, { isActive: isActive, onClick: onBackdropClick }, void 0), !!children && (0, jsx_runtime_1.jsx)(Forefront_1.default, (0, tslib_1.__assign)({ isActive: isActive }, { children: children }), void 0)] }, void 0));
+};
+exports.default = Spotlight;
+//# sourceMappingURL=Spotlight.js.map

package/components/Spotlight/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BACKDROP_FADE_DURATION = void 0;
+exports.BACKDROP_FADE_DURATION = 200;
+//# sourceMappingURL=constants.js.map

package/components/Spotlight/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Forefront = exports.default = void 0;
+var Spotlight_1 = require("./Spotlight");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Spotlight_1).default; } });
+var Forefront_1 = require("./Forefront");
+Object.defineProperty(exports, "Forefront", { enumerable: true, get: function () { return __importDefault(Forefront_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Spotlight/styled/Backdrop.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var constants_1 = require("../constants");
+var zIndexes_1 = require("../../../themes/common/zIndexes");
+var themedStyledComponents_1 = (0, tslib_1.__importStar)(require("../../../utils/themedStyledComponents"));
+var hexToRgba_1 = (0, tslib_1.__importDefault)(require("../../../utils/hexToRgba"));
+var OPACITY = 0.65;
+var fadeInAnimation = function (color) { return (0, themedStyledComponents_1.keyframes)(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\nfrom {\n  background-color: ", ";\n}\n\nto {\n  background-color: ", ";\n}\n"], ["\nfrom {\n  background-color: ", ";\n}\n\nto {\n  background-color: ", ";\n}\n"])), (0, hexToRgba_1.default)(color, 0), (0, hexToRgba_1.default)(color, OPACITY)); };
+var fadeOutAnimation = function (color) { return (0, themedStyledComponents_1.keyframes)(templateObject_2 || (templateObject_2 = (0, tslib_1.__makeTemplateObject)(["\nfrom {\n  background-color: ", ";\n}\n\nto {\n  background-color: ", ";\n}\n"], ["\nfrom {\n  background-color: ", ";\n}\n\nto {\n  background-color: ", ";\n}\n"])), (0, hexToRgba_1.default)(color, OPACITY), (0, hexToRgba_1.default)(color, 0)); };
+var Backdrop = themedStyledComponents_1.default.div(templateObject_3 || (templateObject_3 = (0, tslib_1.__makeTemplateObject)(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: ", ";\n\n  background-color: ", ";\n\n  animation-name: ", ";\n  animation-duration: ", "ms;\n  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: ", ";\n\n  background-color: ", ";\n\n  animation-name: ", ";\n  animation-duration: ", "ms;\n  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);\n"])), zIndexes_1.ZIndexValues.backdrop, function (_a) {
+    var theme = _a.theme;
+    return (0, hexToRgba_1.default)(theme.colors.PRIMARY_DARKER, OPACITY);
+}, function (_a) {
+    var isActive = _a.isActive, theme = _a.theme;
+    return isActive
+        ? fadeInAnimation(theme.colors.PRIMARY_DARKER)
+        : fadeOutAnimation(theme.colors.PRIMARY_DARKER);
+}, constants_1.BACKDROP_FADE_DURATION);
+exports.default = Backdrop;
+var templateObject_1, templateObject_2, templateObject_3;
+//# sourceMappingURL=Backdrop.js.map

package/components/Spotlight/styled/Forefront.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var zIndexes_1 = require("../../../themes/common/zIndexes");
+var S = (0, tslib_1.__importStar)(require("../../Flex/styled"));
+var themedStyledComponents_1 = (0, tslib_1.__importDefault)(require("../../../utils/themedStyledComponents"));
+var Forefront = (0, themedStyledComponents_1.default)(S.Flex)(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  z-index: ", ";\n  flex-grow: 1;\n"], ["\n  z-index: ", ";\n  flex-grow: 1;\n"])), function (_a) {
+    var isActive = _a.isActive;
+    return isActive ? zIndexes_1.ZIndexValues.forefront : zIndexes_1.ZIndexValues.backdrop;
+});
+exports.default = Forefront;
+var templateObject_1;
+//# sourceMappingURL=Forefront.js.map

package/components/Spotlight/styled/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Forefront = exports.Backdrop = void 0;
+var Backdrop_1 = require("./Backdrop");
+Object.defineProperty(exports, "Backdrop", { enumerable: true, get: function () { return __importDefault(Backdrop_1).default; } });
+var Forefront_1 = require("./Forefront");
+Object.defineProperty(exports, "Forefront", { enumerable: true, get: function () { return __importDefault(Forefront_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Stack/Stack.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var S = tslib_1.__importStar(require("./styled"));
+var Stack = react_1.forwardRef(function (_a, ref) {
+    var dataAttrs = _a.dataAttrs, children = _a.children, renderDivider = _a.renderDivider, props = tslib_1.__rest(_a, ["dataAttrs", "children", "renderDivider"]);
+    var childrenArray = react_1.Children.toArray(children).filter(function (child) { return child != null && child !== true && child !== false; });
+    var count = childrenArray.length;
+    return (jsx_runtime_1.jsx(S.Stack, tslib_1.__assign({ ref: ref }, dataAttrs, props, { children: react_1.Children.map(childrenArray, function (child, i) { return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [child, i < count - 1 && renderDivider && renderDivider(i)] }, void 0)); }) }), void 0));
+});
+exports.default = Stack;
+//# sourceMappingURL=Stack.js.map

package/components/Stack/index.js

@@ -0,0 +1,9 @@
+"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 Stack_1 = require("./Stack");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Stack_1).default; } });
+//# sourceMappingURL=index.js.map