@drivy/cobalt 1.5.0 → 2.0.0-beta.2

package/cjs/tokens/theme.js

@@ -2,344 +2,194 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const background = {
-	primary: "white/black.500",
-	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.1500",
-	success: "green.700/green.700",
-	successAlt: "green.300/green.1200",
-	connect: "newPurple.500/newPurple.200",
-	connectAlt: "turquoise.50/turquoise.900",
-	driver: "yellow.500/yellow.500",
-	owner: "navy.700/navy.700",
-	disabled: "navy.50/black.500",
-	neutral: "navy.100/black.50",
-	neutralAlt: "navy.50/black.100",
-	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.400",
-		hover: "navy.50/black.300"
-	},
-	accentInteractive: {
-		DEFAULT: "purple.500/purple.400",
-		hover: "purple.600/purple.700"
-	},
-	accentAltInteractive: {
-		DEFAULT: "purple.200/purple.1000",
-		hover: "purple.200/purple.900"
-	},
-	connectInteractive: {
-		DEFAULT: "newPurple.500/newPurple.200",
-		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/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.400",
-	successAlt: "green.900/green.300",
-	connect: "newPurple.500/newPurple.200",
-	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.120/black.50",
-	onAccent: "white/black.1000",
-	onRideshare: "white/white",
-	onError: "white/white",
-	onSuccess: "white/white",
-	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.400"
-	},
-	accentInteractive: {
-		DEFAULT: "purple.500/purple.400",
-		hover: "purple.700/purple.500"
-	},
-	accentAltInteractive: {
-		DEFAULT: "purple.700/purple.200",
-		hover: "purple.700/purple.400"
-	}
-};
-const icon = {
-	base: "navy.700/grey.100",
-	subdued: "navy.300/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.400",
-	successAlt: "green.900/green.300",
-	connect: "newPurple.500/newPurple.200",
-	connectAlt: "turquoise.900/turquoise.50",
-	driver: "navy.700/navy.700",
-	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/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.700/grey.100",
-		hover: "navy.900/grey.200"
-	},
-	subduedInteractive: {
-		DEFAULT: "navy.300/grey.300",
-		hover: "navy.500/grey.400"
-	},
-	accentInteractive: {
-		DEFAULT: "purple.500/purple.400",
-		hover: "purple.700/purple.500"
-	},
-	accentAltInteractive: {
-		DEFAULT: "purple.700/purple.200",
-		hover: "purple.700/purple.400"
-	}
-};
-const stroke = {
-	base: "navy.100/black.100",
-	subdued: "navy.50/black.100",
-	accent: "purple.500/purple.400",
-	accentAlt: "purple.600/purple.400",
-	success: "green.500/green.700",
-	successAlt: "green.500/green.700",
-	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.300/grey.500",
-	onError: "white/white",
-	onSuccess: "white/white",
-	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",
-	rideshare: "black.1000/white",
-	onBase: "white/black.600",
-	baseInteractive: {
-		DEFAULT: "navy.100/black.100",
-		hover: "navy.300/black.300",
-		press: "navy.500/black.500"
-	},
-	accentInteractive: {
-		DEFAULT: "purple.500/purple.400",
-		hover: "purple.700/purple.600",
-		press: "purple.900/purple.800"
-	},
-	strongInteractive: {
-		DEFAULT: "grey.300/grey.700",
-		hover: "grey.400/black.50",
-		press: "grey.500/black.100"
-	}
-};
-const buttonIcon = {
-	selected: "purple.500/grey.100",
-	primary: "white/black.1000",
-	secondary: "purple.500/purple.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/black.1000",
-		hover: "white/black.1000",
-		press: "white/black.1000"
-	},
-	secondaryInteractive: {
-		DEFAULT: "purple.500/purple.400",
-		hover: "purple.500/purple.300",
-		press: "purple.900/purple.900"
-	},
-	tertiaryInteractive: {
-		DEFAULT: "purple.500/white",
-		hover: "purple.500/white",
-		press: "purple.900/purple.1000"
-	},
-	destructiveInteractive: {
-		DEFAULT: "red.500/red.200",
-		hover: "red.500/red.200",
-		press: "red.500/red.200"
-	},
-	successAltInteractive: {
-		DEFAULT: "green.900/green.100",
-		hover: "green.900/green.100",
-		press: "green.900/green.100"
-	}
-};
-const buttonLabel = {
-	selected: "purple.500/grey.100",
-	primary: "white/black.1000",
-	secondary: "purple.500/purple.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/black.1000",
-		hover: "white/black.1000",
-		press: "white/black.1000"
-	},
-	secondaryInteractive: {
-		DEFAULT: "purple.500/purple.400",
-		hover: "purple.700/purple.300",
-		press: "purple.900/purple.900"
-	},
-	tertiaryInteractive: {
-		DEFAULT: "purple.500/white",
-		hover: "purple.700/white",
-		press: "purple.900/purple.1000"
-	},
-	destructiveInteractive: {
-		DEFAULT: "red.500/red.200",
-		hover: "red.500/red.200",
-		press: "red.500/red.200"
-	},
-	successAltInteractive: {
-		DEFAULT: "green.900/green.100",
-		hover: "green.900/green.100",
-		press: "green.900/green.100"
-	}
-};
-const buttonBackground = {
-	selected: "purple.100/purpleDeep.900",
-	primary: "purple.500/purple.400",
-	secondary: "white/black.100",
-	tertiary: "white/white",
-	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/purple.400",
-		hover: "purple.700/purple.800",
-		press: "purple.900/purple.1000"
-	},
-	secondaryInteractive: {
-		DEFAULT: "white/black.100",
-		hover: "white/black.500",
-		press: "white/black.500"
-	},
-	tertiaryInteractive: {
-		DEFAULT: "white/white",
-		hover: "white/black.500",
-		press: "white/black.500"
-	},
-	destructiveInteractive: {
-		DEFAULT: "red.100/red.900",
-		hover: "red.120/red.800",
-		press: "red.150/red.900"
-	},
-	successAltInteractive: {
-		DEFAULT: "green.100/green.1000",
-		hover: "green.300/green.900",
-		press: "green.400/green.1000"
-	}
-};
-const fill = {
-	base: "navy.500/navy.50",
-	accent: "purple.500/purple.400",
-	secondary: "yellow.500/yellow.400",
-	subdued: "navy.100/black.50",
-	neutral: "navy.50/black.100",
-	negative: "red.150/red.800",
-	accentAlt: "purple.100/purple.900",
-	disabled: "navy.300/grey.300",
-	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 = {
-	primary: "navy.500/white",
-	secondary: "white/white",
-	accent1: "purple.500/white",
-	accent2: "blue.500/white"
-};
+const surface = "white/black.1600";
+const surfaceBright = "white/black.1400";
+const surfaceContainer = "white/black.1100";
+const surfaceContainerVariant = "navy.100/black.800";
+const outline = "navy.200/black.1000";
+const outlineVariant = "navy.300/black.400";
+const onSurface = "navy.1100/grey.300";
+const onSurfaceVariant = "navy.600/grey.700";
+const onSurfaceContainerVariant = "grey.500/grey.1300";
+const disabled = "navy_alpha.5/grey_alpha.8";
+const onSurfaceDisabled = "navy_alpha.30/grey_alpha.15";
+const primary = "purple.1100/purple.600";
+const onPrimary = "white/black.1600";
+const primaryContainer = "purple.200/purple.1600";
+const onPrimaryContainer = "purple.1100/purple.200";
+const secondary = "violet.900/violet.1100";
+const onSecondary = "violet.100/violet.100";
+const secondaryContainer = "violet.100/violet.1400";
+const onSecondaryContainer = "violet.1500/violet.100";
+const onSecondaryContainerVariant = "violet.800/violet.100";
+const tertiary = "blue.900/blue.1100";
+const onTertiary = "white/blue.100";
+const outlineTertiary = "blue.1000/blue.800";
+const tertiaryContainer = "blue.200/blue.1300";
+const onTertiaryContainer = "violet.1600/blue.100";
+const onTertiaryContainerVariant = "blue.1000/blue.300";
+const success = "green.1000/green.600";
+const onSuccess = "green.100/black.1200";
+const successContainer = "green.200/green.1200";
+const onSuccessContainer = "green.1300/green.200";
+const error = "red.800/red.500";
+const onError = "white/black.1600";
+const errorContainer = "red.100/red.1400";
+const onErrorContainer = "red.1100/red.200";
+const warning = "yellow.800/yellow.600";
+const onWarning = "yellow.1500/black.1600";
+const warningContainer = "yellow.200/yellow.1600";
+const onWarningContainer = "yellow.1400/yellow.500";
+const connect = "purple.800/purple.500";
+const onConnect = "white/black.1600";
+const keyExchange = "violet.700/violet.500";
+const onKeyExchange = "white/black.1600";
+const seasonLowest = "green.200/green.300";
+const onSeasonLowest = "black.1600/black.1600";
+const seasonMedium = "green.600/green.700";
+const onSeasonMedium = "black.1600/black.1600";
+const seasonHigh = "green.1000/green.1100";
+const onSeasonHigh = "white/white";
+const seasonHighest = "green.1300/green.1400";
+const onSeasonHighest = "white/white";
+const business = "violet.1500/violet.1600";
+const businessVariant = "violet.1100/violet.800";
+const onBusiness = "white/white";
+const onBusinessVariant = "lime.500/lime.300";
+const businessContainer = "lime.300/lime.200";
+const onBusinessContainer = "violet.1600/violet.1300";
+const hover = "black_alpha.4/white_alpha.15";
+const focus = "black_alpha.8/white_alpha.20";
+const press = "black_alpha.8/white_alpha.20";
+const drag = "black_alpha.16/white_alpha.20";
+const scrim = "black_alpha.26/black_alpha.26";
+const surfaceFixed = "white/white";
 var _theme = {
-	background: background,
-	text: text,
-	icon: icon,
-	stroke: stroke,
-	buttonIcon: buttonIcon,
-	buttonLabel: buttonLabel,
-	buttonBackground: buttonBackground,
-	fill: fill,
-	illustrations: illustrations
+	surface: surface,
+	surfaceBright: surfaceBright,
+	surfaceContainer: surfaceContainer,
+	surfaceContainerVariant: surfaceContainerVariant,
+	outline: outline,
+	outlineVariant: outlineVariant,
+	onSurface: onSurface,
+	onSurfaceVariant: onSurfaceVariant,
+	onSurfaceContainerVariant: onSurfaceContainerVariant,
+	disabled: disabled,
+	onSurfaceDisabled: onSurfaceDisabled,
+	primary: primary,
+	onPrimary: onPrimary,
+	primaryContainer: primaryContainer,
+	onPrimaryContainer: onPrimaryContainer,
+	secondary: secondary,
+	onSecondary: onSecondary,
+	secondaryContainer: secondaryContainer,
+	onSecondaryContainer: onSecondaryContainer,
+	onSecondaryContainerVariant: onSecondaryContainerVariant,
+	tertiary: tertiary,
+	onTertiary: onTertiary,
+	outlineTertiary: outlineTertiary,
+	tertiaryContainer: tertiaryContainer,
+	onTertiaryContainer: onTertiaryContainer,
+	onTertiaryContainerVariant: onTertiaryContainerVariant,
+	success: success,
+	onSuccess: onSuccess,
+	successContainer: successContainer,
+	onSuccessContainer: onSuccessContainer,
+	error: error,
+	onError: onError,
+	errorContainer: errorContainer,
+	onErrorContainer: onErrorContainer,
+	warning: warning,
+	onWarning: onWarning,
+	warningContainer: warningContainer,
+	onWarningContainer: onWarningContainer,
+	connect: connect,
+	onConnect: onConnect,
+	keyExchange: keyExchange,
+	onKeyExchange: onKeyExchange,
+	seasonLowest: seasonLowest,
+	onSeasonLowest: onSeasonLowest,
+	seasonMedium: seasonMedium,
+	onSeasonMedium: onSeasonMedium,
+	seasonHigh: seasonHigh,
+	onSeasonHigh: onSeasonHigh,
+	seasonHighest: seasonHighest,
+	onSeasonHighest: onSeasonHighest,
+	business: business,
+	businessVariant: businessVariant,
+	onBusiness: onBusiness,
+	onBusinessVariant: onBusinessVariant,
+	businessContainer: businessContainer,
+	onBusinessContainer: onBusinessContainer,
+	hover: hover,
+	focus: focus,
+	press: press,
+	drag: drag,
+	scrim: scrim,
+	surfaceFixed: surfaceFixed
 };
 
-exports.background = background;
-exports.buttonBackground = buttonBackground;
-exports.buttonIcon = buttonIcon;
-exports.buttonLabel = buttonLabel;
+exports.business = business;
+exports.businessContainer = businessContainer;
+exports.businessVariant = businessVariant;
+exports.connect = connect;
 exports["default"] = _theme;
-exports.fill = fill;
-exports.icon = icon;
-exports.illustrations = illustrations;
-exports.stroke = stroke;
-exports.text = text;
+exports.disabled = disabled;
+exports.drag = drag;
+exports.error = error;
+exports.errorContainer = errorContainer;
+exports.focus = focus;
+exports.hover = hover;
+exports.keyExchange = keyExchange;
+exports.onBusiness = onBusiness;
+exports.onBusinessContainer = onBusinessContainer;
+exports.onBusinessVariant = onBusinessVariant;
+exports.onConnect = onConnect;
+exports.onError = onError;
+exports.onErrorContainer = onErrorContainer;
+exports.onKeyExchange = onKeyExchange;
+exports.onPrimary = onPrimary;
+exports.onPrimaryContainer = onPrimaryContainer;
+exports.onSeasonHigh = onSeasonHigh;
+exports.onSeasonHighest = onSeasonHighest;
+exports.onSeasonLowest = onSeasonLowest;
+exports.onSeasonMedium = onSeasonMedium;
+exports.onSecondary = onSecondary;
+exports.onSecondaryContainer = onSecondaryContainer;
+exports.onSecondaryContainerVariant = onSecondaryContainerVariant;
+exports.onSuccess = onSuccess;
+exports.onSuccessContainer = onSuccessContainer;
+exports.onSurface = onSurface;
+exports.onSurfaceContainerVariant = onSurfaceContainerVariant;
+exports.onSurfaceDisabled = onSurfaceDisabled;
+exports.onSurfaceVariant = onSurfaceVariant;
+exports.onTertiary = onTertiary;
+exports.onTertiaryContainer = onTertiaryContainer;
+exports.onTertiaryContainerVariant = onTertiaryContainerVariant;
+exports.onWarning = onWarning;
+exports.onWarningContainer = onWarningContainer;
+exports.outline = outline;
+exports.outlineTertiary = outlineTertiary;
+exports.outlineVariant = outlineVariant;
+exports.press = press;
+exports.primary = primary;
+exports.primaryContainer = primaryContainer;
+exports.scrim = scrim;
+exports.seasonHigh = seasonHigh;
+exports.seasonHighest = seasonHighest;
+exports.seasonLowest = seasonLowest;
+exports.seasonMedium = seasonMedium;
+exports.secondary = secondary;
+exports.secondaryContainer = secondaryContainer;
+exports.success = success;
+exports.successContainer = successContainer;
+exports.surface = surface;
+exports.surfaceBright = surfaceBright;
+exports.surfaceContainer = surfaceContainer;
+exports.surfaceContainerVariant = surfaceContainerVariant;
+exports.surfaceFixed = surfaceFixed;
+exports.tertiary = tertiary;
+exports.tertiaryContainer = tertiaryContainer;
+exports.warning = warning;
+exports.warningContainer = warningContainer;
 //# 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/Accordion/ToggleIcon.js

@@ -4,7 +4,7 @@ import '../Icon/index.js';
 import ChevronDownIcon from '../Icon/__generated__/ChevronDownIcon.js';
 
 const ToggleIcon = ({ isOpen, useChevron }) => {
-    return useChevron ? (React.createElement(ChevronDownIcon, { color: "subdued", size: 24, className: cx("cobalt-accordion__header-chevron-icon", {
+    return useChevron ? (React.createElement(ChevronDownIcon, { color: "onSurfaceVariant", size: 24, className: cx("cobalt-accordion__header-chevron-icon", {
             "cobalt-accordion__header-chevron-icon--opened": isOpen,
         }) })) : (React.createElement("div", { className: cx("cobalt-accordion__header-icon", {
             "cobalt-accordion__header-icon--opened": isOpen,

package/components/Accordion/ToggleIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleIcon.js","sources":["../../../src/components/Accordion/ToggleIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport { ChevronDownIcon } from \"../Icon\"\n\ntype ToggleIconPropsType = { isOpen: boolean; useChevron: boolean }\n\nconst ToggleIcon = ({ isOpen, useChevron }: ToggleIconPropsType) => {\n  return useChevron ? (\n    <ChevronDownIcon\n      color=\"subdued\"\n      size={24}\n      className={cx(\"cobalt-accordion__header-chevron-icon\", {\n        \"cobalt-accordion__header-chevron-icon--opened\": isOpen,\n      })}\n    />\n  ) : (\n    <div\n      className={cx(\"cobalt-accordion__header-icon\", {\n        \"cobalt-accordion__header-icon--opened\": isOpen,\n      })}\n    />\n  )\n}\n\nexport default ToggleIcon\n"],"names":[],"mappings":";;;;;AAMM,MAAA,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,UAAU,EAAuB,KAAI;IACjE,OAAO,UAAU,IACf,KAAC,CAAA,aAAA,CAAA,eAAe,IACd,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,EAAE,EACR,SAAS,EAAE,EAAE,CAAC,uCAAuC,EAAE;AACrD,YAAA,+CAA+C,EAAE,MAAM;AACxD,SAAA,CAAC,EACF,CAAA,KAEF,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE;AAC7C,YAAA,uCAAuC,EAAE,MAAM;SAChD,CAAC,EAAA,CACF,CACH,CAAA;AACH;;;;"}
+{"version":3,"file":"ToggleIcon.js","sources":["../../../src/components/Accordion/ToggleIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport { ChevronDownIcon } from \"../Icon\"\n\ntype ToggleIconPropsType = { isOpen: boolean; useChevron: boolean }\n\nconst ToggleIcon = ({ isOpen, useChevron }: ToggleIconPropsType) => {\n  return useChevron ? (\n    <ChevronDownIcon\n      color=\"onSurfaceVariant\"\n      size={24}\n      className={cx(\"cobalt-accordion__header-chevron-icon\", {\n        \"cobalt-accordion__header-chevron-icon--opened\": isOpen,\n      })}\n    />\n  ) : (\n    <div\n      className={cx(\"cobalt-accordion__header-icon\", {\n        \"cobalt-accordion__header-icon--opened\": isOpen,\n      })}\n    />\n  )\n}\n\nexport default ToggleIcon\n"],"names":[],"mappings":";;;;;AAMM,MAAA,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,UAAU,EAAuB,KAAI;IACjE,OAAO,UAAU,IACf,KAAC,CAAA,aAAA,CAAA,eAAe,IACd,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAE,EAAE,EACR,SAAS,EAAE,EAAE,CAAC,uCAAuC,EAAE;AACrD,YAAA,+CAA+C,EAAE,MAAM;AACxD,SAAA,CAAC,EACF,CAAA,KAEF,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE;AAC7C,YAAA,uCAAuC,EAAE,MAAM;SAChD,CAAC,EAAA,CACF,CACH,CAAA;AACH;;;;"}

package/components/Alerter/index.js

@@ -34,7 +34,7 @@ const STATUS_ICONS_MAP = {
     error: ContextualWarningCircleFilledIcon,
 };
 const STATUS_ICON_COLOR_MAP = {
-    info: "infoAlt",
+    info: "tertiary",
     success: "success",
     error: "error",
 };

package/components/Alerter/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Alerter/index.tsx"],"sourcesContent":["import React, { type PropsWithChildren } from \"react\"\nimport { Toast, Toaster, createToaster, Portal } from \"@ark-ui/react\"\nimport {\n  InfoFilledIcon,\n  CheckCircleIcon,\n  ContextualWarningCircleFilledIcon,\n  IconColorsType,\n} from \"../Icon\"\nimport cx from \"classnames\"\n\nconst DEFAULT_TIMEOUT = 3000\nconst MAX_TEXT_TIMEOUT = 9000\n\nexport type AlertStatus = \"info\" | \"success\" | \"error\"\n\nconst computeTimeDurationFromText = (\n  content: string | React.ReactNode\n): number => {\n  if (typeof content !== \"string\") return DEFAULT_TIMEOUT\n  return Math.min(\n    Math.max(DEFAULT_TIMEOUT, content.length * 90),\n    MAX_TEXT_TIMEOUT\n  )\n}\n\nconst toaster = createToaster({\n  overlap: true,\n  gap: 12,\n  placement: \"bottom\",\n  max: 12,\n})\n\nexport const useAlerts = () => {\n  return {\n    sendAlert: ({\n      message,\n      status,\n      duration,\n    }: {\n      message: React.ReactNode\n      status: AlertStatus\n      duration?: number\n    }) =>\n      toaster.create({\n        description: message,\n        type: status,\n        duration: duration ?? computeTimeDurationFromText(message),\n      }),\n  }\n}\n\nconst STATUS_ICONS_MAP: { [k in AlertStatus]: typeof InfoFilledIcon } = {\n  info: InfoFilledIcon,\n  success: CheckCircleIcon,\n  error: ContextualWarningCircleFilledIcon,\n}\n\nconst STATUS_ICON_COLOR_MAP: { [k in AlertStatus]: IconColorsType } = {\n  info: \"infoAlt\",\n  success: \"success\",\n  error: \"error\",\n}\n\nconst Alerter = ({ children }: PropsWithChildren) => {\n  return (\n    <>\n      {children}\n      <Portal>\n        <Toaster toaster={toaster} className=\"cobalt-alerter\">\n          {(toast) => {\n            const status = toast.type as AlertStatus\n            const IconComp = STATUS_ICONS_MAP[status]\n            return (\n              <Toast.Root className={cx(\"cobalt-alert\")} key={toast.id}>\n                <div className=\"cobalt-alert__wrapper\">\n                  <IconComp size={20} color={STATUS_ICON_COLOR_MAP[status]} />\n                  <Toast.Description>{toast.description}</Toast.Description>\n                </div>\n              </Toast.Root>\n            )\n          }}\n        </Toaster>\n      </Portal>\n    </>\n  )\n}\n\nexport default Alerter\n"],"names":[],"mappings":";;;;;;;;AAUA,MAAM,eAAe,GAAG,IAAI,CAAA;AAC5B,MAAM,gBAAgB,GAAG,IAAI,CAAA;AAI7B,MAAM,2BAA2B,GAAG,CAClC,OAAiC,KACvB;IACV,IAAI,OAAO,OAAO,KAAK,QAAQ;AAAE,QAAA,OAAO,eAAe,CAAA;AACvD,IAAA,OAAO,IAAI,CAAC,GAAG,CACb,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,OAAO,CAAC,MAAM,GAAG,EAAE,CAAC,EAC9C,gBAAgB,CACjB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,aAAa,CAAC;AAC5B,IAAA,OAAO,EAAE,IAAI;AACb,IAAA,GAAG,EAAE,EAAE;AACP,IAAA,SAAS,EAAE,QAAQ;AACnB,IAAA,GAAG,EAAE,EAAE;AACR,CAAA,CAAC,CAAA;AAEK,MAAM,SAAS,GAAG,MAAK;IAC5B,OAAO;AACL,QAAA,SAAS,EAAE,CAAC,EACV,OAAO,EACP,MAAM,EACN,QAAQ,GAKT,KACC,OAAO,CAAC,MAAM,CAAC;AACb,YAAA,WAAW,EAAE,OAAO;AACpB,YAAA,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,KAAA,CAAA,GAAR,QAAQ,GAAI,2BAA2B,CAAC,OAAO,CAAC;SAC3D,CAAC;KACL,CAAA;AACH,EAAC;AAED,MAAM,gBAAgB,GAAkD;AACtE,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,OAAO,EAAE,eAAe;AACxB,IAAA,KAAK,EAAE,iCAAiC;CACzC,CAAA;AAED,MAAM,qBAAqB,GAA2C;AACpE,IAAA,IAAI,EAAE,SAAS;AACf,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,KAAK,EAAE,OAAO;CACf,CAAA;AAED,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAqB,KAAI;AAClD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;QACG,QAAQ;AACT,QAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA;AACL,YAAA,KAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,gBAAgB,EAAA,EAClD,CAAC,KAAK,KAAI;AACT,gBAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAmB,CAAA;AACxC,gBAAA,MAAM,QAAQ,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAA;AACzC,gBAAA,QACE,KAAC,CAAA,aAAA,CAAA,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,EAAE,EAAA;oBACtD,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA;AACpC,wBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,qBAAqB,CAAC,MAAM,CAAC,EAAI,CAAA;wBAC5D,KAAC,CAAA,aAAA,CAAA,KAAK,CAAC,WAAW,EAAE,IAAA,EAAA,KAAK,CAAC,WAAW,CAAqB,CACtD,CACK,EACd;AACH,aAAC,CACO,CACH,CACR,EACJ;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Alerter/index.tsx"],"sourcesContent":["import React, { type PropsWithChildren } from \"react\"\nimport { Toast, Toaster, createToaster, Portal } from \"@ark-ui/react\"\nimport {\n  InfoFilledIcon,\n  CheckCircleIcon,\n  ContextualWarningCircleFilledIcon,\n  IconColorsType,\n} from \"../Icon\"\nimport cx from \"classnames\"\n\nconst DEFAULT_TIMEOUT = 3000\nconst MAX_TEXT_TIMEOUT = 9000\n\nexport type AlertStatus = \"info\" | \"success\" | \"error\"\n\nconst computeTimeDurationFromText = (\n  content: string | React.ReactNode\n): number => {\n  if (typeof content !== \"string\") return DEFAULT_TIMEOUT\n  return Math.min(\n    Math.max(DEFAULT_TIMEOUT, content.length * 90),\n    MAX_TEXT_TIMEOUT\n  )\n}\n\nconst toaster = createToaster({\n  overlap: true,\n  gap: 12,\n  placement: \"bottom\",\n  max: 12,\n})\n\nexport const useAlerts = () => {\n  return {\n    sendAlert: ({\n      message,\n      status,\n      duration,\n    }: {\n      message: React.ReactNode\n      status: AlertStatus\n      duration?: number\n    }) =>\n      toaster.create({\n        description: message,\n        type: status,\n        duration: duration ?? computeTimeDurationFromText(message),\n      }),\n  }\n}\n\nconst STATUS_ICONS_MAP: { [k in AlertStatus]: typeof InfoFilledIcon } = {\n  info: InfoFilledIcon,\n  success: CheckCircleIcon,\n  error: ContextualWarningCircleFilledIcon,\n}\n\nconst STATUS_ICON_COLOR_MAP: { [k in AlertStatus]: IconColorsType } = {\n  info: \"tertiary\",\n  success: \"success\",\n  error: \"error\",\n}\n\nconst Alerter = ({ children }: PropsWithChildren) => {\n  return (\n    <>\n      {children}\n      <Portal>\n        <Toaster toaster={toaster} className=\"cobalt-alerter\">\n          {(toast) => {\n            const status = toast.type as AlertStatus\n            const IconComp = STATUS_ICONS_MAP[status]\n            return (\n              <Toast.Root className={cx(\"cobalt-alert\")} key={toast.id}>\n                <div className=\"cobalt-alert__wrapper\">\n                  <IconComp size={20} color={STATUS_ICON_COLOR_MAP[status]} />\n                  <Toast.Description>{toast.description}</Toast.Description>\n                </div>\n              </Toast.Root>\n            )\n          }}\n        </Toaster>\n      </Portal>\n    </>\n  )\n}\n\nexport default Alerter\n"],"names":[],"mappings":";;;;;;;;AAUA,MAAM,eAAe,GAAG,IAAI,CAAA;AAC5B,MAAM,gBAAgB,GAAG,IAAI,CAAA;AAI7B,MAAM,2BAA2B,GAAG,CAClC,OAAiC,KACvB;IACV,IAAI,OAAO,OAAO,KAAK,QAAQ;AAAE,QAAA,OAAO,eAAe,CAAA;AACvD,IAAA,OAAO,IAAI,CAAC,GAAG,CACb,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,OAAO,CAAC,MAAM,GAAG,EAAE,CAAC,EAC9C,gBAAgB,CACjB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,aAAa,CAAC;AAC5B,IAAA,OAAO,EAAE,IAAI;AACb,IAAA,GAAG,EAAE,EAAE;AACP,IAAA,SAAS,EAAE,QAAQ;AACnB,IAAA,GAAG,EAAE,EAAE;AACR,CAAA,CAAC,CAAA;AAEK,MAAM,SAAS,GAAG,MAAK;IAC5B,OAAO;AACL,QAAA,SAAS,EAAE,CAAC,EACV,OAAO,EACP,MAAM,EACN,QAAQ,GAKT,KACC,OAAO,CAAC,MAAM,CAAC;AACb,YAAA,WAAW,EAAE,OAAO;AACpB,YAAA,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,KAAA,CAAA,GAAR,QAAQ,GAAI,2BAA2B,CAAC,OAAO,CAAC;SAC3D,CAAC;KACL,CAAA;AACH,EAAC;AAED,MAAM,gBAAgB,GAAkD;AACtE,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,OAAO,EAAE,eAAe;AACxB,IAAA,KAAK,EAAE,iCAAiC;CACzC,CAAA;AAED,MAAM,qBAAqB,GAA2C;AACpE,IAAA,IAAI,EAAE,UAAU;AAChB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,KAAK,EAAE,OAAO;CACf,CAAA;AAED,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAqB,KAAI;AAClD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;QACG,QAAQ;AACT,QAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA;AACL,YAAA,KAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,gBAAgB,EAAA,EAClD,CAAC,KAAK,KAAI;AACT,gBAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAmB,CAAA;AACxC,gBAAA,MAAM,QAAQ,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAA;AACzC,gBAAA,QACE,KAAC,CAAA,aAAA,CAAA,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,EAAE,EAAA;oBACtD,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA;AACpC,wBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,qBAAqB,CAAC,MAAM,CAAC,EAAI,CAAA;wBAC5D,KAAC,CAAA,aAAA,CAAA,KAAK,CAAC,WAAW,EAAE,IAAA,EAAA,KAAK,CAAC,WAAW,CAAqB,CACtD,CACK,EACd;AACH,aAAC,CACO,CACH,CACR,EACJ;AACH;;;;"}

package/components/Calendar/CalendarRangePicker/DayTooltip.js

@@ -8,7 +8,7 @@ const DayTooltip = (props) => {
         interactive: true,
         interactiveBorder: 10,
         placement: "top",
-        theme: "light range-picker",
+        theme: "cobalt-popover range-picker",
         delay: [0, 0],
         duration: [0, 0],
         maxWidth: 500,

package/components/Calendar/CalendarRangePicker/DayTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"DayTooltip.js","sources":["../../../../src/components/Calendar/CalendarRangePicker/DayTooltip.tsx"],"sourcesContent":["import React from \"react\"\nimport Tippy, { TippyProps } from \"@tippyjs/react\"\nimport { sticky } from \"tippy.js\"\n\nconst DayTooltip = (props: TippyProps) => {\n  return (\n    <Tippy\n      {...{\n        animation: \"fade\",\n        arrow: true,\n        interactive: true,\n        interactiveBorder: 10,\n        placement: \"top\",\n        theme: \"light range-picker\",\n        delay: [0, 0],\n        duration: [0, 0],\n        maxWidth: 500,\n        offset: [0, 8],\n        sticky: true,\n        plugins: [sticky],\n        appendTo: document.body,\n        ...props,\n      }}\n    />\n  )\n}\n\nexport default DayTooltip\n"],"names":[],"mappings":";;;;AAIA,MAAM,UAAU,GAAG,CAAC,KAAiB,KAAI;AACvC,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,KAAK,EAEF,EAAA,SAAS,EAAE,MAAM;AACjB,QAAA,KAAK,EAAE,IAAI;AACX,QAAA,WAAW,EAAE,IAAI;AACjB,QAAA,iBAAiB,EAAE,EAAE;AACrB,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,KAAK,EAAE,oBAAoB;AAC3B,QAAA,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACb,QAAA,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AAChB,QAAA,QAAQ,EAAE,GAAG;AACb,QAAA,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACd,QAAA,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,CAAC,MAAM,CAAC;QACjB,QAAQ,EAAE,QAAQ,CAAC,IAAI;QACvB,GAAG,KAAK,EAEV,CAAA,EACH;AACH;;;;"}
+{"version":3,"file":"DayTooltip.js","sources":["../../../../src/components/Calendar/CalendarRangePicker/DayTooltip.tsx"],"sourcesContent":["import React from \"react\"\nimport Tippy, { TippyProps } from \"@tippyjs/react\"\nimport { sticky } from \"tippy.js\"\n\nconst DayTooltip = (props: TippyProps) => {\n  return (\n    <Tippy\n      {...{\n        animation: \"fade\",\n        arrow: true,\n        interactive: true,\n        interactiveBorder: 10,\n        placement: \"top\",\n        theme: \"cobalt-popover range-picker\",\n        delay: [0, 0],\n        duration: [0, 0],\n        maxWidth: 500,\n        offset: [0, 8],\n        sticky: true,\n        plugins: [sticky],\n        appendTo: document.body,\n        ...props,\n      }}\n    />\n  )\n}\n\nexport default DayTooltip\n"],"names":[],"mappings":";;;;AAIA,MAAM,UAAU,GAAG,CAAC,KAAiB,KAAI;AACvC,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,KAAK,EAEF,EAAA,SAAS,EAAE,MAAM;AACjB,QAAA,KAAK,EAAE,IAAI;AACX,QAAA,WAAW,EAAE,IAAI;AACjB,QAAA,iBAAiB,EAAE,EAAE;AACrB,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,KAAK,EAAE,6BAA6B;AACpC,QAAA,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACb,QAAA,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AAChB,QAAA,QAAQ,EAAE,GAAG;AACb,QAAA,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACd,QAAA,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,CAAC,MAAM,CAAC;QACjB,QAAQ,EAAE,QAAQ,CAAC,IAAI;QACvB,GAAG,KAAK,EAEV,CAAA,EACH;AACH;;;;"}

package/components/Callout/index.js

@@ -11,7 +11,7 @@ const Callout = ({ title, children, status = "info", close, }) => (React.createE
     title && React.createElement("div", { className: "cobalt-Callout__Title" }, title),
     React.createElement("div", null, children),
     close && (React.createElement("button", { className: "cobalt-Callout__Close", onClick: close, type: "button" },
-        React.createElement(CloseIcon, { color: "subdued", size: 16, contained: true })))));
+        React.createElement(CloseIcon, { color: "onSurfaceVariant", size: 16, contained: true })))));
 
 export { Callout, Callout as default };
 //# sourceMappingURL=index.js.map

package/components/Callout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Callout/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport { CloseIcon } from \"../Icon\"\n\nexport interface CalloutProps {\n  children: React.ReactNode\n  title?: string\n  status: \"info\" | \"error\" | \"success\"\n  close?: () => void\n}\n\nexport const Callout = ({\n  title,\n  children,\n  status = \"info\",\n  close,\n}: CalloutProps) => (\n  <div\n    className={cx(\"cobalt-Callout\", {\n      \"cobalt-Callout--info\": status === \"info\",\n      \"cobalt-Callout--error\": status === \"error\",\n      \"cobalt-Callout--success\": status === \"success\",\n    })}\n  >\n    {title && <div className=\"cobalt-Callout__Title\">{title}</div>}\n    <div>{children}</div>\n    {close && (\n      <button className=\"cobalt-Callout__Close\" onClick={close} type=\"button\">\n        <CloseIcon color=\"subdued\" size={16} contained />\n      </button>\n    )}\n  </div>\n)\n\nexport default Callout\n"],"names":[],"mappings":";;;;;AAWa,MAAA,OAAO,GAAG,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,MAAM,GAAG,MAAM,EACf,KAAK,GACQ,MACb,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE;QAC9B,sBAAsB,EAAE,MAAM,KAAK,MAAM;QACzC,uBAAuB,EAAE,MAAM,KAAK,OAAO;QAC3C,yBAAyB,EAAE,MAAM,KAAK,SAAS;KAChD,CAAC,EAAA;AAED,IAAA,KAAK,IAAI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA,EAAE,KAAK,CAAO;AAC9D,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAM,QAAQ,CAAO;AACpB,IAAA,KAAK,KACJ,KAAQ,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAA;AACrE,QAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EAAC,EAAA,KAAK,EAAC,SAAS,EAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAG,IAAA,EAAA,CAAA,CAC1C,CACV,CACG;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Callout/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport { CloseIcon } from \"../Icon\"\n\nexport interface CalloutProps {\n  children: React.ReactNode\n  title?: string\n  status: \"info\" | \"error\" | \"success\"\n  close?: () => void\n}\n\nexport const Callout = ({\n  title,\n  children,\n  status = \"info\",\n  close,\n}: CalloutProps) => (\n  <div\n    className={cx(\"cobalt-Callout\", {\n      \"cobalt-Callout--info\": status === \"info\",\n      \"cobalt-Callout--error\": status === \"error\",\n      \"cobalt-Callout--success\": status === \"success\",\n    })}\n  >\n    {title && <div className=\"cobalt-Callout__Title\">{title}</div>}\n    <div>{children}</div>\n    {close && (\n      <button className=\"cobalt-Callout__Close\" onClick={close} type=\"button\">\n        <CloseIcon color=\"onSurfaceVariant\" size={16} contained />\n      </button>\n    )}\n  </div>\n)\n\nexport default Callout\n"],"names":[],"mappings":";;;;;AAWa,MAAA,OAAO,GAAG,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,MAAM,GAAG,MAAM,EACf,KAAK,GACQ,MACb,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE;QAC9B,sBAAsB,EAAE,MAAM,KAAK,MAAM;QACzC,uBAAuB,EAAE,MAAM,KAAK,OAAO;QAC3C,yBAAyB,EAAE,MAAM,KAAK,SAAS;KAChD,CAAC,EAAA;AAED,IAAA,KAAK,IAAI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA,EAAE,KAAK,CAAO;AAC9D,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAM,QAAQ,CAAO;AACpB,IAAA,KAAK,KACJ,KAAQ,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAA;AACrE,QAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EAAC,EAAA,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAG,IAAA,EAAA,CAAA,CACnD,CACV,CACG;;;;"}

package/components/ContainedIcon/index.js

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