@apia/theme 1.0.4 → 2.0.0

package/dist/index.js

@@ -1,4667 +1,26 @@
-import tinycolor from 'tinycolor2';
-import { cloneDeep, merge } from 'lodash';
-import { ThemeUIProvider, useThemeUI, Box, ThemeProvider } from 'theme-ui';
-export { Alert, AspectImage, AspectRatio, Avatar, Badge, BaseStyles, Box, Button, Card, Checkbox, Close, CloseIcon, Container, Divider, Donut, Embed, Flex, Global, Grid, Heading, IconButton, Image, InitializeColorMode, Input, Label, Link, MenuButton, MenuIcon, Message, NavLink, Paragraph, Progress, Radio, Select, Slider, Spinner, Switch, Text, Textarea, createElement, css, get, jsx, merge, useColorMode, useThemeUI } from 'theme-ui';
+export { default as applyStatesGetColor } from './base/colors/util/applyStatesGetColor.js';
+export { default as parsePalette } from './base/colors/util/parsePalette.js';
 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) {
-  return tinycolor(color).lighten(ratio != null ? ratio : 20).toRgbString();
-}
-function defaultDarken(color, ratio) {
-  return tinycolor(color).darken(ratio != null ? ratio : 20).toRgbString();
-}
-function defaultGetContrastText(color) {
-  const current = tinycolor(color);
-  return tinycolor.readability("white", current) < tinycolor.readability("black", current) ? "black" : "white";
-}
-function getValueByPath(obj, path, separator = ".") {
-  const actualPath = typeof path === "string" ? path.split(separator) : path;
-  if (typeof obj !== "object" || !obj) {
-    if (actualPath.length === 0)
-      return obj;
-    return void 0;
-  }
-  const currentStep = actualPath.shift();
-  if (actualPath.length === 0)
-    return obj[currentStep];
-  return getValueByPath(
-    obj[currentStep],
-    actualPath,
-    separator
-  );
-}
-
-var __defProp$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$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, palette) => {
-  var _a, _b, _c, _d;
-  if (state === "default")
-    return palette.buildColorsObject(definition);
-  const opacity = palette.action[`${state}Opacity`];
-  const actualState = state === "checked" ? "selected" : state;
-  definition = Object.fromEntries(
-    Object.entries(definition).map(([name, value]) => {
-      if ([
-        "backgroundColor",
-        "borderColor",
-        "borderLeftColor",
-        "borderRightColor",
-        "borderBottomColor",
-        "borderTopColor",
-        "color"
-      ].includes(name) && (value != null ? value : "").startsWith("palette"))
-        value = getValueByPath(
-          palette,
-          value.slice("palette.".length)
-        );
-      return [name, value];
-    })
-  );
-  const calculatedBackgroundColor = tinycolor.mix(
-    (_a = definition.backgroundColor) != null ? _a : "",
-    tinycolor((_b = definition.backgroundColor) != null ? _b : "").isLight() ? palette.action[actualState].light : palette.action[actualState].dark,
-    100 * opacity
-  ).toRgbString();
-  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() : palette.getContrastText(calculatedBackgroundColor)
-  } : null), definition.borderColor ? {
-    borderColor: tinycolor.mix(
-      definition.borderColor,
-      tinycolor(definition.borderColor).isLight() ? palette.action[actualState].light : palette.action[actualState].dark,
-      100 * opacity
-    ).toRgbString()
-  } : null));
-};
-
-const applyStatesGetColor = (definition, palette, states) => {
-  const newStates = (states == null ? void 0 : states.default) !== false ? cloneDeep(definition) : {};
-  if ((states == null ? void 0 : states.active) !== false) {
-    newStates.active = getColorState(definition, "active", palette);
-  }
-  if ((states == null ? void 0 : states.disabled) !== false) {
-    newStates.disabled = getColorState(definition, "disabled", palette);
-  }
-  if ((states == null ? void 0 : states.focus) !== false) {
-    newStates.focus = getColorState(definition, "focus", palette);
-  }
-  if ((states == null ? void 0 : states.hover) !== false) {
-    newStates.hover = getColorState(definition, "hover", palette);
-  }
-  if ((states == null ? void 0 : states.readonly) !== false) {
-    newStates.readonly = getColorState(definition, "readonly", palette);
-  }
-  if ((states == null ? void 0 : states.selected) !== false) {
-    newStates.selected = getColorState(definition, "selected", palette);
-  }
-  if ((states == null ? void 0 : states.checked) !== false) {
-    newStates.checked = getColorState(definition, "checked", palette);
-  }
-  return newStates;
-};
-
-function applyStates(properties, theme, states) {
-  var _a;
-  (_a = properties.forEach) == null ? void 0 : _a.call(properties, (def) => {
-    Object.entries(def).forEach(([key, value]) => {
-      if (typeof value === "string")
-        return;
-      const definition = value;
-      if (typeof definition !== "string" && !definition.preventParse) {
-        if (!definition.active)
-          definition.active = {};
-        if (!definition.checked)
-          definition.checked = {};
-        if (!definition.focus)
-          definition.focus = {};
-        if (!definition.disabled)
-          definition.disabled = {};
-        if (!definition.hover)
-          definition.hover = {};
-        if (!definition.selected)
-          definition.selected = {};
-        const newDefinition = applyStatesGetColor(
-          definition,
-          theme.palette,
-          states
-        );
-        def[key] = merge(newDefinition, definition);
-      }
-    });
-  });
-}
-
-function isColorDefinition(value) {
-  return !!value && typeof value === "object" && "main" in value;
-}
-
-const actions = { dark: "#cce5ff", light: "#557" };
-const spacingArray = Array(50).fill(1).map((_, i) => {
-  return responsive$1({
-    0: Math.ceil(i / 2.5),
-    1: Math.ceil(i / 2.1),
-    2: Math.ceil(i / 1.7),
-    3: Math.ceil(i / 1.3),
-    4: i
-  });
-});
-const defaultPalette = {
-  action: {
-    disabled: "#d9d9d9",
-    disabledOpacity: 1,
-    active: actions,
-    activeOpacity: 0.45,
-    focus: actions,
-    focusOpacity: 0.05,
-    hover: actions,
-    hoverOpacity: 0.1,
-    readonly: actions,
-    readonlyOpacity: 0.4,
-    selected: "rgb(204 214 222)",
-    selectedOpacity: 1
-  },
-  background: {
-    default: "#f4f4f4",
-    overlay: "rgba(0, 0, 0, 0.2)",
-    paper: "white"
-  },
-  border: {
-    article: "#cacaca",
-    field: "#444",
-    ghost: "#f5f5f5",
-    section: "#aaa"
-  },
-  common: {
-    black: "black",
-    white: "white"
-  },
-  info: {
-    main: "#fff"
-  },
-  primary: {
-    main: "#00496c"
-  },
-  secondary: {
-    light: "#fcfcfc",
-    main: "#6c757d"
-  },
-  spacing: (index) => {
-    return spacingArray[index];
-  },
-  text: {
-    accent: "#609",
-    disabled: "#555",
-    icon: "white",
-    link: "#00496c",
-    primary: "#4a4a4a",
-    secondary: "white",
-    title: "#00496c"
-  },
-  error: {
-    main: "rgb(187,12,15)",
-    light: "#fff2f4"
-  },
-  success: {
-    main: "#8bde8b",
-    light: "#e7ffd9"
-  },
-  warning: {
-    main: "#f8f588",
-    light: "#fffdd9"
-  },
-  darkenRatio: 15,
-  lightenRatio: 35,
-  responsive: responsive$1,
-  queryColumnsMultiplier: 2
-};
-
-function responsive$1(values) {
-  var _a;
-  const returnArray = [];
-  const max = 6;
-  for (let i = 0; i <= max; i++)
-    returnArray[i + 1] = (_a = values[i]) != null ? _a : null;
-  if (values.print)
-    returnArray[0] = values.print;
-  else {
-    for (let i = 5; i >= 0; i--) {
-      if (values[i] !== void 0)
-        returnArray[0] = values[i];
-    }
-  }
-  return returnArray;
-}
-function spacing(index) {
-  var _a;
-  return (_a = defaultPalette.spacing(index)) != null ? _a : index;
-}
-const smallButton = {
-  py: 2,
-  px: 4,
-  fontSize: "0.9em"
-};
-const focusOutline = {
-  outlineColor: "outlineColor",
-  outlineWidth: "3px",
-  outlineStyle: "solid",
-  outlineOffset: "-3px"
-};
-function getVariant(variant) {
-  return { variant, "data-variant": variant };
-}
-
-const buildStateObject = (props, state) => {
-  switch (state) {
-    case "active":
-      return {
-        "&:active": props,
-        "input[role]:active ~ &": props,
-        "input[role]:active ~ & path": props
-      };
-    case "checked":
-      return {
-        "&:checked": props,
-        "input[role]:checked ~ &": props,
-        "input[role]:checked ~ & path": props
-      };
-    case "disabled":
-      return {
-        "&:disabled": props,
-        "input[role]:disabled ~ &": props,
-        "input[role]:disabled ~ & path": props
-      };
-    case "focus": {
-      const focusObject = merge({}, focusOutline, props);
-      return {
-        "&:focus": focusObject,
-        "input[role]:focus ~ &": focusObject
-      };
-    }
-    case "hover": {
-      return {
-        '&:hover:not([readonly], :disabled,[aria-selected="true"],:active)': props,
-        'input[role]:hover:not([readonly], :active, :disabled) ~ &:not(:disabled,[aria-selected="true"])': props,
-        'input[role]:hover:not([readonly], :active, :disabled) ~ &:not(:disabled,[aria-selected="true"]) path': props
-      };
-    }
-    case "readonly":
-      return {
-        "&[readonly]": props,
-        "input[role][readonly] ~ &": props,
-        "input[role][readonly] ~ & path": props,
-        "&.readonly input ~ &, &.readOnly input ~ &": props,
-        "&.readonly input ~ & path, &.readOnly input ~ & path": props,
-        "&.readonly, &.readOnly": props
-      };
-    case "selected":
-      return {
-        "&:selected": props,
-        "input[role]:selected ~ &": props,
-        "input[role]:selected ~ & path": props,
-        '&[aria-selected="true"]': props
-      };
-    default:
-      return props;
-  }
-};
-
-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$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$s(__spreadValues$s({}, definition), definition.borderColor ? {
-    borderLeftColor: definition.borderColor,
-    borderRightColor: definition.borderColor,
-    borderBottomColor: definition.borderColor,
-    borderTopColor: definition.borderColor
-  } : void 0);
-}
-
-function getColorsByPath(path, options) {
-  return merge(
-    buildColorsObject({
-      color: `${path}.color`,
-      backgroundColor: `${path}.backgroundColor`,
-      borderColor: `${path}.borderColor`
-    }),
-    options == null ? void 0 : options.mergeObject
-  );
-}
-
-var __defProp$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$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;
-};
-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$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$r({
-    cursor: "notAllowed"
-  }, getColorsByPath(`${incomingPath}.readonly`, options));
-  const selected = getColorsByPath(`${incomingPath}.selected`, options);
-  return merge(
-    __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: `currentColor` } } : null),
-    options == null ? void 0 : options.mergeObject
-  );
-}
-
-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$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, 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", 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", palette),
-    "readonly"
-  ) : null);
-};
-
-const getOneColorState = (color, state, palette) => {
-  if (typeof color !== "string")
-    return "";
-  if (state === "default")
-    return color;
-  const actualState = state === "checked" ? "selected" : state;
-  const opacity = palette.action[`${state}Opacity`];
-  return tinycolor.mix(
-    color,
-    tinycolor(color).isLight() ? palette.action[actualState].light : palette.action[actualState].dark,
-    100 * opacity
-  ).toRgbString();
-};
-
-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$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$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, palette, options) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-  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") : {},
-    ((_d = options == null ? void 0 : options.states) == null ? void 0 : _d.focus) !== false ? buildStateObject(focus, "focus") : {},
-    ((_e = options == null ? void 0 : options.states) == null ? void 0 : _e.hover) !== false ? buildStateObject(hover, "hover") : {},
-    ((_f = options == null ? void 0 : options.states) == null ? void 0 : _f.active) !== false ? buildStateObject(active, "active") : {},
-    ((_g = options == null ? void 0 : options.states) == null ? void 0 : _g.selected) !== false ? buildStateObject(selected, "selected") : {},
-    ((_h = options == null ? void 0 : options.states) == null ? void 0 : _h.disabled) !== false ? buildStateObject(disabled, "disabled") : {},
-    ((_i = options == null ? void 0 : options.states) == null ? void 0 : _i.readonly) !== false ? buildStateObject(readonly, "readonly") : {},
-    options == null ? void 0 : options.mergeObject
-  );
-}
-
-function paletteFunction(callback) {
-  return (...args) => {
-    const firstParameter = args[0];
-    let isFirstParameterATheme = false;
-    const themeProps = [
-      "fontSizes",
-      "breakpoints",
-      "fonts",
-      "lineHeights",
-      "letterSpacings",
-      "radii",
-      "zIndices",
-      "useRootStyles"
-    ];
-    if (firstParameter instanceof Object && firstParameter !== null) {
-      const firstParameterKeys = Object.keys(firstParameter);
-      for (const key of firstParameterKeys) {
-        if (themeProps.includes(key)) {
-          isFirstParameterATheme = true;
-          break;
-        }
-      }
-    }
-    if (isFirstParameterATheme) ; else {
-      return callback(...args);
-    }
-  };
-}
-function parsePalette(palette) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
-  const newPalette = cloneDeep(palette);
-  newPalette.lightenColor = paletteFunction(
-    (_a = palette.lightenColor) != null ? _a : (color, ratio) => {
-      return defaultLighten(color, ratio != null ? ratio : palette.lightenRatio);
-    }
-  );
-  newPalette.darkenColor = paletteFunction(
-    (_b = palette.darkenColor) != null ? _b : (color, ratio) => {
-      return defaultDarken(color, ratio != null ? ratio : palette.darkenRatio);
-    }
-  );
-  newPalette.getContrastText = paletteFunction(
-    (_c = palette.getContrastText) != null ? _c : defaultGetContrastText
-  );
-  Object.entries(palette).forEach(([key, value]) => {
-    var _a2, _b2, _c2;
-    const castedValue = value;
-    if (isColorDefinition(castedValue)) {
-      newPalette[key] = {
-        main: castedValue.main,
-        light: (_a2 = castedValue.light) != null ? _a2 : newPalette.lightenColor(castedValue.main),
-        dark: (_b2 = castedValue.dark) != null ? _b2 : newPalette.darkenColor(castedValue.main),
-        contrastText: (_c2 = castedValue.contrastText) != null ? _c2 : newPalette.getContrastText(castedValue.main)
-      };
-    } else {
-      newPalette[key] = value;
-    }
-  });
-  newPalette.border.article = (_d = newPalette.border.article) != null ? _d : newPalette.secondary.main;
-  newPalette.border.field = (_e = newPalette.border.field) != null ? _e : newPalette.text.primary;
-  newPalette.border.section = (_f = newPalette.border.section) != null ? _f : newPalette.primary.main;
-  function parseAction(action) {
-    var _a2, _b2;
-    if (typeof action === "string")
-      return {
-        dark: action,
-        light: action
-      };
-    return {
-      dark: (_a2 = action.dark) != null ? _a2 : action.light,
-      light: (_b2 = action.light) != null ? _b2 : action.dark
-    };
-  }
-  newPalette.action.active = parseAction(newPalette.action.active);
-  newPalette.action.disabled = parseAction(newPalette.action.disabled);
-  newPalette.action.focus = parseAction(newPalette.action.focus);
-  newPalette.action.hover = parseAction(newPalette.action.hover);
-  newPalette.action.readonly = parseAction(newPalette.action.readonly);
-  newPalette.action.selected = parseAction(newPalette.action.selected);
-  newPalette.gray = (_g = newPalette.gray) != null ? _g : {};
-  for (let i = 1; i <= 18; i++) {
-    const index = Math.round((255 - 255 / 18) / 18 * i);
-    newPalette.gray[i * 50] = (_h = newPalette.gray[i * 50]) != null ? _h : `rgb(${index},${index},${index})`;
-  }
-  newPalette.applyStates = paletteFunction(applyStates);
-  newPalette.buildColorsObject = paletteFunction(buildColorsObject);
-  newPalette.buildStateObject = paletteFunction(buildStateObject);
-  newPalette.getColor = paletteFunction(
-    (color, state) => getOneColorState(color, state, newPalette)
-  );
-  newPalette.getStatesForColors = paletteFunction(
-    (definition, states) => applyStatesGetColor(definition, newPalette, states)
-  );
-  newPalette.getOneState = paletteFunction(
-    (definition, state) => getColorState(definition, state, newPalette)
-  );
-  newPalette.getColorStates = paletteFunction(
-    (definition, state) => getColorStates(definition, newPalette, state)
-  );
-  newPalette.getStatesFromDefinition = paletteFunction(
-    (definition, states) => getColorsAndStatesByDefinition(definition, newPalette, states)
-  );
-  newPalette.getStatesFromPath = paletteFunction(getColorsAndStatesByPath);
-  newPalette.getSelectedColors = paletteFunction(
-    () => getSelectedColors(newPalette)
-  );
-  newPalette.getColorsByPath = paletteFunction(getColorsByPath);
-  return newPalette;
-}
-
-const schemas = {
-  ocean: ["#008E1B", "#009155", "#009187", "#008EB1", "#006872", "#2F4858"],
-  sunset: ["#ae76de", "#D65DB1", "#FF6F91", "#FF9671", "#FFC75F", "#F9F871"],
-  red: ["#dc143c", "#ff2400", "#800020", "#b22222", "#e52b50", "#ff7f50"],
-  orange: ["#F76E11", "#FF9F45", "#FFBC80", "#FC4F4F", "#eb9605", "#964000"],
-  green: ["#a4de02", "#76ba1b", "#4c9a2a", "#acdf87", "#68bb59", "#1e5631"],
-  blue: ["#7ad6f4", "#45bdee", "#28a7ea", "#006cbb", "#034698", "#032f64"],
-  violet: ["#80007e", "#a02d9c", "#c37ecd", "#9e5fb8", "#7f3e98", "#4c197f"],
-  turquoise: ["#0ddbcc", "#43ebff", "#19ceeb", "#28acea", "#388ee9", "#3d76e0"],
-  yellow: ["#fff700", "#ffff9f", "#fef54f", "#f9e231", "#f6c616", "#eab200"],
-  grey: ["#b1b5ba", "#d2d5d6", "#dee0e0", "#bdbdbb", "#9fa19c", "#686e67"]
-};
-
-const components$1 = (theme) => {
-  const palette = theme.palette;
-  return {
-    datagrid: {
-      borderColor: palette.background.paper,
-      header: {
-        backgroundColor: palette.background.default,
-        color: palette.text.primary,
-        borderColor: theme.palette.darkenColor(palette.border.ghost)
-      },
-      body: {
-        preventParse: true,
-        backgroundColor: palette.background.paper,
-        evenRowsBackgroundColor: palette.darkenColor(
-          palette.background.paper,
-          3
-        ),
-        color: palette.text.primary,
-        borderColor: palette.gray["800"],
-        selectedRows: {
-          borderColor: palette.gray["800"],
-          backgroundColor: palette.getOneState(
-            { backgroundColor: palette.background.paper },
-            "selected"
-          ).backgroundColor,
-          color: palette.getContrastText(
-            palette.getOneState(
-              { backgroundColor: palette.background.paper },
-              "selected"
-            ).backgroundColor
-          )
-        }
-      }
-    },
-    paginationPrimary: {
-      backgroundColor: palette.primary.main,
-      icons: {
-        backgroundColor: palette.primary.main,
-        borderColor: palette.primary.main,
-        color: palette.primary.contrastText
-      },
-      pagesBox: {
-        preventParse: true,
-        backgroundColor: palette.background.paper,
-        borderColor: palette.border.field,
-        color: palette.text.primary
-      }
-    },
-    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.text.secondary,
-        borderColor: palette.primary.main
-      },
-      body: {
-        preventParse: true,
-        backgroundColor: palette.background.paper,
-        evenRowsBackgroundColor: palette.darkenColor(
-          palette.background.paper,
-          3
-        ),
-        color: palette.text.primary,
-        borderColor: palette.gray["800"],
-        selectedRows: {
-          borderColor: palette.gray["800"],
-          backgroundColor: palette.getOneState(
-            { backgroundColor: palette.background.paper },
-            "selected"
-          ).backgroundColor,
-          color: palette.getContrastText(
-            palette.getOneState(
-              { backgroundColor: palette.background.paper },
-              "selected"
-            ).backgroundColor
-          )
-        }
-      }
-    },
-    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.secondary.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: {
-        backgroundColor: palette.background.default,
-        color: palette.text.primary,
-        borderColor: palette.background.default
-      },
-      body: {
-        preventParse: true,
-        backgroundColor: palette.background.paper,
-        evenRowsBackgroundColor: palette.darkenColor(
-          palette.background.paper,
-          3
-        ),
-        color: palette.text.primary,
-        borderColor: palette.gray["800"],
-        selectedRows: {
-          borderColor: palette.gray["800"],
-          backgroundColor: palette.getOneState(
-            { backgroundColor: palette.background.paper },
-            "selected"
-          ).backgroundColor,
-          color: palette.getContrastText(
-            palette.getOneState(
-              { backgroundColor: palette.background.paper },
-              "selected"
-            ).backgroundColor
-          )
-        }
-      }
-    },
-    /**
-     * Paneles de dashboards
-     */
-    panel: {
-      header: {
-        color: "",
-        //components.panel.header.color
-        backgroundColor: "",
-        borderColor: ""
-      },
-      content: {
-        color: "",
-        backgroundColor: "",
-        borderColor: ""
-      },
-      footer: {
-        color: "",
-        backgroundColor: "",
-        borderColor: ""
-      }
-    },
-    desktop: {
-      windowHeader: tinycolor(theme.palette.primary.main).setAlpha(0.8).toRgbString()
-    }
-  };
-};
-
-var __defProp$o = Object.defineProperty;
-var __defProps$e = Object.defineProperties;
-var __getOwnPropDescs$e = 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$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$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
-const white = "white";
-function getSelectedColors(palette) {
-  return palette.getColorStates(
-    {
-      backgroundColor: palette.background.paper,
-      color: palette.text.primary
-    },
-    {
-      active: false,
-      checked: false,
-      default: false,
-      disabled: false,
-      focus: false,
-      readonly: false
-    }
-  );
-}
-function getThemeColorsObject(theme) {
-  var _a, _b;
-  const colors = merge(
-    {},
-    {
-      palette: __spreadProps$e(__spreadValues$o({}, theme.palette), {
-        lightenColor: void 0,
-        darkenColor: void 0,
-        getContrastText: void 0,
-        buildStateObject: void 0,
-        getColor: void 0,
-        getOneState: void 0,
-        getStatesForColors: void 0,
-        getStatesFromDefinition: void 0,
-        getStatesFromPath: void 0
-      }),
-      accordion: {
-        borderColor: theme.palette.border.section
-      },
-      buttons: {
-        accordion: {
-          backgroundColor: theme.palette.primary.main,
-          borderColor: theme.palette.border.section,
-          color: theme.palette.primary.contrastText
-        },
-        accordionPrimary: {
-          backgroundColor: theme.palette.primary.main,
-          borderColor: theme.palette.border.section,
-          color: theme.palette.primary.contrastText
-        },
-        close: __spreadProps$e(__spreadValues$o({}, applyStatesGetColor(
-          {
-            color: theme.palette.text.primary,
-            backgroundColor: theme.palette.background.paper
-          },
-          theme.palette
-        )), {
-          backgroundColor: "transparent"
-        }),
-        collapsibleAsidePanelTitle: {
-          color: theme.palette.text.primary
-        },
-        deletableInputButton: __spreadProps$e(__spreadValues$o({}, applyStatesGetColor(
-          {
-            backgroundColor: "transparent",
-            color: theme.palette.secondary.main
-          },
-          theme.palette
-        )), {
-          active: {
-            color: theme.palette.darkenColor(theme.palette.secondary.main, 40)
-          },
-          disabled: {
-            color: theme.palette.secondary.main
-          },
-          focus: {
-            color: theme.palette.darkenColor(theme.palette.secondary.main, 20)
-          },
-          hover: {
-            color: theme.palette.darkenColor(theme.palette.secondary.main, 20)
-          }
-        }),
-        icon: {
-          backgroundColor: theme.palette.secondary.main,
-          color: theme.palette.text.icon,
-          hover: {
-            color: theme.palette.secondary.contrastText
-          },
-          focus: {
-            color: theme.palette.secondary.contrastText
-          }
-        },
-        iconAlert: {
-          backgroundColor: "transparent",
-          color: theme.palette.text.icon,
-          active: {
-            backgroundColor: "transparent",
-            color: tinycolor("#e5c200").darken(10).toRgbString()
-          },
-          focus: {
-            backgroundColor: "transparent",
-            color: tinycolor("#e5c200").darken(5).toRgbString()
-          },
-          hover: {
-            backgroundColor: "transparent",
-            color: tinycolor("#e5c200").darken(5).toRgbString()
-          }
-        },
-        iconPrimary: {
-          backgroundColor: theme.palette.primary.main,
-          color: theme.palette.primary.contrastText,
-          active: {
-            color: theme.palette.primary.contrastText
-          },
-          focus: {
-            color: theme.palette.primary.contrastText
-          },
-          hover: {
-            color: theme.palette.primary.contrastText
-          },
-          disabled: {
-            color: theme.palette.gray["500"]
-          }
-        },
-        iconToggled: {
-          backgroundColor: theme.palette.primary.main,
-          color: theme.palette.primary.contrastText,
-          active: {
-            color: theme.palette.primary.contrastText
-          },
-          focus: {
-            color: theme.palette.common.white
-          },
-          hover: {
-            color: theme.palette.common.white
-          }
-        },
-        iconOutline: {
-          backgroundColor: theme.palette.background.paper,
-          color: theme.palette.primary.main,
-          borderColor: theme.palette.border.article
-        },
-        imagePreview: {
-          backgroundColor: theme.palette.background.paper,
-          color: theme.palette.text.primary,
-          borderColor: theme.palette.border.article
-        },
-        link: {
-          backgroundColor: "transparent",
-          color: theme.palette.text.primary,
-          borderColor: "transparent",
-          active: {
-            color: theme.palette.text.primary
-          },
-          focus: {
-            color: theme.palette.text.primary
-          },
-          hover: {
-            color: theme.palette.text.primary
-          }
-        },
-        openTab: {
-          backgroundColor: theme.palette.primary.main,
-          color: theme.palette.primary.contrastText,
-          borderColor: theme.palette.primary.dark
-        },
-        outline: {
-          backgroundColor: theme.palette.background.paper,
-          color: theme.palette.text.primary,
-          borderColor: theme.palette.primary.main
-        },
-        outlineDanger: {
-          backgroundColor: theme.palette.background.paper,
-          color: theme.palette.text.primary,
-          borderColor: theme.palette.primary.main,
-          active: {
-            borderColor: theme.palette.darkenColor(
-              theme.palette.error.dark,
-              theme.palette.action.activeOpacity * 80
-            ),
-            backgroundColor: theme.palette.darkenColor(
-              theme.palette.error.dark,
-              theme.palette.action.activeOpacity * 80
-            ),
-            color: theme.palette.getContrastText(
-              theme.palette.darkenColor(
-                theme.palette.error.dark,
-                theme.palette.action.activeOpacity * 80
-              )
-            )
-          },
-          focus: {
-            borderColor: theme.palette.darkenColor(
-              theme.palette.error.dark,
-              theme.palette.action.focusOpacity * 60
-            ),
-            backgroundColor: theme.palette.darkenColor(
-              theme.palette.error.dark,
-              theme.palette.action.focusOpacity * 60
-            ),
-            color: theme.palette.getContrastText(
-              theme.palette.darkenColor(
-                theme.palette.error.dark,
-                theme.palette.action.focusOpacity * 60
-              )
-            )
-          },
-          hover: {
-            borderColor: theme.palette.darkenColor(
-              theme.palette.error.dark,
-              theme.palette.action.hoverOpacity * 10
-            ),
-            backgroundColor: theme.palette.darkenColor(
-              theme.palette.error.dark,
-              theme.palette.action.hoverOpacity * 10
-            ),
-            color: theme.palette.getContrastText(
-              theme.palette.darkenColor(
-                theme.palette.error.dark,
-                theme.palette.action.hoverOpacity * 10
-              )
-            )
-          }
-        },
-        outlineWarning: {
-          backgroundColor: theme.palette.background.paper,
-          color: theme.palette.text.primary,
-          borderColor: theme.palette.primary.main,
-          active: {
-            borderColor: theme.palette.warning.main,
-            backgroundColor: theme.palette.warning.main,
-            color: theme.palette.warning.contrastText
-          },
-          focus: {
-            borderColor: theme.palette.warning.main,
-            backgroundColor: theme.palette.warning.main,
-            color: theme.palette.warning.contrastText
-          },
-          hover: {
-            borderColor: theme.palette.warning.main,
-            backgroundColor: theme.palette.warning.main,
-            color: theme.palette.warning.contrastText
-          }
-        },
-        paper: {
-          backgroundColor: theme.palette.background.paper,
-          color: theme.palette.text.primary,
-          borderColor: theme.palette.background.paper
-        },
-        primary: {
-          backgroundColor: theme.palette.primary.main,
-          color: theme.palette.primary.contrastText,
-          borderColor: theme.palette.primary.main
-        },
-        secondary: {
-          backgroundColor: theme.palette.secondary.main,
-          color: theme.palette.secondary.contrastText,
-          borderColor: theme.palette.secondary.main
-        },
-        tab: {
-          backgroundColor: theme.palette.background.paper,
-          color: theme.palette.text.primary,
-          borderColor: theme.palette.border.article
-        },
-        toggleIcon: {
-          color: theme.palette.secondary.contrastText,
-          backgroundColor: theme.palette.secondary.main,
-          borderColor: theme.palette.border.field,
-          danger: {
-            backgroundColor: theme.palette.error.main,
-            borderColor: theme.palette.border.field,
-            color: theme.palette.error.contrastText
-          },
-          toggled: {
-            backgroundColor: theme.palette.primary.main,
-            borderColor: theme.palette.border.field,
-            color: theme.palette.primary.contrastText
-          }
-        },
-        transparentIcon: {
-          backgroundColor: "transparent",
-          color: theme.palette.text.primary,
-          hover: {
-            color: theme.palette.primary.main
-          },
-          focus: {
-            color: theme.palette.primary.main
-          }
-        }
-      },
-      components: components$1(theme),
-      dropzone: {
-        backgroundColor: theme.palette.background.paper,
-        borderColor: theme.palette.border.section,
-        color: theme.palette.background.default
-      },
-      form: {
-        backgroundColor: theme.palette.background.paper,
-        fields: {
-          backgroundColor: theme.palette.background.paper,
-          color: theme.palette.text.primary,
-          borderColor: theme.palette.border.field
-        },
-        radio: {
-          backgroundColor: "transparent",
-          color: tinycolor(theme.palette.text.primary).lighten(15).toRgbString(),
-          borderColor: theme.palette.text.primary,
-          active: {
-            backgroundColor: "transparent",
-            color: tinycolor(theme.palette.text.primary).lighten(0).toRgbString()
-          },
-          checked: {
-            backgroundColor: "transparent",
-            color: tinycolor(theme.palette.text.primary).lighten(15).toRgbString()
-          },
-          disabled: {
-            backgroundColor: "transparent",
-            color: tinycolor(theme.palette.text.primary).lighten(55).toRgbString()
-          },
-          hover: {
-            backgroundColor: "transparent",
-            color: tinycolor(theme.palette.text.primary).lighten(7).toRgbString()
-          },
-          readonly: {
-            color: tinycolor(theme.palette.text.primary).lighten(38).toRgbString(),
-            backgroundColor: "transparent"
-          }
-        }
-      },
-      modal: {
-        borderColor: theme.palette.border.section,
-        backgroundColor: theme.palette.background.paper
-      },
-      notifications: {
-        error: {
-          backgroundColor: theme.palette.error.light,
-          color: theme.palette.getContrastText(theme.palette.error.light),
-          borderColor: theme.palette.error.main
-        },
-        success: {
-          backgroundColor: theme.palette.success.light,
-          color: theme.palette.getContrastText(theme.palette.success.light),
-          borderColor: theme.palette.success.main
-        },
-        warning: {
-          backgroundColor: theme.palette.warning.light,
-          color: theme.palette.getContrastText(theme.palette.warning.light),
-          borderColor: theme.palette.warning.main
-        }
-      },
-      printView: {
-        main: {
-          backgroundColor: theme.palette.background.default,
-          page: {
-            backgroundColor: theme.palette.background.paper,
-            borderColor: theme.palette.border.article
-          }
-        },
-        list: {
-          table: {
-            borderColor: theme.palette.border.section
-          },
-          th: { backgroundColor: "#eee" },
-          cell: {
-            borderColor: theme.palette.border.article
-          }
-        }
-      },
-      schemas,
-      scrollbars: {
-        bar: {
-          color: theme.palette.secondary.main,
-          backgroundColor: theme.palette.background.default,
-          hover: {
-            backgroundColor: theme.palette.lightenColor(
-              theme.palette.background.default,
-              10
-            ),
-            color: theme.palette.lightenColor(theme.palette.secondary.main, 10)
-          },
-          active: {
-            backgroundColor: theme.palette.lightenColor(
-              theme.palette.background.default,
-              10
-            ),
-            color: theme.palette.lightenColor(theme.palette.secondary.main, 20)
-          }
-        }
-      },
-      tab: {
-        backgroundColor: theme.palette.background.paper,
-        borderColor: theme.palette.border.section
-      },
-      topBar: {
-        backgroundColor: theme.palette.primary.main
-      },
-      // Default ThemeUI colors
-      accent: theme.palette.text.accent,
-      background: theme.palette.background.default,
-      iconWarning: "rgb(246 222 87)",
-      muted: theme.palette.text.disabled,
-      primary: theme.palette.primary.main,
-      secondary: theme.palette.secondary.main,
-      text: theme.palette.text.primary,
-      warning: theme.palette.warning.main,
-      danger: theme.palette.error.main,
-      link: theme.palette.text.accent,
-      success: theme.palette.success.main,
-      title: theme.palette.text.title,
-      selected: theme.palette.getOneState(
-        { backgroundColor: theme.palette.background.paper },
-        "selected"
-      ).backgroundColor,
-      acquiredColor: "#2b2bd0",
-      acquiredColorDisabled: "#7f7fd4",
-      // Borders
-      outlineColor: "#00a8f6",
-      touchedBorderColor: "orange",
-      // Other colors
-      favorite: "#e5c200",
-      // States
-      overdueDanger: "rgb(189, 0, 3)",
-      overdueWarning: "hsl(50.53deg 100% 26.06%)",
-      overdueWarningBackground: "#fffdd7",
-      priorityNone: "gray",
-      priorityLow: theme.palette.success.main,
-      priorityNormal: "rgb(255 211 34)",
-      priorityHigh: "rgb(255 150 0)",
-      priorityUrgent: "red",
-      // 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.components
-    ],
-    theme
-  );
-  Object.entries((_b = colors.components) != null ? _b : {}).forEach(([name]) => {
-    applyStates([colors.components[name]], theme);
-  });
-  return colors;
-}
-
-var __defProp$n = Object.defineProperty;
-var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
-var __hasOwnProp$n = Object.prototype.hasOwnProperty;
-var __propIsEnum$n = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$n = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$n = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$n.call(b, prop))
-      __defNormalProp$n(a, prop, b[prop]);
-  if (__getOwnPropSymbols$n)
-    for (var prop of __getOwnPropSymbols$n(b)) {
-      if (__propIsEnum$n.call(b, prop))
-        __defNormalProp$n(a, prop, b[prop]);
-    }
-  return a;
-};
-const alerts = {
-  primary: {
-    border: "1px solid",
-    borderLeft: "12px solid",
-    borderRadius: "alerts",
-    display: "flex",
-    flexDirection: "column",
-    fontWeight: "normal",
-    maxHeight: "60vh",
-    overflow: "auto",
-    p: 0,
-    "&:focus": {
-      outline: "none"
-    },
-    ".notification__header": {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      position: "sticky",
-      top: 0,
-      width: "100%",
-      p: spacing(5)
-    },
-    ".notification__title": {
-      fontSize: 18,
-      fontWeight: "bold",
-      color: "palette.text.primary",
-      display: "flex",
-      gap: spacing(5),
-      alignItems: "center"
-    },
-    ".notification__closeButton": {
-      flexShrink: 0
-    },
-    ".notification__body": {
-      alignItems: "center",
-      display: "flex",
-      flexDirection: "row",
-      gap: spacing(5),
-      width: "100%",
-      p: spacing(5)
-    },
-    ".notification__header ~ .notification__body": {
-      pt: 0
-    },
-    ".notification__content": {
-      display: "flex",
-      alignItems: "stretch",
-      flexDirection: "column",
-      gap: spacing(5),
-      width: "100%"
-    },
-    ".notification__icon": {
-      flexShrink: 0,
-      height: "iconMd",
-      svg: {
-        height: "iconMd",
-        width: "iconMd"
-      }
-    },
-    ".notification__message": {
-      display: "flex",
-      flexDirection: "column",
-      fontWeight: "normal",
-      gap: spacing(3),
-      width: "100%",
-      wordBreak: "break-word",
-      ul: {
-        listStyle: "disc",
-        ml: "20px"
-      }
-    },
-    ".notification__trace": {
-      maxWidth: "100%",
-      overflow: "hidden",
-      maxHeight: "30vh",
-      flexShrink: 0,
-      backgroundColor: "rgba(10,10,10,0.02)",
-      pt: spacing(5),
-      display: "flex",
-      flexDirection: "column",
-      ".notification__traceLabel": {
-        pl: spacing(5),
-        display: "flex",
-        gap: 2
-      },
-      ".notification__traceText": {
-        fontWeight: "normal",
-        p: spacing(5),
-        maxHeight: "30vh",
-        overflow: "auto",
-        maxWidth: "100%",
-        position: "relative"
-      }
-    },
-    "&:focus .notification__closeButton": focusOutline
-  },
-  warning: {
-    variant: "alerts.primary",
-    "&, & .notification__header": __spreadValues$n({}, getColorsByPath("notifications.warning"))
-  },
-  danger: {
-    variant: "alerts.primary",
-    "&, & .notification__header": __spreadValues$n({}, getColorsByPath("notifications.error"))
-  },
-  success: {
-    variant: "alerts.primary",
-    "&, & .notification__header": __spreadValues$n({}, getColorsByPath("notifications.success"))
-  }
-};
-
-var __defProp$m = Object.defineProperty;
-var __defProps$d = Object.defineProperties;
-var __getOwnPropDescs$d = 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$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$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
-const buttons = {
-  inherit: {
-    color: "inherit",
-    background: "inherit",
-    border: "none",
-    borderRadius: 0,
-    font: "inherit",
-    cursor: "pointer",
-    padding: 0,
-    margin: 0
-  },
-  collapsibleAsidePanelTitle: __spreadValues$m({
-    variant: "buttons.inherit",
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    width: "100%"
-  }, getColorsAndStatesByPath("buttons.collapsibleAsidePanelTitle")),
-  primary: __spreadProps$d(__spreadValues$m({
-    borderWidth: "2px",
-    borderStyle: "solid",
-    variant: "text.default",
-    py: responsive$1({ 0: 3, 4: 4 }),
-    px: responsive$1({ 0: 5, 4: 6 }),
-    display: "inline-block",
-    width: responsive$1({ 0: "100%", 1: "auto" }),
-    cursor: "pointer",
-    borderRadius: "buttons",
-    fontWeight: "normal",
-    userSelect: "none",
-    transition: "background-color 300ms ease-out, color 300ms ease-out",
-    wordBreak: "keep-all"
-  }, getColorsAndStatesByPath("buttons.primary")), {
-    "&:focus, &:focus-visible": {
-      outlineColor: "#00daff"
-    }
-  }),
-  "primary-sm": __spreadValues$m({
-    variant: "buttons.primary",
-    "&:focus, &:focus-visible": {}
-  }, smallButton),
-  secondary: __spreadValues$m({
-    variant: "buttons.primary",
-    "&:focus, &:focus-visible": {},
-    borderWidth: "0px",
-    borderStyle: "solid"
-  }, getColorsAndStatesByPath("buttons.secondary")),
-  "secondary-sm": __spreadValues$m({
-    variant: "buttons.secondary"
-  }, smallButton),
-  "light-secondary": __spreadValues$m({
-    variant: "buttons.secondary"
-  }, getColorsAndStatesByPath("buttons.lightSecondary")),
-  danger: __spreadValues$m({
-    variant: "buttons.primary",
-    "&:focus, &:focus-visible": {}
-  }, getColorsAndStatesByPath("buttons.danger")),
-  "danger-sm": __spreadValues$m({
-    variant: "buttons.danger"
-  }, smallButton),
-  warning: __spreadValues$m({
-    variant: "buttons.primary",
-    "&:focus, &:focus-visible": {}
-  }, getColorsAndStatesByPath("buttons.warning")),
-  "warning-sm": __spreadValues$m({
-    variant: "buttons.warning"
-  }, smallButton),
-  close: __spreadValues$m({
-    cursor: "pointer",
-    ml: "auto",
-    mr: "2",
-    borderRadius: "buttons"
-  }, getColorsAndStatesByPath("buttons.close")),
-  accordion: {
-    variant: "buttons.primary",
-    "&:focus, &:focus-visible": {},
-    cursor: "pointer",
-    m: spacing(0),
-    py: responsive$1({ 0: 3, 4: 4 }),
-    px: responsive$1({ 0: 5, 4: 6 }),
-    width: "100%",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    borderRadius: "buttons",
-    textAlign: "left",
-    fontFamily: "heading",
-    fontSize: "text.default",
-    textDecoration: "none",
-    textTransform: "none",
-    fontWeight: "bold",
-    border: "none",
-    transition: "background-color 300ms ease-out, color 300ms ease-out",
-    userSelect: "text",
-    "&, *": getColorsAndStatesByPath("buttons.accordion"),
-    "h2.toggleAccordionElementLabel": {
-      variant: "text.default",
-      color: "inherit",
-      margin: 0,
-      wordBreak: "break-word"
-    }
-  },
-  "accordion-primary": __spreadValues$m({
-    variant: "buttons.accordion",
-    border: "none"
-  }, getColorsAndStatesByPath("buttons.accordionPrimary")),
-  icon: __spreadProps$d(__spreadValues$m({
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    p: spacing(0),
-    m: spacing(0),
-    bg: "secondary",
-    cursor: "pointer",
-    transition: "background-color 300ms ease-out, color 300ms ease-out",
-    borderRadius: "buttons",
-    border: "none",
-    color: "inherit"
-  }, getColorsAndStatesByPath("buttons.icon")), {
-    "&.isToggled": __spreadValues$m({}, getColorsAndStatesByPath("buttons.iconToggled"))
-  }),
-  "icon-primary": __spreadValues$m({
-    variant: "buttons.icon"
-  }, getColorsAndStatesByPath("buttons.iconPrimary")),
-  "icon-outline": __spreadValues$m({
-    variant: "buttons.icon",
-    bg: "white",
-    border: "1px solid",
-    borderRadius: "4px"
-  }, getColorsAndStatesByPath("buttons.iconOutline")),
-  "icon-outline-danger": __spreadValues$m({
-    variant: "buttons.icon",
-    border: "1px solid"
-  }, getColorsAndStatesByPath("buttons.outlineDanger")),
-  "icon-only": __spreadValues$m({
-    variant: "buttons.icon"
-  }, getColorsAndStatesByPath("buttons.iconOnly")),
-  link: __spreadValues$m({
-    variant: "inherit",
-    width: "auto",
-    border: "none",
-    background: "transparent",
-    textDecoration: "underline",
-    px: 2,
-    py: 1,
-    borderRadius: "buttons",
-    cursor: "pointer",
-    textTransform: "none",
-    transition: "background-color 300ms ease-out, color 300ms ease-out"
-  }, getColorsAndStatesByPath("buttons.link")),
-  "link-sm": __spreadValues$m({
-    variant: "buttons.link"
-  }, smallButton),
-  outline: __spreadValues$m({
-    variant: "buttons.primary",
-    borderWidth: "2px",
-    borderStyle: "solid",
-    borderRadius: "buttons",
-    "&:focus, &:focus-visible": {}
-  }, getColorsAndStatesByPath("buttons.outline", {
-    states: {
-      active: false,
-      checked: false,
-      disabled: false,
-      focus: false,
-      hover: false,
-      readonly: false,
-      selected: false
-    }
-  })),
-  "outline-sm": __spreadValues$m({
-    variant: "buttons.outline"
-  }, smallButton),
-  "transparent-sm": __spreadValues$m({
-    variant: "buttons.outline",
-    "&:focus, &:focus-visible": {},
-    bg: "transparent",
-    color: "inherit",
-    border: "none",
-    font: "inherit",
-    textTransform: "inherit"
-  }, smallButton),
-  "outline-danger": __spreadValues$m({
-    variant: "buttons.outline",
-    "&:focus, &:focus-visible": {}
-  }, getColorsAndStatesByPath("buttons.outlineDanger")),
-  "outline-danger-sm": __spreadValues$m({
-    variant: "buttons.outline-danger"
-  }, smallButton),
-  "outline-warning": __spreadValues$m({
-    variant: "buttons.outline",
-    "&:focus, &:focus-visible": {}
-  }, getColorsAndStatesByPath("buttons.outlineWarning")),
-  "outline-warning-sm": __spreadValues$m({
-    variant: "buttons.outline-warning"
-  }, smallButton),
-  "outline-extended": {
-    variant: "buttons.outline",
-    gridColumnStart: 1,
-    gridColumnEnd: 3,
-    width: "100%"
-  },
-  "outline-danger-extended": {
-    variant: "buttons.outline-danger",
-    gridColumnStart: 1,
-    gridColumnEnd: 3,
-    width: "100%"
-  },
-  "primary-extended": {
-    variant: "buttons.primary",
-    "&:focus, &:focus-visible": {},
-    gridColumnStart: 1,
-    gridColumnEnd: 3,
-    width: "100%"
-  },
-  query: {
-    extended: {
-      variant: "buttons.outline",
-      "&:focus, &:focus-visible": {},
-      gridColumnStart: 1,
-      gridColumnEnd: 3
-    }
-  },
-  tableAccordion: __spreadValues$m({
-    variant: "buttons.accordion",
-    fontSize: "text.default",
-    p: spacing(3),
-    wordBreak: "keep-all",
-    a: {
-      color: "background"
-    }
-  }, getColorsAndStatesByPath("buttons.tableAccordion")),
-  tableHeader: __spreadValues$m({
-    variant: "buttons.tableAccordion",
-    alignItems: "center",
-    justifyContent: "center",
-    height: "100%",
-    border: "none",
-    svg: {
-      ml: spacing(2)
-    }
-  }, getColorsAndStatesByPath("buttons.tableHeader")),
-  paper: __spreadValues$m({
-    variant: "buttons.primary",
-    borderWidth: "2px",
-    borderStyle: "solid",
-    borderRadius: "buttons"
-  }, getColorsAndStatesByPath("buttons.paper")),
-  "paper-sm": __spreadValues$m(__spreadValues$m({
-    variant: "buttons.primary",
-    borderWidth: "2px",
-    borderStyle: "solid",
-    borderRadius: "buttons"
-  }, getColorsAndStatesByPath("buttons.paper")), smallButton)
-};
-
-const text = {
-  default: {
-    color: "palette.text.primary",
-    fontFamily: "body",
-    fontWeight: "body",
-    fontSize: 16,
-    m: spacing(0),
-    width: "100%"
-  },
-  title: {
-    letterSpacing: "heading",
-    wordBreak: "normal",
-    color: "title",
-    fontFamily: "heading",
-    lineHeight: "heading",
-    fontWeight: "heading"
-  }
-};
-
-const transitions = {
-  "@keyframes growHorizontal": {
-    from: { transform: "scaleX(0)" },
-    to: { transform: "scaleY(100%)" }
-  },
-  ".hamburguerMenu": { display: "none" },
-  ".hamburguerMenu-enter,\n.hamburguerMenu-appear": {
-    display: "block",
-    transform: "scale(0.7)",
-    opacity: 0
-  },
-  ".hamburguerMenu-enter-active,\n.hamburguerMenu-appear-active": {
-    transform: "translateX(0)",
-    transition: "opacity 150ms, transform 150ms",
-    transformOrigin: "right top",
-    opacity: 1
-  },
-  ".hamburguerMenu-enter-done,\n.hamburguerMenu-appear-done": {
-    display: "block"
-  },
-  ".hamburguerMenu-exit": {
-    display: "block",
-    transform: "scale(1)",
-    opacity: 1
-  },
-  ".hamburguerMenu-exit-active": {
-    transform: "scale(0.7) translateX(0)",
-    transition: "opacity 150ms, transform 150ms",
-    display: "block",
-    opacity: 0,
-    transformOrigin: "right top"
-  },
-  ".hamburguerMenu-exit-done": { display: "none" },
-  ".modal-enter,\n.modal-appear": { opacity: 0, transform: "scale(0.8)" },
-  ".modal-enter-active,\n.modal-appear-active": {
-    opacity: 1,
-    transform: "translateX(0)",
-    transition: "opacity 150ms, transform 150ms",
-    transitionDelay: "0"
-  },
-  ".modal-exit": { opacity: 0 },
-  ".modal-exit-done": { opacity: 0, display: "none" },
-  ".modal-exit-active": {
-    opacity: 0,
-    transform: "scale(100)",
-    transition: "opacity 150ms, transform 150ms",
-    transitionDelay: "0"
-  },
-  ".overlayAnimation-enter .overlayAnimation:not(.not-released),\n.overlayAnimation-appear .overlayAnimation:not(.not-released)": {
-    opacity: 0
-  },
-  ".overlayAnimation-enter-active .overlayAnimation:not(.not-released),\n.overlayAnimation-appear-active .overlayAnimation:not(.not-released)": {
-    opacity: 1,
-    transition: "opacity 150ms"
-  },
-  ".overlayAnimation-exit": { opacity: 1 },
-  ".overlayAnimation-exit-active": { opacity: 0, transition: "opacity 150ms" },
-  ".fromRight-enter,\n.fromRight-appear": { transform: "translateX(550px)" },
-  ".fromRight-enter-active,\n.fromRight-appear-active": {
-    transition: "transform 150ms",
-    transform: "translateX(0)"
-  },
-  ".fromRight-exit": { transform: "translateX(0)" },
-  ".fromRight-exit-active": {
-    transition: "transform 150ms",
-    transform: "translateX(550px)"
-  },
-  ".notification-enter,\n.notification-appear": {
-    opacity: 0,
-    transform: "scale(0.8)"
-  },
-  ".notification-enter-active,\n.notification-appear-active": {
-    opacity: 1,
-    transform: "translateX(0)",
-    transition: "opacity 150ms, transform 150ms",
-    transitionDelay: "0"
-  },
-  ".notification-exit": { opacity: 1 },
-  ".notification-exit-active": {
-    opacity: 0,
-    transform: "scale(0.8)",
-    transition: "opacity 150ms, transform 150ms",
-    transitionDelay: "0"
-  }
-};
-
-const menu = {
-  ".szh-menu": (theme) => ({
-    margin: "0",
-    padding: "0.5rem 0",
-    listStyle: "none",
-    boxSizing: "border-box",
-    width: "max-content",
-    zIndex: "contextMenu",
-    border: "1px solid  #656565",
-    backgroundColor: theme.palette.background.paper,
-    userSelect: "none",
-    color: theme.palette.text.primary,
-    // 'var(--theme-ui-colors-palette-text-primary)',
-    borderRadius: "0.25rem",
-    boxShadow: "0 3px 7px rgba(0, 0, 0, 0.133), 0 0.6px 2px rgba(0, 0, 0, 0.1)",
-    minWidth: "10rem"
-  }),
-  ".szh-menu__arrow": (theme) => ({
-    boxSizing: "border-box",
-    width: "0.75rem",
-    height: "0.75rem",
-    backgroundColor: theme.palette.background.paper,
-    border: "1px solid transparent",
-    borderLeftColor: "rgba(0, 0, 0, 0.1)",
-    borderTopColor: "rgba(0, 0, 0, 0.1)",
-    zIndex: -1
-  }),
-  ".szh-menu__arrow--dir-left": {
-    right: "-0.375rem",
-    transform: "translateY(-50%) rotate(135deg)"
-  },
-  ".szh-menu__arrow--dir-right": {
-    left: "-0.375rem",
-    transform: "translateY(-50%) rotate(-45deg)"
-  },
-  ".szh-menu__arrow--dir-top": {
-    bottom: "-0.375rem",
-    transform: "translateX(-50%) rotate(-135deg)"
-  },
-  ".szh-menu__arrow--dir-bottom": {
-    top: "-0.375rem",
-    transform: "translateX(-50%) rotate(45deg)"
-  },
-  ".szh-menu__item": {
-    cursor: "pointer",
-    display: "flex",
-    alignItems: "center",
-    position: "relative",
-    padding: "0.375rem 1.5rem",
-    paddingLeft: "2.2rem",
-    "&.withIcon": {
-      padding: "0px"
-    }
-  },
-  ".szh-menu__item--hover": (theme) => ({
-    backgroundColor: theme.palette.background.default
-  }),
-  ".szh-menu__item--focusable": {
-    cursor: "default"
-  },
-  ".szh-menu__item--disabled": {
-    cursor: "default",
-    color: "#ccc"
-  },
-  ".szh-menu__group": { boxSizing: "border-box" },
-  ".szh-menu__radio-group": {
-    margin: "0",
-    padding: "0",
-    listStyle: "none"
-  },
-  ".szh-menu__divider": {
-    height: "1px",
-    margin: "0.5rem 0",
-    backgroundColor: "rgba(0, 0, 0, 0.12)"
-  },
-  ".szh-menu-button": { boxSizing: "border-box" },
-  ".szh-menu-container--itemTransition .szh-menu__item": {
-    transitionProperty: "background-color, color",
-    transitionDuration: "0.15s",
-    transitionTimingFunction: "ease-in-out"
-  },
-  ".szh-menu__item--type-radio": { paddingLeft: "2.2rem" },
-  ".szh-menu__item--type-radio::before": {
-    content: '"\u25CB"',
-    position: "absolute",
-    left: "0.8rem",
-    top: "0.55rem",
-    fontSize: "0.8rem"
-  },
-  ".szh-menu__item--type-radio.szh-menu__item--checked::before": {
-    content: '"\u25CF"'
-  },
-  ".szh-menu__item--type-checkbox": { paddingLeft: "2.2rem" },
-  ".szh-menu__item--type-checkbox::before": {
-    position: "absolute",
-    left: "0.8rem"
-  },
-  ".szh-menu__item--type-checkbox.szh-menu__item--checked::before": {
-    content: '"\u2714"'
-  },
-  ".szh-menu__submenu>.szh-menu__item": { paddingRight: "2.5rem" },
-  ".szh-menu__submenu>.szh-menu__item::after": {
-    content: '"\u276F"',
-    position: "absolute",
-    right: "1rem"
-  },
-  ".szh-menu__header": {
-    color: "#888",
-    fontSize: "0.8rem",
-    padding: "0.2rem 1.5rem",
-    textTransform: "uppercase"
-  },
-  ".szh-menu__item--anchor,\n.szh-menu__item--anchor:hover,\n.szh-menu__item--anchor:focus,\n.szh-menu__item--anchor:active": (theme) => ({
-    paddingLeft: "2.2rem",
-    textDecoration: "none",
-    color: theme.palette.text.primary
-  })
-};
-
-var __defProp$l = Object.defineProperty;
-var __defProps$c = Object.defineProperties;
-var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
-var __hasOwnProp$l = Object.prototype.hasOwnProperty;
-var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$l = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$l.call(b, prop))
-      __defNormalProp$l(a, prop, b[prop]);
-  if (__getOwnPropSymbols$l)
-    for (var prop of __getOwnPropSymbols$l(b)) {
-      if (__propIsEnum$l.call(b, prop))
-        __defNormalProp$l(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
-const root = __spreadValues$l(__spreadProps$c(__spreadValues$l({}, menu), {
-  height: "100%",
-  "*": {
-    fontFamily: "body",
-    fontWeight: "body",
-    code: {
-      fontFamily: "monospace"
-    },
-    "&:focus": focusOutline
-  },
-  body: {
-    minHeight: "100vh"
-  },
-  h1: {
-    fontSize: responsive$1({ 0: 26, 3: 32 })
-  },
-  h2: {
-    fontSize: responsive$1({ 0: 22, 3: 28 })
-  },
-  h3: {
-    fontSize: responsive$1({ 0: 19, 3: 25 })
-  },
-  h4: {
-    fontSize: responsive$1({ 0: 18, 3: 22 })
-  },
-  h5: {
-    fontSize: responsive$1({ 0: 18, 3: 22 })
-  },
-  h6: {
-    fontSize: responsive$1({ 0: 17, 3: 17 })
-  },
-  "h1,h2,h3,h4,h5,h6": {
-    letterSpacing: "heading",
-    lineHeight: "heading",
-    variant: "text.title"
-  },
-  "*:not(h1, h2, h3, h4, h5, h6, code)": {
-    fontFamily: "body",
-    fontSize: 16,
-    fontWeight: "body",
-    letterSpacing: "body",
-    lineHeight: "body"
-  },
-  a: {
-    textDecoration: "underline"
-  },
-  "textarea,a": {
-    transition: "color 200ms ease-out",
-    ":focus": __spreadValues$l({}, focusOutline),
-    ":focus-visible": __spreadValues$l({}, focusOutline)
-  },
-  "*:focus": focusOutline,
-  ul: {
-    listStyle: "none",
-    listStyleType: "none",
-    margin: 0,
-    padding: 0
-  },
-  abbr: {
-    "&.required": {
-      textDecoration: "none",
-      border: "none",
-      mx: 1,
-      alignSelf: "baseline",
-      fontWeight: "bold",
-      color: "danger"
-    }
-  },
-  table: {
-    borderCollapse: "separate",
-    borderSpacing: 0
-  },
-  "& label": {
-    display: "flex",
-    "& > span": {
-      mb: spacing(1),
-      fontWeight: "bold"
-    },
-    "&.required": {
-      position: "relative",
-      "&::before": {
-        color: "danger",
-        position: "absolute",
-        content: '"*"',
-        top: 0,
-        left: "-10px"
-      },
-      "*:invalid": {
-        borderColor: "danger"
-      }
-    }
-  },
-  ".bold": {
-    fontWeight: "bold"
-  },
-  ".light": {
-    fontWeight: "light"
-  },
-  ".Left": {
-    textAlign: "left !important"
-  },
-  ".Center": {
-    textAlign: "center !important"
-  },
-  ".Right": {
-    textAlign: "right !important"
-  },
-  ".Justify": {
-    textAlign: "justify !important"
-  },
-  ".Bottom": {
-    verticalAlign: "bottom !important"
-  },
-  ".Middle": {
-    verticalAlign: "middle !important"
-  },
-  ".Top": {
-    verticalAlign: "top !important"
-  },
-  ".hidden": {
-    display: "none"
-  },
-  ".field__withError": {
-    borderLeftStyle: "solid",
-    borderLeftWidth: "4px",
-    borderLeftColor: "danger"
-  },
-  ".field__touched": {
-    borderStyle: "solid",
-    borderWidth: "1px",
-    borderColor: "touchedBorderColor"
-  },
-  ".noPadding": {
-    padding: 0
-  }
-}), transitions);
-
-const baseTheme = () => {
-  return {
-    alerts,
-    breakpoints: [
-      "0px",
-      "250px",
-      "500px",
-      "700px",
-      "1000px",
-      "1260px",
-      "1580px"
-    ],
-    buttons,
-    colors: {},
-    fonts: {
-      body: '"InterVariable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif, Roboto',
-      heading: "inherit",
-      monospace: "Menlo, monospace"
-    },
-    fontSizes: Array(60).fill(1).map((_, i) => {
-      return i;
-    }),
-    forms: {},
-    layout: {
-      root
-    },
-    lineHeights: {
-      body: 1.5,
-      heading: 1.125
-    },
-    letterSpacings: {
-      body: "0.01em",
-      heading: "-0.015em"
-    },
-    radii: {
-      alerts: 0,
-      buttons: 0,
-      default: 0,
-      panel: "7px",
-      modals: "7px"
-    },
-    shadows: {
-      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)",
-      desktop: {
-        windowElement: "rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px"
-      }
-    },
-    space: [0, 2, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96, 112, 128],
-    sizes: {
-      // Layout
-      applicationMenu: "350px",
-      floatingNotifications: "min(550px, calc(100vw - 30px))",
-      root: "992px",
-      mainImage: "64px",
-      twoColumns: "calc(992px + 350px)",
-      twoColumnsCentered: "calc(992px + 350px + 16px)",
-      // Icons
-      iconXs: "12px",
-      iconSm: "16px",
-      iconMd: "22px",
-      iconLg: "32px",
-      iconXl: "48px"
-    },
-    text,
-    zIndices: {
-      stickyElements: 600,
-      menu: 1e3,
-      maximizedTables: 1100,
-      modal: 1200,
-      tooltip: 1400,
-      notifications: 1600,
-      contextMenu: 1800
-    },
-    useRootStyles: true
-  };
-};
-
-var __defProp$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$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$k({
-  display: "inline-flex",
-  borderRadius: "default",
-  flexBasis: "32px",
-  flexShrink: 0,
-  width: "32px",
-  height: "32px",
-  alignItems: "center",
-  justifyContent: "center",
-  p: "3px",
-  border: "1px solid",
-  svg: {
-    width: "20px"
-  }
-}, getColorsAndStatesByPath("form.fields", {
-  states: {
-    active: false,
-    hover: false,
-    focus: false,
-    path: false
-  }
-}));
-
-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$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$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
-const checkbox = __spreadProps$b(__spreadValues$j({
-  borderRadius: "default"
-}, getColorsAndStatesByPath("form.fields", {
-  states: {
-    active: false,
-    focus: false,
-    hover: false
-  }
-})), {
-  backgroundColor: "unset",
-  alignItems: "center",
-  "&.nativeCheckbox": {
-    appearance: "none",
-    width: "25px",
-    height: "25px",
-    border: "solid 1px #cccccc",
-    marginRight: "8px",
-    position: "relative",
-    cursor: "pointer",
-    "&:checked::before": {
-      content: '"\u2713"',
-      color: "palette.text.primary",
-      position: "absolute",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      fontSize: "larger",
-      fontWeight: "bolder",
-      borderRadius: "5px",
-      cursor: "pointer"
-    },
-    "&:indeterminate::before": {
-      content: '"-"',
-      color: "palette.text.primary",
-      position: "absolute",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      top: "-1px",
-      left: 0,
-      right: 0,
-      bottom: 0,
-      fontSize: "xx-large",
-      fontWeight: "600",
-      borderRadius: "5px",
-      cursor: "pointer"
-    }
-  }
-});
-
-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$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$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
-const dateInput = __spreadProps$a(__spreadValues$i({
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "stretch",
-  justifyContent: "stretch",
-  gap: spacing(2),
-  width: "100%",
-  "&.readOnly": {
-    input: {
-      color: "Text.fields",
-      bg: "Background.fields"
-    }
-  },
-  ".iconInput": {
-    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$i({
-    position: "absolute",
-    right: "59px",
-    padding: 0,
-    top: "calc(50% - 10px)",
-    margin: 0,
-    marginRight: 0,
-    borderRadius: "100%",
-    width: "20px",
-    height: "20px"
-  }, getColorsAndStatesByPath("buttons.icon-outline")),
-  input: {
-    flexShrink: 1
-  },
-  "& > div": {
-    display: "flex",
-    gap: spacing(2),
-    flexShrink: 0,
-    width: "auto",
-    maxWidth: "100%",
-    minWidth: 0,
-    button: {
-      width: "45px",
-      flexShrink: 0
-    }
-  }
-}, getColorsAndStatesByPath("form.fields", {
-  states: {
-    hover: false,
-    active: false,
-    focus: false
-  }
-})), {
-  backgroundColor: void 0
-});
-
-var __defProp$h = Object.defineProperty;
-var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
-var __hasOwnProp$h = Object.prototype.hasOwnProperty;
-var __propIsEnum$h = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$h = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$h.call(b, prop))
-      __defNormalProp$h(a, prop, b[prop]);
-  if (__getOwnPropSymbols$h)
-    for (var prop of __getOwnPropSymbols$h(b)) {
-      if (__propIsEnum$h.call(b, prop))
-        __defNormalProp$h(a, prop, b[prop]);
-    }
-  return a;
-};
-const iconInput = {
-  display: "flex",
-  gap: spacing(1),
-  justifyContent: "stretch",
-  alignItems: "center",
-  "&.readOnly": {
-    input: __spreadValues$h({}, getColorsByPath("form.fields"))
-  },
-  input: {
-    height: "50px",
-    width: "100%"
-  },
-  button: {
-    display: "flex",
-    width: "45px",
-    flexShrink: 0,
-    height: "50px"
-  }
-};
-
-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$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$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
-const input = __spreadProps$9(__spreadValues$g({
-  variant: "text.default",
-  border: "1px solid",
-  borderRadius: "default",
-  padding: responsive$1({ 0: 3, 3: 4 }),
-  "::placeholder": {
-    color: "#b0b0b0"
-  }
-}, getColorsAndStatesByPath("form.fields", {
-  states: {
-    active: false,
-    hover: false,
-    focus: false
-  }
-})), {
-  material: {
-    input: {
-      borderLeft: "none",
-      borderRight: "none",
-      borderTop: "none",
-      borderBottomColor: "palette.border.section",
-      "& + .input__underline": {
-        transform: "scale(1)"
-      },
-      "&:focus": {
-        outline: "none",
-        "~::after": {
-          animationName: "growHorizontal",
-          animationDuration: "150ms",
-          animationTimingFunction: "ease-out",
-          content: '""',
-          display: "block",
-          height: "0",
-          outlineColor: "palette.primary.main",
-          outlineStyle: "solid",
-          outlineWidth: "1.5px",
-          outlineOffset: 0,
-          position: "fixed",
-          transformOrigin: "center center",
-          width: "100%"
-        }
-      }
-    }
-  }
-});
-
-const label = {
-  variant: "text.default",
-  alignItems: "center",
-  width: "auto",
-  textTransform: "none",
-  cursor: "pointer",
-  "&:not(.radio-label)": {
-    fontWeight: "bold"
-  },
-  "&.required": {
-    position: "relative",
-    "&::before": {
-      color: "danger",
-      position: "absolute",
-      content: '"*"',
-      top: 0,
-      left: "-10px"
-    }
-  },
-  "&:last-of-type": {
-    "input, textarea, select": {
-      mb: spacing(0)
-    }
-  }
-};
-
-var __defProp$f = Object.defineProperty;
-var __defProps$8 = Object.defineProperties;
-var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
-var __hasOwnProp$f = Object.prototype.hasOwnProperty;
-var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$f = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$f.call(b, prop))
-      __defNormalProp$f(a, prop, b[prop]);
-  if (__getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(b)) {
-      if (__propIsEnum$f.call(b, prop))
-        __defNormalProp$f(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
-const radio = __spreadProps$8(__spreadValues$f({
-  width: "32px",
-  height: "32px",
-  input: {
-    height: "32px !important"
-  }
-}, getColorsAndStatesByPath("form.radio")), {
-  path: {
-    fill: "inherit"
-  }
-});
-
-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$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$e({
-  variant: "text.default",
-  display: "inline-block",
-  fontFamily: "body",
-  p: spacing(4),
-  pr: 7,
-  borderRadius: "default",
-  width: "100%",
-  maxWidth: "100%"
-}, getColorsAndStatesByPath("form.fields", {
-  states: {
-    active: false,
-    hover: false,
-    focus: false
-  }
-}));
-
-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$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$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
-function selectMultiple(theme) {
-  return __spreadValues$d({
-    variant: "text.default",
-    height: "100%",
-    padding: "4px",
-    borderRadius: "default",
-    border: "1px solid",
-    width: "100%",
-    transition: "background-color 100ms ease-out, color 100ms ease-out",
-    overflow: "auto",
-    option: __spreadProps$7(__spreadValues$d({
-      padding: 2
-    }, getSelectedColors(theme.palette)), {
-      "&:checked": {
-        backgroundColor: theme.palette.getColor(
-          theme.palette.background.paper,
-          "selected"
-        ),
-        color: theme.palette.getContrastText(
-          theme.palette.getColor(theme.palette.background.paper, "selected")
-        )
-      }
-    }),
-    "+ svg": {
-      display: "none"
-    }
-  }, theme.palette.getStatesFromPath("form.fields", {
-    states: {
-      active: false,
-      hover: false,
-      focus: false
-    }
-  }));
-}
-
-const Switch = {
-  "+ span": {
-    fontSize: 14,
-    fontWeight: "normal",
-    wordBreak: "break-all"
-  },
-  backgroundColor: "form.fields.checked.borderColor"
-};
-
-const textarea = {
-  "&, & textarea": {
-    height: "100%",
-    minHeight: "130px",
-    resize: "vertical"
-  },
-  textarea: {
-    variant: "forms.input"
-  }
-};
-
-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$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$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
-const deletableInput = {
-  border: "1px solid",
-  borderColor: "palette.border.field",
-  display: "inline-block",
-  position: "relative",
-  pr: "45px",
-  ".deletableInput__input": {
-    border: "none"
-  },
-  ".deletableInput__deleteButton": __spreadValues$c({
-    height: "100%",
-    outlineOffset: "-2px",
-    position: "absolute",
-    right: 0,
-    top: 0,
-    width: "45px"
-  }, getColorsAndStatesByPath("buttons.deletableInputButton", {
-    states: { path: true }
-  })),
-  "&:focus-within:not(.asMaterial)": __spreadProps$6(__spreadValues$c({}, focusOutline), {
-    ".deletableInput__input:focus": {
-      outline: "none"
-    },
-    ".deletableInput__deleteButton:focus": {
-      outline: "none"
-    }
-  }),
-  "&.asMaterial": {
-    borderLeft: "none",
-    borderRight: "none",
-    borderTop: "none",
-    borderBottomColor: "palette.border.section",
-    "& + .input__underline": {
-      transform: "scale(1)"
-    },
-    ".deletableInput__input:focus": {
-      outline: "none",
-      "~.input__underline::after": {
-        animationName: "growHorizontal",
-        animationDuration: "150ms",
-        animationTimingFunction: "ease-out",
-        content: '""',
-        display: "block",
-        height: "0",
-        outlineColor: "palette.primary.main",
-        outlineStyle: "solid",
-        outlineWidth: "1.5px",
-        outlineOffset: 0,
-        position: "absolute",
-        transformOrigin: "center center",
-        left: 0,
-        right: 0
-      }
-    }
-  }
-};
-
-const forms$1 = (theme) => {
-  return {
-    checkbox,
-    customCheckbox,
-    dateInput,
-    deletableInput,
-    iconInput,
-    input,
-    label,
-    radio,
-    select,
-    selectMultiple: selectMultiple(theme),
-    switch: Switch,
-    textarea,
-    /* PREPEND HERE */
-    'input[type="date"]': {
-      variant: "forms.input"
-    }
-  };
-};
-
-const overlay = {
-  overlay: {
-    position: "fixed",
-    overflow: "hidden",
-    top: "0",
-    right: "0",
-    bottom: "0",
-    left: "0",
-    width: "100vw",
-    height: "100vh",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: `palette.background.overlay`,
-    zIndex: "modal",
-    "&:not(.screenLock) .modal-enter-done": {
-      boxShadow: "modals"
-    }
-  },
-  "overlay--stretch": {
-    variant: "layout.common.modals.overlay",
-    alignItems: responsive$1({ 0: "stretch", 2: "center" })
-  }
-};
-
-const apiaApi = {
-  display: "flex",
-  width: "100%",
-  ".handler__form": {
-    display: "flex",
-    flexDirection: "column",
-    width: "100%",
-    gap: spacing(6),
-    ".handler__form__elements": {
-      flexShrink: 1,
-      overflow: "auto"
-    },
-    ".handler__form__elements__section__content": {
-      display: "flex",
-      flexDirection: "column",
-      wordBreak: "break-word",
-      background: "palette.background.paper",
-      p: 0,
-      gap: spacing(3)
-    },
-    ".content .handler__form__elements__section__content": {
-      border: "1px solid",
-      borderColor: "palette.border.section",
-      borderTop: "none",
-      p: spacing(6)
-    },
-    ".handler__form__buttons": {
-      display: "flex",
-      flexDirection: "row",
-      justifyContent: "end",
-      p: 0,
-      gap: "0px",
-      position: "sticky",
-      bottom: "-19px",
-      background: "palette.background.paper",
-      height: "80px",
-      alignItems: "center",
-      button: {
-        height: "50px"
-      }
-    },
-    ".radio": {
-      display: "flex",
-      flexDirection: "column",
-      flexWrap: "wrap",
-      listStyle: "none",
-      variant: "layout.execution.form.fields.radio"
-    },
-    ".handler__checkbox, .handler__radio": {
-      "label span": {
-        fontWeight: "normal"
-      }
-    },
-    ".checkbox": {
-      flexDirection: "row-reverse",
-      alignItems: "center",
-      justifyContent: "start",
-      gap: spacing(4),
-      ".semicolon": {
-        display: "none"
-      },
-      input: {
-        width: "100%"
-      }
-    },
-    ".handler__hidden": {
-      display: "none"
-    },
-    "label.select > div": {
-      width: "100%"
-    },
-    ".spacer": {
-      height: spacing(7)
-    }
-  },
-  ".progressBox": {
-    p: spacing(5),
-    pt: spacing(0)
-  }
-  /* PREPEND HERE */
-};
-
-const confirm = {
-  display: "flex",
-  flexDirection: "column",
-  gap: spacing$1(6),
-  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 = {
-  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$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$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-const modals = __spreadProps$5(__spreadValues$b({
-  apiaApi,
-  buttonsBar,
-  confirm
-}, overlay), {
-  main: __spreadValues$b({
-    boxShadow: "modals",
-    borderRadius: "modals",
-    zIndex: "modal",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyItems: "center",
-    maxHeight: "100vh",
-    maxWidth: "calc(100vw - 10px)",
-    resize: "both",
-    overflow: "auto",
-    border: "1px solid",
-    gap: "0px !important",
-    "&>div": {
-      overflow: "hidden",
-      flexGrow: 0,
-      flexShrink: 0,
-      p: "3px",
-      width: "100%"
-    },
-    "&>div.modal__header": {
-      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"
-      }
-    },
-    "&>div.modal__content": {
-      overflow: "auto",
-      width: "100%",
-      flexBasis: "100%",
-      flexDirection: "column",
-      flexShrink: 1,
-      display: "flex",
-      justifyContent: "stretch",
-      alignItems: "stretch",
-      p: "20px"
-    },
-    "&>div.modal__content>form": {
-      overflow: "auto",
-      width: "100%",
-      flexBasis: "100%",
-      flexShrink: 1,
-      display: "flex",
-      justifyContent: "stretch",
-      alignItems: "stretch"
-    }
-  }, getColorsByPath("modal")),
-  finder: {
-    variant: "layout.common.modals.main",
-    height: responsive$1({ 0: "100vh", 3: "80vh" }),
-    width: responsive$1({ 0: "95vw", 3: "80vw", 4: "70vw" }),
-    ".modal__content": {
-      overflow: "hidden",
-      ".confirm__content": {
-        overflow: "hidden",
-        ".finder__content": {
-          display: "flex",
-          alignItems: "stretch"
-        },
-        ".selection__keyHandler": {
-          overflow: "hidden",
-          height: "100%",
-          ".responsiveTable__wrapper": {
-            height: "100%",
-            border: "1px solid",
-            borderColor: "palette.border.article",
-            backgroundColor: "palette.gray.900"
-          }
-        }
-      }
-    }
-  },
-  sm: {
-    variant: "layout.common.modals.main",
-    maxWidth: "min(350px, calc(100vw - 10px))"
-  },
-  md: {
-    variant: "layout.common.modals.main",
-    maxWidth: "min(500px, calc(100vw - 10px))"
-  },
-  "md-fixed": {
-    variant: "layout.common.modals.main",
-    width: "min(500px, calc(100vw - 10px))",
-    maxHeight: responsive$1({ 0: "95vh", 2: "80vh" })
-  },
-  lg: {
-    variant: "layout.common.modals.main",
-    maxWidth: "min(640px, calc(100vw - 10px))"
-  },
-  "lg-fixed": {
-    variant: "layout.common.modals.main",
-    width: "640px",
-    height: "60vh"
-  },
-  xl: {
-    variant: "layout.common.modals.main",
-    maxWidth: "min(730px, calc(100vw - 10px))"
-  },
-  "xl-fixed": {
-    variant: "layout.common.modals.main",
-    width: responsive$1({ 0: "95vw", 2: "60vw" }),
-    height: responsive$1({ 0: "95vh", 2: "80vh" })
-  },
-  xxl: {
-    variant: "layout.common.modals.main",
-    width: responsive$1({ 0: "95vw", 2: "80vw" }),
-    maxHeight: responsive$1({ 0: "95vh", 2: "80vh" })
-  },
-  "xxl-fixed": {
-    variant: "layout.common.modals.main",
-    width: responsive$1({ 0: "95vw", 2: "80vw" }),
-    height: responsive$1({ 0: "95vh", 2: "80vh" })
-  },
-  xxxl: {
-    variant: "layout.common.modals.main",
-    width: responsive$1({ 0: "95vw", 2: "95vw" }),
-    maxHeight: responsive$1({ 0: "95vh", 2: "95vh" })
-  },
-  "xxxl-fixed": {
-    variant: "layout.common.modals.main",
-    width: responsive$1({ 0: "95vw", 2: "95vw" }),
-    height: responsive$1({ 0: "95vh", 2: "95vh" })
-  },
-  flex: {
-    variant: "layout.common.modals.main",
-    maxWidth: "95vw",
-    maxHeight: "95vh",
-    ".modal__content": {
-      p: spacing(2),
-      overflow: "auto"
-    }
-  },
-  cal: {
-    variant: "layout.common.modals.sm",
-    width: "350px"
-  },
-  editGrid: {
-    variant: "layout.common.modals.main",
-    width: "root",
-    maxHeight: "90vh"
-  }
-  /* PREPEND HERE */
-});
-
-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$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$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$a({}, focusOutline)
-    },
-    '[data-focused="true"]:not(.row__separator__cell)': {
-      '&:not([data-editionmode="true"])': {
-        "&:focus, & > *:focus, *:focus-visible": __spreadProps$4(__spreadValues$a({}, focusOutline), {
-          "&.cell__download__document": {
-            outlineOffset: 0
-          }
-        })
-      },
-      '&[data-editionmode="true"]': {
-        "&:focus, *:focus, *:focus-visible": __spreadProps$4(__spreadValues$a({}, focusOutline), {
-          outlineStyle: "dotted",
-          outlineWidth: "6px",
-          outlineOffset: "-4px"
-        })
-      }
-    },
-    '[data-focused="true"].row__separator__cell': {
-      backgroundColor: "palette.secondary.main",
-      outline: "none"
-    }
-  };
-}
-
-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$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$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-const primary$4 = (theme) => {
-  return __spreadProps$3(__spreadValues$9({
-    variant: "colors.tables.primary",
-    width: "100%",
-    backgroundColor: "components.primaryTable.body.backgroundColor",
-    border: "1px solid",
-    borderColor: "components.primaryTable.borderColor",
-    borderCollapse: "separate",
-    borderSpacing: 0,
-    tableLayout: "fixed",
-    thead: {
-      zIndex: 1,
-      position: "sticky",
-      insetBlockStart: 0,
-      backgroundColor: "palette.background.paper",
-      "tr:not(.filtersRow):not(.responsiveTable__filters__row)": {
-        "th, td": __spreadProps$3(__spreadValues$9({
-          variant: "buttons.primary",
-          py: responsive$1({ 0: 3, 4: 4 }),
-          px: responsive$1({ 0: 3, 4: 4 }),
-          width: "breakWidth",
-          backgroundColor: "palette.primary.main",
-          borderColor: "palette.primary.dark",
-          borderRadius: 0,
-          borderStyle: "solid",
-          borderWidth: "1px",
-          color: "palette.primary.contrastText",
-          display: "table-cell",
-          verticalAlign: "center",
-          wordBreak: "break-word",
-          '&[role="presentation"]': {
-            display: "none"
-          }
-        }, theme.palette.getStatesFromPath("components.primaryTable.header")), {
-          "& *": {
-            color: "inherit"
-          },
-          ".headButton__label": {
-            textAlign: "left",
-            d: ""
-          },
-          ".headButton__resizer": {
-            width: "20px",
-            cursor: "ew-resize",
-            zIndex: 1e3,
-            position: "absolute",
-            right: "-10px",
-            height: "100%"
-          },
-          "&:last-of-type .headButton__resizer": {
-            right: "0px"
-          },
-          "&.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.primaryTable.body.backgroundColor",
-        boxShadow: "tableFilters",
-        "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.primaryTable.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$3(__spreadValues$9(__spreadProps$3(__spreadValues$9({
-        borderBottomWidth: "1px",
-        borderBottomStyle: "solid"
-      }, theme.palette.getColorsByPath("components.primaryTable.body")), {
-        "&:nth-of-type(2n)": {
-          backgroundColor: "components.primaryTable.body.evenRowsBackgroundColor"
-        },
-        "&.non-selectable": {
-          cursor: "not-allowed"
-        },
-        "&.hidden": {
-          display: "none"
-        },
-        "&.locked": {
-          background: "palette.gray.900",
-          td: {
-            borderColor: "palette.gray.850"
-          }
-        }
-      }), getSelectedColors(theme.palette)), {
-        "&.draggingRow": {
-          outline: "3px dotted",
-          outlineColor: "components.primaryTable.header.borderColor",
-          outlineOffset: "-3px",
-          "*": {
-            outline: "none !important"
-          }
-        },
-        borderColor: "components.primaryTable.body.borderColor",
-        ".rowStatesList": {
-          display: "flex",
-          gap: spacing(3),
-          alignItems: "center",
-          svg: {
-            width: "smallIcon",
-            height: "smallIcon",
-            cursor: "pointer"
-          }
-        },
-        td: {
-          verticalAlign: "top",
-          wordBreak: "break-word",
-          border: "1px solid",
-          borderColor: "components.primaryTable.body.borderColor",
-          "&.stickyColumn": {
-            position: "sticky",
-            left: 0,
-            backgroundColor: "components.primaryTable.body.backgroundColor"
-          },
-          ".moreInformationButton": {
-            width: "30px",
-            height: "30px",
-            padding: "3px",
-            border: "none",
-            background: "transparent"
-          }
-        }
-      }),
-      td: {
-        p: spacing(3)
-      },
-      ".responsiveTable__additionalInfoContainer": {
-        display: "grid",
-        gridTemplateColumns: responsive$1({
-          0: "repeat(2, 1fr)",
-          5: "repeat(4, 1fr)"
-        }),
-        columnGap: 3,
-        rowGap: 2
-      },
-      ".responsiveTable__additionalInfoContainer .responsiveTable__additionalInfoItem.separator": {
-        gridColumnStart: "1",
-        gridColumnEnd: "5",
-        borderBottom: "1px solid",
-        borderBottomColor: "palette.gray.700",
-        height: "auto"
-      }
-    },
-    ".editionMode": {
-      border: "3px solid",
-      borderColor: "components.primaryTable.header.borderColor",
-      borderWidth: "1.5px",
-      borderStyle: "dotted"
-    },
-    ".stateCell": {
-      width: "50px",
-      maxWidth: "50px",
-      minWidth: "50px",
-      textAlign: "center",
-      verticalAlign: "middle"
-    }
-  }, getSelectionStyles()), {
-    ".no__registers": {
-      py: 6,
-      minWidth: "200px"
-    },
-    ".requiredFilter__Column": {
-      fontWeight: "bold"
-    },
-    ".bold": {
-      fontWeight: "bold"
-    },
-    ".light": {
-      color: "#6a6a6a"
-    },
-    ".additionalInfo__cell, .stateCell": {
-      verticalAlign: "middle"
-    }
-  });
-};
-
-const information = {
-  width: "100%",
-  border: "1px solid",
-  borderColor: "primary",
-  borderCollapse: "collapse",
-  borderBottom: "none",
-  thead: {
-    tr: {
-      th: {
-        bg: "primary",
-        color: "white",
-        textAlign: "center",
-        fontWeight: "bold",
-        p: spacing(4)
-      }
-    }
-  },
-  tbody: {
-    tr: {
-      "td,th": {
-        borderColor: "muted",
-        borderBottom: "1px solid",
-        p: spacing(4)
-      },
-      "td:not(td:last-child),th:not(th:last-child)": {
-        borderRight: "1px solid"
-      },
-      th: {
-        textAlign: "left",
-        whiteSpace: "nowrap",
-        minWidth: "min-content",
-        width: 0
-      }
-    }
-  }
-};
-
-const accordion$1 = {
-  display: "flex",
-  flexDirection: "column",
-  gap: spacing(2),
-  ".responsiveTable__accordionElement__toggler": () => ({
-    variant: "buttons.outline",
-    borderWidth: "1px",
-    display: "flex",
-    gap: spacing(3),
-    alignItems: "stretch",
-    width: "100%",
-    px: 4,
-    py: 3,
-    "&:hover": {
-      h3: {
-        color: "palette.primary.contrastText"
-      }
-    },
-    ".accordionElement__toggler__checkbox": {
-      flexShrink: 0,
-      m: spacing(2)
-    },
-    ".accordionElement__toggler__button": {
-      flexGrow: 100,
-      display: "flex",
-      justifyContent: "space-between",
-      py: 2,
-      pr: spacing(2),
-      alignItems: "center",
-      ".accordionElement__toggler__label": {
-        flexGrow: 100,
-        m: spacing(0),
-        textAlign: "left",
-        fontSize: 16
-      },
-      ".accordionElement__toggler__expandIcon": {
-        flexShrink: 0,
-        svg: {
-          width: "32px"
-        }
-      }
-    }
-  }),
-  ".responsiveTable__accordionElement__content": {
-    display: "flex",
-    flexDirection: "column",
-    "& > div": {
-      backgroundColor: "palette.background.paper",
-      transition: "padding-bottom 300ms, padding-top 300ms",
-      px: 5
-    },
-    "&.rah-static--height-zero": {
-      "& > div": { py: 0 }
-    },
-    "&.rah-static--height-auto, &.rah-animating--down": {
-      "& > div": { py: 5 }
-    },
-    ".priority_container": { display: "flex", alignItems: "center" },
-    ".priority": { display: "flex" }
-  }
-};
-
-const print = {
-  border: "2px solid",
-  borderColor: "printView.list.table.borderColor",
-  "td, th": {
-    p: 3,
-    textAlign: "left"
-  }
-};
-
-const responsive = (theme) => {
-  return {
-    maxHeight: "100%",
-    overflow: "auto",
-    position: "relative",
-    // borderRadius: '10px',
-    "&.isLoading": {
-      overflow: "hidden"
-    },
-    ".responsiveTable__isLoading": {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      background: tinycolor(theme.palette.background.paper).setAlpha(0.7).toRgbString(),
-      zIndex: 1,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center"
-    },
-    ".cell__download__document": {
-      display: "flex",
-      gap: 3,
-      alignItems: "center",
-      justifyContent: "start",
-      "&, *": {
-        color: "palette.primary.main"
-      },
-      svg: {
-        flexShrink: 0
-      }
-    }
-    /* PREPEND HERE */
-  };
-};
-
-var __defProp$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$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;
-};
-const secondary = {
-  variant: "layout.common.tables.primary",
-  borderColor: "components.secondaryTable.borderColor",
-  "& thead": {
-    "tr:not(.filtersRow):not(.responsiveTable__filters__row)": {
-      "& th, & td": () => __spreadValues$8({}, getColorsAndStatesByPath("components.secondaryTable.header"))
-    }
-  },
-  "& tbody": {
-    tr: __spreadValues$8({
-      "&:nth-of-type(2n)": {
-        backgroundColor: "components.secondaryTable.body.evenRowsBackgroundColor"
-      },
-      td: {
-        borderColor: "components.secondaryTable.body.borderColor"
-      },
-      '&[aria-selected="true"]': {
-        backgroundColor: "components.secondaryTable.body.selectedRows.backgroundColor",
-        "& td": {
-          borderColor: "components.secondaryTable.body.selectedRows.borderColor"
-        },
-        color: "components.secondaryTable.body.selectedRows.color"
-      },
-      borderBottomWidth: "1px",
-      borderBottomStyle: "solid"
-    }, getColorsAndStatesByPath("components.secondaryTable.body", {
-      states: {
-        disabled: false,
-        readonly: false,
-        active: false,
-        hover: false,
-        checked: false,
-        focus: false,
-        selected: false
-      }
-    }))
-  }
-};
-
-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$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;
-};
-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$4(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$3 = (theme) => {
-  return {
-    /* PREPEND HERE */
-    position: "relative",
-    '[role="tree"]:focus': {
-      outline: "none",
-      ".focus": focusOutline
-    },
-    ul: {
-      listStyle: "none",
-      p: 0
-    },
-    ".tree__searchLabelBox": {
-      alignItems: "center",
-      borderRadius: "2px",
-      display: "flex",
-      float: "right",
-      justifyContent: "center",
-      position: "sticky",
-      right: "4px",
-      top: "4px",
-      transform: "translateX(0)",
-      width: "100%",
-      zIndex: "stickyElements",
-      ".tree__loading": {
-        position: "fixed",
-        top: 0,
-        right: "4px",
-        height: "iconMd",
-        width: "iconMd",
-        background: "palette.background.paper"
-      },
-      button: {
-        cursor: "pointer",
-        "&:hover": {
-          textDecoration: "underline"
-        }
-      }
-    },
-    ".tree__searchLabel": __spreadValues$6({
-      alignItems: "center",
-      display: "flex",
-      justifyContent: "center",
-      position: "fixed",
-      p: "2px 5px",
-      right: 0,
-      top: 0
-    }, theme.palette.getOneState(
-      { backgroundColor: "palette.background.paper" },
-      "selected"
-    )),
-    '[role="treeitem"]': {
-      '&[aria-expanded="false"] ul': {
-        display: "none"
-      },
-      '&[aria-selected="true"] > .tree__nodeItemLabel': theme.palette.getOneState(
-        { backgroundColor: "palette.background.paper" },
-        "selected"
-      ),
-      background: "transparent"
-    },
-    ".tree__nodeItemLabel": {
-      display: "flex",
-      flexWrap: "nowrap",
-      alignItems: "center",
-      wordBreak: "break-all",
-      button: {
-        cursor: "pointer",
-        "&:hover": {
-          textDecoration: "underline"
-        },
-        span: {
-          textOverflow: "ellipsis",
-          overflow: "hidden",
-          whiteSpace: "nowrap"
-        }
-      },
-      ".tree__nodeItemLabelRenderer": {
-        display: "flex",
-        overflow: " hidden",
-        width: "100%"
-      },
-      ".button__content": {
-        textAlign: "left"
-      },
-      "& > *:not(.tree__nodeItemLabelRenderer)": {
-        flexShrink: 0,
-        textAlign: "left"
-      },
-      "&:hover": theme.palette.getOneState(
-        { backgroundColor: "palette.background.paper" },
-        "hover"
-      )
-    },
-    ".tree__expanderWrapper": {
-      display: "inline-flex",
-      ml: "-10px",
-      pl: "5px",
-      "svg.tree__expandIcon": {
-        color: "palette.text.primary"
-      }
-    },
-    ".tree__node__icon": {
-      mr: "3"
-    },
-    ".spacer": {
-      borderLeft: "1px dotted",
-      borderLeftColor: "palette.border.section",
-      width: "20px",
-      alignSelf: "stretch",
-      transform: "translateX(5px)"
-    }
-  };
-};
-
-const trees = {
-  primary: primary$3
-};
-
-const primary$2 = {
-  background: "white",
-  border: "1px solid #ccc",
-  p: 3,
-  zIndex: "tooltip"
-  /* PREPEND HERE */
-};
-
-const tooltips = {
-  primary: primary$2
-  /* PREPEND HERE */
-};
-
-var __defProp$5 = Object.defineProperty;
-var __defProps$1 = Object.defineProperties;
-var __getOwnPropDescs$1 = 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) => {
-  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]);
-    }
-  return a;
-};
-var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
-const common$1 = (type) => __spreadProps$1(__spreadValues$5({}, getColorsByPath(type)), {
-  gap: spacing(1),
-  justifyContent: "stretch",
-  "&.onlyRefresh": {
-    justifyContent: "end"
-  },
-  alignItems: "center",
-  padding: 1,
-  display: "flex",
-  ".pagination__leftToolbar": {
-    alignItems: "center",
-    display: "flex",
-    width: "100%"
-  },
-  ".pagination__deleteLabels": {
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
-  },
-  ".pagination__selectPage": {
-    width: "80px",
-    top: "80px",
-    textAlign: "center"
-  },
-  ".iconButton": __spreadProps$1(__spreadValues$5({
-    height: "36px",
-    width: "36px"
-  }, getColorsAndStatesByPath(`${type}.icons`, {
-    states: { disabled: false, path: false }
-  })), {
-    "&:disabled": {
-      background: "transparent"
-    }
-  }),
-  ".recordsCounter": {
-    color: "palette.primary.contrastText",
-    pl: spacing(3)
-  },
-  ".reachedMax": {
-    color: "red",
-    pl: 2
-  },
-  ".pagination__controls": {
-    flexGrow: 1,
-    justifyContent: "center",
-    flexShrink: 0,
-    "&.onlyRefresh": {
-      justifyContent: "end"
-    },
-    alignItems: "stretch",
-    padding: 1,
-    display: "flex",
-    width: responsive$1({ 0: "max-content", 2: "auto" }),
-    "select ~ svg": {
-      display: "none"
-    },
-    ".input": __spreadProps$1(__spreadValues$5({
-      display: "flex",
-      alignItems: "center",
-      gap: spacing(3),
-      fontSize: "1em",
-      border: "1px solid",
-      paddingY: 1,
-      paddingX: 4
-    }, getColorsByPath(`${type}.pagesBox`)), {
-      input: {
-        font: "inherit",
-        background: "none",
-        border: "none",
-        width: "30px",
-        padding: 0,
-        textAlign: "center"
-      },
-      span: {
-        font: "inherit",
-        display: "block",
-        width: "30px"
-      }
-    })
-  },
-  ".infoTooltip": {
-    position: "relative",
-    display: "inline-block",
-    borderBottom: "1px dotted black",
-    cursor: "pointer",
-    backgroundColor: "#f7d97f"
-  },
-  ".pagination__information": {
-    p: 1,
-    ".pagination__infoIcon": {
-      display: "flex"
-    }
-  },
-  ".pagination__alertInfo": __spreadValues$5({
-    variant: "buttons.icon-primary"
-  }, getColorsAndStatesByPath("buttons.iconAlert")),
-  ".pagination__rightToolbar": {
-    display: "flex",
-    gap: 0,
-    width: "100%",
-    justifyContent: "end",
-    ".pagination__deleteFiltersButton": {
-      variant: "buttons.primary-sm",
-      textDecoration: "none",
-      px: 3,
-      ".button__content": {
-        display: "flex",
-        flexDirection: "row",
-        gap: 3
-      },
-      ".pagination__appliedFiltersLabel": {
-        backgroundColor: "palette.primary.contrastText",
-        color: "palette.text.title",
-        borderRadius: "100%",
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        minWidth: "1.5em",
-        "&.withFilters": {
-          backgroundColor: "favorite",
-          color: "palette.text.primary"
-        }
-      }
-    }
-  }
-});
-
-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": {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "stretch"
-    },
-    ".accordion__item__button__leftGroup, .accordion__item__button__rightGroup": {
-      alignItems: "center",
-      display: "flex",
-      gap: 3,
-      "& > *": {
-        flexShrink: 0,
-        "&.accordion__item__button__label": {
-          flexShrink: 1
-        }
-      }
-    },
-    ".accordion__item__button__label": {
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap",
-      flexShrink: 1,
-      color: "palette.primary.contrastText",
-      fontSize: 16
-    },
-    ".accordion__item__button__check": {
-      width: "32px",
-      height: "32px",
-      background: "palette.background.paper",
-      border: "1px solid",
-      // borderColor: 'palette.border.field',
-      cursor: "pointer",
-      display: "flex",
-      alignItems: "stretch",
-      justifyContent: "stretch",
-      p: 2,
-      svg: {
-        color: "palette.text.primary",
-        height: "100%",
-        width: "100%"
-      }
-    },
-    ".accordion__item:last-of-type > *": {
-      borderBottom: "1px solid",
-      borderBottomColor: "palette.border.section"
-    },
-    ".accordion__item__content > *": {
-      p: 4,
-      borderLeft: "1px solid",
-      borderRight: "1px solid",
-      borderLeftColor: "palette.border.section",
-      borderRightColor: "palette.border.section"
-    },
-    ".accordion__item__button": {
-      width: "100%",
-      p: 3,
-      ".button__content": {
-        alignItems: "center",
-        display: "flex",
-        gap: spacing(3),
-        justifyContent: "space-between",
-        width: "100%"
-      }
-    },
-    ".accordion__cell__renderer": {
-      display: "flex"
-    }
-  },
-  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__button__check": {
-      borderColor: "palette.border.section",
-      borderRadius: "3px"
-    },
-    ".accordion__item__content": {
-      background: "palette.secondary.light",
-      '[data-variant="link"]': {
-        px: 0
-      },
-      div: {
-        border: "none"
-      }
-    }
-  }
-};
-
-const chat = {
-  /* PREPEND HERE */
-  height: "calc(100vh - 300px)",
-  width: "100%",
-  border: "1px solid",
-  borderColor: "palette.border.section",
-  ".autoscrollContainer": {
-    display: "flex",
-    flexDirection: "column",
-    width: "100%",
-    gap: 3,
-    p: 3
-  },
-  ".history__message": {
-    borderRadius: "2px",
-    p: 3,
-    width: "80%",
-    wordWrap: "break-word",
-    whiteSpace: "pre-wrap",
-    "&.user": {
-      alignSelf: "end",
-      backgroundColor: "#90ee902b"
-    },
-    "&.system": {
-      alignSelf: "start",
-      backgroundColor: "#5701f52b"
-    },
-    "&.warning": {
-      alignSelf: "start",
-      backgroundColor: "#ffff0024",
-      width: "100%"
-    },
-    "&.error": {
-      alignSelf: "start",
-      backgroundColor: "#fd84212b",
-      width: "100%"
-    },
-    "&.information": {
-      alignSelf: "start",
-      backgroundColor: "#2222cc2b",
-      width: "100%"
-    },
-    "&.multipleChoice": {
-      p: 0
-    },
-    ".multipleChoiceMessage:not(.customRenderer)": {
-      background: "#0178f52b",
-      td: { textAlign: "center" },
-      th: { backgroundColor: "#14597bab" },
-      table: { borderBottom: "1px solid" },
-      "button.multipleChoice__option": {
-        width: "-webkit-fill-available",
-        backgroundColor: "#14597bab"
-      },
-      ".taskInfoDiv": {
-        display: "flex",
-        justifyContent: "space-evenly"
-      }
-    },
-    ".multipleChoiceMessage.customRenderer": {
-      display: "flex",
-      flexDirection: "column",
-      gap: 3,
-      "& > p": {
-        background: "#0178f52b",
-        p: 3
-      },
-      ".selection__keyHandler": {
-        m: 0,
-        padding: 3,
-        border: "1px solid",
-        borderColor: "palette.border.article",
-        borderRadius: "panel"
-      }
-    }
-  },
-  ".help__container": {
-    display: "flex",
-    flexDirection: "column",
-    gap: 4
-  },
-  ".functionHelp": {
-    display: "flex",
-    flexDirection: "column",
-    gap: 3,
-    ".functionHelp__description, .functionHelp__usage": {
-      pl: 5
-    },
-    ".history__message": {
-      wordWrap: "break-word",
-      overflow: "hidden",
-      whiteSpace: "break-spaces"
-    }
-  }
-};
-
-const components = {
-  /* PREPEND HERE */
-  accordion,
-  pagination,
-  chat
-};
-
-const common = (theme) => {
-  return {
-    forms,
-    modals,
-    tables: tables(theme),
-    components,
-    trees,
-    tooltips
-    /* PREPEND HERE */
-  };
-};
-
-const collector = {
-  /* PREPEND HERE */
-  formContainer: {
-    width: "400px",
-    form: {
-      display: "flex",
-      flexDirection: "column",
-      gap: 3
-    },
-    ".collector__buttons": {
-      display: "flex",
-      justifyContent: "end",
-      alignItems: "end",
-      gap: 3
-    }
-  },
-  modal: {
-    ".modal__main": {
-      maxWidth: "500px"
-    }
-  }
-};
-
-const util = {
-  collector
-  /* PREPEND HERE */
-};
-
-const layout = (theme) => {
-  return {
-    common: common(theme),
-    util
-    /* PREPEND HERE */
-  };
-};
-
-const makeTheme = (t) => {
-  return t;
-};
-let declaredStyles = {};
-function getMainTheme(customTheme, customPalette, themeModifier) {
-  var _a, _b;
-  const palette = parsePalette(merge({}, defaultPalette, customPalette));
-  window.currentPalette = palette;
-  const theme = makeTheme(
-    merge(baseTheme(), { layout: declaredStyles }, (_a = customTheme == null ? void 0 : customTheme()) != null ? _a : {}, {
-      palette: {}
-    })
-  );
-  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 (_b = themeModifier == null ? void 0 : themeModifier(theme)) != null ? _b : theme;
-}
-
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
-    }
-  return a;
-};
-const injectedStyles = {};
-const mainThemeEmitter = new class MainThemeEmitter extends EventEmitter {
-}();
-function handleNewStyles(ev) {
-  injectedStyles[ev.path] = ev.styles;
-}
-mainThemeEmitter.on("newStyles", handleNewStyles);
-function useMainTheme(customTheme, customPalette, themeModifier) {
-  const [theme, setTheme] = useState(
-    getMainTheme(customTheme, customPalette, themeModifier)
-  );
-  const previousTheme = useRef(customTheme);
-  const previousPalette = useRef(customPalette);
-  if (previousTheme.current !== customTheme)
-    setTheme(getMainTheme(customTheme));
-  previousTheme.current = customTheme;
-  if (previousPalette.current !== customPalette)
-    setTheme(getMainTheme(customTheme, customPalette));
-  previousPalette.current = customPalette;
-  useMount(() => {
-    setTheme((current) => {
-      mainThemeEmitter.off("newStyles", handleNewStyles);
-      let initialTheme = __spreadValues$1({}, current);
-      Object.entries(injectedStyles).forEach(([path, styles]) => {
-        const newStyles = setValueByPath({}, path, styles);
-        initialTheme = merge(initialTheme, newStyles);
-      });
-      return initialTheme;
-    });
-    return mainThemeEmitter.on("newStyles", (ev) => {
-      const newStyles = setValueByPath({}, ev.path, ev.styles);
-      setTheme((current) => merge(__spreadValues$1({}, current), newStyles));
-    });
-  });
-  return theme;
-}
-
-const CustomThemeProvider = ({
-  children,
-  customTheme
-}) => {
-  const theme = getMainTheme(customTheme);
-  return /* @__PURE__ */ jsx(ThemeUIProvider, { theme, children });
-};
-
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-function makeStyledComponent(displayName, stylesPath, styles, Component, unwraped = false) {
-  return Object.assign(
-    (props) => {
-      const avoidFirstRender = useRef(0);
-      const { theme: tuiTheme } = useThemeUI();
-      const theme = useMemo(
-        () => () => __spreadValues(__spreadValues({}, tuiTheme), setValueByPath({}, stylesPath, styles)),
-        [tuiTheme]
-      );
-      if (unwraped) {
-        return /* @__PURE__ */ jsx(CustomThemeProvider, { customTheme: theme, children: /* @__PURE__ */ jsx(NoThemePrevent, { avoidFirstRender, children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(Component, __spreadValues({}, props)) }) }) });
-      }
-      return /* @__PURE__ */ jsx(CustomThemeProvider, { customTheme: theme, children: /* @__PURE__ */ jsx(NoThemePrevent, { avoidFirstRender, children: /* @__PURE__ */ jsx(Box, __spreadProps(__spreadValues({ className: "variant__holder" }, getVariant(stylesPath)), { children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(Component, __spreadValues({}, props)) }) })) }) });
-    },
-    { displayName }
-  );
-}
-const NoThemePrevent = ({
-  avoidFirstRender,
-  children
-}) => {
-  avoidFirstRender.current++;
-  if (avoidFirstRender.current <= 1)
-    return null;
-  return /* @__PURE__ */ jsx(Fragment, { children });
-};
-
-function injectStyles(par1, par2) {
-  const path = typeof par1 === "string" ? par1 : "";
-  const styles = typeof par1 === "string" ? par2 : par1;
-  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 });
-  }, 500);
-}
-const ApiaThemeProvider = ({
-  children,
-  customTheme,
-  customPalette,
-  themeModifier
-}) => {
-  const parsedCustomPalette = useMemo(() => {
-    return customPalette == null ? void 0 : customPalette();
-  }, [customPalette]);
-  const theme = useMainTheme(
-    customTheme,
-    parsedCustomPalette,
-    themeModifier
-  );
-  logTheme(theme);
-  return /* @__PURE__ */ jsx(ThemeProvider, { theme, children });
-};
-
-export { ApiaThemeProvider, applyStatesGetColor, focusOutline, getColorState, getColorStates, getColorsAndStatesByDefinition, getColorsAndStatesByPath, getColorsByDefinition, getColorsByPath, getOneColorState, getSpacingLayouts, getVariant, injectStyles, makeStyledComponent, parsePalette, responsive$1 as responsive, smallButton, spacing, spacingLayouts, useMainTheme };
+export { ApiaThemeProvider } from './ApiaThemeProvider.js';
+export { focusOutline, responsive, smallButton, spacing } from './util.js';
+export { default as getColorState } from './base/colors/util/getColorState.js';
+export { default as getColorStates } from './base/colors/util/getColorStates.js';
+export { default as getColorsAndStatesByDefinition } from './base/colors/util/getColorsAndStatesByDefinition.js';
+export { default as getColorsAndStatesByPath } from './base/colors/util/getColorsAndStatesByPath.js';
+export { default as getOneColorState } from './base/colors/util/getOneColorState.js';
+export { Alert, AspectImage, AspectRatio, Avatar, Badge, BaseStyles, Box, Button, Card, Checkbox, Close, CloseIcon, Container, Divider, Donut, Embed, Flex, Global, Grid, Heading, IconButton, Image, InitializeColorMode, Input, Label, Link, MenuButton, MenuIcon, Message, NavLink, Paragraph, Progress, Radio, Select, Slider, Spinner, Switch, Text, Textarea, createElement, css, get, merge, useColorMode, useThemeUI } from 'theme-ui';
+export { makeStyledComponent } from './methods/makeStyledComponent.js';
+export { injectStyles } from './methods/injectStyles.js';
+export { getSpacingLayouts, spacingLayouts } from './methods/spacingLayout/index.js';
+export { useMainTheme } from './methods/useMainTheme.js';
+export { default as getColorsByDefinition } from './base/colors/util/getColorsByDefinition.js';
+export { default as getColorsByPath } from './base/colors/util/getColorsByPath.js';
+export { getVariant } from './util/getVariant.js';
+export { MarkdownBlock } from './markdown/builder/elements/MarkdownBlock.js';
+export { MarkdownBuilder } from './markdown/builder/MarkdownBuilder.js';
+export { parseMarkdown } from './markdown/parseMarkdown.js';
+export { MarkdownList } from './markdown/builder/elements/list.js';
+export { MarkdownParagraph } from './markdown/builder/elements/paragraph.js';
+export { MarkdownTable } from './markdown/builder/elements/table.js';
+export { MarkdownTableOfContents } from './markdown/builder/elements/tableOfContents.js';
+//# sourceMappingURL=index.js.map