@apia/theme 4.0.58 → 4.0.63

package/dist/{index-BJp5z7uE.js → index-B5IemJX6.js}

@@ -2,7 +2,7 @@ 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 { Box, Switch as Switch$2, 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';
@@ -1272,6 +1272,15 @@ const MaterialInput = ({ title, label, boxProperties, ...props }) => /* @__PURE_
   }
 );
 
+const Switch$1 = forwardRef((props, ref) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    ...getVariant("layout.common.components.switchBase"),
+    className: "apia__switch",
+    children: /* @__PURE__ */ jsx(Switch$2, { ...props, ref })
+  }
+));
+
 const Form = (props) => /* @__PURE__ */ jsx(Box, { as: "form", ...props });
 const Table = forwardRef(
   (props, ref) => /* @__PURE__ */ jsx(Box, { as: "table", ref, ...props })
@@ -1945,8 +1954,41 @@ const menu = {
   })
 };
 
+const scrollbars = {
+  "::-webkit-scrollbar, * ::-webkit-scrollbar": {
+    width: "16px",
+    borderRadius: 0
+  },
+  "::-webkit-scrollbar:horizontal, * ::-webkit-scrollbar:horizontal": {
+    height: "8px"
+  },
+  "::-webkit-scrollbar-track, * ::-webkit-scrollbar-track": {
+    backgroundColor: "var(--theme-ui-colors-scrollbars-bar-backgroundColor)",
+    borderLeft: "8px solid white"
+  },
+  "::-webkit-scrollbar-track:hover, * ::-webkit-scrollbar-track:hover": {
+    backgroundColor: "var(--theme-ui-colors-scrollbars-bar-hover-backgroundColor)"
+  },
+  "::-webkit-scrollbar-track:active, * ::-webkit-scrollbar-track:active": {
+    backgroundColor: "var(--theme-ui-colors-scrollbars-bar-active-backgroundColor)"
+  },
+  "::-webkit-scrollbar-thumb, * ::-webkit-scrollbar-thumb": {
+    backgroundColor: "var(--theme-ui-colors-scrollbars-bar-color)",
+    borderLeft: "8px solid white"
+  },
+  "::-webkit-scrollbar-thumb:hover, * ::-webkit-scrollbar-thumb:hover": {
+    backgroundColor: "var(--theme-ui-colors-scrollbars-bar-hover-color)"
+  },
+  "::-webkit-scrollbar-thumb:active, * ::-webkit-scrollbar-thumb:active": {
+    backgroundColor: "var(--theme-ui-colors-scrollbars-bar-active-color)"
+  },
+  ".noScrollbar::-webkit-scrollbar": { display: "none" },
+  ".noScrollbar": { msOverflowStyle: "none", scrollbarWidth: "none" }
+};
+
 const root = {
   ...menu,
+  ...scrollbars,
   height: "100%",
   "*": {
     fontFamily: "body",
@@ -1964,23 +2006,6 @@ const root = {
     borderLeftWidth: "4px",
     borderLeftColor: "palette.error.main"
   },
-  //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 })
   },
@@ -4801,8 +4826,26 @@ const toolbar = {
 
 const autocomplete = {
   "&:focus-within": focusOutline,
+  background: "palette.background.paper",
   ".autocomplete__inputWrapper": {
-    position: "relative"
+    position: "relative",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    border: " 1px solid",
+    borderColor: "palette.border.field",
+    p: "2px",
+    borderRadius: "default",
+    input: {
+      border: "none",
+      outline: "none!important",
+      height: "46px"
+    }
+  },
+  ".autocomplete__search": {
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis"
   },
   ".autocomplete__search.disabled": {
     cursor: "not-allowed",
@@ -4818,10 +4861,11 @@ const autocomplete = {
     display: "flex",
     gap: 2,
     height: "24px",
-    position: "absolute",
     right: "20px",
     top: "calc(50% - 12px)",
     pointerEvents: "none",
+    pr: 4,
+    maxWidth: "30px",
     ".autocomplete__loadingSpinner": {
       width: "24px",
       height: "24px"
@@ -5007,6 +5051,7 @@ const fileCard = {
     borderColor: "palette.border.field",
     borderRadius: "default",
     boxShadow: `0px 1px 1px #c7c7c7`,
+    background: "palette.background.paper",
     p: 3,
     ".fileCard__container": {
       display: "flex",
@@ -5732,11 +5777,6 @@ const dropzone = {
   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",
@@ -5761,6 +5801,11 @@ const dropzone = {
     width: "inherit",
     borderTopLeftRadius: "7px",
     borderBottomLeftRadius: "7px",
+    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)`,
     ":hover": {
       cursor: "pointer",
       animation: `${keyframes({
@@ -5949,6 +5994,79 @@ const switchCard = {
   /* PREPEND HERE */
 };
 
+const switchBase = {
+  'input[type="checkbox"]': {
+    position: "absolute",
+    transform: "translateX(-9999px)"
+  }
+};
+
+const freeDayCard = {
+  "&.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%",
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+    m: 0,
+    flexShrink: 0,
+    px: 3,
+    color: "palette.text.primary",
+    backgroundColor: "palette.background.paper",
+    svg: {
+      width: "20px",
+      height: "20px"
+    }
+  }
+};
+
 const components = {
   /* PREPEND HERE */
   accordion,
@@ -5962,8 +6080,10 @@ const components = {
   infoButton,
   filters,
   fileCard,
+  freeDayCard,
   uploader,
-  switchCard
+  switchCard,
+  switchBase
 };
 
 const labelBox = {
@@ -7117,11 +7237,27 @@ const collector = {
     minWidth: "min(400px, calc(100vw - 52px))",
     overflow: "hidden",
     pr: 2,
+    "h1, h2, h3, h4, h5, h6, .separator": {
+      py: 5
+    },
     ".collector__fields": {
       overflow: "auto",
       gap: "8px",
       display: "flex",
-      flexDirection: "column"
+      flexDirection: "column",
+      "& > *:first-child": {
+        "& h1, h2, h3, h4, h5, h6, .separator": {
+          pt: 0
+        }
+      }
+    },
+    ".autogrow_textarea": {
+      maxHeight: "20vh",
+      width: "100%",
+      border: "1px solid",
+      borderColor: "palette.border.field",
+      borderRadius: "default",
+      padding: responsive$1({ 0: 3, 3: 4 })
     },
     ".collector__buttons": {
       display: "flex",
@@ -7136,11 +7272,17 @@ const collector = {
       alignItems: "start",
       justifyContent: "start"
     },
+    ".switch .fieldWrapper.checkbox": {
+      alignItems: "center"
+    },
     ".validationsForm": {
       display: "flex",
       flexDirection: "column",
       gap: 4,
       overflow: "hidden"
+    },
+    ":disabled": {
+      backgroundColor: "form.fields.disabled.backgroundColor"
     }
   },
   modal: {
@@ -7284,8 +7426,69 @@ const form = {
   }
 };
 
+const switchMultiple = {
+  height: "53px",
+  display: "inline-flex",
+  borderColor: "pallete.border.field",
+  backgroundColor: "#e0e0e0",
+  borderRadius: "default",
+  boxShadow: "none",
+  p: "4px",
+  "&.touched": { borderColor: "pallete.border.field" },
+  ".switchButton": (theme) => {
+    const colorState = getOneColorState(
+      "palette.primary.main",
+      "disabled",
+      theme.palette
+    );
+    return {
+      boxShadow: "none",
+      flex: 1,
+      minWidth: 0,
+      borderRadius: "default",
+      textTransform: "none",
+      px: 2,
+      py: 1,
+      backgroundColor: colorState,
+      color: "palette.text.disabled",
+      "&:hover": {
+        backgroundColor: colorState,
+        color: "palette.text.disabled"
+      },
+      "&:hover:not(.active)": {
+        backgroundColor: colorState,
+        color: "palette.text.disabled"
+      },
+      "&.active": {
+        backgroundColor: "palette.primary.main",
+        color: "palette.primary.contrastText",
+        "&:hover": {
+          backgroundColor: "palette.primary.main",
+          color: "palette.text.secondary"
+        }
+      },
+      "&.first": {
+        borderTopRightRadius: "0px",
+        borderBottomRightRadius: "0px"
+      },
+      "&.last": { borderTopLeftRadius: "0px", borderBottomLeftRadius: "0px" },
+      "&.middle": {
+        borderTopLeftRadius: "0px",
+        borderBottomLeftRadius: "0px",
+        borderTopRightRadius: "0px",
+        borderBottomRightRadius: "0px"
+      }
+    };
+  }
+};
+
+const fields = {
+  switchMultiple
+};
+
 const validations = {
-  form
+  form,
+  fields
 };
 
 const oneColumnAside = {
@@ -8921,7 +9124,7 @@ async function getRemarkable(extensions) {
 
 const parseMarkdown = async (options) => {
   const markdownLibrary = await getRemarkable(options.extensions);
-  const css = (await import('./styles-C4AklZvX.js')).markdownParserStyles ?? new ErrorImporting();
+  const css = (await import('./styles-SJODSvxM.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();
@@ -9236,7 +9439,7 @@ class MarkdownTableOfContents extends MarkdownParagraph {
     const parser = new DOMParser();
     const parsedDocument = parser.parseFromString(html, "text/html");
     const headers = parsedDocument.querySelectorAll(
-      new Array(props.maxLevel || 3).fill(1).map((_, i) => `h${i}`).join(", ")
+      new Array((props.maxLevel || 3) - (props.minLevel || 1) + 1).fill(1).map((_, i) => `h${i + (props.minLevel || 1)}`).join(", ")
     );
     const root = document.createElement("ul");
     root.id = "TableOfContents";
@@ -9432,5 +9635,5 @@ ${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-BJp5z7uE.js.map
+export { ApiaThemeProvider as A, MarkdownTableOfContents as B, Form as F, MaterialInput as M, Switch$1 as S, 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-B5IemJX6.js.map