@gobolt/genesis 0.2.21 → 0.3.1

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

@@ -1,1324 +0,0 @@
-"use strict";
-var variables = require("../design-tokens/variables.cjs");
-const breakpoints = {
-  wide: 1280,
-  medium: 1024,
-  narrow: 480
-};
-const borderRadius = {
-  BorderRadiusNone: variables.BorderRadiusNone,
-  BorderRadiusXs: variables.BorderRadiusXs,
-  BorderRadiusSm: variables.BorderRadiusSm,
-  BorderRadiusMd: variables.BorderRadiusMd,
-  BorderRadiusLg: variables.BorderRadiusLg,
-  BorderRadiusXl: variables.BorderRadiusXl,
-  BorderRadiusXxl: variables.BorderRadiusXxl,
-  BorderRadiusXxxl: variables.BorderRadiusXxxl,
-  BorderRadiusRounded: variables.BorderRadiusRounded
-};
-const sizing = {
-  Size1: variables.Size1,
-  // 4px
-  Size1_5: variables.Size1_5,
-  // 6px
-  Size2: variables.Size2,
-  // 8px
-  Size2_5: variables.Size2_5,
-  // 10px
-  Size3: variables.Size3,
-  // 12px
-  Size4: variables.Size4,
-  // 16px
-  Size5: variables.Size5,
-  // 20px
-  Size6: variables.Size6,
-  // 24px
-  Size7: variables.Size7,
-  // 28px
-  Size8: variables.Size8,
-  // 32px
-  Size10: variables.Size10,
-  // 40px
-  Size12: variables.Size12,
-  // 48px
-  Size13: variables.Size13,
-  // 52px
-  Size14: variables.Size14,
-  // 56px
-  Size16: variables.Size16,
-  // 64px
-  Size18: variables.Size18,
-  // 72px
-  Size20: variables.Size20,
-  // 80px
-  Size24: variables.Size24,
-  // 96px
-  Size27: variables.Size27,
-  // 108px
-  Size28: variables.Size28,
-  // 112px
-  Size30: variables.Size30,
-  // 120px
-  Size32: variables.Size32,
-  // 128px
-  Size34: variables.Size34,
-  // 136px
-  Size35: variables.Size35,
-  // 140px
-  Size39: variables.Size39,
-  // 156px
-  Size43: variables.Size43,
-  // 172px
-  Size50: variables.Size50,
-  // 200px
-  Size64: variables.Size64,
-  // 256px
-  Size05: variables.Size05,
-  // 2px
-  Size15: variables.Size15,
-  // 6px
-  Size025: variables.Size025,
-  // 1px
-  Size25: variables.Size25,
-  // 10px
-  xs: variables.Size1,
-  // 4px
-  sm: variables.Size2,
-  // 8px
-  md: variables.Size3,
-  // 12px
-  lg: variables.Size4,
-  // 16px
-  typography1: 12,
-  typography2: 14,
-  typography3: 16
-};
-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"
-};
-const wideTypography = {
-  display1: {
-    fontSize: variables.TypographyWideFontSizeDisplay1,
-    lineHeight: "3.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  display2: {
-    fontSize: variables.TypographyWideFontSizeDisplay2,
-    lineHeight: "3rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  display3: {
-    fontSize: variables.TypographyWideFontSizeDisplay3,
-    lineHeight: "2.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  heading1: {
-    fontSize: variables.TypographyWideFontSizeHeading1,
-    lineHeight: "2rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  heading2: {
-    fontSize: variables.TypographyWideFontSizeHeading2,
-    lineHeight: "1.75rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  heading3: {
-    fontSize: variables.TypographyWideFontSizeHeading3,
-    lineHeight: "1.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  subHeading1: {
-    fontSize: variables.TypographyWideFontSizeSubHeading1,
-    lineHeight: "1.25rem",
-    fontWeight: 600,
-    letterSpacing: "0"
-  },
-  subHeading2: {
-    fontSize: variables.TypographyWideFontSizeSubHeading2,
-    lineHeight: "1.25rem",
-    fontWeight: 600,
-    letterSpacing: "0"
-  },
-  subHeading3: {
-    fontSize: variables.TypographyWideFontSizeSubHeading3,
-    lineHeight: "1rem",
-    fontWeight: 600,
-    letterSpacing: "0"
-  },
-  body1: {
-    fontSize: variables.TypographyWideFontSizeBody1,
-    lineHeight: "1.5rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body2: {
-    fontSize: variables.TypographyWideFontSizeBody2,
-    lineHeight: "1.25rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body3: {
-    fontSize: variables.TypographyWideFontSizeBody3,
-    lineHeight: "1rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body4: {
-    fontSize: variables.TypographyWideFontSizeBody4,
-    lineHeight: "0.875rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body5: {
-    fontSize: variables.TypographyWideFontSizeBody5,
-    lineHeight: "0.75rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  message: {
-    fontSize: variables.TypographyWideFontSizeMessage,
-    lineHeight: "23px",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  overline1: {
-    fontSize: variables.TypographyWideFontSizeOverline1,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  overline2: {
-    fontSize: variables.TypographyWideFontSizeOverline2,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  overline3: {
-    fontSize: variables.TypographyWideFontSizeOverline3,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  label1: {
-    fontSize: variables.TypographyWideFontSizeLabel1,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  label2: {
-    fontSize: variables.TypographyWideFontSizeLabel2,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  label3: {
-    fontSize: variables.TypographyWideFontSizeLabel3,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  link1: {
-    fontSize: variables.TypographyWideFontSizeLink1,
-    lineHeight: "1.5rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  link2: {
-    fontSize: variables.TypographyWideFontSizeLink2,
-    lineHeight: "1.25rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  link3: {
-    fontSize: variables.TypographyWideFontSizeLink3,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  digits1: {
-    fontSize: variables.TypographyWideFontSizeDigits1,
-    lineHeight: "3.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  digits2: {
-    fontSize: variables.TypographyWideFontSizeDigits2,
-    lineHeight: "3rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  digits3: {
-    fontSize: variables.TypographyWideFontSizeDigits3,
-    lineHeight: "2.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  }
-};
-const mediumTypography = {
-  display1: {
-    fontSize: variables.TypographyMediumFontSizeDisplay1,
-    lineHeight: "3.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  display2: {
-    fontSize: variables.TypographyMediumFontSizeDisplay2,
-    lineHeight: "3rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  display3: {
-    fontSize: variables.TypographyMediumFontSizeDisplay3,
-    lineHeight: "2.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  heading1: {
-    fontSize: variables.TypographyMediumFontSizeHeading1,
-    lineHeight: "2rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  heading2: {
-    fontSize: variables.TypographyMediumFontSizeHeading2,
-    lineHeight: "1.75rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  heading3: {
-    fontSize: variables.TypographyMediumFontSizeHeading3,
-    lineHeight: "1.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  subHeading1: {
-    fontSize: variables.TypographyMediumFontSizeSubHeading1,
-    lineHeight: "1.25rem",
-    fontWeight: 600,
-    letterSpacing: "0"
-  },
-  subHeading2: {
-    fontSize: variables.TypographyMediumFontSizeSubHeading2,
-    lineHeight: "1.25rem",
-    fontWeight: 600,
-    letterSpacing: "0"
-  },
-  subHeading3: {
-    fontSize: variables.TypographyMediumFontSizeSubHeading3,
-    lineHeight: "1rem",
-    fontWeight: 600,
-    letterSpacing: "0"
-  },
-  body1: {
-    fontSize: variables.TypographyMediumFontSizeBody1,
-    lineHeight: "1.5rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body2: {
-    fontSize: variables.TypographyMediumFontSizeBody2,
-    lineHeight: "1.25rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body3: {
-    fontSize: variables.TypographyMediumFontSizeBody3,
-    lineHeight: "1rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body4: {
-    fontSize: variables.TypographyMediumFontSizeBody4,
-    lineHeight: "0.875rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body5: {
-    fontSize: variables.TypographyMediumFontSizeBody5,
-    lineHeight: "0.75rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  message: {
-    fontSize: variables.TypographyMediumFontSizeMessage,
-    lineHeight: "23px",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  overline1: {
-    fontSize: variables.TypographyMediumFontSizeOverline1,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  overline2: {
-    fontSize: variables.TypographyMediumFontSizeOverline2,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  overline3: {
-    fontSize: variables.TypographyMediumFontSizeOverline3,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  label1: {
-    fontSize: variables.TypographyMediumFontSizeLabel1,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  label2: {
-    fontSize: variables.TypographyMediumFontSizeLabel2,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  label3: {
-    fontSize: variables.TypographyMediumFontSizeLabel3,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  link1: {
-    fontSize: variables.TypographyMediumFontSizeLink1,
-    lineHeight: "1.5rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  link2: {
-    fontSize: variables.TypographyMediumFontSizeLink2,
-    lineHeight: "1.25rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  link3: {
-    fontSize: variables.TypographyMediumFontSizeLink3,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  digits1: {
-    fontSize: variables.TypographyMediumFontSizeDigits1,
-    lineHeight: "3.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  digits2: {
-    fontSize: variables.TypographyMediumFontSizeDigits2,
-    lineHeight: "3rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  digits3: {
-    fontSize: variables.TypographyMediumFontSizeDigits3,
-    lineHeight: "2.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  }
-};
-const narrowTypography = {
-  display1: {
-    fontSize: variables.TypographyNarrowFontSizeDisplay1,
-    lineHeight: "3.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  display2: {
-    fontSize: variables.TypographyNarrowFontSizeDisplay2,
-    lineHeight: "3rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  display3: {
-    fontSize: variables.TypographyNarrowFontSizeDisplay3,
-    lineHeight: "2.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  heading1: {
-    fontSize: variables.TypographyNarrowFontSizeHeading1,
-    lineHeight: "2rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  heading2: {
-    fontSize: variables.TypographyNarrowFontSizeHeading2,
-    lineHeight: "1.75rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  heading3: {
-    fontSize: variables.TypographyNarrowFontSizeHeading3,
-    lineHeight: "1.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  subHeading1: {
-    fontSize: variables.TypographyNarrowFontSizeSubHeading1,
-    lineHeight: "1.25rem",
-    fontWeight: 600,
-    letterSpacing: "0"
-  },
-  subHeading2: {
-    fontSize: variables.TypographyNarrowFontSizeSubHeading2,
-    lineHeight: "1.25rem",
-    fontWeight: 600,
-    letterSpacing: "0"
-  },
-  subHeading3: {
-    fontSize: variables.TypographyNarrowFontSizeSubHeading3,
-    lineHeight: "1rem",
-    fontWeight: 600,
-    letterSpacing: "0"
-  },
-  body1: {
-    fontSize: variables.TypographyNarrowFontSizeBody1,
-    lineHeight: "1.5rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body2: {
-    fontSize: variables.TypographyNarrowFontSizeBody2,
-    lineHeight: "1.25rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body3: {
-    fontSize: variables.TypographyNarrowFontSizeBody3,
-    lineHeight: "1rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body4: {
-    fontSize: variables.TypographyNarrowFontSizeBody4,
-    lineHeight: "0.875rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body5: {
-    fontSize: variables.TypographyNarrowFontSizeBody5,
-    lineHeight: "0.75rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  message: {
-    fontSize: variables.TypographyNarrowFontSizeMessage,
-    lineHeight: "23px",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  overline1: {
-    fontSize: variables.TypographyNarrowFontSizeOverline1,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  overline2: {
-    fontSize: variables.TypographyNarrowFontSizeOverline2,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  overline3: {
-    fontSize: variables.TypographyNarrowFontSizeOverline3,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  label1: {
-    fontSize: variables.TypographyNarrowFontSizeLabel1,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  label2: {
-    fontSize: variables.TypographyNarrowFontSizeLabel2,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  label3: {
-    fontSize: variables.TypographyNarrowFontSizeLabel3,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  link1: {
-    fontSize: variables.TypographyNarrowFontSizeLink1,
-    lineHeight: "1.5rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  link2: {
-    fontSize: variables.TypographyNarrowFontSizeLink2,
-    lineHeight: "1.25rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  link3: {
-    fontSize: variables.TypographyNarrowFontSizeLink3,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  digits1: {
-    fontSize: variables.TypographyNarrowFontSizeDigits1,
-    lineHeight: "3.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  digits2: {
-    fontSize: variables.TypographyNarrowFontSizeDigits2,
-    lineHeight: "3rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  digits3: {
-    fontSize: variables.TypographyNarrowFontSizeDigits3,
-    lineHeight: "2.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  }
-};
-const typography = {
-  fontFamily: variables.TypographyPrimaryFontFamily,
-  wide: wideTypography,
-  medium: mediumTypography,
-  narrow: narrowTypography
-};
-const colors = {
-  red: {
-    100: variables.ColorRed100,
-    200: variables.ColorRed200,
-    300: variables.ColorRed300,
-    400: variables.ColorRed400,
-    500: variables.ColorRed500,
-    600: variables.ColorRed600,
-    700: variables.ColorRed700,
-    800: variables.ColorRed800,
-    900: variables.ColorRed900
-  },
-  orange: {
-    100: variables.ColorOrange100,
-    200: variables.ColorOrange200,
-    300: variables.ColorOrange300,
-    400: variables.ColorOrange400,
-    500: variables.ColorOrange500,
-    600: variables.ColorOrange600,
-    700: variables.ColorOrange700,
-    800: variables.ColorOrange800,
-    900: variables.ColorOrange900
-  },
-  yellow: {
-    100: variables.ColorYellow100,
-    200: variables.ColorYellow200,
-    300: variables.ColorYellow300,
-    400: variables.ColorYellow400,
-    500: variables.ColorYellow500,
-    600: variables.ColorYellow600,
-    700: variables.ColorYellow700,
-    800: variables.ColorYellow800,
-    900: variables.ColorYellow900
-  },
-  green: {
-    100: variables.ColorGreen100,
-    200: variables.ColorGreen200,
-    300: variables.ColorGreen300,
-    400: variables.ColorGreen400,
-    500: variables.ColorGreen500,
-    600: variables.ColorGreen600,
-    700: variables.ColorGreen700,
-    800: variables.ColorGreen800,
-    900: variables.ColorGreen900
-  },
-  sky: {
-    100: variables.ColorSky100,
-    200: variables.ColorSky200,
-    300: variables.ColorSky300,
-    400: variables.ColorSky400,
-    500: variables.ColorSky500,
-    600: variables.ColorSky600,
-    700: variables.ColorSky700,
-    800: variables.ColorSky800,
-    900: variables.ColorSky900
-  },
-  blue: {
-    100: variables.ColorBlue100,
-    200: variables.ColorBlue200,
-    300: variables.ColorBlue300,
-    400: variables.ColorBlue400,
-    500: variables.ColorBlue500,
-    600: variables.ColorBlue600,
-    700: variables.ColorBlue700,
-    800: variables.ColorBlue800,
-    900: variables.ColorBlue900
-  },
-  purple: {
-    100: variables.ColorPurple100,
-    200: variables.ColorPurple200,
-    300: variables.ColorPurple300,
-    400: variables.ColorPurple400,
-    500: variables.ColorPurple500,
-    600: variables.ColorPurple600,
-    700: variables.ColorPurple700,
-    800: variables.ColorPurple800,
-    900: variables.ColorPurple900
-  },
-  gray: {
-    100: variables.ColorGray100,
-    200: variables.ColorGray200,
-    300: variables.ColorGray300,
-    400: variables.ColorGray400,
-    500: variables.ColorGray500,
-    600: variables.ColorGray600,
-    700: variables.ColorGray700,
-    800: variables.ColorGray800,
-    900: variables.ColorGray900,
-    black: variables.ColorGrayBlack,
-    white: variables.ColorGrayWhite
-  }
-};
-const 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
-};
-const 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
-};
-const disabled = {
-  color: "#6C6C6C",
-  backgroundColor: "#EEEEEE",
-  borderColor: "#CBCBCB"
-};
-const error = {
-  color: "#CF3237",
-  backgroundColor: "#FFEBEE",
-  borderColor: "#FFEBEE"
-};
-const 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: {
-      focus: "#384DF6"
-    }
-  },
-  transparent: "transparent"
-};
-const darkInteractive = {
-  interactive: {
-    tertiary: {
-      active: "#FFCA7D",
-      hover: "#E7A13C",
-      pressed: "#B27330",
-      onsurface: "#222222"
-    }
-  }
-};
-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: variables.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: {
-    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: variables.ColorSky700,
-      hover: variables.ColorSky900,
-      disabled: variables.ColorGray100,
-      current: "#384DF6"
-    },
-    ...lightInteractive.interactive
-  },
-  inputs: {
-    surface: {
-      active: variables.ColorGrayWhite,
-      border: variables.ColorGray500,
-      disabled: variables.ColorGray100,
-      checked: "#384DF6",
-      "checked-hover": "#24319D"
-    },
-    onsurface: {
-      active: "#222222",
-      focus: "#384DF6",
-      placeholder: "#6C6C6C",
-      "icon-disabled": "#6C6C6C"
-    },
-    progress: {
-      empty: variables.ColorGray300,
-      success: variables.ColorGreen400,
-      error: variables.ColorRed500,
-      info: variables.ColorBlue400
-    }
-  },
-  surface: {
-    border: "#CBCBCB",
-    secondary: "#F4F4F4",
-    tertiary: "#EEEEEE",
-    "border-light": "#DFDFDF"
-  },
-  transparent: "transparent",
-  onsurface: {
-    copy: "#3E3E3E",
-    "copy-light": variables.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": "box-shadow: 0px 4px 16px 0px #00000026",
-    "2": "box-shadow: 0px 8px 24px -4px #00000026",
-    "3": "box-shadow: 0px 2px 3px -1px #00000026",
-    "4": "box-shadow: 4px 0px 7px -3px #0000001F"
-  },
-  actions: {
-    "1": "box-shadow: 0px 2px 2px -1px #00000033",
-    "2": "box-shadow: 0px 1px 2px 0px #00000026"
-  },
-  inputs: {
-    "1": "box-shadow: 0px 1px 2px 0px #0000001F"
-  }
-};
-const motion = {
-  instant: 0,
-  veryfast: 0.15,
-  fast: 0.33,
-  medium: 0.5,
-  slow: 1,
-  veryslow: 2
-};
-const badge = {
-  "ver-padding": 4,
-  "right-padding": 8,
-  "left-padding": 8,
-  radius: 50
-};
-const popover = {
-  "ver-padding": sizing.Size1,
-  "hor-padding": sizing.Size2,
-  radius: borderRadius.BorderRadiusMd,
-  gap: sizing.Size1
-};
-const row = {
-  "ver-padding": sizing.Size5,
-  "hor-padding": sizing.Size6,
-  gap: sizing.Size2
-};
-const components = {
-  button,
-  utilityButton,
-  iconButton,
-  input,
-  row,
-  badge,
-  popover
-};
-const getStatusColor = (colors2, status) => {
-  return colors2.status[status].default;
-};
-const baseTokens = {
-  breakpoints,
-  sizing,
-  borderRadius,
-  typography,
-  allColors: colors,
-  components,
-  motion,
-  shadows,
-  getStatusColor
-};
-const lightTheme = {
-  ...baseTokens,
-  colors: lightModeColors,
-  mode: "light"
-};
-const darkTheme = {
-  ...baseTokens,
-  colors: darkModeColors,
-  mode: "dark"
-};
-exports.TypographySizeKey = TypographySizeKey;
-exports.baseTokens = baseTokens;
-exports.breakpoints = breakpoints;
-exports.darkTheme = darkTheme;
-exports.lightTheme = lightTheme;
-exports.sizing = sizing;