@gobolt/genesis 0.2.14 → 0.2.16

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

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