{"version":3,"sources":["../src/spinner.tsx"],"sourcesContent":["import {\n  chakra,\n  forwardRef,\n  keyframes,\n  omitThemingProps,\n  ThemingProps,\n  useStyleConfig,\n  HTMLChakraProps,\n} from \"@chakra-ui/system\"\nimport { cx } from \"@chakra-ui/shared-utils\"\n\nconst spin = keyframes({\n  \"0%\": {\n    transform: \"rotate(0deg)\",\n  },\n  \"100%\": {\n    transform: \"rotate(360deg)\",\n  },\n})\n\ninterface SpinnerOptions {\n  /**\n   * The color of the empty area in the spinner\n   * @default \"transparent\"\n   */\n  emptyColor?: string\n  /**\n   * The color of the spinner\n   */\n  color?: string\n  /**\n   * The thickness of the spinner\n   * @default \"2px\"\n   * @example\n   * ```jsx\n   * <Spinner thickness=\"4px\"/>\n   * ```\n   */\n  thickness?: string\n  /**\n   * The speed of the spinner.\n   * @default \"0.45s\"\n   * @example\n   * ```jsx\n   * <Spinner speed=\"0.2s\"/>\n   * ```\n   */\n  speed?: string\n  /**\n   * For accessibility, it is important to add a fallback loading text.\n   * This text will be visible to screen readers.\n   * @default \"Loading...\"\n   */\n  label?: string\n}\n\nexport interface SpinnerProps\n  extends Omit<HTMLChakraProps<\"div\">, keyof SpinnerOptions>,\n    SpinnerOptions,\n    ThemingProps<\"Spinner\"> {}\n\n/**\n * Spinner is used to indicate the loading state of a page or a component,\n * It renders a `div` by default.\n *\n * @see Docs https://chakra-ui.com/spinner\n */\nexport const Spinner = forwardRef<SpinnerProps, \"div\">((props, ref) => {\n  const styles = useStyleConfig(\"Spinner\", props)\n\n  const {\n    label = \"Loading...\",\n    thickness = \"2px\",\n    speed = \"0.45s\",\n    emptyColor = \"transparent\",\n    className,\n    ...rest\n  } = omitThemingProps(props)\n\n  const _className = cx(\"chakra-spinner\", className)\n\n  const spinnerStyles = {\n    display: \"inline-block\",\n    borderColor: \"currentColor\",\n    borderStyle: \"solid\",\n    borderRadius: \"99999px\",\n    borderWidth: thickness,\n    borderBottomColor: emptyColor,\n    borderLeftColor: emptyColor,\n    animation: `${spin} ${speed} linear infinite`,\n    ...styles,\n  }\n\n  return (\n    <chakra.div\n      ref={ref}\n      __css={spinnerStyles}\n      className={_className}\n      {...rest}\n    >\n      {label && <chakra.span srOnly>{label}</chakra.span>}\n    </chakra.div>\n  )\n})\n\nSpinner.displayName = \"Spinner\"\n"],"mappings":";;;AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,OAEK;AACP,SAAS,UAAU;AA2FH;AAzFhB,IAAM,OAAO,UAAU;AAAA,EACrB,MAAM;AAAA,IACJ,WAAW;AAAA,EACb;AAAA,EACA,QAAQ;AAAA,IACN,WAAW;AAAA,EACb;AACF,CAAC;AAiDM,IAAM,UAAU,WAAgC,CAAC,OAAO,QAAQ;AACrE,QAAM,SAAS,eAAe,WAAW,KAAK;AAE9C,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,aAAa;AAAA,IACb;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iBAAiB,KAAK;AAE1B,QAAM,aAAa,GAAG,kBAAkB,SAAS;AAEjD,QAAM,gBAAgB;AAAA,IACpB,SAAS;AAAA,IACT,aAAa;AAAA,IACb,aAAa;AAAA,IACb,cAAc;AAAA,IACd,aAAa;AAAA,IACb,mBAAmB;AAAA,IACnB,iBAAiB;AAAA,IACjB,WAAW,GAAG,QAAQ;AAAA,IACtB,GAAG;AAAA,EACL;AAEA,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC;AAAA,MACA,OAAO;AAAA,MACP,WAAW;AAAA,MACV,GAAG;AAAA,MAEH,mBAAS,oBAAC,OAAO,MAAP,EAAY,QAAM,MAAE,iBAAM;AAAA;AAAA,EACvC;AAEJ,CAAC;AAED,QAAQ,cAAc;","names":[]}