@gobolt/genesis 0.9.1 → 0.9.2

package/dist/index.cjs

@@ -87577,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;
     }
 
@@ -87615,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;
@@ -87658,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();
   };
@@ -87800,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

@@ -87559,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;
     }
 
@@ -87597,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;
@@ -87640,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();
   };
@@ -87782,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.1",
+  "version": "0.9.2",
   "description": "genesis design system",
   "author": "gobolt",
   "license": "MIT",