@geckou/ui-react 0.1.1 → 0.3.0

package/src/components/DateSelector.tsx

@@ -1,162 +0,0 @@
-'use client'
-
-import type { CSSProperties, MouseEvent } from 'react'
-import { useEffect, useState } from 'react'
-import { daysInMonth, splitDate } from '@geckou/ui-core'
-import { InputBox } from './InputBox'
-import { KeyboardArrowDownIcon } from './icons/KeyboardArrowDownIcon'
-import { COLOR } from '../constants'
-
-type Birthday = {
-  year: string
-  month: string
-  day: string
-}
-
-type Props = {
-  name: string
-  value?: string
-  onChange?: (newValue: string) => void
-  isRequired?: boolean
-}
-
-const EMPTY_BIRTHDAY: Birthday = { year: '', month: '', day: '' }
-
-export function DateSelector({ name, value, onChange, isRequired }: Props) {
-  const [birthday, setBirthday] = useState<Birthday>(EMPTY_BIRTHDAY)
-
-  // Vue 版（@geckou/ui-vue）は value が空に戻されたときリセットされなかった
-  useEffect(() => {
-    if (value) {
-      setBirthday(splitDate(value))
-    } else {
-      setBirthday(EMPTY_BIRTHDAY)
-    }
-  }, [value])
-
-  const today = new Date()
-  const maxYear = today.getFullYear() - 100
-  const currentYear = today.getFullYear() - 14
-  const yearsOptions = Array.from(
-    { length: currentYear - maxYear + 1 },
-    (_, i) => (maxYear + i).toString(),
-  ).map((year) => ({ label: year, value: year }))
-
-  const monthOptions = Array.from({ length: 12 }, (_, i) => {
-    const month = (i + 1).toString()
-    return { label: month, value: month.padStart(2, '0') }
-  })
-
-  // 年が未選択のときは閏年を含む最大日数になるよう 2000 年を使う
-  const getDaysInMonth = (year: string, month: string) =>
-    daysInMonth(Number(year) || 2000, Number(month))
-
-  const selectedMonthDays = getDaysInMonth(birthday.year, birthday.month)
-  const dayOptions = Array.from({ length: selectedMonthDays }, (_, i) => {
-    const day = (i + 1).toString()
-    return { label: day, value: day.padStart(2, '0') }
-  })
-
-  const emitBirthday = (next: Birthday) => {
-    setBirthday(next)
-    if (!next.year && !next.month && !next.day) onChange?.('')
-    else if (!next.year || !next.month || !next.day) return
-    else onChange?.(`${next.year}-${next.month}-${next.day}`)
-  }
-
-  const selectItem = (key: keyof Birthday, newValue: string) => {
-    const next = { ...birthday, [key]: newValue }
-
-    // 月・年を変えて日が存在しなくなった場合は、その月の末日に丸める
-    if (key !== 'day' && next.day && next.month) {
-      const maxDay = getDaysInMonth(next.year, next.month)
-      if (Number(next.day) > maxDay) next.day = String(maxDay).padStart(2, '0')
-    }
-
-    emitBirthday(next)
-  }
-
-  const openDropdown = (event: MouseEvent<HTMLDivElement>) => {
-    const target = event.currentTarget
-    const select = target.firstElementChild as HTMLSelectElement | null
-    if (select) select.click()
-  }
-
-  const wrapperClass = 'relative w-max [&:has(select:focus)>svg]:rotate-180'
-  const iconClass =
-    'pointer-events-none absolute inset-y-0 right-[var(--sp-small,0.375rem)] m-auto size-[var(--icon-medium,1.125rem)] fill-(--icon-color)'
-  const selectClass =
-    'w-[calc(3ch+var(--sp-medium,0.75rem)*2+var(--icon-medium,1.125rem))]! p-[var(--sp-medium,0.75rem)]! pe-[calc(var(--sp-small,0.375rem)*2+var(--icon-medium,1.125rem))]! cursor-pointer'
-  const wrapperStyle = { '--icon-color': COLOR.blue } as CSSProperties
-  const deleteButtonStyle = { '--caution-color': COLOR.red } as CSSProperties
-
-  return (
-    <InputBox className="flex w-max items-center [&>*:not(:last-of-type)]:after:content-['/']">
-      <div className={wrapperClass} style={wrapperStyle} onClick={openDropdown}>
-        <select
-          value={birthday.year}
-          name={`${name}-year`}
-          required={isRequired}
-          onChange={(event) => selectItem('year', event.target.value)}
-          className="w-[calc(5ch+var(--sp-medium,0.75rem)*2+var(--icon-medium,1.125rem))]! cursor-pointer p-[var(--sp-medium,0.75rem)]! pe-[calc(var(--sp-small,0.375rem)*2+var(--icon-medium,1.125rem))]!"
-        >
-          <option disabled value="">
-            年
-          </option>
-          {yearsOptions.map((year) => (
-            <option key={year.value} value={year.value}>
-              {year.label}
-            </option>
-          ))}
-        </select>
-        <KeyboardArrowDownIcon className={iconClass} />
-      </div>
-      <div className={wrapperClass} style={wrapperStyle} onClick={openDropdown}>
-        <select
-          value={birthday.month}
-          name={`${name}-month`}
-          required={isRequired}
-          onChange={(event) => selectItem('month', event.target.value)}
-          className={selectClass}
-        >
-          <option disabled value="">
-            月
-          </option>
-          {monthOptions.map((month) => (
-            <option key={month.value} value={month.value}>
-              {month.label}
-            </option>
-          ))}
-        </select>
-        <KeyboardArrowDownIcon className={iconClass} />
-      </div>
-      <div className={wrapperClass} style={wrapperStyle} onClick={openDropdown}>
-        <select
-          value={birthday.day}
-          name={`${name}-day`}
-          required={isRequired}
-          onChange={(event) => selectItem('day', event.target.value)}
-          className={selectClass}
-        >
-          <option disabled value="">
-            日
-          </option>
-          {dayOptions.map((day) => (
-            <option key={day.value} value={day.value}>
-              {day.label}
-            </option>
-          ))}
-        </select>
-        <KeyboardArrowDownIcon className={iconClass} />
-      </div>
-      <button
-        type="button"
-        style={deleteButtonStyle}
-        className="mx-[var(--sp-medium,0.75rem)] inline-flex cursor-pointer items-center gap-[var(--sp-min,0.1875rem)] text-[length:var(--fs-small,0.6875rem)] text-(--caution-color)"
-        onClick={() => emitBirthday(EMPTY_BIRTHDAY)}
-      >
-        削除
-      </button>
-    </InputBox>
-  )
-}

package/src/components/DropdownUi.tsx

@@ -1,126 +0,0 @@
-'use client'
-
-import type { CSSProperties, ReactNode, Ref } from 'react'
-import { useEffect, useImperativeHandle, useRef, useState } from 'react'
-import { KeyboardArrowDownIcon } from './icons/KeyboardArrowDownIcon'
-import { COLOR } from '../constants'
-
-// Vue 版（@geckou/ui-vue）の defineExpose({ isContentsOpened }) 相当
-export type DropdownUiHandle = {
-  isContentsOpened: () => boolean
-  close: () => void
-}
-
-type Props = {
-  isHiddenArrow?: boolean
-  contentAlignment?: 'left' | 'center' | 'right'
-  isDisabled?: boolean
-  contentsWidth?: string
-  trigger: ReactNode
-  contents?: ReactNode
-  ref?: Ref<DropdownUiHandle>
-}
-
-export function DropdownUi({
-  isHiddenArrow = false,
-  contentAlignment = 'left',
-  isDisabled = false,
-  contentsWidth = 'auto',
-  trigger,
-  contents,
-  ref,
-}: Props) {
-  const [isContentsOpened, setIsContentsOpened] = useState(false)
-  const [contentsHeight, setContentsHeight] = useState(0)
-  const rootRef = useRef<HTMLDivElement>(null)
-  const contentsRef = useRef<HTMLDivElement>(null)
-
-  const toggleBox = () => setIsContentsOpened((current) => !current)
-  const closeDropDown = () => setIsContentsOpened(false)
-
-  useImperativeHandle(ref, () => ({
-    isContentsOpened: () => isContentsOpened,
-    close: closeDropDown,
-  }))
-
-  useEffect(() => {
-    const handleClickOutside = (event: PointerEvent) => {
-      const root = rootRef.current
-      if (root && !root.contains(event.target as Node)) closeDropDown()
-    }
-
-    document.addEventListener('pointerdown', handleClickOutside)
-    return () => document.removeEventListener('pointerdown', handleClickOutside)
-  }, [])
-
-  useEffect(() => {
-    const contentsElement = contentsRef.current
-    if (!contentsElement) return
-
-    const updateContentsHeight = () =>
-      setContentsHeight(contentsElement.clientHeight)
-
-    updateContentsHeight()
-    const observer = new ResizeObserver(updateContentsHeight)
-    observer.observe(contentsElement)
-    return () => observer.disconnect()
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- サイズ変化は ResizeObserver が検知するため、contents の有無が変わったときだけ再登録する
-  }, [Boolean(contents)])
-
-  const isInactive = isDisabled || !contents
-
-  const style = {
-    '--trigger-color': isInactive ? COLOR.black : COLOR.blue,
-  } as CSSProperties
-
-  const contentsStyle: CSSProperties = {
-    boxShadow: isContentsOpened ? '0 0 6px #33333333' : 'none',
-    blockSize: isContentsOpened ? `${contentsHeight}px` : 0,
-    inlineSize: contentsWidth,
-    right:
-      contentAlignment === 'right'
-        ? 'calc(var(--bv, 0.375rem) * -0.5)'
-        : 'auto',
-    left:
-      contentAlignment === 'left' ? 'calc(var(--bv, 0.375rem) * -0.5)' : 'auto',
-    zIndex: 2,
-  }
-
-  return (
-    <div ref={rootRef} className="relative">
-      <button
-        type="button"
-        disabled={isDisabled}
-        aria-expanded={isContentsOpened}
-        style={{ ...style, cursor: isInactive ? 'auto' : 'pointer' }}
-        className="flex size-full items-center gap-[var(--sp-small,0.375rem)] text-(--trigger-color)"
-        onClick={(event) => {
-          event.preventDefault()
-          toggleBox()
-        }}
-      >
-        {trigger}
-        {!(isHiddenArrow || !contents || isDisabled) && (
-          <KeyboardArrowDownIcon
-            className={`size-[var(--icon-small,0.9375rem)] flex-none transition-all duration-100 ${isContentsOpened ? 'rotate-180' : ''}`}
-          />
-        )}
-      </button>
-      {contents && (
-        <div
-          style={contentsStyle}
-          inert={!isContentsOpened}
-          className="absolute top-[calc(100%-var(--sp-min,0.1875rem))] cursor-pointer overflow-hidden rounded-[var(--radius-small,0.1875rem)] transition-[block-size] duration-100"
-        >
-          <div
-            ref={contentsRef}
-            className="max-h-[calc(var(--bv,0.375rem)*56)] min-w-[calc(var(--bv,0.375rem)*20)] overflow-auto bg-white"
-            onClick={closeDropDown}
-          >
-            {contents}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/ErrorMessage.tsx

@@ -1,30 +0,0 @@
-import type { CSSProperties } from 'react'
-import { COLOR } from '../constants'
-
-type Props = {
-  errorMessages?: string[]
-  cssStyle?: {
-    textColor?: string
-    backgroundColor?: string
-  }
-}
-
-export function ErrorMessage({ errorMessages, cssStyle }: Props) {
-  if (!errorMessages || !errorMessages.length) return null
-
-  const style = {
-    '--error-text-color': cssStyle?.textColor || COLOR.white,
-    '--error-background-color': cssStyle?.backgroundColor || COLOR.red,
-  } as CSSProperties
-
-  return (
-    <div
-      className="absolute top-[calc(100%+0.25rem)] flex w-max flex-col gap-2 rounded-sm bg-(--error-background-color) px-3 py-2 text-sm leading-none text-(--error-text-color) shadow-[0_0_0.5rem_0.25rem_#33333322] before:absolute before:bottom-[calc(100%-1px)] before:left-[0.85rem] before:block before:h-[0.53rem] before:w-[0.85rem] before:bg-(--error-background-color) before:content-[''] before:[clip-path:polygon(50%_0%,100%_100%,0%_100%)]"
-      style={style}
-    >
-      {errorMessages.map((message) => (
-        <span key={message}>{message}</span>
-      ))}
-    </div>
-  )
-}

package/src/components/FileInput.tsx

@@ -1,93 +0,0 @@
-'use client'
-
-import type { CSSProperties, DragEvent } from 'react'
-import { BackupIcon } from './icons/BackupIcon'
-import { CloseIcon } from './icons/CloseIcon'
-import { COLOR } from '../constants'
-
-type Props = {
-  value: File[]
-  onChange?: (files: File[]) => void
-  accept?: string
-}
-
-export function FileInput({ value, onChange, accept = '' }: Props) {
-  const uploadFiles = value ?? []
-
-  const addFiles = (newFiles: FileList | null) => {
-    if (!newFiles || !newFiles.length) return
-    onChange?.([...uploadFiles, ...Array.from(newFiles)])
-  }
-
-  const removeFile = (target: File) => {
-    onChange?.(uploadFiles.filter((file) => file !== target))
-  }
-
-  const handleDrop = (event: DragEvent<HTMLDivElement>) => {
-    event.preventDefault()
-    addFiles(event.dataTransfer.files)
-  }
-
-  const style = {
-    '--link-color': COLOR.blue,
-    '--caution-color': COLOR.red,
-  } as CSSProperties
-
-  return (
-    <div
-      style={style}
-      className="w-full rounded-[var(--radius-small,0.1875rem)] border border-dashed border-[var(--link-color,#1c4ac9)] p-[var(--sp-medium,0.75rem)]"
-    >
-      <div
-        className="flex h-full flex-col items-center justify-center gap-[var(--sp-small,0.375rem)] [&>span]:inline-block [&>span]:p-[var(--sp-small,0.375rem)]"
-        onDragOver={(event) => event.preventDefault()}
-        onDrop={handleDrop}
-      >
-        <span>ファイルをドロップしてアップロード</span>
-        <span>または</span>
-        <label className="relative inline-flex cursor-pointer items-center gap-[var(--sp-small,0.375rem)] rounded-[var(--radius-small,0.1875rem)] bg-transparent p-[var(--sp-small,0.375rem)] font-medium text-[var(--link-color,#1c4ac9)] transition-colors duration-100 hover:bg-[var(--hover-color,#EEF7FB)] has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-[var(--link-color,#1c4ac9)]">
-          <BackupIcon className="size-[var(--icon-small,0.9375rem)]" />
-          <span>ファイルを選択</span>
-          <input
-            type="file"
-            multiple
-            accept={accept}
-            className="sr-only"
-            onChange={(event) => {
-              addFiles(event.target.files)
-              event.target.value = ''
-            }}
-          />
-        </label>
-      </div>
-      {uploadFiles.length > 0 && (
-        <div className="mt-[var(--sp-medium,0.75rem)] flex flex-col items-center gap-[var(--sp-small,0.375rem)] bg-[var(--light-blue,#d2e4f7)] p-[var(--sp-medium,0.75rem)] [&>*:last-child]:mt-[var(--sp-small,0.375rem)]">
-          {uploadFiles.map((file, index) => (
-            <span
-              key={`${file.name}_${index}`}
-              className="inline-flex items-center gap-[var(--sp-min,0.1875rem)]"
-            >
-              {file.name}
-              <button
-                type="button"
-                aria-label={`${file.name} を削除`}
-                className="inline-flex cursor-pointer items-center"
-                onClick={() => removeFile(file)}
-              >
-                <CloseIcon className="size-[var(--icon-small,0.9375rem)] text-[var(--caution-color,#aa0000)]" />
-              </button>
-            </span>
-          ))}
-          <button
-            type="button"
-            className="inline-flex cursor-pointer items-center gap-[var(--sp-min,0.1875rem)] rounded-[var(--radius-small,0.1875rem)] border border-[var(--caution-color,#aa0000)] bg-white px-[var(--sp-medium,0.75rem)] py-[var(--sp-small,0.375rem)] text-[length:var(--fs-small,0.6875rem)] text-[var(--caution-color,#aa0000)]"
-            onClick={() => onChange?.([])}
-          >
-            <CloseIcon className="size-[var(--icon-min,0.75rem)]" />
-            全て削除
-          </button>
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/InputBox.tsx

@@ -1,118 +0,0 @@
-'use client'
-
-import type { CSSProperties, ReactNode } from 'react'
-import type {
-  StateVariation,
-  InputBoxStyle,
-  InputBoxStyleForEachStatus,
-} from '../types'
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { INPUT_BOX_DEFAULT_STYLES } from '../constants'
-
-type Props = {
-  cssStyle?: InputBoxStyleForEachStatus
-  isErrored?: boolean
-  isDisabled?: boolean
-  className?: string
-  children: ReactNode
-}
-
-export function InputBox({
-  cssStyle,
-  isErrored,
-  isDisabled,
-  className,
-  children,
-}: Props) {
-  const inputBoxRef = useRef<HTMLDivElement>(null)
-  const [currentState, setCurrentState] = useState<StateVariation>('default')
-
-  const isErroredRef = useRef(isErrored)
-  isErroredRef.current = isErrored
-
-  const updateState = useCallback(() => {
-    const el = inputBoxRef.current?.querySelector('input, textarea, select')
-
-    if (!el) return setCurrentState('default')
-    if (el.matches(':disabled')) return setCurrentState('disabled')
-    if (el.matches(':focus')) return setCurrentState('focus')
-
-    if (el.tagName.toLowerCase() === 'select') {
-      const select = el as HTMLSelectElement
-      return setCurrentState(
-        select.required && !select.value ? 'error' : 'valid',
-      )
-    }
-
-    if (isErroredRef.current || el.matches(':invalid'))
-      {return setCurrentState('error')}
-
-    if (
-      el.matches(':valid') &&
-      el.matches(':not(:placeholder-shown)') &&
-      el.matches(':not(:invalid)')
-    ) {
-      return setCurrentState('valid')
-    }
-
-    setCurrentState('default')
-  }, [])
-
-  useEffect(() => {
-    const inputBox = inputBoxRef.current
-    if (!inputBox) return
-
-    const observer = new MutationObserver(updateState)
-    observer.observe(inputBox, { childList: true, subtree: true })
-    inputBox.addEventListener('focusin', updateState, true)
-    inputBox.addEventListener('blur', updateState, true)
-
-    return () => {
-      observer.disconnect()
-      inputBox.removeEventListener('focusin', updateState, true)
-      inputBox.removeEventListener('blur', updateState, true)
-    }
-  }, [updateState])
-
-  // Vue 版（@geckou/ui-vue）はマウント時に状態判定せず、初回の focus / blur まで default を維持する
-  const isFirstRender = useRef(true)
-  const prevDisabled = useRef(isDisabled)
-
-  useEffect(() => {
-    const isDisabledChanged = prevDisabled.current !== isDisabled
-    prevDisabled.current = isDisabled
-
-    if (isFirstRender.current) {
-      isFirstRender.current = false
-      if (isDisabled) setCurrentState('disabled')
-      return
-    }
-
-    if (isDisabledChanged)
-      {return setCurrentState(isDisabled ? 'disabled' : 'default')}
-
-    updateState()
-  }, [isDisabled, isErrored, updateState])
-
-  const cssStylesUsed = { ...INPUT_BOX_DEFAULT_STYLES, ...cssStyle }
-  const currentCssStyle: InputBoxStyle =
-    cssStylesUsed[currentState] ?? cssStylesUsed.default
-
-  const style = {
-    '--text-color': currentCssStyle.textColor,
-    '--placeholder-color': currentCssStyle.placeholderColor,
-    '--background-color': currentCssStyle.backgroundColor,
-    '--radius-size': currentCssStyle.border?.radius || '.25rem',
-    '--input-box-shadow': `0 0 0 ${currentCssStyle.border?.size || '1px'} ${currentCssStyle.border?.color} inset, ${currentCssStyle.boxShadow || '0 0 0 0 rgba(0, 0, 0, 0)'}`,
-  } as CSSProperties
-
-  return (
-    <div
-      ref={inputBoxRef}
-      className={`relative inline-flex max-w-full rounded-(--radius-size) bg-(--background-color) text-(--text-color) shadow-(--input-box-shadow) has-[:disabled]:pointer-events-none has-[:disabled]:before:pointer-events-auto has-[:disabled]:before:absolute has-[:disabled]:before:inset-0 has-[:disabled]:before:cursor-not-allowed has-[:disabled]:before:content-[''] [&_*::placeholder]:font-normal [&_*::placeholder]:text-(--placeholder-color) [&_*:focus]:outline-none [&_:is(input,textarea,select)]:w-full [&_:is(input,textarea,select)]:appearance-none [&_:is(input,textarea,select)]:border-none [&_:is(input,textarea,select)]:bg-transparent [&_:is(input,textarea,select)]:p-4 [&_:is(input,textarea,select)]:outline-none ${className || ''}`}
-      style={style}
-    >
-      {children}
-    </div>
-  )
-}

package/src/components/InputGroup.tsx

@@ -1,13 +0,0 @@
-import type { ReactNode } from 'react'
-
-type Props = {
-  children: ReactNode
-}
-
-export function InputGroup({ children }: Props) {
-  return (
-    <div className="inline-flex gap-px max-md:flex-wrap [&>*]:flex-auto [&>*]:rounded-none [&>*:first-child:not(:only-child)]:rounded-l-[var(--radius-small,0.1875rem)] [&>*:last-child:not(:only-child)]:rounded-r-[var(--radius-small,0.1875rem)] [&>button]:flex-none">
-      {children}
-    </div>
-  )
-}

package/src/components/LabeledCheckbox.tsx

@@ -1,61 +0,0 @@
-'use client'
-
-import type { CSSProperties } from 'react'
-import type { CheckBoxStyleForEachStatus } from '../types'
-import { CheckBox } from './CheckBox'
-import { COLOR } from '../constants'
-
-type Props = {
-  name: string
-  label: string
-  checked?: boolean
-  onChange?: (newValue: boolean) => void
-  isDisabled?: boolean
-  cssStyle?: CheckBoxStyleForEachStatus
-  isDisableAnimation?: boolean
-}
-
-export function LabeledCheckbox({
-  name,
-  label,
-  checked,
-  onChange,
-  isDisabled,
-  cssStyle,
-  isDisableAnimation,
-}: Props) {
-  const isChecked = checked ?? false
-  const baseStyle = isDisabled ? cssStyle?.disabled : cssStyle?.default
-
-  const currentCssStyle = {
-    textColor: isDisabled ? COLOR.darkGray : COLOR.black,
-    backgroundColor: isDisabled ? COLOR.darkGray : COLOR.blue,
-    ...(baseStyle ?? {}),
-  }
-
-  const style = {
-    '--text-color': currentCssStyle.textColor,
-    '--checked-color': currentCssStyle.backgroundColor,
-  } as CSSProperties
-
-  return (
-    <label className="inline-flex cursor-pointer items-center gap-[.5em] has-[input:disabled]:cursor-auto">
-      <span className="pointer-events-none">
-        <CheckBox
-          name={name}
-          checked={isChecked}
-          onChange={onChange}
-          isDisabled={isDisabled}
-          cssStyle={cssStyle}
-          isDisableAnimation={isDisableAnimation}
-        />
-      </span>
-      <span
-        style={style}
-        className={isChecked ? 'text-(--text-color)' : 'text-(--checked-color)'}
-      >
-        {label}
-      </span>
-    </label>
-  )
-}

package/src/components/LabeledFieldset.tsx

@@ -1,18 +0,0 @@
-import type { ReactNode } from 'react'
-
-type Props = {
-  isDisabled?: boolean
-  label?: ReactNode
-  children: ReactNode
-}
-
-export function LabeledFieldset({ isDisabled, label, children }: Props) {
-  return (
-    <div className="grid gap-2">
-      <fieldset className="contents" disabled={isDisabled}>
-        {label && <legend className="flex items-center">{label}</legend>}
-        <div className="[&>*]:w-full">{children}</div>
-      </fieldset>
-    </div>
-  )
-}

package/src/components/LoadingSpinner.tsx

@@ -1,23 +0,0 @@
-export function LoadingSpinner() {
-  return (
-    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-      <g>
-        <circle cx="12" cy="2.5" r="1.5" opacity=".14" />
-        <circle cx="16.75" cy="3.77" r="1.5" opacity=".29" />
-        <circle cx="20.23" cy="7.25" r="1.5" opacity=".43" />
-        <circle cx="21.50" cy="12.00" r="1.5" opacity=".57" />
-        <circle cx="20.23" cy="16.75" r="1.5" opacity=".71" />
-        <circle cx="16.75" cy="20.23" r="1.5" opacity=".86" />
-        <circle cx="12" cy="21.5" r="1.5" />
-        <animateTransform
-          attributeName="transform"
-          type="rotate"
-          calcMode="discrete"
-          dur="0.75s"
-          values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12"
-          repeatCount="indefinite"
-        />
-      </g>
-    </svg>
-  )
-}