@ntbjs/react-components 0.0.1-beta.41 → 0.0.1-beta.44

package/{AssetGallery-b52dbb14.js → AssetGallery-bd8b2316.js}

@@ -10,7 +10,7 @@ require('./Button-6f6b4ed4.js');
 require('./Checkbox-791a409f.js');
 require('./Radio-9271a4b6.js');
 require('./TextArea-70a74014.js');
-require('./TextInput-1ed37e22.js');
+require('./TextInput-770f2416.js');
 require('./Popover-0ff13419.js');
 var Tooltip = require('./Tooltip-85e7d561.js');
 var styled = require('styled-components');
@@ -910,6 +910,19 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
   };
 
   var calculateLayout = function calculateLayout() {
+    var assetsWithoutAKey = assetsProp.filter(function (a) {
+      return !a.key;
+    });
+
+    if (assetsWithoutAKey.length > 0) {
+      assetsProp = assetsProp.filter(function (a) {
+        return a.key;
+      });
+      assetsWithoutAKey.forEach(function (a) {
+        return console.warn("Omitted asset from the gallery because it was missing the unique `key` property.", a);
+      });
+    }
+
     if (viewMode === 'grid' && assetGalleryWidth.current > 0) {
       var row = [];
       var translateX = 0;

package/{TextInput-1ed37e22.js → TextInput-770f2416.js}

@@ -11,25 +11,30 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-var activeLabel = styled.css(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-size: 0.75rem;\n  padding: 0 3px;\n  ", "\n  top: -7px;\n  left: 7px;\n  opacity: 1;\n"])), function (props) {
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var activeLabel = styled.css(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-size: 0.75rem;\n  padding: 0 3px;\n  ", "\n  top: -7px;\n  left: 7px !important;\n  opacity: 1;\n"])), function (props) {
   return props.theme.themeProp('background', "linear-gradient(0deg, ".concat(props.theme.getColor('gray-900'), " calc(50% + 1px), transparent 50%)"), "linear-gradient(0deg, ".concat(props.theme.getColor('white'), " calc(50% + 1px), transparent 50%)"));
 });
 var placeholderBaseStyle = styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  color: inherit;\n  opacity: 0.7;\n"])));
-var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 13px;\n  left: 11px;\n  line-height: 1.2;\n  font-size: 0.875rem;\n  transition: all 150ms;\n  ", "\n\n  ", "\n"])), placeholderBaseStyle, function (props) {
+var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 13px;\n  left: 11px;\n  line-height: 1.2;\n  font-size: 0.875rem;\n  transition: all 150ms;\n  ", "\n\n  ", "\ncontent: \"\";\n  ", "\n"])), placeholderBaseStyle, function (props) {
   var _props$inputValue;
 
-  return (props.placeholderVisible || ((_props$inputValue = props.inputValue) === null || _props$inputValue === void 0 ? void 0 : _props$inputValue.length)) && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n    "])), activeLabel);
+  return (props.placeholderVisible || ((_props$inputValue = props.inputValue) === null || _props$inputValue === void 0 ? void 0 : _props$inputValue.length) > 0) && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n    "])), activeLabel);
+}, function (props) {
+  return props.hasIcon && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n      left: 35px;\n    "])));
 });
-var TextInput$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n  margin-top: 8px;\n\n  &:focus-within {\n    ", " {\n      ", "\n    }\n  }\n\n  ", "\n"])), TextInputLabel, activeLabel, function (props) {
-  return props.disabled && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 0.5;\n      > * {\n        cursor: not-allowed;\n      }\n    "])));
+var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  display: flex;\n  padding: 0 10px;\n\n  svg {\n    width: 15px;\n    opacity: 0.6;\n    transition: opacity 250ms;\n  }\n"])));
+var TextInput$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n  margin-top: 8px;\n\n  &:focus-within {\n    ", " {\n      ", "\n    }\n\n    ", " {\n      svg {\n        opacity: 1;\n      }\n    }\n  }\n\n  ", "\n"])), TextInputLabel, activeLabel, TextInputFieldIcon, function (props) {
+  return props.disabled && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 0.5;\n\n      > * {\n        cursor: not-allowed;\n      }\n    "])));
 });
-var TextInputField = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  width: 100%;\n  font-family: inherit;\n  font-size: 0.875rem;\n  border-radius: 2px;\n  padding: 12px 10px;\n  margin: 0 0 1.07143rem;\n  color: inherit;\n  ", "\n  border: 1px solid;\n  ", "\n  border-radius: 3px;\n  box-sizing: border-box;\n  appearance: none;\n  transition: border-color 350ms;\n\n  ", "\n\n  &::placeholder {\n    ", "\n  }\n\n  :focus {\n    outline: none;\n    ", "\n  }\n"])), function (props) {
+var TextInputField = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  width: 100%;\n  font-family: inherit;\n  font-size: 0.875rem;\n  border-radius: 2px;\n  padding: 12px 10px;\n  margin: 0 0 1.07143rem;\n  color: inherit;\n  ", "\n  border: 1px solid;\n  ", "\n  border-radius: 3px;\n  box-sizing: border-box;\n  appearance: none;\n  transition: border-color 350ms;\n\n  ", "\n\n  ", "\n  &::placeholder {\n    ", "\n  }\n\n  :focus {\n    outline: none;\n    ", "\n  }\n"])), function (props) {
   return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
 }, function (props) {
   return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
 }, function (props) {
-  return props.error && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n      border-color: ", " !important;\n    "])), props.theme.getColor('red-500'));
+  return props.error && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n      border-color: ", " !important;\n    "])), props.theme.getColor('red-500'));
+}, function (props) {
+  return props.hasIcon && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n      padding-left: 35px;\n    "])));
 }, placeholderBaseStyle, function (props) {
   return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'));
 });
@@ -44,6 +49,7 @@ var TextInput = React__default['default'].forwardRef(function TextInput(_ref, fo
       disabled = _ref.disabled,
       autoComplete = _ref.autoComplete,
       error = _ref.error,
+      icon = _ref.icon,
       onChange = _ref.onChange,
       onBlur = _ref.onBlur;
 
@@ -75,8 +81,9 @@ var TextInput = React__default['default'].forwardRef(function TextInput(_ref, fo
   }, label && React__default['default'].createElement(TextInputLabel, {
     htmlFor: "text-input-".concat(uniqueId),
     placeholderVisible: Boolean(placeholder),
+    hasIcon: Boolean(icon),
     inputValue: controlledValue
-  }, label, required && ' *'), React__default['default'].createElement(TextInputField, {
+  }, label, required && ' *'), React__default['default'].createElement(TextInputFieldIcon, null, icon), React__default['default'].createElement(TextInputField, {
     ref: forwardedRef,
     value: controlledValue,
     name: name,
@@ -84,6 +91,7 @@ var TextInput = React__default['default'].forwardRef(function TextInput(_ref, fo
     required: required,
     disabled: disabled,
     autoComplete: autoComplete,
+    hasIcon: Boolean(icon),
     error: error,
     id: "text-input-".concat(uniqueId),
     onChange: onInputChange,
@@ -100,6 +108,7 @@ TextInput.propTypes = process.env.NODE_ENV !== "production" ? {
   disabled: defaultTheme.PropTypes.bool,
   autoComplete: defaultTheme.PropTypes.string,
   error: defaultTheme.PropTypes.bool,
+  icon: defaultTheme.PropTypes.element,
   onChange: defaultTheme.PropTypes.func,
   onBlur: defaultTheme.PropTypes.func
 } : {};

package/inputs/TextInput/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var TextInput = require('../../TextInput-1ed37e22.js');
+var TextInput = require('../../TextInput-770f2416.js');
 require('../../defaultTheme-18d7c1ee.js');
 require('styled-components');
 require('react');

package/inputs/index.js

@@ -7,7 +7,7 @@ var Button = require('../Button-6f6b4ed4.js');
 var Checkbox = require('../Checkbox-791a409f.js');
 var Radio = require('../Radio-9271a4b6.js');
 var TextArea = require('../TextArea-70a74014.js');
-var TextInput = require('../TextInput-1ed37e22.js');
+var TextInput = require('../TextInput-770f2416.js');
 require('../defaultTheme-18d7c1ee.js');
 require('styled-components');
 require('react');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntbjs/react-components",
-  "version": "0.0.1-beta.41",
+  "version": "0.0.1-beta.44",
   "description": "NTBs common front-end design utilities and React components.",
   "scripts": {
     "build": "cross-env NODE_ENV=production rollup -c",

package/ssr/index.js

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

package/widgets/AssetGallery/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var AssetGallery = require('../../AssetGallery-b52dbb14.js');
+var AssetGallery = require('../../AssetGallery-bd8b2316.js');
 require('../../defaultTheme-18d7c1ee.js');
 require('styled-components');
 require('react');
@@ -14,7 +14,7 @@ require('nanoid');
 require('../../Radio-9271a4b6.js');
 require('polished');
 require('../../TextArea-70a74014.js');
-require('../../TextInput-1ed37e22.js');
+require('../../TextInput-770f2416.js');
 require('../../Popover-0ff13419.js');
 require('@tippyjs/react');
 require('../../Tooltip-85e7d561.js');

package/widgets/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var AssetGallery = require('../AssetGallery-b52dbb14.js');
+var AssetGallery = require('../AssetGallery-bd8b2316.js');
 require('../defaultTheme-18d7c1ee.js');
 require('styled-components');
 require('react');
@@ -16,7 +16,7 @@ require('nanoid');
 require('../Radio-9271a4b6.js');
 require('polished');
 require('../TextArea-70a74014.js');
-require('../TextInput-1ed37e22.js');
+require('../TextInput-770f2416.js');
 require('../Popover-0ff13419.js');
 require('@tippyjs/react');
 require('../Tooltip-85e7d561.js');