box-ui-elements 23.4.0-beta.24 → 23.4.0-beta.25

package/es/icons/icons.stories.js

@@ -1,15 +1,8 @@
 import * as React from 'react';
-import { select, number, text } from '@storybook/addon-knobs';
 import ItemIcon from './item-icon';
-import ItemIconMonotone from './item-icon-monotone';
 import Tooltip, { TooltipPosition } from '../components/tooltip';
 const itemTypeOptions = ['default', 'audio', 'bookmark', 'boxnote', 'code', 'document', 'dwg', 'excel-spreadsheet', 'google-docs', 'google-sheets', 'google-slides', 'illustrator', 'image', 'indesign', 'keynote', 'numbers', 'pages', 'pdf', 'photoshop', 'powerpoint-presentation', 'presentation', 'spreadsheet', 'text', 'threed', 'vector', 'video', 'word-document', 'zip', 'folder-collab', 'folder-external', 'folder-plain'];
 export const itemIcons = () => {
-  const componentPath = select('Variant', ['icons/item-icon', 'icons/item-icon-monotone'], 'icons/item-icon');
-  const Icon = {
-    'icons/item-icon': ItemIcon,
-    'icons/item-icon-monotone': ItemIconMonotone
-  }[componentPath];
   return /*#__PURE__*/React.createElement(React.Fragment, null, itemTypeOptions.map(t => /*#__PURE__*/React.createElement("span", {
     style: {
       padding: 8
@@ -21,16 +14,9 @@ export const itemIcons = () => {
     style: {
       display: 'inline-block'
     }
-  }, /*#__PURE__*/React.createElement(Icon, {
-    iconType: t,
-    dimension: number('dimension', 32, {
-      range: true,
-      min: 10,
-      max: 64,
-      step: 2
-    }),
-    title: text('title', ''),
-    className: text('className', '')
+  }, /*#__PURE__*/React.createElement(ItemIcon, {
+    dimension: 32,
+    iconType: t
   }))))), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "Hover icons in grid to view the ", /*#__PURE__*/React.createElement("code", null, "iconType"), " prop"), /*#__PURE__*/React.createElement("p", {
     style: {
       display: 'flex',
@@ -42,7 +28,7 @@ export const itemIcons = () => {
     text: "default",
     isShown: true,
     position: TooltipPosition.MIDDLE_RIGHT
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement(ItemIcon, {
     iconType: "default",
     dimension: 32
   })))));
@@ -53,10 +39,7 @@ const description = `
 `;
 export default {
   title: 'Icons/ItemIcon',
-  subcomponents: {
-    ItemIcon,
-    ItemIconMonotone
-  },
+  component: ItemIcon,
   parameters: {
     componentSubtitle: description
   }

package/es/icons/icons.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.stories.js","names":["React","select","number","text","ItemIcon","ItemIconMonotone","Tooltip","TooltipPosition","itemTypeOptions","itemIcons","componentPath","Icon","createElement","Fragment","map","t","style","padding","key","display","iconType","dimension","range","min","max","step","title","className","alignItems","paddingTop","paddingLeft","isShown","position","MIDDLE_RIGHT","description","subcomponents","parameters","componentSubtitle"],"sources":["../../src/icons/icons.stories.tsx"],"sourcesContent":["import * as React from 'react';\nimport { select, number, text } from '@storybook/addon-knobs';\nimport ItemIcon, { ItemIconProps } from './item-icon';\nimport ItemIconMonotone from './item-icon-monotone';\nimport Tooltip, { TooltipPosition } from '../components/tooltip';\n\nconst itemTypeOptions: ItemIconProps['iconType'][] = [\n    'default',\n    'audio',\n    'bookmark',\n    'boxnote',\n    'code',\n    'document',\n    'dwg',\n    'excel-spreadsheet',\n    'google-docs',\n    'google-sheets',\n    'google-slides',\n    'illustrator',\n    'image',\n    'indesign',\n    'keynote',\n    'numbers',\n    'pages',\n    'pdf',\n    'photoshop',\n    'powerpoint-presentation',\n    'presentation',\n    'spreadsheet',\n    'text',\n    'threed',\n    'vector',\n    'video',\n    'word-document',\n    'zip',\n    'folder-collab',\n    'folder-external',\n    'folder-plain',\n];\n\nexport const itemIcons = () => {\n    const componentPath = select('Variant', ['icons/item-icon', 'icons/item-icon-monotone'], 'icons/item-icon');\n    const Icon = { 'icons/item-icon': ItemIcon, 'icons/item-icon-monotone': ItemIconMonotone }[componentPath];\n    return (\n        <>\n            {itemTypeOptions.map(t => (\n                <span style={{ padding: 8 }} key={t}>\n                    <Tooltip text={t}>\n                        <span style={{ display: 'inline-block' }}>\n                            <Icon\n                                iconType={t}\n                                dimension={number('dimension', 32, { range: true, min: 10, max: 64, step: 2 })}\n                                title={text('title', '')}\n                                className={text('className', '')}\n                            />\n                        </span>\n                    </Tooltip>\n                </span>\n            ))}\n            <br />\n            <br />\n            <div>\n                <b>\n                    Hover icons in grid to view the <code>iconType</code> prop\n                </b>\n                <p style={{ display: 'flex', alignItems: 'center', paddingTop: 16, paddingLeft: 8 }}>\n                    <Tooltip text=\"default\" isShown position={TooltipPosition.MIDDLE_RIGHT}>\n                        <Icon iconType=\"default\" dimension={32} />\n                    </Tooltip>\n                </p>\n            </div>\n        </>\n    );\n};\n\nconst description = `\n  ItemIcon, and the solid-color variant ItemIconMonotone, are catch-all components that render the appropriate\n  icon for a given file or folder type\n`;\n\nexport default {\n    title: 'Icons/ItemIcon',\n    subcomponents: { ItemIcon, ItemIconMonotone },\n    parameters: {\n        componentSubtitle: description,\n    },\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"icons.stories.js","names":["React","ItemIcon","Tooltip","TooltipPosition","itemTypeOptions","itemIcons","createElement","Fragment","map","t","style","padding","key","text","display","dimension","iconType","alignItems","paddingTop","paddingLeft","isShown","position","MIDDLE_RIGHT","description","title","component","parameters","componentSubtitle"],"sources":["../../src/icons/icons.stories.tsx"],"sourcesContent":["import * as React from 'react';\nimport ItemIcon, { ItemIconProps } from './item-icon';\nimport Tooltip, { TooltipPosition } from '../components/tooltip';\n\nconst itemTypeOptions: ItemIconProps['iconType'][] = [\n    'default',\n    'audio',\n    'bookmark',\n    'boxnote',\n    'code',\n    'document',\n    'dwg',\n    'excel-spreadsheet',\n    'google-docs',\n    'google-sheets',\n    'google-slides',\n    'illustrator',\n    'image',\n    'indesign',\n    'keynote',\n    'numbers',\n    'pages',\n    'pdf',\n    'photoshop',\n    'powerpoint-presentation',\n    'presentation',\n    'spreadsheet',\n    'text',\n    'threed',\n    'vector',\n    'video',\n    'word-document',\n    'zip',\n    'folder-collab',\n    'folder-external',\n    'folder-plain',\n];\n\nexport const itemIcons = () => {\n    return (\n        <>\n            {itemTypeOptions.map(t => (\n                <span style={{ padding: 8 }} key={t}>\n                    <Tooltip text={t}>\n                        <span style={{ display: 'inline-block' }}>\n                            <ItemIcon dimension={32} iconType={t} />\n                        </span>\n                    </Tooltip>\n                </span>\n            ))}\n            <br />\n            <br />\n            <div>\n                <b>\n                    Hover icons in grid to view the <code>iconType</code> prop\n                </b>\n                <p style={{ display: 'flex', alignItems: 'center', paddingTop: 16, paddingLeft: 8 }}>\n                    <Tooltip text=\"default\" isShown position={TooltipPosition.MIDDLE_RIGHT}>\n                        <ItemIcon iconType=\"default\" dimension={32} />\n                    </Tooltip>\n                </p>\n            </div>\n        </>\n    );\n};\n\nconst description = `\n  ItemIcon, and the solid-color variant ItemIconMonotone, are catch-all components that render the appropriate\n  icon for a given file or folder type\n`;\n\nexport default {\n    title: 'Icons/ItemIcon',\n    component: ItemIcon,\n    parameters: {\n        componentSubtitle: description,\n    },\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,QAAQ,MAAyB,aAAa;AACrD,OAAOC,OAAO,IAAIC,eAAe,QAAQ,uBAAuB;AAEhE,MAAMC,eAA4C,GAAG,CACjD,SAAS,EACT,OAAO,EACP,UAAU,EACV,SAAS,EACT,MAAM,EACN,UAAU,EACV,KAAK,EACL,mBAAmB,EACnB,aAAa,EACb,eAAe,EACf,eAAe,EACf,aAAa,EACb,OAAO,EACP,UAAU,EACV,SAAS,EACT,SAAS,EACT,OAAO,EACP,KAAK,EACL,WAAW,EACX,yBAAyB,EACzB,cAAc,EACd,aAAa,EACb,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,eAAe,EACf,KAAK,EACL,eAAe,EACf,iBAAiB,EACjB,cAAc,CACjB;AAED,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC3B,oBACIL,KAAA,CAAAM,aAAA,CAAAN,KAAA,CAAAO,QAAA,QACKH,eAAe,CAACI,GAAG,CAACC,CAAC,iBAClBT,KAAA,CAAAM,aAAA;IAAMI,KAAK,EAAE;MAAEC,OAAO,EAAE;IAAE,CAAE;IAACC,GAAG,EAAEH;EAAE,gBAChCT,KAAA,CAAAM,aAAA,CAACJ,OAAO;IAACW,IAAI,EAAEJ;EAAE,gBACbT,KAAA,CAAAM,aAAA;IAAMI,KAAK,EAAE;MAAEI,OAAO,EAAE;IAAe;EAAE,gBACrCd,KAAA,CAAAM,aAAA,CAACL,QAAQ;IAACc,SAAS,EAAE,EAAG;IAACC,QAAQ,EAAEP;EAAE,CAAE,CACrC,CACD,CACP,CACT,CAAC,eACFT,KAAA,CAAAM,aAAA,WAAK,CAAC,eACNN,KAAA,CAAAM,aAAA,WAAK,CAAC,eACNN,KAAA,CAAAM,aAAA,2BACIN,KAAA,CAAAM,aAAA,YAAG,kCACiC,eAAAN,KAAA,CAAAM,aAAA,eAAM,UAAc,CAAC,SACtD,CAAC,eACJN,KAAA,CAAAM,aAAA;IAAGI,KAAK,EAAE;MAAEI,OAAO,EAAE,MAAM;MAAEG,UAAU,EAAE,QAAQ;MAAEC,UAAU,EAAE,EAAE;MAAEC,WAAW,EAAE;IAAE;EAAE,gBAChFnB,KAAA,CAAAM,aAAA,CAACJ,OAAO;IAACW,IAAI,EAAC,SAAS;IAACO,OAAO;IAACC,QAAQ,EAAElB,eAAe,CAACmB;EAAa,gBACnEtB,KAAA,CAAAM,aAAA,CAACL,QAAQ;IAACe,QAAQ,EAAC,SAAS;IAACD,SAAS,EAAE;EAAG,CAAE,CACxC,CACV,CACF,CACP,CAAC;AAEX,CAAC;AAED,MAAMQ,WAAW,GAAG;AACpB;AACA;AACA,CAAC;AAED,eAAe;EACXC,KAAK,EAAE,gBAAgB;EACvBC,SAAS,EAAExB,QAAQ;EACnByB,UAAU,EAAE;IACRC,iBAAiB,EAAEJ;EACvB;AACJ,CAAC","ignoreList":[]}

package/es/src/elements/content-sidebar/stories/tests/MetadataSidebarRedesign-visual.stories.d.ts

@@ -14,8 +14,8 @@ export declare const AddTemplateDropdownMenuOnEmpty: {
             isBoxAiSuggestionsEnabled: boolean;
             isBetaLanguageEnabled: boolean;
             isFeatureEnabled: boolean;
-            onError: import("@vitest/spy").Mock<any, any>;
-            onSuccess: import("@vitest/spy").Mock<any, any>;
+            onError: import("@vitest/spy").Mock<(...args: any[]) => any>;
+            onSuccess: import("@vitest/spy").Mock<(...args: any[]) => any>;
         };
     };
     play: ({ canvasElement }: {

package/es/src/icons/icons.stories.d.ts

@@ -3,10 +3,7 @@ import { ItemIconProps } from './item-icon';
 export declare const itemIcons: () => React.JSX.Element;
 declare const _default: {
     title: string;
-    subcomponents: {
-        ItemIcon: ({ className, dimension, iconType, title }: ItemIconProps) => React.JSX.Element;
-        ItemIconMonotone: ({ className, dimension, iconType, title }: import("./item-icon-monotone").ItemIconMonotoneProps) => React.JSX.Element;
-    };
+    component: ({ className, dimension, iconType, title }: ItemIconProps) => React.JSX.Element;
     parameters: {
         componentSubtitle: string;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "23.4.0-beta.24",
+    "version": "23.4.0-beta.25",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -137,10 +137,10 @@
         "@box/frontend": "^11.0.1",
         "@box/item-icon": "^0.9.83",
         "@box/languages": "^1.0.0",
-        "@box/metadata-editor": "^0.115.0",
+        "@box/metadata-editor": "^0.117.0",
         "@box/react-virtualized": "^9.22.3-rc-box.10",
         "@cfaester/enzyme-adapter-react-18": "^0.8.0",
-        "@chromatic-com/storybook": "^1.6.1",
+        "@chromatic-com/storybook": "^4.0.1",
         "@commitlint/cli": "^19.8.0",
         "@commitlint/config-conventional": "^19.8.0",
         "@eslint/eslintrc": "^3.1.0",
@@ -149,23 +149,14 @@
         "@formatjs/intl-relativetimeformat": "^4.5.9",
         "@formatjs/intl-unified-numberformat": "^3.2.0",
         "@hapi/address": "^2.1.4",
-        "@storybook/addon-actions": "^8.2.4",
-        "@storybook/addon-docs": "^8.2.4",
-        "@storybook/addon-essentials": "^8.2.4",
-        "@storybook/addon-interactions": "^8.2.4",
-        "@storybook/addon-knobs": "^8.0.1",
-        "@storybook/addon-links": "^8.2.4",
-        "@storybook/addon-styling-webpack": "^1.0.1",
-        "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-        "@storybook/blocks": "^8.2.4",
-        "@storybook/manager-api": "^8.2.4",
-        "@storybook/preview-api": "^8.2.4",
-        "@storybook/react-webpack5": "^8.6.14",
-        "@storybook/test": "^8.2.4",
-        "@storybook/theming": "^8.2.4",
+        "@storybook/addon-docs": "^9.0.14",
+        "@storybook/addon-styling-webpack": "^2.0.0",
+        "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
+        "@storybook/react-webpack5": "^9.0.14",
+        "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.4.6",
         "@testing-library/react": "^16.0.0",
-        "@testing-library/user-event": "^14.5.2",
+        "@testing-library/user-event": "14.5.2",
         "@types/classnames": "^2.2.9",
         "@types/color": "^3.0.2",
         "@types/enzyme": "^3.10.18",
@@ -204,7 +195,7 @@
         "css-loader": "^7.1.2",
         "css-minimizer-webpack-plugin": "^7.0.0",
         "cssnano": "^4.1.10",
-        "cypress": "^13.7.3",
+        "cypress": "^13.17.0",
         "deepmerge": "^4.2.2",
         "draft-js": "^0.11.7",
         "enzyme": "^3.11.0",
@@ -242,8 +233,9 @@
         "message-accumulator": "^2.1.1",
         "mini-css-extract-plugin": "^2.9.0",
         "mousetrap": "^1.6.3",
-        "msw": "^2.1.5",
-        "msw-storybook-addon": "^2.0.2",
+        "msw": "^2.10.2",
+        "msw-storybook-addon": "^2.0.5",
+        "node-polyfill-webpack-plugin": "^4.1.0",
         "npm-run-all": "^4.1.5",
         "pikaday": "^1.8.0",
         "postcss": "^8.5.3",
@@ -280,8 +272,8 @@
         "semantic-release": "^24.2.3",
         "sinon": "^2.3.7",
         "source-map-loader": "^0.2.4",
-        "storybook": "^8.6.14",
-        "storybook-react-intl": "^3.1.1",
+        "storybook": "^9.0.14",
+        "storybook-react-intl": "^4.0.7",
         "string-replace-loader": "^3.1.0",
         "styled-components": "5.0.0",
         "stylelint": "^16.18.0",
@@ -306,7 +298,7 @@
         "@box/cldr-data": ">=34.2.0",
         "@box/combobox-with-api": "^0.34.9",
         "@box/item-icon": "^0.9.83",
-        "@box/metadata-editor": "^0.115.0",
+        "@box/metadata-editor": "^0.117.0",
         "@box/react-virtualized": "^9.22.3-rc-box.10",
         "@hapi/address": "^2.1.4",
         "axios": "^0.30.0",

package/src/components/avatar/__tests__/Avatar.test.tsx

@@ -1,6 +1,5 @@
-import * as React from 'react';
+import React, { act } from 'react';
 import { shallow, mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
 import { IntlShape } from 'react-intl';
 import { AvatarBase as Avatar } from '../Avatar';
 import AvatarImage from '../AvatarImage';

package/src/components/button/Button.stories.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { action } from '@storybook/addon-actions';
-import { boolean, select } from '@storybook/addon-knobs';
+import { action } from 'storybook/actions';
 
 import * as vars from '../../styles/variables';
 
@@ -14,20 +13,7 @@ import Button from './Button';
 import notes from './Button.stories.md';
 
 export const regular = () => {
-    const selectIcon = select('icon', { None: undefined, Icon: 'Icon' }, undefined);
-    const selectChildren = select('children', { None: undefined, Text: 'Click Here' }, 'Click Here');
-    return (
-        <Button
-            icon={selectIcon === 'Icon' ? <Icon /> : undefined}
-            isDisabled={boolean('isDisabled', false)}
-            isLoading={boolean('isLoading', false)}
-            onClick={action('onClick called')}
-            showRadar={boolean('showRadar', false)}
-            size={select('size', { None: undefined, Large: 'large' }, undefined)}
-        >
-            {selectChildren ? 'Click Here' : null}
-        </Button>
-    );
+    return <Button onClick={action('onClick called')}>Click Here</Button>;
 };
 
 export const loading = () => <Button isLoading>Click Here</Button>;

package/src/components/button-group/ButtonGroup.stories.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react';
-import { boolean } from '@storybook/addon-knobs';
 
 import Button from '../button/Button';
 import ButtonGroup from './ButtonGroup';
 import notes from './ButtonGroup.stories.md';
 
 export const regular = () => (
-    <ButtonGroup isDisabled={boolean('isDisabled', false)}>
+    <ButtonGroup>
         <Button>Add</Button>
         <Button>Update</Button>
         <Button>Remove</Button>

package/src/components/nav-sidebar/NavSidebar.stories.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 import * as React from 'react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import NavSidebar from './NavSidebar';
 import NavListCollapseHeader from './NavListCollapseHeader';
 import NavList from './NavList';

package/src/components/plain-button/PlainButton.stories.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { boolean } from '@storybook/addon-knobs';
 
 import Icon from '../../icons/general/IconCopy';
 import * as vars from '../../styles/variables';
@@ -9,7 +8,7 @@ import { ButtonType } from '../button';
 import notes from './PlainButton.stories.md';
 
 export const regular = () => (
-    <PlainButton isDisabled={boolean('isDisabled', false)} type={ButtonType.BUTTON}>
+    <PlainButton type={ButtonType.BUTTON}>
         Click Here
     </PlainButton>
 );

package/src/components/primary-button/PrimaryButton.stories.tsx

@@ -1,14 +1,11 @@
 import * as React from 'react';
-import { action } from '@storybook/addon-actions';
-import { boolean } from '@storybook/addon-knobs';
+import { action } from 'storybook/actions';
 
 import PrimaryButton from './PrimaryButton';
 import notes from './PrimaryButton.stories.md';
 
 export const regular = () => (
     <PrimaryButton
-        isDisabled={boolean('isDisabled', false)}
-        isLoading={boolean('isLoading', false)}
         onClick={action('onClick called')}
     >
         Click Here

package/src/components/time-input/__tests__/TimeInput.test.tsx

@@ -1,5 +1,4 @@
-import * as React from 'react';
-import { act } from 'react-dom/test-utils';
+import React, { act } from 'react';
 import { mount } from 'enzyme';
 import debounce from 'lodash/debounce';
 // @ts-ignore flow import

package/src/elements/common/stories/PreviewDialog.stories.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-
-import { useArgs } from '@storybook/preview-api';
+import { useArgs } from 'storybook/preview-api';
 import { Button } from '@box/blueprint-web';
 import PreviewDialog from '../preview-dialog/PreviewDialog';
 

package/src/elements/common/stories/__tests__/PreviewDialog-visual.stories.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
-
-import { expect, screen, userEvent, within } from '@storybook/test';
+import { useArgs } from 'storybook/preview-api';
+import { expect, screen, userEvent, within } from 'storybook/test';
 import { Button } from '@box/blueprint-web';
-import { useArgs } from '@storybook/preview-api';
 import PreviewDialog from '../../preview-dialog';
 
 import { addRootElement } from '../../../../utils/storybook';

package/src/elements/content-explorer/stories/ContentExplorer.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import ContentExplorerStories from './ContentExplorer.stories';
 

package/src/elements/content-explorer/stories/DeleteConfirmationDialog.stories.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { useArgs } from '@storybook/preview-api';
-
+import { useArgs } from 'storybook/preview-api';
 import { Button } from '@box/blueprint-web';
 import { addRootElement } from '../../../utils/storybook';
 

package/src/elements/content-explorer/stories/RenameDialog.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useArgs } from '@storybook/preview-api';
+import { useArgs } from 'storybook/preview-api';
 import { Button } from '@box/blueprint-web';
 
 import { addRootElement } from '../../../utils/storybook';

package/src/elements/content-explorer/stories/ShareDialog.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useArgs } from '@storybook/preview-api';
+import { useArgs } from 'storybook/preview-api';
 import { Button } from '@box/blueprint-web';
 
 import { ACCESS_COLLAB, ACCESS_COMPANY, ACCESS_OPEN } from '../../../constants';

package/src/elements/content-explorer/stories/tests/ContentExplorer-visual.stories.js

@@ -1,6 +1,5 @@
+import { expect, screen, userEvent, waitFor, within } from 'storybook/test';
 import { http, HttpResponse } from 'msw';
-import { expect, screen, userEvent, waitFor, within } from '@storybook/test';
-
 import ContentExplorer from '../../ContentExplorer';
 import { mockEmptyRootFolder, mockRootFolder } from '../../../common/__mocks__/mockRootFolder';
 import mockSubfolder from '../../../common/__mocks__/mockSubfolder';

package/src/elements/content-open-with/stories/ContentOpenWith.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import ContentOpenWithStories from './ContentOpenWith.stories';
 

package/src/elements/content-picker/ContentPicker.js

@@ -189,7 +189,6 @@ class ContentPicker extends Component<Props, State> {
         clearSelectedItemsOnNavigation: false,
         isHeaderLogoVisible: true,
         isPaginationVisible: true,
-        itemActions: [],
     };
 
     /**

package/src/elements/content-picker/ItemList.js

@@ -176,7 +176,7 @@ const ItemList = ({
                                     flexShrink={0}
                                 />
                             )}
-                            {itemActions && (
+                            {!!itemActions?.length && (
                                 <Column
                                     disableSort
                                     dataKey={FIELD_ID}

package/src/elements/content-picker/stories/ContentPicker.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import ContentPickerStories from './ContentPicker.stories';
 

package/src/elements/content-picker/stories/tests/ContentPicker-visual.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { expect, userEvent, waitFor, within } from '@storybook/test';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 import { http, HttpResponse } from 'msw';
 import ContentPicker from '../../ContentPicker';
 import { mockRootFolder, mockEmptyRootFolder } from '../../../common/__mocks__/mockRootFolder';
@@ -118,30 +118,6 @@ export const customActionButtons = {
     },
 };
 
-export const itemCustomActions = {
-    args: {
-        itemActions: [
-            {
-                label: 'alert',
-                onAction: () => {
-                    // eslint-disable-next-line no-alert
-                    alert('You clicked me!');
-                },
-            },
-        ],
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        await waitFor(async () => {
-            const moreOptions = await canvas.findAllByRole('button', { name: 'More options' });
-            await userEvent.click(moreOptions[0]);
-
-            const menuItem = await waitFor(() => document.querySelector('[role="menuitem"]'));
-            expect(menuItem).toBeInTheDocument();
-        });
-    },
-};
-
 export default {
     title: 'Elements/ContentPicker/tests/visual',
     component: ContentPicker,

package/src/elements/content-preview/stories/ContentPreview.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import ContentPreviewStories from './ContentPreview.stories';
 

package/src/elements/content-preview/stories/tests/ContentPreview-visual.stories.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
-import { expect, userEvent, waitFor, within } from '@storybook/test';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 import { Notification } from '@box/blueprint-web';
 import { http, HttpResponse } from 'msw';
 

package/src/elements/content-sharing/stories/ContentSharing.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 
 <Meta />

package/src/elements/content-sidebar/stories/BoxAISideBar.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import BoxAISidebarStories from './BoxAISidebar.stories';
 

package/src/elements/content-sidebar/stories/ContentSidebar.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import ContentSidebarStories from './ContentSidebar.stories';
 

package/src/elements/content-sidebar/stories/MetadataSidebar.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import MetadataSidebarStories from './MetadataSidebar.stories';
 

package/src/elements/content-sidebar/stories/MetadataSidebarRedesign.stories.tsx

@@ -1,6 +1,6 @@
-import { type StoryObj, Meta } from '@storybook/react';
-import { fn, userEvent, within } from '@storybook/test';
 import React, { type ComponentProps } from 'react';
+import { type StoryObj, Meta } from '@storybook/react';
+import { fn, userEvent, within } from 'storybook/test';
 import { http, HttpResponse } from 'msw';
 import type { HttpHandler } from 'msw';
 import MetadataSidebarRedesign from '../MetadataSidebarRedesign';

package/src/elements/content-sidebar/stories/tests/BoxAISidebar-visual.stories.tsx

@@ -1,5 +1,5 @@
-import { expect, within } from '@storybook/test';
 import { type StoryObj, type Meta } from '@storybook/react';
+import { expect, within } from 'storybook/test';
 import { http, HttpResponse } from 'msw';
 import type { HttpHandler } from 'msw';
 import ContentSidebar from '../../ContentSidebar';

package/src/elements/content-sidebar/stories/tests/MetadataSidebarRedesign-visual.stories.tsx

@@ -1,7 +1,7 @@
 import { type ComponentProps } from 'react';
-import { http, HttpResponse } from 'msw';
-import { expect, userEvent, waitFor, within, fn, screen } from '@storybook/test';
 import { type StoryObj, Meta } from '@storybook/react';
+import { expect, userEvent, waitFor, within, fn, screen } from 'storybook/test';
+import { http, HttpResponse } from 'msw';
 import type { HttpHandler } from 'msw';
 import ContentSidebar from '../../ContentSidebar';
 import MetadataSidebarRedesign from '../../MetadataSidebarRedesign';

package/src/elements/content-uploader/stories/ContentUploader.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import ContentUploaderStories from './ContentUploader.stories';
 

package/src/elements/content-uploader/stories/tests/ContentUploader-visual.stories.js

@@ -1,4 +1,4 @@
-import { expect, userEvent, waitFor, within } from '@storybook/test';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 import { http, HttpResponse } from 'msw';
 
 import ContentUploader from '../../ContentUploader';

package/src/icons/icons.stories.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
-import { select, number, text } from '@storybook/addon-knobs';
 import ItemIcon, { ItemIconProps } from './item-icon';
-import ItemIconMonotone from './item-icon-monotone';
 import Tooltip, { TooltipPosition } from '../components/tooltip';
 
 const itemTypeOptions: ItemIconProps['iconType'][] = [
@@ -39,20 +37,13 @@ const itemTypeOptions: ItemIconProps['iconType'][] = [
 ];
 
 export const itemIcons = () => {
-    const componentPath = select('Variant', ['icons/item-icon', 'icons/item-icon-monotone'], 'icons/item-icon');
-    const Icon = { 'icons/item-icon': ItemIcon, 'icons/item-icon-monotone': ItemIconMonotone }[componentPath];
     return (
         <>
             {itemTypeOptions.map(t => (
                 <span style={{ padding: 8 }} key={t}>
                     <Tooltip text={t}>
                         <span style={{ display: 'inline-block' }}>
-                            <Icon
-                                iconType={t}
-                                dimension={number('dimension', 32, { range: true, min: 10, max: 64, step: 2 })}
-                                title={text('title', '')}
-                                className={text('className', '')}
-                            />
+                            <ItemIcon dimension={32} iconType={t} />
                         </span>
                     </Tooltip>
                 </span>
@@ -65,7 +56,7 @@ export const itemIcons = () => {
                 </b>
                 <p style={{ display: 'flex', alignItems: 'center', paddingTop: 16, paddingLeft: 8 }}>
                     <Tooltip text="default" isShown position={TooltipPosition.MIDDLE_RIGHT}>
-                        <Icon iconType="default" dimension={32} />
+                        <ItemIcon iconType="default" dimension={32} />
                     </Tooltip>
                 </p>
             </div>
@@ -80,7 +71,7 @@ const description = `
 
 export default {
     title: 'Icons/ItemIcon',
-    subcomponents: { ItemIcon, ItemIconMonotone },
+    component: ItemIcon,
     parameters: {
         componentSubtitle: description,
     },