@gobolt/genesis 0.2.13 → 0.2.15

package/dist/styles/theme/genesis-theme.js

@@ -1,95 +1,98 @@
-import { Size4 as c, Size3 as g, Size2 as d, Size1 as s, Size25 as T, Size025 as k, Size15 as w, Size05 as B, Size64 as E, Size50 as x, Size43 as D, Size39 as M, Size35 as N, Size34 as A, Size32 as R, Size30 as G, Size28 as P, Size27 as L, Size24 as O, Size20 as Y, Size18 as X, Size16 as I, Size14 as _, Size13 as K, Size12 as V, Size10 as j, Size8 as q, Size7 as J, Size6 as Q, Size5 as U, Size2_5 as Z, Size1_5 as $, BorderRadiusMd as ee, BorderRadiusSm as re, ColorGrayWhite as p, ColorGrayBlack as oe, ColorGray900 as ie, ColorGray800 as te, ColorGray700 as y, ColorGray600 as ne, ColorGray500 as u, ColorGray400 as ae, ColorGray300 as h, ColorGray200 as le, ColorGray100 as l, ColorPurple900 as ce, ColorPurple800 as ge, ColorPurple700 as de, ColorPurple600 as se, ColorPurple500 as pe, ColorPurple400 as ye, ColorPurple300 as ue, ColorPurple200 as he, ColorPurple100 as fe, ColorBlue900 as Se, ColorBlue800 as ve, ColorBlue700 as Ce, ColorBlue600 as ze, ColorBlue500 as be, ColorBlue400 as f, ColorBlue300 as Fe, ColorBlue200 as me, ColorBlue100 as He, ColorSky900 as S, ColorSky800 as We, ColorSky700 as v, ColorSky600 as Te, ColorSky500 as ke, ColorSky400 as we, ColorSky300 as Be, ColorSky200 as Ee, ColorSky100 as xe, ColorGreen900 as De, ColorGreen800 as Me, ColorGreen700 as Ne, ColorGreen600 as Ae, ColorGreen500 as Re, ColorGreen400 as C, ColorGreen300 as Ge, ColorGreen200 as Pe, ColorGreen100 as Le, ColorYellow900 as Oe, ColorYellow800 as Ye, ColorYellow700 as Xe, ColorYellow600 as Ie, ColorYellow500 as z, ColorYellow400 as _e, ColorYellow300 as Ke, ColorYellow200 as Ve, ColorYellow100 as je, ColorOrange900 as qe, ColorOrange800 as Je, ColorOrange700 as Qe, ColorOrange600 as Ue, ColorOrange500 as Ze, ColorOrange400 as $e, ColorOrange300 as er, ColorOrange200 as rr, ColorOrange100 as or, ColorRed900 as ir, ColorRed800 as tr, ColorRed700 as nr, ColorRed600 as ar, ColorRed500 as b, ColorRed400 as lr, ColorRed300 as cr, ColorRed200 as gr, ColorRed100 as dr, TypographyNarrowFontSizeDigits3 as sr, TypographyNarrowFontSizeDigits2 as pr, TypographyNarrowFontSizeDigits1 as yr, TypographyNarrowFontSizeLink3 as ur, TypographyNarrowFontSizeLink2 as hr, TypographyNarrowFontSizeLink1 as fr, TypographyNarrowFontSizeLabel3 as Sr, TypographyNarrowFontSizeLabel2 as vr, TypographyNarrowFontSizeLabel1 as Cr, TypographyNarrowFontSizeOverline3 as zr, TypographyNarrowFontSizeOverline2 as br, TypographyNarrowFontSizeOverline1 as Fr, TypographyNarrowFontSizeMessage as mr, TypographyNarrowFontSizeBody5 as Hr, TypographyNarrowFontSizeBody4 as Wr, TypographyNarrowFontSizeBody3 as Tr, TypographyNarrowFontSizeBody2 as kr, TypographyNarrowFontSizeBody1 as wr, TypographyNarrowFontSizeSubHeading3 as Br, TypographyNarrowFontSizeSubHeading2 as Er, TypographyNarrowFontSizeSubHeading1 as xr, TypographyNarrowFontSizeHeading3 as Dr, TypographyNarrowFontSizeHeading2 as Mr, TypographyNarrowFontSizeHeading1 as Nr, TypographyNarrowFontSizeDisplay3 as Ar, TypographyNarrowFontSizeDisplay2 as Rr, TypographyNarrowFontSizeDisplay1 as Gr, TypographyMediumFontSizeDigits3 as Pr, TypographyMediumFontSizeDigits2 as Lr, TypographyMediumFontSizeDigits1 as Or, TypographyMediumFontSizeLink3 as Yr, TypographyMediumFontSizeLink2 as Xr, TypographyMediumFontSizeLink1 as Ir, TypographyMediumFontSizeLabel3 as _r, TypographyMediumFontSizeLabel2 as Kr, TypographyMediumFontSizeLabel1 as Vr, TypographyMediumFontSizeOverline3 as jr, TypographyMediumFontSizeOverline2 as qr, TypographyMediumFontSizeOverline1 as Jr, TypographyMediumFontSizeMessage as Qr, TypographyMediumFontSizeBody5 as Ur, TypographyMediumFontSizeBody4 as Zr, TypographyMediumFontSizeBody3 as $r, TypographyMediumFontSizeBody2 as eo, TypographyMediumFontSizeBody1 as ro, TypographyMediumFontSizeSubHeading3 as oo, TypographyMediumFontSizeSubHeading2 as io, TypographyMediumFontSizeSubHeading1 as to, TypographyMediumFontSizeHeading3 as no, TypographyMediumFontSizeHeading2 as ao, TypographyMediumFontSizeHeading1 as lo, TypographyMediumFontSizeDisplay3 as co, TypographyMediumFontSizeDisplay2 as go, TypographyMediumFontSizeDisplay1 as so, TypographyWideFontSizeDigits3 as po, TypographyWideFontSizeDigits2 as yo, TypographyWideFontSizeDigits1 as uo, TypographyWideFontSizeLink3 as ho, TypographyWideFontSizeLink2 as fo, TypographyWideFontSizeLink1 as So, TypographyWideFontSizeLabel3 as vo, TypographyWideFontSizeLabel2 as Co, TypographyWideFontSizeLabel1 as zo, TypographyWideFontSizeOverline3 as bo, TypographyWideFontSizeOverline2 as Fo, TypographyWideFontSizeOverline1 as mo, TypographyWideFontSizeMessage as Ho, TypographyWideFontSizeBody5 as Wo, TypographyWideFontSizeBody4 as To, TypographyWideFontSizeBody3 as ko, TypographyWideFontSizeBody2 as wo, TypographyWideFontSizeBody1 as Bo, TypographyWideFontSizeSubHeading3 as Eo, TypographyWideFontSizeSubHeading2 as xo, TypographyWideFontSizeSubHeading1 as Do, TypographyWideFontSizeHeading3 as Mo, TypographyWideFontSizeHeading2 as No, TypographyWideFontSizeHeading1 as Ao, TypographyWideFontSizeDisplay3 as Ro, TypographyWideFontSizeDisplay2 as Go, TypographyWideFontSizeDisplay1 as Po, TypographyPrimaryFontFamily as Lo, BorderRadiusRounded as Oo, BorderRadiusXxxl as Yo, BorderRadiusXxl as Xo, BorderRadiusXl as Io, BorderRadiusLg as _o, BorderRadiusXs as Ko, BorderRadiusNone as Vo } from "../design-tokens/variables.js";
-const jo = {
+import { Size4, Size3, Size2, Size1, Size25, Size025, Size15, Size05, Size64, Size50, Size43, Size39, Size35, Size34, Size32, Size30, Size28, Size27, Size24, Size20, Size18, Size16, Size14, Size13, Size12, Size10, Size8, Size7, Size6, Size5, Size2_5, Size1_5, BorderRadiusMd, BorderRadiusSm, ColorGrayWhite, ColorGrayBlack, ColorGray900, ColorGray800, ColorGray700, ColorGray600, ColorGray500, ColorGray400, ColorGray300, ColorGray200, ColorGray100, ColorPurple900, ColorPurple800, ColorPurple700, ColorPurple600, ColorPurple500, ColorPurple400, ColorPurple300, ColorPurple200, ColorPurple100, ColorBlue900, ColorBlue800, ColorBlue700, ColorBlue600, ColorBlue500, ColorBlue400, ColorBlue300, ColorBlue200, ColorBlue100, ColorSky900, ColorSky800, ColorSky700, ColorSky600, ColorSky500, ColorSky400, ColorSky300, ColorSky200, ColorSky100, ColorGreen900, ColorGreen800, ColorGreen700, ColorGreen600, ColorGreen500, ColorGreen400, ColorGreen300, ColorGreen200, ColorGreen100, ColorYellow900, ColorYellow800, ColorYellow700, ColorYellow600, ColorYellow500, ColorYellow400, ColorYellow300, ColorYellow200, ColorYellow100, ColorOrange900, ColorOrange800, ColorOrange700, ColorOrange600, ColorOrange500, ColorOrange400, ColorOrange300, ColorOrange200, ColorOrange100, ColorRed900, ColorRed800, ColorRed700, ColorRed600, ColorRed500, ColorRed400, ColorRed300, ColorRed200, ColorRed100, TypographyNarrowFontSizeDigits3, TypographyNarrowFontSizeDigits2, TypographyNarrowFontSizeDigits1, TypographyNarrowFontSizeLink3, TypographyNarrowFontSizeLink2, TypographyNarrowFontSizeLink1, TypographyNarrowFontSizeLabel3, TypographyNarrowFontSizeLabel2, TypographyNarrowFontSizeLabel1, TypographyNarrowFontSizeOverline3, TypographyNarrowFontSizeOverline2, TypographyNarrowFontSizeOverline1, TypographyNarrowFontSizeMessage, TypographyNarrowFontSizeBody5, TypographyNarrowFontSizeBody4, TypographyNarrowFontSizeBody3, TypographyNarrowFontSizeBody2, TypographyNarrowFontSizeBody1, TypographyNarrowFontSizeSubHeading3, TypographyNarrowFontSizeSubHeading2, TypographyNarrowFontSizeSubHeading1, TypographyNarrowFontSizeHeading3, TypographyNarrowFontSizeHeading2, TypographyNarrowFontSizeHeading1, TypographyNarrowFontSizeDisplay3, TypographyNarrowFontSizeDisplay2, TypographyNarrowFontSizeDisplay1, TypographyMediumFontSizeDigits3, TypographyMediumFontSizeDigits2, TypographyMediumFontSizeDigits1, TypographyMediumFontSizeLink3, TypographyMediumFontSizeLink2, TypographyMediumFontSizeLink1, TypographyMediumFontSizeLabel3, TypographyMediumFontSizeLabel2, TypographyMediumFontSizeLabel1, TypographyMediumFontSizeOverline3, TypographyMediumFontSizeOverline2, TypographyMediumFontSizeOverline1, TypographyMediumFontSizeMessage, TypographyMediumFontSizeBody5, TypographyMediumFontSizeBody4, TypographyMediumFontSizeBody3, TypographyMediumFontSizeBody2, TypographyMediumFontSizeBody1, TypographyMediumFontSizeSubHeading3, TypographyMediumFontSizeSubHeading2, TypographyMediumFontSizeSubHeading1, TypographyMediumFontSizeHeading3, TypographyMediumFontSizeHeading2, TypographyMediumFontSizeHeading1, TypographyMediumFontSizeDisplay3, TypographyMediumFontSizeDisplay2, TypographyMediumFontSizeDisplay1, TypographyWideFontSizeDigits3, TypographyWideFontSizeDigits2, TypographyWideFontSizeDigits1, TypographyWideFontSizeLink3, TypographyWideFontSizeLink2, TypographyWideFontSizeLink1, TypographyWideFontSizeLabel3, TypographyWideFontSizeLabel2, TypographyWideFontSizeLabel1, TypographyWideFontSizeOverline3, TypographyWideFontSizeOverline2, TypographyWideFontSizeOverline1, TypographyWideFontSizeMessage, TypographyWideFontSizeBody5, TypographyWideFontSizeBody4, TypographyWideFontSizeBody3, TypographyWideFontSizeBody2, TypographyWideFontSizeBody1, TypographyWideFontSizeSubHeading3, TypographyWideFontSizeSubHeading2, TypographyWideFontSizeSubHeading1, TypographyWideFontSizeHeading3, TypographyWideFontSizeHeading2, TypographyWideFontSizeHeading1, TypographyWideFontSizeDisplay3, TypographyWideFontSizeDisplay2, TypographyWideFontSizeDisplay1, TypographyPrimaryFontFamily, BorderRadiusRounded, BorderRadiusXxxl, BorderRadiusXxl, BorderRadiusXl, BorderRadiusLg, BorderRadiusXs, BorderRadiusNone } from "../design-tokens/variables.js";
+const breakpoints = {
   wide: 1280,
   medium: 1024,
   narrow: 480
-}, a = {
-  BorderRadiusNone: Vo,
-  BorderRadiusXs: Ko,
-  BorderRadiusSm: re,
-  BorderRadiusMd: ee,
-  BorderRadiusLg: _o,
-  BorderRadiusXl: Io,
-  BorderRadiusXxl: Xo,
-  BorderRadiusXxxl: Yo,
-  BorderRadiusRounded: Oo
-}, i = {
-  Size1: s,
+};
+const borderRadius = {
+  BorderRadiusNone,
+  BorderRadiusXs,
+  BorderRadiusSm,
+  BorderRadiusMd,
+  BorderRadiusLg,
+  BorderRadiusXl,
+  BorderRadiusXxl,
+  BorderRadiusXxxl,
+  BorderRadiusRounded
+};
+const sizing = {
+  Size1,
   // 4px
-  Size1_5: $,
+  Size1_5,
   // 6px
-  Size2: d,
+  Size2,
   // 8px
-  Size2_5: Z,
+  Size2_5,
   // 10px
-  Size3: g,
+  Size3,
   // 12px
-  Size4: c,
+  Size4,
   // 16px
-  Size5: U,
+  Size5,
   // 20px
-  Size6: Q,
+  Size6,
   // 24px
-  Size7: J,
+  Size7,
   // 28px
-  Size8: q,
+  Size8,
   // 32px
-  Size10: j,
+  Size10,
   // 40px
-  Size12: V,
+  Size12,
   // 48px
-  Size13: K,
+  Size13,
   // 52px
-  Size14: _,
+  Size14,
   // 56px
-  Size16: I,
+  Size16,
   // 64px
-  Size18: X,
+  Size18,
   // 72px
-  Size20: Y,
+  Size20,
   // 80px
-  Size24: O,
+  Size24,
   // 96px
-  Size27: L,
+  Size27,
   // 108px
-  Size28: P,
+  Size28,
   // 112px
-  Size30: G,
+  Size30,
   // 120px
-  Size32: R,
+  Size32,
   // 128px
-  Size34: A,
+  Size34,
   // 136px
-  Size35: N,
+  Size35,
   // 140px
-  Size39: M,
+  Size39,
   // 156px
-  Size43: D,
+  Size43,
   // 172px
-  Size50: x,
+  Size50,
   // 200px
-  Size64: E,
+  Size64,
   // 256px
-  Size05: B,
+  Size05,
   // 2px
-  Size15: w,
+  Size15,
   // 6px
-  Size025: k,
+  Size025,
   // 1px
-  Size25: T,
+  Size25,
   // 10px
-  xs: s,
+  xs: Size1,
   // 4px
-  sm: d,
+  sm: Size2,
   // 8px
-  md: g,
+  md: Size3,
   // 12px
-  lg: c,
+  lg: Size4,
   // 16px
   typography1: 12,
   typography2: 14,
   typography3: 16
-}, si = {
+};
+const TypographySizeKey = {
   display1: "display1",
   display2: "display2",
   display3: "display3",
@@ -117,633 +120,645 @@ const jo = {
   digits1: "digits1",
   digits2: "digits2",
   digits3: "digits3"
-}, qo = {
+};
+const wideTypography = {
   display1: {
-    fontSize: Po,
+    fontSize: TypographyWideFontSizeDisplay1,
     lineHeight: "3.5rem",
     fontWeight: 700,
     letterSpacing: "0"
   },
   display2: {
-    fontSize: Go,
+    fontSize: TypographyWideFontSizeDisplay2,
     lineHeight: "3rem",
     fontWeight: 700,
     letterSpacing: "0"
   },
   display3: {
-    fontSize: Ro,
+    fontSize: TypographyWideFontSizeDisplay3,
     lineHeight: "2.5rem",
     fontWeight: 700,
     letterSpacing: "0"
   },
   heading1: {
-    fontSize: Ao,
+    fontSize: TypographyWideFontSizeHeading1,
     lineHeight: "2rem",
     fontWeight: 700,
     letterSpacing: "0"
   },
   heading2: {
-    fontSize: No,
+    fontSize: TypographyWideFontSizeHeading2,
     lineHeight: "1.75rem",
     fontWeight: 700,
     letterSpacing: "0"
   },
   heading3: {
-    fontSize: Mo,
+    fontSize: TypographyWideFontSizeHeading3,
     lineHeight: "1.5rem",
     fontWeight: 700,
     letterSpacing: "0"
   },
   subHeading1: {
-    fontSize: Do,
+    fontSize: TypographyWideFontSizeSubHeading1,
     lineHeight: "1.25rem",
     fontWeight: 600,
     letterSpacing: "0"
   },
   subHeading2: {
-    fontSize: xo,
+    fontSize: TypographyWideFontSizeSubHeading2,
     lineHeight: "1.25rem",
     fontWeight: 600,
     letterSpacing: "0"
   },
   subHeading3: {
-    fontSize: Eo,
+    fontSize: TypographyWideFontSizeSubHeading3,
     lineHeight: "1rem",
     fontWeight: 600,
     letterSpacing: "0"
   },
   body1: {
-    fontSize: Bo,
+    fontSize: TypographyWideFontSizeBody1,
     lineHeight: "1.5rem",
     fontWeight: 400,
     letterSpacing: "0"
   },
   body2: {
-    fontSize: wo,
+    fontSize: TypographyWideFontSizeBody2,
     lineHeight: "1.25rem",
     fontWeight: 400,
     letterSpacing: "0"
   },
   body3: {
-    fontSize: ko,
+    fontSize: TypographyWideFontSizeBody3,
     lineHeight: "1rem",
     fontWeight: 400,
     letterSpacing: "0"
   },
   body4: {
-    fontSize: To,
+    fontSize: TypographyWideFontSizeBody4,
     lineHeight: "0.875rem",
     fontWeight: 400,
     letterSpacing: "0"
   },
   body5: {
-    fontSize: Wo,
+    fontSize: TypographyWideFontSizeBody5,
     lineHeight: "0.75rem",
     fontWeight: 400,
     letterSpacing: "0"
   },
   message: {
-    fontSize: Ho,
+    fontSize: TypographyWideFontSizeMessage,
     lineHeight: "23px",
     fontWeight: 400,
     letterSpacing: "0"
   },
   overline1: {
-    fontSize: mo,
+    fontSize: TypographyWideFontSizeOverline1,
     lineHeight: "0.75rem",
     fontWeight: 500,
     letterSpacing: "0"
   },
   overline2: {
-    fontSize: Fo,
+    fontSize: TypographyWideFontSizeOverline2,
     lineHeight: "0.75rem",
     fontWeight: 500,
     letterSpacing: "0"
   },
   overline3: {
-    fontSize: bo,
+    fontSize: TypographyWideFontSizeOverline3,
     lineHeight: "0.75rem",
     fontWeight: 500,
     letterSpacing: "0"
   },
   label1: {
-    fontSize: zo,
+    fontSize: TypographyWideFontSizeLabel1,
     lineHeight: "1rem",
     fontWeight: 500,
     letterSpacing: "0"
   },
   label2: {
-    fontSize: Co,
+    fontSize: TypographyWideFontSizeLabel2,
     lineHeight: "1rem",
     fontWeight: 500,
     letterSpacing: "0"
   },
   label3: {
-    fontSize: vo,
+    fontSize: TypographyWideFontSizeLabel3,
     lineHeight: "1rem",
     fontWeight: 500,
     letterSpacing: "0"
   },
   link1: {
-    fontSize: So,
+    fontSize: TypographyWideFontSizeLink1,
     lineHeight: "1.5rem",
     fontWeight: 500,
     letterSpacing: "0"
   },
   link2: {
-    fontSize: fo,
+    fontSize: TypographyWideFontSizeLink2,
     lineHeight: "1.25rem",
     fontWeight: 500,
     letterSpacing: "0"
   },
   link3: {
-    fontSize: ho,
+    fontSize: TypographyWideFontSizeLink3,
     lineHeight: "1rem",
     fontWeight: 500,
     letterSpacing: "0"
   },
   digits1: {
-    fontSize: uo,
+    fontSize: TypographyWideFontSizeDigits1,
     lineHeight: "3.5rem",
     fontWeight: 700,
     letterSpacing: "0"
   },
   digits2: {
-    fontSize: yo,
+    fontSize: TypographyWideFontSizeDigits2,
     lineHeight: "3rem",
     fontWeight: 700,
     letterSpacing: "0"
   },
   digits3: {
-    fontSize: po,
+    fontSize: TypographyWideFontSizeDigits3,
     lineHeight: "2.5rem",
     fontWeight: 700,
     letterSpacing: "0"
   }
-}, Jo = {
+};
+const mediumTypography = {
   display1: {
-    fontSize: so,
+    fontSize: TypographyMediumFontSizeDisplay1,
     lineHeight: "3.5rem",
     fontWeight: 700,
     letterSpacing: "0"
   },
   display2: {
-    fontSize: go,
+    fontSize: TypographyMediumFontSizeDisplay2,
     lineHeight: "3rem",
     fontWeight: 700,
     letterSpacing: "0"
   },
   display3: {
-    fontSize: co,
+    fontSize: TypographyMediumFontSizeDisplay3,
     lineHeight: "2.5rem",
     fontWeight: 700,
     letterSpacing: "0"
   },
   heading1: {
-    fontSize: lo,
+    fontSize: TypographyMediumFontSizeHeading1,
     lineHeight: "2rem",
     fontWeight: 700,
     letterSpacing: "0"
   },
   heading2: {
-    fontSize: ao,
+    fontSize: TypographyMediumFontSizeHeading2,
     lineHeight: "1.75rem",
     fontWeight: 700,
     letterSpacing: "0"
   },
   heading3: {
-    fontSize: no,
+    fontSize: TypographyMediumFontSizeHeading3,
     lineHeight: "1.5rem",
     fontWeight: 700,
     letterSpacing: "0"
   },
   subHeading1: {
-    fontSize: to,
+    fontSize: TypographyMediumFontSizeSubHeading1,
     lineHeight: "1.25rem",
     fontWeight: 600,
     letterSpacing: "0"
   },
   subHeading2: {
-    fontSize: io,
+    fontSize: TypographyMediumFontSizeSubHeading2,
     lineHeight: "1.25rem",
     fontWeight: 600,
     letterSpacing: "0"
   },
   subHeading3: {
-    fontSize: oo,
+    fontSize: TypographyMediumFontSizeSubHeading3,
     lineHeight: "1rem",
     fontWeight: 600,
     letterSpacing: "0"
   },
   body1: {
-    fontSize: ro,
+    fontSize: TypographyMediumFontSizeBody1,
     lineHeight: "1.5rem",
     fontWeight: 400,
     letterSpacing: "0"
   },
   body2: {
-    fontSize: eo,
+    fontSize: TypographyMediumFontSizeBody2,
     lineHeight: "1.25rem",
     fontWeight: 400,
     letterSpacing: "0"
   },
   body3: {
-    fontSize: $r,
+    fontSize: TypographyMediumFontSizeBody3,
     lineHeight: "1rem",
     fontWeight: 400,
     letterSpacing: "0"
   },
   body4: {
-    fontSize: Zr,
+    fontSize: TypographyMediumFontSizeBody4,
     lineHeight: "0.875rem",
     fontWeight: 400,
     letterSpacing: "0"
   },
   body5: {
-    fontSize: Ur,
+    fontSize: TypographyMediumFontSizeBody5,
     lineHeight: "0.75rem",
     fontWeight: 400,
     letterSpacing: "0"
   },
   message: {
-    fontSize: Qr,
+    fontSize: TypographyMediumFontSizeMessage,
     lineHeight: "23px",
     fontWeight: 400,
     letterSpacing: "0"
   },
   overline1: {
-    fontSize: Jr,
+    fontSize: TypographyMediumFontSizeOverline1,
     lineHeight: "0.75rem",
     fontWeight: 500,
     letterSpacing: "0"
   },
   overline2: {
-    fontSize: qr,
+    fontSize: TypographyMediumFontSizeOverline2,
     lineHeight: "0.75rem",
     fontWeight: 500,
     letterSpacing: "0"
   },
   overline3: {
-    fontSize: jr,
+    fontSize: TypographyMediumFontSizeOverline3,
     lineHeight: "0.75rem",
     fontWeight: 500,
     letterSpacing: "0"
   },
   label1: {
-    fontSize: Vr,
+    fontSize: TypographyMediumFontSizeLabel1,
     lineHeight: "1rem",
     fontWeight: 500,
     letterSpacing: "0"
   },
   label2: {
-    fontSize: Kr,
+    fontSize: TypographyMediumFontSizeLabel2,
     lineHeight: "1rem",
     fontWeight: 500,
     letterSpacing: "0"
   },
   label3: {
-    fontSize: _r,
+    fontSize: TypographyMediumFontSizeLabel3,
     lineHeight: "1rem",
     fontWeight: 500,
     letterSpacing: "0"
   },
   link1: {
-    fontSize: Ir,
+    fontSize: TypographyMediumFontSizeLink1,
     lineHeight: "1.5rem",
     fontWeight: 500,
     letterSpacing: "0"
   },
   link2: {
-    fontSize: Xr,
+    fontSize: TypographyMediumFontSizeLink2,
     lineHeight: "1.25rem",
     fontWeight: 500,
     letterSpacing: "0"
   },
   link3: {
-    fontSize: Yr,
+    fontSize: TypographyMediumFontSizeLink3,
     lineHeight: "1rem",
     fontWeight: 500,
     letterSpacing: "0"
   },
   digits1: {
-    fontSize: Or,
+    fontSize: TypographyMediumFontSizeDigits1,
     lineHeight: "3.5rem",
     fontWeight: 700,
     letterSpacing: "0"
   },
   digits2: {
-    fontSize: Lr,
+    fontSize: TypographyMediumFontSizeDigits2,
     lineHeight: "3rem",
     fontWeight: 700,
     letterSpacing: "0"
   },
   digits3: {
-    fontSize: Pr,
+    fontSize: TypographyMediumFontSizeDigits3,
     lineHeight: "2.5rem",
     fontWeight: 700,
     letterSpacing: "0"
   }
-}, Qo = {
+};
+const narrowTypography = {
   display1: {
-    fontSize: Gr,
+    fontSize: TypographyNarrowFontSizeDisplay1,
     lineHeight: "3.5rem",
     fontWeight: 700,
     letterSpacing: "0"
   },
   display2: {
-    fontSize: Rr,
+    fontSize: TypographyNarrowFontSizeDisplay2,
     lineHeight: "3rem",
     fontWeight: 700,
     letterSpacing: "0"
   },
   display3: {
-    fontSize: Ar,
+    fontSize: TypographyNarrowFontSizeDisplay3,
     lineHeight: "2.5rem",
     fontWeight: 700,
     letterSpacing: "0"
   },
   heading1: {
-    fontSize: Nr,
+    fontSize: TypographyNarrowFontSizeHeading1,
     lineHeight: "2rem",
     fontWeight: 700,
     letterSpacing: "0"
   },
   heading2: {
-    fontSize: Mr,
+    fontSize: TypographyNarrowFontSizeHeading2,
     lineHeight: "1.75rem",
     fontWeight: 700,
     letterSpacing: "0"
   },
   heading3: {
-    fontSize: Dr,
+    fontSize: TypographyNarrowFontSizeHeading3,
     lineHeight: "1.5rem",
     fontWeight: 700,
     letterSpacing: "0"
   },
   subHeading1: {
-    fontSize: xr,
+    fontSize: TypographyNarrowFontSizeSubHeading1,
     lineHeight: "1.25rem",
     fontWeight: 600,
     letterSpacing: "0"
   },
   subHeading2: {
-    fontSize: Er,
+    fontSize: TypographyNarrowFontSizeSubHeading2,
     lineHeight: "1.25rem",
     fontWeight: 600,
     letterSpacing: "0"
   },
   subHeading3: {
-    fontSize: Br,
+    fontSize: TypographyNarrowFontSizeSubHeading3,
     lineHeight: "1rem",
     fontWeight: 600,
     letterSpacing: "0"
   },
   body1: {
-    fontSize: wr,
+    fontSize: TypographyNarrowFontSizeBody1,
     lineHeight: "1.5rem",
     fontWeight: 400,
     letterSpacing: "0"
   },
   body2: {
-    fontSize: kr,
+    fontSize: TypographyNarrowFontSizeBody2,
     lineHeight: "1.25rem",
     fontWeight: 400,
     letterSpacing: "0"
   },
   body3: {
-    fontSize: Tr,
+    fontSize: TypographyNarrowFontSizeBody3,
     lineHeight: "1rem",
     fontWeight: 400,
     letterSpacing: "0"
   },
   body4: {
-    fontSize: Wr,
+    fontSize: TypographyNarrowFontSizeBody4,
     lineHeight: "0.875rem",
     fontWeight: 400,
     letterSpacing: "0"
   },
   body5: {
-    fontSize: Hr,
+    fontSize: TypographyNarrowFontSizeBody5,
     lineHeight: "0.75rem",
     fontWeight: 400,
     letterSpacing: "0"
   },
   message: {
-    fontSize: mr,
+    fontSize: TypographyNarrowFontSizeMessage,
     lineHeight: "23px",
     fontWeight: 400,
     letterSpacing: "0"
   },
   overline1: {
-    fontSize: Fr,
+    fontSize: TypographyNarrowFontSizeOverline1,
     lineHeight: "0.75rem",
     fontWeight: 500,
     letterSpacing: "0"
   },
   overline2: {
-    fontSize: br,
+    fontSize: TypographyNarrowFontSizeOverline2,
     lineHeight: "0.75rem",
     fontWeight: 500,
     letterSpacing: "0"
   },
   overline3: {
-    fontSize: zr,
+    fontSize: TypographyNarrowFontSizeOverline3,
     lineHeight: "0.75rem",
     fontWeight: 500,
     letterSpacing: "0"
   },
   label1: {
-    fontSize: Cr,
+    fontSize: TypographyNarrowFontSizeLabel1,
     lineHeight: "1rem",
     fontWeight: 500,
     letterSpacing: "0"
   },
   label2: {
-    fontSize: vr,
+    fontSize: TypographyNarrowFontSizeLabel2,
     lineHeight: "1rem",
     fontWeight: 500,
     letterSpacing: "0"
   },
   label3: {
-    fontSize: Sr,
+    fontSize: TypographyNarrowFontSizeLabel3,
     lineHeight: "1rem",
     fontWeight: 500,
     letterSpacing: "0"
   },
   link1: {
-    fontSize: fr,
+    fontSize: TypographyNarrowFontSizeLink1,
     lineHeight: "1.5rem",
     fontWeight: 500,
     letterSpacing: "0"
   },
   link2: {
-    fontSize: hr,
+    fontSize: TypographyNarrowFontSizeLink2,
     lineHeight: "1.25rem",
     fontWeight: 500,
     letterSpacing: "0"
   },
   link3: {
-    fontSize: ur,
+    fontSize: TypographyNarrowFontSizeLink3,
     lineHeight: "1rem",
     fontWeight: 500,
     letterSpacing: "0"
   },
   digits1: {
-    fontSize: yr,
+    fontSize: TypographyNarrowFontSizeDigits1,
     lineHeight: "3.5rem",
     fontWeight: 700,
     letterSpacing: "0"
   },
   digits2: {
-    fontSize: pr,
+    fontSize: TypographyNarrowFontSizeDigits2,
     lineHeight: "3rem",
     fontWeight: 700,
     letterSpacing: "0"
   },
   digits3: {
-    fontSize: sr,
+    fontSize: TypographyNarrowFontSizeDigits3,
     lineHeight: "2.5rem",
     fontWeight: 700,
     letterSpacing: "0"
   }
-}, Uo = {
-  fontFamily: Lo,
-  wide: qo,
-  medium: Jo,
-  narrow: Qo
-}, o = {
+};
+const typography = {
+  fontFamily: TypographyPrimaryFontFamily,
+  wide: wideTypography,
+  medium: mediumTypography,
+  narrow: narrowTypography
+};
+const colors = {
   red: {
-    100: dr,
-    200: gr,
-    300: cr,
-    400: lr,
-    500: b,
-    600: ar,
-    700: nr,
-    800: tr,
-    900: ir
+    100: ColorRed100,
+    200: ColorRed200,
+    300: ColorRed300,
+    400: ColorRed400,
+    500: ColorRed500,
+    600: ColorRed600,
+    700: ColorRed700,
+    800: ColorRed800,
+    900: ColorRed900
   },
   orange: {
-    100: or,
-    200: rr,
-    300: er,
-    400: $e,
-    500: Ze,
-    600: Ue,
-    700: Qe,
-    800: Je,
-    900: qe
+    100: ColorOrange100,
+    200: ColorOrange200,
+    300: ColorOrange300,
+    400: ColorOrange400,
+    500: ColorOrange500,
+    600: ColorOrange600,
+    700: ColorOrange700,
+    800: ColorOrange800,
+    900: ColorOrange900
   },
   yellow: {
-    100: je,
-    200: Ve,
-    300: Ke,
-    400: _e,
-    500: z,
-    600: Ie,
-    700: Xe,
-    800: Ye,
-    900: Oe
+    100: ColorYellow100,
+    200: ColorYellow200,
+    300: ColorYellow300,
+    400: ColorYellow400,
+    500: ColorYellow500,
+    600: ColorYellow600,
+    700: ColorYellow700,
+    800: ColorYellow800,
+    900: ColorYellow900
   },
   green: {
-    100: Le,
-    200: Pe,
-    300: Ge,
-    400: C,
-    500: Re,
-    600: Ae,
-    700: Ne,
-    800: Me,
-    900: De
+    100: ColorGreen100,
+    200: ColorGreen200,
+    300: ColorGreen300,
+    400: ColorGreen400,
+    500: ColorGreen500,
+    600: ColorGreen600,
+    700: ColorGreen700,
+    800: ColorGreen800,
+    900: ColorGreen900
   },
   sky: {
-    100: xe,
-    200: Ee,
-    300: Be,
-    400: we,
-    500: ke,
-    600: Te,
-    700: v,
-    800: We,
-    900: S
+    100: ColorSky100,
+    200: ColorSky200,
+    300: ColorSky300,
+    400: ColorSky400,
+    500: ColorSky500,
+    600: ColorSky600,
+    700: ColorSky700,
+    800: ColorSky800,
+    900: ColorSky900
   },
   blue: {
-    100: He,
-    200: me,
-    300: Fe,
-    400: f,
-    500: be,
-    600: ze,
-    700: Ce,
-    800: ve,
-    900: Se
+    100: ColorBlue100,
+    200: ColorBlue200,
+    300: ColorBlue300,
+    400: ColorBlue400,
+    500: ColorBlue500,
+    600: ColorBlue600,
+    700: ColorBlue700,
+    800: ColorBlue800,
+    900: ColorBlue900
   },
   purple: {
-    100: fe,
-    200: he,
-    300: ue,
-    400: ye,
-    500: pe,
-    600: se,
-    700: de,
-    800: ge,
-    900: ce
+    100: ColorPurple100,
+    200: ColorPurple200,
+    300: ColorPurple300,
+    400: ColorPurple400,
+    500: ColorPurple500,
+    600: ColorPurple600,
+    700: ColorPurple700,
+    800: ColorPurple800,
+    900: ColorPurple900
   },
   gray: {
-    100: l,
-    200: le,
-    300: h,
-    400: ae,
-    500: u,
-    600: ne,
-    700: y,
-    800: te,
-    900: ie,
-    black: oe,
-    white: p
+    100: ColorGray100,
+    200: ColorGray200,
+    300: ColorGray300,
+    400: ColorGray400,
+    500: ColorGray500,
+    600: ColorGray600,
+    700: ColorGray700,
+    800: ColorGray800,
+    900: ColorGray900,
+    black: ColorGrayBlack,
+    white: ColorGrayWhite
   }
-}, Zo = {
+};
+const button = {
   padding: {
-    verPadding: i.Size25,
+    verPadding: sizing.Size25,
     // 25px
-    horPadding: i.Size6
+    horPadding: sizing.Size6
     // 10px
   },
-  gap: i.Size2,
+  gap: sizing.Size2,
   // 8px
-  radius: a.BorderRadiusMd
+  radius: borderRadius.BorderRadiusMd
   // 6px
-}, $o = {
+};
+const utilityButton = {
   padding: {
     verPadding: 10,
     horPadding: 12
   },
-  gap: i.Size2,
+  gap: sizing.Size2,
   // 8px
-  radius: a.BorderRadiusSm
+  radius: borderRadius.BorderRadiusSm
   // 6px
-}, ei = {
+};
+const iconButton = {
   padding: {
     verPadding: 10,
     horPadding: 12
   },
-  gap: i.Size2,
+  gap: sizing.Size2,
   // 8px
-  radius: a.BorderRadiusSm
+  radius: borderRadius.BorderRadiusSm
   // 6px
-}, ri = {
+};
+const input = {
   suffixPrefixVerPadding: 11,
   // special case - see sizing in FIGMA
-  suffixPrefixHorPadding: i.Size2
-}, t = {
+  suffixPrefixHorPadding: sizing.Size2
+};
+const disabled = {
   color: "#6C6C6C",
   backgroundColor: "#EEEEEE",
   borderColor: "#CBCBCB"
-}, n = {
+};
+const error = {
   color: "#CF3237",
   backgroundColor: "#FFEBEE",
   borderColor: "#FFEBEE"
-}, e = {
+};
+const lightInteractive = {
   interactive: {
     primary: {
       active: "#30606B",
@@ -786,7 +801,8 @@ const jo = {
     }
   },
   transparent: "transparent"
-}, r = {
+};
+const darkInteractive = {
   interactive: {
     tertiary: {
       active: "#FFCA7D",
@@ -795,261 +811,262 @@ const jo = {
       onsurface: "#222222"
     }
   }
-}, F = {
+};
+const lightModeColors = {
   primary: {
     active: {
-      color: e.interactive.primary.onsurface,
-      backgroundColor: e.interactive.primary.active,
-      borderColor: e.interactive.primary.active
+      color: lightInteractive.interactive.primary.onsurface,
+      backgroundColor: lightInteractive.interactive.primary.active,
+      borderColor: lightInteractive.interactive.primary.active
     },
     hover: {
-      color: e.interactive.primary.onsurface,
-      backgroundColor: e.interactive.primary.hover,
-      borderColor: e.interactive.primary.hover
+      color: lightInteractive.interactive.primary.onsurface,
+      backgroundColor: lightInteractive.interactive.primary.hover,
+      borderColor: lightInteractive.interactive.primary.hover
     },
     pressed: {
-      color: e.interactive.primary.onsurface,
-      backgroundColor: e.interactive.primary.pressed,
-      borderColor: e.interactive.primary.pressed
+      color: lightInteractive.interactive.primary.onsurface,
+      backgroundColor: lightInteractive.interactive.primary.pressed,
+      borderColor: lightInteractive.interactive.primary.pressed
     },
     focussed: {
-      color: e.interactive.primary.onsurface,
-      backgroundColor: e.interactive.primary.active,
-      borderColor: e.interactive.primary.active,
-      ringColor: e.inputs.onsurface.focus
+      color: lightInteractive.interactive.primary.onsurface,
+      backgroundColor: lightInteractive.interactive.primary.active,
+      borderColor: lightInteractive.interactive.primary.active,
+      ringColor: lightInteractive.inputs.onsurface.focus
     },
     error: {
-      ...n,
-      ringColor: e.inputs.onsurface.focus
+      ...error,
+      ringColor: lightInteractive.inputs.onsurface.focus
     },
     default: {
-      color: e.interactive.primary.onsurface,
-      backgroundColor: e.interactive.primary.active,
-      borderColor: e.interactive.primary.active,
-      ringColor: e.inputs.onsurface.focus
+      color: lightInteractive.interactive.primary.onsurface,
+      backgroundColor: lightInteractive.interactive.primary.active,
+      borderColor: lightInteractive.interactive.primary.active,
+      ringColor: lightInteractive.inputs.onsurface.focus
     },
-    disabled: t
+    disabled
   },
   secondary: {
     active: {
-      color: e.interactive.secondary.onsurface,
-      backgroundColor: e.transparent,
-      borderColor: e.interactive.secondary.active
+      color: lightInteractive.interactive.secondary.onsurface,
+      backgroundColor: lightInteractive.transparent,
+      borderColor: lightInteractive.interactive.secondary.active
     },
     hover: {
-      color: e.interactive.primary.onsurface,
-      backgroundColor: e.interactive.secondary.hover,
-      borderColor: e.interactive.secondary.hover
+      color: lightInteractive.interactive.primary.onsurface,
+      backgroundColor: lightInteractive.interactive.secondary.hover,
+      borderColor: lightInteractive.interactive.secondary.hover
     },
     pressed: {
-      color: e.interactive.primary.onsurface,
-      backgroundColor: e.interactive.secondary.pressed,
-      borderColor: e.interactive.secondary.active
+      color: lightInteractive.interactive.primary.onsurface,
+      backgroundColor: lightInteractive.interactive.secondary.pressed,
+      borderColor: lightInteractive.interactive.secondary.active
     },
     focussed: {
-      color: e.interactive.secondary.onsurface,
-      backgroundColor: e.transparent,
-      borderColor: e.interactive.secondary.active,
-      ringColor: e.inputs.onsurface.focus
+      color: lightInteractive.interactive.secondary.onsurface,
+      backgroundColor: lightInteractive.transparent,
+      borderColor: lightInteractive.interactive.secondary.active,
+      ringColor: lightInteractive.inputs.onsurface.focus
     },
     error: {
-      ...n,
-      ringColor: e.inputs.onsurface.focus
+      ...error,
+      ringColor: lightInteractive.inputs.onsurface.focus
     },
     default: {
-      color: e.interactive.secondary.onsurface,
-      backgroundColor: e.transparent,
-      borderColor: e.interactive.secondary.active,
-      ringColor: e.inputs.onsurface.focus
+      color: lightInteractive.interactive.secondary.onsurface,
+      backgroundColor: lightInteractive.transparent,
+      borderColor: lightInteractive.interactive.secondary.active,
+      ringColor: lightInteractive.inputs.onsurface.focus
     },
-    disabled: t
+    disabled
   },
   tertiary: {
     active: {
-      color: e.interactive.tertiary.onsurface,
-      backgroundColor: e.interactive.tertiary.active,
-      borderColor: e.interactive.tertiary.active
+      color: lightInteractive.interactive.tertiary.onsurface,
+      backgroundColor: lightInteractive.interactive.tertiary.active,
+      borderColor: lightInteractive.interactive.tertiary.active
     },
     hover: {
-      color: e.interactive.tertiary.onsurface,
-      backgroundColor: e.interactive.tertiary.hover,
-      borderColor: e.interactive.tertiary.hover
+      color: lightInteractive.interactive.tertiary.onsurface,
+      backgroundColor: lightInteractive.interactive.tertiary.hover,
+      borderColor: lightInteractive.interactive.tertiary.hover
     },
     pressed: {
-      color: e.interactive.tertiary.onsurface,
-      backgroundColor: e.interactive.tertiary.pressed,
-      borderColor: e.interactive.tertiary.pressed
+      color: lightInteractive.interactive.tertiary.onsurface,
+      backgroundColor: lightInteractive.interactive.tertiary.pressed,
+      borderColor: lightInteractive.interactive.tertiary.pressed
     },
     focussed: {
-      color: e.interactive.tertiary.onsurface,
-      backgroundColor: e.interactive.tertiary.active,
-      borderColor: e.interactive.tertiary.active,
-      ringColor: e.inputs.onsurface.focus
+      color: lightInteractive.interactive.tertiary.onsurface,
+      backgroundColor: lightInteractive.interactive.tertiary.active,
+      borderColor: lightInteractive.interactive.tertiary.active,
+      ringColor: lightInteractive.inputs.onsurface.focus
     },
     error: {
-      ...n,
-      ringColor: e.inputs.onsurface.focus
+      ...error,
+      ringColor: lightInteractive.inputs.onsurface.focus
     },
     default: {
-      color: e.interactive.tertiary.onsurface,
-      backgroundColor: e.interactive.tertiary.active,
-      borderColor: e.interactive.tertiary.active,
-      ringColor: e.inputs.onsurface.focus
+      color: lightInteractive.interactive.tertiary.onsurface,
+      backgroundColor: lightInteractive.interactive.tertiary.active,
+      borderColor: lightInteractive.interactive.tertiary.active,
+      ringColor: lightInteractive.inputs.onsurface.focus
     },
-    disabled: t
+    disabled
   },
   destructive: {
     active: {
-      color: e.interactive.destructive.onsurface,
-      backgroundColor: e.interactive.destructive.active,
-      borderColor: e.interactive.destructive.active
+      color: lightInteractive.interactive.destructive.onsurface,
+      backgroundColor: lightInteractive.interactive.destructive.active,
+      borderColor: lightInteractive.interactive.destructive.active
     },
     hover: {
-      color: e.interactive.destructive.onsurface,
-      backgroundColor: e.interactive.destructive.hover,
-      borderColor: e.interactive.destructive.hover
+      color: lightInteractive.interactive.destructive.onsurface,
+      backgroundColor: lightInteractive.interactive.destructive.hover,
+      borderColor: lightInteractive.interactive.destructive.hover
     },
     pressed: {
-      color: e.interactive.destructive.onsurface,
-      backgroundColor: e.interactive.destructive.pressed,
-      borderColor: e.interactive.destructive.pressed
+      color: lightInteractive.interactive.destructive.onsurface,
+      backgroundColor: lightInteractive.interactive.destructive.pressed,
+      borderColor: lightInteractive.interactive.destructive.pressed
     },
     focussed: {
-      color: e.interactive.destructive.onsurface,
-      backgroundColor: e.interactive.destructive.active,
-      borderColor: e.interactive.destructive.active,
-      ringColor: e.inputs.onsurface.focus
+      color: lightInteractive.interactive.destructive.onsurface,
+      backgroundColor: lightInteractive.interactive.destructive.active,
+      borderColor: lightInteractive.interactive.destructive.active,
+      ringColor: lightInteractive.inputs.onsurface.focus
     },
     error: {
-      ...n,
-      ringColor: e.inputs.onsurface.focus
+      ...error,
+      ringColor: lightInteractive.inputs.onsurface.focus
     },
     default: {
-      color: e.interactive.destructive.onsurface,
-      backgroundColor: e.interactive.destructive.active,
-      borderColor: e.interactive.destructive.active,
-      ringColor: e.inputs.onsurface.focus
+      color: lightInteractive.interactive.destructive.onsurface,
+      backgroundColor: lightInteractive.interactive.destructive.active,
+      borderColor: lightInteractive.interactive.destructive.active,
+      ringColor: lightInteractive.inputs.onsurface.focus
     },
-    disabled: t
+    disabled
   },
   utility: {
     active: {
-      color: e.interactive.secondary.onsurface,
+      color: lightInteractive.interactive.secondary.onsurface,
       backgroundColor: "#FFF",
-      borderColor: e.interactive.secondary.active
+      borderColor: lightInteractive.interactive.secondary.active
     },
     hover: {
-      color: e.interactive.utility.onsurface,
-      backgroundColor: e.interactive.utility.hover,
-      borderColor: e.interactive.utility.border
+      color: lightInteractive.interactive.utility.onsurface,
+      backgroundColor: lightInteractive.interactive.utility.hover,
+      borderColor: lightInteractive.interactive.utility.border
     },
     pressed: {
-      color: e.interactive.secondary.onsurface,
-      backgroundColor: e.interactive.utility.pressed,
-      borderColor: e.interactive.utility.pressed
+      color: lightInteractive.interactive.secondary.onsurface,
+      backgroundColor: lightInteractive.interactive.utility.pressed,
+      borderColor: lightInteractive.interactive.utility.pressed
     },
     focussed: {
-      color: e.interactive.secondary.onsurface,
+      color: lightInteractive.interactive.secondary.onsurface,
       backgroundColor: "#FFF",
-      borderColor: e.interactive.secondary.active,
-      ringColor: e.inputs.onsurface.focus
+      borderColor: lightInteractive.interactive.secondary.active,
+      ringColor: lightInteractive.inputs.onsurface.focus
     },
     error: {
-      ...n,
-      ringColor: e.inputs.onsurface.focus
+      ...error,
+      ringColor: lightInteractive.inputs.onsurface.focus
     },
     default: {
-      color: e.interactive.secondary.onsurface,
-      backgroundColor: e.transparent,
-      borderColor: e.interactive.secondary.active,
-      ringColor: e.inputs.onsurface.focus
+      color: lightInteractive.interactive.secondary.onsurface,
+      backgroundColor: lightInteractive.transparent,
+      borderColor: lightInteractive.interactive.secondary.active,
+      ringColor: lightInteractive.inputs.onsurface.focus
     },
-    disabled: t
+    disabled
   },
   icon: {
     active: {
-      color: e.interactive.tertiary.onsurface,
+      color: lightInteractive.interactive.tertiary.onsurface,
       backgroundColor: "transparent",
       borderColor: "transparent"
     },
     hover: {
-      color: e.interactive.tertiary.onsurface,
+      color: lightInteractive.interactive.tertiary.onsurface,
       backgroundColor: "#DEEFF3",
       borderColor: "transparent"
     },
     pressed: {
-      color: e.interactive.tertiary.onsurface,
+      color: lightInteractive.interactive.tertiary.onsurface,
       backgroundColor: "#DEEFF3",
       borderColor: "transparent"
     },
     selected: {
-      color: e.interactive.tertiary.onsurface,
+      color: lightInteractive.interactive.tertiary.onsurface,
       backgroundColor: "#DEEFF3",
       borderColor: "transparent"
     },
     focussed: {
-      color: e.interactive.tertiary.onsurface,
+      color: lightInteractive.interactive.tertiary.onsurface,
       backgroundColor: "transparent",
       borderColor: "transparent",
-      ringColor: e.inputs.onsurface.focus
+      ringColor: lightInteractive.inputs.onsurface.focus
     },
     error: {
-      ...n,
-      ringColor: e.inputs.onsurface.focus
+      ...error,
+      ringColor: lightInteractive.inputs.onsurface.focus
     },
     default: {
-      color: e.interactive.tertiary.onsurface,
-      backgroundColor: e.interactive.tertiary.active,
-      borderColor: e.interactive.tertiary.active,
-      ringColor: e.inputs.onsurface.focus
+      color: lightInteractive.interactive.tertiary.onsurface,
+      backgroundColor: lightInteractive.interactive.tertiary.active,
+      borderColor: lightInteractive.interactive.tertiary.active,
+      ringColor: lightInteractive.inputs.onsurface.focus
     },
-    disabled: t
+    disabled
   },
   status: {
     error: {
       default: "#CF3237",
-      ringColor: e.inputs.onsurface.focus,
+      ringColor: lightInteractive.inputs.onsurface.focus,
       onsurface: "#AA292D",
       surface: "#F9D4D5",
       "surface-hover": "#F3A9AB"
     },
     success: {
       default: "#32863E",
-      ringColor: e.inputs.onsurface.focus,
+      ringColor: lightInteractive.inputs.onsurface.focus,
       onsurface: "#296E33",
       surface: "#D3EFD7",
       "surface-hover": "#A7DFAF"
     },
     warning: {
-      default: z,
-      ringColor: e.inputs.onsurface.focus,
+      default: ColorYellow500,
+      ringColor: lightInteractive.inputs.onsurface.focus,
       onsurface: "#704819",
       surface: "#FFF2DF",
       "surface-hover": "#FFE5BE"
     },
     info: {
       default: "#384DF6",
-      ringColor: e.inputs.onsurface.focus,
+      ringColor: lightInteractive.inputs.onsurface.focus,
       onsurface: "#2E3FCA",
       surface: "#D7DBFD"
     },
     generic: {
       default: "#9A9A9A",
-      ringColor: e.inputs.onsurface.focus,
+      ringColor: lightInteractive.inputs.onsurface.focus,
       onsurface: "#3E3E3E",
       surface: "#F4F4F4",
       "surface-hover": "#F4F4F4"
     },
     hollow: {
       default: "#9A9A9A",
-      ringColor: e.inputs.onsurface.focus,
+      ringColor: lightInteractive.inputs.onsurface.focus,
       onsurface: "#3E3E3E",
       surface: "#F4F4F4",
       "surface-hover": "#FFFFFF"
     },
     disabled: {
       default: "#6C6C6C",
-      ringColor: e.inputs.onsurface.focus,
+      ringColor: lightInteractive.inputs.onsurface.focus,
       onsurface: "#EEEEEE",
       surface: "#EEEEEE"
     }
@@ -1079,18 +1096,18 @@ const jo = {
       onsurface: "#222222"
     },
     link: {
-      active: v,
-      hover: S,
-      disabled: l,
+      active: ColorSky700,
+      hover: ColorSky900,
+      disabled: ColorGray100,
       current: "#384DF6"
     },
-    ...e.interactive
+    ...lightInteractive.interactive
   },
   inputs: {
     surface: {
-      active: p,
-      border: u,
-      disabled: l,
+      active: ColorGrayWhite,
+      border: ColorGray500,
+      disabled: ColorGray100,
       checked: "#384DF6",
       "checked-hover": "#24319D"
     },
@@ -1101,10 +1118,10 @@ const jo = {
       "icon-disabled": "#6C6C6C"
     },
     progress: {
-      empty: h,
-      success: C,
-      error: b,
-      info: f
+      empty: ColorGray300,
+      success: ColorGreen400,
+      error: ColorRed500,
+      info: ColorBlue400
     }
   },
   surface: {
@@ -1116,79 +1133,193 @@ const jo = {
   transparent: "transparent",
   onsurface: {
     copy: "#3E3E3E",
-    "copy-light": y,
+    "copy-light": ColorGray700,
     "copy-dark": "#222222",
     "copy-disabled": "#6C6C6C"
   }
-}, oi = F;
-o.gray.white, o.gray.white, o.gray.white, o.gray.white, o.gray[600], o.gray.white, o.gray.white, o.gray.white, o.gray.white, o.gray[600], o.gray.white, o.gray.white, o.gray.white, o.gray.white, o.gray[600], r.interactive.tertiary.onsurface, r.interactive.tertiary.active, r.interactive.tertiary.active, r.interactive.tertiary.onsurface, r.interactive.tertiary.hover, r.interactive.tertiary.hover, r.interactive.tertiary.onsurface, r.interactive.tertiary.pressed, r.interactive.tertiary.pressed, r.interactive.tertiary.onsurface, r.interactive.tertiary.active, r.interactive.tertiary.active, r.interactive.tertiary.onsurface, r.interactive.tertiary.active, r.interactive.tertiary.active, r.interactive.tertiary.onsurface, r.interactive.tertiary.onsurface, r.interactive.tertiary.onsurface, r.interactive.tertiary.pressed, r.interactive.tertiary.pressed, r.interactive.tertiary.onsurface, r.interactive.tertiary.active, r.interactive.tertiary.active, r.interactive.tertiary.onsurface, r.interactive.tertiary.active, r.interactive.tertiary.active;
-const ii = {
+};
+const darkModeColors = lightModeColors;
+({
+  primary: {
+    active: {
+      color: colors.gray.white
+    },
+    hover: {
+      color: colors.gray.white
+    },
+    pressed: {
+      color: colors.gray.white
+    },
+    focussed: {
+      color: colors.gray.white
+    },
+    disabled: {
+      color: colors.gray[600]
+    }
+  },
+  secondary: {
+    active: {
+      color: colors.gray.white
+    },
+    hover: {
+      color: colors.gray.white
+    },
+    pressed: {
+      color: colors.gray.white
+    },
+    focussed: {
+      color: colors.gray.white
+    },
+    disabled: {
+      color: colors.gray[600]
+    }
+  },
+  tertiary: {
+    active: {
+      color: colors.gray.white
+    },
+    hover: {
+      color: colors.gray.white
+    },
+    pressed: {
+      color: colors.gray.white
+    },
+    focussed: {
+      color: colors.gray.white
+    },
+    disabled: {
+      color: colors.gray[600]
+    }
+  },
+  utility: {
+    active: {
+      color: darkInteractive.interactive.tertiary.onsurface,
+      backgroundColor: darkInteractive.interactive.tertiary.active,
+      borderColor: darkInteractive.interactive.tertiary.active
+    },
+    hover: {
+      color: darkInteractive.interactive.tertiary.onsurface,
+      backgroundColor: darkInteractive.interactive.tertiary.hover,
+      borderColor: darkInteractive.interactive.tertiary.hover
+    },
+    pressed: {
+      color: darkInteractive.interactive.tertiary.onsurface,
+      backgroundColor: darkInteractive.interactive.tertiary.pressed,
+      borderColor: darkInteractive.interactive.tertiary.pressed
+    },
+    focussed: {
+      color: darkInteractive.interactive.tertiary.onsurface,
+      backgroundColor: darkInteractive.interactive.tertiary.active,
+      borderColor: darkInteractive.interactive.tertiary.active
+    },
+    default: {
+      color: darkInteractive.interactive.tertiary.onsurface,
+      backgroundColor: darkInteractive.interactive.tertiary.active,
+      borderColor: darkInteractive.interactive.tertiary.active
+    }
+  },
+  icon: {
+    active: {
+      color: darkInteractive.interactive.tertiary.onsurface
+    },
+    hover: {
+      color: darkInteractive.interactive.tertiary.onsurface
+    },
+    pressed: {
+      color: darkInteractive.interactive.tertiary.onsurface,
+      backgroundColor: darkInteractive.interactive.tertiary.pressed,
+      borderColor: darkInteractive.interactive.tertiary.pressed
+    },
+    focussed: {
+      color: darkInteractive.interactive.tertiary.onsurface,
+      backgroundColor: darkInteractive.interactive.tertiary.active,
+      borderColor: darkInteractive.interactive.tertiary.active
+    },
+    default: {
+      color: darkInteractive.interactive.tertiary.onsurface,
+      backgroundColor: darkInteractive.interactive.tertiary.active,
+      borderColor: darkInteractive.interactive.tertiary.active
+    }
+  }
+});
+const shadows = {
   general: {
-    1: "box-shadow: 0px 4px 16px 0px #00000026",
-    2: "box-shadow: 0px 8px 24px -4px #00000026",
-    3: "box-shadow: 0px 2px 3px -1px #00000026",
-    4: "box-shadow: 4px 0px 7px -3px #0000001F"
+    "1": "box-shadow: 0px 4px 16px 0px #00000026",
+    "2": "box-shadow: 0px 8px 24px -4px #00000026",
+    "3": "box-shadow: 0px 2px 3px -1px #00000026",
+    "4": "box-shadow: 4px 0px 7px -3px #0000001F"
   },
   actions: {
-    1: "box-shadow: 0px 2px 2px -1px #00000033",
-    2: "box-shadow: 0px 1px 2px 0px #00000026"
+    "1": "box-shadow: 0px 2px 2px -1px #00000033",
+    "2": "box-shadow: 0px 1px 2px 0px #00000026"
   },
   inputs: {
-    1: "box-shadow: 0px 1px 2px 0px #0000001F"
+    "1": "box-shadow: 0px 1px 2px 0px #0000001F"
   }
-}, ti = {
+};
+const motion = {
   instant: 0,
   veryfast: 0.15,
   fast: 0.33,
   medium: 0.5,
   slow: 1,
   veryslow: 2
-}, ni = {
+};
+const badge = {
   "ver-padding": 4,
   "right-padding": 8,
   "left-padding": 8,
   radius: 50
-}, ai = {
-  "ver-padding": i.Size1,
-  "hor-padding": i.Size2,
-  radius: a.BorderRadiusMd,
-  gap: i.Size1
-}, li = {
-  "ver-padding": i.Size5,
-  "hor-padding": i.Size6,
-  gap: i.Size2
-}, ci = {
-  button: Zo,
-  utilityButton: $o,
-  iconButton: ei,
-  input: ri,
-  row: li,
-  badge: ni,
-  popover: ai
-}, gi = (H, W) => H.status[W].default, m = {
-  breakpoints: jo,
-  sizing: i,
-  borderRadius: a,
-  typography: Uo,
-  allColors: o,
-  components: ci,
-  motion: ti,
-  shadows: ii,
-  getStatusColor: gi
-}, pi = {
-  ...m,
-  colors: F,
+};
+const popover = {
+  "ver-padding": sizing.Size1,
+  "hor-padding": sizing.Size2,
+  radius: borderRadius.BorderRadiusMd,
+  gap: sizing.Size1
+};
+const row = {
+  "ver-padding": sizing.Size5,
+  "hor-padding": sizing.Size6,
+  gap: sizing.Size2
+};
+const components = {
+  button,
+  utilityButton,
+  iconButton,
+  input,
+  row,
+  badge,
+  popover
+};
+const getStatusColor = (colors2, status) => {
+  return colors2.status[status].default;
+};
+const baseTokens = {
+  breakpoints,
+  sizing,
+  borderRadius,
+  typography,
+  allColors: colors,
+  components,
+  motion,
+  shadows,
+  getStatusColor
+};
+const lightTheme = {
+  ...baseTokens,
+  colors: lightModeColors,
   mode: "light"
-}, yi = {
-  ...m,
-  colors: oi,
+};
+const darkTheme = {
+  ...baseTokens,
+  colors: darkModeColors,
   mode: "dark"
 };
 export {
-  si as TypographySizeKey,
-  m as baseTokens,
-  jo as breakpoints,
-  yi as darkTheme,
-  pi as lightTheme,
-  i as sizing
+  TypographySizeKey,
+  baseTokens,
+  breakpoints,
+  darkTheme,
+  lightTheme,
+  sizing
 };