@ntbjs/react-components 1.3.0-rc.8 → 2.0.0-rc.3

package/esm/components/data/Alert/Alert.js

@@ -0,0 +1,77 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React from '../../../node_modules/react/index.js';
+import PropTypes from '../../../node_modules/prop-types/index.js';
+import { Alert as Alert$2, AlertRender } from './Alert.styled.js';
+import { isEmpty } from 'lodash';
+
+const _excluded = ["type", "alertMessage", "align", "icon", "fontSize", "lineHeight", "lineClamp", "verticalPadding", "horizontalPadding", "width"];
+const Alert = React.forwardRef(function Alert(_ref, forwardedRef) {
+  let {
+      type,
+      alertMessage,
+      align,
+      icon,
+      fontSize,
+      lineHeight,
+      lineClamp,
+      verticalPadding,
+      horizontalPadding,
+      width
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  let isWarning = false;
+  let isError = false;
+  let isInfo = true;
+  if (!isEmpty(type)) {
+    if (type === 'warning') {
+      isWarning = true;
+    } else if (type === 'error') {
+      isError = true;
+    } else {
+      isInfo = true;
+    }
+  } else {
+    if (isWarning || isError) {
+      isInfo = false;
+    }
+  }
+  return React.createElement(Alert$2, _extends({
+    ref: forwardedRef,
+    alertMessage: alertMessage,
+    warning: isWarning,
+    error: isError,
+    info: isInfo,
+    align: align,
+    verticalPadding: verticalPadding,
+    horizontalPadding: horizontalPadding,
+    width: width
+  }, props), React.createElement(AlertRender, {
+    fontSize: fontSize,
+    lineHeight: lineHeight,
+    lineClamp: lineClamp
+  }, icon, " ", React.createElement("span", null, alertMessage)));
+});
+Alert.propTypes = process.env.NODE_ENV !== "production" ? {
+  type: PropTypes.oneOf(['warning', 'error', 'info']),
+  icon: PropTypes.element,
+  align: PropTypes.oneOf(['left', 'center']),
+  alertMessage: PropTypes.string,
+  fontSize: PropTypes.number,
+  lineHeight: PropTypes.number,
+  lineClamp: PropTypes.number,
+  verticalPadding: PropTypes.number,
+  horizontalPadding: PropTypes.number,
+  width: PropTypes.number
+} : {};
+Alert.defaultProps = {
+  warning: false,
+  error: false,
+  align: 'left',
+  alertMessage: 'Use subject to restrictions. Editorial use only, no commercial use without prior consent from rights holder.',
+  lineClamp: 0,
+  horizontalPadding: 30,
+  verticalPadding: 17
+};
+var Alert$1 = Alert;
+
+export { Alert$1 as default };

package/esm/components/data/Alert/Alert.styled.js

@@ -0,0 +1,63 @@
+import styled, { css } from 'styled-components';
+import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5,
+  _t6;
+const Alert = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
+  display: flex;
+  flex-direction: column;
+  padding: ${0};
+  width: ${0};
+  box-sizing: border-box;
+
+  ${0}
+
+  ${0}
+  
+  ${0}
+  
+  text-align: ${0};
+`), props => {
+  var _props$verticalPaddin, _props$horizontalPadd;
+  const verticalPadding = (_props$verticalPaddin = props.verticalPadding) !== null && _props$verticalPaddin !== void 0 ? _props$verticalPaddin : 17;
+  const horizontalPadding = (_props$horizontalPadd = props.horizontalPadding) !== null && _props$horizontalPadd !== void 0 ? _props$horizontalPadd : 30;
+  return `${verticalPadding}px ${horizontalPadding}px`;
+}, props => props.width ? `${props.width}px` : '100%', props => props.warning && css(_t2 || (_t2 = _`
+      ${0}
+    `), props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))), props => props.error && css(_t3 || (_t3 = _`
+      ${0}
+    `), props.theme.themeProp('background', '#7F1B1B', props.theme.getColor('red-200'))), props => props.info && css(_t4 || (_t4 = _`
+      background: transparent;
+    `)), props => props.align === 'center' ? 'center' : 'left');
+const AlertRender = styled.div.attrs(applyDefaultTheme)(_t5 || (_t5 = _`
+  display: flex;
+  align-items: center;
+  word-break: break-word;
+  ${0}
+  ${0}
+  ${0};
+
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+
+  span {
+    flex: 1;
+    padding-left: 5px;
+    ${0};
+  }
+`), props => props.lineHeight ? `line-height: ${props.lineHeight}px;` : null, props => props.fontSize ? `font-size: ${props.fontSize}px;` : null, props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')), props => props.lineClamp ? css(_t6 || (_t6 = _`
+            display: -webkit-box;
+            -webkit-line-clamp: ${0};
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          `), props.lineClamp) : null);
+
+export { Alert, AlertRender };

package/esm/components/data/Alert/data/Alert/index.js

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

package/esm/components/data/Badge/Badge.js

@@ -0,0 +1,89 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from '../../../node_modules/prop-types/index.js';
+import React from '../../../node_modules/react/index.js';
+import { Badge as Badge$2, BadgeChildrenContainer, BadgeLabel, BadgeIcon } from './Badge.styled.js';
+
+const _excluded = ["badgeContent", "badgeIcon", "children", "elevated", "fontSize", "fontWeight", "lineHeight", "active", "error", "warning", "backgroundColors", "colors", "verticalPadding", "horizontalPadding", "height", "minHeight", "width", "minWidth"];
+const Badge = React.forwardRef(function Badge(_ref, forwardedRef) {
+  let {
+      badgeContent,
+      badgeIcon,
+      children,
+      elevated,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      active,
+      error,
+      warning,
+      backgroundColors,
+      colors,
+      verticalPadding,
+      horizontalPadding,
+      height,
+      minHeight,
+      width,
+      minWidth
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  if (typeof badgeContent === 'number') {
+    badgeContent = Intl.NumberFormat('en', {
+      notation: 'compact'
+    }).format(badgeContent);
+  }
+  return React.createElement(Badge$2, _extends({
+    ref: forwardedRef,
+    elevated: elevated,
+    hasChildren: Boolean(children)
+  }, props), children && React.createElement(BadgeChildrenContainer, null, children), (badgeIcon || badgeContent) && React.createElement(BadgeLabel, {
+    backgroundColors: backgroundColors,
+    colors: colors,
+    elevated: elevated,
+    fontSize: fontSize,
+    fontWeight: fontWeight,
+    lineHeight: lineHeight,
+    active: active,
+    error: error,
+    warning: warning,
+    verticalPadding: verticalPadding,
+    horizontalPadding: horizontalPadding,
+    height: height,
+    minHeight: minHeight,
+    width: width,
+    minWidth: minWidth
+  }, badgeIcon && React.createElement(BadgeIcon, {
+    useGutter: !!badgeContent
+  }, badgeIcon), badgeContent));
+});
+Badge.propTypes = process.env.NODE_ENV !== "production" ? {
+  badgeIcon: PropTypes.node,
+  badgeContent: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.func, PropTypes.element]),
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  elevated: PropTypes.bool,
+  active: PropTypes.bool,
+  error: PropTypes.bool,
+  warning: PropTypes.bool,
+  fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  fontWeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  lineHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  colors: PropTypes.arrayOf(PropTypes.string),
+  backgroundColors: PropTypes.arrayOf(PropTypes.string),
+  verticalPadding: PropTypes.number,
+  horizontalPadding: PropTypes.number,
+  height: PropTypes.number,
+  minHeight: PropTypes.number,
+  width: PropTypes.number,
+  minWidth: PropTypes.number
+} : {};
+Badge.defaultProps = {
+  elevated: false,
+  active: false,
+  error: false,
+  warning: false,
+  badgeIcon: null,
+  fontWeight: 'normal',
+  lineHeight: 'normal'
+};
+var Badge$1 = Badge;
+
+export { Badge$1 as default };

package/esm/components/data/Badge/Badge.styled.js

@@ -0,0 +1,145 @@
+import styled, { css } from 'styled-components';
+import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5,
+  _t6,
+  _t7,
+  _t8;
+const Badge = styled.span.attrs(applyDefaultTheme)(_t || (_t = _`
+  align-content: center;
+  display: ${0};
+  font-family: ${0};
+  font-size: 1rem;
+  font-weight: 500;
+  min-height: 24px;
+  position: relative;
+  width: ${0};
+`), props => props.elevated || !props.hasChildren ? 'inline-flex' : 'flex', props => props.theme.primaryFontFamily, props => props.elevated ? 'fit-content' : 'initial');
+const BadgeChildrenContainer = styled.span.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
+  align-self: center;
+  height: fit-content;
+  margin-right: 8px;
+`));
+const BadgeLabel = styled.span.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
+  border-radius: ${0};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+
+  font-size: ${0};
+  font-weight: ${0};
+  line-height: ${0};
+  height: ${0};
+  letter-spacing: 0.32px;
+  margin-left: ${0};
+  position: ${0};
+  right: 0;
+  transform: ${0};
+
+  ${0}
+
+  ${0}
+
+  ${0}
+      
+
+  ${0}
+
+  ${0}
+
+    ${0}
+`), props => props.elevated ? '12px' : '14px', props => {
+  if (props.fontSize) {
+    return `${props.fontSize}px`;
+  } else {
+    return props.elevated ? '0.625rem' : '0.750rem';
+  }
+}, props => props.fontWeight ? props.fontWeight : 'normal', props => props.lineHeight ? `${props.lineHeight}px` : 'normal', props => props.height ? `${props.height}px` : 'fit-content', props => props.elevated ? '15px' : 'auto', props => props.elevated ? 'absolute' : 'initial', props => props.elevated ? 'translate(33%, -8px)' : 'initial', props => props.width ? css(_t4 || (_t4 = _`
+          width: ${0}px;
+        `), props.width) : null, props => props.minWidth ? css(_t5 || (_t5 = _`
+          min-width: ${0}px;
+        `), props.minWidth) : null, props => props.minHeight ? css(_t6 || (_t6 = _`
+          min-height: ${0}px;
+        `), props.minHeight) : null, props => {
+  const verticalPadding = props.verticalPadding ? `${props.verticalPadding}px` : props.elevated ? '4px' : '6px';
+  const horizontalPadding = props.horizontalPadding ? `${props.horizontalPadding}px` : props.elevated ? '7px' : '10px';
+  return css(_t7 || (_t7 = _`
+      padding: ${0} ${0};
+    `), verticalPadding, horizontalPadding);
+}, props => props.theme.themeProp('background', () => {
+  var _props$backgroundColo, _props$backgroundColo2;
+  const active = props.active;
+  const error = props.error;
+  const warning = props.warning;
+  const defaultBgColor = (_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');
+  switch (true) {
+    case !error && !warning && !active:
+      return defaultBgColor;
+    case !error && !warning && active:
+      return props.theme.getColor('gray-700');
+    case error && active:
+      return props.theme.getColor('red-500');
+    case error:
+      return props.theme.getColor('red-200');
+    case warning && active:
+      return props.theme.getColor('signal-yellow-500');
+    case warning:
+      return props.theme.getColor('signal-yellow-400');
+    default:
+      return props.theme.getColor('gray-600');
+  }
+}, () => {
+  var _props$backgroundColo3, _props$backgroundColo4;
+  const active = props.active;
+  const error = props.error;
+  const warning = props.warning;
+  const defaultBgColor = (_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');
+  switch (true) {
+    case !error && !warning && !active:
+      return defaultBgColor;
+    case !error && !warning && active:
+      return props.theme.getColor('white');
+    case error && active:
+      return props.theme.getColor('red-500');
+    case error:
+      return props.theme.getColor('red-200');
+    case warning && active:
+      return props.theme.getColor('signal-yellow-500');
+    case warning:
+      return props.theme.getColor('signal-yellow-400');
+    default:
+      return props.theme.getColor('gray-200');
+  }
+}), props => props.theme.themeProp('color', () => {
+  var _props$colors$, _props$colors;
+  const defaultColor = (_props$colors$ = props === null || props === void 0 || (_props$colors = props.colors) === null || _props$colors === void 0 ? void 0 : _props$colors[0]) !== null && _props$colors$ !== void 0 ? _props$colors$ : props.theme.getColor('white');
+  if (props.warning && !props.error || props.error && !props.active) {
+    return props.theme.getColor('gray-900');
+  } else {
+    return defaultColor;
+  }
+}, () => {
+  var _props$colors$2, _props$colors2;
+  const defaultColor = (_props$colors$2 = props === null || props === void 0 || (_props$colors2 = props.colors) === null || _props$colors2 === void 0 ? void 0 : _props$colors2[1]) !== null && _props$colors$2 !== void 0 ? _props$colors$2 : props.theme.getColor('gray-900');
+  if (props.error && props.active) {
+    return props.theme.getColor('white');
+  } else {
+    return defaultColor;
+  }
+}));
+const BadgeIcon = styled.span.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
+  display: flex;
+  align-items: center;
+  margin-right: ${0};
+  svg {
+    height: 12px;
+  }
+`), props => props.useGutter ? '4px' : 0);
+
+export { Badge, BadgeChildrenContainer, BadgeIcon, BadgeLabel };

package/esm/components/data/Badge/data/Badge/index.js

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

package/esm/components/data/Popover/Popover.js

@@ -0,0 +1,94 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { isBoolean } from 'lodash';
+import PropTypes from '../../../node_modules/prop-types/index.js';
+import React from '../../../node_modules/react/index.js';
+import { Popover as Popover$2 } from './Popover.styled.js';
+import maxSize from 'popper-max-size-modifier';
+import { r as react } from '../../../_virtual/index.js';
+
+const _excluded = ["content", "interactive", "placement", "duration", "trigger", "offset", "arrow", "visible", "contextMenu", "contextMenuSublevel", "children", "modifiers", "maxWidth"];
+const Popover = React.forwardRef(function Popover(_ref, ref) {
+  let {
+      content = 'Tooltip',
+      interactive = true,
+      placement = 'bottom-end',
+      duration = 350,
+      trigger = 'click focus',
+      offset = [0, 8],
+      arrow = true,
+      visible = undefined,
+      contextMenu = false,
+      contextMenuSublevel = false,
+      children,
+      modifiers = [],
+      maxWidth = 'none'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const errorOffset = react.exports.useMemo(() => arrow ? 15 : 0, [arrow]);
+  const isControlled = react.exports.useMemo(() => isBoolean(visible), [visible]);
+  const handleContextMenuItemClick = () => {
+    document.querySelectorAll('.context-menu-item:not(.opens-sublevel)').forEach(item => item.addEventListener('click', () => {
+      document.querySelectorAll('[data-tippy-root]').forEach(node => {
+        if (node._tippy) {
+          node._tippy.hide();
+        }
+      });
+    }));
+  };
+  return React.createElement("div", null, React.createElement(Popover$2, _extends({
+    ref: ref,
+    content: content,
+    interactive: interactive,
+    placement: contextMenuSublevel ? 'right-start' : placement,
+    duration: duration,
+    animation: 'shift-away-subtle',
+    trigger: isControlled ? undefined : contextMenuSublevel ? 'mouseenter click focus' : trigger,
+    offset: [offset[0], offset[1] + errorOffset],
+    arrow: contextMenu ? false : arrow,
+    visible: visible,
+    popperOptions: {
+      modifiers: [_objectSpread2(_objectSpread2({}, maxSize), {}, {
+        options: {
+          boundary: 'viewport',
+          rootBoundary: 'viewport',
+          padding: 10
+        }
+      }), {
+        name: 'applyMaxSize',
+        enabled: true,
+        phase: 'beforeWrite',
+        requires: ['maxSize'],
+        fn({
+          state
+        }) {
+          const {
+            height
+          } = state.modifiersData.maxSize;
+          state.styles.popper = _objectSpread2(_objectSpread2({}, state.styles.popper), {}, {
+            maxHeight: `${height}px`
+          });
+        }
+      }, ...modifiers]
+    },
+    onShown: contextMenu ? handleContextMenuItemClick : undefined,
+    maxWidth: maxWidth
+  }, props), children));
+});
+Popover.propTypes = process.env.NODE_ENV !== "production" ? {
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+  interactive: PropTypes.bool,
+  placement: PropTypes.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: PropTypes.number,
+  trigger: PropTypes.string,
+  offset: PropTypes.arrayOf(PropTypes.number),
+  arrow: PropTypes.bool,
+  visible: PropTypes.bool,
+  modifiers: PropTypes.array,
+  maxWidth: PropTypes.string,
+  contextMenu: PropTypes.bool,
+  contextMenuSublevel: PropTypes.bool,
+  children: PropTypes.node.isRequired
+} : {};
+var Popover$1 = Popover;
+
+export { Popover$1 as default };

package/esm/components/data/Popover/Popover.styled.js

@@ -0,0 +1,150 @@
+import styled, { css } from 'styled-components';
+import { rgba } from 'polished';
+import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
+import TippyTooltip from '@tippyjs/react';
+import '../../../node_modules/tippy.js/dist/tippy.css.js';
+import '../../../node_modules/tippy.js/animations/shift-away-subtle.css.js';
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4;
+const Popover = styled(TippyTooltip).attrs(applyDefaultTheme)(_t || (_t = _`
+  font-family: ${0};
+  font-size: 1rem;
+  font-weight: 400;
+  color: inherit;
+  border-radius: 0;
+  line-height: inherit;
+  max-height: inherit;
+
+  ${0}
+
+  ${0}
+
+  ${0}
+
+  ${0}
+
+  ${0}
+
+  ${0}
+
+  .tippy-content {
+    padding: 0;
+    max-height: inherit;
+
+    > div {
+      max-height: inherit;
+    }
+  }
+
+  .tippy-arrow {
+    ${0}
+  }
+
+  && > .tippy-arrow::before {
+    position: absolute;
+    border-color: transparent;
+    border-style: solid;
+  }
+
+  & > .tippy-arrow::after {
+    content: '';
+    position: absolute;
+    border-color: transparent;
+    border-style: solid;
+  }
+
+  &[data-placement^='top'] {
+    & > .tippy-arrow:before {
+      bottom: -16px;
+      left: -5px;
+      border-width: 15px 13px 0;
+      ${0}
+    }
+
+    & > .tippy-arrow:after {
+      bottom: -15px;
+      left: -5px;
+      border-width: 15px 13px 0;
+      border-top-color: initial;
+      transform-origin: center top;
+    }
+  }
+
+  &[data-placement^='right'] {
+    & > .tippy-arrow:before {
+      bottom: -5px;
+      left: -16px;
+      border-width: 13px 15px 13px 0;
+      ${0}
+    }
+
+    & > .tippy-arrow:after {
+      bottom: -5px;
+      left: -15px;
+      border-width: 13px 15px 13px 0;
+      border-right-color: initial;
+      transform-origin: center top;
+    }
+  }
+
+  &[data-placement^='bottom'] {
+    & > .tippy-arrow:before {
+      top: -16px;
+      left: -5px;
+      border-width: 0 13px 15px 13px;
+      ${0}
+    }
+
+    & > .tippy-arrow:after {
+      top: -14.5px;
+      left: -5px;
+      border-width: 0 13px 15px 13px;
+      border-bottom-color: initial;
+      transform-origin: center top;
+    }
+  }
+
+  &[data-placement^='left'] {
+    & > .tippy-arrow::before {
+      bottom: -5px;
+      right: -16px;
+      border-width: 13px 0 13px 15px;
+      ${0}
+    }
+
+    & > .tippy-arrow::after {
+      bottom: -5px;
+      right: -15px;
+      border-width: 13px 0 13px 15px;
+      border-left-color: initial;
+      transform-origin: center top;
+    }
+  }
+`), props => props.theme.primaryFontFamily, props => props.maxWidth && css(_t2 || (_t2 = _`
+      max-width: ${0};
+    `), props.maxWidth), props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white')), props => props.theme.themeProp('box-shadow', `0px 1px 6px -3px ${rgba(props.theme.getColor('black'), 0.7)}`, `0 1px 6px -4px ${props.theme.getColor('black')}`), props => props.theme.themeProp('border', `1px solid ${props.theme.getColor('gray-800')}`, `1px solid ${props.theme.getColor('gray-300')}`), props => props.contextMenu && css(_t3 || (_t3 = _`
+      border-radius: 4px;
+
+      ${0}
+
+      ${0}
+    `), props => props.theme.themeProp('border', 'none', 'none'), props => props.theme.themeProp('box-shadow', `none`, `0 1px 6px ${rgba(props.theme.getColor('gray-900'), 0.3)}`)), props => props.contextMenuSublevel && css(_t4 || (_t4 = _`
+      &[data-placement^='right-start'],
+      &[data-placement^='left-start'] {
+        margin-top: -4px;
+      }
+
+      &[data-placement^='left'] {
+        margin-right: -6px;
+      }
+
+      &[data-placement^='right'] {
+        margin-left: -6px;
+      }
+    `)), props => props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('white'), 1), props => props.theme.themeProp('border-top-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1), props => props.theme.themeProp('border-right-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1), props => props.theme.themeProp('border-bottom-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1), props => props.theme.themeProp('border-left-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1));
+
+export { Popover };

package/esm/components/data/Popover/data/Popover/index.js

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

package/esm/components/data/Tab/Tab.js

@@ -0,0 +1,27 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from '../../../node_modules/prop-types/index.js';
+import React from '../../../node_modules/react/index.js';
+import { Tab as Tab$2 } from './Tab.styled.js';
+
+const _excluded = ["children", "hidden"];
+const Tab = React.forwardRef(function Tab(_ref, forwardedRef) {
+  let {
+      children,
+      hidden
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  if (hidden) return null;
+  return React.createElement(Tab$2, _extends({
+    ref: forwardedRef
+  }, props), children);
+});
+Tab.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: PropTypes.any,
+  hidden: PropTypes.bool
+} : {};
+Tab.defaultProps = {
+  hidden: false
+};
+var Tab$1 = Tab;
+
+export { Tab$1 as default };

package/esm/components/data/Tab/Tab.styled.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
+
+let _ = t => t,
+  _t;
+const Tab = styled.p.attrs(applyDefaultTheme)(_t || (_t = _`
+  font-family: ${0};
+  font-size: 1rem;
+  font-weight: 500;
+  border-bottom: 1px solid;
+  min-height: 35px;
+`), props => props.theme.primaryFontFamily);
+
+export { Tab };

package/esm/components/data/Tab/data/Tab/index.js

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