@pautena/react-design-system 0.4.2 → 0.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pautena/react-design-system",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "My custom design system on top of MUI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -29,81 +29,87 @@
   "author": "Pau Tena Vidal",
   "license": "MIT",
   "dependencies": {
-    "@emotion/react": "^11.9.3",
-    "@emotion/styled": "^11.9.3",
-    "@mui/icons-material": "^5.8.4",
-    "@mui/lab": "^5.0.0-alpha.90",
-    "@mui/material": "^5.9.0",
-    "@mui/x-data-grid": "^5.13.0",
-    "@mui/x-date-pickers": "^5.0.0-beta.7",
-    "date-fns": "^2.29.2",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@emotion/utils": "^1.2.0",
+    "@mui/icons-material": "^5.11.9",
+    "@mui/lab": "^5.0.0-alpha.120",
+    "@mui/material": "^5.11.10",
+    "@mui/x-data-grid": "^5.17.24",
+    "@mui/x-date-pickers": "^5.0.19",
+    "date-fns": "^2.29.3",
+    "lorem-ipsum": "^2.0.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.3.0"
+    "react-router-dom": "^6.8.1"
   },
   "devDependencies": {
-    "@date-io/date-fns": "^2.15.0",
     "@babel/core": "^7.18.6",
     "@babel/preset-env": "^7.18.6",
     "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.0",
+    "@date-io/date-fns": "^2.15.0",
     "@faker-js/faker": "^7.3.0",
     "@mui/x-data-grid-generator": "^5.13.0",
     "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-commonjs": "^22.0.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-typescript": "^8.3.3",
+    "@rollup/plugin-typescript": "8.3.3",
     "@storybook/addon-actions": "^6.5.9",
     "@storybook/addon-essentials": "^6.5.9",
     "@storybook/addon-interactions": "^6.5.9",
     "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/builder-webpack4": "^6.5.9",
-    "@storybook/manager-webpack4": "^6.5.9",
-    "@storybook/react": "^6.5.9",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/builder-webpack4": "^6.5.16",
+    "@storybook/manager-webpack4": "^6.5.16",
+    "@storybook/react": "^6.5.16",
     "@storybook/testing-library": "^0.0.13",
     "@storybook/testing-react": "^1.3.0",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
-    "@types/jest": "^28.1.5",
-    "@types/ramda": "^0.28.15",
-    "@types/react": "^18.0.15",
-    "@typescript-eslint/eslint-plugin": "^5.30.6",
-    "@typescript-eslint/parser": "^5.30.6",
-    "babel-jest": "^28.1.3",
-    "babel-loader": "^8.2.5",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "eslint": "^8.19.0",
-    "eslint-config-prettier": "^8.5.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.4.0",
+    "@types/ramda": "^0.28.23",
+    "@types/react": "^18.0.28",
+    "@typescript-eslint/eslint-plugin": "^5.53.0",
+    "@typescript-eslint/parser": "^5.53.0",
+    "babel-jest": "^29.4.3",
+    "babel-loader": "^9.1.2",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "eslint": "^8.34.0",
+    "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.30.1",
-    "gh-pages": "^4.0.0",
-    "husky": "^8.0.1",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
-    "lorem-ipsum": "^2.0.8",
+    "eslint-plugin-react": "^7.32.2",
+    "gh-pages": "^5.0.0",
+    "history": "^5.3.0",
+    "husky": "^8.0.3",
+    "jest": "^29.4.3",
+    "jest-environment-jsdom": "^29.4.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.4",
     "ramda": "^0.28.0",
     "react-test-renderer": "^18.2.0",
     "rollup": "^2.77.0",
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-terser": "^7.0.2",
-    "tslib": "^2.4.0",
-    "typescript": "^4.7.4"
+    "tslib": "^2.5.0",
+    "typescript": "^4.9.5"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.5.0",
-    "@emotion/styled": "^11.3.0",
-    "@mui/icons-material": "^5.0.0",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@emotion/utils": "^1.2.0",
+    "@mui/icons-material": "^5.11.0",
     "@mui/lab": "^5.0.0",
-    "@mui/material": "^5.0.0",
-    "@mui/x-data-grid": "^5.13.0",
+    "@mui/material": "^5.11.0",
+    "@mui/x-data-grid": "^5.17.0",
+    "@mui/x-date-pickers": "^5.0.0",
     "@types/react": "^17.0.0 || ^18.0.0",
+    "date-fns": "^2.0.0",
+    "lorem-ipsum": "^2.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
-    "react-router-dom": "^6.0.0",
-    "date-fns": "^2.0.0"
+    "react-router-dom": "^6.0.0"
   },
   "repository": {
     "type": "git",

package/src/components/{app-bar → app-bars/app-bar}/app-bar.stories.tsx

@@ -1,18 +1,19 @@
 import React from "react";
 import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../../storybook";
+import { createTemplate } from "../../../storybook";
 import { AppBar } from "./app-bar";
-import { DrawerProvider } from "../drawer";
+import { DrawerProvider } from "../../drawers/drawer";
+import { AppBarProps } from "./app-bar.types";
 
 export default {
-  title: "AppBars/AppBar",
+  title: "Components/AppBars/AppBar",
   component: AppBar,
   parameters: {
     layout: "fullscreen",
   },
 } as ComponentMeta<typeof AppBar>;
 
-const Template = createTemplate((args) => {
+const Template = createTemplate((args: AppBarProps) => {
   return (
     <DrawerProvider>
       <AppBar {...args} />

package/src/components/{app-bar → app-bars/app-bar}/app-bar.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { fireEvent, render, screen } from "../../tests";
+import { fireEvent, render, screen } from "~/tests/testing-library";
 import { AppBar } from "./app-bar";
-import { DrawerProvider } from "../drawer";
+import { DrawerProvider } from "../../drawers/drawer";
 import { AppBarProfile } from "./app-bar.types";
 import userEvent from "@testing-library/user-event";
 

package/src/components/{app-bar → app-bars/app-bar}/app-bar.tsx

@@ -12,7 +12,7 @@ import MenuIcon from "@mui/icons-material/Menu";
 import SearchIcon from "@mui/icons-material/Search";
 import AccountCircle from "@mui/icons-material/AccountCircle";
 import { AppBarComponent, AppBarProps } from "./app-bar.types";
-import { useDrawer } from "../drawer/drawer.context";
+import { useDrawer } from "../../drawers/drawer/drawer.context";
 
 const Search = styled("div")(({ theme }) => ({
   position: "relative",

package/src/components/{app-bar → app-bars/app-bar}/mini-app-bar/mini-app-bar.tsx

@@ -1,9 +1,9 @@
 import { styled } from "@mui/material/styles";
 import { AppBar } from "../app-bar";
 import { AppBarProps } from "@mui/material";
-import { drawerWidth } from "../../drawer/drawer.mixins";
+import { drawerWidth } from "../../../drawers/drawer/drawer.mixins";
 import { AppBarComponent } from "../app-bar.types";
-import { useDrawer } from "../../drawer/drawer.context";
+import { useDrawer } from "../../../drawers/drawer/drawer.context";
 
 export const MiniAppBar: AppBarComponent = styled(AppBar)<AppBarProps>(({ theme }) => {
   const { isOpen } = useDrawer();

package/src/components/app-bars/app-bars.stories.mdx

@@ -0,0 +1,10 @@
+import { Meta } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="Components/AppBars/Introduction" />
+
+# App Bars
+
+<ul>
+  <li><LinkTo kind="Components/AppBars/AppBar">AppBar</LinkTo></li>
+</ul>

package/src/components/app-bars/index.ts

@@ -0,0 +1 @@
+export * from "./app-bar";

package/src/components/components.stories.mdx

@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="Components/Introduction" />
+
+# Components
+
+<ul>
+  <li><LinkTo kind="Components/Value displays/Introduction">Value displays</LinkTo></li>
+  <li><LinkTo kind="Components/Feedback/Introduction">Feedback</LinkTo></li>
+  <li><LinkTo kind="Components/AppBars/Introduction">App bars</LinkTo></li>
+  <li><LinkTo kind="Components/Data Display/Introduction">Data Display</LinkTo></li>
+  <li><LinkTo kind="Components/Containers/Introduction">Containers</LinkTo></li>
+  <li><LinkTo kind="Components/Drawers/Introduction">Drawers</LinkTo></li>
+  <li><LinkTo kind="Components/Inputs/Introduction">Inputs</LinkTo></li>
+  <li><LinkTo kind="Components/Navigation/Introduction">Navigation</LinkTo></li>
+  <li><LinkTo kind="Components/Placeholders/Introduction">Placeholders</LinkTo></li>
+  <li><LinkTo kind="Components/Tables/Introduction">Tables</LinkTo></li>
+</ul>

package/src/components/{center-container → containers/center-container}/center-container.stories.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import { ComponentMeta } from "@storybook/react";
 import { CenterContainer, CenterContainerProps } from "./center-container";
-import { Label } from "../label";
-import { createTemplate, withContainer } from "../../storybook";
+import { Label } from "../../data-display/label";
+import { createTemplate, withContainer } from "../../../storybook";
 
 export default {
-  title: "Containers/CenterContainer",
+  title: "Components/Containers/CenterContainer",
   component: CenterContainer,
   decorators: [withContainer({ height: 500, bordered: true })],
   parameters: {

package/src/components/{center-container → containers/center-container}/center-container.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Typography } from "@mui/material";
-import { render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 import { CenterContainer } from "./center-container";
 
 describe("CenterContainer", () => {

package/src/components/containers/containers.stories.mdx

@@ -0,0 +1,11 @@
+import { Meta } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="Components/Containers/Introduction" />
+
+# Containers
+
+<ul>
+  <li><LinkTo kind="Components/Containers/CenterContainer">CenterContainer</LinkTo></li>
+  <li><LinkTo kind="Components/Containers/Content">Content</LinkTo></li>
+</ul>

package/src/components/{content → containers/content}/content.stories.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../../storybook";
+import { createTemplate } from "../../../storybook";
 import { Content } from "./content";
-import { SkeletonGrid } from "../../tests";
+import { SkeletonGrid } from "~/components/placeholders";
 
 export default {
-  title: "Sections/Content",
+  title: "Components/Containers/Content",
   component: Content,
   parameters: {
     layout: "fullscreen",

package/src/components/{content → containers/content}/content.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Content } from "./content";
-import { render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 import { Typography } from "@mui/material";
 
 describe("Content", () => {

package/src/components/containers/index.ts

@@ -0,0 +1,2 @@
+export * from "./content";
+export * from "./center-container";

package/src/components/{bullet → data-display/bullet}/bullet.stories.tsx

@@ -1,9 +1,9 @@
 import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../../storybook";
+import { createTemplate } from "../../../storybook";
 import { Bullet } from "./bullet";
 
 export default {
-  title: "Data Display/Bullet",
+  title: "Components/Data Display/Bullet",
   component: Bullet,
   parameters: {
     layout: "centered",

package/src/components/{bullet → data-display/bullet}/bullet.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Bullet, BulletVariant } from "./bullet";
-import { render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 
 describe("Bullet", () => {
   const renderComponent = (variant: BulletVariant | undefined = undefined) => {

package/src/components/data-display/data-display.stories.mdx

@@ -0,0 +1,12 @@
+import { Meta } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="Components/Data Display/Introduction" />
+
+# App Bars
+
+<ul>
+  <li><LinkTo kind="Components/Data Display/Bullet">Bullet</LinkTo></li>
+  <li><LinkTo kind="Components/Data Display/Label">Label</LinkTo></li>
+  <li><LinkTo kind="Components/Data Display/Header">Header</LinkTo></li>
+</ul>

package/src/components/{header → data-display/header}/header.dummy.ts

@@ -1,5 +1,5 @@
 import { action } from "@storybook/addon-actions";
-import { HeaderBreadcrumb, HeaderAction, HeaderTab } from "./header";
+import { HeaderBreadcrumb, HeaderAction, HeaderTab } from "./header.types";
 
 export const breadcrumbs: HeaderBreadcrumb[] = [
   {

package/src/components/{header → data-display/header}/header.stories.tsx

@@ -1,11 +1,11 @@
 import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../../storybook";
+import { createTemplate } from "../../../storybook";
 import { Header } from "./header";
 import { withMemoryRouter } from "~/storybook";
 import { breadcrumbs, tabs, actions } from "./header.dummy";
 
 export default {
-  title: "Sections/Header",
+  title: "Components/Data Display/Header",
   component: Header,
   decorators: [withMemoryRouter()],
   parameters: {
@@ -36,7 +36,6 @@ ColorInherit.args = {
   preset: "inherit",
   breadcrumbs,
   tabs,
-  selectedTab: 2,
   actions,
 };
 
@@ -47,7 +46,6 @@ ColorPrimary.args = {
   preset: "primary",
   breadcrumbs,
   tabs,
-  selectedTab: 2,
   actions,
 };
 
@@ -58,7 +56,6 @@ ColorSecondary.args = {
   preset: "secondary",
   breadcrumbs,
   tabs,
-  selectedTab: 2,
   actions,
 };
 
@@ -69,7 +66,6 @@ ColorDefault.args = {
   preset: "default",
   breadcrumbs,
   tabs,
-  selectedTab: 2,
   actions,
 };
 
@@ -80,7 +76,6 @@ ColorTransparent.args = {
   preset: "transparent",
   breadcrumbs,
   tabs,
-  selectedTab: 2,
   actions,
 };
 
@@ -112,5 +107,4 @@ WithTabs.args = {
   preset: "default",
   breadcrumbs,
   tabs,
-  selectedTab: 2,
 };

package/src/components/{header → data-display/header}/header.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 import userEvent from "@testing-library/user-event";
 import { Header } from "./header";
 import {
@@ -10,7 +10,7 @@ import {
   HeaderTab,
 } from "./header.types";
 import { breadcrumbs, actions as actionsData, tabs } from "./header.dummy";
-import { TabProvider } from "../../providers";
+import { TabProvider } from "../../../providers";
 
 const actions = actionsData.map((a) => ({ ...a, onClick: a.onClick && jest.fn() }));
 

package/src/components/{header → data-display/header}/header.tsx

@@ -9,8 +9,8 @@ import {
   Tab,
   Button,
 } from "@mui/material";
-import { Link } from "../link";
-import { useGetDefaultThemeColor } from "../../utils";
+import { Link } from "../../navigation/link";
+import { useGetDefaultThemeColor } from "../../../utils";
 import { HeaderComponent, HeaderPreset, HeaderProps } from "./header.types";
 import { useTab } from "~/providers";
 

package/src/components/data-display/index.ts

@@ -0,0 +1,3 @@
+export * from "./bullet";
+export * from "./label";
+export * from "./header";

package/src/components/{label → data-display/label}/label.stories.tsx

@@ -1,9 +1,9 @@
 import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../../storybook";
+import { createTemplate } from "../../../storybook";
 import { Label } from "./label";
 
 export default {
-  title: "Data Display/Label",
+  title: "Components/Data Display/Label",
   component: Label,
   parameters: {
     layout: "centered",

package/src/components/{label → data-display/label}/label.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Label, LabelVariant } from "./label";
-import { render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 
 describe("Label", () => {
   const renderComponent = (variant: LabelVariant | undefined = undefined) => {

package/src/components/{drawer → drawers/drawer}/__snapshots__/drawer.test.tsx.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`mixins closedMixin would match a snapshot 1`] = `
-Object {
-  "@media (min-width:600px)": Object {
+{
+  "@media (min-width:600px)": {
     "width": "calc(64px + 1px)",
   },
   "overflowX": "hidden",
@@ -12,7 +12,7 @@ Object {
 `;
 
 exports[`mixins openedMixin would match a snapshot 1`] = `
-Object {
+{
   "overflowX": "hidden",
   "transition": "width 225ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
   "width": 240,

package/src/components/{drawer → drawers/drawer}/drawer.mock.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { DrawerContentComponent, Nav } from "./drawer.types";
 import DiamondIcon from "@mui/icons-material/Diamond";
 import MenuBookIcon from "@mui/icons-material/MenuBook";
+import AccountTreeIcon from "@mui/icons-material/AccountTree";
 import { Box, Typography } from "@mui/material";
 
 export const mockNav: Nav = {
@@ -63,6 +64,32 @@ export const mockNav: Nav = {
             variant: "info",
           },
         },
+        {
+          id: "item2.3",
+          text: "Item 2.3",
+          href: "/items/2-3",
+          icon: <AccountTreeIcon />,
+          items: [
+            {
+              id: "item2.3.1",
+              text: "Item 2.3.1",
+              href: "/items/2-3-1",
+              icon: <DiamondIcon />,
+            },
+            {
+              id: "item2.3.2",
+              text: "Item 2.3.2",
+              href: "/items/2-3-2",
+              icon: <MenuBookIcon />,
+            },
+            {
+              id: "item2.3.3",
+              text: "Item 2.3.3",
+              href: "/items/2-3-3",
+              icon: <DiamondIcon />,
+            },
+          ],
+        },
       ],
     },
     {

package/src/components/{drawer → drawers/drawer}/drawer.test.tsx

@@ -1,12 +1,13 @@
 import React from "react";
 import { Drawer } from "./drawer";
-import { render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 import { DrawerProvider } from "./drawer.provider";
 import { DummyDrawerContent, mockNav } from "./drawer.mock";
 import { Box, Button, createTheme } from "@mui/material";
 import { UndefinedProvider, useDrawer } from "./drawer.context";
 import userEvent from "@testing-library/user-event";
 import { openedMixin, closedMixin } from "./drawer.mixins";
+import { mockConsoleError } from "~/tests/mocks";
 
 const TestContent = () => {
   const { open, close } = useDrawer();
@@ -58,13 +59,15 @@ describe("Drawer", () => {
 
     await userEvent.click(screen.getByText(/close/i));
 
-    expect(screen.queryByRole("menu", { hidden: true })).not.toBeInTheDocument();
+    expect(screen.getByRole("menu", { hidden: true })).toBeInTheDocument();
   });
 });
 
 describe("DrawerContext", () => {
+  mockConsoleError();
+
   it("would throw an error if no Provider is defined", () => {
-    try {
+    expect(() =>
       render(
         <Box>
           <Drawer>
@@ -72,11 +75,8 @@ describe("DrawerContext", () => {
           </Drawer>
           <TestContent />
         </Box>,
-      );
-      fail("No error has been thrown");
-    } catch (e) {
-      expect(e).toStrictEqual(UndefinedProvider);
-    }
+      ),
+    ).toThrow(UndefinedProvider);
   });
 });
 

package/src/components/{drawer → drawers/drawer}/drawer.types.ts

@@ -1,6 +1,5 @@
 import { FunctionComponent, ReactElement } from "react";
-import { BulletVariant } from "../bullet";
-import { LabelVariant } from "../label";
+import { BulletVariant, LabelVariant } from "../../data-display";
 import { DrawerProps as MuiDrawerProps } from "@mui/material";
 
 export interface NavItemAvatar {
@@ -17,7 +16,7 @@ export interface NavItemBullet {
   variant: BulletVariant;
 }
 
-export interface NavItem {
+export interface NavItemLink {
   id: string;
   text: string;
   href: string;
@@ -27,6 +26,12 @@ export interface NavItem {
   bullet?: NavItemBullet;
 }
 
+export type NavItemCollapsable = Pick<NavItemLink, "id" | "text" | "icon"> & {
+  items: NavItemLink[];
+};
+
+export type NavItem = NavItemLink | NavItemCollapsable;
+
 export interface NavSection {
   title?: string;
   items: NavItem[];
@@ -37,6 +42,10 @@ export interface Nav {
 }
 
 export interface DrawerContentProps {
+  /**
+   * Item currently selected in the navigation
+   */
+  selectedItem?: string;
   /**
    * Object with the content that has to be rendered
    */

package/src/components/{drawer → drawers/drawer}/mini-drawer/mini-drawer.stories.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 import { ComponentMeta } from "@storybook/react";
-import { MiniDrawer } from "../mini-drawer";
+import { MiniDrawer } from ".";
 import { mockNav } from "../drawer.mock";
 import { DrawerContent } from "../../drawer-content";
 import { DrawerProvider } from "../drawer.provider";
 import { Nav } from "../drawer.types";
-import { withMemoryRouter } from "../../../storybook";
+import { withMemoryRouter } from "../../../../storybook";
 
 export default {
-  title: "Drawers/MiniDrawer",
+  title: "Components/Drawers/MiniDrawer",
   component: MiniDrawer,
   decorators: [withMemoryRouter()],
   parameters: {

package/src/components/{drawer → drawers/drawer}/mini-drawer/mini-drawer.tsx

@@ -8,8 +8,7 @@ import {
   listItemTextClasses,
   listSubheaderClasses,
 } from "@mui/material";
-import { labelClasses } from "../../label";
-import { bulletClasses } from "../../bullet";
+import { labelClasses, bulletClasses } from "../../../data-display";
 
 export const MiniDrawer = styled(Drawer)(({ theme }) => {
   const { isOpen } = useDrawer();