@xyo-network/react-drawer 2.78.0 → 2.78.1

package/dist/browser/index.cjs

@@ -1,2 +1,98 @@
-"use strict";var s=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var f=(r,a)=>{for(var t in a)s(r,t,{get:a[t],enumerable:!0})},y=(r,a,t,p)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of x(a))!c.call(r,o)&&o!==t&&s(r,o,{get:()=>a[o],enumerable:!(p=w(a,o))||p.enumerable});return r};var P=r=>y(s({},"__esModule",{value:!0}),r);var v={};f(v,{DrawerEx:()=>m});module.exports=P(v);var e=require("@mui/material"),d=require("@xylabs/react-flexbox"),u=require("react"),l=require("react/jsx-runtime"),m=({children:r,heightVariant:a="full",subTitle:t,title:p,onClose:o,widthVariant:n="partial",...h})=>{let g=(0,u.useMemo)(()=>({PaperProps:{sx:{alignItems:"center",background:"transparent",boxShadow:"none",height:a==="full"?"100%":"auto",width:n==="partial"?"auto":"100%"}},onClick:i=>o?.(i,"backdropClick")}),[a,o,n]);return(0,l.jsx)(e.Drawer,{anchor:"top",onClose:o,...g,...h,children:(0,l.jsxs)(C,{widthVariant:n,elevation:16,onClick:i=>i.stopPropagation(),sx:{width:n==="full"?"100%":void 0},children:[p||t?(0,l.jsxs)(d.FlexCol,{alignItems:"start",gap:1,children:[p?(0,l.jsx)(D,{variant:"h3",children:p}):null,t?(0,l.jsx)(e.Typography,{variant:"subtitle1",textTransform:"none",children:t}):null]}):null,r]})})},D=(0,e.styled)(e.Typography,{name:"StyledEllipsisTypography"})(()=>({maxWidth:"100%",overflowX:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})),C=(0,e.styled)(e.Paper,{name:"StyledDrawerContentPaper",shouldForwardProp:r=>!["widthVariant"].includes(r)})(({theme:r,widthVariant:a})=>({alignItems:"stretch",borderRadius:`0 0 ${r.shape.borderRadius}px ${r.shape.borderRadius}px`,display:"flex",flexDirection:"column",gap:r.spacing(2),height:"100%",maxWidth:"100%",overflowX:"hidden",padding:r.spacing(3),[r.breakpoints.up("lg")]:{width:a==="full"?"100%":"50%"},[r.breakpoints.up("md")]:{width:a==="full"?"100%":"75%"}}));
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  DrawerEx: () => DrawerEx
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/Drawer.tsx
+var import_material = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DrawerEx = ({
+  children,
+  heightVariant = "full",
+  subTitle,
+  title,
+  onClose,
+  widthVariant = "partial",
+  ...props
+}) => {
+  const variantBasedProps = (0, import_react.useMemo)(() => {
+    return {
+      PaperProps: {
+        sx: {
+          alignItems: "center",
+          background: "transparent",
+          boxShadow: "none",
+          height: heightVariant === "full" ? "100%" : "auto",
+          width: widthVariant === "partial" ? "auto" : "100%"
+        }
+      },
+      onClick: (event) => onClose?.(event, "backdropClick")
+    };
+  }, [heightVariant, onClose, widthVariant]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Drawer, { anchor: "top", onClose, ...variantBasedProps, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    StyledDrawerContentPaper,
+    {
+      widthVariant,
+      elevation: 16,
+      onClick: (event) => event.stopPropagation(),
+      sx: { width: widthVariant === "full" ? "100%" : void 0 },
+      children: [
+        title || subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { alignItems: "start", gap: 1, children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledEllipsisTypography, { variant: "h3", children: title }) : null,
+          subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "subtitle1", textTransform: "none", children: subTitle }) : null
+        ] }) : null,
+        children
+      ]
+    }
+  ) });
+};
+var StyledEllipsisTypography = (0, import_material.styled)(import_material.Typography, { name: "StyledEllipsisTypography" })(() => ({
+  maxWidth: "100%",
+  overflowX: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}));
+var StyledDrawerContentPaper = (0, import_material.styled)(import_material.Paper, {
+  name: "StyledDrawerContentPaper",
+  shouldForwardProp: (prop) => !["widthVariant"].includes(prop)
+})(({ 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%"
+  }
+}));
 //# sourceMappingURL=index.cjs.map

package/dist/browser/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts","../../src/components/Drawer.tsx"],"sourcesContent":["export * from './components'\n","import { Drawer, DrawerProps, Paper, styled, Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { MouseEvent, PropsWithChildren, 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) => event.stopPropagation()}\n        sx={{ width: widthVariant === 'full' ? '100%' : undefined }}\n      >\n        {title || subTitle ?\n          <FlexCol alignItems=\"start\" gap={1}>\n            {title ?\n              <StyledEllipsisTypography variant={'h3'}>{title}</StyledEllipsisTypography>\n            : null}\n            {subTitle ?\n              <Typography variant={'subtitle1'} textTransform=\"none\">\n                {subTitle}\n              </Typography>\n            : null}\n          </FlexCol>\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')]: {\n    width: widthVariant === 'full' ? '100%' : '50%',\n  },\n  [theme.breakpoints.up('md')]: {\n    width: widthVariant === 'full' ? '100%' : '75%',\n  },\n}))\n"],"mappings":"yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,cAAAE,IAAA,eAAAC,EAAAH,GCAA,IAAAI,EAA+D,yBAC/DC,EAAwB,iCACxBC,EAAuD,iBA2C7CC,EAAA,6BAlCGC,EAAoC,CAAC,CAChD,SAAAC,EACA,cAAAC,EAAgB,OAChB,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,aAAAC,EAAe,UACf,GAAGC,CACL,IAAM,CACJ,IAAMC,KAAoB,WAAQ,KACzB,CACL,WAAY,CACV,GAAI,CACF,WAAY,SACZ,WAAY,cACZ,UAAW,OACX,OAAQN,IAAkB,OAAS,OAAS,OAC5C,MAAOI,IAAiB,UAAY,OAAS,MAC/C,CACF,EACA,QAAUG,GAAsBJ,IAAUI,EAAO,eAAe,CAClE,GACC,CAACP,EAAeG,EAASC,CAAY,CAAC,EAEzC,SACE,OAAC,UAAO,OAAQ,MAAO,QAASD,EAAU,GAAGG,EAAoB,GAAGD,EAElE,oBAACG,EAAA,CACC,aAAcJ,EACd,UAAW,GACX,QAAUG,GAAUA,EAAM,gBAAgB,EAC1C,GAAI,CAAE,MAAOH,IAAiB,OAAS,OAAS,MAAU,EAEzD,UAAAF,GAASD,KACR,QAAC,WAAQ,WAAW,QAAQ,IAAK,EAC9B,UAAAC,KACC,OAACO,EAAA,CAAyB,QAAS,KAAO,SAAAP,EAAM,EAChD,KACDD,KACC,OAAC,cAAW,QAAS,YAAa,cAAc,OAC7C,SAAAA,EACH,EACA,MACJ,EACA,KACDF,GACH,EACF,CAEJ,EAEMU,KAA2B,UAAO,aAAY,CAAE,KAAM,0BAA2B,CAAC,EAAE,KAAO,CAC/F,SAAU,OACV,UAAW,SACX,aAAc,WACd,WAAY,QACd,EAAE,EAEID,KAA2B,UAAO,QAAO,CAC7C,KAAM,2BACN,kBAAoBE,GAAS,CAAC,CAAC,cAAc,EAAE,SAASA,CAAc,CACxE,CAAC,EAAiB,CAAC,CAAE,MAAAC,EAAO,aAAAP,CAAa,KAAO,CAC9C,WAAY,UACZ,aAAc,OAAOO,EAAM,MAAM,YAAY,MAAMA,EAAM,MAAM,YAAY,KAC3E,QAAS,OACT,cAAe,SACf,IAAKA,EAAM,QAAQ,CAAC,EACpB,OAAQ,OACR,SAAU,OACV,UAAW,SACX,QAASA,EAAM,QAAQ,CAAC,EACxB,CAACA,EAAM,YAAY,GAAG,IAAI,CAAC,EAAG,CAC5B,MAAOP,IAAiB,OAAS,OAAS,KAC5C,EACA,CAACO,EAAM,YAAY,GAAG,IAAI,CAAC,EAAG,CAC5B,MAAOP,IAAiB,OAAS,OAAS,KAC5C,CACF,EAAE","names":["src_exports","__export","DrawerEx","__toCommonJS","import_material","import_react_flexbox","import_react","import_jsx_runtime","DrawerEx","children","heightVariant","subTitle","title","onClose","widthVariant","props","variantBasedProps","event","StyledDrawerContentPaper","StyledEllipsisTypography","prop","theme"]}
+{"version":3,"sources":["../../src/index.ts","../../src/components/Drawer.tsx"],"sourcesContent":["export * from './components'\n","import { Drawer, DrawerProps, Paper, styled, Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { MouseEvent, PropsWithChildren, 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) => event.stopPropagation()}\n        sx={{ width: widthVariant === 'full' ? '100%' : undefined }}\n      >\n        {title || subTitle ?\n          <FlexCol alignItems=\"start\" gap={1}>\n            {title ?\n              <StyledEllipsisTypography variant={'h3'}>{title}</StyledEllipsisTypography>\n            : null}\n            {subTitle ?\n              <Typography variant={'subtitle1'} textTransform=\"none\">\n                {subTitle}\n              </Typography>\n            : null}\n          </FlexCol>\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')]: {\n    width: widthVariant === 'full' ? '100%' : '50%',\n  },\n  [theme.breakpoints.up('md')]: {\n    width: widthVariant === 'full' ? '100%' : '75%',\n  },\n}))\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,sBAA+D;AAC/D,2BAAwB;AACxB,mBAAuD;AA2C7C;AAlCH,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,MAAM;AACJ,QAAM,wBAAoB,sBAAQ,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,4CAAC,0BAAO,QAAQ,OAAO,SAAmB,GAAG,mBAAoB,GAAG,OAElE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,MACX,SAAS,CAAC,UAAU,MAAM,gBAAgB;AAAA,MAC1C,IAAI,EAAE,OAAO,iBAAiB,SAAS,SAAS,OAAU;AAAA,MAEzD;AAAA,iBAAS,WACR,6CAAC,gCAAQ,YAAW,SAAQ,KAAK,GAC9B;AAAA,kBACC,4CAAC,4BAAyB,SAAS,MAAO,iBAAM,IAChD;AAAA,UACD,WACC,4CAAC,8BAAW,SAAS,aAAa,eAAc,QAC7C,oBACH,IACA;AAAA,WACJ,IACA;AAAA,QACD;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,IAAM,+BAA2B,wBAAO,4BAAY,EAAE,MAAM,2BAA2B,CAAC,EAAE,OAAO;AAAA,EAC/F,UAAU;AAAA,EACV,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AACd,EAAE;AAEF,IAAM,+BAA2B,wBAAO,uBAAO;AAAA,EAC7C,MAAM;AAAA,EACN,mBAAmB,CAAC,SAAS,CAAC,CAAC,cAAc,EAAE,SAAS,IAAc;AACxE,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;AAAA,IAC5B,OAAO,iBAAiB,SAAS,SAAS;AAAA,EAC5C;AAAA,EACA,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG;AAAA,IAC5B,OAAO,iBAAiB,SAAS,SAAS;AAAA,EAC5C;AACF,EAAE;","names":[]}

package/dist/browser/index.js

@@ -1,2 +1,75 @@
-import{Drawer as g,Paper as w,styled as s,Typography as d}from"@mui/material";import{FlexCol as x}from"@xylabs/react-flexbox";import{useMemo as c}from"react";import{jsx as n,jsxs as i}from"react/jsx-runtime";var b=({children:r,heightVariant:a="full",subTitle:o,title:t,onClose:l,widthVariant:e="partial",...u})=>{let h=c(()=>({PaperProps:{sx:{alignItems:"center",background:"transparent",boxShadow:"none",height:a==="full"?"100%":"auto",width:e==="partial"?"auto":"100%"}},onClick:p=>l?.(p,"backdropClick")}),[a,l,e]);return n(g,{anchor:"top",onClose:l,...h,...u,children:i(y,{widthVariant:e,elevation:16,onClick:p=>p.stopPropagation(),sx:{width:e==="full"?"100%":void 0},children:[t||o?i(x,{alignItems:"start",gap:1,children:[t?n(f,{variant:"h3",children:t}):null,o?n(d,{variant:"subtitle1",textTransform:"none",children:o}):null]}):null,r]})})},f=s(d,{name:"StyledEllipsisTypography"})(()=>({maxWidth:"100%",overflowX:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})),y=s(w,{name:"StyledDrawerContentPaper",shouldForwardProp:r=>!["widthVariant"].includes(r)})(({theme:r,widthVariant:a})=>({alignItems:"stretch",borderRadius:`0 0 ${r.shape.borderRadius}px ${r.shape.borderRadius}px`,display:"flex",flexDirection:"column",gap:r.spacing(2),height:"100%",maxWidth:"100%",overflowX:"hidden",padding:r.spacing(3),[r.breakpoints.up("lg")]:{width:a==="full"?"100%":"50%"},[r.breakpoints.up("md")]:{width:a==="full"?"100%":"75%"}}));export{b as DrawerEx};
+// src/components/Drawer.tsx
+import { Drawer, Paper, styled, Typography } from "@mui/material";
+import { FlexCol } from "@xylabs/react-flexbox";
+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: {
+        sx: {
+          alignItems: "center",
+          background: "transparent",
+          boxShadow: "none",
+          height: heightVariant === "full" ? "100%" : "auto",
+          width: widthVariant === "partial" ? "auto" : "100%"
+        }
+      },
+      onClick: (event) => onClose?.(event, "backdropClick")
+    };
+  }, [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
+      ]
+    }
+  ) });
+};
+var StyledEllipsisTypography = styled(Typography, { name: "StyledEllipsisTypography" })(() => ({
+  maxWidth: "100%",
+  overflowX: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}));
+var StyledDrawerContentPaper = styled(Paper, {
+  name: "StyledDrawerContentPaper",
+  shouldForwardProp: (prop) => !["widthVariant"].includes(prop)
+})(({ 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%"
+  }
+}));
+export {
+  DrawerEx
+};
 //# sourceMappingURL=index.js.map

package/dist/browser/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Drawer.tsx"],"sourcesContent":["import { Drawer, DrawerProps, Paper, styled, Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { MouseEvent, PropsWithChildren, 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) => event.stopPropagation()}\n        sx={{ width: widthVariant === 'full' ? '100%' : undefined }}\n      >\n        {title || subTitle ?\n          <FlexCol alignItems=\"start\" gap={1}>\n            {title ?\n              <StyledEllipsisTypography variant={'h3'}>{title}</StyledEllipsisTypography>\n            : null}\n            {subTitle ?\n              <Typography variant={'subtitle1'} textTransform=\"none\">\n                {subTitle}\n              </Typography>\n            : null}\n          </FlexCol>\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')]: {\n    width: widthVariant === 'full' ? '100%' : '50%',\n  },\n  [theme.breakpoints.up('md')]: {\n    width: widthVariant === 'full' ? '100%' : '75%',\n  },\n}))\n"],"mappings":"AAAA,OAAS,UAAAA,EAAqB,SAAAC,EAAO,UAAAC,EAAQ,cAAAC,MAAkB,gBAC/D,OAAS,WAAAC,MAAe,wBACxB,OAAwC,WAAAC,MAAe,QA2C7C,OAEI,OAAAC,EAFJ,QAAAC,MAAA,oBAlCH,IAAMC,EAAoC,CAAC,CAChD,SAAAC,EACA,cAAAC,EAAgB,OAChB,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,aAAAC,EAAe,UACf,GAAGC,CACL,IAAM,CACJ,IAAMC,EAAoBX,EAAQ,KACzB,CACL,WAAY,CACV,GAAI,CACF,WAAY,SACZ,WAAY,cACZ,UAAW,OACX,OAAQK,IAAkB,OAAS,OAAS,OAC5C,MAAOI,IAAiB,UAAY,OAAS,MAC/C,CACF,EACA,QAAUG,GAAsBJ,IAAUI,EAAO,eAAe,CAClE,GACC,CAACP,EAAeG,EAASC,CAAY,CAAC,EAEzC,OACER,EAACN,EAAA,CAAO,OAAQ,MAAO,QAASa,EAAU,GAAGG,EAAoB,GAAGD,EAElE,SAAAR,EAACW,EAAA,CACC,aAAcJ,EACd,UAAW,GACX,QAAUG,GAAUA,EAAM,gBAAgB,EAC1C,GAAI,CAAE,MAAOH,IAAiB,OAAS,OAAS,MAAU,EAEzD,UAAAF,GAASD,EACRJ,EAACH,EAAA,CAAQ,WAAW,QAAQ,IAAK,EAC9B,UAAAQ,EACCN,EAACa,EAAA,CAAyB,QAAS,KAAO,SAAAP,EAAM,EAChD,KACDD,EACCL,EAACH,EAAA,CAAW,QAAS,YAAa,cAAc,OAC7C,SAAAQ,EACH,EACA,MACJ,EACA,KACDF,GACH,EACF,CAEJ,EAEMU,EAA2BjB,EAAOC,EAAY,CAAE,KAAM,0BAA2B,CAAC,EAAE,KAAO,CAC/F,SAAU,OACV,UAAW,SACX,aAAc,WACd,WAAY,QACd,EAAE,EAEIe,EAA2BhB,EAAOD,EAAO,CAC7C,KAAM,2BACN,kBAAoBmB,GAAS,CAAC,CAAC,cAAc,EAAE,SAASA,CAAc,CACxE,CAAC,EAAiB,CAAC,CAAE,MAAAC,EAAO,aAAAP,CAAa,KAAO,CAC9C,WAAY,UACZ,aAAc,OAAOO,EAAM,MAAM,YAAY,MAAMA,EAAM,MAAM,YAAY,KAC3E,QAAS,OACT,cAAe,SACf,IAAKA,EAAM,QAAQ,CAAC,EACpB,OAAQ,OACR,SAAU,OACV,UAAW,SACX,QAASA,EAAM,QAAQ,CAAC,EACxB,CAACA,EAAM,YAAY,GAAG,IAAI,CAAC,EAAG,CAC5B,MAAOP,IAAiB,OAAS,OAAS,KAC5C,EACA,CAACO,EAAM,YAAY,GAAG,IAAI,CAAC,EAAG,CAC5B,MAAOP,IAAiB,OAAS,OAAS,KAC5C,CACF,EAAE","names":["Drawer","Paper","styled","Typography","FlexCol","useMemo","jsx","jsxs","DrawerEx","children","heightVariant","subTitle","title","onClose","widthVariant","props","variantBasedProps","event","StyledDrawerContentPaper","StyledEllipsisTypography","prop","theme"]}
+{"version":3,"sources":["../../src/components/Drawer.tsx"],"sourcesContent":["import { Drawer, DrawerProps, Paper, styled, Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { MouseEvent, PropsWithChildren, 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) => event.stopPropagation()}\n        sx={{ width: widthVariant === 'full' ? '100%' : undefined }}\n      >\n        {title || subTitle ?\n          <FlexCol alignItems=\"start\" gap={1}>\n            {title ?\n              <StyledEllipsisTypography variant={'h3'}>{title}</StyledEllipsisTypography>\n            : null}\n            {subTitle ?\n              <Typography variant={'subtitle1'} textTransform=\"none\">\n                {subTitle}\n              </Typography>\n            : null}\n          </FlexCol>\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')]: {\n    width: widthVariant === 'full' ? '100%' : '50%',\n  },\n  [theme.breakpoints.up('md')]: {\n    width: widthVariant === 'full' ? '100%' : '75%',\n  },\n}))\n"],"mappings":";AAAA,SAAS,QAAqB,OAAO,QAAQ,kBAAkB;AAC/D,SAAS,eAAe;AACxB,SAAwC,eAAe;AA2C7C,SAEI,KAFJ;AAlCH,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,QAAQ,OAAO,SAAmB,GAAG,mBAAoB,GAAG,OAElE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,MACX,SAAS,CAAC,UAAU,MAAM,gBAAgB;AAAA,MAC1C,IAAI,EAAE,OAAO,iBAAiB,SAAS,SAAS,OAAU;AAAA,MAEzD;AAAA,iBAAS,WACR,qBAAC,WAAQ,YAAW,SAAQ,KAAK,GAC9B;AAAA,kBACC,oBAAC,4BAAyB,SAAS,MAAO,iBAAM,IAChD;AAAA,UACD,WACC,oBAAC,cAAW,SAAS,aAAa,eAAc,QAC7C,oBACH,IACA;AAAA,WACJ,IACA;AAAA,QACD;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,CAAC,SAAS,CAAC,CAAC,cAAc,EAAE,SAAS,IAAc;AACxE,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;AAAA,IAC5B,OAAO,iBAAiB,SAAS,SAAS;AAAA,EAC5C;AAAA,EACA,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG;AAAA,IAC5B,OAAO,iBAAiB,SAAS,SAAS;AAAA,EAC5C;AACF,EAAE;","names":[]}

package/dist/neutral/index.cjs

@@ -1,2 +1,98 @@
-"use strict";var s=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var f=(r,a)=>{for(var t in a)s(r,t,{get:a[t],enumerable:!0})},y=(r,a,t,p)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of x(a))!c.call(r,o)&&o!==t&&s(r,o,{get:()=>a[o],enumerable:!(p=w(a,o))||p.enumerable});return r};var P=r=>y(s({},"__esModule",{value:!0}),r);var v={};f(v,{DrawerEx:()=>m});module.exports=P(v);var e=require("@mui/material"),d=require("@xylabs/react-flexbox"),u=require("react"),l=require("react/jsx-runtime"),m=({children:r,heightVariant:a="full",subTitle:t,title:p,onClose:o,widthVariant:n="partial",...h})=>{let g=(0,u.useMemo)(()=>({PaperProps:{sx:{alignItems:"center",background:"transparent",boxShadow:"none",height:a==="full"?"100%":"auto",width:n==="partial"?"auto":"100%"}},onClick:i=>o?.(i,"backdropClick")}),[a,o,n]);return(0,l.jsx)(e.Drawer,{anchor:"top",onClose:o,...g,...h,children:(0,l.jsxs)(C,{widthVariant:n,elevation:16,onClick:i=>i.stopPropagation(),sx:{width:n==="full"?"100%":void 0},children:[p||t?(0,l.jsxs)(d.FlexCol,{alignItems:"start",gap:1,children:[p?(0,l.jsx)(D,{variant:"h3",children:p}):null,t?(0,l.jsx)(e.Typography,{variant:"subtitle1",textTransform:"none",children:t}):null]}):null,r]})})},D=(0,e.styled)(e.Typography,{name:"StyledEllipsisTypography"})(()=>({maxWidth:"100%",overflowX:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})),C=(0,e.styled)(e.Paper,{name:"StyledDrawerContentPaper",shouldForwardProp:r=>!["widthVariant"].includes(r)})(({theme:r,widthVariant:a})=>({alignItems:"stretch",borderRadius:`0 0 ${r.shape.borderRadius}px ${r.shape.borderRadius}px`,display:"flex",flexDirection:"column",gap:r.spacing(2),height:"100%",maxWidth:"100%",overflowX:"hidden",padding:r.spacing(3),[r.breakpoints.up("lg")]:{width:a==="full"?"100%":"50%"},[r.breakpoints.up("md")]:{width:a==="full"?"100%":"75%"}}));
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  DrawerEx: () => DrawerEx
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/Drawer.tsx
+var import_material = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DrawerEx = ({
+  children,
+  heightVariant = "full",
+  subTitle,
+  title,
+  onClose,
+  widthVariant = "partial",
+  ...props
+}) => {
+  const variantBasedProps = (0, import_react.useMemo)(() => {
+    return {
+      PaperProps: {
+        sx: {
+          alignItems: "center",
+          background: "transparent",
+          boxShadow: "none",
+          height: heightVariant === "full" ? "100%" : "auto",
+          width: widthVariant === "partial" ? "auto" : "100%"
+        }
+      },
+      onClick: (event) => onClose?.(event, "backdropClick")
+    };
+  }, [heightVariant, onClose, widthVariant]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Drawer, { anchor: "top", onClose, ...variantBasedProps, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    StyledDrawerContentPaper,
+    {
+      widthVariant,
+      elevation: 16,
+      onClick: (event) => event.stopPropagation(),
+      sx: { width: widthVariant === "full" ? "100%" : void 0 },
+      children: [
+        title || subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { alignItems: "start", gap: 1, children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledEllipsisTypography, { variant: "h3", children: title }) : null,
+          subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "subtitle1", textTransform: "none", children: subTitle }) : null
+        ] }) : null,
+        children
+      ]
+    }
+  ) });
+};
+var StyledEllipsisTypography = (0, import_material.styled)(import_material.Typography, { name: "StyledEllipsisTypography" })(() => ({
+  maxWidth: "100%",
+  overflowX: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}));
+var StyledDrawerContentPaper = (0, import_material.styled)(import_material.Paper, {
+  name: "StyledDrawerContentPaper",
+  shouldForwardProp: (prop) => !["widthVariant"].includes(prop)
+})(({ 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%"
+  }
+}));
 //# sourceMappingURL=index.cjs.map

package/dist/neutral/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts","../../src/components/Drawer.tsx"],"sourcesContent":["export * from './components'\n","import { Drawer, DrawerProps, Paper, styled, Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { MouseEvent, PropsWithChildren, 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) => event.stopPropagation()}\n        sx={{ width: widthVariant === 'full' ? '100%' : undefined }}\n      >\n        {title || subTitle ?\n          <FlexCol alignItems=\"start\" gap={1}>\n            {title ?\n              <StyledEllipsisTypography variant={'h3'}>{title}</StyledEllipsisTypography>\n            : null}\n            {subTitle ?\n              <Typography variant={'subtitle1'} textTransform=\"none\">\n                {subTitle}\n              </Typography>\n            : null}\n          </FlexCol>\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')]: {\n    width: widthVariant === 'full' ? '100%' : '50%',\n  },\n  [theme.breakpoints.up('md')]: {\n    width: widthVariant === 'full' ? '100%' : '75%',\n  },\n}))\n"],"mappings":"yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,cAAAE,IAAA,eAAAC,EAAAH,GCAA,IAAAI,EAA+D,yBAC/DC,EAAwB,iCACxBC,EAAuD,iBA2C7CC,EAAA,6BAlCGC,EAAoC,CAAC,CAChD,SAAAC,EACA,cAAAC,EAAgB,OAChB,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,aAAAC,EAAe,UACf,GAAGC,CACL,IAAM,CACJ,IAAMC,KAAoB,WAAQ,KACzB,CACL,WAAY,CACV,GAAI,CACF,WAAY,SACZ,WAAY,cACZ,UAAW,OACX,OAAQN,IAAkB,OAAS,OAAS,OAC5C,MAAOI,IAAiB,UAAY,OAAS,MAC/C,CACF,EACA,QAAUG,GAAsBJ,IAAUI,EAAO,eAAe,CAClE,GACC,CAACP,EAAeG,EAASC,CAAY,CAAC,EAEzC,SACE,OAAC,UAAO,OAAQ,MAAO,QAASD,EAAU,GAAGG,EAAoB,GAAGD,EAElE,oBAACG,EAAA,CACC,aAAcJ,EACd,UAAW,GACX,QAAUG,GAAUA,EAAM,gBAAgB,EAC1C,GAAI,CAAE,MAAOH,IAAiB,OAAS,OAAS,MAAU,EAEzD,UAAAF,GAASD,KACR,QAAC,WAAQ,WAAW,QAAQ,IAAK,EAC9B,UAAAC,KACC,OAACO,EAAA,CAAyB,QAAS,KAAO,SAAAP,EAAM,EAChD,KACDD,KACC,OAAC,cAAW,QAAS,YAAa,cAAc,OAC7C,SAAAA,EACH,EACA,MACJ,EACA,KACDF,GACH,EACF,CAEJ,EAEMU,KAA2B,UAAO,aAAY,CAAE,KAAM,0BAA2B,CAAC,EAAE,KAAO,CAC/F,SAAU,OACV,UAAW,SACX,aAAc,WACd,WAAY,QACd,EAAE,EAEID,KAA2B,UAAO,QAAO,CAC7C,KAAM,2BACN,kBAAoBE,GAAS,CAAC,CAAC,cAAc,EAAE,SAASA,CAAc,CACxE,CAAC,EAAiB,CAAC,CAAE,MAAAC,EAAO,aAAAP,CAAa,KAAO,CAC9C,WAAY,UACZ,aAAc,OAAOO,EAAM,MAAM,YAAY,MAAMA,EAAM,MAAM,YAAY,KAC3E,QAAS,OACT,cAAe,SACf,IAAKA,EAAM,QAAQ,CAAC,EACpB,OAAQ,OACR,SAAU,OACV,UAAW,SACX,QAASA,EAAM,QAAQ,CAAC,EACxB,CAACA,EAAM,YAAY,GAAG,IAAI,CAAC,EAAG,CAC5B,MAAOP,IAAiB,OAAS,OAAS,KAC5C,EACA,CAACO,EAAM,YAAY,GAAG,IAAI,CAAC,EAAG,CAC5B,MAAOP,IAAiB,OAAS,OAAS,KAC5C,CACF,EAAE","names":["src_exports","__export","DrawerEx","__toCommonJS","import_material","import_react_flexbox","import_react","import_jsx_runtime","DrawerEx","children","heightVariant","subTitle","title","onClose","widthVariant","props","variantBasedProps","event","StyledDrawerContentPaper","StyledEllipsisTypography","prop","theme"]}
+{"version":3,"sources":["../../src/index.ts","../../src/components/Drawer.tsx"],"sourcesContent":["export * from './components'\n","import { Drawer, DrawerProps, Paper, styled, Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { MouseEvent, PropsWithChildren, 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) => event.stopPropagation()}\n        sx={{ width: widthVariant === 'full' ? '100%' : undefined }}\n      >\n        {title || subTitle ?\n          <FlexCol alignItems=\"start\" gap={1}>\n            {title ?\n              <StyledEllipsisTypography variant={'h3'}>{title}</StyledEllipsisTypography>\n            : null}\n            {subTitle ?\n              <Typography variant={'subtitle1'} textTransform=\"none\">\n                {subTitle}\n              </Typography>\n            : null}\n          </FlexCol>\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')]: {\n    width: widthVariant === 'full' ? '100%' : '50%',\n  },\n  [theme.breakpoints.up('md')]: {\n    width: widthVariant === 'full' ? '100%' : '75%',\n  },\n}))\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,sBAA+D;AAC/D,2BAAwB;AACxB,mBAAuD;AA2C7C;AAlCH,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,MAAM;AACJ,QAAM,wBAAoB,sBAAQ,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,4CAAC,0BAAO,QAAQ,OAAO,SAAmB,GAAG,mBAAoB,GAAG,OAElE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,MACX,SAAS,CAAC,UAAU,MAAM,gBAAgB;AAAA,MAC1C,IAAI,EAAE,OAAO,iBAAiB,SAAS,SAAS,OAAU;AAAA,MAEzD;AAAA,iBAAS,WACR,6CAAC,gCAAQ,YAAW,SAAQ,KAAK,GAC9B;AAAA,kBACC,4CAAC,4BAAyB,SAAS,MAAO,iBAAM,IAChD;AAAA,UACD,WACC,4CAAC,8BAAW,SAAS,aAAa,eAAc,QAC7C,oBACH,IACA;AAAA,WACJ,IACA;AAAA,QACD;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,IAAM,+BAA2B,wBAAO,4BAAY,EAAE,MAAM,2BAA2B,CAAC,EAAE,OAAO;AAAA,EAC/F,UAAU;AAAA,EACV,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AACd,EAAE;AAEF,IAAM,+BAA2B,wBAAO,uBAAO;AAAA,EAC7C,MAAM;AAAA,EACN,mBAAmB,CAAC,SAAS,CAAC,CAAC,cAAc,EAAE,SAAS,IAAc;AACxE,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;AAAA,IAC5B,OAAO,iBAAiB,SAAS,SAAS;AAAA,EAC5C;AAAA,EACA,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG;AAAA,IAC5B,OAAO,iBAAiB,SAAS,SAAS;AAAA,EAC5C;AACF,EAAE;","names":[]}

package/dist/neutral/index.js

@@ -1,2 +1,75 @@
-import{Drawer as g,Paper as w,styled as s,Typography as d}from"@mui/material";import{FlexCol as x}from"@xylabs/react-flexbox";import{useMemo as c}from"react";import{jsx as n,jsxs as i}from"react/jsx-runtime";var b=({children:r,heightVariant:a="full",subTitle:o,title:t,onClose:l,widthVariant:e="partial",...u})=>{let h=c(()=>({PaperProps:{sx:{alignItems:"center",background:"transparent",boxShadow:"none",height:a==="full"?"100%":"auto",width:e==="partial"?"auto":"100%"}},onClick:p=>l?.(p,"backdropClick")}),[a,l,e]);return n(g,{anchor:"top",onClose:l,...h,...u,children:i(y,{widthVariant:e,elevation:16,onClick:p=>p.stopPropagation(),sx:{width:e==="full"?"100%":void 0},children:[t||o?i(x,{alignItems:"start",gap:1,children:[t?n(f,{variant:"h3",children:t}):null,o?n(d,{variant:"subtitle1",textTransform:"none",children:o}):null]}):null,r]})})},f=s(d,{name:"StyledEllipsisTypography"})(()=>({maxWidth:"100%",overflowX:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})),y=s(w,{name:"StyledDrawerContentPaper",shouldForwardProp:r=>!["widthVariant"].includes(r)})(({theme:r,widthVariant:a})=>({alignItems:"stretch",borderRadius:`0 0 ${r.shape.borderRadius}px ${r.shape.borderRadius}px`,display:"flex",flexDirection:"column",gap:r.spacing(2),height:"100%",maxWidth:"100%",overflowX:"hidden",padding:r.spacing(3),[r.breakpoints.up("lg")]:{width:a==="full"?"100%":"50%"},[r.breakpoints.up("md")]:{width:a==="full"?"100%":"75%"}}));export{b as DrawerEx};
+// src/components/Drawer.tsx
+import { Drawer, Paper, styled, Typography } from "@mui/material";
+import { FlexCol } from "@xylabs/react-flexbox";
+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: {
+        sx: {
+          alignItems: "center",
+          background: "transparent",
+          boxShadow: "none",
+          height: heightVariant === "full" ? "100%" : "auto",
+          width: widthVariant === "partial" ? "auto" : "100%"
+        }
+      },
+      onClick: (event) => onClose?.(event, "backdropClick")
+    };
+  }, [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
+      ]
+    }
+  ) });
+};
+var StyledEllipsisTypography = styled(Typography, { name: "StyledEllipsisTypography" })(() => ({
+  maxWidth: "100%",
+  overflowX: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}));
+var StyledDrawerContentPaper = styled(Paper, {
+  name: "StyledDrawerContentPaper",
+  shouldForwardProp: (prop) => !["widthVariant"].includes(prop)
+})(({ 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%"
+  }
+}));
+export {
+  DrawerEx
+};
 //# sourceMappingURL=index.js.map

package/dist/neutral/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Drawer.tsx"],"sourcesContent":["import { Drawer, DrawerProps, Paper, styled, Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { MouseEvent, PropsWithChildren, 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) => event.stopPropagation()}\n        sx={{ width: widthVariant === 'full' ? '100%' : undefined }}\n      >\n        {title || subTitle ?\n          <FlexCol alignItems=\"start\" gap={1}>\n            {title ?\n              <StyledEllipsisTypography variant={'h3'}>{title}</StyledEllipsisTypography>\n            : null}\n            {subTitle ?\n              <Typography variant={'subtitle1'} textTransform=\"none\">\n                {subTitle}\n              </Typography>\n            : null}\n          </FlexCol>\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')]: {\n    width: widthVariant === 'full' ? '100%' : '50%',\n  },\n  [theme.breakpoints.up('md')]: {\n    width: widthVariant === 'full' ? '100%' : '75%',\n  },\n}))\n"],"mappings":"AAAA,OAAS,UAAAA,EAAqB,SAAAC,EAAO,UAAAC,EAAQ,cAAAC,MAAkB,gBAC/D,OAAS,WAAAC,MAAe,wBACxB,OAAwC,WAAAC,MAAe,QA2C7C,OAEI,OAAAC,EAFJ,QAAAC,MAAA,oBAlCH,IAAMC,EAAoC,CAAC,CAChD,SAAAC,EACA,cAAAC,EAAgB,OAChB,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,aAAAC,EAAe,UACf,GAAGC,CACL,IAAM,CACJ,IAAMC,EAAoBX,EAAQ,KACzB,CACL,WAAY,CACV,GAAI,CACF,WAAY,SACZ,WAAY,cACZ,UAAW,OACX,OAAQK,IAAkB,OAAS,OAAS,OAC5C,MAAOI,IAAiB,UAAY,OAAS,MAC/C,CACF,EACA,QAAUG,GAAsBJ,IAAUI,EAAO,eAAe,CAClE,GACC,CAACP,EAAeG,EAASC,CAAY,CAAC,EAEzC,OACER,EAACN,EAAA,CAAO,OAAQ,MAAO,QAASa,EAAU,GAAGG,EAAoB,GAAGD,EAElE,SAAAR,EAACW,EAAA,CACC,aAAcJ,EACd,UAAW,GACX,QAAUG,GAAUA,EAAM,gBAAgB,EAC1C,GAAI,CAAE,MAAOH,IAAiB,OAAS,OAAS,MAAU,EAEzD,UAAAF,GAASD,EACRJ,EAACH,EAAA,CAAQ,WAAW,QAAQ,IAAK,EAC9B,UAAAQ,EACCN,EAACa,EAAA,CAAyB,QAAS,KAAO,SAAAP,EAAM,EAChD,KACDD,EACCL,EAACH,EAAA,CAAW,QAAS,YAAa,cAAc,OAC7C,SAAAQ,EACH,EACA,MACJ,EACA,KACDF,GACH,EACF,CAEJ,EAEMU,EAA2BjB,EAAOC,EAAY,CAAE,KAAM,0BAA2B,CAAC,EAAE,KAAO,CAC/F,SAAU,OACV,UAAW,SACX,aAAc,WACd,WAAY,QACd,EAAE,EAEIe,EAA2BhB,EAAOD,EAAO,CAC7C,KAAM,2BACN,kBAAoBmB,GAAS,CAAC,CAAC,cAAc,EAAE,SAASA,CAAc,CACxE,CAAC,EAAiB,CAAC,CAAE,MAAAC,EAAO,aAAAP,CAAa,KAAO,CAC9C,WAAY,UACZ,aAAc,OAAOO,EAAM,MAAM,YAAY,MAAMA,EAAM,MAAM,YAAY,KAC3E,QAAS,OACT,cAAe,SACf,IAAKA,EAAM,QAAQ,CAAC,EACpB,OAAQ,OACR,SAAU,OACV,UAAW,SACX,QAASA,EAAM,QAAQ,CAAC,EACxB,CAACA,EAAM,YAAY,GAAG,IAAI,CAAC,EAAG,CAC5B,MAAOP,IAAiB,OAAS,OAAS,KAC5C,EACA,CAACO,EAAM,YAAY,GAAG,IAAI,CAAC,EAAG,CAC5B,MAAOP,IAAiB,OAAS,OAAS,KAC5C,CACF,EAAE","names":["Drawer","Paper","styled","Typography","FlexCol","useMemo","jsx","jsxs","DrawerEx","children","heightVariant","subTitle","title","onClose","widthVariant","props","variantBasedProps","event","StyledDrawerContentPaper","StyledEllipsisTypography","prop","theme"]}
+{"version":3,"sources":["../../src/components/Drawer.tsx"],"sourcesContent":["import { Drawer, DrawerProps, Paper, styled, Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { MouseEvent, PropsWithChildren, 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) => event.stopPropagation()}\n        sx={{ width: widthVariant === 'full' ? '100%' : undefined }}\n      >\n        {title || subTitle ?\n          <FlexCol alignItems=\"start\" gap={1}>\n            {title ?\n              <StyledEllipsisTypography variant={'h3'}>{title}</StyledEllipsisTypography>\n            : null}\n            {subTitle ?\n              <Typography variant={'subtitle1'} textTransform=\"none\">\n                {subTitle}\n              </Typography>\n            : null}\n          </FlexCol>\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')]: {\n    width: widthVariant === 'full' ? '100%' : '50%',\n  },\n  [theme.breakpoints.up('md')]: {\n    width: widthVariant === 'full' ? '100%' : '75%',\n  },\n}))\n"],"mappings":";AAAA,SAAS,QAAqB,OAAO,QAAQ,kBAAkB;AAC/D,SAAS,eAAe;AACxB,SAAwC,eAAe;AA2C7C,SAEI,KAFJ;AAlCH,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,QAAQ,OAAO,SAAmB,GAAG,mBAAoB,GAAG,OAElE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,MACX,SAAS,CAAC,UAAU,MAAM,gBAAgB;AAAA,MAC1C,IAAI,EAAE,OAAO,iBAAiB,SAAS,SAAS,OAAU;AAAA,MAEzD;AAAA,iBAAS,WACR,qBAAC,WAAQ,YAAW,SAAQ,KAAK,GAC9B;AAAA,kBACC,oBAAC,4BAAyB,SAAS,MAAO,iBAAM,IAChD;AAAA,UACD,WACC,oBAAC,cAAW,SAAS,aAAa,eAAc,QAC7C,oBACH,IACA;AAAA,WACJ,IACA;AAAA,QACD;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,CAAC,SAAS,CAAC,CAAC,cAAc,EAAE,SAAS,IAAc;AACxE,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;AAAA,IAC5B,OAAO,iBAAiB,SAAS,SAAS;AAAA,EAC5C;AAAA,EACA,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG;AAAA,IAC5B,OAAO,iBAAiB,SAAS,SAAS;AAAA,EAC5C;AACF,EAAE;","names":[]}

package/dist/node/index.cjs

@@ -1,2 +1,102 @@
-"use strict";var s=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var f=(r,a)=>{for(var o in a)s(r,o,{get:a[o],enumerable:!0})},y=(r,a,o,l)=>{if(a&&typeof a=="object"||typeof a=="function")for(let e of x(a))!c.call(r,e)&&e!==o&&s(r,e,{get:()=>a[e],enumerable:!(l=w(a,e))||l.enumerable});return r};var P=r=>y(s({},"__esModule",{value:!0}),r);var E={};f(E,{DrawerEx:()=>m});module.exports=P(E);var t=require("@mui/material"),d=require("@xylabs/react-flexbox"),u=require("react"),p=require("react/jsx-runtime"),m=({children:r,heightVariant:a="full",subTitle:o,title:l,onClose:e,widthVariant:i="partial",...h})=>{let g=(0,u.useMemo)(()=>({PaperProps:{sx:{alignItems:"center",background:"transparent",boxShadow:"none",height:a==="full"?"100%":"auto",width:i==="partial"?"auto":"100%"}},onClick:n=>e==null?void 0:e(n,"backdropClick")}),[a,e,i]);return(0,p.jsx)(t.Drawer,{anchor:"top",onClose:e,...g,...h,children:(0,p.jsxs)(v,{widthVariant:i,elevation:16,onClick:n=>n.stopPropagation(),sx:{width:i==="full"?"100%":void 0},children:[l||o?(0,p.jsxs)(d.FlexCol,{alignItems:"start",gap:1,children:[l?(0,p.jsx)(D,{variant:"h3",children:l}):null,o?(0,p.jsx)(t.Typography,{variant:"subtitle1",textTransform:"none",children:o}):null]}):null,r]})})},D=(0,t.styled)(t.Typography,{name:"StyledEllipsisTypography"})(()=>({maxWidth:"100%",overflowX:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})),v=(0,t.styled)(t.Paper,{name:"StyledDrawerContentPaper",shouldForwardProp:r=>!["widthVariant"].includes(r)})(({theme:r,widthVariant:a})=>({alignItems:"stretch",borderRadius:`0 0 ${r.shape.borderRadius}px ${r.shape.borderRadius}px`,display:"flex",flexDirection:"column",gap:r.spacing(2),height:"100%",maxWidth:"100%",overflowX:"hidden",padding:r.spacing(3),[r.breakpoints.up("lg")]:{width:a==="full"?"100%":"50%"},[r.breakpoints.up("md")]:{width:a==="full"?"100%":"75%"}}));0&&(module.exports={DrawerEx});
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  DrawerEx: () => DrawerEx
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/Drawer.tsx
+var import_material = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DrawerEx = ({
+  children,
+  heightVariant = "full",
+  subTitle,
+  title,
+  onClose,
+  widthVariant = "partial",
+  ...props
+}) => {
+  const variantBasedProps = (0, import_react.useMemo)(() => {
+    return {
+      PaperProps: {
+        sx: {
+          alignItems: "center",
+          background: "transparent",
+          boxShadow: "none",
+          height: heightVariant === "full" ? "100%" : "auto",
+          width: widthVariant === "partial" ? "auto" : "100%"
+        }
+      },
+      onClick: (event) => onClose == null ? void 0 : onClose(event, "backdropClick")
+    };
+  }, [heightVariant, onClose, widthVariant]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Drawer, { anchor: "top", onClose, ...variantBasedProps, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    StyledDrawerContentPaper,
+    {
+      widthVariant,
+      elevation: 16,
+      onClick: (event) => event.stopPropagation(),
+      sx: { width: widthVariant === "full" ? "100%" : void 0 },
+      children: [
+        title || subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { alignItems: "start", gap: 1, children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledEllipsisTypography, { variant: "h3", children: title }) : null,
+          subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "subtitle1", textTransform: "none", children: subTitle }) : null
+        ] }) : null,
+        children
+      ]
+    }
+  ) });
+};
+var StyledEllipsisTypography = (0, import_material.styled)(import_material.Typography, { name: "StyledEllipsisTypography" })(() => ({
+  maxWidth: "100%",
+  overflowX: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}));
+var StyledDrawerContentPaper = (0, import_material.styled)(import_material.Paper, {
+  name: "StyledDrawerContentPaper",
+  shouldForwardProp: (prop) => !["widthVariant"].includes(prop)
+})(({ 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%"
+  }
+}));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DrawerEx
+});
 //# sourceMappingURL=index.cjs.map

package/dist/node/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts","../../src/components/Drawer.tsx"],"sourcesContent":["export * from './components'\n","import { Drawer, DrawerProps, Paper, styled, Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { MouseEvent, PropsWithChildren, 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) => event.stopPropagation()}\n        sx={{ width: widthVariant === 'full' ? '100%' : undefined }}\n      >\n        {title || subTitle ?\n          <FlexCol alignItems=\"start\" gap={1}>\n            {title ?\n              <StyledEllipsisTypography variant={'h3'}>{title}</StyledEllipsisTypography>\n            : null}\n            {subTitle ?\n              <Typography variant={'subtitle1'} textTransform=\"none\">\n                {subTitle}\n              </Typography>\n            : null}\n          </FlexCol>\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')]: {\n    width: widthVariant === 'full' ? '100%' : '50%',\n  },\n  [theme.breakpoints.up('md')]: {\n    width: widthVariant === 'full' ? '100%' : '75%',\n  },\n}))\n"],"mappings":"yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,cAAAE,IAAA,eAAAC,EAAAH,GCAA,IAAAI,EAA+D,yBAC/DC,EAAwB,iCACxBC,EAAuD,iBA2C7CC,EAAA,6BAlCGC,EAAoC,CAAC,CAChD,SAAAC,EACA,cAAAC,EAAgB,OAChB,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,aAAAC,EAAe,UACf,GAAGC,CACL,IAAM,CACJ,IAAMC,KAAoB,WAAQ,KACzB,CACL,WAAY,CACV,GAAI,CACF,WAAY,SACZ,WAAY,cACZ,UAAW,OACX,OAAQN,IAAkB,OAAS,OAAS,OAC5C,MAAOI,IAAiB,UAAY,OAAS,MAC/C,CACF,EACA,QAAUG,GAAsBJ,GAAA,YAAAA,EAAUI,EAAO,gBACnD,GACC,CAACP,EAAeG,EAASC,CAAY,CAAC,EAEzC,SACE,OAAC,UAAO,OAAQ,MAAO,QAASD,EAAU,GAAGG,EAAoB,GAAGD,EAElE,oBAACG,EAAA,CACC,aAAcJ,EACd,UAAW,GACX,QAAUG,GAAUA,EAAM,gBAAgB,EAC1C,GAAI,CAAE,MAAOH,IAAiB,OAAS,OAAS,MAAU,EAEzD,UAAAF,GAASD,KACR,QAAC,WAAQ,WAAW,QAAQ,IAAK,EAC9B,UAAAC,KACC,OAACO,EAAA,CAAyB,QAAS,KAAO,SAAAP,EAAM,EAChD,KACDD,KACC,OAAC,cAAW,QAAS,YAAa,cAAc,OAC7C,SAAAA,EACH,EACA,MACJ,EACA,KACDF,GACH,EACF,CAEJ,EAEMU,KAA2B,UAAO,aAAY,CAAE,KAAM,0BAA2B,CAAC,EAAE,KAAO,CAC/F,SAAU,OACV,UAAW,SACX,aAAc,WACd,WAAY,QACd,EAAE,EAEID,KAA2B,UAAO,QAAO,CAC7C,KAAM,2BACN,kBAAoBE,GAAS,CAAC,CAAC,cAAc,EAAE,SAASA,CAAc,CACxE,CAAC,EAAiB,CAAC,CAAE,MAAAC,EAAO,aAAAP,CAAa,KAAO,CAC9C,WAAY,UACZ,aAAc,OAAOO,EAAM,MAAM,YAAY,MAAMA,EAAM,MAAM,YAAY,KAC3E,QAAS,OACT,cAAe,SACf,IAAKA,EAAM,QAAQ,CAAC,EACpB,OAAQ,OACR,SAAU,OACV,UAAW,SACX,QAASA,EAAM,QAAQ,CAAC,EACxB,CAACA,EAAM,YAAY,GAAG,IAAI,CAAC,EAAG,CAC5B,MAAOP,IAAiB,OAAS,OAAS,KAC5C,EACA,CAACO,EAAM,YAAY,GAAG,IAAI,CAAC,EAAG,CAC5B,MAAOP,IAAiB,OAAS,OAAS,KAC5C,CACF,EAAE","names":["src_exports","__export","DrawerEx","__toCommonJS","import_material","import_react_flexbox","import_react","import_jsx_runtime","DrawerEx","children","heightVariant","subTitle","title","onClose","widthVariant","props","variantBasedProps","event","StyledDrawerContentPaper","StyledEllipsisTypography","prop","theme"]}
+{"version":3,"sources":["../../src/index.ts","../../src/components/Drawer.tsx"],"sourcesContent":["export * from './components'\n","import { Drawer, DrawerProps, Paper, styled, Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { MouseEvent, PropsWithChildren, 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) => event.stopPropagation()}\n        sx={{ width: widthVariant === 'full' ? '100%' : undefined }}\n      >\n        {title || subTitle ?\n          <FlexCol alignItems=\"start\" gap={1}>\n            {title ?\n              <StyledEllipsisTypography variant={'h3'}>{title}</StyledEllipsisTypography>\n            : null}\n            {subTitle ?\n              <Typography variant={'subtitle1'} textTransform=\"none\">\n                {subTitle}\n              </Typography>\n            : null}\n          </FlexCol>\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')]: {\n    width: widthVariant === 'full' ? '100%' : '50%',\n  },\n  [theme.breakpoints.up('md')]: {\n    width: widthVariant === 'full' ? '100%' : '75%',\n  },\n}))\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,sBAA+D;AAC/D,2BAAwB;AACxB,mBAAuD;AA2C7C;AAlCH,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,MAAM;AACJ,QAAM,wBAAoB,sBAAQ,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,mCAAU,OAAO;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,eAAe,SAAS,YAAY,CAAC;AAEzC,SACE,4CAAC,0BAAO,QAAQ,OAAO,SAAmB,GAAG,mBAAoB,GAAG,OAElE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,MACX,SAAS,CAAC,UAAU,MAAM,gBAAgB;AAAA,MAC1C,IAAI,EAAE,OAAO,iBAAiB,SAAS,SAAS,OAAU;AAAA,MAEzD;AAAA,iBAAS,WACR,6CAAC,gCAAQ,YAAW,SAAQ,KAAK,GAC9B;AAAA,kBACC,4CAAC,4BAAyB,SAAS,MAAO,iBAAM,IAChD;AAAA,UACD,WACC,4CAAC,8BAAW,SAAS,aAAa,eAAc,QAC7C,oBACH,IACA;AAAA,WACJ,IACA;AAAA,QACD;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,IAAM,+BAA2B,wBAAO,4BAAY,EAAE,MAAM,2BAA2B,CAAC,EAAE,OAAO;AAAA,EAC/F,UAAU;AAAA,EACV,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AACd,EAAE;AAEF,IAAM,+BAA2B,wBAAO,uBAAO;AAAA,EAC7C,MAAM;AAAA,EACN,mBAAmB,CAAC,SAAS,CAAC,CAAC,cAAc,EAAE,SAAS,IAAc;AACxE,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;AAAA,IAC5B,OAAO,iBAAiB,SAAS,SAAS;AAAA,EAC5C;AAAA,EACA,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG;AAAA,IAC5B,OAAO,iBAAiB,SAAS,SAAS;AAAA,EAC5C;AACF,EAAE;","names":[]}

package/dist/node/index.js

@@ -1,2 +1,75 @@
-import{Drawer as g,Paper as w,styled as s,Typography as d}from"@mui/material";import{FlexCol as x}from"@xylabs/react-flexbox";import{useMemo as c}from"react";import{jsx as i,jsxs as n}from"react/jsx-runtime";var S=({children:r,heightVariant:a="full",subTitle:o,title:p,onClose:e,widthVariant:t="partial",...u})=>{let h=c(()=>({PaperProps:{sx:{alignItems:"center",background:"transparent",boxShadow:"none",height:a==="full"?"100%":"auto",width:t==="partial"?"auto":"100%"}},onClick:l=>e==null?void 0:e(l,"backdropClick")}),[a,e,t]);return i(g,{anchor:"top",onClose:e,...h,...u,children:n(y,{widthVariant:t,elevation:16,onClick:l=>l.stopPropagation(),sx:{width:t==="full"?"100%":void 0},children:[p||o?n(x,{alignItems:"start",gap:1,children:[p?i(f,{variant:"h3",children:p}):null,o?i(d,{variant:"subtitle1",textTransform:"none",children:o}):null]}):null,r]})})},f=s(d,{name:"StyledEllipsisTypography"})(()=>({maxWidth:"100%",overflowX:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})),y=s(w,{name:"StyledDrawerContentPaper",shouldForwardProp:r=>!["widthVariant"].includes(r)})(({theme:r,widthVariant:a})=>({alignItems:"stretch",borderRadius:`0 0 ${r.shape.borderRadius}px ${r.shape.borderRadius}px`,display:"flex",flexDirection:"column",gap:r.spacing(2),height:"100%",maxWidth:"100%",overflowX:"hidden",padding:r.spacing(3),[r.breakpoints.up("lg")]:{width:a==="full"?"100%":"50%"},[r.breakpoints.up("md")]:{width:a==="full"?"100%":"75%"}}));export{S as DrawerEx};
+// src/components/Drawer.tsx
+import { Drawer, Paper, styled, Typography } from "@mui/material";
+import { FlexCol } from "@xylabs/react-flexbox";
+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: {
+        sx: {
+          alignItems: "center",
+          background: "transparent",
+          boxShadow: "none",
+          height: heightVariant === "full" ? "100%" : "auto",
+          width: widthVariant === "partial" ? "auto" : "100%"
+        }
+      },
+      onClick: (event) => onClose == null ? void 0 : onClose(event, "backdropClick")
+    };
+  }, [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
+      ]
+    }
+  ) });
+};
+var StyledEllipsisTypography = styled(Typography, { name: "StyledEllipsisTypography" })(() => ({
+  maxWidth: "100%",
+  overflowX: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}));
+var StyledDrawerContentPaper = styled(Paper, {
+  name: "StyledDrawerContentPaper",
+  shouldForwardProp: (prop) => !["widthVariant"].includes(prop)
+})(({ 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%"
+  }
+}));
+export {
+  DrawerEx
+};
 //# sourceMappingURL=index.js.map

package/dist/node/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Drawer.tsx"],"sourcesContent":["import { Drawer, DrawerProps, Paper, styled, Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { MouseEvent, PropsWithChildren, 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) => event.stopPropagation()}\n        sx={{ width: widthVariant === 'full' ? '100%' : undefined }}\n      >\n        {title || subTitle ?\n          <FlexCol alignItems=\"start\" gap={1}>\n            {title ?\n              <StyledEllipsisTypography variant={'h3'}>{title}</StyledEllipsisTypography>\n            : null}\n            {subTitle ?\n              <Typography variant={'subtitle1'} textTransform=\"none\">\n                {subTitle}\n              </Typography>\n            : null}\n          </FlexCol>\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')]: {\n    width: widthVariant === 'full' ? '100%' : '50%',\n  },\n  [theme.breakpoints.up('md')]: {\n    width: widthVariant === 'full' ? '100%' : '75%',\n  },\n}))\n"],"mappings":"AAAA,OAAS,UAAAA,EAAqB,SAAAC,EAAO,UAAAC,EAAQ,cAAAC,MAAkB,gBAC/D,OAAS,WAAAC,MAAe,wBACxB,OAAwC,WAAAC,MAAe,QA2C7C,OAEI,OAAAC,EAFJ,QAAAC,MAAA,oBAlCH,IAAMC,EAAoC,CAAC,CAChD,SAAAC,EACA,cAAAC,EAAgB,OAChB,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,aAAAC,EAAe,UACf,GAAGC,CACL,IAAM,CACJ,IAAMC,EAAoBX,EAAQ,KACzB,CACL,WAAY,CACV,GAAI,CACF,WAAY,SACZ,WAAY,cACZ,UAAW,OACX,OAAQK,IAAkB,OAAS,OAAS,OAC5C,MAAOI,IAAiB,UAAY,OAAS,MAC/C,CACF,EACA,QAAUG,GAAsBJ,GAAA,YAAAA,EAAUI,EAAO,gBACnD,GACC,CAACP,EAAeG,EAASC,CAAY,CAAC,EAEzC,OACER,EAACN,EAAA,CAAO,OAAQ,MAAO,QAASa,EAAU,GAAGG,EAAoB,GAAGD,EAElE,SAAAR,EAACW,EAAA,CACC,aAAcJ,EACd,UAAW,GACX,QAAUG,GAAUA,EAAM,gBAAgB,EAC1C,GAAI,CAAE,MAAOH,IAAiB,OAAS,OAAS,MAAU,EAEzD,UAAAF,GAASD,EACRJ,EAACH,EAAA,CAAQ,WAAW,QAAQ,IAAK,EAC9B,UAAAQ,EACCN,EAACa,EAAA,CAAyB,QAAS,KAAO,SAAAP,EAAM,EAChD,KACDD,EACCL,EAACH,EAAA,CAAW,QAAS,YAAa,cAAc,OAC7C,SAAAQ,EACH,EACA,MACJ,EACA,KACDF,GACH,EACF,CAEJ,EAEMU,EAA2BjB,EAAOC,EAAY,CAAE,KAAM,0BAA2B,CAAC,EAAE,KAAO,CAC/F,SAAU,OACV,UAAW,SACX,aAAc,WACd,WAAY,QACd,EAAE,EAEIe,EAA2BhB,EAAOD,EAAO,CAC7C,KAAM,2BACN,kBAAoBmB,GAAS,CAAC,CAAC,cAAc,EAAE,SAASA,CAAc,CACxE,CAAC,EAAiB,CAAC,CAAE,MAAAC,EAAO,aAAAP,CAAa,KAAO,CAC9C,WAAY,UACZ,aAAc,OAAOO,EAAM,MAAM,YAAY,MAAMA,EAAM,MAAM,YAAY,KAC3E,QAAS,OACT,cAAe,SACf,IAAKA,EAAM,QAAQ,CAAC,EACpB,OAAQ,OACR,SAAU,OACV,UAAW,SACX,QAASA,EAAM,QAAQ,CAAC,EACxB,CAACA,EAAM,YAAY,GAAG,IAAI,CAAC,EAAG,CAC5B,MAAOP,IAAiB,OAAS,OAAS,KAC5C,EACA,CAACO,EAAM,YAAY,GAAG,IAAI,CAAC,EAAG,CAC5B,MAAOP,IAAiB,OAAS,OAAS,KAC5C,CACF,EAAE","names":["Drawer","Paper","styled","Typography","FlexCol","useMemo","jsx","jsxs","DrawerEx","children","heightVariant","subTitle","title","onClose","widthVariant","props","variantBasedProps","event","StyledDrawerContentPaper","StyledEllipsisTypography","prop","theme"]}
+{"version":3,"sources":["../../src/components/Drawer.tsx"],"sourcesContent":["import { Drawer, DrawerProps, Paper, styled, Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { MouseEvent, PropsWithChildren, 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) => event.stopPropagation()}\n        sx={{ width: widthVariant === 'full' ? '100%' : undefined }}\n      >\n        {title || subTitle ?\n          <FlexCol alignItems=\"start\" gap={1}>\n            {title ?\n              <StyledEllipsisTypography variant={'h3'}>{title}</StyledEllipsisTypography>\n            : null}\n            {subTitle ?\n              <Typography variant={'subtitle1'} textTransform=\"none\">\n                {subTitle}\n              </Typography>\n            : null}\n          </FlexCol>\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')]: {\n    width: widthVariant === 'full' ? '100%' : '50%',\n  },\n  [theme.breakpoints.up('md')]: {\n    width: widthVariant === 'full' ? '100%' : '75%',\n  },\n}))\n"],"mappings":";AAAA,SAAS,QAAqB,OAAO,QAAQ,kBAAkB;AAC/D,SAAS,eAAe;AACxB,SAAwC,eAAe;AA2C7C,SAEI,KAFJ;AAlCH,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,mCAAU,OAAO;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,eAAe,SAAS,YAAY,CAAC;AAEzC,SACE,oBAAC,UAAO,QAAQ,OAAO,SAAmB,GAAG,mBAAoB,GAAG,OAElE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,MACX,SAAS,CAAC,UAAU,MAAM,gBAAgB;AAAA,MAC1C,IAAI,EAAE,OAAO,iBAAiB,SAAS,SAAS,OAAU;AAAA,MAEzD;AAAA,iBAAS,WACR,qBAAC,WAAQ,YAAW,SAAQ,KAAK,GAC9B;AAAA,kBACC,oBAAC,4BAAyB,SAAS,MAAO,iBAAM,IAChD;AAAA,UACD,WACC,oBAAC,cAAW,SAAS,aAAa,eAAc,QAC7C,oBACH,IACA;AAAA,WACJ,IACA;AAAA,QACD;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,CAAC,SAAS,CAAC,CAAC,cAAc,EAAE,SAAS,IAAc;AACxE,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;AAAA,IAC5B,OAAO,iBAAiB,SAAS,SAAS;AAAA,EAC5C;AAAA,EACA,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG;AAAA,IAC5B,OAAO,iBAAiB,SAAS,SAAS;AAAA,EAC5C;AACF,EAAE;","names":[]}

package/package.json

@@ -20,8 +20,8 @@
   },
   "devDependencies": {
     "@storybook/react": "^7.6.20",
-    "@xylabs/ts-scripts-yarn3": "^3.11.8",
-    "@xylabs/tsconfig-react": "^3.11.8",
+    "@xylabs/ts-scripts-yarn3": "^3.11.12",
+    "@xylabs/tsconfig-react": "^3.11.12",
     "typescript": "^5.5.2"
   },
   "description": "Common React library for all XYO projects that use React",
@@ -75,6 +75,6 @@
   },
   "sideEffects": false,
   "types": "dist/browser/index.d.ts",
-  "version": "2.78.0",
+  "version": "2.78.1",
   "type": "module"
 }