@open-ui-kit/core 2.0.4 → 2.1.0

package/index.umd.js

@@ -10430,7 +10430,7 @@
         darkModeFooterBottom,
         ...Array(17).fill("none"),
     ];
-    const palette$1 = {
+    const palette$2 = {
         mode: "dark",
         primary: bluePalette,
         secondary: Object.assign(Object.assign({}, surfaceDarkPalette), { main: surfaceDarkPalette[500] }),
@@ -10460,7 +10460,7 @@
     };
     const theme$1 = material.createTheme({
         breakpoints,
-        palette: palette$1,
+        palette: palette$2,
         typography,
         mixins: commonMixins,
     });
@@ -10497,6 +10497,519 @@
     };
     const darkTheme = material.createTheme(theme$1, darkThemeOptions);
 
+    const iocSurface50 = "rgba(255, 255, 255, 0.02)";
+    const iocSurface100 = "rgba(255, 255, 255, 0.035)";
+    const iocSurface200 = "rgba(255, 255, 255, 0.06)";
+    const iocSurface300 = "rgba(255, 255, 255, 0.09)";
+    const iocSurface400 = "rgba(255, 255, 255, 0.12)";
+    const iocSurface500 = "rgba(255, 255, 255, 0.16)";
+    const iocSurfacePalette = {
+        50: iocSurface50,
+        100: iocSurface100,
+        200: iocSurface200,
+        300: iocSurface300,
+        400: iocSurface400,
+        500: iocSurface500,
+    };
+    const iocBackdrop900 = "#020508";
+    const iocBackdrop800 = "#03080F";
+    const iocBackdrop700 = "#050C18";
+    const iocBackdrop600 = "#07111F";
+    const iocBackdrop500 = "#091428";
+    const iocBackdropPalette = {
+        900: iocBackdrop900,
+        800: iocBackdrop800,
+        700: iocBackdrop700,
+        600: iocBackdrop600,
+        500: iocBackdrop500};
+    const iocTeal50 = "#E6F9FE";
+    const iocTeal100 = "#B3EEFB";
+    const iocTeal200 = "#7DE0F8";
+    const iocTeal300 = "#40D0F4";
+    const iocTeal400 = "#1AC6F0";
+    const iocTeal500 = "#00BCEB";
+    const iocTeal600 = "#00A0D1";
+    const iocTeal700 = "#0082AD";
+    const iocTeal800 = "#006B8A";
+    const iocTeal900 = "#003D54";
+    const iocTealAlpha40 = "rgba(0, 188, 235, 0.40)";
+    const iocTealAlpha20 = "rgba(0, 188, 235, 0.20)";
+    const iocTealAlpha10 = "rgba(0, 188, 235, 0.10)";
+    const iocTealAlpha05 = "rgba(0, 188, 235, 0.05)";
+    const iocTealPalette = {
+        50: iocTeal50,
+        100: iocTeal100,
+        200: iocTeal200,
+        300: iocTeal300,
+        400: iocTeal400,
+        500: iocTeal500,
+        600: iocTeal600,
+        700: iocTeal700,
+        800: iocTeal800,
+        900: iocTeal900,
+        alpha40: iocTealAlpha40,
+        alpha20: iocTealAlpha20,
+        alpha10: iocTealAlpha10,
+        alpha05: iocTealAlpha05,
+    };
+    const iocBlue500 = "#2B82F6";
+    const iocBlue400 = "#3B92FF";
+    const iocBlue600 = "#1E6FD9";
+    const iocBluePalette = {
+        400: iocBlue400,
+        500: iocBlue500,
+        600: iocBlue600,
+    };
+    const iocBorder100 = "rgba(255, 255, 255, 0.05)";
+    const iocBorder200 = "rgba(255, 255, 255, 0.07)";
+    const iocBorder300 = "rgba(255, 255, 255, 0.09)";
+    const iocBorder500 = "rgba(255, 255, 255, 0.18)";
+    const iocBorderPalette = {
+        100: iocBorder100,
+        200: iocBorder200,
+        300: iocBorder300,
+        500: iocBorder500,
+    };
+    const iocTextPrimary = "rgba(255, 255, 255, 0.94)";
+    const iocTextSecondary = "rgba(255, 255, 255, 0.55)";
+    const iocTextTertiary = "rgba(255, 255, 255, 0.32)";
+    const iocTextDisabled = "rgba(255, 255, 255, 0.22)";
+    const iocPageBackground = `
+  radial-gradient(ellipse 130% 90% at -15% -5%, rgba(0, 70, 160, 0.50) 0%, rgba(0, 40, 100, 0.15) 45%, transparent 65%),
+  radial-gradient(ellipse  80% 60% at 60% 110%, rgba(0, 30,  80, 0.30) 0%, transparent 60%),
+  linear-gradient(160deg, #07111F 0%, #050C18 40%, #030810 100%)
+`;
+    const iocShadowSm = "0 2px 8px rgba(0, 0, 0, 0.30)";
+    const iocShadowMd = "0 4px 16px rgba(0, 0, 0, 0.40)";
+    const iocShadowLg = "0 8px 32px rgba(0, 0, 0, 0.50)";
+`linear-gradient(180deg, ${iocTealPalette[400]} 0%, ${iocTealPalette[600]} 100%)`;
+`linear-gradient(180deg, ${iocBluePalette[500]} 0%, ${iocBluePalette[600]} 100%)`;
+`linear-gradient(180deg, ${redPalette[400]} 0%, ${redPalette[500]} 100%)`;
+`linear-gradient(135deg, ${iocTealPalette[400]} 0%, ${iocBluePalette[500]} 100%)`;
+`0 0 6px ${iocTealPalette[500]}CC, 0 0 16px ${iocTealPalette[500]}77, 0 0 28px ${iocTealPalette[500]}33`;
+`0 0 6px ${iocBluePalette[500]}CC, 0 0 16px ${iocBluePalette[500]}77, 0 0 28px ${iocBluePalette[500]}33`;
+`0 0 6px ${greenPalette[500]}CC, 0 0 16px ${greenPalette[500]}77, 0 0 28px ${greenPalette[500]}33`;
+`0 0 6px ${lightOrangePalette[500]}CC, 0 0 16px ${lightOrangePalette[500]}77, 0 0 28px ${lightOrangePalette[500]}33`;
+`0 0 6px ${redPalette[500]}CC, 0 0 16px ${redPalette[500]}77, 0 0 28px ${redPalette[500]}33`;
+`0 0 6px ${orangePalette[500]}CC, 0 0 16px ${orangePalette[500]}77, 0 0 28px ${orangePalette[500]}33`;
+`0 0 6px ${lightBluePalette[500]}CC, 0 0 16px ${lightBluePalette[500]}77, 0 0 28px ${lightBluePalette[500]}33`;
+`0 0 6px ${iocTealPalette[600]}99, 0 0 14px ${iocTealPalette[600]}44`;
+
+    const iocVars = {
+        brandOrange: lightOrangePalette[500],
+        brandOrangeDark: lightOrangePalette[900],
+        brandBlue: iocTealPalette[500],
+        brandMidnightBlue: iocBackdropPalette[500],
+        agentcyYellow: lightOrangePalette[500],
+        agentcyBlue: iocTealPalette[500],
+        agentcyDarkBlue: iocBackdropPalette[900],
+        baseTextDark: iocBackdropPalette[900],
+        baseTextStrong: iocTextPrimary,
+        baseTextDefault: iocTextSecondary,
+        baseTextMedium: iocTextTertiary,
+        baseTextWeak: iocTextDisabled,
+        baseTextInverse: iocBackdropPalette[900],
+        baseTextDisabled: iocTextDisabled,
+        baseBackgroundStrong: iocBackdropPalette[600],
+        baseBackgroundMedium: iocSurfacePalette[200],
+        baseBackgroundWeak: iocSurfacePalette[100],
+        baseBackgroundHover: iocSurfacePalette[300],
+        baseBorderDefault: iocBorderPalette[300],
+        baseBorderStrong: iocBorderPalette[500],
+        baseBorderMedium: iocBorderPalette[200],
+        baseBorderWeak: iocBorderPalette[100],
+        brandIconPrimaryDefault: iocTealPalette[500],
+        brandIconPrimaryWeak: iocTealPalette[200],
+        brandIconPrimaryMedium: iocTealPalette[400],
+        brandIconPrimaryStrong: iocTealPalette[700],
+        brandIconSecondaryDefault: iocBluePalette[500],
+        brandIconSecondaryWeak: iocBluePalette[400],
+        brandIconSecondaryMedium: iocBluePalette[500],
+        brandIconTertiaryDefault: lightOrangePalette[500],
+        brandIconTertiaryWeak: lightOrangePalette[200],
+        brandIconTertiaryMedium: lightOrangePalette[400],
+        brandBackgroundPrimaryDefault: iocTealPalette[500],
+        brandBackgroundPrimaryWeak: iocTealPalette.alpha10,
+        brandBackgroundPrimaryMedium: iocTealPalette.alpha20,
+        brandBackgroundSecondaryDefault: iocBluePalette[500],
+        brandLogoPrimary: iocTealPalette[400],
+        brandLogoSecondary: iocTextPrimary,
+        brandTextPrimary: iocTealPalette[400],
+        brandTextSecondary: iocTextPrimary,
+        brandTextTertiary: lightOrangePalette[500],
+        controlBackgroundDefault: iocSurfacePalette[200],
+        controlBackgroundDisabled: iocSurfacePalette[50],
+        controlBackgroundWeak: iocSurfacePalette[300],
+        controlBackgroundMedium: iocSurfacePalette[500],
+        controlBorderDefault: iocBorderPalette[300],
+        controlBorderStrong: iocBorderPalette[500],
+        controlBorderMedium: iocBorderPalette[200],
+        controlBorderWeak: iocBorderPalette[100],
+        controlBorderHover: iocTealPalette[500],
+        controlBorderActive: iocTealPalette[600],
+        controlBorderNegative: redPalette[500],
+        controlBorderDisabled: iocBorderPalette[100],
+        controlIconDefault: iocTextSecondary,
+        controlIconStrong: iocTextPrimary,
+        controlIconMedium: iocTextTertiary,
+        controlIconWeak: iocTextDisabled,
+        controlIconHover: iocTealPalette[400],
+        controlIconActive: iocTealPalette[500],
+        controlIconDisabled: iocTextDisabled,
+        controlFocusRingWeak: iocTealPalette.alpha10,
+        controlFocusRingStrong: iocTealPalette.alpha20,
+        interactivePrimaryDefaultDefault: iocTealPalette[500],
+        interactivePrimaryDefaultHover: iocTealPalette[400],
+        interactivePrimaryDefaultActive: iocTealPalette[600],
+        interactivePrimaryDefaultDisabled: iocTealPalette.alpha40,
+        interactivePrimaryWeakDefault: iocTealPalette.alpha10,
+        interactivePrimaryWeakHover: iocTealPalette.alpha20,
+        interactivePrimaryWeakActive: iocTealPalette.alpha40,
+        interactivePrimaryWeakDisabled: iocTealPalette.alpha05,
+        interactiveSecondaryDefaultDefault: iocBluePalette[500],
+        interactiveSecondaryDefaultHover: iocBluePalette[400],
+        interactiveSecondaryDefaultActive: iocBluePalette[600],
+        interactiveSecondaryDefaultDisabled: "rgba(43,130,246,0.40)",
+        interactiveSecondaryWeakDefault: iocSurfacePalette[200],
+        interactiveSecondaryWeakHover: iocSurfacePalette[300],
+        interactiveSecondaryWeakActive: iocSurfacePalette[400],
+        interactiveSecondaryWeakDisabled: iocSurfacePalette[100],
+        interactiveInverseBackgroundDefault: "rgba(255,255,255,0.90)",
+        interactiveInverseBackgroundHover: "rgba(255,255,255,0.95)",
+        interactiveInverseBackgroundActive: "rgba(255,255,255,0.85)",
+        interactiveInverseBackgroundDisabled: "rgba(255,255,255,0.40)",
+        interactiveInverseTextDefault: iocBackdropPalette[900],
+        interactiveInverseTextHover: iocBackdropPalette[700],
+        interactiveInverseTextActive: iocBackdropPalette[800],
+        interactiveInverseTextDisabled: "rgba(0,0,0,0.30)",
+        interactiveTextInDefault: iocTextPrimary,
+        interactiveTextInHover: iocTextPrimary,
+        interactiveTextInActive: iocTextPrimary,
+        interactiveTextInDisabled: iocTextDisabled,
+        interactiveTertiaryDefault: lightOrangePalette[500],
+        interactiveTertiaryHover: lightOrangePalette[400],
+        interactiveTertiaryActive: lightOrangePalette[600],
+        interactiveTertiaryDisabled: lightOrangePalette["alpha40"],
+        successBackgroundDefault: greenPalette[500],
+        successBackgroundDisabled: greenPalette[40],
+        successBackgroundHover: greenPalette[400],
+        successBackgroundActive: greenPalette[600],
+        successBackgroundWeak: "rgba(0, 185, 141, 0.10)",
+        successIconActive: greenPalette[600],
+        successIconDisabled: greenPalette[40],
+        successIconHover: greenPalette[400],
+        successIconDefault: greenPalette[500],
+        successTextActive: greenPalette[300],
+        successTextHover: greenPalette[200],
+        successTextDefault: greenPalette[300],
+        successTextInDisabled: greenPalette[10],
+        successTextInDefault: greyPalette[900],
+        successBorderDisabled: greenPalette[40],
+        successBorderActive: greenPalette[600],
+        successBorderHover: greenPalette[400],
+        successBorderDefault: greenPalette[500],
+        successBorderWeak: "rgba(0, 185, 141, 0.30)",
+        successIconInDisabled: greenPalette[10],
+        successIconInActive: greenPalette[200],
+        successIconInHover: greenPalette[100],
+        successIconInDefault: greenPalette[50],
+        negativeBackgroundHover: redPalette[400],
+        negativeBackgroundActive: redPalette[600],
+        negativeBackgroundDisabled: redPalette["alpha40"],
+        negativeBackgroundDefault: redPalette[500],
+        negativeBackgroundWeak: "rgba(198, 41, 83, 0.10)",
+        negativeTextDefault: redPalette[300],
+        negativeTextHover: redPalette[200],
+        negativeTextActive: redPalette[400],
+        negativeBorderActive: redPalette[600],
+        negativeBorderHover: redPalette[400],
+        negativeBorderDisabled: redPalette["alpha40"],
+        negativeBorderDefault: redPalette[500],
+        negativeBorderWeak: "rgba(198, 41, 83, 0.30)",
+        negativeIconDisabled: redPalette["alpha40"],
+        negativeIconActive: redPalette[600],
+        negativeIconHover: redPalette[400],
+        negativeIconDefault: redPalette[500],
+        negativeTextInDefault: redPalette[50],
+        negativeTextInDisabled: redPalette["alpha10"],
+        negativeIconInDefault: redPalette[50],
+        negativeIconInHover: redPalette[100],
+        negativeIconInActive: redPalette[200],
+        negativeIconInDisabled: redPalette["alpha10"],
+        excellentBackgroundDefault: lightBluePalette[600],
+        excellentBackgroundWeak: "rgba(31, 210, 255, 0.10)",
+        excellentBackgroundDisabled: lightBluePalette["alpha40"],
+        excellentBackgroundHover: lightBluePalette[500],
+        excellentBackgroundActive: lightBluePalette[700],
+        excellentTextDefault: lightBluePalette[200],
+        excellentTextHover: lightBluePalette[100],
+        excellentTextActive: lightBluePalette[300],
+        excellentTextInDefault: greyPalette[900],
+        excellentTextInDisabled: lightBluePalette["alpha10"],
+        excellentBorderDefault: lightBluePalette[600],
+        excellentBorderHover: lightBluePalette[500],
+        excellentBorderActive: lightBluePalette[700],
+        excellentBorderDisabled: lightBluePalette["alpha40"],
+        excellentBorderWeak: "rgba(31, 210, 255, 0.30)",
+        excellentIconDefault: lightBluePalette[500],
+        excellentIconHover: lightBluePalette[400],
+        excellentIconActive: lightBluePalette[600],
+        excellentIconDisabled: lightBluePalette["alpha40"],
+        excellentIconInDefault: lightBluePalette[50],
+        excellentIconInHover: lightBluePalette[100],
+        excellentIconInActive: lightBluePalette[200],
+        excellentIconInDisabled: lightBluePalette["alpha10"],
+        neutralBackgroundDefault: iocTealPalette[600],
+        neutralBackgroundWeak: iocTealPalette.alpha10,
+        neutralBackgroundDisabled: iocTealPalette.alpha40,
+        neutralBackgroundHover: iocTealPalette[500],
+        neutralBackgroundActive: iocTealPalette[700],
+        neutralTextDefault: iocTealPalette[200],
+        neutralTextHover: iocTealPalette[100],
+        neutralTextActive: iocTealPalette[300],
+        neutralTextInDefault: greyPalette[900],
+        neutralTextInDisabled: iocTealPalette.alpha10,
+        neutralBorderDefault: iocTealPalette[600],
+        neutralBorderHover: iocTealPalette[500],
+        neutralBorderActive: iocTealPalette[700],
+        neutralBorderDisabled: iocTealPalette.alpha40,
+        neutralBorderWeak: iocTealPalette.alpha20,
+        neutralIconDefault: iocTealPalette[500],
+        neutralIconHover: iocTealPalette[400],
+        neutralIconActive: iocTealPalette[600],
+        neutralIconDisabled: iocTealPalette.alpha40,
+        neutralIconInDefault: iocTealPalette[50],
+        neutralIconInHover: iocTealPalette[100],
+        neutralIconInActive: iocTealPalette[200],
+        neutralIconInDisabled: iocTealPalette.alpha10,
+        infoBackgroundDefault: iocBluePalette[600],
+        infoBackgroundWeak: "rgba(43,130,246,0.10)",
+        infoBackgroundDisabled: "rgba(43,130,246,0.40)",
+        infoBackgroundHover: iocBluePalette[500],
+        infoBackgroundActive: iocBluePalette[600],
+        infoTextDefault: "#93C5FD",
+        infoTextHover: "#BFDBFE",
+        infoTextActive: "#60A5FA",
+        infoTextInDefault: greyPalette[900],
+        infoTextInDisabled: "rgba(43,130,246,0.10)",
+        infoBorderDefault: iocBluePalette[600],
+        infoBorderHover: iocBluePalette[500],
+        infoBorderActive: iocBluePalette[600],
+        infoBorderDisabled: "rgba(43,130,246,0.40)",
+        infoBorderWeak: "rgba(43,130,246,0.20)",
+        infoIconDefault: iocBluePalette[500],
+        infoIconHover: iocBluePalette[400],
+        infoIconActive: iocBluePalette[600],
+        infoIconDisabled: "rgba(43,130,246,0.40)",
+        infoIconInDefault: "#EFF6FF",
+        infoIconInHover: "#BFDBFE",
+        infoIconInActive: "#93C5FD",
+        infoIconInDisabled: "rgba(43,130,246,0.10)",
+        inactiveBackgroundDefault: greyPalette[600],
+        inactiveBackgroundWeak: "rgba(60, 69, 81, 0.10)",
+        inactiveBackgroundDisabled: greyPalette["alpha40"],
+        inactiveBackgroundHover: greyPalette[500],
+        inactiveBackgroundActive: greyPalette[700],
+        inactiveTextDefault: greyPalette[200],
+        inactiveTextHover: greyPalette[100],
+        inactiveTextActive: greyPalette[300],
+        inactiveTextInDefault: greyPalette[50],
+        inactiveTextInDisabled: greyPalette["alpha40"],
+        inactiveBorderDefault: greyPalette[600],
+        inactiveBorderHover: greyPalette[500],
+        inactiveBorderActive: greyPalette[700],
+        inactiveBorderDisabled: greyPalette["alpha40"],
+        inactiveBorderWeak: "rgba(60, 69, 81, 0.30)",
+        inactiveIconDefault: greyPalette[400],
+        inactiveIconHover: greyPalette[300],
+        inactiveIconActive: greyPalette[500],
+        inactiveIconDisabled: greyPalette["alpha40"],
+        inactiveIconInDefault: greyPalette[0],
+        inactiveIconInHover: greyPalette[50],
+        inactiveIconInActive: greyPalette[100],
+        inactiveIconInDisabled: greyPalette["alpha10"],
+        warningBackgroundDefault: lightOrangePalette[500],
+        warningBackgroundWeak: "rgba(251, 175, 69, 0.10)",
+        warningBackgroundHover: lightOrangePalette[400],
+        warningBackgroundActive: lightOrangePalette[600],
+        warningBackgroundDisabled: lightOrangePalette["alpha40"],
+        warningTextDefault: lightOrangePalette[200],
+        warningTextHover: lightOrangePalette[100],
+        warningTextActive: lightOrangePalette[300],
+        warningTextInDefault: greyPalette[900],
+        warningTextInDisabled: lightOrangePalette["alpha10"],
+        warningBorderDefault: lightOrangePalette[500],
+        warningBorderHover: lightOrangePalette[400],
+        warningBorderActive: lightOrangePalette[600],
+        warningBorderDisabled: lightOrangePalette["alpha40"],
+        warningBorderWeak: "rgba(251, 175, 69, 0.30)",
+        warningIconDefault: lightOrangePalette[500],
+        warningIconHover: lightOrangePalette[400],
+        warningIconActive: lightOrangePalette[600],
+        warningIconDisabled: lightOrangePalette["alpha40"],
+        warningIconInDefault: lightOrangePalette[50],
+        warningIconInHover: lightOrangePalette[100],
+        warningIconInActive: lightOrangePalette[200],
+        warningIconInDisabled: lightOrangePalette["alpha10"],
+        severeWarningBackgroundDefault: orangePalette[500],
+        severeWarningBackgroundWeak: "rgba(242, 100, 61, 0.10)",
+        severeWarningBackgroundHover: orangePalette[400],
+        severeWarningBackgroundActive: orangePalette[600],
+        severeWarningBackgroundDisabled: orangePalette["alpha40"],
+        severeWarningTextDefault: orangePalette[200],
+        severeWarningTextHover: orangePalette[100],
+        severeWarningTextActive: orangePalette[300],
+        severeWarningTextInDefault: greyPalette[900],
+        severeWarningTextInDisabled: orangePalette["alpha10"],
+        severeWarningBorderDefault: orangePalette[500],
+        severeWarningBorderHover: orangePalette[400],
+        severeWarningBorderActive: orangePalette[600],
+        severeWarningBorderDisabled: orangePalette["alpha40"],
+        severeWarningBorderWeak: "rgba(242, 100, 61, 0.30)",
+        severeWarningIconDefault: orangePalette[500],
+        severeWarningIconHover: orangePalette[400],
+        severeWarningIconActive: orangePalette[600],
+        severeWarningIconDisabled: orangePalette["alpha40"],
+        severeWarningIconInDefault: orangePalette[50],
+        severeWarningIconInHover: orangePalette[100],
+        severeWarningIconInActive: orangePalette[200],
+        severeWarningIconInDisabled: orangePalette["alpha10"],
+        moderateBackgroundDefault: yellowPalette[500],
+        moderateBackgroundWeak: "rgba(255, 230, 89, 0.10)",
+        moderateBackgroundHover: yellowPalette[400],
+        moderateBackgroundActive: yellowPalette[600],
+        moderateBackgroundDisabled: yellowPalette["alpha40"],
+        moderateTextDefault: yellowPalette[900],
+        moderateTextHover: yellowPalette[800],
+        moderateTextActive: yellowPalette[700],
+        moderateTextInDefault: greyPalette[900],
+        moderateTextInDisabled: yellowPalette["alpha10"],
+        moderateBorderDefault: yellowPalette[500],
+        moderateBorderHover: yellowPalette[400],
+        moderateBorderActive: yellowPalette[600],
+        moderateBorderDisabled: yellowPalette["alpha40"],
+        moderateBorderWeak: "rgba(255, 230, 89, 0.30)",
+        moderateIconDefault: yellowPalette[700],
+        moderateIconHover: yellowPalette[600],
+        moderateIconActive: yellowPalette[800],
+        moderateIconDisabled: yellowPalette["alpha40"],
+        moderateIconInDefault: yellowPalette[900],
+        moderateIconInHover: yellowPalette[800],
+        moderateIconInActive: yellowPalette[700],
+        moderateIconInDisabled: yellowPalette["alpha10"],
+        accentADefault: lavenderPalette[400],
+        accentAWeak: "rgba(140, 149, 255, 0.15)",
+        accentBDefault: sunsetPalette[300],
+        accentBWeak: "rgba(233, 106, 141, 0.15)",
+        accentCDefault: sunsetPalette[100],
+        accentCWeak: "rgba(243, 172, 162, 0.15)",
+        accentDDefault: purplePalette[400],
+        accentDWeak: "rgba(192, 128, 255, 0.15)",
+        accentEDefault: limePalette[400],
+        accentEWeak: "rgba(164, 197, 71, 0.15)",
+        accentFDefault: orangePalette[400],
+        accentFWeak: "rgba(244, 123, 90, 0.15)",
+        accentGDefault: nightPalette[200],
+        accentGWeak: "rgba(70, 170, 206, 0.15)",
+        accentHDefault: iocTealPalette[400],
+        accentHWeak: iocTealPalette.alpha10,
+        accentIDefault: pinkPalette[400],
+        accentIWeak: "rgba(242, 99, 140, 0.15)",
+        accentJDefault: tealPalette[400],
+        accentJWeak: "rgba(62, 203, 209, 0.15)",
+    };
+
+    const iocShadows = [
+        "none",
+        iocShadowSm,
+        iocShadowMd,
+        iocShadowLg,
+        iocShadowLg,
+        iocShadowLg,
+        ...Array(19).fill("none"),
+    ];
+    const palette$1 = {
+        mode: "dark",
+        primary: Object.assign(Object.assign({}, iocTealPalette), { main: iocTealPalette[500], light: iocTealPalette[300], dark: iocTealPalette[700], contrastText: iocBackdropPalette[900] }),
+        secondary: {
+            main: iocBluePalette[500],
+            light: iocBluePalette[400],
+            dark: iocBluePalette[600],
+            contrastText: "#ffffff",
+        },
+        tertiary: lightOrangePalette,
+        error: redPalette,
+        warning: lightOrangePalette,
+        info: iocBluePalette,
+        success: greenPalette,
+        negative: redPalette,
+        orange: orangePalette,
+        grey: greyPalette,
+        vars: iocVars,
+        text: {
+            primary: iocTextPrimary,
+            secondary: iocTextSecondary,
+            disabled: iocTextDisabled,
+        },
+        background: {
+            paper: iocSurfacePalette[100],
+            default: iocBackdropPalette[600],
+        },
+        action: {
+            hoverOpacity: 0.08,
+            selectedOpacity: 0.14,
+            focusOpacity: 0.1,
+        },
+    };
+    const baseTheme = material.createTheme({
+        breakpoints,
+        palette: palette$1,
+        typography,
+        mixins: commonMixins,
+    });
+    const iocCssBaselineComponent = {
+        MuiCssBaseline: {
+            styleOverrides: {
+                html: {
+                    scrollbarWidth: "thin",
+                    scrollbarColor: `${baseTheme.palette.vars.baseTextMedium} ${baseTheme.palette.background.default}`,
+                },
+                body: {
+                    background: iocPageBackground,
+                    backgroundAttachment: "fixed",
+                    minHeight: "100vh",
+                },
+                "*::-webkit-scrollbar": { width: "12px", height: "12px" },
+                "*::-webkit-scrollbar-track": {
+                    backgroundColor: baseTheme.palette.background.default,
+                    borderRadius: 8,
+                },
+                "*::-webkit-scrollbar-thumb": {
+                    backgroundColor: baseTheme.palette.vars.controlIconMedium,
+                    borderRadius: 8,
+                    border: "2px solid transparent",
+                    backgroundClip: "content-box",
+                },
+                "*::-webkit-scrollbar-thumb:hover": {
+                    backgroundColor: baseTheme.palette.vars.baseTextMedium,
+                },
+                "*::-webkit-scrollbar-corner": {
+                    backgroundColor: baseTheme.palette.background.default,
+                },
+                "::selection": {
+                    backgroundColor: baseTheme.palette.vars.controlFocusRingStrong,
+                    color: baseTheme.palette.vars.baseTextStrong,
+                },
+            },
+        },
+    };
+    const iocThemeOptions = {
+        shadows: iocShadows,
+        components: Object.assign(Object.assign(Object.assign(Object.assign({}, buttonComponent(baseTheme)), inputComponents(baseTheme)), snackbarComponent(baseTheme)), iocCssBaselineComponent),
+    };
+    const iocTheme = material.createTheme(baseTheme, iocThemeOptions);
+    iocTheme.palette.vars = iocVars;
+
     const lightVars = {
         brandOrange: lightOrangePalette[500],
         brandOrangeDark: lightOrangePalette[900],
@@ -10876,6 +11389,7 @@
     (function (ThemeMode) {
         ThemeMode["Light"] = "light";
         ThemeMode["Dark"] = "dark";
+        ThemeMode["IoC"] = "ioc";
     })(exports.ThemeMode || (exports.ThemeMode = {}));
     const ThemeModeContext = React.createContext(null);
     function useThemeMode() {
@@ -10885,17 +11399,23 @@
         }
         return ctx;
     }
+    function resolveBuiltInTheme(mode) {
+        if (mode === exports.ThemeMode.IoC) {
+            return iocTheme;
+        }
+        return mode === exports.ThemeMode.Dark ? darkTheme : lightTheme;
+    }
     const ThemeProvider = ({ children, defaultMode, customTheme, }) => {
         const [mode, setMode] = React.useState(defaultMode !== null && defaultMode !== void 0 ? defaultMode : exports.ThemeMode.Light);
-        const toggleTheme = React.useCallback(() => {
-            setMode((prev) => prev === exports.ThemeMode.Dark ? exports.ThemeMode.Light : exports.ThemeMode.Dark);
+        const setTheme = React.useCallback((theme) => {
+            setMode(theme);
         }, []);
-        const resolvedTheme = customTheme !== null && customTheme !== void 0 ? customTheme : (mode === exports.ThemeMode.Dark ? darkTheme : lightTheme);
+        const resolvedTheme = customTheme !== null && customTheme !== void 0 ? customTheme : resolveBuiltInTheme(mode);
         const themeModeValue = React.useMemo(() => ({
             mode,
             setMode,
-            toggleTheme,
-        }), [mode, toggleTheme]);
+            setTheme,
+        }), [mode, setTheme]);
         return (jsxRuntime.jsx(ThemeModeContext.Provider, { value: themeModeValue, children: jsxRuntime.jsxs(material.ThemeProvider, { theme: resolvedTheme, children: [jsxRuntime.jsx(material.CssBaseline, {}), children] }) }));
     };
 
@@ -16169,6 +16689,7 @@
     exports.illustrationSurfaceSubtle = illustrationSurfaceSubtle;
     exports.illustrationWarningGradientEnd = illustrationWarningGradientEnd;
     exports.illustrationWarningGradientStart = illustrationWarningGradientStart;
+    exports.iocVars = iocVars;
     exports.isLeaf = isLeaf;
     exports.lavender10 = lavender10;
     exports.lavender100 = lavender100;