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

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 };

package/build/{InfoCard-d0fdf377.js → widgets/InfoCard/InfoCard.js}

@@ -1,17 +1,10 @@
-'use strict';
+import { _ as _extends } from '../../_rollupPluginBabelHelpers-c245b26a.js';
+import React__default, { useState } from 'react';
+import { a as applyDefaultTheme, P as PropTypes } from '../../defaultTheme-1bcc2541.js';
+import styled from 'styled-components';
+import { S as SvgArrowForward } from '../../arrow-forward-ad12c5f3.js';
 
-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 Container = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const Container = styled.div.attrs(applyDefaultTheme)`
   font-family: ${props => props.theme.primaryFontFamily};
   font-size: 1rem;
   font-weight: 500;
@@ -23,7 +16,7 @@ const Container = styled__default["default"].div.attrs(defaultTheme.applyDefault
   align-items: center;
   padding: 5px 0;
 `;
-const MetricsContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const MetricsContainer = styled.div.attrs(applyDefaultTheme)`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -32,31 +25,31 @@ const MetricsContainer = styled__default["default"].div.attrs(defaultTheme.apply
   gap: 5px;
   padding-left: 15px;
 `;
-const IconTotalContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const IconTotalContainer = styled.div.attrs(applyDefaultTheme)`
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 10px;
 `;
-const Total = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const Total = styled.div.attrs(applyDefaultTheme)`
   font-size: 1.22rem;
   font-weight: 700;
   ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))};
 `;
-const Label = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const Label = styled.div.attrs(applyDefaultTheme)`
   font-size: 0.875rem;
   font-weight: 400;
   opacity: 0.8;
   ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-500'))};
 `;
-const IconContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const IconContainer = styled.div.attrs(applyDefaultTheme)`
   display: flex;
   justify-content: center;
   align-items: center;
   width: 18px;
   margin-top: -0.05rem;
 `;
-const Link = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const Link = styled.div.attrs(applyDefaultTheme)`
   font-size: 0.875rem;
   font-weight: 400;
   width: 30%;
@@ -75,7 +68,7 @@ const Link = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme
     transform: translateX(2px);
   }
 `;
-const ButtonLink = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const ButtonLink = styled.div.attrs(applyDefaultTheme)`
   font-size: 0.875rem;
   font-weight: 500;
   height: 100%;
@@ -86,7 +79,7 @@ const ButtonLink = styled__default["default"].div.attrs(defaultTheme.applyDefaul
   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)`
+const StyledArrowIcon = styled(SvgArrowForward).attrs(applyDefaultTheme)`
   height: 15px;
   margin-right: 10px;
   opacity: ${props => props.$isHovered ? 1 : 0.8};
@@ -96,7 +89,7 @@ const StyledArrowIcon = styled__default["default"](arrowForward.SvgArrowForward)
   ${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 InfoCard = React__default["default"].forwardRef(function InfoCard({
+const InfoCard = React__default.forwardRef(function InfoCard({
   icon,
   total,
   label,
@@ -105,28 +98,28 @@ const InfoCard = React__default["default"].forwardRef(function InfoCard({
   height,
   ...props
 }, forwardedRef) {
-  const [isLinkHovered, setIsLinkHovered] = React.useState(false);
+  const [isLinkHovered, setIsLinkHovered] = useState(false);
   const handleLinkClick = e => onClick(e);
-  return React__default["default"].createElement(Container, _rollupPluginBabelHelpers._extends({
+  return React__default.createElement(Container, _extends({
     height: height,
     ref: forwardedRef
-  }, props), React__default["default"].createElement(MetricsContainer, null, React__default["default"].createElement(IconTotalContainer, null, React__default["default"].createElement(IconContainer, null, icon), React__default["default"].createElement(Total, null, total)), React__default["default"].createElement(Label, null, label)), linkLabel && onClick && React__default["default"].createElement(Link, {
+  }, props), React__default.createElement(MetricsContainer, null, React__default.createElement(IconTotalContainer, null, React__default.createElement(IconContainer, null, icon), React__default.createElement(Total, null, total)), React__default.createElement(Label, null, label)), linkLabel && onClick && React__default.createElement(Link, {
     onClick: handleLinkClick,
     onMouseEnter: () => setIsLinkHovered(true),
     onMouseLeave: () => setIsLinkHovered(false)
-  }, React__default["default"].createElement(ButtonLink, {
+  }, React__default.createElement(ButtonLink, {
     $isHovered: isLinkHovered
-  }, linkLabel), React__default["default"].createElement(StyledArrowIcon, {
+  }, linkLabel), React__default.createElement(StyledArrowIcon, {
     $isHovered: isLinkHovered
   })));
 });
 InfoCard.propTypes = process.env.NODE_ENV !== "production" ? {
-  icon: defaultTheme.PropTypes.element.isRequired,
-  total: defaultTheme.PropTypes.number.isRequired,
-  label: defaultTheme.PropTypes.string.isRequired,
-  linkLabel: defaultTheme.PropTypes.string,
-  onClick: defaultTheme.PropTypes.func,
-  height: defaultTheme.PropTypes.number
+  icon: PropTypes.element.isRequired,
+  total: PropTypes.number.isRequired,
+  label: PropTypes.string.isRequired,
+  linkLabel: PropTypes.string,
+  onClick: PropTypes.func,
+  height: PropTypes.number
 } : {};
 
-exports.InfoCard = InfoCard;
+export { InfoCard as default };