@mailstep/design-system 0.9.1 → 0.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/CommonGrid/components/ControlButtons/ControlButtons.js

@@ -118,7 +118,7 @@ const ControlButtons = ({ extraControlButtons, gridActions, gridSelectors, quick
 			children: /* @__PURE__ */ jsx(Button, {
 				onClick: onOpenPresetsModal,
 				type: "button",
-				variant: "default",
+				variant: "outline",
 				appearance: "tertiary",
 				children: /* @__PURE__ */ jsx(Trans, {
 					id: "dataGrid.presets.title",

package/ui/Blocks/CommonGrid/components/PresetsModalBody/index.js

@@ -18,6 +18,7 @@ const PresetsModalBody = ({ onOpenCreatePresetModal, gridPresets, handleSelectPr
 			display: "flex",
 			rowGap: "12px",
 			flexWrap: "wrap",
+			color: "typoPrimary",
 			children: hasPresets ? presets?.map(([presetName, filters], index) => {
 				const isSelected = presetName === selectedPresetName;
 				return /* @__PURE__ */ jsxs(Tag, {

package/ui/Blocks/CommonGrid/styles.js

@@ -74,7 +74,7 @@ const CommonGridWithStyles = styled$1(CommonGrid)`
     color: typoPrimary;
     font-weight: normal;
     border-bottom: 1px solid;
-    border-color: lightGray3;
+    border-color: gridBorderColor;
     height: ${40}px;
   }
   & .gridHead {

package/ui/Elements/Button/styles.js

@@ -91,6 +91,7 @@ const StyledButton = styled$1.button`
   &[data-variant='outline'] {
     background-color: white;
     border: slim;
+
     &[data-appearance='primary'] {
       color: typoPrimary;
       border-color: typoPrimary;
@@ -101,6 +102,7 @@ const StyledButton = styled$1.button`
         }
       }
     }
+
     &[data-appearance='secondary'] {
       color: red1;
       border-color: red1;
@@ -111,6 +113,17 @@ const StyledButton = styled$1.button`
         }
       }
     }
+
+    &[data-appearance='tertiary'] {
+      color: dangerColor;
+      border-color: dangerColor;
+
+      @media (hover: hover) {
+        :hover {
+          background-color: red20;
+        }
+      }
+    }
   }
   &[data-variant='ghost'] {
     background-color: white;

package/ui/Elements/Select/components/SelectAll.d.ts

@@ -1,5 +1,4 @@
-import { SelectProps, CustomTheme } from '../types';
-import { Option } from '../types';
+import { type SelectProps, type CustomTheme, type Option } from '../types';
 type Props = {
     onCustomSelectAll: ({ options }: {
         options?: Option[];

package/ui/Elements/Select/components/SelectAll.js

@@ -50,13 +50,11 @@ const SelectAll = ({ onCustomSelectAll, onCustomDeselectAll, value, options, max
 		value
 	]);
 	useEffect(() => {
-		if (value && Array.isArray(value)) {
-			options?.length === value.length && setIsSelected(true);
-			options?.length !== value.length && setIsSelected(false);
-		}
+		const selectedValues = Array.isArray(value) ? value.map((option) => option && typeof option === "object" ? option.value : option) : [];
+		setIsSelected(!!options?.length && options.every((option) => selectedValues.includes(option.value)));
 	}, [
 		maxMenuHeight,
-		options?.length,
+		options,
 		value
 	]);
 	if (!options?.length) return null;

package/ui/ThemeProvider/themes/dark.d.ts

@@ -26,9 +26,11 @@ declare const darkTheme: {
         blue10: string;
         inputErrorColor: string;
         sideMenuSelectedText: string;
+        sideMenuBackground: string;
         dashboardBackground: string;
         iconStroke: string;
         modalBackground: string;
+        gridBorderColor: string;
         black: string;
         lightGray5: string;
         neutral500: string;

package/ui/ThemeProvider/themes/dark.js

@@ -30,9 +30,11 @@ const darkTheme = {
 		blue10: "#2e475d",
 		inputErrorColor: "#E94324",
 		sideMenuSelectedText: "#ffffff",
+		sideMenuBackground: "#1b2b38",
 		dashboardBackground: "#1b2b38",
 		iconStroke: "#d9fffa",
-		modalBackground: "#647483"
+		modalBackground: "#647483",
+		gridBorderColor: "#425f7a"
 	},
 	shadows: {
 		...defaultTheme.shadows,

package/ui/ThemeProvider/themes/default.d.ts

@@ -109,9 +109,11 @@ declare const defaultTheme: {
         error: string;
         inputErrorColor: string;
         sideMenuSelectedText: string;
+        sideMenuBackground: string;
         dashboardBackground: string;
         iconStroke: string;
         modalBackground: string;
+        gridBorderColor: string;
     };
     fonts: {
         primary: string;

package/ui/ThemeProvider/themes/default.js

@@ -110,9 +110,11 @@ const defaultTheme = {
 		error: "#ea5455",
 		inputErrorColor: "#DB2B19",
 		sideMenuSelectedText: "#ffffff",
+		sideMenuBackground: "#162C3F",
 		dashboardBackground: "#ffffff",
 		iconStroke: "#22394E",
-		modalBackground: "#22394E"
+		modalBackground: "#22394E",
+		gridBorderColor: "#D2D8DF"
 	},
 	fonts: {
 		primary: "Inter, sans-serif",

package/ui/ThemeProvider/themes/index.d.ts

@@ -110,9 +110,11 @@ declare const themes: {
             error: string;
             inputErrorColor: string;
             sideMenuSelectedText: string;
+            sideMenuBackground: string;
             dashboardBackground: string;
             iconStroke: string;
             modalBackground: string;
+            gridBorderColor: string;
         };
         fonts: {
             primary: string;
@@ -374,9 +376,11 @@ declare const themes: {
             error: string;
             inputErrorColor: string;
             sideMenuSelectedText: string;
+            sideMenuBackground: string;
             dashboardBackground: string;
             iconStroke: string;
             modalBackground: string;
+            gridBorderColor: string;
         };
         fonts: {
             primary: string;
@@ -423,9 +427,11 @@ declare const themes: {
             blue10: string;
             inputErrorColor: string;
             sideMenuSelectedText: string;
+            sideMenuBackground: string;
             dashboardBackground: string;
             iconStroke: string;
             modalBackground: string;
+            gridBorderColor: string;
             black: string;
             lightGray5: string;
             neutral500: string;
@@ -647,9 +653,11 @@ declare const themes: {
             blue10: string;
             inputErrorColor: string;
             sideMenuSelectedText: string;
+            sideMenuBackground: string;
             dashboardBackground: string;
             iconStroke: string;
             modalBackground: string;
+            gridBorderColor: string;
             black: string;
             lightGray5: string;
             neutral500: string;

package/ui/ThemeProvider/themes/mailwise.d.ts

@@ -201,9 +201,11 @@ declare const mailwiseTheme: {
         error: string;
         inputErrorColor: string;
         sideMenuSelectedText: string;
+        sideMenuBackground: string;
         dashboardBackground: string;
         iconStroke: string;
         modalBackground: string;
+        gridBorderColor: string;
     };
     fonts: {
         primary: string;

package/ui/ThemeProvider/themes/mailwiseDark.d.ts

@@ -26,9 +26,11 @@ declare const mailwiseDark: {
         blue10: string;
         inputErrorColor: string;
         sideMenuSelectedText: string;
+        sideMenuBackground: string;
         dashboardBackground: string;
         iconStroke: string;
         modalBackground: string;
+        gridBorderColor: string;
         black: string;
         lightGray5: string;
         neutral500: string;