@gobolt/genesis 0.3.25 → 0.3.27

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

@@ -1,1512 +0,0 @@
-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);
-};
-// 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,
-};
-var borderRadius = {
-    BorderRadiusNone: BorderRadiusNone,
-    BorderRadiusXs: BorderRadiusXs,
-    BorderRadiusSm: BorderRadiusSm,
-    BorderRadiusMd: BorderRadiusMd,
-    BorderRadiusLg: BorderRadiusLg,
-    BorderRadiusXl: BorderRadiusXl,
-    BorderRadiusXxl: BorderRadiusXxl,
-    BorderRadiusXxxl: BorderRadiusXxxl,
-    BorderRadiusRounded: BorderRadiusRounded,
-};
-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,
-};
-// 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",
-};
-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",
-    },
-};
-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",
-    },
-};
-var typography = {
-    fontFamily: TypographyPrimaryFontFamily,
-    wide: wideTypography,
-    medium: mediumTypography,
-    narrow: narrowTypography,
-};
-// 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,
-    },
-};
-var button = {
-    padding: {
-        verPadding: sizing.Size25, // 25px
-        horPadding: sizing.Size6, // 10px
-    },
-    gap: sizing.Size2, // 8px
-    radius: borderRadius.BorderRadiusMd, // 6px
-};
-var utilityButton = {
-    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
-};
-var input = {
-    suffixPrefixVerPadding: 11, // special case - see sizing in FIGMA
-    suffixPrefixHorPadding: sizing.Size2,
-};
-var white = "#FFFFFF";
-var disabled = {
-    color: "#6C6C6C",
-    backgroundColor: "#EEEEEE",
-    borderColor: "#CBCBCB",
-};
-var error = {
-    color: "#CF3237",
-    backgroundColor: "#FFEBEE",
-    borderColor: "#FFEBEE",
-};
-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: {
-            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: {
-            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: {
-            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: {
-            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: {
-            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: {
-        copy: "#3E3E3E",
-        "copy-light": ColorGray700,
-        "copy-dark": "#222222",
-        "copy-disabled": "#6C6C6C",
-    },
-};
-// 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: {
-            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: {
-            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: {
-            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,
-        },
-    },
-    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),
-};
-var colorModes = {
-    light: lightModeColors,
-    dark: darkModeColors,
-};
-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",
-    },
-};
-var motion = {
-    instant: 0,
-    veryfast: 0.15,
-    fast: 0.33,
-    medium: 0.5,
-    slow: 1,
-    veryslow: 2,
-};
-var badge = {
-    "ver-padding": 4,
-    "right-padding": 8,
-    "left-padding": 8,
-    radius: 50,
-};
-var popover = {
-    "ver-padding": sizing.Size1,
-    "hor-padding": sizing.Size2,
-    radius: borderRadius.BorderRadiusMd,
-    gap: sizing.Size1,
-};
-var row = {
-    "ver-padding": sizing.Size5,
-    "hor-padding": sizing.Size6,
-    gap: sizing.Size2,
-};
-var tableCell = {
-    surface: ColorGrayWhite,
-    hover: ColorGray100,
-    pressed: ColorGray200,
-    focussed: ColorGray300,
-    disabled: ColorGray400,
-    selected: ColorSky800,
-    border: "#E0E0E0",
-    ring: "#E0E0E0",
-};
-var components = {
-    button: button,
-    utilityButton: utilityButton,
-    iconButton: iconButton,
-    input: input,
-    row: row,
-    badge: badge,
-    popover: popover,
-    tableCell: tableCell,
-};
-// 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 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" });