@apia/theme 4.0.9 → 4.0.11

package/dist/{index-CQrjUy7r.js → index-SJZzkOTL.js}

@@ -1,12 +1,13 @@
 import cloneDeep from 'lodash-es/cloneDeep';
 import tinycolor from 'tinycolor2';
 import merge from 'lodash-es/merge';
+import { jsxs, jsx, Fragment } from 'theme-ui/jsx-runtime';
+import { Box, ThemeUIProvider, useThemeUI, ThemeProvider } from 'theme-ui';
 import '@theme-ui/match-media';
-import { jsx, Fragment } from 'theme-ui/jsx-runtime';
-import { ThemeUIProvider, useThemeUI, Box, ThemeProvider } from 'theme-ui';
 import { useState, useRef, useMemo, Suspense } from 'react';
 import { useMount, setValueByPath, EventEmitter } from '@apia/util';
 import { spacing as spacing$1, responsive as responsive$2 } from '@apia/theme';
+import { keyframes } from '@emotion/react';
 
 function defaultLighten(color, ratio) {
   return tinycolor(color).lighten(ratio ?? 20).toRgbString();
@@ -898,15 +899,24 @@ function getThemeColorsObject(theme) {
           borderColor: theme.palette.background.paper,
           hover: {
             color: theme.palette.primary.main,
-            backgroundColor: theme.palette.background.paper
+            backgroundColor: theme.palette.darkenColor(
+              theme.palette.background.paper,
+              10
+            )
           },
           active: {
             color: theme.palette.primary.main,
-            backgroundColor: theme.palette.background.paper
+            backgroundColor: theme.palette.darkenColor(
+              theme.palette.background.paper,
+              15
+            )
           },
           focus: {
             color: theme.palette.primary.main,
-            backgroundColor: theme.palette.background.paper
+            backgroundColor: theme.palette.darkenColor(
+              theme.palette.background.paper,
+              10
+            )
           }
         },
         imagePreview: {
@@ -1224,6 +1234,28 @@ function getThemeColorsObject(theme) {
   return colors;
 }
 
+function getVariant(variant) {
+  return { variant, "data-variant": variant };
+}
+
+const MaterialInput = ({ title, label, boxProperties, ...props }) => /* @__PURE__ */ jsxs(
+  Box,
+  {
+    ...getVariant("layout.common.forms.materialInput"),
+    ...boxProperties,
+    className: `${props.value ? "filled" : ""} ${boxProperties?.className || ""}`,
+    children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        label,
+        ":"
+      ] }),
+      /* @__PURE__ */ jsx("input", { ...props, "aria-label": label, title: label })
+    ]
+  }
+);
+
+const Form = (props) => /* @__PURE__ */ jsx(Box, { as: "form", ...props });
+
 const alerts = {
   primary: {
     border: "1px solid",
@@ -1234,6 +1266,7 @@ const alerts = {
     fontWeight: "normal",
     maxHeight: "60vh",
     overflow: "auto",
+    overflowX: "hidden",
     p: 0,
     "&:focus": {
       outline: "none"
@@ -1556,6 +1589,10 @@ const buttons = {
     textTransform: "inherit",
     ...smallButton
   },
+  transparentIcon: {
+    ...getColorsAndStatesByPath("buttons.transparentIcon"),
+    cursor: "pointer"
+  },
   "outline-danger": {
     variant: "buttons.outline",
     "&:focus, &:focus-visible": {},
@@ -1638,7 +1675,6 @@ const buttons = {
     ...smallButton
   }
 };
-var buttons$1 = buttons;
 
 const text = {
   default: {
@@ -1658,7 +1694,6 @@ const text = {
     fontWeight: "heading"
   }
 };
-var text$1 = text;
 
 const transitions = {
   "@keyframes growHorizontal": {
@@ -1796,8 +1831,15 @@ const menu = {
     position: "relative",
     padding: "0.375rem 1.5rem",
     paddingLeft: "2.2rem",
-    "&.withIcon": {
-      padding: "0px"
+    ".withIcon": {
+      padding: "0px",
+      display: "flex",
+      gap: "4px",
+      justifyContent: "left",
+      alignItems: "center",
+      ".icon": {
+        flexShrink: 0
+      }
     }
   },
   ".szh-menu__item--hover": (theme) => ({
@@ -1864,10 +1906,9 @@ const menu = {
     color: theme.palette.text.primary
   })
 };
-var menu$1 = menu;
 
 const root = {
-  ...menu$1,
+  ...menu,
   height: "100%",
   "*": {
     fontFamily: "body",
@@ -1878,7 +1919,24 @@ const root = {
     "&:focus": focusOutline
   },
   body: {
-    minHeight: "100vh"
+    // minHeight: '100vh',
+  },
+  //cambia el estilo del scroll
+  "div::-webkit-scrollbar": {
+    width: "8px",
+    height: "8px!important"
+  },
+  "div::-webkit-scrollbar-track": {
+    background: "#f1f1f1",
+    borderRadius: "7px"
+  },
+  "div::-webkit-scrollbar-thumb": {
+    background: "#888",
+    borderRadius: "7px"
+  },
+  "::-webkit-scrollbar:hover, * ::-webkit-scrollbar:hover": {
+    width: "12px",
+    height: "12px!important"
   },
   h1: {
     fontSize: responsive$1({ 0: 26, 3: 32 })
@@ -2027,7 +2085,7 @@ const baseTheme = () => {
       "1260px",
       "1580px"
     ],
-    buttons: buttons$1,
+    buttons,
     colors: {},
     fonts: {
       body: '"InterVariable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif, Roboto',
@@ -2056,21 +2114,27 @@ const baseTheme = () => {
     radii: {
       alerts: 0,
       buttons: 0,
-      default: 0,
+      default: "0px",
       panel: "7px",
       modals: "7px",
-      tooltips: "7px"
+      tooltips: "7px",
+      chatMessage: "7px",
+      elementBox: "4px"
     },
     shadows: {
-      dataGridHeader: "2px 2px 4px 0px #0008",
+      default: "rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;",
+      dataGridHeader: "rgba(0, 0, 0, 0.173) 0px 1px 7px 0px",
       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",
+      table: "rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;",
       tableFilters: "1px 2px 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"
-      }
+      },
+      sharp: "0px 1px 1px #c7c7c7",
+      neum: "rgb(204, 219, 232) 0px 0px 5px inset, rgba(255, 255, 255, 0.5) 0px 0px 3px inset;"
     },
     space: [0, 2, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96, 112, 128],
     sizes: {
@@ -2088,7 +2152,7 @@ const baseTheme = () => {
       iconLg: "32px",
       iconXl: "48px"
     },
-    text: text$1,
+    text,
     zIndices: {
       stickyElements: 600,
       menu: 1e3,
@@ -2126,7 +2190,6 @@ const customCheckbox = {
   })
   /* PREPEND HERE */
 };
-var customCheckbox$1 = customCheckbox;
 
 const checkbox = {
   borderRadius: "default",
@@ -2181,7 +2244,6 @@ const checkbox = {
     }
   }
 };
-var checkbox$1 = checkbox;
 
 const dateInput = {
   display: "flex",
@@ -2236,7 +2298,6 @@ const dateInput = {
   }),
   backgroundColor: void 0
 };
-var dateInput$1 = dateInput;
 
 const iconInput = {
   display: "flex",
@@ -2248,6 +2309,15 @@ const iconInput = {
       ...getColorsByPath("form.fields")
     }
   },
+  "&.disabled, &.disabled:hover": {
+    ".iconButton": {
+      backgroundColor: "form.fields.disabled.backgroundColor",
+      color: "palette.text.primary",
+      border: "1px solid",
+      borderColor: "palette.border.field",
+      cursor: "not-allowed"
+    }
+  },
   input: {
     height: "50px",
     width: "100%"
@@ -2256,10 +2326,10 @@ const iconInput = {
     display: "flex",
     width: "45px",
     flexShrink: 0,
-    height: "50px"
+    height: "50px",
+    border: "none"
   }
 };
-var iconInput$1 = iconInput;
 
 const input = {
   variant: "text.default",
@@ -2306,7 +2376,6 @@ const input = {
     }
   }
 };
-var input$1 = input;
 
 const label = {
   variant: "text.default",
@@ -2333,7 +2402,6 @@ const label = {
     }
   }
 };
-var label$1 = label;
 
 const radio = {
   width: "32px",
@@ -2346,7 +2414,6 @@ const radio = {
     fill: "inherit"
   }
 };
-var radio$1 = radio;
 
 const select = {
   variant: "text.default",
@@ -2371,7 +2438,6 @@ const select = {
     display: "none"
   }
 };
-var select$1 = select;
 
 function selectMultiple(theme) {
   return {
@@ -2417,7 +2483,6 @@ const Switch = {
   },
   backgroundColor: "form.fields.checked.borderColor"
 };
-var Switch$1 = Switch;
 
 const textarea = {
   height: "100%",
@@ -2425,7 +2490,6 @@ const textarea = {
   resize: "vertical",
   variant: "forms.input"
 };
-var textarea$1 = textarea;
 
 const deletableInput = {
   border: "1px solid",
@@ -2485,22 +2549,21 @@ const deletableInput = {
     }
   }
 };
-var deletableInput$1 = deletableInput;
 
 const forms$1 = (theme) => {
   return {
-    checkbox: checkbox$1,
-    customCheckbox: customCheckbox$1,
-    dateInput: dateInput$1,
-    deletableInput: deletableInput$1,
-    iconInput: iconInput$1,
-    input: input$1,
-    label: label$1,
-    radio: radio$1,
-    select: select$1,
+    checkbox,
+    customCheckbox,
+    dateInput,
+    deletableInput,
+    iconInput,
+    input,
+    label,
+    radio,
+    select,
     selectMultiple: selectMultiple(theme),
-    switch: Switch$1,
-    textarea: textarea$1,
+    switch: Switch,
+    textarea,
     /* PREPEND HERE */
     'input[type="date"]': {
       variant: "forms.input"
@@ -2661,7 +2724,6 @@ const confirm = {
     }
   }
 };
-var confirm$1 = confirm;
 
 const table = {
   display: "flex",
@@ -2694,7 +2756,6 @@ const table = {
     }
   }
 };
-var table$1 = table;
 
 const tableModal = {
   additionalFiltersModal: {
@@ -2787,7 +2848,6 @@ const tableModal = {
     mt: "7px"
   }
 };
-var tableModal$1 = tableModal;
 
 const buttonsBar = {
   flexDirection: "row",
@@ -2796,7 +2856,6 @@ const buttonsBar = {
   gap: spacing$1(3),
   mb: spacing$1(0)
 };
-var buttonsBar$1 = buttonsBar;
 
 const apiaFinder = {
   additionalFiltersModal: {
@@ -2892,16 +2951,15 @@ const apiaFinder = {
     mt: "7px"
   }
 };
-var apiaFinder$1 = apiaFinder;
 
 const modals = {
   apiaApi,
-  buttonsBar: buttonsBar$1,
-  confirm: confirm$1,
+  buttonsBar,
+  confirm,
   ...overlay,
-  table: table$1,
-  tableModal: tableModal$1,
-  apiaFinder: apiaFinder$1,
+  table,
+  tableModal,
+  apiaFinder,
   main: {
     boxShadow: "modals",
     borderRadius: "modals",
@@ -2917,9 +2975,7 @@ const modals = {
     border: "1px solid",
     gap: "0px !important",
     "&>div>div": {
-      overflow: "hidden",
       flexGrow: 0,
-      flexShrink: 0,
       p: "3px",
       width: "100%"
     },
@@ -2976,7 +3032,7 @@ const modals = {
             height: "100%",
             border: "1px solid",
             borderColor: "palette.border.article",
-            backgroundColor: "palette.gray.900"
+            backgroundColor: "palette.background.default"
           }
         }
       }
@@ -2988,6 +3044,9 @@ const modals = {
       height: "100%",
       ".responsiveTable__wrapper": {
         height: "100%"
+      },
+      "& > *:first-child": {
+        height: "100%"
       }
     }
   },
@@ -3053,12 +3112,19 @@ const modals = {
   },
   cal: {
     variant: "layout.common.modals.sm",
-    width: "350px"
+    width: "400px",
+    maxWidth: "400px"
   },
   editGrid: {
     variant: "layout.common.modals.main",
     width: "root",
     maxHeight: "90vh"
+  },
+  fileModal: {
+    variant: "layout.common.modals.main",
+    width: "750px",
+    maxHeight: "97vh",
+    maxWidth: "95vw"
   }
   /* PREPEND HERE */
 };
@@ -3098,7 +3164,7 @@ function getSelectionStyles() {
   };
 }
 
-const primary$6 = (theme) => {
+const primary$4 = (theme) => {
   return {
     variant: "colors.tables.primary",
     width: "100%",
@@ -3481,7 +3547,7 @@ const responsive = (theme) => {
   };
 };
 
-const secondary$1 = {
+const secondary = {
   variant: "layout.common.tables.primary",
   borderColor: "components.secondaryTable.borderColor",
   "& thead": {
@@ -3747,6 +3813,11 @@ const clean = (theme) => {
         rowGap: 2,
         ".listPanel__details": {
           pl: 6
+        },
+        ".responsiveTable__additionalInfoItem": {
+          whiteSpace: "break-spaces",
+          overflow: "hidden",
+          wordBreak: "break-all"
         }
       },
       ".responsiveTable__additionalInfoContainer .responsiveTable__additionalInfoItem.separator": {
@@ -3806,10 +3877,10 @@ const tables = (theme) => {
   return {
     accordion: accordion$1,
     information,
-    primary: primary$6(theme),
+    primary: primary$4(theme),
     print,
     responsive: responsive(theme),
-    secondary: secondary$1,
+    secondary,
     clean: clean(theme)
     /* PREPEND HERE */
   };
@@ -3853,12 +3924,63 @@ const captcha = {
   }
 };
 
+const materialInput = {
+  position: "relative",
+  display: "inline-flex",
+  width: "max-content",
+  flexDirection: "column",
+  background: "white",
+  borderRadius: "6px",
+  span: {
+    transition: "top 200ms, left 200ms, font-size 200ms, background 200ms",
+    position: "absolute",
+    top: "10px",
+    left: "8px",
+    fontSize: "14px",
+    pointerEvents: "none",
+    color: "palette.border.section",
+    background: "transparent",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+    maxWidth: "144px",
+    overflow: "hidden"
+  },
+  "&:focus-within": focusOutline,
+  "&.filled, &:focus-within": {
+    span: {
+      position: "absolute",
+      top: "4px",
+      left: "5px",
+      fontSize: "10px",
+      pointerEvents: "all",
+      background: "white",
+      padding: "0 2px"
+    },
+    input: {
+      paddingTop: "15px",
+      opacity: 1
+    }
+  },
+  "& *:focus": {
+    outline: "none"
+  },
+  input: {
+    border: "1px solid #ccc",
+    borderRadius: "panel",
+    transition: "padding 200ms, opacity 400ms",
+    background: "none",
+    padding: "8px",
+    opacity: 0
+  }
+};
+
 const forms = {
-  captcha
+  captcha,
+  materialInput
   /* PREPEND HERE */
 };
 
-const primary$4 = (theme) => {
+const primary$3 = (theme) => {
   return {
     /* PREPEND HERE */
     position: "relative",
@@ -3992,7 +4114,6 @@ const primary$4 = (theme) => {
     }
   };
 };
-var primary$5 = primary$4;
 
 const mobx = (theme) => {
   return {
@@ -4075,14 +4196,13 @@ const mobx = (theme) => {
     }
   };
 };
-var mobx$1 = mobx;
 
 const trees = {
-  mobx: mobx$1,
-  primary: primary$5
+  mobx,
+  primary: primary$3
 };
 
-const primary$3 = {
+const primary$2 = {
   background: "white",
   border: "1px solid #ccc",
   borderRadius: "tooltips",
@@ -4092,7 +4212,7 @@ const primary$3 = {
 };
 
 const tooltips = {
-  primary: primary$3
+  primary: primary$2
   /* PREPEND HERE */
 };
 
@@ -4228,24 +4348,20 @@ const common$1 = (type) => ({
 const primary$1 = {
   ...common$1("components.paginationPrimary")
 };
-var primary$2 = primary$1;
 
 const datagrid = {
   ...common$1("components.paginationDatagrid")
 };
-var datagrid$1 = datagrid;
 
 const primary = {
   ...common$1("components.paginationSecondary")
 };
-var secondary = primary;
 
 const pagination = {
-  primary: primary$2,
-  datagrid: datagrid$1,
-  secondary
+  primary: primary$1,
+  datagrid,
+  secondary: primary
 };
-var pagination$1 = pagination;
 
 const accordion = {
   primary: {
@@ -4367,7 +4483,7 @@ const accordion = {
   }
 };
 
-const chat = {
+const chat$1 = {
   /* PREPEND HERE */
   height: "calc(100vh - 300px)",
   width: "100%",
@@ -4550,6 +4666,9 @@ const autocomplete = {
   ".autocomplete__inputWrapper": {
     position: "relative"
   },
+  ".autocomplete__search.disabled": {
+    cursor: "not-allowed"
+  },
   ".autocomplete__icons": {
     alignItems: "center",
     display: "flex",
@@ -4590,7 +4709,6 @@ const autocomplete = {
     }
   }
 };
-var autocomplete$1 = autocomplete;
 
 const datePicker = {
   maxWidth: "400px"
@@ -4666,15 +4784,37 @@ const aiMessage = {
   }
 };
 
+const infoButton = {
+  "&.iconButton": {
+    cursor: "pointer",
+    height: "0px",
+    minHeight: "16px",
+    color: "palette.gray.800",
+    p: spacing$1(0),
+    width: "auto",
+    minWidth: "auto",
+    svg: {
+      height: "15px",
+      width: "15px"
+    },
+    "&.isToggled": {
+      cursor: "pointer",
+      minHeight: "0px",
+      color: "palette.primary.main"
+    }
+  }
+};
+
 const components = {
   /* PREPEND HERE */
   accordion,
-  autocomplete: autocomplete$1,
+  autocomplete,
   datePicker,
-  pagination: pagination$1,
-  chat,
+  pagination,
+  chat: chat$1,
   toolbar,
-  aiMessage
+  aiMessage,
+  infoButton
 };
 
 const labelBox = {
@@ -4701,13 +4841,861 @@ const labelBox = {
     }
   }
 };
-var labelBox$1 = labelBox;
 
 const boxes = {
-  labelBox: labelBox$1
+  labelBox
   /* PREPEND HERE */
 };
 
+const formsAssistant = {
+  modalRow: {
+    "&": {
+      position: "relative",
+      'div[data-variant="layout.ai.execution.formsAssistant.buttonsDiv"]': {
+        position: "absolute",
+        top: "7%",
+        right: "15%"
+      }
+    }
+  },
+  modal: {
+    'div[class="modal__main"]': { position: "relative" },
+    'div[data-variant="layout.ai.execution.formsAssistant.buttonsDiv"]': {
+      position: "absolute",
+      top: "5.4%",
+      right: "17%"
+    }
+  },
+  buttonsDiv: {
+    display: "flex",
+    justifyContent: "end",
+    gap: 2,
+    alignItems: "center",
+    "button.manualButton:nth-child(2)": {
+      marginLeft: "auto"
+    }
+  },
+  settingsButton: {
+    variant: "buttons.icon-outline",
+    border: "none"
+  },
+  openTextarea: {
+    position: "fixed",
+    bottom: "1%",
+    right: "0.5%",
+    zIndex: 1200
+  },
+  tableText: { wordBreak: "normal" },
+  thModal: { whiteSpace: "nowrap" },
+  genericWindowDragger: {
+    maxWidth: "600px",
+    maxHeight: "455px",
+    zIndex: "1200",
+    bottom: "49px",
+    right: "11px"
+  },
+  customGridWindowDragger: {
+    variant: "layout.ai.execution.formsAssistant.genericWindowDragger",
+    bottom: "auto",
+    right: "auto",
+    ".tooltip__wrapper": {
+      padding: "0px"
+    }
+  },
+  floatingWindow: {
+    p: 5,
+    display: "flex",
+    flexDirection: "column",
+    gap: 5,
+    background: "palette.background.paper",
+    border: "1px solid",
+    borderColor: "palette.border.section",
+    minWidth: "478px",
+    'input[type="file"]': {
+      display: "none"
+    },
+    ".gpt__buttonsContainer": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "end",
+      gap: 1
+    },
+    'button[data-variant="icon-outline-danger"]': {
+      border: "none"
+    },
+    ".gpt__form": {
+      flexDirection: "column",
+      display: "flex",
+      gap: 2
+    },
+    ".formsAssistant__closeButton": {
+      borderRadius: "5px",
+      top: "-7px",
+      right: "-7px",
+      position: "absolute"
+    },
+    ".history": {
+      height: "200px",
+      overflow: "hidden",
+      display: "flex"
+    },
+    ".autoscrollContainer": { overflow: "auto" }
+  },
+  phoneCase: {
+    p: 5,
+    display: "flex",
+    flexDirection: "column",
+    gap: 5,
+    background: "palette.background.paper",
+    border: "1px solid",
+    borderColor: "palette.border.section",
+    height: "100%",
+    justifyContent: "space-between",
+    'input[type="file"]': {
+      display: "none"
+    },
+    ".gpt__buttonsContainer": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "end",
+      gap: 1
+    },
+    'button[data-variant="icon-outline-danger"]': {
+      border: "none"
+    },
+    'div[data-variant="layout.common.components.chat"]': {
+      minHeight: "60%"
+    },
+    'div[data-variant="layout.common.components.chat"] + div': {
+      width: "100%",
+      height: "29%"
+    },
+    ".gpt__form": {
+      flexDirection: "column",
+      display: "flex",
+      gap: 2,
+      height: "100%"
+    },
+    ".formsAssistant__closeButton": {
+      borderRadius: "5px",
+      top: "-7px",
+      right: "-7px",
+      position: "absolute"
+    },
+    ".history": {
+      height: "200px",
+      overflow: "hidden",
+      display: "flex"
+    },
+    ".autoscrollContainer": { overflow: "auto" }
+  },
+  configurationTable: {
+    variant: "layout.common.tables.information",
+    "th:last-of-type": {
+      width: "100px"
+    }
+  },
+  overrideTable: {
+    ".attTitle": { fontWeight: "bold" },
+    'div[role="dialog"]': {
+      width: "95vw"
+    },
+    ".confirmNewValues": {
+      variant: "layout.common.tables.information",
+      tableLayout: "fixed",
+      width: "100%",
+      'div[role="dialog"]': {
+        width: "95vw"
+      },
+      "& thead": {
+        th: {
+          width: "50%"
+        },
+        "th:last-of-type": {
+          width: "100px"
+        },
+        "th:first-of-type": {
+          width: "199px"
+        }
+      },
+      "& tbody": {
+        "td:last-of-type": {
+          textAlign: "center"
+        }
+      }
+    }
+  }
+};
+
+const execution = {
+  formsAssistant
+  /* PREPEND HERE */
+};
+
+const connectors = {
+  testResult: {
+    td: {
+      verticalAlign: "middle !important",
+      "&.title": {
+        fontWeight: "bold",
+        textAlign: "center"
+      },
+      div: {
+        height: "1.5em",
+        width: "1.5em",
+        borderRadius: "100px",
+        mx: "auto"
+      },
+      "&.success": {
+        p: 3,
+        div: { backgroundColor: "palette.success.main" }
+      },
+      "&.error": {
+        p: 3,
+        div: { backgroundColor: "palette.error.main" }
+      }
+    }
+  }
+};
+
+keyframes`
+0% {
+	transform: rotate(0);
+}
+
+25% {
+	transform: rotate(1.5deg);
+}
+
+75% {
+	transform: rotate(-1.5deg);
+}
+
+100% {
+	transform: rotate(0);
+}`;
+const fadeInFromBottom = keyframes`
+0% {
+	transform: translateY(400px) scale(0.1); 
+	opacity: 0;
+}
+100% {
+	transform: translateY(0) scale(1); 
+	opacity: 1;
+}
+`;
+const fadeInFromTop = keyframes`
+0% {
+	transform: translateY(-800px) scale(0.1); 
+	opacity: 0;
+}
+100% {
+	transform: translateY(0) scale(1); 
+	opacity: 1;
+}
+`;
+const animations = { fadeInFromBottom, fadeInFromTop };
+
+const semanticSearch = {
+  execution: {
+    background: "palette.background.default",
+    ".filters__container": {
+      " > div": {
+        display: "flex",
+        " > .filter_button:last-child": {
+          borderRadius: "panel",
+          height: "34px",
+          width: "34px",
+          flexShrink: 0,
+          background: "transparent",
+          border: "none",
+          opacity: 0,
+          transition: "opacity 400ms",
+          marginLeft: "auto"
+        }
+      },
+      paddingTop: "10px",
+      ".filter__input": {
+        paddingRight: "7px"
+      }
+    },
+    ".filled_filters": {
+      " > div": {
+        display: "flex",
+        " > .filter_button:last-child": {
+          borderRadius: "panel",
+          height: "34px",
+          width: "34px",
+          flexShrink: 0,
+          background: "transparent",
+          border: "none",
+          opacity: 1,
+          marginLeft: "auto"
+        }
+      }
+    },
+    ".search_controls": {
+      alignItems: "center",
+      justifyContent: "center",
+      display: "flex",
+      gap: 0,
+      mx: "auto",
+      background: "palette.background.paper",
+      border: "1px solid",
+      borderColor: "palette.border.section",
+      borderRadius: "panel",
+      boxShadow: "0px 2px 6px #0002",
+      width: "100%",
+      p: spacing(3),
+      "&:focus-within": focusOutline,
+      "& > *:focus": {
+        outline: "none"
+      },
+      ".filter_button_box": {
+        position: "relative"
+      },
+      ".applied_filters_label": {
+        position: "absolute",
+        bottom: "21px",
+        left: "20px",
+        minWidth: "10px",
+        maxHeight: "10px",
+        border: "2px solid white",
+        borderRadius: "100%",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "palette.error.main"
+      }
+    },
+    ".SearchButton": {
+      borderRadius: "panel",
+      height: "34px",
+      width: "34px",
+      flexShrink: 0,
+      background: "transparent",
+      border: "none",
+      color: "palette.text.primary",
+      ":disabled": {
+        background: "transparent"
+      }
+    },
+    ".FilterButton": {
+      borderRadius: "panel",
+      height: "34px",
+      width: "34px",
+      flexShrink: 0,
+      background: "transparent",
+      border: "none",
+      color: "palette.text.primary",
+      "&.open": {
+        color: "palette.primary.main"
+      }
+    },
+    ".references__box": {
+      display: "flex",
+      alignItems: "center",
+      gap: spacing(5)
+    },
+    ".searchTextArea": {
+      minHeight: "34px",
+      height: "34px",
+      resize: "none",
+      py: spacing(2),
+      background: "transparent",
+      border: "none"
+    },
+    "a:-webkit-any-link": {
+      color: "unset",
+      textDecoration: "unset"
+    },
+    ".references_item": {
+      maxWidth: "180px",
+      whiteSpace: "nowrap",
+      zIndex: 0,
+      ".button__content": {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        maxWidth: "180px"
+      }
+    },
+    "&.mode_none": {
+      flexDirection: "column",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100vh",
+      gap: spacing(5),
+      ".search_header_container": {
+        fontSize: "50px",
+        maxWidth: "50vw",
+        textAlign: "left",
+        display: "flex",
+        flexDirection: "column",
+        gap: spacing(5)
+      },
+      ".search_section_container": {
+        mx: "auto",
+        display: "flex",
+        flexDirection: "column",
+        gap: spacing(3),
+        zIndex: 1,
+        background: "palette.background.default",
+        boxShadow: "0 10px 10px #f8f4f4",
+        width: responsive$1({
+          0: "calc(100%)",
+          3: "calc(75vw + 50px)",
+          5: "calc(50vw + 50px)"
+        })
+      }
+    },
+    "&.mode_chat": {
+      h1: {
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis"
+      },
+      backgroundColor: "white",
+      width: responsive$1({
+        0: "calc(100%)",
+        3: "calc(75vw + 2px)",
+        5: "min(950px, calc(60vw + 2px))"
+      }),
+      margin: ["auto", "32px auto"],
+      border: "1px solid #ccc",
+      ".search_section_container": {
+        zIndex: 1,
+        position: "fixed",
+        bottom: "0",
+        transform: "translateX(-1px)",
+        borderBottom: "4px solid #f2f2f2",
+        width: responsive$1({
+          0: "calc(100%)",
+          3: "calc(75vw + 2px)",
+          5: "min(950px, calc(60vw + 2px))"
+        }),
+        background: "white",
+        textarea: { width: "calc(100%)" },
+        "& > div": {
+          padding: "4px 32px",
+          borderLeft: "1px solid #ccc",
+          borderRight: "1px solid #ccc",
+          borderBottom: "1px solid #ccc",
+          width: "calc(100%)",
+          background: "white"
+        }
+      },
+      ".search_header_container": {
+        position: "fixed",
+        zIndex: 1,
+        top: "0",
+        transform: "translateX(-1px)",
+        borderTop: "4px solid #f2f2f2",
+        padding: "0",
+        width: responsive$1({
+          0: "calc(100%)",
+          3: "calc(75vw + 2px)",
+          5: "min(950px, calc(60vw + 2px))"
+        }),
+        h1: {
+          padding: "32px",
+          pt: "20px",
+          pb: 0,
+          borderLeft: "1px solid #ccc",
+          borderRight: "1px solid #ccc",
+          borderTop: "1px solid #ccc",
+          width: "calc(100%)",
+          background: "white"
+        },
+        p: {
+          background: "palette.background.paper",
+          padding: "32px",
+          pb: "20px",
+          pt: 0,
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          width: "calc(100% - 2px)",
+          ml: "1px"
+        }
+      },
+      ".messages_box": { fontSize: "22px", minHeight: "88vh" },
+      ".history__message": {
+        borderRadius: "panel",
+        margin: "15px",
+        padding: "18px",
+        border: "1px",
+        //boxShadow: 'rgba(50, 50, 93, 0.25) 2px 2px 4px 1px',
+        "&.user": {
+          borderRadius: "chatMessage",
+          borderTopRightRadius: "0px",
+          backgroundColor: "rgb(108 166 203)",
+          //rgb(117 163 192)', //rgb(92, 143, 174)',
+          color: "white",
+          boxShadow: "rgba(50, 50, 93, 0.15) 1px 1px 2px 1px",
+          border: "1px solid rgb(113 145 193)"
+        },
+        "&.system": {
+          borderRadius: "chatMessage",
+          borderTopLeftRadius: "0px",
+          backgroundColor: "#00bcff14",
+          boxShadow: "rgba(50, 50, 93, 0.15) 1px 1px 2px 1px",
+          border: "1px solid rgb(0 28 38 / 18%)"
+        }
+      },
+      ".history": {
+        animation: `${animations.fadeInFromBottom} 0.3s`,
+        padding: "100px 32px 80px 32px",
+        border: "none",
+        height: "unset"
+      }
+    },
+    "&.mode_list": {
+      p: {
+        '&[name="semSerDescription"]': {
+          padding: "0px 23vw",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          width: "calc(100% - 2px)",
+          marginLeft: "1px"
+        }
+      },
+      display: "block",
+      gap: spacing(5),
+      px: responsive$1({
+        0: 5,
+        3: 0
+      }),
+      ".search_header_container": {
+        marginTop: "7px",
+        h1: {
+          padding: "0 23vw",
+          fontSize: "20px"
+        }
+      },
+      ".filters__container": {
+        padding: "0 25px",
+        paddingTop: "10px"
+      },
+      ".search_section_container": {
+        paddingTop: "47px",
+        mx: "auto",
+        display: "flex",
+        flexDirection: "column",
+        zIndex: 1,
+        boxShadow: "0 10px 10px #f8f4f4",
+        width: responsive$1({
+          0: "calc(100%)",
+          3: "calc(75vw + 50px)",
+          5: "calc(50vw + 50px)"
+        }),
+        background: "palette.background.default",
+        position: "sticky",
+        top: 0,
+        py: spacing(5),
+        gap: spacing(5)
+      },
+      ".list_results": {
+        animation: `${animations.fadeInFromTop} 0.3s`,
+        height: "100%",
+        width: responsive$1({ 0: "100%", 3: "75vw", 5: "50vw" }),
+        mx: "auto",
+        pt: spacing(3),
+        display: "flex",
+        flexDirection: "column",
+        gap: spacing(6)
+      },
+      ".list_item": {
+        borderRadius: "panel",
+        padding: spacing(7),
+        backgroundColor: "palette.background.paper",
+        boxShadow: "0px 4px 6px #0002",
+        border: "1px solid",
+        borderColor: "palette.border.ghost"
+      },
+      ".references_container": {
+        borderTop: "1px solid",
+        borderTopColor: "palette.border.article",
+        display: "flex",
+        gap: spacing(6),
+        pt: spacing(5)
+      }
+    }
+  }
+};
+
+const ai = {
+  connectors,
+  execution,
+  semanticSearch
+  /* PREPEND HERE */
+};
+
+const form = {
+  /* PREPEND HERE */
+  alignItems: "center",
+  justifyContent: "center",
+  display: "flex",
+  gap: 0,
+  mx: "auto",
+  background: "palette.background.paper",
+  border: "1px solid",
+  borderColor: "palette.border.section",
+  borderRadius: "panel",
+  boxShadow: "0px 2px 6px #0002",
+  width: "100%",
+  p: spacing(3),
+  "&:focus-within": focusOutline,
+  "& > *:focus[class]": {
+    outlineWidth: 0
+  },
+  ".filter_button_box": {
+    position: "relative"
+  },
+  ".applied_filters_label": {
+    position: "absolute",
+    bottom: "21px",
+    left: "20px",
+    minWidth: "10px",
+    maxHeight: "10px",
+    border: "2px solid white",
+    borderRadius: "100%",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "palette.error.main"
+  },
+  ".searchTextArea": {
+    minHeight: "34px",
+    height: "34px",
+    resize: "none",
+    py: spacing(2),
+    background: "transparent",
+    border: "none"
+  },
+  ".SearchButton": {
+    borderRadius: "panel",
+    height: "34px",
+    width: "34px",
+    flexShrink: 0,
+    background: "transparent",
+    border: "none",
+    color: "palette.text.primary"
+  }
+};
+
+const history = {
+  /* PREPEND HERE */
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  gap: 2,
+  p: 3,
+  ".history_message": {
+    px: 4,
+    py: 5,
+    maxWidth: "calc(100% - 50px)",
+    width: "fit-content",
+    wordWrap: "break-word",
+    whiteSpace: "pre-wrap",
+    borderRadius: "chatMessage",
+    "&.last": {
+      mb: 4
+    },
+    "&.user": {
+      "&.first": {
+        borderTopRightRadius: "0px"
+      },
+      backgroundColor: "rgb(108 166 203)",
+      // TODO: Set the correct color, if necessary, define it in palette
+      color: "white",
+      // TODO: Set the correct color, if necessary, define it in palette
+      boxShadow: "rgba(50, 50, 93, 0.15) 1px 1px 2px 1px",
+      // TODO: Set the correct color, if necessary, define it in palette
+      border: "1px solid rgb(113 145 193)",
+      // TODO: Set the correct color, if necessary, define it in palette
+      alignSelf: "end",
+      display: "flex",
+      flexDirection: "column"
+    },
+    "&.system": {
+      "&.first": {
+        borderTopLeftRadius: "0px"
+      },
+      backgroundColor: "#00bcff14",
+      // TODO: Set the correct color, if necessary, define it in palette
+      boxShadow: "rgba(50, 50, 93, 0.15) 1px 1px 2px 1px",
+      // TODO: Set the correct color, if necessary, define it in palette
+      border: "1px solid rgb(0 28 38 / 18%)"
+      // TODO: Set the correct color, if necessary, define it in palette
+    },
+    "&.warning": {
+      borderRadius: "2px 20px 20px 20px",
+      alignSelf: "start",
+      backgroundColor: "#ffff0024",
+      // TODO: Set the correct color, if necessary, define it in palette
+      width: "100%",
+      boxShadow: "rgba(50, 50, 93, 0.15) 1px 1px 2px 1px",
+      // TODO: Set the correct color, if necessary, define it in palette
+      border: "1px solid rgb(0 28 38 / 18%)"
+      // TODO: Set the correct color, if necessary, define it in palette
+    },
+    "&.error": {
+      borderRadius: "2px 20px 20px 20px",
+      alignSelf: "start",
+      backgroundColor: "#fd84212b",
+      // TODO: Set the correct color, if necessary, define it in palette
+      width: "100%",
+      boxShadow: "rgba(50, 50, 93, 0.15) 1px 1px 2px 1px",
+      // TODO: Set the correct color, if necessary, define it in palette
+      border: "1px solid rgb(0 28 38 / 18%)"
+      // TODO: Set the correct color, if necessary, define it in palette
+    },
+    "&.information": {
+      borderRadius: "2px 20px 20px 20px",
+      alignSelf: "start",
+      backgroundColor: "#00bcff14",
+      //'#2222cc2b',
+      width: "100%",
+      boxShadow: "rgba(50, 50, 93, 0.15) 1px 1px 2px 1px",
+      // TODO: Set the correct color, if necessary, define it in palette
+      border: "1px solid rgb(0 28 38 / 18%)"
+      // TODO: Set the correct color, if necessary, define it in palette
+    }
+  },
+  ".history_message__attachments": {
+    display: "flex",
+    justifyContent: "flex-end",
+    ".labelBox": {
+      width: "max-content",
+      background: "#fafafa",
+      color: "palette.text.primary",
+      fontSize: "14px",
+      ".labelAndIcon ": {
+        fontSize: "14px"
+      }
+    }
+  }
+};
+
+const controller = {
+  /* PREPEND HERE */
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "stretch",
+  height: "100%",
+  gap: 3,
+  ".autoscrollContainer": {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "30vh"
+  }
+};
+
+const attachments = {
+  /* PREPEND HERE */
+  alignItems: "center",
+  display: "flex",
+  flexDirection: responsive$2({ 0: "column", 3: "row" }),
+  flexWrap: "wrap",
+  gap: spacing$1(3),
+  ".attachments__more_button": {
+    border: "1px solid",
+    borderColor: "palette.border.article",
+    borderRadius: "elementBox",
+    boxShadow: "sharp",
+    p: 2
+  },
+  ".file_box": {
+    alignItems: "center",
+    border: "1px solid",
+    borderColor: "palette.border.article",
+    borderRadius: "elementBox",
+    boxShadow: "sharp",
+    display: "flex",
+    gap: spacing$1(3),
+    width: responsive$2({
+      0: "100%",
+      3: "min(90vw, 200px)"
+    }),
+    p: 2
+  },
+  ".file_box__icon": {
+    flexShrink: 0
+  },
+  ".file_box__name": {
+    boxSizing: "border-box",
+    flexGrow: 1,
+    margin: "0px",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  ".file_box__remove": {
+    flexShrink: 0,
+    p: 4
+  }
+};
+
+const message = {
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  ".closeButton": {
+    borderRadius: "5px",
+    right: "0px",
+    top: "-2px",
+    zIndex: "15",
+    position: "absolute",
+    variant: "buttons.icon-outline-danger"
+  },
+  genericBox: {
+    margin: "10px",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "12px"
+  },
+  fileName: {
+    bottom: "4px",
+    right: "4px",
+    fontSize: "12px",
+    color: "#333",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    width: "inherit",
+    textAlign: "center",
+    px: "5px"
+  },
+  textBox: {
+    variant: "layout.common.components.aiMessage.genericBox",
+    width: "50px",
+    padding: "10px",
+    backgroundColor: "#fff",
+    border: "1px solid #ddd",
+    borderRadius: "4px",
+    position: "relative"
+  },
+  textSnippet: {
+    bottom: "4px",
+    right: "4px",
+    fontSize: "12px",
+    color: "#555"
+  }
+};
+
+const chat = {
+  /* PREPEND HERE */
+  form,
+  history,
+  controller,
+  attachments,
+  message
+};
+
 const common = (theme) => {
   return {
     boxes,
@@ -4716,7 +5704,9 @@ const common = (theme) => {
     tables: tables(theme),
     components,
     trees,
-    tooltips
+    tooltips,
+    ai,
+    chat
     /* PREPEND HERE */
   };
 };
@@ -4938,10 +5928,6 @@ function useMainTheme(customTheme, customPalette, themeModifier) {
   return theme;
 }
 
-function getVariant(variant) {
-  return { variant, "data-variant": variant };
-}
-
 const CustomThemeProvider = ({
   children,
   customTheme
@@ -5476,7 +6462,7 @@ async function getRemarkable(extensions) {
 
 const parseMarkdown = async (options) => {
   const markdownLibrary = await getRemarkable(options.extensions);
-  const css = (await import('./styles-Bu6S979Y.js')).markdownParserStyles ?? new ErrorImporting();
+  const css = (await import('./styles-RMAbfDbh.js')).markdownParserStyles ?? new ErrorImporting();
   if (css instanceof ErrorImporting)
     throw new Error("Could not import css, cannot continue");
   const html = options.htmlTemplate ?? (await import('./html-B-K0BIiw.js')).markdownHtml ?? new ErrorImporting();
@@ -5544,7 +6530,7 @@ class MarkdownHeader extends MarkdownParagraph {
 var __defProp$2 = Object.defineProperty;
 var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField$2 = (obj, key, value) => {
-  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+  __defNormalProp$2(obj, key + "" , value);
   return value;
 };
 class MarkdownList extends MarkdownBlock {
@@ -5594,7 +6580,7 @@ class MarkdownList extends MarkdownBlock {
 var __defProp$1 = Object.defineProperty;
 var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField$1 = (obj, key, value) => {
-  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
+  __defNormalProp$1(obj, key + "" , value);
   return value;
 };
 var __accessCheck = (obj, member, msg) => {
@@ -5933,5 +6919,5 @@ class MarkdownBuilder {
   }
 }
 
-export { ApiaThemeProvider as A, MarkdownBlock as M, getColorStates as a, getColorsAndStatesByDefinition as b, getColorsAndStatesByPath as c, getColorsByDefinition as d, getColorsByPath as e, getOneColorState as f, getColorState as g, applyStatesGetColor as h, makeStyledComponent as i, injectStyles as j, getSpacingLayouts as k, spacing as l, markdownExtensions as m, smallButton as n, focusOutline as o, parsePalette as p, getVariant as q, responsive$1 as r, spacingLayouts as s, MarkdownBuilder as t, useMainTheme as u, parseMarkdown as v, MarkdownList as w, MarkdownParagraph as x, MarkdownTable as y, MarkdownTableOfContents as z };
-//# sourceMappingURL=index-CQrjUy7r.js.map
+export { ApiaThemeProvider as A, MarkdownTableOfContents as B, Form as F, MaterialInput as M, getColorStates as a, getColorsAndStatesByDefinition as b, getColorsAndStatesByPath as c, getColorsByDefinition as d, getColorsByPath as e, getOneColorState as f, getColorState as g, applyStatesGetColor as h, makeStyledComponent as i, injectStyles as j, getSpacingLayouts as k, spacing as l, markdownExtensions as m, smallButton as n, focusOutline as o, parsePalette as p, getVariant as q, responsive$1 as r, spacingLayouts as s, MarkdownBlock as t, useMainTheme as u, MarkdownBuilder as v, parseMarkdown as w, MarkdownList as x, MarkdownParagraph as y, MarkdownTable as z };
+//# sourceMappingURL=index-SJZzkOTL.js.map