@hanzo/ui 0.5.24 → 0.6.15

package/src/components/internal/ThemeButton.svelte

@@ -0,0 +1,151 @@
+<!--
+// Copyright © 2023 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import FontSize from './icons/FontSize.svelte'
+  import CheckCircled from './icons/CheckCircled.svelte'
+
+  export let theme: string
+  export let focused: string
+
+  let btn: HTMLButtonElement
+
+  onMount(() => {
+    if (focused === theme) btn.focus()
+  })
+</script>
+
+<button
+  bind:this={btn}
+  class="antiButton regular sh-no-shape jf-center bs-none no-focus statusPopupThemeButton"
+  class:focused={theme === focused}
+  class:both={theme === 'theme-system'}
+>
+  {#if theme === 'theme-light' || theme === 'theme-system'}
+    <div class="light-container">
+      <div class="paper"><FontSize size={'small'} /></div>
+    </div>
+  {/if}
+  {#if theme === 'theme-dark' || theme === 'theme-system'}
+    <div class="dark-container">
+      <div class="paper"><FontSize size={'small'} /></div>
+    </div>
+  {/if}
+  {#if focused === theme}
+    <CheckCircled />
+  {/if}
+</button>
+
+<style lang="scss">
+  :global(.statusPopupThemeButton svg.check) {
+    position: absolute;
+    bottom: 3px;
+    right: 3px;
+    width: 16px;
+    height: 16px;
+  }
+  .statusPopupThemeButton {
+    position: relative;
+    flex-shrink: 0;
+    width: 76px;
+    height: 56px;
+    border-radius: 6px;
+
+    .light-container {
+      background-color: #f5f5f5;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+
+      .paper {
+        color: #000000cc;
+        background-color: #fff;
+        border-top: 1px solid rgba(0, 0, 0, 0.2);
+        border-left: 1px solid rgba(0, 0, 0, 0.2);
+      }
+    }
+    .dark-container {
+      background-color: #3f3f3f;
+
+      .paper {
+        color: #ffffffcc;
+        background-color: #161516;
+        border-top: 1px solid rgba(255, 255, 255, 0.2);
+        border-left: 1px solid rgba(255, 255, 255, 0.2);
+      }
+    }
+    .light-container,
+    .dark-container {
+      overflow: hidden;
+      height: 100%;
+
+      .paper {
+        padding: 6px 0 0 6px;
+        width: 100%;
+        height: 100%;
+        border-radius: 4px 0px 5.5px 0px;
+      }
+    }
+    &.both {
+      .light-container {
+        border-right: none;
+        border-radius: 5.75px 0 0 5.75px;
+      }
+      .dark-container {
+        border-radius: 0 5.75px 5.75px 0;
+      }
+      .light-container,
+      .dark-container {
+        width: 50%;
+
+        .paper {
+          margin: 16px 0 0 8px;
+        }
+      }
+    }
+    &:not(.both) {
+      .dark-container {
+        border: 1px solid rgba(255, 255, 255, 0.1);
+      }
+      .light-container,
+      .dark-container {
+        width: 100%;
+        border-radius: 5.75px;
+
+        .paper {
+          margin: 16px 0 0 16px;
+        }
+      }
+    }
+
+    &:hover:not(:focus) {
+      .light-container .paper {
+        color: #000;
+        background-color: #f2f2f2;
+      }
+      .dark-container .paper {
+        color: #fff;
+        background-color: #222222;
+      }
+    }
+    &.focused::before,
+    &:focus::before {
+      position: absolute;
+      content: '';
+      inset: -3px;
+      border: 1px solid var(--primary-button-default);
+      border-radius: 8.5px;
+      cursor: default;
+    }
+  }
+</style>

package/src/components/internal/icons/CheckCircled.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  export let fill: string = 'var(--primary-button-default)'
+</script>
+
+<svg class="svg-16px check" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M4.11101 2.17959C5.26216 1.41042 6.61553 0.999878 8 0.999878C9.85652 0.999878 11.637 1.73738 12.9497 3.05013C14.2625 4.36288 15 6.14336 15 7.99988C15 9.38435 14.5895 10.7377 13.8203 11.8889C13.0511 13.04 11.9579 13.9372 10.6788 14.467C9.3997 14.9968 7.99224 15.1355 6.63437 14.8654C5.2765 14.5953 4.02922 13.9286 3.05026 12.9496C2.07129 11.9707 1.4046 10.7234 1.13451 9.36551C0.86441 8.00764 1.00303 6.60018 1.53285 5.32109C2.06266 4.04201 2.95987 2.94876 4.11101 2.17959ZM11.3536 6.35355C11.5488 6.15829 11.5488 5.84171 11.3536 5.64645C11.1583 5.45118 10.8417 5.45118 10.6464 5.64645L7 9.29289L5.35355 7.64645C5.15829 7.45118 4.84171 7.45118 4.64645 7.64645C4.45118 7.84171 4.45118 8.15829 4.64645 8.35355L6.64645 10.3536C6.84171 10.5488 7.15829 10.5488 7.35355 10.3536L11.3536 6.35355Z"
+  />
+</svg>

package/src/components/internal/icons/Computer.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  // export let size: 'small' | 'medium' | 'large'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-16px" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path
+      d="M20.5,3.2h-17C2.5,3.2,1.8,4,1.8,5v10c0,1,0.8,1.8,1.8,1.8h5.2v3H7c-0.4,0-0.8,0.3-0.8,0.8c0,0.4,0.3,0.8,0.8,0.8h2.5h5H17c0.4,0,0.8-0.3,0.8-0.8c0-0.4-0.3-0.8-0.8-0.8h-1.8v-3h5.2c1,0,1.8-0.8,1.8-1.8V5C22.2,4,21.5,3.2,20.5,3.2z M13.8,19.8h-3.5v-3h3.5V19.8z M20.8,15c0,0.1-0.1,0.2-0.2,0.2h-6h-5h-6c-0.1,0-0.2-0.1-0.2-0.2V5c0-0.1,0.1-0.2,0.2-0.2h17c0.1,0,0.2,0.1,0.2,0.2V15z"
+    />
+    <path
+      d="M13,12.8h-2c-0.4,0-0.8,0.3-0.8,0.8c0,0.4,0.3,0.8,0.8,0.8h2c0.4,0,0.8-0.3,0.8-0.8C13.8,13.1,13.4,12.8,13,12.8z"
+    />
+  </g>
+</svg>

package/src/components/internal/icons/FontSize.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let size: string = '16px'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg style:width={size} style:height={size} {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M23.8382 23.1294C26.1022 23.1294 27.7617 21.7172 27.7617 19.797V18.7192L24.134 18.9422C22.0501 19.0661 20.9695 19.797 20.9695 21.0854C20.9695 22.3242 22.0886 23.1294 23.8382 23.1294ZM23.3622 25C20.545 25 18.6797 23.4391 18.6797 21.073C18.6797 18.7812 20.5064 17.4309 23.8767 17.2327L27.7617 17.0097V15.8947C27.7617 14.2347 26.6296 13.318 24.5843 13.318C22.9763 13.318 21.7799 14.1108 21.5098 15.3744H19.3615C19.4258 13.1198 21.7027 11.3978 24.61 11.3978C27.8903 11.3978 30 13.0826 30 15.7089V24.8761H27.8775V22.5596H27.826C27.0413 24.0461 25.3047 25 23.3622 25Z"
+  />
+  <path
+    d="M15.5458 24.8761L13.6805 19.7598H6.29658L4.4313 24.8761H2L8.84365 7H11.1334L17.9771 24.8761H15.5458ZM9.94996 9.71301L6.97837 17.8644H12.9987L10.0271 9.71301H9.94996Z"
+  />
+</svg>

package/src/components/internal/icons/Language.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M4.68191 1.69187C4.87991 1.49938 4.88436 1.18283 4.69187 0.984833C4.49938 0.786842 4.18283 0.782385 3.98483 0.974878C2.65823 2.26464 1.83337 4.06435 1.83337 6.05505C1.83337 9.59167 4.43291 12.5202 7.83337 13.0729V14.1667H7.00004C6.7239 14.1667 6.50004 14.3906 6.50004 14.6667C6.50004 14.9429 6.7239 15.1667 7.00004 15.1667H9.66671C9.94285 15.1667 10.1667 14.9429 10.1667 14.6667C10.1667 14.3906 9.94285 14.1667 9.66671 14.1667H8.83337V13.1648C8.88878 13.1661 8.94434 13.1667 9.00004 13.1667C10.9518 13.1667 12.7227 12.3918 14.0152 11.1352C14.2132 10.9427 14.2177 10.6262 14.0252 10.4282C13.8327 10.2302 13.5162 10.2257 13.3182 10.4182C12.2056 11.4999 10.6823 12.1667 9.00004 12.1667C5.59037 12.1667 2.83337 9.42653 2.83337 6.05505C2.83337 4.34666 3.54004 2.80204 4.68191 1.69187Z"
+    fill="#84868B"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M14.1667 6.00004C14.1667 3.14657 11.8535 0.833374 9.00004 0.833374C6.14657 0.833374 3.83337 3.14657 3.83337 6.00004C3.83337 8.85351 6.14657 11.1667 9.00004 11.1667C11.8535 11.1667 14.1667 8.85351 14.1667 6.00004ZM10.4809 2.1042C12.051 2.70134 13.1667 4.2204 13.1667 6.00004C13.1667 6.05806 13.1655 6.11581 13.1632 6.17325C12.6127 6.21617 12.2572 6.46117 12.0059 6.6343L11.9834 6.6498C11.7159 6.83381 11.622 6.88121 11.4314 6.84309C10.588 6.67441 9.91228 6.65022 9.42916 6.87348C9.16608 6.99505 8.96919 7.18556 8.84651 7.43242C8.7297 7.66746 8.69443 7.92441 8.69443 8.16744C8.69443 8.59239 8.69082 8.71663 8.66595 8.81643C8.6436 8.90609 8.60163 8.98698 8.4156 9.3069C8.29623 9.51219 8.17257 9.78133 8.16691 10.0834C6.26494 9.69742 4.83337 8.01591 4.83337 6.00004C4.83337 4.93814 5.23061 3.96903 5.8846 3.23318C5.99594 3.29692 6.12615 3.41985 6.35256 3.65906C7.16302 4.51543 8.09936 4.69029 8.81521 4.31208C9.07412 4.17529 9.24817 3.99547 9.35513 3.77965C9.44011 3.60819 9.4714 3.42827 9.48901 3.32701L9.49446 3.29611C9.51553 3.18052 9.52807 3.15412 9.53787 3.13932C9.54107 3.13436 9.56782 3.09285 9.69883 3.04094C10.1188 2.87452 10.3883 2.54386 10.4722 2.14918C10.4754 2.13421 10.4783 2.11921 10.4809 2.1042ZM12.5502 7.47369C12.7083 7.36492 12.8367 7.27751 12.984 7.22419C12.4784 8.87157 10.9791 10.0842 9.18534 10.1627C9.18342 10.1598 9.18179 10.1571 9.1804 10.1548C9.17035 10.1376 9.16748 10.1253 9.16683 10.1108C9.16493 10.0679 9.18335 9.97592 9.28007 9.80958L9.30549 9.76591C9.45445 9.51018 9.57539 9.30254 9.63627 9.05825C9.68712 8.8542 9.69367 8.63306 9.69439 8.35499C9.6945 8.31317 9.69448 8.27006 9.69445 8.22552L9.69443 8.16744C9.69443 8.01307 9.7182 7.92539 9.74202 7.87746C9.75998 7.84133 9.78532 7.8105 9.84864 7.78124C9.9615 7.72909 10.1734 7.69224 10.5449 7.72185C10.732 7.73676 10.9596 7.76852 11.2353 7.82366C11.86 7.94863 12.264 7.67061 12.5407 7.48024L12.5502 7.47369ZM9.4995 1.863C9.33574 1.84344 9.16907 1.83337 9.00004 1.83337C8.12977 1.83337 7.32181 2.10018 6.6535 2.55646C6.80213 2.67993 6.93823 2.82311 7.07885 2.97168C7.66786 3.59405 8.13098 3.54259 8.34807 3.4279C8.43679 3.38102 8.45311 3.34785 8.45873 3.33641L8.45914 3.33558C8.47687 3.29981 8.48428 3.26156 8.51067 3.11678C8.53273 2.99578 8.5711 2.78807 8.7039 2.58751C8.84434 2.37543 9.05399 2.22081 9.33046 2.11126C9.44573 2.06559 9.4812 2.00164 9.49401 1.94135C9.49878 1.9189 9.50098 1.89249 9.4995 1.863Z"
+    fill="#84868B"
+  />
+</svg>

package/src/components/internal/icons/Phone.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  // export let size: 'small' | 'medium' | 'large'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-16px" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path
+      d="M17,1.2H7c-1.2,0-2.2,1-2.2,2.2v17c0,1.2,1,2.2,2.2,2.2h10c1.2,0,2.2-1,2.2-2.2v-17C19.2,2.3,18.2,1.2,17,1.2z M17.8,20.5c0,0.4-0.3,0.8-0.8,0.8H7c-0.4,0-0.8-0.3-0.8-0.8v-17c0-0.4,0.3-0.8,0.8-0.8h10c0.4,0,0.8,0.3,0.8,0.8V20.5z"
+    />
+    <path
+      d="M11,5.8h2c0.4,0,0.8-0.3,0.8-0.8c0-0.4-0.3-0.8-0.8-0.8h-2c-0.4,0-0.8,0.3-0.8,0.8C10.2,5.4,10.6,5.8,11,5.8z"
+    />
+    <path
+      d="M14,18.2h-4c-0.4,0-0.8,0.3-0.8,0.8c0,0.4,0.3,0.8,0.8,0.8h4c0.4,0,0.8-0.3,0.8-0.8 C14.8,18.6,14.4,18.2,14,18.2z"
+    />
+  </g>
+</svg>

package/src/components/internal/icons/Search.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  export let size: string = '16px'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg style:width={size} style:height={size} viewBox="0 0 32 32" {fill} xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M20.0391 21.4533C18.1316 23.0434 15.6775 24 13 24C6.92487 24 2 19.0751 2 13C2 6.92487 6.92487 2 13 2C19.0751 2 24 6.92487 24 13C24 15.6775 23.0434 18.1316 21.4533 20.0391L28.7071 27.2929C29.0976 27.6834 29.0976 28.3166 28.7071 28.7071C28.3166 29.0976 27.6834 29.0976 27.2929 28.7071L20.0391 21.4533ZM22 13C22 17.9706 17.9706 22 13 22C8.02944 22 4 17.9706 4 13C4 8.02944 8.02944 4 13 4C17.9706 4 22 8.02944 22 13Z"
+  />
+</svg>

package/src/components/internal/icons/Settings.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let size: string = '16px'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg style:width={size} style:height={size} {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M12,16.9c2.7,0,4.9-2.2,4.9-4.9S14.7,7.1,12,7.1S7.1,9.3,7.1,12S9.3,16.9,12,16.9z M12,8.7c1.8,0,3.3,1.5,3.3,3.3 s-1.5,3.3-3.3,3.3S8.7,13.8,8.7,12S10.2,8.7,12,8.7z"
+  />
+  <path
+    d="M23,10.8L23,10.8c0-0.2,0-0.4-0.1-0.6c-0.2-0.4-0.5-0.7-0.8-0.9c-0.2-0.1-0.3-0.1-0.5-0.2c-0.2,0-0.3,0-0.6-0.1C20.5,9,20.2,9,20,8.9c-0.1,0-0.2,0-0.2,0c-0.1-0.1-0.1-0.1-0.1-0.2c0,0,0-0.1,0.1-0.2c0.1-0.2,0.3-0.4,0.6-0.7c0.1-0.2,0.2-0.3,0.3-0.4c0.1-0.1,0.1-0.2,0.2-0.3l0,0L21,6.8c0,0,0,0,0,0l0.1-0.2l0,0c0.1-0.3,0-0.7-0.1-1c-0.1-0.2-0.2-0.4-0.3-0.5c-0.1-0.1-0.2-0.2-0.4-0.4l-0.9-0.9c-0.1-0.1-0.3-0.3-0.4-0.4c-0.1-0.1-0.3-0.2-0.5-0.3C18,2.9,17.6,2.9,17.2,3C17,3,16.9,3.1,16.7,3.3c-0.1,0.1-0.3,0.2-0.4,0.3l-0.1,0c-0.3,0.3-0.5,0.4-0.7,0.6c-0.1,0.1-0.2,0.1-0.2,0.1c-0.1,0-0.2,0-0.2-0.1c0,0,0,0-0.1-0.2C15,3.8,15,3.5,15,3.1l0-0.1c0-0.2,0-0.4-0.1-0.5c0-0.2-0.1-0.4-0.2-0.5c-0.2-0.4-0.5-0.7-0.9-0.8C13.6,1,13.4,1,13.2,1c-0.2,0-0.4,0-0.6,0h-1.3c-0.2,0-0.4,0-0.6,0c-0.1,0-0.3,0-0.6,0.1C9.8,1.3,9.5,1.6,9.3,2C9.2,2.1,9.2,2.3,9.1,2.5c0,0.2,0,0.3-0.1,0.6C9,3.5,9,3.8,8.9,4c0,0.1,0,0.2,0,0.2c0,0,0,0,0,0C8.8,4.3,8.8,4.3,8.7,4.3c0,0-0.1,0-0.2-0.1C8.3,4.1,8.1,3.9,7.8,3.6C7.6,3.5,7.5,3.3,7.3,3.3C7.2,3.2,7,3.1,6.8,3C6.4,2.9,6,2.9,5.6,3.1C5.4,3.1,5.2,3.3,5.1,3.4C5,3.5,4.8,3.6,4.7,3.8L3.8,4.7C3.6,4.8,3.5,5,3.4,5.1C3.3,5.2,3.1,5.4,3.1,5.6C2.9,6,2.9,6.4,3,6.8C3.1,7,3.2,7.2,3.3,7.3c0.1,0.1,0.2,0.3,0.4,0.5c0.3,0.3,0.4,0.5,0.6,0.7c0.1,0.1,0.1,0.2,0.1,0.2c0,0.1,0,0.2-0.1,0.2c0,0,0,0-0.2,0.1C3.8,9,3.5,9,3.1,9.1c-0.2,0-0.4,0-0.6,0.1c-0.1,0-0.2,0-0.3,0.1l0,0L2,9.3c0,0,0,0,0,0L1.7,9.4l0,0c-0.3,0.2-0.5,0.5-0.6,0.8C1,10.4,1,10.6,1,10.8c0,0.2,0,0.4,0,0.6v1.3c0,0.2,0,0.4,0,0.6c0,0.1,0,0.3,0.1,0.6c0.2,0.4,0.5,0.7,0.8,0.9c0.2,0.1,0.3,0.1,0.5,0.2c0.1,0,0.3,0,0.5,0.1l0.1,0C3.5,15,3.8,15,4,15.1c0.1,0,0.2,0,0.2,0c0.1,0.1,0.1,0.1,0.1,0.2c0,0,0,0.1-0.1,0.2c-0.1,0.2-0.3,0.4-0.6,0.7l0,0.1c-0.1,0.2-0.2,0.3-0.3,0.4C3.1,16.9,3,17,3,17.2c-0.1,0.4-0.1,0.9,0.1,1.3c0.1,0.2,0.2,0.4,0.3,0.5c0.1,0.1,0.2,0.2,0.4,0.4l0.9,0.9c0.2,0.2,0.3,0.3,0.4,0.4c0.1,0.1,0.3,0.2,0.5,0.3C6,21.1,6.4,21.1,6.8,21c0.2-0.1,0.4-0.2,0.5-0.3c0.1-0.1,0.3-0.2,0.5-0.4c0.3-0.3,0.5-0.4,0.7-0.6c0.1-0.1,0.2-0.1,0.2-0.1c0.1,0,0.2,0,0.2,0.1c0,0,0,0,0.1,0.2c0,0.2,0.1,0.5,0.1,0.9c0,0.2,0,0.4,0.1,0.6c0,0.2,0.1,0.4,0.2,0.5c0.2,0.4,0.5,0.7,0.9,0.8c0.2,0.1,0.4,0.1,0.6,0.1c0.2,0,0.4,0,0.6,0h1.3c0.2,0,0.4,0,0.6,0c0.1,0,0.3,0,0.6-0.1c0.4-0.2,0.7-0.5,0.9-0.8c0.1-0.2,0.1-0.4,0.2-0.5c0-0.1,0-0.3,0.1-0.5l0-0.1c0-0.4,0.1-0.7,0.1-0.9c0-0.1,0-0.2,0-0.2c0.1-0.1,0.1-0.1,0.2-0.1c0,0,0.1,0,0.2,0.1c0.2,0.1,0.4,0.3,0.7,0.5l0.1,0.1c0.2,0.1,0.3,0.2,0.4,0.3c0.1,0.1,0.3,0.2,0.5,0.3c0.4,0.1,0.9,0.1,1.3-0.1c0.2-0.1,0.4-0.2,0.5-0.3c0.1-0.1,0.3-0.2,0.4-0.4l0.9-0.9c0.1-0.1,0.3-0.3,0.4-0.4c0.1-0.1,0.2-0.3,0.3-0.5c0.2-0.4,0.2-0.8,0.1-1.3c-0.1-0.2-0.1-0.3-0.3-0.5c-0.1-0.1-0.2-0.3-0.4-0.5c-0.3-0.3-0.4-0.5-0.6-0.7c-0.1-0.1-0.1-0.2-0.1-0.2c0-0.1,0-0.2,0.1-0.2c0,0,0,0,0.2-0.1c0.2,0,0.5-0.1,0.9-0.1c0.2,0,0.4,0,0.6-0.1c0.1,0,0.3-0.1,0.5-0.2c0.4-0.2,0.7-0.5,0.8-0.9c0.1-0.2,0.1-0.4,0.1-0.6c0-0.2,0-0.4,0-0.6v-1.3C23,11.1,23,10.9,23,10.8z M2.5,13.1c0-0.1,0-0.3,0-0.5v-1.3c0-0.2,0-0.4,0-0.5c0-0.1,0-0.1,0-0.1c0,0,0,0,0,0c0-0.1,0.1-0.1,0.1-0.1c0,0,0,0,0.1,0c0.1,0,0.2,0,0.5-0.1c0.4,0,0.8-0.1,1-0.1c0.3,0,0.6-0.1,0.8-0.3c0.5-0.4,0.8-1,0.7-1.7c0-0.3-0.2-0.6-0.4-0.8C5.3,7.4,5.1,7.1,4.8,6.8C4.7,6.6,4.6,6.5,4.5,6.4c0-0.1-0.1-0.1-0.1-0.1c0-0.1,0-0.1,0-0.2c0,0,0,0,0.1-0.1C4.6,6,4.7,5.9,4.9,5.8l0.9-0.9C5.9,4.7,6,4.6,6.1,4.5c0.1,0,0.1-0.1,0.1-0.1c0,0,0,0,0,0c0.1,0,0.1,0,0.2,0c0,0,0,0,0.1,0.1c0.1,0.1,0.2,0.2,0.4,0.3c0.3,0.3,0.6,0.5,0.8,0.6c0.2,0.1,0.5,0.3,0.8,0.4c0.6,0.1,1.3-0.2,1.7-0.7c0.2-0.3,0.3-0.6,0.3-0.8c0-0.3,0.1-0.6,0.1-1c0-0.2,0-0.4,0.1-0.5c0-0.1,0-0.1,0-0.1c0,0,0,0,0,0c0-0.1,0.1-0.1,0.1-0.1c0,0,0,0,0.1,0c0.1,0,0.2,0,0.5,0h1.3c0.2,0,0.4,0,0.5,0c0.1,0,0.1,0,0.1,0c0.1,0,0.1,0.1,0.1,0.1c0,0,0,0,0,0.1c0,0.1,0,0.2,0.1,0.5c0,0.4,0.1,0.8,0.1,1c0,0.3,0.1,0.6,0.3,0.8c0.4,0.5,1,0.8,1.7,0.7c0.3,0,0.6-0.2,0.8-0.4c0.2-0.2,0.5-0.4,0.8-0.6c0.2-0.1,0.3-0.2,0.4-0.3c0.1,0,0.1-0.1,0.1-0.1c0.1,0,0.1,0,0.2,0c0,0,0,0,0.1,0.1c0.1,0.1,0.2,0.2,0.3,0.3l0.9,0.9c0.2,0.2,0.3,0.3,0.3,0.3c0,0.1,0.1,0.1,0.1,0.1c0,0.1,0,0.1,0,0.2c0,0,0,0-0.1,0.1c-0.1,0.1-0.2,0.2-0.3,0.4c-0.3,0.3-0.5,0.6-0.6,0.8c-0.1,0.2-0.3,0.5-0.4,0.8c-0.1,0.6,0.2,1.3,0.7,1.7c0.3,0.2,0.6,0.3,0.8,0.3c0.3,0,0.6,0.1,1,0.1c0.2,0,0.4,0,0.5,0.1c0.1,0,0.1,0,0.1,0c0,0,0,0,0,0c0.1,0,0.1,0.1,0.1,0.1c0,0,0,0,0,0.1c0,0.1,0,0.3,0,0.5v1.3c0,0.2,0,0.4,0,0.5c0,0.1,0,0.1,0,0.1c0,0.1-0.1,0.1-0.1,0.1c0,0,0,0-0.1,0c-0.1,0-0.2,0-0.5,0.1c-0.4,0-0.7,0.1-1,0.1c-0.3,0-0.6,0.1-0.8,0.3c-0.5,0.4-0.8,1-0.7,1.7c0,0.3,0.2,0.6,0.4,0.8c0.2,0.2,0.4,0.5,0.6,0.8c0.1,0.2,0.2,0.3,0.3,0.4c0,0.1,0.1,0.1,0.1,0.1c0,0.1,0,0.1,0,0.2c0,0,0,0-0.1,0.1c-0.1,0.1-0.2,0.2-0.3,0.3l-0.9,0.9c-0.2,0.2-0.3,0.3-0.3,0.3c0,0-0.1,0.1-0.1,0.1c-0.1,0-0.1,0-0.2,0c0,0,0,0-0.1-0.1c-0.1-0.1-0.2-0.2-0.4-0.3c-0.3-0.3-0.6-0.5-0.8-0.6c-0.2-0.1-0.5-0.3-0.8-0.4c-0.6-0.1-1.3,0.2-1.7,0.7c-0.2,0.3-0.3,0.6-0.3,0.8c0,0.3-0.1,0.6-0.1,1c0,0.2,0,0.4-0.1,0.5c0,0.1,0,0.1,0,0.1c0,0.1-0.1,0.1-0.1,0.1c0,0,0,0-0.1,0c-0.1,0-0.2,0-0.5,0h-1.3c-0.2,0-0.4,0-0.5,0c-0.1,0-0.1,0-0.1,0c-0.1,0-0.1-0.1-0.1-0.1c0,0,0,0,0-0.1c0-0.1,0-0.2-0.1-0.5c0-0.4-0.1-0.8-0.1-1c0-0.3-0.1-0.6-0.3-0.8c-0.4-0.5-1-0.8-1.7-0.7c-0.3,0-0.6,0.2-0.8,0.4c-0.2,0.1-0.5,0.4-0.8,0.6c-0.2,0.1-0.3,0.2-0.4,0.3c-0.1,0-0.1,0.1-0.1,0.1c-0.1,0-0.1,0-0.2,0c0,0,0,0-0.1-0.1c-0.1-0.1-0.2-0.2-0.3-0.3l-0.9-0.9c-0.2-0.2-0.3-0.3-0.3-0.3c0-0.1-0.1-0.1-0.1-0.1c0-0.1,0-0.1,0-0.2c0,0,0,0,0.1-0.1c0.1-0.1,0.2-0.2,0.3-0.4c0.3-0.3,0.5-0.6,0.6-0.8c0.1-0.2,0.3-0.5,0.4-0.8c0.1-0.6-0.2-1.3-0.7-1.7c-0.3-0.2-0.6-0.3-0.8-0.3c-0.3,0-0.6-0.1-1-0.1c-0.2,0-0.4,0-0.5-0.1c-0.1,0-0.1,0-0.1,0C2.6,13.3,2.6,13.3,2.5,13.1C2.6,13.2,2.5,13.2,2.5,13.1z M14.7,3.1C14.7,3.1,14.7,3.1,14.7,3.1L14.7,3.1L14.7,3.1z M3.1,14.7C3.1,14.7,3.1,14.7,3.1,14.7L3.1,14.7L3.1,14.7z M3.8,16.4C3.8,16.4,3.8,16.4,3.8,16.4L3.8,16.4L3.8,16.4zM14.7,20.9L14.7,20.9L14.7,20.9L14.7,20.9z"
+  />
+</svg>

package/src/components/internal/icons/Theme.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-16px" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M16,2C8.3,2,2,8.3,2,16s6.3,14,14,14s14-6.3,14-14S23.7,2,16,2z M12.4,27.5c-1.5-0.5-2.9-1.2-4.1-2.2c-0.6-0.5-1.1-1-1.6-1.6c-1-1.2-1.7-2.6-2.2-4.1C4.2,18.4,4,17.2,4,16C4,9.4,9.4,4,16,4v24C14.8,28,13.6,27.8,12.4,27.5z"
+  />
+</svg>

package/src/components/internal/icons/WiFi.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  // export let size: 'small' | 'medium' | 'large'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-16px" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g stroke={fill}>
+    <path
+      stroke-width={fill !== 'currentColor' ? 2 : 1}
+      d="M12,10.9c-2.7,0-5.1,1.1-6.8,3.1C5,14.3,5,14.7,5.4,14.9s0.7,0.2,0.9-0.1c1.4-1.6,3.5-2.5,5.8-2.5s4.4,0.9,5.8,2.6 c0.1,0.1,0.3,0.2,0.6,0.2c0.1,0,0.3,0,0.5-0.1c0.3-0.2,0.3-0.7,0.1-0.9C17.2,11.9,14.7,10.9,12,10.9z"
+    />
+    <path
+      stroke-width={fill !== 'currentColor' ? 2 : 1}
+      d="M12,17.9c-1.1,0-2.3,0.5-2.9,1.1c-0.2,0.2-0.2,0.7,0,0.9c0.2,0.2,0.7,0.2,0.9,0c0.9-1,3.1-1,4.1,0c0.1,0.1,0.3,0.2,0.5,0.2 c0.2,0,0.3-0.1,0.5-0.2c0.2-0.2,0.2-0.7,0-0.9C14.3,18.4,13.1,17.9,12,17.9z"
+    />
+    <path
+      stroke-width={fill !== 'currentColor' ? 2 : 1}
+      d="M23.9,9.7C20.8,6,16.5,3.8,12,3.8S3.2,6,0.2,9.7c-0.2,0.3-0.2,0.7,0.1,0.9c0.3,0.2,0.7,0.2,0.9-0.1 c2.7-3.4,6.7-5.3,10.7-5.3s8,1.9,10.7,5.4c0.1,0.1,0.3,0.2,0.6,0.2c0.1,0,0.3,0,0.5-0.1C24,10.5,24.1,10,23.9,9.7z"
+    />
+  </g>
+</svg>

package/src/components/notifications/Notification.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte'
+
+  import { Notification } from './Notification'
+  import Component from '../Component.svelte'
+  import store from './store'
+
+  export let notification: Notification
+
+  const { id, closeTimeout } = notification
+
+  const removeNotificationHandler = () => {
+    store.removeNotification(id)
+  }
+
+  let timeout: any | null = null
+
+  if (closeTimeout) {
+    timeout = setTimeout(removeNotificationHandler, closeTimeout)
+  }
+
+  onDestroy(() => {
+    removeNotificationHandler()
+    if (closeTimeout && timeout) {
+      clearTimeout(timeout)
+    }
+  })
+</script>
+
+{#if typeof notification.component === 'string'}
+  <Component is={notification.component} props={{ notification, onRemove: removeNotificationHandler }} />
+{:else}
+  <svelte:component this={notification.component} {notification} onRemove={removeNotificationHandler} />
+{/if}

package/src/components/notifications/Notification.ts

@@ -0,0 +1,16 @@
+import { type NotificationPosition } from './NotificationPosition'
+import { type NotificationSeverity } from './NotificationSeverity'
+import { type AnyComponent, type AnySvelteComponent } from '../../types'
+
+export interface Notification {
+  id: string
+  title: string
+  group?: string
+  component: AnyComponent | AnySvelteComponent
+  subTitle?: string
+  subTitlePostfix?: string
+  position: NotificationPosition
+  severity?: NotificationSeverity
+  params?: Record<string, any>
+  closeTimeout?: number
+}

package/src/components/notifications/NotificationPosition.ts

@@ -0,0 +1,6 @@
+export enum NotificationPosition {
+  BottomLeft,
+  BottomRight,
+  TopLeft,
+  TopRight
+}

package/src/components/notifications/NotificationSeverity.ts

@@ -0,0 +1,6 @@
+export enum NotificationSeverity {
+  Info,
+  Success,
+  Warning,
+  Error
+}

package/src/components/notifications/Notifications.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import Notification from './Notification.svelte'
+  import { NotificationPosition } from './NotificationPosition'
+  import store from './store'
+
+  const positionByClassName = {
+    'bottom-left': NotificationPosition.BottomLeft,
+    'bottom-right': NotificationPosition.BottomRight,
+    'top-left': NotificationPosition.TopLeft,
+    'top-right': NotificationPosition.TopRight
+  }
+
+  const maxVisibleNotifications = 3
+</script>
+
+<slot />
+<div class="notifications">
+  {#each Object.entries(positionByClassName) as [className, position]}
+    <div class={className} style:z-index={9999}>
+      {#each $store.slice(0, maxVisibleNotifications) as notification (notification.id)}
+        {#if notification.position === position}
+          <Notification {notification} />
+        {/if}
+      {/each}
+    </div>
+  {/each}
+</div>
+
+<style lang="scss">
+  .top-left {
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+
+  .top-right {
+    position: fixed;
+    top: 0;
+    right: 0;
+  }
+
+  .bottom-left {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+  }
+
+  .bottom-right {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+  }
+</style>

package/src/components/notifications/actions.ts

@@ -0,0 +1,42 @@
+import { type Writable } from 'svelte/store'
+import { generateId } from '@hanzo/core'
+
+import { type Notification } from './Notification'
+import { NotificationPosition } from './NotificationPosition'
+import { NotificationSeverity } from './NotificationSeverity'
+
+export const addNotification = (notification: Notification, store: Writable<Notification[]>): void => {
+  if (notification === undefined || notification === null) {
+    return
+  }
+
+  const { update } = store
+
+  const newNotification = {
+    severity: NotificationSeverity.Info,
+    ...notification,
+    id: generateId()
+  }
+
+  update((notifications: Notification[]) => {
+    if (
+      notification.group != null &&
+      notification.group !== '' &&
+      notifications.some(({ group }) => group === notification.group)
+    ) {
+      return notifications.map((n) => (n.group === notification.group ? newNotification : n))
+    }
+
+    return [NotificationPosition.TopRight, NotificationPosition.TopLeft].includes(newNotification.position)
+      ? [newNotification, ...notifications]
+      : [...notifications, newNotification]
+  })
+}
+
+export const removeNotification = (notificationId: string, { update }: Writable<Notification[]>): void => {
+  if (notificationId === '') {
+    return
+  }
+
+  update((notifications) => notifications.filter(({ id }) => id !== notificationId))
+}

package/src/components/notifications/store.ts

@@ -0,0 +1,16 @@
+import { writable } from 'svelte/store'
+
+import { type Notification } from './Notification'
+import { addNotification, removeNotification } from './actions'
+
+const store = writable<Notification[]>([])
+
+export default {
+  subscribe: store.subscribe,
+  addNotification: (notification: Notification) => {
+    addNotification(notification, store)
+  },
+  removeNotification: (notificationId: string) => {
+    removeNotification(notificationId, store)
+  }
+}

package/src/components/wizard/ModernWizardBar.svelte

@@ -0,0 +1,105 @@
+<!--
+// Copyright © 2023 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import Label from '../Label.svelte'
+  import { IWizardStep } from '../../types'
+  import Checkmark from '../icons/Checkmark.svelte'
+
+  export let steps: ReadonlyArray<IWizardStep>
+  export let selectedStep: string
+
+  $: selectedIdx = selectedStep !== '' ? steps.findIndex((s) => s.id === selectedStep) : -1
+</script>
+
+<div class="root">
+  {#each steps as step, idx}
+    {@const isCurrent = idx === selectedIdx}
+    {@const isPast = idx < selectedIdx}
+    {#if idx !== 0}
+      <div class="flex-col-center" style:grid-column="1" style:grid-row={3 * idx}>
+        <div class="path" class:highlighted={isPast || isCurrent} />
+      </div>
+    {/if}
+    <div
+      class="circle"
+      class:filled={!isPast && !isCurrent}
+      class:filledHighlighted={isPast}
+      style:grid-column="1"
+      style:grid-row={3 * idx + 1}
+    >
+      {#if isPast}
+        <div class="checkmark flex-center"><Checkmark size="tiny" /></div>
+      {/if}
+    </div>
+    <div class="label" class:highlighted={isCurrent || isPast} style:grid-column="2" style:grid-row={3 * idx + 1}>
+      <div class="overflow-label">{idx + 1}. <Label label={step.title} /></div>
+    </div>
+    {#if idx !== steps.length - 1}
+      <div class="flex-col-center" style:grid-column="1" style:grid-row={3 * idx + 2}>
+        <div class="path" class:highlighted={isPast || isCurrent} />
+      </div>
+    {/if}
+  {/each}
+</div>
+
+<style lang="scss">
+  .root {
+    display: grid;
+    grid-template-columns: 1rem 1fr;
+    grid-auto-rows: auto;
+    grid-column-gap: 0.5rem;
+    width: 100%;
+  }
+
+  .circle {
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
+    border: 2px solid var(--positive-button-default);
+
+    &.filledHighlighted {
+      background: var(--positive-button-default);
+    }
+
+    &.filled {
+      border-color: var(--theme-wizard-not-visited-color);
+      background: var(--theme-wizard-not-visited-color);
+    }
+  }
+
+  .path {
+    width: 2px;
+    height: 0.875rem;
+    border: 1px solid var(--theme-wizard-not-visited-color);
+
+    &.highlighted {
+      border-color: var(--positive-button-default);
+    }
+  }
+
+  .label {
+    font-size: 0.8125rem;
+    line-height: 1rem;
+    min-width: 0;
+
+    &.highlighted {
+      font-weight: 500;
+    }
+  }
+
+  .checkmark {
+    color: var(--theme-button-contrast-color);
+  }
+</style>