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

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

@@ -16,6 +16,8 @@ let _ = t => t,
   _t7,
   _t8,
   _t9,
+  _t0,
+  _t1,
   _t10,
   _t11,
   _t12,
@@ -43,9 +45,7 @@ let _ = t => t,
   _t34,
   _t35,
   _t36,
-  _t37,
-  _t38,
-  _t39;
+  _t37;
 const fadeIn = keyframes(_t || (_t = _`
   from {
     background-color: ${0};
@@ -88,7 +88,12 @@ const sharedStyle = css(_t5 || (_t5 = _`
   box-shadow: 'none';
   flex-basis: ${0};
 `), props => props.theme.primaryFontFamily, props => props.$hasLabel ? '66.66%' : '100%');
-const CompactAutocompleteSelect = styled.div.attrs(applyDefaultTheme)(_t6 || (_t6 = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const CompactAutocompleteSelect = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t6 || (_t6 = _`
   display: flex;
   align-items: center;
   height: 24px;
@@ -98,7 +103,9 @@ const CompactAutocompleteSelect = styled.div.attrs(applyDefaultTheme)(_t6 || (_t
       opacity: 0.5;
       cursor: not-allowed;
     `)));
-const Label = styled.label.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
+const Label = styled.label.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t8 || (_t8 = _`
   ${0};
   flex-basis: 33.33%;
   font-size: 0.875rem;
@@ -112,12 +119,16 @@ const Label = styled.label.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
 `), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')), props => props.disabled && css(_t9 || (_t9 = _`
       cursor: not-allowed;
     `)));
-const InputContainer = styled.div.attrs(applyDefaultTheme)(_t10 || (_t10 = _`
+const InputContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t0 || (_t0 = _`
   display: flex;
   width: 100%;
   height: 19px;
 `));
-const SuccessContainer = styled.div.attrs(applyDefaultTheme)(_t11 || (_t11 = _`
+const SuccessContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t1 || (_t1 = _`
   opacity: 1;
   pointer-events: none;
   display: flex;
@@ -130,50 +141,50 @@ const SuccessContainer = styled.div.attrs(applyDefaultTheme)(_t11 || (_t11 = _`
     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 AsyncCreatableAutocompleteSelect = styled(AsyncCreatableSelectPaginate).attrs(applyDefaultTheme)(_t12 || (_t12 = _`
+const AsyncCreatableAutocompleteSelect = styled(AsyncCreatableSelectPaginate).attrs(applyDefaultTheme)(_t10 || (_t10 = _`
   ${0}
   ${0}
     &&:hover:not(:focus) {
     ${0}
   }
-`), sharedStyle, props => props.disabled && css(_t13 || (_t13 = _`
+`), sharedStyle, props => props.disabled && css(_t11 || (_t11 = _`
       opacity: 0.5;
       cursor: not-allowed;
-    `)), props => props.disabled && css(_t14 || (_t14 = _`
+    `)), props => props.disabled && css(_t12 || (_t12 = _`
         background: none !important;
         cursor: not-allowed;
       `)));
-const AsyncAutocompleteSelect = styled(AsyncPaginate).attrs(applyDefaultTheme)(_t15 || (_t15 = _`
+const AsyncAutocompleteSelect = styled(AsyncPaginate).attrs(applyDefaultTheme)(_t13 || (_t13 = _`
   ${0}
   ${0}
     &&:hover:not(:focus) {
     ${0}
   }
-`), sharedStyle, props => props.disabled && css(_t16 || (_t16 = _`
+`), sharedStyle, props => props.disabled && css(_t14 || (_t14 = _`
       opacity: 0.5;
-    `)), props => props.disabled && css(_t17 || (_t17 = _`
+    `)), props => props.disabled && css(_t15 || (_t15 = _`
         background: none !important;
         cursor: not-allowed;
       `)));
-const AutocompletSelect = styled(Select).attrs(applyDefaultTheme)(_t18 || (_t18 = _`
+const AutocompletSelect = styled(Select).attrs(applyDefaultTheme)(_t16 || (_t16 = _`
   ${0}
   ${0}
     &&:hover:not(:focus) {
     ${0}
   }
-`), sharedStyle, props => props.disabled && css(_t19 || (_t19 = _`
+`), sharedStyle, props => props.disabled && css(_t17 || (_t17 = _`
       opacity: 0.5;
-    `)), props => props.disabled && css(_t20 || (_t20 = _`
+    `)), props => props.disabled && css(_t18 || (_t18 = _`
         background: none !important;
         cursor: not-allowed;
       `)));
-const AutocompletCreatableSelect = styled(CreatableSelect$1).attrs(applyDefaultTheme)(_t21 || (_t21 = _`
+const AutocompletCreatableSelect = styled(CreatableSelect$1).attrs(applyDefaultTheme)(_t19 || (_t19 = _`
   ${0}
   ${0}
-`), sharedStyle, props => props.disabled && css(_t22 || (_t22 = _`
+`), sharedStyle, props => props.disabled && css(_t20 || (_t20 = _`
       opacity: 0.5;
     `)));
-const Control = styled(components.Control).attrs(applyDefaultTheme)(_t23 || (_t23 = _`
+const Control = styled(components.Control).attrs(applyDefaultTheme)(_t21 || (_t21 = _`
   && {
     ${0};
     ${0};
@@ -219,10 +230,10 @@ const Control = styled(components.Control).attrs(applyDefaultTheme)(_t23 || (_t2
 
     ${0};
   }
-`), 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.type && css(_t24 || (_t24 = _`
+`), 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.type && css(_t22 || (_t22 = _`
         animation: ${0} 0.5s ease-in-out;
       `), props => props.type === 'success' ? fadeIn : fadeOut), props => props.type === 'warning' && !props.isFocused && props.theme.themeProp('background-color', '#634e01', '#FFFDE8'), props => props.type === 'instructions-warning' && !props.isFocused && props.theme.themeProp('background-color', '#634e01', '#FFF36C'), props => props.type === 'instructions-warning' && props.isFocused && props.theme.themeProp('background-color', '#634e01', '#FFF36C'), props => props.type === 'error' && !props.isFocused && props.theme.themeProp('background-color', '#7f1b1b', '#FBEAE6'), props => props.isFocused && !props.type === 'instructions-warning' && props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-600')), props => props.type === 'warning' && props.isFocused && props.theme.themeProp('border-color', '#F4E21E', '#F4E21E'), props => props.type === 'error' && props.isFocused && props.theme.themeProp('border-color', props.theme.getColor('red-500'), props.theme.getColor('red-500')), props => !props.isFocused && props.theme.themeProp('background-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')), props => props.type === 'warning' && !props.isFocused && props.theme.themeProp('background', '#806403', '#FFFEBF'), props => props.type === 'instructions-warning' && !props.isFocused && props.theme.themeProp('background', '#806403', '#F4E21E'), props => props.type === 'error' && !props.isFocused && props.theme.themeProp('background', '#901d1d', '#f7d5d0'));
-const Option = styled(components.Option).attrs(applyDefaultTheme)(_t25 || (_t25 = _`
+const Option = styled(components.Option).attrs(applyDefaultTheme)(_t23 || (_t23 = _`
   && {
     min-height: 22px;
     height: 22px;
@@ -245,29 +256,29 @@ const Option = styled(components.Option).attrs(applyDefaultTheme)(_t25 || (_t25
     text-decoration: none;
     color: inherit;
   }
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')), props => props.isFocused && css(_t26 || (_t26 = _`
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')), props => props.isFocused && css(_t24 || (_t24 = _`
         ${0}
-      `), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))), props => props.isSelected && css(_t27 || (_t27 = _`
+      `), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))), props => props.isSelected && css(_t25 || (_t25 = _`
         ${0}
 
         ${0}
-      `), props.theme.themeProp('background-color', 'transparent', 'transparent'), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'))), props => props.isFocused && props.isSelected && css(_t28 || (_t28 = _`
+      `), props.theme.themeProp('background-color', 'transparent', 'transparent'), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'))), props => props.isFocused && props.isSelected && css(_t26 || (_t26 = _`
         ${0}
       `), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))));
-const Placeholder = styled(components.Placeholder).attrs(applyDefaultTheme)(_t29 || (_t29 = _`
+const Placeholder = styled(components.Placeholder).attrs(applyDefaultTheme)(_t27 || (_t27 = _`
   && {
     ${0}
     ${0};
   }
-`), props => (props.type === 'error' || props.type === 'warning') && css(_t30 || (_t30 = _`
+`), props => (props.type === 'error' || props.type === 'warning') && css(_t28 || (_t28 = _`
         ${0}
       `), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'))), props => (props.type === 'error' || props.type === 'warning') && props.theme.themeProp('opacity', '0.6', '0.6'));
-const SingleValue = styled(components.SingleValue).attrs(applyDefaultTheme)(_t31 || (_t31 = _`
+const SingleValue = styled(components.SingleValue).attrs(applyDefaultTheme)(_t29 || (_t29 = _`
   && {
     ${0};
   }
 `), props => props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')));
-const Input = styled(components.Input).attrs(applyDefaultTheme)(_t32 || (_t32 = _`
+const Input = styled(components.Input).attrs(applyDefaultTheme)(_t30 || (_t30 = _`
   && {
     margin: 0;
     padding: 0;
@@ -275,17 +286,17 @@ const Input = styled(components.Input).attrs(applyDefaultTheme)(_t32 || (_t32 =
     ${0}
   }
 `), props => props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')));
-const Menu = styled(components.Menu).attrs(applyDefaultTheme)(_t33 || (_t33 = _`
+const Menu = styled(components.Menu).attrs(applyDefaultTheme)(_t31 || (_t31 = _`
   && {
     ${0};
   }
 `), props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white')));
-const ValueContainer = styled(components.ValueContainer).attrs(applyDefaultTheme)(_t34 || (_t34 = _`
+const ValueContainer = styled(components.ValueContainer).attrs(applyDefaultTheme)(_t32 || (_t32 = _`
   && {
     padding: 0;
   }
 `));
-const ClearIndicator = styled(components.ClearIndicator).attrs(applyDefaultTheme)(_t35 || (_t35 = _`
+const ClearIndicator = styled(components.ClearIndicator).attrs(applyDefaultTheme)(_t33 || (_t33 = _`
   && {
     display: ${0};
     padding: 0;
@@ -293,7 +304,7 @@ const ClearIndicator = styled(components.ClearIndicator).attrs(applyDefaultTheme
     ${0};
   }
 `), props => props.isFocused ? 'flex' : 'none', props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')));
-const DropdownIndicator = styled(components.DropdownIndicator).attrs(applyDefaultTheme)(_t36 || (_t36 = _`
+const DropdownIndicator = styled(components.DropdownIndicator).attrs(applyDefaultTheme)(_t34 || (_t34 = _`
   && {
     display: ${0};
     padding: 0;
@@ -304,16 +315,16 @@ const DropdownIndicator = styled(components.DropdownIndicator).attrs(applyDefaul
     ${0};
   }
 `), props => props.isFocused ? 'flex' : 'none', props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')));
-const DropdownIndicatorIcon = styled(SvgExpandMore).attrs(applyDefaultTheme)(_t37 || (_t37 = _`
+const DropdownIndicatorIcon = styled(SvgExpandMore).attrs(applyDefaultTheme)(_t35 || (_t35 = _`
   width: 12px;
 `));
-const ClearIndicatorIcon = styled(SvgClose).attrs(applyDefaultTheme)(_t38 || (_t38 = _`
+const ClearIndicatorIcon = styled(SvgClose).attrs(applyDefaultTheme)(_t36 || (_t36 = _`
   width: 8px;
   margin-right: 4px;
   ${0};
   stroke-width: 2px;
 `), props => props.theme.themeProp('stroke', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')));
-const IndicatorSeparator = styled(components.IndicatorSeparator).attrs(applyDefaultTheme)(_t39 || (_t39 = _`
+const IndicatorSeparator = styled(components.IndicatorSeparator).attrs(applyDefaultTheme)(_t37 || (_t37 = _`
   && {
     display: ${0};
     margin: 4px;

package/esm/components/inputs/CompactStarRating/CompactStarRating.js

@@ -77,7 +77,7 @@ const CompactStarRating = React.forwardRef(function CompactStarRating(_ref, forw
           setTempRating(0);
           setHover(false);
         },
-        hover: hover && key + 1 <= tempRating,
+        $hover: hover && key + 1 <= tempRating,
         type: "button",
         key: key
       }, iconFill);
@@ -97,7 +97,7 @@ const CompactStarRating = React.forwardRef(function CompactStarRating(_ref, forw
           setTempRating(0);
           setHover(false);
         },
-        hover: hover && key + 1 <= tempRating,
+        $hover: hover && key + 1 <= tempRating,
         type: "button",
         key: key
       }, icon);
@@ -113,7 +113,7 @@ const CompactStarRating = React.forwardRef(function CompactStarRating(_ref, forw
     }, props), React.createElement(labelWidth, {
       disabled: disabled
     }, label, React.createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), React.createElement(starsWidth, {
-      edit: edit,
+      $edit: edit,
       type: type,
       readOnly: readOnly
     }, stars.map(key => {
@@ -166,7 +166,6 @@ CompactStarRating.defaultProps = {
   hidden: false,
   type: '',
   descriptionToolTip: '',
-  displayDescriptionToolTip: false,
   onChange: () => {}
 };
 var CompactStarRating$1 = CompactStarRating;

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

@@ -11,6 +11,8 @@ let _ = t => t,
   _t7,
   _t8,
   _t9,
+  _t0,
+  _t1,
   _t10,
   _t11,
   _t12,
@@ -21,10 +23,7 @@ let _ = t => t,
   _t17,
   _t18,
   _t19,
-  _t20,
-  _t21,
-  _t22,
-  _t23;
+  _t20;
 const fadeIn = keyframes(_t || (_t = _`
   from {
     background-color: ${0};
@@ -57,7 +56,12 @@ const fadeOutCheck = keyframes(_t4 || (_t4 = _`
     opacity: 0
   }
 `));
-const CompactStarRating = styled.div.attrs(applyDefaultTheme)(_t5 || (_t5 = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const CompactStarRating = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t5 || (_t5 = _`
   font-family: ${0};
   font-size: 1rem;
   font-weight: 500;
@@ -82,7 +86,9 @@ const CompactStarRating = styled.div.attrs(applyDefaultTheme)(_t5 || (_t5 = _`
       opacity: 0.5;
       cursor: not-allowed;
     `)));
-const labelWidth = styled.div.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
+const labelWidth = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t8 || (_t8 = _`
   width: 33.33%;
   display: flex;
   align-items: center;
@@ -98,7 +104,9 @@ const labelWidth = styled.div.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
 `), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')), props => props.disabled && css(_t9 || (_t9 = _`
       cursor: not-allowed;
     `)));
-const SuccessContainer = styled.div.attrs(applyDefaultTheme)(_t10 || (_t10 = _`
+const SuccessContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t0 || (_t0 = _`
   opacity: 1;
   pointer-events: none;
   display: flex;
@@ -111,7 +119,9 @@ const SuccessContainer = styled.div.attrs(applyDefaultTheme)(_t10 || (_t10 = _`
     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 starsWidth = styled.div.attrs(applyDefaultTheme)(_t11 || (_t11 = _`
+const starsWidth = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t1 || (_t1 = _`
   display: flex;
   width: 66.66%;
   border-radius: 3px;
@@ -143,23 +153,20 @@ const starsWidth = styled.div.attrs(applyDefaultTheme)(_t11 || (_t11 = _`
 
     ${0};
   }
-
-  ${0}
-`), props => props.readOnly && css(_t12 || (_t12 = _`
+`), props => props.readOnly && css(_t10 || (_t10 = _`
       border: none;
-    `)), props => props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white')), props => props.type === 'success' && css(_t13 || (_t13 = _`
+    `)), props => props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white')), props => props.type === 'success' && css(_t11 || (_t11 = _`
       animation: ${0} 0.5s ease-in-out;
-    `), props => props.success ? fadeIn : fadeOut), props => props.type === 'error' && css(_t14 || (_t14 = _`
+    `), props => props.success ? fadeIn : fadeOut), props => props.type === 'error' && css(_t12 || (_t12 = _`
       ${0};
       ${0}
-    `), props.theme.themeProp('background', '#7F1B1B', '#FBEAE6'), props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6')), props => props.type === 'warning' && css(_t15 || (_t15 = _`
+    `), props.theme.themeProp('background', '#7F1B1B', '#FBEAE6'), props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6')), props => props.type === 'warning' && css(_t13 || (_t13 = _`
       ${0};
       ${0}
-    `), props.theme.themeProp('background', '#634E01', '#FFFDE8'), props.theme.themeProp('border-color', '#2F2402 ', '#FFFDE8')), 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.edit && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')), props => props.edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')), props => props.type === 'warning' && !props.readOnly && props.theme.themeProp('background', '#806403', '#FFFEBF'), props => props.type === 'error' && !props.readOnly && props.theme.themeProp('background', '#901d1d', '#f7d5d0'), props => props.readOnly && css(_t16 || (_t16 = _`
-      cursor: default;
-      ${0}
-    `), props => props.theme.themeProp('border-color', 'rgba(0, 0, 0, 0)', props.theme.getColor('white'))));
-const Star = styled.button.attrs(applyDefaultTheme)(_t17 || (_t17 = _`
+    `), props.theme.themeProp('background', '#634E01', '#FFFDE8'), props.theme.themeProp('border-color', '#2F2402 ', '#FFFDE8')), 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.$edit && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')), props => props.$edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')), props => props.type === 'warning' && !props.readOnly && props.theme.themeProp('background', '#806403', '#FFFEBF'), props => props.type === 'error' && !props.readOnly && props.theme.themeProp('background', '#901d1d', '#f7d5d0'));
+const Star = styled.button.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t14 || (_t14 = _`
   display: flex;
   align-items: center;
   background: none;
@@ -184,9 +191,9 @@ const Star = styled.button.attrs(applyDefaultTheme)(_t17 || (_t17 = _`
   ${0}
 
   ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')), props => props.type === 'warning' && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')), props => props.type === 'warning' && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')), props => props.hover && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500')), props => props.readOnly && css(_t18 || (_t18 = _`
+`), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')), props => props.type === 'warning' && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')), props => props.type === 'warning' && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')), props => props.$hover && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500')), props => props.readOnly && css(_t15 || (_t15 = _`
       pointer-events: none;
-    `)), props => props.disabled && css(_t19 || (_t19 = _`
+    `)), props => props.disabled && css(_t16 || (_t16 = _`
       button {
         cursor: not-allowed;
       }
@@ -194,7 +201,9 @@ const Star = styled.button.attrs(applyDefaultTheme)(_t17 || (_t17 = _`
         cursor: not-allowed;
       }
     `)));
-const StarFill = styled.button.attrs(applyDefaultTheme)(_t20 || (_t20 = _`
+const StarFill = styled.button.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t17 || (_t17 = _`
   display: flex;
   align-items: center;
   background: none;
@@ -219,9 +228,9 @@ const StarFill = styled.button.attrs(applyDefaultTheme)(_t20 || (_t20 = _`
   ${0}
 
   ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')), props => props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')), props => props.type === 'warning' && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')), props => props.hover && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500')), props => props.readOnly && css(_t21 || (_t21 = _`
+`), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')), props => props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')), props => props.type === 'warning' && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')), props => props.$hover && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500')), props => props.readOnly && css(_t18 || (_t18 = _`
       pointer-events: none;
-    `)), props => props.disabled && css(_t22 || (_t22 = _`
+    `)), props => props.disabled && css(_t19 || (_t19 = _`
       button {
         cursor: not-allowed;
       }
@@ -229,7 +238,9 @@ const StarFill = styled.button.attrs(applyDefaultTheme)(_t20 || (_t20 = _`
         cursor: not-allowed;
       }
     `)));
-styled.div.attrs(applyDefaultTheme)(_t23 || (_t23 = _`
+styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t20 || (_t20 = _`
   opacity: 1;
   pointer-events: none;
   margin-left: auto;

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

@@ -76,17 +76,17 @@ const CompactTextInput = React.forwardRef(function CompactTextInput(_ref, forwar
       id: uniqueId,
       key: uniqueId,
       autoFocus: autoFocus,
-      inputType: inputType,
+      inputtype: inputType,
       name: name,
       readOnly: readOnly,
       disabled: disabled,
-      edit: edit,
+      $edit: edit,
       placeholder: placeholder,
       defaultValue: defaultValue,
       value: value,
       type: type,
-      bold: bold,
-      hasLink: !isEmpty(link),
+      $bold: bold,
+      $haslink: !isEmpty(link),
       onFocus: onFocus,
       onChange: onChange,
       onBlur: onBlur
@@ -98,7 +98,7 @@ const CompactTextInput = React.forwardRef(function CompactTextInput(_ref, forwar
     disabled: disabled
   }, label, React.createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), React.createElement(InputContainer, {
     $hasLabel: !isEmpty(label)
-  }, !memoizedDescriptionToolTip && !link && input(), memoizedDescriptionToolTip && !link && React.createElement("div", null, React.createElement(Tooltip, {
+  }, !memoizedDescriptionToolTip && !link && React.createElement("div", null, input()), memoizedDescriptionToolTip && !link && React.createElement("div", null, React.createElement(Tooltip, {
     content: memoizedDescriptionToolTip,
     key: "tooltip1",
     placement: "bottom-end",