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

package/esm/components/inputs/Button/Button.js

@@ -7,7 +7,7 @@ import { r as react } from '../../../_virtual/index.js';
 import Popover from '../../data/Popover/Popover.js';
 import ContextMenu from '../../widgets/ContextMenu/ContextMenu.js';
 
-const _excluded = ["onClickEffect", "singleAction", "activeDropdown", "dropdownItems", "secondary", "outlined", "block", "icon", "size", "disabled", "loading", "className", "children", "singleActionGap", "width"];
+const _excluded = ["onClickEffect", "singleAction", "activeDropdown", "dropdownItems", "secondary", "outlined", "block", "icon", "size", "disabled", "loading", "className", "children", "singleActionGap", "width", "border"];
 const Button = React.forwardRef(function Button(_ref, forwardedRef) {
   let {
       onClickEffect,
@@ -16,7 +16,7 @@ const Button = React.forwardRef(function Button(_ref, forwardedRef) {
       dropdownItems,
       secondary,
       outlined,
-      block,
+      block = false,
       icon,
       size = 'normal',
       disabled,
@@ -24,7 +24,8 @@ const Button = React.forwardRef(function Button(_ref, forwardedRef) {
       className,
       children,
       singleActionGap = 34,
-      width
+      width,
+      border = 2
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const [loadingState, setLoadingState] = react.exports.useState(loading || false);
@@ -66,27 +67,30 @@ const Button = React.forwardRef(function Button(_ref, forwardedRef) {
     setDropdownIsActive(false);
   };
   return React.createElement(ButtonWrapper, null, !singleAction ? React.createElement(MainButtonWrapper, {
-    activeDropdown: activeDropdown,
-    dropdownItems: dropdownItems,
-    outlined: outlined,
-    secondary: secondary
+    $activeDropdown: activeDropdown,
+    $dropdownItems: dropdownItems,
+    $outlined: outlined,
+    $secondary: secondary,
+    $block: block
   }, React.createElement(MainButtonContainer, {
-    dropdownItems: dropdownItems,
-    secondary: secondary,
-    outlined: outlined
+    $dropdownItems: dropdownItems,
+    $secondary: secondary,
+    $outlined: outlined,
+    $block: block
   }, React.createElement(Button$2, _extends({
     ref: forwardedRef,
     onClick: onClickEffect,
-    singleAction: singleAction,
-    dropdownItems: dropdownItems,
-    secondary: secondary,
-    outlined: outlined,
-    block: block,
+    $border: border,
+    $singleaction: singleAction,
+    $dropdownItems: dropdownItems,
+    $secondary: secondary,
+    $outlined: outlined,
+    $block: block,
     size: size,
     disabled: disabled,
     className: className,
     "aria-busy": disabled,
-    width: width
+    $width: width
   }, props), React.createElement(ButtonContent, {
     $loading: loadingState,
     size: size
@@ -108,9 +112,9 @@ const Button = React.forwardRef(function Button(_ref, forwardedRef) {
       strokeDashoffset: `${loadingStep}px`
     }
   }))))), (activeDropdown || dropdownItems) && React.createElement(DropdownButtonContainer, {
-    dropdownItems: dropdownItems,
-    secondary: secondary,
-    outlined: outlined
+    $dropdownItems: dropdownItems,
+    $secondary: secondary,
+    $outlined: outlined
   }, React.createElement(Popover, {
     content: React.createElement(ContextMenu, null, dropdownItems),
     placement: 'bottom-end',
@@ -119,24 +123,25 @@ const Button = React.forwardRef(function Button(_ref, forwardedRef) {
     onHide: handleDropdownClose
   }, React.createElement(Button$2, {
     ref: forwardedRef,
-    singleAction: singleAction,
-    singleActionGap: singleActionGap,
-    dropdownItems: dropdownItems,
-    secondary: secondary,
-    outlined: outlined,
-    block: block,
+    $singleaction: singleAction,
+    $singleactiongap: singleActionGap,
+    $dropdownItems: dropdownItems,
+    $secondary: secondary,
+    $outlined: outlined,
+    $border: border,
+    $block: block,
     size: size,
     disabled: disabled,
     onClick: handleDropdownButtonClick,
     className: dropdownIsActive ? 'dropdown-is-active' : '',
-    width: width
+    $width: width
   }, React.createElement(SvgExpandMore, null))))) : React.createElement(React.Fragment, null, React.createElement(MainButtonContainerSingle, {
-    dropdownItems: dropdownItems,
-    secondary: secondary,
-    outlined: outlined,
+    $dropdownItems: dropdownItems,
+    $secondary: secondary,
+    $outlined: outlined,
     className: className
   }, React.createElement(DropdownButtonContainer, {
-    singleAction: singleAction
+    $singleaction: singleAction
   }, React.createElement(Popover, {
     content: React.createElement(ContextMenu, null, dropdownItems),
     placement: 'bottom-end',
@@ -145,21 +150,22 @@ const Button = React.forwardRef(function Button(_ref, forwardedRef) {
     onHide: handleDropdownClose
   }, React.createElement(Button$2, {
     ref: forwardedRef,
-    singleAction: singleAction,
-    singleActionGap: singleActionGap,
-    dropdownItems: dropdownItems,
-    secondary: secondary,
-    outlined: outlined,
-    block: block,
+    $singleaction: singleAction,
+    $singleactiongap: singleActionGap,
+    $dropdownItems: dropdownItems,
+    $secondary: secondary,
+    $outlined: outlined,
+    $border: border,
+    $block: block,
     size: size,
     disabled: disabled,
     onClick: handleDropdownButtonClick,
     className: dropdownIsActive ? 'dropdown-is-active' : '',
-    width: width
+    $width: width
   }, React.createElement(ButtonContent, {
     $loading: loadingState,
     size: size,
-    singleAction: singleAction
+    $singleaction: singleAction
   }, icon, children), React.createElement(SvgExpandMore, null)))))));
 });
 Button.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -169,6 +175,7 @@ Button.propTypes = process.env.NODE_ENV !== "production" ? {
   dropdownItems: PropTypes.node,
   secondary: PropTypes.bool,
   outlined: PropTypes.bool,
+  border: PropTypes.number,
   block: PropTypes.bool,
   icon: PropTypes.element,
   size: PropTypes.oneOf(['x-small', 'small', 'normal', 'large']),

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

@@ -11,6 +11,8 @@ let _ = t => t,
   _t7,
   _t8,
   _t9,
+  _t0,
+  _t1,
   _t10,
   _t11,
   _t12,
@@ -32,8 +34,14 @@ let _ = t => t,
   _t28,
   _t29,
   _t30,
-  _t31;
-const Button = styled.button.attrs(applyDefaultTheme)(_t || (_t = _`
+  _t31,
+  _t32;
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const Button = styled.button.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t || (_t = _`
   position: relative;
   border-radius: 3px;
   font-family: inherit;
@@ -42,8 +50,10 @@ const Button = styled.button.attrs(applyDefaultTheme)(_t || (_t = _`
   padding: 12px 16px;
   cursor: pointer;
   background: ${0};
-  border: 2px solid ${0};
-  transition: all 250ms, opacity 200ms;
+  border: ${0}px solid ${0};
+  transition:
+    all 250ms,
+    opacity 200ms;
 
   &:hover,
   &.dropdown-is-active {
@@ -82,7 +92,7 @@ const Button = styled.button.attrs(applyDefaultTheme)(_t || (_t = _`
   ${0};
 
   ${0};
-`), props => props.theme.getColor('emerald-500'), props => props.theme.getColor('emerald-500'), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('white')), props => props.secondary && css(_t2 || (_t2 = _`
+`), props => props.theme.getColor('emerald-500'), props => props.$border, props => props.theme.getColor('emerald-500'), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('white')), props => props.$secondary && css(_t2 || (_t2 = _`
         background: ${0};
         border-color: ${0};
 
@@ -93,7 +103,7 @@ const Button = styled.button.attrs(applyDefaultTheme)(_t || (_t = _`
           background: ${0};
           border-color: ${0};
         }
-      `), props => props.theme.getColor('gray-200'), props => props.theme.getColor('gray-200'), props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('gray-700')), props => props.theme.getColor('gray-300'), props => props.theme.getColor('gray-300')), props => props.outlined && css(_t3 || (_t3 = _`
+      `), props => props.theme.getColor('gray-200'), props => props.theme.getColor('gray-200'), props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('gray-700')), props => props.theme.getColor('gray-300'), props => props.theme.getColor('gray-300')), props => props.$outlined && css(_t3 || (_t3 = _`
         background: transparent;
         transition: none;
 
@@ -109,7 +119,7 @@ const Button = styled.button.attrs(applyDefaultTheme)(_t || (_t = _`
 
           ${0}
         }
-      `), props.theme.themeProp('border-color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-500')), props.theme.themeProp('color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-500')), props.theme.themeProp('border-color', props.theme.getColor('emerald-600'), props.theme.getColor('emerald-600')), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-200'))), props => props.outlined && props.secondary && css(_t4 || (_t4 = _`
+      `), props.theme.themeProp('border-color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-500')), props.theme.themeProp('color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-500')), props.theme.themeProp('border-color', props.theme.getColor('emerald-600'), props.theme.getColor('emerald-600')), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-200'))), props => props.$outlined && props.$secondary && css(_t4 || (_t4 = _`
         ${0}
 
         ${0}
@@ -122,12 +132,12 @@ const Button = styled.button.attrs(applyDefaultTheme)(_t || (_t = _`
 
           ${0}
         }
-      `), props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-700')), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')), props.theme.getColor('gray-300'), props.theme.themeProp('border-color', props.theme.getColor('gray-300'), props.theme.getColor('gray-300')), props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('gray-700'))), props => props.outlined && props.secondary && props.dropdownItems && css(_t5 || (_t5 = _`
+      `), props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-700')), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')), props.theme.getColor('gray-300'), props.theme.themeProp('border-color', props.theme.getColor('gray-300'), props.theme.getColor('gray-300')), props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('gray-700'))), props => props.$outlined && props.$secondary && props.$dropdownItems && css(_t5 || (_t5 = _`
         &:hover,
         &.dropdown-is-active {
           ${0}
         }
-      `), props.theme.themeProp('border-color', props.theme.getColor('gray-300'), props.theme.getColor('gray-300'))), props => props.block && css(_t6 || (_t6 = _`
+      `), props.theme.themeProp('border-color', props.theme.getColor('gray-300'), props.theme.getColor('gray-300'))), props => props.$block && css(_t6 || (_t6 = _`
       width: 100%;
     `)), props => props.disabled && css(_t7 || (_t7 = _`
       opacity: 0.5;
@@ -138,19 +148,23 @@ const Button = styled.button.attrs(applyDefaultTheme)(_t || (_t = _`
       height: 24px;
     `)), props => props.size === 'small' && css(_t9 || (_t9 = _`
       padding: 6px 16px;
-    `)), props => props.size === 'large' && css(_t10 || (_t10 = _`
+    `)), props => props.size === 'large' && css(_t0 || (_t0 = _`
       padding: 16px 16px;
-    `)), props => props.singleAction && css(_t11 || (_t11 = _`
+    `)), props => props.$singleaction && css(_t1 || (_t1 = _`
       display: flex;
       align-items: center;
       gap: ${0}px;
       border-radius: 3px !important;
-      transition: all 250ms, opacity 200ms;
-    `), props.singleActionGap), props => props.width && css(_t12 || (_t12 = _`
+      transition:
+        all 250ms,
+        opacity 200ms;
+    `), props.$singleactiongap), props => props.$width && css(_t10 || (_t10 = _`
       min-width: ${0}px;
       justify-content: center;
-    `), props.width));
-const ButtonContent = styled.div.attrs(applyDefaultTheme)(_t13 || (_t13 = _`
+    `), props.$width));
+const ButtonContent = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t11 || (_t11 = _`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -172,23 +186,25 @@ const ButtonContent = styled.div.attrs(applyDefaultTheme)(_t13 || (_t13 = _`
   ${0}
 
   ${0};
-`), props => props.size === 'small' && css(_t14 || (_t14 = _`
+`), props => props.size === 'small' && css(_t12 || (_t12 = _`
         max-width: 13px;
         max-height: 13px;
-      `)), props => props.size === 'x-small' && css(_t15 || (_t15 = _`
+      `)), props => props.size === 'x-small' && css(_t13 || (_t13 = _`
         max-width: 11px;
         max-height: 11px;
-      `)), props => props.$loading && css(_t16 || (_t16 = _`
+      `)), props => props.$loading && css(_t14 || (_t14 = _`
       transform: scale(0.95);
       opacity: 0;
-    `)), props => props.singleAction && css(_t17 || (_t17 = _`
+    `)), props => props.$singleaction && css(_t15 || (_t15 = _`
       svg {
         width: 100% !important;
         height: 100% !important;
         margin-right: 24px;
       }
     `)));
-const LoadingIndicator = styled.div.attrs(applyDefaultTheme)(_t18 || (_t18 = _`
+const LoadingIndicator = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t16 || (_t16 = _`
   position: absolute;
   height: 100%;
   width: 100%;
@@ -201,44 +217,70 @@ const LoadingIndicator = styled.div.attrs(applyDefaultTheme)(_t18 || (_t18 = _`
   box-sizing: border-box;
 
   ${0}
-`), props => props.$loading && css(_t19 || (_t19 = _`
+`), props => props.$loading && css(_t17 || (_t17 = _`
       opacity: 1;
     `)));
-const LoadingIndicatorSvg = styled.svg.attrs(applyDefaultTheme)(_t20 || (_t20 = _`
+const LoadingIndicatorSvg = styled.svg.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t18 || (_t18 = _`
   height: 100%;
   color: inherit;
   transform: rotate(-88deg);
 `));
-const LoadingIndicatorSvgCircle = styled.circle.attrs(applyDefaultTheme)(_t21 || (_t21 = _`
+const LoadingIndicatorSvgCircle = styled.circle.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t19 || (_t19 = _`
   transition: stroke-dashoffset 300ms linear;
   stroke-dasharray: 113;
 `));
-const ButtonWrapper = styled.span.attrs(applyDefaultTheme)(_t22 || (_t22 = _`
+const ButtonWrapper = styled.span.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t20 || (_t20 = _`
   white-space: nowrap;
   display: flex;
-`));
-const MainButtonWrapper = styled.div.attrs(applyDefaultTheme)(_t23 || (_t23 = _`
+  ${0}
+`), props => props.$block && css(_t21 || (_t21 = _`
+      width: 100%;
+    `)));
+const MainButtonWrapper = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t22 || (_t22 = _`
   border-radius: 3px;
+  ${0}
+
   ${0};
-`), props => {
-  return (props.activeDropdown || props.dropdownItems) && !props.outlined && css(_t24 || (_t24 = _`
+`), props => props.$block && css(_t23 || (_t23 = _`
+      width: 100%;
+      display: flex;
+    `)), props => {
+  return (props.$activeDropdown || props.$dropdownItems) && !props.$outlined && css(_t24 || (_t24 = _`
         background: ${0};
-      `), props.secondary ? props.theme.getColor('gray-200') : props.theme.getColor('emerald-500'));
+      `), props.$secondary ? props.theme.getColor('gray-200') : props.theme.getColor('emerald-500'));
 });
-const MainButtonContainer = styled.div.attrs(applyDefaultTheme)(_t25 || (_t25 = _`
+const MainButtonContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t25 || (_t25 = _`
   display: inline-block;
+
+  ${0}
+
   button {
     ${0};
 
     ${0};
   }
-`), props => (props.activeDropdown || props.dropdownItems) && css(_t26 || (_t26 = _`
+`), props => props.$block && css(_t26 || (_t26 = _`
+      flex: 1;
+      width: 100%;
+    `)), props => (props.$activeDropdown || props.$dropdownItems) && css(_t27 || (_t27 = _`
         border-bottom-right-radius: 0;
         border-top-right-radius: 0;
-      `)), props => (props.activeDropdown || props.dropdownItems) && props.outlined && css(_t27 || (_t27 = _`
+      `)), props => (props.$activeDropdown || props.$dropdownItems) && props.outlined && css(_t28 || (_t28 = _`
         border-right: none;
       `)));
-const MainButtonContainerSingle = styled.div.attrs(applyDefaultTheme)(_t28 || (_t28 = _`
+const MainButtonContainerSingle = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t29 || (_t29 = _`
   display: inline-block;
   width: 100%;
   ${0};
@@ -246,16 +288,20 @@ const MainButtonContainerSingle = styled.div.attrs(applyDefaultTheme)(_t28 || (_
   button {
     ${0};
   }
-`), props => props.singleAction && css(_t29 || (_t29 = _`
+`), props => props.$singleaction && css(_t30 || (_t30 = _`
       display: flex;
       align-items: center;
       border-radius: 3px !important;
-      transition: all 250ms, opacity 200ms;
-    `)), props => (props.activeDropdown || props.dropdownItems) && css(_t30 || (_t30 = _`
+      transition:
+        all 250ms,
+        opacity 200ms;
+    `)), props => (props.$activeDropdown || props.$dropdownItems) && css(_t31 || (_t31 = _`
         border-bottom-right-radius: 0;
         border-top-right-radius: 0;
       `)));
-const DropdownButtonContainer = styled.div.attrs(applyDefaultTheme)(_t31 || (_t31 = _`
+const DropdownButtonContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t32 || (_t32 = _`
   display: inline-block;
 
   button {
@@ -272,6 +318,6 @@ const DropdownButtonContainer = styled.div.attrs(applyDefaultTheme)(_t31 || (_t3
 
     ${0};
   }
-`), props => !props.singleAction && 'border-left: none', props => !props.singleAction && 'margin-bottom: 1px');
+`), props => !props.$singleaction && 'border-left: none', props => !props.$singleaction && 'margin-bottom: 1px');
 
 export { Button, ButtonContent, ButtonWrapper, DropdownButtonContainer, LoadingIndicator, LoadingIndicatorSvg, LoadingIndicatorSvgCircle, MainButtonContainer, MainButtonContainerSingle, MainButtonWrapper };

package/esm/components/inputs/Checkbox/Checkbox.js

@@ -68,7 +68,7 @@ const Checkbox = React.forwardRef(function Checkbox({
     d: "m3.68,8.45L0,4.75l1.21-1.21,2.47,2.45L9.7,0l1.21,1.23-7.22,7.22Z",
     fill: "currentColor"
   }))), (typeof label === 'string' && label.length > 0 || typeof label === 'object') && React.createElement(CheckboxVisualLabel, null, label)), typeof descriptionText === 'string' && descriptionText.length > 0 && React.createElement(Description, {
-    error: hasError
+    $error: hasError
   }, descriptionText));
 });
 Checkbox.propTypes = process.env.NODE_ENV !== "production" ? {

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

@@ -11,13 +11,20 @@ let _ = t => t,
   _t7,
   _t8,
   _t9,
-  _t10;
+  _t0;
 const checkboxSize = '18px';
-const Checkbox = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const Checkbox = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t || (_t = _`
   display: flex;
   flex-direction: column;
 `));
-const CheckIcon = styled.div.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
+const CheckIcon = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t2 || (_t2 = _`
   opacity: 0;
   transform: scale(0.1);
   transition: all 200ms;
@@ -32,7 +39,9 @@ const CheckIcon = styled.div.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
     display: block;
   }
 `), props => props.theme.getColor('gray-100'));
-const IndeterminateCheckIcon = styled.div.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
+const IndeterminateCheckIcon = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t3 || (_t3 = _`
   opacity: 0;
   transform: scale(0.1);
   transition: all 200ms;
@@ -43,7 +52,9 @@ const IndeterminateCheckIcon = styled.div.attrs(applyDefaultTheme)(_t3 || (_t3 =
   background: ${0};
   width: 10px;
 `), props => props.theme.getColor('gray-100'));
-const CheckboxLabel = styled.label.attrs(applyDefaultTheme)(_t4 || (_t4 = _`
+const CheckboxLabel = styled.label.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t4 || (_t4 = _`
   display: inline-flex;
   position: relative;
   cursor: pointer;
@@ -108,7 +119,9 @@ const CheckboxLabel = styled.label.attrs(applyDefaultTheme)(_t4 || (_t4 = _`
       opacity: 0.5;
       cursor: not-allowed;
     `)));
-const CheckboxVisualLabel = styled.div.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
+const CheckboxVisualLabel = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t8 || (_t8 = _`
   padding-left: 10px;
   font-weight: 400;
   font-size: 0.875rem;
@@ -116,7 +129,9 @@ const CheckboxVisualLabel = styled.div.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
 
   ${0};
 `), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600')));
-const Description = styled.p.attrs(applyDefaultTheme)(_t9 || (_t9 = _`
+const Description = styled.p.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t9 || (_t9 = _`
   margin: 0.375rem 0 0 0;
   font-size: 0.75rem;
   line-height: 1.333;
@@ -124,7 +139,7 @@ const Description = styled.p.attrs(applyDefaultTheme)(_t9 || (_t9 = _`
   ${0};
 
   ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')), props => props.error && css(_t10 || (_t10 = _`
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')), props => props.$error && css(_t0 || (_t0 = _`
       content: 'error';
       ${0}
     `), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))));

package/esm/components/inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.js

@@ -3,7 +3,7 @@ import { isEmpty } from 'lodash';
 import { nanoid } from 'nanoid';
 import PropTypes from '../../../node_modules/prop-types/index.js';
 import React from '../../../node_modules/react/index.js';
-import { ValueContainer, Input, Menu, CompactAutocompleteSelect as CompactAutocompleteSelect$1, InputContainer, Label, SuccessContainer, AsyncCreatableAutocompleteSelect, AsyncAutocompleteSelect, AutocompletCreatableSelect, AutocompletSelect, Option, Control, Placeholder, SingleValue, DropdownIndicator, DropdownIndicatorIcon, ClearIndicator, ClearIndicatorIcon, IndicatorSeparator } from './CompactAutocompleteSelect.styled.js';
+import { ValueContainer, Input, Menu, CompactAutocompleteSelect as CompactAutocompleteSelect$2, InputContainer, Label, SuccessContainer, AsyncCreatableAutocompleteSelect, AsyncAutocompleteSelect, AutocompletCreatableSelect, AutocompletSelect, Option, Control, Placeholder, SingleValue, DropdownIndicator, DropdownIndicatorIcon, ClearIndicator, ClearIndicatorIcon, IndicatorSeparator } from './CompactAutocompleteSelect.styled.js';
 import Tooltip from '../../data/Tooltip/Tooltip.js';
 import { r as react } from '../../../_virtual/index.js';
 
@@ -196,7 +196,7 @@ const CompactAutocompleteSelect = React.forwardRef(function CompactAutocompleteS
   };
   if (hidden) return null;
   const input = () => {
-    return React.createElement(CompactAutocompleteSelect$1, {
+    return React.createElement(CompactAutocompleteSelect$2, {
       disabled: disabled
     }, React.createElement(InputContainer, null, label && React.createElement(Label, {
       htmlFor: uniqueId,
@@ -259,6 +259,6 @@ CompactAutocompleteSelect.defaultProps = {
   type: '',
   descriptionToolTip: ''
 };
-var AutocompleteSelect = CompactAutocompleteSelect;
+var CompactAutocompleteSelect$1 = CompactAutocompleteSelect;
 
-export { AutocompleteSelect as default };
+export { CompactAutocompleteSelect$1 as default };