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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.8.16-beta.16",
+  "version": "0.8.16-beta.17",
   "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;