@trii/components 3.1.6 → 3.1.8

package/dist/cjs/theme.js

@@ -1,2 +1,644 @@
-"use strict";var s=require("@mui/material"),a=require("@mui/material/styles"),g=require("@reduxjs/toolkit"),x=require("axios");function f(r){return r&&r.__esModule?r:{default:r}}var O=f(x);const A=r=>{if(r.palette.mode!=="dark")return r;const{palette:e}=r,o=a.alpha(e.text.secondary,.5),i=a.alpha(e.text.secondary,.72);return a.createTheme(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:a.alpha(e.background.default,.34),"& .MuiOutlinedInput-notchedOutline":{borderColor:o},"&:hover .MuiOutlinedInput-notchedOutline":{borderColor:i},"&.Mui-focused .MuiOutlinedInput-notchedOutline":{borderColor:e.primary.light,borderWidth:2},"&.Mui-disabled .MuiOutlinedInput-notchedOutline":{borderColor:a.alpha(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:a.alpha(e.text.disabled,.38)}},containedPrimary:{backgroundColor:e.primary.main,color:e.primary.contrastText,"&:hover":{backgroundColor:e.primary.dark}},outlined:{color:e.primary.light,borderColor:a.alpha(e.primary.light,.72),"&:hover":{color:e.primary.light,borderColor:e.primary.light,backgroundColor:a.alpha(e.primary.light,.1)}},textPrimary:{color:e.primary.light,"&:hover":{backgroundColor:a.alpha(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:a.alpha(e.text.primary,.07),borderColor:o,"& .MuiChip-icon":{color:"inherit"},"&.MuiChip-colorSuccess":{color:e.success.light,backgroundColor:e.success.dark,borderColor:a.alpha(e.success.light,.46)},"&.MuiChip-colorWarning":{color:e.warning.light,backgroundColor:e.warning.dark,borderColor:a.alpha(e.warning.light,.46)},"&.MuiChip-colorError":{color:e.error.light,backgroundColor:e.error.dark,borderColor:a.alpha(e.error.light,.46)},"&.MuiChip-colorInfo":{color:e.info.light,backgroundColor:e.info.dark,borderColor:a.alpha(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}}}}})},w=(r,e={})=>{const{transparentModal:o=!1,autocompleteZIndex:i=11}=e,l=r.palette.background,d=s.createTheme({...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:i,"& 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 A(d)},p="Theme/updateTheme",D=g.createAction(`${p}/fulfilled`),m=["light","dark","system"],b=["lightBlueIndigo","lightBlue","lightRed","lightGreen","lightPink","lightPurple","lightTeal","lightLime","lightYellow","lightAmber","lightOrange","lightBrown","lightGray","darkBlue","darkBlack"],k=r=>m.includes(r)||b.includes(r),h=r=>r==="light"||r==="dark"||r==="system"?r:r&&b.includes(r)?r.startsWith("dark")?"dark":"light":"system",F=()=>typeof window<"u"&&typeof window.matchMedia=="function"?window.matchMedia("(prefers-color-scheme: dark)"):void 0,c=(r,e=F()?.matches??!1)=>r==="system"?e?"dark":"light":r,P=(r,e)=>{if(r!=="system")return e(r),()=>{};const o=F();if(e(c(r,o?.matches??!1)),!o)return()=>{};const i=l=>e(l.matches?"dark":"light");return typeof o.addEventListener=="function"?(o.addEventListener("change",i),()=>o.removeEventListener("change",i)):(o.addListener(i),()=>o.removeListener(i))},I=r=>`https://agent-api.trii.app/api/v1/settings/${r}/user/setTheme`,S=g.createAsyncThunk(p,async(r,{getState:e})=>{const{uid:o="",spaceId:i=""}=e().User.user??{},l=JSON.stringify({theme:r,uid:o}),d=await O.default.put(I(i),l,{headers:{"Content-Type":"application/json"}});if(!k(d.data.theme))throw new Error("Invalid theme response");return d.data}),y={main:"#246FB5",light:"#78B7F2",dark:"#195A96",contrastText:"#FFFFFF"},t=s.createTheme({name:"light",palette:{mode:"light",contrastThreshold:4.5,primary:y,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.createTheme({name:"dark",palette:{mode:"dark",contrastThreshold:4.5,primary:y,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)"}}),L={...t,name:"lightBlueIndigo"},G={...t,name:"lightBlue"},H={...t,name:"lightRed"},R={...t,name:"lightGreen"},_={...t,name:"lightPink"},$={...t,name:"lightPurple"},N={...t,name:"lightTeal"},Y={...t,name:"lightLime"},W={...t,name:"lightYellow"},q={...t,name:"lightAmber"},z={...t,name:"lightOrange"},j={...t,name:"lightBrown"},U={...t,name:"lightGray"},V={...n,name:"darkBlue"},J={...n,name:"darkBlack"},C="trii-theme",Z=()=>{try{return h(localStorage.getItem(C))}catch{return"system"}},K=r=>{try{localStorage.setItem(C,r)}catch{}},M=Z(),T=c(M),Q={themeSelected:T==="dark"?n:t,preference:M,darkMode:T==="dark",toggleStatus:"idle"},v=g.createSlice({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(D,(e,o)=>{u(e,o.payload.theme)})}});function u(r,e){const o=h(e),i=c(o);K(e);const l=i==="dark"?n:t,d=e==="system"||e==="light"||e==="dark"?l:{...l,name:e};Object.assign(r,{preference:o,themeSelected:d,darkMode:i==="dark",toggleStatus:"toggled"})}const X=r=>r.Theme.preference,{toggleTheme:ee,toggleModeTheme:re,systemThemeChanged:oe}=v.actions,te=r=>r.Theme.toggleStatus,B=r=>r.Theme.themeSelected,E=r=>r.Theme.darkMode,ae=B,ie=E;var le=v.reducer;exports.MuiComponentsConfig=w,exports.THEME_PREFERENCES=m,exports.darkBlack=J,exports.darkBlue=V,exports.darkTheme=n,exports.isValidThemeName=k,exports.lightAmber=q,exports.lightBlue=G,exports.lightBlueIndigo=L,exports.lightBrown=j,exports.lightGray=U,exports.lightGreen=R,exports.lightLime=Y,exports.lightOrange=z,exports.lightPink=_,exports.lightPurple=$,exports.lightRed=H,exports.lightTeal=N,exports.lightTheme=t,exports.lightYellow=W,exports.normalizeThemePreference=h,exports.observeThemePreference=P,exports.resolveThemePreference=c,exports.selectDarkTheme=E,exports.selectTheme=B,exports.selectThemePreference=X,exports.selectThemeToggleStatus=te,exports.selectedDarkTheme=ie,exports.selectedTheme=ae,exports.systemThemeChanged=oe,exports.themeReducer=le,exports.toggleModeTheme=re,exports.toggleTheme=ee,exports.updateTheme=S;
+'use strict';
+
+var material = require('@mui/material');
+var styles = require('@mui/material/styles');
+var toolkit = require('@reduxjs/toolkit');
+var axios = require('axios');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var axios__default = /*#__PURE__*/_interopDefault(axios);
+
+const applyDarkThemeComponents = (sharedTheme) => {
+  if (sharedTheme.palette.mode !== "dark") return sharedTheme;
+  const { palette } = sharedTheme;
+  const strongOutline = styles.alpha(palette.text.secondary, 0.5);
+  const hoverOutline = styles.alpha(palette.text.secondary, 0.72);
+  return styles.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: styles.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: styles.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: styles.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: styles.alpha(palette.primary.light, 0.72),
+            "&:hover": {
+              color: palette.primary.light,
+              borderColor: palette.primary.light,
+              backgroundColor: styles.alpha(palette.primary.light, 0.1)
+            }
+          },
+          textPrimary: {
+            color: palette.primary.light,
+            "&:hover": {
+              backgroundColor: styles.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: styles.alpha(palette.text.primary, 0.07),
+            borderColor: strongOutline,
+            "& .MuiChip-icon": { color: "inherit" },
+            "&.MuiChip-colorSuccess": {
+              color: palette.success.light,
+              backgroundColor: palette.success.dark,
+              borderColor: styles.alpha(palette.success.light, 0.46)
+            },
+            "&.MuiChip-colorWarning": {
+              color: palette.warning.light,
+              backgroundColor: palette.warning.dark,
+              borderColor: styles.alpha(palette.warning.light, 0.46)
+            },
+            "&.MuiChip-colorError": {
+              color: palette.error.light,
+              backgroundColor: palette.error.dark,
+              borderColor: styles.alpha(palette.error.light, 0.46)
+            },
+            "&.MuiChip-colorInfo": {
+              color: palette.info.light,
+              backgroundColor: palette.info.dark,
+              borderColor: styles.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 = material.createTheme({
+    ...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__ */ toolkit.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__ */ toolkit.createAsyncThunk(UPDATE_THEME_TYPE, async (theme, { getState }) => {
+  const { uid = "", spaceId = "" } = getState().User.user ?? {};
+  const themeJson = JSON.stringify({ theme, uid });
+  const response = await axios__default.default.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 = material.createTheme({
+  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 = material.createTheme({
+  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 = toolkit.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;
+
+exports.MuiComponentsConfig = MuiComponentsConfig;
+exports.THEME_PREFERENCES = THEME_PREFERENCES;
+exports.darkBlack = darkBlack;
+exports.darkBlue = darkBlue;
+exports.darkTheme = darkTheme;
+exports.isValidThemeName = isValidThemeName;
+exports.lightAmber = lightAmber;
+exports.lightBlue = lightBlue;
+exports.lightBlueIndigo = lightBlueIndigo;
+exports.lightBrown = lightBrown;
+exports.lightGray = lightGray;
+exports.lightGreen = lightGreen;
+exports.lightLime = lightLime;
+exports.lightOrange = lightOrange;
+exports.lightPink = lightPink;
+exports.lightPurple = lightPurple;
+exports.lightRed = lightRed;
+exports.lightTeal = lightTeal;
+exports.lightTheme = lightTheme;
+exports.lightYellow = lightYellow;
+exports.normalizeThemePreference = normalizeThemePreference;
+exports.observeThemePreference = observeThemePreference;
+exports.resolveThemePreference = resolveThemePreference;
+exports.selectDarkTheme = selectDarkTheme;
+exports.selectTheme = selectTheme;
+exports.selectThemePreference = selectThemePreference;
+exports.selectThemeToggleStatus = selectThemeToggleStatus;
+exports.selectedDarkTheme = selectedDarkTheme;
+exports.selectedTheme = selectedTheme;
+exports.systemThemeChanged = systemThemeChanged;
+exports.themeReducer = themeSlice$1;
+exports.toggleModeTheme = toggleModeTheme;
+exports.toggleTheme = toggleTheme;
+exports.updateTheme = updateTheme;
 //# sourceMappingURL=theme.js.map