@solostylist/ui-kit 1.0.170 → 1.0.171

package/dist/s-theme-demo/s-theme-demo.js

@@ -1,17 +1,17 @@
 import { j as e } from "../jsx-runtime-OVHDjVDe.js";
 import * as g from "react";
-import { Box as t, Typography as r, Stack as o, Card as h, CardContent as x, Divider as d, Alert as m, Chip as s, Paper as p } from "@mui/material";
+import { Box as t, Typography as r, Stack as o, Card as d, CardContent as h, Divider as m, Alert as x, Chip as s, Paper as j } from "@mui/material";
 import { SButton as n } from "../s-button/s-button.js";
-import { SForm as v } from "../s-form/s-form.js";
-import { STextField as u } from "../s-text-field/s-text-field.js";
-import y from "../s-theme-switch/s-theme-switch.js";
-import { c as j } from "../createSvgIcon-DxwgGAVe.js";
+import { SForm as y } from "../s-form/s-form.js";
+import { STextField as p } from "../s-text-field/s-text-field.js";
+import v from "../s-theme-switch/s-theme-switch.js";
+import { c as u } from "../createSvgIcon-DxwgGAVe.js";
 import { F as b } from "../Favorite-DS5Gpq2s.js";
-const f = j(/* @__PURE__ */ e.jsx("path", {
+const f = u(/* @__PURE__ */ e.jsx("path", {
   d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"
-}), "Add"), S = j(/* @__PURE__ */ e.jsx("path", {
+}), "Add"), S = u(/* @__PURE__ */ e.jsx("path", {
   d: "M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92"
-}), "Share"), w = j(/* @__PURE__ */ e.jsx("path", {
+}), "Share"), w = u(/* @__PURE__ */ e.jsx("path", {
   d: "M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
 }), "Star"), B = () => {
   const c = [
@@ -22,7 +22,7 @@ const f = j(/* @__PURE__ */ e.jsx("path", {
     { name: "Error", color: "error.main" },
     { name: "Info", color: "info.main" }
   ];
-  return /* @__PURE__ */ e.jsx(h, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(x, { children: [
+  return /* @__PURE__ */ e.jsx(d, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(h, { children: [
     /* @__PURE__ */ e.jsx(r, { variant: "h5", gutterBottom: !0, children: "Color Palette" }),
     /* @__PURE__ */ e.jsx(o, { direction: "row", flexWrap: "wrap", gap: 2, children: c.map((i) => /* @__PURE__ */ e.jsxs(t, { sx: { textAlign: "center" }, children: [
       /* @__PURE__ */ e.jsx(
@@ -70,7 +70,7 @@ const f = j(/* @__PURE__ */ e.jsx("path", {
       )
     ] })
   ] }) });
-}, T = () => /* @__PURE__ */ e.jsx(h, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(x, { children: [
+}, T = () => /* @__PURE__ */ e.jsx(d, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(h, { children: [
   /* @__PURE__ */ e.jsx(r, { variant: "h5", gutterBottom: !0, children: "Typography System" }),
   /* @__PURE__ */ e.jsx(r, { variant: "body2", color: "text.secondary", gutterBottom: !0, sx: { mb: 3 }, children: "Complete typography scale using Outfit font family with Material-UI variants" }),
   /* @__PURE__ */ e.jsxs(o, { spacing: 3, children: [
@@ -78,55 +78,55 @@ const f = j(/* @__PURE__ */ e.jsx("path", {
       /* @__PURE__ */ e.jsx(r, { variant: "h6", color: "primary", gutterBottom: !0, children: "Headings" }),
       /* @__PURE__ */ e.jsxs(o, { spacing: 2, children: [
         /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "h1", component: "div", gutterBottom: !0, children: "Display Large" }),
+          /* @__PURE__ */ e.jsx(r, { variant: "h1", gutterBottom: !0, children: "Display Large" }),
           /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "h1 - 3.5rem (56px), Weight 600 - Used for hero sections and primary headings" })
         ] }),
         /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "h2", component: "div", gutterBottom: !0, children: "Display Medium" }),
+          /* @__PURE__ */ e.jsx(r, { variant: "h2", gutterBottom: !0, children: "Display Medium" }),
           /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "h2 - 2.75rem (44px), Weight 600 - Used for page titles and major sections" })
         ] }),
         /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "h3", component: "div", gutterBottom: !0, children: "Display Small" }),
+          /* @__PURE__ */ e.jsx(r, { variant: "h3", gutterBottom: !0, children: "Display Small" }),
           /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "h3 - 2.25rem (36px), Weight 600 - Used for large section headings" })
         ] }),
         /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "h4", component: "div", gutterBottom: !0, children: "Headline Large" }),
+          /* @__PURE__ */ e.jsx(r, { variant: "h4", gutterBottom: !0, children: "Headline Large" }),
           /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "h4 - 2rem (32px), Weight 600 - Used for card titles and content headings" })
         ] }),
         /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "h5", component: "div", gutterBottom: !0, children: "Headline Medium" }),
+          /* @__PURE__ */ e.jsx(r, { variant: "h5", gutterBottom: !0, children: "Headline Medium" }),
           /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "h5 - 1.5rem (24px), Weight 600 - Used for subsection headings" })
         ] }),
         /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "h6", component: "div", gutterBottom: !0, children: "Headline Small" }),
+          /* @__PURE__ */ e.jsx(r, { variant: "h6", gutterBottom: !0, children: "Headline Small" }),
           /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "h6 - 1.25rem (20px), Weight 600 - Used for component titles and labels" })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ e.jsx(d, {}),
+    /* @__PURE__ */ e.jsx(m, {}),
     /* @__PURE__ */ e.jsxs(t, { children: [
       /* @__PURE__ */ e.jsx(r, { variant: "h6", color: "primary", gutterBottom: !0, children: "Body Text" }),
       /* @__PURE__ */ e.jsxs(o, { spacing: 2, children: [
         /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "body1", component: "div", gutterBottom: !0, children: "Body Large - The primary text style used for most content. It provides excellent readability and is suitable for paragraphs, descriptions, and general text content. This is the main body text variant." }),
+          /* @__PURE__ */ e.jsx(r, { variant: "body1", gutterBottom: !0, children: "Body Large - The primary text style used for most content. It provides excellent readability and is suitable for paragraphs, descriptions, and general text content. This is the main body text variant." }),
           /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "body1 - 1rem (16px), Weight 400, Line height 1.5" })
         ] }),
         /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "body2", component: "div", gutterBottom: !0, children: "Body Medium - Secondary text style, often used for supporting information, captions, and less prominent content elements. Slightly smaller than body1 for hierarchy." }),
+          /* @__PURE__ */ e.jsx(r, { variant: "body2", gutterBottom: !0, children: "Body Medium - Secondary text style, often used for supporting information, captions, and less prominent content elements. Slightly smaller than body1 for hierarchy." }),
           /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "body2 - 0.875rem (14px), Weight 400, Line height 1.43" })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ e.jsx(d, {}),
+    /* @__PURE__ */ e.jsx(m, {}),
     /* @__PURE__ */ e.jsxs(t, { children: [
       /* @__PURE__ */ e.jsx(r, { variant: "h6", color: "primary", gutterBottom: !0, children: "Labels & Supporting Text" }),
       /* @__PURE__ */ e.jsxs(o, { spacing: 2, children: [
         /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "subtitle1", component: "div", gutterBottom: !0, children: "Subtitle Large - Used for prominent secondary text" }),
+          /* @__PURE__ */ e.jsx(r, { variant: "subtitle1", gutterBottom: !0, children: "Subtitle Large - Used for prominent secondary text" }),
           /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "subtitle1 - 1rem (16px), Weight 500" })
         ] }),
         /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", component: "div", gutterBottom: !0, children: "Subtitle Small - Used for form labels and secondary headings" }),
+          /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Subtitle Small - Used for form labels and secondary headings" }),
           /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "subtitle2 - 0.875rem (14px), Weight 500" })
         ] }),
         /* @__PURE__ */ e.jsxs(t, { children: [
@@ -139,31 +139,7 @@ const f = j(/* @__PURE__ */ e.jsx("path", {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ e.jsx(d, {}),
-    /* @__PURE__ */ e.jsxs(t, { children: [
-      /* @__PURE__ */ e.jsx(r, { variant: "h6", color: "primary", gutterBottom: !0, children: "Interactive & Special Text" }),
-      /* @__PURE__ */ e.jsxs(o, { spacing: 2, children: [
-        /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(r, { variant: "button", component: "div", gutterBottom: !0, children: "Button Text - All Caps Button Labels" }),
-          /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "button - 0.875rem (14px), Weight 500, Uppercase" })
-        ] }),
-        /* @__PURE__ */ e.jsxs(t, { children: [
-          /* @__PURE__ */ e.jsx(
-            r,
-            {
-              variant: "body2",
-              component: "a",
-              href: "#",
-              sx: { color: "primary.main", textDecoration: "none", "&:hover": { textDecoration: "underline" } },
-              gutterBottom: !0,
-              children: "Link Text - Interactive text elements"
-            }
-          ),
-          /* @__PURE__ */ e.jsx(r, { variant: "caption", color: "text.secondary", children: "Links inherit body variants with primary color and hover effects" })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ e.jsx(d, {}),
+    /* @__PURE__ */ e.jsx(m, {}),
     /* @__PURE__ */ e.jsxs(t, { children: [
       /* @__PURE__ */ e.jsx(r, { variant: "h6", color: "primary", gutterBottom: !0, children: "Text Color Variants" }),
       /* @__PURE__ */ e.jsxs(o, { spacing: 1, children: [
@@ -179,7 +155,7 @@ const f = j(/* @__PURE__ */ e.jsx("path", {
   ] })
 ] }) }), C = () => {
   const [c, i] = g.useState("");
-  return /* @__PURE__ */ e.jsx(h, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(x, { children: [
+  return /* @__PURE__ */ e.jsx(d, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(h, { children: [
     /* @__PURE__ */ e.jsx(r, { variant: "h5", gutterBottom: !0, children: "SoloStylist Components" }),
     /* @__PURE__ */ e.jsxs(o, { spacing: 4, children: [
       /* @__PURE__ */ e.jsxs(t, { children: [
@@ -246,9 +222,9 @@ const f = j(/* @__PURE__ */ e.jsx("path", {
       ] }),
       /* @__PURE__ */ e.jsxs(t, { children: [
         /* @__PURE__ */ e.jsx(r, { variant: "h6", gutterBottom: !0, children: "Form Components with SForm" }),
-        /* @__PURE__ */ e.jsx(v, { label: "Sample Form", required: !0, children: /* @__PURE__ */ e.jsxs(o, { spacing: 3, children: [
+        /* @__PURE__ */ e.jsx(y, { label: "Sample Form", required: !0, children: /* @__PURE__ */ e.jsxs(o, { spacing: 3, children: [
           /* @__PURE__ */ e.jsx(
-            u,
+            p,
             {
               label: "Enhanced Text Field",
               value: c,
@@ -259,7 +235,7 @@ const f = j(/* @__PURE__ */ e.jsx("path", {
             }
           ),
           /* @__PURE__ */ e.jsx(
-            u,
+            p,
             {
               label: "Password Field",
               type: "password",
@@ -269,7 +245,7 @@ const f = j(/* @__PURE__ */ e.jsx("path", {
             }
           ),
           /* @__PURE__ */ e.jsx(
-            u,
+            p,
             {
               label: "Multiline Text",
               multiline: !0,
@@ -285,21 +261,21 @@ const f = j(/* @__PURE__ */ e.jsx("path", {
         /* @__PURE__ */ e.jsx(r, { variant: "h6", gutterBottom: !0, children: "Theme Controls" }),
         /* @__PURE__ */ e.jsx(o, { spacing: 2, children: /* @__PURE__ */ e.jsxs(t, { children: [
           /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", gutterBottom: !0, children: "Theme Switch Component" }),
-          /* @__PURE__ */ e.jsx(y, {})
+          /* @__PURE__ */ e.jsx(v, {})
         ] }) })
       ] })
     ] })
   ] }) });
-}, I = () => /* @__PURE__ */ e.jsx(h, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(x, { children: [
+}, I = () => /* @__PURE__ */ e.jsx(d, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(h, { children: [
   /* @__PURE__ */ e.jsx(r, { variant: "h5", gutterBottom: !0, children: "Interactive Components" }),
   /* @__PURE__ */ e.jsxs(o, { spacing: 3, children: [
     /* @__PURE__ */ e.jsxs(t, { children: [
       /* @__PURE__ */ e.jsx(r, { variant: "h6", gutterBottom: !0, children: "Alerts" }),
       /* @__PURE__ */ e.jsxs(o, { spacing: 2, children: [
-        /* @__PURE__ */ e.jsx(m, { severity: "success", children: "Success alert - Operation completed successfully!" }),
-        /* @__PURE__ */ e.jsx(m, { severity: "warning", children: "Warning alert - Please review your input." }),
-        /* @__PURE__ */ e.jsx(m, { severity: "error", children: "Error alert - Something went wrong." }),
-        /* @__PURE__ */ e.jsx(m, { severity: "info", children: "Info alert - Here's some useful information." })
+        /* @__PURE__ */ e.jsx(x, { severity: "success", children: "Success alert - Operation completed successfully!" }),
+        /* @__PURE__ */ e.jsx(x, { severity: "warning", children: "Warning alert - Please review your input." }),
+        /* @__PURE__ */ e.jsx(x, { severity: "error", children: "Error alert - Something went wrong." }),
+        /* @__PURE__ */ e.jsx(x, { severity: "info", children: "Info alert - Here's some useful information." })
       ] })
     ] }),
     /* @__PURE__ */ e.jsxs(t, { children: [
@@ -330,12 +306,12 @@ const f = j(/* @__PURE__ */ e.jsx("path", {
   ] })
 ] }) }), W = () => {
   const c = [0, 1, 2, 4, 6, 8, 12, 16, 24];
-  return /* @__PURE__ */ e.jsx(h, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(x, { children: [
+  return /* @__PURE__ */ e.jsx(d, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ e.jsxs(h, { children: [
     /* @__PURE__ */ e.jsx(r, { variant: "h5", gutterBottom: !0, children: "Shadow System" }),
     /* @__PURE__ */ e.jsx(r, { variant: "body2", color: "text.secondary", gutterBottom: !0, children: "Material-UI elevation system with custom shadows" }),
     /* @__PURE__ */ e.jsx(o, { direction: "row", flexWrap: "wrap", gap: 3, sx: { mt: 2 }, children: c.map((i) => /* @__PURE__ */ e.jsxs(t, { sx: { textAlign: "center" }, children: [
       /* @__PURE__ */ e.jsx(
-        p,
+        j,
         {
           elevation: i,
           sx: {
@@ -355,34 +331,21 @@ const f = j(/* @__PURE__ */ e.jsx("path", {
         i
       ] })
     ] }, i)) }),
-    /* @__PURE__ */ e.jsx(d, { sx: { my: 3 } }),
+    /* @__PURE__ */ e.jsx(m, { sx: { my: 3 } }),
     /* @__PURE__ */ e.jsx(r, { variant: "h6", gutterBottom: !0, children: "Custom Shadow Effects" }),
-    /* @__PURE__ */ e.jsxs(o, { direction: "row", spacing: 3, flexWrap: "wrap", gap: 2, children: [
-      /* @__PURE__ */ e.jsx(
-        p,
-        {
-          sx: {
-            p: 3,
-            borderRadius: 2,
-            boxShadow: "var(--s-palette-baseShadow)"
-          },
-          children: /* @__PURE__ */ e.jsx(r, { variant: "body2", children: "Custom Base Shadow" })
-        }
-      ),
-      /* @__PURE__ */ e.jsx(
-        p,
-        {
-          sx: {
-            p: 3,
-            borderRadius: 2,
-            boxShadow: (i) => i.palette.mode === "light" ? "0 4px 20px rgba(0,0,0,0.1)" : "0 4px 20px rgba(0,0,0,0.5)"
-          },
-          children: /* @__PURE__ */ e.jsx(r, { variant: "body2", children: "Theme-aware Shadow" })
-        }
-      )
-    ] })
+    /* @__PURE__ */ e.jsx(o, { direction: "row", spacing: 3, flexWrap: "wrap", gap: 2, children: /* @__PURE__ */ e.jsx(
+      j,
+      {
+        sx: {
+          p: 3,
+          borderRadius: 2,
+          boxShadow: "var(--s-palette-baseShadow)"
+        },
+        children: /* @__PURE__ */ e.jsx(r, { variant: "body2", children: "Custom Base Shadow" })
+      }
+    ) })
   ] }) });
-}, A = ({
+}, V = ({
   title: c = "SoloStylist UI Kit Theme Demo",
   compact: i = !1,
   sections: a = ["colors", "typography", "components", "forms", "interactive", "shadows"]
@@ -424,9 +387,9 @@ Features:
 - Interactive Material-UI components
 - Shadow system visualization
 - Responsive layout
-- Professional styling`, displayName: "sthemedemo", props: { title: { defaultValue: { value: "SoloStylist UI Kit Theme Demo" }, description: "Optional title for the demo", name: "title", required: !1, type: { name: "string" } }, compact: { defaultValue: { value: "false" }, description: "Compact layout mode", name: "compact", required: !1, type: { name: "boolean" } }, sections: { defaultValue: { value: "['colors', 'typography', 'components', 'forms', 'interactive', 'shadows']" }, description: "Additional sections to show", name: "sections", required: !1, type: { name: '("typography" | "components" | "shadows" | "colors" | "forms" | "interactive")[]' } } } };
+- Professional styling`, displayName: "sthemedemo", props: { title: { defaultValue: { value: "SoloStylist UI Kit Theme Demo" }, description: "Optional title for the demo", name: "title", required: !1, type: { name: "string" } }, compact: { defaultValue: { value: "false" }, description: "Compact layout mode", name: "compact", required: !1, type: { name: "boolean" } }, sections: { defaultValue: { value: "['colors', 'typography', 'components', 'forms', 'interactive', 'shadows']" }, description: "Additional sections to show", name: "sections", required: !1, type: { name: '("typography" | "components" | "colors" | "shadows" | "forms" | "interactive")[]' } } } };
 } catch {
 }
 export {
-  A as default
+  V as default
 };

package/dist/s-theme-provider/s-theme-provider.js

@@ -57,11 +57,11 @@ const o = ({
 };
 o.displayName = "SThemeProvider";
 try {
-  o.displayName = "SThemeProvider", o.__docgenInfo = { description: "Central theme provider for the design system.", displayName: "SThemeProvider", props: { children: { defaultValue: null, description: "Child components to receive theme context", name: "children", required: !0, type: { name: "ReactNode" } }, disableCustomTheme: { defaultValue: null, description: "Disable custom theme for testing/docs (falls back to no theme)", name: "disableCustomTheme", required: !1, type: { name: "boolean" } }, themeComponents: { defaultValue: null, description: "Additional theme component overrides", name: "themeComponents", required: !1, type: { name: 'Components<Omit<Theme, "components">>' } }, defaultMode: { defaultValue: { value: "system" }, description: "Default color mode (defaults to 'system')", name: "defaultMode", required: !1, type: { name: "enum", value: [{ value: '"light"' }, { value: '"dark"' }, { value: '"system"' }] } }, theme: { defaultValue: null, description: "Custom theme object to merge with internal theme", name: "theme", required: !1, type: { name: "Theme" } } } };
+  o.displayName = "SThemeProvider", o.__docgenInfo = { description: "Central theme provider for the design system.", displayName: "SThemeProvider", props: { children: { defaultValue: null, description: "Child components to receive theme context", name: "children", required: !0, type: { name: "ReactNode" } }, disableCustomTheme: { defaultValue: null, description: "Disable custom theme for testing/docs (falls back to no theme)", name: "disableCustomTheme", required: !1, type: { name: "boolean" } }, themeComponents: { defaultValue: null, description: "Additional theme component overrides", name: "themeComponents", required: !1, type: { name: 'Components<Omit<Theme, "components">>' } }, defaultMode: { defaultValue: { value: "system" }, description: "Default color mode (defaults to 'system')", name: "defaultMode", required: !1, type: { name: "enum", value: [{ value: '"dark"' }, { value: '"light"' }, { value: '"system"' }] } }, theme: { defaultValue: null, description: "Custom theme object to merge with internal theme", name: "theme", required: !1, type: { name: "Theme" } } } };
 } catch {
 }
 try {
-  sthemeprovider.displayName = "sthemeprovider", sthemeprovider.__docgenInfo = { description: "Central theme provider for the design system.", displayName: "sthemeprovider", props: { children: { defaultValue: null, description: "Child components to receive theme context", name: "children", required: !0, type: { name: "ReactNode" } }, disableCustomTheme: { defaultValue: null, description: "Disable custom theme for testing/docs (falls back to no theme)", name: "disableCustomTheme", required: !1, type: { name: "boolean" } }, themeComponents: { defaultValue: null, description: "Additional theme component overrides", name: "themeComponents", required: !1, type: { name: 'Components<Omit<Theme, "components">>' } }, defaultMode: { defaultValue: { value: "system" }, description: "Default color mode (defaults to 'system')", name: "defaultMode", required: !1, type: { name: "enum", value: [{ value: '"light"' }, { value: '"dark"' }, { value: '"system"' }] } }, theme: { defaultValue: null, description: "Custom theme object to merge with internal theme", name: "theme", required: !1, type: { name: "Theme" } } } };
+  sthemeprovider.displayName = "sthemeprovider", sthemeprovider.__docgenInfo = { description: "Central theme provider for the design system.", displayName: "sthemeprovider", props: { children: { defaultValue: null, description: "Child components to receive theme context", name: "children", required: !0, type: { name: "ReactNode" } }, disableCustomTheme: { defaultValue: null, description: "Disable custom theme for testing/docs (falls back to no theme)", name: "disableCustomTheme", required: !1, type: { name: "boolean" } }, themeComponents: { defaultValue: null, description: "Additional theme component overrides", name: "themeComponents", required: !1, type: { name: 'Components<Omit<Theme, "components">>' } }, defaultMode: { defaultValue: { value: "system" }, description: "Default color mode (defaults to 'system')", name: "defaultMode", required: !1, type: { name: "enum", value: [{ value: '"dark"' }, { value: '"light"' }, { value: '"system"' }] } }, theme: { defaultValue: null, description: "Custom theme object to merge with internal theme", name: "theme", required: !1, type: { name: "Theme" } } } };
 } catch {
 }
 export {

package/dist/s-theme-switch/s-theme-switch.js

@@ -37,7 +37,7 @@ const M = m(/* @__PURE__ */ e.jsx("path", {
   return /* @__PURE__ */ e.jsx(w, { ref: n, onClick: h, sx: d, children: u ? /* @__PURE__ */ e.jsx(v, {}) : /* @__PURE__ */ e.jsx(M, {}) });
 };
 try {
-  sthemeswitch.displayName = "sthemeswitch", sthemeswitch.__docgenInfo = { description: "", displayName: "sthemeswitch", props: { mode: { defaultValue: null, description: "", name: "mode", required: !1, type: { name: "enum", value: [{ value: '"light"' }, { value: '"dark"' }, { value: '"system"' }] } }, setMode: { defaultValue: null, description: "", name: "setMode", required: !1, type: { name: "((mode: SThemeMode) => void)" } }, sx: { defaultValue: null, description: "", name: "sx", required: !1, type: { name: "SxProps<Theme>" } } } };
+  sthemeswitch.displayName = "sthemeswitch", sthemeswitch.__docgenInfo = { description: "", displayName: "sthemeswitch", props: { mode: { defaultValue: null, description: "", name: "mode", required: !1, type: { name: "enum", value: [{ value: '"dark"' }, { value: '"light"' }, { value: '"system"' }] } }, setMode: { defaultValue: null, description: "", name: "setMode", required: !1, type: { name: "((mode: SThemeMode) => void)" } }, sx: { defaultValue: null, description: "", name: "sx", required: !1, type: { name: "SxProps<Theme>" } } } };
 } catch {
 }
 export {

package/dist/s-two-pane-layout/index.js

@@ -1,6 +1,6 @@
 import { STwoPaneLayout as n } from "./s-two-pane-layout.js";
 try {
-  stwopanelayout.displayName = "stwopanelayout", stwopanelayout.__docgenInfo = { description: "A flexible two-pane layout component with customizable sidebar and content areas.", displayName: "stwopanelayout", props: { sidebar: { defaultValue: null, description: "Content to display in the sidebar pane", name: "sidebar", required: !0, type: { name: "ReactNode" } }, content: { defaultValue: null, description: "Content to display in the main content pane", name: "content", required: !0, type: { name: "ReactNode" } }, sidebarWidth: { defaultValue: { value: "280" }, description: "Width of the sidebar in pixels. Default: 280", name: "sidebarWidth", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "calc(100vh - 65px)" }, description: "Container height. Can be a CSS value or 'auto'. Default: 'calc(100vh - 65px)'", name: "height", required: !1, type: { name: "string | number" } }, containerSx: { defaultValue: null, description: "Custom styles for the main container", name: "containerSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarSx: { defaultValue: null, description: "Custom styles for the sidebar container", name: "sidebarSx", required: !1, type: { name: "SxProps<Theme>" } }, contentSx: { defaultValue: null, description: "Custom styles for the content container", name: "contentSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarHeaderSx: { defaultValue: null, description: "Custom styles for the sidebar header", name: "sidebarHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, contentHeaderSx: { defaultValue: null, description: "Custom styles for the content header", name: "contentHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarScrollSx: { defaultValue: null, description: "Custom styles for the sidebar scrollable area", name: "sidebarScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, contentScrollSx: { defaultValue: null, description: "Custom styles for the content scrollable area", name: "contentScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, disableBorder: { defaultValue: { value: "false" }, description: "Hide border between sidebar and content. Default: false", name: "disableBorder", required: !1, type: { name: "boolean" } }, sidebarHeader: { defaultValue: null, description: "Optional header content for the sidebar", name: "sidebarHeader", required: !1, type: { name: "ReactNode" } }, contentHeader: { defaultValue: null, description: "Optional header content for the main content area", name: "contentHeader", required: !1, type: { name: "ReactNode" } }, enableSidebarScroll: { defaultValue: { value: "true" }, description: "Enable scrollbar for sidebar. Default: true", name: "enableSidebarScroll", required: !1, type: { name: "boolean" } }, enableContentScroll: { defaultValue: { value: "false" }, description: "Enable scrollbar for content. Default: false", name: "enableContentScroll", required: !1, type: { name: "boolean" } }, sidebarPosition: { defaultValue: { value: "left" }, description: "Sidebar position. Default: 'left'", name: "sidebarPosition", required: !1, type: { name: "enum", value: [{ value: '"left"' }, { value: '"right"' }] } }, sidebarPadding: { defaultValue: { value: "1" }, description: "Padding for sidebar content. Default: 1", name: "sidebarPadding", required: !1, type: { name: "string | number" } }, contentPadding: { defaultValue: { value: "1" }, description: "Padding for main content. Default: 0", name: "contentPadding", required: !1, type: { name: "string | number" } }, sidebarHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for sidebar header. Default: 2", name: "sidebarHeaderPadding", required: !1, type: { name: "string | number" } }, contentHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for content header. Default: 2", name: "contentHeaderPadding", required: !1, type: { name: "string | number" } } } };
+  stwopanelayout.displayName = "stwopanelayout", stwopanelayout.__docgenInfo = { description: "A flexible two-pane layout component with customizable sidebar and content areas.", displayName: "stwopanelayout", props: { sidebar: { defaultValue: null, description: "Content to display in the sidebar pane", name: "sidebar", required: !0, type: { name: "ReactNode" } }, content: { defaultValue: null, description: "Content to display in the main content pane", name: "content", required: !0, type: { name: "ReactNode" } }, sidebarWidth: { defaultValue: { value: "280" }, description: "Width of the sidebar in pixels. Default: 280", name: "sidebarWidth", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "calc(100vh - 65px)" }, description: "Container height. Can be a CSS value or 'auto'. Default: 'calc(100vh - 65px)'", name: "height", required: !1, type: { name: "string | number" } }, containerSx: { defaultValue: null, description: "Custom styles for the main container", name: "containerSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarSx: { defaultValue: null, description: "Custom styles for the sidebar container", name: "sidebarSx", required: !1, type: { name: "SxProps<Theme>" } }, contentSx: { defaultValue: null, description: "Custom styles for the content container", name: "contentSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarHeaderSx: { defaultValue: null, description: "Custom styles for the sidebar header", name: "sidebarHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, contentHeaderSx: { defaultValue: null, description: "Custom styles for the content header", name: "contentHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarScrollSx: { defaultValue: null, description: "Custom styles for the sidebar scrollable area", name: "sidebarScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, contentScrollSx: { defaultValue: null, description: "Custom styles for the content scrollable area", name: "contentScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, disableBorder: { defaultValue: { value: "false" }, description: "Hide border between sidebar and content. Default: false", name: "disableBorder", required: !1, type: { name: "boolean" } }, sidebarHeader: { defaultValue: null, description: "Optional header content for the sidebar", name: "sidebarHeader", required: !1, type: { name: "ReactNode" } }, contentHeader: { defaultValue: null, description: "Optional header content for the main content area", name: "contentHeader", required: !1, type: { name: "ReactNode" } }, enableSidebarScroll: { defaultValue: { value: "true" }, description: "Enable scrollbar for sidebar. Default: true", name: "enableSidebarScroll", required: !1, type: { name: "boolean" } }, enableContentScroll: { defaultValue: { value: "false" }, description: "Enable scrollbar for content. Default: false", name: "enableContentScroll", required: !1, type: { name: "boolean" } }, sidebarPosition: { defaultValue: { value: "left" }, description: "Sidebar position. Default: 'left'", name: "sidebarPosition", required: !1, type: { name: "enum", value: [{ value: '"right"' }, { value: '"left"' }] } }, sidebarPadding: { defaultValue: { value: "1" }, description: "Padding for sidebar content. Default: 1", name: "sidebarPadding", required: !1, type: { name: "string | number" } }, contentPadding: { defaultValue: { value: "1" }, description: "Padding for main content. Default: 0", name: "contentPadding", required: !1, type: { name: "string | number" } }, sidebarHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for sidebar header. Default: 2", name: "sidebarHeaderPadding", required: !1, type: { name: "string | number" } }, contentHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for content header. Default: 2", name: "contentHeaderPadding", required: !1, type: { name: "string | number" } } } };
 } catch {
 }
 try {

package/dist/s-two-pane-layout/s-two-pane-layout.js

@@ -68,11 +68,11 @@ const r = ({
 };
 r.displayName = "STwoPaneLayout";
 try {
-  r.displayName = "STwoPaneLayout", r.__docgenInfo = { description: "A flexible two-pane layout component with customizable sidebar and content areas.", displayName: "STwoPaneLayout", props: { sidebar: { defaultValue: null, description: "Content to display in the sidebar pane", name: "sidebar", required: !0, type: { name: "ReactNode" } }, content: { defaultValue: null, description: "Content to display in the main content pane", name: "content", required: !0, type: { name: "ReactNode" } }, sidebarWidth: { defaultValue: { value: "280" }, description: "Width of the sidebar in pixels. Default: 280", name: "sidebarWidth", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "calc(100vh - 65px)" }, description: "Container height. Can be a CSS value or 'auto'. Default: 'calc(100vh - 65px)'", name: "height", required: !1, type: { name: "string | number" } }, containerSx: { defaultValue: null, description: "Custom styles for the main container", name: "containerSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarSx: { defaultValue: null, description: "Custom styles for the sidebar container", name: "sidebarSx", required: !1, type: { name: "SxProps<Theme>" } }, contentSx: { defaultValue: null, description: "Custom styles for the content container", name: "contentSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarHeaderSx: { defaultValue: null, description: "Custom styles for the sidebar header", name: "sidebarHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, contentHeaderSx: { defaultValue: null, description: "Custom styles for the content header", name: "contentHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarScrollSx: { defaultValue: null, description: "Custom styles for the sidebar scrollable area", name: "sidebarScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, contentScrollSx: { defaultValue: null, description: "Custom styles for the content scrollable area", name: "contentScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, disableBorder: { defaultValue: { value: "false" }, description: "Hide border between sidebar and content. Default: false", name: "disableBorder", required: !1, type: { name: "boolean" } }, sidebarHeader: { defaultValue: null, description: "Optional header content for the sidebar", name: "sidebarHeader", required: !1, type: { name: "ReactNode" } }, contentHeader: { defaultValue: null, description: "Optional header content for the main content area", name: "contentHeader", required: !1, type: { name: "ReactNode" } }, enableSidebarScroll: { defaultValue: { value: "true" }, description: "Enable scrollbar for sidebar. Default: true", name: "enableSidebarScroll", required: !1, type: { name: "boolean" } }, enableContentScroll: { defaultValue: { value: "false" }, description: "Enable scrollbar for content. Default: false", name: "enableContentScroll", required: !1, type: { name: "boolean" } }, sidebarPosition: { defaultValue: { value: "left" }, description: "Sidebar position. Default: 'left'", name: "sidebarPosition", required: !1, type: { name: "enum", value: [{ value: '"left"' }, { value: '"right"' }] } }, sidebarPadding: { defaultValue: { value: "1" }, description: "Padding for sidebar content. Default: 1", name: "sidebarPadding", required: !1, type: { name: "string | number" } }, contentPadding: { defaultValue: { value: "1" }, description: "Padding for main content. Default: 0", name: "contentPadding", required: !1, type: { name: "string | number" } }, sidebarHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for sidebar header. Default: 2", name: "sidebarHeaderPadding", required: !1, type: { name: "string | number" } }, contentHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for content header. Default: 2", name: "contentHeaderPadding", required: !1, type: { name: "string | number" } } } };
+  r.displayName = "STwoPaneLayout", r.__docgenInfo = { description: "A flexible two-pane layout component with customizable sidebar and content areas.", displayName: "STwoPaneLayout", props: { sidebar: { defaultValue: null, description: "Content to display in the sidebar pane", name: "sidebar", required: !0, type: { name: "ReactNode" } }, content: { defaultValue: null, description: "Content to display in the main content pane", name: "content", required: !0, type: { name: "ReactNode" } }, sidebarWidth: { defaultValue: { value: "280" }, description: "Width of the sidebar in pixels. Default: 280", name: "sidebarWidth", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "calc(100vh - 65px)" }, description: "Container height. Can be a CSS value or 'auto'. Default: 'calc(100vh - 65px)'", name: "height", required: !1, type: { name: "string | number" } }, containerSx: { defaultValue: null, description: "Custom styles for the main container", name: "containerSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarSx: { defaultValue: null, description: "Custom styles for the sidebar container", name: "sidebarSx", required: !1, type: { name: "SxProps<Theme>" } }, contentSx: { defaultValue: null, description: "Custom styles for the content container", name: "contentSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarHeaderSx: { defaultValue: null, description: "Custom styles for the sidebar header", name: "sidebarHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, contentHeaderSx: { defaultValue: null, description: "Custom styles for the content header", name: "contentHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarScrollSx: { defaultValue: null, description: "Custom styles for the sidebar scrollable area", name: "sidebarScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, contentScrollSx: { defaultValue: null, description: "Custom styles for the content scrollable area", name: "contentScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, disableBorder: { defaultValue: { value: "false" }, description: "Hide border between sidebar and content. Default: false", name: "disableBorder", required: !1, type: { name: "boolean" } }, sidebarHeader: { defaultValue: null, description: "Optional header content for the sidebar", name: "sidebarHeader", required: !1, type: { name: "ReactNode" } }, contentHeader: { defaultValue: null, description: "Optional header content for the main content area", name: "contentHeader", required: !1, type: { name: "ReactNode" } }, enableSidebarScroll: { defaultValue: { value: "true" }, description: "Enable scrollbar for sidebar. Default: true", name: "enableSidebarScroll", required: !1, type: { name: "boolean" } }, enableContentScroll: { defaultValue: { value: "false" }, description: "Enable scrollbar for content. Default: false", name: "enableContentScroll", required: !1, type: { name: "boolean" } }, sidebarPosition: { defaultValue: { value: "left" }, description: "Sidebar position. Default: 'left'", name: "sidebarPosition", required: !1, type: { name: "enum", value: [{ value: '"right"' }, { value: '"left"' }] } }, sidebarPadding: { defaultValue: { value: "1" }, description: "Padding for sidebar content. Default: 1", name: "sidebarPadding", required: !1, type: { name: "string | number" } }, contentPadding: { defaultValue: { value: "1" }, description: "Padding for main content. Default: 0", name: "contentPadding", required: !1, type: { name: "string | number" } }, sidebarHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for sidebar header. Default: 2", name: "sidebarHeaderPadding", required: !1, type: { name: "string | number" } }, contentHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for content header. Default: 2", name: "contentHeaderPadding", required: !1, type: { name: "string | number" } } } };
 } catch {
 }
 try {
-  stwopanelayout.displayName = "stwopanelayout", stwopanelayout.__docgenInfo = { description: "A flexible two-pane layout component with customizable sidebar and content areas.", displayName: "stwopanelayout", props: { sidebar: { defaultValue: null, description: "Content to display in the sidebar pane", name: "sidebar", required: !0, type: { name: "ReactNode" } }, content: { defaultValue: null, description: "Content to display in the main content pane", name: "content", required: !0, type: { name: "ReactNode" } }, sidebarWidth: { defaultValue: { value: "280" }, description: "Width of the sidebar in pixels. Default: 280", name: "sidebarWidth", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "calc(100vh - 65px)" }, description: "Container height. Can be a CSS value or 'auto'. Default: 'calc(100vh - 65px)'", name: "height", required: !1, type: { name: "string | number" } }, containerSx: { defaultValue: null, description: "Custom styles for the main container", name: "containerSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarSx: { defaultValue: null, description: "Custom styles for the sidebar container", name: "sidebarSx", required: !1, type: { name: "SxProps<Theme>" } }, contentSx: { defaultValue: null, description: "Custom styles for the content container", name: "contentSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarHeaderSx: { defaultValue: null, description: "Custom styles for the sidebar header", name: "sidebarHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, contentHeaderSx: { defaultValue: null, description: "Custom styles for the content header", name: "contentHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarScrollSx: { defaultValue: null, description: "Custom styles for the sidebar scrollable area", name: "sidebarScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, contentScrollSx: { defaultValue: null, description: "Custom styles for the content scrollable area", name: "contentScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, disableBorder: { defaultValue: { value: "false" }, description: "Hide border between sidebar and content. Default: false", name: "disableBorder", required: !1, type: { name: "boolean" } }, sidebarHeader: { defaultValue: null, description: "Optional header content for the sidebar", name: "sidebarHeader", required: !1, type: { name: "ReactNode" } }, contentHeader: { defaultValue: null, description: "Optional header content for the main content area", name: "contentHeader", required: !1, type: { name: "ReactNode" } }, enableSidebarScroll: { defaultValue: { value: "true" }, description: "Enable scrollbar for sidebar. Default: true", name: "enableSidebarScroll", required: !1, type: { name: "boolean" } }, enableContentScroll: { defaultValue: { value: "false" }, description: "Enable scrollbar for content. Default: false", name: "enableContentScroll", required: !1, type: { name: "boolean" } }, sidebarPosition: { defaultValue: { value: "left" }, description: "Sidebar position. Default: 'left'", name: "sidebarPosition", required: !1, type: { name: "enum", value: [{ value: '"left"' }, { value: '"right"' }] } }, sidebarPadding: { defaultValue: { value: "1" }, description: "Padding for sidebar content. Default: 1", name: "sidebarPadding", required: !1, type: { name: "string | number" } }, contentPadding: { defaultValue: { value: "1" }, description: "Padding for main content. Default: 0", name: "contentPadding", required: !1, type: { name: "string | number" } }, sidebarHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for sidebar header. Default: 2", name: "sidebarHeaderPadding", required: !1, type: { name: "string | number" } }, contentHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for content header. Default: 2", name: "contentHeaderPadding", required: !1, type: { name: "string | number" } } } };
+  stwopanelayout.displayName = "stwopanelayout", stwopanelayout.__docgenInfo = { description: "A flexible two-pane layout component with customizable sidebar and content areas.", displayName: "stwopanelayout", props: { sidebar: { defaultValue: null, description: "Content to display in the sidebar pane", name: "sidebar", required: !0, type: { name: "ReactNode" } }, content: { defaultValue: null, description: "Content to display in the main content pane", name: "content", required: !0, type: { name: "ReactNode" } }, sidebarWidth: { defaultValue: { value: "280" }, description: "Width of the sidebar in pixels. Default: 280", name: "sidebarWidth", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "calc(100vh - 65px)" }, description: "Container height. Can be a CSS value or 'auto'. Default: 'calc(100vh - 65px)'", name: "height", required: !1, type: { name: "string | number" } }, containerSx: { defaultValue: null, description: "Custom styles for the main container", name: "containerSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarSx: { defaultValue: null, description: "Custom styles for the sidebar container", name: "sidebarSx", required: !1, type: { name: "SxProps<Theme>" } }, contentSx: { defaultValue: null, description: "Custom styles for the content container", name: "contentSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarHeaderSx: { defaultValue: null, description: "Custom styles for the sidebar header", name: "sidebarHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, contentHeaderSx: { defaultValue: null, description: "Custom styles for the content header", name: "contentHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarScrollSx: { defaultValue: null, description: "Custom styles for the sidebar scrollable area", name: "sidebarScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, contentScrollSx: { defaultValue: null, description: "Custom styles for the content scrollable area", name: "contentScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, disableBorder: { defaultValue: { value: "false" }, description: "Hide border between sidebar and content. Default: false", name: "disableBorder", required: !1, type: { name: "boolean" } }, sidebarHeader: { defaultValue: null, description: "Optional header content for the sidebar", name: "sidebarHeader", required: !1, type: { name: "ReactNode" } }, contentHeader: { defaultValue: null, description: "Optional header content for the main content area", name: "contentHeader", required: !1, type: { name: "ReactNode" } }, enableSidebarScroll: { defaultValue: { value: "true" }, description: "Enable scrollbar for sidebar. Default: true", name: "enableSidebarScroll", required: !1, type: { name: "boolean" } }, enableContentScroll: { defaultValue: { value: "false" }, description: "Enable scrollbar for content. Default: false", name: "enableContentScroll", required: !1, type: { name: "boolean" } }, sidebarPosition: { defaultValue: { value: "left" }, description: "Sidebar position. Default: 'left'", name: "sidebarPosition", required: !1, type: { name: "enum", value: [{ value: '"right"' }, { value: '"left"' }] } }, sidebarPadding: { defaultValue: { value: "1" }, description: "Padding for sidebar content. Default: 1", name: "sidebarPadding", required: !1, type: { name: "string | number" } }, contentPadding: { defaultValue: { value: "1" }, description: "Padding for main content. Default: 0", name: "contentPadding", required: !1, type: { name: "string | number" } }, sidebarHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for sidebar header. Default: 2", name: "sidebarHeaderPadding", required: !1, type: { name: "string | number" } }, contentHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for content header. Default: 2", name: "contentHeaderPadding", required: !1, type: { name: "string | number" } } } };
 } catch {
 }
 export {

package/dist/s-typewriter-text/s-typewriter-text.js

@@ -1,7 +1,7 @@
 import { j as h } from "../jsx-runtime-OVHDjVDe.js";
 import { useState as a, useEffect as _ } from "react";
 import { Typography as V, Box as v } from "@mui/material";
-const s = ({
+const o = ({
   text: t,
   speed: p = 100,
   cursor: g = "|",
@@ -11,17 +11,17 @@ const s = ({
   delay: c = 1500,
   ...b
 }) => {
-  const [n, m] = a(""), [i, y] = a(0), [l, f] = a(!1), [w, T] = a(0), o = Array.isArray(t) ? t : [t], r = o[w] || "";
+  const [n, m] = a(""), [i, y] = a(0), [l, f] = a(!1), [w, T] = a(0), s = Array.isArray(t) ? t : [t], r = s[w] || "";
   return _(() => {
     if (!r) return;
     const q = setTimeout(
       () => {
-        l ? n.length > 0 ? m((e) => e.slice(0, -1)) : (f(!1), y(0), T((e) => (e + 1) % o.length)) : i < r.length ? (m((e) => e + r[i]), y((e) => e + 1)) : u && setTimeout(() => f(!0), c);
+        l ? n.length > 0 ? m((e) => e.slice(0, -1)) : (f(!1), y(0), T((e) => (e + 1) % s.length)) : i < r.length ? (m((e) => e + r[i]), y((e) => e + 1)) : u && setTimeout(() => f(!0), c);
       },
       l ? d : p
     );
     return () => clearTimeout(q);
-  }, [i, l, r, u, p, d, c, n, o.length]), /* @__PURE__ */ h.jsxs(V, { component: "span", ...b, children: [
+  }, [i, l, r, u, p, d, c, n, s.length]), /* @__PURE__ */ h.jsxs(V, { ...b, children: [
     n,
     /* @__PURE__ */ h.jsx(
       v,
@@ -39,9 +39,9 @@ const s = ({
     )
   ] });
 };
-s.displayName = "STypewriterText";
+o.displayName = "STypewriterText";
 try {
-  s.displayName = "STypewriterText", s.__docgenInfo = { description: "An animated text component that creates a typewriter effect with customizable speed and looping.", displayName: "STypewriterText", props: { text: { defaultValue: null, description: "The text to display with typewriter effect. Can be a single string or array of strings for sequential display.", name: "text", required: !0, type: { name: "string | string[]" } }, speed: { defaultValue: { value: "100" }, description: "Speed of typing animation in milliseconds per character", name: "speed", required: !1, type: { name: "number" } }, cursor: { defaultValue: { value: "|" }, description: "Character to display as the typing cursor", name: "cursor", required: !1, type: { name: "string" } }, cursorBlinking: { defaultValue: { value: "true" }, description: "Whether the cursor should blink", name: "cursorBlinking", required: !1, type: { name: "boolean" } }, loop: { defaultValue: { value: "false" }, description: "Whether to loop the animation continuously", name: "loop", required: !1, type: { name: "boolean" } }, deleteSpeed: { defaultValue: { value: "50" }, description: "Speed of deletion animation in milliseconds per character (when looping)", name: "deleteSpeed", required: !1, type: { name: "number" } }, delay: { defaultValue: { value: "1500" }, description: "Delay in milliseconds before deleting text (when looping)", name: "delay", required: !1, type: { name: "number" } } } };
+  o.displayName = "STypewriterText", o.__docgenInfo = { description: "An animated text component that creates a typewriter effect with customizable speed and looping.", displayName: "STypewriterText", props: { text: { defaultValue: null, description: "The text to display with typewriter effect. Can be a single string or array of strings for sequential display.", name: "text", required: !0, type: { name: "string | string[]" } }, speed: { defaultValue: { value: "100" }, description: "Speed of typing animation in milliseconds per character", name: "speed", required: !1, type: { name: "number" } }, cursor: { defaultValue: { value: "|" }, description: "Character to display as the typing cursor", name: "cursor", required: !1, type: { name: "string" } }, cursorBlinking: { defaultValue: { value: "true" }, description: "Whether the cursor should blink", name: "cursorBlinking", required: !1, type: { name: "boolean" } }, loop: { defaultValue: { value: "false" }, description: "Whether to loop the animation continuously", name: "loop", required: !1, type: { name: "boolean" } }, deleteSpeed: { defaultValue: { value: "50" }, description: "Speed of deletion animation in milliseconds per character (when looping)", name: "deleteSpeed", required: !1, type: { name: "number" } }, delay: { defaultValue: { value: "1500" }, description: "Delay in milliseconds before deleting text (when looping)", name: "delay", required: !1, type: { name: "number" } } } };
 } catch {
 }
 try {
@@ -49,6 +49,6 @@ try {
 } catch {
 }
 export {
-  s as STypewriterText,
-  s as default
+  o as STypewriterText,
+  o as default
 };

package/dist/s-zoom-image/index.js

@@ -1,6 +1,6 @@
 import { SZoomImage as r } from "./s-zoom-image.js";
 try {
-  szoomimage.displayName = "szoomimage", szoomimage.__docgenInfo = { description: "An interactive image component with smooth zoom-on-hover functionality and built-in lazy loading.", displayName: "szoomimage", props: { height: { defaultValue: { value: "100%" }, description: "Image height for lazy loading skeleton", name: "height", required: !1, type: { name: "string | number" } }, transitionDuration: { defaultValue: { value: "0.3" }, description: "Duration of the spring animation in seconds", name: "transitionDuration", required: !1, type: { name: "number" } }, width: { defaultValue: { value: "100%" }, description: "Image width for lazy loading skeleton", name: "width", required: !1, type: { name: "string | number" } }, borderRadius: { defaultValue: { value: "1.5" }, description: "Border radius (number uses theme spacing, string accepts any CSS unit)", name: "borderRadius", required: !1, type: { name: "string | number" } }, src: { defaultValue: null, description: "Image source URL", name: "src", required: !0, type: { name: "string" } }, alt: { defaultValue: null, description: "Alternative text for accessibility", name: "alt", required: !0, type: { name: "string" } }, zoomScale: { defaultValue: { value: "1.2" }, description: "Scale factor to apply on zoom", name: "zoomScale", required: !1, type: { name: "number" } }, imgStyle: { defaultValue: null, description: "Custom styles applied to the image element", name: "imgStyle", required: !1, type: { name: "CSSProperties" } }, imgClassName: { defaultValue: null, description: "Custom class name for the image element", name: "imgClassName", required: !1, type: { name: "string" } }, skeletonVariant: { defaultValue: { value: "rounded" }, description: "Skeleton variant while loading", name: "skeletonVariant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"rectangular"' }, { value: '"rounded"' }, { value: '"circular"' }] } } } };
+  szoomimage.displayName = "szoomimage", szoomimage.__docgenInfo = { description: "An interactive image component with smooth zoom-on-hover functionality and built-in lazy loading.", displayName: "szoomimage", props: { borderRadius: { defaultValue: { value: "1.5" }, description: "Border radius (number uses theme spacing, string accepts any CSS unit)", name: "borderRadius", required: !1, type: { name: "string | number" } }, width: { defaultValue: { value: "100%" }, description: "Image width for lazy loading skeleton", name: "width", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "100%" }, description: "Image height for lazy loading skeleton", name: "height", required: !1, type: { name: "string | number" } }, transitionDuration: { defaultValue: { value: "0.3" }, description: "Duration of the spring animation in seconds", name: "transitionDuration", required: !1, type: { name: "number" } }, src: { defaultValue: null, description: "Image source URL", name: "src", required: !0, type: { name: "string" } }, alt: { defaultValue: null, description: "Alternative text for accessibility", name: "alt", required: !0, type: { name: "string" } }, zoomScale: { defaultValue: { value: "1.2" }, description: "Scale factor to apply on zoom", name: "zoomScale", required: !1, type: { name: "number" } }, imgStyle: { defaultValue: null, description: "Custom styles applied to the image element", name: "imgStyle", required: !1, type: { name: "CSSProperties" } }, imgClassName: { defaultValue: null, description: "Custom class name for the image element", name: "imgClassName", required: !1, type: { name: "string" } }, skeletonVariant: { defaultValue: { value: "rounded" }, description: "Skeleton variant while loading", name: "skeletonVariant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"rectangular"' }, { value: '"rounded"' }, { value: '"circular"' }] } } } };
 } catch {
 }
 try {

package/dist/s-zoom-image/s-zoom-image.js

@@ -84,11 +84,11 @@ const o = L.forwardRef(
 );
 o.displayName = "SZoomImage";
 try {
-  o.displayName = "SZoomImage", o.__docgenInfo = { description: "An interactive image component with smooth zoom-on-hover functionality and built-in lazy loading.", displayName: "SZoomImage", props: { height: { defaultValue: { value: "100%" }, description: "Image height for lazy loading skeleton", name: "height", required: !1, type: { name: "string | number" } }, transitionDuration: { defaultValue: { value: "0.3" }, description: "Duration of the spring animation in seconds", name: "transitionDuration", required: !1, type: { name: "number" } }, width: { defaultValue: { value: "100%" }, description: "Image width for lazy loading skeleton", name: "width", required: !1, type: { name: "string | number" } }, borderRadius: { defaultValue: { value: "1.5" }, description: "Border radius (number uses theme spacing, string accepts any CSS unit)", name: "borderRadius", required: !1, type: { name: "string | number" } }, src: { defaultValue: null, description: "Image source URL", name: "src", required: !0, type: { name: "string" } }, alt: { defaultValue: null, description: "Alternative text for accessibility", name: "alt", required: !0, type: { name: "string" } }, zoomScale: { defaultValue: { value: "1.2" }, description: "Scale factor to apply on zoom", name: "zoomScale", required: !1, type: { name: "number" } }, imgStyle: { defaultValue: null, description: "Custom styles applied to the image element", name: "imgStyle", required: !1, type: { name: "CSSProperties" } }, imgClassName: { defaultValue: null, description: "Custom class name for the image element", name: "imgClassName", required: !1, type: { name: "string" } }, skeletonVariant: { defaultValue: { value: "rounded" }, description: "Skeleton variant while loading", name: "skeletonVariant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"rectangular"' }, { value: '"rounded"' }, { value: '"circular"' }] } } } };
+  o.displayName = "SZoomImage", o.__docgenInfo = { description: "An interactive image component with smooth zoom-on-hover functionality and built-in lazy loading.", displayName: "SZoomImage", props: { borderRadius: { defaultValue: { value: "1.5" }, description: "Border radius (number uses theme spacing, string accepts any CSS unit)", name: "borderRadius", required: !1, type: { name: "string | number" } }, width: { defaultValue: { value: "100%" }, description: "Image width for lazy loading skeleton", name: "width", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "100%" }, description: "Image height for lazy loading skeleton", name: "height", required: !1, type: { name: "string | number" } }, transitionDuration: { defaultValue: { value: "0.3" }, description: "Duration of the spring animation in seconds", name: "transitionDuration", required: !1, type: { name: "number" } }, src: { defaultValue: null, description: "Image source URL", name: "src", required: !0, type: { name: "string" } }, alt: { defaultValue: null, description: "Alternative text for accessibility", name: "alt", required: !0, type: { name: "string" } }, zoomScale: { defaultValue: { value: "1.2" }, description: "Scale factor to apply on zoom", name: "zoomScale", required: !1, type: { name: "number" } }, imgStyle: { defaultValue: null, description: "Custom styles applied to the image element", name: "imgStyle", required: !1, type: { name: "CSSProperties" } }, imgClassName: { defaultValue: null, description: "Custom class name for the image element", name: "imgClassName", required: !1, type: { name: "string" } }, skeletonVariant: { defaultValue: { value: "rounded" }, description: "Skeleton variant while loading", name: "skeletonVariant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"rectangular"' }, { value: '"rounded"' }, { value: '"circular"' }] } } } };
 } catch {
 }
 try {
-  szoomimage.displayName = "szoomimage", szoomimage.__docgenInfo = { description: "An interactive image component with smooth zoom-on-hover functionality and built-in lazy loading.", displayName: "szoomimage", props: { height: { defaultValue: { value: "100%" }, description: "Image height for lazy loading skeleton", name: "height", required: !1, type: { name: "string | number" } }, transitionDuration: { defaultValue: { value: "0.3" }, description: "Duration of the spring animation in seconds", name: "transitionDuration", required: !1, type: { name: "number" } }, width: { defaultValue: { value: "100%" }, description: "Image width for lazy loading skeleton", name: "width", required: !1, type: { name: "string | number" } }, borderRadius: { defaultValue: { value: "1.5" }, description: "Border radius (number uses theme spacing, string accepts any CSS unit)", name: "borderRadius", required: !1, type: { name: "string | number" } }, src: { defaultValue: null, description: "Image source URL", name: "src", required: !0, type: { name: "string" } }, alt: { defaultValue: null, description: "Alternative text for accessibility", name: "alt", required: !0, type: { name: "string" } }, zoomScale: { defaultValue: { value: "1.2" }, description: "Scale factor to apply on zoom", name: "zoomScale", required: !1, type: { name: "number" } }, imgStyle: { defaultValue: null, description: "Custom styles applied to the image element", name: "imgStyle", required: !1, type: { name: "CSSProperties" } }, imgClassName: { defaultValue: null, description: "Custom class name for the image element", name: "imgClassName", required: !1, type: { name: "string" } }, skeletonVariant: { defaultValue: { value: "rounded" }, description: "Skeleton variant while loading", name: "skeletonVariant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"rectangular"' }, { value: '"rounded"' }, { value: '"circular"' }] } } } };
+  szoomimage.displayName = "szoomimage", szoomimage.__docgenInfo = { description: "An interactive image component with smooth zoom-on-hover functionality and built-in lazy loading.", displayName: "szoomimage", props: { borderRadius: { defaultValue: { value: "1.5" }, description: "Border radius (number uses theme spacing, string accepts any CSS unit)", name: "borderRadius", required: !1, type: { name: "string | number" } }, width: { defaultValue: { value: "100%" }, description: "Image width for lazy loading skeleton", name: "width", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "100%" }, description: "Image height for lazy loading skeleton", name: "height", required: !1, type: { name: "string | number" } }, transitionDuration: { defaultValue: { value: "0.3" }, description: "Duration of the spring animation in seconds", name: "transitionDuration", required: !1, type: { name: "number" } }, src: { defaultValue: null, description: "Image source URL", name: "src", required: !0, type: { name: "string" } }, alt: { defaultValue: null, description: "Alternative text for accessibility", name: "alt", required: !0, type: { name: "string" } }, zoomScale: { defaultValue: { value: "1.2" }, description: "Scale factor to apply on zoom", name: "zoomScale", required: !1, type: { name: "number" } }, imgStyle: { defaultValue: null, description: "Custom styles applied to the image element", name: "imgStyle", required: !1, type: { name: "CSSProperties" } }, imgClassName: { defaultValue: null, description: "Custom class name for the image element", name: "imgClassName", required: !1, type: { name: "string" } }, skeletonVariant: { defaultValue: { value: "rounded" }, description: "Skeleton variant while loading", name: "skeletonVariant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"rectangular"' }, { value: '"rounded"' }, { value: '"circular"' }] } } } };
 } catch {
 }
 export {

package/dist/theme/theme-primitives.d.ts

@@ -450,6 +450,7 @@ export declare const typography: {
     };
     h3: {
         fontSize: string;
+        fontWeight: number;
         lineHeight: number;
     };
     h4: {
@@ -460,13 +461,16 @@ export declare const typography: {
     h5: {
         fontSize: string;
         fontWeight: number;
+        lineHeight: number;
     };
     h6: {
         fontSize: string;
         fontWeight: number;
+        lineHeight: number;
     };
     subtitle1: {
         fontSize: string;
+        fontWeight: number;
     };
     subtitle2: {
         fontSize: string;
@@ -474,6 +478,7 @@ export declare const typography: {
     };
     body1: {
         fontSize: string;
+        fontWeight: number;
     };
     body2: {
         fontSize: string;