@apia/theme 4.0.28 → 4.0.29

package/dist/{index-BAf35hV5.js → index-BvID00ug.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 } from '@apia/theme';
+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 { keyframes } from '@emotion/react';
 
 function defaultLighten(color, ratio) {
@@ -6656,11 +6656,997 @@ const validations = {
   form
 };
 
+const oneColumnAside = {
+  display: "flex",
+  flexDirection: "column",
+  gap: spacing$1(5),
+  position: "sticky",
+  top: 0,
+  maxWidth: "applicationMenu",
+  overflow: "auto",
+  height: "min-content",
+  ".actionButton": {
+    px: 2
+  },
+  ".asidePanel": {
+    border: "none",
+    padding: 0,
+    m: spacing$1(0),
+    display: "flex",
+    flexDirection: "column",
+    "&.responsive": {
+      display: responsive$2({ 0: "flex", 3: "none" })
+    },
+    ".asidePanel__content": {
+      display: "grid",
+      gridTemplateColumns: responsive$2({ 0: "1fr", 2: "1fr" }),
+      gap: spacing$1(3),
+      "& > .twoColumns": {
+        gridColumn: responsive$2({ 0: "1", 2: "1" }),
+        gap: spacing$1(3)
+      }
+    },
+    legend: {
+      pt: spacing$1(2),
+      width: "100%",
+      fontWeight: "bold",
+      fontSize: "1.2em",
+      mb: spacing$1(5),
+      borderBottom: "1px solid",
+      borderBottomColor: "palette.border.section"
+    },
+    ".additionalFilter": {
+      gap: spacing$1(3),
+      "& > div": {
+        width: "100%"
+      }
+    },
+    "& label": {
+      alignItems: "stretch",
+      display: "flex",
+      flexDirection: "column",
+      "input,select": {
+        width: "100%"
+      }
+    }
+  },
+  hamburguerButton: {
+    zIndex: "menu"
+  },
+  hamburguerMenu: {
+    background: "palette.background.paper",
+    p: spacing$1(7),
+    border: "1px solid",
+    borderColor: "palette.border.article",
+    zIndex: "menu",
+    ".ApplicationMenu": {
+      width: "applicationMenu"
+    }
+  },
+  floatingResponsive: {
+    position: "fixed",
+    top: 0,
+    transition: "top 0.3s",
+    width: "100%",
+    "&.hidden": {
+      top: "-100%"
+    },
+    ".floatingMenu__content": {
+      "& > div": {
+        width: "100%",
+        px: 7,
+        overflow: "auto",
+        display: "flex",
+        justifyContent: "center"
+      },
+      ".ApplicationMenu": {
+        maxWidth: "applicationMenu",
+        width: "100%",
+        px: 0,
+        mx: "auto",
+        maxHeight: "80vh",
+        overflow: "auto"
+      }
+    }
+  },
+  bodyAside: {
+    background: "palette.background.paper",
+    p: spacing$1(7),
+    mx: "auto",
+    "& > .ApplicationMenu": {
+      mx: "auto",
+      maxWidth: "applicationMenu",
+      width: "100%"
+    }
+  }
+};
+
+const breakMenu = 3;
+const imageTitleAndDescription = {
+  display: "flex",
+  alignItems: "center",
+  gap: spacing$1(5),
+  width: responsive$2({ 0: "100%", 3: "auto" }),
+  "div.image": {
+    display: responsive$2({ 0: "none", 3: "block" }),
+    flexBasis: "60px",
+    flexShrink: 0,
+    width: "60px",
+    height: "60px",
+    img: {
+      width: "60px",
+      height: "60px"
+    }
+  },
+  h1: {
+    my: 0
+  },
+  "div.titleAndDescription": {
+    display: responsive$2({ 0: "block", 3: "flex" }),
+    flexWrap: "wrap",
+    alignItems: responsive$2({ 0: "center", 3: "end" }),
+    flexDirection: responsive$2({ 0: "column", [breakMenu]: "row" }),
+    width: responsive$2({ 0: "100%", 3: "auto" }),
+    "h1, h2": {
+      display: responsive$2({ 0: "block", [breakMenu]: "inline-block" }),
+      width: "auto",
+      m: spacing$1(0)
+    },
+    "&:not(.entityTitle)": {
+      h1: {
+        "::after": {
+          content: responsive$2({ 0: "none", [breakMenu]: '">"' }),
+          mr: responsive$2({ 0: 0, [breakMenu]: 5 })
+        }
+      }
+    },
+    h2: {},
+    p: {
+      m: spacing$1(2),
+      width: "100%"
+    }
+  }
+};
+({
+  justifyContent: responsive$2({
+    0: "center",
+    [breakMenu]: "start",
+    [breakMenu + 1]: "space-between"
+  }),
+  gap: responsive$2({ 0: 0, 2: 5 }),
+  flexDirection: responsive$2({ 0: "column-reverse", 2: "row" }),
+  top: responsive$2({ 0: 0, 4: "auto" }),
+  background: responsive$2({ 0: "background", 4: "transparent" }),
+  textAlign: responsive$2({ 0: "center", [breakMenu]: "left" }),
+  ".iconsBar": {
+    position: responsive$2({ 0: "fixed", 4: "initial" }),
+    right: responsive$2({ 0: "8px", 4: "auto" }),
+    top: responsive$2({ 0: "36px", 2: "26px", 4: "auto" }),
+    "button, a": {
+      padding: responsive$2({ 0: 2, 4: "none" }),
+      ...getColorsAndStatesByPath$1("buttons.primary", {
+        states: {
+          default: false
+        }
+      }),
+      "&.toggleMenu": {
+        display: responsive$2({ 0: "flex", 4: "none" })
+      },
+      svg: {
+        width: responsive$2({ 0: "20px", 5: "25px", 6: "27px" }),
+        height: responsive$2({ 0: "20px", 5: "25px", 6: "27px" })}
+    }}});
+({
+  height: responsive$2({ 0: "auto", 2: "100vh" }),
+  bottom: responsive$2({ 0: 0, 2: "auto" }),
+  top: responsive$2({ 0: 0, 2: "auto" }),
+  ".container": {
+    maxWidth: responsive$2({ 0: "100%", 3: "min(1550px, 100vw)" })},
+  ".notificationsView": {
+    width: responsive$2({ 0: "100%", 3: "calc(100% - 61px)", 4: "100%" })},
+  "& .twoColumnsContent": {
+    gap: spacing$1(3),
+    gridTemplateColumns: responsive$2({
+      0: "1fr",
+      4: "1fr 350px",
+      5: "1fr 375px",
+      6: "1fr 400px"
+    }),
+    main: {
+      paddingLeft: responsive$2({ 0: 0, 1: 3 }),
+      paddingRight: responsive$2({ 0: 0, 1: 3, 4: 0 }),
+      display: responsive$2({ 0: "flex", 3: "block" }),
+      gap: spacing$1(4)
+    }
+  },
+  "& > .spacer": {
+    height: responsive$2({ 0: "0px", 4: "2em" })
+  },
+  ".showResponsive": {
+    display: responsive$2({ 0: "block", 3: "none" })
+  }
+});
+
+const portalForm = {
+  "&.extended .container": {
+    maxWidth: "unset"
+  },
+  ".container": {
+    minWidth: "320px",
+    maxWidth: "root",
+    width: "100%",
+    p: spacing$1(7),
+    pt: spacing$1(6),
+    display: "flex",
+    flexDirection: "column",
+    gap: spacing$1(6),
+    mx: "auto",
+    ".formsTab": {
+      display: "flex",
+      flexDirection: "column",
+      gap: spacing$1(3)
+    },
+    "& > header": {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      gap: responsive$2({ 0: 0, 2: 5 }),
+      flexDirection: responsive$2({ 0: "column-reverse", 2: "row" }),
+      width: "100%",
+      background: responsive$2({ 0: "background", 4: "transparent" }),
+      zIndex: responsive$2({ 0: "10", 4: "auto" }),
+      "div.imageTitleAndDescription": imageTitleAndDescription,
+      ".iconsBar": {
+        display: "flex",
+        width: responsive$2({ 0: "100%", 2: "max-content" }),
+        justifyContent: "end",
+        flexShrink: 0,
+        flexDirection: "row",
+        "button, a": {
+          flexBasis: "30px",
+          flexShrink: 0,
+          bg: "transparent",
+          color: "secondary",
+          padding: 0,
+          height: "auto",
+          textAlign: "center",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          "&.toggleMenu": {
+            display: responsive$2({ 0: "flex", 4: "none" })
+          },
+          svg: {
+            width: responsive$2({ 0: "22px", 5: "25px", 6: "27px" }),
+            height: responsive$2({ 0: "22px", 5: "25px", 6: "27px" }),
+            m: "auto"
+          },
+          "&:hover": {
+            color: "primary",
+            svg: {
+              color: "primary"
+            }
+          }
+        },
+        ".favorite": {
+          svg: {
+            color: "favorite",
+            path: { fill: "favorite" }
+          }
+        }
+      }
+    }
+  },
+  display: "flex",
+  flexDirection: "column",
+  gap: spacing$1(7),
+  ".buttonBar": {
+    display: "flex",
+    justifyContent: "center",
+    flexDirection: responsive$2({ 0: "column", 2: "row" }),
+    gap: spacing$1(3)
+  }
+};
+
+const BodyAside = {
+  display: responsive$2({ 0: "block", 3: "none" }),
+  ".content": {
+    background: "palette.background.paper",
+    ".ApplicationMenu": {
+      mx: "auto",
+      overflow: "hidden",
+      py: responsive$2({ 0: 4, 2: 7 }),
+      px: responsive$2({ 0: 4, 2: 0 })
+    }
+  }
+};
+
+const breakHeadings = 3;
+const topBox = {
+  display: "flex",
+  flexDirection: "column",
+  gap: spacing$1(3),
+  ".topBox__upperAside": {
+    ".notificationsView": {
+      display: "flex",
+      gap: spacing$1(3),
+      flexDirection: "column",
+      ".notification": {
+        m: spacing$1(0),
+        "&:first-of-type": {
+          mt: spacing$1(3)
+        }
+      }
+    }
+  },
+  ".topBox__heading": {
+    flexGrow: 1,
+    display: "flex",
+    gap: spacing$1(3),
+    flexDirection: "row",
+    alignItems: "center",
+    ".topBox__imageHeader": {
+      flexShrink: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      img: {
+        display: responsive$2({ 0: "none", 3: "inline-block" }),
+        width: "70px",
+        height: "70px"
+      }
+    },
+    ".topBox__header": {
+      flexGrow: 1,
+      display: "flex",
+      justifyContent: "center",
+      flexDirection: "column",
+      ".topBox__headings": {
+        display: "flex",
+        alignItems: responsive$2({ 0: "start", 3: "end" }),
+        flexWrap: "wrap",
+        gap: spacing$1(3),
+        flexDirection: responsive$2({ 0: "column", [breakHeadings]: "row" }),
+        justifyContent: responsive$2({
+          0: "start",
+          [breakHeadings]: "initial"
+        }),
+        "& > *": {
+          m: spacing$1(0)
+        },
+        h2: {
+          "&:before": {
+            content: '"-"',
+            display: responsive$2({
+              0: "none",
+              [breakHeadings]: "inline-block"
+            })
+          }
+        }
+      },
+      p: {
+        textAlign: responsive$2({ 0: "center", [breakHeadings]: "left" }),
+        display: responsive$2({ 0: "none", 3: "block" })
+      }
+    },
+    ".topBox__nav": {
+      flexShrink: 0,
+      alignItems: "center",
+      justifyContent: "center",
+      display: "flex",
+      ".HamburguerIconWrapper": {
+        display: responsive$2({ 0: "none", 3: "flex", 4: "none" }),
+        width: "41px"
+      },
+      "button, a": {
+        height: "40px",
+        width: "40px",
+        px: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "none",
+        color: "palette.secondary.main",
+        border: "none",
+        svg: {
+          width: "25px",
+          height: "25px",
+          path: { fill: "palette.secondary.main" }
+        },
+        "&.favorite": {
+          color: "favorite",
+          path: { fill: "favorite" }
+        }
+      }
+    }
+  }
+};
+
+const twoColumns = {
+  display: "flex",
+  flexDirection: "column",
+  maxWidth: "twoColumns",
+  mx: "auto",
+  gap: spacing$1(3),
+  px: 3,
+  ".twoColumns__topBox": topBox,
+  ".twoColumns__section": {
+    display: "flex",
+    gap: spacing$1(3),
+    alignItems: "start",
+    ".twoColumns__main": {
+      flexGrow: 1,
+      display: "flex",
+      flexDirection: "column",
+      gap: spacing$1(3),
+      pb: "60px",
+      "#BodyAside": BodyAside
+    },
+    ".twoColumns__aside": {
+      position: "sticky",
+      top: 3,
+      width: "applicationMenu",
+      flexShrink: 0,
+      flexGrow: 0,
+      display: responsive$2({ 0: "none", 4: "block" })
+    }
+  }
+};
+
+const footerResponsiveButtons = {
+  position: "fixed",
+  bottom: 0,
+  left: 0,
+  right: 0,
+  p: spacing$1(3),
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: spacing$1(3),
+  background: "palette.background.paper",
+  borderTop: "1px solid",
+  borderTopColor: "palette.border.field",
+  zIndex: "menu",
+  transition: "bottom 0.3s",
+  "&.hidden": {
+    bottom: "-100px"
+  }
+};
+
+const twoColumnsAside = {
+  display: "flex",
+  flexDirection: "column",
+  gap: spacing$1(5),
+  position: "sticky",
+  top: 0,
+  maxWidth: responsive$2({ 0: "450px", 3: "applicationMenu" }),
+  overflow: "auto",
+  height: "min-content",
+  maxHeight: responsive$2({ 0: "unset", 3: "calc(100vh - 100px)" }),
+  pr: responsive$2({ 0: 0, 4: 2 }),
+  ".field__withError": {
+    borderLeftColor: "pallete.error.main",
+    borderLeftWidth: "4px"
+  },
+  ".tabsList": {
+    flexShrink: 0
+  },
+  "& fieldset": {
+    flexShrink: 0
+  },
+  ".asidePanel": {
+    border: "none",
+    padding: 0,
+    m: spacing$1(0),
+    display: "flex",
+    flexDirection: "column",
+    ".fieldErrorMessage": {
+      backgroundColor: "palette.warning.light",
+      mb: "0",
+      p: "2",
+      color: "palette.text.primary",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: "palette.warning.main",
+      borderLeftWidth: "8px",
+      paddingLeft: spacing$1(3)
+    },
+    "&.responsive": {
+      display: responsive$2({ 0: "flex", 3: "none" })
+    },
+    ".asidePanel__content, .filtersRender": {
+      display: "grid",
+      gridTemplateColumns: responsive$2({ 0: "1fr", 2: "1fr 1fr" }),
+      gap: spacing$1(3),
+      "& > .twoColumns": {
+        gridColumn: responsive$2({ 0: "1", 2: "1/3" }),
+        gap: spacing$1(3)
+      },
+      "&.filtersRender": {
+        gridColumn: responsive$2({ 0: "1", 2: "1/3" })
+      }
+    },
+    ".tripleContainer": {
+      display: "flex",
+      flexDirection: "row",
+      width: "100%",
+      alignItems: "center"
+    },
+    legend: {
+      pt: spacing$1(2),
+      width: "100%",
+      fontWeight: "bold",
+      fontSize: "1.2em",
+      mb: spacing$1(5),
+      borderBottom: "1px solid",
+      borderBottomColor: "palette.border.section"
+    },
+    ".additionalFilter": {
+      gap: spacing$1(3),
+      "& > div": {
+        width: "100%"
+      }
+    },
+    "& label": {
+      alignItems: "stretch",
+      display: "flex",
+      flexDirection: "column",
+      "input,select": {
+        width: "100%"
+      }
+    }
+  },
+  hamburguerButton: {
+    zIndex: "menu"
+  },
+  ".dateHour__container": {
+    width: "70%",
+    mr: "3px"
+  },
+  ".hourInput__container": {
+    width: "32%"
+  },
+  ".hourInput": {
+    height: "50px",
+    ml: "3px",
+    display: "block",
+    marginBottom: "0.625em",
+    outlineOffset: "3px",
+    padding: "0.45em 0.45em 0.45em 0.65em",
+    width: "95% !important"
+  },
+  hamburguerMenu: {
+    background: "palette.background.paper",
+    p: spacing$1(7),
+    border: "1px solid",
+    borderColor: "palette.border.article",
+    zIndex: "menu",
+    ".requiredFilter__Border": {
+      borderLeftStyle: "solid",
+      borderLeftWidth: "4px",
+      borderLeftColor: "palette.error.main"
+    },
+    ".field__withError": {
+      borderLeftStyle: "solid",
+      borderLeftWidth: "4px",
+      borderLeftColor: "danger"
+    },
+    ".ApplicationMenu": {
+      width: "applicationMenu"
+    }
+  },
+  floatingResponsive: {
+    position: "fixed",
+    top: 0,
+    transition: "top 0.3s",
+    width: "100%",
+    zIndex: "menu",
+    "&.hidden": {
+      top: "-100%"
+    },
+    ".floatingMenu__content": {
+      "& > div": {
+        width: "100%",
+        px: 7,
+        overflow: "auto",
+        display: "flex",
+        justifyContent: "center"
+      },
+      ".ApplicationMenu": {
+        maxWidth: "applicationMenu",
+        width: "100%",
+        px: 0,
+        mx: "auto",
+        maxHeight: "95vh",
+        overflow: "auto"
+      }
+    }
+  },
+  bodyAside: {
+    background: "palette.background.paper",
+    p: spacing$1(7),
+    mx: "auto",
+    "& > .ApplicationMenu": {
+      mx: "auto",
+      maxWidth: "applicationMenu",
+      width: "100%"
+    }
+  }
+};
+
+const twoColumnsCentered = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 4,
+  px: 4,
+  ".containerBox": {
+    display: "flex",
+    "& > .leftSpacer": {
+      display: responsive$2({ 0: "none", 5: "block" }),
+      width: "min(100vw, calc(100vw - 992px - 350px))",
+      maxWidth: "calc(( 100vw - 992px - 24px) / 2)"
+    },
+    "& > .centerBox": {
+      display: "flex",
+      flexDirection: "column",
+      gap: spacing$1(4),
+      maxWidth: "root",
+      px: responsive$2({ 0: 0, 4: 4 }),
+      width: "100%"
+    },
+    "& > .rightSpacer": {
+      display: responsive$2({ 0: "none", 4: "flex" }),
+      flex: "1 0 100%",
+      flexDirection: "column",
+      maxWidth: "max(350px, calc(( 100vw - 992px - 24px) / 2))"
+    },
+    ".mainSpacer": {
+      width: "350px"
+    }
+  },
+  "#TopBox": {
+    header: {
+      alignItems: "center",
+      display: "flex",
+      gap: 4,
+      flexWrap: "wrap",
+      img: {
+        width: "mainImage",
+        height: "mainImage",
+        flexShrink: 0,
+        display: responsive$2({ 0: "none", 2: "block" })
+      },
+      section: {
+        display: "flex",
+        flexDirection: "column",
+        hgroup: {
+          alignItems: responsive$2({ 0: "start", 3: "end" }),
+          display: "flex",
+          gap: responsive$2({ 0: 0, 3: 4 }),
+          flexDirection: responsive$2({ 0: "column", 3: "row" })
+        }
+      },
+      ".underHeaderAside": {
+        flexBasis: "100%"
+      }
+    },
+    nav: {
+      alignItem: "center",
+      display: "flex",
+      justifyContent: "end",
+      width: responsive$2({ 0: "auto", 5: "350px" }),
+      gap: 1
+    },
+    ".rightSpacer": {
+      justifyContent: "center",
+      flex: responsive$2({ 0: "none", 5: "thisValueWasUnsetValue" })
+    },
+    ".HamburguerIconWrapper": {
+      alignItems: "center",
+      display: responsive$2({ 0: "none", 3: "flex", 4: "none" }),
+      gap: 1,
+      justifyContent: "end",
+      paddingRight: "32px",
+      width: "auto"
+    },
+    ".TitleContainer": {
+      maxWidth: responsive$2({ 0: "100vw", 5: "root" })
+    }
+  },
+  "#MiddleBox": {
+    aside: {
+      width: "350px"
+    }
+  },
+  "#ResponsiveButtons": {
+    justifyContent: "end",
+    gap: 1,
+    display: responsive$2({ 0: "flex", 3: "none" })
+  },
+  "#BodyAside": BodyAside
+};
+
+const twoColumnsList = {
+  display: "flex",
+  flexDirection: "column",
+  maxWidth: "calc(100vw - 10px)",
+  mx: "auto",
+  gap: spacing$1(3),
+  px: 3,
+  overflow: "hidden",
+  height: "100vh",
+  ".requiredFilter__Border": {
+    borderLeftStyle: "solid !important",
+    borderLeftWidth: "4px !important",
+    borderLeftColor: "palette.error.main"
+  },
+  ".twoColumnsList__topBox": topBox,
+  "&.maximized": {
+    ".twoColumnsList__section": {
+      ".twoColumnsList__aside": {
+        display: "none"
+      }
+    },
+    ".twoColumnsList__topBox": {
+      ".topBox__heading": {
+        ".topBox__nav": {
+          display: "flex",
+          ".HamburguerIconWrapper": {
+            display: responsive$2({ 0: "none", 3: "flex" })
+          }
+        }
+      }
+    }
+  },
+  ".twoColumnsList__section": {
+    display: "flex",
+    gap: spacing$1(3),
+    alignItems: "stretch",
+    flexGrow: 1,
+    overflow: "hidden",
+    ".twoColumnsList__main": {
+      flexGrow: 1,
+      display: "flex",
+      flexDirection: "column",
+      gap: spacing$1(3),
+      height: "100%",
+      overflow: "hidden",
+      maxHeight: "100%",
+      padding: "4px",
+      pt: 0,
+      ".twoColumnsList__content ": {
+        flexGrow: 1,
+        flexShrink: 100,
+        overflow: "auto",
+        maxHeight: "100%",
+        background: "palette.background.paper",
+        boxShadow: "rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px",
+        borderRadius: "default",
+        ":has(.container)": {
+          borderRadius: "8px",
+          border: "1px solid",
+          borderColor: "palette.gray.750",
+          overflow: "hidden",
+          boxShadow: "none"
+        },
+        ".selection__keyHandler": {
+          height: "100%",
+          ".responsiveTable__wrapper": {
+            height: "100%"
+          }
+        }
+      },
+      ".twoColumnsList__contentFooter": {
+        flexShrink: 0,
+        flexGrow: 0
+      },
+      "#AccordionAside": {
+        display: responsive$2({ 0: "block", 3: "none" }),
+        overflow: "hidden",
+        ".asidePanel__content": {
+          paddingTop: spacing$1(3)
+        },
+        ".content": {
+          background: "palette.background.paper",
+          overflow: " auto",
+          ".ApplicationMenu": {
+            mx: "auto"
+            // py: responsive({ 0: 4, 2: 7 }),
+            // px: responsive({ 0: 4, 2: 0 }),
+          }
+        },
+        ".twoColumns__main__bodyAside.accordionElement": {
+          display: "flex",
+          flexDirection: "column",
+          maxHeight: "100%"
+        }
+      }
+    },
+    ".twoColumnsList__aside": {
+      width: "applicationMenu",
+      flexShrink: 0,
+      flexGrow: 0,
+      overflow: "auto",
+      maxHeight: "100%",
+      pr: spacing$1(2),
+      display: responsive$2({ 0: "none", 4: "flex" }),
+      flexDirection: "column",
+      alignItems: "stretch",
+      justifyContent: "stretch",
+      "& > div": {
+        height: "100%",
+        ".ApplicationMenu": {
+          height: "100%"
+        }
+      }
+    }
+  }
+};
+
+const twoColumnsListOneColumnAside = {
+  display: "flex",
+  flexDirection: "column",
+  maxWidth: "calc(100vw)",
+  mx: "auto",
+  gap: spacing$1(3),
+  px: 3,
+  overflow: "hidden",
+  height: "100vh",
+  ".twoColumnsList__topBox": topBox,
+  "&.maximized": {
+    ".twoColumnsList__section": {
+      ".twoColumnsList__aside": {
+        display: "none"
+      }
+    },
+    ".twoColumnsList__topBox": {
+      ".topBox__heading": {
+        ".topBox__nav": {
+          display: "flex",
+          ".HamburguerIconWrapper": {
+            display: responsive$2({ 0: "none", 3: "flex" })
+          }
+        }
+      }
+    }
+  },
+  ".twoColumnsList__section": {
+    display: "flex",
+    gap: spacing$1(3),
+    alignItems: "stretch",
+    flexGrow: 1,
+    overflow: "hidden",
+    ".twoColumnsList__main": {
+      flexGrow: 1,
+      display: "flex",
+      flexDirection: "column",
+      gap: spacing$1(3),
+      height: "100%",
+      overflow: "hidden",
+      maxHeight: "100%",
+      ".twoColumnsList__content ": {
+        flexGrow: 1,
+        overflow: "auto",
+        maxHeight: "100%",
+        background: "palette.background.paper",
+        ".selection__keyHandler": {
+          height: "100%",
+          ".responsiveTable__wrapper": {
+            height: "100%"
+          }
+        }
+      },
+      ".twoColumnsList__contentFooter": {
+        flexShrink: 0,
+        flexGrow: 0,
+        position: "relative"
+      },
+      "#AccordionAside": {
+        display: responsive$2({ 0: "block", 3: "none" }),
+        ".asidePanel__content": {
+          paddingTop: spacing$1(3)
+        },
+        ".content": {
+          background: "palette.background.paper",
+          overflow: " auto",
+          maxHeight: "90vh",
+          ".ApplicationMenu": {
+            mx: "auto",
+            py: responsive$2({ 0: 4, 2: 7 }),
+            px: responsive$2({ 0: 4, 2: 0 })
+          }
+        }
+      }
+    },
+    ".twoColumnsList__aside": {
+      width: "150px",
+      flexShrink: 0,
+      flexGrow: 0,
+      overflow: "auto",
+      maxHeight: "100%",
+      display: responsive$2({ 0: "none", 4: "flex" }),
+      flexDirection: "column",
+      alignItems: "stretch",
+      justifyContent: "stretch",
+      "& > div": {
+        height: "100%",
+        ".ApplicationMenu": {
+          height: "100%",
+          pb: "3px"
+        }
+      }
+    }
+  },
+  "#FloatingOptions": {
+    display: "none"
+  }
+};
+
+const withToolbar = {
+  display: "flex",
+  maxHeight: "100vh",
+  flexDirection: "column",
+  maxWidth: "oneColumn",
+  mx: "auto",
+  overflow: "hidden",
+  p: 3,
+  pt: 0,
+  ".withToolbar__topBox": { ...topBox, py: 3 },
+  ".withToolbar__topBox .topBox__heading .topBox__header .topBox__headings": {
+    alignItems: "start",
+    flexDirection: "column",
+    gap: 0
+  },
+  ".topBox__imageHeader img": {
+    borderRadius: "500px",
+    overFlow: "hidden"
+  },
+  ".withToolbar__section": {
+    display: "flex",
+    flexDirection: "column",
+    maxHeight: "100%",
+    overflow: "hidden",
+    ".withToolbar__toolbar": {
+      border: "1px solid",
+      borderBottom: "none",
+      borderColor: "palette.border.section",
+      boxShadow: "toolbar",
+      position: "relative",
+      zIndex: "menu"
+    },
+    ".withToolbar__main": {
+      background: "palette.background.paper",
+      border: "1px solid",
+      borderColor: "palette.border.section",
+      flexGrow: 1,
+      display: "flex",
+      flexDirection: "column",
+      gap: spacing$1(3),
+      overflow: "auto",
+      p: spacing$1(5)
+    }
+  }
+};
+
+const templates = {
+  footerResponsiveButtons,
+  oneColumnAside,
+  portalForm,
+  twoColumns,
+  twoColumnsCentered,
+  twoColumnsList,
+  twoColumnsAside,
+  twoColumnsListOneColumnAside,
+  withToolbar
+  /* PREPEND HERE */
+};
+
 const layout = (theme) => {
   return {
     charts,
     common: common(theme),
     util,
+    ...templates,
     validations
     /* PREPEND HERE */
   };
@@ -7263,7 +8249,7 @@ async function getRemarkable(extensions) {
 
 const parseMarkdown = async (options) => {
   const markdownLibrary = await getRemarkable(options.extensions);
-  const css = (await import('./styles-CXTekHxN.js')).markdownParserStyles ?? new ErrorImporting();
+  const css = (await import('./styles-DrJhu_P1.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();
@@ -7721,4 +8707,4 @@ class MarkdownBuilder {
 }
 
 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-BAf35hV5.js.map
+//# sourceMappingURL=index-BvID00ug.js.map