@ntbjs/react-components 2.0.0-rc.13 → 2.0.0-rc.26

package/build/Popover-c4be47ea.js

@@ -0,0 +1,241 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4b342fad.js');
+var lodash = require('lodash');
+var defaultTheme = require('./defaultTheme-d9a7342e.js');
+var React = require('react');
+var styled = require('styled-components');
+var polished = require('polished');
+var TippyTooltip = require('@tippyjs/react');
+require('./shift-away-subtle-158617af.js');
+var maxSize = require('popper-max-size-modifier');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var TippyTooltip__default = /*#__PURE__*/_interopDefaultLegacy(TippyTooltip);
+var maxSize__default = /*#__PURE__*/_interopDefaultLegacy(maxSize);
+
+const Popover$1 = styled__default["default"](TippyTooltip__default["default"]).attrs(defaultTheme.applyDefaultTheme)`
+  font-family: ${props => props.theme.primaryFontFamily};
+  font-size: 1rem;
+  font-weight: 400;
+  color: inherit;
+  border-radius: 0;
+  line-height: inherit;
+  max-height: inherit;
+
+  ${props => props.maxWidth && styled.css`
+      max-width: ${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 ${polished.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 && styled.css`
+      border-radius: 4px;
+
+      ${props => props.theme.themeProp('border', 'none', 'none')}
+
+      ${props => props.theme.themeProp('box-shadow', `none`, `0 1px 6px ${polished.rgba(props.theme.getColor('gray-900'), 0.3)}`)}
+    `}
+
+  ${props => props.contextMenuSublevel && styled.css`
+      &[data-placement^='right-start'],
+      &[data-placement^='left-start'] {
+        margin-top: -4px;
+      }
+
+      &[data-placement^='left'] {
+        margin-right: -6px;
+      }
+
+      &[data-placement^='right'] {
+        margin-left: -6px;
+      }
+    `}
+
+  .tippy-content {
+    padding: 0;
+    max-height: inherit;
+
+    > div {
+      max-height: inherit;
+    }
+  }
+
+  .tippy-arrow {
+    ${props => props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('white'), 1)}
+  }
+
+  && > .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;
+      ${props => props.theme.themeProp('border-top-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1)}
+    }
+
+    & > .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;
+      ${props => props.theme.themeProp('border-right-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1)}
+    }
+
+    & > .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;
+      ${props => props.theme.themeProp('border-bottom-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1)}
+    }
+
+    & > .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;
+      ${props => props.theme.themeProp('border-left-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1)}
+    }
+
+    & > .tippy-arrow::after {
+      bottom: -5px;
+      right: -15px;
+      border-width: 13px 0 13px 15px;
+      border-left-color: initial;
+      transform-origin: center top;
+    }
+  }
+`;
+
+const Popover = React__default["default"].forwardRef(function Popover({
+  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',
+  ...props
+}, ref) {
+  const errorOffset = React.useMemo(() => arrow ? 15 : 0, [arrow]);
+  const isControlled = React.useMemo(() => lodash.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__default["default"].createElement("div", null, React__default["default"].createElement(Popover$1, _rollupPluginBabelHelpers._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: [{
+        ...maxSize__default["default"],
+        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 = {
+            ...state.styles.popper,
+            maxHeight: `${height}px`
+          };
+        }
+      }, ...modifiers]
+    },
+    onShown: contextMenu ? handleContextMenuItemClick : undefined,
+    maxWidth: maxWidth
+  }, props), children));
+});
+Popover.propTypes = process.env.NODE_ENV !== "production" ? {
+  content: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.element]).isRequired,
+  interactive: defaultTheme.PropTypes.bool,
+  placement: defaultTheme.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: defaultTheme.PropTypes.number,
+  trigger: defaultTheme.PropTypes.string,
+  offset: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.number),
+  arrow: defaultTheme.PropTypes.bool,
+  visible: defaultTheme.PropTypes.bool,
+  modifiers: defaultTheme.PropTypes.array,
+  maxWidth: defaultTheme.PropTypes.string,
+  contextMenu: defaultTheme.PropTypes.bool,
+  contextMenuSublevel: defaultTheme.PropTypes.bool,
+  children: defaultTheme.PropTypes.node.isRequired
+} : {};
+
+exports.Popover = Popover;

package/build/ProgressBar-2d26c1fb.js

@@ -0,0 +1,217 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4b342fad.js');
+var React = require('react');
+var defaultTheme = require('./defaultTheme-d9a7342e.js');
+var styled = require('styled-components');
+var arrowForward = require('./arrow-forward-d7c77ae3.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const getBackgroundColor = props => {
+  if (props.barColor) {
+    return `background: ${props.barColor};`;
+  }
+  const colorMap = {
+    success: ['emerald-600', 'emerald-300'],
+    error: ['red-600', 'cercise-200'],
+    warning: ['orange-600', 'orange-400'],
+    none: ['gray-500', 'gray-300'],
+    default: ['emerald-600', 'emerald-500']
+  };
+  const [darkColor, lightColor] = colorMap[props.type] || colorMap.default;
+  return props.theme.themeProp('background', props.theme.getColor(darkColor), props.theme.getColor(lightColor));
+};
+styled__default["default"].p.attrs(defaultTheme.applyDefaultTheme)`
+  font-family: ${props => props.theme.primaryFontFamily};
+  font-size: 1rem;
+  font-weight: 500;
+`;
+const Container = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  width: 100%;
+  height: ${props => props.height ? `${props.height}px` : '50px'};
+  font-family: ${props => props.theme.primaryFontFamily};
+`;
+const InnerContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  display: flex;
+  height: 100%;
+`;
+const MetricsContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: ${props => props.hasLink ? '85%' : '100%'};
+  height: 100%;
+  flex-direction: row;
+  justify-content: flex-start;
+`;
+const Label = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  font-size: 0.875rem;
+  padding-bottom: 5px;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'))}
+`;
+styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  font-size: 0.875rem;
+  font-weight: 500;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'))}
+`;
+const ProgressBarTrack = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  border-radius: 3px;
+  height: 100%;
+  ${props => props.theme.themeProp('background', props.theme.getColor('gray-800'), props.theme.getColor('gray-50'))}
+`;
+const Completed = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  font-size: 1.2rem;
+  font-weight: 400;
+  height: 100%;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  width: 96px;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-800'))};
+`;
+const PercentageIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  position: absolute;
+  right: 10px;
+  font-weight: 400;
+  font-size: 0.875rem;
+  white-space: nowrap;
+  opacity: 0.8;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'))};
+`;
+const ExternalPercentageIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  margin-left: 8px;
+  font-size: 1.2rem;
+  font-weight: 400;
+  font-size: 0.875rem;
+  opacity: 0.9;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'))};
+  display: flex;
+  align-items: center;
+`;
+const ProgressBarFill = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  height: 100%;
+  border-radius: 0 3px 3px 0;
+  width: ${props => props.percentage}%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  ${props => getBackgroundColor(props)}
+  transition: width 0.3s ease;
+`;
+const Link = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  font-size: 0.875rem;
+  font-weight: 400;
+  width: 15%;
+  opacity: 0.7;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-right: 20px;
+  cursor: pointer;
+  height: 100%;
+  gap: 10px;
+  svg {
+    transition: transform 0.2s ease-in-out;
+  }
+  &:hover svg {
+    transform: translateX(2px);
+  }
+`;
+const ButtonLink = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  font-size: 0.875rem;
+  font-weight: 500;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  opacity: ${props => props.$isHovered ? 1 : 0.8};
+  transition: color 0.2s ease-in-out;
+  ${props => props.$isHovered ? props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')) : props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))};
+`;
+const StyledArrowIcon = styled__default["default"](arrowForward.SvgArrowForward).attrs(defaultTheme.applyDefaultTheme)`
+  height: 15px;
+  margin-right: 10px;
+  opacity: ${props => props.$isHovered ? 1 : 0.8};
+  transition: transform 0.2s ease-in-out, fill 0.2s ease-in-out;
+  transform: ${props => props.$isHovered ? 'translateX(2px)' : 'translateX(0)'};
+
+  ${props => props.$isHovered ? props.theme.themeProp('fill', props.theme.getColor('white'), props.theme.getColor('black')) : props.theme.themeProp('fill', props.theme.getColor('white'), props.theme.getColor('black'))};
+`;
+
+const ProgressBar = ({
+  totalAssets,
+  completedAssets,
+  percentageText,
+  barColor,
+  height,
+  label,
+  type,
+  linkText,
+  onClick,
+  ...props
+}) => {
+  const [isLinkHovered, setIsLinkHovered] = React.useState(false);
+  const safeCompletedAssets = Math.max(0, completedAssets);
+  const safeTotalAssets = Math.max(1, totalAssets);
+  const percentage = safeCompletedAssets / safeTotalAssets * 100;
+  const formattedPercentage = `${Math.round(percentage)}%`;
+  const isLowPercentage = percentage <= 5;
+  const handleLinkClick = e => onClick(e);
+  const formatNumberNew = num => {
+    if (num < 1000000) {
+      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+    } else {
+      const units = ['K', 'M', 'B', 'T'];
+      const unit = Math.floor((num.toString().length - 1) / 3) - 1;
+      const shortNum = num / Math.pow(1000, unit + 1);
+      return shortNum.toFixed(shortNum < 10 ? 1 : 0) + units[unit];
+    }
+  };
+  return React__default["default"].createElement(Container, _rollupPluginBabelHelpers._extends({
+    height: height
+  }, props), React__default["default"].createElement(Label, null, label), React__default["default"].createElement(InnerContainer, {
+    type: type
+  }, React__default["default"].createElement(Completed, {
+    type: type
+  }, formatNumberNew(completedAssets)), React__default["default"].createElement(ProgressBarTrack, null, React__default["default"].createElement(MetricsContainer, {
+    hasLink: Boolean(linkText)
+  }, React__default["default"].createElement(ProgressBarFill, {
+    type: type,
+    percentage: percentage,
+    barColor: barColor
+  }, !isLowPercentage && React__default["default"].createElement(PercentageIndicator, {
+    hasLink: Boolean(linkText)
+  }, percentageText || formattedPercentage)), isLowPercentage && React__default["default"].createElement(ExternalPercentageIndicator, null, percentageText || formattedPercentage)), linkText && React__default["default"].createElement(Link, {
+    onClick: handleLinkClick,
+    onMouseEnter: () => setIsLinkHovered(true),
+    onMouseLeave: () => setIsLinkHovered(false)
+  }, React__default["default"].createElement(ButtonLink, {
+    $isHovered: isLinkHovered
+  }, linkText), React__default["default"].createElement(StyledArrowIcon, {
+    $isHovered: isLinkHovered
+  })))));
+};
+ProgressBar.propTypes = process.env.NODE_ENV !== "production" ? {
+  totalAssets: defaultTheme.PropTypes.number.isRequired,
+  completedAssets: defaultTheme.PropTypes.number.isRequired,
+  percentageText: defaultTheme.PropTypes.string,
+  barColor: defaultTheme.PropTypes.string,
+  height: defaultTheme.PropTypes.number,
+  label: defaultTheme.PropTypes.string,
+  type: defaultTheme.PropTypes.string,
+  linkText: defaultTheme.PropTypes.string,
+  onClick: defaultTheme.PropTypes.func
+} : {};
+
+exports.ProgressBar = ProgressBar;

package/build/Radio-150fb2c9.js

@@ -0,0 +1,141 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4b342fad.js');
+var React = require('react');
+var nanoid = require('nanoid');
+var defaultTheme = require('./defaultTheme-d9a7342e.js');
+var polished = require('polished');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const radioSize = '18px';
+const RadioLabel = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  padding-left: ${polished.math(`${radioSize} + 10px`)};
+  font-weight: 400;
+  font-size: 0.875rem;
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))};
+`;
+const Radio$1 = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)`
+  display: block;
+  position: relative;
+  cursor: pointer;
+  line-height: ${radioSize};
+  user-select: none;
+
+  &::before {
+    content: '';
+    position: absolute;
+    border: 2px solid ${props => props.theme.getColor('gray-300')};
+    width: ${radioSize};
+    height: ${radioSize};
+    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: ${props => props.theme.getColor('emerald-500')};
+    }
+
+    ::after {
+      background: ${props => props.theme.getColor('emerald-500')};
+      transform: scale(1);
+    }
+
+    ${RadioLabel} {
+      opacity: 1;
+    }
+  }
+  & {
+    input[type='radio'] {
+      position: absolute;
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  ${props => props.readOnly && styled.css`
+      opacity: 0.5;
+      pointer-events: none;
+      user-select: text;
+    `}
+
+  ${props => props.disabled && styled.css`
+      opacity: 0.5;
+      cursor: not-allowed;
+      user-select: text;
+    `}
+`;
+
+const Radio = React__default["default"].forwardRef(function Radio({
+  name,
+  value,
+  checked,
+  defaultChecked,
+  disabled,
+  readOnly,
+  label,
+  className,
+  style,
+  onChange,
+  onBlur,
+  ...rest
+}, forwardedRef) {
+  const [uniqueId] = React.useState(nanoid.nanoid());
+  return React__default["default"].createElement(Radio$1, {
+    htmlFor: uniqueId,
+    disabled: disabled,
+    readOnly: readOnly,
+    className: className,
+    style: style
+  }, React__default["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)), React__default["default"].createElement(RadioLabel, null, label));
+});
+Radio.propTypes = process.env.NODE_ENV !== "production" ? {
+  label: defaultTheme.PropTypes.any,
+  name: defaultTheme.PropTypes.string.isRequired,
+  value: defaultTheme.PropTypes.any.isRequired,
+  checked: defaultTheme.PropTypes.bool,
+  defaultChecked: defaultTheme.PropTypes.bool,
+  disabled: defaultTheme.PropTypes.bool,
+  readOnly: defaultTheme.PropTypes.bool,
+  className: defaultTheme.PropTypes.string,
+  style: defaultTheme.PropTypes.object,
+  onChange: defaultTheme.PropTypes.func,
+  onBlur: defaultTheme.PropTypes.func
+} : {};
+Radio.defaultProps = {
+  disabled: false
+};
+
+exports.Radio = Radio;

package/build/SectionSeparator-e06c7660.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4b342fad.js');
+var React = require('react');
+var defaultTheme = require('./defaultTheme-d9a7342e.js');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const SectionSeparator$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  height: ${props => props.vertical ? '100%' : '1px'};
+  width: ${props => props.vertical ? '1px' : '100%'};
+
+  ${props => props.vertical ? `margin-left: ${props.margin}px; margin-right: ${props.margin}px;` : `margin-top: ${props.margin}px; margin-bottom: ${props.margin}px;`}
+
+  ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))}
+`;
+
+const SectionSeparator = React__default["default"].forwardRef(function SectionSeparator({
+  vertical = false,
+  margin = 0,
+  ...props
+}, forwardedRef) {
+  return React__default["default"].createElement(SectionSeparator$1, _rollupPluginBabelHelpers._extends({
+    vertical: vertical,
+    margin: margin,
+    ref: forwardedRef
+  }, props));
+});
+SectionSeparator.propTypes = process.env.NODE_ENV !== "production" ? {
+  vertical: defaultTheme.PropTypes.bool,
+  margin: defaultTheme.PropTypes.number
+} : {};
+
+exports.SectionSeparator = SectionSeparator;