@basic-ui/material 0.1.13 → 0.1.16

package/build/cjs/index.js

@@ -1821,6 +1821,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 +1846,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,6 +1859,14 @@ 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),
@@ -1868,7 +1881,7 @@ const Input = /*#__PURE__*/react$1.forwardRef(function Input(props, forwardedRef
       ':disabled': {
         cursor: 'default'
       },
-      'select&,button&': {
+      'select&,[role="button"]&': {
         cursor: 'pointer'
       },
       'select&': {
@@ -1877,18 +1890,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 +1922,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 +1941,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',
@@ -2065,7 +2076,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,6 +2087,7 @@ const FilledContainer = /*#__PURE__*/react$1.forwardRef(function FilledContainer
     active: active || error,
     __css: _extends__default['default']({
       position: 'relative',
+      lineHeight: 0,
       width: '100%',
       backgroundColor: 'surface',
       overflow: 'hidden',
@@ -2089,11 +2102,14 @@ const FilledContainer = /*#__PURE__*/react$1.forwardRef(function FilledContainer
     })
   }, 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 +2125,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'],
@@ -2188,7 +2204,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/OiBUaGVtZTtcbiAgYm9yZGVyUmFkaXVzOiBudW1iZXI7XG4gIGJvcmRlcldpZHRoOiBudW1iZXI7XG4gIGJvcmRlcldpZHRoV2hlbkZvY3VzZWQ6IG51bWJlcjtcbiAgYm9yZGVyU3R5bGU6IHN0cmluZztcbiAgbm90Y2hTdGFydDogbnVtYmVyO1xuICBmb3JjZUFjdGl2ZT86IGJvb2xlYW47XG59PihcbiAge1xuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICBsZWZ0OiAwLFxuICAgIHRvcDogMCxcbiAgICBib3R0b206IDAsXG4gICAgd2lkdGg6ICcxMDAlJyxcbiAgICBoZWlnaHQ6ICcxMDAlJyxcbiAgICBwb2ludGVyRXZlbnRzOiAnbm9uZScsXG4gIH0sXG4gICh7XG4gICAgY29sb3IgPSAnb24uc3VyZmFjZScsXG4gICAgYm9yZGVyUmFkaXVzOiBib3JkZXJSYWRpdXNQeCxcbiAgICBib3JkZXJXaWR0aDogYm9yZGVyV2lkdGhQeCxcbiAgICBib3JkZXJXaWR0aFdoZW5Gb2N1c2VkOiBib3JkZXJXaWR0aFdoZW5Gb2N1c2VkUHgsXG4gICAgYm9yZGVyU3R5bGUsXG4gICAgbm90Y2hTdGFydCxcbiAgICBmb3JjZUFjdGl2ZSA9IGZhbHNlLFxuICB9KSA9PiB7XG4gICAgY29uc3Qgd2lkdGggPSByZW0obm90Y2hTdGFydCAtIE5PVENIX1BBRERJTkcpO1xuICAgIGNvbnN0IGJvcmRlclJhZGl1cyA9IHJlbShib3JkZXJSYWRpdXNQeCk7XG4gICAgY29uc3QgYm9yZGVyV2lkdGggPSByZW0oYm9yZGVyV2lkdGhQeCk7XG4gICAgY29uc3QgYm9yZGVyV2lkdGhXaGVuRm9jdXNlZCA9IHJlbShib3JkZXJXaWR0aFdoZW5Gb2N1c2VkUHgpO1xuXG4gICAgZnVuY3Rpb24gYm9yZGVyU3R5bGluZyhib3JkZXJSYWRpdXM6IHN0cmluZywgYm9yZGVyV2lkdGg6IHN0cmluZykge1xuICAgICAgcmV0dXJuIHtcbiAgICAgICAgWycmW2RhdGEtbm90Y2gtb3V0bGluZS1pdGVtPVwic3RhcnRcIl0nXToge1xuICAgICAgICAgIGJvcmRlclRvcExlZnRSYWRpdXM6IGJvcmRlclJhZGl1cyxcbiAgICAgICAgICBib3JkZXJCb3R0b21MZWZ0UmFkaXVzOiBib3JkZXJSYWRpdXMsXG4gICAgICAgICAgYm9yZGVyV2lkdGg6IGJvcmRlcldpZHRoLFxuICAgICAgICAgIGJvcmRlclJpZ2h0V2lkdGg6IDAsXG4gICAgICAgICAgd2lkdGgsXG4gICAgICAgIH0sXG4gICAgICAgIFsnJltkYXRhLW5vdGNoLW91dGxpbmUtaXRlbT1cIm1pZGRsZVwiXSddOiB7XG4gICAgICAgICAgYm9yZGVyV2lkdGg6IDAsXG4gICAgICAgICAgYm9yZGVyQm90dG9tV2lkdGg6IGJvcmRlcldpZHRoLFxuICAgICAgICB9LFxuICAgICAgICBbJyZbZGF0YS1ub3RjaC1vdXRsaW5lLWl0ZW09XCJlbmRcIl0nXToge1xuICAgICAgICAgIGJvcmRlcldpZHRoOiBib3JkZXJXaWR0aCxcbiAgICAgICAgICBib3JkZXJMZWZ0OiAwLFxuICAgICAgICAgIGJvcmRlclRvcFJpZ2h0UmFkaXVzOiBib3JkZXJSYWRpdXMsXG4gICAgICAgICAgYm9yZGVyQm90dG9tUmlnaHRSYWRpdXM6IGJvcmRlclJhZGl1cyxcbiAgICAgICAgICBmbGV4OiAxLFxuICAgICAgICB9LFxuICAgICAgfTtcbiAgICB9XG5cbiAgICBjb25zdCBpbmFjdGl2ZVN0eWxlID0ge1xuICAgICAgY29sb3I6IGFscGhhKCdvbi5zdXJmYWNlJywgMC42KSxcbiAgICAgIGJvcmRlckNvbG9yOiBhbHBoYSgnb24uc3VyZmFjZScsIDAuMzgpLFxuICAgICAgLi4uYm9yZGVyU3R5bGluZyhib3JkZXJSYWRpdXMsIGJvcmRlcldpZHRoKSxcbiAgICB9O1xuXG4gICAgY29uc3QgaG92ZXJTdHlsZSA9IHtcbiAgICAgIGJvcmRlckNvbG9yOiBhbHBoYSgnb24uc3VyZmFjZScsIDAuODcpLFxuICAgICAgY29sb3I6IGFscGhhKCdvbi5zdXJmYWNlJywgMC42KSxcbiAgICB9O1xuXG4gICAgY29uc3QgZm9jdXNTdHlsZSA9IHtcbiAgICAgIGJvcmRlckNvbG9yOiBhbHBoYShjb2xvciwgMC44NyksXG4gICAgICBjb2xvcjogYWxwaGEoY29sb3IsIDAuODcpLFxuICAgICAgLi4uYm9yZGVyU3R5bGluZyhib3JkZXJSYWRpdXMsIGJvcmRlcldpZHRoV2hlbkZvY3VzZWQpLFxuICAgIH07XG5cbiAgICBjb25zdCBkaXNhYmxlZFN0eWxlID0ge1xuICAgICAgYm9yZGVyQ29sb3I6IGFscGhhKCdvbi5zdXJmYWNlJywgMC4wNiksXG4gICAgICBjb2xvcjogYWxwaGEoJ29uLnN1cmZhY2UnLCAwLjM4KSxcbiAgICB9O1xuXG4gICAgcmV0dXJuIGNzcyh7XG4gICAgICAvLyBub3RjaCBpdGVtcyBzdHlsZXMgd2hlbiBub3QgZm9jdXNlZFxuICAgICAgWydbZGF0YS1ub3RjaC1vdXRsaW5lLWl0ZW1dJ106IHtcbiAgICAgICAgYm94U2l6aW5nOiAnYm9yZGVyLWJveCcsXG4gICAgICAgIGJvcmRlclN0eWxlLFxuICAgICAgICB0cmFuc2l0aW9uOiBgYm9yZGVyLWNvbG9yIC4xNXMgY3ViaWMtYmV6aWVyKC40LDAsLjIsMSlgLFxuICAgICAgICAuLi4oZm9yY2VBY3RpdmUgPyBmb2N1c1N0eWxlIDogaW5hY3RpdmVTdHlsZSksXG4gICAgICB9LFxuICAgICAgLy8gbm90Y2ggaXRlbXMgc3R5bGVzIHdoZW4gaW5wdXQgaXMgaG92ZXJlZFxuICAgICAgW21ha2VTZWxlY3RvcignaG92ZXI6bm90KFtkaXNhYmxlZF0pOm5vdCg6Zm9jdXMpJyldOiBmb3JjZUFjdGl2ZVxuICAgICAgICA/IGZvY3VzU3R5bGVcbiAgICAgICAgOiBob3ZlclN0eWxlLFxuICAgICAgLy8gbm90Y2ggaXRlbXMgc3R5bGVzIHdoZW4gaW5wdXQgaXMgZm9jdXNlZFxuICAgICAgW21ha2VTZWxlY3RvcignZm9jdXM6bm90KFtkaXNhYmxlZF0pJyldOiBmb2N1c1N0eWxlLFxuICAgICAgLy8gbm90Y2ggaXRlbXMgc3R5bGVzIHdoZW4gaW5wdXQgaXMgZGlzYWJsZWRcbiAgICAgIFttYWtlU2VsZWN0b3IoJ2Rpc2FibGVkJyldOiBkaXNhYmxlZFN0eWxlLFxuICAgIH0pO1xuICB9XG4pO1xuIl19 */");
 
 const NotchedOutline = /*#__PURE__*/react$1.forwardRef(function NotchedOutline(props, forwardedRef) {
   let {
@@ -2274,8 +2290,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 +2305,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 +2370,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',
@@ -2412,7 +2430,7 @@ const TextField = /*#__PURE__*/react$1.forwardRef(function TextField(props, forw
   });
   const [hasFocus, setHasFocus] = react$1.useState(false);
   const Container = componentMap$1[variant] || OutlinedContainer;
-  const fallbackId = core.useId();
+  const fallbackId = react$1.useId();
   const theme = useTheme();
 
   const handleFocus = () => {
@@ -2649,6 +2667,7 @@ const ComboboxList = /*#__PURE__*/react$1.forwardRef((props, forwardedRef) => {
     __css: _extends__default['default']({
       maxHeight: "18.75rem",
       overflowY: 'auto',
+      borderRadius: 'default',
       '[data-popper-placement="top"] &': {
         transformOrigin: 'bottom center'
       },
@@ -3172,6 +3191,10 @@ const ButtonChip = /*#__PURE__*/react$1.forwardRef(function ButtonChip(props, fo
         children: leftIcon
       }), /*#__PURE__*/jsxRuntime.jsx(Box, {
         as: "span",
+        __css: {
+          minWidth: 'auto',
+          whiteSpace: 'nowrap'
+        },
         children: children
       }), /*#__PURE__*/jsxRuntime.jsx(Box, {
         as: "span",
@@ -3453,6 +3476,7 @@ const MenuList = /*#__PURE__*/react$1.forwardRef((_ref, ref) => {
       minWidth: "7rem",
       maxWidth: "17.5rem",
       maxHeight: "18.75rem",
+      borderRadius: 'default',
       overflowY: 'auto',
       '[data-popper-placement="top"] &': {
         transformOrigin: 'bottom center'
@@ -3740,27 +3764,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({
@@ -3787,7 +3815,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),
@@ -3855,7 +3883,7 @@ const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedR
   const [hasFocus, setHasFocus] = react$1.useState(false);
   const buttonRef = react$1.useRef();
   const [open, setOpen] = react$1.useState(false);
-  const fallbackId = core.useId();
+  const fallbackId = react$1.useId();
   const theme = useTheme();
   const Container = componentMap[variant] || OutlinedContainer;
 
@@ -3872,7 +3900,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);
@@ -3933,7 +3961,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, {
@@ -3944,16 +3973,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
             })
           })]