scales_cms

defmodule ScalesCmsWeb.SvgComponents do
  @moduledoc """
  Provides custom made UI components.
  """
  use Phoenix.Component

  attr :width, :string, default: "100"
  attr :height, :string, default: "100"

  attr :class, :any, default: nil
  attr :id, :any, default: nil
  attr :style, :string, default: ""
  attr :fill, :string, default: nil

  attr :type, :string, values: ~w(
      scales_logo scales_logo_small chevron drag_handle toggle_up cms_rich_text spinner
    )

  def svg(%{type: "scales_logo"} = assigns) do
    ~H"""
    <svg
      style={@style}
      xmlns="http://www.w3.org/2000/svg"
      class={[@class]}
      width={[@width, "px"]}
      height={[@height, "px"]}
      viewBox="0 0 526 147"
      fill="none"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M258.927 132.594C252.854 132.481 246.107 131.807 242.058 130.57C238.122 129.332 234.973 127.589 232.611 125.34C230.249 122.978 228.562 120.11 227.55 116.737C226.65 113.25 226.201 109.314 226.201 104.928V3.37389L246.613 0V101.048C246.613 103.522 246.781 105.603 247.119 107.29C247.569 108.977 248.3 110.439 249.312 111.676C250.324 112.8 251.673 113.7 253.36 114.375C254.985 114.883 258.353 115.299 260.979 115.623L260.979 115.623C261.261 115.658 261.534 115.692 261.795 115.724L258.927 132.594ZM266.667 66.803C264.417 72.6511 263.293 79.4551 263.293 87.2151C263.293 93.8504 264.192 99.9796 265.992 105.603C267.791 111.113 270.547 115.949 274.258 120.11C277.969 124.159 282.693 127.364 288.428 129.726C294.164 131.975 300.912 133.1 308.672 133.1C311.708 133.1 314.688 132.931 317.612 132.594C320.536 132.257 323.236 131.807 325.71 131.244C328.296 130.794 330.546 130.288 332.458 129.726C334.482 129.051 336.056 128.433 337.181 127.87L334.482 111.17C332.12 112.182 328.859 113.138 324.698 114.037C320.649 114.937 316.15 115.387 311.202 115.387C302.767 115.387 296.301 113.475 291.802 109.651C287.416 105.715 284.942 100.205 284.38 93.1194H342.579C342.692 91.9947 342.748 90.7577 342.748 89.4081C342.86 87.9461 342.917 86.6527 342.917 85.5281C342.917 70.5705 339.486 59.3242 332.626 51.7892C325.878 44.2542 316.432 40.4867 304.286 40.4867C299.112 40.4867 294.051 41.4989 289.103 43.5232C284.155 45.4351 279.769 48.3591 275.945 52.2953C272.121 56.119 269.028 60.9549 266.667 66.803ZM321.324 70.1769C322.111 72.6511 322.505 75.294 322.505 78.1056H284.548C284.886 75.5189 285.504 72.9885 286.404 70.5143C287.304 68.0401 288.541 65.8471 290.115 63.9352C291.802 62.0233 293.827 60.5051 296.188 59.3805C298.55 58.1434 301.305 57.5248 304.454 57.5248C307.491 57.5248 310.077 58.0871 312.214 59.2118C314.463 60.2239 316.319 61.686 317.781 63.5978C319.356 65.3972 320.536 67.5903 321.324 70.1769ZM390.031 114.375C387.557 115.612 383.621 116.231 378.222 116.231C372.824 116.231 367.988 115.668 363.715 114.544C359.553 113.419 355.955 112.238 352.918 111.001L349.376 128.039C351.287 128.826 354.605 129.839 359.329 131.076C364.052 132.425 370.294 133.1 378.054 133.1C389.637 133.1 398.522 130.963 404.707 126.69C411.005 122.304 414.154 115.893 414.154 107.458C414.154 103.522 413.648 100.148 412.636 97.3367C411.624 94.5252 409.993 92.051 407.744 89.9142C405.607 87.6649 402.852 85.6968 399.478 84.0099C396.104 82.2105 391.999 80.4111 387.163 78.6116C384.239 77.5995 381.765 76.6435 379.741 75.7438C377.716 74.7317 376.086 73.7757 374.848 72.876C373.611 71.8639 372.712 70.7955 372.149 69.6708C371.699 68.5462 371.475 67.2529 371.475 65.7909C371.475 62.8668 372.768 60.73 375.355 59.3805C377.941 57.9185 381.315 57.1874 385.476 57.1874C390.087 57.1874 394.136 57.6373 397.622 58.537C401.109 59.3242 403.976 60.2239 406.226 61.2361L409.937 44.704C407.575 43.8043 404.033 42.9046 399.309 42.0049C394.586 40.9928 389.637 40.4867 384.464 40.4867C374.23 40.4867 366.133 42.8484 360.172 47.5719C354.212 52.1828 351.231 58.537 351.231 66.6343C351.231 70.7955 351.85 74.338 353.087 77.2621C354.436 80.0737 356.236 82.4916 358.485 84.516C360.734 86.5403 363.377 88.3397 366.414 89.9142C369.563 91.3762 372.993 92.782 376.704 94.1315C382.777 96.3808 387.107 98.4614 389.694 100.373C392.393 102.285 393.742 104.703 393.742 107.627C393.742 110.776 392.505 113.025 390.031 114.375ZM195.299 115.556C192.038 116.231 187.258 116.568 180.96 116.568C175.787 116.568 171.682 115.668 168.645 113.869C165.609 111.957 164.091 108.583 164.091 103.747C164.091 101.273 164.653 99.2486 165.778 97.6741C166.902 95.9872 168.364 94.6939 170.164 93.7942C172.076 92.8944 174.156 92.2759 176.405 91.9385C178.767 91.6011 181.073 91.4324 183.322 91.4324C185.908 91.4324 188.27 91.6011 190.407 91.9385C192.544 92.2759 194.175 92.6133 195.299 92.9507V115.556ZM196.311 43.0171C191.7 41.3302 186.021 40.4867 179.273 40.4867C173.65 40.4867 168.364 40.9365 163.416 41.8362C158.468 42.7359 154.7 43.6356 152.113 44.5354L154.644 61.0674C157.118 60.1677 160.323 59.3805 164.259 58.7057C168.196 58.0309 172.525 57.6935 177.249 57.6935C180.735 57.6935 183.603 58.1434 185.852 59.0431C188.214 59.9428 190.07 61.2361 191.419 62.9231C192.881 64.4975 193.893 66.3532 194.456 68.49C195.018 70.6268 195.299 72.876 195.299 75.2378V78.6116C192.488 77.9369 189.845 77.487 187.371 77.2621C184.896 76.9247 182.535 76.756 180.285 76.756C175.449 76.756 170.782 77.2621 166.284 78.2743C161.898 79.174 158.018 80.7484 154.644 82.9977C151.27 85.1345 148.571 87.9461 146.546 91.4324C144.635 94.9188 143.679 99.1924 143.679 104.253C143.679 109.539 144.522 113.981 146.209 117.58C148.008 121.179 150.426 124.103 153.463 126.352C156.612 128.601 160.379 130.232 164.765 131.244C169.152 132.257 173.987 132.763 179.273 132.763C187.258 132.763 194.399 132.257 200.697 131.244C207.108 130.345 211.887 129.557 215.036 128.883V75.4064C215.036 70.2332 214.418 65.5097 213.181 61.2361C212.056 56.85 210.088 53.1388 207.276 50.1023C204.577 47.0658 200.922 44.704 196.311 43.0171ZM70.5197 86.8777C70.5197 80.3548 71.5319 74.2818 73.5562 68.6587C75.5806 62.9231 78.4484 57.9747 82.1597 53.8136C85.9834 49.6524 90.5944 46.391 95.9926 44.0293C101.391 41.6675 107.464 40.4867 114.212 40.4867C122.534 40.4867 130.406 42.0049 137.829 45.0414L133.443 61.7422C131.081 60.73 128.382 59.8866 125.345 59.2118C122.421 58.537 119.272 58.1996 115.899 58.1996C107.914 58.1996 101.841 60.73 97.6796 65.7909C93.5184 70.7392 91.4379 77.7682 91.4379 86.8777C91.4379 95.6498 93.406 102.622 97.3422 107.796C101.278 112.857 107.914 115.387 117.248 115.387C120.734 115.387 124.165 115.05 127.538 114.375C130.912 113.7 133.836 112.857 136.311 111.844L139.178 128.714C136.929 129.839 133.499 130.851 128.888 131.75C124.39 132.65 119.722 133.1 114.886 133.1C107.351 133.1 100.772 131.975 95.1491 129.726C89.6385 127.364 85.0275 124.159 81.3162 120.11C77.7174 115.949 75.0183 111.057 73.2189 105.434C71.4194 99.6985 70.5197 93.513 70.5197 86.8777ZM40.6554 114.375C38.1812 115.612 34.245 116.231 28.8468 116.231C23.4485 116.231 18.6126 115.668 14.339 114.544C10.1779 113.419 6.57909 112.238 3.54258 111.001L0 128.039C1.91187 128.826 5.22953 129.839 9.95298 131.076C14.6764 132.425 20.9181 133.1 28.6781 133.1C40.2618 133.1 49.1463 130.963 55.3318 126.69C61.6297 122.304 64.7787 115.893 64.7787 107.458C64.7787 103.522 64.2726 100.148 63.2604 97.3367C62.2483 94.5252 60.6176 92.051 58.3683 89.9142C56.2315 87.6649 53.4762 85.6968 50.1023 84.0099C46.7284 82.2105 42.6235 80.4111 37.7876 78.6116C34.8635 77.5995 32.3893 76.6435 30.365 75.7438C28.3407 74.7317 26.71 73.7757 25.4729 72.876C24.2358 71.8639 23.3361 70.7955 22.7738 69.6708C22.3239 68.5462 22.099 67.2529 22.099 65.7909C22.099 62.8668 23.3923 60.73 25.979 59.3805C28.5656 57.9185 31.9395 57.1874 36.1006 57.1874C40.7116 57.1874 44.7603 57.6373 48.2466 58.537C51.733 59.3242 54.6008 60.2239 56.8501 61.2361L60.5613 44.704C58.1996 43.8043 54.657 42.9046 49.9336 42.0049C45.2101 40.9928 40.2618 40.4867 35.0885 40.4867C24.8543 40.4867 16.757 42.8484 10.7964 47.5719C4.83591 52.1828 1.85564 58.537 1.85564 66.6343C1.85564 70.7955 2.47419 74.338 3.71128 77.2621C5.06084 80.0737 6.86024 82.4916 9.1095 84.516C11.3588 86.5403 14.0016 88.3397 17.0381 89.9142C20.1871 91.3762 23.6172 92.782 27.3285 94.1315C33.4015 96.3808 37.7313 98.4614 40.318 100.373C43.0171 102.285 44.3667 104.703 44.3667 107.627C44.3667 110.776 43.1296 113.025 40.6554 114.375Z"
        fill="url(#paint0_linear_362_1738)"
      />
      <g filter="url(#filter0_d_362_1738)">
        <path
          opacity="0.7"
          d="M468.148 129.247C466.148 131.247 462.922 131.265 460.943 129.286L444.817 113.161C439.87 108.213 439.913 100.148 444.915 95.1464L461.215 78.8462C463.215 76.8457 466.441 76.8282 468.42 78.8073L489.921 100.308C491.9 102.287 491.882 105.513 489.882 107.513L468.148 129.247Z"
          fill="url(#paint1_linear_362_1738)"
        />
        <path
          opacity="0.7"
          d="M467.816 92.3456C465.849 94.3121 462.633 94.2845 460.633 92.284L444.332 75.9837C439.331 70.9824 439.262 62.9426 444.178 58.0263L460.201 42.0033C462.168 40.0368 465.384 40.0643 467.384 42.0649L489.118 63.7985C491.119 65.799 491.146 69.0149 489.18 70.9815L467.816 92.3456Z"
          fill="url(#paint2_linear_362_1738)"
        />
        <path
          d="M486.294 111.433C484.293 113.434 481.05 113.434 479.049 111.433L462.749 95.1332C457.748 90.1318 457.748 82.0231 462.749 77.0218L479.049 60.7215C481.05 58.721 484.293 58.721 486.294 60.7215L508.027 82.4552C510.028 84.4557 510.028 87.6992 508.027 89.6997L486.294 111.433Z"
          fill="url(#paint3_linear_362_1738)"
        />
      </g>
      <defs>
        <filter
          id="filter0_d_362_1738"
          x="424.536"
          y="24.5464"
          width="100.992"
          height="122.212"
          filterUnits="userSpaceOnUse"
          color-interpolation-filters="sRGB"
        >
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            result="hardAlpha"
          />
          <feOffset />
          <feGaussianBlur stdDeviation="8" />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0" />
          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_362_1738" />
          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_362_1738" result="shape" />
        </filter>
        <linearGradient
          id="paint0_linear_362_1738"
          x1="-190.119"
          y1="-207.325"
          x2="518.355"
          y2="184.821"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#1E4F84" />
          <stop offset="1" stop-color="#A3C0DF" />
        </linearGradient>
        <linearGradient
          id="paint1_linear_362_1738"
          x1="452.293"
          y1="171.756"
          x2="405.121"
          y2="113.775"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#1E4F84" />
          <stop offset="1" stop-color="#A3C0DF" />
        </linearGradient>
        <linearGradient
          id="paint2_linear_362_1738"
          x1="452.601"
          y1="134.503"
          x2="405.101"
          y2="75.7736"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#1E4F84" />
          <stop offset="1" stop-color="#A3C0DF" />
        </linearGradient>
        <linearGradient
          id="paint3_linear_362_1738"
          x1="470.583"
          y1="154.087"
          x2="422.969"
          y2="95.4312"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#1E4F84" />
          <stop offset="1" stop-color="#A3C0DF" />
        </linearGradient>
      </defs>
    </svg>
    """
  end

  def svg(%{type: "scales_logo_small"} = assigns) do
    ~H"""
    <svg
      style={@style}
      xmlns="http://www.w3.org/2000/svg"
      class={[@class]}
      width={[@width, "px"]}
      height={[@height, "px"]}
      viewBox="0 0 24 24"
      fill="none"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M11.0769 11.0769C11.0769 4.95931 6.11495 0 0 0V11.0769H11.0769ZM11.0769 24C11.0769 17.8824 6.11495 12.9231 0 12.9231V24H11.0769ZM12.9231 0C19.038 0 24 4.95931 24 11.0769H12.9231V0ZM24 24C24 17.8824 19.038 12.9231 12.9231 12.9231V24H24Z"
        fill="#21C39D"
      />
    </svg>
    """
  end

  def svg(%{type: "chevron"} = assigns) do
    ~H"""
    <svg
      style={@style}
      class={[@class]}
      width={[@width, "px"]}
      height={[@height, "px"]}
      id={@id}
      viewBox="0 0 6 10"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M5.78033 0.21967C6.07322 0.512563 6.07322 0.987437 5.78033 1.28033L2.06066 5L5.78033 8.71967C6.07322 9.01256 6.07322 9.48744 5.78033 9.78033C5.48744 10.0732 5.01256 10.0732 4.71967 9.78033L0.46967 5.53033C0.176777 5.23744 0.176777 4.76256 0.46967 4.46967L4.71967 0.21967C5.01256 -0.0732233 5.48744 -0.0732233 5.78033 0.21967Z"
        fill="#21C39D"
      />
    </svg>
    """
  end

  def svg(%{type: "drag_handle"} = assigns) do
    ~H"""
    <svg
      style={@style}
      class={[@class]}
      width={[@width, "px"]}
      height={[@height, "px"]}
      viewBox="0 0 24 24"
      fill="currentcolor"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M4.47059 15.2941C4.73054 15.2941 4.94118 15.0835 4.94118 14.8235V4.94118H14.8235C15.0835 4.94118 15.2941 4.73054 15.2941 4.47059C15.2941 4.21064 15.0835 4 14.8235 4H4.47059C4.21064 4 4 4.21064 4 4.47059V14.8235C4 15.0835 4.21064 15.2941 4.47059 15.2941ZM6.35283 5.88235H16.7058C16.9657 5.88235 17.1764 6.09299 17.1764 6.35294C17.1764 6.61289 16.9657 6.82353 16.7058 6.82353H6.82341V16.7059C6.82341 16.9658 6.61278 17.1765 6.35283 17.1765C6.09287 17.1765 5.88224 16.9658 5.88224 16.7059V6.35294C5.88224 6.09299 6.09287 5.88235 6.35283 5.88235ZM7.76471 19.5294V8.23532C7.76471 7.97537 7.97534 7.76473 8.23529 7.76473H19.5294C19.7894 7.76473 20 7.97537 20 8.23532V19.5294C20 19.7894 19.7894 20 19.5294 20H8.23529C7.97534 20 7.76471 19.7894 7.76471 19.5294ZM19.0588 8.70591H8.70588V19.0589H19.0588V8.70591ZM16.3734 12.6084C16.5569 12.4245 16.8551 12.4245 17.0388 12.6084L17.98 13.5498C18.1639 13.7335 18.1639 14.0315 17.98 14.2152L17.0388 15.1564C16.947 15.2482 16.8265 15.2942 16.706 15.2942C16.5856 15.2942 16.4651 15.2482 16.3734 15.1562C16.1895 14.9725 16.1895 14.6745 16.3734 14.4908L16.5112 14.353H14.3531V16.5111L14.4911 16.3733C14.6746 16.1894 14.9728 16.1894 15.1565 16.3733C15.3404 16.557 15.3404 16.855 15.1565 17.0387L14.2153 17.9799C14.1234 18.0718 14.003 18.1177 13.8825 18.1177C13.762 18.1177 13.6416 18.0718 13.5499 17.9799L12.6087 17.0387C12.4248 16.855 12.4248 16.557 12.6087 16.3733C12.7922 16.1894 13.0904 16.1894 13.2741 16.3733L13.4119 16.5111V14.353H11.2538L11.3918 14.491C11.5757 14.6747 11.5757 14.9727 11.3918 15.1564C11.2999 15.2482 11.1794 15.2942 11.059 15.2942C10.9385 15.2942 10.818 15.2482 10.7262 15.1564L9.78499 14.2152C9.60108 14.0315 9.60108 13.7335 9.78499 13.5498L10.7262 12.6086C10.9097 12.4247 11.2079 12.4247 11.3916 12.6086C11.5755 12.7923 11.5755 13.0903 11.3916 13.274L11.2538 13.4118H13.4119V11.2537L13.2741 11.3917C13.0906 11.5756 12.7924 11.5756 12.6087 11.3917C12.4248 11.2079 12.4248 10.91 12.6087 10.7263L13.5499 9.78507C13.7334 9.60117 14.0316 9.60117 14.2153 9.78507L15.1565 10.7263C15.3404 10.91 15.3404 11.2079 15.1565 11.3917C15.0646 11.4835 14.9441 11.5295 14.8237 11.5295C14.7032 11.5295 14.5827 11.4835 14.4909 11.3915L14.3531 11.2537V13.4118H16.5112L16.3734 13.2738C16.1895 13.0901 16.1895 12.7921 16.3734 12.6084Z"
        fill="#151519"
      />
    </svg>
    """
  end

  def svg(%{type: "toggle_up"} = assigns) do
    ~H"""
    <svg
      style={@style}
      class={[@class]}
      width={[@width, "px"]}
      height={[@height, "px"]}
      viewBox="0 0 13 8"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M0.246658 6.99547C-0.0822196 6.66659 -0.082219 6.13338 0.246658 5.8045L5.80452 0.24664C5.86618 0.184975 5.93503 0.134873 6.00837 0.0963325C6.02141 0.0894809 6.03458 0.0829949 6.04789 0.0768743C6.35895 -0.0662651 6.73932 -0.00969696 6.9956 0.246585L12.5535 5.80444C12.8823 6.13332 12.8823 6.66654 12.5535 6.99541C12.2246 7.32429 11.6914 7.32429 11.3625 6.99541L6.40009 2.03301L1.43763 6.99547C1.10875 7.32435 0.575535 7.32435 0.246658 6.99547Z"
        fill="#0F172A80"
      />
    </svg>
    """
  end

  def svg(%{type: "cms_rich_text"} = assigns) do
    ~H"""
    <svg
      style={@style}
      class={[@class]}
      width={[@width, "px"]}
      height={[@height, "px"]}
      viewBox="0 0 40 30"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect x="0.5" y="0.5" width="39" height="29" rx="3.5" fill="#16A850" fill-opacity="0.14" />
      <rect x="0.5" y="0.5" width="39" height="29" rx="3.5" stroke="#16A850" />
      <path
        d="M14.9944 17.67H12.2144L11.7544 19H10.2844L12.7944 12.01H14.4244L16.9344 19H15.4544L14.9944 17.67ZM14.6144 16.55L13.6044 13.63L12.5944 16.55H14.6144ZM19.2726 14.27C19.4526 14.0033 19.6993 13.7867 20.0126 13.62C20.3326 13.4533 20.696 13.37 21.1026 13.37C21.576 13.37 22.0026 13.4867 22.3826 13.72C22.7693 13.9533 23.0726 14.2867 23.2926 14.72C23.5193 15.1467 23.6326 15.6433 23.6326 16.21C23.6326 16.7767 23.5193 17.28 23.2926 17.72C23.0726 18.1533 22.7693 18.49 22.3826 18.73C22.0026 18.97 21.576 19.09 21.1026 19.09C20.6893 19.09 20.326 19.01 20.0126 18.85C19.706 18.6833 19.4593 18.47 19.2726 18.21V19H17.8726V11.6H19.2726V14.27ZM22.2026 16.21C22.2026 15.8767 22.1326 15.59 21.9926 15.35C21.8593 15.1033 21.6793 14.9167 21.4526 14.79C21.2326 14.6633 20.9926 14.6 20.7326 14.6C20.4793 14.6 20.2393 14.6667 20.0126 14.8C19.7926 14.9267 19.6126 15.1133 19.4726 15.36C19.3393 15.6067 19.2726 15.8967 19.2726 16.23C19.2726 16.5633 19.3393 16.8533 19.4726 17.1C19.6126 17.3467 19.7926 17.5367 20.0126 17.67C20.2393 17.7967 20.4793 17.86 20.7326 17.86C20.9926 17.86 21.2326 17.7933 21.4526 17.66C21.6793 17.5267 21.8593 17.3367 21.9926 17.09C22.1326 16.8433 22.2026 16.55 22.2026 16.21ZM24.29 16.23C24.29 15.6567 24.4066 15.1567 24.64 14.73C24.8733 14.2967 25.1966 13.9633 25.61 13.73C26.0233 13.49 26.4966 13.37 27.03 13.37C27.7166 13.37 28.2833 13.5433 28.73 13.89C29.1833 14.23 29.4866 14.71 29.64 15.33H28.13C28.05 15.09 27.9133 14.9033 27.72 14.77C27.5333 14.63 27.3 14.56 27.02 14.56C26.62 14.56 26.3033 14.7067 26.07 15C25.8366 15.2867 25.72 15.6967 25.72 16.23C25.72 16.7567 25.8366 17.1667 26.07 17.46C26.3033 17.7467 26.62 17.89 27.02 17.89C27.5866 17.89 27.9566 17.6367 28.13 17.13H29.64C29.4866 17.73 29.1833 18.2067 28.73 18.56C28.2766 18.9133 27.71 19.09 27.03 19.09C26.4966 19.09 26.0233 18.9733 25.61 18.74C25.1966 18.5 24.8733 18.1667 24.64 17.74C24.4066 17.3067 24.29 16.8033 24.29 16.23Z"
        fill="#16A850"
      />
    </svg>
    """
  end

  def svg(%{type: "cms_video"} = assigns) do
    ~H"""
    <svg
      xmlns="http://www.w3.org/2000/svg"
      style={@style}
      class={[@class]}
      width={[@width, "px"]}
      height={[@height, "px"]}
      viewBox="0 0 40 30"
      fill="none"
    >
      <rect x="0.5" y="0.5" width="39" height="29" rx="3.5" fill="#FFBB34" fill-opacity="0.14" />
      <rect x="0.5" y="0.5" width="39" height="29" rx="3.5" stroke="#FFBB34" />
      <path
        d="M16.5891 19.5601C16.9683 19.7708 17.3474 19.855 17.7687 19.855C18.1478 19.855 18.569 19.7708 18.9482 19.5601L23.3714 17.0326C24.0875 16.6113 24.5509 15.8531 24.5509 15.0106C24.5509 14.168 24.1297 13.4098 23.3714 12.9885L18.9482 10.461C18.232 10.0397 17.3474 10.0397 16.6313 10.461C15.9151 10.8822 15.4517 11.6405 15.4517 12.483V17.5381C15.4096 18.3806 15.873 19.1389 16.5891 19.5601ZM16.6734 12.483C16.6734 12.1039 16.884 11.7669 17.1789 11.5562C17.3474 11.472 17.5159 11.4299 17.6844 11.4299C17.8529 11.4299 18.0635 11.472 18.1899 11.5562L22.6131 14.0838C22.9501 14.2944 23.1186 14.6314 23.1186 15.0106C23.1186 15.3897 22.908 15.7267 22.6131 15.9373L18.1899 18.4649C17.8529 18.6755 17.4738 18.6755 17.1368 18.4649C16.7998 18.2542 16.6313 17.9172 16.6313 17.5381V12.483H16.6734Z"
        fill="#FFBB34"
      />
    </svg>
    """
  end

  def svg(%{type: "cms_image"} = assigns) do
    ~H"""
    <svg
      xmlns="http://www.w3.org/2000/svg"
      style={@style}
      class={[@class]}
      width={[@width, "px"]}
      height={[@height, "px"]}
      viewBox="0 0 40 30"
      fill="none"
    >
      <rect x="0.5" y="0.5" width="39" height="29" rx="3.5" fill="#FFBB34" fill-opacity="0.14" />
      <rect x="0.5" y="0.5" width="39" height="29" rx="3.5" stroke="#FFBB34" />
      <path
        d="M14.913 10C14.414 10 14 10.4534 14 11V19C14 19.5466 14.414 20 14.913 20H25.087C25.586 20 26 19.5466 26 19V11C26 10.4534 25.586 10 25.087 10H14.913ZM14.913 10.8571H25.087C25.166 10.8571 25.2174 10.9135 25.2174 11V16.6786L23.2446 14.9509C23.1155 14.8365 22.9176 14.827 22.7799 14.9286L20.9293 16.3214L18.4185 14.0938C18.3384 14.0223 18.2317 13.9878 18.1291 14C18.0648 14.0085 18.0025 14.0349 17.9497 14.0759L14.7826 16.4687V11C14.7826 10.9135 14.834 10.8571 14.913 10.8571ZM20.913 12C20.2693 12 19.7391 12.5807 19.7391 13.2857C19.7391 13.9907 20.2693 14.5714 20.913 14.5714C21.5567 14.5714 22.087 13.9907 22.087 13.2857C22.087 12.5807 21.5567 12 20.913 12ZM20.913 12.8572C21.1338 12.8572 21.3043 13.044 21.3043 13.2857C21.3043 13.5275 21.1338 13.7143 20.913 13.7143C20.6923 13.7143 20.5217 13.5275 20.5217 13.2857C20.5217 13.044 20.6923 12.8572 20.913 12.8572ZM18.1576 14.9643L20.6685 17.1875C20.7976 17.3019 20.9954 17.3114 21.1332 17.2098L22.9796 15.817L25.2174 17.7768V19C25.2174 19.0865 25.166 19.1429 25.087 19.1429H14.913C14.834 19.1429 14.7826 19.0865 14.7826 19V17.5134L18.1576 14.9643Z"
        fill="#FFBB34"
      />
    </svg>
    """
  end

  def svg(%{type: "cms_header"} = assigns) do
    ~H"""
    <svg
      xmlns="http://www.w3.org/2000/svg"
      style={@style}
      class={[@class]}
      width={[@width, "px"]}
      height={[@height, "px"]}
      viewBox="0 0 40 30"
      fill="none"
    >
      <rect x="0.5" y="0.5" width="39" height="29" rx="3.5" fill="#16A850" fill-opacity="0.14" />
      <rect x="0.5" y="0.5" width="39" height="29" rx="3.5" stroke="#16A850" />
      <rect x="12.5" y="11.5" width="12" height="2" rx="1" fill="#16A850" />
      <rect x="12.5" y="16.5" width="16" height="2" rx="1" fill="#16A850" />
    </svg>
    """
  end

  def svg(%{type: "cms_cta"} = assigns) do
    ~H"""
    <svg
      xmlns="http://www.w3.org/2000/svg"
      style={@style}
      width="40px"
      height="44px"
      viewBox="0 0 40 44"
      fill="none"
    >
      <rect x="0.5" y="0.5" width="39" height="43" rx="3.5" fill="#C711B8" fill-opacity="0.14" />
      <rect x="0.5" y="0.5" width="39" height="43" rx="3.5" stroke="#C711B8" />
      <rect x="9" y="11.8355" width="22" height="14" rx="2" fill="white" />
      <path
        d="M19 17.6645L20 18.1645V22.6645L21 22.1645L22 22.6645V24.6645L22.5 22.6645L24 23.1645V25.1645L24.846 23.6645H26.2444L26.5 27.5L18 27V18.1645L19 17.6645Z"
        fill="#F7DDF5"
      />
      <path d="M15.5 25L14.5 25.5V27L17 29.5L19.5 27.5L15.5 25Z" fill="#F7DDF5" />
      <path
        d="M26.8417 24.3771C26.8417 23.5813 26.1975 22.9371 25.4017 22.9371C25.0985 22.9371 24.8143 23.0318 24.5869 23.2024C24.3785 22.6718 23.848 22.2929 23.2417 22.2929C22.9385 22.2929 22.6543 22.3876 22.4269 22.5582C22.2185 22.0276 21.688 21.6487 21.0817 21.6487C20.8164 21.6487 20.5701 21.7245 20.3617 21.8382V18.5413C20.3617 18.1624 20.2101 17.8024 19.9448 17.5182C19.6606 17.234 19.3006 17.1013 18.9217 17.1013C18.1259 17.1013 17.4817 17.7455 17.4817 18.5413V25.9497L16.4775 24.9455C15.9848 24.4529 15.208 24.3771 14.6396 24.775C14.2985 25.0024 14.0711 25.3624 14.0143 25.7792C13.9575 26.1771 14.0711 26.594 14.3364 26.9161L17.2922 30.4782C18.1827 31.5582 19.4901 32.1645 20.8922 32.1645H22.7301C23.829 32.1645 24.8711 31.7287 25.648 30.9518C26.4248 30.175 26.8606 29.1329 26.8606 28.034L26.8417 24.3771ZM25.1364 30.4403C24.4922 31.0845 23.6396 31.4445 22.7301 31.4445H20.8922C19.7175 31.4445 18.5996 30.914 17.8606 30.0045L14.8859 26.4424C14.7532 26.2718 14.6964 26.0824 14.7154 25.874C14.7532 25.6655 14.8669 25.4761 15.0375 25.3624C15.1701 25.2866 15.3027 25.2297 15.4543 25.2297C15.6438 25.2297 15.8332 25.3055 15.9659 25.4382L17.1596 26.6129C17.3301 26.7834 17.5954 26.8403 17.8227 26.7455C18.0501 26.6508 18.2017 26.4234 18.2017 26.1771V18.5413C18.2017 18.1434 18.5238 17.8213 18.9217 17.8213C19.1111 17.8213 19.3006 17.8971 19.4332 18.0297C19.5659 18.1624 19.6417 18.3518 19.6417 18.5413V23.8087C19.6417 23.9982 19.7932 24.1687 20.0017 24.1687C20.2101 24.1687 20.3617 24.0171 20.3617 23.8087V23.0887C20.3617 22.6908 20.6838 22.3687 21.0817 22.3687C21.4796 22.3687 21.8017 22.6908 21.8017 23.0887V24.4529C21.8017 24.6424 21.9532 24.8129 22.1617 24.8129C22.3701 24.8129 22.5217 24.6613 22.5217 24.4529V23.7329C22.5217 23.335 22.8438 23.0129 23.2417 23.0129C23.6396 23.0129 23.9617 23.335 23.9617 23.7329V25.0971C23.9617 25.2866 24.1132 25.4571 24.3217 25.4571C24.5301 25.4571 24.6817 25.3055 24.6817 25.0971V24.415C24.6817 24.3961 24.6817 24.3771 24.6817 24.3771C24.6817 23.9792 25.0038 23.6571 25.4017 23.6571C25.7996 23.6571 26.1217 23.9792 26.1217 24.3771V28.034C26.1217 28.9434 25.7806 29.7961 25.1364 30.4403Z"
        fill="#C711B8"
      />
    </svg>
    """
  end

  def svg(%{type: "cms_button"} = assigns) do
    ~H"""
    <svg
      xmlns="http://www.w3.org/2000/svg"
      style={@style}
      class={[@class]}
      width={[@width, "px"]}
      height={[@height, "px"]}
      viewBox="0 0 40 30"
      fill="none"
    >
      <rect x="0.5" y="0.5" width="39" height="29" rx="3.5" fill="#C711B8" fill-opacity="0.14" />
      <rect x="0.5" y="0.5" width="39" height="29" rx="3.5" stroke="#C711B8" />
      <rect x="9" y="10" width="22" height="5" rx="2" fill="white" />
      <path
        d="M23 12.6645L24 13.1645V17.6645L25 17L26 17.6645V19.6645L26.5 17.6645L27.5 17.5L28 18.1645V20.1645L29 18.5H30.5V22.5L30 24.5L29 26L26 26.5H23L21 24.5L22 13.1645L23 12.6645Z"
        fill="#F7DDF5"
      />
      <path d="M19.5 20L18.5 20.5V22L21 24.5L23.5 22.5L19.5 20Z" fill="#F7DDF5" />
      <path
        d="M30.8417 19.2758C30.8417 18.48 30.1975 17.8358 29.4017 17.8358C29.0985 17.8358 28.8143 17.9305 28.5869 18.1011C28.3785 17.5705 27.848 17.1916 27.2417 17.1916C26.9385 17.1916 26.6543 17.2863 26.4269 17.4568C26.2185 16.9263 25.688 16.5474 25.0817 16.5474C24.8164 16.5474 24.5701 16.6232 24.3617 16.7368V13.44C24.3617 13.0611 24.2101 12.7011 23.9448 12.4168C23.6606 12.1326 23.3006 12 22.9217 12C22.1259 12 21.4817 12.6442 21.4817 13.44V20.8484L20.4775 19.8442C19.9848 19.3516 19.208 19.2758 18.6396 19.6737C18.2985 19.9011 18.0711 20.2611 18.0143 20.6779C17.9575 21.0758 18.0711 21.4926 18.3364 21.8147L21.2922 25.3768C22.1827 26.4568 23.4901 27.0632 24.8922 27.0632H26.7301C27.829 27.0632 28.8711 26.6274 29.648 25.8505C30.4248 25.0737 30.8606 24.0316 30.8606 22.9326L30.8417 19.2758ZM29.1364 25.339C28.4922 25.9832 27.6396 26.3432 26.7301 26.3432H24.8922C23.7175 26.3432 22.5996 25.8126 21.8606 24.9032L18.8859 21.3411C18.7532 21.1705 18.6964 20.9811 18.7154 20.7726C18.7532 20.5642 18.8669 20.3747 19.0375 20.2611C19.1701 20.1853 19.3027 20.1284 19.4543 20.1284C19.6438 20.1284 19.8332 20.2042 19.9659 20.3368L21.1596 21.5116C21.3301 21.6821 21.5954 21.7389 21.8227 21.6442C22.0501 21.5495 22.2017 21.3221 22.2017 21.0758V13.44C22.2017 13.0421 22.5238 12.72 22.9217 12.72C23.1111 12.72 23.3006 12.7958 23.4332 12.9284C23.5659 13.0611 23.6417 13.2505 23.6417 13.44V18.7074C23.6417 18.8968 23.7932 19.0674 24.0017 19.0674C24.2101 19.0674 24.3617 18.9158 24.3617 18.7074V17.9874C24.3617 17.5895 24.6838 17.2674 25.0817 17.2674C25.4796 17.2674 25.8017 17.5895 25.8017 17.9874V19.3516C25.8017 19.5411 25.9532 19.7116 26.1617 19.7116C26.3701 19.7116 26.5217 19.56 26.5217 19.3516V18.6316C26.5217 18.2337 26.8438 17.9116 27.2417 17.9116C27.6396 17.9116 27.9617 18.2337 27.9617 18.6316V19.9958C27.9617 20.1853 28.1132 20.3558 28.3217 20.3558C28.5301 20.3558 28.6817 20.2042 28.6817 19.9958V19.3137C28.6817 19.2947 28.6817 19.2758 28.6817 19.2758C28.6817 18.8779 29.0038 18.5558 29.4017 18.5558C29.7996 18.5558 30.1217 18.8779 30.1217 19.2758V22.9326C30.1217 23.8421 29.7806 24.6947 29.1364 25.339Z"
        fill="#C711B8"
      />
    </svg>
    """
  end

  def svg(%{type: "cms_cta_image"} = assigns) do
    ~H"""
    <svg
      xmlns="http://www.w3.org/2000/svg"
      style={@style}
      width="40px"
      height="44px"
      viewBox="0 0 40 44"
      fill="none"
    >
      <rect x="0.5" y="0.5" width="39" height="43" rx="3.5" fill="#C711B8" fill-opacity="0.14" />
      <rect x="0.5" y="0.5" width="39" height="43" rx="3.5" stroke="#C711B8" />
      <rect x="9" y="11.6678" width="22" height="14" rx="2" fill="white" />
      <path
        d="M14.913 13.6678C14.414 13.6678 14 14.1212 14 14.6678V22.6678C14 23.2143 14.414 23.6678 14.913 23.6678H25.087C25.586 23.6678 26 23.2143 26 22.6678V14.6678C26 14.1212 25.586 13.6678 25.087 13.6678H14.913ZM14.913 14.5249H25.087C25.166 14.5249 25.2174 14.5812 25.2174 14.6678V20.3463L23.2446 18.6187C23.1155 18.5043 22.9176 18.4948 22.7799 18.5963L20.9293 19.9892L18.4185 17.7615C18.3384 17.6901 18.2317 17.6555 18.1291 17.6678C18.0648 17.6763 18.0025 17.7026 17.9497 17.7437L14.7826 20.1365V14.6678C14.7826 14.5812 14.834 14.5249 14.913 14.5249ZM20.913 15.6678C20.2693 15.6678 19.7391 16.2485 19.7391 16.9535C19.7391 17.6585 20.2693 18.2392 20.913 18.2392C21.5567 18.2392 22.087 17.6585 22.087 16.9535C22.087 16.2485 21.5567 15.6678 20.913 15.6678ZM20.913 16.5249C21.1338 16.5249 21.3043 16.7117 21.3043 16.9535C21.3043 17.1953 21.1338 17.3821 20.913 17.3821C20.6923 17.3821 20.5217 17.1953 20.5217 16.9535C20.5217 16.7117 20.6923 16.5249 20.913 16.5249ZM18.1576 18.632L20.6685 20.8553C20.7976 20.9696 20.9954 20.9791 21.1332 20.8776L22.9796 19.4847L25.2174 21.4445V22.6678C25.2174 22.7543 25.166 22.8106 25.087 22.8106H14.913C14.834 22.8106 14.7826 22.7543 14.7826 22.6678V21.1811L18.1576 18.632Z"
        fill="#F7DDF5"
      />
      <path
        d="M19 17.8323L20 18.3323V22.8323L21 22.3323L22 22.8323V24.8323L22.5 22.8323L24 23.3323V25.3323L25 23.6678L26.1652 23.8323L26.5 27.6678L18 27.1678V18.3323L19 17.8323Z"
        fill="#F7DDF5"
      />
      <path
        d="M15.5 25.1678L14.5 25.6678V27.1678L17 29.6678L19.5 27.6678L15.5 25.1678Z"
        fill="#F7DDF5"
      />
      <path
        d="M26.8417 24.5449C26.8417 23.7491 26.1975 23.1049 25.4017 23.1049C25.0985 23.1049 24.8143 23.1996 24.5869 23.3701C24.3785 22.8396 23.848 22.4607 23.2417 22.4607C22.9385 22.4607 22.6543 22.5554 22.4269 22.7259C22.2185 22.1954 21.688 21.8164 21.0817 21.8164C20.8164 21.8164 20.5701 21.8922 20.3617 22.0059V18.7091C20.3617 18.3301 20.2101 17.9701 19.9448 17.6859C19.6606 17.4017 19.3006 17.2691 18.9217 17.2691C18.1259 17.2691 17.4817 17.9133 17.4817 18.7091V26.1175L16.4775 25.1133C15.9848 24.6207 15.208 24.5449 14.6396 24.9428C14.2985 25.1701 14.0711 25.5301 14.0143 25.947C13.9575 26.3449 14.0711 26.7617 14.3364 27.0838L17.2922 30.6459C18.1827 31.7259 19.4901 32.3322 20.8922 32.3322H22.7301C23.829 32.3322 24.8711 31.8964 25.648 31.1196C26.4248 30.3428 26.8606 29.3007 26.8606 28.2017L26.8417 24.5449ZM25.1364 30.608C24.4922 31.2522 23.6396 31.6122 22.7301 31.6122H20.8922C19.7175 31.6122 18.5996 31.0817 17.8606 30.1722L14.8859 26.6101C14.7532 26.4396 14.6964 26.2501 14.7154 26.0417C14.7532 25.8333 14.8669 25.6438 15.0375 25.5301C15.1701 25.4543 15.3027 25.3975 15.4543 25.3975C15.6438 25.3975 15.8332 25.4733 15.9659 25.6059L17.1596 26.7807C17.3301 26.9512 17.5954 27.008 17.8227 26.9133C18.0501 26.8185 18.2017 26.5912 18.2017 26.3449V18.7091C18.2017 18.3112 18.5238 17.9891 18.9217 17.9891C19.1111 17.9891 19.3006 18.0649 19.4332 18.1975C19.5659 18.3301 19.6417 18.5196 19.6417 18.7091V23.9764C19.6417 24.1659 19.7932 24.3364 20.0017 24.3364C20.2101 24.3364 20.3617 24.1849 20.3617 23.9764V23.2564C20.3617 22.8585 20.6838 22.5364 21.0817 22.5364C21.4796 22.5364 21.8017 22.8585 21.8017 23.2564V24.6207C21.8017 24.8101 21.9532 24.9807 22.1617 24.9807C22.3701 24.9807 22.5217 24.8291 22.5217 24.6207V23.9007C22.5217 23.5028 22.8438 23.1807 23.2417 23.1807C23.6396 23.1807 23.9617 23.5028 23.9617 23.9007V25.2649C23.9617 25.4543 24.1132 25.6249 24.3217 25.6249C24.5301 25.6249 24.6817 25.4733 24.6817 25.2649V24.5828C24.6817 24.5638 24.6817 24.5449 24.6817 24.5449C24.6817 24.147 25.0038 23.8249 25.4017 23.8249C25.7996 23.8249 26.1217 24.147 26.1217 24.5449V28.2017C26.1217 29.1112 25.7806 29.9638 25.1364 30.608Z"
        fill="#C711B8"
      />
    </svg>
    """
  end

  def svg(%{type: "cms_button_collection"} = assigns) do
    ~H"""
    <svg
      xmlns="http://www.w3.org/2000/svg"
      style={@style}
      class={[@class]}
      width={[@width, "px"]}
      height={[@height, "px"]}
      viewBox="0 0 40 30"
      fill="none"
    >
      <rect x="0.5" y="0.5" width="39" height="29" rx="3.5" fill="#C711B8" fill-opacity="0.14" />
      <rect x="0.5" y="0.5" width="39" height="29" rx="3.5" stroke="#C711B8" />
      <rect x="9" y="5.5" width="22" height="5" rx="2" fill="white" />
      <rect x="9" y="12.5" width="22" height="5" rx="2" fill="white" />
      <rect x="9" y="19.5" width="22" height="5" rx="2" fill="white" />
      <path
        d="M19 9.66452L20 10.1645V14.6645L21 14L22 14.6645V16.6645L22.5 14.6645L23.5 14.5L24 15.1645V17.1645L25 15.5H26.5V19.5L26 21.5L25 23L22 23.5H19L17 21.5L18 10.1645L19 9.66452Z"
        fill="#F7DDF5"
      />
      <path d="M15.5 17L14.5 17.5V19L17 21.5L19.5 19.5L15.5 17Z" fill="#F7DDF5" />
      <path
        d="M26.8417 16.2758C26.8417 15.48 26.1975 14.8358 25.4017 14.8358C25.0985 14.8358 24.8143 14.9305 24.5869 15.1011C24.3785 14.5705 23.848 14.1916 23.2417 14.1916C22.9385 14.1916 22.6543 14.2863 22.4269 14.4568C22.2185 13.9263 21.688 13.5474 21.0817 13.5474C20.8164 13.5474 20.5701 13.6232 20.3617 13.7368V10.44C20.3617 10.0611 20.2101 9.70105 19.9448 9.41684C19.6606 9.13263 19.3006 9 18.9217 9C18.1259 9 17.4817 9.64421 17.4817 10.44V17.8484L16.4775 16.8442C15.9848 16.3516 15.208 16.2758 14.6396 16.6737C14.2985 16.9011 14.0711 17.2611 14.0143 17.6779C13.9575 18.0758 14.0711 18.4926 14.3364 18.8147L17.2922 22.3768C18.1827 23.4568 19.4901 24.0632 20.8922 24.0632H22.7301C23.829 24.0632 24.8711 23.6274 25.648 22.8505C26.4248 22.0737 26.8606 21.0316 26.8606 19.9326L26.8417 16.2758ZM25.1364 22.339C24.4922 22.9832 23.6396 23.3432 22.7301 23.3432H20.8922C19.7175 23.3432 18.5996 22.8126 17.8606 21.9032L14.8859 18.3411C14.7532 18.1705 14.6964 17.9811 14.7154 17.7726C14.7532 17.5642 14.8669 17.3747 15.0375 17.2611C15.1701 17.1853 15.3027 17.1284 15.4543 17.1284C15.6438 17.1284 15.8332 17.2042 15.9659 17.3368L17.1596 18.5116C17.3301 18.6821 17.5954 18.7389 17.8227 18.6442C18.0501 18.5495 18.2017 18.3221 18.2017 18.0758V10.44C18.2017 10.0421 18.5238 9.72 18.9217 9.72C19.1111 9.72 19.3006 9.79579 19.4332 9.92842C19.5659 10.0611 19.6417 10.2505 19.6417 10.44V15.7074C19.6417 15.8968 19.7932 16.0674 20.0017 16.0674C20.2101 16.0674 20.3617 15.9158 20.3617 15.7074V14.9874C20.3617 14.5895 20.6838 14.2674 21.0817 14.2674C21.4796 14.2674 21.8017 14.5895 21.8017 14.9874V16.3516C21.8017 16.5411 21.9532 16.7116 22.1617 16.7116C22.3701 16.7116 22.5217 16.56 22.5217 16.3516V15.6316C22.5217 15.2337 22.8438 14.9116 23.2417 14.9116C23.6396 14.9116 23.9617 15.2337 23.9617 15.6316V16.9958C23.9617 17.1853 24.1132 17.3558 24.3217 17.3558C24.5301 17.3558 24.6817 17.2042 24.6817 16.9958V16.3137C24.6817 16.2947 24.6817 16.2758 24.6817 16.2758C24.6817 15.8779 25.0038 15.5558 25.4017 15.5558C25.7996 15.5558 26.1217 15.8779 26.1217 16.2758V19.9326C26.1217 20.8421 25.7806 21.6947 25.1364 22.339Z"
        fill="#C711B8"
      />
    </svg>
    """
  end

  def svg(%{type: "cms_image_button_collection"} = assigns) do
    ~H"""
    <svg
      xmlns="http://www.w3.org/2000/svg"
      style={@style}
      class={[@class]}
      width={[@width, "px"]}
      height={[@height, "px"]}
      viewBox="0 0 40 30"
      fill="none"
    >
      <rect x="0.5" y="0.5" width="39" height="29" rx="3.5" fill="#C711B8" fill-opacity="0.14" />
      <rect x="0.5" y="0.5" width="39" height="29" rx="3.5" stroke="#C711B8" />
      <path
        d="M7.41304 3.5C6.91399 3.5 6.5 3.95342 6.5 4.5V12.5C6.5 13.0466 6.91399 13.5 7.41304 13.5H17.587C18.086 13.5 18.5 13.0466 18.5 12.5V4.5C18.5 3.95342 18.086 3.5 17.587 3.5H7.41304ZM7.41304 4.35714H17.587C17.666 4.35714 17.7174 4.41345 17.7174 4.5V10.1786L15.7446 8.45091C15.6155 8.33655 15.4176 8.32703 15.2799 8.42858L13.4293 9.82143L10.9185 7.59376C10.8384 7.52234 10.7317 7.48779 10.6291 7.50001C10.5648 7.50854 10.5025 7.53488 10.4497 7.57591L7.28261 9.96874V4.5C7.28261 4.41345 7.33402 4.35714 7.41304 4.35714ZM13.413 5.50002C12.7693 5.50002 12.2391 6.08072 12.2391 6.78573C12.2391 7.49073 12.7693 8.07144 13.413 8.07144C14.0567 8.07144 14.587 7.49073 14.587 6.78573C14.587 6.08072 14.0567 5.50002 13.413 5.50002ZM13.413 6.35716C13.6338 6.35716 13.8043 6.54396 13.8043 6.78573C13.8043 7.0275 13.6338 7.2143 13.413 7.2143C13.1923 7.2143 13.0217 7.0275 13.0217 6.78573C13.0217 6.54396 13.1923 6.35716 13.413 6.35716ZM10.6576 8.46429L13.1685 10.6875C13.2976 10.8019 13.4954 10.8114 13.6332 10.7098L15.4796 9.31696L17.7174 11.2768V12.5C17.7174 12.5865 17.666 12.6429 17.587 12.6429H7.41304C7.33402 12.6429 7.28261 12.5865 7.28261 12.5V11.0134L10.6576 8.46429Z"
        fill="#C711B8"
      />
      <path
        d="M22.413 3.5C21.914 3.5 21.5 3.95342 21.5 4.5V12.5C21.5 13.0466 21.914 13.5 22.413 13.5H32.587C33.086 13.5 33.5 13.0466 33.5 12.5V4.5C33.5 3.95342 33.086 3.5 32.587 3.5H22.413ZM22.413 4.35714H32.587C32.666 4.35714 32.7174 4.41345 32.7174 4.5V10.1786L30.7446 8.45091C30.6155 8.33655 30.4176 8.32703 30.2799 8.42858L28.4293 9.82143L25.9185 7.59376C25.8384 7.52234 25.7317 7.48779 25.6291 7.50001C25.5648 7.50854 25.5025 7.53488 25.4497 7.57591L22.2826 9.96874V4.5C22.2826 4.41345 22.334 4.35714 22.413 4.35714ZM28.413 5.50002C27.7693 5.50002 27.2391 6.08072 27.2391 6.78573C27.2391 7.49073 27.7693 8.07144 28.413 8.07144C29.0567 8.07144 29.587 7.49073 29.587 6.78573C29.587 6.08072 29.0567 5.50002 28.413 5.50002ZM28.413 6.35716C28.6338 6.35716 28.8043 6.54396 28.8043 6.78573C28.8043 7.0275 28.6338 7.2143 28.413 7.2143C28.1923 7.2143 28.0217 7.0275 28.0217 6.78573C28.0217 6.54396 28.1923 6.35716 28.413 6.35716ZM25.6576 8.46429L28.1685 10.6875C28.2976 10.8019 28.4954 10.8114 28.6332 10.7098L30.4796 9.31696L32.7174 11.2768V12.5C32.7174 12.5865 32.666 12.6429 32.587 12.6429H22.413C22.334 12.6429 22.2826 12.5865 22.2826 12.5V11.0134L25.6576 8.46429Z"
        fill="#C711B8"
      />
      <path
        d="M7.41304 16.5C6.91399 16.5 6.5 16.9534 6.5 17.5V25.5C6.5 26.0466 6.91399 26.5 7.41304 26.5H17.587C18.086 26.5 18.5 26.0466 18.5 25.5V17.5C18.5 16.9534 18.086 16.5 17.587 16.5H7.41304ZM7.41304 17.3571H17.587C17.666 17.3571 17.7174 17.4135 17.7174 17.5V23.1786L15.7446 21.4509C15.6155 21.3365 15.4176 21.327 15.2799 21.4286L13.4293 22.8214L10.9185 20.5938C10.8384 20.5223 10.7317 20.4878 10.6291 20.5C10.5648 20.5085 10.5025 20.5349 10.4497 20.5759L7.28261 22.9687V17.5C7.28261 17.4135 7.33402 17.3571 7.41304 17.3571ZM13.413 18.5C12.7693 18.5 12.2391 19.0807 12.2391 19.7857C12.2391 20.4907 12.7693 21.0714 13.413 21.0714C14.0567 21.0714 14.587 20.4907 14.587 19.7857C14.587 19.0807 14.0567 18.5 13.413 18.5ZM13.413 19.3572C13.6338 19.3572 13.8043 19.544 13.8043 19.7857C13.8043 20.0275 13.6338 20.2143 13.413 20.2143C13.1923 20.2143 13.0217 20.0275 13.0217 19.7857C13.0217 19.544 13.1923 19.3572 13.413 19.3572ZM10.6576 21.4643L13.1685 23.6875C13.2976 23.8019 13.4954 23.8114 13.6332 23.7098L15.4796 22.317L17.7174 24.2768V25.5C17.7174 25.5865 17.666 25.6429 17.587 25.6429H7.41304C7.33402 25.6429 7.28261 25.5865 7.28261 25.5V24.0134L10.6576 21.4643Z"
        fill="#C711B8"
      />
      <path
        d="M22.413 16.5C21.914 16.5 21.5 16.9534 21.5 17.5V25.5C21.5 26.0466 21.914 26.5 22.413 26.5H32.587C33.086 26.5 33.5 26.0466 33.5 25.5V17.5C33.5 16.9534 33.086 16.5 32.587 16.5H22.413ZM22.413 17.3571H32.587C32.666 17.3571 32.7174 17.4135 32.7174 17.5V23.1786L30.7446 21.4509C30.6155 21.3365 30.4176 21.327 30.2799 21.4286L28.4293 22.8214L25.9185 20.5938C25.8384 20.5223 25.7317 20.4878 25.6291 20.5C25.5648 20.5085 25.5025 20.5349 25.4497 20.5759L22.2826 22.9687V17.5C22.2826 17.4135 22.334 17.3571 22.413 17.3571ZM28.413 18.5C27.7693 18.5 27.2391 19.0807 27.2391 19.7857C27.2391 20.4907 27.7693 21.0714 28.413 21.0714C29.0567 21.0714 29.587 20.4907 29.587 19.7857C29.587 19.0807 29.0567 18.5 28.413 18.5ZM28.413 19.3572C28.6338 19.3572 28.8043 19.544 28.8043 19.7857C28.8043 20.0275 28.6338 20.2143 28.413 20.2143C28.1923 20.2143 28.0217 20.0275 28.0217 19.7857C28.0217 19.544 28.1923 19.3572 28.413 19.3572ZM25.6576 21.4643L28.1685 23.6875C28.2976 23.8019 28.4954 23.8114 28.6332 23.7098L30.4796 22.317L32.7174 24.2768V25.5C32.7174 25.5865 32.666 25.6429 32.587 25.6429H22.413C22.334 25.6429 22.2826 25.5865 22.2826 25.5V24.0134L25.6576 21.4643Z"
        fill="#C711B8"
      />
    </svg>
    """
  end

  def svg(%{type: "spinner"} = assigns) do
    ~H"""
    <svg
      class={["animate-spin", "svg", @class]}
      width={[@width, "px"]}
      height={[@height, "px"]}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke={@fill || "#000000"} stroke-width="4" />
      <path
        class="opacity-75"
        fill={@fill || "#000000"}
        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
      />
    </svg>
    """
  end
end