@openneuro/app 4.33.4 → 4.34.0-alpha.0

package/src/scripts/components/activity-slider/slider.scss

@@ -0,0 +1,130 @@
+@import '../scss/variables';
+
+.activity-slider {
+  h3 {
+    text-align: center;
+    color: #9f2995;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 22px;
+    letter-spacing: 1px;
+  }
+
+  .activity-slider-node {
+    padding: 20px 30px;
+    display: flex;
+    flex-direction: column;
+    align-self: center;
+    text-align: center;
+    .ds-name h4 {
+      font-size: 18px;
+      font-weight: 600;
+      margin-bottom: 0;
+      text-decoration: underline;
+      a {
+        word-break: break-word;
+      }
+    }
+    .ds-pub-views,
+    .ds-pub-date {
+      font-weight: 600;
+      font-size: 14px;
+      margin: 10px 0 0;
+    }
+  }
+  .activity-slider-node {
+    .hexagon-wrapper {
+      text-align: center;
+      margin: 20px auto 0;
+      position: relative;
+      display: inline-block;
+      width: 45px;
+      height: 45px;
+      div.label {
+        position: absolute;
+        top: 0;
+        text-align: center;
+        width: 100%;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+        font-weight: 600;
+        font-size: 13px;
+      }
+    }
+
+    .hexagon {
+      height: 100%;
+      width: calc(100% * 0.57735);
+      display: inline-block;
+    }
+
+    .hexagon:before {
+      position: absolute;
+      top: 0;
+      right: calc((100% / 2) - ((100% * 0.57735) / 2));
+      background-color: inherit;
+      height: inherit;
+      width: inherit;
+      content: '';
+      transform: rotateZ(60deg);
+    }
+
+    .hexagon:after {
+      position: absolute;
+      top: 0;
+      right: calc((100% / 2) - ((100% * 0.57735) / 2));
+      background-color: inherit;
+      height: inherit;
+      width: inherit;
+      content: '';
+      transform: rotateZ(-60deg);
+    }
+    .hexagon {
+      transition: background-color 0.3s;
+      background-color: $on-dark-aqua;
+
+      &.mri {
+        background-color: $mri-theme;
+      }
+      &.eeg {
+        background-color: $eeg-theme;
+      }
+
+      &.pet {
+        background-color: $pet-theme;
+      }
+      &.ieeg {
+        background-color: $ieeg-theme;
+      }
+
+      &.meg {
+        background-color: $meg-theme;
+      }
+      &.eeg {
+        background-color: $on-light-green;
+      }
+      &.nirs{
+        background-color: $nirs-theme;
+      }
+    }
+  }
+}
+.react-multi-carousel-dot--active button {
+  background-color: var(--current-theme-primary);
+}
+.react-multi-carousel-dot button {
+  border-color: var(--current-theme-primary);
+}
+
+.react-multi-carousel-list.activity-slider i.fas {
+  position: absolute;
+  color: var(--current-theme-primary);
+  &.fa-chevron-right {
+    right: 0;
+  }
+}

package/src/scripts/components/affiliate-article/AffiliateArticle.tsx

@@ -0,0 +1,26 @@
+import React from "react"
+import "./affiliate.scss"
+
+export interface AffiliateArticleProps {
+  logo?: string
+  header?: string
+  contentOne?: React.ReactNode
+  contentTwo?: React.ReactNode
+}
+
+export const AffiliateArticle: React.FC<AffiliateArticleProps> = ({
+  logo,
+  header,
+  contentOne,
+  contentTwo,
+  ...props
+}) => {
+  return (
+    <div className="affiliate-card" {...props}>
+      {logo ? <img src={logo} alt="" loading="lazy" /> : null}
+      {header ? <h2>{header}</h2> : null}
+      {contentOne ? <div>{contentOne}</div> : null}
+      {contentTwo ? <span>{contentTwo}</span> : null}
+    </div>
+  )
+}

package/src/scripts/components/affiliate-article/affiliate.scss

@@ -0,0 +1,32 @@
+.affiliate-card {
+  padding: 0 30px;
+  flex: 1 1 200px;
+  img {
+    width: 300px;
+    max-width: 100%;
+    height: auto;
+  }
+  h2 {
+    font-size: 18px;
+  }
+  > div {
+    margin: 0 0 20px;
+    font-size: 18px;
+  }
+  > span {
+    font-size: 15px;
+  }
+}
+
+.affiliate-wrap {
+  display: flex;
+  max-width: 980px;
+  margin: 0 auto;
+  
+  @media (max-width: 980px) {
+    display: block;
+    .affiliate-card {
+      margin-bottom: 50px;
+    }
+  }
+}

package/src/scripts/components/aggregate-count/AggregateCount.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+
+export interface AggregateCountProps {
+  count?: number
+  type: "publicDataset" | "participants"
+}
+
+export const AggregateCount = ({ count, type }: AggregateCountProps) => {
+  const textContent: string = {
+    publicDataset: "Public Dataset",
+    participants: "Participant",
+  }[type]
+
+  return (
+    <div className="aggregate-count">
+      <span>{count.toLocaleString()}</span> {textContent}
+      {count !== 1 && "s"}
+    </div>
+  )
+}

package/src/scripts/components/assets/on-dark-horz.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 875.04 218.02"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Layer_2-2" data-name="Layer 2"><g id="Layer_1-2-2" data-name="Layer 1-2"><polygon points="187.18 164.44 97.18 217.13 97.18 112.95 187.18 60.26 187.18 164.44" style="fill:#ebebeb"/><polygon points="187.11 60.51 96.29 113.53 3.67 61.7 94.49 8.68 187.11 60.51" style="fill:#fff"/><polygon points="97.58 113.44 97.98 216.89 4.97 164.82 4.56 61.37 97.58 113.44" style="fill:#fafafa"/></g><g id="Layer_5" data-name="Layer 5"><line x1="7.06" y1="168.77" x2="9.95" y2="163.51" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="12.31" y1="159.21" x2="91.54" y2="15.11" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:11.780815124511719,4.90867280960083"/><line x1="92.72" y1="12.96" x2="95.61" y2="7.7" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="128.34" y1="199.57" x2="127.36" y2="193.65" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="126.57" y1="188.93" x2="97.63" y2="14.7" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:11.487283706665039,4.786368370056152"/><line x1="97.24" y1="12.34" x2="96.25" y2="6.42" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="59.68" y1="197" x2="62.39" y2="191.65" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="64.6" y1="187.28" x2="138.64" y2="40.91" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:11.751670837402344,4.896529674530029"/><line x1="139.75" y1="38.72" x2="142.46" y2="33.37" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="39.79" y1="37.86" x2="45.21" y2="40.42" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="49.56" y1="42.47" x2="180.42" y2="104.22" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:11.537068367004395,4.807111740112305"/><line x1="182.59" y1="105.24" x2="188.02" y2="107.8" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="166.84" y1="72.51" x2="168.14" y2="78.37" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="169.15" y1="82.94" x2="185.89" y2="158.38" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:11.239151000976562,4.682979583740234"/><line x1="186.4" y1="160.66" x2="187.7" y2="166.52" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="3.85" y1="104.6" x2="9.56" y2="106.45" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="14.53" y1="108.07" x2="181.11" y2="162.25" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:12.5494384765625,5.2289323806762695"/><line x1="183.59" y1="163.06" x2="189.3" y2="164.92" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="188.02" y1="107.8" x2="183.09" y2="111.23" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="178.89" y1="114.15" x2="66.71" y2="192.12" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:12.280027389526367,5.116678237915039"/><line x1="64.6" y1="193.58" x2="59.68" y2="197" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="4.49" y1="168.77" x2="9.67" y2="165.73" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="13.75" y1="163.34" x2="108.93" y2="107.54" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:11.363714218139648,4.7348809242248535"/><line x1="110.97" y1="106.35" x2="116.15" y2="103.31" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="39.79" y1="39.79" x2="40.55" y2="45.74" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="41.22" y1="50.98" x2="59.22" y2="190.99" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:12.689005851745605,5.287086009979248"/><line x1="59.55" y1="193.62" x2="60.32" y2="199.57" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="4.49" y1="60.32" x2="97.86" y2="113.9" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="97.22" y1="215.93" x2="98.18" y2="112.94" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="187.34" y1="60.27" x2="141.82" y2="33.99" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="186.73" y1="108.45" x2="186.73" y2="59.68" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="128.98" y1="198.93" x2="96.67" y2="216.69" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="59.68" y1="197" x2="97.58" y2="216.69" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="165.88" y1="72.83" x2="187.05" y2="60" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="4.17" y1="104.92" x2="4.56" y2="59.72" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="40.99" y1="39.23" x2="4.26" y2="60.44" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="98.04" y1="113.56" x2="108.77" y2="107.48" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/></g><g id="Layer_4" data-name="Layer 4"><circle cx="7.38" cy="168.44" r="7.38" style="fill:#00505c"/><circle cx="95.93" cy="7.38" r="7.38" style="fill:#00505c"/><circle cx="112.62" cy="104.92" r="7.38" style="fill:#00505c"/><circle cx="4.17" cy="104.28" r="4.17" style="fill:#00505c"/><circle cx="40.11" cy="38.82" r="4.81" style="fill:#00505c"/><circle cx="189.3" cy="164.92" r="7.7" style="fill:#00505c"/><circle cx="187.37" cy="107.8" r="4.49" style="fill:#00505c"/><circle cx="166.84" cy="72.51" r="4.49" style="fill:#00505c"/><circle cx="129.3" cy="199.25" r="5.45" style="fill:#00505c"/><circle cx="59.68" cy="197" r="5.78" style="fill:#00505c"/><circle cx="142.46" cy="33.37" r="6.42" style="fill:#00505c"/></g><g id="Layer_3" data-name="Layer 3"><g style="isolation:isolate"><g style="isolation:isolate"><path d="M266.35,151.75A42.65,42.65,0,0,1,250,134.69q-5.94-11-5.93-25.4T250,83.9a42.67,42.67,0,0,1,16.4-17.07,49.22,49.22,0,0,1,47.32,0,42.74,42.74,0,0,1,16.4,17.07q5.93,11,5.93,25.39t-5.93,25.4a42.71,42.71,0,0,1-16.4,17.06,49.15,49.15,0,0,1-47.32,0Zm44.52-19.26q7.26-8.81,7.27-23.2T310.87,86.1q-7.26-8.8-20.86-8.8t-20.86,8.8q-7.27,8.79-7.27,23.19t7.27,23.2q7.26,8.79,20.86,8.8T310.87,132.49Z" style="fill:#4d4d4d"/></g><g style="isolation:isolate"><path d="M396.12,92.89a29.1,29.1,0,0,1,10.26,12.54,45,45,0,0,1,0,34.66,29.08,29.08,0,0,1-10.26,12.53,28,28,0,0,1-16.26,4.66,35.86,35.86,0,0,1-10.2-1.26,27.14,27.14,0,0,1-8.07-4.07v36.26H345.06V89.29h13.33l1.74,6.14a31.31,31.31,0,0,1,8.93-5.4,29.89,29.89,0,0,1,10.8-1.8A28,28,0,0,1,396.12,92.89ZM388.79,138q4.13-5.73,4.13-15.19t-4.13-15.2a13.36,13.36,0,0,0-11.47-5.73q-8.26,0-12.39,5.59t-4.14,15.34q0,9.72,4.14,15.33t12.39,5.6A13.34,13.34,0,0,0,388.79,138Z" style="fill:#4d4d4d"/><path d="M431.38,152.55a30.52,30.52,0,0,1-12.26-12.66,38.06,38.06,0,0,1-4.07-17.67,37.56,37.56,0,0,1,3.87-17.06,30.18,30.18,0,0,1,11.19-12.33,32.17,32.17,0,0,1,17.47-4.6q9.33,0,15.79,3.86a25,25,0,0,1,9.74,10.4,32.47,32.47,0,0,1,3.26,14.67,44.47,44.47,0,0,1-1.06,9.06H432.25q1.32,8.81,6.93,13.13a21.33,21.33,0,0,0,13.46,4.34,38.4,38.4,0,0,0,20-5.47l.8,14a43.36,43.36,0,0,1-9.93,3.66,51,51,0,0,1-12.33,1.4Q439.57,157.28,431.38,152.55ZM459.57,115a15.09,15.09,0,0,0-2.93-9.19c-1.95-2.67-5-4-9.06-4a13.62,13.62,0,0,0-9.87,3.6,18.43,18.43,0,0,0-5.06,9.59Z" style="fill:#4d4d4d"/><path d="M537.83,96.49q6.39,8.27,6.4,22.27V156H527.7V120.09q0-9.33-3.14-13.8t-10.06-4.46A15.79,15.79,0,0,0,502,107.56V156H485.44V89.29H500.9l.27,4.67A31.14,31.14,0,0,1,519,88.23Q531.43,88.23,537.83,96.49Z" style="fill:#4d4d4d"/></g></g><g style="isolation:isolate"><path d="M557.66,87.76h10.1l33.85,51.41V87.76H611v68.68h-7.95L567,102.19v54.25h-9.32Z" style="fill:#00505c"/><path d="M626.73,87.76h41.89V96.2H636.05v20.11H662v8.44h-25.9V148H669.5v8.44H626.73Z" style="fill:#00505c"/><path d="M687.41,149.82q-7.12-8-7.12-22.52V87.76h9.32v37q0,11.28,4,18t15.1,6.67q11.09,0,15.11-6.72t4-17.91v-37h9.32V127.3q0,14.52-7.12,22.52t-21.34,8Q694.52,157.81,687.41,149.82Z" style="fill:#00505c"/><path d="M752.11,87.76h22.27q11.18,0,17.46,5.15t6.28,15.75q0,13.74-12,19.33l15.4,28.45H790.17l-13.93-26.78H761.92v26.78h-9.81Zm22.17,33.56q6.87,0,10.5-3.34t3.63-9.32q0-6-3.58-9.27T774.28,96.1H761.92v25.22Z" style="fill:#00505c"/><path d="M823.68,153.4a30.71,30.71,0,0,1-12-12.51,39.33,39.33,0,0,1-4.32-18.79,39.33,39.33,0,0,1,4.32-18.79,30.75,30.75,0,0,1,12-12.5,36.89,36.89,0,0,1,35,0,30.75,30.75,0,0,1,12,12.5A39.33,39.33,0,0,1,875,122.1a39.33,39.33,0,0,1-4.32,18.79,30.71,30.71,0,0,1-12,12.51,37,37,0,0,1-35,0Zm30.56-8.1a21.54,21.54,0,0,0,8.09-9.51,36,36,0,0,0,0-27.37,21.51,21.51,0,0,0-8.09-9.52,26.21,26.21,0,0,0-26.1,0,21.45,21.45,0,0,0-8.09,9.52,36,36,0,0,0,0,27.37,21.48,21.48,0,0,0,8.09,9.51,26.14,26.14,0,0,0,26.1,0Z" style="fill:#00505c"/></g></g></g></g></g></svg>

package/src/scripts/components/assets/on-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 631.02 521.1"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Layer_2-2" data-name="Layer 2"><g id="Layer_1-2-2" data-name="Layer 1-2"><polygon points="456.22 256.25 315.95 338.36 315.95 176.01 456.22 93.9 456.22 256.25" style="fill:#ebebeb"/><polygon points="456.1 94.3 314.57 176.92 170.24 96.15 311.77 13.53 456.1 94.3" style="fill:#fff"/><polygon points="316.57 176.78 317.21 337.99 172.26 256.85 171.63 95.64 316.57 176.78" style="fill:#fafafa"/></g><g id="Layer_5" data-name="Layer 5"><line x1="175.52" y1="263" x2="178.41" y2="257.74" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="180.79" y1="253.4" x2="309.43" y2="19.43" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:11.888879776000977,4.953700065612793"/><line x1="310.62" y1="17.26" x2="313.52" y2="12" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="364.52" y1="311" x2="363.53" y2="305.08" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="362.72" y1="300.16" x2="315.91" y2="18.38" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:11.96426773071289,4.985111713409424"/><line x1="315.5" y1="15.92" x2="314.52" y2="10" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="257.52" y1="307" x2="260.22" y2="301.65" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="262.45" y1="297.24" x2="382.69" y2="59.56" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:11.860186576843262,4.941744327545166"/><line x1="383.81" y1="57.35" x2="386.52" y2="52" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="226.52" y1="59" x2="231.94" y2="61.56" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="236.47" y1="63.7" x2="449.82" y2="164.37" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:12.020994186401367,5.008747577667236"/><line x1="452.09" y1="165.44" x2="457.52" y2="168" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="424.52" y1="113" x2="425.81" y2="118.86" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="426.88" y1="123.64" x2="455.19" y2="251.25" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:11.74992847442627,4.895803451538086"/><line x1="455.72" y1="253.64" x2="457.02" y2="259.5" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="170.52" y1="163" x2="176.22" y2="164.86" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="180.94" y1="166.39" x2="451.45" y2="254.38" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:11.914405822753906,4.964335918426514"/><line x1="453.81" y1="255.14" x2="459.52" y2="257" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="457.52" y1="168" x2="452.59" y2="171.42" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="448.38" y1="174.35" x2="264.55" y2="302.11" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:12.295169830322266,5.122987270355225"/><line x1="262.44" y1="303.58" x2="257.52" y2="307" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="171.52" y1="263" x2="176.69" y2="259.97" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="180.95" y1="257.47" x2="338.21" y2="165.28" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:11.855802536010742,4.93991756439209"/><line x1="340.34" y1="164.03" x2="345.52" y2="161" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="226.52" y1="62" x2="227.28" y2="67.95" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="227.91" y1="72.83" x2="257.44" y2="302.61" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:11.804829597473145,4.918679237365723"/><line x1="257.75" y1="305.05" x2="258.52" y2="311" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="171.52" y1="94" x2="317.02" y2="177.5" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="316.02" y1="336.5" x2="317.51" y2="176" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="456.46" y1="93.92" x2="385.53" y2="52.97" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="455.52" y1="169" x2="455.52" y2="93" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="365.52" y1="310" x2="315.16" y2="337.69" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="257.52" y1="307" x2="316.58" y2="337.69" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="423.02" y1="113.5" x2="456.02" y2="93.5" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="171.02" y1="163.5" x2="171.63" y2="93.07" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="228.39" y1="61.13" x2="171.15" y2="94.18" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="317.31" y1="176.97" x2="334.02" y2="167.5" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/></g><g id="Layer_4" data-name="Layer 4"><circle cx="176.02" cy="262.5" r="11.5" style="fill:#00505c"/><circle cx="314.02" cy="11.5" r="11.5" style="fill:#00505c"/><circle cx="340.02" cy="163.5" r="11.5" style="fill:#00505c"/><circle cx="171.02" cy="162.5" r="6.5" style="fill:#00505c"/><circle cx="227.02" cy="60.5" r="7.5" style="fill:#00505c"/><circle cx="459.52" cy="257" r="12" style="fill:#00505c"/><circle cx="456.52" cy="168" r="7" style="fill:#00505c"/><circle cx="424.52" cy="113" r="7" style="fill:#00505c"/><circle cx="366.02" cy="310.5" r="8.5" style="fill:#00505c"/><circle cx="257.52" cy="307" r="9" style="fill:#00505c"/><circle cx="386.52" cy="52" r="10" style="fill:#00505c"/></g><g id="Layer_3" data-name="Layer 3"><g style="isolation:isolate"><g style="isolation:isolate"><path d="M27,484.64a42.65,42.65,0,0,1-16.4-17.06q-5.94-11-5.93-25.4t5.93-25.39A42.67,42.67,0,0,1,27,399.72a46.32,46.32,0,0,1,23.66-6.06,46.35,46.35,0,0,1,23.66,6.06,42.74,42.74,0,0,1,16.4,17.07q5.93,11,5.93,25.39t-5.93,25.4a42.71,42.71,0,0,1-16.4,17.06,46.25,46.25,0,0,1-23.66,6.07A46.23,46.23,0,0,1,27,484.64Zm44.52-19.26q7.26-8.81,7.27-23.2T71.52,419q-7.26-8.81-20.86-8.8T29.79,419q-7.26,8.79-7.26,23.19t7.26,23.2q7.27,8.79,20.87,8.8T71.52,465.38Z" transform="translate(-4.67)" style="fill:#4d4d4d"/></g><g style="isolation:isolate"><path d="M156.77,425.78A29.1,29.1,0,0,1,167,438.32,45,45,0,0,1,167,473a29.08,29.08,0,0,1-10.26,12.53,28,28,0,0,1-16.26,4.66,35.86,35.86,0,0,1-10.2-1.26,27.14,27.14,0,0,1-8.07-4.07V521.1H105.71V422.18H119l1.74,6.14a31.31,31.31,0,0,1,8.93-5.4,29.89,29.89,0,0,1,10.8-1.8A28,28,0,0,1,156.77,425.78Zm-7.33,45.06q4.13-5.73,4.13-15.19t-4.13-15.2A13.36,13.36,0,0,0,138,434.72q-8.26,0-12.39,5.59t-4.14,15.34q0,9.72,4.14,15.33t12.39,5.6A13.34,13.34,0,0,0,149.44,470.84Z" transform="translate(-4.67)" style="fill:#4d4d4d"/><path d="M192,485.44a30.52,30.52,0,0,1-12.26-12.66,38.06,38.06,0,0,1-4.07-17.67,37.68,37.68,0,0,1,3.86-17.06,30.27,30.27,0,0,1,11.2-12.33,32.17,32.17,0,0,1,17.47-4.6q9.33,0,15.79,3.86a25,25,0,0,1,9.74,10.4A32.47,32.47,0,0,1,237,450.05a44.47,44.47,0,0,1-1.06,9.06H192.9q1.32,8.81,6.93,13.13a21.33,21.33,0,0,0,13.46,4.34,38.49,38.49,0,0,0,20-5.47l.8,14a43.36,43.36,0,0,1-9.93,3.66,51,51,0,0,1-12.33,1.4Q200.22,490.17,192,485.44Zm28.19-37.53a15.14,15.14,0,0,0-2.93-9.2c-1.95-2.66-5-4-9.06-4a13.62,13.62,0,0,0-9.87,3.6,18.39,18.39,0,0,0-5.06,9.59Z" transform="translate(-4.67)" style="fill:#4d4d4d"/><path d="M298.48,429.38q6.39,8.26,6.4,22.27v37.19H288.35V453q0-9.33-3.14-13.8t-10.06-4.46a15.79,15.79,0,0,0-12.53,5.73v48.39H246.09V422.18h15.46l.27,4.67a31.14,31.14,0,0,1,17.86-5.73Q292.08,421.12,298.48,429.38Z" transform="translate(-4.67)" style="fill:#4d4d4d"/></g></g><g style="isolation:isolate"><path d="M318.31,420.65h10.1l33.85,51.41V420.65h9.42v68.68h-7.95l-36.1-54.25v54.25h-9.32Z" transform="translate(-4.67)" style="fill:#00505c"/><path d="M387.38,420.65h41.89v8.44H396.7V449.2h25.9v8.44H396.7v23.25h33.45v8.44H387.38Z" transform="translate(-4.67)" style="fill:#00505c"/><path d="M448.06,482.71q-7.12-8-7.12-22.52V420.65h9.32v37q0,11.28,4,17.95t15.1,6.68q11.1,0,15.11-6.72t4-17.91v-37h9.32v39.54q0,14.52-7.12,22.52t-21.34,8Q455.17,490.7,448.06,482.71Z" transform="translate(-4.67)" style="fill:#00505c"/><path d="M512.76,420.65H535q11.19,0,17.46,5.15t6.28,15.75q0,13.74-12,19.33l15.41,28.45H550.82l-13.93-26.78H522.57v26.78h-9.81Zm22.17,33.56q6.87,0,10.5-3.34t3.63-9.32q0-6-3.58-9.27T534.93,429H522.57v25.22Z" transform="translate(-4.67)" style="fill:#00505c"/><path d="M584.33,486.29a30.71,30.71,0,0,1-12-12.51,43,43,0,0,1,0-37.58,30.75,30.75,0,0,1,12-12.5,36.89,36.89,0,0,1,35,0,30.75,30.75,0,0,1,12,12.5,43,43,0,0,1,0,37.58,30.71,30.71,0,0,1-12,12.51,37,37,0,0,1-35,0Zm30.56-8.1a21.48,21.48,0,0,0,8.09-9.51,36,36,0,0,0,0-27.37,21.45,21.45,0,0,0-8.09-9.52,26.21,26.21,0,0,0-26.1,0,21.45,21.45,0,0,0-8.09,9.52,36,36,0,0,0,0,27.37,21.48,21.48,0,0,0,8.09,9.51,26.14,26.14,0,0,0,26.1,0Z" transform="translate(-4.67)" style="fill:#00505c"/></g></g></g></g></g></svg>

package/src/scripts/components/assets/on-light-horz.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 875.04 218.02"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Layer_2-2" data-name="Layer 2"><g id="Layer_1-2-2" data-name="Layer 1-2"><polygon points="187.18 164.44 97.18 217.13 97.18 112.95 187.18 60.26 187.18 164.44" style="fill:#ebebeb"/><polygon points="187.11 60.51 96.29 113.53 3.67 61.7 94.49 8.68 187.11 60.51" style="fill:#fff"/><polygon points="97.58 113.44 97.98 216.89 4.97 164.82 4.56 61.37 97.58 113.44" style="fill:#fafafa"/></g><g id="Layer_5" data-name="Layer 5"><line x1="7.06" y1="168.77" x2="9.95" y2="163.51" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="12.31" y1="159.21" x2="91.54" y2="15.11" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:11.780815124511719,4.90867280960083"/><line x1="92.72" y1="12.96" x2="95.61" y2="7.7" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="128.34" y1="199.57" x2="127.36" y2="193.65" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="126.57" y1="188.93" x2="97.63" y2="14.7" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:11.487283706665039,4.786368370056152"/><line x1="97.24" y1="12.34" x2="96.25" y2="6.42" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="59.68" y1="197" x2="62.39" y2="191.65" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="64.6" y1="187.28" x2="138.64" y2="40.91" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:11.751670837402344,4.896529674530029"/><line x1="139.75" y1="38.72" x2="142.46" y2="33.37" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="39.79" y1="37.86" x2="45.21" y2="40.42" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="49.56" y1="42.47" x2="180.42" y2="104.22" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:11.537068367004395,4.807111740112305"/><line x1="182.59" y1="105.24" x2="188.02" y2="107.8" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="166.84" y1="72.51" x2="168.14" y2="78.37" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="169.15" y1="82.94" x2="185.89" y2="158.38" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:11.239151000976562,4.682979583740234"/><line x1="186.4" y1="160.66" x2="187.7" y2="166.52" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="3.85" y1="104.6" x2="9.56" y2="106.45" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="14.53" y1="108.07" x2="181.11" y2="162.25" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:12.5494384765625,5.2289323806762695"/><line x1="183.59" y1="163.06" x2="189.3" y2="164.92" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="188.02" y1="107.8" x2="183.09" y2="111.23" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="178.89" y1="114.15" x2="66.71" y2="192.12" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:12.280027389526367,5.116678237915039"/><line x1="64.6" y1="193.58" x2="59.68" y2="197" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="4.49" y1="168.77" x2="9.67" y2="165.73" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="13.75" y1="163.34" x2="108.93" y2="107.54" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:11.363714218139648,4.7348809242248535"/><line x1="110.97" y1="106.35" x2="116.15" y2="103.31" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="39.79" y1="39.79" x2="40.55" y2="45.74" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="41.22" y1="50.98" x2="59.22" y2="190.99" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:12.689005851745605,5.287086009979248"/><line x1="59.55" y1="193.62" x2="60.32" y2="199.57" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="4.49" y1="60.32" x2="97.86" y2="113.9" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="97.22" y1="215.93" x2="98.18" y2="112.94" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="187.34" y1="60.27" x2="141.82" y2="33.99" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="186.73" y1="108.45" x2="186.73" y2="59.68" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="128.98" y1="198.93" x2="96.67" y2="216.69" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="59.68" y1="197" x2="97.58" y2="216.69" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="165.88" y1="72.83" x2="187.05" y2="60" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="4.17" y1="104.92" x2="4.56" y2="59.72" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="40.99" y1="39.23" x2="4.26" y2="60.44" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="98.04" y1="113.56" x2="108.77" y2="107.48" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/></g><g id="Layer_4" data-name="Layer 4"><circle cx="7.38" cy="168.44" r="7.38" style="fill:#37bcd2"/><circle cx="95.93" cy="7.38" r="7.38" style="fill:#37bcd2"/><circle cx="112.62" cy="104.92" r="7.38" style="fill:#37bcd2"/><circle cx="4.17" cy="104.28" r="4.17" style="fill:#37bcd2"/><circle cx="40.11" cy="38.82" r="4.81" style="fill:#37bcd2"/><circle cx="189.3" cy="164.92" r="7.7" style="fill:#37bcd2"/><circle cx="187.37" cy="107.8" r="4.49" style="fill:#37bcd2"/><circle cx="166.84" cy="72.51" r="4.49" style="fill:#37bcd2"/><circle cx="129.3" cy="199.25" r="5.45" style="fill:#37bcd2"/><circle cx="59.68" cy="197" r="5.78" style="fill:#37bcd2"/><circle cx="142.46" cy="33.37" r="6.42" style="fill:#37bcd2"/></g><g id="Layer_3" data-name="Layer 3"><g style="isolation:isolate"><g style="isolation:isolate"><path d="M266.35,151.75A42.65,42.65,0,0,1,250,134.69q-5.94-11-5.93-25.4T250,83.9a42.67,42.67,0,0,1,16.4-17.07,49.22,49.22,0,0,1,47.32,0,42.74,42.74,0,0,1,16.4,17.07q5.93,11,5.93,25.39t-5.93,25.4a42.71,42.71,0,0,1-16.4,17.06,49.15,49.15,0,0,1-47.32,0Zm44.52-19.26q7.26-8.81,7.27-23.2T310.87,86.1q-7.26-8.8-20.86-8.8t-20.86,8.8q-7.27,8.79-7.27,23.19t7.27,23.2q7.26,8.79,20.86,8.8T310.87,132.49Z" style="fill:#fff"/></g><g style="isolation:isolate"><path d="M396.12,92.89a29.1,29.1,0,0,1,10.26,12.54,45,45,0,0,1,0,34.66,29.08,29.08,0,0,1-10.26,12.53,28,28,0,0,1-16.26,4.66,35.86,35.86,0,0,1-10.2-1.26,27.14,27.14,0,0,1-8.07-4.07v36.26H345.06V89.29h13.33l1.74,6.14a31.31,31.31,0,0,1,8.93-5.4,29.89,29.89,0,0,1,10.8-1.8A28,28,0,0,1,396.12,92.89ZM388.79,138q4.13-5.73,4.13-15.19t-4.13-15.2a13.36,13.36,0,0,0-11.47-5.73q-8.26,0-12.39,5.59t-4.14,15.34q0,9.72,4.14,15.33t12.39,5.6A13.34,13.34,0,0,0,388.79,138Z" style="fill:#fff"/><path d="M431.38,152.55a30.52,30.52,0,0,1-12.26-12.66,38.06,38.06,0,0,1-4.07-17.67,37.56,37.56,0,0,1,3.87-17.06,30.18,30.18,0,0,1,11.19-12.33,32.17,32.17,0,0,1,17.47-4.6q9.33,0,15.79,3.86a25,25,0,0,1,9.74,10.4,32.47,32.47,0,0,1,3.26,14.67,44.47,44.47,0,0,1-1.06,9.06H432.25q1.32,8.81,6.93,13.13a21.33,21.33,0,0,0,13.46,4.34,38.4,38.4,0,0,0,20-5.47l.8,14a43.36,43.36,0,0,1-9.93,3.66,51,51,0,0,1-12.33,1.4Q439.57,157.28,431.38,152.55ZM459.57,115a15.09,15.09,0,0,0-2.93-9.19c-1.95-2.67-5-4-9.06-4a13.62,13.62,0,0,0-9.87,3.6,18.43,18.43,0,0,0-5.06,9.59Z" style="fill:#fff"/><path d="M537.83,96.49q6.39,8.27,6.4,22.27V156H527.7V120.09q0-9.33-3.14-13.8t-10.06-4.46A15.79,15.79,0,0,0,502,107.56V156H485.44V89.29H500.9l.27,4.67A31.14,31.14,0,0,1,519,88.23Q531.43,88.23,537.83,96.49Z" style="fill:#fff"/></g></g><g style="isolation:isolate"><path d="M557.66,87.76h10.1l33.85,51.41V87.76H611v68.68h-7.95L567,102.19v54.25h-9.32Z" style="fill:#37bcd2"/><path d="M626.73,87.76h41.89V96.2H636.05v20.11H662v8.44h-25.9V148H669.5v8.44H626.73Z" style="fill:#37bcd2"/><path d="M687.41,149.82q-7.12-8-7.12-22.52V87.76h9.32v37q0,11.28,4,18t15.1,6.67q11.09,0,15.11-6.72t4-17.91v-37h9.32V127.3q0,14.52-7.12,22.52t-21.34,8Q694.52,157.81,687.41,149.82Z" style="fill:#37bcd2"/><path d="M752.11,87.76h22.27q11.18,0,17.46,5.15t6.28,15.75q0,13.74-12,19.33l15.4,28.45H790.17l-13.93-26.78H761.92v26.78h-9.81Zm22.17,33.56q6.87,0,10.5-3.34t3.63-9.32q0-6-3.58-9.27T774.28,96.1H761.92v25.22Z" style="fill:#37bcd2"/><path d="M823.68,153.4a30.71,30.71,0,0,1-12-12.51,39.33,39.33,0,0,1-4.32-18.79,39.33,39.33,0,0,1,4.32-18.79,30.75,30.75,0,0,1,12-12.5,36.89,36.89,0,0,1,35,0,30.75,30.75,0,0,1,12,12.5A39.33,39.33,0,0,1,875,122.1a39.33,39.33,0,0,1-4.32,18.79,30.71,30.71,0,0,1-12,12.51,37,37,0,0,1-35,0Zm30.56-8.1a21.54,21.54,0,0,0,8.09-9.51,36,36,0,0,0,0-27.37,21.51,21.51,0,0,0-8.09-9.52,26.21,26.21,0,0,0-26.1,0,21.45,21.45,0,0,0-8.09,9.52,36,36,0,0,0,0,27.37,21.48,21.48,0,0,0,8.09,9.51,26.14,26.14,0,0,0,26.1,0Z" style="fill:#37bcd2"/></g></g></g></g></g></svg>

package/src/scripts/components/assets/on-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 631.02 521.1"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Layer_2-2" data-name="Layer 2"><g id="Layer_1-2-2" data-name="Layer 1-2"><polygon points="456.22 256.25 315.95 338.36 315.95 176.01 456.22 93.9 456.22 256.25" style="fill:#ebebeb"/><polygon points="456.1 94.3 314.57 176.92 170.24 96.15 311.77 13.53 456.1 94.3" style="fill:#fff"/><polygon points="316.57 176.78 317.21 337.99 172.26 256.85 171.63 95.64 316.57 176.78" style="fill:#fafafa"/></g><g id="Layer_5" data-name="Layer 5"><line x1="175.52" y1="263" x2="178.41" y2="257.74" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="180.79" y1="253.4" x2="309.43" y2="19.43" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:11.888879776000977,4.953700065612793"/><line x1="310.62" y1="17.26" x2="313.52" y2="12" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="364.52" y1="311" x2="363.53" y2="305.08" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="362.72" y1="300.16" x2="315.91" y2="18.38" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:11.96426773071289,4.985111713409424"/><line x1="315.5" y1="15.92" x2="314.52" y2="10" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="257.52" y1="307" x2="260.22" y2="301.65" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="262.45" y1="297.24" x2="382.69" y2="59.56" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:11.860186576843262,4.941744327545166"/><line x1="383.81" y1="57.35" x2="386.52" y2="52" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="226.52" y1="59" x2="231.94" y2="61.56" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="236.47" y1="63.7" x2="449.82" y2="164.37" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:12.020994186401367,5.008747577667236"/><line x1="452.09" y1="165.44" x2="457.52" y2="168" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="424.52" y1="113" x2="425.81" y2="118.86" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="426.88" y1="123.64" x2="455.19" y2="251.25" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:11.74992847442627,4.895803451538086"/><line x1="455.72" y1="253.64" x2="457.02" y2="259.5" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="170.52" y1="163" x2="176.22" y2="164.86" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="180.94" y1="166.39" x2="451.45" y2="254.38" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:11.914405822753906,4.964335918426514"/><line x1="453.81" y1="255.14" x2="459.52" y2="257" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="457.52" y1="168" x2="452.59" y2="171.42" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="448.38" y1="174.35" x2="264.55" y2="302.11" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:12.295169830322266,5.122987270355225"/><line x1="262.44" y1="303.58" x2="257.52" y2="307" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="171.52" y1="263" x2="176.69" y2="259.97" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="180.95" y1="257.47" x2="338.21" y2="165.28" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:11.855802536010742,4.93991756439209"/><line x1="340.34" y1="164.03" x2="345.52" y2="161" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="226.52" y1="62" x2="227.28" y2="67.95" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="227.91" y1="72.83" x2="257.44" y2="302.61" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:11.804829597473145,4.918679237365723"/><line x1="257.75" y1="305.05" x2="258.52" y2="311" style="fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:3px"/><line x1="171.52" y1="94" x2="317.02" y2="177.5" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="316.02" y1="336.5" x2="317.51" y2="176" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="456.46" y1="93.92" x2="385.53" y2="52.97" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="455.52" y1="169" x2="455.52" y2="93" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="365.52" y1="310" x2="315.16" y2="337.69" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="257.52" y1="307" x2="316.58" y2="337.69" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="423.02" y1="113.5" x2="456.02" y2="93.5" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="171.02" y1="163.5" x2="171.63" y2="93.07" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="228.39" y1="61.13" x2="171.15" y2="94.18" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/><line x1="317.31" y1="176.97" x2="334.02" y2="167.5" style="fill:none;stroke:#6d6d6d;stroke-miterlimit:10;stroke-width:3px"/></g><g id="Layer_4" data-name="Layer 4"><circle cx="176.02" cy="262.5" r="11.5" style="fill:#37bcd2"/><circle cx="314.02" cy="11.5" r="11.5" style="fill:#37bcd2"/><circle cx="340.02" cy="163.5" r="11.5" style="fill:#37bcd2"/><circle cx="171.02" cy="162.5" r="6.5" style="fill:#37bcd2"/><circle cx="227.02" cy="60.5" r="7.5" style="fill:#37bcd2"/><circle cx="459.52" cy="257" r="12" style="fill:#37bcd2"/><circle cx="456.52" cy="168" r="7" style="fill:#37bcd2"/><circle cx="424.52" cy="113" r="7" style="fill:#37bcd2"/><circle cx="366.02" cy="310.5" r="8.5" style="fill:#37bcd2"/><circle cx="257.52" cy="307" r="9" style="fill:#37bcd2"/><circle cx="386.52" cy="52" r="10" style="fill:#37bcd2"/></g><g id="Layer_3" data-name="Layer 3"><g style="isolation:isolate"><g style="isolation:isolate"><path d="M27,484.64a42.65,42.65,0,0,1-16.4-17.06q-5.94-11-5.93-25.4t5.93-25.39A42.67,42.67,0,0,1,27,399.72a46.32,46.32,0,0,1,23.66-6.06,46.35,46.35,0,0,1,23.66,6.06,42.74,42.74,0,0,1,16.4,17.07q5.93,11,5.93,25.39t-5.93,25.4a42.71,42.71,0,0,1-16.4,17.06,46.25,46.25,0,0,1-23.66,6.07A46.23,46.23,0,0,1,27,484.64Zm44.52-19.26q7.26-8.81,7.27-23.2T71.52,419q-7.26-8.81-20.86-8.8T29.79,419q-7.26,8.79-7.26,23.19t7.26,23.2q7.27,8.79,20.87,8.8T71.52,465.38Z" transform="translate(-4.67)" style="fill:#fff"/></g><g style="isolation:isolate"><path d="M156.77,425.78A29.1,29.1,0,0,1,167,438.32,45,45,0,0,1,167,473a29.08,29.08,0,0,1-10.26,12.53,28,28,0,0,1-16.26,4.66,35.86,35.86,0,0,1-10.2-1.26,27.14,27.14,0,0,1-8.07-4.07V521.1H105.71V422.18H119l1.74,6.14a31.31,31.31,0,0,1,8.93-5.4,29.89,29.89,0,0,1,10.8-1.8A28,28,0,0,1,156.77,425.78Zm-7.33,45.06q4.13-5.73,4.13-15.19t-4.13-15.2A13.36,13.36,0,0,0,138,434.72q-8.26,0-12.39,5.59t-4.14,15.34q0,9.72,4.14,15.33t12.39,5.6A13.34,13.34,0,0,0,149.44,470.84Z" transform="translate(-4.67)" style="fill:#fff"/><path d="M192,485.44a30.52,30.52,0,0,1-12.26-12.66,38.06,38.06,0,0,1-4.07-17.67,37.68,37.68,0,0,1,3.86-17.06,30.27,30.27,0,0,1,11.2-12.33,32.17,32.17,0,0,1,17.47-4.6q9.33,0,15.79,3.86a25,25,0,0,1,9.74,10.4A32.47,32.47,0,0,1,237,450.05a44.47,44.47,0,0,1-1.06,9.06H192.9q1.32,8.81,6.93,13.13a21.33,21.33,0,0,0,13.46,4.34,38.49,38.49,0,0,0,20-5.47l.8,14a43.36,43.36,0,0,1-9.93,3.66,51,51,0,0,1-12.33,1.4Q200.22,490.17,192,485.44Zm28.19-37.53a15.14,15.14,0,0,0-2.93-9.2c-1.95-2.66-5-4-9.06-4a13.62,13.62,0,0,0-9.87,3.6,18.39,18.39,0,0,0-5.06,9.59Z" transform="translate(-4.67)" style="fill:#fff"/><path d="M298.48,429.38q6.39,8.26,6.4,22.27v37.19H288.35V453q0-9.33-3.14-13.8t-10.06-4.46a15.79,15.79,0,0,0-12.53,5.73v48.39H246.09V422.18h15.46l.27,4.67a31.14,31.14,0,0,1,17.86-5.73Q292.08,421.12,298.48,429.38Z" transform="translate(-4.67)" style="fill:#fff"/></g></g><g style="isolation:isolate"><path d="M318.31,420.65h10.1l33.85,51.41V420.65h9.42v68.68h-7.95l-36.1-54.25v54.25h-9.32Z" transform="translate(-4.67)" style="fill:#37bcd2"/><path d="M387.38,420.65h41.89v8.44H396.7V449.2h25.9v8.44H396.7v23.25h33.45v8.44H387.38Z" transform="translate(-4.67)" style="fill:#37bcd2"/><path d="M448.06,482.71q-7.12-8-7.12-22.52V420.65h9.32v37q0,11.28,4,17.95t15.1,6.68q11.1,0,15.11-6.72t4-17.91v-37h9.32v39.54q0,14.52-7.12,22.52t-21.34,8Q455.17,490.7,448.06,482.71Z" transform="translate(-4.67)" style="fill:#37bcd2"/><path d="M512.76,420.65H535q11.19,0,17.46,5.15t6.28,15.75q0,13.74-12,19.33l15.41,28.45H550.82l-13.93-26.78H522.57v26.78h-9.81Zm22.17,33.56q6.87,0,10.5-3.34t3.63-9.32q0-6-3.58-9.27T534.93,429H522.57v25.22Z" transform="translate(-4.67)" style="fill:#37bcd2"/><path d="M584.33,486.29a30.71,30.71,0,0,1-12-12.51,43,43,0,0,1,0-37.58,30.75,30.75,0,0,1,12-12.5,36.89,36.89,0,0,1,35,0,30.75,30.75,0,0,1,12,12.5,43,43,0,0,1,0,37.58,30.71,30.71,0,0,1-12,12.51,37,37,0,0,1-35,0Zm30.56-8.1a21.48,21.48,0,0,0,8.09-9.51,36,36,0,0,0,0-27.37,21.45,21.45,0,0,0-8.09-9.52,26.21,26.21,0,0,0-26.1,0,21.45,21.45,0,0,0-8.09,9.52,36,36,0,0,0,0,27.37,21.48,21.48,0,0,0,8.09,9.51,26.14,26.14,0,0,0,26.1,0Z" transform="translate(-4.67)" style="fill:#37bcd2"/></g></g></g></g></g></svg>

package/src/scripts/components/button/Button.tsx

@@ -0,0 +1,113 @@
+import React from "react"
+import styled from "@emotion/styled"
+import "./button.scss"
+
+type IconProps = {
+  fontSize?: string | number
+  className?: string
+  ariaHidden?: boolean | "false" | "true"
+}
+
+const Icon: React.FC<IconProps> = ({ fontSize, className, ariaHidden }) => {
+  const I = styled.i({ fontSize })
+  return <I className={className} aria-hidden={ariaHidden} />
+}
+
+export type ButtonPropsSize = "xsmall" | "small" | "medium" | "large"
+
+export interface ButtonProps {
+  primary?: boolean
+  secondary?: boolean
+  backgroundColor?: string
+  size?: ButtonPropsSize
+  label: string
+  nobg?: boolean
+  disabled?: boolean
+  onClick?: (e: React.MouseEvent) => void
+  navbar?: boolean
+  iconOnly?: boolean
+  icon?: string
+  color?: string
+  imgSrc?: string
+  iconSize?: string
+  className?: string
+  children?: React.ReactNode
+  type?: "button" | "submit" | "reset"
+  form?: string
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({
+  primary,
+  size = "medium",
+  backgroundColor,
+  label,
+  nobg,
+  navbar = false,
+  icon,
+  secondary,
+  color,
+  imgSrc,
+  iconSize,
+  className,
+  children,
+  disabled,
+  iconOnly,
+  type,
+  form,
+  ...props
+}: ButtonProps) => {
+  const mode = primary && !navbar
+    ? "on-button--primary"
+    : secondary && !navbar
+    ? "on-button--secondary"
+    : nobg && !navbar
+    ? "on-no-background"
+    : !navbar
+    ? "on-button--default"
+    : "on-button--navbar"
+  const iconWithText = icon && label && !iconOnly
+    ? "icon-text"
+    : imgSrc && label
+    ? "img-icon-text"
+    : null
+  const fontIcon = icon
+    ? <Icon fontSize={iconSize} className={icon} ariaHidden="true" />
+    : null
+  const imgIcon = imgSrc
+    ? (
+      <img
+        style={{ width: iconSize }}
+        src={imgSrc}
+        alt={label}
+        aria-hidden="true"
+      />
+    )
+    : null
+
+  return (
+    <button
+      form={form}
+      disabled={disabled}
+      role="button"
+      type={type ? type : "button"}
+      className={[
+        "on-button",
+        `on-button--${size}`,
+        mode,
+        iconWithText,
+        `${className}`,
+      ].join(" ")}
+      style={{ backgroundColor, color }}
+      aria-label={label}
+      {...props}
+    >
+      {imgIcon}
+      {fontIcon}
+      {iconOnly ? null : label}
+      {children}
+    </button>
+  )
+}

package/src/scripts/components/button/__tests__/Button.spec.tsx

@@ -0,0 +1,21 @@
+import { vi } from "vitest"
+import React from "react"
+import { fireEvent, render, screen } from "@testing-library/react"
+import { Button } from "../Button"
+
+describe("Button component", () => {
+  it("is clickable", () => {
+    const onClick = vi.fn()
+    render(<Button label="Primary" primary onClick={onClick} />)
+    expect(onClick).not.toBeCalled()
+    fireEvent.click(screen.getByText(/Primary/))
+    expect(onClick).toBeCalled()
+  })
+  it("is not clickable while disabled", () => {
+    const onClick = vi.fn()
+    render(<Button label="Primary" primary onClick={onClick} disabled />)
+    expect(onClick).not.toBeCalled()
+    fireEvent.click(screen.getByText(/Primary/))
+    expect(onClick).not.toBeCalled()
+  })
+})