@basic-ui/material 0.1.16 → 1.0.0-alpha.10

package/build/esm/NotchedOutline/styledComponents.d.ts

@@ -8,36 +8,59 @@ export declare const InnerContainer: import("@emotion/styled").StyledComponent<{
     theme?: {
         googleFonts: string;
         colors: {
-            background: string;
-            surface: string;
-            error: string;
             primary: string;
             secondary: string;
-            muted: string;
+            tertiary: string;
+            error: string;
+            'primary-container': string;
+            'secondary-container': string;
+            'tertiary-container': string;
+            'error-container': string;
+            background: string;
+            surface: string;
+            'surface-variant': string;
+            outline: string;
             on: {
                 primary: string;
                 secondary: string;
+                tertiary: string;
                 error: string;
+                'primary-container': string;
+                'secondary-container': string;
+                'tertiary-container': string;
+                'error-container': string;
                 background: string;
                 surface: string;
-                muted: string;
+                'surface-variant': string;
+                outline: string;
             };
             modes: {
                 dark: {
-                    text: string;
-                    background: string;
-                    surface: string;
-                    error: string;
                     primary: string;
                     secondary: string;
-                    muted: string;
+                    tertiary: string;
+                    error: string;
+                    'primary-container': string;
+                    'secondary-container': string;
+                    'tertiary-container': string;
+                    'error-container': string;
+                    background: string;
+                    surface: string;
+                    'surface-variant': string;
+                    outline: string;
                     on: {
                         primary: string;
                         secondary: string;
+                        tertiary: string;
                         error: string;
+                        'primary-container': string;
+                        'secondary-container': string;
+                        'tertiary-container': string;
+                        'error-container': string;
                         background: string;
                         surface: string;
-                        muted: string;
+                        'surface-variant': string;
+                        outline: string;
                     };
                 };
             };
@@ -49,10 +72,19 @@ export declare const InnerContainer: import("@emotion/styled").StyledComponent<{
         radii: {
             none: number;
             default: string;
+            'extra-small': string;
+            'extra-small_top': string;
+            small: string;
+            medium: string;
             large: string;
+            large_end: string;
+            large_top: string;
+            'extra-large': string;
+            'extra-large_top': string;
+            full: string;
             circle: string;
         };
-        shadows: {
+        shadowsOriginal: {
             0: string;
             1: string;
             2: string;
@@ -79,9 +111,19 @@ export declare const InnerContainer: import("@emotion/styled").StyledComponent<{
             23: string;
             24: string;
         };
+        shadows: {
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+        };
         fonts: {
             body: string;
             heading: string;
+            brand: string;
+            plain: string;
             monospace: string;
         };
         fontSizes: {
@@ -131,6 +173,111 @@ export declare const InnerContainer: import("@emotion/styled").StyledComponent<{
                 fontFamily: string;
                 lineHeight: string;
             };
+            'display-large': {
+                fontFamily: "plain" | "brand";
+                lineHeight: string;
+                fontSize: string;
+                letterSpacing: string;
+                fontWeight: number;
+            };
+            'display-medium': {
+                fontFamily: "plain" | "brand";
+                lineHeight: string;
+                fontSize: string;
+                letterSpacing: string;
+                fontWeight: number;
+            };
+            'display-small': {
+                fontFamily: "plain" | "brand";
+                lineHeight: string;
+                fontSize: string;
+                letterSpacing: string;
+                fontWeight: number;
+            };
+            'headline-large': {
+                fontFamily: "plain" | "brand";
+                lineHeight: string;
+                fontSize: string;
+                letterSpacing: string;
+                fontWeight: number;
+            };
+            'headline-medium': {
+                fontFamily: "plain" | "brand";
+                lineHeight: string;
+                fontSize: string;
+                letterSpacing: string;
+                fontWeight: number;
+            };
+            'headline-small': {
+                fontFamily: "plain" | "brand";
+                lineHeight: string;
+                fontSize: string;
+                letterSpacing: string;
+                fontWeight: number;
+            };
+            'title-large': {
+                fontFamily: "plain" | "brand";
+                lineHeight: string;
+                fontSize: string;
+                letterSpacing: string;
+                fontWeight: number;
+            };
+            'title-medium': {
+                fontFamily: "plain" | "brand";
+                lineHeight: string;
+                fontSize: string;
+                letterSpacing: string;
+                fontWeight: number;
+            };
+            'title-small': {
+                fontFamily: "plain" | "brand";
+                lineHeight: string;
+                fontSize: string;
+                letterSpacing: string;
+                fontWeight: number;
+            };
+            'label-large': {
+                fontFamily: "plain" | "brand";
+                lineHeight: string;
+                fontSize: string;
+                letterSpacing: string;
+                fontWeight: number;
+            };
+            'label-medium': {
+                fontFamily: "plain" | "brand";
+                lineHeight: string;
+                fontSize: string;
+                letterSpacing: string;
+                fontWeight: number;
+            };
+            'label-small': {
+                fontFamily: "plain" | "brand";
+                lineHeight: string;
+                fontSize: string;
+                letterSpacing: string;
+                fontWeight: number;
+            };
+            'body-large': {
+                fontFamily: "plain" | "brand";
+                lineHeight: string;
+                fontSize: string;
+                letterSpacing: string;
+                fontWeight: number;
+            };
+            'body-medium': {
+                fontFamily: "plain" | "brand";
+                lineHeight: string;
+                fontSize: string;
+                letterSpacing: string;
+                fontWeight: number;
+            };
+            'body-small': {
+                fontFamily: "plain" | "brand";
+                lineHeight: string;
+                fontSize: string;
+                letterSpacing: string;
+                fontWeight: number;
+            };
             h1: {
                 variant: string;
                 fontWeight: string;
@@ -194,9 +341,8 @@ export declare const InnerContainer: import("@emotion/styled").StyledComponent<{
             button: {
                 variant: string;
                 fontSize: number;
-                fontWeight: string;
                 letterSpacing: string;
-                lineHeight: string;
+                fontWeight: string;
             };
             caption: {
                 variant: string;
@@ -258,17 +404,17 @@ export declare const InnerContainer: import("@emotion/styled").StyledComponent<{
             variants: {
                 base: {
                     variant: string;
-                    borderRadius: string;
                     boxShadow: string;
                     py: number;
-                    px: number;
+                    px: string;
                     height: string;
+                    borderRadius: string;
                     cursor: string;
                     outline: string;
                 };
                 text: {
                     variant: string;
-                    px: number;
+                    px: string;
                 };
                 filled: {
                     variant: string;
@@ -283,6 +429,7 @@ export declare const InnerContainer: import("@emotion/styled").StyledComponent<{
                     width: string;
                     maxWidth: string;
                     borderRadius: string;
+                    px: number;
                 };
                 'fab-mini': {
                     variant: string;
@@ -290,6 +437,16 @@ export declare const InnerContainer: import("@emotion/styled").StyledComponent<{
                     maxHeight: string;
                     width: string;
                     maxWidth: string;
+                    borderRadius: string;
+                    px: number;
+                };
+                'fab-large': {
+                    variant: string;
+                    height: string;
+                    maxHeight: string;
+                    width: string;
+                    maxWidth: string;
+                    borderRadius: string;
                     px: number;
                 };
                 'fab-extended': {
@@ -310,13 +467,22 @@ export declare const InnerContainer: import("@emotion/styled").StyledComponent<{
             };
             elevations: {
                 none: {};
-                contained: {
+                default: {
+                    transition: string;
+                    '&:hover': {
+                        boxShadow: number;
+                    };
+                    '&:active,&:focus-visible,&:disabled': {
+                        boxShadow: number;
+                    };
+                };
+                elevated: {
                     transition: string;
                     boxShadow: number;
-                    ':focus,:hover': {
+                    '&:hover': {
                         boxShadow: number;
                     };
-                    ':active': {
+                    '&:active,&:focus-visible': {
                         boxShadow: number;
                     };
                     '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
@@ -326,10 +492,10 @@ export declare const InnerContainer: import("@emotion/styled").StyledComponent<{
                 floating: {
                     transition: string;
                     boxShadow: number;
-                    ':focus,:hover': {
+                    ':hover': {
                         boxShadow: number;
                     };
-                    ':active': {
+                    '&:active,&:focus-visible': {
                         boxShadow: number;
                     };
                     '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
@@ -376,39 +542,32 @@ export declare const InnerContainer: import("@emotion/styled").StyledComponent<{
                 };
                 filled: {
                     variant: string;
+                    boxShadow: number;
+                    ':active:not([data-disabled])': {
+                        boxShadow: number;
+                    };
                 };
                 outlined: {
                     variant: string;
                 };
             };
         };
+        dialogs: {
+            variants: {
+                base: {
+                    borderRadius: string;
+                };
+            };
+            backgroundColorOverlay: number;
+        };
         paper: {
             overlays: {
-                '0': number;
-                '1': number;
-                '2': number;
-                '3': number;
-                '4': number;
-                '5': number;
-                '6': number;
-                '7': number;
-                '8': number;
-                '9': number;
-                '10': number;
-                '11': number;
-                '12': number;
-                '13': number;
-                '14': number;
-                '15': number;
-                '16': number;
-                '17': number;
-                '18': number;
-                '19': number;
-                '20': number;
-                '21': number;
-                '22': number;
-                '23': number;
-                '24': number;
+                0: number;
+                1: number;
+                2: number;
+                3: number;
+                4: number;
+                5: number;
             };
         };
         zIndices: {

package/build/esm/NotchedOutline/styledComponents.js

@@ -1,89 +1,85 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _styled from "@emotion/styled/base";
 import { rem } from 'polished';
-import { alpha } from '../color';
 import shouldForwardProp from '@styled-system/should-forward-prop';
 import { css } from '@styled-system/css';
-export const NOTCH_PADDING = 4;
+import { alpha } from '../color';
+import { EASING_STANDARD } from '../motion';
+export var NOTCH_PADDING = 4;
 
-const makeSelector = state => "input:".concat(state, " ~ & [data-notch-outline-item],") + "select:".concat(state, " ~ & [data-notch-outline-item],") + "[role=\"button\"]:".concat(state, " ~ & [data-notch-outline-item],") + "textarea:".concat(state, " ~ & [data-notch-outline-item]");
+var makeSelector = function makeSelector(state) {
+  return "input:".concat(state, " ~ & [data-notch-outline-item],") + "select:".concat(state, " ~ & [data-notch-outline-item],") + "[role=\"button\"]:".concat(state, " ~ & [data-notch-outline-item],") + "textarea:".concat(state, " ~ & [data-notch-outline-item]");
+};
 
-export const InnerContainer = /*#__PURE__*/_styled('div', process.env.NODE_ENV === "production" ? {
-  shouldForwardProp,
+export var InnerContainer = /*#__PURE__*/_styled('div', process.env.NODE_ENV === "production" ? {
+  shouldForwardProp: shouldForwardProp,
   target: "ejp8zhv0"
 } : {
-  shouldForwardProp,
+  shouldForwardProp: shouldForwardProp,
   target: "ejp8zhv0",
   label: "InnerContainer"
-})("position:absolute;display:flex;left:0;top:0;bottom:0;width:100%;height:100%;pointer-events:none;", ({
-  color = 'on.surface',
-  borderRadius: borderRadiusPx,
-  borderWidth: borderWidthPx,
-  borderWidthWhenFocused: borderWidthWhenFocusedPx,
-  borderStyle,
-  notchStart,
-  forceActive = false
-}) => {
-  const width = rem(notchStart - NOTCH_PADDING);
-  const borderRadius = rem(borderRadiusPx);
-  const borderWidth = rem(borderWidthPx);
-  const borderWidthWhenFocused = rem(borderWidthWhenFocusedPx);
+})("position:absolute;display:flex;left:0;top:0;bottom:0;width:100%;height:100%;pointer-events:none;", function (_ref) {
+  var _css;
+
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'on.surface' : _ref$color,
+      borderRadiusPx = _ref.borderRadius,
+      borderWidthPx = _ref.borderWidth,
+      borderWidthWhenFocusedPx = _ref.borderWidthWhenFocused,
+      borderStyle = _ref.borderStyle,
+      notchStart = _ref.notchStart,
+      _ref$forceActive = _ref.forceActive,
+      forceActive = _ref$forceActive === void 0 ? false : _ref$forceActive;
+  var width = rem(notchStart - NOTCH_PADDING);
+  var borderRadius = rem(borderRadiusPx);
+  var borderWidth = rem(borderWidthPx);
+  var borderWidthWhenFocused = rem(borderWidthWhenFocusedPx);
 
   function borderStyling(borderRadius, borderWidth) {
-    return {
-      ['&[data-notch-outline-item="start"]']: {
-        borderTopLeftRadius: borderRadius,
-        borderBottomLeftRadius: borderRadius,
-        borderWidth: borderWidth,
-        borderRightWidth: 0,
-        width
-      },
-      ['&[data-notch-outline-item="middle"]']: {
-        borderWidth: 0,
-        borderBottomWidth: borderWidth
-      },
-      ['&[data-notch-outline-item="end"]']: {
-        borderWidth: borderWidth,
-        borderLeft: 0,
-        borderTopRightRadius: borderRadius,
-        borderBottomRightRadius: borderRadius,
-        flex: 1
-      }
-    };
+    var _ref2;
+
+    return _ref2 = {}, _defineProperty(_ref2, '&[data-notch-outline-item="start"]', {
+      borderTopLeftRadius: borderRadius,
+      borderBottomLeftRadius: borderRadius,
+      borderWidth: borderWidth,
+      borderRightWidth: 0,
+      width: width
+    }), _defineProperty(_ref2, '&[data-notch-outline-item="middle"]', {
+      borderWidth: 0,
+      borderBottomWidth: borderWidth
+    }), _defineProperty(_ref2, '&[data-notch-outline-item="end"]', {
+      borderWidth: borderWidth,
+      borderLeft: 0,
+      borderTopRightRadius: borderRadius,
+      borderBottomRightRadius: borderRadius,
+      flex: 1
+    }), _ref2;
   }
 
-  const inactiveStyle = _extends({
-    color: alpha('on.surface', 0.6),
-    borderColor: alpha('on.surface', 0.38)
+  var inactiveStyle = _extends({
+    color: 'on.surface-variant',
+    borderColor: 'outline'
   }, borderStyling(borderRadius, borderWidth));
 
-  const hoverStyle = {
-    borderColor: alpha('on.surface', 0.87),
-    color: alpha('on.surface', 0.6)
+  var hoverStyle = {
+    borderColor: 'on.surface',
+    color: 'on.surface-variant'
   };
 
-  const focusStyle = _extends({
-    borderColor: alpha(color, 0.87),
+  var focusStyle = _extends({
+    borderColor: color,
     color: alpha(color, 0.87)
   }, borderStyling(borderRadius, borderWidthWhenFocused));
 
-  const disabledStyle = {
+  var disabledStyle = {
     borderColor: alpha('on.surface', 0.06),
     color: alpha('on.surface', 0.38)
   };
-  return css({
-    // notch items styles when not focused
-    ['[data-notch-outline-item]']: _extends({
-      boxSizing: 'border-box',
-      borderStyle,
-      transition: "border-color .15s cubic-bezier(.4,0,.2,1)"
-    }, forceActive ? focusStyle : inactiveStyle),
-    // notch items styles when input is hovered
-    [makeSelector('hover:not([disabled]):not(:focus)')]: forceActive ? focusStyle : hoverStyle,
-    // notch items styles when input is focused
-    [makeSelector('focus:not([disabled])')]: focusStyle,
-    // notch items styles when input is disabled
-    [makeSelector('disabled')]: disabledStyle
-  });
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9Ob3RjaGVkT3V0bGluZS9zdHlsZWRDb21wb25lbnRzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9COEIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL05vdGNoZWRPdXRsaW5lL3N0eWxlZENvbXBvbmVudHMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBUaGVtZSB9IGZyb20gJy4uL3RoZW1lJztcbmltcG9ydCB7IHJlbSB9IGZyb20gJ3BvbGlzaGVkJztcbmltcG9ydCB7IGFscGhhIH0gZnJvbSAnLi4vY29sb3InO1xuaW1wb3J0IHNob3VsZEZvcndhcmRQcm9wIGZyb20gJ0BzdHlsZWQtc3lzdGVtL3Nob3VsZC1mb3J3YXJkLXByb3AnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQHN0eWxlZC1zeXN0ZW0vY3NzJztcblxuZXhwb3J0IGNvbnN0IE5PVENIX1BBRERJTkcgPSA0O1xuXG5jb25zdCBtYWtlU2VsZWN0b3IgPSAoXG4gIHN0YXRlOlxuICAgIHwgJ2hvdmVyOm5vdChbZGlzYWJsZWRdKTpub3QoOmZvY3VzKSdcbiAgICB8ICdmb2N1czpub3QoW2Rpc2FibGVkXSknXG4gICAgfCAnZGlzYWJsZWQnXG4pID0+XG4gIGBpbnB1dDoke3N0YXRlfSB+ICYgW2RhdGEtbm90Y2gtb3V0bGluZS1pdGVtXSxgICtcbiAgYHNlbGVjdDoke3N0YXRlfSB+ICYgW2RhdGEtbm90Y2gtb3V0bGluZS1pdGVtXSxgICtcbiAgYFtyb2xlPVwiYnV0dG9uXCJdOiR7c3RhdGV9IH4gJiBbZGF0YS1ub3RjaC1vdXRsaW5lLWl0ZW1dLGAgK1xuICBgdGV4dGFyZWE6JHtzdGF0ZX0gfiAmIFtkYXRhLW5vdGNoLW91dGxpbmUtaXRlbV1gO1xuXG5leHBvcnQgY29uc3QgSW5uZXJDb250YWluZXIgPSBzdHlsZWQoJ2RpdicsIHtcbiAgc2hvdWxkRm9yd2FyZFByb3AsXG59KTx7XG4gIGNvbG9yPzogc3RyaW5nO1xuICB0aGVtZT86IFRoZW1lO1xuICBib3JkZXJSYWRpdXM6IG51bWJlcjtcbiAgYm9yZGVyV2lkdGg6IG51bWJlcjtcbiAgYm9yZGVyV2lkdGhXaGVuRm9jdXNlZDogbnVtYmVyO1xuICBib3JkZXJTdHlsZTogc3RyaW5nO1xuICBub3RjaFN0YXJ0OiBudW1iZXI7XG4gIGZvcmNlQWN0aXZlPzogYm9vbGVhbjtcbn0+KFxuICB7XG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgZGlzcGxheTogJ2ZsZXgnLFxuICAgIGxlZnQ6IDAsXG4gICAgdG9wOiAwLFxuICAgIGJvdHRvbTogMCxcbiAgICB3aWR0aDogJzEwMCUnLFxuICAgIGhlaWdodDogJzEwMCUnLFxuICAgIHBvaW50ZXJFdmVudHM6ICdub25lJyxcbiAgfSxcbiAgKHtcbiAgICBjb2xvciA9ICdvbi5zdXJmYWNlJyxcbiAgICBib3JkZXJSYWRpdXM6IGJvcmRlclJhZGl1c1B4LFxuICAgIGJvcmRlcldpZHRoOiBib3JkZXJXaWR0aFB4LFxuICAgIGJvcmRlcldpZHRoV2hlbkZvY3VzZWQ6IGJvcmRlcldpZHRoV2hlbkZvY3VzZWRQeCxcbiAgICBib3JkZXJTdHlsZSxcbiAgICBub3RjaFN0YXJ0LFxuICAgIGZvcmNlQWN0aXZlID0gZmFsc2UsXG4gIH0pID0+IHtcbiAgICBjb25zdCB3aWR0aCA9IHJlbShub3RjaFN0YXJ0IC0gTk9UQ0hfUEFERElORyk7XG4gICAgY29uc3QgYm9yZGVyUmFkaXVzID0gcmVtKGJvcmRlclJhZGl1c1B4KTtcbiAgICBjb25zdCBib3JkZXJXaWR0aCA9IHJlbShib3JkZXJXaWR0aFB4KTtcbiAgICBjb25zdCBib3JkZXJXaWR0aFdoZW5Gb2N1c2VkID0gcmVtKGJvcmRlcldpZHRoV2hlbkZvY3VzZWRQeCk7XG5cbiAgICBmdW5jdGlvbiBib3JkZXJTdHlsaW5nKGJvcmRlclJhZGl1czogc3RyaW5nLCBib3JkZXJXaWR0aDogc3RyaW5nKSB7XG4gICAgICByZXR1cm4ge1xuICAgICAgICBbJyZbZGF0YS1ub3RjaC1vdXRsaW5lLWl0ZW09XCJzdGFydFwiXSddOiB7XG4gICAgICAgICAgYm9yZGVyVG9wTGVmdFJhZGl1czogYm9yZGVyUmFkaXVzLFxuICAgICAgICAgIGJvcmRlckJvdHRvbUxlZnRSYWRpdXM6IGJvcmRlclJhZGl1cyxcbiAgICAgICAgICBib3JkZXJXaWR0aDogYm9yZGVyV2lkdGgsXG4gICAgICAgICAgYm9yZGVyUmlnaHRXaWR0aDogMCxcbiAgICAgICAgICB3aWR0aCxcbiAgICAgICAgfSxcbiAgICAgICAgWycmW2RhdGEtbm90Y2gtb3V0bGluZS1pdGVtPVwibWlkZGxlXCJdJ106IHtcbiAgICAgICAgICBib3JkZXJXaWR0aDogMCxcbiAgICAgICAgICBib3JkZXJCb3R0b21XaWR0aDogYm9yZGVyV2lkdGgsXG4gICAgICAgIH0sXG4gICAgICAgIFsnJltkYXRhLW5vdGNoLW91dGxpbmUtaXRlbT1cImVuZFwiXSddOiB7XG4gICAgICAgICAgYm9yZGVyV2lkdGg6IGJvcmRlcldpZHRoLFxuICAgICAgICAgIGJvcmRlckxlZnQ6IDAsXG4gICAgICAgICAgYm9yZGVyVG9wUmlnaHRSYWRpdXM6IGJvcmRlclJhZGl1cyxcbiAgICAgICAgICBib3JkZXJCb3R0b21SaWdodFJhZGl1czogYm9yZGVyUmFkaXVzLFxuICAgICAgICAgIGZsZXg6IDEsXG4gICAgICAgIH0sXG4gICAgICB9O1xuICAgIH1cblxuICAgIGNvbnN0IGluYWN0aXZlU3R5bGUgPSB7XG4gICAgICBjb2xvcjogYWxwaGEoJ29uLnN1cmZhY2UnLCAwLjYpLFxuICAgICAgYm9yZGVyQ29sb3I6IGFscGhhKCdvbi5zdXJmYWNlJywgMC4zOCksXG4gICAgICAuLi5ib3JkZXJTdHlsaW5nKGJvcmRlclJhZGl1cywgYm9yZGVyV2lkdGgpLFxuICAgIH07XG5cbiAgICBjb25zdCBob3ZlclN0eWxlID0ge1xuICAgICAgYm9yZGVyQ29sb3I6IGFscGhhKCdvbi5zdXJmYWNlJywgMC44NyksXG4gICAgICBjb2xvcjogYWxwaGEoJ29uLnN1cmZhY2UnLCAwLjYpLFxuICAgIH07XG5cbiAgICBjb25zdCBmb2N1c1N0eWxlID0ge1xuICAgICAgYm9yZGVyQ29sb3I6IGFscGhhKGNvbG9yLCAwLjg3KSxcbiAgICAgIGNvbG9yOiBhbHBoYShjb2xvciwgMC44NyksXG4gICAgICAuLi5ib3JkZXJTdHlsaW5nKGJvcmRlclJhZGl1cywgYm9yZGVyV2lkdGhXaGVuRm9jdXNlZCksXG4gICAgfTtcblxuICAgIGNvbnN0IGRpc2FibGVkU3R5bGUgPSB7XG4gICAgICBib3JkZXJDb2xvcjogYWxwaGEoJ29uLnN1cmZhY2UnLCAwLjA2KSxcbiAgICAgIGNvbG9yOiBhbHBoYSgnb24uc3VyZmFjZScsIDAuMzgpLFxuICAgIH07XG5cbiAgICByZXR1cm4gY3NzKHtcbiAgICAgIC8vIG5vdGNoIGl0ZW1zIHN0eWxlcyB3aGVuIG5vdCBmb2N1c2VkXG4gICAgICBbJ1tkYXRhLW5vdGNoLW91dGxpbmUtaXRlbV0nXToge1xuICAgICAgICBib3hTaXppbmc6ICdib3JkZXItYm94JyxcbiAgICAgICAgYm9yZGVyU3R5bGUsXG4gICAgICAgIHRyYW5zaXRpb246IGBib3JkZXItY29sb3IgLjE1cyBjdWJpYy1iZXppZXIoLjQsMCwuMiwxKWAsXG4gICAgICAgIC4uLihmb3JjZUFjdGl2ZSA/IGZvY3VzU3R5bGUgOiBpbmFjdGl2ZVN0eWxlKSxcbiAgICAgIH0sXG4gICAgICAvLyBub3RjaCBpdGVtcyBzdHlsZXMgd2hlbiBpbnB1dCBpcyBob3ZlcmVkXG4gICAgICBbbWFrZVNlbGVjdG9yKCdob3Zlcjpub3QoW2Rpc2FibGVkXSk6bm90KDpmb2N1cyknKV06IGZvcmNlQWN0aXZlXG4gICAgICAgID8gZm9jdXNTdHlsZVxuICAgICAgICA6IGhvdmVyU3R5bGUsXG4gICAgICAvLyBub3RjaCBpdGVtcyBzdHlsZXMgd2hlbiBpbnB1dCBpcyBmb2N1c2VkXG4gICAgICBbbWFrZVNlbGVjdG9yKCdmb2N1czpub3QoW2Rpc2FibGVkXSknKV06IGZvY3VzU3R5bGUsXG4gICAgICAvLyBub3RjaCBpdGVtcyBzdHlsZXMgd2hlbiBpbnB1dCBpcyBkaXNhYmxlZFxuICAgICAgW21ha2VTZWxlY3RvcignZGlzYWJsZWQnKV06IGRpc2FibGVkU3R5bGUsXG4gICAgfSk7XG4gIH1cbik7XG4iXX0= */");
+  return css((_css = {}, _defineProperty(_css, '[data-notch-outline-item]', _extends({
+    boxSizing: 'border-box',
+    borderStyle: borderStyle,
+    transition: "border-color .15s ".concat(EASING_STANDARD)
+  }, forceActive ? focusStyle : inactiveStyle)), _defineProperty(_css, makeSelector('hover:not([disabled]):not(:focus)'), forceActive ? focusStyle : hoverStyle), _defineProperty(_css, makeSelector('focus:not([disabled])'), focusStyle), _defineProperty(_css, makeSelector('disabled'), disabledStyle), _css));
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9Ob3RjaGVkT3V0bGluZS9zdHlsZWRDb21wb25lbnRzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNCOEIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL05vdGNoZWRPdXRsaW5lL3N0eWxlZENvbXBvbmVudHMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyByZW0gfSBmcm9tICdwb2xpc2hlZCc7XG5pbXBvcnQgc2hvdWxkRm9yd2FyZFByb3AgZnJvbSAnQHN0eWxlZC1zeXN0ZW0vc2hvdWxkLWZvcndhcmQtcHJvcCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAc3R5bGVkLXN5c3RlbS9jc3MnO1xuXG5pbXBvcnQgeyBhbHBoYSB9IGZyb20gJy4uL2NvbG9yJztcbmltcG9ydCB0eXBlIHsgVGhlbWUgfSBmcm9tICcuLi90aGVtZSc7XG5pbXBvcnQgeyBFQVNJTkdfU1RBTkRBUkQgfSBmcm9tICcuLi9tb3Rpb24nO1xuXG5leHBvcnQgY29uc3QgTk9UQ0hfUEFERElORyA9IDQ7XG5cbmNvbnN0IG1ha2VTZWxlY3RvciA9IChcbiAgc3RhdGU6XG4gICAgfCAnaG92ZXI6bm90KFtkaXNhYmxlZF0pOm5vdCg6Zm9jdXMpJ1xuICAgIHwgJ2ZvY3VzOm5vdChbZGlzYWJsZWRdKSdcbiAgICB8ICdkaXNhYmxlZCdcbikgPT5cbiAgYGlucHV0OiR7c3RhdGV9IH4gJiBbZGF0YS1ub3RjaC1vdXRsaW5lLWl0ZW1dLGAgK1xuICBgc2VsZWN0OiR7c3RhdGV9IH4gJiBbZGF0YS1ub3RjaC1vdXRsaW5lLWl0ZW1dLGAgK1xuICBgW3JvbGU9XCJidXR0b25cIl06JHtzdGF0ZX0gfiAmIFtkYXRhLW5vdGNoLW91dGxpbmUtaXRlbV0sYCArXG4gIGB0ZXh0YXJlYToke3N0YXRlfSB+ICYgW2RhdGEtbm90Y2gtb3V0bGluZS1pdGVtXWA7XG5cbmV4cG9ydCBjb25zdCBJbm5lckNvbnRhaW5lciA9IHN0eWxlZCgnZGl2Jywge1xuICBzaG91bGRGb3J3YXJkUHJvcCxcbn0pPHtcbiAgY29sb3I/OiBzdHJpbmc7XG4gIHRoZW1lPzogVGhlbWU7XG4gIGJvcmRlclJhZGl1czogbnVtYmVyO1xuICBib3JkZXJXaWR0aDogbnVtYmVyO1xuICBib3JkZXJXaWR0aFdoZW5Gb2N1c2VkOiBudW1iZXI7XG4gIGJvcmRlclN0eWxlOiBzdHJpbmc7XG4gIG5vdGNoU3RhcnQ6IG51bWJlcjtcbiAgZm9yY2VBY3RpdmU/OiBib29sZWFuO1xufT4oXG4gIHtcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgbGVmdDogMCxcbiAgICB0b3A6IDAsXG4gICAgYm90dG9tOiAwLFxuICAgIHdpZHRoOiAnMTAwJScsXG4gICAgaGVpZ2h0OiAnMTAwJScsXG4gICAgcG9pbnRlckV2ZW50czogJ25vbmUnLFxuICB9LFxuICAoe1xuICAgIGNvbG9yID0gJ29uLnN1cmZhY2UnLFxuICAgIGJvcmRlclJhZGl1czogYm9yZGVyUmFkaXVzUHgsXG4gICAgYm9yZGVyV2lkdGg6IGJvcmRlcldpZHRoUHgsXG4gICAgYm9yZGVyV2lkdGhXaGVuRm9jdXNlZDogYm9yZGVyV2lkdGhXaGVuRm9jdXNlZFB4LFxuICAgIGJvcmRlclN0eWxlLFxuICAgIG5vdGNoU3RhcnQsXG4gICAgZm9yY2VBY3RpdmUgPSBmYWxzZSxcbiAgfSkgPT4ge1xuICAgIGNvbnN0IHdpZHRoID0gcmVtKG5vdGNoU3RhcnQgLSBOT1RDSF9QQURESU5HKTtcbiAgICBjb25zdCBib3JkZXJSYWRpdXMgPSByZW0oYm9yZGVyUmFkaXVzUHgpO1xuICAgIGNvbnN0IGJvcmRlcldpZHRoID0gcmVtKGJvcmRlcldpZHRoUHgpO1xuICAgIGNvbnN0IGJvcmRlcldpZHRoV2hlbkZvY3VzZWQgPSByZW0oYm9yZGVyV2lkdGhXaGVuRm9jdXNlZFB4KTtcblxuICAgIGZ1bmN0aW9uIGJvcmRlclN0eWxpbmcoYm9yZGVyUmFkaXVzOiBzdHJpbmcsIGJvcmRlcldpZHRoOiBzdHJpbmcpIHtcbiAgICAgIHJldHVybiB7XG4gICAgICAgIFsnJltkYXRhLW5vdGNoLW91dGxpbmUtaXRlbT1cInN0YXJ0XCJdJ106IHtcbiAgICAgICAgICBib3JkZXJUb3BMZWZ0UmFkaXVzOiBib3JkZXJSYWRpdXMsXG4gICAgICAgICAgYm9yZGVyQm90dG9tTGVmdFJhZGl1czogYm9yZGVyUmFkaXVzLFxuICAgICAgICAgIGJvcmRlcldpZHRoOiBib3JkZXJXaWR0aCxcbiAgICAgICAgICBib3JkZXJSaWdodFdpZHRoOiAwLFxuICAgICAgICAgIHdpZHRoLFxuICAgICAgICB9LFxuICAgICAgICBbJyZbZGF0YS1ub3RjaC1vdXRsaW5lLWl0ZW09XCJtaWRkbGVcIl0nXToge1xuICAgICAgICAgIGJvcmRlcldpZHRoOiAwLFxuICAgICAgICAgIGJvcmRlckJvdHRvbVdpZHRoOiBib3JkZXJXaWR0aCxcbiAgICAgICAgfSxcbiAgICAgICAgWycmW2RhdGEtbm90Y2gtb3V0bGluZS1pdGVtPVwiZW5kXCJdJ106IHtcbiAgICAgICAgICBib3JkZXJXaWR0aDogYm9yZGVyV2lkdGgsXG4gICAgICAgICAgYm9yZGVyTGVmdDogMCxcbiAgICAgICAgICBib3JkZXJUb3BSaWdodFJhZGl1czogYm9yZGVyUmFkaXVzLFxuICAgICAgICAgIGJvcmRlckJvdHRvbVJpZ2h0UmFkaXVzOiBib3JkZXJSYWRpdXMsXG4gICAgICAgICAgZmxleDogMSxcbiAgICAgICAgfSxcbiAgICAgIH07XG4gICAgfVxuXG4gICAgY29uc3QgaW5hY3RpdmVTdHlsZSA9IHtcbiAgICAgIGNvbG9yOiAnb24uc3VyZmFjZS12YXJpYW50JyxcbiAgICAgIGJvcmRlckNvbG9yOiAnb3V0bGluZScsXG4gICAgICAuLi5ib3JkZXJTdHlsaW5nKGJvcmRlclJhZGl1cywgYm9yZGVyV2lkdGgpLFxuICAgIH07XG5cbiAgICBjb25zdCBob3ZlclN0eWxlID0ge1xuICAgICAgYm9yZGVyQ29sb3I6ICdvbi5zdXJmYWNlJyxcbiAgICAgIGNvbG9yOiAnb24uc3VyZmFjZS12YXJpYW50JyxcbiAgICB9O1xuXG4gICAgY29uc3QgZm9jdXNTdHlsZSA9IHtcbiAgICAgIGJvcmRlckNvbG9yOiBjb2xvcixcbiAgICAgIGNvbG9yOiBhbHBoYShjb2xvciwgMC44NyksXG4gICAgICAuLi5ib3JkZXJTdHlsaW5nKGJvcmRlclJhZGl1cywgYm9yZGVyV2lkdGhXaGVuRm9jdXNlZCksXG4gICAgfTtcblxuICAgIGNvbnN0IGRpc2FibGVkU3R5bGUgPSB7XG4gICAgICBib3JkZXJDb2xvcjogYWxwaGEoJ29uLnN1cmZhY2UnLCAwLjA2KSxcbiAgICAgIGNvbG9yOiBhbHBoYSgnb24uc3VyZmFjZScsIDAuMzgpLFxuICAgIH07XG5cbiAgICByZXR1cm4gY3NzKHtcbiAgICAgIC8vIG5vdGNoIGl0ZW1zIHN0eWxlcyB3aGVuIG5vdCBmb2N1c2VkXG4gICAgICBbJ1tkYXRhLW5vdGNoLW91dGxpbmUtaXRlbV0nXToge1xuICAgICAgICBib3hTaXppbmc6ICdib3JkZXItYm94JyxcbiAgICAgICAgYm9yZGVyU3R5bGUsXG4gICAgICAgIHRyYW5zaXRpb246IGBib3JkZXItY29sb3IgLjE1cyAke0VBU0lOR19TVEFOREFSRH1gLFxuICAgICAgICAuLi4oZm9yY2VBY3RpdmUgPyBmb2N1c1N0eWxlIDogaW5hY3RpdmVTdHlsZSksXG4gICAgICB9LFxuICAgICAgLy8gbm90Y2ggaXRlbXMgc3R5bGVzIHdoZW4gaW5wdXQgaXMgaG92ZXJlZFxuICAgICAgW21ha2VTZWxlY3RvcignaG92ZXI6bm90KFtkaXNhYmxlZF0pOm5vdCg6Zm9jdXMpJyldOiBmb3JjZUFjdGl2ZVxuICAgICAgICA/IGZvY3VzU3R5bGVcbiAgICAgICAgOiBob3ZlclN0eWxlLFxuICAgICAgLy8gbm90Y2ggaXRlbXMgc3R5bGVzIHdoZW4gaW5wdXQgaXMgZm9jdXNlZFxuICAgICAgW21ha2VTZWxlY3RvcignZm9jdXM6bm90KFtkaXNhYmxlZF0pJyldOiBmb2N1c1N0eWxlLFxuICAgICAgLy8gbm90Y2ggaXRlbXMgc3R5bGVzIHdoZW4gaW5wdXQgaXMgZGlzYWJsZWRcbiAgICAgIFttYWtlU2VsZWN0b3IoJ2Rpc2FibGVkJyldOiBkaXNhYmxlZFN0eWxlLFxuICAgIH0pO1xuICB9XG4pO1xuIl19 */");
 //# sourceMappingURL=styledComponents.js.map

package/build/esm/NotchedOutline/styledComponents.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/NotchedOutline/styledComponents.ts"],"names":["rem","alpha","shouldForwardProp","css","NOTCH_PADDING","makeSelector","state","InnerContainer","color","borderRadius","borderRadiusPx","borderWidth","borderWidthPx","borderWidthWhenFocused","borderWidthWhenFocusedPx","borderStyle","notchStart","forceActive","width","borderStyling","borderTopLeftRadius","borderBottomLeftRadius","borderRightWidth","borderBottomWidth","borderLeft","borderTopRightRadius","borderBottomRightRadius","flex","inactiveStyle","borderColor","hoverStyle","focusStyle","disabledStyle","boxSizing","transition"],"mappings":"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","sourcesContent":["import styled from '@emotion/styled';\nimport { Theme } from '../theme';\nimport { rem } from 'polished';\nimport { alpha } from '../color';\nimport shouldForwardProp from '@styled-system/should-forward-prop';\nimport { css } from '@styled-system/css';\n\nexport const NOTCH_PADDING = 4;\n\nconst makeSelector = (\n  state:\n    | 'hover:not([disabled]):not(:focus)'\n    | 'focus:not([disabled])'\n    | 'disabled'\n) =>\n  `input:${state} ~ & [data-notch-outline-item],` +\n  `select:${state} ~ & [data-notch-outline-item],` +\n  `[role=\"button\"]:${state} ~ & [data-notch-outline-item],` +\n  `textarea:${state} ~ & [data-notch-outline-item]`;\n\nexport const InnerContainer = styled('div', {\n  shouldForwardProp,\n})<{\n  color?: string;\n  theme?: Theme;\n  borderRadius: number;\n  borderWidth: number;\n  borderWidthWhenFocused: number;\n  borderStyle: string;\n  notchStart: number;\n  forceActive?: boolean;\n}>(\n  {\n    position: 'absolute',\n    display: 'flex',\n    left: 0,\n    top: 0,\n    bottom: 0,\n    width: '100%',\n    height: '100%',\n    pointerEvents: 'none',\n  },\n  ({\n    color = 'on.surface',\n    borderRadius: borderRadiusPx,\n    borderWidth: borderWidthPx,\n    borderWidthWhenFocused: borderWidthWhenFocusedPx,\n    borderStyle,\n    notchStart,\n    forceActive = false,\n  }) => {\n    const width = rem(notchStart - NOTCH_PADDING);\n    const borderRadius = rem(borderRadiusPx);\n    const borderWidth = rem(borderWidthPx);\n    const borderWidthWhenFocused = rem(borderWidthWhenFocusedPx);\n\n    function borderStyling(borderRadius: string, borderWidth: string) {\n      return {\n        ['&[data-notch-outline-item=\"start\"]']: {\n          borderTopLeftRadius: borderRadius,\n          borderBottomLeftRadius: borderRadius,\n          borderWidth: borderWidth,\n          borderRightWidth: 0,\n          width,\n        },\n        ['&[data-notch-outline-item=\"middle\"]']: {\n          borderWidth: 0,\n          borderBottomWidth: borderWidth,\n        },\n        ['&[data-notch-outline-item=\"end\"]']: {\n          borderWidth: borderWidth,\n          borderLeft: 0,\n          borderTopRightRadius: borderRadius,\n          borderBottomRightRadius: borderRadius,\n          flex: 1,\n        },\n      };\n    }\n\n    const inactiveStyle = {\n      color: alpha('on.surface', 0.6),\n      borderColor: alpha('on.surface', 0.38),\n      ...borderStyling(borderRadius, borderWidth),\n    };\n\n    const hoverStyle = {\n      borderColor: alpha('on.surface', 0.87),\n      color: alpha('on.surface', 0.6),\n    };\n\n    const focusStyle = {\n      borderColor: alpha(color, 0.87),\n      color: alpha(color, 0.87),\n      ...borderStyling(borderRadius, borderWidthWhenFocused),\n    };\n\n    const disabledStyle = {\n      borderColor: alpha('on.surface', 0.06),\n      color: alpha('on.surface', 0.38),\n    };\n\n    return css({\n      // notch items styles when not focused\n      ['[data-notch-outline-item]']: {\n        boxSizing: 'border-box',\n        borderStyle,\n        transition: `border-color .15s cubic-bezier(.4,0,.2,1)`,\n        ...(forceActive ? focusStyle : inactiveStyle),\n      },\n      // notch items styles when input is hovered\n      [makeSelector('hover:not([disabled]):not(:focus)')]: forceActive\n        ? focusStyle\n        : hoverStyle,\n      // notch items styles when input is focused\n      [makeSelector('focus:not([disabled])')]: focusStyle,\n      // notch items styles when input is disabled\n      [makeSelector('disabled')]: disabledStyle,\n    });\n  }\n);\n"],"file":"styledComponents.js"}
+{"version":3,"sources":["../../../src/NotchedOutline/styledComponents.ts"],"names":["rem","shouldForwardProp","css","alpha","EASING_STANDARD","NOTCH_PADDING","makeSelector","state","InnerContainer","color","borderRadiusPx","borderRadius","borderWidthPx","borderWidth","borderWidthWhenFocusedPx","borderWidthWhenFocused","borderStyle","notchStart","forceActive","width","borderStyling","borderTopLeftRadius","borderBottomLeftRadius","borderRightWidth","borderBottomWidth","borderLeft","borderTopRightRadius","borderBottomRightRadius","flex","inactiveStyle","borderColor","hoverStyle","focusStyle","disabledStyle","boxSizing","transition"],"mappings":"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","sourcesContent":["import styled from '@emotion/styled';\nimport { rem } from 'polished';\nimport shouldForwardProp from '@styled-system/should-forward-prop';\nimport { css } from '@styled-system/css';\n\nimport { alpha } from '../color';\nimport type { Theme } from '../theme';\nimport { EASING_STANDARD } from '../motion';\n\nexport const NOTCH_PADDING = 4;\n\nconst makeSelector = (\n  state:\n    | 'hover:not([disabled]):not(:focus)'\n    | 'focus:not([disabled])'\n    | 'disabled'\n) =>\n  `input:${state} ~ & [data-notch-outline-item],` +\n  `select:${state} ~ & [data-notch-outline-item],` +\n  `[role=\"button\"]:${state} ~ & [data-notch-outline-item],` +\n  `textarea:${state} ~ & [data-notch-outline-item]`;\n\nexport const InnerContainer = styled('div', {\n  shouldForwardProp,\n})<{\n  color?: string;\n  theme?: Theme;\n  borderRadius: number;\n  borderWidth: number;\n  borderWidthWhenFocused: number;\n  borderStyle: string;\n  notchStart: number;\n  forceActive?: boolean;\n}>(\n  {\n    position: 'absolute',\n    display: 'flex',\n    left: 0,\n    top: 0,\n    bottom: 0,\n    width: '100%',\n    height: '100%',\n    pointerEvents: 'none',\n  },\n  ({\n    color = 'on.surface',\n    borderRadius: borderRadiusPx,\n    borderWidth: borderWidthPx,\n    borderWidthWhenFocused: borderWidthWhenFocusedPx,\n    borderStyle,\n    notchStart,\n    forceActive = false,\n  }) => {\n    const width = rem(notchStart - NOTCH_PADDING);\n    const borderRadius = rem(borderRadiusPx);\n    const borderWidth = rem(borderWidthPx);\n    const borderWidthWhenFocused = rem(borderWidthWhenFocusedPx);\n\n    function borderStyling(borderRadius: string, borderWidth: string) {\n      return {\n        ['&[data-notch-outline-item=\"start\"]']: {\n          borderTopLeftRadius: borderRadius,\n          borderBottomLeftRadius: borderRadius,\n          borderWidth: borderWidth,\n          borderRightWidth: 0,\n          width,\n        },\n        ['&[data-notch-outline-item=\"middle\"]']: {\n          borderWidth: 0,\n          borderBottomWidth: borderWidth,\n        },\n        ['&[data-notch-outline-item=\"end\"]']: {\n          borderWidth: borderWidth,\n          borderLeft: 0,\n          borderTopRightRadius: borderRadius,\n          borderBottomRightRadius: borderRadius,\n          flex: 1,\n        },\n      };\n    }\n\n    const inactiveStyle = {\n      color: 'on.surface-variant',\n      borderColor: 'outline',\n      ...borderStyling(borderRadius, borderWidth),\n    };\n\n    const hoverStyle = {\n      borderColor: 'on.surface',\n      color: 'on.surface-variant',\n    };\n\n    const focusStyle = {\n      borderColor: color,\n      color: alpha(color, 0.87),\n      ...borderStyling(borderRadius, borderWidthWhenFocused),\n    };\n\n    const disabledStyle = {\n      borderColor: alpha('on.surface', 0.06),\n      color: alpha('on.surface', 0.38),\n    };\n\n    return css({\n      // notch items styles when not focused\n      ['[data-notch-outline-item]']: {\n        boxSizing: 'border-box',\n        borderStyle,\n        transition: `border-color .15s ${EASING_STANDARD}`,\n        ...(forceActive ? focusStyle : inactiveStyle),\n      },\n      // notch items styles when input is hovered\n      [makeSelector('hover:not([disabled]):not(:focus)')]: forceActive\n        ? focusStyle\n        : hoverStyle,\n      // notch items styles when input is focused\n      [makeSelector('focus:not([disabled])')]: focusStyle,\n      // notch items styles when input is disabled\n      [makeSelector('disabled')]: disabledStyle,\n    });\n  }\n);\n"],"file":"styledComponents.js"}

package/build/esm/Paper/Paper.d.ts

@@ -1,10 +1,11 @@
-import type * as React from 'react';
-import { BoxProps } from '../Box';
+import type { ElementType, ReactNode } from 'react';
+import type { BoxProps } from '../Box';
 export interface PaperProps extends BoxProps {
-    as?: React.ElementType<any>;
+    as?: ElementType<any>;
     elevation?: number;
     outlined?: boolean;
     backgroundOverlay?: number | string;
-    children?: React.ReactNode;
+    darkThemeBackgroundOverlay?: number | string;
+    children?: ReactNode;
 }
-export declare const Paper: React.ForwardRefExoticComponent<Pick<PaperProps, "children" | "p" | "slot" | "style" | "title" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxShadow" | "color" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "textAlign" | "textShadow" | "top" | "translate" | "verticalAlign" | "width" | "zIndex" | "background" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "gridColumnGap" | "gridGap" | "gridRowGap" | "bg" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "variant" | "size" | "elevation" | "hidden" | "as" | "sx" | "__css" | "tx" | "theme" | "borderX" | "borderY" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "outlined" | "backgroundOverlay" | "key"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Paper: import("react").ForwardRefExoticComponent<Pick<PaperProps, "children" | "p" | "slot" | "style" | "title" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxShadow" | "color" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "textAlign" | "textShadow" | "top" | "translate" | "verticalAlign" | "width" | "zIndex" | "background" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "gridColumnGap" | "gridGap" | "gridRowGap" | "bg" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "hidden" | "theme" | "sx" | "__css" | "variant" | "tx" | "as" | "size" | "borderX" | "borderY" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "elevation" | "outlined" | "backgroundOverlay" | "darkThemeBackgroundOverlay"> & import("react").RefAttributes<HTMLDivElement>>;