@ntbjs/react-components 2.0.0-rc.29 → 2.0.0-rc.30

package/build/utils/defaultTheme.js

@@ -0,0 +1,44 @@
+import importedColors from '../styles/utils/colors.scss.js';
+import { css } from 'styled-components';
+
+const defaultTheme = {
+  getColor: name => {
+    if (!importedColors[name]) throw Error(`The color "${name}" is not registered.`);
+    return importedColors[name];
+  },
+  primaryFontFamily: "'Roboto', sans-serif",
+  secondaryFontFamily: "'Overpass', sans-serif",
+  themeProp
+};
+function themeProp(property, darkMode, lightMode, specificity = 2) {
+  const specificityString = Array(specificity).fill("&").join("");
+  return css`
+    body.dark-theme ${specificityString} {
+      ${property}: ${darkMode};
+    }
+
+    body.light-theme ${specificityString} {
+      ${property}: ${lightMode};
+    }
+
+    body:not(.light-theme):not(.dark-theme) ${specificityString} {
+      ${property}: ${lightMode};
+
+      @media (prefers-color-scheme: dark) {
+        ${property}: ${darkMode};
+      }
+    }
+  `;
+}
+function applyDefaultTheme({
+  theme = {},
+  ...props
+}) {
+  return {
+    ...props,
+    theme: Object.assign({}, defaultTheme, theme)
+  };
+}
+
+export { applyDefaultTheme, defaultTheme };
+//# sourceMappingURL=defaultTheme.js.map

package/build/utils/defaultTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultTheme.js","sources":["../../src/utils/defaultTheme.js"],"sourcesContent":["import importedColors from '../styles/utils/colors.scss';\nimport { css } from 'styled-components';\n\nexport const defaultTheme = {\n  getColor: name => {\n    if (!importedColors[name]) throw Error(`The color \"${name}\" is not registered.`);\n    return importedColors[name];\n  },\n  primaryFontFamily: \"'Roboto', sans-serif\",\n  secondaryFontFamily: \"'Overpass', sans-serif\",\n  themeProp\n};\n\n/**\n * Applies a different css property value for dark and light mode\n * @param {string} property - The css property to apply - Eg: `color`, `background`\n * @param {string} darkMode - The value that will be applied in dark mode\n * @param {string} lightMode - The value that will be applied in light mode - Will also be used if either dark or light mode is set\n * @param specificity\n */\nfunction themeProp(property, darkMode, lightMode, specificity = 2) {\n  const specificityString = Array(specificity).fill(\"&\").join(\"\")\n\n  return css`\n    body.dark-theme ${specificityString} {\n      ${property}: ${darkMode};\n    }\n\n    body.light-theme ${specificityString} {\n      ${property}: ${lightMode};\n    }\n\n    body:not(.light-theme):not(.dark-theme) ${specificityString} {\n      ${property}: ${lightMode};\n\n      @media (prefers-color-scheme: dark) {\n        ${property}: ${darkMode};\n      }\n    }\n  `;\n}\n\nexport function applyDefaultTheme({ theme = {}, ...props }) {\n  return {\n    ...props,\n    theme: Object.assign({}, defaultTheme, theme)\n  };\n}\n"],"names":["defaultTheme","getColor","name","importedColors","Error","primaryFontFamily","secondaryFontFamily","themeProp","property","darkMode","lightMode","specificity","specificityString","Array","fill","join","css","applyDefaultTheme","theme","props","Object","assign"],"mappings":";;;AAGO,MAAMA,YAAY,GAAG;EAC1BC,QAAQ,EAAEC,IAAI,IAAI;AAChB,IAAA,IAAI,CAACC,cAAc,CAACD,IAAI,CAAC,EAAE,MAAME,KAAK,CAAC,CAAA,WAAA,EAAcF,IAAI,CAAA,oBAAA,CAAsB,CAAC,CAAA;IAChF,OAAOC,cAAc,CAACD,IAAI,CAAC,CAAA;GAC5B;AACDG,EAAAA,iBAAiB,EAAE,sBAAsB;AACzCC,EAAAA,mBAAmB,EAAE,wBAAwB;AAC7CC,EAAAA,SAAAA;AACF,EAAC;AASD,SAASA,SAASA,CAACC,QAAQ,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,WAAW,GAAG,CAAC,EAAE;AACjE,EAAA,MAAMC,iBAAiB,GAAGC,KAAK,CAACF,WAAW,CAAC,CAACG,IAAI,CAAC,GAAG,CAAC,CAACC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE/D,EAAA,OAAOC,GAAG,CAAA;AACZ,oBAAA,EAAsBJ,iBAAiB,CAAA;AACvC,MAAQJ,EAAAA,QAAQ,KAAKC,QAAQ,CAAA;AAC7B;AACA;AACA,qBAAA,EAAuBG,iBAAiB,CAAA;AACxC,MAAQJ,EAAAA,QAAQ,KAAKE,SAAS,CAAA;AAC9B;AACA;AACA,4CAAA,EAA8CE,iBAAiB,CAAA;AAC/D,MAAQJ,EAAAA,QAAQ,KAAKE,SAAS,CAAA;AAC9B;AACA;AACA,QAAUF,EAAAA,QAAQ,KAAKC,QAAQ,CAAA;AAC/B;AACA;AACA,EAAG,CAAA,CAAA;AACH,CAAA;AAEO,SAASQ,iBAAiBA,CAAC;EAAEC,KAAK,GAAG,EAAE;EAAE,GAAGC,KAAAA;AAAM,CAAC,EAAE;EAC1D,OAAO;AACL,IAAA,GAAGA,KAAK;IACRD,KAAK,EAAEE,MAAM,CAACC,MAAM,CAAC,EAAE,EAAErB,YAAY,EAAEkB,KAAK,CAAA;GAC7C,CAAA;AACH;;;;"}

package/build/{AssetAction-98d76ce0.js → widgets/AssetAction/AssetAction.js}

@@ -1,44 +1,9 @@
-import { _ as _extends } from './_rollupPluginBabelHelpers-c245b26a.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useState, useCallback } from 'react';
-import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
-import styled from 'styled-components';
-import { FloatingArrow, useFloating, autoUpdate, offset, flip, shift, arrow, useTransitionStyles, useHover, useDismiss, useInteractions } from '@floating-ui/react';
+import PropTypes from 'prop-types';
+import { AssetAction as AssetAction$1, AssetActionButton, Floating, ActionTitle, StyledFloatingArrow } from './AssetAction.styled.js';
 import { isFunction } from 'lodash';
-
-const AssetAction$1 = styled.div.attrs(applyDefaultTheme)`
-  font-family: ${props => props.theme.primaryFontFamily};
-`;
-const AssetActionButton = styled.div.attrs(applyDefaultTheme)`
-  border-radius: 50%;
-  width: ${props => props.actionWidthHeight ? `${props.actionWidthHeight[0]}px` : 'auto'};
-  height: ${props => props.actionWidthHeight ? `${props.actionWidthHeight[1]}px` : 'auto'};
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
-  ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('white'))};
-  svg {
-    pointer-events: none;
-    width: ${props => props.actionWidthHeight ? `${props.actionWidthHeight[0] - 14}px` : 'auto'};
-    height: ${props => props.actionWidthHeight ? `${props.actionWidthHeight[1] - 14}px` : 'auto'};
-    ${props => props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('white'))};
-  }
-`;
-const ActionTitle = styled.div.attrs(applyDefaultTheme)`
-  font-size: 14px;
-  border-radius: 4px;
-  padding: 8px 12px;
-  white-space: nowrap;
-  color: white;
-  background: ${props => props.theme.getColor('gray-700')};
-`;
-const StyledFloatingArrow = styled(FloatingArrow).attrs(applyDefaultTheme)`
-  fill: ${props => props.theme.getColor('gray-700')};
-`;
-const Floating = styled.div.attrs(applyDefaultTheme)`
-  pointer-events: none;
-`;
+import { useFloating, autoUpdate, offset, flip, shift, arrow, useTransitionStyles, useHover, useDismiss, useInteractions } from '@floating-ui/react';
 
 const AssetAction = React__default.forwardRef(function AssetAction({
   action,
@@ -130,4 +95,5 @@ AssetAction.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 AssetAction.defaultProps = {};
 
-export { AssetAction as A };
+export { AssetAction as default };
+//# sourceMappingURL=AssetAction.js.map

package/build/widgets/AssetAction/AssetAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetAction.js","sources":["../../../src/components/widgets/AssetAction/AssetAction.js"],"sourcesContent":["import React, { useRef, useState, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './AssetAction.styled';\n\nimport { isFunction } from 'lodash';\n\nimport {\n  useFloating,\n  useHover,\n  useInteractions,\n  useTransitionStyles,\n  flip,\n  shift,\n  arrow,\n  autoUpdate,\n  offset,\n  useDismiss\n} from '@floating-ui/react';\n\n/**\n * This is a component to help you get started with development.\n */\nconst AssetAction = React.forwardRef(function AssetAction(\n  { action, asset, itemKey, ...props },\n  forwardedRef\n) {\n  const ARROW_WIDTH = 10;\n  const ARROW_HEIGHT = 5;\n  const GAP = 3;\n\n  const arrowRef = useRef(null);\n\n  const [isOpen, setIsOpen] = useState(false);\n  const [placement] = useState('bottom');\n\n  const { refs, floatingStyles, context } = useFloating({\n    placement,\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      offset(ARROW_HEIGHT + GAP),\n      flip({ padding: 5 }),\n      shift({ padding: 5 }),\n      arrow({\n        element: arrowRef\n      })\n    ]\n  });\n\n  const { isMounted, styles } = useTransitionStyles(context, {\n    initial: {\n      transform: 'translateY(-8px)',\n      opacity: 0\n    },\n    duration: {\n      open: 200,\n      close: 100\n    }\n  });\n\n  const hover = useHover(context);\n  const dismiss = useDismiss(context, {\n    referencePress: true\n  });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, hover]);\n\n  const onActionClick = useCallback(\n    (e, action) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      if (isFunction(action?.onClick)) {\n        action.onClick(asset);\n      }\n    },\n    [action]\n  );\n\n  return (\n    <S.AssetAction ref={forwardedRef} {...props}>\n      <S.AssetActionButton\n        key={itemKey}\n        ref={refs.setReference}\n        {...getReferenceProps()}\n        onClick={e => onActionClick(e, action.onClick(asset), itemKey)}\n        actionWidthHeight={action.actionWidthHeight}\n      >\n        {action.icon}\n      </S.AssetActionButton>\n\n      {isOpen && isMounted && (\n        <S.Floating\n          className=\"floating\"\n          ref={refs.setFloating}\n          style={floatingStyles}\n          {...getFloatingProps()}\n        >\n          <S.ActionTitle style={styles}>{action.title}</S.ActionTitle>\n          <S.StyledFloatingArrow\n            ref={arrowRef}\n            context={context}\n            width={ARROW_WIDTH}\n            height={ARROW_HEIGHT}\n          />\n        </S.Floating>\n      )}\n    </S.AssetAction>\n  );\n});\n\nAssetAction.propTypes = {\n  action: PropTypes.shape({\n    icon: PropTypes.node,\n    onClick: PropTypes.func,\n    actionWidthHeight: PropTypes.arrayOf(PropTypes.number),\n    title: PropTypes.string\n  }),\n  asset: PropTypes.object,\n  itemKey: PropTypes.string\n};\n\nAssetAction.defaultProps = {};\n\nexport default AssetAction;\n"],"names":["AssetAction","React","forwardRef","action","asset","itemKey","props","forwardedRef","ARROW_WIDTH","ARROW_HEIGHT","GAP","arrowRef","useRef","isOpen","setIsOpen","useState","placement","refs","floatingStyles","context","useFloating","open","onOpenChange","whileElementsMounted","autoUpdate","middleware","offset","flip","padding","shift","arrow","element","isMounted","styles","useTransitionStyles","initial","transform","opacity","duration","close","hover","useHover","dismiss","useDismiss","referencePress","getReferenceProps","getFloatingProps","useInteractions","onActionClick","useCallback","e","preventDefault","stopPropagation","isFunction","onClick","createElement","S","_extends","ref","key","setReference","actionWidthHeight","icon","className","setFloating","style","title","width","height","propTypes","process","env","NODE_ENV","PropTypes","shape","node","func","arrayOf","number","string","object","defaultProps"],"mappings":"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"}

package/build/widgets/AssetAction/AssetAction.styled.js

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+import { applyDefaultTheme } from '../../utils/defaultTheme.js';
+import { FloatingArrow } from '@floating-ui/react';
+
+const AssetAction = styled.div.attrs(applyDefaultTheme)`
+  font-family: ${props => props.theme.primaryFontFamily};
+`;
+const AssetActionButton = styled.div.attrs(applyDefaultTheme)`
+  border-radius: 50%;
+  width: ${props => props.actionWidthHeight ? `${props.actionWidthHeight[0]}px` : 'auto'};
+  height: ${props => props.actionWidthHeight ? `${props.actionWidthHeight[1]}px` : 'auto'};
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+  ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('white'))};
+  svg {
+    pointer-events: none;
+    width: ${props => props.actionWidthHeight ? `${props.actionWidthHeight[0] - 14}px` : 'auto'};
+    height: ${props => props.actionWidthHeight ? `${props.actionWidthHeight[1] - 14}px` : 'auto'};
+    ${props => props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('white'))};
+  }
+`;
+const ActionTitle = styled.div.attrs(applyDefaultTheme)`
+  font-size: 14px;
+  border-radius: 4px;
+  padding: 8px 12px;
+  white-space: nowrap;
+  color: white;
+  background: ${props => props.theme.getColor('gray-700')};
+`;
+const StyledFloatingArrow = styled(FloatingArrow).attrs(applyDefaultTheme)`
+  fill: ${props => props.theme.getColor('gray-700')};
+`;
+const Floating = styled.div.attrs(applyDefaultTheme)`
+  pointer-events: none;
+`;
+
+export { ActionTitle, AssetAction, AssetActionButton, Floating, StyledFloatingArrow };
+//# sourceMappingURL=AssetAction.styled.js.map

package/build/widgets/AssetAction/AssetAction.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetAction.styled.js","sources":["../../../src/components/widgets/AssetAction/AssetAction.styled.js"],"sourcesContent":["import styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nimport { FloatingArrow } from '@floating-ui/react';\n\nexport const AssetAction = styled.div.attrs(applyDefaultTheme)`\n  font-family: ${props => props.theme.primaryFontFamily};\n`;\n\nexport const AssetActionButton = styled.div.attrs(applyDefaultTheme)`\n  border-radius: 50%;\n  width: ${props => (props.actionWidthHeight ? `${props.actionWidthHeight[0]}px` : 'auto')};\n  height: ${props => (props.actionWidthHeight ? `${props.actionWidthHeight[1]}px` : 'auto')};\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  ${props =>\n    props.theme.themeProp(\n      'background-color',\n      props.theme.getColor('gray-900'),\n      props.theme.getColor('white')\n    )};\n  svg {\n    pointer-events: none;\n    width: ${props => (props.actionWidthHeight ? `${props.actionWidthHeight[0] - 14}px` : 'auto')};\n    height: ${props => (props.actionWidthHeight ? `${props.actionWidthHeight[1] - 14}px` : 'auto')};\n    ${props =>\n      props.theme.themeProp(\n        'color',\n        props.theme.getColor('gray-900'),\n        props.theme.getColor('white')\n      )};\n  }\n`;\n\nexport const ActionTitle = styled.div.attrs(applyDefaultTheme)`\n  font-size: 14px;\n  border-radius: 4px;\n  padding: 8px 12px;\n  white-space: nowrap;\n  color: white;\n  background: ${props => props.theme.getColor('gray-700')};\n`;\n\nexport const StyledFloatingArrow = styled(FloatingArrow).attrs(applyDefaultTheme)`\n  fill: ${props => props.theme.getColor('gray-700')};\n`;\n\nexport const Floating = styled.div.attrs(applyDefaultTheme)`\n  pointer-events: none;\n`;\n"],"names":["AssetAction","styled","div","attrs","applyDefaultTheme","props","theme","primaryFontFamily","AssetActionButton","actionWidthHeight","themeProp","getColor","ActionTitle","StyledFloatingArrow","FloatingArrow","Floating"],"mappings":";;;;AAKO,MAAMA,WAAW,GAAGC,MAAM,CAACC,GAAG,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC9D,eAAA,EAAiBC,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,iBAAiB,CAAA;AACvD,EAAC;AAEM,MAAMC,iBAAiB,GAAGP,MAAM,CAACC,GAAG,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AACpE;AACA,SAAA,EAAWC,KAAK,IAAKA,KAAK,CAACI,iBAAiB,GAAG,CAAA,EAAGJ,KAAK,CAACI,iBAAiB,CAAC,CAAC,CAAC,CAAA,EAAA,CAAI,GAAG,MAAO,CAAA;AAC1F,UAAA,EAAYJ,KAAK,IAAKA,KAAK,CAACI,iBAAiB,GAAG,CAAA,EAAGJ,KAAK,CAACI,iBAAiB,CAAC,CAAC,CAAC,CAAA,EAAA,CAAI,GAAG,MAAO,CAAA;AAC3F;AACA;AACA;AACA;AACA;AACA,EAAIJ,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACI,SAAS,CACnB,kBAAkB,EAClBL,KAAK,CAACC,KAAK,CAACK,QAAQ,CAAC,UAAU,CAAC,EAChCN,KAAK,CAACC,KAAK,CAACK,QAAQ,CAAC,OAAO,CAC9B,CAAC,CAAA;AACL;AACA;AACA,WAAA,EAAaN,KAAK,IAAKA,KAAK,CAACI,iBAAiB,GAAG,CAAGJ,EAAAA,KAAK,CAACI,iBAAiB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAA,EAAA,CAAI,GAAG,MAAO,CAAA;AACjG,YAAA,EAAcJ,KAAK,IAAKA,KAAK,CAACI,iBAAiB,GAAG,CAAGJ,EAAAA,KAAK,CAACI,iBAAiB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAA,EAAA,CAAI,GAAG,MAAO,CAAA;AAClG,IAAMJ,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACI,SAAS,CACnB,OAAO,EACPL,KAAK,CAACC,KAAK,CAACK,QAAQ,CAAC,UAAU,CAAC,EAChCN,KAAK,CAACC,KAAK,CAACK,QAAQ,CAAC,OAAO,CAC9B,CAAC,CAAA;AACP;AACA,EAAC;AAEM,MAAMC,WAAW,GAAGX,MAAM,CAACC,GAAG,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC9D;AACA;AACA;AACA;AACA;AACA,cAAgBC,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACK,QAAQ,CAAC,UAAU,CAAC,CAAA;AACzD,EAAC;AAEM,MAAME,mBAAmB,GAAGZ,MAAM,CAACa,aAAa,CAAC,CAACX,KAAK,CAACC,iBAAiB,CAAC,CAAA;AACjF,QAAUC,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACK,QAAQ,CAAC,UAAU,CAAC,CAAA;AACnD,EAAC;AAEM,MAAMI,QAAQ,GAAGd,MAAM,CAACC,GAAG,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3D;AACA;;;;"}

package/build/widgets/AssetAction/index.js

@@ -1,7 +1,2 @@
-export { A as default } from '../../AssetAction-98d76ce0.js';
-import '../../_rollupPluginBabelHelpers-c245b26a.js';
-import 'react';
-import '../../defaultTheme-1bcc2541.js';
-import 'styled-components';
-import '@floating-ui/react';
-import 'lodash';
+export { default } from './AssetAction.js';
+//# sourceMappingURL=index.js.map

package/build/widgets/AssetAction/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/{AssetActionsBase-9e4c0735.js → widgets/AssetActionsBase/AssetActionsBase.js}

@@ -1,18 +1,8 @@
-import { _ as _extends } from './_rollupPluginBabelHelpers-c245b26a.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
-import styled from 'styled-components';
-import { A as AssetAction } from './AssetAction-98d76ce0.js';
-
-const AssetActions = styled.div.attrs(applyDefaultTheme)`
-  font-family: ${props => props.theme.primaryFontFamily};
-  font-size: 1rem;
-  font-weight: 500;
-  display: flex;
-  flex-direction: column;
-  padding: 2px;
-  gap: 8px;
-`;
+import PropTypes from 'prop-types';
+import { AssetActions } from './AssetActionsBase.styled.js';
+import AssetAction from '../AssetAction/AssetAction.js';
 
 const AssetActionsBase = React__default.forwardRef(function AssetActionsBase({
   actions,
@@ -35,4 +25,5 @@ AssetActionsBase.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 AssetActionsBase.defaultProps = {};
 
-export { AssetActionsBase as A };
+export { AssetActionsBase as default };
+//# sourceMappingURL=AssetActionsBase.js.map

package/build/widgets/AssetActionsBase/AssetActionsBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetActionsBase.js","sources":["../../../src/components/widgets/AssetActionsBase/AssetActionsBase.js"],"sourcesContent":["import React from 'react';\n\nimport PropTypes from 'prop-types';\n\nimport * as S from './AssetActionsBase.styled';\n\nimport AssetAction from '../AssetAction/AssetAction';\n\nconst AssetActionsBase = React.forwardRef(function AssetActionsBase(\n  { actions, asset, ...props },\n  forwardedRef\n) {\n  const assetActions = actions.map((action, index) => (\n    <AssetAction\n      key={`index_${action.title}`}\n      ref={forwardedRef}\n      {...props}\n      action={action}\n      asset={asset}\n      itemKey={`${index}-${action.title}`}\n    />\n  ));\n\n  return <S.AssetActions>{assetActions}</S.AssetActions>;\n});\n\nAssetActionsBase.propTypes = {\n  actions: PropTypes.arrayOf(PropTypes.object),\n  asset: PropTypes.object\n};\n\nAssetActionsBase.defaultProps = {};\n\nexport default AssetActionsBase;\n"],"names":["AssetActionsBase","React","forwardRef","actions","asset","props","forwardedRef","assetActions","map","action","index","createElement","AssetAction","_extends","key","title","ref","itemKey","S","propTypes","process","env","NODE_ENV","PropTypes","arrayOf","object","defaultProps"],"mappings":";;;;;;AAQMA,MAAAA,gBAAgB,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,gBAAgBA,CACjE;EAAEG,OAAO;EAAEC,KAAK;EAAE,GAAGC,KAAAA;AAAM,CAAC,EAC5BC,YAAY,EACZ;AACA,EAAA,MAAMC,YAAY,GAAGJ,OAAO,CAACK,GAAG,CAAC,CAACC,MAAM,EAAEC,KAAK,KAC7CT,cAAA,CAAAU,aAAA,CAACC,WAAW,EAAAC,QAAA,CAAA;AACVC,IAAAA,GAAG,EAAE,CAAA,MAAA,EAASL,MAAM,CAACM,KAAK,CAAG,CAAA;AAC7BC,IAAAA,GAAG,EAAEV,YAAAA;AAAa,GAAA,EACdD,KAAK,EAAA;AACTI,IAAAA,MAAM,EAAEA,MAAO;AACfL,IAAAA,KAAK,EAAEA,KAAM;AACba,IAAAA,OAAO,EAAE,CAAGP,EAAAA,KAAK,CAAID,CAAAA,EAAAA,MAAM,CAACM,KAAK,CAAA,CAAA;AAAG,GAAA,CACrC,CACF,CAAC,CAAA;EAEF,OAAOd,cAAA,CAAAU,aAAA,CAACO,YAAc,EAAEX,IAAAA,EAAAA,YAA6B,CAAC,CAAA;AACxD,CAAC,EAAC;AAEFP,gBAAgB,CAACmB,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EAC3BnB,OAAO,EAAEoB,SAAS,CAACC,OAAO,CAACD,SAAS,CAACE,MAAM,CAAC;EAC5CrB,KAAK,EAAEmB,SAAS,CAACE,MAAAA;AACnB,CAAC,GAAA,EAAA,CAAA;AAEDzB,gBAAgB,CAAC0B,YAAY,GAAG,EAAE;;;;"}

package/build/widgets/AssetActionsBase/AssetActionsBase.styled.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { applyDefaultTheme } from '../../utils/defaultTheme.js';
+
+const AssetActions = styled.div.attrs(applyDefaultTheme)`
+  font-family: ${props => props.theme.primaryFontFamily};
+  font-size: 1rem;
+  font-weight: 500;
+  display: flex;
+  flex-direction: column;
+  padding: 2px;
+  gap: 8px;
+`;
+
+export { AssetActions };
+//# sourceMappingURL=AssetActionsBase.styled.js.map

package/build/widgets/AssetActionsBase/AssetActionsBase.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetActionsBase.styled.js","sources":["../../../src/components/widgets/AssetActionsBase/AssetActionsBase.styled.js"],"sourcesContent":["import styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nexport const AssetActions = styled.div.attrs(applyDefaultTheme)`\n  font-family: ${props => props.theme.primaryFontFamily};\n  font-size: 1rem;\n  font-weight: 500;\n  display: flex;\n  flex-direction: column;\n  padding: 2px;\n  gap: 8px;\n`;\n"],"names":["AssetActions","styled","div","attrs","applyDefaultTheme","props","theme","primaryFontFamily"],"mappings":";;;AAGO,MAAMA,YAAY,GAAGC,MAAM,CAACC,GAAG,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC/D,eAAA,EAAiBC,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,iBAAiB,CAAA;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}

package/build/widgets/AssetActionsBase/index.js

@@ -1,8 +1,2 @@
-export { A as default } from '../../AssetActionsBase-9e4c0735.js';
-import '../../_rollupPluginBabelHelpers-c245b26a.js';
-import 'react';
-import '../../defaultTheme-1bcc2541.js';
-import 'styled-components';
-import '../../AssetAction-98d76ce0.js';
-import '@floating-ui/react';
-import 'lodash';
+export { default } from './AssetActionsBase.js';
+//# sourceMappingURL=index.js.map

package/build/widgets/AssetActionsBase/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/widgets/AssetGallery/AssetGallery.js

@@ -0,0 +1,99 @@
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { isFunction } from 'lodash';
+import PropTypes from 'prop-types';
+import React__default, { useState, useEffect, useCallback } from 'react';
+import AssetGalleryBase from './AssetGalleryBase/AssetGalleryBase.js';
+import { assetShape } from './asset.propType.js';
+
+const AssetGallery = React__default.forwardRef(function AssetGallery({
+  assets,
+  activeSummaryCard,
+  viewMode,
+  thumbnailMaxHeight,
+  selectable,
+  customSelectedBorder,
+  selectedAssetKeys,
+  onSelectedChanged,
+  softSelectable,
+  scrollElement,
+  onSoftSelectedChanged,
+  component,
+  displayIcon,
+  ...props
+}, forwardedRef) {
+  const [selectedAssetKeysInternalState, setSelectedAssetKeysInternalState] = useState(selectedAssetKeys || []);
+  const [softSelectedAssetKeyInternalState, setSoftSelectedAssetKeyInternalState] = useState(null);
+  useEffect(() => {
+    setSelectedAssetKeysInternalState(selectedAssetKeys || []);
+  }, [selectedAssetKeys]);
+  useEffect(() => {
+    setSelectedAssetKeysInternalState(current => {
+      return current.filter(c => assets.some(a => a.key === c));
+    });
+  }, [assets.length]);
+  useEffect(() => {
+    if (selectedAssetKeys === selectedAssetKeysInternalState) return;
+    if (isFunction(onSelectedChanged)) {
+      onSelectedChanged(selectedAssetKeysInternalState);
+    }
+  }, [selectedAssetKeysInternalState]);
+  useEffect(() => {
+    if (isFunction(onSoftSelectedChanged)) {
+      onSoftSelectedChanged(softSelectedAssetKeyInternalState);
+    }
+  }, [softSelectedAssetKeyInternalState]);
+  const onSelected = useCallback(assetKey => {
+    setSelectedAssetKeysInternalState(currentState => [...currentState, assetKey]);
+  }, []);
+  const onUnselected = useCallback(assetKey => {
+    setSelectedAssetKeysInternalState(currentState => currentState.filter(filteredAssetKey => filteredAssetKey !== assetKey));
+  }, []);
+  const onAssetSoftSelectedChanged = useCallback((assetKey = null) => {
+    setSoftSelectedAssetKeyInternalState(assetKey);
+  }, []);
+  return React__default.createElement(AssetGalleryBase, _extends({
+    ref: forwardedRef,
+    assets: assets,
+    activeSummaryCard: activeSummaryCard,
+    displayIcon: displayIcon,
+    thumbnailMaxHeight: thumbnailMaxHeight,
+    selectable: selectable,
+    customSelectedBorder: customSelectedBorder,
+    selectedAssetKeys: selectedAssetKeysInternalState,
+    onAssetSelected: onSelected,
+    onAssetUnselected: onUnselected,
+    softSelectable: softSelectable,
+    softSelectedAssetKey: softSelectedAssetKeyInternalState,
+    scrollElement: scrollElement,
+    onAssetSoftSelectedChanged: onAssetSoftSelectedChanged,
+    component: component,
+    viewMode: viewMode
+  }, props));
+});
+AssetGallery.propTypes = process.env.NODE_ENV !== "production" ? {
+  assets: PropTypes.arrayOf(PropTypes.shape(assetShape)),
+  displayIcon: PropTypes.string,
+  activeSummaryCard: PropTypes.bool,
+  viewMode: PropTypes.oneOf(['compact', 'grid']),
+  thumbnailMaxHeight: PropTypes.number,
+  selectable: PropTypes.bool,
+  customSelectedBorder: PropTypes.arrayOf(PropTypes.string),
+  selectedAssetKeys: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]),
+  onSelectedChanged: PropTypes.func,
+  softSelectable: PropTypes.bool,
+  scrollElement: PropTypes.instanceOf(Element),
+  onSoftSelectedChanged: PropTypes.func,
+  component: PropTypes.func
+} : {};
+AssetGallery.defaultProps = {
+  assets: [],
+  viewMode: 'compact',
+  thumbnailMaxHeight: 300,
+  selectedAssetKeys: [],
+  customSelectedBorder: [],
+  activeSummaryCard: false,
+  displayIcon: ''
+};
+
+export { AssetGallery as default };
+//# sourceMappingURL=AssetGallery.js.map

package/build/widgets/AssetGallery/AssetGallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetGallery.js","sources":["../../../src/components/widgets/AssetGallery/AssetGallery.js"],"sourcesContent":["import { isFunction } from 'lodash';\nimport PropTypes from 'prop-types';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport AssetGalleryBase from './AssetGalleryBase/AssetGalleryBase';\nimport { assetShape } from './asset.propType';\n\n/**\n * An asset gallery that can be used to display a larger amounts of assets. The Asset Gallery supports displaying\n * images and videos.\n *\n * ### Import\n *\n * ``` js\n * import { AssetGallery } from '@ntbjs/react-components/widgets'\n * // or\n * import AssetGallery from '@ntbjs/react-components/widgets/AssetGallery'\n * ```\n *\n * ### Custom asset card element\n * In some cases you may want to swap out the boring `<div>`-tag that wraps each individual asset in the gallery for\n * something more useful.\n * By doing this you can achieve side-effects that this library has no concept about – like wrapping the assets\n * in [React-routers](https://reactrouter.com/web/api/Link) `<Link>`-component for internal application routing when\n * you click the asset.\n *\n * The asset gallery allows you to change the root element that will be rendered around all individual asset via a\n * property on the asset object called `component`.\n *\n * ```jsx\n * const assets = [{\n *   previewUrl: 'https://preview.sdl.no/v1/no/7Zb20FDFCu-dne-lxi1thQ/uRs25Mh-FJY?v=1613865342365',\n *   width: 512,\n *   height: 324\n * }]\n *\n * const customComponent = (asset, children) => (\n *   <a href={`https://www.ntb.no/?fromAssetId=${asset.key}`} target=\"_blank\">\n *     {children}\n *   </a>\n * )\n *\n * <AssetGallery assets={assets} component={customComponent} />\n * ```\n *\n * When providing a custom element it will take the place of the `<div>` being the outer most parent of the\n * asset itself. All required props will then be automatically applied, like the `style`-attribute containing the\n * positioning style of the asset. To tell the asset gallery where you want the rest of the asset card we provide the `{children}`.\n *\n * **Note:** If the root-element of the custom component is a React component the component must accept rest props (`{...props}`).\n *\n * This pattern is very powerful and allows for great flexibility, as well as a way to interoperate with other\n * libraries, such as your favorite routing or forms library. **But it also comes with a small caveat!**\n *\n * #### Caveat with inlining\n * Using an inline function as an argument for the component prop may result in unexpected unmounting, since a new\n * component is passed every time React renders.\n *\n * If we are using an inline function to change the rendered component, React will remount each individual assets every\n * time `AssetGallery` is re-rendered. Not only will React update the DOM unnecessarily, the ripple effect of the individual\n * assets will also not work correctly.\n *\n * To fix this issue **avoid using inline functions or wrap the function in some sort of memoization**\n * like `React.useMemo()`.\n *\n * #### Prop Collisions\n * Prop Collisions is something to be aware of. The asset gallery will render your custom element like this:\n *\n * ```js\n * return React.createElement(props.component, props)\n * ```\n *\n * That means that all the required props that the library automatically applies will take precedence over consumer\n * defined props. An example of this is the `style`-prop.\n *\n */\nconst AssetGallery = React.forwardRef(function AssetGallery(\n  {\n    assets,\n    activeSummaryCard,\n    viewMode,\n    thumbnailMaxHeight,\n    selectable,\n    customSelectedBorder,\n    selectedAssetKeys,\n    onSelectedChanged,\n    softSelectable,\n    scrollElement,\n    onSoftSelectedChanged,\n    component,\n    displayIcon,\n    ...props\n  },\n  forwardedRef\n) {\n  // Internal state of the selected assets\n  const [selectedAssetKeysInternalState, setSelectedAssetKeysInternalState] = useState(\n    selectedAssetKeys || []\n  );\n\n  // Internal state of the soft selected asset\n  const [softSelectedAssetKeyInternalState, setSoftSelectedAssetKeyInternalState] = useState(null);\n\n  // Whenever the `selectedAssetKeys`-props changes we need to update the internal state\n  useEffect(() => {\n    setSelectedAssetKeysInternalState(selectedAssetKeys || []);\n  }, [selectedAssetKeys]);\n\n  // When the assets change we need to check if we have to update the list of selected assets\n  // (removing keys of assets that is no longer present in `assets`)\n  useEffect(() => {\n    setSelectedAssetKeysInternalState(current => {\n      return current.filter(c => assets.some(a => a.key === c));\n    });\n  }, [assets.length]);\n\n  // Run the `onSelectedChanged` callback whenever `selectedAssetKeysInternalState` change\n  useEffect(() => {\n    // If the external and internal state of selected assets is in sync we can skip this update callback\n    if (selectedAssetKeys === selectedAssetKeysInternalState) return;\n\n    if (isFunction(onSelectedChanged)) {\n      onSelectedChanged(selectedAssetKeysInternalState);\n    }\n  }, [selectedAssetKeysInternalState]);\n\n  // Run the `onSoftSelectedChanged` callback whenever `softSelectedAssetKeyInternalState` change\n  useEffect(() => {\n    if (isFunction(onSoftSelectedChanged)) {\n      onSoftSelectedChanged(softSelectedAssetKeyInternalState);\n    }\n  }, [softSelectedAssetKeyInternalState]);\n\n  const onSelected = useCallback(assetKey => {\n    setSelectedAssetKeysInternalState(currentState => [...currentState, assetKey]);\n  }, []);\n\n  const onUnselected = useCallback(assetKey => {\n    setSelectedAssetKeysInternalState(currentState =>\n      currentState.filter(filteredAssetKey => filteredAssetKey !== assetKey)\n    );\n  }, []);\n\n  const onAssetSoftSelectedChanged = useCallback((assetKey = null) => {\n    setSoftSelectedAssetKeyInternalState(assetKey);\n  }, []);\n\n  return (\n    <AssetGalleryBase\n      ref={forwardedRef}\n      assets={assets}\n      activeSummaryCard={activeSummaryCard}\n      displayIcon={displayIcon}\n      thumbnailMaxHeight={thumbnailMaxHeight}\n      selectable={selectable}\n      customSelectedBorder={customSelectedBorder}\n      selectedAssetKeys={selectedAssetKeysInternalState}\n      onAssetSelected={onSelected}\n      onAssetUnselected={onUnselected}\n      softSelectable={softSelectable}\n      softSelectedAssetKey={softSelectedAssetKeyInternalState}\n      scrollElement={scrollElement}\n      onAssetSoftSelectedChanged={onAssetSoftSelectedChanged}\n      component={component}\n      viewMode={viewMode}\n      {...props}\n    />\n  );\n});\n\nAssetGallery.propTypes = {\n  /**\n   * An array of assets to display in the gallery.\n   */\n  assets: PropTypes.arrayOf(PropTypes.shape(assetShape)),\n\n  /**\n   * Whether the asset gallery should display the Version Count or Verifications on default.\n   */\n  displayIcon: PropTypes.string,\n\n  /**\n   * Whether the asset gallery should render the Asset Summary Card on hover.\n   */\n  activeSummaryCard: PropTypes.bool,\n\n  /**\n   * The view mode of the gallery.\n   */\n  viewMode: PropTypes.oneOf(['compact', 'grid']),\n\n  /**\n   * The maximum height of thumbnails in the gallery. When the grid is computed the gallery will try\n   * to have each row of the gallery as close to the max height as possible.\n   * This option is ignored unless `viewMode: 'compact'`.\n   */\n  thumbnailMaxHeight: PropTypes.number,\n\n  /**\n   * Whether or not the asset gallery should have selectable asset cards\n   */\n  selectable: PropTypes.bool,\n\n  /**\n   * Whether or not the asset gallery should have custom borders on selected asset:  Example: customSelectedBorder: ['#893FEB', '#EB513F'], where: customSelectedBorder.[0] is for darkMode and customSelectedBorder.[1] is for lightMode\n   */\n  customSelectedBorder: PropTypes.arrayOf(PropTypes.string),\n\n  /**\n   * An array containing the keys of all selected assets\n   */\n  selectedAssetKeys: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.string),\n    PropTypes.arrayOf(PropTypes.number)\n  ]),\n\n  /**\n   * A callback function to run when the selected assets change\n   */\n  onSelectedChanged: PropTypes.func,\n\n  /**\n   * Whether the asset gallery should have soft selectable asset cards\n   */\n  softSelectable: PropTypes.bool,\n\n  /**\n   * Scrollable element to attach event listeners to. Defaults to window.\n   */\n  scrollElement: PropTypes.instanceOf(Element),\n\n  /**\n   * A callback function to run when the soft selected asset change\n   */\n  onSoftSelectedChanged: PropTypes.func,\n\n  /**\n   * A function that returns a custom component to use for the card in the gallery - The function provides\n   * `asset` as its first argument\n   */\n  component: PropTypes.func\n};\n\nAssetGallery.defaultProps = {\n  assets: [],\n  viewMode: 'compact',\n  thumbnailMaxHeight: 300,\n  selectedAssetKeys: [],\n  customSelectedBorder: [],\n  activeSummaryCard: false,\n  displayIcon: ''\n};\n\nexport default AssetGallery;\n"],"names":["AssetGallery","React","forwardRef","assets","activeSummaryCard","viewMode","thumbnailMaxHeight","selectable","customSelectedBorder","selectedAssetKeys","onSelectedChanged","softSelectable","scrollElement","onSoftSelectedChanged","component","displayIcon","props","forwardedRef","selectedAssetKeysInternalState","setSelectedAssetKeysInternalState","useState","softSelectedAssetKeyInternalState","setSoftSelectedAssetKeyInternalState","useEffect","current","filter","c","some","a","key","length","isFunction","onSelected","useCallback","assetKey","currentState","onUnselected","filteredAssetKey","onAssetSoftSelectedChanged","createElement","AssetGalleryBase","_extends","ref","onAssetSelected","onAssetUnselected","softSelectedAssetKey","propTypes","process","env","NODE_ENV","PropTypes","arrayOf","shape","assetShape","string","bool","oneOf","number","oneOfType","func","instanceOf","Element","defaultProps"],"mappings":"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"}