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

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

@@ -1,3 +1,4 @@
+import { objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import styled, { keyframes, css } from 'styled-components';
 import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
 
@@ -11,6 +12,8 @@ let _ = t => t,
   _t7,
   _t8,
   _t9,
+  _t0,
+  _t1,
   _t10,
   _t11,
   _t12,
@@ -87,13 +90,20 @@ const commonAnchorTagStyle = css(_t7 || (_t7 = _`
 const readOnlyBackground = css(_t8 || (_t8 = _`
   ${0}
 `), props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white')));
-const CompactTextInput = styled.div.attrs(applyDefaultTheme)(_t9 || (_t9 = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const CompactTextInput = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t9 || (_t9 = _`
   display: flex;
   align-items: center;
   height: 24px;
   font-family: ${0};
 `), props => props.theme.primaryFontFamily);
-const Label = styled.label.attrs(applyDefaultTheme)(_t10 || (_t10 = _`
+const Label = styled.label.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t0 || (_t0 = _`
   ${0};
   flex-basis: 33.33%;
   font-size: 0.875rem;
@@ -103,16 +113,20 @@ const Label = styled.label.attrs(applyDefaultTheme)(_t10 || (_t10 = _`
   display: flex;
   align-items: center;
   ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')), props => props.disabled && css(_t11 || (_t11 = _`
+`), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')), props => props.disabled && css(_t1 || (_t1 = _`
       opacity: 0.5;
       cursor: not-allowed;
     `)));
-const InputContainer = styled.div.attrs(applyDefaultTheme)(_t12 || (_t12 = _`
+const InputContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t10 || (_t10 = _`
   position: relative;
   height: 19px;
   flex-basis: ${0};
 `), props => props.$hasLabel ? '66.66%' : '100%');
-const SuccessContainer = styled.div.attrs(applyDefaultTheme)(_t13 || (_t13 = _`
+const SuccessContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t11 || (_t11 = _`
   opacity: 1;
   pointer-events: none;
   display: flex;
@@ -125,7 +139,9 @@ const SuccessContainer = styled.div.attrs(applyDefaultTheme)(_t13 || (_t13 = _`
     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.div.attrs(applyDefaultTheme)(_t14 || (_t14 = _`
+const InputSuccessContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t12 || (_t12 = _`
   opacity: 1;
   pointer-events: none;
   display: flex;
@@ -141,7 +157,9 @@ const InputSuccessContainer = styled.div.attrs(applyDefaultTheme)(_t14 || (_t14
     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.div.attrs(applyDefaultTheme)(_t15 || (_t15 = _`
+const InputIconContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t13 || (_t13 = _`
   opacity: 0;
   pointer-events: none;
   border-top-right-radius: 3px;
@@ -164,16 +182,20 @@ const InputIconContainer = styled.div.attrs(applyDefaultTheme)(_t15 || (_t15 = _
   > svg {
     width: 12px;
   }
-`), props => props.theme.themeProp('background', css(_t16 || (_t16 = _`
+`), props => props.theme.themeProp('background', css(_t14 || (_t14 = _`
         linear-gradient(-90deg,
         ${0} 55%,
         transparent)
-      `), props => props.type === 'error' ? '#901d1d' : props.type === 'warning' ? '#816600' : props.theme.getColor('gray-700')), css(_t17 || (_t17 = _`
+      `), props => props.type === 'error' ? '#901d1d' : props.type === 'warning' ? '#816600' : props.theme.getColor('gray-700')), 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.input.attrs(applyDefaultTheme)(_t18 || (_t18 = _`
+const Input = styled.input.withConfig({
+  shouldForwardProp
+}).attrs(props => _objectSpread2(_objectSpread2({}, applyDefaultTheme(props)), {}, {
+  type: props.inputtype || 'text'
+}))(_t16 || (_t16 = _`
   box-sizing: border-box;
   height: 22px;
   width: 100%;
@@ -185,7 +207,7 @@ const Input = styled.input.attrs(applyDefaultTheme)(_t18 || (_t18 = _`
   border-radius: 3px;
   border: 1px solid transparent;
 
-   
+${0}
 
   ${0}
 
@@ -193,11 +215,12 @@ const Input = styled.input.attrs(applyDefaultTheme)(_t18 || (_t18 = _`
 
   ${0}
 
-  ${0}
-  ${0};
 
-    ${0};
-    ${0};
+    ${0}
+
+
+      
+   
 
       ${0};
 
@@ -205,8 +228,11 @@ const Input = styled.input.attrs(applyDefaultTheme)(_t18 || (_t18 = _`
 
 
   &&:not(:hover):not(:focus) {
+
+    ${0}
    
-      ${0};
+     
+
     ${0};
     
     ${0}
@@ -258,13 +284,25 @@ const Input = styled.input.attrs(applyDefaultTheme)(_t18 || (_t18 = _`
   }
 
   ${0}
-`), props => props.readOnly && css(_t19 || (_t19 = _`
+`), props => {
+  if (props.type === 'error') {
+    return css(_t17 || (_t17 = _`
+      ${0} !important;
+    `), props.theme.themeProp('background', '#7f1b1b', '#FEE2E2'));
+  } else if (props.type === 'warning') {
+    return 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 && css(_t19 || (_t19 = _`
       cursor: default;
     `)), props => props.disabled && css(_t20 || (_t20 = _`
       opacity: 0.5;
     `)), props => props.type === 'success' && 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 && 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 && css(_t22 || (_t22 = _`
           &&:not(:focus),
           &&:read-only {
             ${0}
@@ -272,7 +310,17 @@ const Input = styled.input.attrs(applyDefaultTheme)(_t18 || (_t18 = _`
           &&: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 && 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 && css(_t23 || (_t23 = _`
         &&:not(:focus),
         &&:read-only {
           cursor: default;
@@ -280,7 +328,7 @@ const Input = styled.input.attrs(applyDefaultTheme)(_t18 || (_t18 = _`
         }
       `), linkColor), props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')), props => props.readOnly && 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 && 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 && css(_t25 || (_t25 = _`
         cursor: pointer;
         &&:read-only {
           background: none !important;
@@ -289,7 +337,7 @@ const Input = styled.input.attrs(applyDefaultTheme)(_t18 || (_t18 = _`
       `)), InputIconContainer, props => props.disabled && css(_t26 || (_t26 = _`
         background: none !important;
         cursor: not-allowed;
-      `)), props => props.disabled && props.hasLink && css(_t27 || (_t27 = _`
+      `)), props => props.disabled && props.$haslink && 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 && css(_t28 || (_t28 = _`
@@ -304,14 +352,16 @@ const Input = styled.input.attrs(applyDefaultTheme)(_t18 || (_t18 = _`
         ${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 && 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 && css(_t32 || (_t32 = _`
       font-size: 1rem;
       font-weight: 500;
       line-height: 1.0625;
       padding-top: 3px;
       padding-bottom: 2px;
     `)));
-const LinkPopoverContainer = styled.div.attrs(applyDefaultTheme)(_t33 || (_t33 = _`
+const LinkPopoverContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t33 || (_t33 = _`
   ${0}
 
   padding: 5px 8px;
@@ -321,11 +371,15 @@ const LinkPopoverContainer = styled.div.attrs(applyDefaultTheme)(_t33 || (_t33 =
     margin-right: 8px;
   }
 `), commonAnchorTagStyle);
-const StyledLink = styled.a.attrs(applyDefaultTheme)(_t34 || (_t34 = _`
+const StyledLink = styled.a.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t34 || (_t34 = _`
   ${0}
   ${0}
 `), commonAnchorTagStyle, linkColor);
-const ReadOnlyLinkContainer = styled.div.attrs(applyDefaultTheme)(_t35 || (_t35 = _`
+const ReadOnlyLinkContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t35 || (_t35 = _`
   ${0};
   border: 1px solid transparent;
   border-radius: 3px;

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

@@ -11,24 +11,35 @@ let _ = t => t,
   _t7,
   _t8,
   _t9;
-const MultiLevelCheckbox = styled.fieldset.attrs(applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const MultiLevelCheckbox = styled.fieldset.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t || (_t = _`
   padding: 0;
   border: 0;
   margin: 0;
 `));
-const MultiLevelCheckboxLegend = styled.legend.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
+const MultiLevelCheckboxLegend = styled.legend.withConfig({
+  shouldForwardProp
+}).attrs(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.div.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
+const MultiLevelCheckboxNoResults = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t3 || (_t3 = _`
   text-align: center;
   opacity: 0.7;
   font-size: 0.875rem;
 `));
-const CheckboxTreeChildren = styled.div.attrs(applyDefaultTheme)(_t4 || (_t4 = _`
+const CheckboxTreeChildren = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t4 || (_t4 = _`
   display: grid;
   grid-template-rows: 0fr;
   padding-left: 28px;
@@ -43,14 +54,20 @@ const CheckboxTreeChildren = styled.div.attrs(applyDefaultTheme)(_t4 || (_t4 = _
 `), props => props.$expanded && css(_t5 || (_t5 = _`
       grid-template-rows: 1fr;
     `)));
-const CheckboxTree = styled.div.attrs(applyDefaultTheme)(_t6 || (_t6 = _`
+const CheckboxTree = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t6 || (_t6 = _`
   width: fit-content;
 `));
-const CheckboxTreeCheckboxContainer = styled.div.attrs(applyDefaultTheme)(_t7 || (_t7 = _`
+const CheckboxTreeCheckboxContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t7 || (_t7 = _`
   position: relative;
   margin-top: 4px;
 `));
-const ExpandTreeButton = styled.button.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
+const ExpandTreeButton = styled.button.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t8 || (_t8 = _`
   -webkit-appearance: none;
   background: none;
   border: none;

package/esm/components/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js

@@ -7,7 +7,7 @@ import { ReactComponent as SvgClose } from '../../../icons/close.svg.js';
 import MultiLevelCheckbox, { NodeType, findChildValues } from '../MultiLevelCheckbox/MultiLevelCheckbox.js';
 import { useEventListener } from '../../../hooks/useEventListner.js';
 import { useOnClickOutside } from '../../../hooks/useOnClickOutside.js';
-import useUpdateEffect from '../../../node_modules/@restart/hooks/esm/useUpdateEffect.js';
+import useUpdateEffect from '../../../node_modules/@restart/hooks/lib/useUpdateEffect.js';
 import { isFunction } from 'lodash';
 import Popover from '../../data/Popover/Popover.js';
 import TextInput from '../TextInput/TextInput.js';

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

@@ -11,12 +11,19 @@ let _ = t => t,
   _t7,
   _t8,
   _t9,
-  _t10,
-  _t11;
-const MultiLevelCheckboxSelect = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
+  _t0,
+  _t1;
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const MultiLevelCheckboxSelect = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t || (_t = _`
   font-family: ${0};
 `), props => props.theme.primaryFontFamily);
-const MultiLevelCheckboxSelectInput = styled.div.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
+const MultiLevelCheckboxSelectInput = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t2 || (_t2 = _`
   position: relative;
   border: 1px solid;
   ${0}
@@ -33,7 +40,9 @@ const MultiLevelCheckboxSelectInput = styled.div.attrs(applyDefaultTheme)(_t2 ||
     ${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.div.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
+const Item = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t3 || (_t3 = _`
   display: flex;
   align-items: center;
   background: #272727;
@@ -42,10 +51,14 @@ const Item = styled.div.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
   height: 26px;
   border-radius: 3px;
 `));
-const ItemLabel = styled.div.attrs(applyDefaultTheme)(_t4 || (_t4 = _`
+const ItemLabel = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t4 || (_t4 = _`
   padding: 0 5px 0 8px;
 `));
-const ItemRemoveButton = styled.button.attrs(applyDefaultTheme)(_t5 || (_t5 = _`
+const ItemRemoveButton = styled.button.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t5 || (_t5 = _`
   color: inherit;
   border: none;
   background: none;
@@ -65,7 +78,9 @@ const ItemRemoveButton = styled.button.attrs(applyDefaultTheme)(_t5 || (_t5 = _`
     display: block;
   }
 `), props => props.theme.getColor('red-500'));
-const Label = styled.div.attrs(applyDefaultTheme)(_t6 || (_t6 = _`
+const Label = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t6 || (_t6 = _`
   position: absolute;
   top: -8px;
   left: 7px;
@@ -78,24 +93,34 @@ const Label = styled.div.attrs(applyDefaultTheme)(_t6 || (_t6 = _`
   ${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.div.attrs(applyDefaultTheme)(_t7 || (_t7 = _`
+const Placeholder = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t7 || (_t7 = _`
   font-size: 0.875rem;
   line-height: 26px;
   padding-left: 4px;
   opacity: 0.4;
 `));
-const PopoverContainer = styled.div.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
+const PopoverContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t8 || (_t8 = _`
   max-height: inherit;
   display: flex;
   flex-direction: column;
 `));
-const PopoverHeader = styled.div.attrs(applyDefaultTheme)(_t9 || (_t9 = _`
+const PopoverHeader = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t9 || (_t9 = _`
   ${0}
 `), props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white')));
-const SearchContainer = styled.div.attrs(applyDefaultTheme)(_t10 || (_t10 = _`
+const SearchContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t0 || (_t0 = _`
   padding: 12px 8px;
 `));
-const OptionsContainer = styled.div.attrs(applyDefaultTheme)(_t11 || (_t11 = _`
+const OptionsContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t1 || (_t1 = _`
   padding: 12px 8px;
   overflow: auto;
   box-sizing: border-box;

package/esm/components/inputs/MultiSelect/MultiSelect.js

@@ -1,15 +1,13 @@
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React from '../../../node_modules/react/index.js';
 import PropTypes from '../../../node_modules/prop-types/index.js';
-import { nanoid } from 'nanoid';
-import { MultiSelectWrapper, AsyncCreatableMultiSelect, AsyncMultiSelect, CreatableMultiSelect, MultiSelect as MultiSelect$2, ShowMoreWrapper, ShowMoreOverlay, ShowMoreText, ErrorMessage, MultiValueRemove as MultiValueRemove$1, DropdownMenu, Option as Option$1, SelectedOption as SelectedOption$1, DropdownOptionDeleteIcon, Control, Label, ValueContainer, MultiValueWrapper, MultiValue, Input } from './MultiSelect.styled.js';
+import { MultiSelectWrapper, AsyncCreatableMultiSelect, AsyncMultiSelect, CreatableMultiSelect, MultiSelect as MultiSelect$2, ShowMoreWrapper, ShowMoreOverlay, ShowMoreText, ErrorMessage, MultiValueRemove as MultiValueRemove$1, DropdownMenu, Option as Option$1, SelectedOption as SelectedOption$1, DropdownOptionDeleteIcon, MultiValueWrapper, MultiValue } from './MultiSelect.styled.js';
 import { ReactComponent as SvgClose } from '../../../icons/close.svg.js';
 import { r as react } from '../../../_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 = React.forwardRef(function MultiSelect(_ref, forwardedRef) {
   let {
-      label,
       selectedOptions,
       availableOptions,
       loadOptions,
@@ -30,7 +28,6 @@ const MultiSelect = React.forwardRef(function MultiSelect(_ref, forwardedRef) {
       warning
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  const [uniqueId] = react.exports.useState(nanoid());
   const [selected, setSelected] = react.exports.useState(selectedOptions);
   const [focused, setFocused] = react.exports.useState(false);
   const [displayShowMore, setDisplayShowMore] = react.exports.useState(error || warning ? false : showMore);
@@ -41,30 +38,6 @@ const MultiSelect = React.forwardRef(function MultiSelect(_ref, forwardedRef) {
   const handleShowMoreClick = () => {
     setDisplayShowMore(false);
   };
-  const Control$1 = react.exports.useMemo(() => {
-    const ControlWrapper = innerProps => {
-      return React.createElement(Control, _extends({
-        className: "multi-select-control",
-        readOnly: readOnly
-      }, innerProps));
-    };
-    ControlWrapper.displayName = 'ControlWrapper';
-    return ControlWrapper;
-  }, []);
-  const ValueContainer$1 = react.exports.useMemo(() => {
-    const ValueContainerWrapper = innerProps => {
-      return React.createElement(React.Fragment, null, label && React.createElement(Label, {
-        htmlFor: uniqueId
-      }, label), React.createElement(ValueContainer, _extends({
-        showMore: displayShowMore,
-        error: error,
-        warning: warning,
-        className: "multi-select-values-container"
-      }, innerProps)));
-    };
-    ValueContainerWrapper.displayName = 'ValueContainerWrapper';
-    return ValueContainerWrapper;
-  }, [displayShowMore, error, warning]);
   const MultiValue$1 = innerProps => {
     return React.createElement(MultiValueWrapper, {
       className: "multi-value-wrapper",
@@ -79,28 +52,12 @@ const MultiSelect = React.forwardRef(function MultiSelect(_ref, forwardedRef) {
       readOnly: readOnly
     }, innerProps)));
   };
-  const Input$1 = react.exports.useMemo(() => {
-    const InputWrapper = innerProps => {
-      return React.createElement(Input, _extends({
-        className: "multi-select-input",
-        $focused: focused,
-        edittext: editText
-      }, innerProps, {
-        isDisabled: readOnly || disabled
-      }));
-    };
-    InputWrapper.displayName = 'InputWrapper';
-    return InputWrapper;
-  }, [focused]);
   const innerComponents = {
     DropdownIndicator: null,
-    Control: Control$1,
     MultiValue: MultiValue$1,
     MultiValueRemove: innerProps => {
       return readOnly || disabled ? false : MultiValueRemove(innerProps);
     },
-    ValueContainer: ValueContainer$1,
-    Input: Input$1,
     Menu,
     Option: innerProps => {
       return innerProps.isSelected ? SelectedOption(innerProps) : Option(innerProps);
@@ -178,13 +135,13 @@ const MultiSelect = React.forwardRef(function MultiSelect(_ref, forwardedRef) {
   };
   if (hidden) return null;
   return React.createElement(MultiSelectWrapper, {
-    error: error,
-    warning: warning
+    $error: error,
+    $warning: warning
   }, loadOptions ? creatable ? React.createElement(AsyncCreatableMultiSelect, _extends({}, sharedSelectProps, props)) : React.createElement(AsyncMultiSelect, _extends({}, sharedSelectProps, props)) : creatable ? React.createElement(CreatableMultiSelect, _extends({}, sharedSelectProps, props)) : React.createElement(MultiSelect$2, _extends({}, sharedSelectProps, props)), displayShowMore && !(error || warning) && React.createElement(ShowMoreWrapper, {
     onClick: handleShowMoreClick
   }, React.createElement(ShowMoreOverlay, null), React.createElement(ShowMoreText, null, showMoreText, " ", displayTotalOnShowMore && '(' + selected.length + ')')), (typeof error === 'string' || typeof warning === 'string') && React.createElement(ErrorMessage, {
-    error: error,
-    warning: warning
+    $error: error,
+    $warning: warning
   }, error ? error : warning));
 });
 MultiSelect.propTypes = process.env.NODE_ENV !== "production" ? {