@drivy/cobalt 0.46.1 → 0.46.3

package/cjs/tokens/palette.js

@@ -2,25 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const white = "#FFF";
+const white = "#FFFFFF";
 const purple = {
-	"100": "#F6E5F5",
-	"300": "#CA6BC3",
-	"400": "#C04FB8",
+	"100": "#F8F2F8",
+	"200": "#F0E1EE",
+	"300": "#DB97D5",
+	"400": "#C758BD",
 	"500": "#B01AA7",
-	"700": "#8D1586",
-	"900": "#5F1159"
-};
-const purpleDeep = {
-	"100": "#F2A6EE",
-	"300": "#EA71E3",
-	"400": "#C31DBA",
-	"500": "#9B1794",
-	"700": "#73116E",
-	"900": "#4B0B48"
-};
-const purpleLight = {
-	"100": "#FFDCFD"
+	"600": "#A6199D",
+	"700": "#901588",
+	"800": "#75116F",
+	"900": "#530C4F",
+	"1000": "#3E093B",
+	"1100": "#280626",
+	"1200": "#160315"
 };
 const navy = {
 	"50": "#F1F1F4",
@@ -28,6 +23,7 @@ const navy = {
 	"120": "#CAC7D2",
 	"200": "#BBB8C7",
 	"300": "#7B728E",
+	"400": "#554B70",
 	"500": "#362E53",
 	"700": "#261A48",
 	"900": "#0F0429"
@@ -35,30 +31,42 @@ const navy = {
 const yellow = {
 	"100": "#FFEED1",
 	"300": "#FFDDA3",
+	"400": "#FFD387",
 	"500": "#FFC766",
 	"700": "#C59548",
 	"900": "#75592D",
 	"1000": "#3B2E17"
 };
 const green = {
-	"100": "#CDEBCB",
-	"120": "#BFE5BD",
-	"150": "#B1E0AE",
+	"100": "#F4F9F3",
+	"200": "#E5F2E4",
+	"300": "#C8E5C6",
+	"400": "#93D790",
 	"500": "#5CBF54",
 	"700": "#479D3E",
 	"900": "#2F6D1C",
-	"1000": "#1B500A"
+	"1000": "#1B500A",
+	"1100": "#143B05",
+	"1200": "#102E03"
 };
 const red = {
 	"100": "#FDEDED",
-	"120": "#FBDADA",
-	"150": "#F9C8C8",
-	"200": "#E38C8C",
-	"400": "#ED4545",
+	"120": "#F7E9E9",
+	"150": "#EED0D0",
+	"200": "#E5B5B5",
+	"300": "#DB9494",
+	"400": "#D16969",
 	"500": "#C71414",
-	"700": "#AF1212",
-	"800": "#764747",
-	"900": "#3F2424"
+	"600": "#B61212",
+	"700": "#A21010",
+	"800": "#8D0E0E",
+	"900": "#730C0C",
+	"1000": "#510808",
+	"1200": "#4A0707",
+	"1300": "#420707",
+	"1400": "#390606",
+	"1500": "#2F0505",
+	"1600": "#210303"
 };
 const orange = {
 	"100": "#F1D5B1",
@@ -70,18 +78,38 @@ const black = {
 	"50": "#544F53",
 	"75": "#443F44",
 	"100": "#363036",
+	"200": "#2E292E",
 	"300": "#282127",
+	"400": "#251D24",
 	"500": "#191218",
-	"1000": "#000"
+	"600": "#0F0A0E",
+	"700": "#090609",
+	"800": "#030203",
+	"1000": "#000000"
 };
 const grey = {
 	"50": "#F8F9FA",
 	"100": "#E3E2E3",
+	"200": "#C3C1C3",
 	"300": "#A9A6A9",
-	"500": "#918D91"
+	"400": "#9D9A9D",
+	"500": "#918D91",
+	"600": "#7D787D",
+	"700": "#6A676A"
 };
 const blue = {
-	"500": "#79A3F3"
+	"100": "#F5F8FF",
+	"200": "#E5EDFF",
+	"300": "#B7D3FF",
+	"400": "#74B0FF",
+	"500": "#1F81F3",
+	"600": "#185BD1",
+	"700": "#1B3B8B",
+	"800": "#19255C",
+	"900": "#151C38",
+	"1000": "#101423",
+	"1100": "#0D1016",
+	"1200": "#0A0B0F"
 };
 const turquoise = {
 	"50": "#ECF9FB",
@@ -97,14 +125,18 @@ const turquoise = {
 	"1200": "#11505E"
 };
 const season = {
-	"100": "#BDFFAC",
-	"200": "#94EA84",
-	"300": "#73C865",
-	"400": "#54A949",
-	"700": "#0B7011",
-	"800": "#005100",
-	"900": "#030",
-	"1000": "#001900"
+	"100": "#A9D4A8",
+	"200": "#9FD09E",
+	"300": "#7CC27B",
+	"400": "#56B654",
+	"500": "#24AA1F",
+	"600": "#229F1C",
+	"700": "#1F931A",
+	"800": "#1D8618",
+	"900": "#1A7816",
+	"1000": "#166612",
+	"1100": "#11510F",
+	"1200": "#0A3109"
 };
 const newPurple = {
 	"200": "#E46FEE",
@@ -117,8 +149,6 @@ const newViolet = {
 var _palette = {
 	white: white,
 	purple: purple,
-	purpleDeep: purpleDeep,
-	purpleLight: purpleLight,
 	navy: navy,
 	yellow: yellow,
 	green: green,
@@ -143,8 +173,6 @@ exports.newPurple = newPurple;
 exports.newViolet = newViolet;
 exports.orange = orange;
 exports.purple = purple;
-exports.purpleDeep = purpleDeep;
-exports.purpleLight = purpleLight;
 exports.red = red;
 exports.season = season;
 exports.turquoise = turquoise;

package/cjs/tokens/palette.js.map

@@ -1 +1 @@
-{"version":3,"file":"palette.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"palette.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/tokens/theme.js

@@ -4,42 +4,43 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const background = {
 	primary: "white/black.500",
-	secondary: "white/black.300",
-	accent: "purple.500/purpleDeep.500",
-	accentAlt: "purple.100/purpleDeep.900",
+	secondary: "white/black.400",
+	accent: "purple.500/purple.400",
+	accentAlt: "purple.200/purple.1000",
 	info: "yellow.100/yellow.1000",
 	error: "red.500/red.500",
-	errorAlt: "red.100/red.900",
+	errorAlt: "red.100/red.1500",
 	success: "green.700/green.700",
-	successAlt: "green.100/green.1000",
+	successAlt: "green.300/green.1200",
 	connect: "newPurple.500/newPurple.200",
 	connectAlt: "turquoise.50/turquoise.900",
-	keyExchange: "newViolet.500/newViolet.200",
-	picked: "green.700/green.500",
-	rideshare: "black.1000/black.1000",
 	driver: "yellow.500/yellow.500",
 	owner: "navy.700/navy.700",
-	disabled: "navy.100/black.100",
+	disabled: "navy.50/black.500",
 	neutral: "navy.100/black.50",
 	neutralAlt: "navy.50/black.100",
-	seasonLow: "season.100/season.700",
-	seasonMedium: "season.200/season.800",
-	seasonHigh: "season.300/season.900",
-	seasonVeryhigh: "season.400/season.1000",
-	rental: "turquoise.100/turquoise.1200",
-	blocker: "navy.100/black.75",
+	seasonLow: "season.100/season.300",
+	seasonMedium: "season.300/season.600",
+	seasonHigh: "season.700/season.900",
+	seasonVeryHigh: "season.1100/season.1200",
+	rental: "blue.500/blue.700",
+	rentalAlt: "blue.300/blue.500",
+	blocker: "grey.100/black.200",
+	rideshare: "black.1000/black.1000",
+	keyExchange: "newViolet.500/newViolet.200",
+	picked: "green.700/green.500",
 	base: "navy.900/navy.50",
 	secondaryInteractive: {
-		DEFAULT: "white/black.300",
+		DEFAULT: "white/black.400",
 		hover: "navy.50/black.300"
 	},
 	accentInteractive: {
-		DEFAULT: "purple.500/purpleDeep.500",
-		hover: "purple.700/purpleDeep.400"
+		DEFAULT: "purple.500/purple.400",
+		hover: "purple.600/purple.700"
 	},
 	accentAltInteractive: {
-		DEFAULT: "purple.100/purpleDeep.900",
-		hover: "purpleLight.100/purpleDeep.900"
+		DEFAULT: "purple.200/purple.1000",
+		hover: "purple.200/purple.900"
 	},
 	connectInteractive: {
 		DEFAULT: "newPurple.500/newPurple.200",
@@ -52,141 +53,148 @@ const background = {
 };
 const text = {
 	base: "navy.700/grey.100",
-	subdued: "navy.300/grey.300",
-	accent: "purple.500/purpleDeep.400",
-	accentAlt: "purple.500/grey.100",
-	info: "yellow.900/yellow.300",
-	infoAlt: "yellow.700/yellow.700",
+	subdued: "navy.400/grey.300",
+	accent: "purple.500/purple.400",
+	accentAlt: "purple.700/purple.200",
+	info: "yellow.900/yellow.400",
 	error: "red.500/red.400",
-	errorAlt: "red.500/red.500",
-	success: "green.700/green.700",
-	successAlt: "green.1000/green.100",
-	warning: "orange.500/orange.300",
+	errorAlt: "red.500/red.200",
+	success: "green.700/green.400",
+	successAlt: "green.900/green.300",
 	connect: "newPurple.500/newPurple.200",
 	connectAlt: "turquoise.900/white",
-	keyExchange: "newViolet.500/newViolet.200",
-	picked: "green.700/green.500",
-	rideshare: "black.1000/white",
 	driver: "navy.700/navy.700",
 	owner: "white/grey.100",
-	disabled: "navy.200/black.50",
-	inversed: "white/white",
-	onAccent: "white/grey.100",
+	warning: "orange.500/orange.300",
+	infoAlt: "yellow.700/yellow.700",
+	disabled: "navy.120/black.50",
+	onAccent: "white/black.1000",
 	onRideshare: "white/white",
 	onError: "white/white",
 	onSuccess: "white/white",
-	onConnect: "white/navy.900",
-	onKeyExchange: "white/navy.900",
-	onPicked: "white/navy.900",
+	onConnect: "white/black.1000",
+	onKeyExchange: "white/black.1000",
+	onPicked: "white/black.1000",
+	keyExchange: "newViolet.500/newViolet.200",
+	picked: "green.700/green.500",
+	rideshare: "black.1000/white",
 	onBase: "white/navy.900",
+	onSeasonLow: "black.800/black.800",
+	onSeasonMedium: "black.800/white",
+	onSeasonHigh: "white/white",
+	onSeasonVeryHigh: "white/white",
+	onRental: "white/white",
+	onRentalAlt: "black.300/black.1000",
+	inversed: "white/white",
 	baseInteractive: {
 		DEFAULT: "navy.700/grey.100",
 		hover: "navy.900/grey.300"
 	},
 	subduedInteractive: {
-		DEFAULT: "navy.300/grey.300",
-		hover: "navy.500/grey.300"
+		DEFAULT: "navy.400/grey.300",
+		hover: "navy.500/grey.400"
 	},
 	accentInteractive: {
-		DEFAULT: "purple.500/purpleDeep.400",
-		hover: "purple.700/purpleDeep.400"
+		DEFAULT: "purple.500/purple.400",
+		hover: "purple.700/purple.500"
 	},
 	accentAltInteractive: {
-		DEFAULT: "purple.500/grey.100",
-		hover: "purple.700/grey.100"
+		DEFAULT: "purple.700/purple.200",
+		hover: "purple.700/purple.400"
 	}
 };
 const icon = {
-	base: "navy.500/grey.100",
-	subdued: "navy.300/grey.300",
-	accent: "purple.500/purpleDeep.400",
-	accentAlt: "purple.500/grey.100",
-	info: "yellow.900/yellow.300",
-	infoAlt: "yellow.500/yellow.700",
+	base: "navy.700/grey.100",
+	subdued: "navy.400/grey.300",
+	accent: "purple.500/purple.400",
+	accentAlt: "purple.700/purple.200",
+	info: "yellow.900/yellow.400",
 	error: "red.500/red.400",
 	errorAlt: "red.500/red.200",
-	success: "green.700/green.700",
-	successAlt: "green.1000/green.100",
-	warning: "orange.500/orange.300",
+	success: "green.700/green.400",
+	successAlt: "green.900/green.300",
 	connect: "newPurple.500/newPurple.200",
 	connectAlt: "turquoise.900/turquoise.50",
-	keyExchange: "newViolet.500/newViolet.200",
-	picked: "green.700/green.500",
-	rideshare: "black.1000/white",
 	driver: "navy.700/navy.700",
-	owner: "white/white",
-	disabled: "navy.200/black.50",
-	disabledAlt: "navy.300/grey.500",
-	inversed: "white/white",
-	onAccent: "white/white",
+	owner: "white/grey.100",
+	warning: "orange.500/orange.300",
+	infoAlt: "yellow.500/yellow.700",
+	disabled: "navy.200/black.75",
+	onAccent: "white/black.1000",
 	onRideshare: "white/white",
 	onError: "white/white",
 	onSuccess: "white/white",
-	onConnect: "white/navy.900",
-	onKeyExchange: "white/navy.900",
-	onPicked: "white/navy.900",
+	onConnect: "white/black.1000",
+	onKeyExchange: "white/black.1000",
+	onPicked: "white/black.1000",
+	keyExchange: "newViolet.500/newViolet.200",
+	picked: "green.700/green.500",
+	rideshare: "black.1000/white",
 	onBase: "white/navy.900",
+	disabledAlt: "navy.120/black.50",
+	onRental: "white/white",
+	inversed: "white/white",
 	baseInteractive: {
-		DEFAULT: "navy.500/grey.100",
-		hover: "navy.700/grey.100"
+		DEFAULT: "navy.700/grey.100",
+		hover: "navy.900/grey.200"
 	},
 	subduedInteractive: {
-		DEFAULT: "navy.300/grey.300",
-		hover: "navy.500/grey.300"
+		DEFAULT: "navy.400/grey.300",
+		hover: "navy.500/grey.400"
 	},
 	accentInteractive: {
-		DEFAULT: "purple.500/purpleDeep.400",
-		hover: "purple.700/purpleDeep.400"
+		DEFAULT: "purple.500/purple.400",
+		hover: "purple.700/purple.500"
 	},
 	accentAltInteractive: {
-		DEFAULT: "purple.500/grey.100",
-		hover: "purple.700/grey.100"
+		DEFAULT: "purple.700/purple.200",
+		hover: "purple.700/purple.400"
 	}
 };
 const stroke = {
-	base: "navy.100/black.50",
+	base: "navy.100/black.100",
 	subdued: "navy.50/black.100",
-	strong: "navy.300/navy.200",
-	accent: "purple.500/purpleDeep.500",
-	accentAlt: "purple.300/purpleDeep.400",
-	error: "red.500/red.200",
-	errorAlt: "red.500/red.200",
+	accent: "purple.500/purple.400",
+	accentAlt: "purple.600/purple.400",
 	success: "green.500/green.700",
 	successAlt: "green.500/green.700",
-	connect: "newPurple.500/newPurple.200",
-	keyExchange: "newViolet.500/newViolet.200",
-	picked: "green.700/green.500",
-	rideshare: "black.1000/white",
-	rental: "turquoise.500/turquoise.500",
-	blocker: "navy.300/grey.300",
+	error: "red.500/red.400",
+	errorAlt: "red.500/red.200",
+	strong: "grey.300/grey.700",
 	onAccent: "white/grey.100",
+	rental: "blue.700/blue.500",
+	blocker: "grey.200/black.50",
 	onError: "white/white",
 	onSuccess: "white/white",
-	onConnect: "white/black.1000",
-	onPicked: "white/black.1000",
-	onKeyExchange: "white/black.1000",
+	connect: "newPurple.500/newPurple.200",
+	keyExchange: "newViolet.500/newViolet.200",
+	picked: "green.700/green.500",
+	onConnect: "white/black.75",
+	onKeyExchange: "white/black.75",
+	onPicked: "white/black.75",
 	onRideshare: "white/black.1000",
-	onBase: "white/black.1000",
+	rideshare: "black.1000/white",
+	onBase: "white/black.600",
 	baseInteractive: {
-		DEFAULT: "navy.100/black.50",
-		hover: "navy.300/purpleDeep.400",
-		press: "navy.500/purpleDeep.400"
+		DEFAULT: "navy.100/black.100",
+		hover: "navy.300/black.300",
+		press: "navy.500/black.500"
 	},
 	accentInteractive: {
-		DEFAULT: "purple.500/purpleDeep.500",
-		hover: "purple.700/purpleDeep.400",
-		press: "purple.900/purpleDeep.400"
+		DEFAULT: "purple.500/purple.400",
+		hover: "purple.700/purple.600",
+		press: "purple.900/purple.800"
 	},
 	strongInteractive: {
-		DEFAULT: "navy.300/navy.200",
-		hover: "navy.500/purpleDeep.400",
-		press: "navy.700/purpleDeep.400"
+		DEFAULT: "grey.300/grey.700",
+		hover: "grey.400/black.50",
+		press: "grey.500/black.100"
 	}
 };
 const buttonIcon = {
 	selected: "purple.500/grey.100",
-	primary: "white/grey.100",
-	secondary: "purple.500/purpleDeep.400",
+	primary: "white/black.1000",
+	secondary: "purple.500/purple.300",
 	tertiary: "purple.500/white",
 	destructive: "red.500/red.200",
 	success: "white/green.100",
@@ -194,19 +202,19 @@ const buttonIcon = {
 	disabled: "navy.300/grey.300",
 	accentAlt: "purple.500/grey.100",
 	primaryInteractive: {
-		DEFAULT: "white/grey.100",
-		hover: "white/white",
-		press: "white/white"
+		DEFAULT: "white/black.1000",
+		hover: "white/black.1000",
+		press: "white/black.1000"
 	},
 	secondaryInteractive: {
-		DEFAULT: "purple.500/purpleDeep.400",
-		hover: "purple.700/purpleDeep.700",
-		press: "purple.900/purpleDeep.900"
+		DEFAULT: "purple.500/purple.300",
+		hover: "purple.500/purple.300",
+		press: "purple.900/purple.900"
 	},
 	tertiaryInteractive: {
 		DEFAULT: "purple.500/white",
-		hover: "purple.700/purpleDeep.700",
-		press: "purple.900/purpleDeep.900"
+		hover: "purple.500/white",
+		press: "purple.900/purple.1000"
 	},
 	destructiveInteractive: {
 		DEFAULT: "red.500/red.200",
@@ -221,8 +229,8 @@ const buttonIcon = {
 };
 const buttonLabel = {
 	selected: "purple.500/grey.100",
-	primary: "white/grey.100",
-	secondary: "purple.500/purpleDeep.400",
+	primary: "white/black.1000",
+	secondary: "purple.500/purple.300",
 	tertiary: "purple.500/white",
 	disabled: "navy.300/grey.300",
 	accentAlt: "purple.500/grey.100",
@@ -230,19 +238,19 @@ const buttonLabel = {
 	success: "white/green.100",
 	successAlt: "green.900/green.100",
 	primaryInteractive: {
-		DEFAULT: "white/grey.100",
-		hover: "white/white",
-		press: "white/white"
+		DEFAULT: "white/black.1000",
+		hover: "white/black.1000",
+		press: "white/black.1000"
 	},
 	secondaryInteractive: {
-		DEFAULT: "purple.500/purpleDeep.400",
-		hover: "purple.700/purpleDeep.700",
-		press: "purple.900/purpleDeep.900"
+		DEFAULT: "purple.500/purple.300",
+		hover: "purple.700/purple.300",
+		press: "purple.900/purple.900"
 	},
 	tertiaryInteractive: {
 		DEFAULT: "purple.500/white",
-		hover: "purple.700/purpleDeep.700",
-		press: "purple.900/purpleDeep.900"
+		hover: "purple.700/white",
+		press: "purple.900/purple.1000"
 	},
 	destructiveInteractive: {
 		DEFAULT: "red.500/red.200",
@@ -257,21 +265,21 @@ const buttonLabel = {
 };
 const buttonBackground = {
 	selected: "purple.100/purpleDeep.900",
-	primary: "purple.500/purpleDeep.500",
-	secondary: "white/black.500",
+	primary: "purple.500/purple.400",
+	secondary: "white/black.100",
 	tertiary: "white/white",
-	accentAlt: "purple.100/purpleDeep.900",
+	accentAlt: "purple.100/purple.900",
 	destructive: "red.100/red.900",
 	success: "green.700/green.900",
 	successAlt: "green.100/green.1000",
 	disabled: "navy.100/black.50",
 	primaryInteractive: {
-		DEFAULT: "purple.500/purpleDeep.500",
-		hover: "purple.700/purpleDeep.700",
-		press: "purple.900/purpleDeep.900"
+		DEFAULT: "purple.500/purple.400",
+		hover: "purple.700/purple.800",
+		press: "purple.900/purple.1000"
 	},
 	secondaryInteractive: {
-		DEFAULT: "white/black.500",
+		DEFAULT: "white/black.100",
 		hover: "white/black.500",
 		press: "white/black.500"
 	},
@@ -287,23 +295,23 @@ const buttonBackground = {
 	},
 	successAltInteractive: {
 		DEFAULT: "green.100/green.1000",
-		hover: "green.120/green.900",
-		press: "green.150/green.1000"
+		hover: "green.300/green.900",
+		press: "green.400/green.1000"
 	}
 };
 const fill = {
-	base: "navy.500/grey.50",
+	base: "navy.500/navy.50",
+	accent: "purple.500/purple.400",
+	secondary: "yellow.500/yellow.400",
 	subdued: "navy.100/black.50",
-	secondary: "yellow.500/yellow.500",
-	accent: "purple.500/purpleDeep.400",
-	accentAlt: "purple.100/purpleDeep.900",
-	error: "red.500/red.500",
-	success: "green.500/green.700",
 	neutral: "navy.50/black.100",
 	negative: "red.150/red.800",
+	accentAlt: "purple.100/purple.900",
 	disabled: "navy.300/grey.300",
-	rental: "turquoise.100/turquoise.1200",
-	blocker: "navy.120/black.75",
+	error: "red.500/red.500",
+	success: "green.500/green.700",
+	rental: "blue.300/blue.700",
+	blocker: "grey.100/black.200",
 	primary: "white/black.1000"
 };
 const illustrations = {

package/cjs/tokens/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/tokens/zIndexes.js

@@ -8,6 +8,7 @@ const above = 1;
 const dropdown = 10;
 const nav = 20;
 const header = 30;
+const sidepanel = 80;
 const modal = 90;
 const alert = 100;
 var _zIndexes = {
@@ -23,6 +24,9 @@ var _zIndexes = {
 	"header-below": 29,
 	header: header,
 	"header-above": 31,
+	"sidepanel-below": 79,
+	sidepanel: sidepanel,
+	"sidepanel-above": 81,
 	"modal-below": 89,
 	modal: modal,
 	"modal-above": 91,
@@ -40,4 +44,5 @@ exports.dropdown = dropdown;
 exports.header = header;
 exports.modal = modal;
 exports.nav = nav;
+exports.sidepanel = sidepanel;
 //# sourceMappingURL=zIndexes.js.map

package/cjs/tokens/zIndexes.js.map

@@ -1 +1 @@
-{"version":3,"file":"zIndexes.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"zIndexes.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/components/Calendar/CalendarView/CalendarViewMonth.js

@@ -34,9 +34,9 @@ const CalendarViewMonth = ({ monthName, monthStart, statusByDate = {}, isSundayF
     const monthByWeek = useMemo(() => getMonthByWeek(), []);
     return (React.createElement("div", { className: "cobalt-CalendarView__month" },
         React.createElement("div", { className: "cobalt-CalendarView__monthName" }, monthName),
-        monthByWeek.map((week, weekIndex) => (React.createElement("div", { key: weekIndex, className: "cobalt-CalendarView__week" }, week.map((day, dayIndex) => (React.createElement("div", { key: weekIndex + 1 * dayIndex + 1, className: cx("cobalt-CalendarView__day", {
+        React.createElement("div", { className: "c-flex c-flex-col c-gap-2xs" }, monthByWeek.map((week, weekIndex) => (React.createElement("div", { key: weekIndex, className: "cobalt-CalendarView__week" }, week.map((day, dayIndex) => (React.createElement("div", { key: weekIndex + 1 * dayIndex + 1, className: cx("cobalt-CalendarView__day", {
                 [`cobalt-CalendarView__day--${day.status}`]: day.status,
-            }) }, day.date))))))));
+            }) }, day.date)))))))));
 };
 CalendarViewMonth.displayName = "CalendarViewMonth";