[
  {
    "path": ".github/FUNDING.yml",
    "content": "# These are supported funding model platforms\n\ngithub: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]\npatreon: bondz # Replace with a single Patreon username\nopen_collective: # Replace with a single Open Collective username\nko_fi: # Replace with a single Ko-fi username\ntidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel\ncommunity_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry\nliberapay: # Replace with a single Liberapay username\nissuehunt: # Replace with a single IssueHunt username\notechie: # Replace with a single Otechie username\ncustom: [\"https://venmo.com/u/lovebondz\"]\n"
  },
  {
    "path": ".github/workflows/ci.yml",
    "content": "name: CI\n\non:\n  pull_request:\n    branches:\n      - main\n\njobs:\n  check:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v6\n\n      - uses: voidzero-dev/setup-vp@v1\n        with:\n          node-version: \"22\"\n          cache: true\n\n      - run: vp install\n      - run: vp check\n      - run: vp pack\n"
  },
  {
    "path": ".github/workflows/codeql-analysis.yml",
    "content": "name: CodeQL\n\non:\n  push:\n    branches: [main]\n  pull_request:\n    branches: [main]\n  schedule:\n    - cron: \"0 13 * * 1\"\n\njobs:\n  analyse:\n    name: Analyse\n    runs-on: ubuntu-latest\n\n    permissions:\n      security-events: write\n\n    steps:\n      - name: Checkout repository\n        uses: actions/checkout@v6\n\n      - name: Initialize CodeQL\n        uses: github/codeql-action/init@v4\n        with:\n          languages: javascript-typescript\n\n      - name: Autobuild\n        uses: github/codeql-action/autobuild@v4\n\n      - name: Perform CodeQL Analysis\n        uses: github/codeql-action/analyze@v4\n"
  },
  {
    "path": ".github/workflows/dispatch.yaml",
    "content": "name: Slash Command Dispatch\n\non:\n  issue_comment:\n    types: [created]\n\npermissions:\n  issues: write\n  pull-requests: write\n  actions: write\n  contents: write\n\njobs:\n  dispatch:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: peter-evans/slash-command-dispatch@v5\n        with:\n          token: ${{ secrets.GITHUB_TOKEN }}\n          commands: |\n            release\n          permission: write\n"
  },
  {
    "path": ".github/workflows/publish.yaml",
    "content": "name: Publish react-epic-spinners\n\non:\n  pull_request:\n    types: [closed]\n    branches:\n      - main\n\njobs:\n  build:\n    if: |\n      github.event.pull_request.merged == true &&\n      contains(github.event.pull_request.labels.*.name, 'release')\n    runs-on: ubuntu-latest\n    outputs:\n      version: ${{ steps.version.outputs.version }}\n    permissions:\n      contents: read\n    steps:\n      - uses: actions/checkout@v6\n\n      - uses: voidzero-dev/setup-vp@v1\n        with:\n          node-version: \"24\"\n          cache: true\n\n      - run: vp install\n      - run: vp pack\n\n      - name: Extract version\n        id: version\n        run: |\n          VERSION=$(jq -r .version package.json)\n          echo \"version=$VERSION\" >> $GITHUB_OUTPUT\n\n  publish-npm:\n    needs: build\n    runs-on: ubuntu-latest\n    environment: Publish\n    permissions:\n      contents: read\n      id-token: write\n    steps:\n      - uses: actions/checkout@v6\n\n      - uses: voidzero-dev/setup-vp@v1\n        with:\n          node-version: \"24\"\n          cache: true\n\n      - run: vp install\n      - run: vp pack\n\n      - uses: actions/setup-node@v6\n        with:\n          node-version: lts/*\n          registry-url: \"https://registry.npmjs.org\"\n\n      - name: Publish to npm\n        run: npm publish --provenance --access public --ignore-scripts\n\n  create-release:\n    needs: [build, publish-npm]\n    runs-on: ubuntu-latest\n    permissions:\n      contents: write\n    steps:\n      - uses: actions/checkout@v6\n\n      - name: Create GitHub Release\n        uses: softprops/action-gh-release@v2\n        with:\n          tag_name: v${{ needs.build.outputs.version }}\n          name: Release v${{ needs.build.outputs.version }}\n          generate_release_notes: true\n        env:\n          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n"
  },
  {
    "path": ".github/workflows/release.yaml",
    "content": "name: Create Release PR\n\non:\n  repository_dispatch:\n    types: [release-command]\n\npermissions:\n  contents: write\n  pull-requests: write\n\njobs:\n  release:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout main\n        uses: actions/checkout@v6\n        with:\n          ref: main\n\n      - name: Extract version\n        run: |\n          CURRENT_VERSION=$(jq -r .version package.json)\n          IFS='.' read -ra VERSION_PARTS <<< \"$CURRENT_VERSION\"\n          MAJOR=${VERSION_PARTS[0]}\n          MINOR=${VERSION_PARTS[1]}\n          PATCH=${VERSION_PARTS[2]}\n\n          NAMED_VERSION=\"${{ github.event.client_payload.slash_command.args.named.version }}\"\n          RAW_ARGS=\"${{ github.event.client_payload.slash_command.args.all }}\"\n          RAW_ARGS=$(echo \"$RAW_ARGS\" | tr '[:upper:]' '[:lower:]')\n\n          if [[ -n \"$NAMED_VERSION\" ]]; then\n            VERSION=\"$NAMED_VERSION\"\n          elif [[ \"$RAW_ARGS\" == \"patch\" ]]; then\n            PATCH=$((PATCH + 1))\n          elif [[ \"$RAW_ARGS\" == \"minor\" ]]; then\n            MINOR=$((MINOR + 1))\n            PATCH=0\n          elif [[ \"$RAW_ARGS\" == \"major\" ]]; then\n            MAJOR=$((MAJOR + 1))\n            MINOR=0\n            PATCH=0\n          else\n            echo \"Invalid release argument: '$RAW_ARGS'\"\n            exit 1\n          fi\n\n          if [[ -z \"$VERSION\" ]]; then\n            VERSION=\"$MAJOR.$MINOR.$PATCH\"\n          fi\n\n          echo \"VERSION=$VERSION\" >> $GITHUB_ENV\n\n      - name: Bump version\n        run: |\n          npm version $VERSION --allow-same-version --no-git-tag-version --no-commit-hooks\n\n      - name: Create PR\n        uses: peter-evans/create-pull-request@v8\n        with:\n          token: ${{ secrets.GITHUB_TOKEN }}\n          base: main\n          branch: release-v${{ env.VERSION }}\n          title: \"Release v${{ env.VERSION }}\"\n          body: \"Automated release triggered by slash command\"\n          author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>\n          committer: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>\n          labels: \"release\"\n"
  },
  {
    "path": ".gitignore",
    "content": ".DS_Store\nnode_modules\npackage-lock.json\n.rpt2_cache\n*.log\ndist\n.vscode\n"
  },
  {
    "path": ".prettierrc",
    "content": "{\n  \"singleQuote\": true\n}\n"
  },
  {
    "path": ".vite-hooks/pre-commit",
    "content": "vp staged\n"
  },
  {
    "path": ".yarnrc.yml",
    "content": "nodeLinker: node-modules\n"
  },
  {
    "path": "LICENSE",
    "content": "The MIT License\n\nCopyright (c) Bond Akinmade\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# React Epic Spinners\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/react-epic-spinners\">\n    <img src=\"https://img.shields.io/npm/v/react-epic-spinners.svg\" alt=\"npm version\" />\n  </a>\n  <a href=\"https://github.com/bondz/react-epic-spinners/blob/master/LICENSE.md\">\n    <img src=\"https://img.shields.io/npm/l/react-epic-spinners.svg\" alt=\"license\" />\n  </a>\n  <a href=\"https://snyk.io/test/github/bondz/react-epic-spinners\">\n    <img src=\"https://snyk.io/test/github/bondz/react-epic-spinners/badge.svg\" alt=\"Vulnerability status\" />\n  </a>\n</p>\n\nThis library is the React implementation of Vue [epic-spinners](http://epic-spinners.epicmax.co/) by [EpicMax](https://github.com/epicmaxco/epic-spinners)\n\n[Epic Spinners with Bit](https://bitsrc.io/bondz/react-epic-spinners) - Disocver, play and install spinners.\n![scope preview](https://storage.googleapis.com/bit-assets/epic_spinners.png)\n\n## Installation\n\nUsing NPM\n\n```bash\nnpm install react-epic-spinners\n```\n\nOr Yarn\n\n```bash\nyarn add react-epic-spinners\n```\n\n## Demo\n\nAn online demo is available [here](https://bondz.github.io/react-epic-spinners/)\n\n## Usage\n\nAll components accept the following props\n\n- `size` `[number]`: (optional) specifies how large the spinner should be rendered\n- `color` `[string]`: (optional) defaults to `#fff`. Specifies the color of the spinner.\n- `animationDelay` `[number]`: (optional) specifies the timing of the spinner animation. Lower numbers mean the animations restart faster.\n- `className` `[string]`: (optional) add any additional class you want to the component\n- `style` `[object]`: (optional) a react component style object to additionally style the component\n\n### Examples\n\n```jsx\nimport { AtomSpinner } from 'react-epic-spinners'\n\n// In your render function or SFC return\n<AtomSpinner color=\"red\">\n```\n\n## Components\n\n> All components are named exports of the package.\n\n```jsx\nimport { ... } from 'react-epic-spinners'\n```\n\n- [AtomSpinner](/src/components/AtomSpinner.js)\n- [BreedingRhombusSpinner](/src/components/BreedingRhombusSpinner.js)\n- [CirclesToRhombusesSpinner](/src/components/CirclesToRhombusesSpinner.js)\n- [FingerprintSpinner](/src/components/FingerprintSpinner.js)\n- [FlowerSpinner](/src/components/FlowerSpinner.js)\n- [FulfillingBouncingCircleSpinner](/src/components/FulfillingBouncingCircleSpinner.js)\n- [FulfillingSquareSpinner](/src/components/FulfillingSquareSpinner.js)\n- [HalfCircleSpinner](/src/components/HalfCircleSpinner.js)\n- [HollowDotsSpinner](/src/components/HollowDotsSpinner.js)\n- [IntersectingCirclesSpinner](/src/components/IntersectingCirclesSpinner.js)\n- [LoopingRhombusesSpinner](/src/components/LoopingRhombusesSpinner.js)\n- [OrbitSpinner](/src/components/OrbitSpinner.js)\n- [PixelSpinner](/src/components/PixelSpinner.js)\n- [RadarSpinner](/src/components/RadarSpinner.js)\n- [ScalingSquaresSpinner](/src/components/ScalingSquaresSpinner.js)\n- [SelfBuildingSquareSpinner](/src/components/SelfBuildingSquareSpinner.js)\n- [SemipolarSpinner](/src/components/SemipolarSpinner.js)\n- [SpringSpinner](/src/components/SpringSpinner.js)\n- [SwappingSquaresSpinner](/src/components/SwappingSquaresSpinner.js)\n- [TrinityRingsSpinner](/src/components/TrinityRingsSpinner.js)\n\n### Known Issues\n\nBecause of some bugs with `flexbox` on Firefox, the following components may not render properly\n\n- ScalingSquaresSpinner\n- SwappingSquaresSpinner\n- TrinityRingsSpinner\n\nIf you know a fix for it, please send a PR :)\n\n## License\n\n[MIT](LICENSE).\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"react-epic-spinners\",\n  \"version\": \"0.6.0\",\n  \"description\": \"Reusable react implementation of epic-spinners using styled-components\",\n  \"keywords\": [\n    \"epic spinners\",\n    \"react\",\n    \"spinners\"\n  ],\n  \"license\": \"MIT\",\n  \"author\": \"Bond\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/bondz/react-epic-spinners\"\n  },\n  \"files\": [\n    \"dist\"\n  ],\n  \"type\": \"module\",\n  \"sideEffects\": false,\n  \"main\": \"dist/index.cjs\",\n  \"module\": \"dist/index.mjs\",\n  \"types\": \"./dist/index.d.mts\",\n  \"exports\": {\n    \".\": {\n      \"import\": {\n        \"types\": \"./dist/index.d.mts\",\n        \"default\": \"./dist/index.mjs\"\n      },\n      \"require\": {\n        \"types\": \"./dist/index.d.cts\",\n        \"default\": \"./dist/index.cjs\"\n      }\n    }\n  },\n  \"scripts\": {\n    \"prepare\": \"vp config\"\n  },\n  \"dependencies\": {\n    \"styled-components\": \">=2.4.0\"\n  },\n  \"devDependencies\": {\n    \"@types/react\": \"^18.0.0\",\n    \"@types/styled-components\": \"^5.1.36\",\n    \"prop-types\": \"^15.7.2\",\n    \"react\": \"18.3.1\",\n    \"react-dom\": \"^18.0.0\",\n    \"typescript\": \"^5.9.3\",\n    \"vite-plus\": \"latest\"\n  },\n  \"peerDependencies\": {\n    \"react\": \">=16.8.0\",\n    \"react-dom\": \">=16.8.0\"\n  },\n  \"resolutions\": {\n    \"react\": \"18.3.1\",\n    \"vite\": \"npm:@voidzero-dev/vite-plus-core@latest\",\n    \"vitest\": \"npm:@voidzero-dev/vite-plus-test@latest\"\n  },\n  \"packageManager\": \"yarn@4.13.0\"\n}\n"
  },
  {
    "path": "renovate.json",
    "content": "{\n  \"extends\": [\"config:base\"]\n}\n"
  },
  {
    "path": "src/components/AtomSpinner.tsx",
    "content": "import type { EpicSpinnerProps } from \"../types\";\nimport styled from \"styled-components\";\n\nconst Atom = styled.div<EpicSpinnerProps>`\n  height: ${(props) => props.size!}px;\n  width: ${(props) => props.size!}px;\n  overflow: hidden;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .spinner-inner {\n    position: relative;\n    display: block;\n    height: 100%;\n    width: 100%;\n  }\n\n  .spinner-circle {\n    display: block;\n    position: absolute;\n    color: ${(props) => props.color!};\n    font-size: calc(${(props) => props.size!}px * 0.24);\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  .spinner-line {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    animation-duration: ${(props) => props.animationDuration!}ms;\n    border-left-width: calc(${(props) => props.size!}px / 25);\n    border-top-width: calc(${(props) => props.size!}px / 25);\n    border-left-color: ${(props) => props.color!};\n    border-left-style: solid;\n    border-top-style: solid;\n    border-top-color: transparent;\n  }\n\n  .spinner-line:nth-child(1) {\n    animation: atom-spinner-animation-1 ${(props) => props.animationDuration!}ms linear infinite;\n    transform: rotateZ(120deg) rotateX(66deg) rotateZ(0deg);\n  }\n\n  .spinner-line:nth-child(2) {\n    animation: atom-spinner-animation-2 ${(props) => props.animationDuration!}ms linear infinite;\n    transform: rotateZ(240deg) rotateX(66deg) rotateZ(0deg);\n  }\n\n  .spinner-line:nth-child(3) {\n    animation: atom-spinner-animation-3 ${(props) => props.animationDuration!}ms linear infinite;\n    transform: rotateZ(360deg) rotateX(66deg) rotateZ(0deg);\n  }\n\n  @keyframes atom-spinner-animation-1 {\n    100% {\n      transform: rotateZ(120deg) rotateX(66deg) rotateZ(360deg);\n    }\n  }\n  @keyframes atom-spinner-animation-2 {\n    100% {\n      transform: rotateZ(240deg) rotateX(66deg) rotateZ(360deg);\n    }\n  }\n  @keyframes atom-spinner-animation-3 {\n    100% {\n      transform: rotateZ(360deg) rotateX(66deg) rotateZ(360deg);\n    }\n  }\n`;\n\nexport function AtomSpinner({\n  size = 60,\n  animationDuration = 1000,\n  color = \"#fff\",\n  className = \"\",\n  style,\n  ...props\n}: EpicSpinnerProps) {\n  return (\n    <Atom\n      size={size}\n      color={color}\n      animationDuration={animationDuration}\n      className={`atom-spinner${className ? \" \" + className : \"\"}`}\n      style={style}\n      {...props}\n    >\n      <div className=\"spinner-inner\">\n        <div className=\"spinner-line\" />\n        <div className=\"spinner-line\" />\n        <div className=\"spinner-line\" />\n        {/* Chrome renders little circles malformed */}\n        <div className=\"spinner-circle\">&#9679;</div>\n      </div>\n    </Atom>\n  );\n}\n\nexport default AtomSpinner;\n"
  },
  {
    "path": "src/components/BreedingRhombusSpinner.tsx",
    "content": "import type { EpicSpinnerProps } from \"../types\";\nimport styled from \"styled-components\";\n\nconst BreedingSpinner = styled.div<EpicSpinnerProps & { delayModifier: number }>`\n  height: ${(props) => props.size!}px;\n  width: ${(props) => props.size!}px;\n  position: relative;\n  transform: rotate(45deg);\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .rhombus {\n    height: calc(${(props) => props.size!}px / 7.5);\n    width: calc(${(props) => props.size!}px / 7.5);\n    animation-duration: ${(props) => props.animationDuration!}ms;\n    top: calc(${(props) => props.size!}px / 2.3077);\n    left: calc(${(props) => props.size!}px / 2.3077);\n    background-color: ${(props) => props.color!};\n    position: absolute;\n    animation-iteration-count: infinite;\n  }\n\n  .rhombus:nth-child(2n + 0) {\n    margin-right: 0;\n  }\n\n  .rhombus.child-1 {\n    animation-name: breeding-rhombus-spinner-animation-child-1;\n    animation-delay: calc(${(props) => props.delayModifier}ms * 1);\n  }\n\n  .rhombus.child-2 {\n    animation-name: breeding-rhombus-spinner-animation-child-2;\n    animation-delay: calc(${(props) => props.delayModifier}ms * 2);\n  }\n\n  .rhombus.child-3 {\n    animation-name: breeding-rhombus-spinner-animation-child-3;\n    animation-delay: calc(${(props) => props.delayModifier}ms * 3);\n  }\n\n  .rhombus.child-4 {\n    animation-name: breeding-rhombus-spinner-animation-child-4;\n    animation-delay: calc(${(props) => props.delayModifier}ms * 4);\n  }\n\n  .rhombus.child-5 {\n    animation-name: breeding-rhombus-spinner-animation-child-5;\n    animation-delay: calc(${(props) => props.delayModifier}ms * 5);\n  }\n\n  .rhombus.child-6 {\n    animation-name: breeding-rhombus-spinner-animation-child-6;\n    animation-delay: calc(${(props) => props.delayModifier}ms * 6);\n  }\n\n  .rhombus.child-7 {\n    animation-name: breeding-rhombus-spinner-animation-child-7;\n    animation-delay: calc(${(props) => props.delayModifier}ms * 7);\n  }\n\n  .rhombus.child-8 {\n    animation-name: breeding-rhombus-spinner-animation-child-8;\n    animation-delay: calc(${(props) => props.delayModifier}ms * 8);\n  }\n\n  .rhombus.big {\n    height: calc(${(props) => props.size!}px / 3);\n    width: calc(${(props) => props.size!}px / 3);\n    animation-duration: ${(props) => props.animationDuration!}ms;\n    top: calc(${(props) => props.size!}px / 3);\n    left: calc(${(props) => props.size!}px / 3);\n    background-color: ${(props) => props.color!};\n    animation: breeding-rhombus-spinner-animation-child-big ${(props) => props.animationDuration!}\n      infinite;\n    animation-delay: 0.5s;\n  }\n\n  @keyframes breeding-rhombus-spinner-animation-child-1 {\n    50% {\n      transform: translate(-325%, -325%);\n    }\n  }\n  @keyframes breeding-rhombus-spinner-animation-child-2 {\n    50% {\n      transform: translate(0, -325%);\n    }\n  }\n  @keyframes breeding-rhombus-spinner-animation-child-3 {\n    50% {\n      transform: translate(325%, -325%);\n    }\n  }\n  @keyframes breeding-rhombus-spinner-animation-child-4 {\n    50% {\n      transform: translate(325%, 0);\n    }\n  }\n  @keyframes breeding-rhombus-spinner-animation-child-5 {\n    50% {\n      transform: translate(325%, 325%);\n    }\n  }\n  @keyframes breeding-rhombus-spinner-animation-child-6 {\n    50% {\n      transform: translate(0, 325%);\n    }\n  }\n  @keyframes breeding-rhombus-spinner-animation-child-7 {\n    50% {\n      transform: translate(-325%, 325%);\n    }\n  }\n  @keyframes breeding-rhombus-spinner-animation-child-8 {\n    50% {\n      transform: translate(-325%, 0);\n    }\n  }\n  @keyframes breeding-rhombus-spinner-animation-child-big {\n    50% {\n      transform: scale(0.5);\n    }\n  }\n`;\n\nfunction generateRhombusChildren(num: number) {\n  return Array.from({ length: num }).map((val, index) => (\n    <div key={index} className={`rhombus child-${index + 1}`} />\n  ));\n}\n\nfunction BreedingRhombusSpinner({\n  size = 150,\n  color = \"#fff\",\n  animationDuration = 2000,\n  className = \"\",\n  style,\n  ...props\n}: EpicSpinnerProps) {\n  return (\n    <BreedingSpinner\n      size={size}\n      color={color}\n      animationDuration={animationDuration}\n      className={`breeding-rhombus-spinner${className ? \" \" + className : \"\"}`}\n      style={style}\n      delayModifier={animationDuration * 0.05}\n      {...props}\n    >\n      {generateRhombusChildren(8)}\n      <div className=\"rhombus big\" />\n    </BreedingSpinner>\n  );\n}\n\nexport default BreedingRhombusSpinner;\n"
  },
  {
    "path": "src/components/CirclesToRhombusesSpinner.tsx",
    "content": "import type { EpicSpinnerProps } from \"../types\";\nimport styled from \"styled-components\";\n\nconst CircleRhombus = styled.div<\n  EpicSpinnerProps & { circleMarginLeft: number; circleNum: number; delay: number }\n>`\n  height: ${(props) => props.size}px;\n  width: ${(props) => (props.size! + props.circleMarginLeft) * props.circleNum}px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .circle {\n    height: ${(props) => props.size}px;\n    width: ${(props) => props.size}px;\n    margin-left: ${(props) => props.circleMarginLeft}px;\n    transform: rotate(45deg);\n    border-radius: 10%;\n    border: 3px solid ${(props) => props.color};\n    overflow: hidden;\n    background: transparent;\n    animation: circles-to-rhombuses-animation ${(props) => props.animationDuration}ms linear\n      infinite;\n  }\n  .circle:nth-child(1) {\n    animation-delay: calc(${(props) => props.delay}ms * 1);\n    margin-left: 0;\n  }\n  .circle:nth-child(2) {\n    animation-delay: calc(${(props) => props.delay}ms * 2);\n  }\n  .circle:nth-child(3) {\n    animation-delay: calc(${(props) => props.delay}ms * 3);\n  }\n  @keyframes circles-to-rhombuses-animation {\n    0% {\n      border-radius: 10%;\n    }\n    17.5% {\n      border-radius: 10%;\n    }\n    50% {\n      border-radius: 100%;\n    }\n    93.5% {\n      border-radius: 10%;\n    }\n    100% {\n      border-radius: 10%;\n    }\n  }\n`;\n\nfunction generateRhombusChildren(num: number) {\n  return Array.from({ length: num }).map((val, index) => <div key={index} className=\"circle\" />);\n}\n\nfunction CirclesToRhombusesSpinner({\n  size = 15,\n  color = \"#fff\",\n  animationDuration = 1200,\n  className = \"\",\n  style,\n  ...props\n}: EpicSpinnerProps) {\n  const circleMarginLeft = size * 1.125;\n  const circleNum = 3;\n  const delay = 150;\n\n  return (\n    <CircleRhombus\n      size={size}\n      color={color}\n      animationDuration={animationDuration}\n      className={`circles-to-rhombuses-spinner${className ? \" \" + className : \"\"}`}\n      style={style}\n      circleMarginLeft={circleMarginLeft}\n      delay={delay}\n      circleNum={circleNum}\n      {...props}\n    >\n      {generateRhombusChildren(circleNum)}\n    </CircleRhombus>\n  );\n}\n\nexport default CirclesToRhombusesSpinner;\n"
  },
  {
    "path": "src/components/FingerprintSpinner.tsx",
    "content": "import type { EpicSpinnerProps } from \"../types\";\nimport styled from \"styled-components\";\n\nconst RingSpinner = styled.div<EpicSpinnerProps & { ringBase: number; containerPadding: number }>`\n  height: ${(props) => props.size!}px;\n  width: ${(props) => props.size!}px;\n  padding: ${(props) => props.containerPadding}px;\n  overflow: hidden;\n  position: relative;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .spinner-ring {\n    position: absolute;\n    border-radius: 50%;\n    border: 2px solid transparent;\n    border-top-color: ${(props) => props.color!};\n    animation: fingerprint-spinner-animation ${(props) => props.animationDuration!}ms\n      cubic-bezier(0.68, -0.75, 0.265, 1.75) infinite forwards;\n    margin: auto;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    top: 0;\n  }\n  .spinner-ring:nth-child(1) {\n    height: ${(props) => props.ringBase + 0 * props.ringBase}px;\n    width: ${(props) => props.ringBase + 0 * props.ringBase}px;\n    animation-delay: calc(50ms * 1);\n  }\n  .spinner-ring:nth-child(2) {\n    height: ${(props) => props.ringBase + 1 * props.ringBase}px;\n    width: ${(props) => props.ringBase + 1 * props.ringBase}px;\n    animation-delay: calc(50ms * 2);\n  }\n  .spinner-ring:nth-child(3) {\n    height: ${(props) => props.ringBase + 2 * props.ringBase}px;\n    width: ${(props) => props.ringBase + 2 * props.ringBase}px;\n    animation-delay: calc(50ms * 3);\n  }\n  .spinner-ring:nth-child(4) {\n    height: ${(props) => props.ringBase + 3 * props.ringBase}px;\n    width: ${(props) => props.ringBase + 3 * props.ringBase}px;\n    animation-delay: calc(50ms * 4);\n  }\n  .spinner-ring:nth-child(5) {\n    height: ${(props) => props.ringBase + 4 * props.ringBase}px;\n    width: ${(props) => props.ringBase + 4 * props.ringBase}px;\n    animation-delay: calc(50ms * 5);\n  }\n  .spinner-ring:nth-child(6) {\n    height: ${(props) => props.ringBase + 5 * props.ringBase}px;\n    width: ${(props) => props.ringBase + 5 * props.ringBase}px;\n    animation-delay: calc(50ms * 6);\n  }\n  .spinner-ring:nth-child(7) {\n    height: ${(props) => props.ringBase + 6 * props.ringBase}px;\n    width: ${(props) => props.ringBase + 6 * props.ringBase}px;\n    animation-delay: calc(50ms * 7);\n  }\n  .spinner-ring:nth-child(8) {\n    height: ${(props) => props.ringBase + 7 * props.ringBase}px;\n    width: ${(props) => props.ringBase + 7 * props.ringBase}px;\n    animation-delay: calc(50ms * 8);\n  }\n  .spinner-ring:nth-child(9) {\n    height: ${(props) => props.ringBase + 8 * props.ringBase}px;\n    width: ${(props) => props.ringBase + 8 * props.ringBase}px;\n    animation-delay: calc(50ms * 9);\n  }\n\n  @keyframes fingerprint-spinner-animation {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n`;\n\nfunction generateRings(num: number) {\n  return Array.from({ length: num }).map((val, index) => (\n    <div key={index} className=\"spinner-ring\" />\n  ));\n}\n\nfunction FingerprintSpinner({\n  size = 60,\n  color = \"#fff\",\n  animationDuration = 1500,\n  className = \"\",\n  style,\n  ...props\n}: EpicSpinnerProps) {\n  const ringsNum = 9;\n  const containerPadding = 2;\n  const outerRingSize = size - containerPadding * 2;\n  const ringBase = outerRingSize / ringsNum;\n\n  return (\n    <RingSpinner\n      size={size}\n      color={color}\n      animationDuration={animationDuration}\n      className={`fingerprint-spinner${className ? \" \" + className : \"\"}`}\n      style={style}\n      ringBase={ringBase}\n      containerPadding={containerPadding}\n      {...props}\n    >\n      {generateRings(ringsNum)}\n    </RingSpinner>\n  );\n}\n\nexport default FingerprintSpinner;\n"
  },
  {
    "path": "src/components/FlowerSpinner.tsx",
    "content": "import type { EpicSpinnerProps } from \"../types\";\nimport styled from \"styled-components\";\n\nconst Flower = styled.div<EpicSpinnerProps & { dotSize: number }>`\n  height: ${(props) => props.size!}px;\n  width: ${(props) => props.size!}px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .dots-container {\n    height: ${(props) => props.dotSize}px;\n    width: ${(props) => props.dotSize}px;\n  }\n  .smaller-dot {\n    background: ${(props) => props.color!};\n    height: 100%;\n    width: 100%;\n    border-radius: 50%;\n    animation: flower-spinner-smaller-dot-animation ${(props) => props.animationDuration!}ms 0s\n      infinite both;\n  }\n  .bigger-dot {\n    background: ${(props) => props.color!};\n    height: 100%;\n    width: 100%;\n    padding: 10%;\n    border-radius: 50%;\n    animation: flower-spinner-bigger-dot-animation ${(props) => props.animationDuration!}ms 0s\n      infinite both;\n  }\n  @keyframes flower-spinner-bigger-dot-animation {\n    0%,\n    100% {\n      box-shadow:\n        0px 0px 0px ${(props) => props.color!},\n        0px 0px 0px ${(props) => props.color!},\n        0px 0px 0px ${(props) => props.color!},\n        0px 0px 0px ${(props) => props.color!},\n        0px 0px 0px ${(props) => props.color!},\n        0px 0px 0px ${(props) => props.color!},\n        0px 0px 0px ${(props) => props.color!},\n        0px 0px 0px ${(props) => props.color!};\n    }\n    50% {\n      transform: rotate(180deg);\n    }\n    25%,\n    75% {\n      box-shadow:\n        ${(props) => props.dotSize * 2.6}px 0 0 ${(props) => props.color!},\n        -${(props) => props.dotSize * 2.6}px 0 0 ${(props) => props.color!},\n        0 ${(props) => props.dotSize * 2.6}px 0 ${(props) => props.color!},\n        0 -${(props) => props.dotSize * 2.6}px 0 ${(props) => props.color!},\n        ${(props) => props.dotSize * 1.9}px -${(props) => props.dotSize * 1.9}px 0\n          ${(props) => props.color!},\n        ${(props) => props.dotSize * 1.9}px ${(props) => props.dotSize * 1.9}px 0\n          ${(props) => props.color!},\n        -${(props) => props.dotSize * 1.9}px -${(props) => props.dotSize * 1.9}px 0\n          ${(props) => props.color!},\n        -${(props) => props.dotSize * 1.9}px ${(props) => props.dotSize * 1.9}px 0\n          ${(props) => props.color!};\n    }\n    100% {\n      transform: rotate(360deg);\n      box-shadow:\n        0px 0px 0px ${(props) => props.color!},\n        0px 0px 0px ${(props) => props.color!},\n        0px 0px 0px ${(props) => props.color!},\n        0px 0px 0px ${(props) => props.color!},\n        0px 0px 0px ${(props) => props.color!},\n        0px 0px 0px ${(props) => props.color!},\n        0px 0px 0px ${(props) => props.color!},\n        0px 0px 0px ${(props) => props.color!};\n    }\n  }\n  @keyframes flower-spinner-smaller-dot-animation {\n    0%,\n    100% {\n      box-shadow:\n        0px 0px 0px ${(props) => props.color!},\n        0px 0px 0px ${(props) => props.color!},\n        0px 0px 0px ${(props) => props.color!},\n        0px 0px 0px ${(props) => props.color!},\n        0px 0px 0px ${(props) => props.color!},\n        0px 0px 0px ${(props) => props.color!},\n        0px 0px 0px ${(props) => props.color!},\n        0px 0px 0px ${(props) => props.color!};\n    }\n    25%,\n    75% {\n      box-shadow:\n        ${(props) => props.dotSize * 1.4}px 0 0 ${(props) => props.color!},\n        -${(props) => props.dotSize * 1.4}px 0 0 ${(props) => props.color!},\n        0 ${(props) => props.dotSize * 1.4}px 0 ${(props) => props.color!},\n        0 -${(props) => props.dotSize * 1.4}px 0 ${(props) => props.color!},\n        ${(props) => props.dotSize}px -${(props) => props.dotSize}px 0 ${(props) => props.color!},\n        ${(props) => props.dotSize}px ${(props) => props.dotSize}px 0 ${(props) => props.color!},\n        -${(props) => props.dotSize}px -${(props) => props.dotSize}px 0 ${(props) => props.color!},\n        -${(props) => props.dotSize}px ${(props) => props.dotSize}px 0 ${(props) => props.color!};\n    }\n    100% {\n      box-shadow:\n        0px 0px 0px ${(props) => props.color!},\n        0px 0px 0px ${(props) => props.color!},\n        0px 0px 0px ${(props) => props.color!},\n        0px 0px 0px ${(props) => props.color!},\n        0px 0px 0px ${(props) => props.color!},\n        0px 0px 0px ${(props) => props.color!},\n        0px 0px 0px ${(props) => props.color!},\n        0px 0px 0px ${(props) => props.color!};\n    }\n  }\n`;\n\nfunction FlowerSpinner({\n  size = 70,\n  color = \"#fff\",\n  animationDuration = 2500,\n  className = \"\",\n  style,\n  ...props\n}: EpicSpinnerProps) {\n  const dotSize = size / 7;\n\n  return (\n    <Flower\n      size={size}\n      color={color}\n      animationDuration={animationDuration}\n      className={`flower-spinner${className ? \" \" + className : \"\"}`}\n      style={style}\n      dotSize={dotSize}\n      {...props}\n    >\n      <div className=\"dots-container\">\n        <div className=\"bigger-dot\">\n          <div className=\"smaller-dot\" />\n        </div>\n      </div>\n    </Flower>\n  );\n}\n\nexport default FlowerSpinner;\n"
  },
  {
    "path": "src/components/FulfillingBouncingCircleSpinner.tsx",
    "content": "import type { EpicSpinnerProps } from \"../types\";\nimport styled from \"styled-components\";\n\nconst BouncingCircle = styled.div<EpicSpinnerProps>`\n  height: ${(props) => props.size!}px;\n  width: ${(props) => props.size!}px;\n  position: relative;\n  animation: fulfilling-bouncing-circle-spinner-animation infinite\n    ${(props) => props.animationDuration!}ms ease;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .orbit {\n    height: ${(props) => props.size!}px;\n    width: ${(props) => props.size!}px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    border-radius: 50%;\n    border: calc(${(props) => props.size!}px * 0.03) solid ${(props) => props.color!};\n    animation: fulfilling-bouncing-circle-spinner-orbit-animation infinite\n      ${(props) => props.animationDuration!}ms ease;\n  }\n  .circle {\n    height: ${(props) => props.size!}px;\n    width: ${(props) => props.size!}px;\n    color: ${(props) => props.color!};\n    display: block;\n    border-radius: 50%;\n    position: relative;\n    border: calc(${(props) => props.size!}px * 0.1) solid ${(props) => props.color!};\n    animation: fulfilling-bouncing-circle-spinner-circle-animation infinite\n      ${(props) => props.animationDuration!}ms ease;\n    transform: rotate(0deg) scale(1);\n  }\n  @keyframes fulfilling-bouncing-circle-spinner-animation {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes fulfilling-bouncing-circle-spinner-orbit-animation {\n    0% {\n      transform: scale(1);\n    }\n    50% {\n      transform: scale(1);\n    }\n    62.5% {\n      transform: scale(0.8);\n    }\n    75% {\n      transform: scale(1);\n    }\n    87.5% {\n      transform: scale(0.8);\n    }\n    100% {\n      transform: scale(1);\n    }\n  }\n  @keyframes fulfilling-bouncing-circle-spinner-circle-animation {\n    0% {\n      transform: scale(1);\n      border-color: transparent;\n      border-top-color: inherit;\n    }\n    16.7% {\n      border-color: transparent;\n      border-top-color: initial;\n      border-right-color: initial;\n    }\n    33.4% {\n      border-color: transparent;\n      border-top-color: inherit;\n      border-right-color: inherit;\n      border-bottom-color: inherit;\n    }\n    50% {\n      border-color: inherit;\n      transform: scale(1);\n    }\n    62.5% {\n      border-color: inherit;\n      transform: scale(1.4);\n    }\n    75% {\n      border-color: inherit;\n      transform: scale(1);\n      opacity: 1;\n    }\n    87.5% {\n      border-color: inherit;\n      transform: scale(1.4);\n    }\n    100% {\n      border-color: transparent;\n      border-top-color: inherit;\n      transform: scale(1);\n    }\n  }\n`;\n\nfunction FulfillingBouncingCircleSpinner({\n  size = 60,\n  color = \"#fff\",\n  animationDuration = 4000,\n  className = \"\",\n  style,\n  ...props\n}: EpicSpinnerProps) {\n  return (\n    <BouncingCircle\n      size={size}\n      color={color}\n      animationDuration={animationDuration}\n      className={`fulfilling-bouncing-circle-spinner${className ? \" \" + className : \"\"}`}\n      style={style}\n      {...props}\n    >\n      <div className=\"circle\" />\n      <div className=\"orbit\" />\n    </BouncingCircle>\n  );\n}\n\nexport default FulfillingBouncingCircleSpinner;\n"
  },
  {
    "path": "src/components/FulfillingSquareSpinner.tsx",
    "content": "import type { EpicSpinnerProps } from \"../types\";\nimport styled from \"styled-components\";\n\nconst SquareSpinner = styled.div<EpicSpinnerProps>`\n  height: ${(props) => props.size!}px;\n  width: ${(props) => props.size!}px;\n  position: relative;\n  border: 4px solid ${(props) => props.color!};\n  animation: fulfilling-square-spinner-animation ${(props) => props.animationDuration!}ms infinite\n    ease;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .spinner-inner {\n    vertical-align: top;\n    display: inline-block;\n    background-color: ${(props) => props.color!};\n    width: 100%;\n    opacity: 1;\n    animation: fulfilling-square-spinner-inner-animation ${(props) => props.animationDuration!}ms\n      infinite ease-in;\n  }\n\n  @keyframes fulfilling-square-spinner-animation {\n    0% {\n      transform: rotate(0deg);\n    }\n    25% {\n      transform: rotate(180deg);\n    }\n    50% {\n      transform: rotate(180deg);\n    }\n    75% {\n      transform: rotate(360deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  @keyframes fulfilling-square-spinner-inner-animation {\n    0% {\n      height: 0%;\n    }\n    25% {\n      height: 0%;\n    }\n    50% {\n      height: 100%;\n    }\n    75% {\n      height: 100%;\n    }\n    100% {\n      height: 0%;\n    }\n  }\n`;\n\nfunction FulfillingSquareSpinner({\n  size = 50,\n  color = \"#fff\",\n  animationDuration = 4000,\n  className = \"\",\n  style,\n  ...props\n}: EpicSpinnerProps) {\n  return (\n    <SquareSpinner\n      size={size}\n      color={color}\n      animationDuration={animationDuration}\n      className={`fulfilling-square-spinner${className ? \" \" + className : \"\"}`}\n      style={style}\n      {...props}\n    >\n      <div className=\"spinner-inner\" />\n    </SquareSpinner>\n  );\n}\n\nexport default FulfillingSquareSpinner;\n"
  },
  {
    "path": "src/components/HalfCircleSpinner.tsx",
    "content": "import type { EpicSpinnerProps } from \"../types\";\nimport styled from \"styled-components\";\n\nconst HalfSpinner = styled.div<EpicSpinnerProps>`\n  width: ${(props) => props.size!}px;\n  height: ${(props) => props.size!}px;\n  border-radius: 100%;\n  position: relative;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .circle {\n    content: \"\";\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: 100%;\n    border: calc(${(props) => props.size!}px / 10) solid transparent;\n  }\n  .circle.circle-1 {\n    border-top-color: ${(props) => props.color!};\n    animation: half-circle-spinner-animation ${(props) => props.animationDuration!}ms infinite;\n  }\n  .circle.circle-2 {\n    border-bottom-color: ${(props) => props.color!};\n    animation: half-circle-spinner-animation ${(props) => props.animationDuration!}ms infinite\n      alternate;\n  }\n  @keyframes half-circle-spinner-animation {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n`;\n\nfunction HalfCircleSpinner({\n  size = 60,\n  color = \"#fff\",\n  animationDuration = 1000,\n  className = \"\",\n  style,\n  ...props\n}: EpicSpinnerProps) {\n  return (\n    <HalfSpinner\n      size={size}\n      color={color}\n      animationDuration={animationDuration}\n      className={`half-circle-spinner${className ? \" \" + className : \"\"}`}\n      style={style}\n      {...props}\n    >\n      <div className=\"circle circle-1\" />\n      <div className=\"circle circle-2\" />\n    </HalfSpinner>\n  );\n}\n\nexport default HalfCircleSpinner;\n"
  },
  {
    "path": "src/components/HollowDotsSpinner.tsx",
    "content": "import type { EpicSpinnerProps } from \"../types\";\nimport styled from \"styled-components\";\n\nconst HollowSpinner = styled.div<EpicSpinnerProps & { animationDelay: number; dotsNum: number }>`\n  height: ${(props) => props.size!}px;\n  width: ${(props) => 2 * props.size! * props.dotsNum}px;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .dot {\n    width: ${(props) => props.size!}px;\n    height: ${(props) => props.size!}px;\n    margin: 0 calc(${(props) => props.size!}px / 2);\n    border: calc(${(props) => props.size!}px / 5) solid ${(props) => props.color!};\n    border-radius: 50%;\n    float: left;\n    transform: scale(0);\n    animation: hollow-dots-spinner-animation ${(props) => props.animationDuration!}ms ease infinite\n      0ms;\n  }\n  .dot:nth-child(1) {\n    animation-delay: calc(${(props) => props.animationDelay}ms * 1);\n  }\n  .dot:nth-child(2) {\n    animation-delay: calc(${(props) => props.animationDelay}ms * 2);\n  }\n  .dot:nth-child(3) {\n    animation-delay: calc(${(props) => props.animationDelay}ms * 3);\n  }\n  @keyframes hollow-dots-spinner-animation {\n    50% {\n      transform: scale(1);\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n  }\n`;\n\nfunction generateDots(num: number) {\n  return Array.from({ length: num }).map((val, index) => <div key={index} className=\"dot\" />);\n}\n\nfunction HollowDotsSpinner({\n  size = 15,\n  color = \"#fff\",\n  animationDuration = 1000,\n  className = \"\",\n  style,\n  ...props\n}: EpicSpinnerProps) {\n  const dotsNum = 3;\n  const animationDelay = animationDuration * 0.3;\n\n  return (\n    <HollowSpinner\n      size={size}\n      color={color}\n      animationDuration={animationDuration}\n      className={`hollow-dots-spinner${className ? \" \" + className : \"\"}`}\n      style={style}\n      dotsNum={dotsNum}\n      animationDelay={animationDelay}\n      {...props}\n    >\n      {generateDots(dotsNum)}\n    </HollowSpinner>\n  );\n}\n\nexport default HollowDotsSpinner;\n"
  },
  {
    "path": "src/components/IntersectingCirclesSpinner.tsx",
    "content": "import type { EpicSpinnerProps } from \"../types\";\nimport styled from \"styled-components\";\n\nconst IntersectingCircles = styled.div<EpicSpinnerProps & { circleSize: number }>`\n  height: ${(props) => props.size!}px;\n  width: ${(props) => props.size!}px;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .spinnerBlock {\n    animation: intersecting-circles-spinners-animation ${(props) => props.animationDuration!}ms\n      linear infinite;\n    transform-origin: center;\n    display: block;\n    height: ${(props) => props.circleSize}px;\n    width: ${(props) => props.circleSize}px;\n  }\n  .circle {\n    display: block;\n    border: 2px solid ${(props) => props.color!};\n    border-radius: 50%;\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    left: 0;\n    top: 0;\n  }\n  .circle:nth-child(1) {\n    left: 0;\n    top: 0;\n  }\n  .circle:nth-child(2) {\n    left: ${(props) => props.circleSize * -0.36}px;\n    top: ${(props) => props.circleSize * 0.2}px;\n  }\n  .circle:nth-child(3) {\n    left: ${(props) => props.circleSize * -0.36}px;\n    top: ${(props) => props.circleSize * -0.2}px;\n  }\n  .circle:nth-child(4) {\n    left: 0;\n    top: ${(props) => props.circleSize * -0.36}px;\n  }\n  .circle:nth-child(5) {\n    left: ${(props) => props.circleSize * 0.36}px;\n    top: ${(props) => props.circleSize * -0.2}px;\n  }\n  .circle:nth-child(6) {\n    left: ${(props) => props.circleSize * 0.36}px;\n    top: ${(props) => props.circleSize * 0.2}px;\n  }\n  .circle:nth-child(7) {\n    left: 0;\n    top: ${(props) => props.circleSize * 0.36}px;\n  }\n  @keyframes intersecting-circles-spinners-animation {\n    from {\n      transform: rotate(0deg);\n    }\n    to {\n      transform: rotate(360deg);\n    }\n  }\n`;\n\nfunction generateCircles(num: number) {\n  return Array.from({ length: num }).map((val, index) => <span key={index} className=\"circle\" />);\n}\n\nfunction IntersectingCirclesSpinner({\n  size = 70,\n  color = \"#fff\",\n  animationDuration = 1200,\n  className = \"\",\n  style,\n  ...props\n}: EpicSpinnerProps) {\n  const circleSize = size / 2;\n\n  return (\n    <IntersectingCircles\n      size={size}\n      color={color}\n      animationDuration={animationDuration}\n      className={`intersecting-circles-spinner${className ? \" \" + className : \"\"}`}\n      style={style}\n      circleSize={circleSize}\n      {...props}\n    >\n      <div className=\"spinnerBlock\">{generateCircles(7)}</div>\n    </IntersectingCircles>\n  );\n}\n\nexport default IntersectingCirclesSpinner;\n"
  },
  {
    "path": "src/components/LoopingRhombusesSpinner.tsx",
    "content": "import type { EpicSpinnerProps } from \"../types\";\nimport styled from \"styled-components\";\n\nconst LoadingRhombus = styled.div<EpicSpinnerProps>`\n  width: ${(props) => props.size! * 4}px;\n  height: ${(props) => props.size!}px;\n  position: relative;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .rhombus {\n    height: ${(props) => props.size!}px;\n    width: ${(props) => props.size!}px;\n    background-color: ${(props) => props.color!};\n    left: ${(props) => props.size! * 4}px;\n    position: absolute;\n    margin: 0 auto;\n    border-radius: 2px;\n    transform: translateY(0) rotate(45deg) scale(0);\n    animation: looping-rhombuses-spinner-animation ${(props) => props.animationDuration!}ms linear\n      infinite;\n  }\n  .rhombus:nth-child(1) {\n    animation-delay: calc(${(props) => props.animationDuration!}ms * 1 / -1.5);\n  }\n  .rhombus:nth-child(2) {\n    animation-delay: calc(${(props) => props.animationDuration!}ms * 2 / -1.5);\n  }\n  .rhombus:nth-child(3) {\n    animation-delay: calc(${(props) => props.animationDuration!}ms * 3 / -1.5);\n  }\n  @keyframes looping-rhombuses-spinner-animation {\n    0% {\n      transform: translateX(0) rotate(45deg) scale(0);\n    }\n    50% {\n      transform: translateX(-233%) rotate(45deg) scale(1);\n    }\n    100% {\n      transform: translateX(-466%) rotate(45deg) scale(0);\n    }\n  }\n`;\n\nfunction generateSpinners(num: number) {\n  return Array.from({ length: num }).map((val, index) => <div key={index} className=\"rhombus\" />);\n}\n\nfunction LoopingRhombusesSpinner({\n  size = 15,\n  color = \"#fff\",\n  animationDuration = 2500,\n  className = \"\",\n  style,\n  ...props\n}: EpicSpinnerProps) {\n  const num = 3;\n\n  return (\n    <LoadingRhombus\n      size={size}\n      color={color}\n      animationDuration={animationDuration}\n      className={`looping-rhombuses-spinner${className ? \" \" + className : \"\"}`}\n      style={style}\n      {...props}\n    >\n      {generateSpinners(num)}\n    </LoadingRhombus>\n  );\n}\n\nexport default LoopingRhombusesSpinner;\n"
  },
  {
    "path": "src/components/OrbitSpinner.tsx",
    "content": "import type { EpicSpinnerProps } from \"../types\";\nimport styled from \"styled-components\";\n\nconst Orbit = styled.div<EpicSpinnerProps>`\n  height: ${(props) => props.size!}px;\n  width: ${(props) => props.size!}px;\n  border-radius: 50%;\n  perspective: 800px;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .orbit {\n    position: absolute;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n  }\n  .orbit:nth-child(1) {\n    left: 0%;\n    top: 0%;\n    animation: orbit-spinner-orbit-one-animation ${(props) => props.animationDuration!}ms linear\n      infinite;\n    border-bottom: 3px solid ${(props) => props.color!};\n  }\n  .orbit:nth-child(2) {\n    right: 0%;\n    top: 0%;\n    animation: orbit-spinner-orbit-two-animation ${(props) => props.animationDuration!}ms linear\n      infinite;\n    border-right: 3px solid ${(props) => props.color!};\n  }\n  .orbit:nth-child(3) {\n    right: 0%;\n    bottom: 0%;\n    animation: orbit-spinner-orbit-three-animation ${(props) => props.animationDuration!}ms linear\n      infinite;\n    border-top: 3px solid ${(props) => props.color!};\n  }\n  @keyframes orbit-spinner-orbit-one-animation {\n    0% {\n      transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);\n    }\n    100% {\n      transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);\n    }\n  }\n  @keyframes orbit-spinner-orbit-two-animation {\n    0% {\n      transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);\n    }\n    100% {\n      transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);\n    }\n  }\n  @keyframes orbit-spinner-orbit-three-animation {\n    0% {\n      transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);\n    }\n    100% {\n      transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);\n    }\n  }\n`;\n\nfunction OrbitSpinner({\n  size = 50,\n  color = \"#fff\",\n  animationDuration = 1000,\n  className = \"\",\n  style,\n  ...props\n}: EpicSpinnerProps) {\n  return (\n    <Orbit\n      size={size}\n      color={color}\n      animationDuration={animationDuration}\n      className={`orbit-spinner${className ? \" \" + className : \"\"}`}\n      style={style}\n      {...props}\n    >\n      <div className=\"orbit one\" />\n      <div className=\"orbit two\" />\n      <div className=\"orbit three\" />\n    </Orbit>\n  );\n}\n\nexport default OrbitSpinner;\n"
  },
  {
    "path": "src/components/PixelSpinner.tsx",
    "content": "import type { EpicSpinnerProps } from \"../types\";\nimport styled from \"styled-components\";\n\nconst Pixels = styled.div<EpicSpinnerProps & { pixelSize: number }>`\n  height: ${(props) => props.size!}px;\n  width: ${(props) => props.size!}px;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .pixel-spinner-inner {\n    width: ${(props) => props.pixelSize}px;\n    height: ${(props) => props.pixelSize}px;\n    background-color: ${(props) => props.color!};\n    color: ${(props) => props.color!};\n\n    box-shadow:\n      ${(props) => props.pixelSize * 1.5}px ${(props) => props.pixelSize * 1.5}px 0 0,\n      ${(props) => props.pixelSize * -1.5}px ${(props) => props.pixelSize * -1.5}px 0 0,\n      ${(props) => props.pixelSize * 1.5}px ${(props) => props.pixelSize * -1.5}px 0 0,\n      ${(props) => props.pixelSize * -1.5}px ${(props) => props.pixelSize * 1.5}px 0 0,\n      0 ${(props) => props.pixelSize * 1.5}px 0 0,\n      ${(props) => props.pixelSize * 1.5}px 0 0 0,\n      ${(props) => props.pixelSize * -1.5}px 0 0 0,\n      0 ${(props) => props.pixelSize * -1.5}px 0 0;\n    animation: pixel-spinner-animation ${(props) => props.animationDuration!}ms linear infinite;\n  }\n\n  @keyframes pixel-spinner-animation {\n    50% {\n      box-shadow:\n        ${(props) => props.pixelSize * 2}px ${(props) => props.pixelSize * 2}px 0 0,\n        ${(props) => props.pixelSize * -2}px ${(props) => props.pixelSize * -2}px 0 0,\n        ${(props) => props.pixelSize * 2}px ${(props) => props.pixelSize * -2}px 0 0,\n        ${(props) => props.pixelSize * -2}px ${(props) => props.pixelSize * 2}px 0 0,\n        0 ${(props) => props.pixelSize}px 0 0,\n        ${(props) => props.pixelSize}px 0 0 0,\n        ${(props) => props.pixelSize * -1}px 0 0 0,\n        0 ${(props) => props.pixelSize * -1}px 0 0;\n    }\n    75% {\n      box-shadow:\n        ${(props) => props.pixelSize * 2}px ${(props) => props.pixelSize * 2}px 0 0,\n        ${(props) => props.pixelSize * -2}px ${(props) => props.pixelSize * -2}px 0 0,\n        ${(props) => props.pixelSize * 2}px ${(props) => props.pixelSize * -2}px 0 0,\n        ${(props) => props.pixelSize * -2}px ${(props) => props.pixelSize * 2}px 0 0,\n        0 ${(props) => props.pixelSize}px 0 0,\n        ${(props) => props.pixelSize}px 0 0 0,\n        ${(props) => props.pixelSize * -1}px 0 0 0,\n        0 ${(props) => props.pixelSize * -1}px 0 0;\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n`;\n\nfunction PixelSpinner({\n  size = 70,\n  color = \"#fff\",\n  animationDuration = 1500,\n  className = \"\",\n  style,\n  ...props\n}: EpicSpinnerProps) {\n  const pixelSize = size / 7;\n\n  return (\n    <Pixels\n      size={size}\n      color={color}\n      animationDuration={animationDuration}\n      className={`pixel-spinner${className ? \" \" + className : \"\"}`}\n      style={style}\n      pixelSize={pixelSize}\n      {...props}\n    >\n      <div className=\"pixel-spinner-inner\" />\n    </Pixels>\n  );\n}\n\nexport default PixelSpinner;\n"
  },
  {
    "path": "src/components/RadarSpinner.tsx",
    "content": "import type { EpicSpinnerProps } from \"../types\";\nimport styled from \"styled-components\";\n\nconst Radar = styled.div<EpicSpinnerProps & { borderWidth: number }>`\n  height: ${(props) => props.size!}px;\n  width: ${(props) => props.size!}px;\n  position: relative;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .circle {\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    top: 0;\n    left: 0;\n    animation: radar-spinner-animation ${(props) => props.animationDuration!}ms infinite;\n  }\n  .circle:nth-child(1) {\n    padding: ${(props) => props.borderWidth * 2 * 0}px;\n    animation-delay: ${(props) => props.animationDuration! * 0.15}ms;\n  }\n  .circle:nth-child(2) {\n    padding: ${(props) => props.borderWidth * 2 * 1}px;\n    animation-delay: ${(props) => props.animationDuration! * 0.15}ms;\n  }\n  .circle:nth-child(3) {\n    padding: ${(props) => props.borderWidth * 2 * 2}px;\n    animation-delay: ${(props) => props.animationDuration! * 0.15}ms;\n  }\n  .circle:nth-child(4) {\n    padding: ${(props) => props.borderWidth * 2 * 3}px;\n    animation-delay: 0ms;\n  }\n  .circle-inner,\n  .circle-inner-container {\n    height: 100%;\n    width: 100%;\n    border-radius: 50%;\n    border: ${(props) => props.borderWidth}px solid transparent;\n  }\n  .circle-inner {\n    border-left-color: ${(props) => props.color!};\n    border-right-color: ${(props) => props.color!};\n  }\n  @keyframes radar-spinner-animation {\n    50% {\n      transform: rotate(180deg);\n    }\n    100% {\n      transform: rotate(0deg);\n    }\n  }\n`;\n\nfunction generateSpinners(num: number) {\n  return Array.from({ length: num }).map((val, index) => (\n    <div key={index} className=\"circle\">\n      <div className=\"circle-inner-container\">\n        <div className=\"circle-inner\" />\n      </div>\n    </div>\n  ));\n}\n\nfunction RadarSpinner({\n  size = 110,\n  color = \"#fff\",\n  animationDuration = 2000,\n  className = \"\",\n  style,\n  ...props\n}: EpicSpinnerProps) {\n  const borderWidth = (size * 5) / 110;\n\n  return (\n    <Radar\n      size={size}\n      color={color}\n      animationDuration={animationDuration}\n      className={`radar-spinner${className ? \" \" + className : \"\"}`}\n      style={style}\n      borderWidth={borderWidth}\n      {...props}\n    >\n      {generateSpinners(4)}\n    </Radar>\n  );\n}\n\nexport default RadarSpinner;\n"
  },
  {
    "path": "src/components/ScalingSquaresSpinner.tsx",
    "content": "import type { EpicSpinnerProps } from \"../types\";\nimport styled from \"styled-components\";\n\nconst ScalingSquares = styled.div<EpicSpinnerProps>`\n  height: ${(props) => props.size!}px;\n  width: ${(props) => props.size!}px;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  animation: scaling-squares-animation ${(props) => props.animationDuration!}ms;\n  animation-iteration-count: infinite;\n  transform: rotate(0deg);\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .square {\n    height: calc(${(props) => props.size!}px * 0.25 / 1.3);\n    width: calc(${(props) => props.size!}px * 0.25 / 1.3);\n    margin-right: auto;\n    margin-left: auto;\n    border: calc(${(props) => props.size!}px * 0.04 / 1.3) solid ${(props) => props.color!};\n    position: absolute;\n    animation-duration: ${(props) => props.animationDuration!}ms;\n    animation-iteration-count: infinite;\n  }\n  .square:nth-child(1) {\n    animation-name: scaling-squares-spinner-animation-child-1;\n  }\n  .square:nth-child(2) {\n    animation-name: scaling-squares-spinner-animation-child-2;\n  }\n  .square:nth-child(3) {\n    animation-name: scaling-squares-spinner-animation-child-3;\n  }\n  .square:nth-child(4) {\n    animation-name: scaling-squares-spinner-animation-child-4;\n  }\n  @keyframes scaling-squares-animation {\n    50% {\n      transform: rotate(90deg);\n    }\n    100% {\n      transform: rotate(180deg);\n    }\n  }\n  @keyframes scaling-squares-spinner-animation-child-1 {\n    50% {\n      transform: translate(150%, 150%) scale(2, 2);\n    }\n  }\n  @keyframes scaling-squares-spinner-animation-child-2 {\n    50% {\n      transform: translate(-150%, 150%) scale(2, 2);\n    }\n  }\n  @keyframes scaling-squares-spinner-animation-child-3 {\n    50% {\n      transform: translate(-150%, -150%) scale(2, 2);\n    }\n  }\n  @keyframes scaling-squares-spinner-animation-child-4 {\n    50% {\n      transform: translate(150%, -150%) scale(2, 2);\n    }\n  }\n`;\n\nfunction generateSpinners(num: number) {\n  return Array.from({ length: num }).map((val, index) => <div key={index} className=\"square\" />);\n}\n\nfunction ScalingSquaresSpinner({\n  size = 65,\n  color = \"#fff\",\n  animationDuration = 1250,\n  className = \"\",\n  style,\n  ...props\n}: EpicSpinnerProps) {\n  return (\n    <ScalingSquares\n      size={size}\n      color={color}\n      animationDuration={animationDuration}\n      className={`scaling-squares-spinner${className ? \" \" + className : \"\"}`}\n      style={style}\n      {...props}\n    >\n      {generateSpinners(4)}\n    </ScalingSquares>\n  );\n}\n\nexport default ScalingSquaresSpinner;\n"
  },
  {
    "path": "src/components/SelfBuildingSquareSpinner.tsx",
    "content": "import type { EpicSpinnerProps } from \"../types\";\nimport styled from \"styled-components\";\n\nconst BuildingSquare = styled.div<EpicSpinnerProps & { initialTopPosition: number }>`\n  height: ${(props) => props.size!}px;\n  width: ${(props) => props.size!}px;\n  top: ${(props) => -1 * props.initialTopPosition}px;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .square {\n    height: ${(props) => props.size! / 4}px;\n    width: ${(props) => props.size! / 4}px;\n    top: ${(props) => -1 * props.initialTopPosition}px;\n    margin-right: calc(${(props) => props.size! / 4}px / 3);\n    margin-top: calc(${(props) => props.size! / 4}px / 3);\n    background: ${(props) => props.color!};\n    float: left;\n    position: relative;\n    opacity: 0;\n    animation: self-building-square-spinner ${(props) => props.animationDuration!}ms infinite;\n  }\n  .square:nth-child(1) {\n    animation-delay: calc(${(props) => props.animationDuration! * 0.05}ms * 6);\n  }\n  .square:nth-child(2) {\n    animation-delay: calc(${(props) => props.animationDuration! * 0.05}ms * 7);\n  }\n  .square:nth-child(3) {\n    animation-delay: calc(${(props) => props.animationDuration! * 0.05}ms * 8);\n  }\n  .square:nth-child(4) {\n    animation-delay: calc(${(props) => props.animationDuration! * 0.05}ms * 3);\n  }\n  .square:nth-child(5) {\n    animation-delay: calc(${(props) => props.animationDuration! * 0.05}ms * 4);\n  }\n  .square:nth-child(6) {\n    animation-delay: calc(${(props) => props.animationDuration! * 0.05}ms * 5);\n  }\n  .square:nth-child(7) {\n    animation-delay: calc(${(props) => props.animationDuration! * 0.05}ms * 0);\n  }\n  .square:nth-child(8) {\n    animation-delay: calc(${(props) => props.animationDuration! * 0.05}ms * 1);\n  }\n  .square:nth-child(9) {\n    animation-delay: calc(${(props) => props.animationDuration! * 0.05}ms * 2);\n  }\n  .clear {\n    clear: both;\n  }\n  @keyframes self-building-square-spinner {\n    0% {\n      opacity: 0;\n    }\n    5% {\n      opacity: 1;\n      top: 0;\n    }\n    50.9% {\n      opacity: 1;\n      top: 0;\n    }\n    55.9% {\n      opacity: 0;\n      top: inherit;\n    }\n  }\n`;\n\nfunction generateSpinners(num: number) {\n  return Array.from({ length: num }).map((val, index) => (\n    <div key={index} className={`square${index % 3 === 0 ? \" clear\" : \"\"}`} />\n  ));\n}\n\nfunction SelfBuildingSquareSpinner({\n  size = 40,\n  color = \"#fff\",\n  animationDuration = 6000,\n  className = \"\",\n  style,\n  ...props\n}: EpicSpinnerProps) {\n  const initialTopPosition = size / 6;\n\n  return (\n    <BuildingSquare\n      size={size}\n      color={color}\n      animationDuration={animationDuration}\n      className={`self-building-square-spinner${className ? \" \" + className : \"\"}`}\n      style={style}\n      initialTopPosition={initialTopPosition}\n      {...props}\n    >\n      {generateSpinners(9)}\n    </BuildingSquare>\n  );\n}\n\nexport default SelfBuildingSquareSpinner;\n"
  },
  {
    "path": "src/components/SemipolarSpinner.tsx",
    "content": "import type { EpicSpinnerProps } from \"../types\";\nimport styled from \"styled-components\";\n\nconst Semipolar = styled.div<EpicSpinnerProps>`\n  height: ${(props) => props.size!}px;\n  width: ${(props) => props.size!}px;\n  position: relative;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .ring {\n    border-radius: 50%;\n    position: absolute;\n    border: calc(${(props) => props.size!}px * 0.05) solid transparent;\n    border-top-color: ${(props) => props.color!};\n    border-left-color: ${(props) => props.color!};\n    animation: semipolar-spinner-animation ${(props) => props.animationDuration!}ms infinite;\n  }\n  .ring:nth-child(1) {\n    height: calc(${(props) => props.size!}px - ${(props) => props.size!}px * 0.2 * 0);\n    width: calc(${(props) => props.size!}px - ${(props) => props.size!}px * 0.2 * 0);\n    top: calc(${(props) => props.size!}px * 0.1 * 0);\n    left: calc(${(props) => props.size!}px * 0.1 * 0);\n    animation-delay: calc(${(props) => props.animationDuration!}ms * 0.1 * 4);\n    z-index: 5;\n  }\n  .ring:nth-child(2) {\n    height: calc(${(props) => props.size!}px - ${(props) => props.size!}px * 0.2 * 1);\n    width: calc(${(props) => props.size!}px - ${(props) => props.size!}px * 0.2 * 1);\n    top: calc(${(props) => props.size!}px * 0.1 * 1);\n    left: calc(${(props) => props.size!}px * 0.1 * 1);\n    animation-delay: calc(${(props) => props.animationDuration!}ms * 0.1 * 3);\n    z-index: 4;\n  }\n  .ring:nth-child(3) {\n    height: calc(${(props) => props.size!}px - ${(props) => props.size!}px * 0.2 * 2);\n    width: calc(${(props) => props.size!}px - ${(props) => props.size!}px * 0.2 * 2);\n    top: calc(${(props) => props.size!}px * 0.1 * 2);\n    left: calc(${(props) => props.size!}px * 0.1 * 2);\n    animation-delay: calc(${(props) => props.animationDuration!}ms * 0.1 * 2);\n    z-index: 3;\n  }\n  .ring:nth-child(4) {\n    height: calc(${(props) => props.size!}px - ${(props) => props.size!}px * 0.2 * 3);\n    width: calc(${(props) => props.size!}px - ${(props) => props.size!}px * 0.2 * 3);\n    top: calc(${(props) => props.size!}px * 0.1 * 3);\n    left: calc(${(props) => props.size!}px * 0.1 * 3);\n    animation-delay: calc(${(props) => props.animationDuration!}ms * 0.1 * 1);\n    z-index: 2;\n  }\n  .ring:nth-child(5) {\n    height: calc(${(props) => props.size!}px - ${(props) => props.size!}px * 0.2 * 4);\n    width: calc(${(props) => props.size!}px - ${(props) => props.size!}px * 0.2 * 4);\n    top: calc(${(props) => props.size!}px * 0.1 * 4);\n    left: calc(${(props) => props.size!}px * 0.1 * 4);\n    animation-delay: calc(${(props) => props.animationDuration!}ms * 0.1 * 0);\n    z-index: 1;\n  }\n  @keyframes semipolar-spinner-animation {\n    50% {\n      transform: rotate(360deg) scale(0.7);\n    }\n  }\n`;\n\nfunction generateSpinners(num: number) {\n  return Array.from({ length: num }).map((val, index) => <div key={index} className=\"ring\" />);\n}\n\nfunction SemipolarSpinner({\n  size = 65,\n  color = \"#fff\",\n  animationDuration = 2000,\n  className = \"\",\n  style,\n  ...props\n}: EpicSpinnerProps) {\n  return (\n    <Semipolar\n      size={size}\n      color={color}\n      animationDuration={animationDuration}\n      className={`semipolar-spinner${className ? \" \" + className : \"\"}`}\n      style={style}\n      {...props}\n    >\n      {generateSpinners(5)}\n    </Semipolar>\n  );\n}\n\nexport default SemipolarSpinner;\n"
  },
  {
    "path": "src/components/SpringSpinner.tsx",
    "content": "import type { EpicSpinnerProps } from \"../types\";\nimport styled from \"styled-components\";\n\nconst Spring = styled.div<EpicSpinnerProps>`\n  height: ${(props) => props.size!}px;\n  width: ${(props) => props.size!}px;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .spring-spinner-part {\n    overflow: hidden;\n    height: calc(${(props) => props.size!}px / 2);\n    width: ${(props) => props.size!}px;\n  }\n  .spring-spinner-part.bottom {\n    transform: rotate(180deg) scale(-1, 1);\n  }\n  .spring-spinner-rotator {\n    width: ${(props) => props.size!}px;\n    height: ${(props) => props.size!}px;\n    border: calc(${(props) => props.size!}px / 7) solid transparent;\n    border-right-color: ${(props) => props.color!};\n    border-top-color: ${(props) => props.color!};\n    border-radius: 50%;\n    box-sizing: border-box;\n    animation: spring-spinner-animation ${(props) => props.animationDuration!}ms ease-in-out\n      infinite;\n    transform: rotate(-200deg);\n  }\n  @keyframes spring-spinner-animation {\n    0% {\n      border-width: calc(${(props) => props.size!}px / 7);\n    }\n    25% {\n      border-width: calc(${(props) => props.size!}px / 23.33);\n    }\n    50% {\n      transform: rotate(115deg);\n      border-width: calc(${(props) => props.size!}px / 7);\n    }\n    75% {\n      border-width: calc(${(props) => props.size!}px / 23.33);\n    }\n    100% {\n      border-width: calc(${(props) => props.size!}px / 7);\n    }\n  }\n`;\n\nfunction SpringSpinner({\n  size = 70,\n  color = \"#fff\",\n  animationDuration = 3000,\n  className = \"\",\n  style,\n  ...props\n}: EpicSpinnerProps) {\n  return (\n    <Spring\n      size={size}\n      color={color}\n      animationDuration={animationDuration}\n      className={`spring-spinner${className ? \" \" + className : \"\"}`}\n      style={style}\n      {...props}\n    >\n      <div className=\"spring-spinner-part top\">\n        <div className=\"spring-spinner-rotator\" />\n      </div>\n      <div className=\"spring-spinner-part bottom\">\n        <div className=\"spring-spinner-rotator\" />\n      </div>\n    </Spring>\n  );\n}\n\nexport default SpringSpinner;\n"
  },
  {
    "path": "src/components/SwappingSquaresSpinner.tsx",
    "content": "import type { EpicSpinnerProps } from \"../types\";\nimport styled from \"styled-components\";\n\nconst SwappingSquare = styled.div<EpicSpinnerProps>`\n  height: ${(props) => props.size!}px;\n  width: ${(props) => props.size!}px;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .square {\n    height: calc(${(props) => props.size!}px * 0.25 / 1.3);\n    width: calc(${(props) => props.size!}px * 0.25 / 1.3);\n    animation-duration: ${(props) => props.animationDuration!}ms;\n    border: calc(${(props) => props.size!}px * 0.04 / 1.3) solid ${(props) => props.color!};\n    margin-right: auto;\n    margin-left: auto;\n    position: absolute;\n    animation-iteration-count: infinite;\n  }\n  .square:nth-child(1) {\n    animation-name: swapping-squares-animation-child-1;\n    animation-delay: ${(props) => props.animationDuration! * 0.5}ms;\n  }\n  .square:nth-child(2) {\n    animation-name: swapping-squares-animation-child-2;\n    animation-delay: 0ms;\n  }\n  .square:nth-child(3) {\n    animation-name: swapping-squares-animation-child-3;\n    animation-delay: ${(props) => props.animationDuration! * 0.5}ms;\n  }\n  .square:nth-child(4) {\n    animation-name: swapping-squares-animation-child-4;\n    animation-delay: 0ms;\n  }\n  @keyframes swapping-squares-animation-child-1 {\n    50% {\n      transform: translate(150%, 150%) scale(2, 2);\n    }\n  }\n  @keyframes swapping-squares-animation-child-2 {\n    50% {\n      transform: translate(-150%, 150%) scale(2, 2);\n    }\n  }\n  @keyframes swapping-squares-animation-child-3 {\n    50% {\n      transform: translate(-150%, -150%) scale(2, 2);\n    }\n  }\n  @keyframes swapping-squares-animation-child-4 {\n    50% {\n      transform: translate(150%, -150%) scale(2, 2);\n    }\n  }\n`;\n\nfunction generateSpinners(num: number) {\n  return Array.from({ length: num }).map((val, index) => <div key={index} className=\"square\" />);\n}\n\nfunction SwappingSquaresSpinner({\n  size = 65,\n  color = \"#fff\",\n  animationDuration = 1000,\n  className = \"\",\n  style,\n  ...props\n}: EpicSpinnerProps) {\n  return (\n    <SwappingSquare\n      size={size}\n      color={color}\n      animationDuration={animationDuration}\n      className={`swapping-squares-spinner${className ? \" \" + className : \"\"}`}\n      style={style}\n      {...props}\n    >\n      {generateSpinners(4)}\n    </SwappingSquare>\n  );\n}\n\nexport default SwappingSquaresSpinner;\n"
  },
  {
    "path": "src/components/TrinityRingsSpinner.tsx",
    "content": "import type { EpicSpinnerProps } from \"../types\";\nimport styled from \"styled-components\";\n\nconst Trinity = styled.div<EpicSpinnerProps & { outerWidth: number }>`\n  height: ${(props) => props.size!}px;\n  width: ${(props) => props.size!}px;\n  padding: 3px;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  overflow: hidden;\n  box-sizing: border-box;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .circle {\n    position: absolute;\n    display: block;\n    border-radius: 50%;\n    border: 3px solid ${(props) => props.color!};\n    opacity: 1;\n  }\n  .circle:nth-child(1) {\n    height: ${(props) => props.outerWidth}px;\n    width: ${(props) => props.outerWidth}px;\n    animation: trinity-rings-spinner-circle1-animation ${(props) => props.animationDuration!}ms\n      infinite linear;\n    border-width: 3px;\n  }\n  .circle:nth-child(2) {\n    height: calc(${(props) => props.outerWidth}px * 0.65);\n    width: calc(${(props) => props.outerWidth}px * 0.65);\n    animation: trinity-rings-spinner-circle2-animation ${(props) => props.animationDuration!}ms\n      infinite linear;\n    border-width: 2px;\n  }\n  .circle:nth-child(3) {\n    height: calc(${(props) => props.outerWidth}px * 0.1);\n    width: calc(${(props) => props.outerWidth}px * 0.1);\n    animation: trinity-rings-spinner-circle3-animation ${(props) => props.animationDuration!}ms\n      infinite linear;\n    border-width: 1px;\n  }\n  @keyframes trinity-rings-spinner-circle1-animation {\n    0% {\n      transform: rotateZ(20deg) rotateY(0deg);\n    }\n    100% {\n      transform: rotateZ(100deg) rotateY(360deg);\n    }\n  }\n  @keyframes trinity-rings-spinner-circle2-animation {\n    0% {\n      transform: rotateZ(100deg) rotateX(0deg);\n    }\n    100% {\n      transform: rotateZ(0deg) rotateX(360deg);\n    }\n  }\n  @keyframes trinity-rings-spinner-circle3-animation {\n    0% {\n      transform: rotateZ(100deg) rotateX(-360deg);\n    }\n    100% {\n      transform: rotateZ(-360deg) rotateX(360deg);\n    }\n  }\n`;\n\nfunction TrinityRingsSpinner({\n  size = 66,\n  color = \"#fff\",\n  animationDuration = 1500,\n  className = \"\",\n  style,\n  ...props\n}: EpicSpinnerProps) {\n  const containerPadding = 3;\n  const outerWidth = size - containerPadding * 2;\n\n  return (\n    <Trinity\n      size={size}\n      color={color}\n      animationDuration={animationDuration}\n      className={`trinity-rings-spinner${className ? \" \" + className : \"\"}`}\n      style={style}\n      outerWidth={outerWidth}\n      {...props}\n    >\n      <div className=\"circle circle1\" />\n      <div className=\"circle circle2\" />\n      <div className=\"circle circle3\" />\n    </Trinity>\n  );\n}\n\nexport default TrinityRingsSpinner;\n"
  },
  {
    "path": "src/index.ts",
    "content": "export type { EpicSpinnerProps } from \"./types\";\n\nexport { default as AtomSpinner } from \"./components/AtomSpinner\";\n\nexport { default as BreedingRhombusSpinner } from \"./components/BreedingRhombusSpinner\";\n\nexport { default as CirclesToRhombusesSpinner } from \"./components/CirclesToRhombusesSpinner\";\n\nexport { default as FingerprintSpinner } from \"./components/FingerprintSpinner\";\nexport { default as FlowerSpinner } from \"./components/FlowerSpinner\";\n\nexport { default as FulfillingBouncingCircleSpinner } from \"./components/FulfillingBouncingCircleSpinner\";\n\nexport { default as FulfillingSquareSpinner } from \"./components/FulfillingSquareSpinner\";\n\nexport { default as HalfCircleSpinner } from \"./components/HalfCircleSpinner\";\nexport { default as HollowDotsSpinner } from \"./components/HollowDotsSpinner\";\n\nexport { default as IntersectingCirclesSpinner } from \"./components/IntersectingCirclesSpinner\";\n\nexport { default as LoopingRhombusesSpinner } from \"./components/LoopingRhombusesSpinner\";\n\nexport { default as OrbitSpinner } from \"./components/OrbitSpinner\";\nexport { default as PixelSpinner } from \"./components/PixelSpinner\";\nexport { default as RadarSpinner } from \"./components/RadarSpinner\";\n\nexport { default as ScalingSquaresSpinner } from \"./components/ScalingSquaresSpinner\";\n\nexport { default as SelfBuildingSquareSpinner } from \"./components/SelfBuildingSquareSpinner\";\n\nexport { default as SemipolarSpinner } from \"./components/SemipolarSpinner\";\nexport { default as SpringSpinner } from \"./components/SpringSpinner\";\n\nexport { default as SwappingSquaresSpinner } from \"./components/SwappingSquaresSpinner\";\n\nexport { default as TrinityRingsSpinner } from \"./components/TrinityRingsSpinner\";\n"
  },
  {
    "path": "src/types.ts",
    "content": "import type { CSSProperties, HTMLAttributes } from \"react\";\n\nexport interface EpicSpinnerProps extends HTMLAttributes<HTMLDivElement> {\n  size?: number;\n  animationDuration?: number;\n  color?: string;\n  className?: string;\n  style?: CSSProperties;\n}\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"ES2020\",\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"bundler\",\n    \"jsx\": \"react-jsx\",\n    \"strict\": true,\n    \"esModuleInterop\": true,\n    \"skipLibCheck\": true,\n    \"declaration\": true,\n    \"declarationDir\": \"dist\",\n    \"outDir\": \"dist\",\n    \"lib\": [\"ES2020\", \"DOM\"]\n  },\n  \"include\": [\"src\"]\n}\n"
  },
  {
    "path": "vite.config.ts",
    "content": "import { defineConfig } from \"vite-plus\";\n\nexport default defineConfig({\n  staged: {\n    \"*\": \"vp check --fix\",\n  },\n  lint: {\n    options: {\n      typeAware: true,\n      typeCheck: true,\n    },\n  },\n  pack: {\n    entry: [\"src/index.ts\"],\n    format: [\"esm\", \"cjs\"],\n    dts: true,\n    deps: {\n      neverBundle: [\"react\", \"react-dom\", \"prop-types\", \"styled-components\"],\n    },\n  },\n});\n"
  }
]