@basic-ui/material 1.0.0-alpha.6 → 1.0.0-alpha.9

package/build/cjs/index.js

@@ -23,7 +23,26 @@ var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(
 var _styled__default = /*#__PURE__*/_interopDefaultLegacy(_styled);
 var shouldForwardProp__default = /*#__PURE__*/_interopDefaultLegacy(shouldForwardProp);
 
+const EASING_EMPHASIZED = 'cubic-bezier(0.2, 0, 0, 1)';
+const EASING_EMPHASIZED_ACCELERATE = 'cubic-bezier(0.3, 0, 0.8, 0.15)';
+const EASING_EMPHASIZED_DECELERATE = 'cubic-bezier(0.05, 0.7, 0.1, 1)';
+const EASING_LINEAR = 'cubic-bezier(0, 0, 1, 1)';
+const EASING_STANDARD = 'cubic-bezier(0.2, 0, 0, 1)';
+const EASING_STANDARD_ACCELERATE = 'cubic-bezier(0.3, 0, 1, 1)';
+const EASING_STANDARD_DECELERATE = 'cubic-bezier(0, 0, 0, 1)';
+
 // material theme preset
+
+function font(fontFamily, lineHeight, fontSize, letterSpacing, weight) {
+  return {
+    fontFamily,
+    lineHeight: polished.rem(lineHeight),
+    fontSize: polished.rem(fontSize),
+    letterSpacing: polished.rem(letterSpacing),
+    weight
+  };
+}
+
 const theme = {
   googleFonts: 'https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:300,400,500,600,700&display=swap',
   colors: {
@@ -141,6 +160,8 @@ const theme = {
   fonts: {
     body: 'Roboto, sans-serif',
     heading: 'Roboto, sans-serif',
+    brand: 'Roboto, sans-serif',
+    plain: 'Roboto, sans-serif',
     monospace: '"Roboto Mono", monospace'
   },
   fontSizes: {
@@ -190,6 +211,21 @@ const theme = {
       fontFamily: 'body',
       lineHeight: 'body'
     },
+    'display-large': font('brand', 64, 57, 0, 400),
+    'display-medium': font('brand', 52, 45, 0, 400),
+    'display-small': font('brand', 44, 36, 0, 400),
+    'headline-large': font('brand', 40, 32, 0, 400),
+    'headline-medium': font('brand', 36, 28, 0, 400),
+    'headline-small': font('brand', 32, 24, 0, 400),
+    'title-large': font('plain', 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',
@@ -380,7 +416,7 @@ const theme = {
     elevations: {
       none: {},
       default: {
-        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
+        transition: `box-shadow .28s ${EASING_STANDARD}`,
         '&:hover': {
           boxShadow: 1
         },
@@ -389,7 +425,7 @@ const theme = {
         }
       },
       elevated: {
-        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
+        transition: `box-shadow .28s ${EASING_STANDARD}`,
         boxShadow: 1,
         '&:hover': {
           boxShadow: 2
@@ -399,7 +435,7 @@ const theme = {
         }
       },
       floating: {
-        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
+        transition: `box-shadow .28s ${EASING_STANDARD}`,
         boxShadow: 3,
         ':hover': {
           boxShadow: 4
@@ -444,7 +480,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',
@@ -689,11 +725,16 @@ const alpha = (colorString, alphaValue) => theme => {
   const rgb = polished.parseToRgb(color);
   return `rgba(${rgb.red},${rgb.green},${rgb.blue},${alphaValue})`;
 };
+function mixColor(baseColor, overlayColor, overlayOpacity) {
+  return theme => {
+    baseColor = css.get(theme, `colors.${baseColor}`, baseColor);
+    overlayColor = overlayOpacity ? alpha(overlayColor, overlayOpacity)(theme) : css.get(theme, `colors.${overlayColor}`, overlayColor);
+    return `linear-gradient(${overlayColor}, ${overlayColor}), ${baseColor}`;
+  };
+}
 function getColorOverlay(theme, baseColor, overlayColor, overlayOpacity) {
-  baseColor = css.get(theme, `colors.${baseColor}`) || baseColor;
-  overlayColor = alpha(overlayColor, overlayOpacity)(theme);
   return {
-    background: `linear-gradient(${overlayColor}, ${overlayColor}), ${baseColor}`
+    background: mixColor(baseColor, overlayColor, overlayOpacity)(theme)
   };
 }
 function getBackgroundOverlay(theme, backgroundOverlay, overlayColor = 'on.surface') {
@@ -792,7 +833,7 @@ const AppBar = /*#__PURE__*/react$1.forwardRef(function AppBar(props, forwardedR
         alignItems: 'center',
         width: '100%',
         overflow: 'hidden',
-        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)'
+        transition: `box-shadow .28s ${EASING_STANDARD}`
       }, css.get(theme, `appbar.sizes.${size}`), css.get(theme, `appbar.variants.${variantProp}`), __css)
     }, otherProps))
   });
@@ -931,10 +972,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 +1001,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`),
@@ -1337,15 +1378,13 @@ function useRippleSurface(opts = {}) {
     disabled
   }, rippleProps));
   const css$1 = react$1.useMemo(() => _extends__default['default']({
-    '&': {
-      overflow: 'hidden',
-      position: 'relative',
-      cursor: 'pointer',
-      // fix overflow: hidden + borderRadius in Safari
-      // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479
-      willChange: 'transform,opacity',
-      WebkitTapHighlightColor: 'transparent'
-    },
+    overflow: 'hidden',
+    position: 'relative',
+    cursor: 'pointer',
+    // fix overflow: hidden + borderRadius in Safari
+    // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479
+    willChange: 'transform,opacity',
+    WebkitTapHighlightColor: 'transparent',
     // ripple overlay
     '&::before': {
       backgroundColor: rippleColor,
@@ -1920,8 +1959,8 @@ function useDialogAnimation(opts) {
     mode
   }, otherOpts));
   const scrimOpacity = state === 'open' ? 1 : 0;
-  const transition = `opacity ${timing}ms cubic-bezier(.4,0,.2,1),transform ${timing}ms cubic-bezier(.4,0,.2,1)`;
-  const scrimTransition = `opacity ${timing * 0.4 | 0}ms cubic-bezier(.4,0,.2,1)`;
+  const transition = `opacity ${timing}ms ${EASING_STANDARD},transform ${timing}ms ${EASING_STANDARD}`;
+  const scrimTransition = `opacity ${timing * 0.4 | 0}ms ${EASING_STANDARD}`;
   return {
     containerStyle: _extends__default['default']({}, style, {
       transition
@@ -2077,7 +2116,7 @@ const Input = /*#__PURE__*/react$1.forwardRef(function Input(props, forwardedRef
       '::placeholder': {
         opacity: 0,
         color: variant === 'filled' ? alpha('on.surface-variant', 0.87) : alpha('on.surface-variant', 0.6),
-        transition: `opacity .18s cubic-bezier(.4,0,.2,1)`
+        transition: `opacity .18s ${EASING_STANDARD}`
       },
       ':disabled::placeholder': {
         color: alpha('on.surface', 0.38)
@@ -2151,7 +2190,7 @@ const FloatingLabel = /*#__PURE__*/react$1.forwardRef(function FloatingLabel(pro
       left: polished.rem(offsetX),
       height: typeof height === 'number' ? polished.rem(height) : height,
       transformOrigin: 'left center',
-      transition: `transform ${transitionTime}ms cubic-bezier(.4,0,.2,1), color ${transitionTime}ms cubic-bezier(.4,0,.2,1)`,
+      transition: `transform ${transitionTime}ms ${EASING_STANDARD}, color ${transitionTime}ms ${EASING_STANDARD}`,
       pointerEvents: 'none'
     },
     style: _extends__default['default']({
@@ -2213,7 +2252,7 @@ const LineRipple = /*#__PURE__*/react$1.forwardRef(function LineRipple(props, fo
       zIndex: 1,
       transform: 'scaleX(0)',
       transformOrigin: 'center center',
-      transition: `transform ${transitionDuration}ms cubic-bezier(.4,0,.2,1),opacity ${transitionDuration}ms cubic-bezier(.4,0,.2,1)`,
+      transition: `transform ${transitionDuration}ms ${EASING_STANDARD},opacity ${transitionDuration}ms ${EASING_STANDARD}`,
       opacity: 0
     }, __css)
   }, otherProps));
@@ -2403,7 +2442,7 @@ const InnerContainer = /*#__PURE__*/_styled__default['default']('div', process.e
     ['[data-notch-outline-item]']: _extends__default['default']({
       boxSizing: 'border-box',
       borderStyle,
-      transition: `border-color .15s cubic-bezier(.4,0,.2,1)`
+      transition: `border-color .15s ${EASING_STANDARD}`
     }, forceActive ? focusStyle : inactiveStyle),
     // notch items styles when input is hovered
     [makeSelector('hover:not([disabled]):not(:focus)')]: forceActive ? focusStyle : hoverStyle,
@@ -2412,7 +2451,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 {
@@ -2988,7 +3027,7 @@ const ComboboxButton = /*#__PURE__*/react$1.forwardRef((props, forwardedRef) =>
       height: "2.5rem",
       px: 0,
       '& > svg': {
-        transition: 'transform .15s cubic-bezier(.4,0,.2,1), color .15s cubic-bezier(.4,0,.2,1)'
+        transition: `transform .15s ${EASING_STANDARD}, color .15s ${EASING_STANDARD}`
       },
       '&[aria-expanded="false"] > svg': {
         color: alpha('on.surface', 0.54)
@@ -3089,7 +3128,7 @@ const CheckBoxIcon = /*#__PURE__*/react$1.forwardRef(function CheckBoxIcon(_ref,
       borderStyle: 'solid',
       width: "1.125rem",
       height: "1.125rem",
-      transition: 'background-color 90ms 0s cubic-bezier(0,0,.2,1), border-color 90ms 0s cubic-bezier(0,0,.2,1), opacity 90ms 0s cubic-bezier(0,0,.2,1)',
+      transition: `background-color 90ms 0s ${EASING_STANDARD}, border-color 90ms 0s ${EASING_STANDARD}, opacity 90ms 0s ${EASING_STANDARD}`,
       '& > svg': {
         display: 'block'
       },
@@ -3701,7 +3740,7 @@ const MenuList = /*#__PURE__*/react$1.forwardRef((_ref, ref) => {
       '[data-popper-placement="bottom"] &': {
         transformOrigin: 'top center'
       },
-      animation: `${growAnimation} .12s cubic-bezier(0,0,0.2,1)`
+      animation: `${growAnimation} .12s ${EASING_STANDARD}`
     }, __css)
   }, props));
 }); /////////////////////////////////////////////////////
@@ -3753,6 +3792,141 @@ const MenuPopover = /*#__PURE__*/react$1.forwardRef((_ref4, ref) => {
   }, props));
 });
 
+const NavRailIndicator = /*#__PURE__*/react$1.forwardRef(function NavRailIndicator(props, forwardedRef) {
+  const {
+    as = 'div',
+    children,
+    __css
+  } = props,
+        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "children", "__css"]);
+
+  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+    color: "currentColor",
+    ref: forwardedRef,
+    as: as,
+    "data-nav-rail-item-indicator": ""
+  }, otherProps, {
+    __css: _extends__default['default']({
+      width: '100%',
+      height: '100%',
+      maxWidth: "3.5rem",
+      maxHeight: "3.5rem",
+      borderRadius: 'full',
+      bg: 'var(--indicator-background-color)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: "2rem",
+      transition: `background-color .2s ${EASING_STANDARD}`,
+      pointerEvents: 'none'
+    }, __css),
+    children: children
+  }));
+});
+const NavRailLabel = /*#__PURE__*/react$1.forwardRef(function NavRailLabel(props, forwardedRef) {
+  const {
+    as = 'div',
+    children,
+    __css
+  } = props,
+        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "children", "__css"]);
+
+  return /*#__PURE__*/jsxRuntime.jsx(Text, _extends__default['default']({
+    ref: forwardedRef,
+    as: as,
+    variant: "caption",
+    lineHeight: 1
+  }, otherProps, {
+    __css: _extends__default['default']({
+      pt: "0.25rem",
+      pb: "0.75rem",
+      color: 'inherit',
+      pointerEvents: 'none'
+    }, __css),
+    children: children
+  }));
+});
+const NavRailItem = /*#__PURE__*/react$1.forwardRef(function NavRailItem(props, forwardedRef) {
+  const {
+    as = 'button',
+    children,
+    color = 'primary-container',
+    selected = false,
+    disabled = false,
+    style,
+    onKeyDown,
+    onPointerDown,
+    __css
+  } = props,
+        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "children", "color", "selected", "disabled", "style", "onKeyDown", "onPointerDown", "__css"]);
+
+  const theme = useTheme();
+  const baseOpacity = 0,
+        hoverOpacity = 0.04,
+        focusOpacity = 0.12,
+        pressedOpacity = 0.12;
+  const ripple = useRippleSurface({
+    rippleColor: 'currentColor',
+    onKeyDown,
+    onPointerDown,
+    baseOpacity,
+    hoverOpacity,
+    focusOpacity,
+    pressedOpacity
+  }); // Apply ripple from nav item to nav indicator
+
+  const rippleCss = react$1.useMemo(() => {
+    const ret = {};
+    const keys = Object.keys(ripple.__css);
+
+    for (const key of keys) {
+      if (!key.startsWith('&')) {
+        ret['& [data-nav-rail-item-indicator]'] = ret['& [data-nav-rail-item-indicator]'] || {};
+        ret['& [data-nav-rail-item-indicator]'][key] = ripple.__css[key];
+        continue;
+      }
+
+      const newKey = key.replace(/(.+?)::(before|after)/g, '$1 [data-nav-rail-item-indicator]::$2');
+      ret[newKey] = ripple.__css[key];
+    }
+
+    return ret;
+  }, [ripple.__css]);
+  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+    ref: forwardedRef,
+    as: as
+  }, otherProps, {
+    onPointerDown: ripple.onPointerDown,
+    onKeyDown: ripple.onKeyDown,
+    "aria-pressed": selected,
+    type: "button",
+    style: _extends__default['default']({}, ripple.style, style),
+    disabled: disabled,
+    __css: _extends__default['default']({
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      transition: `color .2s ${EASING_STANDARD}`,
+      color: selected ? `on.${color}` : 'on.surface-variant',
+      '--indicator-background-color': selected ? styledSystem.get(theme, `colors.${color}`) : 'transparent',
+      border: 'none',
+      ':focus': {
+        outline: 'none'
+      },
+      backgroundColor: 'transparent',
+      margin: 0,
+      padding: 0,
+      px: "0.75rem",
+      minHeight: "3.75rem",
+      height: "3.75rem",
+      cursor: 'pointer',
+      textDecoration: 'none',
+      WebkitTapHighlightColor: 'transparent'
+    }, rippleCss, __css),
+    children: children
+  }));
+});
+
 const innerDivRotate = react.keyframes({
   '0%': {
     transformOrigin: '50% 50%'
@@ -3827,7 +4001,7 @@ const ProgressSpinner = /*#__PURE__*/react$1.forwardRef(function ProgressSpinner
             strokeDasharray: '80px, 200px',
             strokeDashoffset: '0px'
           } : {
-            transition: 'stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+            transition: `stroke-dashoffset 300ms ${EASING_STANDARD} 0ms`,
             strokeDasharray: circumference.toFixed(3)
           }
         })
@@ -3860,7 +4034,7 @@ const RadioButtonIcon = /*#__PURE__*/react$1.forwardRef(function RadioButtonIcon
         borderRadius: 'full',
         width: '100%',
         height: '100%',
-        transition: 'transform .12s cubic-bezier(0,0,.2,1) 0ms,background-color .12s cubic-bezier(0,0,.2,1) 0ms',
+        transition: `transform .12s ${EASING_STANDARD} 0ms,background-color .12s ${EASING_STANDARD} 0ms`,
         transform: checked ? 'scale(1)' : 'scale(0)'
       }
     })
@@ -4038,7 +4212,7 @@ const SelectIcon = /*#__PURE__*/react$1.forwardRef(function SelectIcon(props, fo
       color: open ? 'primary' : alpha('on.surface', 0.54),
       pointerEvents: 'none',
       transform: open ? 'rotate(180deg)' : undefined,
-      transition: 'transform .15s cubic-bezier(.4,0,.2,1), color .15s cubic-bezier(.4,0,.2,1)'
+      transition: `transform .15s ${EASING_STANDARD}, color .15s ${EASING_STANDARD}`
     }
   }, otherProps, {
     children: /*#__PURE__*/jsxRuntime.jsx("path", {
@@ -4643,7 +4817,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 = {
@@ -4815,7 +4989,7 @@ const SwitchThumb = (_ref2) => {
     __css: {
       transform: `translateX(calc(-50% ${checked ? '+' : '-'} ${polished.rem((TRAIL_WIDTH - CIRCLE_SIZE_INACTIVE_CHECKED - BORDER_WIDTH * 4) / 2)})) translateY(-50%)`,
       WebkitTapHighlightColor: 'transparent',
-      transition: 'background-color 90ms cubic-bezier(.4,0,.2,1),border-color 90ms cubic-bezier(.4,0,.2,1),transform 90ms cubic-bezier(.4,0,.2,1),height 90ms cubic-bezier(.4,0,.2,1),width 90ms cubic-bezier(.4,0,.2,1)',
+      transition: `background-color 90ms ${EASING_STANDARD},border-color 90ms ${EASING_STANDARD},transform 90ms ${EASING_STANDARD},height 90ms ${EASING_STANDARD},width 90ms ${EASING_STANDARD}`,
       '& > input': {
         width: THUMB_SIZE,
         height: THUMB_SIZE
@@ -5011,7 +5185,7 @@ const TabIndicator = /*#__PURE__*/react$1.forwardRef(function TabIndicator(props
       transform: `scale(1)`,
       opacity: selected ? 1 : 0,
       transformOrigin: 'left',
-      transition: 'transform .25s cubic-bezier(.4,0,.2,1)',
+      transition: `transform .25s ${EASING_STANDARD}`,
       zIndex: 1
     }
   }, otherProps));
@@ -5356,6 +5530,13 @@ exports.DEFAULT_THEME_CLASS = DEFAULT_THEME_CLASS;
 exports.DelayAppearance = DelayAppearance;
 exports.Dialog = Dialog;
 exports.Divider = Divider;
+exports.EASING_EMPHASIZED = EASING_EMPHASIZED;
+exports.EASING_EMPHASIZED_ACCELERATE = EASING_EMPHASIZED_ACCELERATE;
+exports.EASING_EMPHASIZED_DECELERATE = EASING_EMPHASIZED_DECELERATE;
+exports.EASING_LINEAR = EASING_LINEAR;
+exports.EASING_STANDARD = EASING_STANDARD;
+exports.EASING_STANDARD_ACCELERATE = EASING_STANDARD_ACCELERATE;
+exports.EASING_STANDARD_DECELERATE = EASING_STANDARD_DECELERATE;
 exports.FilledContainer = FilledContainer;
 exports.FloatingLabel = FloatingLabel;
 exports.HelperText = HelperText;
@@ -5368,6 +5549,9 @@ exports.MenuButton = MenuButton;
 exports.MenuItem = MenuItem;
 exports.MenuList = MenuList;
 exports.MenuPopover = MenuPopover;
+exports.NavRailIndicator = NavRailIndicator;
+exports.NavRailItem = NavRailItem;
+exports.NavRailLabel = NavRailLabel;
 exports.NotchedOutline = NotchedOutline;
 exports.OutlinedContainer = OutlinedContainer;
 exports.Paper = Paper;
@@ -5403,6 +5587,7 @@ exports.getBackgroundOverlay = getBackgroundOverlay;
 exports.getColorOverlay = getColorOverlay;
 exports.getDarkThemeBackgroundOverlay = getDarkThemeBackgroundOverlay;
 exports.getTheme = getTheme;
+exports.mixColor = mixColor;
 exports.rippleStyle = rippleStyle;
 exports.sx = sx;
 exports.theme = theme;