@websolutespa/bom-mixer-ui 0.0.3 → 0.2.0

package/dist/cjs/index.js

@@ -1177,13 +1177,15 @@ const StyledButtonGroup = styled__default.default.div`
 const ButtonGroup = /*#__PURE__*/React.forwardRef((_a, ref) => {
   var {
       children,
-      as = 'div'
+      as = 'div',
+      type = 'default'
     } = _a,
-    props = __rest(_a, ["children", "as"]);
+    props = __rest(_a, ["children", "as", "type"]);
   const mappedChildren = React.useMemo(() => React__default.default.Children.map(children, child => /*#__PURE__*/React__default.default.cloneElement(child, child.props ? Object.assign(Object.assign({}, child.props), {
     className: `${child.props.className} btn`
   }) : null)), [children]);
   return jsxRuntime.jsx(StyledButtonGroup, Object.assign({}, props, {
+    type: type,
     as: as,
     ref: ref
   }, {
@@ -1803,7 +1805,7 @@ const StyledBackdrop = styled__default.default.div`
   right: 0;
   bottom: 0;
   overflow: auto;
-  z-index: 1000;
+  z-index: 2000;
   -webkit-overflow-scrolling: touch;
   text-align: center;
 
@@ -1817,7 +1819,7 @@ const StyledBackdrop = styled__default.default.div`
 
   .position {
     position: relative;
-    z-index: 1001;
+    z-index: 2001;
     outline: none;
     max-width: 90%;
     margin: 20px auto;
@@ -1848,7 +1850,7 @@ const StyledBackdrop = styled__default.default.div`
     background-color: black;
     transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
     pointer-events: none;
-    z-index: 1000;
+    z-index: 2000;
     opacity: var(--backdrop-opacity);
   }
 
@@ -2770,102 +2772,417 @@ const Flex = bomMixerCore.withSchema(FlexBase, {
   displayName: 'Flex'
 });
 
-const CssScrollbar = styled.css`
-  &::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-    border-radius: 0;
-  }
-
-  &::-webkit-scrollbar-button {
-    display: none;
-  }
-
-  &::-webkit-scrollbar-button:hover {
-    display: none;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: var(--color-neutral-400);
-    box-shadow: none;
-    border-radius: 4px;
-
-    &:hover {
-      background-color: var(--color-neutral-600);
-    }
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: var(--color-neutral-100);
-    border-radius: 0;
-
-    &:hover {
-      background-color: var(--color-neutral-100);
-    }
-  }
-`;
-
-const CssBase = styled.css`
-html,
-body {
-  background: var(--color-neutral-100);
-  // color: var(--color-neutral-500);
-  scroll-behavior: smooth;
-}
-`;
-
-const CssDebug = styled.css`
-  .debug {
-    outline: 1px solid var(--color-danger-100);
-  }
-`;
-
-const CssPrint = styled.css`
-.print-none {
-  @media print {
-    display: none;
+var base = {
+  fontSize: {
+    xs: "14px",
+    sm: "15px",
+    md: "15px",
+    lg: "16px",
+    xl: "16px"
   }
-}
-.screen-none {
-  @media screen {
-    display: none;
+};
+var font = {
+  primary: {
+    family: "Inter, -apple-system, 'Helvetica Neue', 'Segoe UI', Roboto, Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
+    size: ["Min(6.25rem, 16vw)", "Min(4.5rem, 11.5vw)", "Min(2.75rem, 7vw)", "Min(2.5rem, 6.4vw)", "2.25rem", "1.875rem", "1.5rem", "1.125rem", "1rem", "0.9rem", "0.8rem", "0.7rem"],
+    lineHeight: ["0.9", "1.0", "1.1", "1.2", "1.3", "1.4", "1.5", "1.625", "1.5", "1.6", "1.7", "1.8"]
+  },
+  secondary: {
+    family: "Petrona, serif",
+    size: ["7.5rem", "5.4rem", "3.3rem", "3rem", "2.7rem", "2.25rem", "1.8rem", "1.35rem", "1.2rem", "1.08rem", "0.96rem", "0.84rem"],
+    lineHeight: ["0.9", "1.0", "1.1", "1.2", "1.3", "1.4", "1.5", "1.625", "1.5", "1.6", "1.7", "1.8"]
   }
-}
-`;
-
-const CssReset = styled.css`
-/*
-*,
-*::before,
-*::after {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-:where([hidden]:not([hidden='until-found'])) {
-  display: none !important;
-}
-
-:where(html) {
-  -webkit-text-size-adjust: none;
-  color-scheme: dark light;
-}
-
-@supports not (min-block-size: 100dvb) {
-  :where(html) {
-    block-size: 100%;
+};
+var grid = {
+  columns: 12,
+  size: "1fr",
+  columnGap: "Max(4vw, Min(96px, calc(100% / 24)))",
+  rowGap: "0"
+};
+var mediaQuery = {
+  xs: 0,
+  sm: 768,
+  md: 1024,
+  lg: 1440,
+  xl: 1600
+};
+var container = {
+  maxWidth: {
+    xs: "calc(100% - var(--grid-column-gap) * 2)",
+    sm: "calc(100% - var(--grid-column-gap) * 2)",
+    md: "calc(1024px - var(--grid-column-gap) * 2)",
+    lg: "calc(1440px - var(--grid-column-gap) * 2)",
+    xl: "calc(1600px - var(--grid-column-gap) * 2)"
   }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  :where(html:focus-within) {
-    scroll-behavior: smooth;
+};
+var maxWidth = {
+  xs: "calc(100% - var(--grid-column-gap) * 2)",
+  sm: "calc(100% - var(--grid-column-gap) * 2)",
+  md: "Min(928px, calc(100% - var(--grid-column-gap) * 2))",
+  lg: "Min(1344px, calc(100% - var(--grid-column-gap) * 4))",
+  xl: "Min(1204px, calc(100% - var(--grid-column-gap) * 6))"
+};
+var button = {
+  size: {
+    xs: "0.7rem",
+    sm: "0.8rem",
+    md: "1rem",
+    lg: "1.25rem",
+    xl: "1.45rem"
+  },
+  borderRadius: "0.2em"
+};
+var form = {
+  fontSize: "1.125rem",
+  lineHeight: "1.6",
+  padding: "0.8em"
+};
+var card = {
+  shadow: "0 20px 20px -10px rgba(0,0,0,0.2)"
+};
+var backdrop = {
+  opacity: 0.5
+};
+var border = {
+  radius: "0.5em"
+};
+var shadow = {
+  xs: "0 0.1rem 0.4rem -0.1rem rgba(0, 0, 0, 0.2)",
+  sm: "0 0.3rem 0.8rem -0.2rem rgba(0, 0, 0, 0.3)",
+  md: "0 0.6rem 1.6rem -0.3rem rgba(0, 0, 0, 0.4)",
+  lg: "0 0.9rem 3.2rem -0.4rem rgba(0, 0, 0, 0.5)",
+  xl: "0 1.2rem 6.4rem -0.5rem rgba(0, 0, 0, 0.6)"
+};
+var color = {
+  neutral: {
+    "100": "#FFFFFF",
+    "200": "#EFEFF2",
+    "300": "#DBDBD7",
+    "400": "#B1B1B1",
+    "500": "#7E7E8B",
+    "600": "#61616B",
+    "700": "#44444B",
+    "800": "#27272B",
+    "900": "#09090A"
+  },
+  primary: {
+    "100": "#F4F5FB",
+    "200": "#C4D2F9",
+    "300": "#9EAEF5",
+    "400": "#727CEF",
+    "500": "#4F46E5",
+    "600": "#3A33C4",
+    "700": "#2923A4",
+    "800": "#1A1684",
+    "900": "#100D6D"
+  },
+  secondary: {
+    "100": "#FFCDD8",
+    "200": "#FF9BBC",
+    "300": "#FF69AA",
+    "400": "#FF43A7",
+    "500": "#ff05a3",
+    "600": "#DB03A1",
+    "700": "#B70298",
+    "800": "#930189",
+    "900": "#76007A"
+  },
+  success: {
+    "100": "#CFFDD5",
+    "200": "#A1FCB5",
+    "300": "#70F69B",
+    "400": "#4CED90",
+    "500": "#16e280",
+    "600": "#10C27E",
+    "700": "#0BA278",
+    "800": "#07836C",
+    "900": "#046C64"
+  },
+  warning: {
+    "100": "#FEF9CB",
+    "200": "#FEF198",
+    "300": "#FEE765",
+    "400": "#FDDE3F",
+    "500": "#fdce00",
+    "600": "#D9AC00",
+    "700": "#B68D00",
+    "800": "#926E00",
+    "900": "#795900"
+  },
+  danger: {
+    "100": "#FEE9CD",
+    "200": "#FECC9C",
+    "300": "#FCA86A",
+    "400": "#FA8645",
+    "500": "#f74e09",
+    "600": "#D43406",
+    "700": "#B11F04",
+    "800": "#8F0F02",
+    "900": "#760301"
   }
-}
+};
+var theme = {
+  base: base,
+  font: font,
+  grid: grid,
+  mediaQuery: mediaQuery,
+  container: container,
+  maxWidth: maxWidth,
+  button: button,
+  form: form,
+  card: card,
+  backdrop: backdrop,
+  border: border,
+  shadow: shadow,
+  color: color
+};
 
-:where(body) {
-  block-size: 100%;
+const CssVars = styled.css`
+:root {
+  --base-font-size-xs: 14px;
+  --base-font-size-sm: 15px;
+  --base-font-size-md: 15px;
+  --base-font-size-lg: 16px;
+  --base-font-size-xl: 16px;
+  --font-primary-family: Inter, -apple-system, 'Helvetica Neue', 'Segoe UI', Roboto, Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-primary-size-0: Min(6.25rem, 16vw);
+  --font-primary-size-1: Min(4.5rem, 11.5vw);
+  --font-primary-size-2: Min(2.75rem, 7vw);
+  --font-primary-size-3: Min(2.5rem, 6.4vw);
+  --font-primary-size-4: 2.25rem;
+  --font-primary-size-5: 1.875rem;
+  --font-primary-size-6: 1.5rem;
+  --font-primary-size-7: 1.125rem;
+  --font-primary-size-8: 1rem;
+  --font-primary-size-9: 0.9rem;
+  --font-primary-size-10: 0.8rem;
+  --font-primary-size-11: 0.7rem;
+  --font-primary-line-height-0: 0.9;
+  --font-primary-line-height-1: 1.0;
+  --font-primary-line-height-2: 1.1;
+  --font-primary-line-height-3: 1.2;
+  --font-primary-line-height-4: 1.3;
+  --font-primary-line-height-5: 1.4;
+  --font-primary-line-height-6: 1.5;
+  --font-primary-line-height-7: 1.625;
+  --font-primary-line-height-8: 1.5;
+  --font-primary-line-height-9: 1.6;
+  --font-primary-line-height-10: 1.7;
+  --font-primary-line-height-11: 1.8;
+  --font-secondary-family: Petrona, serif;
+  --font-secondary-size-0: 7.5rem;
+  --font-secondary-size-1: 5.4rem;
+  --font-secondary-size-2: 3.3rem;
+  --font-secondary-size-3: 3rem;
+  --font-secondary-size-4: 2.7rem;
+  --font-secondary-size-5: 2.25rem;
+  --font-secondary-size-6: 1.8rem;
+  --font-secondary-size-7: 1.35rem;
+  --font-secondary-size-8: 1.2rem;
+  --font-secondary-size-9: 1.08rem;
+  --font-secondary-size-10: 0.96rem;
+  --font-secondary-size-11: 0.84rem;
+  --font-secondary-line-height-0: 0.9;
+  --font-secondary-line-height-1: 1.0;
+  --font-secondary-line-height-2: 1.1;
+  --font-secondary-line-height-3: 1.2;
+  --font-secondary-line-height-4: 1.3;
+  --font-secondary-line-height-5: 1.4;
+  --font-secondary-line-height-6: 1.5;
+  --font-secondary-line-height-7: 1.625;
+  --font-secondary-line-height-8: 1.5;
+  --font-secondary-line-height-9: 1.6;
+  --font-secondary-line-height-10: 1.7;
+  --font-secondary-line-height-11: 1.8;
+  --grid-columns: 12;
+  --grid-size: 1fr;
+  --grid-column-gap: Max(4vw, Min(96px, calc(100% / 24)));
+  --grid-row-gap: 0;
+  --media-query-xs: 0;
+  --media-query-sm: 768;
+  --media-query-md: 1024;
+  --media-query-lg: 1440;
+  --media-query-xl: 1600;
+  --container-max-width-xs: calc(100% - var(--grid-column-gap) * 2);
+  --container-max-width-sm: calc(100% - var(--grid-column-gap) * 2);
+  --container-max-width-md: calc(1024px - var(--grid-column-gap) * 2);
+  --container-max-width-lg: calc(1440px - var(--grid-column-gap) * 2);
+  --container-max-width-xl: calc(1600px - var(--grid-column-gap) * 2);
+  --max-width-xs: calc(100% - var(--grid-column-gap) * 2);
+  --max-width-sm: calc(100% - var(--grid-column-gap) * 2);
+  --max-width-md: Min(928px, calc(100% - var(--grid-column-gap) * 2));
+  --max-width-lg: Min(1344px, calc(100% - var(--grid-column-gap) * 4));
+  --max-width-xl: Min(1204px, calc(100% - var(--grid-column-gap) * 6));
+  --button-size-xs: 0.7rem;
+  --button-size-sm: 0.8rem;
+  --button-size-md: 1rem;
+  --button-size-lg: 1.25rem;
+  --button-size-xl: 1.45rem;
+  --button-border-radius: 0.2em;
+  --form-font-size: 1.125rem;
+  --form-line-height: 1.6;
+  --form-padding: 0.8em;
+  --card-shadow: 0 20px 20px -10px rgba(0,0,0,0.2);
+  --backdrop-opacity: 0.5;
+  --border-radius: 0.5em;
+  --shadow-xs: 0 0.1rem 0.4rem -0.1rem rgba(0, 0, 0, 0.2);
+  --shadow-sm: 0 0.3rem 0.8rem -0.2rem rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 0.6rem 1.6rem -0.3rem rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 0.9rem 3.2rem -0.4rem rgba(0, 0, 0, 0.5);
+  --shadow-xl: 0 1.2rem 6.4rem -0.5rem rgba(0, 0, 0, 0.6);
+  --color-neutral-100: #FFFFFF;
+  --color-neutral-200: #EFEFF2;
+  --color-neutral-300: #DBDBD7;
+  --color-neutral-400: #B1B1B1;
+  --color-neutral-500: #7E7E8B;
+  --color-neutral-600: #61616B;
+  --color-neutral-700: #44444B;
+  --color-neutral-800: #27272B;
+  --color-neutral-900: #09090A;
+  --color-primary-100: #F4F5FB;
+  --color-primary-200: #C4D2F9;
+  --color-primary-300: #9EAEF5;
+  --color-primary-400: #727CEF;
+  --color-primary-500: #4F46E5;
+  --color-primary-600: #3A33C4;
+  --color-primary-700: #2923A4;
+  --color-primary-800: #1A1684;
+  --color-primary-900: #100D6D;
+  --color-secondary-100: #FFCDD8;
+  --color-secondary-200: #FF9BBC;
+  --color-secondary-300: #FF69AA;
+  --color-secondary-400: #FF43A7;
+  --color-secondary-500: #ff05a3;
+  --color-secondary-600: #DB03A1;
+  --color-secondary-700: #B70298;
+  --color-secondary-800: #930189;
+  --color-secondary-900: #76007A;
+  --color-success-100: #CFFDD5;
+  --color-success-200: #A1FCB5;
+  --color-success-300: #70F69B;
+  --color-success-400: #4CED90;
+  --color-success-500: #16e280;
+  --color-success-600: #10C27E;
+  --color-success-700: #0BA278;
+  --color-success-800: #07836C;
+  --color-success-900: #046C64;
+  --color-warning-100: #FEF9CB;
+  --color-warning-200: #FEF198;
+  --color-warning-300: #FEE765;
+  --color-warning-400: #FDDE3F;
+  --color-warning-500: #fdce00;
+  --color-warning-600: #D9AC00;
+  --color-warning-700: #B68D00;
+  --color-warning-800: #926E00;
+  --color-warning-900: #795900;
+  --color-danger-100: #FEE9CD;
+  --color-danger-200: #FECC9C;
+  --color-danger-300: #FCA86A;
+  --color-danger-400: #FA8645;
+  --color-danger-500: #f74e09;
+  --color-danger-600: #D43406;
+  --color-danger-700: #B11F04;
+  --color-danger-800: #8F0F02;
+  --color-danger-900: #760301;
+}
+`;
+
+const CssScrollbar = styled.css`
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    border-radius: 0;
+  }
+
+  &::-webkit-scrollbar-button {
+    display: none;
+  }
+
+  &::-webkit-scrollbar-button:hover {
+    display: none;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--color-neutral-400);
+    box-shadow: none;
+    border-radius: 4px;
+
+    &:hover {
+      background-color: var(--color-neutral-600);
+    }
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: var(--color-neutral-100);
+    border-radius: 0;
+
+    &:hover {
+      background-color: var(--color-neutral-100);
+    }
+  }
+`;
+
+const CssBase = styled.css`
+html,
+body {
+  background: var(--color-neutral-100);
+  // color: var(--color-neutral-500);
+  scroll-behavior: smooth;
+}
+`;
+
+const CssDebug = styled.css`
+  .debug {
+    outline: 1px solid var(--color-danger-100);
+  }
+`;
+
+const CssPrint = styled.css`
+.print-none {
+  @media print {
+    display: none;
+  }
+}
+.screen-none {
+  @media screen {
+    display: none;
+  }
+}
+`;
+
+const CssReset = styled.css`
+/*
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:where([hidden]:not([hidden='until-found'])) {
+  display: none !important;
+}
+
+:where(html) {
+  -webkit-text-size-adjust: none;
+  color-scheme: dark light;
+}
+
+@supports not (min-block-size: 100dvb) {
+  :where(html) {
+    block-size: 100%;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :where(html:focus-within) {
+    scroll-behavior: smooth;
+  }
+}
+
+:where(body) {
+  block-size: 100%;
   block-size: 100dvb;
   line-height: 1.5;
   font-family: system-ui, sans-serif;
@@ -3031,211 +3348,61 @@ html {
 }
 
 img,
-video {
-  height: auto;
-  max-width: 100%;
-}
-
-iframe {
-  border: 0;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-td,
-th {
-  padding: 0;
-}
-
-//
-
-html,
-body {
-  margin: 0;
-  padding: 0;
-  block-size: 100%;
-  block-size: 100dvb;
-  font-size: 20px;
-  line-height: 1.5;
-  font-family: system-ui, sans-serif;
-  -webkit-font-smoothing: antialiased;
-}
-`;
-
-const CssTypography = styled.css`
-html,
-body {
-  font-family: var(--font-primary-family);
-  line-height: 1.5;
-  ${props => eachMedia(props, key => `font-size: var(--base-font-size-${key});`)}
-}
-
-body {
-  background: var(--color-neutral-100);
-  color: var(--color-neutral-700);
-}
-
-/*
-* {
-  outline-offset: 0.2rem;
-  &:focus-visible {
-    outline: 2px solid var(--color-primary-200);
-  }
-}
-*/
-`;
-
-const CssVars = styled.css`
-:root {
-  --base-font-size-xs: 14px;
-  --base-font-size-sm: 15px;
-  --base-font-size-md: 15px;
-  --base-font-size-lg: 16px;
-  --base-font-size-xl: 16px;
-  --font-primary-family: Inter, -apple-system, 'Helvetica Neue', 'Segoe UI', Roboto, Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  --font-primary-size-0: Min(6.25rem, 16vw);
-  --font-primary-size-1: Min(4.5rem, 11.5vw);
-  --font-primary-size-2: Min(2.75rem, 7vw);
-  --font-primary-size-3: Min(2.5rem, 6.4vw);
-  --font-primary-size-4: 2.25rem;
-  --font-primary-size-5: 1.875rem;
-  --font-primary-size-6: 1.5rem;
-  --font-primary-size-7: 1.125rem;
-  --font-primary-size-8: 1rem;
-  --font-primary-size-9: 0.9rem;
-  --font-primary-size-10: 0.8rem;
-  --font-primary-size-11: 0.7rem;
-  --font-primary-line-height-0: 0.9;
-  --font-primary-line-height-1: 1.0;
-  --font-primary-line-height-2: 1.1;
-  --font-primary-line-height-3: 1.2;
-  --font-primary-line-height-4: 1.3;
-  --font-primary-line-height-5: 1.4;
-  --font-primary-line-height-6: 1.5;
-  --font-primary-line-height-7: 1.625;
-  --font-primary-line-height-8: 1.5;
-  --font-primary-line-height-9: 1.6;
-  --font-primary-line-height-10: 1.7;
-  --font-primary-line-height-11: 1.8;
-  --font-secondary-family: Petrona, serif;
-  --font-secondary-size-0: 7.5rem;
-  --font-secondary-size-1: 5.4rem;
-  --font-secondary-size-2: 3.3rem;
-  --font-secondary-size-3: 3rem;
-  --font-secondary-size-4: 2.7rem;
-  --font-secondary-size-5: 2.25rem;
-  --font-secondary-size-6: 1.8rem;
-  --font-secondary-size-7: 1.35rem;
-  --font-secondary-size-8: 1.2rem;
-  --font-secondary-size-9: 1.08rem;
-  --font-secondary-size-10: 0.96rem;
-  --font-secondary-size-11: 0.84rem;
-  --font-secondary-line-height-0: 0.9;
-  --font-secondary-line-height-1: 1.0;
-  --font-secondary-line-height-2: 1.1;
-  --font-secondary-line-height-3: 1.2;
-  --font-secondary-line-height-4: 1.3;
-  --font-secondary-line-height-5: 1.4;
-  --font-secondary-line-height-6: 1.5;
-  --font-secondary-line-height-7: 1.625;
-  --font-secondary-line-height-8: 1.5;
-  --font-secondary-line-height-9: 1.6;
-  --font-secondary-line-height-10: 1.7;
-  --font-secondary-line-height-11: 1.8;
-  --grid-columns: 12;
-  --grid-size: 1fr;
-  --grid-column-gap: Max(4vw, Min(96px, calc(100% / 24)));
-  --grid-row-gap: 0;
-  --media-query-xs: 0;
-  --media-query-sm: 768;
-  --media-query-md: 1024;
-  --media-query-lg: 1440;
-  --media-query-xl: 1600;
-  --container-max-width-xs: calc(100% - var(--grid-column-gap) * 2);
-  --container-max-width-sm: calc(100% - var(--grid-column-gap) * 2);
-  --container-max-width-md: calc(1024px - var(--grid-column-gap) * 2);
-  --container-max-width-lg: calc(1440px - var(--grid-column-gap) * 2);
-  --container-max-width-xl: calc(1600px - var(--grid-column-gap) * 2);
-  --max-width-xs: calc(100% - var(--grid-column-gap) * 2);
-  --max-width-sm: calc(100% - var(--grid-column-gap) * 2);
-  --max-width-md: Min(928px, calc(100% - var(--grid-column-gap) * 2));
-  --max-width-lg: Min(1344px, calc(100% - var(--grid-column-gap) * 4));
-  --max-width-xl: Min(1204px, calc(100% - var(--grid-column-gap) * 6));
-  --button-size-xs: 0.7rem;
-  --button-size-sm: 0.8rem;
-  --button-size-md: 1rem;
-  --button-size-lg: 1.25rem;
-  --button-size-xl: 1.45rem;
-  --button-border-radius: 0.2em;
-  --form-font-size: 1.125rem;
-  --form-line-height: 1.6;
-  --form-padding: 0.8em;
-  --card-shadow: 0 20px 20px -10px rgba(0,0,0,0.2);
-  --backdrop-opacity: 0.5;
-  --border-radius: 0.5em;
-  --shadow-xs: 0 0.1rem 0.4rem -0.1rem rgba(0, 0, 0, 0.2);
-  --shadow-sm: 0 0.3rem 0.8rem -0.2rem rgba(0, 0, 0, 0.3);
-  --shadow-md: 0 0.6rem 1.6rem -0.3rem rgba(0, 0, 0, 0.4);
-  --shadow-lg: 0 0.9rem 3.2rem -0.4rem rgba(0, 0, 0, 0.5);
-  --shadow-xl: 0 1.2rem 6.4rem -0.5rem rgba(0, 0, 0, 0.6);
-  --color-neutral-100: #FFFFFF;
-  --color-neutral-200: #EFEFF2;
-  --color-neutral-300: #DBDBD7;
-  --color-neutral-400: #B1B1B1;
-  --color-neutral-500: #7E7E8B;
-  --color-neutral-600: #61616B;
-  --color-neutral-700: #44444B;
-  --color-neutral-800: #27272B;
-  --color-neutral-900: #09090A;
-  --color-primary-100: #F4F5FB;
-  --color-primary-200: #C4D2F9;
-  --color-primary-300: #9EAEF5;
-  --color-primary-400: #727CEF;
-  --color-primary-500: #4F46E5;
-  --color-primary-600: #3A33C4;
-  --color-primary-700: #2923A4;
-  --color-primary-800: #1A1684;
-  --color-primary-900: #100D6D;
-  --color-secondary-100: #FFCDD8;
-  --color-secondary-200: #FF9BBC;
-  --color-secondary-300: #FF69AA;
-  --color-secondary-400: #FF43A7;
-  --color-secondary-500: #ff05a3;
-  --color-secondary-600: #DB03A1;
-  --color-secondary-700: #B70298;
-  --color-secondary-800: #930189;
-  --color-secondary-900: #76007A;
-  --color-success-100: #CFFDD5;
-  --color-success-200: #A1FCB5;
-  --color-success-300: #70F69B;
-  --color-success-400: #4CED90;
-  --color-success-500: #16e280;
-  --color-success-600: #10C27E;
-  --color-success-700: #0BA278;
-  --color-success-800: #07836C;
-  --color-success-900: #046C64;
-  --color-warning-100: #FEF9CB;
-  --color-warning-200: #FEF198;
-  --color-warning-300: #FEE765;
-  --color-warning-400: #FDDE3F;
-  --color-warning-500: #fdce00;
-  --color-warning-600: #D9AC00;
-  --color-warning-700: #B68D00;
-  --color-warning-800: #926E00;
-  --color-warning-900: #795900;
-  --color-danger-100: #FEE9CD;
-  --color-danger-200: #FECC9C;
-  --color-danger-300: #FCA86A;
-  --color-danger-400: #FA8645;
-  --color-danger-500: #f74e09;
-  --color-danger-600: #D43406;
-  --color-danger-700: #B11F04;
-  --color-danger-800: #8F0F02;
-  --color-danger-900: #760301;
+video {
+  height: auto;
+  max-width: 100%;
+}
+
+iframe {
+  border: 0;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
+
+//
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  block-size: 100%;
+  block-size: 100dvb;
+  font-size: 20px;
+  line-height: 1.5;
+  font-family: system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+`;
+
+const CssTypography = styled.css`
+html,
+body {
+  font-family: var(--font-primary-family);
+  line-height: 1.5;
+  ${props => eachMedia(props, key => `font-size: var(--base-font-size-${key});`)}
+}
+
+body {
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-700);
+}
+
+/*
+* {
+  outline-offset: 0.2rem;
+  &:focus-visible {
+    outline: 2px solid var(--color-primary-200);
+  }
 }
+*/
 `;
 
 // Import Swiper styles
@@ -3263,407 +3430,7 @@ const GlobalStyle = styled.createGlobalStyle`
   }
 `;
 
-var base = {
-  fontSize: {
-    xs: "14px",
-    sm: "15px",
-    md: "15px",
-    lg: "16px",
-    xl: "16px"
-  }
-};
-var font = {
-  primary: {
-    family: "Inter, -apple-system, 'Helvetica Neue', 'Segoe UI', Roboto, Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
-    size: ["Min(6.25rem, 16vw)", "Min(4.5rem, 11.5vw)", "Min(2.75rem, 7vw)", "Min(2.5rem, 6.4vw)", "2.25rem", "1.875rem", "1.5rem", "1.125rem", "1rem", "0.9rem", "0.8rem", "0.7rem"],
-    lineHeight: ["0.9", "1.0", "1.1", "1.2", "1.3", "1.4", "1.5", "1.625", "1.5", "1.6", "1.7", "1.8"]
-  },
-  secondary: {
-    family: "Petrona, serif",
-    size: ["7.5rem", "5.4rem", "3.3rem", "3rem", "2.7rem", "2.25rem", "1.8rem", "1.35rem", "1.2rem", "1.08rem", "0.96rem", "0.84rem"],
-    lineHeight: ["0.9", "1.0", "1.1", "1.2", "1.3", "1.4", "1.5", "1.625", "1.5", "1.6", "1.7", "1.8"]
-  }
-};
-var grid = {
-  columns: 12,
-  size: "1fr",
-  columnGap: "Max(4vw, Min(96px, calc(100% / 24)))",
-  rowGap: "0"
-};
-var mediaQuery = {
-  xs: 0,
-  sm: 768,
-  md: 1024,
-  lg: 1440,
-  xl: 1600
-};
-var container = {
-  maxWidth: {
-    xs: "calc(100% - var(--grid-column-gap) * 2)",
-    sm: "calc(100% - var(--grid-column-gap) * 2)",
-    md: "calc(1024px - var(--grid-column-gap) * 2)",
-    lg: "calc(1440px - var(--grid-column-gap) * 2)",
-    xl: "calc(1600px - var(--grid-column-gap) * 2)"
-  }
-};
-var maxWidth = {
-  xs: "calc(100% - var(--grid-column-gap) * 2)",
-  sm: "calc(100% - var(--grid-column-gap) * 2)",
-  md: "Min(928px, calc(100% - var(--grid-column-gap) * 2))",
-  lg: "Min(1344px, calc(100% - var(--grid-column-gap) * 4))",
-  xl: "Min(1204px, calc(100% - var(--grid-column-gap) * 6))"
-};
-var button = {
-  size: {
-    xs: "0.7rem",
-    sm: "0.8rem",
-    md: "1rem",
-    lg: "1.25rem",
-    xl: "1.45rem"
-  },
-  borderRadius: "0.2em"
-};
-var form = {
-  fontSize: "1.125rem",
-  lineHeight: "1.6",
-  padding: "0.8em"
-};
-var card = {
-  shadow: "0 20px 20px -10px rgba(0,0,0,0.2)"
-};
-var backdrop = {
-  opacity: 0.5
-};
-var border = {
-  radius: "0.5em"
-};
-var shadow = {
-  xs: "0 0.1rem 0.4rem -0.1rem rgba(0, 0, 0, 0.2)",
-  sm: "0 0.3rem 0.8rem -0.2rem rgba(0, 0, 0, 0.3)",
-  md: "0 0.6rem 1.6rem -0.3rem rgba(0, 0, 0, 0.4)",
-  lg: "0 0.9rem 3.2rem -0.4rem rgba(0, 0, 0, 0.5)",
-  xl: "0 1.2rem 6.4rem -0.5rem rgba(0, 0, 0, 0.6)"
-};
-var color = {
-  neutral: {
-    "100": "#FFFFFF",
-    "200": "#EFEFF2",
-    "300": "#DBDBD7",
-    "400": "#B1B1B1",
-    "500": "#7E7E8B",
-    "600": "#61616B",
-    "700": "#44444B",
-    "800": "#27272B",
-    "900": "#09090A"
-  },
-  primary: {
-    "100": "#F4F5FB",
-    "200": "#C4D2F9",
-    "300": "#9EAEF5",
-    "400": "#727CEF",
-    "500": "#4F46E5",
-    "600": "#3A33C4",
-    "700": "#2923A4",
-    "800": "#1A1684",
-    "900": "#100D6D"
-  },
-  secondary: {
-    "100": "#FFCDD8",
-    "200": "#FF9BBC",
-    "300": "#FF69AA",
-    "400": "#FF43A7",
-    "500": "#ff05a3",
-    "600": "#DB03A1",
-    "700": "#B70298",
-    "800": "#930189",
-    "900": "#76007A"
-  },
-  success: {
-    "100": "#CFFDD5",
-    "200": "#A1FCB5",
-    "300": "#70F69B",
-    "400": "#4CED90",
-    "500": "#16e280",
-    "600": "#10C27E",
-    "700": "#0BA278",
-    "800": "#07836C",
-    "900": "#046C64"
-  },
-  warning: {
-    "100": "#FEF9CB",
-    "200": "#FEF198",
-    "300": "#FEE765",
-    "400": "#FDDE3F",
-    "500": "#fdce00",
-    "600": "#D9AC00",
-    "700": "#B68D00",
-    "800": "#926E00",
-    "900": "#795900"
-  },
-  danger: {
-    "100": "#FEE9CD",
-    "200": "#FECC9C",
-    "300": "#FCA86A",
-    "400": "#FA8645",
-    "500": "#f74e09",
-    "600": "#D43406",
-    "700": "#B11F04",
-    "800": "#8F0F02",
-    "900": "#760301"
-  }
-};
-var theme = {
-  base: base,
-  font: font,
-  grid: grid,
-  mediaQuery: mediaQuery,
-  container: container,
-  maxWidth: maxWidth,
-  button: button,
-  form: form,
-  card: card,
-  backdrop: backdrop,
-  border: border,
-  shadow: shadow,
-  color: color
-};
-
 const customTheme = theme;
-/*
-const t: IITheme = {
-  base: {
-    fontSize: {
-      xs: '1px',
-    }
-  },
-  font: {
-    'primary': {
-      'family': 'Inter, -apple-system, \'Helvetica Neue\', \'Segoe UI\', Roboto, Arial, \'Noto Sans\', sans-serif, \'Apple Color Emoji\', \'Segoe UI Emoji\', \'Segoe UI Symbol\', \'Noto Color Emoji\'',
-      'size': [
-        'Min(6.25rem, 16vw)',
-        'Min(4.5rem, 11.5vw)',
-        'Min(2.75rem, 7vw)',
-        'Min(2.5rem, 6.4vw)',
-        '2.25rem',
-        '1.875rem',
-        '1.5rem',
-        '1.125rem',
-        '1rem',
-        '0.9rem',
-        '0.8rem',
-        '0.7rem'
-      ],
-      'lineHeight': [
-        '0.9',
-        '1.0',
-        '1.1',
-        '1.2',
-        '1.3',
-        '1.4',
-        '1.5',
-        '1.625',
-        '1.5',
-        '1.6',
-        '1.7',
-        '1.8'
-      ]
-    },
-    'secondary': {
-      'family': 'Petrona, serif',
-      'size': [
-        '7.5rem',
-        '5.4rem',
-        '3.3rem',
-        '3rem',
-        '2.7rem',
-        '2.25rem',
-        '1.8rem',
-        '1.35rem',
-        '1.2rem',
-        '1.08rem',
-        '0.96rem',
-        '0.84rem'
-      ],
-      'lineHeight': [
-        '0.9',
-        '1.0',
-        '1.1',
-        '1.2',
-        '1.3',
-        '1.4',
-        '1.5',
-        '1.625',
-        '1.5',
-        '1.6',
-        '1.7',
-        '1.8'
-      ]
-    }
-  },
-  grid: {
-    'columns': 12,
-    'size': '1fr',
-    'columnGap': 'Max(4vw, Min(96px, calc(100% / 24)))',
-    'rowGap': '0'
-  },
-  'mediaQuery': {
-    'xs': 0,
-    'sm': 768,
-    'md': 1024,
-    'lg': 1440,
-    'xl': 1600
-  },
-  'container': {
-    'maxWidth': {
-      'xs': 'calc(100% - var(--grid-column-gap) * 2)',
-      'sm': 'calc(100% - var(--grid-column-gap) * 2)',
-      'md': 'calc(1024px - var(--grid-column-gap) * 2)',
-      'lg': 'calc(1440px - var(--grid-column-gap) * 2)',
-      'xl': 'calc(1600px - var(--grid-column-gap) * 2)'
-    }
-  },
-  'maxWidth': {
-    'xs': 'calc(100% - var(--grid-column-gap) * 2)',
-    'sm': 'calc(100% - var(--grid-column-gap) * 2)',
-    'md': 'Min(928px, calc(100% - var(--grid-column-gap) * 2))',
-    'lg': 'Min(1344px, calc(100% - var(--grid-column-gap) * 4))',
-    'xl': 'Min(1204px, calc(100% - var(--grid-column-gap) * 6))'
-  },
-  'button': {
-    'size': {
-      'xs': '0.7rem',
-      'sm': '0.8rem',
-      'md': '1rem',
-      'lg': '1.25rem',
-      'xl': '1.45rem'
-    },
-    'borderRadius': '0.2em'
-  },
-  'form': {
-    'fontSize': '1.125rem',
-    'lineHeight': '1.6',
-    'padding': '0.8em',
-  },
-  'card': {
-    'shadow': '0 20px 20px -10px rgba(0,0,0,0.2)'
-  },
-  'backdrop': {
-    'opacity': 0.5
-  },
-  'border': {
-    'radius': '0.5em'
-  },
-  'shadow': {
-    'xs': '0 0.1rem 0.4rem -0.1rem rgba(0, 0, 0, 0.2)',
-    'sm': '0 0.3rem 0.8rem -0.2rem rgba(0, 0, 0, 0.3)',
-    'md': '0 0.6rem 1.6rem -0.3rem rgba(0, 0, 0, 0.4)',
-    'lg': '0 0.9rem 3.2rem -0.4rem rgba(0, 0, 0, 0.5)',
-    'xl': '0 1.2rem 6.4rem -0.5rem rgba(0, 0, 0, 0.6)'
-  },
-  'color': {
-    'neutral': {
-      '100': '#FFFFFF',
-      '200': '#EFEFF2',
-      '300': '#DBDBD7',
-      '400': '#B1B1B1',
-      '500': '#7E7E8B',
-      '600': '#61616B',
-      '700': '#44444B',
-      '800': '#27272B',
-      '900': '#09090A'
-    },
-    'primary': {
-      '100': '#F4F5FB',
-      '200': '#C4D2F9',
-      '300': '#9EAEF5',
-      '400': '#727CEF',
-      '500': '#4F46E5',
-      '600': '#3A33C4',
-      '700': '#2923A4',
-      '800': '#1A1684',
-      '900': '#100D6D'
-    },
-    'secondary': {
-      '100': '#FFCDD8',
-      '200': '#FF9BBC',
-      '300': '#FF69AA',
-      '400': '#FF43A7',
-      '500': '#ff05a3',
-      '600': '#DB03A1',
-      '700': '#B70298',
-      '800': '#930189',
-      '900': '#76007A'
-    },
-    'success': {
-      '100': '#CFFDD5',
-      '200': '#A1FCB5',
-      '300': '#70F69B',
-      '400': '#4CED90',
-      '500': '#16e280',
-      '600': '#10C27E',
-      '700': '#0BA278',
-      '800': '#07836C',
-      '900': '#046C64'
-    },
-    'warning': {
-      '100': '#FEF9CB',
-      '200': '#FEF198',
-      '300': '#FEE765',
-      '400': '#FDDE3F',
-      '500': '#fdce00',
-      '600': '#D9AC00',
-      '700': '#B68D00',
-      '800': '#926E00',
-      '900': '#795900'
-    },
-    'danger': {
-      '100': '#FEE9CD',
-      '200': '#FECC9C',
-      '300': '#FCA86A',
-      '400': '#FA8645',
-      '500': '#f74e09',
-      '600': '#D43406',
-      '700': '#B11F04',
-      '800': '#8F0F02',
-      '900': '#760301'
-    }
-  }
-};
-
-const a = t.base.fontSize.xs;
-
-const p: IITheme = theme;
-
-const b = p.font.primary.family;
-*/
-
-function merge(target, source) {
-  // override null values
-  if (source === null) {
-    return source;
-  }
-  // assign new values
-  if (!target) {
-    if (source && typeof source === 'object') {
-      return Object.assign({}, source);
-    } else {
-      return source;
-    }
-  }
-  // merge objects
-  if (source && typeof source === 'object') {
-    Object.keys(source).forEach(key => {
-      const value = source[key];
-      if (typeof value === 'object' && !Array.isArray(value)) {
-        target[key] = merge(target[key], value);
-      } else {
-        target[key] = value;
-      }
-    });
-  }
-  return target;
-}
-
 const sizes = ['xs', 'sm', 'md', 'lg', 'xl'];
 
 const GridRow = styled__default.default.div`
@@ -10331,16 +10098,20 @@ var textText1 = /*#__PURE__*/Object.freeze({
 
 const LAZY_MODULES = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, Carousel1Export), Download1Export), MediaFull1Export), MediaFull2Export), MediaMedia1Export), NotFoundExport), Related1Export), SizesColors1Export), Text1Export), TextAside1Export), TextMedia1Export), TextText1Export);
 
-const lazyLoadComponent = component => {
+const lazyLoadComponent = function (component, modules) {
+  if (modules === void 0) {
+    modules = LAZY_MODULES;
+  }
   const key = component.schema || component.blockType;
-  const Component = LAZY_MODULES[key] || LAZY_MODULES['not-found'];
+  const Component = modules[key] || LAZY_MODULES['not-found'];
   return jsxRuntime.jsx(Component, {
     item: component
   });
 };
 const LazyLoader = _ref => {
   let {
-    components
+    components,
+    modules = LAZY_MODULES
   } = _ref;
   if (!components) {
     return null;
@@ -10351,7 +10122,7 @@ const LazyLoader = _ref => {
         minHeight: "50vh"
       })
     }, {
-      children: lazyLoadComponent(component)
+      children: lazyLoadComponent(component, modules)
     }), i))
   });
 };
@@ -11708,13 +11479,14 @@ const CategoryHero = _a => {
             fontWeight: "700"
           }, {
             children: item.title
-          })), item.abstract && jsxRuntime.jsx(Text, Object.assign({
+          })), item.abstract && jsxRuntime.jsx(Text, {
             size: "8",
             lineHeight: "2",
-            maxWidth: "76ch"
-          }, {
-            children: item.abstract
-          }))]
+            maxWidth: "76ch",
+            dangerouslySetInnerHTML: {
+              __html: item.abstract
+            }
+          })]
         }))
       })
     })]
@@ -11732,13 +11504,14 @@ const CategoryHero = _a => {
           fontWeight: "700"
         }, {
           children: item.title
-        })), item.abstract && jsxRuntime.jsx(Text, Object.assign({
+        })), item.abstract && jsxRuntime.jsx(Text, {
           size: "8",
           lineHeight: "2",
-          maxWidth: "76ch"
-        }, {
-          children: item.abstract
-        }))]
+          maxWidth: "76ch",
+          dangerouslySetInnerHTML: {
+            __html: item.abstract
+          }
+        })]
       }))
     })
   }));
@@ -20482,7 +20255,7 @@ const Typography = props => {
       }, {
         children: [jsxRuntime.jsx(Code, {
           children: value.family
-        }), value.size.map((size, s) => jsxRuntime.jsx(TypographyItem, {
+        }), value.size.map((size, s) => size && jsxRuntime.jsx(TypographyItem, {
           type: key,
           size: size,
           s: s
@@ -20665,7 +20438,6 @@ exports.hasChildOfType = hasChildOfType;
 exports.hypenize = hypenize;
 exports.isChildElement = isChildElement;
 exports.mapChildsByType = mapChildsByType;
-exports.merge = merge;
 exports.sizes = sizes;
 exports.theme = customTheme;
 exports.useAutocompleteContext = useAutocompleteContext;