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

package/cjs/components/data/Tabs/Tabs.js

@@ -1,91 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var lodash = require('lodash');
-var index$2 = require('../../../node_modules/prop-types/index.js');
-var index = require('../../../node_modules/react/index.js');
-var Tabs_styled = require('./Tabs.styled.js');
-var index$1 = require('../../../_virtual/index.js');
-var Tab = require('../Tab/Tab.js');
-
-const _excluded = ["children", "defaultMinHeight", "customPadding"];
-const Tabs = index["default"].forwardRef(function Tabs(_ref, forwardedRef) {
-  let {
-      children,
-      defaultMinHeight,
-      customPadding
-    } = _ref,
-    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  const [activeTab, setActiveTab] = index$1.react.exports.useState(0);
-  const contentRef = index$1.react.exports.useRef(null);
-  const tabs = index$1.react.exports.useMemo(() => {
-    const tabs = [];
-    function extractChildren(children) {
-      index$1.react.exports.Children.forEach(children, (child, index) => {
-        var _child$props2;
-        if (lodash.isNil(child)) {
-          return null;
-        }
-        if (child.type === index$1.react.exports.Fragment) {
-          var _child$props;
-          extractChildren((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children);
-        }
-        if ((_child$props2 = child.props) !== null && _child$props2 !== void 0 && _child$props2.hidden) {
-          return null;
-        }
-        if (child.type === Tab["default"]) {
-          var _child$props3, _child$props4;
-          tabs.push({
-            key: index,
-            trigger: (_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.trigger,
-            content: (_child$props4 = child.props) === null || _child$props4 === void 0 ? void 0 : _child$props4.children
-          });
-        }
-      });
-    }
-    extractChildren(children);
-    if (!tabs.some(tab => (tab === null || tab === void 0 ? void 0 : tab.key) === activeTab)) {
-      var _tabs$;
-      setActiveTab((_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.key);
-    }
-    return tabs;
-  }, [children]);
-  return index["default"].createElement(Tabs_styled.Tabs, _rollupPluginBabelHelpers["extends"]({
-    ref: forwardedRef
-  }, props, {
-    role: "tablist"
-  }), index["default"].createElement(Tabs_styled.TabHeaders, {
-    customPadding: customPadding
-  }, tabs.map(tab => index["default"].createElement(Tabs_styled.TabHeader, {
-    key: tab.key,
-    hidden: tab.hidden,
-    active: tab.key === activeTab,
-    onClick: () => setActiveTab(tab.key),
-    role: "tab"
-  }, tab.trigger))), index["default"].createElement(Tabs_styled.TabHeaderBorder, {
-    customPadding: customPadding
-  }), index["default"].createElement(Tabs_styled.TabContent, null, tabs.map(tab => index["default"].createElement("div", {
-    ref: tab.key === (activeTab === null || activeTab === void 0 ? void 0 : activeTab.key) ? contentRef : null,
-    key: tab.key,
-    role: "tabpanel",
-    hidden: tab.key !== activeTab,
-    style: {
-      minHeight: !lodash.isEmpty(defaultMinHeight) ? defaultMinHeight : ''
-    }
-  }, tab.content))));
-});
-Tabs.defaultProps = {
-  defaultMinHeight: '',
-  customPadding: 0
-};
-Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: index$2["default"].oneOfType([index$2["default"].array, index$2["default"].object]),
-  backgroundColor: index$2["default"].string,
-  defaultMinHeight: index$2["default"].string,
-  customPadding: index$2["default"].string
-} : {};
-var Tabs$1 = Tabs;
-
-exports["default"] = Tabs$1;

package/cjs/components/data/Tabs/Tabs.styled.js

@@ -1,97 +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;
-const Tabs = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
-  display: block;
-  position: relative;
-  ${0};
-`), props => props.backgroundColor && styled.css(_t2 || (_t2 = _`
-      background-color: ${0};
-    `), props.backgroundColor));
-const TabHeaders = styled__default["default"].ul.attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
-  display: flex;
-  overflow-x: auto;
-  overflow-y: hidden;
-  white-space: nowrap;
-  gap: 24px;
-
-  margin: 0;
-  ${0};
-  ${0};
-`), props => !props.customPadding && styled.css(_t4 || (_t4 = _`
-      padding: 0;
-    `)), props => props.customPadding && styled.css(_t5 || (_t5 = _`
-      padding: 0 ${0};
-    `), props.customPadding));
-const TabHeader = styled__default["default"].li.attrs(defaultTheme.applyDefaultTheme)(_t6 || (_t6 = _`
-  font-family: ${0};
-  text-transform: uppercase;
-  font-weight: 600;
-  font-size: 0.875rem;
-  display: flex;
-  padding-bottom: 8px;
-  letter-spacing: 0.6px;
-  cursor: pointer;
-  border-bottom: 1px solid;
-  border-color: transparent;
-  margin-bottom: 1px;
-
-  ${0};
-  &&:hover:not(:focus) {
-    ${0};
-  }
-`), props => props.theme.secondaryFontFamily, props => props.active && styled.css(_t7 || (_t7 = _`
-      ${0}
-    `), props => props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-700'))), props => props.theme.themeProp('border-color', () => {
-  if (props.active) {
-    return props.theme.getColor('gray-400');
-  } else {
-    return props.theme.getColor('gray-400');
-  }
-}, () => {
-  if (props.active) {
-    return props.theme.getColor('gray-700');
-  } else {
-    return props.theme.getColor('gray-700');
-  }
-}));
-const TabContent = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
-  display: block;
-`));
-const TabHeaderBorder = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t9 || (_t9 = _`
-  border-top: 1px solid;
-
-  ${0};
-  ${0};
-  ${0};
-`), props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), '#F0F2F5'), props => !props.customPadding && styled.css(_t10 || (_t10 = _`
-      margin: -2px 0;
-    `)), props => props.customPadding && styled.css(_t11 || (_t11 = _`
-      margin: -2px ${0};
-    `), props.customPadding));
-
-exports.TabContent = TabContent;
-exports.TabHeader = TabHeader;
-exports.TabHeaderBorder = TabHeaderBorder;
-exports.TabHeaders = TabHeaders;
-exports.Tabs = Tabs;

package/cjs/components/data/Tabs/data/Tabs/index.js

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

package/cjs/components/data/Tooltip/Tooltip.js

@@ -1,50 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var index$1 = require('../../../node_modules/prop-types/index.js');
-var index = require('../../../node_modules/react/index.js');
-var Tooltip_styled = require('./Tooltip.styled.js');
-
-const _excluded = ["content", "interactive", "placement", "duration", "trigger", "visible", "children"];
-const Tooltip = index["default"].forwardRef(function Tooltip(_ref, ref) {
-  let {
-      content,
-      interactive,
-      placement,
-      duration,
-      trigger,
-      visible,
-      children
-    } = _ref,
-    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  return index["default"].createElement("div", null, index["default"].createElement(Tooltip_styled.Tooltip, _rollupPluginBabelHelpers["extends"]({
-    ref: ref,
-    content: content,
-    interactive: interactive,
-    placement: placement,
-    duration: duration,
-    trigger: trigger,
-    visible: visible,
-    animation: 'shift-away-subtle'
-  }, props), children));
-});
-Tooltip.defaultProps = {
-  content: 'Tooltip',
-  interactive: false,
-  placement: 'top',
-  duration: 350
-};
-Tooltip.propTypes = process.env.NODE_ENV !== "production" ? {
-  content: index$1["default"].oneOfType([index$1["default"].string, index$1["default"].element]).isRequired,
-  interactive: index$1["default"].bool,
-  placement: index$1["default"].oneOf(['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'auto', 'auto-start', 'auto-end']),
-  duration: index$1["default"].number,
-  trigger: index$1["default"].oneOf(['mouseenter', 'mouseenter focus', 'click', 'focusin', 'mouseenter click', '']),
-  visible: index$1["default"].bool,
-  children: index$1["default"].node
-} : {};
-var Tooltip$1 = Tooltip;
-
-exports["default"] = Tooltip$1;

package/cjs/components/data/Tooltip/Tooltip.styled.js

@@ -1,38 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-var defaultTheme = require('../../../utils/defaultTheme.js');
-var TippyTooltip = require('@tippyjs/react');
-require('../../../node_modules/tippy.js/animations/shift-away-subtle.css.js');
-require('../../../node_modules/tippy.js/dist/tippy.css.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var TippyTooltip__default = /*#__PURE__*/_interopDefaultLegacy(TippyTooltip);
-
-let _ = t => t,
-  _t;
-const Tooltip = styled__default["default"](TippyTooltip__default["default"]).attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
-  font-family: ${0};
-  font-size: 1rem;
-  font-weight: 400;
-  background: ${0};
-  border-radius: 3px;
-  pointer-events: default !important;
-  .tippy-content {
-    padding: 9px 12px;
-  }
-
-  .tippy-arrow {
-    color: ${0};
-  }
-
-  a {
-    color: inherit;
-  }
-`), props => props.theme.primaryFontFamily, props => props.theme.getColor('gray-700'), props => props.theme.getColor('gray-700'));
-
-exports.Tooltip = Tooltip;

package/cjs/components/data/Tooltip/data/Tooltip/index.js

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

package/cjs/components/data/VerificationStatusIcon/VerificationStatusIcon.js

@@ -1,42 +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 VerificationStatusIcon_styled = require('./VerificationStatusIcon.styled.js');
-var verification = require('../../../icons/verification.svg.js');
-
-const _excluded = ["status", "iconHeight", "background"];
-const VerificationStatusIcon = index["default"].forwardRef(function VerificationStatusIcon(_ref, forwardedRef) {
-  let {
-      status,
-      iconHeight,
-      background
-    } = _ref,
-    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  return index["default"].createElement(VerificationStatusIcon_styled.VerificationIconWrapper, {
-    background: background
-  }, index["default"].createElement(VerificationStatusIcon_styled.VerificationStatusIcon, _rollupPluginBabelHelpers["extends"]({
-    iconHeight: iconHeight,
-    background: background,
-    ref: forwardedRef
-  }, props), index["default"].createElement(verification.ReactComponent, null), index["default"].createElement(VerificationStatusIcon_styled.VerificationStatusColor, {
-    iconHeight: iconHeight,
-    status: status,
-    background: background
-  })));
-});
-VerificationStatusIcon.propTypes = process.env.NODE_ENV !== "production" ? {
-  status: index$1["default"].oneOf(['verified', 'pending', 'rejected', 'mixed']).isRequired,
-  iconHeight: index$1["default"].number,
-  background: index$1["default"].bool
-} : {};
-VerificationStatusIcon.defaultProps = {
-  iconHeight: 15,
-  background: false
-};
-var VerificationStatusIcon$1 = VerificationStatusIcon;
-
-exports["default"] = VerificationStatusIcon$1;

package/cjs/components/data/VerificationStatusIcon/VerificationStatusIcon.styled.js

@@ -1,79 +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;
-const VerificationIconWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
-  ${0};
-`), props => props.background && styled.css(_t2 || (_t2 = _`
-    background-color: #000 !important;
-    width: fit-content;
-    padding: 6px 14px 6px 9px;
-    border-radius: 15px;
-}
-    `)));
-const VerificationStatusIcon = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
-  display: flex;
-  position: relative;
-  font: normal normal normal 12px/16px Roboto;
-  ${0};
-
-  ${0};
-
-  svg {
-    height: ${0}px;
-  }
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700')), props => props.background && props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-100')), props => {
-  var _props$iconHeight;
-  return (_props$iconHeight = props.iconHeight) !== null && _props$iconHeight !== void 0 ? _props$iconHeight : 15;
-});
-const VerificationStatusColor = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t4 || (_t4 = _`
-  position: absolute;
-  bottom: 0;
-  left: ${0}px;
-  width: ${0}px;
-  height: ${0}px;
-  border-radius: 50%;
-  ${0};
-`), props => {
-  var _props$iconHeight2;
-  return ((_props$iconHeight2 = props.iconHeight) !== null && _props$iconHeight2 !== void 0 ? _props$iconHeight2 : 15) * 2 / 3;
-}, props => {
-  var _props$iconHeight3;
-  return ((_props$iconHeight3 = props.iconHeight) !== null && _props$iconHeight3 !== void 0 ? _props$iconHeight3 : 15) * 2 / 3;
-}, props => {
-  var _props$iconHeight4;
-  return ((_props$iconHeight4 = props.iconHeight) !== null && _props$iconHeight4 !== void 0 ? _props$iconHeight4 : 15) * 2 / 3;
-}, props => {
-  let darkThemeColor = props.theme.getColor('gray-100');
-  let lightThemeColor = props.theme.getColor('gray-500');
-  if (props.status === 'verified') {
-    darkThemeColor = props.theme.getColor('emerald-500');
-    lightThemeColor = props.theme.getColor('emerald-500');
-  } else if (props.status === 'pending') {
-    darkThemeColor = props.theme.getColor('signal-yellow-500');
-    lightThemeColor = props.theme.getColor('signal-yellow-500');
-  } else if (props.status === 'rejected') {
-    darkThemeColor = props.theme.getColor('red-600');
-    lightThemeColor = props.theme.getColor('red-600');
-  } else if (props.status === 'mixed') {
-    darkThemeColor = '#008CDB';
-    lightThemeColor = '#008CDB';
-  }
-  return props.theme.themeProp('background-color', darkThemeColor, lightThemeColor);
-});
-
-exports.VerificationIconWrapper = VerificationIconWrapper;
-exports.VerificationStatusColor = VerificationStatusColor;
-exports.VerificationStatusIcon = VerificationStatusIcon;

package/cjs/components/data/data/index.js

@@ -1,21 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Alert = require('../Alert/Alert.js');
-var Badge = require('../Badge/Badge.js');
-var Popover = require('../Popover/Popover.js');
-var Tab = require('../Tab/Tab.js');
-var Tabs = require('../Tabs/Tabs.js');
-var Tooltip = require('../Tooltip/Tooltip.js');
-var VerificationStatusIcon = require('../VerificationStatusIcon/VerificationStatusIcon.js');
-
-
-
-exports.Alert = Alert["default"];
-exports.Badge = Badge["default"];
-exports.Popover = Popover["default"];
-exports.Tab = Tab["default"];
-exports.Tabs = Tabs["default"];
-exports.Tooltip = Tooltip["default"];
-exports.VerificationStatusIcon = VerificationStatusIcon["default"];

package/cjs/components/inputs/ActionButton/ActionButton.js

@@ -1,42 +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 ActionButton_styled = require('./ActionButton.styled.js');
-
-const _excluded = ["icon", "disabled", "active", "onClick", "actionWidthHeight"];
-const ActionButton = index["default"].forwardRef(function ActionButton(_ref, forwardedRef) {
-  let {
-      icon,
-      disabled,
-      active,
-      onClick,
-      actionWidthHeight
-    } = _ref,
-    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  return index["default"].createElement(ActionButton_styled.ActionButton, _rollupPluginBabelHelpers["extends"]({
-    ref: forwardedRef,
-    disabled: disabled,
-    active: active,
-    onClick: onClick,
-    actionWidthHeight: actionWidthHeight
-  }, props), icon);
-});
-ActionButton.propTypes = process.env.NODE_ENV !== "production" ? {
-  icon: index$1["default"].element.isRequired,
-  disabled: index$1["default"].bool,
-  active: index$1["default"].bool,
-  onClick: index$1["default"].func,
-  backgroundColors: index$1["default"].arrayOf(index$1["default"].string),
-  actionWidthHeight: index$1["default"].array
-} : {};
-ActionButton.defaultProps = {
-  onClick: () => {},
-  actionWidthHeight: [40, 40]
-};
-var ActionButton$1 = ActionButton;
-
-exports["default"] = ActionButton$1;

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

@@ -1,66 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-var polished = require('polished');
-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;
-const ActionButton = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  width: ${0};
-  height: ${0};
-  border: 0;
-  color: inherit;
-  background-color: transparent;
-  ${0}
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 0 0;
-  transition: background-size 250ms ease;
-  cursor: pointer;
-
-  ${0}
-
-  ${0}
-
-  &:disabled {
-    opacity: 0.5;
-    color: inherit;
-    cursor: not-allowed;
-  }
-
-  svg {
-    width: 100%;
-    max-width: ${0};
-    max-height: ${0};
-
-    pointer-events: none;
-    transition: color 250ms;
-  }
-`), props => `${props.actionWidthHeight[0]}px`, props => `${props.actionWidthHeight[1]}px`, props => {
-  var _props$backgroundColo, _props$backgroundColo2, _props$backgroundColo3, _props$backgroundColo4;
-  const darkThemeBgColor = (_props$backgroundColo = props === null || props === void 0 || (_props$backgroundColo2 = props.backgroundColors) === null || _props$backgroundColo2 === void 0 ? void 0 : _props$backgroundColo2[0]) !== null && _props$backgroundColo !== void 0 ? _props$backgroundColo : props.theme.getColor('gray-600');
-  const lightThemeBgColor = (_props$backgroundColo3 = props === null || props === void 0 || (_props$backgroundColo4 = props.backgroundColors) === null || _props$backgroundColo4 === void 0 ? void 0 : _props$backgroundColo4[1]) !== null && _props$backgroundColo3 !== void 0 ? _props$backgroundColo3 : props.theme.getColor('gray-200');
-  return props.theme.themeProp('background-image', `radial-gradient(circle at center, ${darkThemeBgColor} 50%, transparent 50%)`, `radial-gradient(circle at center, ${lightThemeBgColor} 50%, transparent 50%)`);
-}, props => styled.css(_t2 || (_t2 = _`
-    ${0}:not(:disabled) {
-      background-size: 200% 200%;
-
-      svg {
-        ${0};
-      }
-    }
-  `), props.active ? '' : ':hover', props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'))), props => props.useShadow ? props.theme.themeProp('box-shadow', `0px 3px 6px ${polished.rgba(props.theme.getColor('black'), 0.7)}`, `0px 3px 6px ${props.theme.getColor('black')}`) : null, props => `${props.actionWidthHeight[0] - 15}px`, props => `${props.actionWidthHeight[1] - 15}px`);
-
-exports.ActionButton = ActionButton;

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

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