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

package/assets/web/js/cpdLightHc.js

@@ -36,7 +36,6 @@ export const cpdFontFamilyMono = "Inconsolata";
 export const cpdFontWeightRegular = "400";
 export const cpdFontWeightMedium = "500";
 export const cpdFontWeightSemibold = "600";
-export const cpdFontWeightBold = "700";
 export const cpdFontLineHeightMinimum = "1";
 export const cpdFontLineHeightTight = "1.25";
 export const cpdFontLineHeightRegular = "1.5";
@@ -77,157 +76,382 @@ export const cpdFontHeadingLgRegular = "400 1.75rem/1.25 Inter";
 export const cpdFontHeadingLgSemibold = "600 1.75rem/1.25 Inter";
 export const cpdFontHeadingXlRegular = "400 2rem/1.25 Inter";
 export const cpdFontHeadingXlSemibold = "600 2rem/1.25 Inter";
-export const cpdColorGray100 = "#081725";
-export const cpdColorGray200 = "#0c1b29";
-export const cpdColorGray300 = "#11202f";
-export const cpdColorGray400 = "#1a2939";
-export const cpdColorGray500 = "#263646";
-export const cpdColorGray600 = "#304051";
-export const cpdColorGray700 = "#3f5062";
-export const cpdColorGray800 = "#5b6d7f";
-export const cpdColorGray900 = "#79899b";
-export const cpdColorGray1000 = "#8c9aaa";
-export const cpdColorGray1100 = "#9fabb8";
-export const cpdColorGray1200 = "#bbc3cd";
-export const cpdColorGray1300 = "#d9dde3";
-export const cpdColorGray1400 = "#ebedf0";
-export const cpdColorRed100 = "#370000";
-export const cpdColorRed200 = "#3b0000";
-export const cpdColorRed300 = "#470000";
-export const cpdColorRed400 = "#570000";
-export const cpdColorRed500 = "#710000";
-export const cpdColorRed600 = "#830009";
-export const cpdColorRed700 = "#9e0c1e";
-export const cpdColorRed800 = "#d0212a";
-export const cpdColorRed900 = "#fd3d3c";
-export const cpdColorRed1000 = "#ff665d";
-export const cpdColorRed1100 = "#ff877b";
-export const cpdColorRed1200 = "#ffaea4";
-export const cpdColorRed1300 = "#ffd3cd";
-export const cpdColorRed1400 = "#ffe8e5";
-export const cpdColorOrange100 = "#380000";
-export const cpdColorOrange200 = "#3c0000";
-export const cpdColorOrange300 = "#470000";
-export const cpdColorOrange400 = "#580000";
-export const cpdColorOrange500 = "#710000";
-export const cpdColorOrange600 = "#820300";
-export const cpdColorOrange700 = "#972105";
-export const cpdColorOrange800 = "#b94607";
-export const cpdColorOrange900 = "#d9670d";
-export const cpdColorOrange1000 = "#ea7a12";
-export const cpdColorOrange1100 = "#f6913d";
-export const cpdColorOrange1200 = "#fbb27e";
-export const cpdColorOrange1300 = "#ffd5b8";
-export const cpdColorOrange1400 = "#ffe9db";
-export const cpdColorYellow100 = "#360000";
-export const cpdColorYellow200 = "#3a0300";
-export const cpdColorYellow300 = "#410900";
-export const cpdColorYellow400 = "#4c1400";
-export const cpdColorYellow500 = "#5b2300";
-export const cpdColorYellow600 = "#682e03";
-export const cpdColorYellow700 = "#7b3e03";
-export const cpdColorYellow800 = "#9d5b00";
-export const cpdColorYellow900 = "#bb7a00";
-export const cpdColorYellow1000 = "#cc8c00";
-export const cpdColorYellow1100 = "#db9f00";
-export const cpdColorYellow1200 = "#efbb0b";
-export const cpdColorYellow1300 = "#fedb52";
-export const cpdColorYellow1400 = "#ffedb0";
-export const cpdColorLime100 = "#001b00";
-export const cpdColorLime200 = "#001e00";
-export const cpdColorLime300 = "#002500";
-export const cpdColorLime400 = "#002f00";
-export const cpdColorLime500 = "#003e00";
-export const cpdColorLime600 = "#004a00";
-export const cpdColorLime700 = "#005c00";
-export const cpdColorLime800 = "#1d7c13";
-export const cpdColorLime900 = "#389b20";
-export const cpdColorLime1000 = "#47ad26";
-export const cpdColorLime1100 = "#56c02c";
-export const cpdColorLime1200 = "#76d94d";
-export const cpdColorLime1300 = "#b6eba3";
-export const cpdColorLime1400 = "#daf6d0";
-export const cpdColorGreen100 = "#001c0b";
-export const cpdColorGreen200 = "#001f0e";
-export const cpdColorGreen300 = "#002513";
-export const cpdColorGreen400 = "#002e1b";
-export const cpdColorGreen500 = "#003d29";
-export const cpdColorGreen600 = "#004832";
-export const cpdColorGreen700 = "#005a43";
-export const cpdColorGreen800 = "#007961";
-export const cpdColorGreen900 = "#129978";
-export const cpdColorGreen1000 = "#17ac84";
-export const cpdColorGreen1100 = "#1fc090";
-export const cpdColorGreen1200 = "#70d5ad";
-export const cpdColorGreen1300 = "#b5e8d1";
-export const cpdColorGreen1400 = "#d9f3e7";
-export const cpdColorCyan100 = "#001144";
-export const cpdColorCyan200 = "#001448";
-export const cpdColorCyan300 = "#001b4e";
-export const cpdColorCyan400 = "#002559";
-export const cpdColorCyan500 = "#003468";
-export const cpdColorCyan600 = "#003f74";
-export const cpdColorCyan700 = "#005188";
-export const cpdColorCyan800 = "#0271aa";
-export const cpdColorCyan900 = "#0093be";
-export const cpdColorCyan1000 = "#01a6c6";
-export const cpdColorCyan1100 = "#21bacd";
-export const cpdColorCyan1200 = "#76d0db";
-export const cpdColorCyan1300 = "#b8e5eb";
-export const cpdColorCyan1400 = "#d9f2f5";
-export const cpdColorBlue100 = "#00055a";
-export const cpdColorBlue200 = "#00095d";
-export const cpdColorBlue300 = "#001063";
-export const cpdColorBlue400 = "#001d6e";
-export const cpdColorBlue500 = "#062d80";
-export const cpdColorBlue600 = "#083890";
-export const cpdColorBlue700 = "#0b48ab";
-export const cpdColorBlue800 = "#0e67d8";
-export const cpdColorBlue900 = "#4187eb";
-export const cpdColorBlue1000 = "#5e99f0";
-export const cpdColorBlue1100 = "#7aabf4";
-export const cpdColorBlue1200 = "#a1c4f8";
-export const cpdColorBlue1300 = "#cadefc";
-export const cpdColorBlue1400 = "#e4eefe";
-export const cpdColorPurple100 = "#180050";
-export const cpdColorPurple200 = "#1c005a";
-export const cpdColorPurple300 = "#210068";
-export const cpdColorPurple400 = "#2c0080";
-export const cpdColorPurple500 = "#3d009e";
-export const cpdColorPurple600 = "#490bb1";
-export const cpdColorPurple700 = "#5a27c6";
-export const cpdColorPurple800 = "#7848ec";
-export const cpdColorPurple900 = "#9170f9";
-export const cpdColorPurple1000 = "#9e86fc";
-export const cpdColorPurple1100 = "#ad9cfe";
-export const cpdColorPurple1200 = "#c4baff";
-export const cpdColorPurple1300 = "#ded9ff";
-export const cpdColorPurple1400 = "#eeebff";
-export const cpdColorFuchsia100 = "#28003d";
-export const cpdColorFuchsia200 = "#2c0042";
-export const cpdColorFuchsia300 = "#37004e";
-export const cpdColorFuchsia400 = "#44005c";
-export const cpdColorFuchsia500 = "#560f6f";
-export const cpdColorFuchsia600 = "#65177d";
-export const cpdColorFuchsia700 = "#7d2394";
-export const cpdColorFuchsia800 = "#aa36ba";
-export const cpdColorFuchsia900 = "#c55fcf";
-export const cpdColorFuchsia1000 = "#cf78d7";
-export const cpdColorFuchsia1100 = "#d990de";
-export const cpdColorFuchsia1200 = "#e5b1e9";
-export const cpdColorFuchsia1300 = "#f1d4f3";
-export const cpdColorFuchsia1400 = "#f8e8f9";
-export const cpdColorPink100 = "#37000f";
-export const cpdColorPink200 = "#3c0012";
-export const cpdColorPink300 = "#450018";
-export const cpdColorPink400 = "#550024";
-export const cpdColorPink500 = "#6c0035";
-export const cpdColorPink600 = "#7b0c41";
-export const cpdColorPink700 = "#98114f";
-export const cpdColorPink800 = "#ce1865";
-export const cpdColorPink900 = "#f4417d";
-export const cpdColorPink1000 = "#fa648f";
-export const cpdColorPink1100 = "#fe84a2";
-export const cpdColorPink1200 = "#ffabbd";
-export const cpdColorPink1300 = "#ffd1db";
-export const cpdColorPink1400 = "#ffe7ec";
+export const cpdIconChat = "icons/chat.svg";
+export const cpdIconCheckCircle = "icons/check-circle.svg";
+export const cpdIconCheck = "icons/check.svg";
+export const cpdIconChevron = "icons/chevron.svg";
+export const cpdIconClose = "icons/close.svg";
+export const cpdIconComputer = "icons/computer.svg";
+export const cpdIconDelete = "icons/delete.svg";
+export const cpdIconError = "icons/error.svg";
+export const cpdIconInfo = "icons/info.svg";
+export const cpdIconLock = "icons/lock.svg";
+export const cpdIconMobile = "icons/mobile.svg";
+export const cpdIconThread = "icons/thread.svg";
+export const cpdIconUser = "icons/user.svg";
+export const cpdIconVisibilityInvisible = "icons/visibility-invisible.svg";
+export const cpdIconVisibilityVisible = "icons/visibility-visible.svg";
+export const cpdIconWebBrowser = "icons/web-browser.svg";
+export const cpdColorThemeBg = "#ffffff";
+export const cpdColorGray100 = "#f7f9fa";
+export const cpdColorGray200 = "#f0f2f5";
+export const cpdColorGray300 = "#e1e6ec";
+export const cpdColorGray400 = "#d7dce3";
+export const cpdColorGray500 = "#bdc4cc";
+export const cpdColorGray600 = "#a6adb7";
+export const cpdColorGray700 = "#878f9b";
+export const cpdColorGray800 = "#6c737e";
+export const cpdColorGray900 = "#474a51";
+export const cpdColorGray1000 = "#3f4248";
+export const cpdColorGray1100 = "#35383d";
+export const cpdColorGray1200 = "#2d3034";
+export const cpdColorGray1300 = "#1f2126";
+export const cpdColorGray1400 = "#1a1c21";
+export const cpdColorRed100 = "#fff7f6";
+export const cpdColorRed200 = "#ffefec";
+export const cpdColorRed300 = "#ffdfda";
+export const cpdColorRed400 = "#ffd1ca";
+export const cpdColorRed500 = "#ffafa5";
+export const cpdColorRed600 = "#ff8c81";
+export const cpdColorRed700 = "#ff4e49";
+export const cpdColorRed800 = "#e11e2a";
+export const cpdColorRed900 = "#99001a";
+export const cpdColorRed1000 = "#8b000c";
+export const cpdColorRed1100 = "#770000";
+export const cpdColorRed1200 = "#670000";
+export const cpdColorRed1300 = "#4c0000";
+export const cpdColorRed1400 = "#420000";
+export const cpdColorOrange100 = "#fff6ef";
+export const cpdColorOrange200 = "#ffefe4";
+export const cpdColorOrange300 = "#ffdfc8";
+export const cpdColorOrange400 = "#ffd4b5";
+export const cpdColorOrange500 = "#fdb37c";
+export const cpdColorOrange600 = "#f89440";
+export const cpdColorOrange700 = "#e26e00";
+export const cpdColorOrange800 = "#c44d00";
+export const cpdColorOrange900 = "#931700";
+export const cpdColorOrange1000 = "#890800";
+export const cpdColorOrange1100 = "#770000";
+export const cpdColorOrange1200 = "#670000";
+export const cpdColorOrange1300 = "#4c0000";
+export const cpdColorOrange1400 = "#420000";
+export const cpdColorYellow100 = "#fff8e0";
+export const cpdColorYellow200 = "#fff2c1";
+export const cpdColorYellow300 = "#ffe484";
+export const cpdColorYellow400 = "#ffda49";
+export const cpdColorYellow500 = "#f1bd00";
+export const cpdColorYellow600 = "#dea200";
+export const cpdColorYellow700 = "#c38100";
+export const cpdColorYellow800 = "#a76300";
+export const cpdColorYellow900 = "#773800";
+export const cpdColorYellow1000 = "#6e3100";
+export const cpdColorYellow1100 = "#612600";
+export const cpdColorYellow1200 = "#571d00";
+export const cpdColorYellow1300 = "#450c00";
+export const cpdColorYellow1400 = "#3f0500";
+export const cpdColorLime100 = "#f1fcee";
+export const cpdColorLime200 = "#e0f8d9";
+export const cpdColorLime300 = "#c8f1ba";
+export const cpdColorLime400 = "#afeb9b";
+export const cpdColorLime500 = "#76db4c";
+export const cpdColorLime600 = "#54c424";
+export const cpdColorLime700 = "#3aa31a";
+export const cpdColorLime800 = "#1f850f";
+export const cpdColorLime900 = "#005700";
+export const cpdColorLime1000 = "#004f00";
+export const cpdColorLime1100 = "#004200";
+export const cpdColorLime1200 = "#003900";
+export const cpdColorLime1300 = "#002900";
+export const cpdColorLime1400 = "#002200";
+export const cpdColorGreen100 = "#f1fbf6";
+export const cpdColorGreen200 = "#e3f7ed";
+export const cpdColorGreen300 = "#c6eedb";
+export const cpdColorGreen400 = "#afe8ce";
+export const cpdColorGreen500 = "#71d7ae";
+export const cpdColorGreen600 = "#0bc491";
+export const cpdColorGreen700 = "#00a27c";
+export const cpdColorGreen800 = "#008268";
+export const cpdColorGreen900 = "#00553d";
+export const cpdColorGreen1000 = "#004d36";
+export const cpdColorGreen1100 = "#00402b";
+export const cpdColorGreen1200 = "#003723";
+export const cpdColorGreen1300 = "#002715";
+export const cpdColorGreen1400 = "#00210f";
+export const cpdColorCyan100 = "#f1fafb";
+export const cpdColorCyan200 = "#e3f5f8";
+export const cpdColorCyan300 = "#c7ecf0";
+export const cpdColorCyan400 = "#b1e4eb";
+export const cpdColorCyan500 = "#76d1dd";
+export const cpdColorCyan600 = "#15becf";
+export const cpdColorCyan700 = "#009ac3";
+export const cpdColorCyan800 = "#007ab3";
+export const cpdColorCyan900 = "#004c84";
+export const cpdColorCyan1000 = "#00447b";
+export const cpdColorCyan1100 = "#00376e";
+export const cpdColorCyan1200 = "#002e64";
+export const cpdColorCyan1300 = "#001e53";
+export const cpdColorCyan1400 = "#00174d";
+export const cpdColorBlue100 = "#f4f8ff";
+export const cpdColorBlue200 = "#e9f2ff";
+export const cpdColorBlue300 = "#d8e7fe";
+export const cpdColorBlue400 = "#c8ddfd";
+export const cpdColorBlue500 = "#a3c6fa";
+export const cpdColorBlue600 = "#7eaff6";
+export const cpdColorBlue700 = "#4a8ef0";
+export const cpdColorBlue800 = "#046ee8";
+export const cpdColorBlue900 = "#0543a7";
+export const cpdColorBlue1000 = "#053b9a";
+export const cpdColorBlue1100 = "#043088";
+export const cpdColorBlue1200 = "#03277b";
+export const cpdColorBlue1300 = "#001569";
+export const cpdColorBlue1400 = "#000c63";
+export const cpdColorPurple100 = "#f8f7ff";
+export const cpdColorPurple200 = "#f1efff";
+export const cpdColorPurple300 = "#e6e2ff";
+export const cpdColorPurple400 = "#ddd8ff";
+export const cpdColorPurple500 = "#c5bbff";
+export const cpdColorPurple600 = "#b1a0ff";
+export const cpdColorPurple700 = "#9778fe";
+export const cpdColorPurple800 = "#824ef9";
+export const cpdColorPurple900 = "#571cc4";
+export const cpdColorPurple1000 = "#4f0dba";
+export const cpdColorPurple1100 = "#4200a6";
+export const cpdColorPurple1200 = "#360094";
+export const cpdColorPurple1300 = "#240070";
+export const cpdColorPurple1400 = "#1f0062";
+export const cpdColorFuchsia100 = "#fcf5fd";
+export const cpdColorFuchsia200 = "#faeefb";
+export const cpdColorFuchsia300 = "#f6dff7";
+export const cpdColorFuchsia400 = "#f1d2f3";
+export const cpdColorFuchsia500 = "#e7b2ea";
+export const cpdColorFuchsia600 = "#db93e1";
+export const cpdColorFuchsia700 = "#cb68d4";
+export const cpdColorFuchsia800 = "#b937c6";
+export const cpdColorFuchsia900 = "#781c90";
+export const cpdColorFuchsia1000 = "#6c1785";
+export const cpdColorFuchsia1100 = "#5c0f76";
+export const cpdColorFuchsia1200 = "#52026c";
+export const cpdColorFuchsia1300 = "#3b0053";
+export const cpdColorFuchsia1400 = "#32004a";
+export const cpdColorPink100 = "#fff5f7";
+export const cpdColorPink200 = "#ffecf0";
+export const cpdColorPink300 = "#ffdee5";
+export const cpdColorPink400 = "#ffd0da";
+export const cpdColorPink500 = "#ffadc0";
+export const cpdColorPink600 = "#ff88a6";
+export const cpdColorPink700 = "#f94e84";
+export const cpdColorPink800 = "#e00c6a";
+export const cpdColorPink900 = "#92084b";
+export const cpdColorPink1000 = "#840745";
+export const cpdColorPink1100 = "#72003a";
+export const cpdColorPink1200 = "#64002f";
+export const cpdColorPink1300 = "#4a001c";
+export const cpdColorPink1400 = "#410015";
+export const cpdColorAlphaGray100 = "hsla(200, 41%, 36%, 0.04)";
+export const cpdColorAlphaGray200 = "hsla(216, 89%, 18%, 0.06)";
+export const cpdColorAlphaGray300 = "hsla(213, 90%, 20%, 0.12)";
+export const cpdColorAlphaGray400 = "hsla(215, 88%, 17%, 0.16)";
+export const cpdColorAlphaGray500 = "hsla(212, 97%, 12%, 0.26)";
+export const cpdColorAlphaGray600 = "hsla(215, 96%, 10%, 0.35)";
+export const cpdColorAlphaGray700 = "hsla(216, 81%, 10%, 0.48)";
+export const cpdColorAlphaGray800 = "hsla(217, 89%, 7%, 0.58)";
+export const cpdColorAlphaGray900 = "hsla(223, 70%, 4%, 0.73)";
+export const cpdColorAlphaGray1000 = "hsla(220, 75%, 3%, 0.76)";
+export const cpdColorAlphaGray1100 = "hsla(222, 63%, 3%, 0.8)";
+export const cpdColorAlphaGray1200 = "hsla(210, 67%, 2%, 0.83)";
+export const cpdColorAlphaGray1300 = "hsla(218, 100%, 2%, 0.88)";
+export const cpdColorAlphaGray1400 = "hsla(223, 78%, 2%, 0.9)";
+export const cpdColorAlphaRed100 = "hsla(7, 100%, 56%, 0.04)";
+export const cpdColorAlphaRed200 = "hsla(9, 100%, 54%, 0.08)";
+export const cpdColorAlphaRed300 = "hsla(8, 100%, 52%, 0.15)";
+export const cpdColorAlphaRed400 = "hsla(8, 100%, 51%, 0.21)";
+export const cpdColorAlphaRed500 = "hsla(7, 100%, 51%, 0.36)";
+export const cpdColorAlphaRed600 = "hsla(5, 100%, 51%, 0.5)";
+export const cpdColorAlphaRed700 = "hsla(2, 100%, 50%, 0.72)";
+export const cpdColorAlphaRed800 = "hsla(356, 98%, 44%, 0.89)";
+export const cpdColorAlphaRed900 = "hsl(350, 100%, 30%, 1)";
+export const cpdColorAlphaRed1000 = "hsl(355, 100%, 27%, 1)";
+export const cpdColorAlphaRed1100 = "hsl(0, 100%, 23%, 1)";
+export const cpdColorAlphaRed1200 = "hsl(0, 100%, 20%, 1)";
+export const cpdColorAlphaRed1300 = "hsl(0, 100%, 15%, 1)";
+export const cpdColorAlphaRed1400 = "hsl(0, 100%, 13%, 1)";
+export const cpdColorAlphaOrange100 = "hsla(26, 100%, 55%, 0.07)";
+export const cpdColorAlphaOrange200 = "hsla(24, 100%, 52%, 0.11)";
+export const cpdColorAlphaOrange300 = "hsla(25, 100%, 51%, 0.22)";
+export const cpdColorAlphaOrange400 = "hsla(25, 100%, 52%, 0.3)";
+export const cpdColorAlphaOrange500 = "hsla(26, 98%, 50%, 0.52)";
+export const cpdColorAlphaOrange600 = "hsla(27, 100%, 48%, 0.75)";
+export const cpdColorAlphaOrange700 = "hsl(29, 100%, 44%, 1)";
+export const cpdColorAlphaOrange800 = "hsl(24, 100%, 38%, 1)";
+export const cpdColorAlphaOrange900 = "hsl(9, 100%, 29%, 1)";
+export const cpdColorAlphaOrange1000 = "hsl(4, 100%, 27%, 1)";
+export const cpdColorAlphaOrange1100 = "hsl(0, 100%, 23%, 1)";
+export const cpdColorAlphaOrange1200 = "hsl(0, 100%, 20%, 1)";
+export const cpdColorAlphaOrange1300 = "hsl(0, 100%, 15%, 1)";
+export const cpdColorAlphaOrange1400 = "hsl(0, 100%, 13%, 1)";
+export const cpdColorAlphaYellow100 = "hsla(46, 100%, 53%, 0.13)";
+export const cpdColorAlphaYellow200 = "hsla(47, 100%, 51%, 0.25)";
+export const cpdColorAlphaYellow300 = "hsla(47, 100%, 51%, 0.49)";
+export const cpdColorAlphaYellow400 = "hsla(48, 100%, 50%, 0.72)";
+export const cpdColorAlphaYellow500 = "hsl(47, 100%, 47%, 1)";
+export const cpdColorAlphaYellow600 = "hsl(44, 100%, 44%, 1)";
+export const cpdColorAlphaYellow700 = "hsl(40, 100%, 38%, 1)";
+export const cpdColorAlphaYellow800 = "hsl(36, 100%, 33%, 1)";
+export const cpdColorAlphaYellow900 = "hsl(28, 100%, 23%, 1)";
+export const cpdColorAlphaYellow1000 = "hsl(27, 100%, 22%, 1)";
+export const cpdColorAlphaYellow1100 = "hsl(24, 100%, 19%, 1)";
+export const cpdColorAlphaYellow1200 = "hsl(20, 100%, 17%, 1)";
+export const cpdColorAlphaYellow1300 = "hsl(10, 100%, 14%, 1)";
+export const cpdColorAlphaYellow1400 = "hsl(5, 100%, 12%, 1)";
+export const cpdColorAlphaLime100 = "hsla(107, 89%, 44%, 0.07)";
+export const cpdColorAlphaLime200 = "hsla(107, 98%, 41%, 0.15)";
+export const cpdColorAlphaLime300 = "hsla(105, 92%, 42%, 0.28)";
+export const cpdColorAlphaLime400 = "hsla(105, 95%, 41%, 0.4)";
+export const cpdColorAlphaLime500 = "hsla(102, 97%, 41%, 0.71)";
+export const cpdColorAlphaLime600 = "hsla(102, 100%, 37%, 0.86)";
+export const cpdColorAlphaLime700 = "hsla(106, 99%, 30%, 0.9)";
+export const cpdColorAlphaLime800 = "hsla(112, 97%, 25%, 0.95)";
+export const cpdColorAlphaLime900 = "hsl(120, 100%, 17%, 1)";
+export const cpdColorAlphaLime1000 = "hsl(120, 100%, 16%, 1)";
+export const cpdColorAlphaLime1100 = "hsl(120, 100%, 13%, 1)";
+export const cpdColorAlphaLime1200 = "hsl(120, 100%, 11%, 1)";
+export const cpdColorAlphaLime1300 = "hsl(120, 100%, 8%, 1)";
+export const cpdColorAlphaLime1400 = "hsl(120, 100%, 7%, 1)";
+export const cpdColorAlphaGreen100 = "hsla(150, 79%, 41%, 0.06)";
+export const cpdColorAlphaGreen200 = "hsla(150, 100%, 36%, 0.11)";
+export const cpdColorAlphaGreen300 = "hsla(151, 93%, 37%, 0.23)";
+export const cpdColorAlphaGreen400 = "hsla(153, 95%, 37%, 0.32)";
+export const cpdColorAlphaGreen500 = "hsla(156, 99%, 36%, 0.56)";
+export const cpdColorAlphaGreen600 = "hsla(163, 99%, 38%, 0.96)";
+export const cpdColorAlphaGreen700 = "hsl(166, 100%, 32%, 1)";
+export const cpdColorAlphaGreen800 = "hsl(168, 100%, 26%, 1)";
+export const cpdColorAlphaGreen900 = "hsl(163, 100%, 17%, 1)";
+export const cpdColorAlphaGreen1000 = "hsl(162, 100%, 15%, 1)";
+export const cpdColorAlphaGreen1100 = "hsl(160, 100%, 13%, 1)";
+export const cpdColorAlphaGreen1200 = "hsl(158, 100%, 11%, 1)";
+export const cpdColorAlphaGreen1300 = "hsl(152, 100%, 8%, 1)";
+export const cpdColorAlphaGreen1400 = "hsl(147, 100%, 7%, 1)";
+export const cpdColorAlphaCyan100 = "hsla(186, 79%, 41%, 0.06)";
+export const cpdColorAlphaCyan200 = "hsla(188, 100%, 38%, 0.11)";
+export const cpdColorAlphaCyan300 = "hsla(186, 100%, 37%, 0.22)";
+export const cpdColorAlphaCyan400 = "hsla(187, 97%, 38%, 0.31)";
+export const cpdColorAlphaCyan500 = "hsla(187, 99%, 38%, 0.54)";
+export const cpdColorAlphaCyan600 = "hsla(186, 99%, 40%, 0.92)";
+export const cpdColorAlphaCyan700 = "hsl(193, 100%, 38%, 1)";
+export const cpdColorAlphaCyan800 = "hsl(199, 100%, 35%, 1)";
+export const cpdColorAlphaCyan900 = "hsl(205, 100%, 26%, 1)";
+export const cpdColorAlphaCyan1000 = "hsl(207, 100%, 24%, 1)";
+export const cpdColorAlphaCyan1100 = "hsl(210, 100%, 22%, 1)";
+export const cpdColorAlphaCyan1200 = "hsl(212, 100%, 20%, 1)";
+export const cpdColorAlphaCyan1300 = "hsl(218, 100%, 16%, 1)";
+export const cpdColorAlphaCyan1400 = "hsl(222, 100%, 15%, 1)";
+export const cpdColorAlphaBlue100 = "hsla(218, 100%, 57%, 0.05)";
+export const cpdColorAlphaBlue200 = "hsla(215, 100%, 52%, 0.09)";
+export const cpdColorAlphaBlue300 = "hsla(216, 95%, 51%, 0.16)";
+export const cpdColorAlphaBlue400 = "hsla(216, 96%, 49%, 0.22)";
+export const cpdColorAlphaBlue500 = "hsla(216, 95%, 48%, 0.37)";
+export const cpdColorAlphaBlue600 = "hsla(215, 98%, 47%, 0.51)";
+export const cpdColorAlphaBlue700 = "hsla(215, 100%, 46%, 0.71)";
+export const cpdColorAlphaBlue800 = "hsla(212, 99%, 46%, 0.99)";
+export const cpdColorAlphaBlue900 = "hsla(217, 98%, 33%, 0.99)";
+export const cpdColorAlphaBlue1000 = "hsla(218, 97%, 30%, 0.99)";
+export const cpdColorAlphaBlue1100 = "hsla(220, 99%, 27%, 0.99)";
+export const cpdColorAlphaBlue1200 = "hsla(222, 100%, 24%, 0.99)";
+export const cpdColorAlphaBlue1300 = "hsl(228, 100%, 21%, 1)";
+export const cpdColorAlphaBlue1400 = "hsl(233, 100%, 19%, 1)";
+export const cpdColorAlphaPurple100 = "hsla(248, 100%, 61%, 0.04)";
+export const cpdColorAlphaPurple200 = "hsla(248, 100%, 55%, 0.07)";
+export const cpdColorAlphaPurple300 = "hsla(248, 100%, 53%, 0.12)";
+export const cpdColorAlphaPurple400 = "hsla(248, 100%, 52%, 0.16)";
+export const cpdColorAlphaPurple500 = "hsla(249, 100%, 51%, 0.27)";
+export const cpdColorAlphaPurple600 = "hsla(251, 100%, 51%, 0.38)";
+export const cpdColorAlphaPurple700 = "hsla(254, 100%, 50%, 0.53)";
+export const cpdColorAlphaPurple800 = "hsla(258, 98%, 49%, 0.7)";
+export const cpdColorAlphaPurple900 = "hsla(261, 97%, 38%, 0.9)";
+export const cpdColorAlphaPurple1000 = "hsla(263, 100%, 36%, 0.95)";
+export const cpdColorAlphaPurple1100 = "hsl(264, 100%, 33%, 1)";
+export const cpdColorAlphaPurple1200 = "hsl(262, 100%, 29%, 1)";
+export const cpdColorAlphaPurple1300 = "hsl(259, 100%, 22%, 1)";
+export const cpdColorAlphaPurple1400 = "hsl(259, 100%, 19%, 1)";
+export const cpdColorAlphaFuchsia100 = "hsla(293, 95%, 41%, 0.04)";
+export const cpdColorAlphaFuchsia200 = "hsla(295, 89%, 41%, 0.07)";
+export const cpdColorAlphaFuchsia300 = "hsla(298, 91%, 40%, 0.13)";
+export const cpdColorAlphaFuchsia400 = "hsla(296, 95%, 38%, 0.18)";
+export const cpdColorAlphaFuchsia500 = "hsla(297, 93%, 38%, 0.31)";
+export const cpdColorAlphaFuchsia600 = "hsla(295, 96%, 37%, 0.43)";
+export const cpdColorAlphaFuchsia700 = "hsla(295, 97%, 37%, 0.6)";
+export const cpdColorAlphaFuchsia800 = "hsla(294, 98%, 36%, 0.79)";
+export const cpdColorAlphaFuchsia900 = "hsla(287, 96%, 27%, 0.9)";
+export const cpdColorAlphaFuchsia1000 = "hsla(286, 100%, 24%, 0.91)";
+export const cpdColorAlphaFuchsia1100 = "hsla(285, 97%, 22%, 0.95)";
+export const cpdColorAlphaFuchsia1200 = "hsl(285, 96%, 22%, 1)";
+export const cpdColorAlphaFuchsia1300 = "hsl(283, 100%, 16%, 1)";
+export const cpdColorAlphaFuchsia1400 = "hsl(281, 100%, 15%, 1)";
+export const cpdColorAlphaPink100 = "hsla(348, 100%, 51%, 0.04)";
+export const cpdColorAlphaPink200 = "hsla(347, 100%, 54%, 0.08)";
+export const cpdColorAlphaPink300 = "hsla(347, 100%, 50%, 0.13)";
+export const cpdColorAlphaPink400 = "hsla(347, 100%, 52%, 0.19)";
+export const cpdColorAlphaPink500 = "hsla(346, 100%, 51%, 0.33)";
+export const cpdColorAlphaPink600 = "hsla(345, 100%, 50%, 0.47)";
+export const cpdColorAlphaPink700 = "hsla(341, 98%, 49%, 0.7)";
+export const cpdColorAlphaPink800 = "hsla(333, 98%, 44%, 0.96)";
+export const cpdColorAlphaPink900 = "hsla(331, 100%, 28%, 0.97)";
+export const cpdColorAlphaPink1000 = "hsla(330, 97%, 26%, 0.98)";
+export const cpdColorAlphaPink1100 = "hsl(329, 100%, 22%, 1)";
+export const cpdColorAlphaPink1200 = "hsl(332, 100%, 20%, 1)";
+export const cpdColorAlphaPink1300 = "hsl(337, 100%, 15%, 1)";
+export const cpdColorAlphaPink1400 = "hsl(341, 100%, 13%, 1)";
+export const cpdColorTextPrimary = "#1a1c21";
+export const cpdColorTextSecondary = "#474a51";
+export const cpdColorTextPlaceholder = "#6c737e";
+export const cpdColorTextDisabled = "#6c737e";
+export const cpdColorTextActionPrimary = "#1a1c21";
+export const cpdColorTextActionAccent = "#00553d";
+export const cpdColorTextLinkExternal = "#0543a7";
+export const cpdColorTextCriticalPrimary = "#99001a";
+export const cpdColorTextSuccessPrimary = "#00553d";
+export const cpdColorTextInfoPrimary = "#0543a7";
+export const cpdColorTextOnSolidPrimary = "#ffffff";
+export const cpdColorBgSubtlePrimary = "#d7dce3";
+export const cpdColorBgSubtleSecondary = "#e1e6ec";
+export const cpdColorBgCanvasDefault = "#ffffff";
+export const cpdColorBgCanvasDisabled = "#f0f2f5";
+export const cpdColorBgCanvasDefaultLevel1 = "#ffffff";
+export const cpdColorBgActionPrimaryRest = "#1a1c21";
+export const cpdColorBgActionPrimaryHovered = "#2d3034";
+export const cpdColorBgActionPrimaryPressed = "#35383d";
+export const cpdColorBgActionPrimaryDisabled = "#878f9b";
+export const cpdColorBgActionSecondaryRest = "#ffffff";
+export const cpdColorBgActionSecondaryHovered = "hsla(216, 89%, 18%, 0.06)";
+export const cpdColorBgActionSecondaryPressed = "hsla(213, 90%, 20%, 0.12)";
+export const cpdColorBgCriticalPrimary = "#99001a";
+export const cpdColorBgCriticalHovered = "#8b000c";
+export const cpdColorBgCriticalSubtle = "#ffefec";
+export const cpdColorBgCriticalSubtleHovered = "#ffdfda";
+export const cpdColorBgSuccessSubtle = "#e3f7ed";
+export const cpdColorBgInfoSubtle = "#e9f2ff";
+export const cpdColorBgSubtleSecondaryLevel0 = "#e1e6ec";
+export const cpdColorBorderDisabled = "#bdc4cc";
+export const cpdColorBorderFocused = "#0543a7";
+export const cpdColorBorderInteractivePrimary = "#6c737e";
+export const cpdColorBorderInteractiveSecondary = "#a6adb7";
+export const cpdColorBorderInteractiveHovered = "#35383d";
+export const cpdColorBorderCriticalPrimary = "#99001a";
+export const cpdColorBorderCriticalHovered = "#8b000c";
+export const cpdColorBorderCriticalSubtle = "#ffafa5";
+export const cpdColorBorderSuccessSubtle = "#71d7ae";
+export const cpdColorBorderInfoSubtle = "#a3c6fa";
+export const cpdColorIconPrimary = "#1a1c21";
+export const cpdColorIconSecondary = "#474a51";
+export const cpdColorIconTertiary = "#6c737e";
+export const cpdColorIconQuaternary = "#878f9b";
+export const cpdColorIconDisabled = "#878f9b";
+export const cpdColorIconPrimaryAlpha = "hsla(223, 78%, 2%, 0.9)";
+export const cpdColorIconSecondaryAlpha = "hsla(223, 70%, 4%, 0.73)";
+export const cpdColorIconTertiaryAlpha = "hsla(217, 89%, 7%, 0.58)";
+export const cpdColorIconQuaternaryAlpha = "hsla(216, 81%, 10%, 0.48)";
+export const cpdColorIconAccentTertiary = "#008268";
+export const cpdColorIconCriticalPrimary = "#99001a";
+export const cpdColorIconSuccessPrimary = "#00553d";
+export const cpdColorIconInfoPrimary = "#0543a7";
+export const cpdColorIconOnSolidPrimary = "#ffffff";

package/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/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/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/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/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/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/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/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/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/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/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/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>