@equinor/eds-core-react 0.24.0 → 0.26.0

package/dist/esm/components/Autocomplete/Autocomplete.js

@@ -2,7 +2,7 @@ import _typeof from '@babel/runtime/helpers/typeof';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import { forwardRef, useRef, useState, useEffect, useMemo, useCallback, useLayoutEffect } from 'react';
+import { forwardRef, useRef, useState, useEffect, useMemo, useCallback } from 'react';
 import { useMultipleSelection, useCombobox } from 'downshift';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { Button } from '../Button/index.js';
@@ -13,43 +13,36 @@ import { multiSelect, selectTokens } from './Autocomplete.tokens.js';
 import { bordersTemplate, useToken } from '@equinor/eds-utils';
 import { AutocompleteOption } from './Option.js';
 import { useFloating, offset, flip, shift, size, useInteractions, autoUpdate, FloatingPortal } from '@floating-ui/react-dom-interactions';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Input } from '../Input/Input.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
 import { Label } from '../Label/Label.js';
+import { Input } from '../Input/Input.js';
 
 var _excluded = ["options", "label", "meta", "className", "style", "disabled", "readOnly", "hideClearButton", "onOptionsChange", "selectedOptions", "multiple", "initialSelectedOptions", "disablePortal", "optionDisabled", "optionsFilter", "autoWidth", "placeholder", "optionLabel", "clearSearchOnChange"];
 var Container = styled.div.withConfig({
   displayName: "Autocomplete__Container",
   componentId: "sc-yvif0e-0"
 })(["position:relative;"]);
-var StyledInput = styled(Input).withConfig({
-  displayName: "Autocomplete__StyledInput",
-  componentId: "sc-yvif0e-1"
-})(function (_ref) {
-  var button = _ref.theme.entities.button;
-  return css(["padding-right:calc( ", " + ", " + (", " * 2) );"], button.spacings.left, button.spacings.right, button.height);
-});
 var StyledList = styled(List).withConfig({
   displayName: "Autocomplete__StyledList",
-  componentId: "sc-yvif0e-2"
-})(function (_ref2) {
-  var theme = _ref2.theme;
+  componentId: "sc-yvif0e-1"
+})(function (_ref) {
+  var theme = _ref.theme;
   return css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;max-height:300px;padding:0;"], theme.background, theme.boxShadow, bordersTemplate(theme.border));
 });
 var StyledButton = styled(Button).withConfig({
   displayName: "Autocomplete__StyledButton",
-  componentId: "sc-yvif0e-3"
-})(function (_ref3) {
-  var button = _ref3.theme.entities.button;
-  return css(["position:absolute;height:", ";width:", ";right:", ";top:", ";"], button.height, button.height, button.spacings.right, button.spacings.top);
+  componentId: "sc-yvif0e-2"
+})(function (_ref2) {
+  var button = _ref2.theme.entities.button;
+  return css(["height:", ";width:", ";"], button.height, button.height);
 });
 
-var findIndex = function findIndex(_ref4) {
-  var calc = _ref4.calc,
-      index = _ref4.index,
-      optionDisabled = _ref4.optionDisabled,
-      availableItems = _ref4.availableItems;
+var findIndex = function findIndex(_ref3) {
+  var calc = _ref3.calc,
+      index = _ref3.index,
+      optionDisabled = _ref3.optionDisabled,
+      availableItems = _ref3.availableItems;
   var nextItem = availableItems[index];
 
   if (optionDisabled(nextItem)) {
@@ -65,10 +58,10 @@ var findIndex = function findIndex(_ref4) {
   return index;
 };
 
-var findNextIndex = function findNextIndex(_ref5) {
-  var index = _ref5.index,
-      optionDisabled = _ref5.optionDisabled,
-      availableItems = _ref5.availableItems;
+var findNextIndex = function findNextIndex(_ref4) {
+  var index = _ref4.index,
+      optionDisabled = _ref4.optionDisabled,
+      availableItems = _ref4.availableItems;
   var options = {
     index: index,
     optionDisabled: optionDisabled,
@@ -89,10 +82,10 @@ var findNextIndex = function findNextIndex(_ref5) {
   return nextIndex;
 };
 
-var findPrevIndex = function findPrevIndex(_ref6) {
-  var index = _ref6.index,
-      optionDisabled = _ref6.optionDisabled,
-      availableItems = _ref6.availableItems;
+var findPrevIndex = function findPrevIndex(_ref5) {
+  var index = _ref5.index,
+      optionDisabled = _ref5.optionDisabled,
+      availableItems = _ref5.availableItems;
   var options = {
     index: index,
     optionDisabled: optionDisabled,
@@ -242,8 +235,8 @@ function AutocompleteInner(props, ref) {
     items: availableItems,
     initialSelectedItem: initialSelectedOptions[0],
     itemToString: getLabel,
-    onInputValueChange: function onInputValueChange(_ref7) {
-      var inputValue = _ref7.inputValue;
+    onInputValueChange: function onInputValueChange(_ref6) {
+      var inputValue = _ref6.inputValue;
       setAvailableItems(options.filter(function (item) {
         if (optionsFilter) {
           return optionsFilter(item, inputValue);
@@ -252,16 +245,16 @@ function AutocompleteInner(props, ref) {
         return getLabel(item).toLowerCase().includes(inputValue.toLowerCase());
       }));
     },
-    onIsOpenChange: function onIsOpenChange(_ref8) {
-      var selectedItem = _ref8.selectedItem;
+    onIsOpenChange: function onIsOpenChange(_ref7) {
+      var selectedItem = _ref7.selectedItem;
 
       if (!multiple && selectedItem !== null) {
         setAvailableItems(options);
       }
     },
-    onStateChange: function onStateChange(_ref9) {
-      var type = _ref9.type,
-          selectedItem = _ref9.selectedItem;
+    onStateChange: function onStateChange(_ref8) {
+      var type = _ref8.type,
+          selectedItem = _ref8.selectedItem;
 
       switch (type) {
         case useCombobox.stateChangeTypes.InputChange:
@@ -417,10 +410,10 @@ function AutocompleteInner(props, ref) {
     middleware: [offset(4), flip(), shift({
       padding: 8
     }), size({
-      apply: function apply(_ref10) {
-        var rects = _ref10.rects,
-            availableHeight = _ref10.availableHeight,
-            elements = _ref10.elements;
+      apply: function apply(_ref9) {
+        var rects = _ref9.rects,
+            availableHeight = _ref9.availableHeight,
+            elements = _ref9.elements;
         var anchorWidth = "".concat(rects.reference.width, "px");
         Object.assign(elements.floating.style, {
           width: "".concat(autoWidth ? anchorWidth : 'auto'),
@@ -441,10 +434,10 @@ function AutocompleteInner(props, ref) {
   var _useInteractions = useInteractions([]),
       getFloatingProps = _useInteractions.getFloatingProps;
 
-  useLayoutEffect(function () {
+  useEffect(function () {
     reference(anchorRef.current);
   }, [anchorRef, reference]);
-  useLayoutEffect(function () {
+  useEffect(function () {
     if (refs.reference.current && refs.floating.current && isOpen) {
       return autoUpdate(refs.reference.current, refs.floating.current, update);
     }
@@ -467,7 +460,7 @@ function AutocompleteInner(props, ref) {
       position: strategy,
       top: y || 0,
       left: x || 0,
-      zIndex: 1400
+      zIndex: 1500
     }
   })), {}, {
     children: /*#__PURE__*/jsx(StyledList, _objectSpread(_objectSpread({}, getMenuProps({
@@ -504,8 +497,8 @@ function AutocompleteInner(props, ref) {
         label: label,
         meta: meta,
         disabled: disabled
-      })), /*#__PURE__*/jsxs(Container, _objectSpread(_objectSpread({}, getComboboxProps()), {}, {
-        children: [/*#__PURE__*/jsx(StyledInput, _objectSpread(_objectSpread({}, getInputProps( // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      })), /*#__PURE__*/jsx(Container, _objectSpread(_objectSpread({}, getComboboxProps()), {}, {
+        children: /*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({}, getInputProps( // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         getDropdownProps({
           preventKeyAction: multiple ? isOpen : undefined,
           disabled: disabled,
@@ -519,31 +512,32 @@ function AutocompleteInner(props, ref) {
           placeholder: placeholderText,
           readOnly: readOnly,
           onFocus: openSelect,
-          onClick: openSelect
-        }, other)), showClearButton && /*#__PURE__*/jsx(StyledButton, {
-          variant: "ghost_icon",
-          disabled: disabled || readOnly,
-          "aria-label": 'clear options',
-          title: "clear",
-          onClick: clear,
-          style: {
-            right: 32
-          },
-          children: /*#__PURE__*/jsx(Icon, {
-            data: close,
-            size: 16
-          })
-        }), /*#__PURE__*/jsx(StyledButton, _objectSpread(_objectSpread({
-          variant: "ghost_icon"
-        }, getToggleButtonProps({
-          disabled: disabled || readOnly
-        })), {}, {
-          "aria-label": 'toggle options',
-          title: "open",
-          children: !readOnly && /*#__PURE__*/jsx(Icon, {
-            data: isOpen ? arrow_drop_up : arrow_drop_down
+          onClick: openSelect,
+          rightAdornmentsWidth: 24 * 2 + 8 + 8,
+          rightAdornments: /*#__PURE__*/jsxs(Fragment, {
+            children: [showClearButton && /*#__PURE__*/jsx(StyledButton, {
+              variant: "ghost_icon",
+              disabled: disabled || readOnly,
+              "aria-label": 'clear options',
+              title: "clear",
+              onClick: clear,
+              children: /*#__PURE__*/jsx(Icon, {
+                data: close,
+                size: 16
+              })
+            }), !readOnly && /*#__PURE__*/jsx(StyledButton, _objectSpread(_objectSpread({
+              variant: "ghost_icon"
+            }, getToggleButtonProps({
+              disabled: disabled || readOnly
+            })), {}, {
+              "aria-label": 'toggle options',
+              title: "open",
+              children: /*#__PURE__*/jsx(Icon, {
+                data: isOpen ? arrow_drop_up : arrow_drop_down
+              })
+            }))]
           })
-        }))]
+        }, other))
       })), disablePortal ? optionsList : /*#__PURE__*/jsx(FloatingPortal, {
         id: "eds-autocomplete-container",
         children: optionsList

package/dist/esm/components/Autocomplete/Autocomplete.tokens.js

@@ -47,6 +47,7 @@ var selectTokens = {
   entities: {
     button: {
       height: '24px',
+      width: '24px',
       spacings: {
         left: spacingSmall,
         right: spacingSmall,

package/dist/esm/components/Button/Button.js

@@ -60,7 +60,7 @@ var ButtonBase = styled.button.withConfig({
   var focus = states.focus,
       hover = states.hover,
       disabled = states.disabled;
-  return css(["box-sizing:border-box;margin:0;padding:0;text-decoration:none;position:relative;cursor:pointer;display:inline-block;background:", ";height:", ";width:", ";svg{justify-self:center;}", " ", " ", " &::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}@media (hover:hover) and (pointer:fine){&:hover{background:", ";color:", ";", ";}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}&:disabled{cursor:not-allowed;background:", ";", ";", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}}"], theme.background, theme.height, theme.width, spacingsTemplate(theme.spacings), bordersTemplate(theme.border), typographyTemplate(theme.typography), clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset = clickbound.offset) === null || _clickbound$offset === void 0 ? void 0 : _clickbound$offset.top, clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset2 = clickbound.offset) === null || _clickbound$offset2 === void 0 ? void 0 : _clickbound$offset2.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height, hover.background, (_hover$typography = hover.typography) === null || _hover$typography === void 0 ? void 0 : _hover$typography.color, bordersTemplate(hover === null || hover === void 0 ? void 0 : hover.border), outlineTemplate(focus.outline), outlineTemplate(focus.outline), disabled.background, bordersTemplate(disabled.border), typographyTemplate(disabled.typography), disabled.background);
+  return css(["box-sizing:border-box;margin:0;padding:0;text-decoration:none;position:relative;cursor:pointer;display:inline-block;background:", ";height:", ";width:", ";svg{justify-self:center;}", " ", " ", " &::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}@media (hover:hover) and (pointer:fine){&:hover{background:", ";color:", ";", ";}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}&:disabled,&[aria-disabled='true']{cursor:not-allowed;background:", ";", ";", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}}"], theme.background, theme.height, theme.width, spacingsTemplate(theme.spacings), bordersTemplate(theme.border), typographyTemplate(theme.typography), clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset = clickbound.offset) === null || _clickbound$offset === void 0 ? void 0 : _clickbound$offset.top, clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset2 = clickbound.offset) === null || _clickbound$offset2 === void 0 ? void 0 : _clickbound$offset2.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height, hover.background, (_hover$typography = hover.typography) === null || _hover$typography === void 0 ? void 0 : _hover$typography.color, bordersTemplate(hover === null || hover === void 0 ? void 0 : hover.border), outlineTemplate(focus.outline), outlineTemplate(focus.outline), disabled.background, bordersTemplate(disabled.border), typographyTemplate(disabled.typography), disabled.background);
 });
 var Button = /*#__PURE__*/forwardRef(function Button(_ref2, ref) {
   var _ref2$color = _ref2.color,

package/dist/esm/components/Input/Input.js

@@ -1,55 +1,152 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { forwardRef } from 'react';
-import styled, { css, ThemeProvider } from 'styled-components';
+import { forwardRef, useState, useCallback } from 'react';
+import styled, { css } from 'styled-components';
+import { outlineTemplate, spacingsTemplate, typographyMixin, useToken } from '@equinor/eds-utils';
 import { inputToken } from './Input.tokens.js';
-import { outlineTemplate, typographyTemplate, spacingsTemplate, useToken } from '@equinor/eds-utils';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
 
-var _excluded = ["variant", "disabled", "type"];
-var StyledInput = styled.input.withConfig({
-  displayName: "Input__StyledInput",
+var _excluded = ["variant", "disabled", "type", "leftAdornments", "rightAdornments", "readOnly", "className", "style", "leftAdornmentsProps", "rightAdornmentsProps", "leftAdornmentsWidth", "rightAdornmentsWidth"];
+var Container = styled.div.withConfig({
+  displayName: "Input__Container",
   componentId: "sc-1ykv024-0"
 })(function (_ref) {
-  var theme = _ref.theme;
-  var _theme$states = theme.states,
-      focusOutline = _theme$states.focus.outline,
-      activeOutline = _theme$states.active.outline,
-      disabled = _theme$states.disabled,
-      readOnly = _theme$states.readOnly,
-      boxShadow = theme.boxShadow;
-  return css(["width:100%;box-sizing:border-box;margin:0;appearance:none;background:", ";border:none;height:", ";box-shadow:", ";", " ", " ", ";&::placeholder{color:", ";}&:active,&:focus{outline-offset:0;box-shadow:none;", "}&:disabled{color:", ";cursor:not-allowed;box-shadow:none;outline:none;&:focus,&:active{outline:none;}}&[readOnly]{background:", ";box-shadow:", ";}"], theme.background, theme.minHeight, boxShadow, outlineTemplate(activeOutline), typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), theme.entities.placeholder.typography.color, outlineTemplate(focusOutline), disabled.typography.color, readOnly.background, readOnly.boxShadow);
+  var _entities$adornment, _entities$adornment$s;
+
+  var token = _ref.token,
+      disabled = _ref.disabled,
+      readOnly = _ref.readOnly;
+  var states = token.states,
+      entities = token.entities;
+  return css(["--eds-input-adornment-color:", ";--eds-input-color:", ";position:relative;height:", ";width:", ";display:flex;flex-direction:row;border:none;box-sizing:border-box;box-shadow:", ";background:", ";", " &:focus-within{--eds-input-adornment-color:", ";box-shadow:none;", "}", " ", ""], entities.adornment.typography.color, token.typography.color, token.height, token.width, token.boxShadow, token.background, outlineTemplate(token.outline), (_entities$adornment = entities.adornment) === null || _entities$adornment === void 0 ? void 0 : (_entities$adornment$s = _entities$adornment.states.focus) === null || _entities$adornment$s === void 0 ? void 0 : _entities$adornment$s.outline.color, outlineTemplate(states.focus.outline), disabled && css(["--eds-input-adornment-color:", ";--eds-input-color:", ";cursor:not-allowed;box-shadow:none;"], states.disabled.typography.color, states.disabled.typography.color), readOnly && css({
+    background: states.readOnly.background,
+    boxShadow: states.readOnly.boxShadow
+  }));
+});
+var StyledInput = styled.input.withConfig({
+  displayName: "Input__StyledInput",
+  componentId: "sc-1ykv024-1"
+})(function (_ref2) {
+  var token = _ref2.token,
+      paddingLeft = _ref2.paddingLeft,
+      paddingRight = _ref2.paddingRight;
+  return css(["width:100%;border:none;background:transparent;", " ", " outline:none;padding-left:", ";padding-right:", ";&::placeholder{color:", ";}&:disabled{color:var(--eds-input-color);cursor:not-allowed;}"], spacingsTemplate(token.spacings), typographyMixin(token.typography), paddingLeft, paddingRight, token.entities.placeholder.typography.color);
+});
+var Adornments = styled.div.withConfig({
+  displayName: "Input__Adornments",
+  componentId: "sc-1ykv024-2"
+})(function (_ref3) {
+  var token = _ref3.token;
+  return css(["position:absolute;top:", ";bottom:", ";display:flex;align-items:center;", " color:var(--eds-input-adornment-color);"], token.spacings.top, token.spacings.bottom, typographyMixin(token.entities.adornment.typography));
+});
+var LeftAdornments = styled(Adornments).withConfig({
+  displayName: "Input__LeftAdornments",
+  componentId: "sc-1ykv024-3"
+})(function (_ref4) {
+  var token = _ref4.token;
+  return css(["left:0;padding-left:", ";"], token.entities.adornment.spacings.left);
 });
-var Input = /*#__PURE__*/forwardRef(function Input(_ref2, ref) {
-  var _ref2$variant = _ref2.variant,
-      variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
-      _ref2$disabled = _ref2.disabled,
-      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-      _ref2$type = _ref2.type,
-      type = _ref2$type === void 0 ? 'text' : _ref2$type,
-      other = _objectWithoutProperties(_ref2, _excluded);
-
-  var actualVariant = variant === 'default' ? 'input' : variant;
-  var inputVariant = inputToken[actualVariant];
+var RightAdornments = styled(Adornments).withConfig({
+  displayName: "Input__RightAdornments",
+  componentId: "sc-1ykv024-4"
+})(function (_ref5) {
+  var token = _ref5.token;
+  return css(["right:0;padding-right:", ";"], token.entities.adornment.spacings.right);
+});
+var Input = /*#__PURE__*/forwardRef(function Input(_ref6, ref) {
+  var variant = _ref6.variant,
+      _ref6$disabled = _ref6.disabled,
+      disabled = _ref6$disabled === void 0 ? false : _ref6$disabled,
+      _ref6$type = _ref6.type,
+      type = _ref6$type === void 0 ? 'text' : _ref6$type,
+      leftAdornments = _ref6.leftAdornments,
+      rightAdornments = _ref6.rightAdornments,
+      readOnly = _ref6.readOnly,
+      className = _ref6.className,
+      style = _ref6.style,
+      leftAdornmentsProps = _ref6.leftAdornmentsProps,
+      rightAdornmentsProps = _ref6.rightAdornmentsProps,
+      leftAdornmentsWidth = _ref6.leftAdornmentsWidth,
+      rightAdornmentsWidth = _ref6.rightAdornmentsWidth,
+      other = _objectWithoutProperties(_ref6, _excluded);
+
+  var inputVariant = inputToken[variant] ? inputToken[variant] : inputToken.input;
 
   var _useEds = useEds(),
       density = _useEds.density;
 
-  var token = useToken({
+  var _token = useToken({
     density: density
-  }, inputVariant);
+  }, inputVariant)();
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      rightAdornmentsRef = _useState2[0],
+      setRightAdornmentsRef = _useState2[1];
+
+  var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      leftAdornmentsRef = _useState4[0],
+      setLeftAdornmentsRef = _useState4[1];
+
+  var token = useCallback(function () {
+    var _leftAdornmentsWidth = leftAdornmentsWidth || (leftAdornmentsRef ? leftAdornmentsRef.clientWidth : 0);
+
+    var _rightAdornmentsWidth = rightAdornmentsWidth || (rightAdornmentsRef ? rightAdornmentsRef.clientWidth : 0);
+
+    return _objectSpread(_objectSpread({}, _token), {}, {
+      spacings: _objectSpread(_objectSpread({}, _token.spacings), {}, {
+        left: "".concat(_leftAdornmentsWidth + parseInt(_token.spacings.left), "px"),
+        right: "".concat(_rightAdornmentsWidth + parseInt(_token.spacings.right), "px")
+      })
+    });
+  }, [leftAdornmentsWidth, leftAdornmentsRef, rightAdornmentsWidth, rightAdornmentsRef, _token])();
 
   var inputProps = _objectSpread({
     ref: ref,
     type: type,
-    disabled: disabled
+    disabled: disabled,
+    readOnly: readOnly,
+    token: token,
+    style: {
+      resize: 'none'
+    }
   }, other);
 
-  return /*#__PURE__*/jsx(ThemeProvider, {
-    theme: token,
-    children: /*#__PURE__*/jsx(StyledInput, _objectSpread({}, inputProps))
+  var containerProps = {
+    disabled: disabled,
+    readOnly: readOnly,
+    className: className,
+    style: style,
+    token: token
+  };
+
+  var _leftAdornmentProps = _objectSpread(_objectSpread({}, leftAdornmentsProps), {}, {
+    ref: setLeftAdornmentsRef,
+    token: token
+  });
+
+  var _rightAdornmentProps = _objectSpread(_objectSpread({}, rightAdornmentsProps), {}, {
+    ref: setRightAdornmentsRef,
+    token: token
   });
+
+  return (
+    /*#__PURE__*/
+    // Not using <ThemeProvider> because of cascading styling messing with adornments
+    jsxs(Container, _objectSpread(_objectSpread({}, containerProps), {}, {
+      children: [leftAdornments ? /*#__PURE__*/jsx(LeftAdornments, _objectSpread(_objectSpread({}, _leftAdornmentProps), {}, {
+        children: leftAdornments
+      })) : null, /*#__PURE__*/jsx(StyledInput, _objectSpread({
+        paddingLeft: token.spacings.left,
+        paddingRight: token.spacings.right
+      }, inputProps)), rightAdornments ? /*#__PURE__*/jsx(RightAdornments, _objectSpread(_objectSpread({}, _rightAdornmentProps), {}, {
+        children: rightAdornments
+      })) : null]
+    }))
+  );
 });
 
 export { Input };

package/dist/esm/components/Input/Input.tokens.js

@@ -22,7 +22,8 @@ var _tokens$colors = tokens$1.colors,
     typography = tokens$1.typography,
     shape = tokens$1.shape;
 var input = {
-  minHeight: shape.straight.minHeight,
+  height: shape.straight.minHeight,
+  width: '100%',
   background: background,
   spacings: {
     left: small,
@@ -33,11 +34,34 @@ var input = {
   typography: _objectSpread(_objectSpread({}, typography.input.text), {}, {
     color: static_icons__default.rgba
   }),
+  outline: {
+    type: 'outline',
+    color: 'transparent',
+    width: '1px',
+    style: 'solid',
+    offset: '0px'
+  },
   entities: {
     placeholder: {
       typography: {
         color: static_icons__tertiary.rgba
       }
+    },
+    adornment: {
+      typography: _objectSpread(_objectSpread({}, typography.input.label), {}, {
+        color: static_icons__tertiary.rgba
+      }),
+      spacings: {
+        left: small,
+        right: small
+      },
+      states: {
+        disabled: {
+          typography: {
+            color: disabled__text.rgba
+          }
+        }
+      }
     }
   },
   states: {
@@ -50,15 +74,7 @@ var input = {
       background: 'transparent',
       boxShadow: 'none'
     },
-    active: {
-      outline: {
-        type: 'outline',
-        color: 'transparent',
-        width: '1px',
-        style: 'solid',
-        offset: '0px'
-      }
-    },
+    active: {},
     focus: {
       outline: {
         type: 'outline',
@@ -72,7 +88,7 @@ var input = {
   boxShadow: 'inset 0px -1px 0px 0px ' + static_icons__tertiary.rgba,
   modes: {
     compact: {
-      minHeight: shape._modes.compact.straight.minHeight,
+      height: shape._modes.compact.straight.minHeight,
       spacings: {
         left: x_small,
         right: x_small,
@@ -83,70 +99,82 @@ var input = {
   }
 };
 var error = mergeDeepRight(input, {
-  boxShadow: 'inset 0px -1px 0px 0px transparent',
+  boxShadow: 'none',
+  outline: {
+    color: danger__resting.rgba
+  },
   states: {
-    active: {
-      outline: {
-        type: 'outline',
-        color: danger__resting.rgba,
-        width: '1px',
-        style: 'solid',
-        offset: '0px'
-      }
-    },
     focus: {
       outline: {
-        type: 'outline',
-        width: '2px',
-        color: danger__hover.rgba,
-        style: 'solid',
-        offset: '0px'
+        color: danger__hover.rgba
+      }
+    }
+  },
+  entities: {
+    adornment: {
+      typography: _objectSpread(_objectSpread({}, typography.input.label), {}, {
+        color: danger__resting.rgba
+      }),
+      states: {
+        focus: {
+          outline: {
+            color: danger__hover.rgba
+          }
+        }
       }
     }
   }
 });
 var warning = mergeDeepRight(input, {
-  boxShadow: 'inset 0px -1px 0px 0px transparent',
+  boxShadow: 'none',
+  outline: {
+    color: warning__resting.rgba
+  },
   states: {
-    active: {
-      outline: {
-        type: 'outline',
-        color: warning__resting.rgba,
-        width: '1px',
-        style: 'solid',
-        offset: '0px'
-      }
-    },
     focus: {
       outline: {
-        type: 'outline',
-        width: '2px',
-        color: warning__hover.rgba,
-        style: 'solid',
-        offset: '0px'
+        color: warning__hover.rgba
+      }
+    }
+  },
+  entities: {
+    adornment: {
+      typography: _objectSpread(_objectSpread({}, typography.input.label), {}, {
+        color: warning__resting.rgba
+      }),
+      states: {
+        focus: {
+          outline: {
+            color: warning__hover.rgba
+          }
+        }
       }
     }
   }
 });
 var success = mergeDeepRight(input, {
-  boxShadow: 'inset 0px -1px 0px 0px transparent',
+  boxShadow: 'none',
+  outline: {
+    color: success__resting.rgba
+  },
   states: {
-    active: {
-      outline: {
-        type: 'outline',
-        color: success__resting.rgba,
-        width: '1px',
-        style: 'solid',
-        offset: '0px'
-      }
-    },
     focus: {
       outline: {
-        type: 'outline',
-        width: '2px',
-        color: success__hover.rgba,
-        style: 'solid',
-        offset: '0px'
+        color: success__hover.rgba
+      }
+    }
+  },
+  entities: {
+    adornment: {
+      typography: _objectSpread(_objectSpread({}, typography.input.label), {}, {
+        color: success__resting.rgba
+      }),
+      states: {
+        focus: {
+          outline: {
+            color: success__hover.rgba
+          }
+        }
       }
     }
   }