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

package/cjs/components/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.styled.js

@@ -0,0 +1,328 @@
+'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,
+  _t9,
+  _t10,
+  _t11,
+  _t12,
+  _t13,
+  _t14,
+  _t15,
+  _t16,
+  _t17,
+  _t18,
+  _t19,
+  _t20,
+  _t21,
+  _t22,
+  _t23,
+  _t24,
+  _t25,
+  _t26;
+const AssetGalleryWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+  ${0};
+`), props => props.disabled && styled.css(_t2 || (_t2 = _`
+      cursor: not-allowed;
+    `)));
+const AssetGalleryGridCard = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
+  display: block;
+  position: relative;
+  height: 100%;
+  margin: 0;
+  box-sizing: border-box;
+  border-width: ${0}px;
+  border-style: solid;
+  text-decoration: none;
+  cursor: pointer;
+
+  ${0}
+
+  ${0};
+
+  ${0}
+
+  ${0};
+`), props => {
+  const {
+    selected,
+    softSelected,
+    hasError,
+    completed
+  } = props;
+  return selected || softSelected || hasError || completed ? 3 : 1;
+}, props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700')), props => props.disabled && styled.css(_t4 || (_t4 = _`
+      pointer-events: none;
+      opacity: 0.4;
+    `)), props => props.extendedSelectMode && styled.css(_t5 || (_t5 = _`
+      cursor: pointer;
+    `)), props => {
+  if (props.softSelected) {
+    return props.theme.themeProp('border-color', polished.rgba(props.theme.getColor('gray-100'), 0.5), polished.rgba(props.theme.getColor('gray-700'), 0.5));
+  }
+  if (props.selected) {
+    return props.theme.themeProp('border-color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
+  }
+  if (props.completed) {
+    return props.theme.themeProp('border-color', props.theme.getColor('emerald-500'), polished.rgba(props.theme.getColor('emerald-500'), 0.7));
+  }
+  if (props.hasError) {
+    return props.theme.themeProp('border-color', props.theme.getColor('red-600'), polished.rgba(props.theme.getColor('red-500'), 0.7));
+  }
+  return props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-300'));
+});
+const ContentWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t6 || (_t6 = _`
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: ${0}px;
+  padding-top: 35px;
+  height: 100%;
+`), props => props.selected || props.softSelected ? 4 : 0);
+const Asset = styled__default["default"].div(_t7 || (_t7 = _`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  padding: 0 36px;
+  min-height: 200px;
+  box-sizing: border-box;
+
+  video {
+    display: block;
+  }
+
+  .audio {
+    display: flex;
+    justify-content: center;
+    svg {
+      width: 25%;
+    }
+  }
+`));
+const Figure = styled__default["default"].figure(_t8 || (_t8 = _`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  margin: 0;
+
+  img,
+  video,
+  .audio {
+    display: block;
+    max-height: 200px;
+    width: 100%;
+    box-sizing: border-box;
+
+    ${0}
+  }
+
+  .audio {
+    display: flex;
+    height: 200px;
+    justify-content: center;
+    svg {
+      width: 25%;
+    }
+  }
+`), props => props.hasHeightAndWidth ? styled.css(_t9 || (_t9 = _`
+            object-fit: cover;
+          `)) : styled.css(_t10 || (_t10 = _`
+            object-fit: contain;
+          `)));
+const FigureOverlayBackdrop = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t11 || (_t11 = _`
+  position: absolute;
+  inset: 0;
+  opacity: ${0};
+  background-color: ${0};
+`), props => props.selected ? 0.6 : 0, props => props.selected ? '#ACCEF7' : 'transparent');
+const Overlay = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t12 || (_t12 = _`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+`));
+const OverlayBackdrop = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t13 || (_t13 = _`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  opacity: 0;
+  transition: opacity 220ms;
+  ${0}
+
+  ${0}
+
+  ${0}:hover & {
+    opacity: 1;
+  }
+
+  ${0}:hover & {
+    opacity: 1;
+  }
+`), props => !props.selected ? styled.css(_t14 || (_t14 = _`
+          background: radial-gradient(
+            ellipse at center,
+            rgba(0, 0, 0, 0.3) 27%,
+            rgba(0, 0, 0, 0.5) 60%,
+            rgba(0, 0, 0, 0.7) 90%
+          );
+        `)) : null, props => (props.selected || props.softSelected) && styled.css(_t15 || (_t15 = _`
+      opacity: 1;
+    `)), Overlay, AssetGalleryGridCard);
+const OverlayInfo = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t16 || (_t16 = _`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 15px 12px 10px;
+  color: ${0};
+`), props => props.theme.getColor('gray-100'));
+const OverlaySelected = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t17 || (_t17 = _`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+`));
+const OverlayInfoTop = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t18 || (_t18 = _`
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  padding: 8px;
+  display: flex;
+`));
+const OverlayInfoTopVersions = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t19 || (_t19 = _`
+  opacity: 1;
+
+  ${0}:hover & {
+    opacity: 0;
+  }
+`), AssetGalleryGridCard);
+const OverlayInfoTopWarning = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t20 || (_t20 = _`
+  margin-left: auto;
+  height: 24px;
+  width: 24px;
+  border-radius: 50%;
+  box-sizing: border-box;
+  padding: ${0};
+  background-color: ${0};
+  opacity: 1;
+
+  svg {
+    width: 100%;
+    color: ${0};
+  }
+
+  ${0}:hover & {
+    opacity: 0;
+  }
+`), props => props.type === 'error' ? 0 : '4px', props => props.type === 'error' ? props.theme.getColor('red-500') : props.theme.getColor('gray-100'), props => props.type === 'error' ? props.theme.getColor('gray-100') : props.theme.getColor('gray-700'), AssetGalleryGridCard);
+const OverlayInfoTopActions = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t21 || (_t21 = _`
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  transition: opacity 220ms;
+  z-index: 99999;
+  ${0}
+
+  opacity: ${0};
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700')), props => props.isCardHovered ? 1 : 0);
+const OverlayInfoBottom = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t22 || (_t22 = _`
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 8px;
+  display: flex;
+`));
+const OverlayInfoBottomSelectButton = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t23 || (_t23 = _`
+  opacity: ${0};
+  flex-shrink: 0;
+  cursor: pointer;
+  transition: opacity 220ms;
+
+  > svg {
+    width: 23px;
+    height: 100%;
+    transition: opacity 120ms;
+    opacity: ${0};
+  }
+
+  ${0}:hover & {
+    opacity: 1;
+  }
+
+  ${0}:hover & {
+    opacity: 1;
+  }
+`), props => props.selected ? 1 : 0, props => props.selected ? 1 : 0.5, Overlay, AssetGalleryGridCard);
+const OverlayInfoBottomMediaIcon = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t24 || (_t24 = _`
+  margin-left: auto;
+  opacity: 1;
+  ${0}:hover & {
+    opacity: 0;
+  }
+`), AssetGalleryGridCard);
+const ConsumerDefinedOverlay = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t25 || (_t25 = _`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+`));
+const Fragment = styled__default["default"].div(_t26 || (_t26 = _`
+  margin: 4px;
+`));
+
+exports.Asset = Asset;
+exports.AssetGalleryGridCard = AssetGalleryGridCard;
+exports.AssetGalleryWrapper = AssetGalleryWrapper;
+exports.ConsumerDefinedOverlay = ConsumerDefinedOverlay;
+exports.ContentWrapper = ContentWrapper;
+exports.Figure = Figure;
+exports.FigureOverlayBackdrop = FigureOverlayBackdrop;
+exports.Fragment = Fragment;
+exports.Overlay = Overlay;
+exports.OverlayBackdrop = OverlayBackdrop;
+exports.OverlayInfo = OverlayInfo;
+exports.OverlayInfoBottom = OverlayInfoBottom;
+exports.OverlayInfoBottomMediaIcon = OverlayInfoBottomMediaIcon;
+exports.OverlayInfoBottomSelectButton = OverlayInfoBottomSelectButton;
+exports.OverlayInfoTop = OverlayInfoTop;
+exports.OverlayInfoTopActions = OverlayInfoTopActions;
+exports.OverlayInfoTopVersions = OverlayInfoTopVersions;
+exports.OverlayInfoTopWarning = OverlayInfoTopWarning;
+exports.OverlaySelected = OverlaySelected;

package/cjs/components/widgets/AssetGallery/asset.propType.js

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var index = require('../../../node_modules/prop-types/index.js');
+
+const assetShape = {
+  key: index["default"].oneOfType([index["default"].string, index["default"].number]).isRequired,
+  previewUrl: index["default"].string,
+  title: index["default"].string,
+  note: index["default"].shape({
+    icon: index["default"].element,
+    message: index["default"].string
+  }),
+  width: index["default"].number,
+  height: index["default"].number,
+  fileType: index["default"].oneOf(['image', 'video', 'pdf', 'file', 'audio']).isRequired,
+  fileTypeIconPosition: index["default"].oneOf(['top-left', 'top-right']),
+  group: index["default"].string,
+  actions: index["default"].arrayOf(index["default"].shape({
+    title: index["default"].string.isRequired,
+    icon: index["default"].element.isRequired,
+    onClick: index["default"].func.isRequired,
+    className: index["default"].shape,
+    component: index["default"].func
+  })),
+  overlay: index["default"].element,
+  completed: index["default"].bool,
+  hasError: index["default"].bool,
+  disabled: index["default"].bool,
+  onClick: index["default"].func,
+  onContextMenu: index["default"].func,
+  onMouseEnter: index["default"].func,
+  summary: index["default"].shape({
+    title: index["default"].string,
+    description: index["default"].string,
+    instructions: index["default"].string,
+    instructionsType: index["default"].oneOf(['warning', 'error', 'info']),
+    headerLeft: index["default"].node,
+    headerRight: index["default"].node,
+    footerLeft: index["default"].node,
+    footerRight: index["default"].node
+  })
+};
+const assetShapeWithLayout = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, assetShape), {}, {
+  layout: index["default"].shape({
+    width: index["default"].number.isRequired,
+    height: index["default"].number.isRequired,
+    translateX: index["default"].number.isRequired,
+    translateY: index["default"].number.isRequired,
+    type: index["default"].oneOf(['groupLabel', 'asset']).isRequired,
+    hasHeightAndWidth: index["default"].bool
+  }).isRequired
+});
+
+exports.assetShape = assetShape;
+exports.assetShapeWithLayout = assetShapeWithLayout;

package/cjs/components/widgets/AssetGallery/widgets/AssetGallery/index.js

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

package/cjs/components/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.js

@@ -0,0 +1,50 @@
+'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 AssetPreviewTopBar_styled = require('./AssetPreviewTopBar.styled.js');
+var arrowBack = require('../../../../icons/arrow-back.svg.js');
+var close = require('../../../../icons/close.svg.js');
+
+const _excluded = ["onBackButtonClick", "backButtonText", "backButtonAsClose", "leftText", "buttons", "shadow", "border", "disabled"];
+const AssetPreviewTopBar = index["default"].forwardRef(function AssetPreviewTopBar(_ref, forwardedRef) {
+  let {
+      onBackButtonClick,
+      backButtonText,
+      backButtonAsClose,
+      leftText,
+      buttons,
+      shadow,
+      border,
+      disabled
+    } = _ref,
+    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  return index["default"].createElement(AssetPreviewTopBar_styled.AssetPreviewTopBar, _rollupPluginBabelHelpers["extends"]({
+    ref: forwardedRef,
+    shadow: shadow,
+    border: border,
+    disabled: disabled
+  }, props), index["default"].createElement(AssetPreviewTopBar_styled.BackButtonContainer, {
+    onClick: onBackButtonClick,
+    disabled: disabled
+  }, backButtonAsClose ? index["default"].createElement(index["default"].Fragment, null, index["default"].createElement(close.ReactComponent, null), backButtonText) : index["default"].createElement(AssetPreviewTopBar_styled.BackHoverEffect, null, index["default"].createElement(arrowBack.ReactComponent, null), backButtonText)), leftText && index["default"].createElement(AssetPreviewTopBar_styled.LeftText, null, leftText), Array.isArray(buttons) && index["default"].createElement(AssetPreviewTopBar_styled.ButtonsContainer, null, buttons.map((button, index$1) => index["default"].createElement("span", {
+    key: 'topBarButton-' + index$1
+  }, button))));
+});
+AssetPreviewTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
+  onBackButtonClick: index$1["default"].func.isRequired,
+  backButtonText: index$1["default"].string.isRequired,
+  disabled: index$1["default"].bool,
+  backButtonAsClose: index$1["default"].bool,
+  leftText: index$1["default"].string,
+  shadow: index$1["default"].bool,
+  border: index$1["default"].bool,
+  buttons: index$1["default"].arrayOf(index$1["default"].node)
+} : {};
+AssetPreviewTopBar.defaultProps = {};
+var AssetPreviewTopBar$1 = AssetPreviewTopBar;
+
+exports["default"] = AssetPreviewTopBar$1;

package/cjs/components/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.styled.js

@@ -0,0 +1,96 @@
+'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;
+const AssetPreviewTopBar = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+  box-sizing: border-box;
+  align-items: center;
+  border-bottom: ${0};
+  color: inherit;
+  display: flex;
+  font-family: ${0};
+  font-weight: 400;
+  min-height: 72px;
+  padding: 0 24px;
+  width: 100%;
+
+  ${0}
+
+  ${0}
+
+      ${0}
+`), props => props.border ? `1px solid` : `none`, props => props.theme.primaryFontFamily, props => props.theme.themeProp('border-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-200')), props => props.shadow && props.theme.themeProp('box-shadow', '0 -2px 12px #505050', '0 -3px 12px #b0b6b9'), props => props.disabled && styled.css(_t2 || (_t2 = _`
+      cursor: not-allowed;
+    `)));
+const BackButtonContainer = styled__default["default"].a.attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
+  align-items: center;
+  display: flex;
+  font-size: 1.125rem;
+  ${0};
+
+  ${0}
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  > svg {
+    height: 24px;
+    margin-right: 16px;
+    width: 24px;
+  }
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')), props => props.disabled && styled.css(_t4 || (_t4 = _`
+      opacity: 0.5;
+      pointer-events: none;
+    `)));
+const BackHoverEffect = styled__default["default"].div(_t5 || (_t5 = _`
+  display: inline-flex;
+  align-items: center;
+
+  > svg {
+    height: 24px;
+    margin-right: 16px;
+    width: 24px;
+    transition: transform 0.3s ease-in-out;
+  }
+
+  &:hover > svg {
+    transform: translateX(-2px);
+  }
+`));
+const LeftText = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_t6 || (_t6 = _`
+  font-size: 1.125rem;
+  margin-left: 16px;
+
+  ${0};
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400')));
+const ButtonsContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t7 || (_t7 = _`
+  align-items: center;
+  display: flex;
+  margin-left: auto;
+
+  > span {
+    margin-left: 16px;
+  }
+`));
+
+exports.AssetPreviewTopBar = AssetPreviewTopBar;
+exports.BackButtonContainer = BackButtonContainer;
+exports.BackHoverEffect = BackHoverEffect;
+exports.ButtonsContainer = ButtonsContainer;
+exports.LeftText = LeftText;

package/cjs/components/widgets/AssetPreview/AssetPreviewTopBar/widgets/AssetPreview/AssetPreviewTopBar/index.js

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

package/cjs/components/widgets/ContextMenu/ContextMenu.js

@@ -0,0 +1,28 @@
+'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 ContextMenu_styled = require('./ContextMenu.styled.js');
+
+const _excluded = ["children"];
+const ContextMenu = index["default"].forwardRef(function ContextMenu(_ref, forwardedRef) {
+  let {
+      children
+    } = _ref,
+    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  return index["default"].createElement(ContextMenu_styled.ContextMenu, _rollupPluginBabelHelpers["extends"]({
+    ref: forwardedRef
+  }, props, {
+    role: "menu"
+  }), children);
+});
+ContextMenu.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: index$1["default"].any
+} : {};
+ContextMenu.defaultProps = {};
+var ContextMenu$1 = ContextMenu;
+
+exports["default"] = ContextMenu$1;

package/cjs/components/widgets/ContextMenu/ContextMenu.styled.js

@@ -0,0 +1,19 @@
+'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 ContextMenu = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+  font-family: ${0};
+  padding: 3px 0;
+`), props => props.theme.primaryFontFamily);
+
+exports.ContextMenu = ContextMenu;

package/cjs/components/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js

@@ -0,0 +1,50 @@
+'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 ContextMenuItem_styled = require('./ContextMenuItem.styled.js');
+var triangleRight = require('../../../../icons/triangle-right.svg.js');
+
+const _excluded = ["title", "icon", "onClickEffect", "opensSublevel", "hoverColors", "hoverBackgroundColors"];
+const ContextMenuItem = index["default"].forwardRef(function ContextMenuItem(_ref, forwardedRef) {
+  let {
+      title,
+      icon,
+      onClickEffect,
+      opensSublevel,
+      hoverColors,
+      hoverBackgroundColors
+    } = _ref,
+    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  return index["default"].createElement(ContextMenuItem_styled.ContextMenuItem, _rollupPluginBabelHelpers["extends"]({
+    ref: forwardedRef,
+    icon: icon,
+    onClick: onClickEffect,
+    hoverColors: hoverColors,
+    hoverBackgroundColors: hoverBackgroundColors,
+    opensSublevel: opensSublevel,
+    className: opensSublevel ? 'context-menu-item opens-sublevel' : 'context-menu-item'
+  }, props, {
+    role: "menuitem"
+  }), icon && index["default"].createElement(ContextMenuItem_styled.IconContainer, null, icon), index["default"].createElement("span", null, title), opensSublevel && index["default"].createElement(ContextMenuItem_styled.SublevelIconContainer, null, index["default"].createElement(triangleRight.ReactComponent, null)));
+});
+ContextMenuItem.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: index$1["default"].string.isRequired,
+  icon: index$1["default"].element,
+  onClickEffect: index$1["default"].func,
+  opensSublevel: index$1["default"].bool,
+  hoverColors: index$1["default"].arrayOf(index$1["default"].string),
+  hoverBackgroundColors: index$1["default"].arrayOf(index$1["default"].string)
+} : {};
+ContextMenuItem.defaultProps = {
+  icon: undefined,
+  hoverColors: undefined,
+  hoverBackgroundColors: undefined,
+  opensSublevel: false
+};
+var ContextMenuItem$1 = ContextMenuItem;
+
+exports["default"] = ContextMenuItem$1;