@gobolt/genesis 0.3.20 → 0.3.22

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

@@ -1,1336 +1,1512 @@
-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, ColorSky800, ColorGray400, ColorGray300, ColorGray200, ColorGray100, ColorGrayWhite, BorderRadiusMd, BorderRadiusSm, ColorGrayBlack, ColorGray900, ColorGray800, ColorGray700, ColorGray600, ColorGray500, ColorPurple900, ColorPurple800, ColorPurple700, ColorPurple600, ColorPurple500, ColorPurple400, ColorPurple300, ColorPurple200, ColorPurple100, ColorBlue900, ColorBlue800, ColorBlue700, ColorBlue600, ColorBlue500, ColorBlue400, ColorBlue300, ColorBlue200, ColorBlue100, ColorSky900, 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
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
-const borderRadius = {
-  BorderRadiusNone,
-  BorderRadiusXs,
-  BorderRadiusSm,
-  BorderRadiusMd,
-  BorderRadiusLg,
-  BorderRadiusXl,
-  BorderRadiusXxl,
-  BorderRadiusXxxl,
-  BorderRadiusRounded
+// sizes
+import { Size1, Size1_5, Size2, Size2_5, Size3, Size4, Size5, Size6, Size7, Size8, Size10, Size12, Size13, Size14, Size16, Size18, Size20, Size24, Size27, Size28, Size30, Size32, Size34, Size35, Size39, Size43, Size50, Size64, Size05, Size15, Size025, Size25, } from "../design-tokens/variables";
+// typography
+// FIXME: missing sub headings, digits, message, overline, label, link!!!
+import { TypographyPrimaryFontFamily, TypographyWideFontSizeDisplay1, TypographyWideFontSizeDisplay2, TypographyWideFontSizeDisplay3, TypographyWideFontSizeHeading1, TypographyWideFontSizeHeading2, TypographyWideFontSizeHeading3, TypographyWideFontSizeSubHeading1, TypographyWideFontSizeSubHeading2, TypographyWideFontSizeSubHeading3, TypographyWideFontSizeBody1, TypographyWideFontSizeBody2, TypographyWideFontSizeBody3, TypographyWideFontSizeBody4, TypographyWideFontSizeBody5, TypographyWideFontSizeMessage, TypographyWideFontSizeOverline1, TypographyWideFontSizeOverline2, TypographyWideFontSizeOverline3, TypographyWideFontSizeLabel1, TypographyWideFontSizeLabel2, TypographyWideFontSizeLabel3, TypographyWideFontSizeLink1, TypographyWideFontSizeLink2, TypographyWideFontSizeLink3, TypographyWideFontSizeDigits1, TypographyWideFontSizeDigits2, TypographyWideFontSizeDigits3, TypographyMediumFontSizeDisplay1, TypographyMediumFontSizeDisplay2, TypographyMediumFontSizeDisplay3, TypographyMediumFontSizeHeading1, TypographyMediumFontSizeHeading2, TypographyMediumFontSizeHeading3, TypographyMediumFontSizeSubHeading1, TypographyMediumFontSizeSubHeading2, TypographyMediumFontSizeSubHeading3, TypographyMediumFontSizeBody1, TypographyMediumFontSizeBody2, TypographyMediumFontSizeBody3, TypographyMediumFontSizeBody4, TypographyMediumFontSizeBody5, TypographyMediumFontSizeMessage, TypographyMediumFontSizeOverline1, TypographyMediumFontSizeOverline2, TypographyMediumFontSizeOverline3, TypographyMediumFontSizeLabel1, TypographyMediumFontSizeLabel2, TypographyMediumFontSizeLabel3, TypographyMediumFontSizeLink1, TypographyMediumFontSizeLink2, TypographyMediumFontSizeLink3, TypographyMediumFontSizeDigits1, TypographyMediumFontSizeDigits2, TypographyMediumFontSizeDigits3, TypographyNarrowFontSizeDisplay1, TypographyNarrowFontSizeDisplay2, TypographyNarrowFontSizeDisplay3, TypographyNarrowFontSizeHeading1, TypographyNarrowFontSizeHeading2, TypographyNarrowFontSizeHeading3, TypographyNarrowFontSizeSubHeading1, TypographyNarrowFontSizeSubHeading2, TypographyNarrowFontSizeSubHeading3, TypographyNarrowFontSizeBody1, TypographyNarrowFontSizeBody2, TypographyNarrowFontSizeBody3, TypographyNarrowFontSizeBody4, TypographyNarrowFontSizeBody5, TypographyNarrowFontSizeMessage, TypographyNarrowFontSizeOverline1, TypographyNarrowFontSizeOverline2, TypographyNarrowFontSizeOverline3, TypographyNarrowFontSizeLabel1, TypographyNarrowFontSizeLabel2, TypographyNarrowFontSizeLabel3, TypographyNarrowFontSizeLink1, TypographyNarrowFontSizeLink2, TypographyNarrowFontSizeLink3, TypographyNarrowFontSizeDigits1, TypographyNarrowFontSizeDigits2, TypographyNarrowFontSizeDigits3, } from "../design-tokens/variables";
+// colors
+import { ColorRed100, ColorRed200, ColorRed300, ColorRed400, ColorRed500, ColorRed600, ColorRed700, ColorRed800, ColorRed900, ColorOrange100, ColorOrange200, ColorOrange300, ColorOrange400, ColorOrange500, ColorOrange600, ColorOrange700, ColorOrange800, ColorOrange900, ColorYellow100, ColorYellow200, ColorYellow300, ColorYellow400, ColorYellow500, ColorYellow600, ColorYellow700, ColorYellow800, ColorYellow900, ColorGreen100, ColorGreen200, ColorGreen300, ColorGreen400, ColorGreen500, ColorGreen600, ColorGreen700, ColorGreen800, ColorGreen900, ColorSky100, ColorSky200, ColorSky300, ColorSky400, ColorSky500, ColorSky600, ColorSky700, ColorSky800, ColorSky900, ColorBlue100, ColorBlue200, ColorBlue300, ColorBlue400, ColorBlue500, ColorBlue600, ColorBlue700, ColorBlue800, ColorBlue900, ColorPurple100, ColorPurple200, ColorPurple300, ColorPurple400, ColorPurple500, ColorPurple600, ColorPurple700, ColorPurple800, ColorPurple900, ColorGray100, ColorGray200, ColorGray300, ColorGray400, ColorGray500, ColorGray600, ColorGray700, ColorGray800, ColorGray900, ColorGrayBlack, ColorGrayWhite, } from "../design-tokens/variables";
+// border radius
+import { BorderRadiusNone, BorderRadiusXs, BorderRadiusSm, BorderRadiusMd, BorderRadiusLg, BorderRadiusXl, BorderRadiusXxl, BorderRadiusXxxl, BorderRadiusRounded, } from "../design-tokens/variables";
+// breakpoints
+// note: the Figma JSON didn't export a breakpoints object, so we need to create one based on what Figma describes as having breakpoints: Wide, Medium, Narrow
+// Figma only mentions 3 breakpoints: Wide, Medium, Narrow so that's all we can officially support
+export var breakpoints = {
+    wide: 1280,
+    medium: 1024,
+    narrow: 480,
 };
-const sizing = {
-  Size1,
-  // 4px
-  Size1_5,
-  // 6px
-  Size2,
-  // 8px
-  Size2_5,
-  // 10px
-  Size3,
-  // 12px
-  Size4,
-  // 16px
-  Size5,
-  // 20px
-  Size6,
-  // 24px
-  Size7,
-  // 28px
-  Size8,
-  // 32px
-  Size10,
-  // 40px
-  Size12,
-  // 48px
-  Size13,
-  // 52px
-  Size14,
-  // 56px
-  Size16,
-  // 64px
-  Size18,
-  // 72px
-  Size20,
-  // 80px
-  Size24,
-  // 96px
-  Size27,
-  // 108px
-  Size28,
-  // 112px
-  Size30,
-  // 120px
-  Size32,
-  // 128px
-  Size34,
-  // 136px
-  Size35,
-  // 140px
-  Size39,
-  // 156px
-  Size43,
-  // 172px
-  Size50,
-  // 200px
-  Size64,
-  // 256px
-  Size05,
-  // 2px
-  Size15,
-  // 6px
-  Size025,
-  // 1px
-  Size25,
-  // 10px
-  xs: Size1,
-  // 4px
-  sm: Size2,
-  // 8px
-  md: Size3,
-  // 12px
-  lg: Size4,
-  // 16px
-  typography1: 12,
-  typography2: 14,
-  typography3: 16
+var borderRadius = {
+    BorderRadiusNone: BorderRadiusNone,
+    BorderRadiusXs: BorderRadiusXs,
+    BorderRadiusSm: BorderRadiusSm,
+    BorderRadiusMd: BorderRadiusMd,
+    BorderRadiusLg: BorderRadiusLg,
+    BorderRadiusXl: BorderRadiusXl,
+    BorderRadiusXxl: BorderRadiusXxl,
+    BorderRadiusXxxl: BorderRadiusXxxl,
+    BorderRadiusRounded: BorderRadiusRounded,
 };
-const TypographySizeKey = {
-  display1: "display1",
-  display2: "display2",
-  display3: "display3",
-  heading1: "heading1",
-  heading2: "heading2",
-  heading3: "heading3",
-  subHeading1: "subHeading1",
-  subHeading2: "subHeading2",
-  subHeading3: "subHeading3",
-  body1: "body1",
-  body2: "body2",
-  body3: "body3",
-  body4: "body4",
-  body5: "body5",
-  message: "message",
-  overline1: "overline1",
-  overline2: "overline2",
-  overline3: "overline3",
-  label1: "label1",
-  label2: "label2",
-  label3: "label3",
-  link1: "link1",
-  link2: "link2",
-  link3: "link3",
-  digits1: "digits1",
-  digits2: "digits2",
-  digits3: "digits3"
+export var sizing = {
+    Size1: Size1, // 4px
+    Size1_5: Size1_5, // 6px
+    Size2: Size2, // 8px
+    Size2_5: Size2_5, // 10px
+    Size3: Size3, // 12px
+    Size4: Size4, // 16px
+    Size5: Size5, // 20px
+    Size6: Size6, // 24px
+    Size7: Size7, // 28px
+    Size8: Size8, // 32px
+    Size10: Size10, // 40px
+    Size12: Size12, // 48px
+    Size13: Size13, // 52px
+    Size14: Size14, // 56px
+    Size16: Size16, // 64px
+    Size18: Size18, // 72px
+    Size20: Size20, // 80px
+    Size24: Size24, // 96px
+    Size27: Size27, // 108px
+    Size28: Size28, // 112px
+    Size30: Size30, // 120px
+    Size32: Size32, // 128px
+    Size34: Size34, // 136px
+    Size35: Size35, // 140px
+    Size39: Size39, // 156px
+    Size43: Size43, // 172px
+    Size50: Size50, // 200px
+    Size64: Size64, // 256px
+    Size05: Size05, // 2px
+    Size15: Size15, // 6px
+    Size025: Size025, // 1px
+    Size25: Size25, // 10px
+    xs: Size1, // 4px
+    sm: Size2, // 8px
+    md: Size3, // 12px
+    lg: Size4, // 16px
+    typography1: 12,
+    typography2: 14,
+    typography3: 16,
 };
-const wideTypography = {
-  display1: {
-    fontSize: TypographyWideFontSizeDisplay1,
-    lineHeight: "3.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  display2: {
-    fontSize: TypographyWideFontSizeDisplay2,
-    lineHeight: "3rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  display3: {
-    fontSize: TypographyWideFontSizeDisplay3,
-    lineHeight: "2.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  heading1: {
-    fontSize: TypographyWideFontSizeHeading1,
-    lineHeight: "2rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  heading2: {
-    fontSize: TypographyWideFontSizeHeading2,
-    lineHeight: "1.75rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  heading3: {
-    fontSize: TypographyWideFontSizeHeading3,
-    lineHeight: "1.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  subHeading1: {
-    fontSize: TypographyWideFontSizeSubHeading1,
-    lineHeight: "1.25rem",
-    fontWeight: 600,
-    letterSpacing: "0"
-  },
-  subHeading2: {
-    fontSize: TypographyWideFontSizeSubHeading2,
-    lineHeight: "1.25rem",
-    fontWeight: 600,
-    letterSpacing: "0"
-  },
-  subHeading3: {
-    fontSize: TypographyWideFontSizeSubHeading3,
-    lineHeight: "1rem",
-    fontWeight: 600,
-    letterSpacing: "0"
-  },
-  body1: {
-    fontSize: TypographyWideFontSizeBody1,
-    lineHeight: "1.5rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body2: {
-    fontSize: TypographyWideFontSizeBody2,
-    lineHeight: "1.25rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body3: {
-    fontSize: TypographyWideFontSizeBody3,
-    lineHeight: "1rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body4: {
-    fontSize: TypographyWideFontSizeBody4,
-    lineHeight: "0.875rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body5: {
-    fontSize: TypographyWideFontSizeBody5,
-    lineHeight: "0.75rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  message: {
-    fontSize: TypographyWideFontSizeMessage,
-    lineHeight: "23px",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  overline1: {
-    fontSize: TypographyWideFontSizeOverline1,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  overline2: {
-    fontSize: TypographyWideFontSizeOverline2,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  overline3: {
-    fontSize: TypographyWideFontSizeOverline3,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  label1: {
-    fontSize: TypographyWideFontSizeLabel1,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  label2: {
-    fontSize: TypographyWideFontSizeLabel2,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  label3: {
-    fontSize: TypographyWideFontSizeLabel3,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  link1: {
-    fontSize: TypographyWideFontSizeLink1,
-    lineHeight: "1.5rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  link2: {
-    fontSize: TypographyWideFontSizeLink2,
-    lineHeight: "1.25rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  link3: {
-    fontSize: TypographyWideFontSizeLink3,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  digits1: {
-    fontSize: TypographyWideFontSizeDigits1,
-    lineHeight: "3.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  digits2: {
-    fontSize: TypographyWideFontSizeDigits2,
-    lineHeight: "3rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  digits3: {
-    fontSize: TypographyWideFontSizeDigits3,
-    lineHeight: "2.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  }
+// typography
+export var TypographySizeKey = {
+    display1: "display1",
+    display2: "display2",
+    display3: "display3",
+    heading1: "heading1",
+    heading2: "heading2",
+    heading3: "heading3",
+    subHeading1: "subHeading1",
+    subHeading2: "subHeading2",
+    subHeading3: "subHeading3",
+    body1: "body1",
+    body2: "body2",
+    body3: "body3",
+    body4: "body4",
+    body5: "body5",
+    message: "message",
+    overline1: "overline1",
+    overline2: "overline2",
+    overline3: "overline3",
+    label1: "label1",
+    label2: "label2",
+    label3: "label3",
+    link1: "link1",
+    link2: "link2",
+    link3: "link3",
+    digits1: "digits1",
+    digits2: "digits2",
+    digits3: "digits3",
 };
-const mediumTypography = {
-  display1: {
-    fontSize: TypographyMediumFontSizeDisplay1,
-    lineHeight: "3.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  display2: {
-    fontSize: TypographyMediumFontSizeDisplay2,
-    lineHeight: "3rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  display3: {
-    fontSize: TypographyMediumFontSizeDisplay3,
-    lineHeight: "2.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  heading1: {
-    fontSize: TypographyMediumFontSizeHeading1,
-    lineHeight: "2rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  heading2: {
-    fontSize: TypographyMediumFontSizeHeading2,
-    lineHeight: "1.75rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  heading3: {
-    fontSize: TypographyMediumFontSizeHeading3,
-    lineHeight: "1.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  subHeading1: {
-    fontSize: TypographyMediumFontSizeSubHeading1,
-    lineHeight: "1.25rem",
-    fontWeight: 600,
-    letterSpacing: "0"
-  },
-  subHeading2: {
-    fontSize: TypographyMediumFontSizeSubHeading2,
-    lineHeight: "1.25rem",
-    fontWeight: 600,
-    letterSpacing: "0"
-  },
-  subHeading3: {
-    fontSize: TypographyMediumFontSizeSubHeading3,
-    lineHeight: "1rem",
-    fontWeight: 600,
-    letterSpacing: "0"
-  },
-  body1: {
-    fontSize: TypographyMediumFontSizeBody1,
-    lineHeight: "1.5rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body2: {
-    fontSize: TypographyMediumFontSizeBody2,
-    lineHeight: "1.25rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body3: {
-    fontSize: TypographyMediumFontSizeBody3,
-    lineHeight: "1rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body4: {
-    fontSize: TypographyMediumFontSizeBody4,
-    lineHeight: "0.875rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body5: {
-    fontSize: TypographyMediumFontSizeBody5,
-    lineHeight: "0.75rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  message: {
-    fontSize: TypographyMediumFontSizeMessage,
-    lineHeight: "23px",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  overline1: {
-    fontSize: TypographyMediumFontSizeOverline1,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  overline2: {
-    fontSize: TypographyMediumFontSizeOverline2,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  overline3: {
-    fontSize: TypographyMediumFontSizeOverline3,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  label1: {
-    fontSize: TypographyMediumFontSizeLabel1,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  label2: {
-    fontSize: TypographyMediumFontSizeLabel2,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  label3: {
-    fontSize: TypographyMediumFontSizeLabel3,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  link1: {
-    fontSize: TypographyMediumFontSizeLink1,
-    lineHeight: "1.5rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  link2: {
-    fontSize: TypographyMediumFontSizeLink2,
-    lineHeight: "1.25rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  link3: {
-    fontSize: TypographyMediumFontSizeLink3,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  digits1: {
-    fontSize: TypographyMediumFontSizeDigits1,
-    lineHeight: "3.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  digits2: {
-    fontSize: TypographyMediumFontSizeDigits2,
-    lineHeight: "3rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  digits3: {
-    fontSize: TypographyMediumFontSizeDigits3,
-    lineHeight: "2.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  }
+var typographyTemplate = {
+    display1: {
+        fontSize: "",
+        lineHeight: "",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    display2: {
+        fontSize: "",
+        lineHeight: "",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    display3: {
+        fontSize: "",
+        lineHeight: "",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    heading1: {
+        fontSize: "",
+        lineHeight: "",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    heading2: {
+        fontSize: "",
+        lineHeight: "",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    heading3: {
+        fontSize: "",
+        lineHeight: "",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    subHeading1: {
+        fontSize: "",
+        lineHeight: "",
+        fontWeight: 600,
+        letterSpacing: "0",
+    },
+    subHeading2: {
+        fontSize: "",
+        lineHeight: "",
+        fontWeight: 600,
+        letterSpacing: "0",
+    },
+    subHeading3: {
+        fontSize: "",
+        lineHeight: "",
+        fontWeight: 600,
+        letterSpacing: "0",
+    },
+    body1: { fontSize: "", lineHeight: "", fontWeight: 400, letterSpacing: "0" },
+    body2: { fontSize: "", lineHeight: "", fontWeight: 400, letterSpacing: "0" },
+    body3: { fontSize: "", lineHeight: "", fontWeight: 400, letterSpacing: "0" },
+    body4: { fontSize: "", lineHeight: "", fontWeight: 400, letterSpacing: "0" },
+    body5: { fontSize: "", lineHeight: "", fontWeight: 400, letterSpacing: "0" },
+    message: {
+        fontSize: "",
+        lineHeight: "",
+        fontWeight: 400,
+        letterSpacing: "0",
+    },
+    overline1: {
+        fontSize: "",
+        lineHeight: "",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    overline2: {
+        fontSize: "",
+        lineHeight: "",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    overline3: {
+        fontSize: "",
+        lineHeight: "",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    label1: { fontSize: "", lineHeight: "", fontWeight: 500, letterSpacing: "0" },
+    label2: { fontSize: "", lineHeight: "", fontWeight: 500, letterSpacing: "0" },
+    label3: { fontSize: "", lineHeight: "", fontWeight: 500, letterSpacing: "0" },
+    link1: { fontSize: "", lineHeight: "", fontWeight: 500, letterSpacing: "0" },
+    link2: { fontSize: "", lineHeight: "", fontWeight: 500, letterSpacing: "0" },
+    link3: { fontSize: "", lineHeight: "", fontWeight: 500, letterSpacing: "0" },
+    digits1: {
+        fontSize: "",
+        lineHeight: "",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    digits2: {
+        fontSize: "",
+        lineHeight: "",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    digits3: {
+        fontSize: "",
+        lineHeight: "",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+};
+var wideTypography = {
+    display1: {
+        fontSize: TypographyWideFontSizeDisplay1,
+        lineHeight: "3.5rem",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    display2: {
+        fontSize: TypographyWideFontSizeDisplay2,
+        lineHeight: "3rem",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    display3: {
+        fontSize: TypographyWideFontSizeDisplay3,
+        lineHeight: "2.5rem",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    heading1: {
+        fontSize: TypographyWideFontSizeHeading1,
+        lineHeight: "2rem",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    heading2: {
+        fontSize: TypographyWideFontSizeHeading2,
+        lineHeight: "1.75rem",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    heading3: {
+        fontSize: TypographyWideFontSizeHeading3,
+        lineHeight: "1.5rem",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    subHeading1: {
+        fontSize: TypographyWideFontSizeSubHeading1,
+        lineHeight: "1.25rem",
+        fontWeight: 600,
+        letterSpacing: "0",
+    },
+    subHeading2: {
+        fontSize: TypographyWideFontSizeSubHeading2,
+        lineHeight: "1.25rem",
+        fontWeight: 600,
+        letterSpacing: "0",
+    },
+    subHeading3: {
+        fontSize: TypographyWideFontSizeSubHeading3,
+        lineHeight: "1rem",
+        fontWeight: 600,
+        letterSpacing: "0",
+    },
+    body1: {
+        fontSize: TypographyWideFontSizeBody1,
+        lineHeight: "1.5rem",
+        fontWeight: 400,
+        letterSpacing: "0",
+    },
+    body2: {
+        fontSize: TypographyWideFontSizeBody2,
+        lineHeight: "1.25rem",
+        fontWeight: 400,
+        letterSpacing: "0",
+    },
+    body3: {
+        fontSize: TypographyWideFontSizeBody3,
+        lineHeight: "1rem",
+        fontWeight: 400,
+        letterSpacing: "0",
+    },
+    body4: {
+        fontSize: TypographyWideFontSizeBody4,
+        lineHeight: "0.875rem",
+        fontWeight: 400,
+        letterSpacing: "0",
+    },
+    body5: {
+        fontSize: TypographyWideFontSizeBody5,
+        lineHeight: "0.75rem",
+        fontWeight: 400,
+        letterSpacing: "0",
+    },
+    message: {
+        fontSize: TypographyWideFontSizeMessage,
+        lineHeight: "23px",
+        fontWeight: 400,
+        letterSpacing: "0",
+    },
+    overline1: {
+        fontSize: TypographyWideFontSizeOverline1,
+        lineHeight: "0.75rem",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    overline2: {
+        fontSize: TypographyWideFontSizeOverline2,
+        lineHeight: "0.75rem",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    overline3: {
+        fontSize: TypographyWideFontSizeOverline3,
+        lineHeight: "0.75rem",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    label1: {
+        fontSize: TypographyWideFontSizeLabel1,
+        lineHeight: "1rem",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    label2: {
+        fontSize: TypographyWideFontSizeLabel2,
+        lineHeight: "1rem",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    label3: {
+        fontSize: TypographyWideFontSizeLabel3,
+        lineHeight: "1rem",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    link1: {
+        fontSize: TypographyWideFontSizeLink1,
+        lineHeight: "1.5rem",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    link2: {
+        fontSize: TypographyWideFontSizeLink2,
+        lineHeight: "1.25rem",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    link3: {
+        fontSize: TypographyWideFontSizeLink3,
+        lineHeight: "1rem",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    digits1: {
+        fontSize: TypographyWideFontSizeDigits1,
+        lineHeight: "3.5rem",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    digits2: {
+        fontSize: TypographyWideFontSizeDigits2,
+        lineHeight: "3rem",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    digits3: {
+        fontSize: TypographyWideFontSizeDigits3,
+        lineHeight: "2.5rem",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+};
+var mediumTypography = {
+    display1: {
+        fontSize: TypographyMediumFontSizeDisplay1,
+        lineHeight: "3.5rem",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    display2: {
+        fontSize: TypographyMediumFontSizeDisplay2,
+        lineHeight: "3rem",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    display3: {
+        fontSize: TypographyMediumFontSizeDisplay3,
+        lineHeight: "2.5rem",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    heading1: {
+        fontSize: TypographyMediumFontSizeHeading1,
+        lineHeight: "2rem",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    heading2: {
+        fontSize: TypographyMediumFontSizeHeading2,
+        lineHeight: "1.75rem",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    heading3: {
+        fontSize: TypographyMediumFontSizeHeading3,
+        lineHeight: "1.5rem",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    subHeading1: {
+        fontSize: TypographyMediumFontSizeSubHeading1,
+        lineHeight: "1.25rem",
+        fontWeight: 600,
+        letterSpacing: "0",
+    },
+    subHeading2: {
+        fontSize: TypographyMediumFontSizeSubHeading2,
+        lineHeight: "1.25rem",
+        fontWeight: 600,
+        letterSpacing: "0",
+    },
+    subHeading3: {
+        fontSize: TypographyMediumFontSizeSubHeading3,
+        lineHeight: "1rem",
+        fontWeight: 600,
+        letterSpacing: "0",
+    },
+    body1: {
+        fontSize: TypographyMediumFontSizeBody1,
+        lineHeight: "1.5rem",
+        fontWeight: 400,
+        letterSpacing: "0",
+    },
+    body2: {
+        fontSize: TypographyMediumFontSizeBody2,
+        lineHeight: "1.25rem",
+        fontWeight: 400,
+        letterSpacing: "0",
+    },
+    body3: {
+        fontSize: TypographyMediumFontSizeBody3,
+        lineHeight: "1rem",
+        fontWeight: 400,
+        letterSpacing: "0",
+    },
+    body4: {
+        fontSize: TypographyMediumFontSizeBody4,
+        lineHeight: "0.875rem",
+        fontWeight: 400,
+        letterSpacing: "0",
+    },
+    body5: {
+        fontSize: TypographyMediumFontSizeBody5,
+        lineHeight: "0.75rem",
+        fontWeight: 400,
+        letterSpacing: "0",
+    },
+    message: {
+        fontSize: TypographyMediumFontSizeMessage,
+        lineHeight: "23px",
+        fontWeight: 400,
+        letterSpacing: "0",
+    },
+    overline1: {
+        fontSize: TypographyMediumFontSizeOverline1,
+        lineHeight: "0.75rem",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    overline2: {
+        fontSize: TypographyMediumFontSizeOverline2,
+        lineHeight: "0.75rem",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    overline3: {
+        fontSize: TypographyMediumFontSizeOverline3,
+        lineHeight: "0.75rem",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    label1: {
+        fontSize: TypographyMediumFontSizeLabel1,
+        lineHeight: "1rem",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    label2: {
+        fontSize: TypographyMediumFontSizeLabel2,
+        lineHeight: "1rem",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    label3: {
+        fontSize: TypographyMediumFontSizeLabel3,
+        lineHeight: "1rem",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    link1: {
+        fontSize: TypographyMediumFontSizeLink1,
+        lineHeight: "1.5rem",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    link2: {
+        fontSize: TypographyMediumFontSizeLink2,
+        lineHeight: "1.25rem",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    link3: {
+        fontSize: TypographyMediumFontSizeLink3,
+        lineHeight: "1rem",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    digits1: {
+        fontSize: TypographyMediumFontSizeDigits1,
+        lineHeight: "3.5rem",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    digits2: {
+        fontSize: TypographyMediumFontSizeDigits2,
+        lineHeight: "3rem",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    digits3: {
+        fontSize: TypographyMediumFontSizeDigits3,
+        lineHeight: "2.5rem",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
 };
-const narrowTypography = {
-  display1: {
-    fontSize: TypographyNarrowFontSizeDisplay1,
-    lineHeight: "3.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  display2: {
-    fontSize: TypographyNarrowFontSizeDisplay2,
-    lineHeight: "3rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  display3: {
-    fontSize: TypographyNarrowFontSizeDisplay3,
-    lineHeight: "2.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  heading1: {
-    fontSize: TypographyNarrowFontSizeHeading1,
-    lineHeight: "2rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  heading2: {
-    fontSize: TypographyNarrowFontSizeHeading2,
-    lineHeight: "1.75rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  heading3: {
-    fontSize: TypographyNarrowFontSizeHeading3,
-    lineHeight: "1.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  subHeading1: {
-    fontSize: TypographyNarrowFontSizeSubHeading1,
-    lineHeight: "1.25rem",
-    fontWeight: 600,
-    letterSpacing: "0"
-  },
-  subHeading2: {
-    fontSize: TypographyNarrowFontSizeSubHeading2,
-    lineHeight: "1.25rem",
-    fontWeight: 600,
-    letterSpacing: "0"
-  },
-  subHeading3: {
-    fontSize: TypographyNarrowFontSizeSubHeading3,
-    lineHeight: "1rem",
-    fontWeight: 600,
-    letterSpacing: "0"
-  },
-  body1: {
-    fontSize: TypographyNarrowFontSizeBody1,
-    lineHeight: "1.5rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body2: {
-    fontSize: TypographyNarrowFontSizeBody2,
-    lineHeight: "1.25rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body3: {
-    fontSize: TypographyNarrowFontSizeBody3,
-    lineHeight: "1rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body4: {
-    fontSize: TypographyNarrowFontSizeBody4,
-    lineHeight: "0.875rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body5: {
-    fontSize: TypographyNarrowFontSizeBody5,
-    lineHeight: "0.75rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  message: {
-    fontSize: TypographyNarrowFontSizeMessage,
-    lineHeight: "23px",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  overline1: {
-    fontSize: TypographyNarrowFontSizeOverline1,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  overline2: {
-    fontSize: TypographyNarrowFontSizeOverline2,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  overline3: {
-    fontSize: TypographyNarrowFontSizeOverline3,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  label1: {
-    fontSize: TypographyNarrowFontSizeLabel1,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  label2: {
-    fontSize: TypographyNarrowFontSizeLabel2,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  label3: {
-    fontSize: TypographyNarrowFontSizeLabel3,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  link1: {
-    fontSize: TypographyNarrowFontSizeLink1,
-    lineHeight: "1.5rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  link2: {
-    fontSize: TypographyNarrowFontSizeLink2,
-    lineHeight: "1.25rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  link3: {
-    fontSize: TypographyNarrowFontSizeLink3,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  digits1: {
-    fontSize: TypographyNarrowFontSizeDigits1,
-    lineHeight: "3.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  digits2: {
-    fontSize: TypographyNarrowFontSizeDigits2,
-    lineHeight: "3rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  digits3: {
-    fontSize: TypographyNarrowFontSizeDigits3,
-    lineHeight: "2.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  }
+var narrowTypography = {
+    display1: {
+        fontSize: TypographyNarrowFontSizeDisplay1,
+        lineHeight: "3.5rem",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    display2: {
+        fontSize: TypographyNarrowFontSizeDisplay2,
+        lineHeight: "3rem",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    display3: {
+        fontSize: TypographyNarrowFontSizeDisplay3,
+        lineHeight: "2.5rem",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    heading1: {
+        fontSize: TypographyNarrowFontSizeHeading1,
+        lineHeight: "2rem",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    heading2: {
+        fontSize: TypographyNarrowFontSizeHeading2,
+        lineHeight: "1.75rem",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    heading3: {
+        fontSize: TypographyNarrowFontSizeHeading3,
+        lineHeight: "1.5rem",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    subHeading1: {
+        fontSize: TypographyNarrowFontSizeSubHeading1,
+        lineHeight: "1.25rem",
+        fontWeight: 600,
+        letterSpacing: "0",
+    },
+    subHeading2: {
+        fontSize: TypographyNarrowFontSizeSubHeading2,
+        lineHeight: "1.25rem",
+        fontWeight: 600,
+        letterSpacing: "0",
+    },
+    subHeading3: {
+        fontSize: TypographyNarrowFontSizeSubHeading3,
+        lineHeight: "1rem",
+        fontWeight: 600,
+        letterSpacing: "0",
+    },
+    body1: {
+        fontSize: TypographyNarrowFontSizeBody1,
+        lineHeight: "1.5rem",
+        fontWeight: 400,
+        letterSpacing: "0",
+    },
+    body2: {
+        fontSize: TypographyNarrowFontSizeBody2,
+        lineHeight: "1.25rem",
+        fontWeight: 400,
+        letterSpacing: "0",
+    },
+    body3: {
+        fontSize: TypographyNarrowFontSizeBody3,
+        lineHeight: "1rem",
+        fontWeight: 400,
+        letterSpacing: "0",
+    },
+    body4: {
+        fontSize: TypographyNarrowFontSizeBody4,
+        lineHeight: "0.875rem",
+        fontWeight: 400,
+        letterSpacing: "0",
+    },
+    body5: {
+        fontSize: TypographyNarrowFontSizeBody5,
+        lineHeight: "0.75rem",
+        fontWeight: 400,
+        letterSpacing: "0",
+    },
+    message: {
+        fontSize: TypographyNarrowFontSizeMessage,
+        lineHeight: "23px",
+        fontWeight: 400,
+        letterSpacing: "0",
+    },
+    overline1: {
+        fontSize: TypographyNarrowFontSizeOverline1,
+        lineHeight: "0.75rem",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    overline2: {
+        fontSize: TypographyNarrowFontSizeOverline2,
+        lineHeight: "0.75rem",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    overline3: {
+        fontSize: TypographyNarrowFontSizeOverline3,
+        lineHeight: "0.75rem",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    label1: {
+        fontSize: TypographyNarrowFontSizeLabel1,
+        lineHeight: "1rem",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    label2: {
+        fontSize: TypographyNarrowFontSizeLabel2,
+        lineHeight: "1rem",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    label3: {
+        fontSize: TypographyNarrowFontSizeLabel3,
+        lineHeight: "1rem",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    link1: {
+        fontSize: TypographyNarrowFontSizeLink1,
+        lineHeight: "1.5rem",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    link2: {
+        fontSize: TypographyNarrowFontSizeLink2,
+        lineHeight: "1.25rem",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    link3: {
+        fontSize: TypographyNarrowFontSizeLink3,
+        lineHeight: "1rem",
+        fontWeight: 500,
+        letterSpacing: "0",
+    },
+    digits1: {
+        fontSize: TypographyNarrowFontSizeDigits1,
+        lineHeight: "3.5rem",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    digits2: {
+        fontSize: TypographyNarrowFontSizeDigits2,
+        lineHeight: "3rem",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
+    digits3: {
+        fontSize: TypographyNarrowFontSizeDigits3,
+        lineHeight: "2.5rem",
+        fontWeight: 700,
+        letterSpacing: "0",
+    },
 };
-const typography = {
-  fontFamily: TypographyPrimaryFontFamily,
-  wide: wideTypography,
-  medium: mediumTypography,
-  narrow: narrowTypography
+var typography = {
+    fontFamily: TypographyPrimaryFontFamily,
+    wide: wideTypography,
+    medium: mediumTypography,
+    narrow: narrowTypography,
 };
-const colors = {
-  red: {
-    100: ColorRed100,
-    200: ColorRed200,
-    300: ColorRed300,
-    400: ColorRed400,
-    500: ColorRed500,
-    600: ColorRed600,
-    700: ColorRed700,
-    800: ColorRed800,
-    900: ColorRed900
-  },
-  orange: {
-    100: ColorOrange100,
-    200: ColorOrange200,
-    300: ColorOrange300,
-    400: ColorOrange400,
-    500: ColorOrange500,
-    600: ColorOrange600,
-    700: ColorOrange700,
-    800: ColorOrange800,
-    900: ColorOrange900
-  },
-  yellow: {
-    100: ColorYellow100,
-    200: ColorYellow200,
-    300: ColorYellow300,
-    400: ColorYellow400,
-    500: ColorYellow500,
-    600: ColorYellow600,
-    700: ColorYellow700,
-    800: ColorYellow800,
-    900: ColorYellow900
-  },
-  green: {
-    100: ColorGreen100,
-    200: ColorGreen200,
-    300: ColorGreen300,
-    400: ColorGreen400,
-    500: ColorGreen500,
-    600: ColorGreen600,
-    700: ColorGreen700,
-    800: ColorGreen800,
-    900: ColorGreen900
-  },
-  sky: {
-    100: ColorSky100,
-    200: ColorSky200,
-    300: ColorSky300,
-    400: ColorSky400,
-    500: ColorSky500,
-    600: ColorSky600,
-    700: ColorSky700,
-    800: ColorSky800,
-    900: ColorSky900
-  },
-  blue: {
-    100: ColorBlue100,
-    200: ColorBlue200,
-    300: ColorBlue300,
-    400: ColorBlue400,
-    500: ColorBlue500,
-    600: ColorBlue600,
-    700: ColorBlue700,
-    800: ColorBlue800,
-    900: ColorBlue900
-  },
-  purple: {
-    100: ColorPurple100,
-    200: ColorPurple200,
-    300: ColorPurple300,
-    400: ColorPurple400,
-    500: ColorPurple500,
-    600: ColorPurple600,
-    700: ColorPurple700,
-    800: ColorPurple800,
-    900: ColorPurple900
-  },
-  gray: {
-    100: ColorGray100,
-    200: ColorGray200,
-    300: ColorGray300,
-    400: ColorGray400,
-    500: ColorGray500,
-    600: ColorGray600,
-    700: ColorGray700,
-    800: ColorGray800,
-    900: ColorGray900,
-    black: ColorGrayBlack,
-    white: ColorGrayWhite
-  }
+// colors
+var colors = {
+    red: {
+        100: ColorRed100,
+        200: ColorRed200,
+        300: ColorRed300,
+        400: ColorRed400,
+        500: ColorRed500,
+        600: ColorRed600,
+        700: ColorRed700,
+        800: ColorRed800,
+        900: ColorRed900,
+    },
+    orange: {
+        100: ColorOrange100,
+        200: ColorOrange200,
+        300: ColorOrange300,
+        400: ColorOrange400,
+        500: ColorOrange500,
+        600: ColorOrange600,
+        700: ColorOrange700,
+        800: ColorOrange800,
+        900: ColorOrange900,
+    },
+    yellow: {
+        100: ColorYellow100,
+        200: ColorYellow200,
+        300: ColorYellow300,
+        400: ColorYellow400,
+        500: ColorYellow500,
+        600: ColorYellow600,
+        700: ColorYellow700,
+        800: ColorYellow800,
+        900: ColorYellow900,
+    },
+    green: {
+        100: ColorGreen100,
+        200: ColorGreen200,
+        300: ColorGreen300,
+        400: ColorGreen400,
+        500: ColorGreen500,
+        600: ColorGreen600,
+        700: ColorGreen700,
+        800: ColorGreen800,
+        900: ColorGreen900,
+    },
+    sky: {
+        100: ColorSky100,
+        200: ColorSky200,
+        300: ColorSky300,
+        400: ColorSky400,
+        500: ColorSky500,
+        600: ColorSky600,
+        700: ColorSky700,
+        800: ColorSky800,
+        900: ColorSky900,
+    },
+    blue: {
+        100: ColorBlue100,
+        200: ColorBlue200,
+        300: ColorBlue300,
+        400: ColorBlue400,
+        500: ColorBlue500,
+        600: ColorBlue600,
+        700: ColorBlue700,
+        800: ColorBlue800,
+        900: ColorBlue900,
+    },
+    purple: {
+        100: ColorPurple100,
+        200: ColorPurple200,
+        300: ColorPurple300,
+        400: ColorPurple400,
+        500: ColorPurple500,
+        600: ColorPurple600,
+        700: ColorPurple700,
+        800: ColorPurple800,
+        900: ColorPurple900,
+    },
+    gray: {
+        100: ColorGray100,
+        200: ColorGray200,
+        300: ColorGray300,
+        400: ColorGray400,
+        500: ColorGray500,
+        600: ColorGray600,
+        700: ColorGray700,
+        800: ColorGray800,
+        900: ColorGray900,
+        black: ColorGrayBlack,
+        white: ColorGrayWhite,
+    },
 };
-const button = {
-  padding: {
-    verPadding: sizing.Size25,
-    // 25px
-    horPadding: sizing.Size6
-    // 10px
-  },
-  gap: sizing.Size2,
-  // 8px
-  radius: borderRadius.BorderRadiusMd
-  // 6px
+var button = {
+    padding: {
+        verPadding: sizing.Size25, // 25px
+        horPadding: sizing.Size6, // 10px
+    },
+    gap: sizing.Size2, // 8px
+    radius: borderRadius.BorderRadiusMd, // 6px
 };
-const utilityButton = {
-  padding: {
-    verPadding: 10,
-    horPadding: 12
-  },
-  gap: sizing.Size2,
-  // 8px
-  radius: borderRadius.BorderRadiusSm
-  // 6px
+var utilityButton = {
+    padding: {
+        verPadding: 10,
+        horPadding: 12,
+    },
+    gap: sizing.Size2, // 8px
+    radius: borderRadius.BorderRadiusSm, // 6px
 };
-const iconButton = {
-  padding: {
-    verPadding: 10,
-    horPadding: 12
-  },
-  gap: sizing.Size2,
-  // 8px
-  radius: borderRadius.BorderRadiusSm
-  // 6px
+var iconButton = {
+    padding: {
+        verPadding: 10,
+        horPadding: 12,
+    },
+    gap: sizing.Size2, // 8px
+    radius: borderRadius.BorderRadiusSm, // 6px
 };
-const input = {
-  suffixPrefixVerPadding: 11,
-  // special case - see sizing in FIGMA
-  suffixPrefixHorPadding: sizing.Size2
+var input = {
+    suffixPrefixVerPadding: 11, // special case - see sizing in FIGMA
+    suffixPrefixHorPadding: sizing.Size2,
 };
-const disabled = {
-  color: "#6C6C6C",
-  backgroundColor: "#EEEEEE",
-  borderColor: "#CBCBCB"
+var white = "#FFFFFF";
+var disabled = {
+    color: "#6C6C6C",
+    backgroundColor: "#EEEEEE",
+    borderColor: "#CBCBCB",
 };
-const error = {
-  color: "#CF3237",
-  backgroundColor: "#FFEBEE",
-  borderColor: "#FFEBEE"
+var error = {
+    color: "#CF3237",
+    backgroundColor: "#FFEBEE",
+    borderColor: "#FFEBEE",
 };
-const lightInteractive = {
-  interactive: {
+var lightInteractive = {
+    interactive: {
+        primary: {
+            active: "#30606B",
+            hover: "#00282B",
+            pressed: "#214148",
+            onsurface: "#FFFFFF",
+        },
+        secondary: {
+            active: "#9A9A9A",
+            hover: "#222222",
+            pressed: "#101010",
+            onsurface: "#3E3E3E",
+        },
+        tertiary: {
+            active: "#FFCA7D",
+            hover: "#E7A13C",
+            pressed: "#B27330",
+            onsurface: "#222222",
+        },
+        destructive: {
+            active: "#CF3237",
+            hover: "#AA292D",
+            pressed: "#842023",
+            onsurface: "#FFFFFF",
+        },
+        link: {
+            active: "#30606B",
+        },
+        utility: {
+            active: "#FFF",
+            onsurface: "#222222",
+            border: "#CBCBCB",
+            hover: "#DEEFF3",
+            pressed: "#CBCBCB",
+        },
+    },
+    inputs: {
+        onsurface: {
+            active: "#384DF6",
+            focus: "#384DF6",
+        },
+    },
+    onsurface: {
+        "copy-disabled": "#6C6C6C",
+        copy: "#3E3E3E",
+        "copy-dark": "#222222",
+    },
+    surface: {
+        border: "#CBCBCB",
+    },
+    transparent: "transparent",
+};
+var darkInteractive = {
+    interactive: {
+        primary: {
+            active: "#30606B",
+            hover: "#00282B",
+            pressed: "#214148",
+            onsurface: "#FFFFFF",
+        },
+        secondary: {
+            active: "#9A9A9A",
+            hover: "#222222",
+            pressed: "#101010",
+            onsurface: "#3E3E3E",
+        },
+        tertiary: {
+            active: "#FFCA7D",
+            hover: "#E7A13C",
+            pressed: "#B27330",
+            onsurface: "#222222",
+        },
+        destructive: {
+            active: "#CF3237",
+            hover: "#AA292D",
+            pressed: "#842023",
+            onsurface: "#FFFFFF",
+        },
+        link: {
+            active: "#30606B",
+        },
+        utility: {
+            active: "#FFF",
+            onsurface: "#222222",
+            border: "#CBCBCB",
+            hover: "#DEEFF3",
+            pressed: "#CBCBCB",
+        },
+    },
+    inputs: {
+        onsurface: {
+            active: "#384DF6",
+            focus: "#384DF6",
+        },
+    },
+    onsurface: {
+        "copy-disabled": "#6C6C6C",
+        copy: "#3E3E3E",
+        "copy-dark": "#222222",
+    },
+    surface: {
+        border: "#CBCBCB",
+    },
+    transparent: "transparent",
+};
+var lightModeColors = {
     primary: {
-      active: "#30606B",
-      hover: "#00282B",
-      pressed: "#214148",
-      onsurface: "#FFFFFF"
+        active: {
+            color: lightInteractive.interactive.primary.onsurface,
+            backgroundColor: lightInteractive.interactive.primary.active,
+            borderColor: lightInteractive.interactive.primary.active,
+        },
+        hover: {
+            color: lightInteractive.interactive.primary.onsurface,
+            backgroundColor: lightInteractive.interactive.primary.hover,
+            borderColor: lightInteractive.interactive.primary.hover,
+        },
+        pressed: {
+            color: lightInteractive.interactive.primary.onsurface,
+            backgroundColor: lightInteractive.interactive.primary.pressed,
+            borderColor: lightInteractive.interactive.primary.pressed,
+        },
+        focussed: {
+            color: lightInteractive.interactive.primary.onsurface,
+            backgroundColor: lightInteractive.interactive.primary.active,
+            borderColor: lightInteractive.interactive.primary.active,
+            ringColor: lightInteractive.inputs.onsurface.focus,
+        },
+        error: __assign(__assign({}, error), { ringColor: lightInteractive.inputs.onsurface.focus }),
+        default: {
+            color: lightInteractive.interactive.primary.onsurface,
+            backgroundColor: lightInteractive.interactive.primary.active,
+            borderColor: lightInteractive.interactive.primary.active,
+            ringColor: lightInteractive.inputs.onsurface.focus,
+        },
+        disabled: disabled,
     },
     secondary: {
-      active: "#9A9A9A",
-      hover: "#222222",
-      pressed: "#101010",
-      onsurface: "#3E3E3E"
+        active: {
+            color: lightInteractive.interactive.secondary.onsurface,
+            backgroundColor: lightInteractive.transparent,
+            borderColor: lightInteractive.interactive.secondary.active,
+        },
+        hover: {
+            color: lightInteractive.interactive.primary.onsurface,
+            backgroundColor: lightInteractive.interactive.secondary.hover,
+            borderColor: lightInteractive.interactive.secondary.hover,
+        },
+        pressed: {
+            color: lightInteractive.interactive.primary.onsurface,
+            backgroundColor: lightInteractive.interactive.secondary.pressed,
+            borderColor: lightInteractive.interactive.secondary.active,
+        },
+        focussed: {
+            color: lightInteractive.interactive.secondary.onsurface,
+            backgroundColor: lightInteractive.transparent,
+            borderColor: lightInteractive.interactive.secondary.active,
+            ringColor: lightInteractive.inputs.onsurface.focus,
+        },
+        error: __assign(__assign({}, error), { ringColor: lightInteractive.inputs.onsurface.focus }),
+        default: {
+            color: lightInteractive.interactive.secondary.onsurface,
+            backgroundColor: lightInteractive.transparent,
+            borderColor: lightInteractive.interactive.secondary.active,
+            ringColor: lightInteractive.inputs.onsurface.focus,
+        },
+        disabled: disabled,
     },
     tertiary: {
-      active: "#FFCA7D",
-      hover: "#E7A13C",
-      pressed: "#B27330",
-      onsurface: "#222222"
+        active: {
+            color: lightInteractive.interactive.tertiary.onsurface,
+            backgroundColor: lightInteractive.interactive.tertiary.active,
+            borderColor: lightInteractive.interactive.tertiary.active,
+        },
+        hover: {
+            color: lightInteractive.interactive.tertiary.onsurface,
+            backgroundColor: lightInteractive.interactive.tertiary.hover,
+            borderColor: lightInteractive.interactive.tertiary.hover,
+        },
+        pressed: {
+            color: lightInteractive.interactive.tertiary.onsurface,
+            backgroundColor: lightInteractive.interactive.tertiary.pressed,
+            borderColor: lightInteractive.interactive.tertiary.pressed,
+        },
+        focussed: {
+            color: lightInteractive.interactive.tertiary.onsurface,
+            backgroundColor: lightInteractive.interactive.tertiary.active,
+            borderColor: lightInteractive.interactive.tertiary.active,
+            ringColor: lightInteractive.inputs.onsurface.focus,
+        },
+        error: __assign(__assign({}, error), { ringColor: lightInteractive.inputs.onsurface.focus }),
+        default: {
+            color: lightInteractive.interactive.tertiary.onsurface,
+            backgroundColor: lightInteractive.interactive.tertiary.active,
+            borderColor: lightInteractive.interactive.tertiary.active,
+            ringColor: lightInteractive.inputs.onsurface.focus,
+        },
+        disabled: disabled,
     },
     destructive: {
-      active: "#CF3237",
-      hover: "#AA292D",
-      pressed: "#842023",
-      onsurface: "#FFFFFF"
-    },
-    link: {
-      active: "#30606B"
+        active: {
+            color: lightInteractive.interactive.destructive.onsurface,
+            backgroundColor: lightInteractive.interactive.destructive.active,
+            borderColor: lightInteractive.interactive.destructive.active,
+        },
+        hover: {
+            color: lightInteractive.interactive.destructive.onsurface,
+            backgroundColor: lightInteractive.interactive.destructive.hover,
+            borderColor: lightInteractive.interactive.destructive.hover,
+        },
+        pressed: {
+            color: lightInteractive.interactive.destructive.onsurface,
+            backgroundColor: lightInteractive.interactive.destructive.pressed,
+            borderColor: lightInteractive.interactive.destructive.pressed,
+        },
+        focussed: {
+            color: lightInteractive.interactive.destructive.onsurface,
+            backgroundColor: lightInteractive.interactive.destructive.active,
+            borderColor: lightInteractive.interactive.destructive.active,
+            ringColor: lightInteractive.inputs.onsurface.focus,
+        },
+        error: __assign(__assign({}, error), { ringColor: lightInteractive.inputs.onsurface.focus }),
+        default: {
+            color: lightInteractive.interactive.destructive.onsurface,
+            backgroundColor: lightInteractive.interactive.destructive.active,
+            borderColor: lightInteractive.interactive.destructive.active,
+            ringColor: lightInteractive.inputs.onsurface.focus,
+        },
+        disabled: disabled,
     },
     utility: {
-      active: "#FFF",
-      onsurface: "#222222",
-      border: "#CBCBCB",
-      hover: "#DEEFF3",
-      pressed: "#CBCBCB"
-    }
-  },
-  inputs: {
+        active: {
+            color: lightInteractive.interactive.secondary.onsurface,
+            backgroundColor: "#FFF",
+            borderColor: lightInteractive.interactive.secondary.active,
+        },
+        hover: {
+            color: lightInteractive.interactive.utility.onsurface,
+            backgroundColor: lightInteractive.interactive.utility.hover,
+            borderColor: lightInteractive.interactive.utility.border,
+        },
+        pressed: {
+            color: lightInteractive.interactive.secondary.onsurface,
+            backgroundColor: lightInteractive.interactive.utility.pressed,
+            borderColor: lightInteractive.interactive.utility.pressed,
+        },
+        focussed: {
+            color: lightInteractive.interactive.secondary.onsurface,
+            backgroundColor: "#FFF",
+            borderColor: lightInteractive.interactive.secondary.active,
+            ringColor: lightInteractive.inputs.onsurface.focus,
+        },
+        error: __assign(__assign({}, error), { ringColor: lightInteractive.inputs.onsurface.focus }),
+        default: {
+            color: lightInteractive.interactive.secondary.onsurface,
+            backgroundColor: lightInteractive.transparent,
+            borderColor: lightInteractive.interactive.secondary.active,
+            ringColor: lightInteractive.inputs.onsurface.focus,
+        },
+        disabled: disabled,
+    },
+    icon: {
+        active: {
+            color: lightInteractive.interactive.tertiary.onsurface,
+            backgroundColor: "transparent",
+            borderColor: "transparent",
+        },
+        hover: {
+            color: lightInteractive.interactive.tertiary.onsurface,
+            backgroundColor: "#DEEFF3",
+            borderColor: "transparent",
+        },
+        pressed: {
+            color: lightInteractive.interactive.tertiary.onsurface,
+            backgroundColor: "#DEEFF3",
+            borderColor: "transparent",
+        },
+        selected: {
+            color: lightInteractive.interactive.tertiary.onsurface,
+            backgroundColor: "#DEEFF3",
+            borderColor: "transparent",
+        },
+        focussed: {
+            color: lightInteractive.interactive.tertiary.onsurface,
+            backgroundColor: "transparent",
+            borderColor: "transparent",
+            ringColor: lightInteractive.inputs.onsurface.focus,
+        },
+        error: __assign(__assign({}, error), { ringColor: lightInteractive.inputs.onsurface.focus }),
+        default: {
+            color: lightInteractive.interactive.tertiary.onsurface,
+            backgroundColor: lightInteractive.interactive.tertiary.active,
+            borderColor: lightInteractive.interactive.tertiary.active,
+            ringColor: lightInteractive.inputs.onsurface.focus,
+        },
+        disabled: disabled,
+    },
+    status: {
+        error: {
+            default: "#CF3237",
+            ringColor: lightInteractive.inputs.onsurface.focus,
+            onsurface: "#AA292D",
+            surface: "#F9D4D5",
+            "surface-hover": "#F3A9AB",
+        },
+        success: {
+            default: "#32863E",
+            ringColor: lightInteractive.inputs.onsurface.focus,
+            onsurface: "#296E33",
+            surface: "#D3EFD7",
+            "surface-hover": "#A7DFAF",
+        },
+        warning: {
+            default: ColorYellow500,
+            ringColor: lightInteractive.inputs.onsurface.focus,
+            onsurface: "#704819",
+            surface: "#FFF2DF",
+            "surface-hover": "#FFE5BE",
+        },
+        info: {
+            default: "#384DF6",
+            ringColor: lightInteractive.inputs.onsurface.focus,
+            onsurface: "#2E3FCA",
+            surface: "#D7DBFD",
+        },
+        generic: {
+            default: "#9A9A9A",
+            ringColor: lightInteractive.inputs.onsurface.focus,
+            onsurface: "#3E3E3E",
+            surface: "#F4F4F4",
+            "surface-hover": "#F4F4F4",
+        },
+        hollow: {
+            default: "#9A9A9A",
+            ringColor: lightInteractive.inputs.onsurface.focus,
+            onsurface: "#3E3E3E",
+            surface: "#F4F4F4",
+            "surface-hover": "#FFFFFF",
+        },
+        disabled: {
+            default: "#6C6C6C",
+            ringColor: lightInteractive.inputs.onsurface.focus,
+            onsurface: "#EEEEEE",
+            surface: "#EEEEEE",
+        },
+    },
+    timebox: {
+        evening: {
+            default: "#9F539F",
+        },
+    },
+    interactive: __assign({ primary: {
+            active: "#30606B",
+            hover: "#00282B",
+            pressed: "#214148",
+            onsurface: "#FFFFFF",
+        }, secondary: {
+            active: "#9A9A9A",
+            hover: "#222222",
+            pressed: "#101010",
+            onsurface: "#3E3E3E",
+        }, tertiary: {
+            active: "#FFCA7D",
+            hover: "#E7A13C",
+            pressed: "#B27330",
+            onsurface: "#222222",
+        }, link: {
+            active: ColorSky700,
+            hover: ColorSky900,
+            disabled: ColorGray100,
+            current: "#384DF6",
+        } }, lightInteractive.interactive),
+    inputs: {
+        surface: {
+            active: ColorGrayWhite,
+            border: ColorGray500,
+            disabled: ColorGray100,
+            checked: "#384DF6",
+            "checked-hover": "#24319D",
+        },
+        onsurface: {
+            active: "#222222",
+            focus: "#384DF6",
+            placeholder: "#6C6C6C",
+            "icon-disabled": "#6C6C6C",
+        },
+        progress: {
+            empty: ColorGray300,
+            success: ColorGreen400,
+            error: ColorRed500,
+            info: ColorBlue400,
+        },
+    },
+    surface: {
+        border: "#CBCBCB",
+        secondary: "#F4F4F4",
+        tertiary: "#EEEEEE",
+        "border-light": "#DFDFDF",
+    },
+    transparent: "transparent",
     onsurface: {
-      focus: "#384DF6"
-    }
-  },
-  transparent: "transparent"
-};
-const darkInteractive = {
-  interactive: {
-    tertiary: {
-      active: "#FFCA7D",
-      hover: "#E7A13C",
-      pressed: "#B27330",
-      onsurface: "#222222"
-    }
-  }
+        copy: "#3E3E3E",
+        "copy-light": ColorGray700,
+        "copy-dark": "#222222",
+        "copy-disabled": "#6C6C6C",
+    },
 };
-const lightModeColors = {
-  primary: {
-    active: {
-      color: lightInteractive.interactive.primary.onsurface,
-      backgroundColor: lightInteractive.interactive.primary.active,
-      borderColor: lightInteractive.interactive.primary.active
-    },
-    hover: {
-      color: lightInteractive.interactive.primary.onsurface,
-      backgroundColor: lightInteractive.interactive.primary.hover,
-      borderColor: lightInteractive.interactive.primary.hover
-    },
-    pressed: {
-      color: lightInteractive.interactive.primary.onsurface,
-      backgroundColor: lightInteractive.interactive.primary.pressed,
-      borderColor: lightInteractive.interactive.primary.pressed
-    },
-    focussed: {
-      color: lightInteractive.interactive.primary.onsurface,
-      backgroundColor: lightInteractive.interactive.primary.active,
-      borderColor: lightInteractive.interactive.primary.active,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    error: {
-      ...error,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    default: {
-      color: lightInteractive.interactive.primary.onsurface,
-      backgroundColor: lightInteractive.interactive.primary.active,
-      borderColor: lightInteractive.interactive.primary.active,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    disabled
-  },
-  secondary: {
-    active: {
-      color: lightInteractive.interactive.secondary.onsurface,
-      backgroundColor: lightInteractive.transparent,
-      borderColor: lightInteractive.interactive.secondary.active
-    },
-    hover: {
-      color: lightInteractive.interactive.primary.onsurface,
-      backgroundColor: lightInteractive.interactive.secondary.hover,
-      borderColor: lightInteractive.interactive.secondary.hover
-    },
-    pressed: {
-      color: lightInteractive.interactive.primary.onsurface,
-      backgroundColor: lightInteractive.interactive.secondary.pressed,
-      borderColor: lightInteractive.interactive.secondary.active
-    },
-    focussed: {
-      color: lightInteractive.interactive.secondary.onsurface,
-      backgroundColor: lightInteractive.transparent,
-      borderColor: lightInteractive.interactive.secondary.active,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    error: {
-      ...error,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    default: {
-      color: lightInteractive.interactive.secondary.onsurface,
-      backgroundColor: lightInteractive.transparent,
-      borderColor: lightInteractive.interactive.secondary.active,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    disabled
-  },
-  tertiary: {
-    active: {
-      color: lightInteractive.interactive.tertiary.onsurface,
-      backgroundColor: lightInteractive.interactive.tertiary.active,
-      borderColor: lightInteractive.interactive.tertiary.active
-    },
-    hover: {
-      color: lightInteractive.interactive.tertiary.onsurface,
-      backgroundColor: lightInteractive.interactive.tertiary.hover,
-      borderColor: lightInteractive.interactive.tertiary.hover
-    },
-    pressed: {
-      color: lightInteractive.interactive.tertiary.onsurface,
-      backgroundColor: lightInteractive.interactive.tertiary.pressed,
-      borderColor: lightInteractive.interactive.tertiary.pressed
-    },
-    focussed: {
-      color: lightInteractive.interactive.tertiary.onsurface,
-      backgroundColor: lightInteractive.interactive.tertiary.active,
-      borderColor: lightInteractive.interactive.tertiary.active,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    error: {
-      ...error,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    default: {
-      color: lightInteractive.interactive.tertiary.onsurface,
-      backgroundColor: lightInteractive.interactive.tertiary.active,
-      borderColor: lightInteractive.interactive.tertiary.active,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    disabled
-  },
-  destructive: {
-    active: {
-      color: lightInteractive.interactive.destructive.onsurface,
-      backgroundColor: lightInteractive.interactive.destructive.active,
-      borderColor: lightInteractive.interactive.destructive.active
-    },
-    hover: {
-      color: lightInteractive.interactive.destructive.onsurface,
-      backgroundColor: lightInteractive.interactive.destructive.hover,
-      borderColor: lightInteractive.interactive.destructive.hover
-    },
-    pressed: {
-      color: lightInteractive.interactive.destructive.onsurface,
-      backgroundColor: lightInteractive.interactive.destructive.pressed,
-      borderColor: lightInteractive.interactive.destructive.pressed
-    },
-    focussed: {
-      color: lightInteractive.interactive.destructive.onsurface,
-      backgroundColor: lightInteractive.interactive.destructive.active,
-      borderColor: lightInteractive.interactive.destructive.active,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    error: {
-      ...error,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    default: {
-      color: lightInteractive.interactive.destructive.onsurface,
-      backgroundColor: lightInteractive.interactive.destructive.active,
-      borderColor: lightInteractive.interactive.destructive.active,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    disabled
-  },
-  utility: {
-    active: {
-      color: lightInteractive.interactive.secondary.onsurface,
-      backgroundColor: "#FFF",
-      borderColor: lightInteractive.interactive.secondary.active
-    },
-    hover: {
-      color: lightInteractive.interactive.utility.onsurface,
-      backgroundColor: lightInteractive.interactive.utility.hover,
-      borderColor: lightInteractive.interactive.utility.border
-    },
-    pressed: {
-      color: lightInteractive.interactive.secondary.onsurface,
-      backgroundColor: lightInteractive.interactive.utility.pressed,
-      borderColor: lightInteractive.interactive.utility.pressed
-    },
-    focussed: {
-      color: lightInteractive.interactive.secondary.onsurface,
-      backgroundColor: "#FFF",
-      borderColor: lightInteractive.interactive.secondary.active,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    error: {
-      ...error,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    default: {
-      color: lightInteractive.interactive.secondary.onsurface,
-      backgroundColor: lightInteractive.transparent,
-      borderColor: lightInteractive.interactive.secondary.active,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    disabled
-  },
-  icon: {
-    active: {
-      color: lightInteractive.interactive.tertiary.onsurface,
-      backgroundColor: "transparent",
-      borderColor: "transparent"
-    },
-    hover: {
-      color: lightInteractive.interactive.tertiary.onsurface,
-      backgroundColor: "#DEEFF3",
-      borderColor: "transparent"
-    },
-    pressed: {
-      color: lightInteractive.interactive.tertiary.onsurface,
-      backgroundColor: "#DEEFF3",
-      borderColor: "transparent"
-    },
-    selected: {
-      color: lightInteractive.interactive.tertiary.onsurface,
-      backgroundColor: "#DEEFF3",
-      borderColor: "transparent"
-    },
-    focussed: {
-      color: lightInteractive.interactive.tertiary.onsurface,
-      backgroundColor: "transparent",
-      borderColor: "transparent",
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    error: {
-      ...error,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    default: {
-      color: lightInteractive.interactive.tertiary.onsurface,
-      backgroundColor: lightInteractive.interactive.tertiary.active,
-      borderColor: lightInteractive.interactive.tertiary.active,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    disabled
-  },
-  status: {
-    error: {
-      default: "#CF3237",
-      ringColor: lightInteractive.inputs.onsurface.focus,
-      onsurface: "#AA292D",
-      surface: "#F9D4D5",
-      "surface-hover": "#F3A9AB"
-    },
-    success: {
-      default: "#32863E",
-      ringColor: lightInteractive.inputs.onsurface.focus,
-      onsurface: "#296E33",
-      surface: "#D3EFD7",
-      "surface-hover": "#A7DFAF"
-    },
-    warning: {
-      default: ColorYellow500,
-      ringColor: lightInteractive.inputs.onsurface.focus,
-      onsurface: "#704819",
-      surface: "#FFF2DF",
-      "surface-hover": "#FFE5BE"
-    },
-    info: {
-      default: "#384DF6",
-      ringColor: lightInteractive.inputs.onsurface.focus,
-      onsurface: "#2E3FCA",
-      surface: "#D7DBFD"
-    },
-    generic: {
-      default: "#9A9A9A",
-      ringColor: lightInteractive.inputs.onsurface.focus,
-      onsurface: "#3E3E3E",
-      surface: "#F4F4F4",
-      "surface-hover": "#F4F4F4"
-    },
-    hollow: {
-      default: "#9A9A9A",
-      ringColor: lightInteractive.inputs.onsurface.focus,
-      onsurface: "#3E3E3E",
-      surface: "#F4F4F4",
-      "surface-hover": "#FFFFFF"
-    },
-    disabled: {
-      default: "#6C6C6C",
-      ringColor: lightInteractive.inputs.onsurface.focus,
-      onsurface: "#EEEEEE",
-      surface: "#EEEEEE"
-    }
-  },
-  timebox: {
-    evening: {
-      default: "#9F539F"
-    }
-  },
-  interactive: {
+// TODO: Add dark mode colors so the both light and dark mode colors are in sync and maintainable
+// There is no immediate need for dark mode colors, but we should add them in the future
+// since they are part of the design system and we have the dark colors in Figma
+// but no components nor layouts are actually expressed in dark mode colors
+var darkModeColors = lightModeColors;
+var darkModeColorsTODO = {
     primary: {
-      active: "#30606B",
-      hover: "#00282B",
-      pressed: "#214148",
-      onsurface: "#FFFFFF"
+        active: {
+            color: colors.gray.white,
+            backgroundColor: "#1A3D44",
+            borderColor: "#1A3D44",
+        },
+        hover: {
+            color: colors.gray.white,
+            backgroundColor: "#0D1F22",
+            borderColor: "#0D1F22",
+        },
+        pressed: {
+            color: colors.gray.white,
+            backgroundColor: "#0D1F22",
+            borderColor: "#0D1F22",
+        },
+        focussed: {
+            color: colors.gray.white,
+            backgroundColor: "#0D1F22",
+            borderColor: "#0D1F22",
+            ringColor: "#384DF6",
+        },
+        disabled: {
+            color: colors.gray[600],
+            backgroundColor: "#2C2C2C",
+            borderColor: "#2C2C2C",
+        },
     },
     secondary: {
-      active: "#9A9A9A",
-      hover: "#222222",
-      pressed: "#101010",
-      onsurface: "#3E3E3E"
+        active: {
+            color: colors.gray.white,
+            backgroundColor: "#4D4D4D",
+            borderColor: "#4D4D4D",
+        },
+        hover: {
+            color: colors.gray.white,
+            backgroundColor: "#666666",
+            borderColor: "#666666",
+        },
+        pressed: {
+            color: colors.gray.white,
+            backgroundColor: ColorSky800,
+            borderColor: ColorSky800,
+        },
+        focussed: {
+            color: colors.gray.white,
+            backgroundColor: ColorSky800,
+            borderColor: ColorSky800,
+            ringColor: "#384DF6",
+        },
+        disabled: {
+            color: colors.gray[600],
+            backgroundColor: ColorGray800,
+            borderColor: ColorGray800,
+        },
     },
     tertiary: {
-      active: "#FFCA7D",
-      hover: "#E7A13C",
-      pressed: "#B27330",
-      onsurface: "#222222"
-    },
-    link: {
-      active: ColorSky700,
-      hover: ColorSky900,
-      disabled: ColorGray100,
-      current: "#384DF6"
-    },
-    ...lightInteractive.interactive
-  },
-  inputs: {
-    surface: {
-      active: ColorGrayWhite,
-      border: ColorGray500,
-      disabled: ColorGray100,
-      checked: "#384DF6",
-      "checked-hover": "#24319D"
+        active: {
+            color: colors.gray.white,
+            backgroundColor: "#8B6B3C",
+            borderColor: "#8B6B3C",
+        },
+        hover: {
+            color: colors.gray.white,
+            backgroundColor: "#735929",
+            borderColor: "#735929",
+        },
+        pressed: {
+            color: colors.gray.white,
+            backgroundColor: ColorYellow800,
+            borderColor: ColorYellow800,
+        },
+        focussed: {
+            color: colors.gray.white,
+            backgroundColor: ColorYellow800,
+            borderColor: ColorYellow800,
+            ringColor: "#384DF6",
+        },
+        disabled: {
+            color: colors.gray[600],
+            backgroundColor: ColorYellow900,
+            borderColor: ColorYellow900,
+        },
     },
-    onsurface: {
-      active: "#222222",
-      focus: "#384DF6",
-      placeholder: "#6C6C6C",
-      "icon-disabled": "#6C6C6C"
-    },
-    progress: {
-      empty: ColorGray300,
-      success: ColorGreen400,
-      error: ColorRed500,
-      info: ColorBlue400
-    }
-  },
-  surface: {
-    border: "#CBCBCB",
-    secondary: "#F4F4F4",
-    tertiary: "#EEEEEE",
-    "border-light": "#DFDFDF"
-  },
-  transparent: "transparent",
-  onsurface: {
-    copy: "#3E3E3E",
-    "copy-light": ColorGray700,
-    "copy-dark": "#222222",
-    "copy-disabled": "#6C6C6C"
-  }
-};
-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": "0px 4px 16px 0px #00000026",
-    "2": "0px 8px 24px -4px #00000026",
-    "3": "0px 2px 3px -1px #00000026",
-    "4": "4px 0px 7px -3px #0000001F"
-  },
-  actions: {
-    "1": "0px 2px 2px -1px #00000033",
-    "2": "0px 1px 2px 0px #00000026"
-  },
-  inputs: {
-    "1": "0px 1px 2px 0px #0000001F"
-  }
-};
-const motion = {
-  instant: 0,
-  veryfast: 0.15,
-  fast: 0.33,
-  medium: 0.5,
-  slow: 1,
-  veryslow: 2
+    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,
+            ringColor: darkInteractive.inputs.onsurface.focus,
+        },
+        error: __assign(__assign({}, error), { ringColor: darkInteractive.inputs.onsurface.focus }),
+        default: {
+            color: darkInteractive.interactive.tertiary.onsurface,
+            backgroundColor: darkInteractive.interactive.tertiary.active,
+            borderColor: darkInteractive.interactive.tertiary.active,
+            ringColor: darkInteractive.inputs.onsurface.focus,
+        },
+        disabled: disabled,
+    },
+    icon: {
+        active: {
+            color: darkInteractive.interactive.tertiary.onsurface,
+            backgroundColor: "transparent",
+            borderColor: "transparent",
+        },
+        hover: {
+            color: darkInteractive.interactive.tertiary.onsurface,
+            backgroundColor: "transparent",
+            borderColor: "transparent",
+        },
+        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,
+            ringColor: darkInteractive.inputs.onsurface.focus,
+        },
+        error: __assign(__assign({}, error), { ringColor: darkInteractive.inputs.onsurface.focus }),
+        default: {
+            color: darkInteractive.interactive.tertiary.onsurface,
+            backgroundColor: darkInteractive.interactive.tertiary.active,
+            borderColor: darkInteractive.interactive.tertiary.active,
+            ringColor: darkInteractive.inputs.onsurface.focus,
+        },
+        disabled: disabled,
+    },
+    interactive: __assign({ primary: {
+            active: "#30606B",
+            hover: "#00282B",
+            pressed: "#214148",
+            onsurface: "#FFFFFF",
+        }, secondary: {
+            active: "#9A9A9A",
+            hover: "#222222",
+            pressed: "#101010",
+            onsurface: "#3E3E3E",
+        }, tertiary: {
+            active: "#FFCA7D",
+            hover: "#E7A13C",
+            pressed: "#B27330",
+            onsurface: "#222222",
+        }, link: {
+            active: ColorSky300,
+            hover: ColorSky400,
+            disabled: ColorGray100,
+            current: "#384DF6",
+        } }, darkInteractive.interactive),
 };
-const badge = {
-  "ver-padding": 4,
-  "right-padding": 8,
-  "left-padding": 8,
-  radius: 50
+var colorModes = {
+    light: lightModeColors,
+    dark: darkModeColors,
 };
-const popover = {
-  "ver-padding": sizing.Size1,
-  "hor-padding": sizing.Size2,
-  radius: borderRadius.BorderRadiusMd,
-  gap: sizing.Size1
+var shadows = {
+    general: {
+        "1": "0px 4px 16px 0px #00000026",
+        "2": "0px 8px 24px -4px #00000026",
+        "3": "0px 2px 3px -1px #00000026",
+        "4": "4px 0px 7px -3px #0000001F",
+    },
+    actions: {
+        "1": "0px 2px 2px -1px #00000033",
+        "2": "0px 1px 2px 0px #00000026",
+    },
+    inputs: {
+        "1": "0px 1px 2px 0px #0000001F",
+    },
 };
-const row = {
-  "ver-padding": sizing.Size5,
-  "hor-padding": sizing.Size6,
-  gap: sizing.Size2
+var motion = {
+    instant: 0,
+    veryfast: 0.15,
+    fast: 0.33,
+    medium: 0.5,
+    slow: 1,
+    veryslow: 2,
 };
-const tableCell = {
-  surface: ColorGrayWhite,
-  hover: ColorGray100,
-  pressed: ColorGray200,
-  focussed: ColorGray300,
-  disabled: ColorGray400,
-  selected: ColorSky800,
-  border: "#E0E0E0",
-  ring: "#E0E0E0"
+var badge = {
+    "ver-padding": 4,
+    "right-padding": 8,
+    "left-padding": 8,
+    radius: 50,
 };
-const components = {
-  button,
-  utilityButton,
-  iconButton,
-  input,
-  row,
-  badge,
-  popover,
-  tableCell
+var popover = {
+    "ver-padding": sizing.Size1,
+    "hor-padding": sizing.Size2,
+    radius: borderRadius.BorderRadiusMd,
+    gap: sizing.Size1,
 };
-const getStatusColor = (colors2, status) => {
-  return colors2.status[status].default;
+var row = {
+    "ver-padding": sizing.Size5,
+    "hor-padding": sizing.Size6,
+    gap: sizing.Size2,
 };
-const baseTokens = {
-  breakpoints,
-  sizing,
-  borderRadius,
-  typography,
-  allColors: colors,
-  components,
-  motion,
-  shadows,
-  getStatusColor
+var tableCell = {
+    surface: ColorGrayWhite,
+    hover: ColorGray100,
+    pressed: ColorGray200,
+    focussed: ColorGray300,
+    disabled: ColorGray400,
+    selected: ColorSky800,
+    border: "#E0E0E0",
+    ring: "#E0E0E0",
 };
-const lightTheme = {
-  ...baseTokens,
-  colors: lightModeColors,
-  mode: "light"
+var components = {
+    button: button,
+    utilityButton: utilityButton,
+    iconButton: iconButton,
+    input: input,
+    row: row,
+    badge: badge,
+    popover: popover,
+    tableCell: tableCell,
 };
-const darkTheme = {
-  ...baseTokens,
-  colors: darkModeColors,
-  mode: "dark"
+// we can define convenience functions here to reduce the complexity of the theme object
+var getStatusColor = function (colors, status) {
+    return colors.status[status].default;
 };
-export {
-  TypographySizeKey,
-  baseTokens,
-  breakpoints,
-  darkTheme,
-  lightTheme,
-  sizing
+export var baseTokens = {
+    breakpoints: breakpoints,
+    sizing: sizing,
+    borderRadius: borderRadius,
+    typography: typography,
+    allColors: colors,
+    components: components,
+    motion: motion,
+    shadows: shadows,
+    getStatusColor: getStatusColor,
 };
+export var lightTheme = __assign(__assign({}, baseTokens), { colors: lightModeColors, mode: "light" });
+export var darkTheme = __assign(__assign({}, baseTokens), { colors: darkModeColors, mode: "dark" });