@ntbjs/react-components 1.3.0-rc.9 → 2.0.0-rc.5

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

@@ -0,0 +1,279 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var defaultTheme = require('../../../utils/defaultTheme.js');
+var close = require('../../../icons/close.svg.js');
+var Select = require('react-select');
+var reactSelectCreatable_esm = require('../../../node_modules/react-select/creatable/dist/react-select-creatable.esm.js');
+var reactSelectAsyncPaginate = require('react-select-async-paginate');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
+
+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;
+const AsyncCreatableSelectPaginate = reactSelectAsyncPaginate.withAsyncPaginate(reactSelectCreatable_esm["default"]);
+const showMoreHeight = 114;
+const sharedStyle = styled.css(_t || (_t = _`
+  font-family: ${0};
+  font-size: 12px;
+  font-weight: 400;
+  position: relative;
+`), props => props.theme.primaryFontFamily);
+const Label = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
+  ${0};
+  flex-basis: 33.33%;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  cursor: pointer;
+  height: 19px;
+  display: flex;
+  align-items: center;
+`), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')));
+const MultiSelect = styled__default["default"](Select__default["default"]).attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
+  ${0}
+`), sharedStyle);
+const CreatableMultiSelect = styled__default["default"](reactSelectCreatable_esm["default"]).attrs(defaultTheme.applyDefaultTheme)(_t4 || (_t4 = _`
+  ${0}
+`), sharedStyle);
+const AsyncCreatableMultiSelect = styled__default["default"](AsyncCreatableSelectPaginate).attrs(defaultTheme.applyDefaultTheme)(_t5 || (_t5 = _`
+  ${0}
+`), sharedStyle);
+const AsyncMultiSelect = styled__default["default"](reactSelectAsyncPaginate.AsyncPaginate).attrs(defaultTheme.applyDefaultTheme)(_t6 || (_t6 = _`
+  ${0}
+`), sharedStyle);
+const MultiSelectWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t7 || (_t7 = _`
+  position: relative;
+`));
+const Control = styled__default["default"](Select.components.Control).attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
+  && {
+    align-items: flex-start;
+    background: transparent;
+    border: none;
+    box-shadow: none;
+  }
+
+  :hover {
+    cursor: ${0};
+  }
+`), props => !props.isDisabled && props.focused || props.readOnly ? 'default' : 'pointer');
+const ValueContainer = styled__default["default"](Select.components.ValueContainer)(_t9 || (_t9 = _`
+  && {
+    align-items: flex-start;
+    gap: 8px;
+    padding: 0;
+
+    max-height: ${0} !important;
+
+    ${0}
+  }
+`), props => {
+  return props.showMore ? props.error || props.warning ? '100%' : showMoreHeight + 16 + 'px' : '100%';
+}, props => (props.error || props.warning) && styled.css(_t10 || (_t10 = _`
+        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__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t11 || (_t11 = _`
+  && {
+    border-radius: 3px;
+    margin: 0;
+  }
+`));
+const MultiValue = styled__default["default"](Select.components.MultiValue).attrs(defaultTheme.applyDefaultTheme)(_t12 || (_t12 = _`
+  && {
+    border-radius: 3px;
+    margin: 0;
+
+    ${0}
+
+    ${0}
+
+    > div {
+      align-items: center;
+      display: flex;
+      font-size: 12px;
+      min-height: 26px;
+
+      :first-of-type {
+        padding: ${0};
+      }
+
+      :last-of-type:not(:only-child) {
+        padding: 0 8px 0 5px;
+        height: 100%;
+        width: fit-content;
+      }
+
+      :last-of-type:not(:only-child):hover {
+        background-color: ${0};
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+        cursor: pointer;
+      }
+
+      svg {
+        stroke: white;
+        stroke-width: 2px;
+        width: 8px;
+      }
+
+    :hover {
+      cursor: pointer;
+    }
+  }
+`), 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__default["default"](Select.components.MultiValueRemove).attrs(defaultTheme.applyDefaultTheme)(_t13 || (_t13 = _``));
+const Input = styled__default["default"](Select.components.Input).attrs(defaultTheme.applyDefaultTheme)(_t14 || (_t14 = _`
+  align-self: center;
+  font-size: ${0};
+  min-width: 150px;
+
+  ${0}
+
+  ${0}
+  }
+`), props => props.$focused ? '14px' : '12px', props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')), props => !props.$focused && styled.css(_t15 || (_t15 = _`
+      ${0}
+
+      :before {
+        height: 100%;
+        white-space: nowrap;
+        width: fit-content;
+        content: '${0}';
+      }
+    `), props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')), props => props.edittext));
+const DropdownMenu = styled__default["default"](Select.components.Menu).attrs(defaultTheme.applyDefaultTheme)(_t16 || (_t16 = _`
+  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 = styled.css(_t17 || (_t17 = _`
+  ${0}
+
+  ${0}
+
+  ${0}
+
+  :hover {
+    cursor: pointer;
+  }
+`), props => props.isFocused && styled.css(_t18 || (_t18 = _`
+      ${0}
+    `), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))), props => props.isSelected && styled.css(_t19 || (_t19 = _`
+      ${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 && styled.css(_t20 || (_t20 = _`
+      ${0}
+    `), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))));
+const Option = styled__default["default"](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_t21 || (_t21 = _`
+  ${0}
+`), sharedOptionStyle);
+const SelectedOption = styled__default["default"](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_t22 || (_t22 = _`
+  ${0}
+
+  display: flex !important;
+  justify-content: space-between;
+`), sharedOptionStyle);
+const DropdownOptionDeleteIcon = styled__default["default"](close.ReactComponent).attrs(defaultTheme.applyDefaultTheme)(_t23 || (_t23 = _`
+  stroke-width: 1px;
+  width: 8px;
+
+  ${0}
+`), props => props.theme.themeProp('stroke', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')));
+const ShowMoreWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t24 || (_t24 = _`
+  align-items: end;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  max-height: ${0}px;
+  top: 0;
+  width: 100%;
+
+  ${0}
+
+  :hover {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+`), showMoreHeight + 16, props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('emerald-500')));
+const ShowMoreOverlay = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t25 || (_t25 = _`
+  align-items: end;
+  display: block;
+  height: 100%;
+  max-height: ${0}px;
+  left: 0;
+  top: 0;
+  width: 100%;
+
+  ${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__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t26 || (_t26 = _`
+  font-size: 0.875rem;
+  width: 100%;
+  ${0}
+`), props => props.theme.themeProp('background-color', '#121212', '#fefefe'));
+const ErrorMessage = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t27 || (_t27 = _`
+  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');
+
+exports.AsyncCreatableMultiSelect = AsyncCreatableMultiSelect;
+exports.AsyncMultiSelect = AsyncMultiSelect;
+exports.Control = Control;
+exports.CreatableMultiSelect = CreatableMultiSelect;
+exports.DropdownMenu = DropdownMenu;
+exports.DropdownOptionDeleteIcon = DropdownOptionDeleteIcon;
+exports.ErrorMessage = ErrorMessage;
+exports.Input = Input;
+exports.Label = Label;
+exports.MultiSelect = MultiSelect;
+exports.MultiSelectWrapper = MultiSelectWrapper;
+exports.MultiValue = MultiValue;
+exports.MultiValueRemove = MultiValueRemove;
+exports.MultiValueWrapper = MultiValueWrapper;
+exports.Option = Option;
+exports.SelectedOption = SelectedOption;
+exports.ShowMoreOverlay = ShowMoreOverlay;
+exports.ShowMoreText = ShowMoreText;
+exports.ShowMoreWrapper = ShowMoreWrapper;
+exports.ValueContainer = ValueContainer;

package/cjs/components/inputs/MultiSelect/inputs/MultiSelect/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var MultiSelect = require('../../MultiSelect.js');
+
+
+
+exports["default"] = MultiSelect["default"];

package/cjs/components/inputs/Radio/Radio.js

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var index = require('../../../node_modules/react/index.js');
+var nanoid = require('nanoid');
+var index$2 = require('../../../node_modules/prop-types/index.js');
+var Radio_styled = require('./Radio.styled.js');
+var index$1 = require('../../../_virtual/index.js');
+
+const _excluded = ["name", "value", "checked", "defaultChecked", "disabled", "readOnly", "label", "className", "style", "onChange", "onBlur"];
+const Radio = index["default"].forwardRef(function Radio(_ref, forwardedRef) {
+  let {
+      name,
+      value,
+      checked,
+      defaultChecked,
+      disabled,
+      readOnly,
+      label,
+      className,
+      style,
+      onChange,
+      onBlur
+    } = _ref,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  const [uniqueId] = index$1.react.exports.useState(nanoid.nanoid());
+  return index["default"].createElement(Radio_styled.Radio, {
+    htmlFor: uniqueId,
+    disabled: disabled,
+    readOnly: readOnly,
+    className: className,
+    style: style
+  }, index["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({
+    ref: forwardedRef,
+    type: "radio",
+    name: name,
+    value: value,
+    checked: checked,
+    defaultChecked: defaultChecked,
+    disabled: disabled,
+    readOnly: readOnly,
+    id: uniqueId,
+    onChange: onChange,
+    onBlur: onBlur
+  }, rest)), index["default"].createElement(Radio_styled.RadioLabel, null, label));
+});
+Radio.propTypes = process.env.NODE_ENV !== "production" ? {
+  label: index$2["default"].any,
+  name: index$2["default"].string.isRequired,
+  value: index$2["default"].any.isRequired,
+  checked: index$2["default"].bool,
+  defaultChecked: index$2["default"].bool,
+  disabled: index$2["default"].bool,
+  readOnly: index$2["default"].bool,
+  className: index$2["default"].string,
+  style: index$2["default"].object,
+  onChange: index$2["default"].func,
+  onBlur: index$2["default"].func
+} : {};
+Radio.defaultProps = {
+  disabled: false
+};
+var Radio$1 = Radio;
+
+exports["default"] = Radio$1;

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

@@ -0,0 +1,93 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var polished = require('polished');
+var styled = require('styled-components');
+var defaultTheme = require('../../../utils/defaultTheme.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4;
+const radioSize = '18px';
+const RadioLabel = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+  padding-left: ${0};
+  font-weight: 400;
+  font-size: 0.875rem;
+
+  ${0};
+`), polished.math(`${radioSize} + 10px`), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600')));
+const Radio = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
+  display: block;
+  position: relative;
+  cursor: pointer;
+  line-height: ${0};
+  user-select: none;
+
+  &::before {
+    content: '';
+    position: absolute;
+    border: 2px solid ${0};
+    width: ${0};
+    height: ${0};
+    top: 0;
+    border-radius: 50%;
+    transition: all 200ms;
+    box-sizing: border-box;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    top: 5px;
+    left: 5px;
+    border-radius: 50%;
+    transform: scale(0);
+    transition: all 200ms;
+  }
+
+  &:has(input:checked) {
+    ::before {
+      border-color: ${0};
+    }
+
+    ::after {
+      background: ${0};
+      transform: scale(1);
+    }
+
+    ${0} {
+      opacity: 1;
+    }
+  }
+  & {
+    input[type='radio'] {
+      position: absolute;
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  ${0}
+
+  ${0}
+`), radioSize, props => props.theme.getColor('gray-300'), radioSize, radioSize, props => props.theme.getColor('emerald-500'), props => props.theme.getColor('emerald-500'), RadioLabel, props => props.readOnly && styled.css(_t3 || (_t3 = _`
+      opacity: 0.5;
+      pointer-events: none;
+      user-select: text;
+    `)), props => props.disabled && styled.css(_t4 || (_t4 = _`
+      opacity: 0.5;
+      cursor: not-allowed;
+      user-select: text;
+    `)));
+
+exports.Radio = Radio;
+exports.RadioLabel = RadioLabel;

package/cjs/components/inputs/Radio/inputs/Radio/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Radio = require('../../Radio.js');
+
+
+
+exports["default"] = Radio["default"];

package/cjs/components/inputs/Switch/Switch.js

@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../../../node_modules/react/index.js');
+var nanoid = require('nanoid');
+var index$2 = require('../../../node_modules/prop-types/index.js');
+var Switch_styled = require('./Switch.styled.js');
+var index$1 = require('../../../_virtual/index.js');
+
+const Switch = index["default"].forwardRef(function Switch({
+  name,
+  checked,
+  defaultChecked,
+  label,
+  disabled,
+  readOnly,
+  description,
+  spaciousDescription,
+  className,
+  style,
+  onChange,
+  onBlur
+}, forwardedRef) {
+  const [uniqueId] = index$1.react.exports.useState(nanoid.nanoid());
+  return index["default"].createElement(Switch_styled.Switch, {
+    disabled: disabled,
+    readOnly: readOnly,
+    className: className,
+    style: style
+  }, index["default"].createElement(Switch_styled.SwitchLabel, {
+    htmlFor: uniqueId
+  }, index["default"].createElement("input", {
+    ref: forwardedRef,
+    checked: checked,
+    defaultChecked: defaultChecked,
+    disabled: disabled,
+    readOnly: readOnly,
+    id: uniqueId,
+    name: name,
+    type: "checkbox",
+    onBlur: onBlur,
+    onChange: onChange
+  }), index["default"].createElement(Switch_styled.SwitchIndicator, null, index["default"].createElement(Switch_styled.SwitchIndicatorButton, null)), typeof label === 'string' && label.length > 0 && index["default"].createElement(Switch_styled.SwitchIndicatorLabelText, null, label)), typeof description === 'string' && description.length > 0 && index["default"].createElement(Switch_styled.Description, {
+    spaciousDescription: spaciousDescription
+  }, description));
+});
+Switch.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: index$2["default"].any,
+  name: index$2["default"].string.isRequired,
+  checked: index$2["default"].bool,
+  defaultChecked: index$2["default"].bool,
+  label: index$2["default"].string,
+  disabled: index$2["default"].bool,
+  readOnly: index$2["default"].bool,
+  description: index$2["default"].string,
+  spaciousDescription: index$2["default"].bool,
+  className: index$2["default"].string,
+  style: index$2["default"].object,
+  onChange: index$2["default"].func,
+  onBlur: index$2["default"].func
+} : {};
+Switch.defaultProps = {
+  disabled: false,
+  readOnly: false
+};
+var Switch$1 = Switch;
+
+exports["default"] = Switch$1;

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

@@ -0,0 +1,123 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var polished = require('polished');
+var styled = require('styled-components');
+var defaultTheme = require('../../../utils/defaultTheme.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5,
+  _t6,
+  _t7,
+  _t8;
+const switchButtonSize = '16px';
+const Switch = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+  * {
+    box-sizing: border-box;
+  }
+
+  display: flex;
+  flex-direction: column;
+
+  ${0}
+
+  ${0}
+`), props => props.readOnly && styled.css(_t2 || (_t2 = _`
+      opacity: 0.5;
+      > * {
+        pointer-events: none;
+        user-select: text;
+      }
+    `)), props => props.disabled && styled.css(_t3 || (_t3 = _`
+      opacity: 0.5;
+      cursor: not-allowed;
+      * {
+        pointer-events: none;
+        user-select: text;
+      }
+    `)));
+const SwitchIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t4 || (_t4 = _`
+  display: inline-block;
+  position: relative;
+  ${0}
+  height: ${0};
+  width: 32px;
+  border-radius: 20px;
+  border: 1px solid;
+  ${0}
+  transition: background 200ms;
+`), props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('gray-200')), polished.math(`${switchButtonSize} + 2px`), props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-300')));
+const SwitchIndicatorButton = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t5 || (_t5 = _`
+  position: absolute;
+  ${0}
+  height: ${0};
+  width: ${0};
+  border-radius: 50%;
+  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__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t6 || (_t6 = _`
+  padding-left: 10px;
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 18px;
+
+  ${0};
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600')));
+const SwitchLabel = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)(_t7 || (_t7 = _`
+  display: inline-flex;
+  margin-right: auto;
+  cursor: pointer;
+
+  input[type='checkbox'] {
+    position: absolute;
+    opacity: 0;
+  }
+
+  &:has(input[type='checkbox']:not(:checked)) {
+    ${0} {
+      left: 0;
+    }
+  }
+
+  &:has(input[type='checkbox']:checked) {
+    ${0} {
+      left: calc(100% - ${0});
+    }
+
+    ${0} {
+      background: ${0};
+
+      ${0}
+    }
+  }
+
+  &:has(input[type='checkbox']:focus-visible) {
+    ${0} {
+      ${0}
+    }
+  }
+`), 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 ${polished.rgba(props.theme.getColor('emerald-500'), 0.5)}`, `8px solid ${polished.rgba(props.theme.getColor('emerald-500'), 0.3)}`, 1));
+const Description = styled__default["default"].div.attrs(defaultTheme.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')));
+
+exports.Description = Description;
+exports.Switch = Switch;
+exports.SwitchIndicator = SwitchIndicator;
+exports.SwitchIndicatorButton = SwitchIndicatorButton;
+exports.SwitchIndicatorLabelText = SwitchIndicatorLabelText;
+exports.SwitchLabel = SwitchLabel;

package/cjs/components/inputs/Switch/inputs/Switch/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Switch = require('../../Switch.js');
+
+
+
+exports["default"] = Switch["default"];