@ntbjs/react-components 2.0.0-rc.6 → 2.0.1-rc.31

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

@@ -1,132 +0,0 @@
-import styled, { css } from 'styled-components';
-import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
-
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4,
-  _t5,
-  _t6,
-  _t7,
-  _t8,
-  _t9,
-  _t10;
-const checkboxSize = '18px';
-const Checkbox = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
-  display: flex;
-  flex-direction: column;
-`));
-const CheckIcon = styled.div.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
-  opacity: 0;
-  transform: scale(0.1);
-  transition: all 200ms;
-  position: absolute;
-  width: 12px;
-  top: 4px;
-  left: 3px;
-  color: ${0};
-
-  svg {
-    width: 100%;
-    display: block;
-  }
-`), props => props.theme.getColor('gray-100'));
-const IndeterminateCheckIcon = styled.div.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
-  opacity: 0;
-  transform: scale(0.1);
-  transition: all 200ms;
-  position: absolute;
-  height: 2px;
-  top: 8px;
-  left: 4px;
-  background: ${0};
-  width: 10px;
-`), props => props.theme.getColor('gray-100'));
-const CheckboxLabel = styled.label.attrs(applyDefaultTheme)(_t4 || (_t4 = _`
-  display: inline-flex;
-  position: relative;
-  cursor: pointer;
-  user-select: none;
-  min-height: ${0};
-  text-align: left;
-  flex-wrap: wrap;
-  flex: 1;
-  line-height: ${0};
-  margin-right: auto;
-
-  & input[type='checkbox'] {
-    position: absolute;
-    opacity: 0;
-    pointer-events: none;
-    margin: 0;
-  }
-
-  &::before {
-    content: '';
-    border: 2px solid ${0};
-    border-radius: 2px;
-    transition: all 200ms;
-    width: ${0};
-    height: ${0};
-    box-sizing: border-box;
-    ${0}
-  }
-
-  &:has(input[type='checkbox']:checked) {
-    &::before {
-      background: ${0};
-      border-color: ${0};
-    }
-  }
-
-  &:has(input[type='checkbox']:not([data-indeterminate='true']):checked) {
-    ${0} {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  &:has(input[type='checkbox'][data-indeterminate='true']:checked) {
-    ${0} {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  ${0}
-
-  ${0}
-`), checkboxSize, checkboxSize, props => props.theme.getColor('gray-300'), checkboxSize, checkboxSize, props => props.muted && css(_t5 || (_t5 = _`
-        opacity: 0.75;
-      `)), props => props.theme.getColor('emerald-500'), props => props.theme.getColor('emerald-500'), CheckIcon, IndeterminateCheckIcon, props => props.readOnly && css(_t6 || (_t6 = _`
-      opacity: 0.5;
-      cursor: default;
-      pointer-events: none;
-      user-select: text;
-    `)), props => props.disabled && css(_t7 || (_t7 = _`
-      opacity: 0.5;
-      cursor: not-allowed;
-    `)));
-const CheckboxVisualLabel = styled.div.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
-  padding-left: 10px;
-  font-weight: 400;
-  font-size: 0.875rem;
-  flex: 1;
-
-  ${0};
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600')));
-const Description = styled.p.attrs(applyDefaultTheme)(_t9 || (_t9 = _`
-  margin: 0.375rem 0 0 0;
-  font-size: 0.75rem;
-  line-height: 1.333;
-
-  ${0};
-
-  ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')), props => props.error && css(_t10 || (_t10 = _`
-      content: 'error';
-      ${0}
-    `), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))));
-
-export { CheckIcon, Checkbox, CheckboxLabel, CheckboxVisualLabel, Description, IndeterminateCheckIcon };

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

@@ -1 +0,0 @@
-export { default } from '../../Checkbox.js';

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

@@ -1,324 +0,0 @@
-import styled, { keyframes, css } from 'styled-components';
-import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
-import Select, { components } from 'react-select';
-import { withAsyncPaginate, AsyncPaginate } from 'react-select-async-paginate';
-import CreatableSelect$1 from '../../../node_modules/react-select/creatable/dist/react-select-creatable.esm.js';
-import { ReactComponent as SvgClose } from '../../../icons/close.svg.js';
-import { ReactComponent as SvgExpandMore } from '../../../icons/expand-more.svg.js';
-
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4,
-  _t5,
-  _t6,
-  _t7,
-  _t8,
-  _t9,
-  _t10,
-  _t11,
-  _t12,
-  _t13,
-  _t14,
-  _t15,
-  _t16,
-  _t17,
-  _t18,
-  _t19,
-  _t20,
-  _t21,
-  _t22,
-  _t23,
-  _t24,
-  _t25,
-  _t26,
-  _t27,
-  _t28,
-  _t29,
-  _t30,
-  _t31,
-  _t32,
-  _t33,
-  _t34,
-  _t35,
-  _t36,
-  _t37,
-  _t38,
-  _t39;
-const fadeIn = keyframes(_t || (_t = _`
-  from {
-    background-color: ${0};
-  }
-  to {
-    background-color: ${0};
-  }
-`), props => props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)'), props => props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)'));
-const fadeOut = keyframes(_t2 || (_t2 = _`
-  from {
-    background-color: ${0};
-  }
-  to {
-    background-color: ${0};
-  }
-`), props => props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)'), props => props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)'));
-const fadeInCheck = keyframes(_t3 || (_t3 = _`
-  from {
-    opacity: 0
-  }
-  to {
-    opacity: 1
-  }
-`));
-const fadeOutCheck = keyframes(_t4 || (_t4 = _`
-  from {
-    opacity: 1
-  }
-  to {
-    opacity: 0
-  }
-`));
-const AsyncCreatableSelectPaginate = withAsyncPaginate(CreatableSelect$1);
-const sharedStyle = css(_t5 || (_t5 = _`
-  font-family: ${0};
-  font-size: 0.875rem;
-  line-height: 1rem;
-  width: 100%;
-  display: block;
-  box-shadow: 'none';
-  flex-basis: ${0};
-`), props => props.theme.primaryFontFamily, props => props.$hasLabel ? '66.66%' : '100%');
-const CompactAutocompleteSelect = styled.div.attrs(applyDefaultTheme)(_t6 || (_t6 = _`
-  display: flex;
-  align-items: center;
-  height: 24px;
-  font-family: ${0};
-  ${0}
-`), props => props.theme.primaryFontFamily, props => props.disabled && css(_t7 || (_t7 = _`
-      opacity: 0.5;
-      cursor: not-allowed;
-    `)));
-const Label = styled.label.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
-  ${0};
-  flex-basis: 33.33%;
-  font-size: 0.875rem;
-  line-height: 1rem;
-  height: 19px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-top: 2px;
-  ${0}
-`), 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 = _`
-  display: flex;
-  width: 100%;
-  height: 19px;
-`));
-const SuccessContainer = styled.div.attrs(applyDefaultTheme)(_t11 || (_t11 = _`
-  opacity: 1;
-  pointer-events: none;
-  display: flex;
-  opacity: ${0};
-  animation: ${0} 0.5s ease-in-out;
-  transition: opacity 0.5s ease-in-out;
-  margin-right: 5px;
-  ${0}
-  > svg {
-    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 = _`
-  ${0}
-  ${0}
-    &&:hover:not(:focus) {
-    ${0}
-  }
-`), sharedStyle, props => props.disabled && css(_t13 || (_t13 = _`
-      opacity: 0.5;
-      cursor: not-allowed;
-    `)), props => props.disabled && css(_t14 || (_t14 = _`
-        background: none !important;
-        cursor: not-allowed;
-      `)));
-const AsyncAutocompleteSelect = styled(AsyncPaginate).attrs(applyDefaultTheme)(_t15 || (_t15 = _`
-  ${0}
-  ${0}
-    &&:hover:not(:focus) {
-    ${0}
-  }
-`), sharedStyle, props => props.disabled && css(_t16 || (_t16 = _`
-      opacity: 0.5;
-    `)), props => props.disabled && css(_t17 || (_t17 = _`
-        background: none !important;
-        cursor: not-allowed;
-      `)));
-const AutocompletSelect = styled(Select).attrs(applyDefaultTheme)(_t18 || (_t18 = _`
-  ${0}
-  ${0}
-    &&:hover:not(:focus) {
-    ${0}
-  }
-`), sharedStyle, props => props.disabled && css(_t19 || (_t19 = _`
-      opacity: 0.5;
-    `)), props => props.disabled && css(_t20 || (_t20 = _`
-        background: none !important;
-        cursor: not-allowed;
-      `)));
-const AutocompletCreatableSelect = styled(CreatableSelect$1).attrs(applyDefaultTheme)(_t21 || (_t21 = _`
-  ${0}
-  ${0}
-`), sharedStyle, props => props.disabled && css(_t22 || (_t22 = _`
-      opacity: 0.5;
-    `)));
-const Control = styled(components.Control).attrs(applyDefaultTheme)(_t23 || (_t23 = _`
-  && {
-    ${0};
-    ${0};
-
-    height: 22px;
-    min-height: 22px;
-    box-shadow: none;
-    box-sizing: border-box;
-    padding: 1px 3px 0 8.7px;
-    cursor: pointer;
-    border: 1px solid transparent;
-    background-color: transparent;
-    ${0}
-
-    ${0};
-
-    ${0};
-
-    ${0};
-
-    ${0};
-
-    ${0}
-    ${0}
-        ${0}
-  }
-
-  & .dropdown-indicator {
-    display: none;
-  }
-
-  &:hover .dropdown-indicator {
-    display: flex;
-  }
-
-  &&:hover {
-    border-color: transparent;
-    ${0};
-
-    ${0};
-
-    ${0};
-
-    ${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 = _`
-        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 = _`
-  && {
-    min-height: 22px;
-    height: 22px;
-    display: flex;
-    align-items: center;
-    padding: 6px;
-    cursor: pointer;
-    padding: 1px 13px;
-    ${0}
-    ${0}
-    ${0}
-      ${0}
-  }
-  svg {
-    width: 15px;
-    margin: 0 9px 0 0;
-  }
-  a {
-    display: flex;
-    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 = _`
-        ${0}
-      `), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))), props => props.isSelected && css(_t27 || (_t27 = _`
-        ${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 = _`
-        ${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 = _`
-  && {
-    ${0}
-    ${0};
-  }
-`), props => (props.type === 'error' || props.type === 'warning') && css(_t30 || (_t30 = _`
-        ${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 = _`
-  && {
-    ${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 = _`
-  && {
-    margin: 0;
-    padding: 0;
-    padding-left: 2px;
-    ${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 = _`
-  && {
-    ${0};
-  }
-`), props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white')));
-const ValueContainer = styled(components.ValueContainer).attrs(applyDefaultTheme)(_t34 || (_t34 = _`
-  && {
-    padding: 0;
-  }
-`));
-const ClearIndicator = styled(components.ClearIndicator).attrs(applyDefaultTheme)(_t35 || (_t35 = _`
-  && {
-    display: ${0};
-    padding: 0;
-    cursor: pointer;
-    ${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 = _`
-  && {
-    display: ${0};
-    padding: 0;
-    width: 18px;
-    margin-left: 2px;
-    cursor: pointer;
-    margin-top: 1px;
-    ${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 = _`
-  width: 12px;
-`));
-const ClearIndicatorIcon = styled(SvgClose).attrs(applyDefaultTheme)(_t38 || (_t38 = _`
-  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 = _`
-  && {
-    display: ${0};
-    margin: 4px;
-    ${0};
-  }
-`), props => props.isFocused ? 'flex' : 'none', props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')));
-
-export { AsyncAutocompleteSelect, AsyncCreatableAutocompleteSelect, AutocompletCreatableSelect, AutocompletSelect, ClearIndicator, ClearIndicatorIcon, CompactAutocompleteSelect, Control, DropdownIndicator, DropdownIndicatorIcon, IndicatorSeparator, Input, InputContainer, Label, Menu, Option, Placeholder, SingleValue, SuccessContainer, ValueContainer };

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

@@ -1 +0,0 @@
-export { default } from '../../CompactAutocompleteSelect.js';

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

@@ -1,245 +0,0 @@
-import styled, { keyframes, css } from 'styled-components';
-import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
-
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4,
-  _t5,
-  _t6,
-  _t7,
-  _t8,
-  _t9,
-  _t10,
-  _t11,
-  _t12,
-  _t13,
-  _t14,
-  _t15,
-  _t16,
-  _t17,
-  _t18,
-  _t19,
-  _t20,
-  _t21,
-  _t22,
-  _t23;
-const fadeIn = keyframes(_t || (_t = _`
-  from {
-    background-color: ${0};
-  }
-  to {
-    background-color: ${0};
-  }
-`), props => props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)'), props => props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)'));
-const fadeOut = keyframes(_t2 || (_t2 = _`
-  from {
-    background-color: ${0};
-  }
-  to {
-    background-color: ${0};
-  }
-`), props => props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)'), props => props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)'));
-const fadeInCheck = keyframes(_t3 || (_t3 = _`
-  from {
-    opacity: 0
-  }
-  to {
-    opacity: 1
-  }
-`));
-const fadeOutCheck = keyframes(_t4 || (_t4 = _`
-  from {
-    opacity: 1
-  }
-  to {
-    opacity: 0
-  }
-`));
-const CompactStarRating = styled.div.attrs(applyDefaultTheme)(_t5 || (_t5 = _`
-  font-family: ${0};
-  font-size: 1rem;
-  font-weight: 500;
-  height: 24px;
-  width: 100%;
-  display: flex;
-
-  align-items: center;
-  input[type='number'] {
-    position: absolute;
-    opacity: 0;
-    pointer-events: none;
-    margin: 0;
-  }
-
-  ${0}
-
-  ${0}
-`), props => props.theme.primaryFontFamily, props => props.readOnly && css(_t6 || (_t6 = _`
-      pointer-events: none;
-    `)), props => props.disabled && css(_t7 || (_t7 = _`
-      opacity: 0.5;
-      cursor: not-allowed;
-    `)));
-const labelWidth = styled.div.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
-  width: 33.33%;
-  display: flex;
-  align-items: center;
-  text-align: left;
-  font: normal normal normal 14px/16px Roboto;
-  letter-spacing: 0px;
-  padding: 0;
-  height: 19px;
-  cursor: default;
-  justify-content: space-between;
-  ${0};
-  ${0}
-`), 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 = _`
-  opacity: 1;
-  pointer-events: none;
-  display: flex;
-  opacity: ${0};
-  animation: ${0} 0.5s ease-in-out;
-  transition: opacity 0.5s ease-in-out;
-  margin-right: 5px;
-  ${0}
-  > svg {
-    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 = _`
-  display: flex;
-  width: 66.66%;
-  border-radius: 3px;
-  height: 24px;
-  align-items: center;
-  padding-left: 8px;
-  box-sizing: border-box;
-  border: 1px solid;
-
-  ${0}
-
-  ${0}
-
-  ${0}
-
-  ${0}
-
-  ${0}
-  &&:not(:hover):not(:focus) {
-    ${0};
-    ${0};
-  }
-  &&:hover:not(:focus) {
-    ${0}
-
-    ${0};
-
-    ${0};
-
-    ${0};
-  }
-
-  ${0}
-`), props => props.readOnly && css(_t12 || (_t12 = _`
-      border: none;
-    `)), props => props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white')), props => props.type === 'success' && css(_t13 || (_t13 = _`
-      animation: ${0} 0.5s ease-in-out;
-    `), props => props.success ? fadeIn : fadeOut), props => props.type === 'error' && css(_t14 || (_t14 = _`
-      ${0};
-      ${0}
-    `), props.theme.themeProp('background', '#7F1B1B', '#FBEAE6'), props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6')), props => props.type === 'warning' && css(_t15 || (_t15 = _`
-      ${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 = _`
-  display: flex;
-  align-items: center;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-
-  svg {
-    height: 12px;
-    padding-left: 4px;
-    transition: color 250ms;
-  }
-
-  ${0};
-
-  ${0};
-
-  ${0};
-
-  ${0};
-
-  ${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 = _`
-      pointer-events: none;
-    `)), props => props.disabled && css(_t19 || (_t19 = _`
-      button {
-        cursor: not-allowed;
-      }
-      > * {
-        cursor: not-allowed;
-      }
-    `)));
-const StarFill = styled.button.attrs(applyDefaultTheme)(_t20 || (_t20 = _`
-  display: flex;
-  align-items: center;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-
-  svg {
-    height: 12px;
-    padding-left: 4px;
-    transition: color 250ms;
-  }
-
-  ${0};
-
-  ${0};
-
-  ${0};
-
-  ${0};
-
-  ${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 = _`
-      pointer-events: none;
-    `)), props => props.disabled && css(_t22 || (_t22 = _`
-      button {
-        cursor: not-allowed;
-      }
-      > * {
-        cursor: not-allowed;
-      }
-    `)));
-styled.div.attrs(applyDefaultTheme)(_t23 || (_t23 = _`
-  opacity: 1;
-  pointer-events: none;
-  margin-left: auto;
-  opacity: ${0};
-  animation: ${0} 0.5s ease-in-out;
-  transition: opacity 0.5s ease-in-out;
-  ${0}
-  > svg {
-    width: 13px;
-  }
-`), props => props.type === 'success' ? 0 : 1, props => props.type === 'success' ? fadeOutCheck : fadeInCheck, props => props.theme.themeProp('color', props.theme.getColor('emerald-200'), props.theme.getColor('emerald-500')));
-
-export { CompactStarRating, Star, StarFill, SuccessContainer, labelWidth, starsWidth };