@apia/theme 4.0.45 → 4.0.47

package/dist/{index-Xe8KO81h.js → index-BOvGFjjE.js}

@@ -6,7 +6,7 @@ import { Box, ThemeUIProvider, useThemeUI, ThemeProvider } from 'theme-ui';
 import { forwardRef, useState, useRef, useMemo, Suspense } from 'react';
 import '@theme-ui/match-media';
 import { useMount, setValueByPath, EventEmitter } from '@apia/util';
-import { spacing as spacing$1, responsive as responsive$2, getOneColorState as getOneColorState$1, focusOutline as focusOutline$1, getColorsAndStatesByPath as getColorsAndStatesByPath$1 } from '@apia/theme';
+import { spacing as spacing$1, responsive as responsive$2, getOneColorState as getOneColorState$1, focusOutline as focusOutline$1, getColorsAndStatesByPath as getColorsAndStatesByPath$1, get } from '@apia/theme';
 import { keyframes } from '@emotion/react';
 
 function defaultLighten(color, ratio) {
@@ -2762,12 +2762,14 @@ const apiaApi = {
 };
 
 const confirm = {
-  display: "flex",
-  flexDirection: "column",
-  gap: spacing$1(6),
-  height: "100%",
-  width: "100%",
-  overflow: "auto",
+  "&.confirm[class]": {
+    display: "flex",
+    flexDirection: "column",
+    gap: spacing$1(6),
+    height: "100%",
+    width: "100%",
+    overflow: "auto"
+  },
   ".confirm__content": {
     overflow: "auto",
     flexBasis: "100%",
@@ -5346,6 +5348,590 @@ const scheduler = {
   /* PREPEND HERE */
 };
 
+const permissions = {
+  ".uploader__permissions_selection": {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "end",
+    gap: 4,
+    div: {
+      width: "100%"
+    },
+    select: {
+      width: "100%"
+    },
+    button: {
+      width: "70%"
+    },
+    span: {
+      fontWeight: "normal"
+    }
+  },
+  ".permissions__list": {
+    display: "flex",
+    flexDirection: "column",
+    gap: 3,
+    ul: {
+      borderRadius: "default",
+      border: "1px solid",
+      borderColor: "palette.border.field",
+      background: "palette.background.paper"
+    }
+  }
+};
+
+const collapsiblePanel = {
+  ".collapsiblePanel": {
+    display: "flex",
+    flexDirection: "column"
+  },
+  ".collapsiblePanel__label": {
+    "& span": {
+      fontWeight: 700
+    },
+    "& button > span": {
+      fontWeight: "normal"
+    }
+  },
+  ".collapsiblePanel__label__button": {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    justifyContent: "space-between",
+    '&[aria-expanded="false"]': {
+      borderBottom: "1px solid #e1e1e1"
+    }
+  },
+  ".collapsiblePanel__content": {
+    "&>div": {
+      display: "flex",
+      flexDirection: "column",
+      gap: 3,
+      border: "1px solid",
+      borderColor: "palette.border.field",
+      padding: 4,
+      borderRadius: "default",
+      background: "inherit",
+      boxShadow: "neum"
+    }
+  }
+};
+const defaultView = {
+  "&.uploader__container": {
+    display: "flex",
+    flexDirection: "column",
+    gap: 4,
+    overflow: "auto",
+    'button[data-variant="outline"]': {
+      boxShadow: "sharp"
+    }
+  },
+  ".uploader__content": {
+    display: "flex",
+    flexDirection: "column",
+    gap: 4,
+    overflow: "auto",
+    p: 2,
+    overflowX: "hidden"
+  },
+  "& label": {
+    display: "flex",
+    flexDirection: "column",
+    gap: 2,
+    span: {
+      fontWeight: 700
+    }
+  },
+  ".uploader__file_selection": {
+    display: "flex",
+    flexDirection: "row",
+    gap: 3,
+    alignItems: "center",
+    alignContent: "center",
+    width: "100%",
+    ".autocomplete": {
+      width: "100%"
+    },
+    ".uploader__file_infoBtn": {
+      height: "48px",
+      width: "48px",
+      p: 0,
+      display: "flex"
+    }
+  },
+  ".uploader__dropzone_description_section": {
+    display: "flex",
+    flexDirection: "column",
+    gap: 3,
+    background: "inherit",
+    padding: 4,
+    borderRadius: "default",
+    border: "1px solid",
+    borderColor: "palette.border.field",
+    boxShadow: "neum"
+  },
+  ".uploader__dropzone": {
+    display: "grid",
+    flexDirection: "column",
+    gap: 3,
+    width: " 100%",
+    position: "relative",
+    ".dropzone__container[class]": {
+      height: "100%"
+    },
+    ".dropzone": {
+      height: "50px"
+    },
+    ".uploader__dropzone_actions": {
+      display: "flex",
+      flexDirection: "row",
+      gap: 3,
+      button: {
+        width: "50%"
+      }
+    }
+  },
+  ".uploader__directory": {
+    ".collapsiblePanel__content": {
+      "&>div": {
+        position: "relative"
+      },
+      ".uploader__directory__clear-directory": {
+        position: "sticky",
+        top: 0,
+        alignSelf: "end",
+        width: "20px",
+        height: "20px",
+        p: 3
+      }
+    }
+  },
+  ...collapsiblePanel,
+  ...permissions,
+  ".mobxtree": {
+    background: "white",
+    border: "1px solid",
+    borderColor: "palette.border.field",
+    borderRadius: "default",
+    padding: "5px"
+  },
+  ".metadata__container": {
+    outline: "none!important",
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    background: "palette.background.paper",
+    padding: 3,
+    borderRadius: "default",
+    border: "1px solid",
+    borderColor: "palette.border.field",
+    ".metadata__table_container": {
+      width: "100%",
+      maxHeight: "310px",
+      overflowY: "auto",
+      display: "block",
+      boxSizing: "border-box",
+      position: "relative",
+      table: {
+        width: "100%",
+        borderCollapse: "collapse",
+        tableLayout: "fixed",
+        boxSizing: "border-box",
+        td: { borderLeft: 0, borderRight: 0 },
+        "tr:last-child td:first-child": {
+          borderBottomLeftRadius: "default"
+        },
+        "tr:last-child td:last-child": {
+          borderBottomRightRadius: "default"
+        }
+      },
+      th: {
+        position: "sticky",
+        top: 0,
+        backgroundColor: "palette.background.paper",
+        zIndex: 2,
+        border: "none",
+        borderBottom: "1px solid #ccc",
+        padding: "8px",
+        textAlign: "left"
+      },
+      tbody: {
+        ".selected": {
+          background: "palette.gray.900"
+        },
+        td: {
+          padding: 3,
+          borderBottom: "1px solid #ececec",
+          verticalAlign: "top"
+        },
+        ".iconButton": {
+          border: "none"
+        }
+      },
+      ".metadata__render_container": {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "start",
+        position: "relative",
+        minHeight: "50px",
+        ".requiredMark": {
+          color: "danger",
+          position: "absolute",
+          left: "-9px"
+        },
+        ".errorRequired": {
+          color: "danger"
+        }
+      }
+    },
+    ".metadata__actions": {
+      display: "flex",
+      flexDirection: "row",
+      gap: 3
+    },
+    ".addMetadata, .deleteMetadata": {
+      height: "30px",
+      width: "30px",
+      p: "0px"
+    }
+  }
+};
+
+const infoModal = {
+  minWidth: "550px",
+  display: "flex",
+  flexDirection: "column",
+  gap: 3,
+  ...collapsiblePanel,
+  button: {
+    cursor: "pointer"
+  },
+  table: {
+    width: "100%",
+    span: {
+      fontWeight: "bold"
+    },
+    button: {
+      boxShadow: "none",
+      color: "palette.text.primary",
+      background: "inherit"
+    },
+    "tr > td:first-of-type": {
+      width: "50%"
+    },
+    ".table__buttons": {
+      display: "flex",
+      gap: 3
+    }
+  },
+  ".allPermissions": {
+    background: "palette.background.paper",
+    display: "flex",
+    flexDirection: "row",
+    gap: 3,
+    alignItems: "center",
+    borderRadius: "default",
+    border: "1px solid",
+    borderColor: "palette.gray.800",
+    p: 4,
+    width: "100%",
+    div: { width: "100%" },
+    select: { width: "100%" }
+  },
+  ".permissions__list": {
+    display: "flex",
+    flexDirection: "column",
+    gap: 3,
+    ul: {
+      borderRadius: "default",
+      border: "1px solid",
+      borderColor: "palette.gray.800",
+      background: "palette.background.paper"
+    }
+  },
+  ".doc_info_table_container": {
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    background: "palette.background.paper",
+    padding: 3,
+    borderRadius: "default",
+    border: "1px solid",
+    borderColor: "palette.gray.800"
+  },
+  ".doc_info_table": {
+    width: "100%",
+    maxHeight: "310px",
+    overflowY: "auto",
+    boxSizing: "border-box",
+    position: "relative",
+    th: {
+      position: "sticky",
+      top: 0,
+      backgroundColor: "palette.background.paper",
+      zIndex: 2,
+      border: "none",
+      borderBottom: "1px solid #ccc",
+      padding: "8px",
+      textAlign: "left",
+      width: "50%"
+    },
+    tbody: {
+      ".selected": {
+        background: "palette.gray.900"
+      },
+      td: {
+        padding: 3,
+        borderBottom: "1px solid #ececec",
+        verticalAlign: "top"
+      },
+      ".iconButton": {
+        border: "none"
+      }
+    },
+    button: {
+      justifyContent: "start",
+      width: "100%"
+    }
+  },
+  ".versions_table": {
+    "thead tr th:first-of-type, tbody tr td:first-of-type": {
+      width: "100px",
+      textAlign: "center"
+    }
+  }
+};
+
+const dropzone = {
+  display: "flex",
+  flexDirection: "row",
+  p: 4,
+  borderRadius: "default",
+  padding: "0px!important",
+  border: "1px solid",
+  borderColor: "palette.border.field",
+  height: "51px",
+  alignItems: "center",
+  width: "100%",
+  background: "palette.background.paper",
+  position: "relative",
+  backgroundImage: (t) => `repeating-linear-gradient(45deg, 
+  ${get(t, "colors.dropzone.color")}, 
+  ${get(t, "colors.dropzone.color")} 3px, 
+  ${get(t, "colors.dropzone.backgroundColor")} 3px, 
+  ${get(t, "colors.dropzone.backgroundColor")} 12px)`,
+  ":focus-within": {
+    outlineColor: "outlineColor",
+    outlineWidth: "3px",
+    outlineOffset: "-3px",
+    outlineStyle: "solid",
+    borderColor: "transparent"
+  },
+  ".dropzone": {
+    backgroundSize: "200% 200%",
+    display: "flex",
+    flex: "1",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    fontWeight: "normal",
+    border: "none",
+    wordBreak: "break-word",
+    overflow: "hidden",
+    margin: "3px",
+    height: "calc( 100% - 6px)",
+    padding: 0,
+    width: "inherit",
+    borderTopLeftRadius: "7px",
+    borderBottomLeftRadius: "7px",
+    ":hover": {
+      cursor: "pointer",
+      animation: `${keyframes({
+        "100%": { backgroundPosition: "100% 100%" }
+      })} 20s linear infinite`,
+      "&:disabled": { animation: "none" }
+    },
+    ":focus": {
+      outline: "none"
+    },
+    ".progressBar": {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      borderRadius: "7px",
+      backgroundColor: "#8080807a",
+      transition: "width 0.5s ease-in-out"
+    }
+  },
+  ".info": {
+    height: "100%",
+    border: "none",
+    borderTopLeftRadius: "0px",
+    borderBottomLeftRadius: "0px",
+    boxShadow: "none",
+    width: "49px",
+    ...getColorsAndStatesByPath$1("buttons.outline"),
+    background: "transparent",
+    svg: {
+      color: "#9f9f9f"
+    },
+    "&:focus": {
+      outline: "none"
+    }
+  }
+  /* PREPEND HERE */
+};
+
+const verifySignModal = {
+  minWidth: "550px",
+  display: "flex",
+  flexDirection: "column",
+  gap: 3,
+  "&.verifysign__container": {
+    outline: "none!important",
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    background: "palette.background.paper",
+    padding: 3,
+    borderRadius: "default",
+    border: "1px solid",
+    borderColor: "palette.gray.800",
+    ".verifysign__table_container": {
+      width: "100%",
+      maxHeight: "310px",
+      overflowY: "auto",
+      display: "block",
+      boxSizing: "border-box",
+      position: "relative",
+      table: {
+        borderCollapse: "collapse",
+        tableLayout: "fixed",
+        boxSizing: "border-box",
+        td: { borderLeft: 0, borderRight: 0 },
+        "tr:last-child td:first-child": {
+          borderBottomLeftRadius: "default"
+        },
+        "tr:last-child td:last-child": {
+          borderBottomRightRadius: "default"
+        }
+      },
+      th: {
+        position: "sticky",
+        top: 0,
+        backgroundColor: "palette.background.paper",
+        zIndex: 2,
+        border: "none",
+        borderBottom: "1px solid #ccc",
+        padding: "8px",
+        textAlign: "left"
+      },
+      "th:first-of-type": {
+        width: "200px"
+      },
+      tbody: {
+        ".selected": {
+          background: "palette.gray.900"
+        },
+        "tr > td:first-of-type": {
+          width: "20%"
+        },
+        td: {
+          padding: 3,
+          borderBottom: "1px solid #ececec",
+          verticalAlign: "top"
+        },
+        ".iconButton": {
+          border: "none"
+        }
+      }
+    }
+  }
+};
+
+const filesList = {
+  display: "flex",
+  flexDirection: "row",
+  gap: "10px",
+  alignItems: "center",
+  flexWrap: "wrap",
+  "&.uploadedFiles": {
+    display: "grid",
+    gridTemplateColumns: "repeat(3, 1fr)",
+    gap: 3
+  },
+  ".file__icon": {
+    flexShrink: 0
+  }
+  /* PREPEND HERE */
+};
+
+const uploader = {
+  defaultView,
+  dropzone,
+  infoModal,
+  filesList,
+  permissions,
+  verifySignModal,
+  tooltip: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 3,
+    ".head": {
+      textDecoration: "underline"
+    },
+    ".fileBtn": {
+      "&.disabled": {
+        cursor: "not-allowed",
+        backgroundColor: "form.fields.disabled.backgroundColor"
+      },
+      "&.readonly, &:redonly": {
+        // backgroundColor: 'form.fields.readonly.backgroundColor',
+        backgroundColor: "red!important"
+      }
+    }
+  }
+  /* PREPEND HERE */
+};
+
+const switchCard = {
+  "&.switch__card": {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    width: "100%",
+    borderBottom: "1px solid",
+    borderColor: "palette.border.field",
+    p: 4,
+    ".label__container": {
+      display: "flex",
+      flexDirection: "row",
+      gap: 3,
+      alignItems: "center",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      span: {
+        flexShrink: 0
+      }
+    },
+    ".switch__container": {
+      display: "flex",
+      flexDirection: "row",
+      gap: 3,
+      alignItems: "center",
+      "& label": {
+        height: "21px"
+      },
+      input: {
+        display: "none"
+      }
+    }
+  }
+  /* PREPEND HERE */
+};
+
 const components = {
   /* PREPEND HERE */
   accordion,
@@ -5358,7 +5944,9 @@ const components = {
   aiMessage,
   infoButton,
   filters,
-  fileCard
+  fileCard,
+  uploader,
+  switchCard
 };
 
 const labelBox = {
@@ -8316,7 +8904,7 @@ async function getRemarkable(extensions) {
 
 const parseMarkdown = async (options) => {
   const markdownLibrary = await getRemarkable(options.extensions);
-  const css = (await import('./styles-lzrkBfXz.js')).markdownParserStyles ?? new ErrorImporting();
+  const css = (await import('./styles-JuqAJl1O.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();
@@ -8828,4 +9416,4 @@ ${pageBreakTag}`;
 }
 
 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-Xe8KO81h.js.map
+//# sourceMappingURL=index-BOvGFjjE.js.map