@trii/components 3.1.5 → 3.1.7

package/dist/esm/theme.js

@@ -1,2 +1,605 @@
-import{createTheme as s}from"@mui/material";import{alpha as i,createTheme as B}from"@mui/material/styles";import{createAsyncThunk as E,createSlice as f}from"@reduxjs/toolkit";import O from"axios";const w=r=>{if(r.palette.mode!=="dark")return r;const{palette:e}=r,o=i(e.text.secondary,.5),a=i(e.text.secondary,.72);return B(r,{components:{MuiSelect:{defaultProps:{MenuProps:{PaperProps:{sx:{backgroundColor:e.background.dropdownMenu,backgroundImage:"none"}}}}},MuiTypography:{styleOverrides:{root:{color:e.text.primary}}},MuiPaper:{styleOverrides:{root:{backgroundColor:e.background.paper,backgroundImage:"none"},outlined:{borderColor:e.divider}}},MuiCard:{styleOverrides:{root:{backgroundColor:e.background.paper,backgroundImage:"none",borderColor:e.divider}}},MuiDialog:{styleOverrides:{paper:{backgroundColor:e.background.dropdownMenu,backgroundImage:"none",border:`1px solid ${e.divider}`}}},MuiDrawer:{styleOverrides:{paper:{backgroundColor:e.background.dropdownMenu,backgroundImage:"none",borderColor:e.divider}}},MuiPopover:{styleOverrides:{paper:{backgroundColor:e.background.dropdownMenu,backgroundImage:"none",border:`1px solid ${e.divider}`}}},MuiMenu:{styleOverrides:{paper:{backgroundColor:e.background.dropdownMenu,backgroundImage:"none",border:`1px solid ${e.divider}`}}},MuiOutlinedInput:{styleOverrides:{root:{backgroundColor:i(e.background.default,.34),"& .MuiOutlinedInput-notchedOutline":{borderColor:o},"&:hover .MuiOutlinedInput-notchedOutline":{borderColor:a},"&.Mui-focused .MuiOutlinedInput-notchedOutline":{borderColor:e.primary.light,borderWidth:2},"&.Mui-disabled .MuiOutlinedInput-notchedOutline":{borderColor:i(e.text.disabled,.36)}},input:{"&::placeholder":{color:e.text.disabled,opacity:1}}}},MuiInputLabel:{styleOverrides:{root:{color:e.text.secondary,"&.Mui-focused":{color:e.primary.light},"&.Mui-disabled":{color:e.text.disabled}}}},MuiButton:{styleOverrides:{root:{"&.Mui-disabled":{color:e.text.disabled,borderColor:i(e.text.disabled,.38)}},containedPrimary:{backgroundColor:e.primary.main,color:e.primary.contrastText,"&:hover":{backgroundColor:e.primary.dark}},outlined:{color:e.primary.light,borderColor:i(e.primary.light,.72),"&:hover":{color:e.primary.light,borderColor:e.primary.light,backgroundColor:i(e.primary.light,.1)}},textPrimary:{color:e.primary.light,"&:hover":{backgroundColor:i(e.primary.light,.1)}}}},MuiIconButton:{styleOverrides:{root:{color:e.text.secondary,"&:hover":{color:e.text.primary,backgroundColor:e.action.hover},"&.MuiIconButton-colorPrimary":{color:e.primary.light},"&.MuiIconButton-colorError":{color:e.error.light},"&.Mui-disabled":{color:e.text.disabled}}}},MuiChip:{styleOverrides:{root:{color:e.text.primary,backgroundColor:i(e.text.primary,.07),borderColor:o,"& .MuiChip-icon":{color:"inherit"},"&.MuiChip-colorSuccess":{color:e.success.light,backgroundColor:e.success.dark,borderColor:i(e.success.light,.46)},"&.MuiChip-colorWarning":{color:e.warning.light,backgroundColor:e.warning.dark,borderColor:i(e.warning.light,.46)},"&.MuiChip-colorError":{color:e.error.light,backgroundColor:e.error.dark,borderColor:i(e.error.light,.46)},"&.MuiChip-colorInfo":{color:e.info.light,backgroundColor:e.info.dark,borderColor:i(e.info.light,.46)}}}},MuiAlert:{styleOverrides:{root:{border:"1px solid currentColor"},standardSuccess:{color:e.success.light,backgroundColor:e.success.dark},standardWarning:{color:e.warning.light,backgroundColor:e.warning.dark},standardError:{color:e.error.light,backgroundColor:e.error.dark},standardInfo:{color:e.info.light,backgroundColor:e.info.dark}}},MuiTableHead:{styleOverrides:{root:{backgroundColor:e.cellHeader}}},MuiTableCell:{styleOverrides:{root:{borderColor:e.divider},head:{color:e.text.primary,fontWeight:700}}},MuiTableRow:{styleOverrides:{root:{"&:hover":{backgroundColor:e.action.hover},"&.Mui-selected":{backgroundColor:e.action.selected,"&:hover":{backgroundColor:e.action.selected}}}}},MuiTabs:{styleOverrides:{indicator:{backgroundColor:e.primary.light}}},MuiTab:{styleOverrides:{root:{color:e.text.secondary,"&.Mui-selected":{color:e.primary.light}}}},MuiSwitch:{styleOverrides:{switchBase:{color:e.text.disabled,"&.Mui-checked":{color:e.primary.light,"& + .MuiSwitch-track":{backgroundColor:e.primary.light,opacity:.5}}},track:{backgroundColor:e.text.disabled,opacity:.34}}},MuiTooltip:{styleOverrides:{tooltip:{color:e.text.primary,backgroundColor:e.background.tooltip,border:`1px solid ${o}`},arrow:{color:e.background.tooltip}}},MuiDivider:{styleOverrides:{root:{borderColor:e.divider}}},MuiLink:{styleOverrides:{root:{color:e.primary.light}}}}})},A=(r,e={})=>{const{transparentModal:o=!1,autocompleteZIndex:a=11}=e,l=r.palette.background,d=s({...r,components:{MuiSelect:{defaultProps:{MenuProps:{PaperProps:{sx:{backgroundColor:l.panel,backgroundImage:"linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))"}}}}},MuiAutocomplete:{styleOverrides:{popper:{zIndex:a,"& div":{backgroundColor:l.panel}}}},MuiPaper:{styleOverrides:{root:{backgroundColor:l.panel,backgroundImage:"linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))"}}},MuiMenu:{styleOverrides:{paper:{backgroundColor:l.panel,backgroundImage:"linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))"}}},MuiList:{styleOverrides:{root:{padding:0}}},MuiModal:{styleOverrides:{root:o?{background:"transparent","& .MuiBackdrop-root":{background:"transparent",border:"none"}}:{}}},MuiTypography:{styleOverrides:{root:{color:r.palette.text.primary}}},MuiChip:{styleOverrides:{root:{color:r.palette.text.primary,border:"1px solid rgba(0, 0, 0, 0.1)",borderRadius:"4px",height:"20px",fontSize:"0.7125rem"}}},MuiListSubheader:{styleOverrides:{root:{backgroundColor:l.accordionHeader}}},MuiButton:{styleOverrides:{outlined:{color:r.palette.mode==="light"?r.palette.primary.dark:r.palette.primary.light,borderColor:r.palette.mode==="light"?r.palette.primary.dark:r.palette.primary.light,"&:hover":{borderColor:r.palette.mode==="light"?r.palette.primary.main:r.palette.primary.light,color:r.palette.mode==="light"?r.palette.primary.main:r.palette.primary.light}}}}}});return w(d)},h={main:"#246FB5",light:"#78B7F2",dark:"#195A96",contrastText:"#FFFFFF"},t=s({name:"light",palette:{mode:"light",contrastThreshold:4.5,primary:h,secondary:{main:"#526078",light:"#728099",dark:"#38445A",contrastText:"#FFFFFF"},error:{main:"#BD3446",light:"#FCECEF",dark:"#932536",contrastText:"#FFFFFF"},warning:{main:"#946000",light:"#FFF5DF",dark:"#704800",contrastText:"#FFFFFF"},info:{main:"#176B9B",light:"#EAF4FC",dark:"#125174",contrastText:"#FFFFFF"},success:{main:"#237547",light:"#EAF6EE",dark:"#185935",contrastText:"#FFFFFF"},background:{default:"#F4F6FA",paper:"#FFFFFF",mainCenter:"#F4F6FA",mainGradient:"linear-gradient(120deg, #195A96, #246FB5)",navMenu:"#EDF1F7",dropdownMenu:"#FFFFFF",panel:"#FFFFFF",tooltip:"#EDF1F7",accordionHeader:"#EDF1F7",panelHeader:"#EDF1F7",panelCenter:"#F8FAFD",panelGradient:"#EDF1F7",selectedItem:"#E5EFFA"},text:{primary:"#202C3E",secondary:"#526078",disabled:"#7C8798",colorMain:"#202C3E"},action:{active:"#526078",hover:"rgba(36, 111, 181, 0.06)",selected:"rgba(36, 111, 181, 0.12)",disabled:"#8893A3",disabledBackground:"#E8ECF2"},divider:"#D7DEE9",containerBox:{default:"#FFFFFF",main:"#F8FAFD"},dropdownBox:"#FFFFFF",color:{icons:"#526078"},cellHeader:"#EDF1F7",Skeleton:{bg:"#E4EAF2"},messageBox:"#E5EFFA",boxShadow:"rgba(25, 42, 66, 0.12)",disabled:"#8893A3"}}),n=s({name:"dark",palette:{mode:"dark",contrastThreshold:4.5,primary:h,secondary:{main:"#B7B5D9",light:"#D6D4EF",dark:"#46415F",contrastText:"#171824"},error:{main:"#F06B7A",light:"#FF9AA8",dark:"#4A1D24",contrastText:"#2B0D12"},warning:{main:"#E5A93B",light:"#FFD27A",dark:"#493515",contrastText:"#2A1B05"},info:{main:"#4FAFE8",light:"#7CCBFF",dark:"#123955",contrastText:"#082033"},success:{main:"#43C17A",light:"#75E0A7",dark:"#143D2B",contrastText:"#092116"},background:{default:"#111520",paper:"#1B2333",mainCenter:"#151C2A",mainGradient:"linear-gradient(120deg, #131B2B, #242237)",navMenu:"#0E121C",dropdownMenu:"#252D40",panel:"#1B2333",tooltip:"#30384F",accordionHeader:"#20283A",panelHeader:"#20283A",panelCenter:"#222B3E",panelGradient:"#2C2B40",selectedItem:"#293E59"},text:{primary:"#F1F4FA",secondary:"#BBC6D8",disabled:"#8793A6",colorMain:"#F1F4FA"},action:{active:"#BBC6D8",hover:"rgba(241, 244, 250, 0.07)",selected:"rgba(120, 183, 242, 0.16)",disabled:"rgba(187, 198, 216, 0.45)",disabledBackground:"rgba(187, 198, 216, 0.10)"},divider:"rgba(187, 198, 216, 0.22)",containerBox:{default:"#1B2333",main:"#222B3E"},dropdownBox:"#252D40",color:{icons:"#BBC6D8"},cellHeader:"#20283A",Skeleton:{bg:"#30384F"},messageBox:"#203953",boxShadow:"rgba(0, 0, 0, 0.40)",disabled:"rgba(187, 198, 216, 0.45)"}}),I={...t,name:"lightBlueIndigo"},S={...t,name:"lightBlue"},D={...t,name:"lightRed"},P={...t,name:"lightGreen"},L={...t,name:"lightPink"},G={...t,name:"lightPurple"},H={...t,name:"lightTeal"},R={...t,name:"lightLime"},$={...t,name:"lightYellow"},W={...t,name:"lightAmber"},N={...t,name:"lightOrange"},Y={...t,name:"lightBrown"},j={...t,name:"lightGray"},z={...n,name:"darkBlue"},_={...n,name:"darkBlack"},p=["light","dark","system"],m=["lightBlueIndigo","lightBlue","lightRed","lightGreen","lightPink","lightPurple","lightTeal","lightLime","lightYellow","lightAmber","lightOrange","lightBrown","lightGray","darkBlue","darkBlack"],b=r=>p.includes(r)||m.includes(r),g=r=>r==="light"||r==="dark"||r==="system"?r:r&&m.includes(r)?r.startsWith("dark")?"dark":"light":"system",k=()=>typeof window<"u"&&typeof window.matchMedia=="function"?window.matchMedia("(prefers-color-scheme: dark)"):void 0,c=(r,e=k()?.matches??!1)=>r==="system"?e?"dark":"light":r,J=(r,e)=>{if(r!=="system")return e(r),()=>{};const o=k();if(e(c(r,o?.matches??!1)),!o)return()=>{};const a=l=>e(l.matches?"dark":"light");return typeof o.addEventListener=="function"?(o.addEventListener("change",a),()=>o.removeEventListener("change",a)):(o.addListener(a),()=>o.removeListener(a))},F="trii-theme",U=r=>`https://agent-api.trii.app/api/v1/settings/${r}/user/setTheme`,V=()=>{try{return g(localStorage.getItem(F))}catch{return"system"}},Z=r=>{try{localStorage.setItem(F,r)}catch{}},y=V(),C=c(y),q={themeSelected:C==="dark"?n:t,preference:y,darkMode:C==="dark",toggleStatus:"idle"},M=E("Theme/updateTheme",async(r,{getState:e})=>{const{uid:o="",spaceId:a=""}=e().User.user??{},l=JSON.stringify({theme:r,uid:o}),d=await O.put(U(a),l,{headers:{"Content-Type":"application/json"}});if(!b(d.data.theme))throw new Error("Invalid theme response");return d.data}),v=f({name:"Theme",initialState:q,reducers:{toggleTheme:(r,e)=>{u(r,e.payload)},systemThemeChanged:(r,e)=>{r.preference==="system"&&Object.assign(r,{themeSelected:e.payload==="dark"?n:t,darkMode:e.payload==="dark",toggleStatus:"toggled"})},toggleModeTheme:r=>{u(r,r.darkMode?"light":"dark")}},extraReducers:r=>{r.addCase(M.fulfilled,(e,o)=>{u(e,o.payload.theme)})}});function u(r,e){const o=g(e),a=c(o);Z(e);const l=a==="dark"?n:t,d=e==="system"||e==="light"||e==="dark"?l:{...l,name:e};Object.assign(r,{preference:o,themeSelected:d,darkMode:a==="dark",toggleStatus:"toggled"})}const K=r=>r.Theme.preference,{toggleTheme:Q,toggleModeTheme:X,systemThemeChanged:ee}=v.actions,re=r=>r.Theme.toggleStatus,T=r=>r.Theme.themeSelected,x=r=>r.Theme.darkMode,oe=T,te=x;var ae=v.reducer;export{A as MuiComponentsConfig,p as THEME_PREFERENCES,_ as darkBlack,z as darkBlue,n as darkTheme,b as isValidThemeName,W as lightAmber,S as lightBlue,I as lightBlueIndigo,Y as lightBrown,j as lightGray,P as lightGreen,R as lightLime,N as lightOrange,L as lightPink,G as lightPurple,D as lightRed,H as lightTeal,t as lightTheme,$ as lightYellow,g as normalizeThemePreference,J as observeThemePreference,c as resolveThemePreference,x as selectDarkTheme,T as selectTheme,K as selectThemePreference,re as selectThemeToggleStatus,te as selectedDarkTheme,oe as selectedTheme,ee as systemThemeChanged,ae as themeReducer,X as toggleModeTheme,Q as toggleTheme,M as updateTheme};
+import { createTheme as createTheme$1 } from '@mui/material';
+import { alpha, createTheme } from '@mui/material/styles';
+import { createAction, createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import axios from 'axios';
+
+const applyDarkThemeComponents = (sharedTheme) => {
+  if (sharedTheme.palette.mode !== "dark") return sharedTheme;
+  const { palette } = sharedTheme;
+  const strongOutline = alpha(palette.text.secondary, 0.5);
+  const hoverOutline = alpha(palette.text.secondary, 0.72);
+  return createTheme(sharedTheme, {
+    components: {
+      MuiSelect: {
+        defaultProps: {
+          MenuProps: {
+            PaperProps: {
+              sx: {
+                backgroundColor: palette.background.dropdownMenu,
+                backgroundImage: "none"
+              }
+            }
+          }
+        }
+      },
+      MuiTypography: {
+        styleOverrides: {
+          // El microfrontend no controla el color del body de root. Mantener
+          // un foreground explícito evita heredar texto oscuro del shell.
+          root: { color: palette.text.primary }
+        }
+      },
+      MuiPaper: {
+        styleOverrides: {
+          root: {
+            backgroundColor: palette.background.paper,
+            backgroundImage: "none"
+          },
+          outlined: {
+            borderColor: palette.divider
+          }
+        }
+      },
+      MuiCard: {
+        styleOverrides: {
+          root: {
+            backgroundColor: palette.background.paper,
+            backgroundImage: "none",
+            borderColor: palette.divider
+          }
+        }
+      },
+      MuiDialog: {
+        styleOverrides: {
+          paper: {
+            backgroundColor: palette.background.dropdownMenu,
+            backgroundImage: "none",
+            border: `1px solid ${palette.divider}`
+          }
+        }
+      },
+      MuiDrawer: {
+        styleOverrides: {
+          paper: {
+            backgroundColor: palette.background.dropdownMenu,
+            backgroundImage: "none",
+            borderColor: palette.divider
+          }
+        }
+      },
+      MuiPopover: {
+        styleOverrides: {
+          paper: {
+            backgroundColor: palette.background.dropdownMenu,
+            backgroundImage: "none",
+            border: `1px solid ${palette.divider}`
+          }
+        }
+      },
+      MuiMenu: {
+        styleOverrides: {
+          paper: {
+            backgroundColor: palette.background.dropdownMenu,
+            backgroundImage: "none",
+            border: `1px solid ${palette.divider}`
+          }
+        }
+      },
+      MuiOutlinedInput: {
+        styleOverrides: {
+          root: {
+            backgroundColor: alpha(palette.background.default, 0.34),
+            "& .MuiOutlinedInput-notchedOutline": {
+              borderColor: strongOutline
+            },
+            "&:hover .MuiOutlinedInput-notchedOutline": {
+              borderColor: hoverOutline
+            },
+            "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+              borderColor: palette.primary.light,
+              borderWidth: 2
+            },
+            "&.Mui-disabled .MuiOutlinedInput-notchedOutline": {
+              borderColor: alpha(palette.text.disabled, 0.36)
+            }
+          },
+          input: {
+            "&::placeholder": {
+              color: palette.text.disabled,
+              opacity: 1
+            }
+          }
+        }
+      },
+      MuiInputLabel: {
+        styleOverrides: {
+          root: {
+            color: palette.text.secondary,
+            "&.Mui-focused": { color: palette.primary.light },
+            "&.Mui-disabled": { color: palette.text.disabled }
+          }
+        }
+      },
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            "&.Mui-disabled": {
+              color: palette.text.disabled,
+              borderColor: alpha(palette.text.disabled, 0.38)
+            }
+          },
+          containedPrimary: {
+            backgroundColor: palette.primary.main,
+            color: palette.primary.contrastText,
+            "&:hover": { backgroundColor: palette.primary.dark }
+          },
+          outlined: {
+            color: palette.primary.light,
+            borderColor: alpha(palette.primary.light, 0.72),
+            "&:hover": {
+              color: palette.primary.light,
+              borderColor: palette.primary.light,
+              backgroundColor: alpha(palette.primary.light, 0.1)
+            }
+          },
+          textPrimary: {
+            color: palette.primary.light,
+            "&:hover": {
+              backgroundColor: alpha(palette.primary.light, 0.1)
+            }
+          }
+        }
+      },
+      MuiIconButton: {
+        styleOverrides: {
+          root: {
+            color: palette.text.secondary,
+            "&:hover": {
+              color: palette.text.primary,
+              backgroundColor: palette.action.hover
+            },
+            "&.MuiIconButton-colorPrimary": { color: palette.primary.light },
+            "&.MuiIconButton-colorError": { color: palette.error.light },
+            "&.Mui-disabled": { color: palette.text.disabled }
+          }
+        }
+      },
+      MuiChip: {
+        styleOverrides: {
+          root: {
+            color: palette.text.primary,
+            backgroundColor: alpha(palette.text.primary, 0.07),
+            borderColor: strongOutline,
+            "& .MuiChip-icon": { color: "inherit" },
+            "&.MuiChip-colorSuccess": {
+              color: palette.success.light,
+              backgroundColor: palette.success.dark,
+              borderColor: alpha(palette.success.light, 0.46)
+            },
+            "&.MuiChip-colorWarning": {
+              color: palette.warning.light,
+              backgroundColor: palette.warning.dark,
+              borderColor: alpha(palette.warning.light, 0.46)
+            },
+            "&.MuiChip-colorError": {
+              color: palette.error.light,
+              backgroundColor: palette.error.dark,
+              borderColor: alpha(palette.error.light, 0.46)
+            },
+            "&.MuiChip-colorInfo": {
+              color: palette.info.light,
+              backgroundColor: palette.info.dark,
+              borderColor: alpha(palette.info.light, 0.46)
+            }
+          }
+        }
+      },
+      MuiAlert: {
+        styleOverrides: {
+          root: { border: "1px solid currentColor" },
+          standardSuccess: {
+            color: palette.success.light,
+            backgroundColor: palette.success.dark
+          },
+          standardWarning: {
+            color: palette.warning.light,
+            backgroundColor: palette.warning.dark
+          },
+          standardError: {
+            color: palette.error.light,
+            backgroundColor: palette.error.dark
+          },
+          standardInfo: {
+            color: palette.info.light,
+            backgroundColor: palette.info.dark
+          }
+        }
+      },
+      MuiTableHead: {
+        styleOverrides: {
+          root: { backgroundColor: palette.cellHeader }
+        }
+      },
+      MuiTableCell: {
+        styleOverrides: {
+          root: { borderColor: palette.divider },
+          head: { color: palette.text.primary, fontWeight: 700 }
+        }
+      },
+      MuiTableRow: {
+        styleOverrides: {
+          root: {
+            "&:hover": { backgroundColor: palette.action.hover },
+            "&.Mui-selected": {
+              backgroundColor: palette.action.selected,
+              "&:hover": { backgroundColor: palette.action.selected }
+            }
+          }
+        }
+      },
+      MuiTabs: {
+        styleOverrides: {
+          indicator: { backgroundColor: palette.primary.light }
+        }
+      },
+      MuiTab: {
+        styleOverrides: {
+          root: {
+            color: palette.text.secondary,
+            "&.Mui-selected": { color: palette.primary.light }
+          }
+        }
+      },
+      MuiSwitch: {
+        styleOverrides: {
+          switchBase: {
+            color: palette.text.disabled,
+            "&.Mui-checked": {
+              color: palette.primary.light,
+              "& + .MuiSwitch-track": {
+                backgroundColor: palette.primary.light,
+                opacity: 0.5
+              }
+            }
+          },
+          track: {
+            backgroundColor: palette.text.disabled,
+            opacity: 0.34
+          }
+        }
+      },
+      MuiTooltip: {
+        styleOverrides: {
+          tooltip: {
+            color: palette.text.primary,
+            backgroundColor: palette.background.tooltip,
+            border: `1px solid ${strongOutline}`
+          },
+          arrow: { color: palette.background.tooltip }
+        }
+      },
+      MuiDivider: {
+        styleOverrides: {
+          root: { borderColor: palette.divider }
+        }
+      },
+      MuiLink: {
+        styleOverrides: {
+          root: { color: palette.primary.light }
+        }
+      }
+    }
+  });
+};
+
+const MuiComponentsConfig = (themeRedux, options = {}) => {
+  const { transparentModal = false, autocompleteZIndex = 11 } = options;
+  const bg = themeRedux.palette.background;
+  const sharedTheme = createTheme$1({
+    ...themeRedux,
+    components: {
+      MuiSelect: {
+        defaultProps: {
+          MenuProps: {
+            PaperProps: {
+              sx: {
+                backgroundColor: bg.panel,
+                backgroundImage: "linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))"
+              }
+            }
+          }
+        }
+      },
+      MuiAutocomplete: {
+        styleOverrides: {
+          popper: {
+            zIndex: autocompleteZIndex,
+            "& div": {
+              backgroundColor: bg.panel
+            }
+          }
+        }
+      },
+      MuiPaper: {
+        styleOverrides: {
+          root: {
+            backgroundColor: bg.panel,
+            backgroundImage: "linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))"
+          }
+        }
+      },
+      MuiMenu: {
+        styleOverrides: {
+          paper: {
+            backgroundColor: bg.panel,
+            backgroundImage: "linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))"
+          }
+        }
+      },
+      MuiList: {
+        styleOverrides: {
+          root: {
+            padding: 0
+          }
+        }
+      },
+      MuiModal: {
+        styleOverrides: {
+          root: transparentModal ? {
+            background: "transparent",
+            "& .MuiBackdrop-root": {
+              background: "transparent",
+              border: "none"
+            }
+          } : {}
+        }
+      },
+      MuiTypography: {
+        styleOverrides: {
+          root: {
+            color: themeRedux.palette.text.primary
+          }
+        }
+      },
+      MuiChip: {
+        styleOverrides: {
+          root: {
+            color: themeRedux.palette.text.primary,
+            border: "1px solid rgba(0, 0, 0, 0.1)",
+            borderRadius: "4px",
+            height: "20px",
+            fontSize: "0.7125rem"
+          }
+        }
+      },
+      MuiListSubheader: {
+        styleOverrides: {
+          root: {
+            backgroundColor: bg.accordionHeader
+          }
+        }
+      },
+      MuiButton: {
+        styleOverrides: {
+          outlined: {
+            color: themeRedux.palette.mode === "light" ? themeRedux.palette.primary.dark : themeRedux.palette.primary.light,
+            borderColor: themeRedux.palette.mode === "light" ? themeRedux.palette.primary.dark : themeRedux.palette.primary.light,
+            "&:hover": {
+              borderColor: themeRedux.palette.mode === "light" ? themeRedux.palette.primary.main : themeRedux.palette.primary.light,
+              color: themeRedux.palette.mode === "light" ? themeRedux.palette.primary.main : themeRedux.palette.primary.light
+            }
+          }
+        }
+      }
+    }
+  });
+  return applyDarkThemeComponents(sharedTheme);
+};
+
+const UPDATE_THEME_TYPE = "Theme/updateTheme";
+const themeUpdateFulfilled = /* @__PURE__ */ createAction(
+  `${UPDATE_THEME_TYPE}/fulfilled`
+);
+
+const THEME_PREFERENCES = ["light", "dark", "system"];
+const LEGACY_THEME_NAMES = ["lightBlueIndigo", "lightBlue", "lightRed", "lightGreen", "lightPink", "lightPurple", "lightTeal", "lightLime", "lightYellow", "lightAmber", "lightOrange", "lightBrown", "lightGray", "darkBlue", "darkBlack"];
+const isValidThemeName = (name) => THEME_PREFERENCES.includes(name) || LEGACY_THEME_NAMES.includes(name);
+const normalizeThemePreference = (name) => {
+  if (name === "light" || name === "dark" || name === "system") return name;
+  if (name && LEGACY_THEME_NAMES.includes(name)) return name.startsWith("dark") ? "dark" : "light";
+  return "system";
+};
+const systemMedia = () => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-color-scheme: dark)") : void 0;
+const resolveThemePreference = (preference, systemDark = systemMedia()?.matches ?? false) => preference === "system" ? systemDark ? "dark" : "light" : preference;
+const observeThemePreference = (preference, listener) => {
+  if (preference !== "system") {
+    listener(preference);
+    return () => {
+    };
+  }
+  const media = systemMedia();
+  listener(resolveThemePreference(preference, media?.matches ?? false));
+  if (!media) return () => {
+  };
+  const change = (event) => listener(event.matches ? "dark" : "light");
+  if (typeof media.addEventListener === "function") {
+    media.addEventListener("change", change);
+    return () => media.removeEventListener("change", change);
+  }
+  media.addListener(change);
+  return () => media.removeListener(change);
+};
+
+const themeUrl = (spaceId) => `https://agent-api.trii.app/api/v1/settings/${spaceId}/user/setTheme`;
+const updateTheme = /* @__PURE__ */ createAsyncThunk(UPDATE_THEME_TYPE, async (theme, { getState }) => {
+  const { uid = "", spaceId = "" } = getState().User.user ?? {};
+  const themeJson = JSON.stringify({ theme, uid });
+  const response = await axios.put(
+    themeUrl(spaceId),
+    themeJson,
+    { headers: { "Content-Type": "application/json" } }
+  );
+  if (!isValidThemeName(response.data.theme)) throw new Error("Invalid theme response");
+  return response.data;
+});
+
+const primary = { main: "#246FB5", light: "#78B7F2", dark: "#195A96", contrastText: "#FFFFFF" };
+const lightTheme = createTheme$1({
+  name: "light",
+  palette: {
+    mode: "light",
+    contrastThreshold: 4.5,
+    primary,
+    secondary: { main: "#526078", light: "#728099", dark: "#38445A", contrastText: "#FFFFFF" },
+    error: { main: "#BD3446", light: "#FCECEF", dark: "#932536", contrastText: "#FFFFFF" },
+    warning: { main: "#946000", light: "#FFF5DF", dark: "#704800", contrastText: "#FFFFFF" },
+    info: { main: "#176B9B", light: "#EAF4FC", dark: "#125174", contrastText: "#FFFFFF" },
+    success: { main: "#237547", light: "#EAF6EE", dark: "#185935", contrastText: "#FFFFFF" },
+    background: {
+      default: "#F4F6FA",
+      paper: "#FFFFFF",
+      mainCenter: "#F4F6FA",
+      mainGradient: "linear-gradient(120deg, #195A96, #246FB5)",
+      navMenu: "#EDF1F7",
+      dropdownMenu: "#FFFFFF",
+      panel: "#FFFFFF",
+      tooltip: "#EDF1F7",
+      accordionHeader: "#EDF1F7",
+      panelHeader: "#EDF1F7",
+      panelCenter: "#F8FAFD",
+      panelGradient: "#EDF1F7",
+      selectedItem: "#E5EFFA"
+    },
+    text: { primary: "#202C3E", secondary: "#526078", disabled: "#7C8798", colorMain: "#202C3E" },
+    action: { active: "#526078", hover: "rgba(36, 111, 181, 0.06)", selected: "rgba(36, 111, 181, 0.12)", disabled: "#8893A3", disabledBackground: "#E8ECF2" },
+    divider: "#D7DEE9",
+    containerBox: { default: "#FFFFFF", main: "#F8FAFD" },
+    dropdownBox: "#FFFFFF",
+    color: { icons: "#526078" },
+    cellHeader: "#EDF1F7",
+    Skeleton: { bg: "#E4EAF2" },
+    messageBox: "#E5EFFA",
+    boxShadow: "rgba(25, 42, 66, 0.12)",
+    disabled: "#8893A3"
+  }
+});
+const darkTheme = createTheme$1({
+  name: "dark",
+  palette: {
+    mode: "dark",
+    contrastThreshold: 4.5,
+    primary,
+    secondary: { main: "#B7B5D9", light: "#D6D4EF", dark: "#46415F", contrastText: "#171824" },
+    error: { main: "#F06B7A", light: "#FF9AA8", dark: "#4A1D24", contrastText: "#2B0D12" },
+    warning: { main: "#E5A93B", light: "#FFD27A", dark: "#493515", contrastText: "#2A1B05" },
+    info: { main: "#4FAFE8", light: "#7CCBFF", dark: "#123955", contrastText: "#082033" },
+    success: { main: "#43C17A", light: "#75E0A7", dark: "#143D2B", contrastText: "#092116" },
+    background: {
+      default: "#111520",
+      paper: "#1B2333",
+      mainCenter: "#151C2A",
+      mainGradient: "linear-gradient(120deg, #131B2B, #242237)",
+      navMenu: "#0E121C",
+      dropdownMenu: "#252D40",
+      panel: "#1B2333",
+      tooltip: "#30384F",
+      accordionHeader: "#20283A",
+      panelHeader: "#20283A",
+      panelCenter: "#222B3E",
+      panelGradient: "#2C2B40",
+      selectedItem: "#293E59"
+    },
+    text: { primary: "#F1F4FA", secondary: "#BBC6D8", disabled: "#8793A6", colorMain: "#F1F4FA" },
+    action: { active: "#BBC6D8", hover: "rgba(241, 244, 250, 0.07)", selected: "rgba(120, 183, 242, 0.16)", disabled: "rgba(187, 198, 216, 0.45)", disabledBackground: "rgba(187, 198, 216, 0.10)" },
+    divider: "rgba(187, 198, 216, 0.22)",
+    containerBox: { default: "#1B2333", main: "#222B3E" },
+    dropdownBox: "#252D40",
+    color: { icons: "#BBC6D8" },
+    cellHeader: "#20283A",
+    Skeleton: { bg: "#30384F" },
+    messageBox: "#203953",
+    boxShadow: "rgba(0, 0, 0, 0.40)",
+    disabled: "rgba(187, 198, 216, 0.45)"
+  }
+});
+const lightBlueIndigo = { ...lightTheme, name: "lightBlueIndigo" };
+const lightBlue = { ...lightTheme, name: "lightBlue" };
+const lightRed = { ...lightTheme, name: "lightRed" };
+const lightGreen = { ...lightTheme, name: "lightGreen" };
+const lightPink = { ...lightTheme, name: "lightPink" };
+const lightPurple = { ...lightTheme, name: "lightPurple" };
+const lightTeal = { ...lightTheme, name: "lightTeal" };
+const lightLime = { ...lightTheme, name: "lightLime" };
+const lightYellow = { ...lightTheme, name: "lightYellow" };
+const lightAmber = { ...lightTheme, name: "lightAmber" };
+const lightOrange = { ...lightTheme, name: "lightOrange" };
+const lightBrown = { ...lightTheme, name: "lightBrown" };
+const lightGray = { ...lightTheme, name: "lightGray" };
+const darkBlue = { ...darkTheme, name: "darkBlue" };
+const darkBlack = { ...darkTheme, name: "darkBlack" };
+
+const THEME_STORAGE_KEY = "trii-theme";
+const getSavedPreference = () => {
+  try {
+    return normalizeThemePreference(localStorage.getItem(THEME_STORAGE_KEY));
+  } catch {
+    return "system";
+  }
+};
+const saveTheme = (theme) => {
+  try {
+    localStorage.setItem(THEME_STORAGE_KEY, theme);
+  } catch {
+  }
+};
+const savedPreference = getSavedPreference();
+const savedMode = resolveThemePreference(savedPreference);
+const initialState = {
+  themeSelected: savedMode === "dark" ? darkTheme : lightTheme,
+  preference: savedPreference,
+  darkMode: savedMode === "dark",
+  toggleStatus: "idle"
+};
+const themeSlice = createSlice({
+  name: "Theme",
+  initialState,
+  reducers: {
+    /** Cambia el tema por nombre. */
+    toggleTheme: (state, action) => {
+      applyPreference(state, action.payload);
+    },
+    /** Local update from observeThemePreference; never overwrite the saved system choice. */
+    systemThemeChanged: (state, action) => {
+      if (state.preference !== "system") return;
+      Object.assign(state, { themeSelected: action.payload === "dark" ? darkTheme : lightTheme, darkMode: action.payload === "dark", toggleStatus: "toggled" });
+    },
+    /** Alterna el modo oscuro. */
+    toggleModeTheme: (state) => {
+      applyPreference(state, state.darkMode ? "light" : "dark");
+    }
+  },
+  extraReducers: (builder) => {
+    builder.addCase(themeUpdateFulfilled, (state, action) => {
+      applyPreference(state, action.payload.theme);
+    });
+  }
+});
+function applyPreference(state, name) {
+  const preference = normalizeThemePreference(name);
+  const mode = resolveThemePreference(preference);
+  saveTheme(name);
+  const base = mode === "dark" ? darkTheme : lightTheme;
+  const themeSelected = name === "system" || name === "light" || name === "dark" ? base : { ...base, name };
+  Object.assign(state, { preference, themeSelected, darkMode: mode === "dark", toggleStatus: "toggled" });
+}
+const selectThemePreference = (state) => state.Theme.preference;
+const { toggleTheme, toggleModeTheme, systemThemeChanged } = themeSlice.actions;
+const selectThemeToggleStatus = (state) => state.Theme.toggleStatus;
+const selectTheme = (state) => state.Theme.themeSelected;
+const selectDarkTheme = (state) => state.Theme.darkMode;
+const selectedTheme = selectTheme;
+const selectedDarkTheme = selectDarkTheme;
+var themeSlice$1 = themeSlice.reducer;
+
+export { MuiComponentsConfig, THEME_PREFERENCES, darkBlack, darkBlue, darkTheme, isValidThemeName, lightAmber, lightBlue, lightBlueIndigo, lightBrown, lightGray, lightGreen, lightLime, lightOrange, lightPink, lightPurple, lightRed, lightTeal, lightTheme, lightYellow, normalizeThemePreference, observeThemePreference, resolveThemePreference, selectDarkTheme, selectTheme, selectThemePreference, selectThemeToggleStatus, selectedDarkTheme, selectedTheme, systemThemeChanged, themeSlice$1 as themeReducer, toggleModeTheme, toggleTheme, updateTheme };
 //# sourceMappingURL=theme.js.map