@mailstep/design-system 0.8.16-beta.20 → 0.8.16-beta.21

package/package.json

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

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

@@ -15,7 +15,7 @@ var StyledDropdownMenu = styled(DropdownMenu)(templateObject_2 || (templateObjec
 var StyledButton = styled(Button)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-right: 0;\n"], ["\n  padding-right: 0;\n"])));
 var StyledIcon = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 20px;\n  height: 20px;\n  margin: 9px;\n  & > svg {\n    stroke: ", ";\n  }\n"], ["\n  width: 20px;\n  height: 20px;\n  margin: 9px;\n  & > svg {\n    stroke: ", ";\n  }\n"])), function (_a) {
     var appearance = _a.appearance;
-    return appearance === 'secondary' ? th.color('blue2') : appearance === 'tertiary' ? th.color('red1') : 'white';
+    return appearance === 'secondary' ? th.color('blue2') : appearance === 'tertiary' ? th.color('red1') : th.color('white');
 });
 var Separator = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 38px;\n  width: 1px;\n  background-color: white;\n  margin-left: 18px;\n"], ["\n  height: 38px;\n  width: 1px;\n  background-color: white;\n  margin-left: 18px;\n"])));
 var DropdownButton = function (_a) {

package/ui/Blocks/CommonGrid/styles.js

@@ -6,7 +6,7 @@ import { gridRowHeight, gridFooterHeight, gridButtonStripHeight, gridHeadHeight,
 import styled, { x } from '@xstyled/styled-components';
 import { th } from '@xstyled/system';
 import CommonGrid from './CommonGrid';
-export var BottomWrapper = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  padding: ", ";\n  width: 100%;\n  height: ", "px;\n  background-color: bgLightGray;\n\n  @media print {\n    display: none;\n  }\n\n  @media (min-width: 1024px) {\n    position: relative;\n    bottom: 0;\n    margin-bottom: 0;\n  }\n"], ["\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  padding: ", ";\n  width: 100%;\n  height: ", "px;\n  background-color: bgLightGray;\n\n  @media print {\n    display: none;\n  }\n\n  @media (min-width: 1024px) {\n    position: relative;\n    bottom: 0;\n    margin-bottom: 0;\n  }\n"])), function (_a) {
+export var BottomWrapper = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  padding: ", ";\n  width: 100%;\n  height: ", "px;\n  background-color: bgLightGray;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n\n  @media print {\n    display: none;\n  }\n\n  @media (min-width: 1024px) {\n    position: relative;\n    bottom: 0;\n    margin-bottom: 0;\n  }\n"], ["\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  padding: ", ";\n  width: 100%;\n  height: ", "px;\n  background-color: bgLightGray;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n\n  @media print {\n    display: none;\n  }\n\n  @media (min-width: 1024px) {\n    position: relative;\n    bottom: 0;\n    margin-bottom: 0;\n  }\n"])), function (_a) {
     var withPagination = _a.withPagination;
     return (withPagination ? '10px 0' : '0px');
 }, function (_a) {

package/ui/Elements/Select/stories/Select.stories.js

@@ -11,5 +11,5 @@ var options = [
     { value: '2', label: 'Option 2' },
     { value: '3', label: 'Option 3' }
 ];
-export var Default = function () { return (_jsx(Select, { label: "Primary Select", onChange: console.log, options: options })); };
+export var Default = function () { return (_jsx(Select, { label: "Primary Select", onChange: console.log, options: options, value: "1" })); };
 export var MultiSelect = function () { return (_jsx(Select, { label: "Multi Select Input", onChange: console.log, options: options, isMulti: true, value: ['1', '2'] })); };

package/ui/Elements/Select/themes/selectStyles.js

@@ -93,11 +93,11 @@ export var CustomStyles = {
     },
     menu: function (styles, state) {
         var theme = state.theme;
-        return __assign(__assign({}, styles), { boxShadow: '0 2px 20px 0 rgba(0, 0, 0, 0.10);', marginTop: '4px', paddingTop: '0', borderRadius: '10px', zIndex: 3, minWidth: 'max-content', color: theme.colors.textPrimary, backgroundColor: theme.colors.menuBackgroundColor });
+        return __assign(__assign({}, styles), { boxShadow: '0 2px 20px 0 rgba(0, 0, 0, 0.10);', marginTop: '4px', paddingTop: '0', borderRadius: '10px', zIndex: 3, minWidth: 'max-content', color: theme.colors.optionTextColor, backgroundColor: theme.colors.menuBackgroundColor });
     },
     menuList: function (styles, _a) {
         var theme = _a.theme;
-        return __assign(__assign({}, styles), { margin: '8px 4px 8px 8px', color: theme.colors.textPrimary, '::-webkit-scrollbar-thumb': {
+        return __assign(__assign({}, styles), { margin: '8px 4px 8px 8px', '::-webkit-scrollbar-thumb': {
                 border: 'none',
                 borderRadius: '4px',
                 height: '47px',
@@ -125,14 +125,13 @@ export var CustomStyles = {
 };
 export var getCustomTheme = function (theme, optionVariant, useFilterSubvariant) {
     var customColors = {
-        textPrimary: th.color('textPrimary')({ theme: theme }),
         primary: th.color('red1')({ theme: theme }),
         inputTextColor: th.color('blue1')({ theme: theme }),
         backgroundColor: th.color('white')({ theme: theme }),
         backgroundColorDisabled: th.color('neutral20')({ theme: theme }),
         multiValueBackgroundColor: th.color('lightGray7')({ theme: theme }),
         menuBackgroundColor: th.color('white')({ theme: theme }),
-        optionTextColor: th.color('blue2')({ theme: theme }),
+        optionTextColor: th.color('textPrimary')({ theme: theme }),
         menuHoverBackgroundColor: th.color('neutral20')({ theme: theme }),
         inputDisabledColor: th.color('lightGray1')({ theme: theme }),
         inputBorderColor: th.color('lightGray3')({ theme: theme }),

package/ui/Elements/Select/types.d.ts

@@ -57,7 +57,6 @@ export type SelectProps = {
     onIconClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
 };
 export type BaseColors = {
-    textPrimary: string;
     primary: string;
     optionTextColor: string;
     inputDisabledColor: string;