@ntbjs/react-components 2.0.0-rc.11 → 2.0.0-rc.13

package/cjs/components/inputs/CompactTextInput/CompactTextInput.styled.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var styled = require('styled-components');
 var defaultTheme = require('../../../utils/defaultTheme.js');
 
@@ -19,6 +20,8 @@ let _ = t => t,
   _t7,
   _t8,
   _t9,
+  _t0,
+  _t1,
   _t10,
   _t11,
   _t12,
@@ -95,13 +98,20 @@ const commonAnchorTagStyle = styled.css(_t7 || (_t7 = _`
 const readOnlyBackground = styled.css(_t8 || (_t8 = _`
   ${0}
 `), props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white')));
-const CompactTextInput = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t9 || (_t9 = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const CompactTextInput = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t9 || (_t9 = _`
   display: flex;
   align-items: center;
   height: 24px;
   font-family: ${0};
 `), props => props.theme.primaryFontFamily);
-const Label = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)(_t10 || (_t10 = _`
+const Label = styled__default["default"].label.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t0 || (_t0 = _`
   ${0};
   flex-basis: 33.33%;
   font-size: 0.875rem;
@@ -111,16 +121,20 @@ const Label = styled__default["default"].label.attrs(defaultTheme.applyDefaultTh
   display: flex;
   align-items: center;
   ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')), props => props.disabled && styled.css(_t11 || (_t11 = _`
+`), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')), props => props.disabled && styled.css(_t1 || (_t1 = _`
       opacity: 0.5;
       cursor: not-allowed;
     `)));
-const InputContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t12 || (_t12 = _`
+const InputContainer = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t10 || (_t10 = _`
   position: relative;
   height: 19px;
   flex-basis: ${0};
 `), props => props.$hasLabel ? '66.66%' : '100%');
-const SuccessContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t13 || (_t13 = _`
+const SuccessContainer = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t11 || (_t11 = _`
   opacity: 1;
   pointer-events: none;
   display: flex;
@@ -133,7 +147,9 @@ const SuccessContainer = styled__default["default"].div.attrs(defaultTheme.apply
     width: 13px;
   }
 `), props => props.fadeIn ? 0 : 1, props => props.fadeIn ? fadeOutCheck : fadeInCheck, props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500')));
-const InputSuccessContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t14 || (_t14 = _`
+const InputSuccessContainer = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t12 || (_t12 = _`
   opacity: 1;
   pointer-events: none;
   display: flex;
@@ -149,7 +165,9 @@ const InputSuccessContainer = styled__default["default"].div.attrs(defaultTheme.
     width: 13px;
   }
 `), props => props.fadeIn ? 0 : 1, props => props.fadeIn ? fadeOutCheck : fadeInCheck, props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500')));
-const InputIconContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t15 || (_t15 = _`
+const InputIconContainer = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t13 || (_t13 = _`
   opacity: 0;
   pointer-events: none;
   border-top-right-radius: 3px;
@@ -172,16 +190,20 @@ const InputIconContainer = styled__default["default"].div.attrs(defaultTheme.app
   > svg {
     width: 12px;
   }
-`), props => props.theme.themeProp('background', styled.css(_t16 || (_t16 = _`
+`), props => props.theme.themeProp('background', styled.css(_t14 || (_t14 = _`
         linear-gradient(-90deg,
         ${0} 55%,
         transparent)
-      `), props => props.type === 'error' ? '#901d1d' : props.type === 'warning' ? '#816600' : props.theme.getColor('gray-700')), styled.css(_t17 || (_t17 = _`
+      `), props => props.type === 'error' ? '#901d1d' : props.type === 'warning' ? '#816600' : props.theme.getColor('gray-700')), styled.css(_t15 || (_t15 = _`
         linear-gradient(-90deg,
         ${0} 55%,
         transparent)
       `), props => props.type === 'error' ? '#f7d5d0' : props.type === 'warning' ? '#fffebf' : props.theme.getColor('gray-100'))), props => props.theme.getColor('gray-400'), props => props.type === 'warning' && props.theme.themeProp('color', '#C3AF43', '#C3AF43'), props => props.type === 'error' && props.theme.themeProp('color', '#CB968F', '#CB968F'));
-const Input = styled__default["default"].input.attrs(defaultTheme.applyDefaultTheme)(_t18 || (_t18 = _`
+const Input = styled__default["default"].input.withConfig({
+  shouldForwardProp
+}).attrs(props => _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, defaultTheme.applyDefaultTheme(props)), {}, {
+  type: props.inputtype || 'text'
+}))(_t16 || (_t16 = _`
   box-sizing: border-box;
   height: 22px;
   width: 100%;
@@ -193,7 +215,7 @@ const Input = styled__default["default"].input.attrs(defaultTheme.applyDefaultTh
   border-radius: 3px;
   border: 1px solid transparent;
 
-   
+${0}
 
   ${0}
 
@@ -201,11 +223,12 @@ const Input = styled__default["default"].input.attrs(defaultTheme.applyDefaultTh
 
   ${0}
 
-  ${0}
-  ${0};
 
-    ${0};
-    ${0};
+    ${0}
+
+
+      
+   
 
       ${0};
 
@@ -213,8 +236,11 @@ const Input = styled__default["default"].input.attrs(defaultTheme.applyDefaultTh
 
 
   &&:not(:hover):not(:focus) {
+
+    ${0}
    
-      ${0};
+     
+
     ${0};
     
     ${0}
@@ -266,13 +292,25 @@ const Input = styled__default["default"].input.attrs(defaultTheme.applyDefaultTh
   }
 
   ${0}
-`), props => props.readOnly && styled.css(_t19 || (_t19 = _`
+`), props => {
+  if (props.type === 'error') {
+    return styled.css(_t17 || (_t17 = _`
+      ${0} !important;
+    `), props.theme.themeProp('background', '#7f1b1b', '#FEE2E2'));
+  } else if (props.type === 'warning') {
+    return styled.css(_t18 || (_t18 = _`
+      ${0} !important;
+    `), props.theme.themeProp('background', '#634E01', '#FFFDE8'));
+  } else {
+    return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
+  }
+}, props => props.readOnly && styled.css(_t19 || (_t19 = _`
       cursor: default;
     `)), props => props.disabled && styled.css(_t20 || (_t20 = _`
       opacity: 0.5;
     `)), props => props.type === 'success' && styled.css(_t21 || (_t21 = _`
       animation: ${0} 0.5s ease-in-out;
-    `), props => props.type === 'success' ? fadeIn : fadeOut), props => props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')), props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white')), props => props.type === 'warning' && props.theme.themeProp('background', '#634E01', '#FFFDE8'), props => props.type === 'error' && props.theme.themeProp('background', '#7f1b1b', '#FBEAE6'), props => props.hasLink && styled.css(_t22 || (_t22 = _`
+    `), props => props.type === 'success' ? fadeIn : fadeOut), props => props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')), props => props.haslink && styled.css(_t22 || (_t22 = _`
           &&:not(:focus),
           &&:read-only {
             ${0}
@@ -280,7 +318,17 @@ const Input = styled__default["default"].input.attrs(defaultTheme.applyDefaultTh
           &&:read-only {
             cursor: default;
           }
-        `), linkColor), props => props.edit && props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)'), props => props.edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)'), props => props.hasLink && styled.css(_t23 || (_t23 = _`
+        `), linkColor), props => {
+  if (props.$edit) {
+    if (props.type === 'error') {
+      return props.theme.themeProp('background', '#7f1b1b', '#FEE2E2');
+    } else if (props.type === 'warning') {
+      return props.theme.themeProp('background', '#634E01', '#FFFDE8');
+    } else {
+      return props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)');
+    }
+  }
+}, props => props.$edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)'), props => props.haslink && styled.css(_t23 || (_t23 = _`
         &&:not(:focus),
         &&:read-only {
           cursor: default;
@@ -288,7 +336,7 @@ const Input = styled__default["default"].input.attrs(defaultTheme.applyDefaultTh
         }
       `), linkColor), props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')), props => props.readOnly && styled.css(_t24 || (_t24 = _`
         ${0}
-      `), readOnlyBackground), props => props.edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')), props => props.type === 'warning' && props.theme.themeProp('background', '#806403', '#FFFEBF'), props => props.type === 'error' && props.theme.themeProp('background', '#901d1d', '#F7D5D0'), props => props.hasLink && styled.css(_t25 || (_t25 = _`
+      `), readOnlyBackground), props => props.$edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')), props => props.type === 'warning' && props.theme.themeProp('background', '#806403', '#FFFEBF'), props => props.type === 'error' && props.theme.themeProp('background', '#901d1d', '#F7D5D0'), props => props.$haslink && styled.css(_t25 || (_t25 = _`
         cursor: pointer;
         &&:read-only {
           background: none !important;
@@ -297,7 +345,7 @@ const Input = styled__default["default"].input.attrs(defaultTheme.applyDefaultTh
       `)), InputIconContainer, props => props.disabled && styled.css(_t26 || (_t26 = _`
         background: none !important;
         cursor: not-allowed;
-      `)), props => props.disabled && props.hasLink && styled.css(_t27 || (_t27 = _`
+      `)), props => props.disabled && props.$haslink && styled.css(_t27 || (_t27 = _`
           background: none !important;
           cursor: not-allowed !important;
         `)), props => !props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')), props => props.readOnly && styled.css(_t28 || (_t28 = _`
@@ -312,14 +360,16 @@ const Input = styled__default["default"].input.attrs(defaultTheme.applyDefaultTh
         ${0}
         ${0}
         ${0}
-      `), props => props.theme.themeProp('border-color', '#D83018', '#D83018'), props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black')), props => props.bold && styled.css(_t32 || (_t32 = _`
+      `), props => props.theme.themeProp('border-color', '#D83018', '#D83018'), props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black')), props => props.$bold && styled.css(_t32 || (_t32 = _`
       font-size: 1rem;
       font-weight: 500;
       line-height: 1.0625;
       padding-top: 3px;
       padding-bottom: 2px;
     `)));
-const LinkPopoverContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t33 || (_t33 = _`
+const LinkPopoverContainer = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t33 || (_t33 = _`
   ${0}
 
   padding: 5px 8px;
@@ -329,11 +379,15 @@ const LinkPopoverContainer = styled__default["default"].div.attrs(defaultTheme.a
     margin-right: 8px;
   }
 `), commonAnchorTagStyle);
-const StyledLink = styled__default["default"].a.attrs(defaultTheme.applyDefaultTheme)(_t34 || (_t34 = _`
+const StyledLink = styled__default["default"].a.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t34 || (_t34 = _`
   ${0}
   ${0}
 `), commonAnchorTagStyle, linkColor);
-const ReadOnlyLinkContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t35 || (_t35 = _`
+const ReadOnlyLinkContainer = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t35 || (_t35 = _`
   ${0};
   border: 1px solid transparent;
   border-radius: 3px;

package/cjs/components/inputs/MultiLevelCheckbox/MultiLevelCheckbox.styled.js

@@ -19,24 +19,35 @@ let _ = t => t,
   _t7,
   _t8,
   _t9;
-const MultiLevelCheckbox = styled__default["default"].fieldset.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const MultiLevelCheckbox = styled__default["default"].fieldset.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
   padding: 0;
   border: 0;
   margin: 0;
 `));
-const MultiLevelCheckboxLegend = styled__default["default"].legend.attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
+const MultiLevelCheckboxLegend = styled__default["default"].legend.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
   line-height: 1.2;
   font-size: 0.75rem;
   padding: 0 0 4px;
   letter-spacing: 0.03em;
   ${0}
 `), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600')));
-const MultiLevelCheckboxNoResults = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
+const MultiLevelCheckboxNoResults = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
   text-align: center;
   opacity: 0.7;
   font-size: 0.875rem;
 `));
-const CheckboxTreeChildren = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t4 || (_t4 = _`
+const CheckboxTreeChildren = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t4 || (_t4 = _`
   display: grid;
   grid-template-rows: 0fr;
   padding-left: 28px;
@@ -51,14 +62,20 @@ const CheckboxTreeChildren = styled__default["default"].div.attrs(defaultTheme.a
 `), props => props.$expanded && styled.css(_t5 || (_t5 = _`
       grid-template-rows: 1fr;
     `)));
-const CheckboxTree = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t6 || (_t6 = _`
+const CheckboxTree = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t6 || (_t6 = _`
   width: fit-content;
 `));
-const CheckboxTreeCheckboxContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t7 || (_t7 = _`
+const CheckboxTreeCheckboxContainer = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t7 || (_t7 = _`
   position: relative;
   margin-top: 4px;
 `));
-const ExpandTreeButton = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
+const ExpandTreeButton = styled__default["default"].button.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
   -webkit-appearance: none;
   background: none;
   border: none;

package/cjs/components/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js

@@ -11,7 +11,7 @@ var close = require('../../../icons/close.svg.js');
 var MultiLevelCheckbox = require('../MultiLevelCheckbox/MultiLevelCheckbox.js');
 var useEventListner = require('../../../hooks/useEventListner.js');
 var useOnClickOutside = require('../../../hooks/useOnClickOutside.js');
-var useUpdateEffect = require('../../../node_modules/@restart/hooks/esm/useUpdateEffect.js');
+var useUpdateEffect = require('../../../node_modules/@restart/hooks/lib/useUpdateEffect.js');
 var lodash = require('lodash');
 var Popover = require('../../data/Popover/Popover.js');
 var TextInput = require('../TextInput/TextInput.js');

package/cjs/components/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.styled.js

@@ -19,12 +19,19 @@ let _ = t => t,
   _t7,
   _t8,
   _t9,
-  _t10,
-  _t11;
-const MultiLevelCheckboxSelect = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+  _t0,
+  _t1;
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const MultiLevelCheckboxSelect = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
   font-family: ${0};
 `), props => props.theme.primaryFontFamily);
-const MultiLevelCheckboxSelectInput = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
+const MultiLevelCheckboxSelectInput = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
   position: relative;
   border: 1px solid;
   ${0}
@@ -41,7 +48,9 @@ const MultiLevelCheckboxSelectInput = styled__default["default"].div.attrs(defau
     ${0}
   }
 `), props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400')), props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'), 1));
-const Item = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
+const Item = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
   display: flex;
   align-items: center;
   background: #272727;
@@ -50,10 +59,14 @@ const Item = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme
   height: 26px;
   border-radius: 3px;
 `));
-const ItemLabel = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t4 || (_t4 = _`
+const ItemLabel = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t4 || (_t4 = _`
   padding: 0 5px 0 8px;
 `));
-const ItemRemoveButton = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)(_t5 || (_t5 = _`
+const ItemRemoveButton = styled__default["default"].button.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t5 || (_t5 = _`
   color: inherit;
   border: none;
   background: none;
@@ -73,7 +86,9 @@ const ItemRemoveButton = styled__default["default"].button.attrs(defaultTheme.ap
     display: block;
   }
 `), props => props.theme.getColor('red-500'));
-const Label = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t6 || (_t6 = _`
+const Label = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t6 || (_t6 = _`
   position: absolute;
   top: -8px;
   left: 7px;
@@ -86,24 +101,34 @@ const Label = styled__default["default"].div.attrs(defaultTheme.applyDefaultThem
   ${0}
   ${0}
 `), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600')), props => props.theme.themeProp('background', `linear-gradient(0deg, ${props.theme.getColor('gray-900')} calc(50% + 1px), transparent 50%)`, `linear-gradient(0deg, ${props.theme.getColor('white')} calc(50% + 1px), transparent 50%)`));
-const Placeholder = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t7 || (_t7 = _`
+const Placeholder = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t7 || (_t7 = _`
   font-size: 0.875rem;
   line-height: 26px;
   padding-left: 4px;
   opacity: 0.4;
 `));
-const PopoverContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
+const PopoverContainer = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
   max-height: inherit;
   display: flex;
   flex-direction: column;
 `));
-const PopoverHeader = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t9 || (_t9 = _`
+const PopoverHeader = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t9 || (_t9 = _`
   ${0}
 `), props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white')));
-const SearchContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t10 || (_t10 = _`
+const SearchContainer = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t0 || (_t0 = _`
   padding: 12px 8px;
 `));
-const OptionsContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t11 || (_t11 = _`
+const OptionsContainer = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t1 || (_t1 = _`
   padding: 12px 8px;
   overflow: auto;
   box-sizing: border-box;

package/cjs/components/inputs/MultiSelect/MultiSelect.js

@@ -5,15 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var index = require('../../../node_modules/react/index.js');
 var index$2 = require('../../../node_modules/prop-types/index.js');
-var nanoid = require('nanoid');
 var MultiSelect_styled = require('./MultiSelect.styled.js');
 var close = require('../../../icons/close.svg.js');
 var index$1 = require('../../../_virtual/index.js');
 
-const _excluded = ["label", "selectedOptions", "availableOptions", "loadOptions", "loadingMessageFunc", "onUpdateCallback", "editText", "createNewOptionMessageFunc", "noOptionsMessageFunc", "onMultiValueClick", "showMore", "showMoreText", "displayTotalOnShowMore", "creatable", "readOnly", "hidden", "disabled", "error", "warning"];
+const _excluded = ["selectedOptions", "availableOptions", "loadOptions", "loadingMessageFunc", "onUpdateCallback", "editText", "createNewOptionMessageFunc", "noOptionsMessageFunc", "onMultiValueClick", "showMore", "showMoreText", "displayTotalOnShowMore", "creatable", "readOnly", "hidden", "disabled", "error", "warning"];
 const MultiSelect = index["default"].forwardRef(function MultiSelect(_ref, forwardedRef) {
   let {
-      label,
       selectedOptions,
       availableOptions,
       loadOptions,
@@ -34,7 +32,6 @@ const MultiSelect = index["default"].forwardRef(function MultiSelect(_ref, forwa
       warning
     } = _ref,
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  const [uniqueId] = index$1.react.exports.useState(nanoid.nanoid());
   const [selected, setSelected] = index$1.react.exports.useState(selectedOptions);
   const [focused, setFocused] = index$1.react.exports.useState(false);
   const [displayShowMore, setDisplayShowMore] = index$1.react.exports.useState(error || warning ? false : showMore);
@@ -45,30 +42,6 @@ const MultiSelect = index["default"].forwardRef(function MultiSelect(_ref, forwa
   const handleShowMoreClick = () => {
     setDisplayShowMore(false);
   };
-  const Control = index$1.react.exports.useMemo(() => {
-    const ControlWrapper = innerProps => {
-      return index["default"].createElement(MultiSelect_styled.Control, _rollupPluginBabelHelpers["extends"]({
-        className: "multi-select-control",
-        readOnly: readOnly
-      }, innerProps));
-    };
-    ControlWrapper.displayName = 'ControlWrapper';
-    return ControlWrapper;
-  }, []);
-  const ValueContainer = index$1.react.exports.useMemo(() => {
-    const ValueContainerWrapper = innerProps => {
-      return index["default"].createElement(index["default"].Fragment, null, label && index["default"].createElement(MultiSelect_styled.Label, {
-        htmlFor: uniqueId
-      }, label), index["default"].createElement(MultiSelect_styled.ValueContainer, _rollupPluginBabelHelpers["extends"]({
-        showMore: displayShowMore,
-        error: error,
-        warning: warning,
-        className: "multi-select-values-container"
-      }, innerProps)));
-    };
-    ValueContainerWrapper.displayName = 'ValueContainerWrapper';
-    return ValueContainerWrapper;
-  }, [displayShowMore, error, warning]);
   const MultiValue = innerProps => {
     return index["default"].createElement(MultiSelect_styled.MultiValueWrapper, {
       className: "multi-value-wrapper",
@@ -83,28 +56,12 @@ const MultiSelect = index["default"].forwardRef(function MultiSelect(_ref, forwa
       readOnly: readOnly
     }, innerProps)));
   };
-  const Input = index$1.react.exports.useMemo(() => {
-    const InputWrapper = innerProps => {
-      return index["default"].createElement(MultiSelect_styled.Input, _rollupPluginBabelHelpers["extends"]({
-        className: "multi-select-input",
-        $focused: focused,
-        edittext: editText
-      }, innerProps, {
-        isDisabled: readOnly || disabled
-      }));
-    };
-    InputWrapper.displayName = 'InputWrapper';
-    return InputWrapper;
-  }, [focused]);
   const innerComponents = {
     DropdownIndicator: null,
-    Control,
     MultiValue,
     MultiValueRemove: innerProps => {
       return readOnly || disabled ? false : MultiValueRemove(innerProps);
     },
-    ValueContainer,
-    Input,
     Menu,
     Option: innerProps => {
       return innerProps.isSelected ? SelectedOption(innerProps) : Option(innerProps);
@@ -182,13 +139,13 @@ const MultiSelect = index["default"].forwardRef(function MultiSelect(_ref, forwa
   };
   if (hidden) return null;
   return index["default"].createElement(MultiSelect_styled.MultiSelectWrapper, {
-    error: error,
-    warning: warning
+    $error: error,
+    $warning: warning
   }, loadOptions ? creatable ? index["default"].createElement(MultiSelect_styled.AsyncCreatableMultiSelect, _rollupPluginBabelHelpers["extends"]({}, sharedSelectProps, props)) : index["default"].createElement(MultiSelect_styled.AsyncMultiSelect, _rollupPluginBabelHelpers["extends"]({}, sharedSelectProps, props)) : creatable ? index["default"].createElement(MultiSelect_styled.CreatableMultiSelect, _rollupPluginBabelHelpers["extends"]({}, sharedSelectProps, props)) : index["default"].createElement(MultiSelect_styled.MultiSelect, _rollupPluginBabelHelpers["extends"]({}, sharedSelectProps, props)), displayShowMore && !(error || warning) && index["default"].createElement(MultiSelect_styled.ShowMoreWrapper, {
     onClick: handleShowMoreClick
   }, index["default"].createElement(MultiSelect_styled.ShowMoreOverlay, null), index["default"].createElement(MultiSelect_styled.ShowMoreText, null, showMoreText, " ", displayTotalOnShowMore && '(' + selected.length + ')')), (typeof error === 'string' || typeof warning === 'string') && index["default"].createElement(MultiSelect_styled.ErrorMessage, {
-    error: error,
-    warning: warning
+    $error: error,
+    $warning: warning
   }, error ? error : warning));
 });
 MultiSelect.propTypes = process.env.NODE_ENV !== "production" ? {