@hanzo/ui 0.5.24 → 0.6.16

package/src/components/icons/Search.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M10.7241 10.0168L14.3535 13.6465C14.5488 13.8417 14.5488 14.1583 14.3535 14.3536C14.1602 14.5469 13.8478 14.5488 13.6522 14.3592L10.017 10.7238C8.9277 11.6312 7.5305 12.0836 6.11608 11.9871C4.70165 11.8905 3.37891 11.2524 2.423 10.2054C1.4671 9.15843 0.951637 7.78323 0.983845 6.36588C1.01605 4.94853 1.59345 3.59816 2.59593 2.59568C3.5984 1.59321 4.94877 1.01581 6.36612 0.983601C7.78347 0.951393 9.15867 1.46686 10.2057 2.42276C11.2526 3.37866 11.8908 4.70141 11.9873 6.11583C12.0839 7.53026 11.6314 8.92745 10.7241 10.0168ZM2.75851 3.99981C2.26404 4.73983 2.00012 5.60986 2.00012 6.49987C2.00144 7.69294 2.47597 8.83677 3.3196 9.68039C4.16323 10.524 5.30705 10.9986 6.50012 10.9999C7.39013 10.9999 8.26016 10.736 9.00018 10.2415C9.7402 9.74702 10.317 9.04422 10.6576 8.22195C10.9982 7.39968 11.0873 6.49488 10.9137 5.62197C10.74 4.74905 10.3114 3.94723 9.6821 3.31789C9.05276 2.68856 8.25094 2.25997 7.37802 2.08634C6.50511 1.91271 5.60031 2.00182 4.77804 2.34242C3.95578 2.68301 3.25297 3.25979 2.75851 3.99981Z"
+  />
+</svg>

package/src/components/icons/Send.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M27.71 4.29049C27.575 4.15616 27.4045 4.06316 27.2185 4.02241C27.0325 3.98167 26.8388 3.99488 26.66 4.06049L4.66 12.0605C4.47027 12.1325 4.30692 12.2604 4.19165 12.4274C4.07638 12.5944 4.01465 12.7926 4.01465 12.9955C4.01465 13.1984 4.07638 13.3965 4.19165 13.5635C4.30692 13.7305 4.47027 13.8585 4.66 13.9305L14.26 17.7705L18.1 27.3705C18.1721 27.5519 18.2958 27.7082 18.4557 27.8201C18.6157 27.9321 18.8049 27.9948 19 28.0005C19.2021 27.9963 19.3982 27.9311 19.5624 27.8132C19.7266 27.6954 19.8513 27.5306 19.92 27.3405L27.92 5.34049C27.9881 5.16356 28.0046 4.97092 27.9674 4.78501C27.9302 4.5991 27.8409 4.4276 27.71 4.29049ZM19 24.2005L16.21 17.2005L20.295 13.1155C20.6844 12.7261 20.6844 12.0948 20.295 11.7055C19.9056 11.3161 19.2744 11.3161 18.885 11.7055L14.76 15.8305L7.8 13.0005L25.33 6.67049L19 24.2005Z"
+  />
+</svg>

package/src/components/icons/Settings.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M8.99976 1.99976C8.44747 1.99976 7.99976 2.44747 7.99976 2.99976V6.09976C5.69976 6.59976 3.99976 8.59976 3.99976 10.9998C3.99976 13.3998 5.69976 15.3998 7.99976 15.8998L7.99976 28.9998C7.99976 29.552 8.44747 29.9998 8.99976 29.9998C9.55204 29.9998 9.99976 29.552 9.99976 28.9998L9.99976 15.8998C12.2998 15.3998 13.9998 13.3998 13.9998 10.9998C13.9998 8.59976 12.2998 6.59976 9.99976 6.09976V2.99976C9.99976 2.44747 9.55204 1.99976 8.99976 1.99976ZM11.9998 10.9998C11.9998 12.6998 10.6998 13.9998 8.99976 13.9998C7.29976 13.9998 5.99976 12.6998 5.99976 10.9998C5.99976 9.29976 7.29976 7.99976 8.99976 7.99976C10.6998 7.99976 11.9998 9.29976 11.9998 10.9998Z"
+  />
+  <path
+    d="M22.9998 29.9998C23.552 29.9998 23.9998 29.552 23.9998 28.9998V25.8998C26.2998 25.3998 27.9998 23.3998 27.9998 20.9998C27.9998 18.5998 26.2998 16.5998 23.9998 16.0998V2.99976C23.9998 2.44747 23.552 1.99976 22.9998 1.99976C22.4475 1.99976 21.9998 2.44747 21.9998 2.99976V16.0998C19.6998 16.5998 17.9998 18.5998 17.9998 20.9998C17.9998 23.3998 19.6998 25.3998 21.9998 25.8998V28.9998C21.9998 29.552 22.4475 29.9998 22.9998 29.9998ZM19.9998 20.9998C19.9998 19.2998 21.2998 17.9998 22.9998 17.9998C24.6998 17.9998 25.9998 19.2998 25.9998 20.9998C25.9998 22.6998 24.6998 23.9998 22.9998 23.9998C21.2998 23.9998 19.9998 22.6998 19.9998 20.9998Z"
+  />
+</svg>

package/src/components/icons/Share.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M13.3,7.5c-0.3,0-0.5,0.2-0.5,0.5v5c0,0.4-0.4,0.7-0.8,0.7H4c-0.5,0-0.8-0.3-0.8-0.7V8c0-0.3-0.2-0.5-0.5-0.5S2.2,7.7,2.2,8 v5c0,1,0.8,1.7,1.8,1.7h8c1,0,1.8-0.8,1.8-1.7V8C13.8,7.7,13.6,7.5,13.3,7.5z"
+  />
+  <path
+    d="M6.2,5.1l1.5-1.5v6.3c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V3.6l1.5,1.5c0.1,0.1,0.2,0.1,0.4,0.1c0.1,0,0.3,0,0.4-0.1 c0.2-0.2,0.2-0.5,0-0.7L8.5,2c0,0-0.1-0.1-0.2-0.1c-0.1,0-0.1,0-0.2,0c0,0,0,0,0,0c0,0,0,0,0,0c-0.1,0-0.1,0-0.2,0C8,2,7.9,2,7.9,2 c0,0,0,0-0.1,0L5.5,4.3c-0.2,0.2-0.2,0.5,0,0.7C5.7,5.2,6,5.2,6.2,5.1z"
+  />
+</svg>

package/src/components/icons/SquareExpand.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large' | 'full'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <path
+    d="M18 6.00012V4.00012H28V14.0001H26V7.41012L15.7136 17.7008L15.7071 17.7073C15.3166 18.0978 14.6834 18.0978 14.2929 17.7073C13.9024 17.3167 13.9024 16.6836 14.2929 16.293L24.59 6.00012H18Z"
+  />
+  <path
+    d="M7.8415 6.10109C8.88208 5.96118 9.94455 5.97558 11.0001 5.99059C11.5524 5.99845 12.0001 5.55245 12.0001 5.00017C12.0001 4.44788 11.5524 3.99873 11.0001 3.99235C9.85582 3.97912 8.7048 3.96702 7.57501 4.11892C6.64718 4.24366 5.82775 4.51563 5.17164 5.17174C4.51553 5.82785 4.24357 6.64727 4.11882 7.5751C4 8.45885 4.00003 11.5755 4.00007 12.9296V21.0707C4.00003 22.4248 4 23.5415 4.11882 24.4252C4.24357 25.3531 4.51553 26.1725 5.17164 26.8286C5.82775 27.4847 6.64718 27.7567 7.57501 27.8814C8.45875 28.0002 9.57537 28.0002 10.9295 28.0002H21.0706C22.4247 28.0002 23.5414 28.0002 24.4251 27.8814C25.353 27.7567 26.1724 27.4847 26.8285 26.8286C27.4846 26.1725 27.7566 25.3531 27.8813 24.4252C28.0332 23.2954 28.0211 22.1444 28.0079 21.0001C28.0015 20.4479 27.5524 20.0002 27.0001 20.0002C26.4478 20.0002 26.0018 20.4479 26.0096 21.0001C26.0247 22.0557 26.0391 23.1182 25.8992 24.1587C25.8042 24.8648 25.6369 25.1918 25.4143 25.4144C25.1917 25.637 24.8647 25.8043 24.1586 25.8993C23.4238 25.998 22.4426 26.0002 21.0001 26.0002H11.0001C9.55759 26.0002 8.57632 25.998 7.8415 25.8993C7.13545 25.8043 6.80843 25.637 6.58586 25.4144C6.36329 25.1918 6.19591 24.8648 6.10099 24.1587C6.00219 23.4239 6.00007 22.4426 6.00007 21.0002V13.0002C6.00007 11.5577 6.00219 8.57642 6.10099 7.8416C6.19591 7.13555 6.36329 6.80853 6.58586 6.58595C6.80843 6.36338 7.13545 6.19601 7.8415 6.10109Z"
+  />
+</svg>

package/src/components/icons/Start.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="-5 -3 24 24">
+  <path
+    d="M2.067,0.043C2.21-0.028,2.372-0.008,2.493,0.085l13.312,8.503c0.094,0.078,0.154,0.191,0.154,0.313c0,0.12-0.061,0.237-0.154,0.314L2.492,17.717c-0.07,0.057-0.162,0.087-0.25,0.087l-0.176-0.04c-0.136-0.065-0.222-0.207-0.222-0.361V0.402C1.844,0.25,1.93,0.107,2.067,0.043z"
+  />
+</svg>

package/src/components/icons/Stop.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 16 16">
+  <rect width="8" height="8" />
+</svg>

package/src/components/icons/TableOfContents.svelte

@@ -0,0 +1,35 @@
+<!--
+// Copyright © 2024 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">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M26 11.0005C26 10.4482 25.5523 10.0005 25 10.0005H20C19.4477 10.0005 19 10.4482 19 11.0005C19 11.5528 19.4477 12.0005 20 12.0005H25C25.5523 12.0005 26 11.5528 26 11.0005Z"
+  />
+  <path
+    d="M26 16.0005C26 15.4482 25.5523 15.0005 25 15.0005H20C19.4477 15.0005 19 15.4482 19 16.0005C19 16.5528 19.4477 17.0005 20 17.0005H25C25.5523 17.0005 26 16.5528 26 16.0005Z"
+  />
+  <path
+    d="M19 21.0005C19 20.4482 19.4477 20.0005 20 20.0005H25C25.5523 20.0005 26 20.4482 26 21.0005C26 21.5528 25.5523 22.0005 25 22.0005H20C19.4477 22.0005 19 21.5528 19 21.0005Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M6 4.00012C3.79086 4.00012 2 5.79098 2 8.00012V24.0001C2 26.2093 3.79086 28.0001 6 28.0001H26C28.2091 28.0001 30 26.2093 30 24.0001V8.00012C30 5.79098 28.2091 4.00012 26 4.00012H6ZM15 6.00012H6C4.89543 6.00012 4 6.89555 4 8.00012V24.0001C4 25.1047 4.89543 26.0001 6 26.0001H15V6.00012ZM17 6.00012V26.0001H26C27.1046 26.0001 28 25.1047 28 24.0001V8.00012C28 6.89555 27.1046 6.00012 26 6.00012H17Z"
+  />
+</svg>

package/src/components/icons/Thread.svelte

@@ -0,0 +1,29 @@
+<!--
+// Copyright © 2020, 2021 Hanzo <dev@hanzo.ai>.
+// Copyright © 2021 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 { ButtonSize } from '../../types'
+
+  export let size: ButtonSize
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 14 12" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M7 1C3.60474 1 1 3.31362 1 6C1 7.08097 1.4127 8.08912 2.12929 8.91766C2.24292 9.04906 2.28022 9.23002 2.22779 9.39564C2.05513 9.9411 1.7993 10.4525 1.48219 10.9281C2.18374 10.8248 2.86228 10.6118 3.49342 10.2991C3.63342 10.2297 3.79779 10.2298 3.93773 10.2993C4.83161 10.7431 5.87792 11 7 11C10.3953 11 13 8.68638 13 6C13 3.31362 10.3953 1 7 1ZM7.77784e-07 6C7.77784e-07 2.61125 3.21556 0 7 0C10.7844 0 14 2.61125 14 6C14 9.38875 10.7844 12 7 12C5.81593 12 4.69721 11.7481 3.71539 11.3008C2.71555 11.7572 1.62029 12 0.500001 12C0.315603 12 0.146173 11.8985 0.0591635 11.7359C-0.027846 11.5733 -0.0183098 11.3761 0.0839756 11.2226L0.687434 10.3175C0.890167 10.0134 1.05767 9.68744 1.18687 9.346C0.442008 8.39623 7.77784e-07 7.24553 7.77784e-07 6Z"
+  />
+</svg>

package/src/components/icons/ToDetails.svelte

@@ -0,0 +1,28 @@
+<!--
+// Copyright © 2020, 2021 Hanzo <dev@hanzo.ai>.
+// Copyright © 2021 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">
+  export let size: 'x-small' | 'small' | 'medium' | 'large'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M10.6,17.3H3.3c-.3,0-.7-.1-.9-.4-.2-.2-.4-.6-.4-.9s.1-.7.4-.9c.2-.2.6-.4.9-.4h7.3l-1.4-1.4c-.2-.2-.4-.6-.4-.9,0-.3.1-.7.4-.9.2-.2.6-.4.9-.4.3,0,.7.1.9.4l3.7,3.7c.1.1.2.3.3.4,0,.2,0,.3,0,.5s0,.3,0,.5c0,.2-.2.3-.3.4l-3.7,3.7c-.2.2-.6.4-.9.4-.3,0-.7-.1-.9-.4-.2-.2-.4-.6-.4-.9,0-.3.1-.7.3-.9l1.4-1.5Z"
+  />
+  <path
+    d="M26,4H6c-2.2,0-4,1.8-4,4v4c0,.6.4,1,1,1s1-.4,1-1v-4c0-1.1.9-2,2-2h14v20H6c-1.1,0-2-.9-2-2v-4c0-.6-.4-1-1-1s-1,.4-1,1v4c0,2.2,1.8,4,4,4h20c2.2,0,4-1.8,4-4V8c0-2.2-1.8-4-4-4Z"
+  />
+</svg>

package/src/components/icons/Undo.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M20 10H7.8149L11.4023 6.4141L10 5L4 11L10 17L11.4023 15.5854L7.8179 12H20C21.5913 12 23.1174 12.6321 24.2426 13.7574C25.3679 14.8826 26 16.4087 26 18C26 19.5913 25.3679 21.1174 24.2426 22.2426C23.1174 23.3679 21.5913 24 20 24H13C12.4477 24 12 24.4477 12 25C12 25.5523 12.4477 26 13 26H20C22.1217 26 24.1566 25.1571 25.6569 23.6569C27.1571 22.1566 28 20.1217 28 18C28 15.8783 27.1571 13.8434 25.6569 12.3431C24.1566 10.8429 22.1217 10 20 10Z"
+  />
+</svg>

package/src/components/icons/Up.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M7.8,7.2L4,11h7.7L7.8,7.2z" />
+</svg>

package/src/components/icons/UpOutline.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4.2,11.1L3,9.9l5-5l5,5l-1.2,1.2L8,7.3L4.2,11.1z" />
+</svg>

package/src/components/internal/Clock.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte'
+  import { showPopup, getTimeZoneName } from '../..'
+  import ClockPopup from './ClockPopup.svelte'
+
+  let hours = ''
+  let minutes = ''
+  let delimiter: boolean = false
+  let pressed: boolean = false
+
+  function updateTime () {
+    const date = new Date()
+    const h = date.getHours()
+    hours = h < 10 ? `0${h}` : h.toString()
+    const m = date.getMinutes()
+    minutes = m < 10 ? `0${m}` : m.toString()
+    delimiter = !delimiter
+  }
+
+  const interval = setInterval(updateTime, 500)
+  updateTime()
+
+  onDestroy(() => {
+    clearInterval(interval)
+  })
+</script>
+
+<button
+  class="antiButton ghost jf-center bs-none no-focus statusButton"
+  class:pressed
+  on:click={(ev) => {
+    pressed = true
+    showPopup(ClockPopup, {}, 'status', () => {
+      pressed = false
+    })
+  }}
+>
+  {#if getTimeZoneName() !== ''}<span>{getTimeZoneName()}</span>&nbsp;&nbsp;{/if}
+  <span>{hours}</span>
+  <span style:visibility={delimiter ? 'visible' : 'hidden'}>:</span>
+  <span>{minutes}</span>
+</button>

package/src/components/internal/ClockFace.svelte

@@ -0,0 +1,148 @@
+<!--
+// 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 { onDestroy } from 'svelte'
+
+  export let timeZone: string
+  export let size: string = '80px'
+
+  const clock: Array<{ value: number, class: string }> = [
+    { value: 0, class: 'hour-arrow' },
+    { value: 0, class: 'minute-arrow' },
+    { value: 0, class: 'second-arrow' }
+  ]
+  let reqId: any
+
+  const updateTime = (): void => {
+    const now = new Date()
+    const offNow = timeZone === '' ? now : new Date(now.toLocaleString('en-US', { timeZone }))
+    const diffTZ = now.getTime() - offNow.getTime()
+    const realTime = new Date(now.getTime() - diffTZ)
+    const startDay = new Date(realTime.getFullYear(), realTime.getMonth(), realTime.getDate(), 0, 0, 0).getTime()
+    const diff = realTime.getTime() - startDay
+    let h = diff / 3600000
+    if (h > 12) h -= 12
+    const m = (diff / 1000 / 60) % 60
+    const s = (diff / 1000) % 60
+    clock[0].value = h * 30
+    clock[1].value = m * 6
+    clock[2].value = s * 6
+    setTimeout(() => (reqId = requestAnimationFrame(updateTime)), 1000 / 25)
+  }
+
+  reqId = requestAnimationFrame(updateTime)
+  onDestroy(() => {
+    clearInterval(reqId)
+  })
+</script>
+
+<div style:--clockface-size={size} class="clockFace-container">
+  {#each [...Array(12).keys()] as hour}
+    <div class="hour" data-hour={hour === 0 ? '12' : `${hour}`} />
+  {/each}
+  {#each clock as arrow}
+    <div class={arrow.class} style:transform={`rotate(${arrow.value}deg)`} />
+  {/each}
+</div>
+
+<style lang="scss">
+  .hour {
+    position: absolute;
+    top: 1px;
+    left: 50%;
+    width: 1px;
+    height: calc(var(--clockface-size, 64px) / 32);
+    background: var(--theme-clockface-hours);
+    transform-origin: 50% calc(calc(var(--clockface-size, 64px) / 2) - 1px); // 29px;
+    transform: rotate(0deg);
+
+    @for $i from 2 through 12 {
+      &:nth-child(#{$i}) {
+        transform: rotate(#{$i * 30 - 30}deg);
+      }
+    }
+    &:nth-child(3n + 1) {
+      height: calc(var(--clockface-size, 64px) / 16);
+      background: var(--theme-clockface-quarter);
+    }
+  }
+
+  .clockFace-container {
+    --clockface-radius: calc(var(--clockface-size, 64px) / 2);
+    --clockface-arrow-end: calc(var(--clockface-size, 64px) / 16);
+    --clockface-sec-arrow: calc(calc(var(--clockface-radius) - 2px) + var(--clockface-arrow-end));
+    --clockface-min-arrow: calc(calc(var(--clockface-radius) * 0.75) + var(--clockface-arrow-end));
+    --clockface-hour-arrow: calc(calc(var(--clockface-radius) * 0.5) + var(--clockface-arrow-end));
+    position: relative;
+    flex-shrink: 0;
+    width: var(--clockface-size, 64px);
+    height: var(--clockface-size, 64px);
+    background: var(--theme-clockface-back);
+    border-radius: 50%;
+    box-shadow: var(--theme-clockface-shadow);
+
+    .second-arrow,
+    .minute-arrow,
+    .hour-arrow {
+      position: absolute;
+      left: calc(50% - 0.5px);
+      box-shadow: va(--theme-clockface-arrows-shadow);
+      transform: rotate(0deg);
+    }
+    .second-arrow {
+      top: 2px;
+      width: 2px;
+      height: var(--clockface-sec-arrow);
+      background: var(--theme-clockface-sec-arrow);
+      transform-origin: 50% calc(var(--clockface-radius) - 2px);
+
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        left: 50%;
+        border-radius: 50%;
+        transform: translateX(-50%);
+      }
+      &::before {
+        top: calc(var(--clockface-radius) - 5px);
+        width: 6px;
+        height: 6px;
+        background-color: var(--theme-clockface-sec-holder);
+      }
+      &::after {
+        top: calc(var(--clockface-radius) - 4px);
+        width: 4px;
+        height: 4px;
+        background: var(--theme-clockface-arrows-holder);
+      }
+    }
+    .minute-arrow {
+      top: calc(var(--clockface-radius) * 0.25);
+      width: 2px;
+      height: var(--clockface-min-arrow);
+      background: var(--theme-clockface-min-arrow);
+      transform-origin: 50% calc(var(--clockface-min-arrow) - var(--clockface-arrow-end));
+    }
+    .hour-arrow {
+      top: calc(var(--clockface-radius) * 0.5);
+      left: calc(50% - 1px);
+      width: 3px;
+      height: var(--clockface-hour-arrow);
+      background: var(--theme-clockface-min-arrow);
+      transform-origin: 50% calc(var(--clockface-hour-arrow) - var(--clockface-arrow-end));
+    }
+  }
+</style>

package/src/components/internal/ClockPopup.svelte

@@ -0,0 +1,91 @@
+<!--
+// 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 { convertTimeZone, showPopup, TimeZone } from '../..'
+  import ClockFace from './ClockFace.svelte'
+  import TimeZonesPopup from '../TimeZonesPopup.svelte'
+
+  const clockSize: string = '80px'
+  const tzs: string[] = []
+  const timeZones: TimeZone[] = []
+
+  const localTZ: string = Intl.DateTimeFormat().resolvedOptions().timeZone
+  let selectedTZ: string[] = [localTZ]
+  const savedTZ = localStorage.getItem('TimeZones')
+  if (savedTZ === null && selectedTZ[0] !== '') localStorage.setItem('TimeZones', JSON.stringify(selectedTZ))
+  else if (savedTZ !== null) selectedTZ = JSON.parse(savedTZ)
+
+  if (!Intl.supportedValuesOf) console.log('Your browser does not support Intl.supportedValuesOf().')
+  else for (const timeZone of Intl.supportedValuesOf('timeZone')) tzs.push(timeZone)
+
+  if (tzs.length > 0) tzs.forEach((tz) => timeZones.push(convertTimeZone(tz)))
+
+  const saveTZ = (): void => {
+    selectedTZ = selectedTZ
+    localStorage.setItem('TimeZones', JSON.stringify(selectedTZ))
+  }
+
+  const changeTimeZone = (
+    event: MouseEvent & { currentTarget: EventTarget & HTMLSpanElement },
+    index: number
+  ): void => {
+    showPopup(
+      TimeZonesPopup,
+      {
+        timeZones,
+        selected: selectedTZ[index],
+        count: selectedTZ.length,
+        reset: selectedTZ.filter((tz) => tz === localTZ).length > 0 ? null : localTZ
+      },
+      event.currentTarget,
+      (result) => {
+        if (result !== undefined) {
+          if (result === 'delete') selectedTZ.splice(index, 1)
+          else selectedTZ[index] = result
+          saveTZ()
+        }
+      },
+      (result) => {
+        if (result !== undefined) {
+          if (result === 'reset') {
+            selectedTZ[index] = localTZ
+          } else selectedTZ = [result, ...selectedTZ]
+          saveTZ()
+        }
+      }
+    )
+  }
+</script>
+
+<div class="antiPopup" style:flex-direction={'row'} style:padding={'12px'}>
+  {#each selectedTZ as selected, i}
+    <div class="statusPopup-option">
+      <ClockFace bind:timeZone={selected} size={clockSize} />
+      {#if selected !== ''}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
+        <span
+          class="label overflow-label"
+          style:max-width={clockSize}
+          on:click={(ev) => {
+            changeTimeZone(ev, i)
+          }}
+        >
+          {convertTimeZone(selected).short}
+        </span>
+      {/if}
+    </div>
+  {/each}
+</div>

package/src/components/internal/ErrorBoundary.ts

@@ -0,0 +1,33 @@
+//
+// Copyright © 2020 Hanzo <dev@hanzo.ai>.
+//
+// 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.
+//
+
+import ErrorComponent from './ErrorComponent.svelte'
+export default class errorBoundary extends ErrorComponent {
+  constructor (config: any) {
+    let error: any = null
+    config.props.$$slots.default = config.props.$$slots.default.map((x: any) => (...args: any[]) => {
+      try {
+        return x(...args)
+      } catch (e) {
+        console.error(e)
+        error = e
+      }
+    })
+    super(config)
+    if (error != null) {
+      this.$set({ error })
+    }
+  }
+}

package/src/components/internal/ErrorComponent.svelte

@@ -0,0 +1,37 @@
+<!--
+// Copyright © 2020 Hanzo <dev@hanzo.ai>.
+//
+// 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>
+  export let error = null
+</script>
+
+<slot>
+  {#if error}
+    <div class="error">
+      <b>{error.message}</b>
+      <pre class="trace">
+        {error.stack}
+      </pre>
+    </div>
+  {/if}
+</slot>
+
+<style>
+  .error {
+    border: 1px solid red;
+  }
+  .trace {
+    font-family: monospace;
+  }
+</style>