@ntbjs/react-components 1.3.0-rc.33 → 1.3.0-rc.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -155,8 +155,8 @@ var assetShapeWithLayout = defaultTheme._objectSpread2(defaultTheme._objectSprea
155
155
  }).isRequired
156
156
  });
157
157
 
158
- var _templateObject$4, _templateObject2$4, _templateObject3$4;
159
- var AssetGalleryBase$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$4 || (_templateObject$4 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n"])));
158
+ var _templateObject$5, _templateObject2$4, _templateObject3$4;
159
+ var AssetGalleryBase$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$5 || (_templateObject$5 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n"])));
160
160
  var GroupLabel = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2$4 || (_templateObject2$4 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n ", "\n display: flex;\n align-items: flex-end;\n position: absolute;\n padding-bottom: 4px;\n box-sizing: border-box;\n"])), function (props) {
161
161
  return props.theme.primaryFontFamily;
162
162
  }, function (props) {
@@ -182,8 +182,8 @@ var convertMsToHMS = function convertMsToHMS(ms) {
182
182
  return hmsString;
183
183
  };
184
184
 
185
- var _templateObject$3, _templateObject2$3, _templateObject3$3, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$2;
186
- var SummaryCard$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$3 || (_templateObject$3 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n border-radius: 4px;\n width: ", ";\n ", ";\n\n ", "\n"])), function (props) {
185
+ var _templateObject$4, _templateObject2$3, _templateObject3$3, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$2;
186
+ var SummaryCard$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$4 || (_templateObject$4 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n border-radius: 4px;\n width: ", ";\n ", ";\n\n ", "\n"])), function (props) {
187
187
  return props.width ? "".concat(props.width, "px") : '100%';
188
188
  }, function (props) {
189
189
  return props.compact ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white')) : 'background: transparent';
@@ -293,11 +293,12 @@ SummaryCard.defaultProps = {
293
293
  activeSummaryCard: false
294
294
  };
295
295
 
296
- var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$2, _templateObject5$2, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27, _templateObject28;
297
- var AssetGalleryWrapper$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$2 || (_templateObject$2 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n"])), function (props) {
296
+ var _templateObject$3, _templateObject2$2, _templateObject3$2, _templateObject4$2, _templateObject5$2, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27, _templateObject28, _templateObject29;
297
+ var AssetGalleryWrapper$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$3 || (_templateObject$3 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n"])), function (props) {
298
298
  return props.disabled && styled.css(_templateObject2$2 || (_templateObject2$2 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
299
299
  });
300
- var AssetGalleryCompactCard$2 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3$2 || (_templateObject3$2 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n height: 100%;\n padding-left: ", "px;\n padding-right: ", "px;\n padding-top: ", "px;\n box-sizing: border-box;\n cursor: pointer;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", "\n video {\n width: 100%;\n height: 100%;\n }\n\n .audio {\n display: flex;\n justify-content: center;\n svg {\n width: 25%;\n }\n }\n"])), function (props) {
300
+ var Reference = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3$2 || (_templateObject3$2 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n height: 100%;\n"])));
301
+ var AssetGalleryCompactCard$2 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4$2 || (_templateObject4$2 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n height: 100%;\n padding-left: ", "px;\n padding-right: ", "px;\n padding-top: ", "px;\n box-sizing: border-box;\n cursor: pointer;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", "\n video {\n width: 100%;\n height: 100%;\n }\n\n .audio {\n display: flex;\n justify-content: center;\n svg {\n width: 25%;\n }\n }\n"])), function (props) {
301
302
  return props.selected ? 1 : 0;
302
303
  }, function (props) {
303
304
  return props.selected ? 1 : 0;
@@ -308,36 +309,36 @@ var AssetGalleryCompactCard$2 = styled__default["default"].div.attrs(defaultThem
308
309
  }, function (props) {
309
310
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
310
311
  }, function (props) {
311
- return props.disabled && styled.css(_templateObject4$2 || (_templateObject4$2 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n opacity: 0.4;\n "])));
312
+ return props.disabled && styled.css(_templateObject5$2 || (_templateObject5$2 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n opacity: 0.4;\n "])));
312
313
  }, function (props) {
313
- return props.extendedSelectMode && styled.css(_templateObject5$2 || (_templateObject5$2 = defaultTheme._taggedTemplateLiteral(["\n cursor: pointer;\n "])));
314
+ return props.extendedSelectMode && styled.css(_templateObject6$1 || (_templateObject6$1 = defaultTheme._taggedTemplateLiteral(["\n cursor: pointer;\n "])));
314
315
  });
315
- var Figure$1 = styled__default["default"].figure(_templateObject6$1 || (_templateObject6$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: center;\n align-items: center;\n position: relative;\n margin: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n\n .lazy-load-image-background {\n display: block !important;\n }\n\n img {\n display: block;\n height: 100%;\n width: 100%;\n ", "\n }\n"])), function (props) {
316
- return props.hasHeightAndWidth ? styled.css(_templateObject7$1 || (_templateObject7$1 = defaultTheme._taggedTemplateLiteral(["\n object-fit: cover;\n "]))) : styled.css(_templateObject8$1 || (_templateObject8$1 = defaultTheme._taggedTemplateLiteral(["\n object-fit: contain;\n "])));
316
+ var Figure$1 = styled__default["default"].figure(_templateObject7$1 || (_templateObject7$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: center;\n align-items: center;\n position: relative;\n margin: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n\n .lazy-load-image-background {\n display: block !important;\n }\n\n img {\n display: block;\n height: 100%;\n width: 100%;\n ", "\n }\n"])), function (props) {
317
+ return props.hasHeightAndWidth ? styled.css(_templateObject8$1 || (_templateObject8$1 = defaultTheme._taggedTemplateLiteral(["\n object-fit: cover;\n "]))) : styled.css(_templateObject9$1 || (_templateObject9$1 = defaultTheme._taggedTemplateLiteral(["\n object-fit: contain;\n "])));
317
318
  });
318
- var FigureOverlayBackdrop$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9$1 || (_templateObject9$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n inset: 0;\n opacity: ", ";\n background-color: ", ";\n"])), function (props) {
319
+ var FigureOverlayBackdrop$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10$1 || (_templateObject10$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n inset: 0;\n opacity: ", ";\n background-color: ", ";\n"])), function (props) {
319
320
  return props.selected ? 0.6 : 0;
320
321
  }, function (props) {
321
322
  return props.selected ? '#ACCEF7' : 'transparent';
322
323
  });
323
- var Overlay$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10$1 || (_templateObject10$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n"])));
324
- var OverlayBackdrop$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11$1 || (_templateObject11$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n opacity: 0;\n transition: opacity 220ms;\n\n ", "\n ", "\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
325
- return !props.selected ? styled.css(_templateObject12$1 || (_templateObject12$1 = defaultTheme._taggedTemplateLiteral(["\n background: radial-gradient(\n ellipse at center,\n rgba(0, 0, 0, 0.3) 27%,\n rgba(0, 0, 0, 0.5) 60%,\n rgba(0, 0, 0, 0.7) 90%\n );\n "]))) : null;
324
+ var Overlay$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11$1 || (_templateObject11$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n"])));
325
+ var OverlayBackdrop$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12$1 || (_templateObject12$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n opacity: 0;\n transition: opacity 220ms;\n\n ", "\n ", "\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
326
+ return !props.selected ? styled.css(_templateObject13$1 || (_templateObject13$1 = defaultTheme._taggedTemplateLiteral(["\n background: radial-gradient(\n ellipse at center,\n rgba(0, 0, 0, 0.3) 27%,\n rgba(0, 0, 0, 0.5) 60%,\n rgba(0, 0, 0, 0.7) 90%\n );\n "]))) : null;
326
327
  }, function (props) {
327
- return (props.selected || props.softSelected) && styled.css(_templateObject13$1 || (_templateObject13$1 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n "])));
328
+ return (props.selected || props.softSelected) && styled.css(_templateObject14$1 || (_templateObject14$1 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n "])));
328
329
  }, Overlay$1);
329
- var OverlayInfo$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject14$1 || (_templateObject14$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: 15px 50px 10px 12px;\n color: ", ";\n & span {\n overflow: hidden;\n word-wrap: break-word;\n }\n"])), function (props) {
330
+ var OverlayInfo$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15$1 || (_templateObject15$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: 15px 50px 10px 12px;\n color: ", ";\n & span {\n overflow: hidden;\n word-wrap: break-word;\n }\n"])), function (props) {
330
331
  return props.theme.getColor('gray-100');
331
332
  });
332
- var OverlayCompleted = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15$1 || (_templateObject15$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border: 3px solid;\n ", ";\n"])), function (props) {
333
+ var OverlayCompleted = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject16$1 || (_templateObject16$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border: 3px solid;\n ", ";\n"])), function (props) {
333
334
  if (props.softSelected) return null;
334
335
  return props.theme.themeProp('border-color', props.theme.getColor('emerald-500'), polished.rgba(props.theme.getColor('emerald-500'), 0.7));
335
336
  });
336
- var OverlayHasError = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject16$1 || (_templateObject16$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border: 3px solid;\n ", "\n"])), function (props) {
337
+ var OverlayHasError = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject17$1 || (_templateObject17$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border: 3px solid;\n ", "\n"])), function (props) {
337
338
  if (props.softSelected) return null;
338
339
  return props.theme.themeProp('border-color', props.theme.getColor('red-600'), polished.rgba(props.theme.getColor('red-500'), 0.7));
339
340
  });
340
- var OverlaySelected$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject17$1 || (_templateObject17$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border-style: solid;\n border-width: 3px;\n\n ", ";\n"])), function (props) {
341
+ var OverlaySelected$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18$1 || (_templateObject18$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border-style: solid;\n border-width: 3px;\n\n ", ";\n"])), function (props) {
341
342
  if (props.softSelected) {
342
343
  return props.theme.themeProp('border-color', polished.rgba(props.theme.getColor('gray-100'), 0.5), polished.rgba(props.theme.getColor('gray-700'), 0.5));
343
344
  }
@@ -346,54 +347,59 @@ var OverlaySelected$1 = styled__default["default"].div.attrs(defaultTheme.applyD
346
347
  }
347
348
  return props.theme.themeProp('border-color', 'transparent', 'transparent');
348
349
  });
349
- var OverlayInfoTop$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18$1 || (_templateObject18$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n padding: 8px;\n display: flex;\n"])));
350
- var OverlayInfoTopActions$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19$1 || (_templateObject19$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n right: 0;\n padding: 4px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n transition: opacity 220ms;\n z-index: 99999;\n ", "\n\n opacity: ", ";\n"])), function (props) {
350
+ var OverlayInfoTop$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19$1 || (_templateObject19$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n padding: 8px;\n display: flex;\n"])));
351
+ var OverlayInfoTopActions$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject20$1 || (_templateObject20$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n right: 0;\n padding: 4px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n transition: opacity 220ms;\n z-index: 99999;\n ", "\n\n opacity: ", ";\n"])), function (props) {
351
352
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700'));
352
353
  }, function (props) {
353
354
  return props.isOverlayHovered ? 1 : 0;
354
355
  });
355
- var OverlayInfoTopLeft = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject20$1 || (_templateObject20$1 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n display: ", ";\n\n ", ":hover & {\n opacity: 0;\n }\n"])), function (props) {
356
+ var OverlayInfoTopLeft = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject21$1 || (_templateObject21$1 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n display: ", ";\n\n ", ":hover & {\n opacity: 0;\n }\n"])), function (props) {
356
357
  return props !== null && props !== void 0 && props.collapseExtraInfo ? 'none' : 'block';
357
358
  }, Overlay$1);
358
- var OverlayInfoTopWarning$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject21$1 || (_templateObject21$1 = defaultTheme._taggedTemplateLiteral(["\n margin-left: auto;\n height: 24px;\n width: 24px;\n border-radius: 50%;\n box-sizing: border-box;\n padding: ", ";\n background-color: ", ";\n opacity: 1;\n\n svg {\n width: 100%;\n color: ", ";\n }\n\n ", ":hover & {\n opacity: 0;\n }\n"])), function (props) {
359
+ var OverlayInfoTopWarning$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject22$1 || (_templateObject22$1 = defaultTheme._taggedTemplateLiteral(["\n margin-left: auto;\n height: 24px;\n width: 24px;\n border-radius: 50%;\n box-sizing: border-box;\n padding: ", ";\n background-color: ", ";\n opacity: 1;\n\n svg {\n width: 100%;\n color: ", ";\n }\n\n ", ":hover & {\n opacity: 0;\n }\n"])), function (props) {
359
360
  return props.type === 'error' ? 0 : '3px 4px';
360
361
  }, function (props) {
361
362
  return props.type === 'error' ? props.theme.getColor('red-500') : props.theme.getColor('gray-100');
362
363
  }, function (props) {
363
364
  return props.type === 'error' ? props.theme.getColor('gray-100') : props.theme.getColor('gray-700');
364
365
  }, Overlay$1);
365
- var OverlayInfoBottom$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject22$1 || (_templateObject22$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n padding: 8px;\n display: flex;\n"])));
366
- var OverlayInfoBottomSelectButton$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23$1 || (_templateObject23$1 = defaultTheme._taggedTemplateLiteral(["\n opacity: ", ";\n flex-shrink: 0;\n cursor: pointer;\n transition: opacity 220ms;\n height: 24px;\n\n > svg {\n width: 24px;\n height: 24px;\n transition: opacity 120ms;\n opacity: ", ";\n }\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
366
+ var OverlayInfoBottom$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23$1 || (_templateObject23$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n padding: 8px;\n display: flex;\n"])));
367
+ var OverlayInfoBottomSelectButton$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24$1 || (_templateObject24$1 = defaultTheme._taggedTemplateLiteral(["\n opacity: ", ";\n flex-shrink: 0;\n cursor: pointer;\n transition: opacity 220ms;\n height: 24px;\n\n > svg {\n width: 24px;\n height: 24px;\n transition: opacity 120ms;\n opacity: ", ";\n }\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
367
368
  return props.selected ? 1 : 0;
368
369
  }, function (props) {
369
370
  return props.selected ? 1 : 0.5;
370
371
  }, Overlay$1);
371
- var OverlayInfoBottomMediaIcon$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24$1 || (_templateObject24$1 = defaultTheme._taggedTemplateLiteral(["\n margin-left: auto;\n opacity: 1;\n\n ", ":hover & {\n opacity: 0;\n }\n"])), Overlay$1);
372
- var ConsumerDefinedOverlay$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25$1 || (_templateObject25$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n"])));
373
- styled__default["default"].div(_templateObject26$1 || (_templateObject26$1 = defaultTheme._taggedTemplateLiteral(["\n margin: 4px;\n"])));
374
- styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n ", "\n padding: 4px 8px;\n border-radius: 4px;\n"])), function (props) {
372
+ var OverlayInfoBottomMediaIcon$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25$1 || (_templateObject25$1 = defaultTheme._taggedTemplateLiteral(["\n margin-left: auto;\n opacity: 1;\n\n ", ":hover & {\n opacity: 0;\n }\n"])), Overlay$1);
373
+ var ConsumerDefinedOverlay$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject26$1 || (_templateObject26$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n"])));
374
+ styled__default["default"].div(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n margin: 4px;\n"])));
375
+ styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n ", "\n padding: 4px 8px;\n border-radius: 4px;\n"])), function (props) {
375
376
  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
376
377
  });
377
- var StyledFloatingArrow$1 = styled__default["default"](react.FloatingArrow).attrs(defaultTheme.applyDefaultTheme)(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), function (props) {
378
+ var StyledFloatingArrow$1 = styled__default["default"](react.FloatingArrow).attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), function (props) {
378
379
  return props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white'));
379
380
  });
380
381
 
382
+ var _templateObject$2;
383
+ var AssetActions = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$2 || (_templateObject$2 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 1rem;\n font-weight: 500;\n display: flex;\n flex-direction: column;\n padding: 2px;\n gap: 8px;\n"])), function (props) {
384
+ return props.theme.primaryFontFamily;
385
+ });
386
+
381
387
  var _excluded$5 = ["actions", "asset"];
382
388
  var AssetActionsBase = React__default["default"].forwardRef(function AssetActionsBase(_ref, forwardedRef) {
383
389
  var actions = _ref.actions,
384
390
  asset = _ref.asset,
385
391
  props = defaultTheme._objectWithoutProperties(_ref, _excluded$5);
386
- return actions.map(function (action, index) {
387
- return React__default["default"].createElement("div", {
388
- key: index
389
- }, React__default["default"].createElement(AssetAction$1, defaultTheme._extends({
392
+ var assetActions = actions.map(function (action, index) {
393
+ return React__default["default"].createElement(AssetAction$1, defaultTheme._extends({
394
+ key: "index_".concat(action.title),
390
395
  ref: forwardedRef
391
396
  }, props, {
392
397
  action: action,
393
398
  asset: asset,
394
399
  itemKey: "".concat(index, "-").concat(action.title)
395
- })));
400
+ }));
396
401
  });
402
+ return React__default["default"].createElement(AssetActions, null, assetActions);
397
403
  });
398
404
  AssetActionsBase.propTypes = process.env.NODE_ENV !== "production" ? {
399
405
  actions: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.object),
@@ -703,9 +709,10 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
703
709
  onMouseLeave: onMouseLeave,
704
710
  draggable: asset.draggable,
705
711
  innerRef: dragRef,
706
- selected: selected,
712
+ selected: selected
713
+ }, getReferenceProps()), React__default["default"].createElement(Reference, {
707
714
  ref: refs.setReference
708
- }, getReferenceProps()), asset.previewUrl && renderPreview(asset), React__default["default"].createElement(Overlay$1, defaultTheme._extends({
715
+ }, asset.previewUrl && renderPreview(asset)), React__default["default"].createElement(Overlay$1, defaultTheme._extends({
709
716
  ref: overlayCompactRef,
710
717
  onMouseEnter: mouseHasEnteredOverlay,
711
718
  onMouseLeave: mouseHasLeftOverlay,
@@ -761,7 +768,8 @@ AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
761
768
  scrollPosition: defaultTheme.PropTypes.number,
762
769
  collapseExtraInfo: defaultTheme.PropTypes.bool,
763
770
  activeSummaryCard: defaultTheme.PropTypes.bool,
764
- actionWidthHeight: defaultTheme.PropTypes.array
771
+ actionWidthHeight: defaultTheme.PropTypes.array,
772
+ displayIcon: defaultTheme.PropTypes.oneOf(['versions', 'verifications', ''])
765
773
  } : {};
766
774
  AssetGalleryCompactCard.defaultProps = {};
767
775
  var AssetGalleryCompactCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default["default"].memo(AssetGalleryCompactCard, function (prevProps, nextProps) {
@@ -1722,21 +1730,33 @@ AssetGallery.defaultProps = {
1722
1730
  thumbnailMaxHeight: 300,
1723
1731
  selectedAssetKeys: [],
1724
1732
  activeSummaryCard: false,
1725
- displayVerificationIcon: true
1733
+ displayIcon: ''
1726
1734
  };
1727
1735
 
1728
1736
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
1729
- var AssetAction$2 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n margin: 3px;\n"])), function (props) {
1737
+ var AssetAction$2 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n"])), function (props) {
1730
1738
  return props.theme.primaryFontFamily;
1731
1739
  });
1732
- var ActionTitle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n border-radius: 4px;\n padding: 8px 12px;\n ", "\n"])), function (props) {
1733
- return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
1740
+ var AssetActionButton = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n border-radius: 50%;\n width: ", ";\n height: ", ";\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);\n ", ";\n svg {\n pointer-events: none;\n width: ", ";\n height: ", ";\n ", ";\n }\n"])), function (props) {
1741
+ return "".concat(props.actionWidthHeight[0], "px");
1742
+ }, function (props) {
1743
+ return "".concat(props.actionWidthHeight[1], "px");
1744
+ }, function (props) {
1745
+ return props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('white'));
1746
+ }, function (props) {
1747
+ return "".concat(props.actionWidthHeight[0] - 14, "px");
1748
+ }, function (props) {
1749
+ return "".concat(props.actionWidthHeight[1] - 14, "px");
1750
+ }, function (props) {
1751
+ return props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('white'));
1734
1752
  });
1735
- var StyledFloatingArrow = styled__default["default"](react.FloatingArrow).attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), function (props) {
1736
- return props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white'));
1753
+ var ActionTitle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n font-size: 14px;\n border-radius: 4px;\n padding: 8px 12px;\n white-space: nowrap;\n color: white;\n background: ", ";\n"])), function (props) {
1754
+ return props.theme.getColor('gray-700');
1755
+ });
1756
+ var StyledFloatingArrow = styled__default["default"](react.FloatingArrow).attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n fill: ", ";\n"])), function (props) {
1757
+ return props.theme.getColor('gray-700');
1737
1758
  });
1738
- var Floating = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n"])));
1739
- styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n svg {\n width: 20px;\n height: 20px;\n }\n"])));
1759
+ var Floating = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n"])));
1740
1760
 
1741
1761
  var _excluded = ["action", "asset", "itemKey"];
1742
1762
  var AssetAction = React__default["default"].forwardRef(function AssetAction(_ref, forwardedRef) {
@@ -1799,19 +1819,15 @@ var AssetAction = React__default["default"].forwardRef(function AssetAction(_ref
1799
1819
  }, [action]);
1800
1820
  return React__default["default"].createElement(AssetAction$2, defaultTheme._extends({
1801
1821
  ref: forwardedRef
1802
- }, props), React__default["default"].createElement(ActionButton.ActionButton, defaultTheme._extends({
1822
+ }, props), React__default["default"].createElement(AssetActionButton, defaultTheme._extends({
1803
1823
  key: itemKey,
1804
1824
  ref: refs.setReference
1805
1825
  }, getReferenceProps(), {
1806
- useShadow: true,
1807
- active: true,
1808
- icon: action.icon,
1809
- backgroundColors: ['black', 'white'],
1810
1826
  onClick: function onClick(e) {
1811
1827
  return onActionClick(e, action.onClick(asset), itemKey);
1812
1828
  },
1813
1829
  actionWidthHeight: action.actionWidthHeight
1814
- })), isOpen && isMounted && React__default["default"].createElement(Floating, defaultTheme._extends({
1830
+ }), action.icon), isOpen && isMounted && React__default["default"].createElement(Floating, defaultTheme._extends({
1815
1831
  className: "floating",
1816
1832
  ref: refs.setFloating,
1817
1833
  style: floatingStyles
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ntbjs/react-components",
3
- "version": "1.3.0-rc.33",
3
+ "version": "1.3.0-rc.35",
4
4
  "description": "NTBs common front-end design utilities and React components.",
5
5
  "scripts": {
6
6
  "build": "cross-env NODE_ENV=production rollup -c",
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var AssetAction = require('../../AssetAction-f2fb01c8.js');
3
+ var AssetAction = require('../../AssetAction-2acf7b52.js');
4
4
  require('../../defaultTheme-cd01e6c2.js');
5
5
  require('styled-components');
6
6
  require('lodash');
package/widgets/index.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var AssetAction = require('../AssetAction-f2fb01c8.js');
5
+ var AssetAction = require('../AssetAction-2acf7b52.js');
6
6
  var ContextMenu = require('../ContextMenu-4eb8fdc5.js');
7
7
  var AssetPreviewTopBar = require('../AssetPreviewTopBar-f800a63a.js');
8
8
  var Instructions = require('../Instructions-52e8f6dd.js');