@ntbjs/react-components 1.3.0-rc.43 → 1.3.0-rc.45

package/{AssetAction-304faafa.js → AssetAction-89d9aac8.js}

@@ -21,7 +21,7 @@ var polished = require('polished');
 var ContextMenu = require('./ContextMenu-4eb8fdc5.js');
 require('./AssetPreviewTopBar-b1fe3188.js');
 var ActionButton = require('./ActionButton-b2345555.js');
-require('./Button-6c06d4e4.js');
+require('./Button-25280e98.js');
 require('./Checkbox-ad9c9e54.js');
 require('./CompactAutocompleteSelect-5676b507.js');
 require('./CompactStarRating-d4cfae17.js');

package/{Button-6c06d4e4.js → Button-25280e98.js}

@@ -13,8 +13,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29;
-var MainContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  width: 150px;\n"])));
-var Button$1 = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  width: 100%;\n  transition: width 0.3s ease;\n  position: relative;\n  border-radius: 3px;\n  font-family: inherit;\n  font-size: 0.875rem;\n  font-weight: 400;\n  padding: 12px 16px;\n  cursor: pointer;\n  background: ", ";\n  border: 2px solid ", ";\n  transition: all 250ms, opacity 200ms;\n\n  &:hover,\n  &.dropdown-is-active {\n    background: #296c58;\n    border-color: #296c58;\n  }\n\n  ", "\n\n  && {\n    ", ";\n  }\n\n  && {\n    ", ";\n  }\n\n  && {\n    ", ";\n  }\n\n  && {\n    ", ";\n  }\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (props) {
+var MainContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  width: ", ";\n"])), function (props) {
+  return props.dynamic ? '150px' : 'auto';
+});
+var Button$1 = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  width: ", ";\n  position: relative;\n  border-radius: 3px;\n  font-family: inherit;\n  font-size: 0.875rem;\n  font-weight: 400;\n  padding: 12px 16px;\n  cursor: pointer;\n  background: ", ";\n  border: 2px solid ", ";\n  transition: all 250ms, opacity 200ms;\n\n  &:hover,\n  &.dropdown-is-active {\n    background: #296c58;\n    border-color: #296c58;\n  }\n\n  ", "\n\n  && {\n    ", ";\n  }\n\n  && {\n    ", ";\n  }\n\n  && {\n    ", ";\n  }\n\n  && {\n    ", ";\n  }\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (props) {
+  return props.dynamic ? '100%' : 'auto';
+}, function (props) {
   return props.theme.getColor('emerald-500');
 }, function (props) {
   return props.theme.getColor('emerald-500');
@@ -49,7 +53,7 @@ var Button$1 = styled__default["default"].button.attrs(defaultTheme.applyDefault
 }, function (props) {
   return props.singleAction && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n      display: flex;\n      align-items: center;\n      gap: 34px;\n      border-radius: 3px !important;\n      transition: all 250ms, opacity 200ms;\n    "])));
 });
-var ButtonContent = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  transition: width 0.3s ease;\n  align-items: center;\n  transform: scale(1);\n  opacity: 1;\n  transition: all 200ms;\n\n  > svg {\n    width: 100%;\n    max-width: 16px;\n    max-height: 16px;\n    margin-right: 8px;\n\n    ", ";\n\n    ", ";\n  }\n\n  ", "\n\n  ", ";\n"])), function (props) {
+var ButtonContent = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transform: scale(1);\n  opacity: 1;\n  transition: all 200ms;\n\n  > svg {\n    width: 100%;\n    max-width: 16px;\n    max-height: 16px;\n    margin-right: 8px;\n\n    ", ";\n\n    ", ";\n  }\n\n  ", "\n\n  ", ";\n"])), function (props) {
   return props.size === 'small' && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n        max-width: 13px;\n        max-height: 13px;\n      "])));
 }, function (props) {
   return props.size === 'x-small' && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n        max-width: 11px;\n        max-height: 11px;\n      "])));
@@ -64,7 +68,7 @@ var LoadingIndicator = styled__default["default"].div.attrs(defaultTheme.applyDe
 var LoadingIndicatorSvg = styled__default["default"].svg.attrs(defaultTheme.applyDefaultTheme)(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n  height: 100%;\n  color: inherit;\n  transform: rotate(-88deg);\n"])));
 var LoadingIndicatorSvgCircle = styled__default["default"].circle.attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n  transition: stroke-dashoffset 300ms linear;\n  stroke-dasharray: 113;\n"])));
 var ButtonWrapper = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n  white-space: nowrap;\n"])));
-var MainButtonContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n  display: inline-block;\n  width: ", ";\n  transition: width 0.3s ease;\n  button {\n    ", ";\n\n    ", ";\n  }\n"])), function (props) {
+var MainButtonContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n  display: inline-block;\n  width: ", ";\n  button {\n    ", ";\n\n    ", ";\n  }\n"])), function (props) {
   return !props.dropdownItems ? '100%' : '69.2%';
 }, function (props) {
   return props.dropdownItems && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n        border-bottom-right-radius: 0;\n        border-top-right-radius: 0;\n      "])));
@@ -81,21 +85,28 @@ var DropdownButtonContainer = styled__default["default"].div.attrs(defaultTheme.
 }, function (props) {
   return !props.singleAction && 'margin-bottom: 1px';
 });
+Button$1.defaultProps = {
+  dynamic: false
+};
 
-var _excluded = ["onClickEffect", "singleAction", "dropdownItems", "secondary", "outlined", "block", "icon", "size", "disabled", "loading", "className", "children"];
+var _excluded = ["onClickEffect", "singleAction", "dropdownItems", "secondary", "outlined", "block", "icon", "size", "disabled", "loading", "className", "children", "dynamic"];
 var Button = React__default["default"].forwardRef(function Button(_ref, forwardedRef) {
   var onClickEffect = _ref.onClickEffect,
-    singleAction = _ref.singleAction,
+    _ref$singleAction = _ref.singleAction,
+    singleAction = _ref$singleAction === void 0 ? false : _ref$singleAction,
     dropdownItems = _ref.dropdownItems,
     secondary = _ref.secondary,
     outlined = _ref.outlined,
     block = _ref.block,
     icon = _ref.icon,
-    size = _ref.size,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'normal' : _ref$size,
     disabled = _ref.disabled,
     loading = _ref.loading,
     className = _ref.className,
     children = _ref.children,
+    _ref$dynamic = _ref.dynamic,
+    dynamic = _ref$dynamic === void 0 ? false : _ref$dynamic,
     props = defaultTheme._objectWithoutProperties(_ref, _excluded);
   var _useState = React.useState(loading || false),
     _useState2 = defaultTheme._slicedToArray(_useState, 2),
@@ -146,8 +157,11 @@ var Button = React__default["default"].forwardRef(function Button(_ref, forwarde
   var handleDropdownClose = function handleDropdownClose() {
     setDropdownIsActive(false);
   };
-  return React__default["default"].createElement(ButtonWrapper, null, !singleAction ? React__default["default"].createElement(MainContainer, null, React__default["default"].createElement(MainButtonContainer, {
+  return React__default["default"].createElement(ButtonWrapper, null, !singleAction ? React__default["default"].createElement(MainContainer, {
+    dynamic: dynamic
+  }, React__default["default"].createElement(MainButtonContainer, {
     dropdownItems: dropdownItems,
+    dynamic: dynamic,
     secondary: secondary,
     outlined: outlined
   }, React__default["default"].createElement(Button$1, defaultTheme._extends({
@@ -155,6 +169,7 @@ var Button = React__default["default"].forwardRef(function Button(_ref, forwarde
     onClick: onClickEffect,
     singleAction: singleAction,
     dropdownItems: dropdownItems,
+    dynamic: dynamic,
     secondary: secondary,
     outlined: outlined,
     block: block,
@@ -245,11 +260,8 @@ Button.propTypes = process.env.NODE_ENV !== "production" ? {
   disabled: defaultTheme.PropTypes.bool,
   loading: defaultTheme.PropTypes.bool,
   className: defaultTheme.PropTypes.string,
-  children: defaultTheme.PropTypes.any.isRequired
+  children: defaultTheme.PropTypes.any.isRequired,
+  dynamic: defaultTheme.PropTypes.bool
 } : {};
-Button.defaultProps = {
-  size: 'normal',
-  singleHover: false
-};
 
 exports.Button = Button;

package/inputs/Button/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Button = require('../../Button-6c06d4e4.js');
+var Button = require('../../Button-25280e98.js');
 require('../../defaultTheme-cd01e6c2.js');
 require('styled-components');
 require('react');

package/inputs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var ActionButton = require('../ActionButton-b2345555.js');
-var Button = require('../Button-6c06d4e4.js');
+var Button = require('../Button-25280e98.js');
 var Checkbox = require('../Checkbox-ad9c9e54.js');
 var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-5676b507.js');
 var CompactStarRating = require('../CompactStarRating-d4cfae17.js');

package/package.json

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

package/widgets/AssetGallery/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var AssetAction = require('../../AssetAction-304faafa.js');
+var AssetAction = require('../../AssetAction-89d9aac8.js');
 require('../../defaultTheme-cd01e6c2.js');
 require('styled-components');
 require('lodash');
@@ -39,7 +39,7 @@ require('@floating-ui/react');
 require('../../ContextMenu-4eb8fdc5.js');
 require('../../AssetPreviewTopBar-b1fe3188.js');
 require('../../ActionButton-b2345555.js');
-require('../../Button-6c06d4e4.js');
+require('../../Button-25280e98.js');
 require('../../CompactStarRating-d4cfae17.js');
 require('../../CompactTextInput-f89988be.js');
 require('../../MultiSelect-f87624b5.js');

package/widgets/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var AssetAction = require('../AssetAction-304faafa.js');
+var AssetAction = require('../AssetAction-89d9aac8.js');
 var ContextMenu = require('../ContextMenu-4eb8fdc5.js');
 var AssetPreviewTopBar = require('../AssetPreviewTopBar-b1fe3188.js');
 var Instructions = require('../Instructions-d1545bd4.js');
@@ -34,7 +34,7 @@ require('../close-1751121a.js');
 require('react-lazy-load-image-component');
 require('@floating-ui/react');
 require('../ActionButton-b2345555.js');
-require('../Button-6c06d4e4.js');
+require('../Button-25280e98.js');
 require('../expand-more-d74e2bd2.js');
 require('../CompactAutocompleteSelect-5676b507.js');
 require('react-select');