@decisiv/ui-components 2.0.1-alpha.160 → 2.0.1-alpha.161

package/lib/components/Loading/Loading.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { LoadingProps } from './types';
+declare const Loading: {
+    ({ title, description, variant, size, ...props }: LoadingProps): JSX.Element;
+    defaultProps: {
+        size: string;
+        variant: string;
+    };
+    propTypes: any;
+};
+export default Loading;
+//# sourceMappingURL=Loading.d.ts.map

package/lib/components/Loading/Loading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.d.ts","sourceRoot":"","sources":["../../../src/components/Loading/Loading.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAQ,YAAY,EAAE,MAAM,SAAS,CAAC;AAQ7C,QAAA,MAAM,OAAO;;;;;;;CAuCZ,CAAC;AASF,eAAe,OAAO,CAAC"}

package/lib/components/Loading/Loading.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Typography = require("../Typography");
+
+var _schema = _interopRequireDefault(require("./schema"));
+
+var _styles = require("./styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var TITLE_MAP = {
+  small: _Typography.P,
+  medium: _Typography.H4,
+  large: _Typography.H3
+};
+
+var Loading = function Loading(_ref) {
+  var title = _ref.title,
+      description = _ref.description,
+      variant = _ref.variant,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'medium' : _ref$size,
+      props = _objectWithoutProperties(_ref, ["title", "description", "variant", "size"]);
+
+  var Title = TITLE_MAP[size];
+  var inverted = variant === 'inverted';
+  var textSize = size === 'small' ? 'small' : undefined;
+  var titleColor = inverted ? 'snowWhite' : undefined;
+  var descriptionColor = inverted ? 'fullMoon' : 'alaskanHusky';
+  var showTextContainer = !!title || !!description;
+  return _react.default.createElement(_styles.Container, _extends({
+    loadingSize: size
+  }, props), _react.default.createElement(_styles.AnimationContainer, {
+    size: size
+  }, _react.default.createElement(_styles.Bouncer, {
+    inverted: inverted
+  }), _react.default.createElement(_styles.Bouncer, {
+    inverted: inverted,
+    shadow: true
+  })), showTextContainer && _react.default.createElement(_styles.TextContainer, {
+    size: size
+  }, title && _react.default.createElement(Title, {
+    color: titleColor,
+    size: textSize
+  }, title), description && _react.default.createElement(_Typography.P, {
+    size: textSize,
+    color: descriptionColor
+  }, description)));
+};
+
+Loading.defaultProps = {
+  size: 'medium',
+  variant: 'normal'
+};
+Loading.propTypes = _schema.default.propTypes;
+var _default = Loading;
+exports.default = _default;

package/lib/components/Loading/index.d.ts

@@ -0,0 +1,4 @@
+import Loading from './Loading';
+export { LoadingProps, Size as LoadingSize, Variant as LoadingVariant, } from './types';
+export default Loading;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Loading/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Loading/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,WAAW,CAAC;AAEhC,OAAO,EACL,YAAY,EACZ,IAAI,IAAI,WAAW,EACnB,OAAO,IAAI,cAAc,GAC1B,MAAM,SAAS,CAAC;AAEjB,eAAe,OAAO,CAAC"}

package/lib/components/Loading/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "LoadingProps", {
+  enumerable: true,
+  get: function get() {
+    return _types.LoadingProps;
+  }
+});
+Object.defineProperty(exports, "LoadingSize", {
+  enumerable: true,
+  get: function get() {
+    return _types.Size;
+  }
+});
+Object.defineProperty(exports, "LoadingVariant", {
+  enumerable: true,
+  get: function get() {
+    return _types.Variant;
+  }
+});
+exports.default = void 0;
+
+var _Loading = _interopRequireDefault(require("./Loading"));
+
+var _types = require("./types");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _Loading.default;
+exports.default = _default;

package/lib/components/Loading/index.test.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ = _interopRequireDefault(require("."));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+describe('Loading', function () {
+  it('renders title', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _render, getByText;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react2.render)(_react.default.createElement(_.default, {
+              title: "Loading..."
+            })), getByText = _render.getByText;
+            expect(getByText(/loading.../i)).toBeInTheDocument();
+
+          case 2:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('renders description', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    var _render2, getByText;
+
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _render2 = (0, _react2.render)(_react.default.createElement(_.default, {
+              title: "Loading...",
+              description: "Some description"
+            })), getByText = _render2.getByText;
+            expect(getByText(/some description/i)).toBeInTheDocument();
+
+          case 2:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+});

package/lib/components/Loading/schema.d.ts

@@ -0,0 +1,4 @@
+export declare const makeLoadingSchemaPropTypes: () => object;
+declare const schema: any;
+export default schema;
+//# sourceMappingURL=schema.d.ts.map

package/lib/components/Loading/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Loading/schema.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,0BAA0B,cAQrC,CAAC;AAEH,QAAA,MAAM,MAAM,KAAuC,CAAC;AAIpD,eAAe,MAAM,CAAC"}

package/lib/components/Loading/schema.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.makeLoadingSchemaPropTypes = void 0;
+
+var _reactDesc = require("react-desc");
+
+var _spacingSchema = require("../../modifiers/spacingSchema");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var makeLoadingSchemaPropTypes = function makeLoadingSchemaPropTypes() {
+  return _objectSpread({}, (0, _spacingSchema.makeSpacingSchemaPropTypes)(), {
+    size: _reactDesc.PropTypes.oneOf(['small', 'medium', 'large']).description("The size in which to render the component's text and icon").defaultValue('medium'),
+    variant: _reactDesc.PropTypes.oneOf(['normal', 'inverted']).description('Which loading variant to render.').defaultValue('normal')
+  });
+};
+
+exports.makeLoadingSchemaPropTypes = makeLoadingSchemaPropTypes;
+var schema = (0, _reactDesc.describe)({
+  displayName: 'Loading'
+});
+schema.propTypes = makeLoadingSchemaPropTypes();
+var _default = schema;
+exports.default = _default;

package/lib/components/Loading/styles.d.ts

@@ -0,0 +1,211 @@
+/// <reference types="react" />
+import { FlexComponentProps } from '../Flex';
+import { Size } from './types';
+interface ContainerProps extends FlexComponentProps {
+    loadingSize: Size;
+}
+export declare const Container: import("styled-components").StyledComponent<"div", any, Partial<{
+    readonly alignContent?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly alignItems?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly alignSelf?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flex?: string | number | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("react").ReactText, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexBasis?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexGrow?: number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").GlobalsNumber, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexShrink?: number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").GlobalsNumber, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexWrap?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexWrapProperty, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly justifyContent?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly justifyItems?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly justifySelf?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly order?: number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").GlobalsNumber, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly size?: "XS" | "SM" | "MD" | "LG" | "XL" | undefined;
+}> & Partial<{
+    readonly margin: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginBottom: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginLeft: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginRight: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginTop: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginX: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginY: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly padding: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingBottom: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingLeft: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingRight: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingTop: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingX: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingY: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+}> & ContainerProps, never>;
+export declare const AnimationContainer: import("styled-components").StyledComponent<"div", any, {
+    size: Size;
+}, never>;
+export declare const Bouncer: import("styled-components").StyledComponent<"div", any, {
+    inverted?: boolean | undefined;
+    shadow?: boolean | undefined;
+}, never>;
+export declare const TextContainer: import("styled-components").StyledComponent<"div", any, {
+    size: Size;
+}, never>;
+export {};
+//# sourceMappingURL=styles.d.ts.map

package/lib/components/Loading/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Loading/styles.ts"],"names":[],"mappings":";AAOA,OAAa,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAEnD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAmB/B,UAAU,cAAe,SAAQ,kBAAkB;IACjD,WAAW,EAAE,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAGrB,CAAC;AAoBF,eAAO,MAAM,kBAAkB;;SAI9B,CAAC;AAEF,eAAO,MAAM,OAAO;;;SAiCnB,CAAC;AAmBF,eAAO,MAAM,aAAa;;SAIzB,CAAC"}

package/lib/components/Loading/styles.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextContainer = exports.Bouncer = exports.AnimationContainer = exports.Container = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _designTokens = require("@decisiv/design-tokens");
+
+var _Flex = _interopRequireDefault(require("../Flex"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+var CONTAINER_STYLE = {
+  small: (0, _styledComponents.css)(["flex-direction:row;gap:", ";"], (0, _rem.default)(_designTokens.spacing.base * 0.5)),
+  medium: (0, _styledComponents.css)(["flex-direction:column;align-items:center;gap:", ";"], (0, _rem.default)(_designTokens.spacing.base)),
+  large: (0, _styledComponents.css)(["flex-direction:column;align-items:center;gap:", ";"], (0, _rem.default)(_designTokens.spacing.base))
+};
+var Container = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "styles__Container",
+  componentId: "fjt04b-0"
+})(["display:flex;", ";"], function (_ref) {
+  var loadingSize = _ref.loadingSize;
+  return CONTAINER_STYLE[loadingSize];
+});
+exports.Container = Container;
+var ANIMATION_CONTAINER_STYLE = {
+  small: (0, _styledComponents.css)(["width:", ";min-width:", ";height:", ";"], (0, _rem.default)(_designTokens.spacing.base * 1.6), (0, _rem.default)(_designTokens.spacing.base * 1.6), (0, _rem.default)(_designTokens.spacing.base * 1.6)),
+  medium: (0, _styledComponents.css)(["width:", ";min-width:", ";height:", ";"], (0, _rem.default)(_designTokens.spacing.base * 3.6), (0, _rem.default)(_designTokens.spacing.base * 3.6), (0, _rem.default)(_designTokens.spacing.base * 3.6)),
+  large: (0, _styledComponents.css)(["width:", ";min-width:", ";height:", ";"], (0, _rem.default)(_designTokens.spacing.base * 4.8), (0, _rem.default)(_designTokens.spacing.base * 4.8), (0, _rem.default)(_designTokens.spacing.base * 4.8))
+};
+
+var AnimationContainer = _styledComponents.default.div.withConfig({
+  displayName: "styles__AnimationContainer",
+  componentId: "fjt04b-1"
+})(["position:relative;", ""], function (_ref2) {
+  var size = _ref2.size;
+  return ANIMATION_CONTAINER_STYLE[size];
+});
+
+exports.AnimationContainer = AnimationContainer;
+
+var Bouncer = _styledComponents.default.div.withConfig({
+  displayName: "styles__Bouncer",
+  componentId: "fjt04b-2"
+})(["width:100%;height:100%;border-radius:50%;background-color:", ";opacity:0.6;position:absolute;top:0;left:0;animation:sk-bounce 2s infinite ease-in-out;", " ", " @keyframes sk-bounce{0%,100%{transform:scale(0);}50%{transform:scale(1);}}"], (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean40), function (_ref3) {
+  var inverted = _ref3.inverted;
+  return inverted && (0, _styledComponents.css)(["background-color:", ";"], (0, _toColorString.default)(_designTokens.color.opacity.fullMoon50));
+}, function (_ref4) {
+  var shadow = _ref4.shadow;
+  return shadow && (0, _styledComponents.css)(["animation-delay:-1s;"]);
+});
+
+exports.Bouncer = Bouncer;
+var TEXT_CONTAINER_STYLE = {
+  small: (0, _styledComponents.css)(["text-align:left;align-items:flex-start;"]),
+  medium: (0, _styledComponents.css)(["gap:", ";text-align:center;align-items:center;"], (0, _rem.default)(_designTokens.spacing.base * 0.5)),
+  large: (0, _styledComponents.css)(["gap:", ";text-align:center;align-items:center;"], (0, _rem.default)(_designTokens.spacing.base * 0.5))
+};
+
+var TextContainer = _styledComponents.default.div.withConfig({
+  displayName: "styles__TextContainer",
+  componentId: "fjt04b-3"
+})(["display:flex;flex-direction:column;", ";"], function (_ref5) {
+  var size = _ref5.size;
+  return TEXT_CONTAINER_STYLE[size];
+});
+
+exports.TextContainer = TextContainer;

package/lib/components/Loading/types.d.ts

@@ -0,0 +1,10 @@
+import { FlexComponentProps } from '../Flex';
+export declare type Size = 'small' | 'medium' | 'large';
+export declare type Variant = 'normal' | 'inverted';
+export interface LoadingProps extends Omit<FlexComponentProps, 'size'> {
+    title?: string;
+    description?: string;
+    variant?: Variant;
+    size?: Size;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/components/Loading/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Loading/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,oBAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChD,oBAAY,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE5C,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,CAAC;CACb"}

package/lib/components/Loading/types.js

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

package/lib/components/Typography/withColors.d.ts

@@ -8,7 +8,7 @@ declare const enabledBaseColors: Pick<{
     blackSheep: Color;
     midnight: Color;
     charcoal: Color;
-}, "charcoal" | "alaskanHusky" | "snowWhite" | "quarterMoon" | "halfMoon">;
+}, "charcoal" | "alaskanHusky" | "snowWhite" | "quarterMoon" | "halfMoon" | "fullMoon">;
 declare type EnabledBaseColorKeys = keyof typeof enabledBaseColors;
 declare type StatusColorsKeys = Exclude<keyof typeof color.status, 'default'>;
 declare const passThroughColors: {

package/lib/components/Typography/withColors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withColors.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/withColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAShE,QAAA,MAAM,iBAAiB;;;;;;;;;0EAMrB,CAAC;AAEH,aAAK,oBAAoB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAE3D,aAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,OAAO,KAAK,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAGtE,QAAA,MAAM,iBAAiB;;CAAyB,CAAC;AACjD,aAAK,oBAAoB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAE3D,oBAAY,mBAAmB,GAC3B,oBAAoB,GACpB,gBAAgB,GAChB,oBAAoB,CAAC;AAEzB,oBAAY,gBAAgB,GAAG;KAAG,CAAC,IAAI,mBAAmB,GAAG,KAAK,GAAG,MAAM;CAAE,CAAC;AAgB9E,eAAO,MAAM,mBAAmB,UAI/B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,gBAI9B,CAAC;AAEF,QAAA,MAAM,gBAAgB;;;;CAIZ,CAAC;AAYX,aAAK,mBAAmB,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAEzD,eAAO,MAAM,mBAAmB,eAEN,CAAC;AAoC3B,QAAA,MAAM,UAAU,+FAGf,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,KAAK,CAAC,EAAE,mBAAmB,CAAC;CAC7B;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"withColors.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/withColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAShE,QAAA,MAAM,iBAAiB;;;;;;;;;uFAOrB,CAAC;AAEH,aAAK,oBAAoB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAE3D,aAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,OAAO,KAAK,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAGtE,QAAA,MAAM,iBAAiB;;CAAyB,CAAC;AACjD,aAAK,oBAAoB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAE3D,oBAAY,mBAAmB,GAC3B,oBAAoB,GACpB,gBAAgB,GAChB,oBAAoB,CAAC;AAEzB,oBAAY,gBAAgB,GAAG;KAAG,CAAC,IAAI,mBAAmB,GAAG,KAAK,GAAG,MAAM;CAAE,CAAC;AAgB9E,eAAO,MAAM,mBAAmB,UAI/B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,gBAI9B,CAAC;AAEF,QAAA,MAAM,gBAAgB;;;;CAIZ,CAAC;AAYX,aAAK,mBAAmB,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAEzD,eAAO,MAAM,mBAAmB,eAEN,CAAC;AAoC3B,QAAA,MAAM,UAAU,+FAGf,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,KAAK,CAAC,EAAE,mBAAmB,CAAC;CAC7B;AAED,eAAe,UAAU,CAAC"}

package/lib/components/Typography/withColors.js

@@ -33,7 +33,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 var base = _color.default.base,
     status = _color.default.status;
-var enabledBaseColors = (0, _pick.default)(base, ['charcoal', 'alaskanHusky', 'snowWhite', 'quarterMoon', 'halfMoon']);
+var enabledBaseColors = (0, _pick.default)(base, ['charcoal', 'alaskanHusky', 'snowWhite', 'quarterMoon', 'halfMoon', 'fullMoon']);
 var passThroughColors = {
   inherit: 'inherit'
 };

package/lib/components/index.d.ts

@@ -15,6 +15,7 @@ export { Column, Container, default as Grid, Row } from './Grid';
 export { default as JumpTo, JumpToRef } from './JumpTo';
 export { default as LeftNav, useStickyLeftNav } from './LeftNav';
 export { default as Link } from './Link';
+export { default as Loading, LoadingProps, LoadingSize, LoadingVariant, } from './Loading';
 export { default as Menu } from './Menu';
 export { default as Message } from './Message';
 export { default as Modal } from './Modal';

package/lib/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}

package/lib/components/index.js

@@ -36,6 +36,10 @@ var _exportNames = {
   LeftNav: true,
   useStickyLeftNav: true,
   Link: true,
+  Loading: true,
+  LoadingProps: true,
+  LoadingSize: true,
+  LoadingVariant: true,
   Menu: true,
   Message: true,
   Modal: true,
@@ -262,6 +266,30 @@ Object.defineProperty(exports, "Link", {
     return _Link.default;
   }
 });
+Object.defineProperty(exports, "Loading", {
+  enumerable: true,
+  get: function get() {
+    return _Loading.default;
+  }
+});
+Object.defineProperty(exports, "LoadingProps", {
+  enumerable: true,
+  get: function get() {
+    return _Loading.LoadingProps;
+  }
+});
+Object.defineProperty(exports, "LoadingSize", {
+  enumerable: true,
+  get: function get() {
+    return _Loading.LoadingSize;
+  }
+});
+Object.defineProperty(exports, "LoadingVariant", {
+  enumerable: true,
+  get: function get() {
+    return _Loading.LoadingVariant;
+  }
+});
 Object.defineProperty(exports, "Menu", {
   enumerable: true,
   get: function get() {
@@ -495,6 +523,8 @@ var _LeftNav = _interopRequireWildcard(require("./LeftNav"));
 
 var _Link = _interopRequireDefault(require("./Link"));
 
+var _Loading = _interopRequireWildcard(require("./Loading"));
+
 var _Menu = _interopRequireDefault(require("./Menu"));
 
 var _Message = _interopRequireDefault(require("./Message"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.160+8252a7c",
+  "version": "2.0.1-alpha.161+116541e",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "8252a7c31399c379227f6c272026ed387e01b399"
+  "gitHead": "116541e753f0ccd418be6c9d42a335d698b59d38"
 }