@ncino/styles 10.4.0 → 10.5.1

package/dist/gator/themes/MUIGatorTheme.js

@@ -7,24 +7,25 @@ import * as h from "./components/button.js";
 import * as p from "./components/card.js";
 import * as f from "./components/checkbox.js";
 import * as d from "./components/chip.js";
-import * as y from "./components/dialog.js";
-import * as _ from "./components/fab.js";
-import * as b from "./components/form-control.js";
-import * as u from "./components/menu.js";
-import * as F from "./components/radio.js";
-import * as W from "./components/select.js";
-import * as S from "./components/switch.js";
-import * as v from "./components/table.js";
-import * as x from "./components/tabs.js";
-import * as z from "./components/text-field.js";
-import * as H from "./components/toggle-button.js";
-import { createTheme as O } from "@mui/material/styles";
+import * as _ from "./components/dialog.js";
+import * as y from "./components/drawer.js";
+import * as b from "./components/fab.js";
+import * as u from "./components/form-control.js";
+import * as F from "./components/menu.js";
+import * as W from "./components/radio.js";
+import * as S from "./components/select.js";
+import * as v from "./components/switch.js";
+import * as x from "./components/table.js";
+import * as z from "./components/tabs.js";
+import * as H from "./components/text-field.js";
+import * as O from "./components/toggle-button.js";
+import { createTheme as B } from "@mui/material/styles";
 /* empty css                              */
 /* empty css                             */
-import { gatorShadows as B, gatorBorderRadius as k, gatorSpacingScale as w, gatorTypography as t, gatorLineHeightScale as e, gatorFontSizeScale as n, gatorColorValues as o } from "./utils/themeConfig.js";
-const M = /* @__PURE__ */ Object.assign({ "./components/accordion.ts": s, "./components/alert.ts": m, "./components/autocomplete.ts": l, "./components/avatar.ts": g, "./components/badge.ts": c, "./components/button.ts": h, "./components/card.ts": p, "./components/checkbox.ts": f, "./components/chip.ts": d, "./components/dialog.ts": y, "./components/fab.ts": _, "./components/form-control.ts": b, "./components/menu.ts": u, "./components/radio.ts": F, "./components/select.ts": W, "./components/switch.ts": S, "./components/table.ts": v, "./components/tabs.ts": x, "./components/text-field.ts": z, "./components/toggle-button.ts": H }), T = Object.values(M).reduce((i, r) => (Object.keys(r).forEach((a) => {
+import { gatorShadows as k, gatorBorderRadius as w, gatorSpacingScale as M, gatorTypography as t, gatorLineHeightScale as e, gatorFontSizeScale as n, gatorColorValues as o } from "./utils/themeConfig.js";
+const T = /* @__PURE__ */ Object.assign({ "./components/accordion.ts": s, "./components/alert.ts": m, "./components/autocomplete.ts": l, "./components/avatar.ts": g, "./components/badge.ts": c, "./components/button.ts": h, "./components/card.ts": p, "./components/checkbox.ts": f, "./components/chip.ts": d, "./components/dialog.ts": _, "./components/drawer.ts": y, "./components/fab.ts": b, "./components/form-control.ts": u, "./components/menu.ts": F, "./components/radio.ts": W, "./components/select.ts": S, "./components/switch.ts": v, "./components/table.ts": x, "./components/tabs.ts": z, "./components/text-field.ts": H, "./components/toggle-button.ts": O }), j = Object.values(T).reduce((i, r) => (Object.keys(r).forEach((a) => {
   a.startsWith("MUIGator") && a.includes("Override") && Object.assign(i, r[a]);
-}), i), {}), j = {
+}), i), {}), C = {
   palette: {
     mode: "light",
     primary: o.brand,
@@ -155,15 +156,15 @@ const M = /* @__PURE__ */ Object.assign({ "./components/accordion.ts": s, "./com
       letterSpacing: 0
     }
   },
-  spacing: (i) => w[i] ?? `${i * 8}px`,
+  spacing: (i) => M[i] ?? `${i * 8}px`,
   shape: {
-    borderRadius: k.xsmall
+    borderRadius: w.xsmall
   },
-  shadows: B,
+  shadows: k,
   // Component-specific default props
   components: {
     // Component overrides
-    ...T,
+    ...j,
     // Additional component overrides not in separate files
     MuiLink: {
       styleOverrides: {
@@ -178,8 +179,8 @@ const M = /* @__PURE__ */ Object.assign({ "./components/accordion.ts": s, "./com
       }
     }
   }
-}, I = O(j);
+}, U = B(C);
 export {
-  I as default,
-  I as gatorMUITheme
+  U as default,
+  U as gatorMUITheme
 };

package/dist/gator/themes/components/button.js

@@ -16,6 +16,16 @@ const t = {
           boxShadow: o.shadows[2]
         }
       }),
+      startIcon: ({ theme: o }) => ({
+        marginRight: o.spacing(5),
+        height: "18px",
+        width: "18px"
+      }),
+      endIcon: ({ theme: o }) => ({
+        marginLeft: o.spacing(5),
+        height: "18px",
+        width: "18px"
+      }),
       sizeLarge: ({ theme: o }) => ({
         height: "3rem",
         minWidth: "6rem",

package/dist/gator/themes/components/drawer.js

@@ -0,0 +1,67 @@
+import { gatorTypography as r, gatorFontSizeScale as a } from "../utils/themeConfig.js";
+const n = {
+  MuiDrawer: {
+    styleOverrides: {
+      root: {
+        ".MuiModal-backdrop": {
+          backgroundColor: "transparent"
+        }
+      },
+      paper: ({ theme: o }) => ({
+        background: o.palette.background.default,
+        backgroundImage: "none",
+        width: "29.5rem",
+        display: "flex",
+        flexDirection: "column",
+        boxShadow: o.shadows[4],
+        border: "none",
+        // Bottom anchor
+        "&.MuiDrawer-paperAnchorBottom": {
+          width: "100%",
+          height: "29.5rem"
+        },
+        // Top anchor
+        "&.MuiDrawer-paperAnchorTop": {
+          width: "100%",
+          height: "29.5rem"
+        },
+        // -------------------------------------------------------
+        // Panel sub-region slots
+        // Mirror gator-panel-header / gator-panel-content / gator-panel-footer
+        // Usage: add className="gator-panel-header" etc. to your child elements
+        // -------------------------------------------------------
+        "& .gator-panel-header": {
+          borderBottom: `1px solid ${o.palette.divider}`,
+          padding: o.spacing(8),
+          fontSize: a.heading3,
+          fontWeight: r.fontWeight.semiBold,
+          fontFamily: r.fontFamily.headings,
+          flexShrink: 0
+        },
+        "& .gator-panel-content": {
+          flex: "1 0 0",
+          display: "flex",
+          flexDirection: "column",
+          overflowY: "auto",
+          padding: o.spacing(8),
+          gap: o.spacing(8)
+        },
+        "& .gator-panel-footer": {
+          padding: o.spacing(8),
+          background: o.palette.background.paper,
+          flexShrink: 0
+        }
+      }),
+      // Docked variant (persistent / permanent) — suppress shadow
+      // Higher specificity (.MuiDrawer-docked .MuiDrawer-paper) wins over anchor classes
+      docked: {
+        "& .MuiDrawer-paper": {
+          boxShadow: "none"
+        }
+      }
+    }
+  }
+};
+export {
+  n as MUIGatorDrawerOverrides
+};

package/dist/types/gator/themes/components/button.d.ts

@@ -16,6 +16,16 @@ export declare const MUIGatorButtonOverrides: {
                     boxShadow: any;
                 };
             };
+            startIcon: ({ theme }: any) => {
+                marginRight: any;
+                height: string;
+                width: string;
+            };
+            endIcon: ({ theme }: any) => {
+                marginLeft: any;
+                height: string;
+                width: string;
+            };
             sizeLarge: ({ theme }: any) => {
                 height: string;
                 minWidth: string;

package/dist/types/gator/themes/components/drawer.d.ts

@@ -0,0 +1,56 @@
+export declare const MUIGatorDrawerOverrides: {
+    MuiDrawer: {
+        styleOverrides: {
+            root: {
+                '.MuiModal-backdrop': {
+                    backgroundColor: string;
+                };
+            };
+            paper: ({ theme }: {
+                theme: any;
+            }) => {
+                background: any;
+                backgroundImage: string;
+                width: string;
+                display: string;
+                flexDirection: string;
+                boxShadow: any;
+                border: string;
+                '&.MuiDrawer-paperAnchorBottom': {
+                    width: string;
+                    height: string;
+                };
+                '&.MuiDrawer-paperAnchorTop': {
+                    width: string;
+                    height: string;
+                };
+                '& .gator-panel-header': {
+                    borderBottom: string;
+                    padding: any;
+                    fontSize: string;
+                    fontWeight: number;
+                    fontFamily: string;
+                    flexShrink: number;
+                };
+                '& .gator-panel-content': {
+                    flex: string;
+                    display: string;
+                    flexDirection: string;
+                    overflowY: string;
+                    padding: any;
+                    gap: any;
+                };
+                '& .gator-panel-footer': {
+                    padding: any;
+                    background: any;
+                    flexShrink: number;
+                };
+            };
+            docked: {
+                '& .MuiDrawer-paper': {
+                    boxShadow: string;
+                };
+            };
+        };
+    };
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ncino/styles",
   "author": "nCino",
-  "version": "10.4.0",
+  "version": "10.5.1",
   "description": "nCino Shared Web Component Styling",
   "license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
   "publishConfig": {