sveltekit-ui 1.1.16 → 1.1.18

package/dist/Components/Eye/index.svelte

@@ -0,0 +1,57 @@
+<script>
+  let { is_eye_shown = false, is_bind_val = false, eye_color = "var(--g6-t)", sw = 30, on_change } = $props()
+
+  function handle_click(change_to) {
+    if (is_bind_val) {
+      is_eye_shown = change_to
+    }
+    on_change(change_to)
+  }
+</script>
+
+<div
+  class="icon_frame"
+  role="button"
+  tabindex="0"
+  onclick={() => handle_click(!is_eye_shown)}
+  onkeydown={(event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      handle_click(!is_eye_shown)
+    }
+  }}
+>
+  {#if is_eye_shown}
+    <svg id="eye" class="svg_cover" data-name="eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 350">
+      <g fill="none" stroke={eye_color} stroke-width={sw}>
+        <path
+          d="M120.2-2.8h58.2a248 248 0 01248 248v58.3a34.6 34.6 0 01-34.6 34.6h-58.2A248 248 0 0185.6 90V31.9a34.6 34.6 0 0134.6-34.7z"
+          transform="rotate(-45 256 167.7)"
+        />
+        <circle cx="256" cy="167.7" r="78.8" />
+      </g>
+    </svg>
+  {:else}
+    <svg id="eyenot" class="svg_cover" data-name="eyenot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 350">
+      <g fill="none" stroke={eye_color} stroke-width={sw}>
+        <path
+          d="M336.3 292.6a248 248 0 01-255.7-59.3l-41.2-41.1a34.7 34.7 0 010-49L80.6 102a249.1 249.1 0 0135.6-29.6M182.6 139a78.8 78.8 0 00102.2 102M329.4 196.4A78.8 78.8 0 00227.3 94.3"
+        />
+        <path
+          d="M175.7 42.7A248 248 0 01431.4 102l41.2 41.1a34.7 34.7 0 010 49l-41.2 41.2a249 249 0 01-35.6 29.6M115.6 27.3l280.8 280.8"
+        />
+      </g>
+    </svg>
+  {/if}
+</div>
+
+<style>
+  .icon_frame {
+    width: 2rem;
+    height: 2rem;
+    display: flex;
+    align-items: center;
+  }
+  .svg_cover {
+    width: 100%;
+  }
+</style>

package/dist/Components/Icon/index.svelte

@@ -0,0 +1,412 @@
+<script>
+  let { manager } = $props()
+</script>
+
+<div
+  id={`id_${manager?.id}`}
+  class="container"
+  class:shimmy={(manager?.is_shimmying || manager?.is_shimmy_infinite) && manager?.is_shimmyable}
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+    class="icon"
+    style="transform: rotate({manager?.deg_spring}deg); --size: {manager?.size}rem; margin-left: {manager?.ml}rem; margin-right: {manager?.mr}rem; margin-top: {manager?.mt}rem; margin-bottom: {manager?.mb}rem;"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    fill={manager?.fill}
+    stroke={manager?.color}
+    stroke-width={manager?.sw}
+  >
+    {#if manager?.icon_id === "arrow"}
+      <path d="m62 337 194-194 194 194" />
+    {:else if manager?.icon_id === "arrow_tailed"}
+      <path d="M256 45.4 466.4 256 256 466.3" />
+      <path d="M466.4 255.9H45.6" />
+    {:else if manager?.icon_id === "calendar"}
+      <rect x="69.83" y="106.26" width="372.34" height="328.85" rx="47.86" />
+      <path d="M442.17 184.48H69.83" />
+      <path d="M217.82 135.64V76.88M141.45 135.64V76.88M294.18 135.64V76.88M370.55 135.64V76.88" />
+      <g fill={manager?.color}>
+        <rect x="362.8" y="237.28" width="15.5" height="15.5" rx="4.29" />
+        <rect x="286.43" y="237.28" width="15.5" height="15.5" rx="4.29" />
+        <rect x="211.66" y="237.28" width="15.5" height="15.5" rx="4.29" />
+        <rect x="286.43" y="299.93" width="15.5" height="15.5" rx="4.29" />
+        <rect x="133.7" y="363.92" width="15.5" height="15.5" rx="4.29" />
+        <rect x="211.66" y="363.92" width="15.5" height="15.5" rx="4.29" />
+        <rect x="133.7" y="299.93" width="15.5" height="15.5" rx="4.29" />
+        <rect x="211.66" y="299.93" width="15.5" height="15.5" rx="4.29" />
+        <rect x="362.8" y="299.93" width="15.5" height="15.5" rx="4.29" />
+        <rect x="286.43" y="363.92" width="15.5" height="15.5" rx="4.29" />
+      </g>
+    {:else if manager?.icon_id === "magnifying_glass"}
+      <g transform="rotate(-45 232.577 208.216)" stroke-linecap="round" stroke-linejoin="round">
+        <circle transform="matrix(.97157 0 0 .97157 215.351 204)" r="158.234" />
+        <path d="M215.351 357.736v161.807" />
+      </g>
+    {:else if manager?.icon_id === "chart"}
+      <path d="M76 89v344h355" />
+      <path d="m144 251 35 98 69-164 78 125 89-205" />
+    {:else if manager?.icon_id === "row_item"}
+      <rect x="42" y="154" width="422.2" height="203.6" rx="58" />
+      <path d="M53 71h401M53 442h401" />
+    {:else if manager?.icon_id === "chart_group"}
+      <path d="M114 120v106h109" />
+      <rect x="43" y="45" width="422.2" height="422.2" rx="58" />
+      <path d="m295 120-1 106h109M114 286v106h109M295 286l-1 106h109" />
+    {:else if manager?.icon_id === "check"}
+      <path d="M432.4 116.9L177.5 371.7l-104-104" />
+    {:else if manager?.icon_id === "copy"}
+      <rect x="85.2" y="144" width="258.1" height="297.4" rx="12" />
+      <path
+        d="M146.7 212.2h135M146.7 292.7h135M146.7 373.3h135M426.8 82.5V356a12 12 0 01-12 12h-71.5V156a12 12 0 00-12-12H168.7V82.5a12 12 0 0112-12h234.1a12 12 0 0112 12z"
+      />
+    {:else if manager?.icon_id === "drag_grip"}
+      <path d="M97 97h0M97 415h0M415 97h0M415 415h0" />
+      <path d="M256 97h0" />
+      <path d="M256 415h0M415 256h0M97 256h0" />
+      <path d="M256 256h0" />
+    {:else if manager?.icon_id === "edit"}
+      <path d="M390.4 251.4v129.1a40 40 0 01-40 40H133.6a40 40 0 01-40-40V164a40 40 0 0140-40h124.6" />
+      <path
+        d="M188.6 305l18.3-37.7a10.8 10.8 0 012.1-3l170-170c5-5 14-4.3 20 1.7l19.4 19.4c6 6 6.7 14.9 1.7 20l-170 170a10.8 10.8 0 01-3 2.1l-37.7 18.3c-11.9 5.7-26.6-9-20.8-20.8z"
+      />
+    {:else if manager?.icon_id === "link"}
+      <path d="M390 251v130a40 40 0 0 1-40 40H134a40 40 0 0 1-40-40V164a40 40 0 0 1 40-40h124" />
+      <path d="M189 325 429 86H325h104v103" />
+    {:else if manager?.icon_id === "link_internal"}
+      <path d="M390 251v130a40 40 0 0 1-40 40H134a40 40 0 0 1-40-40V164a40 40 0 0 1 40-40h124" />
+      <path d="M400 115 189 325V222v103h103" />
+    {:else if manager?.icon_id === "list"}
+      <path d="M196.6 120.5h248M67.7 120.5H118M196.2 256h248.1M67.4 256h50.3M196.2 391.5h248.1M67.4 391.5h50.3" />
+    {:else if manager?.icon_id === "minus"}
+      <path d="M62 256h388" />
+    {:else if manager?.icon_id === "plus"}
+      <path d="M256 62v388M62 256h388" />
+    {:else if manager?.icon_id === "rotate"}
+      <path d="M256 309c-94 0-171-38-171-85s77-84 171-84 171 37 171 84c0 31-33 58-82 73" />
+      <path d="m226 249 30 60-30 63" />
+    {:else if manager?.icon_id === "refresh"}
+      <path d="M391 69v100H291M121 443V343h100" />
+      <path d="M98 232a160 160 0 0 1 292-64M122 344a160 160 0 0 0 292-64" />
+    {:else if manager?.icon_id === "sort"}
+      <path
+        style:stroke={manager?.sort_state == "asc" ? manager?.alt_color : manager?.color}
+        d="M177.53,71.36V431.2l-104-104"
+      />
+      <path
+        style:stroke={manager?.sort_state == "desc" ? manager?.alt_color : manager?.color}
+        d="M334.47,431.2V71.36l104,104"
+      />
+    {:else if manager?.icon_id === "table"}
+      <rect x="70" y="86" width="372.3" height="339.5" rx="47.9" />
+      <path d="M442 175H70M442 289H70M256 175v251" />
+    {:else if manager?.icon_id === "trashcan"}
+      <path d="m382 187-12 221c0 19-19 34-42 34H184c-23 0-42-15-42-34l-12-221Z" />
+      <path
+        d="M417 164v5a18 18 0 0 1-19 18H114a18 18 0 0 1-19-18v-5a42 42 0 0 1 42-42h238a42 42 0 0 1 42 42ZM256 239v149M318 239l-6 149M194 239l7 149M338 111v11H174v-11a42 42 0 0 1 41-41h82a42 42 0 0 1 41 41Z"
+      />
+    {:else if manager?.icon_id === "x"}
+      <path d="M75 437 437 75M75 75l362 362" />
+    {:else if manager?.icon_id === "three_dots"}
+      <line x1="256" y1="96" x2="256" y2="96" /><line x1="256" y1="415" x2="256" y2="415" /><line
+        x1="256"
+        y1="256"
+        x2="256"
+        y2="256"
+      />
+    {:else if manager?.icon_id === "clock"}
+      <circle cx="256" cy="256" r="212.9" />
+      <path d="M256 125v131l66.1 66.1" />
+    {:else if manager?.icon_id === "sun"}
+      <circle cx="256" cy="256" r="83.3" />
+      <path d="M256 52.4V110" />
+      <path d="m112 112 40.8 40.8" />
+      <path d="M52.4 256H110" />
+      <path d="m112 400 40.8-40.8" />
+      <path d="M256 459.6v-57.7" />
+      <path d="m400 400-40.8-40.8" />
+      <path d="M459.6 256h-57.7" />
+      <path d="m400 112-40.8 40.8" />
+    {:else if manager?.icon_id === "moon"}
+      <path d="M425.3 256A189 189 0 0 1 86.7 371.4 189 189 0 0 0 212.2 68.6 189 189 0 0 1 425.4 256Z" />
+    {:else if manager?.icon_id === "smile_face"}
+      <path d="M432 308a255 255 0 0 1-350 0" />
+      <path d="M148 162v-27M365 162v-27M441 317l-19-20M71 317l19-20" />
+    {:else if manager?.icon_id === "frown_face"}
+      <path d="M148 167v-27M365 167v-27M431 361a255 255 0 0 0-350 0M441 353l-19 19M71 353l19 19" />
+    {:else if manager?.icon_id === "nuetral_face"}
+      <path d="M148 177v-28M365 177v-28M76 349h361M441 363v-28M71 363v-28" />
+    {:else if manager?.icon_id === "curved_arrow"}
+      <path d="M90 93c176 46 261 162 259 345" />
+      <path d="m242 352 107 87 91-87" />
+    {:else if manager?.icon_id === "pointer_hand"}
+      <path
+        d="m407 235 1 136c0 65-12 92-129 92-86 0-115-16-142-84-25-63-54-104-56-132-1-8 32-94 88 22 0-195-6-221 30-221 37 0 33 26 33 215 0-97-4-118 28-118 28 0 32 24 32 117 0-81 6-87 31-87 23 0 27 15 27 88 0-49 6-55 24-55 20 0 33 19 33 27z"
+      />
+    {:else if manager?.icon_id === "touch_circle"}
+      <circle cx="256" cy="256" r="200" />
+      <circle cx="256" cy="256" r="100" />
+    {:else if manager?.icon_id === "profile"}
+      <circle cx="256" cy="235" r="89" />
+      <path d="M457 256a200 200 0 0 1-201 201 201 201 0 1 1 201-201z" />
+      <path d="M405 391a201 201 0 0 1-299-1 201 201 0 0 1 299 1z" />
+    {:else if manager?.icon_id === "share"}
+      <path
+        d="M316 204h63c18 0 32 14 32 31v182c0 17-14 32-32 32H133c-18 0-32-14-32-32V235c0-17 14-31 32-31h63M169 137l87-73 87 73M256 345V64"
+      />
+    {:else if manager?.icon_id === "invite"}
+      <path d="m72 209 57-48v96zM288 81l65 55H159l65-55c19-15 46-15 64 0zM441 209l-57 48v-96z" />
+      <path d="M441 209v204c0 16-14 30-30 30H102c-17 0-30-14-30-30V209l57 48 95 80c18 16 46 16 64 0l96-80 57-48z" />
+      <path d="M129 257V136h255v121" />
+    {:else if manager?.icon_id === "feedback"}
+      <path
+        d="M442 117v207c0 11-9 20-21 20H248c-4 0-9 2-12 4l-78 63c-13 11-33 2-33-15v-32c0-11-9-20-20-20H91c-12 0-21-9-21-20V116c1-11 10-20 21-20h330c12 0 21 9 21 21zM150 181h217M150 258h217"
+      />
+    {:else if manager?.icon_id === "idea"}
+      <path
+        d="m121 130-41-24M101 206H53M121 282l-41 23M391 282l41 23M411 206h48M391 130l41-24M347 209c0 17-5 34-13 48-17 27-27 56-31 87l-6 45c-2 12-12 20-23 20h-36c-11 0-21-8-23-20l-6-45c-4-31-15-61-31-88a91 91 0 1 1 169-48zM209 344h94"
+      />
+    {:else if manager?.icon_id === "ar_one_to_one"}
+      <rect width="360" height="360" x="76" y="78" rx="50" ry="50" />
+    {:else if manager?.icon_id === "ar_four_to_three"}
+      <rect width="360" height="270" x="76" y="123" rx="50" ry="50" />
+    {:else if manager?.icon_id === "ar_three_to_two"}
+      <rect width="360" height="238" x="76" y="139" rx="50" ry="50" />
+    {:else if manager?.icon_id === "ar_sixteen_to_nine"}
+      <rect width="360" height="202" x="76" y="157" rx="50" ry="50" />
+    {:else if manager?.icon_id === "crop"}
+      <path
+        d="M161 236v40M161 337c0 16 8 30 20 39M181 136c-12 9-20 23-20 39M277 126h-40M237 386h40M333 376c12-9 20-23 20-38M353 175c0-16-8-30-20-39M353 276v-40"
+      />
+      <rect width="400" height="400" x="57" y="56" rx="50" ry="50" />
+    {:else if manager?.icon_id === "resize"}
+      <rect width="400" height="400" x="56" y="56" rx="50" ry="50" />
+      <path d="M56 230c0-27 22-50 50-50h176c27 0 50 23 50 50v176c0 28-23 50-50 50" />
+    {:else if manager?.icon_id === "save"}
+      <path
+        d="M436 178v230c0 17-13 30-30 30H106c-16 0-30-13-30-30V108c0-16 14-30 30-30h231c8 0 15 4 21 9l70 70c5 5 8 13 8 21Z"
+      />
+      <path
+        d="M363 312v126H149V312c0-16 14-30 30-30h154c16 0 30 14 30 30ZM300 78v60c0 17-13 30-30 30h-90c-17 0-30-13-30-30V78h150Z"
+      />
+    {:else if manager?.icon_id === "folder"}
+      <path
+        d="M386 392H126c-28 0-50-23-50-50V170c0-27 22-50 50-50h65c12 0 23 4 32 12l19 16c9 8 20 12 32 12h112c28 0 50 23 50 50v132c0 27-22 50-50 50Z"
+      />
+    {:else if manager?.icon_id === "file"}
+      <path
+        d="M394 199v187c0 28-22 50-50 50H168c-28 0-50-22-50-50V126c0-28 22-50 50-50h101v73c0 28 23 50 50 50h75ZM323 283H189M269 76l125 123M323 358H189"
+      />
+    {:else if manager?.icon_id === "file_drop"}
+      <path d="M394 199v187c0 28-22 50-50 50H168c-28 0-50-22-50-50V126c0-28 22-50 50-50h101v73c0 28 23 50 50 50h75Z" />
+      <path d="m188 317 72-73 72 73M260 245v133M269 76l125 123" />
+    {:else if manager?.icon_id === "file_dropped"}
+      <path
+        d="M394 199v187c0 28-22 50-50 50H168c-28 0-50-22-50-50V126c0-28 22-50 50-50h101v73c0 28 23 50 50 50h75ZM269 76l125 123"
+      />
+      <path d="m325 253-76 121-58-46" />
+    {:else if manager?.icon_id === "file_add"}
+      <path
+        d="M394 199v187c0 28-22 50-50 50H168c-28 0-50-22-50-50V126c0-28 22-50 50-50h101v73c0 28 23 50 50 50h75ZM269 76l125 123M256 370V261M202 316h109"
+      />
+    {:else if manager?.icon_id === "linked"}
+      <path d="M280 84h7c43 0 78 36 78 81v77c0 45-35 82-78 82h-7c-43 0-78-37-78-82v-77c0-45 35-81 78-81Z" />
+      <path d="M218 204h7c43 0 78 37 78 82v77c0 45-35 81-78 81h-7c-43 0-78-36-78-81v-77c0-45 35-82 78-82Z" />
+    {:else if manager?.icon_id === "unlinked"}
+      <path d="m201 115 47-1c9-2 16-7 22-13 26-30 68-16 84-8l6 4c37 23 47 72 23 110l-41 65c-24 39-78 41-128 27" />
+      <path
+        d="m161 206 7-3c39-18 86 0 104 41l32 70c19 41 2 89-37 106l-7 4c-39 17-85-1-104-42l-32-70c-19-41-2-88 37-106h0Z"
+      />
+    {:else if manager?.icon_id === "sliders"}
+      <path d="M360 176V96M76 256h360M76 376h360M76 136h360M146 296v-80M259 416v-80" />
+    {:else if manager?.icon_id === "brain"}
+      <path d="M331 400c-49 97-7-89-85-53-51 23-80-43-126-57-134-54 71-257 181-194 175 62 174 209 30 304h0Z" />
+    {:else if manager?.icon_id === "brush"}
+      <path
+        d="m432 305-24 137-174-10-13-62c-3-11-19-13-24-2l-27 60-93-6 77-180 1-1 9-27c9-25 36-39 60-30l55 18 38-113c5-15 22-23 37-18l15 5c15 6 23 22 18 37l-39 113 55 18c25 9 38 36 29 61ZM427 333l-272-91"
+      />
+    {:else if manager?.icon_id === "redo_arrow"}
+      <path d="M390 222a151 151 0 0 1-174 218 152 152 0 1 1 80-293" />
+      <path d="m217 67 80 80-80 80" />
+    {:else if manager?.icon_id === "undo_arrow"}
+      <path d="M122 222a151 151 0 0 0 174 218 152 152 0 1 0-80-293" />
+      <path d="m295 67-80 80 80 80" />
+    {:else if manager?.icon_id === "opposing_arrows"}
+      <path d="M138 194 256 76l118 118M374 318 256 436 138 318M256 436V76" />
+    {:else if manager?.icon_id === "photo"}
+      <rect width="360" height="360" x="76" y="76" rx="50" ry="50" />
+      <path d="m76 367 131-119 78 102 55-46 96 81" />
+      <circle cx="325.6" cy="187.8" r="40" />
+    {:else if manager?.icon_id === "send"}
+      <path
+        d="m404 131-81 242c-5 15-26 16-33 1l-45-98c-2-4-5-7-9-9l-93-43c-17-7-15-31 2-37l236-79c14-4 27 9 23 23ZM130 382l68-67M101 317l32-32M195 411l32-32M241 271l45-45"
+      />
+    {:else if manager?.icon_id === "clipboard"}
+      <path d="M334 120h62v316H116V120h62" />
+      <path d="M178 76h157v88H178z" />
+    {:else if manager?.icon_id === "download"}
+      <path d="M254 76v218M356 369h22M357 302h79v134H76V302h75M170 210l84 84 84-84" />
+    {:else if manager?.icon_id === "heart"}
+      <path
+        d="M436 192c0 23-9 46-26 63l-28 28-126 126-125-126-29-28a88 88 0 0 1 0-126c35-34 91-34 126 0l28 29 28-29a89 89 0 0 1 152 63Z"
+      />
+    {:else if manager?.icon_id === "star"}
+      <path d="m357 307 10 120-111-47-111 47 10-120-79-91 118-28 62-103 62 103 118 28-79 91z" />
+    {:else if manager?.icon_id === "search"}
+      <circle cx="220.6" cy="220.6" r="144.6" />
+      <path d="M436 436 323 323" />
+    {:else if manager?.icon_id === "bolt"}
+      <path d="m370 349-125 53-114 48 77-176 19-44-85-39 125-53 114-48-77 176-19 44 85 39z" />
+    {:else if manager?.icon_id === "branch"}
+      <rect width="82.3" height="88" x="105" y="83" rx="20.1" ry="20.1" />
+      <path d="M405 151c0 11-9 20-20 20h-42c-11 0-20-9-20-20v-48c0-11 9-20 20-20h42c11 0 20 9 20 20v48Z" />
+      <rect width="82.3" height="88" x="105" y="355" rx="20.1" ry="20.1" />
+      <path d="M146 355V171M146 355c0-87 73-83 116-92 37-8 102-22 102-92" />
+    {:else if manager?.icon_id === "code"}
+      <path
+        d="m356 153 47 47 24 23c12 12 12 32 0 44l-24 23-24 24-22 22h-1M156 153l-47 47-24 23a31 31 0 0 0 0 44l24 23 24 24 22 22h1M220 396l72-280"
+      />
+    {:else if manager?.icon_id === "comment"}
+      <path
+        d="M436 242c0 76-81 137-180 137-27 0-53-5-76-13-13-5-94 40-94 40-12-7 33-74 24-84-21-22-34-50-34-80 0-75 81-136 180-136s180 61 180 136Z"
+      />
+    {:else if manager?.icon_id === "gear"}
+      <path
+        d="m388 285 31 25c8 7 9 17 5 26l-15 25c-5 9-15 12-25 9l-37-14c-7-3-14-2-19 2-6 5-13 8-19 11s-11 9-12 15l-7 40c-1 10-10 17-19 17h-30c-9 0-18-7-19-17l-7-40c-1-6-6-12-12-15s-13-6-19-11c-5-4-12-5-19-2l-37 14c-10 3-20 0-25-9l-15-25c-4-9-3-19 5-26l31-25c5-5 8-11 7-18v-22c1-7-2-13-7-18l-31-25c-8-7-9-17-5-26l15-25c5-9 15-12 25-9l37 14c7 3 14 2 19-2 6-5 13-8 19-11s11-9 12-15l7-40c1-10 10-17 19-17h30c9 0 18 7 19 17l7 40c1 6 6 12 12 15s13 6 19 11c5 4 12 5 19 2l37-14c10-3 20 0 25 9l15 25c4 9 3 19-5 26l-31 25c-5 5-8 11-7 18v22c-1 7 2 13 7 18Z"
+      />
+      <circle cx="256" cy="256" r="53.1" />
+    {:else if manager?.icon_id === "house"}
+      <path d="M386 205v211h-84V294h-92v122h-84V205L256 96l130 109zM76 248l50-42M386 206l50 42" />
+      <path d="M210 294h92v122h-92z" />
+    {:else if manager?.icon_id === "unlocked"}
+      <path d="M76 242h360v194H76zM146 242v-59c0-59 49-107 110-107a111 111 0 0 1 99 59" />
+      <path d="M201 339h110" />
+    {:else if manager?.icon_id === "locked"}
+      <path d="M76 242h360v194H76zM366 183v59H146v-59c0-59 49-107 110-107 30 0 58 12 78 31 20 20 32 46 32 76Z" />
+      <path d="M201 339h110" />
+    {:else if manager?.icon_id === "tag"}
+      <path
+        d="M401 218c19 19 19 51 0 70l-37 38-39 39-36 35a50 50 0 0 1-70 0l-36-35-92-93c-10-9-15-22-15-35V126c0-28 22-50 50-50h113c13 0 26 5 35 15l90 89 37 38Z"
+      />
+      <circle cx="175.7" cy="173.4" r="10" />
+    {:else if manager?.icon_id === "play"}
+      <path d="m98 82 316 168L98 418V82z" />
+    {:else if manager?.icon_id === "pause"}
+      <path d="M155 427V72M375 427V72" />
+    {:else if manager?.icon_id === "volume"}
+      <path d="M357 72c98 99 98 257 0 356" />
+      <path d="M303 135c63 64 63 166 0 230M244 113v265l-63-57H81V155h91l72-42z" />
+    {:else if manager?.icon_id === "speech"}
+      <path d="m185 386-16-46 8-46-90-16 90-56-12-52 55-5-71-94M353 121c96 85 96 222 0 307" />
+      <path d="M300 176c62 54 62 143 0 197M246 225c42 28 42 74 0 102" />
+    {:else if manager?.icon_id === "warning"}
+      <path d="M44.6 409.331 256 80.204l211.4 329.127H44.6ZM256 240.996V297" />
+      <path d="M256 352.541q0 0 0 0h0Z" />
+    {:else if manager?.icon_id === "reply"}
+      <path
+        d="M202.041 99.202c19.527-19.526 51.185-19.526 70.711 0v56.036c93.593 4.223 149.98 29.672 149.98 239.065-29.622-72.545-139.391-87.43-149.98-76.841v64.583c-19.526 19.526-51.184 19.526-70.71 0L95.974 275.979c-19.526-19.526-19.526-51.184 0-70.71L202.041 99.201Z"
+      />
+    {:else if manager?.icon_id === "reply_all"}
+      <path
+        d="m240 99 1-1a50 50 0 0 0-69 1L66 205a50 50 0 0 0 0 71l106 106c19 19 50 20 69 2l-1-2-106-106a50 50 0 0 1 0-71L240 99Zm3 0-2-1c20-18 50-18 69 1h0v56c94 4 150 30 150 239-29-72-139-87-150-77v65a50 50 0 0 1-69 2l2-2"
+      />
+    {:else if manager?.icon_id === "forward"}
+      <path
+        d="M309.959 99.202c-19.527-19.526-51.185-19.526-70.711 0v56.036c-93.593 4.223-149.98 29.672-149.98 239.065 29.622-72.545 139.391-87.43 149.98-76.841v64.583c19.526 19.526 51.184 19.526 70.71 0l105.357-105.066c19.526-19.526 19.526-51.184 0-70.71L309.959 99.201Z"
+      />
+    {:else if manager?.icon_id === "mail"}
+      <path
+        d="M441.8 388.6a46.5 46.5 0 0 1-36.5 18.9H106.7a46.5 46.5 0 0 1-36.5-18.9m-13.5-41V171c0-12.7 3.3-24.6 9-34.3L194 265 70.2 388.6a66.3 66.3 0 0 1-13.5-41ZM194 265 218 289c21 21 55.5 20.3 77.2-1.4L318 265m128.3-128.3c5.7 9.7 9 21.6 9 34.3v176.8c0 15.8-5.1 30.2-13.5 40.9L318 264.9l128.3-128.3Zm.2-.2-.2.2c-9-15.4-24-25.5-41-25.5H106.7c-17 0-32 10.1-41 25.5h0"
+      />
+    {:else if manager?.icon_id === "mail_opened"}
+      <g>
+        <path
+          d="M441.8 388.6a46.5 46.5 0 0 1-36.5 18.9H106.7a46.5 46.5 0 0 1-36.5-18.9m-13.5-41V171c0-12.7 3.3-24.6 9-34.3L194 265 70.2 388.6a66.3 66.3 0 0 1-13.5-41ZM194 265 218 289c21 21 55.5 20.3 77.2-1.4L318 265m128.3-128.3c5.7 9.7 9 21.6 9 34.3v176.8c0 15.8-5.1 30.2-13.5 40.9L318 264.9l128.3-128.3Zm.2-.2-.2.2"
+          transform="matrix(.7899 0 0 .7899 53.8 106.9)"
+        />
+        <path
+          d="M81.2 151.5 194 265m0 0L218 289c21 21 55.5 20.3 77.2-1.4L318 265m0 0 113-113.6"
+          transform="matrix(-.85937 0 0 -.85937 476.1 344.8)"
+        />
+      </g>
+    {:else if manager?.icon_id === "mail_received"}
+      <path
+        d="M441.8 388.6a46.5 46.5 0 0 1-36.5 18.9H106.7a46.5 46.5 0 0 1-36.5-18.9m-13.5-41V171c0-12.7 3.3-24.6 9-34.3L194 265 70.2 388.6a66.3 66.3 0 0 1-13.5-41ZM194 265 218 289c21 21 55.5 20.3 77.2-1.4L318 265m128.3-128.3c5.7 9.7 9 21.6 9 34.3v176.8c0 15.8-5.1 30.2-13.5 40.9L318 264.9l128.3-128.3Zm.2-.2-.2.2c-9-15.4-24-25.5-41-25.5H106.7c-17 0-32 10.1-41 25.5v0"
+        transform="matrix(.7928 0 0 .79282 101 128.7)"
+      />
+      <path d="m263.7 86.4 50.5 68.2M70.6 100.6l44.6 54M146 59.8l74 94.8" />
+    {:else if manager?.icon_id === "mail_sent"}
+      <path
+        d="M441.8 388.6a46.5 46.5 0 0 1-36.5 18.9H106.7a46.5 46.5 0 0 1-36.5-18.9m-13.5-41V171c0-12.7 3.3-24.6 9-34.3L194 265 70.2 388.6a66.3 66.3 0 0 1-13.5-41ZM194 265 218 289c21 21 55.5 20.3 77.2-1.4L318 265m128.3-128.3c5.7 9.7 9 21.6 9 34.3v176.8c0 15.8-5.1 30.2-13.5 40.9L318 264.9l128.3-128.3Zm.2-.2-.2.2c-9-15.4-24-25.5-41-25.5H106.7c-17 0-32 10.1-41 25.5v0"
+        transform="matrix(.7928 0 0 .79282 90.9 -20.1)"
+      />
+      <path d="M306.5 357 256 425.2M109.8 356.6l-44.7 54M209.8 357l-74 94.8" />
+    {:else if manager?.icon_id === "mail_sent_opened"}
+      <g>
+        <path
+          d="M441.8 388.6a46.5 46.5 0 0 1-36.5 18.9H106.7a46.5 46.5 0 0 1-36.5-18.9m-13.5-41V171c0-12.7 3.3-24.6 9-34.3L194 265 70.2 388.6a66.3 66.3 0 0 1-13.5-41ZM194 265 218 289c21 21 55.5 20.3 77.2-1.4L318 265m128.3-128.3c5.7 9.7 9 21.6 9 34.3v176.8c0 15.8-5.1 30.2-13.5 40.9L318 264.9l128.3-128.3Zm.2-.2-.2.2"
+          transform="translate(144.1 67.6) scale(.62674)"
+        />
+        <path
+          d="M81.2 151.5 194 265m0 0L218 289c21 21 55.5 20.3 77.2-1.4L318 265m0 0 113-113.6"
+          transform="matrix(-.68186 0 0 -.68185 479.2 256.4)"
+        />
+      </g>
+      <path d="m322.8 387.5-36.5 49.4M126.7 387.5l-30 34.8M232.3 387.5l-66.2 76" />
+    {:else if manager?.icon_id === "pinpoint"}
+      <path d="M142.6 166a113.4 113.4 0 0 1 226.8 0c0 62.7-69.6 218.5-113.4 218.5-43.3 0-113.4-155.8-113.4-218.4Z" />
+      <path d="M96 332.3 66 458h416.5l-29.9-125.6" />
+    {:else if manager?.icon_id === "paperclip"}
+      <path
+        d="M209 154.6v190.2c0 58.4 89.5 58.5 89.5 0V112.2c0-89.4-146-85.6-146 0V376c0 110.1 200.7 110.1 200.7 0V154.6"
+      />
+    {/if}
+  </svg>
+</div>
+
+<style>
+  .container {
+    display: flex;
+    flex: 0;
+  }
+  .icon {
+    width: var(--size);
+    height: var(--size);
+    display: flex;
+  }
+  @keyframes shimmy {
+    0% {
+      transform: rotate(0deg);
+    }
+    8% {
+      transform: rotate(-15deg);
+    }
+    16% {
+      transform: rotate(15deg);
+    }
+    23% {
+      transform: rotate(-13deg);
+    }
+    30% {
+      transform: rotate(13deg);
+    }
+    36% {
+      transform: rotate(-10deg);
+    }
+    42% {
+      transform: rotate(10deg);
+    }
+    48% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+  .shimmy {
+    animation-duration: 1.8s;
+    animation-name: shimmy;
+    animation-iteration-count: infinite;
+  }
+</style>

package/dist/Components/Icon/index.svelte.js

@@ -0,0 +1,116 @@
+// import { spring } from "svelte/motion"
+import { create_unique_id, set_closurable, set_closurable_color } from "../../client/index.js"
+
+export function create_icon_manager(config) {
+  const id = config?.id ?? create_unique_id(null, 20)
+  let icon_id = $derived(set_closurable(config?.icon_id, null))
+  let color = $derived(set_closurable_color(config?.color, "var(--g4-t)"))
+  let color_alt = $derived(set_closurable_color(config?.color_alt, "var(--g12-t)"))
+  let fill = $derived(set_closurable(config?.fill, "none"))
+  let size = $derived(set_closurable(config?.size, 2))
+  let sw = $derived(set_closurable(config?.sw, 60))
+  let deg = $derived(set_closurable(config?.deg, 0))
+  let ml = $derived(set_closurable(config?.ml, 0))
+  let mr = $derived(set_closurable(config?.mr, 0))
+  let mt = $derived(set_closurable(config?.mt, 0))
+  let mb = $derived(set_closurable(config?.mb, 0))
+  let sort_state = $derived(set_closurable(config?.sort_state, null))
+  let is_shimmy_infinite = $derived(set_closurable(config?.is_shimmy_infinite, false))
+  let is_shimmyable = $derived(set_closurable(config?.is_shimmyable, false))
+  let movement_stiffness = $derived(set_closurable(config?.movement_stiffness, 0.1))
+  let movement_damping = $derived(set_closurable(config?.movement_damping, 0.1))
+
+  let deg_spring = $derived(deg)
+  // tbd had issue switching svelte 4 to svelte 5
+  // const deg_spring = $derived(
+  //   spring(deg, {
+  //     stiffness: movement_stiffness,
+  //     damping: movement_damping,
+  //   })
+  // )
+
+  let is_shimmying = $state(false)
+
+  function trigger_shimmy() {
+    is_shimmying = true
+    setTimeout(() => {
+      is_shimmying = false
+    }, 1000)
+  }
+
+  function set_attributes(input) {
+    // icon_id = set_closurable(input?.icon_id, null) // tbd
+    // deg = set_closurable(input?.deg, deg ?? 0) // up: 0, left: 270, right: 90, down: 180
+    // color = set_closurable_color(input?.color, color ?? "var(--g4-t)")
+    // color_alt = set_closurable_color(input?.color_alt, color_alt ?? "var(--g12-t)")
+    // fill = set_closurable(input?.fill, fill ?? "none")
+    // size = set_closurable(input?.size, size ?? 2)
+    // sw = set_closurable(input?.sw, sw ?? 60)
+  }
+
+  function init(config) {
+    // set_attributes(config)
+  }
+
+  init(config)
+
+  return {
+    id,
+    get icon_id() {
+      return icon_id
+    },
+    get deg() {
+      return deg
+    },
+    get deg_spring() {
+      return deg_spring
+    },
+    get color() {
+      return color
+    },
+    get color_alt() {
+      return color_alt
+    },
+    get fill() {
+      return fill
+    },
+    get size() {
+      return size
+    },
+    get sw() {
+      return sw
+    },
+    get ml() {
+      return ml
+    },
+    get mr() {
+      return mr
+    },
+    get mt() {
+      return mt
+    },
+    get mb() {
+      return mb
+    },
+    get sort_state() {
+      return sort_state
+    },
+    get is_shimmy_infinite() {
+      return is_shimmy_infinite
+    },
+    get is_shimmyable() {
+      return is_shimmyable
+    },
+    get movement_stiffness() {
+      return movement_stiffness
+    },
+    get movement_damping() {
+      return movement_damping
+    },
+    get is_shimmying() {
+      return is_shimmying
+    },
+    trigger_shimmy,
+    set_attributes,
+  }
+}

package/dist/Components/InfoBox/index.svelte

@@ -0,0 +1,89 @@
+<script>
+  import { fade } from "svelte/transition"
+  import Button from "../Button/index.svelte"
+  import { create_button_manager } from "../Button/index.svelte.js"
+
+  let {
+    h = 1,
+    message = null,
+    link_name = null,
+    link = null,
+    is_cancelable = true,
+    br = 1,
+    ml = 0,
+    mr = 0,
+    mt = 0,
+    mb = 0,
+  } = $props()
+
+  let button_manager = create_button_manager({
+    type: "outlined",
+    support_icon: "x",
+    icon_size: 1.6,
+    icon_sw: 60,
+    is_uniform: true,
+    h: h,
+    c: 5,
+    l: 5,
+    min_height: 2.5,
+    ml: 0,
+    mr: 0,
+    mt: 0,
+    mb: 0,
+    on_click: () => (message = null),
+  })
+</script>
+
+{#if message}
+  <div
+    class="container"
+    style="--h: var(--h{h}); --br: {br}rem; --ml: {ml}rem; --mr: {mr}rem; --mt: {mt}rem; --mb: {mb}rem;"
+    transition:fade={{ duration: 100 }}
+  >
+    <p>
+      {message}
+      {#if link && link_name}
+        <a href={link} class="click_text">
+          {link_name}
+        </a>
+      {/if}
+    </p>
+    {#if is_cancelable}
+      <Button manager={button_manager} />
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .container {
+    background-color: oklch(var(--l16-t) var(--c10) var(--h));
+    border: 1px solid oklch(var(--l11-t) var(--c8) var(--h));
+    border-radius: var(--br);
+    margin-left: var(--ml);
+    margin-right: var(--mr);
+    margin-top: var(--mt);
+    margin-bottom: var(--mb);
+    padding: 0.6rem 0.6rem 0.6rem 1rem;
+    text-align: start;
+    display: flex;
+    flex: 1;
+    justify-content: space-between;
+    max-height: 20rem;
+    overflow-y: scroll;
+  }
+  .container p {
+    color: oklch(var(--l4-t) var(--c4) var(--h));
+    font-weight: 500;
+  }
+  .container a {
+    color: var(--g4-t);
+    font-weight: 500;
+  }
+  .click_text {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  .click_text:hover {
+    color: var(--g3-t);
+  }
+</style>