@drivy/cobalt 0.16.2 → 0.18.1

package/cjs/tokens/colors.js

@@ -31,6 +31,8 @@ const green = {
 	dark: "#00a873"
 };
 const blue = "#2ea2ea";
+const deprecatedBlueGhost = "#2ea2ea0f";
+const deprecatedDriver = "#ffd988";
 var _colors = {
 	white: white,
 	grey: grey,
@@ -42,13 +44,17 @@ var _colors = {
 	amber: amber,
 	red: red,
 	green: green,
-	blue: blue
+	blue: blue,
+	deprecatedBlueGhost: deprecatedBlueGhost,
+	deprecatedDriver: deprecatedDriver
 };
 
 exports.amber = amber;
 exports.blue = blue;
 exports.coral = coral;
 exports["default"] = _colors;
+exports.deprecatedBlueGhost = deprecatedBlueGhost;
+exports.deprecatedDriver = deprecatedDriver;
 exports.graphite = graphite;
 exports.green = green;
 exports.grey = grey;

package/cjs/tokens/colors.js.map

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

package/cjs/tokens/icons.js

@@ -194,6 +194,7 @@ const icons = {
 	pencil: "pencil.svg",
 	peopleUser: "people-user.svg",
 	performance: "performance.svg",
+	phoneLink: "phone-link.svg",
 	phone: "phone.svg",
 	photos: "photos.svg",
 	pig: "pig.svg",

package/cjs/tokens/icons.js.map

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

package/cjs/tokens/index.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var breakpoints$1 = require('./breakpoints.js');
 var colors$1 = require('./colors.js');
+var palette$1 = require('./palette.js');
+var theme$1 = require('./theme.js');
 var countries$1 = require('./countries.js');
 var icons$1 = require('./icons.js');
 var zIndexes$1 = require('./zIndexes.js');
@@ -13,11 +15,15 @@ const breakpoints = breakpoints$1["default"];
 const colors = colors$1["default"];
 const countries = countries$1["default"];
 const icons = icons$1["default"];
-const zIndexes = zIndexes$1["default"];
+const zIndexes = zIndexes$1["default"];
+const palette = palette$1["default"];
+const theme = theme$1["default"];
 
 exports.breakpoints = breakpoints;
 exports.colors = colors;
 exports.countries = countries;
 exports.icons = icons;
+exports.palette = palette;
+exports.theme = theme;
 exports.zIndexes = zIndexes;
 //# sourceMappingURL=index.js.map

package/cjs/tokens/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/tokens/index.ts"],"sourcesContent":["// For now we can't re-export json using TS and JSON import has no default\nimport _breakpoints from \"./breakpoints.json\"\nimport _colors from \"./colors.json\"\nimport _countries from \"./countries.json\"\nimport _icons from \"./icons.json\"\nimport _zIndexes from \"./zIndexes.json\"\n\nexport const breakpoints = _breakpoints\nexport const colors = _colors\nexport const countries = _countries\nexport const icons = _icons\nexport const zIndexes = _zIndexes\n"],"names":["_breakpoints","_colors","_countries","_icons","_zIndexes"],"mappings":";;;;;;;;;;AAAA;AAOO,MAAM,WAAW,GAAGA,yBAAY;AAChC,MAAM,MAAM,GAAGC,oBAAO;AACtB,MAAM,SAAS,GAAGC,uBAAU;AAC5B,MAAM,KAAK,GAAGC,mBAAM;AACpB,MAAM,QAAQ,GAAGC;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/tokens/index.ts"],"sourcesContent":["// For now we can't re-export json using TS and JSON import has no default\nimport _breakpoints from \"./breakpoints.json\"\nimport _colors from \"./colors.json\"\nimport _palette from \"./palette.json\"\nimport _theme from \"./theme.json\"\nimport _countries from \"./countries.json\"\nimport _icons from \"./icons.json\"\nimport _zIndexes from \"./zIndexes.json\"\n\nexport const breakpoints = _breakpoints\nexport const colors = _colors\nexport const countries = _countries\nexport const icons = _icons\nexport const zIndexes = _zIndexes\nexport const palette = _palette\nexport const theme = _theme\n"],"names":["_breakpoints","_colors","_countries","_icons","_zIndexes","_palette","_theme"],"mappings":";;;;;;;;;;;;AAAA;AASO,MAAM,WAAW,GAAGA,yBAAY;AAChC,MAAM,MAAM,GAAGC,oBAAO;AACtB,MAAM,SAAS,GAAGC,uBAAU;AAC5B,MAAM,KAAK,GAAGC,mBAAM;AACpB,MAAM,QAAQ,GAAGC,sBAAS;AAC1B,MAAM,OAAO,GAAGC,qBAAQ;AACxB,MAAM,KAAK,GAAGC;;;;;;;;;;"}

package/cjs/tokens/palette.js

@@ -0,0 +1,108 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const black = {
+	"50": "#544F53",
+	"100": "#363036",
+	"300": "#282127",
+	"500": "#191218"
+};
+const grey = {
+	"100": "#E3E2E3",
+	"300": "#A9A6A9"
+};
+const green = {
+	"100": "#CDEBCB",
+	"120": "#BFE5BD",
+	"150": "#B1E0AE",
+	"500": "#5CBF54",
+	"700": "#479D3E",
+	"900": "#2F6D1C",
+	"1000": "#15310D"
+};
+const navy = {
+	"50": "#F1F1F4",
+	"100": "#E3E2E8",
+	"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 purple = {
+	"100": "#F6E5F5",
+	"300": "#CA6BC3",
+	"400": "#C04FB8",
+	"500": "#B01AA7",
+	"700": "#8D1586",
+	"900": "#5F1159"
+};
+const red = {
+	"100": "#FDEDED",
+	"120": "#FBDADA",
+	"150": "#F9C8C8",
+	"300": "#E38C8C",
+	"400": "#ED4545",
+	"500": "#C71414",
+	"700": "#AF1212",
+	"900": "#3F2424"
+};
+const turquoise = {
+	"500": "#5ECBDD",
+	"700": "#53B3C2"
+};
+const white = "#fff";
+const yellow = {
+	"100": "#FFEED1",
+	"300": "#FFDDA3",
+	"500": "#FFC766",
+	"700": "#C59548",
+	"900": "#75592D",
+	"1000": "#3B2E17"
+};
+var _palette = {
+	black: black,
+	grey: grey,
+	green: green,
+	navy: navy,
+	orange: orange,
+	purpleDeep: purpleDeep,
+	purpleLight: purpleLight,
+	purple: purple,
+	red: red,
+	turquoise: turquoise,
+	white: white,
+	yellow: yellow
+};
+
+exports.black = black;
+exports["default"] = _palette;
+exports.green = green;
+exports.grey = grey;
+exports.navy = navy;
+exports.orange = orange;
+exports.purple = purple;
+exports.purpleDeep = purpleDeep;
+exports.purpleLight = purpleLight;
+exports.red = red;
+exports.turquoise = turquoise;
+exports.white = white;
+exports.yellow = yellow;
+//# sourceMappingURL=palette.js.map

package/cjs/tokens/palette.js.map

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

package/cjs/tokens/theme.js

@@ -0,0 +1,244 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const background = {
+	accent: "purple/purple.500/purpleDeep.400",
+	accentInteractive: {
+		DEFAULT: "purple/purple.500/purpleDeep.400",
+		hover: "purple/purple.700/purpleDeep.400"
+	},
+	accentAlt: "indigo/purple.100/purpleDeep.900",
+	accentAltInteractive: {
+		DEFAULT: "indigo/purple.100/purpleDeep.900",
+		hover: "indigo/purpleLight.100/purpleDeep.900"
+	},
+	connect: "turquoise/turquoise.500/turquoise.500",
+	connectInteractive: {
+		DEFAULT: "turquoise/turquoise.500/turquoise.500",
+		hover: "turquoise/turquoise.700/turquoise.500"
+	},
+	driver: "deprecatedDriver/yellow.500/yellow.500",
+	error: "red/red.500/red.500",
+	errorInteractive: {
+		DEFAULT: "red/red.500/red.500",
+		hover: "red/red.700/red.500"
+	},
+	errorAlt: "graphite/red.100/red.900",
+	info: "grey.lighter/yellow.100/yellow.1000",
+	neutral: "grey.light/navy.100/black.50",
+	neutralAlt: "grey.lighter/navy.50/black.100",
+	owner: "indigo.dark/navy.700/navy.700",
+	primary: "grey.lighter/white/black.500",
+	secondary: "white/white/black.300",
+	secondaryInteractive: {
+		DEFAULT: "white/white/black.300",
+		hover: "grey.lighter/navy.50/black.300"
+	},
+	success: "green/green.700/green.700",
+	successAlt: "graphite/green.100/green.1000"
+};
+const buttonBackground = {
+	selected: "indigo/purple.100/purpleDeep.900",
+	destructiveInteractive: {
+		DEFAULT: "red/red.100/red.900",
+		hover: "red/red.120/red.900",
+		press: "red/red.150/red.900"
+	},
+	disabled: "grey.lighter/navy.100/black.50",
+	primaryInteractive: {
+		DEFAULT: "purple/purple.500/purpleDeep.500",
+		hover: "indigo/purple.700/purpleDeep.500",
+		press: "indigo.dark/purple.900/purpleDeep.500"
+	},
+	secondaryInteractive: {
+		DEFAULT: "white/white/black.500",
+		hover: "white/white/black.500",
+		press: "white/white/black.500"
+	},
+	success: "green/green.700/green.900",
+	successAltInteractive: {
+		DEFAULT: "green/green.100/green.1000",
+		hover: "green/green.120/green.1000",
+		press: "green/green.150/green.1000"
+	},
+	tertiaryInteractive: {
+		DEFAULT: "white/white/white",
+		hover: "white/white/white",
+		press: "white/white/white"
+	}
+};
+const buttonIcon = {
+	selected: "white/purple.500/grey.100",
+	destructiveInteractive: {
+		DEFAULT: "red/red.500/red.200",
+		hover: "red/red.500/red.200",
+		press: "red/red.500/red.200"
+	},
+	disabled: "graphite.light/navy.300/grey.300",
+	primaryInteractive: {
+		DEFAULT: "white/white/grey.100",
+		hover: "white/white/grey.100",
+		press: "white/white/grey.100"
+	},
+	secondaryInteractive: {
+		DEFAULT: "indigo/purple.500/purpleDeep.400",
+		hover: "indigo/purple.700/purpleDeep.400",
+		press: "indigo.dark/purple.900/purpleDeep.400"
+	},
+	success: "white/white/green.100",
+	successAltInteractive: {
+		DEFAULT: "white/green.900/green.100",
+		hover: "white/green.900/green.100",
+		press: "white/green.900/green.100"
+	},
+	tertiaryInteractive: {
+		DEFAULT: "blue/purple.500/purpleDeep.400",
+		hover: "blue/purple.700/purpleDeep.400",
+		press: "blue/purple.900/purpleDeep.400"
+	}
+};
+const buttonLabel = {
+	selected: "white/purple.500/grey.100",
+	destructiveInteractive: {
+		DEFAULT: "white/red.500/red.200",
+		hover: "white/red.500/red.200",
+		press: "white/red.500/red.200"
+	},
+	disabled: "graphite.light/navy.300/grey.300",
+	primaryInteractive: {
+		DEFAULT: "white/white/grey.100",
+		hover: "white/white/grey.100",
+		press: "white/white/grey.100"
+	},
+	secondaryInteractive: {
+		DEFAULT: "indigo/purple.500/purpleDeep.400",
+		hover: "indigo/purple.700/purpleDeep.400",
+		press: "indigo.dark/purple.900/purpleDeep.400"
+	},
+	success: "white/white/green.100",
+	successAltInteractive: {
+		DEFAULT: "white/green.900/green.100",
+		hover: "white/green.900/green.100",
+		press: "white/green.900/green.100"
+	},
+	tertiaryInteractive: {
+		DEFAULT: "blue/purple.500/purpleDeep.400",
+		hover: "blue/purple.700/purpleDeep.400",
+		press: "blue/purple.900/purpleDeep.400"
+	}
+};
+const fill = {
+	accent: "purple/purple.500/purpleDeep.400",
+	accentAlt: "purple/purple.100/purpleDeep.900",
+	disabled: "grey.dark/navy.300/grey.300",
+	secondary: "turquoise/yellow.500/yellow.500",
+	subdued: "grey.light/navy.100/black.50"
+};
+const icon = {
+	accent: "purple/purple.500/purpleDeep.400",
+	accentInteractive: {
+		DEFAULT: "purple/purple.500/purpleDeep.400",
+		hover: "indigo/purple.700//purpleDeep.400"
+	},
+	accentAlt: "white/purple.500/grey.100",
+	accentAltInteractive: {
+		DEFAULT: "white/purple.500/grey.100",
+		hover: "indigo/purple.700/grey.100"
+	},
+	base: "graphite/navy.500/grey.100",
+	baseInteractive: {
+		DEFAULT: "graphite/navy.500/grey.100",
+		hover: "graphite/navy.700/grey.100"
+	},
+	connect: "turquoise/turquoise.500/white",
+	driver: "graphite/navy.700//navy.700",
+	error: "red/red.500/red.400",
+	errorAlt: "red/red.500/red.200",
+	info: "graphite.light/yellow.900/yellow.300",
+	infoAlt: "turquoise/yellow.500/yellow.700",
+	inversed: "white/white/white",
+	owner: "white/white/white",
+	subdued: "graphite.light/navy.300/grey.300",
+	subduedInteractive: {
+		DEFAULT: "graphite.light/navy.300/grey.300",
+		hover: "graphite/navy.500/grey.300"
+	},
+	success: "green/green.700/green.700",
+	successAlt: "white/green.900/green.100",
+	warning: "coral/orange.500/orange.300"
+};
+const stroke = {
+	accent: "indigo/purple.500/purpleDeep.400",
+	accentInteractive: {
+		DEFAULT: "indigo/purple.500/purpleDeep.400",
+		hover: "indigo/purple.700/purpleDeep.400",
+		press: "indigo.dark/purple.900/purpleDeep.400"
+	},
+	accentAlt: "indigo/purple.300/purpleDeep.700",
+	base: "grey/navy.100/black.50",
+	baseInteractive: {
+		DEFAULT: "grey/navy.100/black.50",
+		hover: "graphite.light/navy.300/purpleDeep.400",
+		press: "graphite/navy.500/purpleDeep.400"
+	},
+	error: "red/red.500/red.200",
+	errorAlt: "red/red.500/red.200",
+	subdued: "grey.light/navy.100/black.50",
+	success: "green/green.500/green.700",
+	successAlt: "green/green.500/green.700"
+};
+const text = {
+	accent: "purple/purple.500/purpleDeep.400",
+	accentInteractive: {
+		DEFAULT: "blue/purple.500/purpleDeep.400",
+		hover: "blue/purple.700/purpleDeep.400"
+	},
+	accentAlt: "white/purple.500/grey.100",
+	accentAltInteractive: {
+		DEFAULT: "white/purple.500/grey.100",
+		hover: "indigo/purple.700/grey.100"
+	},
+	base: "graphite/navy.700/grey.100",
+	baseInteractive: {
+		DEFAULT: "graphite/navy.700/grey.100",
+		hover: "graphite/navy.900/grey.100"
+	},
+	connect: "turquoise/turquoise.500/turquoise.500",
+	driver: "graphite/navy.700/navy.700",
+	error: "red/red.500/red.400",
+	errorAlt: "white/red.500/red.500",
+	info: "graphite.light/yellow.900/yellow.300",
+	infoAlt: "turquoise/yellow.500/yellow.700",
+	inversed: "white/white/white",
+	owner: "white/white/grey.100",
+	subdued: "graphite.light/navy.300/grey.300",
+	subduedInteractive: {
+		DEFAULT: "graphite.light/navy.300/grey.300",
+		hover: "graphite/navy.500/grey.300"
+	},
+	success: "green/green.700/green.700",
+	successAlt: "white/green.900/green.100",
+	warning: "coral/orange.500/orange.300"
+};
+var _theme = {
+	background: background,
+	buttonBackground: buttonBackground,
+	buttonIcon: buttonIcon,
+	buttonLabel: buttonLabel,
+	fill: fill,
+	icon: icon,
+	stroke: stroke,
+	text: text
+};
+
+exports.background = background;
+exports.buttonBackground = buttonBackground;
+exports.buttonIcon = buttonIcon;
+exports.buttonLabel = buttonLabel;
+exports["default"] = _theme;
+exports.fill = fill;
+exports.icon = icon;
+exports.stroke = stroke;
+exports.text = text;
+//# sourceMappingURL=theme.js.map

package/cjs/tokens/theme.js.map

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

package/components/Accordion/index.js

@@ -7,11 +7,13 @@ import { animated, useSpring } from '@react-spring/web';
 import useElementHeight from '../../hooks/useElementHeight.js';
 
 const accordionSpringConfig = { tension: 300, friction: 30, clamp: true };
-const AccordionItemHeader = forwardRef(({ headingLevel = 4, className, children, ...props }, ref) => {
+const AccordionItemHeader = forwardRef(({ headingLevel = 4, className, leftToggleIcon = false, children, ...props }, ref) => {
     const { isExpanded } = useAccordionItemContext();
     const Heading = `h${headingLevel}`;
     return (React.createElement(Heading, null,
-        React.createElement(AccordionButton, { ref: ref, className: "cobalt-accordion__header", ...props },
+        React.createElement(AccordionButton, { ref: ref, className: cx("cobalt-accordion__header", {
+                "cobalt-accordion__header--left-toggle-icon": leftToggleIcon,
+            }), ...props },
             React.createElement("span", { className: cx("cobalt-accordion__header-content", className) }, children),
             React.createElement(ToggleIcon, { isOpen: isExpanded }))));
 });

package/components/Accordion/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Accordion/index.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\nimport cx from \"classnames\"\nimport {\n  Accordion as ReachAccordion,\n  AccordionItem as ReachAccordionItem,\n  AccordionButton as ReachAccordionButton,\n  AccordionPanel as ReachAccordionPanel,\n  AccordionProps as ReachAccordionProps,\n  AccordionItemProps as ReachAccordionItemProps,\n  AccordionButtonProps as ReachAccordionButtonProps,\n  useAccordionItemContext,\n  AccordionPanelProps as ReachAccordionPanelProps,\n} from \"@reach/accordion\"\nimport ToggleIcon from \"./ToggleIcon\"\nimport { animated, useSpring } from \"@react-spring/web\"\nimport useElementHeight from \"../../hooks/useElementHeight\"\nexport { useAccordionItemContext } from \"@reach/accordion\"\n\ntype HeadingLevelMapType = {\n  h2: 2\n  h3: 3\n  h4: 4\n  h5: 5\n  h6: 6\n}\n\ntype HeadingTag = keyof HeadingLevelMapType\nexport type AccordionItemHeaderPropsType = {\n  /**\n   * To improve the semantics of the markup further, the ARIA guidelines dictate\n   * that each accordion item's button should be wrapped in an element with\n   * role=\"heading\", or more simply, an HTML heading tag.\n   * https://reach.tech/accordion/#accordion-headings\n   */\n  headingLevel?: HeadingLevelMapType[HeadingTag]\n  className?: string\n} & ReachAccordionButtonProps\n\nexport type AccordionItemPanelPropsType = {\n  className?: string\n} & ReachAccordionPanelProps\nexport type AccordionItemPropsType = {\n  className?: string\n} & ReachAccordionItemProps\nexport type AccordionPropsType = {\n  className?: string\n  // We have to explicit them below to get displayed by Storybook\n  // should work without but might be an issue on Storybook side\n  collapsible?: ReachAccordionProps[\"collapsible\"]\n  defaultIndex?: ReachAccordionProps[\"defaultIndex\"]\n  index?: ReachAccordionProps[\"index\"]\n  multiple?: ReachAccordionProps[\"multiple\"]\n  onChange?: ReachAccordionProps[\"onChange\"]\n} & ReachAccordionProps\n\nconst accordionSpringConfig = { tension: 300, friction: 30, clamp: true }\n\nexport const AccordionItemHeader = forwardRef<\n  HTMLButtonElement,\n  AccordionItemHeaderPropsType\n>(({ headingLevel = 4, className, children, ...props }, ref) => {\n  const { isExpanded } = useAccordionItemContext()\n  const Heading = `h${headingLevel}` as HeadingTag\n  return (\n    <Heading>\n      <ReachAccordionButton\n        ref={ref}\n        className=\"cobalt-accordion__header\"\n        {...props}\n      >\n        <span className={cx(\"cobalt-accordion__header-content\", className)}>\n          {children}\n        </span>\n        <ToggleIcon isOpen={isExpanded} />\n      </ReachAccordionButton>\n    </Heading>\n  )\n})\nAccordionItemHeader.displayName = \"Accordion.Item.Header\"\n\nconst AnimatedAccordionPanel = animated(ReachAccordionPanel)\nexport const AccordionItemPanel = ({\n  children,\n  className,\n  ...props\n}: AccordionItemPanelPropsType) => {\n  const { isExpanded } = useAccordionItemContext()\n  const { ref, height } = useElementHeight<HTMLDivElement>()\n  const animation = useSpring({\n    opacity: isExpanded ? 1 : 0,\n    height: isExpanded ? height : 0,\n    overflow: \"hidden\",\n    config: accordionSpringConfig,\n  })\n\n  return (\n    <AnimatedAccordionPanel\n      style={animation}\n      // We need to set hidden to false for the exit animations to work\n      // but the panel should still be hidden from the accessibility tree\n      // when the panel is closed. We'll use aria-hidden instead.\n      hidden={false}\n      aria-hidden={!isExpanded || undefined}\n      {...props}\n    >\n      <div ref={ref} className={cx(\"cobalt-accordion__panel\", className)}>\n        {children}\n      </div>\n    </AnimatedAccordionPanel>\n  )\n}\nAccordionItemPanel.displayName = \"Accordion.Item.Panel\"\n\nexport const AccordionItem = ({\n  children,\n  className,\n  ...props\n}: AccordionItemPropsType) => {\n  return (\n    <ReachAccordionItem\n      className={cx(\"cobalt-accordions-list__item\", className)}\n      {...props}\n    >\n      {children}\n    </ReachAccordionItem>\n  )\n}\nAccordionItem.displayName = \"Accordion.Item\"\nAccordionItem.Header = AccordionItemHeader\nAccordionItem.Panel = AccordionItemPanel\n\nconst Accordion = ({\n  className,\n  children,\n  index,\n  collapsible = true,\n  multiple = false,\n  ...props\n}: AccordionPropsType) => {\n  const hasIndex = index === 0 || !!index\n  return (\n    <ReachAccordion\n      className={cx(\"cobalt-accordions-list\", className)}\n      collapsible={!hasIndex && collapsible}\n      multiple={!hasIndex && multiple}\n      index={index}\n      {...props}\n    >\n      {children}\n    </ReachAccordion>\n  )\n}\nAccordion.Item = AccordionItem\n\nexport default Accordion\n"],"names":["ReachAccordionButton","ReachAccordionPanel","ReachAccordionItem","ReachAccordion"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Accordion/index.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\nimport cx from \"classnames\"\nimport {\n  Accordion as ReachAccordion,\n  AccordionItem as ReachAccordionItem,\n  AccordionButton as ReachAccordionButton,\n  AccordionPanel as ReachAccordionPanel,\n  AccordionProps as ReachAccordionProps,\n  AccordionItemProps as ReachAccordionItemProps,\n  AccordionButtonProps as ReachAccordionButtonProps,\n  useAccordionItemContext,\n  AccordionPanelProps as ReachAccordionPanelProps,\n} from \"@reach/accordion\"\nimport ToggleIcon from \"./ToggleIcon\"\nimport { animated, useSpring } from \"@react-spring/web\"\nimport useElementHeight from \"../../hooks/useElementHeight\"\nexport { useAccordionItemContext } from \"@reach/accordion\"\n\ntype HeadingLevelMapType = {\n  h2: 2\n  h3: 3\n  h4: 4\n  h5: 5\n  h6: 6\n}\n\ntype HeadingTag = keyof HeadingLevelMapType\nexport type AccordionItemHeaderPropsType = {\n  /**\n   * To improve the semantics of the markup further, the ARIA guidelines dictate\n   * that each accordion item's button should be wrapped in an element with\n   * role=\"heading\", or more simply, an HTML heading tag.\n   * https://reach.tech/accordion/#accordion-headings\n   */\n  headingLevel?: HeadingLevelMapType[HeadingTag]\n  className?: string\n  leftToggleIcon?: boolean\n} & ReachAccordionButtonProps\n\nexport type AccordionItemPanelPropsType = {\n  className?: string\n} & ReachAccordionPanelProps\nexport type AccordionItemPropsType = {\n  className?: string\n} & ReachAccordionItemProps\nexport type AccordionPropsType = {\n  className?: string\n  // We have to explicit them below to get displayed by Storybook\n  // should work without but might be an issue on Storybook side\n  collapsible?: ReachAccordionProps[\"collapsible\"]\n  defaultIndex?: ReachAccordionProps[\"defaultIndex\"]\n  index?: ReachAccordionProps[\"index\"]\n  multiple?: ReachAccordionProps[\"multiple\"]\n  onChange?: ReachAccordionProps[\"onChange\"]\n} & ReachAccordionProps\n\nconst accordionSpringConfig = { tension: 300, friction: 30, clamp: true }\n\nexport const AccordionItemHeader = forwardRef<\n  HTMLButtonElement,\n  AccordionItemHeaderPropsType\n>(\n  (\n    { headingLevel = 4, className, leftToggleIcon = false, children, ...props },\n    ref\n  ) => {\n    const { isExpanded } = useAccordionItemContext()\n    const Heading = `h${headingLevel}` as HeadingTag\n    return (\n      <Heading>\n        <ReachAccordionButton\n          ref={ref}\n          className={cx(\"cobalt-accordion__header\", {\n            \"cobalt-accordion__header--left-toggle-icon\": leftToggleIcon,\n          })}\n          {...props}\n        >\n          <span className={cx(\"cobalt-accordion__header-content\", className)}>\n            {children}\n          </span>\n          <ToggleIcon isOpen={isExpanded} />\n        </ReachAccordionButton>\n      </Heading>\n    )\n  }\n)\nAccordionItemHeader.displayName = \"Accordion.Item.Header\"\n\nconst AnimatedAccordionPanel = animated(ReachAccordionPanel)\nexport const AccordionItemPanel = ({\n  children,\n  className,\n  ...props\n}: AccordionItemPanelPropsType) => {\n  const { isExpanded } = useAccordionItemContext()\n  const { ref, height } = useElementHeight<HTMLDivElement>()\n  const animation = useSpring({\n    opacity: isExpanded ? 1 : 0,\n    height: isExpanded ? height : 0,\n    overflow: \"hidden\",\n    config: accordionSpringConfig,\n  })\n\n  return (\n    <AnimatedAccordionPanel\n      style={animation}\n      // We need to set hidden to false for the exit animations to work\n      // but the panel should still be hidden from the accessibility tree\n      // when the panel is closed. We'll use aria-hidden instead.\n      hidden={false}\n      aria-hidden={!isExpanded || undefined}\n      {...props}\n    >\n      <div ref={ref} className={cx(\"cobalt-accordion__panel\", className)}>\n        {children}\n      </div>\n    </AnimatedAccordionPanel>\n  )\n}\nAccordionItemPanel.displayName = \"Accordion.Item.Panel\"\n\nexport const AccordionItem = ({\n  children,\n  className,\n  ...props\n}: AccordionItemPropsType) => {\n  return (\n    <ReachAccordionItem\n      className={cx(\"cobalt-accordions-list__item\", className)}\n      {...props}\n    >\n      {children}\n    </ReachAccordionItem>\n  )\n}\nAccordionItem.displayName = \"Accordion.Item\"\nAccordionItem.Header = AccordionItemHeader\nAccordionItem.Panel = AccordionItemPanel\n\nconst Accordion = ({\n  className,\n  children,\n  index,\n  collapsible = true,\n  multiple = false,\n  ...props\n}: AccordionPropsType) => {\n  const hasIndex = index === 0 || !!index\n  return (\n    <ReachAccordion\n      className={cx(\"cobalt-accordions-list\", className)}\n      collapsible={!hasIndex && collapsible}\n      multiple={!hasIndex && multiple}\n      index={index}\n      {...props}\n    >\n      {children}\n    </ReachAccordion>\n  )\n}\nAccordion.Item = AccordionItem\n\nexport default Accordion\n"],"names":["ReachAccordionButton","ReachAccordionPanel","ReachAccordionItem","ReachAccordion"],"mappings":"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"}

package/components/Alerter/Alert.js

@@ -1,5 +1,6 @@
 import React, { useMemo, useEffect } from 'react';
 import ReachAlert from '@reach/alert';
+import cx from 'classnames';
 import { Icon } from '../Icon/index.js';
 import 'lodash.throttle';
 import Timer from '../utils/Timer.js';
@@ -11,9 +12,14 @@ const STATUS_ICONS_MAP = {
     error: "contextualWarningCircleFilled",
 };
 const STATUS_ICON_COLOR_MAP = {
-    info: "turquoise",
-    success: "green",
-    error: "red",
+    info: "infoAlt",
+    success: "success",
+    error: "error",
+};
+const STATUS_ICON_CLASS_MAP = {
+    info: "cobalt-alert--info",
+    success: "cobalt-alert--success",
+    error: "cobalt-alert--error",
 };
 const Alert = ({ children, status = "info", dismiss }) => {
     const icon = STATUS_ICONS_MAP[status]
@@ -21,14 +27,17 @@ const Alert = ({ children, status = "info", dismiss }) => {
         : "infoFilled";
     const iconColor = STATUS_ICON_COLOR_MAP[status]
         ? STATUS_ICON_COLOR_MAP[status]
-        : "turquoise";
+        : "infoAlt";
+    const className = STATUS_ICON_CLASS_MAP[status]
+        ? STATUS_ICON_CLASS_MAP[status]
+        : "cobalt-alert--info";
     const alertTimer = useMemo(() => new Timer(dismiss, ALERT_TIMEOUT), []);
     useEffect(() => {
         alertTimer.run();
     }, []);
     const onMouseEnter = () => alertTimer.pause();
     const onMouseLeave = () => alertTimer.run();
-    return (React.createElement(ReachAlert, { className: "cobalt-alert", onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
+    return (React.createElement(ReachAlert, { className: cx("cobalt-alert", className), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
         React.createElement("div", { className: "cobalt-alert__wrapper" },
             React.createElement(Icon, { source: icon, size: 20, color: iconColor, className: "cobalt-alert__icon" }),
             React.createElement("span", { className: "cobalt-alert__content" }, children))));

package/components/Alerter/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../../src/components/Alerter/Alert.tsx"],"sourcesContent":["import React, { FunctionComponent, useEffect, useMemo } from \"react\"\nimport ReachAlert from \"@reach/alert\"\n\nimport { Icon, IconColors, IconSources } from \"../Icon\"\nimport { Timer } from \"../utils\"\n\nexport type AlertStatus = \"info\" | \"success\" | \"error\"\n\nexport type AlertType = FunctionComponent<{\n  status?: AlertStatus\n  dismiss: () => void\n}>\n\nconst ALERT_TIMEOUT = 3000\n\nconst STATUS_ICONS_MAP: { [k in AlertStatus]: IconSources } = {\n  info: \"infoFilled\",\n  success: \"checkCircle\",\n  error: \"contextualWarningCircleFilled\",\n}\n\nconst STATUS_ICON_COLOR_MAP: { [k in AlertStatus]: IconColors } = {\n  info: \"turquoise\",\n  success: \"green\",\n  error: \"red\",\n}\n\nconst Alert: AlertType = ({ children, status = \"info\", dismiss }) => {\n  const icon = STATUS_ICONS_MAP[status]\n    ? STATUS_ICONS_MAP[status]\n    : \"infoFilled\"\n\n  const iconColor: IconColors = STATUS_ICON_COLOR_MAP[status]\n    ? STATUS_ICON_COLOR_MAP[status]\n    : \"turquoise\"\n\n  const alertTimer = useMemo(() => new Timer(dismiss, ALERT_TIMEOUT), [])\n\n  useEffect(() => {\n    alertTimer.run()\n  }, [])\n\n  const onMouseEnter = () => alertTimer.pause()\n  const onMouseLeave = () => alertTimer.run()\n\n  return (\n    <ReachAlert\n      className=\"cobalt-alert\"\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <div className=\"cobalt-alert__wrapper\">\n        <Icon\n          source={icon}\n          size={20}\n          color={iconColor}\n          className=\"cobalt-alert__icon\"\n        />\n        <span className=\"cobalt-alert__content\">{children}</span>\n      </div>\n    </ReachAlert>\n  )\n}\n\nexport default Alert\n"],"names":[],"mappings":";;;;;;AAaA,MAAM,aAAa,GAAG,IAAI,CAAA;AAE1B,MAAM,gBAAgB,GAAwC;AAC5D,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,KAAK,EAAE,+BAA+B;CACvC,CAAA;AAED,MAAM,qBAAqB,GAAuC;AAChE,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,OAAO,EAAE,OAAO;AAChB,IAAA,KAAK,EAAE,KAAK;CACb,CAAA;AAED,MAAM,KAAK,GAAc,CAAC,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,OAAO,EAAE,KAAI;AAClE,IAAA,MAAM,IAAI,GAAG,gBAAgB,CAAC,MAAM,CAAC;AACnC,UAAE,gBAAgB,CAAC,MAAM,CAAC;UACxB,YAAY,CAAA;AAEhB,IAAA,MAAM,SAAS,GAAe,qBAAqB,CAAC,MAAM,CAAC;AACzD,UAAE,qBAAqB,CAAC,MAAM,CAAC;UAC7B,WAAW,CAAA;AAEf,IAAA,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,IAAI,KAAK,CAAC,OAAO,EAAE,aAAa,CAAC,EAAE,EAAE,CAAC,CAAA;IAEvE,SAAS,CAAC,MAAK;QACb,UAAU,CAAC,GAAG,EAAE,CAAA;KACjB,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,YAAY,GAAG,MAAM,UAAU,CAAC,KAAK,EAAE,CAAA;IAC7C,MAAM,YAAY,GAAG,MAAM,UAAU,CAAC,GAAG,EAAE,CAAA;AAE3C,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,SAAS,EAAC,cAAc,EACxB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAAA;QAE1B,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA;AACpC,YAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EACH,EAAA,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,EAAE,EACR,KAAK,EAAE,SAAS,EAChB,SAAS,EAAC,oBAAoB,EAC9B,CAAA;YACF,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA,EAAE,QAAQ,CAAQ,CACrD,CACK,EACd;AACH;;;;"}
+{"version":3,"file":"Alert.js","sources":["../../../src/components/Alerter/Alert.tsx"],"sourcesContent":["import React, { FunctionComponent, useEffect, useMemo } from \"react\"\nimport ReachAlert from \"@reach/alert\"\nimport cx from \"classnames\"\n\nimport { Icon, IconColorsType, IconSources } from \"../Icon\"\nimport { Timer } from \"../utils\"\n\nexport type AlertStatus = \"info\" | \"success\" | \"error\"\n\nexport type AlertType = FunctionComponent<{\n  status?: AlertStatus\n  dismiss: () => void\n}>\n\nconst ALERT_TIMEOUT = 3000\n\nconst STATUS_ICONS_MAP: { [k in AlertStatus]: IconSources } = {\n  info: \"infoFilled\",\n  success: \"checkCircle\",\n  error: \"contextualWarningCircleFilled\",\n}\n\nconst STATUS_ICON_COLOR_MAP: { [k in AlertStatus]: IconColorsType } = {\n  info: \"infoAlt\",\n  success: \"success\",\n  error: \"error\",\n}\n\nconst STATUS_ICON_CLASS_MAP: { [k in AlertStatus]: string } = {\n  info: \"cobalt-alert--info\",\n  success: \"cobalt-alert--success\",\n  error: \"cobalt-alert--error\",\n}\n\nconst Alert: AlertType = ({ children, status = \"info\", dismiss }) => {\n  const icon = STATUS_ICONS_MAP[status]\n    ? STATUS_ICONS_MAP[status]\n    : \"infoFilled\"\n\n  const iconColor: IconColorsType = STATUS_ICON_COLOR_MAP[status]\n    ? STATUS_ICON_COLOR_MAP[status]\n    : \"infoAlt\"\n\n  const className = STATUS_ICON_CLASS_MAP[status]\n    ? STATUS_ICON_CLASS_MAP[status]\n    : \"cobalt-alert--info\"\n\n  const alertTimer = useMemo(() => new Timer(dismiss, ALERT_TIMEOUT), [])\n\n  useEffect(() => {\n    alertTimer.run()\n  }, [])\n\n  const onMouseEnter = () => alertTimer.pause()\n  const onMouseLeave = () => alertTimer.run()\n\n  return (\n    <ReachAlert\n      className={cx(\"cobalt-alert\", className)}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <div className=\"cobalt-alert__wrapper\">\n        <Icon\n          source={icon}\n          size={20}\n          color={iconColor}\n          className=\"cobalt-alert__icon\"\n        />\n        <span className=\"cobalt-alert__content\">{children}</span>\n      </div>\n    </ReachAlert>\n  )\n}\n\nexport default Alert\n"],"names":[],"mappings":";;;;;;;AAcA,MAAM,aAAa,GAAG,IAAI,CAAA;AAE1B,MAAM,gBAAgB,GAAwC;AAC5D,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,KAAK,EAAE,+BAA+B;CACvC,CAAA;AAED,MAAM,qBAAqB,GAA2C;AACpE,IAAA,IAAI,EAAE,SAAS;AACf,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,KAAK,EAAE,OAAO;CACf,CAAA;AAED,MAAM,qBAAqB,GAAmC;AAC5D,IAAA,IAAI,EAAE,oBAAoB;AAC1B,IAAA,OAAO,EAAE,uBAAuB;AAChC,IAAA,KAAK,EAAE,qBAAqB;CAC7B,CAAA;AAED,MAAM,KAAK,GAAc,CAAC,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,OAAO,EAAE,KAAI;AAClE,IAAA,MAAM,IAAI,GAAG,gBAAgB,CAAC,MAAM,CAAC;AACnC,UAAE,gBAAgB,CAAC,MAAM,CAAC;UACxB,YAAY,CAAA;AAEhB,IAAA,MAAM,SAAS,GAAmB,qBAAqB,CAAC,MAAM,CAAC;AAC7D,UAAE,qBAAqB,CAAC,MAAM,CAAC;UAC7B,SAAS,CAAA;AAEb,IAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC,MAAM,CAAC;AAC7C,UAAE,qBAAqB,CAAC,MAAM,CAAC;UAC7B,oBAAoB,CAAA;AAExB,IAAA,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,IAAI,KAAK,CAAC,OAAO,EAAE,aAAa,CAAC,EAAE,EAAE,CAAC,CAAA;IAEvE,SAAS,CAAC,MAAK;QACb,UAAU,CAAC,GAAG,EAAE,CAAA;KACjB,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,YAAY,GAAG,MAAM,UAAU,CAAC,KAAK,EAAE,CAAA;IAC7C,MAAM,YAAY,GAAG,MAAM,UAAU,CAAC,GAAG,EAAE,CAAA;AAE3C,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,UAAU,IACT,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC,EACxC,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAAA;QAE1B,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA;AACpC,YAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EACH,EAAA,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,EAAE,EACR,KAAK,EAAE,SAAS,EAChB,SAAS,EAAC,oBAAoB,EAC9B,CAAA;YACF,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA,EAAE,QAAQ,CAAQ,CACrD,CACK,EACd;AACH;;;;"}

package/components/Button/Button.js

@@ -1,24 +1,17 @@
 import React from 'react';
-import BrandButton from '../Buttons/BrandButton/index.js';
 import GhostButton from '../Buttons/GhostButton/index.js';
 import InversedButton from '../Buttons/InversedButton/index.js';
 import DefaultButton from '../Buttons/DefaultButton/index.js';
 import { isLinkProps } from '../Buttons/ButtonComponent.js';
 
-const isBrandButtonProps = (props) => "brand" in props && !isLinkProps(props);
 const isInversedButtonProps = (props) => "inversed" in props && props.inversed === true && !isLinkProps(props);
 const isGhostButtonProps = (props) => "ghost" in props && props.ghost === true && !isLinkProps(props);
-const isDefaultButtonProps = (props) => !isBrandButtonProps(props) &&
-    !isGhostButtonProps(props) &&
-    !isInversedButtonProps(props);
+const isDefaultButtonProps = (props) => !isGhostButtonProps(props) && !isInversedButtonProps(props);
 const Button = (props) => {
     const { forwardedRef, ...restButtonProps } = props;
     // We extract here API only props to not passed them and we pass some
     // common props directly
-    if (isBrandButtonProps(restButtonProps)) {
-        return React.createElement(BrandButton, { ...restButtonProps, ref: forwardedRef });
-    }
-    else if (isInversedButtonProps(restButtonProps)) {
+    if (isInversedButtonProps(restButtonProps)) {
         // inversed is a props only used for API here
         const { inversed: _inversed, ...restProps } = restButtonProps;
         return React.createElement(InversedButton, { ...restProps, ref: forwardedRef });

package/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { Ref } from \"react\"\n\nimport Brand, { BrandButtonPropsType } from \"../Buttons/BrandButton\"\nimport Ghost, { GhostButtonPropsType } from \"../Buttons/GhostButton\"\nimport Inversed, { InversedButtonPropsType } from \"../Buttons/InversedButton\"\nimport Default, { DefaultButtonPropsType } from \"../Buttons/DefaultButton\"\nimport { isLinkProps } from \"../Buttons/ButtonComponent\"\n\ntype withButtonRef<Props> = Props & { forwardedRef?: Ref<HTMLButtonElement> }\n\n/**\n * We add API only props here since it's not related to the Buttons subcomponents\n */\ntype BrandButtonAPIPropsType = BrandButtonPropsType\ntype InversedButtonAPIPropsType = InversedButtonPropsType & { inversed?: true }\ntype GhostButtonAPIPropsType = GhostButtonPropsType & { ghost?: true }\ntype DefaultButtonAPIPropsType = DefaultButtonPropsType\n\n/**\n * Overloads\n */\ntype ButtonOverload = {\n  (props: withButtonRef<BrandButtonAPIPropsType>): JSX.Element\n  (props: withButtonRef<InversedButtonAPIPropsType>): JSX.Element\n  (props: withButtonRef<GhostButtonAPIPropsType>): JSX.Element\n  (props: withButtonRef<DefaultButtonAPIPropsType>): JSX.Element\n}\n\nexport type ButtonPropsType =\n  | withButtonRef<BrandButtonAPIPropsType>\n  | withButtonRef<InversedButtonAPIPropsType>\n  | withButtonRef<GhostButtonAPIPropsType>\n  | withButtonRef<DefaultButtonAPIPropsType>\n\nconst isBrandButtonProps = (\n  props: ButtonPropsType\n): props is BrandButtonAPIPropsType => \"brand\" in props && !isLinkProps(props)\n\nconst isInversedButtonProps = (\n  props: ButtonPropsType\n): props is InversedButtonAPIPropsType =>\n  \"inversed\" in props && props.inversed === true && !isLinkProps(props)\n\nconst isGhostButtonProps = (\n  props: ButtonPropsType\n): props is GhostButtonAPIPropsType =>\n  \"ghost\" in props && props.ghost === true && !isLinkProps(props)\n\nconst isDefaultButtonProps = (\n  props: ButtonPropsType\n): props is DefaultButtonAPIPropsType =>\n  !isBrandButtonProps(props) &&\n  !isGhostButtonProps(props) &&\n  !isInversedButtonProps(props)\n\nconst Button: ButtonOverload = (props: ButtonPropsType) => {\n  const { forwardedRef, ...restButtonProps } = props\n\n  // We extract here API only props to not passed them and we pass some\n  // common props directly\n  if (isBrandButtonProps(restButtonProps)) {\n    return <Brand {...restButtonProps} ref={forwardedRef} />\n  } else if (isInversedButtonProps(restButtonProps)) {\n    // inversed is a props only used for API here\n    const { inversed: _inversed, ...restProps } = restButtonProps\n    return <Inversed {...restProps} ref={forwardedRef} />\n  } else if (isGhostButtonProps(restButtonProps)) {\n    // ghost is a props only used for API here\n    const { ghost: _ghost, ...restProps } = restButtonProps\n    return <Ghost {...restProps} ref={forwardedRef} />\n  } else if (isDefaultButtonProps(restButtonProps)) {\n    return <Default {...restButtonProps} ref={forwardedRef} />\n  } else {\n    throw new Error(\"[Cobalt]: Unexpected Button Component props error\")\n  }\n}\n\nexport default Button\n"],"names":["Brand","Inversed","Ghost","Default"],"mappings":";;;;;;;AAkCA,MAAM,kBAAkB,GAAG,CACzB,KAAsB,KACe,OAAO,IAAI,KAAK,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;AAE9E,MAAM,qBAAqB,GAAG,CAC5B,KAAsB,KAEtB,UAAU,IAAI,KAAK,IAAI,KAAK,CAAC,QAAQ,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;AAEvE,MAAM,kBAAkB,GAAG,CACzB,KAAsB,KAEtB,OAAO,IAAI,KAAK,IAAI,KAAK,CAAC,KAAK,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;AAEjE,MAAM,oBAAoB,GAAG,CAC3B,KAAsB,KAEtB,CAAC,kBAAkB,CAAC,KAAK,CAAC;IAC1B,CAAC,kBAAkB,CAAC,KAAK,CAAC;AAC1B,IAAA,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAA;AAE/B,MAAM,MAAM,GAAmB,CAAC,KAAsB,KAAI;IACxD,MAAM,EAAE,YAAY,EAAE,GAAG,eAAe,EAAE,GAAG,KAAK,CAAA;;;AAIlD,IAAA,IAAI,kBAAkB,CAAC,eAAe,CAAC,EAAE;QACvC,OAAO,KAAA,CAAA,aAAA,CAACA,WAAK,EAAK,EAAA,GAAA,eAAe,EAAE,GAAG,EAAE,YAAY,EAAA,CAAI,CAAA;AACzD,KAAA;AAAM,SAAA,IAAI,qBAAqB,CAAC,eAAe,CAAC,EAAE;;QAEjD,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,eAAe,CAAA;QAC7D,OAAO,KAAA,CAAA,aAAA,CAACC,cAAQ,EAAK,EAAA,GAAA,SAAS,EAAE,GAAG,EAAE,YAAY,EAAA,CAAI,CAAA;AACtD,KAAA;AAAM,SAAA,IAAI,kBAAkB,CAAC,eAAe,CAAC,EAAE;;QAE9C,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,GAAG,eAAe,CAAA;QACvD,OAAO,KAAA,CAAA,aAAA,CAACC,WAAK,EAAK,EAAA,GAAA,SAAS,EAAE,GAAG,EAAE,YAAY,EAAA,CAAI,CAAA;AACnD,KAAA;AAAM,SAAA,IAAI,oBAAoB,CAAC,eAAe,CAAC,EAAE;QAChD,OAAO,KAAA,CAAA,aAAA,CAACC,aAAO,EAAK,EAAA,GAAA,eAAe,EAAE,GAAG,EAAE,YAAY,EAAA,CAAI,CAAA;AAC3D,KAAA;AAAM,SAAA;AACL,QAAA,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAA;AACrE,KAAA;AACH;;;;"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { Ref } from \"react\"\n\nimport Ghost, { GhostButtonPropsType } from \"../Buttons/GhostButton\"\nimport Inversed, { InversedButtonPropsType } from \"../Buttons/InversedButton\"\nimport Default, { DefaultButtonPropsType } from \"../Buttons/DefaultButton\"\nimport { isLinkProps } from \"../Buttons/ButtonComponent\"\n\ntype withButtonRef<Props> = Props & { forwardedRef?: Ref<HTMLButtonElement> }\n\n/**\n * We add API only props here since it's not related to the Buttons subcomponents\n */\ntype InversedButtonAPIPropsType = InversedButtonPropsType & { inversed?: true }\ntype GhostButtonAPIPropsType = GhostButtonPropsType & { ghost?: true }\ntype DefaultButtonAPIPropsType = DefaultButtonPropsType\n\n/**\n * Overloads\n */\ntype ButtonOverload = {\n  (props: withButtonRef<InversedButtonAPIPropsType>): JSX.Element\n  (props: withButtonRef<GhostButtonAPIPropsType>): JSX.Element\n  (props: withButtonRef<DefaultButtonAPIPropsType>): JSX.Element\n}\n\nexport type ButtonPropsType =\n  | withButtonRef<InversedButtonAPIPropsType>\n  | withButtonRef<GhostButtonAPIPropsType>\n  | withButtonRef<DefaultButtonAPIPropsType>\n\nconst isInversedButtonProps = (\n  props: ButtonPropsType\n): props is InversedButtonAPIPropsType =>\n  \"inversed\" in props && props.inversed === true && !isLinkProps(props)\n\nconst isGhostButtonProps = (\n  props: ButtonPropsType\n): props is GhostButtonAPIPropsType =>\n  \"ghost\" in props && props.ghost === true && !isLinkProps(props)\n\nconst isDefaultButtonProps = (\n  props: ButtonPropsType\n): props is DefaultButtonAPIPropsType =>\n  !isGhostButtonProps(props) && !isInversedButtonProps(props)\n\nconst Button: ButtonOverload = (props: ButtonPropsType) => {\n  const { forwardedRef, ...restButtonProps } = props\n\n  // We extract here API only props to not passed them and we pass some\n  // common props directly\n  if (isInversedButtonProps(restButtonProps)) {\n    // inversed is a props only used for API here\n    const { inversed: _inversed, ...restProps } = restButtonProps\n    return <Inversed {...restProps} ref={forwardedRef} />\n  } else if (isGhostButtonProps(restButtonProps)) {\n    // ghost is a props only used for API here\n    const { ghost: _ghost, ...restProps } = restButtonProps\n    return <Ghost {...restProps} ref={forwardedRef} />\n  } else if (isDefaultButtonProps(restButtonProps)) {\n    return <Default {...restButtonProps} ref={forwardedRef} />\n  } else {\n    throw new Error(\"[Cobalt]: Unexpected Button Component props error\")\n  }\n}\n\nexport default Button\n"],"names":["Inversed","Ghost","Default"],"mappings":";;;;;;AA8BA,MAAM,qBAAqB,GAAG,CAC5B,KAAsB,KAEtB,UAAU,IAAI,KAAK,IAAI,KAAK,CAAC,QAAQ,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;AAEvE,MAAM,kBAAkB,GAAG,CACzB,KAAsB,KAEtB,OAAO,IAAI,KAAK,IAAI,KAAK,CAAC,KAAK,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;AAEjE,MAAM,oBAAoB,GAAG,CAC3B,KAAsB,KAEtB,CAAC,kBAAkB,CAAC,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAA;AAE7D,MAAM,MAAM,GAAmB,CAAC,KAAsB,KAAI;IACxD,MAAM,EAAE,YAAY,EAAE,GAAG,eAAe,EAAE,GAAG,KAAK,CAAA;;;AAIlD,IAAA,IAAI,qBAAqB,CAAC,eAAe,CAAC,EAAE;;QAE1C,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,eAAe,CAAA;QAC7D,OAAO,KAAA,CAAA,aAAA,CAACA,cAAQ,EAAK,EAAA,GAAA,SAAS,EAAE,GAAG,EAAE,YAAY,EAAA,CAAI,CAAA;AACtD,KAAA;AAAM,SAAA,IAAI,kBAAkB,CAAC,eAAe,CAAC,EAAE;;QAE9C,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,GAAG,eAAe,CAAA;QACvD,OAAO,KAAA,CAAA,aAAA,CAACC,WAAK,EAAK,EAAA,GAAA,SAAS,EAAE,GAAG,EAAE,YAAY,EAAA,CAAI,CAAA;AACnD,KAAA;AAAM,SAAA,IAAI,oBAAoB,CAAC,eAAe,CAAC,EAAE;QAChD,OAAO,KAAA,CAAA,aAAA,CAACC,aAAO,EAAK,EAAA,GAAA,eAAe,EAAE,GAAG,EAAE,YAAY,EAAA,CAAI,CAAA;AAC3D,KAAA;AAAM,SAAA;AACL,QAAA,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAA;AACrE,KAAA;AACH;;;;"}

package/components/Button/Link.js

@@ -1,24 +1,17 @@
 import React from 'react';
-import BrandButton from '../Buttons/BrandButton/index.js';
 import GhostButton from '../Buttons/GhostButton/index.js';
 import InversedButton from '../Buttons/InversedButton/index.js';
 import DefaultButton from '../Buttons/DefaultButton/index.js';
 import { isLinkProps } from '../Buttons/ButtonComponent.js';
 
-const isBrandLinkProps = (props) => "brand" in props && isLinkProps(props);
 const isInversedLinkProps = (props) => "inversed" in props && props.inversed === true && isLinkProps(props);
 const isGhostLinkProps = (props) => "ghost" in props && props.ghost === true && isLinkProps(props);
-const isDefaultLinkProps = (props) => !isBrandLinkProps(props) &&
-    !isGhostLinkProps(props) &&
-    !isInversedLinkProps(props);
+const isDefaultLinkProps = (props) => !isGhostLinkProps(props) && !isInversedLinkProps(props);
 const Link = (props) => {
     const { forwardedRef, ...restLinkProps } = props;
     // We extract here specific button props
     // disabled props must be passed to provided a11y related attributes
-    if (isBrandLinkProps(restLinkProps)) {
-        return React.createElement(BrandButton.Link, { ...restLinkProps, ref: forwardedRef });
-    }
-    else if (isInversedLinkProps(restLinkProps)) {
+    if (isInversedLinkProps(restLinkProps)) {
         // inversed is a props only used for API here
         const { inversed: _inversed, ...restProps } = restLinkProps;
         return React.createElement(InversedButton.Link, { ...restProps, ref: forwardedRef });