SebastianHGonzalez

import { useEffect } from "react";

/**
 * Just like useEffect but it delays execution and debounces by the given delay
 *
 * @param {import("react").EffectCallback} effect
 * @param {Number} delay
 * @param {import("react").DependencyList} deps
 */
export default function useDebounce(effect, delay, deps) {

SebastianHGonzalez

import React from "react";
import { string, bool, node } from "prop-types";
import styled from "styled-components";
import { ErrorMessage } from "formik";

import I18n from "../I18n";

const Optional = styled.i`
  font-size: small;
`;

SebastianHGonzalez

import React from "react";
import { string } from "prop-types";
import styled from "styled-components";

function Close({ className }) {
  return (
    <svg className={className} viewBox="0 0 24 24">
      <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
    </svg>
  );

SebastianHGonzalez

import { string, shape } from "prop-types";

import es from "./messages_es";

function I18n({ id, fallback, fillers }) {
  const message = es[id] || fallback || id;

  const filledMessage = fillMessage(message, fillers);

  if(fillTagRegex.test(filledMessage)) {

SebastianHGonzalez

import styled from "styled-components";
import Modal from "react-modal";
import { desktop, mobile } from "styled/media";

const StyledModal = styled(Modal)`
  ${mobile`
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

SebastianHGonzalez

import React from "react";
import styled from "styled-components";

import font from "styled/font";

export const Table = styled.table`
  border-collapse: collapse;
  background: ${({ theme }) => theme.table.head.background};
`;

SebastianHGonzalez

import React from "react";
import { string, bool } from "prop-types";
import styled from "styled-components";
import { Collapse } from "react-collapse";

const Legend = styled.legend`
  display: flex;
  width: 100%;
  justify-content: space-between;
`;

SebastianHGonzalez

import React from "react";
import { string } from "prop-types";
import styled from "styled-components";

const Button = styled.button`
  cursor: pointer;
  font-weight: 600;
  border-radius: 4px;
  font-style: normal;
  font-stretch: normal;

SebastianHGonzalez

import React from "react";
import { string, bool, func } from "prop-types";
import styled from "styled-components";

const Input = styled.input`
  display: none;
`;

const Slider = styled.span`
  position: absolute;

SebastianHGonzalez

import React, { useMemo } from "react";
import { Spring, animated } from "react-spring/renderprops";
import { interpolate } from "flubber";
import { string, arrayOf, number } from "prop-types";

export default function MorphPath({ paths, currentPath, id, fill, transform, scale }) {
    const interpolators = useMemo(
        // https://reactjs.org/docs/hooks-reference.html#usememo
        () =>
            paths.map((path, index, array) =>