@basic-ui/material 0.1.15 → 1.0.0-alpha.0

package/build/cjs/index.js

@@ -24,45 +24,62 @@ var _styled__default = /*#__PURE__*/_interopDefaultLegacy(_styled);
 var shouldForwardProp__default = /*#__PURE__*/_interopDefaultLegacy(shouldForwardProp);
 
 // material theme preset
-const primary = '#5d1049';
-const secondary = '#e30425';
-const error = '#BF360C';
-const background = '#f6f6f6';
-const surface = '#fff';
-const muted = '#f6f6f6';
 const theme = {
   googleFonts: 'https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:300,400,500,600,700&display=swap',
   colors: {
-    background,
-    surface,
-    error,
-    primary,
-    secondary,
-    muted,
+    primary: '#934078',
+    secondary: '#705765',
+    tertiary: '#80543e',
+    error: '#ba1b1b',
+    'primary-container': '#ffd7ed',
+    'secondary-container': '#fbd9ea',
+    'tertiary-container': '#ffdbc9',
+    'error-container': '#ffdad4',
+    background: '#fcfcfc',
+    surface: '#fcfcfc',
+    'surface-variant': '#efdee5',
+    outline: '#81747a',
     on: {
-      primary: polished.readableColor(primary),
-      secondary: polished.readableColor(secondary),
-      error: polished.readableColor(error),
-      background: polished.readableColor(background),
-      surface: polished.readableColor(surface),
-      muted: polished.readableColor(muted)
+      primary: '#ffffff',
+      secondary: '#ffffff',
+      tertiary: '#ffffff',
+      error: '#ffffff',
+      'primary-container': '#3b002d',
+      'secondary-container': '#291521',
+      'tertiary-container': '#321303',
+      'error-container': '#410001',
+      background: '#1f1a1c',
+      surface: '#1f1a1c',
+      'surface-variant': '#4f4349',
+      outline: '#feecf3'
     },
     modes: {
       dark: {
-        text: '#000',
-        background: polished.mix(0.08, primary, '#121212'),
-        surface: polished.mix(0.08, primary, '#121212'),
-        error,
-        primary: '#EE89BD',
-        secondary,
-        muted,
+        primary: '#ffade0',
+        secondary: '#debece',
+        tertiary: '#f4ba9e',
+        error: '#ffb4a9',
+        'primary-container': '#77285f',
+        'secondary-container': '#57404d',
+        'tertiary-container': '#653d28',
+        'error-container': '#930006',
+        background: '#1f1a1c',
+        surface: '#1f1a1c',
+        'surface-variant': '#4f4349',
+        outline: '#9b8d93',
         on: {
-          primary: "#000",
-          secondary: polished.readableColor(secondary),
-          error: polished.readableColor(error),
-          background: "#fff",
-          surface: "#fff",
-          muted: polished.readableColor(muted)
+          primary: '#5b0e47',
+          secondary: '#402a37',
+          tertiary: '#4b2714',
+          error: '#680003',
+          'primary-container': '#ffd7ed',
+          'secondary-container': '#fbd9ea',
+          'tertiary-container': '#ffdbc9',
+          'error-container': '#ffdad4',
+          background: '#eae0e3',
+          surface: '#eae0e3',
+          'surface-variant': '#d3c2c9',
+          outline: '#22191e'
         }
       }
     }
@@ -74,10 +91,19 @@ const theme = {
   radii: {
     none: 0,
     default: "0.25rem",
-    large: "0.5rem",
+    'extra-small': "0.25rem",
+    'extra-small_top': `${"0.25rem"} ${"0.25rem"} 0 0`,
+    small: "0.5rem",
+    medium: "0.75rem",
+    large: "1rem",
+    large_end: `0 ${"1rem"} ${"1rem"} 0`,
+    large_top: `${"1rem"} ${"1rem"} 0 0`,
+    'extra-large': "1.75rem",
+    'extra-large_top': `${"1.75rem"} ${"1.75rem"} 0 0`,
+    full: "6249.9375rem",
     circle: '100%'
   },
-  shadows: {
+  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)',
@@ -104,6 +130,14 @@ const theme = {
     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)'
+  },
   fonts: {
     body: 'Roboto, sans-serif',
     heading: 'Roboto, sans-serif',
@@ -217,11 +251,10 @@ const theme = {
       letterSpacing: "0.017857142857142856em"
     },
     button: {
-      variant: 'text.caps',
+      variant: 'text.display',
       fontSize: 2,
-      fontWeight: 'medium',
-      letterSpacing: "0.08928571428571429em",
-      lineHeight: 'normal'
+      letterSpacing: "0.08571428571428572em",
+      fontWeight: 'medium'
     },
     caption: {
       variant: 'text.display',
@@ -266,16 +299,16 @@ const theme = {
     elevations: {
       default: {},
       elevated: {
-        boxShadow: 4
+        boxShadow: 2
       }
     },
     sizes: {
       default: {
-        height: "3.5rem",
+        height: "4rem",
         p: 3
       },
       dense: {
-        height: "3rem"
+        height: "3.5rem"
       }
     }
   },
@@ -283,17 +316,17 @@ const theme = {
     variants: {
       base: {
         variant: 'text.button',
-        borderRadius: 'default',
         boxShadow: 'none',
         py: 0,
-        px: 3,
-        height: "2.25rem",
+        px: "1.5rem",
+        height: "2.5rem",
+        borderRadius: 'full',
         cursor: 'pointer',
         outline: 'none'
       },
       text: {
         variant: 'buttons.variants.base',
-        px: 2
+        px: "0.75rem"
       },
       filled: {
         variant: 'buttons.variants.base'
@@ -307,7 +340,8 @@ const theme = {
         maxHeight: "3.5rem",
         width: "3.5rem",
         maxWidth: "3.5rem",
-        borderRadius: 'circle'
+        borderRadius: 'large',
+        px: 0
       },
       'fab-mini': {
         variant: 'buttons.variants.fab',
@@ -315,13 +349,23 @@ const theme = {
         maxHeight: "2.5rem",
         width: "2.5rem",
         maxWidth: "2.5rem",
+        borderRadius: 'medium',
+        px: 0
+      },
+      'fab-large': {
+        variant: 'buttons.variants.fab',
+        height: "6rem",
+        maxHeight: "6rem",
+        width: "6rem",
+        maxWidth: "6rem",
+        borderRadius: 'extra-large',
         px: 0
       },
       'fab-extended': {
         variant: 'buttons.variants.base',
-        height: "3rem",
-        px: "1.25rem",
-        borderRadius: "1.5rem"
+        height: "3.5rem",
+        px: "1rem",
+        borderRadius: 'large'
       },
       icon: {
         variant: 'buttons.variants.base',
@@ -330,19 +374,25 @@ const theme = {
         width: "3rem",
         maxWidth: "3rem",
         px: "0.75rem",
-        borderRadius: '100%'
+        borderRadius: 'full'
       }
     },
     elevations: {
       none: {},
-      contained: {
+      default: {
         transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
-        boxShadow: 2,
-        ':focus,:hover': {
-          boxShadow: 4
+        '&:hover': {
+          boxShadow: 1
         },
-        ':active': {
-          boxShadow: 8
+        '&:hover:disabled': {
+          boxShadow: 0
+        }
+      },
+      elevated: {
+        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
+        boxShadow: 1,
+        '&:hover': {
+          boxShadow: 2
         },
         '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
           boxShadow: 0
@@ -350,12 +400,9 @@ const theme = {
       },
       floating: {
         transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
-        boxShadow: 6,
-        ':focus,:hover': {
-          boxShadow: 8
-        },
-        ':active': {
-          boxShadow: 12
+        boxShadow: 3,
+        ':hover': {
+          boxShadow: 4
         },
         '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
           boxShadow: 0
@@ -365,13 +412,13 @@ const theme = {
     overlays: {
       transparent: {
         hover: {
-          opacity: 0.04
+          opacity: 0.08
         },
         focus: {
           opacity: 0.12
         },
         pressed: {
-          opacity: 0.12
+          opacity: 0.16
         }
       },
       filled: {
@@ -379,10 +426,10 @@ const theme = {
           opacity: 0.08
         },
         focus: {
-          opacity: 0.24
+          opacity: 0.12
         },
         pressed: {
-          opacity: 0.24
+          opacity: 0.16
         }
       }
     }
@@ -395,45 +442,38 @@ const theme = {
         py: 0,
         px: 0,
         height: "2rem",
-        borderRadius: "1rem",
+        borderRadius: 'small',
         outline: 'none',
         transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)'
       },
       filled: {
-        variant: 'chips.variants.base'
+        variant: 'chips.variants.base',
+        boxShadow: 1,
+        ':active:not([data-disabled])': {
+          boxShadow: 2
+        }
       },
       outlined: {
         variant: 'chips.variants.base'
       }
     }
   },
+  dialogs: {
+    variants: {
+      base: {
+        borderRadius: 'extra-large'
+      }
+    },
+    backgroundColorOverlay: 0.11
+  },
   paper: {
     overlays: {
-      '0': 0,
-      '1': 0.05,
-      '2': 0.07,
-      '3': 0.08,
-      '4': 0.09,
-      '5': 0.1,
-      '6': 0.11,
-      '7': 0.115,
-      '8': 0.12,
-      '9': 0.125,
-      '10': 0.13,
-      '11': 0.135,
-      '12': 0.14,
-      '13': 0.1425,
-      '14': 0.145,
-      '15': 0.1475,
-      '16': 0.15,
-      '17': 0.15125,
-      '18': 0.1525,
-      '19': 0.15375,
-      '20': 0.155,
-      '21': 0.15625,
-      '22': 0.1575,
-      '23': 0.15875,
-      '24': 0.16
+      0: 0,
+      1: 0.05,
+      2: 0.08,
+      3: 0.11,
+      4: 0.12,
+      5: 0.14
     }
   },
   zIndices: {
@@ -649,16 +689,20 @@ const alpha = (colorString, alphaValue) => theme => {
   const rgb = polished.parseToRgb(color);
   return `rgba(${rgb.red},${rgb.green},${rgb.blue},${alphaValue})`;
 };
-function getBackgroundOverlay(theme, backgroundOverlay) {
+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}`
+  };
+}
+function getBackgroundOverlay(theme, backgroundOverlay, overlayColor = 'on.surface') {
   if (Number(backgroundOverlay) <= 0) {
     return {};
   }
 
-  return {
-    background: `linear-gradient(${css.get(theme, 'colors.surface')}, ${css.get(theme, 'colors.surface')}), ${alpha('on.surface', css.get(theme, `paper.overlays.${backgroundOverlay}`) || 0)(theme)}`,
-    backgroundBlendMode: 'overlay',
-    backgroundRepeat: 'no-repeat'
-  };
+  const overlay = css.get(theme, `paper.overlays.${backgroundOverlay}`) || 0;
+  return getColorOverlay(theme, 'surface', overlayColor, overlay);
 }
 function getDarkThemeBackgroundOverlay(theme, backgroundOverlay) {
   if (Number(backgroundOverlay) <= 0) {
@@ -693,7 +737,7 @@ const Paper = /*#__PURE__*/react$1.forwardRef(function Paper(props, forwardedRef
       borderStyle: 'solid',
       borderWidth: "0.0625rem",
       borderColor: alpha('on.surface', 0.12)
-    } : {}, getDarkThemeBackgroundOverlay(theme, backgroundOverlay != null ? backgroundOverlay : elevation), __css)
+    } : {}, getBackgroundOverlay(theme, backgroundOverlay != null ? backgroundOverlay : elevation, 'primary'), __css)
   }, otherProps, {
     children: children
   }));
@@ -739,9 +783,8 @@ const AppBar = /*#__PURE__*/react$1.forwardRef(function AppBar(props, forwardedR
       ref: forwardedRef,
       theme: theme,
       variant: "square",
-      backgroundOverlay: variantProp === 'default' ? 4 : 0,
+      backgroundOverlay: elevation === 'elevated' && variantProp === 'default' ? css.get(theme, `appbar.elevations.${elevation}.boxShadow`, 2) : 0,
       color: variantProp === 'default' || variantProp === 'transparent' ? 'on.surface' : `on.${variantProp}`,
-      elevation: elevation === 'elevated' ? css.get(theme, `appbar.elevations.${elevation}.boxShadow`, 4) : 0,
       __css: _extends__default['default']({
         boxSizing: 'border-box',
         display: 'inline-flex',
@@ -823,13 +866,43 @@ const TransparentButton = /*#__PURE__*/_styled__default['default'](BaseButton, p
   '&:disabled': {
     color: alpha('on.surface', 0.38),
     cursor: 'default'
+  },
+  '&:focus-visible': {
+    outline: 'none'
   }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRyYW5zcGFyZW50QnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPaUMiLCJmaWxlIjoiVHJhbnNwYXJlbnRCdXR0b24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgZ2V0IH0gZnJvbSAnQHN0eWxlZC1zeXN0ZW0vY3NzJztcbmltcG9ydCB7IEJhc2VCdXR0b24gfSBmcm9tICcuL0Jhc2VCdXR0b24nO1xuaW1wb3J0IHsgVGhlbWUgfSBmcm9tICcuLi90aGVtZSc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAc3R5bGVkLXN5c3RlbS9jc3MnO1xuaW1wb3J0IHsgYWxwaGEgfSBmcm9tICcuLi9jb2xvcic7XG5cbmV4cG9ydCBjb25zdCBUcmFuc3BhcmVudEJ1dHRvbiA9IHN0eWxlZChCYXNlQnV0dG9uKShcbiAgKHsgdGhlbWUsIGNvbG9yID0gJ3ByaW1hcnknIH0pID0+XG4gICAgY3NzKHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogJ3RyYW5zcGFyZW50JyxcbiAgICAgIGNvbG9yOiBnZXQodGhlbWUsIGBjb2xvcnMuJHtTdHJpbmcoY29sb3IpfWApIHx8IGNvbG9yLFxuICAgICAgJyY6ZGlzYWJsZWQnOiB7XG4gICAgICAgIGNvbG9yOiBhbHBoYSgnb24uc3VyZmFjZScsIDAuMzgpLFxuICAgICAgICBjdXJzb3I6ICdkZWZhdWx0JyxcbiAgICAgIH0sXG4gICAgfSlcbik7XG5cbmV4cG9ydCBmdW5jdGlvbiBnZXRSaXBwbGVQcm9wZXJ0aWVzKHRoZW1lOiBUaGVtZSkge1xuICByZXR1cm4ge1xuICAgIGhvdmVyT3BhY2l0eTogZ2V0KHRoZW1lLCBgYnV0dG9ucy5vdmVybGF5cy50cmFuc3BhcmVudC5ob3Zlci5vcGFjaXR5YCksXG4gICAgZm9jdXNPcGFjaXR5OiBnZXQodGhlbWUsIGBidXR0b25zLm92ZXJsYXlzLnRyYW5zcGFyZW50LmZvY3VzLm9wYWNpdHlgKSxcbiAgICBwcmVzc2VkT3BhY2l0eTogZ2V0KHRoZW1lLCBgYnV0dG9ucy5vdmVybGF5cy50cmFuc3BhcmVudC5wcmVzc2VkLm9wYWNpdHlgKSxcbiAgfTtcbn1cbiJdfQ== */");
-function getRippleProperties$2(theme) {
+}), ({
+  theme,
+  color = 'primary',
+  isGroupedButton = false
+}) => isGroupedButton && {
+  '[data-button-group=""] &': {
+    borderColor: css.get(theme, `colors.${String(color)}`) || (typeof color === 'string' ? color : undefined),
+    ':first-of-type': {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0,
+      borderRightStyle: 'solid',
+      borderRightWidth: "0.0625rem"
+    },
+    ':not(:first-of-type):not(:last-of-type)': {
+      borderRadius: 0
+    },
+    ':last-of-type': {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+      borderLeftStyle: 'solid',
+      borderLeftWidth: "0.0625rem"
+    },
+    ':last-of-type:nth-of-type(2)': {
+      borderLeftWidth: 0
+    }
+  }
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRyYW5zcGFyZW50QnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRaUMiLCJmaWxlIjoiVHJhbnNwYXJlbnRCdXR0b24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgZ2V0IH0gZnJvbSAnQHN0eWxlZC1zeXN0ZW0vY3NzJztcbmltcG9ydCB7IEJhc2VCdXR0b24gfSBmcm9tICcuL0Jhc2VCdXR0b24nO1xuaW1wb3J0IHsgVGhlbWUgfSBmcm9tICcuLi90aGVtZSc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAc3R5bGVkLXN5c3RlbS9jc3MnO1xuaW1wb3J0IHsgYWxwaGEgfSBmcm9tICcuLi9jb2xvcic7XG5pbXBvcnQgeyByZW0gfSBmcm9tICdwb2xpc2hlZCc7XG5cbmV4cG9ydCBjb25zdCBUcmFuc3BhcmVudEJ1dHRvbiA9IHN0eWxlZChCYXNlQnV0dG9uKShcbiAgKHsgdGhlbWUsIGNvbG9yID0gJ3ByaW1hcnknIH0pID0+XG4gICAgY3NzKHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogJ3RyYW5zcGFyZW50JyxcbiAgICAgIGNvbG9yOiBnZXQodGhlbWUsIGBjb2xvcnMuJHtTdHJpbmcoY29sb3IpfWApIHx8IGNvbG9yLFxuICAgICAgJyY6ZGlzYWJsZWQnOiB7XG4gICAgICAgIGNvbG9yOiBhbHBoYSgnb24uc3VyZmFjZScsIDAuMzgpLFxuICAgICAgICBjdXJzb3I6ICdkZWZhdWx0JyxcbiAgICAgIH0sXG4gICAgICAnJjpmb2N1cy12aXNpYmxlJzoge1xuICAgICAgICBvdXRsaW5lOiAnbm9uZScsXG4gICAgICB9LFxuICAgIH0pLFxuICAoeyB0aGVtZSwgY29sb3IgPSAncHJpbWFyeScsIGlzR3JvdXBlZEJ1dHRvbiA9IGZhbHNlIH0pID0+XG4gICAgaXNHcm91cGVkQnV0dG9uICYmIHtcbiAgICAgICdbZGF0YS1idXR0b24tZ3JvdXA9XCJcIl0gJic6IHtcbiAgICAgICAgYm9yZGVyQ29sb3I6XG4gICAgICAgICAgZ2V0KHRoZW1lLCBgY29sb3JzLiR7U3RyaW5nKGNvbG9yKX1gKSB8fFxuICAgICAgICAgICh0eXBlb2YgY29sb3IgPT09ICdzdHJpbmcnID8gY29sb3IgOiB1bmRlZmluZWQpLFxuICAgICAgICAnOmZpcnN0LW9mLXR5cGUnOiB7XG4gICAgICAgICAgYm9yZGVyVG9wUmlnaHRSYWRpdXM6IDAsXG4gICAgICAgICAgYm9yZGVyQm90dG9tUmlnaHRSYWRpdXM6IDAsXG4gICAgICAgICAgYm9yZGVyUmlnaHRTdHlsZTogJ3NvbGlkJyxcbiAgICAgICAgICBib3JkZXJSaWdodFdpZHRoOiByZW0oMSksXG4gICAgICAgIH0sXG4gICAgICAgICc6bm90KDpmaXJzdC1vZi10eXBlKTpub3QoOmxhc3Qtb2YtdHlwZSknOiB7XG4gICAgICAgICAgYm9yZGVyUmFkaXVzOiAwLFxuICAgICAgICB9LFxuICAgICAgICAnOmxhc3Qtb2YtdHlwZSc6IHtcbiAgICAgICAgICBib3JkZXJUb3BMZWZ0UmFkaXVzOiAwLFxuICAgICAgICAgIGJvcmRlckJvdHRvbUxlZnRSYWRpdXM6IDAsXG4gICAgICAgICAgYm9yZGVyTGVmdFN0eWxlOiAnc29saWQnLFxuICAgICAgICAgIGJvcmRlckxlZnRXaWR0aDogcmVtKDEpLFxuICAgICAgICB9LFxuICAgICAgICAnOmxhc3Qtb2YtdHlwZTpudGgtb2YtdHlwZSgyKSc6IHtcbiAgICAgICAgICBib3JkZXJMZWZ0V2lkdGg6IDAsXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgIH1cbik7XG5cbmV4cG9ydCBmdW5jdGlvbiBnZXRSaXBwbGVQcm9wZXJ0aWVzKHRoZW1lOiBUaGVtZSkge1xuICByZXR1cm4ge1xuICAgIGhvdmVyT3BhY2l0eTogZ2V0KHRoZW1lLCBgYnV0dG9ucy5vdmVybGF5cy50cmFuc3BhcmVudC5ob3Zlci5vcGFjaXR5YCksXG4gICAgZm9jdXNPcGFjaXR5OiBnZXQodGhlbWUsIGBidXR0b25zLm92ZXJsYXlzLnRyYW5zcGFyZW50LmZvY3VzLm9wYWNpdHlgKSxcbiAgICBwcmVzc2VkT3BhY2l0eTogZ2V0KHRoZW1lLCBgYnV0dG9ucy5vdmVybGF5cy50cmFuc3BhcmVudC5wcmVzc2VkLm9wYWNpdHlgKSxcbiAgICByaXBwbGVFbmFibGVkOiBmYWxzZSxcbiAgfTtcbn1cbiJdfQ== */");
+function getRippleProperties$3(theme) {
   return {
     hoverOpacity: css.get(theme, `buttons.overlays.transparent.hover.opacity`),
     focusOpacity: css.get(theme, `buttons.overlays.transparent.focus.opacity`),
-    pressedOpacity: css.get(theme, `buttons.overlays.transparent.pressed.opacity`)
+    pressedOpacity: css.get(theme, `buttons.overlays.transparent.pressed.opacity`),
+    rippleEnabled: false
   };
 }
 
@@ -849,20 +922,59 @@ const FilledButton = /*#__PURE__*/_styled__default['default'](BaseButton, proces
     background: `linear-gradient(${css.get(theme, 'colors.surface')}, ${css.get(theme, 'colors.surface')}), ${alpha('on.surface', 0.12)(theme)}`,
     backgroundBlendMode: 'overlay',
     cursor: 'default'
+  },
+  '&:focus-visible': {
+    outlineColor: css.get(theme, `colors.${String(color)}`) || color,
+    outlineWidth: 2,
+    outlineStyle: 'auto',
+    outlineOffset: '2px'
   }
 }), ({
   color = 'primary',
   elevation = 'none',
   theme
-}) => color === 'surface' && _extends__default['default']({}, getDarkThemeBackgroundOverlay(theme, css.get(theme, `buttons.elevations.${elevation}.boxShadow`, 0))), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZpbGxlZEJ1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTzRCIiwiZmlsZSI6IkZpbGxlZEJ1dHRvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyByZWFkYWJsZUNvbG9yIH0gZnJvbSAncG9saXNoZWQnO1xuaW1wb3J0IHsgQmFzZUJ1dHRvbiB9IGZyb20gJy4vQmFzZUJ1dHRvbic7XG5pbXBvcnQgeyBUaGVtZSB9IGZyb20gJy4uL3RoZW1lJztcbmltcG9ydCB7IGFscGhhLCBnZXREYXJrVGhlbWVCYWNrZ3JvdW5kT3ZlcmxheSB9IGZyb20gJy4uL2NvbG9yJztcbmltcG9ydCB7IGdldCwgY3NzIH0gZnJvbSAnQHN0eWxlZC1zeXN0ZW0vY3NzJztcblxuZXhwb3J0IGNvbnN0IEZpbGxlZEJ1dHRvbiA9IHN0eWxlZChCYXNlQnV0dG9uKShcbiAgKHsgY29sb3IgPSAncHJpbWFyeScsIHRoZW1lIH0pID0+XG4gICAgY3NzKHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogZ2V0KHRoZW1lLCBgY29sb3JzLiR7U3RyaW5nKGNvbG9yKX1gKSB8fCBjb2xvcixcbiAgICAgIGNvbG9yOlxuICAgICAgICBnZXQodGhlbWUsIGBjb2xvcnMub24uJHtTdHJpbmcoY29sb3IpfWApIHx8XG4gICAgICAgICh0eXBlb2YgY29sb3IgPT09ICdzdHJpbmcnID8gcmVhZGFibGVDb2xvcihjb2xvcikgOiB1bmRlZmluZWQpLFxuICAgICAgJyY6ZGlzYWJsZWQnOiB7XG4gICAgICAgIGNvbG9yOiBhbHBoYSgnb24uc3VyZmFjZScsIDAuMzgpLFxuICAgICAgICBiYWNrZ3JvdW5kOiBgbGluZWFyLWdyYWRpZW50KCR7Z2V0KHRoZW1lLCAnY29sb3JzLnN1cmZhY2UnKX0sICR7Z2V0KFxuICAgICAgICAgIHRoZW1lLFxuICAgICAgICAgICdjb2xvcnMuc3VyZmFjZSdcbiAgICAgICAgKX0pLCAke2FscGhhKCdvbi5zdXJmYWNlJywgMC4xMikodGhlbWUpfWAsXG4gICAgICAgIGJhY2tncm91bmRCbGVuZE1vZGU6ICdvdmVybGF5JyxcbiAgICAgICAgY3Vyc29yOiAnZGVmYXVsdCcsXG4gICAgICB9LFxuICAgIH0pLFxuICAoeyBjb2xvciA9ICdwcmltYXJ5JywgZWxldmF0aW9uID0gJ25vbmUnLCB0aGVtZSB9KSA9PlxuICAgIGNvbG9yID09PSAnc3VyZmFjZScgJiYge1xuICAgICAgLi4uZ2V0RGFya1RoZW1lQmFja2dyb3VuZE92ZXJsYXkoXG4gICAgICAgIHRoZW1lLFxuICAgICAgICBnZXQodGhlbWUsIGBidXR0b25zLmVsZXZhdGlvbnMuJHtlbGV2YXRpb259LmJveFNoYWRvd2AsIDApXG4gICAgICApLFxuICAgIH1cbik7XG5cbmV4cG9ydCBmdW5jdGlvbiBnZXRSaXBwbGVQcm9wZXJ0aWVzKHRoZW1lOiBUaGVtZSkge1xuICByZXR1cm4ge1xuICAgIGhvdmVyT3BhY2l0eTogZ2V0KHRoZW1lLCBgYnV0dG9ucy5vdmVybGF5cy5maWxsZWQuaG92ZXIub3BhY2l0eWApLFxuICAgIGZvY3VzT3BhY2l0eTogZ2V0KHRoZW1lLCBgYnV0dG9ucy5vdmVybGF5cy5maWxsZWQuZm9jdXMub3BhY2l0eWApLFxuICAgIHByZXNzZWRPcGFjaXR5OiBnZXQodGhlbWUsIGBidXR0b25zLm92ZXJsYXlzLmZpbGxlZC5wcmVzc2VkLm9wYWNpdHlgKSxcbiAgfTtcbn1cbiJdfQ== */");
-function getRippleProperties$1(theme) {
+}) => color === 'surface' && _extends__default['default']({}, getBackgroundOverlay(theme, css.get(theme, `buttons.elevations.${elevation}.boxShadow`, 0), 'primary')), ({
+  color = 'primary',
+  theme,
+  isGroupedButton = false
+}) => isGroupedButton && {
+  '[data-button-group=""] &': {
+    borderColor: css.get(theme, `colors.on.${String(color)}`) || (typeof color === 'string' ? polished.readableColor(color) : undefined),
+    ':first-of-type': {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0,
+      borderRightStyle: 'solid',
+      borderRightWidth: "0.0625rem"
+    },
+    ':not(:first-of-type):not(:last-of-type)': {
+      borderRadius: 0
+    },
+    ':last-of-type': {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+      borderLeftStyle: 'solid',
+      borderLeftWidth: "0.0625rem"
+    },
+    ':last-of-type:nth-of-type(2)': {
+      borderLeftWidth: 0
+    }
+  }
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZpbGxlZEJ1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTzRCIiwiZmlsZSI6IkZpbGxlZEJ1dHRvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyByZWFkYWJsZUNvbG9yLCByZW0gfSBmcm9tICdwb2xpc2hlZCc7XG5pbXBvcnQgeyBCYXNlQnV0dG9uIH0gZnJvbSAnLi9CYXNlQnV0dG9uJztcbmltcG9ydCB7IFRoZW1lIH0gZnJvbSAnLi4vdGhlbWUnO1xuaW1wb3J0IHsgYWxwaGEsIGdldEJhY2tncm91bmRPdmVybGF5IH0gZnJvbSAnLi4vY29sb3InO1xuaW1wb3J0IHsgZ2V0LCBjc3MgfSBmcm9tICdAc3R5bGVkLXN5c3RlbS9jc3MnO1xuXG5leHBvcnQgY29uc3QgRmlsbGVkQnV0dG9uID0gc3R5bGVkKEJhc2VCdXR0b24pKFxuICAoeyBjb2xvciA9ICdwcmltYXJ5JywgdGhlbWUgfSkgPT5cbiAgICBjc3Moe1xuICAgICAgYmFja2dyb3VuZENvbG9yOiBnZXQodGhlbWUsIGBjb2xvcnMuJHtTdHJpbmcoY29sb3IpfWApIHx8IGNvbG9yLFxuICAgICAgY29sb3I6XG4gICAgICAgIGdldCh0aGVtZSwgYGNvbG9ycy5vbi4ke1N0cmluZyhjb2xvcil9YCkgfHxcbiAgICAgICAgKHR5cGVvZiBjb2xvciA9PT0gJ3N0cmluZycgPyByZWFkYWJsZUNvbG9yKGNvbG9yKSA6IHVuZGVmaW5lZCksXG4gICAgICAnJjpkaXNhYmxlZCc6IHtcbiAgICAgICAgY29sb3I6IGFscGhhKCdvbi5zdXJmYWNlJywgMC4zOCksXG4gICAgICAgIGJhY2tncm91bmQ6IGBsaW5lYXItZ3JhZGllbnQoJHtnZXQodGhlbWUsICdjb2xvcnMuc3VyZmFjZScpfSwgJHtnZXQoXG4gICAgICAgICAgdGhlbWUsXG4gICAgICAgICAgJ2NvbG9ycy5zdXJmYWNlJ1xuICAgICAgICApfSksICR7YWxwaGEoJ29uLnN1cmZhY2UnLCAwLjEyKSh0aGVtZSl9YCxcbiAgICAgICAgYmFja2dyb3VuZEJsZW5kTW9kZTogJ292ZXJsYXknLFxuICAgICAgICBjdXJzb3I6ICdkZWZhdWx0JyxcbiAgICAgIH0sXG4gICAgICAnJjpmb2N1cy12aXNpYmxlJzoge1xuICAgICAgICBvdXRsaW5lQ29sb3I6IGdldCh0aGVtZSwgYGNvbG9ycy4ke1N0cmluZyhjb2xvcil9YCkgfHwgY29sb3IsXG4gICAgICAgIG91dGxpbmVXaWR0aDogMixcbiAgICAgICAgb3V0bGluZVN0eWxlOiAnYXV0bycsXG4gICAgICAgIG91dGxpbmVPZmZzZXQ6ICcycHgnLFxuICAgICAgfSxcbiAgICB9KSxcbiAgKHsgY29sb3IgPSAncHJpbWFyeScsIGVsZXZhdGlvbiA9ICdub25lJywgdGhlbWUgfSkgPT5cbiAgICBjb2xvciA9PT0gJ3N1cmZhY2UnICYmIHtcbiAgICAgIC4uLmdldEJhY2tncm91bmRPdmVybGF5KFxuICAgICAgICB0aGVtZSxcbiAgICAgICAgZ2V0KHRoZW1lLCBgYnV0dG9ucy5lbGV2YXRpb25zLiR7ZWxldmF0aW9ufS5ib3hTaGFkb3dgLCAwKSxcbiAgICAgICAgJ3ByaW1hcnknXG4gICAgICApLFxuICAgIH0sXG4gICh7IGNvbG9yID0gJ3ByaW1hcnknLCB0aGVtZSwgaXNHcm91cGVkQnV0dG9uID0gZmFsc2UgfSkgPT5cbiAgICBpc0dyb3VwZWRCdXR0b24gJiYge1xuICAgICAgJ1tkYXRhLWJ1dHRvbi1ncm91cD1cIlwiXSAmJzoge1xuICAgICAgICBib3JkZXJDb2xvcjpcbiAgICAgICAgICBnZXQodGhlbWUsIGBjb2xvcnMub24uJHtTdHJpbmcoY29sb3IpfWApIHx8XG4gICAgICAgICAgKHR5cGVvZiBjb2xvciA9PT0gJ3N0cmluZycgPyByZWFkYWJsZUNvbG9yKGNvbG9yKSA6IHVuZGVmaW5lZCksXG4gICAgICAgICc6Zmlyc3Qtb2YtdHlwZSc6IHtcbiAgICAgICAgICBib3JkZXJUb3BSaWdodFJhZGl1czogMCxcbiAgICAgICAgICBib3JkZXJCb3R0b21SaWdodFJhZGl1czogMCxcbiAgICAgICAgICBib3JkZXJSaWdodFN0eWxlOiAnc29saWQnLFxuICAgICAgICAgIGJvcmRlclJpZ2h0V2lkdGg6IHJlbSgxKSxcbiAgICAgICAgfSxcbiAgICAgICAgJzpub3QoOmZpcnN0LW9mLXR5cGUpOm5vdCg6bGFzdC1vZi10eXBlKSc6IHtcbiAgICAgICAgICBib3JkZXJSYWRpdXM6IDAsXG4gICAgICAgIH0sXG4gICAgICAgICc6bGFzdC1vZi10eXBlJzoge1xuICAgICAgICAgIGJvcmRlclRvcExlZnRSYWRpdXM6IDAsXG4gICAgICAgICAgYm9yZGVyQm90dG9tTGVmdFJhZGl1czogMCxcbiAgICAgICAgICBib3JkZXJMZWZ0U3R5bGU6ICdzb2xpZCcsXG4gICAgICAgICAgYm9yZGVyTGVmdFdpZHRoOiByZW0oMSksXG4gICAgICAgIH0sXG4gICAgICAgICc6bGFzdC1vZi10eXBlOm50aC1vZi10eXBlKDIpJzoge1xuICAgICAgICAgIGJvcmRlckxlZnRXaWR0aDogMCxcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgfVxuKTtcblxuZXhwb3J0IGZ1bmN0aW9uIGdldFJpcHBsZVByb3BlcnRpZXModGhlbWU6IFRoZW1lKSB7XG4gIHJldHVybiB7XG4gICAgaG92ZXJPcGFjaXR5OiBnZXQodGhlbWUsIGBidXR0b25zLm92ZXJsYXlzLmZpbGxlZC5ob3Zlci5vcGFjaXR5YCksXG4gICAgZm9jdXNPcGFjaXR5OiBnZXQodGhlbWUsIGBidXR0b25zLm92ZXJsYXlzLmZpbGxlZC5mb2N1cy5vcGFjaXR5YCksXG4gICAgcHJlc3NlZE9wYWNpdHk6IGdldCh0aGVtZSwgYGJ1dHRvbnMub3ZlcmxheXMuZmlsbGVkLnByZXNzZWQub3BhY2l0eWApLFxuICAgIHJpcHBsZUVuYWJsZWQ6IGZhbHNlLFxuICB9O1xufVxuIl19 */");
+function getRippleProperties$2(theme) {
   return {
     hoverOpacity: css.get(theme, `buttons.overlays.filled.hover.opacity`),
     focusOpacity: css.get(theme, `buttons.overlays.filled.focus.opacity`),
-    pressedOpacity: css.get(theme, `buttons.overlays.filled.pressed.opacity`)
+    pressedOpacity: css.get(theme, `buttons.overlays.filled.pressed.opacity`),
+    rippleEnabled: false
   };
 }
 
+function getRippleProperties$1(theme) {
+  return _extends__default['default']({}, getRippleProperties$2(theme), {
+    rippleEnabled: true
+  });
+}
+
 const OutlinedButton = /*#__PURE__*/_styled__default['default'](TransparentButton, process.env.NODE_ENV === "production" ? {
   target: "eo0fwlz0"
 } : {
@@ -871,17 +983,48 @@ const OutlinedButton = /*#__PURE__*/_styled__default['default'](TransparentButto
 })(css.css({
   borderStyle: 'solid',
   borderWidth: "0.0625rem",
-  borderColor: alpha('on.surface', 0.12),
+  borderColor: 'outline',
+  boxShadow: 0,
+  '&:focus,:&active,:&hover': {
+    boxShadow: 0
+  },
+  '&:focus-visible,&:active': {
+    borderColor: 'currentColor'
+  },
   '&:disabled': {
     color: alpha('on.surface', 0.38),
     borderColor: alpha('on.surface', 0.12),
     cursor: 'default'
   }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk91dGxpbmVkQnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNOEIiLCJmaWxlIjoiT3V0bGluZWRCdXR0b24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgVHJhbnNwYXJlbnRCdXR0b24gfSBmcm9tICcuL1RyYW5zcGFyZW50QnV0dG9uJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BzdHlsZWQtc3lzdGVtL2Nzcyc7XG5pbXBvcnQgeyBhbHBoYSB9IGZyb20gJy4uL2NvbG9yJztcbmltcG9ydCB7IHJlbSB9IGZyb20gJ3BvbGlzaGVkJztcblxuZXhwb3J0IGNvbnN0IE91dGxpbmVkQnV0dG9uID0gc3R5bGVkKFRyYW5zcGFyZW50QnV0dG9uKShcbiAgY3NzKHtcbiAgICBib3JkZXJTdHlsZTogJ3NvbGlkJyxcbiAgICBib3JkZXJXaWR0aDogcmVtKDEpLFxuICAgIGJvcmRlckNvbG9yOiBhbHBoYSgnb24uc3VyZmFjZScsIDAuMTIpLFxuICAgICcmOmRpc2FibGVkJzoge1xuICAgICAgY29sb3I6IGFscGhhKCdvbi5zdXJmYWNlJywgMC4zOCksXG4gICAgICBib3JkZXJDb2xvcjogYWxwaGEoJ29uLnN1cmZhY2UnLCAwLjEyKSxcbiAgICAgIGN1cnNvcjogJ2RlZmF1bHQnLFxuICAgIH0sXG4gIH0pXG4pO1xuIl19 */");
+}), ({
+  isGroupedButton = false
+}) => isGroupedButton && {
+  '[data-button-group=""] &': {
+    ':first-of-type': {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0
+    },
+    ':not(:first-of-type):not(:last-of-type)': {
+      borderRadius: 0,
+      borderRightWidth: 0,
+      borderLeftWidth: 0
+    },
+    ':last-of-type': {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+      borderLeftStyle: 'solid',
+      borderLeftWidth: "0.0625rem"
+    },
+    ':last-of-type:nth-of-type(2)': {
+      borderLeftWidth: 0
+    }
+  }
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk91dGxpbmVkQnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNOEIiLCJmaWxlIjoiT3V0bGluZWRCdXR0b24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgVHJhbnNwYXJlbnRCdXR0b24gfSBmcm9tICcuL1RyYW5zcGFyZW50QnV0dG9uJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BzdHlsZWQtc3lzdGVtL2Nzcyc7XG5pbXBvcnQgeyBhbHBoYSB9IGZyb20gJy4uL2NvbG9yJztcbmltcG9ydCB7IHJlbSB9IGZyb20gJ3BvbGlzaGVkJztcblxuZXhwb3J0IGNvbnN0IE91dGxpbmVkQnV0dG9uID0gc3R5bGVkKFRyYW5zcGFyZW50QnV0dG9uKShcbiAgY3NzKHtcbiAgICBib3JkZXJTdHlsZTogJ3NvbGlkJyxcbiAgICBib3JkZXJXaWR0aDogcmVtKDEpLFxuICAgIGJvcmRlckNvbG9yOiAnb3V0bGluZScsXG4gICAgYm94U2hhZG93OiAwLFxuICAgICcmOmZvY3VzLDomYWN0aXZlLDomaG92ZXInOiB7IGJveFNoYWRvdzogMCB9LFxuICAgICcmOmZvY3VzLXZpc2libGUsJjphY3RpdmUnOiB7XG4gICAgICBib3JkZXJDb2xvcjogJ2N1cnJlbnRDb2xvcicsXG4gICAgfSxcbiAgICAnJjpkaXNhYmxlZCc6IHtcbiAgICAgIGNvbG9yOiBhbHBoYSgnb24uc3VyZmFjZScsIDAuMzgpLFxuICAgICAgYm9yZGVyQ29sb3I6IGFscGhhKCdvbi5zdXJmYWNlJywgMC4xMiksXG4gICAgICBjdXJzb3I6ICdkZWZhdWx0JyxcbiAgICB9LFxuICB9KSxcbiAgKHsgaXNHcm91cGVkQnV0dG9uID0gZmFsc2UgfSkgPT5cbiAgICBpc0dyb3VwZWRCdXR0b24gJiYge1xuICAgICAgJ1tkYXRhLWJ1dHRvbi1ncm91cD1cIlwiXSAmJzoge1xuICAgICAgICAnOmZpcnN0LW9mLXR5cGUnOiB7XG4gICAgICAgICAgYm9yZGVyVG9wUmlnaHRSYWRpdXM6IDAsXG4gICAgICAgICAgYm9yZGVyQm90dG9tUmlnaHRSYWRpdXM6IDAsXG4gICAgICAgIH0sXG4gICAgICAgICc6bm90KDpmaXJzdC1vZi10eXBlKTpub3QoOmxhc3Qtb2YtdHlwZSknOiB7XG4gICAgICAgICAgYm9yZGVyUmFkaXVzOiAwLFxuICAgICAgICAgIGJvcmRlclJpZ2h0V2lkdGg6IDAsXG4gICAgICAgICAgYm9yZGVyTGVmdFdpZHRoOiAwLFxuICAgICAgICB9LFxuICAgICAgICAnOmxhc3Qtb2YtdHlwZSc6IHtcbiAgICAgICAgICBib3JkZXJUb3BMZWZ0UmFkaXVzOiAwLFxuICAgICAgICAgIGJvcmRlckJvdHRvbUxlZnRSYWRpdXM6IDAsXG4gICAgICAgICAgYm9yZGVyTGVmdFN0eWxlOiAnc29saWQnLFxuICAgICAgICAgIGJvcmRlckxlZnRXaWR0aDogcmVtKDEpLFxuICAgICAgICB9LFxuICAgICAgICAnOmxhc3Qtb2YtdHlwZTpudGgtb2YtdHlwZSgyKSc6IHtcbiAgICAgICAgICBib3JkZXJMZWZ0V2lkdGg6IDAsXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgIH1cbik7XG4iXX0= */");
 
 function getRippleProperties(theme) {
-  return _extends__default['default']({}, getRippleProperties$1(theme), {
-    center: true
+  return _extends__default['default']({}, getRippleProperties$2(theme), {
+    center: true,
+    rippleEnabled: true
   });
 }
 
@@ -907,7 +1050,7 @@ const rippleStyle = ({
   backgroundColor: `var(${RIPPLE_BACKGROUND_COLOR})`,
   transformOrigin: 'center center',
   opacity: 0,
-  borderRadius: '50%',
+  borderRadius: '999999px',
   animation,
   willChange: 'opacity,transform'
 });
@@ -916,7 +1059,7 @@ const Ripple = _styled__default['default']("div", process.env.NODE_ENV === "prod
 } : {
   target: "ebk8cct0",
   label: "Ripple"
-})(rippleStyle, "pointer-events:none;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlJpcHBsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkJzQiIsImZpbGUiOiJSaXBwbGUudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgQ1NTT2JqZWN0IH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHtcbiAgUklQUExFX0JBQ0tHUk9VTkRfQ09MT1IsXG4gIFJJUFBMRV9TSVpFLFxuICBSSVBQTEVfUE9TSVRJT04sXG59IGZyb20gJy4vY29uc3RhbnRzJztcblxuZXhwb3J0IGNvbnN0IHJpcHBsZVN0eWxlID0gKHtcbiAgYW5pbWF0aW9uLFxufToge1xuICBhbmltYXRpb24/OiBzdHJpbmc7XG59KTogQ1NTT2JqZWN0ID0+ICh7XG4gIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICBib3hTaXppbmc6ICdjb250ZW50LWJveCcsXG4gIGRpc3BsYXk6ICdibG9jaycsXG4gIGNvbnRlbnQ6ICdcIlwiJyxcbiAgd2lkdGg6IGB2YXIoJHtSSVBQTEVfU0laRX0pYCxcbiAgaGVpZ2h0OiBgdmFyKCR7UklQUExFX1NJWkV9KWAsXG4gIHRvcDogYHZhcigke1JJUFBMRV9QT1NJVElPTn0pYCxcbiAgbGVmdDogYHZhcigke1JJUFBMRV9QT1NJVElPTn0pYCxcbiAgYmFja2dyb3VuZENvbG9yOiBgdmFyKCR7UklQUExFX0JBQ0tHUk9VTkRfQ09MT1J9KWAsXG4gIHRyYW5zZm9ybU9yaWdpbjogJ2NlbnRlciBjZW50ZXInLFxuICBvcGFjaXR5OiAwLFxuICBib3JkZXJSYWRpdXM6ICc1MCUnLFxuICBhbmltYXRpb24sXG4gIHdpbGxDaGFuZ2U6ICdvcGFjaXR5LHRyYW5zZm9ybScsXG59KTtcblxuZXhwb3J0IGNvbnN0IFJpcHBsZSA9IHN0eWxlZC5kaXY8eyBhbmltYXRpb24/OiBzdHJpbmcgfT4ocmlwcGxlU3R5bGUsIHtcbiAgcG9pbnRlckV2ZW50czogJ25vbmUnLFxufSk7XG4iXX0= */"));
+})(rippleStyle, "pointer-events:none;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlJpcHBsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkJzQiIsImZpbGUiOiJSaXBwbGUudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgQ1NTT2JqZWN0IH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHtcbiAgUklQUExFX0JBQ0tHUk9VTkRfQ09MT1IsXG4gIFJJUFBMRV9TSVpFLFxuICBSSVBQTEVfUE9TSVRJT04sXG59IGZyb20gJy4vY29uc3RhbnRzJztcblxuZXhwb3J0IGNvbnN0IHJpcHBsZVN0eWxlID0gKHtcbiAgYW5pbWF0aW9uLFxufToge1xuICBhbmltYXRpb24/OiBzdHJpbmc7XG59KTogQ1NTT2JqZWN0ID0+ICh7XG4gIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICBib3hTaXppbmc6ICdjb250ZW50LWJveCcsXG4gIGRpc3BsYXk6ICdibG9jaycsXG4gIGNvbnRlbnQ6ICdcIlwiJyxcbiAgd2lkdGg6IGB2YXIoJHtSSVBQTEVfU0laRX0pYCxcbiAgaGVpZ2h0OiBgdmFyKCR7UklQUExFX1NJWkV9KWAsXG4gIHRvcDogYHZhcigke1JJUFBMRV9QT1NJVElPTn0pYCxcbiAgbGVmdDogYHZhcigke1JJUFBMRV9QT1NJVElPTn0pYCxcbiAgYmFja2dyb3VuZENvbG9yOiBgdmFyKCR7UklQUExFX0JBQ0tHUk9VTkRfQ09MT1J9KWAsXG4gIHRyYW5zZm9ybU9yaWdpbjogJ2NlbnRlciBjZW50ZXInLFxuICBvcGFjaXR5OiAwLFxuICBib3JkZXJSYWRpdXM6ICc5OTk5OTlweCcsXG4gIGFuaW1hdGlvbixcbiAgd2lsbENoYW5nZTogJ29wYWNpdHksdHJhbnNmb3JtJyxcbn0pO1xuXG5leHBvcnQgY29uc3QgUmlwcGxlID0gc3R5bGVkLmRpdjx7IGFuaW1hdGlvbj86IHN0cmluZyB9PihyaXBwbGVTdHlsZSwge1xuICBwb2ludGVyRXZlbnRzOiAnbm9uZScsXG59KTtcbiJdfQ== */"));
 
 const radiusIn = react.keyframes({
   from: {
@@ -1168,9 +1311,10 @@ function useRippleSurface(opts) {
     onKeyDown,
     onPointerDown,
     style = {},
-    disabled
+    disabled,
+    rippleEnabled = true
   } = opts,
-        rippleProps = _objectWithoutPropertiesLoose__default['default'](opts, ["onKeyDown", "onPointerDown", "style", "disabled"]);
+        rippleProps = _objectWithoutPropertiesLoose__default['default'](opts, ["onKeyDown", "onPointerDown", "style", "disabled", "rippleEnabled"]);
 
   const theme = useTheme();
   rippleColor = css.get(theme, `colors.${rippleColor}`) || rippleColor;
@@ -1191,7 +1335,8 @@ function useRippleSurface(opts) {
     backgroundColor: rippleColor,
     disabled
   }, rippleProps));
-  const css$1 = {
+
+  const css$1 = _extends__default['default']({
     overflow: 'hidden',
     position: 'relative',
     cursor: 'pointer',
@@ -1216,20 +1361,40 @@ function useRippleSurface(opts) {
     '&:hover::before': {
       opacity: hoverOpacity
     },
-    '&:focus::before': {
+    '&:focus-visible::before': {
       opacity: focusOpacity
+    }
+  }, !rippleEnabled && {
+    '&:active::before': {
+      opacity: pressedOpacity
+    }
+  }, {
+    '&[aria-pressed="true"]::before': {
+      opacity: baseOpacity + pressedOpacity
+    },
+    '&[aria-pressed="true"]:hover::before': {
+      opacity: pressedOpacity + hoverOpacity
     },
-    ['&: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']: {
+    '&[aria-pressed="true"]:focus-visible::before': {
+      opacity: pressedOpacity + focusOpacity
+    }
+  }, !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'
-    },
-    // ripple
+    }
+  }, rippleEnabled && {
     '&::after': _extends__default['default']({}, rippleStyle({
       animation
     }))
-  };
+  });
+
   return {
     style: _extends__default['default']({}, animationStyle, style),
     onKeyDown: core.wrapEvent(onKeyDown, handleKeyDown),
@@ -1245,7 +1410,7 @@ const RippleBox = /*#__PURE__*/react$1.forwardRef(function RippleBox(props, forw
     // 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", "style"]);
+        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "__css", "onKeyDown", "onPointerDown", "baseOpacity", "hoverOpacity", "focusOpacity", "pressedOpacity", "rippleColor", "center", "disabled", "rippleEnabled", "style"]);
 
   const _useRippleSurface = useRippleSurface(props),
         {
@@ -1261,33 +1426,50 @@ const RippleBox = /*#__PURE__*/react$1.forwardRef(function RippleBox(props, forw
   }, otherProps, rippleProps));
 });
 
+const ButtonGroupContext = /*#__PURE__*/react$1.createContext(null);
+ButtonGroupContext.displayName = 'ButtonGroupContext';
+const useButtonGroupContext = () => react$1.useContext(ButtonGroupContext);
+
 const componentMapping = {
   text: TransparentButton,
   outlined: OutlinedButton,
   filled: FilledButton,
   fab: FilledButton,
-  'fab-extended': FilledButton,
   'fab-mini': FilledButton,
+  'fab-large': FilledButton,
+  'fab-extended': FilledButton,
   icon: TransparentButton
 };
 const rippleMapping = {
-  text: getRippleProperties$2,
-  outlined: getRippleProperties$2,
-  filled: getRippleProperties$1,
+  text: getRippleProperties$3,
+  outlined: getRippleProperties$3,
+  filled: getRippleProperties$2,
   fab: getRippleProperties$1,
-  'fab-extended': getRippleProperties$1,
   'fab-mini': getRippleProperties$1,
+  'fab-large': getRippleProperties$1,
+  'fab-extended': getRippleProperties$2,
   icon: getRippleProperties
 };
+
+function getFallbackElevation(variant = 'text') {
+  if (variant === 'text' || variant === 'outlined' || variant === 'icon') {
+    return 'none';
+  }
+
+  return 'default';
+}
+
 const Button = /*#__PURE__*/react$1.forwardRef(function Button(props, forwardedRef) {
+  const buttonGroup = useButtonGroupContext();
+
   const {
     children,
-    variant = 'text',
+    variant = (buttonGroup == null ? void 0 : buttonGroup.variant) || 'text',
     onPointerDown: onPointerDownProp,
     onKeyDown: onKeyDownProp,
     color = 'primary',
     disabled = false,
-    elevation = 'none',
+    elevation = getFallbackElevation(props.variant),
     style: styleProp
   } = props,
         otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["children", "variant", "onPointerDown", "onKeyDown", "color", "disabled", "elevation", "style"]);
@@ -1309,12 +1491,36 @@ const Button = /*#__PURE__*/react$1.forwardRef(function Button(props, forwardedR
     disabled: disabled,
     "aria-disabled": disabled ? 'true' : undefined,
     color: color,
-    elevation: elevation
+    elevation: elevation,
+    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"]);
+
+  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']({
+      ref: forwardedRef,
+      role: "group",
+      "data-button-group": "",
+      "data-button-group-direction": direction
+    }, otherProps))
+  });
+});
+
 const AppBarButton = /*#__PURE__*/react$1.forwardRef(function AppBarButton(props, forwardedRef) {
   const {
     variant = 'icon'
@@ -1385,7 +1591,7 @@ const Alert = /*#__PURE__*/react$1.forwardRef(function Alert(props, forwardedRef
     __css: _extends__default['default']({
       p: 3,
       bg: alpha(color, 0.1),
-      borderRadius: "0.25rem",
+      borderRadius: 'extra-small',
       borderColor: alpha(color, 0.2),
       borderStyle: 'solid',
       borderWidth: "0.0625rem"
@@ -1767,7 +1973,7 @@ const BottomSheetSurface = /*#__PURE__*/react$1.forwardRef(function BottomSheetS
     ref: forwardedRef,
     as: Paper,
     theme: theme,
-    elevation: 24,
+    elevation: 5,
     __css: _extends__default['default']({
       position: 'absolute',
       bg: 'surface',
@@ -1821,6 +2027,12 @@ const BottomSheet = /*#__PURE__*/react$1.forwardRef(function BottomSheet(props,
   });
 });
 
+const PADDING_LEFT_WITH_ICON = 14;
+const PADDING_LEFT_WITHOUT_ICON = 16;
+const ICON_WIDTH = 24;
+const PADDING_RIGHT_WITH_ICON = 12;
+const PADDING_RIGHT_WITHOUT_ICON = 16;
+
 const Input = /*#__PURE__*/react$1.forwardRef(function Input(props, forwardedRef) {
   const {
     __css,
@@ -1840,7 +2052,6 @@ const Input = /*#__PURE__*/react$1.forwardRef(function Input(props, forwardedRef
   }, otherProps, {
     __css: _extends__default['default']({
       WebkitTapHighlightColor: 'transparent',
-      boxSizing: 'border-box',
       appearance: 'none',
       outline: 'none',
       width: '100%',
@@ -1854,9 +2065,17 @@ const Input = /*#__PURE__*/react$1.forwardRef(function Input(props, forwardedRef
       color: alpha('on.surface', 0.87),
       letterSpacing: "0.03125rem",
       textAlign: 'left',
+      display: 'flex',
+      alignItems: 'center'
+    }, !multiline && {
+      lineHeight: 1,
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis'
+    }, {
       '::placeholder': {
         opacity: 0,
-        color: alpha('on.surface', 0.54),
+        color: variant === 'filled' ? alpha('on.surface-variant', 0.87) : alpha('on.surface-variant', 0.6),
         transition: `opacity .18s cubic-bezier(.4,0,.2,1)`
       },
       ':disabled::placeholder': {
@@ -1868,7 +2087,7 @@ const Input = /*#__PURE__*/react$1.forwardRef(function Input(props, forwardedRef
       ':disabled': {
         cursor: 'default'
       },
-      'select&,button&': {
+      'select&,[role="button"]&': {
         cursor: 'pointer'
       },
       'select&': {
@@ -1877,18 +2096,18 @@ const Input = /*#__PURE__*/react$1.forwardRef(function Input(props, forwardedRef
           color: 'on.surface'
         }
       },
-      paddingLeft: leadingIcon ? polished.rem(18 + 30) : "1rem",
-      paddingRight: trailingIcon ? polished.rem(18 + 30) : "1rem"
+      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: hasLabel ? "0.75rem" : "0.75rem",
-      paddingBottom: hasLabel ? "0.875rem" : "0.75rem"
+      paddingTop: "1rem",
+      paddingBottom: "1rem"
     }, variant === 'filled' && {
-      paddingTop: hasLabel ? "1.25rem" : "0.75rem",
-      paddingBottom: hasLabel ? "0.375rem" : "0.75rem"
+      paddingTop: hasLabel ? "1.5rem" : "1rem",
+      paddingBottom: hasLabel ? "0.5rem" : "1rem"
     }, multiline && {
       resize: 'vertical',
       paddingTop: 0,
-      marginTop: variant === 'outlined' || !hasLabel ? "0.75rem" : "1.25rem"
+      marginTop: variant === 'outlined' || !hasLabel ? "1.125rem" : "1.625rem"
     }, __css)
   }));
 });
@@ -1909,10 +2128,9 @@ const FloatingLabel = /*#__PURE__*/react$1.forwardRef(function FloatingLabel(pro
     style = {},
     translateX: translateXProp,
     translateY: translateYProp,
-    top = 0,
     children
   } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["offsetX", "scale", "height", "active", "transitionTime", "style", "translateX", "translateY", "top", "children"]);
+        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["offsetX", "scale", "height", "active", "transitionTime", "style", "translateX", "translateY", "children"]);
 
   const ctx = useNotchedOutlineContext();
   const notchStart = ctx ? ctx.notchStart : 0;
@@ -1929,7 +2147,6 @@ const FloatingLabel = /*#__PURE__*/react$1.forwardRef(function FloatingLabel(pro
       fontWeight: 'regular',
       display: 'inline-flex',
       alignItems: 'center',
-      top: polished.rem(top),
       left: polished.rem(offsetX),
       height: typeof height === 'number' ? polished.rem(height) : height,
       transformOrigin: 'left center',
@@ -2017,7 +2234,7 @@ const Overlay = props => {
       right: 0,
       backgroundColor: 'on.surface',
       pointerEvents: 'none',
-      opacity: 0.04,
+      opacity: 0,
       [makeSelector$1('hover:not([disabled]):not(:focus)')]: !forceActive && {
         opacity: css.get(theme, `buttons.overlays.filled.hover.opacity`)
       },
@@ -2065,7 +2282,8 @@ const FilledContainer = /*#__PURE__*/react$1.forwardRef(function FilledContainer
   } = props,
         otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["label", "labelIsFloating", "inputId", "hasFocus", "color", "children", "error", "disabled", "forceActive", "leadingIcon"]);
 
-  const labelHeight = 18;
+  const finalLabelHeight = 16;
+  const labelHeight = finalLabelHeight / 0.75;
   const inputHeight = 56;
   const color = error ? 'error' : colorProp;
   const active = hasFocus || forceActive;
@@ -2075,25 +2293,30 @@ const FilledContainer = /*#__PURE__*/react$1.forwardRef(function FilledContainer
     active: active || error,
     __css: _extends__default['default']({
       position: 'relative',
+      lineHeight: 0,
       width: '100%',
-      backgroundColor: 'surface',
+      backgroundColor: 'surface-variant',
       overflow: 'hidden',
       boxSizing: 'border-box',
       borderTopRightRadius: "0.25rem",
       borderTopLeftRadius: "0.25rem",
-      color: alpha('on.surface', 0.54)
+      color: alpha('on.surface-variant', 0.87)
     }, disabled && {
-      color: alpha('on.surface', 0.38)
+      backgroundColor: alpha('on.surface-variant', 0.08),
+      color: alpha('on.surface-variant', 0.38)
     }, active && {
-      color: alpha('primary', 0.87)
+      color: 'primary'
     })
   }, otherProps, {
     children: [label && /*#__PURE__*/jsxRuntime.jsx(FloatingLabel, {
-      height: labelHeight,
-      top: (inputHeight - labelHeight) * 0.5,
-      offsetX: leadingIcon ? 48 : 16,
+      height: inputHeight,
+      offsetX: leadingIcon ? PADDING_LEFT_WITH_ICON + ICON_WIDTH + PADDING_LEFT_WITHOUT_ICON : PADDING_LEFT_WITHOUT_ICON,
       translateX: 0,
-      translateY: -labelHeight * 0.75,
+      translateY: // To debug, delete these lines one by one to see it doing its work
+      -(inputHeight * 0.5) + // Put it at the top, crossing middle label
+      labelHeight * 0.75 * 0.5 + // Put it at position 0
+      8 // Add a 8px padding to the top
+      ,
       active: labelIsFloating,
       htmlFor: inputId,
       color: active || error ? color : undefined,
@@ -2109,7 +2332,7 @@ const FilledContainer = /*#__PURE__*/react$1.forwardRef(function FilledContainer
 
 const NOTCH_PADDING = 4;
 
-const makeSelector = state => `input:${state} ~ & [data-notch-outline-item],` + `select:${state} ~ & [data-notch-outline-item],` + `button:${state} ~ & [data-notch-outline-item],` + `textarea:${state} ~ & [data-notch-outline-item]`;
+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'],
@@ -2156,17 +2379,17 @@ const InnerContainer = /*#__PURE__*/_styled__default['default']('div', process.e
   }
 
   const inactiveStyle = _extends__default['default']({
-    color: alpha('on.surface', 0.6),
-    borderColor: alpha('on.surface', 0.38)
+    color: 'on.surface-variant',
+    borderColor: 'outline'
   }, borderStyling(borderRadius, borderWidth));
 
   const hoverStyle = {
-    borderColor: alpha('on.surface', 0.87),
-    color: alpha('on.surface', 0.6)
+    borderColor: 'on.surface',
+    color: 'on.surface-variant'
   };
 
   const focusStyle = _extends__default['default']({
-    borderColor: alpha(color, 0.87),
+    borderColor: color,
     color: alpha(color, 0.87)
   }, borderStyling(borderRadius, borderWidthWhenFocused));
 
@@ -2188,7 +2411,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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0I4QiIsImZpbGUiOiJzdHlsZWRDb21wb25lbnRzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgVGhlbWUgfSBmcm9tICcuLi90aGVtZSc7XG5pbXBvcnQgeyByZW0gfSBmcm9tICdwb2xpc2hlZCc7XG5pbXBvcnQgeyBhbHBoYSB9IGZyb20gJy4uL2NvbG9yJztcbmltcG9ydCBzaG91bGRGb3J3YXJkUHJvcCBmcm9tICdAc3R5bGVkLXN5c3RlbS9zaG91bGQtZm9yd2FyZC1wcm9wJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BzdHlsZWQtc3lzdGVtL2Nzcyc7XG5cbmV4cG9ydCBjb25zdCBOT1RDSF9QQURESU5HID0gNDtcblxuY29uc3QgbWFrZVNlbGVjdG9yID0gKFxuICBzdGF0ZTpcbiAgICB8ICdob3Zlcjpub3QoW2Rpc2FibGVkXSk6bm90KDpmb2N1cyknXG4gICAgfCAnZm9jdXM6bm90KFtkaXNhYmxlZF0pJ1xuICAgIHwgJ2Rpc2FibGVkJ1xuKSA9PlxuICBgaW5wdXQ6JHtzdGF0ZX0gfiAmIFtkYXRhLW5vdGNoLW91dGxpbmUtaXRlbV0sYCArXG4gIGBzZWxlY3Q6JHtzdGF0ZX0gfiAmIFtkYXRhLW5vdGNoLW91dGxpbmUtaXRlbV0sYCArXG4gIGBidXR0b246JHtzdGF0ZX0gfiAmIFtkYXRhLW5vdGNoLW91dGxpbmUtaXRlbV0sYCArXG4gIGB0ZXh0YXJlYToke3N0YXRlfSB+ICYgW2RhdGEtbm90Y2gtb3V0bGluZS1pdGVtXWA7XG5cbmV4cG9ydCBjb25zdCBJbm5lckNvbnRhaW5lciA9IHN0eWxlZCgnZGl2Jywge1xuICBzaG91bGRGb3J3YXJkUHJvcCxcbn0pPHtcbiAgY29sb3I/OiBzdHJpbmc7XG4gIHRoZW1lPzogVGhlbWU7XG4gIGJvcmRlclJhZGl1czogbnVtYmVyO1xuICBib3JkZXJXaWR0aDogbnVtYmVyO1xuICBib3JkZXJXaWR0aFdoZW5Gb2N1c2VkOiBudW1iZXI7XG4gIGJvcmRlclN0eWxlOiBzdHJpbmc7XG4gIG5vdGNoU3RhcnQ6IG51bWJlcjtcbiAgZm9yY2VBY3RpdmU/OiBib29sZWFuO1xufT4oXG4gIHtcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgbGVmdDogMCxcbiAgICB0b3A6IDAsXG4gICAgYm90dG9tOiAwLFxuICAgIHdpZHRoOiAnMTAwJScsXG4gICAgaGVpZ2h0OiAnMTAwJScsXG4gICAgcG9pbnRlckV2ZW50czogJ25vbmUnLFxuICB9LFxuICAoe1xuICAgIGNvbG9yID0gJ29uLnN1cmZhY2UnLFxuICAgIGJvcmRlclJhZGl1czogYm9yZGVyUmFkaXVzUHgsXG4gICAgYm9yZGVyV2lkdGg6IGJvcmRlcldpZHRoUHgsXG4gICAgYm9yZGVyV2lkdGhXaGVuRm9jdXNlZDogYm9yZGVyV2lkdGhXaGVuRm9jdXNlZFB4LFxuICAgIGJvcmRlclN0eWxlLFxuICAgIG5vdGNoU3RhcnQsXG4gICAgZm9yY2VBY3RpdmUgPSBmYWxzZSxcbiAgfSkgPT4ge1xuICAgIGNvbnN0IHdpZHRoID0gcmVtKG5vdGNoU3RhcnQgLSBOT1RDSF9QQURESU5HKTtcbiAgICBjb25zdCBib3JkZXJSYWRpdXMgPSByZW0oYm9yZGVyUmFkaXVzUHgpO1xuICAgIGNvbnN0IGJvcmRlcldpZHRoID0gcmVtKGJvcmRlcldpZHRoUHgpO1xuICAgIGNvbnN0IGJvcmRlcldpZHRoV2hlbkZvY3VzZWQgPSByZW0oYm9yZGVyV2lkdGhXaGVuRm9jdXNlZFB4KTtcblxuICAgIGZ1bmN0aW9uIGJvcmRlclN0eWxpbmcoYm9yZGVyUmFkaXVzOiBzdHJpbmcsIGJvcmRlcldpZHRoOiBzdHJpbmcpIHtcbiAgICAgIHJldHVybiB7XG4gICAgICAgIFsnJltkYXRhLW5vdGNoLW91dGxpbmUtaXRlbT1cInN0YXJ0XCJdJ106IHtcbiAgICAgICAgICBib3JkZXJUb3BMZWZ0UmFkaXVzOiBib3JkZXJSYWRpdXMsXG4gICAgICAgICAgYm9yZGVyQm90dG9tTGVmdFJhZGl1czogYm9yZGVyUmFkaXVzLFxuICAgICAgICAgIGJvcmRlcldpZHRoOiBib3JkZXJXaWR0aCxcbiAgICAgICAgICBib3JkZXJSaWdodFdpZHRoOiAwLFxuICAgICAgICAgIHdpZHRoLFxuICAgICAgICB9LFxuICAgICAgICBbJyZbZGF0YS1ub3RjaC1vdXRsaW5lLWl0ZW09XCJtaWRkbGVcIl0nXToge1xuICAgICAgICAgIGJvcmRlcldpZHRoOiAwLFxuICAgICAgICAgIGJvcmRlckJvdHRvbVdpZHRoOiBib3JkZXJXaWR0aCxcbiAgICAgICAgfSxcbiAgICAgICAgWycmW2RhdGEtbm90Y2gtb3V0bGluZS1pdGVtPVwiZW5kXCJdJ106IHtcbiAgICAgICAgICBib3JkZXJXaWR0aDogYm9yZGVyV2lkdGgsXG4gICAgICAgICAgYm9yZGVyTGVmdDogMCxcbiAgICAgICAgICBib3JkZXJUb3BSaWdodFJhZGl1czogYm9yZGVyUmFkaXVzLFxuICAgICAgICAgIGJvcmRlckJvdHRvbVJpZ2h0UmFkaXVzOiBib3JkZXJSYWRpdXMsXG4gICAgICAgICAgZmxleDogMSxcbiAgICAgICAgfSxcbiAgICAgIH07XG4gICAgfVxuXG4gICAgY29uc3QgaW5hY3RpdmVTdHlsZSA9IHtcbiAgICAgIGNvbG9yOiBhbHBoYSgnb24uc3VyZmFjZScsIDAuNiksXG4gICAgICBib3JkZXJDb2xvcjogYWxwaGEoJ29uLnN1cmZhY2UnLCAwLjM4KSxcbiAgICAgIC4uLmJvcmRlclN0eWxpbmcoYm9yZGVyUmFkaXVzLCBib3JkZXJXaWR0aCksXG4gICAgfTtcblxuICAgIGNvbnN0IGhvdmVyU3R5bGUgPSB7XG4gICAgICBib3JkZXJDb2xvcjogYWxwaGEoJ29uLnN1cmZhY2UnLCAwLjg3KSxcbiAgICAgIGNvbG9yOiBhbHBoYSgnb24uc3VyZmFjZScsIDAuNiksXG4gICAgfTtcblxuICAgIGNvbnN0IGZvY3VzU3R5bGUgPSB7XG4gICAgICBib3JkZXJDb2xvcjogYWxwaGEoY29sb3IsIDAuODcpLFxuICAgICAgY29sb3I6IGFscGhhKGNvbG9yLCAwLjg3KSxcbiAgICAgIC4uLmJvcmRlclN0eWxpbmcoYm9yZGVyUmFkaXVzLCBib3JkZXJXaWR0aFdoZW5Gb2N1c2VkKSxcbiAgICB9O1xuXG4gICAgY29uc3QgZGlzYWJsZWRTdHlsZSA9IHtcbiAgICAgIGJvcmRlckNvbG9yOiBhbHBoYSgnb24uc3VyZmFjZScsIDAuMDYpLFxuICAgICAgY29sb3I6IGFscGhhKCdvbi5zdXJmYWNlJywgMC4zOCksXG4gICAgfTtcblxuICAgIHJldHVybiBjc3Moe1xuICAgICAgLy8gbm90Y2ggaXRlbXMgc3R5bGVzIHdoZW4gbm90IGZvY3VzZWRcbiAgICAgIFsnW2RhdGEtbm90Y2gtb3V0bGluZS1pdGVtXSddOiB7XG4gICAgICAgIGJveFNpemluZzogJ2JvcmRlci1ib3gnLFxuICAgICAgICBib3JkZXJTdHlsZSxcbiAgICAgICAgdHJhbnNpdGlvbjogYGJvcmRlci1jb2xvciAuMTVzIGN1YmljLWJlemllciguNCwwLC4yLDEpYCxcbiAgICAgICAgLi4uKGZvcmNlQWN0aXZlID8gZm9jdXNTdHlsZSA6IGluYWN0aXZlU3R5bGUpLFxuICAgICAgfSxcbiAgICAgIC8vIG5vdGNoIGl0ZW1zIHN0eWxlcyB3aGVuIGlucHV0IGlzIGhvdmVyZWRcbiAgICAgIFttYWtlU2VsZWN0b3IoJ2hvdmVyOm5vdChbZGlzYWJsZWRdKTpub3QoOmZvY3VzKScpXTogZm9yY2VBY3RpdmVcbiAgICAgICAgPyBmb2N1c1N0eWxlXG4gICAgICAgIDogaG92ZXJTdHlsZSxcbiAgICAgIC8vIG5vdGNoIGl0ZW1zIHN0eWxlcyB3aGVuIGlucHV0IGlzIGZvY3VzZWRcbiAgICAgIFttYWtlU2VsZWN0b3IoJ2ZvY3VzOm5vdChbZGlzYWJsZWRdKScpXTogZm9jdXNTdHlsZSxcbiAgICAgIC8vIG5vdGNoIGl0ZW1zIHN0eWxlcyB3aGVuIGlucHV0IGlzIGRpc2FibGVkXG4gICAgICBbbWFrZVNlbGVjdG9yKCdkaXNhYmxlZCcpXTogZGlzYWJsZWRTdHlsZSxcbiAgICB9KTtcbiAgfVxuKTtcbiJdfQ== */");
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0I4QiIsImZpbGUiOiJzdHlsZWRDb21wb25lbnRzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgVGhlbWUgfSBmcm9tICcuLi90aGVtZSc7XG5pbXBvcnQgeyByZW0gfSBmcm9tICdwb2xpc2hlZCc7XG5pbXBvcnQgeyBhbHBoYSB9IGZyb20gJy4uL2NvbG9yJztcbmltcG9ydCBzaG91bGRGb3J3YXJkUHJvcCBmcm9tICdAc3R5bGVkLXN5c3RlbS9zaG91bGQtZm9yd2FyZC1wcm9wJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BzdHlsZWQtc3lzdGVtL2Nzcyc7XG5cbmV4cG9ydCBjb25zdCBOT1RDSF9QQURESU5HID0gNDtcblxuY29uc3QgbWFrZVNlbGVjdG9yID0gKFxuICBzdGF0ZTpcbiAgICB8ICdob3Zlcjpub3QoW2Rpc2FibGVkXSk6bm90KDpmb2N1cyknXG4gICAgfCAnZm9jdXM6bm90KFtkaXNhYmxlZF0pJ1xuICAgIHwgJ2Rpc2FibGVkJ1xuKSA9PlxuICBgaW5wdXQ6JHtzdGF0ZX0gfiAmIFtkYXRhLW5vdGNoLW91dGxpbmUtaXRlbV0sYCArXG4gIGBzZWxlY3Q6JHtzdGF0ZX0gfiAmIFtkYXRhLW5vdGNoLW91dGxpbmUtaXRlbV0sYCArXG4gIGBbcm9sZT1cImJ1dHRvblwiXToke3N0YXRlfSB+ICYgW2RhdGEtbm90Y2gtb3V0bGluZS1pdGVtXSxgICtcbiAgYHRleHRhcmVhOiR7c3RhdGV9IH4gJiBbZGF0YS1ub3RjaC1vdXRsaW5lLWl0ZW1dYDtcblxuZXhwb3J0IGNvbnN0IElubmVyQ29udGFpbmVyID0gc3R5bGVkKCdkaXYnLCB7XG4gIHNob3VsZEZvcndhcmRQcm9wLFxufSk8e1xuICBjb2xvcj86IHN0cmluZztcbiAgdGhlbWU/OiBUaGVtZTtcbiAgYm9yZGVyUmFkaXVzOiBudW1iZXI7XG4gIGJvcmRlcldpZHRoOiBudW1iZXI7XG4gIGJvcmRlcldpZHRoV2hlbkZvY3VzZWQ6IG51bWJlcjtcbiAgYm9yZGVyU3R5bGU6IHN0cmluZztcbiAgbm90Y2hTdGFydDogbnVtYmVyO1xuICBmb3JjZUFjdGl2ZT86IGJvb2xlYW47XG59PihcbiAge1xuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICBsZWZ0OiAwLFxuICAgIHRvcDogMCxcbiAgICBib3R0b206IDAsXG4gICAgd2lkdGg6ICcxMDAlJyxcbiAgICBoZWlnaHQ6ICcxMDAlJyxcbiAgICBwb2ludGVyRXZlbnRzOiAnbm9uZScsXG4gIH0sXG4gICh7XG4gICAgY29sb3IgPSAnb24uc3VyZmFjZScsXG4gICAgYm9yZGVyUmFkaXVzOiBib3JkZXJSYWRpdXNQeCxcbiAgICBib3JkZXJXaWR0aDogYm9yZGVyV2lkdGhQeCxcbiAgICBib3JkZXJXaWR0aFdoZW5Gb2N1c2VkOiBib3JkZXJXaWR0aFdoZW5Gb2N1c2VkUHgsXG4gICAgYm9yZGVyU3R5bGUsXG4gICAgbm90Y2hTdGFydCxcbiAgICBmb3JjZUFjdGl2ZSA9IGZhbHNlLFxuICB9KSA9PiB7XG4gICAgY29uc3Qgd2lkdGggPSByZW0obm90Y2hTdGFydCAtIE5PVENIX1BBRERJTkcpO1xuICAgIGNvbnN0IGJvcmRlclJhZGl1cyA9IHJlbShib3JkZXJSYWRpdXNQeCk7XG4gICAgY29uc3QgYm9yZGVyV2lkdGggPSByZW0oYm9yZGVyV2lkdGhQeCk7XG4gICAgY29uc3QgYm9yZGVyV2lkdGhXaGVuRm9jdXNlZCA9IHJlbShib3JkZXJXaWR0aFdoZW5Gb2N1c2VkUHgpO1xuXG4gICAgZnVuY3Rpb24gYm9yZGVyU3R5bGluZyhib3JkZXJSYWRpdXM6IHN0cmluZywgYm9yZGVyV2lkdGg6IHN0cmluZykge1xuICAgICAgcmV0dXJuIHtcbiAgICAgICAgWycmW2RhdGEtbm90Y2gtb3V0bGluZS1pdGVtPVwic3RhcnRcIl0nXToge1xuICAgICAgICAgIGJvcmRlclRvcExlZnRSYWRpdXM6IGJvcmRlclJhZGl1cyxcbiAgICAgICAgICBib3JkZXJCb3R0b21MZWZ0UmFkaXVzOiBib3JkZXJSYWRpdXMsXG4gICAgICAgICAgYm9yZGVyV2lkdGg6IGJvcmRlcldpZHRoLFxuICAgICAgICAgIGJvcmRlclJpZ2h0V2lkdGg6IDAsXG4gICAgICAgICAgd2lkdGgsXG4gICAgICAgIH0sXG4gICAgICAgIFsnJltkYXRhLW5vdGNoLW91dGxpbmUtaXRlbT1cIm1pZGRsZVwiXSddOiB7XG4gICAgICAgICAgYm9yZGVyV2lkdGg6IDAsXG4gICAgICAgICAgYm9yZGVyQm90dG9tV2lkdGg6IGJvcmRlcldpZHRoLFxuICAgICAgICB9LFxuICAgICAgICBbJyZbZGF0YS1ub3RjaC1vdXRsaW5lLWl0ZW09XCJlbmRcIl0nXToge1xuICAgICAgICAgIGJvcmRlcldpZHRoOiBib3JkZXJXaWR0aCxcbiAgICAgICAgICBib3JkZXJMZWZ0OiAwLFxuICAgICAgICAgIGJvcmRlclRvcFJpZ2h0UmFkaXVzOiBib3JkZXJSYWRpdXMsXG4gICAgICAgICAgYm9yZGVyQm90dG9tUmlnaHRSYWRpdXM6IGJvcmRlclJhZGl1cyxcbiAgICAgICAgICBmbGV4OiAxLFxuICAgICAgICB9LFxuICAgICAgfTtcbiAgICB9XG5cbiAgICBjb25zdCBpbmFjdGl2ZVN0eWxlID0ge1xuICAgICAgY29sb3I6ICdvbi5zdXJmYWNlLXZhcmlhbnQnLFxuICAgICAgYm9yZGVyQ29sb3I6ICdvdXRsaW5lJyxcbiAgICAgIC4uLmJvcmRlclN0eWxpbmcoYm9yZGVyUmFkaXVzLCBib3JkZXJXaWR0aCksXG4gICAgfTtcblxuICAgIGNvbnN0IGhvdmVyU3R5bGUgPSB7XG4gICAgICBib3JkZXJDb2xvcjogJ29uLnN1cmZhY2UnLFxuICAgICAgY29sb3I6ICdvbi5zdXJmYWNlLXZhcmlhbnQnLFxuICAgIH07XG5cbiAgICBjb25zdCBmb2N1c1N0eWxlID0ge1xuICAgICAgYm9yZGVyQ29sb3I6IGNvbG9yLFxuICAgICAgY29sb3I6IGFscGhhKGNvbG9yLCAwLjg3KSxcbiAgICAgIC4uLmJvcmRlclN0eWxpbmcoYm9yZGVyUmFkaXVzLCBib3JkZXJXaWR0aFdoZW5Gb2N1c2VkKSxcbiAgICB9O1xuXG4gICAgY29uc3QgZGlzYWJsZWRTdHlsZSA9IHtcbiAgICAgIGJvcmRlckNvbG9yOiBhbHBoYSgnb24uc3VyZmFjZScsIDAuMDYpLFxuICAgICAgY29sb3I6IGFscGhhKCdvbi5zdXJmYWNlJywgMC4zOCksXG4gICAgfTtcblxuICAgIHJldHVybiBjc3Moe1xuICAgICAgLy8gbm90Y2ggaXRlbXMgc3R5bGVzIHdoZW4gbm90IGZvY3VzZWRcbiAgICAgIFsnW2RhdGEtbm90Y2gtb3V0bGluZS1pdGVtXSddOiB7XG4gICAgICAgIGJveFNpemluZzogJ2JvcmRlci1ib3gnLFxuICAgICAgICBib3JkZXJTdHlsZSxcbiAgICAgICAgdHJhbnNpdGlvbjogYGJvcmRlci1jb2xvciAuMTVzIGN1YmljLWJlemllciguNCwwLC4yLDEpYCxcbiAgICAgICAgLi4uKGZvcmNlQWN0aXZlID8gZm9jdXNTdHlsZSA6IGluYWN0aXZlU3R5bGUpLFxuICAgICAgfSxcbiAgICAgIC8vIG5vdGNoIGl0ZW1zIHN0eWxlcyB3aGVuIGlucHV0IGlzIGhvdmVyZWRcbiAgICAgIFttYWtlU2VsZWN0b3IoJ2hvdmVyOm5vdChbZGlzYWJsZWRdKTpub3QoOmZvY3VzKScpXTogZm9yY2VBY3RpdmVcbiAgICAgICAgPyBmb2N1c1N0eWxlXG4gICAgICAgIDogaG92ZXJTdHlsZSxcbiAgICAgIC8vIG5vdGNoIGl0ZW1zIHN0eWxlcyB3aGVuIGlucHV0IGlzIGZvY3VzZWRcbiAgICAgIFttYWtlU2VsZWN0b3IoJ2ZvY3VzOm5vdChbZGlzYWJsZWRdKScpXTogZm9jdXNTdHlsZSxcbiAgICAgIC8vIG5vdGNoIGl0ZW1zIHN0eWxlcyB3aGVuIGlucHV0IGlzIGRpc2FibGVkXG4gICAgICBbbWFrZVNlbGVjdG9yKCdkaXNhYmxlZCcpXTogZGlzYWJsZWRTdHlsZSxcbiAgICB9KTtcbiAgfVxuKTtcbiJdfQ== */");
 
 const NotchedOutline = /*#__PURE__*/react$1.forwardRef(function NotchedOutline(props, forwardedRef) {
   let {
@@ -2274,8 +2497,10 @@ const OutlinedContainer = /*#__PURE__*/react$1.forwardRef(function OutlinedConta
     }
   }, [label]);
   const color = error ? 'error' : colorProp;
+  const inputHeight = 56;
   return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
-    position: "relative"
+    position: "relative",
+    lineHeight: 0
   }, otherProps, {
     children: /*#__PURE__*/jsxRuntime.jsx(NotchedOutline, {
       ref: forwardedRef,
@@ -2287,9 +2512,9 @@ const OutlinedContainer = /*#__PURE__*/react$1.forwardRef(function OutlinedConta
       notchStart: 16,
       forceActive: forceActive || error,
       label: label && /*#__PURE__*/jsxRuntime.jsx(FloatingLabel, {
-        height: 56,
-        offsetX: leadingIcon ? 48 : 16,
-        translateX: leadingIcon ? -32 : 0,
+        height: inputHeight,
+        offsetX: leadingIcon ? PADDING_LEFT_WITH_ICON + ICON_WIDTH + PADDING_LEFT_WITHOUT_ICON : PADDING_LEFT_WITHOUT_ICON,
+        translateX: leadingIcon ? -(PADDING_LEFT_WITH_ICON + ICON_WIDTH) : 0,
         active: forceActive || labelIsFloating,
         ref: labelRef,
         htmlFor: inputId,
@@ -2352,8 +2577,8 @@ const IconContainer = ({
   position: "absolute",
   __css: {
     top: 0,
-    [position === 'start' ? 'left' : 'right']: 3,
-    minWidth: "1.5rem",
+    [position === 'start' ? 'left' : 'right']: polished.rem(PADDING_LEFT_WITH_ICON),
+    minWidth: polished.rem(ICON_WIDTH),
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -2510,14 +2735,6 @@ const List = /*#__PURE__*/react$1.forwardRef(function List(props, forwardedRef)
   }, otherProps));
 });
 
-const listitemContext = /*#__PURE__*/react$1.createContext({
-  color: 'on.surface'
-});
-const {
-  Provider: ListItemProvider
-} = listitemContext;
-const useListItemContext = () => react$1.useContext(listitemContext);
-
 const ListItem = /*#__PURE__*/react$1.forwardRef(function ListItem(props, forwardedRef) {
   const {
     as = 'div',
@@ -2533,40 +2750,60 @@ const ListItem = /*#__PURE__*/react$1.forwardRef(function ListItem(props, forwar
         otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "innerAs", "children", "selected", "aria-selected", "disabled", "color", "rippleColor", "__css"]);
 
   const selected = ariaSelectedProp || selectedProp;
-  const color = colorProp ? colorProp : selected ? 'primary' : 'on.surface';
+  const color = rippleColor || colorProp || 'primary';
   const theme = useTheme();
-  return /*#__PURE__*/jsxRuntime.jsx(ListItemProvider, {
-    value: {
-      color,
-      disabled
-    },
-    children: /*#__PURE__*/jsxRuntime.jsx(RippleBox, _extends__default['default']({
-      ref: forwardedRef,
-      as: innerAs || as,
-      theme: theme,
-      display: "flex",
-      "data-disabled": disabled ? '' : undefined,
-      rippleColor: rippleColor || color,
-      baseOpacity: selected ? 0.12 : 0,
-      hoverOpacity: selected ? 0.16 : 0.04,
-      focusOpacity: selected ? 0.24 : 0.12,
-      "aria-selected": selected ? 'true' : undefined,
-      disabled: disabled
-    }, otherProps, {
-      __css: _extends__default['default']({
-        px: 3,
-        py: "0.75rem",
-        backgroundColor: 'transparent',
-        color: disabled ? alpha(color, 0.6) : alpha(color, 0.87),
+  const baseOpacity = 0.12;
+  const hoverOpacity = 0.16;
+  const focusOpacity = 0.24;
+  return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
+    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'
+          outline: 'none',
+          backgroundColor: alpha(color, focusOpacity + 0.12)
         },
-        textDecoration: 'none',
-        WebkitTapHighlightColor: 'transparent'
-      }, css.get(theme, 'text.subtitle1'), __css),
-      children: children
-    }))
-  });
+        ':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),
+    children: children
+  }));
 });
 
 const ListItemText = /*#__PURE__*/react$1.forwardRef(function ListItemText(props, forwardedRef) {
@@ -2577,10 +2814,6 @@ const ListItemText = /*#__PURE__*/react$1.forwardRef(function ListItemText(props
   } = props,
         otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "text", "secondaryText"]);
 
-  const {
-    color,
-    disabled
-  } = useListItemContext();
   return /*#__PURE__*/jsxRuntime.jsxs(Comp, _extends__default['default']({
     ref: forwardedRef
   }, otherProps, {
@@ -2589,7 +2822,8 @@ const ListItemText = /*#__PURE__*/react$1.forwardRef(function ListItemText(props
       variant: "body2",
       display: "block",
       __css: {
-        color: alpha(color, disabled ? 0.3 : 0.57)
+        color: 'currentColor',
+        opacity: 0.65
       },
       children: secondaryText
     })]
@@ -2645,10 +2879,11 @@ const ComboboxList = /*#__PURE__*/react$1.forwardRef((props, forwardedRef) => {
     ref: forwardedRef,
     innerAs: as,
     outlined: false,
-    elevation: 8,
+    elevation: 2,
     __css: _extends__default['default']({
       maxHeight: "18.75rem",
       overflowY: 'auto',
+      borderRadius: 'default',
       '[data-popper-placement="top"] &': {
         transformOrigin: 'bottom center'
       },
@@ -2966,7 +3201,7 @@ const CheckBoxInner = /*#__PURE__*/react$1.forwardRef(function CheckBoxInner(pro
           outline: 'none'
         },
         border: 'none',
-        borderRadius: '50%',
+        borderRadius: 'full',
         zIndex: 1,
         position: 'absolute'
       }, __css)
@@ -3024,15 +3259,16 @@ const CheckBox = /*#__PURE__*/react$1.forwardRef(function CheckBox(props, forwar
   });
 });
 
-function getFilledCSS(bg, color) {
-  return {
-    bg,
-    color: alpha(color, 0.87),
+function getFilledCSS(theme, bg, color, disabled) {
+  return _extends__default['default']({}, !disabled && bg !== 'surface' ? {
+    bg
+  } : _extends__default['default']({}, getColorOverlay(theme, 'surface', 'primary', 0.05), getDarkThemeBackgroundOverlay(theme, 2)), {
+    color,
     '&::before': {
       backgroundColor: 'currentColor',
       position: 'absolute',
       content: '""',
-      opacity: 0.12,
+      opacity: 0,
       pointerEvents: 'none',
       top: 0,
       right: 0,
@@ -3045,17 +3281,21 @@ function getFilledCSS(bg, color) {
     '& > *': {
       zIndex: 1
     }
-  };
+  }, disabled && {
+    boxShadow: 0,
+    bg: alpha('on.surface', 0.32)
+  });
 }
 
-function getOutlinedCSS(bg, color, borderOpacity) {
-  return {
-    bg,
-    color: alpha(color, 0.87),
+function getOutlinedCSS(theme, bg, color, borderOpacity) {
+  return _extends__default['default']({}, 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) {
@@ -3074,6 +3314,7 @@ const ChipBase = /*#__PURE__*/react$1.forwardRef(function Chip(props, forwardedR
   const theme = useTheme();
   return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
     as: as,
+    "data-disabled": disabled ? '' : undefined,
     ref: forwardedRef,
     __css: _extends__default['default']({
       boxSizing: 'border-box',
@@ -3087,9 +3328,11 @@ const ChipBase = /*#__PURE__*/react$1.forwardRef(function Chip(props, forwardedR
       fontSize: 'inherit',
       border: 0,
       overflow: 'hidden',
+      whiteSpace: 'nowrap',
       cursor: 'default',
       WebkitTapHighlightColor: 'transparent',
       willChange: 'transform,opacity',
+      minWidth: 'auto',
       '&::-moz-focus-inner': {
         border: 0
       }
@@ -3102,8 +3345,8 @@ const ChipBase = /*#__PURE__*/react$1.forwardRef(function Chip(props, forwardedR
     })({
       variant: variantProp,
       theme
-    }), variantProp === 'filled' ? getFilledCSS(backgroundColorProp, colorProp) : getOutlinedCSS(backgroundColorProp, colorProp, borderOpacityProp), {
-      opacity: disabled ? 0.37 : 1
+    }), variantProp === 'filled' ? getFilledCSS(theme, backgroundColorProp, colorProp, disabled) : getOutlinedCSS(theme, backgroundColorProp, colorProp, borderOpacityProp), {
+      opacity: disabled ? 0.38 : 1
     }, __css)
   }, otherProps, {
     children: children
@@ -3112,77 +3355,62 @@ const ChipBase = /*#__PURE__*/react$1.forwardRef(function Chip(props, forwardedR
 
 const ButtonChip = /*#__PURE__*/react$1.forwardRef(function ButtonChip(props, forwardedRef) {
   const {
-    as = 'button',
+    as = 'div',
     onClick,
     disabled: disabledProp,
-    leftIcon,
-    rightIcon,
-    children
+    leadingIcon,
+    trailingIcon,
+    children,
+    color = 'surface',
+    __css
   } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "onClick", "disabled", "leftIcon", "rightIcon", "children"]);
+        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "onClick", "disabled", "leadingIcon", "trailingIcon", "children", "color", "__css"]);
 
   const theme = useTheme();
   const isClickable = onClick && !disabledProp;
   return /*#__PURE__*/jsxRuntime.jsx(ChipBase, _extends__default['default']({
-    as: "label",
+    as: "div",
     onClick: isClickable ? onClick : undefined,
-    disabled: disabledProp
+    disabled: disabledProp,
+    color: "on.surface",
+    backgroundColor: "surface",
+    __css: __css
   }, otherProps, {
-    children: /*#__PURE__*/jsxRuntime.jsxs(Box, {
-      as: "span",
+    children: /*#__PURE__*/jsxRuntime.jsxs(RippleBox, {
+      as: as,
+      role: isClickable ? 'button' : undefined,
+      tabIndex: isClickable ? 0 : undefined,
+      theme: theme,
+      ref: forwardedRef,
+      rippleColor: 'currentColor',
+      baseOpacity: 0,
+      hoverOpacity: 0.12,
+      focusOpacity: 0.24,
+      center: false,
+      disabled: !isClickable,
+      "aria-disabled": !isClickable,
       __css: {
+        bg: 'transparent',
+        color: 'inherit',
+        padding: `0`,
+        pl: leadingIcon ? "0.5rem" : "0.75rem",
+        pr: trailingIcon ? "0.5rem" : "0.75rem",
+        gap: "0.5rem",
         width: '100%',
+        minWidth: 'auto',
         height: '100%',
+        appearance: 'none',
+        ':focus': {
+          outline: 'none'
+        },
         border: 'none',
+        borderRadius: 0,
+        position: 'relative',
         display: 'inline-flex',
         alignItems: 'center',
-        justifyContent: 'center'
+        cursor: isClickable ? 'pointer' : 'default'
       },
-      children: [/*#__PURE__*/jsxRuntime.jsx(RippleBox, {
-        as: as,
-        theme: theme,
-        ref: forwardedRef,
-        rippleColor: 'currentColor',
-        baseOpacity: 0,
-        hoverOpacity: 0.12,
-        focusOpacity: 0.24,
-        center: false,
-        disabled: !isClickable,
-        "aria-disabled": !isClickable,
-        __css: {
-          backgroundColor: 'rgba(0,0,0,0)',
-          top: 0,
-          left: 0,
-          width: '100%',
-          height: '100%',
-          appearance: 'none',
-          ':focus': {
-            outline: 'none'
-          },
-          border: 'none',
-          borderRadius: 0,
-          position: 'absolute',
-          color: 'inherit',
-          cursor: isClickable ? 'pointer' : 'default'
-        }
-      }), /*#__PURE__*/jsxRuntime.jsx(Box, {
-        as: "span",
-        pl: "0.25rem",
-        pr: "0.5rem",
-        children: leftIcon
-      }), /*#__PURE__*/jsxRuntime.jsx(Box, {
-        as: "span",
-        __css: {
-          minWidth: 'auto',
-          whiteSpace: 'nowrap'
-        },
-        children: children
-      }), /*#__PURE__*/jsxRuntime.jsx(Box, {
-        as: "span",
-        pl: "0.375rem",
-        pr: "0.375rem",
-        children: rightIcon
-      })]
+      children: [leadingIcon, children, trailingIcon]
     })
   }));
 });
@@ -3199,19 +3427,21 @@ const InnerInput = /*#__PURE__*/react$1.forwardRef(function InnerInput(props, fo
     defaultValue,
     disabled,
     onChange,
-    leftIcon,
-    children
+    leadingIcon,
+    trailingIcon,
+    children,
+    __css
   } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["type", "color", "checked", "aria-checked", "defaultChecked", "value", "name", "defaultValue", "disabled", "onChange", "leftIcon", "children"]);
+        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["type", "color", "checked", "aria-checked", "defaultChecked", "value", "name", "defaultValue", "disabled", "onChange", "leadingIcon", "trailingIcon", "children", "__css"]);
 
   const theme = useTheme();
-  const sumOpacity = checked ? 0.12 : 0;
   return /*#__PURE__*/jsxRuntime.jsx(ChipBase, _extends__default['default']({
     as: "label",
     disabled: disabled,
-    backgroundColor: 'surface',
-    color: checked ? color : 'on.surface',
-    borderOpacity: checked ? 0.6 : 0.24
+    backgroundColor: checked ? color + '-container' : 'surface',
+    color: checked ? 'on.' + color + '-container' : 'on.surface',
+    borderOpacity: checked ? 0 : 0.24,
+    __css: __css
   }, otherProps, {
     children: /*#__PURE__*/jsxRuntime.jsxs(Box, {
       as: "span",
@@ -3221,7 +3451,9 @@ const InnerInput = /*#__PURE__*/react$1.forwardRef(function InnerInput(props, fo
         border: 'none',
         display: 'inline-flex',
         alignItems: 'center',
-        justifyContent: 'center'
+        justifyContent: 'center',
+        pl: leadingIcon ? "0.5rem" : "0.75rem",
+        pr: trailingIcon ? "0.5rem" : "0.75rem"
       },
       children: [/*#__PURE__*/jsxRuntime.jsx(RippleBox, {
         as: "input",
@@ -3235,13 +3467,13 @@ const InnerInput = /*#__PURE__*/react$1.forwardRef(function InnerInput(props, fo
         theme: theme,
         disabled: disabled,
         rippleColor: color,
-        baseOpacity: 0 + sumOpacity,
-        hoverOpacity: 0.12 + sumOpacity,
-        focusOpacity: 0.24 + sumOpacity,
+        baseOpacity: 0,
+        hoverOpacity: 0.12,
+        focusOpacity: 0.24,
         name: name,
         ref: forwardedRef,
         __css: {
-          backgroundColor: 'rgba(0,0,0,0)',
+          bg: 'transparent',
           top: 0,
           left: 0,
           width: '100%',
@@ -3252,19 +3484,9 @@ const InnerInput = /*#__PURE__*/react$1.forwardRef(function InnerInput(props, fo
           },
           border: 'none',
           borderRadius: 0,
-          position: 'absolute',
-          color: 'inherit'
+          position: 'absolute'
         }
-      }), /*#__PURE__*/jsxRuntime.jsx(Box, {
-        as: "span",
-        pl: "0.25rem",
-        pr: "0.5rem",
-        children: leftIcon
-      }), /*#__PURE__*/jsxRuntime.jsx(Box, {
-        as: "span",
-        pr: "0.75rem",
-        children: children
-      })]
+      }), leadingIcon, children, trailingIcon]
     })
   }));
 });
@@ -3315,26 +3537,36 @@ const Divider = /*#__PURE__*/react$1.forwardRef(function Divider(props, forwarde
 const Modal = core.Modal;
 const DialogSurface = /*#__PURE__*/react$1.forwardRef(function DialogSurface(props, forwardedRef) {
   const {
-    __css
+    __css,
+    variant: variantProp = 'base'
   } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["__css"]);
+        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["__css", "variant"]);
 
   const theme = useTheme();
+  const overlayValue = styledSystem.get(theme, 'dialogs.backgroundColorOverlay') || 0;
   return /*#__PURE__*/jsxRuntime.jsx(Modal, _extends__default['default']({
     ref: forwardedRef,
     as: Paper,
     theme: theme,
-    elevation: 24,
-    __css: _extends__default['default']({
+    elevation: 3,
+    __css: _extends__default['default']({}, getColorOverlay(theme, 'surface', 'primary', overlayValue), {
       position: 'relative',
-      bg: 'surface',
-      borderRadius: "0.5rem",
+      borderRadius: 'small',
       width: '100%',
       maxWidth: "37.5rem",
       maxHeight: '100%',
       overflow: 'auto',
       pointerEvents: 'auto'
-    }, __css)
+    }, styledSystem.variant({
+      scale: 'dialogs.variants',
+      prop: 'variant',
+      variants: {
+        base: {}
+      }
+    })({
+      variant: variantProp,
+      theme
+    }), __css)
   }, otherProps));
 });
 
@@ -3449,14 +3681,14 @@ const MenuList = /*#__PURE__*/react$1.forwardRef((_ref, ref) => {
     as: List,
     innerAs: as,
     ref: ref,
-    elevation: 8,
+    elevation: 2,
     outlined: false,
     variant: "default",
     __css: _extends__default['default']({
-      width: 0,
       minWidth: "7rem",
       maxWidth: "17.5rem",
       maxHeight: "18.75rem",
+      borderRadius: 'default',
       overflowY: 'auto',
       '[data-popper-placement="top"] &': {
         transformOrigin: 'bottom center'
@@ -3610,7 +3842,7 @@ const RadioButtonIcon = /*#__PURE__*/react$1.forwardRef(function RadioButtonIcon
     __css: {
       borderColor: 'currentColor',
       borderStyle: 'solid',
-      borderRadius: '50%',
+      borderRadius: 'full',
       borderWidth: "0.125rem",
       width: '100%',
       height: '100%',
@@ -3620,7 +3852,7 @@ const RadioButtonIcon = /*#__PURE__*/react$1.forwardRef(function RadioButtonIcon
     children: /*#__PURE__*/jsxRuntime.jsx(Box, {
       __css: {
         backgroundColor: 'currentColor',
-        borderRadius: '50%',
+        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',
@@ -3666,7 +3898,7 @@ const RadioButtonInner = /*#__PURE__*/react$1.forwardRef(function RadioButtonInn
           outline: 'none'
         },
         border: 'none',
-        borderRadius: '50%',
+        borderRadius: 'full',
         zIndex: 1,
         position: 'absolute'
       }, __css)
@@ -3744,27 +3976,31 @@ const Select$1 = /*#__PURE__*/react$1.forwardRef((_ref, forwardedRef) => {
 });
 const SelectButtonInner = /*#__PURE__*/react$1.forwardRef((_ref2, forwardedRef) => {
   let {
-    innerAs = 'button'
+    innerAs = 'div'
   } = _ref2,
       props = _objectWithoutPropertiesLoose__default['default'](_ref2, ["innerAs"]);
 
   const InputButton = Input;
   return /*#__PURE__*/jsxRuntime.jsx(InputButton, _extends__default['default']({
     as: innerAs,
-    ref: forwardedRef
+    ref: forwardedRef,
+    tabIndex: 0
   }, props));
 });
 const SelectButton = /*#__PURE__*/react$1.forwardRef((_ref3, ref) => {
   let {
-    as
+    as,
+    children
   } = _ref3,
-      props = _objectWithoutPropertiesLoose__default['default'](_ref3, ["as"]);
+      props = _objectWithoutPropertiesLoose__default['default'](_ref3, ["as", "children"]);
 
   return /*#__PURE__*/jsxRuntime.jsx(core.MenuButton, _extends__default['default']({
     as: SelectButtonInner,
     innerAs: as,
     ref: ref
-  }, props));
+  }, props, {
+    children: children
+  }));
 });
 
 const selectContext = /*#__PURE__*/react$1.createContext({
@@ -3791,7 +4027,7 @@ const SelectIcon = /*#__PURE__*/react$1.forwardRef(function SelectIcon(props, fo
     __css: {
       position: 'absolute',
       top: `calc(50% - ${"0.75rem"})`,
-      right: "0.4375rem",
+      right: polished.rem(PADDING_RIGHT_WITH_ICON),
       width: "1.5rem",
       height: "1.5rem",
       color: open ? 'primary' : alpha('on.surface', 0.54),
@@ -3876,7 +4112,7 @@ const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedR
   };
 
   const handleOnChange = e => {
-    onChange && onChange(e, native ? e.target.value : e.target.dataset.value);
+    onChange && onChange(e, native ? e.target.value : e.currentTarget.dataset.value);
   };
 
   const hasError = Boolean(error);
@@ -3937,7 +4173,8 @@ const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedR
             "aria-disabled": disabled ? 'true' : undefined,
             "aria-describedby": helperTextId,
             hasLabel: !!label,
-            leadingIcon: Boolean(leadingIcon)
+            leadingIcon: Boolean(leadingIcon),
+            trailingIcon: true
           }, otherProps, {
             children: native ? children : renderValue(value)
           })), !native && /*#__PURE__*/jsxRuntime.jsx(MenuPopover, {
@@ -3948,16 +4185,6 @@ const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedR
                 minWidth: buttonRef == null ? void 0 : (_buttonRef$current = buttonRef.current) == null ? void 0 : _buttonRef$current.offsetWidth
               },
               role: "listbox",
-              __css: variant === 'filled' ? {
-                "[data-popper-placement='top'] &": {
-                  borderBottomLeftRadius: 0,
-                  borderBottomRightRadius: 0
-                },
-                "[data-popper-placement='bottom'] &": {
-                  borderTopLeftRadius: 0,
-                  borderTopRightRadius: 0
-                }
-              } : {},
               children: children
             })
           })]
@@ -4499,19 +4726,19 @@ const Snackbar = /*#__PURE__*/react$1.forwardRef(function Snackbar(props, forwar
     style
   } = useSnackbarAnimation(ref, timeout);
   return /*#__PURE__*/jsxRuntime.jsxs(Paper, _extends__default['default']({
-    elevation: 6,
-    backgroundOverlay: 6,
+    elevation: 4,
+    backgroundOverlay: 4,
     className: colorMode === 'default' ? DARK_THEME_CLASS : DEFAULT_THEME_CLASS,
     ref: core.assignMultipleRefs(forwardedRef, ref),
     __css: _extends__default['default']({
-      boxShadow: 6,
+      boxShadow: 4,
       py: "0.375rem",
       pl: 3,
       pr: 3,
       display: 'inline-flex',
       minWidth: `min(100%, ${"21.5rem"})`,
       maxWidth: ['100%', 'unset'],
-      borderRadius: "0.25rem",
+      borderRadius: 'extra-small',
       color: 'on.surface',
       flexDirection: 'row',
       willChange: 'transform,opacity'
@@ -4536,22 +4763,37 @@ const Snackbar = /*#__PURE__*/react$1.forwardRef(function Snackbar(props, forwar
   }));
 });
 
+const BORDER_WIDTH = 2;
+const TRAIL_WIDTH = 52;
+const TRAIL_HEIGHT = 32;
+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
+    checked = false,
+    disabled = false
   } = _ref,
-      otherProps = _objectWithoutPropertiesLoose__default['default'](_ref, ["checked"]);
+      otherProps = _objectWithoutPropertiesLoose__default['default'](_ref, ["checked", "disabled"]);
 
   return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
-    __css: {
-      width: "2rem",
-      height: "0.875rem",
-      borderRadius: "0.4375rem",
-      backgroundColor: checked ? 'primary' : 'on.surface',
-      opacity: checked ? 0.54 : 0.38
-    }
+    __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 && {
+      opacity: 0.12,
+      backgroundColor: checked ? 'on.surface' : 'surface-variant',
+      borderColor: 'on.surface'
+    })
   }, otherProps));
 };
+const THUMB_SIZE = 40;
 const SwitchThumb = (_ref2) => {
   let {
     checked = false
@@ -4560,16 +4802,19 @@ const SwitchThumb = (_ref2) => {
 
   return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
     position: "absolute",
-    width: "3.375rem",
-    height: "3rem",
-    borderRadius: "1.5rem",
-    left: polished.rem(-21),
-    top: polished.rem(-17),
+    width: polished.rem(THUMB_SIZE),
+    height: polished.rem(THUMB_SIZE),
+    borderRadius: "full",
+    left: '50%',
+    top: '50%',
     __css: {
-      cursor: 'pointer',
-      transform: checked ? `translate(${"1.25rem"})` : 'none',
+      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)'
+      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
+      }
     }
   }, otherProps));
 };
@@ -4582,22 +4827,32 @@ const SwitchCircle = (_ref3) => {
   return /*#__PURE__*/jsxRuntime.jsx(Box, _extends__default['default']({
     __css: {
       position: 'absolute',
-      width: "1.25rem",
-      height: "1.25rem",
-      boxShadow: 2,
+      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',
-      borderWidth: "0.625rem",
-      borderStyle: 'solid',
-      borderRadius: '50%',
+      borderRadius: 'full',
       pointerEvents: 'none',
       zIndex: 1,
-      backgroundColor: checked ? 'primary' : '#fff',
-      borderColor: checked ? 'primary' : '#fff',
+      backgroundColor: checked ? 'on.primary' : 'outline',
       top: '50%',
       left: '50%',
       transform: 'translate(-50%, -50%)',
-      transition: 'inherit'
+      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
+      }
     },
+    "data-switch-circle": "",
     role: "presentation",
     "aria-hidden": "true"
   }, otherProps));
@@ -4622,13 +4877,14 @@ const SwitchInner = /*#__PURE__*/react$1.forwardRef(function SwitchInner(props,
     minWidth: "auto",
     children: /*#__PURE__*/jsxRuntime.jsxs(Box, {
       position: "relative",
-      opacity: disabled ? 0.38 : 1,
       children: [/*#__PURE__*/jsxRuntime.jsx(SwitchTrail, {
-        checked: checked
+        checked: checked,
+        disabled: disabled
       }), /*#__PURE__*/jsxRuntime.jsxs(SwitchThumb, {
         checked: checked,
         children: [/*#__PURE__*/jsxRuntime.jsx(RippleBox, _extends__default['default']({
           as: Comp,
+          role: "switch",
           type: "checkbox",
           checked: checked,
           onChange: onChange,
@@ -4640,21 +4896,22 @@ const SwitchInner = /*#__PURE__*/react$1.forwardRef(function SwitchInner(props,
           hoverOpacity: 0.04,
           focusOpacity: 0.12,
           center: true,
-          disabled: disabled
+          disabled: disabled,
+          "data-switch-thumb": ""
         }, otherProps, {
           __css: _extends__default['default']({
             top: '50%',
             left: '50%',
             backgroundColor: 'transparent',
             transform: 'translate(-50%, -50%)',
-            width: "3rem",
-            height: "3rem",
+            width: '100%',
+            height: '100%',
             appearance: 'none',
             ':focus': {
               outline: 'none'
             },
             border: 'none',
-            borderRadius: '50%',
+            borderRadius: 'full',
             zIndex: 1,
             position: 'absolute'
           }, __css)
@@ -4901,7 +5158,7 @@ const TabPanel = /*#__PURE__*/react$1.forwardRef(function TabPanel(props, forwar
 const Table = /*#__PURE__*/react$1.forwardRef((props, ref) => {
   const {
     children,
-    elevation = 4
+    elevation = 1
   } = props,
         rest = _objectWithoutPropertiesLoose__default['default'](props, ["children", "elevation"]);
 
@@ -5075,6 +5332,7 @@ exports.BaseLine = BaseLine;
 exports.BottomSheet = BottomSheet;
 exports.Box = Box;
 exports.Button = Button;
+exports.ButtonGroup = ButtonGroup;
 exports.CheckBox = CheckBox;
 exports.Chip = ButtonChip;
 exports.ChoiceChip = ChoiceChip;
@@ -5136,6 +5394,7 @@ exports.alpha = alpha;
 exports.appearAnimation = appearAnimation;
 exports.base = base;
 exports.getBackgroundOverlay = getBackgroundOverlay;
+exports.getColorOverlay = getColorOverlay;
 exports.getDarkThemeBackgroundOverlay = getDarkThemeBackgroundOverlay;
 exports.getTheme = getTheme;
 exports.rippleStyle = rippleStyle;