@xelto.npm/xc2-lib 0.0.10 → 0.0.13

package/dist/cjs/index.js

@@ -6256,7 +6256,7 @@ function unstable_createStyleFunctionSx(styleFunctionMapping$1 = styleFunctionMa
 const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
 
-const _excluded$e = ["sx"];
+const _excluded$f = ["sx"];
 const splitProps = props => {
   const result = {
     systemProps: {},
@@ -6275,7 +6275,7 @@ function extendSxProp(props) {
   const {
       sx: inSx
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$e);
+    other = _objectWithoutPropertiesLoose(props, _excluded$f);
   const {
     systemProps,
     otherProps
@@ -6301,7 +6301,7 @@ function extendSxProp(props) {
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-const _excluded$d = ["values", "unit", "step"];
+const _excluded$e = ["values", "unit", "step"];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -6336,7 +6336,7 @@ function createBreakpoints(breakpoints) {
       unit = 'px',
       step = 5
     } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$d);
+    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$e);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -6414,7 +6414,7 @@ function createSpacing(spacingInput = 8) {
   return spacing;
 }
 
-const _excluded$c = ["breakpoints", "palette", "spacing", "shape"];
+const _excluded$d = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme$1(options = {}, ...args) {
   const {
       breakpoints: breakpointsInput = {},
@@ -6422,7 +6422,7 @@ function createTheme$1(options = {}, ...args) {
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$c);
+    other = _objectWithoutPropertiesLoose(options, _excluded$d);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -6526,7 +6526,7 @@ function useTheme(defaultTheme = systemDefaultTheme$1) {
   return useTheme$1(defaultTheme);
 }
 
-const _excluded$b = ["className", "component"];
+const _excluded$c = ["className", "component"];
 function createBox(options = {}) {
   const {
     defaultTheme,
@@ -6544,7 +6544,7 @@ function createBox(options = {}) {
         className,
         component = 'div'
       } = _extendSxProp,
-      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$b);
+      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$c);
     return /*#__PURE__*/jsxRuntime.exports.jsx(BoxRoot, _extends$1({
       as: component,
       ref: ref,
@@ -6576,7 +6576,7 @@ process.env.NODE_ENV !== "production" ? Box$1.propTypes /* remove-proptypes */ =
   sx: propTypes.exports.oneOfType([propTypes.exports.arrayOf(propTypes.exports.oneOfType([propTypes.exports.func, propTypes.exports.object, propTypes.exports.bool])), propTypes.exports.func, propTypes.exports.object])
 } : void 0;
 
-const _excluded$a = ["variant"];
+const _excluded$b = ["variant"];
 function isEmpty$1(string) {
   return string.length === 0;
 }
@@ -6590,7 +6590,7 @@ function propsToClassKey(props) {
   const {
       variant
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$a);
+    other = _objectWithoutPropertiesLoose(props, _excluded$b);
   let classKey = variant || '';
   Object.keys(other).sort().forEach(key => {
     if (key === 'color') {
@@ -6602,7 +6602,7 @@ function propsToClassKey(props) {
   return classKey;
 }
 
-const _excluded$9 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
+const _excluded$a = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
   _excluded2$1 = ["theme"],
   _excluded3 = ["theme"];
 function isEmpty(obj) {
@@ -6690,7 +6690,7 @@ function createStyled(input = {}) {
         skipSx: inputSkipSx,
         overridesResolver
       } = inputOptions,
-      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$9);
+      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$a);
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
@@ -6812,7 +6812,7 @@ function getThemeProps(params) {
   return resolveProps(theme.components[name].defaultProps, props);
 }
 
-function useThemeProps({
+function useThemeProps$1({
   props,
   name,
   defaultTheme
@@ -7555,7 +7555,7 @@ function useCurrentColorScheme(options) {
   });
 }
 
-const _excluded$8 = ["colorSchemes", "components", "cssVarPrefix"];
+const _excluded$9 = ["colorSchemes", "components", "cssVarPrefix"];
 const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
 function createCssVarsProvider(options) {
   const {
@@ -7607,7 +7607,7 @@ function createCssVarsProvider(options) {
         components = {},
         cssVarPrefix
       } = themeProp,
-      restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded$8);
+      restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded$9);
     const allColorSchemes = Object.keys(colorSchemes);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
     const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -7905,7 +7905,7 @@ function createGetCssVar$1(prefix = '') {
   return getCssVar;
 }
 
-const _excluded$7 = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
+const _excluded$8 = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
 const defaultTheme$5 = createTheme$1();
 const defaultCreateStyledComponent$2 = styled$1('div', {
   name: 'MuiContainer',
@@ -7917,12 +7917,12 @@ const defaultCreateStyledComponent$2 = styled$1('div', {
     return [styles.root, styles[`maxWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
   }
 });
-const useThemePropsDefault$2 = inProps => useThemeProps({
+const useThemePropsDefault$2 = inProps => useThemeProps$1({
   props: inProps,
   name: 'MuiContainer',
   defaultTheme: defaultTheme$5
 });
-const useUtilityClasses = (ownerState, componentName) => {
+const useUtilityClasses$1 = (ownerState, componentName) => {
   const getContainerUtilityClass = slot => {
     return generateUtilityClass(componentName, slot);
   };
@@ -8001,7 +8001,7 @@ function createContainer(options = {}) {
         fixed = false,
         maxWidth = 'lg'
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$7);
+      other = _objectWithoutPropertiesLoose(props, _excluded$8);
     const ownerState = _extends$1({}, props, {
       component,
       disableGutters,
@@ -8010,7 +8010,7 @@ function createContainer(options = {}) {
     });
 
     // @ts-ignore module augmentation fails if custom breakpoints are used
-    const classes = useUtilityClasses(ownerState, componentName);
+    const classes = useUtilityClasses$1(ownerState, componentName);
     return (
       /*#__PURE__*/
       // @ts-ignore theme is injected by the styled util
@@ -8324,7 +8324,7 @@ const generateDirectionClasses = direction => {
   return [`direction-xs-${String(direction)}`];
 };
 
-const _excluded$6 = ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow"];
+const _excluded$7 = ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow"];
 const defaultTheme$4 = createTheme$1();
 
 // widening Theme to any so that the consumer can own the theme structure.
@@ -8334,7 +8334,7 @@ const defaultCreateStyledComponent$1 = styled$1('div', {
   overridesResolver: (props, styles) => styles.root
 });
 function useThemePropsDefault$1(props) {
-  return useThemeProps({
+  return useThemeProps$1({
     props,
     name: 'MuiGrid',
     defaultTheme: defaultTheme$4
@@ -8382,7 +8382,7 @@ function createGrid(options = {}) {
         columnSpacing: columnSpacingProp = spacingProp,
         disableEqualOverflow: themeDisableEqualOverflow
       } = props,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$6);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$7);
     // Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
     let disableEqualOverflow = themeDisableEqualOverflow;
     if (nested && themeDisableEqualOverflow !== undefined) {
@@ -8635,7 +8635,7 @@ generateUtilityClasses('MuiGrid', ['root', 'container', 'item',
 // grid sizes for all breakpoints
 ...GRID_SIZES.map(size => `grid-xs-${size}`), ...GRID_SIZES.map(size => `grid-sm-${size}`), ...GRID_SIZES.map(size => `grid-md-${size}`), ...GRID_SIZES.map(size => `grid-lg-${size}`), ...GRID_SIZES.map(size => `grid-xl-${size}`)]);
 
-const _excluded$5 = ["component", "direction", "spacing", "divider", "children", "className"];
+const _excluded$6 = ["component", "direction", "spacing", "divider", "children", "className"];
 const defaultTheme$3 = createTheme$1();
 // widening Theme to any so that the consumer can own the theme structure.
 const defaultCreateStyledComponent = styled$1('div', {
@@ -8644,7 +8644,7 @@ const defaultCreateStyledComponent = styled$1('div', {
   overridesResolver: (props, styles) => styles.root
 });
 function useThemePropsDefault(props) {
-  return useThemeProps({
+  return useThemeProps$1({
     props,
     name: 'MuiStack',
     defaultTheme: defaultTheme$3
@@ -8758,7 +8758,7 @@ function createStack(options = {}) {
         children,
         className
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$5);
+      other = _objectWithoutPropertiesLoose(props, _excluded$6);
     const ownerState = {
       direction,
       spacing
@@ -8967,7 +8967,7 @@ const green = {
   A700: '#00c853'
 };
 
-const _excluded$4 = ["mode", "contrastThreshold", "tonalOffset"];
+const _excluded$5 = ["mode", "contrastThreshold", "tonalOffset"];
 const light = {
   // The colors used to style the text.
   text: {
@@ -9136,7 +9136,7 @@ function createPalette(palette) {
       contrastThreshold = 3,
       tonalOffset = 0.2
     } = palette,
-    other = _objectWithoutPropertiesLoose(palette, _excluded$4);
+    other = _objectWithoutPropertiesLoose(palette, _excluded$5);
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -9260,7 +9260,7 @@ const theme2 = createTheme({ palette: {
   return paletteOutput;
 }
 
-const _excluded$3 = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+const _excluded$4 = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -9291,7 +9291,7 @@ function createTypography(palette, typography) {
       allVariants,
       pxToRem: pxToRem2
     } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   if (process.env.NODE_ENV !== 'production') {
     if (typeof fontSize !== 'number') {
       console.error('MUI: `fontSize` is required to be a number.');
@@ -9350,7 +9350,7 @@ function createShadow(...px) {
 // Values from https://github.com/material-components/material-components-web/blob/be8747f94574669cb5e7add1a7c54fa41a89cec7/packages/mdc-elevation/_variables.scss
 const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
 
-const _excluded$2 = ["duration", "easing", "delay"];
+const _excluded$3 = ["duration", "easing", "delay"];
 // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
 // to learn the context in which each easing should be used.
 const easing = {
@@ -9401,7 +9401,7 @@ function createTransitions(inputTransitions) {
         easing: easingOption = mergedEasing.easeInOut,
         delay = 0
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$2);
+      other = _objectWithoutPropertiesLoose(options, _excluded$3);
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
       // IE11 support, replace with Number.isNaN
@@ -9447,7 +9447,7 @@ const zIndex = {
   tooltip: 1500
 };
 
-const _excluded$1 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+const _excluded$2 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 function createTheme(options = {}, ...args) {
   const {
       mixins: mixinsInput = {},
@@ -9455,7 +9455,7 @@ function createTheme(options = {}, ...args) {
       transitions: transitionsInput = {},
       typography: typographyInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$1);
+    other = _objectWithoutPropertiesLoose(options, _excluded$2);
   if (options.vars) {
     throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
 Please use another name.` : formatMuiErrorMessage(18));
@@ -9507,6 +9507,17 @@ Please use another name.` : formatMuiErrorMessage(18));
 
 const defaultTheme$2 = createTheme();
 
+function useThemeProps({
+  props,
+  name
+}) {
+  return useThemeProps$1({
+    props,
+    name,
+    defaultTheme: defaultTheme$2
+  });
+}
+
 const rootShouldForwardProp = prop => shouldForwardProp(prop) && prop !== 'classes';
 const styled = createStyled({
   defaultTheme: defaultTheme$2,
@@ -9524,7 +9535,7 @@ const getOverlayAlpha = elevation => {
   return (alphaValue / 100).toFixed(2);
 };
 
-const _excluded = ["colorSchemes", "cssVarPrefix"],
+const _excluded$1 = ["colorSchemes", "cssVarPrefix"],
   _excluded2 = ["palette"];
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
   if (index === 0) {
@@ -9560,7 +9571,7 @@ function extendTheme(options = {}, ...args) {
       colorSchemes: colorSchemesInput = {},
       cssVarPrefix = 'mui'
     } = options,
-    input = _objectWithoutPropertiesLoose(options, _excluded);
+    input = _objectWithoutPropertiesLoose(options, _excluded$1);
   const getCssVar = createGetCssVar(cssVarPrefix);
   const _createThemeWithoutVa = createTheme(_extends$1({}, input, colorSchemesInput.light && {
       palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
@@ -9835,6 +9846,410 @@ process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {
   sx: propTypes.exports.oneOfType([propTypes.exports.arrayOf(propTypes.exports.oneOfType([propTypes.exports.func, propTypes.exports.object, propTypes.exports.bool])), propTypes.exports.func, propTypes.exports.object])
 } : void 0;
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function getTypographyUtilityClass(slot) {
+  return generateUtilityClass('MuiTypography', slot);
+}
+generateUtilityClasses('MuiTypography', ['root', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'inherit', 'button', 'caption', 'overline', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'noWrap', 'gutterBottom', 'paragraph']);
+
+const _excluded = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
+const useUtilityClasses = ownerState => {
+  const {
+    align,
+    gutterBottom,
+    noWrap,
+    paragraph,
+    variant,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root', variant, ownerState.align !== 'inherit' && `align${capitalize(align)}`, gutterBottom && 'gutterBottom', noWrap && 'noWrap', paragraph && 'paragraph']
+  };
+  return composeClasses(slots, getTypographyUtilityClass, classes);
+};
+const TypographyRoot = styled('span', {
+  name: 'MuiTypography',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, ownerState.variant && styles[ownerState.variant], ownerState.align !== 'inherit' && styles[`align${capitalize(ownerState.align)}`], ownerState.noWrap && styles.noWrap, ownerState.gutterBottom && styles.gutterBottom, ownerState.paragraph && styles.paragraph];
+  }
+})(({
+  theme,
+  ownerState
+}) => _extends$1({
+  margin: 0
+}, ownerState.variant && theme.typography[ownerState.variant], ownerState.align !== 'inherit' && {
+  textAlign: ownerState.align
+}, ownerState.noWrap && {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+}, ownerState.gutterBottom && {
+  marginBottom: '0.35em'
+}, ownerState.paragraph && {
+  marginBottom: 16
+}));
+const defaultVariantMapping = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  h6: 'h6',
+  subtitle1: 'h6',
+  subtitle2: 'h6',
+  body1: 'p',
+  body2: 'p',
+  inherit: 'p'
+};
+
+// TODO v6: deprecate these color values in v5.x and remove the transformation in v6
+const colorTransformations = {
+  primary: 'primary.main',
+  textPrimary: 'text.primary',
+  secondary: 'secondary.main',
+  textSecondary: 'text.secondary',
+  error: 'error.main'
+};
+const transformDeprecatedColors = color => {
+  return colorTransformations[color] || color;
+};
+const Typography = /*#__PURE__*/React__namespace.forwardRef(function Typography(inProps, ref) {
+  const themeProps = useThemeProps({
+    props: inProps,
+    name: 'MuiTypography'
+  });
+  const color = transformDeprecatedColors(themeProps.color);
+  const props = extendSxProp(_extends$1({}, themeProps, {
+    color
+  }));
+  const {
+      align = 'inherit',
+      className,
+      component,
+      gutterBottom = false,
+      noWrap = false,
+      paragraph = false,
+      variant = 'body1',
+      variantMapping = defaultVariantMapping
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const ownerState = _extends$1({}, props, {
+    align,
+    color,
+    className,
+    component,
+    gutterBottom,
+    noWrap,
+    paragraph,
+    variant,
+    variantMapping
+  });
+  const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/jsxRuntime.exports.jsx(TypographyRoot, _extends$1({
+    as: Component,
+    ref: ref,
+    ownerState: ownerState,
+    className: clsx(classes.root, className)
+  }, other));
+});
+process.env.NODE_ENV !== "production" ? Typography.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * Set the text-align on the component.
+   * @default 'inherit'
+   */
+  align: propTypes.exports.oneOf(['center', 'inherit', 'justify', 'left', 'right']),
+  /**
+   * The content of the component.
+   */
+  children: propTypes.exports.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: propTypes.exports.object,
+  /**
+   * @ignore
+   */
+  className: propTypes.exports.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: propTypes.exports.elementType,
+  /**
+   * If `true`, the text will have a bottom margin.
+   * @default false
+   */
+  gutterBottom: propTypes.exports.bool,
+  /**
+   * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.
+   *
+   * Note that text overflow can only happen with block or inline-block level elements
+   * (the element needs to have a width in order to overflow).
+   * @default false
+   */
+  noWrap: propTypes.exports.bool,
+  /**
+   * If `true`, the element will be a paragraph element.
+   * @default false
+   */
+  paragraph: propTypes.exports.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: propTypes.exports.oneOfType([propTypes.exports.arrayOf(propTypes.exports.oneOfType([propTypes.exports.func, propTypes.exports.object, propTypes.exports.bool])), propTypes.exports.func, propTypes.exports.object]),
+  /**
+   * Applies the theme typography styles.
+   * @default 'body1'
+   */
+  variant: propTypes.exports /* @typescript-to-proptypes-ignore */.oneOfType([propTypes.exports.oneOf(['body1', 'body2', 'button', 'caption', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'inherit', 'overline', 'subtitle1', 'subtitle2']), propTypes.exports.string]),
+  /**
+   * The component maps the variant prop to a range of different HTML element types.
+   * For instance, subtitle1 to `<h6>`.
+   * If you wish to change that mapping, you can provide your own.
+   * Alternatively, you can use the `component` prop.
+   * @default {
+   *   h1: 'h1',
+   *   h2: 'h2',
+   *   h3: 'h3',
+   *   h4: 'h4',
+   *   h5: 'h5',
+   *   h6: 'h6',
+   *   subtitle1: 'h6',
+   *   subtitle2: 'h6',
+   *   body1: 'p',
+   *   body2: 'p',
+   *   inherit: 'p',
+   * }
+   */
+  variantMapping: propTypes.exports /* @typescript-to-proptypes-ignore */.object
+} : void 0;
+
+const theme = createTheme({
+    mainPallete: {
+        primary: {
+            blue: '#293072',
+            grey: '#5D5D5C',
+            red: '#E42127',
+            white: '#FFFFFF',
+            placeholderText: '#B0BAD8',
+            tooltipBg: '#53598E',
+        },
+        secondary: {
+            inputsValidation: '#FFF5F5',
+            buttonBlack: '#000000',
+            buttonBlue: '#3A44A7',
+            buttonGreen: '#61CC61',
+        },
+        table: {
+            header: '#E7EAF3',
+            border: '#DBE0F2',
+            tableCellDarker: '#F6F8FB',
+            bodyTextColor: '#2A3D96',
+            selected: 'rgba(176,186,216,0.5)',
+        }
+    },
+    fontWeight: {
+        thin: 100,
+        extraLight: 200,
+        light: 300,
+        regular: 400,
+        medium: 500,
+        semiBold: 600,
+        bold: 700,
+        extraBold: 800,
+        black: 900,
+    },
+    fontFamily: [
+        '"Barlow", sans-serif',
+    ].join(','),
+});
+
+var StyledTypography = styled(Typography)(function (_a) {
+    return ({
+        fontSize: '26px',
+        lineHeight: '34px',
+        letterSpacing: 0.1,
+        color: theme.mainPallete.primary.blue,
+        textAlign: 'left',
+        marginBottom: '5px',
+        fontFamily: theme.fontFamily,
+        fontWeight: theme.fontWeight.medium,
+        '&.main-header': {
+            fontSize: '26px',
+            lineHeight: '34px',
+            letterSpacing: 0.1,
+            color: theme.mainPallete.primary.blue,
+            textAlign: 'left',
+            marginBottom: '5px',
+            fontWeight: theme.fontWeight.medium,
+            '@media(min-width: 720px)': {
+                fontSize: '44px',
+                lineHeight: '58px',
+                marginBottom: '10px',
+            },
+            '@media(min-width: 1024px)': {
+                fontSize: '21px',
+                lineHeight: '28px',
+                fontWeight: theme.fontWeight.semiBold,
+                margin: '16px 0 10px',
+            }
+        },
+        '&.description': {
+            fontSize: '18px',
+            lineHeight: '24px',
+            letterSpacing: 0.1,
+            color: theme.mainPallete.primary.blue,
+            textAlign: 'left',
+            marginTop: '5px',
+            fontWeight: theme.fontWeight.medium,
+        },
+        '&.modal-header': {
+            fontSize: '26px',
+            lineHeight: '34px',
+            letterSpacing: 0.1,
+            color: theme.mainPallete.primary.blue,
+            textAlign: 'center',
+            margin: '22px 0 14px',
+            fontWeight: theme.fontWeight.medium,
+            '@media(min-width: 720px)': {
+                fontSize: '44px',
+                lineHeight: '58px',
+                margin: '34px 0 28px',
+            },
+            '@media(min-width: 1024px)': {
+                fontSize: '21px',
+                lineHeight: '28px',
+                fontWeight: theme.fontWeight.semiBold,
+                margin: '16px 0 10px',
+            }
+        },
+        '&.modal-description': {
+            fontSize: '18px',
+            lineHeight: '24px',
+            color: theme.mainPallete.primary.blue,
+            textAlign: 'center',
+            marginBottom: '45px',
+            fontWeight: theme.fontWeight.medium,
+            '@media(min-width: 720px)': {
+                fontSize: '32px',
+                lineHeight: '43px',
+                marginBottom: '60px',
+            },
+            '@media(min-width: 1024px)': {
+                fontSize: '16px',
+                lineHeight: '21px',
+                fontWeight: theme.fontWeight.regular,
+                marginBottom: '30px',
+            }
+        },
+        '&.app-tile-header': {
+            fontSize: '26px',
+            lineHeight: '34px',
+            letterSpacing: 0.1,
+            color: theme.mainPallete.primary.blue,
+            textAlign: 'left',
+            marginBottom: '5px',
+            fontWeight: theme.fontWeight.medium,
+            '@media(min-width: 720px)': {
+                fontSize: '44px',
+                lineHeight: '58px',
+                marginBottom: '10px',
+            },
+            '@media(min-width: 1024px)': {
+                fontSize: '21px',
+                lineHeight: '28px',
+                fontWeight: theme.fontWeight.semiBold,
+                margin: '16px 0 10px',
+            }
+        },
+        '&.app-tile-description': {
+            fontSize: '16px',
+            lineHeight: '21px',
+            color: theme.mainPallete.primary.blue,
+            textAlign: 'left',
+            fontWeight: theme.fontWeight.medium,
+            '@media(min-width: 720px)': {
+                fontSize: '23px',
+                lineHeight: '31px',
+            },
+            '@media(min-width: 1024px)': {
+                fontSize: '16px',
+                lineHeight: '21px',
+                fontWeight: theme.fontWeight.regular,
+            }
+        },
+        '&.module-tile-header': {
+            fontSize: '18px',
+            lineHeight: '24px',
+            letterSpacing: 0.1,
+            color: theme.mainPallete.primary.blue,
+            textAlign: 'center',
+            marginTop: '5px',
+            fontFamily: [
+                '"Barlow", sans-serif',
+            ],
+            fontWeight: theme.fontWeight.medium,
+            '@media(min-width: 720px)': {
+                fontSize: '32px',
+                lineHeight: '43px',
+                marginTop: '10px',
+            }
+        },
+    });
+});
+// @ts-ignore
+var TypographyComponent = function (_a) {
+    var text = _a.text, type = _a.type, forwardedRef = _a.forwardedRef, props = __rest(_a, ["text", "type", "forwardedRef"]);
+    var typeClassName = type || 'description';
+    return (jsxRuntime.exports.jsx(StyledTypography, __assign({ ref: forwardedRef }, props, { className: typeClassName }, { children: text })));
+};
+
 // import Illustration from "../../components_old/foundations/illustration/Illustration";
 // import TypographyComponent from "../typography/Typography";
 var StyledAppTileWrapper = styled(Box)(function (_a) {
@@ -9879,16 +10294,10 @@ var StyledHeaderDescriptionWrapper = styled(Box)(function (_a) {
 });
 // @ts-ignore
 var AppTileComponent = function (_a) {
-    var header = _a.header;
-    return (jsxRuntime.exports.jsx(StyledAppTileWrapper, { children: jsxRuntime.exports.jsx(StyledHeaderDescriptionWrapper, { children: jsxRuntime.exports.jsx("p", { children: header }) }) }));
-};
-
-// @ts-ignore
-var ATempComponent = function (_a) {
-    var text = _a.text;
-    return (jsxRuntime.exports.jsx("button", { children: text }));
+    var header = _a.header, forwardedRef = _a.forwardedRef;
+    return (jsxRuntime.exports.jsx(StyledAppTileWrapper, { children: jsxRuntime.exports.jsx(StyledHeaderDescriptionWrapper, { children: jsxRuntime.exports.jsx(TypographyComponent, { text: header, type: 'app-tile-header', forwardedRef: forwardedRef }) }) }));
 };
 
 exports.AppTile = AppTileComponent;
-exports.TempButton = ATempComponent;
+exports.Typography = TypographyComponent;
 //# sourceMappingURL=index.js.map