@stack-spot/portal-components 0.0.18 → 1.0.0-dev.1768482754546

package/src/svg/GenericPlaceholder.tsx

@@ -0,0 +1,16 @@
+/* eslint-disable max-len */
+
+export const GenericPlaceholder = ({ className, width, height, style }: { className?: string, width?: string, height?: string, style?: React.CSSProperties }) => (
+  <svg width={width ?? '220'} height={height ?? '220'} viewBox={`0 0 ${width ?? '220'} ${height ?? '220'}`} fill="none" xmlns="http://www.w3.org/2000/svg" style={style} className={className}>
+    <g opacity="0.16">
+      <path d="M115.446 54.1148C117.888 54.1148 119.866 52.1377 119.866 49.6949C119.866 47.2522 117.888 45.2752 115.446 45.2752C113.003 45.2752 111.026 47.2522 111.026 49.6949C111.026 52.1377 113.003 54.1148 115.446 54.1148ZM115.446 71.8005C113.003 71.8005 111.026 73.7777 111.026 76.2204C111.026 78.6631 113.003 80.6402 115.446 80.6402C117.888 80.6402 119.866 78.6631 119.866 76.2204C119.866 73.7777 117.888 71.8005 115.446 71.8005ZM93.0468 85.0601C90.6041 85.0601 88.6269 87.0371 88.6269 89.4798C88.6269 91.9226 90.6041 93.8997 93.0468 93.8997C95.4895 93.8997 97.4666 91.9226 97.4666 89.4798C97.4666 87.0371 95.4895 85.0601 93.0468 85.0601ZM113.896 67.0937C115.586 67.7251 117.576 67.285 118.832 65.8053C120.331 64.0259 120.165 61.309 118.462 59.721C117.206 58.5538 115.458 58.254 113.947 58.8025C112.812 59.2107 111.562 59.115 110.522 58.5028C109.476 57.8841 108.8 56.8126 108.609 55.6136C108.417 54.4592 107.773 53.3814 106.727 52.6734C105.522 51.8571 104.061 51.7167 102.786 52.1695C101.638 52.5714 100.375 52.5012 99.3225 51.8826C98.2702 51.2639 97.6005 50.186 97.4028 48.9806C97.2051 47.8007 96.5354 46.7038 95.4512 45.9959C93.5251 44.7458 90.8847 45.2177 89.5134 47.0545C87.9891 49.089 88.493 51.9591 90.5722 53.3686C91.7776 54.1849 93.2381 54.3253 94.5137 53.8725C95.6617 53.4707 96.9245 53.5408 97.9768 54.1594C99.0228 54.7781 99.6988 55.8496 99.8965 57.055C100.088 58.2094 100.732 59.2872 101.778 59.9952C102.983 60.8115 104.444 60.9519 105.72 60.499C105.802 60.4671 107.065 59.8867 107.709 59.8867C109.406 59.8867 110.784 61.2644 110.784 62.9609C110.784 64.6574 109.406 66.0349 107.709 66.0349C107.065 66.0349 105.809 65.4482 105.726 65.4227C104.469 64.9762 103.034 65.1038 101.835 65.8883C100.751 66.5962 100.094 67.6996 99.9029 68.8859C99.7052 70.0785 99.0355 71.15 97.9832 71.775C96.9372 72.3936 95.6744 72.4702 94.52 72.062C93.2445 71.6156 91.784 71.7558 90.5785 72.5658C88.4994 73.9753 87.9955 76.8454 89.5198 78.8799C90.8974 80.7167 93.5315 81.1887 95.4576 79.9386C96.5482 79.2307 97.2179 78.1337 97.4092 76.9538C97.6069 75.7484 98.2766 74.6769 99.3289 74.0519C100.375 73.4333 101.937 73.5481 102.779 73.7522C104.074 74.0647 105.471 74.071 106.67 73.2865C107.754 72.5786 108.417 71.4753 108.609 70.289C108.8 69.0963 109.476 68.0312 110.522 67.4126C111.542 66.8067 112.786 66.6727 113.896 67.0937ZM91.5033 67.0937C93.1935 67.7251 95.1833 67.285 96.4398 65.8053C97.9386 64.0259 97.7727 61.309 96.0699 59.721C94.8134 58.5538 93.0659 58.254 91.5544 58.8025C90.4191 59.2107 89.169 59.115 88.1295 58.5028C87.0835 57.8841 86.4074 56.8126 86.2161 55.6136C86.2097 55.5562 85.4444 51.9208 81.8537 51.9208C79.411 51.9208 77.4338 53.898 77.4338 56.3407C77.4338 58.7834 79.411 60.7605 81.8537 60.7605C82.5807 60.7605 83.2632 60.5819 83.8691 60.2694C84.3155 60.0972 84.9214 59.8867 85.3105 59.8867C87.007 59.8867 88.3846 61.2644 88.3846 62.9609C88.3846 64.6574 87.007 66.0349 85.3105 66.0349C84.8831 66.0349 84.1943 65.7799 83.7479 65.6013C83.6012 65.5439 82.6126 65.1676 81.8473 65.1676C79.4046 65.1676 77.4275 67.1447 77.4275 69.5874C77.4275 72.0301 79.4046 74.0072 81.8473 74.0072C84.0285 74.0072 85.8398 72.4255 86.197 70.34C86.197 70.3208 86.2097 70.3017 86.2161 70.2826C86.4074 69.0899 87.0835 68.0248 88.1295 67.4062C89.1499 66.8003 90.3936 66.6664 91.5033 67.0873V67.0937ZM104.246 78.4271C101.804 78.4271 99.8264 80.4042 99.8264 82.8469C99.8264 85.2896 101.804 87.2668 104.246 87.2668C106.689 87.2668 108.666 85.2896 108.666 82.8469C108.666 80.4042 106.689 78.4271 104.246 78.4271ZM93.0468 40.8553C95.4895 40.8553 97.4666 38.8782 97.4666 36.4355C97.4666 33.9928 95.4895 32.0156 93.0468 32.0156C90.6041 32.0156 88.6269 33.9928 88.6269 36.4355C88.6269 38.8782 90.6041 40.8553 93.0468 40.8553ZM81.8537 78.4271C79.411 78.4271 77.4338 80.4042 77.4338 82.8469C77.4338 85.2896 79.411 87.2668 81.8537 87.2668C84.2964 87.2668 86.2735 85.2896 86.2735 82.8469C86.2735 80.4042 84.2964 78.4271 81.8537 78.4271ZM104.246 47.4882C106.689 47.4882 108.666 45.5111 108.666 43.0684C108.666 40.6257 106.689 38.6486 104.246 38.6486C101.804 38.6486 99.8264 40.6257 99.8264 43.0684C99.8264 45.5111 101.804 47.4882 104.246 47.4882ZM81.8537 47.4882C84.2964 47.4882 86.2735 45.5111 86.2735 43.0684C86.2735 40.6257 84.2964 38.6486 81.8537 38.6486C79.411 38.6486 77.4338 40.6257 77.4338 43.0684C77.4338 45.5111 79.411 47.4882 81.8537 47.4882ZM70.6542 45.2752C68.2115 45.2752 66.2344 47.2522 66.2344 49.6949C66.2344 52.1377 68.2115 54.1148 70.6542 54.1148C73.0969 54.1148 75.074 52.1377 75.074 49.6949C75.074 47.2522 73.0969 45.2752 70.6542 45.2752ZM70.6542 71.8005C68.2115 71.8005 66.2344 73.7777 66.2344 76.2204C66.2344 78.6631 68.2115 80.6402 70.6542 80.6402C73.0969 80.6402 75.074 78.6631 75.074 76.2204C75.074 73.7777 73.0969 71.8005 70.6542 71.8005ZM70.6542 58.5346C68.2115 58.5346 66.2344 60.5118 66.2344 62.9545C66.2344 65.3972 68.2115 67.3743 70.6542 67.3743C73.0969 67.3743 75.074 65.3972 75.074 62.9545C75.074 60.5118 73.0969 58.5346 70.6542 58.5346Z" fill="#A0A0A0"/>
+    </g>
+    <path opacity="0.32" d="M184.833 93.0629C184.833 42.3776 143.744 1.28906 93.059 1.28906C42.3737 1.28906 1.28516 42.3776 1.28516 93.0629" stroke="url(#paint0_linear_22921_4097)" strokeWidth="2.5731" strokeLinecap="round"/>
+    <defs>
+      <linearGradient id="paint0_linear_22921_4097" x1="93.059" y1="1.28906" x2="93.059" y2="93.0629" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#A0A0A0"/>
+        <stop offset="0.889706" stopColor="#A0A0A0" stopOpacity="0"/>
+      </linearGradient>
+    </defs>
+  </svg>
+)

package/src/svg/HUB.tsx

@@ -0,0 +1,48 @@
+/* eslint-disable max-len */
+
+import { theme } from '@stack-spot/portal-theme'
+import { useTranslate } from '@stack-spot/portal-translate'
+
+/**
+ * The Stackspot logo followed by the text "HUB". This is the specific logo for the HUB Portal.
+ */
+export const HUB = ({ className, style }: { className?: string, style?: React.CSSProperties }) => {
+  const t = useTranslate({ 
+    en: { title: 'Logo StackSpot Hub', description: 'StackSpot logo on the left and right side written "StackSpot" in white and "Hub" in orange.' }, 
+    pt: { title: 'Logo StackSpot Hub', description: 'Logo da StackSpot do lado esquerdo e do lado direito escrito "StackSpot" na cor branca e "Hub" na cor laranja.' },
+  })
+  return (
+    <svg  id="logo-hub" aria-labelledby="logo-hub-title logo-hub-desc" className={className} style={style} width="153" height="24" viewBox="0 0 153 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <title id="logo-hub-title">{t.title}</title>
+      <desc id="logo-hub-desc">{t.description}</desc>
+      <g clipPath="url(#clip0_7624_11282)">
+        <path d="M13.5108 20.4623C13.396 20.4623 13.2862 20.4848 13.1864 20.5222C13.1015 20.5547 13.0117 20.5746 12.9193 20.5821C12.9019 20.5821 12.8844 20.5821 12.8694 20.5821C12.2131 20.5821 11.6416 20.2128 11.3522 19.6713L11.3472 19.6638C11.3072 19.5889 11.2823 19.509 11.2673 19.4267C11.1874 18.97 10.7932 18.6256 10.314 18.6256C10.2017 18.6256 10.0944 18.6456 9.99459 18.683C9.90475 18.7155 9.81242 18.7379 9.72008 18.7454C9.70261 18.7454 9.68514 18.7454 9.67017 18.7454C8.99638 18.7454 8.42241 18.3711 8.14042 17.8096C8.10798 17.7422 8.08552 17.6698 8.07304 17.5975C7.99568 17.1383 7.59889 16.7864 7.11726 16.7864C7.00746 16.7864 6.90015 16.8064 6.80282 16.8413C6.72297 16.8688 6.64311 16.8888 6.55826 16.8937C6.53081 16.8937 6.50336 16.8962 6.4809 16.8962C5.76469 16.8962 5.14829 16.3797 4.88876 15.7583L4.85382 15.661C4.8139 15.5212 4.74652 15.3939 4.65418 15.2891C4.58181 15.2068 4.51443 15.1194 4.45454 15.0271C4.39964 14.9422 4.33975 14.8449 4.3098 14.78C4.20748 14.5554 4.12513 14.3109 4.12513 14.0838C4.12513 13.8093 4.19002 13.5497 4.30481 13.3202C4.3123 13.3052 4.32228 13.2877 4.33226 13.2703C4.39714 13.153 4.48199 13.0506 4.57932 12.9583C4.78145 12.7711 4.90373 12.4991 4.89126 12.1997C4.8688 11.6981 4.45953 11.2913 3.95793 11.2713C3.40143 11.2489 2.94475 11.6931 2.94475 12.2446C2.94475 12.5266 3.06454 12.7811 3.25669 12.9583C3.364 13.0581 3.46133 13.1729 3.5312 13.3027C3.54368 13.3276 3.55615 13.3501 3.56614 13.3676C3.66596 13.5847 3.72335 13.8268 3.72335 14.0838C3.72335 14.3408 3.70589 14.7975 3.34653 15.1344C3.10696 15.359 2.91481 15.6485 2.94725 16.0103C2.98468 16.4271 3.29163 16.7715 3.6984 16.8688C3.89804 16.9162 4.08271 16.8962 4.24991 16.8338C4.33725 16.8014 4.42709 16.7814 4.51942 16.7765C4.53689 16.7765 4.55187 16.7765 4.56434 16.7765C5.21567 16.7765 5.78964 17.1233 6.08162 17.6549C6.11905 17.7223 6.14151 17.7946 6.149 17.8695C6.2039 18.3561 6.61566 18.7329 7.11476 18.7329C7.23205 18.7329 7.34185 18.7105 7.44417 18.673C7.52652 18.6431 7.61137 18.6206 7.69871 18.6156C7.72367 18.6156 7.74363 18.6132 7.7611 18.6132C8.38498 18.6132 8.93399 18.95 9.23595 19.4516C9.23595 19.4541 9.24094 19.4591 9.24344 19.4641C9.29834 19.559 9.33827 19.6638 9.35823 19.7711C9.43809 20.2278 9.83488 20.5721 10.3115 20.5721C10.4313 20.5721 10.5436 20.5497 10.6484 20.5097C10.7457 20.4723 10.8481 20.4548 10.9529 20.4523C10.9579 20.4523 10.9628 20.4523 10.9678 20.4523C11.5867 20.4523 12.1183 20.7718 12.4177 21.2584C12.4202 21.2634 12.4227 21.2659 12.4252 21.2709C12.4901 21.3807 12.535 21.5005 12.56 21.6252C12.6498 22.0869 13.0616 22.4313 13.5532 22.4088C14.0548 22.3864 14.4616 21.9771 14.484 21.4755C14.5065 20.919 14.0623 20.4623 13.5108 20.4623ZM3.9205 9.53945C4.45704 9.53945 4.89375 9.10274 4.89375 8.5662C4.89375 8.02966 4.45704 7.59295 3.9205 7.59295C3.38396 7.59295 2.94725 8.02966 2.94725 8.5662C2.94725 9.10274 3.38396 9.53945 3.9205 9.53945ZM3.9205 5.86356C4.45704 5.86356 4.89375 5.42684 4.89375 4.8903C4.89375 4.35377 4.45704 3.91705 3.9205 3.91705C3.38396 3.91705 2.94725 4.35377 2.94725 4.8903C2.94725 5.42684 3.38396 5.86356 3.9205 5.86356Z" fill="#FF9800" />
+        <path d="M16.8376 18.3909C16.6479 18.3709 16.4658 18.3959 16.301 18.4558C16.2212 18.4857 16.1388 18.5107 16.0565 18.5306C15.9741 18.5506 15.8793 18.5681 15.8094 18.5681C15.3802 18.5681 15.0084 18.3235 14.8262 17.9642C14.7987 17.9118 14.7713 17.8194 14.7488 17.7421C14.7314 17.6822 14.7164 17.6198 14.7064 17.5574C14.6091 16.9834 14.1125 16.5467 13.5111 16.5467C13.3464 16.5467 13.1891 16.5816 13.0469 16.639C13.0219 16.649 12.9995 16.659 12.9745 16.669C12.8597 16.7089 12.7399 16.7314 12.6102 16.7314C12.1585 16.7314 11.7717 16.4594 11.5995 16.0726C11.5521 15.9653 11.5097 15.7257 11.5097 15.7257C11.4173 15.1492 10.9182 14.7075 10.3143 14.7075C10.1671 14.7075 10.0273 14.735 9.89755 14.7824C9.89755 14.7824 9.58811 14.8872 9.41841 14.8872C8.95175 14.8872 8.55247 14.5952 8.39275 14.186C8.35283 14.0836 8.3104 13.854 8.3104 13.854C8.258 13.577 8.11076 13.335 7.90363 13.1603C7.84624 13.1104 7.78884 13.058 7.73893 13.0006C7.68153 12.9357 7.61415 12.8558 7.57922 12.7959C7.48439 12.6337 7.43198 12.4466 7.43198 12.2469C7.43198 12.0124 7.50435 11.7952 7.62913 11.6156C7.65658 11.5781 7.7015 11.5257 7.74392 11.4808C7.79383 11.4284 7.84624 11.381 7.90114 11.3361C8.16566 11.114 8.33536 10.7821 8.33536 10.4077C8.33536 10.0334 8.16566 9.70151 7.90114 9.47941C7.84125 9.4295 7.78634 9.37959 7.73144 9.32219C7.71148 9.29973 7.69151 9.27977 7.67654 9.2623C7.52431 9.07264 7.43198 8.83057 7.43198 8.56854C7.43198 8.3714 7.48439 8.18423 7.57672 8.02452C7.61415 7.95714 7.69151 7.8673 7.7539 7.79992C7.79882 7.75001 7.84873 7.7026 7.90114 7.66018C8.18563 7.4231 8.35782 7.05626 8.33286 6.65199C8.29293 6.03559 7.78634 5.54398 7.16995 5.51902C6.47869 5.49157 5.90722 6.04558 5.90722 6.73184C5.90722 7.10368 6.07691 7.43807 6.34144 7.66018C6.39385 7.70509 6.44625 7.75251 6.49367 7.80242C6.54607 7.85732 6.60596 7.9272 6.63841 7.9796C6.74571 8.1493 6.8106 8.35393 6.8106 8.57104C6.8106 8.83307 6.71826 9.07513 6.56354 9.26479C6.54857 9.28226 6.5311 9.30223 6.51113 9.32469C6.45873 9.37959 6.40133 9.43199 6.34144 9.4819C6.07691 9.704 5.90722 10.0359 5.90722 10.4102C5.90722 10.7846 6.07691 11.119 6.34394 11.3411C6.39884 11.386 6.44875 11.4334 6.49866 11.4833C6.53359 11.5207 6.56853 11.5607 6.59099 11.5906C6.72824 11.7753 6.8106 12.0024 6.8106 12.2494C6.8106 12.479 6.74072 12.6911 6.62094 12.8683C6.59349 12.9107 6.54108 12.9681 6.49866 13.0156C6.45124 13.068 6.39884 13.1154 6.34394 13.1603C6.05945 13.3974 5.88726 13.7617 5.91221 14.1685C5.95214 14.7799 6.45124 15.2715 7.06264 15.3014C7.24482 15.3114 7.4195 15.279 7.57922 15.2141C7.68403 15.1717 7.79133 15.1392 7.90363 15.1268C7.94855 15.1218 7.99347 15.1168 8.02591 15.1168C8.40773 15.1168 8.74462 15.3114 8.94426 15.6084C8.96173 15.6358 8.9817 15.6733 9.00166 15.7157C9.06155 15.843 9.10148 15.9802 9.12394 16.12C9.21378 16.6989 9.71538 17.1431 10.3218 17.1431C10.4765 17.1431 10.6213 17.1132 10.756 17.0608C10.8508 17.0234 10.9482 16.9959 11.048 16.9809C11.1104 16.9709 11.1753 16.966 11.2202 16.966C11.617 16.966 11.9663 17.1756 12.161 17.4925C12.1884 17.5349 12.2159 17.6023 12.2408 17.6647C12.2808 17.7645 12.3057 17.8693 12.3232 17.9766C12.4205 18.5481 12.9171 18.9823 13.5185 18.9823C13.6708 18.9823 13.818 18.9524 13.9528 18.9025C14.0651 18.8601 14.1824 18.8301 14.3021 18.8126C14.3446 18.8052 14.387 18.8027 14.4194 18.8027C14.8611 18.8027 15.2405 19.0622 15.4176 19.4365C15.4376 19.4789 15.4576 19.5438 15.475 19.6037C15.495 19.6711 15.5075 19.741 15.52 19.8108C15.6148 20.3848 16.1139 20.824 16.7178 20.824C17.4165 20.824 17.978 20.2326 17.9281 19.5239C17.8882 18.9399 17.4265 18.4658 16.8476 18.4034M7.11755 4.26378C7.78634 4.26378 8.33037 3.71975 8.33037 3.05096C8.33037 2.38216 7.78634 1.83813 7.11755 1.83813C6.44875 1.83813 5.90472 2.38216 5.90472 3.05096C5.90472 3.71975 6.44875 4.26378 7.11755 4.26378Z" fill="#FF9800" />
+        <path d="M0.7237 14.815C1.12298 14.815 1.4474 14.4856 1.4474 14.0813C1.4474 13.6771 1.12298 13.3476 0.7237 13.3476C0.324417 13.3476 0 13.6771 0 14.0813C0 14.4856 0.324417 14.815 0.7237 14.815ZM0.7237 11.1391C1.12298 11.1391 1.4474 10.8097 1.4474 10.4054C1.4474 10.0012 1.12298 9.67175 0.7237 9.67175C0.324417 9.67175 0 10.0012 0 10.4054C0 10.8097 0.324417 11.1391 0.7237 11.1391ZM0.7237 7.46321C1.12298 7.46321 1.4474 7.13381 1.4474 6.72953C1.4474 6.32526 1.12298 5.99585 0.7237 5.99585C0.324417 5.99585 0 6.32526 0 6.72953C0 7.13381 0.324417 7.46321 0.7237 7.46321ZM10.314 22.5411C10.2865 22.5411 10.0619 22.5561 9.97957 22.5561C9.06122 22.5561 8.26765 22.0495 7.86837 21.3058C7.83842 21.2509 7.77104 21.1262 7.77104 21.1262C7.65625 20.8766 7.40669 20.7019 7.11722 20.7019C7.09226 20.7019 6.87016 20.7244 6.78032 20.7244C5.89441 20.7244 5.1233 20.2502 4.71154 19.549C4.66163 19.4642 4.56929 19.277 4.56929 19.277C4.452 19.0324 4.20744 18.8627 3.92046 18.8627C3.90049 18.8627 3.66841 18.8827 3.57109 18.8827C2.64275 18.8827 1.84169 18.3636 1.4474 17.6075C1.42744 17.5701 1.40997 17.5326 1.39499 17.4927C1.29018 17.2182 1.03065 17.0235 0.7237 17.0235C0.324417 17.0235 0 17.3529 0 17.7572C0 18.1615 0.324417 18.4909 0.7237 18.4909C0.756142 18.4909 0.985729 18.4734 1.06559 18.4734C1.90907 18.4734 2.65024 18.9027 3.07198 19.549C3.14186 19.6563 3.25915 19.8909 3.25915 19.8909C3.37144 20.1479 3.62349 20.3276 3.92046 20.3276C3.94791 20.3276 4.175 20.3151 4.25735 20.3151C5.15574 20.3151 5.93434 20.7993 6.34111 21.5155C6.38104 21.5853 6.46339 21.7401 6.46339 21.7401C6.57818 21.9921 6.82773 22.1668 7.11971 22.1668C7.14467 22.1668 7.36926 22.1518 7.45411 22.1518C8.33004 22.1518 9.09616 22.6135 9.51042 23.3023C9.56532 23.3921 9.66514 23.5917 9.66514 23.5917C9.78243 23.8363 10.027 24.0085 10.314 24.0085C10.7133 24.0085 11.0377 23.6791 11.0377 23.2748C11.0377 22.8705 10.7133 22.5411 10.314 22.5411Z" fill="#FF9800" />
+        <path d="M10.3141 2.41734C10.9829 2.41734 11.527 1.87332 11.527 1.20452C11.527 0.535722 10.9829 -0.00830078 10.3141 -0.00830078C9.64534 -0.00830078 9.10132 0.535722 9.10132 1.20452C9.10132 1.87332 9.64534 2.41734 10.3141 2.41734Z" fill="#FF6633" />
+        <path d="M10.3141 6.09556C10.9829 6.09556 11.527 5.55154 11.527 4.88274C11.527 4.21394 10.9829 3.66992 10.3141 3.66992C9.64534 3.66992 9.10132 4.21394 9.10132 4.88274C9.10132 5.55154 9.64534 6.09556 10.3141 6.09556Z" fill="#FF6633" />
+        <path d="M10.3141 9.77159C10.9829 9.77159 11.527 9.22757 11.527 8.55877C11.527 7.88997 10.9829 7.34595 10.3141 7.34595C9.64534 7.34595 9.10132 7.88997 9.10132 8.55877C9.10132 9.22757 9.64534 9.77159 10.3141 9.77159Z" fill="#FF6633" />
+        <path d="M10.3141 13.4474C10.9829 13.4474 11.527 12.9034 11.527 12.2346C11.527 11.5658 10.9829 11.0218 10.3141 11.0218C9.64534 11.0218 9.10132 11.5658 9.10132 12.2346C9.10132 12.9034 9.64534 13.4474 10.3141 13.4474Z" fill="#FF6633" />
+        <path d="M13.5107 4.25639C14.1795 4.25639 14.7236 3.71237 14.7236 3.04357C14.7236 2.37477 14.1795 1.83075 13.5107 1.83075C12.8419 1.83075 12.2979 2.37477 12.2979 3.04357C12.2979 3.71237 12.8419 4.25639 13.5107 4.25639Z" fill="#FF6633" />
+        <path d="M13.5107 7.93223C14.1795 7.93223 14.7236 7.38821 14.7236 6.71941C14.7236 6.05061 14.1795 5.50659 13.5107 5.50659C12.8419 5.50659 12.2979 6.05061 12.2979 6.71941C12.2979 7.38821 12.8419 7.93223 13.5107 7.93223Z" fill="#FF6633" />
+        <path d="M13.5107 11.6107C14.1795 11.6107 14.7236 11.0667 14.7236 10.3979C14.7236 9.72908 14.1795 9.18506 13.5107 9.18506C12.8419 9.18506 12.2979 9.72908 12.2979 10.3979C12.2979 11.0667 12.8419 11.6107 13.5107 11.6107Z" fill="#FF6633" />
+        <path d="M13.5107 15.2865C14.1795 15.2865 14.7236 14.7425 14.7236 14.0737C14.7236 13.4049 14.1795 12.8609 13.5107 12.8609C12.8419 12.8609 12.2979 13.4049 12.2979 14.0737C12.2979 14.7425 12.8419 15.2865 13.5107 15.2865Z" fill="#FF6633" />
+        <path d="M16.7103 6.09556C17.3791 6.09556 17.9231 5.55154 17.9231 4.88274C17.9231 4.21394 17.3791 3.66992 16.7103 3.66992C16.0415 3.66992 15.4974 4.21394 15.4974 4.88274C15.4974 5.55154 16.0415 6.09556 16.7103 6.09556Z" fill="#FF6633" />
+        <path d="M16.7103 9.77159C17.3791 9.77159 17.9231 9.22757 17.9231 8.55877C17.9231 7.88997 17.3791 7.34595 16.7103 7.34595C16.0415 7.34595 15.4974 7.88997 15.4974 8.55877C15.4974 9.22757 16.0415 9.77159 16.7103 9.77159Z" fill="#FF6633" />
+        <path d="M16.7103 13.4474C17.3791 13.4474 17.9231 12.9034 17.9231 12.2346C17.9231 11.5658 17.3791 11.0218 16.7103 11.0218C16.0415 11.0218 15.4974 11.5658 15.4974 12.2346C15.4974 12.9034 16.0415 13.4474 16.7103 13.4474Z" fill="#FF6633" />
+        <path d="M16.7103 17.1258C17.3791 17.1258 17.9231 16.5818 17.9231 15.913C17.9231 15.2442 17.3791 14.7001 16.7103 14.7001C16.0415 14.7001 15.4974 15.2442 15.4974 15.913C15.4974 16.5818 16.0415 17.1258 16.7103 17.1258Z" fill="#FF6633" />
+        <path d="M19.9065 7.93223C20.5753 7.93223 21.1194 7.38821 21.1194 6.71941C21.1194 6.05061 20.5753 5.50659 19.9065 5.50659C19.2377 5.50659 18.6937 6.05061 18.6937 6.71941C18.6937 7.38821 19.2377 7.93223 19.9065 7.93223Z" fill="#FF6633" />
+        <path d="M19.9065 11.6107C20.5753 11.6107 21.1194 11.0667 21.1194 10.3979C21.1194 9.72908 20.5753 9.18506 19.9065 9.18506C19.2377 9.18506 18.6937 9.72908 18.6937 10.3979C18.6937 11.0667 19.2377 11.6107 19.9065 11.6107Z" fill="#FF6633" />
+        <path d="M19.9065 15.2865C20.5753 15.2865 21.1194 14.7425 21.1194 14.0737C21.1194 13.4049 20.5753 12.8609 19.9065 12.8609C19.2377 12.8609 18.6937 13.4049 18.6937 14.0737C18.6937 14.7425 19.2377 15.2865 19.9065 15.2865Z" fill="#FF6633" />
+        <path d="M19.9065 18.9624C20.5753 18.9624 21.1194 18.4184 21.1194 17.7496C21.1194 17.0808 20.5753 16.5367 19.9065 16.5367C19.2377 16.5367 18.6937 17.0808 18.6937 17.7496C18.6937 18.4184 19.2377 18.9624 19.9065 18.9624Z" fill="#FF6633" />
+        <path d="M81.6432 10.8509H78.6062C77.8051 10.8509 77.1513 10.1996 77.1513 9.39606C77.1513 8.5925 77.8026 7.94117 78.6062 7.94117H81.9801C82.4318 7.94117 82.8011 7.57184 82.8011 7.12015C82.8011 6.66846 82.4318 6.29912 81.9801 6.29912H78.6062C76.8992 6.29912 75.5092 7.68913 75.5092 9.39606C75.5092 11.103 76.8992 12.493 78.6062 12.493H81.6432C82.6389 12.493 83.45 13.304 83.45 14.2998C83.45 15.2955 82.6389 16.1065 81.6432 16.1065H76.3303C75.8786 16.1065 75.5092 16.4733 75.5092 16.9275C75.5092 17.3817 75.8761 17.7486 76.3303 17.7486H81.6432C83.5448 17.7486 85.092 16.2013 85.092 14.3022C85.092 12.4032 83.5448 10.8534 81.6432 10.8534V10.8509ZM60.334 8.12834H63.1864C63.6381 8.12834 64.0074 7.759 64.0074 7.30731C64.0074 6.85562 63.6406 6.48629 63.1864 6.48629H60.334C57.2296 6.48629 54.7041 9.01175 54.7041 12.1162C54.7041 15.2206 57.2296 17.7461 60.334 17.7461H63.1864C63.6381 17.7461 64.0074 17.3767 64.0074 16.925C64.0074 16.4733 63.6406 16.104 63.1864 16.104H60.334C58.1354 16.104 56.3462 14.3147 56.3462 12.1162C56.3462 9.91762 58.1354 8.12834 60.334 8.12834ZM70.1189 11.9739L74.4412 7.65169C74.7606 7.33227 74.7606 6.8107 74.4412 6.49128C74.2814 6.33157 74.0718 6.25171 73.8597 6.25171C73.6476 6.25171 73.4405 6.33157 73.2782 6.49128L68.377 11.3925C68.0576 11.7119 68.0576 12.2335 68.377 12.5529L73.3257 17.5015C73.6351 17.8109 74.1766 17.8109 74.4861 17.5015C74.8055 17.1821 74.8055 16.6605 74.4861 16.3411L70.1164 11.9714L70.1189 11.9739ZM108.073 7.91372H110.783V16.9225C110.783 17.3742 111.153 17.7436 111.604 17.7436C112.056 17.7436 112.425 17.3742 112.425 16.9225V7.91372H115.136C115.587 7.91372 115.957 7.54439 115.957 7.0927C115.957 6.64101 115.587 6.27167 115.136 6.27167H108.073C107.622 6.27167 107.252 6.64101 107.252 7.0927C107.252 7.54439 107.619 7.91372 108.073 7.91372ZM33.2576 10.8485H30.2206C29.4195 10.8485 28.7657 10.1971 28.7657 9.39356C28.7657 8.59001 29.417 7.93868 30.2206 7.93868H33.597C34.0487 7.93868 34.4181 7.56934 34.4181 7.11765C34.4181 6.66596 34.0487 6.29663 33.597 6.29663H30.2206C28.5137 6.29663 27.1237 7.68663 27.1237 9.39356C27.1237 11.1005 28.5137 12.4905 30.2206 12.4905H33.2576C34.2534 12.4905 35.0644 13.3015 35.0644 14.2973C35.0644 15.293 34.2534 16.104 33.2576 16.104H27.9447C27.493 16.104 27.1237 16.4708 27.1237 16.925C27.1237 17.3792 27.493 17.7461 27.9447 17.7461H33.2576C35.1592 17.7461 36.7064 16.1988 36.7064 14.2998C36.7064 12.4007 35.1592 10.8509 33.2576 10.8509V10.8485ZM45.9299 7.0927C45.9299 6.64101 45.5605 6.27167 45.1089 6.27167H36.4294C35.9778 6.27167 35.6084 6.64101 35.6084 7.0927C35.6084 7.54439 35.9753 7.91372 36.4294 7.91372H38.6954V16.9225C38.6954 17.3742 39.0647 17.7436 39.5164 17.7436C39.9681 17.7436 40.3374 17.3742 40.3374 16.9225V7.91372H45.1089C45.5605 7.91372 45.9299 7.54439 45.9299 7.0927ZM52.1737 6.39645L52.1412 6.40893L52.1088 6.42639C52.009 6.47381 51.9341 6.52372 51.8717 6.58611L42.1142 16.3436C41.7948 16.663 41.7948 17.1846 42.1142 17.504C42.4237 17.8134 42.9652 17.8134 43.2746 17.504L51.6421 9.13653L51.6496 16.7853C51.6496 17.237 52.0189 17.6038 52.4706 17.6038C52.9248 17.6038 53.2917 17.2345 53.2917 16.7828L53.2817 7.16008C53.2817 6.61356 52.7451 6.17934 52.1737 6.39645ZM66.2134 6.33905C65.7618 6.33905 65.3924 6.70589 65.3924 7.16008L65.3824 16.7828C65.3824 17.2345 65.7493 17.6038 66.201 17.6038C66.6551 17.6038 67.022 17.237 67.022 16.7853L67.032 7.16257C67.032 6.94297 66.9471 6.73833 66.7924 6.58112C66.6377 6.4264 66.4305 6.34155 66.2134 6.33905ZM101.962 6.26668C98.7974 6.26668 96.222 8.84206 96.222 12.0039C96.222 15.1657 98.7974 17.7411 101.962 17.7411C105.126 17.7411 107.699 15.1682 107.699 12.0039C107.699 8.83956 105.126 6.26668 101.962 6.26668ZM101.962 16.1015C99.7033 16.1015 97.8641 14.2648 97.8641 12.0039C97.8641 9.74294 99.7033 7.90624 101.962 7.90624C104.22 7.90624 106.059 9.74294 106.059 12.0039C106.059 14.2648 104.223 16.1015 101.962 16.1015ZM90.7194 6.29413H86.9886C86.5369 6.29413 86.1676 6.66347 86.1676 7.11516V16.92C86.1676 17.3717 86.5369 17.7411 86.9886 17.7411C87.4403 17.7411 87.8096 17.3717 87.8096 16.92V15.1333H90.7444C93.155 15.1333 95.139 13.1518 95.139 10.7162C95.139 8.28056 93.1575 6.29663 90.7194 6.29663V6.29413ZM90.7369 13.4912H87.8096V7.93618H90.7194C92.2517 7.93618 93.4969 9.18145 93.4969 10.7137C93.4969 12.2459 92.2591 13.4812 90.7369 13.4912Z" fill={theme.color.light.contrastText} />
+      </g>
+      <path fillRule="evenodd" clipRule="evenodd" d="M130.898 7.0744C130.898 6.85423 130.812 6.64811 130.657 6.49235C130.502 6.33659 130.296 6.2511 130.075 6.2511C129.622 6.2511 129.252 6.62 129.252 7.0744L129.258 11.1698L123.613 11.1827L123.607 7.07674C123.607 6.85657 123.523 6.65045 123.367 6.49469C123.211 6.33893 123.005 6.25344 122.785 6.25344H122.784C122.331 6.25344 121.961 6.62234 121.961 7.07674L121.975 16.9247C121.975 17.3791 122.344 17.7492 122.797 17.7492C123.251 17.7492 123.621 17.3803 123.621 16.927L123.615 12.8316L129.26 12.8187L129.266 16.9247C129.266 17.3791 129.635 17.7492 130.088 17.7492C130.543 17.7492 130.913 17.3803 130.913 16.927L130.898 7.07791V7.0744ZM150.04 9.36448C150.04 9.92629 149.888 10.4518 149.626 10.9072C151.175 11.251 152.337 12.6325 152.337 14.2832C152.337 16.1909 150.785 17.7427 148.878 17.7427H144.228H144.219H144.209C143.755 17.7427 143.385 17.3738 143.385 16.9194V7.08196C143.385 6.62874 143.755 6.25867 144.209 6.25867H146.934C148.647 6.25867 150.04 7.6523 150.04 9.36448ZM146.934 7.90526C147.738 7.90526 148.393 8.55992 148.393 9.36448C148.393 10.169 147.738 10.8237 146.934 10.8237H145.033V7.90526H146.074H146.932H146.934ZM148.879 16.0973H145.033V12.4726H148.879C149.879 12.4726 150.692 13.2854 150.692 14.2855C150.692 15.2857 149.879 16.0973 148.879 16.0973ZM132.679 13.2669C132.679 15.7321 134.684 17.7371 137.149 17.7371H137.151C139.615 17.7371 141.62 15.7321 141.62 13.2669V7.08455C141.62 6.62781 141.251 6.25891 140.795 6.25891C140.338 6.25891 139.969 6.62899 139.969 7.08455V13.2669C139.969 14.8221 138.705 16.087 137.15 16.087C135.595 16.087 134.33 14.8221 134.33 13.2669V7.08455C134.33 6.62781 133.961 6.25891 133.504 6.25891C133.048 6.25891 132.679 6.62899 132.679 7.08455V13.2669Z" fill="#C44100" />
+      <defs>
+        <clipPath id="clip0_7624_11282">
+          <rect width="115.956" height="24.0168" fill="white" transform="translate(0 -0.00836182)" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}

package/src/svg/Logo.tsx

@@ -0,0 +1,16 @@
+/* eslint-disable max-len */
+
+import { theme } from '@stack-spot/portal-theme'
+
+/**
+ * This is the Stackspot logo with both orange box and text. This is the original logo, doesn't include the name of any specific portal.
+ */
+
+export const Logo = ({ style, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div style={{ display: 'flex', ...style }} {...props}>
+    <svg width="113" height="25" viewBox="0 0 113 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M39.9657 6.4662H38.1056V7.95275C38.1056 8.71705 37.6951 9.12765 36.911 9.12765H36.206V10.9481H37.8311V15.7046C37.8311 17.8763 39.142 19.1501 40.9427 19.1501C41.472 19.1501 41.8628 19.0512 42.1176 18.9547V16.9982C41.9222 17.0971 41.6872 17.1342 41.4325 17.1342C40.5519 17.1342 39.9657 16.6247 39.9657 15.529V10.9481H42.1176V9.0114H39.9657V6.4662ZM50.7228 9.9612C50.703 10.2704 50.3048 10.3817 50.1291 10.1245C49.679 9.46405 48.8479 8.77641 47.3391 8.77641C44.8928 8.77641 42.778 10.9481 42.778 13.9633C42.778 16.9784 44.8928 19.1501 47.3391 19.1501C48.8256 19.1501 49.6666 18.4204 50.1242 17.7452C50.2973 17.4904 50.698 17.6067 50.7178 17.9134L50.7821 18.9151H52.4517V9.0114H50.7821L50.7203 9.9612H50.7228ZM47.5765 17.154C46.1469 17.154 44.9151 15.8629 44.9151 13.9633C44.9151 12.0637 46.1493 10.7725 47.5765 10.7725C49.0037 10.7725 50.238 12.0637 50.238 13.9633C50.238 15.8629 49.0037 17.154 47.5765 17.154ZM58.7962 10.7725C60.206 10.7725 60.9876 11.8485 61.2226 12.6523H63.3745C62.9837 10.7156 61.2597 8.77641 58.7937 8.77641C56.1124 8.77641 53.8814 11.0669 53.8814 13.9633C53.8814 16.8597 56.1124 19.1501 58.7937 19.1501C61.2597 19.1501 62.9837 17.1936 63.3745 15.2742H61.2226C60.9876 16.0756 60.2035 17.154 58.7962 17.154C57.27 17.154 56.016 15.8431 56.016 13.9633C56.016 12.0834 57.2676 10.7725 58.7962 10.7725ZM64.8116 18.9151H66.966V5.21217H64.8116V18.9151ZM90.5183 8.77393C89.1999 8.77393 88.3862 9.50115 87.9088 10.1912C87.6961 10.498 87.2162 10.3718 87.1791 10.0008L87.0752 9.00893H85.47V22.4374H87.6219V18.4946C87.6219 18.1583 88.0374 17.99 88.265 18.2374C88.6978 18.7098 89.4003 19.1501 90.5208 19.1501C92.967 19.1501 95.0818 16.9784 95.0818 13.9633C95.0818 10.9481 92.967 8.77641 90.5208 8.77641L90.5183 8.77393ZM90.2833 17.154C88.8536 17.154 87.6219 15.8629 87.6219 13.9633C87.6219 12.0637 88.8561 10.7725 90.2833 10.7725C91.7105 10.7725 92.9448 12.0637 92.9448 13.9633C92.9448 15.8629 91.713 17.154 90.2833 17.154ZM100.924 8.77393C98.2429 8.77393 96.0118 11.0644 96.0118 13.9608C96.0118 16.8572 98.2429 19.1476 100.924 19.1476C103.605 19.1476 105.836 16.8374 105.836 13.9608C105.836 11.0842 103.605 8.77393 100.924 8.77393ZM100.924 17.154C99.398 17.154 98.144 15.8431 98.144 13.9633C98.144 12.0834 99.3955 10.7725 100.924 10.7725C102.453 10.7725 103.704 12.0834 103.704 13.9633C103.704 15.8431 102.453 17.154 100.924 17.154ZM112.136 10.9481V9.0114H109.984V6.4662H108.124V7.95275C108.124 8.71705 107.714 9.12765 106.93 9.12765H106.225V10.9481H107.85V15.7046C107.85 17.8763 109.161 19.1501 110.961 19.1501C111.491 19.1501 111.882 19.0512 112.136 18.9547V16.9982C111.941 17.0971 111.706 17.1342 111.451 17.1342C110.571 17.1342 109.982 16.6247 109.982 15.529V10.9481H112.134H112.136ZM73.8942 9.00893H71.4083L68.2052 13.0629C67.7723 13.57 67.7897 14.0399 68.2052 14.5643L71.6433 18.9127H74.3245L70.0776 13.706L73.8942 9.00893ZM28.2266 8.8531C28.2266 7.81672 29.028 7.03263 30.4973 7.03263C31.8799 7.03263 32.763 7.89092 32.9064 9.12765H35.1771C34.9841 6.78528 33.2255 4.97717 30.4948 4.97717C27.7641 4.97717 25.9535 6.64181 25.9535 8.81351C25.9535 13.6862 33.1167 12.2591 33.1167 15.2915C33.1167 16.2908 32.3153 17.0922 30.6704 17.0922C29.0256 17.0922 28.0486 16.1127 27.91 14.7053H25.6394C25.7557 17.2703 27.6157 19.1476 30.6506 19.1476C33.6856 19.1476 35.3873 17.4632 35.3873 15.2322C35.3873 10.3001 28.2242 11.8262 28.2242 8.85062L28.2266 8.8531ZM77.08 8.8531C77.08 7.81672 77.8814 7.03263 79.3506 7.03263C80.7333 7.03263 81.6163 7.89092 81.7598 9.12765H84.0329C83.8399 6.78528 82.0813 4.97717 79.3506 4.97717C76.6199 4.97717 74.8093 6.64181 74.8093 8.81351C74.8093 13.6862 81.9725 12.2591 81.9725 15.2915C81.9725 16.2908 81.1711 17.0922 79.5262 17.0922C77.8814 17.0922 76.9044 16.1127 76.7658 14.7053H74.4952C74.6115 17.2703 76.4715 19.1476 79.5064 19.1476C82.5414 19.1476 84.2431 17.4632 84.2431 15.2322C84.2431 10.3001 77.08 11.8262 77.08 8.85062V8.8531Z" fill={theme.color.light.contrastText}/>
+      <path d="M19.1021 8.63793C20.0494 8.63793 20.8162 7.87115 20.8162 6.92381C20.8162 5.97647 20.0494 5.20972 19.1021 5.20972C18.1547 5.20972 17.388 5.97647 17.388 6.92381C17.388 7.87115 18.1547 8.63793 19.1021 8.63793ZM19.1021 15.4968C18.1547 15.4968 17.388 16.2636 17.388 17.211C17.388 18.1583 18.1547 18.925 19.1021 18.925C20.0494 18.925 20.8162 18.1583 20.8162 17.211C20.8162 16.2636 20.0494 15.4968 19.1021 15.4968ZM10.4153 20.6392C9.46794 20.6392 8.70117 21.4059 8.70117 22.3533C8.70117 23.3006 9.46794 24.0674 10.4153 24.0674C11.3626 24.0674 12.1294 23.3006 12.1294 22.3533C12.1294 21.4059 11.3626 20.6392 10.4153 20.6392ZM18.501 13.6714C19.1565 13.9163 19.9282 13.7456 20.4155 13.1718C20.9967 12.4817 20.9324 11.428 20.272 10.8121C19.7847 10.3595 19.107 10.2432 18.5208 10.4559C18.0805 10.6142 17.5957 10.5771 17.1926 10.3397C16.7869 10.0997 16.5247 9.6842 16.4505 9.21919C16.3763 8.77149 16.1265 8.35348 15.7209 8.07893C15.2534 7.76232 14.6869 7.7079 14.1923 7.88351C13.747 8.03934 13.2573 8.01215 12.8492 7.77222C12.441 7.53229 12.1813 7.11427 12.1047 6.64678C12.028 6.18919 11.7683 5.76377 11.3478 5.48922C10.6008 5.00442 9.57677 5.18744 9.04498 5.89979C8.45382 6.68883 8.64923 7.80189 9.45557 8.34853C9.92306 8.66513 10.4895 8.71955 10.9842 8.54394C11.4294 8.38811 11.9191 8.41531 12.3273 8.65523C12.7329 8.89516 12.9951 9.31071 13.0718 9.77819C13.146 10.2259 13.3958 10.6439 13.8014 10.9185C14.2689 11.2351 14.8354 11.2895 15.33 11.1139C15.3622 11.1015 15.8519 10.8764 16.1018 10.8764C16.7597 10.8764 17.294 11.4107 17.294 12.0686C17.294 12.7266 16.7597 13.2608 16.1018 13.2608C15.8519 13.2608 15.3647 13.0333 15.3325 13.0234C14.8452 12.8502 14.2887 12.8997 13.8237 13.2039C13.4032 13.4785 13.1485 13.9064 13.0742 14.3665C12.9976 14.829 12.7379 15.2445 12.3297 15.4869C11.9241 15.7269 11.4343 15.7566 10.9866 15.5983C10.492 15.4251 9.92553 15.4795 9.45805 15.7936C8.6517 16.3403 8.4563 17.4533 9.04745 18.2424C9.58172 18.9547 10.6033 19.1378 11.3502 18.653C11.7732 18.3784 12.0329 17.953 12.1071 17.4954C12.1838 17.0279 12.4435 16.6124 12.8516 16.37C13.2573 16.13 13.8633 16.1746 14.1898 16.2537C14.6919 16.3749 15.2336 16.3774 15.6986 16.0731C16.1191 15.7986 16.3763 15.3707 16.4505 14.9106C16.5247 14.4481 16.7869 14.035 17.1926 13.7951C17.5883 13.5601 18.0706 13.5082 18.501 13.6714ZM9.8167 13.6714C10.4722 13.9163 11.2439 13.7456 11.7312 13.1718C12.3124 12.4817 12.2481 11.428 11.5877 10.8121C11.1004 10.3595 10.4227 10.2432 9.83649 10.4559C9.39621 10.6142 8.91141 10.5771 8.50824 10.3397C8.10259 10.0997 7.8404 9.6842 7.7662 9.21919C7.76373 9.19693 7.46691 7.78705 6.07435 7.78705C5.12702 7.78705 4.36024 8.55383 4.36024 9.50117C4.36024 10.4485 5.12702 11.2153 6.07435 11.2153C6.35633 11.2153 6.62099 11.146 6.85597 11.0248C7.02911 10.958 7.26409 10.8764 7.41497 10.8764C8.07291 10.8764 8.60718 11.4107 8.60718 12.0686C8.60718 12.7266 8.07291 13.2608 7.41497 13.2608C7.24925 13.2608 6.98211 13.1619 6.80897 13.0926C6.75208 13.0704 6.36869 12.9244 6.07188 12.9244C5.12454 12.9244 4.35777 13.6912 4.35777 14.6385C4.35777 15.5859 5.12454 16.3526 6.07188 16.3526C6.9178 16.3526 7.62027 15.7392 7.75878 14.9304C7.75878 14.923 7.76373 14.9156 7.7662 14.9081C7.8404 14.4456 8.10259 14.0325 8.50824 13.7926C8.90399 13.5576 9.38632 13.5057 9.8167 13.6689V13.6714ZM14.7587 18.0668C13.8113 18.0668 13.0446 18.8335 13.0446 19.7809C13.0446 20.7282 13.8113 21.495 14.7587 21.495C15.706 21.495 16.4728 20.7282 16.4728 19.7809C16.4728 18.8335 15.706 18.0668 14.7587 18.0668ZM10.4153 3.4956C11.3626 3.4956 12.1294 2.72884 12.1294 1.7815C12.1294 0.834169 11.3626 0.0673828 10.4153 0.0673828C9.46794 0.0673828 8.70117 0.834169 8.70117 1.7815C8.70117 2.72884 9.46794 3.4956 10.4153 3.4956ZM6.07435 18.0668C5.12702 18.0668 4.36024 18.8335 4.36024 19.7809C4.36024 20.7282 5.12702 21.495 6.07435 21.495C7.02169 21.495 7.78846 20.7282 7.78846 19.7809C7.78846 18.8335 7.02169 18.0668 6.07435 18.0668ZM14.7587 6.068C15.706 6.068 16.4728 5.30122 16.4728 4.35388C16.4728 3.40654 15.706 2.63979 14.7587 2.63979C13.8113 2.63979 13.0446 3.40654 13.0446 4.35388C13.0446 5.30122 13.8113 6.068 14.7587 6.068ZM6.07435 6.068C7.02169 6.068 7.78846 5.30122 7.78846 4.35388C7.78846 3.40654 7.02169 2.63979 6.07435 2.63979C5.12702 2.63979 4.36024 3.40654 4.36024 4.35388C4.36024 5.30122 5.12702 6.068 6.07435 6.068ZM1.73095 5.20972C0.783619 5.20972 0.0168457 5.97647 0.0168457 6.92381C0.0168457 7.87115 0.783619 8.63793 1.73095 8.63793C2.67829 8.63793 3.44506 7.87115 3.44506 6.92381C3.44506 5.97647 2.67829 5.20972 1.73095 5.20972ZM1.73095 15.4968C0.783619 15.4968 0.0168457 16.2636 0.0168457 17.211C0.0168457 18.1583 0.783619 18.925 1.73095 18.925C2.67829 18.925 3.44506 18.1583 3.44506 17.211C3.44506 16.2636 2.67829 15.4968 1.73095 15.4968ZM1.73095 10.352C0.783619 10.352 0.0168457 11.1188 0.0168457 12.0661C0.0168457 13.0135 0.783619 13.7803 1.73095 13.7803C2.67829 13.7803 3.44506 13.0135 3.44506 12.0661C3.44506 11.1188 2.67829 10.352 1.73095 10.352Z" fill="#FF6900"/>
+    </svg>
+  </div>
+)

package/src/svg/MiniLogo.tsx

@@ -0,0 +1,12 @@
+ 
+/**
+ * This is the Stackspot logo without the text part, i.e. only the orange box.
+ */
+export const MiniLogo = ({ className, style }: { className?: string, style?: React.CSSProperties }) => (
+  <svg width="40" height="47" viewBox="0 0 40 47" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} style={style}>
+    <path
+      d="M36.7035 16.4824C38.5254 16.4824 40 15.0077 40 13.1859C40 11.364 38.5254 9.88942 36.7035 9.88942C34.8817 9.88942 33.4071 11.364 33.4071 13.1859C33.4071 15.0077 34.8817 16.4824 36.7035 16.4824ZM36.7035 29.673C34.8817 29.673 33.4071 31.1476 33.4071 32.9695C33.4071 34.7913 34.8817 36.2659 36.7035 36.2659C38.5254 36.2659 40 34.7913 40 32.9695C40 31.1476 38.5254 29.673 36.7035 29.673ZM19.9976 39.5624C18.1758 39.5624 16.7012 41.037 16.7012 42.8588C16.7012 44.6807 18.1758 46.1553 19.9976 46.1553C21.8195 46.1553 23.2941 44.6807 23.2941 42.8588C23.2941 41.037 21.8195 39.5624 19.9976 39.5624ZM35.5476 26.1624C36.8082 26.6334 38.2923 26.3051 39.2294 25.2016C40.3472 23.8744 40.2236 21.8481 38.9535 20.6636C38.0164 19.7931 36.713 19.5695 35.5857 19.9786C34.739 20.283 33.8066 20.2117 33.0313 19.755C32.2512 19.2936 31.7469 18.4945 31.6042 17.6002C31.4615 16.7392 30.9811 15.9353 30.201 15.4073C29.3019 14.7984 28.2126 14.6938 27.2613 15.0315C26.405 15.3312 25.4632 15.2789 24.6783 14.8175C23.8934 14.3561 23.394 13.5521 23.2465 12.6531C23.0991 11.7731 22.5996 10.955 21.7909 10.4269C20.3544 9.49461 18.3851 9.84657 17.3624 11.2165C16.2255 12.734 16.6013 14.8745 18.152 15.9258C19.051 16.5347 20.1403 16.6393 21.0917 16.3016C21.9479 16.0019 22.8898 16.0542 23.6746 16.5156C24.4548 16.977 24.959 17.7762 25.1064 18.6752C25.2491 19.5362 25.7296 20.3401 26.5097 20.8681C27.4087 21.477 28.498 21.5817 29.4494 21.2439C29.5112 21.2201 30.4531 20.7872 30.9335 20.7872C32.1988 20.7872 33.2263 21.8147 33.2263 23.08C33.2263 24.3454 32.1988 25.3728 30.9335 25.3728C30.4531 25.3728 29.516 24.9352 29.4542 24.9162C28.5171 24.5832 27.4468 24.6783 26.5525 25.2634C25.7438 25.7914 25.2539 26.6144 25.1112 27.4991C24.9637 28.3887 24.4643 29.1878 23.6794 29.6539C22.8993 30.1153 21.9574 30.1725 21.0964 29.868C20.1451 29.535 19.0558 29.6397 18.1567 30.2438C16.606 31.295 16.2302 33.4356 17.3671 34.953C18.3946 36.323 20.3591 36.675 21.7957 35.7427C22.6091 35.2147 23.1086 34.3965 23.2513 33.5165C23.3987 32.6174 23.8982 31.8183 24.6831 31.3521C25.4632 30.8907 26.6286 30.9764 27.2565 31.1286C28.2221 31.3617 29.2639 31.3664 30.1582 30.7813C30.9668 30.2533 31.4615 29.4304 31.6042 28.5456C31.7469 27.6561 32.2512 26.8617 33.0313 26.4003C33.7924 25.9484 34.7199 25.8485 35.5476 26.1624ZM18.8465 26.1624C20.107 26.6334 21.5912 26.3051 22.5282 25.2016C23.6461 23.8744 23.5224 21.8481 22.2523 20.6636C21.3153 19.7931 20.0119 19.5695 18.8845 19.9786C18.0378 20.283 17.1055 20.2117 16.3301 19.755C15.55 19.2936 15.0458 18.4945 14.9031 17.6002C14.8983 17.5574 14.3275 14.846 11.6494 14.846C9.82757 14.846 8.35295 16.3206 8.35295 18.1425C8.35295 19.9643 9.82757 21.4389 11.6494 21.4389C12.1917 21.4389 12.7007 21.3058 13.1526 21.0727C13.4856 20.9443 13.9374 20.7872 14.2276 20.7872C15.4929 20.7872 16.5204 21.8147 16.5204 23.08C16.5204 24.3454 15.4929 25.3728 14.2276 25.3728C13.9089 25.3728 13.3952 25.1826 13.0622 25.0494C12.9528 25.0066 12.2155 24.7259 11.6447 24.7259C9.82281 24.7259 8.3482 26.2005 8.3482 28.0224C8.3482 29.8442 9.82281 31.3188 11.6447 31.3188C13.2715 31.3188 14.6224 30.1391 14.8888 28.5836C14.8888 28.5694 14.8983 28.5551 14.9031 28.5409C15.0458 27.6513 15.55 26.8569 16.3301 26.3955C17.0912 25.9436 18.0188 25.8437 18.8465 26.1577V26.1624ZM28.3506 34.6153C26.5287 34.6153 25.0541 36.0899 25.0541 37.9117C25.0541 39.7336 26.5287 41.2082 28.3506 41.2082C30.1724 41.2082 31.647 39.7336 31.647 37.9117C31.647 36.0899 30.1724 34.6153 28.3506 34.6153ZM19.9976 6.59293C21.8195 6.59293 23.2941 5.11835 23.2941 3.29649C23.2941 1.47464 21.8195 0 19.9976 0C18.1758 0 16.7012 1.47464 16.7012 3.29649C16.7012 5.11835 18.1758 6.59293 19.9976 6.59293ZM11.6494 34.6153C9.82757 34.6153 8.35295 36.0899 8.35295 37.9117C8.35295 39.7336 9.82757 41.2082 11.6494 41.2082C13.4713 41.2082 14.9459 39.7336 14.9459 37.9117C14.9459 36.0899 13.4713 34.6153 11.6494 34.6153ZM28.3506 11.54C30.1724 11.54 31.647 10.0654 31.647 8.24353C31.647 6.42167 30.1724 4.94709 28.3506 4.94709C26.5287 4.94709 25.0541 6.42167 25.0541 8.24353C25.0541 10.0654 26.5287 11.54 28.3506 11.54ZM11.6494 11.54C13.4713 11.54 14.9459 10.0654 14.9459 8.24353C14.9459 6.42167 13.4713 4.94709 11.6494 4.94709C9.82757 4.94709 8.35295 6.42167 8.35295 8.24353C8.35295 10.0654 9.82757 11.54 11.6494 11.54ZM3.29647 9.88942C1.47461 9.88942 0 11.364 0 13.1859C0 15.0077 1.47461 16.4824 3.29647 16.4824C5.11833 16.4824 6.59294 15.0077 6.59294 13.1859C6.59294 11.364 5.11833 9.88942 3.29647 9.88942ZM3.29647 29.673C1.47461 29.673 0 31.1476 0 32.9695C0 34.7913 1.47461 36.2659 3.29647 36.2659C5.11833 36.2659 6.59294 34.7913 6.59294 32.9695C6.59294 31.1476 5.11833 29.673 3.29647 29.673ZM3.29647 19.7788C1.47461 19.7788 0 21.2534 0 23.0753C0 24.8971 1.47461 26.3718 3.29647 26.3718C5.11833 26.3718 6.59294 24.8971 6.59294 23.0753C6.59294 21.2534 5.11833 19.7788 3.29647 19.7788Z"
+      fill="#FF6900"
+    />
+  </svg>
+)

package/src/svg/NotFound.tsx

@@ -0,0 +1,16 @@
+/* eslint-disable max-len */
+
+export const NotFound = ({ className, style }: { className?: string, style?: React.CSSProperties }) => (
+  <svg width="136" height="154" viewBox="0 0 136 154" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} style={style}>
+    <path fillRule="evenodd" clipRule="evenodd" d="M54.3307 0.59375C53.716 0.59375 53.2178 1.092 53.2178 1.70662C53.2178 2.32123 53.716 2.81948 54.3307 2.81948C93.8 2.81948 125.796 34.8157 125.796 74.2851C125.796 93.0828 118.539 110.185 106.673 122.944L94.4411 110.712L94.4248 110.696C103.164 101.078 108.49 88.3032 108.49 74.2843C108.49 44.3719 84.2415 20.1231 54.3291 20.1231C24.4167 20.1231 0.167971 44.3719 0.167969 74.2843C0.167969 104.197 24.4167 128.445 54.3291 128.445C69.4218 128.445 83.0726 122.272 92.8942 112.313L105.132 124.55C92.1785 137.641 74.2017 145.751 54.3307 145.751C53.716 145.751 53.2178 146.249 53.2178 146.864C53.2178 147.478 53.716 147.976 54.3307 147.976C74.8163 147.976 93.3495 139.617 106.706 126.124L134.039 153.458C134.474 153.892 135.178 153.892 135.613 153.458C136.048 153.023 136.048 152.318 135.613 151.884L108.248 124.519C120.516 111.357 128.022 93.6974 128.022 74.2851C128.022 33.5865 95.0293 0.59375 54.3307 0.59375ZM106.265 74.2843C106.265 45.6011 83.0122 22.3489 54.3291 22.3489C25.646 22.3489 2.39371 45.6011 2.39371 74.2843C2.39371 102.967 25.646 126.22 54.3291 126.22C83.0122 126.22 106.265 102.967 106.265 74.2843Z" fill="url(#paint0_linear_3383_224507)" />
+    <circle opacity="0.16" cx="54.4578" cy="74.1883" r="41.5984" fill="#FAFAFB" />
+    <circle opacity="0.16" cx="54.0295" cy="74.6155" r="30.8772" fill="#FAFAFB" />
+    <path fillRule="evenodd" clipRule="evenodd" d="M51.915 76.8282C51.9232 78.034 52.9074 79.0048 54.1131 78.9966C55.3189 78.9884 56.2897 78.0043 56.2815 76.7985L56.1278 64.0513C56.1196 62.8455 55.1355 61.8747 53.9297 61.8829C52.7239 61.8911 51.7531 62.8752 51.7613 64.081L51.915 76.8282ZM52.218 85.6913C52.7436 86.1712 53.3605 86.4111 54.0689 86.4111C54.8001 86.4111 55.4171 86.1597 55.9198 85.657C56.4453 85.1543 56.7081 84.5602 56.7081 83.8747C56.7081 83.1663 56.4453 82.5722 55.9198 82.0924C55.3942 81.5897 54.7658 81.3383 54.0346 81.3383C53.3263 81.3383 52.7093 81.5897 52.1838 82.0924C51.681 82.5951 51.4297 83.2006 51.4297 83.909C51.4297 84.5945 51.6925 85.1886 52.218 85.6913Z" fill="#14141A" />
+    <defs>
+      <linearGradient id="paint0_linear_3383_224507" x1="62.1628" y1="150.93" x2="211.15" y2="63.5124" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#BCBCCF" stopOpacity="0.61" />
+        <stop offset="0.766098" stopColor="#353546" stopOpacity="0" />
+      </linearGradient>
+    </defs>
+  </svg>
+)

package/src/svg/ServerError.tsx

@@ -0,0 +1,33 @@
+/* eslint-disable max-len */
+
+export const ServerError = ({ className, style }: { className?: string, style?: React.CSSProperties }) => (
+  <svg width="187" height="115" viewBox="0 0 187 115" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} style={style}>
+    <path opacity="0.1" d="M148.767 98.4641C148.767 79.4314 138.994 62.667 124.163 52.8555M38.5703 98.4641C38.5703 79.4314 48.343 62.667 63.174 52.8555" stroke="url(#paint0_linear_3383_197709)" strokeWidth="2.5731" />
+    <g opacity="0.5">
+      <mask id="path2-inside1_3383_197709" fill="white">
+        <path fillRule="evenodd" clipRule="evenodd" d="M18.1671 0.320312C14.2745 0.320312 11.1189 3.47587 11.1189 7.36846V52.3732V98.0428H7.77081C3.87822 98.0428 0.722656 101.198 0.722656 105.091V107.775C0.722656 111.667 3.87823 114.823 7.77082 114.823H179.562C183.454 114.823 186.61 111.667 186.61 107.775V105.091C186.61 101.198 183.454 98.0428 179.562 98.0428H176.907V7.36846C176.907 3.47588 173.752 0.320312 169.859 0.320312H18.1671ZM13.3446 7.36846C13.3446 4.70512 15.5037 2.54604 18.1671 2.54604H169.859C172.522 2.54604 174.681 4.70511 174.681 7.36846V98.042H13.3446V52.3732V7.36846ZM2.94839 105.091C2.94839 102.428 5.10746 100.269 7.77081 100.269H179.562C182.225 100.269 184.384 102.428 184.384 105.091V107.775C184.384 110.438 182.225 112.597 179.562 112.597H7.77082C5.10747 112.597 2.94839 110.438 2.94839 107.775V105.091Z" />
+      </mask>
+      <path d="M11.1189 98.0428V100.273H13.3489V98.0428H11.1189ZM176.907 98.0428H174.677V100.273H176.907V98.0428ZM174.681 98.042V100.272H176.912V98.042H174.681ZM13.3446 98.042H11.1146V100.272H13.3446V98.042ZM13.3489 7.36846C13.3489 4.70749 15.5061 2.55033 18.1671 2.55033V1.90971C13.0429 -1.90971 8.8889 2.24426 8.8889 7.36846H13.3489ZM13.3489 52.3732V7.36846H8.8889V52.3732H13.3489ZM13.3489 98.0428V52.3732H8.8889V98.0428H13.3489ZM7.77081 100.273H11.1189V95.8128H7.77081V100.273ZM2.95268 105.091C2.95268 102.43 5.10983 100.273 7.77081 100.273V95.8128C2.64661 95.8128 -1.50736 99.9668 -1.50736 105.091H2.95268ZM2.95268 107.775V105.091H1.50736V107.775H2.95268ZM7.77082 112.593C5.10984 112.593 2.95268 110.436 2.95268 107.775H1.50736C1.50736 112.899 2.64663 117.053 7.77082 117.053V112.593ZM179.562 112.593H7.77082V117.053H179.562V112.593ZM184.38 107.775C184.38 110.436 182.223 112.593 179.562 112.593V117.053C184.686 117.053 188.84 112.899 188.84 107.775H184.38ZM184.38 105.091V107.775H188.84V105.091H184.38ZM179.562 100.273C182.223 100.273 184.38 102.43 184.38 105.091H188.84C188.84 99.9668 184.686 95.8128 179.562 95.8128V100.273ZM176.907 100.273H179.562V95.8128H176.907V100.273ZM174.677 7.36846V98.0428H179.137V7.36846H174.677ZM169.859 2.55033C172.52 2.55033 174.677 4.70748 174.677 7.36846H179.137C179.137 2.24427 174.983 -1.90971 169.859 -1.90971V2.55033ZM18.1671 2.55033H169.859V1.90971H18.1671V2.55033ZM18.1671 0.316024C14.2721 0.316024 11.1146 3.47351 11.1146 7.36846H15.5747C15.5747 5.93673 16.7353 4.77606 18.1671 4.77606V0.316024ZM169.859 0.316024H18.1671V4.77606H169.859V0.316024ZM176.912 7.36846C176.912 3.47351 173.754 0.316024 169.859 0.316024V4.77606C171.291 4.77606 172.451 5.93672 172.451 7.36846H176.912ZM176.912 98.042V7.36846H172.451V98.042H176.912ZM13.3446 100.272H174.681V95.812H13.3446V100.272ZM11.1146 52.3732V98.042H15.5747V52.3732H11.1146ZM11.1146 7.36846V52.3732H15.5747V7.36846H11.1146ZM7.77081 98.0385C3.87585 98.0385 0.718369 101.196 0.718369 105.091H5.17841C5.17841 103.659 6.33906 102.499 7.77081 102.499V98.0385ZM179.562 98.0385H7.77081V102.499H179.562V98.0385ZM186.614 105.091C186.614 101.196 183.457 98.0385 179.562 98.0385V102.499C180.993 102.499 182.154 103.659 182.154 105.091H186.614ZM186.614 107.775V105.091H182.154V107.775H186.614ZM179.562 114.827C183.457 114.827 186.614 111.67 186.614 107.775H182.154C182.154 109.206 180.993 110.367 179.562 110.367V114.827ZM7.77082 114.827H179.562V110.367H7.77082V114.827ZM0.718369 107.775C0.718369 111.67 3.87587 114.827 7.77082 114.827V110.367C6.33907 110.367 5.17841 109.206 5.17841 107.775H0.718369ZM0.718369 105.091V107.775H5.17841V105.091H0.718369Z" fill="url(#paint1_linear_3383_197709)" mask="url(#path2-inside1_3383_197709)" />
+    </g>
+    <path opacity="0.1" d="M167.976 39.7734V98.097M19.5938 98.097V70.1762V39.7734" stroke="url(#paint2_linear_3383_197709)" strokeWidth="2.22573" />
+    <path opacity="0.16" d="M89.4439 19.7907C92.033 18.2959 95.223 18.2959 97.8121 19.7907L117.92 31.4003C120.51 32.8951 122.105 35.6577 122.105 38.6473V61.8665C122.105 64.8562 120.51 67.6187 117.92 69.1135L97.8121 80.7231C95.223 82.218 92.033 82.218 89.4439 80.7231L69.3355 69.1135C66.7464 67.6187 65.1514 64.8562 65.1514 61.8665V38.6473C65.1514 35.6577 66.7464 32.8951 69.3355 31.4003L89.4439 19.7907Z" fill="#FAFAFB" />
+    <path opacity="0.16" d="M89.4447 26.8376C92.0338 25.3427 95.2237 25.3427 97.8128 26.8376L111.819 34.9241C114.408 36.4189 116.003 39.1815 116.003 42.1711V58.3442C116.003 61.3339 114.408 64.0964 111.819 65.5912L97.8128 73.6778C95.2237 75.1726 92.0338 75.1726 89.4447 73.6778L75.4384 65.5912C72.8493 64.0964 71.2543 61.3338 71.2543 58.3442V42.1711C71.2543 39.1815 72.8493 36.4189 75.4384 34.9241L89.4447 26.8376Z" fill="#FAFAFB" />
+    <path opacity="0.16" d="M91.6031 34.1543C93.2213 33.2201 95.215 33.2201 96.8332 34.1543L107.367 40.236C108.985 41.1702 109.982 42.8968 109.982 44.7654V56.9287C109.982 58.7972 108.985 60.5238 107.367 61.4581L96.8332 67.5397C95.215 68.474 93.2213 68.474 91.6031 67.5397L81.0693 61.4581C79.4511 60.5238 78.4543 58.7972 78.4543 56.9286V44.7654C78.4543 42.8968 79.4511 41.1702 81.0694 40.236L91.6031 34.1543Z" fill="#FAFAFB" />
+    <path d="M100.941 43.7109L87.0802 57.5722" stroke="#14141A" strokeWidth="3.5491" strokeLinecap="round" />
+    <path d="M100.941 57.5703L87.0802 43.7091" stroke="#14141A" strokeWidth="3.5491" strokeLinecap="round" />
+    <defs>
+      <linearGradient id="paint0_linear_3383_197709" x1="93.6687" y1="43.7117" x2="93.6687" y2="98.4635" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#BCBCCF" stopOpacity="0" />
+        <stop offset="1" stopColor="#BCBCCF" />
+      </linearGradient>
+      <linearGradient id="paint1_linear_3383_197709" x1="186.891" y1="111.975" x2="-6.87233" y2="-64.7069" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#BCBCCF" />
+        <stop offset="0.766098" stopColor="#353546" stopOpacity="0.09" />
+      </linearGradient>
+      <linearGradient id="paint2_linear_3383_197709" x1="25.9349" y1="96.8508" x2="76.0716" y2="-32.8361" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#BCBCCF" />
+        <stop offset="0.766098" stopColor="#353546" stopOpacity="0.09" />
+      </linearGradient>
+    </defs>
+  </svg>
+)

package/src/svg/Unauthenticated.tsx

@@ -0,0 +1,16 @@
+/* eslint-disable max-len */
+
+export const Unauthenticated = ({ className, style }: { className?: string, style?: React.CSSProperties }) => (
+  <svg width="178" height="160" viewBox="0 0 178 160" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} style={style}>
+    <circle opacity="0.16" cx="89.6761" cy="80.2113" r="31.5629" fill="#FAFAFB"/>
+    <ellipse opacity="0.16" cx="89.6721" cy="80.6057" rx="22.094" ry="21.6995" fill="#FAFAFB"/>
+    <ellipse opacity="0.16" cx="89.6759" cy="80.6056" rx="13.4142" ry="13.0197" fill="#FAFAFB"/>
+    <path opacity="0.5" fillRule="evenodd" clipRule="evenodd" d="M44.7029 19.055C69.3231 -5.56521 109.24 -5.56521 133.861 19.055L177.651 62.8454C178.086 63.2808 178.086 63.9868 177.651 64.4222C177.215 64.8577 176.509 64.8577 176.074 64.4222L132.284 20.6319C108.534 -3.11747 70.0291 -3.11747 46.2798 20.6319C45.8443 21.0673 45.1383 21.0673 44.7029 20.6319C44.2675 20.1964 44.2675 19.4904 44.7029 19.055ZM161.243 79.8912L126.447 45.0949C105.747 24.3952 72.1863 24.3952 51.4866 45.0949L16.6903 79.8912L51.4866 114.687C72.1863 135.387 105.747 135.387 126.447 114.687L161.243 79.8912ZM128.024 43.518C106.453 21.9474 71.4803 21.9474 49.9097 43.5181L15.1135 78.3143L13.5366 79.8912L15.1135 81.468L49.9097 116.264C71.4803 137.835 106.453 137.835 128.024 116.264L162.82 81.468L164.397 79.8912L162.82 78.3143L128.024 43.518ZM44.7029 141.115C69.3231 165.736 109.24 165.736 133.861 141.115C134.296 140.68 134.296 139.974 133.861 139.538C133.425 139.103 132.719 139.103 132.284 139.538C108.534 163.288 70.0291 163.288 46.2798 139.538L2.48938 95.7481C2.05394 95.3126 1.34795 95.3126 0.912516 95.7481C0.477078 96.1835 0.477077 96.8895 0.912518 97.3249L44.7029 141.115Z" fill="url(#paint0_linear_3383_243082)"/>
+    <defs>
+      <linearGradient id="paint0_linear_3383_243082" x1="-3.35603" y1="94.0049" x2="89.5555" y2="212.99" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#BCBCCF"/>
+        <stop offset="0.766098" stopColor="#353546" stopOpacity="0.09"/>
+      </linearGradient>
+    </defs>
+  </svg>
+)

package/src/svg/index.ts

@@ -0,0 +1,11 @@
+export { AI } from './AI'
+export { CS } from './CS'
+export { EDP } from './EDP'
+export { Forbidden } from './Forbidden'
+export { GenericPlaceholder } from './GenericPlaceholder'
+export { HUB } from './HUB'
+export { Logo } from './Logo'
+export { MiniLogo } from './MiniLogo'
+export { NotFound } from './NotFound'
+export { ServerError } from './ServerError'
+export { Unauthenticated } from './Unauthenticated'

package/src/utils/accessibility.ts

@@ -0,0 +1,135 @@
+/**
+ * Important for accessibility.
+ * 
+ * Makes it so we focus the next focusable element in the DOM hierarchy, disregarding the element passed as parameter and its children.
+ * 
+ * If there's no next focusable element, the first focusable element of the page will be focused. If the page doesn't contain any focusable
+ * element, nothing happens.
+ * 
+ * @param current the reference element to focus the next. If not provided, will be the currently active element.
+ */
+export function focusNextIgnoringChildren(current?: HTMLElement | null) {
+  current = current ?? document.activeElement as HTMLElement
+  while (current && !current.nextElementSibling) {
+    current = current?.parentElement
+  }
+  current = current?.nextElementSibling as HTMLElement
+  while (current && current.tabIndex < 0) {
+    current = (current.children.length ? current.firstChild : current.nextElementSibling) as HTMLElement
+  }
+  if (current) current?.focus?.()
+  else focusFirstChild(document)
+}
+
+export type TagPriority = 'a' | 'button' | 'input' | 'textarea' | 'select' | 'other'
+export type TagPriorityElement = TagPriority | TagPriority[]
+
+interface FocusOptions {
+  /**
+   * Instead of focusing the first element overall, focus the first according to this list of priorities.
+   * 
+   * 'other' means elements that are normally not focusable, but have positive tabIndex values.
+   */
+  priority?: TagPriorityElement[],
+  /**
+   * Ignores any element that matches this query selector.
+   */
+  ignore?: string,
+}
+
+const selectors: Record<TagPriority, string> = {
+  a: 'a[href]:not(:disabled)',
+  button: 'button:not(:disabled)',
+  input: 'input:not(:disabled):not([type="hidden"])',
+  select: 'textarea:not(:disabled)',
+  textarea: 'select:not(:disabled)',
+  other: '[tabindex]:not([tabindex="-1"])',
+}
+
+/**
+ * Focus the first focusable child of the element provided. If the element has no focusable child, nothing happens.
+ * 
+ * A priority list can be passed in the second parameter, as an option. If it's provided, it will focus the first element according to the
+ * list.
+ * 
+ * An ignore query selector can also be passed in the options parameter. If the first focusable element matches the query selector, the
+ * next element is focused instead.
+ * 
+ * @example
+ * Suppose the children of element are: h1, button, p, input, select.
+ * 1. We don't pass a priority list. The focused element will be the button.
+ * 2. Our priority list is ['button']. The focused element will be the button.
+ * 3. Our priority list is ['input', 'button']. The focused element will be the input.
+ * 4. Our priority list is ['select', 'input']. The focused element will be the select.
+ * 5. Our priority list is [['select', 'input'], 'button']. The focused element will be the input.
+ * 
+ * @param element the element to search a child to focus.
+ * @param options optional.
+ */
+export function focusFirstChild(element: HTMLElement | Document | null | undefined, { priority = [], ignore }: FocusOptions = {}) {
+  const allFocusableTags: TagPriority[] = ['a', 'button', 'input', 'other', 'select', 'textarea']
+  const focusableList: (NodeListOf<HTMLElement> | undefined)[] = [
+    element?.querySelectorAll(allFocusableTags.map(t => selectors[t]).join(', ')),
+  ]
+  for (const p of priority) {
+    const tags = Array.isArray(p) ? p : [p]
+    const querySelectors = tags.map(t => selectors[t])
+    focusableList.unshift(element?.querySelectorAll(querySelectors.join(', ')))
+  }
+  for (const focusable of focusableList ?? []) {
+    for (const f of focusable ?? []) {
+      if (!ignore || !f.matches(ignore)) {
+        const styles = window.getComputedStyle(f)
+        if (styles.display != 'none' && styles.visibility != 'hidden') return f.focus()
+      }
+    }
+  }
+}
+
+/**
+ * Checks if an element can receive focus.
+ * 
+ * Elements can receive focus only if:
+ * - they exist;
+ * - they're visible;
+ * - they're not disabled;
+ * - they are a focusable tag name or have a positive tab index;
+ * - they don't have a negative tab index.
+ * @param element the element to check.
+ * @returns true if the element is focusable, false otherwise.
+ */
+export function isFocusable(element?: Element | null) {
+  if (!element) return false
+  // is disabled: return false
+  if (element.ariaDisabled || element.getAttribute('disabled') !== null) return false
+  // is invisible: return false
+  if (!element.checkVisibility({ checkOpacity: true, checkVisibilityCSS: true })) return false
+  // has tab index: return false if negative, true otherwise
+  const tabIndexStr = element.getAttribute('tabindex')
+  const tabIndex = tabIndexStr ? parseInt(tabIndexStr) : undefined
+  if (tabIndex !== undefined) return tabIndex >= 0
+  // check the tag name
+  return ['a', 'button', 'input', 'iframe', 'select', 'textarea'].includes(element.tagName.toLowerCase() ?? '')
+}
+
+/**
+ * Focus the element passed as parameter if it can receive focus. Otherwise, decides on another element to focus based on the HTML tree
+ * and accessibility attributes.
+ * 
+ * Decision making:
+ * - If the element is focusable, focus it.
+ * - If the element is not focusable, check if it has an id and if another element controls it (aria-controls).
+ * - If the element is controlled by another, try to focus the controller, based in this same algorithm.
+ * - Otherwise, try to focus its parent.
+ * 
+ * If no focusable element is found. Nothing happens.
+ * @param element the element to focus.
+ */
+export function focusAccessibleElement(element?: Element | null) {
+  let elementToFocus = element as HTMLElement | null | undefined
+  while (elementToFocus && !isFocusable(elementToFocus)) {
+    const controlledBy = elementToFocus.id ? document.querySelector(`[aria-controls="${elementToFocus.id}"]`) : undefined
+    elementToFocus = (controlledBy ?? elementToFocus.parentElement) as HTMLElement | null | undefined
+  }
+  elementToFocus?.focus?.()
+}

package/src/utils/cookie.ts

@@ -0,0 +1,73 @@
+import { isEmpty } from 'lodash'
+
+const DEFAULT_DOMAIN_REGEX = new RegExp(/(\.*(prd|stg|dev)*.stackspot.com)|localhost/)
+let cookieDomain = ''
+let cookieAttributes: Record<string, string> = {}
+
+/**
+ * Setup the cookie utilities to use a another domain. By default, it's based on *.stackspot.com. 
+ * @param domainRegex the regex to identify the domain. Example: {@link DEFAULT_DOMAIN_REGEX}.
+ */
+export function setupCookies(domainRegex: RegExp) {
+  const portalUrl = new URL(location.href)
+  cookieDomain = domainRegex.exec(portalUrl.host)?.[0] ?? ''
+  cookieAttributes = { domain: cookieDomain, SameSite: 'Strict' }
+  // Add Secure attribute if using HTTPS
+  if (portalUrl.protocol === 'https:') {
+    cookieAttributes['Secure'] = ''
+  }
+}
+
+/**
+ * Retrieves the current domain used for cookies. To change the domain, use `setupCookies(domainRegex)`.
+ * @returns the current cookie domain.
+ */
+export function getCookieDomain() {
+  if (isEmpty(cookieAttributes)) setupCookies(DEFAULT_DOMAIN_REGEX)
+  return cookieDomain
+}
+
+/**
+ * Get all cookies as an object where the keys are the cookie names and the values are the respective cookie values. 
+ * @returns a map of cookie name to cookie value.
+ */
+export function getCookies(): Record<string, string | undefined> {
+  if (isEmpty(cookieAttributes)) setupCookies(DEFAULT_DOMAIN_REGEX)
+  return document.cookie.split('; ').reduce((result, current) => {
+    const [name, ...value] = current.split('=')
+    result[name] = value.join('=')
+    return result
+  }, {} as Record<string, string>)
+}
+
+/**
+ * Sets the value of a cookie.
+ * @param key the cookie name (identifier).
+ * @param value the cookie value.
+ * @param customAttributes Accepted values: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#attributes.
+ */
+export function setCookie(key: string, value: string, customAttributes: Record<string, string> = {}) {
+  if (isEmpty(cookieAttributes)) setupCookies(DEFAULT_DOMAIN_REGEX)
+  document.cookie = `${key}=${value};${objectToCookieString({ ...cookieAttributes, ...customAttributes })}`
+}
+
+/**
+ * Removes a cookie.
+ * @param key the cookie name (identifier).
+ */
+export function removeCookie(key: string) {
+  if (isEmpty(cookieAttributes)) setupCookies(DEFAULT_DOMAIN_REGEX)
+  document.cookie = `${key}=;${objectToCookieString({ ...cookieAttributes, expires: 'Thu, 01 Jan 1970 00:00:00 GMT' })}`
+}
+
+/**
+ * Retrieves the value of a cookie given its key/name.
+ * @param key the cookie name (identifier).
+ * @returns the cookie value or undefined, if the cookie doesn't exist. 
+ */
+export function getCookie(key: string) {
+  return getCookies()[key]
+}
+
+const objectToCookieString = (object: Record<string, string>): string =>
+  Object.entries(object).reduce((prev, [k, v]) => `${prev} ${k}${v !== '' ? `=${v}` : ''};`, '').trim()

package/src/utils/promise.ts

@@ -0,0 +1,5 @@
+export function delay(ms: number) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms)
+  })
+}

package/src/utils/read-file.ts

@@ -0,0 +1,16 @@
+export async function readFile(file: File, isJson = false): Promise<string | undefined> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+
+    reader.onload = (e) => {
+      const content = e.target?.result as string
+      resolve(isJson ? JSON.parse(content) : content)
+    }
+
+    reader.onerror = (e) => {
+      reject(e)
+    }
+
+    reader.readAsText(file)
+  })
+}

package/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../../tsconfig",
   "compilerOptions": {
+    "rootDir": "src", 
     "module": "ESNext",
     "outDir": "dist"
   },

package/dist/components/Login.d.ts

@@ -1,26 +0,0 @@
-/// <reference types="react" />
-type LoginType = 'sso' | 'idp';
-interface BaseData {
-    type: LoginType;
-}
-interface SSOData extends BaseData {
-    type: 'sso';
-    email: string;
-}
-interface IDPData extends BaseData {
-    type: 'idp';
-    provider: 'external-idp:github';
-}
-type LoginData = SSOData | IDPData;
-interface Props {
-    initialValue?: string;
-    onSubmit: (data: LoginData) => Promise<void>;
-    welcomeText?: string;
-    removeLoadingOnSuccess?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-    bannerData?: React.ReactNode;
-}
-export declare const Login: ({ onSubmit, initialValue, welcomeText, removeLoadingOnSuccess, className, style, bannerData }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=Login.d.ts.map

package/dist/components/Login.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Login.d.ts","sourceRoot":"","sources":["../../src/components/Login.tsx"],"names":[],"mappings":";AAWA,KAAK,SAAS,GAAG,KAAK,GAAG,KAAK,CAAA;AAE9B,UAAU,QAAQ;IAChB,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,UAAU,OAAQ,SAAQ,QAAQ;IAChC,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,OAAQ,SAAQ,QAAQ;IAChC,IAAI,EAAE,KAAK,CAAC;IACZ,QAAQ,EAAE,qBAAqB,CAAC;CACjC;AAED,KAAK,SAAS,GAAG,OAAO,GAAG,OAAO,CAAA;AAElC,UAAU,KAAK;IACb,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AA4CD,eAAO,MAAM,KAAK,kGAAwG,KAAK,4CAwD9H,CAAA"}