@drivy/cobalt 0.46.3 → 0.47.0

package/cjs/tokens/icons.js

@@ -287,6 +287,7 @@ const icons = {
 	utilityVanMedium: "utility-van-medium.svg",
 	utilityVanSmall: "utility-van-small.svg",
 	verifiedSeal: "verified-seal.svg",
+	video: "video.svg",
 	walk: "walk.svg",
 	wallet: "wallet.svg",
 	warningCircleFilled: "warning-circle-filled.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/palette.js

@@ -7,7 +7,7 @@ const purple = {
 	"100": "#F8F2F8",
 	"200": "#F0E1EE",
 	"300": "#DB97D5",
-	"400": "#C758BD",
+	"400": "#D54AC8",
 	"500": "#B01AA7",
 	"600": "#A6199D",
 	"700": "#901588",

package/cjs/tokens/theme.js

@@ -163,7 +163,7 @@ const stroke = {
 	strong: "grey.300/grey.700",
 	onAccent: "white/grey.100",
 	rental: "blue.700/blue.500",
-	blocker: "grey.200/black.50",
+	blocker: "grey.300/grey.500",
 	onError: "white/white",
 	onSuccess: "white/white",
 	connect: "newPurple.500/newPurple.200",
@@ -194,7 +194,7 @@ const stroke = {
 const buttonIcon = {
 	selected: "purple.500/grey.100",
 	primary: "white/black.1000",
-	secondary: "purple.500/purple.300",
+	secondary: "purple.500/purple.400",
 	tertiary: "purple.500/white",
 	destructive: "red.500/red.200",
 	success: "white/green.100",
@@ -207,7 +207,7 @@ const buttonIcon = {
 		press: "white/black.1000"
 	},
 	secondaryInteractive: {
-		DEFAULT: "purple.500/purple.300",
+		DEFAULT: "purple.500/purple.400",
 		hover: "purple.500/purple.300",
 		press: "purple.900/purple.900"
 	},
@@ -230,7 +230,7 @@ const buttonIcon = {
 const buttonLabel = {
 	selected: "purple.500/grey.100",
 	primary: "white/black.1000",
-	secondary: "purple.500/purple.300",
+	secondary: "purple.500/purple.400",
 	tertiary: "purple.500/white",
 	disabled: "navy.300/grey.300",
 	accentAlt: "purple.500/grey.100",
@@ -243,7 +243,7 @@ const buttonLabel = {
 		press: "white/black.1000"
 	},
 	secondaryInteractive: {
-		DEFAULT: "purple.500/purple.300",
+		DEFAULT: "purple.500/purple.400",
 		hover: "purple.700/purple.300",
 		press: "purple.900/purple.900"
 	},

package/components/Icon/__generated__/VideoIcon.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import capitalize from '../../utils/capitalize.js';
+import 'lodash.throttle';
+import cx from 'classnames';
+
+const iconSource = "video";
+const VideoIcon = ({ color, size = 24, contained = false, className, }) => {
+    const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
+        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        "cobalt-Icon--size16": size === 16,
+        "cobalt-Icon--size20": size === 20,
+        "cobalt-Icon--size32": size === 32,
+        "cobalt-Icon--contained": contained,
+    });
+    const wrap = (content) => (React.createElement("span", { className: computedClassName }, content));
+    return wrap(React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+        React.createElement("path", { d: "m9.5 16.5 7-4.5-7-4.5zM12 22a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20" })));
+};
+
+export { VideoIcon as default };
+//# sourceMappingURL=VideoIcon.js.map

package/components/Icon/__generated__/VideoIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoIcon.js","sources":["../../../../src/components/Icon/__generated__/VideoIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColorsType\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"video\"\nconst VideoIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\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  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n  return wrap(\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n      <path d=\"m9.5 16.5 7-4.5-7-4.5zM12 22a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20\" />\n    </svg>\n  )\n}\nexport default VideoIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,OAAO,CAAA;AAC1B,MAAM,SAAS,GAAG,CAAC,EACjB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;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;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,sdAAsd,EAAG,CAAA,CAC7d,CACP,CAAA;AACH;;;;"}

package/components/Sidepanel/index.js

@@ -0,0 +1,59 @@
+import React, { useState, useEffect } from 'react';
+import cx from 'classnames';
+import Modal from '../Modal/index.js';
+import useBreakpoint from '../../hooks/useBreakpoint.js';
+import '../Icon/index.js';
+import ReactDOM from 'react-dom';
+import CloseIcon from '../Icon/__generated__/CloseIcon.js';
+
+const SidepanelFooter = ({ children, className }) => {
+    return (React.createElement("div", { className: cx("c-p-sm c-border-t c-border-base", className) }, children));
+};
+// Memoized component to not render content when the panel is collapsing
+function _SidepanelContent({ title, close, children }) {
+    return (React.createElement(React.Fragment, null,
+        title && (React.createElement("div", { className: "c-flex c-gap-sm c-items-center c-px-sm c-py-md c-border-b c-border-base" },
+            React.createElement("div", { className: "c-text-title-md c-flex-1" }, title),
+            close && (React.createElement("div", { className: "c-w-md c-cursor-pointer", onClick: close },
+                React.createElement(CloseIcon, { size: 24 }))))),
+        children));
+}
+function areSidepanelContentEqual(_prevProps, nextProps) {
+    return !nextProps.isOpen;
+}
+const SidepanelContent = React.memo(_SidepanelContent, areSidepanelContentEqual);
+SidepanelContent.displayName = "SidepanelContent";
+// Only for the API, render nothing
+const SidepanelFooterAPI = (_props) => null;
+const isSidepanelFooterAPIComponent = (component) => React.isValidElement(component) && component.type === SidepanelFooterAPI;
+const _Sidepanel = ({ isOpen, title, close, children }) => {
+    const { isMobile } = useBreakpoint();
+    // To display box-shadow when visible. We can't rely on isOpen because it triggers the collapse animation and so the box shadow would not be set during the transition
+    const [isPanelVisible, setIsPanelVisible] = useState(false);
+    useEffect(() => {
+        isOpen && setIsPanelVisible(true);
+    }, [isOpen]);
+    const sidepanelFooter = React.Children.toArray(children).find((c) => isSidepanelFooterAPIComponent(c));
+    let footer = null;
+    if (React.isValidElement(sidepanelFooter)) {
+        footer = isMobile ? (React.createElement(Modal.Footer, { ...sidepanelFooter.props })) : (React.createElement(SidepanelFooter, { ...sidepanelFooter.props }));
+    }
+    return isMobile ? (React.createElement(Modal, { "aria-label": "Sidepanel", isOpen: isOpen, bodySpacing: false, close: close, title: title },
+        children,
+        footer)) : (ReactDOM.createPortal(React.createElement("div", { className: cx("cobalt-sidepanel", {
+            "cobalt-sidepanel--show": isOpen,
+            "cobalt-sidepanel--visible": isPanelVisible,
+        }), onTransitionEnd: () => {
+            !isOpen && setIsPanelVisible(false);
+        } },
+        React.createElement(SidepanelContent, { isOpen: isOpen, title: title, close: close },
+            children,
+            footer)), document.body));
+};
+_Sidepanel.displayName = "Sidepanel";
+const Sidepanel = Object.assign(_Sidepanel, {
+    Footer: SidepanelFooterAPI,
+});
+
+export { Sidepanel };
+//# sourceMappingURL=index.js.map

package/components/Sidepanel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Sidepanel/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport cx from \"classnames\"\nimport Modal from \"../Modal\"\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport { CloseIcon } from \"../Icon\"\nimport ReactDOM from \"react-dom\"\n\ntype SidepanelFooterPropsType = React.PropsWithChildren<{\n  className?: string\n}>\n\nconst SidepanelFooter = ({ children, className }: SidepanelFooterPropsType) => {\n  return (\n    <div className={cx(\"c-p-sm c-border-t c-border-base\", className)}>\n      {children}\n    </div>\n  )\n}\n\ntype SidepanelPropsType = React.PropsWithChildren<{\n  isOpen: boolean\n  title?: string\n  close?: () => void\n}>\n\n// Memoized component to not render content when the panel is collapsing\nfunction _SidepanelContent({ title, close, children }: SidepanelPropsType) {\n  return (\n    <>\n      {title && (\n        <div className=\"c-flex c-gap-sm c-items-center c-px-sm c-py-md c-border-b c-border-base\">\n          <div className=\"c-text-title-md c-flex-1\">{title}</div>\n          {close && (\n            <div className=\"c-w-md c-cursor-pointer\" onClick={close}>\n              <CloseIcon size={24} />\n            </div>\n          )}\n        </div>\n      )}\n      {children}\n    </>\n  )\n}\n\nfunction areSidepanelContentEqual(\n  _prevProps: SidepanelPropsType,\n  nextProps: SidepanelPropsType\n) {\n  return !nextProps.isOpen\n}\n\nconst SidepanelContent = React.memo(_SidepanelContent, areSidepanelContentEqual)\nSidepanelContent.displayName = \"SidepanelContent\"\n\n// Only for the API, render nothing\nconst SidepanelFooterAPI = (_props: SidepanelFooterPropsType) => null\n\nconst isSidepanelFooterAPIComponent = (\n  component: React.ReactNode\n): component is React.ReactElement<SidepanelFooterPropsType> =>\n  React.isValidElement(component) && component.type === SidepanelFooterAPI\n\nconst _Sidepanel = ({ isOpen, title, close, children }: SidepanelPropsType) => {\n  const { isMobile } = useBreakpoint()\n\n  // To display box-shadow when visible. We can't rely on isOpen because it triggers the collapse animation and so the box shadow would not be set during the transition\n  const [isPanelVisible, setIsPanelVisible] = useState(false)\n\n  useEffect(() => {\n    isOpen && setIsPanelVisible(true)\n  }, [isOpen])\n\n  const sidepanelFooter = React.Children.toArray(children).find((c) =>\n    isSidepanelFooterAPIComponent(c)\n  )\n\n  let footer: React.ReactNode = null\n  if (React.isValidElement(sidepanelFooter)) {\n    footer = isMobile ? (\n      <Modal.Footer {...sidepanelFooter.props}></Modal.Footer>\n    ) : (\n      <SidepanelFooter {...sidepanelFooter.props} />\n    )\n  }\n\n  return isMobile ? (\n    <Modal\n      aria-label={\"Sidepanel\"}\n      isOpen={isOpen}\n      bodySpacing={false}\n      close={close}\n      title={title}\n    >\n      {children}\n      {footer}\n    </Modal>\n  ) : (\n    ReactDOM.createPortal(\n      <div\n        className={cx(\"cobalt-sidepanel\", {\n          \"cobalt-sidepanel--show\": isOpen,\n          \"cobalt-sidepanel--visible\": isPanelVisible,\n        })}\n        onTransitionEnd={() => {\n          !isOpen && setIsPanelVisible(false)\n        }}\n      >\n        <SidepanelContent isOpen={isOpen} title={title} close={close}>\n          {children}\n          {footer}\n        </SidepanelContent>\n      </div>,\n      document.body\n    )\n  )\n}\n\n_Sidepanel.displayName = \"Sidepanel\"\n\nexport const Sidepanel = Object.assign(_Sidepanel, {\n  Footer: SidepanelFooterAPI,\n})\n"],"names":[],"mappings":"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"}

package/icons/index.js

@@ -282,6 +282,7 @@ export { default as utilityVanLarge } from './utility-van-large.js';
 export { default as utilityVanMedium } from './utility-van-medium.js';
 export { default as utilityVanSmall } from './utility-van-small.js';
 export { default as verifiedSeal } from './verified-seal.js';
+export { default as video } from './video.js';
 export { default as walk } from './walk.js';
 export { default as wallet } from './wallet.js';
 export { default as warningCircleFilled } from './warning-circle-filled.js';

package/icons/index.js.map

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

package/icons/video.js

@@ -0,0 +1,4 @@
+var video = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"m9.5 16.5 7-4.5-7-4.5zM12 22a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20\"/></svg>";
+
+export { video as default };
+//# sourceMappingURL=video.js.map

package/icons/video.js.map

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

package/icons/video.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m9.5 16.5 7-4.5-7-4.5zM12 22a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20"/></svg>

package/index.js

@@ -26,6 +26,7 @@ export { PriceTable, PriceTableRow } from './components/PriceTable/index.js';
 export { ProgressBar } from './components/ProgressBar/index.js';
 export { ProgressCircular } from './components/ProgressCircular/index.js';
 export { ProgressBanner } from './components/ProgressBanner/index.js';
+export { Sidepanel } from './components/Sidepanel/index.js';
 export { Tab, Tabs } from './components/Tabs/index.js';
 export { Tag } from './components/Tag/index.js';
 export { Chip } from './components/Chip/index.js';
@@ -336,6 +337,7 @@ export { default as UtilityVanLargeIcon } from './components/Icon/__generated__/
 export { default as UtilityVanMediumIcon } from './components/Icon/__generated__/UtilityVanMediumIcon.js';
 export { default as UtilityVanSmallIcon } from './components/Icon/__generated__/UtilityVanSmallIcon.js';
 export { default as VerifiedSealIcon } from './components/Icon/__generated__/VerifiedSealIcon.js';
+export { default as VideoIcon } from './components/Icon/__generated__/VideoIcon.js';
 export { default as WalkIcon } from './components/Icon/__generated__/WalkIcon.js';
 export { default as WalletIcon } from './components/Icon/__generated__/WalletIcon.js';
 export { default as WarningCircleFilledIcon } from './components/Icon/__generated__/WarningCircleFilledIcon.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.46.3",
+  "version": "0.47.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/src/index.d.ts",

package/styles/core/default-theme.scss

@@ -131,7 +131,7 @@
   --c-stroke-strong: var(--c-grey-300);
   --c-stroke-onAccent: var(--c-white);
   --c-stroke-rental: var(--c-blue-700);
-  --c-stroke-blocker: var(--c-grey-200);
+  --c-stroke-blocker: var(--c-grey-300);
   --c-stroke-onError: var(--c-white);
   --c-stroke-onSuccess: var(--c-white);
   --c-stroke-connect: var(--c-newPurple-500);

package/styles/core/palette.scss

@@ -7,7 +7,7 @@
   --c-purple-100: #f8f2f8;
   --c-purple-200: #f0e1ee;
   --c-purple-300: #db97d5;
-  --c-purple-400: #c758bd;
+  --c-purple-400: #d54ac8;
   --c-purple-500: #b01aa7;
   --c-purple-600: #a6199d;
   --c-purple-700: #901588;

package/styles/core/theme.scss

@@ -131,7 +131,7 @@
   --c-stroke-strong: var(--c-grey-300);
   --c-stroke-onAccent: var(--c-white);
   --c-stroke-rental: var(--c-blue-700);
-  --c-stroke-blocker: var(--c-grey-200);
+  --c-stroke-blocker: var(--c-grey-300);
   --c-stroke-onError: var(--c-white);
   --c-stroke-onSuccess: var(--c-white);
   --c-stroke-connect: var(--c-newPurple-500);
@@ -372,7 +372,7 @@
   --c-stroke-strong: var(--c-grey-700);
   --c-stroke-onAccent: var(--c-grey-100);
   --c-stroke-rental: var(--c-blue-500);
-  --c-stroke-blocker: var(--c-black-50);
+  --c-stroke-blocker: var(--c-grey-500);
   --c-stroke-onError: var(--c-white);
   --c-stroke-onSuccess: var(--c-white);
   --c-stroke-connect: var(--c-newPurple-200);
@@ -395,7 +395,7 @@
   --c-stroke-strongInteractive--press: var(--c-black-100);
   --c-buttonIcon-selected: var(--c-grey-100);
   --c-buttonIcon-primary: var(--c-black-1000);
-  --c-buttonIcon-secondary: var(--c-purple-300);
+  --c-buttonIcon-secondary: var(--c-purple-400);
   --c-buttonIcon-tertiary: var(--c-white);
   --c-buttonIcon-destructive: var(--c-red-200);
   --c-buttonIcon-success: var(--c-green-100);
@@ -405,7 +405,7 @@
   --c-buttonIcon-primaryInteractive: var(--c-black-1000);
   --c-buttonIcon-primaryInteractive--hover: var(--c-black-1000);
   --c-buttonIcon-primaryInteractive--press: var(--c-black-1000);
-  --c-buttonIcon-secondaryInteractive: var(--c-purple-300);
+  --c-buttonIcon-secondaryInteractive: var(--c-purple-400);
   --c-buttonIcon-secondaryInteractive--hover: var(--c-purple-300);
   --c-buttonIcon-secondaryInteractive--press: var(--c-purple-900);
   --c-buttonIcon-tertiaryInteractive: var(--c-white);
@@ -419,7 +419,7 @@
   --c-buttonIcon-successAltInteractive--press: var(--c-green-100);
   --c-buttonLabel-selected: var(--c-grey-100);
   --c-buttonLabel-primary: var(--c-black-1000);
-  --c-buttonLabel-secondary: var(--c-purple-300);
+  --c-buttonLabel-secondary: var(--c-purple-400);
   --c-buttonLabel-tertiary: var(--c-white);
   --c-buttonLabel-disabled: var(--c-grey-300);
   --c-buttonLabel-accentAlt: var(--c-grey-100);
@@ -429,7 +429,7 @@
   --c-buttonLabel-primaryInteractive: var(--c-black-1000);
   --c-buttonLabel-primaryInteractive--hover: var(--c-black-1000);
   --c-buttonLabel-primaryInteractive--press: var(--c-black-1000);
-  --c-buttonLabel-secondaryInteractive: var(--c-purple-300);
+  --c-buttonLabel-secondaryInteractive: var(--c-purple-400);
   --c-buttonLabel-secondaryInteractive--hover: var(--c-purple-300);
   --c-buttonLabel-secondaryInteractive--press: var(--c-purple-900);
   --c-buttonLabel-tertiaryInteractive: var(--c-white);

package/tokens/icons.js

@@ -283,6 +283,7 @@ const icons = {
 	utilityVanMedium: "utility-van-medium.svg",
 	utilityVanSmall: "utility-van-small.svg",
 	verifiedSeal: "verified-seal.svg",
+	video: "video.svg",
 	walk: "walk.svg",
 	wallet: "wallet.svg",
 	warningCircleFilled: "warning-circle-filled.svg",

package/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/tokens/palette.js

@@ -3,7 +3,7 @@ const purple = {
 	"100": "#F8F2F8",
 	"200": "#F0E1EE",
 	"300": "#DB97D5",
-	"400": "#C758BD",
+	"400": "#D54AC8",
 	"500": "#B01AA7",
 	"600": "#A6199D",
 	"700": "#901588",

package/tokens/theme.js

@@ -159,7 +159,7 @@ const stroke = {
 	strong: "grey.300/grey.700",
 	onAccent: "white/grey.100",
 	rental: "blue.700/blue.500",
-	blocker: "grey.200/black.50",
+	blocker: "grey.300/grey.500",
 	onError: "white/white",
 	onSuccess: "white/white",
 	connect: "newPurple.500/newPurple.200",
@@ -190,7 +190,7 @@ const stroke = {
 const buttonIcon = {
 	selected: "purple.500/grey.100",
 	primary: "white/black.1000",
-	secondary: "purple.500/purple.300",
+	secondary: "purple.500/purple.400",
 	tertiary: "purple.500/white",
 	destructive: "red.500/red.200",
 	success: "white/green.100",
@@ -203,7 +203,7 @@ const buttonIcon = {
 		press: "white/black.1000"
 	},
 	secondaryInteractive: {
-		DEFAULT: "purple.500/purple.300",
+		DEFAULT: "purple.500/purple.400",
 		hover: "purple.500/purple.300",
 		press: "purple.900/purple.900"
 	},
@@ -226,7 +226,7 @@ const buttonIcon = {
 const buttonLabel = {
 	selected: "purple.500/grey.100",
 	primary: "white/black.1000",
-	secondary: "purple.500/purple.300",
+	secondary: "purple.500/purple.400",
 	tertiary: "purple.500/white",
 	disabled: "navy.300/grey.300",
 	accentAlt: "purple.500/grey.100",
@@ -239,7 +239,7 @@ const buttonLabel = {
 		press: "white/black.1000"
 	},
 	secondaryInteractive: {
-		DEFAULT: "purple.500/purple.300",
+		DEFAULT: "purple.500/purple.400",
 		hover: "purple.700/purple.300",
 		press: "purple.900/purple.900"
 	},

package/types/src/components/Form/Autocomplete/index.d.ts

@@ -23,7 +23,7 @@ type Props = {
     renderItem?: (item: AutocompleteItem, term: string) => React.ReactNode;
 } & FormElement & React.InputHTMLAttributes<HTMLInputElement>;
 declare const wrappedComponent: React.ComponentClass<{
-    icon?: "map" | "search" | "filter" | "accountDetails" | "addPicture" | "airConditioning" | "airport" | "android" | "antique" | "arrowLeftCircleFilled" | "arrowLeft" | "arrowRightCircleFilled" | "arrowRightCircle" | "arrowRight" | "audioInput" | "babySeat" | "battery" | "bell" | "bikeRack" | "bin" | "bluetooth" | "briefcase" | "bulb" | "cable" | "cabriolet" | "calendarCheck" | "calendarClock" | "calendarEnd" | "calendarStart" | "calendar" | "cameraAdd" | "camera" | "campervan" | "carAdd" | "carCheck" | "carDamages" | "carDrivyOpen" | "carGroup" | "carLock" | "carPlay" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "card" | "cdPlayer" | "certificate" | "chains" | "checkCircleFilled" | "checkCircle" | "check" | "checklist" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circledArrowRight" | "city" | "cleaning" | "clockAlert" | "clockBackwards" | "clockForwards" | "clock" | "closeCircleFilled" | "close" | "collapse" | "connectCar" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "contract" | "convertible" | "copy" | "coupe" | "creditCardAdd" | "creditCardError" | "creditCard" | "cruiseControl" | "dashcam" | "directions" | "document" | "dotHorizontal" | "dotVertical" | "dotsHorizontal" | "dotsVertical" | "download" | "earning" | "earth" | "edit" | "electric" | "evBattery" | "evCable" | "evCharger" | "expand" | "externalLink" | "eyeClosed" | "eyeOpened" | "eye" | "faceRecognition" | "facebook" | "family" | "fileFilled" | "filters" | "flag" | "fourByFour" | "fourWheelDrive" | "fuelTank" | "geolocation" | "gift" | "gps" | "graphUp" | "healing" | "heart" | "hitch" | "home" | "idCard" | "incident" | "infoCircleFilled" | "infoCircle" | "infoFilled" | "info" | "instant" | "invoice" | "keyConnect" | "key" | "licenceCheck" | "licencePaper" | "licence" | "lifeBuoy" | "linkedin" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "location" | "lockCheck" | "locked" | "login" | "logout" | "mailCheck" | "mail" | "mapAlt" | "meetDriver" | "meetOwner" | "menuList" | "messages" | "mileage" | "minibus" | "minusCircleFilled" | "minus" | "miscGift" | "nearbyDevice" | "notification" | "number1Circle" | "number2Circle" | "number3Circle" | "number4Circle" | "number5Circle" | "okHand" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "paperclip" | "parking" | "passport" | "payments" | "pencil" | "peopleUser" | "percentage" | "performance" | "phoneLink" | "phone" | "photos" | "pickupTruck" | "pig" | "pin" | "plug" | "plusCircleFilled" | "plus" | "position" | "pricingFlat" | "pricingVariable" | "profilePicture" | "questionCircleFilled" | "questionCircle" | "question" | "raceFlag" | "recenter" | "refresh" | "reorder" | "replacementCar" | "reply" | "reset" | "ride" | "roofBox" | "rotate" | "sealCheck" | "searchCar" | "searchPeople" | "sedan" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "shareAndroid" | "shareIos" | "share" | "shieldCheck" | "shield" | "shop" | "skiRack" | "slider" | "smartphone" | "snowTire" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "starHalf" | "star" | "stars" | "subway" | "suitcase" | "support" | "suv" | "synch" | "tag" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "tolls" | "trailer" | "train" | "triangleDown" | "triangleRight" | "triangleUp" | "twitter" | "twoPeople" | "uber" | "unfold" | "unlocked" | "userCheck" | "userQuestion" | "userShield" | "userSwitch" | "user" | "utilityVanLarge" | "utilityVanMedium" | "utilityVanSmall" | "verifiedSeal" | "walk" | "wallet" | "warningCircleFilled" | "warningCircle" | "warning" | "whatsapp" | "wheel" | "wheelchair" | "wrench" | "yingyang" | undefined;
+    icon?: "map" | "search" | "video" | "filter" | "accountDetails" | "addPicture" | "airConditioning" | "airport" | "android" | "antique" | "arrowLeftCircleFilled" | "arrowLeft" | "arrowRightCircleFilled" | "arrowRightCircle" | "arrowRight" | "audioInput" | "babySeat" | "battery" | "bell" | "bikeRack" | "bin" | "bluetooth" | "briefcase" | "bulb" | "cable" | "cabriolet" | "calendarCheck" | "calendarClock" | "calendarEnd" | "calendarStart" | "calendar" | "cameraAdd" | "camera" | "campervan" | "carAdd" | "carCheck" | "carDamages" | "carDrivyOpen" | "carGroup" | "carLock" | "carPlay" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "card" | "cdPlayer" | "certificate" | "chains" | "checkCircleFilled" | "checkCircle" | "check" | "checklist" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circledArrowRight" | "city" | "cleaning" | "clockAlert" | "clockBackwards" | "clockForwards" | "clock" | "closeCircleFilled" | "close" | "collapse" | "connectCar" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "contract" | "convertible" | "copy" | "coupe" | "creditCardAdd" | "creditCardError" | "creditCard" | "cruiseControl" | "dashcam" | "directions" | "document" | "dotHorizontal" | "dotVertical" | "dotsHorizontal" | "dotsVertical" | "download" | "earning" | "earth" | "edit" | "electric" | "evBattery" | "evCable" | "evCharger" | "expand" | "externalLink" | "eyeClosed" | "eyeOpened" | "eye" | "faceRecognition" | "facebook" | "family" | "fileFilled" | "filters" | "flag" | "fourByFour" | "fourWheelDrive" | "fuelTank" | "geolocation" | "gift" | "gps" | "graphUp" | "healing" | "heart" | "hitch" | "home" | "idCard" | "incident" | "infoCircleFilled" | "infoCircle" | "infoFilled" | "info" | "instant" | "invoice" | "keyConnect" | "key" | "licenceCheck" | "licencePaper" | "licence" | "lifeBuoy" | "linkedin" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "location" | "lockCheck" | "locked" | "login" | "logout" | "mailCheck" | "mail" | "mapAlt" | "meetDriver" | "meetOwner" | "menuList" | "messages" | "mileage" | "minibus" | "minusCircleFilled" | "minus" | "miscGift" | "nearbyDevice" | "notification" | "number1Circle" | "number2Circle" | "number3Circle" | "number4Circle" | "number5Circle" | "okHand" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "paperclip" | "parking" | "passport" | "payments" | "pencil" | "peopleUser" | "percentage" | "performance" | "phoneLink" | "phone" | "photos" | "pickupTruck" | "pig" | "pin" | "plug" | "plusCircleFilled" | "plus" | "position" | "pricingFlat" | "pricingVariable" | "profilePicture" | "questionCircleFilled" | "questionCircle" | "question" | "raceFlag" | "recenter" | "refresh" | "reorder" | "replacementCar" | "reply" | "reset" | "ride" | "roofBox" | "rotate" | "sealCheck" | "searchCar" | "searchPeople" | "sedan" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "shareAndroid" | "shareIos" | "share" | "shieldCheck" | "shield" | "shop" | "skiRack" | "slider" | "smartphone" | "snowTire" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "starHalf" | "star" | "stars" | "subway" | "suitcase" | "support" | "suv" | "synch" | "tag" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "tolls" | "trailer" | "train" | "triangleDown" | "triangleRight" | "triangleUp" | "twitter" | "twoPeople" | "uber" | "unfold" | "unlocked" | "userCheck" | "userQuestion" | "userShield" | "userSwitch" | "user" | "utilityVanLarge" | "utilityVanMedium" | "utilityVanSmall" | "verifiedSeal" | "walk" | "wallet" | "warningCircleFilled" | "warningCircle" | "warning" | "whatsapp" | "wheel" | "wheelchair" | "wrench" | "yingyang" | undefined;
     items: (AutocompleteItem | string)[];
     minQueryLength?: number | undefined;
     autoFilter?: boolean | undefined;

package/types/src/components/Form/TextInput.d.ts

@@ -14,7 +14,7 @@ export declare const TextInputWrapper: ({ icon, status, render, }: {
 }) => React.JSX.Element;
 declare const wrappedComponent: React.ComponentClass<{
     type?: TextInputType | undefined;
-    icon?: "search" | "accountDetails" | "addPicture" | "airConditioning" | "airport" | "android" | "antique" | "arrowLeftCircleFilled" | "arrowLeft" | "arrowRightCircleFilled" | "arrowRightCircle" | "arrowRight" | "audioInput" | "babySeat" | "battery" | "bell" | "bikeRack" | "bin" | "bluetooth" | "briefcase" | "bulb" | "cable" | "cabriolet" | "calendarCheck" | "calendarClock" | "calendarEnd" | "calendarStart" | "calendar" | "cameraAdd" | "camera" | "campervan" | "carAdd" | "carCheck" | "carDamages" | "carDrivyOpen" | "carGroup" | "carLock" | "carPlay" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "card" | "cdPlayer" | "certificate" | "chains" | "checkCircleFilled" | "checkCircle" | "check" | "checklist" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circledArrowRight" | "city" | "cleaning" | "clockAlert" | "clockBackwards" | "clockForwards" | "clock" | "closeCircleFilled" | "close" | "collapse" | "connectCar" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "contract" | "convertible" | "copy" | "coupe" | "creditCardAdd" | "creditCardError" | "creditCard" | "cruiseControl" | "dashcam" | "directions" | "document" | "dotHorizontal" | "dotVertical" | "dotsHorizontal" | "dotsVertical" | "download" | "earning" | "earth" | "edit" | "electric" | "evBattery" | "evCable" | "evCharger" | "expand" | "externalLink" | "eyeClosed" | "eyeOpened" | "eye" | "faceRecognition" | "facebook" | "family" | "fileFilled" | "filter" | "filters" | "flag" | "fourByFour" | "fourWheelDrive" | "fuelTank" | "geolocation" | "gift" | "gps" | "graphUp" | "healing" | "heart" | "hitch" | "home" | "idCard" | "incident" | "infoCircleFilled" | "infoCircle" | "infoFilled" | "info" | "instant" | "invoice" | "keyConnect" | "key" | "licenceCheck" | "licencePaper" | "licence" | "lifeBuoy" | "linkedin" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "location" | "lockCheck" | "locked" | "login" | "logout" | "mailCheck" | "mail" | "mapAlt" | "map" | "meetDriver" | "meetOwner" | "menuList" | "messages" | "mileage" | "minibus" | "minusCircleFilled" | "minus" | "miscGift" | "nearbyDevice" | "notification" | "number1Circle" | "number2Circle" | "number3Circle" | "number4Circle" | "number5Circle" | "okHand" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "paperclip" | "parking" | "passport" | "payments" | "pencil" | "peopleUser" | "percentage" | "performance" | "phoneLink" | "phone" | "photos" | "pickupTruck" | "pig" | "pin" | "plug" | "plusCircleFilled" | "plus" | "position" | "pricingFlat" | "pricingVariable" | "profilePicture" | "questionCircleFilled" | "questionCircle" | "question" | "raceFlag" | "recenter" | "refresh" | "reorder" | "replacementCar" | "reply" | "reset" | "ride" | "roofBox" | "rotate" | "sealCheck" | "searchCar" | "searchPeople" | "sedan" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "shareAndroid" | "shareIos" | "share" | "shieldCheck" | "shield" | "shop" | "skiRack" | "slider" | "smartphone" | "snowTire" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "starHalf" | "star" | "stars" | "subway" | "suitcase" | "support" | "suv" | "synch" | "tag" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "tolls" | "trailer" | "train" | "triangleDown" | "triangleRight" | "triangleUp" | "twitter" | "twoPeople" | "uber" | "unfold" | "unlocked" | "userCheck" | "userQuestion" | "userShield" | "userSwitch" | "user" | "utilityVanLarge" | "utilityVanMedium" | "utilityVanSmall" | "verifiedSeal" | "walk" | "wallet" | "warningCircleFilled" | "warningCircle" | "warning" | "whatsapp" | "wheel" | "wheelchair" | "wrench" | "yingyang" | undefined;
+    icon?: "search" | "accountDetails" | "addPicture" | "airConditioning" | "airport" | "android" | "antique" | "arrowLeftCircleFilled" | "arrowLeft" | "arrowRightCircleFilled" | "arrowRightCircle" | "arrowRight" | "audioInput" | "babySeat" | "battery" | "bell" | "bikeRack" | "bin" | "bluetooth" | "briefcase" | "bulb" | "cable" | "cabriolet" | "calendarCheck" | "calendarClock" | "calendarEnd" | "calendarStart" | "calendar" | "cameraAdd" | "camera" | "campervan" | "carAdd" | "carCheck" | "carDamages" | "carDrivyOpen" | "carGroup" | "carLock" | "carPlay" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "card" | "cdPlayer" | "certificate" | "chains" | "checkCircleFilled" | "checkCircle" | "check" | "checklist" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circledArrowRight" | "city" | "cleaning" | "clockAlert" | "clockBackwards" | "clockForwards" | "clock" | "closeCircleFilled" | "close" | "collapse" | "connectCar" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "contract" | "convertible" | "copy" | "coupe" | "creditCardAdd" | "creditCardError" | "creditCard" | "cruiseControl" | "dashcam" | "directions" | "document" | "dotHorizontal" | "dotVertical" | "dotsHorizontal" | "dotsVertical" | "download" | "earning" | "earth" | "edit" | "electric" | "evBattery" | "evCable" | "evCharger" | "expand" | "externalLink" | "eyeClosed" | "eyeOpened" | "eye" | "faceRecognition" | "facebook" | "family" | "fileFilled" | "filter" | "filters" | "flag" | "fourByFour" | "fourWheelDrive" | "fuelTank" | "geolocation" | "gift" | "gps" | "graphUp" | "healing" | "heart" | "hitch" | "home" | "idCard" | "incident" | "infoCircleFilled" | "infoCircle" | "infoFilled" | "info" | "instant" | "invoice" | "keyConnect" | "key" | "licenceCheck" | "licencePaper" | "licence" | "lifeBuoy" | "linkedin" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "location" | "lockCheck" | "locked" | "login" | "logout" | "mailCheck" | "mail" | "mapAlt" | "map" | "meetDriver" | "meetOwner" | "menuList" | "messages" | "mileage" | "minibus" | "minusCircleFilled" | "minus" | "miscGift" | "nearbyDevice" | "notification" | "number1Circle" | "number2Circle" | "number3Circle" | "number4Circle" | "number5Circle" | "okHand" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "paperclip" | "parking" | "passport" | "payments" | "pencil" | "peopleUser" | "percentage" | "performance" | "phoneLink" | "phone" | "photos" | "pickupTruck" | "pig" | "pin" | "plug" | "plusCircleFilled" | "plus" | "position" | "pricingFlat" | "pricingVariable" | "profilePicture" | "questionCircleFilled" | "questionCircle" | "question" | "raceFlag" | "recenter" | "refresh" | "reorder" | "replacementCar" | "reply" | "reset" | "ride" | "roofBox" | "rotate" | "sealCheck" | "searchCar" | "searchPeople" | "sedan" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "shareAndroid" | "shareIos" | "share" | "shieldCheck" | "shield" | "shop" | "skiRack" | "slider" | "smartphone" | "snowTire" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "starHalf" | "star" | "stars" | "subway" | "suitcase" | "support" | "suv" | "synch" | "tag" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "tolls" | "trailer" | "train" | "triangleDown" | "triangleRight" | "triangleUp" | "twitter" | "twoPeople" | "uber" | "unfold" | "unlocked" | "userCheck" | "userQuestion" | "userShield" | "userSwitch" | "user" | "utilityVanLarge" | "utilityVanMedium" | "utilityVanSmall" | "verifiedSeal" | "video" | "walk" | "wallet" | "warningCircleFilled" | "warningCircle" | "warning" | "whatsapp" | "wheel" | "wheelchair" | "wrench" | "yingyang" | undefined;
     forwardedRef?: React.Ref<HTMLInputElement> | undefined;
 } & FormElement & React.InputHTMLAttributes<HTMLInputElement> & {
     id?: string | undefined;

package/types/src/components/Icon/__generated__/VideoIcon.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { IconColorsType } from "../";
+export type IconProps = {
+    color?: IconColorsType;
+    size?: 16 | 20 | 24 | 32;
+    contained?: boolean;
+    className?: string;
+};
+declare const VideoIcon: ({ color, size, contained, className, }: IconProps) => React.JSX.Element;
+export default VideoIcon;

package/types/src/components/Icon/__generated__/index.d.ts

@@ -282,6 +282,7 @@ export { default as UtilityVanLargeIcon } from "./UtilityVanLargeIcon";
 export { default as UtilityVanMediumIcon } from "./UtilityVanMediumIcon";
 export { default as UtilityVanSmallIcon } from "./UtilityVanSmallIcon";
 export { default as VerifiedSealIcon } from "./VerifiedSealIcon";
+export { default as VideoIcon } from "./VideoIcon";
 export { default as WalkIcon } from "./WalkIcon";
 export { default as WalletIcon } from "./WalletIcon";
 export { default as WarningCircleFilledIcon } from "./WarningCircleFilledIcon";

package/types/src/components/Icon/index.d.ts

@@ -22,7 +22,7 @@ export interface IconProps {
     contained?: boolean;
     className?: string;
 }
-export declare const isIconSource: (source: string) => source is "info" | "warning" | "accountDetails" | "addPicture" | "airConditioning" | "airport" | "android" | "antique" | "arrowLeftCircleFilled" | "arrowLeft" | "arrowRightCircleFilled" | "arrowRightCircle" | "arrowRight" | "audioInput" | "babySeat" | "battery" | "bell" | "bikeRack" | "bin" | "bluetooth" | "briefcase" | "bulb" | "cable" | "cabriolet" | "calendarCheck" | "calendarClock" | "calendarEnd" | "calendarStart" | "calendar" | "cameraAdd" | "camera" | "campervan" | "carAdd" | "carCheck" | "carDamages" | "carDrivyOpen" | "carGroup" | "carLock" | "carPlay" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "card" | "cdPlayer" | "certificate" | "chains" | "checkCircleFilled" | "checkCircle" | "check" | "checklist" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circledArrowRight" | "city" | "cleaning" | "clockAlert" | "clockBackwards" | "clockForwards" | "clock" | "closeCircleFilled" | "close" | "collapse" | "connectCar" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "contract" | "convertible" | "copy" | "coupe" | "creditCardAdd" | "creditCardError" | "creditCard" | "cruiseControl" | "dashcam" | "directions" | "document" | "dotHorizontal" | "dotVertical" | "dotsHorizontal" | "dotsVertical" | "download" | "earning" | "earth" | "edit" | "electric" | "evBattery" | "evCable" | "evCharger" | "expand" | "externalLink" | "eyeClosed" | "eyeOpened" | "eye" | "faceRecognition" | "facebook" | "family" | "fileFilled" | "filter" | "filters" | "flag" | "fourByFour" | "fourWheelDrive" | "fuelTank" | "geolocation" | "gift" | "gps" | "graphUp" | "healing" | "heart" | "hitch" | "home" | "idCard" | "incident" | "infoCircleFilled" | "infoCircle" | "infoFilled" | "instant" | "invoice" | "keyConnect" | "key" | "licenceCheck" | "licencePaper" | "licence" | "lifeBuoy" | "linkedin" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "location" | "lockCheck" | "locked" | "login" | "logout" | "mailCheck" | "mail" | "mapAlt" | "map" | "meetDriver" | "meetOwner" | "menuList" | "messages" | "mileage" | "minibus" | "minusCircleFilled" | "minus" | "miscGift" | "nearbyDevice" | "notification" | "number1Circle" | "number2Circle" | "number3Circle" | "number4Circle" | "number5Circle" | "okHand" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "paperclip" | "parking" | "passport" | "payments" | "pencil" | "peopleUser" | "percentage" | "performance" | "phoneLink" | "phone" | "photos" | "pickupTruck" | "pig" | "pin" | "plug" | "plusCircleFilled" | "plus" | "position" | "pricingFlat" | "pricingVariable" | "profilePicture" | "questionCircleFilled" | "questionCircle" | "question" | "raceFlag" | "recenter" | "refresh" | "reorder" | "replacementCar" | "reply" | "reset" | "ride" | "roofBox" | "rotate" | "sealCheck" | "searchCar" | "searchPeople" | "search" | "sedan" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "shareAndroid" | "shareIos" | "share" | "shieldCheck" | "shield" | "shop" | "skiRack" | "slider" | "smartphone" | "snowTire" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "starHalf" | "star" | "stars" | "subway" | "suitcase" | "support" | "suv" | "synch" | "tag" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "tolls" | "trailer" | "train" | "triangleDown" | "triangleRight" | "triangleUp" | "twitter" | "twoPeople" | "uber" | "unfold" | "unlocked" | "userCheck" | "userQuestion" | "userShield" | "userSwitch" | "user" | "utilityVanLarge" | "utilityVanMedium" | "utilityVanSmall" | "verifiedSeal" | "walk" | "wallet" | "warningCircleFilled" | "warningCircle" | "whatsapp" | "wheel" | "wheelchair" | "wrench" | "yingyang";
+export declare const isIconSource: (source: string) => source is "info" | "warning" | "accountDetails" | "addPicture" | "airConditioning" | "airport" | "android" | "antique" | "arrowLeftCircleFilled" | "arrowLeft" | "arrowRightCircleFilled" | "arrowRightCircle" | "arrowRight" | "audioInput" | "babySeat" | "battery" | "bell" | "bikeRack" | "bin" | "bluetooth" | "briefcase" | "bulb" | "cable" | "cabriolet" | "calendarCheck" | "calendarClock" | "calendarEnd" | "calendarStart" | "calendar" | "cameraAdd" | "camera" | "campervan" | "carAdd" | "carCheck" | "carDamages" | "carDrivyOpen" | "carGroup" | "carLock" | "carPlay" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "card" | "cdPlayer" | "certificate" | "chains" | "checkCircleFilled" | "checkCircle" | "check" | "checklist" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circledArrowRight" | "city" | "cleaning" | "clockAlert" | "clockBackwards" | "clockForwards" | "clock" | "closeCircleFilled" | "close" | "collapse" | "connectCar" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "contract" | "convertible" | "copy" | "coupe" | "creditCardAdd" | "creditCardError" | "creditCard" | "cruiseControl" | "dashcam" | "directions" | "document" | "dotHorizontal" | "dotVertical" | "dotsHorizontal" | "dotsVertical" | "download" | "earning" | "earth" | "edit" | "electric" | "evBattery" | "evCable" | "evCharger" | "expand" | "externalLink" | "eyeClosed" | "eyeOpened" | "eye" | "faceRecognition" | "facebook" | "family" | "fileFilled" | "filter" | "filters" | "flag" | "fourByFour" | "fourWheelDrive" | "fuelTank" | "geolocation" | "gift" | "gps" | "graphUp" | "healing" | "heart" | "hitch" | "home" | "idCard" | "incident" | "infoCircleFilled" | "infoCircle" | "infoFilled" | "instant" | "invoice" | "keyConnect" | "key" | "licenceCheck" | "licencePaper" | "licence" | "lifeBuoy" | "linkedin" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "location" | "lockCheck" | "locked" | "login" | "logout" | "mailCheck" | "mail" | "mapAlt" | "map" | "meetDriver" | "meetOwner" | "menuList" | "messages" | "mileage" | "minibus" | "minusCircleFilled" | "minus" | "miscGift" | "nearbyDevice" | "notification" | "number1Circle" | "number2Circle" | "number3Circle" | "number4Circle" | "number5Circle" | "okHand" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "paperclip" | "parking" | "passport" | "payments" | "pencil" | "peopleUser" | "percentage" | "performance" | "phoneLink" | "phone" | "photos" | "pickupTruck" | "pig" | "pin" | "plug" | "plusCircleFilled" | "plus" | "position" | "pricingFlat" | "pricingVariable" | "profilePicture" | "questionCircleFilled" | "questionCircle" | "question" | "raceFlag" | "recenter" | "refresh" | "reorder" | "replacementCar" | "reply" | "reset" | "ride" | "roofBox" | "rotate" | "sealCheck" | "searchCar" | "searchPeople" | "search" | "sedan" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "shareAndroid" | "shareIos" | "share" | "shieldCheck" | "shield" | "shop" | "skiRack" | "slider" | "smartphone" | "snowTire" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "starHalf" | "star" | "stars" | "subway" | "suitcase" | "support" | "suv" | "synch" | "tag" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "tolls" | "trailer" | "train" | "triangleDown" | "triangleRight" | "triangleUp" | "twitter" | "twoPeople" | "uber" | "unfold" | "unlocked" | "userCheck" | "userQuestion" | "userShield" | "userSwitch" | "user" | "utilityVanLarge" | "utilityVanMedium" | "utilityVanSmall" | "verifiedSeal" | "video" | "walk" | "wallet" | "warningCircleFilled" | "warningCircle" | "whatsapp" | "wheel" | "wheelchair" | "wrench" | "yingyang";
 export declare const Icon: ({ source, color, size, contained, className, }: IconProps) => React.JSX.Element;
 export * from "./__generated__/index";
 export default Icon;

package/types/src/icons/index.d.ts

@@ -282,6 +282,7 @@ export { default as utilityVanLarge } from "./utility-van-large.svg";
 export { default as utilityVanMedium } from "./utility-van-medium.svg";
 export { default as utilityVanSmall } from "./utility-van-small.svg";
 export { default as verifiedSeal } from "./verified-seal.svg";
+export { default as video } from "./video.svg";
 export { default as walk } from "./walk.svg";
 export { default as wallet } from "./wallet.svg";
 export { default as warningCircleFilled } from "./warning-circle-filled.svg";

package/types/src/index.d.ts

@@ -26,6 +26,7 @@ export { PriceTable, PriceTableRow } from "./components/PriceTable";
 export { ProgressBar } from "./components/ProgressBar";
 export { ProgressCircular } from "./components/ProgressCircular";
 export { ProgressBanner } from "./components/ProgressBanner";
+export { Sidepanel } from "./components/Sidepanel";
 export { Tabs, Tab } from "./components/Tabs";
 export { Tag } from "./components/Tag";
 export { Chip } from "./components/Chip";

package/types/src/tokens/index.d.ts

@@ -341,6 +341,7 @@ export declare const icons: {
         utilityVanMedium: string;
         utilityVanSmall: string;
         verifiedSeal: string;
+        video: string;
         walk: string;
         wallet: string;
         warningCircleFilled: string;

package/utilities.css

@@ -11,7 +11,7 @@
   --c-purple-100: #f8f2f8;
   --c-purple-200: #f0e1ee;
   --c-purple-300: #db97d5;
-  --c-purple-400: #c758bd;
+  --c-purple-400: #d54ac8;
   --c-purple-500: #b01aa7;
   --c-purple-600: #a6199d;
   --c-purple-700: #901588;
@@ -264,7 +264,7 @@
   --c-stroke-strong: var(--c-grey-300);
   --c-stroke-onAccent: var(--c-white);
   --c-stroke-rental: var(--c-blue-700);
-  --c-stroke-blocker: var(--c-grey-200);
+  --c-stroke-blocker: var(--c-grey-300);
   --c-stroke-onError: var(--c-white);
   --c-stroke-onSuccess: var(--c-white);
   --c-stroke-connect: var(--c-newPurple-500);