@mailstep/design-system 0.8.16-beta.16 → 0.8.16-beta.18

package/package.json

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

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

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+
+declare const meta: {
+    title: string;
+    component: FC<import('../types').SelectProps>;
+    argTypes: {};
+};
+export default meta;
+export declare const Primary: FC;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Select from '../Select';
+var meta = {
+    title: 'Forms/Select',
+    component: Select,
+    argTypes: {}
+};
+export default meta;
+var options = [
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' }
+];
+export var Primary = function () { return (_jsx(Select, { label: "Primary Input", onChange: function () { }, options: options, isMulti: true, value: ['1', '2'] })); };

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

@@ -37,7 +37,7 @@ export var CustomStyles = {
     },
     multiValue: function (styles, state) {
         var theme = state.theme;
-        return __assign(__assign({}, styles), { color: theme.colors.inputTextColor, fontWeight: theme.textWeightNormal, backgroundColor: theme.colors.lightGray7, borderRadius: '4px', '& svg': {
+        return __assign(__assign({}, styles), { color: theme.colors.inputTextColor, fontWeight: theme.textWeightNormal, backgroundColor: theme.colors.multiValueBackgroundColor, borderRadius: '4px', '& svg': {
                 color: theme.colors.inputTextColor
             }, ' > div': {
                 fontSize: '12px'
@@ -129,6 +129,7 @@ export var getCustomTheme = function (theme, optionVariant, useFilterSubvariant)
         inputTextColor: th.color('blue1')({ theme: theme }),
         backgroundColor: th.color('white')({ theme: theme }),
         backgroundColorDisabled: th.color('bgLightGray1')({ theme: theme }),
+        multiValueBackgroundColor: th.color('lightGray7')({ theme: theme }),
         menuBackgroundColor: th.color('white')({ theme: theme }),
         optionTextColor: th.color('blue2')({ theme: theme }),
         menuHoverBackgroundColor: th.color('bgLightGray1')({ theme: theme }),

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

@@ -63,6 +63,7 @@ export type BaseColors = {
     inputBorderColor: string;
     backgroundColor: string;
     backgroundColorDisabled: string;
+    multiValueBackgroundColor: string;
     menuBackgroundColor: string;
     inputTextColor: string;
     placeholderTextColor: string;

package/ui/Forms/Input/styles.js

@@ -29,7 +29,7 @@ export var IconsController = styled.div(templateObject_3 || (templateObject_3 =
 export var IconWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  svg {\n    :hover {\n      cursor: pointer;\n      color: blue2;\n    }\n  }\n"], ["\n  display: flex;\n  svg {\n    :hover {\n      cursor: pointer;\n      color: blue2;\n    }\n  }\n"])));
 export var StyledInput = styled.input.attrs(function (props) { return ({
     as: props.$asTextArea ? 'textarea' : 'input'
-}); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  background-color: white;\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: ", ";\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: normal;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n        color: blue2;\n      }\n    }\n  }\n  ", ";\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: bgLightGray1;\n    border-color: lightGray6;\n    color: neutral300;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"], ["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  background-color: white;\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: ", ";\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: normal;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n        color: blue2;\n      }\n    }\n  }\n  ", ";\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: bgLightGray1;\n    border-color: lightGray6;\n    color: neutral300;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"])), system, function (_a) {
+}); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  background-color: white;\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: ", ";\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: normal;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n        color: blue2;\n      }\n    }\n  }\n  ", ";\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: neutral30;\n    border-color: lightGray6;\n    color: neutral300;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"], ["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  background-color: white;\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: ", ";\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: normal;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n        color: blue2;\n      }\n    }\n  }\n  ", ";\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: neutral30;\n    border-color: lightGray6;\n    color: neutral300;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"])), system, function (_a) {
     var $isInvalid = _a.$isInvalid;
     return ($isInvalid ? th.color('red1') : th.color('lightGray6'));
 }, function (props) { return resolvePaddingRight(props); }, function (props) { return (props.type !== 'checkbox' ? '100%' : 'auto'); }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {

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

@@ -19,6 +19,7 @@ declare const darkTheme: {
         lightGray5: string;
         lightGray6: string;
         neutral10: string;
+        neutral30: string;
         neutral300: string;
         neutral500: string;
         gray: string;

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

@@ -13,6 +13,7 @@ declare const defaultTheme: {
         lightGray7: string;
         neutral10: string;
         neutral20: string;
+        neutral30: string;
         neutral300: string;
         neutral500: string;
         gray: string;

package/ui/ThemeProvider/themes/default.js

@@ -13,6 +13,7 @@ var defaultTheme = {
         lightGray7: '#E7EBEF',
         neutral10: '#FAFBFC',
         neutral20: '#F1F5F9',
+        neutral30: '#F1F5F9',
         neutral300: '#5E6C84',
         neutral500: '#42526E',
         gray: '#8594A5',

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

@@ -14,6 +14,7 @@ declare const themes: {
             lightGray7: string;
             neutral10: string;
             neutral20: string;
+            neutral30: string;
             neutral300: string;
             neutral500: string;
             gray: string;
@@ -375,6 +376,7 @@ declare const themes: {
             lightGray5: string;
             lightGray6: string;
             neutral10: string;
+            neutral30: string;
             neutral300: string;
             neutral500: string;
             gray: string;