box-ui-elements 14.0.0 → 14.1.0-beta.11

package/es/elements/content-uploader/ItemList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/content-uploader/ItemList.js"],"names":["React","noop","Table","Column","AutoSizer","nameCellRenderer","progressCellRenderer","actionCellRenderer","removeCellRenderer","ItemList","isResumableUploadsEnabled","items","onClick","onRemoveClick","width","height","nameCell","progressCell","actionCell","removeCell","length","index","textAlign"],"mappings":"AAAA;;;;AAKA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,IAAP,MAAiB,aAAjB;AACA,SAASC,KAAT,EAAgBC,MAAhB,QAA8B,sCAA9B;AACA,OAAOC,SAAP,MAAsB,0CAAtB;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;AACA,OAAOC,oBAAP,MAAiC,wBAAjC;AACA,OAAOC,kBAAP,MAA+B,sBAA/B;AACA,OAAOC,kBAAP,MAA+B,sBAA/B;AAEA,OAAO,mCAAP;AACA,OAAO,iBAAP;;AASA,IAAMC,QAAQ,GAAG,SAAXA,QAAW;AAAA,mCAAGC,yBAAH;AAAA,MAAGA,yBAAH,sCAA+B,KAA/B;AAAA,MAAsCC,KAAtC,QAAsCA,KAAtC;AAAA,MAA6CC,OAA7C,QAA6CA,OAA7C;AAAA,gCAAsDC,aAAtD;AAAA,MAAsDA,aAAtD,mCAAsEZ,IAAtE;AAAA,SACb,oBAAC,SAAD,QACK,iBAAuB;AAAA,QAApBa,KAAoB,SAApBA,KAAoB;AAAA,QAAbC,MAAa,SAAbA,MAAa;AACpB,QAAMC,QAAQ,GAAGX,gBAAgB,CAACK,yBAAD,CAAjC;AACA,QAAMO,YAAY,GAAGX,oBAAoB,EAAzC;AACA,QAAMY,UAAU,GAAGX,kBAAkB,CAACG,yBAAD,EAA4BE,OAA5B,CAArC;AACA,QAAMO,UAAU,GAAGX,kBAAkB,CAACK,aAAD,CAArC;AAEA,WACI,oBAAC,KAAD;AACI,MAAA,SAAS,EAAC,eADd;AAEI,MAAA,aAAa,MAFjB;AAGI,MAAA,YAAY,EAAE,CAHlB;AAII,MAAA,MAAM,EAAEE,MAJZ;AAKI,MAAA,YAAY,EAAC,cALjB;AAMI,MAAA,QAAQ,EAAEJ,KAAK,CAACS,MANpB;AAOI,MAAA,SAAS,EAAE;AAAA,YAAGC,KAAH,SAAGA,KAAH;AAAA,eAAeV,KAAK,CAACU,KAAD,CAApB;AAAA,OAPf;AAQI,MAAA,SAAS,EAAE,EARf;AASI,MAAA,KAAK,EAAEP;AATX,OAWI,oBAAC,MAAD;AAAQ,MAAA,YAAY,EAAEE,QAAtB;AAAgC,MAAA,OAAO,EAAC,MAAxC;AAA+C,MAAA,QAAQ,EAAE,CAAzD;AAA4D,MAAA,UAAU,EAAE,CAAxE;AAA2E,MAAA,KAAK,EAAE;AAAlF,MAXJ,EAYI,oBAAC,MAAD;AACI,MAAA,YAAY,EAAEC,YADlB;AAEI,MAAA,OAAO,EAAC,UAFZ;AAGI,MAAA,QAAQ,EAAE,CAHd;AAII,MAAA,UAAU,EAAE,CAJhB;AAKI,MAAA,KAAK,EAAE;AAAEK,QAAAA,SAAS,EAAE;AAAb,OALX;AAMI,MAAA,KAAK,EAAE;AANX,MAZJ,EAoBI,oBAAC,MAAD;AACI,MAAA,SAAS,EAAEZ,yBAAyB,GAAG,EAAH,GAAQ,6BADhD;AAEI,MAAA,YAAY,EAAEQ,UAFlB;AAGI,MAAA,OAAO,EAAC,QAHZ;AAII,MAAA,UAAU,EAAE,CAJhB;AAKI,MAAA,KAAK,EAAE;AALX,MApBJ,EA2BKR,yBAAyB,IACtB,oBAAC,MAAD;AACI,MAAA,SAAS,EAAC,6BADd;AAEI,MAAA,YAAY,EAAES,UAFlB;AAGI,MAAA,OAAO,EAAC,QAHZ;AAII,MAAA,UAAU,EAAE,CAJhB;AAKI,MAAA,KAAK,EAAE;AALX,MA5BR,CADJ;AAuCH,GA9CL,CADa;AAAA,CAAjB;;AAmDA,eAAeV,QAAf","sourcesContent":["/**\n * @flow\n * @file Item list component\n */\n\nimport React from 'react';\nimport noop from 'lodash/noop';\nimport { Table, Column } from '@box/react-virtualized/dist/es/Table';\nimport AutoSizer from '@box/react-virtualized/dist/es/AutoSizer';\nimport nameCellRenderer from './nameCellRenderer';\nimport progressCellRenderer from './progressCellRenderer';\nimport actionCellRenderer from './actionCellRenderer';\nimport removeCellRenderer from './removeCellRenderer';\nimport type { UploadItem } from '../../common/types/upload';\nimport '@box/react-virtualized/styles.css';\nimport './ItemList.scss';\n\ntype Props = {\n    isResumableUploadsEnabled?: boolean,\n    items: UploadItem[],\n    onClick: Function,\n    onRemoveClick?: (item: UploadItem) => void,\n};\n\nconst ItemList = ({ isResumableUploadsEnabled = false, items, onClick, onRemoveClick = noop }: Props) => (\n    <AutoSizer>\n        {({ width, height }) => {\n            const nameCell = nameCellRenderer(isResumableUploadsEnabled);\n            const progressCell = progressCellRenderer();\n            const actionCell = actionCellRenderer(isResumableUploadsEnabled, onClick);\n            const removeCell = removeCellRenderer(onRemoveClick);\n\n            return (\n                <Table\n                    className=\"bcu-item-list\"\n                    disableHeader\n                    headerHeight={0}\n                    height={height}\n                    rowClassName=\"bcu-item-row\"\n                    rowCount={items.length}\n                    rowGetter={({ index }) => items[index]}\n                    rowHeight={50}\n                    width={width}\n                >\n                    <Column cellRenderer={nameCell} dataKey=\"name\" flexGrow={1} flexShrink={1} width={300} />\n                    <Column\n                        cellRenderer={progressCell}\n                        dataKey=\"progress\"\n                        flexGrow={1}\n                        flexShrink={1}\n                        style={{ textAlign: 'right' }}\n                        width={300}\n                    />\n                    <Column\n                        className={isResumableUploadsEnabled ? '' : 'bcu-item-list-action-column'}\n                        cellRenderer={actionCell}\n                        dataKey=\"status\"\n                        flexShrink={0}\n                        width={25}\n                    />\n                    {isResumableUploadsEnabled && (\n                        <Column\n                            className=\"bcu-item-list-action-column\"\n                            cellRenderer={removeCell}\n                            dataKey=\"remove\"\n                            flexShrink={0}\n                            width={25}\n                        />\n                    )}\n                </Table>\n            );\n        }}\n    </AutoSizer>\n);\n\nexport default ItemList;\n"],"file":"ItemList.js"}
+{"version":3,"sources":["../../../src/elements/content-uploader/ItemList.js"],"names":["React","noop","Table","Column","AutoSizer","nameCellRenderer","progressCellRenderer","actionCellRenderer","removeCellRenderer","ItemList","isResumableUploadsEnabled","items","onClick","onRemoveClick","onUpgradeCTAClick","width","height","nameCell","progressCell","actionCell","removeCell","length","index","textAlign"],"mappings":"AAAA;;;;AAKA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,IAAP,MAAiB,aAAjB;AACA,SAASC,KAAT,EAAgBC,MAAhB,QAA8B,sCAA9B;AACA,OAAOC,SAAP,MAAsB,0CAAtB;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;AACA,OAAOC,oBAAP,MAAiC,wBAAjC;AACA,OAAOC,kBAAP,MAA+B,sBAA/B;AACA,OAAOC,kBAAP,MAA+B,sBAA/B;AAEA,OAAO,mCAAP;AACA,OAAO,iBAAP;;AAUA,IAAMC,QAAQ,GAAG,SAAXA,QAAW;AAAA,mCACbC,yBADa;AAAA,MACbA,yBADa,sCACe,KADf;AAAA,MAEbC,KAFa,QAEbA,KAFa;AAAA,MAGbC,OAHa,QAGbA,OAHa;AAAA,gCAIbC,aAJa;AAAA,MAIbA,aAJa,mCAIGZ,IAJH;AAAA,MAKba,iBALa,QAKbA,iBALa;AAAA,SAOb,oBAAC,SAAD,QACK,iBAAuB;AAAA,QAApBC,KAAoB,SAApBA,KAAoB;AAAA,QAAbC,MAAa,SAAbA,MAAa;AACpB,QAAMC,QAAQ,GAAGZ,gBAAgB,CAACK,yBAAD,CAAjC;AACA,QAAMQ,YAAY,GAAGZ,oBAAoB,CAAC,CAAC,CAACQ,iBAAH,CAAzC;AACA,QAAMK,UAAU,GAAGZ,kBAAkB,CAACG,yBAAD,EAA4BE,OAA5B,EAAqCE,iBAArC,CAArC;AACA,QAAMM,UAAU,GAAGZ,kBAAkB,CAACK,aAAD,CAArC;AAEA,WACI,oBAAC,KAAD;AACI,MAAA,SAAS,EAAC,eADd;AAEI,MAAA,aAAa,MAFjB;AAGI,MAAA,YAAY,EAAE,CAHlB;AAII,MAAA,MAAM,EAAEG,MAJZ;AAKI,MAAA,YAAY,EAAC,cALjB;AAMI,MAAA,QAAQ,EAAEL,KAAK,CAACU,MANpB;AAOI,MAAA,SAAS,EAAE;AAAA,YAAGC,KAAH,SAAGA,KAAH;AAAA,eAAeX,KAAK,CAACW,KAAD,CAApB;AAAA,OAPf;AAQI,MAAA,SAAS,EAAE,EARf;AASI,MAAA,KAAK,EAAEP;AATX,OAWI,oBAAC,MAAD;AAAQ,MAAA,YAAY,EAAEE,QAAtB;AAAgC,MAAA,OAAO,EAAC,MAAxC;AAA+C,MAAA,QAAQ,EAAE,CAAzD;AAA4D,MAAA,UAAU,EAAE,CAAxE;AAA2E,MAAA,KAAK,EAAE;AAAlF,MAXJ,EAYI,oBAAC,MAAD;AACI,MAAA,YAAY,EAAEC,YADlB;AAEI,MAAA,OAAO,EAAC,UAFZ;AAGI,MAAA,QAAQ,EAAE,CAHd;AAII,MAAA,UAAU,EAAE,CAJhB;AAKI,MAAA,KAAK,EAAE;AAAEK,QAAAA,SAAS,EAAE;AAAb,OALX;AAMI,MAAA,KAAK,EAAE;AANX,MAZJ,EAoBI,oBAAC,MAAD;AACI,MAAA,SAAS,EAAEb,yBAAyB,GAAG,EAAH,GAAQ,6BADhD;AAEI,MAAA,YAAY,EAAES,UAFlB;AAGI,MAAA,OAAO,EAAC,QAHZ;AAII,MAAA,UAAU,EAAE,CAJhB;AAKI,MAAA,KAAK,EAAEL,iBAAiB,GAAG,GAAH,GAAS;AALrC,MApBJ,EA2BKJ,yBAAyB,IACtB,oBAAC,MAAD;AACI,MAAA,SAAS,EAAC,6BADd;AAEI,MAAA,YAAY,EAAEU,UAFlB;AAGI,MAAA,OAAO,EAAC,QAHZ;AAII,MAAA,UAAU,EAAE,CAJhB;AAKI,MAAA,KAAK,EAAE;AALX,MA5BR,CADJ;AAuCH,GA9CL,CAPa;AAAA,CAAjB;;AAyDA,eAAeX,QAAf","sourcesContent":["/**\n * @flow\n * @file Item list component\n */\n\nimport React from 'react';\nimport noop from 'lodash/noop';\nimport { Table, Column } from '@box/react-virtualized/dist/es/Table';\nimport AutoSizer from '@box/react-virtualized/dist/es/AutoSizer';\nimport nameCellRenderer from './nameCellRenderer';\nimport progressCellRenderer from './progressCellRenderer';\nimport actionCellRenderer from './actionCellRenderer';\nimport removeCellRenderer from './removeCellRenderer';\nimport type { UploadItem } from '../../common/types/upload';\nimport '@box/react-virtualized/styles.css';\nimport './ItemList.scss';\n\ntype Props = {\n    isResumableUploadsEnabled?: boolean,\n    items: UploadItem[],\n    onClick: Function,\n    onRemoveClick?: (item: UploadItem) => void,\n    onUpgradeCTAClick?: Function,\n};\n\nconst ItemList = ({\n    isResumableUploadsEnabled = false,\n    items,\n    onClick,\n    onRemoveClick = noop,\n    onUpgradeCTAClick,\n}: Props) => (\n    <AutoSizer>\n        {({ width, height }) => {\n            const nameCell = nameCellRenderer(isResumableUploadsEnabled);\n            const progressCell = progressCellRenderer(!!onUpgradeCTAClick);\n            const actionCell = actionCellRenderer(isResumableUploadsEnabled, onClick, onUpgradeCTAClick);\n            const removeCell = removeCellRenderer(onRemoveClick);\n\n            return (\n                <Table\n                    className=\"bcu-item-list\"\n                    disableHeader\n                    headerHeight={0}\n                    height={height}\n                    rowClassName=\"bcu-item-row\"\n                    rowCount={items.length}\n                    rowGetter={({ index }) => items[index]}\n                    rowHeight={50}\n                    width={width}\n                >\n                    <Column cellRenderer={nameCell} dataKey=\"name\" flexGrow={1} flexShrink={1} width={300} />\n                    <Column\n                        cellRenderer={progressCell}\n                        dataKey=\"progress\"\n                        flexGrow={1}\n                        flexShrink={1}\n                        style={{ textAlign: 'right' }}\n                        width={300}\n                    />\n                    <Column\n                        className={isResumableUploadsEnabled ? '' : 'bcu-item-list-action-column'}\n                        cellRenderer={actionCell}\n                        dataKey=\"status\"\n                        flexShrink={0}\n                        width={onUpgradeCTAClick ? 100 : 25}\n                    />\n                    {isResumableUploadsEnabled && (\n                        <Column\n                            className=\"bcu-item-list-action-column\"\n                            cellRenderer={removeCell}\n                            dataKey=\"remove\"\n                            flexShrink={0}\n                            width={25}\n                        />\n                    )}\n                </Table>\n            );\n        }}\n    </AutoSizer>\n);\n\nexport default ItemList;\n"],"file":"ItemList.js"}

package/es/elements/content-uploader/UploadsManager.js

@@ -10,16 +10,17 @@ import { STATUS_ERROR } from '../../constants';
 import './UploadsManager.scss';
 
 var UploadsManager = function UploadsManager(_ref) {
-  var items = _ref.items,
-      view = _ref.view,
+  var isExpanded = _ref.isExpanded,
+      isVisible = _ref.isVisible,
+      isResumableUploadsEnabled = _ref.isResumableUploadsEnabled,
+      isDragging = _ref.isDragging,
+      items = _ref.items,
       onItemActionClick = _ref.onItemActionClick,
       onRemoveActionClick = _ref.onRemoveActionClick,
+      onUpgradeCTAClick = _ref.onUpgradeCTAClick,
       onUploadsManagerActionClick = _ref.onUploadsManagerActionClick,
       toggleUploadsManager = _ref.toggleUploadsManager,
-      isExpanded = _ref.isExpanded,
-      isVisible = _ref.isVisible,
-      isResumableUploadsEnabled = _ref.isResumableUploadsEnabled,
-      isDragging = _ref.isDragging;
+      view = _ref.view;
 
   /**
    * Keydown handler for progress bar
@@ -78,6 +79,7 @@ var UploadsManager = function UploadsManager(_ref) {
     items: items,
     onClick: onItemActionClick,
     onRemoveClick: onRemoveActionClick,
+    onUpgradeCTAClick: onUpgradeCTAClick,
     view: view
   })));
 };

package/es/elements/content-uploader/UploadsManager.js.flow

@@ -21,22 +21,24 @@ type Props = {
     items: UploadItem[],
     onItemActionClick: Function,
     onRemoveActionClick: (item: UploadItem) => void,
+    onUpgradeCTAClick?: Function,
     onUploadsManagerActionClick: Function,
     toggleUploadsManager: Function,
     view: View,
 };
 
 const UploadsManager = ({
+    isExpanded,
+    isVisible,
+    isResumableUploadsEnabled,
+    isDragging,
     items,
-    view,
     onItemActionClick,
     onRemoveActionClick,
+    onUpgradeCTAClick,
     onUploadsManagerActionClick,
     toggleUploadsManager,
-    isExpanded,
-    isVisible,
-    isResumableUploadsEnabled,
-    isDragging,
+    view,
 }: Props) => {
     /**
      * Keydown handler for progress bar
@@ -98,6 +100,7 @@ const UploadsManager = ({
                     items={items}
                     onClick={onItemActionClick}
                     onRemoveClick={onRemoveActionClick}
+                    onUpgradeCTAClick={onUpgradeCTAClick}
                     view={view}
                 />
             </div>

package/es/elements/content-uploader/UploadsManager.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/content-uploader/UploadsManager.js"],"names":["React","classNames","ItemList","OverallUploadsProgressBar","STATUS_ERROR","UploadsManager","items","view","onItemActionClick","onRemoveActionClick","onUploadsManagerActionClick","toggleUploadsManager","isExpanded","isVisible","isResumableUploadsEnabled","isDragging","handleProgressBarKeyDown","event","key","numFailedUploads","totalSize","totalUploaded","forEach","item","status","isFolder","size","progress","percent","isResumeVisible","hasMultipleFailedUploads"],"mappings":"AAAA;;;;AAKA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,yBAAP,MAAsC,6BAAtC;AACA,SAASC,YAAT,QAA6B,iBAA7B;AAIA,OAAO,uBAAP;;AAeA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,OAWV;AAAA,MAVTC,KAUS,QAVTA,KAUS;AAAA,MATTC,IASS,QATTA,IASS;AAAA,MARTC,iBAQS,QARTA,iBAQS;AAAA,MAPTC,mBAOS,QAPTA,mBAOS;AAAA,MANTC,2BAMS,QANTA,2BAMS;AAAA,MALTC,oBAKS,QALTA,oBAKS;AAAA,MAJTC,UAIS,QAJTA,UAIS;AAAA,MAHTC,SAGS,QAHTA,SAGS;AAAA,MAFTC,yBAES,QAFTA,yBAES;AAAA,MADTC,UACS,QADTA,UACS;;AACT;;;;;;AAMA,MAAMC,wBAAwB,GAAG,SAA3BA,wBAA2B,CAACC,KAAD,EAA4C;AACzE,YAAQA,KAAK,CAACC,GAAd;AACI,WAAK,OAAL;AACA,WAAK,OAAL;AACIP,QAAAA,oBAAoB;AACpB;;AACJ,cALJ,CAMI;;AANJ;AAQH,GATD;;AAWA,MAAIQ,gBAAgB,GAAG,CAAvB;AACA,MAAIC,SAAS,GAAG,CAAhB;AACA,MAAIC,aAAa,GAAG,CAApB;AACAf,EAAAA,KAAK,CAACgB,OAAN,CAAc,UAAAC,IAAI,EAAI;AAClB,QAAIA,IAAI,CAACC,MAAL,KAAgBpB,YAAhB,IAAgC,CAACmB,IAAI,CAACE,QAA1C,EAAoD;AAChDL,MAAAA,SAAS,IAAIG,IAAI,CAACG,IAAlB;AACAL,MAAAA,aAAa,IAAKE,IAAI,CAACG,IAAL,GAAYH,IAAI,CAACI,QAAlB,GAA8B,KAA/C;AACH,KAHD,MAGO,IAAIJ,IAAI,CAACC,MAAL,KAAgBpB,YAApB,EAAkC;AACrCe,MAAAA,gBAAgB,IAAI,CAApB;AACH;AACJ,GAPD;AASA,MAAMS,OAAO,GAAIP,aAAa,GAAGD,SAAjB,GAA8B,GAA9C;AACA,MAAMS,eAAe,GAAGf,yBAAyB,IAAIK,gBAAgB,GAAG,CAAxE;AACA,MAAMW,wBAAwB,GAAGX,gBAAgB,GAAG,CAApD;AAEA,SACI;AACI,4BAAqB,gBADzB;AAEI,0BAAmB,SAFvB;AAGI,IAAA,SAAS,EAAElB,UAAU,CAAC,kCAAD,EAAqC;AACtD,yBAAmBW,UADmC;AAEtD,wBAAkBC;AAFoC,KAArC;AAHzB,KAQI,oBAAC,yBAAD;AACI,IAAA,UAAU,EAAEE,UADhB;AAEI,IAAA,UAAU,EAAEH,UAFhB;AAGI,IAAA,eAAe,EAAEiB,eAHrB;AAII,IAAA,SAAS,EAAEhB,SAJf;AAKI,IAAA,wBAAwB,EAAEiB,wBAL9B;AAMI,IAAA,OAAO,EAAEnB,oBANb;AAOI,IAAA,SAAS,EAAEK,wBAPf;AAQI,IAAA,2BAA2B,EAAEN,2BARjC;AASI,IAAA,OAAO,EAAEkB,OATb;AAUI,IAAA,IAAI,EAAErB;AAVV,IARJ,EAoBI;AAAK,IAAA,SAAS,EAAC;AAAf,KACI,oBAAC,QAAD;AACI,IAAA,yBAAyB,EAAEO,yBAD/B;AAEI,IAAA,KAAK,EAAER,KAFX;AAGI,IAAA,OAAO,EAAEE,iBAHb;AAII,IAAA,aAAa,EAAEC,mBAJnB;AAKI,IAAA,IAAI,EAAEF;AALV,IADJ,CApBJ,CADJ;AAgCH,CA7ED;;AA+EA,eAAeF,cAAf","sourcesContent":["/**\n * @flow\n * @file Uploads manager\n */\n\nimport React from 'react';\nimport classNames from 'classnames';\nimport ItemList from './ItemList';\nimport OverallUploadsProgressBar from './OverallUploadsProgressBar';\nimport { STATUS_ERROR } from '../../constants';\nimport type { UploadItem } from '../../common/types/upload';\nimport type { View } from '../../common/types/core';\n\nimport './UploadsManager.scss';\n\ntype Props = {\n    isDragging: boolean,\n    isExpanded: boolean,\n    isResumableUploadsEnabled: boolean,\n    isVisible: boolean,\n    items: UploadItem[],\n    onItemActionClick: Function,\n    onRemoveActionClick: (item: UploadItem) => void,\n    onUploadsManagerActionClick: Function,\n    toggleUploadsManager: Function,\n    view: View,\n};\n\nconst UploadsManager = ({\n    items,\n    view,\n    onItemActionClick,\n    onRemoveActionClick,\n    onUploadsManagerActionClick,\n    toggleUploadsManager,\n    isExpanded,\n    isVisible,\n    isResumableUploadsEnabled,\n    isDragging,\n}: Props) => {\n    /**\n     * Keydown handler for progress bar\n     *\n     * @param {SyntheticKeyboardEvent} event\n     * @return {void}\n     */\n    const handleProgressBarKeyDown = (event: SyntheticKeyboardEvent<*>): void => {\n        switch (event.key) {\n            case 'Enter':\n            case 'Space':\n                toggleUploadsManager();\n                break;\n            default:\n            // noop\n        }\n    };\n\n    let numFailedUploads = 0;\n    let totalSize = 0;\n    let totalUploaded = 0;\n    items.forEach(item => {\n        if (item.status !== STATUS_ERROR && !item.isFolder) {\n            totalSize += item.size;\n            totalUploaded += (item.size * item.progress) / 100.0;\n        } else if (item.status === STATUS_ERROR) {\n            numFailedUploads += 1;\n        }\n    });\n\n    const percent = (totalUploaded / totalSize) * 100;\n    const isResumeVisible = isResumableUploadsEnabled && numFailedUploads > 0;\n    const hasMultipleFailedUploads = numFailedUploads > 1;\n\n    return (\n        <div\n            data-resin-component=\"uploadsmanager\"\n            data-resin-feature=\"uploads\"\n            className={classNames('be bcu-uploads-manager-container', {\n                'bcu-is-expanded': isExpanded,\n                'bcu-is-visible': isVisible,\n            })}\n        >\n            <OverallUploadsProgressBar\n                isDragging={isDragging}\n                isExpanded={isExpanded}\n                isResumeVisible={isResumeVisible}\n                isVisible={isVisible}\n                hasMultipleFailedUploads={hasMultipleFailedUploads}\n                onClick={toggleUploadsManager}\n                onKeyDown={handleProgressBarKeyDown}\n                onUploadsManagerActionClick={onUploadsManagerActionClick}\n                percent={percent}\n                view={view}\n            />\n            <div className=\"bcu-uploads-manager-item-list\">\n                <ItemList\n                    isResumableUploadsEnabled={isResumableUploadsEnabled}\n                    items={items}\n                    onClick={onItemActionClick}\n                    onRemoveClick={onRemoveActionClick}\n                    view={view}\n                />\n            </div>\n        </div>\n    );\n};\n\nexport default UploadsManager;\n"],"file":"UploadsManager.js"}
+{"version":3,"sources":["../../../src/elements/content-uploader/UploadsManager.js"],"names":["React","classNames","ItemList","OverallUploadsProgressBar","STATUS_ERROR","UploadsManager","isExpanded","isVisible","isResumableUploadsEnabled","isDragging","items","onItemActionClick","onRemoveActionClick","onUpgradeCTAClick","onUploadsManagerActionClick","toggleUploadsManager","view","handleProgressBarKeyDown","event","key","numFailedUploads","totalSize","totalUploaded","forEach","item","status","isFolder","size","progress","percent","isResumeVisible","hasMultipleFailedUploads"],"mappings":"AAAA;;;;AAKA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,yBAAP,MAAsC,6BAAtC;AACA,SAASC,YAAT,QAA6B,iBAA7B;AAIA,OAAO,uBAAP;;AAgBA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,OAYV;AAAA,MAXTC,UAWS,QAXTA,UAWS;AAAA,MAVTC,SAUS,QAVTA,SAUS;AAAA,MATTC,yBASS,QATTA,yBASS;AAAA,MARTC,UAQS,QARTA,UAQS;AAAA,MAPTC,KAOS,QAPTA,KAOS;AAAA,MANTC,iBAMS,QANTA,iBAMS;AAAA,MALTC,mBAKS,QALTA,mBAKS;AAAA,MAJTC,iBAIS,QAJTA,iBAIS;AAAA,MAHTC,2BAGS,QAHTA,2BAGS;AAAA,MAFTC,oBAES,QAFTA,oBAES;AAAA,MADTC,IACS,QADTA,IACS;;AACT;;;;;;AAMA,MAAMC,wBAAwB,GAAG,SAA3BA,wBAA2B,CAACC,KAAD,EAA4C;AACzE,YAAQA,KAAK,CAACC,GAAd;AACI,WAAK,OAAL;AACA,WAAK,OAAL;AACIJ,QAAAA,oBAAoB;AACpB;;AACJ,cALJ,CAMI;;AANJ;AAQH,GATD;;AAWA,MAAIK,gBAAgB,GAAG,CAAvB;AACA,MAAIC,SAAS,GAAG,CAAhB;AACA,MAAIC,aAAa,GAAG,CAApB;AACAZ,EAAAA,KAAK,CAACa,OAAN,CAAc,UAAAC,IAAI,EAAI;AAClB,QAAIA,IAAI,CAACC,MAAL,KAAgBrB,YAAhB,IAAgC,CAACoB,IAAI,CAACE,QAA1C,EAAoD;AAChDL,MAAAA,SAAS,IAAIG,IAAI,CAACG,IAAlB;AACAL,MAAAA,aAAa,IAAKE,IAAI,CAACG,IAAL,GAAYH,IAAI,CAACI,QAAlB,GAA8B,KAA/C;AACH,KAHD,MAGO,IAAIJ,IAAI,CAACC,MAAL,KAAgBrB,YAApB,EAAkC;AACrCgB,MAAAA,gBAAgB,IAAI,CAApB;AACH;AACJ,GAPD;AASA,MAAMS,OAAO,GAAIP,aAAa,GAAGD,SAAjB,GAA8B,GAA9C;AACA,MAAMS,eAAe,GAAGtB,yBAAyB,IAAIY,gBAAgB,GAAG,CAAxE;AACA,MAAMW,wBAAwB,GAAGX,gBAAgB,GAAG,CAApD;AAEA,SACI;AACI,4BAAqB,gBADzB;AAEI,0BAAmB,SAFvB;AAGI,IAAA,SAAS,EAAEnB,UAAU,CAAC,kCAAD,EAAqC;AACtD,yBAAmBK,UADmC;AAEtD,wBAAkBC;AAFoC,KAArC;AAHzB,KAQI,oBAAC,yBAAD;AACI,IAAA,UAAU,EAAEE,UADhB;AAEI,IAAA,UAAU,EAAEH,UAFhB;AAGI,IAAA,eAAe,EAAEwB,eAHrB;AAII,IAAA,SAAS,EAAEvB,SAJf;AAKI,IAAA,wBAAwB,EAAEwB,wBAL9B;AAMI,IAAA,OAAO,EAAEhB,oBANb;AAOI,IAAA,SAAS,EAAEE,wBAPf;AAQI,IAAA,2BAA2B,EAAEH,2BARjC;AASI,IAAA,OAAO,EAAEe,OATb;AAUI,IAAA,IAAI,EAAEb;AAVV,IARJ,EAoBI;AAAK,IAAA,SAAS,EAAC;AAAf,KACI,oBAAC,QAAD;AACI,IAAA,yBAAyB,EAAER,yBAD/B;AAEI,IAAA,KAAK,EAAEE,KAFX;AAGI,IAAA,OAAO,EAAEC,iBAHb;AAII,IAAA,aAAa,EAAEC,mBAJnB;AAKI,IAAA,iBAAiB,EAAEC,iBALvB;AAMI,IAAA,IAAI,EAAEG;AANV,IADJ,CApBJ,CADJ;AAiCH,CA/ED;;AAiFA,eAAeX,cAAf","sourcesContent":["/**\n * @flow\n * @file Uploads manager\n */\n\nimport React from 'react';\nimport classNames from 'classnames';\nimport ItemList from './ItemList';\nimport OverallUploadsProgressBar from './OverallUploadsProgressBar';\nimport { STATUS_ERROR } from '../../constants';\nimport type { UploadItem } from '../../common/types/upload';\nimport type { View } from '../../common/types/core';\n\nimport './UploadsManager.scss';\n\ntype Props = {\n    isDragging: boolean,\n    isExpanded: boolean,\n    isResumableUploadsEnabled: boolean,\n    isVisible: boolean,\n    items: UploadItem[],\n    onItemActionClick: Function,\n    onRemoveActionClick: (item: UploadItem) => void,\n    onUpgradeCTAClick?: Function,\n    onUploadsManagerActionClick: Function,\n    toggleUploadsManager: Function,\n    view: View,\n};\n\nconst UploadsManager = ({\n    isExpanded,\n    isVisible,\n    isResumableUploadsEnabled,\n    isDragging,\n    items,\n    onItemActionClick,\n    onRemoveActionClick,\n    onUpgradeCTAClick,\n    onUploadsManagerActionClick,\n    toggleUploadsManager,\n    view,\n}: Props) => {\n    /**\n     * Keydown handler for progress bar\n     *\n     * @param {SyntheticKeyboardEvent} event\n     * @return {void}\n     */\n    const handleProgressBarKeyDown = (event: SyntheticKeyboardEvent<*>): void => {\n        switch (event.key) {\n            case 'Enter':\n            case 'Space':\n                toggleUploadsManager();\n                break;\n            default:\n            // noop\n        }\n    };\n\n    let numFailedUploads = 0;\n    let totalSize = 0;\n    let totalUploaded = 0;\n    items.forEach(item => {\n        if (item.status !== STATUS_ERROR && !item.isFolder) {\n            totalSize += item.size;\n            totalUploaded += (item.size * item.progress) / 100.0;\n        } else if (item.status === STATUS_ERROR) {\n            numFailedUploads += 1;\n        }\n    });\n\n    const percent = (totalUploaded / totalSize) * 100;\n    const isResumeVisible = isResumableUploadsEnabled && numFailedUploads > 0;\n    const hasMultipleFailedUploads = numFailedUploads > 1;\n\n    return (\n        <div\n            data-resin-component=\"uploadsmanager\"\n            data-resin-feature=\"uploads\"\n            className={classNames('be bcu-uploads-manager-container', {\n                'bcu-is-expanded': isExpanded,\n                'bcu-is-visible': isVisible,\n            })}\n        >\n            <OverallUploadsProgressBar\n                isDragging={isDragging}\n                isExpanded={isExpanded}\n                isResumeVisible={isResumeVisible}\n                isVisible={isVisible}\n                hasMultipleFailedUploads={hasMultipleFailedUploads}\n                onClick={toggleUploadsManager}\n                onKeyDown={handleProgressBarKeyDown}\n                onUploadsManagerActionClick={onUploadsManagerActionClick}\n                percent={percent}\n                view={view}\n            />\n            <div className=\"bcu-uploads-manager-item-list\">\n                <ItemList\n                    isResumableUploadsEnabled={isResumableUploadsEnabled}\n                    items={items}\n                    onClick={onItemActionClick}\n                    onRemoveClick={onRemoveActionClick}\n                    onUpgradeCTAClick={onUpgradeCTAClick}\n                    view={view}\n                />\n            </div>\n        </div>\n    );\n};\n\nexport default UploadsManager;\n"],"file":"UploadsManager.js"}

package/es/elements/content-uploader/actionCellRenderer.js

@@ -6,14 +6,15 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
  */
 import React from 'react';
 import ItemAction from './ItemAction';
-export default (function (isResumableUploadsEnabled, _onClick) {
+export default (function (isResumableUploadsEnabled, _onClick, onUpgradeCTAClick) {
   return function (_ref) {
     var rowData = _ref.rowData;
     return React.createElement(ItemAction, _extends({}, rowData, {
       isResumableUploadsEnabled: isResumableUploadsEnabled,
       onClick: function onClick() {
         return _onClick(rowData);
-      }
+      },
+      onUpgradeCTAClick: onUpgradeCTAClick
     }));
   };
 });

package/es/elements/content-uploader/actionCellRenderer.js.flow

@@ -11,6 +11,13 @@ type Props = {
     rowData: UploadItem,
 };
 
-export default (isResumableUploadsEnabled: boolean, onClick: Function) => ({ rowData }: Props) => (
-    <ItemAction {...rowData} isResumableUploadsEnabled={isResumableUploadsEnabled} onClick={() => onClick(rowData)} />
+export default (isResumableUploadsEnabled: boolean, onClick: Function, onUpgradeCTAClick?: Function) => ({
+    rowData,
+}: Props) => (
+    <ItemAction
+        {...rowData}
+        isResumableUploadsEnabled={isResumableUploadsEnabled}
+        onClick={() => onClick(rowData)}
+        onUpgradeCTAClick={onUpgradeCTAClick}
+    />
 );

package/es/elements/content-uploader/actionCellRenderer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/content-uploader/actionCellRenderer.js"],"names":["React","ItemAction","isResumableUploadsEnabled","onClick","rowData"],"mappings":";;AAAA;;;;AAKA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,cAAvB;AAOA,gBAAe,UAACC,yBAAD,EAAqCC,QAArC;AAAA,SAA2D;AAAA,QAAGC,OAAH,QAAGA,OAAH;AAAA,WACtE,oBAAC,UAAD,eAAgBA,OAAhB;AAAyB,MAAA,yBAAyB,EAAEF,yBAApD;AAA+E,MAAA,OAAO,EAAE;AAAA,eAAMC,QAAO,CAACC,OAAD,CAAb;AAAA;AAAxF,OADsE;AAAA,GAA3D;AAAA,CAAf","sourcesContent":["/**\n * @flow\n * @file Function to render the action table cell\n */\n\nimport React from 'react';\nimport ItemAction from './ItemAction';\nimport type { UploadItem } from '../../common/types/upload';\n\ntype Props = {\n    rowData: UploadItem,\n};\n\nexport default (isResumableUploadsEnabled: boolean, onClick: Function) => ({ rowData }: Props) => (\n    <ItemAction {...rowData} isResumableUploadsEnabled={isResumableUploadsEnabled} onClick={() => onClick(rowData)} />\n);\n"],"file":"actionCellRenderer.js"}
+{"version":3,"sources":["../../../src/elements/content-uploader/actionCellRenderer.js"],"names":["React","ItemAction","isResumableUploadsEnabled","onClick","onUpgradeCTAClick","rowData"],"mappings":";;AAAA;;;;AAKA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,cAAvB;AAOA,gBAAe,UAACC,yBAAD,EAAqCC,QAArC,EAAwDC,iBAAxD;AAAA,SAAyF;AAAA,QACpGC,OADoG,QACpGA,OADoG;AAAA,WAGpG,oBAAC,UAAD,eACQA,OADR;AAEI,MAAA,yBAAyB,EAAEH,yBAF/B;AAGI,MAAA,OAAO,EAAE;AAAA,eAAMC,QAAO,CAACE,OAAD,CAAb;AAAA,OAHb;AAII,MAAA,iBAAiB,EAAED;AAJvB,OAHoG;AAAA,GAAzF;AAAA,CAAf","sourcesContent":["/**\n * @flow\n * @file Function to render the action table cell\n */\n\nimport React from 'react';\nimport ItemAction from './ItemAction';\nimport type { UploadItem } from '../../common/types/upload';\n\ntype Props = {\n    rowData: UploadItem,\n};\n\nexport default (isResumableUploadsEnabled: boolean, onClick: Function, onUpgradeCTAClick?: Function) => ({\n    rowData,\n}: Props) => (\n    <ItemAction\n        {...rowData}\n        isResumableUploadsEnabled={isResumableUploadsEnabled}\n        onClick={() => onClick(rowData)}\n        onUpgradeCTAClick={onUpgradeCTAClick}\n    />\n);\n"],"file":"actionCellRenderer.js"}

package/es/elements/content-uploader/progressCellRenderer.js

@@ -18,12 +18,16 @@ import { ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED, ERROR_CODE_ITEM_NAME_IN_USE
  * @param {string} [itemName]
  * @returns {FormattedMessage}
  */
-var getErrorMessage = function getErrorMessage(errorCode, itemName) {
+var getErrorMessage = function getErrorMessage(errorCode, itemName, shouldShowUpgradeCTAMessage) {
   switch (errorCode) {
     case ERROR_CODE_UPLOAD_CHILD_FOLDER_FAILED:
       return React.createElement(FormattedMessage, messages.uploadsOneOrMoreChildFoldersFailedToUploadMessage);
 
     case ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED:
+      if (shouldShowUpgradeCTAMessage) {
+        return React.createElement(FormattedMessage, messages.uploadsFileSizeLimitExceededErrorMessageForUpgradeCta);
+      }
+
       return React.createElement(FormattedMessage, messages.uploadsFileSizeLimitExceededErrorMessage);
 
     case ERROR_CODE_ITEM_NAME_IN_USE:
@@ -50,7 +54,7 @@ var getErrorMessage = function getErrorMessage(errorCode, itemName) {
   }
 };
 
-export default (function () {
+export default (function (shouldShowUpgradeCTAMessage) {
   return function (_ref) {
     var rowData = _ref.rowData;
     var status = rowData.status,
@@ -75,7 +79,7 @@ export default (function () {
           return getErrorMessage(ERROR_CODE_UPLOAD_FAILED_PACKAGE, file.name);
         }
 
-        return getErrorMessage(code, name);
+        return getErrorMessage(code, name, shouldShowUpgradeCTAMessage);
 
       default:
         return null;

package/es/elements/content-uploader/progressCellRenderer.js.flow

@@ -35,11 +35,14 @@ type Props = {
  * @param {string} [itemName]
  * @returns {FormattedMessage}
  */
-const getErrorMessage = (errorCode: ?string, itemName: ?string) => {
+const getErrorMessage = (errorCode: ?string, itemName: ?string, shouldShowUpgradeCTAMessage?: boolean) => {
     switch (errorCode) {
         case ERROR_CODE_UPLOAD_CHILD_FOLDER_FAILED:
             return <FormattedMessage {...messages.uploadsOneOrMoreChildFoldersFailedToUploadMessage} />;
         case ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED:
+            if (shouldShowUpgradeCTAMessage) {
+                return <FormattedMessage {...messages.uploadsFileSizeLimitExceededErrorMessageForUpgradeCta} />;
+            }
             return <FormattedMessage {...messages.uploadsFileSizeLimitExceededErrorMessage} />;
         case ERROR_CODE_ITEM_NAME_IN_USE:
             return <FormattedMessage {...messages.uploadsItemNameInUseErrorMessage} />;
@@ -58,7 +61,7 @@ const getErrorMessage = (errorCode: ?string, itemName: ?string) => {
     }
 };
 
-export default () => ({ rowData }: Props) => {
+export default (shouldShowUpgradeCTAMessage?: boolean) => ({ rowData }: Props) => {
     const { status, error = {}, name, isFolder, file } = rowData;
     const { code } = error;
 
@@ -74,7 +77,7 @@ export default () => ({ rowData }: Props) => {
             if (Browser.isSafari() && code === ERROR_CODE_UPLOAD_BAD_DIGEST && file.name.indexOf('.zip') !== -1) {
                 return getErrorMessage(ERROR_CODE_UPLOAD_FAILED_PACKAGE, file.name);
             }
-            return getErrorMessage(code, name);
+            return getErrorMessage(code, name, shouldShowUpgradeCTAMessage);
         default:
             return null;
     }

package/es/elements/content-uploader/progressCellRenderer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/content-uploader/progressCellRenderer.js"],"names":["React","FormattedMessage","Browser","messages","ItemProgress","ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED","ERROR_CODE_ITEM_NAME_IN_USE","ERROR_CODE_ITEM_NAME_INVALID","ERROR_CODE_UPLOAD_PENDING_APP_FOLDER_SIZE_LIMIT","ERROR_CODE_UPLOAD_STORAGE_LIMIT_EXCEEDED","ERROR_CODE_UPLOAD_CHILD_FOLDER_FAILED","ERROR_CODE_UPLOAD_BAD_DIGEST","ERROR_CODE_UPLOAD_FAILED_PACKAGE","STATUS_IN_PROGRESS","STATUS_STAGED","STATUS_ERROR","getErrorMessage","errorCode","itemName","uploadsOneOrMoreChildFoldersFailedToUploadMessage","uploadsFileSizeLimitExceededErrorMessage","uploadsItemNameInUseErrorMessage","uploadsProvidedFolderNameInvalidMessage","name","uploadsStorageLimitErrorMessage","uploadsPendingFolderSizeLimitErrorMessage","uploadsPackageUploadErrorMessage","uploadsDefaultErrorMessage","rowData","status","error","isFolder","file","code","isSafari","indexOf"],"mappings":";;AAAA;;;;AAKA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,gBAAT,QAAiC,YAAjC;AACA,OAAOC,OAAP,MAAoB,qBAApB;AACA,OAAOC,QAAP,MAAqB,oBAArB;AACA,OAAOC,YAAP,MAAyB,gBAAzB;AAEA,SACIC,0CADJ,EAEIC,2BAFJ,EAGIC,4BAHJ,EAIIC,+CAJJ,EAKIC,wCALJ,EAMIC,qCANJ,EAOIC,4BAPJ,EAQIC,gCARJ,EASIC,kBATJ,EAUIC,aAVJ,EAWIC,YAXJ,QAYO,iBAZP;;AAmBA;;;;;;;AAOA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACC,SAAD,EAAqBC,QAArB,EAA2C;AAC/D,UAAQD,SAAR;AACI,SAAKP,qCAAL;AACI,aAAO,oBAAC,gBAAD,EAAsBP,QAAQ,CAACgB,iDAA/B,CAAP;;AACJ,SAAKd,0CAAL;AACI,aAAO,oBAAC,gBAAD,EAAsBF,QAAQ,CAACiB,wCAA/B,CAAP;;AACJ,SAAKd,2BAAL;AACI,aAAO,oBAAC,gBAAD,EAAsBH,QAAQ,CAACkB,gCAA/B,CAAP;;AACJ,SAAKd,4BAAL;AACI,aACI,oBAAC,gBAAD,eAAsBJ,QAAQ,CAACmB,uCAA/B;AAAwE,QAAA,MAAM,EAAE;AAAEC,UAAAA,IAAI,EAAEL;AAAR;AAAhF,SADJ;;AAGJ,SAAKT,wCAAL;AACI,aAAO,oBAAC,gBAAD,EAAsBN,QAAQ,CAACqB,+BAA/B,CAAP;;AACJ,SAAKhB,+CAAL;AACI,aAAO,oBAAC,gBAAD,EAAsBL,QAAQ,CAACsB,yCAA/B,CAAP;;AACJ,SAAKb,gCAAL;AACI,aAAO,oBAAC,gBAAD,EAAsBT,QAAQ,CAACuB,gCAA/B,CAAP;;AACJ;AACI,aAAO,oBAAC,gBAAD,EAAsBvB,QAAQ,CAACwB,0BAA/B,CAAP;AAlBR;AAoBH,CArBD;;AAuBA,gBAAe;AAAA,SAAM,gBAAwB;AAAA,QAArBC,OAAqB,QAArBA,OAAqB;AAAA,QACjCC,MADiC,GACYD,OADZ,CACjCC,MADiC;AAAA,yBACYD,OADZ,CACzBE,KADyB;AAAA,QACzBA,KADyB,+BACjB,EADiB;AAAA,QACbP,IADa,GACYK,OADZ,CACbL,IADa;AAAA,QACPQ,QADO,GACYH,OADZ,CACPG,QADO;AAAA,QACGC,IADH,GACYJ,OADZ,CACGI,IADH;AAAA,QAEjCC,IAFiC,GAExBH,KAFwB,CAEjCG,IAFiC;;AAIzC,QAAIF,QAAQ,IAAIF,MAAM,KAAKd,YAA3B,EAAyC;AACrC,aAAO,IAAP;AACH;;AAED,YAAQc,MAAR;AACI,WAAKhB,kBAAL;AACA,WAAKC,aAAL;AACI,eAAO,oBAAC,YAAD,EAAkBc,OAAlB,CAAP;;AACJ,WAAKb,YAAL;AACI,YAAIb,OAAO,CAACgC,QAAR,MAAsBD,IAAI,KAAKtB,4BAA/B,IAA+DqB,IAAI,CAACT,IAAL,CAAUY,OAAV,CAAkB,MAAlB,MAA8B,CAAC,CAAlG,EAAqG;AACjG,iBAAOnB,eAAe,CAACJ,gCAAD,EAAmCoB,IAAI,CAACT,IAAxC,CAAtB;AACH;;AACD,eAAOP,eAAe,CAACiB,IAAD,EAAOV,IAAP,CAAtB;;AACJ;AACI,eAAO,IAAP;AAVR;AAYH,GApBc;AAAA,CAAf","sourcesContent":["/**\n * @flow\n * @file Function to render the progress table cell\n */\n\nimport React from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport Browser from '../../utils/Browser';\nimport messages from '../common/messages';\nimport ItemProgress from './ItemProgress';\n\nimport {\n    ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED,\n    ERROR_CODE_ITEM_NAME_IN_USE,\n    ERROR_CODE_ITEM_NAME_INVALID,\n    ERROR_CODE_UPLOAD_PENDING_APP_FOLDER_SIZE_LIMIT,\n    ERROR_CODE_UPLOAD_STORAGE_LIMIT_EXCEEDED,\n    ERROR_CODE_UPLOAD_CHILD_FOLDER_FAILED,\n    ERROR_CODE_UPLOAD_BAD_DIGEST,\n    ERROR_CODE_UPLOAD_FAILED_PACKAGE,\n    STATUS_IN_PROGRESS,\n    STATUS_STAGED,\n    STATUS_ERROR,\n} from '../../constants';\nimport type { UploadItem } from '../../common/types/upload';\n\ntype Props = {\n    rowData: UploadItem,\n};\n\n/**\n * Get error message for a specific error code\n *\n * @param {string} [errorCode]\n * @param {string} [itemName]\n * @returns {FormattedMessage}\n */\nconst getErrorMessage = (errorCode: ?string, itemName: ?string) => {\n    switch (errorCode) {\n        case ERROR_CODE_UPLOAD_CHILD_FOLDER_FAILED:\n            return <FormattedMessage {...messages.uploadsOneOrMoreChildFoldersFailedToUploadMessage} />;\n        case ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED:\n            return <FormattedMessage {...messages.uploadsFileSizeLimitExceededErrorMessage} />;\n        case ERROR_CODE_ITEM_NAME_IN_USE:\n            return <FormattedMessage {...messages.uploadsItemNameInUseErrorMessage} />;\n        case ERROR_CODE_ITEM_NAME_INVALID:\n            return (\n                <FormattedMessage {...messages.uploadsProvidedFolderNameInvalidMessage} values={{ name: itemName }} />\n            );\n        case ERROR_CODE_UPLOAD_STORAGE_LIMIT_EXCEEDED:\n            return <FormattedMessage {...messages.uploadsStorageLimitErrorMessage} />;\n        case ERROR_CODE_UPLOAD_PENDING_APP_FOLDER_SIZE_LIMIT:\n            return <FormattedMessage {...messages.uploadsPendingFolderSizeLimitErrorMessage} />;\n        case ERROR_CODE_UPLOAD_FAILED_PACKAGE:\n            return <FormattedMessage {...messages.uploadsPackageUploadErrorMessage} />;\n        default:\n            return <FormattedMessage {...messages.uploadsDefaultErrorMessage} />;\n    }\n};\n\nexport default () => ({ rowData }: Props) => {\n    const { status, error = {}, name, isFolder, file } = rowData;\n    const { code } = error;\n\n    if (isFolder && status !== STATUS_ERROR) {\n        return null;\n    }\n\n    switch (status) {\n        case STATUS_IN_PROGRESS:\n        case STATUS_STAGED:\n            return <ItemProgress {...rowData} />;\n        case STATUS_ERROR:\n            if (Browser.isSafari() && code === ERROR_CODE_UPLOAD_BAD_DIGEST && file.name.indexOf('.zip') !== -1) {\n                return getErrorMessage(ERROR_CODE_UPLOAD_FAILED_PACKAGE, file.name);\n            }\n            return getErrorMessage(code, name);\n        default:\n            return null;\n    }\n};\n"],"file":"progressCellRenderer.js"}
+{"version":3,"sources":["../../../src/elements/content-uploader/progressCellRenderer.js"],"names":["React","FormattedMessage","Browser","messages","ItemProgress","ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED","ERROR_CODE_ITEM_NAME_IN_USE","ERROR_CODE_ITEM_NAME_INVALID","ERROR_CODE_UPLOAD_PENDING_APP_FOLDER_SIZE_LIMIT","ERROR_CODE_UPLOAD_STORAGE_LIMIT_EXCEEDED","ERROR_CODE_UPLOAD_CHILD_FOLDER_FAILED","ERROR_CODE_UPLOAD_BAD_DIGEST","ERROR_CODE_UPLOAD_FAILED_PACKAGE","STATUS_IN_PROGRESS","STATUS_STAGED","STATUS_ERROR","getErrorMessage","errorCode","itemName","shouldShowUpgradeCTAMessage","uploadsOneOrMoreChildFoldersFailedToUploadMessage","uploadsFileSizeLimitExceededErrorMessageForUpgradeCta","uploadsFileSizeLimitExceededErrorMessage","uploadsItemNameInUseErrorMessage","uploadsProvidedFolderNameInvalidMessage","name","uploadsStorageLimitErrorMessage","uploadsPendingFolderSizeLimitErrorMessage","uploadsPackageUploadErrorMessage","uploadsDefaultErrorMessage","rowData","status","error","isFolder","file","code","isSafari","indexOf"],"mappings":";;AAAA;;;;AAKA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,gBAAT,QAAiC,YAAjC;AACA,OAAOC,OAAP,MAAoB,qBAApB;AACA,OAAOC,QAAP,MAAqB,oBAArB;AACA,OAAOC,YAAP,MAAyB,gBAAzB;AAEA,SACIC,0CADJ,EAEIC,2BAFJ,EAGIC,4BAHJ,EAIIC,+CAJJ,EAKIC,wCALJ,EAMIC,qCANJ,EAOIC,4BAPJ,EAQIC,gCARJ,EASIC,kBATJ,EAUIC,aAVJ,EAWIC,YAXJ,QAYO,iBAZP;;AAmBA;;;;;;;AAOA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACC,SAAD,EAAqBC,QAArB,EAAwCC,2BAAxC,EAAkF;AACtG,UAAQF,SAAR;AACI,SAAKP,qCAAL;AACI,aAAO,oBAAC,gBAAD,EAAsBP,QAAQ,CAACiB,iDAA/B,CAAP;;AACJ,SAAKf,0CAAL;AACI,UAAIc,2BAAJ,EAAiC;AAC7B,eAAO,oBAAC,gBAAD,EAAsBhB,QAAQ,CAACkB,qDAA/B,CAAP;AACH;;AACD,aAAO,oBAAC,gBAAD,EAAsBlB,QAAQ,CAACmB,wCAA/B,CAAP;;AACJ,SAAKhB,2BAAL;AACI,aAAO,oBAAC,gBAAD,EAAsBH,QAAQ,CAACoB,gCAA/B,CAAP;;AACJ,SAAKhB,4BAAL;AACI,aACI,oBAAC,gBAAD,eAAsBJ,QAAQ,CAACqB,uCAA/B;AAAwE,QAAA,MAAM,EAAE;AAAEC,UAAAA,IAAI,EAAEP;AAAR;AAAhF,SADJ;;AAGJ,SAAKT,wCAAL;AACI,aAAO,oBAAC,gBAAD,EAAsBN,QAAQ,CAACuB,+BAA/B,CAAP;;AACJ,SAAKlB,+CAAL;AACI,aAAO,oBAAC,gBAAD,EAAsBL,QAAQ,CAACwB,yCAA/B,CAAP;;AACJ,SAAKf,gCAAL;AACI,aAAO,oBAAC,gBAAD,EAAsBT,QAAQ,CAACyB,gCAA/B,CAAP;;AACJ;AACI,aAAO,oBAAC,gBAAD,EAAsBzB,QAAQ,CAAC0B,0BAA/B,CAAP;AArBR;AAuBH,CAxBD;;AA0BA,gBAAe,UAACV,2BAAD;AAAA,SAA2C,gBAAwB;AAAA,QAArBW,OAAqB,QAArBA,OAAqB;AAAA,QACtEC,MADsE,GACzBD,OADyB,CACtEC,MADsE;AAAA,yBACzBD,OADyB,CAC9DE,KAD8D;AAAA,QAC9DA,KAD8D,+BACtD,EADsD;AAAA,QAClDP,IADkD,GACzBK,OADyB,CAClDL,IADkD;AAAA,QAC5CQ,QAD4C,GACzBH,OADyB,CAC5CG,QAD4C;AAAA,QAClCC,IADkC,GACzBJ,OADyB,CAClCI,IADkC;AAAA,QAEtEC,IAFsE,GAE7DH,KAF6D,CAEtEG,IAFsE;;AAI9E,QAAIF,QAAQ,IAAIF,MAAM,KAAKhB,YAA3B,EAAyC;AACrC,aAAO,IAAP;AACH;;AAED,YAAQgB,MAAR;AACI,WAAKlB,kBAAL;AACA,WAAKC,aAAL;AACI,eAAO,oBAAC,YAAD,EAAkBgB,OAAlB,CAAP;;AACJ,WAAKf,YAAL;AACI,YAAIb,OAAO,CAACkC,QAAR,MAAsBD,IAAI,KAAKxB,4BAA/B,IAA+DuB,IAAI,CAACT,IAAL,CAAUY,OAAV,CAAkB,MAAlB,MAA8B,CAAC,CAAlG,EAAqG;AACjG,iBAAOrB,eAAe,CAACJ,gCAAD,EAAmCsB,IAAI,CAACT,IAAxC,CAAtB;AACH;;AACD,eAAOT,eAAe,CAACmB,IAAD,EAAOV,IAAP,EAAaN,2BAAb,CAAtB;;AACJ;AACI,eAAO,IAAP;AAVR;AAYH,GApBc;AAAA,CAAf","sourcesContent":["/**\n * @flow\n * @file Function to render the progress table cell\n */\n\nimport React from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport Browser from '../../utils/Browser';\nimport messages from '../common/messages';\nimport ItemProgress from './ItemProgress';\n\nimport {\n    ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED,\n    ERROR_CODE_ITEM_NAME_IN_USE,\n    ERROR_CODE_ITEM_NAME_INVALID,\n    ERROR_CODE_UPLOAD_PENDING_APP_FOLDER_SIZE_LIMIT,\n    ERROR_CODE_UPLOAD_STORAGE_LIMIT_EXCEEDED,\n    ERROR_CODE_UPLOAD_CHILD_FOLDER_FAILED,\n    ERROR_CODE_UPLOAD_BAD_DIGEST,\n    ERROR_CODE_UPLOAD_FAILED_PACKAGE,\n    STATUS_IN_PROGRESS,\n    STATUS_STAGED,\n    STATUS_ERROR,\n} from '../../constants';\nimport type { UploadItem } from '../../common/types/upload';\n\ntype Props = {\n    rowData: UploadItem,\n};\n\n/**\n * Get error message for a specific error code\n *\n * @param {string} [errorCode]\n * @param {string} [itemName]\n * @returns {FormattedMessage}\n */\nconst getErrorMessage = (errorCode: ?string, itemName: ?string, shouldShowUpgradeCTAMessage?: boolean) => {\n    switch (errorCode) {\n        case ERROR_CODE_UPLOAD_CHILD_FOLDER_FAILED:\n            return <FormattedMessage {...messages.uploadsOneOrMoreChildFoldersFailedToUploadMessage} />;\n        case ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED:\n            if (shouldShowUpgradeCTAMessage) {\n                return <FormattedMessage {...messages.uploadsFileSizeLimitExceededErrorMessageForUpgradeCta} />;\n            }\n            return <FormattedMessage {...messages.uploadsFileSizeLimitExceededErrorMessage} />;\n        case ERROR_CODE_ITEM_NAME_IN_USE:\n            return <FormattedMessage {...messages.uploadsItemNameInUseErrorMessage} />;\n        case ERROR_CODE_ITEM_NAME_INVALID:\n            return (\n                <FormattedMessage {...messages.uploadsProvidedFolderNameInvalidMessage} values={{ name: itemName }} />\n            );\n        case ERROR_CODE_UPLOAD_STORAGE_LIMIT_EXCEEDED:\n            return <FormattedMessage {...messages.uploadsStorageLimitErrorMessage} />;\n        case ERROR_CODE_UPLOAD_PENDING_APP_FOLDER_SIZE_LIMIT:\n            return <FormattedMessage {...messages.uploadsPendingFolderSizeLimitErrorMessage} />;\n        case ERROR_CODE_UPLOAD_FAILED_PACKAGE:\n            return <FormattedMessage {...messages.uploadsPackageUploadErrorMessage} />;\n        default:\n            return <FormattedMessage {...messages.uploadsDefaultErrorMessage} />;\n    }\n};\n\nexport default (shouldShowUpgradeCTAMessage?: boolean) => ({ rowData }: Props) => {\n    const { status, error = {}, name, isFolder, file } = rowData;\n    const { code } = error;\n\n    if (isFolder && status !== STATUS_ERROR) {\n        return null;\n    }\n\n    switch (status) {\n        case STATUS_IN_PROGRESS:\n        case STATUS_STAGED:\n            return <ItemProgress {...rowData} />;\n        case STATUS_ERROR:\n            if (Browser.isSafari() && code === ERROR_CODE_UPLOAD_BAD_DIGEST && file.name.indexOf('.zip') !== -1) {\n                return getErrorMessage(ERROR_CODE_UPLOAD_FAILED_PACKAGE, file.name);\n            }\n            return getErrorMessage(code, name, shouldShowUpgradeCTAMessage);\n        default:\n            return null;\n    }\n};\n"],"file":"progressCellRenderer.js"}

package/es/features/collaborator-avatars/CollaboratorList.scss

@@ -7,7 +7,7 @@
         margin: 0;
         overflow-y: scroll;
         border: solid 1px $bdl-gray-20;
-        border-radius: 4px;
+        border-radius: $bdl-border-radius-size;
         box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .08) inset;
     }
 }

package/es/features/collapsible-sidebar/CollapsibleSidebarLogo.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import styled from 'styled-components';
 import { injectIntl } from 'react-intl';
-import { bdlGridUnit } from '../../styles/variables';
+import { bdlGridUnit, bdlBorderRadiusSizeLarge } from '../../styles/variables';
 import Logo from '../../icon/logo/BoxLogo';
 import PlainButton from '../../components/plain-button/PlainButton';
 import LinkBase from '../../components/link/LinkBase';
@@ -14,7 +14,7 @@ import messages from './messages';
 var StyledLogo = styled(Logo).withConfig({
   displayName: "CollapsibleSidebarLogo__StyledLogo",
   componentId: "sc-6amevi-0"
-})(["padding:", ";border:1px solid transparent;border-radius:8px;& path,& .fill-color{fill:", ";}a:focus &{border-color:", ";outline:none;}"], bdlGridUnit, function (props) {
+})(["padding:", ";border:1px solid transparent;border-radius:", ";& path,& .fill-color{fill:", ";}a:focus &{border-color:", ";outline:none;}"], bdlGridUnit, bdlBorderRadiusSizeLarge, function (props) {
   var _props$theme, _props$theme$primary;
 
   return (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : (_props$theme$primary = _props$theme.primary) === null || _props$theme$primary === void 0 ? void 0 : _props$theme$primary.foreground;
@@ -32,7 +32,7 @@ var StyledIconHamburger = styled(IconHamburger).withConfig({
 var StyledToggleButton = styled(PlainButton).withConfig({
   displayName: "CollapsibleSidebarLogo__StyledToggleButton",
   componentId: "sc-6amevi-2"
-})(["&,&:focus,&:active,&:hover{padding:8px 12px;line-height:1;border-color:transparent;border-style:solid;border-width:1px;border-radius:8px;}&:focus{border-color:", ";outline:none;}"], function (props) {
+})(["&,&:focus,&:active,&:hover{padding:8px 12px;line-height:1;border-color:transparent;border-style:solid;border-width:1px;border-radius:", ";}&:focus{border-color:", ";outline:none;}"], bdlBorderRadiusSizeLarge, function (props) {
   var _props$theme3, _props$theme3$primary;
 
   return props === null || props === void 0 ? void 0 : (_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : (_props$theme3$primary = _props$theme3.primary) === null || _props$theme3$primary === void 0 ? void 0 : _props$theme3$primary.foreground;

package/es/features/collapsible-sidebar/CollapsibleSidebarLogo.js.flow

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 
 import { injectIntl } from 'react-intl';
 import type { InjectIntlProvidedProps } from 'react-intl';
-import { bdlGridUnit } from '../../styles/variables';
+import { bdlGridUnit, bdlBorderRadiusSizeLarge } from '../../styles/variables';
 import Logo from '../../icon/logo/BoxLogo';
 import PlainButton from '../../components/plain-button/PlainButton';
 import LinkBase from '../../components/link/LinkBase';
@@ -18,7 +18,7 @@ import messages from './messages';
 const StyledLogo = styled(Logo)`
     padding: ${bdlGridUnit};
     border: 1px solid transparent;
-    border-radius: 8px;
+    border-radius: ${bdlBorderRadiusSizeLarge};
 
     & path,
     & .fill-color {
@@ -51,7 +51,7 @@ const StyledToggleButton = styled(PlainButton)`
         border-color: transparent;
         border-style: solid;
         border-width: 1px;
-        border-radius: 8px; /* we don't have unitless variables to multiply in JS yet */
+        border-radius: ${bdlBorderRadiusSizeLarge};
     }
 
     &:focus {

package/es/features/collapsible-sidebar/CollapsibleSidebarLogo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/features/collapsible-sidebar/CollapsibleSidebarLogo.js"],"names":["React","classNames","styled","injectIntl","bdlGridUnit","Logo","PlainButton","LinkBase","IconHamburger","CollapsibleSidebarItem","messages","StyledLogo","props","theme","primary","foreground","StyledIconHamburger","StyledToggleButton","CollapsibleSidebarLogo","badge","buttonProps","className","expanded","linkProps","onToggle","intl","classes","toggleButton","formatMessage","collapseButtonLabel","expandButtonLabel"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport styled from 'styled-components';\n\nimport { injectIntl } from 'react-intl';\nimport type { InjectIntlProvidedProps } from 'react-intl';\nimport { bdlGridUnit } from '../../styles/variables';\nimport Logo from '../../icon/logo/BoxLogo';\nimport PlainButton from '../../components/plain-button/PlainButton';\nimport LinkBase from '../../components/link/LinkBase';\nimport IconHamburger from '../../icons/general/IconHamburger';\n\nimport CollapsibleSidebarItem from './CollapsibleSidebarItem';\n\nimport messages from './messages';\n\nconst StyledLogo = styled(Logo)`\n    padding: ${bdlGridUnit};\n    border: 1px solid transparent;\n    border-radius: 8px;\n\n    & path,\n    & .fill-color {\n        fill: ${props => props.theme?.primary?.foreground};\n    }\n\n    a:focus & {\n        /* since root navlink is focusable, give logo some kind of focus state */\n        border-color: ${props => props.theme?.primary?.foreground};\n        outline: none;\n    }\n`;\n\nconst StyledIconHamburger = styled(IconHamburger)`\n    position: relative;\n    top: 1px; /* svg alignment */\n    & .fill-color {\n        fill: ${props => props.theme.primary.foreground};\n    }\n`;\n\nconst StyledToggleButton = styled(PlainButton)`\n    /* override .btn-plain's overzealous pseudoelement styling */\n    &,\n    &:focus,\n    &:active,\n    &:hover {\n        padding: 8px 12px; /* we don't have unitless variables to multiply in JS yet */\n        line-height: 1;\n        border-color: transparent;\n        border-style: solid;\n        border-width: 1px;\n        border-radius: 8px; /* we don't have unitless variables to multiply in JS yet */\n    }\n\n    &:focus {\n        border-color: ${props => props?.theme?.primary?.foreground};\n        outline: none;\n    }\n`;\n\ntype Props = {\n    /** optional badge to be displayed next to logo */\n    badge?: React.Node,\n\n    buttonProps?: Object,\n\n    /** Additional classes */\n    className?: string,\n\n    /** Controls whether or not the sidebar is expanded on the page */\n    expanded: boolean,\n\n    linkProps: Object,\n\n    onToggle: () => void,\n} & InjectIntlProvidedProps;\n\nfunction CollapsibleSidebarLogo(props: Props) {\n    const { badge, buttonProps, className, expanded, linkProps, onToggle, intl } = props;\n\n    const classes = classNames('bdl-CollapsibleSidebar-logo', className);\n\n    const toggleButton = (\n        <StyledToggleButton\n            className=\"bdl-CollapsibleSidebar-toggleButton\"\n            onClick={onToggle}\n            aria-label={intl.formatMessage(expanded ? messages.collapseButtonLabel : messages.expandButtonLabel)}\n            type=\"button\"\n            {...buttonProps}\n        >\n            <StyledIconHamburger height={20} width={20} />\n        </StyledToggleButton>\n    );\n\n    return (\n        <div className={classes}>\n            <CollapsibleSidebarItem\n                collapsedElement={toggleButton}\n                expanded={expanded}\n                expandedElement={\n                    <>\n                        {toggleButton}\n                        <LinkBase className=\"bdl-CollapsibleSidebar-logoLink\" {...linkProps}>\n                            <>\n                                <StyledLogo\n                                    className=\"bdl-CollapsibleSidebar-logoIcon\"\n                                    height={32 + 2 * 1 /* border */ + 2 * 4 /* padding */}\n                                    width={61 + 2 * 1 /* border */ + 2 * 4 /* padding */}\n                                />\n                                {badge}\n                            </>\n                        </LinkBase>\n                    </>\n                }\n            />\n        </div>\n    );\n}\n\nexport default injectIntl(CollapsibleSidebarLogo);\n"],"file":"CollapsibleSidebarLogo.js"}
+{"version":3,"sources":["../../../src/features/collapsible-sidebar/CollapsibleSidebarLogo.js"],"names":["React","classNames","styled","injectIntl","bdlGridUnit","bdlBorderRadiusSizeLarge","Logo","PlainButton","LinkBase","IconHamburger","CollapsibleSidebarItem","messages","StyledLogo","props","theme","primary","foreground","StyledIconHamburger","StyledToggleButton","CollapsibleSidebarLogo","badge","buttonProps","className","expanded","linkProps","onToggle","intl","classes","toggleButton","formatMessage","collapseButtonLabel","expandButtonLabel"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport styled from 'styled-components';\n\nimport { injectIntl } from 'react-intl';\nimport type { InjectIntlProvidedProps } from 'react-intl';\nimport { bdlGridUnit, bdlBorderRadiusSizeLarge } from '../../styles/variables';\nimport Logo from '../../icon/logo/BoxLogo';\nimport PlainButton from '../../components/plain-button/PlainButton';\nimport LinkBase from '../../components/link/LinkBase';\nimport IconHamburger from '../../icons/general/IconHamburger';\n\nimport CollapsibleSidebarItem from './CollapsibleSidebarItem';\n\nimport messages from './messages';\n\nconst StyledLogo = styled(Logo)`\n    padding: ${bdlGridUnit};\n    border: 1px solid transparent;\n    border-radius: ${bdlBorderRadiusSizeLarge};\n\n    & path,\n    & .fill-color {\n        fill: ${props => props.theme?.primary?.foreground};\n    }\n\n    a:focus & {\n        /* since root navlink is focusable, give logo some kind of focus state */\n        border-color: ${props => props.theme?.primary?.foreground};\n        outline: none;\n    }\n`;\n\nconst StyledIconHamburger = styled(IconHamburger)`\n    position: relative;\n    top: 1px; /* svg alignment */\n    & .fill-color {\n        fill: ${props => props.theme.primary.foreground};\n    }\n`;\n\nconst StyledToggleButton = styled(PlainButton)`\n    /* override .btn-plain's overzealous pseudoelement styling */\n    &,\n    &:focus,\n    &:active,\n    &:hover {\n        padding: 8px 12px; /* we don't have unitless variables to multiply in JS yet */\n        line-height: 1;\n        border-color: transparent;\n        border-style: solid;\n        border-width: 1px;\n        border-radius: ${bdlBorderRadiusSizeLarge};\n    }\n\n    &:focus {\n        border-color: ${props => props?.theme?.primary?.foreground};\n        outline: none;\n    }\n`;\n\ntype Props = {\n    /** optional badge to be displayed next to logo */\n    badge?: React.Node,\n\n    buttonProps?: Object,\n\n    /** Additional classes */\n    className?: string,\n\n    /** Controls whether or not the sidebar is expanded on the page */\n    expanded: boolean,\n\n    linkProps: Object,\n\n    onToggle: () => void,\n} & InjectIntlProvidedProps;\n\nfunction CollapsibleSidebarLogo(props: Props) {\n    const { badge, buttonProps, className, expanded, linkProps, onToggle, intl } = props;\n\n    const classes = classNames('bdl-CollapsibleSidebar-logo', className);\n\n    const toggleButton = (\n        <StyledToggleButton\n            className=\"bdl-CollapsibleSidebar-toggleButton\"\n            onClick={onToggle}\n            aria-label={intl.formatMessage(expanded ? messages.collapseButtonLabel : messages.expandButtonLabel)}\n            type=\"button\"\n            {...buttonProps}\n        >\n            <StyledIconHamburger height={20} width={20} />\n        </StyledToggleButton>\n    );\n\n    return (\n        <div className={classes}>\n            <CollapsibleSidebarItem\n                collapsedElement={toggleButton}\n                expanded={expanded}\n                expandedElement={\n                    <>\n                        {toggleButton}\n                        <LinkBase className=\"bdl-CollapsibleSidebar-logoLink\" {...linkProps}>\n                            <>\n                                <StyledLogo\n                                    className=\"bdl-CollapsibleSidebar-logoIcon\"\n                                    height={32 + 2 * 1 /* border */ + 2 * 4 /* padding */}\n                                    width={61 + 2 * 1 /* border */ + 2 * 4 /* padding */}\n                                />\n                                {badge}\n                            </>\n                        </LinkBase>\n                    </>\n                }\n            />\n        </div>\n    );\n}\n\nexport default injectIntl(CollapsibleSidebarLogo);\n"],"file":"CollapsibleSidebarLogo.js"}

package/es/features/content-explorer/content-explorer/ContentExplorer.scss

@@ -1,4 +1,5 @@
 @import '../../../styles/variables';
+@import '../../../styles/mixins/buttons';
 
 .content-explorer {
     .content-explorer-search-new-folder-container {
@@ -86,6 +87,10 @@
         padding-top: 20px;
         border-top: 1px solid $bdl-gray-10;
 
+        .btn {
+            @include bdl-Button--large;
+        }
+
         .status-message {
             position: absolute;
             left: 0;

package/es/features/content-explorer/item-list/ItemList.scss

@@ -78,6 +78,6 @@
         width: 75%;
         height: 12px;
         background-color: $bdl-gray-30;
-        border-radius: 3px;
+        border-radius: $bdl-border-radius-size;
     }
 }

package/es/features/left-sidebar/styles/LeftSidebarDropWrapper.scss

@@ -21,7 +21,7 @@
         margin: 0;
         background-color: rgba($hover-blue-background, .75);
         border: 1px dashed $bdl-box-blue;
-        border-radius: 3px;
+        border-radius: $bdl-border-radius-size;
     }
 
     .left-sidebar-drop-wrapper-text {

package/es/features/left-sidebar/styles/LeftSidebarLinkCallout.scss

@@ -11,7 +11,7 @@ $arrow-size: 6px;
     word-wrap: break-word;
     background-color: $bdl-dark-blue;
     border-color: $bdl-dark-blue;
-    border-radius: 4px;
+    border-radius: $bdl-border-radius-size;
 
     &::before {
         position: absolute;
@@ -74,7 +74,7 @@ $arrow-size: 6px;
 
         .left-nav-callout-button {
             padding: 10px;
-            border-radius: 4px;
+            border-radius: $bdl-border-radius-size;
         }
 
         .left-nav-callout-secondary-button {

package/es/features/message-preview-content/styles/PreviewErrorNotification.scss

@@ -8,7 +8,7 @@
     width: 100%;
     height: 100%;
     background-image: linear-gradient(to left, $bdl-gray-02, $bdl-gray-05 14%);
-    border-radius: 8px;
+    border-radius: $bdl-border-radius-size-large;
 }
 
 .PreviewErrorNotification-image {

package/es/features/metadata-based-view/MetadataBasedItemList.scss

@@ -44,7 +44,7 @@ $bdl-MetadataBasedItemList-insetShadowRight: 3px 0 3px -2px $bdl-gray-10 inset;
     height: 32px;
     background-color: $white;
     border: 1px solid $bdl-gray-20;
-    border-radius: 3px;
+    border-radius: $bdl-border-radius-size;
 
     .bdl-MetadataBasedItemList-cell--cancelIcon,
     .bdl-MetadataBasedItemList-cell--saveIcon {

package/es/features/metadata-instance-editor/CascadePolicy.scss

@@ -8,14 +8,14 @@ $cascade-policy-background: #f1e2fd;
     color: $bdl-gray;
     background-color: $cascade-policy-background;
     border: none;
-    border-radius: 4px;
+    border-radius: $bdl-border-radius-size;
 }
 
 .metadata-cascade-editor {
     color: $bdl-gray;
     background-color: $bdl-gray-05;
     border: none;
-    border-radius: 4px;
+    border-radius: $bdl-border-radius-size;
 
     hr {
         display: block;

package/es/features/metadata-instance-editor/CustomInstanceNewField.scss

@@ -3,7 +3,7 @@
 .custom-new-field {
     padding: 10px 25px 20px;
     background-color: $bdl-gray-10;
-    border-radius: 3px;
+    border-radius: $bdl-border-radius-size;
 
     .text-input-container {
         flex: 1;

package/es/features/metadata-instance-editor/Instance.scss

@@ -30,7 +30,7 @@
     justify-content: center;
     width: 24px;
     height: 24px;
-    border-radius: 3px;
+    border-radius: $bdl-border-radius-size;
 
     &:hover svg path {
         fill: $bdl-gray;

package/es/features/metadata-instance-editor/TemplateDropdown.scss

@@ -15,7 +15,7 @@
         padding: 0;
         overflow: hidden;
         border: 1px solid $bdl-gray-30;
-        border-radius: 4px;
+        border-radius: $bdl-border-radius-size-med;
     }
 
     ul.overlay {
@@ -32,7 +32,7 @@
         .overlay-wrapper {
             overflow: hidden;
             border-top: none;
-            border-radius: 0 0 4px 4px;
+            border-radius: 0 0 $bdl-border-radius-size-med $bdl-border-radius-size-med;
 
             // NOTE (cwei): targets ie11
             @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
@@ -90,7 +90,7 @@
             margin: 0;
             padding: 10px 12px 12px;
             border-bottom: 1px solid $bdl-gray-30;
-            border-radius: 4px 4px 0 0;
+            border-radius: $bdl-border-radius-size-med $bdl-border-radius-size-med 0 0;
 
             .action-button {
                 .clear-button {
@@ -153,7 +153,7 @@
         background-color: $white;
         border: 1px solid $bdl-gray-30;
         border-top-color: transparent;
-        border-radius: 0 0 4px 4px;
+        border-radius: 0 0 $bdl-border-radius-size-med $bdl-border-radius-size-med;
 
         &.template-dropdown-loading-indicator {
             display: flex;

package/es/features/query-bar/styles/Condition.scss

@@ -8,7 +8,7 @@
     margin-top: auto;
     padding: 8px;
     border: 1px solid #d2d2d2;
-    border-radius: 5px;
+    border-radius: $bdl-border-radius-size-med;
     box-shadow: 0 1px 1px 1px rgba(0, 0, 0, .05);
 }
 
@@ -68,7 +68,7 @@
             .bdl-SelectButton,
             .select-button {
                 width: 160px;
-                border-radius: 5px;
+                border-radius: $bdl-border-radius-size-med;
             }
 
             .bdl-SelectButton.placeholder,
@@ -92,7 +92,7 @@
 
             .bdl-SelectButton,
             .select-button {
-                border-radius: 5px;
+                border-radius: $bdl-border-radius-size-med;
             }
         }
     }
@@ -144,7 +144,7 @@
             .bdl-SelectButton,
             .select-button {
                 width: 160px;
-                border-radius: 5px;
+                border-radius: $bdl-border-radius-size-med;
             }
 
             .bdl-SelectButton.placeholder,

package/es/features/query-bar/styles/QueryBarButtons.scss

@@ -116,7 +116,7 @@ $query-bar-button-width: 240px;
                 color: $white;
                 background-color: $bdl-box-blue;
                 border: none;
-                border-radius: 5px;
+                border-radius: $bdl-border-radius-size-med;
             }
         }
     }

package/es/features/quick-search/QuickSearch.scss

@@ -9,13 +9,10 @@
         width: 100%;
     }
 
-    .overlay {
-        border-radius: $bdl-border-radius-size;
-    }
-
     ul.overlay {
         @include bdl-transition($bdl-transitionDurationBase, transform);
 
+        margin-top: $bdl-grid-unit * 2;
         padding: 0;
         overflow-x: hidden;
         overflow-y: auto;

package/es/features/quick-search/QuickSearchMessage.scss

@@ -8,5 +8,6 @@
         color: $bdl-gray-50;
         text-align: center;
         background-color: $bdl-gray-02;
+        border-radius: $bdl-border-radius-size-med;
     }
 }

package/es/features/security/_mixins.scss

@@ -5,7 +5,7 @@
     align-items: center;
     margin: 0;
     padding: 2px 8px;
-    border-radius: $bdl-border-radius-large-size;
+    border-radius: 10px; // Rounded sides: radius half the height of the badge
 }
 
 @mixin bdl-SecurityBadge-name {