@ntbjs/react-components 1.1.0-beta.6 → 1.1.0-beta.60

package/{ActionButton-90485300.js → ActionButton-c3f5ed94.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-870f7df1.js');
+var defaultTheme = require('./defaultTheme-50f2b88f.js');
 var React = require('react');
 var styled = require('styled-components');
 

package/Alert-3e4f8be1.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var defaultTheme = require('./defaultTheme-50f2b88f.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;

package/{AssetGallery-fa38a287.js → AssetGallery-edf42a11.js}

@@ -1,28 +1,30 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-870f7df1.js');
+var defaultTheme = require('./defaultTheme-50f2b88f.js');
 var React = require('react');
 var lodash = require('lodash');
-var TextInput = require('./TextInput-e4c6d536.js');
+var TextInput = require('./TextInput-a1083be3.js');
 var ResizeObserver = require('resize-observer-polyfill');
 var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
-var ActionButton = require('./ActionButton-90485300.js');
-require('./AutocompleteSelect-e2063407.js');
-require('./Button-a5327c37.js');
-require('./Checkbox-50f1f3c7.js');
-require('./CompactStarRating-f9997240.js');
-require('./CompactTextInput-8c9b061b.js');
-require('./MultiSelect-e4868f52.js');
-require('./Radio-0b46b2a8.js');
-require('./TextArea-8a0bd754.js');
-require('./Switch-aa384260.js');
-require('./Popover-616682bf.js');
-var Tooltip = require('./Tooltip-860530ff.js');
-require('./Tab-fc380f0b.js');
-require('./Tabs-d6f0aaf5.js');
-require('./Badge-34ad2850.js');
+var ActionButton = require('./ActionButton-c3f5ed94.js');
+require('./AutocompleteSelect-45be3cb4.js');
+require('./Button-dd271c4b.js');
+require('./Checkbox-012bbd3f.js');
+require('./CompactStarRating-942afff1.js');
+require('./CompactTextInput-e9c99aa3.js');
+require('./MultiSelect-5b008b32.js');
+require('./Radio-0594409d.js');
+require('./TextArea-6dad1bbe.js');
+require('./Switch-cd165c8c.js');
+require('./Alert-3e4f8be1.js');
+require('./Badge-9bcebe96.js');
+require('./Popover-11df9750.js');
+require('./Tab-bd0f3345.js');
+require('./Tabs-cfc35dc0.js');
+var Tooltip = require('./Tooltip-f4f9ab8f.js');
 var styled = require('styled-components');
 var polished = require('polished');
+var warningCircle = require('./warning-circle-24522402.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -153,29 +155,15 @@ var OverlayInfoBottomActions = styled__default['default'].div.attrs(defaultTheme
 var ConsumerDefinedOverlay$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n"])));
 var Fragment$1 = styled__default['default'].div(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral([""])));
 
-function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
+function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
 
-var _ref$6 = /*#__PURE__*/React__namespace.createElement("path", {
+var _ref$5 = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "currentColor",
   d: "M12 0a12 12 0 1012 12A12 12 0 0012 0zM9.6 18l-6-6 1.69-1.69L9.6 14.6l9.11-9.1 1.69 1.7z",
   fillOpacity: 0.9
 });
 
 function SvgCheckCircleFilled(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24"
-  }, props), _ref$6);
-}
-
-function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
-
-var _ref$5 = /*#__PURE__*/React__namespace.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"
-});
-
-function SvgWarningCircle(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24"
@@ -509,7 +497,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
   }, typeIcon), ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default['default'].createElement(OverlayInfoTopNote, {
     title: asset.note.title,
     assetTitle: asset.title
-  }, asset.note.icon ? asset.note.icon : React__default['default'].createElement(SvgWarningCircle, null), React__default['default'].createElement(OverlayInfoTopNoteTitle, null, asset.note.title)))), React__default['default'].createElement(OverlayInfoBottom, null, selectable && React__default['default'].createElement(OverlayInfoBottomSelectButton, {
+  }, asset.note.icon ? asset.note.icon : React__default['default'].createElement(warningCircle.SvgWarningCircle, null), React__default['default'].createElement(OverlayInfoTopNoteTitle, null, asset.note.title)))), React__default['default'].createElement(OverlayInfoBottom, null, selectable && React__default['default'].createElement(OverlayInfoBottomSelectButton, {
     selected: selected
   }, React__default['default'].createElement(SvgCheckCircleFilled, {
     onClick: onSelectClick
@@ -808,7 +796,7 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
     ref: cardRef
   }, ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default['default'].createElement(Note, {
     title: asset.note.title
-  }, asset.note.icon ? asset.note.icon : React__default['default'].createElement(SvgWarningCircle, null), React__default['default'].createElement(NoteTitle, null, asset.note.title)), React__default['default'].createElement(Asset, {
+  }, asset.note.icon ? asset.note.icon : React__default['default'].createElement(warningCircle.SvgWarningCircle, null), React__default['default'].createElement(NoteTitle, null, asset.note.title)), React__default['default'].createElement(Asset, {
     "data-id": "ss"
   }, asset.previewUrl && renderPreview(asset)), React__default['default'].createElement(Info, null, React__default['default'].createElement("div", {
     style: {
@@ -1124,7 +1112,7 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
     var minTranslateYPlusHeight = yOffset - containerOffset - bufferTop;
     var maxTranslateY = yOffset - containerOffset + scrollerHeight + bufferBottom;
     var finalizedAssets = calculatedAssets.current.map(function (asset) {
-      if (asset.layout.translateY + asset.layout.height < minTranslateYPlusHeight || asset.layout.translateY > maxTranslateY) {
+      if (scrollElement.self == window && (asset.layout.translateY + asset.layout.height < minTranslateYPlusHeight || asset.layout.translateY > maxTranslateY)) {
         asset.layout.show = false;
       } else {
         asset.layout.show = true;

package/{AssetPreviewTopBar-777c726a.js → AssetPreviewTopBar-159b9885.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-870f7df1.js');
+var defaultTheme = require('./defaultTheme-50f2b88f.js');
 var React = require('react');
 var styled = require('styled-components');
 var close = require('./close-ebf2f3cf.js');
@@ -32,7 +32,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var AssetPreviewTopBar$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  box-sizing: border-box;\n  align-items: center;\n  border-bottom: 1px solid;\n  clip-path: inset(0px 0px -10px 0px);\n  color: inherit;\n  display: flex;\n  font-family: ", ";\n  font-weight: 400;\n  min-height: 72px;\n  padding: 0 24px;\n  width: 100%;\n\n  ", "\n\n  ", "\n"])), function (props) {
+var AssetPreviewTopBar$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  box-sizing: border-box;\n  align-items: center;\n  border-bottom: 1px solid;\n  color: inherit;\n  display: flex;\n  font-family: ", ";\n  font-weight: 400;\n  min-height: 72px;\n  padding: 0 24px;\n  width: 100%;\n\n  ", "\n\n  ", "\n"])), function (props) {
   return props.theme.primaryFontFamily;
 }, function (props) {
   return props.theme.themeProp('border-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-200'));

package/{AutocompleteSelect-e2063407.js → AutocompleteSelect-45be3cb4.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-870f7df1.js');
+var defaultTheme = require('./defaultTheme-50f2b88f.js');
 var React = require('react');
 var nanoid = require('nanoid');
 var lodash = require('lodash');
 var styled = require('styled-components');
 var Select = require('react-select');
-var reactSelectCreatable_esm = require('./react-select-creatable.esm-9283eec1.js');
+var reactSelectCreatable_esm = require('./react-select-creatable.esm-2f23d6c6.js');
 var reactSelectAsyncPaginate = require('react-select-async-paginate');
 var close = require('./close-ebf2f3cf.js');
 var expandMore = require('./expand-more-94585605.js');
@@ -52,7 +52,7 @@ var Control = styled__default['default'](Select.components.Control).attrs(defaul
 }, function (props) {
   return props.error && !props.isFocused && props.theme.themeProp('background', '#901d1d', '#f7d5d0');
 });
-var Option$1 = styled__default['default'](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    min-height: 22px;\n    height: 22px;\n    display: flex;\n    align-items: center;\n    padding: 6px;\n    cursor: pointer;\n    ", "\n    ", "\n    ", "\n      ", "\n  }\n"])), function (props) {
+var Option$1 = styled__default['default'](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    min-height: 22px;\n    height: 22px;\n    display: flex;\n    align-items: center;\n    padding: 6px;\n    cursor: pointer;\n    ", "\n    ", "\n    ", "\n      ", "\n  }\n  svg {\n    width: 15px;\n    margin: 0 9px 0 0;\n  }\n  a {\n    display: flex;\n    text-decoration: none;\n    color: inherit;\n  }\n"])), function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
 }, function (props) {
   return props.isFocused && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n        ", "\n      "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
@@ -226,7 +226,7 @@ var AutocompleteSelect = React__default['default'].forwardRef(function Autocompl
       switch (actionMeta.action) {
         case 'create-option':
           if (onUpdateCallback) {
-            onUpdateCallback(actionMeta.action, actionMeta.option);
+            onUpdateCallback(actionMeta.action, selected.value);
           }
 
           if (loadOptions) {
@@ -238,7 +238,7 @@ var AutocompleteSelect = React__default['default'].forwardRef(function Autocompl
 
         case 'select-option':
           if (onUpdateCallback) {
-            onUpdateCallback(actionMeta.action, actionMeta.option);
+            onUpdateCallback(actionMeta.action, selected.value);
           }
 
           setSelected(selected);
@@ -246,7 +246,7 @@ var AutocompleteSelect = React__default['default'].forwardRef(function Autocompl
 
         case 'remove-value':
           if (onUpdateCallback) {
-            onUpdateCallback(actionMeta.action, actionMeta.removedValue);
+            onUpdateCallback(actionMeta.action, selected.value);
           }
 
           setSelected(selected);
@@ -254,7 +254,7 @@ var AutocompleteSelect = React__default['default'].forwardRef(function Autocompl
 
         case 'pop-value':
           if (onUpdateCallback) {
-            onUpdateCallback(actionMeta.action, actionMeta.removedValue);
+            onUpdateCallback(actionMeta.action, selected.value);
           }
 
           setSelected(selected);
@@ -262,7 +262,7 @@ var AutocompleteSelect = React__default['default'].forwardRef(function Autocompl
 
         case 'deselect-option':
           if (onUpdateCallback) {
-            onUpdateCallback(actionMeta.action, actionMeta.option);
+            onUpdateCallback(actionMeta.action, selected.value);
           }
 
           setSelected(selected);
@@ -274,7 +274,7 @@ var AutocompleteSelect = React__default['default'].forwardRef(function Autocompl
 
         default:
           if (onUpdateCallback) {
-            onUpdateCallback(actionMeta.action, actionMeta.option);
+            onUpdateCallback(actionMeta.action, selected.value);
           }
 
           setSelected(selected);
@@ -298,7 +298,7 @@ AutocompleteSelect.propTypes = process.env.NODE_ENV !== "production" ? {
   label: defaultTheme.PropTypes.string,
   placeholder: defaultTheme.PropTypes.string,
   availableOptions: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.object),
-  selectedOption: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.object),
+  selectedOption: defaultTheme.PropTypes.object,
   loadOptions: defaultTheme.PropTypes.func,
   loadingMessageFunc: defaultTheme.PropTypes.func,
   createNewOptionMessageFunc: defaultTheme.PropTypes.func,
@@ -326,9 +326,11 @@ AutocompleteSelect.defaultProps = {
 };
 
 var Option = function Option(props) {
-  return React__default['default'].createElement(Option$1, defaultTheme._extends({
+  return !props.data.link ? React__default['default'].createElement(Option$1, defaultTheme._extends({
     className: "menu-item"
-  }, props));
+  }, props)) : React__default['default'].createElement(Option$1, props, React__default['default'].createElement("a", {
+    href: props.data.link
+  }, props.data.icon, props.label));
 };
 
 var SingleValue = function SingleValue(props) {
@@ -337,6 +339,14 @@ var SingleValue = function SingleValue(props) {
   }, props));
 };
 
+Option.propTypes = process.env.NODE_ENV !== "production" ? {
+  data: defaultTheme.PropTypes.shape({
+    icon: defaultTheme.PropTypes.node,
+    link: defaultTheme.PropTypes.string
+  }),
+  label: defaultTheme.PropTypes.string
+} : {};
+
 var DropdownIndicator = function DropdownIndicator(props) {
   return React__default['default'].createElement(DropdownIndicator$1, defaultTheme._extends({
     className: "dropdown-indicator"

package/{Badge-34ad2850.js → Badge-9bcebe96.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-870f7df1.js');
+var defaultTheme = require('./defaultTheme-50f2b88f.js');
 var React = require('react');
 var styled = require('styled-components');
 

package/{Button-a5327c37.js → Button-dd271c4b.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-870f7df1.js');
+var defaultTheme = require('./defaultTheme-50f2b88f.js');
 var React = require('react');
 var styled = require('styled-components');
-var Popover = require('./Popover-616682bf.js');
-var ContextMenu = require('./ContextMenu-59c2a64f.js');
+var Popover = require('./Popover-11df9750.js');
+var ContextMenu = require('./ContextMenu-d088833b.js');
 var expandMore = require('./expand-more-94585605.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/{Checkbox-50f1f3c7.js → Checkbox-012bbd3f.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-870f7df1.js');
+var defaultTheme = require('./defaultTheme-50f2b88f.js');
 var React = require('react');
 var nanoid = require('nanoid');
 var styled = require('styled-components');
@@ -107,14 +107,14 @@ var Checkbox = React__default['default'].forwardRef(function Checkbox(_ref, forw
   }, React__default['default'].createElement("path", {
     d: "m3.68,8.45L0,4.75l1.21-1.21,2.47,2.45L9.7,0l1.21,1.23-7.22,7.22Z",
     fill: "currentColor"
-  }))), typeof label === 'string' && label.length > 0 && React__default['default'].createElement(CheckboxVisualLabel, null, label)), typeof descriptionText === 'string' && descriptionText.length > 0 && React__default['default'].createElement(Description, {
+  }))), (typeof label === 'string' && label.length > 0 || defaultTheme._typeof(label) === 'object') && React__default['default'].createElement(CheckboxVisualLabel, null, label)), typeof descriptionText === 'string' && descriptionText.length > 0 && React__default['default'].createElement(Description, {
     error: hasError
   }, descriptionText));
 });
 Checkbox.propTypes = process.env.NODE_ENV !== "production" ? {
   checked: defaultTheme.PropTypes.bool,
   defaultChecked: defaultTheme.PropTypes.bool,
-  label: defaultTheme.PropTypes.string,
+  label: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.element]),
   disabled: defaultTheme.PropTypes.bool,
   readOnly: defaultTheme.PropTypes.bool,
   name: defaultTheme.PropTypes.string,

package/{CompactStarRating-f9997240.js → CompactStarRating-942afff1.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-870f7df1.js');
+var defaultTheme = require('./defaultTheme-50f2b88f.js');
 var React = require('react');
 var styled = require('styled-components');
 var lodash = require('lodash');
@@ -31,21 +31,19 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-var CompactStarRating$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 500;\n  height: 24px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n\n  ", "\n"])), function (props) {
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var CompactStarRating$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 500;\n  height: 24px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n\n  input[type='number'] {\n    position: absolute;\n    opacity: 0;\n    pointer-events: none;\n    margin: 0;\n  }\n"])), function (props) {
   return props.theme.primaryFontFamily;
-}, function (props) {
-  return props.disabled && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n      button {\n        cursor: not-allowed;\n      }\n      > * {\n        cursor: not-allowed;\n      }\n    "])));
 });
-var labelWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  width: 33.3%;\n  display: flex;\n  align-items: center;\n  text-align: left;\n  font: normal normal normal 14px/16px Roboto;\n  letter-spacing: 0px;\n  padding: 0;\n  height: 19px;\n\n  ", "\n"])), function (props) {
+var labelWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  width: 33.3%;\n  display: flex;\n  align-items: center;\n  text-align: left;\n  font: normal normal normal 14px/16px Roboto;\n  letter-spacing: 0px;\n  padding: 0;\n  height: 19px;\n\n  ", "\n"])), function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
 });
-var starsWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  width: 66.6%;\n  border-radius: 3px;\n  height: 24px;\n\n  ", "\n\n  ", "\n"])), function (props) {
-  return props.error && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n      ", ";\n    "])), props.theme.themeProp('background', '#7F1B1B', '#FBEAE6'));
+var starsWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  width: 66.6%;\n  border-radius: 3px;\n  height: 24px;\n  align-items: center;\n\n  ", "\n\n  ", "\n"])), function (props) {
+  return props.error && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n      ", ";\n    "])), props.theme.themeProp('background', '#7F1B1B', '#FBEAE6'));
 }, function (props) {
-  return props.warning && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n      ", ";\n    "])), props.theme.themeProp('background', '#634E01', '#FFFDE8'));
+  return props.warning && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n      ", ";\n    "])), props.theme.themeProp('background', '#634E01', '#FFFDE8'));
 });
-var Star = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n\n  svg {\n    height: 12px;\n    padding-left: 4px;\n    transition: color 250ms;\n  }\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (props) {
+var Star = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n\n  svg {\n    height: 12px;\n    padding-left: 4px;\n    transition: color 250ms;\n  }\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", "\n"])), function (props) {
   return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
 }, function (props) {
   return props.error && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
@@ -53,8 +51,10 @@ var Star = styled__default['default'].button.attrs(defaultTheme.applyDefaultThem
   return props.warning && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
 }, function (props) {
   return props.hover && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500'));
+}, function (props) {
+  return props.disabled && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n      button {\n        cursor: not-allowed;\n      }\n      > * {\n        cursor: not-allowed;\n      }\n    "])));
 });
-var StarFill = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n\n  svg {\n    height: 12px;\n    padding-left: 4px;\n    transition: color 250ms;\n  }\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (props) {
+var StarFill = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n\n  svg {\n    height: 12px;\n    padding-left: 4px;\n    transition: color 250ms;\n  }\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", "\n"])), function (props) {
   return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
 }, function (props) {
   return props.error && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
@@ -62,6 +62,8 @@ var StarFill = styled__default['default'].button.attrs(defaultTheme.applyDefault
   return props.warning && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
 }, function (props) {
   return props.hover && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500'));
+}, function (props) {
+  return props.disabled && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n      button {\n        cursor: not-allowed;\n      }\n      > * {\n        cursor: not-allowed;\n      }\n    "])));
 });
 
 function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
@@ -99,17 +101,20 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
       max = _ref.max,
       defaultValue = _ref.defaultValue,
       value = _ref.value,
+      name = _ref.name,
       viewEmpty = _ref.viewEmpty,
       onChange = _ref.onChange,
       onBlur = _ref.onBlur,
       error = _ref.error,
       warning = _ref.warning,
       readOnly = _ref.readOnly,
-      props = defaultTheme._objectWithoutProperties(_ref, ["label", "icon", "iconFill", "max", "defaultValue", "value", "viewEmpty", "onChange", "onBlur", "error", "warning", "readOnly"]);
+      hidden = _ref.hidden,
+      getRatingProp = _ref.getRating,
+      props = defaultTheme._objectWithoutProperties(_ref, ["label", "icon", "iconFill", "max", "defaultValue", "value", "name", "viewEmpty", "onChange", "onBlur", "error", "warning", "readOnly", "hidden", "getRating"]);
 
   var stars = Array.from(Array(max).keys());
 
-  var _useState = React.useState(defaultValue),
+  var _useState = React.useState(value || defaultValue),
       _useState2 = defaultTheme._slicedToArray(_useState, 2),
       rating = _useState2[0],
       setRating = _useState2[1];
@@ -126,8 +131,8 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
 
   var inputRef = React.useRef();
   React.useEffect(function () {
-    setRating(value);
-  }, [value]);
+    setRating(value || defaultValue);
+  }, [value, defaultValue]);
   var hasError = React.useMemo(function () {
     if (lodash.isBoolean(error)) {
       return error;
@@ -143,20 +148,24 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
     return !lodash.isEmpty(warning);
   }, [warning]);
   React.useEffect(function () {
-    var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
-    nativeInputValueSetter.call(inputRef.current, String(rating));
-    var ev2 = new Event('input', {
-      bubbles: true
+    if (lodash.isFunction(getRatingProp)) {
+      getRatingProp(rating);
+    }
+  }, [rating]);
+  React.useEffect(function () {
+    inputRef.current.value = String(rating);
+    onChange({
+      target: inputRef.current
     });
-    ev2.simulated = true;
-    inputRef.current.dispatchEvent(ev2);
   }, [rating]);
 
   var starIconRender = function starIconRender(key) {
     if (rating > 0 && rating >= key + 1) {
       return React__default['default'].createElement(StarFill, {
         disabled: readOnly,
-        onClick: function onClick() {
+        onClick: function onClick(event) {
+          event.preventDefault();
+
           if (key + 1 > 1) {
             return setRating(key + 1);
           } else if (key + 1 == 1) {
@@ -181,7 +190,8 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
     } else if (viewEmpty) {
       return React__default['default'].createElement(Star, {
         disabled: readOnly,
-        onClick: function onClick() {
+        onClick: function onClick(event) {
+          event.preventDefault();
           setRating(key + 1);
         },
         onMouseEnter: function onMouseEnter() {
@@ -200,19 +210,22 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
     }
   };
 
+  if (hidden) return null;
   return React__default['default'].createElement(CompactStarRating$1, defaultTheme._extends({
-    disabled: readOnly,
-    ref: forwardedRef
-  }, props), React__default['default'].createElement(labelWidth, null, label), React__default['default'].createElement("input", {
-    type: "hidden",
-    ref: inputRef,
+    ref: forwardedRef,
     onChange: onChange,
     onBlur: onBlur
-  }), React__default['default'].createElement(starsWidth, {
+  }, props), React__default['default'].createElement(labelWidth, null, label), React__default['default'].createElement(starsWidth, {
     error: hasError,
     warning: hasWarning
   }, stars.map(function (key) {
-    return starIconRender(key);
+    return React__default['default'].createElement("div", {
+      key: key
+    }, React__default['default'].createElement("input", {
+      type: "number",
+      name: name,
+      ref: inputRef
+    }), starIconRender(key));
   })));
 });
 CompactStarRating.defaultProps = {
@@ -222,12 +235,14 @@ CompactStarRating.defaultProps = {
   defaultValue: 0,
   viewEmpty: true,
   icon: React__default['default'].createElement(SvgStar, null),
-  iconFill: React__default['default'].createElement(SvgStarFilled, null)
+  iconFill: React__default['default'].createElement(SvgStarFilled, null),
+  hidden: false
 };
 CompactStarRating.propTypes = process.env.NODE_ENV !== "production" ? {
   value: defaultTheme.PropTypes.number,
   defaultValue: defaultTheme.PropTypes.number,
   label: defaultTheme.PropTypes.string,
+  name: defaultTheme.PropTypes.string,
   icon: defaultTheme.PropTypes.element,
   iconFill: defaultTheme.PropTypes.element,
   max: defaultTheme.PropTypes.number,
@@ -236,7 +251,9 @@ CompactStarRating.propTypes = process.env.NODE_ENV !== "production" ? {
   onBlur: defaultTheme.PropTypes.func,
   error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
   warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
-  readOnly: defaultTheme.PropTypes.bool
+  readOnly: defaultTheme.PropTypes.bool,
+  hidden: defaultTheme.PropTypes.bool,
+  getRating: defaultTheme.PropTypes.func
 } : {};
 
 exports.CompactStarRating = CompactStarRating;