@apia/theme 0.1.0 → 0.2.2

package/dist/index.js

@@ -1,174 +1,63 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { ThemeProvider as ThemeProvider$1, Box } from 'theme-ui';
-import { useState, createContext, useRef, Suspense } from 'react';
-import { cloneDeep, merge } from 'lodash';
-import { getValueByPath, EventEmitter, useMount, setValueByPath } from '@apia/util';
 import tinycolor from 'tinycolor2';
-import { focusOutline as focusOutline$1 } from '@apia/theme';
+import { cloneDeep, merge } from 'lodash';
+import { ThemeUIProvider, useThemeUI, Box, ThemeProvider } from 'theme-ui';
+export { Alert, AspectImage, AspectRatio, Avatar, Badge, BaseStyles, Box, Button, Card, Checkbox, Close, CloseIcon, Container, Divider, Donut, Embed, Flex, Global, Grid, Heading, IconButton, Image, InitializeColorMode, Input, Label, Link, MenuButton, MenuIcon, Message, NavLink, Paragraph, Progress, Radio, Select, Slider, Spinner, Switch, Text, Textarea, createElement, css, get, jsx, merge, useColorMode, useThemeUI } from 'theme-ui';
+export * from '@theme-ui/match-media';
+import { EventEmitter, useMount, setValueByPath } from '@apia/util';
+import { useState, useRef, useMemo, Suspense } from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
 
-function responsive$1(values) {
-  var _a;
-  const returnArray = [];
-  const max = 6;
-  for (let i = 0; i <= max; i++)
-    returnArray[i + 1] = (_a = values[i]) != null ? _a : null;
-  if (values.print)
-    returnArray[0] = values.print;
-  else {
-    for (let i = 5; i >= 0; i--) {
-      if (values[i] !== void 0)
-        returnArray[0] = values[i];
-    }
-  }
-  return returnArray;
+function defaultLighten(color, ratio) {
+  return tinycolor(color).lighten(ratio != null ? ratio : 20).toRgbString();
 }
-function spacing(index) {
-  var _a;
-  return (_a = defaultPalette.spacing(index)) != null ? _a : index;
+function defaultDarken(color, ratio) {
+  return tinycolor(color).darken(ratio != null ? ratio : 20).toRgbString();
 }
-const smallButton = {
-  py: 2,
-  px: 4,
-  fontSize: "0.9em"
-};
-const focusOutline = {
-  outlineColor: "outlineColor",
-  outlineWidth: "3px",
-  outlineStyle: "solid",
-  outlineOffset: "-3px"
-};
-function getVariant(variant) {
-  return { variant, "data-variant": variant };
+function defaultGetContrastText(color) {
+  const current = tinycolor(color);
+  return tinycolor.readability("white", current) < tinycolor.readability("black", current) ? "black" : "white";
 }
-
-const opacity = {
-  light: "#009",
-  dark: "#fff"
-};
-const disabled = "#ccc";
-const spacingArray = Array(50).fill(1).map((_, i) => {
-  return responsive$1({
-    0: Math.ceil(i / 2.5),
-    1: Math.ceil(i / 2.1),
-    2: Math.ceil(i / 1.7),
-    3: Math.ceil(i / 1.3),
-    4: i
-  });
-});
-const defaultPalette = {
-  action: {
-    disabled,
-    disabledOpacity: 0.6,
-    active: opacity,
-    activeOpacity: 0.4,
-    focus: opacity,
-    focusOpacity: 0.2,
-    hover: opacity,
-    hoverOpacity: 0.3,
-    readonly: disabled,
-    readonlyOpacity: 0.4,
-    selected: opacity.light,
-    selectedOpacity: 0.6
-  },
-  background: {
-    default: "#f4f4f4",
-    overlay: "rgba(0, 0, 0, 0.2)",
-    paper: "white"
-  },
-  border: {
-    article: "#cacaca",
-    field: "#444",
-    section: "#aaa"
-  },
-  common: {
-    black: "black",
-    white: "white"
-  },
-  info: {
-    main: "#fff"
-  },
-  primary: {
-    main: "#00496c"
-  },
-  secondary: {
-    main: "#6c757d"
-  },
-  spacing: (index) => {
-    return spacingArray[index];
-  },
-  text: {
-    accent: "#609",
-    disabled: "#555",
-    icon: "white",
-    link: "#00496c",
-    primary: "#4a4a4a",
-    secondary: "white",
-    title: "#00496c"
-  },
-  error: {
-    main: "#db7678",
-    light: "#fff2f4"
-  },
-  success: {
-    main: "#8bde8b",
-    light: "#e7ffd9"
-  },
-  warning: {
-    main: "#f8f588",
-    light: "#fffdd9"
-  },
-  darkenRatio: 15,
-  lightenRatio: 35,
-  responsive: responsive$1,
-  queryColumnsMultiplier: 2
-};
-
-var __defProp$n = Object.defineProperty;
-var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
-var __hasOwnProp$n = Object.prototype.hasOwnProperty;
-var __propIsEnum$n = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$n = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$n = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$n.call(b, prop))
-      __defNormalProp$n(a, prop, b[prop]);
-  if (__getOwnPropSymbols$n)
-    for (var prop of __getOwnPropSymbols$n(b)) {
-      if (__propIsEnum$n.call(b, prop))
-        __defNormalProp$n(a, prop, b[prop]);
-    }
-  return a;
-};
-function buildColorsObject(definition) {
-  return __spreadValues$n(__spreadValues$n({}, definition), definition.borderColor ? {
-    borderLeftColor: definition.borderColor,
-    borderRightColor: definition.borderColor,
-    borderBottomColor: definition.borderColor,
-    borderTopColor: definition.borderColor
-  } : void 0);
+function getValueByPath(obj, path, separator = ".") {
+  const actualPath = typeof path === "string" ? path.split(separator) : path;
+  if (typeof obj !== "object" || !obj) {
+    if (actualPath.length === 0)
+      return obj;
+    return void 0;
+  }
+  const currentStep = actualPath.shift();
+  if (actualPath.length === 0)
+    return obj[currentStep];
+  return getValueByPath(
+    obj[currentStep],
+    actualPath,
+    separator
+  );
 }
 
-var __defProp$m = Object.defineProperty;
-var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
-var __hasOwnProp$m = Object.prototype.hasOwnProperty;
-var __propIsEnum$m = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$m = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$m = (a, b) => {
+var __defProp$p = Object.defineProperty;
+var __getOwnPropSymbols$p = Object.getOwnPropertySymbols;
+var __hasOwnProp$p = Object.prototype.hasOwnProperty;
+var __propIsEnum$p = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$p = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$p = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$m.call(b, prop))
-      __defNormalProp$m(a, prop, b[prop]);
-  if (__getOwnPropSymbols$m)
-    for (var prop of __getOwnPropSymbols$m(b)) {
-      if (__propIsEnum$m.call(b, prop))
-        __defNormalProp$m(a, prop, b[prop]);
+    if (__hasOwnProp$p.call(b, prop))
+      __defNormalProp$p(a, prop, b[prop]);
+  if (__getOwnPropSymbols$p)
+    for (var prop of __getOwnPropSymbols$p(b)) {
+      if (__propIsEnum$p.call(b, prop))
+        __defNormalProp$p(a, prop, b[prop]);
     }
   return a;
 };
-const getColorState = (definition, state) => {
+const getColorState = (definition, state, theme) => {
   var _a, _b, _c, _d;
+  if (typeof state !== "string") {
+    console.log("getColorState", { definition, state, theme });
+  }
   if (state === "default")
-    return buildColorsObject(definition);
-  const palette = getPalette();
+    return theme.palette.buildColorsObject(definition);
+  const palette = theme.palette;
   const opacity = palette.action[`${state}Opacity`];
   const actualState = state === "checked" ? "selected" : state;
   definition = Object.fromEntries(
@@ -194,15 +83,13 @@ const getColorState = (definition, state) => {
     tinycolor((_b = definition.backgroundColor) != null ? _b : "").isLight() ? palette.action[actualState].light : palette.action[actualState].dark,
     100 * opacity
   ).toRgbString();
-  return buildColorsObject(__spreadValues$m(__spreadValues$m({}, definition.backgroundColor ? {
+  return theme.palette.buildColorsObject(__spreadValues$p(__spreadValues$p({}, definition.backgroundColor ? {
     backgroundColor: state === "checked" ? (_c = definition.backgroundColor) != null ? _c : "" : calculatedBackgroundColor,
     color: state === "checked" ? tinycolor.mix(
       tinycolor((_d = definition.color) != null ? _d : "black"),
       tinycolor(palette.action.selected.dark),
       100 * palette.action.selectedOpacity
-    ).toRgbString() : window.currentPalette.getContrastText(
-      calculatedBackgroundColor
-    )
+    ).toRgbString() : theme.palette.getContrastText(calculatedBackgroundColor)
   } : null), definition.borderColor ? {
     borderColor: tinycolor.mix(
       definition.borderColor,
@@ -212,52 +99,56 @@ const getColorState = (definition, state) => {
   } : null));
 };
 
-const applyStatesGetColor = (definition, states) => {
+const applyStatesGetColor = (definition, theme, states) => {
   const newStates = (states == null ? void 0 : states.default) !== false ? cloneDeep(definition) : {};
+  newStates.path = { fill: definition.color };
   if ((states == null ? void 0 : states.active) !== false) {
-    newStates.active = getColorState(definition, "active");
+    newStates.active = getColorState(definition, "active", theme);
   }
   if ((states == null ? void 0 : states.disabled) !== false) {
-    newStates.disabled = getColorState(definition, "disabled");
+    newStates.disabled = getColorState(definition, "disabled", theme);
   }
   if ((states == null ? void 0 : states.focus) !== false) {
-    newStates.focus = getColorState(definition, "focus");
+    newStates.focus = getColorState(definition, "focus", theme);
   }
   if ((states == null ? void 0 : states.hover) !== false) {
-    newStates.hover = getColorState(definition, "hover");
+    newStates.hover = getColorState(definition, "hover", theme);
   }
   if ((states == null ? void 0 : states.readonly) !== false) {
-    newStates.readonly = getColorState(definition, "readonly");
+    newStates.readonly = getColorState(definition, "readonly", theme);
   }
   if ((states == null ? void 0 : states.selected) !== false) {
-    newStates.selected = getColorState(definition, "selected");
+    newStates.selected = getColorState(definition, "selected", theme);
   }
   if ((states == null ? void 0 : states.checked) !== false) {
-    newStates.checked = getColorState(definition, "checked");
+    newStates.checked = getColorState(definition, "checked", theme);
   }
   return newStates;
 };
 
-function applyStates(properties, states) {
-  properties.forEach((def) => {
+function applyStates(properties, theme, states) {
+  var _a;
+  (_a = properties.forEach) == null ? void 0 : _a.call(properties, (def) => {
     Object.entries(def).forEach(([key, value]) => {
       if (typeof value === "string")
         return;
       const definition = value;
-      if (!definition.active)
-        definition.active = {};
-      if (!definition.checked)
-        definition.checked = {};
-      if (!definition.focus)
-        definition.focus = {};
-      if (!definition.disabled)
-        definition.disabled = {};
-      if (!definition.hover)
-        definition.hover = {};
-      if (!definition.selected)
-        definition.selected = {};
-      const newDefinition = applyStatesGetColor(definition, states);
-      def[key] = merge(newDefinition, definition);
+      if (typeof definition !== "string" && !definition.preventParse) {
+        if (!definition.active)
+          definition.active = {};
+        if (!definition.checked)
+          definition.checked = {};
+        if (!definition.focus)
+          definition.focus = {};
+        if (!definition.disabled)
+          definition.disabled = {};
+        if (!definition.hover)
+          definition.hover = {};
+        if (!definition.selected)
+          definition.selected = {};
+        const newDefinition = applyStatesGetColor(definition, theme, states);
+        def[key] = merge(newDefinition, definition);
+      }
     });
   });
 }
@@ -266,15 +157,117 @@ function isColorDefinition(value) {
   return !!value && typeof value === "object" && "main" in value;
 }
 
-function defaultLighten(color, ratio) {
-  return tinycolor(color).lighten(ratio != null ? ratio : 20).toRgbString();
+const actions = { dark: "#cce5ff", light: "#557" };
+const spacingArray = Array(50).fill(1).map((_, i) => {
+  return responsive$1({
+    0: Math.ceil(i / 2.5),
+    1: Math.ceil(i / 2.1),
+    2: Math.ceil(i / 1.7),
+    3: Math.ceil(i / 1.3),
+    4: i
+  });
+});
+const defaultPalette = {
+  action: {
+    disabled: "#d9d9d9",
+    disabledOpacity: 1,
+    active: actions,
+    activeOpacity: 0.45,
+    focus: actions,
+    focusOpacity: 0.05,
+    hover: actions,
+    hoverOpacity: 0.1,
+    readonly: actions,
+    readonlyOpacity: 0.4,
+    selected: "rgb(204 214 222)",
+    selectedOpacity: 1
+  },
+  background: {
+    default: "#f4f4f4",
+    overlay: "rgba(0, 0, 0, 0.2)",
+    paper: "white"
+  },
+  border: {
+    article: "#cacaca",
+    field: "#444",
+    section: "#aaa"
+  },
+  common: {
+    black: "black",
+    white: "white"
+  },
+  info: {
+    main: "#fff"
+  },
+  primary: {
+    main: "#00496c"
+  },
+  secondary: {
+    main: "#6c757d"
+  },
+  spacing: (index) => {
+    return spacingArray[index];
+  },
+  text: {
+    accent: "#609",
+    disabled: "#555",
+    icon: "white",
+    link: "#00496c",
+    primary: "#4a4a4a",
+    secondary: "white",
+    title: "#00496c"
+  },
+  error: {
+    main: "rgb(187,12,15)",
+    light: "#fff2f4"
+  },
+  success: {
+    main: "#8bde8b",
+    light: "#e7ffd9"
+  },
+  warning: {
+    main: "#f8f588",
+    light: "#fffdd9"
+  },
+  darkenRatio: 15,
+  lightenRatio: 35,
+  responsive: responsive$1,
+  queryColumnsMultiplier: 2
+};
+
+function responsive$1(values) {
+  var _a;
+  const returnArray = [];
+  const max = 6;
+  for (let i = 0; i <= max; i++)
+    returnArray[i + 1] = (_a = values[i]) != null ? _a : null;
+  if (values.print)
+    returnArray[0] = values.print;
+  else {
+    for (let i = 5; i >= 0; i--) {
+      if (values[i] !== void 0)
+        returnArray[0] = values[i];
+    }
+  }
+  return returnArray;
 }
-function defaultDarken(color, ratio) {
-  return tinycolor(color).darken(ratio != null ? ratio : 20).toRgbString();
+function spacing(index) {
+  var _a;
+  return (_a = defaultPalette.spacing(index)) != null ? _a : index;
 }
-function defaultGetContrastText(color) {
-  const current = tinycolor(color);
-  return tinycolor.readability("white", current) < tinycolor.readability("black", current) ? "black" : "white";
+const smallButton = {
+  py: 2,
+  px: 4,
+  fontSize: "0.9em"
+};
+const focusOutline = {
+  outlineColor: "outlineColor",
+  outlineWidth: "3px",
+  outlineStyle: "solid",
+  outlineOffset: "-3px"
+};
+function getVariant(variant) {
+  return { variant, "data-variant": variant };
 }
 
 const buildStateObject = (props, state) => {
@@ -332,77 +325,118 @@ const buildStateObject = (props, state) => {
   }
 };
 
-function getColorsByPath(path, options) {
-  return merge(
-    buildColorsObject({
-      color: `${path}.color`,
-      backgroundColor: `${path}.backgroundColor`,
+var __defProp$o = Object.defineProperty;
+var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
+var __hasOwnProp$o = Object.prototype.hasOwnProperty;
+var __propIsEnum$o = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$o = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$o = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$o.call(b, prop))
+      __defNormalProp$o(a, prop, b[prop]);
+  if (__getOwnPropSymbols$o)
+    for (var prop of __getOwnPropSymbols$o(b)) {
+      if (__propIsEnum$o.call(b, prop))
+        __defNormalProp$o(a, prop, b[prop]);
+    }
+  return a;
+};
+function buildColorsObject(definition) {
+  return __spreadValues$o(__spreadValues$o({}, definition), definition.borderColor ? {
+    borderLeftColor: definition.borderColor,
+    borderRightColor: definition.borderColor,
+    borderBottomColor: definition.borderColor,
+    borderTopColor: definition.borderColor
+  } : void 0);
+}
+
+function getColorsByPath(path, options) {
+  return merge(
+    buildColorsObject({
+      color: `${path}.color`,
+      backgroundColor: `${path}.backgroundColor`,
       borderColor: `${path}.borderColor`
     }),
     options == null ? void 0 : options.mergeObject
   );
 }
 
-var __defProp$l = Object.defineProperty;
-var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
-var __hasOwnProp$l = Object.prototype.hasOwnProperty;
-var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$l = (a, b) => {
+var __defProp$n = Object.defineProperty;
+var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
+var __hasOwnProp$n = Object.prototype.hasOwnProperty;
+var __propIsEnum$n = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$n = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$n = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$l.call(b, prop))
-      __defNormalProp$l(a, prop, b[prop]);
-  if (__getOwnPropSymbols$l)
-    for (var prop of __getOwnPropSymbols$l(b)) {
-      if (__propIsEnum$l.call(b, prop))
-        __defNormalProp$l(a, prop, b[prop]);
+    if (__hasOwnProp$n.call(b, prop))
+      __defNormalProp$n(a, prop, b[prop]);
+  if (__getOwnPropSymbols$n)
+    for (var prop of __getOwnPropSymbols$n(b)) {
+      if (__propIsEnum$n.call(b, prop))
+        __defNormalProp$n(a, prop, b[prop]);
     }
   return a;
 };
-function getColorsAndStatesByPath(path, options) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
-  const active = getColorsByPath(`${path}.active`, options);
-  const checked = getColorsByPath(`${path}.checked`, options);
-  const disabled = __spreadValues$l({
+function getColorsAndStatesByPath(incomingPath, options) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const active = getColorsByPath(`${incomingPath}.active`, options);
+  const checked = getColorsByPath(`${incomingPath}.checked`, options);
+  const disabled = __spreadValues$n({
     cursor: "not-allowed"
-  }, getColorsByPath(`${path}.disabled`, options));
-  const hover = getColorsByPath(`${path}.hover`, options);
-  const focus = ((_a = options == null ? void 0 : options.states) == null ? void 0 : _a.focus) !== false ? getColorsByPath(`${path}.focus`, options) : {};
-  const readonly = __spreadValues$l({
+  }, getColorsByPath(`${incomingPath}.disabled`, options));
+  const hover = getColorsByPath(`${incomingPath}.hover`, options);
+  const focus = ((_a = options == null ? void 0 : options.states) == null ? void 0 : _a.focus) !== false ? getColorsByPath(`${incomingPath}.focus`, options) : {};
+  const readonly = __spreadValues$n({
     cursor: "notAllowed"
-  }, getColorsByPath(`${path}.readonly`, options));
-  const selected = getColorsByPath(`${path}.selected`, options);
+  }, getColorsByPath(`${incomingPath}.readonly`, options));
+  const selected = getColorsByPath(`${incomingPath}.selected`, options);
+  let path = {};
+  if ((_b = options == null ? void 0 : options.states) == null ? void 0 : _b.path) {
+    path = { path: { fill: `${incomingPath}.color` } };
+  }
   return merge(
-    __spreadValues$l(__spreadValues$l(__spreadValues$l(__spreadValues$l(__spreadValues$l(__spreadValues$l(__spreadValues$l(__spreadValues$l({}, ((_b = options == null ? void 0 : options.states) == null ? void 0 : _b.default) !== false ? getColorsByPath(path, options) : null), ((_c = options == null ? void 0 : options.states) == null ? void 0 : _c.checked) !== false ? buildStateObject(checked, "checked") : null), buildStateObject(focus, "focus")), ((_d = options == null ? void 0 : options.states) == null ? void 0 : _d.hover) !== false ? buildStateObject(hover, "hover") : null), ((_e = options == null ? void 0 : options.states) == null ? void 0 : _e.selected) !== false ? buildStateObject(selected, "selected") : null), ((_f = options == null ? void 0 : options.states) == null ? void 0 : _f.active) !== false ? buildStateObject(active, "active") : null), ((_g = options == null ? void 0 : options.states) == null ? void 0 : _g.disabled) !== false ? buildStateObject(disabled, "disabled") : null), ((_h = options == null ? void 0 : options.states) == null ? void 0 : _h.readonly) !== false ? buildStateObject(readonly, "readonly") : null),
+    __spreadValues$n(__spreadValues$n(__spreadValues$n(__spreadValues$n(__spreadValues$n(__spreadValues$n(__spreadValues$n(__spreadValues$n({}, ((_c = options == null ? void 0 : options.states) == null ? void 0 : _c.default) !== false ? getColorsByPath(incomingPath, options) : null), ((_d = options == null ? void 0 : options.states) == null ? void 0 : _d.checked) !== false ? buildStateObject(checked, "checked") : null), buildStateObject(focus, "focus")), ((_e = options == null ? void 0 : options.states) == null ? void 0 : _e.hover) !== false ? buildStateObject(hover, "hover") : null), ((_f = options == null ? void 0 : options.states) == null ? void 0 : _f.selected) !== false ? buildStateObject(selected, "selected") : null), ((_g = options == null ? void 0 : options.states) == null ? void 0 : _g.active) !== false ? buildStateObject(active, "active") : null), ((_h = options == null ? void 0 : options.states) == null ? void 0 : _h.disabled) !== false ? buildStateObject(disabled, "disabled") : null), ((_i = options == null ? void 0 : options.states) == null ? void 0 : _i.readonly) !== false ? buildStateObject(readonly, "readonly") : null),
+    path,
     options == null ? void 0 : options.mergeObject
   );
 }
 
-var __defProp$k = Object.defineProperty;
-var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
-var __hasOwnProp$k = Object.prototype.hasOwnProperty;
-var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$k = (a, b) => {
+var __defProp$m = Object.defineProperty;
+var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
+var __hasOwnProp$m = Object.prototype.hasOwnProperty;
+var __propIsEnum$m = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$m = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$m = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$k.call(b, prop))
-      __defNormalProp$k(a, prop, b[prop]);
-  if (__getOwnPropSymbols$k)
-    for (var prop of __getOwnPropSymbols$k(b)) {
-      if (__propIsEnum$k.call(b, prop))
-        __defNormalProp$k(a, prop, b[prop]);
+    if (__hasOwnProp$m.call(b, prop))
+      __defNormalProp$m(a, prop, b[prop]);
+  if (__getOwnPropSymbols$m)
+    for (var prop of __getOwnPropSymbols$m(b)) {
+      if (__propIsEnum$m.call(b, prop))
+        __defNormalProp$m(a, prop, b[prop]);
     }
   return a;
 };
-const getColorStates = (definition, states) => {
-  return __spreadValues$k(__spreadValues$k(__spreadValues$k(__spreadValues$k(__spreadValues$k(__spreadValues$k(__spreadValues$k(__spreadValues$k({}, (states == null ? void 0 : states.default) !== false ? definition : null), (states == null ? void 0 : states.checked) !== false ? buildStateObject(getColorState(definition, "checked"), "checked") : null), buildStateObject(getColorState(definition, "focus"), "focus")), (states == null ? void 0 : states.selected) !== false ? buildStateObject(getColorState(definition, "selected"), "selected") : null), (states == null ? void 0 : states.hover) !== false ? buildStateObject(getColorState(definition, "hover"), "hover") : null), (states == null ? void 0 : states.active) !== false ? buildStateObject(getColorState(definition, "active"), "active") : null), (states == null ? void 0 : states.disabled) !== false ? buildStateObject(getColorState(definition, "disabled"), "disabled") : null), (states == null ? void 0 : states.readonly) !== false ? buildStateObject(getColorState(definition, "readonly"), "readonly") : null);
+const getColorStates = (definition, theme, states) => {
+  return __spreadValues$m(__spreadValues$m(__spreadValues$m(__spreadValues$m(__spreadValues$m(__spreadValues$m(__spreadValues$m(__spreadValues$m({}, (states == null ? void 0 : states.default) !== false ? definition : null), (states == null ? void 0 : states.checked) !== false ? buildStateObject(getColorState(definition, "checked", theme), "checked") : null), buildStateObject(getColorState(definition, "focus", theme), "focus")), (states == null ? void 0 : states.selected) !== false ? buildStateObject(
+    getColorState(definition, "selected", theme),
+    "selected"
+  ) : null), (states == null ? void 0 : states.hover) !== false ? buildStateObject(getColorState(definition, "hover", theme), "hover") : null), (states == null ? void 0 : states.active) !== false ? buildStateObject(getColorState(definition, "active", theme), "active") : null), (states == null ? void 0 : states.disabled) !== false ? buildStateObject(
+    getColorState(definition, "disabled", theme),
+    "disabled"
+  ) : null), (states == null ? void 0 : states.readonly) !== false ? buildStateObject(
+    getColorState(definition, "readonly", theme),
+    "readonly"
+  ) : null);
 };
 
-const getOneColorState = (color, state) => {
+const getOneColorState = (color, state, theme) => {
+  if (typeof color !== "string")
+    return "";
   if (state === "default")
     return color;
   const actualState = state === "checked" ? "selected" : state;
-  const palette = getPalette();
+  const palette = theme.palette;
   const opacity = palette.action[`${state}Opacity`];
   return tinycolor.mix(
     color,
@@ -411,16 +445,97 @@ const getOneColorState = (color, state) => {
   ).toRgbString();
 };
 
-function parsePalette(palette) {
+var __defProp$l = Object.defineProperty;
+var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
+var __hasOwnProp$l = Object.prototype.hasOwnProperty;
+var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$l = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$l.call(b, prop))
+      __defNormalProp$l(a, prop, b[prop]);
+  if (__getOwnPropSymbols$l)
+    for (var prop of __getOwnPropSymbols$l(b)) {
+      if (__propIsEnum$l.call(b, prop))
+        __defNormalProp$l(a, prop, b[prop]);
+    }
+  return a;
+};
+function getColorsByDefinition(definition, options) {
+  return merge(
+    buildColorsObject(__spreadValues$l(__spreadValues$l(__spreadValues$l({}, definition.color ? { color: definition.color } : null), definition.backgroundColor ? { backgroundColor: definition.backgroundColor } : null), definition.borderColor ? {
+      borderColor: definition.borderColor
+    } : null)),
+    options == null ? void 0 : options.mergeObject
+  );
+}
+
+function getColorsAndStatesByDefinition(definition, theme, options) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const active = getColorState(definition, "active", theme);
+  const checked = getColorState(definition, "checked", theme);
+  const disabled = getColorState(definition, "disabled", theme);
+  const focus = ((_a = options == null ? void 0 : options.states) == null ? void 0 : _a.focus) ? getColorState(definition, "focus", theme) : {};
+  const hover = getColorState(definition, "hover", theme);
+  const readonly = getColorState(definition, "readonly", theme);
+  const selected = getColorState(definition, "selected", theme);
+  return merge(
+    ((_b = options == null ? void 0 : options.states) == null ? void 0 : _b.default) !== false ? getColorsByDefinition(definition) : null,
+    ((_c = options == null ? void 0 : options.states) == null ? void 0 : _c.checked) !== false ? buildStateObject(checked, "checked") : {},
+    ((_d = options == null ? void 0 : options.states) == null ? void 0 : _d.focus) !== false ? buildStateObject(focus, "focus") : {},
+    ((_e = options == null ? void 0 : options.states) == null ? void 0 : _e.hover) !== false ? buildStateObject(hover, "hover") : {},
+    ((_f = options == null ? void 0 : options.states) == null ? void 0 : _f.active) !== false ? buildStateObject(active, "active") : {},
+    ((_g = options == null ? void 0 : options.states) == null ? void 0 : _g.selected) !== false ? buildStateObject(selected, "selected") : {},
+    ((_h = options == null ? void 0 : options.states) == null ? void 0 : _h.disabled) !== false ? buildStateObject(disabled, "disabled") : {},
+    ((_i = options == null ? void 0 : options.states) == null ? void 0 : _i.readonly) !== false ? buildStateObject(readonly, "readonly") : {},
+    options == null ? void 0 : options.mergeObject
+  );
+}
+
+function paletteFunction(callback) {
+  return (...args) => {
+    const firstParameter = args[0];
+    let isFirstParameterATheme = false;
+    const themeProps = [
+      "fontSizes",
+      "breakpoints",
+      "fonts",
+      "lineHeights",
+      "letterSpacings",
+      "radii",
+      "zIndices",
+      "useRootStyles"
+    ];
+    if (firstParameter instanceof Object && firstParameter !== null) {
+      const firstParameterKeys = Object.keys(firstParameter);
+      for (const key of firstParameterKeys) {
+        if (themeProps.includes(key)) {
+          isFirstParameterATheme = true;
+          break;
+        }
+      }
+    }
+    if (isFirstParameterATheme) ; else {
+      return callback(...args);
+    }
+  };
+}
+function parsePalette(palette, theme) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
   const newPalette = cloneDeep(palette);
-  newPalette.lightenColor = (_a = palette.lightenColor) != null ? _a : (color, ratio) => {
-    return defaultLighten(color, ratio != null ? ratio : palette.lightenRatio);
-  };
-  newPalette.darkenColor = (_b = palette.darkenColor) != null ? _b : (color, ratio) => {
-    return defaultDarken(color, ratio != null ? ratio : palette.darkenRatio);
-  };
-  newPalette.getContrastText = (_c = palette.getContrastText) != null ? _c : defaultGetContrastText;
+  newPalette.lightenColor = paletteFunction(
+    (_a = palette.lightenColor) != null ? _a : (color, ratio) => {
+      return defaultLighten(color, ratio != null ? ratio : palette.lightenRatio);
+    }
+  );
+  newPalette.darkenColor = paletteFunction(
+    (_b = palette.darkenColor) != null ? _b : (color, ratio) => {
+      return defaultDarken(color, ratio != null ? ratio : palette.darkenRatio);
+    }
+  );
+  newPalette.getContrastText = paletteFunction(
+    (_c = palette.getContrastText) != null ? _c : defaultGetContrastText
+  );
   Object.entries(palette).forEach(([key, value]) => {
     var _a2, _b2, _c2;
     const castedValue = value;
@@ -456,17 +571,33 @@ function parsePalette(palette) {
   newPalette.action.hover = parseAction(newPalette.action.hover);
   newPalette.action.readonly = parseAction(newPalette.action.readonly);
   newPalette.action.selected = parseAction(newPalette.action.selected);
-  newPalette.buildStateObject = buildStateObject;
-  newPalette.getColor = getOneColorState;
-  newPalette.getStatesForColors = applyStatesGetColor;
-  newPalette.getOneState = getColorState;
-  newPalette.getStatesFromDefinition = getColorStates;
-  newPalette.getStatesFromPath = getColorsAndStatesByPath;
   newPalette.gray = (_g = newPalette.gray) != null ? _g : {};
   for (let i = 1; i <= 18; i++) {
     const index = Math.round((255 - 255 / 18) / 18 * i);
     newPalette.gray[i * 50] = (_h = newPalette.gray[i * 50]) != null ? _h : `rgb(${index},${index},${index})`;
   }
+  newPalette.applyStates = paletteFunction(applyStates);
+  newPalette.buildColorsObject = paletteFunction(buildColorsObject);
+  newPalette.buildStateObject = paletteFunction(buildStateObject);
+  newPalette.getColor = paletteFunction(
+    (color, state) => getOneColorState(color, state, theme)
+  );
+  newPalette.getStatesForColors = paletteFunction(
+    (definition, states) => applyStatesGetColor(definition, theme, states)
+  );
+  newPalette.getOneState = paletteFunction(
+    (definition, state) => getColorState(definition, state, theme)
+  );
+  newPalette.getColorStates = paletteFunction(
+    (definition, state) => getColorStates(definition, theme, state)
+  );
+  newPalette.getStatesFromDefinition = paletteFunction(
+    (definition, states) => getColorsAndStatesByDefinition(definition, theme, states)
+  );
+  newPalette.getStatesFromPath = paletteFunction(getColorsAndStatesByPath);
+  newPalette.getSelectedColors = paletteFunction(
+    () => getSelectedColors(theme)
+  );
   return newPalette;
 }
 
@@ -483,34 +614,146 @@ const schemas = {
   grey: ["#b1b5ba", "#d2d5d6", "#dee0e0", "#bdbdbb", "#9fa19c", "#686e67"]
 };
 
-var __defProp$j = Object.defineProperty;
-var __defProps$a = Object.defineProperties;
-var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
-var __hasOwnProp$j = Object.prototype.hasOwnProperty;
-var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$j = (a, b) => {
+const components$1 = (theme) => {
+  const palette = theme.palette;
+  return {
+    datagrid: {
+      borderColor: palette.background.paper,
+      header: {
+        backgroundColor: palette.background.default,
+        color: palette.text.primary,
+        borderColor: palette.background.default
+      },
+      body: {
+        preventParse: true,
+        backgroundColor: palette.background.paper,
+        evenRowsBackgroundColor: palette.darkenColor(
+          palette.background.paper,
+          3
+        ),
+        color: palette.text.primary,
+        borderColor: palette.gray["800"],
+        selectedRows: {
+          borderColor: palette.gray["800"],
+          backgroundColor: palette.getOneState(
+            { backgroundColor: palette.background.paper },
+            "selected"
+          ).backgroundColor,
+          color: palette.getContrastText(
+            palette.getOneState(
+              { backgroundColor: palette.background.paper },
+              "selected"
+            ).backgroundColor
+          )
+        }
+      }
+    },
+    pagination: {
+      backgroundColor: palette.primary.main,
+      icons: {
+        backgroundColor: palette.primary.main,
+        borderColor: palette.primary.main,
+        color: palette.primary.contrastText
+      },
+      pagesBox: {
+        preventParse: true,
+        backgroundColor: palette.background.paper,
+        borderColor: palette.border.field,
+        color: palette.text.primary
+      }
+    },
+    primaryTable: {
+      borderColor: palette.background.paper,
+      header: {
+        backgroundColor: palette.primary.main,
+        color: palette.primary.contrastText,
+        borderColor: palette.primary.main
+      },
+      body: {
+        preventParse: true,
+        backgroundColor: palette.background.paper,
+        evenRowsBackgroundColor: palette.darkenColor(
+          palette.background.paper,
+          3
+        ),
+        color: palette.text.primary,
+        borderColor: palette.gray["800"],
+        selectedRows: {
+          borderColor: palette.gray["800"],
+          backgroundColor: palette.getOneState(
+            { backgroundColor: palette.background.paper },
+            "selected"
+          ).backgroundColor,
+          color: palette.getContrastText(
+            palette.getOneState(
+              { backgroundColor: palette.background.paper },
+              "selected"
+            ).backgroundColor
+          )
+        }
+      }
+    },
+    secondaryTable: {
+      borderColor: palette.background.paper,
+      header: {
+        backgroundColor: palette.background.default,
+        color: palette.text.primary,
+        borderColor: palette.background.default
+      },
+      body: {
+        preventParse: true,
+        backgroundColor: palette.background.paper,
+        evenRowsBackgroundColor: palette.darkenColor(
+          palette.background.paper,
+          3
+        ),
+        color: palette.text.primary,
+        borderColor: palette.gray["800"],
+        selectedRows: {
+          borderColor: palette.gray["800"],
+          backgroundColor: palette.getOneState(
+            { backgroundColor: palette.background.paper },
+            "selected"
+          ).backgroundColor,
+          color: palette.getContrastText(
+            palette.getOneState(
+              { backgroundColor: palette.background.paper },
+              "selected"
+            ).backgroundColor
+          )
+        }
+      }
+    }
+  };
+};
+
+var __defProp$k = Object.defineProperty;
+var __defProps$b = Object.defineProperties;
+var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
+var __hasOwnProp$k = Object.prototype.hasOwnProperty;
+var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$k = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$j.call(b, prop))
-      __defNormalProp$j(a, prop, b[prop]);
-  if (__getOwnPropSymbols$j)
-    for (var prop of __getOwnPropSymbols$j(b)) {
-      if (__propIsEnum$j.call(b, prop))
-        __defNormalProp$j(a, prop, b[prop]);
+    if (__hasOwnProp$k.call(b, prop))
+      __defNormalProp$k(a, prop, b[prop]);
+  if (__getOwnPropSymbols$k)
+    for (var prop of __getOwnPropSymbols$k(b)) {
+      if (__propIsEnum$k.call(b, prop))
+        __defNormalProp$k(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
+var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
 const darkBlue = "#004085";
 const lightBlue = "#cce5ff";
 const white = "white";
-function getSelectedColors() {
-  const palette = getPalette();
-  return palette.getStatesFromDefinition(
+function getSelectedColors(theme) {
+  return theme.palette.getColorStates(
     {
-      backgroundColor: palette.background.paper,
-      color: palette.text.primary
+      backgroundColor: theme.palette.background.paper,
+      color: theme.palette.text.primary
     },
     {
       active: false,
@@ -522,446 +765,462 @@ function getSelectedColors() {
     }
   );
 }
-function getPalette(arg) {
-  const shouldReparsePalette = arg === true;
-  const customPalette = typeof arg !== "boolean" ? arg : void 0;
-  if (window.currentPalette && !shouldReparsePalette)
-    return window.currentPalette;
-  window.currentPalette = parsePalette(
-    merge(
-      defaultPalette,
-      window.defaultPalette,
-      customPalette != null ? customPalette : window.customPalette
-    )
-  );
-  return window.currentPalette;
-}
-function getThemeColorsObject() {
+function getThemeColorsObject(theme) {
   var _a;
-  const palette = cloneDeep((_a = window.currentPalette) != null ? _a : getPalette());
-  const colors = {
-    palette: __spreadProps$a(__spreadValues$j({}, palette), {
-      lightenColor: void 0,
-      darkenColor: void 0,
-      getContrastText: void 0,
-      buildStateObject: void 0,
-      getColor: void 0,
-      getOneState: void 0,
-      getStatesForColors: void 0,
-      getStatesFromDefinition: void 0,
-      getStatesFromPath: void 0
-    }),
-    accordion: {
-      borderColor: palette.border.section
-    },
-    buttons: {
-      accordion: {
-        backgroundColor: palette.primary.main,
-        borderColor: palette.border.section,
-        color: palette.primary.contrastText
-      },
-      accordionPrimary: {
-        backgroundColor: palette.primary.main,
-        borderColor: palette.border.section,
-        color: palette.primary.contrastText
-      },
-      close: __spreadProps$a(__spreadValues$j({}, applyStatesGetColor({
-        color: palette.text.primary,
-        backgroundColor: palette.background.paper
-      })), {
-        backgroundColor: "transparent"
+  const colors = merge(
+    {},
+    {
+      palette: __spreadProps$b(__spreadValues$k({}, theme.palette), {
+        lightenColor: void 0,
+        darkenColor: void 0,
+        getContrastText: void 0,
+        buildStateObject: void 0,
+        getColor: void 0,
+        getOneState: void 0,
+        getStatesForColors: void 0,
+        getStatesFromDefinition: void 0,
+        getStatesFromPath: void 0
       }),
-      collapsibleAsidePanelTitle: {
-        color: palette.text.primary
+      accordion: {
+        borderColor: theme.palette.border.section
       },
-      deletableInputButton: {
-        backgroundColor: "transparent",
-        color: palette.secondary.main,
-        active: {
-          color: palette.darkenColor(palette.secondary.main, 40)
+      buttons: {
+        accordion: {
+          backgroundColor: theme.palette.primary.main,
+          borderColor: theme.palette.border.section,
+          color: theme.palette.primary.contrastText
         },
-        disabled: {
-          color: palette.secondary.main
+        accordionPrimary: {
+          backgroundColor: theme.palette.primary.main,
+          borderColor: theme.palette.border.section,
+          color: theme.palette.primary.contrastText
         },
-        focus: {
-          color: palette.darkenColor(palette.secondary.main, 20)
+        close: __spreadProps$b(__spreadValues$k({}, applyStatesGetColor(
+          {
+            color: theme.palette.text.primary,
+            backgroundColor: theme.palette.background.paper
+          },
+          theme
+        )), {
+          backgroundColor: "transparent"
+        }),
+        collapsibleAsidePanelTitle: {
+          color: theme.palette.text.primary
         },
-        hover: {
-          color: palette.darkenColor(palette.secondary.main, 20)
-        }
-      },
-      icon: {
-        backgroundColor: palette.secondary.main,
-        color: palette.secondary.contrastText,
-        hover: {
-          color: palette.secondary.contrastText
+        deletableInputButton: {
+          backgroundColor: "transparent",
+          color: theme.palette.secondary.main,
+          active: {
+            color: theme.palette.darkenColor(theme.palette.secondary.main, 40)
+          },
+          disabled: {
+            color: theme.palette.secondary.main
+          },
+          focus: {
+            color: theme.palette.darkenColor(theme.palette.secondary.main, 20)
+          },
+          hover: {
+            color: theme.palette.darkenColor(theme.palette.secondary.main, 20)
+          }
         },
-        focus: {
-          color: palette.secondary.contrastText
-        }
-      },
-      iconAlert: {
-        backgroundColor: "transparent",
-        color: "#e5c200",
-        active: {
+        icon: {
+          backgroundColor: theme.palette.secondary.main,
+          color: theme.palette.text.icon,
+          hover: {
+            color: theme.palette.secondary.contrastText
+          },
+          focus: {
+            color: theme.palette.secondary.contrastText
+          }
+        },
+        iconAlert: {
           backgroundColor: "transparent",
-          color: tinycolor("#e5c200").darken(10).toRgbString()
+          color: theme.palette.text.icon,
+          active: {
+            backgroundColor: "transparent",
+            color: tinycolor("#e5c200").darken(10).toRgbString()
+          },
+          focus: {
+            backgroundColor: "transparent",
+            color: tinycolor("#e5c200").darken(5).toRgbString()
+          },
+          hover: {
+            backgroundColor: "transparent",
+            color: tinycolor("#e5c200").darken(5).toRgbString()
+          }
         },
-        focus: {
+        iconPrimary: {
+          backgroundColor: theme.palette.primary.main,
+          color: theme.palette.primary.contrastText,
+          active: {
+            color: theme.palette.primary.contrastText
+          },
+          focus: {
+            color: theme.palette.primary.contrastText
+          },
+          hover: {
+            color: theme.palette.primary.contrastText
+          },
+          disabled: {
+            color: theme.palette.gray["500"]
+          }
+        },
+        iconToggled: {
+          backgroundColor: theme.palette.primary.main,
+          color: theme.palette.primary.contrastText,
+          active: {
+            color: theme.palette.primary.contrastText
+          },
+          focus: {
+            color: theme.palette.common.white
+          },
+          hover: {
+            color: theme.palette.common.white
+          }
+        },
+        iconOutline: {
+          backgroundColor: theme.palette.background.paper,
+          color: theme.palette.primary.main,
+          borderColor: theme.palette.border.article
+        },
+        imagePreview: {
+          backgroundColor: theme.palette.background.paper,
+          color: theme.palette.text.primary,
+          borderColor: theme.palette.border.article
+        },
+        link: {
           backgroundColor: "transparent",
-          color: tinycolor("#e5c200").darken(5).toRgbString()
+          color: theme.palette.text.primary,
+          borderColor: "transparent",
+          active: {
+            color: theme.palette.text.primary
+          },
+          focus: {
+            color: theme.palette.text.primary
+          },
+          hover: {
+            color: theme.palette.text.primary
+          }
+        },
+        openTab: {
+          backgroundColor: theme.palette.primary.main,
+          color: theme.palette.primary.contrastText,
+          borderColor: theme.palette.primary.dark
+        },
+        outline: {
+          backgroundColor: theme.palette.background.paper,
+          color: theme.palette.text.primary,
+          borderColor: theme.palette.primary.main
+        },
+        outlineDanger: {
+          backgroundColor: theme.palette.background.paper,
+          color: theme.palette.primary.main,
+          borderColor: theme.palette.primary.main,
+          active: {
+            borderColor: theme.palette.darkenColor(
+              theme.palette.error.dark,
+              theme.palette.action.activeOpacity * 80
+            ),
+            backgroundColor: theme.palette.darkenColor(
+              theme.palette.error.dark,
+              theme.palette.action.activeOpacity * 80
+            ),
+            color: theme.palette.getContrastText(
+              theme.palette.darkenColor(
+                theme.palette.error.dark,
+                theme.palette.action.activeOpacity * 80
+              )
+            )
+          },
+          focus: {
+            borderColor: theme.palette.darkenColor(
+              theme.palette.error.dark,
+              theme.palette.action.focusOpacity * 60
+            ),
+            backgroundColor: theme.palette.darkenColor(
+              theme.palette.error.dark,
+              theme.palette.action.focusOpacity * 60
+            ),
+            color: theme.palette.getContrastText(
+              theme.palette.darkenColor(
+                theme.palette.error.dark,
+                theme.palette.action.focusOpacity * 60
+              )
+            )
+          },
+          hover: {
+            borderColor: theme.palette.darkenColor(
+              theme.palette.error.dark,
+              theme.palette.action.hoverOpacity * 10
+            ),
+            backgroundColor: theme.palette.darkenColor(
+              theme.palette.error.dark,
+              theme.palette.action.hoverOpacity * 10
+            ),
+            color: theme.palette.getContrastText(
+              theme.palette.darkenColor(
+                theme.palette.error.dark,
+                theme.palette.action.hoverOpacity * 10
+              )
+            )
+          }
+        },
+        outlineWarning: {
+          backgroundColor: theme.palette.background.paper,
+          color: theme.palette.text.primary,
+          borderColor: theme.palette.primary.main,
+          active: {
+            borderColor: theme.palette.warning.main,
+            backgroundColor: theme.palette.warning.main,
+            color: theme.palette.warning.contrastText
+          },
+          focus: {
+            borderColor: theme.palette.warning.main,
+            backgroundColor: theme.palette.warning.main,
+            color: theme.palette.warning.contrastText
+          },
+          hover: {
+            borderColor: theme.palette.warning.main,
+            backgroundColor: theme.palette.warning.main,
+            color: theme.palette.warning.contrastText
+          }
         },
-        hover: {
+        paper: {
+          backgroundColor: theme.palette.background.paper,
+          color: theme.palette.text.primary,
+          borderColor: theme.palette.background.paper
+        },
+        primary: {
+          backgroundColor: theme.palette.primary.main,
+          color: theme.palette.primary.contrastText,
+          borderColor: theme.palette.primary.main
+        },
+        secondary: {
+          backgroundColor: theme.palette.secondary.main,
+          color: theme.palette.secondary.contrastText,
+          borderColor: theme.palette.secondary.main
+        },
+        tab: {
+          backgroundColor: theme.palette.background.paper,
+          color: theme.palette.text.primary,
+          borderColor: theme.palette.border.article
+        },
+        toggleIcon: {
+          color: theme.palette.secondary.contrastText,
+          backgroundColor: theme.palette.secondary.main,
+          borderColor: theme.palette.border.field,
+          danger: {
+            backgroundColor: theme.palette.error.main,
+            borderColor: theme.palette.border.field,
+            color: theme.palette.error.contrastText
+          },
+          toggled: {
+            backgroundColor: theme.palette.primary.main,
+            borderColor: theme.palette.border.field,
+            color: theme.palette.primary.contrastText
+          }
+        },
+        transparentIcon: {
           backgroundColor: "transparent",
-          color: tinycolor("#e5c200").darken(5).toRgbString()
+          color: theme.palette.text.primary,
+          hover: {
+            color: theme.palette.primary.main
+          },
+          focus: {
+            color: theme.palette.primary.main
+          }
         }
       },
-      iconPrimary: {
-        backgroundColor: palette.primary.main,
-        color: palette.primary.contrastText,
-        active: {
-          color: palette.primary.contrastText
-        },
-        focus: {
-          color: palette.primary.contrastText
+      components: components$1(theme),
+      dropzone: {
+        backgroundColor: theme.palette.background.paper,
+        borderColor: theme.palette.border.section,
+        color: theme.palette.background.default
+      },
+      form: {
+        backgroundColor: theme.palette.background.paper,
+        fields: {
+          backgroundColor: theme.palette.background.paper,
+          color: theme.palette.text.primary,
+          borderColor: theme.palette.border.field
         },
-        hover: {
-          color: palette.primary.contrastText
+        radio: {
+          backgroundColor: "transparent",
+          color: tinycolor(theme.palette.text.primary).lighten(15).toRgbString(),
+          borderColor: theme.palette.text.primary,
+          active: {
+            backgroundColor: "transparent",
+            color: tinycolor(theme.palette.text.primary).lighten(0).toRgbString()
+          },
+          checked: {
+            backgroundColor: "transparent",
+            color: tinycolor(theme.palette.text.primary).lighten(15).toRgbString()
+          },
+          disabled: {
+            backgroundColor: "transparent",
+            color: tinycolor(theme.palette.text.primary).lighten(55).toRgbString()
+          },
+          hover: {
+            backgroundColor: "transparent",
+            color: tinycolor(theme.palette.text.primary).lighten(7).toRgbString()
+          },
+          readonly: {
+            color: tinycolor(theme.palette.text.primary).lighten(38).toRgbString(),
+            backgroundColor: "transparent"
+          }
         }
       },
-      iconToggled: {
-        backgroundColor: palette.primary.main,
-        color: palette.primary.contrastText,
-        active: {
-          color: palette.primary.contrastText
+      modal: {
+        borderColor: theme.palette.border.section,
+        backgroundColor: theme.palette.background.paper
+      },
+      notifications: {
+        error: {
+          backgroundColor: theme.palette.error.light,
+          color: theme.palette.getContrastText(theme.palette.error.light),
+          borderColor: theme.palette.error.main
         },
-        focus: {
-          color: palette.common.white
+        success: {
+          backgroundColor: theme.palette.success.light,
+          color: theme.palette.getContrastText(theme.palette.success.light),
+          borderColor: theme.palette.success.main
         },
-        hover: {
-          color: palette.common.white
+        warning: {
+          backgroundColor: theme.palette.warning.light,
+          color: theme.palette.getContrastText(theme.palette.warning.light),
+          borderColor: theme.palette.warning.main
         }
       },
-      iconOutline: {
-        backgroundColor: palette.background.paper,
-        color: palette.primary.main,
-        borderColor: palette.border.article
-      },
-      link: {
-        backgroundColor: "transparent",
-        color: palette.text.primary,
-        borderColor: "transparent",
-        active: {
-          color: palette.text.primary
-        },
-        focus: {
-          color: palette.text.primary
-        },
-        hover: {
-          color: palette.text.primary
-        }
-      },
-      openTab: {
-        backgroundColor: palette.primary.main,
-        color: palette.primary.contrastText,
-        borderColor: palette.primary.dark
-      },
-      outline: {
-        backgroundColor: palette.background.paper,
-        color: palette.getContrastText(palette.background.paper),
-        borderColor: palette.primary.main
-      },
-      outlineDanger: {
-        backgroundColor: palette.background.paper,
-        color: palette.primary.main,
-        borderColor: palette.primary.main,
-        active: {
-          borderColor: palette.darkenColor(
-            palette.error.dark,
-            palette.action.activeOpacity * 80
-          ),
-          backgroundColor: palette.darkenColor(
-            palette.error.dark,
-            palette.action.activeOpacity * 80
-          ),
-          color: palette.getContrastText(
-            palette.darkenColor(
-              palette.error.dark,
-              palette.action.activeOpacity * 80
-            )
-          )
-        },
-        focus: {
-          borderColor: palette.darkenColor(
-            palette.error.dark,
-            palette.action.activeOpacity * 60
-          ),
-          backgroundColor: palette.darkenColor(
-            palette.error.dark,
-            palette.action.activeOpacity * 60
-          ),
-          color: palette.getContrastText(
-            palette.darkenColor(
-              palette.error.dark,
-              palette.action.activeOpacity * 60
-            )
-          )
+      printView: {
+        main: {
+          backgroundColor: theme.palette.background.default,
+          page: {
+            backgroundColor: theme.palette.background.paper,
+            borderColor: theme.palette.border.article
+          }
         },
-        hover: {
-          borderColor: palette.darkenColor(
-            palette.error.dark,
-            palette.action.activeOpacity * 70
-          ),
-          backgroundColor: palette.darkenColor(
-            palette.error.dark,
-            palette.action.activeOpacity * 70
-          ),
-          color: palette.getContrastText(
-            palette.darkenColor(
-              palette.error.dark,
-              palette.action.activeOpacity * 70
-            )
-          )
+        list: {
+          table: {
+            borderColor: theme.palette.border.section
+          },
+          th: { backgroundColor: "#eee" },
+          cell: {
+            borderColor: theme.palette.border.article
+          }
         }
       },
-      outlineWarning: {
-        backgroundColor: palette.background.paper,
-        color: palette.text.primary,
-        borderColor: palette.primary.main,
-        active: {
-          borderColor: palette.warning.main,
-          backgroundColor: palette.warning.main,
-          color: palette.warning.contrastText
-        },
-        focus: {
-          borderColor: palette.warning.main,
-          backgroundColor: palette.warning.main,
-          color: palette.warning.contrastText
-        },
-        hover: {
-          borderColor: palette.warning.main,
-          backgroundColor: palette.warning.main,
-          color: palette.warning.contrastText
+      schemas,
+      scrollbars: {
+        bar: {
+          color: theme.palette.secondary.main,
+          backgroundColor: theme.palette.background.default,
+          hover: {
+            backgroundColor: theme.palette.lightenColor(
+              theme.palette.background.default,
+              10
+            ),
+            color: theme.palette.lightenColor(theme.palette.secondary.main, 10)
+          },
+          active: {
+            backgroundColor: theme.palette.lightenColor(
+              theme.palette.background.default,
+              10
+            ),
+            color: theme.palette.lightenColor(theme.palette.secondary.main, 20)
+          }
         }
       },
-      primary: {
-        backgroundColor: palette.primary.main,
-        color: palette.primary.contrastText,
-        borderColor: palette.primary.main
-      },
-      secondary: {
-        backgroundColor: palette.secondary.main,
-        color: palette.secondary.contrastText,
-        borderColor: palette.secondary.main
-      },
       tab: {
-        backgroundColor: palette.background.paper,
-        color: palette.getContrastText(palette.background.paper),
-        borderColor: palette.border.article
-      },
-      toggleIcon: {
-        color: palette.secondary.contrastText,
-        backgroundColor: palette.secondary.main,
-        borderColor: palette.border.field,
-        danger: {
-          backgroundColor: palette.error.main,
-          borderColor: palette.border.field,
-          color: palette.error.contrastText
-        },
-        toggled: {
-          backgroundColor: palette.primary.main,
-          borderColor: palette.border.field,
-          color: palette.primary.contrastText
-        }
-      },
-      transparentIcon: {
-        backgroundColor: "transparent",
-        color: palette.text.primary,
-        hover: {
-          color: palette.primary.main
-        },
-        focus: {
-          color: palette.primary.main
-        }
-      }
-    },
-    dropzone: {
-      backgroundColor: palette.background.paper,
-      borderColor: palette.border.section,
-      color: palette.background.default
-    },
-    form: {
-      backgroundColor: palette.background.paper,
-      fields: {
-        backgroundColor: palette.background.paper,
-        color: palette.text.primary,
-        borderColor: palette.border.field
-      },
-      radio: {
-        backgroundColor: "transparent",
-        color: tinycolor(window.currentPalette.text.primary).lighten(15).toRgbString(),
-        borderColor: palette.text.primary,
-        active: {
-          backgroundColor: "transparent",
-          color: tinycolor(window.currentPalette.text.primary).lighten(0).toRgbString()
-        },
-        checked: {
-          backgroundColor: "red",
-          color: tinycolor(window.currentPalette.text.primary).lighten(15).toRgbString()
-        },
-        disabled: {
-          backgroundColor: "transparent",
-          color: tinycolor(window.currentPalette.text.primary).lighten(55).toRgbString()
-        },
-        hover: {
-          backgroundColor: "transparent",
-          color: tinycolor(window.currentPalette.text.primary).lighten(7).toRgbString()
-        },
-        readonly: {
-          color: tinycolor(window.currentPalette.text.primary).lighten(38).toRgbString(),
-          backgroundColor: "transparent"
-        }
-      }
-    },
-    modal: {
-      borderColor: palette.border.section,
-      backgroundColor: palette.background.paper
-    },
-    notifications: {
-      error: {
-        backgroundColor: palette.error.light,
-        color: palette.getContrastText(palette.error.light),
-        borderColor: palette.error.main
-      },
-      success: {
-        backgroundColor: palette.success.light,
-        color: palette.getContrastText(palette.success.light),
-        borderColor: palette.success.main
+        backgroundColor: theme.palette.background.paper,
+        borderColor: theme.palette.border.section
       },
-      warning: {
-        backgroundColor: palette.warning.light,
-        color: palette.getContrastText(palette.warning.light),
-        borderColor: palette.warning.main
-      }
-    },
-    pagination: {
-      color: palette.primary.contrastText,
-      backgroundColor: palette.primary.main
-    },
-    printView: {
-      main: {
-        backgroundColor: palette.background.default,
-        page: {
-          backgroundColor: palette.background.paper,
-          borderColor: palette.border.article
-        }
+      topBar: {
+        backgroundColor: theme.palette.primary.main
       },
-      list: {
-        table: {
-          borderColor: palette.border.section
-        },
-        th: { backgroundColor: "#eee" },
-        cell: {
-          borderColor: palette.border.article
-        }
-      }
-    },
-    schemas,
-    scrollbars: {
-      bar: {
-        color: palette.secondary.main,
-        backgroundColor: palette.background.default,
-        hover: {
-          backgroundColor: palette.lightenColor(palette.background.default, 10),
-          color: palette.lightenColor(palette.secondary.main, 10)
-        },
-        active: {
-          backgroundColor: palette.lightenColor(palette.background.default, 10),
-          color: palette.lightenColor(palette.secondary.main, 20)
-        }
+      // Default ThemeUI colors
+      accent: theme.palette.text.accent,
+      background: theme.palette.background.default,
+      iconWarning: "rgb(246 222 87)",
+      muted: theme.palette.text.disabled,
+      primary: theme.palette.primary.main,
+      secondary: theme.palette.secondary.main,
+      text: theme.palette.text.primary,
+      warning: theme.palette.warning.main,
+      danger: theme.palette.error.main,
+      link: theme.palette.text.accent,
+      success: theme.palette.success.main,
+      title: theme.palette.text.title,
+      selected: theme.palette.getOneState(
+        { backgroundColor: theme.palette.background.paper },
+        "selected"
+      ).backgroundColor,
+      // Meaningful colors
+      lightBorder: "hsl(0, 12%, 85%)",
+      outlineColor: "#00a8f6",
+      touchedBorderColor: "orange",
+      // Custom Apia colors
+      baseGrey: "#dfdfdf",
+      darkBorder: "hsl(247, 98%, 10%)",
+      darkBlue,
+      disabled: "#efefef",
+      favorite: "#e5c200",
+      filtersRowBackground: white,
+      formBackground: white,
+      grey: "#777",
+      gridRowHighlight: "#e1f3ff",
+      highlightButton: "hsl(61, 100%, 91%)",
+      lightBlue,
+      oddRow: "#f0f5ff",
+      paginationBackground: "hsl(229deg, 75%, 90%)",
+      readOnlyText: "#737373",
+      required: "darkred",
+      scrollbarBack: "rgb(206, 206, 206)",
+      scrollbarFront: "rgb(156, 156, 156)",
+      sysExceptionNotificationBg: "#f8d7da",
+      sysMessageNotificationBg: "#fff3cd",
+      tabBackground: "white",
+      treeRuler: "#ccc",
+      white,
+      priorityNone: "gray",
+      priorityLow: theme.palette.success.main,
+      priorityNormal: "rgb(255 211 34)",
+      priorityHigh: "rgb(255 150 0)",
+      priorityUrgent: "red",
+      // modes: {
+      //   dark: {
+      //     // TODO: dark-mode uhhhhhhh!!!
+      //     //text: '#fff',
+      //   },
+      // },
+      charts: {
+        front: darkBlue
       }
     },
-    tab: {
-      backgroundColor: palette.background.paper,
-      borderColor: palette.border.section
-    },
-    topBar: {
-      backgroundColor: palette.primary.main
-    },
-    // Default ThemeUI colors
-    accent: palette.text.accent,
-    background: palette.background.default,
-    iconWarning: "rgb(246 222 87)",
-    muted: palette.text.disabled,
-    primary: palette.primary.main,
-    secondary: palette.secondary.main,
-    text: palette.text.primary,
-    warning: palette.warning.main,
-    danger: palette.error.main,
-    link: palette.text.accent,
-    success: palette.success.main,
-    title: palette.text.title,
-    // Meaningful colors
-    lightBorder: "hsl(0, 12%, 85%)",
-    outlineColor: palette.lightenColor(palette.primary.main, 20),
-    // Custom Apia colors
-    baseGrey: "#dfdfdf",
-    darkBorder: "hsl(247, 98%, 10%)",
-    darkBlue,
-    disabled: "#efefef",
-    favorite: "#e5c200",
-    filtersRowBackground: white,
-    formBackground: white,
-    grey: "#777",
-    gridRowHighlight: "#e1f3ff",
-    highlightButton: "hsl(61, 100%, 91%)",
-    lightBlue,
-    oddRow: "#f0f5ff",
-    paginationBackground: "hsl(229deg, 75%, 90%)",
-    readOnlyText: "#737373",
-    required: "darkred",
-    scrollbarBack: "rgb(206, 206, 206)",
-    scrollbarFront: "rgb(156, 156, 156)",
-    sysExceptionNotificationBg: "#f8d7da",
-    sysMessageNotificationBg: "#fff3cd",
-    tabBackground: "white",
-    treeRuler: "#ccc",
-    white,
-    priorityNone: "gray",
-    priorityLow: palette.success.main,
-    priorityNormal: "rgb(255 211 34)",
-    priorityHigh: "rgb(255 150 0)",
-    priorityUrgent: "red",
-    // modes: {
-    //   dark: {
-    //     // TODO: dark-mode uhhhhhhh!!!
-    //     //text: '#fff',
-    //   },
-    // },
-    charts: {
-      front: darkBlue
-    }
-  };
-  applyStates([
-    colors == null ? void 0 : colors.buttons,
-    colors == null ? void 0 : colors.form
-  ]);
+    (_a = theme.colors) != null ? _a : {}
+  );
+  applyStates(
+    [
+      colors == null ? void 0 : colors.buttons,
+      colors == null ? void 0 : colors.form
+    ],
+    theme
+  );
   return colors;
 }
 
-var __defProp$i = Object.defineProperty;
-var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
-var __hasOwnProp$i = Object.prototype.hasOwnProperty;
-var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$i = (a, b) => {
+var __defProp$j = Object.defineProperty;
+var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
+var __hasOwnProp$j = Object.prototype.hasOwnProperty;
+var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$j = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$i.call(b, prop))
-      __defNormalProp$i(a, prop, b[prop]);
-  if (__getOwnPropSymbols$i)
-    for (var prop of __getOwnPropSymbols$i(b)) {
-      if (__propIsEnum$i.call(b, prop))
-        __defNormalProp$i(a, prop, b[prop]);
+    if (__hasOwnProp$j.call(b, prop))
+      __defNormalProp$j(a, prop, b[prop]);
+  if (__getOwnPropSymbols$j)
+    for (var prop of __getOwnPropSymbols$j(b)) {
+      if (__propIsEnum$j.call(b, prop))
+        __defNormalProp$j(a, prop, b[prop]);
     }
   return a;
 };
@@ -1041,7 +1300,9 @@ const alerts = {
       backgroundColor: "rgba(10,10,10,0.02)",
       pt: spacing(5),
       ".notification__traceLabel": {
-        pl: spacing(5)
+        pl: spacing(5),
+        display: "flex",
+        gap: 2
       },
       ".notification__traceText": {
         fontWeight: "normal",
@@ -1056,37 +1317,37 @@ const alerts = {
   },
   warning: {
     variant: "alerts.primary",
-    "&, & .notification__header": __spreadValues$i({}, getColorsByPath("notifications.warning"))
+    "&, & .notification__header": __spreadValues$j({}, getColorsByPath("notifications.warning"))
   },
   danger: {
     variant: "alerts.primary",
-    "&, & .notification__header": __spreadValues$i({}, getColorsByPath("notifications.error"))
+    "&, & .notification__header": __spreadValues$j({}, getColorsByPath("notifications.error"))
   },
   success: {
     variant: "alerts.primary",
-    "&, & .notification__header": __spreadValues$i({}, getColorsByPath("notifications.success"))
+    "&, & .notification__header": __spreadValues$j({}, getColorsByPath("notifications.success"))
   }
 };
 
-var __defProp$h = Object.defineProperty;
-var __defProps$9 = Object.defineProperties;
-var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
-var __hasOwnProp$h = Object.prototype.hasOwnProperty;
-var __propIsEnum$h = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$h = (a, b) => {
+var __defProp$i = Object.defineProperty;
+var __defProps$a = Object.defineProperties;
+var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
+var __hasOwnProp$i = Object.prototype.hasOwnProperty;
+var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$i = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$h.call(b, prop))
-      __defNormalProp$h(a, prop, b[prop]);
-  if (__getOwnPropSymbols$h)
-    for (var prop of __getOwnPropSymbols$h(b)) {
-      if (__propIsEnum$h.call(b, prop))
-        __defNormalProp$h(a, prop, b[prop]);
+    if (__hasOwnProp$i.call(b, prop))
+      __defNormalProp$i(a, prop, b[prop]);
+  if (__getOwnPropSymbols$i)
+    for (var prop of __getOwnPropSymbols$i(b)) {
+      if (__propIsEnum$i.call(b, prop))
+        __defNormalProp$i(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
+var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
 const buttons = {
   inherit: {
     color: "inherit",
@@ -1098,14 +1359,14 @@ const buttons = {
     padding: 0,
     margin: 0
   },
-  collapsibleAsidePanelTitle: __spreadValues$h({
+  collapsibleAsidePanelTitle: __spreadValues$i({
     variant: "buttons.inherit",
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
     width: "100%"
   }, getColorsAndStatesByPath("buttons.collapsibleAsidePanelTitle")),
-  primary: __spreadProps$9(__spreadValues$h({
+  primary: __spreadProps$a(__spreadValues$i({
     borderWidth: "2px",
     borderStyle: "solid",
     variant: "text.default",
@@ -1124,37 +1385,37 @@ const buttons = {
       outlineColor: "#00daff"
     }
   }),
-  "primary-sm": __spreadValues$h({
+  "primary-sm": __spreadValues$i({
     variant: "buttons.primary",
     "&:focus, &:focus-visible": {}
   }, smallButton),
-  secondary: __spreadValues$h({
+  secondary: __spreadValues$i({
     variant: "buttons.primary",
     "&:focus, &:focus-visible": {},
     borderWidth: "0px",
     borderStyle: "solid"
   }, getColorsAndStatesByPath("buttons.secondary")),
-  "secondary-sm": __spreadValues$h({
+  "secondary-sm": __spreadValues$i({
     variant: "buttons.secondary"
   }, smallButton),
-  "light-secondary": __spreadValues$h({
+  "light-secondary": __spreadValues$i({
     variant: "buttons.secondary"
   }, getColorsAndStatesByPath("buttons.lightSecondary")),
-  danger: __spreadValues$h({
+  danger: __spreadValues$i({
     variant: "buttons.primary",
     "&:focus, &:focus-visible": {}
   }, getColorsAndStatesByPath("buttons.danger")),
-  "danger-sm": __spreadValues$h({
+  "danger-sm": __spreadValues$i({
     variant: "buttons.danger"
   }, smallButton),
-  warning: __spreadValues$h({
+  warning: __spreadValues$i({
     variant: "buttons.primary",
     "&:focus, &:focus-visible": {}
   }, getColorsAndStatesByPath("buttons.warning")),
-  "warning-sm": __spreadValues$h({
+  "warning-sm": __spreadValues$i({
     variant: "buttons.warning"
   }, smallButton),
-  close: __spreadValues$h({
+  close: __spreadValues$i({
     cursor: "pointer",
     ml: "auto",
     mr: "2",
@@ -1181,13 +1442,19 @@ const buttons = {
     border: "none",
     transition: "background-color 300ms ease-out, color 300ms ease-out",
     userSelect: "text",
-    "&, *": getColorsAndStatesByPath("buttons.accordion")
+    "&, *": getColorsAndStatesByPath("buttons.accordion"),
+    "h3.toggleAccordionElementLabel": {
+      variant: "text.default",
+      color: "inherit",
+      margin: 0,
+      wordBreak: "break-word"
+    }
   },
-  "accordion-primary": __spreadValues$h({
+  "accordion-primary": __spreadValues$i({
     variant: "buttons.accordion",
     border: "none"
   }, getColorsAndStatesByPath("buttons.accordionPrimary")),
-  icon: __spreadProps$9(__spreadValues$h({
+  icon: __spreadProps$a(__spreadValues$i({
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
@@ -1199,30 +1466,47 @@ const buttons = {
     borderRadius: "buttons",
     border: "none"
   }, getColorsAndStatesByPath("buttons.icon")), {
-    svg: {
+    path: {
       width: "auto",
       height: "20px",
-      display: "block"
+      display: "block",
+      fill: getColorsAndStatesByPath("buttons.icon").color
     },
-    "&.isToggled": __spreadValues$h({}, getColorsAndStatesByPath("buttons.iconToggled"))
+    "&.isToggled": __spreadProps$a(__spreadValues$i({}, getColorsAndStatesByPath("buttons.iconToggled")), {
+      path: {
+        fill: getColorsAndStatesByPath("buttons.iconToggled").color
+      }
+    })
   }),
-  "icon-primary": __spreadValues$h({
+  "icon-primary": __spreadProps$a(__spreadValues$i({
     variant: "buttons.icon"
-  }, getColorsAndStatesByPath("buttons.iconPrimary")),
-  "icon-outline": __spreadValues$h({
+  }, getColorsAndStatesByPath("buttons.iconPrimary")), {
+    path: {
+      fill: getColorsAndStatesByPath("buttons.iconPrimary").color
+    }
+  }),
+  "icon-outline": __spreadProps$a(__spreadValues$i({
     variant: "buttons.icon",
     bg: "white",
     border: "1px solid"
-  }, getColorsAndStatesByPath("buttons.iconOutline")),
-  "icon-outline-danger": __spreadValues$h({
+  }, getColorsAndStatesByPath("buttons.iconOutline")), {
+    path: {
+      fill: getColorsAndStatesByPath("buttons.iconOutline").color
+    }
+  }),
+  "icon-outline-danger": __spreadValues$i({
     variant: "buttons.icon",
     bg: "white",
     border: "1px solid"
   }, getColorsAndStatesByPath("buttons.outlineDanger")),
-  "icon-only": __spreadValues$h({
+  "icon-only": __spreadProps$a(__spreadValues$i({
     variant: "buttons.icon"
-  }, getColorsAndStatesByPath("buttons.iconOnly")),
-  link: __spreadValues$h({
+  }, getColorsAndStatesByPath("buttons.iconOnly")), {
+    path: {
+      fill: getColorsAndStatesByPath("buttons.iconOnly").color
+    }
+  }),
+  link: __spreadValues$i({
     variant: "inherit",
     width: "auto",
     border: "none",
@@ -1234,20 +1518,30 @@ const buttons = {
     textTransform: "none",
     transition: "background-color 300ms ease-out, color 300ms ease-out"
   }, getColorsAndStatesByPath("buttons.link")),
-  "link-sm": __spreadValues$h({
+  "link-sm": __spreadValues$i({
     variant: "buttons.link"
   }, smallButton),
-  outline: __spreadValues$h({
+  outline: __spreadValues$i({
     variant: "buttons.primary",
     borderWidth: "2px",
     borderStyle: "solid",
     borderRadius: "buttons",
     "&:focus, &:focus-visible": {}
-  }, getColorsAndStatesByPath("buttons.outline")),
-  "outline-sm": __spreadValues$h({
+  }, getColorsAndStatesByPath("buttons.outline", {
+    states: {
+      active: false,
+      checked: false,
+      disabled: false,
+      focus: false,
+      hover: false,
+      readonly: false,
+      selected: false
+    }
+  })),
+  "outline-sm": __spreadValues$i({
     variant: "buttons.outline"
   }, smallButton),
-  "transparent-sm": __spreadValues$h({
+  "transparent-sm": __spreadValues$i({
     variant: "buttons.outline",
     "&:focus, &:focus-visible": {},
     bg: "transparent",
@@ -1256,18 +1550,18 @@ const buttons = {
     font: "inherit",
     textTransform: "inherit"
   }, smallButton),
-  "outline-danger": __spreadValues$h({
+  "outline-danger": __spreadValues$i({
     variant: "buttons.outline",
     "&:focus, &:focus-visible": {}
   }, getColorsAndStatesByPath("buttons.outlineDanger")),
-  "outline-danger-sm": __spreadValues$h({
+  "outline-danger-sm": __spreadValues$i({
     variant: "buttons.outline-danger"
   }, smallButton),
-  "outline-warning": __spreadValues$h({
+  "outline-warning": __spreadValues$i({
     variant: "buttons.outline",
     "&:focus, &:focus-visible": {}
   }, getColorsAndStatesByPath("buttons.outlineWarning")),
-  "outline-warning-sm": __spreadValues$h({
+  "outline-warning-sm": __spreadValues$i({
     variant: "buttons.outline-warning"
   }, smallButton),
   "outline-extended": {
@@ -1297,7 +1591,7 @@ const buttons = {
       gridColumnEnd: 3
     }
   },
-  tableAccordion: __spreadValues$h({
+  tableAccordion: __spreadValues$i({
     variant: "buttons.accordion",
     fontSize: "text.default",
     p: spacing(3),
@@ -1306,7 +1600,7 @@ const buttons = {
       color: "background"
     }
   }, getColorsAndStatesByPath("buttons.tableAccordion")),
-  tableHeader: __spreadValues$h({
+  tableHeader: __spreadValues$i({
     variant: "buttons.tableAccordion",
     alignItems: "center",
     justifyContent: "center",
@@ -1315,89 +1609,419 @@ const buttons = {
     svg: {
       ml: spacing(2)
     }
-  }, getColorsAndStatesByPath("buttons.tableHeader"))
+  }, getColorsAndStatesByPath("buttons.tableHeader")),
+  paper: __spreadValues$i({
+    variant: "buttons.primary",
+    borderWidth: "2px",
+    borderStyle: "solid",
+    borderRadius: "buttons"
+  }, getColorsAndStatesByPath("buttons.paper")),
+  "paper-sm": __spreadValues$i(__spreadValues$i({
+    variant: "buttons.primary",
+    borderWidth: "2px",
+    borderStyle: "solid",
+    borderRadius: "buttons"
+  }, getColorsAndStatesByPath("buttons.paper")), smallButton)
 };
 
-var __defProp$g = Object.defineProperty;
-var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
-var __hasOwnProp$g = Object.prototype.hasOwnProperty;
-var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$g = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$g.call(b, prop))
-      __defNormalProp$g(a, prop, b[prop]);
-  if (__getOwnPropSymbols$g)
-    for (var prop of __getOwnPropSymbols$g(b)) {
-      if (__propIsEnum$g.call(b, prop))
-        __defNormalProp$g(a, prop, b[prop]);
-    }
-  return a;
-};
-const customCheckbox = __spreadValues$g({
-  display: "inline-flex",
-  borderRadius: "default",
-  flexBasis: "32px",
-  flexShrink: 0,
-  width: "32px",
-  height: "32px",
-  alignItems: "center",
-  justifyContent: "center",
-  p: "3px",
-  border: "1px solid",
-  svg: {
-    width: "20px"
-  }
-}, getColorsAndStatesByPath("form.fields", {
-  states: {
-    active: false,
-    hover: false,
-    focus: false
+const text = {
+  default: {
+    color: "palette.text.primary",
+    fontFamily: "body",
+    fontWeight: "body",
+    fontSize: 16,
+    m: spacing(0),
+    width: "100%"
+  },
+  title: {
+    letterSpacing: "heading",
+    wordBreak: "normal",
+    color: "title",
+    fontFamily: "heading",
+    lineHeight: "heading",
+    fontWeight: "heading"
   }
-}));
-
-var __defProp$f = Object.defineProperty;
-var __defProps$8 = Object.defineProperties;
-var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
-var __hasOwnProp$f = Object.prototype.hasOwnProperty;
-var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$f = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$f.call(b, prop))
-      __defNormalProp$f(a, prop, b[prop]);
-  if (__getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(b)) {
-      if (__propIsEnum$f.call(b, prop))
-        __defNormalProp$f(a, prop, b[prop]);
-    }
-  return a;
 };
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
-const checkbox = __spreadProps$8(__spreadValues$f({
-  borderRadius: "default"
-}, getColorsAndStatesByPath("form.fields", {
-  states: {
-    active: false,
-    focus: false,
-    hover: false
-  }
-})), {
-  backgroundColor: "unset",
-  alignItems: "center",
-  "&.nativeCheckbox": {
-    appearance: "none",
-    width: "25px",
-    height: "25px",
-    border: "solid 1px #cccccc",
-    marginRight: "8px",
-    position: "relative",
-    cursor: "pointer",
-    "&:checked::before": {
-      content: '"\u2713"',
-      color: "palette.text.primary",
-      position: "absolute",
+
+const transitions = {
+  "@keyframes growHorizontal": {
+    from: { transform: "scaleX(0)" },
+    to: { transform: "scaleY(100%)" }
+  },
+  ".hamburguerMenu": { display: "none" },
+  ".hamburguerMenu-enter,\n.hamburguerMenu-appear": {
+    display: "block",
+    transform: "scale(0.7)",
+    opacity: 0
+  },
+  ".hamburguerMenu-enter-active,\n.hamburguerMenu-appear-active": {
+    transform: "translateX(0)",
+    transition: "opacity 150ms, transform 150ms",
+    transformOrigin: "right top",
+    opacity: 1
+  },
+  ".hamburguerMenu-enter-done,\n.hamburguerMenu-appear-done": {
+    display: "block"
+  },
+  ".hamburguerMenu-exit": {
+    display: "block",
+    transform: "scale(1)",
+    opacity: 1
+  },
+  ".hamburguerMenu-exit-active": {
+    transform: "scale(0.7) translateX(0)",
+    transition: "opacity 150ms, transform 150ms",
+    display: "block",
+    opacity: 0,
+    transformOrigin: "right top"
+  },
+  ".hamburguerMenu-exit-done": { display: "none" },
+  ".modal-enter,\n.modal-appear": { opacity: 0, transform: "scale(0.8)" },
+  ".modal-enter-active,\n.modal-appear-active": {
+    opacity: 1,
+    transform: "translateX(0)",
+    transition: "opacity 150ms, transform 150ms",
+    transitionDelay: "0"
+  },
+  ".modal-exit": { opacity: 0 },
+  ".modal-exit-done": { opacity: 0, display: "none" },
+  ".modal-exit-active": {
+    opacity: 0,
+    transform: "scale(100)",
+    transition: "opacity 150ms, transform 150ms",
+    transitionDelay: "0"
+  },
+  ".overlayAnimation-enter .overlayAnimation:not(.not-released),\n.overlayAnimation-appear .overlayAnimation:not(.not-released)": {
+    opacity: 0
+  },
+  ".overlayAnimation-enter-active .overlayAnimation:not(.not-released),\n.overlayAnimation-appear-active .overlayAnimation:not(.not-released)": {
+    opacity: 1,
+    transition: "opacity 150ms"
+  },
+  ".overlayAnimation-exit": { opacity: 1 },
+  ".overlayAnimation-exit-active": { opacity: 0, transition: "opacity 150ms" },
+  ".fromRight-enter,\n.fromRight-appear": { transform: "translateX(550px)" },
+  ".fromRight-enter-active,\n.fromRight-appear-active": {
+    transition: "transform 150ms",
+    transform: "translateX(0)"
+  },
+  ".fromRight-exit": { transform: "translateX(0)" },
+  ".fromRight-exit-active": {
+    transition: "transform 150ms",
+    transform: "translateX(550px)"
+  },
+  ".notification-enter,\n.notification-appear": {
+    opacity: 0,
+    transform: "scale(0.8)"
+  },
+  ".notification-enter-active,\n.notification-appear-active": {
+    opacity: 1,
+    transform: "translateX(0)",
+    transition: "opacity 150ms, transform 150ms",
+    transitionDelay: "0"
+  },
+  ".notification-exit": { opacity: 1 },
+  ".notification-exit-active": {
+    opacity: 0,
+    transform: "scale(0.8)",
+    transition: "opacity 150ms, transform 150ms",
+    transitionDelay: "0"
+  }
+};
+
+var __defProp$h = Object.defineProperty;
+var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
+var __hasOwnProp$h = Object.prototype.hasOwnProperty;
+var __propIsEnum$h = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$h = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$h.call(b, prop))
+      __defNormalProp$h(a, prop, b[prop]);
+  if (__getOwnPropSymbols$h)
+    for (var prop of __getOwnPropSymbols$h(b)) {
+      if (__propIsEnum$h.call(b, prop))
+        __defNormalProp$h(a, prop, b[prop]);
+    }
+  return a;
+};
+const root = __spreadValues$h({
+  height: "100%",
+  "*": {
+    fontFamily: "body",
+    fontWeight: "body",
+    code: {
+      fontFamily: "monospace"
+    },
+    "&:focus": focusOutline
+  },
+  body: {
+    minHeight: "100vh"
+  },
+  h1: {
+    fontSize: responsive$1({ 0: 26, 3: 32 })
+  },
+  h2: {
+    fontSize: responsive$1({ 0: 22, 3: 28 })
+  },
+  h3: {
+    fontSize: responsive$1({ 0: 19, 3: 25 })
+  },
+  h4: {
+    fontSize: responsive$1({ 0: 18, 3: 22 })
+  },
+  h5: {
+    fontSize: responsive$1({ 0: 18, 3: 22 })
+  },
+  h6: {
+    fontSize: responsive$1({ 0: 17, 3: 17 })
+  },
+  "h1,h2,h3,h4,h5,h6": {
+    letterSpacing: "heading",
+    lineHeight: "heading",
+    variant: "text.title"
+  },
+  "*:not(h1, h2, h3, h4, h5, h6, code)": {
+    fontFamily: "body",
+    fontSize: 16,
+    fontWeight: "body",
+    letterSpacing: "body",
+    lineHeight: "body"
+  },
+  a: {
+    textDecoration: "underline"
+  },
+  "textarea,a": {
+    transition: "color 200ms ease-out",
+    ":focus": __spreadValues$h({}, focusOutline),
+    ":focus-visible": __spreadValues$h({}, focusOutline)
+  },
+  "*:focus": focusOutline,
+  ul: {
+    listStyle: "none",
+    listStyleType: "none",
+    margin: 0,
+    padding: 0
+  },
+  abbr: {
+    "&.required": {
+      textDecoration: "none",
+      border: "none",
+      mx: 1,
+      alignSelf: "baseline",
+      fontWeight: "bold",
+      color: "danger"
+    }
+  },
+  table: {
+    borderCollapse: "separate",
+    borderSpacing: 0
+  },
+  "& label": {
+    display: "flex",
+    "& > span": {
+      mb: spacing(1),
+      fontWeight: "bold"
+    },
+    "&.required": {
+      position: "relative",
+      "&::before": {
+        color: "danger",
+        position: "absolute",
+        content: '"*"',
+        top: 0,
+        left: "-10px"
+      },
+      "*:invalid": {
+        borderColor: "danger"
+      }
+    }
+  },
+  ".bold": {
+    fontWeight: "bold"
+  },
+  ".light": {
+    fontWeight: "light"
+  },
+  ".Left": {
+    textAlign: "left !important"
+  },
+  ".Center": {
+    textAlign: "center !important"
+  },
+  ".Right": {
+    textAlign: "right !important"
+  },
+  ".Justify": {
+    textAlign: "justify !important"
+  },
+  ".Bottom": {
+    verticalAlign: "bottom !important"
+  },
+  ".Middle": {
+    verticalAlign: "middle !important"
+  },
+  ".Top": {
+    verticalAlign: "top !important"
+  },
+  ".hidden": {
+    display: "none"
+  }
+}, transitions);
+
+const baseTheme = () => {
+  return {
+    alerts,
+    breakpoints: [
+      "0px",
+      "250px",
+      "500px",
+      "700px",
+      "1000px",
+      "1260px",
+      "1580px"
+    ],
+    buttons,
+    colors: {},
+    fonts: {
+      body: "Arial",
+      heading: "inherit",
+      monospace: "Menlo, monospace"
+    },
+    fontSizes: Array(60).fill(1).map((_, i) => {
+      return i;
+    }),
+    forms: {},
+    layout: {
+      root
+    },
+    lineHeights: {
+      body: 1.5,
+      heading: 1.125
+    },
+    letterSpacings: {
+      body: "0.01em",
+      heading: "-0.015em"
+    },
+    radii: {
+      alerts: 0,
+      buttons: 0,
+      default: 0
+    },
+    shadows: {
+      modals: "",
+      tabs: ""
+    },
+    space: [0, 2, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96, 112, 128],
+    sizes: {
+      // Layout
+      applicationMenu: "350px",
+      floatingNotifications: "min(550px, calc(100vw - 30px))",
+      root: "992px",
+      mainImage: "64px",
+      twoColumns: "calc(992px + 350px)",
+      twoColumnsCentered: "calc(992px + 350px + 16px)",
+      // Icons
+      iconXs: "12px",
+      iconSm: "16px",
+      iconMd: "22px",
+      iconLg: "32px",
+      iconXl: "48px"
+    },
+    text,
+    zIndices: {
+      stickyElements: 600,
+      menu: 1e3,
+      maximizedTables: 1100,
+      modal: 1200,
+      tooltip: 1400,
+      notifications: 1600,
+      contextMenu: 1800
+    },
+    useRootStyles: true
+  };
+};
+
+var __defProp$g = Object.defineProperty;
+var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
+var __hasOwnProp$g = Object.prototype.hasOwnProperty;
+var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$g = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$g.call(b, prop))
+      __defNormalProp$g(a, prop, b[prop]);
+  if (__getOwnPropSymbols$g)
+    for (var prop of __getOwnPropSymbols$g(b)) {
+      if (__propIsEnum$g.call(b, prop))
+        __defNormalProp$g(a, prop, b[prop]);
+    }
+  return a;
+};
+const customCheckbox = __spreadValues$g({
+  display: "inline-flex",
+  borderRadius: "default",
+  flexBasis: "32px",
+  flexShrink: 0,
+  width: "32px",
+  height: "32px",
+  alignItems: "center",
+  justifyContent: "center",
+  p: "3px",
+  border: "1px solid",
+  svg: {
+    width: "20px"
+  }
+}, getColorsAndStatesByPath("form.fields", {
+  states: {
+    active: false,
+    hover: false,
+    focus: false
+  }
+}));
+
+var __defProp$f = Object.defineProperty;
+var __defProps$9 = Object.defineProperties;
+var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
+var __hasOwnProp$f = Object.prototype.hasOwnProperty;
+var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$f = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$f.call(b, prop))
+      __defNormalProp$f(a, prop, b[prop]);
+  if (__getOwnPropSymbols$f)
+    for (var prop of __getOwnPropSymbols$f(b)) {
+      if (__propIsEnum$f.call(b, prop))
+        __defNormalProp$f(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
+const checkbox = __spreadProps$9(__spreadValues$f({
+  borderRadius: "default"
+}, getColorsAndStatesByPath("form.fields", {
+  states: {
+    active: false,
+    focus: false,
+    hover: false
+  }
+})), {
+  backgroundColor: "unset",
+  alignItems: "center",
+  "&.nativeCheckbox": {
+    appearance: "none",
+    width: "25px",
+    height: "25px",
+    border: "solid 1px #cccccc",
+    marginRight: "8px",
+    position: "relative",
+    cursor: "pointer",
+    "&:checked::before": {
+      content: '"\u2713"',
+      color: "palette.text.primary",
+      position: "absolute",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
@@ -1430,8 +2054,8 @@ const checkbox = __spreadProps$8(__spreadValues$f({
 });
 
 var __defProp$e = Object.defineProperty;
-var __defProps$7 = Object.defineProperties;
-var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
+var __defProps$8 = Object.defineProperties;
+var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
 var __hasOwnProp$e = Object.prototype.hasOwnProperty;
 var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
@@ -1447,8 +2071,8 @@ var __spreadValues$e = (a, b) => {
     }
   return a;
 };
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
-const dateInput = __spreadProps$7(__spreadValues$e({
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+const dateInput = __spreadProps$8(__spreadValues$e({
   display: "flex",
   flexDirection: "column",
   alignItems: "stretch",
@@ -1538,8 +2162,8 @@ const iconInput = {
 };
 
 var __defProp$c = Object.defineProperty;
-var __defProps$6 = Object.defineProperties;
-var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
 var __hasOwnProp$c = Object.prototype.hasOwnProperty;
 var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
@@ -1555,8 +2179,8 @@ var __spreadValues$c = (a, b) => {
     }
   return a;
 };
-var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
-const input = __spreadProps$6(__spreadValues$c({
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+const input = __spreadProps$7(__spreadValues$c({
   variant: "text.default",
   border: "1px solid",
   borderRadius: "default",
@@ -1686,8 +2310,8 @@ const select = __spreadValues$a({
 }));
 
 var __defProp$9 = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
 var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
 var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
@@ -1703,42 +2327,41 @@ var __spreadValues$9 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-const selectMultiple = __spreadValues$9({
-  variant: "text.default",
-  height: "100%",
-  padding: "4px",
-  borderRadius: "default",
-  border: "1px solid",
-  width: "100%",
-  transition: "background-color 100ms ease-out, color 100ms ease-out",
-  overflow: "auto",
-  option: __spreadProps$5(__spreadValues$9({
-    padding: 2
-  }, getSelectedColors()), {
-    "&:checked": {
-      backgroundColor: window.currentPalette.getColor(
-        window.currentPalette.background.paper,
-        "selected"
-      ),
-      color: window.currentPalette.getContrastText(
-        window.currentPalette.getColor(
-          window.currentPalette.background.paper,
+var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+function selectMultiple(theme) {
+  return __spreadValues$9({
+    variant: "text.default",
+    height: "100%",
+    padding: "4px",
+    borderRadius: "default",
+    border: "1px solid",
+    width: "100%",
+    transition: "background-color 100ms ease-out, color 100ms ease-out",
+    overflow: "auto",
+    option: __spreadProps$6(__spreadValues$9({
+      padding: 2
+    }, getSelectedColors(theme)), {
+      "&:checked": {
+        backgroundColor: theme.palette.getColor(
+          theme.palette.background.paper,
           "selected"
+        ),
+        color: theme.palette.getContrastText(
+          theme.palette.getColor(theme.palette.background.paper, "selected")
         )
-      )
+      }
+    }),
+    "+ svg": {
+      display: "none"
     }
-  }),
-  "+ svg": {
-    display: "none"
-  }
-}, getColorsAndStatesByPath("form.fields", {
-  states: {
-    active: false,
-    hover: false,
-    focus: false
-  }
-}));
+  }, theme.palette.getStatesFromPath("form.fields", {
+    states: {
+      active: false,
+      hover: false,
+      focus: false
+    }
+  }));
+}
 
 const Switch = {
   "+ span": {
@@ -1761,8 +2384,8 @@ const textarea = {
 };
 
 var __defProp$8 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
 var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
 var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
@@ -1778,7 +2401,7 @@ var __spreadValues$8 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
 const deletableInput = {
   border: "1px solid",
   borderColor: "palette.border.field",
@@ -1796,7 +2419,7 @@ const deletableInput = {
     top: 0,
     width: "45px"
   }, getColorsAndStatesByPath("buttons.deletableInputButton")),
-  "&:focus-within:not(.asMaterial)": __spreadProps$4(__spreadValues$8({}, focusOutline), {
+  "&:focus-within:not(.asMaterial)": __spreadProps$5(__spreadValues$8({}, focusOutline), {
     ".deletableInput__input:focus": {
       outline: "none"
     },
@@ -1834,7 +2457,7 @@ const deletableInput = {
   }
 };
 
-const forms$1 = () => {
+const forms$1 = (theme) => {
   return {
     checkbox,
     customCheckbox,
@@ -1845,7 +2468,7 @@ const forms$1 = () => {
     label,
     radio,
     select,
-    selectMultiple,
+    selectMultiple: selectMultiple(theme),
     switch: Switch,
     textarea,
     /* PREPEND HERE */
@@ -1867,40 +2490,30 @@ const overlay = {
     height: "100vh",
     display: "flex",
     justifyContent: "center",
-    padding: "1.5em 1.5em",
     alignItems: "center",
     backgroundColor: `palette.background.overlay`,
     zIndex: "modal",
     "&:not(.screenLock) .modal-enter-done": {
       boxShadow: "modals"
     }
+  },
+  "overlay--stretch": {
+    variant: "layout.common.modals.overlay",
+    alignItems: responsive$1({ 0: "stretch", 2: "center" })
   }
 };
 
 const apiaApi = {
-  margin: "auto",
   display: "flex",
-  flexDirection: "column",
-  wordBreak: "break-word",
-  overflow: "hidden",
   width: "100%",
   ".handler__form": {
     display: "flex",
     flexDirection: "column",
-    overflow: "hidden",
+    width: "100%",
     gap: spacing(6),
-    ".toggleAccordionElement": {
-      position: "sticky",
-      top: 0
-    },
     ".handler__form__elements": {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "stretch",
-      overflowY: "auto",
-      maxHeight: "60vh",
-      gap: spacing(3),
-      pr: spacing(3)
+      flexShrink: 1,
+      overflow: "auto"
     },
     ".handler__form__elements__section__content": {
       display: "flex",
@@ -1919,10 +2532,9 @@ const apiaApi = {
     ".handler__form__buttons": {
       display: "flex",
       flexDirection: "row",
-      justifyContent: "center",
+      justifyContent: "end",
       p: 0,
-      gap: "0px",
-      textAlign: "center"
+      gap: "0px"
     },
     ".radio": {
       display: "flex",
@@ -1966,8 +2578,8 @@ const apiaApi = {
 };
 
 var __defProp$7 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
 var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
 var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
@@ -1983,8 +2595,8 @@ var __spreadValues$7 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-const modals = __spreadProps$3(__spreadValues$7({
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+const modals = __spreadProps$4(__spreadValues$7({
   apiaApi
 }, overlay), {
   main: __spreadValues$7({
@@ -2014,6 +2626,7 @@ const modals = __spreadProps$3(__spreadValues$7({
       ".modal__headerBar": {
         display: "flex",
         flexDirection: "row",
+        alignItems: "center",
         gap: spacing(3)
       }
     },
@@ -2063,7 +2676,8 @@ const modals = __spreadProps$3(__spreadValues$7({
   },
   "md-fixed": {
     variant: "layout.common.modals.main",
-    width: "min(500px, calc(100vw - 10px))"
+    width: "min(500px, calc(100vw - 10px))",
+    maxHeight: responsive$1({ 0: "95vh", 2: "80vh" })
   },
   lg: {
     variant: "layout.common.modals.main",
@@ -2071,7 +2685,7 @@ const modals = __spreadProps$3(__spreadValues$7({
   },
   "lg-fixed": {
     variant: "layout.common.modals.main",
-    maxWidth: "640px",
+    width: "640px",
     height: "60vh"
   },
   xl: {
@@ -2088,6 +2702,11 @@ const modals = __spreadProps$3(__spreadValues$7({
     width: responsive$1({ 0: "95vw", 2: "80vw" }),
     maxHeight: responsive$1({ 0: "95vh", 2: "80vh" })
   },
+  "xxl-fixed": {
+    variant: "layout.common.modals.main",
+    width: responsive$1({ 0: "95vw", 2: "80vw" }),
+    height: responsive$1({ 0: "95vh", 2: "80vh" })
+  },
   xxxl: {
     variant: "layout.common.modals.main",
     width: responsive$1({ 0: "95vw", 2: "95vw" }),
@@ -2109,13 +2728,7 @@ const modals = __spreadProps$3(__spreadValues$7({
   },
   cal: {
     variant: "layout.common.modals.sm",
-    width: "350px",
-    ".react-calendar": {
-      backgroundColor: "palette.background.paper",
-      button: __spreadProps$3(__spreadValues$7({}, getColorsAndStatesByPath("form.fields")), {
-        "&.react-calendar__tile--active": __spreadValues$7({}, getColorsAndStatesByPath("buttons.primary"))
-      })
-    }
+    width: "350px"
   },
   editGrid: {
     variant: "layout.common.modals.main",
@@ -2126,8 +2739,8 @@ const modals = __spreadProps$3(__spreadValues$7({
 });
 
 var __defProp$6 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
 var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
 var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
@@ -2143,25 +2756,25 @@ var __spreadValues$6 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
 function getSelectionStyles() {
   return {
     'td[data-focused="false"], th[data-focused="false"]': {
       "*:focus-visible, &:focus, &:focus-visible": {
         outline: "none"
       },
-      "*:focus": __spreadValues$6({}, focusOutline$1)
+      "*:focus": __spreadValues$6({}, focusOutline)
     },
     '[data-focused="true"]:not(.row__separator__cell)': {
       '&:not([data-editionmode="true"])': {
-        "&:focus, & > *:focus, *:focus-visible": __spreadProps$2(__spreadValues$6({}, focusOutline$1), {
+        "&:focus, & > *:focus, *:focus-visible": __spreadProps$3(__spreadValues$6({}, focusOutline), {
           "&.cell__download__document": {
             outlineOffset: 0
           }
         })
       },
       '&[data-editionmode="true"]': {
-        "&:focus, *:focus, *:focus-visible": __spreadProps$2(__spreadValues$6({}, focusOutline$1), {
+        "&:focus, *:focus, *:focus-visible": __spreadProps$3(__spreadValues$6({}, focusOutline), {
           outlineStyle: "dotted",
           outlineWidth: "6px",
           outlineOffset: "-4px"
@@ -2176,8 +2789,8 @@ function getSelectionStyles() {
 }
 
 var __defProp$5 = Object.defineProperty;
-var __defProps$1 = Object.defineProperties;
-var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
 var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
 var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
@@ -2193,253 +2806,255 @@ var __spreadValues$5 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
-const primary$1 = __spreadProps$1(__spreadValues$5({
-  variant: "colors.tables.primary",
-  backgroundColor: "palette.background.paper",
-  borderCollapse: "separate",
-  borderSpacing: 0,
-  tableLayout: "fixed",
-  thead: __spreadProps$1(__spreadValues$5({}, getColorsByPath("tables.primary.thead")), {
-    zIndex: 1,
-    position: "sticky",
-    insetBlockStart: 0,
-    backgroundColor: "palette.background.paper",
-    "tr:not(.filtersRow):not(.responsiveTable__filters__row)": {
-      "th, td": {
-        variant: "buttons.primary",
-        py: responsive$1({ 0: 3, 4: 4 }),
-        px: responsive$1({ 0: 3, 4: 4 }),
-        width: "breakWidth",
-        backgroundColor: "palette.primary.main",
-        borderColor: "palette.primary.dark",
-        borderRadius: 0,
-        borderStyle: "solid",
-        borderWidth: "1px",
-        display: "table-cell",
-        verticalAlign: "center",
-        wordBreak: "break-word",
-        "&:last-of-type:not(td)": {
-          maxWidth: "100%",
-          width: "100%"
-        },
-        ".headButton__label": {
-          textAlign: "left"
-        },
-        ".headButton__resizer": {
-          width: "20px",
-          cursor: "ew-resize",
-          zIndex: 1e3,
-          position: "absolute",
-          right: "-10px",
-          height: "100%"
-        },
-        "&:last-of-type .headButton__resizer": {
-          right: "0px"
-        },
-        "&.additionalColumn": {
-          minWidth: "50px",
-          maxWidth: "50px",
-          width: "50px",
-          p: 0,
-          textAlign: "center",
-          verticalAlign: "center"
-        },
-        ".headButton__container": {
-          width: "100%",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          gap: 3,
-          svg: {
-            flexShrink: 0
-          }
-        },
-        "&>div": {
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+const primary$1 = (theme) => {
+  return __spreadProps$2(__spreadValues$5({
+    variant: "colors.tables.primary",
+    width: "100%",
+    backgroundColor: "components.primaryTable.body.backgroundColor",
+    border: "1px solid",
+    borderColor: "components.primaryTable.borderColor",
+    borderCollapse: "separate",
+    borderSpacing: 0,
+    tableLayout: "fixed",
+    thead: {
+      zIndex: 1,
+      position: "sticky",
+      insetBlockStart: 0,
+      backgroundColor: "palette.background.paper",
+      "tr:not(.filtersRow):not(.responsiveTable__filters__row)": {
+        "th, td": __spreadProps$2(__spreadValues$5({
+          variant: "buttons.primary",
+          py: responsive$1({ 0: 3, 4: 4 }),
+          px: responsive$1({ 0: 3, 4: 4 }),
+          width: "breakWidth",
+          backgroundColor: "palette.primary.main",
+          borderColor: "palette.primary.dark",
+          borderRadius: 0,
+          borderStyle: "solid",
+          borderWidth: "1px",
           color: "palette.primary.contrastText",
-          svg: {
-            color: "palette.text.primary"
+          display: "table-cell",
+          verticalAlign: "center",
+          wordBreak: "break-word",
+          '&[role="presentation"]': {
+            display: "none"
           }
-        },
-        "&:not(:last-of-type)": {
-          "&>div": {
-            borderRightWidth: "1px"
+        }, theme.palette.getStatesFromPath("components.primaryTable.header")), {
+          "& *": {
+            color: "inherit"
+          },
+          ".headButton__label": {
+            textAlign: "left",
+            d: ""
+          },
+          ".headButton__resizer": {
+            width: "20px",
+            cursor: "ew-resize",
+            zIndex: 1e3,
+            position: "absolute",
+            right: "-10px",
+            height: "100%"
+          },
+          "&:last-of-type .headButton__resizer": {
+            right: "0px"
+          },
+          "&:last-of-type:not(td)": {
+            maxWidth: "100%",
+            width: "100%"
+          },
+          "&.additionalColumn": {
+            minWidth: "50px",
+            maxWidth: "50px",
+            width: "50px",
+            p: 0,
+            textAlign: "center",
+            verticalAlign: "center"
+          },
+          ".headButton__container": {
+            width: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 3,
+            svg: {
+              flexShrink: 0
+            }
+          },
+          // '&>div': {
+          //   color: 'components.primaryTable.header.color',
+          //   svg: {
+          //     color: 'components.primaryTable.body.color',
+          //   },
+          // },
+          "&:not(:last-of-type)": {
+            "&>div": {
+              borderRightWidth: "1px"
+            }
           }
+        }),
+        "th.requiredFilterColumn": {
+          borderLeft: "4px solid !important",
+          borderLeftColor: "palette.error.main !important"
         }
       },
-      "th.requiredFilterColumn": {
-        borderLeft: "4px solid !important",
-        borderLeftColor: "#dc3545 !important"
-        // TODO USAR PALETTE
-      }
-    },
-    "tr.filtersRow, tr.responsiveTable__filters__row": {
-      backgroundColor: "palette.background.paper",
-      borderBottomWidth: "1px",
-      borderBottomStyle: "solid",
-      borderBottomColor: "palette.border.row",
-      "th.noFilter": {
-        background: "transparent"
-      },
-      td: {
-        "input:not([disabled]), select:not([disabled])": {
-          border: "1px solid white"
+      "tr.filtersRow, tr.responsiveTable__filters__row": {
+        backgroundColor: "components.primaryTable.body.backgroundColor",
+        "th.noFilter": {
+          background: "transparent"
         },
-        background: "transparent",
-        border: "1px solid",
-        borderColor: "palette.gray.800",
-        p: 0
-      },
-      transition: "height 0.3s",
-      "&.hidden": {
-        height: "0",
-        overflow: "hidden",
-        p: spacing(0),
-        border: "none",
-        "& *": {
+        "td.requiredFilter__Border": {
+          borderLeftStyle: "solid !important",
+          borderLeftWidth: "4px !important",
+          borderLeftColor: "palette.error.main"
+        },
+        td: {
+          "input:not([disabled]), select:not([disabled])": {
+            border: "1px solid white"
+          },
+          background: "transparent",
+          border: "1px solid",
+          borderColor: "components.primaryTable.body.borderColor",
+          p: 0
+        },
+        transition: "height 0.3s",
+        "&.hidden": {
           height: "0",
           overflow: "hidden",
-          fontSize: 0,
-          lineHeight: 0,
           p: spacing(0),
-          border: "none"
+          border: "none",
+          "& *": {
+            height: "0",
+            overflow: "hidden",
+            fontSize: 0,
+            lineHeight: 0,
+            p: spacing(0),
+            border: "none"
+          }
         }
       }
-    }
-  }),
-  tbody: {
-    tr: __spreadProps$1(__spreadValues$5({
-      borderBottomWidth: "1px",
-      borderBottomStyle: "solid",
-      "&.non-selectable": {
-        cursor: "not-allowed"
-      },
-      "&.hidden": {
-        display: "none"
-      },
-      "&.locked": {
-        background: "palette.gray.900"
-      }
-    }, getSelectedColors()), {
-      "&.draggingRow": {
-        outline: "3px dotted",
-        outlineColor: "palette.primary.main",
-        outlineOffset: "-3px",
-        "*": {
-          outline: "none !important"
+    },
+    tbody: {
+      tr: __spreadProps$2(__spreadValues$5(__spreadProps$2(__spreadValues$5({
+        borderBottomWidth: "1px",
+        borderBottomStyle: "solid"
+      }, theme.palette.getStatesFromPath("components.primaryTable.body", {
+        states: {
+          disabled: false,
+          readonly: false,
+          active: false,
+          hover: false,
+          checked: false,
+          focus: false,
+          selected: false
         }
-      },
-      borderColor: "palette.gray.800",
-      ".rowStatesList": {
-        display: "flex",
-        gap: spacing(3),
-        alignItems: "center",
-        svg: {
-          width: "smallIcon",
-          height: "smallIcon",
-          cursor: "pointer"
+      })), {
+        "&:nth-of-type(2n)": {
+          backgroundColor: "components.primaryTable.body.evenRowsBackgroundColor"
+        },
+        "&.non-selectable": {
+          cursor: "not-allowed"
+        },
+        "&.hidden": {
+          display: "none"
+        },
+        "&.locked": {
+          background: "palette.gray.900",
+          td: {
+            borderColor: "palette.gray.850"
+          }
         }
-      },
-      td: {
-        verticalAlign: "top",
-        wordBreak: "break-word",
-        border: "1px solid",
-        borderColor: "palette.gray.900",
-        "&.stickyColumn": {
-          position: "sticky",
-          left: 0,
-          backgroundColor: "palette.background.paper"
+      }), getSelectedColors(theme)), {
+        "&.draggingRow": {
+          outline: "3px dotted",
+          outlineColor: "components.primaryTable.header.borderColor",
+          outlineOffset: "-3px",
+          "*": {
+            outline: "none !important"
+          }
         },
-        ".moreInformationButton": {
-          width: "30px",
-          height: "30px",
-          padding: "3px",
-          border: "none",
-          background: "transparent"
+        borderColor: "components.primaryTable.body.borderColor",
+        ".rowStatesList": {
+          display: "flex",
+          gap: spacing(3),
+          alignItems: "center",
+          svg: {
+            width: "smallIcon",
+            height: "smallIcon",
+            cursor: "pointer"
+          }
+        },
+        td: {
+          verticalAlign: "top",
+          wordBreak: "break-word",
+          border: "1px solid",
+          borderColor: "components.primaryTable.body.borderColor",
+          "&.stickyColumn": {
+            position: "sticky",
+            left: 0,
+            backgroundColor: "components.primaryTable.body.backgroundColor"
+          },
+          ".moreInformationButton": {
+            width: "30px",
+            height: "30px",
+            padding: "3px",
+            border: "none",
+            background: "transparent"
+          }
         }
-      }
-    }),
-    td: {
-      p: spacing(3)
-    },
-    ".responsiveTable__additionalInfoContainer": {
-      display: "grid",
-      gridTemplateColumns: responsive$1({
-        0: "repeat(2, 1fr)",
-        5: "repeat(4, 1fr)"
       }),
-      columnGap: 3,
-      rowGap: 2
+      td: {
+        p: spacing(3)
+      },
+      ".responsiveTable__additionalInfoContainer": {
+        display: "grid",
+        gridTemplateColumns: responsive$1({
+          0: "repeat(2, 1fr)",
+          5: "repeat(4, 1fr)"
+        }),
+        columnGap: 3,
+        rowGap: 2
+      },
+      ".responsiveTable__additionalInfoContainer .responsiveTable__additionalInfoItem.separator": {
+        gridColumnStart: "1",
+        gridColumnEnd: "5",
+        borderBottom: "1px solid",
+        borderBottomColor: "palette.gray.700",
+        height: "auto"
+      }
     },
-    ".responsiveTable__additionalInfoContainer .responsiveTable__additionalInfoItem.separator": {
-      gridColumnStart: "1",
-      gridColumnEnd: "5",
-      borderBottom: "1px solid",
-      borderBottomColor: "palette.gray.700",
-      height: "auto"
+    ".editionMode": {
+      border: "3px solid",
+      borderColor: "components.primaryTable.header.borderColor",
+      borderWidth: "1.5px",
+      borderStyle: "dotted"
+    },
+    ".stateCell": {
+      width: "50px",
+      maxWidth: "50px",
+      minWidth: "50px",
+      textAlign: "center",
+      verticalAlign: "middle"
     }
-  },
-  ".row__separator__cell": {
-    backgroundColor: "palette.secondary.light"
-  },
-  ".pro_inst_warn_date": {
-    backgroundColor: "palette.warning.light"
-  },
-  ".pro_inst_overdue_date": {
-    backgroundColor: "palette.error.light"
-  },
-  ".pro_ele_inst_warn_date": {
-    backgroundColor: "palette.warning.light"
-  },
-  ".pro_ele_inst_overdue_date": {
-    backgroundColor: "palette.error.light"
-  },
-  ".pro_inst_warn_date__row": {},
-  ".pro_inst_overdue_date__row": {},
-  ".pro_ele_inst_warn_date__row": {},
-  ".pro_ele_inst_overdue_date__row": {},
-  ".priority": {
-    textAlign: "center"
-  },
-  ".editionMode": {
-    border: "3px solid",
-    borderColor: "palette.primary.main",
-    borderWidth: "1.5px",
-    borderStyle: "dotted"
-  },
-  ".stateCell": {
-    width: "50px",
-    maxWidth: "50px",
-    minWidth: "50px",
-    textAlign: "center",
-    verticalAlign: "middle"
-  }
-}, getSelectionStyles()), {
-  ".no__registers": {
-    py: 6
-  },
-  ".requiredFilter__Marker": {
-    color: "red",
-    paddingX: "5px"
-  },
-  ".requiredFilter__Column": {
-    fontWeight: "bold"
-  },
-  "&.dataGrid__printTable": {
-    m: 2,
-    border: "1px solid",
-    borderColor: "palette.border.article"
-  },
-  ".bold": {
-    fontWeight: "bold"
-  },
-  ".light": {
-    color: "#6a6a6a"
-  },
-  ".additionalInfo__cell, .stateCell": {
-    verticalAlign: "middle"
-  }
-});
+  }, getSelectionStyles()), {
+    ".no__registers": {
+      py: 6,
+      minWidth: "200px"
+    },
+    ".requiredFilter__Column": {
+      fontWeight: "bold"
+    },
+    ".bold": {
+      fontWeight: "bold"
+    },
+    ".light": {
+      color: "#6a6a6a"
+    },
+    ".additionalInfo__cell, .stateCell": {
+      verticalAlign: "middle"
+    }
+  });
+};
 
 const information = {
   width: "100%",
@@ -2481,7 +3096,7 @@ const information = {
   }
 };
 
-const accordion = {
+const accordion$1 = {
   display: "flex",
   flexDirection: "column",
   gap: spacing(2),
@@ -2534,38 +3149,6 @@ const accordion = {
     "&.rah-static--height-auto, &.rah-animating--down": {
       "& > div": { py: 5 }
     },
-    ".pro_inst_warn_date": {
-      color: "priorityNormal"
-      // backgroundColor: 'priorityNormal',
-    },
-    ".pro_inst_overdue_date": {
-      color: "priorityUrgent"
-      // backgroundColor: 'priorityUrgent',
-    },
-    ".pro_ele_inst_warn_date": {
-      color: "priorityNormal"
-      // backgroundColor: 'priorityNormal',
-    },
-    ".pro_ele_inst_overdue_date": {
-      color: "priorityUrgent"
-      // backgroundColor: 'priorityUrgent',
-    },
-    ".pro_inst_warn_date__row": {
-      // color: 'priorityNormal',
-      // backgroundColor: 'priorityNormal',
-    },
-    ".pro_inst_overdue_date__row": {
-      // color: 'priorityUrgent',
-      backgroundColor: "priorityUrgent"
-    },
-    ".pro_ele_inst_warn_date__row": {
-      // color: 'priorityNormal',
-      // backgroundColor: 'priorityNormal',
-    },
-    ".pro_ele_inst_overdue_date__row": {
-      // color: 'priorityUrgent',
-      // backgroundColor: 'priorityUrgent',
-    },
     ".priority_container": { display: "flex", alignItems: "center" },
     ".priority": { display: "flex" }
   }
@@ -2580,50 +3163,107 @@ const print = {
   }
 };
 
-const responsive = {
-  maxHeight: "100%",
-  overflow: "auto",
-  position: "relative",
-  table: {
-    width: "100%"
-  },
-  "&.isLoading": {
-    overflow: "hidden"
-  },
-  ".responsiveTable__isLoading": {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    background: tinycolor(window.currentPalette.background.paper).setAlpha(0.7).toRgbString(),
-    zIndex: 1,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  ".cell__download__document": {
-    display: "flex",
-    gap: 3,
-    alignItems: "center",
-    justifyContent: "start",
-    "&, *": {
-      color: "palette.primary.main"
+const responsive = (theme) => {
+  return {
+    maxHeight: "100%",
+    overflow: "auto",
+    position: "relative",
+    "&.isLoading": {
+      overflow: "hidden"
     },
-    svg: {
-      flexShrink: 0
+    ".responsiveTable__isLoading": {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      background: tinycolor(theme.palette.background.paper).setAlpha(0.7).toRgbString(),
+      zIndex: 1,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    ".cell__download__document": {
+      display: "flex",
+      gap: 3,
+      alignItems: "center",
+      justifyContent: "start",
+      "&, *": {
+        color: "palette.primary.main"
+      },
+      svg: {
+        flexShrink: 0
+      }
+    }
+    /* PREPEND HERE */
+  };
+};
+
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
     }
+  return a;
+};
+const secondary = {
+  variant: "layout.common.tables.primary",
+  borderColor: "components.secondaryTable.borderColor",
+  "& thead": {
+    "tr:not(.filtersRow):not(.responsiveTable__filters__row)": {
+      "& th, & td": () => __spreadValues$4({}, getColorsAndStatesByPath("components.secondaryTable.header"))
+    }
+  },
+  "& tbody": {
+    tr: __spreadValues$4({
+      "&:nth-of-type(2n)": {
+        backgroundColor: "components.secondaryTable.body.evenRowsBackgroundColor"
+      },
+      td: {
+        borderColor: "components.secondaryTable.body.borderColor"
+      },
+      '&[aria-selected="true"]': {
+        backgroundColor: "components.secondaryTable.body.selectedRows.backgroundColor",
+        "& td": {
+          borderColor: "components.secondaryTable.body.selectedRows.borderColor"
+        },
+        color: "components.secondaryTable.body.selectedRows.color"
+      },
+      borderBottomWidth: "1px",
+      borderBottomStyle: "solid"
+    }, getColorsAndStatesByPath("components.secondaryTable.body", {
+      states: {
+        disabled: false,
+        readonly: false,
+        active: false,
+        hover: false,
+        checked: false,
+        focus: false,
+        selected: false
+      }
+    }))
   }
-  /* PREPEND HERE */
 };
 
-const tables = {
-  accordion,
-  information,
-  primary: primary$1,
-  print,
-  responsive
-  /* PREPEND HERE */
+const tables = (theme) => {
+  return {
+    accordion: accordion$1,
+    information,
+    primary: primary$1(theme),
+    print,
+    responsive: responsive(theme),
+    secondary
+    /* PREPEND HERE */
+  };
 };
 
 const captcha = {
@@ -2669,461 +3309,404 @@ const forms = {
   /* PREPEND HERE */
 };
 
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$4 = (a, b) => {
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$4.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
-  if (__getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(b)) {
-      if (__propIsEnum$4.call(b, prop))
-        __defNormalProp$4(a, prop, b[prop]);
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
     }
   return a;
 };
-const primary = {
-  /* PREPEND HERE */
-  position: "relative",
-  '[role="tree"]:focus': {
-    outline: "none",
-    ".focus": focusOutline
-  },
-  ul: {
-    listStyle: "none",
-    p: 0
-  },
-  ".tree__searchLabelBox": {
-    alignItems: "center",
-    borderRadius: "2px",
-    display: "flex",
-    float: "right",
-    gap: spacing(3),
-    justifyContent: "center",
-    position: "sticky",
-    right: "4px",
-    top: "4px",
-    transform: "translateX(0)",
-    width: "100%",
-    zIndex: "stickyElements",
-    ".tree__loading": {
-      position: "fixed",
-      top: 0,
-      right: "4px",
-      height: "iconmd",
-      width: "iconmd",
-      background: "palette.background.paper"
+const primary = (theme) => {
+  return {
+    /* PREPEND HERE */
+    position: "relative",
+    '[role="tree"]:focus': {
+      outline: "none",
+      ".focus": focusOutline
     },
-    button: {
-      cursor: "pointer"
-    }
-  },
-  ".tree__searchLabel": __spreadValues$4({
-    alignItems: "center",
-    display: "flex",
-    gap: spacing(3),
-    justifyContent: "center",
-    position: "fixed",
-    p: "2px 5px",
-    right: 0,
-    top: 0
-  }, getColorState(
-    { backgroundColor: "palette.background.paper" },
-    "selected"
-  )),
-  '[role="treeitem"]': {
-    '&[aria-expanded="false"] ul': {
-      display: "none"
+    ul: {
+      listStyle: "none",
+      p: 0
+    },
+    ".tree__searchLabelBox": {
+      alignItems: "center",
+      borderRadius: "2px",
+      display: "flex",
+      float: "right",
+      gap: spacing(3),
+      justifyContent: "center",
+      position: "sticky",
+      right: "4px",
+      top: "4px",
+      transform: "translateX(0)",
+      width: "100%",
+      zIndex: "stickyElements",
+      ".tree__loading": {
+        position: "fixed",
+        top: 0,
+        right: "4px",
+        height: "iconMd",
+        width: "iconMd",
+        background: "palette.background.paper"
+      },
+      button: {
+        cursor: "pointer",
+        "&:hover": {
+          textDecoration: "underline"
+        }
+      }
     },
-    '&[aria-selected="true"] > .tree__nodeItemLabel': getColorState(
+    ".tree__searchLabel": __spreadValues$3({
+      alignItems: "center",
+      display: "flex",
+      gap: spacing(3),
+      justifyContent: "center",
+      position: "fixed",
+      p: "2px 5px",
+      right: 0,
+      top: 0
+    }, theme.palette.getOneState(
       { backgroundColor: "palette.background.paper" },
       "selected"
-    ),
-    background: "transparent"
-  },
-  ".tree__nodeItemLabel": {
-    display: "flex",
-    flexWrap: "nowrap",
-    gap: 3,
-    alignItems: "center",
-    "& > *:not(.tree__nodeItemLabelRenderer)": {
-      flexShrink: 0,
-      textAlign: "left"
+    )),
+    '[role="treeitem"]': {
+      '&[aria-expanded="false"] ul': {
+        display: "none"
+      },
+      '&[aria-selected="true"] > .tree__nodeItemLabel': theme.palette.getOneState(
+        { backgroundColor: "palette.background.paper" },
+        "selected"
+      ),
+      background: "transparent"
     },
-    "&:hover": getColorState(
-      { backgroundColor: "palette.background.paper" },
-      "hover"
-    )
-  },
-  ".spacer": {
-    borderLeft: "1px solid",
-    borderLeftColor: "palette.border.section",
-    width: "20px",
-    alignSelf: "stretch"
-  }
+    ".tree__nodeItemLabel": {
+      display: "flex",
+      flexWrap: "nowrap",
+      gap: 3,
+      alignItems: "center",
+      wordBreak: "break-all",
+      button: {
+        cursor: "pointer",
+        "&:hover": {
+          textDecoration: "underline"
+        },
+        span: {
+          textOverflow: "ellipsis",
+          overflow: "hidden",
+          whiteSpace: "nowrap"
+        }
+      },
+      ".tree__nodeItemLabelRenderer": {
+        display: "flex",
+        overflow: " hidden",
+        width: "100%"
+      },
+      ".button__content": {
+        textAlign: "left"
+      },
+      "& > *:not(.tree__nodeItemLabelRenderer)": {
+        flexShrink: 0,
+        textAlign: "left"
+      },
+      "&:hover": theme.palette.getOneState(
+        { backgroundColor: "palette.background.paper" },
+        "hover"
+      )
+    },
+    ".spacer": {
+      borderLeft: "1px solid",
+      borderLeftColor: "palette.border.section",
+      width: "20px",
+      alignSelf: "stretch"
+    }
+  };
 };
 
 const trees = {
   primary
 };
 
-const common = {
-  forms,
-  modals,
-  tables,
-  trees
-  /* PREPEND HERE */
-};
-
-const layout = {
-  common
-  /* PREPEND HERE */
-};
-
-const transitions = {
-  "@keyframes growHorizontal": {
-    from: { transform: "scaleX(0)" },
-    to: { transform: "scaleY(100%)" }
-  },
-  ".mainMenu__animate": {
-    transition: "transform 150ms, opacity 150ms",
-    transform: "translateX(-1000px)",
-    opacity: 0
-  },
-  ".mainMenu-enter,\n.mainMenu-appear": {
-    transform: "translateX(-1000px)",
-    opacity: 0
-  },
-  ".mainMenu-enter-active,\n.mainMenu-appear-active": {
-    transform: "translateX(0)",
-    opacity: 1
-  },
-  ".mainMenu-enter-done,\n.mainMenu-appear-done": {
-    transform: "translateX(0)",
-    opacity: 1
-  },
-  ".mainMenu-exit": { opacity: 0 },
-  ".mainMenu-exit-done": { transform: "translateX(-1000px)", opacity: 0 },
-  ".mainMenu-exit-active": { transform: "translateX(-1000px)", opacity: 1 },
-  ".hamburguerMenu": { display: "none" },
-  ".hamburguerMenu-enter,\n.hamburguerMenu-appear": {
-    display: "block",
-    transform: "scale(0.7)",
-    opacity: 0
-  },
-  ".hamburguerMenu-enter-active,\n.hamburguerMenu-appear-active": {
-    transform: "translateX(0)",
-    transition: "opacity 150ms, transform 150ms",
-    transformOrigin: "right top",
-    opacity: 1
-  },
-  ".hamburguerMenu-enter-done,\n.hamburguerMenu-appear-done": {
-    display: "block"
-  },
-  ".hamburguerMenu-exit": {
-    display: "block",
-    transform: "scale(1)",
-    opacity: 1
-  },
-  ".hamburguerMenu-exit-active": {
-    transform: "scale(0.7) translateX(0)",
-    transition: "opacity 150ms, transform 150ms",
-    display: "block",
-    opacity: 0,
-    transformOrigin: "right top"
-  },
-  ".hamburguerMenu-exit-done": { display: "none" },
-  ".modal-enter,\n.modal-appear": { opacity: 0, transform: "scale(0.8)" },
-  ".modal-enter-active,\n.modal-appear-active": {
-    opacity: 1,
-    transform: "translateX(0)",
-    transition: "opacity 150ms, transform 150ms",
-    transitionDelay: "0"
-  },
-  ".modal-exit": { opacity: 0 },
-  ".modal-exit-done": { opacity: 0, display: "none" },
-  ".modal-exit-active": {
-    opacity: 0,
-    transform: "scale(100)",
-    transition: "opacity 150ms, transform 150ms",
-    transitionDelay: "0"
-  },
-  ".overlayAnimation-enter .overlayAnimation:not(.not-released),\n.overlayAnimation-appear .overlayAnimation:not(.not-released)": {
-    opacity: 0
-  },
-  ".overlayAnimation-enter-active .overlayAnimation:not(.not-released),\n.overlayAnimation-appear-active .overlayAnimation:not(.not-released)": {
-    opacity: 1,
-    transition: "opacity 150ms"
-  },
-  ".overlayAnimation-exit": { opacity: 1 },
-  ".overlayAnimation-exit-active": { opacity: 0, transition: "opacity 150ms" },
-  ".fromRight-enter,\n.fromRight-appear": { transform: "translateX(550px)" },
-  ".fromRight-enter-active,\n.fromRight-appear-active": {
-    transition: "transform 150ms",
-    transform: "translateX(0)"
-  },
-  ".fromRight-exit": { transform: "translateX(0)" },
-  ".fromRight-exit-active": {
-    transition: "transform 150ms",
-    transform: "translateX(550px)"
-  },
-  ".notification-enter,\n.notification-appear": {
-    opacity: 0,
-    transform: "scale(0.8)"
-  },
-  ".notification-enter-active,\n.notification-appear-active": {
-    opacity: 1,
-    transform: "translateX(0)",
-    transition: "opacity 150ms, transform 150ms",
-    transitionDelay: "0"
-  },
-  ".notification-exit": { opacity: 1 },
-  ".notification-exit-active": {
-    opacity: 0,
-    transform: "scale(0.8)",
-    transition: "opacity 150ms, transform 150ms",
-    transitionDelay: "0"
-  },
-  ".schedulerStage-enter,\n.schedulerStage-appear": {
-    opacity: 0,
-    transform: "scale(0.8)"
-  },
-  ".schedulerStage-enter-active,\n.schedulerStage-appear-active": {
-    opacity: 1,
-    transform: "translateX(0)",
-    transition: "opacity 150ms, transform 150ms",
-    transitionDelay: "0"
-  },
-  ".schedulerStage-exit": { opacity: 1 },
-  ".schedulerStage-exit-active": {
-    opacity: 0,
-    transform: "scale(0.8)",
-    transition: "opacity 150ms, transform 150ms",
-    transitionDelay: "0"
-  }
-};
-
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$3 = (a, b) => {
+var __defProp$2 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$3.call(b, prop))
-      __defNormalProp$3(a, prop, b[prop]);
-  if (__getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(b)) {
-      if (__propIsEnum$3.call(b, prop))
-        __defNormalProp$3(a, prop, b[prop]);
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
     }
   return a;
 };
-const root = __spreadValues$3({
-  "*": {
-    fontFamily: "body",
-    fontWeight: "body",
-    fontSize: "100%",
-    code: {
-      fontFamily: "monospace"
-    },
-    "&:focus": focusOutline
-  },
-  body: {
-    minHeight: "100vh"
-  },
-  h1: {
-    fontSize: responsive$1({ 0: 26, 3: 32 })
-  },
-  h2: {
-    fontSize: responsive$1({ 0: 22, 3: 28 })
-  },
-  h3: {
-    fontSize: responsive$1({ 0: 19, 3: 25 })
-  },
-  h4: {
-    fontSize: responsive$1({ 0: 18, 3: 22 })
-  },
-  h5: {
-    fontSize: responsive$1({ 0: 18, 3: 22 })
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+const pagination = __spreadProps$1(__spreadValues$2({}, getColorsByPath("components.pagination")), {
+  gap: spacing(1),
+  justifyContent: "stretch",
+  "&.onlyRefresh": {
+    justifyContent: "end"
   },
-  h6: {
-    fontSize: responsive$1({ 0: 17, 3: 17 })
+  alignItems: "center",
+  padding: 1,
+  display: "flex",
+  ".pagination__leftToolbar": {
+    alignItems: "center",
+    display: "flex",
+    width: "100%"
   },
-  "h1,h2,h3,h4,h5,h6": {
-    letterSpacing: "heading",
-    lineHeight: "heading",
-    variant: "text.title"
+  ".pagination__deleteLabels": {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
   },
-  "*:not(h1, h2, h3, h4, h5, h6, code)": {
-    fontFamily: "body",
-    fontSize: 16,
-    fontWeight: "body",
-    letterSpacing: "body",
-    lineHeight: "body"
+  ".pagination__selectPage": {
+    width: "80px",
+    top: "80px",
+    textAlign: "center"
   },
-  ".section": {
-    border: "2px solid green",
-    "&.apia_section_row": {
-      display: "flex",
-      flexDirection: "row"
-    },
-    ".panel": {
-      width: "fit-content",
-      height: "100%"
+  ".iconButton": __spreadProps$1(__spreadValues$2({
+    height: "36px",
+    width: "36px"
+  }, getColorsAndStatesByPath("components.pagination.icons", {
+    states: { disabled: false, path: true }
+  })), {
+    "&:disabled": {
+      background: "transparent"
     }
+  }),
+  ".recordsCounter": {
+    color: "palette.primary.contrastText",
+    pl: spacing(3)
   },
-  ".top": {
-    display: "flex"
+  ".reachedMax": {
+    color: "red",
+    pl: 2
   },
-  ".bottom": {
-    display: "block",
-    width: "100%"
+  ".pagination__controls": {
+    flexGrow: 1,
+    justifyContent: "center",
+    flexShrink: 0,
+    "&.onlyRefresh": {
+      justifyContent: "end"
+    },
+    alignItems: "stretch",
+    padding: 1,
+    display: "flex",
+    width: responsive$1({ 0: "max-content", 2: "auto" }),
+    "select ~ svg": {
+      display: "none"
+    },
+    ".input": __spreadProps$1(__spreadValues$2({
+      display: "flex",
+      alignItems: "center",
+      gap: spacing(3),
+      fontSize: "1em",
+      border: "1px solid",
+      paddingY: 1,
+      paddingX: 4
+    }, getColorsByPath("components.pagination.pagesBox")), {
+      input: {
+        font: "inherit",
+        background: "none",
+        border: "none",
+        width: "30px",
+        padding: 0,
+        textAlign: "center"
+      },
+      span: {
+        font: "inherit",
+        display: "block",
+        width: "30px"
+      }
+    })
   },
-  ".planelContainer": {
-    overflowAnchor: "none"
+  ".infoTooltip": {
+    position: "relative",
+    display: "inline-block",
+    borderBottom: "1px dotted black",
+    cursor: "pointer",
+    backgroundColor: "#f7d97f"
   },
-  ".minimap": {
-    background: "#00000015",
-    border: "1px solid #00000025",
-    position: "fixed",
-    bottom: "10px",
-    right: "10px",
-    "& > *": {
-      background: "#00000015",
-      position: "absolute"
-    },
-    ".dragging": {
-      background: "#55000015"
-    },
-    ".windowFrame": {
-      background: "#00005515",
-      border: "1px solid #00005525",
-      position: "absolute",
-      zIndex: 1
+  ".pagination__information": {
+    p: 1,
+    ".pagination__infoIcon": {
+      display: "flex"
     }
   },
-  "abbr.required": {
-    color: "danger",
-    textDecoration: "none"
-  },
-  '[aria-selected="true"], .selected': __spreadValues$3({}, getPalette().getOneState(
-    { backgroundColor: getPalette().primary.main },
-    "selected"
-  ))
-}, transitions);
+  ".pagination__alertInfo": __spreadValues$2({
+    variant: "buttons.icon-primary"
+  }, getColorsAndStatesByPath("buttons.iconAlert")),
+  ".pagination__rightToolbar": {
+    display: "flex",
+    gap: 0,
+    width: "100%",
+    justifyContent: "end",
+    ".pagination__deleteFiltersButton": {
+      variant: "buttons.primary-sm",
+      textDecoration: "none",
+      px: 3,
+      ".button__content": {
+        display: "flex",
+        flexDirection: "row",
+        gap: 3
+      },
+      ".pagination__appliedFiltersLabel": {
+        backgroundColor: "palette.primary.contrastText",
+        color: "palette.text.title",
+        borderRadius: "100%",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        minWidth: "1.5em",
+        "&.withFilters": {
+          backgroundColor: "favorite",
+          color: "palette.text.primary"
+        }
+      }
+    }
+  }
+});
 
-const text = {
-  default: {
-    color: "palette.text.primary",
-    fontFamily: "body",
-    fontWeight: "body",
-    fontSize: 16,
-    m: spacing(0),
-    width: "100%"
-  },
-  title: {
-    letterSpacing: "heading",
-    wordBreak: "normal",
-    color: "title",
-    fontFamily: "heading",
-    lineHeight: "heading",
-    fontWeight: "heading"
+const accordion = {
+  primary: {
+    "&, .accordion__item": {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "stretch"
+    },
+    ".accordion__item__button__leftGroup, .accordion__item__button__rightGroup": {
+      alignItems: "center",
+      display: "flex",
+      gap: 3,
+      "& > *": {
+        flexShrink: 0,
+        "&.accordion__item__button__label": {
+          flexShrink: 1
+        }
+      }
+    },
+    ".accordion__item__button__label": {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      flexShrink: 1,
+      color: "palette.primary.contrastText",
+      fontSize: 16
+    },
+    ".accordion__item__button__check": {
+      width: "32px",
+      height: "32px",
+      background: "palette.background.paper",
+      border: "1px solid",
+      borderColor: "palette.border.field",
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "stretch",
+      justifyContent: "stretch",
+      p: 2,
+      svg: {
+        color: "palette.text.primary",
+        height: "100%",
+        width: "100%"
+      }
+    },
+    ".accordion__item:last-of-type > *": {
+      borderBottom: "1px solid",
+      borderBottomColor: "palette.border.section"
+    },
+    ".accordion__item__content > *": {
+      p: spacing(3),
+      borderLeft: "1px solid",
+      borderRight: "1px solid",
+      borderLeftColor: "palette.border.section",
+      borderRightColor: "palette.border.section"
+    },
+    ".accordion__item__button": {
+      width: "100%",
+      p: 3,
+      ".button__content": {
+        alignItems: "center",
+        display: "flex",
+        gap: spacing(3),
+        justifyContent: "space-between",
+        width: "100%"
+      }
+    }
   }
 };
 
-const baseTheme = {
-  alerts,
-  breakpoints: ["0px", "250px", "500px", "700px", "1000px", "1260px", "1580px"],
-  buttons,
-  colors: getThemeColorsObject(),
-  fonts: {
-    body: "Arial",
-    heading: "inherit",
-    monospace: "Menlo, monospace"
-  },
-  fontSizes: Array(60).fill(1).map((_, i) => {
-    return i;
-  }),
-  forms: forms$1(),
-  layout,
-  lineHeights: {
-    body: 1.5,
-    heading: 1.125
-  },
-  letterSpacings: {
-    body: "0.01em",
-    heading: "-0.015em"
-  },
-  radii: {
-    alerts: 0,
-    buttons: 0,
-    default: 0
-  },
-  shadows: {
-    modals: "",
-    tabs: ""
-  },
-  space: [0, 2, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96, 112, 128],
-  sizes: {
-    // Layout
-    applicationMenu: "350px",
-    floatingNotifications: "min(550px, calc(100vw - 30px))",
-    root: "992px",
-    mainImage: "64px",
-    twoColumns: "calc(992px + 350px)",
-    twoColumnsCentered: "calc(992px + 350px + 16px)",
-    // Icons
-    iconxs: "12px",
-    iconsm: "16px",
-    iconmd: "22px",
-    iconlg: "32px",
-    iconxl: "48px"
-  },
-  styles: {
-    root
-  },
-  text,
-  zIndices: {
-    stickyElements: 600,
-    menu: 1e3,
-    maximizedTables: 1100,
-    modal: 1200,
-    tooltip: 1400,
-    notifications: 1600,
-    contextMenu: 1800
-  },
-  useRootStyles: true
+const components = {
+  accordion,
+  pagination
+};
+
+const common = (theme) => {
+  return {
+    forms,
+    modals,
+    tables: tables(theme),
+    components,
+    trees
+    /* PREPEND HERE */
+  };
+};
+
+const layout = (theme) => {
+  return {
+    common: common(theme)
+    /* PREPEND HERE */
+  };
 };
 
 const makeTheme = (t) => {
   return t;
 };
 let declaredStyles = {};
-new class MainThemeEmitter extends EventEmitter {
-}();
-function getMainTheme(customTheme) {
-  return makeTheme(
-    merge(baseTheme, { layout: declaredStyles }, customTheme != null ? customTheme : {})
+function getMainTheme(customTheme, customPalette) {
+  const theme = makeTheme(
+    merge(baseTheme(), { layout: declaredStyles }, customTheme != null ? customTheme : {}, {
+      palette: {}
+    })
+  );
+  const palette = parsePalette(
+    merge({}, defaultPalette, customPalette != null ? customPalette : theme.palette),
+    theme
   );
+  theme.palette = palette;
+  theme.colors = getThemeColorsObject(theme);
+  theme.forms = forms$1(theme);
+  theme.layout = merge(layout(theme), theme.layout);
+  theme.styles = merge({}, customTheme == null ? void 0 : customTheme.styles, { root: theme.layout.root });
+  return theme;
 }
 
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2 = (a, b) => {
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$2.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b)) {
-      if (__propIsEnum$2.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
     }
   return a;
 };
@@ -3134,12 +3717,22 @@ function handleNewStyles(ev) {
   injectedStyles[ev.path] = ev.styles;
 }
 mainThemeEmitter.on("newStyles", handleNewStyles);
-function useMainTheme(customTheme) {
-  const [theme, setTheme] = useState(getMainTheme(customTheme));
+function useMainTheme(customTheme, customPalette) {
+  const [theme, setTheme] = useState(
+    getMainTheme(customTheme, customPalette)
+  );
+  const previousTheme = useRef(customTheme);
+  const previousPalette = useRef(customPalette);
+  if (previousTheme.current !== customTheme)
+    setTheme(getMainTheme(customTheme));
+  previousTheme.current = customTheme;
+  if (previousPalette.current !== customPalette)
+    setTheme(getMainTheme(customTheme, customPalette));
+  previousPalette.current = customPalette;
   useMount(() => {
     setTheme((current) => {
       mainThemeEmitter.off("newStyles", handleNewStyles);
-      let initialTheme = __spreadValues$2({}, current);
+      let initialTheme = __spreadValues$1({}, current);
       Object.entries(injectedStyles).forEach(([path, styles]) => {
         const newStyles = setValueByPath({}, path, styles);
         initialTheme = merge(initialTheme, newStyles);
@@ -3148,79 +3741,18 @@ function useMainTheme(customTheme) {
     });
     return mainThemeEmitter.on("newStyles", (ev) => {
       const newStyles = setValueByPath({}, ev.path, ev.styles);
-      setTheme((current) => merge(__spreadValues$2({}, current), newStyles));
+      setTheme((current) => merge(__spreadValues$1({}, current), newStyles));
     });
   });
   return theme;
 }
 
-let timeout = -1;
-function logTheme(theme) {
-  clearTimeout(timeout);
-  timeout = setTimeout(() => {
-    console.info({ theme });
-  }, 100);
-}
-const ThemeProviderContext = createContext({});
-const ThemeProvider = ({ children, customTheme }) => {
-  const theme = useMainTheme(customTheme);
-  logTheme(theme);
-  return /* @__PURE__ */ jsx(ThemeProviderContext.Provider, { value: theme, children: /* @__PURE__ */ jsx(ThemeProvider$1, { theme, children }) });
-};
-
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
-    }
-  return a;
-};
-function getColorsByDefinition(definition, options) {
-  return merge(
-    buildColorsObject(__spreadValues$1(__spreadValues$1(__spreadValues$1({}, definition.color ? { color: definition.color } : null), definition.backgroundColor ? { backgroundColor: definition.backgroundColor } : null), definition.borderColor ? {
-      borderColor: definition.borderColor
-    } : null)),
-    options == null ? void 0 : options.mergeObject
-  );
-}
-
-function getColorsAndStatesByDefinition(definition, options) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-  const active = getColorState(definition, "active");
-  const checked = getColorState(definition, "checked");
-  const disabled = getColorState(definition, "disabled");
-  const focus = ((_a = options == null ? void 0 : options.states) == null ? void 0 : _a.focus) ? getColorState(definition, "focus") : {};
-  const hover = getColorState(definition, "hover");
-  const readonly = getColorState(definition, "readonly");
-  const selected = getColorState(definition, "selected");
-  return merge(
-    ((_b = options == null ? void 0 : options.states) == null ? void 0 : _b.default) !== false ? getColorsByDefinition(definition) : null,
-    ((_c = options == null ? void 0 : options.states) == null ? void 0 : _c.checked) !== false ? buildStateObject(checked, "checked") : {},
-    ((_d = options == null ? void 0 : options.states) == null ? void 0 : _d.focus) !== false ? buildStateObject(focus, "focus") : {},
-    ((_e = options == null ? void 0 : options.states) == null ? void 0 : _e.hover) !== false ? buildStateObject(hover, "hover") : {},
-    ((_f = options == null ? void 0 : options.states) == null ? void 0 : _f.active) !== false ? buildStateObject(active, "active") : {},
-    ((_g = options == null ? void 0 : options.states) == null ? void 0 : _g.selected) !== false ? buildStateObject(selected, "selected") : {},
-    ((_h = options == null ? void 0 : options.states) == null ? void 0 : _h.disabled) !== false ? buildStateObject(disabled, "disabled") : {},
-    ((_i = options == null ? void 0 : options.states) == null ? void 0 : _i.readonly) !== false ? buildStateObject(readonly, "readonly") : {},
-    options == null ? void 0 : options.mergeObject
-  );
-}
-
 const CustomThemeProvider = ({
   children,
   customTheme
 }) => {
   const theme = getMainTheme(customTheme);
-  return /* @__PURE__ */ jsx(ThemeProvider$1, { theme, children });
+  return /* @__PURE__ */ jsx(ThemeUIProvider, { theme, children });
 };
 
 var __defProp = Object.defineProperty;
@@ -3243,10 +3775,14 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 function makeStyledComponent(displayName, stylesPath, styles, Component, unwraped = false) {
-  const theme = setValueByPath({}, stylesPath, styles);
   return Object.assign(
     (props) => {
       const avoidFirstRender = useRef(0);
+      const { theme: tuiTheme } = useThemeUI();
+      const theme = useMemo(
+        () => __spreadValues(__spreadValues({}, tuiTheme), setValueByPath({}, stylesPath, styles)),
+        [tuiTheme]
+      );
       if (unwraped) {
         return /* @__PURE__ */ jsx(CustomThemeProvider, { customTheme: theme, children: /* @__PURE__ */ jsx(NoThemePrevent, { avoidFirstRender, children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(Component, __spreadValues({}, props)) }) }) });
       }
@@ -3271,5 +3807,21 @@ function injectStyles(par1, par2) {
   mainThemeEmitter.emit("newStyles", { path, styles });
 }
 
-export { ThemeProvider, ThemeProviderContext, applyStatesGetColor, focusOutline, getColorState, getColorStates, getColorsAndStatesByDefinition, getColorsAndStatesByPath, getColorsByDefinition, getColorsByPath, getOneColorState, getPalette, getVariant, injectStyles, makeStyledComponent, responsive$1 as responsive, smallButton, spacing, useMainTheme };
-//# sourceMappingURL=index.js.map
+let timeout = -1;
+function logTheme(theme) {
+  clearTimeout(timeout);
+  timeout = setTimeout(() => {
+    console.info("Theme log: ", { theme });
+  }, 100);
+}
+const ApiaThemeProvider = ({
+  children,
+  customTheme,
+  customPalette
+}) => {
+  const theme = useMainTheme(customTheme, customPalette);
+  logTheme(theme);
+  return /* @__PURE__ */ jsx(ThemeProvider, { theme, children });
+};
+
+export { ApiaThemeProvider, applyStatesGetColor, focusOutline, getColorState, getColorStates, getColorsAndStatesByDefinition, getColorsAndStatesByPath, getColorsByDefinition, getColorsByPath, getOneColorState, getVariant, injectStyles, makeStyledComponent, parsePalette, responsive$1 as responsive, smallButton, spacing, useMainTheme };