@ntbjs/react-components 2.0.0-rc.3 → 2.0.0-rc.30

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

@@ -1,277 +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,
-  _t11,
-  _t12,
-  _t13,
-  _t14,
-  _t15,
-  _t16,
-  _t17,
-  _t18,
-  _t19,
-  _t20,
-  _t21,
-  _t22,
-  _t23,
-  _t24,
-  _t25,
-  _t26,
-  _t27,
-  _t28,
-  _t29,
-  _t30,
-  _t31;
-const Button = styled.button.attrs(applyDefaultTheme)(_t || (_t = _`
-  position: relative;
-  border-radius: 3px;
-  font-family: inherit;
-  font-size: 0.875rem;
-  font-weight: 400;
-  padding: 12px 16px;
-  cursor: pointer;
-  background: ${0};
-  border: 2px solid ${0};
-  transition: all 250ms, opacity 200ms;
-
-  &:hover,
-  &.dropdown-is-active {
-    background: #296c58;
-    border-color: #296c58;
-  }
-
-  ${0}
-
-  && {
-    ${0};
-  }
-
-  && {
-    ${0};
-  }
-
-  && {
-    ${0};
-  }
-
-  && {
-    ${0};
-  }
-
-  ${0};
-
-  ${0};
-
-  ${0};
-
-  ${0};
-
-  ${0};
-
-  ${0};
-
-  ${0};
-`), props => props.theme.getColor('emerald-500'), props => props.theme.getColor('emerald-500'), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('white')), props => props.secondary && css(_t2 || (_t2 = _`
-        background: ${0};
-        border-color: ${0};
-
-        ${0}
-
-        &:hover,
-        &.dropdown-is-active {
-          background: ${0};
-          border-color: ${0};
-        }
-      `), props => props.theme.getColor('gray-200'), props => props.theme.getColor('gray-200'), props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('gray-700')), props => props.theme.getColor('gray-300'), props => props.theme.getColor('gray-300')), props => props.outlined && css(_t3 || (_t3 = _`
-        background: transparent;
-        transition: none;
-
-        ${0}
-
-        ${0}
-
-        &:hover,
-        &.dropdown-is-active {
-          background-color: #296c58;
-
-          ${0}
-
-          ${0}
-        }
-      `), props.theme.themeProp('border-color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-500')), props.theme.themeProp('color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-500')), props.theme.themeProp('border-color', props.theme.getColor('emerald-600'), props.theme.getColor('emerald-600')), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-200'))), props => props.outlined && props.secondary && css(_t4 || (_t4 = _`
-        ${0}
-
-        ${0}
-
-        &:hover,
-        &.dropdown-is-active {
-          background: ${0};
-
-          ${0}
-
-          ${0}
-        }
-      `), props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-700')), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')), props.theme.getColor('gray-300'), props.theme.themeProp('border-color', props.theme.getColor('gray-300'), props.theme.getColor('gray-300')), props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('gray-700'))), props => props.outlined && props.secondary && props.dropdownItems && css(_t5 || (_t5 = _`
-        &:hover,
-        &.dropdown-is-active {
-          ${0}
-        }
-      `), props.theme.themeProp('border-color', props.theme.getColor('gray-300'), props.theme.getColor('gray-300'))), props => props.block && css(_t6 || (_t6 = _`
-      width: 100%;
-    `)), props => props.disabled && css(_t7 || (_t7 = _`
-      opacity: 0.5;
-      cursor: not-allowed;
-      pointer-events: none;
-    `)), props => props.size === 'x-small' && css(_t8 || (_t8 = _`
-      padding: 1px 16px;
-      height: 24px;
-    `)), props => props.size === 'small' && css(_t9 || (_t9 = _`
-      padding: 6px 16px;
-    `)), props => props.size === 'large' && css(_t10 || (_t10 = _`
-      padding: 16px 16px;
-    `)), props => props.singleAction && css(_t11 || (_t11 = _`
-      display: flex;
-      align-items: center;
-      gap: ${0}px;
-      border-radius: 3px !important;
-      transition: all 250ms, opacity 200ms;
-    `), props.singleActionGap), props => props.width && css(_t12 || (_t12 = _`
-      min-width: ${0}px;
-      justify-content: center;
-    `), props.width));
-const ButtonContent = styled.div.attrs(applyDefaultTheme)(_t13 || (_t13 = _`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transform: scale(1);
-  opacity: 1;
-  transition: all 200ms;
-
-  > svg {
-    width: 100%;
-    max-width: 16px;
-    max-height: 16px;
-    margin-right: 8px;
-
-    ${0};
-
-    ${0};
-  }
-
-  ${0}
-
-  ${0};
-`), props => props.size === 'small' && css(_t14 || (_t14 = _`
-        max-width: 13px;
-        max-height: 13px;
-      `)), props => props.size === 'x-small' && css(_t15 || (_t15 = _`
-        max-width: 11px;
-        max-height: 11px;
-      `)), props => props.$loading && css(_t16 || (_t16 = _`
-      transform: scale(0.95);
-      opacity: 0;
-    `)), props => props.singleAction && css(_t17 || (_t17 = _`
-      svg {
-        width: 100% !important;
-        height: 100% !important;
-        margin-right: 24px;
-      }
-    `)));
-const LoadingIndicator = styled.div.attrs(applyDefaultTheme)(_t18 || (_t18 = _`
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  left: 0;
-  padding: 4px;
-  background: inherit;
-  opacity: 0;
-  transition: opacity 200ms;
-  box-sizing: border-box;
-
-  ${0}
-`), props => props.$loading && css(_t19 || (_t19 = _`
-      opacity: 1;
-    `)));
-const LoadingIndicatorSvg = styled.svg.attrs(applyDefaultTheme)(_t20 || (_t20 = _`
-  height: 100%;
-  color: inherit;
-  transform: rotate(-88deg);
-`));
-const LoadingIndicatorSvgCircle = styled.circle.attrs(applyDefaultTheme)(_t21 || (_t21 = _`
-  transition: stroke-dashoffset 300ms linear;
-  stroke-dasharray: 113;
-`));
-const ButtonWrapper = styled.span.attrs(applyDefaultTheme)(_t22 || (_t22 = _`
-  white-space: nowrap;
-  display: flex;
-`));
-const MainButtonWrapper = styled.div.attrs(applyDefaultTheme)(_t23 || (_t23 = _`
-  border-radius: 3px;
-  ${0};
-`), props => {
-  return (props.activeDropdown || props.dropdownItems) && !props.outlined && css(_t24 || (_t24 = _`
-        background: ${0};
-      `), props.secondary ? props.theme.getColor('gray-200') : props.theme.getColor('emerald-500'));
-});
-const MainButtonContainer = styled.div.attrs(applyDefaultTheme)(_t25 || (_t25 = _`
-  display: inline-block;
-  button {
-    ${0};
-
-    ${0};
-  }
-`), props => (props.activeDropdown || props.dropdownItems) && css(_t26 || (_t26 = _`
-        border-bottom-right-radius: 0;
-        border-top-right-radius: 0;
-      `)), props => (props.activeDropdown || props.dropdownItems) && props.outlined && css(_t27 || (_t27 = _`
-        border-right: none;
-      `)));
-const MainButtonContainerSingle = styled.div.attrs(applyDefaultTheme)(_t28 || (_t28 = _`
-  display: inline-block;
-  width: 100%;
-  ${0};
-
-  button {
-    ${0};
-  }
-`), props => props.singleAction && css(_t29 || (_t29 = _`
-      display: flex;
-      align-items: center;
-      border-radius: 3px !important;
-      transition: all 250ms, opacity 200ms;
-    `)), props => (props.activeDropdown || props.dropdownItems) && css(_t30 || (_t30 = _`
-        border-bottom-right-radius: 0;
-        border-top-right-radius: 0;
-      `)));
-const DropdownButtonContainer = styled.div.attrs(applyDefaultTheme)(_t31 || (_t31 = _`
-  display: inline-block;
-
-  button {
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
-
-    ${0};
-  }
-
-  svg {
-    color: inherit;
-    height: 7px;
-    width: 12px;
-
-    ${0};
-  }
-`), props => !props.singleAction && 'border-left: none', props => !props.singleAction && 'margin-bottom: 1px');
-
-export { Button, ButtonContent, ButtonWrapper, DropdownButtonContainer, LoadingIndicator, LoadingIndicatorSvg, LoadingIndicatorSvgCircle, MainButtonContainer, MainButtonContainerSingle, MainButtonWrapper };

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

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

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';