@learningpool/ui 1.15.5 → 1.16.0

package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemStyles.js

@@ -1,40 +1,178 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 /* eslint-disable indent */
 import { ListItem as SSListItem, ListItemButton as SSListItemButton, ListItemText as SSListItemText, ListItemIcon as SSListItemIcon } from '../../../../index';
 import { styled } from '@mui/material/styles';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import { getNavigationBackground, getNavigationContrastText, getOffsetNavigationBackground } from '../../helpers';
-export var DRAWER_WIDTH = {
+export const DRAWER_WIDTH = {
     Collapsed: 60,
     Expanded: 300
 };
-var ICON = {
+const ICON = {
     Height: 40,
     Width: 57
 };
-export var ListItem = styled(SSListItem, {
-    shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  color: ", ";\n  flex-direction: column;\n  min-height: ", "px;\n  padding: 0 !important;\n  transition: width ", "ms ", " ", ";\n  width: ", "px;\n\n  .MuiListItemIcon-root: {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root .MuiTypography-root: {\n    white-space: normal;\n  }\n"], ["\n  align-items: flex-start;\n  color: ", ";\n  flex-direction: column;\n  min-height: ", "px;\n  padding: 0 !important;\n  transition: width ", "ms ", " ", ";\n  width: ", "px;\n\n  .MuiListItemIcon-root: {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root .MuiTypography-root: {\n    white-space: normal;\n  }\n"])), function (props) { return getNavigationContrastText(props.theme); }, ICON.Height + 8, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.isDrawerOpen ? '0ms' : '250ms'; }, DRAWER_WIDTH.Expanded, function (props) { return props.theme.spacing(0.5); });
-export var ListItemButton = styled(SSListItemButton, {
-    shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: flex-start !important;\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  min-height: ", "px;\n  max-height: ", ";\n  text-decoration: none;\n  text-transform: none;\n  transition: all ", "ms ", " 0ms !important;\n  padding: 0;\n  padding-inline-end: ", ";\n  width: 100%;\n\n  /* Indicator */\n  :before {\n    background-color: ", ";\n    border-radius: 50px;\n    content: '';\n    height: calc(100% - 10px);\n    opacity: 0;\n    position: absolute;\n    top: 5px;\n    left: ", ";\n    right: ", ";\n    transition: all ", "ms ", ";\n    width: 4px;\n    transform: scale(.95);\n  }\n\n  :hover,\n  :focus-visible {\n    background-color: ", ";\n  }\n\n  :hover:before,\n  :focus-visible:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :active {\n    background-color: transparent;\n  }\n"], ["\n  align-items: flex-start !important;\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  min-height: ", "px;\n  max-height: ", ";\n  text-decoration: none;\n  text-transform: none;\n  transition: all ", "ms ", " 0ms !important;\n  padding: 0;\n  padding-inline-end: ", ";\n  width: 100%;\n\n  /* Indicator */\n  :before {\n    background-color: ", ";\n    border-radius: 50px;\n    content: '';\n    height: calc(100% - 10px);\n    opacity: 0;\n    position: absolute;\n    top: 5px;\n    left: ", ";\n    right: ", ";\n    transition: all ", "ms ", ";\n    width: 4px;\n    transform: scale(.95);\n  }\n\n  :hover,\n  :focus-visible {\n    background-color: ", ";\n  }\n\n  :hover:before,\n  :focus-visible:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :active {\n    background-color: transparent;\n  }\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return getNavigationContrastText(props.theme); }, ICON.Height + 8, function (props) { return props.isDrawerOpen ? 'auto' : "".concat(ICON.Height + 8, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.spacing(2); }, function (props) { return getNavigationContrastText(props.theme); }, function (props) { return props.theme.direction === 'ltr' ? '3px' : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? '3px' : 'auto'; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.isDrawerOpen ? getOffsetNavigationBackground(props.theme) : 'transparent'; });
-export var ListItemButtonChild = styled(SSListItemButton, {
-    shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'index'; }
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  min-height: none;\n  max-height: none;\n  text-decoration: none;\n  text-transform: none;\n  transition: max-height ", "ms ", " 0ms !important;\n  padding: 0;\n  width: 100%;\n\n  :hover,\n  :focus-visible {\n    background-color: ", ";\n  }\n\n  .MuiTypography-root: {\n    font-size: .9rem;\n    opacity: ", ";\n    transition: opacity ", "ms ", " ", "s !important;\n  }\n\n  .MuiListItemText-root: {\n    padding: .25rem .5rem;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  min-height: none;\n  max-height: none;\n  text-decoration: none;\n  text-transform: none;\n  transition: max-height ", "ms ", " 0ms !important;\n  padding: 0;\n  width: 100%;\n\n  :hover,\n  :focus-visible {\n    background-color: ", ";\n  }\n\n  .MuiTypography-root: {\n    font-size: .9rem;\n    opacity: ", ";\n    transition: opacity ", "ms ", " ", "s !important;\n  }\n\n  .MuiListItemText-root: {\n    padding: .25rem .5rem;\n  }\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return getNavigationContrastText(props.theme); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { return props.isDrawerOpen ? 1 : 0; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.index !== undefined ? props.index / 50 : 0.02; });
-export var ListItemAvatar = styled(ListItemButton, {
-    shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  min-height: 52px;\n  max-height: ", ";\n  transition: max-height ", "ms ", " 0ms !important;\n\n  .MuiListItemIcon-root {\n    justify-content: center;\n    margin: 0;\n    min-width: 0;\n  }\n\n  .MuiAvatar-root {\n    height: 32px;\n    width: 32px;\n  }\n"], ["\n  align-items: center;\n  min-height: 52px;\n  max-height: ", ";\n  transition: max-height ", "ms ", " 0ms !important;\n\n  .MuiListItemIcon-root {\n    justify-content: center;\n    margin: 0;\n    min-width: 0;\n  }\n\n  .MuiAvatar-root {\n    height: 32px;\n    width: 32px;\n  }\n"])), function (props) { return props.isDrawerOpen ? '200px' : "".concat(ICON.Height + 8, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
-export var ListItemIcon = styled(SSListItemIcon)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  height: ", "px;\n  justify-content: center;\n  margin-top: 0 !important;\n  min-width: ", ";\n  width: ", ";\n\n  [theme.breakpoints.up('sm')] {\n    min-width: ", "px;\n    width: ", "px;\n  }\n"], ["\n  align-items: center;\n  color: ", ";\n  height: ", "px;\n  justify-content: center;\n  margin-top: 0 !important;\n  min-width: ", ";\n  width: ", ";\n\n  [theme.breakpoints.up('sm')] {\n    min-width: ", "px;\n    width: ", "px;\n  }\n"])), function (props) { return getNavigationContrastText(props.theme); }, ICON.Height + 8, ICON.Width, ICON.Width, ICON.Width + 8, ICON.Width + 8);
-export var ListItemText = styled(SSListItemText, {
-    shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'index'; }
-})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n  min-width: 210px;\n  max-width: 210px;\n  opacity: ", ";\n  padding: 0.5rem;\n  text-align: ", ";\n  transition: opacity ", "ms ", " ", "s !important;\n  white-space: normal;\n  width: auto;\n"], ["\n  color: ", ";\n  min-width: 210px;\n  max-width: 210px;\n  opacity: ", ";\n  padding: 0.5rem;\n  text-align: ", ";\n  transition: opacity ", "ms ", " ", "s !important;\n  white-space: normal;\n  width: auto;\n"])), function (props) { return getNavigationContrastText(props.theme); }, function (props) { return props.isDrawerOpen ? 1 : 0; }, function (props) { return props.theme.direction === 'rtl' ? 'right' : 'left'; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.index !== undefined ? props.index / 50 : 0.02; });
-export var StyledExpandLess = styled(ArrowRightIcon, {
-    shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-self: center;\n  font-size: 1.25rem;\n  left: ", ";\n  margin-right: ", ";\n  opacity: 1;\n  position: relative;\n  transition: opacity ", "ms ", " 200ms !important;\n"], ["\n  align-self: center;\n  font-size: 1.25rem;\n  left: ", ";\n  margin-right: ", ";\n  opacity: 1;\n  position: relative;\n  transition: opacity ", "ms ", " 200ms !important;\n"])), function (props) { return props.isDrawerOpen ? '20px' : '-40px'; }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
-export var StyledExpandMore = styled(ArrowRightIcon, {
-    shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-self: center;\n  font-size: 1.25rem;\n  left: ", ";\n  margin-right: ", ";\n  opacity: 1;\n  position: relative;\n  transition: opacity ", " 200ms !important;\n"], ["\n  align-self: center;\n  font-size: 1.25rem;\n  left: ", ";\n  margin-right: ", ";\n  opacity: 1;\n  position: relative;\n  transition: opacity ", " 200ms !important;\n"])), function (props) { return props.isDrawerOpen ? '20px' : '-40px'; }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.transitions.easing.easeOut; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+export const ListItem = styled(SSListItem, {
+    shouldForwardProp: (prop) => prop !== 'isDrawerOpen'
+}) `
+  align-items: flex-start;
+  color: ${props => getNavigationContrastText(props.theme)};
+  flex-direction: column;
+  min-height: ${ICON.Height + 8}px;
+  padding: 0 !important;
+  transition: width ${props => props.theme.transitions.duration.enteringScreen}ms ${props => props.theme.transitions.easing.easeOut} ${props => props.isDrawerOpen ? '0ms' : '250ms'};
+  width: ${DRAWER_WIDTH.Expanded}px;
+
+  .MuiListItemIcon-root: {
+    margin: ${props => props.theme.spacing(0.5)} 0 0;
+  }
+
+  .MuiListItemText-root .MuiTypography-root: {
+    white-space: normal;
+  }
+`;
+export const ListItemButton = styled(SSListItemButton, {
+    shouldForwardProp: (prop) => prop !== 'isDrawerOpen'
+}) `
+  align-items: flex-start !important;
+  background-color: ${props => getNavigationBackground(props.theme)};
+  color: ${props => getNavigationContrastText(props.theme)};
+  display: flex;
+  flex-wrap: wrap;
+  min-height: ${ICON.Height + 8}px;
+  max-height: ${props => props.isDrawerOpen ? 'auto' : `${ICON.Height + 8}px`};
+  text-decoration: none;
+  text-transform: none;
+  transition: all ${props => props.theme.transitions.duration.enteringScreen}ms ${props => props.theme.transitions.easing.easeOut} 0ms !important;
+  padding: 0;
+  padding-inline-end: ${props => props.theme.spacing(2)};
+  width: 100%;
+
+  /* Indicator */
+  :before {
+    background-color: ${props => getNavigationContrastText(props.theme)};
+    border-radius: 50px;
+    content: '';
+    height: calc(100% - 10px);
+    opacity: 0;
+    position: absolute;
+    top: 5px;
+    left: ${props => props.theme.direction === 'ltr' ? '3px' : 'auto'};
+    right: ${props => props.theme.direction === 'rtl' ? '3px' : 'auto'};
+    transition: all ${props => props.theme.transitions.duration.enteringScreen}ms ${props => props.theme.transitions.easing.easeOut};
+    width: 4px;
+    transform: scale(.95);
+  }
+
+  :hover,
+  :focus-visible {
+    background-color: ${props => props.isDrawerOpen ? getOffsetNavigationBackground(props.theme) : 'transparent'};
+  }
+
+  :hover:before,
+  :focus-visible:before {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  :active {
+    background-color: transparent;
+  }
+`;
+export const ListItemButtonChild = styled(SSListItemButton, {
+    shouldForwardProp: (prop) => prop !== 'isDrawerOpen' && prop !== 'index'
+}) `
+  align-items: center;
+  background-color: ${props => getNavigationBackground(props.theme)};
+  color: ${props => getNavigationContrastText(props.theme)};
+  display: flex;
+  min-height: none;
+  max-height: none;
+  text-decoration: none;
+  text-transform: none;
+  transition: max-height ${props => props.theme.transitions.duration.enteringScreen}ms ${props => props.theme.transitions.easing.easeOut} 0ms !important;
+  padding: 0;
+  width: 100%;
+
+  :hover,
+  :focus-visible {
+    background-color: ${props => getOffsetNavigationBackground(props.theme)};
+  }
+
+  .MuiTypography-root: {
+    font-size: .9rem;
+    opacity: ${props => props.isDrawerOpen ? 1 : 0};
+    transition: opacity ${props => props.theme.transitions.duration.enteringScreen}ms ${props => props.theme.transitions.easing.easeOut} ${props => props.index !== undefined ? props.index / 50 : 0.02}s !important;
+  }
+
+  .MuiListItemText-root: {
+    padding: .25rem .5rem;
+  }
+`;
+export const ListItemAvatar = styled(ListItemButton, {
+    shouldForwardProp: (prop) => prop !== 'isDrawerOpen'
+}) `
+  align-items: center;
+  min-height: 52px;
+  max-height: ${props => props.isDrawerOpen ? '200px' : `${ICON.Height + 8}px`};
+  transition: max-height ${props => props.theme.transitions.duration.enteringScreen}ms ${props => props.theme.transitions.easing.easeOut} 0ms !important;
+
+  .MuiListItemIcon-root {
+    justify-content: center;
+    margin: 0;
+    min-width: 0;
+  }
+
+  .MuiAvatar-root {
+    height: 32px;
+    width: 32px;
+  }
+`;
+export const ListItemIcon = styled(SSListItemIcon) `
+  align-items: center;
+  color: ${props => getNavigationContrastText(props.theme)};
+  height: ${ICON.Height + 8}px;
+  justify-content: center;
+  margin-top: 0 !important;
+  min-width: ${ICON.Width};
+  width: ${ICON.Width};
+
+  [theme.breakpoints.up('sm')] {
+    min-width: ${ICON.Width + 8}px;
+    width: ${ICON.Width + 8}px;
+  }
+`;
+export const ListItemText = styled(SSListItemText, {
+    shouldForwardProp: (prop) => prop !== 'isDrawerOpen' && prop !== 'index'
+}) `
+  color: ${props => getNavigationContrastText(props.theme)};
+  min-width: 210px;
+  max-width: 210px;
+  opacity: ${props => props.isDrawerOpen ? 1 : 0};
+  padding: 0.5rem;
+  text-align: ${props => props.theme.direction === 'rtl' ? 'right' : 'left'};
+  transition: opacity ${props => props.theme.transitions.duration.enteringScreen}ms ${props => props.theme.transitions.easing.easeOut} ${props => props.index !== undefined ? props.index / 50 : 0.02}s !important;
+  white-space: normal;
+  width: auto;
+`;
+export const StyledExpandLess = styled(ArrowRightIcon, {
+    shouldForwardProp: (prop) => prop !== 'isDrawerOpen'
+}) `
+  align-self: center;
+  font-size: 1.25rem;
+  left: ${props => props.isDrawerOpen ? '20px' : '-40px'};
+  margin-right: ${props => props.theme.spacing(1)};
+  opacity: 1;
+  position: relative;
+  transition: opacity ${props => props.theme.transitions.duration.enteringScreen}ms ${props => props.theme.transitions.easing.easeOut} 200ms !important;
+`;
+export const StyledExpandMore = styled(ArrowRightIcon, {
+    shouldForwardProp: (prop) => prop !== 'isDrawerOpen'
+}) `
+  align-self: center;
+  font-size: 1.25rem;
+  left: ${props => props.isDrawerOpen ? '20px' : '-40px'};
+  margin-right: ${props => props.theme.spacing(1)};
+  opacity: 1;
+  position: relative;
+  transition: opacity ${props => props.theme.transitions.easing.easeOut} 200ms !important;
+`;

package/components/navigation/VerticalNavigation/VerticalNavigationMotion.js

@@ -1,4 +1,4 @@
-export var motionParent = {
+export const motionParent = {
     open: {
         transition: { staggerChildren: 0.07, delayChildren: 0 }
     },
@@ -6,7 +6,7 @@ export var motionParent = {
         transition: { staggerChildren: 0.05, staggerDirection: -1 }
     }
 };
-export var motionFadeIn = {
+export const motionFadeIn = {
     open: {
         opacity: 1
     },
@@ -14,7 +14,7 @@ export var motionFadeIn = {
         opacity: 0
     }
 };
-export var motionFadeInUp = {
+export const motionFadeInUp = {
     open: {
         y: 0,
         opacity: 1,
@@ -30,14 +30,14 @@ export var motionFadeInUp = {
         }
     }
 };
-export var motionWhileHover = {
+export const motionWhileHover = {
     scale: 1.02
 };
-export var motionWhileTap = {
+export const motionWhileTap = {
     scale: 0.95
 };
 // Old ones...
-export var variantsLogo = {
+export const variantsLogo = {
     open: {
         opacity: 1
     },
@@ -45,7 +45,7 @@ export var variantsLogo = {
         opacity: 0
     }
 };
-export var variantsUl = {
+export const variantsUl = {
     open: {
         transition: { staggerChildren: 0.07, delayChildren: 0.2 }
     },
@@ -53,7 +53,7 @@ export var variantsUl = {
         transition: { staggerChildren: 0.05, staggerDirection: -1 }
     }
 };
-export var variantsLi = {
+export const variantsLi = {
     open: {
         y: 0,
         opacity: 1,
@@ -69,7 +69,7 @@ export var variantsLi = {
         }
     }
 };
-export var variantsSecondaryUl = {
+export const variantsSecondaryUl = {
     open: {
         transition: { staggerChildren: 0.05, delayChildren: 0.5 }
     },
@@ -77,7 +77,7 @@ export var variantsSecondaryUl = {
         transition: { staggerChildren: 0.05, staggerDirection: -1 }
     }
 };
-export var variantsSecondaryLi = {
+export const variantsSecondaryLi = {
     open: {
         y: 0,
         opacity: 1,
@@ -93,7 +93,7 @@ export var variantsSecondaryLi = {
         }
     }
 };
-export var variantsDivider = {
+export const variantsDivider = {
     open: {
         scaleX: 1,
         opacity: 1,

package/components/navigation/VerticalNavigation/VerticalNavigationStyles.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 /// <reference types="react" />
-/// <reference types="trusted-types" />
 export declare const DRAWER_WIDTH: {
     Collapsed: number;
     Expanded: number;
@@ -24,6 +23,8 @@ export declare const DrawerHeader: import("@emotion/styled").StyledComponent<imp
         animationIterationCount?: import("csstype").Property.AnimationIterationCount | undefined;
         animationName?: import("csstype").Property.AnimationName | undefined;
         animationPlayState?: import("csstype").Property.AnimationPlayState | undefined;
+        animationRangeEnd?: import("csstype").Property.AnimationRangeEnd<string | number> | undefined;
+        animationRangeStart?: import("csstype").Property.AnimationRangeStart<string | number> | undefined;
         animationTimeline?: import("csstype").Property.AnimationTimeline | undefined;
         animationTimingFunction?: import("csstype").Property.AnimationTimingFunction | undefined;
         appearance?: import("csstype").Property.Appearance | undefined;
@@ -145,6 +146,10 @@ export declare const DrawerHeader: import("@emotion/styled").StyledComponent<imp
         fontStretch?: import("csstype").Property.FontStretch | undefined;
         fontStyle?: import("csstype").Property.FontStyle | undefined;
         fontSynthesis?: import("csstype").Property.FontSynthesis | undefined;
+        fontSynthesisPosition?: import("csstype").Property.FontSynthesisPosition | undefined;
+        fontSynthesisSmallCaps?: import("csstype").Property.FontSynthesisSmallCaps | undefined;
+        fontSynthesisStyle?: import("csstype").Property.FontSynthesisStyle | undefined;
+        fontSynthesisWeight?: import("csstype").Property.FontSynthesisWeight | undefined;
         fontVariant?: import("csstype").Property.FontVariant | undefined;
         fontVariantAlternates?: import("csstype").Property.FontVariantAlternates | undefined;
         fontVariantCaps?: import("csstype").Property.FontVariantCaps | undefined;
@@ -218,6 +223,7 @@ export declare const DrawerHeader: import("@emotion/styled").StyledComponent<imp
         maskRepeat?: import("csstype").Property.MaskRepeat | undefined;
         maskSize?: import("csstype").Property.MaskSize<string | number> | undefined;
         maskType?: import("csstype").Property.MaskType | undefined;
+        masonryAutoFlow?: import("csstype").Property.MasonryAutoFlow | undefined;
         mathDepth?: import("csstype").Property.MathDepth | undefined;
         mathShift?: import("csstype").Property.MathShift | undefined;
         mathStyle?: import("csstype").Property.MathStyle | undefined;
@@ -257,6 +263,7 @@ export declare const DrawerHeader: import("@emotion/styled").StyledComponent<imp
         overflowWrap?: import("csstype").Property.OverflowWrap | undefined;
         overflowX?: import("csstype").Property.OverflowX | undefined;
         overflowY?: import("csstype").Property.OverflowY | undefined;
+        overlay?: import("csstype").Property.Overlay | undefined;
         overscrollBehaviorBlock?: import("csstype").Property.OverscrollBehaviorBlock | undefined;
         overscrollBehaviorInline?: import("csstype").Property.OverscrollBehaviorInline | undefined;
         overscrollBehaviorX?: import("csstype").Property.OverscrollBehaviorX | undefined;
@@ -344,12 +351,15 @@ export declare const DrawerHeader: import("@emotion/styled").StyledComponent<imp
         textTransform?: import("csstype").Property.TextTransform | undefined;
         textUnderlineOffset?: import("csstype").Property.TextUnderlineOffset<string | number> | undefined;
         textUnderlinePosition?: import("csstype").Property.TextUnderlinePosition | undefined;
+        textWrap?: import("csstype").Property.TextWrap | undefined;
+        timelineScope?: import("csstype").Property.TimelineScope | undefined;
         top?: import("csstype").Property.Top<string | number> | undefined;
         touchAction?: import("csstype").Property.TouchAction | undefined;
         transform?: string | undefined;
         transformBox?: import("csstype").Property.TransformBox | undefined;
         transformOrigin?: import("csstype").Property.TransformOrigin<string | number> | undefined;
         transformStyle?: import("csstype").Property.TransformStyle | undefined;
+        transitionBehavior?: import("csstype").Property.TransitionBehavior | undefined;
         transitionDelay?: import("csstype").Property.TransitionDelay<string & {}> | undefined;
         transitionDuration?: import("csstype").Property.TransitionDuration<string & {}> | undefined;
         transitionProperty?: import("csstype").Property.TransitionProperty | undefined;
@@ -358,9 +368,14 @@ export declare const DrawerHeader: import("@emotion/styled").StyledComponent<imp
         unicodeBidi?: import("csstype").Property.UnicodeBidi | undefined;
         userSelect?: import("csstype").Property.UserSelect | undefined;
         verticalAlign?: import("csstype").Property.VerticalAlign<string | number> | undefined;
+        viewTimelineAxis?: import("csstype").Property.ViewTimelineAxis | undefined;
+        viewTimelineInset?: import("csstype").Property.ViewTimelineInset<string | number> | undefined;
+        viewTimelineName?: import("csstype").Property.ViewTimelineName | undefined;
         viewTransitionName?: import("csstype").Property.ViewTransitionName | undefined;
         visibility?: import("csstype").Property.Visibility | undefined;
         whiteSpace?: import("csstype").Property.WhiteSpace | undefined;
+        whiteSpaceCollapse?: import("csstype").Property.WhiteSpaceCollapse | undefined;
+        whiteSpaceTrim?: import("csstype").Property.WhiteSpaceTrim | undefined;
         widows?: import("csstype").Property.Widows | undefined;
         width?: import("csstype").Property.Width<string | number> | undefined;
         willChange?: import("csstype").Property.WillChange | undefined;
@@ -372,6 +387,7 @@ export declare const DrawerHeader: import("@emotion/styled").StyledComponent<imp
         zoom?: import("csstype").Property.Zoom | undefined;
         all?: import("csstype").Globals | undefined;
         animation?: import("csstype").Property.Animation<string & {}> | undefined;
+        animationRange?: import("csstype").Property.AnimationRange<string | number> | undefined;
         background?: import("csstype").Property.Background<string | number> | undefined;
         backgroundPosition?: import("csstype").Property.BackgroundPosition<string | number> | undefined;
         border?: import("csstype").Property.Border<string | number> | undefined;
@@ -436,6 +452,7 @@ export declare const DrawerHeader: import("@emotion/styled").StyledComponent<imp
         textDecoration?: import("csstype").Property.TextDecoration<string | number> | undefined;
         textEmphasis?: import("csstype").Property.TextEmphasis | undefined;
         transition?: import("csstype").Property.Transition<string & {}> | undefined;
+        viewTimeline?: import("csstype").Property.ViewTimeline | undefined;
         MozAnimationDelay?: import("csstype").Property.AnimationDelay<string & {}> | undefined;
         MozAnimationDirection?: import("csstype").Property.AnimationDirection | undefined;
         MozAnimationDuration?: import("csstype").Property.AnimationDuration<string & {}> | undefined;
@@ -445,7 +462,6 @@ export declare const DrawerHeader: import("@emotion/styled").StyledComponent<imp
         MozAnimationPlayState?: import("csstype").Property.AnimationPlayState | undefined;
         MozAnimationTimingFunction?: import("csstype").Property.AnimationTimingFunction | undefined;
         MozAppearance?: import("csstype").Property.MozAppearance | undefined;
-        MozBackfaceVisibility?: import("csstype").Property.BackfaceVisibility | undefined;
         MozBinding?: import("csstype").Property.MozBinding | undefined;
         MozBorderBottomColors?: import("csstype").Property.MozBorderBottomColors | undefined;
         MozBorderEndColor?: import("csstype").Property.BorderInlineEndColor | undefined;
@@ -472,20 +488,16 @@ export declare const DrawerHeader: import("@emotion/styled").StyledComponent<imp
         MozMarginStart?: import("csstype").Property.MarginInlineStart<string | number> | undefined;
         MozOrient?: import("csstype").Property.MozOrient | undefined;
         MozOsxFontSmoothing?: import("csstype").Property.FontSmooth<string | number> | undefined;
+        MozOutlineRadiusBottomleft?: import("csstype").Property.MozOutlineRadiusBottomleft<string | number> | undefined;
+        MozOutlineRadiusBottomright?: import("csstype").Property.MozOutlineRadiusBottomright<string | number> | undefined;
+        MozOutlineRadiusTopleft?: import("csstype").Property.MozOutlineRadiusTopleft<string | number> | undefined;
+        MozOutlineRadiusTopright?: import("csstype").Property.MozOutlineRadiusTopright<string | number> | undefined;
         MozPaddingEnd?: import("csstype").Property.PaddingInlineEnd<string | number> | undefined;
         MozPaddingStart?: import("csstype").Property.PaddingInlineStart<string | number> | undefined;
-        MozPerspective?: import("csstype").Property.Perspective<string | number> | undefined;
-        MozPerspectiveOrigin?: import("csstype").Property.PerspectiveOrigin<string | number> | undefined;
         MozStackSizing?: import("csstype").Property.MozStackSizing | undefined;
         MozTabSize?: import("csstype").Property.TabSize<string | number> | undefined;
         MozTextBlink?: import("csstype").Property.MozTextBlink | undefined;
         MozTextSizeAdjust?: import("csstype").Property.TextSizeAdjust | undefined;
-        MozTransformOrigin?: import("csstype").Property.TransformOrigin<string | number> | undefined;
-        MozTransformStyle?: import("csstype").Property.TransformStyle | undefined;
-        MozTransitionDelay?: import("csstype").Property.TransitionDelay<string & {}> | undefined;
-        MozTransitionDuration?: import("csstype").Property.TransitionDuration<string & {}> | undefined;
-        MozTransitionProperty?: import("csstype").Property.TransitionProperty | undefined;
-        MozTransitionTimingFunction?: import("csstype").Property.TransitionTimingFunction | undefined;
         MozUserFocus?: import("csstype").Property.MozUserFocus | undefined;
         MozUserModify?: import("csstype").Property.MozUserModify | undefined;
         MozUserSelect?: import("csstype").Property.UserSelect | undefined;
@@ -665,7 +677,7 @@ export declare const DrawerHeader: import("@emotion/styled").StyledComponent<imp
         MozBorderImage?: import("csstype").Property.BorderImage | undefined;
         MozColumnRule?: import("csstype").Property.ColumnRule<string | number> | undefined;
         MozColumns?: import("csstype").Property.Columns<string | number> | undefined;
-        MozTransition?: import("csstype").Property.Transition<string & {}> | undefined;
+        MozOutlineRadius?: import("csstype").Property.MozOutlineRadius<string | number> | undefined;
         msContentZoomLimit?: import("csstype").Property.MsContentZoomLimit | undefined;
         msContentZoomSnap?: import("csstype").Property.MsContentZoomSnap | undefined;
         msFlex?: import("csstype").Property.Flex<string | number> | undefined;
@@ -723,6 +735,7 @@ export declare const DrawerHeader: import("@emotion/styled").StyledComponent<imp
         KhtmlLineBreak?: import("csstype").Property.LineBreak | undefined;
         KhtmlOpacity?: import("csstype").Property.Opacity | undefined;
         KhtmlUserSelect?: import("csstype").Property.UserSelect | undefined;
+        MozBackfaceVisibility?: import("csstype").Property.BackfaceVisibility | undefined;
         MozBackgroundClip?: import("csstype").Property.BackgroundClip | undefined;
         MozBackgroundInlinePolicy?: import("csstype").Property.BoxDecorationBreak | undefined;
         MozBackgroundOrigin?: import("csstype").Property.BackgroundOrigin | undefined;
@@ -744,17 +757,22 @@ export declare const DrawerHeader: import("@emotion/styled").StyledComponent<imp
         MozOpacity?: import("csstype").Property.Opacity | undefined;
         MozOutline?: import("csstype").Property.Outline<string | number> | undefined;
         MozOutlineColor?: import("csstype").Property.OutlineColor | undefined;
-        MozOutlineRadius?: import("csstype").Property.MozOutlineRadius<string | number> | undefined;
-        MozOutlineRadiusBottomleft?: import("csstype").Property.MozOutlineRadiusBottomleft<string | number> | undefined;
-        MozOutlineRadiusBottomright?: import("csstype").Property.MozOutlineRadiusBottomright<string | number> | undefined;
-        MozOutlineRadiusTopleft?: import("csstype").Property.MozOutlineRadiusTopleft<string | number> | undefined;
-        MozOutlineRadiusTopright?: import("csstype").Property.MozOutlineRadiusTopright<string | number> | undefined;
         MozOutlineStyle?: import("csstype").Property.OutlineStyle | undefined;
         MozOutlineWidth?: import("csstype").Property.OutlineWidth<string | number> | undefined;
+        MozPerspective?: import("csstype").Property.Perspective<string | number> | undefined;
+        MozPerspectiveOrigin?: import("csstype").Property.PerspectiveOrigin<string | number> | undefined;
         MozTextAlignLast?: import("csstype").Property.TextAlignLast | undefined;
         MozTextDecorationColor?: import("csstype").Property.TextDecorationColor | undefined;
         MozTextDecorationLine?: import("csstype").Property.TextDecorationLine | undefined;
         MozTextDecorationStyle?: import("csstype").Property.TextDecorationStyle | undefined;
+        MozTransform?: import("csstype").Property.Transform | undefined;
+        MozTransformOrigin?: import("csstype").Property.TransformOrigin<string | number> | undefined;
+        MozTransformStyle?: import("csstype").Property.TransformStyle | undefined;
+        MozTransition?: import("csstype").Property.Transition<string & {}> | undefined;
+        MozTransitionDelay?: import("csstype").Property.TransitionDelay<string & {}> | undefined;
+        MozTransitionDuration?: import("csstype").Property.TransitionDuration<string & {}> | undefined;
+        MozTransitionProperty?: import("csstype").Property.TransitionProperty | undefined;
+        MozTransitionTimingFunction?: import("csstype").Property.TransitionTimingFunction | undefined;
         MozUserInput?: import("csstype").Property.MozUserInput | undefined;
         msImeMode?: import("csstype").Property.ImeMode | undefined;
         OAnimation?: import("csstype").Property.Animation<string & {}> | undefined;
@@ -787,8 +805,6 @@ export declare const DrawerHeader: import("@emotion/styled").StyledComponent<imp
         WebkitBoxOrdinalGroup?: import("csstype").Property.BoxOrdinalGroup | undefined;
         WebkitBoxOrient?: import("csstype").Property.BoxOrient | undefined;
         WebkitBoxPack?: import("csstype").Property.BoxPack | undefined;
-        WebkitScrollSnapPointsX?: import("csstype").Property.ScrollSnapPointsX | undefined;
-        WebkitScrollSnapPointsY?: import("csstype").Property.ScrollSnapPointsY | undefined;
         alignmentBaseline?: import("csstype").Property.AlignmentBaseline | undefined;
         baselineShift?: import("csstype").Property.BaselineShift<string | number> | undefined;
         clipRule?: import("csstype").Property.ClipRule | undefined;