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

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";
@@ -48,6 +47,7 @@ export const cpdFontSizeHeadingSm = "1.25rem";
 export const cpdFontSizeHeadingMd = "1.5rem";
 export const cpdFontSizeHeadingLg = "1.75rem";
 export const cpdFontSizeHeadingXl = "2rem";
+export const cpdFontSizeRoot = "1rem";
 export const cpdFontLetterSpacingBodyXs = "0.0048em";
 export const cpdFontLetterSpacingBodySm = "-0.0031em";
 export const cpdFontLetterSpacingBodyMd = "-0.0088em";
@@ -77,157 +77,429 @@ 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 cpdIconArrowLeft = "icons/arrow-left.svg";
+export const cpdIconArrowRight = "icons/arrow-right.svg";
+export const cpdIconArrowUpRight = "icons/arrow-up-right.svg";
+export const cpdIconBlock = "icons/block.svg";
+export const cpdIconChatNew = "icons/chat-new.svg";
+export const cpdIconChatProblem = "icons/chat-problem.svg";
+export const cpdIconChat = "icons/chat.svg";
+export const cpdIconCheckCircle = "icons/check-circle.svg";
+export const cpdIconCheck = "icons/check.svg";
+export const cpdIconChevronDown = "icons/chevron-down.svg";
+export const cpdIconChevronLeft = "icons/chevron-left.svg";
+export const cpdIconChevronRight = "icons/chevron-right.svg";
+export const cpdIconChevronUpDown = "icons/chevron-up-down.svg";
+export const cpdIconClose = "icons/close.svg";
+export const cpdIconComputer = "icons/computer.svg";
+export const cpdIconDelete = "icons/delete.svg";
+export const cpdIconDownload = "icons/download.svg";
+export const cpdIconDragGrid = "icons/drag-grid.svg";
+export const cpdIconDragList = "icons/drag-list.svg";
+export const cpdIconError = "icons/error.svg";
+export const cpdIconExportArchive = "icons/export-archive.svg";
+export const cpdIconExtensions = "icons/extensions.svg";
+export const cpdIconFavouriteOff = "icons/favourite-off.svg";
+export const cpdIconFavouriteOn = "icons/favourite-on.svg";
+export const cpdIconFiles = "icons/files.svg";
+export const cpdIconFilter = "icons/filter.svg";
+export const cpdIconInfo = "icons/info.svg";
+export const cpdIconLeave = "icons/leave.svg";
+export const cpdIconLink = "icons/link.svg";
+export const cpdIconLockOff = "icons/lock-off.svg";
+export const cpdIconLock = "icons/lock.svg";
+export const cpdIconMarkerReadReceipts = "icons/marker-read-receipts.svg";
+export const cpdIconMention = "icons/mention.svg";
+export const cpdIconMobile = "icons/mobile.svg";
+export const cpdIconNotificationsOff = "icons/notifications-off.svg";
+export const cpdIconNotificationsSolidOff = "icons/notifications-solid-off.svg";
+export const cpdIconNotificationsSolid = "icons/notifications-solid.svg";
+export const cpdIconNotifications = "icons/notifications.svg";
+export const cpdIconOffline = "icons/offline.svg";
+export const cpdIconOverflowHorizontal = "icons/overflow-horizontal.svg";
+export const cpdIconOverflowVertical = "icons/overflow-vertical.svg";
+export const cpdIconPolls = "icons/polls.svg";
+export const cpdIconPopOut = "icons/pop-out.svg";
+export const cpdIconPublic = "icons/public.svg";
+export const cpdIconSearch = "icons/search.svg";
+export const cpdIconSettingsSolid = "icons/settings-solid.svg";
+export const cpdIconSettings = "icons/settings.svg";
+export const cpdIconShareAndroid = "icons/share-android.svg";
+export const cpdIconShare = "icons/share.svg";
+export const cpdIconThreadsSolid = "icons/threads-solid.svg";
+export const cpdIconThreads = "icons/threads.svg";
+export const cpdIconUserAddSolid = "icons/user-add-solid.svg";
+export const cpdIconUserAdd = "icons/user-add.svg";
+export const cpdIconUserProfile = "icons/user-profile.svg";
+export const cpdIconVerified = "icons/verified.svg";
+export const cpdIconVideoCallDeclined = "icons/video-call-declined.svg";
+export const cpdIconVideoCallMissed = "icons/video-call-missed.svg";
+export const cpdIconVideoCallOff = "icons/video-call-off.svg";
+export const cpdIconVideoCall = "icons/video-call.svg";
+export const cpdIconVisibilityOff = "icons/visibility-off.svg";
+export const cpdIconVisibilityOn = "icons/visibility-on.svg";
+export const cpdIconVoiceCall = "icons/voice-call.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":{"arrow-left":{"value":"icons/arrow-left.svg","type":"icon"},"arrow-right":{"value":"icons/arrow-right.svg","type":"icon"},"arrow-up-right":{"value":"icons/arrow-up-right.svg","type":"icon"},"block":{"value":"icons/block.svg","type":"icon"},"chat-new":{"value":"icons/chat-new.svg","type":"icon"},"chat-problem":{"value":"icons/chat-problem.svg","type":"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-down":{"value":"icons/chevron-down.svg","type":"icon"},"chevron-left":{"value":"icons/chevron-left.svg","type":"icon"},"chevron-right":{"value":"icons/chevron-right.svg","type":"icon"},"chevron-up-down":{"value":"icons/chevron-up-down.svg","type":"icon"},"close":{"value":"icons/close.svg","type":"icon"},"computer":{"value":"icons/computer.svg","type":"icon"},"delete":{"value":"icons/delete.svg","type":"icon"},"download":{"value":"icons/download.svg","type":"icon"},"drag-grid":{"value":"icons/drag-grid.svg","type":"icon"},"drag-list":{"value":"icons/drag-list.svg","type":"icon"},"error":{"value":"icons/error.svg","type":"icon"},"export-archive":{"value":"icons/export-archive.svg","type":"icon"},"extensions":{"value":"icons/extensions.svg","type":"icon"},"favourite-off":{"value":"icons/favourite-off.svg","type":"icon"},"favourite-on":{"value":"icons/favourite-on.svg","type":"icon"},"files":{"value":"icons/files.svg","type":"icon"},"filter":{"value":"icons/filter.svg","type":"icon"},"info":{"value":"icons/info.svg","type":"icon"},"leave":{"value":"icons/leave.svg","type":"icon"},"link":{"value":"icons/link.svg","type":"icon"},"lock-off":{"value":"icons/lock-off.svg","type":"icon"},"lock":{"value":"icons/lock.svg","type":"icon"},"marker-read-receipts":{"value":"icons/marker-read-receipts.svg","type":"icon"},"mention":{"value":"icons/mention.svg","type":"icon"},"mobile":{"value":"icons/mobile.svg","type":"icon"},"notifications-off":{"value":"icons/notifications-off.svg","type":"icon"},"notifications-solid-off":{"value":"icons/notifications-solid-off.svg","type":"icon"},"notifications-solid":{"value":"icons/notifications-solid.svg","type":"icon"},"notifications":{"value":"icons/notifications.svg","type":"icon"},"offline":{"value":"icons/offline.svg","type":"icon"},"overflow-horizontal":{"value":"icons/overflow-horizontal.svg","type":"icon"},"overflow-vertical":{"value":"icons/overflow-vertical.svg","type":"icon"},"polls":{"value":"icons/polls.svg","type":"icon"},"pop-out":{"value":"icons/pop-out.svg","type":"icon"},"public":{"value":"icons/public.svg","type":"icon"},"search":{"value":"icons/search.svg","type":"icon"},"settings-solid":{"value":"icons/settings-solid.svg","type":"icon"},"settings":{"value":"icons/settings.svg","type":"icon"},"share-android":{"value":"icons/share-android.svg","type":"icon"},"share":{"value":"icons/share.svg","type":"icon"},"threads-solid":{"value":"icons/threads-solid.svg","type":"icon"},"threads":{"value":"icons/threads.svg","type":"icon"},"user-add-solid":{"value":"icons/user-add-solid.svg","type":"icon"},"user-add":{"value":"icons/user-add.svg","type":"icon"},"user-profile":{"value":"icons/user-profile.svg","type":"icon"},"verified":{"value":"icons/verified.svg","type":"icon"},"video-call-declined":{"value":"icons/video-call-declined.svg","type":"icon"},"video-call-missed":{"value":"icons/video-call-missed.svg","type":"icon"},"video-call-off":{"value":"icons/video-call-off.svg","type":"icon"},"video-call":{"value":"icons/video-call.svg","type":"icon"},"visibility-off":{"value":"icons/visibility-off.svg","type":"icon"},"visibility-on":{"value":"icons/visibility-on.svg","type":"icon"},"voice-call":{"value":"icons/voice-call.svg","type":"icon"},"web-browser":{"value":"icons/web-browser.svg","type":"icon"}}}

package/icons/arrow-left.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.2071 5.29289C12.5976 5.68342 12.5976 6.31658 12.2071 6.70711L7.91421 11H18.5C19.0523 11 19.5 11.4477 19.5 12C19.5 12.5523 19.0523 13 18.5 13H7.91421L12.2071 17.2929C12.5976 17.6834 12.5976 18.3166 12.2071 18.7071C11.8166 19.0976 11.1834 19.0976 10.7929 18.7071L4.79289 12.7071C4.40237 12.3166 4.40237 11.6834 4.79289 11.2929L10.7929 5.29289C11.1834 4.90237 11.8166 4.90237 12.2071 5.29289Z" fill="currentColor"/>
+</svg>

package/icons/arrow-right.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.7929 5.29289C12.1834 4.90237 12.8166 4.90237 13.2071 5.29289L19.2071 11.2929C19.5976 11.6834 19.5976 12.3166 19.2071 12.7071L13.2071 18.7071C12.8166 19.0976 12.1834 19.0976 11.7929 18.7071C11.4024 18.3166 11.4024 17.6834 11.7929 17.2929L16.0858 13H5.5C4.94772 13 4.5 12.5523 4.5 12C4.5 11.4477 4.94772 11 5.5 11H16.0858L11.7929 6.70711C11.4024 6.31658 11.4024 5.68342 11.7929 5.29289Z" fill="currentColor"/>
+</svg>