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

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

@@ -15,6 +15,8 @@ let _ = t => t,
   _t7,
   _t8,
   _t9,
+  _t0,
+  _t1,
   _t10,
   _t11,
   _t12,
@@ -30,9 +32,7 @@ let _ = t => t,
   _t22,
   _t23,
   _t24,
-  _t25,
-  _t26,
-  _t27;
+  _t25;
 const AsyncCreatableSelectPaginate = withAsyncPaginate(CreatableSelect$1);
 const showMoreHeight = 114;
 const sharedStyle = css(_t || (_t = _`
@@ -41,7 +41,7 @@ const sharedStyle = css(_t || (_t = _`
   font-weight: 400;
   position: relative;
 `), props => props.theme.primaryFontFamily);
-const Label = styled.label.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
+styled.label.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
   ${0};
   flex-basis: 33.33%;
   font-size: 0.875rem;
@@ -66,7 +66,7 @@ const AsyncMultiSelect = styled(AsyncPaginate).attrs(applyDefaultTheme)(_t6 || (
 const MultiSelectWrapper = styled.div.attrs(applyDefaultTheme)(_t7 || (_t7 = _`
   position: relative;
 `));
-const Control = styled(components.Control).attrs(applyDefaultTheme)(_t8 || (_t8 = _`
+styled(components.Control).attrs(applyDefaultTheme)(_t8 || (_t8 = _`
   && {
     align-items: flex-start;
     background: transparent;
@@ -78,7 +78,7 @@ const Control = styled(components.Control).attrs(applyDefaultTheme)(_t8 || (_t8
     cursor: ${0};
   }
 `), props => !props.isDisabled && props.focused || props.readOnly ? 'default' : 'pointer');
-const ValueContainer = styled(components.ValueContainer)(_t9 || (_t9 = _`
+styled(components.ValueContainer)(_t9 || (_t9 = _`
   && {
     align-items: flex-start;
     gap: 8px;
@@ -89,21 +89,21 @@ const ValueContainer = styled(components.ValueContainer)(_t9 || (_t9 = _`
     ${0}
   }
 `), props => {
-  return props.showMore ? props.error || props.warning ? '100%' : showMoreHeight + 16 + 'px' : '100%';
-}, props => (props.error || props.warning) && css(_t10 || (_t10 = _`
+  return props.showMore ? props.$error || props.$warning ? '100%' : showMoreHeight + 16 + 'px' : '100%';
+}, props => (props.$error || props.$warning) && css(_t0 || (_t0 = _`
         border: 1px solid;
         border-radius: 3px;
         padding: 4px;
 
         border-color: ${0};
-      `), props => props.error ? props.theme.getColor('red-500') : props.warning ? props.theme.getColor('orange-500') : 'inherit'));
-const MultiValueWrapper = styled.div.attrs(applyDefaultTheme)(_t11 || (_t11 = _`
+      `), props => props.$error ? props.theme.getColor('red-500') : props.warning ? props.theme.getColor('orange-500') : 'inherit'));
+const MultiValueWrapper = styled.div.attrs(applyDefaultTheme)(_t1 || (_t1 = _`
   && {
     border-radius: 3px;
     margin: 0;
   }
 `));
-const MultiValue = styled(components.MultiValue).attrs(applyDefaultTheme)(_t12 || (_t12 = _`
+const MultiValue = styled(components.MultiValue).attrs(applyDefaultTheme)(_t10 || (_t10 = _`
   && {
     border-radius: 3px;
     margin: 0;
@@ -146,8 +146,8 @@ const MultiValue = styled(components.MultiValue).attrs(applyDefaultTheme)(_t12 |
     }
   }
 `), props => props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-800')), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-100')), props => props.isDisabled || props.readOnly ? '0 8px' : '0 3px 0 8px', props => props.theme.getColor('red-500'));
-const MultiValueRemove = styled(components.MultiValueRemove).attrs(applyDefaultTheme)(_t13 || (_t13 = _``));
-const Input = styled(components.Input).attrs(applyDefaultTheme)(_t14 || (_t14 = _`
+const MultiValueRemove = styled(components.MultiValueRemove).attrs(applyDefaultTheme)(_t11 || (_t11 = _``));
+styled(components.Input).attrs(applyDefaultTheme)(_t12 || (_t12 = _`
   align-self: center;
   font-size: ${0};
   min-width: 150px;
@@ -156,7 +156,7 @@ const Input = styled(components.Input).attrs(applyDefaultTheme)(_t14 || (_t14 =
 
   ${0}
   }
-`), props => props.$focused ? '14px' : '12px', props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')), props => !props.$focused && css(_t15 || (_t15 = _`
+`), props => props.$focused ? '14px' : '12px', props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')), props => !props.$focused && css(_t13 || (_t13 = _`
       ${0}
 
       :before {
@@ -166,14 +166,14 @@ const Input = styled(components.Input).attrs(applyDefaultTheme)(_t14 || (_t14 =
         content: '${0}';
       }
     `), props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')), props => props.edittext));
-const DropdownMenu = styled(components.Menu).attrs(applyDefaultTheme)(_t16 || (_t16 = _`
+const DropdownMenu = styled(components.Menu).attrs(applyDefaultTheme)(_t14 || (_t14 = _`
   font-size: 14px;
 
   ${0}
 
   ${0}
 `), props => props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('white')), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')));
-const sharedOptionStyle = css(_t17 || (_t17 = _`
+const sharedOptionStyle = css(_t15 || (_t15 = _`
   ${0}
 
   ${0}
@@ -183,31 +183,31 @@ const sharedOptionStyle = css(_t17 || (_t17 = _`
   :hover {
     cursor: pointer;
   }
-`), props => props.isFocused && css(_t18 || (_t18 = _`
+`), props => props.isFocused && css(_t16 || (_t16 = _`
       ${0}
-    `), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))), props => props.isSelected && css(_t19 || (_t19 = _`
+    `), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))), props => props.isSelected && css(_t17 || (_t17 = _`
       ${0}
 
       ${0}
-    `), props.theme.themeProp('background-color', 'transparent', 'transparent'), props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))), props => props.isFocused && props.isSelected && css(_t20 || (_t20 = _`
+    `), props.theme.themeProp('background-color', 'transparent', 'transparent'), props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))), props => props.isFocused && props.isSelected && css(_t18 || (_t18 = _`
       ${0}
     `), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))));
-const Option = styled(components.Option).attrs(applyDefaultTheme)(_t21 || (_t21 = _`
+const Option = styled(components.Option).attrs(applyDefaultTheme)(_t19 || (_t19 = _`
   ${0}
 `), sharedOptionStyle);
-const SelectedOption = styled(components.Option).attrs(applyDefaultTheme)(_t22 || (_t22 = _`
+const SelectedOption = styled(components.Option).attrs(applyDefaultTheme)(_t20 || (_t20 = _`
   ${0}
 
   display: flex !important;
   justify-content: space-between;
 `), sharedOptionStyle);
-const DropdownOptionDeleteIcon = styled(SvgClose).attrs(applyDefaultTheme)(_t23 || (_t23 = _`
+const DropdownOptionDeleteIcon = styled(SvgClose).attrs(applyDefaultTheme)(_t21 || (_t21 = _`
   stroke-width: 1px;
   width: 8px;
 
   ${0}
 `), props => props.theme.themeProp('stroke', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')));
-const ShowMoreWrapper = styled.div.attrs(applyDefaultTheme)(_t24 || (_t24 = _`
+const ShowMoreWrapper = styled.div.attrs(applyDefaultTheme)(_t22 || (_t22 = _`
   align-items: end;
   display: flex;
   flex-direction: column;
@@ -225,7 +225,7 @@ const ShowMoreWrapper = styled.div.attrs(applyDefaultTheme)(_t24 || (_t24 = _`
     text-decoration: underline;
   }
 `), showMoreHeight + 16, props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('emerald-500')));
-const ShowMoreOverlay = styled.div.attrs(applyDefaultTheme)(_t25 || (_t25 = _`
+const ShowMoreOverlay = styled.div.attrs(applyDefaultTheme)(_t23 || (_t23 = _`
   align-items: end;
   display: block;
   height: 100%;
@@ -236,16 +236,16 @@ const ShowMoreOverlay = styled.div.attrs(applyDefaultTheme)(_t25 || (_t25 = _`
 
   ${0}
 `), showMoreHeight, props => props.theme.themeProp('background', 'transparent linear-gradient(180deg, #12121200 0%, #12121230 40%, #12121279 70%, #121212 95%, #121212 100%) 0% 0% no-repeat padding-box', 'transparent linear-gradient(180deg, #fefefe00 0%, #fefefe30 40%, #fefefe79 70%, #fefefe 95%, #fefefe 100%) 0% 0% no-repeat padding-box'));
-const ShowMoreText = styled.div.attrs(applyDefaultTheme)(_t26 || (_t26 = _`
+const ShowMoreText = styled.div.attrs(applyDefaultTheme)(_t24 || (_t24 = _`
   font-size: 0.875rem;
   width: 100%;
   ${0}
 `), props => props.theme.themeProp('background-color', '#121212', '#fefefe'));
-const ErrorMessage = styled.div.attrs(applyDefaultTheme)(_t27 || (_t27 = _`
+const ErrorMessage = styled.div.attrs(applyDefaultTheme)(_t25 || (_t25 = _`
   color: ${0};
   font-size: 0.75rem;
   margin-top: 8px;
   padding: 0 12px;
-`), props => props.error ? props.theme.getColor('red-500') : props.warning ? props.theme.getColor('orange-500') : 'inherit');
+`), props => props.$error ? props.theme.getColor('red-500') : props.$warning ? props.theme.getColor('orange-500') : 'inherit');
 
-export { AsyncCreatableMultiSelect, AsyncMultiSelect, Control, CreatableMultiSelect, DropdownMenu, DropdownOptionDeleteIcon, ErrorMessage, Input, Label, MultiSelect, MultiSelectWrapper, MultiValue, MultiValueRemove, MultiValueWrapper, Option, SelectedOption, ShowMoreOverlay, ShowMoreText, ShowMoreWrapper, ValueContainer };
+export { AsyncCreatableMultiSelect, AsyncMultiSelect, CreatableMultiSelect, DropdownMenu, DropdownOptionDeleteIcon, ErrorMessage, MultiSelect, MultiSelectWrapper, MultiValue, MultiValueRemove, MultiValueWrapper, Option, SelectedOption, ShowMoreOverlay, ShowMoreText, ShowMoreWrapper };

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

@@ -8,14 +8,21 @@ let _ = t => t,
   _t3,
   _t4;
 const radioSize = '18px';
-const RadioLabel = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const RadioLabel = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t || (_t = _`
   padding-left: ${0};
   font-weight: 400;
   font-size: 0.875rem;
 
   ${0};
 `), math(`${radioSize} + 10px`), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600')));
-const Radio = styled.label.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
+const Radio = styled.label.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t2 || (_t2 = _`
   display: block;
   position: relative;
   cursor: pointer;

package/esm/components/inputs/Switch/Switch.js

@@ -38,7 +38,7 @@ const Switch = React.forwardRef(function Switch({
     onBlur: onBlur,
     onChange: onChange
   }), React.createElement(SwitchIndicator, null, React.createElement(SwitchIndicatorButton, null)), typeof label === 'string' && label.length > 0 && React.createElement(SwitchIndicatorLabelText, null, label)), typeof description === 'string' && description.length > 0 && React.createElement(Description, {
-    spaciousDescription: spaciousDescription
+    $spaciousdescription: spaciousDescription
   }, description));
 });
 Switch.propTypes = process.env.NODE_ENV !== "production" ? {

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

@@ -12,7 +12,12 @@ let _ = t => t,
   _t7,
   _t8;
 const switchButtonSize = '16px';
-const Switch = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const Switch = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t || (_t = _`
   * {
     box-sizing: border-box;
   }
@@ -37,7 +42,9 @@ const Switch = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
         user-select: text;
       }
     `)));
-const SwitchIndicator = styled.div.attrs(applyDefaultTheme)(_t4 || (_t4 = _`
+const SwitchIndicator = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t4 || (_t4 = _`
   display: inline-block;
   position: relative;
   ${0}
@@ -48,7 +55,9 @@ const SwitchIndicator = styled.div.attrs(applyDefaultTheme)(_t4 || (_t4 = _`
   ${0}
   transition: background 200ms;
 `), props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('gray-200')), math(`${switchButtonSize} + 2px`), props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-300')));
-const SwitchIndicatorButton = styled.div.attrs(applyDefaultTheme)(_t5 || (_t5 = _`
+const SwitchIndicatorButton = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t5 || (_t5 = _`
   position: absolute;
   ${0}
   height: ${0};
@@ -57,7 +66,9 @@ const SwitchIndicatorButton = styled.div.attrs(applyDefaultTheme)(_t5 || (_t5 =
   box-shadow: ${0} 0 0px 2px 0px;
   transition: left 200ms;
 `), props => props.theme.themeProp('background', props.theme.getColor('gray-200'), props.theme.getColor('white')), switchButtonSize, switchButtonSize, props => props.theme.getColor('gray-500'));
-const SwitchIndicatorLabelText = styled.div.attrs(applyDefaultTheme)(_t6 || (_t6 = _`
+const SwitchIndicatorLabelText = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t6 || (_t6 = _`
   padding-left: 10px;
   font-weight: 400;
   font-size: 0.875rem;
@@ -65,7 +76,9 @@ const SwitchIndicatorLabelText = styled.div.attrs(applyDefaultTheme)(_t6 || (_t6
 
   ${0};
 `), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600')));
-const SwitchLabel = styled.label.attrs(applyDefaultTheme)(_t7 || (_t7 = _`
+const SwitchLabel = styled.label.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t7 || (_t7 = _`
   display: inline-flex;
   margin-right: auto;
   cursor: pointer;
@@ -99,12 +112,14 @@ const SwitchLabel = styled.label.attrs(applyDefaultTheme)(_t7 || (_t7 = _`
     }
   }
 `), SwitchIndicatorButton, SwitchIndicatorButton, switchButtonSize, SwitchIndicator, props => props.theme.getColor('emerald-500'), props => props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-300'), 1), SwitchIndicatorButton, props => props.theme.themeProp('outline', `8px solid ${rgba(props.theme.getColor('emerald-500'), 0.5)}`, `8px solid ${rgba(props.theme.getColor('emerald-500'), 0.3)}`, 1));
-const Description = styled.div.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
+const Description = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t8 || (_t8 = _`
   margin: ${0} 0 0 0;
   font-size: 0.75rem;
   line-height: 1.333;
 
   ${0};
-`), props => props.spaciousDescription ? '16px' : '6px', props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')));
+`), props => props.$spaciousdescription ? '16px' : '6px', props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')));
 
 export { Description, Switch, SwitchIndicator, SwitchIndicatorButton, SwitchIndicatorLabelText, SwitchLabel };

package/esm/components/inputs/TextArea/TextArea.js

@@ -1,7 +1,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React from '../../../node_modules/react/index.js';
 import { isEmpty } from 'lodash';
-import useMergedRefs from '../../../node_modules/@restart/hooks/esm/useMergedRefs.js';
+import useMergedRefs from '../../../node_modules/@restart/hooks/lib/useMergedRefs.js';
 import { nanoid } from 'nanoid';
 import PropTypes from '../../../node_modules/prop-types/index.js';
 import { ReactComponent as SvgEditNote } from '../../../icons/edit-note.svg.js';
@@ -9,7 +9,7 @@ import { TextAreaContainter, Label, SuccessContainerLabel, TextInput, TextInputF
 import Tooltip from '../../data/Tooltip/Tooltip.js';
 import { r as react } from '../../../_virtual/index.js';
 
-const _excluded = ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "autoComplete", "description", "type", "icon", "rows", "className", "style", "onChange", "onBlur", "noBorder", "instructionsTextArea", "loadingIcon", "successIcon", "padding", "descriptionToolTip", "borderRadius", "fieldLabel"];
+const _excluded = ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "autoComplete", "description", "type", "icon", "rows", "className", "style", "onChange", "onBlur", "noBorder", "loadingIcon", "successIcon", "padding", "descriptionToolTip", "borderRadius", "fieldLabel"];
 const TextArea = React.forwardRef(function TextArea(_ref, forwardedRef) {
   let {
       value,
@@ -32,7 +32,6 @@ const TextArea = React.forwardRef(function TextArea(_ref, forwardedRef) {
       onChange,
       onBlur,
       noBorder,
-      instructionsTextArea,
       loadingIcon,
       successIcon,
       padding,
@@ -72,7 +71,7 @@ const TextArea = React.forwardRef(function TextArea(_ref, forwardedRef) {
       type: type
     }, icon), React.createElement(TextInputField, _extends({
       autoFocus: autoFocus,
-      borderRadius: borderRadius,
+      $borderRadius: borderRadius,
       ref: textInputRef,
       rows: rows,
       value: value,
@@ -82,15 +81,13 @@ const TextArea = React.forwardRef(function TextArea(_ref, forwardedRef) {
       required: required,
       readOnly: readOnly,
       disabled: disabled,
-      edit: edit,
-      instructionsTextArea: instructionsTextArea,
+      $edit: edit,
       type: type,
       autoComplete: autoComplete,
-      hasIcon: Boolean(icon),
-      icon: icon,
+      $hasIcon: Boolean(icon),
       id: `text-input-${uniqueId}`,
       key: uniqueId,
-      padding: padding,
+      $padding: padding,
       onChange: e => {
         if (e.target.value) {
           setInputIsEmpty(false);
@@ -107,17 +104,16 @@ const TextArea = React.forwardRef(function TextArea(_ref, forwardedRef) {
       },
       onKeyDown: onKeyDown,
       onBlur: onBlur,
-      noBorder: noBorder
+      $noBorder: noBorder
     }, rest)), !fieldLabel && (type === 'loading' || type === 'success') && React.createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon), !readOnly && noBorder && React.createElement(InputIconContainer, {
       disabled: disabled
     }, React.createElement(SvgEditNote, {
       className: padding === 'small' ? 'smallPadingIcon' : undefined
     })), label && React.createElement(TextInputLabel, {
       htmlFor: `text-input-${uniqueId}`,
-      hasPlaceholder: Boolean(placeholder),
-      hasIcon: Boolean(icon),
-      inputIsEmpty: inputIsEmpty,
-      type: type
+      $hasPlaceholder: Boolean(placeholder),
+      $hasIcon: Boolean(icon),
+      $inputIsEmpty: inputIsEmpty
     }, label, required && ' *'), typeof description === 'string' && description.length > 0 && React.createElement(Description, {
       type: type
     }, description)));
@@ -139,9 +135,7 @@ TextArea.defaultProps = {
   hidden: false,
   type: '',
   padding: 'medium',
-  instructionsTextArea: false,
   descriptionToolTip: '',
-  isExpanded: () => {},
   onChange: () => {},
   borderRadius: 0
 };
@@ -159,8 +153,6 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
   edit: PropTypes.bool,
   autoComplete: PropTypes.string,
   description: PropTypes.string,
-  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   icon: PropTypes.element,
   rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   className: PropTypes.string,
@@ -169,9 +161,7 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
   onChange: PropTypes.func,
   onBlur: PropTypes.func,
   noBorder: PropTypes.bool,
-  isExpanded: PropTypes.func,
   type: PropTypes.oneOf(['', 'error', 'error-border', 'warning-border', 'warning', 'loading', 'success']),
-  instructionsTextArea: PropTypes.bool,
   loadingIcon: PropTypes.element,
   successIcon: PropTypes.element,
   descriptionToolTip: PropTypes.string,