polpo 0.1.7 → 0.1.8

package/src/components/icon/index.ts

@@ -1,5 +0,0 @@
-import { IconNameT } from './icon';
-import { Icons } from './icons';
-
-export * from './icon';
-export const IconNames: Array<IconNameT> = Object.keys(Icons) as Array<IconNameT>;

package/src/components/image/image.stories.tsx

@@ -1,25 +0,0 @@
-import { Image } from './image';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-const meta: Meta<typeof Image> = {
-  title: 'Image',
-  component: Image,
-  argTypes: {
-    src: { control: { type: 'text' } },
-    alt: { control: { type: 'text' } },
-    loading: { control: 'select', options: ['eager', 'lazy'] },
-  },
-  args: {
-    src: 'https://t4.ftcdn.net/jpg/07/28/89/61/360_F_728896171_M2pPUCPkTyFiSYWhDsJI5A45TsI6B5Gk.jpg',
-    alt: 'Image',
-    loading: 'eager',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Image>;
-
-export const Default: Story = {
-  args: {},
-};

package/src/components/image/image.tsx

@@ -1,7 +0,0 @@
-import { DetailedHTMLProps, ImgHTMLAttributes } from 'react';
-
-type ImageProps = DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> & {};
-
-export const Image = ({ alt = '', loading = 'eager', ...props }: ImageProps) => {
-  return <img loading={loading} alt={alt} {...props} width='100%' />;
-};

package/src/components/image/index.ts

@@ -1 +0,0 @@
-export * from './image';

package/src/components/index.ts

@@ -1,17 +0,0 @@
-export * from './accordion';
-export * from './buttons';
-export * from './cards';
-export * from './cursor';
-export * from './form';
-export * from './icon';
-export * from './image';
-export * from './infinity-scroll';
-export * from './line';
-export * from './loaders';
-export * from './modals';
-export * from './ripple';
-export * from './smart-table';
-export * from './tabs';
-export * from './tag';
-export * from './tooltips';
-export * from './typography';

package/src/components/infinity-scroll/index.ts

@@ -1 +0,0 @@
-export * from './infinity-scroll';

package/src/components/infinity-scroll/infinity-scroll.stories.tsx

@@ -1,118 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import { Grid } from '../../layouts';
-import { Typography } from '../typography';
-
-import { InfinityScroll } from './infinity-scroll';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-const meta: Meta<typeof InfinityScroll> = {
-  title: 'InfinityScroll',
-  component: InfinityScroll,
-  argTypes: {
-    isLoading: { control: 'boolean' },
-    hasNextPage: { control: 'boolean' },
-    loadMore: { control: false },
-    customLoadMoreElement: { control: false },
-    emptyMessage: { control: 'text' },
-    children: { control: 'text' },
-  },
-  decorators: [
-    Story => (
-      <Grid style={{ height: '300px', width: '300px', overflow: 'auto', border: '1px solid' }}>
-        <Story />
-      </Grid>
-    ),
-  ],
-  render: args => {
-    const [data, setData] = useState<Array<string>>([]);
-    const [hasNextPage, setHasNextPage] = useState(true);
-    const [isLoading, setIsLoading] = useState(false);
-
-    const loadMore = useCallback(() => {
-      if (!hasNextPage) return;
-
-      setIsLoading(true);
-      setTimeout(() => {
-        setData([...data, ...['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']]);
-        setHasNextPage(data.length < 100);
-        setIsLoading(false);
-      }, 1000);
-    }, [data, hasNextPage]);
-
-    return (
-      <Grid gap='10px' style={{ padding: '10px' }}>
-        <InfinityScroll {...args} hasNextPage={hasNextPage} isLoading={isLoading} loadMore={loadMore}>
-          {data.map((v: string, key: number) => (
-            <section key={key} style={{ padding: '10px', background: '#55882233' }}>
-              <Typography variant='label' weight='bold' align='center' as='p'>
-                {v}
-              </Typography>
-            </section>
-          ))}
-        </InfinityScroll>
-      </Grid>
-    );
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof InfinityScroll>;
-
-export const Default: Story = {
-  args: {},
-  render: args => {
-    const [data, setData] = useState<Array<string>>([]);
-    const [hasNextPage, setHasNextPage] = useState(true);
-    const [isLoading, setIsLoading] = useState(false);
-
-    const loadMore = useCallback(() => {
-      if (!hasNextPage) return;
-
-      setIsLoading(true);
-      setTimeout(() => {
-        setData([...data, ...['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']]);
-        setHasNextPage(data.length < 100);
-        setIsLoading(false);
-      }, 1000);
-    }, [data, hasNextPage]);
-
-    return (
-      <Grid gap='10px' style={{ padding: '10px' }}>
-        <InfinityScroll {...args} hasNextPage={hasNextPage} isLoading={isLoading} loadMore={loadMore}>
-          {data.map((v: string, key: number) => (
-            <section key={key} style={{ padding: '10px', background: '#55882233' }}>
-              <Typography variant='label' weight='bold' align='center' as='p'>
-                {v}
-              </Typography>
-            </section>
-          ))}
-        </InfinityScroll>
-      </Grid>
-    );
-  },
-};
-
-export const Empty: Story = {
-  args: {
-    emptyMessage: 'No data',
-  },
-  render: args => {
-    const [data] = useState<Array<string>>([]);
-
-    return (
-      <Grid gap='10px' style={{ padding: '10px' }}>
-        <InfinityScroll {...args} hasNextPage={false} isLoading={false} loadMore={() => null}>
-          {data.map((v: string, key: number) => (
-            <section key={key} style={{ padding: '10px', background: '#55882233' }}>
-              <Typography variant='label' weight='bold' align='center' as='p'>
-                {v}
-              </Typography>
-            </section>
-          ))}
-        </InfinityScroll>
-      </Grid>
-    );
-  },
-};

package/src/components/infinity-scroll/infinity-scroll.style.ts

@@ -1,30 +0,0 @@
-import styled from 'styled-components';
-
-export const InfiniteScrollStyle = styled.section`
-  display: grid;
-  gap: 1em;
-`;
-
-export const InfinityScrollFooterStyle = styled.section`
-  display: grid;
-  place-content: start center;
-  place-items: start center;
-
-  .loading {
-    width: 100%;
-    height: 30px;
-    display: grid;
-    place-content: center;
-
-    &--icon {
-      animation: spin 0.5s linear infinite;
-      font-size: 20px;
-    }
-  }
-
-  .empty-message {
-    font-size: 0.8em;
-    text-align: center;
-    color: #a6a6a6;
-  }
-`;

package/src/components/infinity-scroll/infinity-scroll.tsx

@@ -1,53 +0,0 @@
-import { LegacyRef, RefObject, useEffect } from 'react';
-
-import { Icon } from '../icon';
-
-import { InfinityScrollFooterStyle } from './infinity-scroll.style';
-
-import { useDebounce, useInView } from '@polpo/hooks';
-
-export type InfinityScrollProps = {
-  isLoading: boolean;
-  hasNextPage: boolean;
-  loadMore: () => void;
-  customLoadMoreElement?: (ref: RefObject<Element>) => React.ReactNode;
-  emptyMessage?: string;
-  children?: React.ReactNode;
-};
-
-export const InfinityScroll = ({
-  isLoading: isLoadingProp = false,
-  hasNextPage = false,
-  loadMore,
-  customLoadMoreElement,
-  emptyMessage,
-  children,
-}: InfinityScrollProps): React.ReactElement => {
-  const { ref, inView } = useInView();
-  const isLoading = useDebounce(isLoadingProp, 100);
-
-  useEffect(() => {
-    if (hasNextPage && inView && !isLoading) {
-      loadMore();
-    }
-  }, [hasNextPage, isLoading, loadMore, inView]);
-
-  const childrenExists = Array.isArray(children) ? children.length > 0 : Boolean(children);
-
-  return (
-    <>
-      {children}
-      <InfinityScrollFooterStyle>
-        {Boolean(emptyMessage) && !childrenExists && !isLoading && <p className='empty-message'>{emptyMessage}</p>}
-        {(hasNextPage || isLoading) &&
-          (customLoadMoreElement ? (
-            customLoadMoreElement(ref)
-          ) : (
-            <section ref={ref as LegacyRef<HTMLElement>} className='loading'>
-              {isLoading && <Icon name='spinner' className='loading--icon' />}
-            </section>
-          ))}
-      </InfinityScrollFooterStyle>
-    </>
-  );
-};

package/src/components/line/index.ts

@@ -1 +0,0 @@
-export * from './line';

package/src/components/line/line.stories.tsx

@@ -1,66 +0,0 @@
-import { Grid } from '../../layouts';
-import { Typography } from '../typography';
-
-import { Line, LineOrientation, LineStyle } from './line';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-const meta: Meta<typeof Line> = {
-  title: 'Line',
-  component: Line,
-  argTypes: {
-    orientation: { control: false },
-    className: { control: false },
-    style: { control: false },
-    color: { control: 'color' },
-    lineStyle: { control: false },
-    lineWidth: { control: { type: 'range', min: 1, max: 10 }, if: { arg: 'lineStyle', neq: LineStyle.DOTTED } },
-    dotSize: { control: { type: 'range', min: 1, max: 100 }, if: { arg: 'lineStyle', eq: LineStyle.DOTTED } },
-    dashedSize: { control: { type: 'range', min: 1, max: 100 }, if: { arg: 'lineStyle', eq: LineStyle.DASHED } },
-    spacing: { control: { type: 'range', min: 1, max: 100 }, if: { arg: 'lineStyle', neq: LineStyle.SOLID } },
-  },
-  args: {
-    color: 'currentColor',
-  },
-  decorators: [
-    (Story, { args }) => (
-      <Grid ac='start' gtr='auto 1fr auto auto' gap='0.5em' style={{ width: '300px', height: '300px' }}>
-        <Typography variant='small' noPadding>
-          Vertical
-        </Typography>
-        <Story args={{ ...args, orientation: LineOrientation.VERTICAL }} />
-        <Typography variant='small' noPadding>
-          Horizontal
-        </Typography>
-        <Story args={{ ...args, orientation: LineOrientation.HORIZONTAL }} />
-      </Grid>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof Line>;
-
-export const Solid: Story = {
-  args: {
-    lineStyle: LineStyle.SOLID,
-    lineWidth: 1,
-  },
-};
-
-export const Dotted: Story = {
-  args: {
-    lineStyle: LineStyle.DOTTED,
-    dotSize: 2,
-    spacing: 5,
-  },
-};
-
-export const Dashed: Story = {
-  args: {
-    lineStyle: LineStyle.DASHED,
-    lineWidth: 2,
-    dashedSize: 10,
-    spacing: 15,
-  },
-};

package/src/components/line/line.style.ts

@@ -1,57 +0,0 @@
-import styled, { css } from 'styled-components';
-
-export type LineStyleProps = {
-  $color: string;
-  $size: number;
-  $spacing: number;
-  $dashSize: number;
-};
-
-export const LineStyle = styled.span<LineStyleProps>`
-  &.horizontal,
-  &.vertical {
-    background: ${props => props.$color ?? 'currentColor'};
-    display: inline-block;
-    border-radius: 100px;
-  }
-
-  &.horizontal {
-    width: 100%;
-    height: ${props => props.$size}px;
-    ${({ $size: sz, $spacing: sp, $color: cl, $dashSize: ds }) => css`
-      &.dotted {
-        background: radial-gradient(${sz / 2}px ${sz / 2}px, ${cl} 100%, transparent) 0 0 / ${sp + sz}px 100%;
-      }
-
-      &.dashed {
-        background: repeating-linear-gradient(
-          90deg,
-          ${cl},
-          ${cl} ${ds}px,
-          transparent ${ds}px,
-          transparent ${sp + ds}px
-        );
-      }
-    `}
-  }
-
-  &.vertical {
-    height: 100%;
-    width: ${props => props.$size}px;
-    ${({ $size: sz, $spacing: sp, $color: cl, $dashSize: ds }) => css`
-      &.dotted {
-        background: radial-gradient(${sz / 2}px ${sz / 2}px, ${cl} 100%, transparent) 0 0 / 100% ${sp + sz}px;
-      }
-
-      &.dashed {
-        background: repeating-linear-gradient(
-          0deg,
-          ${cl},
-          ${cl} ${ds}px,
-          transparent ${ds}px,
-          transparent ${sp + ds}px
-        );
-      }
-    `}
-  }
-`;

package/src/components/line/line.tsx

@@ -1,76 +0,0 @@
-import { LineStyle as LineComponentStyle } from './line.style';
-
-import { useClassNames } from '@polpo/hooks';
-
-export enum LineOrientation {
-  VERTICAL = 'vertical',
-  HORIZONTAL = 'horizontal',
-}
-
-export enum LineStyle {
-  SOLID = 'solid',
-  DOTTED = 'dotted',
-  DASHED = 'dashed',
-}
-
-type LineCommonProps = {
-  orientation?: `${LineOrientation}`;
-  className?: string;
-  style?: React.CSSProperties;
-  color?: string;
-};
-
-type LineSolidProps = LineCommonProps & {
-  lineStyle?: `${LineStyle.SOLID}`;
-  spacing?: never;
-  dotSize?: never;
-  dashedSize?: never;
-  lineWidth?: number;
-};
-
-type LineDottedProps = LineCommonProps & {
-  lineStyle: `${LineStyle.DOTTED}`;
-  spacing?: number;
-  dotSize?: number;
-  dashedSize?: never;
-  lineWidth?: never;
-};
-
-type LineDashedProps = LineCommonProps & {
-  lineStyle: `${LineStyle.DASHED}`;
-  spacing?: number;
-  dotSize?: never;
-  dashedSize?: number;
-  lineWidth?: number;
-};
-
-type LineProps = LineSolidProps | LineDottedProps | LineDashedProps;
-
-export const Line = ({
-  orientation = LineOrientation.HORIZONTAL,
-  className = '',
-  style = {},
-  color = 'currentColor',
-  lineWidth = 1,
-  lineStyle = LineStyle.SOLID,
-  dotSize = 1,
-  dashedSize = 1,
-  spacing = 1,
-}: LineProps) => {
-  const classNames = useClassNames({
-    [orientation]: true,
-    [className]: !!className,
-    [lineStyle]: true,
-  });
-
-  return (
-    <LineComponentStyle
-      className={classNames}
-      style={style}
-      $dashSize={dashedSize}
-      $color={color}
-      $size={lineStyle === LineStyle.DOTTED ? dotSize : lineWidth}
-      $spacing={spacing}
-    />
-  );
-};

package/src/components/loaders/icons/box-1.tsx

@@ -1,31 +0,0 @@
-export const Box1 = () => {
-  return (
-    <svg fill='currentColor' width='1em' height='1em' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
-      <rect x='1' y='1' rx='1' width='10' height='10'>
-        <animate
-          id='spinner_c7A9'
-          begin='0;spinner_23zP.end'
-          attributeName='x'
-          dur='0.2s'
-          values='1;13'
-          fill='freeze'
-        />
-        <animate id='spinner_Acnw' begin='spinner_ZmWi.end' attributeName='y' dur='0.2s' values='1;13' fill='freeze' />
-        <animate id='spinner_iIcm' begin='spinner_zfQN.end' attributeName='x' dur='0.2s' values='13;1' fill='freeze' />
-        <animate id='spinner_WX4U' begin='spinner_rRAc.end' attributeName='y' dur='0.2s' values='13;1' fill='freeze' />
-      </rect>
-      <rect x='1' y='13' rx='1' width='10' height='10'>
-        <animate id='spinner_YLx7' begin='spinner_c7A9.end' attributeName='y' dur='0.2s' values='13;1' fill='freeze' />
-        <animate id='spinner_vwnJ' begin='spinner_Acnw.end' attributeName='x' dur='0.2s' values='1;13' fill='freeze' />
-        <animate id='spinner_KQuy' begin='spinner_iIcm.end' attributeName='y' dur='0.2s' values='1;13' fill='freeze' />
-        <animate id='spinner_arKy' begin='spinner_WX4U.end' attributeName='x' dur='0.2s' values='13;1' fill='freeze' />
-      </rect>
-      <rect x='13' y='13' rx='1' width='10' height='10'>
-        <animate id='spinner_ZmWi' begin='spinner_YLx7.end' attributeName='x' dur='0.2s' values='13;1' fill='freeze' />
-        <animate id='spinner_zfQN' begin='spinner_vwnJ.end' attributeName='y' dur='0.2s' values='13;1' fill='freeze' />
-        <animate id='spinner_rRAc' begin='spinner_KQuy.end' attributeName='x' dur='0.2s' values='1;13' fill='freeze' />
-        <animate id='spinner_23zP' begin='spinner_arKy.end' attributeName='y' dur='0.2s' values='1;13' fill='freeze' />
-      </rect>
-    </svg>
-  );
-};

package/src/components/loaders/icons/box-2.tsx

@@ -1,30 +0,0 @@
-export const Box2 = () => {
-  return (
-    <svg
-      fill='currentColor'
-      width='1em'
-      height='1em'
-      xmlns='http://www.w3.org/2000/svg'
-      xmlSpace='preserve'
-      id='cog9_1_'
-      x={0}
-      y={0}
-      viewBox='0 0 36 36'
-    >
-      <style>
-        {
-          '@keyframes box5532-1{9.0909090909%,90.9090909091%{transform:translate(-12px,0)}18.1818181818%,27.2727272727%,81.8181818182%,to{transform:translate(0,0)}36.3636363636%,72.7272727273%{transform:translate(12px,0)}45.4545454545%,54.5454545455%,63.6363636364%{transform:translate(12px,12px)}}@keyframes box5532-2{27.2727272727%,9.0909090909%,to{transform:translate(0,0)}18.1818181818%,36.3636363636%{transform:translate(12px,0)}45.4545454545%,54.5454545455%,63.6363636364%,72.7272727273%{transform:translate(12px,12px)}81.8181818182%,90.9090909091%{transform:translate(0,12px)}}@keyframes box5532-3{18.1818181818%,36.3636363636%,45.4545454545%,54.5454545455%,63.6363636364%,72.7272727273%,9.0909090909%{transform:translate(-12px,0)}27.2727272727%,to{transform:translate(0,0)}81.8181818182%{transform:translate(-12px,-12px)}90.9090909091%{transform:translate(0,-12px)}}@keyframes box5532-4{18.1818181818%,9.0909090909%,90.9090909091%{transform:translate(-12px,0)}27.2727272727%,81.8181818182%{transform:translate(-12px,-12px)}36.3636363636%,54.5454545455%,63.6363636364%,72.7272727273%{transform:translate(0,-12px)}45.4545454545%,to{transform:translate(0,0)}}@keyframes box5532-5{18.1818181818%,27.2727272727%,9.0909090909%,to{transform:translate(0,0)}36.3636363636%,45.4545454545%,54.5454545455%,63.6363636364%,72.7272727273%{transform:translate(12px,0)}81.8181818182%{transform:translate(12px,-12px)}90.9090909091%{transform:translate(0,-12px)}}@keyframes box5532-6{36.3636363636%,45.4545454545%,54.5454545455%,63.6363636364%,9.0909090909%,to{transform:translate(0,0)}18.1818181818%,27.2727272727%,90.9090909091%{transform:translate(-12px,0)}72.7272727273%{transform:translate(0,12px)}81.8181818182%{transform:translate(-12px,12px)}}@keyframes box5532-7{18.1818181818%,27.2727272727%,9.0909090909%,90.9090909091%{transform:translate(12px,0)}36.3636363636%,81.8181818182%,to{transform:translate(0,0)}45.4545454545%,63.6363636364%,72.7272727273%{transform:translate(0,-12px)}54.5454545455%{transform:translate(12px,-12px)}}@keyframes box5532-8{9.0909090909%,to{transform:translate(0,0)}18.1818181818%{transform:translate(-12px,0)}27.2727272727%{transform:translate(-12px,-12px)}36.3636363636%,45.4545454545%,54.5454545455%,63.6363636364%,72.7272727273%{transform:translate(0,-12px)}81.8181818182%{transform:translate(12px,-12px)}90.9090909091%{transform:translate(12px,0)}}@keyframes box5532-9{18.1818181818%,36.3636363636%,63.6363636364%,72.7272727273%,9.0909090909%,90.9090909091%{transform:translate(-12px,0)}27.2727272727%,45.4545454545%,54.5454545455%,to{transform:translate(0,0)}81.8181818182%{transform:translate(-24px,0)}}.box5532{fill:currentColor;transform-origin:50% 50%}.box5532:nth-child(1){animation:box5532-1 4s infinite}.box5532:nth-child(2){animation:box5532-2 4s infinite}.box5532:nth-child(3){animation:box5532-3 4s infinite}.box5532:nth-child(4){animation:box5532-4 4s infinite}.box5532:nth-child(5){animation:box5532-5 4s infinite}.box5532:nth-child(6){animation:box5532-6 4s infinite}.box5532:nth-child(7){animation:box5532-7 4s infinite}.box5532:nth-child(8){animation:box5532-8 4s infinite}.box5532:nth-child(9){animation:box5532-9 4s infinite}'
-        }
-      </style>
-      <rect width={10} height={10} x={13} y={1} className='box5532' rx={1} />
-      <rect width={10} height={10} x={13} y={1} className='box5532' rx={1} />
-      <rect width={10} height={10} x={25} y={25} className='box5532' rx={1} />
-      <rect width={10} height={10} x={13} y={13} className='box5532' rx={1} />
-      <rect width={10} height={10} x={13} y={13} className='box5532' rx={1} />
-      <rect width={10} height={10} x={25} y={13} className='box5532' rx={1} />
-      <rect width={10} height={10} x={1} y={25} className='box5532' rx={1} />
-      <rect width={10} height={10} x={13} y={25} className='box5532' rx={1} />
-      <rect width={10} height={10} x={25} y={25} className='box5532' rx={1} />
-    </svg>
-  );
-};

package/src/components/loaders/icons/box-3.tsx

@@ -1,66 +0,0 @@
-export const Box3 = () => {
-  return (
-    <svg fill='currentColor' width='1em' height='1em' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
-      <rect x='1' y='1' width='7.33' height='7.33'>
-        <animate id='spinner_oJFS' begin='0;spinner_5T1J.end+0.2s' attributeName='x' dur='0.6s' values='1;4;1' />
-        <animate begin='0;spinner_5T1J.end+0.2s' attributeName='y' dur='0.6s' values='1;4;1' />
-        <animate begin='0;spinner_5T1J.end+0.2s' attributeName='width' dur='0.6s' values='7.33;1.33;7.33' />
-        <animate begin='0;spinner_5T1J.end+0.2s' attributeName='height' dur='0.6s' values='7.33;1.33;7.33' />
-      </rect>
-      <rect x='8.33' y='1' width='7.33' height='7.33'>
-        <animate begin='spinner_oJFS.begin+0.1s' attributeName='x' dur='0.6s' values='8.33;11.33;8.33' />
-        <animate begin='spinner_oJFS.begin+0.1s' attributeName='y' dur='0.6s' values='1;4;1' />
-        <animate begin='spinner_oJFS.begin+0.1s' attributeName='width' dur='0.6s' values='7.33;1.33;7.33' />
-        <animate begin='spinner_oJFS.begin+0.1s' attributeName='height' dur='0.6s' values='7.33;1.33;7.33' />
-      </rect>
-      <rect x='1' y='8.33' width='7.33' height='7.33'>
-        <animate begin='spinner_oJFS.begin+0.1s' attributeName='x' dur='0.6s' values='1;4;1' />
-        <animate begin='spinner_oJFS.begin+0.1s' attributeName='y' dur='0.6s' values='8.33;11.33;8.33' />
-        <animate begin='spinner_oJFS.begin+0.1s' attributeName='width' dur='0.6s' values='7.33;1.33;7.33' />
-        <animate begin='spinner_oJFS.begin+0.1s' attributeName='height' dur='0.6s' values='7.33;1.33;7.33' />
-      </rect>
-      <rect x='15.66' y='1' width='7.33' height='7.33'>
-        <animate begin='spinner_oJFS.begin+0.2s' attributeName='x' dur='0.6s' values='15.66;18.66;15.66' />
-        <animate begin='spinner_oJFS.begin+0.2s' attributeName='y' dur='0.6s' values='1;4;1' />
-        <animate begin='spinner_oJFS.begin+0.2s' attributeName='width' dur='0.6s' values='7.33;1.33;7.33' />
-        <animate begin='spinner_oJFS.begin+0.2s' attributeName='height' dur='0.6s' values='7.33;1.33;7.33' />
-      </rect>
-      <rect x='8.33' y='8.33' width='7.33' height='7.33'>
-        <animate begin='spinner_oJFS.begin+0.2s' attributeName='x' dur='0.6s' values='8.33;11.33;8.33' />
-        <animate begin='spinner_oJFS.begin+0.2s' attributeName='y' dur='0.6s' values='8.33;11.33;8.33' />
-        <animate begin='spinner_oJFS.begin+0.2s' attributeName='width' dur='0.6s' values='7.33;1.33;7.33' />
-        <animate begin='spinner_oJFS.begin+0.2s' attributeName='height' dur='0.6s' values='7.33;1.33;7.33' />
-      </rect>
-      <rect x='1' y='15.66' width='7.33' height='7.33'>
-        <animate begin='spinner_oJFS.begin+0.2s' attributeName='x' dur='0.6s' values='1;4;1' />
-        <animate begin='spinner_oJFS.begin+0.2s' attributeName='y' dur='0.6s' values='15.66;18.66;15.66' />
-        <animate begin='spinner_oJFS.begin+0.2s' attributeName='width' dur='0.6s' values='7.33;1.33;7.33' />
-        <animate begin='spinner_oJFS.begin+0.2s' attributeName='height' dur='0.6s' values='7.33;1.33;7.33' />
-      </rect>
-      <rect x='15.66' y='8.33' width='7.33' height='7.33'>
-        <animate begin='spinner_oJFS.begin+0.3s' attributeName='x' dur='0.6s' values='15.66;18.66;15.66' />
-        <animate begin='spinner_oJFS.begin+0.3s' attributeName='y' dur='0.6s' values='8.33;11.33;8.33' />
-        <animate begin='spinner_oJFS.begin+0.3s' attributeName='width' dur='0.6s' values='7.33;1.33;7.33' />
-        <animate begin='spinner_oJFS.begin+0.3s' attributeName='height' dur='0.6s' values='7.33;1.33;7.33' />
-      </rect>
-      <rect x='8.33' y='15.66' width='7.33' height='7.33'>
-        <animate begin='spinner_oJFS.begin+0.3s' attributeName='x' dur='0.6s' values='8.33;11.33;8.33' />
-        <animate begin='spinner_oJFS.begin+0.3s' attributeName='y' dur='0.6s' values='15.66;18.66;15.66' />
-        <animate begin='spinner_oJFS.begin+0.3s' attributeName='width' dur='0.6s' values='7.33;1.33;7.33' />
-        <animate begin='spinner_oJFS.begin+0.3s' attributeName='height' dur='0.6s' values='7.33;1.33;7.33' />
-      </rect>
-      <rect x='15.66' y='15.66' width='7.33' height='7.33'>
-        <animate
-          id='spinner_5T1J'
-          begin='spinner_oJFS.begin+0.4s'
-          attributeName='x'
-          dur='0.6s'
-          values='15.66;18.66;15.66'
-        />
-        <animate begin='spinner_oJFS.begin+0.4s' attributeName='y' dur='0.6s' values='15.66;18.66;15.66' />
-        <animate begin='spinner_oJFS.begin+0.4s' attributeName='width' dur='0.6s' values='7.33;1.33;7.33' />
-        <animate begin='spinner_oJFS.begin+0.4s' attributeName='height' dur='0.6s' values='7.33;1.33;7.33' />
-      </rect>
-    </svg>
-  );
-};

package/src/components/loaders/icons/clock-1.tsx

@@ -1,25 +0,0 @@
-export const Clock1 = () => {
-  return (
-    <svg fill='currentColor' width='1em' height='1em' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
-      <path d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z' />
-      <rect x='11' y='6' rx='1' width='2' height='7'>
-        <animateTransform
-          attributeName='transform'
-          type='rotate'
-          dur='9s'
-          values='0 12 12;360 12 12'
-          repeatCount='indefinite'
-        />
-      </rect>
-      <rect x='11' y='11' rx='1' width='2' height='9'>
-        <animateTransform
-          attributeName='transform'
-          type='rotate'
-          dur='0.75s'
-          values='0 12 12;360 12 12'
-          repeatCount='indefinite'
-        />
-      </rect>
-    </svg>
-  );
-};