@drivy/cobalt 0.40.0 → 0.42.0

package/cjs/tokens/theme.js

@@ -82,6 +82,7 @@ const text = {
 	onAccent: "white/white",
 	onError: "white/white",
 	onSuccess: "white/white",
+	onConnect: "white/white",
 	onRideShare: "white/white"
 };
 const buttonBackground = {

package/cjs/tokens/theme.js.map

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

package/components/ContainedIcon/index.js

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

package/components/ContainedIcon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/ContainedIcon/index.tsx"],"sourcesContent":["import React from \"react\"\nimport capitalize from \"../utils/capitalize\"\nimport { IconColorsType } from \"../Icon\"\n\ntype Extends<T, U extends T> = U\n\ntype ContainedIconColorType = Extends<\n  IconColorsType,\n  \"base\" | \"accent\" | \"disabled\" | \"error\" | \"info\" | \"success\"\n>\n\nexport type ContainedIconPropsType = {\n  icon: React.JSX.Element\n  color?: ContainedIconColorType\n}\n\nexport function ContainedIcon({\n  icon,\n  color = \"base\",\n}: ContainedIconPropsType) {\n  return (\n    <div\n      className={`cobalt-contained-icon cobalt-contained-icon--color${capitalize(\n        color\n      )}`}\n    >\n      {icon}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;AAgBM,SAAU,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,GAAG,MAAM,GACS,EAAA;AACvB,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,qDAAqD,UAAU,CACxE,KAAK,CACN,CAAE,CAAA,EAAA,EAEF,IAAI,CACD,EACP;AACH;;;;"}

package/components/Icon/index.js

@@ -7,7 +7,7 @@ import eqSet from '../utils/eqSet.js';
 import 'lodash.throttle';
 
 if (!eqSet(new Set(Object.keys(index)), new Set(Object.keys(icons.icons))))
-    throw new Error("Icon sources and tokens are not consistent. Did you add the source, export it and run 'yarn run icons:update'");
+    throw new Error("Icon sources and tokens are not consistent. Did you add the source, export it and run 'pnpm run icons:update'");
 const BUNDLED_ICONS = Object.freeze(Object.keys(icons.icons).reduce((bundledIcons, name) => ({
     ...bundledIcons,
     [name]: index[name],
@@ -48,7 +48,7 @@ const Icon = ({ source, color, size = 24, contained = false, className, }) => {
     });
     const iconSource = BUNDLED_ICONS[source];
     if (iconSource == null)
-        throw new Error(`Icon '${source}' can not be found. Did you add the source, export it and run 'yarn run icons:update'?`);
+        throw new Error(`Icon '${source}' can not be found. Did you add the source, export it and run 'pnpm run icons:update'?`);
     return (React.createElement("span", { className: computedClassName, dangerouslySetInnerHTML: { __html: iconSource } }));
 };
 

package/components/Icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Icon/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport { icons as iconTokens, theme } from \"../../tokens\"\n\nimport * as icons from \"../../icons\"\nimport { eqSet, capitalize } from \"../utils\"\n\nif (\n  !eqSet<string>(\n    new Set(Object.keys(icons)),\n    new Set(Object.keys(iconTokens.icons))\n  )\n)\n  throw new Error(\n    \"Icon sources and tokens are not consistent. Did you add the source, export it and run 'yarn run icons:update'\"\n  )\n\ninterface IconsMap {\n  [name: string]: string | undefined\n}\n\nexport const BUNDLED_ICONS: IconsMap = Object.freeze(\n  Object.keys(iconTokens.icons).reduce(\n    (bundledIcons, name) => ({\n      ...bundledIcons,\n      [name]: (icons as IconsMap)[name],\n    }),\n    {}\n  )\n)\n\nexport type IconSources = keyof typeof iconTokens.icons\n\nconst iconLegacyColorsOptions = [\n  \"amber\",\n  \"blue\",\n  \"coral\",\n  \"graphite\",\n  \"graphiteLight\",\n  \"green\",\n  \"greenDark\",\n  \"greenLight\",\n  \"grey\",\n  \"greyDark\",\n  \"greyLight\",\n  \"greyLighter\",\n  \"indigo\",\n  \"indigoDark\",\n  \"purple\",\n  \"purpleLight\",\n  \"red\",\n  \"turquoise\",\n  \"white\",\n] as const\n\nexport const iconColors = [\n  ...(Object.keys(theme.icon) as Array<keyof typeof theme.icon>),\n  ...iconLegacyColorsOptions,\n]\n\nexport type IconColorsType = (typeof iconColors)[number]\nexport interface IconProps {\n  source: IconSources\n  /**\n   * Available colors\n   * @default base\n   */\n  color?: IconColorsType\n  /**\n   * Available size in px\n   * @default 24\n   */\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\n\nexport const isIconSource = (source: string): source is IconSources =>\n  Object.keys(iconTokens.icons).includes(source)\n\nexport const Icon = ({\n  source,\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${source}`,\n    {\n      [`cobalt-Icon--color${capitalize(color)}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n\n  const iconSource = BUNDLED_ICONS[source]\n\n  if (iconSource == null)\n    throw new Error(\n      `Icon '${source}' can not be found. Did you add the source, export it and run 'yarn run icons:update'?`\n    )\n\n  return (\n    <span\n      className={computedClassName}\n      dangerouslySetInnerHTML={{ __html: iconSource }}\n    />\n  )\n}\n\nexport * from \"./__generated__/index\"\n\nexport default Icon\n"],"names":["icons","iconTokens"],"mappings":";;;;;;;;AAOA,IACE,CAAC,KAAK,CACJ,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAACA,KAAK,CAAC,CAAC,EAC3B,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAACC,KAAU,CAAC,KAAK,CAAC,CAAC,CACvC;AAED,IAAA,MAAM,IAAI,KAAK,CACb,+GAA+G,CAChH,CAAA;AAMU,MAAA,aAAa,GAAa,MAAM,CAAC,MAAM,CAClD,MAAM,CAAC,IAAI,CAACA,KAAU,CAAC,KAAK,CAAC,CAAC,MAAM,CAClC,CAAC,YAAY,EAAE,IAAI,MAAM;AACvB,IAAA,GAAG,YAAY;AACf,IAAA,CAAC,IAAI,GAAID,KAAkB,CAAC,IAAI,CAAC;AAClC,CAAA,CAAC,EACF,EAAE,CACH,EACF;AAID,MAAM,uBAAuB,GAAG;IAC9B,OAAO;IACP,MAAM;IACN,OAAO;IACP,UAAU;IACV,eAAe;IACf,OAAO;IACP,WAAW;IACX,YAAY;IACZ,MAAM;IACN,UAAU;IACV,WAAW;IACX,aAAa;IACb,QAAQ;IACR,YAAY;IACZ,QAAQ;IACR,aAAa;IACb,KAAK;IACL,WAAW;IACX,OAAO;CACC,CAAA;AAEG,MAAA,UAAU,GAAG;AACxB,IAAA,GAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAoC;AAC9D,IAAA,GAAG,uBAAuB;EAC3B;MAmBY,YAAY,GAAG,CAAC,MAAc,KACzC,MAAM,CAAC,IAAI,CAACC,KAAU,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,MAAM,EAAC;MAEnC,IAAI,GAAG,CAAC,EACnB,MAAM,EACN,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,MAAM,CAAA,CAAE,EACpC;QACE,CAAC,CAAA,kBAAA,EAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,CAAA,GAAG,KAAK;QACjD,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AAED,IAAA,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,CAAA;IAExC,IAAI,UAAU,IAAI,IAAI;AACpB,QAAA,MAAM,IAAI,KAAK,CACb,SAAS,MAAM,CAAA,sFAAA,CAAwF,CACxG,CAAA;AAEH,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,iBAAiB,EAC5B,uBAAuB,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,EAAA,CAC/C,EACH;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Icon/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport { icons as iconTokens, theme } from \"../../tokens\"\n\nimport * as icons from \"../../icons\"\nimport { eqSet, capitalize } from \"../utils\"\n\nif (\n  !eqSet<string>(\n    new Set(Object.keys(icons)),\n    new Set(Object.keys(iconTokens.icons))\n  )\n)\n  throw new Error(\n    \"Icon sources and tokens are not consistent. Did you add the source, export it and run 'pnpm run icons:update'\"\n  )\n\ninterface IconsMap {\n  [name: string]: string | undefined\n}\n\nexport const BUNDLED_ICONS: IconsMap = Object.freeze(\n  Object.keys(iconTokens.icons).reduce(\n    (bundledIcons, name) => ({\n      ...bundledIcons,\n      [name]: (icons as IconsMap)[name],\n    }),\n    {}\n  )\n)\n\nexport type IconSources = keyof typeof iconTokens.icons\n\nconst iconLegacyColorsOptions = [\n  \"amber\",\n  \"blue\",\n  \"coral\",\n  \"graphite\",\n  \"graphiteLight\",\n  \"green\",\n  \"greenDark\",\n  \"greenLight\",\n  \"grey\",\n  \"greyDark\",\n  \"greyLight\",\n  \"greyLighter\",\n  \"indigo\",\n  \"indigoDark\",\n  \"purple\",\n  \"purpleLight\",\n  \"red\",\n  \"turquoise\",\n  \"white\",\n] as const\n\nexport const iconColors = [\n  ...(Object.keys(theme.icon) as Array<keyof typeof theme.icon>),\n  ...iconLegacyColorsOptions,\n]\n\nexport type IconColorsType = (typeof iconColors)[number]\nexport interface IconProps {\n  source: IconSources\n  /**\n   * Available colors\n   * @default base\n   */\n  color?: IconColorsType\n  /**\n   * Available size in px\n   * @default 24\n   */\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\n\nexport const isIconSource = (source: string): source is IconSources =>\n  Object.keys(iconTokens.icons).includes(source)\n\nexport const Icon = ({\n  source,\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${source}`,\n    {\n      [`cobalt-Icon--color${capitalize(color)}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n\n  const iconSource = BUNDLED_ICONS[source]\n\n  if (iconSource == null)\n    throw new Error(\n      `Icon '${source}' can not be found. Did you add the source, export it and run 'pnpm run icons:update'?`\n    )\n\n  return (\n    <span\n      className={computedClassName}\n      dangerouslySetInnerHTML={{ __html: iconSource }}\n    />\n  )\n}\n\nexport * from \"./__generated__/index\"\n\nexport default Icon\n"],"names":["icons","iconTokens"],"mappings":";;;;;;;;AAOA,IACE,CAAC,KAAK,CACJ,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAACA,KAAK,CAAC,CAAC,EAC3B,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAACC,KAAU,CAAC,KAAK,CAAC,CAAC,CACvC;AAED,IAAA,MAAM,IAAI,KAAK,CACb,+GAA+G,CAChH,CAAA;AAMU,MAAA,aAAa,GAAa,MAAM,CAAC,MAAM,CAClD,MAAM,CAAC,IAAI,CAACA,KAAU,CAAC,KAAK,CAAC,CAAC,MAAM,CAClC,CAAC,YAAY,EAAE,IAAI,MAAM;AACvB,IAAA,GAAG,YAAY;AACf,IAAA,CAAC,IAAI,GAAID,KAAkB,CAAC,IAAI,CAAC;AAClC,CAAA,CAAC,EACF,EAAE,CACH,EACF;AAID,MAAM,uBAAuB,GAAG;IAC9B,OAAO;IACP,MAAM;IACN,OAAO;IACP,UAAU;IACV,eAAe;IACf,OAAO;IACP,WAAW;IACX,YAAY;IACZ,MAAM;IACN,UAAU;IACV,WAAW;IACX,aAAa;IACb,QAAQ;IACR,YAAY;IACZ,QAAQ;IACR,aAAa;IACb,KAAK;IACL,WAAW;IACX,OAAO;CACC,CAAA;AAEG,MAAA,UAAU,GAAG;AACxB,IAAA,GAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAoC;AAC9D,IAAA,GAAG,uBAAuB;EAC3B;MAmBY,YAAY,GAAG,CAAC,MAAc,KACzC,MAAM,CAAC,IAAI,CAACC,KAAU,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,MAAM,EAAC;MAEnC,IAAI,GAAG,CAAC,EACnB,MAAM,EACN,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,MAAM,CAAA,CAAE,EACpC;QACE,CAAC,CAAA,kBAAA,EAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,CAAA,GAAG,KAAK;QACjD,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AAED,IAAA,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,CAAA;IAExC,IAAI,UAAU,IAAI,IAAI;AACpB,QAAA,MAAM,IAAI,KAAK,CACb,SAAS,MAAM,CAAA,sFAAA,CAAwF,CACxG,CAAA;AAEH,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,iBAAiB,EAC5B,uBAAuB,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,EAAA,CAC/C,EACH;AACH;;;;"}

package/components/PlateNumber/index.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import cx from 'classnames';
+
+const PlateNumber = ({ children, className }) => (React.createElement("div", { className: cx("cobalt-plate-number", className) }, children));
+
+export { PlateNumber };
+//# sourceMappingURL=index.js.map

package/components/PlateNumber/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/PlateNumber/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport type PlateNumberPropsType = React.PropsWithChildren<{\n  className?: string\n}>\n\nexport const PlateNumber = ({ children, className }: PlateNumberPropsType) => (\n  <div className={cx(\"cobalt-plate-number\", className)}>{children}</div>\n)\n"],"names":[],"mappings":";;;AAOa,MAAA,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAwB,MACvE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAAG,EAAA,QAAQ,CAAO;;;;"}

package/components/Popover/index.js

@@ -24,7 +24,7 @@ const MobilePopover = ({ isOpen, children, ariaLabel = "Popover mobile modal", o
 };
 const Popover = ({ isOpen, targetRef, close, "aria-label": ariaLabel, children, bodySpacing = true, onShow, onHidden, 
 // Desktop props
-arrow = false, placement = "bottom-start", flip = true, theme = "", distance = 8, zIndex = zIndexes.dropdown, lazy, }) => {
+arrow = false, placement = "bottom-start", flip = true, theme = "", distance = 8, zIndex = zIndexes.dropdown, appendToBody = false, fitContent = false, lazy, }) => {
     const { breakpoint } = useBreakpoint();
     const isMobile = breakpoint === "sm" || breakpoint === "xs";
     const escListener = useCallback((event) => {
@@ -44,7 +44,7 @@ arrow = false, placement = "bottom-start", flip = true, theme = "", distance = 8
             onShow();
     };
     const TippyComp = lazy ? LazyTippy : Tippy;
-    return isMobile ? (React.createElement(MobilePopover, { isOpen: isOpen, onDismiss: close, bodySpacing: bodySpacing, ariaLabel: ariaLabel, onShow: onShow, onHidden: onHidden }, children)) : (React.createElement(TippyComp, { content: bodySpacing ? (React.createElement("div", { className: "cobalt-popover--bodySpacing" }, children)) : (children), ...defaultTippyProps, visible: isOpen, reference: targetRef, theme: `${defaultTippyProps.theme} ${theme} ${arrow ? "cobalt-popover--withArrow" : ""}`, offset: [0, distance], arrow, placement, zIndex, popperOptions: { modifiers: [{ name: "flip", enabled: flip }] }, onHidden: onTippyClose, onShow: onTippyOpen, onClickOutside: close }));
+    return isMobile ? (React.createElement(MobilePopover, { isOpen: isOpen, onDismiss: close, bodySpacing: bodySpacing, ariaLabel: ariaLabel, onShow: onShow, onHidden: onHidden }, children)) : (React.createElement(TippyComp, { content: bodySpacing ? (React.createElement("div", { className: "cobalt-popover--bodySpacing" }, children)) : (children), ...defaultTippyProps, visible: isOpen, reference: targetRef, theme: `${defaultTippyProps.theme} ${theme} ${arrow ? "cobalt-popover--withArrow" : ""} ${fitContent ? "cobalt-popover--fitContent" : ""}`, offset: [0, distance], arrow, placement, zIndex, popperOptions: { modifiers: [{ name: "flip", enabled: flip }] }, onHidden: onTippyClose, onShow: onTippyOpen, onClickOutside: close, appendTo: appendToBody ? document.body : "parent" }));
 };
 
 export { Popover as default };

package/components/Popover/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import React, { useEffect, useCallback } from \"react\"\nimport Tippy, { TippyProps } from \"@tippyjs/react\"\nimport { sticky } from \"tippy.js\"\n\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport Modal, { ModalPropsType } from \"../Modal\"\nimport LazyTippy from \"./LazyTippy\"\nimport { zIndexes } from \"../../tokens\"\n\nexport type PopoverPropsType = {\n  children?: React.ReactNode\n  isOpen: boolean\n  close: () => void\n  \"aria-label\"?: string\n  bodySpacing?: boolean\n  onShow?: () => void\n  onHidden?: () => void\n  // Desktop props\n  targetRef: TippyProps[\"reference\"]\n  arrow?: boolean\n  placement?: TippyProps[\"placement\"]\n  flip?: boolean\n  theme?: string\n  distance?: number\n  zIndex?: number\n  /**\n   * __Only for desktop popover__\n   *\n   * Allow to render the content only when the popover is mounted in the DOM\n   * Useful to render async content in the popover\n   */\n  lazy?: boolean\n}\n\nconst ESC_KEY_CODE = 27\n\nconst defaultTippyProps: Omit<TippyProps, \"content\" | \"children\" | \"visible\"> =\n  {\n    animation: \"shift-away-subtle\",\n    interactive: true,\n    interactiveBorder: 10,\n    delay: [0, 0],\n    duration: [200, 150],\n    maxWidth: 500,\n    sticky: true,\n    plugins: [sticky],\n    theme: \"light cobalt-popover\",\n    inertia: true,\n  }\n\nconst MobilePopover = ({\n  isOpen,\n  children,\n  ariaLabel = \"Popover mobile modal\",\n  onDismiss,\n  bodySpacing,\n  onShow,\n  onHidden,\n}: {\n  children?: React.ReactNode\n  ariaLabel?: ModalPropsType[\"aria-label\"]\n  isOpen: ModalPropsType[\"isOpen\"]\n  onDismiss?: () => void\n  bodySpacing: ModalPropsType[\"bodySpacing\"]\n  onShow: ModalPropsType[\"onShow\"]\n  onHidden: ModalPropsType[\"onHidden\"]\n}) => {\n  return (\n    <Modal\n      aria-label={ariaLabel}\n      isOpen={isOpen}\n      onDismissAttempt={onDismiss}\n      bodySpacing={bodySpacing}\n      onShow={onShow}\n      onHidden={onHidden}\n    >\n      {children}\n    </Modal>\n  )\n}\n\nconst Popover = ({\n  isOpen,\n  targetRef,\n  close,\n  \"aria-label\": ariaLabel,\n  children,\n  bodySpacing = true,\n  onShow,\n  onHidden,\n  // Desktop props\n  arrow = false,\n  placement = \"bottom-start\",\n  flip = true,\n  theme = \"\",\n  distance = 8,\n  zIndex = zIndexes.dropdown,\n  lazy,\n}: PopoverPropsType) => {\n  const { breakpoint } = useBreakpoint()\n  const isMobile = breakpoint === \"sm\" || breakpoint === \"xs\"\n\n  const escListener = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.keyCode === ESC_KEY_CODE && isOpen) close()\n    },\n    [isOpen, close]\n  )\n\n  useEffect(() => {\n    window.addEventListener(\"keydown\", escListener)\n\n    return () => window.removeEventListener(\"keydown\", escListener)\n  }, [escListener])\n\n  const onTippyClose = () => {\n    if (onHidden) onHidden()\n  }\n\n  const onTippyOpen = () => {\n    if (onShow) onShow()\n  }\n\n  const TippyComp = lazy ? LazyTippy : Tippy\n\n  return isMobile ? (\n    <MobilePopover\n      isOpen={isOpen}\n      onDismiss={close}\n      bodySpacing={bodySpacing}\n      ariaLabel={ariaLabel}\n      onShow={onShow}\n      onHidden={onHidden}\n    >\n      {children}\n    </MobilePopover>\n  ) : (\n    <TippyComp\n      content={\n        bodySpacing ? (\n          <div className=\"cobalt-popover--bodySpacing\">{children}</div>\n        ) : (\n          children\n        )\n      }\n      {...defaultTippyProps}\n      visible={isOpen}\n      reference={targetRef}\n      theme={`${defaultTippyProps.theme} ${theme} ${\n        arrow ? \"cobalt-popover--withArrow\" : \"\"\n      }`}\n      offset={[0, distance]}\n      {...{ arrow, placement, zIndex }}\n      popperOptions={{ modifiers: [{ name: \"flip\", enabled: flip }] }}\n      onHidden={onTippyClose}\n      onShow={onTippyOpen}\n      onClickOutside={close}\n    />\n  )\n}\n\nexport default Popover\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import React, { useEffect, useCallback } from \"react\"\nimport Tippy, { TippyProps } from \"@tippyjs/react\"\nimport { sticky } from \"tippy.js\"\n\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport Modal, { ModalPropsType } from \"../Modal\"\nimport LazyTippy from \"./LazyTippy\"\nimport { zIndexes } from \"../../tokens\"\n\nexport type PopoverPropsType = {\n  children?: React.ReactNode\n  isOpen: boolean\n  close: () => void\n  \"aria-label\"?: string\n  bodySpacing?: boolean\n  onShow?: () => void\n  onHidden?: () => void\n  // Desktop props\n  targetRef: TippyProps[\"reference\"]\n  arrow?: boolean\n  placement?: TippyProps[\"placement\"]\n  flip?: boolean\n  theme?: string\n  distance?: number\n  zIndex?: number\n  appendToBody?: boolean\n  fitContent?: boolean\n  /**\n   * __Only for desktop popover__\n   *\n   * Allow to render the content only when the popover is mounted in the DOM\n   * Useful to render async content in the popover\n   */\n  lazy?: boolean\n}\n\nconst ESC_KEY_CODE = 27\n\nconst defaultTippyProps: Omit<TippyProps, \"content\" | \"children\" | \"visible\"> =\n  {\n    animation: \"shift-away-subtle\",\n    interactive: true,\n    interactiveBorder: 10,\n    delay: [0, 0],\n    duration: [200, 150],\n    maxWidth: 500,\n    sticky: true,\n    plugins: [sticky],\n    theme: \"light cobalt-popover\",\n    inertia: true,\n  }\n\nconst MobilePopover = ({\n  isOpen,\n  children,\n  ariaLabel = \"Popover mobile modal\",\n  onDismiss,\n  bodySpacing,\n  onShow,\n  onHidden,\n}: {\n  children?: React.ReactNode\n  ariaLabel?: ModalPropsType[\"aria-label\"]\n  isOpen: ModalPropsType[\"isOpen\"]\n  onDismiss?: () => void\n  bodySpacing: ModalPropsType[\"bodySpacing\"]\n  onShow: ModalPropsType[\"onShow\"]\n  onHidden: ModalPropsType[\"onHidden\"]\n}) => {\n  return (\n    <Modal\n      aria-label={ariaLabel}\n      isOpen={isOpen}\n      onDismissAttempt={onDismiss}\n      bodySpacing={bodySpacing}\n      onShow={onShow}\n      onHidden={onHidden}\n    >\n      {children}\n    </Modal>\n  )\n}\n\nconst Popover = ({\n  isOpen,\n  targetRef,\n  close,\n  \"aria-label\": ariaLabel,\n  children,\n  bodySpacing = true,\n  onShow,\n  onHidden,\n  // Desktop props\n  arrow = false,\n  placement = \"bottom-start\",\n  flip = true,\n  theme = \"\",\n  distance = 8,\n  zIndex = zIndexes.dropdown,\n  appendToBody = false,\n  fitContent = false,\n  lazy,\n}: PopoverPropsType) => {\n  const { breakpoint } = useBreakpoint()\n  const isMobile = breakpoint === \"sm\" || breakpoint === \"xs\"\n\n  const escListener = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.keyCode === ESC_KEY_CODE && isOpen) close()\n    },\n    [isOpen, close]\n  )\n\n  useEffect(() => {\n    window.addEventListener(\"keydown\", escListener)\n\n    return () => window.removeEventListener(\"keydown\", escListener)\n  }, [escListener])\n\n  const onTippyClose = () => {\n    if (onHidden) onHidden()\n  }\n\n  const onTippyOpen = () => {\n    if (onShow) onShow()\n  }\n\n  const TippyComp = lazy ? LazyTippy : Tippy\n\n  return isMobile ? (\n    <MobilePopover\n      isOpen={isOpen}\n      onDismiss={close}\n      bodySpacing={bodySpacing}\n      ariaLabel={ariaLabel}\n      onShow={onShow}\n      onHidden={onHidden}\n    >\n      {children}\n    </MobilePopover>\n  ) : (\n    <TippyComp\n      content={\n        bodySpacing ? (\n          <div className=\"cobalt-popover--bodySpacing\">{children}</div>\n        ) : (\n          children\n        )\n      }\n      {...defaultTippyProps}\n      visible={isOpen}\n      reference={targetRef}\n      theme={`${defaultTippyProps.theme} ${theme} ${\n        arrow ? \"cobalt-popover--withArrow\" : \"\"\n      } ${fitContent ? \"cobalt-popover--fitContent\" : \"\"}`}\n      offset={[0, distance]}\n      {...{ arrow, placement, zIndex }}\n      popperOptions={{ modifiers: [{ name: \"flip\", enabled: flip }] }}\n      onHidden={onTippyClose}\n      onShow={onTippyOpen}\n      onClickOutside={close}\n      appendTo={appendToBody ? document.body : \"parent\"}\n    />\n  )\n}\n\nexport default Popover\n"],"names":[],"mappings":"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"}

package/components/Tag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tag/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport interface TagProps {\n  children: React.ReactNode\n  className?: string\n  variant?:\n    | \"muted\"\n    | \"important\"\n    | \"importantPrimary\"\n    | \"success\"\n    | \"successPrimary\"\n    | \"info\"\n    | \"accent\"\n    | \"accentPrimary\"\n    | \"connect\"\n}\n\nexport const Tag = ({ children, variant, className }: TagProps) => (\n  <div\n    className={cx(\"cobalt-Tag\", className, {\n      [`cobalt-Tag--${variant}`]: variant,\n    })}\n  >\n    {children}\n  </div>\n)\n"],"names":[],"mappings":";;;AAkBa,MAAA,GAAG,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAY,MAC5D,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE;AACrC,QAAA,CAAC,CAAe,YAAA,EAAA,OAAO,CAAE,CAAA,GAAG,OAAO;AACpC,KAAA,CAAC,EAED,EAAA,QAAQ,CACL;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tag/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport interface TagProps {\n  children: React.ReactNode\n  className?: string\n  variant?:\n    | \"muted\"\n    | \"important\"\n    | \"importantPrimary\"\n    | \"success\"\n    | \"successPrimary\"\n    | \"info\"\n    | \"accent\"\n    | \"accentPrimary\"\n    | \"connect\"\n    | \"connectPrimary\"\n}\n\nexport const Tag = ({ children, variant, className }: TagProps) => (\n  <div\n    className={cx(\"cobalt-Tag\", className, {\n      [`cobalt-Tag--${variant}`]: variant,\n    })}\n  >\n    {children}\n  </div>\n)\n"],"names":[],"mappings":";;;AAmBa,MAAA,GAAG,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAY,MAC5D,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE;AACrC,QAAA,CAAC,CAAe,YAAA,EAAA,OAAO,CAAE,CAAA,GAAG,OAAO;AACpC,KAAA,CAAC,EAED,EAAA,QAAQ,CACL;;;;"}

package/index.js

@@ -16,10 +16,12 @@ export { CalendarRangePicker } from './components/Calendar/CalendarRangePicker/C
 export { CalendarDayPicker } from './components/Calendar/CalendarDayPicker/CalendarDayPicker.js';
 export { Card, CardSection } from './components/Card/index.js';
 export { BUNDLED_ICONS, Icon, iconColors, isIconSource } from './components/Icon/index.js';
+export { ContainedIcon } from './components/ContainedIcon/index.js';
 export { default as Modal } from './components/Modal/index.js';
 export { Note } from './components/Note/index.js';
 export { default as PhotoDropzone } from './components/PhotoDropzone/index.js';
 export { Pill, PillGroup } from './components/Pill/index.js';
+export { PlateNumber } from './components/PlateNumber/index.js';
 export { PriceTable, PriceTableRow } from './components/PriceTable/index.js';
 export { ProgressBar } from './components/ProgressBar/index.js';
 export { ProgressCircular } from './components/ProgressCircular/index.js';

package/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.40.0",
+  "version": "0.42.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",
@@ -11,6 +11,7 @@
   "engines": {
     "node": "^18.15.0"
   },
+  "packageManager": "pnpm@8.15.3",
   "module": "src/index.js",
   "license": "MIT",
   "author": {
@@ -35,8 +36,8 @@
     "date-fns": "2.30.0",
     "lodash.throttle": "4.1.1",
     "media-typer": "1.1.0",
-    "nanoid": "5.0.4",
-    "postcss": "8.4.33",
+    "nanoid": "5.0.5",
+    "postcss": "8.4.35",
     "tailwindcss": "2.2.19",
     "tippy.js": "6.3.7"
   },
@@ -45,48 +46,51 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@getaround-eu/babel-preset-app": "1.4.4",
-    "@getaround-eu/eslint-config": "3.0.0",
-    "@getaround-eu/prettier-config": "1.2.0",
-    "@getaround-eu/stylelint-config": "3.0.0",
-    "@getaround-eu/ts-config": "2.2.0",
+    "@getaround-eu/babel-preset-app": "1.4.5",
+    "@getaround-eu/eslint-config": "3.1.0",
+    "@getaround-eu/prettier-config": "1.2.1",
+    "@getaround-eu/stylelint-config": "3.0.1",
+    "@getaround-eu/ts-config": "2.2.1",
     "@percy/storybook": "4.3.6",
     "@rollup/plugin-json": "6.1.0",
     "@rushstack/eslint-patch": "1.7.2",
-    "@storybook/addon-essentials": "7.6.10",
-    "@storybook/addons": "7.6.10",
-    "@storybook/blocks": "7.6.10",
-    "@storybook/react": "7.6.10",
-    "@storybook/react-webpack5": "7.6.10",
+    "@storybook/addon-essentials": "7.6.14",
+    "@storybook/addons": "7.6.14",
+    "@storybook/blocks": "7.6.14",
+    "@storybook/react": "7.6.14",
+    "@storybook/react-webpack5": "7.6.14",
     "@svgr/cli": "7.0.0",
-    "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/react": "14.1.2",
+    "@testing-library/jest-dom": "6.4.0",
+    "@testing-library/react": "14.2.1",
     "@testing-library/react-hooks": "8.0.1",
-    "@types/classnames": "2.3.1",
-    "@types/jest": "29.5.11",
+    "@types/fs-extra": "11.0.4",
+    "@types/jest": "29.5.12",
     "@types/lodash.throttle": "4.1.9",
     "@types/media-typer": "1.1.3",
-    "@types/prettier": "3.0.0",
-    "@types/react-dom": "18.2.18",
+    "@types/node": "20.11.13",
+    "@types/react": "18.2.55",
+    "@types/react-dom": "18.2.19",
     "autoprefixer": "10.4.17",
     "core-js": "3.35.1",
-    "css-loader": "6.9.1",
+    "css-loader": "6.10.0",
     "eslint": "8.56.0",
     "eslint-plugin-storybook": "^0.6.15",
     "file-loader": "6.2.0",
+    "fs-extra": "11.2.0",
+    "html-entities": "2.4.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "nested-object-access": "^0.2.5",
-    "np": "8.0.4",
+    "np": "10.0.0",
     "postcss-flexbugs-fixes": "5.0.2",
     "postcss-loader": "7.3.4",
-    "prettier": "3.2.4",
+    "prettier": "3.2.5",
     "raw-loader": "4.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-syntax-highlighter": "15.5.0",
     "react-test-renderer": "18.2.0",
-    "react-textarea-autosize": "^8.5.3",
+    "react-textarea-autosize": "8.5.3",
     "regenerator-runtime": "0.14.1",
     "remark-gfm": "^3.0.1",
     "rollup": "2.79.1",
@@ -96,9 +100,9 @@
     "rollup-plugin-typescript2": "0.36.0",
     "sass": "1.70.0",
     "sass-loader": "13.3.3",
-    "sharp": "0.32.6",
+    "sharp": "0.33.2",
     "sharp-cli": "4.2.0",
-    "storybook": "7.6.10",
+    "storybook": "7.6.14",
     "style-loader": "3.3.4",
     "stylelint": "15.11.0",
     "svg2vectordrawable": "2.9.1",
@@ -107,27 +111,6 @@
     "ts-node": "10.9.2",
     "typescript": "5.3.3"
   },
-  "scripts": {
-    "build": "./scripts/build.sh",
-    "build:dev": "yarn build && yalc publish dist/",
-    "build:publish": "yarn build && yarn np --contents dist",
-    "deploy": "./scripts/publishToBranch.sh",
-    "lint": "yarn lint:prettier && yarn lint:css && yarn lint:js",
-    "lint:prettier": "prettier --list-different \"src/**/*.scss\"",
-    "lint:css": "stylelint \"src/**/*.scss\"",
-    "lint:js": "eslint src/components --ext ts,tsx,js,jsx --max-warnings 0 ",
-    "scss:vars": "node -e 'console.log(require(\"./utils/tailwindcssThemeHelpers.js\").getFlattenedTheme())'",
-    "binary": "./scripts/buildCobaltBinary.sh",
-    "storybook": "storybook dev -p 6006",
-    "storybook:build": "storybook build",
-    "build:icons": "./scripts/buildIcons.sh",
-    "build:illustrations": "./scripts/buildIllustrations.sh",
-    "build:theme": "ts-node-esm ./scripts/buildThemeCSSVariables.mts",
-    "test": "jest",
-    "percy": "storybook build && percy-storybook --widths=320,1280",
-    "typecheck": "tsc",
-    "version": "cp package.json dist/package.json"
-  },
   "keywords": [
     "drivy",
     "cobalt"
@@ -151,5 +134,26 @@
   },
   "resolutions": {
     "jackspeak": "2.1.1"
+  },
+  "scripts": {
+    "build": "./scripts/build.sh",
+    "build:dev": "pnpm build && yalc publish dist/",
+    "build:publish": "pnpm build && pnpm np --contents dist",
+    "deploy": "./scripts/publishToBranch.sh",
+    "lint": "pnpm lint:prettier && pnpm lint:css && pnpm lint:js",
+    "lint:prettier": "prettier --list-different \"src/**/*.scss\"",
+    "lint:css": "stylelint \"src/**/*.scss\"",
+    "lint:js": "eslint src/components --ext ts,tsx,js,jsx --max-warnings 0 ",
+    "scss:vars": "node -e 'console.log(require(\"./utils/tailwindcssThemeHelpers.js\").getFlattenedTheme())'",
+    "binary": "./scripts/buildCobaltBinary.sh",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
+    "build:icons": "./scripts/buildIcons.sh",
+    "build:illustrations": "./scripts/buildIllustrations.sh",
+    "build:theme": "ts-node-esm ./scripts/buildThemeCSSVariables.mts",
+    "test": "jest",
+    "percy": "storybook build && percy-storybook --widths=320,1280",
+    "typecheck": "tsc",
+    "version": "cp package.json dist/package.json"
   }
-}
+}

package/styles/components/ContainedIcon/index.scss

@@ -0,0 +1,62 @@
+.cobalt-contained-icon {
+  @include bg-color(neutralAlt);
+
+  --containerSize: 40px;
+
+  width: var(--containerSize);
+  height: var(--containerSize);
+
+  display: flex;
+
+  justify-content: center;
+  align-items: center;
+
+  border-radius: border-radius(md);
+
+  .cobalt-Icon {
+    @include semantic-color(icon, base, fill);
+
+    width: 24px;
+    height: 24px;
+  }
+
+  &--colorAccent {
+    @include bg-color(accentAlt);
+
+    .cobalt-Icon {
+      @include semantic-color(icon, accent, fill);
+    }
+  }
+
+  &--colorDisabled {
+    @include bg-color(disabled);
+
+    .cobalt-Icon {
+      @include semantic-color(icon, subdued, fill);
+    }
+  }
+
+  &--colorError {
+    @include bg-color(errorAlt);
+
+    .cobalt-Icon {
+      @include semantic-color(icon, error, fill);
+    }
+  }
+
+  &--colorInfo {
+    @include bg-color(info);
+
+    .cobalt-Icon {
+      @include semantic-color(icon, info, fill);
+    }
+  }
+
+  &--colorSuccess {
+    @include bg-color(successAlt);
+
+    .cobalt-Icon {
+      @include semantic-color(icon, successAlt, fill);
+    }
+  }
+}

package/styles/components/Icon/index.scss

@@ -29,7 +29,7 @@
     width: 40px;
     padding: math.div(40px - 24px, 2);
 
-    border-radius: 50%;
+    border-radius: border-radius(md);
   }
 
   &Icon--size16 {
@@ -65,6 +65,8 @@
       width: 52px;
 
       padding: math.div(52px - 32px, 2);
+
+      border-radius: border-radius(lg);
     }
   }
 

package/styles/components/PlateNumber/index.scss

@@ -0,0 +1,19 @@
+.cobalt-plate-number {
+  @include border(base);
+  @include bg-color(primary);
+  @include text-color(base);
+
+  display: inline-block;
+
+  height: 20px;
+
+  padding: 2px spacing("2xs");
+
+  font-size: 14px;
+
+  font-weight: 600;
+
+  line-height: 14px;
+
+  border-radius: border-radius();
+}

package/styles/components/Popover/index.scss

@@ -36,6 +36,12 @@
   }
 }
 
+[data-theme~="cobalt-popover--fitContent"] {
+  .tippy-content {
+    min-width: auto;
+  }
+}
+
 [data-theme~="cobalt-popover--withArrow"] {
   &.tippy-box {
     border-radius: border-radius(xl);

package/styles/components/Tag/index.scss

@@ -1,15 +1,19 @@
 .cobalt- {
   &Tag {
-    @include bg-color(neutral);
+    @include bg-color(neutralAlt);
     @include text-color(base);
     display: inline-block;
 
-    padding: spacing("2xs") spacing(xs);
+    height: 20px;
 
-    font-size: 13px;
+    padding: 2px spacing("2xs");
+
+    font-size: 14px;
 
     font-weight: 600;
 
+    line-height: 16px;
+
     border-radius: border-radius();
   }
 
@@ -23,7 +27,7 @@
   }
 
   &Tag--importantPrimary {
-    @include text-color(inversed);
+    @include text-color(onError);
     @include bg-color(error);
   }
 
@@ -33,7 +37,7 @@
   }
 
   &Tag--successPrimary {
-    @include text-color(inversed);
+    @include text-color(onSuccess);
     @include bg-color(success);
   }
 
@@ -48,7 +52,7 @@
   }
 
   &Tag--accentPrimary {
-    @include text-color(inversed);
+    @include text-color(onAccent);
     @include bg-color(accent);
   }
 
@@ -56,4 +60,9 @@
     @include text-color(connectAlt);
     @include bg-color(connectAlt);
   }
+
+  &Tag--connectPrimary {
+    @include text-color(onConnect);
+    @include bg-color(connect);
+  }
 }

package/styles/components.scss

@@ -32,3 +32,5 @@
 @import "./components/Rating/index";
 @import "./components/ProgressCircular/index";
 @import "./components/ProgressBanner/index";
+@import "./components/ContainedIcon/index";
+@import "./components/PlateNumber/index";

package/styles/core/_colors-map.scss

@@ -83,6 +83,7 @@ $theme-colors-map: (
     onAccent: var(--c-text-onAccent),
     onError: var(--c-text-onError),
     onSuccess: var(--c-text-onSuccess),
+    onConnect: var(--c-text-onConnect),
     onRideShare: var(--c-text-onRideShare)
   ),
   buttonBackground: (

package/styles/core/default-theme.scss

@@ -62,6 +62,7 @@
   --c-text-onAccent: var(--c-white);
   --c-text-onError: var(--c-white);
   --c-text-onSuccess: var(--c-white);
+  --c-text-onConnect: var(--c-white);
   --c-text-onRideShare: var(--c-white);
   --c-buttonBackground-selected: var(--c-purple-100);
   --c-buttonBackground-destructiveInteractive: var(--c-red-100);