react-native-svg#G TypeScript Examples

PiercedTongue = () => {
  const { colors } = useTheme()

  return (
    <G>
      <Path d="M443.14,621.86c0-18.9,113.72-16.06,113.72,0a56.86,56.86,0,0,1-113.72,0Z" fill={colors.outline} />
      <Path
        d="M443.14,621.86c0-18.9,113.72-16.06,113.72,0a56.86,56.86,0,0,1-113.72,0Z"
        fill="none"
        stroke={colors.outline}
        strokeMiterlimit="10"
        strokeWidth="6px"
      />
      <Circle cx="500.5" cy="721.5" r="6.5" fill="#FFC227" stroke={colors.outline} strokeWidth="3" />
      <Path
        d="M532.49,646.6c0-8.06-14.55-14.6-32.49-14.6s-32.49,6.54-32.49,14.6h0v44.34c0,14.41,14.55,26.08,32.49,26.08s32.49-11.67,32.49-26.08V646.61Z"
        fill={colors.tongue}
      />
      <Path
        d="M532.49,646.6c0-8.06-14.55-14.6-32.49-14.6s-32.49,6.54-32.49,14.6h0v44.34c0,14.41,14.55,26.08,32.49,26.08s32.49-11.67,32.49-26.08V646.61Z"
        fill="none"
        stroke={colors.outline}
        strokeMiterlimit="10"
        strokeWidth="8px"
      />
      <Path
        d="M479.31,626.6l.91-.21.76-.14c.49-.08,1-.14,1.46-.18a21.42,21.42,0,0,1,2.89-.1,25,25,0,0,1,5.79.81,21.39,21.39,0,0,1,10.34,6.11A20.07,20.07,0,0,1,506.54,643a17.19,17.19,0,0,1-1.37,10.35c-2.08-2.93-3.66-5.55-5.32-7.76a27.26,27.26,0,0,0-2.46-3,14.09,14.09,0,0,0-2.69-2.16,15.31,15.31,0,0,0-6.11-2.08,25.67,25.67,0,0,0-3.43-.22c-.59,0-1.18,0-1.76,0l-.85.06-.4,0c-.09,0-.29,0-.22,0Z"
        fill={colors.outline}
      />
      <Rect x="498" y="685" width="5" height="19" rx="2.5" fill="#FFC227" stroke={colors.outline} strokeWidth="2" />
      <Circle cx="500.5" cy="684.5" r="8.5" fill="#FFC227" stroke={colors.outline} strokeWidth="3" />
    </G>
  )
}

function SvgReject(props: SvgProps) {
  return (
    <Svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      width="24"
      height="24"
      {...props}
    >
      <Path
        fill="#fff"
        fillRule="evenodd"
        d="M12 23c6.075 0 11-4.925 11-11S18.075 1 12 1 1 5.925 1 12s4.925 11 11 11z"
        clipRule="evenodd"
      />
      <Path
        fill="#DF5060"
        fillRule="evenodd"
        d="M23 12c0 6.075-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1s11 4.925 11 11zm-6.214 4.786a.69.69 0 000-1L13 12l3.786-3.786a.69.69 0 000-1 .69.69 0 00-1 0L12 11 8.214 7.214a.69.69 0 00-1 0 .69.69 0 000 1L11 12l-3.786 3.786a.69.69 0 000 1 .648.648 0 00.5.214.648.648 0 00.5-.214L12 13l3.786 3.786a.648.648 0 00.5.214.648.648 0 00.5-.214z"
        clipRule="evenodd"
      />
      <Mask id="reject_svg__a" width={22} height={22} x={1} y={1} maskUnits="userSpaceOnUse">
        <Path
          fill="#fff"
          fillRule="evenodd"
          d="M23 12c0 6.075-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1s11 4.925 11 11zm-6.214 4.786a.69.69 0 000-1L13 12l3.786-3.786a.69.69 0 000-1 .69.69 0 00-1 0L12 11 8.214 7.214a.69.69 0 00-1 0 .69.69 0 000 1L11 12l-3.786 3.786a.69.69 0 000 1 .648.648 0 00.5.214.648.648 0 00.5-.214L12 13l3.786 3.786a.648.648 0 00.5.214.648.648 0 00.5-.214z"
          clipRule="evenodd"
        />
      </Mask>
      <G mask="url(#reject_svg__a)">
        <Path fill="#DF5060" d="M0 0h24v24H0z" />
      </G>
    </Svg>
  );
}

FaceMask = () => {
  const { colors } = useTheme()

  return (
    <G>
      <Path
        d="M651.16 719.81C656.98 715.803 662.627 711.573 668.1 707.12C695.227 685.146 717.73 658.082 734.371 627.5C561.069 558.7 446.39 556.5 265.626 627.5C276.216 646.947 289.274 665.143 304.61 681.6C309.044 686.367 313.64 690.96 318.4 695.38C323.432 700.11 328.706 704.576 334.2 708.76C339.667 712.92 345.31 716.793 351.13 720.38C374.68 733.43 400.17 742.38 426.5 748.18C433.09 749.63 439.73 750.89 446.39 751.89C515 758 591 758 651.16 719.81Z"
        fill="#C3F4FF"
      />
      <Path
        d="M440.5 606C473 600.5 523.5 600.5 556.5 606M668.1 707.12C662.627 711.573 656.98 715.803 651.16 719.81C591 758 515 758 446.39 751.89C439.73 750.89 433.09 749.63 426.5 748.18C400.17 742.38 374.68 733.43 351.13 720.38C345.31 716.793 339.667 712.92 334.2 708.76C328.706 704.576 323.432 700.11 318.4 695.38C313.64 690.96 309.044 686.367 304.61 681.6C289.274 665.143 276.216 646.947 265.626 627.5C446.39 556.5 561.069 558.7 734.371 627.5C717.73 658.082 695.227 685.146 668.1 707.12Z"
        fill="#C3F4FF"
        stroke={colors.outline}
        strokeWidth="12"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </G>
  )
}

function Add({ width = 24, height = 24, fillColor = "#241332" }: Props) {
  return (
    <Svg viewBox="0 0 24 24" {...{ width, height }}>
      <Defs>
        <ClipPath id="prefix__a">
          <Path fill="none" d="M0 0h24v24H0z" />
        </ClipPath>
      </Defs>
      <G data-name="icon/add" clipPath="url(#prefix__a)">
        <Path fill="none" d="M0 0h24v24H0z" />
        <Path
          // eslint-disable-next-line max-len
          d="M11.25 19.25v-6.5h-6.5a.75.75 0 010-1.5h6.5v-6.5a.75.75 0 111.5 0v6.5h6.5a.75.75 0 010 1.5h-6.5v6.5a.75.75 0 11-1.5 0z"
          fill={fillColor}
        />
      </G>
    </Svg>
  );
}

PlusSVG = () => {
  return (
    <Svg width={18} height={18} viewBox="0 0 18 18">
      <G
        stroke="#fff"
        strokeWidth={2}
        fill="none"
        fillRule="evenodd"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        <Path d="M8 1v14M1 8h14" />
      </G>
    </Svg>
  );
}

SleepBars: FC<Props> = ({ data, scaleX, scaleY, barWidth }) => {
  const { bars } = useMemo(
    () => ({
      bars: data.map((date) => {
        return date.night.map((night: Night) => {
          const y = scaleY(new Date(night.startDate).valueOf())
          const x = scaleX(new Date(date.date))
          const height =
            scaleY(new Date(night.endDate).valueOf()) -
            scaleY(new Date(night.startDate).valueOf())

          return (
            <G
              key={`${night.id}_${night.value}_${night.startDate}_${night.endDate}`}>
              <StyledRect
                x={x}
                width={barWidth}
                fillOpacity={0.7}
                rx={5}
                y={y}
                value={night.value}
                height={height}
              />
            </G>
          )
        })
      })
    }),
    [barWidth, data, scaleX, scaleY]
  )

  return <G>{bars}</G>
}

export function EmailIcon(): JSX.Element {
  const theme = useTheme().colorTheme;
  return (
    <Svg width="64px" height="64px" viewBox="0 0 64 64">
      <G
        id="Page-1"
        stroke="none"
        strokeWidth="1"
        fill="none"
        fillRule="evenodd"
        strokeLinejoin="round"
      >
        <G
          id="SHUTTERSTOCK_572377249_Vector"
          transform="translate(-67.000000, -115.000000)"
          stroke={theme.black90}
          strokeWidth="2"
        >
          <Path
            d="M130,135 L130,174 C130,176.209 128.209,178 126,178 L72,178 C69.791,178 68,176.209 68,174 L68,135"
            id="Stroke-46"
          ></Path>
          <Path
            d="M74,131.149 L68.041,134.944 M109.519,122.002 L101.036,116.632 C99.714,115.809 98.177,115.77 96.8,116.632 L88.37,122 M129.959,134.944 L124.001,131.171 M129.959,148.04 L101.036,166.352 C99.714,167.174 98.177,167.215 96.8,166.352 L68.041,148.04 M74,146 L74,126 C74,123.791 75.791,122 78,122 L120,122 C122.209,122 124,123.791 124,126 L124,146 M101.537,156.425 C97.867,156.466 94.097,155.6 91.143,153.421 C85.925,149.57 85.013,141.889 87.954,136.326 C90.672,131.181 96.727,128.666 102.32,129.871 C107.746,131.041 111.78,135.727 111.898,141.021 C111.901,141.182 111.9,141.343 111.903,141.504 C112.099,152.989 103,148.924 103,145.956 L103,136 M102.028,136.758 C100.359,136.355 98.715,136.201 97.044,136.972 C93.946,138.401 92.718,142.245 93.563,145.245 C93.993,146.772 95.164,148.165 96.765,148.658 C99.973,149.645 101.8,147.883 102.719,145.686"
            id="Stroke-47"
            stroke-linecap="round"
          ></Path>
        </G>
      </G>
    </Svg>
  );
}

ActivityRingsBase = ({ data, config, theme, legend }: ActivityRingsProps) => {
  const cfg: ActivityRingsConfig = { ...defaultCfg, ...config };
  const backPie = PieFactory.create(data, cfg.height, cfg.radius, [0.999, 0.001]);
  const frontPie = PieFactory.create(data, cfg.height, cfg.radius);
  const selectedTheme = THEMES[theme || "dark"];

  return (
    <View style={styles.layout}>
      <View style={{ width: cfg.width, height: cfg.height }}>
        <Svg width={cfg.width} height={cfg.height}>
          <G x={cfg.width / 2} y={cfg.height / 2}>
            <Rings size={cfg.ringSize} pie={backPie} data={data} theme={selectedTheme} opacity={true} />
            <Rings size={cfg.ringSize} pie={frontPie} data={data} theme={selectedTheme} opacity={false} />
          </G>
        </Svg>
      </View>
      {legend && <ActivityLegend data={data} theme={theme} />}
    </View>
  );
}

function Rule(props: configType) {
  const {thickness, width, color, type, dashWidth, dashGap} = props.config;
  if (type === 'solid') {
    return (
      <Svg height={thickness} width={width} {...props}>
        <G fill="lightgray" stroke={color} strokeWidth={thickness}>
          <Path d={`M0 ${thickness / 2}h${width}`} />
        </G>
      </Svg>
    );
  }
  return (
    <Svg height={thickness} width={width} {...props}>
      <G fill="lightgray" stroke={color} strokeWidth={thickness}>
        <Path
          strokeDasharray={`${dashWidth},${dashGap}`}
          d={`M0 ${thickness / 2}h${width}`}
        />
      </G>
    </Svg>
  );
}

export function ProgressBarCircle(this: never, props: Props) {
    const { style, diameter, progress } = props;
    const length = Math.round(diameter * Math.PI);

    const offset = getOffset(diameter, progress);

    return (
        <View style={style}>
            <Svg id="progress-bar-circle" width="100%" height="100%" viewBox={`0 0 ${diameter + 2} ${diameter + 2}`} fill="none">
                <G x={1} y={1}>
                    <Circle
                        opacity="0.2"
                        cx={diameter / 2}
                        cy={diameter / 2}
                        r={diameter / 2}
                        stroke={Colors.ProgressBarCircle.progressBarCircleLine}
                        strokeWidth="1"
                    />
                    <Circle
                        cx={diameter / 2}
                        cy={diameter / 2}
                        r={diameter / 2}
                        stroke={Colors.ProgressBarCircle.progressBarCircleLine}
                        strokeWidth="1"
                        strokeDasharray={length}
                        strokeDashoffset={offset}
                        origin={`${diameter / 2}, ${diameter / 2}`}
                        rotation={-90}
                    />
                </G>
            </Svg>
        </View>
    );
}

function Search({ width = 24, height = 24, fillColor = "#757575" }: Props) {
  return (
    <Svg viewBox="0 0 24 24" {...{ width, height }}>
      <Defs>
        <ClipPath id="prefix__a">
          <Path fill="none" d="M0 0h24v24H0z" />
        </ClipPath>
      </Defs>
      <G data-name="Icons/search/gray" clipPath="url(#prefix__a)">
        <Path fill="rgba(52,151,253,0)" d="M0 0h24v24H0z" />
        <Path
          // eslint-disable-next-line max-len
          d="M16.117 14.96l4.643 4.64a.82.82 0 01-1.16 1.16l-4.64-4.643a7.363 7.363 0 111.157-1.157zm-5.753 1.131a5.727 5.727 0 10-5.728-5.727 5.727 5.727 0 005.728 5.727z"
          fill={fillColor}
        />
      </G>
    </Svg>
  );
}

HotelSVG = ({ color = '#fff' }: SVGProps) => (
  <Svg width={197} height={199} viewBox="0 0 197 199">
    <Defs>
      <Path id="prefix__a" d="M0 0h197v199H0z" />
      <Path
        d="M94.09.797c51.914 0 94 42.086 94 94 0 24.413-9.307 46.652-24.566 63.364l31.386 31.382a5.011 5.011 0 01.004 7.078 5 5 0 01-7.078-.004l-31.435-31.44c-16.587 14.697-38.407 23.62-62.311 23.62-51.914 0-94-42.086-94-94s42.086-94 94-94zm0 10c-46.39 0-84 37.61-84 84s37.61 84 84 84 84-37.61 84-84-37.61-84-84-84z"
        id="prefix__c"
      />
      <Path id="prefix__e" d="M0 0h57v12H0z" />
      <Path
        d="M6.848 1.785c0-.2.035-.387.109-.558.074-.176.172-.325.293-.454.121-.132.266-.234.43-.304.16-.074.34-.11.527-.11.191 0 .371.036.531.11.164.07.309.172.434.304.125.13.223.278.293.454.07.171.105.359.105.558V9.57c0 .203-.035.387-.105.563a1.414 1.414 0 01-.727.758c-.16.074-.34.109-.531.109a1.25 1.25 0 01-.527-.11 1.344 1.344 0 01-.43-.304 1.473 1.473 0 01-.395-1.016l-.007-3.023H3.074V9.57c0 .203-.035.387-.105.563a1.414 1.414 0 01-.727.758c-.164.074-.34.109-.531.109a1.281 1.281 0 01-.957-.414A1.473 1.473 0 01.355 9.57V1.785c0-.2.04-.387.11-.558.07-.176.168-.325.289-.454A1.281 1.281 0 011.71.36c.191 0 .367.036.531.11.164.07.309.172.434.304.125.13.222.278.293.454.07.171.105.359.105.558v2.676h3.774V1.785zm9.117 3.906c0 1.211.195 2.125.578 2.743.387.617.988.925 1.812.925.805 0 1.403-.308 1.801-.921.395-.618.594-1.532.594-2.747 0-.586-.05-1.109-.145-1.566-.093-.457-.238-.84-.437-1.152a1.97 1.97 0 00-.742-.715c-.301-.164-.656-.246-1.07-.246-.41 0-.766.082-1.067.246-.3.164-.55.402-.746.715-.195.312-.34.695-.434 1.152-.097.457-.144.98-.144 1.566zm-2.848 0c0-.808.11-1.55.324-2.234a4.835 4.835 0 01.98-1.766A4.444 4.444 0 0116.056.535c.652-.281 1.418-.418 2.3-.418.852 0 1.606.133 2.262.403.653.27 1.2.648 1.64 1.136.438.492.77 1.078.997 1.762.223.684.336 1.441.336 2.273 0 .813-.11 1.563-.328 2.247a4.858 4.858 0 01-.989 1.761 4.509 4.509 0 01-1.64 1.149c-.656.273-1.414.41-2.278.41-.847 0-1.593-.133-2.246-.399a4.448 4.448 0 01-1.644-1.12 4.821 4.821 0 01-1.008-1.759c-.227-.683-.34-1.445-.34-2.289zm13.66-3.394a1.067 1.067 0 01-.965-.59.906.906 0 010-.754 1.052 1.052 0 01.965-.594h6.688a1.046 1.046 0 01.734.285.93.93 0 01.227.31.854.854 0 01.086.378.825.825 0 01-.086.375.914.914 0 01-.227.305 1.046 1.046 0 01-.734.285H31.5V9.57c0 .203-.035.387-.105.563a1.414 1.414 0 01-.727.758c-.16.074-.34.109-.531.109a1.25 1.25 0 01-.528-.11 1.344 1.344 0 01-.43-.304 1.473 1.473 0 01-.394-1.016V2.297h-2.008zM39.11 11c-.246 0-.457-.05-.625-.152a1.25 1.25 0 01-.406-.403 1.677 1.677 0 01-.219-.55 3.014 3.014 0 01-.066-.618v-6.98c0-.277.016-.535.05-.77.036-.238.11-.441.227-.613s.29-.305.516-.402c.223-.098.523-.149.906-.149h4.703a1.05 1.05 0 01.723.285.96.96 0 01.223.305.916.916 0 010 .742.988.988 0 01-.547.5c-.125.051-.258.075-.399.075h-3.773v2.375h3.441c.145 0 .278.023.403.07.12.05.23.117.324.207a.893.893 0 01.219.305.842.842 0 01.082.367.917.917 0 01-.3.672 1.023 1.023 0 01-.325.199c-.125.05-.258.074-.403.074h-3.441v2.563h3.957c.129 0 .254.027.367.074.117.05.219.117.305.207.09.086.156.187.207.3a.98.98 0 01.07.372.98.98 0 01-.07.37.941.941 0 01-.512.5.895.895 0 01-.367.075h-5.27zm16.364-1.95a1.014 1.014 0 01.691.285 1.014 1.014 0 01.285.692 1.014 1.014 0 01-.285.688 1.014 1.014 0 01-.691.285h-5.016c-.262 0-.484-.059-.66-.172a1.271 1.271 0 01-.422-.453 2.137 2.137 0 01-.219-.64A4.582 4.582 0 0149.094 9V1.785a1.466 1.466 0 01.394-1.012 1.27 1.27 0 01.43-.304c.164-.074.34-.11.531-.11.192 0 .367.036.531.11.165.07.31.172.434.304.125.13.223.278.293.454.07.171.105.359.105.558l.008 7.266h3.653z"
        id="prefix__g"
      />
    </Defs>
    <G fill="none" fillRule="evenodd">
      <G opacity={0.5}>
        <Mask id="prefix__b" fill={color}>
          <Use xlinkHref="#prefix__a" />
        </Mask>
        <G mask="url(#prefix__b)">
          <Mask id="prefix__d" fill={color}>
            <Use xlinkHref="#prefix__c" />
          </Mask>
          <Path
            fill={color}
            fillRule="nonzero"
            mask="url(#prefix__d)"
            d="M-45.918 94.797L94.09-45.211l174.863 174.863L128.945 269.66z"
          />
        </G>
      </G>
      <Path
        d="M53 86a2 2 0 011.996-2h76.008c1.101 0 1.996.902 1.996 2v19a2 2 0 01-1.996 2H54.996A2.003 2.003 0 0153 105V86zM57 107h72v40H57zM57 84h72V48c0-2.21-1.797-4-4-4H61c-2.21 0-4 1.797-4 4v36zM62 44h62v-3c0-1.656-1.352-3-2.992-3H64.992A3 3 0 0062 41v3z"
        stroke={color}
        strokeWidth={2}
      />
      <Path
        d="M78 147h30v-26.008a1.996 1.996 0 00-1.992-1.992H79.992A1.996 1.996 0 0078 120.992V147zM93 120v26"
        stroke={color}
        strokeWidth={2}
      />
      <G transform="translate(66 90)">
        <Mask id="prefix__f" fill={color}>
          <Use xlinkHref="#prefix__e" />
        </Mask>
        <G mask="url(#prefix__f)">
          <Mask id="prefix__h" fill={color}>
            <Use xlinkHref="#prefix__g" />
          </Mask>
          <Path
            fill={color}
            fillRule="nonzero"
            mask="url(#prefix__h)"
            d="M-4.645-4.883H61.45v21.14H-4.645z"
          />
        </G>
      </G>
      <Path
        d="M67 60c0-3.313 2.691-6 6-6 3.313 0 6 2.676 6 6v13.008c0 .547-.457.992-1.004.992h-9.992A1.006 1.006 0 0167 73.008V60zM87 60c0-3.313 2.691-6 6-6 3.313 0 6 2.676 6 6v13.008c0 .547-.457.992-1.004.992h-9.992A1.006 1.006 0 0187 73.008V60zM107 60c0-3.313 2.691-6 6-6 3.313 0 6 2.676 6 6v13.008c0 .547-.457.992-1.004.992h-9.992a1.006 1.006 0 01-1.004-.992V60z"
        stroke={color}
        strokeWidth={2}
      />
      <Path
        stroke={color}
        strokeWidth={2}
        strokeLinecap="round"
        d="M47 147h92M82 163h12M73 155h10M93 155h20M98 133v2M88 133v2"
      />
      <Path stroke={color} strokeWidth={2} d="M58 111h70" />
    </G>
  </Svg>
)

Dollars = ({ withLashes }: EyeProps) => {
  const { colors } = useTheme()

  return (
    <G>
      <Path
        d="M274.398 579.526C273.398 551.166 292.398 527.166 317.678 515.966C320.332 514.88 323.059 513.978 325.838 513.266C339.853 509.802 354.596 510.756 368.048 515.996C371.116 517.177 374.1 518.567 376.978 520.156C406.508 536.046 419.768 573.406 408.338 603.616C407.18 606.662 405.782 609.611 404.158 612.436C400.17 620.744 394.146 627.91 386.648 633.266C384.146 635.107 381.524 636.778 378.798 638.266C351.418 651.266 314.418 647.266 292.348 626.866C290.138 624.523 288.096 622.027 286.238 619.396C284.115 616.393 282.252 613.215 280.668 609.896C277.315 603.091 275.386 595.673 274.998 588.096C274.636 585.253 274.435 582.392 274.398 579.526Z"
        fill="black"
        fillOpacity="0.1"
      />
      <Path
        d="M272.768 561.176C271.768 532.816 290.768 508.816 316.048 497.616C318.699 496.53 321.422 495.628 324.198 494.916C338.211 491.434 352.958 492.37 366.418 497.596C369.483 498.777 372.463 500.167 375.338 501.756C404.868 517.646 418.128 555.016 406.698 585.216C405.548 588.266 404.15 591.216 402.518 594.036C401.135 596.745 399.561 599.352 397.808 601.836C396.079 604.299 394.181 606.638 392.128 608.836C389.908 611.033 387.528 613.062 385.008 614.906C382.508 616.749 379.885 618.42 377.158 619.906C349.778 632.906 312.778 628.906 290.718 608.516C288.507 606.17 286.465 603.671 284.608 601.036C282.482 598.033 280.616 594.855 279.028 591.536C275.665 584.757 273.722 577.363 273.318 569.806C272.96 566.944 272.776 564.062 272.768 561.176Z"
        fill="white"
        stroke={colors.outline}
        strokeWidth="12"
        strokeMiterlimit="10"
      />
      <Path
        d="M586.888 571.466C587.318 556.336 593.558 541.376 601.988 530.136C604.14 527.116 606.521 524.264 609.108 521.606C620.608 509.618 636.01 502.13 652.541 500.489C669.072 498.848 685.646 503.163 699.278 512.656C701.55 514.242 703.73 515.954 705.808 517.786C732.808 539.236 735.928 580.926 721.128 611.016C719.69 613.408 718.093 615.699 716.348 617.876C714.034 620.777 711.5 623.496 708.768 626.006C688.498 643.836 656.958 648.136 631.358 638.426C627.71 637.051 624.182 635.378 620.808 633.426C602.908 622.646 590.438 602.336 587.378 581.196C586.963 577.971 586.8 574.717 586.888 571.466Z"
        fill="black"
        fillOpacity="0.1"
      />
      <Path
        d="M592.378 559.996C592.798 545.846 598.798 531.846 606.898 521.336C608.982 518.502 611.275 515.828 613.758 513.336C625.009 502.097 639.817 495.12 655.646 493.598C671.476 492.077 687.342 496.106 700.528 504.996C702.71 506.473 704.807 508.073 706.808 509.786C732.808 529.856 735.808 568.856 721.548 597.006C720.166 599.251 718.629 601.396 716.948 603.426C714.715 606.142 712.278 608.683 709.658 611.026C690.148 627.706 659.798 631.736 635.168 622.646C631.654 621.343 628.253 619.754 624.998 617.896C607.778 607.816 595.778 588.816 592.828 569.046C592.435 566.047 592.285 563.02 592.378 559.996Z"
        fill="white"
        stroke={colors.outline}
        strokeWidth="12"
        strokeMiterlimit="10"
      />
      <Path
        d="M366 574.928C366 559.556 350.057 555.277 337.836 549.515C330.414 545.645 331.35 536.407 341.986 535.784C347.886 535.426 353.95 537.181 359.436 539.116L362.021 527.313C355.543 525.335 349.743 524.432 344.571 524.296V517H337.429V524.647C323.536 526.56 316.114 535.304 316.114 545.072C316.114 562.544 336.45 565.21 343.1 568.313C352.171 572.384 350.493 580.855 342.286 582.726C335.164 584.345 326.079 581.521 319.25 578.855L316 590.637C322.386 593.949 330.036 595.712 337.429 595.848V603H344.571V595.454C356.407 593.791 366.014 587.241 366 574.928Z"
        fill="#388E3C"
      />
      <Path
        d="M689 574.928C689 559.556 673.057 555.277 660.836 549.515C653.414 545.645 654.35 536.407 664.986 535.784C670.886 535.426 676.95 537.181 682.436 539.116L685.021 527.313C678.543 525.335 672.743 524.432 667.571 524.296V517H660.429V524.647C646.536 526.56 639.114 535.304 639.114 545.072C639.114 562.544 659.45 565.21 666.1 568.313C675.171 572.384 673.493 580.855 665.286 582.726C658.164 584.345 649.079 581.521 642.25 578.855L639 590.637C645.386 593.949 653.036 595.712 660.429 595.848V603H667.571V595.454C679.407 593.791 689.014 587.241 689 574.928Z"
        fill="#388E3C"
      />
      {withLashes && (
        <G>
          <LeftLash />
          <RightLash />
        </G>
      )}
    </G>
  )
}

AnimatedCheckbox = (props: Props) => {
  const { checked, checkmarkColor, highlightColor, boxOutlineColor } = props

  const progress = useSharedValue(0)

  useEffect(() => {
    progress.value = withTiming(checked ? 1 : 0, {
      duration: checked ? 300 : 100,
      easing: Easing.linear
    })
  }, [checked])

  const animatedBoxProps = useAnimatedProps(
    () => ({
      stroke: interpolateColor(
        Easing.bezierFn(0.16, 1, 0.3, 1)(progress.value),
        [0, 1],
        [boxOutlineColor, highlightColor],
        'RGB'
      ),
      fill: interpolateColor(
        Easing.bezierFn(0.16, 1, 0.3, 1)(progress.value),
        [0, 1],
        ['#00000000', highlightColor],
        'RGB'
      )
    }),
    [highlightColor, boxOutlineColor]
  )

  return (
    <Svg
      viewBox={[-MARGIN, -MARGIN, vWidth + MARGIN, vHeight + MARGIN].join(' ')}
    >
      <Defs>
        <ClipPath id="clipPath">
          <Path
            fill="white"
            stroke="gray"
            strokeLinejoin="round"
            strokeLinecap="round"
            d={outlineBoxPath}
          />
        </ClipPath>
      </Defs>
      <AnimatedStroke
        progress={progress}
        d={checkMarkPath}
        stroke={highlightColor}
        strokeWidth={10}
        strokeLinejoin="round"
        strokeLinecap="round"
        strokeOpacity={checked || false ? 1 : 0}
      />
      <AnimatedPath
        d={outlineBoxPath}
        strokeWidth={7}
        strokeLinejoin="round"
        strokeLinecap="round"
        animatedProps={animatedBoxProps}
      />
      <G clipPath="url(#clipPath)">
        <AnimatedStroke
          progress={progress}
          d={checkMarkPath}
          stroke={checkmarkColor}
          strokeWidth={10}
          strokeLinejoin="round"
          strokeLinecap="round"
          strokeOpacity={checked || false ? 1 : 0}
        />
      </G>
    </Svg>
  )
}

/* SVGR has dropped some elements not supported by react-native-svg: filter */

function SvgAzerbaijan(props: SvgProps) {
  return (
    <Svg
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      fill="none"
      viewBox="0 0 40 40"
      width="24"
      height="24"
      {...props}
    >
      <Path
        fill="url(#azerbaijan_svg__pattern0)"
        fillRule="evenodd"
        d="M20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20z"
        clipRule="evenodd"
      />
      <Mask id="azerbaijan_svg__a" width={40} height={40} x={0} y={0} maskUnits="userSpaceOnUse">
        <Path
          fill="#fff"
          fillRule="evenodd"
          d="M20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20z"
          clipRule="evenodd"
        />
      </Mask>
      <G mask="url(#azerbaijan_svg__a)">
        <Rect width={56} height={40} x={-8} fill="#fff" rx={2} />
        <Mask id="azerbaijan_svg__b" width={56} height={40} x={-8} y={0} maskUnits="userSpaceOnUse">
          <Rect width={56} height={40} x={-8} fill="#fff" rx={2} />
        </Mask>
        <G mask="url(#azerbaijan_svg__b)">
          <Path fill="#24AAD5" fillRule="evenodd" d="M-8 13h56V0H-8v13z" clipRule="evenodd" />
          <Path fill="#21BF75" fillRule="evenodd" d="M-8 40h56V27H-8v13z" clipRule="evenodd" />
          <Path fill="#ED1845" fillRule="evenodd" d="M-8 27h56V13H-8v14z" clipRule="evenodd" />
          <G filter="url(#azerbaijan_svg__filter0_d)">
            <Path
              fill="#fff"
              fillRule="evenodd"
              d="M20 23.5c.823 0 1.587-.248 2.223-.674a3.333 3.333 0 110-6.652A4 4 0 1020 23.5zm4-4a1.333 1.333 0 11-2.667 0 1.333 1.333 0 012.667 0z"
              clipRule="evenodd"
            />
          </G>
        </G>
      </G>
      <Defs>
        <Pattern
          id="azerbaijan_svg__pattern0"
          width={1}
          height={1}
          patternContentUnits="objectBoundingBox"
        >
          <Use transform="scale(.0039)" xlinkHref="#azerbaijan_svg__image0" />
        </Pattern>
      </Defs>
    </Svg>
  );
}

SimplePatch = ({ withLashes }: EyeProps) => {
  const { colors } = useTheme()

  return (
    <G>
      <Path
        d="M274.398 579.526C273.398 551.166 292.398 527.166 317.678 515.966C320.332 514.88 323.059 513.978 325.838 513.266C339.853 509.802 354.596 510.756 368.048 515.996C371.116 517.177 374.1 518.567 376.978 520.156C406.508 536.046 419.768 573.406 408.338 603.616C407.18 606.662 405.782 609.611 404.158 612.436C400.17 620.744 394.146 627.91 386.648 633.266C384.146 635.107 381.524 636.778 378.798 638.266C351.418 651.266 314.418 647.266 292.348 626.866C290.138 624.523 288.096 622.027 286.238 619.396C284.115 616.393 282.252 613.215 280.668 609.896C277.315 603.091 275.386 595.673 274.998 588.096C274.636 585.253 274.435 582.392 274.398 579.526Z"
        fill="black"
        fillOpacity="0.1"
      />
      <Path
        d="M272.768 561.176C271.768 532.816 290.768 508.816 316.048 497.616C318.699 496.53 321.422 495.628 324.198 494.916C338.211 491.434 352.958 492.37 366.418 497.596C369.483 498.777 372.463 500.167 375.338 501.756C404.868 517.646 418.128 555.016 406.698 585.216C405.548 588.266 404.15 591.216 402.518 594.036C401.135 596.745 399.561 599.352 397.808 601.836C396.079 604.299 394.181 606.638 392.128 608.836C389.908 611.033 387.528 613.062 385.008 614.906C382.508 616.749 379.885 618.42 377.158 619.906C349.778 632.906 312.778 628.906 290.718 608.516C288.507 606.17 286.465 603.671 284.608 601.036C282.482 598.033 280.615 594.855 279.028 591.536C275.665 584.757 273.722 577.363 273.318 569.806C272.96 566.944 272.776 564.062 272.768 561.176Z"
        fill="white"
        stroke={colors.outline}
        strokeWidth="12"
        strokeMiterlimit="10"
      />
      <Path
        d="M341.508 574.026C348.268 574.026 353.748 568.546 353.748 561.786C353.748 555.026 348.268 549.546 341.508 549.546C334.748 549.546 329.268 555.026 329.268 561.786C329.268 568.546 334.748 574.026 341.508 574.026Z"
        fill={colors.outline}
      />
      <Path
        d="M731.448 624.107C748.517 588.27 761.013 550.606 760.975 510.912C665.554 510.912 481.792 372.529 399.803 261.356C380.482 268.67 361.205 277.483 345.96 289.712C416.152 428.074 596.844 662.23 704.176 662.23C712.317 651.235 725.299 637.019 731.448 624.107Z"
        fill="black"
        fillOpacity="0.1"
      />
      <Path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M345.96 289.712C361.205 277.483 380.482 268.67 399.803 261.356C481.792 372.529 665.554 510.912 760.975 510.912C761.013 550.606 748.517 588.27 731.448 624.107C725.299 637.019 712.317 651.235 704.176 662.23C596.844 662.23 416.152 428.074 345.96 289.712Z"
        fill="black"
        fillOpacity="0.1"
      />
      <Path
        d="M740.88 614.731C757.949 578.895 766.788 539.694 766.75 500C671.329 500 487.568 361.617 405.578 250.444C386.258 257.758 368.008 267.251 351.13 278.624C421.322 416.986 612.148 651.695 719.48 651.695C727.569 640 734.731 627.643 740.88 614.731Z"
        fill="#633749"
      />
      <Path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M351.13 278.624C368.008 267.251 386.258 257.758 405.578 250.444C487.568 361.617 671.329 500 766.75 500C766.788 539.694 757.949 578.895 740.88 614.731C734.731 627.643 727.569 640 719.48 651.695C612.148 651.695 421.322 416.986 351.13 278.624Z"
        fill="#633749"
      />
      <Path
        d="M740.88 614.731C757.949 578.895 766.788 539.694 766.75 500C671.329 500 487.568 361.617 405.578 250.444C386.258 257.758 368.008 267.251 351.13 278.624C421.322 416.986 612.148 651.695 719.48 651.695C727.569 640 734.731 627.643 740.88 614.731Z"
        fill="none"
        stroke={colors.outline}
        strokeWidth="12"
        strokeMiterlimit="10"
      />
      <Path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M351.13 278.624C368.008 267.251 386.258 257.758 405.578 250.444C487.568 361.617 671.329 500 766.75 500C766.788 539.694 757.949 578.895 740.88 614.731C734.731 627.643 727.569 640 719.48 651.695C612.148 651.695 421.322 416.986 351.13 278.624Z"
        fill="none"
        stroke={colors.outline}
        strokeWidth="12"
        strokeMiterlimit="10"
      />
      {withLashes && <LeftLash />}
    </G>
  )
}

AnimatedG = Reanimated.createAnimatedComponent(G)

export default function Wave (props: Props) {
    const { progress, withPlus, plusColor, style } = props;
    const length = 630;
    const offset = length * (100 - progress) / 100;

    return (
        <Svg width="100%" height="100%" viewBox="0 0 218 220" fill="none" style={style}>
            <Defs>
                {/* we NEED clipRule here */}
                <ClipPath id="wave-clip" clipRule="evenodd">
                    <G>
                        <Path
                            fillRule="evenodd"
                            transform="rotate(90 110 110)"
                            // tslint:disable-next-line: max-line-length
                            d="M167.749 197.47C169.107 196.479 170.446 195.449 171.767 194.381C181.435 186.557 189.117 177.051 194.834 166.501C195.424 165.54 196.003 164.568 196.574 163.586C205.191 148.759 217.037 128.254 217.152 110.071C217.248 94.8703 208.228 80.4389 200.111 67.4512C199.034 65.7276 197.972 64.0294 196.95 62.3582C183.624 34.9578 158.435 14.3466 127.427 7.03459C125.706 6.21235 124.158 5.17409 122.629 4.1491C119.805 2.25553 117.048 0.407225 113.395 0.0497075C110.242 -0.258805 106.163 0.92399 102.206 2.07139C99.6143 2.82281 97.0752 3.55905 94.8829 3.85132C84.83 4.43592 75.4135 6.37855 66.7223 9.48522C56.1605 13.2068 46.0631 18.7557 36.8825 26.1848C32.2165 29.9606 27.0144 32.3548 22.1854 34.5773C16.0489 37.4016 10.5149 39.9485 7.44918 44.7009C4.65501 49.0325 4.90491 54.5243 5.16446 60.2284C5.37546 64.8654 5.59284 69.6426 4.18641 74.0506C-1.82264 92.8845 -1.18946 115.078 4.97405 136.013C5.18875 137.112 5.41363 138.204 5.64897 139.284C6.94998 144.086 9.49521 149.701 12.2822 155.014C15.3919 161.472 19.0581 167.64 23.2419 173.358C23.6719 174.001 23.9141 174.354 23.9141 174.354C23.9141 174.354 24.1539 174.653 24.6207 175.201C25.178 175.93 25.744 176.651 26.3186 177.364C42.3413 197.24 63.9799 209.828 86.9416 214.623C87.993 214.878 89.0443 215.11 90.0946 215.32C91.3745 215.752 92.6458 216.224 93.9185 216.697L93.9198 216.698C98.3548 218.346 102.807 220 107.699 220C112.295 220 117.19 218.364 121.913 216.785C123.954 216.103 125.963 215.431 127.902 214.907C129.892 214.516 131.874 214.064 133.843 213.551C144.038 211.077 152.535 207.099 161.557 201.866C163.681 200.486 165.745 199.02 167.749 197.47ZM18.1896 49.1087C9.22271 64.2228 4.29764 82.5587 4.16835 102.985C4.1128 111.761 6.76854 117.794 9.73711 124.537C11.3508 128.202 13.0569 132.078 14.4702 136.718C15.868 141.307 16.7836 145.13 17.6157 148.604C19.3873 155.999 20.7799 161.813 25.6403 170.077C32.4992 181.74 43.6432 192.791 56.5912 201.2C66.1636 206.863 76.6203 210.989 87.627 213.167C91.2229 213.878 94.8549 211.8 98.5471 209.687C101.826 207.811 105.153 205.907 108.544 205.907C111.678 205.907 114.806 207.874 117.899 209.817C121.317 211.966 124.692 214.088 127.983 213.494C128.049 213.482 128.116 213.47 128.182 213.458C128.242 213.447 128.301 213.436 128.36 213.425C135.708 211.742 142.705 209.32 149.278 206.216C170.537 195.257 185.373 175.584 192.551 158.956C196.934 150.563 194.336 140.222 191.696 129.711C190.031 123.084 188.349 116.388 188.389 110.071C188.349 103.859 190.907 97.7719 193.392 91.859C196.48 84.5115 199.455 77.4326 197.193 70.7161C196.709 69.5546 196.204 68.4004 195.68 67.2539C187.715 50.6288 175.339 35.6717 160.017 24.5793C148.676 17.0683 136.044 12.1512 122.944 9.21225C119.485 8.43631 115.763 9.66805 112.046 10.8979C109.007 11.9035 105.971 12.9079 103.087 12.8123C99.9148 12.7072 96.8866 11.5796 93.8831 10.4613C90.0633 9.03902 86.2834 7.63157 82.2978 8.36079C66.4087 11.2679 51.0579 16.3402 37.6822 27.1641C29.8767 33.4804 23.3831 40.9106 18.1896 49.1087Z"
                        />
                    </G>
                </ClipPath>
            </Defs>
            <G>
                <Circle
                    clipPath="url(#wave-clip)"
                    id="circle-bg"
                    cx="109"
                    cy="110"
                    r="100"
                    fillRule="evenodd"
                    stroke="#EDE9FC"
                    strokeWidth="50"
                    transform="rotate(-90 110 110)"
                />
                <Circle
                    clipPath="url(#wave-clip)"
                    id="circle"
                    cx="109"
                    cy="110"
                    r="100"
                    stroke="url(#paint0_linear)"
                    fill="transparent"
                    strokeWidth="50"
                    transform="rotate(-90 110 110)"
                    strokeDasharray={length}
                    strokeDashoffset={offset}
                />
                {withPlus && (
                    // slint:disable-next-line: max-line-length
                    <Path
                        d="M0.783936 7.96134H8.33219V0.413086H9.56324V7.96134H17.1115V9.19239H9.56324V16.7406H8.33219V9.19239H0.783936V7.96134Z"
                        fill={plusColor || 'white'}
                        transform="scale(4) translate(18, 18)"
                    />
                )}
            </G>
            <Defs>
                <LinearGradient id="paint0_linear" x1="77.8789" y1="53.2234" x2="126.388" y2="109.037" gradientUnits="userSpaceOnUse">
                    <Stop offset="0" stopColor="#B39DFF" />
                    <Stop offset="1" stopColor="#7154DF" />
                </LinearGradient>
            </Defs>
        </Svg>
    );
}

Front = ({ color }: ClothingProps & HatProps) => {
  const { colors } = useTheme()

  const { base } = colors.clothing[color]

  return (
    <G transform={{ scale: 1, origin: 'center' }}>
      <Path
        d="M331 453C414.833 434 604.1 408.5 690.5 458.5C660.5 410.5 574.3 363.5 491.5 363.5C428.5 363.5 342.2 408.6 331 453Z"
        fill="black"
        fillOpacity="0.15"
      />
      <Path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M477.5 215.5C236 253 190 432.5 226 597C242.632 673 298.98 696.047 320.5 755.5C350 837 413.5 843.5 480.5 843.5C555 843.5 681.4 776 687 814C697.8 811.2 699 765.5 665 755.5C715 767.311 740.395 707.5 769 639.5C826 504 791.5 215.5 477.5 215.5ZM254.5 565C254.5 441.4 430 415.5 540.5 395.5C635.5 416.5 748.5 469.4 748.5 565C748.5 631.5 633.4 722 489 744C301.4 704 254.5 611.5 254.5 565Z"
        fill={base}
        stroke={colors.outline}
        strokeWidth="12"
      />
      <Path d="M258 535.5C246.5 454 259.3 381 318.5 315C278 387 265 433.5 258 535.5Z" fill="black" fillOpacity="0.2" />
      <Path
        d="M666 760L668 752C644.667 745 590.6 736.4 561 758C581.333 752 630.8 744 666 760Z"
        fill="black"
        fillOpacity="0.2"
      />
      <Path
        d="M345 748.5C380.5 839.5 479.5 831 611.5 790.5C380.5 828.5 372.333 771.5 345 748.5Z"
        fill="black"
        fillOpacity="0.2"
      />
      <Path
        d="M332 705.5C376.5 758.5 370 801.5 528.5 791.5C431 786.5 403.5 778.5 332 705.5Z"
        fill="white"
        fillOpacity="0.2"
      />
      <Path
        d="M302.5 418C338.5 286.5 440.5 259 563.5 290C446.7 283.6 363 315.881 302.5 418Z"
        fill="white"
        fillOpacity="0.2"
      />
    </G>
  )
}

export function ProgressBarCircleGradient(this: never, props: PropsGradient) {
    const { animationStep, title, diameter, gradient, progress, style, titleStyle, startFromBottom } = props;
    const length = Math.round(diameter * Math.PI);

    const [ offset ] = React.useState(() => {
        const startProgress = progress - (animationStep || 0.1);
        return new Animated.Value(getOffset(diameter, startProgress));
    });

    React.useEffect(() => {
        Animated.timing(offset, {
            toValue: getOffset(diameter, progress),
            duration: 2000,
            delay: 750,
        }).start();
    }, [progress]);

    const boxSize = diameter + 6;
    const origin = diameter / 2;

    const defaultTitleStyles: StyleProp<TextStyle> = {
        position: 'absolute',
        alignItems: 'center',
        justifyContent: 'center',
    };

    return (
        <View style={style}>
            <Text style={[TextStyles.p3, defaultTitleStyles, titleStyle]}>{title}</Text>
            <Svg id="progress-bar-circle" width="100%" height="100%" viewBox={`0 0 ${boxSize} ${boxSize}`} fill="none">
                <G x={3} y={3}>
                    <Circle
                        id="circle-bg"
                        opacity="0.2"
                        cx={diameter / 2}
                        cy={diameter / 2}
                        r={diameter / 2}
                        strokeWidth="3"
                        stroke="url(#paint0_linear)"
                        fill="none"
                    />
                    <AnimatedContainer
                        id="circle-progress"
                        fill="none"
                        cx={diameter / 2}
                        cy={diameter / 2}
                        r={diameter / 2}
                        strokeWidth="3"
                        stroke="url(#paint0_linear)"
                        strokeDasharray={length}
                        strokeDashoffset={offset}
                        origin={`${origin}, ${origin}`}
                        rotation={startFromBottom ? 90 : -90}
                    />
                </G>
                <Defs>
                    {gradient ? (
                        <LinearGradient id="paint0_linear" x1={diameter / 2} y1={diameter} x2={diameter} y2={0} gradientUnits="userSpaceOnUse">
                            {gradient.map((color, i) => {
                                // tslint:disable-next-line: no-unused-expression
                                return <Stop key={`${color.title}_${i}`} offset={color.offset} stopColor={color.title}/>;
                            })}
                        </LinearGradient>
                    ) : (
                        <LinearGradient id="paint0_linear" x1={0} y1={diameter / 2} x2={diameter} y2={diameter / 2} gradientUnits="userSpaceOnUse">
                            <Stop offset="0.0996095" stopColor="#FFCECF"/>
                            <Stop offset="0.238673" stopColor="#9A87E7"/>
                            <Stop offset="0.384948" stopColor="#FFAFD5"/>
                            <Stop offset="0.512681" stopColor="#FA8989"/>
                            <Stop offset="0.642474" stopColor="#CFC4FF"/>
                            <Stop offset="0.776388" stopColor="#FFAFD5"/>
                            <Stop offset="0.90206" stopColor="#FFCED0"/>
                        </LinearGradient>
                    )}
                </Defs>
            </Svg>
        </View>
    );
}

StoreSVG = ({ color = '#fff' }: SVGProps) => (
  <Svg width={197} height={199} viewBox="0 0 197 199">
    <Defs>
      <Path
        d="M94.09 10.797c-46.392 0-84 37.609-84 84 0 46.392 37.608 84 84 84s84-37.608 84-84c0-46.391-37.608-84-84-84zm0-10c51.915 0 94 42.086 94 94 0 24.4-9.296 46.629-24.54 63.337l-.026.027 31.385 31.383a4.999 4.999 0 11-7.071 7.071L156.4 165.18l-.047.042c-16.22 14.352-37.436 23.187-60.708 23.564l-1.555.013c-51.914 0-94-42.086-94-94 0-51.915 42.086-94 94-94z"
        id="prefix__a"
      />
      <Path
        d="M4.947.116a8.21 8.21 0 011.663.19c.288.064.565.146.831.246s.502.217.707.352c.205.134.37.286.494.457.125.171.187.362.187.572a.808.808 0 01-.256.6.879.879 0 01-.6.234.86.86 0 01-.404-.095 9.526 9.526 0 00-.64-.3 4.839 4.839 0 00-.59-.205 4.068 4.068 0 00-.604-.117 5.892 5.892 0 00-.685-.037c-.235 0-.465.02-.692.062-.227.042-.43.108-.608.198-.178.09-.323.206-.432.348a.823.823 0 00-.165.52.82.82 0 00.234.593c.156.162.36.3.612.418.251.117.536.22.853.308.317.087.637.178.96.27.517.157.987.323 1.41.498.422.176.783.386 1.083.63.3.245.533.534.696.868.164.335.246.736.246 1.205 0 .513-.102.974-.304 1.384-.203.41-.495.76-.876 1.048-.38.288-.84.509-1.38.663-.54.153-1.146.23-1.82.23a8.927 8.927 0 01-2.066-.241 7.04 7.04 0 01-.923-.286 4.026 4.026 0 01-.754-.38 1.915 1.915 0 01-.505-.466.901.901 0 01-.183-.538c0-.122.025-.242.076-.36.052-.116.118-.223.198-.318.08-.095.171-.172.271-.23a.584.584 0 01.297-.088c.088 0 .173.014.256.044.083.029.167.064.253.106.085.041.173.086.264.135.09.05.186.093.289.132.337.152.715.288 1.135.41.42.122.86.183 1.318.183.25 0 .485-.023.707-.07.222-.046.418-.116.586-.212.169-.095.302-.218.4-.37a.992.992 0 00.146-.549 1.02 1.02 0 00-.33-.765 1.615 1.615 0 00-.359-.25 3.438 3.438 0 00-.432-.186l-.33-.117A3.164 3.164 0 015 6.778a2.516 2.516 0 00-.19-.063l-.382-.11a4.31 4.31 0 01-.212-.054 2.417 2.417 0 01-.293-.103 3.326 3.326 0 00-.154-.055l-.688-.242a8.018 8.018 0 01-1.143-.505 3.011 3.011 0 01-.776-.593c-.2-.22-.348-.47-.443-.751a3.045 3.045 0 01-.143-.978c0-.488.101-.93.304-1.325A2.87 2.87 0 011.75.988 4.228 4.228 0 013.127.343a6.737 6.737 0 011.82-.227zm22.185 0c.855 0 1.61.135 2.263.403a4.414 4.414 0 011.641 1.139c.44.49.772 1.078.996 1.761.225.684.337 1.44.337 2.27 0 .816-.11 1.566-.33 2.25a4.81 4.81 0 01-.988 1.761c-.44.49-.986.873-1.64 1.146-.655.274-1.414.41-2.279.41-.844 0-1.593-.132-2.245-.395a4.455 4.455 0 01-1.644-1.124 4.806 4.806 0 01-1.007-1.755c-.227-.683-.34-1.447-.34-2.292 0-.806.108-1.55.325-2.234a4.858 4.858 0 01.978-1.765A4.473 4.473 0 0124.833.534c.654-.279 1.42-.418 2.3-.418zm-8.357.242c.19 0 .368.037.531.11.164.073.308.174.433.304a1.467 1.467 0 01.4 1.014l-.001 7.786c0 .2-.036.387-.107.56-.07.173-.168.325-.292.454-.125.13-.269.23-.433.304-.163.073-.34.11-.53.11-.191 0-.368-.037-.532-.11a1.33 1.33 0 01-.428-.304 1.458 1.458 0 01-.396-1.014l-.007-3.025h-3.772v3.025c0 .2-.035.387-.106.56-.07.173-.169.325-.293.454-.125.13-.269.23-.432.304-.164.073-.34.11-.531.11-.19 0-.368-.037-.531-.11a1.33 1.33 0 01-.429-.304 1.458 1.458 0 01-.395-1.014V1.786a1.468 1.468 0 01.395-1.014c.122-.13.265-.231.429-.304.163-.074.34-.11.53-.11.191 0 .368.037.532.11.163.073.307.174.432.304.124.13.222.28.293.454.07.173.106.36.106.56V4.46h3.772V1.787c0-.2.037-.387.11-.56.073-.173.17-.325.293-.454.122-.13.265-.231.428-.304.164-.074.341-.11.531-.11zm19.776 0a8.77 8.77 0 011.622.146c.52.098.98.27 1.38.517.401.246.72.582.96 1.007.24.425.36.962.36 1.611 0 .562-.105 1.049-.312 1.461-.208.413-.5.756-.88 1.03a3.963 3.963 0 01-1.365.611 7.218 7.218 0 01-1.765.201h-1.678v2.63c0 .2-.036.387-.11.56a1.477 1.477 0 01-.296.454c-.124.13-.268.23-.432.304-.164.073-.34.11-.531.11-.19 0-.367-.037-.531-.11a1.33 1.33 0 01-.429-.304 1.46 1.46 0 01-.395-1.014v-7.2c0-.278.018-.54.055-.787a1.56 1.56 0 01.234-.641c.12-.18.296-.324.528-.429.231-.105.545-.157.94-.157h2.645zM27.132 2.013c-.41 0-.765.082-1.065.246a2 2 0 00-.744.714c-.195.312-.34.697-.436 1.153a7.706 7.706 0 00-.142 1.564c0 1.21.192 2.125.578 2.743.386.617.989.926 1.81.926.805 0 1.406-.307 1.801-.922.396-.616.593-1.531.593-2.747 0-.586-.047-1.107-.143-1.564-.095-.456-.24-.84-.435-1.153a2 2 0 00-.744-.714c-.3-.164-.658-.246-1.073-.246zm11.096-.007h-1.355v3.303h1.231c.313 0 .598-.027.857-.08.259-.054.48-.143.663-.268.183-.124.326-.29.428-.494.103-.205.154-.481.154-.828 0-.342-.049-.611-.146-.81a1.257 1.257 0 00-.407-.479 1.714 1.714 0 00-.622-.264 3.703 3.703 0 00-.803-.08z"
        id="prefix__c"
      />
    </Defs>
    <G fill="none" fillRule="evenodd">
      <G opacity={0.5}>
        <Mask id="prefix__b" fill={color}>
          <Use xlinkHref="#prefix__a" />
        </Mask>
        <Path
          fill={color}
          mask="url(#prefix__b)"
          d="M-45.917 94.797L94.09-45.21l174.863 174.863L128.946 269.66z"
        />
      </G>
      <Path
        d="M127.562 90h-75.57c-.54 0-.992.449-.992 1.002v5.068c0 3.267 2.659 5.93 5.939 5.93a5.943 5.943 0 005.866-5h.289a5.944 5.944 0 005.865 5 5.943 5.943 0 005.867-5h.288a5.944 5.944 0 005.866 5 5.943 5.943 0 005.866-5h.289a5.944 5.944 0 005.866 5c2.49 0 4.63-1.537 5.51-3.715A5.946 5.946 0 00104.02 102a5.943 5.943 0 005.866-5h.289a5.944 5.944 0 005.866 5 5.943 5.943 0 005.866-5h.288a5.944 5.944 0 005.866 5c3.273 0 5.939-2.655 5.939-5.93v-5.068c0-.546-.444-1.002-.992-1.002h-5.446z"
        stroke={color}
        strokeWidth={2}
        strokeLinejoin="round"
      />
      <Path
        stroke={color}
        strokeWidth={2}
        d="M104.071 102v34M130.071 102v34M126.071 102v34M59.071 102v34M55.071 102v34"
      />
      <Path
        stroke={color}
        strokeWidth={2}
        strokeLinecap="round"
        d="M48.071 137h92M83.071 153h12M74.071 145h10M94.071 145h20M108.071 122v2"
      />
      <Path
        d="M109.071 114.01c0-.558.456-1.01 1.003-1.01h9.995a1 1 0 011.002 1.01v1.98a1.01 1.01 0 01-1.002 1.01h-9.995a1 1 0 01-1.003-1.01v-1.98z"
        stroke={color}
        strokeWidth={2}
      />
      <Path
        stroke={color}
        strokeWidth={2}
        strokeLinejoin="round"
        d="M111.071 113l3.965-5h0l3.964 5"
      />
      <Path
        stroke={color}
        strokeWidth={2}
        d="M60 125h44M51 90c0-.552.323-1.297.74-1.68L63.34 77.68c.409-.376 1.183-.68 1.742-.68h54.997c.553 0 1.333.309 1.733.68l11.457 10.64c.404.376.732 1.133.732 1.68h0-83 0zM110.071 71v7M75.071 71v7M65 55c0-2.21 1.799-4 4-4h47a4 4 0 014 4v13c0 2.21-1.799 4-4 4H69a4 4 0 01-4-4V55z"
      />
      <G transform="translate(71 56)">
        <Mask id="prefix__d" fill={color}>
          <Use xlinkHref="#prefix__c" />
        </Mask>
        <Path
          fill={color}
          mask="url(#prefix__d)"
          d="M-4.564-4.884h52.436v21.14H-4.564z"
        />
      </G>
    </G>
  </Svg>
)

PiratePatch = ({ withLashes }: EyeProps) => {
  const { colors } = useTheme()

  return (
    <G>
      <Path
        d="M274.398 579.526C273.398 551.166 292.398 527.166 317.678 515.966C320.332 514.88 323.059 513.978 325.838 513.266C339.853 509.802 354.596 510.756 368.048 515.996C371.116 517.177 374.1 518.567 376.978 520.156C406.508 536.046 419.768 573.406 408.338 603.616C407.18 606.662 405.782 609.611 404.158 612.436C400.17 620.744 394.146 627.91 386.648 633.266C384.146 635.107 381.524 636.778 378.798 638.266C351.418 651.266 314.418 647.266 292.348 626.866C290.138 624.523 288.096 622.027 286.238 619.396C284.115 616.393 282.252 613.215 280.668 609.896C277.315 603.091 275.386 595.673 274.998 588.096C274.636 585.253 274.435 582.392 274.398 579.526Z"
        fill="black"
        fillOpacity="0.1"
      />
      <Path
        d="M272.768 561.176C271.768 532.816 290.768 508.816 316.048 497.616C318.699 496.53 321.422 495.628 324.198 494.916C338.211 491.434 352.958 492.37 366.418 497.596C369.483 498.777 372.463 500.167 375.338 501.756C404.868 517.646 418.128 555.016 406.698 585.216C405.548 588.266 404.15 591.216 402.518 594.036C401.135 596.745 399.561 599.352 397.808 601.836C396.079 604.299 394.181 606.638 392.128 608.836C389.908 611.033 387.528 613.062 385.008 614.906C382.508 616.749 379.885 618.42 377.158 619.906C349.778 632.906 312.778 628.906 290.718 608.516C288.507 606.17 286.465 603.671 284.608 601.036C282.482 598.033 280.615 594.855 279.028 591.536C275.665 584.757 273.722 577.363 273.318 569.806C272.96 566.944 272.776 564.062 272.768 561.176Z"
        fill="white"
        stroke={colors.outline}
        strokeWidth="12"
        strokeMiterlimit="10"
      />
      <Path
        d="M341.508 574.026C348.268 574.026 353.748 568.546 353.748 561.786C353.748 555.026 348.268 549.546 341.508 549.546C334.748 549.546 329.268 555.026 329.268 561.786C329.268 568.546 334.748 574.026 341.508 574.026Z"
        fill={colors.outline}
      />
      <Path
        d="M318.4 304.611C434.725 459.583 625.347 556.941 760.645 556.941"
        fill="none"
        stroke={colors.outline}
        strokeWidth="12"
        strokeMiterlimit="10"
      />
      <Path
        d="M566.075 556.461C564.793 520.105 589.15 489.338 621.558 474.98C624.957 473.587 628.448 472.431 632.006 471.519C649.97 467.054 668.875 468.254 686.13 474.954C690.06 476.467 693.88 478.249 697.565 480.287C735.421 500.657 752.42 548.564 737.767 587.279C736.293 591.188 734.501 594.97 732.409 598.586C730.637 602.058 728.619 605.4 726.371 608.585C724.155 611.742 721.722 614.74 719.089 617.559C716.243 620.375 713.193 622.976 709.962 625.34C706.757 627.703 703.395 629.844 699.898 631.75C664.799 648.415 617.366 643.287 589.086 617.148C586.252 614.141 583.635 610.937 581.254 607.559C578.529 603.71 576.136 599.635 574.1 595.381C569.79 586.69 567.299 577.211 566.78 567.524C566.322 563.854 566.086 560.159 566.075 556.461Z"
        fill="black"
        fillOpacity="0.1"
      />
      <Path
        d="M573.149 546.415C571.936 512.026 594.975 482.924 625.629 469.343C628.844 468.026 632.146 466.932 635.512 466.069C652.504 461.846 670.386 462.981 686.708 469.319C690.424 470.75 694.038 472.435 697.524 474.363C733.331 493.631 749.41 538.946 735.551 575.566C734.156 579.263 732.461 582.84 730.482 586.261C728.806 589.545 726.897 592.706 724.771 595.719C722.675 598.705 720.373 601.541 717.883 604.207C715.191 606.871 712.306 609.331 709.25 611.567C706.218 613.802 703.038 615.828 699.731 617.63C666.53 633.394 621.664 628.544 594.915 603.819C592.234 600.974 589.758 597.943 587.506 594.749C584.928 591.107 582.665 587.254 580.739 583.229C576.662 575.009 574.306 566.043 573.816 556.88C573.382 553.408 573.159 549.914 573.149 546.415Z"
        fill="#633749"
        stroke={colors.outline}
        strokeWidth="12"
        strokeMiterlimit="10"
      />
      {withLashes && <LeftLash />}
    </G>
  )
}

render() {
        const data = this.model;

        if (!data || data.length <= 0) {
            return null;
        }

        const zeroPoint = {
            x: 0,
            y: 0.5,
        };

        const lastPoint = {
            x: data.length + 1,
            y: 0.5,
        };

        const points = [zeroPoint, ...data.map((p, i) => ({ x: i + 1, y: p.value })), lastPoint];
        const designHeight = 80;
        const paddingHor = Layout.window.width - CHART_ITEMS_GAP;
        let designWidth = (data.length - 1) * CHART_ITEMS_GAP + paddingHor;

        if (designWidth < Layout.window.width) {
            designWidth = Layout.window.width;
        }

        const lineCoords = getPathCoords(points, designHeight, designWidth);
        const areaCoords = getAreaCords(points, designHeight, designWidth);
        const dots = getDotsCoords(points, designHeight, designWidth);

        const labels = data.filter(item => item).map((item, i) => {
            return (
                <View key={i} style={[styles.textBlock, { left: dots[i + 1].x }]}>
                    <Text style={[TextStyles.labelSmall, styles.sentiment]}>{item.title.toUpperCase()}</Text>
                    <Text style={[TextStyles.labelSmall, styles.date]}>{item.date.toUpperCase()}</Text>
                </View>
            );
        });

        return (
            <View>
                <View style={[ styles.labelsContainer ]}>{labels}</View>
                <Svg height={designHeight + 20} width={designWidth} viewBox={`0 0 ${designWidth} ${designHeight + 20}`} style={styles.svg}>
                    <Defs>
                        <LinearGradient id="bg">
                            {data.map((point, i) => <Stop key={i} offset={`${(i + 1) * (100 / (data.length + 1))}%`} stopColor={point.color} />)}
                        </LinearGradient>
                    </Defs>

                    <G translateY="10">
                        <Path d={areaCoords} stroke="none" fill="url(#bg)" />
                        <Path d={lineCoords} stroke="white" fill="transparent" strokeWidth="2" />

                        {data.map((point, i) => {
                            const coords = dots[i + 1];

                            return (
                                <G key={i} translate={[ coords.x, coords.y ]}>
                                    <Path d={`M1 ${designHeight - coords.y}L1 0`} stroke="#fff" strokeDasharray="5 5"/>
                                    <Circle r="6" stroke="white" fill={point.color} strokeWidth="2" />
                                </G>
                            );
                        })}
                    </G>
                </Svg>
            </View>
        );
    }

TargetBars: FC<Props> = ({
  data,
  scaleX,
  scaleY,
  barWidth,
  onPress,
  start
}) => {
  const end = addHours(new Date(start ?? new Date()), 8)

  const { bars } = useMemo(
    () => ({
      bars: data.map((datum) => {
        const y = scaleY(new Date(start ?? new Date()).valueOf())
        const x = scaleX(new Date(datum.date))
        const height =
          scaleY(end.valueOf()) -
          scaleY(new Date(start ?? new Date()).valueOf())

        if (Number.isNaN(y)) return null

        return (
          <G onPress={() => onPress(datum)} key={datum.date}>
            <Rect
              x={x}
              width={barWidth}
              fillOpacity={0.1}
              rx={5}
              y={y}
              height={height}
              fill={colors.darkBlue}
            />
          </G>
        )
      })
    }),
    [barWidth, data, end, onPress, scaleX, scaleY, start]
  )

  if (!start && typeof start !== 'string') return null

  return <G>{bars}</G>
}

renderBubbles = () => {
        const { rendersCount, nodeData } = this._chart;
        const { theme } = this.props;
        const skipRenders = 10;

        if (rendersCount <= skipRenders) {
            return null;
        }

        // render circle and text elements inside a group
        const bubbles = nodeData.map((item, index) => {
            let fontSize = item.r * 0.3;

            if (item.value.length > 8) {
                fontSize *= 0.8;
            }

            let stroke: string;
            let fill: string;
            let mainTextColor: string;

            switch (theme) {
                case Themes.dark:
                    mainTextColor = item.r > 50 ? Colors.bubbleChartDarkTheme.mainTextColor.large : Colors.bubbleChartDarkTheme.mainTextColor.small;
                    fill = item.r > 50 ? Colors.bubbleChartDarkTheme.fill.large : Colors.bubbleChartDarkTheme.fill.small;
                    break;
                case Themes.light:
                    mainTextColor = item.r > 50 ? Colors.bubbleChartLightTheme.mainTextColor.large : Colors.bubbleChartLightTheme.mainTextColor.small;
                    stroke = item.r > 50 ? Colors.bubbleChartLightTheme.stroke.large : Colors.bubbleChartLightTheme.stroke.small;
                    fill = Colors.bubbleChartLightTheme.fill.small;
                    break;
                default:
            }

            const value = BubbleCHart.tryToBreakLine(item.value);
            const translateValue = value.length > 1 ? -(value.length / 2) * fontSize * 0.85 : 0;

            return (
                <G key={index} translateX={item.x} translateY={item.y}>
                    <Circle
                        r={item.r}
                        strokeWidth="1"
                        stroke={stroke}
                        fill={fill}
                    />
                    <SvgText
                        y={4}
                        translateY={translateValue}
                        textAnchor="middle"
                        fontSize={fontSize}
                        fontWeight="normal"
                        fontFamily="HelveticaNeue-Medium"
                        fill={mainTextColor}
                    >
                        {item.r > 20 && value}
                    </SvgText>
                    <SvgText
                        y={4}
                        translateY={(value.length / 2) * fontSize + 5}
                        fill={Colors.bubbleChartSVGText}
                        textAnchor="middle"
                        fontSize={fontSize * 0.6}
                        fontWeight="normal"
                        fontFamily="HelveticaNeue-Medium"
                        >
                        {item.r > 50 && item.count + ' TIMES'}
                    </SvgText>
                </G>
            );
        });

        return bubbles;
    }

export function ReferralGiftIcon(): JSX.Element {
  const theme = useTheme().colorTheme;
  return (
    <Svg width="51px" height="56px" viewBox="0 0 51 56">
      <G
        id="Page-1"
        stroke="none"
        stroke-width="1"
        fill="none"
        fill-rule="evenodd"
      >
        <G
          id="ISTOCKPHOTO_1084909636"
          transform="translate(-134.000000, -293.000000)"
          strokeWidth="2"
        >
          <Polygon
            id="Fill-1"
            fill={theme.white}
            points="1 475.94 499 475.94 499 -4 1 -4"
          ></Polygon>
          <Path
            d="M62.935,406.545 L57.278,412.201 L51.622,406.545 L57.278,400.888 L62.935,406.545 Z M48.617,395.467 C48.617,392.245 51.228,389.633 54.45,389.633 C57.671,389.633 60.283,392.245 60.283,395.467 C60.283,397.077 59.63,398.536 58.575,399.591 L54.45,403.716 L50.325,399.591 C49.27,398.536 48.617,397.077 48.617,395.467 Z M60.283,395.467 C60.283,394.779 60.158,394.123 59.94,393.512 C59.328,393.294 58.672,393.169 57.985,393.169 C54.764,393.169 52.152,395.78 52.152,399.002 C52.152,400.613 52.805,402.071 53.861,403.127 L54.45,403.716 L58.575,399.591 C59.63,398.535 60.283,397.077 60.283,395.467 Z M47.379,398.716 C44.617,398.716 42.379,400.955 42.379,403.716 C42.379,406.478 44.617,408.716 47.379,408.716 C48.76,408.716 50.01,408.156 50.915,407.252 L54.45,403.716 L50.915,400.181 C50.01,399.275 48.76,398.716 47.379,398.716 Z M47.379,408.716 C46.79,408.716 46.228,408.609 45.703,408.422 C45.516,407.897 45.409,407.335 45.409,406.746 C45.409,403.985 47.648,401.746 50.409,401.746 C51.79,401.746 53.04,402.307 53.945,403.211 L54.45,403.716 L50.915,407.252 C50.01,408.156 48.76,408.716 47.379,408.716 Z M421,346 L429,346 L429,310 L421,310 L421,346 Z M413,346 L421,346 L421,310 L413,310 L413,346 Z M410,310 C407.791,310 406,311.791 406,314 L406,342 C406,344.209 407.791,346 410,346 L413,346 L413,310 L410,310 Z M429,346 L437,346 L437,310 L429,310 L429,346 Z M448,310 L445,310 L445,346 L448,346 C450.209,346 452,344.209 452,342 L452,314 C452,311.791 450.209,310 448,310 Z M437,346 L445,346 L445,310 L437,310 L437,346 Z M431.05,298.05 C433.784,295.316 438.216,295.316 440.949,298.05 C443.684,300.784 443.684,305.216 440.949,307.95 C439.583,309.316 437.791,310 436,310 L429,310 L429,303 C429,301.209 429.684,299.417 431.05,298.05 Z M440.949,307.95 C441.532,307.367 441.983,306.704 442.317,306 C441.983,305.296 441.532,304.633 440.949,304.05 C438.216,301.316 433.784,301.316 431.05,304.05 C429.684,305.417 429,307.209 429,309 L429,310 L436,310 C437.791,310 439.583,309.316 440.949,307.95 Z M426.949,298.05 C424.216,295.316 419.784,295.316 417.05,298.05 C414.316,300.784 414.316,305.216 417.05,307.95 C418.417,309.316 420.208,310 422,310 L429,310 L429,303 C429,301.209 428.316,299.417 426.949,298.05 Z M417.05,307.95 C416.468,307.367 416.017,306.704 415.683,306 C416.017,305.296 416.468,304.633 417.05,304.05 C419.784,301.316 424.216,301.316 426.949,304.05 C428.316,305.417 429,307.209 429,309 L429,310 L422,310 C420.208,310 418.417,309.316 417.05,307.95 Z M355,324.935 L355,340.935 C355,343.144 353.209,344.935 351,344.935 L327,344.935 C324.791,344.935 323,343.144 323,340.935 L323,324.935 L355,324.935 Z M355.8,324.935 L322.2,324.935 C321.537,324.935 321,324.397 321,323.734 L321,318.135 C321,317.472 321.537,316.935 322.2,316.935 L355.8,316.935 C356.463,316.935 357,317.472 357,318.135 L357,323.734 C357,324.397 356.463,324.935 355.8,324.935 Z"
            id="Stroke-12"
            stroke="#20211F"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></Path>
          <G
            id="Group-2"
            transform="translate(135.000000, 294.234000)"
            stroke={theme.success}
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
          >
            <Path
              d="M43.949,17.999 L10.349,17.999 C9.687,17.999 9.149,17.462 9.149,16.8 L9.149,11.2 C9.149,10.537 9.687,9.999 10.349,9.999 L43.949,9.999 C44.612,9.999 45.149,10.537 45.149,11.2 L45.149,16.8 C45.149,17.462 44.612,17.999 43.949,17.999 Z"
              id="Path"
            ></Path>
            <Polygon
              id="Path"
              points="27.099 33.947 27.199 33.947 27.199 9.999 27.099 9.999"
            ></Polygon>
            <Path
              d="M22.043,33.947 L34.277,33.947 C35.941,33.947 37.303,35.309 37.303,36.973 L42.837,31.44 C42.934,31.342 43.043,31.266 43.149,31.185 L43.149,17.999 L11.149,17.999 L11.149,33.81 C12.743,33.071 14.471,32.606 16.285,32.606 C18.834,32.606 20.457,33.169 22.043,33.947 Z"
              id="Path"
            ></Path>
            <Path
              d="M28.614,1.464 C30.566,-0.488 33.732,-0.488 35.685,1.464 C37.637,3.417 37.637,6.582 35.685,8.536 C34.708,9.512 33.429,9.999 32.149,9.999 L27.149,9.999 L27.149,4.999 C27.149,3.72 27.637,2.441 28.614,1.464 Z"
              id="Path"
            ></Path>
            <Path
              d="M25.685,1.464 C23.732,-0.488 20.566,-0.488 18.614,1.464 C16.661,3.417 16.661,6.582 18.614,8.536 C19.59,9.512 20.87,9.999 22.149,9.999 L27.149,9.999 L27.149,4.999 C27.149,3.72 26.661,2.441 25.685,1.464 Z"
              id="Path"
            ></Path>
            <Path
              d="M6.369,37.247 L16.285,47.164 C17.053,46.414 18.064,46.002 19.138,46.002 L34.277,46.002 C35.881,46.002 37.388,45.378 38.522,44.245 L47.082,35.684 C47.642,35.124 47.95,34.376 47.95,33.579 C47.95,32.783 47.642,32.035 47.082,31.475 C46.522,30.915 45.775,30.607 44.978,30.607 C44.18,30.607 43.433,30.915 42.873,31.475 L37.353,36.995 C37.342,38.682 35.966,40.05 34.277,40.05 L26.381,40.05 L26.381,39.951 L34.277,39.951 C35.918,39.951 37.253,38.616 37.253,36.974 C37.253,35.332 35.918,33.996 34.277,33.996 L22.021,33.992 C20.386,33.191 18.786,32.657 16.285,32.657 C11.683,32.657 8.109,35.516 6.369,37.247 Z"
              id="Path"
            ></Path>
            <Path
              d="M16.285,47.305 L6.227,37.247 L6.263,37.212 C8.001,35.473 11.615,32.557 16.285,32.557 C18.799,32.557 20.411,33.092 22.055,33.897 L34.277,33.897 C35.934,33.897 37.289,35.213 37.351,36.856 L42.802,31.405 C43.38,30.826 44.153,30.506 44.978,30.506 C45.801,30.506 46.574,30.826 47.152,31.405 C47.731,31.983 48.05,32.755 48.05,33.579 C48.05,34.404 47.731,35.176 47.152,35.754 L38.592,44.315 C37.44,45.467 35.907,46.102 34.277,46.102 L19.138,46.102 C18.074,46.102 17.073,46.517 16.32,47.27 L16.285,47.305 Z"
              id="Path"
            ></Path>
            <Path
              d="M16.285,50.088 L13.431,52.941 C12.644,53.729 11.366,53.729 10.578,52.941 L0.591,42.954 C-0.197,42.166 -0.197,40.889 0.591,40.101 L3.444,37.247 C4.232,36.459 5.51,36.459 6.298,37.247 L16.285,47.235 C17.073,48.023 17.073,49.3 16.285,50.088 Z"
              id="Path"
            ></Path>
          </G>
        </G>
      </G>
    </Svg>
  );
}

FallAsleepWindow: FC<FallAsleepWindowProps> = ({
  goToSleepWindowStart,
  goToSleepWindowEnd,
  x,
  y,
  radius
}) => {
  const startAngle = clockTimeToAngle(goToSleepWindowStart)
  const endAngle = clockTimeToAngle(goToSleepWindowEnd)

  const startTime = format(
    new Date(goToSleepWindowStart ?? new Date()),
    'HH:mm'
  )
  const endTime = format(new Date(goToSleepWindowEnd ?? new Date()), 'HH:mm')

  if (
    startAngle === undefined ||
    endAngle === undefined ||
    startAngle === null ||
    endAngle === null
  ) {
    return null
  }

  const path = describeArc(x, y, radius, startAngle, endAngle)
  const textPath = describeReverseArc(x, y, radius - 10, startAngle, endAngle)

  const time = `${startTime} - ${endTime}`
  return (
    <G>
      <G>
        <Defs>
          <Path
            id="textPath"
            d={textPath}
            fill="none"
            stroke="none"
            strokeWidth="1"
          />
        </Defs>
        <Backdrop d={textPath} fill="none" strokeOpacity={1} strokeWidth="20" />

        <Text
          fill={colors.fallAsleep}
          fontSize="15"
          fontWeight="bold"
          fontFamily={fonts.bold}>
          <TextPath
            href="#textPath"
            startOffset="50%"
            textAnchor="end"
            midLine="smooth">
            <TSpan dy={5} transform={{ scaleX: 1 }} textAnchor="middle">
              {time}
            </TSpan>
          </TextPath>
        </Text>
      </G>
      <Path
        d={path}
        fill="transparent"
        strokeLinecap="round"
        stroke={colors.bedTimeColor}
        strokeWidth={5}
      />
    </G>
  )
}

export function GiftIcon(): JSX.Element {
  const theme = useTheme().colorTheme;
  return (
    <Svg width="50px" height="52px" viewBox="0 0 50 52">
      <G id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
        <G
          id="ISTOCKPHOTO_1084909636"
          transform="translate(-44.000000, -115.000000)"
          strokeWidth="2"
        >
          <Polygon
            id="Fill-1"
            fill={theme.white}
            points="0 479.94 498 479.94 498 0 0 0"
          ></Polygon>
          <Path
            d="M80,233.5 C79.724,233.5 79.5,233.276 79.5,233 C79.5,232.724 79.724,232.5 80,232.5 C80.276,232.5 80.5,232.724 80.5,233 C80.5,233.276 80.276,233.5 80,233.5 Z M80,239.5 C79.724,239.5 79.5,239.276 79.5,239 C79.5,238.724 79.724,238.5 80,238.5 C80.276,238.5 80.5,238.724 80.5,239 C80.5,239.276 80.276,239.5 80,239.5 Z M80,245.5 C79.724,245.5 79.5,245.275 79.5,245 C79.5,244.725 79.724,244.5 80,244.5 C80.276,244.5 80.5,244.725 80.5,245 C80.5,245.275 80.276,245.5 80,245.5 Z M80,251.5 C79.867,251.5 79.742,251.448 79.648,251.354 C79.595,251.301 79.56,251.248 79.532,251.182 C79.514,251.135 79.5,251.066 79.5,251 C79.5,250.873 79.556,250.737 79.647,250.646 C79.737,250.557 79.873,250.501 80.002,250.501 C80.15,250.521 80.197,250.54 80.244,250.555 C80.239,250.554 80.235,250.553 80.234,250.553 C80.225,250.553 80.264,250.575 80.299,250.598 C80.295,250.596 80.293,250.595 80.293,250.595 C80.29,250.595 80.327,250.62 80.358,250.651 C80.448,250.741 80.5,250.867 80.5,251 C80.5,251.066 80.486,251.134 80.459,251.205 C80.44,251.249 80.405,251.301 80.353,251.353 C80.258,251.447 80.132,251.5 80,251.5 Z M85.927,227.494 C85.849,227.478 85.799,227.458 85.748,227.441 C85.755,227.444 85.759,227.445 85.762,227.445 C85.771,227.445 85.733,227.423 85.698,227.401 C85.552,227.258 85.5,227.133 85.5,227 C85.5,226.873 85.556,226.738 85.647,226.647 L85.766,226.562 L85.914,226.509 C85.928,226.508 85.941,226.508 85.955,226.508 C86.144,226.508 86.269,226.563 86.353,226.647 C86.444,226.738 86.5,226.873 86.5,227 C86.5,227.133 86.448,227.258 86.353,227.354 C86.258,227.448 86.133,227.5 86,227.5 C85.967,227.5 85.94,227.497 85.927,227.494 Z M86,233.5 C85.724,233.5 85.5,233.276 85.5,233 C85.5,232.724 85.724,232.5 86,232.5 C86.276,232.5 86.5,232.724 86.5,233 C86.5,233.276 86.276,233.5 86,233.5 Z M86,239.5 C85.724,239.5 85.5,239.276 85.5,239 C85.5,238.724 85.724,238.5 86,238.5 C86.276,238.5 86.5,238.724 86.5,239 C86.5,239.276 86.276,239.5 86,239.5 Z M86,245.5 C85.724,245.5 85.5,245.275 85.5,245 C85.5,244.725 85.724,244.5 86,244.5 C86.276,244.5 86.5,244.725 86.5,245 C86.5,245.275 86.276,245.5 86,245.5 Z M86,251.5 C85.867,251.5 85.742,251.448 85.648,251.354 C85.595,251.301 85.56,251.248 85.532,251.182 C85.514,251.135 85.5,251.066 85.5,251 C85.5,250.867 85.552,250.741 85.647,250.646 C85.681,250.612 85.725,250.584 85.767,250.553 C85.761,250.558 85.759,250.56 85.76,250.56 C85.763,250.56 85.779,250.551 85.8,250.54 C85.837,250.528 85.908,250.513 85.908,250.513 L86.098,250.512 C86.15,250.521 86.197,250.54 86.244,250.555 C86.239,250.554 86.236,250.553 86.234,250.553 C86.225,250.553 86.264,250.575 86.299,250.598 C86.311,250.605 86.334,250.628 86.358,250.651 C86.443,250.737 86.5,250.873 86.5,251 C86.5,251.066 86.486,251.134 86.459,251.205 C86.44,251.249 86.405,251.301 86.353,251.353 C86.258,251.447 86.132,251.5 86,251.5 Z M407,141 L407,163 C407,165.209 408.791,167 411,167 L425,167 L425,141 L407,141 Z M433,167 L447,167 C449.209,167 451,165.209 451,163 L451,141 L433,141 L433,167 Z M451.8,129 L406.2,129 C405.537,129 405,129.537 405,130.2 L405,139.8 C405,140.462 405.537,141 406.2,141 L425,141 L425,129 L433,129 L433,141 L451.8,141 C452.463,141 453,140.462 453,139.8 L453,130.2 C453,129.537 452.463,129 451.8,129 Z M425,167 L433,167 L433,129 L425,129 L425,167 Z M431.05,117.05 C433.784,114.316 438.216,114.316 440.95,117.05 C443.684,119.784 443.684,124.216 440.95,126.95 C439.583,128.316 437.791,129 436,129 L429,129 L429,122 C429,120.208 429.684,118.417 431.05,117.05 Z"
            id="Stroke-19"
            stroke="#20211F"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></Path>
          <G
            id="Group"
            transform="translate(45.000000, 116.000000)"
            stroke={theme.success}
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
          >
            <Path
              d="M46,24 L46,46 C46,48.209 44.21,50 42,50 L6,50 C3.791,50 2,48.209 2,46 L2,24 L46,24 Z"
              id="Path"
            ></Path>
            <Path
              d="M46.8,24 L1.2,24 C0.538,24 0,23.463 0,22.8 L0,13.2 C0,12.537 0.538,12 1.2,12 L46.8,12 C47.463,12 48,12.537 48,13.2 L48,22.8 C48,23.463 47.463,24 46.8,24 Z"
              id="Path"
            ></Path>
            <Polygon id="Path" points="19 50 29 50 29 24 19 24"></Polygon>
            <Polygon id="Path" points="18 24 30 24 30 12 18 12"></Polygon>
            <Path
              d="M30,12 C30,8.686 27.314,6 24,6 C20.687,6 18,8.686 18,12 L30,12 Z"
              id="Path"
            ></Path>
            <Path
              d="M36,0 C31.923,0 28.768,3.454 26.718,6.656 C27.847,7.231 28.768,8.152 29.344,9.281 C31.152,7.419 33.387,6 36,6 C38.221,6 40.158,7.207 41.195,9 C41.706,8.117 42,7.093 42,6 C42,2.686 39.314,0 36,0 Z"
              id="Path"
            ></Path>
            <Path
              d="M36,6 C33.387,6 31.152,7.419 29.344,9.281 C29.76,10.098 30,11.02 30,12 L36,12 C38.221,12 40.158,10.793 41.195,9 C40.158,7.207 38.221,6 36,6 Z"
              id="Path"
            ></Path>
            <Path
              d="M12,6 C14.613,6 16.849,7.419 18.656,9.281 C19.232,8.152 20.153,7.231 21.282,6.656 C19.232,3.454 16.078,0 12,0 C8.687,0 6,2.686 6,6 C6,7.093 6.294,8.117 6.805,9 C7.842,7.207 9.78,6 12,6 Z"
              id="Path"
            ></Path>
            <Path
              d="M12,6 C9.78,6 7.842,7.207 6.805,9 C7.842,10.793 9.78,12 12,12 L18,12 C18,11.02 18.24,10.098 18.656,9.281 C16.849,7.419 14.613,6 12,6 Z"
              id="Path"
            ></Path>
          </G>
        </G>
      </G>
    </Svg>
  );
}

SleepArc: FC<Props> = ({
  night,
  value,
  color,
  strokeWidth,
  x,
  y,
  outline,
  radius
}) => {
  if (!night) {
    return <G />
  }

  const arcs = night
    .filter((n: Night) => n.value === value)
    .map((part: Night) => {
      const path = describeArc(
        x,
        y,
        radius,
        getAngleAM(part.startDate),
        getAngleAM(part.endDate)
      ).toString()

      if (outline) {
        return (
          <G key={`${part.id}_outline`}>
            <Path
              d={path}
              strokeLinecap="round"
              fill="none"
              stroke={color}
              strokeWidth={strokeWidth}
            />
            <ThemedPath
              d={path}
              strokeLinecap="round"
              fill="none"
              strokeWidth={strokeWidth - 5}
            />
          </G>
        )
      }

      return (
        <Path
          d={path}
          strokeLinecap="round"
          fill="none"
          stroke={color}
          key={part.id}
          strokeWidth={strokeWidth}
        />
      )
    })

  return <G>{arcs}</G>
}