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

package/build/inputs/index.js

@@ -1,60 +1,40 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var ActionButton = require('../ActionButton-03dc5f67.js');
-var Button = require('../Button-2e26f5da.js');
-var Checkbox = require('../Checkbox-0b8faf49.js');
-var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-797778cb.js');
-var CompactStarRating = require('../CompactStarRating-da21b53f.js');
-var CompactTextInput = require('../CompactTextInput-d56aec71.js');
-var MultiSelect = require('../MultiSelect-d7920eb1.js');
-var Radio = require('../Radio-150fb2c9.js');
-var TextArea = require('../TextArea-26d3c8a1.js');
-var TextInput = require('../TextInput-3a567daa.js');
-var Switch = require('../Switch-d2d6e9ec.js');
-var MultiLevelCheckboxSelect = require('../MultiLevelCheckboxSelect-d229cf98.js');
-require('../_rollupPluginBabelHelpers-4b342fad.js');
-require('react');
-require('../defaultTheme-d9a7342e.js');
-require('styled-components');
-require('polished');
-require('../Popover-c4be47ea.js');
-require('lodash');
-require('@tippyjs/react');
-require('../shift-away-subtle-158617af.js');
-require('popper-max-size-modifier');
-require('../ContextMenu-82f9d728.js');
-require('../expand-more-d74e2bd2.js');
-require('nanoid');
-require('../Alert-8a511bdc.js');
-require('../Badge-aa4cd9c1.js');
-require('../Tab-ccbca1f2.js');
-require('../Tabs-b06c0e24.js');
-require('../Tooltip-d5882b82.js');
-require('../VerificationStatusIcon-9876b68f.js');
-require('react-select');
-require('react-select-async-paginate');
-require('react-select/creatable');
-require('../close-1751121a.js');
-require('../edit-note-cefe2215.js');
-require('@restart/hooks/useMergedRefs');
-require('../InputGroup-8d4a4644.js');
-require('../SectionSeparator-e06c7660.js');
-require('@restart/hooks/useUpdateEffect');
-
-
-
-exports.ActionButton = ActionButton.ActionButton;
-exports.Button = Button.Button;
-exports.Checkbox = Checkbox.Checkbox;
-exports.CompactAutocompleteSelect = CompactAutocompleteSelect.CompactAutocompleteSelect;
-exports.CompactStarRating = CompactStarRating.CompactStarRating;
-exports.CompactTextInput = CompactTextInput.CompactTextInput;
-exports.MultiSelect = MultiSelect.MultiSelect;
-exports.Radio = Radio.Radio;
-exports.TextArea = TextArea.TextArea;
-exports.TextInput = TextInput.TextInput;
-exports.Switch = Switch.Switch;
-exports.MultiLevelCheckbox = MultiLevelCheckboxSelect.MultiLevelCheckbox;
-exports.MultiLevelCheckboxSelect = MultiLevelCheckboxSelect.MultiLevelCheckboxSelect;
+export { A as ActionButton } from '../ActionButton-4db754c3.js';
+export { B as Button } from '../Button-179a2fe4.js';
+export { C as Checkbox } from '../Checkbox-4a5fd716.js';
+export { C as CompactAutocompleteSelect } from '../CompactAutocompleteSelect-52c49513.js';
+export { C as CompactStarRating } from '../CompactStarRating-9af2f427.js';
+export { C as CompactTextInput } from '../CompactTextInput-42ca5d42.js';
+export { M as MultiSelect } from '../MultiSelect-9f497e62.js';
+export { R as Radio } from '../Radio-73ca3ae2.js';
+export { T as TextArea } from '../TextArea-1e5b9201.js';
+export { T as TextInput } from '../TextInput-fab35842.js';
+export { S as Switch } from '../Switch-ecf3122b.js';
+export { M as MultiLevelCheckbox, a as MultiLevelCheckboxSelect } from '../MultiLevelCheckboxSelect-d8044c88.js';
+import '../_rollupPluginBabelHelpers-c245b26a.js';
+import 'react';
+import '../defaultTheme-1bcc2541.js';
+import 'styled-components';
+import 'polished';
+import '../Popover-20050b91.js';
+import 'lodash';
+import '@tippyjs/react';
+import '../shift-away-subtle-0dd94a03.js';
+import 'popper-max-size-modifier';
+import '../widgets/ContextMenu/ContextMenu.js';
+import '../expand-more-c5523c46.js';
+import 'nanoid';
+import '../Alert-e6847a22.js';
+import '../Badge-d93586a9.js';
+import '../Tab-04d435c3.js';
+import '../Tabs-74d1ea8a.js';
+import '../Tooltip-c1d1199e.js';
+import '../VerificationStatusIcon-49cb1c1b.js';
+import 'react-select';
+import 'react-select-async-paginate';
+import 'react-select/creatable';
+import '../close-a5d37608.js';
+import '../edit-note-283a0e15.js';
+import '@restart/hooks/useMergedRefs';
+import '../InputGroup-1294d190.js';
+import '../SectionSeparator-f47760a2.js';
+import '@restart/hooks/useUpdateEffect';

package/build/layout/InputGroup/index.js

@@ -1,11 +1,5 @@
-'use strict';
-
-var InputGroup = require('../../InputGroup-8d4a4644.js');
-require('../../_rollupPluginBabelHelpers-4b342fad.js');
-require('react');
-require('../../defaultTheme-d9a7342e.js');
-require('styled-components');
-
-
-
-module.exports = InputGroup.InputGroup;
+export { I as default } from '../../InputGroup-1294d190.js';
+import '../../_rollupPluginBabelHelpers-c245b26a.js';
+import 'react';
+import '../../defaultTheme-1bcc2541.js';
+import 'styled-components';

package/build/layout/SectionSeparator/index.js

@@ -1,11 +1,5 @@
-'use strict';
-
-var SectionSeparator = require('../../SectionSeparator-e06c7660.js');
-require('../../_rollupPluginBabelHelpers-4b342fad.js');
-require('react');
-require('../../defaultTheme-d9a7342e.js');
-require('styled-components');
-
-
-
-module.exports = SectionSeparator.SectionSeparator;
+export { S as default } from '../../SectionSeparator-f47760a2.js';
+import '../../_rollupPluginBabelHelpers-c245b26a.js';
+import 'react';
+import '../../defaultTheme-1bcc2541.js';
+import 'styled-components';

package/build/layout/index.js

@@ -1,15 +1,6 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var InputGroup = require('../InputGroup-8d4a4644.js');
-var SectionSeparator = require('../SectionSeparator-e06c7660.js');
-require('../_rollupPluginBabelHelpers-4b342fad.js');
-require('react');
-require('../defaultTheme-d9a7342e.js');
-require('styled-components');
-
-
-
-exports.InputGroup = InputGroup.InputGroup;
-exports.SectionSeparator = SectionSeparator.SectionSeparator;
+export { I as InputGroup } from '../InputGroup-1294d190.js';
+export { S as SectionSeparator } from '../SectionSeparator-f47760a2.js';
+import '../_rollupPluginBabelHelpers-c245b26a.js';
+import 'react';
+import '../defaultTheme-1bcc2541.js';
+import 'styled-components';

package/build/{shift-away-subtle-158617af.js → shift-away-subtle-0dd94a03.js}

@@ -1,9 +1,7 @@
-'use strict';
-
-var defaultTheme = require('./defaultTheme-d9a7342e.js');
+import { s as styleInject } from './defaultTheme-1bcc2541.js';
 
 var css_248z$1 = ".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}";
-defaultTheme.styleInject(css_248z$1);
+styleInject(css_248z$1);
 
 var css_248z = ".tippy-box[data-animation=shift-away-subtle][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=top]{transform:translateY(5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=bottom]{transform:translateY(-5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=left]{transform:translateX(5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=right]{transform:translateX(-5px)}";
-defaultTheme.styleInject(css_248z);
+styleInject(css_248z);

package/build/ssr/index.js

@@ -1,12 +1 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-
-
-
-Object.defineProperty(exports, 'ServerStyleSheet', {
-	enumerable: true,
-	get: function () { return styled.ServerStyleSheet; }
-});
+export { ServerStyleSheet } from 'styled-components';

package/build/styles/utils/colors.scss

@@ -1,15 +1,15 @@
-@import '../config';
+@use '../config';
 
 @function color($name) {
-  @if map-has-key($colors, $name) {
-    @return map-get($colors, $name);
+  @if map-has-key(config.$colors, $name) {
+    @return map-get(config.$colors, $name);
   } @else {
     @error "No color with the name `#{$name}`. was found.";
   }
 }
 
 :export {
-  @each $name, $color in $colors {
+  @each $name, $color in config.$colors {
     #{$name}: $color;
   }
 }

package/build/warning-circle-24f3efcd.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+var _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function SvgWarningCircle(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M10.8 15.6h2.4V18h-2.4zm0-9.6h2.4v7.2h-2.4zm1.188-6A12 12 0 1024 12 11.994 11.994 0 0011.988 0zM12 21.6a9.6 9.6 0 119.6-9.6 9.597 9.597 0 01-9.6 9.6z"
+  })));
+}
+
+export { SvgWarningCircle as S };

package/build/widgets/AssetGallery/AssetGallery.js

@@ -0,0 +1,45 @@
+import '../../_rollupPluginBabelHelpers-c245b26a.js';
+import 'lodash';
+import '../../defaultTheme-1bcc2541.js';
+import 'react';
+export { A as default } from '../../AssetGallery-f67393d4.js';
+import 'styled-components';
+import '@restart/hooks/useMergedRefs';
+import 'resize-observer-polyfill';
+import '../../MultiLevelCheckboxSelect-d8044c88.js';
+import '../../Alert-e6847a22.js';
+import '../../Badge-d93586a9.js';
+import '../../Popover-20050b91.js';
+import 'polished';
+import '@tippyjs/react';
+import '../../shift-away-subtle-0dd94a03.js';
+import 'popper-max-size-modifier';
+import '../../Tab-04d435c3.js';
+import '../../Tabs-74d1ea8a.js';
+import '../../Tooltip-c1d1199e.js';
+import '../../VerificationStatusIcon-49cb1c1b.js';
+import '../../Checkbox-4a5fd716.js';
+import 'nanoid';
+import '../../TextInput-fab35842.js';
+import '../../edit-note-283a0e15.js';
+import '../../InputGroup-1294d190.js';
+import '../../SectionSeparator-f47760a2.js';
+import '../../close-a5d37608.js';
+import '@restart/hooks/useUpdateEffect';
+import '../../warning-circle-24f3efcd.js';
+import '@floating-ui/react';
+import '../../ActionButton-4db754c3.js';
+import '../../Button-179a2fe4.js';
+import '../ContextMenu/ContextMenu.js';
+import '../../expand-more-c5523c46.js';
+import '../../CompactAutocompleteSelect-52c49513.js';
+import 'react-select';
+import 'react-select-async-paginate';
+import 'react-select/creatable';
+import '../../CompactStarRating-9af2f427.js';
+import '../../CompactTextInput-42ca5d42.js';
+import '../../MultiSelect-9f497e62.js';
+import '../../Radio-73ca3ae2.js';
+import '../../TextArea-1e5b9201.js';
+import '../../Switch-ecf3122b.js';
+import '../ContextMenu/ContextMenuItem/ContextMenuItem.js';

package/build/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.js

@@ -0,0 +1,127 @@
+import { _ as _extends$1 } from '../../../_rollupPluginBabelHelpers-c245b26a.js';
+import * as React from 'react';
+import React__default from 'react';
+import { a as applyDefaultTheme, P as PropTypes } from '../../../defaultTheme-1bcc2541.js';
+import styled, { css } from 'styled-components';
+import { S as SvgClose } from '../../../close-a5d37608.js';
+
+var _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function SvgArrowBack(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 32 32"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M16 32L0 16 16 0l2.1 2.1L5.7 14.5H32v3H5.7l12.4 12.4L16 32z"
+  })));
+}
+
+const AssetPreviewTopBar$1 = styled.div.attrs(applyDefaultTheme)`
+  box-sizing: border-box;
+  align-items: center;
+  border-bottom: ${props => props.border ? `1px solid` : `none`};
+  color: inherit;
+  display: flex;
+  font-family: ${props => props.theme.primaryFontFamily};
+  font-weight: 400;
+  min-height: 72px;
+  padding: 0 24px;
+  width: 100%;
+
+  ${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 && css`
+      cursor: not-allowed;
+    `}
+`;
+const BackButtonContainer = styled.a.attrs(applyDefaultTheme)`
+  align-items: center;
+  display: flex;
+  font-size: 1.125rem;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))};
+
+  ${props => props.disabled && css`
+      opacity: 0.5;
+      pointer-events: none;
+    `}
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  > svg {
+    height: 24px;
+    margin-right: 16px;
+    width: 24px;
+  }
+`;
+const BackHoverEffect = styled.div`
+  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.span.attrs(applyDefaultTheme)`
+  font-size: 1.125rem;
+  margin-left: 16px;
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'))};
+`;
+const ButtonsContainer = styled.div.attrs(applyDefaultTheme)`
+  align-items: center;
+  display: flex;
+  margin-left: auto;
+
+  > span {
+    margin-left: 16px;
+  }
+`;
+
+const AssetPreviewTopBar = React__default.forwardRef(function AssetPreviewTopBar({
+  onBackButtonClick,
+  backButtonText,
+  backButtonAsClose,
+  leftText,
+  buttons,
+  shadow,
+  border,
+  disabled,
+  ...props
+}, forwardedRef) {
+  return React__default.createElement(AssetPreviewTopBar$1, _extends$1({
+    ref: forwardedRef,
+    shadow: shadow,
+    border: border,
+    disabled: disabled
+  }, props), React__default.createElement(BackButtonContainer, {
+    onClick: onBackButtonClick,
+    disabled: disabled
+  }, backButtonAsClose ? React__default.createElement(React__default.Fragment, null, React__default.createElement(SvgClose, null), backButtonText) : React__default.createElement(BackHoverEffect, null, React__default.createElement(SvgArrowBack, null), backButtonText)), leftText && React__default.createElement(LeftText, null, leftText), Array.isArray(buttons) && React__default.createElement(ButtonsContainer, null, buttons.map((button, index) => React__default.createElement("span", {
+    key: 'topBarButton-' + index
+  }, button))));
+});
+AssetPreviewTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
+  onBackButtonClick: PropTypes.func.isRequired,
+  backButtonText: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+  backButtonAsClose: PropTypes.bool,
+  leftText: PropTypes.string,
+  shadow: PropTypes.bool,
+  border: PropTypes.bool,
+  buttons: PropTypes.arrayOf(PropTypes.node)
+} : {};
+AssetPreviewTopBar.defaultProps = {};
+
+export { AssetPreviewTopBar as default };

package/build/widgets/ContextMenu/ContextMenu.js

@@ -0,0 +1,26 @@
+import { _ as _extends } from '../../_rollupPluginBabelHelpers-c245b26a.js';
+import React__default from 'react';
+import { a as applyDefaultTheme, P as PropTypes } from '../../defaultTheme-1bcc2541.js';
+import styled from 'styled-components';
+
+const ContextMenu$1 = styled.div.attrs(applyDefaultTheme)`
+  font-family: ${props => props.theme.primaryFontFamily};
+  padding: 3px 0;
+`;
+
+const ContextMenu = React__default.forwardRef(function ContextMenu({
+  children,
+  ...props
+}, forwardedRef) {
+  return React__default.createElement(ContextMenu$1, _extends({
+    ref: forwardedRef
+  }, props, {
+    role: "menu"
+  }), children);
+});
+ContextMenu.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: PropTypes.any
+} : {};
+ContextMenu.defaultProps = {};
+
+export { ContextMenu as default };

package/build/{ContextMenuItem-3967010d.js → widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js}

@@ -1,47 +1,22 @@
-'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 }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+import { _ as _extends$1 } from '../../../_rollupPluginBabelHelpers-c245b26a.js';
+import * as React from 'react';
+import React__default from 'react';
+import { a as applyDefaultTheme, P as PropTypes } from '../../../defaultTheme-1bcc2541.js';
+import styled, { css } from 'styled-components';
 
 var _path;
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function SvgTriangleRight(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 10 20"
-  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M0 20V0l10 10L0 20z"
   })));
 }
 
-const ContextMenuItem$1 = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)`
+const ContextMenuItem$1 = styled.span.attrs(applyDefaultTheme)`
   align-items: center;
   cursor: pointer;
   display: flex;
@@ -56,7 +31,7 @@ const ContextMenuItem$1 = styled__default["default"].span.attrs(defaultTheme.app
 
   ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-700'), '#FEFEFE')}
 
-  ${props => !props.icon && styled.css`
+  ${props => !props.icon && css`
       padding-left: 28px;
     `}
 
@@ -76,19 +51,19 @@ const ContextMenuItem$1 = styled__default["default"].span.attrs(defaultTheme.app
     ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200'))}
   }
 
-  ${props => props.hoverColors && props.hoverColors[0] && props.hoverColors[1] && styled.css`
+  ${props => props.hoverColors && props.hoverColors[0] && props.hoverColors[1] && css`
       &&:hover {
         ${props => props.theme.themeProp('color', props.hoverColors[0], props.hoverColors[1])}
       }
     `}
 
-  ${props => props.hoverBackgroundColors && props.hoverBackgroundColors[0] && props.hoverBackgroundColors[1] && styled.css`
+  ${props => props.hoverBackgroundColors && props.hoverBackgroundColors[0] && props.hoverBackgroundColors[1] && css`
       &&:hover {
         ${props => props.theme.themeProp('background-color', props.hoverBackgroundColors[0], props.hoverBackgroundColors[1])}
       }
     `}
 `;
-const IconContainer = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)`
+const IconContainer = styled.span.attrs(applyDefaultTheme)`
   align-items: center;
   display: flex;
   height: fit-content;
@@ -99,7 +74,7 @@ const IconContainer = styled__default["default"].span.attrs(defaultTheme.applyDe
     height: 12px;
   }
 `;
-const SublevelIconContainer = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)`
+const SublevelIconContainer = styled.span.attrs(applyDefaultTheme)`
   align-items: center;
   display: flex;
   height: fit-content;
@@ -113,7 +88,7 @@ const SublevelIconContainer = styled__default["default"].span.attrs(defaultTheme
   }
 `;
 
-const ContextMenuItem = React__default["default"].forwardRef(function ContextMenuItem({
+const ContextMenuItem = React__default.forwardRef(function ContextMenuItem({
   title,
   icon,
   onClickEffect,
@@ -122,7 +97,7 @@ const ContextMenuItem = React__default["default"].forwardRef(function ContextMen
   hoverBackgroundColors,
   ...props
 }, forwardedRef) {
-  return React__default["default"].createElement(ContextMenuItem$1, _rollupPluginBabelHelpers._extends({
+  return React__default.createElement(ContextMenuItem$1, _extends$1({
     ref: forwardedRef,
     icon: icon,
     onClick: onClickEffect,
@@ -132,15 +107,15 @@ const ContextMenuItem = React__default["default"].forwardRef(function ContextMen
     className: opensSublevel ? 'context-menu-item opens-sublevel' : 'context-menu-item'
   }, props, {
     role: "menuitem"
-  }), icon && React__default["default"].createElement(IconContainer, null, icon), React__default["default"].createElement("span", null, title), opensSublevel && React__default["default"].createElement(SublevelIconContainer, null, React__default["default"].createElement(SvgTriangleRight, null)));
+  }), icon && React__default.createElement(IconContainer, null, icon), React__default.createElement("span", null, title), opensSublevel && React__default.createElement(SublevelIconContainer, null, React__default.createElement(SvgTriangleRight, null)));
 });
 ContextMenuItem.propTypes = process.env.NODE_ENV !== "production" ? {
-  title: defaultTheme.PropTypes.string.isRequired,
-  icon: defaultTheme.PropTypes.element,
-  onClickEffect: defaultTheme.PropTypes.func,
-  opensSublevel: defaultTheme.PropTypes.bool,
-  hoverColors: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.string),
-  hoverBackgroundColors: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.string)
+  title: PropTypes.string.isRequired,
+  icon: PropTypes.element,
+  onClickEffect: PropTypes.func,
+  opensSublevel: PropTypes.bool,
+  hoverColors: PropTypes.arrayOf(PropTypes.string),
+  hoverBackgroundColors: PropTypes.arrayOf(PropTypes.string)
 } : {};
 ContextMenuItem.defaultProps = {
   icon: undefined,
@@ -149,4 +124,4 @@ ContextMenuItem.defaultProps = {
   opensSublevel: false
 };
 
-exports.ContextMenuItem = ContextMenuItem;
+export { ContextMenuItem as default };

package/build/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.js

@@ -0,0 +1,37 @@
+import { _ as _extends } from '../../../_rollupPluginBabelHelpers-c245b26a.js';
+import React__default from 'react';
+import { a as applyDefaultTheme, P as PropTypes } from '../../../defaultTheme-1bcc2541.js';
+import styled from 'styled-components';
+
+const ContextMenuItemsGroup$1 = styled.div.attrs(applyDefaultTheme)`
+  :not(:last-child) {
+    border-bottom: 1px solid;
+
+    ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200'))}
+  }
+
+  > * {
+    border-bottom: none !important;
+  }
+
+  > *:not(:last-child) {
+    height: 32px;
+  }
+`;
+
+const ContextMenuItemsGroup = React__default.forwardRef(function ContextMenuItemsGroup({
+  children,
+  ...props
+}, forwardedRef) {
+  return React__default.createElement(ContextMenuItemsGroup$1, _extends({
+    ref: forwardedRef
+  }, props, {
+    role: "group"
+  }), children);
+});
+ContextMenuItemsGroup.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: PropTypes.arrayOf(PropTypes.node)
+} : {};
+ContextMenuItemsGroup.defaultProps = {};
+
+export { ContextMenuItemsGroup as default };