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

package/cjs/components/inputs/TextInput/TextInput.js

@@ -1,147 +0,0 @@
-'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 useMergedRefs = require('../../../node_modules/@restart/hooks/esm/useMergedRefs.js');
-var lodash = require('lodash');
-var editNote = require('../../../icons/edit-note.svg.js');
-var TextInput_styled = require('./TextInput.styled.js');
-var index$1 = require('../../../_virtual/index.js');
-
-const _excluded = ["value", "defaultValue", "name", "label", "placeholder", "type", "required", "disabled", "readOnly", "autoComplete", "description", "error", "warning", "icon", "adornments", "className", "style", "onChange", "onBlur", "noBorder"];
-const TextInput = index["default"].forwardRef(function TextInput(_ref, forwardedRef) {
-  let {
-      value,
-      defaultValue,
-      name,
-      label,
-      placeholder,
-      type,
-      required,
-      disabled,
-      readOnly,
-      autoComplete,
-      description,
-      error,
-      warning,
-      icon,
-      adornments,
-      className,
-      style,
-      onChange,
-      onBlur,
-      noBorder
-    } = _ref,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  const textInputDomNode = index$1.react.exports.useRef(null);
-  const textInputRef = useMergedRefs["default"](forwardedRef, textInputDomNode);
-  const [uniqueId] = index$1.react.exports.useState(nanoid.nanoid());
-  const hasError = index$1.react.exports.useMemo(() => {
-    if (lodash.isBoolean(error)) {
-      return error;
-    }
-    return !lodash.isEmpty(error);
-  }, [error]);
-  const hasWarning = index$1.react.exports.useMemo(() => {
-    if (lodash.isBoolean(warning)) {
-      return warning;
-    }
-    return !lodash.isEmpty(warning);
-  }, [warning]);
-  const descriptionText = index$1.react.exports.useMemo(() => {
-    if (!lodash.isEmpty(error)) {
-      return error;
-    }
-    if (!lodash.isEmpty(warning)) {
-      return warning;
-    }
-    if (!lodash.isEmpty(description)) {
-      return description;
-    }
-    return null;
-  }, [description, error, warning]);
-  return index["default"].createElement(TextInput_styled.TextInput, {
-    error: hasError,
-    disabled: disabled,
-    warning: hasWarning,
-    className: className,
-    style: style
-  }, typeof icon !== 'undefined' && index["default"].createElement(TextInput_styled.TextInputFieldIcon, null, icon), index["default"].createElement(TextInput_styled.TextInputWrapper, null, typeof (adornments === null || adornments === void 0 ? void 0 : adornments.prefix) === 'string' && adornments.prefix.length > 0 && index["default"].createElement(TextInput_styled.Adornment, {
-    htmlFor: `text-input-${uniqueId}`,
-    error: hasError,
-    warning: hasWarning,
-    isPrefix: true,
-    onClick: () => textInputDomNode.current.focus()
-  }, adornments.prefix), index["default"].createElement(TextInput_styled.TextInputField, _rollupPluginBabelHelpers["extends"]({
-    ref: textInputRef,
-    value: value,
-    defaultValue: defaultValue,
-    name: name,
-    placeholder: placeholder || ' ',
-    type: type,
-    required: required,
-    autoComplete: autoComplete,
-    hasIcon: Boolean(icon),
-    error: hasError,
-    warning: hasWarning,
-    id: `text-input-${uniqueId}`,
-    onChange: onChange,
-    onBlur: onBlur,
-    readOnly: readOnly,
-    noBorder: noBorder
-  }, rest)), !readOnly && noBorder && index["default"].createElement(TextInput_styled.InputIconContainer, {
-    error: error,
-    warning: warning
-  }, index["default"].createElement(editNote.ReactComponent, null)), label && index["default"].createElement(TextInput_styled.TextInputLabel, {
-    htmlFor: `text-input-${uniqueId}`,
-    hasPlaceholder: Boolean(placeholder),
-    hasAdornments: Boolean(typeof (adornments === null || adornments === void 0 ? void 0 : adornments.prefix) === 'string' && adornments.prefix.length > 0 || typeof (adornments === null || adornments === void 0 ? void 0 : adornments.suffix) === 'string' && adornments.suffix.length > 0),
-    hasIcon: Boolean(icon),
-    error: hasError,
-    warning: hasWarning
-  }, label, required && ' *'), typeof (adornments === null || adornments === void 0 ? void 0 : adornments.suffix) === 'string' && adornments.suffix.length > 0 && index["default"].createElement(TextInput_styled.Adornment, {
-    error: hasError,
-    warning: hasWarning,
-    isPrefix: false,
-    onClick: () => textInputDomNode.current.focus()
-  }, adornments.suffix)), typeof descriptionText === 'string' && descriptionText.length > 0 && index["default"].createElement(TextInput_styled.Description, {
-    error: hasError,
-    warning: hasWarning
-  }, descriptionText));
-});
-TextInput.defaultProps = {
-  type: 'text',
-  noBorder: false
-};
-TextInput.propTypes = process.env.NODE_ENV !== "production" ? {
-  value: index$2["default"].string,
-  defaultValue: index$2["default"].string,
-  name: index$2["default"].string,
-  label: index$2["default"].string,
-  placeholder: index$2["default"].string,
-  type: index$2["default"].string,
-  required: index$2["default"].bool,
-  disabled: index$2["default"].bool,
-  readOnly: index$2["default"].bool,
-  autoComplete: index$2["default"].string,
-  description: index$2["default"].string,
-  error: index$2["default"].oneOfType([index$2["default"].bool, index$2["default"].string]),
-  warning: index$2["default"].oneOfType([index$2["default"].bool, index$2["default"].string]),
-  icon: index$2["default"].element,
-  adornments: index$2["default"].shape({
-    prefix: index$2["default"].string,
-    suffix: index$2["default"].string
-  }),
-  className: index$2["default"].string,
-  style: index$2["default"].object,
-  onChange: index$2["default"].func,
-  onBlur: index$2["default"].func,
-  noBorder: index$2["default"].bool
-} : {};
-var TextInput$1 = TextInput;
-
-exports["default"] = TextInput$1;

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

@@ -1,276 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-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,
-  _t9,
-  _t10,
-  _t11,
-  _t12,
-  _t13,
-  _t14,
-  _t15,
-  _t16,
-  _t17,
-  _t18,
-  _t19,
-  _t20,
-  _t21,
-  _t22,
-  _t23,
-  _t24,
-  _t25;
-const activeLabel = styled.css(_t || (_t = _`
-  font-size: 0.75rem;
-  padding: 0 3px;
-  top: -7px;
-  letter-spacing: 0.03em;
-  left: 8px !important;
-  opacity: 1 !important;
-`));
-const Adornment = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
-  flex-shrink: 0;
-  font-family: inherit;
-  font-size: 0.875rem;
-  line-height: initial;
-  padding: 13px 10px;
-
-  ${0}
-  ${0}
-  border: 1px solid;
-  ${0}
-  border-radius: 3px;
-  ${0}
-  box-sizing: border-box;
-  appearance: none;
-  transition: border-color 350ms;
-  height: 2.75rem;
-
-  ${0}
-  ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')), props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white')), props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400')), props => props.isPrefix ? styled.css(_t3 || (_t3 = _`
-          padding-right: 10px;
-          border-right: 0;
-          border-top-right-radius: 0;
-          border-bottom-right-radius: 0;
-        `)) : styled.css(_t4 || (_t4 = _`
-          padding-left: 0;
-          margin-left: -3px;
-          border-left: 0;
-          border-top-left-radius: 0;
-          border-bottom-left-radius: 0;
-        `)), props => props.warning && styled.css(_t5 || (_t5 = _`
-      border-color: ${0} !important;
-    `), props.theme.getColor('orange-500')), props => props.error && styled.css(_t6 || (_t6 = _`
-      border-color: ${0} !important;
-    `), props.theme.getColor('red-500')));
-const TextInputWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t7 || (_t7 = _`
-  display: flex;
-  align-content: center;
-
-  &:focus-within {
-    ${0} {
-      outline: none;
-      ${0}
-    }
-  }
-`), Adornment, props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'), 1));
-const InputIconContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
-  opacity: 0;
-  pointer-events: none;
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-  padding-right: 4px;
-  padding-left: 30px;
-  display: flex;
-  align-items: center;
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  color: ${0};
-
-  ${0}
-
-  ${0}
-
-  > svg {
-    width: 12px;
-  }
-`), props => props.theme.getColor('gray-400'), props => props.warning && props.theme.themeProp('color', '#C3AF43', '#C3AF43'), props => props.error && props.theme.themeProp('color', '#CB968F', '#CB968F'));
-const TextInputField = styled__default["default"].input.attrs(defaultTheme.applyDefaultTheme)(_t9 || (_t9 = _`
-  display: block;
-  width: 100%;
-  font-family: inherit;
-  font-size: 0.875rem;
-  line-height: 1;
-  padding: 13px 10px;
-  border-radius: 3px;
-  box-sizing: border-box;
-  appearance: none;
-  transition: border-color 350ms;
-  height: 2.75rem !important; // important is needed to override the default Foundation styling used in the Mediebank;
-  margin-bottom: 0; // needed to override the default Foundation styling used in the Mediebank;
-  ${0}
-  ${0}
-  border: 1px solid;
-  ${0};
-
-  ${0}
-
-  ${0}
-  ${0}
-  ${0}
-
-  &::placeholder {
-    ${0}
-
-    ${0}
-  }
-
-
-  &&:hover:not(:focus) {
-    ${0};
-    transition: background 350ms;
-    & + ${0} {
-      opacity: 1;
-      transition: opacity 350ms;
-    }
-  }
-
-  :focus {
-    outline: none;
-    border-color: ${0} !important
-    ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')), props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white')), props => props.noBorder || props.readOnly ? 'border-color: transparent !important' : props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400')), props => props.readOnly && styled.css(_t10 || (_t10 = _`
-      user-select: text;
-      cursor: default;
-    `)), props => props.warning && styled.css(_t11 || (_t11 = _`
-      border-color: ${0} !important;
-    `), props.theme.getColor('orange-500')), props => props.error && styled.css(_t12 || (_t12 = _`
-      border-color: ${0} !important;
-    `), props.theme.getColor('red-500')), props => props.hasIcon && styled.css(_t13 || (_t13 = _`
-      padding-left: 35px;
-    `)), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1), props => props.theme.themeProp('opacity', 0.6, 0.5, 1), props => props.noBorder ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-200')) : 'background: transparent', InputIconContainer, props => props.theme.getColor('gray-600'), props => props.readOnly && styled.css(_t14 || (_t14 = _`
-        outline: none;
-      `)));
-const TextInputLabel = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)(_t15 || (_t15 = _`
-  position: absolute;
-  top: 15px;
-  left: 11px;
-  line-height: 1.2;
-  font-size: 0.875rem;
-  transition: all 150ms;
-
-  ${0}
-
-  ${0}
-
-  ${0}
-
-  ${0}
-
-
-  ${0}
-
-
-   ${0}
-
-   ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600')), props => props.theme.themeProp('opacity', 0.6, 0.5), props => props.theme.themeProp('background', `linear-gradient(0deg, ${props.theme.getColor('gray-900')} calc(50% + 1px), transparent 50%)`, `linear-gradient(0deg, ${props.theme.getColor('white')} calc(50% + 1px), transparent 50%)`), props => (props.hasPlaceholder || props.hasAdornments) && styled.css(_t16 || (_t16 = _`
-      ${0};
-    `), activeLabel), props => props.hasIcon && styled.css(_t17 || (_t17 = _`
-      left: 35px;
-    `)), props => props.warning && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500')), props => props.error && props.theme.themeProp('color', props.theme.getColor('red-500'), props.theme.getColor('red-500')));
-const TextInputFieldIcon = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t18 || (_t18 = _`
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 2.625rem;
-  display: flex;
-  padding: 0 10px;
-
-  svg {
-    width: 15px;
-    opacity: 0.6;
-    transition: opacity 250ms;
-  }
-`));
-const TextInput = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t19 || (_t19 = _`
-  position: relative;
-
-  ${0}
-
-  &:focus-within {
-    ${0} {
-      ${0};
-    }
-
-    ${0} {
-      svg {
-        opacity: 1;
-      }
-    }
-  }
-
-  ${0}:not(:placeholder-shown) + ${0} {
-    ${0};
-    ${0}
-
-    ${0}
-    ${0} 
-  } 
- 
-}
-`), props => props.disabled && styled.css(_t20 || (_t20 = _`
-      user-select: none;
-      opacity: 0.5;
-      cursor: not-allowed;
-      > * {
-        pointer-events: none;
-      }
-    `)), TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, props => props.error && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')), props => props.error && styled.css(_t21 || (_t21 = _`
-        color: ${0};
-      `), props.theme.getColor('red-500')), props => props.warning && styled.css(_t22 || (_t22 = _`
-        color: ${0};
-      `), props.theme.getColor('orange-500')));
-const Description = styled__default["default"].p.attrs(defaultTheme.applyDefaultTheme)(_t23 || (_t23 = _`
-  margin: 8px 0 0 0;
-  padding: 0 0.6875rem;
-  font-size: 0.75rem;
-  line-height: 1.333;
-
-  ${0};
-
-  ${0}
-
-  ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')), props => props.error && styled.css(_t24 || (_t24 = _`
-      ${0}
-    `), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))), props => props.warning && styled.css(_t25 || (_t25 = _`
-      ${0}
-    `), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500'))));
-
-exports.Adornment = Adornment;
-exports.Description = Description;
-exports.InputIconContainer = InputIconContainer;
-exports.TextInput = TextInput;
-exports.TextInputField = TextInputField;
-exports.TextInputFieldIcon = TextInputFieldIcon;
-exports.TextInputLabel = TextInputLabel;
-exports.TextInputWrapper = TextInputWrapper;

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

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

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

@@ -1,33 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var ActionButton = require('../ActionButton/ActionButton.js');
-var Button = require('../Button/Button.js');
-var Checkbox = require('../Checkbox/Checkbox.js');
-var CompactAutocompleteSelect = require('../CompactAutocompleteSelect/CompactAutocompleteSelect.js');
-var CompactStarRating = require('../CompactStarRating/CompactStarRating.js');
-var CompactTextInput = require('../CompactTextInput/CompactTextInput.js');
-var MultiSelect = require('../MultiSelect/MultiSelect.js');
-var Radio = require('../Radio/Radio.js');
-var TextArea = require('../TextArea/TextArea.js');
-var TextInput = require('../TextInput/TextInput.js');
-var Switch = require('../Switch/Switch.js');
-var MultiLevelCheckbox = require('../MultiLevelCheckbox/MultiLevelCheckbox.js');
-var MultiLevelCheckboxSelect = require('../MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js');
-
-
-
-exports.ActionButton = ActionButton["default"];
-exports.Button = Button["default"];
-exports.Checkbox = Checkbox["default"];
-exports.CompactAutocompleteSelect = CompactAutocompleteSelect["default"];
-exports.CompactStarRating = CompactStarRating["default"];
-exports.CompactTextInput = CompactTextInput["default"];
-exports.MultiSelect = MultiSelect["default"];
-exports.Radio = Radio["default"];
-exports.TextArea = TextArea["default"];
-exports.TextInput = TextInput["default"];
-exports.Switch = Switch["default"];
-exports.MultiLevelCheckbox = MultiLevelCheckbox["default"];
-exports.MultiLevelCheckboxSelect = MultiLevelCheckboxSelect["default"];

package/cjs/components/layout/InputGroup/InputGroup.js

@@ -1,26 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var index = require('../../../node_modules/react/index.js');
-var index$1 = require('../../../node_modules/prop-types/index.js');
-var InputGroup_styled = require('./InputGroup.styled.js');
-
-const _excluded = ["children"];
-const InputGroup = index["default"].forwardRef(function InputGroup(_ref, forwardedRef) {
-  let {
-      children
-    } = _ref,
-    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  return index["default"].createElement(InputGroup_styled.InputGroup, _rollupPluginBabelHelpers["extends"]({
-    ref: forwardedRef
-  }, props), children);
-});
-InputGroup.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: index$1["default"].node
-} : {};
-InputGroup.defaultProps = {};
-var InputGroup$1 = InputGroup;
-
-exports["default"] = InputGroup$1;

package/cjs/components/layout/InputGroup/InputGroup.styled.js

@@ -1,18 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-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;
-const InputGroup = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
-  margin: 8px 0;
-`));
-
-exports.InputGroup = InputGroup;

package/cjs/components/layout/InputGroup/layout/InputGroup/index.js

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

package/cjs/components/layout/SectionSeparator/SectionSeparator.js

@@ -1,29 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var index = require('../../../node_modules/react/index.js');
-var index$1 = require('../../../node_modules/prop-types/index.js');
-var SectionSeparator_styled = require('./SectionSeparator.styled.js');
-
-const _excluded = ["vertical"];
-const SectionSeparator = index["default"].forwardRef(function SectionSeparator(_ref, forwardedRef) {
-  let {
-      vertical
-    } = _ref,
-    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  return index["default"].createElement(SectionSeparator_styled.SectionSeparator, _rollupPluginBabelHelpers["extends"]({
-    vertical: vertical,
-    ref: forwardedRef
-  }, props));
-});
-SectionSeparator.propTypes = process.env.NODE_ENV !== "production" ? {
-  vertical: index$1["default"].bool
-} : {};
-SectionSeparator.defaultProps = {
-  vertical: false
-};
-var SectionSeparator$1 = SectionSeparator;
-
-exports["default"] = SectionSeparator$1;

package/cjs/components/layout/SectionSeparator/SectionSeparator.styled.js

@@ -1,21 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-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;
-const SectionSeparator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
- height: ${0};
- width: ${0};
-
- ${0}
-`), props => props.vertical ? '100%' : '1px', props => props.vertical ? '1px' : '100%', props => props.theme.themeProp('background-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-200')));
-
-exports.SectionSeparator = SectionSeparator;

package/cjs/components/layout/SectionSeparator/layout/SectionSeparator/index.js

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

package/cjs/components/layout/layout/index.js

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