@gobolt/genesis 0.9.0 → 0.9.2

package/dist/index.cjs

@@ -82204,7 +82204,7 @@ const ScrollableContent$1 = styled.div`
 `;
 const MODAL_WIDTHS = {
   sm: 400,
-  md: 492,
+  md: 540,
   lg: 720
 };
 const Modal = ({
@@ -82260,7 +82260,15 @@ const Modal = ({
               ),
               description && /* @__PURE__ */ jsxRuntime.jsx(Typography, { fontSize: "16px", fontWeight: 400, color: textColor, children: description })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(UtilityButton, { icon: /* @__PURE__ */ jsxRuntime.jsx(HiX, {}), onClick: onClose })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button$1,
+              {
+                icon: /* @__PURE__ */ jsxRuntime.jsx(HiX, { size: 24 }),
+                themeType: "utility",
+                onClick: onClose,
+                style: { padding: "4px", height: "fit-content" }
+              }
+            )
           ]
         }
       )
@@ -87569,14 +87577,15 @@ const getGenesisDrawerClass = ({ borderRadius: borderRadius2, sizing: sizing2 },
   return `
     .ant-drawer-content-wrapper {
       box-shadow: none !important;
+      ${isFloat ? `
+        ${edge}: ${offset2}px !important;
+        top: ${offset2}px !important;
+        height: calc(100% - ${offset2 * 2}px) !important;
+      ` : ""}
     }
 
     .ant-drawer-content {
-      position: relative !important;
       box-shadow: none !important;
-      ${edge}: ${offset2}px !important;
-      top: ${offset2}px !important;
-      height: ${isFloat ? `calc(100% - ${offset2 * 2}px)` : "100%"} !important;
       border-radius: ${isFloat ? borderRadius2.BorderRadiusMd : 0}px !important;
     }
 
@@ -87607,6 +87616,20 @@ const ScrollableContent = styled.div`
   flex: 1;
   display: flex;
   flex-direction: column;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.35);
+  }
 `;
 const getGenesisStickyHeaderClass = ({ colors: colors2 }) => `
   position: sticky;
@@ -87650,6 +87673,34 @@ const SidePanel = ({
   };
   const borderColor = theme?.colors?.surface?.active?.borderColor || "#DFDFDF";
   const textColor = theme?.colors?.onsurface?.active?.textColor || "#3E3E3E";
+  const isFloat = type4 === "float";
+  const floatOffset = 24;
+  const floatEdge = placement === "left" ? "left" : "right";
+  const sharedStyles = {
+    wrapper: { boxShadow: "none" },
+    content: { boxShadow: "none" },
+    body: {
+      padding: 0,
+      overflow: "hidden",
+      display: "flex",
+      flexDirection: "column",
+      height: "100%"
+    },
+    footer: { padding: 0 }
+  };
+  const drawerStyles = isFloat ? {
+    ...sharedStyles,
+    wrapper: {
+      boxShadow: "none",
+      [floatEdge]: `${floatOffset}px`,
+      top: `${floatOffset}px`,
+      height: `calc(100% - ${floatOffset * 2}px)`
+    },
+    content: {
+      borderRadius: "12px",
+      boxShadow: "none"
+    }
+  } : sharedStyles;
   const handleClose = () => {
     onClose();
   };
@@ -87792,6 +87843,7 @@ const SidePanel = ({
       open,
       $type: type4,
       placement,
+      styles: drawerStyles,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(StickyHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(SidePanelHeader, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(ScrollableContent, { children: children2 })

package/dist/index.js

@@ -82186,7 +82186,7 @@ const ScrollableContent$1 = styled.div`
 `;
 const MODAL_WIDTHS = {
   sm: 400,
-  md: 492,
+  md: 540,
   lg: 720
 };
 const Modal = ({
@@ -82242,7 +82242,15 @@ const Modal = ({
               ),
               description && /* @__PURE__ */ jsx(Typography, { fontSize: "16px", fontWeight: 400, color: textColor, children: description })
             ] }),
-            /* @__PURE__ */ jsx(UtilityButton, { icon: /* @__PURE__ */ jsx(HiX, {}), onClick: onClose })
+            /* @__PURE__ */ jsx(
+              Button$1,
+              {
+                icon: /* @__PURE__ */ jsx(HiX, { size: 24 }),
+                themeType: "utility",
+                onClick: onClose,
+                style: { padding: "4px", height: "fit-content" }
+              }
+            )
           ]
         }
       )
@@ -87551,14 +87559,15 @@ const getGenesisDrawerClass = ({ borderRadius: borderRadius2, sizing: sizing2 },
   return `
     .ant-drawer-content-wrapper {
       box-shadow: none !important;
+      ${isFloat ? `
+        ${edge}: ${offset2}px !important;
+        top: ${offset2}px !important;
+        height: calc(100% - ${offset2 * 2}px) !important;
+      ` : ""}
     }
 
     .ant-drawer-content {
-      position: relative !important;
       box-shadow: none !important;
-      ${edge}: ${offset2}px !important;
-      top: ${offset2}px !important;
-      height: ${isFloat ? `calc(100% - ${offset2 * 2}px)` : "100%"} !important;
       border-radius: ${isFloat ? borderRadius2.BorderRadiusMd : 0}px !important;
     }
 
@@ -87589,6 +87598,20 @@ const ScrollableContent = styled.div`
   flex: 1;
   display: flex;
   flex-direction: column;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.35);
+  }
 `;
 const getGenesisStickyHeaderClass = ({ colors: colors2 }) => `
   position: sticky;
@@ -87632,6 +87655,34 @@ const SidePanel = ({
   };
   const borderColor = theme?.colors?.surface?.active?.borderColor || "#DFDFDF";
   const textColor = theme?.colors?.onsurface?.active?.textColor || "#3E3E3E";
+  const isFloat = type4 === "float";
+  const floatOffset = 24;
+  const floatEdge = placement === "left" ? "left" : "right";
+  const sharedStyles = {
+    wrapper: { boxShadow: "none" },
+    content: { boxShadow: "none" },
+    body: {
+      padding: 0,
+      overflow: "hidden",
+      display: "flex",
+      flexDirection: "column",
+      height: "100%"
+    },
+    footer: { padding: 0 }
+  };
+  const drawerStyles = isFloat ? {
+    ...sharedStyles,
+    wrapper: {
+      boxShadow: "none",
+      [floatEdge]: `${floatOffset}px`,
+      top: `${floatOffset}px`,
+      height: `calc(100% - ${floatOffset * 2}px)`
+    },
+    content: {
+      borderRadius: "12px",
+      boxShadow: "none"
+    }
+  } : sharedStyles;
   const handleClose = () => {
     onClose();
   };
@@ -87774,6 +87825,7 @@ const SidePanel = ({
       open,
       $type: type4,
       placement,
+      styles: drawerStyles,
       children: [
         /* @__PURE__ */ jsx(StickyHeader, { children: /* @__PURE__ */ jsx(SidePanelHeader, {}) }),
         /* @__PURE__ */ jsx(ScrollableContent, { children: children2 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gobolt/genesis",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "description": "genesis design system",
   "author": "gobolt",
   "license": "MIT",