@apia/theme 4.0.16 → 4.0.18

package/dist/{index-MgxPjTTE.js → index-Dn_wc72C.js}

@@ -3,8 +3,8 @@ 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 { forwardRef, useState, useRef, useMemo, Suspense } from 'react';
 import '@theme-ui/match-media';
-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';
@@ -697,7 +697,7 @@ const components$1 = (theme) => {
     secondaryTable: {
       borderColor: palette.background.paper,
       header: {
-        backgroundColor: palette.background.default,
+        backgroundColor: palette.darkenColor(palette.background.default, 2),
         color: palette.text.primary,
         borderColor: palette.background.default
       },
@@ -706,12 +706,12 @@ const components$1 = (theme) => {
         backgroundColor: palette.background.paper,
         evenRowsBackgroundColor: palette.darkenColor(
           palette.background.paper,
-          3
+          2
         ),
         color: palette.text.primary,
-        borderColor: palette.gray["800"],
+        borderColor: palette.darkenColor(palette.background.paper, 5),
         selectedRows: {
-          borderColor: palette.gray["800"],
+          borderColor: palette.darkenColor(palette.background.paper, 5),
           backgroundColor: palette.getOneState(
             { backgroundColor: palette.background.paper },
             "selected"
@@ -1253,9 +1253,11 @@ const MaterialInput = ({ title, label, boxProperties, ...props }) => /* @__PURE_
     ]
   }
 );
-var MaterialInput$1 = MaterialInput;
 
 const Form = (props) => /* @__PURE__ */ jsx(Box, { as: "form", ...props });
+const Table = forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx(Box, { as: "table", ref, ...props })
+);
 
 const alerts = {
   primary: {
@@ -1676,7 +1678,6 @@ const buttons = {
     ...smallButton
   }
 };
-var buttons$1 = buttons;
 
 const text = {
   default: {
@@ -1696,7 +1697,6 @@ const text = {
     fontWeight: "heading"
   }
 };
-var text$1 = text;
 
 const transitions = {
   "@keyframes growHorizontal": {
@@ -1834,14 +1834,25 @@ const menu = {
     position: "relative",
     padding: "0.375rem 1.5rem",
     paddingLeft: "2.2rem",
-    ".withIcon": {
-      padding: "0px",
+    "&:has(> div.menu_item)": { paddingLeft: "10px" },
+    ".menu_item": {
+      padding: "0px 4px",
       display: "flex",
-      gap: "4px",
-      justifyContent: "left",
+      gap: "12px",
+      justifyContent: "flex-start",
       alignItems: "center",
-      ".icon": {
-        flexShrink: 0
+      width: "100%",
+      ".children_box": {},
+      ".icon_box": {
+        textAlign: "center",
+        marginTop: "3px",
+        flexShrink: "0",
+        width: "32px",
+        ".icon": {
+          marginLeft: 0,
+          flexShrink: 0,
+          alignSelf: "flex-start"
+        }
       }
     }
   },
@@ -1891,6 +1902,9 @@ const menu = {
   ".szh-menu__item--type-checkbox.szh-menu__item--checked::before": {
     content: '"\u2714"'
   },
+  ".szh-menu__submenu.with-icon>.szh-menu__item": {
+    paddingLeft: "58px"
+  },
   ".szh-menu__submenu>.szh-menu__item": { paddingRight: "2.5rem" },
   ".szh-menu__submenu>.szh-menu__item::after": {
     content: '"\u276F"',
@@ -1909,10 +1923,9 @@ const menu = {
     color: theme.palette.text.primary
   })
 };
-var menu$1 = menu;
 
 const root = {
-  ...menu$1,
+  ...menu,
   height: "100%",
   "*": {
     fontFamily: "body",
@@ -2089,7 +2102,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',
@@ -2156,7 +2169,7 @@ const baseTheme = () => {
       iconLg: "32px",
       iconXl: "48px"
     },
-    text: text$1,
+    text,
     zIndices: {
       stickyElements: 600,
       menu: 1e3,
@@ -2194,7 +2207,6 @@ const customCheckbox = {
   })
   /* PREPEND HERE */
 };
-var customCheckbox$1 = customCheckbox;
 
 const checkbox = {
   borderRadius: "default",
@@ -2249,7 +2261,6 @@ const checkbox = {
     }
   }
 };
-var checkbox$1 = checkbox;
 
 const dateInput = {
   display: "flex",
@@ -2304,7 +2315,6 @@ const dateInput = {
   }),
   backgroundColor: void 0
 };
-var dateInput$1 = dateInput;
 
 const iconInput = {
   display: "flex",
@@ -2337,7 +2347,6 @@ const iconInput = {
     border: "none"
   }
 };
-var iconInput$1 = iconInput;
 
 const input = {
   variant: "text.default",
@@ -2384,7 +2393,6 @@ const input = {
     }
   }
 };
-var input$1 = input;
 
 const label = {
   variant: "text.default",
@@ -2411,7 +2419,6 @@ const label = {
     }
   }
 };
-var label$1 = label;
 
 const radio = {
   width: "32px",
@@ -2424,7 +2431,6 @@ const radio = {
     fill: "inherit"
   }
 };
-var radio$1 = radio;
 
 const select = {
   variant: "text.default",
@@ -2449,7 +2455,6 @@ const select = {
     display: "none"
   }
 };
-var select$1 = select;
 
 function selectMultiple(theme) {
   return {
@@ -2495,7 +2500,6 @@ const Switch = {
   },
   backgroundColor: "form.fields.checked.borderColor"
 };
-var Switch$1 = Switch;
 
 const textarea = {
   height: "100%",
@@ -2503,7 +2507,6 @@ const textarea = {
   resize: "vertical",
   variant: "forms.input"
 };
-var textarea$1 = textarea;
 
 const deletableInput = {
   border: "1px solid",
@@ -2515,12 +2518,12 @@ const deletableInput = {
     border: "none"
   },
   ".deletableInput__deleteButton": {
-    height: "100%",
+    height: "80%",
     outlineOffset: "-2px",
     position: "absolute",
     right: 0,
     top: 0,
-    width: "45px",
+    width: "40px",
     ...getColorsAndStatesByPath("buttons.deletableInputButton", {
       states: { path: true }
     })
@@ -2563,22 +2566,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"
@@ -2739,7 +2741,6 @@ const confirm = {
     }
   }
 };
-var confirm$1 = confirm;
 
 const table = {
   display: "flex",
@@ -2772,7 +2773,6 @@ const table = {
     }
   }
 };
-var table$1 = table;
 
 const tableModal = {
   additionalFiltersModal: {
@@ -2865,7 +2865,6 @@ const tableModal = {
     mt: "7px"
   }
 };
-var tableModal$1 = tableModal;
 
 const buttonsBar = {
   flexDirection: "row",
@@ -2874,7 +2873,6 @@ const buttonsBar = {
   gap: spacing$1(3),
   mb: spacing$1(0)
 };
-var buttonsBar$1 = buttonsBar;
 
 const apiaFinder = {
   additionalFiltersModal: {
@@ -2970,16 +2968,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",
@@ -3184,7 +3181,7 @@ function getSelectionStyles() {
   };
 }
 
-const primary$6 = (theme) => {
+const primary$4 = (theme) => {
   return {
     variant: "colors.tables.primary",
     width: "100%",
@@ -3214,6 +3211,12 @@ const primary$6 = (theme) => {
           display: "table-cell",
           verticalAlign: "center",
           wordBreak: "break-word",
+          textAlign: "left",
+          "&.additional-column": {
+            width: "50px",
+            textAlign: "center",
+            verticalAlign: "middle"
+          },
           '&[role="presentation"]': {
             display: "none"
           },
@@ -3343,6 +3346,14 @@ const primary$6 = (theme) => {
           borderBottom: "1px solid",
           background: "transparent",
           borderColor: "components.primaryTable.body.borderColor",
+          "&.additional-column": {
+            width: "50px",
+            textAlign: "center",
+            padding: 4,
+            button: {
+              margin: "auto"
+            }
+          },
           "&.stickyColumn": {
             position: "sticky",
             left: 0,
@@ -3398,6 +3409,10 @@ const primary$6 = (theme) => {
       borderWidth: "1.5px",
       borderStyle: "dotted"
     },
+    "&.editionMode *:focus": {
+      outlineWidth: "5px",
+      outlineStyle: "dotted"
+    },
     ".stateCell": {
       width: "50px",
       maxWidth: "50px",
@@ -3567,7 +3582,7 @@ const responsive = (theme) => {
   };
 };
 
-const secondary$1 = {
+const secondary = {
   variant: "layout.common.tables.primary",
   borderColor: "components.secondaryTable.borderColor",
   "& thead": {
@@ -3640,11 +3655,12 @@ const clean = (theme) => {
           display: "table-cell",
           verticalAlign: "center",
           wordBreak: "break-word",
-          p: 0,
-          px: 0,
-          py: 0,
+          py: spacing(3),
+          px: 4,
           border: "none",
           borderBottom: "1px solid #ccc",
+          textAlign: "left",
+          fontWeight: "bold",
           '&[role="presentation"]': {
             display: "none"
           },
@@ -3787,9 +3803,10 @@ const clean = (theme) => {
           }
         },
         td: {
+          py: spacing(3),
+          px: 4,
           border: "none",
           display: "table-cell",
-          p: 0,
           overflow: "hidden",
           whiteSpace: "nowrap",
           textOverflow: "ellipsis",
@@ -3813,10 +3830,6 @@ const clean = (theme) => {
           ".autoellipsis__container": {
             width: "100%"
           },
-          "& > *": {
-            py: spacing(3),
-            px: 4
-          },
           borderBottomWidth: "1px",
           borderBottomStyle: "solid",
           borderBottomColor: "components.cleanTable.body.borderColor"
@@ -3897,10 +3910,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 */
   };
@@ -4000,7 +4013,7 @@ const forms = {
   /* PREPEND HERE */
 };
 
-const primary$4 = (theme) => {
+const primary$3 = (theme) => {
   return {
     /* PREPEND HERE */
     position: "relative",
@@ -4134,7 +4147,6 @@ const primary$4 = (theme) => {
     }
   };
 };
-var primary$5 = primary$4;
 
 const mobx = (theme) => {
   return {
@@ -4217,14 +4229,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",
@@ -4234,7 +4245,7 @@ const primary$3 = {
 };
 
 const tooltips = {
-  primary: primary$3
+  primary: primary$2
   /* PREPEND HERE */
 };
 
@@ -4370,24 +4381,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: {
@@ -4515,6 +4522,11 @@ const chat$1 = {
   width: "100%",
   border: "1px solid",
   borderColor: "palette.border.section",
+  ".chat_controller": {
+    display: "flex",
+    flexDirection: "column",
+    gap: "3"
+  },
   ".autoscrollContainer": {
     display: "flex",
     flexDirection: "column",
@@ -4693,7 +4705,13 @@ const autocomplete = {
     position: "relative"
   },
   ".autocomplete__search.disabled": {
-    cursor: "not-allowed"
+    cursor: "not-allowed",
+    background: "form.fields.disabled.backgroundColor",
+    borderColor: "form.fields.disabled.backgroundColor"
+  },
+  ".autocomplete__search.readOnly": {
+    background: "form.fields.readonly.backgroundColor",
+    borderColor: "form.fields.readonly.backgroundColor"
   },
   ".autocomplete__icons": {
     alignItems: "center",
@@ -4718,8 +4736,14 @@ const autocomplete = {
     background: "palette.background.paper",
     border: "1px solid",
     borderColor: "palette.border.field",
-    overflow: "auto",
-    zIndex: "tooltip",
+    "&.autocomplete__options__box": {
+      background: "palette.background.paper",
+      border: "1px solid",
+      borderColor: "palette.border.field",
+      zIndex: "tooltip",
+      overflow: "auto",
+      display: "block"
+    },
     ".autocomplete__option": {
       variant: "buttons.link",
       border: "none",
@@ -4735,7 +4759,6 @@ const autocomplete = {
     }
   }
 };
-var autocomplete$1 = autocomplete;
 
 const datePicker = {
   maxWidth: "400px"
@@ -4832,16 +4855,126 @@ const infoButton = {
   }
 };
 
+const rangeFilter = {
+  backgroundColor: "white",
+  display: "flex",
+  alignItems: "center",
+  ".ApiaFilter__Range__Low": {
+    "input:first-of-type": {
+      textAlign: "end"
+    },
+    "input:first-of-type::-webkit-inner-spin-button, input:first-of-type::-webkit-outer-spin-button": {
+      WebkitAppearance: "none",
+      margin: 0
+    },
+    "input[type=number]": {
+      MozAppearance: "textfield"
+    }
+  },
+  ".ApiaFilter__Range__High": {
+    "input:first-of-type::-webkit-inner-spin-button, input:first-of-type::-webkit-outer-spin-button": {
+      WebkitAppearance: "none",
+      margin: 0
+    },
+    "input[type=number]": {
+      MozAppearance: "textfield"
+    }
+  },
+  "div:has(.ApiaFilter__Range__UnitSelector)": {
+    flexShrink: 0,
+    flexBasis: "80px"
+  }
+};
+
+const filters = {
+  rangeFilter
+  /* PREPEND HERE */
+};
+
+const fileCard = {
+  "&.fileCard": {
+    display: "flex",
+    alignItems: "center",
+    position: "relative",
+    border: "1px solid",
+    borderColor: "palette.gray.800",
+    height: "50px",
+    // borderRadius: 'default',
+    borderRadius: "7px",
+    boxShadow: "0px 1px 1px #c7c7c7",
+    background: "palette.background.paper",
+    cursor: "pointer",
+    ".fileCard__content": {
+      display: "flex",
+      alignItems: "center",
+      p: 3,
+      gap: 3,
+      width: "100%"
+    },
+    button: {
+      boxShadow: "none"
+    }
+  },
+  "&.selected": (theme) => {
+    return {
+      backgroundColor: theme.palette.getColor("transparent", "selected")
+    };
+  },
+  "&.fileList__modal": {
+    // pr: 7,
+  },
+  ".file__icon": {
+    flexShrink: 0
+  },
+  ".fileCard__name": {
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  ".fileCard__additionalButtons": {
+    flexShrink: 0,
+    display: "flex",
+    height: "100%",
+    ml: 3
+  },
+  ".fileCard__additionalButtons:hover": {
+    color: "palette.text.primary"
+  },
+  ".fileCard__delete, .fileCard__additionalButton": {
+    width: "auto",
+    height: "100%",
+    backgroundColor: "inherit",
+    border: "none",
+    m: 0,
+    flexShrink: 0,
+    px: 3,
+    borderRadius: "7px",
+    color: "palette.text.primary",
+    svg: {
+      width: "18px",
+      height: "18px"
+    }
+  },
+  ".fileCard__additionalButton[class]:hover": (theme) => {
+    return {
+      backgroundColor: theme.palette.getColor("white", "hover"),
+      color: "palette.text.primary"
+    };
+  }
+};
+
 const components = {
   /* PREPEND HERE */
   accordion,
-  autocomplete: autocomplete$1,
+  autocomplete,
   datePicker,
-  pagination: pagination$1,
+  pagination,
   chat: chat$1,
   toolbar,
   aiMessage,
-  infoButton
+  infoButton,
+  filters,
+  fileCard
 };
 
 const labelBox = {
@@ -4868,10 +5001,9 @@ const labelBox = {
     }
   }
 };
-var labelBox$1 = labelBox;
 
 const boxes = {
-  labelBox: labelBox$1
+  labelBox
   /* PREPEND HERE */
 };
 
@@ -5054,13 +5186,11 @@ const formsAssistant = {
     }
   }
 };
-var formsAssistant$1 = formsAssistant;
 
 const execution = {
-  formsAssistant: formsAssistant$1
+  formsAssistant
   /* PREPEND HERE */
 };
-var execution$1 = execution;
 
 const connectors = {
   testResult: {
@@ -5087,9 +5217,8 @@ const connectors = {
     }
   }
 };
-var connectors$1 = connectors;
 
-const vibrate = keyframes`
+keyframes`
 0% {
 	transform: rotate(0);
 }
@@ -5125,12 +5254,110 @@ const fadeInFromTop = keyframes`
 	opacity: 1;
 }
 `;
-const animations = { vibrate, fadeInFromBottom, fadeInFromTop };
-var animations$1 = animations;
+const fadeIn = keyframes`
+0% {
+	opacity: 0;
+}
+100% {
+	opacity: 1;
+}
+`;
+const animations = { fadeInFromBottom, fadeInFromTop, fadeIn };
 
 const semanticSearch = {
   execution: {
     background: "palette.background.default",
+    ".chat_history": {
+      margin: "50px 0 90px 0"
+    },
+    pre: {
+      m: 0
+    },
+    ".sem_search__system_message": {
+      display: "flex",
+      flexDirection: "column",
+      position: "relative"
+    },
+    ".sem_search__stream_blocks": {
+      display: "flex",
+      flexDirection: "column",
+      gap: 3,
+      padding: "16px 24px 0 24px"
+    },
+    ".sem_search__stream_block": {
+      animation: `${animations.fadeIn} 0.2s`,
+      borderRadius: "5px",
+      padding: "5px 10px",
+      background: "#d8e3e7",
+      color: "black",
+      listStyle: "disc"
+    },
+    ".sem_search__thumbs": {
+      display: "flex",
+      justifyContent: "end",
+      gap: 2,
+      position: "absolute",
+      bottom: 0,
+      right: 0,
+      ".unselected": {
+        color: "#c2c2c2"
+      },
+      ".selected": {
+        strokeWidth: "15px"
+      },
+      ".no_feedback": {
+        color: "gray"
+      }
+    },
+    ".ellipsis": {
+      padding: "0 24px 32px 24px",
+      fontWeight: "bold"
+    },
+    ".markdown": {
+      padding: "0 24px 32px 24px",
+      "h1, h2, h3, h4, h5, h6": {
+        margin: "32px 0px 20px 0px",
+        "& *": {
+          fontSize: "inherit",
+          fontWeight: "inherit",
+          fontFamily: "inherit"
+        }
+      },
+      blockquote: {
+        fontStyle: "italic"
+      },
+      table: {
+        variant: "layout.common.tables.secondary",
+        thead: {
+          zIndex: 0
+        }
+      },
+      h2: {
+        display: "block",
+        borderBottom: "2px solid hsl(195deg 10% 49% / 50%)",
+        paddingBottom: "16px"
+      },
+      h3: {
+        textDecoration: "underline"
+      },
+      h4: {
+        fontSize: "20px"
+      },
+      ul: {
+        listStyle: "unset",
+        listStyleType: "disc",
+        margin: "unset",
+        padding: "unset",
+        paddingLeft: "20px",
+        paddingBottom: "16px"
+      },
+      "ol + ul, ul + ul, ol ul, ul ul": {
+        paddingLeft: "72px"
+      },
+      "p, ul, ol, blockQuote, table": {
+        mt: "16px"
+      }
+    },
     ".filters__container": {
       " > div": {
         display: "flex",
@@ -5237,10 +5464,6 @@ const semanticSearch = {
       background: "transparent",
       border: "none"
     },
-    "a:-webkit-any-link": {
-      color: "unset",
-      textDecoration: "unset"
-    },
     ".references_item": {
       maxWidth: "180px",
       whiteSpace: "nowrap",
@@ -5351,7 +5574,12 @@ const semanticSearch = {
           ml: "1px"
         }
       },
-      ".messages_box": { fontSize: "22px", minHeight: "88vh" },
+      ".messages_box": {
+        fontSize: "22px",
+        minHeight: "82vh",
+        paddingTop: "7%",
+        marginBottom: "8%"
+      },
       ".history__message": {
         borderRadius: "panel",
         margin: "15px",
@@ -5376,7 +5604,7 @@ const semanticSearch = {
         }
       },
       ".history": {
-        animation: `${animations$1.fadeInFromBottom} 0.3s`,
+        animation: `${animations.fadeInFromBottom} 0.3s`,
         padding: "100px 32px 80px 32px",
         border: "none",
         height: "unset"
@@ -5429,7 +5657,7 @@ const semanticSearch = {
         gap: spacing(5)
       },
       ".list_results": {
-        animation: `${animations$1.fadeInFromTop} 0.3s`,
+        animation: `${animations.fadeInFromTop} 0.3s`,
         height: "100%",
         width: responsive$1({ 0: "100%", 3: "75vw", 5: "50vw" }),
         mx: "auto",
@@ -5453,19 +5681,22 @@ const semanticSearch = {
         gap: spacing(6),
         pt: spacing(5)
       }
+    },
+    ".autogrow_textarea": {
+      maxHeight: "20vh",
+      width: "100%"
     }
   }
 };
 
 const ai = {
-  connectors: connectors$1,
-  execution: execution$1,
+  connectors,
+  execution,
   semanticSearch
   /* PREPEND HERE */
 };
-var ai$1 = ai;
 
-const form = {
+const form$1 = {
   /* PREPEND HERE */
   alignItems: "center",
   justifyContent: "center",
@@ -5479,6 +5710,17 @@ const form = {
   boxShadow: "0px 2px 6px #0002",
   width: "100%",
   p: spacing(3),
+  flexDirection: "column",
+  position: "relative",
+  ".chatButtons": {
+    display: "flex",
+    flexDirection: "row",
+    alignitems: "end",
+    justifyContent: "end",
+    position: "absolute",
+    bottom: "4px",
+    right: "4px"
+  },
   "&:focus-within": focusOutline,
   "& > *:focus[class]": {
     outlineWidth: 0
@@ -5500,14 +5742,16 @@ const form = {
     backgroundColor: "palette.error.main"
   },
   ".searchTextArea": {
-    minHeight: "34px",
-    height: "34px",
+    minHeight: "16px",
+    height: "16px",
+    width: "100%",
+    maxHeight: "30vh",
     resize: "none",
-    py: spacing(2),
+    py: 0,
     background: "transparent",
     border: "none"
   },
-  ".SearchButton": {
+  ".ChatBarButton": {
     borderRadius: "panel",
     height: "34px",
     width: "34px",
@@ -5515,6 +5759,15 @@ const form = {
     background: "transparent",
     border: "none",
     color: "palette.text.primary"
+  },
+  ".isRecording": {
+    borderRadius: "panel",
+    height: "34px",
+    width: "34px",
+    flexShrink: 0,
+    background: "transparent",
+    border: "none",
+    color: "red"
   }
 };
 
@@ -5525,6 +5778,14 @@ const history = {
   width: "100%",
   gap: 2,
   p: 3,
+  ".history_message__content": {
+    display: "flex",
+    flexDirection: "column",
+    gap: "16px",
+    h3: {
+      fontSize: "20px"
+    }
+  },
   ".history_message": {
     px: 4,
     py: 5,
@@ -5540,10 +5801,16 @@ const history = {
       "&.first": {
         borderTopRightRadius: "0px"
       },
+      "&.first:has(+ .first))": {
+        mb: 4
+      },
       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
+      ".fileCard__content": {
+        color: "palette.text.primary"
+      },
       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)",
@@ -5556,6 +5823,9 @@ const history = {
       "&.first": {
         borderTopLeftRadius: "0px"
       },
+      "&.first:has(+ .first))": {
+        mb: 4
+      },
       backgroundColor: "#00bcff14",
       // TODO: Set the correct color, if necessary, define it in palette
       boxShadow: "rgba(50, 50, 93, 0.15) 1px 1px 2px 1px",
@@ -5617,12 +5887,16 @@ const controller = {
   display: "flex",
   flexDirection: "column",
   alignItems: "stretch",
-  height: "100%",
+  maxHeight: "50vh",
   gap: 3,
+  flexBasis: "50vh",
   ".autoscrollContainer": {
     flexGrow: 1,
     flexShrink: 1,
-    flexBasis: "30vh"
+    overflow: "auto"
+  },
+  ".search_controls": {
+    flexShrink: 0
   }
 };
 
@@ -5722,8 +5996,6 @@ const message = {
 
 const assistant = {
   floatingAssistant: {
-    maxHeight: "50vh",
-    height: "50vh",
     "& div.modal__content[class]": {
       p: 3,
       width: "min(90vw, 500px)"
@@ -5731,9 +6003,6 @@ const assistant = {
     ".modal__main": {
       maxWidth: "unset",
       overflow: "hidden"
-    },
-    ".autoscrollContainer": {
-      height: "30vh"
     }
   }
 };
@@ -5741,7 +6010,7 @@ const assistant = {
 const chat = {
   /* PREPEND HERE */
   assistant,
-  form,
+  form: form$1,
   history,
   controller,
   attachments,
@@ -5757,7 +6026,7 @@ const common = (theme) => {
     components,
     trees,
     tooltips,
-    ai: ai$1,
+    ai,
     chat
     /* PREPEND HERE */
   };
@@ -5908,11 +6177,47 @@ const charts = {
   }
 };
 
+const form = {
+  /* PREPEND HERE */
+  flexDirection: "column",
+  ".fieldWrapper": {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch",
+    "&.checkbox": {
+      alignItems: "start"
+    }
+  },
+  ".error": {
+    borderLeftStyle: "solid",
+    borderLeftWidth: "4px",
+    borderLeftColor: "danger"
+  },
+  ".touched": {
+    borderStyle: "solid",
+    borderWidth: "1px",
+    borderColor: "palette.primary.main",
+    "&.radio-label": {
+      border: "none",
+      "input[role]:checked~svg": {
+        "&, path": {
+          color: "palette.primary.main"
+        }
+      }
+    }
+  }
+};
+
+const validations = {
+  form
+};
+
 const layout = (theme) => {
   return {
     charts,
     common: common(theme),
-    util
+    util,
+    validations
     /* PREPEND HERE */
   };
 };
@@ -6514,7 +6819,7 @@ async function getRemarkable(extensions) {
 
 const parseMarkdown = async (options) => {
   const markdownLibrary = await getRemarkable(options.extensions);
-  const css = (await import('./styles-B_o_dZr1.js')).markdownParserStyles ?? new ErrorImporting();
+  const css = (await import('./styles-BVjRzTR5.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();
@@ -6582,7 +6887,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 {
@@ -6632,7 +6937,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) => {
@@ -6971,5 +7276,5 @@ class MarkdownBuilder {
   }
 }
 
-export { ApiaThemeProvider as A, MarkdownTableOfContents as B, Form as F, MaterialInput$1 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-MgxPjTTE.js.map
+export { ApiaThemeProvider as A, MarkdownTableOfContents as B, Form as F, MaterialInput as M, Table as T, 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-Dn_wc72C.js.map