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

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

@@ -25,6 +25,8 @@ let _ = t => t,
   _t7,
   _t8,
   _t9,
+  _t0,
+  _t1,
   _t10,
   _t11,
   _t12,
@@ -52,9 +54,7 @@ let _ = t => t,
   _t34,
   _t35,
   _t36,
-  _t37,
-  _t38,
-  _t39;
+  _t37;
 const fadeIn = styled.keyframes(_t || (_t = _`
   from {
     background-color: ${0};
@@ -97,7 +97,12 @@ const sharedStyle = styled.css(_t5 || (_t5 = _`
   box-shadow: 'none';
   flex-basis: ${0};
 `), props => props.theme.primaryFontFamily, props => props.$hasLabel ? '66.66%' : '100%');
-const CompactAutocompleteSelect = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t6 || (_t6 = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const CompactAutocompleteSelect = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t6 || (_t6 = _`
   display: flex;
   align-items: center;
   height: 24px;
@@ -107,7 +112,9 @@ const CompactAutocompleteSelect = styled__default["default"].div.attrs(defaultTh
       opacity: 0.5;
       cursor: not-allowed;
     `)));
-const Label = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
+const Label = styled__default["default"].label.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
   ${0};
   flex-basis: 33.33%;
   font-size: 0.875rem;
@@ -121,12 +128,16 @@ const Label = styled__default["default"].label.attrs(defaultTheme.applyDefaultTh
 `), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')), props => props.disabled && styled.css(_t9 || (_t9 = _`
       cursor: not-allowed;
     `)));
-const InputContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t10 || (_t10 = _`
+const InputContainer = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t0 || (_t0 = _`
   display: flex;
   width: 100%;
   height: 19px;
 `));
-const SuccessContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t11 || (_t11 = _`
+const SuccessContainer = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t1 || (_t1 = _`
   opacity: 1;
   pointer-events: none;
   display: flex;
@@ -139,50 +150,50 @@ const SuccessContainer = styled__default["default"].div.attrs(defaultTheme.apply
     width: 13px;
   }
 `), props => props.fadeIn ? 0 : 1, props => props.fadeIn ? fadeOutCheck : fadeInCheck, props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500')));
-const AsyncCreatableAutocompleteSelect = styled__default["default"](AsyncCreatableSelectPaginate).attrs(defaultTheme.applyDefaultTheme)(_t12 || (_t12 = _`
+const AsyncCreatableAutocompleteSelect = styled__default["default"](AsyncCreatableSelectPaginate).attrs(defaultTheme.applyDefaultTheme)(_t10 || (_t10 = _`
   ${0}
   ${0}
     &&:hover:not(:focus) {
     ${0}
   }
-`), sharedStyle, props => props.disabled && styled.css(_t13 || (_t13 = _`
+`), sharedStyle, props => props.disabled && styled.css(_t11 || (_t11 = _`
       opacity: 0.5;
       cursor: not-allowed;
-    `)), props => props.disabled && styled.css(_t14 || (_t14 = _`
+    `)), props => props.disabled && styled.css(_t12 || (_t12 = _`
         background: none !important;
         cursor: not-allowed;
       `)));
-const AsyncAutocompleteSelect = styled__default["default"](reactSelectAsyncPaginate.AsyncPaginate).attrs(defaultTheme.applyDefaultTheme)(_t15 || (_t15 = _`
+const AsyncAutocompleteSelect = styled__default["default"](reactSelectAsyncPaginate.AsyncPaginate).attrs(defaultTheme.applyDefaultTheme)(_t13 || (_t13 = _`
   ${0}
   ${0}
     &&:hover:not(:focus) {
     ${0}
   }
-`), sharedStyle, props => props.disabled && styled.css(_t16 || (_t16 = _`
+`), sharedStyle, props => props.disabled && styled.css(_t14 || (_t14 = _`
       opacity: 0.5;
-    `)), props => props.disabled && styled.css(_t17 || (_t17 = _`
+    `)), props => props.disabled && styled.css(_t15 || (_t15 = _`
         background: none !important;
         cursor: not-allowed;
       `)));
-const AutocompletSelect = styled__default["default"](Select__default["default"]).attrs(defaultTheme.applyDefaultTheme)(_t18 || (_t18 = _`
+const AutocompletSelect = styled__default["default"](Select__default["default"]).attrs(defaultTheme.applyDefaultTheme)(_t16 || (_t16 = _`
   ${0}
   ${0}
     &&:hover:not(:focus) {
     ${0}
   }
-`), sharedStyle, props => props.disabled && styled.css(_t19 || (_t19 = _`
+`), sharedStyle, props => props.disabled && styled.css(_t17 || (_t17 = _`
       opacity: 0.5;
-    `)), props => props.disabled && styled.css(_t20 || (_t20 = _`
+    `)), props => props.disabled && styled.css(_t18 || (_t18 = _`
         background: none !important;
         cursor: not-allowed;
       `)));
-const AutocompletCreatableSelect = styled__default["default"](reactSelectCreatable_esm["default"]).attrs(defaultTheme.applyDefaultTheme)(_t21 || (_t21 = _`
+const AutocompletCreatableSelect = styled__default["default"](reactSelectCreatable_esm["default"]).attrs(defaultTheme.applyDefaultTheme)(_t19 || (_t19 = _`
   ${0}
   ${0}
-`), sharedStyle, props => props.disabled && styled.css(_t22 || (_t22 = _`
+`), sharedStyle, props => props.disabled && styled.css(_t20 || (_t20 = _`
       opacity: 0.5;
     `)));
-const Control = styled__default["default"](Select.components.Control).attrs(defaultTheme.applyDefaultTheme)(_t23 || (_t23 = _`
+const Control = styled__default["default"](Select.components.Control).attrs(defaultTheme.applyDefaultTheme)(_t21 || (_t21 = _`
   && {
     ${0};
     ${0};
@@ -228,10 +239,10 @@ const Control = styled__default["default"](Select.components.Control).attrs(defa
 
     ${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 && styled.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 && styled.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__default["default"](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_t25 || (_t25 = _`
+const Option = styled__default["default"](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_t23 || (_t23 = _`
   && {
     min-height: 22px;
     height: 22px;
@@ -254,29 +265,29 @@ const Option = styled__default["default"](Select.components.Option).attrs(defaul
     text-decoration: none;
     color: inherit;
   }
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')), props => props.isFocused && styled.css(_t26 || (_t26 = _`
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')), props => props.isFocused && styled.css(_t24 || (_t24 = _`
         ${0}
-      `), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))), props => props.isSelected && styled.css(_t27 || (_t27 = _`
+      `), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))), props => props.isSelected && styled.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 && styled.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 && styled.css(_t26 || (_t26 = _`
         ${0}
       `), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))));
-const Placeholder = styled__default["default"](Select.components.Placeholder).attrs(defaultTheme.applyDefaultTheme)(_t29 || (_t29 = _`
+const Placeholder = styled__default["default"](Select.components.Placeholder).attrs(defaultTheme.applyDefaultTheme)(_t27 || (_t27 = _`
   && {
     ${0}
     ${0};
   }
-`), props => (props.type === 'error' || props.type === 'warning') && styled.css(_t30 || (_t30 = _`
+`), props => (props.type === 'error' || props.type === 'warning') && styled.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__default["default"](Select.components.SingleValue).attrs(defaultTheme.applyDefaultTheme)(_t31 || (_t31 = _`
+const SingleValue = styled__default["default"](Select.components.SingleValue).attrs(defaultTheme.applyDefaultTheme)(_t29 || (_t29 = _`
   && {
     ${0};
   }
 `), props => props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')));
-const Input = styled__default["default"](Select.components.Input).attrs(defaultTheme.applyDefaultTheme)(_t32 || (_t32 = _`
+const Input = styled__default["default"](Select.components.Input).attrs(defaultTheme.applyDefaultTheme)(_t30 || (_t30 = _`
   && {
     margin: 0;
     padding: 0;
@@ -284,17 +295,17 @@ const Input = styled__default["default"](Select.components.Input).attrs(defaultT
     ${0}
   }
 `), props => props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')));
-const Menu = styled__default["default"](Select.components.Menu).attrs(defaultTheme.applyDefaultTheme)(_t33 || (_t33 = _`
+const Menu = styled__default["default"](Select.components.Menu).attrs(defaultTheme.applyDefaultTheme)(_t31 || (_t31 = _`
   && {
     ${0};
   }
 `), props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white')));
-const ValueContainer = styled__default["default"](Select.components.ValueContainer).attrs(defaultTheme.applyDefaultTheme)(_t34 || (_t34 = _`
+const ValueContainer = styled__default["default"](Select.components.ValueContainer).attrs(defaultTheme.applyDefaultTheme)(_t32 || (_t32 = _`
   && {
     padding: 0;
   }
 `));
-const ClearIndicator = styled__default["default"](Select.components.ClearIndicator).attrs(defaultTheme.applyDefaultTheme)(_t35 || (_t35 = _`
+const ClearIndicator = styled__default["default"](Select.components.ClearIndicator).attrs(defaultTheme.applyDefaultTheme)(_t33 || (_t33 = _`
   && {
     display: ${0};
     padding: 0;
@@ -302,7 +313,7 @@ const ClearIndicator = styled__default["default"](Select.components.ClearIndicat
     ${0};
   }
 `), props => props.isFocused ? 'flex' : 'none', props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')));
-const DropdownIndicator = styled__default["default"](Select.components.DropdownIndicator).attrs(defaultTheme.applyDefaultTheme)(_t36 || (_t36 = _`
+const DropdownIndicator = styled__default["default"](Select.components.DropdownIndicator).attrs(defaultTheme.applyDefaultTheme)(_t34 || (_t34 = _`
   && {
     display: ${0};
     padding: 0;
@@ -313,16 +324,16 @@ const DropdownIndicator = styled__default["default"](Select.components.DropdownI
     ${0};
   }
 `), props => props.isFocused ? 'flex' : 'none', props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')));
-const DropdownIndicatorIcon = styled__default["default"](expandMore.ReactComponent).attrs(defaultTheme.applyDefaultTheme)(_t37 || (_t37 = _`
+const DropdownIndicatorIcon = styled__default["default"](expandMore.ReactComponent).attrs(defaultTheme.applyDefaultTheme)(_t35 || (_t35 = _`
   width: 12px;
 `));
-const ClearIndicatorIcon = styled__default["default"](close.ReactComponent).attrs(defaultTheme.applyDefaultTheme)(_t38 || (_t38 = _`
+const ClearIndicatorIcon = styled__default["default"](close.ReactComponent).attrs(defaultTheme.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__default["default"](Select.components.IndicatorSeparator).attrs(defaultTheme.applyDefaultTheme)(_t39 || (_t39 = _`
+const IndicatorSeparator = styled__default["default"](Select.components.IndicatorSeparator).attrs(defaultTheme.applyDefaultTheme)(_t37 || (_t37 = _`
   && {
     display: ${0};
     margin: 4px;

package/cjs/components/inputs/CompactStarRating/CompactStarRating.js

@@ -81,7 +81,7 @@ const CompactStarRating = index["default"].forwardRef(function CompactStarRating
           setTempRating(0);
           setHover(false);
         },
-        hover: hover && key + 1 <= tempRating,
+        $hover: hover && key + 1 <= tempRating,
         type: "button",
         key: key
       }, iconFill);
@@ -101,7 +101,7 @@ const CompactStarRating = index["default"].forwardRef(function CompactStarRating
           setTempRating(0);
           setHover(false);
         },
-        hover: hover && key + 1 <= tempRating,
+        $hover: hover && key + 1 <= tempRating,
         type: "button",
         key: key
       }, icon);
@@ -117,7 +117,7 @@ const CompactStarRating = index["default"].forwardRef(function CompactStarRating
     }, props), index["default"].createElement(CompactStarRating_styled.labelWidth, {
       disabled: disabled
     }, label, index["default"].createElement(CompactStarRating_styled.SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), index["default"].createElement(CompactStarRating_styled.starsWidth, {
-      edit: edit,
+      $edit: edit,
       type: type,
       readOnly: readOnly
     }, stars.map(key => {
@@ -170,7 +170,6 @@ CompactStarRating.defaultProps = {
   hidden: false,
   type: '',
   descriptionToolTip: '',
-  displayDescriptionToolTip: false,
   onChange: () => {}
 };
 var CompactStarRating$1 = CompactStarRating;

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

@@ -19,6 +19,8 @@ let _ = t => t,
   _t7,
   _t8,
   _t9,
+  _t0,
+  _t1,
   _t10,
   _t11,
   _t12,
@@ -29,10 +31,7 @@ let _ = t => t,
   _t17,
   _t18,
   _t19,
-  _t20,
-  _t21,
-  _t22,
-  _t23;
+  _t20;
 const fadeIn = styled.keyframes(_t || (_t = _`
   from {
     background-color: ${0};
@@ -65,7 +64,12 @@ const fadeOutCheck = styled.keyframes(_t4 || (_t4 = _`
     opacity: 0
   }
 `));
-const CompactStarRating = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t5 || (_t5 = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const CompactStarRating = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t5 || (_t5 = _`
   font-family: ${0};
   font-size: 1rem;
   font-weight: 500;
@@ -90,7 +94,9 @@ const CompactStarRating = styled__default["default"].div.attrs(defaultTheme.appl
       opacity: 0.5;
       cursor: not-allowed;
     `)));
-const labelWidth = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
+const labelWidth = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
   width: 33.33%;
   display: flex;
   align-items: center;
@@ -106,7 +112,9 @@ const labelWidth = styled__default["default"].div.attrs(defaultTheme.applyDefaul
 `), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')), props => props.disabled && styled.css(_t9 || (_t9 = _`
       cursor: not-allowed;
     `)));
-const SuccessContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t10 || (_t10 = _`
+const SuccessContainer = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t0 || (_t0 = _`
   opacity: 1;
   pointer-events: none;
   display: flex;
@@ -119,7 +127,9 @@ const SuccessContainer = styled__default["default"].div.attrs(defaultTheme.apply
     width: 13px;
   }
 `), props => props.fadeIn ? 0 : 1, props => props.fadeIn ? fadeOutCheck : fadeInCheck, props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500')));
-const starsWidth = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t11 || (_t11 = _`
+const starsWidth = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t1 || (_t1 = _`
   display: flex;
   width: 66.66%;
   border-radius: 3px;
@@ -151,23 +161,20 @@ const starsWidth = styled__default["default"].div.attrs(defaultTheme.applyDefaul
 
     ${0};
   }
-
-  ${0}
-`), props => props.readOnly && styled.css(_t12 || (_t12 = _`
+`), props => props.readOnly && styled.css(_t10 || (_t10 = _`
       border: none;
-    `)), props => props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white')), props => props.type === 'success' && styled.css(_t13 || (_t13 = _`
+    `)), props => props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white')), props => props.type === 'success' && styled.css(_t11 || (_t11 = _`
       animation: ${0} 0.5s ease-in-out;
-    `), props => props.success ? fadeIn : fadeOut), props => props.type === 'error' && styled.css(_t14 || (_t14 = _`
+    `), props => props.success ? fadeIn : fadeOut), props => props.type === 'error' && styled.css(_t12 || (_t12 = _`
       ${0};
       ${0}
-    `), props.theme.themeProp('background', '#7F1B1B', '#FBEAE6'), props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6')), props => props.type === 'warning' && styled.css(_t15 || (_t15 = _`
+    `), props.theme.themeProp('background', '#7F1B1B', '#FBEAE6'), props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6')), props => props.type === 'warning' && styled.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 && styled.css(_t16 || (_t16 = _`
-      cursor: default;
-      ${0}
-    `), props => props.theme.themeProp('border-color', 'rgba(0, 0, 0, 0)', props.theme.getColor('white'))));
-const Star = styled__default["default"].button.attrs(defaultTheme.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__default["default"].button.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t14 || (_t14 = _`
   display: flex;
   align-items: center;
   background: none;
@@ -192,9 +199,9 @@ const Star = styled__default["default"].button.attrs(defaultTheme.applyDefaultTh
   ${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 && styled.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 && styled.css(_t15 || (_t15 = _`
       pointer-events: none;
-    `)), props => props.disabled && styled.css(_t19 || (_t19 = _`
+    `)), props => props.disabled && styled.css(_t16 || (_t16 = _`
       button {
         cursor: not-allowed;
       }
@@ -202,7 +209,9 @@ const Star = styled__default["default"].button.attrs(defaultTheme.applyDefaultTh
         cursor: not-allowed;
       }
     `)));
-const StarFill = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)(_t20 || (_t20 = _`
+const StarFill = styled__default["default"].button.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t17 || (_t17 = _`
   display: flex;
   align-items: center;
   background: none;
@@ -227,9 +236,9 @@ const StarFill = styled__default["default"].button.attrs(defaultTheme.applyDefau
   ${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 && styled.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 && styled.css(_t18 || (_t18 = _`
       pointer-events: none;
-    `)), props => props.disabled && styled.css(_t22 || (_t22 = _`
+    `)), props => props.disabled && styled.css(_t19 || (_t19 = _`
       button {
         cursor: not-allowed;
       }
@@ -237,7 +246,9 @@ const StarFill = styled__default["default"].button.attrs(defaultTheme.applyDefau
         cursor: not-allowed;
       }
     `)));
-styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t23 || (_t23 = _`
+styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t20 || (_t20 = _`
   opacity: 1;
   pointer-events: none;
   margin-left: auto;

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

@@ -80,17 +80,17 @@ const CompactTextInput = index["default"].forwardRef(function CompactTextInput(_
       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: !lodash.isEmpty(link$1),
+      $bold: bold,
+      $haslink: !lodash.isEmpty(link$1),
       onFocus: onFocus,
       onChange: onChange,
       onBlur: onBlur
@@ -102,7 +102,7 @@ const CompactTextInput = index["default"].forwardRef(function CompactTextInput(_
     disabled: disabled
   }, label, index["default"].createElement(CompactTextInput_styled.SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), index["default"].createElement(CompactTextInput_styled.InputContainer, {
     $hasLabel: !lodash.isEmpty(label)
-  }, !memoizedDescriptionToolTip && !link$1 && input(), memoizedDescriptionToolTip && !link$1 && index["default"].createElement("div", null, index["default"].createElement(Tooltip["default"], {
+  }, !memoizedDescriptionToolTip && !link$1 && index["default"].createElement("div", null, input()), memoizedDescriptionToolTip && !link$1 && index["default"].createElement("div", null, index["default"].createElement(Tooltip["default"], {
     content: memoizedDescriptionToolTip,
     key: "tooltip1",
     placement: "bottom-end",