@basic-ui/material 1.0.0-alpha.2 → 1.0.0-alpha.20

package/build/cjs/index.js

@@ -2,28 +2,44 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _extends = require('@babel/runtime/helpers/extends');
 var css = require('@styled-system/css');
 var polished = require('polished');
-var hash = require('@emotion/hash');
-var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
+var dynamicTheme = require('@basic-ui/dynamic-theme');
 var react$1 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('@emotion/react');
 var _styled = require('@emotion/styled/base');
 var styledSystem = require('styled-system');
 var shouldForwardProp = require('@styled-system/should-forward-prop');
+var react = require('@emotion/react');
 var core = require('@basic-ui/core');
+var hash = require('@emotion/hash');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var hash__default = /*#__PURE__*/_interopDefaultLegacy(hash);
-var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
 var _styled__default = /*#__PURE__*/_interopDefaultLegacy(_styled);
 var shouldForwardProp__default = /*#__PURE__*/_interopDefaultLegacy(shouldForwardProp);
+var hash__default = /*#__PURE__*/_interopDefaultLegacy(hash);
+
+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: {
@@ -103,44 +119,19 @@ const theme = {
     full: "6249.9375rem",
     circle: '100%'
   },
-  shadowsOriginal: {
-    0: '0 0 0 0 rgba(0,0,0,0.2),0 0 0 0 rgba(0,0,0,0.14),0 0 0 0 rgba(0,0,0,0.12)',
-    1: '0 2px 1px -1px rgba(0,0,0,0.2),0 1px 1px 0 rgba(0,0,0,0.14),0 1px 3px 0 rgba(0,0,0,0.12)',
-    2: '0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12)',
-    3: '0 3px 3px -2px rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.14),0 1px 8px 0 rgba(0,0,0,0.12)',
-    4: '0 2px 4px -1px rgba(0,0,0,0.2),0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12)',
-    5: '0 3px 5px -1px rgba(0,0,0,0.2),0 5px 8px 0 rgba(0,0,0,0.14),0 1px 14px 0 rgba(0,0,0,0.12)',
-    6: '0 3px 5px -1px rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12)',
-    7: '0 4px 5px -2px rgba(0,0,0,0.2),0 7px 10px 1px rgba(0,0,0,0.14),0 2px 16px 1px rgba(0,0,0,0.12)',
-    8: '0 5px 5px -3px rgba(0,0,0,0.2),0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12)',
-    9: '0 5px 6px -3px rgba(0,0,0,0.2),0 9px 12px 1px rgba(0,0,0,0.14),0 3px 16px 2px rgba(0,0,0,0.12)',
-    10: '0 6px 6px -3px rgba(0,0,0,0.2),0 10px 14px 1px rgba(0,0,0,0.14),0 4px 18px 3px rgba(0,0,0,0.12)',
-    11: '0 6px 7px -4px rgba(0,0,0,0.2),0 11px 15px 1px rgba(0,0,0,0.14),0 4px 20px 3px rgba(0,0,0,0.12)',
-    12: '0 7px 8px -4px rgba(0,0,0,0.2),0 12px 17px 2px rgba(0,0,0,0.14),0 5px 22px 4px rgba(0,0,0,0.12)',
-    13: '0 7px 8px -4px rgba(0,0,0,0.2),0 13px 19px 2px rgba(0,0,0,0.14),0 5px 24px 4px rgba(0,0,0,0.12)',
-    14: '0 7px 9px -4px rgba(0,0,0,0.2),0 14px 21px 2px rgba(0,0,0,0.14),0 5px 26px 4px rgba(0,0,0,0.12)',
-    15: '0 8px 9px -5px rgba(0,0,0,0.2),0 15px 22px 2px rgba(0,0,0,0.14),0 6px 28px 5px rgba(0,0,0,0.12)',
-    16: '0 8px 10px -5px rgba(0,0,0,0.2),0 16px 24px 2px rgba(0,0,0,0.14),0 6px 30px 5px rgba(0,0,0,0.12)',
-    17: '0 8px 11px -5px rgba(0,0,0,0.2),0 17px 26px 2px rgba(0,0,0,0.14),0 6px 32px 5px rgba(0,0,0,0.12)',
-    18: '0 9px 11px -5px rgba(0,0,0,0.2),0 18px 28px 2px rgba(0,0,0,0.14),0 7px 34px 6px rgba(0,0,0,0.12)',
-    19: '0 9px 12px -6px rgba(0,0,0,0.2),0 19px 29px 2px rgba(0,0,0,0.14),0 7px 36px 6px rgba(0,0,0,0.12)',
-    20: '0 10px 13px -6px rgba(0,0,0,0.2),0 20px 31px 3px rgba(0,0,0,0.14),0 8px 38px 7px rgba(0,0,0,0.12)',
-    21: '0 10px 13px -6px rgba(0,0,0,0.2),0 21px 33px 3px rgba(0,0,0,0.14),0 8px 40px 7px rgba(0,0,0,0.12)',
-    22: '0 10px 14px -6px rgba(0,0,0,0.2),0 22px 35px 3px rgba(0,0,0,0.14),0 8px 42px 7px rgba(0,0,0,0.12)',
-    23: '0 11px 14px -7px rgba(0,0,0,0.2),0 23px 36px 3px rgba(0,0,0,0.14),0 9px 44px 8px rgba(0,0,0,0.12)',
-    24: '0 11px 15px -7px rgba(0,0,0,0.2),0 24px 38px 3px rgba(0,0,0,0.14),0 9px 46px 8px rgba(0,0,0,0.12)'
-  },
   shadows: {
     0: '0 0 0 0 rgba(0,0,0,0.2),0 0 0 0 rgba(0,0,0,0.14),0 0 0 0 rgba(0,0,0,0.12)',
     1: '0 1px 2px rgba(0,0,0,0.3),0 1px 3px 1px rgba(0,0,0,0.15)',
     2: '0 1px 2px rgba(0,0,0,0.3),0 2px 6px 2px rgba(0,0,0,0.15)',
-    3: '0 4px 8px 3px rgba(0,0,0,0.15),0 1px 3px rgba(0,0,0,0.3)',
-    4: '0 6px 10px 4px rgba(0,0,0,0.15),0 2px 3px rgba(0,0,0,0.3)',
-    5: '0 8px 12px 6px rgba(0,0,0,0.15),0 4px 4px rgba(0,0,0,0.3)'
+    3: '0 1px 3px rgba(0,0,0,0.3),0 4px 8px 3px rgba(0,0,0,0.15)',
+    4: '0 2px 3px rgba(0,0,0,0.3),0 6px 10px 4px rgba(0,0,0,0.15)',
+    5: '0 4px 4px rgba(0,0,0,0.3),0 8px 12px 6px rgba(0,0,0,0.15)'
   },
   fonts: {
     body: 'Roboto, sans-serif',
     heading: 'Roboto, sans-serif',
+    brand: 'Roboto, sans-serif',
+    plain: 'Roboto, sans-serif',
     monospace: '"Roboto Mono", monospace'
   },
   fontSizes: {
@@ -190,6 +181,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 +321,7 @@ const theme = {
   buttons: {
     variants: {
       base: {
-        variant: 'text.button',
+        variant: 'text.label-large',
         boxShadow: 'none',
         py: 0,
         px: "1.5rem",
@@ -380,30 +386,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 +456,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',
@@ -464,7 +476,7 @@ const theme = {
         borderRadius: 'extra-large'
       }
     },
-    backgroundColorOverlay: 0.11
+    backgroundColorOverlay: 3
   },
   paper: {
     overlays: {
@@ -529,154 +541,23 @@ const variant = ({
   tx = 'variants'
 }) => css.css(css.get(theme, tx + '.' + variant, css.get(theme, variant)))(theme);
 
-const BoxBase = /*#__PURE__*/_styled__default['default']('div', process.env.NODE_ENV === "production" ? {
-  shouldForwardProp: shouldForwardProp__default['default'],
+const BoxBase = /*#__PURE__*/_styled__default["default"]('div', process.env.NODE_ENV === "production" ? {
+  shouldForwardProp: shouldForwardProp__default["default"],
   target: "e25ivq30"
 } : {
-  shouldForwardProp: shouldForwardProp__default['default'],
+  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();
-  return /*#__PURE__*/jsxRuntime.jsx(BoxBase, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(BoxBase, {
     ref: forwardedRef,
-    theme: theme
-  }, props));
-});
-
-const ColorModeContext = /*#__PURE__*/react$1.createContext({
-  colorMode: 'default',
-  setColorMode: () => {
-    /*noop*/
-  }
-});
-const useColorMode = () => {
-  return react$1.useContext(ColorModeContext);
-};
-
-const THEME_LOCAL_STORAGE_KEY = 'basic-ui-theme';
-const DEFAULT_THEME_CLASS = `css-${hash__default['default']('basic-ui-default-theme')}`;
-const DARK_THEME_CLASS = `css-${hash__default['default']('basic-ui-dark-theme')}`;
-
-function saveColorMode(colorMode, saveToStorage = true) {
-  if (saveToStorage) {
-    window.localStorage.setItem(THEME_LOCAL_STORAGE_KEY, colorMode || 'default');
-  }
-
-  const [add, remove] = colorMode === 'dark' ? [DARK_THEME_CLASS, DEFAULT_THEME_CLASS] : [DEFAULT_THEME_CLASS, DARK_THEME_CLASS];
-
-  if (!document.body.classList.contains(remove)) {
-    document.body.classList.add(add);
-    return;
-  }
-
-  document.body.classList.replace(remove, add);
-}
-
-const ColorModeProvider = props => {
-  const {
-    children,
-    styles
-  } = props;
-  const [colorMode, _setColorMode] = react$1.useState();
-  const setColorMode = react$1.useCallback((colorMode, saveToStorage = true) => {
-    saveColorMode(colorMode || 'default', saveToStorage);
-
-    _setColorMode(colorMode);
-  }, []);
-  const colorModeObject = react$1.useMemo(() => ({
-    colorMode,
-    setColorMode
-  }), [colorMode, setColorMode]);
-  react$1.useEffect(() => {
-    _setColorMode(document.body.classList.contains(DARK_THEME_CLASS) ? 'dark' : 'default');
-
-    const darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    darkQuery == null ? void 0 : darkQuery.addListener(e => {
-      setColorMode(e.matches ? 'dark' : 'default', false);
-    });
-  }, [setColorMode]);
-  const globalStyles = react$1.useMemo(() => {
-    const ret = {
-      body: _extends__default['default']({
-        colorScheme: 'light'
-      }, styles['default'] || {})
-    };
-    ret[`.${DEFAULT_THEME_CLASS}`] = _extends__default['default']({
-      colorScheme: 'light'
-    }, styles['default'] || {});
-
-    for (const key in styles) {
-      if (key === 'default') {
-        continue;
-      }
-
-      ret[`.${DARK_THEME_CLASS}`] = _extends__default['default']({
-        colorScheme: 'dark'
-      }, styles[key]);
-    }
-
-    return ret;
-  }, [styles]);
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(react.Global, {
-      styles: globalStyles
-    }), /*#__PURE__*/jsxRuntime.jsx(ColorModeContext.Provider, {
-      value: colorModeObject,
-      children: children
-    })]
-  });
-};
-
-const toVarName = (key, suffix = '') => `--${key}${suffix ? `--${suffix}` : ''}`;
-
-const toVarValue = (key, value, suffix = '') => `var(${toVarName(key, suffix)}, ${value})`;
-
-function themify(obj, vars, root = '') {
-  Object.keys(obj).forEach(key => {
-    if (key === 'modes') {
-      return;
-    }
-
-    const value = obj[key];
-    const varName = root.length > 0 ? `${root}-${key}` : `${key}`;
-
-    if (typeof value === 'object') {
-      obj[key] = themify(obj[key], vars, varName);
-    } else {
-      vars[toVarName(varName)] = value;
-      obj[key] = toVarValue(varName, value);
-
-      try {
-        const rgb = polished.parseToRgb(value);
-        vars[toVarName(varName, 'rgb')] = `${rgb.red},${rgb.green},${rgb.blue}`;
-        obj[key + '_rgb'] = toVarValue(varName, value, 'rgb');
-      } catch (err) {// do nothing
-      }
-    }
-  });
-  return obj;
-}
-
-function getTheme(theme) {
-  const colorModes = {
-    default: {}
-  };
-  const themeClone = JSON.parse(JSON.stringify(theme)); // default
-
-  themeClone.colors = themify(themeClone.colors, colorModes.default, ''); // other modes
-
-  Object.keys(themeClone.colors.modes).forEach(key => {
-    colorModes[key] = {};
-    themeClone.colors.modes[key] = themify(themeClone.colors.modes[key], colorModes[key], '');
+    theme: theme,
+    ...props
   });
-  return {
-    theme: themeClone,
-    colorModes
-  };
-}
+});
 
 const alpha = (colorString, alphaValue) => theme => {
   const color = css.get(theme, 'colors.' + colorString, colorString);
@@ -689,11 +570,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') {
@@ -710,7 +596,8 @@ function getDarkThemeBackgroundOverlay(theme, backgroundOverlay, overlayColor =
   }
 
   return {
-    [`.${DARK_THEME_CLASS} &, &.${DARK_THEME_CLASS}`]: _extends__default['default']({}, getBackgroundOverlay(theme, backgroundOverlay, overlayColor))
+    [`.${dynamicTheme.DARK_SCHEME_CLASS} &, &.${dynamicTheme.DARK_SCHEME_CLASS}`]: { ...getBackgroundOverlay(theme, backgroundOverlay, overlayColor)
+    }
   };
 }
 
@@ -721,27 +608,30 @@ const Paper = /*#__PURE__*/react$1.forwardRef(function Paper(props, forwardedRef
     backgroundOverlay,
     darkThemeBackgroundOverlay,
     __css = {},
-    children
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["outlined", "elevation", "backgroundOverlay", "darkThemeBackgroundOverlay", "__css", "children"]);
-
+    children,
+    ...otherProps
+  } = props;
   const theme = useTheme();
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
     ref: forwardedRef,
-    __css: _extends__default['default']({
+    __css: {
       backgroundColor: 'surface',
       boxShadow: String(elevation),
       ':focus': {
         outline: 'none'
-      }
-    }, outlined ? {
-      borderStyle: 'solid',
-      borderWidth: "0.0625rem",
-      borderColor: alpha('on.surface', 0.12)
-    } : {}, backgroundOverlay ? getBackgroundOverlay(theme, backgroundOverlay, 'primary') : {}, darkThemeBackgroundOverlay ? getDarkThemeBackgroundOverlay(theme, darkThemeBackgroundOverlay, 'primary') : {}, __css)
-  }, otherProps, {
+      },
+      ...(outlined ? {
+        borderStyle: 'solid',
+        borderWidth: "0.0625rem",
+        borderColor: alpha('on.surface', 0.12)
+      } : {}),
+      ...(backgroundOverlay ? getBackgroundOverlay(theme, backgroundOverlay, 'primary') : {}),
+      ...(darkThemeBackgroundOverlay ? getDarkThemeBackgroundOverlay(theme, darkThemeBackgroundOverlay, 'primary') : {}),
+      ...__css
+    },
+    ...otherProps,
     children: children
-  }));
+  });
 });
 
 const AppBar = /*#__PURE__*/react$1.forwardRef(function AppBar(props, forwardedRef) {
@@ -749,10 +639,9 @@ const AppBar = /*#__PURE__*/react$1.forwardRef(function AppBar(props, forwardedR
     elevation: elevationProp = 'default',
     variant: variantProp = 'default',
     size = 'default',
-    __css = {}
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["elevation", "variant", "size", "__css"]);
-
+    __css = {},
+    ...otherProps
+  } = props;
   const [elevation, setElevation] = react$1.useState(elevationProp);
   const theme = useTheme();
   react$1.useEffect(() => {
@@ -780,38 +669,40 @@ const AppBar = /*#__PURE__*/react$1.forwardRef(function AppBar(props, forwardedR
       variant: variantProp,
       size
     },
-    children: /*#__PURE__*/jsxRuntime.jsx(Paper, _extends__default['default']({
+    children: /*#__PURE__*/jsxRuntime.jsx(Paper, {
       ref: forwardedRef,
       theme: theme,
       variant: "square",
       backgroundOverlay: elevation === 'elevated' && variantProp === 'default' ? css.get(theme, `appbar.elevations.${elevation}.boxShadow`, 2) : 0,
       color: variantProp === 'default' || variantProp === 'transparent' ? 'on.surface' : `on.${variantProp}`,
-      __css: _extends__default['default']({
+      __css: {
         boxSizing: 'border-box',
         display: 'inline-flex',
         alignItems: 'center',
         width: '100%',
         overflow: 'hidden',
-        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)'
-      }, css.get(theme, `appbar.sizes.${size}`), css.get(theme, `appbar.variants.${variantProp}`), __css)
-    }, otherProps))
+        transition: `box-shadow .28s ${EASING_STANDARD}`,
+        ...css.get(theme, `appbar.sizes.${size}`),
+        ...css.get(theme, `appbar.variants.${variantProp}`),
+        ...__css
+      },
+      ...otherProps
+    })
   });
 });
 
 const BaseButton = /*#__PURE__*/react$1.forwardRef((props, ref) => {
   const theme = react.useTheme();
-
   const {
     __css,
     variant: variantProp,
-    elevation
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["__css", "variant", "elevation"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+    elevation,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
     as: "button",
     ref: ref,
-    __css: _extends__default['default']({
+    __css: {
       boxSizing: 'border-box',
       position: 'relative',
       appearance: 'none',
@@ -828,32 +719,37 @@ const BaseButton = /*#__PURE__*/react$1.forwardRef((props, ref) => {
       touchAction: 'manipulation',
       userSelect: 'none',
       minWidth: 'auto',
+      whiteSpace: 'nowrap',
       '&::-moz-focus-inner': {
         border: 0
-      }
-    }, styledSystem.variant({
-      scale: 'buttons.variants',
-      prop: 'variant',
-      variants: {
-        text: {}
-      }
-    })({
-      variant: variantProp,
-      theme
-    }), styledSystem.variant({
-      scale: 'buttons.elevations',
-      prop: 'elevation',
-      variants: {
-        none: {}
-      }
-    })({
-      elevation,
-      theme
-    }), __css)
-  }, otherProps));
+      },
+      ...styledSystem.variant({
+        scale: 'buttons.variants',
+        prop: 'variant',
+        variants: {
+          text: {}
+        }
+      })({
+        variant: variantProp,
+        theme
+      }),
+      ...styledSystem.variant({
+        scale: 'buttons.elevations',
+        prop: 'elevation',
+        variants: {
+          none: {}
+        }
+      })({
+        elevation,
+        theme
+      }),
+      ...__css
+    },
+    ...otherProps
+  });
 });
 
-const TransparentButton = /*#__PURE__*/_styled__default['default'](BaseButton, process.env.NODE_ENV === "production" ? {
+const TransparentButton = /*#__PURE__*/_styled__default["default"](BaseButton, process.env.NODE_ENV === "production" ? {
   target: "e18rm4q20"
 } : {
   target: "e18rm4q20",
@@ -907,7 +803,7 @@ function getRippleProperties$3(theme) {
   };
 }
 
-const FilledButton = /*#__PURE__*/_styled__default['default'](BaseButton, process.env.NODE_ENV === "production" ? {
+const FilledButton = /*#__PURE__*/_styled__default["default"](BaseButton, process.env.NODE_ENV === "production" ? {
   target: "ex8w9nt0"
 } : {
   target: "ex8w9nt0",
@@ -931,10 +827,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 +856,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`),
@@ -971,12 +867,12 @@ function getRippleProperties$2(theme) {
 }
 
 function getRippleProperties$1(theme) {
-  return _extends__default['default']({}, getRippleProperties$2(theme), {
+  return { ...getRippleProperties$2(theme),
     rippleEnabled: true
-  });
+  };
 }
 
-const OutlinedButton = /*#__PURE__*/_styled__default['default'](TransparentButton, process.env.NODE_ENV === "production" ? {
+const OutlinedButton = /*#__PURE__*/_styled__default["default"](TransparentButton, process.env.NODE_ENV === "production" ? {
   target: "eo0fwlz0"
 } : {
   target: "eo0fwlz0",
@@ -1023,19 +919,19 @@ const OutlinedButton = /*#__PURE__*/_styled__default['default'](TransparentButto
 }, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk91dGxpbmVkQnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPOEIiLCJmaWxlIjoiT3V0bGluZWRCdXR0b24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQHN0eWxlZC1zeXN0ZW0vY3NzJztcbmltcG9ydCB7IHJlbSB9IGZyb20gJ3BvbGlzaGVkJztcblxuaW1wb3J0IHsgYWxwaGEgfSBmcm9tICcuLi9jb2xvcic7XG5pbXBvcnQgeyBUcmFuc3BhcmVudEJ1dHRvbiB9IGZyb20gJy4vVHJhbnNwYXJlbnRCdXR0b24nO1xuXG5leHBvcnQgY29uc3QgT3V0bGluZWRCdXR0b24gPSBzdHlsZWQoVHJhbnNwYXJlbnRCdXR0b24pKFxuICBjc3Moe1xuICAgIGJvcmRlclN0eWxlOiAnc29saWQnLFxuICAgIGJvcmRlcldpZHRoOiByZW0oMSksXG4gICAgYm9yZGVyQ29sb3I6ICdvdXRsaW5lJyxcbiAgICBib3hTaGFkb3c6IDAsXG4gICAgJyY6Zm9jdXMsOiZhY3RpdmUsOiZob3Zlcic6IHsgYm94U2hhZG93OiAwIH0sXG4gICAgJyY6Zm9jdXMtdmlzaWJsZSwmOmFjdGl2ZSc6IHtcbiAgICAgIGJvcmRlckNvbG9yOiAnY3VycmVudENvbG9yJyxcbiAgICB9LFxuICAgICcmOmRpc2FibGVkJzoge1xuICAgICAgY29sb3I6IGFscGhhKCdvbi5zdXJmYWNlJywgMC4zOCksXG4gICAgICBib3JkZXJDb2xvcjogYWxwaGEoJ29uLnN1cmZhY2UnLCAwLjEyKSxcbiAgICAgIGN1cnNvcjogJ2RlZmF1bHQnLFxuICAgIH0sXG4gIH0pLFxuICAoeyBpc0dyb3VwZWRCdXR0b24gPSBmYWxzZSB9KSA9PlxuICAgIGlzR3JvdXBlZEJ1dHRvbiAmJiB7XG4gICAgICAnW2RhdGEtYnV0dG9uLWdyb3VwPVwiXCJdICYnOiB7XG4gICAgICAgICc6Zmlyc3Qtb2YtdHlwZSc6IHtcbiAgICAgICAgICBib3JkZXJUb3BSaWdodFJhZGl1czogMCxcbiAgICAgICAgICBib3JkZXJCb3R0b21SaWdodFJhZGl1czogMCxcbiAgICAgICAgfSxcbiAgICAgICAgJzpub3QoOmZpcnN0LW9mLXR5cGUpOm5vdCg6bGFzdC1vZi10eXBlKSc6IHtcbiAgICAgICAgICBib3JkZXJSYWRpdXM6IDAsXG4gICAgICAgICAgYm9yZGVyUmlnaHRXaWR0aDogMCxcbiAgICAgICAgICBib3JkZXJMZWZ0V2lkdGg6IDAsXG4gICAgICAgIH0sXG4gICAgICAgICc6bGFzdC1vZi10eXBlJzoge1xuICAgICAgICAgIGJvcmRlclRvcExlZnRSYWRpdXM6IDAsXG4gICAgICAgICAgYm9yZGVyQm90dG9tTGVmdFJhZGl1czogMCxcbiAgICAgICAgICBib3JkZXJMZWZ0U3R5bGU6ICdzb2xpZCcsXG4gICAgICAgICAgYm9yZGVyTGVmdFdpZHRoOiByZW0oMSksXG4gICAgICAgIH0sXG4gICAgICAgICc6bGFzdC1vZi10eXBlOm50aC1vZi10eXBlKDIpJzoge1xuICAgICAgICAgIGJvcmRlckxlZnRXaWR0aDogMCxcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgfVxuKTtcbiJdfQ== */");
 
 function getRippleProperties(theme) {
-  return _extends__default['default']({}, getRippleProperties$2(theme), {
+  return { ...getRippleProperties$2(theme),
     center: true,
     rippleEnabled: true
-  });
+  };
 }
 
-const RIPPLE_BACKGROUND_COLOR = `--css-${hash__default['default']('basic-ui-ripple-fg-bg-color')}`;
-const RIPPLE_TRANSLATE_START = `--css-${hash__default['default']('basic-ui-ripple-fg-translate-start')}`;
-const RIPPLE_TRANSLATE_END = `--css-${hash__default['default']('basic-ui-ripple-fg-translate-end')}`;
-const RIPPLE_SCALE_END = `--css-${hash__default['default']('basic-ui-ripple-fg-scale')}`;
-const RIPPLE_OPACITY_END = `--css-${hash__default['default']('basic-ui-ripple-fg-opacity')}`;
-const RIPPLE_SIZE = `--css-${hash__default['default']('basic-ui-ripple-fg-size')}`;
-const RIPPLE_POSITION = `--css-${hash__default['default']('basic-ui-ripple-fg-position')}`;
+const RIPPLE_BACKGROUND_COLOR = `--css-${hash__default["default"]('basic-ui-ripple-fg-bg-color')}`;
+const RIPPLE_TRANSLATE_START = `--css-${hash__default["default"]('basic-ui-ripple-fg-translate-start')}`;
+const RIPPLE_TRANSLATE_END = `--css-${hash__default["default"]('basic-ui-ripple-fg-translate-end')}`;
+const RIPPLE_SCALE_END = `--css-${hash__default["default"]('basic-ui-ripple-fg-scale')}`;
+const RIPPLE_OPACITY_END = `--css-${hash__default["default"]('basic-ui-ripple-fg-opacity')}`;
+const RIPPLE_SIZE = `--css-${hash__default["default"]('basic-ui-ripple-fg-size')}`;
+const RIPPLE_POSITION = `--css-${hash__default["default"]('basic-ui-ripple-fg-position')}`;
 
 const rippleStyle = ({
   animation
@@ -1055,7 +951,7 @@ const rippleStyle = ({
   animation,
   willChange: 'opacity,transform'
 });
-const Ripple = _styled__default['default']("div", process.env.NODE_ENV === "production" ? {
+const Ripple = _styled__default["default"]("div", process.env.NODE_ENV === "production" ? {
   target: "ebk8cct0"
 } : {
   target: "ebk8cct0",
@@ -1129,9 +1025,11 @@ function calculateRipplePosition(rect, clientX, clientY, center = false) {
     x: clientX - rect.left,
     y: clientY - rect.top
   };
-  return _extends__default['default']({
-    state: 'entering'
-  }, rippleStart, getScale(rect));
+  return {
+    state: 'entering',
+    ...rippleStart,
+    ...getScale(rect)
+  };
 }
 
 const useRipple = opts => {
@@ -1161,19 +1059,22 @@ const useRipple = opts => {
 
   const setLeft = () => {
     rippleState.current = 'left';
-    setRipple(_extends__default['default']({}, defaultRipple));
+    setRipple({ ...defaultRipple
+    });
   };
 
   const setLeaving = () => {
     clearTimeout(enteringTimeout.current);
     rippleState.current = 'leaving';
-    setRipple(ripple => _extends__default['default']({}, ripple));
+    setRipple(ripple => ({ ...ripple
+    }));
     leavingTimeout.current = window.setTimeout(setLeft, leaveDuration);
   };
 
   const setEntered = () => {
     rippleState.current = 'entered';
-    setRipple(ripple => _extends__default['default']({}, ripple));
+    setRipple(ripple => ({ ...ripple
+    }));
 
     if (shouldLeave.current) {
       setLeaving();
@@ -1193,7 +1094,8 @@ const useRipple = opts => {
     clearTimeout(enteringTimeout.current);
     shouldLeave.current = false;
     rippleState.current = 'restart';
-    setRipple(_extends__default['default']({}, defaultRipple));
+    setRipple({ ...defaultRipple
+    });
     restartTimeout.current = requestAnimationFrame(() => {
       rippleState.current = 'entering';
       setRipple(calculateRipplePosition(rect, clientX, clientY, center));
@@ -1247,13 +1149,11 @@ const disabledHandler = () => {
 };
 
 function useRippleHandlers(opts) {
-  const _useRipple = useRipple(opts),
-        {
+  const {
     activate,
-    deactivate
-  } = _useRipple,
-        rest = _objectWithoutPropertiesLoose__default['default'](_useRipple, ["activate", "deactivate"]); // Pointer activation
-
+    deactivate,
+    ...rest
+  } = useRipple(opts); // Pointer activation
 
   const handlePointerUp = () => {
     window.removeEventListener('pointerup', handlePointerUp);
@@ -1292,31 +1192,32 @@ function useRippleHandlers(opts) {
     window.addEventListener('keyup', handleKeyUp);
   };
 
-  return _extends__default['default']({
+  return {
     handleKeyDown: opts.disabled ? disabledHandler : handleKeyDown,
-    handlePointerDown: opts.disabled ? disabledHandler : handlePointerDown
-  }, rest);
+    handlePointerDown: opts.disabled ? disabledHandler : handlePointerDown,
+    ...rest
+  };
 }
 
-function useRippleSurface(opts) {
+function useRippleSurface(opts = {}) {
   let {
     // eslint-disable-next-line prefer-const
     baseOpacity = 0,
     hoverOpacity = 0.04,
     focusOpacity = 0.12,
     pressedOpacity = 0.12,
-    rippleColor = 'on.surface'
+    rippleColor = 'on.surface',
+    // eslint-disable-next-line prefer-const
+    mouseFocus = false
   } = opts;
-
   const {
     onKeyDown,
     onPointerDown,
     style = {},
     disabled,
-    rippleEnabled = true
-  } = opts,
-        rippleProps = _objectWithoutPropertiesLoose__default['default'](opts, ["onKeyDown", "onPointerDown", "style", "disabled", "rippleEnabled"]);
-
+    rippleEnabled = true,
+    ...rippleProps
+  } = opts;
   const theme = useTheme();
   rippleColor = css.get(theme, `colors.${rippleColor}`) || rippleColor;
 
@@ -1331,13 +1232,14 @@ function useRippleSurface(opts) {
     handlePointerDown,
     style: animationStyle,
     animation
-  } = useRippleHandlers(_extends__default['default']({
+  } = useRippleHandlers({
     opacity: Number(pressedOpacity),
     backgroundColor: rippleColor,
-    disabled
-  }, rippleProps));
-
-  const css$1 = _extends__default['default']({
+    disabled,
+    ...rippleProps
+  });
+  const focusPseudoClass = mouseFocus ? 'focus' : 'focus-visible';
+  const css$1 = react$1.useMemo(() => ({
     overflow: 'hidden',
     position: 'relative',
     cursor: 'pointer',
@@ -1362,42 +1264,46 @@ function useRippleSurface(opts) {
     '&:hover::before': {
       opacity: hoverOpacity
     },
-    '&:focus-visible::before': {
+    [`&:${focusPseudoClass}::before`]: {
       opacity: focusOpacity
-    }
-  }, !rippleEnabled && {
-    '&:active::before': {
-      opacity: pressedOpacity
-    }
-  }, {
+    },
+    ...(!rippleEnabled && {
+      '&:active::before': {
+        opacity: pressedOpacity
+      }
+    }),
     '&[aria-pressed="true"]::before': {
       opacity: baseOpacity + pressedOpacity
     },
     '&[aria-pressed="true"]:hover::before': {
       opacity: pressedOpacity + hoverOpacity
     },
-    '&[aria-pressed="true"]:focus-visible::before': {
+    [`&[aria-pressed="true"]:${focusPseudoClass}::before`]: {
       opacity: pressedOpacity + focusOpacity
-    }
-  }, !rippleEnabled && {
-    '&[aria-pressed="true"]:active::before': {
-      opacity: pressedOpacity + pressedOpacity
-    }
-  }, {
+    },
+    ...(!rippleEnabled && {
+      '&[aria-pressed="true"]:active::before': {
+        opacity: pressedOpacity + pressedOpacity
+      }
+    }),
     ['&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' + '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' + '&[data-disabled]:active::before,&:disabled[aria-pressed="true"]::before']: {
       opacity: 0
     },
     '&:disabled,&[data-disabled]': {
       cursor: 'default'
-    }
-  }, rippleEnabled && {
-    '&::after': _extends__default['default']({}, rippleStyle({
-      animation
-    }))
-  });
-
+    },
+    // ripple
+    ...(rippleEnabled && {
+      '&::after': { ...rippleStyle({
+          animation
+        })
+      }
+    })
+  }), [animation, baseOpacity, focusOpacity, focusPseudoClass, hoverOpacity, pressedOpacity, rippleColor, rippleEnabled]);
   return {
-    style: _extends__default['default']({}, animationStyle, style),
+    style: { ...animationStyle,
+      ...style
+    },
     onKeyDown: core.wrapEvent(onKeyDown, handleKeyDown),
     onPointerDown: core.wrapEvent(onPointerDown, handlePointerDown),
     __css: css$1
@@ -1408,23 +1314,46 @@ const RippleBox = /*#__PURE__*/react$1.forwardRef(function RippleBox(props, forw
   const {
     as = 'div',
     __css,
+    // Cherry picking the ripple props to prevent it from falling down to
+    // the Box component
+    onKeyDown,
     // eslint-disable-line @typescript-eslint/no-unused-vars
-    disabled
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "__css", "onKeyDown", "onPointerDown", "baseOpacity", "hoverOpacity", "focusOpacity", "pressedOpacity", "rippleColor", "center", "disabled", "rippleEnabled", "style"]);
-
-  const _useRippleSurface = useRippleSurface(props),
-        {
-    __css: rippleCss
-  } = _useRippleSurface,
-        rippleProps = _objectWithoutPropertiesLoose__default['default'](_useRippleSurface, ["__css"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+    onPointerDown,
+    // eslint-disable-line @typescript-eslint/no-unused-vars
+    baseOpacity,
+    // eslint-disable-line @typescript-eslint/no-unused-vars
+    hoverOpacity,
+    // eslint-disable-line @typescript-eslint/no-unused-vars
+    focusOpacity,
+    // eslint-disable-line @typescript-eslint/no-unused-vars
+    pressedOpacity,
+    // eslint-disable-line @typescript-eslint/no-unused-vars
+    rippleColor,
+    // eslint-disable-line @typescript-eslint/no-unused-vars
+    center,
+    // eslint-disable-line @typescript-eslint/no-unused-vars
+    disabled,
+    // eslint-disable-line @typescript-eslint/no-unused-vars
+    rippleEnabled,
+    // eslint-disable-line @typescript-eslint/no-unused-vars
+    style,
+    // eslint-disable-line @typescript-eslint/no-unused-vars
+    ...otherProps
+  } = props;
+  const {
+    __css: rippleCss,
+    ...rippleProps
+  } = useRippleSurface(props);
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
     as: as,
     ref: forwardedRef,
-    __css: _extends__default['default']({}, rippleCss, __css),
-    disabled
-  }, otherProps, rippleProps));
+    __css: { ...rippleCss,
+      ...__css
+    },
+    disabled,
+    ...otherProps,
+    ...rippleProps
+  });
 });
 
 const ButtonGroupContext = /*#__PURE__*/react$1.createContext(null);
@@ -1462,30 +1391,28 @@ function getFallbackElevation(variant = 'text') {
 
 const Button = /*#__PURE__*/react$1.forwardRef(function Button(props, forwardedRef) {
   const buttonGroup = useButtonGroupContext();
-
   const {
     children,
-    variant = (buttonGroup == null ? void 0 : buttonGroup.variant) || 'text',
+    variant = buttonGroup?.variant || 'text',
     onPointerDown: onPointerDownProp,
     onKeyDown: onKeyDownProp,
     color = 'primary',
     disabled = false,
     elevation = getFallbackElevation(props.variant),
-    style: styleProp
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["children", "variant", "onPointerDown", "onKeyDown", "color", "disabled", "elevation", "style"]);
-
+    style: styleProp,
+    ...otherProps
+  } = props;
   const theme = useTheme();
   const Comp = componentMapping[variant];
   const getRippleProperties = rippleMapping[variant];
-  const rippleProps = useRippleSurface(_extends__default['default']({}, getRippleProperties(theme), {
+  const rippleProps = useRippleSurface({ ...getRippleProperties(theme),
     rippleColor: 'currentColor',
     disabled,
     style: styleProp,
     onKeyDown: onKeyDownProp,
     onPointerDown: onPointerDownProp
-  }));
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
     ref: forwardedRef,
     variant: variant,
     theme: theme,
@@ -1493,49 +1420,50 @@ const Button = /*#__PURE__*/react$1.forwardRef(function Button(props, forwardedR
     "aria-disabled": disabled ? 'true' : undefined,
     color: color,
     elevation: elevation,
-    isGroupedButton: Boolean(buttonGroup)
-  }, rippleProps, otherProps, {
+    isGroupedButton: Boolean(buttonGroup),
+    ...rippleProps,
+    ...otherProps,
     children: children
-  }));
+  });
 });
 
 const ButtonGroup = /*#__PURE__*/react$1.forwardRef(function ButtonGroup(props, forwardedRef) {
   const {
     as: Comp = 'div',
     variant = 'text',
-    direction = 'row'
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "variant", "direction"]);
-
+    direction = 'row',
+    ...otherProps
+  } = props;
   const value = react$1.useMemo(() => ({
     direction,
     variant
   }), [direction, variant]);
   return /*#__PURE__*/jsxRuntime.jsx(ButtonGroupContext.Provider, {
     value: value,
-    children: /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
+    children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
       ref: forwardedRef,
       role: "group",
       "data-button-group": "",
-      "data-button-group-direction": direction
-    }, otherProps))
+      "data-button-group-direction": direction,
+      ...otherProps
+    })
   });
 });
 
 const AppBarButton = /*#__PURE__*/react$1.forwardRef(function AppBarButton(props, forwardedRef) {
   const {
-    variant = 'icon'
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["variant"]);
-
+    variant = 'icon',
+    ...otherProps
+  } = props;
   const {
     variant: appbarVariant
   } = useAppBarContext();
-  return /*#__PURE__*/jsxRuntime.jsx(Button, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(Button, {
     ref: forwardedRef,
     variant: variant,
-    color: appbarVariant === 'default' ? 'on.surface' : `on.${appbarVariant}`
-  }, otherProps));
+    color: appbarVariant === 'default' ? 'on.surface' : `on.${appbarVariant}`,
+    ...otherProps
+  });
 });
 
 const mappings = {
@@ -1556,56 +1484,58 @@ const mappings = {
 const Text = /*#__PURE__*/react$1.forwardRef(function Text(props, forwardedRef) {
   const {
     as,
-    variant = 'body1'
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "variant"]);
-
+    variant = 'body-medium',
+    ...otherProps
+  } = props;
   let Comp = as;
 
   if (!Comp) {
     Comp = mappings[variant] || 'p';
   }
 
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
     as: Comp,
     ref: forwardedRef,
     tx: "text",
     variant: variant,
     __css: {
       color: 'inherit'
-    }
-  }, otherProps));
+    },
+    ...otherProps
+  });
 });
 
 const Alert = /*#__PURE__*/react$1.forwardRef(function Alert(props, forwardedRef) {
   const {
     as = 'div',
     color = 'secondary',
-    __css
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "color", "__css"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(Text, _extends__default['default']({
+    __css,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(Text, {
     ref: forwardedRef,
     as: as,
-    variant: "body1",
-    __css: _extends__default['default']({
+    variant: "body-medium",
+    __css: {
       p: 3,
       bg: alpha(color, 0.1),
       borderRadius: 'extra-small',
       borderColor: alpha(color, 0.2),
       borderStyle: 'solid',
-      borderWidth: "0.0625rem"
-    }, __css)
-  }, otherProps));
+      borderWidth: "0.0625rem",
+      ...__css
+    },
+    ...otherProps
+  });
 });
 
 const Badge = /*#__PURE__*/react$1.forwardRef(function Badge(props, forwardedRef) {
-  const otherProps = _extends__default['default']({}, props);
-
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
-    ref: forwardedRef
-  }, otherProps));
+  const { ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
+    ref: forwardedRef,
+    ...otherProps
+  });
 });
 
 const BaseLine = () => {
@@ -1746,13 +1676,12 @@ const BaseLine = () => {
 
 const Scrim = /*#__PURE__*/react$1.forwardRef(function Scrim(props, forwardedRef) {
   const {
-    __css
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["__css"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+    __css,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
     ref: forwardedRef,
-    __css: _extends__default['default']({
+    __css: {
       position: 'fixed',
       top: '0',
       left: '0',
@@ -1763,20 +1692,21 @@ const Scrim = /*#__PURE__*/react$1.forwardRef(function Scrim(props, forwardedRef
       backgroundColor: alpha('#000', 0.32),
       willChange: 'opacity',
       zIndex: -1,
-      pointerEvents: 'none'
-    }, __css)
-  }, otherProps));
+      pointerEvents: 'none',
+      ...__css
+    },
+    ...otherProps
+  });
 });
 
 const DialogContainer = /*#__PURE__*/react$1.forwardRef(function DialogContainer(props, forwardedRef) {
   const {
-    __css
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["__css"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+    __css,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
     ref: forwardedRef,
-    __css: _extends__default['default']({
+    __css: {
       position: 'absolute',
       display: 'flex',
       alignItems: 'center',
@@ -1785,9 +1715,11 @@ const DialogContainer = /*#__PURE__*/react$1.forwardRef(function DialogContainer
       height: '100%',
       willChange: 'transform,opacity',
       transformOrigin: 'center center',
-      pointerEvents: 'none'
-    }, __css)
-  }, otherProps));
+      pointerEvents: 'none',
+      ...__css
+    },
+    ...otherProps
+  });
 });
 
 function useAnimation(opts) {
@@ -1811,22 +1743,22 @@ function useAnimation(opts) {
     open: openProp
   });
   const handleClose = react$1.useCallback(() => {
-    setAnimation(animation => animation.state === 'closed' ? animation : _extends__default['default']({}, animation, {
+    setAnimation(animation => animation.state === 'closed' ? animation : { ...animation,
       state: 'close',
       style: animationStyle.close || animationStyle.closed,
       timing: closeTimeoutInMilliseconds
-    }));
+    });
   }, [animationStyle, closeTimeoutInMilliseconds]);
   const handleOpen = react$1.useCallback(() => {
-    setAnimation(animation => animation.state === 'open' ? animation : _extends__default['default']({}, animation, {
+    setAnimation(animation => animation.state === 'open' ? animation : { ...animation,
       open: true,
       state: 'opening',
       style: animationStyle.opening || animationStyle.closed
-    }));
+    });
   }, [animationStyle]);
   react$1.useEffect(() => {
     if (state === 'opening') {
-      setAnimation(animation => _extends__default['default']({}, animation, {
+      setAnimation(animation => ({ ...animation,
         state: 'open',
         style: animationStyle.open,
         timing: openTimeoutInMilliseconds
@@ -1906,26 +1838,26 @@ const styles = {
 };
 function useDialogAnimation(opts) {
   const {
-    mode = 'grow'
-  } = opts,
-        otherOpts = _objectWithoutPropertiesLoose__default['default'](opts, ["mode"]);
-
+    mode = 'grow',
+    ...otherOpts
+  } = opts;
   const {
     open,
     state,
     style,
     timing
-  } = useAnimation(_extends__default['default']({
+  } = useAnimation({
     styles,
-    mode
-  }, otherOpts));
+    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, {
+    containerStyle: { ...style,
       transition
-    }),
+    },
     scrimStyle: {
       opacity: scrimOpacity,
       transition: scrimTransition
@@ -1939,44 +1871,45 @@ const DialogBackdrop = /*#__PURE__*/react$1.forwardRef(function DialogBackdrop(p
   const {
     open,
     onClose,
-    __css
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["open", "onClose", "__css"]);
-
+    __css,
+    ...otherProps
+  } = props;
   const pointerEvents = open ? undefined : 'none';
-  return /*#__PURE__*/jsxRuntime.jsx(ModalBackdrop, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(ModalBackdrop, {
     as: Box,
     ref: forwardedRef,
     onClose: onClose,
     style: {
       pointerEvents
     },
-    __css: _extends__default['default']({
+    __css: {
       position: 'fixed',
       top: '0',
       left: '0',
       right: '0',
       bottom: '0',
-      zIndex: 'dialog'
-    }, __css)
-  }, otherProps));
+      zIndex: 'dialog',
+      // Can't set overflow auto here otherwise slide animation
+      ...__css
+    },
+    ...otherProps
+  });
 });
 
 const Modal$1 = core.Modal;
 const BottomSheetSurface = /*#__PURE__*/react$1.forwardRef(function BottomSheetSurface(props, forwardedRef) {
   const {
-    __css
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["__css"]);
-
+    __css,
+    ...otherProps
+  } = props;
   const theme = useTheme();
-  return /*#__PURE__*/jsxRuntime.jsx(Modal$1, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(Modal$1, {
     ref: forwardedRef,
     as: Paper,
     theme: theme,
     elevation: 3,
     darkThemeBackgroundOverlay: 3,
-    __css: _extends__default['default']({
+    __css: {
       position: 'absolute',
       bg: 'surface',
       bottom: 0,
@@ -1988,18 +1921,19 @@ const BottomSheetSurface = /*#__PURE__*/react$1.forwardRef(function BottomSheetS
       maxWidth: "37.5rem",
       maxHeight: '50%',
       overflow: 'auto',
-      pointerEvents: 'auto'
-    }, __css)
-  }, otherProps));
+      pointerEvents: 'auto',
+      ...__css
+    },
+    ...otherProps
+  });
 });
 
 const BottomSheet = /*#__PURE__*/react$1.forwardRef(function BottomSheet(props, forwardedRef) {
   const {
     open: openProp = false,
-    onClose
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["open", "onClose"]);
-
+    onClose,
+    ...otherProps
+  } = props;
   const {
     containerStyle,
     scrimStyle,
@@ -2021,9 +1955,10 @@ const BottomSheet = /*#__PURE__*/react$1.forwardRef(function BottomSheet(props,
         __css: scrimStyle
       }), /*#__PURE__*/jsxRuntime.jsx(DialogContainer, {
         __css: containerStyle,
-        children: /*#__PURE__*/jsxRuntime.jsx(BottomSheetSurface, _extends__default['default']({
-          ref: forwardedRef
-        }, otherProps))
+        children: /*#__PURE__*/jsxRuntime.jsx(BottomSheetSurface, {
+          ref: forwardedRef,
+          ...otherProps
+        })
       })]
     })
   });
@@ -2043,16 +1978,15 @@ const Input = /*#__PURE__*/react$1.forwardRef(function Input(props, forwardedRef
     hasLabel = true,
     leadingIcon,
     trailingIcon,
-    multiline
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["__css", "as", "variant", "hasLabel", "leadingIcon", "trailingIcon", "multiline"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+    multiline,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
     as: as,
     ref: forwardedRef,
-    multiline: multiline
-  }, otherProps, {
-    __css: _extends__default['default']({
+    multiline: multiline,
+    ...otherProps,
+    __css: {
       WebkitTapHighlightColor: 'transparent',
       appearance: 'none',
       outline: 'none',
@@ -2068,16 +2002,16 @@ const Input = /*#__PURE__*/react$1.forwardRef(function Input(props, forwardedRef
       letterSpacing: "0.03125rem",
       textAlign: 'left',
       display: 'flex',
-      alignItems: 'center'
-    }, !multiline && {
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis'
-    }, {
+      alignItems: 'center',
+      ...(!multiline && {
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis'
+      }),
       '::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)
@@ -2098,19 +2032,23 @@ const Input = /*#__PURE__*/react$1.forwardRef(function Input(props, forwardedRef
         }
       },
       paddingLeft: leadingIcon ? polished.rem(PADDING_LEFT_WITH_ICON + ICON_WIDTH + PADDING_LEFT_WITHOUT_ICON) : polished.rem(PADDING_LEFT_WITHOUT_ICON),
-      paddingRight: trailingIcon ? polished.rem(PADDING_RIGHT_WITH_ICON + ICON_WIDTH + PADDING_RIGHT_WITHOUT_ICON) : polished.rem(PADDING_RIGHT_WITHOUT_ICON)
-    }, variant === 'outlined' && {
-      paddingTop: "1rem",
-      paddingBottom: "1rem"
-    }, variant === 'filled' && {
-      paddingTop: hasLabel ? "1.5rem" : "1rem",
-      paddingBottom: hasLabel ? "0.5rem" : "1rem"
-    }, multiline && {
-      resize: 'vertical',
-      paddingTop: 0,
-      marginTop: variant === 'outlined' || !hasLabel ? "1.125rem" : "1.625rem"
-    }, __css)
-  }));
+      paddingRight: trailingIcon ? polished.rem(PADDING_RIGHT_WITH_ICON + ICON_WIDTH + PADDING_RIGHT_WITHOUT_ICON) : polished.rem(PADDING_RIGHT_WITHOUT_ICON),
+      ...(variant === 'outlined' && {
+        paddingTop: "1rem",
+        paddingBottom: "1rem"
+      }),
+      ...(variant === 'filled' && {
+        paddingTop: hasLabel ? "1.5rem" : "1rem",
+        paddingBottom: hasLabel ? "0.5rem" : "1rem"
+      }),
+      ...(multiline && {
+        resize: 'vertical',
+        paddingTop: 0,
+        marginTop: variant === 'outlined' || !hasLabel ? "1.125rem" : "1.625rem"
+      }),
+      ...__css
+    }
+  });
 });
 
 const notchedoutlineContext = /*#__PURE__*/react$1.createContext(null);
@@ -2129,19 +2067,18 @@ const FloatingLabel = /*#__PURE__*/react$1.forwardRef(function FloatingLabel(pro
     style = {},
     translateX: translateXProp,
     translateY: translateYProp,
-    children
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["offsetX", "scale", "height", "active", "transitionTime", "style", "translateX", "translateY", "children"]);
-
+    children,
+    ...otherProps
+  } = props;
   const ctx = useNotchedOutlineContext();
   const notchStart = ctx ? ctx.notchStart : 0;
   const Text$1 = Text;
   const translateX = translateXProp !== undefined ? translateXProp : notchStart - offsetX;
   const translateY = translateYProp !== undefined ? translateYProp : -height / 2;
   const transform = active ? `translate(${polished.rem(translateX)}, ${polished.rem(translateY)}) scale(${scale})` : undefined;
-  return /*#__PURE__*/jsxRuntime.jsx(Text$1, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(Text$1, {
     as: "label",
-    variant: "subtitle1",
+    variant: "body-large",
     ref: forwardedRef,
     __css: {
       position: 'absolute',
@@ -2151,15 +2088,16 @@ 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']({
-      transform
-    }, style)
-  }, otherProps, {
+    style: {
+      transform,
+      ...style
+    },
+    ...otherProps,
     children: children
-  }));
+  });
 });
 
 const LineRipple = /*#__PURE__*/react$1.forwardRef(function LineRipple(props, forwardedRef) {
@@ -2170,10 +2108,9 @@ const LineRipple = /*#__PURE__*/react$1.forwardRef(function LineRipple(props, fo
     active = false,
     posx = -1,
     style: styleProp = {},
-    __css
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "transitionDuration", "color", "active", "posx", "style", "__css"]);
-
+    __css,
+    ...otherProps
+  } = props;
   const [style, setStyle] = react$1.useState();
   const theme = useTheme();
   const leaveTimeout = react$1.useRef();
@@ -2198,13 +2135,15 @@ const LineRipple = /*#__PURE__*/react$1.forwardRef(function LineRipple(props, fo
       clearTimeout(leaveTimeout.current);
     };
   }, [active, posx, transitionDuration]);
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
     as: asProp,
     ref: forwardedRef,
     bg: color,
     theme: theme,
-    style: _extends__default['default']({}, style, styleProp),
-    __css: _extends__default['default']({
+    style: { ...style,
+      ...styleProp
+    },
+    __css: {
       position: 'absolute',
       bottom: '0',
       left: '0',
@@ -2213,10 +2152,12 @@ 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)`,
-      opacity: 0
-    }, __css)
-  }, otherProps));
+      transition: `transform ${transitionDuration}ms ${EASING_STANDARD},opacity ${transitionDuration}ms ${EASING_STANDARD}`,
+      opacity: 0,
+      ...__css
+    },
+    ...otherProps
+  });
 });
 
 const makeSelector$1 = state => `input:${state} ~ &,` + `select:${state} ~ &,` + `button:${state} ~ &,` + `textarea:${state} ~ &`;
@@ -2227,7 +2168,7 @@ const Overlay = props => {
   } = props;
   const theme = useTheme();
   return /*#__PURE__*/jsxRuntime.jsx(Box, {
-    __css: _extends__default['default']({
+    __css: {
       position: 'absolute',
       top: 0,
       bottom: 0,
@@ -2246,10 +2187,11 @@ const Overlay = props => {
         cursor: 'default',
         color: alpha('on.surface', 0.6),
         opacity: 0.02
-      }
-    }, forceActive && {
-      opacity: css.get(theme, `buttons.overlays.transparent.focus.opacity`)
-    })
+      },
+      ...(forceActive && {
+        opacity: css.get(theme, `buttons.overlays.transparent.focus.opacity`)
+      })
+    }
   });
 };
 
@@ -2279,20 +2221,19 @@ const FilledContainer = /*#__PURE__*/react$1.forwardRef(function FilledContainer
     error = false,
     disabled = false,
     forceActive = false,
-    leadingIcon
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["label", "labelIsFloating", "inputId", "hasFocus", "color", "children", "error", "disabled", "forceActive", "leadingIcon"]);
-
+    leadingIcon,
+    ...otherProps
+  } = props;
   const finalLabelHeight = 16;
   const labelHeight = finalLabelHeight / 0.75;
   const inputHeight = 56;
   const color = error ? 'error' : colorProp;
   const active = hasFocus || forceActive;
-  return /*#__PURE__*/jsxRuntime.jsxs(Box, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsxs(Box, {
     ref: forwardedRef,
     disabled: disabled,
     active: active || error,
-    __css: _extends__default['default']({
+    __css: {
       position: 'relative',
       lineHeight: 0,
       width: '100%',
@@ -2301,14 +2242,16 @@ const FilledContainer = /*#__PURE__*/react$1.forwardRef(function FilledContainer
       boxSizing: 'border-box',
       borderTopRightRadius: "0.25rem",
       borderTopLeftRadius: "0.25rem",
-      color: alpha('on.surface-variant', 0.87)
-    }, disabled && {
-      backgroundColor: alpha('on.surface-variant', 0.08),
-      color: alpha('on.surface-variant', 0.38)
-    }, active && {
-      color: 'primary'
-    })
-  }, otherProps, {
+      color: alpha('on.surface-variant', 0.87),
+      ...(disabled && {
+        backgroundColor: alpha('on.surface-variant', 0.08),
+        color: alpha('on.surface-variant', 0.38)
+      }),
+      ...(active && {
+        color: 'primary'
+      })
+    },
+    ...otherProps,
     children: [label && /*#__PURE__*/jsxRuntime.jsx(FloatingLabel, {
       height: inputHeight,
       offsetX: leadingIcon ? PADDING_LEFT_WITH_ICON + ICON_WIDTH + PADDING_LEFT_WITHOUT_ICON : PADDING_LEFT_WITHOUT_ICON,
@@ -2328,18 +2271,18 @@ const FilledContainer = /*#__PURE__*/react$1.forwardRef(function FilledContainer
       active: active || error,
       color: color
     })]
-  }));
+  });
 });
 
 const NOTCH_PADDING = 4;
 
 const makeSelector = state => `input:${state} ~ & [data-notch-outline-item],` + `select:${state} ~ & [data-notch-outline-item],` + `[role="button"]:${state} ~ & [data-notch-outline-item],` + `textarea:${state} ~ & [data-notch-outline-item]`;
 
-const InnerContainer = /*#__PURE__*/_styled__default['default']('div', process.env.NODE_ENV === "production" ? {
-  shouldForwardProp: shouldForwardProp__default['default'],
+const InnerContainer = /*#__PURE__*/_styled__default["default"]('div', process.env.NODE_ENV === "production" ? {
+  shouldForwardProp: shouldForwardProp__default["default"],
   target: "ejp8zhv0"
 } : {
-  shouldForwardProp: shouldForwardProp__default['default'],
+  shouldForwardProp: shouldForwardProp__default["default"],
   target: "ejp8zhv0",
   label: "InnerContainer"
 })("position:absolute;display:flex;left:0;top:0;bottom:0;width:100%;height:100%;pointer-events:none;", ({
@@ -2379,32 +2322,32 @@ const InnerContainer = /*#__PURE__*/_styled__default['default']('div', process.e
     };
   }
 
-  const inactiveStyle = _extends__default['default']({
+  const inactiveStyle = {
     color: 'on.surface-variant',
-    borderColor: 'outline'
-  }, borderStyling(borderRadius, borderWidth));
-
+    borderColor: 'outline',
+    ...borderStyling(borderRadius, borderWidth)
+  };
   const hoverStyle = {
     borderColor: 'on.surface',
     color: 'on.surface-variant'
   };
-
-  const focusStyle = _extends__default['default']({
+  const focusStyle = {
     borderColor: color,
-    color: alpha(color, 0.87)
-  }, borderStyling(borderRadius, borderWidthWhenFocused));
-
+    color: alpha(color, 0.87),
+    ...borderStyling(borderRadius, borderWidthWhenFocused)
+  };
   const disabledStyle = {
     borderColor: alpha('on.surface', 0.06),
     color: alpha('on.surface', 0.38)
   };
   return css.css({
     // notch items styles when not focused
-    ['[data-notch-outline-item]']: _extends__default['default']({
+    ['[data-notch-outline-item]']: {
       boxSizing: 'border-box',
       borderStyle,
-      transition: `border-color .15s cubic-bezier(.4,0,.2,1)`
-    }, forceActive ? focusStyle : inactiveStyle),
+      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,
     // notch items styles when input is focused
@@ -2412,7 +2355,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 {
@@ -2426,12 +2369,11 @@ const NotchedOutline = /*#__PURE__*/react$1.forwardRef(function NotchedOutline(p
     notchActive = false,
     forceActive = false,
     children,
-    label
+    label,
+    ...otherProps
     /* eslint-enable prefer-const */
 
-  } = props,
-      otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["borderRadius", "borderColor", "borderWidth", "borderStyle", "notchStart", "notchWidth", "notchActive", "forceActive", "children", "label"]); // Minimum notch start position that makes sense. Otherwise it will mess up with the border/border radii
-
+  } = props; // Minimum notch start position that makes sense. Otherwise it will mess up with the border/border radii
 
   const MIN_NOTCH_POSX = (props.borderRadius || 0) + NOTCH_PADDING;
   const theme = useTheme();
@@ -2440,9 +2382,9 @@ const NotchedOutline = /*#__PURE__*/react$1.forwardRef(function NotchedOutline(p
     value: {
       notchStart
     },
-    children: [children, /*#__PURE__*/jsxRuntime.jsxs(InnerContainer, _extends__default['default']({
-      ref: forwardedRef
-    }, otherProps, {
+    children: [children, /*#__PURE__*/jsxRuntime.jsxs(InnerContainer, {
+      ref: forwardedRef,
+      ...otherProps,
       color: borderColor,
       theme: theme,
       borderRadius: borderRadius,
@@ -2462,7 +2404,7 @@ const NotchedOutline = /*#__PURE__*/react$1.forwardRef(function NotchedOutline(p
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
         "data-notch-outline-item": "end"
       })]
-    }))]
+    })]
   });
 });
 
@@ -2476,33 +2418,35 @@ const OutlinedContainer = /*#__PURE__*/react$1.forwardRef(function OutlinedConta
     children,
     error,
     color: colorProp = 'primary',
-    leadingIcon
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["label", "labelIsFloating", "inputId", "forceActive", "children", "error", "color", "leadingIcon"]);
-
+    leadingIcon,
+    ...otherProps
+  } = props;
   const [labelWidth, setLabelWidth] = react$1.useState(0);
   const labelRef = react$1.useRef(null);
   useEnhancedEffect$1(() => {
     const element = labelRef.current;
 
     if (element) {
-      var _document, _document$fonts, _document$fonts$ready;
-
       setLabelWidth(element.offsetWidth);
-      (_document = document) == null ? void 0 : (_document$fonts = _document.fonts) == null ? void 0 : (_document$fonts$ready = _document$fonts.ready) == null ? void 0 : _document$fonts$ready.then(() => {
+
+      function handleFontsLoaded() {
         // set the label width again once the fonts have been loaded
         requestAnimationFrame(() => {
-          setLabelWidth(element.offsetWidth);
+          if (element) setLabelWidth(element.offsetWidth);
         });
-      });
+      }
+
+      document.fonts?.addEventListener?.('loadingdone', handleFontsLoaded);
+      document.fonts?.ready?.then(handleFontsLoaded);
+      return () => document.fonts?.removeEventListener?.('loadingdone', handleFontsLoaded);
     }
   }, [label]);
   const color = error ? 'error' : colorProp;
   const inputHeight = 56;
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
     position: "relative",
-    lineHeight: 0
-  }, otherProps, {
+    lineHeight: 0,
+    ...otherProps,
     children: /*#__PURE__*/jsxRuntime.jsx(NotchedOutline, {
       ref: forwardedRef,
       borderRadius: 4,
@@ -2523,7 +2467,7 @@ const OutlinedContainer = /*#__PURE__*/react$1.forwardRef(function OutlinedConta
       }),
       children: children
     })
-  }));
+  });
 });
 
 const HelperText = /*#__PURE__*/react$1.forwardRef(function HelperText(props, forwardedRef) {
@@ -2533,9 +2477,9 @@ const HelperText = /*#__PURE__*/react$1.forwardRef(function HelperText(props, fo
     color: colorProp,
     error = false,
     disabled = false,
-    __css
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["leftSide", "rightSide", "color", "error", "disabled", "__css"]);
+    __css,
+    ...otherProps
+  } = props;
 
   if (!leftSide && !rightSide) {
     return null;
@@ -2551,24 +2495,25 @@ const HelperText = /*#__PURE__*/react$1.forwardRef(function HelperText(props, fo
     color = alpha('on.surface', 0.6);
   }
 
-  return /*#__PURE__*/jsxRuntime.jsxs(Text, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsxs(Text, {
     as: "div",
     px: 16,
     display: "flex",
     pt: 1,
     color: color,
-    variant: "caption",
+    variant: "label-small",
     ref: forwardedRef,
     lineHeight: "normal",
-    __css: _extends__default['default']({
-      color
-    }, __css)
-  }, otherProps, {
+    __css: {
+      color,
+      ...__css
+    },
+    ...otherProps,
     children: [leftSide, rightSide && /*#__PURE__*/jsxRuntime.jsx(Box, {
       ml: "auto",
       children: rightSide
     })]
-  }));
+  });
 });
 
 const IconContainer = ({
@@ -2629,10 +2574,9 @@ const TextField = /*#__PURE__*/react$1.forwardRef(function TextField(props, forw
     onBlur,
     leadingIcon = null,
     trailingIcon = null,
-    containerProps
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["type", "id", "variant", "color", "value", "defaultValue", "error", "disabled", "maxLength", "hideCharacterCounter", "label", "placeholder", "helperText", "multiline", "onChange", "onFocus", "onBlur", "leadingIcon", "trailingIcon", "containerProps"]);
-
+    containerProps,
+    ...otherProps
+  } = props;
   const [value, onChange] = core.useControlledState(valueProp, onChangeProp, defaultValue, setState => e => {
     setState(e.target.value);
   });
@@ -2659,7 +2603,7 @@ const TextField = /*#__PURE__*/react$1.forwardRef(function TextField(props, forw
     display: "inline-flex",
     flexDirection: "column",
     width: "100%",
-    children: [/*#__PURE__*/jsxRuntime.jsxs(Container, _extends__default['default']({
+    children: [/*#__PURE__*/jsxRuntime.jsxs(Container, {
       theme: theme,
       label: label,
       color: color,
@@ -2668,12 +2612,12 @@ const TextField = /*#__PURE__*/react$1.forwardRef(function TextField(props, forw
       inputId: inputId,
       hasFocus: hasFocus,
       disabled: disabled,
-      leadingIcon: Boolean(leadingIcon)
-    }, containerProps, {
+      leadingIcon: Boolean(leadingIcon),
+      ...containerProps,
       children: [leadingIcon && /*#__PURE__*/jsxRuntime.jsx(IconContainer, {
         position: "start",
         children: leadingIcon
-      }), /*#__PURE__*/jsxRuntime.jsx(Input, _extends__default['default']({
+      }), /*#__PURE__*/jsxRuntime.jsx(Input, {
         ref: forwardedRef,
         as: multiline ? 'textarea' : 'input',
         variant: variant,
@@ -2692,12 +2636,13 @@ const TextField = /*#__PURE__*/react$1.forwardRef(function TextField(props, forw
         "aria-describedby": helperTextId,
         hasLabel: !!label,
         leadingIcon: Boolean(leadingIcon),
-        trailingIcon: Boolean(trailingIcon)
-      }, otherProps)), trailingIcon && /*#__PURE__*/jsxRuntime.jsx(IconContainer, {
+        trailingIcon: Boolean(trailingIcon),
+        ...otherProps
+      }), trailingIcon && /*#__PURE__*/jsxRuntime.jsx(IconContainer, {
         position: "end",
         children: trailingIcon
       })]
-    })), /*#__PURE__*/jsxRuntime.jsx(HelperText, {
+    }), /*#__PURE__*/jsxRuntime.jsx(HelperText, {
       error: hasError,
       disabled: disabled,
       leftSide: helperText && /*#__PURE__*/jsxRuntime.jsx("span", {
@@ -2718,11 +2663,10 @@ const List = /*#__PURE__*/react$1.forwardRef(function List(props, forwardedRef)
     px = 0,
     outlined = true,
     variant = 'square',
-    __css = {}
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "innerAs", "elevation", "py", "px", "outlined", "variant", "__css"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(Paper, _extends__default['default']({
+    __css = {},
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(Paper, {
     as: innerAs || as,
     ref: forwardedRef,
     py: py,
@@ -2731,12 +2675,55 @@ const List = /*#__PURE__*/react$1.forwardRef(function List(props, forwardedRef)
     darkThemeBackgroundOverlay: elevation,
     variant: variant,
     outlined: outlined,
-    __css: _extends__default['default']({
-      width: '100%'
-    }, __css)
-  }, otherProps));
+    __css: {
+      width: '100%',
+      ...__css
+    },
+    ...otherProps
+  });
 });
 
+const listItemStyle = (color, hoverOpacity = 0.16, focusOpacity = 0.24) => ({
+  variant: 'text.label-large',
+  px: 3,
+  py: "0.75rem",
+  transition: 'background-color 75ms linear',
+  backgroundColor: 'transparent',
+  color: alpha('on.surface', 0.87),
+  cursor: 'pointer',
+  display: 'flex',
+  alignItems: 'center',
+  textDecoration: 'none',
+  ':hover': {
+    backgroundColor: alpha('on.surface', hoverOpacity)
+  },
+  ':focus': {
+    outline: 'none',
+    backgroundColor: alpha('on.surface', focusOpacity)
+  },
+  ':active': {
+    backgroundColor: alpha('on.surface', focusOpacity)
+  },
+  '&[aria-selected="true"]': {
+    backgroundColor: alpha(color, 0.08),
+    color,
+    ':hover': {
+      backgroundColor: alpha(color, hoverOpacity)
+    },
+    ':focus': {
+      outline: 'none',
+      backgroundColor: alpha(color, focusOpacity)
+    },
+    ':active': {
+      backgroundColor: alpha(color, focusOpacity)
+    }
+  },
+  '&[data-disabled]': {
+    color: alpha('on.surface', 0.6),
+    backgroundColor: 'transparent',
+    cursor: 'default'
+  }
+});
 const ListItem = /*#__PURE__*/react$1.forwardRef(function ListItem(props, forwardedRef) {
   const {
     as = 'div',
@@ -2747,81 +2734,41 @@ const ListItem = /*#__PURE__*/react$1.forwardRef(function ListItem(props, forwar
     disabled = false,
     color: colorProp,
     rippleColor,
-    __css
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "innerAs", "children", "selected", "aria-selected", "disabled", "color", "rippleColor", "__css"]);
-
+    __css,
+    ...otherProps
+  } = props;
   const selected = ariaSelectedProp || selectedProp;
   const color = rippleColor || colorProp || 'primary';
   const theme = useTheme();
-  const baseOpacity = 0.12;
-  const hoverOpacity = 0.16;
-  const focusOpacity = 0.24;
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
     ref: forwardedRef,
     as: innerAs || as,
     theme: theme,
     display: "flex",
     "data-disabled": disabled ? '' : undefined,
     "aria-selected": selected ? 'true' : undefined,
-    disabled: disabled
-  }, otherProps, {
-    __css: _extends__default['default']({
-      px: 3,
-      py: "0.75rem",
-      transition: 'background-color 75ms linear',
-      backgroundColor: 'transparent',
-      color: alpha('on.surface', 0.87),
-      cursor: 'pointer',
-      ':hover': {
-        backgroundColor: alpha('on.surface', hoverOpacity)
-      },
-      ':focus': {
-        outline: 'none',
-        backgroundColor: alpha('on.surface', focusOpacity)
-      },
-      ':active': {
-        backgroundColor: alpha('on.surface', baseOpacity + 0.12)
-      },
-      '&[aria-selected="true"]': {
-        backgroundColor: alpha(color, baseOpacity + 0.12),
-        ':hover': {
-          backgroundColor: alpha(color, hoverOpacity + 0.12)
-        },
-        ':focus': {
-          outline: 'none',
-          backgroundColor: alpha(color, focusOpacity + 0.12)
-        },
-        ':active': {
-          backgroundColor: alpha(color, baseOpacity + 0.24)
-        }
-      },
-      '&[data-disabled]': {
-        color: alpha('on.surface', 0.6),
-        backgroundColor: 'transparent',
-        cursor: 'default'
-      },
-      textDecoration: 'none',
-      WebkitTapHighlightColor: 'transparent'
-    }, css.get(theme, 'text.subtitle1'), __css),
+    disabled: disabled,
+    ...otherProps,
+    __css: { ...listItemStyle(color),
+      ...__css
+    },
     children: children
-  }));
+  });
 });
 
 const ListItemText = /*#__PURE__*/react$1.forwardRef(function ListItemText(props, forwardedRef) {
   const {
     as: Comp = 'div',
     text,
-    secondaryText
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "text", "secondaryText"]);
-
-  return /*#__PURE__*/jsxRuntime.jsxs(Comp, _extends__default['default']({
-    ref: forwardedRef
-  }, otherProps, {
+    secondaryText,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsxs(Comp, {
+    ref: forwardedRef,
+    ...otherProps,
     children: [text, secondaryText && /*#__PURE__*/jsxRuntime.jsx(Text, {
       as: "span",
-      variant: "body2",
+      variant: "body-small",
       display: "block",
       __css: {
         color: 'currentColor',
@@ -2829,7 +2776,7 @@ const ListItemText = /*#__PURE__*/react$1.forwardRef(function ListItemText(props
       },
       children: secondaryText
     })]
-  }));
+  });
 });
 
 // Combobox
@@ -2838,33 +2785,34 @@ const ComboboxCore = core.Combobox;
 const Combobox = /*#__PURE__*/react$1.forwardRef((props, forwardedRef) => {
   const {
     as = 'div',
-    __css
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "__css"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(ComboboxCore, _extends__default['default']({
+    __css,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(ComboboxCore, {
     as: Box,
     ref: forwardedRef,
     innerAs: as,
-    __css: _extends__default['default']({
-      position: 'relative'
-    }, __css)
-  }, otherProps));
+    __css: {
+      position: 'relative',
+      ...__css
+    },
+    ...otherProps
+  });
 }); /////////////////////////////////////////////////////
 // ComboboxInput
 
 const ComboboxInputCore = core.ComboboxInput;
 const ComboboxInput = /*#__PURE__*/react$1.forwardRef((props, forwardedRef) => {
   const {
-    as = 'input'
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(ComboboxInputCore, _extends__default['default']({
+    as = 'input',
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(ComboboxInputCore, {
     as: TextField,
     ref: forwardedRef,
-    innerAs: as
-  }, otherProps));
+    innerAs: as,
+    ...otherProps
+  });
 }); /////////////////////////////////////////////////////
 // ComboboxList
 
@@ -2872,97 +2820,100 @@ const ComboboxListCore = core.ComboboxList;
 const ComboboxList = /*#__PURE__*/react$1.forwardRef((props, forwardedRef) => {
   const {
     as = 'ul',
-    __css
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "__css"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(ComboboxListCore, _extends__default['default']({
+    __css,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(ComboboxListCore, {
     as: List,
     ref: forwardedRef,
     innerAs: as,
     outlined: false,
     elevation: 2,
     darkThemeBackgroundOverlay: 2,
-    __css: _extends__default['default']({
+    __css: {
       maxHeight: "18.75rem",
       overflowY: 'auto',
-      borderRadius: 'default',
+      borderRadius: 'extra-small',
       '[data-popper-placement="top"] &': {
         transformOrigin: 'bottom center'
       },
       '[data-popper-placement="bottom"] &': {
         transformOrigin: 'top center'
-      }
-    }, __css)
-  }, otherProps));
+      },
+      '& [data-reach-combobox-option=""]': { ...listItemStyle('primary')
+      },
+      ...__css
+    },
+    ...otherProps
+  });
 }); /////////////////////////////////////////////////////
 // ComboboxPopperBox
 
 const PopperCore = core.Popper;
-const ComboboxPopperBox = /*#__PURE__*/react$1.forwardRef((_ref, forwardedRef) => {
-  let {
-    __css,
-    anchorEl,
-    as = 'div'
-  } = _ref,
-      props = _objectWithoutPropertiesLoose__default['default'](_ref, ["__css", "anchorEl", "as"]);
-
+const ComboboxPopperBox = /*#__PURE__*/react$1.forwardRef(({
+  __css,
+  anchorEl,
+  as = 'div',
+  ...props
+}, forwardedRef) => {
   const ctx = core.useComboBoxContext();
-  return /*#__PURE__*/jsxRuntime.jsx(PopperCore, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(PopperCore, {
     as: Box,
     innerAs: as,
     ref: forwardedRef,
     anchorEl: anchorEl || ctx.inputRef,
-    __css: _extends__default['default']({
+    __css: {
       zIndex: 1,
-      width: '100%'
-    }, __css)
-  }, props));
+      width: '100%',
+      ...__css
+    },
+    ...props
+  });
 }); /////////////////////////////////////////////////////
 // ComboboxPopover
 
 const ComboboxPopoverCore = core.ComboboxPopover;
 const ComboboxPopover = /*#__PURE__*/react$1.forwardRef((props, forwardedRef) => {
   const {
-    as = 'div'
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(ComboboxPopoverCore, _extends__default['default']({
+    as = 'div',
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(ComboboxPopoverCore, {
     as: ComboboxPopperBox,
     ref: forwardedRef,
-    innerAs: as
-  }, otherProps));
+    innerAs: as,
+    ...otherProps
+  });
 }); /////////////////////////////////////////////////////
 // ComboboxOption
 
 const ComboboxOptionCore = core.ComboboxOption;
 const ComboboxOption = /*#__PURE__*/react$1.forwardRef((props, forwardedRef) => {
   const {
-    as = 'li'
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(ComboboxOptionCore, _extends__default['default']({
-    as: ListItem,
+    as = 'li',
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(ComboboxOptionCore, {
+    as: Box,
     ref: forwardedRef,
-    innerAs: as
-  }, otherProps));
+    innerAs: as,
+    ...otherProps
+  });
 }); /////////////////////////////////////////////////////
 // ComboboxLabel
 
 const ComboboxLabelCore = core.ComboboxLabel;
 const ComboboxLabel = /*#__PURE__*/react$1.forwardRef((props, forwardedRef) => {
   const {
-    as = 'label'
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(ComboboxLabelCore, _extends__default['default']({
+    as = 'label',
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(ComboboxLabelCore, {
     as: Text,
     ref: forwardedRef,
-    innerAs: as
-  }, otherProps));
+    innerAs: as,
+    ...otherProps
+  });
 }); /////////////////////////////////////////////////////
 // ComboboxButton
 
@@ -2971,23 +2922,22 @@ const ComboboxButton = /*#__PURE__*/react$1.forwardRef((props, forwardedRef) =>
   const {
     as = 'button',
     __css,
-    children
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "__css", "children"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(ComboboxButtonCore, _extends__default['default']({
+    children,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(ComboboxButtonCore, {
     as: Button,
     ref: forwardedRef,
     innerAs: as,
     tabIndex: -1,
     variant: "icon",
-    __css: _extends__default['default']({
+    __css: {
       zIndex: 1,
       width: "2.5rem",
       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)
@@ -2995,9 +2945,10 @@ const ComboboxButton = /*#__PURE__*/react$1.forwardRef((props, forwardedRef) =>
       '&[aria-expanded="true"] > svg': {
         transform: 'rotate(180deg)',
         color: 'currentColor'
-      }
-    }, __css)
-  }, otherProps, {
+      },
+      ...__css
+    },
+    ...otherProps,
     children: children || /*#__PURE__*/jsxRuntime.jsx("svg", {
       "aria-hidden": true,
       viewBox: "0 0 24 24",
@@ -3007,12 +2958,12 @@ const ComboboxButton = /*#__PURE__*/react$1.forwardRef((props, forwardedRef) =>
         d: "M7 10l5 5 5-5z"
       })
     })
-  }));
+  });
 });
 
 const offset = 29.78333854675293; // document.querySelector(path).getTotalLength()
 
-const Path = _styled__default['default']("path", process.env.NODE_ENV === "production" ? {
+const Path = _styled__default["default"]("path", process.env.NODE_ENV === "production" ? {
   target: "e1v8gifn0"
 } : {
   target: "e1v8gifn0",
@@ -3036,7 +2987,7 @@ const CheckPath = ({
   });
 };
 
-const Line = _styled__default['default']("line", process.env.NODE_ENV === "production" ? {
+const Line = _styled__default["default"]("line", process.env.NODE_ENV === "production" ? {
   target: "eat3a050"
 } : {
   target: "eat3a050",
@@ -3063,19 +3014,19 @@ const IndeterminatePath = ({
   });
 };
 
-const CheckBoxIcon = /*#__PURE__*/react$1.forwardRef(function CheckBoxIcon(_ref, forwardedRef) {
-  let {
-    __css = {},
-    as = 'div',
-    indeterminate,
-    checked,
-    backgroundColor,
-    borderColor,
-    opacity
-  } = _ref,
-      otherProps = _objectWithoutPropertiesLoose__default['default'](_ref, ["__css", "as", "indeterminate", "checked", "disabled", "backgroundColor", "borderColor", "opacity"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+const CheckBoxIcon = /*#__PURE__*/react$1.forwardRef(function CheckBoxIcon({
+  __css = {},
+  as = 'div',
+  indeterminate,
+  checked,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  disabled,
+  backgroundColor,
+  borderColor,
+  opacity,
+  ...otherProps
+}, forwardedRef) {
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
     as: as,
     ref: forwardedRef,
     backgroundColor: backgroundColor,
@@ -3088,13 +3039,13 @@ 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'
       },
       __css
-    }
-  }, otherProps, {
+    },
+    ...otherProps,
     children: /*#__PURE__*/jsxRuntime.jsxs("svg", {
       viewBox: "0 0 24 24",
       children: [/*#__PURE__*/jsxRuntime.jsx(CheckPath, {
@@ -3103,48 +3054,51 @@ const CheckBoxIcon = /*#__PURE__*/react$1.forwardRef(function CheckBoxIcon(_ref,
         checked: checked && indeterminate
       })]
     })
-  }));
+  });
 });
 
 const SelectionControlLabel = /*#__PURE__*/react$1.forwardRef(function SelectionControlLabel(props, forwardedRef) {
   const {
     as = 'label',
-    __css
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "__css"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+    __css,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
     ref: forwardedRef,
     as: as,
-    __css: _extends__default['default']({
+    __css: {
       display: 'inline-flex',
       position: 'relative',
       alignItems: 'center',
-      WebkitTapHighlightColor: 'transparent'
-    }, __css)
-  }, otherProps));
+      WebkitTapHighlightColor: 'transparent',
+      ...__css
+    },
+    ...otherProps
+  });
 });
 
 const SelectionControlText = /*#__PURE__*/react$1.forwardRef(function SelectionControlText(props, forwardedRef) {
   const {
     as = 'span',
     disabled,
-    __css
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "disabled", "__css"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(Text, _extends__default['default']({
+    __css,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(Text, {
     ref: forwardedRef,
     as: as,
-    __css: _extends__default['default']({
-      p: 1
-    }, disabled ? {
-      color: alpha('on.surface', 0.38)
-    } : {
-      cursor: 'pointer',
-      color: alpha('on.surface', 0.87)
-    }, __css)
-  }, otherProps));
+    __css: {
+      p: 1,
+      ...(disabled ? {
+        color: alpha('on.surface', 0.38)
+      } : {
+        cursor: 'pointer',
+        color: alpha('on.surface', 0.87)
+      }),
+      ...__css
+    },
+    ...otherProps
+  });
 });
 
 const CheckBoxCore$1 = core.CheckBox;
@@ -3167,10 +3121,9 @@ const CheckBoxInner = /*#__PURE__*/react$1.forwardRef(function CheckBoxInner(pro
     indeterminate = false,
     onChange,
     icon = /*#__PURE__*/jsxRuntime.jsx(CheckBoxIcon, {}),
-    __css
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "disabled", "checked", "indeterminate", "onChange", "icon", "__css"]);
-
+    __css,
+    ...otherProps
+  } = props;
   const color = checked ? 'primary' : 'on.surface';
   const theme = useTheme();
   const [backgroundColor, borderColor, opacity] = getColors(disabled, checked);
@@ -3178,7 +3131,7 @@ const CheckBoxInner = /*#__PURE__*/react$1.forwardRef(function CheckBoxInner(pro
     position: "relative",
     display: "inline-block",
     minWidth: "auto",
-    children: [/*#__PURE__*/jsxRuntime.jsx(RippleBox, _extends__default['default']({
+    children: [/*#__PURE__*/jsxRuntime.jsx(RippleBox, {
       as: Comp,
       type: "checkbox",
       checked: checked,
@@ -3192,9 +3145,9 @@ const CheckBoxInner = /*#__PURE__*/react$1.forwardRef(function CheckBoxInner(pro
       center: true,
       disabled: disabled,
       "aria-checked": indeterminate ? checked ? 'mixed' : 'false' : checked ? 'true' : 'false',
-      "data-indeterminate": indeterminate ? '' : undefined
-    }, otherProps, {
-      __css: _extends__default['default']({
+      "data-indeterminate": indeterminate ? '' : undefined,
+      ...otherProps,
+      __css: {
         top: 0,
         left: 0,
         width: "2.5rem",
@@ -3206,9 +3159,10 @@ const CheckBoxInner = /*#__PURE__*/react$1.forwardRef(function CheckBoxInner(pro
         border: 'none',
         borderRadius: 'full',
         zIndex: 1,
-        position: 'absolute'
-      }, __css)
-    })), /*#__PURE__*/jsxRuntime.jsx(Box, {
+        position: 'absolute',
+        ...__css
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(Box, {
       __css: {
         position: 'relative',
         top: 0,
@@ -3238,17 +3192,18 @@ const CheckBox = /*#__PURE__*/react$1.forwardRef(function CheckBox(props, forwar
     as = 'input',
     icon = /*#__PURE__*/jsxRuntime.jsx(CheckBoxIcon, {}),
     disabled,
-    children
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "icon", "disabled", "children"]);
+    children,
+    ...otherProps
+  } = props;
 
-  const inner = /*#__PURE__*/jsxRuntime.jsx(CheckBoxCore$1, _extends__default['default']({
+  const inner = /*#__PURE__*/jsxRuntime.jsx(CheckBoxCore$1, {
     as: CheckBoxInner,
     innerAs: as,
     ref: forwardedRef,
     icon: icon,
-    disabled: disabled
-  }, otherProps));
+    disabled: disabled,
+    ...otherProps
+  });
 
   if (!children) {
     return inner;
@@ -3263,9 +3218,10 @@ const CheckBox = /*#__PURE__*/react$1.forwardRef(function CheckBox(props, forwar
 });
 
 function getFilledCSS(theme, bg, color, disabled) {
-  return _extends__default['default']({}, !disabled && bg !== 'surface' ? {
-    bg
-  } : _extends__default['default']({}, getColorOverlay(theme, 'surface', 'primary', 0.05)), {
+  return { ...(!disabled && bg !== 'surface' ? {
+      bg
+    } : { ...getColorOverlay(theme, 'surface', 'primary', 0.05)
+    }),
     color,
     '&::before': {
       backgroundColor: 'currentColor',
@@ -3283,22 +3239,23 @@ function getFilledCSS(theme, bg, color, disabled) {
     },
     '& > *': {
       zIndex: 1
-    }
-  }, disabled && {
-    boxShadow: 0,
-    bg: alpha('on.surface', 0.32)
-  });
+    },
+    ...(disabled && {
+      boxShadow: 0,
+      bg: alpha('on.surface', 0.32)
+    })
+  };
 }
 
 function getOutlinedCSS(theme, bg, color, borderOpacity) {
-  return _extends__default['default']({}, bg !== 'surface' ? {
-    bg
-  } : getDarkThemeBackgroundOverlay(theme, 2), {
+  return { ...(bg !== 'surface' ? {
+      bg
+    } : getDarkThemeBackgroundOverlay(theme, 2)),
     color: color,
     borderColor: alpha(color, borderOpacity),
     borderStyle: 'solid',
     borderWidth: "0.0625rem"
-  });
+  };
 }
 
 const ChipBase = /*#__PURE__*/react$1.forwardRef(function Chip(props, forwardedRef) {
@@ -3310,16 +3267,15 @@ const ChipBase = /*#__PURE__*/react$1.forwardRef(function Chip(props, forwardedR
     backgroundColor: backgroundColorProp = 'surface',
     borderOpacity: borderOpacityProp = 0.24,
     children,
-    disabled = false
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "__css", "variant", "color", "backgroundColor", "borderOpacity", "children", "disabled"]);
-
+    disabled = false,
+    ...otherProps
+  } = props;
   const theme = useTheme();
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
     as: as,
     "data-disabled": disabled ? '' : undefined,
     ref: forwardedRef,
-    __css: _extends__default['default']({
+    __css: {
       boxSizing: 'border-box',
       position: 'relative',
       display: 'inline-flex',
@@ -3338,22 +3294,24 @@ const ChipBase = /*#__PURE__*/react$1.forwardRef(function Chip(props, forwardedR
       minWidth: 'auto',
       '&::-moz-focus-inner': {
         border: 0
-      }
-    }, styledSystem.variant({
-      scale: 'chips.variants',
-      prop: 'variant',
-      variants: {
-        text: {}
-      }
-    })({
-      variant: variantProp,
-      theme
-    }), variantProp === 'filled' ? getFilledCSS(theme, backgroundColorProp, colorProp, disabled) : getOutlinedCSS(theme, backgroundColorProp, colorProp, borderOpacityProp), {
-      opacity: disabled ? 0.38 : 1
-    }, __css)
-  }, otherProps, {
+      },
+      ...styledSystem.variant({
+        scale: 'chips.variants',
+        prop: 'variant',
+        variants: {
+          text: {}
+        }
+      })({
+        variant: variantProp,
+        theme
+      }),
+      ...(variantProp === 'filled' ? getFilledCSS(theme, backgroundColorProp, colorProp, disabled) : getOutlinedCSS(theme, backgroundColorProp, colorProp, borderOpacityProp)),
+      opacity: disabled ? 0.38 : 1,
+      ...__css
+    },
+    ...otherProps,
     children: children
-  }));
+  });
 });
 
 const ButtonChip = /*#__PURE__*/react$1.forwardRef(function ButtonChip(props, forwardedRef) {
@@ -3364,20 +3322,20 @@ const ButtonChip = /*#__PURE__*/react$1.forwardRef(function ButtonChip(props, fo
     leadingIcon,
     trailingIcon,
     children,
-    __css
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "onClick", "disabled", "leadingIcon", "trailingIcon", "children", "color", "__css"]);
-
+    color,
+    __css,
+    ...otherProps
+  } = props;
   const theme = useTheme();
   const isClickable = onClick && !disabledProp;
-  return /*#__PURE__*/jsxRuntime.jsx(ChipBase, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(ChipBase, {
     as: "div",
     onClick: isClickable ? onClick : undefined,
     disabled: disabledProp,
     color: "on.surface",
     backgroundColor: "surface",
-    __css: __css
-  }, otherProps, {
+    __css: __css,
+    ...otherProps,
     children: /*#__PURE__*/jsxRuntime.jsxs(RippleBox, {
       as: as,
       role: isClickable ? 'button' : undefined,
@@ -3414,7 +3372,7 @@ const ButtonChip = /*#__PURE__*/react$1.forwardRef(function ButtonChip(props, fo
       },
       children: [leadingIcon, children, trailingIcon]
     })
-  }));
+  });
 });
 
 const InnerInput = /*#__PURE__*/react$1.forwardRef(function InnerInput(props, forwardedRef) {
@@ -3432,19 +3390,18 @@ const InnerInput = /*#__PURE__*/react$1.forwardRef(function InnerInput(props, fo
     leadingIcon,
     trailingIcon,
     children,
-    __css
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["type", "color", "checked", "aria-checked", "defaultChecked", "value", "name", "defaultValue", "disabled", "onChange", "leadingIcon", "trailingIcon", "children", "__css"]);
-
+    __css,
+    ...otherProps
+  } = props;
   const theme = useTheme();
-  return /*#__PURE__*/jsxRuntime.jsx(ChipBase, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(ChipBase, {
     as: "label",
     disabled: disabled,
     backgroundColor: checked ? color + '-container' : 'surface',
     color: checked ? 'on.' + color + '-container' : 'on.surface',
     borderOpacity: checked ? 0 : 0.24,
-    __css: __css
-  }, otherProps, {
+    __css: __css,
+    ...otherProps,
     children: /*#__PURE__*/jsxRuntime.jsxs(Box, {
       as: "span",
       __css: {
@@ -3490,87 +3447,91 @@ const InnerInput = /*#__PURE__*/react$1.forwardRef(function InnerInput(props, fo
         }
       }), leadingIcon, children, trailingIcon]
     })
-  }));
+  });
 });
 const ChoiceChip = /*#__PURE__*/react$1.forwardRef(function ChoiceChip(props, forwardedRef) {
   const {
-    type = 'checkbox'
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["type"]);
-
+    type = 'checkbox',
+    ...otherProps
+  } = props;
   const Comp = type === 'radio' ? core.RadioButton : core.CheckBox;
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
     ref: forwardedRef,
     as: InnerInput,
-    type: type
-  }, otherProps));
+    type: type,
+    ...otherProps
+  });
 });
 
 const Divider = /*#__PURE__*/react$1.forwardRef(function Divider(props, forwardedRef) {
   const {
     as = 'div',
     direction = 'horizontal',
-    __css
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "direction", "__css"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
-    ref: forwardedRef,
-    as: as,
-    role: "separator"
-  }, otherProps, {
-    __css: _extends__default['default']({
+    __css,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
+    ref: forwardedRef,
+    as: as,
+    role: "separator",
+    ...otherProps,
+    __css: {
       border: 'none',
-      listStyleType: 'none'
-    }, direction === 'horizontal' && {
-      height: 0,
-      borderBottomWidth: "0.0625rem",
-      borderBottomStyle: 'solid',
-      borderBottomColor: alpha('on.surface', 0.12)
-    }, direction === 'vertical' && {
-      width: 0,
-      borderRightWidth: "0.0625rem",
-      borderRightStyle: 'solid',
-      borderRightColor: alpha('on.surface', 0.12)
-    }, __css)
-  }));
+      listStyleType: 'none',
+      ...(direction === 'horizontal' && {
+        height: 0,
+        borderBottomWidth: "0.0625rem",
+        borderBottomStyle: 'solid',
+        borderBottomColor: alpha('on.surface', 0.12)
+      }),
+      ...(direction === 'vertical' && {
+        width: 0,
+        borderRightWidth: "0.0625rem",
+        borderRightStyle: 'solid',
+        borderRightColor: alpha('on.surface', 0.12)
+      }),
+      ...__css
+    }
+  });
 });
 
 const Modal = core.Modal;
 const DialogSurface = /*#__PURE__*/react$1.forwardRef(function DialogSurface(props, forwardedRef) {
   const {
     __css,
-    variant: variantProp = 'base'
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["__css", "variant"]);
-
+    variant: variantProp = 'base',
+    ...otherProps
+  } = props;
   const theme = useTheme();
   const overlayValue = styledSystem.get(theme, 'dialogs.backgroundColorOverlay') || 0;
-  return /*#__PURE__*/jsxRuntime.jsx(Modal, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(Modal, {
     ref: forwardedRef,
     as: Paper,
     theme: theme,
     elevation: 3,
     darkThemeBackgroundOverlay: overlayValue,
-    __css: _extends__default['default']({
+    __css: {
       position: 'relative',
       borderRadius: 'small',
       width: '100%',
       maxWidth: "37.5rem",
       maxHeight: '100%',
       overflow: 'auto',
-      pointerEvents: 'auto'
-    }, styledSystem.variant({
-      scale: 'dialogs.variants',
-      prop: 'variant',
-      variants: {
-        base: {}
-      }
-    })({
-      variant: variantProp,
-      theme
-    }), __css)
-  }, otherProps));
+      pointerEvents: 'auto',
+      ...styledSystem.variant({
+        scale: 'dialogs.variants',
+        prop: 'variant',
+        variants: {
+          base: {}
+        }
+      })({
+        variant: variantProp,
+        theme
+      }),
+      ...__css
+    },
+    ...otherProps
+  });
 });
 
 const Dialog = /*#__PURE__*/react$1.forwardRef(function Dialog(props, forwardedRef) {
@@ -3584,10 +3545,9 @@ const Dialog = /*#__PURE__*/react$1.forwardRef(function Dialog(props, forwardedR
     containerProps,
     scrimProps,
     openTimeoutInMilliseconds,
-    closeTimeoutInMilliseconds
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["open", "animationMode", "onClose", "disableBackdropClick", "disableEscapeKeyDown", "backdropProps", "containerProps", "scrimProps", "openTimeoutInMilliseconds", "closeTimeoutInMilliseconds"]);
-
+    closeTimeoutInMilliseconds,
+    ...otherProps
+  } = props;
   const {
     containerStyle,
     scrimStyle,
@@ -3604,22 +3564,24 @@ const Dialog = /*#__PURE__*/react$1.forwardRef(function Dialog(props, forwardedR
   }
 
   return /*#__PURE__*/jsxRuntime.jsx(core.Portal, {
-    children: /*#__PURE__*/jsxRuntime.jsxs(DialogBackdrop, _extends__default['default']({
+    children: /*#__PURE__*/jsxRuntime.jsxs(DialogBackdrop, {
       onClose: onClose,
       open: openProp,
       disableCloseOnClick: disableBackdropClick,
-      disableEscapeKeyDown: disableEscapeKeyDown
-    }, backdropProps, {
-      children: [/*#__PURE__*/jsxRuntime.jsx(Scrim, _extends__default['default']({
-        __css: scrimStyle
-      }, scrimProps)), /*#__PURE__*/jsxRuntime.jsx(DialogContainer, _extends__default['default']({
-        __css: containerStyle
-      }, containerProps, {
-        children: /*#__PURE__*/jsxRuntime.jsx(DialogSurface, _extends__default['default']({
-          ref: forwardedRef
-        }, otherProps))
-      }))]
-    }))
+      disableEscapeKeyDown: disableEscapeKeyDown,
+      ...backdropProps,
+      children: [/*#__PURE__*/jsxRuntime.jsx(Scrim, {
+        __css: scrimStyle,
+        ...scrimProps
+      }), /*#__PURE__*/jsxRuntime.jsx(DialogContainer, {
+        __css: containerStyle,
+        ...containerProps,
+        children: /*#__PURE__*/jsxRuntime.jsx(DialogSurface, {
+          ref: forwardedRef,
+          ...otherProps
+        })
+      })]
+    })
   });
 });
 
@@ -3627,14 +3589,13 @@ const Link = /*#__PURE__*/react$1.forwardRef(function Link(props, forwardedRef)
   const {
     as: asProp = 'a',
     color = 'primary',
-    __css
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "color", "__css"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+    __css,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
     ref: forwardedRef,
     as: asProp,
-    __css: _extends__default['default']({
+    __css: {
       fontFamily: 'inherit',
       fontSize: 'inherit',
       fontWeight: 'inherit',
@@ -3642,6 +3603,12 @@ const Link = /*#__PURE__*/react$1.forwardRef(function Link(props, forwardedRef)
       letterSpacing: 'inherit',
       color,
       textDecoration: 'underline',
+      background: 'none',
+      border: 'none',
+      borderRadius: 'extra-small',
+      'button&': {
+        cursor: 'pointer'
+      },
       '&:hover,&:focus': {
         textDecoration: 'none'
       },
@@ -3653,9 +3620,17 @@ const Link = /*#__PURE__*/react$1.forwardRef(function Link(props, forwardedRef)
       '&:active': {
         bg: alpha(color, 0.16)
       },
-      WebkitTapHighlightColor: 'transparent'
-    }, __css)
-  }, otherProps));
+      '&[aria-disabled="true"],&:disabled': {
+        color: 'on.surface',
+        opacity: 0.38,
+        cursor: 'default',
+        pointerEvents: 'none'
+      },
+      WebkitTapHighlightColor: 'transparent',
+      ...__css
+    },
+    ...otherProps
+  });
 });
 
 const growAnimation = react.keyframes({
@@ -3673,91 +3648,230 @@ const growAnimation = react.keyframes({
 });
 
 const MenuListCore = core.MenuList;
-const MenuList = /*#__PURE__*/react$1.forwardRef((_ref, ref) => {
-  let {
-    as = 'ul',
-    __css
-  } = _ref,
-      props = _objectWithoutPropertiesLoose__default['default'](_ref, ["as", "__css"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(MenuListCore, _extends__default['default']({
-    as: List,
-    innerAs: as,
-    ref: ref,
-    elevation: 2,
-    darkThemeBackgroundOverlay: 2,
-    outlined: false,
-    variant: "default",
-    __css: _extends__default['default']({
-      minWidth: "7rem",
-      maxWidth: "17.5rem",
-      maxHeight: "18.75rem",
-      borderRadius: 'default',
-      overflowY: 'auto',
-      '[data-popper-placement="top"] &': {
-        transformOrigin: 'bottom center'
-      },
-      '[data-popper-placement="bottom"] &': {
-        transformOrigin: 'top center'
-      },
-      animation: `${growAnimation} .12s cubic-bezier(0,0,0.2,1)`
-    }, __css)
-  }, props));
-}); /////////////////////////////////////////////////////
+const MenuList = /*#__PURE__*/react$1.forwardRef(({
+  as = 'ul',
+  __css,
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntime.jsx(MenuListCore, {
+  as: List,
+  innerAs: as,
+  ref: ref,
+  elevation: 2,
+  darkThemeBackgroundOverlay: 2,
+  outlined: false,
+  variant: "default",
+  __css: {
+    minWidth: "7rem",
+    maxWidth: "17.5rem",
+    maxHeight: "18.75rem",
+    borderRadius: 'extra-small',
+    overflowY: 'auto',
+    '[data-popper-placement="top"] &': {
+      transformOrigin: 'bottom center'
+    },
+    '[data-popper-placement="bottom"] &': {
+      transformOrigin: 'top center'
+    },
+    animation: `${growAnimation} .12s ${EASING_STANDARD}`,
+    ...__css
+  },
+  ...props
+})); /////////////////////////////////////////////////////
 // MenuItem
 
-const MenuItem = /*#__PURE__*/react$1.forwardRef((_ref2, ref) => {
-  let {
-    as = 'li'
-  } = _ref2,
-      props = _objectWithoutPropertiesLoose__default['default'](_ref2, ["as"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(core.MenuItem, _extends__default['default']({
-    as: ListItem,
-    innerAs: as,
-    ref: ref
-  }, props));
-}); /////////////////////////////////////////////////////
+const MenuItem$1 = /*#__PURE__*/react$1.forwardRef(({
+  as = 'li',
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
+  as: ListItem,
+  innerAs: as,
+  ref: ref,
+  ...props
+})); /////////////////////////////////////////////////////
 // MenuButton
 
-const MenuButton = /*#__PURE__*/react$1.forwardRef((_ref3, ref) => {
-  let {
-    as = 'button'
-  } = _ref3,
-      props = _objectWithoutPropertiesLoose__default['default'](_ref3, ["as"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(core.MenuButton, _extends__default['default']({
-    as: Button,
-    innerAs: as,
-    ref: ref
-  }, props));
-}); /////////////////////////////////////////////////////
+const MenuButton = /*#__PURE__*/react$1.forwardRef(({
+  as = 'button',
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntime.jsx(core.MenuButton, {
+  as: Button,
+  innerAs: as,
+  ref: ref,
+  ...props
+})); /////////////////////////////////////////////////////
+// ContextMenuTrigger
+
+const ContextMenuTrigger = /*#__PURE__*/react$1.forwardRef(({
+  as = 'div',
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntime.jsx(core.ContextMenuTrigger, {
+  as: Box,
+  innerAs: as,
+  ref: ref,
+  ...props
+})); /////////////////////////////////////////////////////
 // MenuPopover
 
 const MenuPopoverCore = core.MenuPopover;
-const MenuPopover = /*#__PURE__*/react$1.forwardRef((_ref4, ref) => {
-  let {
-    as,
-    __css
-  } = _ref4,
-      props = _objectWithoutPropertiesLoose__default['default'](_ref4, ["as", "__css"]);
+const MenuPopover = /*#__PURE__*/react$1.forwardRef(({
+  as,
+  __css,
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntime.jsx(MenuPopoverCore, {
+  as: Box,
+  innerAs: as,
+  ref: ref,
+  __css: {
+    zIndex: 'tooltip',
+    ...__css
+  },
+  ...props
+}));
 
-  return /*#__PURE__*/jsxRuntime.jsx(MenuPopoverCore, _extends__default['default']({
-    as: Box,
-    innerAs: as,
-    ref: ref,
-    __css: _extends__default['default']({
-      zIndex: 'tooltip'
-    }, __css)
-  }, props));
+const NavRailIndicator = /*#__PURE__*/react$1.forwardRef(function NavRailIndicator(props, forwardedRef) {
+  const {
+    as = 'div',
+    children,
+    __css,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
+    color: "currentColor",
+    ref: forwardedRef,
+    as: as,
+    "data-nav-rail-item-indicator": "",
+    ...otherProps,
+    __css: {
+      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,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(Text, {
+    ref: forwardedRef,
+    as: as,
+    variant: "label-small",
+    lineHeight: 1,
+    ...otherProps,
+    __css: {
+      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,
+    ...otherProps
+  } = props;
+  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, {
+    ref: forwardedRef,
+    as: as,
+    ...otherProps,
+    onPointerDown: ripple.onPointerDown,
+    onKeyDown: ripple.onKeyDown,
+    "aria-pressed": selected,
+    type: "button",
+    style: { ...ripple.style,
+      ...style
+    },
+    disabled: disabled,
+    __css: {
+      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%'
+    transform: 'rotate(-90deg)'
   },
   '100%': {
-    transform: 'rotate(360deg)'
+    transform: 'rotate(270deg)'
   }
 });
 const circleIndeterminate = react.keyframes({
@@ -3780,32 +3894,33 @@ const ProgressSpinner = /*#__PURE__*/react$1.forwardRef(function ProgressSpinner
     __css,
     progress: progressProp,
     thickness = 3.6,
-    size = 40
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["__css", "progress", "thickness", "size"]);
-
+    size = 40,
+    ...otherProps
+  } = props;
   const indeterminate = progressProp === undefined;
-  const progress = progressProp != null ? progressProp : 0;
+  const progress = progressProp ?? 0;
   const circumference = 2 * Math.PI * ((SIZE - thickness) / 2);
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
-    ref: forwardedRef
-  }, otherProps, {
-    __css: _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
+    ref: forwardedRef,
+    ...otherProps,
+    __css: {
       color: 'primary',
       display: 'inline-block',
       width: polished.rem(size),
-      height: polished.rem(size)
-    }, __css),
+      height: polished.rem(size),
+      ...__css
+    },
     children: /*#__PURE__*/jsxRuntime.jsx(Box, {
-      __css: _extends__default['default']({
+      __css: {
         display: 'inline-block',
         width: '100%',
-        height: '100%'
-      }, indeterminate ? {
-        animation: `${innerDivRotate} 1.4s linear infinite`
-      } : {
-        transform: 'rotate(-90deg)'
-      }),
+        height: '100%',
+        transformOrigin: '50% 50%',
+        transform: 'rotate(-90deg)',
+        ...(indeterminate && {
+          animation: `${innerDivRotate} 1.4s linear infinite`
+        })
+      },
       children: /*#__PURE__*/jsxRuntime.jsx(Box, {
         as: "svg",
         viewBox: "22 22 44 44",
@@ -3822,26 +3937,23 @@ const ProgressSpinner = /*#__PURE__*/react$1.forwardRef(function ProgressSpinner
             strokeDashoffset: `${((100 - progress) / 100 * circumference).toFixed(3)}px`
           },
           __css: indeterminate ? {
-            animation: `${circleIndeterminate} 1.4s ease-in-out infinite`,
-            strokeDasharray: '80px, 200px',
-            strokeDashoffset: '0px'
+            animation: `${circleIndeterminate} 1.4s ease-in-out infinite`
           } : {
-            transition: 'stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+            transition: `stroke-dashoffset 300ms ${EASING_STANDARD} 0ms`,
             strokeDasharray: circumference.toFixed(3)
           }
         })
       })
     })
-  }));
+  });
 });
 
 const RadioButtonIcon = /*#__PURE__*/react$1.forwardRef(function RadioButtonIcon(props, forwardedRef) {
   const {
-    checked
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["checked"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+    checked,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
     ref: forwardedRef,
     __css: {
       borderColor: 'currentColor',
@@ -3851,19 +3963,19 @@ const RadioButtonIcon = /*#__PURE__*/react$1.forwardRef(function RadioButtonIcon
       width: '100%',
       height: '100%',
       p: "0.1875rem"
-    }
-  }, otherProps, {
+    },
+    ...otherProps,
     children: /*#__PURE__*/jsxRuntime.jsx(Box, {
       __css: {
         backgroundColor: 'currentColor',
         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)'
       }
     })
-  }));
+  });
 });
 
 const RadioButtonInner = /*#__PURE__*/react$1.forwardRef(function RadioButtonInner(props, forwardedRef) {
@@ -3871,17 +3983,16 @@ const RadioButtonInner = /*#__PURE__*/react$1.forwardRef(function RadioButtonInn
     innerAs: as,
     checked,
     disabled,
-    __css
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["innerAs", "checked", "disabled", "__css"]);
-
+    __css,
+    ...otherProps
+  } = props;
   const color = 'primary';
   const theme = useTheme();
   return /*#__PURE__*/jsxRuntime.jsxs(Box, {
     position: "relative",
     display: "inline-block",
     minWidth: "auto",
-    children: [/*#__PURE__*/jsxRuntime.jsx(RippleBox, _extends__default['default']({
+    children: [/*#__PURE__*/jsxRuntime.jsx(RippleBox, {
       as: as,
       checked: checked,
       ref: forwardedRef,
@@ -3892,7 +4003,7 @@ const RadioButtonInner = /*#__PURE__*/react$1.forwardRef(function RadioButtonInn
       center: true,
       disabled: disabled,
       theme: theme,
-      __css: _extends__default['default']({
+      __css: {
         top: 0,
         left: 0,
         width: "2.5rem",
@@ -3904,9 +4015,11 @@ const RadioButtonInner = /*#__PURE__*/react$1.forwardRef(function RadioButtonInn
         border: 'none',
         borderRadius: 'full',
         zIndex: 1,
-        position: 'absolute'
-      }, __css)
-    }, otherProps)), /*#__PURE__*/jsxRuntime.jsx(Box, {
+        position: 'absolute',
+        ...__css
+      },
+      ...otherProps
+    }), /*#__PURE__*/jsxRuntime.jsx(Box, {
       __css: {
         position: 'relative',
         top: 0,
@@ -3933,16 +4046,17 @@ const RadioButton = /*#__PURE__*/react$1.forwardRef(function RadioButton(props,
   const {
     as = 'input',
     children,
-    disabled
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "children", "disabled"]);
+    disabled,
+    ...otherProps
+  } = props;
 
-  const inner = /*#__PURE__*/jsxRuntime.jsx(core.RadioButton, _extends__default['default']({
+  const inner = /*#__PURE__*/jsxRuntime.jsx(core.RadioButton, {
     as: RadioButtonInner,
     innerAs: as,
     ref: forwardedRef,
-    disabled: disabled
-  }, otherProps));
+    disabled: disabled,
+    ...otherProps
+  });
 
   if (!children) {
     return inner;
@@ -3958,54 +4072,40 @@ const RadioButton = /*#__PURE__*/react$1.forwardRef(function RadioButton(props,
 
 const RadioGroup = /*#__PURE__*/react$1.forwardRef(function RadioGroup(props, forwardedRef) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+  const {
+    as,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
     as: core.RadioGroup,
-    ref: forwardedRef
-  }, otherProps));
+    ref: forwardedRef,
+    ...otherProps
+  });
 });
 
-const Select$1 = /*#__PURE__*/react$1.forwardRef((_ref, forwardedRef) => {
-  let {
-    as: asProp = 'select'
-  } = _ref,
-      props = _objectWithoutPropertiesLoose__default['default'](_ref, ["as"]);
-
+const Select$1 = /*#__PURE__*/react$1.forwardRef(({
+  as: asProp = 'select',
+  ...props
+}, forwardedRef) => {
   const InputSelect = Input;
-  return /*#__PURE__*/jsxRuntime.jsx(InputSelect, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(InputSelect, {
     as: asProp,
-    ref: forwardedRef
-  }, props));
-});
-const SelectButtonInner = /*#__PURE__*/react$1.forwardRef((_ref2, forwardedRef) => {
-  let {
-    innerAs = 'div'
-  } = _ref2,
-      props = _objectWithoutPropertiesLoose__default['default'](_ref2, ["innerAs"]);
-
-  const InputButton = Input;
-  return /*#__PURE__*/jsxRuntime.jsx(InputButton, _extends__default['default']({
-    as: innerAs,
     ref: forwardedRef,
-    tabIndex: 0
-  }, props));
-});
-const SelectButton = /*#__PURE__*/react$1.forwardRef((_ref3, ref) => {
-  let {
-    as,
-    children
-  } = _ref3,
-      props = _objectWithoutPropertiesLoose__default['default'](_ref3, ["as", "children"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(core.MenuButton, _extends__default['default']({
-    as: SelectButtonInner,
-    innerAs: as,
-    ref: ref
-  }, props, {
-    children: children
-  }));
+    ...props
+  });
 });
+const SelectButton = /*#__PURE__*/react$1.forwardRef(({
+  as = 'div',
+  children,
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntime.jsx(core.MenuButton, {
+  as: Input,
+  innerAs: as,
+  ref: ref,
+  tabIndex: 0,
+  ...props,
+  children: children
+}));
 
 const selectContext = /*#__PURE__*/react$1.createContext({
   native: false,
@@ -4019,11 +4119,10 @@ const useSelectContext = () => react$1.useContext(selectContext);
 
 const SelectIcon = /*#__PURE__*/react$1.forwardRef(function SelectIcon(props, forwardedRef) {
   const {
-    open
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["open"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+    open,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
     ref: forwardedRef,
     as: "svg",
     "aria-hidden": true,
@@ -4037,14 +4136,14 @@ 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)'
-    }
-  }, otherProps, {
+      transition: `transform .15s ${EASING_STANDARD}, color .15s ${EASING_STANDARD}`
+    },
+    ...otherProps,
     children: /*#__PURE__*/jsxRuntime.jsx("path", {
       fill: "currentColor",
       d: "M7 10l5 5 5-5z"
     })
-  }));
+  });
 });
 
 const makeDefaultRender = children => val => {
@@ -4070,8 +4169,6 @@ const componentMap = {
   filled: FilledContainer
 };
 const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedRef) {
-  var _buttonRef$current;
-
   const {
     id: idProp,
     variant = 'outlined',
@@ -4089,10 +4186,9 @@ const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedR
     native = false,
     children,
     renderValue: renderValueProp,
-    leadingIcon = null
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["id", "variant", "color", "value", "defaultValue", "disabled", "error", "label", "placeholder", "helperText", "onChange", "onFocus", "onBlur", "native", "children", "renderValue", "leadingIcon"]);
-
+    leadingIcon = null,
+    ...otherProps
+  } = props;
   const [value, onChange] = core.useControlledState(valueProp, onChangeProp, defaultValue, setState => (e, v) => {
     setState(v);
   });
@@ -4163,7 +4259,7 @@ const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedR
           children: [leadingIcon && /*#__PURE__*/jsxRuntime.jsx(IconContainer, {
             position: "start",
             children: leadingIcon
-          }), /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
+          }), /*#__PURE__*/jsxRuntime.jsx(Comp, {
             ref: core.assignMultipleRefs(forwardedRef, buttonRef),
             variant: variant,
             id: inputId,
@@ -4178,17 +4274,21 @@ const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedR
             "aria-describedby": helperTextId,
             hasLabel: !!label,
             leadingIcon: Boolean(leadingIcon),
-            trailingIcon: true
-          }, otherProps, {
+            trailingIcon: true,
+            ...otherProps,
             children: native ? children : renderValue(value)
-          })), !native && /*#__PURE__*/jsxRuntime.jsx(MenuPopover, {
+          }), !native && /*#__PURE__*/jsxRuntime.jsx(MenuPopover, {
             usePortal: true,
             children: /*#__PURE__*/jsxRuntime.jsx(MenuList, {
               defaultActiveItemValue: value,
               style: {
-                minWidth: buttonRef == null ? void 0 : (_buttonRef$current = buttonRef.current) == null ? void 0 : _buttonRef$current.offsetWidth
+                minWidth: buttonRef?.current?.offsetWidth
               },
               role: "listbox",
+              __css: {
+                '& [data-menu-item=""]': { ...listItemStyle('primary')
+                }
+              },
               children: children
             })
           })]
@@ -4205,6 +4305,15 @@ const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedR
   });
 });
 
+const MenuItem = /*#__PURE__*/react$1.forwardRef(({
+  as = 'li',
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
+  as: Box,
+  innerAs: as,
+  ref: ref,
+  ...props
+}));
 const ZERO_WIDTH_SPACE = '\u200b';
 const SelectItem = /*#__PURE__*/react$1.forwardRef(function SelectItem(props, forwardedRef) {
   const {
@@ -4212,10 +4321,9 @@ const SelectItem = /*#__PURE__*/react$1.forwardRef(function SelectItem(props, fo
     onSelect: onSelectProp,
     children,
     value: valueProp,
-    disabled
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "onSelect", "children", "value", "disabled"]);
-
+    disabled,
+    ...otherProps
+  } = props;
   const {
     native,
     onSelect,
@@ -4224,13 +4332,13 @@ const SelectItem = /*#__PURE__*/react$1.forwardRef(function SelectItem(props, fo
   const value = valueProp !== undefined && valueProp !== null ? String(valueProp) : children;
 
   if (native) {
-    return /*#__PURE__*/jsxRuntime.jsx("option", _extends__default['default']({
+    return /*#__PURE__*/jsxRuntime.jsx("option", {
       ref: forwardedRef,
       value: value,
-      disabled: disabled
-    }, otherProps, {
+      disabled: disabled,
+      ...otherProps,
       children: children
-    }));
+    });
   }
 
   if (children === undefined && disabled) {
@@ -4238,17 +4346,18 @@ const SelectItem = /*#__PURE__*/react$1.forwardRef(function SelectItem(props, fo
   }
 
   const selected = value === String(selectedValue);
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
     as: MenuItem,
     onSelect: core.wrapEvent(onSelectProp, onSelect),
     "data-value": value,
     disabled: disabled,
     ref: forwardedRef,
     role: "option",
-    selected: selected
-  }, otherProps, {
+    "aria-selected": selected ? 'true' : undefined,
+    selected: selected,
+    ...otherProps,
     children: children || ZERO_WIDTH_SPACE
-  }));
+  });
 });
 
 const pulseAnimation = react.keyframes({
@@ -4298,22 +4407,24 @@ const Skeleton = /*#__PURE__*/react$1.forwardRef(function Skeleton(props, forwar
   const {
     as = 'span',
     __css,
-    animation = 'pulse'
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "__css", "animation"]);
-
+    animation = 'pulse',
+    ...otherProps
+  } = props;
   const theme = useTheme();
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
     ref: forwardedRef,
     as: as,
-    __css: _extends__default['default']({
+    __css: {
       height: '1.2em',
       display: 'inline-block',
-      backgroundColor: alpha('on.surface', 0.11)
-    }, animation === 'pulse' ? pulseAnimationStyle() : waveAnimationStyle({
-      theme
-    }), __css)
-  }, otherProps));
+      backgroundColor: alpha('on.surface', 0.11),
+      ...(animation === 'pulse' ? pulseAnimationStyle() : waveAnimationStyle({
+        theme
+      })),
+      ...__css
+    },
+    ...otherProps
+  });
 });
 
 const appearAnimation = react.keyframes({
@@ -4329,18 +4440,219 @@ const appearAnimation = react.keyframes({
 const DelayAppearance = /*#__PURE__*/react$1.forwardRef(function DelayAppearance(props, forwardedRef) {
   const {
     timeoutInMilliseconds = 500,
-    __css
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["timeoutInMilliseconds", "__css"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+    __css,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
     ref: forwardedRef,
     timeoutInMilliseconds: timeoutInMilliseconds,
-    __css: _extends__default['default']({
+    __css: {
       animation: `0s linear ${timeoutInMilliseconds}ms forwards ${appearAnimation}`,
-      visibility: 'hidden'
-    }, __css)
-  }, otherProps));
+      visibility: 'hidden',
+      ...__css
+    },
+    ...otherProps
+  });
+});
+
+const SliderInput = /*#__PURE__*/react$1.forwardRef(({
+  as = 'div',
+  __css,
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntime.jsx(core.SliderInput, {
+  as: Box,
+  innerAs: as,
+  ref: ref,
+  ...props,
+  __css: {
+    maxWidth: '100%',
+    cursor: 'pointer',
+    '&[data-orientation="horizontal"]': {
+      height: "0.25rem"
+    },
+    '&[data-orientation="vertical"]': {
+      width: "0.25rem",
+      height: '250px',
+      maxHeight: '100%'
+    },
+    '&[data-disabled]': {
+      opacity: 0.5,
+      pointerEvents: 'none'
+    },
+    ...__css
+  }
+})); /////////////////////////////////////////////////////
+// SliderHandle
+
+const SliderHandle = /*#__PURE__*/react$1.forwardRef(({
+  as = 'div',
+  __css,
+  children,
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntime.jsxs(core.SliderHandle, {
+  as: RippleBox,
+  innerAs: as,
+  ref: ref,
+  rippleColor: "currentColor",
+  hoverOpacity: 0.12,
+  focusOpacity: 0.24,
+  pressedOpacity: 0.24,
+  mouseFocus: true,
+  center: true,
+  __css: {
+    position: 'relative',
+    width: "2.5rem",
+    height: "2.5rem",
+    color: 'primary',
+    borderRadius: 'full',
+    zIndex: 1,
+    transformOrigin: 'center',
+    userSelect: 'none',
+    '&[aria-orientation="horizontal"]': {
+      top: '50%',
+      transform: 'translateY(-50%)'
+    },
+    '&[aria-orientation="horizontal"]:focus': {
+      transform: 'translateY(-50%)'
+    },
+    '&[aria-orientation="vertical"]': {
+      left: '50%',
+      transform: 'translateX(-50%)'
+    },
+    ':focus': {
+      outline: 'none'
+    },
+    ...__css
+  },
+  ...props,
+  children: [/*#__PURE__*/jsxRuntime.jsx(Box, {
+    __css: {
+      bg: 'currentColor',
+      width: '50%',
+      height: '50%',
+      borderRadius: 'full',
+      pointerEvents: 'none',
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      boxShadow: 1
+    }
+  }), children]
+})); /////////////////////////////////////////////////////
+// SliderMarker
+
+const SliderMarker = /*#__PURE__*/react$1.forwardRef(({
+  as = 'div',
+  __css,
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntime.jsx(core.SliderMarker, {
+  as: Box,
+  innerAs: as,
+  ref: ref,
+  ...props,
+  __css: {
+    transformOrigin: 'center',
+    borderRadius: 'full',
+    width: '2px',
+    height: '2px',
+    '&[data-orientation="horizontal"]': {
+      top: '50%',
+      transform: 'translate(-50%, -50%)'
+    },
+    '&[data-orientation="vertical"]': {
+      left: '50%',
+      transform: 'translate(-50%, -50%)'
+    },
+    opacity: 0.38,
+    bg: 'on.surface-variant',
+    '&[data-state="at-value"],&[data-state="under-value"]': {
+      bg: 'on.primary'
+    },
+    ...__css
+  }
+})); /////////////////////////////////////////////////////
+// SliderTrack
+
+const SliderTrack = /*#__PURE__*/react$1.forwardRef(({
+  as = 'div',
+  __css,
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntime.jsx(core.SliderTrack, {
+  as: Box,
+  innerAs: as,
+  ref: ref,
+  ...props,
+  __css: {
+    position: 'relative',
+    borderRadius: 'full',
+    bg: 'surface-variant',
+    '&[data-orientation="horizontal"]': {
+      width: '100%',
+      height: 'inherit'
+    },
+    '&[data-orientation="vertical"]': {
+      width: 'inherit',
+      height: '100%'
+    },
+    '&::before': {
+      content: '""',
+      position: 'absolute'
+    },
+    '&[data-orientation="horizontal"]::before': {
+      width: '100%',
+      height: '1.5rem',
+      top: 'calc(-0.5rem - 1px)',
+      left: '0'
+    },
+    '&[data-orientation="vertical"]::before': {
+      width: '1.5rem',
+      height: '100%',
+      top: '0',
+      left: 'calc(-0.5rem - 1px)'
+    },
+    ...__css
+  }
+})); /////////////////////////////////////////////////////
+// SliderRange
+
+const SliderRange = /*#__PURE__*/react$1.forwardRef(({
+  as = 'div',
+  __css,
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntime.jsx(core.SliderRange, {
+  as: Box,
+  innerAs: as,
+  ref: ref,
+  __css: {
+    borderRadius: 'inherit',
+    bg: 'primary',
+    left: '0',
+    bottom: '0',
+    top: '50%',
+    '&[data-orientation="horizontal"]': {
+      height: '100%'
+    },
+    '&[data-orientation="vertical"]': {
+      width: '100%'
+    },
+    transform: 'translateY(-50%)',
+    ...__css
+  },
+  ...props
+}));
+const Slider = /*#__PURE__*/react$1.forwardRef(function Slider(props, forwardedRef) {
+  const {
+    children,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(SliderInput, { ...otherProps,
+    ref: forwardedRef,
+    "data-reach-slider": "",
+    children: /*#__PURE__*/jsxRuntime.jsxs(SliderTrack, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(SliderRange, {}), /*#__PURE__*/jsxRuntime.jsx(SliderHandle, {}), children]
+    })
+  });
 });
 
 const StackItemContext = /*#__PURE__*/react$1.createContext(null);
@@ -4371,9 +4683,7 @@ function useStackItem({
   }
 
   react$1.useLayoutEffect(() => {
-    var _ref$current$getBound, _ref$current;
-
-    const height = (_ref$current$getBound = (_ref$current = ref.current) == null ? void 0 : _ref$current.getBoundingClientRect().height) != null ? _ref$current$getBound : 0;
+    const height = ref.current?.getBoundingClientRect().height ?? 0;
     onSetHeight(height);
 
     if (isExiting) {
@@ -4510,7 +4820,7 @@ const StackProvider = ({
   const onAddItemRef = react$1.useRef(null);
 
   function onAddItem(element) {
-    onAddItemRef.current == null ? void 0 : onAddItemRef.current(element);
+    onAddItemRef.current?.(element);
   }
 
   return /*#__PURE__*/jsxRuntime.jsxs(StackContext.Provider, {
@@ -4642,7 +4952,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 = {
@@ -4681,28 +4991,34 @@ function useSnackbarAnimation(ref, timeout) {
   switch (state) {
     case 'entering':
       return {
-        style: _extends__default['default']({}, animateFn('entering', translateY), {
+        style: { ...animateFn('entering', translateY),
           visibility: 'hidden'
-        }),
-        placementStyle: _extends__default['default']({}, placementStyle, commonStyle),
+        },
+        placementStyle: { ...placementStyle,
+          ...commonStyle
+        },
         onClose
       };
 
     case 'entered':
       return {
-        style: _extends__default['default']({}, animateFn('entered', translateY), {
+        style: { ...animateFn('entered', translateY),
           transition: getTransition(TRANSITION_TIME)
-        }),
-        placementStyle: _extends__default['default']({}, placementStyle, commonStyle),
+        },
+        placementStyle: { ...placementStyle,
+          ...commonStyle
+        },
         onClose
       };
 
     case 'exiting':
       return {
-        style: _extends__default['default']({}, animateFn('exiting', translateY), {
+        style: { ...animateFn('exiting', translateY),
           transition: getTransition(TRANSITION_TIME)
-        }),
-        placementStyle: _extends__default['default']({}, placementStyle, commonStyle),
+        },
+        placementStyle: { ...placementStyle,
+          ...commonStyle
+        },
         onClose
       };
   }
@@ -4710,31 +5026,29 @@ function useSnackbarAnimation(ref, timeout) {
 
 const Snackbar = /*#__PURE__*/react$1.forwardRef(function Snackbar(props, forwardedRef) {
   const {
-    colorMode
-  } = useColorMode();
+    colorScheme
+  } = dynamicTheme.useColorScheme();
   const ref = react$1.useRef(null);
-
   const {
     __css,
     action,
     children,
     style: styleProp,
     timeout = 5000,
-    dismissible
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["__css", "action", "children", "style", "timeout", "dismissible"]);
-
+    dismissible,
+    ...otherProps
+  } = props;
   const {
     onClose,
     placementStyle,
     style
   } = useSnackbarAnimation(ref, timeout);
-  return /*#__PURE__*/jsxRuntime.jsxs(Paper, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsxs(Paper, {
     elevation: 4,
     darkThemeBackgroundOverlay: 4,
-    className: colorMode === 'default' ? DARK_THEME_CLASS : DEFAULT_THEME_CLASS,
+    className: colorScheme === 'light' ? dynamicTheme.DARK_SCHEME_CLASS : dynamicTheme.LIGHT_SCHEME_CLASS,
     ref: core.assignMultipleRefs(forwardedRef, ref),
-    __css: _extends__default['default']({
+    __css: {
       boxShadow: 4,
       py: "0.375rem",
       pl: 3,
@@ -4745,12 +5059,16 @@ const Snackbar = /*#__PURE__*/react$1.forwardRef(function Snackbar(props, forwar
       borderRadius: 'extra-small',
       color: 'on.surface',
       flexDirection: 'row',
-      willChange: 'transform,opacity'
-    }, placementStyle, __css),
-    style: _extends__default['default']({}, style, styleProp)
-  }, otherProps, {
+      willChange: 'transform,opacity',
+      ...placementStyle,
+      ...__css
+    },
+    style: { ...style,
+      ...styleProp
+    },
+    ...otherProps,
     children: [/*#__PURE__*/jsxRuntime.jsx(Text, {
-      variant: "body2",
+      variant: "body-medium",
       as: "span",
       py: 2,
       children: children
@@ -4764,7 +5082,7 @@ const Snackbar = /*#__PURE__*/react$1.forwardRef(function Snackbar(props, forwar
         onClick: onClose
       }) : action
     })]
-  }));
+  });
 });
 
 const BORDER_WIDTH = 2;
@@ -4774,93 +5092,85 @@ const CIRCLE_SIZE_INACTIVE_CHECKED = 24;
 const CIRCLE_SIZE_ACTIVE_CHECKED = 28;
 const CIRCLE_SIZE_INACTIVE_UNCHECKED = 16;
 const CIRCLE_SIZE_ACTIVE_UNCHECKED = 28;
-const SwitchTrail = (_ref) => {
-  let {
-    checked = false,
-    disabled = false
-  } = _ref,
-      otherProps = _objectWithoutPropertiesLoose__default['default'](_ref, ["checked", "disabled"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
-    __css: _extends__default['default']({
-      width: polished.rem(TRAIL_WIDTH),
-      height: polished.rem(TRAIL_HEIGHT),
-      borderRadius: polished.rem(TRAIL_HEIGHT / 2),
-      borderWidth: polished.rem(BORDER_WIDTH),
-      borderStyle: 'solid',
-      backgroundColor: checked ? 'primary' : 'surface-variant',
-      borderColor: checked ? 'primary' : 'outline'
-    }, disabled && {
+const SwitchTrail = ({
+  checked = false,
+  disabled = false,
+  ...otherProps
+}) => /*#__PURE__*/jsxRuntime.jsx(Box, {
+  __css: {
+    width: polished.rem(TRAIL_WIDTH),
+    height: polished.rem(TRAIL_HEIGHT),
+    borderRadius: polished.rem(TRAIL_HEIGHT / 2),
+    borderWidth: polished.rem(BORDER_WIDTH),
+    borderStyle: 'solid',
+    backgroundColor: checked ? 'primary' : 'surface-variant',
+    borderColor: checked ? 'primary' : 'outline',
+    ...(disabled && {
       opacity: 0.12,
       backgroundColor: checked ? 'on.surface' : 'surface-variant',
       borderColor: 'on.surface'
     })
-  }, otherProps));
-};
+  },
+  ...otherProps
+});
 const THUMB_SIZE = 40;
-const SwitchThumb = (_ref2) => {
-  let {
-    checked = false
-  } = _ref2,
-      otherProps = _objectWithoutPropertiesLoose__default['default'](_ref2, ["checked"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
-    position: "absolute",
-    width: polished.rem(THUMB_SIZE),
-    height: polished.rem(THUMB_SIZE),
-    borderRadius: "full",
-    left: '50%',
-    top: '50%',
-    __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)',
-      '& > input': {
-        width: THUMB_SIZE,
-        height: THUMB_SIZE
-      }
+const SwitchThumb = ({
+  checked = false,
+  ...otherProps
+}) => /*#__PURE__*/jsxRuntime.jsx(Box, {
+  position: "absolute",
+  width: polished.rem(THUMB_SIZE),
+  height: polished.rem(THUMB_SIZE),
+  borderRadius: "full",
+  left: '50%',
+  top: '50%',
+  __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 ${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
     }
-  }, otherProps));
-};
-const SwitchCircle = (_ref3) => {
-  let {
-    checked = false
-  } = _ref3,
-      otherProps = _objectWithoutPropertiesLoose__default['default'](_ref3, ["checked"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
-    __css: {
-      position: 'absolute',
-      width: checked ? polished.rem(CIRCLE_SIZE_INACTIVE_CHECKED) : polished.rem(CIRCLE_SIZE_INACTIVE_UNCHECKED),
-      height: checked ? polished.rem(CIRCLE_SIZE_INACTIVE_CHECKED) : polished.rem(CIRCLE_SIZE_INACTIVE_UNCHECKED),
-      boxSizing: 'border-box',
-      borderRadius: 'full',
-      pointerEvents: 'none',
-      zIndex: 1,
-      backgroundColor: checked ? 'on.primary' : 'outline',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-      transition: 'inherit',
-      '[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &, [data-switch-thumb=""]:hover ~ &': {
-        backgroundColor: checked ? 'primary-container' : 'on.surface-variant'
-      },
-      '[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &': {
-        height: checked ? CIRCLE_SIZE_ACTIVE_CHECKED : CIRCLE_SIZE_ACTIVE_UNCHECKED,
-        width: checked ? CIRCLE_SIZE_ACTIVE_CHECKED : CIRCLE_SIZE_ACTIVE_UNCHECKED
-      },
-      '[data-switch-thumb=""]:disabled ~ &': {
-        opacity: checked ? 1 : 0.38,
-        backgroundColor: checked ? 'surface' : 'on.surface',
-        height: checked ? CIRCLE_SIZE_INACTIVE_CHECKED : CIRCLE_SIZE_INACTIVE_UNCHECKED,
-        width: checked ? CIRCLE_SIZE_INACTIVE_CHECKED : CIRCLE_SIZE_INACTIVE_UNCHECKED
-      }
+  },
+  ...otherProps
+});
+const SwitchCircle = ({
+  checked = false,
+  ...otherProps
+}) => /*#__PURE__*/jsxRuntime.jsx(Box, {
+  __css: {
+    position: 'absolute',
+    width: checked ? polished.rem(CIRCLE_SIZE_INACTIVE_CHECKED) : polished.rem(CIRCLE_SIZE_INACTIVE_UNCHECKED),
+    height: checked ? polished.rem(CIRCLE_SIZE_INACTIVE_CHECKED) : polished.rem(CIRCLE_SIZE_INACTIVE_UNCHECKED),
+    boxSizing: 'border-box',
+    borderRadius: 'full',
+    pointerEvents: 'none',
+    zIndex: 1,
+    backgroundColor: checked ? 'on.primary' : 'outline',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    transition: 'inherit',
+    '[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &, [data-switch-thumb=""]:hover ~ &': {
+      backgroundColor: checked ? 'primary-container' : 'on.surface-variant'
     },
-    "data-switch-circle": "",
-    role: "presentation",
-    "aria-hidden": "true"
-  }, otherProps));
-};
+    '[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &': {
+      height: checked ? CIRCLE_SIZE_ACTIVE_CHECKED : CIRCLE_SIZE_ACTIVE_UNCHECKED,
+      width: checked ? CIRCLE_SIZE_ACTIVE_CHECKED : CIRCLE_SIZE_ACTIVE_UNCHECKED
+    },
+    '[data-switch-thumb=""]:disabled ~ &': {
+      opacity: checked ? 1 : 0.38,
+      backgroundColor: checked ? 'surface' : 'on.surface',
+      height: checked ? CIRCLE_SIZE_INACTIVE_CHECKED : CIRCLE_SIZE_INACTIVE_UNCHECKED,
+      width: checked ? CIRCLE_SIZE_INACTIVE_CHECKED : CIRCLE_SIZE_INACTIVE_UNCHECKED
+    }
+  },
+  "data-switch-circle": "",
+  role: "presentation",
+  "aria-hidden": "true",
+  ...otherProps
+});
 
 const CheckBoxCore = core.CheckBox;
 const SwitchInner = /*#__PURE__*/react$1.forwardRef(function SwitchInner(props, forwardedRef) {
@@ -4869,10 +5179,9 @@ const SwitchInner = /*#__PURE__*/react$1.forwardRef(function SwitchInner(props,
     disabled,
     checked,
     onChange,
-    __css
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "disabled", "checked", "onChange", "__css"]);
-
+    __css,
+    ...otherProps
+  } = props;
   const color = checked ? 'primary' : 'on.surface';
   const theme = useTheme();
   return /*#__PURE__*/jsxRuntime.jsx(Box, {
@@ -4886,7 +5195,7 @@ const SwitchInner = /*#__PURE__*/react$1.forwardRef(function SwitchInner(props,
         disabled: disabled
       }), /*#__PURE__*/jsxRuntime.jsxs(SwitchThumb, {
         checked: checked,
-        children: [/*#__PURE__*/jsxRuntime.jsx(RippleBox, _extends__default['default']({
+        children: [/*#__PURE__*/jsxRuntime.jsx(RippleBox, {
           as: Comp,
           role: "switch",
           type: "checkbox",
@@ -4901,9 +5210,9 @@ const SwitchInner = /*#__PURE__*/react$1.forwardRef(function SwitchInner(props,
           focusOpacity: 0.12,
           center: true,
           disabled: disabled,
-          "data-switch-thumb": ""
-        }, otherProps, {
-          __css: _extends__default['default']({
+          "data-switch-thumb": "",
+          ...otherProps,
+          __css: {
             top: '50%',
             left: '50%',
             backgroundColor: 'transparent',
@@ -4917,9 +5226,10 @@ const SwitchInner = /*#__PURE__*/react$1.forwardRef(function SwitchInner(props,
             border: 'none',
             borderRadius: 'full',
             zIndex: 1,
-            position: 'absolute'
-          }, __css)
-        })), /*#__PURE__*/jsxRuntime.jsx(SwitchCircle, {
+            position: 'absolute',
+            ...__css
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx(SwitchCircle, {
           checked: checked
         })]
       })]
@@ -4930,16 +5240,17 @@ const Switch = /*#__PURE__*/react$1.forwardRef(function Switch(props, forwardedR
   const {
     as = 'input',
     disabled,
-    children
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "disabled", "children"]);
+    children,
+    ...otherProps
+  } = props;
 
-  const inner = /*#__PURE__*/jsxRuntime.jsx(CheckBoxCore, _extends__default['default']({
+  const inner = /*#__PURE__*/jsxRuntime.jsx(CheckBoxCore, {
     as: SwitchInner,
     innerAs: as,
     ref: forwardedRef,
-    disabled: disabled
-  }, otherProps));
+    disabled: disabled,
+    ...otherProps
+  });
 
   if (!children) {
     return inner;
@@ -4968,10 +5279,9 @@ const TabIndicator = /*#__PURE__*/react$1.forwardRef(function TabIndicator(props
   const {
     as = 'span',
     selected,
-    color = 'primary'
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "selected", "color"]);
-
+    color = 'primary',
+    ...otherProps
+  } = props;
   const ref = react$1.useRef(null);
   const {
     currentIndicator
@@ -4998,7 +5308,7 @@ const TabIndicator = /*#__PURE__*/react$1.forwardRef(function TabIndicator(props
       currentIndicator.current = ref.current;
     }
   }, [selected]);
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
     as: as,
     ref: core.assignMultipleRefs(ref, forwardedRef),
     width: "100%",
@@ -5010,10 +5320,11 @@ 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));
+    },
+    ...otherProps
+  });
 });
 
 const TabListContext = /*#__PURE__*/react$1.createContext({
@@ -5027,29 +5338,28 @@ const useTabListContext = () => react$1.useContext(TabListContext);
 
 const TabListInner = /*#__PURE__*/react$1.forwardRef(function TabListInner(props, forwardedRef) {
   const {
-    innerAs
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["innerAs"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+    innerAs,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
     as: innerAs,
     ref: forwardedRef,
     __css: {
       minWidth: "22.5rem",
       display: 'flex',
       alignItems: 'center'
-    }
-  }, otherProps));
+    },
+    ...otherProps
+  });
 });
 const TabList = /*#__PURE__*/react$1.forwardRef(function TabList(props, forwardedRef) {
   const {
     as = 'div',
     indicatorColor = 'primary',
     textColor = 'on.surface',
-    selectedTextColor
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "indicatorColor", "textColor", "selectedTextColor"]);
-
+    selectedTextColor,
+    ...otherProps
+  } = props;
   const currentIndicator = react$1.useRef(null);
   return /*#__PURE__*/jsxRuntime.jsx(TabListProvider, {
     value: {
@@ -5061,11 +5371,12 @@ const TabList = /*#__PURE__*/react$1.forwardRef(function TabList(props, forwarde
       value: {
         currentIndicator
       },
-      children: /*#__PURE__*/jsxRuntime.jsx(core.TabList, _extends__default['default']({
+      children: /*#__PURE__*/jsxRuntime.jsx(core.TabList, {
         as: TabListInner,
         innerAs: as,
-        ref: forwardedRef
-      }, otherProps))
+        ref: forwardedRef,
+        ...otherProps
+      })
     })
   });
 });
@@ -5075,10 +5386,9 @@ const TabInner = /*#__PURE__*/react$1.forwardRef(function Tab(props, forwardedRe
     innerAs,
     selected,
     children,
-    disabled
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["innerAs", "selected", "children", "disabled"]);
-
+    disabled,
+    ...otherProps
+  } = props;
   const {
     textColor,
     indicatorColor,
@@ -5087,9 +5397,9 @@ 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']({
+    children: [/*#__PURE__*/jsxRuntime.jsx(RippleBox, {
       as: innerAs,
       ref: forwardedRef,
       rippleColor: indicatorColor,
@@ -5106,17 +5416,17 @@ const TabInner = /*#__PURE__*/react$1.forwardRef(function Tab(props, forwardedRe
         },
         width: '100%',
         alignItems: 'center'
-      }
-    }, otherProps, {
+      },
+      ...otherProps,
       children: /*#__PURE__*/jsxRuntime.jsx(Text, {
         as: "span",
-        variant: "button",
+        variant: "label-large",
         color: "inherit",
         height: "100%",
         textAlign: "center",
         children: children
       })
-    })), /*#__PURE__*/jsxRuntime.jsx(TabIndicator, {
+    }), /*#__PURE__*/jsxRuntime.jsx(TabIndicator, {
       selected: selected,
       color: indicatorColor
     })]
@@ -5124,59 +5434,58 @@ const TabInner = /*#__PURE__*/react$1.forwardRef(function Tab(props, forwardedRe
 });
 const Tab = /*#__PURE__*/react$1.forwardRef(function Tab(props, forwardedRef) {
   const {
-    as = 'button'
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(core.Tab, _extends__default['default']({
+    as = 'button',
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(core.Tab, {
     as: TabInner,
     innerAs: as,
-    ref: forwardedRef
-  }, otherProps));
+    ref: forwardedRef,
+    ...otherProps
+  });
 });
 
 const TabPanelInner = /*#__PURE__*/react$1.forwardRef(function TabPanelInner(props, forwardedRef) {
   const {
-    innerAs
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["innerAs"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+    innerAs,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
     as: innerAs,
-    ref: forwardedRef
-  }, otherProps));
+    ref: forwardedRef,
+    ...otherProps
+  });
 });
 const TabPanel = /*#__PURE__*/react$1.forwardRef(function TabPanel(props, forwardedRef) {
   const {
-    as = 'div'
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(core.TabPanel, _extends__default['default']({
+    as = 'div',
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(core.TabPanel, {
     as: TabPanelInner,
     innerAs: as,
-    ref: forwardedRef
-  }, otherProps));
+    ref: forwardedRef,
+    ...otherProps
+  });
 });
 
 const Table = /*#__PURE__*/react$1.forwardRef((props, ref) => {
   const {
     children,
-    elevation = 1
-  } = props,
-        rest = _objectWithoutPropertiesLoose__default['default'](props, ["children", "elevation"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(Paper, _extends__default['default']({
+    elevation = 1,
+    ...rest
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(Paper, {
     ref: ref,
     role: "table",
     display: "flex",
     width: "100%",
     flexDirection: "column",
     elevation: elevation,
-    darkThemeBackgroundOverlay: elevation
-  }, rest, {
+    darkThemeBackgroundOverlay: elevation,
+    ...rest,
     children: children
-  }));
+  });
 });
 
 const TableHeadContext = /*#__PURE__*/react$1.createContext(false);
@@ -5187,146 +5496,135 @@ const useTableHeadContext = () => react$1.useContext(TableHeadContext);
 
 const TableBody = /*#__PURE__*/react$1.forwardRef((props, ref) => {
   const {
-    children
-  } = props,
-        rest = _objectWithoutPropertiesLoose__default['default'](props, ["children"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+    children,
+    ...rest
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
     ref: ref,
-    role: "rowgroup"
-  }, rest, {
+    role: "rowgroup",
+    ...rest,
     children: children
-  }));
+  });
 });
 
 const TableHead = /*#__PURE__*/react$1.forwardRef((props, ref) => {
   const {
     children,
-    __css
-  } = props,
-        rest = _objectWithoutPropertiesLoose__default['default'](props, ["children", "__css"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(TableBody, _extends__default['default']({
+    __css,
+    ...rest
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(TableBody, {
     ref: ref,
-    __css: _extends__default['default']({
+    __css: {
       borderBottomStyle: 'solid',
       borderBottomWidth: "0.0625rem",
-      borderBottomColor: alpha('on.surface', 0.12)
-    }, __css)
-  }, rest, {
+      borderBottomColor: alpha('on.surface', 0.12),
+      ...__css
+    },
+    ...rest,
     children: /*#__PURE__*/jsxRuntime.jsx(TableHeadProvider, {
       value: true,
       children: children
     })
-  }));
+  });
 });
 
 const TableCell = /*#__PURE__*/react$1.forwardRef((props, ref) => {
   const {
     children,
-    __css
-  } = props,
-        rest = _objectWithoutPropertiesLoose__default['default'](props, ["children", "__css"]);
-
+    __css,
+    ...rest
+  } = props;
   const isHeadCell = useTableHeadContext();
-  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
     ref: ref,
     px: 1,
     py: 3,
     role: isHeadCell ? 'columnheader' : 'cell',
-    __css: _extends__default['default']({
+    __css: {
       whiteSpace: 'nowrap',
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       fontWeight: isHeadCell ? 'medium' : undefined,
-      color: 'on.surface'
-    }, __css)
-  }, rest, {
+      color: 'on.surface',
+      ...__css
+    },
+    ...rest,
     children: children
-  }));
+  });
 });
 
 const TableRow = /*#__PURE__*/react$1.forwardRef((props, ref) => {
   const {
     children,
-    __css
-  } = props,
-        rest = _objectWithoutPropertiesLoose__default['default'](props, ["children", "__css"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(Text, _extends__default['default']({
+    __css,
+    ...rest
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(Text, {
     ref: ref,
     as: "div",
     role: "row",
     display: "flex",
     flexDirection: "row",
     width: "100%",
-    variant: "body1",
+    variant: "body-medium",
     px: 2,
-    __css: _extends__default['default']({
+    __css: {
       borderBottomStyle: 'solid',
       borderBottomWidth: "0.0625rem",
       borderBottomColor: alpha('on.surface', 0.12),
       '&:last-of-type': {
         borderBottom: 'none'
-      }
-    }, __css)
-  }, rest, {
+      },
+      ...__css
+    },
+    ...rest,
     children: children
-  }));
+  });
 });
 
 const BaseTooltip = core.Tooltip;
 const Tooltip = /*#__PURE__*/react$1.forwardRef(function Tooltip(props, forwardedRef) {
   const {
     placement = 'bottom',
-    __css
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["placement", "__css"]);
-
-  return /*#__PURE__*/jsxRuntime.jsx(BaseTooltip, _extends__default['default']({
+    __css,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(BaseTooltip, {
     as: core.Popper,
     innerAs: Box,
     ref: forwardedRef,
     placement: placement,
     distance: 8,
-    __css: _extends__default['default']({
+    __css: {
+      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',
-      zIndex: 'tooltip'
-    }, __css)
-  }, otherProps));
+      px: 2,
+      py: 1,
+      borderRadius: 'extra-small',
+      zIndex: 'tooltip',
+      ...__css
+    },
+    ...otherProps
+  });
 });
 
 Object.defineProperty(exports, 'Menu', {
   enumerable: true,
-  get: function () {
-    return core.Menu;
-  }
+  get: function () { return core.Menu; }
 });
 Object.defineProperty(exports, 'TabPanels', {
   enumerable: true,
-  get: function () {
-    return core.TabPanels;
-  }
+  get: function () { return core.TabPanels; }
 });
 Object.defineProperty(exports, 'Tabs', {
   enumerable: true,
-  get: function () {
-    return core.Tabs;
-  }
+  get: function () { return core.Tabs; }
 });
 Object.defineProperty(exports, 'useComboBoxContext', {
   enumerable: true,
-  get: function () {
-    return core.useComboBoxContext;
-  }
+  get: function () { return core.useComboBoxContext; }
 });
 exports.Alert = Alert;
 exports.AppBar = AppBar;
@@ -5341,8 +5639,6 @@ exports.ButtonGroup = ButtonGroup;
 exports.CheckBox = CheckBox;
 exports.Chip = ButtonChip;
 exports.ChoiceChip = ChoiceChip;
-exports.ColorModeContext = ColorModeContext;
-exports.ColorModeProvider = ColorModeProvider;
 exports.Combobox = Combobox;
 exports.ComboboxButton = ComboboxButton;
 exports.ComboboxInput = ComboboxInput;
@@ -5350,11 +5646,17 @@ exports.ComboboxLabel = ComboboxLabel;
 exports.ComboboxList = ComboboxList;
 exports.ComboboxOption = ComboboxOption;
 exports.ComboboxPopover = ComboboxPopover;
-exports.DARK_THEME_CLASS = DARK_THEME_CLASS;
-exports.DEFAULT_THEME_CLASS = DEFAULT_THEME_CLASS;
+exports.ContextMenuTrigger = ContextMenuTrigger;
 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;
@@ -5364,9 +5666,12 @@ exports.List = List;
 exports.ListItem = ListItem;
 exports.ListItemText = ListItemText;
 exports.MenuButton = MenuButton;
-exports.MenuItem = MenuItem;
+exports.MenuItem = MenuItem$1;
 exports.MenuList = MenuList;
 exports.MenuPopover = MenuPopover;
+exports.NavRailIndicator = NavRailIndicator;
+exports.NavRailItem = NavRailItem;
+exports.NavRailLabel = NavRailLabel;
 exports.NotchedOutline = NotchedOutline;
 exports.OutlinedContainer = OutlinedContainer;
 exports.Paper = Paper;
@@ -5378,10 +5683,15 @@ exports.RippleBox = RippleBox;
 exports.Select = Select;
 exports.SelectItem = SelectItem;
 exports.Skeleton = Skeleton;
+exports.Slider = Slider;
+exports.SliderHandle = SliderHandle;
+exports.SliderInput = SliderInput;
+exports.SliderMarker = SliderMarker;
+exports.SliderRange = SliderRange;
+exports.SliderTrack = SliderTrack;
 exports.Snackbar = Snackbar;
 exports.StackProvider = StackProvider;
 exports.Switch = Switch;
-exports.THEME_LOCAL_STORAGE_KEY = THEME_LOCAL_STORAGE_KEY;
 exports.Tab = Tab;
 exports.TabIndicator = TabIndicator;
 exports.TabIndicatorProvider = TabIndicatorProvider;
@@ -5401,12 +5711,12 @@ exports.base = base;
 exports.getBackgroundOverlay = getBackgroundOverlay;
 exports.getColorOverlay = getColorOverlay;
 exports.getDarkThemeBackgroundOverlay = getDarkThemeBackgroundOverlay;
-exports.getTheme = getTheme;
+exports.listItemStyle = listItemStyle;
+exports.mixColor = mixColor;
 exports.rippleStyle = rippleStyle;
 exports.sx = sx;
 exports.theme = theme;
 exports.useAppBarContext = useAppBarContext;
-exports.useColorMode = useColorMode;
 exports.useRipple = useRipple;
 exports.useRippleHandlers = useRippleHandlers;
 exports.useRippleSurface = useRippleSurface;