@hhgtech/hhg-components/build/index-29d0bb65.js

Hello Health Group common components

'use strict';

var React = require('react');
var index$1 = require('./index-0cd89d0b.js');
var index = require('./index-2b476eb9.js');
var react = require('@emotion/react');
var styled = require('@emotion/styled');
var miscTheme = require('./miscTheme.js');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);

const StyledLoading = styled__default["default"].div `
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
  button {
    position: relative;
  }
`;
const circle = react.keyframes `
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
`;
styled__default["default"].div `
  display: flex;
  width: fit-content;
  width: -moz-fit-content;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  background: white;
  border-radius: ${miscTheme.theme.borderRadius};
  box-shadow: -1px 1px 2px rgba(67, 70, 74, 0.0001),
    -2px 2px 5px rgba(67, 86, 100, 0.123689);
  .loading-spinner {
    width: 24px;
    height: 24px;
    margin-bottom: 0.5rem;
    animation: ${circle} 1.2s linear infinite;
  }
  &[data-is-marrybaby='true'] {
    box-shadow: none;
  }
`;

const Loading = ({ className, size = 'md' }) => {
    const { t } = index.useTranslations();
    return (React__default["default"].createElement(StyledLoading, { className: className },
        React__default["default"].createElement(index$1.Button, { size: size, color: "transparent", isLoading: true }, t('loading'))));
};

exports.Loading = Loading;