@apia/theme 0.2.4 → 0.3.2

package/dist/index.js

@@ -5,6 +5,7 @@ export { Alert, AspectImage, AspectRatio, Avatar, Badge, BaseStyles, Box, Button
 export * from '@theme-ui/match-media';
 import { EventEmitter, useMount, setValueByPath } from '@apia/util';
 import { useState, useRef, useMemo, Suspense } from 'react';
+import { spacing as spacing$1 } from '@apia/theme';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
 function defaultLighten(color, ratio) {
@@ -34,30 +35,26 @@ function getValueByPath(obj, path, separator = ".") {
   );
 }
 
-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) => {
+var __defProp$t = Object.defineProperty;
+var __getOwnPropSymbols$t = Object.getOwnPropertySymbols;
+var __hasOwnProp$t = Object.prototype.hasOwnProperty;
+var __propIsEnum$t = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$t = (obj, key, value) => key in obj ? __defProp$t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$t = (a, b) => {
   for (var prop in b || (b = {}))
-    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]);
+    if (__hasOwnProp$t.call(b, prop))
+      __defNormalProp$t(a, prop, b[prop]);
+  if (__getOwnPropSymbols$t)
+    for (var prop of __getOwnPropSymbols$t(b)) {
+      if (__propIsEnum$t.call(b, prop))
+        __defNormalProp$t(a, prop, b[prop]);
     }
   return a;
 };
-const getColorState = (definition, state, theme) => {
+const getColorState = (definition, state, palette) => {
   var _a, _b, _c, _d;
-  if (typeof state !== "string") {
-    console.log("getColorState", { definition, state, theme });
-  }
   if (state === "default")
-    return theme.palette.buildColorsObject(definition);
-  const palette = theme.palette;
+    return palette.buildColorsObject(definition);
   const opacity = palette.action[`${state}Opacity`];
   const actualState = state === "checked" ? "selected" : state;
   definition = Object.fromEntries(
@@ -83,13 +80,13 @@ const getColorState = (definition, state, theme) => {
     tinycolor((_b = definition.backgroundColor) != null ? _b : "").isLight() ? palette.action[actualState].light : palette.action[actualState].dark,
     100 * opacity
   ).toRgbString();
-  return theme.palette.buildColorsObject(__spreadValues$p(__spreadValues$p({}, definition.backgroundColor ? {
+  return palette.buildColorsObject(__spreadValues$t(__spreadValues$t({}, 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() : theme.palette.getContrastText(calculatedBackgroundColor)
+    ).toRgbString() : palette.getContrastText(calculatedBackgroundColor)
   } : null), definition.borderColor ? {
     borderColor: tinycolor.mix(
       definition.borderColor,
@@ -99,29 +96,28 @@ const getColorState = (definition, state, theme) => {
   } : null));
 };
 
-const applyStatesGetColor = (definition, theme, states) => {
+const applyStatesGetColor = (definition, palette, 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", theme);
+    newStates.active = getColorState(definition, "active", palette);
   }
   if ((states == null ? void 0 : states.disabled) !== false) {
-    newStates.disabled = getColorState(definition, "disabled", theme);
+    newStates.disabled = getColorState(definition, "disabled", palette);
   }
   if ((states == null ? void 0 : states.focus) !== false) {
-    newStates.focus = getColorState(definition, "focus", theme);
+    newStates.focus = getColorState(definition, "focus", palette);
   }
   if ((states == null ? void 0 : states.hover) !== false) {
-    newStates.hover = getColorState(definition, "hover", theme);
+    newStates.hover = getColorState(definition, "hover", palette);
   }
   if ((states == null ? void 0 : states.readonly) !== false) {
-    newStates.readonly = getColorState(definition, "readonly", theme);
+    newStates.readonly = getColorState(definition, "readonly", palette);
   }
   if ((states == null ? void 0 : states.selected) !== false) {
-    newStates.selected = getColorState(definition, "selected", theme);
+    newStates.selected = getColorState(definition, "selected", palette);
   }
   if ((states == null ? void 0 : states.checked) !== false) {
-    newStates.checked = getColorState(definition, "checked", theme);
+    newStates.checked = getColorState(definition, "checked", palette);
   }
   return newStates;
 };
@@ -146,7 +142,11 @@ function applyStates(properties, theme, states) {
           definition.hover = {};
         if (!definition.selected)
           definition.selected = {};
-        const newDefinition = applyStatesGetColor(definition, theme, states);
+        const newDefinition = applyStatesGetColor(
+          definition,
+          theme.palette,
+          states
+        );
         def[key] = merge(newDefinition, definition);
       }
     });
@@ -190,6 +190,7 @@ const defaultPalette = {
   border: {
     article: "#cacaca",
     field: "#444",
+    ghost: "#f5f5f5",
     section: "#aaa"
   },
   common: {
@@ -200,7 +201,8 @@ const defaultPalette = {
     main: "#fff"
   },
   primary: {
-    main: "#00496c"
+    main: "#00496c",
+    light: "#fcfcfc"
   },
   secondary: {
     main: "#6c757d"
@@ -325,24 +327,24 @@ const buildStateObject = (props, state) => {
   }
 };
 
-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) => {
+var __defProp$s = Object.defineProperty;
+var __getOwnPropSymbols$s = Object.getOwnPropertySymbols;
+var __hasOwnProp$s = Object.prototype.hasOwnProperty;
+var __propIsEnum$s = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$s = (obj, key, value) => key in obj ? __defProp$s(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$s = (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]);
+    if (__hasOwnProp$s.call(b, prop))
+      __defNormalProp$s(a, prop, b[prop]);
+  if (__getOwnPropSymbols$s)
+    for (var prop of __getOwnPropSymbols$s(b)) {
+      if (__propIsEnum$s.call(b, prop))
+        __defNormalProp$s(a, prop, b[prop]);
     }
   return a;
 };
 function buildColorsObject(definition) {
-  return __spreadValues$o(__spreadValues$o({}, definition), definition.borderColor ? {
+  return __spreadValues$s(__spreadValues$s({}, definition), definition.borderColor ? {
     borderLeftColor: definition.borderColor,
     borderRightColor: definition.borderColor,
     borderBottomColor: definition.borderColor,
@@ -361,19 +363,19 @@ function getColorsByPath(path, options) {
   );
 }
 
-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) => {
+var __defProp$r = Object.defineProperty;
+var __getOwnPropSymbols$r = Object.getOwnPropertySymbols;
+var __hasOwnProp$r = Object.prototype.hasOwnProperty;
+var __propIsEnum$r = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$r = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$r = (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]);
+    if (__hasOwnProp$r.call(b, prop))
+      __defNormalProp$r(a, prop, b[prop]);
+  if (__getOwnPropSymbols$r)
+    for (var prop of __getOwnPropSymbols$r(b)) {
+      if (__propIsEnum$r.call(b, prop))
+        __defNormalProp$r(a, prop, b[prop]);
     }
   return a;
 };
@@ -381,62 +383,59 @@ 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({
+  const disabled = __spreadValues$r({
     cursor: "not-allowed"
   }, 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({
+  const readonly = __spreadValues$r({
     cursor: "notAllowed"
   }, 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$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,
+    __spreadValues$r(__spreadValues$r(__spreadValues$r(__spreadValues$r(__spreadValues$r(__spreadValues$r(__spreadValues$r(__spreadValues$r(__spreadValues$r({}, ((_b = options == null ? void 0 : options.states) == null ? void 0 : _b.default) !== false ? getColorsByPath(incomingPath, 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), ((_i = options == null ? void 0 : options.states) == null ? void 0 : _i.path) !== false ? { path: { fill: `${incomingPath}.color` } } : null),
     options == null ? void 0 : options.mergeObject
   );
 }
 
-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$q = Object.defineProperty;
+var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
+var __hasOwnProp$q = Object.prototype.hasOwnProperty;
+var __propIsEnum$q = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$q = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$q = (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$q.call(b, prop))
+      __defNormalProp$q(a, prop, b[prop]);
+  if (__getOwnPropSymbols$q)
+    for (var prop of __getOwnPropSymbols$q(b)) {
+      if (__propIsEnum$q.call(b, prop))
+        __defNormalProp$q(a, prop, b[prop]);
     }
   return a;
 };
-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),
+const getColorStates = (definition, palette, states) => {
+  return __spreadValues$q(__spreadValues$q(__spreadValues$q(__spreadValues$q(__spreadValues$q(__spreadValues$q(__spreadValues$q(__spreadValues$q({}, (states == null ? void 0 : states.default) !== false ? definition : null), (states == null ? void 0 : states.checked) !== false ? buildStateObject(
+    getColorState(definition, "checked", palette),
+    "checked"
+  ) : null), buildStateObject(getColorState(definition, "focus", palette), "focus")), (states == null ? void 0 : states.selected) !== false ? buildStateObject(
+    getColorState(definition, "selected", palette),
     "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),
+  ) : null), (states == null ? void 0 : states.hover) !== false ? buildStateObject(getColorState(definition, "hover", palette), "hover") : null), (states == null ? void 0 : states.active) !== false ? buildStateObject(getColorState(definition, "active", palette), "active") : null), (states == null ? void 0 : states.disabled) !== false ? buildStateObject(
+    getColorState(definition, "disabled", palette),
     "disabled"
   ) : null), (states == null ? void 0 : states.readonly) !== false ? buildStateObject(
-    getColorState(definition, "readonly", theme),
+    getColorState(definition, "readonly", palette),
     "readonly"
   ) : null);
 };
 
-const getOneColorState = (color, state, theme) => {
+const getOneColorState = (color, state, palette) => {
   if (typeof color !== "string")
     return "";
   if (state === "default")
     return color;
   const actualState = state === "checked" ? "selected" : state;
-  const palette = theme.palette;
   const opacity = palette.action[`${state}Opacity`];
   return tinycolor.mix(
     color,
@@ -445,40 +444,40 @@ const getOneColorState = (color, state, theme) => {
   ).toRgbString();
 };
 
-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$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$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$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;
 };
 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 ? {
+    buildColorsObject(__spreadValues$p(__spreadValues$p(__spreadValues$p({}, 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) {
+function getColorsAndStatesByDefinition(definition, palette, 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);
+  const active = getColorState(definition, "active", palette);
+  const checked = getColorState(definition, "checked", palette);
+  const disabled = getColorState(definition, "disabled", palette);
+  const focus = ((_a = options == null ? void 0 : options.states) == null ? void 0 : _a.focus) ? getColorState(definition, "focus", palette) : {};
+  const hover = getColorState(definition, "hover", palette);
+  const readonly = getColorState(definition, "readonly", palette);
+  const selected = getColorState(definition, "selected", palette);
   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") : {},
@@ -520,7 +519,7 @@ function paletteFunction(callback) {
     }
   };
 }
-function parsePalette(palette, theme) {
+function parsePalette(palette) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
   const newPalette = cloneDeep(palette);
   newPalette.lightenColor = paletteFunction(
@@ -580,24 +579,25 @@ function parsePalette(palette, theme) {
   newPalette.buildColorsObject = paletteFunction(buildColorsObject);
   newPalette.buildStateObject = paletteFunction(buildStateObject);
   newPalette.getColor = paletteFunction(
-    (color, state) => getOneColorState(color, state, theme)
+    (color, state) => getOneColorState(color, state, newPalette)
   );
   newPalette.getStatesForColors = paletteFunction(
-    (definition, states) => applyStatesGetColor(definition, theme, states)
+    (definition, states) => applyStatesGetColor(definition, newPalette, states)
   );
   newPalette.getOneState = paletteFunction(
-    (definition, state) => getColorState(definition, state, theme)
+    (definition, state) => getColorState(definition, state, newPalette)
   );
   newPalette.getColorStates = paletteFunction(
-    (definition, state) => getColorStates(definition, theme, state)
+    (definition, state) => getColorStates(definition, newPalette, state)
   );
   newPalette.getStatesFromDefinition = paletteFunction(
-    (definition, states) => getColorsAndStatesByDefinition(definition, theme, states)
+    (definition, states) => getColorsAndStatesByDefinition(definition, newPalette, states)
   );
   newPalette.getStatesFromPath = paletteFunction(getColorsAndStatesByPath);
   newPalette.getSelectedColors = paletteFunction(
-    () => getSelectedColors(theme)
+    () => getSelectedColors(newPalette)
   );
+  newPalette.getColorsByPath = paletteFunction(getColorsByPath);
   return newPalette;
 }
 
@@ -622,7 +622,7 @@ const components$1 = (theme) => {
       header: {
         backgroundColor: palette.background.default,
         color: palette.text.primary,
-        borderColor: palette.background.default
+        borderColor: theme.palette.darkenColor(palette.border.ghost)
       },
       body: {
         preventParse: true,
@@ -648,7 +648,7 @@ const components$1 = (theme) => {
         }
       }
     },
-    pagination: {
+    paginationPrimary: {
       backgroundColor: palette.primary.main,
       icons: {
         backgroundColor: palette.primary.main,
@@ -662,11 +662,39 @@ const components$1 = (theme) => {
         color: palette.text.primary
       }
     },
+    paginationSecondary: {
+      backgroundColor: palette.background.default,
+      icons: {
+        backgroundColor: palette.secondary.main,
+        borderColor: palette.secondary.main,
+        color: palette.secondary.contrastText
+      },
+      pagesBox: {
+        preventParse: true,
+        backgroundColor: palette.background.paper,
+        borderColor: palette.border.field,
+        color: palette.text.primary
+      }
+    },
+    paginationDatagrid: {
+      backgroundColor: palette.background.default,
+      icons: {
+        backgroundColor: palette.secondary.main,
+        borderColor: palette.secondary.main,
+        color: palette.secondary.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,
+        color: palette.text.secondary,
         borderColor: palette.primary.main
       },
       body: {
@@ -693,6 +721,39 @@ const components$1 = (theme) => {
         }
       }
     },
+    cleanTable: {
+      borderColor: palette.background.paper,
+      header: {
+        backgroundColor: palette.background.paper,
+        color: palette.text.primary,
+        borderColor: palette.primary.main
+      },
+      body: {
+        preventParse: true,
+        backgroundColor: palette.background.paper,
+        borderColor: palette.border.ghost,
+        color: palette.text.primary,
+        evenRowsBackgroundColor: palette.background.paper,
+        additionalInfoButton: {
+          backgroundColor: palette.primary.light,
+          color: "#4e4e4e",
+          borderColor: "transparent"
+        },
+        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: {
@@ -723,37 +784,56 @@ const components$1 = (theme) => {
           )
         }
       }
+    },
+    /**
+     * Paneles de dashboards
+     */
+    panel: {
+      header: {
+        color: "",
+        //components.panel.header.color
+        backgroundColor: "",
+        borderColor: ""
+      },
+      content: {
+        color: "",
+        backgroundColor: "",
+        borderColor: ""
+      },
+      footer: {
+        color: "",
+        backgroundColor: "",
+        borderColor: ""
+      }
     }
   };
 };
 
-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) => {
+var __defProp$o = Object.defineProperty;
+var __defProps$d = Object.defineProperties;
+var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
+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$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$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;
 };
-var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
-const darkBlue = "#004085";
-const lightBlue = "#cce5ff";
+var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
 const white = "white";
-function getSelectedColors(theme) {
-  return theme.palette.getColorStates(
+function getSelectedColors(palette) {
+  return palette.getColorStates(
     {
-      backgroundColor: theme.palette.background.paper,
-      color: theme.palette.text.primary
+      backgroundColor: palette.background.paper,
+      color: palette.text.primary
     },
     {
       active: false,
@@ -766,11 +846,11 @@ function getSelectedColors(theme) {
   );
 }
 function getThemeColorsObject(theme) {
-  var _a;
+  var _a, _b;
   const colors = merge(
     {},
     {
-      palette: __spreadProps$b(__spreadValues$k({}, theme.palette), {
+      palette: __spreadProps$d(__spreadValues$o({}, theme.palette), {
         lightenColor: void 0,
         darkenColor: void 0,
         getContrastText: void 0,
@@ -795,21 +875,25 @@ function getThemeColorsObject(theme) {
           borderColor: theme.palette.border.section,
           color: theme.palette.primary.contrastText
         },
-        close: __spreadProps$b(__spreadValues$k({}, applyStatesGetColor(
+        close: __spreadProps$d(__spreadValues$o({}, applyStatesGetColor(
           {
             color: theme.palette.text.primary,
             backgroundColor: theme.palette.background.paper
           },
-          theme
+          theme.palette
         )), {
           backgroundColor: "transparent"
         }),
         collapsibleAsidePanelTitle: {
           color: theme.palette.text.primary
         },
-        deletableInputButton: {
-          backgroundColor: "transparent",
-          color: theme.palette.secondary.main,
+        deletableInputButton: __spreadProps$d(__spreadValues$o({}, applyStatesGetColor(
+          {
+            backgroundColor: "transparent",
+            color: theme.palette.secondary.main
+          },
+          theme.palette
+        )), {
           active: {
             color: theme.palette.darkenColor(theme.palette.secondary.main, 40)
           },
@@ -822,7 +906,7 @@ function getThemeColorsObject(theme) {
           hover: {
             color: theme.palette.darkenColor(theme.palette.secondary.main, 20)
           }
-        },
+        }),
         icon: {
           backgroundColor: theme.palette.secondary.main,
           color: theme.palette.text.icon,
@@ -914,7 +998,7 @@ function getThemeColorsObject(theme) {
         },
         outlineDanger: {
           backgroundColor: theme.palette.background.paper,
-          color: theme.palette.primary.main,
+          color: theme.palette.text.primary,
           borderColor: theme.palette.primary.main,
           active: {
             borderColor: theme.palette.darkenColor(
@@ -1154,73 +1238,53 @@ function getThemeColorsObject(theme) {
         { backgroundColor: theme.palette.background.paper },
         "selected"
       ).backgroundColor,
-      // Meaningful colors
-      lightBorder: "hsl(0, 12%, 85%)",
+      acquiredColor: "#2b2bd0",
+      acquiredColorDisabled: "#7f7fd4",
+      // Borders
       outlineColor: "#00a8f6",
       touchedBorderColor: "orange",
-      // Custom Apia colors
-      baseGrey: "#dfdfdf",
-      darkBorder: "hsl(247, 98%, 10%)",
-      darkBlue,
-      disabled: "#efefef",
+      // Other colors
       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,
+      // States
+      overdueDanger: "rgb(189, 0, 3)",
+      overdueWarning: "rgb(209 176 0)",
       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
-      }
+      // Common
+      white
     },
     (_a = theme.colors) != null ? _a : {}
   );
   applyStates(
     [
       colors == null ? void 0 : colors.buttons,
-      colors == null ? void 0 : colors.form
+      colors == null ? void 0 : colors.form,
+      colors == null ? void 0 : colors.components
     ],
     theme
   );
+  Object.entries((_b = colors.components) != null ? _b : {}).forEach(([name]) => {
+    applyStates([colors.components[name]], theme);
+  });
   return colors;
 }
 
-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) => {
+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$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$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;
 };
@@ -1317,37 +1381,37 @@ const alerts = {
   },
   warning: {
     variant: "alerts.primary",
-    "&, & .notification__header": __spreadValues$j({}, getColorsByPath("notifications.warning"))
+    "&, & .notification__header": __spreadValues$n({}, getColorsByPath("notifications.warning"))
   },
   danger: {
     variant: "alerts.primary",
-    "&, & .notification__header": __spreadValues$j({}, getColorsByPath("notifications.error"))
+    "&, & .notification__header": __spreadValues$n({}, getColorsByPath("notifications.error"))
   },
   success: {
     variant: "alerts.primary",
-    "&, & .notification__header": __spreadValues$j({}, getColorsByPath("notifications.success"))
+    "&, & .notification__header": __spreadValues$n({}, getColorsByPath("notifications.success"))
   }
 };
 
-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) => {
+var __defProp$m = Object.defineProperty;
+var __defProps$c = Object.defineProperties;
+var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
+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$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$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;
 };
-var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
+var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
 const buttons = {
   inherit: {
     color: "inherit",
@@ -1359,14 +1423,14 @@ const buttons = {
     padding: 0,
     margin: 0
   },
-  collapsibleAsidePanelTitle: __spreadValues$i({
+  collapsibleAsidePanelTitle: __spreadValues$m({
     variant: "buttons.inherit",
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
     width: "100%"
   }, getColorsAndStatesByPath("buttons.collapsibleAsidePanelTitle")),
-  primary: __spreadProps$a(__spreadValues$i({
+  primary: __spreadProps$c(__spreadValues$m({
     borderWidth: "2px",
     borderStyle: "solid",
     variant: "text.default",
@@ -1385,37 +1449,37 @@ const buttons = {
       outlineColor: "#00daff"
     }
   }),
-  "primary-sm": __spreadValues$i({
+  "primary-sm": __spreadValues$m({
     variant: "buttons.primary",
     "&:focus, &:focus-visible": {}
   }, smallButton),
-  secondary: __spreadValues$i({
+  secondary: __spreadValues$m({
     variant: "buttons.primary",
     "&:focus, &:focus-visible": {},
     borderWidth: "0px",
     borderStyle: "solid"
   }, getColorsAndStatesByPath("buttons.secondary")),
-  "secondary-sm": __spreadValues$i({
+  "secondary-sm": __spreadValues$m({
     variant: "buttons.secondary"
   }, smallButton),
-  "light-secondary": __spreadValues$i({
+  "light-secondary": __spreadValues$m({
     variant: "buttons.secondary"
   }, getColorsAndStatesByPath("buttons.lightSecondary")),
-  danger: __spreadValues$i({
+  danger: __spreadValues$m({
     variant: "buttons.primary",
     "&:focus, &:focus-visible": {}
   }, getColorsAndStatesByPath("buttons.danger")),
-  "danger-sm": __spreadValues$i({
+  "danger-sm": __spreadValues$m({
     variant: "buttons.danger"
   }, smallButton),
-  warning: __spreadValues$i({
+  warning: __spreadValues$m({
     variant: "buttons.primary",
     "&:focus, &:focus-visible": {}
   }, getColorsAndStatesByPath("buttons.warning")),
-  "warning-sm": __spreadValues$i({
+  "warning-sm": __spreadValues$m({
     variant: "buttons.warning"
   }, smallButton),
-  close: __spreadValues$i({
+  close: __spreadValues$m({
     cursor: "pointer",
     ml: "auto",
     mr: "2",
@@ -1450,11 +1514,11 @@ const buttons = {
       wordBreak: "break-word"
     }
   },
-  "accordion-primary": __spreadValues$i({
+  "accordion-primary": __spreadValues$m({
     variant: "buttons.accordion",
     border: "none"
   }, getColorsAndStatesByPath("buttons.accordionPrimary")),
-  icon: __spreadProps$a(__spreadValues$i({
+  icon: __spreadProps$c(__spreadValues$m({
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
@@ -1464,52 +1528,32 @@ const buttons = {
     cursor: "pointer",
     transition: "background-color 300ms ease-out, color 300ms ease-out",
     borderRadius: "buttons",
-    border: "none"
+    border: "none",
+    color: "inherit"
   }, getColorsAndStatesByPath("buttons.icon")), {
-    path: {
-      width: "auto",
-      height: "20px",
-      display: "block",
-      fill: getColorsAndStatesByPath("buttons.icon").color
-    },
-    "&.isToggled": __spreadProps$a(__spreadValues$i({}, getColorsAndStatesByPath("buttons.iconToggled")), {
-      path: {
-        fill: getColorsAndStatesByPath("buttons.iconToggled").color
-      }
-    })
+    "&.isToggled": __spreadValues$m({}, getColorsAndStatesByPath("buttons.iconToggled"))
   }),
-  "icon-primary": __spreadProps$a(__spreadValues$i({
+  "icon-primary": __spreadValues$m({
     variant: "buttons.icon"
-  }, getColorsAndStatesByPath("buttons.iconPrimary")), {
-    path: {
-      fill: getColorsAndStatesByPath("buttons.iconPrimary").color
-    }
-  }),
-  "icon-outline": __spreadProps$a(__spreadValues$i({
+  }, getColorsAndStatesByPath("buttons.iconPrimary")),
+  "icon-outline": __spreadValues$m({
     variant: "buttons.icon",
     bg: "white",
-    border: "1px solid"
-  }, getColorsAndStatesByPath("buttons.iconOutline")), {
-    path: {
-      fill: getColorsAndStatesByPath("buttons.iconOutline").color
-    }
-  }),
-  "icon-outline-danger": __spreadValues$i({
+    border: "1px solid",
+    borderRadius: "4px"
+  }, getColorsAndStatesByPath("buttons.iconOutline")),
+  "icon-outline-danger": __spreadValues$m({
     variant: "buttons.icon",
-    bg: "white",
     border: "1px solid"
   }, getColorsAndStatesByPath("buttons.outlineDanger")),
-  "icon-only": __spreadProps$a(__spreadValues$i({
+  "icon-only": __spreadValues$m({
     variant: "buttons.icon"
-  }, getColorsAndStatesByPath("buttons.iconOnly")), {
-    path: {
-      fill: getColorsAndStatesByPath("buttons.iconOnly").color
-    }
-  }),
-  link: __spreadValues$i({
+  }, getColorsAndStatesByPath("buttons.iconOnly")),
+  link: __spreadValues$m({
     variant: "inherit",
     width: "auto",
-    border: "none",
+    border: "none !important",
+    background: "transparent !important",
     textDecoration: "underline",
     px: 2,
     py: 1,
@@ -1518,10 +1562,10 @@ const buttons = {
     textTransform: "none",
     transition: "background-color 300ms ease-out, color 300ms ease-out"
   }, getColorsAndStatesByPath("buttons.link")),
-  "link-sm": __spreadValues$i({
+  "link-sm": __spreadValues$m({
     variant: "buttons.link"
   }, smallButton),
-  outline: __spreadValues$i({
+  outline: __spreadValues$m({
     variant: "buttons.primary",
     borderWidth: "2px",
     borderStyle: "solid",
@@ -1538,10 +1582,10 @@ const buttons = {
       selected: false
     }
   })),
-  "outline-sm": __spreadValues$i({
+  "outline-sm": __spreadValues$m({
     variant: "buttons.outline"
   }, smallButton),
-  "transparent-sm": __spreadValues$i({
+  "transparent-sm": __spreadValues$m({
     variant: "buttons.outline",
     "&:focus, &:focus-visible": {},
     bg: "transparent",
@@ -1550,18 +1594,18 @@ const buttons = {
     font: "inherit",
     textTransform: "inherit"
   }, smallButton),
-  "outline-danger": __spreadValues$i({
+  "outline-danger": __spreadValues$m({
     variant: "buttons.outline",
     "&:focus, &:focus-visible": {}
   }, getColorsAndStatesByPath("buttons.outlineDanger")),
-  "outline-danger-sm": __spreadValues$i({
+  "outline-danger-sm": __spreadValues$m({
     variant: "buttons.outline-danger"
   }, smallButton),
-  "outline-warning": __spreadValues$i({
+  "outline-warning": __spreadValues$m({
     variant: "buttons.outline",
     "&:focus, &:focus-visible": {}
   }, getColorsAndStatesByPath("buttons.outlineWarning")),
-  "outline-warning-sm": __spreadValues$i({
+  "outline-warning-sm": __spreadValues$m({
     variant: "buttons.outline-warning"
   }, smallButton),
   "outline-extended": {
@@ -1591,7 +1635,7 @@ const buttons = {
       gridColumnEnd: 3
     }
   },
-  tableAccordion: __spreadValues$i({
+  tableAccordion: __spreadValues$m({
     variant: "buttons.accordion",
     fontSize: "text.default",
     p: spacing(3),
@@ -1600,7 +1644,7 @@ const buttons = {
       color: "background"
     }
   }, getColorsAndStatesByPath("buttons.tableAccordion")),
-  tableHeader: __spreadValues$i({
+  tableHeader: __spreadValues$m({
     variant: "buttons.tableAccordion",
     alignItems: "center",
     justifyContent: "center",
@@ -1610,13 +1654,13 @@ const buttons = {
       ml: spacing(2)
     }
   }, getColorsAndStatesByPath("buttons.tableHeader")),
-  paper: __spreadValues$i({
+  paper: __spreadValues$m({
     variant: "buttons.primary",
     borderWidth: "2px",
     borderStyle: "solid",
     borderRadius: "buttons"
   }, getColorsAndStatesByPath("buttons.paper")),
-  "paper-sm": __spreadValues$i(__spreadValues$i({
+  "paper-sm": __spreadValues$m(__spreadValues$m({
     variant: "buttons.primary",
     borderWidth: "2px",
     borderStyle: "solid",
@@ -1729,23 +1773,23 @@ const transitions = {
   }
 };
 
-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) => {
+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$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({
+    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;
+};
+const root = __spreadValues$l({
   height: "100%",
   "*": {
     fontFamily: "body",
@@ -1793,8 +1837,8 @@ const root = __spreadValues$h({
   },
   "textarea,a": {
     transition: "color 200ms ease-out",
-    ":focus": __spreadValues$h({}, focusOutline),
-    ":focus-visible": __spreadValues$h({}, focusOutline)
+    ":focus": __spreadValues$l({}, focusOutline),
+    ":focus-visible": __spreadValues$l({}, focusOutline)
   },
   "*:focus": focusOutline,
   ul: {
@@ -1884,7 +1928,7 @@ const baseTheme = () => {
     buttons,
     colors: {},
     fonts: {
-      body: "Arial",
+      body: '"InterVariable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif, Roboto',
       heading: "inherit",
       monospace: "Menlo, monospace"
     },
@@ -1906,11 +1950,17 @@ const baseTheme = () => {
     radii: {
       alerts: 0,
       buttons: 0,
-      default: 0
+      default: 0,
+      panel: "7px",
+      modals: "7px"
     },
     shadows: {
-      modals: "",
-      tabs: ""
+      dataGridHeader: "-6px -6px 11px black",
+      modals: "rgba(0, 0, 0, 0.16) 0px 1px 4px;",
+      tabs: "",
+      panel: "rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px",
+      tableFilters: "3px 3px 3px rgba(0,0,0,0.2)",
+      toolbar: "3px 3px 3px rgba(0,0,0,0.1)"
     },
     space: [0, 2, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96, 112, 128],
     sizes: {
@@ -1942,23 +1992,23 @@ const baseTheme = () => {
   };
 };
 
-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) => {
+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) => {
   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]);
+    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;
 };
-const customCheckbox = __spreadValues$g({
+const customCheckbox = __spreadValues$k({
   display: "inline-flex",
   borderRadius: "default",
   flexBasis: "32px",
@@ -1976,30 +2026,31 @@ const customCheckbox = __spreadValues$g({
   states: {
     active: false,
     hover: false,
-    focus: false
+    focus: false,
+    path: 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) => {
+var __defProp$j = Object.defineProperty;
+var __defProps$b = Object.defineProperties;
+var __getOwnPropDescs$b = 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) => {
   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]);
+    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;
 };
-var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
-const checkbox = __spreadProps$9(__spreadValues$f({
+var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
+const checkbox = __spreadProps$b(__spreadValues$j({
   borderRadius: "default"
 }, getColorsAndStatesByPath("form.fields", {
   states: {
@@ -2053,26 +2104,26 @@ const checkbox = __spreadProps$9(__spreadValues$f({
   }
 });
 
-var __defProp$e = Object.defineProperty;
-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;
-var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$e = (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$e.call(b, prop))
-      __defNormalProp$e(a, prop, b[prop]);
-  if (__getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(b)) {
-      if (__propIsEnum$e.call(b, prop))
-        __defNormalProp$e(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$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
-const dateInput = __spreadProps$8(__spreadValues$e({
+var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
+const dateInput = __spreadProps$a(__spreadValues$i({
   display: "flex",
   flexDirection: "column",
   alignItems: "stretch",
@@ -2089,7 +2140,7 @@ const dateInput = __spreadProps$8(__spreadValues$e({
     width: "100%",
     position: "relative"
   },
-  'input:hover~.delete_date_button:not(:disabled,[aria-selected="true"]), input:hover~.delete_date_button:not(:disabled,[aria-selected="true"]) path, .delete_date_button': __spreadValues$e({
+  'input:hover~.delete_date_button:not(:disabled,[aria-selected="true"]), input:hover~.delete_date_button:not(:disabled,[aria-selected="true"]) path, .delete_date_button': __spreadValues$i({
     position: "absolute",
     right: "59px",
     padding: 0,
@@ -2125,19 +2176,19 @@ const dateInput = __spreadProps$8(__spreadValues$e({
   backgroundColor: void 0
 });
 
-var __defProp$d = Object.defineProperty;
-var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
-var __hasOwnProp$d = Object.prototype.hasOwnProperty;
-var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$d = (a, b) => {
+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$d.call(b, prop))
-      __defNormalProp$d(a, prop, b[prop]);
-  if (__getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(b)) {
-      if (__propIsEnum$d.call(b, prop))
-        __defNormalProp$d(a, prop, b[prop]);
+    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;
 };
@@ -2147,7 +2198,7 @@ const iconInput = {
   justifyContent: "stretch",
   alignItems: "center",
   "&.readOnly": {
-    input: __spreadValues$d({}, getColorsByPath("form.fields"))
+    input: __spreadValues$h({}, getColorsByPath("form.fields"))
   },
   input: {
     height: "50px",
@@ -2161,26 +2212,26 @@ const iconInput = {
   }
 };
 
-var __defProp$c = Object.defineProperty;
-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;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$c = (a, b) => {
+var __defProp$g = Object.defineProperty;
+var __defProps$9 = Object.defineProperties;
+var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
+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$c.call(b, prop))
-      __defNormalProp$c(a, prop, b[prop]);
-  if (__getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(b)) {
-      if (__propIsEnum$c.call(b, prop))
-        __defNormalProp$c(a, prop, b[prop]);
+    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;
 };
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
-const input = __spreadProps$7(__spreadValues$c({
+var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
+const input = __spreadProps$9(__spreadValues$g({
   variant: "text.default",
   border: "1px solid",
   borderRadius: "default",
@@ -2252,47 +2303,54 @@ const label = {
   }
 };
 
-var __defProp$b = Object.defineProperty;
-var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
-var __hasOwnProp$b = Object.prototype.hasOwnProperty;
-var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$b = (a, b) => {
+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$b.call(b, prop))
-      __defNormalProp$b(a, prop, b[prop]);
-  if (__getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(b)) {
-      if (__propIsEnum$b.call(b, prop))
-        __defNormalProp$b(a, prop, b[prop]);
+    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;
 };
-const radio = __spreadValues$b({
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+const radio = __spreadProps$8(__spreadValues$f({
   width: "32px",
   height: "32px",
   input: {
     height: "32px !important"
   }
-}, getColorsAndStatesByPath("form.radio"));
+}, getColorsAndStatesByPath("form.radio")), {
+  path: {
+    fill: "inherit"
+  }
+});
 
-var __defProp$a = Object.defineProperty;
-var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
-var __hasOwnProp$a = Object.prototype.hasOwnProperty;
-var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$a = (a, b) => {
+var __defProp$e = Object.defineProperty;
+var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
+var __hasOwnProp$e = Object.prototype.hasOwnProperty;
+var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$e = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$a.call(b, prop))
-      __defNormalProp$a(a, prop, b[prop]);
-  if (__getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(b)) {
-      if (__propIsEnum$a.call(b, prop))
-        __defNormalProp$a(a, prop, b[prop]);
+    if (__hasOwnProp$e.call(b, prop))
+      __defNormalProp$e(a, prop, b[prop]);
+  if (__getOwnPropSymbols$e)
+    for (var prop of __getOwnPropSymbols$e(b)) {
+      if (__propIsEnum$e.call(b, prop))
+        __defNormalProp$e(a, prop, b[prop]);
     }
   return a;
 };
-const select = __spreadValues$a({
+const select = __spreadValues$e({
   variant: "text.default",
   display: "inline-block",
   fontFamily: "body",
@@ -2309,27 +2367,27 @@ const select = __spreadValues$a({
   }
 }));
 
-var __defProp$9 = Object.defineProperty;
-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;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$9 = (a, b) => {
+var __defProp$d = Object.defineProperty;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
+var __hasOwnProp$d = Object.prototype.hasOwnProperty;
+var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$d = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$9.call(b, prop))
-      __defNormalProp$9(a, prop, b[prop]);
-  if (__getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(b)) {
-      if (__propIsEnum$9.call(b, prop))
-        __defNormalProp$9(a, prop, b[prop]);
+    if (__hasOwnProp$d.call(b, prop))
+      __defNormalProp$d(a, prop, b[prop]);
+  if (__getOwnPropSymbols$d)
+    for (var prop of __getOwnPropSymbols$d(b)) {
+      if (__propIsEnum$d.call(b, prop))
+        __defNormalProp$d(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
 function selectMultiple(theme) {
-  return __spreadValues$9({
+  return __spreadValues$d({
     variant: "text.default",
     height: "100%",
     padding: "4px",
@@ -2338,9 +2396,9 @@ function selectMultiple(theme) {
     width: "100%",
     transition: "background-color 100ms ease-out, color 100ms ease-out",
     overflow: "auto",
-    option: __spreadProps$6(__spreadValues$9({
+    option: __spreadProps$7(__spreadValues$d({
       padding: 2
-    }, getSelectedColors(theme)), {
+    }, getSelectedColors(theme.palette)), {
       "&:checked": {
         backgroundColor: theme.palette.getColor(
           theme.palette.background.paper,
@@ -2383,25 +2441,25 @@ const textarea = {
   }
 };
 
-var __defProp$8 = Object.defineProperty;
-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;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$8 = (a, b) => {
+var __defProp$c = Object.defineProperty;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
+var __hasOwnProp$c = Object.prototype.hasOwnProperty;
+var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$c = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$8.call(b, prop))
-      __defNormalProp$8(a, prop, b[prop]);
-  if (__getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(b)) {
-      if (__propIsEnum$8.call(b, prop))
-        __defNormalProp$8(a, prop, b[prop]);
-    }
-  return a;
+    if (__hasOwnProp$c.call(b, prop))
+      __defNormalProp$c(a, prop, b[prop]);
+  if (__getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(b)) {
+      if (__propIsEnum$c.call(b, prop))
+        __defNormalProp$c(a, prop, b[prop]);
+    }
+  return a;
 };
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
 const deletableInput = {
   border: "1px solid",
   borderColor: "palette.border.field",
@@ -2411,15 +2469,17 @@ const deletableInput = {
   ".deletableInput__input": {
     border: "none"
   },
-  ".deletableInput__deleteButton": __spreadValues$8({
+  ".deletableInput__deleteButton": __spreadValues$c({
     height: "100%",
     outlineOffset: "-2px",
     position: "absolute",
     right: 0,
     top: 0,
     width: "45px"
-  }, getColorsAndStatesByPath("buttons.deletableInputButton")),
-  "&:focus-within:not(.asMaterial)": __spreadProps$5(__spreadValues$8({}, focusOutline), {
+  }, getColorsAndStatesByPath("buttons.deletableInputButton", {
+    states: { path: true }
+  })),
+  "&:focus-within:not(.asMaterial)": __spreadProps$6(__spreadValues$c({}, focusOutline), {
     ".deletableInput__input:focus": {
       outline: "none"
     },
@@ -2577,33 +2637,73 @@ const apiaApi = {
   /* PREPEND HERE */
 };
 
-var __defProp$7 = Object.defineProperty;
-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;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$7 = (a, b) => {
+const confirm = {
+  display: "flex",
+  flexDirection: "column",
+  gap: spacing$1(5),
+  width: "100%",
+  ".confirm__content": {
+    overflow: "auto",
+    flexBasis: "100%",
+    wordBreak: "break-word",
+    display: "flex",
+    flexDirection: "column"
+  },
+  ".confirm__buttonBar": {
+    display: "flex",
+    justifyContent: "space-between",
+    flexBasis: "40px",
+    flexGrow: 0,
+    flexShrink: 0,
+    ".confirm__defaultButtons": {
+      display: "flex",
+      gap: spacing$1(3)
+    },
+    ".confirm__customButtons": {
+      width: "auto"
+    }
+  }
+};
+
+const buttonsBar = {
+  flexBasis: "20%",
+  flexDirection: "row",
+  display: "flex",
+  justifyContent: "flex-end",
+  gap: spacing$1(3),
+  mb: spacing$1(0)
+};
+
+var __defProp$b = Object.defineProperty;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
+var __hasOwnProp$b = Object.prototype.hasOwnProperty;
+var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$b = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$7.call(b, prop))
-      __defNormalProp$7(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b)) {
-      if (__propIsEnum$7.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
+    if (__hasOwnProp$b.call(b, prop))
+      __defNormalProp$b(a, prop, b[prop]);
+  if (__getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(b)) {
+      if (__propIsEnum$b.call(b, prop))
+        __defNormalProp$b(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
-const modals = __spreadProps$4(__spreadValues$7({
-  apiaApi
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+const modals = __spreadProps$5(__spreadValues$b({
+  apiaApi,
+  buttonsBar,
+  confirm
 }, overlay), {
-  main: __spreadValues$7({
+  main: __spreadValues$b({
+    boxShadow: "modals",
+    borderRadius: "modals",
     zIndex: "modal",
     display: "flex",
     flexDirection: "column",
-    p: spacing(6),
     alignItems: "center",
     justifyItems: "center",
     maxHeight: "100vh",
@@ -2611,7 +2711,7 @@ const modals = __spreadProps$4(__spreadValues$7({
     resize: "both",
     overflow: "auto",
     border: "1px solid",
-    gap: spacing(5),
+    gap: "0px !important",
     "&>div": {
       overflow: "hidden",
       flexGrow: 0,
@@ -2623,14 +2723,25 @@ const modals = __spreadProps$4(__spreadValues$7({
       alignItems: responsive$1({ 0: "end", 4: "center" }),
       flexShrink: 0,
       overflow: "visible",
+      p: "16px 20px",
+      borderBottom: "1px solid lightgray",
       ".modal__headerBar": {
         display: "flex",
         flexDirection: "row",
-        alignItems: "center",
-        gap: spacing(3)
+        alignItems: "center"
       }
     },
-    "&>div.modal__content, &>div.modal__content>form": {
+    "&>div.modal__content": {
+      overflow: "auto",
+      width: "100%",
+      flexBasis: "100%",
+      flexShrink: 1,
+      display: "flex",
+      justifyContent: "stretch",
+      alignItems: "stretch",
+      p: "20px"
+    },
+    "&>div.modal__content>form": {
       overflow: "auto",
       width: "100%",
       flexBasis: "100%",
@@ -2645,7 +2756,6 @@ const modals = __spreadProps$4(__spreadValues$7({
     height: responsive$1({ 0: "100vh", 3: "80vh" }),
     width: responsive$1({ 0: "95vw", 3: "80vw", 4: "70vw" }),
     ".modal__content": {
-      p: spacing(2),
       overflow: "hidden",
       ".confirm__content": {
         overflow: "hidden",
@@ -2738,43 +2848,43 @@ const modals = __spreadProps$4(__spreadValues$7({
   /* PREPEND HERE */
 });
 
-var __defProp$6 = Object.defineProperty;
-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;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$6 = (a, b) => {
+var __defProp$a = Object.defineProperty;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
+var __hasOwnProp$a = Object.prototype.hasOwnProperty;
+var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$a = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$6.call(b, prop))
-      __defNormalProp$6(a, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b)) {
-      if (__propIsEnum$6.call(b, prop))
-        __defNormalProp$6(a, prop, b[prop]);
+    if (__hasOwnProp$a.call(b, prop))
+      __defNormalProp$a(a, prop, b[prop]);
+  if (__getOwnPropSymbols$a)
+    for (var prop of __getOwnPropSymbols$a(b)) {
+      if (__propIsEnum$a.call(b, prop))
+        __defNormalProp$a(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
 function getSelectionStyles() {
   return {
     'td[data-focused="false"], th[data-focused="false"]': {
       "*:focus-visible, &:focus, &:focus-visible": {
         outline: "none"
       },
-      "*:focus": __spreadValues$6({}, focusOutline)
+      "*:focus": __spreadValues$a({}, focusOutline)
     },
     '[data-focused="true"]:not(.row__separator__cell)': {
       '&:not([data-editionmode="true"])': {
-        "&:focus, & > *:focus, *:focus-visible": __spreadProps$3(__spreadValues$6({}, focusOutline), {
+        "&:focus, & > *:focus, *:focus-visible": __spreadProps$4(__spreadValues$a({}, focusOutline), {
           "&.cell__download__document": {
             outlineOffset: 0
           }
         })
       },
       '&[data-editionmode="true"]': {
-        "&:focus, *:focus, *:focus-visible": __spreadProps$3(__spreadValues$6({}, focusOutline), {
+        "&:focus, *:focus, *:focus-visible": __spreadProps$4(__spreadValues$a({}, focusOutline), {
           outlineStyle: "dotted",
           outlineWidth: "6px",
           outlineOffset: "-4px"
@@ -2788,27 +2898,27 @@ function getSelectionStyles() {
   };
 }
 
-var __defProp$5 = Object.defineProperty;
-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;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$5 = (a, b) => {
+var __defProp$9 = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$9 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
-      __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
+    if (__hasOwnProp$9.call(b, prop))
+      __defNormalProp$9(a, prop, b[prop]);
+  if (__getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(b)) {
+      if (__propIsEnum$9.call(b, prop))
+        __defNormalProp$9(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-const primary$1 = (theme) => {
-  return __spreadProps$2(__spreadValues$5({
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+const primary$3 = (theme) => {
+  return __spreadProps$3(__spreadValues$9({
     variant: "colors.tables.primary",
     width: "100%",
     backgroundColor: "components.primaryTable.body.backgroundColor",
@@ -2823,7 +2933,7 @@ const primary$1 = (theme) => {
       insetBlockStart: 0,
       backgroundColor: "palette.background.paper",
       "tr:not(.filtersRow):not(.responsiveTable__filters__row)": {
-        "th, td": __spreadProps$2(__spreadValues$5({
+        "th, td": __spreadProps$3(__spreadValues$9({
           variant: "buttons.primary",
           py: responsive$1({ 0: 3, 4: 4 }),
           px: responsive$1({ 0: 3, 4: 4 }),
@@ -2859,10 +2969,6 @@ const primary$1 = (theme) => {
           "&:last-of-type .headButton__resizer": {
             right: "0px"
           },
-          "&:last-of-type:not(td)": {
-            maxWidth: "100%",
-            width: "100%"
-          },
           "&.additionalColumn": {
             minWidth: "50px",
             maxWidth: "50px",
@@ -2881,12 +2987,6 @@ const primary$1 = (theme) => {
               flexShrink: 0
             }
           },
-          // '&>div': {
-          //   color: 'components.primaryTable.header.color',
-          //   svg: {
-          //     color: 'components.primaryTable.body.color',
-          //   },
-          // },
           "&:not(:last-of-type)": {
             "&>div": {
               borderRightWidth: "1px"
@@ -2900,6 +3000,7 @@ const primary$1 = (theme) => {
       },
       "tr.filtersRow, tr.responsiveTable__filters__row": {
         backgroundColor: "components.primaryTable.body.backgroundColor",
+        boxShadow: "tableFilters",
         "th.noFilter": {
           background: "transparent"
         },
@@ -2935,20 +3036,10 @@ const primary$1 = (theme) => {
       }
     },
     tbody: {
-      tr: __spreadProps$2(__spreadValues$5(__spreadProps$2(__spreadValues$5({
+      tr: __spreadProps$3(__spreadValues$9(__spreadProps$3(__spreadValues$9({
         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
-        }
-      })), {
+      }, theme.palette.getColorsByPath("components.primaryTable.body")), {
         "&:nth-of-type(2n)": {
           backgroundColor: "components.primaryTable.body.evenRowsBackgroundColor"
         },
@@ -2964,7 +3055,7 @@ const primary$1 = (theme) => {
             borderColor: "palette.gray.850"
           }
         }
-      }), getSelectedColors(theme)), {
+      }), getSelectedColors(theme.palette)), {
         "&.draggingRow": {
           outline: "3px dotted",
           outlineColor: "components.primaryTable.header.borderColor",
@@ -3061,6 +3152,7 @@ const information = {
   border: "1px solid",
   borderColor: "primary",
   borderCollapse: "collapse",
+  borderBottom: "none",
   thead: {
     tr: {
       th: {
@@ -3076,13 +3168,9 @@ const information = {
     tr: {
       "td,th": {
         borderColor: "muted",
+        borderBottom: "1px solid",
         p: spacing(4)
       },
-      "&:not(tr:last-of-type)": {
-        "td,th": {
-          borderBottom: "1px solid"
-        }
-      },
       "td:not(td:last-child),th:not(th:last-child)": {
         borderRight: "1px solid"
       },
@@ -3100,7 +3188,7 @@ const accordion$1 = {
   display: "flex",
   flexDirection: "column",
   gap: spacing(2),
-  ".responsiveTable__accordionElement__toggler": {
+  ".responsiveTable__accordionElement__toggler": () => ({
     variant: "buttons.outline",
     borderWidth: "1px",
     display: "flex",
@@ -3109,8 +3197,13 @@ const accordion$1 = {
     width: "100%",
     px: 4,
     py: 3,
-    "&:hover h3": {
-      color: "palette.primary.contrastText"
+    "&:hover": {
+      h3: {
+        color: "palette.primary.contrastText"
+      }
+    },
+    "& svg path": {
+      fill: "palette.primary.main"
     },
     ".accordionElement__toggler__checkbox": {
       flexShrink: 0,
@@ -3136,8 +3229,11 @@ const accordion$1 = {
         }
       }
     }
-  },
+  }),
   ".responsiveTable__accordionElement__content": {
+    maxHeight: "300px",
+    display: "flex",
+    flexDirection: "column",
     "& > div": {
       backgroundColor: "palette.background.paper",
       transition: "padding-bottom 300ms, padding-top 300ms",
@@ -3168,6 +3264,7 @@ const responsive = (theme) => {
     maxHeight: "100%",
     overflow: "auto",
     position: "relative",
+    // borderRadius: '10px',
     "&.isLoading": {
       overflow: "hidden"
     },
@@ -3199,19 +3296,19 @@ const responsive = (theme) => {
   };
 };
 
-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$8 = Object.defineProperty;
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$8 = (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$8.call(b, prop))
+      __defNormalProp$8(a, prop, b[prop]);
+  if (__getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(b)) {
+      if (__propIsEnum$8.call(b, prop))
+        __defNormalProp$8(a, prop, b[prop]);
     }
   return a;
 };
@@ -3220,11 +3317,11 @@ const secondary = {
   borderColor: "components.secondaryTable.borderColor",
   "& thead": {
     "tr:not(.filtersRow):not(.responsiveTable__filters__row)": {
-      "& th, & td": () => __spreadValues$4({}, getColorsAndStatesByPath("components.secondaryTable.header"))
+      "& th, & td": () => __spreadValues$8({}, getColorsAndStatesByPath("components.secondaryTable.header"))
     }
   },
   "& tbody": {
-    tr: __spreadValues$4({
+    tr: __spreadValues$8({
       "&:nth-of-type(2n)": {
         backgroundColor: "components.secondaryTable.body.evenRowsBackgroundColor"
       },
@@ -3254,81 +3351,379 @@ const secondary = {
   }
 };
 
-const tables = (theme) => {
-  return {
-    accordion: accordion$1,
-    information,
-    primary: primary$1(theme),
-    print,
-    responsive: responsive(theme),
-    secondary
-    /* PREPEND HERE */
-  };
-};
-
-const captcha = {
-  display: "flex",
-  flexDirection: "column",
-  gap: spacing(2),
-  ".captcha__imageContainer": {
-    border: "1px solid",
-    borderColor: "palette.border.field",
-    p: spacing(4)
-  },
-  ".captcha__inputContainer": {
-    display: "flex",
-    gap: spacing(2),
-    justifyContent: "stretch",
-    input: {
-      flexGrow: 1,
-      width: "100%"
-    },
-    ".captcha__buttons": {
-      width: "24px",
-      flexDirection: "column",
-      display: "flex",
-      gap: spacing(2),
-      flexShrink: 0,
-      button: {
-        width: "24px",
-        height: "24px",
-        p: "5px",
-        variant: "buttons.icon-outline",
-        svg: {
-          color: "palette.text.primary",
-          height: "16px",
-          width: "16px"
-        }
-      }
-    }
-  }
-};
-
-const forms = {
-  captcha
-  /* PREPEND HERE */
-};
-
-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$7 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (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$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
     }
   return a;
 };
-const primary = (theme) => {
-  return {
-    /* PREPEND HERE */
-    position: "relative",
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+const clean = (theme) => {
+  return __spreadProps$2(__spreadValues$7({
+    variant: "colors.tables.primary",
+    width: "100%",
+    backgroundColor: "components.cleanTable.body.backgroundColor",
+    border: "1px solid",
+    borderColor: "components.cleanTable.borderColor",
+    borderCollapse: "inherit",
+    borderSpacing: 0,
+    tableLayout: "fixed",
+    selection__keyHandler: {
+      maxHeight: "30vh"
+    },
+    thead: {
+      zIndex: 1,
+      position: "sticky",
+      insetBlockStart: 0,
+      backgroundColor: "palette.background.paper",
+      "tr:not(.filtersRow):not(.responsiveTable__filters__row)": {
+        "th, td": __spreadProps$2(__spreadValues$7({
+          variant: "buttons.primary",
+          width: "breakWidth",
+          backgroundColor: "palette.background.paper",
+          borderColor: "palette.primary.dark",
+          borderRadius: 0,
+          borderStyle: "solid",
+          borderWidth: "1px",
+          color: "primary.text.primary",
+          display: "table-cell",
+          verticalAlign: "center",
+          wordBreak: "break-word",
+          p: 0,
+          px: 0,
+          py: 0,
+          border: "none",
+          borderBottom: "1px solid #ccc",
+          '&[role="presentation"]': {
+            display: "none"
+          }
+        }, theme.palette.getStatesFromPath("components.cleanTable.header")), {
+          "& *": {
+            color: "inherit"
+          },
+          ".headButton__label": {
+            fontWeight: "bold",
+            textAlign: "left",
+            p: 0,
+            d: "",
+            "& > *": {
+              py: responsive$1({ 0: 3, 4: 4 }),
+              px: 4
+            }
+          },
+          ".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
+            }
+          },
+          "&:not(:last-of-type)": {
+            "&>div": {
+              borderRightWidth: "1px"
+            }
+          }
+        }),
+        "th.requiredFilterColumn": {
+          borderLeft: "4px solid !important",
+          borderLeftColor: "palette.error.main !important"
+        }
+      },
+      "tr.filtersRow, tr.responsiveTable__filters__row": {
+        backgroundColor: "components.cleanTable.body.backgroundColor",
+        "th.noFilter": {
+          background: "transparent"
+        },
+        "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.cleanTable.body.borderColor",
+          p: 0
+        },
+        transition: "height 0.3s",
+        "&.hidden": {
+          height: "0",
+          overflow: "hidden",
+          p: spacing(0),
+          border: "none",
+          "& *": {
+            height: "0",
+            overflow: "hidden",
+            fontSize: 0,
+            lineHeight: 0,
+            p: spacing(0),
+            border: "none"
+          }
+        }
+      }
+    },
+    tbody: {
+      tr: __spreadProps$2(__spreadValues$7(__spreadProps$2(__spreadValues$7({}, theme.palette.getStatesFromPath("components.cleanTable.body", {
+        states: {
+          disabled: false,
+          readonly: false,
+          active: false,
+          hover: false,
+          checked: false,
+          focus: false,
+          path: false,
+          selected: false
+        }
+      })), {
+        "&:nth-of-type(2n)": {
+          backgroundColor: "components.cleanTable.body.evenRowsBackgroundColor"
+        },
+        "&.non-selectable": {
+          cursor: "not-allowed"
+        },
+        "&.hidden": {
+          display: "none"
+        },
+        "&.locked": {
+          background: "palette.gray.900",
+          td: {
+            borderColor: "palette.gray.850"
+          }
+        }
+      }), getSelectedColors(theme.palette)), {
+        "&.draggingRow": {
+          outline: "3px dotted",
+          outlineColor: "components.cleanTable.header.borderColor",
+          outlineOffset: "-3px",
+          "*": {
+            outline: "none !important"
+          }
+        },
+        ".rowStatesList": {
+          display: "flex",
+          gap: spacing(3),
+          alignItems: "center",
+          svg: {
+            width: "smallIcon",
+            height: "smallIcon",
+            cursor: "pointer"
+          }
+        },
+        td: {
+          border: "none",
+          display: "table-cell",
+          p: 0,
+          overflow: "hidden",
+          whiteSpace: "nowrap",
+          textOverflow: "ellipsis",
+          wordBreak: "break-word",
+          button: {
+            height: "fit-content",
+            display: "flex"
+          },
+          "&.stickyColumn": {
+            position: "sticky",
+            left: 0,
+            backgroundColor: "components.cleanTable.body.backgroundColor"
+          },
+          ".moreInformationButton": {
+            width: "30px",
+            height: "30px",
+            padding: "3px",
+            border: "none",
+            background: "transparent"
+          },
+          ".autoellipsis__container": {
+            width: "100%"
+          },
+          "& > *": {
+            py: spacing(3),
+            px: 4
+          },
+          borderBottomWidth: "1px",
+          borderBottomStyle: "solid",
+          borderBottomColor: "components.cleanTable.body.borderColor"
+        }
+      }),
+      ".responsiveTable__additionalInfoContainer": {
+        background: "components.cleanTable.body.additionalInfoButton.backgroundColor",
+        display: "grid",
+        gridTemplateColumns: responsive$1({
+          0: "repeat(2, 1fr)",
+          5: "repeat(4, 1fr)"
+        }),
+        columnGap: 3,
+        rowGap: 2,
+        ".listPanel__details": {
+          pl: 6
+        }
+      },
+      ".responsiveTable__additionalInfoContainer .responsiveTable__additionalInfoItem.separator": {
+        gridColumnStart: "1",
+        gridColumnEnd: "5",
+        borderBottom: "1px solid",
+        borderBottomColor: "palette.gray.700",
+        height: "auto"
+      }
+    },
+    ".editionMode": {
+      border: "3px solid",
+      borderColor: "components.cleanTable.header.borderColor",
+      borderWidth: "1.5px",
+      borderStyle: "dotted"
+    },
+    ".stateCell": {
+      width: "50px",
+      maxWidth: "50px",
+      minWidth: "50px",
+      textAlign: "center",
+      verticalAlign: "middle"
+    }
+  }, getSelectionStyles()), {
+    ".no__registers": {
+      py: 6,
+      minWidth: "200px"
+    },
+    ".requiredFilter__Column": {
+      fontWeight: "bold"
+    },
+    ".bold": {
+      fontWeight: "bold"
+    },
+    ".light": {
+      color: "palette.gray.700"
+    },
+    ".additionalInfo__cell": {
+      path: {
+        fill: "components.cleanTable.body.additionalInfoButton.color"
+      }
+    },
+    ".additionalInfo__cell, .stateCell": {
+      verticalAlign: "middle"
+    },
+    ".isAcquired": {
+      td: {
+        div: {
+          color: "acquiredColor"
+        }
+      }
+    }
+  });
+};
+
+const tables = (theme) => {
+  return {
+    accordion: accordion$1,
+    information,
+    primary: primary$3(theme),
+    print,
+    responsive: responsive(theme),
+    secondary,
+    clean: clean(theme)
+    /* PREPEND HERE */
+  };
+};
+
+const captcha = {
+  display: "flex",
+  flexDirection: "column",
+  gap: spacing(2),
+  ".captcha__imageContainer": {
+    border: "1px solid",
+    borderColor: "palette.border.field",
+    p: spacing(4)
+  },
+  ".captcha__inputContainer": {
+    display: "flex",
+    gap: spacing(2),
+    justifyContent: "stretch",
+    input: {
+      flexGrow: 1,
+      width: "100%"
+    },
+    ".captcha__buttons": {
+      width: "24px",
+      flexDirection: "column",
+      display: "flex",
+      gap: spacing(2),
+      flexShrink: 0,
+      button: {
+        width: "24px",
+        height: "24px",
+        p: "5px",
+        variant: "buttons.icon-outline",
+        svg: {
+          color: "palette.text.primary",
+          height: "16px",
+          width: "16px"
+        }
+      }
+    }
+  }
+};
+
+const forms = {
+  captcha
+  /* PREPEND HERE */
+};
+
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$6.call(b, prop))
+      __defNormalProp$6(a, prop, b[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
+        __defNormalProp$6(a, prop, b[prop]);
+    }
+  return a;
+};
+const primary$2 = (theme) => {
+  return {
+    /* PREPEND HERE */
+    position: "relative",
     '[role="tree"]:focus': {
       outline: "none",
       ".focus": focusOutline
@@ -3342,7 +3737,6 @@ const primary = (theme) => {
       borderRadius: "2px",
       display: "flex",
       float: "right",
-      gap: spacing(3),
       justifyContent: "center",
       position: "sticky",
       right: "4px",
@@ -3365,10 +3759,9 @@ const primary = (theme) => {
         }
       }
     },
-    ".tree__searchLabel": __spreadValues$3({
+    ".tree__searchLabel": __spreadValues$6({
       alignItems: "center",
       display: "flex",
-      gap: spacing(3),
       justifyContent: "center",
       position: "fixed",
       p: "2px 5px",
@@ -3391,7 +3784,6 @@ const primary = (theme) => {
     ".tree__nodeItemLabel": {
       display: "flex",
       flexWrap: "nowrap",
-      gap: 3,
       alignItems: "center",
       wordBreak: "break-all",
       button: {
@@ -3422,39 +3814,51 @@ const primary = (theme) => {
         "hover"
       )
     },
+    ".tree__expanderWrapper": {
+      display: "inline-flex",
+      ml: "-10px",
+      pl: "5px",
+      "svg.tree__expandIcon": {
+        color: "palette.text.primary"
+      }
+    },
+    ".tree__node__icon": {
+      mr: "3"
+    },
     ".spacer": {
-      borderLeft: "1px solid",
+      borderLeft: "1px dotted",
       borderLeftColor: "palette.border.section",
       width: "20px",
-      alignSelf: "stretch"
+      alignSelf: "stretch",
+      transform: "translateX(5px)"
     }
   };
 };
 
 const trees = {
-  primary
+  primary: primary$2
 };
 
-var __defProp$2 = Object.defineProperty;
+var __defProp$5 = 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) => {
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (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$5.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
-const pagination = __spreadProps$1(__spreadValues$2({}, getColorsByPath("components.pagination")), {
+const common$1 = (type) => __spreadProps$1(__spreadValues$5({}, getColorsByPath(type)), {
   gap: spacing(1),
   justifyContent: "stretch",
   "&.onlyRefresh": {
@@ -3478,11 +3882,11 @@ const pagination = __spreadProps$1(__spreadValues$2({}, getColorsByPath("compone
     top: "80px",
     textAlign: "center"
   },
-  ".iconButton": __spreadProps$1(__spreadValues$2({
+  ".iconButton": __spreadProps$1(__spreadValues$5({
     height: "36px",
     width: "36px"
-  }, getColorsAndStatesByPath("components.pagination.icons", {
-    states: { disabled: false, path: true }
+  }, getColorsAndStatesByPath(`${type}.icons`, {
+    states: { disabled: false, path: false }
   })), {
     "&:disabled": {
       background: "transparent"
@@ -3510,7 +3914,7 @@ const pagination = __spreadProps$1(__spreadValues$2({}, getColorsByPath("compone
     "select ~ svg": {
       display: "none"
     },
-    ".input": __spreadProps$1(__spreadValues$2({
+    ".input": __spreadProps$1(__spreadValues$5({
       display: "flex",
       alignItems: "center",
       gap: spacing(3),
@@ -3518,7 +3922,7 @@ const pagination = __spreadProps$1(__spreadValues$2({}, getColorsByPath("compone
       border: "1px solid",
       paddingY: 1,
       paddingX: 4
-    }, getColorsByPath("components.pagination.pagesBox")), {
+    }, getColorsByPath(`${type}.pagesBox`)), {
       input: {
         font: "inherit",
         background: "none",
@@ -3547,7 +3951,7 @@ const pagination = __spreadProps$1(__spreadValues$2({}, getColorsByPath("compone
       display: "flex"
     }
   },
-  ".pagination__alertInfo": __spreadValues$2({
+  ".pagination__alertInfo": __spreadValues$5({
     variant: "buttons.icon-primary"
   }, getColorsAndStatesByPath("buttons.iconAlert")),
   ".pagination__rightToolbar": {
@@ -3581,6 +3985,66 @@ const pagination = __spreadProps$1(__spreadValues$2({}, getColorsByPath("compone
   }
 });
 
+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 primary$1 = __spreadValues$4({}, common$1("components.paginationPrimary"));
+
+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$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 datagrid = __spreadValues$3({}, common$1("components.paginationDatagrid"));
+
+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) => {
+  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]);
+    }
+  return a;
+};
+const primary = __spreadValues$2({}, common$1("components.paginationSecondary"));
+
+const pagination = {
+  primary: primary$1,
+  datagrid,
+  secondary: primary
+};
+
 const accordion = {
   primary: {
     "&, .accordion__item": {
@@ -3629,7 +4093,7 @@ const accordion = {
       borderBottomColor: "palette.border.section"
     },
     ".accordion__item__content > *": {
-      p: spacing(3),
+      p: 4,
       borderLeft: "1px solid",
       borderRight: "1px solid",
       borderLeftColor: "palette.border.section",
@@ -3646,6 +4110,48 @@ const accordion = {
         width: "100%"
       }
     }
+  },
+  panels: {
+    variant: "layout.common.components.accordion.primary",
+    overflowX: "hidden",
+    ".accordion__item__button": {
+      color: "palette.text.primary",
+      pl: 4,
+      background: "palette.background.paper",
+      border: "none",
+      borderTop: "1px solid",
+      borderColor: "palette.border.section",
+      boxShadow: "rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px",
+      ":hover": {
+        background: "palette.gray.900",
+        borderColor: "palette.border.section",
+        color: "palette.text.primary"
+      },
+      ":active": {
+        background: "palette.border.section"
+      },
+      svg: {
+        path: {
+          fill: "palette.text.primary"
+        }
+      }
+    },
+    ".accordion__item__button__label": {
+      color: "palette.text.primary",
+      fontWeight: "400"
+    },
+    '.accordion__item__content[aria-hidden="true"]': {
+      border: "none"
+    },
+    ".accordion__item__content": {
+      background: "palette.primary.light",
+      '[data-variant="link"]': {
+        px: 0
+      },
+      div: {
+        border: "none"
+      }
+    }
   }
 };
 
@@ -3676,22 +4182,21 @@ const makeTheme = (t) => {
   return t;
 };
 let declaredStyles = {};
-function getMainTheme(customTheme, customPalette) {
+function getMainTheme(customTheme, customPalette, themeModifier) {
+  var _a, _b;
+  const palette = parsePalette(merge({}, defaultPalette, customPalette));
+  window.currentPalette = palette;
   const theme = makeTheme(
-    merge(baseTheme(), { layout: declaredStyles }, customTheme != null ? customTheme : {}, {
+    merge(baseTheme(), { layout: declaredStyles }, (_a = customTheme == null ? void 0 : customTheme()) != null ? _a : {}, {
       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;
+  theme.styles = merge({}, customTheme == null ? void 0 : customTheme().styles, { root: theme.layout.root });
+  return (_b = themeModifier == null ? void 0 : themeModifier(theme)) != null ? _b : theme;
 }
 
 var __defProp$1 = Object.defineProperty;
@@ -3717,9 +4222,9 @@ function handleNewStyles(ev) {
   injectedStyles[ev.path] = ev.styles;
 }
 mainThemeEmitter.on("newStyles", handleNewStyles);
-function useMainTheme(customTheme, customPalette) {
+function useMainTheme(customTheme, customPalette, themeModifier) {
   const [theme, setTheme] = useState(
-    getMainTheme(customTheme, customPalette)
+    getMainTheme(customTheme, customPalette, themeModifier)
   );
   const previousTheme = useRef(customTheme);
   const previousPalette = useRef(customPalette);
@@ -3780,7 +4285,7 @@ function makeStyledComponent(displayName, stylesPath, styles, Component, unwrape
       const avoidFirstRender = useRef(0);
       const { theme: tuiTheme } = useThemeUI();
       const theme = useMemo(
-        () => __spreadValues(__spreadValues({}, tuiTheme), setValueByPath({}, stylesPath, styles)),
+        () => () => __spreadValues(__spreadValues({}, tuiTheme), setValueByPath({}, stylesPath, styles)),
         [tuiTheme]
       );
       if (unwraped) {
@@ -3807,21 +4312,49 @@ function injectStyles(par1, par2) {
   mainThemeEmitter.emit("newStyles", { path, styles });
 }
 
+const spacingLayouts = [
+  "dense",
+  "clever",
+  "vertical__clever",
+  "horizontal__clever"
+];
+function getSpacingLayouts() {
+  return {
+    "&.dense": {
+      px: 0,
+      py: 0
+    },
+    "&.horizontal__clever": {
+      px: 4,
+      py: 0
+    },
+    "&.vertical__clever": {
+      px: 0,
+      py: 4
+    },
+    "&.clever": {
+      px: 4,
+      py: 4
+    }
+  };
+}
+
 let timeout = -1;
 function logTheme(theme) {
   clearTimeout(timeout);
   timeout = setTimeout(() => {
     console.info("Theme log: ", { theme });
-  }, 100);
+  }, 500);
 }
 const ApiaThemeProvider = ({
   children,
   customTheme,
-  customPalette
+  customPalette,
+  themeModifier
 }) => {
-  const theme = useMainTheme(customTheme, customPalette);
+  const theme = useMainTheme(customTheme, customPalette, themeModifier);
   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 };
+export { ApiaThemeProvider, applyStatesGetColor, focusOutline, getColorState, getColorStates, getColorsAndStatesByDefinition, getColorsAndStatesByPath, getColorsByDefinition, getColorsByPath, getOneColorState, getSpacingLayouts, getVariant, injectStyles, makeStyledComponent, parsePalette, responsive$1 as responsive, smallButton, spacing, spacingLayouts, useMainTheme };