@verdaccio/ui-theme 3.1.0 → 6.0.0-6-next.11

package/src/components/Heading.tsx

@@ -0,0 +1,15 @@
+import { default as MaterialUITypography, TypographyProps } from '@material-ui/core/Typography';
+import React, { forwardRef } from 'react';
+
+type HeadingType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+type HeadingRef = HTMLHeadingElement;
+
+interface Props extends Omit<TypographyProps, 'variant'> {
+  variant?: HeadingType;
+}
+
+const Heading = forwardRef<HeadingRef, Props>(function Heading({ variant = 'h6', ...props }, ref) {
+  return <MaterialUITypography {...props} variant={variant} ref={ref} />;
+});
+
+export default Heading;

package/src/components/IconButton.tsx

@@ -0,0 +1,10 @@
+import { default as MaterialUIIconButton, IconButtonProps } from '@material-ui/core/IconButton';
+import React, { forwardRef } from 'react';
+
+type IconButtonRef = HTMLButtonElement;
+
+const IconButton = forwardRef<IconButtonRef, IconButtonProps>(function IconButton(props, ref) {
+  return <MaterialUIIconButton {...props} ref={ref} />;
+});
+
+export default IconButton;

package/src/components/Icons/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "max-len": 0
+  }
+}

package/src/components/Icons/Earth.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { SvgIcon } from '../SvgIcon';
+
+type Props = React.ComponentProps<typeof SvgIcon>;
+
+const Earth = React.forwardRef(function Earth(props: Props, ref: React.Ref<SVGSVGElement>) {
+  return (
+    <SvgIcon viewBox="0 0 45 45" {...props} ref={ref}>
+      <defs>
+        <clipPath id="prefix__a">
+          <path d="M0 36h36V0H0v36z" />
+        </clipPath>
+        <clipPath id="prefix__b">
+          <path d="M18 36C8.059 36 0 27.941 0 18S8.059 0 18 0s18 8.059 18 18-8.059 18-18 18z" />
+        </clipPath>
+      </defs>
+      <g clipPath="url(#prefix__a)" transform="matrix(1.25 0 0 -1.25 0 45)">
+        <path
+          d="M36 18c0-9.941-8.059-18-18-18S0 8.059 0 18s8.059 18 18 18 18-8.059 18-18"
+          fill="#88c9f9"
+        />
+      </g>
+      <g clipPath="url(#prefix__b)" transform="matrix(1.25 0 0 -1.25 0 45)">
+        <path
+          d="M3.627 28.952c-.45 2.93 2.195 4.156 3.607 4.47 1.412.314 2.776.62 2.933-.006.156-.628.311-1.46 1.173-1.148.862.314 3.043.56 4.063 1.342 1.02.783 2.244.787 3.264.473 1.02-.313 3.877-.227 3.25-1.167-.627-.94-1.825-.827-2.45-1.924-.628-1.099.171-1.826 1.033-1.826.865 0 1.71-.135 2.26.727.548.863-.383 2.463.324 2.357.706-.106 1.477-.866 2.03-2.043.547-1.176 1.408-.47 1.723-1.176.313-.705 2.04-2.039 1.177-1.804-.864.236-1.726.392-1.96-.47-.237-.863.388-1.726-.237-1.647-.627.08-.86-.089-1.725-.004-.862.083-1.333.631-2.039-.545-.705-1.175-1.254-1.96-1.567-2.509-.315-.549-.785-.86-.55-1.96.235-1.099-.628-.785-.628.156 0 .94-.548 1.098-1.253.942-.706-.157-1.803-.313-1.724-1.098.077-.784-.315-1.725.313-2.352.627-.629 1.33.076 1.723-.158.393-.237 1.525-.023 1.133-.416-.393-.39-1.76-.88-.976-1.509a4.831 4.831 0 011.893-.907c.313-.08.062.774 1.083 1.166 1.017.392 2.608 1.29 3 .584.391-.705.338-.595 1.75-.75 1.41-.156 1.79-.585 2.417-1.917.626-1.333.446-1.192 1.462-1.58 1.021-.394 1.678-.223.737-1.087-.94-.86-1.65-.814-2.199-1.833-.55-1.017-.153-1.73-1.25-2.75A20.755 20.755 0 0024 4c-.618-.37-2.162-2.07-3.083-2.667-.834-.54-1.083 0-1.083 0s.256 1.667.964 2.372c.704.705 1.105 3.344.87 4.128-.235.783-1.36 1.02-1.75 1.333-.393.312-1.418 1.548-1.418 2.334 0 .784 1.71 2.81 1.71 2.81.218-1.089-1.039.328-1.627.523-.47.157-1.542 1.656-2.459 1.814-.916.16-1.363.7-2.068 1.25-.706.55-2.43 1.332-2.353 2.195.08.862-1.725 1.568-2.038 1.568-.314 0-1.019 0-1.647 1.098-.627 1.098-1.725 2.196-1.41 2.98.312.783.391 1.726.233 2.588-.156.862-1.332 1.176-1.567.941-.235-.236-1.489-1.335-1.647-.315"
+          fill="#5c913b"
+        />
+      </g>
+    </SvgIcon>
+  );
+});
+
+Earth.displayName = 'Earth';
+
+export { Earth };

package/src/components/Icons/FileBinary.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { SvgIcon } from '../SvgIcon';
+
+type Props = React.ComponentProps<typeof SvgIcon>;
+
+const FileBinary = React.forwardRef(function FileBinary(
+  props: Props,
+  ref: React.Ref<SVGSVGElement>
+) {
+  return (
+    <SvgIcon {...props} ref={ref}>
+      <path d="M8.5 1H1c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V4.5L8.5 1zM11 14H1V2h7l3 3v9zM5 6.98L3.5 8.5 5 10l-.5 1L2 8.5 4.5 6l.5.98zM7.5 6L10 8.5 7.5 11l-.5-.98L8.5 8.5 7 7l.5-1z" />
+    </SvgIcon>
+  );
+});
+
+FileBinary.displayName = 'FileBinary';
+
+export { FileBinary };

package/src/components/Icons/Law.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { SvgIcon } from '../SvgIcon';
+
+type Props = React.ComponentProps<typeof SvgIcon>;
+
+const Law = React.forwardRef(function Law(props: Props, ref: React.Ref<SVGSVGElement>) {
+  return (
+    <SvgIcon {...props} ref={ref}>
+      <path
+        fillRule="evenodd"
+        d="M7 4c-.83 0-1.5-.67-1.5-1.5S6.17 1 7 1s1.5.67 1.5 1.5S7.83 4 7 4zm7 6c0 1.11-.89 2-2 2h-1c-1.11 0-2-.89-2-2l2-4h-1c-.55 0-1-.45-1-1H8v8c.42 0 1 .45 1 1h1c.42 0 1 .45 1 1H3c0-.55.58-1 1-1h1c0-.55.58-1 1-1h.03L6 5H5c0 .55-.45 1-1 1H3l2 4c0 1.11-.89 2-2 2H2c-1.11 0-2-.89-2-2l2-4H1V5h3c0-.55.45-1 1-1h4c.55 0 1 .45 1 1h3v1h-1l2 4zM2.5 7L1 10h3L2.5 7zM13 10l-1.5-3-1.5 3h3z"
+      />
+    </SvgIcon>
+  );
+});
+
+Law.displayName = 'Law';
+
+export { Law };

package/src/components/Icons/License.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { SvgIcon } from '../SvgIcon';
+
+type Props = React.ComponentProps<typeof SvgIcon>;
+
+const License = React.forwardRef(function License(props: Props, ref: React.Ref<SVGSVGElement>) {
+  return (
+    <SvgIcon viewBox="0 0 490.652 490.652" {...props} ref={ref}>
+      <path d="M456.607 9.904H34.04C15.269 9.904 0 25.17 0 43.945V310.17c0 18.77 15.269 34.039 34.04 34.039h260.642c-4.043-10.35-6.534-21.737-7.159-33.742l-253.974-.297.491-266.718 423.063.493V310.17c0 .279-.23.492-.495.492l-15.251-.019c-.637 11.942-3.111 23.263-7.138 33.565h22.389c18.777 0 34.045-15.27 34.045-34.039V43.945c-.001-18.775-15.268-34.041-34.046-34.041z" />
+      <path d="M364.447 381.02c33.354 0 60.386-34.152 60.386-76.289 0-42.131-27.031-76.284-60.386-76.284-33.35 0-60.38 34.153-60.38 76.284 0 42.137 27.031 76.289 60.38 76.289zM81.087 118.345h149.561c9.273 0 16.776-7.499 16.776-16.772 0-9.271-7.504-16.775-16.776-16.775H81.087c-9.271 0-16.771 7.504-16.771 16.775 0 9.273 7.499 16.772 16.771 16.772zm334.08 58.716c0-9.273-7.505-16.779-16.776-16.779H81.087c-9.271 0-16.771 7.506-16.771 16.779 0 9.271 7.499 16.77 16.771 16.77h317.304c9.271 0 16.776-7.498 16.776-16.77zm-334.08 58.707c-9.271 0-16.771 7.504-16.771 16.771 0 9.273 7.499 16.777 16.771 16.777h149.561c9.273 0 16.776-7.504 16.776-16.777 0-9.268-7.504-16.771-16.776-16.771H81.087zm334.338 138.684c-.065.082-23.295 26.869-55.728 23.081l40.331 81.577a2.93 2.93 0 002.637 1.639h.215a2.95 2.95 0 002.571-2.031l10.174-31.234a3.024 3.024 0 011.488-1.728 3.07 3.07 0 012.28-.13l30.977 10.88c.324.112.651.163.98.163.836 0 1.623-.348 2.195-.982.803-.9.964-2.18.441-3.244l-38.561-77.991zm-101.772.146c-.049-.047-.118-.096-.185-.146l-38.561 77.973a2.953 2.953 0 00.448 3.262 2.961 2.961 0 003.174.819l30.978-10.88c.328-.113.658-.16.982-.16.442 0 .884.096 1.294.29.706.36 1.245.987 1.493 1.741l10.173 31.221c.378 1.133 1.391 1.936 2.572 2.014h.21a2.95 2.95 0 002.642-1.621l26.206-53.01-16.755-33.893c-.066-.034-14.672-5.884-24.671-17.61z" />
+    </SvgIcon>
+  );
+});
+
+License.displayName = 'License';
+
+export { License };

package/src/components/Icons/Time.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { SvgIcon } from '../SvgIcon';
+
+type Props = React.ComponentProps<typeof SvgIcon>;
+
+const Time = React.forwardRef(function Time(props: Props, ref: React.Ref<SVGSVGElement>) {
+  return (
+    <SvgIcon viewBox="0 0 24 24" {...props} ref={ref}>
+      <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z" />
+    </SvgIcon>
+  );
+});
+
+Time.displayName = 'Time';
+
+export { Time };

package/src/components/Icons/Version.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { SvgIcon } from '../SvgIcon';
+
+type Props = React.ComponentProps<typeof SvgIcon>;
+
+const Version = React.forwardRef(function Version(props: Props, ref: React.Ref<SVGSVGElement>) {
+  return (
+    <SvgIcon viewBox="0 0 14 16" height={16} width={14} {...props} ref={ref}>
+      <path
+        fillRule="evenodd"
+        d="M13 3H7c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H8V5h4v6zM4 4h1v1H4v6h1v1H4c-.55 0-1-.45-1-1V5c0-.55.45-1 1-1zM1 5h1v1H1v4h1v1H1c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1z"
+      />
+    </SvgIcon>
+  );
+});
+
+Version.displayName = 'Version';
+
+export { Version };

package/src/components/Icons/index.ts

@@ -0,0 +1,5 @@
+export { Version } from './Version';
+export { Time } from './Time';
+export { FileBinary } from './FileBinary';
+export { Law } from './Law';
+export { Earth } from './Earth';

package/src/components/Input.tsx

@@ -0,0 +1,10 @@
+import { default as MaterialUIInput, InputProps } from '@material-ui/core/Input';
+import React, { forwardRef } from 'react';
+
+type InputRef = HTMLDivElement;
+
+const Input = forwardRef<InputRef, InputProps>(function Input(props, ref) {
+  return <MaterialUIInput {...props} ref={ref} />;
+});
+
+export default Input;

package/src/components/InputAdornment/InputAdornment.tsx

@@ -0,0 +1,16 @@
+import {
+  default as MaterialUIInputAdornment,
+  InputAdornmentProps,
+} from '@material-ui/core/InputAdornment';
+import React, { forwardRef } from 'react';
+
+type InputAdornmentRef = HTMLDivElement;
+
+const InputAdornment = forwardRef<InputAdornmentRef, InputAdornmentProps>(function InputAdornment(
+  props,
+  ref
+) {
+  return <MaterialUIInputAdornment {...props} ref={ref} />;
+});
+
+export default InputAdornment;

package/src/components/InputAdornment/index.ts

@@ -0,0 +1 @@
+export { default } from './InputAdornment';

package/src/components/InputLabel.tsx

@@ -0,0 +1,10 @@
+import { default as MaterialUIInputLabel, InputLabelProps } from '@material-ui/core/InputLabel';
+import React, { forwardRef } from 'react';
+
+type InputLabelRef = HTMLLabelElement;
+
+const InputLabel = forwardRef<InputLabelRef, InputLabelProps>(function InputLabel(props, ref) {
+  return <MaterialUIInputLabel {...props} ref={ref} />;
+});
+
+export default InputLabel;

package/src/components/Label/Label.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { render } from 'verdaccio-ui/utils/test-react-testing-library';
+
+import Label from './Label';
+
+describe('<Label /> component', () => {
+  const props = {
+    text: 'test',
+  };
+  test('should render the component in default state', () => {
+    const { container } = render(<Label text={props.text} />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/components/Label/Label.tsx

@@ -0,0 +1,35 @@
+import styled from '@emotion/styled';
+import React from 'react';
+
+import { Theme, FontWeight } from 'verdaccio-ui/design-tokens/theme';
+
+interface Props {
+  text: string;
+  capitalize?: boolean;
+  weight?: FontWeight;
+}
+
+interface WrapperProps {
+  capitalize: boolean;
+  weight: FontWeight;
+}
+
+const Wrapper = styled('div')<WrapperProps & { theme?: Theme }>((props) => ({
+  fontWeight: props.theme?.fontWeight[props.weight],
+  textTransform: props.capitalize ? 'capitalize' : 'none',
+}));
+
+const Label: React.FC<Props> = ({
+  text = '',
+  capitalize = false,
+  weight = 'regular',
+  ...props
+}) => {
+  return (
+    <Wrapper capitalize={capitalize} weight={weight} {...props}>
+      {text}
+    </Wrapper>
+  );
+};
+
+export default Label;

package/src/components/Label/__snapshots__/Label.test.tsx.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Label /> component should render the component in default state 1`] = `
+.emotion-0 {
+  font-weight: 400;
+  text-transform: none;
+}
+
+<div
+  class="emotion-0 emotion-1"
+>
+  test
+</div>
+`;

package/src/components/Label/index.ts

@@ -0,0 +1 @@
+export { default } from './Label';

package/src/components/Link.tsx

@@ -0,0 +1,39 @@
+import React, { MouseEvent } from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+
+import Text, { TextProps } from './Text';
+
+interface Props extends Pick<TextProps, 'variant'> {
+  external?: boolean;
+  className?: string;
+  to: string;
+  children?: React.ReactNode;
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+}
+
+type LinkRef = HTMLAnchorElement;
+
+/* eslint-disable verdaccio/jsx-spread */
+const Link = React.forwardRef<LinkRef, Props>(function Link(
+  { external, to, children, variant, className, ...props },
+  ref
+) {
+  const LinkTextContent = <Text variant={variant}>{children}</Text>;
+  return external ? (
+    <a
+      className={className}
+      href={to}
+      ref={ref}
+      rel="noopener noreferrer"
+      target="_blank"
+      {...props}>
+      {LinkTextContent}
+    </a>
+  ) : (
+    <RouterLink className={className} innerRef={ref} to={to} {...props}>
+      {LinkTextContent}
+    </RouterLink>
+  );
+});
+
+export default Link;

package/src/components/List.tsx

@@ -0,0 +1,10 @@
+import { default as MaterialUIList, ListProps } from '@material-ui/core/List';
+import React, { forwardRef } from 'react';
+
+type ListRef = HTMLUListElement;
+
+const List = forwardRef<ListRef, ListProps>(function List(props, ref) {
+  return <MaterialUIList {...props} ref={ref} />;
+});
+
+export default List;

package/src/components/ListItem.tsx

@@ -0,0 +1,23 @@
+import { default as MaterialUIListItem, ListItemProps } from '@material-ui/core/ListItem';
+import React, { forwardRef } from 'react';
+
+type ListItemRef<T extends boolean = false> = T extends true ? HTMLDivElement : HTMLLIElement;
+
+interface Props<T extends boolean = false> extends Omit<ListItemProps, 'button'> {
+  button?: T;
+}
+
+const ListItem = forwardRef(function ListItem<T extends boolean>(
+  { button, ...props }: Props<T>,
+  ref: React.Ref<ListItemRef<T>>
+) {
+  // it seems typescript has some discrimination type limitions. Please see: https://github.com/mui-org/material-ui/issues/14971
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return <MaterialUIListItem {...props} button={button as any} innerRef={ref} />;
+});
+
+ListItem.defaultProps = {
+  button: false,
+};
+
+export default ListItem;

package/src/components/ListItemText.tsx

@@ -0,0 +1,16 @@
+import {
+  default as MaterialUIListItemText,
+  ListItemTextProps,
+} from '@material-ui/core/ListItemText';
+import React, { forwardRef } from 'react';
+
+type ListItemTextRef = HTMLDivElement;
+
+const ListItemText = forwardRef<ListItemTextRef, ListItemTextProps>(function ListItemText(
+  props,
+  ref
+) {
+  return <MaterialUIListItemText {...props} ref={ref} />;
+});
+
+export default ListItemText;

package/src/components/Loading/Loading.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { render } from 'verdaccio-ui/utils/test-react-testing-library';
+
+import Loading from './Loading';
+
+describe('<Loading /> component', () => {
+  test('should render the component in default state', () => {
+    const { container } = render(<Loading />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/components/Loading/Loading.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import Logo from '../Logo';
+
+import Spinner from './Spinner';
+import { Wrapper, Badge } from './styles';
+
+const Loading: React.FC = () => (
+  <Wrapper data-testid="loading">
+    <Badge>
+      <Logo size="big" />
+    </Badge>
+    <Spinner data-testid="spinnerLogo" />
+  </Wrapper>
+);
+
+export default Loading;

package/src/components/Loading/Spinner/Spinner.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { render, cleanup } from 'verdaccio-ui/utils/test-react-testing-library';
+
+import Spinner from './Spinner';
+
+describe('<Spinner /> component', () => {
+  beforeEach(cleanup);
+
+  test('should render the component in default state', () => {
+    const wrapper = render(<Spinner />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

package/src/components/Loading/Spinner/Spinner.tsx

@@ -0,0 +1,35 @@
+import styled from '@emotion/styled';
+import React from 'react';
+
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+
+import CircularProgress from '../../CircularProgress';
+
+interface Props {
+  size?: number;
+  centered?: boolean;
+}
+
+const Spinner: React.FC<Props> = ({ size = 50, centered = false }) => (
+  <Wrapper centered={centered}>
+    <Circular size={size} />
+  </Wrapper>
+);
+
+export default Spinner;
+
+const Wrapper = styled('div')<Pick<Props, 'centered'>>(({ centered }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  ...(centered && {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+  }),
+}));
+
+const Circular = styled(CircularProgress)<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.type === 'dark' ? theme?.palette.white : theme?.palette.primary.main,
+}));

package/src/components/Loading/Spinner/__snapshots__/Spinner.test.tsx.snap

@@ -0,0 +1,148 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Spinner /> component should render the component in default state 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.emotion-2 {
+  color: #4b5e40;
+}
+
+<body>
+    <div>
+      <div
+        class="emotion-0 emotion-1"
+      >
+        <div
+          class="MuiCircularProgress-root emotion-2 emotion-3 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
+          role="progressbar"
+          style="width: 50px; height: 50px;"
+        >
+          <svg
+            class="MuiCircularProgress-svg"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.emotion-2 {
+  color: #4b5e40;
+}
+
+<div>
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <div
+        class="MuiCircularProgress-root emotion-2 emotion-3 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
+        role="progressbar"
+        style="width: 50px; height: 50px;"
+      >
+        <svg
+          class="MuiCircularProgress-svg"
+          viewBox="22 22 44 44"
+        >
+          <circle
+            class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
+            cx="44"
+            cy="44"
+            fill="none"
+            r="20.2"
+            stroke-width="3.6"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;

package/src/components/Loading/Spinner/index.tsx

@@ -0,0 +1 @@
+export { default } from './Spinner';