@drivy/cobalt 0.46.2 → 0.46.4

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

@@ -0,0 +1,16 @@
+import React from "react";
+type SidepanelFooterPropsType = React.PropsWithChildren<{
+    className?: string;
+}>;
+type SidepanelPropsType = React.PropsWithChildren<{
+    isOpen: boolean;
+    title?: string;
+    close?: () => void;
+}>;
+export declare const Sidepanel: {
+    ({ isOpen, title, close, children }: SidepanelPropsType): React.JSX.Element;
+    displayName: string;
+} & {
+    Footer: (_props: SidepanelFooterPropsType) => null;
+};
+export {};

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

@@ -366,6 +366,9 @@ export declare const zIndexes: {
     "header-below": number;
     header: number;
     "header-above": number;
+    "sidepanel-below": number;
+    sidepanel: number;
+    "sidepanel-above": number;
     "modal-below": number;
     modal: number;
     "modal-above": number;
@@ -389,18 +392,6 @@ export declare const palette: {
         "1100": string;
         "1200": string;
     };
-    purpleDeep: {
-        "100": string;
-        "300": string;
-        "400": string;
-        "500": string;
-        "700": string;
-        "900": string;
-        "1000": string;
-    };
-    purpleLight: {
-        "100": string;
-    };
     navy: {
         "50": string;
         "100": string;
@@ -793,21 +784,6 @@ export declare const theme: {
             press: string;
         };
     };
-    fill: {
-        base: string;
-        accent: string;
-        secondary: string;
-        subdued: string;
-        neutral: string;
-        negative: string;
-        accentAlt: string;
-        disabled: string;
-        error: string;
-        success: string;
-        rental: string;
-        blocker: string;
-        primary: string;
-    };
     buttonBackground: {
         selected: string;
         primary: string;
@@ -844,6 +820,21 @@ export declare const theme: {
             press: string;
         };
     };
+    fill: {
+        base: string;
+        accent: string;
+        secondary: string;
+        subdued: string;
+        neutral: string;
+        negative: string;
+        accentAlt: string;
+        disabled: string;
+        error: string;
+        success: string;
+        rental: string;
+        blocker: string;
+        primary: string;
+    };
     illustrations: {
         primary: string;
         secondary: string;

package/utilities.css

@@ -20,14 +20,6 @@
   --c-purple-1000: #3e093b;
   --c-purple-1100: #280626;
   --c-purple-1200: #160315;
-  --c-purpleDeep-100: #f2a6ee;
-  --c-purpleDeep-300: #ea71e3;
-  --c-purpleDeep-400: #c31dba;
-  --c-purpleDeep-500: #9b1794;
-  --c-purpleDeep-700: #73116e;
-  --c-purpleDeep-900: #4b0b48;
-  --c-purpleDeep-1000: #3e093c;
-  --c-purpleLight-100: #ffdcfd;
   --c-navy-50: #f1f1f4;
   --c-navy-100: #e3e2e8;
   --c-navy-120: #cac7d2;
@@ -152,7 +144,7 @@
   --c-background-error: var(--c-red-500);
   --c-background-errorAlt: var(--c-red-100);
   --c-background-success: var(--c-green-700);
-  --c-background-successAlt: var(--c-green-100);
+  --c-background-successAlt: var(--c-green-300);
   --c-background-connect: var(--c-newPurple-500);
   --c-background-connectAlt: var(--c-turquoise-50);
   --c-background-driver: var(--c-yellow-500);
@@ -174,9 +166,9 @@
   --c-background-secondaryInteractive: var(--c-white);
   --c-background-secondaryInteractive--hover: var(--c-navy-50);
   --c-background-accentInteractive: var(--c-purple-500);
-  --c-background-accentInteractive--hover: var(--c-purple-700);
+  --c-background-accentInteractive--hover: var(--c-purple-600);
   --c-background-accentAltInteractive: var(--c-purple-200);
-  --c-background-accentAltInteractive--hover: var(--c-purpleLight-100);
+  --c-background-accentAltInteractive--hover: var(--c-purple-200);
   --c-background-connectInteractive: var(--c-newPurple-500);
   --c-background-connectInteractive--hover: var(--c-turquoise-700);
   --c-background-errorInteractive: var(--c-red-500);
@@ -189,7 +181,7 @@
   --c-text-error: var(--c-red-500);
   --c-text-errorAlt: var(--c-red-500);
   --c-text-success: var(--c-green-700);
-  --c-text-successAlt: var(--c-green-1000);
+  --c-text-successAlt: var(--c-green-900);
   --c-text-connect: var(--c-newPurple-500);
   --c-text-connectAlt: var(--c-turquoise-900);
   --c-text-driver: var(--c-navy-700);
@@ -231,7 +223,7 @@
   --c-icon-error: var(--c-red-500);
   --c-icon-errorAlt: var(--c-red-500);
   --c-icon-success: var(--c-green-700);
-  --c-icon-successAlt: var(--c-green-1000);
+  --c-icon-successAlt: var(--c-green-900);
   --c-icon-connect: var(--c-newPurple-500);
   --c-icon-connectAlt: var(--c-turquoise-900);
   --c-icon-driver: var(--c-navy-700);
@@ -254,7 +246,7 @@
   --c-icon-onRental: var(--c-white);
   --c-icon-inversed: var(--c-white);
   --c-icon-baseInteractive: var(--c-navy-700);
-  --c-icon-baseInteractive--hover: var(--c-navy-700);
+  --c-icon-baseInteractive--hover: var(--c-navy-900);
   --c-icon-subduedInteractive: var(--c-navy-400);
   --c-icon-subduedInteractive--hover: var(--c-navy-500);
   --c-icon-accentInteractive: var(--c-purple-500);
@@ -290,9 +282,9 @@
   --c-stroke-accentInteractive: var(--c-purple-500);
   --c-stroke-accentInteractive--hover: var(--c-purple-700);
   --c-stroke-accentInteractive--press: var(--c-purple-900);
-  --c-stroke-strongInteractive: var(--c-navy-300);
-  --c-stroke-strongInteractive--hover: var(--c-navy-500);
-  --c-stroke-strongInteractive--press: var(--c-navy-700);
+  --c-stroke-strongInteractive: var(--c-grey-300);
+  --c-stroke-strongInteractive--hover: var(--c-grey-400);
+  --c-stroke-strongInteractive--press: var(--c-grey-500);
   --c-buttonIcon-selected: var(--c-purple-500);
   --c-buttonIcon-primary: var(--c-white);
   --c-buttonIcon-secondary: var(--c-purple-500);
@@ -306,10 +298,10 @@
   --c-buttonIcon-primaryInteractive--hover: var(--c-white);
   --c-buttonIcon-primaryInteractive--press: var(--c-white);
   --c-buttonIcon-secondaryInteractive: var(--c-purple-500);
-  --c-buttonIcon-secondaryInteractive--hover: var(--c-purple-700);
+  --c-buttonIcon-secondaryInteractive--hover: var(--c-purple-500);
   --c-buttonIcon-secondaryInteractive--press: var(--c-purple-900);
   --c-buttonIcon-tertiaryInteractive: var(--c-purple-500);
-  --c-buttonIcon-tertiaryInteractive--hover: var(--c-purple-700);
+  --c-buttonIcon-tertiaryInteractive--hover: var(--c-purple-500);
   --c-buttonIcon-tertiaryInteractive--press: var(--c-purple-900);
   --c-buttonIcon-destructiveInteractive: var(--c-red-500);
   --c-buttonIcon-destructiveInteractive--hover: var(--c-red-500);
@@ -341,19 +333,6 @@
   --c-buttonLabel-successAltInteractive: var(--c-green-900);
   --c-buttonLabel-successAltInteractive--hover: var(--c-green-900);
   --c-buttonLabel-successAltInteractive--press: var(--c-green-900);
-  --c-fill-base: var(--c-navy-500);
-  --c-fill-accent: var(--c-purple-500);
-  --c-fill-secondary: var(--c-yellow-500);
-  --c-fill-subdued: var(--c-navy-100);
-  --c-fill-neutral: var(--c-navy-50);
-  --c-fill-negative: var(--c-red-150);
-  --c-fill-accentAlt: var(--c-purple-100);
-  --c-fill-disabled: var(--c-navy-300);
-  --c-fill-error: var(--c-red-500);
-  --c-fill-success: var(--c-green-500);
-  --c-fill-rental: var(--c-blue-300);
-  --c-fill-blocker: var(--c-grey-100);
-  --c-fill-primary: var(--c-white);
   --c-buttonBackground-selected: var(--c-purple-100);
   --c-buttonBackground-primary: var(--c-purple-500);
   --c-buttonBackground-secondary: var(--c-white);
@@ -378,6 +357,19 @@
   --c-buttonBackground-successAltInteractive: var(--c-green-100);
   --c-buttonBackground-successAltInteractive--hover: var(--c-green-300);
   --c-buttonBackground-successAltInteractive--press: var(--c-green-400);
+  --c-fill-base: var(--c-navy-500);
+  --c-fill-accent: var(--c-purple-500);
+  --c-fill-secondary: var(--c-yellow-500);
+  --c-fill-subdued: var(--c-navy-100);
+  --c-fill-neutral: var(--c-navy-50);
+  --c-fill-negative: var(--c-red-150);
+  --c-fill-accentAlt: var(--c-purple-100);
+  --c-fill-disabled: var(--c-navy-300);
+  --c-fill-error: var(--c-red-500);
+  --c-fill-success: var(--c-green-500);
+  --c-fill-rental: var(--c-blue-300);
+  --c-fill-blocker: var(--c-grey-100);
+  --c-fill-primary: var(--c-white);
   --c-illustrations-primary: var(--c-navy-500);
   --c-illustrations-secondary: var(--c-white);
   --c-illustrations-accent1: var(--c-purple-500);
@@ -1511,6 +1503,18 @@
   z-index: 31;
 }
 
+.c-z-sidepanel-below {
+  z-index: 79;
+}
+
+.c-z-sidepanel {
+  z-index: 80;
+}
+
+.c-z-sidepanel-above {
+  z-index: 81;
+}
+
 .c-z-modal-below {
   z-index: 89;
 }
@@ -1583,6 +1587,18 @@
   z-index: 31;
 }
 
+.hover\:c-z-sidepanel-below:hover {
+  z-index: 79;
+}
+
+.hover\:c-z-sidepanel:hover {
+  z-index: 80;
+}
+
+.hover\:c-z-sidepanel-above:hover {
+  z-index: 81;
+}
+
 .hover\:c-z-modal-below:hover {
   z-index: 89;
 }
@@ -1655,6 +1671,18 @@
   z-index: 31;
 }
 
+.focus\:c-z-sidepanel-below:focus {
+  z-index: 79;
+}
+
+.focus\:c-z-sidepanel:focus {
+  z-index: 80;
+}
+
+.focus\:c-z-sidepanel-above:focus {
+  z-index: 81;
+}
+
 .focus\:c-z-modal-below:focus {
   z-index: 89;
 }