@xyo-network/react-drawer 7.5.8 → 7.5.12

package/dist/browser/index.mjs

@@ -1,11 +1,22 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-
 // src/components/Drawer.tsx
-import { Drawer, Paper, styled, Typography } from "@mui/material";
+import {
+  Drawer,
+  Paper,
+  styled,
+  Typography
+} from "@mui/material";
 import { FlexCol } from "@xylabs/react-flexbox";
-import React, { useMemo } from "react";
-var DrawerEx = /* @__PURE__ */ __name(({ children, heightVariant = "full", subTitle, title, onClose, widthVariant = "partial", ...props }) => {
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DrawerEx = ({
+  children,
+  heightVariant = "full",
+  subTitle,
+  title,
+  onClose,
+  widthVariant = "partial",
+  ...props
+}) => {
   const variantBasedProps = useMemo(() => {
     return {
       PaperProps: {
@@ -17,38 +28,27 @@ var DrawerEx = /* @__PURE__ */ __name(({ children, heightVariant = "full", subTi
           width: widthVariant === "partial" ? "auto" : "100%"
         }
       },
-      onClick: /* @__PURE__ */ __name((event) => onClose?.(event, "backdropClick"), "onClick")
+      onClick: (event) => onClose?.(event, "backdropClick")
     };
-  }, [
-    heightVariant,
-    onClose,
-    widthVariant
-  ]);
-  return /* @__PURE__ */ React.createElement(Drawer, {
-    anchor: "top",
-    onClose,
-    ...variantBasedProps,
-    ...props
-  }, /* @__PURE__ */ React.createElement(StyledDrawerContentPaper, {
-    widthVariant,
-    elevation: 16,
-    onClick: /* @__PURE__ */ __name((event) => event.stopPropagation(), "onClick"),
-    sx: {
-      width: widthVariant === "full" ? "100%" : void 0
+  }, [heightVariant, onClose, widthVariant]);
+  return /* @__PURE__ */ jsx(Drawer, { anchor: "top", onClose, ...variantBasedProps, ...props, children: /* @__PURE__ */ jsxs(
+    StyledDrawerContentPaper,
+    {
+      widthVariant,
+      elevation: 16,
+      onClick: (event) => event.stopPropagation(),
+      sx: { width: widthVariant === "full" ? "100%" : void 0 },
+      children: [
+        title || subTitle ? /* @__PURE__ */ jsxs(FlexCol, { alignItems: "start", gap: 1, children: [
+          title ? /* @__PURE__ */ jsx(StyledEllipsisTypography, { variant: "h3", children: title }) : null,
+          subTitle ? /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", textTransform: "none", children: subTitle }) : null
+        ] }) : null,
+        children
+      ]
     }
-  }, title || subTitle ? /* @__PURE__ */ React.createElement(FlexCol, {
-    alignItems: "start",
-    gap: 1
-  }, title ? /* @__PURE__ */ React.createElement(StyledEllipsisTypography, {
-    variant: "h3"
-  }, title) : null, subTitle ? /* @__PURE__ */ React.createElement(Typography, {
-    variant: "subtitle1",
-    textTransform: "none"
-  }, subTitle) : null) : null, children));
-}, "DrawerEx");
-var StyledEllipsisTypography = styled(Typography, {
-  name: "StyledEllipsisTypography"
-})(() => ({
+  ) });
+};
+var StyledEllipsisTypography = styled(Typography, { name: "StyledEllipsisTypography" })(() => ({
   maxWidth: "100%",
   overflowX: "hidden",
   textOverflow: "ellipsis",
@@ -56,9 +56,7 @@ var StyledEllipsisTypography = styled(Typography, {
 }));
 var StyledDrawerContentPaper = styled(Paper, {
   name: "StyledDrawerContentPaper",
-  shouldForwardProp: /* @__PURE__ */ __name((prop) => ![
-    "widthVariant"
-  ].includes(prop), "shouldForwardProp")
+  shouldForwardProp: (prop) => !["widthVariant"].includes(prop)
 })(({ theme, widthVariant }) => ({
   alignItems: "stretch",
   borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,
@@ -69,12 +67,8 @@ var StyledDrawerContentPaper = styled(Paper, {
   maxWidth: "100%",
   overflowX: "hidden",
   padding: theme.spacing(3),
-  [theme.breakpoints.up("lg")]: {
-    width: widthVariant === "full" ? "100%" : "50%"
-  },
-  [theme.breakpoints.up("md")]: {
-    width: widthVariant === "full" ? "100%" : "75%"
-  }
+  [theme.breakpoints.up("lg")]: { width: widthVariant === "full" ? "100%" : "50%" },
+  [theme.breakpoints.up("md")]: { width: widthVariant === "full" ? "100%" : "75%" }
 }));
 export {
   DrawerEx

package/dist/browser/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Drawer.tsx"],"sourcesContent":["import type { DrawerProps } from '@mui/material'\nimport {\n  Drawer, Paper, styled, Typography,\n} from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport type { MouseEvent, PropsWithChildren } from 'react'\nimport React, { useMemo } from 'react'\n\nexport interface DrawerExProps extends PropsWithChildren<DrawerProps> {\n  heightVariant?: 'full' | 'auto'\n  subTitle?: string\n  title?: string\n  widthVariant?: 'full' | 'partial'\n}\n\nexport const DrawerEx: React.FC<DrawerExProps> = ({\n  children,\n  heightVariant = 'full',\n  subTitle,\n  title,\n  onClose,\n  widthVariant = 'partial',\n  ...props\n}) => {\n  const variantBasedProps = useMemo(() => {\n    return {\n      PaperProps: {\n        sx: {\n          alignItems: 'center',\n          background: 'transparent',\n          boxShadow: 'none',\n          height: heightVariant === 'full' ? '100%' : 'auto',\n          width: widthVariant === 'partial' ? 'auto' : '100%',\n        },\n      },\n      onClick: (event: MouseEvent) => onClose?.(event, 'backdropClick'),\n    }\n  }, [heightVariant, onClose, widthVariant])\n\n  return (\n    <Drawer anchor=\"top\" onClose={onClose} {...variantBasedProps} {...props}>\n      {/* Trap the event to prevent triggering the backdrop onClick */}\n      <StyledDrawerContentPaper\n        widthVariant={widthVariant}\n        elevation={16}\n        onClick={(event: MouseEvent) => event.stopPropagation()}\n        sx={{ width: widthVariant === 'full' ? '100%' : undefined }}\n      >\n        {title || subTitle\n          ? (\n              <FlexCol alignItems=\"start\" gap={1}>\n                {title\n                  ? <StyledEllipsisTypography variant=\"h3\">{title}</StyledEllipsisTypography>\n                  : null}\n                {subTitle\n                  ? (\n                      <Typography variant=\"subtitle1\" textTransform=\"none\">\n                        {subTitle}\n                      </Typography>\n                    )\n                  : null}\n              </FlexCol>\n            )\n          : null}\n        {children}\n      </StyledDrawerContentPaper>\n    </Drawer>\n  )\n}\n\nconst StyledEllipsisTypography = styled(Typography, { name: 'StyledEllipsisTypography' })(() => ({\n  maxWidth: '100%',\n  overflowX: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}))\n\nconst StyledDrawerContentPaper = styled(Paper, {\n  name: 'StyledDrawerContentPaper',\n  shouldForwardProp: prop => !['widthVariant'].includes(prop as string),\n})<DrawerExProps>(({ theme, widthVariant }) => ({\n  alignItems: 'stretch',\n  borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  height: '100%',\n  maxWidth: '100%',\n  overflowX: 'hidden',\n  padding: theme.spacing(3),\n  [theme.breakpoints.up('lg')]: { width: widthVariant === 'full' ? '100%' : '50%' },\n  [theme.breakpoints.up('md')]: { width: widthVariant === 'full' ? '100%' : '75%' },\n}))\n"],"mappings":";;;;AACA,SACEA,QAAQC,OAAOC,QAAQC,kBAClB;AACP,SAASC,eAAe;AAExB,OAAOC,SAASC,eAAe;AASxB,IAAMC,WAAoC,wBAAC,EAChDC,UACAC,gBAAgB,QAChBC,UACAC,OACAC,SACAC,eAAe,WACf,GAAGC,MAAAA,MACJ;AACC,QAAMC,oBAAoBC,QAAQ,MAAA;AAChC,WAAO;MACLC,YAAY;QACVC,IAAI;UACFC,YAAY;UACZC,YAAY;UACZC,WAAW;UACXC,QAAQb,kBAAkB,SAAS,SAAS;UAC5Cc,OAAOV,iBAAiB,YAAY,SAAS;QAC/C;MACF;MACAW,SAAS,wBAACC,UAAsBb,UAAUa,OAAO,eAAA,GAAxC;IACX;EACF,GAAG;IAAChB;IAAeG;IAASC;GAAa;AAEzC,SACE,sBAAA,cAACa,QAAAA;IAAOC,QAAO;IAAMf;IAAmB,GAAGG;IAAoB,GAAGD;KAEhE,sBAAA,cAACc,0BAAAA;IACCf;IACAgB,WAAW;IACXL,SAAS,wBAACC,UAAsBA,MAAMK,gBAAe,GAA5C;IACTZ,IAAI;MAAEK,OAAOV,iBAAiB,SAAS,SAASkB;IAAU;KAEzDpB,SAASD,WAEJ,sBAAA,cAACsB,SAAAA;IAAQb,YAAW;IAAQc,KAAK;KAC9BtB,QACG,sBAAA,cAACuB,0BAAAA;IAAyBC,SAAQ;KAAMxB,KAAAA,IACxC,MACHD,WAEK,sBAAA,cAAC0B,YAAAA;IAAWD,SAAQ;IAAYE,eAAc;KAC3C3B,QAAAA,IAGL,IAAA,IAGR,MACHF,QAAAA,CAAAA;AAIT,GArDiD;AAuDjD,IAAM0B,2BAA2BI,OAAOF,YAAY;EAAEG,MAAM;AAA2B,CAAA,EAAG,OAAO;EAC/FC,UAAU;EACVC,WAAW;EACXC,cAAc;EACdC,YAAY;AACd,EAAA;AAEA,IAAMf,2BAA2BU,OAAOM,OAAO;EAC7CL,MAAM;EACNM,mBAAmBC,wBAAAA,SAAQ,CAAC;IAAC;IAAgBC,SAASD,IAAAA,GAAnCA;AACrB,CAAA,EAAkB,CAAC,EAAEE,OAAOnC,aAAY,OAAQ;EAC9CM,YAAY;EACZ8B,cAAc,OAAOD,MAAME,MAAMD,YAAY,MAAMD,MAAME,MAAMD,YAAY;EAC3EE,SAAS;EACTC,eAAe;EACfnB,KAAKe,MAAMK,QAAQ,CAAA;EACnB/B,QAAQ;EACRkB,UAAU;EACVC,WAAW;EACXa,SAASN,MAAMK,QAAQ,CAAA;EACvB,CAACL,MAAMO,YAAYC,GAAG,IAAA,CAAA,GAAQ;IAAEjC,OAAOV,iBAAiB,SAAS,SAAS;EAAM;EAChF,CAACmC,MAAMO,YAAYC,GAAG,IAAA,CAAA,GAAQ;IAAEjC,OAAOV,iBAAiB,SAAS,SAAS;EAAM;AAClF,EAAA;","names":["Drawer","Paper","styled","Typography","FlexCol","React","useMemo","DrawerEx","children","heightVariant","subTitle","title","onClose","widthVariant","props","variantBasedProps","useMemo","PaperProps","sx","alignItems","background","boxShadow","height","width","onClick","event","Drawer","anchor","StyledDrawerContentPaper","elevation","stopPropagation","undefined","FlexCol","gap","StyledEllipsisTypography","variant","Typography","textTransform","styled","name","maxWidth","overflowX","textOverflow","whiteSpace","Paper","shouldForwardProp","prop","includes","theme","borderRadius","shape","display","flexDirection","spacing","padding","breakpoints","up"]}
+{"version":3,"sources":["../../src/components/Drawer.tsx"],"sourcesContent":["import type { DrawerProps } from '@mui/material'\nimport {\n  Drawer, Paper, styled, Typography,\n} from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport type { MouseEvent, PropsWithChildren } from 'react'\nimport React, { useMemo } from 'react'\n\nexport interface DrawerExProps extends PropsWithChildren<DrawerProps> {\n  heightVariant?: 'full' | 'auto'\n  subTitle?: string\n  title?: string\n  widthVariant?: 'full' | 'partial'\n}\n\nexport const DrawerEx: React.FC<DrawerExProps> = ({\n  children,\n  heightVariant = 'full',\n  subTitle,\n  title,\n  onClose,\n  widthVariant = 'partial',\n  ...props\n}) => {\n  const variantBasedProps = useMemo(() => {\n    return {\n      PaperProps: {\n        sx: {\n          alignItems: 'center',\n          background: 'transparent',\n          boxShadow: 'none',\n          height: heightVariant === 'full' ? '100%' : 'auto',\n          width: widthVariant === 'partial' ? 'auto' : '100%',\n        },\n      },\n      onClick: (event: MouseEvent) => onClose?.(event, 'backdropClick'),\n    }\n  }, [heightVariant, onClose, widthVariant])\n\n  return (\n    <Drawer anchor=\"top\" onClose={onClose} {...variantBasedProps} {...props}>\n      {/* Trap the event to prevent triggering the backdrop onClick */}\n      <StyledDrawerContentPaper\n        widthVariant={widthVariant}\n        elevation={16}\n        onClick={(event: MouseEvent) => event.stopPropagation()}\n        sx={{ width: widthVariant === 'full' ? '100%' : undefined }}\n      >\n        {title || subTitle\n          ? (\n              <FlexCol alignItems=\"start\" gap={1}>\n                {title\n                  ? <StyledEllipsisTypography variant=\"h3\">{title}</StyledEllipsisTypography>\n                  : null}\n                {subTitle\n                  ? (\n                      <Typography variant=\"subtitle1\" textTransform=\"none\">\n                        {subTitle}\n                      </Typography>\n                    )\n                  : null}\n              </FlexCol>\n            )\n          : null}\n        {children}\n      </StyledDrawerContentPaper>\n    </Drawer>\n  )\n}\n\nconst StyledEllipsisTypography = styled(Typography, { name: 'StyledEllipsisTypography' })(() => ({\n  maxWidth: '100%',\n  overflowX: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}))\n\nconst StyledDrawerContentPaper = styled(Paper, {\n  name: 'StyledDrawerContentPaper',\n  shouldForwardProp: prop => !['widthVariant'].includes(prop as string),\n})<DrawerExProps>(({ theme, widthVariant }) => ({\n  alignItems: 'stretch',\n  borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  height: '100%',\n  maxWidth: '100%',\n  overflowX: 'hidden',\n  padding: theme.spacing(3),\n  [theme.breakpoints.up('lg')]: { width: widthVariant === 'full' ? '100%' : '50%' },\n  [theme.breakpoints.up('md')]: { width: widthVariant === 'full' ? '100%' : '75%' },\n}))\n"],"mappings":";AACA;AAAA,EACE;AAAA,EAAQ;AAAA,EAAO;AAAA,EAAQ;AAAA,OAClB;AACP,SAAS,eAAe;AAExB,SAAgB,eAAe;AA4CjB,SAEM,KAFN;AAnCP,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,MAAM;AACJ,QAAM,oBAAoB,QAAQ,MAAM;AACtC,WAAO;AAAA,MACL,YAAY;AAAA,QACV,IAAI;AAAA,UACF,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ,WAAW;AAAA,UACX,QAAQ,kBAAkB,SAAS,SAAS;AAAA,UAC5C,OAAO,iBAAiB,YAAY,SAAS;AAAA,QAC/C;AAAA,MACF;AAAA,MACA,SAAS,CAAC,UAAsB,UAAU,OAAO,eAAe;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,eAAe,SAAS,YAAY,CAAC;AAEzC,SACE,oBAAC,UAAO,QAAO,OAAM,SAAmB,GAAG,mBAAoB,GAAG,OAEhE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,MACX,SAAS,CAAC,UAAsB,MAAM,gBAAgB;AAAA,MACtD,IAAI,EAAE,OAAO,iBAAiB,SAAS,SAAS,OAAU;AAAA,MAEzD;AAAA,iBAAS,WAEJ,qBAAC,WAAQ,YAAW,SAAQ,KAAK,GAC9B;AAAA,kBACG,oBAAC,4BAAyB,SAAQ,MAAM,iBAAM,IAC9C;AAAA,UACH,WAEK,oBAAC,cAAW,SAAQ,aAAY,eAAc,QAC3C,oBACH,IAEF;AAAA,WACN,IAEF;AAAA,QACH;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,IAAM,2BAA2B,OAAO,YAAY,EAAE,MAAM,2BAA2B,CAAC,EAAE,OAAO;AAAA,EAC/F,UAAU;AAAA,EACV,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AACd,EAAE;AAEF,IAAM,2BAA2B,OAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,mBAAmB,UAAQ,CAAC,CAAC,cAAc,EAAE,SAAS,IAAc;AACtE,CAAC,EAAiB,CAAC,EAAE,OAAO,aAAa,OAAO;AAAA,EAC9C,YAAY;AAAA,EACZ,cAAc,OAAO,MAAM,MAAM,YAAY,MAAM,MAAM,MAAM,YAAY;AAAA,EAC3E,SAAS;AAAA,EACT,eAAe;AAAA,EACf,KAAK,MAAM,QAAQ,CAAC;AAAA,EACpB,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,WAAW;AAAA,EACX,SAAS,MAAM,QAAQ,CAAC;AAAA,EACxB,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,EAAE,OAAO,iBAAiB,SAAS,SAAS,MAAM;AAAA,EAChF,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,EAAE,OAAO,iBAAiB,SAAS,SAAS,MAAM;AAClF,EAAE;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/react-drawer",
-  "version": "7.5.8",
+  "version": "7.5.12",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -36,37 +36,57 @@
     },
     "./package.json": "./package.json"
   },
-  "module": "dist/browser/index.mjs",
-  "types": "dist/browser/index.d.ts",
   "files": [
     "dist",
-    "src"
+    "README.md"
   ],
-  "dependencies": {
-    "@xylabs/react-flexbox": "~7.1.17"
-  },
   "devDependencies": {
-    "@mui/material": "~7.3.9",
-    "@storybook/react-vite": "~10.3.3",
+    "@mui/material": "^7.3.10",
+    "@opentelemetry/api": "^1.9.1",
+    "@opentelemetry/sdk-trace-base": "^2.7.0",
+    "@storybook/react-vite": "~10.3.5",
+    "@types/node": "~25.6.0",
     "@types/react": "^19.2.14",
-    "@xylabs/ts-scripts-common": "~7.5.6",
-    "@xylabs/ts-scripts-yarn3": "~7.5.6",
-    "@xylabs/tsconfig": "~7.5.6",
-    "@xylabs/tsconfig-dom": "~7.5.6",
-    "@xylabs/tsconfig-react": "~7.5.6",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "storybook": "~10.3.3",
+    "@xylabs/react-async-effect": "~7.1.20",
+    "@xylabs/react-flexbox": "~7.1.20",
+    "@xylabs/react-promise": "~7.1.20",
+    "@xylabs/toolchain": "~7.11.9",
+    "@xylabs/tsconfig": "^7.11.9",
+    "@xylabs/tsconfig-dom": "^7.11.9",
+    "@xylabs/tsconfig-react": "~7.11.9",
+    "async-mutex": "^0.5.0",
+    "axios": "^1.15.2",
+    "bn.js": "^5.2.3",
+    "buffer": "^6.0.3",
+    "chalk": "^5.6.2",
+    "esbuild": "~0.28.0",
+    "eslint": "^10.2.1",
+    "ethers": "^6.16.0",
+    "pako": "^2.1.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "storybook": "^10.3.5",
     "typescript": "^5.9.3",
-    "vite": "~8.0.3"
+    "vite": "^8.0.10",
+    "zod": "^4.3.6"
   },
   "peerDependencies": {
-    "@mui/material": ">=6 <8",
-    "react": "^19",
-    "react-dom": "^19"
+    "@mui/material": "^7.3.10",
+    "@opentelemetry/sdk-trace-base": "^2.7.0",
+    "@xylabs/react-async-effect": "~7.1.20",
+    "@xylabs/react-flexbox": "~7.1.20",
+    "async-mutex": "^0.5.0",
+    "bn.js": "^5.2.3",
+    "buffer": "^6.0.3",
+    "chalk": "^5.6.2",
+    "ethers": "^6.16.0",
+    "pako": "^2.1.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "zod": "^4.3.6"
   },
   "publishConfig": {
     "access": "public"
   },
   "docs": "dist/docs.json"
-}
+}

package/src/components/Drawer.stories.tsx

@@ -1,39 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-
-import type { DrawerExProps } from './Drawer.tsx'
-import { DrawerEx } from './Drawer.tsx'
-
-export default { title: 'modules/drawer/Ex' } as Meta
-
-const Template: StoryFn<React.FC<DrawerExProps>> = (props) => {
-  return (
-    <div style={{ height: 'calc(100vh - 2rem)', width: '100vw' }}>
-      <DrawerEx {...props} />
-    </div>
-  )
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithOpen = Template.bind({})
-WithOpen.args = { open: true }
-
-const WithFullScreen = Template.bind({})
-WithFullScreen.args = {
-  heightVariant: 'full',
-  open: true,
-  widthVariant: 'full',
-}
-
-const WithTitles = Template.bind({})
-WithTitles.args = {
-  open: true,
-  subTitle: 'SubTitle',
-  title: 'Title',
-}
-
-export {
-  Default, WithFullScreen, WithOpen, WithTitles,
-}

package/src/components/Drawer.tsx

@@ -1,93 +0,0 @@
-import type { DrawerProps } from '@mui/material'
-import {
-  Drawer, Paper, styled, Typography,
-} from '@mui/material'
-import { FlexCol } from '@xylabs/react-flexbox'
-import type { MouseEvent, PropsWithChildren } from 'react'
-import React, { useMemo } from 'react'
-
-export interface DrawerExProps extends PropsWithChildren<DrawerProps> {
-  heightVariant?: 'full' | 'auto'
-  subTitle?: string
-  title?: string
-  widthVariant?: 'full' | 'partial'
-}
-
-export const DrawerEx: React.FC<DrawerExProps> = ({
-  children,
-  heightVariant = 'full',
-  subTitle,
-  title,
-  onClose,
-  widthVariant = 'partial',
-  ...props
-}) => {
-  const variantBasedProps = useMemo(() => {
-    return {
-      PaperProps: {
-        sx: {
-          alignItems: 'center',
-          background: 'transparent',
-          boxShadow: 'none',
-          height: heightVariant === 'full' ? '100%' : 'auto',
-          width: widthVariant === 'partial' ? 'auto' : '100%',
-        },
-      },
-      onClick: (event: MouseEvent) => onClose?.(event, 'backdropClick'),
-    }
-  }, [heightVariant, onClose, widthVariant])
-
-  return (
-    <Drawer anchor="top" onClose={onClose} {...variantBasedProps} {...props}>
-      {/* Trap the event to prevent triggering the backdrop onClick */}
-      <StyledDrawerContentPaper
-        widthVariant={widthVariant}
-        elevation={16}
-        onClick={(event: MouseEvent) => event.stopPropagation()}
-        sx={{ width: widthVariant === 'full' ? '100%' : undefined }}
-      >
-        {title || subTitle
-          ? (
-              <FlexCol alignItems="start" gap={1}>
-                {title
-                  ? <StyledEllipsisTypography variant="h3">{title}</StyledEllipsisTypography>
-                  : null}
-                {subTitle
-                  ? (
-                      <Typography variant="subtitle1" textTransform="none">
-                        {subTitle}
-                      </Typography>
-                    )
-                  : null}
-              </FlexCol>
-            )
-          : null}
-        {children}
-      </StyledDrawerContentPaper>
-    </Drawer>
-  )
-}
-
-const StyledEllipsisTypography = styled(Typography, { name: 'StyledEllipsisTypography' })(() => ({
-  maxWidth: '100%',
-  overflowX: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-}))
-
-const StyledDrawerContentPaper = styled(Paper, {
-  name: 'StyledDrawerContentPaper',
-  shouldForwardProp: prop => !['widthVariant'].includes(prop as string),
-})<DrawerExProps>(({ theme, widthVariant }) => ({
-  alignItems: 'stretch',
-  borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,
-  display: 'flex',
-  flexDirection: 'column',
-  gap: theme.spacing(2),
-  height: '100%',
-  maxWidth: '100%',
-  overflowX: 'hidden',
-  padding: theme.spacing(3),
-  [theme.breakpoints.up('lg')]: { width: widthVariant === 'full' ? '100%' : '50%' },
-  [theme.breakpoints.up('md')]: { width: widthVariant === 'full' ? '100%' : '75%' },
-}))

package/src/components/index.ts

@@ -1 +0,0 @@
-export * from './Drawer.tsx'

package/src/index.ts

@@ -1 +0,0 @@
-export * from './components/index.ts'

package/src/types/images.d.ts

@@ -1,5 +0,0 @@
-declare module '*.png'
-declare module '*.jpg'
-declare module '*.svg'
-declare module '*.gif'
-declare module '*.webp'