@vector-im/compound-design-tokens 0.0.2 → 0.0.3

package/assets/web/css/cpd-light.css

@@ -1,4 +1,158 @@
-.cpd-theme-light {
+.cpd-theme-light.cpd-theme-light {
+  --cpd-color-alpha-pink-1400: hsl(339, 100%, 13%, 1);
+  --cpd-color-alpha-pink-1300: hsl(333, 100%, 19%, 1);
+  --cpd-color-alpha-pink-1200: hsla(330, 98%, 24%, 0.98);
+  --cpd-color-alpha-pink-1100: hsla(331, 100%, 31%, 0.97);
+  --cpd-color-alpha-pink-1000: hsla(332, 98%, 36%, 0.97);
+  --cpd-color-alpha-pink-900: hsla(333, 98%, 41%, 0.96);
+  --cpd-color-alpha-pink-800: hsla(340, 100%, 48%, 0.75);
+  --cpd-color-alpha-pink-700: hsla(345, 100%, 50%, 0.47);
+  --cpd-color-alpha-pink-600: hsla(346, 100%, 51%, 0.33);
+  --cpd-color-alpha-pink-500: hsla(347, 100%, 50%, 0.24);
+  --cpd-color-alpha-pink-400: hsla(347, 100%, 50%, 0.13);
+  --cpd-color-alpha-pink-300: hsla(347, 100%, 54%, 0.08);
+  --cpd-color-alpha-pink-200: hsla(348, 100%, 51%, 0.04);
+  --cpd-color-alpha-pink-100: hsla(348, 100%, 51%, 0.02);
+  --cpd-color-alpha-fuchsia-1400: hsl(281, 100%, 15%, 1);
+  --cpd-color-alpha-fuchsia-1300: hsl(285, 100%, 20%, 1);
+  --cpd-color-alpha-fuchsia-1200: hsla(286, 97%, 24%, 0.93);
+  --cpd-color-alpha-fuchsia-1100: hsla(289, 96%, 28%, 0.88);
+  --cpd-color-alpha-fuchsia-1000: hsla(291, 99%, 30%, 0.84);
+  --cpd-color-alpha-fuchsia-900: hsla(293, 100%, 34%, 0.8);
+  --cpd-color-alpha-fuchsia-800: hsla(295, 97%, 37%, 0.64);
+  --cpd-color-alpha-fuchsia-700: hsla(295, 96%, 37%, 0.43);
+  --cpd-color-alpha-fuchsia-600: hsla(297, 93%, 38%, 0.31);
+  --cpd-color-alpha-fuchsia-500: hsla(296, 93%, 39%, 0.23);
+  --cpd-color-alpha-fuchsia-400: hsla(298, 91%, 40%, 0.13);
+  --cpd-color-alpha-fuchsia-300: hsla(295, 89%, 41%, 0.07);
+  --cpd-color-alpha-fuchsia-200: hsla(293, 95%, 41%, 0.04);
+  --cpd-color-alpha-fuchsia-100: hsla(300, 95%, 41%, 0.02);
+  --cpd-color-alpha-purple-1400: hsl(259, 100%, 20%, 1);
+  --cpd-color-alpha-purple-1300: hsl(262, 100%, 28%, 1);
+  --cpd-color-alpha-purple-1200: hsla(264, 98%, 36%, 0.99);
+  --cpd-color-alpha-purple-1100: hsla(260, 97%, 39%, 0.86);
+  --cpd-color-alpha-purple-1000: hsla(259, 98%, 42%, 0.79);
+  --cpd-color-alpha-purple-900: hsla(258, 98%, 47%, 0.73);
+  --cpd-color-alpha-purple-800: hsla(254, 99%, 49%, 0.56);
+  --cpd-color-alpha-purple-700: hsla(251, 100%, 51%, 0.38);
+  --cpd-color-alpha-purple-600: hsla(249, 100%, 51%, 0.27);
+  --cpd-color-alpha-purple-500: hsla(248, 100%, 51%, 0.2);
+  --cpd-color-alpha-purple-400: hsla(248, 100%, 53%, 0.12);
+  --cpd-color-alpha-purple-300: hsla(248, 100%, 55%, 0.07);
+  --cpd-color-alpha-purple-200: hsla(248, 100%, 61%, 0.04);
+  --cpd-color-alpha-purple-100: hsla(240, 100%, 61%, 0.02);
+  --cpd-color-alpha-blue-1400: hsl(232, 100%, 20%, 1);
+  --cpd-color-alpha-blue-1300: hsl(222, 98%, 24%, 1);
+  --cpd-color-alpha-blue-1200: hsla(218, 99%, 29%, 0.99);
+  --cpd-color-alpha-blue-1100: hsla(216, 99%, 35%, 0.98);
+  --cpd-color-alpha-blue-1000: hsla(214, 98%, 39%, 0.99);
+  --cpd-color-alpha-blue-900: hsla(213, 99%, 44%, 0.99);
+  --cpd-color-alpha-blue-800: hsla(215, 100%, 46%, 0.75);
+  --cpd-color-alpha-blue-700: hsla(215, 98%, 47%, 0.51);
+  --cpd-color-alpha-blue-600: hsla(216, 95%, 48%, 0.37);
+  --cpd-color-alpha-blue-500: hsla(215, 93%, 50%, 0.28);
+  --cpd-color-alpha-blue-400: hsla(216, 95%, 51%, 0.16);
+  --cpd-color-alpha-blue-300: hsla(215, 100%, 52%, 0.09);
+  --cpd-color-alpha-blue-200: hsla(218, 100%, 57%, 0.05);
+  --cpd-color-alpha-blue-100: hsla(210, 100%, 61%, 0.03);
+  --cpd-color-alpha-cyan-1400: hsl(221, 100%, 16%, 1);
+  --cpd-color-alpha-cyan-1300: hsl(213, 100%, 19%, 1);
+  --cpd-color-alpha-cyan-1200: hsl(208, 100%, 23%, 1);
+  --cpd-color-alpha-cyan-1100: hsl(204, 100%, 28%, 1);
+  --cpd-color-alpha-cyan-1000: hsl(202, 100%, 31%, 1);
+  --cpd-color-alpha-cyan-900: hsl(200, 100%, 34%, 1);
+  --cpd-color-alpha-cyan-800: hsl(194, 100%, 38%, 1);
+  --cpd-color-alpha-cyan-700: hsla(186, 99%, 40%, 0.92);
+  --cpd-color-alpha-cyan-600: hsla(187, 99%, 38%, 0.54);
+  --cpd-color-alpha-cyan-500: hsla(186, 95%, 38%, 0.4);
+  --cpd-color-alpha-cyan-400: hsla(186, 100%, 37%, 0.22);
+  --cpd-color-alpha-cyan-300: hsla(188, 100%, 38%, 0.11);
+  --cpd-color-alpha-cyan-200: hsla(186, 79%, 41%, 0.06);
+  --cpd-color-alpha-cyan-100: hsla(180, 79%, 41%, 0.03);
+  --cpd-color-alpha-green-1400: hsl(149, 100%, 7%, 1);
+  --cpd-color-alpha-green-1300: hsl(157, 100%, 10%, 1);
+  --cpd-color-alpha-green-1200: hsl(162, 100%, 14%, 1);
+  --cpd-color-alpha-green-1100: hsl(165, 100%, 18%, 1);
+  --cpd-color-alpha-green-1000: hsl(166, 100%, 21%, 1);
+  --cpd-color-alpha-green-900: hsl(168, 100%, 24%, 1);
+  --cpd-color-alpha-green-800: hsl(166, 100%, 30%, 1);
+  --cpd-color-alpha-green-700: hsla(163, 99%, 38%, 0.96);
+  --cpd-color-alpha-green-600: hsla(156, 99%, 36%, 0.56);
+  --cpd-color-alpha-green-500: hsla(154, 96%, 37%, 0.41);
+  --cpd-color-alpha-green-400: hsla(151, 93%, 37%, 0.23);
+  --cpd-color-alpha-green-300: hsla(150, 100%, 36%, 0.11);
+  --cpd-color-alpha-green-200: hsla(150, 79%, 41%, 0.06);
+  --cpd-color-alpha-green-100: hsla(156, 79%, 41%, 0.03);
+  --cpd-color-alpha-lime-1400: hsl(120, 100%, 7%, 1);
+  --cpd-color-alpha-lime-1300: hsl(120, 100%, 11%, 1);
+  --cpd-color-alpha-lime-1200: hsl(120, 100%, 15%, 1);
+  --cpd-color-alpha-lime-1100: hsl(120, 100%, 19%, 1);
+  --cpd-color-alpha-lime-1000: hsl(120, 100%, 22%, 1);
+  --cpd-color-alpha-lime-900: hsla(113, 97%, 24%, 0.96);
+  --cpd-color-alpha-lime-800: hsla(107, 99%, 29%, 0.91);
+  --cpd-color-alpha-lime-700: hsla(102, 100%, 37%, 0.86);
+  --cpd-color-alpha-lime-600: hsla(102, 97%, 41%, 0.71);
+  --cpd-color-alpha-lime-500: hsla(104, 98%, 40%, 0.51);
+  --cpd-color-alpha-lime-400: hsla(105, 92%, 42%, 0.28);
+  --cpd-color-alpha-lime-300: hsla(107, 98%, 41%, 0.15);
+  --cpd-color-alpha-lime-200: hsla(107, 89%, 44%, 0.07);
+  --cpd-color-alpha-lime-100: hsla(103, 75%, 46%, 0.04);
+  --cpd-color-alpha-yellow-1400: hsl(6, 100%, 13%, 1);
+  --cpd-color-alpha-yellow-1300: hsl(19, 100%, 17%, 1);
+  --cpd-color-alpha-yellow-1200: hsl(26, 100%, 21%, 1);
+  --cpd-color-alpha-yellow-1100: hsl(30, 100%, 25%, 1);
+  --cpd-color-alpha-yellow-1000: hsl(32, 100%, 28%, 1);
+  --cpd-color-alpha-yellow-900: hsl(34, 100%, 31%, 1);
+  --cpd-color-alpha-yellow-800: hsl(39, 100%, 37%, 1);
+  --cpd-color-alpha-yellow-700: hsl(44, 100%, 44%, 1);
+  --cpd-color-alpha-yellow-600: hsl(47, 100%, 47%, 1);
+  --cpd-color-alpha-yellow-500: hsl(49, 100%, 49%, 1);
+  --cpd-color-alpha-yellow-400: hsla(47, 100%, 51%, 0.49);
+  --cpd-color-alpha-yellow-300: hsla(47, 100%, 51%, 0.25);
+  --cpd-color-alpha-yellow-200: hsla(46, 100%, 53%, 0.13);
+  --cpd-color-alpha-yellow-100: hsla(48, 100%, 51%, 0.06);
+  --cpd-color-alpha-orange-1400: hsl(0, 100%, 14%, 1);
+  --cpd-color-alpha-orange-1300: hsl(0, 100%, 19%, 1);
+  --cpd-color-alpha-orange-1200: hsl(0, 100%, 26%, 1);
+  --cpd-color-alpha-orange-1100: hsl(13, 100%, 30%, 1);
+  --cpd-color-alpha-orange-1000: hsl(18, 100%, 34%, 1);
+  --cpd-color-alpha-orange-900: hsl(22, 100%, 37%, 1);
+  --cpd-color-alpha-orange-800: hsl(28, 100%, 43%, 1);
+  --cpd-color-alpha-orange-700: hsla(27, 100%, 48%, 0.75);
+  --cpd-color-alpha-orange-600: hsla(26, 98%, 50%, 0.52);
+  --cpd-color-alpha-orange-500: hsla(25, 100%, 50%, 0.37);
+  --cpd-color-alpha-orange-400: hsla(25, 100%, 51%, 0.22);
+  --cpd-color-alpha-orange-300: hsla(24, 100%, 52%, 0.11);
+  --cpd-color-alpha-orange-200: hsla(26, 100%, 55%, 0.07);
+  --cpd-color-alpha-orange-100: hsla(22, 100%, 61%, 0.04);
+  --cpd-color-alpha-red-1400: hsl(0, 100%, 14%, 1);
+  --cpd-color-alpha-red-1300: hsl(0, 100%, 19%, 1);
+  --cpd-color-alpha-red-1200: hsl(357, 100%, 26%, 1);
+  --cpd-color-alpha-red-1100: hsla(350, 99%, 32%, 0.99);
+  --cpd-color-alpha-red-1000: hsla(353, 98%, 37%, 0.95);
+  --cpd-color-alpha-red-900: hsla(355, 98%, 41%, 0.91);
+  --cpd-color-alpha-red-800: hsla(0, 100%, 51%, 0.77);
+  --cpd-color-alpha-red-700: hsla(5, 100%, 51%, 0.5);
+  --cpd-color-alpha-red-600: hsla(7, 100%, 51%, 0.36);
+  --cpd-color-alpha-red-500: hsla(8, 100%, 51%, 0.27);
+  --cpd-color-alpha-red-400: hsla(8, 100%, 52%, 0.15);
+  --cpd-color-alpha-red-300: hsla(9, 100%, 54%, 0.08);
+  --cpd-color-alpha-red-200: hsla(7, 100%, 56%, 0.04);
+  --cpd-color-alpha-red-100: hsla(10, 100%, 61%, 0.03);
+  --cpd-color-alpha-gray-1400: hsla(223, 64%, 2%, 0.9);
+  --cpd-color-alpha-gray-1300: hsla(225, 57%, 3%, 0.84);
+  --cpd-color-alpha-gray-1200: hsla(213, 73%, 3%, 0.77);
+  --cpd-color-alpha-gray-1100: hsla(215, 74%, 5%, 0.71);
+  --cpd-color-alpha-gray-1000: hsla(218, 79%, 6%, 0.66);
+  --cpd-color-alpha-gray-900: hsla(213, 83%, 7%, 0.61);
+  --cpd-color-alpha-gray-800: hsla(213, 87%, 9%, 0.5);
+  --cpd-color-alpha-gray-700: hsla(215, 96%, 10%, 0.35);
+  --cpd-color-alpha-gray-600: hsla(212, 97%, 12%, 0.26);
+  --cpd-color-alpha-gray-500: hsla(212, 87%, 15%, 0.2);
+  --cpd-color-alpha-gray-400: hsla(213, 90%, 20%, 0.12);
+  --cpd-color-alpha-gray-300: hsla(216, 89%, 18%, 0.06);
+  --cpd-color-alpha-gray-200: hsla(200, 41%, 36%, 0.04);
+  --cpd-color-alpha-gray-100: hsla(210, 48%, 41%, 0.02);
   --cpd-color-pink-1400: #430017;
   --cpd-color-pink-1300: #5f002b;
   --cpd-color-pink-1200: #7e0642;
@@ -139,18 +293,21 @@
   --cpd-color-red-300: #ffefec;
   --cpd-color-red-200: #fff7f6;
   --cpd-color-red-100: #fffaf9;
-  --cpd-color-gray-1400: #0f1e2e;
-  --cpd-color-gray-1300: #1e2e3f;
-  --cpd-color-gray-1200: #2f4152;
-  --cpd-color-gray-1100: #415265;
-  --cpd-color-gray-1000: #4d5f72;
-  --cpd-color-gray-900: #5b6e81;
-  --cpd-color-gray-800: #798b9d;
-  --cpd-color-gray-700: #a2aebc;
-  --cpd-color-gray-600: #bcc5ce;
-  --cpd-color-gray-500: #ccd3da;
-  --cpd-color-gray-400: #e2e6ea;
-  --cpd-color-gray-300: #eef1f3;
-  --cpd-color-gray-200: #f7f8f9;
-  --cpd-color-gray-100: #fbfbfc;
+  --cpd-color-gray-1400: #1b1d22;
+  --cpd-color-gray-1300: #2b2d32;
+  --cpd-color-gray-1200: #3c4045;
+  --cpd-color-gray-1100: #4c5158;
+  --cpd-color-gray-1000: #595e67;
+  --cpd-color-gray-900: #656d77;
+  --cpd-color-gray-800: #818a95;
+  --cpd-color-gray-700: #a6adb7;
+  --cpd-color-gray-600: #bdc4cc;
+  --cpd-color-gray-500: #cdd3da;
+  --cpd-color-gray-400: #e1e6ec;
+  --cpd-color-gray-300: #f0f2f5;
+  --cpd-color-gray-200: #f7f9fa;
+  --cpd-color-gray-100: #fbfcfd;
+  --cpd-color-theme-bg: #ffffff;
+  --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-gray-300);
+  --cpd-color-bg-canvas-default-level-1: var(--cpd-color-theme-bg);
 }

package/assets/web/icons/$icons.json

@@ -0,0 +1 @@
+{"icon":{"chat":{"value":"icons/chat.svg","type":"icon"},"check-circle":{"value":"icons/check-circle.svg","type":"icon"},"check":{"value":"icons/check.svg","type":"icon"},"chevron":{"value":"icons/chevron.svg","type":"icon"},"close":{"value":"icons/close.svg","type":"icon"},"computer":{"value":"icons/computer.svg","type":"icon"},"delete":{"value":"icons/delete.svg","type":"icon"},"error":{"value":"icons/error.svg","type":"icon"},"info":{"value":"icons/info.svg","type":"icon"},"lock":{"value":"icons/lock.svg","type":"icon"},"mobile":{"value":"icons/mobile.svg","type":"icon"},"thread":{"value":"icons/thread.svg","type":"icon"},"user":{"value":"icons/user.svg","type":"icon"},"visibility-invisible":{"value":"icons/visibility-invisible.svg","type":"icon"},"visibility-visible":{"value":"icons/visibility-visible.svg","type":"icon"},"web-browser":{"value":"icons/web-browser.svg","type":"icon"}}}

package/assets/web/icons/chat.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+  <path fill="currentColor" d="m2.975 16.3-1.45 4.95a.936.936 0 0 0 .25 1 .936.936 0 0 0 1 .25l4.95-1.45a10.23 10.23 0 0 0 2.1.712c.717.159 1.45.238 2.2.238a9.738 9.738 0 0 0 3.9-.788 10.098 10.098 0 0 0 3.175-2.137c.9-.9 1.612-1.958 2.137-3.175a9.738 9.738 0 0 0 .788-3.9 9.738 9.738 0 0 0-.787-3.9A10.099 10.099 0 0 0 19.1 4.925c-.9-.9-1.958-1.612-3.175-2.137a9.738 9.738 0 0 0-3.9-.788 9.738 9.738 0 0 0-3.9.788A10.099 10.099 0 0 0 4.95 4.925c-.9.9-1.613 1.958-2.138 3.175a9.738 9.738 0 0 0-.787 3.9 10.179 10.179 0 0 0 .95 4.3Z"/>
+</svg>

package/assets/web/icons/check-circle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+  <path fill="currentColor" d="m10.6 13.8-2.15-2.15a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7L9.9 15.9c.2.2.433.3.7.3.267 0 .5-.1.7-.3l5.65-5.65a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275L10.6 13.8ZM12 22a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"/>
+</svg>

package/assets/web/icons/check.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M9.55 17.575c-.133 0-.258-.02-.375-.063a.878.878 0 0 1-.325-.212L4.55 13c-.183-.183-.27-.42-.263-.713.009-.291.105-.529.288-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275L9.55 15.15l8.475-8.475c.183-.183.42-.275.713-.275.291 0 .529.092.712.275.183.183.275.42.275.713 0 .291-.092.529-.275.712l-9.2 9.2c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"/>
+</svg>

package/assets/web/icons/chevron.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M12 14.95c-.133 0-.258-.02-.375-.063a.877.877 0 0 1-.325-.212L6.675 10.05a.892.892 0 0 1-.263-.688.977.977 0 0 1 .288-.687.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.925-3.925a.892.892 0 0 1 .688-.263.977.977 0 0 1 .687.288.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"/>
+</svg>

package/assets/web/icons/close.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+  <path fill="currentColor" d="m12 13.4-4.9 4.9a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l4.9-4.9-4.9-4.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.9 4.9 4.9-4.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L13.4 12l4.9 4.9a.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275L12 13.4Z"/>
+</svg>

package/assets/web/icons/computer.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M4 18c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 16V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 4 3h16c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v11c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 18H4Zm0-2h16V5H4v11Zm-2 5a.967.967 0 0 1-.712-.288A.968.968 0 0 1 1 20c0-.283.096-.52.288-.712A.967.967 0 0 1 2 19h20c.283 0 .52.096.712.288.192.191.288.429.288.712s-.096.52-.288.712A.968.968 0 0 1 22 21H2Z"/>
+</svg>

package/assets/web/icons/delete.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M7 21c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 5 19V6a.968.968 0 0 1-.713-.287A.968.968 0 0 1 4 5c0-.283.096-.52.287-.713A.968.968 0 0 1 5 4h4a.97.97 0 0 1 .287-.712A.968.968 0 0 1 10 3h4a.97.97 0 0 1 .713.288A.968.968 0 0 1 15 4h4a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 19 6v13c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 17 21H7Zm2-5c0 .283.096.52.287.712.192.192.43.288.713.288s.52-.096.713-.288A.968.968 0 0 0 11 16V9a.967.967 0 0 0-.287-.713A.968.968 0 0 0 10 8a.968.968 0 0 0-.713.287A.968.968 0 0 0 9 9v7Zm4 0c0 .283.096.52.287.712.192.192.43.288.713.288s.52-.096.713-.288A.968.968 0 0 0 15 16V9a.967.967 0 0 0-.287-.713A.968.968 0 0 0 14 8a.968.968 0 0 0-.713.287A.967.967 0 0 0 13 9v7Z"/>
+</svg>

package/assets/web/icons/error.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 15a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 16c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-4c.283 0 .52-.096.713-.287A.968.968 0 0 0 13 12V8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8v4c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 9a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"/>
+</svg>

package/assets/web/icons/info.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"/>
+</svg>

package/assets/web/icons/lock.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M6 22c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 20V10c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 8h1V6c0-1.383.487-2.563 1.463-3.538C9.438 1.487 10.617 1 12 1s2.563.488 3.537 1.462C16.512 3.438 17 4.617 17 6v2h1c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412v10c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 22H6ZM9 8h6V6c0-.833-.292-1.542-.875-2.125A2.893 2.893 0 0 0 12 3c-.833 0-1.542.292-2.125.875A2.893 2.893 0 0 0 9 6v2Z"/>
+</svg>

package/assets/web/icons/mobile.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M7 23c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 5 21V3c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 7 1h10c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v18c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 17 23H7Zm0-5h10V6H7v12Z"/>
+</svg>

package/assets/web/icons/thread.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18"><path fill="currentColor" d="M5 5.25a.75.75 0 0 0 0 1.5h8a.75.75 0 0 0 0-1.5H5ZM5 8.25a.75.75 0 0 0 0 1.5h4a.75.75 0 1 0 0-1.5H5Z"/><path fill="currentColor" fill-rule="evenodd" d="M3 .25A2.75 2.75 0 0 0 .25 3v14a.75.75 0 0 0 1.2.6L4.916 15c.217-.162.48-.25.75-.25H15A2.75 2.75 0 0 0 17.75 12V3A2.75 2.75 0 0 0 15 .25H3ZM1.75 3c0-.69.56-1.25 1.25-1.25h12c.69 0 1.25.56 1.25 1.25v9c0 .69-.56 1.25-1.25 1.25H5.666a2.75 2.75 0 0 0-1.65.55L1.75 15.5V3Z" clip-rule="evenodd"/></svg>

package/assets/web/icons/user.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+  <path fill="currentColor" stroke="currentColor" stroke-width=".025" d="m5.84 17.108.008.01.01-.008a10.422 10.422 0 0 1 2.846-1.536A9.725 9.725 0 0 1 12 15.012c1.149 0 2.247.188 3.296.562a10.42 10.42 0 0 1 2.846 1.536l.01.007.008-.009a7.742 7.742 0 0 0 1.364-2.329A7.85 7.85 0 0 0 20.012 12c0-2.22-.78-4.11-2.34-5.671C16.11 4.768 14.22 3.988 12 3.988c-2.22 0-4.11.78-5.671 2.34C4.768 7.89 3.988 9.78 3.988 12c0 .985.162 1.911.488 2.78.325.867.78 1.644 1.364 2.328Zm6.16-4.12c-.98 0-1.806-.337-2.479-1.01-.672-.672-1.009-1.498-1.009-2.478 0-.98.337-1.806 1.01-2.479.672-.672 1.498-1.008 2.478-1.008.98 0 1.806.336 2.479 1.008.672.673 1.009 1.499 1.009 2.479s-.337 1.806-1.01 2.479c-.672.672-1.498 1.009-2.478 1.009Zm0 9a9.725 9.725 0 0 1-3.895-.787 10.087 10.087 0 0 1-3.171-2.135 10.087 10.087 0 0 1-2.135-3.171A9.725 9.725 0 0 1 2.013 12c0-1.382.262-2.68.786-3.895a10.086 10.086 0 0 1 2.135-3.171 10.086 10.086 0 0 1 3.171-2.135A9.725 9.725 0 0 1 12 2.013c1.382 0 2.68.262 3.895.786a10.087 10.087 0 0 1 3.171 2.135c.899.899 1.61 1.956 2.135 3.171A9.725 9.725 0 0 1 21.988 12a9.73 9.73 0 0 1-.787 3.895 10.087 10.087 0 0 1-2.135 3.171 10.087 10.087 0 0 1-3.171 2.135 9.725 9.725 0 0 1-3.895.787Z"/>
+</svg>

package/assets/web/icons/visibility-invisible.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+  <path fill="currentColor" d="m19.3 16.5-3.2-3.2c.133-.283.233-.57.3-.863.067-.291.1-.604.1-.937 0-1.25-.438-2.312-1.313-3.187C14.313 7.438 13.25 7 12 7a4.2 4.2 0 0 0-.938.1 4.24 4.24 0 0 0-.862.3L7.65 4.85A11.08 11.08 0 0 1 12 4c2.383 0 4.525.63 6.425 1.888 1.9 1.258 3.325 2.895 4.275 4.912.05.083.083.188.1.313s.025.254.025.387a1.972 1.972 0 0 1-.125.7 11.49 11.49 0 0 1-1.438 2.375A10.467 10.467 0 0 1 19.3 16.5Zm-.2 5.4-3.5-3.45c-.583.183-1.17.32-1.762.413-.592.091-1.205.137-1.838.137-2.383 0-4.525-.63-6.425-1.887-1.9-1.259-3.325-2.896-4.275-4.913a.812.812 0 0 1-.1-.313 2.93 2.93 0 0 1 0-.762.796.796 0 0 1 .1-.3c.35-.75.767-1.442 1.25-2.075A13.291 13.291 0 0 1 4.15 7L2.075 4.9a.933.933 0 0 1-.275-.687c0-.275.1-.513.3-.713a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l17 17c.183.183.28.413.288.688a.93.93 0 0 1-.288.712.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275ZM12 16a4.9 4.9 0 0 0 .512-.025c.159-.017.33-.05.513-.1l-5.4-5.4c-.05.183-.083.354-.1.513a4.81 4.81 0 0 0-.025.512c0 1.25.438 2.313 1.313 3.188C9.687 15.562 10.75 16 12 16Zm2.65-4.15-3-3c.95-.15 1.725.117 2.325.8.6.683.825 1.417.675 2.2Z"/>
+</svg>

package/assets/web/icons/visibility-visible.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M12 16c1.25 0 2.313-.438 3.188-1.313.874-.874 1.312-1.937 1.312-3.187 0-1.25-.438-2.313-1.313-3.188C14.313 7.439 13.25 7 12 7c-1.25 0-2.313.438-3.188 1.313C7.939 9.187 7.5 10.25 7.5 11.5c0 1.25.438 2.313 1.313 3.188C9.687 15.562 10.75 16 12 16Zm0-1.8c-.75 0-1.387-.262-1.912-.787A2.604 2.604 0 0 1 9.3 11.5c0-.75.262-1.387.787-1.912A2.604 2.604 0 0 1 12 8.8c.75 0 1.387.262 1.912.787.525.526.788 1.163.788 1.913s-.262 1.387-.787 1.912A2.604 2.604 0 0 1 12 14.2Zm0 4.8c-2.317 0-4.433-.613-6.35-1.837-1.917-1.226-3.367-2.88-4.35-4.963a.812.812 0 0 1-.1-.313 2.93 2.93 0 0 1 0-.774.812.812 0 0 1 .1-.313c.983-2.083 2.433-3.738 4.35-4.963C7.567 4.614 9.683 4 12 4c2.317 0 4.433.612 6.35 1.838 1.917 1.224 3.367 2.879 4.35 4.962.05.083.083.188.1.313a2.925 2.925 0 0 1 0 .774.812.812 0 0 1-.1.313c-.983 2.083-2.433 3.738-4.35 4.963C16.433 18.387 14.317 19 12 19Z"/>
+</svg>

package/assets/web/icons/web-browser.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M4 20c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18V6c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 4 4h16c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412v12c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 20H4Zm0-2h16V8H4v10Z"/>
+</svg>