@drivy/cobalt 0.42.18 → 0.43.0

package/cjs/tokens/palette.js

@@ -9,8 +9,7 @@ const purple = {
 	"400": "#C04FB8",
 	"500": "#B01AA7",
 	"700": "#8D1586",
-	"900": "#5F1159",
-	"2000": "#D62929"
+	"900": "#5F1159"
 };
 const purpleDeep = {
 	"100": "#F2A6EE",
@@ -107,6 +106,14 @@ const season = {
 	"900": "#030",
 	"1000": "#001900"
 };
+const newPurple = {
+	"200": "#E46FEE",
+	"500": "#BC00CC"
+};
+const newViolet = {
+	"200": "#B86FFF",
+	"500": "#6C06B5"
+};
 var _palette = {
 	white: white,
 	purple: purple,
@@ -121,7 +128,9 @@ var _palette = {
 	grey: grey,
 	blue: blue,
 	turquoise: turquoise,
-	season: season
+	season: season,
+	newPurple: newPurple,
+	newViolet: newViolet
 };
 
 exports.black = black;
@@ -130,6 +139,8 @@ exports["default"] = _palette;
 exports.green = green;
 exports.grey = grey;
 exports.navy = navy;
+exports.newPurple = newPurple;
+exports.newViolet = newViolet;
 exports.orange = orange;
 exports.purple = purple;
 exports.purpleDeep = purpleDeep;

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

@@ -12,8 +12,11 @@ const background = {
 	errorAlt: "red.100/red.900",
 	success: "green.700/green.700",
 	successAlt: "green.100/green.1000",
-	connect: "turquoise.500/turquoise.700",
+	connect: "newPurple.500/newPurple.200",
 	connectAlt: "turquoise.50/turquoise.900",
+	keyExchange: "newViolet.500/newViolet.200",
+	picked: "green.700/green.500",
+	rideshare: "black.1000/black.1000",
 	driver: "yellow.500/yellow.500",
 	owner: "navy.700/navy.700",
 	disabled: "navy.100/black.100",
@@ -25,7 +28,7 @@ const background = {
 	seasonVeryhigh: "season.400/season.1000",
 	rental: "turquoise.100/turquoise.1200",
 	blocker: "navy.100/black.75",
-	rideshare: "black.1000/black.1000",
+	base: "navy.900/navy.50",
 	secondaryInteractive: {
 		DEFAULT: "white/black.300",
 		hover: "navy.50/black.300"
@@ -39,7 +42,7 @@ const background = {
 		hover: "purpleLight.100/purpleDeep.900"
 	},
 	connectInteractive: {
-		DEFAULT: "turquoise.500/turquoise.700",
+		DEFAULT: "newPurple.500/newPurple.200",
 		hover: "turquoise.700/turquoise.700"
 	},
 	errorInteractive: {
@@ -53,23 +56,29 @@ const text = {
 	accent: "purple.500/purpleDeep.400",
 	accentAlt: "purple.500/grey.100",
 	info: "yellow.900/yellow.300",
+	infoAlt: "yellow.700/yellow.700",
 	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",
+	warning: "orange.500/orange.300",
+	connect: "newPurple.500/newPurple.200",
 	connectAlt: "turquoise.900/white",
+	keyExchange: "newViolet.500/newViolet.200",
+	picked: "green.700/green.500",
+	rideshare: "black.1000/white",
 	driver: "navy.700/navy.700",
 	owner: "white/grey.100",
-	warning: "orange.500/orange.300",
-	infoAlt: "yellow.700/yellow.700",
-	inversed: "white/white",
 	disabled: "navy.200/black.50",
+	inversed: "white/white",
 	onAccent: "white/grey.100",
 	onRideshare: "white/white",
 	onError: "white/white",
 	onSuccess: "white/white",
-	onConnect: "white/white",
+	onConnect: "white/navy.900",
+	onKeyExchange: "white/navy.900",
+	onPicked: "white/navy.900",
+	onBase: "white/navy.900",
 	baseInteractive: {
 		DEFAULT: "navy.700/grey.100",
 		hover: "navy.900/grey.300"
@@ -93,24 +102,30 @@ const icon = {
 	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.200",
 	success: "green.700/green.700",
 	successAlt: "green.1000/green.100",
-	connect: "turquoise.500/turquoise.700",
+	warning: "orange.500/orange.300",
+	connect: "newPurple.500/newPurple.200",
 	connectAlt: "turquoise.900/turquoise.50",
+	keyExchange: "newViolet.500/newViolet.200",
+	picked: "green.700/green.500",
+	rideshare: "black.1000/white",
 	driver: "navy.700/navy.700",
 	owner: "white/white",
-	inversed: "white/white",
-	disabled: "navy.100/black.50",
+	disabled: "navy.200/black.50",
 	disabledAlt: "navy.300/grey.500",
-	warning: "orange.500/orange.300",
-	infoAlt: "yellow.500/yellow.700",
+	inversed: "white/white",
 	onAccent: "white/white",
-	rideshare: "black.1000/white",
 	onRideshare: "white/white",
-	onSuccess: "white/white",
 	onError: "white/white",
+	onSuccess: "white/white",
+	onConnect: "white/navy.900",
+	onKeyExchange: "white/navy.900",
+	onPicked: "white/navy.900",
+	onBase: "white/navy.900",
 	baseInteractive: {
 		DEFAULT: "navy.500/grey.100",
 		hover: "navy.700/grey.100"
@@ -131,18 +146,27 @@ const icon = {
 const stroke = {
 	base: "navy.100/black.50",
 	subdued: "navy.50/black.100",
+	strong: "navy.300/navy.200",
 	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",
+	success: "green.500/green.700",
+	successAlt: "green.500/green.700",
+	connect: "newPurple.500/newPurple.200",
+	keyExchange: "newViolet.500/newViolet.200",
+	picked: "green.700/green.500",
+	rideshare: "black.1000/white",
+	rental: "turquoise.500/turquoise.500",
+	blocker: "navy.300/grey.300",
 	onAccent: "white/grey.100",
-	rentals: "turquoise.500/turquoise.500",
-	blokers: "navy.300/grey.300",
 	onError: "white/white",
 	onSuccess: "white/white",
+	onConnect: "white/black.1000",
+	onPicked: "white/black.1000",
+	onKeyExchange: "white/black.1000",
+	onRideshare: "white/black.1000",
+	onBase: "white/black.1000",
 	baseInteractive: {
 		DEFAULT: "navy.100/black.50",
 		hover: "navy.300/purpleDeep.400",
@@ -268,25 +292,25 @@ const buttonBackground = {
 	}
 };
 const fill = {
-	base: "navy.500/grey.300",
-	accent: "purple.500/purpleDeep.400",
-	secondary: "yellow.500/yellow.500",
+	base: "navy.500/grey.50",
 	subdued: "navy.100/black.50",
-	neutral: "navy.50/black.100",
-	negative: "red.150/red.800",
+	secondary: "yellow.500/yellow.500",
+	accent: "purple.500/purpleDeep.400",
 	accentAlt: "purple.100/purpleDeep.900",
-	disabled: "navy.300/grey.300",
 	error: "red.500/red.500",
 	success: "green.500/green.700",
-	rentals: "turquoise.100/turquoise.1200",
-	blockers: "navy.120/black.75"
+	neutral: "navy.50/black.100",
+	negative: "red.150/red.800",
+	disabled: "navy.300/grey.300",
+	rental: "turquoise.100/turquoise.1200",
+	blocker: "navy.120/black.75",
+	primary: "white/black.1000"
 };
 const illustrations = {
 	primary: "navy.500/white",
 	secondary: "white/white",
-	acccent1: "purple.500/white",
-	accent2: "blue.500/white",
-	foregroundDark: "white/white"
+	accent1: "purple.500/white",
+	accent2: "blue.500/white"
 };
 var _theme = {
 	background: background,

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/Layout/Components/LayoutStack.js

@@ -2,9 +2,12 @@ import { nanoid } from 'nanoid';
 import React, { Children, cloneElement, isValidElement } from 'react';
 import cx from 'classnames';
 
-const LayoutStackItem = ({ children, isTable }) => {
+const LayoutStackItem = ({ children, isTable, ...props }) => {
     const Comp = isTable ? "tr" : "div";
-    return React.createElement(Comp, { className: "cobalt-layout-stack__item" }, children);
+    return (React.createElement(Comp, { className: "cobalt-layout-stack__item", ...props }, children));
+};
+const LayoutStackLinkItem = ({ children, ...hyperlinkProps }) => {
+    return (React.createElement("a", { className: "cobalt-layout-stack__item", ...hyperlinkProps }, children));
 };
 const isStackItem = (child) => {
     return isValidElement(child) && child.type === LayoutStackItem;
@@ -39,6 +42,7 @@ const LayoutStack = ({ children, isTable, isPageHeader, }) => {
     }
 };
 LayoutStack.Item = LayoutStackItem;
+LayoutStack.LinkItem = LayoutStackLinkItem;
 
 export { LayoutStack as default };
 //# sourceMappingURL=LayoutStack.js.map

package/components/Layout/Components/LayoutStack.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutStack.js","sources":["../../../../src/components/Layout/Components/LayoutStack.tsx"],"sourcesContent":["import { nanoid } from \"nanoid\"\nimport React, { Children, isValidElement, cloneElement } from \"react\"\nimport cx from \"classnames\"\n\ntype LayoutStackItemPropsType =\n  | {\n      children: React.ReactNode\n      isTable: never\n      isPageHeader: never\n    }\n  | {\n      children: React.ReactNode\n      isPageHeader?: boolean\n      isTable?: boolean\n    }\n\nconst LayoutStackItem = ({ children, isTable }: LayoutStackItemPropsType) => {\n  const Comp = isTable ? \"tr\" : \"div\"\n  return <Comp className=\"cobalt-layout-stack__item\">{children}</Comp>\n}\n\nconst isStackItem = (\n  child: React.ReactNode\n): child is React.ReactElement<Omit<LayoutStackItemPropsType, \"children\">> => {\n  return isValidElement(child) && child.type === LayoutStackItem\n}\n\nconst LayoutStack = ({\n  children,\n  isTable,\n  isPageHeader,\n}: {\n  children: React.ReactNode\n  isTable?: boolean\n  isPageHeader?: boolean\n}) => {\n  const headerElements: React.ReactElement[] = []\n  const bodyElements: React.ReactElement[] = []\n  const content = Children.map(children, (child) => {\n    if (isStackItem(child)) {\n      const newChild = cloneElement(child, { isTable, key: nanoid() })\n      if (newChild.props.isTable) {\n        if (newChild.props.isPageHeader) {\n          headerElements.push(newChild)\n        } else {\n          bodyElements.push(newChild)\n        }\n      }\n    }\n    return child\n  })\n  const className = cx(\"cobalt-layout-stack\", {\n    \"cobalt-layout--isPageHeader\": isPageHeader,\n  })\n  if (isTable) {\n    return (\n      <table className={className}>\n        {!!headerElements.length && <thead>{headerElements}</thead>}\n        <tbody>{bodyElements}</tbody>\n      </table>\n    )\n  } else {\n    return <div className={className}>{content}</div>\n  }\n}\n\nLayoutStack.Item = LayoutStackItem\n\nexport default LayoutStack\n"],"names":[],"mappings":";;;;AAgBA,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAA4B,KAAI;IAC1E,MAAM,IAAI,GAAG,OAAO,GAAG,IAAI,GAAG,KAAK,CAAA;IACnC,OAAO,KAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,SAAS,EAAC,2BAA2B,EAAA,EAAE,QAAQ,CAAQ,CAAA;AACtE,CAAC,CAAA;AAED,MAAM,WAAW,GAAG,CAClB,KAAsB,KACqD;IAC3E,OAAO,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,eAAe,CAAA;AAChE,CAAC,CAAA;AAEK,MAAA,WAAW,GAAG,CAAC,EACnB,QAAQ,EACR,OAAO,EACP,YAAY,GAKb,KAAI;IACH,MAAM,cAAc,GAAyB,EAAE,CAAA;IAC/C,MAAM,YAAY,GAAyB,EAAE,CAAA;IAC7C,MAAM,OAAO,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAI;AAC/C,QAAA,IAAI,WAAW,CAAC,KAAK,CAAC,EAAE;AACtB,YAAA,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,CAAA;AAChE,YAAA,IAAI,QAAQ,CAAC,KAAK,CAAC,OAAO,EAAE;AAC1B,gBAAA,IAAI,QAAQ,CAAC,KAAK,CAAC,YAAY,EAAE;AAC/B,oBAAA,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;iBAC9B;qBAAM;AACL,oBAAA,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;iBAC5B;aACF;SACF;AACD,QAAA,OAAO,KAAK,CAAA;AACd,KAAC,CAAC,CAAA;AACF,IAAA,MAAM,SAAS,GAAG,EAAE,CAAC,qBAAqB,EAAE;AAC1C,QAAA,6BAA6B,EAAE,YAAY;AAC5C,KAAA,CAAC,CAAA;IACF,IAAI,OAAO,EAAE;AACX,QAAA,QACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAE,SAAS,EAAA;AACxB,YAAA,CAAC,CAAC,cAAc,CAAC,MAAM,IAAI,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAQ,cAAc,CAAS;AAC3D,YAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAQ,YAAY,CAAS,CACvB,EACT;KACF;SAAM;AACL,QAAA,OAAO,6BAAK,SAAS,EAAE,SAAS,EAAG,EAAA,OAAO,CAAO,CAAA;KAClD;AACH,EAAC;AAED,WAAW,CAAC,IAAI,GAAG,eAAe;;;;"}
+{"version":3,"file":"LayoutStack.js","sources":["../../../../src/components/Layout/Components/LayoutStack.tsx"],"sourcesContent":["import { nanoid } from \"nanoid\"\nimport React, { Children, isValidElement, cloneElement } from \"react\"\nimport cx from \"classnames\"\n\ntype LayoutStackItemPropsType =\n  | (React.HTMLAttributes<HTMLElement> & {\n      children: React.ReactNode\n      isTable: never\n      isPageHeader: never\n    })\n  | (React.HTMLAttributes<HTMLElement> & {\n      children: React.ReactNode\n      isPageHeader?: boolean\n      isTable?: boolean\n    })\n\ntype LayoutStackLinkItemPropsType =\n  React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n    children: React.ReactNode\n    isPageHeader?: boolean\n  }\n\nconst LayoutStackItem = ({\n  children,\n  isTable,\n  ...props\n}: LayoutStackItemPropsType) => {\n  const Comp = isTable ? \"tr\" : \"div\"\n  return (\n    <Comp className=\"cobalt-layout-stack__item\" {...props}>\n      {children}\n    </Comp>\n  )\n}\n\nconst LayoutStackLinkItem = ({\n  children,\n  ...hyperlinkProps\n}: LayoutStackLinkItemPropsType) => {\n  return (\n    <a className=\"cobalt-layout-stack__item\" {...hyperlinkProps}>\n      {children}\n    </a>\n  )\n}\n\nconst isStackItem = (\n  child: React.ReactNode\n): child is React.ReactElement<Omit<LayoutStackItemPropsType, \"children\">> => {\n  return isValidElement(child) && child.type === LayoutStackItem\n}\n\nconst LayoutStack = ({\n  children,\n  isTable,\n  isPageHeader,\n}: {\n  children: React.ReactNode\n  isTable?: boolean\n  isPageHeader?: boolean\n}) => {\n  const headerElements: React.ReactElement[] = []\n  const bodyElements: React.ReactElement[] = []\n  const content = Children.map(children, (child) => {\n    if (isStackItem(child)) {\n      const newChild = cloneElement(child, { isTable, key: nanoid() })\n      if (newChild.props.isTable) {\n        if (newChild.props.isPageHeader) {\n          headerElements.push(newChild)\n        } else {\n          bodyElements.push(newChild)\n        }\n      }\n    }\n    return child\n  })\n  const className = cx(\"cobalt-layout-stack\", {\n    \"cobalt-layout--isPageHeader\": isPageHeader,\n  })\n  if (isTable) {\n    return (\n      <table className={className}>\n        {!!headerElements.length && <thead>{headerElements}</thead>}\n        <tbody>{bodyElements}</tbody>\n      </table>\n    )\n  } else {\n    return <div className={className}>{content}</div>\n  }\n}\n\nLayoutStack.Item = LayoutStackItem\n\nLayoutStack.LinkItem = LayoutStackLinkItem\n\nexport default LayoutStack\n"],"names":[],"mappings":";;;;AAsBA,MAAM,eAAe,GAAG,CAAC,EACvB,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACiB,KAAI;IAC7B,MAAM,IAAI,GAAG,OAAO,GAAG,IAAI,GAAG,KAAK,CAAA;AACnC,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,2BAA2B,EAAA,GAAK,KAAK,EAAA,EAClD,QAAQ,CACJ,EACR;AACH,CAAC,CAAA;AAED,MAAM,mBAAmB,GAAG,CAAC,EAC3B,QAAQ,EACR,GAAG,cAAc,EACY,KAAI;IACjC,QACE,KAAG,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,SAAS,EAAC,2BAA2B,EAAK,GAAA,cAAc,EACxD,EAAA,QAAQ,CACP,EACL;AACH,CAAC,CAAA;AAED,MAAM,WAAW,GAAG,CAClB,KAAsB,KACqD;IAC3E,OAAO,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,eAAe,CAAA;AAChE,CAAC,CAAA;AAEK,MAAA,WAAW,GAAG,CAAC,EACnB,QAAQ,EACR,OAAO,EACP,YAAY,GAKb,KAAI;IACH,MAAM,cAAc,GAAyB,EAAE,CAAA;IAC/C,MAAM,YAAY,GAAyB,EAAE,CAAA;IAC7C,MAAM,OAAO,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAI;AAC/C,QAAA,IAAI,WAAW,CAAC,KAAK,CAAC,EAAE;AACtB,YAAA,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,CAAA;AAChE,YAAA,IAAI,QAAQ,CAAC,KAAK,CAAC,OAAO,EAAE;AAC1B,gBAAA,IAAI,QAAQ,CAAC,KAAK,CAAC,YAAY,EAAE;AAC/B,oBAAA,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;iBAC9B;qBAAM;AACL,oBAAA,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;iBAC5B;aACF;SACF;AACD,QAAA,OAAO,KAAK,CAAA;AACd,KAAC,CAAC,CAAA;AACF,IAAA,MAAM,SAAS,GAAG,EAAE,CAAC,qBAAqB,EAAE;AAC1C,QAAA,6BAA6B,EAAE,YAAY;AAC5C,KAAA,CAAC,CAAA;IACF,IAAI,OAAO,EAAE;AACX,QAAA,QACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAE,SAAS,EAAA;AACxB,YAAA,CAAC,CAAC,cAAc,CAAC,MAAM,IAAI,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAQ,cAAc,CAAS;AAC3D,YAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAQ,YAAY,CAAS,CACvB,EACT;KACF;SAAM;AACL,QAAA,OAAO,6BAAK,SAAS,EAAE,SAAS,EAAG,EAAA,OAAO,CAAO,CAAA;KAClD;AACH,EAAC;AAED,WAAW,CAAC,IAAI,GAAG,eAAe,CAAA;AAElC,WAAW,CAAC,QAAQ,GAAG,mBAAmB;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.42.18",
+  "version": "0.43.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/src/index.d.ts",

package/styles/components/Icon/iconColors.scss

@@ -22,6 +22,10 @@
   fill: var(--c-icon-info);
 }
 
+.cobalt-Icon--colorInfoAlt {
+  fill: var(--c-icon-infoAlt);
+}
+
 .cobalt-Icon--colorError {
   fill: var(--c-icon-error);
 }
@@ -38,6 +42,10 @@
   fill: var(--c-icon-successAlt);
 }
 
+.cobalt-Icon--colorWarning {
+  fill: var(--c-icon-warning);
+}
+
 .cobalt-Icon--colorConnect {
   fill: var(--c-icon-connect);
 }
@@ -46,6 +54,18 @@
   fill: var(--c-icon-connectAlt);
 }
 
+.cobalt-Icon--colorKeyExchange {
+  fill: var(--c-icon-keyExchange);
+}
+
+.cobalt-Icon--colorPicked {
+  fill: var(--c-icon-picked);
+}
+
+.cobalt-Icon--colorRideshare {
+  fill: var(--c-icon-rideshare);
+}
+
 .cobalt-Icon--colorDriver {
   fill: var(--c-icon-driver);
 }
@@ -54,10 +74,6 @@
   fill: var(--c-icon-owner);
 }
 
-.cobalt-Icon--colorInversed {
-  fill: var(--c-icon-inversed);
-}
-
 .cobalt-Icon--colorDisabled {
   fill: var(--c-icon-disabled);
 }
@@ -66,32 +82,40 @@
   fill: var(--c-icon-disabledAlt);
 }
 
-.cobalt-Icon--colorWarning {
-  fill: var(--c-icon-warning);
-}
-
-.cobalt-Icon--colorInfoAlt {
-  fill: var(--c-icon-infoAlt);
+.cobalt-Icon--colorInversed {
+  fill: var(--c-icon-inversed);
 }
 
 .cobalt-Icon--colorOnAccent {
   fill: var(--c-icon-onAccent);
 }
 
-.cobalt-Icon--colorRideshare {
-  fill: var(--c-icon-rideshare);
-}
-
 .cobalt-Icon--colorOnRideshare {
   fill: var(--c-icon-onRideshare);
 }
 
+.cobalt-Icon--colorOnError {
+  fill: var(--c-icon-onError);
+}
+
 .cobalt-Icon--colorOnSuccess {
   fill: var(--c-icon-onSuccess);
 }
 
-.cobalt-Icon--colorOnError {
-  fill: var(--c-icon-onError);
+.cobalt-Icon--colorOnConnect {
+  fill: var(--c-icon-onConnect);
+}
+
+.cobalt-Icon--colorOnKeyExchange {
+  fill: var(--c-icon-onKeyExchange);
+}
+
+.cobalt-Icon--colorOnPicked {
+  fill: var(--c-icon-onPicked);
+}
+
+.cobalt-Icon--colorOnBase {
+  fill: var(--c-icon-onBase);
 }
 
 .cobalt-Icon--colorBaseInteractive {

package/styles/components/Layout/Components/index.scss

@@ -42,12 +42,34 @@ div.cobalt-layout-stack {
 
   .cobalt-layout-stack__item {
     @include border-top(base);
+
+    display: block;
+
     padding: var(--cobalt-layout-item-spacing);
   }
 
-  .cobalt-layout-stack__item:first-of-type {
+  .cobalt-layout-stack__item:first-child {
     border-top: 0;
   }
+
+  a.cobalt-layout-stack__item {
+    text-decoration: inherit;
+    font-weight: inherit;
+  }
+
+  a.cobalt-layout-stack__item[href]:hover {
+    @include bg-color(neutralAlt);
+  }
+
+  a.cobalt-layout-stack__item[href]:first-child {
+    border-radius: calc(border-radius(xl) - 1px) calc(border-radius(xl) - 1px) 0
+      0;
+  }
+
+  a.cobalt-layout-stack__item[href]:last-child {
+    border-radius: 0 0 calc(border-radius(xl) - 1px)
+      calc(border-radius(xl) - 1px);
+  }
 }
 
 table.cobalt-layout-stack {

package/styles/core/_colors-map.scss

@@ -15,6 +15,9 @@ $theme-colors-map: (
     successAlt: var(--c-background-successAlt),
     connect: var(--c-background-connect),
     connectAlt: var(--c-background-connectAlt),
+    keyExchange: var(--c-background-keyExchange),
+    picked: var(--c-background-picked),
+    rideshare: var(--c-background-rideshare),
     driver: var(--c-background-driver),
     owner: var(--c-background-owner),
     disabled: var(--c-background-disabled),
@@ -26,7 +29,7 @@ $theme-colors-map: (
     seasonVeryhigh: var(--c-background-seasonVeryhigh),
     rental: var(--c-background-rental),
     blocker: var(--c-background-blocker),
-    rideshare: var(--c-background-rideshare),
+    base: var(--c-background-base),
     secondaryInteractive: (
       DEFAULT: var(--c-background-secondaryInteractive),
       hover: var(--c-background-secondaryInteractive--hover)
@@ -54,23 +57,29 @@ $theme-colors-map: (
     accent: var(--c-text-accent),
     accentAlt: var(--c-text-accentAlt),
     info: var(--c-text-info),
+    infoAlt: var(--c-text-infoAlt),
     error: var(--c-text-error),
     errorAlt: var(--c-text-errorAlt),
     success: var(--c-text-success),
     successAlt: var(--c-text-successAlt),
+    warning: var(--c-text-warning),
     connect: var(--c-text-connect),
     connectAlt: var(--c-text-connectAlt),
+    keyExchange: var(--c-text-keyExchange),
+    picked: var(--c-text-picked),
+    rideshare: var(--c-text-rideshare),
     driver: var(--c-text-driver),
     owner: var(--c-text-owner),
-    warning: var(--c-text-warning),
-    infoAlt: var(--c-text-infoAlt),
-    inversed: var(--c-text-inversed),
     disabled: var(--c-text-disabled),
+    inversed: var(--c-text-inversed),
     onAccent: var(--c-text-onAccent),
     onRideshare: var(--c-text-onRideshare),
     onError: var(--c-text-onError),
     onSuccess: var(--c-text-onSuccess),
     onConnect: var(--c-text-onConnect),
+    onKeyExchange: var(--c-text-onKeyExchange),
+    onPicked: var(--c-text-onPicked),
+    onBase: var(--c-text-onBase),
     baseInteractive: (
       DEFAULT: var(--c-text-baseInteractive),
       hover: var(--c-text-baseInteractive--hover)
@@ -94,24 +103,30 @@ $theme-colors-map: (
     accent: var(--c-icon-accent),
     accentAlt: var(--c-icon-accentAlt),
     info: var(--c-icon-info),
+    infoAlt: var(--c-icon-infoAlt),
     error: var(--c-icon-error),
     errorAlt: var(--c-icon-errorAlt),
     success: var(--c-icon-success),
     successAlt: var(--c-icon-successAlt),
+    warning: var(--c-icon-warning),
     connect: var(--c-icon-connect),
     connectAlt: var(--c-icon-connectAlt),
+    keyExchange: var(--c-icon-keyExchange),
+    picked: var(--c-icon-picked),
+    rideshare: var(--c-icon-rideshare),
     driver: var(--c-icon-driver),
     owner: var(--c-icon-owner),
-    inversed: var(--c-icon-inversed),
     disabled: var(--c-icon-disabled),
     disabledAlt: var(--c-icon-disabledAlt),
-    warning: var(--c-icon-warning),
-    infoAlt: var(--c-icon-infoAlt),
+    inversed: var(--c-icon-inversed),
     onAccent: var(--c-icon-onAccent),
-    rideshare: var(--c-icon-rideshare),
     onRideshare: var(--c-icon-onRideshare),
-    onSuccess: var(--c-icon-onSuccess),
     onError: var(--c-icon-onError),
+    onSuccess: var(--c-icon-onSuccess),
+    onConnect: var(--c-icon-onConnect),
+    onKeyExchange: var(--c-icon-onKeyExchange),
+    onPicked: var(--c-icon-onPicked),
+    onBase: var(--c-icon-onBase),
     baseInteractive: (
       DEFAULT: var(--c-icon-baseInteractive),
       hover: var(--c-icon-baseInteractive--hover)
@@ -132,18 +147,27 @@ $theme-colors-map: (
   stroke: (
     base: var(--c-stroke-base),
     subdued: var(--c-stroke-subdued),
+    strong: var(--c-stroke-strong),
     accent: var(--c-stroke-accent),
     accentAlt: var(--c-stroke-accentAlt),
-    success: var(--c-stroke-success),
-    successAlt: var(--c-stroke-successAlt),
     error: var(--c-stroke-error),
     errorAlt: var(--c-stroke-errorAlt),
-    strong: var(--c-stroke-strong),
+    success: var(--c-stroke-success),
+    successAlt: var(--c-stroke-successAlt),
+    connect: var(--c-stroke-connect),
+    keyExchange: var(--c-stroke-keyExchange),
+    picked: var(--c-stroke-picked),
+    rideshare: var(--c-stroke-rideshare),
+    rental: var(--c-stroke-rental),
+    blocker: var(--c-stroke-blocker),
     onAccent: var(--c-stroke-onAccent),
-    rentals: var(--c-stroke-rentals),
-    blokers: var(--c-stroke-blokers),
     onError: var(--c-stroke-onError),
     onSuccess: var(--c-stroke-onSuccess),
+    onConnect: var(--c-stroke-onConnect),
+    onPicked: var(--c-stroke-onPicked),
+    onKeyExchange: var(--c-stroke-onKeyExchange),
+    onRideshare: var(--c-stroke-onRideshare),
+    onBase: var(--c-stroke-onBase),
     baseInteractive: (
       DEFAULT: var(--c-stroke-baseInteractive),
       hover: var(--c-stroke-baseInteractive--hover),
@@ -270,23 +294,23 @@ $theme-colors-map: (
   ),
   fill: (
     base: var(--c-fill-base),
-    accent: var(--c-fill-accent),
-    secondary: var(--c-fill-secondary),
     subdued: var(--c-fill-subdued),
-    neutral: var(--c-fill-neutral),
-    negative: var(--c-fill-negative),
+    secondary: var(--c-fill-secondary),
+    accent: var(--c-fill-accent),
     accentAlt: var(--c-fill-accentAlt),
-    disabled: var(--c-fill-disabled),
     error: var(--c-fill-error),
     success: var(--c-fill-success),
-    rentals: var(--c-fill-rentals),
-    blockers: var(--c-fill-blockers)
+    neutral: var(--c-fill-neutral),
+    negative: var(--c-fill-negative),
+    disabled: var(--c-fill-disabled),
+    rental: var(--c-fill-rental),
+    blocker: var(--c-fill-blocker),
+    primary: var(--c-fill-primary)
   ),
   illustrations: (
     primary: var(--c-illustrations-primary),
     secondary: var(--c-illustrations-secondary),
-    acccent1: var(--c-illustrations-acccent1),
-    accent2: var(--c-illustrations-accent2),
-    foregroundDark: var(--c-illustrations-foregroundDark)
+    accent1: var(--c-illustrations-accent1),
+    accent2: var(--c-illustrations-accent2)
   )
 );