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

package/build/cjs/index.js

@@ -23,7 +23,26 @@ var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(
 var _styled__default = /*#__PURE__*/_interopDefaultLegacy(_styled);
 var shouldForwardProp__default = /*#__PURE__*/_interopDefaultLegacy(shouldForwardProp);
 
+const EASING_EMPHASIZED = 'cubic-bezier(0.2, 0, 0, 1)';
+const EASING_EMPHASIZED_ACCELERATE = 'cubic-bezier(0.3, 0, 0.8, 0.15)';
+const EASING_EMPHASIZED_DECELERATE = 'cubic-bezier(0.05, 0.7, 0.1, 1)';
+const EASING_LINEAR = 'cubic-bezier(0, 0, 1, 1)';
+const EASING_STANDARD = 'cubic-bezier(0.2, 0, 0, 1)';
+const EASING_STANDARD_ACCELERATE = 'cubic-bezier(0.3, 0, 1, 1)';
+const EASING_STANDARD_DECELERATE = 'cubic-bezier(0, 0, 0, 1)';
+
 // material theme preset
+
+function font(fontFamily, lineHeight, fontSize, letterSpacing, weight) {
+  return {
+    fontFamily,
+    lineHeight: polished.rem(lineHeight),
+    fontSize: polished.rem(fontSize),
+    letterSpacing: polished.rem(letterSpacing),
+    fontWeight: weight
+  };
+}
+
 const theme = {
   googleFonts: 'https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:300,400,500,600,700&display=swap',
   colors: {
@@ -141,6 +160,8 @@ const theme = {
   fonts: {
     body: 'Roboto, sans-serif',
     heading: 'Roboto, sans-serif',
+    brand: 'Roboto, sans-serif',
+    plain: 'Roboto, sans-serif',
     monospace: '"Roboto Mono", monospace'
   },
   fontSizes: {
@@ -190,6 +211,21 @@ const theme = {
       fontFamily: 'body',
       lineHeight: 'body'
     },
+    'display-large': font('brand', 64, 57, 0, 400),
+    'display-medium': font('brand', 52, 45, 0, 400),
+    'display-small': font('brand', 44, 36, 0, 400),
+    'headline-large': font('brand', 40, 32, 0, 400),
+    'headline-medium': font('brand', 36, 28, 0, 400),
+    'headline-small': font('brand', 32, 24, 0, 400),
+    'title-large': font('brand', 28, 22, 0, 400),
+    'title-medium': font('plain', 24, 16, 0.15, 500),
+    'title-small': font('plain', 20, 14, 0.1, 500),
+    'label-large': font('plain', 20, 14, 0.1, 500),
+    'label-medium': font('plain', 16, 12, 0.5, 500),
+    'label-small': font('plain', 16, 11, 0.5, 500),
+    'body-large': font('plain', 24, 16, 0.5, 400),
+    'body-medium': font('plain', 20, 14, 0.25, 400),
+    'body-small': font('plain', 16, 12, 0.4, 400),
     h1: {
       variant: 'text.heading',
       fontWeight: 'light',
@@ -315,7 +351,7 @@ const theme = {
   buttons: {
     variants: {
       base: {
-        variant: 'text.button',
+        variant: 'text.label-large',
         boxShadow: 'none',
         py: 0,
         px: "1.5rem",
@@ -380,30 +416,36 @@ const theme = {
     elevations: {
       none: {},
       default: {
-        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
+        transition: `box-shadow .28s ${EASING_STANDARD}`,
         '&:hover': {
           boxShadow: 1
         },
-        '&:hover:disabled': {
+        '&:active,&:focus-visible,&:disabled': {
           boxShadow: 0
         }
       },
       elevated: {
-        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
+        transition: `box-shadow .28s ${EASING_STANDARD}`,
         boxShadow: 1,
         '&:hover': {
           boxShadow: 2
         },
+        '&:active,&:focus-visible': {
+          boxShadow: 1
+        },
         '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
           boxShadow: 0
         }
       },
       floating: {
-        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
+        transition: `box-shadow .28s ${EASING_STANDARD}`,
         boxShadow: 3,
         ':hover': {
           boxShadow: 4
         },
+        '&:active,&:focus-visible': {
+          boxShadow: 3
+        },
         '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
           boxShadow: 0
         }
@@ -444,7 +486,7 @@ const theme = {
         height: "2rem",
         borderRadius: 'small',
         outline: 'none',
-        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)'
+        transition: `box-shadow .28s ${EASING_STANDARD}`
       },
       filled: {
         variant: 'chips.variants.base',
@@ -536,7 +578,7 @@ const BoxBase = /*#__PURE__*/_styled__default['default']('div', process.env.NODE
   shouldForwardProp: shouldForwardProp__default['default'],
   target: "e25ivq30",
   label: "BoxBase"
-})("box-sizing:border-box;margin:0;min-width:0;", base, variant, sx, props => props.css, styledSystem.compose(styledSystem.space, styledSystem.layout, styledSystem.typography, styledSystem.color, styledSystem.flexbox, styledSystem.border, styledSystem.grid, styledSystem.background, styledSystem.position, styledSystem.shadow), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJveC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEZnQiIsImZpbGUiOiJCb3gudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB0eXBlIHsgQ1NTT2JqZWN0IH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHR5cGUge1xuICBTcGFjZVByb3BzLFxuICBMYXlvdXRQcm9wcyxcbiAgVHlwb2dyYXBoeVByb3BzLFxuICBDb2xvclByb3BzLFxuICBGbGV4Ym94UHJvcHMsXG4gIEJvcmRlclByb3BzLFxuICBHcmlkUHJvcHMsXG4gIEJhY2tncm91bmRQcm9wcyxcbiAgUG9zaXRpb25Qcm9wcyxcbiAgU2hhZG93UHJvcHMsXG4gIFJlc3BvbnNpdmVWYWx1ZSxcbn0gZnJvbSAnc3R5bGVkLXN5c3RlbSc7XG5pbXBvcnQge1xuICBjb21wb3NlLFxuICBzcGFjZSxcbiAgbGF5b3V0LFxuICB0eXBvZ3JhcGh5LFxuICBjb2xvcixcbiAgZmxleGJveCxcbiAgYm9yZGVyLFxuICBncmlkLFxuICBiYWNrZ3JvdW5kLFxuICBwb3NpdGlvbixcbiAgc2hhZG93LFxufSBmcm9tICdzdHlsZWQtc3lzdGVtJztcbmltcG9ydCB0eXBlIHtcbiAgU3lzdGVtU3R5bGVPYmplY3QsXG4gIFJlc3BvbnNpdmVTdHlsZVZhbHVlLFxufSBmcm9tICdAc3R5bGVkLXN5c3RlbS9jc3MnO1xuaW1wb3J0IHsgY3NzLCBnZXQgfSBmcm9tICdAc3R5bGVkLXN5c3RlbS9jc3MnO1xuaW1wb3J0IHNob3VsZEZvcndhcmRQcm9wIGZyb20gJ0BzdHlsZWQtc3lzdGVtL3Nob3VsZC1mb3J3YXJkLXByb3AnO1xuXG5pbXBvcnQgdHlwZSB7IFRoZW1lIH0gZnJvbSAnLi4vdGhlbWUnO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tICcuLi90aGVtZSc7XG5cbmV4cG9ydCB0eXBlIFN4U3R5bGVQcm9wID1cbiAgfCBTeXN0ZW1TdHlsZU9iamVjdFxuICB8IFJlY29yZDxcbiAgICAgIHN0cmluZyxcbiAgICAgIHwgU3lzdGVtU3R5bGVPYmplY3RcbiAgICAgIHwgUmVzcG9uc2l2ZVN0eWxlVmFsdWU8bnVtYmVyIHwgc3RyaW5nPlxuICAgICAgfCBSZWNvcmQ8XG4gICAgICAgICAgc3RyaW5nLFxuICAgICAgICAgIFN5c3RlbVN0eWxlT2JqZWN0IHwgUmVzcG9uc2l2ZVN0eWxlVmFsdWU8bnVtYmVyIHwgc3RyaW5nPlxuICAgICAgICA+XG4gICAgPjtcblxuZXhwb3J0IGludGVyZmFjZSBCYXNlUHJvcHMge1xuICBhcz86IFJlYWN0LkVsZW1lbnRUeXBlPGFueT47XG4gIHN4PzogU3hTdHlsZVByb3A7XG4gIC8vIGNzcz86IENTU09iamVjdCB8ICgocHJvcHM6IHsgdGhlbWU6IFRoZW1lIH0pID0+IENTU09iamVjdCk7XG4gIF9fY3NzPzogU3hTdHlsZVByb3A7XG4gIHZhcmlhbnQ/OiBSZXNwb25zaXZlVmFsdWU8c3RyaW5nPjtcbiAgdHg/OiBzdHJpbmc7XG4gIHRoZW1lOiBUaGVtZTtcbn1cbmV4cG9ydCBjb25zdCBzeCA9ICh7IHRoZW1lLCBzeCB9OiBCYXNlUHJvcHMpID0+IGNzcyhzeCkodGhlbWUpIGFzIENTU09iamVjdDtcbmV4cG9ydCBjb25zdCBiYXNlID0gKHsgdGhlbWUsIF9fY3NzIH06IEJhc2VQcm9wcykgPT5cbiAgY3NzKF9fY3NzKSh0aGVtZSkgYXMgQ1NTT2JqZWN0O1xuZXhwb3J0IGNvbnN0IHZhcmlhbnQgPSAoe1xuICB0aGVtZSxcbiAgdmFyaWFudCA9ICdkZWZhdWx0JyxcbiAgdHggPSAndmFyaWFudHMnLFxufTogQmFzZVByb3BzKSA9PlxuICBjc3MoZ2V0KHRoZW1lLCB0eCArICcuJyArIHZhcmlhbnQsIGdldCh0aGVtZSwgdmFyaWFudCBhcyBhbnkpKSkoXG4gICAgdGhlbWVcbiAgKSBhcyBDU1NPYmplY3Q7XG5cbnR5cGUgS25vd25Cb3hQcm9wcyA9IEJhc2VQcm9wcyAmXG4gIFNwYWNlUHJvcHMgJlxuICBMYXlvdXRQcm9wcyAmXG4gIFR5cG9ncmFwaHlQcm9wcyAmXG4gIENvbG9yUHJvcHMgJlxuICBGbGV4Ym94UHJvcHMgJlxuICBCb3JkZXJQcm9wcyAmXG4gIEdyaWRQcm9wcyAmXG4gIEJhY2tncm91bmRQcm9wcyAmXG4gIFBvc2l0aW9uUHJvcHMgJlxuICBTaGFkb3dQcm9wcyAmIHsgekluZGV4PzogbnVtYmVyIHwgc3RyaW5nIH07XG5cbmV4cG9ydCB0eXBlIEJveFByb3BzPFxuICBIID0gSFRNTERpdkVsZW1lbnQsXG4gIEF0dHIgZXh0ZW5kcyBSZWFjdC5IVE1MQXR0cmlidXRlczxIPiA9IFJlYWN0LkhUTUxBdHRyaWJ1dGVzPEg+XG4+ID0gT21pdDxBdHRyLCBrZXlvZiBLbm93bkJveFByb3BzPiAmXG4gIFBhcnRpYWw8S25vd25Cb3hQcm9wcz4gJlxuICBSZWFjdC5SZWZBdHRyaWJ1dGVzPEg+O1xuXG5jb25zdCBCb3hCYXNlID0gc3R5bGVkKCdkaXYnIGFzIHVua25vd24gYXMgUmVhY3QuRkMsIHtcbiAgc2hvdWxkRm9yd2FyZFByb3AsXG59KTxCb3hQcm9wczxIVE1MRGl2RWxlbWVudD4+KFxuICB7XG4gICAgYm94U2l6aW5nOiAnYm9yZGVyLWJveCcsXG4gICAgbWFyZ2luOiAwLFxuICAgIG1pbldpZHRoOiAwLFxuICB9LFxuICBiYXNlLFxuICB2YXJpYW50LFxuICBzeCxcbiAgKHByb3BzOiBhbnkpID0+IHByb3BzLmNzcyxcbiAgY29tcG9zZShcbiAgICBzcGFjZSxcbiAgICBsYXlvdXQsXG4gICAgdHlwb2dyYXBoeSxcbiAgICBjb2xvcixcbiAgICBmbGV4Ym94LFxuICAgIGJvcmRlcixcbiAgICBncmlkLFxuICAgIGJhY2tncm91bmQsXG4gICAgcG9zaXRpb24sXG4gICAgc2hhZG93XG4gIClcbik7XG5cbmV4cG9ydCBjb25zdCBCb3g6IDxcbiAgUHJvcHMgPSBCb3hQcm9wczxIVE1MRGl2RWxlbWVudCwgUmVhY3QuSFRNTEF0dHJpYnV0ZXM8SFRNTERpdkVsZW1lbnQ+PlxuPihcbiAgcHJvcHM6IFByb3BzXG4pID0+IEpTWC5FbGVtZW50ID0gZm9yd2FyZFJlZjxIVE1MRGl2RWxlbWVudCwgQm94UHJvcHM8SFRNTERpdkVsZW1lbnQ+PihcbiAgZnVuY3Rpb24gQm94KHByb3BzLCBmb3J3YXJkZWRSZWYpIHtcbiAgICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgICByZXR1cm4gPEJveEJhc2UgcmVmPXtmb3J3YXJkZWRSZWZ9IHRoZW1lPXt0aGVtZX0gey4uLnByb3BzfSAvPjtcbiAgfVxuKSBhcyBhbnk7XG4iXX0= */");
+})("box-sizing:border-box;margin:0;min-width:0;", base, variant, sx, props => props.css, styledSystem.compose(styledSystem.space, styledSystem.layout, styledSystem.typography, styledSystem.color, styledSystem.flexbox, styledSystem.border, styledSystem.grid, styledSystem.background, styledSystem.position, styledSystem.shadow), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJveC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMEZnQiIsImZpbGUiOiJCb3gudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBFbGVtZW50VHlwZSwgRkMsIEhUTUxBdHRyaWJ1dGVzLCBSZWZBdHRyaWJ1dGVzIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB0eXBlIHsgQ1NTT2JqZWN0IH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHR5cGUge1xuICBTcGFjZVByb3BzLFxuICBMYXlvdXRQcm9wcyxcbiAgVHlwb2dyYXBoeVByb3BzLFxuICBDb2xvclByb3BzLFxuICBGbGV4Ym94UHJvcHMsXG4gIEJvcmRlclByb3BzLFxuICBHcmlkUHJvcHMsXG4gIEJhY2tncm91bmRQcm9wcyxcbiAgUG9zaXRpb25Qcm9wcyxcbiAgU2hhZG93UHJvcHMsXG4gIFJlc3BvbnNpdmVWYWx1ZSxcbn0gZnJvbSAnc3R5bGVkLXN5c3RlbSc7XG5pbXBvcnQge1xuICBjb21wb3NlLFxuICBzcGFjZSxcbiAgbGF5b3V0LFxuICB0eXBvZ3JhcGh5LFxuICBjb2xvcixcbiAgZmxleGJveCxcbiAgYm9yZGVyLFxuICBncmlkLFxuICBiYWNrZ3JvdW5kLFxuICBwb3NpdGlvbixcbiAgc2hhZG93LFxufSBmcm9tICdzdHlsZWQtc3lzdGVtJztcbmltcG9ydCB0eXBlIHtcbiAgU3lzdGVtU3R5bGVPYmplY3QsXG4gIFJlc3BvbnNpdmVTdHlsZVZhbHVlLFxufSBmcm9tICdAc3R5bGVkLXN5c3RlbS9jc3MnO1xuaW1wb3J0IHsgY3NzLCBnZXQgfSBmcm9tICdAc3R5bGVkLXN5c3RlbS9jc3MnO1xuaW1wb3J0IHNob3VsZEZvcndhcmRQcm9wIGZyb20gJ0BzdHlsZWQtc3lzdGVtL3Nob3VsZC1mb3J3YXJkLXByb3AnO1xuXG5pbXBvcnQgdHlwZSB7IFRoZW1lIH0gZnJvbSAnLi4vdGhlbWUnO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tICcuLi90aGVtZSc7XG5cbmV4cG9ydCB0eXBlIFN4U3R5bGVQcm9wID1cbiAgfCBTeXN0ZW1TdHlsZU9iamVjdFxuICB8IFJlY29yZDxcbiAgICAgIHN0cmluZyxcbiAgICAgIHwgU3lzdGVtU3R5bGVPYmplY3RcbiAgICAgIHwgUmVzcG9uc2l2ZVN0eWxlVmFsdWU8bnVtYmVyIHwgc3RyaW5nPlxuICAgICAgfCBSZWNvcmQ8XG4gICAgICAgICAgc3RyaW5nLFxuICAgICAgICAgIFN5c3RlbVN0eWxlT2JqZWN0IHwgUmVzcG9uc2l2ZVN0eWxlVmFsdWU8bnVtYmVyIHwgc3RyaW5nPlxuICAgICAgICA+XG4gICAgPjtcblxuZXhwb3J0IGludGVyZmFjZSBCYXNlUHJvcHMge1xuICBhcz86IEVsZW1lbnRUeXBlPGFueT47XG4gIHN4PzogU3hTdHlsZVByb3A7XG4gIC8vIGNzcz86IENTU09iamVjdCB8ICgocHJvcHM6IHsgdGhlbWU6IFRoZW1lIH0pID0+IENTU09iamVjdCk7XG4gIF9fY3NzPzogU3hTdHlsZVByb3A7XG4gIHZhcmlhbnQ/OiBSZXNwb25zaXZlVmFsdWU8c3RyaW5nPjtcbiAgdHg/OiBzdHJpbmc7XG4gIHRoZW1lOiBUaGVtZTtcbn1cbmV4cG9ydCBjb25zdCBzeCA9ICh7IHRoZW1lLCBzeCB9OiBCYXNlUHJvcHMpID0+IGNzcyhzeCkodGhlbWUpIGFzIENTU09iamVjdDtcbmV4cG9ydCBjb25zdCBiYXNlID0gKHsgdGhlbWUsIF9fY3NzIH06IEJhc2VQcm9wcykgPT5cbiAgY3NzKF9fY3NzKSh0aGVtZSkgYXMgQ1NTT2JqZWN0O1xuZXhwb3J0IGNvbnN0IHZhcmlhbnQgPSAoe1xuICB0aGVtZSxcbiAgdmFyaWFudCA9ICdkZWZhdWx0JyxcbiAgdHggPSAndmFyaWFudHMnLFxufTogQmFzZVByb3BzKSA9PlxuICBjc3MoZ2V0KHRoZW1lLCB0eCArICcuJyArIHZhcmlhbnQsIGdldCh0aGVtZSwgdmFyaWFudCBhcyBhbnkpKSkoXG4gICAgdGhlbWVcbiAgKSBhcyBDU1NPYmplY3Q7XG5cbnR5cGUgS25vd25Cb3hQcm9wcyA9IEJhc2VQcm9wcyAmXG4gIFNwYWNlUHJvcHMgJlxuICBMYXlvdXRQcm9wcyAmXG4gIFR5cG9ncmFwaHlQcm9wcyAmXG4gIENvbG9yUHJvcHMgJlxuICBGbGV4Ym94UHJvcHMgJlxuICBCb3JkZXJQcm9wcyAmXG4gIEdyaWRQcm9wcyAmXG4gIEJhY2tncm91bmRQcm9wcyAmXG4gIFBvc2l0aW9uUHJvcHMgJlxuICBTaGFkb3dQcm9wcyAmIHsgekluZGV4PzogbnVtYmVyIHwgc3RyaW5nIH07XG5cbmV4cG9ydCB0eXBlIEJveFByb3BzPFxuICBIID0gSFRNTERpdkVsZW1lbnQsXG4gIEF0dHIgZXh0ZW5kcyBIVE1MQXR0cmlidXRlczxIPiA9IEhUTUxBdHRyaWJ1dGVzPEg+XG4+ID0gT21pdDxBdHRyLCBrZXlvZiBLbm93bkJveFByb3BzPiAmIFBhcnRpYWw8S25vd25Cb3hQcm9wcz4gJiBSZWZBdHRyaWJ1dGVzPEg+O1xuXG5jb25zdCBCb3hCYXNlID0gc3R5bGVkKCdkaXYnIGFzIHVua25vd24gYXMgRkMsIHtcbiAgc2hvdWxkRm9yd2FyZFByb3AsXG59KTxCb3hQcm9wczxIVE1MRGl2RWxlbWVudD4+KFxuICB7XG4gICAgYm94U2l6aW5nOiAnYm9yZGVyLWJveCcsXG4gICAgbWFyZ2luOiAwLFxuICAgIG1pbldpZHRoOiAwLFxuICB9LFxuICBiYXNlLFxuICB2YXJpYW50LFxuICBzeCxcbiAgKHByb3BzOiBhbnkpID0+IHByb3BzLmNzcyxcbiAgY29tcG9zZShcbiAgICBzcGFjZSxcbiAgICBsYXlvdXQsXG4gICAgdHlwb2dyYXBoeSxcbiAgICBjb2xvcixcbiAgICBmbGV4Ym94LFxuICAgIGJvcmRlcixcbiAgICBncmlkLFxuICAgIGJhY2tncm91bmQsXG4gICAgcG9zaXRpb24sXG4gICAgc2hhZG93XG4gIClcbik7XG5cbmV4cG9ydCBjb25zdCBCb3g6IDxcbiAgUHJvcHMgPSBCb3hQcm9wczxIVE1MRGl2RWxlbWVudCwgSFRNTEF0dHJpYnV0ZXM8SFRNTERpdkVsZW1lbnQ+PlxuPihcbiAgcHJvcHM6IFByb3BzXG4pID0+IEpTWC5FbGVtZW50ID0gZm9yd2FyZFJlZjxIVE1MRGl2RWxlbWVudCwgQm94UHJvcHM8SFRNTERpdkVsZW1lbnQ+PihcbiAgZnVuY3Rpb24gQm94KHByb3BzLCBmb3J3YXJkZWRSZWYpIHtcbiAgICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgICByZXR1cm4gPEJveEJhc2UgcmVmPXtmb3J3YXJkZWRSZWZ9IHRoZW1lPXt0aGVtZX0gey4uLnByb3BzfSAvPjtcbiAgfVxuKSBhcyBhbnk7XG4iXX0= */");
 
 const Box = /*#__PURE__*/react$1.forwardRef(function Box(props, forwardedRef) {
   const theme = useTheme();
@@ -689,11 +731,16 @@ const alpha = (colorString, alphaValue) => theme => {
   const rgb = polished.parseToRgb(color);
   return `rgba(${rgb.red},${rgb.green},${rgb.blue},${alphaValue})`;
 };
+function mixColor(baseColor, overlayColor, overlayOpacity) {
+  return theme => {
+    baseColor = css.get(theme, `colors.${baseColor}`, baseColor);
+    overlayColor = overlayOpacity ? alpha(overlayColor, overlayOpacity)(theme) : css.get(theme, `colors.${overlayColor}`, overlayColor);
+    return `linear-gradient(${overlayColor}, ${overlayColor}), ${baseColor}`;
+  };
+}
 function getColorOverlay(theme, baseColor, overlayColor, overlayOpacity) {
-  baseColor = css.get(theme, `colors.${baseColor}`) || baseColor;
-  overlayColor = alpha(overlayColor, overlayOpacity)(theme);
   return {
-    background: `linear-gradient(${overlayColor}, ${overlayColor}), ${baseColor}`
+    background: mixColor(baseColor, overlayColor, overlayOpacity)(theme)
   };
 }
 function getBackgroundOverlay(theme, backgroundOverlay, overlayColor = 'on.surface') {
@@ -792,7 +839,7 @@ const AppBar = /*#__PURE__*/react$1.forwardRef(function AppBar(props, forwardedR
         alignItems: 'center',
         width: '100%',
         overflow: 'hidden',
-        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)'
+        transition: `box-shadow .28s ${EASING_STANDARD}`
       }, css.get(theme, `appbar.sizes.${size}`), css.get(theme, `appbar.variants.${variantProp}`), __css)
     }, otherProps))
   });
@@ -931,10 +978,10 @@ const FilledButton = /*#__PURE__*/_styled__default['default'](BaseButton, proces
     outlineOffset: '2px'
   }
 }), ({
-  color = 'primary',
-  elevation = 'none',
-  theme
-}) => color === 'surface' && _extends__default['default']({}, getBackgroundOverlay(theme, css.get(theme, `buttons.elevations.${elevation}.boxShadow`, 0), 'primary')), ({
+  color = 'primary'
+}) => color === 'surface' && css.css({
+  background: mixColor('surface', 'primary', 0.05)
+}), ({
   color = 'primary',
   theme,
   isGroupedButton = false
@@ -960,7 +1007,7 @@ const FilledButton = /*#__PURE__*/_styled__default['default'](BaseButton, proces
       borderLeftWidth: 0
     }
   }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZpbGxlZEJ1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUTRCIiwiZmlsZSI6IkZpbGxlZEJ1dHRvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyByZWFkYWJsZUNvbG9yLCByZW0gfSBmcm9tICdwb2xpc2hlZCc7XG5pbXBvcnQgeyBnZXQsIGNzcyB9IGZyb20gJ0BzdHlsZWQtc3lzdGVtL2Nzcyc7XG5cbmltcG9ydCB7IEJhc2VCdXR0b24gfSBmcm9tICcuL0Jhc2VCdXR0b24nO1xuaW1wb3J0IHR5cGUgeyBUaGVtZSB9IGZyb20gJy4uL3RoZW1lJztcbmltcG9ydCB7IGFscGhhLCBnZXRCYWNrZ3JvdW5kT3ZlcmxheSB9IGZyb20gJy4uL2NvbG9yJztcblxuZXhwb3J0IGNvbnN0IEZpbGxlZEJ1dHRvbiA9IHN0eWxlZChCYXNlQnV0dG9uKShcbiAgKHsgY29sb3IgPSAncHJpbWFyeScsIHRoZW1lIH0pID0+XG4gICAgY3NzKHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogZ2V0KHRoZW1lLCBgY29sb3JzLiR7U3RyaW5nKGNvbG9yKX1gKSB8fCBjb2xvcixcbiAgICAgIGNvbG9yOlxuICAgICAgICBnZXQodGhlbWUsIGBjb2xvcnMub24uJHtTdHJpbmcoY29sb3IpfWApIHx8XG4gICAgICAgICh0eXBlb2YgY29sb3IgPT09ICdzdHJpbmcnID8gcmVhZGFibGVDb2xvcihjb2xvcikgOiB1bmRlZmluZWQpLFxuICAgICAgJyY6ZGlzYWJsZWQnOiB7XG4gICAgICAgIGNvbG9yOiBhbHBoYSgnb24uc3VyZmFjZScsIDAuMzgpLFxuICAgICAgICBiYWNrZ3JvdW5kOiBgbGluZWFyLWdyYWRpZW50KCR7Z2V0KHRoZW1lLCAnY29sb3JzLnN1cmZhY2UnKX0sICR7Z2V0KFxuICAgICAgICAgIHRoZW1lLFxuICAgICAgICAgICdjb2xvcnMuc3VyZmFjZSdcbiAgICAgICAgKX0pLCAke2FscGhhKCdvbi5zdXJmYWNlJywgMC4xMikodGhlbWUpfWAsXG4gICAgICAgIGJhY2tncm91bmRCbGVuZE1vZGU6ICdvdmVybGF5JyxcbiAgICAgICAgY3Vyc29yOiAnZGVmYXVsdCcsXG4gICAgICB9LFxuICAgICAgJyY6Zm9jdXMtdmlzaWJsZSc6IHtcbiAgICAgICAgb3V0bGluZUNvbG9yOiBnZXQodGhlbWUsIGBjb2xvcnMuJHtTdHJpbmcoY29sb3IpfWApIHx8IGNvbG9yLFxuICAgICAgICBvdXRsaW5lV2lkdGg6IDIsXG4gICAgICAgIG91dGxpbmVTdHlsZTogJ2F1dG8nLFxuICAgICAgICBvdXRsaW5lT2Zmc2V0OiAnMnB4JyxcbiAgICAgIH0sXG4gICAgfSksXG4gICh7IGNvbG9yID0gJ3ByaW1hcnknLCBlbGV2YXRpb24gPSAnbm9uZScsIHRoZW1lIH0pID0+XG4gICAgY29sb3IgPT09ICdzdXJmYWNlJyAmJiB7XG4gICAgICAuLi5nZXRCYWNrZ3JvdW5kT3ZlcmxheShcbiAgICAgICAgdGhlbWUsXG4gICAgICAgIGdldCh0aGVtZSwgYGJ1dHRvbnMuZWxldmF0aW9ucy4ke2VsZXZhdGlvbn0uYm94U2hhZG93YCwgMCksXG4gICAgICAgICdwcmltYXJ5J1xuICAgICAgKSxcbiAgICB9LFxuICAoeyBjb2xvciA9ICdwcmltYXJ5JywgdGhlbWUsIGlzR3JvdXBlZEJ1dHRvbiA9IGZhbHNlIH0pID0+XG4gICAgaXNHcm91cGVkQnV0dG9uICYmIHtcbiAgICAgICdbZGF0YS1idXR0b24tZ3JvdXA9XCJcIl0gJic6IHtcbiAgICAgICAgYm9yZGVyQ29sb3I6XG4gICAgICAgICAgZ2V0KHRoZW1lLCBgY29sb3JzLm9uLiR7U3RyaW5nKGNvbG9yKX1gKSB8fFxuICAgICAgICAgICh0eXBlb2YgY29sb3IgPT09ICdzdHJpbmcnID8gcmVhZGFibGVDb2xvcihjb2xvcikgOiB1bmRlZmluZWQpLFxuICAgICAgICAnOmZpcnN0LW9mLXR5cGUnOiB7XG4gICAgICAgICAgYm9yZGVyVG9wUmlnaHRSYWRpdXM6IDAsXG4gICAgICAgICAgYm9yZGVyQm90dG9tUmlnaHRSYWRpdXM6IDAsXG4gICAgICAgICAgYm9yZGVyUmlnaHRTdHlsZTogJ3NvbGlkJyxcbiAgICAgICAgICBib3JkZXJSaWdodFdpZHRoOiByZW0oMSksXG4gICAgICAgIH0sXG4gICAgICAgICc6bm90KDpmaXJzdC1vZi10eXBlKTpub3QoOmxhc3Qtb2YtdHlwZSknOiB7XG4gICAgICAgICAgYm9yZGVyUmFkaXVzOiAwLFxuICAgICAgICB9LFxuICAgICAgICAnOmxhc3Qtb2YtdHlwZSc6IHtcbiAgICAgICAgICBib3JkZXJUb3BMZWZ0UmFkaXVzOiAwLFxuICAgICAgICAgIGJvcmRlckJvdHRvbUxlZnRSYWRpdXM6IDAsXG4gICAgICAgICAgYm9yZGVyTGVmdFN0eWxlOiAnc29saWQnLFxuICAgICAgICAgIGJvcmRlckxlZnRXaWR0aDogcmVtKDEpLFxuICAgICAgICB9LFxuICAgICAgICAnOmxhc3Qtb2YtdHlwZTpudGgtb2YtdHlwZSgyKSc6IHtcbiAgICAgICAgICBib3JkZXJMZWZ0V2lkdGg6IDAsXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgIH1cbik7XG5cbmV4cG9ydCBmdW5jdGlvbiBnZXRSaXBwbGVQcm9wZXJ0aWVzKHRoZW1lOiBUaGVtZSkge1xuICByZXR1cm4ge1xuICAgIGhvdmVyT3BhY2l0eTogZ2V0KHRoZW1lLCBgYnV0dG9ucy5vdmVybGF5cy5maWxsZWQuaG92ZXIub3BhY2l0eWApLFxuICAgIGZvY3VzT3BhY2l0eTogZ2V0KHRoZW1lLCBgYnV0dG9ucy5vdmVybGF5cy5maWxsZWQuZm9jdXMub3BhY2l0eWApLFxuICAgIHByZXNzZWRPcGFjaXR5OiBnZXQodGhlbWUsIGBidXR0b25zLm92ZXJsYXlzLmZpbGxlZC5wcmVzc2VkLm9wYWNpdHlgKSxcbiAgICByaXBwbGVFbmFibGVkOiBmYWxzZSxcbiAgfTtcbn1cbiJdfQ== */");
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZpbGxlZEJ1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUTRCIiwiZmlsZSI6IkZpbGxlZEJ1dHRvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyByZWFkYWJsZUNvbG9yLCByZW0gfSBmcm9tICdwb2xpc2hlZCc7XG5pbXBvcnQgeyBnZXQsIGNzcyB9IGZyb20gJ0BzdHlsZWQtc3lzdGVtL2Nzcyc7XG5cbmltcG9ydCB7IEJhc2VCdXR0b24gfSBmcm9tICcuL0Jhc2VCdXR0b24nO1xuaW1wb3J0IHR5cGUgeyBUaGVtZSB9IGZyb20gJy4uL3RoZW1lJztcbmltcG9ydCB7IGFscGhhLCBtaXhDb2xvciB9IGZyb20gJy4uL2NvbG9yJztcblxuZXhwb3J0IGNvbnN0IEZpbGxlZEJ1dHRvbiA9IHN0eWxlZChCYXNlQnV0dG9uKShcbiAgKHsgY29sb3IgPSAncHJpbWFyeScsIHRoZW1lIH0pID0+XG4gICAgY3NzKHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogZ2V0KHRoZW1lLCBgY29sb3JzLiR7U3RyaW5nKGNvbG9yKX1gKSB8fCBjb2xvcixcbiAgICAgIGNvbG9yOlxuICAgICAgICBnZXQodGhlbWUsIGBjb2xvcnMub24uJHtTdHJpbmcoY29sb3IpfWApIHx8XG4gICAgICAgICh0eXBlb2YgY29sb3IgPT09ICdzdHJpbmcnID8gcmVhZGFibGVDb2xvcihjb2xvcikgOiB1bmRlZmluZWQpLFxuICAgICAgJyY6ZGlzYWJsZWQnOiB7XG4gICAgICAgIGNvbG9yOiBhbHBoYSgnb24uc3VyZmFjZScsIDAuMzgpLFxuICAgICAgICBiYWNrZ3JvdW5kOiBgbGluZWFyLWdyYWRpZW50KCR7Z2V0KHRoZW1lLCAnY29sb3JzLnN1cmZhY2UnKX0sICR7Z2V0KFxuICAgICAgICAgIHRoZW1lLFxuICAgICAgICAgICdjb2xvcnMuc3VyZmFjZSdcbiAgICAgICAgKX0pLCAke2FscGhhKCdvbi5zdXJmYWNlJywgMC4xMikodGhlbWUpfWAsXG4gICAgICAgIGJhY2tncm91bmRCbGVuZE1vZGU6ICdvdmVybGF5JyxcbiAgICAgICAgY3Vyc29yOiAnZGVmYXVsdCcsXG4gICAgICB9LFxuICAgICAgJyY6Zm9jdXMtdmlzaWJsZSc6IHtcbiAgICAgICAgb3V0bGluZUNvbG9yOiBnZXQodGhlbWUsIGBjb2xvcnMuJHtTdHJpbmcoY29sb3IpfWApIHx8IGNvbG9yLFxuICAgICAgICBvdXRsaW5lV2lkdGg6IDIsXG4gICAgICAgIG91dGxpbmVTdHlsZTogJ2F1dG8nLFxuICAgICAgICBvdXRsaW5lT2Zmc2V0OiAnMnB4JyxcbiAgICAgIH0sXG4gICAgfSksXG4gICh7IGNvbG9yID0gJ3ByaW1hcnknIH0pID0+XG4gICAgY29sb3IgPT09ICdzdXJmYWNlJyAmJlxuICAgIGNzcyh7IGJhY2tncm91bmQ6IG1peENvbG9yKCdzdXJmYWNlJywgJ3ByaW1hcnknLCAwLjA1KSB9KSxcbiAgKHsgY29sb3IgPSAncHJpbWFyeScsIHRoZW1lLCBpc0dyb3VwZWRCdXR0b24gPSBmYWxzZSB9KSA9PlxuICAgIGlzR3JvdXBlZEJ1dHRvbiAmJiB7XG4gICAgICAnW2RhdGEtYnV0dG9uLWdyb3VwPVwiXCJdICYnOiB7XG4gICAgICAgIGJvcmRlckNvbG9yOlxuICAgICAgICAgIGdldCh0aGVtZSwgYGNvbG9ycy5vbi4ke1N0cmluZyhjb2xvcil9YCkgfHxcbiAgICAgICAgICAodHlwZW9mIGNvbG9yID09PSAnc3RyaW5nJyA/IHJlYWRhYmxlQ29sb3IoY29sb3IpIDogdW5kZWZpbmVkKSxcbiAgICAgICAgJzpmaXJzdC1vZi10eXBlJzoge1xuICAgICAgICAgIGJvcmRlclRvcFJpZ2h0UmFkaXVzOiAwLFxuICAgICAgICAgIGJvcmRlckJvdHRvbVJpZ2h0UmFkaXVzOiAwLFxuICAgICAgICAgIGJvcmRlclJpZ2h0U3R5bGU6ICdzb2xpZCcsXG4gICAgICAgICAgYm9yZGVyUmlnaHRXaWR0aDogcmVtKDEpLFxuICAgICAgICB9LFxuICAgICAgICAnOm5vdCg6Zmlyc3Qtb2YtdHlwZSk6bm90KDpsYXN0LW9mLXR5cGUpJzoge1xuICAgICAgICAgIGJvcmRlclJhZGl1czogMCxcbiAgICAgICAgfSxcbiAgICAgICAgJzpsYXN0LW9mLXR5cGUnOiB7XG4gICAgICAgICAgYm9yZGVyVG9wTGVmdFJhZGl1czogMCxcbiAgICAgICAgICBib3JkZXJCb3R0b21MZWZ0UmFkaXVzOiAwLFxuICAgICAgICAgIGJvcmRlckxlZnRTdHlsZTogJ3NvbGlkJyxcbiAgICAgICAgICBib3JkZXJMZWZ0V2lkdGg6IHJlbSgxKSxcbiAgICAgICAgfSxcbiAgICAgICAgJzpsYXN0LW9mLXR5cGU6bnRoLW9mLXR5cGUoMiknOiB7XG4gICAgICAgICAgYm9yZGVyTGVmdFdpZHRoOiAwLFxuICAgICAgICB9LFxuICAgICAgfSxcbiAgICB9XG4pO1xuXG5leHBvcnQgZnVuY3Rpb24gZ2V0UmlwcGxlUHJvcGVydGllcyh0aGVtZTogVGhlbWUpIHtcbiAgcmV0dXJuIHtcbiAgICBob3Zlck9wYWNpdHk6IGdldCh0aGVtZSwgYGJ1dHRvbnMub3ZlcmxheXMuZmlsbGVkLmhvdmVyLm9wYWNpdHlgKSxcbiAgICBmb2N1c09wYWNpdHk6IGdldCh0aGVtZSwgYGJ1dHRvbnMub3ZlcmxheXMuZmlsbGVkLmZvY3VzLm9wYWNpdHlgKSxcbiAgICBwcmVzc2VkT3BhY2l0eTogZ2V0KHRoZW1lLCBgYnV0dG9ucy5vdmVybGF5cy5maWxsZWQucHJlc3NlZC5vcGFjaXR5YCksXG4gICAgcmlwcGxlRW5hYmxlZDogZmFsc2UsXG4gIH07XG59XG4iXX0= */");
 function getRippleProperties$2(theme) {
   return {
     hoverOpacity: css.get(theme, `buttons.overlays.filled.hover.opacity`),
@@ -1298,7 +1345,7 @@ function useRippleHandlers(opts) {
   }, rest);
 }
 
-function useRippleSurface(opts) {
+function useRippleSurface(opts = {}) {
   let {
     // eslint-disable-next-line prefer-const
     baseOpacity = 0,
@@ -1336,8 +1383,7 @@ function useRippleSurface(opts) {
     backgroundColor: rippleColor,
     disabled
   }, rippleProps));
-
-  const css$1 = _extends__default['default']({
+  const css$1 = react$1.useMemo(() => _extends__default['default']({
     overflow: 'hidden',
     position: 'relative',
     cursor: 'pointer',
@@ -1394,8 +1440,7 @@ function useRippleSurface(opts) {
     '&::after': _extends__default['default']({}, rippleStyle({
       animation
     }))
-  });
-
+  }), [animation, baseOpacity, focusOpacity, hoverOpacity, pressedOpacity, rippleColor, rippleEnabled]);
   return {
     style: _extends__default['default']({}, animationStyle, style),
     onKeyDown: core.wrapEvent(onKeyDown, handleKeyDown),
@@ -1556,7 +1601,7 @@ const mappings = {
 const Text = /*#__PURE__*/react$1.forwardRef(function Text(props, forwardedRef) {
   const {
     as,
-    variant = 'body1'
+    variant = 'body-medium'
   } = props,
         otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "variant"]);
 
@@ -1588,7 +1633,7 @@ const Alert = /*#__PURE__*/react$1.forwardRef(function Alert(props, forwardedRef
   return /*#__PURE__*/jsxRuntime.jsx(Text, _extends__default['default']({
     ref: forwardedRef,
     as: as,
-    variant: "body1",
+    variant: "body-medium",
     __css: _extends__default['default']({
       p: 3,
       bg: alpha(color, 0.1),
@@ -1920,8 +1965,8 @@ function useDialogAnimation(opts) {
     mode
   }, otherOpts));
   const scrimOpacity = state === 'open' ? 1 : 0;
-  const transition = `opacity ${timing}ms cubic-bezier(.4,0,.2,1),transform ${timing}ms cubic-bezier(.4,0,.2,1)`;
-  const scrimTransition = `opacity ${timing * 0.4 | 0}ms cubic-bezier(.4,0,.2,1)`;
+  const transition = `opacity ${timing}ms ${EASING_STANDARD},transform ${timing}ms ${EASING_STANDARD}`;
+  const scrimTransition = `opacity ${timing * 0.4 | 0}ms ${EASING_STANDARD}`;
   return {
     containerStyle: _extends__default['default']({}, style, {
       transition
@@ -1974,7 +2019,8 @@ const BottomSheetSurface = /*#__PURE__*/react$1.forwardRef(function BottomSheetS
     ref: forwardedRef,
     as: Paper,
     theme: theme,
-    elevation: 5,
+    elevation: 3,
+    darkThemeBackgroundOverlay: 3,
     __css: _extends__default['default']({
       position: 'absolute',
       bg: 'surface',
@@ -2076,7 +2122,7 @@ const Input = /*#__PURE__*/react$1.forwardRef(function Input(props, forwardedRef
       '::placeholder': {
         opacity: 0,
         color: variant === 'filled' ? alpha('on.surface-variant', 0.87) : alpha('on.surface-variant', 0.6),
-        transition: `opacity .18s cubic-bezier(.4,0,.2,1)`
+        transition: `opacity .18s ${EASING_STANDARD}`
       },
       ':disabled::placeholder': {
         color: alpha('on.surface', 0.38)
@@ -2140,7 +2186,7 @@ const FloatingLabel = /*#__PURE__*/react$1.forwardRef(function FloatingLabel(pro
   const transform = active ? `translate(${polished.rem(translateX)}, ${polished.rem(translateY)}) scale(${scale})` : undefined;
   return /*#__PURE__*/jsxRuntime.jsx(Text$1, _extends__default['default']({
     as: "label",
-    variant: "subtitle1",
+    variant: "body-large",
     ref: forwardedRef,
     __css: {
       position: 'absolute',
@@ -2150,7 +2196,7 @@ const FloatingLabel = /*#__PURE__*/react$1.forwardRef(function FloatingLabel(pro
       left: polished.rem(offsetX),
       height: typeof height === 'number' ? polished.rem(height) : height,
       transformOrigin: 'left center',
-      transition: `transform ${transitionTime}ms cubic-bezier(.4,0,.2,1), color ${transitionTime}ms cubic-bezier(.4,0,.2,1)`,
+      transition: `transform ${transitionTime}ms ${EASING_STANDARD}, color ${transitionTime}ms ${EASING_STANDARD}`,
       pointerEvents: 'none'
     },
     style: _extends__default['default']({
@@ -2212,7 +2258,7 @@ const LineRipple = /*#__PURE__*/react$1.forwardRef(function LineRipple(props, fo
       zIndex: 1,
       transform: 'scaleX(0)',
       transformOrigin: 'center center',
-      transition: `transform ${transitionDuration}ms cubic-bezier(.4,0,.2,1),opacity ${transitionDuration}ms cubic-bezier(.4,0,.2,1)`,
+      transition: `transform ${transitionDuration}ms ${EASING_STANDARD},opacity ${transitionDuration}ms ${EASING_STANDARD}`,
       opacity: 0
     }, __css)
   }, otherProps));
@@ -2402,7 +2448,7 @@ const InnerContainer = /*#__PURE__*/_styled__default['default']('div', process.e
     ['[data-notch-outline-item]']: _extends__default['default']({
       boxSizing: 'border-box',
       borderStyle,
-      transition: `border-color .15s cubic-bezier(.4,0,.2,1)`
+      transition: `border-color .15s ${EASING_STANDARD}`
     }, forceActive ? focusStyle : inactiveStyle),
     // notch items styles when input is hovered
     [makeSelector('hover:not([disabled]):not(:focus)')]: forceActive ? focusStyle : hoverStyle,
@@ -2411,7 +2457,7 @@ const InnerContainer = /*#__PURE__*/_styled__default['default']('div', process.e
     // notch items styles when input is disabled
     [makeSelector('disabled')]: disabledStyle
   });
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUI4QiIsImZpbGUiOiJzdHlsZWRDb21wb25lbnRzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgcmVtIH0gZnJvbSAncG9saXNoZWQnO1xuaW1wb3J0IHNob3VsZEZvcndhcmRQcm9wIGZyb20gJ0BzdHlsZWQtc3lzdGVtL3Nob3VsZC1mb3J3YXJkLXByb3AnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQHN0eWxlZC1zeXN0ZW0vY3NzJztcblxuaW1wb3J0IHsgYWxwaGEgfSBmcm9tICcuLi9jb2xvcic7XG5pbXBvcnQgdHlwZSB7IFRoZW1lIH0gZnJvbSAnLi4vdGhlbWUnO1xuXG5leHBvcnQgY29uc3QgTk9UQ0hfUEFERElORyA9IDQ7XG5cbmNvbnN0IG1ha2VTZWxlY3RvciA9IChcbiAgc3RhdGU6XG4gICAgfCAnaG92ZXI6bm90KFtkaXNhYmxlZF0pOm5vdCg6Zm9jdXMpJ1xuICAgIHwgJ2ZvY3VzOm5vdChbZGlzYWJsZWRdKSdcbiAgICB8ICdkaXNhYmxlZCdcbikgPT5cbiAgYGlucHV0OiR7c3RhdGV9IH4gJiBbZGF0YS1ub3RjaC1vdXRsaW5lLWl0ZW1dLGAgK1xuICBgc2VsZWN0OiR7c3RhdGV9IH4gJiBbZGF0YS1ub3RjaC1vdXRsaW5lLWl0ZW1dLGAgK1xuICBgW3JvbGU9XCJidXR0b25cIl06JHtzdGF0ZX0gfiAmIFtkYXRhLW5vdGNoLW91dGxpbmUtaXRlbV0sYCArXG4gIGB0ZXh0YXJlYToke3N0YXRlfSB+ICYgW2RhdGEtbm90Y2gtb3V0bGluZS1pdGVtXWA7XG5cbmV4cG9ydCBjb25zdCBJbm5lckNvbnRhaW5lciA9IHN0eWxlZCgnZGl2Jywge1xuICBzaG91bGRGb3J3YXJkUHJvcCxcbn0pPHtcbiAgY29sb3I/OiBzdHJpbmc7XG4gIHRoZW1lPzogVGhlbWU7XG4gIGJvcmRlclJhZGl1czogbnVtYmVyO1xuICBib3JkZXJXaWR0aDogbnVtYmVyO1xuICBib3JkZXJXaWR0aFdoZW5Gb2N1c2VkOiBudW1iZXI7XG4gIGJvcmRlclN0eWxlOiBzdHJpbmc7XG4gIG5vdGNoU3RhcnQ6IG51bWJlcjtcbiAgZm9yY2VBY3RpdmU/OiBib29sZWFuO1xufT4oXG4gIHtcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgbGVmdDogMCxcbiAgICB0b3A6IDAsXG4gICAgYm90dG9tOiAwLFxuICAgIHdpZHRoOiAnMTAwJScsXG4gICAgaGVpZ2h0OiAnMTAwJScsXG4gICAgcG9pbnRlckV2ZW50czogJ25vbmUnLFxuICB9LFxuICAoe1xuICAgIGNvbG9yID0gJ29uLnN1cmZhY2UnLFxuICAgIGJvcmRlclJhZGl1czogYm9yZGVyUmFkaXVzUHgsXG4gICAgYm9yZGVyV2lkdGg6IGJvcmRlcldpZHRoUHgsXG4gICAgYm9yZGVyV2lkdGhXaGVuRm9jdXNlZDogYm9yZGVyV2lkdGhXaGVuRm9jdXNlZFB4LFxuICAgIGJvcmRlclN0eWxlLFxuICAgIG5vdGNoU3RhcnQsXG4gICAgZm9yY2VBY3RpdmUgPSBmYWxzZSxcbiAgfSkgPT4ge1xuICAgIGNvbnN0IHdpZHRoID0gcmVtKG5vdGNoU3RhcnQgLSBOT1RDSF9QQURESU5HKTtcbiAgICBjb25zdCBib3JkZXJSYWRpdXMgPSByZW0oYm9yZGVyUmFkaXVzUHgpO1xuICAgIGNvbnN0IGJvcmRlcldpZHRoID0gcmVtKGJvcmRlcldpZHRoUHgpO1xuICAgIGNvbnN0IGJvcmRlcldpZHRoV2hlbkZvY3VzZWQgPSByZW0oYm9yZGVyV2lkdGhXaGVuRm9jdXNlZFB4KTtcblxuICAgIGZ1bmN0aW9uIGJvcmRlclN0eWxpbmcoYm9yZGVyUmFkaXVzOiBzdHJpbmcsIGJvcmRlcldpZHRoOiBzdHJpbmcpIHtcbiAgICAgIHJldHVybiB7XG4gICAgICAgIFsnJltkYXRhLW5vdGNoLW91dGxpbmUtaXRlbT1cInN0YXJ0XCJdJ106IHtcbiAgICAgICAgICBib3JkZXJUb3BMZWZ0UmFkaXVzOiBib3JkZXJSYWRpdXMsXG4gICAgICAgICAgYm9yZGVyQm90dG9tTGVmdFJhZGl1czogYm9yZGVyUmFkaXVzLFxuICAgICAgICAgIGJvcmRlcldpZHRoOiBib3JkZXJXaWR0aCxcbiAgICAgICAgICBib3JkZXJSaWdodFdpZHRoOiAwLFxuICAgICAgICAgIHdpZHRoLFxuICAgICAgICB9LFxuICAgICAgICBbJyZbZGF0YS1ub3RjaC1vdXRsaW5lLWl0ZW09XCJtaWRkbGVcIl0nXToge1xuICAgICAgICAgIGJvcmRlcldpZHRoOiAwLFxuICAgICAgICAgIGJvcmRlckJvdHRvbVdpZHRoOiBib3JkZXJXaWR0aCxcbiAgICAgICAgfSxcbiAgICAgICAgWycmW2RhdGEtbm90Y2gtb3V0bGluZS1pdGVtPVwiZW5kXCJdJ106IHtcbiAgICAgICAgICBib3JkZXJXaWR0aDogYm9yZGVyV2lkdGgsXG4gICAgICAgICAgYm9yZGVyTGVmdDogMCxcbiAgICAgICAgICBib3JkZXJUb3BSaWdodFJhZGl1czogYm9yZGVyUmFkaXVzLFxuICAgICAgICAgIGJvcmRlckJvdHRvbVJpZ2h0UmFkaXVzOiBib3JkZXJSYWRpdXMsXG4gICAgICAgICAgZmxleDogMSxcbiAgICAgICAgfSxcbiAgICAgIH07XG4gICAgfVxuXG4gICAgY29uc3QgaW5hY3RpdmVTdHlsZSA9IHtcbiAgICAgIGNvbG9yOiAnb24uc3VyZmFjZS12YXJpYW50JyxcbiAgICAgIGJvcmRlckNvbG9yOiAnb3V0bGluZScsXG4gICAgICAuLi5ib3JkZXJTdHlsaW5nKGJvcmRlclJhZGl1cywgYm9yZGVyV2lkdGgpLFxuICAgIH07XG5cbiAgICBjb25zdCBob3ZlclN0eWxlID0ge1xuICAgICAgYm9yZGVyQ29sb3I6ICdvbi5zdXJmYWNlJyxcbiAgICAgIGNvbG9yOiAnb24uc3VyZmFjZS12YXJpYW50JyxcbiAgICB9O1xuXG4gICAgY29uc3QgZm9jdXNTdHlsZSA9IHtcbiAgICAgIGJvcmRlckNvbG9yOiBjb2xvcixcbiAgICAgIGNvbG9yOiBhbHBoYShjb2xvciwgMC44NyksXG4gICAgICAuLi5ib3JkZXJTdHlsaW5nKGJvcmRlclJhZGl1cywgYm9yZGVyV2lkdGhXaGVuRm9jdXNlZCksXG4gICAgfTtcblxuICAgIGNvbnN0IGRpc2FibGVkU3R5bGUgPSB7XG4gICAgICBib3JkZXJDb2xvcjogYWxwaGEoJ29uLnN1cmZhY2UnLCAwLjA2KSxcbiAgICAgIGNvbG9yOiBhbHBoYSgnb24uc3VyZmFjZScsIDAuMzgpLFxuICAgIH07XG5cbiAgICByZXR1cm4gY3NzKHtcbiAgICAgIC8vIG5vdGNoIGl0ZW1zIHN0eWxlcyB3aGVuIG5vdCBmb2N1c2VkXG4gICAgICBbJ1tkYXRhLW5vdGNoLW91dGxpbmUtaXRlbV0nXToge1xuICAgICAgICBib3hTaXppbmc6ICdib3JkZXItYm94JyxcbiAgICAgICAgYm9yZGVyU3R5bGUsXG4gICAgICAgIHRyYW5zaXRpb246IGBib3JkZXItY29sb3IgLjE1cyBjdWJpYy1iZXppZXIoLjQsMCwuMiwxKWAsXG4gICAgICAgIC4uLihmb3JjZUFjdGl2ZSA/IGZvY3VzU3R5bGUgOiBpbmFjdGl2ZVN0eWxlKSxcbiAgICAgIH0sXG4gICAgICAvLyBub3RjaCBpdGVtcyBzdHlsZXMgd2hlbiBpbnB1dCBpcyBob3ZlcmVkXG4gICAgICBbbWFrZVNlbGVjdG9yKCdob3Zlcjpub3QoW2Rpc2FibGVkXSk6bm90KDpmb2N1cyknKV06IGZvcmNlQWN0aXZlXG4gICAgICAgID8gZm9jdXNTdHlsZVxuICAgICAgICA6IGhvdmVyU3R5bGUsXG4gICAgICAvLyBub3RjaCBpdGVtcyBzdHlsZXMgd2hlbiBpbnB1dCBpcyBmb2N1c2VkXG4gICAgICBbbWFrZVNlbGVjdG9yKCdmb2N1czpub3QoW2Rpc2FibGVkXSknKV06IGZvY3VzU3R5bGUsXG4gICAgICAvLyBub3RjaCBpdGVtcyBzdHlsZXMgd2hlbiBpbnB1dCBpcyBkaXNhYmxlZFxuICAgICAgW21ha2VTZWxlY3RvcignZGlzYWJsZWQnKV06IGRpc2FibGVkU3R5bGUsXG4gICAgfSk7XG4gIH1cbik7XG4iXX0= */");
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0I4QiIsImZpbGUiOiJzdHlsZWRDb21wb25lbnRzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgcmVtIH0gZnJvbSAncG9saXNoZWQnO1xuaW1wb3J0IHNob3VsZEZvcndhcmRQcm9wIGZyb20gJ0BzdHlsZWQtc3lzdGVtL3Nob3VsZC1mb3J3YXJkLXByb3AnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQHN0eWxlZC1zeXN0ZW0vY3NzJztcblxuaW1wb3J0IHsgYWxwaGEgfSBmcm9tICcuLi9jb2xvcic7XG5pbXBvcnQgdHlwZSB7IFRoZW1lIH0gZnJvbSAnLi4vdGhlbWUnO1xuaW1wb3J0IHsgRUFTSU5HX1NUQU5EQVJEIH0gZnJvbSAnLi4vbW90aW9uJztcblxuZXhwb3J0IGNvbnN0IE5PVENIX1BBRERJTkcgPSA0O1xuXG5jb25zdCBtYWtlU2VsZWN0b3IgPSAoXG4gIHN0YXRlOlxuICAgIHwgJ2hvdmVyOm5vdChbZGlzYWJsZWRdKTpub3QoOmZvY3VzKSdcbiAgICB8ICdmb2N1czpub3QoW2Rpc2FibGVkXSknXG4gICAgfCAnZGlzYWJsZWQnXG4pID0+XG4gIGBpbnB1dDoke3N0YXRlfSB+ICYgW2RhdGEtbm90Y2gtb3V0bGluZS1pdGVtXSxgICtcbiAgYHNlbGVjdDoke3N0YXRlfSB+ICYgW2RhdGEtbm90Y2gtb3V0bGluZS1pdGVtXSxgICtcbiAgYFtyb2xlPVwiYnV0dG9uXCJdOiR7c3RhdGV9IH4gJiBbZGF0YS1ub3RjaC1vdXRsaW5lLWl0ZW1dLGAgK1xuICBgdGV4dGFyZWE6JHtzdGF0ZX0gfiAmIFtkYXRhLW5vdGNoLW91dGxpbmUtaXRlbV1gO1xuXG5leHBvcnQgY29uc3QgSW5uZXJDb250YWluZXIgPSBzdHlsZWQoJ2RpdicsIHtcbiAgc2hvdWxkRm9yd2FyZFByb3AsXG59KTx7XG4gIGNvbG9yPzogc3RyaW5nO1xuICB0aGVtZT86IFRoZW1lO1xuICBib3JkZXJSYWRpdXM6IG51bWJlcjtcbiAgYm9yZGVyV2lkdGg6IG51bWJlcjtcbiAgYm9yZGVyV2lkdGhXaGVuRm9jdXNlZDogbnVtYmVyO1xuICBib3JkZXJTdHlsZTogc3RyaW5nO1xuICBub3RjaFN0YXJ0OiBudW1iZXI7XG4gIGZvcmNlQWN0aXZlPzogYm9vbGVhbjtcbn0+KFxuICB7XG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgZGlzcGxheTogJ2ZsZXgnLFxuICAgIGxlZnQ6IDAsXG4gICAgdG9wOiAwLFxuICAgIGJvdHRvbTogMCxcbiAgICB3aWR0aDogJzEwMCUnLFxuICAgIGhlaWdodDogJzEwMCUnLFxuICAgIHBvaW50ZXJFdmVudHM6ICdub25lJyxcbiAgfSxcbiAgKHtcbiAgICBjb2xvciA9ICdvbi5zdXJmYWNlJyxcbiAgICBib3JkZXJSYWRpdXM6IGJvcmRlclJhZGl1c1B4LFxuICAgIGJvcmRlcldpZHRoOiBib3JkZXJXaWR0aFB4LFxuICAgIGJvcmRlcldpZHRoV2hlbkZvY3VzZWQ6IGJvcmRlcldpZHRoV2hlbkZvY3VzZWRQeCxcbiAgICBib3JkZXJTdHlsZSxcbiAgICBub3RjaFN0YXJ0LFxuICAgIGZvcmNlQWN0aXZlID0gZmFsc2UsXG4gIH0pID0+IHtcbiAgICBjb25zdCB3aWR0aCA9IHJlbShub3RjaFN0YXJ0IC0gTk9UQ0hfUEFERElORyk7XG4gICAgY29uc3QgYm9yZGVyUmFkaXVzID0gcmVtKGJvcmRlclJhZGl1c1B4KTtcbiAgICBjb25zdCBib3JkZXJXaWR0aCA9IHJlbShib3JkZXJXaWR0aFB4KTtcbiAgICBjb25zdCBib3JkZXJXaWR0aFdoZW5Gb2N1c2VkID0gcmVtKGJvcmRlcldpZHRoV2hlbkZvY3VzZWRQeCk7XG5cbiAgICBmdW5jdGlvbiBib3JkZXJTdHlsaW5nKGJvcmRlclJhZGl1czogc3RyaW5nLCBib3JkZXJXaWR0aDogc3RyaW5nKSB7XG4gICAgICByZXR1cm4ge1xuICAgICAgICBbJyZbZGF0YS1ub3RjaC1vdXRsaW5lLWl0ZW09XCJzdGFydFwiXSddOiB7XG4gICAgICAgICAgYm9yZGVyVG9wTGVmdFJhZGl1czogYm9yZGVyUmFkaXVzLFxuICAgICAgICAgIGJvcmRlckJvdHRvbUxlZnRSYWRpdXM6IGJvcmRlclJhZGl1cyxcbiAgICAgICAgICBib3JkZXJXaWR0aDogYm9yZGVyV2lkdGgsXG4gICAgICAgICAgYm9yZGVyUmlnaHRXaWR0aDogMCxcbiAgICAgICAgICB3aWR0aCxcbiAgICAgICAgfSxcbiAgICAgICAgWycmW2RhdGEtbm90Y2gtb3V0bGluZS1pdGVtPVwibWlkZGxlXCJdJ106IHtcbiAgICAgICAgICBib3JkZXJXaWR0aDogMCxcbiAgICAgICAgICBib3JkZXJCb3R0b21XaWR0aDogYm9yZGVyV2lkdGgsXG4gICAgICAgIH0sXG4gICAgICAgIFsnJltkYXRhLW5vdGNoLW91dGxpbmUtaXRlbT1cImVuZFwiXSddOiB7XG4gICAgICAgICAgYm9yZGVyV2lkdGg6IGJvcmRlcldpZHRoLFxuICAgICAgICAgIGJvcmRlckxlZnQ6IDAsXG4gICAgICAgICAgYm9yZGVyVG9wUmlnaHRSYWRpdXM6IGJvcmRlclJhZGl1cyxcbiAgICAgICAgICBib3JkZXJCb3R0b21SaWdodFJhZGl1czogYm9yZGVyUmFkaXVzLFxuICAgICAgICAgIGZsZXg6IDEsXG4gICAgICAgIH0sXG4gICAgICB9O1xuICAgIH1cblxuICAgIGNvbnN0IGluYWN0aXZlU3R5bGUgPSB7XG4gICAgICBjb2xvcjogJ29uLnN1cmZhY2UtdmFyaWFudCcsXG4gICAgICBib3JkZXJDb2xvcjogJ291dGxpbmUnLFxuICAgICAgLi4uYm9yZGVyU3R5bGluZyhib3JkZXJSYWRpdXMsIGJvcmRlcldpZHRoKSxcbiAgICB9O1xuXG4gICAgY29uc3QgaG92ZXJTdHlsZSA9IHtcbiAgICAgIGJvcmRlckNvbG9yOiAnb24uc3VyZmFjZScsXG4gICAgICBjb2xvcjogJ29uLnN1cmZhY2UtdmFyaWFudCcsXG4gICAgfTtcblxuICAgIGNvbnN0IGZvY3VzU3R5bGUgPSB7XG4gICAgICBib3JkZXJDb2xvcjogY29sb3IsXG4gICAgICBjb2xvcjogYWxwaGEoY29sb3IsIDAuODcpLFxuICAgICAgLi4uYm9yZGVyU3R5bGluZyhib3JkZXJSYWRpdXMsIGJvcmRlcldpZHRoV2hlbkZvY3VzZWQpLFxuICAgIH07XG5cbiAgICBjb25zdCBkaXNhYmxlZFN0eWxlID0ge1xuICAgICAgYm9yZGVyQ29sb3I6IGFscGhhKCdvbi5zdXJmYWNlJywgMC4wNiksXG4gICAgICBjb2xvcjogYWxwaGEoJ29uLnN1cmZhY2UnLCAwLjM4KSxcbiAgICB9O1xuXG4gICAgcmV0dXJuIGNzcyh7XG4gICAgICAvLyBub3RjaCBpdGVtcyBzdHlsZXMgd2hlbiBub3QgZm9jdXNlZFxuICAgICAgWydbZGF0YS1ub3RjaC1vdXRsaW5lLWl0ZW1dJ106IHtcbiAgICAgICAgYm94U2l6aW5nOiAnYm9yZGVyLWJveCcsXG4gICAgICAgIGJvcmRlclN0eWxlLFxuICAgICAgICB0cmFuc2l0aW9uOiBgYm9yZGVyLWNvbG9yIC4xNXMgJHtFQVNJTkdfU1RBTkRBUkR9YCxcbiAgICAgICAgLi4uKGZvcmNlQWN0aXZlID8gZm9jdXNTdHlsZSA6IGluYWN0aXZlU3R5bGUpLFxuICAgICAgfSxcbiAgICAgIC8vIG5vdGNoIGl0ZW1zIHN0eWxlcyB3aGVuIGlucHV0IGlzIGhvdmVyZWRcbiAgICAgIFttYWtlU2VsZWN0b3IoJ2hvdmVyOm5vdChbZGlzYWJsZWRdKTpub3QoOmZvY3VzKScpXTogZm9yY2VBY3RpdmVcbiAgICAgICAgPyBmb2N1c1N0eWxlXG4gICAgICAgIDogaG92ZXJTdHlsZSxcbiAgICAgIC8vIG5vdGNoIGl0ZW1zIHN0eWxlcyB3aGVuIGlucHV0IGlzIGZvY3VzZWRcbiAgICAgIFttYWtlU2VsZWN0b3IoJ2ZvY3VzOm5vdChbZGlzYWJsZWRdKScpXTogZm9jdXNTdHlsZSxcbiAgICAgIC8vIG5vdGNoIGl0ZW1zIHN0eWxlcyB3aGVuIGlucHV0IGlzIGRpc2FibGVkXG4gICAgICBbbWFrZVNlbGVjdG9yKCdkaXNhYmxlZCcpXTogZGlzYWJsZWRTdHlsZSxcbiAgICB9KTtcbiAgfVxuKTtcbiJdfQ== */");
 
 const NotchedOutline = /*#__PURE__*/react$1.forwardRef(function NotchedOutline(props, forwardedRef) {
   let {
@@ -2556,7 +2602,7 @@ const HelperText = /*#__PURE__*/react$1.forwardRef(function HelperText(props, fo
     display: "flex",
     pt: 1,
     color: color,
-    variant: "caption",
+    variant: "label-small",
     ref: forwardedRef,
     lineHeight: "normal",
     __css: _extends__default['default']({
@@ -2766,6 +2812,7 @@ const ListItem = /*#__PURE__*/react$1.forwardRef(function ListItem(props, forwar
     disabled: disabled
   }, otherProps, {
     __css: _extends__default['default']({
+      variant: 'text.label-large',
       px: 3,
       py: "0.75rem",
       transition: 'background-color 75ms linear',
@@ -2784,6 +2831,7 @@ const ListItem = /*#__PURE__*/react$1.forwardRef(function ListItem(props, forwar
       },
       '&[aria-selected="true"]': {
         backgroundColor: alpha(color, baseOpacity + 0.12),
+        color,
         ':hover': {
           backgroundColor: alpha(color, hoverOpacity + 0.12)
         },
@@ -2802,7 +2850,7 @@ const ListItem = /*#__PURE__*/react$1.forwardRef(function ListItem(props, forwar
       },
       textDecoration: 'none',
       WebkitTapHighlightColor: 'transparent'
-    }, css.get(theme, 'text.subtitle1'), __css),
+    }, __css),
     children: children
   }));
 });
@@ -2820,7 +2868,7 @@ const ListItemText = /*#__PURE__*/react$1.forwardRef(function ListItemText(props
   }, otherProps, {
     children: [text, secondaryText && /*#__PURE__*/jsxRuntime.jsx(Text, {
       as: "span",
-      variant: "body2",
+      variant: "body-small",
       display: "block",
       __css: {
         color: 'currentColor',
@@ -2885,7 +2933,7 @@ const ComboboxList = /*#__PURE__*/react$1.forwardRef((props, forwardedRef) => {
     __css: _extends__default['default']({
       maxHeight: "18.75rem",
       overflowY: 'auto',
-      borderRadius: 'default',
+      borderRadius: 'extra-small',
       '[data-popper-placement="top"] &': {
         transformOrigin: 'bottom center'
       },
@@ -2986,7 +3034,7 @@ const ComboboxButton = /*#__PURE__*/react$1.forwardRef((props, forwardedRef) =>
       height: "2.5rem",
       px: 0,
       '& > svg': {
-        transition: 'transform .15s cubic-bezier(.4,0,.2,1), color .15s cubic-bezier(.4,0,.2,1)'
+        transition: `transform .15s ${EASING_STANDARD}, color .15s ${EASING_STANDARD}`
       },
       '&[aria-expanded="false"] > svg': {
         color: alpha('on.surface', 0.54)
@@ -3087,7 +3135,7 @@ const CheckBoxIcon = /*#__PURE__*/react$1.forwardRef(function CheckBoxIcon(_ref,
       borderStyle: 'solid',
       width: "1.125rem",
       height: "1.125rem",
-      transition: 'background-color 90ms 0s cubic-bezier(0,0,.2,1), border-color 90ms 0s cubic-bezier(0,0,.2,1), opacity 90ms 0s cubic-bezier(0,0,.2,1)',
+      transition: `background-color 90ms 0s ${EASING_STANDARD}, border-color 90ms 0s ${EASING_STANDARD}, opacity 90ms 0s ${EASING_STANDARD}`,
       '& > svg': {
         display: 'block'
       },
@@ -3691,7 +3739,7 @@ const MenuList = /*#__PURE__*/react$1.forwardRef((_ref, ref) => {
       minWidth: "7rem",
       maxWidth: "17.5rem",
       maxHeight: "18.75rem",
-      borderRadius: 'default',
+      borderRadius: 'extra-small',
       overflowY: 'auto',
       '[data-popper-placement="top"] &': {
         transformOrigin: 'bottom center'
@@ -3699,7 +3747,7 @@ const MenuList = /*#__PURE__*/react$1.forwardRef((_ref, ref) => {
       '[data-popper-placement="bottom"] &': {
         transformOrigin: 'top center'
       },
-      animation: `${growAnimation} .12s cubic-bezier(0,0,0.2,1)`
+      animation: `${growAnimation} .12s ${EASING_STANDARD}`
     }, __css)
   }, props));
 }); /////////////////////////////////////////////////////
@@ -3751,6 +3799,141 @@ const MenuPopover = /*#__PURE__*/react$1.forwardRef((_ref4, ref) => {
   }, props));
 });
 
+const NavRailIndicator = /*#__PURE__*/react$1.forwardRef(function NavRailIndicator(props, forwardedRef) {
+  const {
+    as = 'div',
+    children,
+    __css
+  } = props,
+        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "children", "__css"]);
+
+  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+    color: "currentColor",
+    ref: forwardedRef,
+    as: as,
+    "data-nav-rail-item-indicator": ""
+  }, otherProps, {
+    __css: _extends__default['default']({
+      width: '100%',
+      height: '100%',
+      maxWidth: "3.5rem",
+      maxHeight: "3.5rem",
+      borderRadius: 'full',
+      bg: 'var(--indicator-background-color)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: "2rem",
+      transition: `background-color .2s ${EASING_STANDARD}`,
+      pointerEvents: 'none'
+    }, __css),
+    children: children
+  }));
+});
+const NavRailLabel = /*#__PURE__*/react$1.forwardRef(function NavRailLabel(props, forwardedRef) {
+  const {
+    as = 'div',
+    children,
+    __css
+  } = props,
+        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "children", "__css"]);
+
+  return /*#__PURE__*/jsxRuntime.jsx(Text, _extends__default['default']({
+    ref: forwardedRef,
+    as: as,
+    variant: "label-small",
+    lineHeight: 1
+  }, otherProps, {
+    __css: _extends__default['default']({
+      pt: "0.25rem",
+      pb: "0.75rem",
+      color: 'inherit',
+      pointerEvents: 'none'
+    }, __css),
+    children: children
+  }));
+});
+const NavRailItem = /*#__PURE__*/react$1.forwardRef(function NavRailItem(props, forwardedRef) {
+  const {
+    as = 'button',
+    children,
+    color = 'primary-container',
+    selected = false,
+    disabled = false,
+    style,
+    onKeyDown,
+    onPointerDown,
+    __css
+  } = props,
+        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "children", "color", "selected", "disabled", "style", "onKeyDown", "onPointerDown", "__css"]);
+
+  const theme = useTheme();
+  const baseOpacity = 0,
+        hoverOpacity = 0.04,
+        focusOpacity = 0.12,
+        pressedOpacity = 0.12;
+  const ripple = useRippleSurface({
+    rippleColor: 'currentColor',
+    onKeyDown,
+    onPointerDown,
+    baseOpacity,
+    hoverOpacity,
+    focusOpacity,
+    pressedOpacity
+  }); // Apply ripple from nav item to nav indicator
+
+  const rippleCss = react$1.useMemo(() => {
+    const ret = {};
+    const keys = Object.keys(ripple.__css);
+
+    for (const key of keys) {
+      if (!key.startsWith('&')) {
+        ret['& [data-nav-rail-item-indicator]'] = ret['& [data-nav-rail-item-indicator]'] || {};
+        ret['& [data-nav-rail-item-indicator]'][key] = ripple.__css[key];
+        continue;
+      }
+
+      const newKey = key.replace(/(.+?)::(before|after)/g, '$1 [data-nav-rail-item-indicator]::$2');
+      ret[newKey] = ripple.__css[key];
+    }
+
+    return ret;
+  }, [ripple.__css]);
+  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+    ref: forwardedRef,
+    as: as
+  }, otherProps, {
+    onPointerDown: ripple.onPointerDown,
+    onKeyDown: ripple.onKeyDown,
+    "aria-pressed": selected,
+    type: "button",
+    style: _extends__default['default']({}, ripple.style, style),
+    disabled: disabled,
+    __css: _extends__default['default']({
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      transition: `color .2s ${EASING_STANDARD}`,
+      color: selected ? `on.${color}` : 'on.surface-variant',
+      '--indicator-background-color': selected ? styledSystem.get(theme, `colors.${color}`) : 'transparent',
+      border: 'none',
+      ':focus': {
+        outline: 'none'
+      },
+      backgroundColor: 'transparent',
+      margin: 0,
+      padding: 0,
+      px: "0.75rem",
+      minHeight: "3.75rem",
+      height: "3.75rem",
+      cursor: 'pointer',
+      textDecoration: 'none',
+      WebkitTapHighlightColor: 'transparent'
+    }, rippleCss, __css),
+    children: children
+  }));
+});
+
 const innerDivRotate = react.keyframes({
   '0%': {
     transformOrigin: '50% 50%'
@@ -3825,7 +4008,7 @@ const ProgressSpinner = /*#__PURE__*/react$1.forwardRef(function ProgressSpinner
             strokeDasharray: '80px, 200px',
             strokeDashoffset: '0px'
           } : {
-            transition: 'stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+            transition: `stroke-dashoffset 300ms ${EASING_STANDARD} 0ms`,
             strokeDasharray: circumference.toFixed(3)
           }
         })
@@ -3858,7 +4041,7 @@ const RadioButtonIcon = /*#__PURE__*/react$1.forwardRef(function RadioButtonIcon
         borderRadius: 'full',
         width: '100%',
         height: '100%',
-        transition: 'transform .12s cubic-bezier(0,0,.2,1) 0ms,background-color .12s cubic-bezier(0,0,.2,1) 0ms',
+        transition: `transform .12s ${EASING_STANDARD} 0ms,background-color .12s ${EASING_STANDARD} 0ms`,
         transform: checked ? 'scale(1)' : 'scale(0)'
       }
     })
@@ -4036,7 +4219,7 @@ const SelectIcon = /*#__PURE__*/react$1.forwardRef(function SelectIcon(props, fo
       color: open ? 'primary' : alpha('on.surface', 0.54),
       pointerEvents: 'none',
       transform: open ? 'rotate(180deg)' : undefined,
-      transition: 'transform .15s cubic-bezier(.4,0,.2,1), color .15s cubic-bezier(.4,0,.2,1)'
+      transition: `transform .15s ${EASING_STANDARD}, color .15s ${EASING_STANDARD}`
     }
   }, otherProps, {
     children: /*#__PURE__*/jsxRuntime.jsx("path", {
@@ -4641,7 +4824,7 @@ const commonStyle = {
 };
 
 function getTransition(timems) {
-  return `opacity ${timems}ms cubic-bezier(.4,0,.2,1),transform ${timems}ms cubic-bezier(.4,0,.2,1)`;
+  return `opacity ${timems}ms ${EASING_STANDARD},transform ${timems}ms ${EASING_STANDARD}`;
 }
 
 const defaultAnimation = {
@@ -4749,7 +4932,7 @@ const Snackbar = /*#__PURE__*/react$1.forwardRef(function Snackbar(props, forwar
     style: _extends__default['default']({}, style, styleProp)
   }, otherProps, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Text, {
-      variant: "body2",
+      variant: "body-medium",
       as: "span",
       py: 2,
       children: children
@@ -4813,7 +4996,7 @@ const SwitchThumb = (_ref2) => {
     __css: {
       transform: `translateX(calc(-50% ${checked ? '+' : '-'} ${polished.rem((TRAIL_WIDTH - CIRCLE_SIZE_INACTIVE_CHECKED - BORDER_WIDTH * 4) / 2)})) translateY(-50%)`,
       WebkitTapHighlightColor: 'transparent',
-      transition: 'background-color 90ms cubic-bezier(.4,0,.2,1),border-color 90ms cubic-bezier(.4,0,.2,1),transform 90ms cubic-bezier(.4,0,.2,1),height 90ms cubic-bezier(.4,0,.2,1),width 90ms cubic-bezier(.4,0,.2,1)',
+      transition: `background-color 90ms ${EASING_STANDARD},border-color 90ms ${EASING_STANDARD},transform 90ms ${EASING_STANDARD},height 90ms ${EASING_STANDARD},width 90ms ${EASING_STANDARD}`,
       '& > input': {
         width: THUMB_SIZE,
         height: THUMB_SIZE
@@ -5009,7 +5192,7 @@ const TabIndicator = /*#__PURE__*/react$1.forwardRef(function TabIndicator(props
       transform: `scale(1)`,
       opacity: selected ? 1 : 0,
       transformOrigin: 'left',
-      transition: 'transform .25s cubic-bezier(.4,0,.2,1)',
+      transition: `transform .25s ${EASING_STANDARD}`,
       zIndex: 1
     }
   }, otherProps));
@@ -5086,7 +5269,7 @@ const TabInner = /*#__PURE__*/react$1.forwardRef(function Tab(props, forwardedRe
   return /*#__PURE__*/jsxRuntime.jsxs(Box, {
     position: "relative",
     display: "flex",
-    flexGrow: 1,
+    flex: 1,
     flexDirection: "column",
     children: [/*#__PURE__*/jsxRuntime.jsx(RippleBox, _extends__default['default']({
       as: innerAs,
@@ -5109,7 +5292,7 @@ const TabInner = /*#__PURE__*/react$1.forwardRef(function Tab(props, forwardedRe
     }, otherProps, {
       children: /*#__PURE__*/jsxRuntime.jsx(Text, {
         as: "span",
-        variant: "button",
+        variant: "label-large",
         color: "inherit",
         height: "100%",
         textAlign: "center",
@@ -5259,7 +5442,7 @@ const TableRow = /*#__PURE__*/react$1.forwardRef((props, ref) => {
     display: "flex",
     flexDirection: "row",
     width: "100%",
-    variant: "body1",
+    variant: "body-medium",
     px: 2,
     __css: _extends__default['default']({
       borderBottomStyle: 'solid',
@@ -5289,15 +5472,12 @@ const Tooltip = /*#__PURE__*/react$1.forwardRef(function Tooltip(props, forwarde
     placement: placement,
     distance: 8,
     __css: _extends__default['default']({
+      variant: ['text.body-medium', 'text.body-small'],
       bg: alpha('#616161', 0.9),
       color: '#fff',
-      fontSize: [2, 2, 1],
-      fontFamily: 'body',
-      fontWeight: 'regular',
-      lineHeight: [1.2, 1.2, 1.33],
-      px: [3, 3, 2],
-      py: [2, 2, 1],
-      borderRadius: '4px',
+      px: 2,
+      py: 1,
+      borderRadius: 'extra-small',
       zIndex: 'tooltip'
     }, __css)
   }, otherProps));
@@ -5354,6 +5534,13 @@ exports.DEFAULT_THEME_CLASS = DEFAULT_THEME_CLASS;
 exports.DelayAppearance = DelayAppearance;
 exports.Dialog = Dialog;
 exports.Divider = Divider;
+exports.EASING_EMPHASIZED = EASING_EMPHASIZED;
+exports.EASING_EMPHASIZED_ACCELERATE = EASING_EMPHASIZED_ACCELERATE;
+exports.EASING_EMPHASIZED_DECELERATE = EASING_EMPHASIZED_DECELERATE;
+exports.EASING_LINEAR = EASING_LINEAR;
+exports.EASING_STANDARD = EASING_STANDARD;
+exports.EASING_STANDARD_ACCELERATE = EASING_STANDARD_ACCELERATE;
+exports.EASING_STANDARD_DECELERATE = EASING_STANDARD_DECELERATE;
 exports.FilledContainer = FilledContainer;
 exports.FloatingLabel = FloatingLabel;
 exports.HelperText = HelperText;
@@ -5366,6 +5553,9 @@ exports.MenuButton = MenuButton;
 exports.MenuItem = MenuItem;
 exports.MenuList = MenuList;
 exports.MenuPopover = MenuPopover;
+exports.NavRailIndicator = NavRailIndicator;
+exports.NavRailItem = NavRailItem;
+exports.NavRailLabel = NavRailLabel;
 exports.NotchedOutline = NotchedOutline;
 exports.OutlinedContainer = OutlinedContainer;
 exports.Paper = Paper;
@@ -5401,6 +5591,7 @@ exports.getBackgroundOverlay = getBackgroundOverlay;
 exports.getColorOverlay = getColorOverlay;
 exports.getDarkThemeBackgroundOverlay = getDarkThemeBackgroundOverlay;
 exports.getTheme = getTheme;
+exports.mixColor = mixColor;
 exports.rippleStyle = rippleStyle;
 exports.sx = sx;
 exports.theme = theme;