@gobolt/genesis 0.2.13 → 0.2.15

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

@@ -1 +1,1324 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../design-tokens/variables.cjs"),g={wide:1280,medium:1024,narrow:480},l={BorderRadiusNone:e.BorderRadiusNone,BorderRadiusXs:e.BorderRadiusXs,BorderRadiusSm:e.BorderRadiusSm,BorderRadiusMd:e.BorderRadiusMd,BorderRadiusLg:e.BorderRadiusLg,BorderRadiusXl:e.BorderRadiusXl,BorderRadiusXxl:e.BorderRadiusXxl,BorderRadiusXxxl:e.BorderRadiusXxxl,BorderRadiusRounded:e.BorderRadiusRounded},t={Size1:e.Size1,Size1_5:e.Size1_5,Size2:e.Size2,Size2_5:e.Size2_5,Size3:e.Size3,Size4:e.Size4,Size5:e.Size5,Size6:e.Size6,Size7:e.Size7,Size8:e.Size8,Size10:e.Size10,Size12:e.Size12,Size13:e.Size13,Size14:e.Size14,Size16:e.Size16,Size18:e.Size18,Size20:e.Size20,Size24:e.Size24,Size27:e.Size27,Size28:e.Size28,Size30:e.Size30,Size32:e.Size32,Size34:e.Size34,Size35:e.Size35,Size39:e.Size39,Size43:e.Size43,Size50:e.Size50,Size64:e.Size64,Size05:e.Size05,Size15:e.Size15,Size025:e.Size025,Size25:e.Size25,xs:e.Size1,sm:e.Size2,md:e.Size3,lg:e.Size4,typography1:12,typography2:14,typography3:16},y={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"},u={display1:{fontSize:e.TypographyWideFontSizeDisplay1,lineHeight:"3.5rem",fontWeight:700,letterSpacing:"0"},display2:{fontSize:e.TypographyWideFontSizeDisplay2,lineHeight:"3rem",fontWeight:700,letterSpacing:"0"},display3:{fontSize:e.TypographyWideFontSizeDisplay3,lineHeight:"2.5rem",fontWeight:700,letterSpacing:"0"},heading1:{fontSize:e.TypographyWideFontSizeHeading1,lineHeight:"2rem",fontWeight:700,letterSpacing:"0"},heading2:{fontSize:e.TypographyWideFontSizeHeading2,lineHeight:"1.75rem",fontWeight:700,letterSpacing:"0"},heading3:{fontSize:e.TypographyWideFontSizeHeading3,lineHeight:"1.5rem",fontWeight:700,letterSpacing:"0"},subHeading1:{fontSize:e.TypographyWideFontSizeSubHeading1,lineHeight:"1.25rem",fontWeight:600,letterSpacing:"0"},subHeading2:{fontSize:e.TypographyWideFontSizeSubHeading2,lineHeight:"1.25rem",fontWeight:600,letterSpacing:"0"},subHeading3:{fontSize:e.TypographyWideFontSizeSubHeading3,lineHeight:"1rem",fontWeight:600,letterSpacing:"0"},body1:{fontSize:e.TypographyWideFontSizeBody1,lineHeight:"1.5rem",fontWeight:400,letterSpacing:"0"},body2:{fontSize:e.TypographyWideFontSizeBody2,lineHeight:"1.25rem",fontWeight:400,letterSpacing:"0"},body3:{fontSize:e.TypographyWideFontSizeBody3,lineHeight:"1rem",fontWeight:400,letterSpacing:"0"},body4:{fontSize:e.TypographyWideFontSizeBody4,lineHeight:"0.875rem",fontWeight:400,letterSpacing:"0"},body5:{fontSize:e.TypographyWideFontSizeBody5,lineHeight:"0.75rem",fontWeight:400,letterSpacing:"0"},message:{fontSize:e.TypographyWideFontSizeMessage,lineHeight:"23px",fontWeight:400,letterSpacing:"0"},overline1:{fontSize:e.TypographyWideFontSizeOverline1,lineHeight:"0.75rem",fontWeight:500,letterSpacing:"0"},overline2:{fontSize:e.TypographyWideFontSizeOverline2,lineHeight:"0.75rem",fontWeight:500,letterSpacing:"0"},overline3:{fontSize:e.TypographyWideFontSizeOverline3,lineHeight:"0.75rem",fontWeight:500,letterSpacing:"0"},label1:{fontSize:e.TypographyWideFontSizeLabel1,lineHeight:"1rem",fontWeight:500,letterSpacing:"0"},label2:{fontSize:e.TypographyWideFontSizeLabel2,lineHeight:"1rem",fontWeight:500,letterSpacing:"0"},label3:{fontSize:e.TypographyWideFontSizeLabel3,lineHeight:"1rem",fontWeight:500,letterSpacing:"0"},link1:{fontSize:e.TypographyWideFontSizeLink1,lineHeight:"1.5rem",fontWeight:500,letterSpacing:"0"},link2:{fontSize:e.TypographyWideFontSizeLink2,lineHeight:"1.25rem",fontWeight:500,letterSpacing:"0"},link3:{fontSize:e.TypographyWideFontSizeLink3,lineHeight:"1rem",fontWeight:500,letterSpacing:"0"},digits1:{fontSize:e.TypographyWideFontSizeDigits1,lineHeight:"3.5rem",fontWeight:700,letterSpacing:"0"},digits2:{fontSize:e.TypographyWideFontSizeDigits2,lineHeight:"3rem",fontWeight:700,letterSpacing:"0"},digits3:{fontSize:e.TypographyWideFontSizeDigits3,lineHeight:"2.5rem",fontWeight:700,letterSpacing:"0"}},S={display1:{fontSize:e.TypographyMediumFontSizeDisplay1,lineHeight:"3.5rem",fontWeight:700,letterSpacing:"0"},display2:{fontSize:e.TypographyMediumFontSizeDisplay2,lineHeight:"3rem",fontWeight:700,letterSpacing:"0"},display3:{fontSize:e.TypographyMediumFontSizeDisplay3,lineHeight:"2.5rem",fontWeight:700,letterSpacing:"0"},heading1:{fontSize:e.TypographyMediumFontSizeHeading1,lineHeight:"2rem",fontWeight:700,letterSpacing:"0"},heading2:{fontSize:e.TypographyMediumFontSizeHeading2,lineHeight:"1.75rem",fontWeight:700,letterSpacing:"0"},heading3:{fontSize:e.TypographyMediumFontSizeHeading3,lineHeight:"1.5rem",fontWeight:700,letterSpacing:"0"},subHeading1:{fontSize:e.TypographyMediumFontSizeSubHeading1,lineHeight:"1.25rem",fontWeight:600,letterSpacing:"0"},subHeading2:{fontSize:e.TypographyMediumFontSizeSubHeading2,lineHeight:"1.25rem",fontWeight:600,letterSpacing:"0"},subHeading3:{fontSize:e.TypographyMediumFontSizeSubHeading3,lineHeight:"1rem",fontWeight:600,letterSpacing:"0"},body1:{fontSize:e.TypographyMediumFontSizeBody1,lineHeight:"1.5rem",fontWeight:400,letterSpacing:"0"},body2:{fontSize:e.TypographyMediumFontSizeBody2,lineHeight:"1.25rem",fontWeight:400,letterSpacing:"0"},body3:{fontSize:e.TypographyMediumFontSizeBody3,lineHeight:"1rem",fontWeight:400,letterSpacing:"0"},body4:{fontSize:e.TypographyMediumFontSizeBody4,lineHeight:"0.875rem",fontWeight:400,letterSpacing:"0"},body5:{fontSize:e.TypographyMediumFontSizeBody5,lineHeight:"0.75rem",fontWeight:400,letterSpacing:"0"},message:{fontSize:e.TypographyMediumFontSizeMessage,lineHeight:"23px",fontWeight:400,letterSpacing:"0"},overline1:{fontSize:e.TypographyMediumFontSizeOverline1,lineHeight:"0.75rem",fontWeight:500,letterSpacing:"0"},overline2:{fontSize:e.TypographyMediumFontSizeOverline2,lineHeight:"0.75rem",fontWeight:500,letterSpacing:"0"},overline3:{fontSize:e.TypographyMediumFontSizeOverline3,lineHeight:"0.75rem",fontWeight:500,letterSpacing:"0"},label1:{fontSize:e.TypographyMediumFontSizeLabel1,lineHeight:"1rem",fontWeight:500,letterSpacing:"0"},label2:{fontSize:e.TypographyMediumFontSizeLabel2,lineHeight:"1rem",fontWeight:500,letterSpacing:"0"},label3:{fontSize:e.TypographyMediumFontSizeLabel3,lineHeight:"1rem",fontWeight:500,letterSpacing:"0"},link1:{fontSize:e.TypographyMediumFontSizeLink1,lineHeight:"1.5rem",fontWeight:500,letterSpacing:"0"},link2:{fontSize:e.TypographyMediumFontSizeLink2,lineHeight:"1.25rem",fontWeight:500,letterSpacing:"0"},link3:{fontSize:e.TypographyMediumFontSizeLink3,lineHeight:"1rem",fontWeight:500,letterSpacing:"0"},digits1:{fontSize:e.TypographyMediumFontSizeDigits1,lineHeight:"3.5rem",fontWeight:700,letterSpacing:"0"},digits2:{fontSize:e.TypographyMediumFontSizeDigits2,lineHeight:"3rem",fontWeight:700,letterSpacing:"0"},digits3:{fontSize:e.TypographyMediumFontSizeDigits3,lineHeight:"2.5rem",fontWeight:700,letterSpacing:"0"}},h={display1:{fontSize:e.TypographyNarrowFontSizeDisplay1,lineHeight:"3.5rem",fontWeight:700,letterSpacing:"0"},display2:{fontSize:e.TypographyNarrowFontSizeDisplay2,lineHeight:"3rem",fontWeight:700,letterSpacing:"0"},display3:{fontSize:e.TypographyNarrowFontSizeDisplay3,lineHeight:"2.5rem",fontWeight:700,letterSpacing:"0"},heading1:{fontSize:e.TypographyNarrowFontSizeHeading1,lineHeight:"2rem",fontWeight:700,letterSpacing:"0"},heading2:{fontSize:e.TypographyNarrowFontSizeHeading2,lineHeight:"1.75rem",fontWeight:700,letterSpacing:"0"},heading3:{fontSize:e.TypographyNarrowFontSizeHeading3,lineHeight:"1.5rem",fontWeight:700,letterSpacing:"0"},subHeading1:{fontSize:e.TypographyNarrowFontSizeSubHeading1,lineHeight:"1.25rem",fontWeight:600,letterSpacing:"0"},subHeading2:{fontSize:e.TypographyNarrowFontSizeSubHeading2,lineHeight:"1.25rem",fontWeight:600,letterSpacing:"0"},subHeading3:{fontSize:e.TypographyNarrowFontSizeSubHeading3,lineHeight:"1rem",fontWeight:600,letterSpacing:"0"},body1:{fontSize:e.TypographyNarrowFontSizeBody1,lineHeight:"1.5rem",fontWeight:400,letterSpacing:"0"},body2:{fontSize:e.TypographyNarrowFontSizeBody2,lineHeight:"1.25rem",fontWeight:400,letterSpacing:"0"},body3:{fontSize:e.TypographyNarrowFontSizeBody3,lineHeight:"1rem",fontWeight:400,letterSpacing:"0"},body4:{fontSize:e.TypographyNarrowFontSizeBody4,lineHeight:"0.875rem",fontWeight:400,letterSpacing:"0"},body5:{fontSize:e.TypographyNarrowFontSizeBody5,lineHeight:"0.75rem",fontWeight:400,letterSpacing:"0"},message:{fontSize:e.TypographyNarrowFontSizeMessage,lineHeight:"23px",fontWeight:400,letterSpacing:"0"},overline1:{fontSize:e.TypographyNarrowFontSizeOverline1,lineHeight:"0.75rem",fontWeight:500,letterSpacing:"0"},overline2:{fontSize:e.TypographyNarrowFontSizeOverline2,lineHeight:"0.75rem",fontWeight:500,letterSpacing:"0"},overline3:{fontSize:e.TypographyNarrowFontSizeOverline3,lineHeight:"0.75rem",fontWeight:500,letterSpacing:"0"},label1:{fontSize:e.TypographyNarrowFontSizeLabel1,lineHeight:"1rem",fontWeight:500,letterSpacing:"0"},label2:{fontSize:e.TypographyNarrowFontSizeLabel2,lineHeight:"1rem",fontWeight:500,letterSpacing:"0"},label3:{fontSize:e.TypographyNarrowFontSizeLabel3,lineHeight:"1rem",fontWeight:500,letterSpacing:"0"},link1:{fontSize:e.TypographyNarrowFontSizeLink1,lineHeight:"1.5rem",fontWeight:500,letterSpacing:"0"},link2:{fontSize:e.TypographyNarrowFontSizeLink2,lineHeight:"1.25rem",fontWeight:500,letterSpacing:"0"},link3:{fontSize:e.TypographyNarrowFontSizeLink3,lineHeight:"1rem",fontWeight:500,letterSpacing:"0"},digits1:{fontSize:e.TypographyNarrowFontSizeDigits1,lineHeight:"3.5rem",fontWeight:700,letterSpacing:"0"},digits2:{fontSize:e.TypographyNarrowFontSizeDigits2,lineHeight:"3rem",fontWeight:700,letterSpacing:"0"},digits3:{fontSize:e.TypographyNarrowFontSizeDigits3,lineHeight:"2.5rem",fontWeight:700,letterSpacing:"0"}},f={fontFamily:e.TypographyPrimaryFontFamily,wide:u,medium:S,narrow:h},o={red:{100:e.ColorRed100,200:e.ColorRed200,300:e.ColorRed300,400:e.ColorRed400,500:e.ColorRed500,600:e.ColorRed600,700:e.ColorRed700,800:e.ColorRed800,900:e.ColorRed900},orange:{100:e.ColorOrange100,200:e.ColorOrange200,300:e.ColorOrange300,400:e.ColorOrange400,500:e.ColorOrange500,600:e.ColorOrange600,700:e.ColorOrange700,800:e.ColorOrange800,900:e.ColorOrange900},yellow:{100:e.ColorYellow100,200:e.ColorYellow200,300:e.ColorYellow300,400:e.ColorYellow400,500:e.ColorYellow500,600:e.ColorYellow600,700:e.ColorYellow700,800:e.ColorYellow800,900:e.ColorYellow900},green:{100:e.ColorGreen100,200:e.ColorGreen200,300:e.ColorGreen300,400:e.ColorGreen400,500:e.ColorGreen500,600:e.ColorGreen600,700:e.ColorGreen700,800:e.ColorGreen800,900:e.ColorGreen900},sky:{100:e.ColorSky100,200:e.ColorSky200,300:e.ColorSky300,400:e.ColorSky400,500:e.ColorSky500,600:e.ColorSky600,700:e.ColorSky700,800:e.ColorSky800,900:e.ColorSky900},blue:{100:e.ColorBlue100,200:e.ColorBlue200,300:e.ColorBlue300,400:e.ColorBlue400,500:e.ColorBlue500,600:e.ColorBlue600,700:e.ColorBlue700,800:e.ColorBlue800,900:e.ColorBlue900},purple:{100:e.ColorPurple100,200:e.ColorPurple200,300:e.ColorPurple300,400:e.ColorPurple400,500:e.ColorPurple500,600:e.ColorPurple600,700:e.ColorPurple700,800:e.ColorPurple800,900:e.ColorPurple900},gray:{100:e.ColorGray100,200:e.ColorGray200,300:e.ColorGray300,400:e.ColorGray400,500:e.ColorGray500,600:e.ColorGray600,700:e.ColorGray700,800:e.ColorGray800,900:e.ColorGray900,black:e.ColorGrayBlack,white:e.ColorGrayWhite}},v={padding:{verPadding:t.Size25,horPadding:t.Size6},gap:t.Size2,radius:l.BorderRadiusMd},z={padding:{verPadding:10,horPadding:12},gap:t.Size2,radius:l.BorderRadiusSm},C={padding:{verPadding:10,horPadding:12},gap:t.Size2,radius:l.BorderRadiusSm},b={suffixPrefixVerPadding:11,suffixPrefixHorPadding:t.Size2},n={color:"#6C6C6C",backgroundColor:"#EEEEEE",borderColor:"#CBCBCB"},a={color:"#CF3237",backgroundColor:"#FFEBEE",borderColor:"#FFEBEE"},r={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"},i={interactive:{tertiary:{active:"#FFCA7D",hover:"#E7A13C",pressed:"#B27330",onsurface:"#222222"}}},d={primary:{active:{color:r.interactive.primary.onsurface,backgroundColor:r.interactive.primary.active,borderColor:r.interactive.primary.active},hover:{color:r.interactive.primary.onsurface,backgroundColor:r.interactive.primary.hover,borderColor:r.interactive.primary.hover},pressed:{color:r.interactive.primary.onsurface,backgroundColor:r.interactive.primary.pressed,borderColor:r.interactive.primary.pressed},focussed:{color:r.interactive.primary.onsurface,backgroundColor:r.interactive.primary.active,borderColor:r.interactive.primary.active,ringColor:r.inputs.onsurface.focus},error:{...a,ringColor:r.inputs.onsurface.focus},default:{color:r.interactive.primary.onsurface,backgroundColor:r.interactive.primary.active,borderColor:r.interactive.primary.active,ringColor:r.inputs.onsurface.focus},disabled:n},secondary:{active:{color:r.interactive.secondary.onsurface,backgroundColor:r.transparent,borderColor:r.interactive.secondary.active},hover:{color:r.interactive.primary.onsurface,backgroundColor:r.interactive.secondary.hover,borderColor:r.interactive.secondary.hover},pressed:{color:r.interactive.primary.onsurface,backgroundColor:r.interactive.secondary.pressed,borderColor:r.interactive.secondary.active},focussed:{color:r.interactive.secondary.onsurface,backgroundColor:r.transparent,borderColor:r.interactive.secondary.active,ringColor:r.inputs.onsurface.focus},error:{...a,ringColor:r.inputs.onsurface.focus},default:{color:r.interactive.secondary.onsurface,backgroundColor:r.transparent,borderColor:r.interactive.secondary.active,ringColor:r.inputs.onsurface.focus},disabled:n},tertiary:{active:{color:r.interactive.tertiary.onsurface,backgroundColor:r.interactive.tertiary.active,borderColor:r.interactive.tertiary.active},hover:{color:r.interactive.tertiary.onsurface,backgroundColor:r.interactive.tertiary.hover,borderColor:r.interactive.tertiary.hover},pressed:{color:r.interactive.tertiary.onsurface,backgroundColor:r.interactive.tertiary.pressed,borderColor:r.interactive.tertiary.pressed},focussed:{color:r.interactive.tertiary.onsurface,backgroundColor:r.interactive.tertiary.active,borderColor:r.interactive.tertiary.active,ringColor:r.inputs.onsurface.focus},error:{...a,ringColor:r.inputs.onsurface.focus},default:{color:r.interactive.tertiary.onsurface,backgroundColor:r.interactive.tertiary.active,borderColor:r.interactive.tertiary.active,ringColor:r.inputs.onsurface.focus},disabled:n},destructive:{active:{color:r.interactive.destructive.onsurface,backgroundColor:r.interactive.destructive.active,borderColor:r.interactive.destructive.active},hover:{color:r.interactive.destructive.onsurface,backgroundColor:r.interactive.destructive.hover,borderColor:r.interactive.destructive.hover},pressed:{color:r.interactive.destructive.onsurface,backgroundColor:r.interactive.destructive.pressed,borderColor:r.interactive.destructive.pressed},focussed:{color:r.interactive.destructive.onsurface,backgroundColor:r.interactive.destructive.active,borderColor:r.interactive.destructive.active,ringColor:r.inputs.onsurface.focus},error:{...a,ringColor:r.inputs.onsurface.focus},default:{color:r.interactive.destructive.onsurface,backgroundColor:r.interactive.destructive.active,borderColor:r.interactive.destructive.active,ringColor:r.inputs.onsurface.focus},disabled:n},utility:{active:{color:r.interactive.secondary.onsurface,backgroundColor:"#FFF",borderColor:r.interactive.secondary.active},hover:{color:r.interactive.utility.onsurface,backgroundColor:r.interactive.utility.hover,borderColor:r.interactive.utility.border},pressed:{color:r.interactive.secondary.onsurface,backgroundColor:r.interactive.utility.pressed,borderColor:r.interactive.utility.pressed},focussed:{color:r.interactive.secondary.onsurface,backgroundColor:"#FFF",borderColor:r.interactive.secondary.active,ringColor:r.inputs.onsurface.focus},error:{...a,ringColor:r.inputs.onsurface.focus},default:{color:r.interactive.secondary.onsurface,backgroundColor:r.transparent,borderColor:r.interactive.secondary.active,ringColor:r.inputs.onsurface.focus},disabled:n},icon:{active:{color:r.interactive.tertiary.onsurface,backgroundColor:"transparent",borderColor:"transparent"},hover:{color:r.interactive.tertiary.onsurface,backgroundColor:"#DEEFF3",borderColor:"transparent"},pressed:{color:r.interactive.tertiary.onsurface,backgroundColor:"#DEEFF3",borderColor:"transparent"},selected:{color:r.interactive.tertiary.onsurface,backgroundColor:"#DEEFF3",borderColor:"transparent"},focussed:{color:r.interactive.tertiary.onsurface,backgroundColor:"transparent",borderColor:"transparent",ringColor:r.inputs.onsurface.focus},error:{...a,ringColor:r.inputs.onsurface.focus},default:{color:r.interactive.tertiary.onsurface,backgroundColor:r.interactive.tertiary.active,borderColor:r.interactive.tertiary.active,ringColor:r.inputs.onsurface.focus},disabled:n},status:{error:{default:"#CF3237",ringColor:r.inputs.onsurface.focus,onsurface:"#AA292D",surface:"#F9D4D5","surface-hover":"#F3A9AB"},success:{default:"#32863E",ringColor:r.inputs.onsurface.focus,onsurface:"#296E33",surface:"#D3EFD7","surface-hover":"#A7DFAF"},warning:{default:e.ColorYellow500,ringColor:r.inputs.onsurface.focus,onsurface:"#704819",surface:"#FFF2DF","surface-hover":"#FFE5BE"},info:{default:"#384DF6",ringColor:r.inputs.onsurface.focus,onsurface:"#2E3FCA",surface:"#D7DBFD"},generic:{default:"#9A9A9A",ringColor:r.inputs.onsurface.focus,onsurface:"#3E3E3E",surface:"#F4F4F4","surface-hover":"#F4F4F4"},hollow:{default:"#9A9A9A",ringColor:r.inputs.onsurface.focus,onsurface:"#3E3E3E",surface:"#F4F4F4","surface-hover":"#FFFFFF"},disabled:{default:"#6C6C6C",ringColor:r.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:e.ColorSky700,hover:e.ColorSky900,disabled:e.ColorGray100,current:"#384DF6"},...r.interactive},inputs:{surface:{active:e.ColorGrayWhite,border:e.ColorGray500,disabled:e.ColorGray100,checked:"#384DF6","checked-hover":"#24319D"},onsurface:{active:"#222222",focus:"#384DF6",placeholder:"#6C6C6C","icon-disabled":"#6C6C6C"},progress:{empty:e.ColorGray300,success:e.ColorGreen400,error:e.ColorRed500,info:e.ColorBlue400}},surface:{border:"#CBCBCB",secondary:"#F4F4F4",tertiary:"#EEEEEE","border-light":"#DFDFDF"},transparent:"transparent",onsurface:{copy:"#3E3E3E","copy-light":e.ColorGray700,"copy-dark":"#222222","copy-disabled":"#6C6C6C"}},F=d;o.gray.white,o.gray.white,o.gray.white,o.gray.white,o.gray[600],o.gray.white,o.gray.white,o.gray.white,o.gray.white,o.gray[600],o.gray.white,o.gray.white,o.gray.white,o.gray.white,o.gray[600],i.interactive.tertiary.onsurface,i.interactive.tertiary.active,i.interactive.tertiary.active,i.interactive.tertiary.onsurface,i.interactive.tertiary.hover,i.interactive.tertiary.hover,i.interactive.tertiary.onsurface,i.interactive.tertiary.pressed,i.interactive.tertiary.pressed,i.interactive.tertiary.onsurface,i.interactive.tertiary.active,i.interactive.tertiary.active,i.interactive.tertiary.onsurface,i.interactive.tertiary.active,i.interactive.tertiary.active,i.interactive.tertiary.onsurface,i.interactive.tertiary.onsurface,i.interactive.tertiary.onsurface,i.interactive.tertiary.pressed,i.interactive.tertiary.pressed,i.interactive.tertiary.onsurface,i.interactive.tertiary.active,i.interactive.tertiary.active,i.interactive.tertiary.onsurface,i.interactive.tertiary.active,i.interactive.tertiary.active;const m={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"}},H={instant:0,veryfast:.15,fast:.33,medium:.5,slow:1,veryslow:2},W={"ver-padding":4,"right-padding":8,"left-padding":8,radius:50},T={"ver-padding":t.Size1,"hor-padding":t.Size2,radius:l.BorderRadiusMd,gap:t.Size1},k={"ver-padding":t.Size5,"hor-padding":t.Size6,gap:t.Size2},B={button:v,utilityButton:z,iconButton:C,input:b,row:k,badge:W,popover:T},w=(s,p)=>s.status[p].default,c={breakpoints:g,sizing:t,borderRadius:l,typography:f,allColors:o,components:B,motion:H,shadows:m,getStatusColor:w},E={...c,colors:d,mode:"light"},x={...c,colors:F,mode:"dark"};exports.TypographySizeKey=y;exports.baseTokens=c;exports.breakpoints=g;exports.darkTheme=x;exports.lightTheme=E;exports.sizing=t;
+"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;