{"version":3,"sources":["../../../src/Button/Button.tsx"],"names":[".s1k24wti",".sdsvsp1",".s1y6q53d",".sc14uoh",".s1qg9xyy",".s1v1gvo",".s2frf9u",".s1n1329g",".s1rat839",".s1rqhnm9"],"mappings":"AAcaA;AAoCPC;AAeAC;AAYAC;AA2BAC;AA2BAC;AAKAC;AAKAC;AASAC;AAIAC","file":"../../../src/Button/Button.tsx","sourcesContent":["import React, {\n  useMemo,\n  useCallback,\n  useState,\n  forwardRef,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { css, cx } from \"linaria\";\nimport { darken, rgba, lighten } from \"polished\";\nimport { colors, baseBorderRadius, createTransitions } from \"../utils\";\nimport Loader from \"../Loader/Loader\";\nimport \"../utils/global\";\n\nexport const StundButton = css`\n  color: ${colors[\"color-basic-800\"]};\n  outline: 0;\n  background: ${colors[\"color-basic-200\"]};\n  font-size: 16px;\n  line-height: 1.25;\n  padding: 8px 16px;\n  vertical-align: middle;\n  cursor: pointer;\n  display: inline-block;\n  user-select: none;\n  text-align: center;\n  letter-spacing: 0.5px;\n  border: none;\n  border-radius: ${baseBorderRadius};\n  transition: ${createTransitions(\"background-color\", \"box-shadow\", \"opacity\")};\n  border: 1px solid ${colors[\"color-basic-500\"]};\n  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);\n  position: relative;\n  &[disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n  &:not([disabled]):hover {\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n    background: ${lighten(0.025)(colors[\"color-basic-200\"])};\n  }\n  &:not([disabled]):active {\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);\n    background: ${darken(0.025)(colors[\"color-basic-200\"])};\n  }\n  a& {\n    text-decoration: none;\n  }\n`;\n\nconst StundButtonLink = css`\n  border: none;\n  padding: 0 !important;\n  background: none !important;\n  box-shadow: none !important;\n  color: ${colors[\"color-basic-700\"]};\n  a&:hover {\n    text-decoration: underline;\n  }\n  &:hover,\n  &:active {\n    color: ${darken(0.05, colors[\"color-primary\"])};\n  }\n`;\n\nconst StundButtonOutline = css`\n  background: none;\n  box-shadow: none !important;\n  &:not([disabled]):hover {\n    background: ${darken(0.02)(colors[\"color-basic-200\"])};\n  }\n  &:not([disabled]):active {\n    border-color: ${colors[\"color-basic-600\"]};\n    background: ${darken(0.05)(colors[\"color-basic-200\"])};\n  }\n`;\n\nconst StundButtonPrimary = css`\n  border-color: ${darken(0.1)(colors[\"color-primary\"])};\n  box-shadow: 0 2px 0 ${rgba(colors[\"color-primary\"], 0.1)};\n  &:not(.${StundButtonOutline}) {\n    color: ${colors[\"color-basic-100\"]};\n    background: ${colors[\"color-primary\"]};\n  }\n  &:not([disabled]):hover {\n    box-shadow: 0 2px 4px ${rgba(colors[\"color-primary\"], 0.25)};\n    background: ${darken(0.1)(colors[\"color-primary\"])};\n  }\n  &:not([disabled]):active {\n    box-shadow: 0 2px 4px ${rgba(colors[\"color-primary\"], 0.4)};\n    background: ${darken(0.2)(colors[\"color-primary\"])};\n  }\n  &.${StundButtonOutline} {\n    color: ${darken(0.2, colors[\"color-primary\"])};\n    &:not([disabled]):hover {\n      background: ${lighten(0.4)(colors[\"color-primary\"])};\n    }\n    &:not([disabled]):active {\n      border-color: ${darken(0.1)(colors[\"color-primary\"])};\n      background: ${lighten(0.3)(colors[\"color-primary\"])};\n    }\n  }\n`;\n\nconst StundButtonDanager = css`\n  border-color: ${darken(0.1)(colors[\"color-danger\"])};\n  box-shadow: 0 2px 0 ${rgba(colors[\"color-danger\"], 0.1)};\n  &:not(.${StundButtonOutline}) {\n    color: ${colors[\"color-basic-100\"]};\n    background: ${colors[\"color-danger\"]};\n  }\n  &:not([disabled]):hover {\n    box-shadow: 0 2px 4px ${rgba(colors[\"color-danger\"], 0.25)};\n    background: ${darken(0.05)(colors[\"color-danger\"])};\n  }\n  &:not([disabled]):active {\n    box-shadow: 0 2px 4px ${rgba(colors[\"color-danger\"], 0.4)};\n    background: ${darken(0.1)(colors[\"color-danger\"])};\n  }\n  &.${StundButtonOutline} {\n    color: ${darken(0.1, colors[\"color-danger\"])};\n    &:not([disabled]):hover {\n      background: ${lighten(0.4)(colors[\"color-danger\"])};\n    }\n    &:not([disabled]):active {\n      border-color: ${darken(0.1)(colors[\"color-danger\"])};\n      background: ${lighten(0.35)(colors[\"color-danger\"])};\n    }\n  }\n`;\n\nconst StundButtonSmall = css`\n  font-size: 12px;\n  padding: 4px 10px;\n`;\n\nconst StundButtonLarge = css`\n  font-size: 18px;\n  padding: 12px 20px;\n`;\n\nconst StundButtonLabel = css`\n  display: inline-block;\n  transition: all 0.25s;\n  font-weight: 600;\n  .${StundButtonLink} & {\n    font-weight: 800;\n  }\n`;\n\nconst StundButtonLoading = css`\n  opacity: 0;\n`;\n\nconst StundButtonLoader = css`\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport interface BaseButtonProps {\n  label?: string;\n  status?: \"default\" | \"primary\" | \"danger\";\n  type?: \"default\" | \"link\" | \"outline\";\n  size?: \"small\" | \"normal\" | \"large\";\n  loading?: boolean;\n  // eslint-disable-next-line quotes\n  htmlType?: JSX.IntrinsicElements[\"button\"][\"type\"];\n}\nexport type ButtonProps = BaseButtonProps &\n  // eslint-disable-next-line quotes, @typescript-eslint/ban-types\n  Omit<JSX.IntrinsicElements[\"button\"], \"type\"> &\n  // eslint-disable-next-line quotes\n  JSX.IntrinsicElements[\"a\"];\n\n// eslint-disable-next-line react/display-name\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(\n  (\n    {\n      type,\n      label,\n      status,\n      htmlType,\n      className,\n      disabled,\n      href,\n      size,\n      loading,\n      onClick,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const _loadingDelay = useRef<number | null>(null);\n    const [_loading, _setLoading] = useState(loading || false);\n    const handleClick = useCallback(\n      (e) => {\n        if (onClick) {\n          onClick(e);\n        }\n      },\n      [loading, onClick]\n    );\n    useEffect(() => {\n      if (loading) {\n        _loadingDelay.current = window.setTimeout(() => {\n          _setLoading(true);\n        }, 250);\n      } else {\n        if (_loadingDelay.current) {\n          clearTimeout(_loadingDelay.current);\n        }\n\n        _setLoading(false);\n      }\n    }, [loading]);\n    useEffect(() => {\n      return () => clearInterval(_loadingDelay.current!);\n    }, []);\n    const renderChildren = useCallback(() => {\n      if (typeof children === \"string\" || label) {\n        return (\n          <span\n            className={cx(StundButtonLabel, _loading && StundButtonLoading)}>\n            {children || label}\n          </span>\n        );\n      }\n\n      return children;\n    }, [children, label, _loading]);\n    const classes = useMemo(() => {\n      return cx(\n        StundButton,\n        status === \"primary\" && StundButtonPrimary,\n        status === \"danger\" && StundButtonDanager,\n        type === \"link\" && StundButtonLink,\n        type === \"outline\" && StundButtonOutline,\n        size === \"small\" && StundButtonSmall,\n        size === \"large\" && StundButtonLarge,\n        className\n      );\n    }, [status, size, className]);\n\n    const kids = (\n      <>\n        {_loading && (\n          <span className={StundButtonLoader}>\n            <Loader\n              size={16}\n              color={\n                [\"primary\", \"danger\"].includes(status!)\n                  ? colors[\"color-basic-200\"]\n                  : colors[\"color-primary-500\"]\n              }\n            />\n          </span>\n        )}\n        {renderChildren()}\n      </>\n    );\n\n    if (href) {\n      return (\n        <a\n          {...props}\n          href={href}\n          className={classes}\n          onClick={handleClick}\n          ref={ref as React.RefObject<HTMLAnchorElement>}>\n          {kids}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        {...props}\n        className={classes}\n        role={\"button\"}\n        disabled={disabled}\n        aria-disabled={disabled ? \"true\" : \"false\"}\n        aria-label={label}\n        type={htmlType}\n        onClick={handleClick}\n        ref={ref as React.RefObject<HTMLButtonElement>}>\n        {kids}\n      </button>\n    );\n  }\n);\n\nexport default Button;\n"]}