@ntbjs/react-components 1.2.0-rc.5 → 1.2.0-rc.7

package/{ActionButton-761050a9.js → ActionButton-f150aedb.js}

@@ -1,9 +1,8 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-c137e17f.js');
+var defaultTheme = require('./defaultTheme-0dd58df6.js');
 var React = require('react');
 var styled = require('styled-components');
-var polished = require('polished');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -11,18 +10,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var _templateObject, _templateObject2;
-var ActionButton$1 = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  height: 40px;\n  width: 40px;\n  border: 0;\n  color: inherit;\n  background-color: transparent;\n  ", "\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: 0 0;\n  transition: background-size 250ms ease;\n  cursor: pointer;\n\n  ", "\n\n  ", "\n\n  &:disabled {\n    opacity: 0.5;\n    color: inherit;\n    cursor: not-allowed;\n  }\n\n  svg {\n    width: 100%;\n    max-height: 20px;\n    max-width: 20px;\n    pointer-events: none;\n    transition: color 250ms;\n  }\n"])), function (props) {
-  var _props$backgroundColo, _props$backgroundColo2, _props$backgroundColo3, _props$backgroundColo4;
-
-  var darkThemeBgColor = (_props$backgroundColo = props === null || props === void 0 ? void 0 : (_props$backgroundColo2 = props.backgroundColors) === null || _props$backgroundColo2 === void 0 ? void 0 : _props$backgroundColo2[0]) !== null && _props$backgroundColo !== void 0 ? _props$backgroundColo : props.theme.getColor('gray-600');
-  var lightThemeBgColor = (_props$backgroundColo3 = props === null || props === void 0 ? void 0 : (_props$backgroundColo4 = props.backgroundColors) === null || _props$backgroundColo4 === void 0 ? void 0 : _props$backgroundColo4[1]) !== null && _props$backgroundColo3 !== void 0 ? _props$backgroundColo3 : props.theme.getColor('gray-200');
-  return props.theme.themeProp('background-image', "radial-gradient(circle at center, ".concat(darkThemeBgColor, " 50%, transparent 50%)"), "radial-gradient(circle at center, ".concat(lightThemeBgColor, " 50%, transparent 50%)"));
+var ActionButton$1 = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  height: 40px;\n  width: 40px;\n  border: 0;\n  color: inherit;\n  background-color: transparent;\n  ", "\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: 0 0;\n  transition: background-size 250ms ease;\n  cursor: pointer;\n\n  ", "\n\n  &:disabled {\n    opacity: 0.5;\n    color: inherit;\n    cursor: not-allowed;\n  }\n\n  svg {\n    width: 100%;\n    max-height: 20px;\n    max-width: 20px;\n    pointer-events: none;\n    transition: color 250ms;\n  }\n"])), function (props) {
+  return props.theme.themeProp('background-image', "radial-gradient(circle at center, ".concat(props.theme.getColor('gray-600'), " 50%, transparent 50%)"), "radial-gradient(circle at center, ".concat(props.theme.getColor('gray-200'), " 50%, transparent 50%)"));
 }, function (props) {
   return styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n    ", ":not(:disabled) {\n      background-size: 200% 200%;\n\n      svg {\n        ", ";\n      }\n    }\n  "])), props.active ? '' : ':hover', function (props) {
     return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
   });
-}, function (props) {
-  return props.useShadow ? props.theme.themeProp('box-shadow', "0px 3px 6px ".concat(polished.rgba(props.theme.getColor('black'), 0.7)), "0px 3px 6px ".concat(props.theme.getColor('black'))) : null;
 });
 
 var ActionButton = React__default['default'].forwardRef(function ActionButton(_ref, forwardedRef) {
@@ -43,11 +36,8 @@ ActionButton.propTypes = process.env.NODE_ENV !== "production" ? {
   icon: defaultTheme.PropTypes.element.isRequired,
   disabled: defaultTheme.PropTypes.bool,
   active: defaultTheme.PropTypes.bool,
-  onClick: defaultTheme.PropTypes.func,
-  backgroundColors: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.string)
+  onClick: defaultTheme.PropTypes.func
 } : {};
-ActionButton.defaultProps = {
-  onClick: function onClick() {}
-};
+ActionButton.defaultProps = {};
 
 exports.ActionButton = ActionButton;

package/Alert-d7863c58.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var defaultTheme = require('./defaultTheme-0dd58df6.js');
+var React = require('react');
+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);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var Alert$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 17px 30px;\n  svg {\n    width: 12px;\n    padding-right: 5px;\n  }\n\n  ", "\n\n  ", "\n\n    ", ";\n\n  ", ";\n"])), function (props) {
+  return props.warning && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n    "])), props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400')));
+}, function (props) {
+  return props.error && styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n    "])), props.theme.themeProp('background', '#7F1B1B', props.theme.getColor('red-200')));
+}, function (props) {
+  return props.align === 'left' && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n      text-align: left;\n    "])));
+}, function (props) {
+  return props.align === 'center' && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n      text-align: center;\n    "])));
+});
+var AlertRender = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n  width: 100%;\n"])));
+
+var Alert = React__default['default'].forwardRef(function Alert(_ref, forwardedRef) {
+  var warning = _ref.warning,
+      error = _ref.error,
+      alertMessage = _ref.alertMessage,
+      align = _ref.align,
+      icon = _ref.icon,
+      props = defaultTheme._objectWithoutProperties(_ref, ["warning", "error", "alertMessage", "align", "icon"]);
+
+  var boxRender = function boxRender(warning, error) {
+    if (warning) {
+      return React__default['default'].createElement(AlertRender, null, icon, " ", alertMessage);
+    } else if (error) {
+      return React__default['default'].createElement(AlertRender, null, icon, " ", alertMessage);
+    }
+  };
+
+  return React__default['default'].createElement(Alert$1, defaultTheme._extends({
+    ref: forwardedRef,
+    alertMessage: alertMessage,
+    warning: warning,
+    error: error,
+    align: align
+  }, props), boxRender(warning, error));
+});
+Alert.propTypes = process.env.NODE_ENV !== "production" ? {
+  warning: defaultTheme.PropTypes.bool,
+  error: defaultTheme.PropTypes.bool,
+  icon: defaultTheme.PropTypes.element,
+  align: defaultTheme.PropTypes.oneOf(['left', 'center']),
+  alertMessage: defaultTheme.PropTypes.string
+} : {};
+Alert.defaultProps = {
+  warning: false,
+  error: false,
+  align: 'left',
+  alertMessage: 'Use subject to restrictions. Editorial use only, no commercial use without prior consent from rights holder.'
+};
+
+exports.Alert = Alert;