@drivy/cobalt 0.42.2 → 0.42.4

package/cjs/tokens/palette.js

@@ -2,84 +2,100 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const black = {
-	"50": "#544F53",
-	"100": "#363036",
-	"300": "#282127",
-	"500": "#191218",
-	"1000": "#000"
+const white = "#FFFFFF";
+const purple = {
+	"100": "#F6E5F5",
+	"300": "#CA6BC3",
+	"400": "#C04FB8",
+	"500": "#B01AA7",
+	"700": "#8D1586",
+	"900": "#5F1159",
+	"2000": "#D62929"
 };
-const grey = {
-	"100": "#E3E2E3",
-	"300": "#A9A6A9"
+const purpleDeep = {
+	"100": "#F2A6EE",
+	"300": "#EA71E3",
+	"400": "#C31DBA",
+	"500": "#9B1794",
+	"700": "#73116E",
+	"900": "#4B0B48"
 };
-const green = {
-	"100": "#CDEBCB",
-	"120": "#BFE5BD",
-	"150": "#B1E0AE",
-	"500": "#5CBF54",
-	"700": "#479D3E",
-	"900": "#2F6D1C",
-	"1000": "#15310D"
+const purpleLight = {
+	"100": "#FFDCFD"
 };
 const navy = {
 	"50": "#F1F1F4",
 	"100": "#E3E2E8",
+	"120": "#CAC7D2",
 	"200": "#BBB8C7",
 	"300": "#7B728E",
 	"500": "#362E53",
 	"700": "#261A48",
 	"900": "#0F0429"
 };
-const orange = {
-	"100": "#F1D5B1",
-	"300": "#EEC186",
-	"500": "#E39735",
-	"900": "#462E0C"
-};
-const purpleDeep = {
-	"100": "#F2A6EE",
-	"300": "#EA71E3",
-	"400": "#C31DBA",
-	"500": "#9B1794",
-	"700": "#73116E",
-	"900": "#4B0B48"
-};
-const purpleLight = {
-	"100": "#FFDCFD"
+const yellow = {
+	"100": "#FFEED1",
+	"300": "#FFDDA3",
+	"500": "#FFC766",
+	"700": "#C59548",
+	"900": "#75592D",
+	"1000": "#3B2E17"
 };
-const purple = {
-	"100": "#F6E5F5",
-	"300": "#CA6BC3",
-	"400": "#C04FB8",
-	"500": "#B01AA7",
-	"700": "#8D1586",
-	"900": "#5F1159"
+const green = {
+	"100": "#CDEBCB",
+	"120": "#BFE5BD",
+	"150": "#B1E0AE",
+	"500": "#5CBF54",
+	"700": "#479D3E",
+	"900": "#2F6D1C",
+	"1000": "#1B500A"
 };
 const red = {
 	"100": "#FDEDED",
 	"120": "#FBDADA",
 	"150": "#F9C8C8",
-	"300": "#E38C8C",
+	"200": "#E38C8C",
 	"400": "#ED4545",
 	"500": "#C71414",
 	"700": "#AF1212",
+	"800": "#764747",
 	"900": "#3F2424"
 };
+const orange = {
+	"100": "#F1D5B1",
+	"300": "#EEC186",
+	"500": "#E39735",
+	"900": "#462E0C"
+};
+const black = {
+	"50": "#544F53",
+	"75": "#443F44",
+	"100": "#363036",
+	"300": "#282127",
+	"500": "#191218",
+	"1000": "#000000"
+};
+const grey = {
+	"50": "#F8F9FA",
+	"100": "#E3E2E3",
+	"300": "#A9A6A9",
+	"500": "#918D91"
+};
+const blue = {
+	"500": "#79A3F3"
+};
 const turquoise = {
 	"50": "#ECF9FB",
+	"100": "#CFEFF5",
+	"200": "#AFE5EE",
+	"300": "#8EDBE7",
+	"400": "#76D3E2",
 	"500": "#5ECBDD",
+	"600": "#56C6D9",
 	"700": "#4CBED4",
-	"900": "#31ACC7"
-};
-const white = "#fff";
-const yellow = {
-	"100": "#FFEED1",
-	"300": "#FFDDA3",
-	"500": "#FFC766",
-	"700": "#C59548",
-	"900": "#75592D",
-	"1000": "#3B2E17"
+	"800": "#42B8CF",
+	"900": "#31ACC7",
+	"1200": "#11505E"
 };
 const season = {
 	"100": "#BDFFAC",
@@ -88,26 +104,28 @@ const season = {
 	"400": "#54A949",
 	"700": "#0B7011",
 	"800": "#005100",
-	"900": "#030",
+	"900": "#003300",
 	"1000": "#001900"
 };
 var _palette = {
-	black: black,
-	grey: grey,
-	green: green,
-	navy: navy,
-	orange: orange,
+	white: white,
+	purple: purple,
 	purpleDeep: purpleDeep,
 	purpleLight: purpleLight,
-	purple: purple,
+	navy: navy,
+	yellow: yellow,
+	green: green,
 	red: red,
+	orange: orange,
+	black: black,
+	grey: grey,
+	blue: blue,
 	turquoise: turquoise,
-	white: white,
-	yellow: yellow,
 	season: season
 };
 
 exports.black = black;
+exports.blue = blue;
 exports["default"] = _palette;
 exports.green = green;
 exports.grey = grey;

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

@@ -5,262 +5,288 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const background = {
 	primary: "white/black.500",
 	secondary: "white/black.300",
-	secondaryInteractive: {
-		DEFAULT: "white/black.300",
-		hover: "navy.50/black.300"
-	},
-	accent: "purple.500/purpleDeep.400",
-	accentInteractive: {
-		DEFAULT: "purple.500/purpleDeep.400",
-		hover: "purple.700/purpleDeep.400"
-	},
+	accent: "purple.500/purpleDeep.500",
 	accentAlt: "purple.100/purpleDeep.900",
-	accentAltInteractive: {
-		DEFAULT: "purple.100/purpleDeep.900",
-		hover: "purpleLight.100/purpleDeep.900"
-	},
 	info: "yellow.100/yellow.1000",
 	error: "red.500/red.500",
-	errorInteractive: {
-		DEFAULT: "red.500/red.500",
-		hover: "red.700/red.500"
-	},
 	errorAlt: "red.100/red.900",
 	success: "green.700/green.700",
 	successAlt: "green.100/green.1000",
-	connect: "turquoise.500/turquoise.500",
-	connectInteractive: {
-		DEFAULT: "turquoise.500/turquoise.500",
-		hover: "turquoise.700/turquoise.500"
-	},
+	connect: "turquoise.500/turquoise.700",
 	connectAlt: "turquoise.50/turquoise.900",
 	driver: "yellow.500/yellow.500",
 	owner: "navy.700/navy.700",
-	disabled: "navy.100/black.50",
+	disabled: "navy.100/black.100",
 	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",
-	rideShare: "black.1000/black.1000"
+	seasonVeryhigh: "season.400/season.1000",
+	rental: "turquoise.100/turquoise.1200",
+	blocker: "navy.100/black.75",
+	rideshare: "black.1000/black.1000",
+	secondaryInteractive: {
+		DEFAULT: "white/black.300",
+		hover: "navy.50/black.300"
+	},
+	accentInteractive: {
+		DEFAULT: "purple.500/purpleDeep.500",
+		hover: "purple.700/purpleDeep.400"
+	},
+	accentAltInteractive: {
+		DEFAULT: "purple.100/purpleDeep.900",
+		hover: "purpleLight.100/purpleDeep.900"
+	},
+	connectInteractive: {
+		DEFAULT: "turquoise.500/turquoise.700",
+		hover: "turquoise.700/turquoise.700"
+	},
+	errorInteractive: {
+		DEFAULT: "red.500/red.500",
+		hover: "red.700/red.500"
+	}
 };
 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",
+	error: "red.500/red.400",
+	errorAlt: "red.500/red.500",
+	success: "green.700/green.700",
+	successAlt: "green.1000/green.100",
+	connect: "turquoise.500/turquoise.700",
+	connectAlt: "turquoise.900/white",
+	driver: "navy.700/navy.700",
+	owner: "white/grey.100",
+	warning: "orange.500/orange.300",
+	infoAlt: "yellow.700/yellow.700",
+	disabled: "navy.200/black.50",
+	onAccent: "white/grey.100",
+	onRideshare: "white/white",
+	onError: "white/white",
+	onSuccess: "white/white",
 	baseInteractive: {
 		DEFAULT: "navy.700/grey.100",
-		hover: "navy.300/grey.300"
+		hover: "navy.900/grey.300"
 	},
-	subdued: "navy.300/grey.300",
 	subduedInteractive: {
 		DEFAULT: "navy.300/grey.300",
 		hover: "navy.500/grey.300"
 	},
-	accent: "purple.500/purpleDeep.400",
 	accentInteractive: {
 		DEFAULT: "purple.500/purpleDeep.400",
 		hover: "purple.700/purpleDeep.400"
 	},
-	accentAlt: "purple.500/grey.100",
 	accentAltInteractive: {
 		DEFAULT: "purple.500/grey.100",
 		hover: "purple.700/grey.100"
-	},
+	}
+};
+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",
 	error: "red.500/red.400",
-	errorAlt: "red.500/red.500",
+	errorAlt: "red.500/red.200",
 	success: "green.700/green.700",
-	successAlt: "green.900/green.100",
-	warning: "orange.500/orange.300",
-	connect: "turquoise.500/turquoise.500",
+	successAlt: "green.1000/green.100",
+	connect: "turquoise.500/turquoise.700",
 	connectAlt: "turquoise.900/turquoise.50",
 	driver: "navy.700/navy.700",
-	owner: "white/grey.100",
-	inversed: "white/white",
-	disabled: "navy.200/navy.200",
+	owner: "white/white",
+	disabled: "navy.100/black.50",
+	disabledAlt: "navy.300/grey.500",
+	warning: "orange.500/orange.300",
+	infoAlt: "yellow.500/yellow.700",
 	onAccent: "white/white",
-	onError: "white/white",
+	rideshare: "black.1000/white",
+	onRideshare: "white/white",
 	onSuccess: "white/white",
-	onConnect: "white/white",
-	onRideShare: "white/white"
-};
-const buttonBackground = {
-	selected: "purple.100/purpleDeep.900",
-	destructiveInteractive: {
-		DEFAULT: "red.100/red.900",
-		hover: "red.120/red.900",
-		press: "red.150/red.900"
+	onError: "white/white",
+	baseInteractive: {
+		DEFAULT: "navy.500/grey.100",
+		hover: "navy.700/grey.100"
 	},
-	disabled: "navy.100/black.50",
-	primaryInteractive: {
-		DEFAULT: "purple.500/purpleDeep.500",
-		hover: "purple.700/purpleDeep.500",
-		press: "purple.900/purpleDeep.500"
+	subduedInteractive: {
+		DEFAULT: "navy.300/grey.300",
+		hover: "navy.500/grey.300"
 	},
-	secondaryInteractive: {
-		DEFAULT: "white/black.500",
-		hover: "white/black.500",
-		press: "white/black.500"
+	accentInteractive: {
+		DEFAULT: "purple.500/purpleDeep.400",
+		hover: "purple.700/purpleDeep.400"
 	},
-	success: "green.700/green.900",
-	successAltInteractive: {
-		DEFAULT: "green.100/green.1000",
-		hover: "green.120/green.1000",
-		press: "green.150/green.1000"
+	accentAltInteractive: {
+		DEFAULT: "purple.500/grey.100",
+		hover: "purple.700/grey.100"
+	}
+};
+const stroke = {
+	base: "navy.100/black.50",
+	subdued: "navy.50/black.100",
+	accent: "purple.500/purpleDeep.500",
+	accentAlt: "purple.300/purpleDeep.400",
+	success: "green.500/green.700",
+	successAlt: "green.500/green.700",
+	error: "red.500/red.200",
+	errorAlt: "red.500/red.200",
+	strong: "navy.300/navy.200",
+	onAccent: "white/grey.100",
+	rentals: "turquoise.500/turquoise.500",
+	blokers: "navy.300/grey.300",
+	onError: "white/white",
+	onSuccess: "white/white",
+	baseInteractive: {
+		DEFAULT: "navy.100/black.50",
+		hover: "navy.300/purpleDeep.400",
+		press: "navy.500/purpleDeep.400"
 	},
-	tertiaryInteractive: {
-		DEFAULT: "white/white",
-		hover: "white/white",
-		press: "white/white"
+	accentInteractive: {
+		DEFAULT: "purple.500/purpleDeep.500",
+		hover: "purple.700/purpleDeep.400",
+		press: "purple.900/purpleDeep.400"
 	}
 };
 const buttonIcon = {
-	selected: "purple.500/grey.100",
-	destructiveInteractive: {
-		DEFAULT: "red.500/red.200",
-		hover: "red.500/red.200",
-		press: "red.500/red.200"
-	},
+	primary: "white/grey.100",
+	secondary: "purple.500/purpleDeep.400",
+	tertiary: "purple.500/white",
+	destructive: "red.500/red.200",
+	success: "white/green.100",
+	successAlt: "green.900/green.100",
 	disabled: "navy.300/grey.300",
+	accentAlt: "purple.500/grey.100",
 	primaryInteractive: {
 		DEFAULT: "white/grey.100",
-		hover: "white/grey.100",
-		press: "white/grey.100"
+		hover: "white/white",
+		press: "white/white"
 	},
 	secondaryInteractive: {
 		DEFAULT: "purple.500/purpleDeep.400",
-		hover: "purple.700/purpleDeep.400",
-		press: "purple.900/purpleDeep.400"
+		hover: "purple.700/purpleDeep.700",
+		press: "purple.900/purpleDeep.900"
+	},
+	tertiaryInteractive: {
+		DEFAULT: "purple.500/white",
+		hover: "purple.700/purpleDeep.700",
+		press: "purple.900/purpleDeep.900"
+	},
+	destructiveInteractive: {
+		DEFAULT: "red.500/red.200",
+		hover: "red.500/red.200",
+		press: "red.500/red.200"
 	},
-	success: "white/green.100",
 	successAltInteractive: {
 		DEFAULT: "green.900/green.100",
 		hover: "green.900/green.100",
 		press: "green.900/green.100"
-	},
-	tertiaryInteractive: {
-		DEFAULT: "purple.500/purpleDeep.400",
-		hover: "purple.700/purpleDeep.400",
-		press: "purple.900/purpleDeep.400"
 	}
 };
 const buttonLabel = {
-	selected: "purple.500/grey.100",
-	destructiveInteractive: {
-		DEFAULT: "red.500/red.200",
-		hover: "red.500/red.200",
-		press: "red.500/red.200"
-	},
+	primary: "white/grey.100",
+	secondary: "purple.500/purpleDeep.400",
+	tertiary: "purple.500/white",
 	disabled: "navy.300/grey.300",
+	accentAlt: "purple.500/grey.100",
+	destructive: "red.500/red.200",
+	success: "white/green.100",
+	successAlt: "green.900/green.100",
 	primaryInteractive: {
 		DEFAULT: "white/grey.100",
-		hover: "white/grey.100",
-		press: "white/grey.100"
+		hover: "white/white",
+		press: "white/white"
 	},
 	secondaryInteractive: {
 		DEFAULT: "purple.500/purpleDeep.400",
-		hover: "purple.700/purpleDeep.400",
-		press: "purple.900/purpleDeep.400"
+		hover: "purple.700/purpleDeep.700",
+		press: "purple.900/purpleDeep.900"
+	},
+	tertiaryInteractive: {
+		DEFAULT: "purple.500/white",
+		hover: "purple.700/purpleDeep.700",
+		press: "purple.900/purpleDeep.900"
+	},
+	destructiveInteractive: {
+		DEFAULT: "red.500/red.200",
+		hover: "red.500/red.200",
+		press: "red.500/red.200"
 	},
-	success: "white/green.100",
 	successAltInteractive: {
 		DEFAULT: "green.900/green.100",
 		hover: "green.900/green.100",
 		press: "green.900/green.100"
-	},
-	tertiaryInteractive: {
-		DEFAULT: "purple.500/purpleDeep.400",
-		hover: "purple.700/purpleDeep.400",
-		press: "purple.900/purpleDeep.400"
 	}
 };
-const icon = {
-	base: "navy.500/grey.100",
-	baseInteractive: {
-		DEFAULT: "navy.500/grey.100",
-		hover: "navy.700/grey.100"
-	},
-	subdued: "navy.300/grey.300",
-	subduedInteractive: {
-		DEFAULT: "navy.300/grey.300",
-		hover: "navy.500/grey.300"
-	},
-	accent: "purple.500/purpleDeep.400",
-	accentInteractive: {
-		DEFAULT: "purple.500/purpleDeep.400",
-		hover: "purple.700//purpleDeep.400"
-	},
-	accentAlt: "purple.500/grey.100",
-	accentAltInteractive: {
-		DEFAULT: "purple.500/grey.100",
-		hover: "purple.700/grey.100"
-	},
-	info: "yellow.900/yellow.300",
-	infoAlt: "yellow.500/yellow.700",
-	error: "red.500/red.400",
-	errorAlt: "red.500/red.200",
-	success: "green.700/green.700",
-	successAlt: "green.900/green.100",
-	warning: "orange.500/orange.300",
-	connect: "turquoise.500/white",
-	connectAlt: "turquoise.900/turquoise.50",
-	driver: "navy.700//navy.700",
-	owner: "white/white",
-	inversed: "white/white",
+const buttonBackground = {
+	primary: "purple.500/purpleDeep.500",
+	secondary: "white/black.500",
+	tertiary: "white/white",
+	accentAlt: "purple.100/purpleDeep.900",
+	destructive: "red.100/red.900",
+	success: "green.700/green.900",
+	successAlt: "green.100/green.1000",
 	disabled: "navy.100/black.50",
-	rideShare: "black.1000/white",
-	onRideShare: "white/white"
-};
-const stroke = {
-	base: "navy.100/black.50",
-	baseInteractive: {
-		DEFAULT: "navy.100/black.50",
-		hover: "navy.300/purpleDeep.400",
-		press: "navy.500/purpleDeep.400"
+	primaryInteractive: {
+		DEFAULT: "purple.500/purpleDeep.500",
+		hover: "purple.700/purpleDeep.700",
+		press: "purple.900/purpleDeep.900"
 	},
-	strong: "navy.300/navy.200",
-	strongInteractive: {
-		DEFAULT: "navy.300/navy.200",
-		hover: "navy.500/purpleDeep.400",
-		press: "navy.700/purpleDeep.400"
+	secondaryInteractive: {
+		DEFAULT: "white/black.500",
+		hover: "white/black.500",
+		press: "white/black.500"
 	},
-	subdued: "navy.100/black.50",
-	accent: "purple.500/purpleDeep.400",
-	accentInteractive: {
-		DEFAULT: "purple.500/purpleDeep.400",
-		hover: "purple.700/purpleDeep.400",
-		press: "purple.900/purpleDeep.400"
+	tertiaryInteractive: {
+		DEFAULT: "white/white",
+		hover: "white/black.500",
+		press: "white/black.500"
 	},
-	accentAlt: "purple.300/purpleDeep.700",
-	error: "red.500/red.200",
-	errorAlt: "red.500/red.200",
-	success: "green.500/green.700",
-	successAlt: "green.500/green.700",
-	onAccent: "white/white",
-	onError: "white/white"
+	destructiveInteractive: {
+		DEFAULT: "red.100/red.900",
+		hover: "red.120/red.800",
+		press: "red.150/red.900"
+	},
+	successAltInteractive: {
+		DEFAULT: "green.100/green.1000",
+		hover: "green.120/green.900",
+		press: "green.150/green.1000"
+	}
 };
 const fill = {
-	base: "navy.500/grey.100",
+	base: "navy.500/grey.300",
+	accent: "purple.500/purpleDeep.400",
 	secondary: "yellow.500/yellow.500",
 	subdued: "navy.100/black.50",
-	accent: "purple.500/purpleDeep.400",
+	neutral: "navy.50/black.100",
+	negative: "red.150/red.800",
 	accentAlt: "purple.100/purpleDeep.900",
+	disabled: "navy.300/grey.300",
 	error: "red.500/red.500",
-	negative: "red.150/red.900",
 	success: "green.500/green.700",
-	disabled: "navy.300/grey.300",
-	neutral: "navy.50/black.100"
+	rentals: "turquoise.100/turquoise.1200",
+	blockers: "navy.120/black.75"
+};
+const illustrations = {
+	primary: "navy.500/white",
+	secondary: "white/white",
+	acccent1: "purple.500/white",
+	accent2: "blue.500/white",
+	foregroundDark: "white/white"
 };
 var _theme = {
 	background: background,
 	text: text,
-	buttonBackground: buttonBackground,
-	buttonIcon: buttonIcon,
-	buttonLabel: buttonLabel,
 	icon: icon,
 	stroke: stroke,
-	fill: fill
+	buttonIcon: buttonIcon,
+	buttonLabel: buttonLabel,
+	buttonBackground: buttonBackground,
+	fill: fill,
+	illustrations: illustrations
 };
 
 exports.background = background;
@@ -270,6 +296,7 @@ exports.buttonLabel = buttonLabel;
 exports["default"] = _theme;
 exports.fill = fill;
 exports.icon = icon;
+exports.illustrations = illustrations;
 exports.stroke = stroke;
 exports.text = text;
 //# sourceMappingURL=theme.js.map

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/components/ContainedIcon/index.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import capitalize from '../utils/capitalize.js';
+import cx from 'classnames';
 
-function ContainedIcon({ icon, color = "base", }) {
-    return (React.createElement("div", { className: `cobalt-contained-icon cobalt-contained-icon--color${capitalize(color)}` }, icon));
+function ContainedIcon({ icon, color = "base", className, }) {
+    return (React.createElement("div", { className: cx(className, `cobalt-contained-icon cobalt-contained-icon--color${capitalize(color)}`) }, icon));
 }
 
 export { ContainedIcon };