@ntbjs/react-components 2.0.0-rc.29 → 2.0.0-rc.30

package/build/SummaryCard-24040650.js

@@ -1,223 +0,0 @@
-import { _ as _extends } from './_rollupPluginBabelHelpers-c245b26a.js';
-import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
-import React__default from 'react';
-import { S as SvgWarningCircle } from './warning-circle-24f3efcd.js';
-import { A as Alert } from './Alert-e6847a22.js';
-import './Badge-d93586a9.js';
-import './Popover-20050b91.js';
-import './Tab-04d435c3.js';
-import './Tabs-74d1ea8a.js';
-import './Tooltip-c1d1199e.js';
-import './VerificationStatusIcon-49cb1c1b.js';
-import styled, { css } from 'styled-components';
-import { FloatingArrow } from '@floating-ui/react';
-
-const shouldForwardProp = prop => {
-  return prop !== 'theme' && !prop.startsWith('$');
-};
-const SummaryCard$1 = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: flex;
-  flex-direction: column;
-  border-radius: 4px;
-  width: ${props => props.width ? `${props.width}px` : '100%'};
-  ${props => props.view === 'compact' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white')) : 'background: transparent'};
-
-  ${props => props.$useBorder ? props.theme.themeProp('border', `1px solid ${props.theme.getColor('gray-500')}`, `1px solid ${props.theme.getColor('gray-300')}`) : null}
-`;
-const Gutter = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  ${props => {
-  if (props.renderAsMargin) {
-    return css`
-        margin-bottom: ${props.$gutter || 8}px;
-      `;
-  } else {
-    return css`
-        padding-bottom: ${props.$gutter || 8}px;
-      `;
-  }
-}}
-  padding-bottom: ${props => props.$gutter || 8}px;
-`;
-const Header = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 16px;
-`;
-const HeaderLeft = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-
-  > * {
-    margin-right: 4px;
-  }
-`;
-const HeaderRight = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-
-  > * {
-    margin-left: 4px;
-  }
-`;
-const Title = styled.span.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: inline-block;
-  padding: 0 16px;
-  font: normal normal 500 14px/19px Roboto;
-  letter-spacing: 0.28px;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  box-sizing: border-box;
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
-`;
-const Description = styled.span.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  padding: 0 16px;
-  text-align: left;
-  font: normal normal normal 12px/16px Roboto;
-  letter-spacing: 0.24px;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  box-sizing: border-box;
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
-`;
-const Instruction = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)``;
-const Footer = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 16px;
-`;
-const FooterLeft = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-
-  > * {
-    margin-right: 4px;
-  }
-`;
-const FooterRight = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-
-  > * {
-    margin-left: 4px;
-  }
-`;
-styled(FloatingArrow).withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  ${props => props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white'))}
-`;
-
-const SummaryCard = React__default.forwardRef(function AssetSummaryCard({
-  activeSummaryCard,
-  title,
-  description,
-  instructions,
-  instructionsType,
-  headerLeft,
-  headerRight,
-  footerLeft,
-  footerRight,
-  width,
-  useBorder,
-  view,
-  ...props
-}, forwardedRef) {
-  const shouldRenderInstructions = !!instructions;
-  const shouldRenderHeader = !!headerLeft || !!headerRight;
-  const shouldRenderFooter = !!footerLeft || !!footerRight;
-  const shouldAddGutterAfterInstructions = shouldRenderInstructions && shouldRenderFooter;
-  const shouldAddGutterAfterTitle = !!title && (!!description || !!instructions || shouldRenderFooter);
-  if (!activeSummaryCard) return null;
-  return React__default.createElement(SummaryCard$1, _extends({
-    ref: forwardedRef,
-    width: width,
-    useBorder: useBorder
-  }, props, {
-    view: view
-  }), shouldRenderHeader && React__default.createElement(React__default.Fragment, null, React__default.createElement(Gutter, {
-    gutter: 8
-  }), React__default.createElement(Header, null, React__default.createElement(HeaderLeft, null, headerLeft), React__default.createElement(HeaderRight, null, headerRight))), React__default.createElement(Gutter, {
-    gutter: shouldRenderHeader ? 8 : 16
-  }), title && React__default.createElement(Title, null, title), shouldAddGutterAfterTitle && React__default.createElement(Gutter, {
-    gutter: 4
-  }), description && React__default.createElement(Description, null, description), React__default.createElement(Gutter, {
-    gutter: 16
-  }), shouldRenderInstructions && React__default.createElement(Instruction, null, React__default.createElement(Alert, {
-    icon: React__default.createElement(SvgWarningCircle, null),
-    alertMessage: instructions,
-    type: instructionsType,
-    fontSize: 12,
-    verticalPadding: 12,
-    horizontalPadding: 16,
-    width: width,
-    lineClamp: 1
-  })), shouldAddGutterAfterInstructions && React__default.createElement(Gutter, {
-    gutter: 16
-  }), shouldRenderFooter && React__default.createElement(Footer, null, React__default.createElement(FooterLeft, null, footerLeft), React__default.createElement(FooterRight, null, footerRight)), shouldRenderFooter && React__default.createElement(Gutter, {
-    gutter: 16
-  }));
-});
-SummaryCard.propTypes = process.env.NODE_ENV !== "production" ? {
-  activeSummaryCard: PropTypes.bool,
-  title: PropTypes.string,
-  description: PropTypes.string,
-  instructions: PropTypes.string,
-  instructionsType: PropTypes.oneOf(['warning', 'error', 'info']),
-  headerLeft: PropTypes.node,
-  headerRight: PropTypes.node,
-  footerLeft: PropTypes.node,
-  footerRight: PropTypes.node,
-  width: PropTypes.number,
-  useBorder: PropTypes.bool,
-  view: PropTypes.string
-} : {};
-SummaryCard.defaultProps = {
-  title: '',
-  description: '',
-  instructions: '',
-  instructionsType: 'info',
-  headerLeft: null,
-  headerRight: null,
-  footerLeft: null,
-  footerRight: null,
-  useBorder: false,
-  activeSummaryCard: false
-};
-
-export { SummaryCard as S };

package/build/VerificationStatusIcon-49cb1c1b.js

@@ -1,95 +0,0 @@
-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';
-
-const VerificationIconWrapper = styled.div.attrs(applyDefaultTheme)`
-  ${props => props.background && css`
-    background-color: #000 !important;
-    width: fit-content;
-    padding: 6px 14px 6px 9px;
-    border-radius: 15px;
-}
-    `};
-`;
-const VerificationStatusIcon$1 = styled.div.attrs(applyDefaultTheme)`
-  display: flex;
-  position: relative;
-  font: normal normal normal 12px/16px Roboto;
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700'))};
-
-  ${props => props.background && props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-100'))};
-
-  svg {
-    height: ${props => props.iconHeight ?? 15}px;
-  }
-`;
-const VerificationStatusColor = styled.div.attrs(applyDefaultTheme)`
-  position: absolute;
-  bottom: 0;
-  left: ${props => (props.iconHeight ?? 15) * 2 / 3}px;
-  width: ${props => (props.iconHeight ?? 15) * 2 / 3}px;
-  height: ${props => (props.iconHeight ?? 15) * 2 / 3}px;
-  border-radius: 50%;
-  ${props => {
-  let darkThemeColor = props.theme.getColor('gray-100');
-  let lightThemeColor = props.theme.getColor('gray-500');
-  if (props.status === 'verified') {
-    darkThemeColor = props.theme.getColor('emerald-500');
-    lightThemeColor = props.theme.getColor('emerald-500');
-  } else if (props.status === 'pending') {
-    darkThemeColor = props.theme.getColor('signal-yellow-500');
-    lightThemeColor = props.theme.getColor('signal-yellow-500');
-  } else if (props.status === 'rejected') {
-    darkThemeColor = props.theme.getColor('red-600');
-    lightThemeColor = props.theme.getColor('red-600');
-  } else if (props.status === 'mixed') {
-    darkThemeColor = '#008CDB';
-    lightThemeColor = '#008CDB';
-  }
-  return props.theme.themeProp('background-color', darkThemeColor, lightThemeColor);
-}};
-`;
-
-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 SvgVerification(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "-2.5 0 24 24"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M9.3 12.662q-1.698 0-2.864-1.166T5.27 8.632q0-1.697 1.166-2.864T9.3 4.602q1.698 0 2.864 1.166t1.166 2.864q0 1.698-1.166 2.864T9.3 12.662zm0-1.86q.925 0 1.548-.622.622-.622.622-1.548t-.622-1.547q-.623-.623-1.548-.623t-1.548.623q-.622.622-.622 1.547t.622 1.548q.623.622 1.548.622zm0 12.686q-4.023-1.097-6.661-4.735Q0 15.113 0 10.616V3.482L9.3 0l9.3 3.482v7.134q0 4.498-2.639 8.137-2.638 3.639-6.661 4.735zm0-11.744zm0-9.765L1.86 4.757v5.86q0 1.769.507 3.421.507 1.653 1.408 3.083 1.254-.639 2.626-.999 1.373-.36 2.899-.36t2.898.36q1.373.36 2.627 1 .901-1.431 1.408-3.084.507-1.652.507-3.422V4.757L9.3 1.98zm0 15.643q-1.2 0-2.307.26-1.108.26-2.093.73.923 1.025 2.03 1.773 1.109.747 2.37 1.143 1.262-.395 2.363-1.143 1.102-.748 2.025-1.773-.985-.47-2.087-.73-1.102-.26-2.301-.26z"
-  })));
-}
-
-const VerificationStatusIcon = React__default.forwardRef(function VerificationStatusIcon({
-  status,
-  iconHeight,
-  background,
-  ...props
-}, forwardedRef) {
-  return React__default.createElement(VerificationIconWrapper, {
-    background: background
-  }, React__default.createElement(VerificationStatusIcon$1, _extends$1({
-    iconHeight: iconHeight,
-    background: background,
-    ref: forwardedRef
-  }, props), React__default.createElement(SvgVerification, null), React__default.createElement(VerificationStatusColor, {
-    iconHeight: iconHeight,
-    status: status,
-    background: background
-  })));
-});
-VerificationStatusIcon.propTypes = process.env.NODE_ENV !== "production" ? {
-  status: PropTypes.oneOf(['verified', 'pending', 'rejected', 'mixed']).isRequired,
-  iconHeight: PropTypes.number,
-  background: PropTypes.bool
-} : {};
-VerificationStatusIcon.defaultProps = {
-  iconHeight: 15,
-  background: false
-};
-
-export { VerificationStatusIcon as V };