@apia/theme 3.0.17 → 3.0.20

package/dist/{index-BkIq8Zxt.js → index-DGezuU-i.js}

@@ -1,11 +1,12 @@
 import cloneDeep from 'lodash-es/cloneDeep';
 import tinycolor from 'tinycolor2';
 import merge from 'lodash-es/merge';
-import '@theme-ui/match-media';
 import { jsx, Fragment } from 'theme-ui/jsx-runtime';
-import { ThemeUIProvider, useThemeUI, Box, ThemeProvider } from 'theme-ui';
+import { Box, ThemeUIProvider, useThemeUI, ThemeProvider } from 'theme-ui';
+import '@theme-ui/match-media';
 import { useState, useRef, useMemo, Suspense } from 'react';
 import { useMount, setValueByPath, EventEmitter } from '@apia/util';
+import { keyframes } from '@emotion/react';
 import { spacing as spacing$1, responsive as responsive$2 } from '@apia/theme';
 
 function defaultLighten(color, ratio) {
@@ -1224,6 +1225,8 @@ function getThemeColorsObject(theme) {
   return colors;
 }
 
+const Form = (props) => /* @__PURE__ */ jsx(Box, { as: "form", ...props });
+
 const alerts = {
   primary: {
     border: "1px solid",
@@ -1867,8 +1870,48 @@ const menu = {
 };
 var menu$1 = menu;
 
+const vibrate = 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 = { vibrate, fadeInFromBottom, fadeInFromTop };
+var animations$1 = animations;
+
 const root = {
   ...menu$1,
+  ...animations$1,
   height: "100%",
   "*": {
     fontFamily: "body",
@@ -2060,7 +2103,8 @@ const baseTheme = () => {
       default: 0,
       panel: "7px",
       modals: "7px",
-      tooltips: "7px"
+      tooltips: "7px",
+      chatMessage: "16px"
     },
     shadows: {
       dataGridHeader: "2px 2px 4px 0px #0008",
@@ -3748,6 +3792,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": {
@@ -4368,12 +4417,14 @@ const accordion = {
   }
 };
 
-const chat = {
+const chat$1 = {
   /* PREPEND HERE */
   height: "calc(100vh - 300px)",
+  minHeight: "25vh",
   width: "100%",
-  border: "1px solid",
-  borderColor: "palette.border.section",
+  flexShrink: 1,
+  // border: '1px solid',
+  // borderColor: 'palette.border.section',
   ".autoscrollContainer": {
     display: "flex",
     flexDirection: "column",
@@ -4383,32 +4434,50 @@ const chat = {
   },
   ".history__message": {
     borderRadius: "2px",
-    p: 3,
+    px: 4,
+    py: 5,
     width: "80%",
     wordWrap: "break-word",
     whiteSpace: "pre-wrap",
     "&.user": {
-      alignSelf: "end",
-      backgroundColor: "#90ee902b"
+      borderRadius: "20px 2px 20px 20px",
+      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)",
+      alignSelf: "end"
     },
     "&.system": {
-      alignSelf: "start",
-      backgroundColor: "#5701f52b"
+      borderRadius: "2px 20px 20px 20px",
+      backgroundColor: "#00bcff14",
+      boxShadow: "rgba(50, 50, 93, 0.15) 1px 1px 2px 1px",
+      border: "1px solid rgb(0 28 38 / 18%)"
     },
     "&.warning": {
+      borderRadius: "2px 20px 20px 20px",
       alignSelf: "start",
       backgroundColor: "#ffff0024",
-      width: "100%"
+      width: "100%",
+      boxShadow: "rgba(50, 50, 93, 0.15) 1px 1px 2px 1px",
+      border: "1px solid rgb(0 28 38 / 18%)"
     },
     "&.error": {
+      borderRadius: "2px 20px 20px 20px",
       alignSelf: "start",
       backgroundColor: "#fd84212b",
-      width: "100%"
+      width: "100%",
+      boxShadow: "rgba(50, 50, 93, 0.15) 1px 1px 2px 1px",
+      border: "1px solid rgb(0 28 38 / 18%)"
     },
     "&.information": {
+      borderRadius: "2px 20px 20px 20px",
       alignSelf: "start",
-      backgroundColor: "#2222cc2b",
-      width: "100%"
+      backgroundColor: "#00bcff14",
+      //'#2222cc2b',
+      width: "100%",
+      boxShadow: "rgba(50, 50, 93, 0.15) 1px 1px 2px 1px",
+      border: "1px solid rgb(0 28 38 / 18%)"
     },
     "&.multipleChoice": {
       p: 0
@@ -4445,11 +4514,13 @@ const chat = {
     }
   },
   ".help__container": {
+    borderRadius: "2px 20px 20px 20px",
     display: "flex",
     flexDirection: "column",
     gap: 4
   },
   ".functionHelp": {
+    borderRadius: "2px 20px 20px 20px",
     display: "flex",
     flexDirection: "column",
     gap: 3,
@@ -4549,19 +4620,32 @@ const toolbar = {
 const autocomplete = {
   "&:focus-within": focusOutline,
   ".autocomplete__inputWrapper": {
-    position: "relative"
+    display: "flex",
+    alignItems: "center",
+    border: "1px solid",
+    borderColor: "palette.border.field"
+  },
+  ".autocomplete__input": {
+    textAlign: "left",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    border: "none",
+    outline: "none !important"
   },
   ".autocomplete__icons": {
     alignItems: "center",
     display: "flex",
     gap: 2,
     height: "24px",
-    position: "absolute",
-    right: "12px",
-    top: "calc(50% - 12px)",
+    p: 3,
+    position: "relative",
+    width: "30px",
     ".autocomplete__loadingSpinner": {
-      width: "24px",
-      height: "24px"
+      position: "absolute",
+      right: "7px",
+      width: "20px",
+      height: "20px"
     },
     ".autocomplete__downArrow": {
       cursor: "pointer",
@@ -4599,6 +4683,8 @@ const datePicker = {
 
 const aiMessage = {
   position: "relative",
+  display: "flex",
+  flexDirection: "column",
   ".closeButton": {
     borderRadius: "5px",
     right: "0px",
@@ -4665,7 +4751,7 @@ const components = {
   autocomplete: autocomplete$1,
   datePicker,
   pagination: pagination$1,
-  chat,
+  chat: chat$1,
   toolbar,
   aiMessage
 };
@@ -4701,9 +4787,167 @@ const boxes = {
   /* PREPEND HERE */
 };
 
+const form = {
+  /* PREPEND HERE */
+  ".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"
+    }
+  },
+  ".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 */
+  width: "100%",
+  flexShrink: 1,
+  height: "calc(100vh - 300px)",
+  minHeight: "25vh",
+  flexGrow: 1,
+  ".messages_box": { fontSize: "22px", minHeight: "88vh" },
+  ".history__message": {
+    borderRadius: "2px",
+    px: 4,
+    py: 5,
+    width: "80%",
+    wordWrap: "break-word",
+    whiteSpace: "pre-wrap",
+    "&.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)",
+      alignSelf: "end",
+      display: "flex",
+      flexDirection: "column",
+      // gap: '16px',
+      width: "max-content",
+      ".additionalContent_wrapper": {
+        display: "flex",
+        justifyContent: "flex-end",
+        ".labelBox": {
+          width: "max-content",
+          background: "#fafafa",
+          color: "palette.text.primary",
+          fontSize: "14px",
+          ".labelAndIcon ": {
+            fontSize: "14px"
+          }
+        }
+      }
+    },
+    "&.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%)"
+    },
+    "&.warning": {
+      borderRadius: "2px 20px 20px 20px",
+      alignSelf: "start",
+      backgroundColor: "#ffff0024",
+      width: "100%",
+      boxShadow: "rgba(50, 50, 93, 0.15) 1px 1px 2px 1px",
+      border: "1px solid rgb(0 28 38 / 18%)"
+    },
+    "&.error": {
+      borderRadius: "2px 20px 20px 20px",
+      alignSelf: "start",
+      backgroundColor: "#fd84212b",
+      width: "100%",
+      boxShadow: "rgba(50, 50, 93, 0.15) 1px 1px 2px 1px",
+      border: "1px solid rgb(0 28 38 / 18%)"
+    },
+    "&.information": {
+      borderRadius: "2px 20px 20px 20px",
+      alignSelf: "start",
+      backgroundColor: "#00bcff14",
+      //'#2222cc2b',
+      width: "100%",
+      boxShadow: "rgba(50, 50, 93, 0.15) 1px 1px 2px 1px",
+      border: "1px solid rgb(0 28 38 / 18%)"
+    }
+  },
+  ".history": {
+    animation: `${animations$1.fadeInFromBottom} 0.3s`,
+    padding: "100px 32px 80px 32px",
+    border: "none",
+    height: "unset"
+  },
+  ".help__container": {
+    borderRadius: "2px 20px 20px 20px",
+    display: "flex",
+    flexDirection: "column",
+    gap: 4
+  },
+  ".autoscrollContainer": {
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    gap: 3,
+    p: 3
+  }
+};
+
+const chat = {
+  /* PREPEND HERE */
+  form,
+  history
+};
+
 const common = (theme) => {
   return {
     boxes,
+    chat,
     forms,
     modals,
     tables: tables(theme),
@@ -5469,7 +5713,7 @@ async function getRemarkable(extensions) {
 
 const parseMarkdown = async (options) => {
   const markdownLibrary = await getRemarkable(options.extensions);
-  const css = (await import('./styles-LVUMy7Mt.js')).markdownParserStyles ?? new ErrorImporting();
+  const css = (await import('./styles-CHGH27gK.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();
@@ -5926,5 +6170,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-BkIq8Zxt.js.map
+export { ApiaThemeProvider as A, Form as F, 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-DGezuU-i.js.map