@splunk/react-ui 4.3.0 → 4.5.0

package/Text.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 116);
+/******/ 	return __webpack_require__(__webpack_require__.s = 122);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,21 +101,48 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 101:
+/***/ 104:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-icons/Search");
+module.exports = require("@splunk/react-ui/ControlGroup");
 
 /***/ }),
 
-/***/ 102:
+/***/ 105:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash/startCase");
+module.exports = require("@splunk/react-icons/Search");
+
+/***/ }),
+
+/***/ 11:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return updateReactRef; });
+/**
+ * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
+ *
+ * @param ref - The React callback or object ref. Can be `null` or `undefined`.
+ * @param current - The new value of the ref.
+ */
+function updateReactRef(ref, current) {
+  if (ref) {
+    if (typeof ref === 'function') {
+      ref(current);
+    } else {
+      // the public signature of this util uses React.Ref<T> to mirror the way React types refs.
+      // the intention here is to signal "we will take care of setting 'current', not you".
+      ref.current = current; // eslint-disable-line no-param-reassign
+    }
+  }
+}
+
+
 
 /***/ }),
 
-/***/ 116:
+/***/ 122:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -133,28 +160,31 @@ var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_)
 var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
-// EXTERNAL MODULE: external "react-event-listener"
-var external_react_event_listener_ = __webpack_require__(15);
-var external_react_event_listener_default = /*#__PURE__*/__webpack_require__.n(external_react_event_listener_);
-
 // EXTERNAL MODULE: external "lodash"
 var external_lodash_ = __webpack_require__(4);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/style"
-var style_ = __webpack_require__(40);
+var style_ = __webpack_require__(39);
+
+// EXTERNAL MODULE: external "@splunk/react-ui/EventListener"
+var EventListener_ = __webpack_require__(14);
+var EventListener_default = /*#__PURE__*/__webpack_require__.n(EventListener_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
-var ScreenReaderContent_ = __webpack_require__(14);
+var ScreenReaderContent_ = __webpack_require__(15);
 var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
 
 // EXTERNAL MODULE: external "@splunk/themes"
 var themes_ = __webpack_require__(0);
 
+// EXTERNAL MODULE: external "@splunk/react-ui/ControlGroup"
+var ControlGroup_ = __webpack_require__(104);
+
 // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
 var i18n_ = __webpack_require__(5);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/Search"
-var Search_ = __webpack_require__(101);
+var Search_ = __webpack_require__(105);
 var Search_default = /*#__PURE__*/__webpack_require__.n(Search_);
 
 // EXTERNAL MODULE: ./src/icons/ThemedIcon.tsx
@@ -201,7 +231,7 @@ function Search(props) {
   }, props));
 }
 // EXTERNAL MODULE: ./src/icons/CrossMark.tsx
-var CrossMark = __webpack_require__(21);
+var CrossMark = __webpack_require__(22);
 
 // CONCATENATED MODULE: ./src/Text/syncHeightWithShadow.ts
 // This file was adapted from [Call-Em-All's material-ui](https://github.com/mui-org/material-ui),
@@ -279,10 +309,10 @@ function syncHeightWithShadow(_ref) {
   return false;
 }
 // EXTERNAL MODULE: ./src/utils/updateReactRef.ts
-var updateReactRef = __webpack_require__(12);
+var updateReactRef = __webpack_require__(11);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/SVG"
-var SVG_ = __webpack_require__(22);
+var SVG_ = __webpack_require__(23);
 var SVG_default = /*#__PURE__*/__webpack_require__.n(SVG_);
 
 // CONCATENATED MODULE: ./src/Text/IconOutlinedHide.tsx
@@ -301,7 +331,7 @@ function IconOutlinedHide(props) {
   if (family === 'enterprise') {
     return /*#__PURE__*/external_react_default.a.createElement(SVG_default.a, IconOutlinedHide_extends({
       viewBox: "0 0 24 24",
-      size: 1,
+      size: 1.2,
       screenReaderText: Object(i18n_["_"])('Hide password')
     }, props), /*#__PURE__*/external_react_default.a.createElement("path", {
       fillRule: "evenodd",
@@ -357,7 +387,7 @@ function IconOutlinedView(props) {
   if (family === 'enterprise') {
     return /*#__PURE__*/external_react_default.a.createElement(SVG_default.a, IconOutlinedView_extends({
       viewBox: "0 0 24 24",
-      size: 1,
+      size: 1.2,
       screenReaderText: Object(i18n_["_"])('View password')
     }, props), /*#__PURE__*/external_react_default.a.createElement("path", {
       fillRule: "evenodd",
@@ -395,10 +425,6 @@ function IconOutlinedView(props) {
 }
 
 /* harmony default export */ var Text_IconOutlinedView = (IconOutlinedView);
-// EXTERNAL MODULE: external "lodash/startCase"
-var startCase_ = __webpack_require__(102);
-var startCase_default = /*#__PURE__*/__webpack_require__.n(startCase_);
-
 // EXTERNAL MODULE: external "styled-components"
 var external_styled_components_ = __webpack_require__(3);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
@@ -408,7 +434,7 @@ var Box_ = __webpack_require__(8);
 var Box_default = /*#__PURE__*/__webpack_require__.n(Box_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Button"
-var Button_ = __webpack_require__(16);
+var Button_ = __webpack_require__(17);
 var Button_default = /*#__PURE__*/__webpack_require__.n(Button_);
 
 // CONCATENATED MODULE: ./src/Text/TextStyles.ts
@@ -416,210 +442,135 @@ var Button_default = /*#__PURE__*/__webpack_require__.n(Button_);
 
 
 
-
-
-var TextStyles_addPadding = function addPadding(property, type, base) {
-  return Object(external_styled_components_["css"])(["", ":", ";"],
-  /* sc-prop */
-  property, function (_ref) {
-    var $customStyle = _ref.$customStyle;
-    var custom = $customStyle && $customStyle["padding".concat(startCase_default()(type))] || '0px';
-    return custom ? Object(external_styled_components_["css"])(["calc(", " + ", ")"], base, custom) : base;
-  });
-};
-
-var leftIconPadding = Object(external_styled_components_["css"])(["", ""], function (props) {
-  var padding = Object(themes_["pick"])({
-    prisma: {
-      compact: '35px',
-      comfortable: '39px'
-    }
-  });
-
-  if (padding) {
-    var paddingResult = padding(props);
-    return TextStyles_addPadding('padding-left', 'left', paddingResult);
-  }
-
-  return '';
-});
-var rightIconPadding = Object(external_styled_components_["css"])(["", ""], function (props) {
-  var padding = Object(themes_["pick"])({
-    enterprise: {
-      comfortable: '28px',
-      compact: '24px'
-    },
-    prisma: {
-      comfortable: '40px',
-      compact: '36px'
-    }
-  });
-
-  if (padding) {
-    var paddingResult = padding(props);
-    return TextStyles_addPadding('padding-right', 'right', paddingResult);
-  }
-
-  return '';
-});
-var disabledStyles = Object(external_styled_components_["css"])(["&,&[type]{color:", ";&::placeholder{color:", ";}", " box-shadow:inset 0 1px 2px rgba(0,0,0,0.025);cursor:not-allowed;}"], Object(themes_["pick"])({
+var disabledStyles = Object(external_styled_components_["css"])(["&,&[type]{cursor:not-allowed;color:", ";&::placeholder{color:", ";}}"], Object(themes_["pick"])({
   enterprise: themes_["variables"].textDisabledColor,
   prisma: themes_["variables"].contentColorDisabled
 }), Object(themes_["pick"])({
   enterprise: themes_["variables"].textDisabledColor,
   prisma: themes_["variables"].contentColorDisabled
-}), Object(themes_["pick"])({
-  enterprise: {
-    light: Object(external_styled_components_["css"])(["background-color:", ";border-color:", ";"], themes_["variables"].gray96, themes_["variables"].gray92),
-    dark: Object(external_styled_components_["css"])(["background-color:", ";border-color:", ";"], themes_["variables"].gray22, themes_["variables"].gray30)
-  },
-  prisma: Object(external_styled_components_["css"])(["border-color:", ";"], themes_["variables"].interactiveColorBorderDisabled)
 }));
-var StyledClearButton = external_styled_components_default()(Button_default.a).withConfig({
-  displayName: "TextStyles__StyledClearButton",
-  componentId: "eg7n6t-0"
-})(["", ";border-radius:", ";cursor:pointer;font-size:0.83333em;position:absolute;top:", ";visibility:hidden;z-index:1;", " &:not([disabled]){color:", ";}", ""], themes_["mixins"].reset('inline'), Object(themes_["pick"])({
+var buttonStyles = Object(external_styled_components_["css"])(["border-radius:", ";cursor:pointer;font-size:0.83333em;flex-grow:0;", ";&:not([disabled]){color:", ";}"], Object(themes_["pick"])({
   enterprise: themes_["variables"].borderRadius,
   prisma: '50%'
 }), Object(themes_["pick"])({
-  enterprise: '1px',
+  enterprise: Object(external_styled_components_["css"])(["width:", ";height:", ";"], themes_["variables"].inputHeight, themes_["variables"].inputHeight),
   prisma: {
-    comfortable: '8px',
-    compact: '6px'
+    comfortable: Object(external_styled_components_["css"])(["width:26px;min-width:26px;min-height:26px;margin:8px;padding:0;"]),
+    compact: Object(external_styled_components_["css"])(["width:22px;min-width:22px;min-height:22px;margin:8px;padding:0;"])
   }
 }), Object(themes_["pick"])({
   enterprise: {
-    comfortable: Object(external_styled_components_["css"])(["height:30px;width:30px;"]),
-    compact: Object(external_styled_components_["css"])(["height:26px;width:26px;"])
+    light: themes_["variables"].gray60,
+    dark: themes_["variables"].white
   },
-  prisma: {
-    comfortable: Object(external_styled_components_["css"])(["height:24px;width:24px;"]),
-    compact: Object(external_styled_components_["css"])(["height:20px;width:20px;"])
-  }
-}), Object(themes_["pick"])({
+  prisma: themes_["variables"].contentColorDefault
+}));
+var StyledClearButton = external_styled_components_default()(Button_default.a).withConfig({
+  displayName: "TextStyles__StyledClearButton",
+  componentId: "eg7n6t-0"
+})(["display:none;visibility:hidden;", ""], buttonStyles);
+var StyledSearchIconWrapper = external_styled_components_default.a.span.withConfig({
+  displayName: "TextStyles__StyledSearchIconWrapper",
+  componentId: "eg7n6t-1"
+})(["", ";color:", ";pointer-events:none;padding:", ";&[disabled]{", ";}"], themes_["mixins"].reset('inline-block'), Object(themes_["pick"])({
   enterprise: {
     light: themes_["variables"].gray60,
     dark: themes_["variables"].white
   },
-  prisma: themes_["variables"].contentColorDefault
-}), function (props) {
-  var padding = Object(themes_["pick"])({
-    enterprise: '1px',
-    prisma: '8px'
-  });
-
-  if (padding) {
-    var paddingResult = padding(props);
-    return TextStyles_addPadding('right', 'right', paddingResult);
-  }
-
-  return '';
-});
+  prisma: themes_["variables"].contentColorMuted
+}), Object(themes_["pick"])({
+  comfortable: '0 8px',
+  compact: '0 6px'
+}), Object(themes_["pick"])({
+  prisma: Object(external_styled_components_["css"])(["color:", ";"], themes_["variables"].contentColorDisabled)
+}));
 var StyledBox = external_styled_components_default()(Box_default.a).withConfig({
   displayName: "TextStyles__StyledBox",
-  componentId: "eg7n6t-1"
-})(["flex-grow:1;flex-shrink:1;position:relative;&[data-inline]{width:230px;flex-basis:230px;[data-inline] + &{margin-left:", ";}}", " ", " ", ""], Object(themes_["pick"])({
+  componentId: "eg7n6t-2"
+})(["display:flex;justify-content:space-between;flex-grow:1;flex-shrink:1;position:relative;&[data-inline]{width:230px;flex-basis:230px;[data-inline] + &{margin-left:", ";}}&:focus-within:not([disabled]){", "{", "}", "{visibility:visible;display:block;}}", ""], Object(themes_["pick"])({
   enterprise: themes_["variables"].spacingHalf,
   prisma: themes_["variables"].spacingSmall
-}), function (_ref2) {
-  var $showClearIconFocused = _ref2.$showClearIconFocused;
-  return $showClearIconFocused && Object(external_styled_components_["css"])([":focus-within ", "{visibility:visible;}"],
-  /* sc-sel */
-  StyledClearButton);
-}, function (_ref3) {
-  var $showClearIconForSearchAppearance = _ref3.$showClearIconForSearchAppearance;
-  return $showClearIconForSearchAppearance && Object(external_styled_components_["css"])(["", "{visibility:visible;}"],
-  /* sc-sel */
-  StyledClearButton);
-}, function (_ref4) {
-  var $isTimeInput = _ref4.$isTimeInput;
+}),
+/* sc-sel */
+StyledSearchIconWrapper, Object(themes_["pick"])({
+  enterprise: Object(external_styled_components_["css"])(["display:none;"])
+}),
+/* sc-sel */
+StyledClearButton, function (_ref) {
+  var $isTimeInput = _ref.$isTimeInput;
   return $isTimeInput && Object(external_styled_components_["css"])(["@media screen and (min--moz-device-pixel-ratio:0){", "{display:none;}}"],
   /* sc-sel */
   StyledClearButton);
 });
-var StyledVisibilityToggle = external_styled_components_default.a.button.withConfig({
-  displayName: "TextStyles__StyledVisibilityToggle",
-  componentId: "eg7n6t-2"
-})(["", ";position:absolute;padding:", ";top:", ";border-radius:", ";right:", ";color:", ";cursor:pointer;z-index:1;&:hover{color:", ";background-color:", ";", "}&:focus{box-shadow:", ";", "}"], themes_["mixins"].reset('inline'), Object(themes_["pick"])({
+var StyledInputWrapper = external_styled_components_default.a.span.withConfig({
+  displayName: "TextStyles__StyledInputWrapper",
+  componentId: "eg7n6t-3"
+})(["", ";flex-grow:1;min-height:", ";position:relative;overflow:hidden;border:1px solid ", ";border-radius:", ";box-sizing:border-box;background-color:", ";box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);padding:", ";align-items:center;", " ", " &:hover:not([disabled]){border-color:", ";}&:focus-within:not([disabled]){", "}", " ", " ", " ", " ", ""], themes_["mixins"].reset('inline-flex'), themes_["variables"].inputHeight, Object(themes_["pick"])({
   enterprise: {
-    comfortable: '5px 8px',
-    compact: '3px 7px'
+    light: themes_["variables"].gray60,
+    dark: themes_["variables"].gray20
   },
-  prisma: {
-    comfortable: '2px',
-    compact: '1px'
-  }
-}), Object(themes_["pick"])({
-  enterprise: '1px',
-  prisma: {
-    comfortable: '6px',
-    compact: '5px'
-  }
-}), Object(themes_["pick"])({
-  enterprise: themes_["variables"].borderRadius,
-  prisma: '50%'
-}), Object(themes_["pick"])({
-  enterprise: '1px',
-  prisma: '8px'
-}), Object(themes_["pick"])({
-  enterprise: themes_["variables"].textGray,
-  prisma: themes_["variables"].contentColorMuted
-}), Object(themes_["pick"])({
-  light: themes_["variables"].linkColor,
-  dark: themes_["variables"].white
-}), Object(themes_["pick"])({
-  enterprise: themes_["variables"].backgroundColorHover,
-  prisma: themes_["variables"].interactiveColorOverlayHover
-}), Object(themes_["pick"])({
-  prisma: Object(external_styled_components_["css"])(["box-shadow:", ";"], themes_["variables"].hoverShadow)
-}), themes_["variables"].focusShadow, Object(themes_["pick"])({
-  prisma: Object(external_styled_components_["css"])(["background-color:", ";"], themes_["variables"].interactiveColorOverlayHover)
-}));
-/* Some of these need greater specificity than input[type=text] */
-
-var StyledInput = external_styled_components_default.a.input.withConfig({
-  displayName: "TextStyles__StyledInput",
-  componentId: "eg7n6t-3"
-})(["&,&[type]{background-color:", ";border:1px solid ", ";border-radius:", ";box-sizing:border-box;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);color:", ";display:block;font-family:", ";font-size:inherit;height:inherit;line-height:inherit;margin:0;min-height:", ";width:100%;", " ", "   ", " &[type=\"time\"]{&::-webkit-calendar-picker-indicator{display:none;}height:", ";@media screen and (min--moz-device-pixel-ratio:0){padding-right:", "}}position:relative;", " ", " &:hover:not([disabled]){border-color:", ";}&:focus:not([disabled]){", " outline:0;border-collapse:separate;z-index:1;}", " &::-ms-clear{display:none;width:0;height:0;}&::placeholder{color:", ";opacity:1;}", " ", "}textarea&{resize:none;overflow:auto;}"], Object(themes_["pick"])({
+  prisma: themes_["variables"].interactiveColorBorder
+}), themes_["variables"].borderRadius, Object(themes_["pick"])({
   enterprise: {
     light: themes_["variables"].white,
     dark: themes_["variables"].gray22
   },
   prisma: themes_["variables"].transparent
 }), Object(themes_["pick"])({
+  enterprise: '0px 10px',
+  prisma: '0px 14px'
+}), function (_ref2) {
+  var $hasEndAdornment = _ref2.$hasEndAdornment;
+  return $hasEndAdornment && Object(external_styled_components_["css"])(["padding-right:0;"]);
+}, function (_ref3) {
+  var $hasStartAdornment = _ref3.$hasStartAdornment;
+  return $hasStartAdornment && Object(external_styled_components_["css"])(["padding-left:0;"]);
+}, Object(themes_["pick"])({
   enterprise: {
     light: themes_["variables"].gray60,
     dark: themes_["variables"].gray20
   },
-  prisma: themes_["variables"].interactiveColorBorder
-}), themes_["variables"].borderRadius, Object(themes_["pick"])({
-  enterprise: themes_["variables"].textColor,
-  prisma: themes_["variables"].contentColorActive
-}), themes_["variables"].sansFontFamily, themes_["variables"].inputHeight, Object(themes_["pick"])({
-  enterprise: {
-    comfortable: Object(external_styled_components_["css"])(["padding-top:", ";padding-bottom:", ";"], themes_["variables"].spacingQuarter, themes_["variables"].spacingQuarter),
-    compact: Object(external_styled_components_["css"])(["padding-top:3px;padding-bottom:3px;"])
-  },
-  prisma: {
-    comfortable: Object(external_styled_components_["css"])(["padding-top:7px;padding-bottom:7px;"]),
-    compact: Object(external_styled_components_["css"])(["padding-top:5px;padding-bottom:5px;"])
-  }
-}), function (props) {
-  var padding = Object(themes_["pick"])({
-    enterprise: themes_["variables"].spacingHalf,
-    prisma: '14px'
+  prisma: themes_["variables"].interactiveColorBorderHover
+}), Object(themes_["pick"])({
+  enterprise: Object(external_styled_components_["css"])(["box-shadow:", ";color:", ";"], themes_["variables"].focusShadow, themes_["variables"].textColor),
+  prisma: Object(external_styled_components_["css"])(["border-color:", ";color:", ";"], themes_["variables"].interactiveColorPrimary, themes_["variables"].contentColorActive)
+}), function (_ref4) {
+  var $error = _ref4.$error;
+  return $error && Object(external_styled_components_["css"])(["&,&:hover{border-color:", ";}"], Object(themes_["pick"])({
+    enterprise: themes_["variables"].errorColor,
+    prisma: themes_["variables"].accentColorNegative
+  }));
+}, function (_ref5) {
+  var $append = _ref5.$append;
+  return $append && Object(external_styled_components_["css"])(["margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;"]);
+}, function (_ref6) {
+  var $prepend = _ref6.$prepend;
+  return $prepend && Object(external_styled_components_["css"])(["border-top-left-radius:0;border-bottom-left-radius:0;"]);
+}, function (_ref7) {
+  var disabled = _ref7.disabled;
+  return disabled && Object(external_styled_components_["css"])(["", " box-shadow:inset 0 1px 2px rgba(0,0,0,0.025);"], Object(themes_["pick"])({
+    enterprise: {
+      light: Object(external_styled_components_["css"])(["background-color:", ";border-color:", ";"], themes_["variables"].gray96, themes_["variables"].gray92),
+      dark: Object(external_styled_components_["css"])(["background-color:", ";border-color:", ";"], themes_["variables"].gray22, themes_["variables"].gray30)
+    },
+    prisma: Object(external_styled_components_["css"])(["border-color:", ";"], themes_["variables"].interactiveColorBorderDisabled)
+  }));
+}, function (_ref8) {
+  var $multiline = _ref8.$multiline;
+  return $multiline && Object(themes_["pick"])({
+    enterprise: Object(external_styled_components_["css"])(["padding-right:0;"])
   });
+});
+/* Some of these need greater specificity than input[type=text] */
 
-  if (padding) {
-    var paddingResult = padding(props);
-    return Object(external_styled_components_["css"])(["", ";", ";"], TextStyles_addPadding('padding-right', 'right', paddingResult), TextStyles_addPadding('padding-left', 'left', paddingResult));
-  }
-
-  return '';
-}, function (_ref5) {
-  var $rightIconPadding = _ref5.$rightIconPadding;
-  return $rightIconPadding && rightIconPadding;
-}, Object(themes_["pick"])({
+var StyledInput = external_styled_components_default.a.input.withConfig({
+  displayName: "TextStyles__StyledInput",
+  componentId: "eg7n6t-4"
+})(["", ";&,&[type]{outline-style:none;border:0;background:transparent;color:", ";flex-grow:1;font-family:", ";font-size:inherit;line-height:inherit;&[type='time']{&::-webkit-calendar-picker-indicator{display:none;}height:", ";@media screen and (min--moz-device-pixel-ratio:0){padding-right:", ";}}position:relative;&::placeholder{color:", ";opacity:1;}", " ", "}textarea&{resize:none;overflow:auto;padding-top:", ";padding-bottom:", ";padding-right:", ";}"], themes_["mixins"].reset('inline-flex'), Object(themes_["pick"])({
+  enterprise: themes_["variables"].textColor,
+  prisma: themes_["variables"].contentColorActive
+}), themes_["variables"].sansFontFamily, Object(themes_["pick"])({
   enterprise: '20px',
   prisma: {
     comfortable: '24px',
@@ -628,95 +579,152 @@ var StyledInput = external_styled_components_default.a.input.withConfig({
 }), Object(themes_["pick"])({
   enterprise: themes_["variables"].spacingHalf,
   prisma: '14px'
-}), function (_ref6) {
-  var $append = _ref6.$append;
-  return $append && Object(external_styled_components_["css"])(["margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;"]);
-}, function (_ref7) {
-  var $prepend = _ref7.$prepend;
-  return $prepend && Object(external_styled_components_["css"])(["border-top-left-radius:0;border-bottom-left-radius:0;"]);
-}, Object(themes_["pick"])({
-  enterprise: {
-    light: themes_["variables"].gray60,
-    dark: themes_["variables"].gray20
-  },
-  prisma: themes_["variables"].interactiveColorBorderHover
-}), Object(themes_["pick"])({
-  enterprise: Object(external_styled_components_["css"])(["box-shadow:", ";color:", ";"], themes_["variables"].focusShadow, themes_["variables"].textColor),
-  prisma: Object(external_styled_components_["css"])(["border-color:", ";color:", ";"], themes_["variables"].interactiveColorPrimary, themes_["variables"].contentColorActive)
-}), function (_ref8) {
-  var $error = _ref8.$error;
-  return $error && Object(external_styled_components_["css"])(["&,&:hover{border-color:", ";color:", ";}"], Object(themes_["pick"])({
-    enterprise: themes_["variables"].errorColor,
-    prisma: themes_["variables"].accentColorNegative
-  }), Object(themes_["pick"])({
+}), themes_["variables"].contentColorMuted, function (_ref9) {
+  var $error = _ref9.$error;
+  return $error && Object(external_styled_components_["css"])(["&,&:hover{color:", ";}"], Object(themes_["pick"])({
     enterprise: themes_["variables"].errorColor,
     prisma: themes_["variables"].contentColorActive
   }));
-}, themes_["variables"].contentColorMuted, function (_ref9) {
-  var disabled = _ref9.disabled;
-  return disabled && disabledStyles;
 }, function (_ref10) {
-  var $search = _ref10.$search;
-  return $search && Object(external_styled_components_["css"])(["", ";", ";"], rightIconPadding, leftIconPadding);
-});
-var StyledSearchIconWrapper = external_styled_components_default.a.span.withConfig({
-  displayName: "TextStyles__StyledSearchIconWrapper",
-  componentId: "eg7n6t-4"
-})(["color:", ";pointer-events:none;position:absolute;z-index:1;", ";&[disabled]{", ";}"], Object(themes_["pick"])({
+  var disabled = _ref10.disabled;
+  return disabled && disabledStyles;
+}, Object(themes_["pick"])({
   enterprise: {
-    light: themes_["variables"].gray60,
-    dark: themes_["variables"].white
+    comfortable: themes_["variables"].spacingQuarter,
+    compact: '3px'
   },
-  prisma: themes_["variables"].contentColorMuted
+  prisma: {
+    comfortable: themes_["variables"].spacingSmall,
+    compact: '5px'
+  }
 }), Object(themes_["pick"])({
   enterprise: {
-    comfortable: Object(external_styled_components_["css"])(["top:8px;right:8px;"]),
-    compact: Object(external_styled_components_["css"])(["top:6px;right:6px;"])
+    comfortable: themes_["variables"].spacingQuarter,
+    compact: '3px'
   },
   prisma: {
-    comfortable: Object(external_styled_components_["css"])(["top:8px;left:8px;"]),
-    compact: Object(external_styled_components_["css"])(["top:6px;left:8px;"])
+    comfortable: themes_["variables"].spacingSmall,
+    compact: '5px'
   }
 }), Object(themes_["pick"])({
-  prisma: Object(external_styled_components_["css"])(["color:", ";"], themes_["variables"].contentColorDisabled)
+  enterprise: '10px',
+  prisma: '14px'
 }));
+var StyledVisibilityToggle = external_styled_components_default()(Button_default.a).withConfig({
+  displayName: "TextStyles__StyledVisibilityToggle",
+  componentId: "eg7n6t-5"
+})(["", ""], buttonStyles);
 var StyledPlaceholder = external_styled_components_default.a.span.withConfig({
   displayName: "TextStyles__StyledPlaceholder",
-  componentId: "eg7n6t-5"
-})(["color:", ";position:absolute;max-width:100%;font-size:inherit;line-height:inherit;z-index:1;", ";"], Object(themes_["pick"])({
+  componentId: "eg7n6t-6"
+})(["pointer-events:none;color:", ";position:absolute;overflow:hidden;font-size:inherit;line-height:inherit;height:", ";margin-right:", ";", ";", ";", ""], Object(themes_["pick"])({
   enterprise: themes_["variables"].textGray,
   prisma: themes_["variables"].contentColorMuted
-}), Object(themes_["pick"])({
+}), themes_["variables"].lineHeight, Object(themes_["pick"])({
+  enterprise: '10px',
+  prisma: '14px'
+}), function (_ref11) {
+  var $hasStartAdornment = _ref11.$hasStartAdornment,
+      $startAdornmentWidth = _ref11.$startAdornmentWidth;
+  return $hasStartAdornment && ($startAdornmentWidth ? Object(external_styled_components_["css"])(["margin-left:", "px;"], $startAdornmentWidth) : Object(external_styled_components_["css"])(["margin-left:", ";"], Object(themes_["pick"])({
+    enterprise: {
+      comfortable: '30px',
+      compact: '26px'
+    },
+    prisma: {
+      comfortable: '38px',
+      compact: '30px'
+    }
+  })));
+}, function (_ref12) {
+  var $hasEndAdornment = _ref12.$hasEndAdornment,
+      $endAdornmentWidth = _ref12.$endAdornmentWidth;
+  return $hasEndAdornment && ($endAdornmentWidth // calc(100% - padding - adorment width)
+  ? Object(external_styled_components_["css"])(["max-width:calc( 100% - ", " - ", "px );"], Object(themes_["pick"])({
+    enterprise: '10px',
+    prisma: '14px'
+  }), $endAdornmentWidth) : Object(external_styled_components_["css"])(["max-width:calc( 100% - ", " - ", " );"], Object(themes_["pick"])({
+    enterprise: '10px',
+    prisma: '14px'
+  }), Object(themes_["pick"])({
+    enterprise: {
+      comfortable: '30px',
+      compact: '26px'
+    },
+    prisma: {
+      comfortable: '38px',
+      compact: '30px'
+    }
+  })));
+}, function (_ref13) {
+  var $hasBothAdornment = _ref13.$hasBothAdornment,
+      $endAdornmentWidth = _ref13.$endAdornmentWidth,
+      $startAdornmentWidth = _ref13.$startAdornmentWidth;
+  return $hasBothAdornment && Object(external_styled_components_["css"])(["max-width:calc(100% - ", "px - ", "px);"], $startAdornmentWidth, $endAdornmentWidth);
+});
+var adornmentHolder = Object(external_styled_components_["css"])(["display:inline-flex;align-items:center;justify-content:center;height:", ";pointer-events:none;"], Object(themes_["pick"])({
   enterprise: {
-    comfortable: Object(external_styled_components_["css"])(["top:7px;", ""], function (props) {
-      var padding = props.$renderSearchIcon ? Object(themes_["pick"])({
-        enterprise: '11px',
-        prisma: '40px'
-      }) : Object(themes_["pick"])({
-        enterprise: '11px',
-        prisma: '16px'
-      });
-
-      if (padding) {
-        var paddingResult = padding(props);
-        return TextStyles_addPadding('left', 'left', paddingResult);
-      }
-
-      return '';
-    }),
-    compact: Object(external_styled_components_["css"])(["top:5px;", ";"], TextStyles_addPadding('left', 'left', '7px'))
+    comfortable: '30px',
+    compact: '26px'
   },
   prisma: {
-    comfortable: Object(external_styled_components_["css"])(["top:10px;left:", ";"], function (_ref11) {
-      var $renderSearchIcon = _ref11.$renderSearchIcon;
-      return $renderSearchIcon ? '40px' : '14px';
-    }),
-    compact: Object(external_styled_components_["css"])(["top:6px;left:", ";"], function (_ref12) {
-      var $renderSearchIcon = _ref12.$renderSearchIcon;
-      return $renderSearchIcon ? '40px' : '14px';
-    })
+    comfortable: '38px',
+    compact: '30px'
   }
 }));
+var StyledStartAdornmentHolder = external_styled_components_default.a.div.withConfig({
+  displayName: "TextStyles__StyledStartAdornmentHolder",
+  componentId: "eg7n6t-7"
+})(["", " ", ";"], adornmentHolder, function (_ref14) {
+  var $width = _ref14.$width;
+  return $width ? Object(external_styled_components_["css"])(["min-width:", "px;"], $width) : Object(external_styled_components_["css"])(["min-width:", ";"], Object(themes_["pick"])({
+    enterprise: {
+      comfortable: '30px',
+      compact: '26px'
+    },
+    prisma: {
+      comfortable: '38px',
+      compact: '30px'
+    }
+  }));
+});
+var StyledEndAdornmentHolder = external_styled_components_default.a.div.withConfig({
+  displayName: "TextStyles__StyledEndAdornmentHolder",
+  componentId: "eg7n6t-8"
+})(["", " ", ";"], adornmentHolder, function (_ref15) {
+  var $width = _ref15.$width;
+  return $width ? Object(external_styled_components_["css"])(["min-width:", "px;"], $width) : Object(external_styled_components_["css"])(["min-width:", ";"], Object(themes_["pick"])({
+    enterprise: {
+      comfortable: '30px',
+      compact: '26px'
+    },
+    prisma: {
+      comfortable: '38px',
+      compact: '30px'
+    }
+  }));
+});
+var StyledAdornment = external_styled_components_default.a.div.withConfig({
+  displayName: "TextStyles__StyledAdornment",
+  componentId: "eg7n6t-9"
+})(["display:inline-flex;align-items:center;justify-content:center;position:absolute;pointer-events:none;z-index:1;height:", ";", ";", ";", ""], Object(themes_["pick"])({
+  enterprise: {
+    comfortable: '30px',
+    compact: '26px'
+  },
+  prisma: {
+    comfortable: '38px',
+    compact: '30px'
+  }
+}), function (_ref16) {
+  var $position = _ref16.$position;
+  return $position === 'start' ? Object(external_styled_components_["css"])(["top:1px;left:1px;"]) : Object(external_styled_components_["css"])(["top:1px;right:1px;"]);
+}, function (_ref17) {
+  var disabled = _ref17.disabled;
+  return disabled && disabledStyles;
+}, Object(themes_["pick"])({
+  enterprise: Object(external_styled_components_["css"])(["margin-left:-1px;margin-right:-1px;"])
+}));
 
 // CONCATENATED MODULE: ./src/Text/Text.tsx
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -780,6 +788,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
+
 /** @public */
 
 var propTypes = {
@@ -798,6 +807,7 @@ var propTypes = {
   describedBy: external_prop_types_default.a.string,
   disabled: external_prop_types_default.a.bool,
   elementRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
+  endAdornment: external_prop_types_default.a.node,
   error: external_prop_types_default.a.bool,
   inline: external_prop_types_default.a.bool,
 
@@ -805,9 +815,6 @@ var propTypes = {
   inputClassName: external_prop_types_default.a.string,
   inputId: external_prop_types_default.a.string,
   inputRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
-
-  /** @private */
-  inputStyle: external_prop_types_default.a.object,
   labelledBy: external_prop_types_default.a.string,
   maxLength: external_prop_types_default.a.number,
   multiline: external_prop_types_default.a.bool,
@@ -823,10 +830,11 @@ var propTypes = {
   rowsMin: external_prop_types_default.a.number,
   spellCheck: external_prop_types_default.a.bool,
   tabIndex: external_prop_types_default.a.number,
+  startAdornment: external_prop_types_default.a.node,
 
   /** @private */
   splunkTheme: external_prop_types_default.a.object,
-  type: external_prop_types_default.a.oneOf(['password', 'text', 'time']),
+  type: external_prop_types_default.a.string,
   passwordVisibilityToggle: external_prop_types_default.a.bool,
   useSyntheticPlaceholder: external_prop_types_default.a.bool,
   value: external_prop_types_default.a.string
@@ -839,7 +847,6 @@ var defaultProps = {
   disabled: false,
   error: false,
   inline: false,
-  inputStyle: {},
   multiline: false,
   placeholder: '',
   prepend: false,
@@ -847,8 +854,7 @@ var defaultProps = {
   rowsMin: 2,
   tabIndex: 0,
   type: 'text',
-  passwordVisibilityToggle: false,
-  useSyntheticPlaceholder: false
+  passwordVisibilityToggle: false
 };
 
 /** Note: Text places role and aria props onto the input. All other props are placed on the wrapper. */
@@ -881,6 +887,30 @@ var Text_Text = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "shadow", null);
 
+    _defineProperty(_assertThisInitialized(_this), "startAdornment", null);
+
+    _defineProperty(_assertThisInitialized(_this), "endAdornment", null);
+
+    _defineProperty(_assertThisInitialized(_this), "getAdornmentWidth", function () {
+      var startIconRect = _this.startAdornment ? _this.startAdornment.getBoundingClientRect() : undefined;
+      var startIconWidth = startIconRect && Math.round(startIconRect.width);
+
+      if (_this.state.startAdornmentWidth !== startIconWidth) {
+        _this.setState({
+          startAdornmentWidth: startIconWidth
+        });
+      }
+
+      var endIconRect = _this.endAdornment ? _this.endAdornment.getBoundingClientRect() : undefined;
+      var endIconWidth = endIconRect && Math.round(endIconRect.width);
+
+      if (_this.state.endAdornmentWidth !== endIconWidth) {
+        _this.setState({
+          endAdornmentWidth: endIconWidth
+        });
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "handleResize", function () {
       _this.syncHeightWithShadow();
     });
@@ -962,10 +992,6 @@ var Text_Text = /*#__PURE__*/function (_Component) {
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handlePlaceholderMouseDown", function () {
-      _this.focus();
-    });
-
     _defineProperty(_assertThisInitialized(_this), "syncHeightWithShadow", function () {
       var newHeight = syncHeightWithShadow({
         height: _this.state.height,
@@ -982,6 +1008,111 @@ var Text_Text = /*#__PURE__*/function (_Component) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "renderEndAdornment", function () {
+      var _controlGroupContext$;
+
+      var _this$props7 = _this.props,
+          appearance = _this$props7.appearance,
+          endAdornment = _this$props7.endAdornment,
+          passwordVisibilityToggle = _this$props7.passwordVisibilityToggle,
+          disabled = _this$props7.disabled,
+          canClear = _this$props7.canClear,
+          splunkTheme = _this$props7.splunkTheme;
+      var isPrisma = splunkTheme.isPrisma;
+      var adornmentProps = {
+        ref: function ref(el) {
+          _this.endAdornment = el;
+        },
+        disabled: disabled,
+        $position: 'end'
+      };
+
+      if (endAdornment) {
+        return /*#__PURE__*/external_react_default.a.createElement(StyledAdornment, adornmentProps, endAdornment);
+      }
+
+      if (passwordVisibilityToggle && !disabled) {
+        var eyeIcon = _this.state.hideVisibility ? /*#__PURE__*/external_react_default.a.createElement(Text_IconOutlinedView, null) : /*#__PURE__*/external_react_default.a.createElement(Text_IconOutlinedHide, null);
+        return /*#__PURE__*/external_react_default.a.createElement(StyledAdornment, adornmentProps, /*#__PURE__*/external_react_default.a.createElement(StyledVisibilityToggle, {
+          appearance: isPrisma ? 'secondary' : 'pill',
+          "data-test": "password-toggle",
+          inline: false,
+          onClick: _this.handleVisibilityToggle,
+          type: "button",
+          icon: eyeIcon
+        }));
+      }
+
+      var controlGroupContext = _this.context;
+      var controlGroupLabel = (_controlGroupContext$ = controlGroupContext.labelAttrs) === null || _controlGroupContext$ === void 0 ? void 0 : _controlGroupContext$.text;
+      var clearButtonText = controlGroupLabel ? Object(i18n_["_"])("Clear ".concat(controlGroupLabel, " text field")) : Object(i18n_["_"])('Clear text field');
+
+      if (!isPrisma && appearance === 'search') {
+        return /*#__PURE__*/external_react_default.a.createElement(StyledAdornment, adornmentProps, /*#__PURE__*/external_react_default.a.createElement(StyledClearButton, {
+          appearance: isPrisma ? 'secondary' : 'pill',
+          "data-test": "clear",
+          inline: false,
+          icon: /*#__PURE__*/external_react_default.a.createElement(CrossMark["a" /* default */], {
+            enterpriseSize: 1,
+            screenReaderText: clearButtonText
+          }),
+          onClick: _this.handleClear
+        }), /*#__PURE__*/external_react_default.a.createElement(StyledSearchIconWrapper, {
+          $disabled: disabled
+        }, /*#__PURE__*/external_react_default.a.createElement(Search, {
+          enterpriseSize: "16px",
+          inline: false
+        })));
+      }
+
+      if (isPrisma && appearance === 'search' || canClear) {
+        return /*#__PURE__*/external_react_default.a.createElement(StyledAdornment, adornmentProps, /*#__PURE__*/external_react_default.a.createElement(StyledClearButton, {
+          "data-test": "clear",
+          appearance: isPrisma ? 'secondary' : 'pill',
+          onClick: _this.handleClear,
+          icon: /*#__PURE__*/external_react_default.a.createElement(CrossMark["a" /* default */], {
+            inline: false,
+            enterpriseSize: 1,
+            screenReaderText: clearButtonText
+          })
+        }));
+      }
+
+      return undefined;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderStartAdornment", function () {
+      var _this$props8 = _this.props,
+          appearance = _this$props8.appearance,
+          startAdornment = _this$props8.startAdornment,
+          splunkTheme = _this$props8.splunkTheme,
+          disabled = _this$props8.disabled;
+      var isPrisma = splunkTheme.isPrisma;
+      var adornmentProps = {
+        ref: function ref(el) {
+          _this.startAdornment = el;
+        },
+        disabled: disabled,
+        $position: 'start'
+      };
+
+      if (startAdornment) {
+        return /*#__PURE__*/external_react_default.a.createElement(StyledAdornment, adornmentProps, startAdornment);
+      }
+
+      if (isPrisma && appearance === 'search') {
+        return /*#__PURE__*/external_react_default.a.createElement(StyledAdornment, adornmentProps, /*#__PURE__*/external_react_default.a.createElement(StyledSearchIconWrapper, {
+          $disabled: disabled
+        }, /*#__PURE__*/external_react_default.a.createElement(Search, {
+          enterpriseSize: "16px",
+          inline: false,
+          screenReaderText: "Search"
+        })));
+      }
+
+      return undefined;
+    });
+
     _this.controlledExternally = Object(external_lodash_["has"])(props, 'value');
     _this.state = {
       value: props.defaultValue || '',
@@ -992,6 +1123,11 @@ var Text_Text = /*#__PURE__*/function (_Component) {
 
     if (false) {}
 
+    if (Object(external_lodash_["has"])(props, 'useSyntheticPlaceholder')) {
+      // eslint-disable-next-line no-console
+      console.warn("The 'Text' prop 'useSyntheticPlaceholder' has been marked for deprecation.");
+    }
+
     Text.validateRows(props);
     _this.handleResize = Object(external_lodash_["throttle"])(_this.handleResize, 100);
     return _this;
@@ -1001,6 +1137,8 @@ var Text_Text = /*#__PURE__*/function (_Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       Object(external_lodash_["defer"])(this.syncHeightWithShadow); // wait for styles to load
+
+      this.getAdornmentWidth();
     }
   }, {
     key: "componentDidUpdate",
@@ -1014,6 +1152,7 @@ var Text_Text = /*#__PURE__*/function (_Component) {
       if (false) {}
 
       Text.validateRows(this.props);
+      this.getAdornmentWidth();
     }
   }, {
     key: "isControlled",
@@ -1050,43 +1189,36 @@ var Text_Text = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this2 = this;
 
-      var _this$props7 = this.props,
-          appearance = _this$props7.appearance,
-          append = _this$props7.append,
-          autoCapitalize = _this$props7.autoCapitalize,
-          autoComplete = _this$props7.autoComplete,
-          autoCorrect = _this$props7.autoCorrect,
-          autoFocus = _this$props7.autoFocus,
-          canClear = _this$props7.canClear,
-          children = _this$props7.children,
-          className = _this$props7.className,
-          classNamePrivate = _this$props7.classNamePrivate,
-          disabled = _this$props7.disabled,
-          describedBy = _this$props7.describedBy,
-          elementRef = _this$props7.elementRef,
-          error = _this$props7.error,
-          inline = _this$props7.inline,
-          inputClassName = _this$props7.inputClassName,
-          inputId = _this$props7.inputId,
-          inputStyle = _this$props7.inputStyle,
-          labelledBy = _this$props7.labelledBy,
-          multiline = _this$props7.multiline,
-          maxLength = _this$props7.maxLength,
-          name = _this$props7.name,
-          passwordVisibilityToggle = _this$props7.passwordVisibilityToggle,
-          placeholder = _this$props7.placeholder,
-          prepend = _this$props7.prepend,
-          spellCheck = _this$props7.spellCheck,
-          splunkTheme = _this$props7.splunkTheme,
-          tabIndex = _this$props7.tabIndex,
-          title = _this$props7.title,
-          type = _this$props7.type,
-          useSyntheticPlaceholder = _this$props7.useSyntheticPlaceholder,
-          value = _this$props7.value,
-          otherProps = _objectWithoutProperties(_this$props7, ["appearance", "append", "autoCapitalize", "autoComplete", "autoCorrect", "autoFocus", "canClear", "children", "className", "classNamePrivate", "disabled", "describedBy", "elementRef", "error", "inline", "inputClassName", "inputId", "inputStyle", "labelledBy", "multiline", "maxLength", "name", "passwordVisibilityToggle", "placeholder", "prepend", "spellCheck", "splunkTheme", "tabIndex", "title", "type", "useSyntheticPlaceholder", "value"]);
-
-      var family = splunkTheme.family;
-      var isPrisma = family === 'prisma';
+      var _this$props9 = this.props,
+          append = _this$props9.append,
+          autoCapitalize = _this$props9.autoCapitalize,
+          autoComplete = _this$props9.autoComplete,
+          autoCorrect = _this$props9.autoCorrect,
+          autoFocus = _this$props9.autoFocus,
+          children = _this$props9.children,
+          className = _this$props9.className,
+          classNamePrivate = _this$props9.classNamePrivate,
+          disabled = _this$props9.disabled,
+          describedBy = _this$props9.describedBy,
+          elementRef = _this$props9.elementRef,
+          error = _this$props9.error,
+          inline = _this$props9.inline,
+          inputClassName = _this$props9.inputClassName,
+          inputId = _this$props9.inputId,
+          labelledBy = _this$props9.labelledBy,
+          multiline = _this$props9.multiline,
+          maxLength = _this$props9.maxLength,
+          name = _this$props9.name,
+          passwordVisibilityToggle = _this$props9.passwordVisibilityToggle,
+          placeholder = _this$props9.placeholder,
+          prepend = _this$props9.prepend,
+          spellCheck = _this$props9.spellCheck,
+          tabIndex = _this$props9.tabIndex,
+          title = _this$props9.title,
+          type = _this$props9.type,
+          useSyntheticPlaceholder = _this$props9.useSyntheticPlaceholder,
+          value = _this$props9.value,
+          otherProps = _objectWithoutProperties(_this$props9, ["append", "autoCapitalize", "autoComplete", "autoCorrect", "autoFocus", "children", "className", "classNamePrivate", "disabled", "describedBy", "elementRef", "error", "inline", "inputClassName", "inputId", "labelledBy", "multiline", "maxLength", "name", "passwordVisibilityToggle", "placeholder", "prepend", "spellCheck", "tabIndex", "title", "type", "useSyntheticPlaceholder", "value"]);
 
       var ariaProps = _objectSpread(_objectSpread({}, Object(external_lodash_["pickBy"])(otherProps, function (val, key) {
         return key === 'role' || key.indexOf('aria-') === 0;
@@ -1099,22 +1231,17 @@ var Text_Text = /*#__PURE__*/function (_Component) {
 
       var boxProps = Object(external_lodash_["omit"])(otherProps, ['inputRef', 'onBlur', 'onChange', 'onFocus', 'onKeyDown', 'onSelect', 'rowsMax', 'rowsMin'].concat(_toConsumableArray(Object(external_lodash_["keys"])(ariaProps))));
       var displayValue = this.isControlled() ? value : this.state.value;
-      var clearIconPadding = !disabled && (canClear || appearance === 'search');
-      var reserveIconSpace = displayValue && clearIconPadding || passwordVisibilityToggle || undefined; // These props are used by both the input and its shadow.
-
       var displayProps = {
         className: Object(style_["toClassName"])(className, inputClassName),
         $append: append || undefined,
         $error: error,
-        $prepend: prepend || undefined,
-        value: displayValue
+        $prepend: prepend || undefined
       };
       var passwordVisibility = this.state.hideVisibility ? 'password' : 'text';
       var computedType = passwordVisibilityToggle ? passwordVisibility : type;
 
-      var inputProps = _objectSpread(_objectSpread(_objectSpread({}, displayProps), ariaProps), {}, {
+      var inputProps = _objectSpread(_objectSpread({}, ariaProps), {}, {
         'data-test': 'textbox',
-        $customStyle: inputStyle,
         autoCapitalize: autoCapitalize,
         autoComplete: autoComplete,
         autoCorrect: autoCorrect,
@@ -1131,38 +1258,40 @@ var Text_Text = /*#__PURE__*/function (_Component) {
         ref: this.handleInputMount,
         role: 'textbox',
         spellCheck: spellCheck,
-        style: _objectSpread({
+        style: {
           height: this.state.height
-        }, Object(external_lodash_["omit"])(inputStyle, ['paddingLeft', 'paddingRight'])),
+        },
         title: title,
         tabIndex: tabIndex,
-        type: multiline ? null : computedType
+        type: multiline ? null : computedType,
+        value: displayValue,
+        $error: error
       });
 
-      var haveSyntheticPlaceholder = useSyntheticPlaceholder && placeholder && !displayValue;
-      var searchIconPosition = isPrisma ? 'left' : 'right';
-      var placeholderPadding = appearance === 'search' && (!displayValue && searchIconPosition !== 'left' || searchIconPosition === 'left');
-      var eyeIcon = this.state.hideVisibility ? /*#__PURE__*/external_react_default.a.createElement(Text_IconOutlinedView, null) : /*#__PURE__*/external_react_default.a.createElement(Text_IconOutlinedHide, null);
-      var showClearIconWhenValue = clearIconPadding && !!displayValue;
-      var showClearIconForSearchAppearance = !isPrisma && showClearIconWhenValue && appearance === 'search'; // Do not render value in DOM when type is password, or passwordVisibiltyToggle is enabled
+      var haveSyntheticPlaceholder = useSyntheticPlaceholder && placeholder && !displayValue; // Do not render value in DOM when type is password, or passwordVisibiltyToggle is enabled
 
       var dataTestValue = type === 'password' || passwordVisibilityToggle ? undefined : displayValue; // Firefox hack (SUI-2716). Remove when fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1427173
 
       var isTimeInput = type === 'time';
+      var hasEndAdornment = !!this.renderEndAdornment();
+      var hasStartAdornment = !!this.renderStartAdornment();
       return /*#__PURE__*/external_react_default.a.createElement(StyledBox, Text_extends({
-        $showClearIconFocused: showClearIconWhenValue,
-        $showClearIconForSearchAppearance: showClearIconForSearchAppearance,
         $isTimeInput: isTimeInput,
         className: Object(style_["toClassName"])(className, classNamePrivate),
         "data-test": "text",
         "data-test-value": dataTestValue,
         elementRef: elementRef,
+        flex: true,
         inline: inline
-      }, boxProps), !disabled && multiline && /*#__PURE__*/external_react_default.a.createElement(StyledInput, Text_extends({
-        $customStyle: inputStyle,
-        $search: appearance === 'search',
-        as: "textarea"
-      }, displayProps, {
+      }, boxProps), this.renderStartAdornment(), /*#__PURE__*/external_react_default.a.createElement(StyledInputWrapper, Text_extends({
+        $hasEndAdornment: hasEndAdornment,
+        $hasStartAdornment: hasStartAdornment,
+        $multiline: multiline,
+        disabled: disabled
+      }, displayProps), hasStartAdornment && /*#__PURE__*/external_react_default.a.createElement(StyledStartAdornmentHolder, {
+        $width: this.state.startAdornmentWidth
+      }), !disabled && multiline && /*#__PURE__*/external_react_default.a.createElement(StyledInput, {
+        as: "textarea",
         "aria-hidden": "true",
         onChange: external_lodash_["noop"],
         style: {
@@ -1175,15 +1304,13 @@ var Text_Text = /*#__PURE__*/function (_Component) {
         tabIndex: -1,
         ref: function ref(el) {
           _this2.shadow = el;
-        }
-      })), disabled ? /*#__PURE__*/external_react_default.a.createElement(StyledInput, Text_extends({
-        $customStyle: inputStyle,
-        $rightIconPadding: reserveIconSpace,
-        $search: appearance === 'search',
+        },
+        value: displayValue
+      }), disabled ? /*#__PURE__*/external_react_default.a.createElement(StyledInput, Text_extends({
         as: multiline ? 'textarea' : undefined,
         className: Object(style_["toClassName"])(className, classNamePrivate),
         "data-multiline": multiline || null,
-        "data-test": "disabled-textbox",
+        "data-test": "textbox",
         disabled: true,
         readOnly: true,
         style: multiline ? {
@@ -1197,40 +1324,23 @@ var Text_Text = /*#__PURE__*/function (_Component) {
           _this2.shadow = el;
         } : undefined
       }, ariaProps)) : /*#__PURE__*/external_react_default.a.createElement(StyledInput, Text_extends({
-        $rightIconPadding: reserveIconSpace,
-        $search: appearance === 'search',
         as: multiline ? 'textarea' : undefined
-      }, inputProps)), !disabled && multiline && /*#__PURE__*/external_react_default.a.createElement(external_react_event_listener_default.a, {
-        target: "window",
-        onResize: this.handleResize
+      }, inputProps)), !disabled && multiline && /*#__PURE__*/external_react_default.a.createElement(EventListener_default.a, {
+        target: window,
+        eventType: "resize",
+        listener: this.handleResize
       }), haveSyntheticPlaceholder && /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, null, placeholder), haveSyntheticPlaceholder && /*#__PURE__*/external_react_default.a.createElement(StyledPlaceholder, {
-        $customStyle: inputStyle,
-        $renderSearchIcon: placeholderPadding,
-        "data-role": "placeholder",
-        onMouseDown: this.handlePlaceholderMouseDown,
-        "aria-hidden": true
-      }, placeholder), clearIconPadding && !passwordVisibilityToggle && /*#__PURE__*/external_react_default.a.createElement(StyledClearButton, {
-        "data-test": "clear",
-        appearance: isPrisma ? 'secondary' : 'pill',
-        onClick: this.handleClear,
-        $customStyle: inputStyle,
-        icon: /*#__PURE__*/external_react_default.a.createElement(CrossMark["a" /* default */], {
-          inline: false,
-          enterpriseSize: 1 // TODO SUI-2696 to make explicit which input this button clears
-          ,
-          screenReaderText: Object(i18n_["_"])('Clear text field')
-        })
-      }), passwordVisibilityToggle && !disabled && /*#__PURE__*/external_react_default.a.createElement(StyledVisibilityToggle, {
-        "data-test": "password-toggle",
-        type: "button",
-        onClick: this.handleVisibilityToggle
-      }, eyeIcon), appearance === 'search' && placeholderPadding && /*#__PURE__*/external_react_default.a.createElement(StyledSearchIconWrapper, {
-        $customStyle: inputStyle,
-        $disabled: disabled
-      }, /*#__PURE__*/external_react_default.a.createElement(Search, {
-        enterpriseSize: "16px",
-        inline: false
-      })), children);
+        $endAdornmentWidth: this.state.endAdornmentWidth,
+        $hasBothAdornment: hasStartAdornment && hasEndAdornment // used to calculate the max-width
+        ,
+        $hasEndAdornment: hasEndAdornment,
+        $hasStartAdornment: hasStartAdornment,
+        $startAdornmentWidth: this.state.startAdornmentWidth,
+        "aria-hidden": true,
+        "data-role": "placeholder"
+      }, placeholder), children, hasEndAdornment && /*#__PURE__*/external_react_default.a.createElement(StyledEndAdornmentHolder, {
+        $width: this.state.endAdornmentWidth
+      })), this.renderEndAdornment());
     }
   }]);
 
@@ -1243,6 +1353,8 @@ _defineProperty(Text_Text, "defaultProps", defaultProps);
 
 _defineProperty(Text_Text, "componentType", 'Text');
 
+_defineProperty(Text_Text, "contextType", ControlGroup_["ControlGroupContext"]);
+
 var TextWithThemeBase = Object(themes_["withSplunkTheme"])(Text_Text);
 var TextWithTheme = TextWithThemeBase;
 TextWithTheme.propTypes = Text_Text.propTypes;
@@ -1252,50 +1364,23 @@ TextWithTheme.componentType = Text_Text.componentType;
 
 
 
-/***/ }),
-
-/***/ 12:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return updateReactRef; });
-/**
- * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
- *
- * @param ref - The React callback or object ref. Can be `null` or `undefined`.
- * @param current - The new value of the ref.
- */
-function updateReactRef(ref, current) {
-  if (ref) {
-    if (typeof ref === 'function') {
-      ref(current);
-    } else {
-      // the public signature of this util uses React.Ref<T> to mirror the way React types refs.
-      // the intention here is to signal "we will take care of setting 'current', not you".
-      ref.current = current; // eslint-disable-line no-param-reassign
-    }
-  }
-}
-
-
-
 /***/ }),
 
 /***/ 14:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/ScreenReaderContent");
+module.exports = require("@splunk/react-ui/EventListener");
 
 /***/ }),
 
 /***/ 15:
 /***/ (function(module, exports) {
 
-module.exports = require("react-event-listener");
+module.exports = require("@splunk/react-ui/ScreenReaderContent");
 
 /***/ }),
 
-/***/ 16:
+/***/ 17:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Button");
@@ -1309,14 +1394,14 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 21:
+/***/ 22:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CrossMark; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(25);
+/* harmony import */ var _splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(26);
 /* harmony import */ var _splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _ThemedIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
 /* harmony import */ var _SVG__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
@@ -1359,14 +1444,14 @@ function CrossMark(props) {
 
 /***/ }),
 
-/***/ 22:
+/***/ 23:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/SVG");
 
 /***/ }),
 
-/***/ 25:
+/***/ 26:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Close");
@@ -1380,17 +1465,17 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 4:
+/***/ 39:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash");
+module.exports = require("@splunk/ui-utils/style");
 
 /***/ }),
 
-/***/ 40:
+/***/ 4:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/style");
+module.exports = require("lodash");
 
 /***/ }),