@open-ui-kit/core 2.0.3 → 2.1.0

package/README.md

@@ -9,7 +9,7 @@ A React component library and theme system built on Material UI, with Open UI Ki
 ## What you get
 
 - **Production-ready components** for application screens, forms, navigation, feedback, data display, and charts.
-- **Open UI Kit themes** with light and dark mode support through `ThemeProvider`.
+- **Open UI Kit light/dark and IoC themes** through `ThemeProvider`.
 - **Material UI compatibility** for `sx`, slots, theme overrides, and familiar component APIs.
 - **TypeScript support** with exported component and theme types.
 - **Interactive examples** in Storybook for component states, variants, and composition patterns.
@@ -45,8 +45,8 @@ Some components need additional peers, such as icons, date pickers, routing, mot
 Import the typography CSS once near your app root, then wrap the app with `ThemeProvider`.
 
 ```tsx
-import '@open-ui-kit/core/typography.css';
-import { Button, Stack, ThemeProvider, Typography } from '@open-ui-kit/core';
+import "@open-ui-kit/core/typography.css";
+import { Button, Stack, ThemeProvider, Typography } from "@open-ui-kit/core";
 
 export function App() {
   return (
@@ -65,23 +65,43 @@ export function App() {
 
 ## Theme mode
 
-Use `useThemeMode()` inside `ThemeProvider` to read or change the active light or dark theme.
+Use `useThemeMode()` inside `ThemeProvider` to read or change the active built-in theme.
+Open UI Kit ships `ThemeMode.Light`, `ThemeMode.Dark`, and `ThemeMode.IoC`.
 
 ```tsx
-import { Button, ThemeMode, useThemeMode } from '@open-ui-kit/core';
+import {
+  Button,
+  ThemeMode,
+  ThemeProvider,
+  useThemeMode,
+} from "@open-ui-kit/core";
+import type { ReactNode } from "react";
 
-export function ThemeToggle() {
-  const { mode, toggleTheme } = useThemeMode();
+export function ThemeSelector() {
+  const { mode, setTheme } = useThemeMode();
 
   return (
-    <Button variant="outlined" onClick={toggleTheme}>
-      Use {mode === ThemeMode.Dark ? 'light' : 'dark'} theme
+    <Button
+      variant="outlined"
+      onClick={() =>
+        setTheme(mode === ThemeMode.IoC ? ThemeMode.Light : ThemeMode.IoC)
+      }
+    >
+      Use {mode === ThemeMode.IoC ? "light" : "IoC"} theme
     </Button>
   );
 }
+
+export function IocApp({ children }: { children: ReactNode }) {
+  return <ThemeProvider defaultMode={ThemeMode.IoC}>{children}</ThemeProvider>;
+}
 ```
 
 Use `defaultMode={ThemeMode.Dark}` on `ThemeProvider` when an app needs to start in dark mode.
+Use `defaultMode={ThemeMode.IoC}` when an app should start with the IoC theme.
+
+IoC palette helpers such as `iocGradients`, `iocGlows`, and `iocShape` are exported for IoC-specific product surfaces.
+Reusable Open UI Kit components still read semantic colors from `theme.palette.vars`.
 
 ## Local development
 
@@ -106,6 +126,7 @@ yarn workspace @open-ui-kit/core storybook:build
 - Storybook: https://main--68cc22452afe30d90e4ca977.chromatic.com
 - Installation guide: https://github.com/outshift-open/open-ui-kit/blob/main/docs/data/material/getting-started/installation/installation.md
 - Usage guide: https://github.com/outshift-open/open-ui-kit/blob/main/docs/data/material/getting-started/usage/usage.md
+- Theming guide: https://github.com/outshift-open/open-ui-kit/blob/main/docs/data/material/getting-started/theming/theming.md
 - Migration notes: https://github.com/outshift-open/open-ui-kit/blob/main/MIGRATION.md
 - Contributing: https://github.com/outshift-open/open-ui-kit/blob/main/CONTRIBUTING.md
 

package/index.cjs.js

@@ -10501,7 +10501,7 @@ const shadows$1 = [
     darkModeFooterBottom,
     ...Array(17).fill("none"),
 ];
-const palette$1 = {
+const palette$2 = {
     mode: "dark",
     primary: bluePalette,
     secondary: Object.assign(Object.assign({}, surfaceDarkPalette), { main: surfaceDarkPalette[500] }),
@@ -10531,7 +10531,7 @@ const palette$1 = {
 };
 const theme$1 = material.createTheme({
     breakpoints,
-    palette: palette$1,
+    palette: palette$2,
     typography,
     mixins: commonMixins,
 });
@@ -10568,6 +10568,519 @@ const darkThemeOptions = {
 };
 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],
@@ -10947,6 +11460,7 @@ exports.ThemeMode = void 0;
 (function (ThemeMode) {
     ThemeMode["Light"] = "light";
     ThemeMode["Dark"] = "dark";
+    ThemeMode["IoC"] = "ioc";
 })(exports.ThemeMode || (exports.ThemeMode = {}));
 const ThemeModeContext = React__namespace.default.createContext(null);
 function useThemeMode() {
@@ -10956,17 +11470,23 @@ function useThemeMode() {
     }
     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__namespace.default.useState(defaultMode !== null && defaultMode !== void 0 ? defaultMode : exports.ThemeMode.Light);
-    const toggleTheme = React__namespace.default.useCallback(() => {
-        setMode((prev) => prev === exports.ThemeMode.Dark ? exports.ThemeMode.Light : exports.ThemeMode.Dark);
+    const setTheme = React__namespace.default.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__namespace.default.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] }) }));
 };
 
@@ -16240,6 +16760,7 @@ exports.illustrationSurface = illustrationSurface;
 exports.illustrationSurfaceSubtle = illustrationSurfaceSubtle;
 exports.illustrationWarningGradientEnd = illustrationWarningGradientEnd;
 exports.illustrationWarningGradientStart = illustrationWarningGradientStart;
+exports.iocVars = iocVars;
 exports.isLeaf = isLeaf;
 exports.lavender10 = lavender10;
 exports.lavender100 = lavender100;