@via-profit/ui-kit 0.2.1-alpha.1 → 0.2.2

package/DatePicker/index.js

@@ -49,10 +49,10 @@ const StyledMaskedField = (0, styled_1.default)(MaskedField_1.default) `
     `}
 `;
 const DatePicker = props => {
-    const { value, template, onChange, calendarButtonTooltip, readOnly, disabled, minDate = new Date(new Date().getFullYear() - 100, 0, 1, 0, 0, 0), maxDate = new Date(new Date().getFullYear() + 100, 0, 1, 0, 0, 0), weekStartDay = 'monday', locale = 'ru-RU', badges = [], displayLeadingZero = false, prevMonthButtonTooltip, nextMonthButtonTooltip, changeMonthButtonTooltip, changeYearButtonTooltip, resetButtonLabel, toodayButtonLabel, heading, subheading, initialView, footer, overrides } = props, restInputProps = __rest(props, ["value", "template", "onChange", "calendarButtonTooltip", "readOnly", "disabled", "minDate", "maxDate", "weekStartDay", "locale", "badges", "displayLeadingZero", "prevMonthButtonTooltip", "nextMonthButtonTooltip", "changeMonthButtonTooltip", "changeYearButtonTooltip", "resetButtonLabel", "toodayButtonLabel", "heading", "subheading", "initialView", "footer", "overrides"]);
+    const { value, template, onChange, calendarButtonTooltip, readOnly, disabled, minDate = new Date(new Date().getFullYear() - 100, 0, 1, 0, 0, 0), maxDate = new Date(new Date().getFullYear() + 100, 0, 1, 0, 0, 0), weekStartDay = 'monday', locale = 'ru-RU', badges = [], displayLeadingZero = false, resetButtonLabel, toodayButtonLabel, heading, subheading, view, views, footer, overrides } = props, restInputProps = __rest(props, ["value", "template", "onChange", "calendarButtonTooltip", "readOnly", "disabled", "minDate", "maxDate", "weekStartDay", "locale", "badges", "displayLeadingZero", "resetButtonLabel", "toodayButtonLabel", "heading", "subheading", "view", "views", "footer", "overrides"]);
     const { 
     // Calendar overrides
-    Body, Cell, EmptyCell, Paper, Header, WeekRow, DateContainer, Toolbar, YearsSelector, MonthsSelector, MonthCell, YearCell, DayBadge, Footer, ControlButton, Heading, Subheading, IconPrev, IconNext, WeekDaysBar, 
+    Body, Cell, EmptyCell, Paper, Header, WeekRow, DateContainer, Toolbar, YearsSelector, MonthsSelector, MonthCell, DayBadge, Footer, ControlButton, Heading, Subheading, IconPrev, IconNext, WeekDaysBar, 
     // Textfield overrides
     Input, ErrorText, IconWrapper, InputWrapper, Label, Asterisk, Container, } = overrides || {};
     const [currentValue, setCurrentValue] = react_1.default.useState(value);
@@ -80,69 +80,55 @@ const DatePicker = props => {
         const b = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
         return b.getTime() <= a.getTime();
     }, [maxDate]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(StyledMaskedField, Object.assign({ onClick: () => {
-                if (readOnly) {
-                    setOpenSate(!isOpen);
+    const handleClick = react_1.default.useCallback(() => {
+        if (readOnly) {
+            setOpenSate(!isOpen);
+        }
+    }, [isOpen, readOnly]);
+    const endIcon = react_1.default.useMemo(() => (react_1.default.createElement(Button_1.default, { disabled: disabled, iconOnly: true, variant: "plain", type: "button", onClick: () => setOpenSate(true), title: calendarButtonTooltip },
+        react_1.default.createElement(DatePickerIcon_1.default, null))), [calendarButtonTooltip, disabled]);
+    const handleChange = react_1.default.useCallback(({ isValid, text }) => {
+        if (isValid) {
+            const parsedDate = parseInputByTemplate(text, template);
+            // Trying to parse the input date value
+            if (parsedDate instanceof Date && !isNaN(parsedDate.getTime())) {
+                // if the date satisfies the restrictions
+                if (isGreatherThenMinDate(parsedDate) && isLessThenMaxDate(parsedDate)) {
+                    onChange(parsedDate);
+                    // if the date violates the restrictions
                 }
-            }, disabled: disabled, mask: getMaskByTemplate(template), ref: setTextFieldRef, readOnly: readOnly, endIcon: react_1.default.createElement(Button_1.default, { disabled: disabled, iconOnly: true, type: "button", onClick: () => setOpenSate(true), title: calendarButtonTooltip },
-                react_1.default.createElement(DatePickerIcon_1.default, null)) }, restInputProps, { value: currentValue ? formatInputByTemplate(currentValue, template) : '', onChange: ({ isValid, text }) => {
-                if (isValid) {
-                    const parsedDate = parseInputByTemplate(text, template);
-                    // Trying to parse the input date value
-                    if (parsedDate instanceof Date && !isNaN(parsedDate.getTime())) {
-                        // if the date satisfies the restrictions
-                        if (isGreatherThenMinDate(parsedDate) && isLessThenMaxDate(parsedDate)) {
-                            onChange(parsedDate);
-                            // if the date violates the restrictions
-                        }
-                        else {
-                            // set as minDate if parsed date less then minDate value constraint
-                            if (!isGreatherThenMinDate(parsedDate)) {
-                                onChange(minDate);
-                            }
-                            // set as maxDate if parsed date greather then maxDate value constraint
-                            if (!isLessThenMaxDate(parsedDate)) {
-                                onChange(maxDate);
-                            }
-                        }
+                else {
+                    // set as minDate if parsed date less then minDate value constraint
+                    if (!isGreatherThenMinDate(parsedDate)) {
+                        onChange(minDate);
+                    }
+                    // set as maxDate if parsed date greather then maxDate value constraint
+                    if (!isLessThenMaxDate(parsedDate)) {
+                        onChange(maxDate);
                     }
                 }
-            }, overrides: {
-                Input,
-                ErrorText,
-                IconWrapper,
-                InputWrapper,
-                Label,
-                Asterisk,
-                Container,
-            } })),
+            }
+        }
+    }, [
+        isGreatherThenMinDate,
+        isLessThenMaxDate,
+        maxDate,
+        minDate,
+        onChange,
+        parseInputByTemplate,
+        template,
+    ]);
+    const calendarValue = react_1.default.useMemo(() => currentValue || new Date(), [currentValue]);
+    const calendarChange = react_1.default.useCallback(date => {
+        if (date) {
+            onChange(date);
+        }
+        setOpenSate(false);
+    }, [onChange]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(StyledMaskedField, Object.assign({ onClick: handleClick, disabled: disabled, mask: getMaskByTemplate(template), ref: setTextFieldRef, readOnly: readOnly, endIcon: endIcon }, restInputProps, { value: currentValue ? formatInputByTemplate(currentValue, template) : '', onChange: handleChange })),
         react_1.default.createElement(ClickOutside_1.default, { onOutsideClick: () => setOpenSate(false), mouseEvent: "onMouseDown" },
             react_1.default.createElement(Popper_1.default, { isOpen: isOpen, anchorElement: textFieldRef },
-                react_1.default.createElement(Calendar_1.default, { minDate: minDate, maxDate: maxDate, weekStartDay: weekStartDay, locale: locale, badges: badges, displayLeadingZero: displayLeadingZero, prevMonthButtonTooltip: prevMonthButtonTooltip, nextMonthButtonTooltip: nextMonthButtonTooltip, changeMonthButtonTooltip: changeMonthButtonTooltip, changeYearButtonTooltip: changeYearButtonTooltip, resetButtonLabel: resetButtonLabel, todayButtonLabel: toodayButtonLabel, heading: heading, subheading: subheading, initialView: initialView, footer: footer, value: currentValue || new Date(), onChange: date => {
-                        onChange(date);
-                        setOpenSate(false);
-                    }, overrides: {
-                        Body,
-                        Cell,
-                        EmptyCell,
-                        Paper,
-                        Header,
-                        WeekRow,
-                        DateContainer,
-                        Toolbar,
-                        YearsSelector,
-                        MonthsSelector,
-                        MonthCell,
-                        YearCell,
-                        DayBadge,
-                        Footer,
-                        ControlButton,
-                        Heading,
-                        Subheading,
-                        IconPrev,
-                        IconNext,
-                        WeekDaysBar,
-                    } })))));
+                react_1.default.createElement(Calendar_1.default, { minDate: minDate, maxDate: maxDate, weekStartDay: weekStartDay, locale: locale, badges: badges, displayLeadingZero: displayLeadingZero, resetButtonLabel: resetButtonLabel, todayButtonLabel: toodayButtonLabel, heading: heading, subheading: subheading, view: view, views: views, footer: footer, value: calendarValue, onChange: calendarChange })))));
 };
 exports.default = DatePicker;

package/DatePicker/useDatePickerFormat.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDatePickerFormat = void 0;
 const react_1 = __importDefault(require("react"));
 const useDatePickerFormat = () => {
-    const templateValidChars = react_1.default.useMemo(() => ['y', 'Y', 'yy', 'yyyy', 'd', 'dd', 'D', 'm', 'mm', 'M'], []);
+    const templateValidChars = react_1.default.useMemo(() => ['y', 'Y', 'yy', 'yyyy', 'd', 'dd', 'D', 'm', 'mm'], []);
     const isValidTemplate = react_1.default.useCallback((template) => {
         const matches = template.match(/[yYmMdD]+/g);
         if (!matches) {
@@ -25,7 +25,7 @@ const useDatePickerFormat = () => {
     const getMaskByTemplate = react_1.default.useCallback((template) => {
         validateTemplate(template);
         return template.split('').map(char => {
-            if (['m', 'M', 'd', 'D', 'y', 'Y'].includes(char)) {
+            if (['m', 'd', 'D', 'y', 'Y'].includes(char)) {
                 return /\d/;
             }
             return char;
@@ -78,11 +78,11 @@ const useDatePickerFormat = () => {
             }
             return day;
         })
-            // mm or M - month with leading zero
+            // mm - month with leading zero
             // m - month without leading zero
-            .replace(/(m{1,2}|M{1,2})/, entries => {
+            .replace(/(m{1,2})/, entries => {
             const month = `${date.getMonth() + 1}`;
-            if (['MM', 'M', 'mm'].includes(entries)) {
+            if (['mm'].includes(entries)) {
                 const str = `0${month}`;
                 return str.substring(str.length - entries.length);
             }

package/ErrorBoundary/Fallback.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const Fallback: React.FC;
+export default Fallback;

package/ErrorBoundary/Fallback.js

@@ -0,0 +1,51 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@emotion/react");
+const Container = styled_1.default.div `
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 20px;
+  border-radius: inherit;
+  background-color: #8b0101;
+  color: #f5e7e7;
+`;
+const Fallback = () => (React.createElement(React.Fragment, null,
+    React.createElement(react_1.Global, { styles: (0, react_1.css) `
+        body {
+          margin: 0;
+        }
+      ` }),
+    React.createElement(Container, null,
+        React.createElement("h1", null, "It looks like our server has broken down"),
+        React.createElement("p", null, "We're already fixing it. We are waiting for you later"))));
+exports.default = Fallback;

package/ErrorBoundary/RenderError.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+type RenderErrorProps = {
+    readonly error?: Error | unknown;
+};
+declare const RenderError: React.FC<RenderErrorProps>;
+export default RenderError;

package/ErrorBoundary/RenderError.js

@@ -0,0 +1,80 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const react_intl_1 = require("react-intl");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const createTheme_1 = __importDefault(require("../ThemeProvider/createTheme"));
+const H1_1 = __importDefault(require("../Typography/H1"));
+const ThemeProvider_1 = __importDefault(require("../ThemeProvider"));
+const Paragraph_1 = __importDefault(require("../Typography/Paragraph"));
+const Surface_1 = __importDefault(require("../Surface"));
+const Strong_1 = __importDefault(require("../Typography/Strong"));
+const Container = styled_1.default.div `
+  width: 100%;
+  height: 100%;
+`;
+const StyledSurface = (0, styled_1.default)(Surface_1.default) `
+  border-left: 2em solid ${({ theme }) => theme.color.error.toString()};
+`;
+const StyledHeading = (0, styled_1.default)(H1_1.default) `
+  margin-top: 0;
+`;
+const RenderError = props => {
+    const { error } = props;
+    const isDev = process.env.NODE_ENV === 'development';
+    const { name, message, stack } = React.useMemo(() => {
+        let name = '';
+        let message = '';
+        let stack = '';
+        if (error && typeof error === 'object') {
+            if ('name' in error) {
+                name = `${error.name}`;
+            }
+            if ('message' in error) {
+                message = `${error.message}`;
+            }
+            if ('stack' in error) {
+                stack = `${error.stack}`;
+            }
+        }
+        return { name, message, stack };
+    }, [error]);
+    const theme = (0, createTheme_1.default)();
+    return (React.createElement(ThemeProvider_1.default, { theme: theme },
+        React.createElement(Container, null,
+            React.createElement(StyledSurface, null, isDev ? (React.createElement(React.Fragment, null,
+                React.createElement(StyledHeading, null, name),
+                React.createElement(Strong_1.default, null, message),
+                stack !== '' && React.createElement(Paragraph_1.default, null, stack))) : (React.createElement(React.Fragment, null,
+                React.createElement(StyledHeading, null,
+                    React.createElement(react_intl_1.FormattedMessage, { defaultMessage: "\u041F\u0440\u043E\u0438\u0437\u043E\u0448\u043B\u0430 \u043E\u0448\u0438\u0431\u043A\u0430" })),
+                React.createElement(Paragraph_1.default, null,
+                    React.createElement(react_intl_1.FormattedMessage, { defaultMessage: "\u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u0441\u043E\u043E\u0431\u0449\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A\u0430\u043C" }))))))));
+};
+exports.default = RenderError;

package/ErrorBoundary/index.d.ts

@@ -1,19 +1,15 @@
 import React from 'react';
-export interface ErrorBoundaryComponentProps {
-    readonly children: React.ReactNode | readonly React.ReactNode[];
-}
-interface State {
+type State = {
     readonly error: Error | null;
     readonly errorInfo: React.ErrorInfo | null;
-}
-interface Props {
-    readonly children: React.ReactNode | React.ReactNode[];
-    readonly styles?: React.CSSProperties;
-}
+};
+type Props = {
+    readonly children: React.ReactNode;
+    readonly fallback?: React.ReactNode | undefined | null;
+};
 declare class ErrorBoundary extends React.Component<Props, State> {
     constructor(props: Props);
-    static getDerivedStateFromError(error: Error): State;
     componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
-    render(): React.JSX.Element;
+    render(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
 }
 export default ErrorBoundary;

package/ErrorBoundary/index.js

@@ -4,41 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const styled_1 = __importDefault(require("@emotion/styled"));
-const Container = styled_1.default.div `
-  flex: 1;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  box-sizing: border-box;
-  padding: theme.spacing(1);
-  border-radius: inherit;
-  border: 1px solid rgb(92, 0, 0);
-  background-color: rgb(41, 0, 0);
-`;
-const Inner = styled_1.default.div `
-  flex: 1;
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-`;
-const Title = styled_1.default.h1 `
-  margin-top: 0;
-`;
-const ErrorBox = styled_1.default.div `
-  color: rgb(255, 128, 128);
-  padding: 1rem;
-`;
-const ErrorMessage = styled_1.default.pre `
-  max-height: 300;
-  overflow: auto;
-`;
-const CallStack = styled_1.default.pre `
-  opacity: 0.8;
-  max-height: 300;
-  overflow: auto;
-  white-space: break-spaces;
-`;
+const RenderError_1 = __importDefault(require("./RenderError"));
 class ErrorBoundary extends react_1.default.Component {
     constructor(props) {
         super(props);
@@ -47,12 +13,6 @@ class ErrorBoundary extends react_1.default.Component {
             errorInfo: null,
         };
     }
-    static getDerivedStateFromError(error) {
-        return {
-            error,
-            errorInfo: null,
-        };
-    }
     componentDidCatch(error, errorInfo) {
         this.setState({
             error,
@@ -61,18 +21,11 @@ class ErrorBoundary extends react_1.default.Component {
     }
     render() {
         const { error } = this.state;
-        const { children, styles } = this.props;
+        const { children } = this.props;
         if (error) {
-            return (react_1.default.createElement(Container, { style: styles },
-                react_1.default.createElement(Inner, null, process.env.NODE_ENV === 'development' ? (react_1.default.createElement(ErrorBox, null,
-                    react_1.default.createElement(Title, null, "Something went wrong"),
-                    react_1.default.createElement(ErrorMessage, null, error.message),
-                    react_1.default.createElement("h2", null, "Callstack:"),
-                    react_1.default.createElement(CallStack, null, error.stack))) : (react_1.default.createElement(ErrorBox, null,
-                    react_1.default.createElement(Title, null, "It looks like our server has broken down"),
-                    react_1.default.createElement("p", null, "We're already fixing it. We are waiting for you later"))))));
+            return react_1.default.createElement(RenderError_1.default, { error: error });
         }
-        return react_1.default.createElement(react_1.default.Fragment, null, children);
+        return children;
     }
 }
 exports.default = ErrorBoundary;

package/LoadingIndicator/Spinner.d.ts

@@ -1,4 +1,6 @@
-import React from 'react';
-export type SpinnerProps = React.SVGAttributes<SVGSVGElement>;
-declare const _default: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<SVGSVGElement>>;
+import * as React from 'react';
+type Props = React.HTMLAttributes<HTMLDivElement>;
+export declare const LoadingIndicator: React.ForwardRefRenderFunction<HTMLDivElement, Props>;
+export declare const StaticLoadingIndicator: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/LoadingIndicator/Spinner.js

@@ -1,42 +1,71 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+exports.StaticLoadingIndicator = exports.LoadingIndicator = void 0;
+const React = __importStar(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
-const react_2 = require("@emotion/react");
-const animationRotate = (0, react_2.keyframes) `
-0% {
-  transform: rotate(0deg);
-  }
-100% {
-  transform: rotate(270deg);
-}
+const react_1 = require("@emotion/react");
+const Container = styled_1.default.div `
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 `;
-const animationDash = (0, react_2.keyframes) `
- 0% {
-    stroke-dashoffset: 187;
-  }
-50% {
-  stroke-dashoffset: 46.75;
-          transform: rotate(135deg);
-}
-100% {
-  stroke-dashoffset: 187;
-          transform: rotate(450deg);
-}
+const spin = (0, react_1.keyframes) `
+    to {
+        transform: rotate(360deg);
+    }
 `;
-const Svg = styled_1.default.svg `
-  animation: ${animationRotate} 1.4s linear infinite;
+const SpinLoader = styled_1.default.div `
+  width: 2em;
+  height: 2em;
+  border: 0.187em solid ${({ theme }) => theme.color.surface.darken(30).toString()};
+  border-top-color: ${({ theme }) => theme.color.accentPrimary.toString()};
+  border-radius: 50%;
+  animation: ${spin} 0.8s linear infinite;
 `;
-const Circle = styled_1.default.circle `
-  stroke-dasharray: 187;
-  stroke-dashoffset: 0;
-  transform-origin: center;
-  animation: ${animationDash} 1.4s ease-in-out infinite;
-  stroke: ${({ theme }) => theme.color.accentSecondary.toString()};
+const LoadingIndicator = (props, ref) => (React.createElement(Container, Object.assign({}, props, { ref: ref }),
+    React.createElement(SpinLoader, null)));
+exports.LoadingIndicator = LoadingIndicator;
+const StaticLoadingIndicatorContainer = styled_1.default.span `
+  height: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
 `;
-const Spinner = (props, ref) => (react_1.default.createElement(Svg, Object.assign({ width: "1em", height: "1em", viewBox: "0 0 66 66", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref }),
-    react_1.default.createElement(Circle, { fill: "none", strokeWidth: "6", strokeLinecap: "round", cx: "33", cy: "33", r: "30" })));
-exports.default = react_1.default.forwardRef(Spinner);
+exports.StaticLoadingIndicator = React.forwardRef((props, ref) => (React.createElement(StaticLoadingIndicatorContainer, Object.assign({}, props, { ref: ref }),
+    React.createElement(SpinLoader, null))));
+exports.StaticLoadingIndicator.displayName = 'StaticLoadingIndicator';
+exports.default = React.forwardRef(exports.LoadingIndicator);

package/LoadingIndicator/index.d.ts

@@ -1,3 +1,3 @@
-import Spinner from './Spinner';
-export { Spinner };
-export default Spinner;
+import LoadingIndicator from './Spinner';
+export * from './Spinner';
+export default LoadingIndicator;

package/LoadingIndicator/index.js

@@ -1,9 +1,22 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Spinner = void 0;
 const Spinner_1 = __importDefault(require("./Spinner"));
-exports.Spinner = Spinner_1.default;
+__exportStar(require("./Spinner"), exports);
 exports.default = Spinner_1.default;

package/MaskedField/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Mask, FormatParsedPayload, ParseInput } from './useMasked';
+import { FormatParsedPayload, Mask, ParseInput } from './useMasked';
 import { TextFieldProps } from '../TextField';
+export * from './useMasked';
 export type GetMask = (input: string) => Mask;
 export interface MaskedFieldProps extends Omit<TextFieldProps, 'value' | 'onChange'> {
     /**