@splunk/react-ui 4.1.0 → 4.4.1

package/Text.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 111);
+/******/ 	return __webpack_require__(__webpack_require__.s = 116);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,21 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 111:
+/***/ 100:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/ControlGroup");
+
+/***/ }),
+
+/***/ 101:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-icons/Search");
+
+/***/ }),
+
+/***/ 116:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -127,7 +141,7 @@ var external_react_event_listener_default = /*#__PURE__*/__webpack_require__.n(e
 var external_lodash_ = __webpack_require__(4);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/style"
-var style_ = __webpack_require__(36);
+var style_ = __webpack_require__(40);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
 var ScreenReaderContent_ = __webpack_require__(14);
@@ -136,11 +150,14 @@ var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReade
 // EXTERNAL MODULE: external "@splunk/themes"
 var themes_ = __webpack_require__(0);
 
+// EXTERNAL MODULE: external "@splunk/react-ui/ControlGroup"
+var ControlGroup_ = __webpack_require__(100);
+
 // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
 var i18n_ = __webpack_require__(5);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/Search"
-var Search_ = __webpack_require__(98);
+var Search_ = __webpack_require__(101);
 var Search_default = /*#__PURE__*/__webpack_require__.n(Search_);
 
 // EXTERNAL MODULE: ./src/icons/ThemedIcon.tsx
@@ -187,7 +204,7 @@ function Search(props) {
   }, props));
 }
 // EXTERNAL MODULE: ./src/icons/CrossMark.tsx
-var CrossMark = __webpack_require__(20);
+var CrossMark = __webpack_require__(21);
 
 // CONCATENATED MODULE: ./src/Text/syncHeightWithShadow.ts
 // This file was adapted from [Call-Em-All's material-ui](https://github.com/mui-org/material-ui),
@@ -268,7 +285,7 @@ function syncHeightWithShadow(_ref) {
 var updateReactRef = __webpack_require__(12);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/SVG"
-var SVG_ = __webpack_require__(21);
+var SVG_ = __webpack_require__(22);
 var SVG_default = /*#__PURE__*/__webpack_require__.n(SVG_);
 
 // CONCATENATED MODULE: ./src/Text/IconOutlinedHide.tsx
@@ -287,7 +304,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",
@@ -343,7 +360,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",
@@ -381,10 +398,6 @@ function IconOutlinedView(props) {
 }
 
 /* harmony default export */ var Text_IconOutlinedView = (IconOutlinedView);
-// EXTERNAL MODULE: external "lodash/startCase"
-var startCase_ = __webpack_require__(99);
-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_);
@@ -393,84 +406,30 @@ var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(exte
 var Box_ = __webpack_require__(8);
 var Box_default = /*#__PURE__*/__webpack_require__.n(Box_);
 
-// CONCATENATED MODULE: ./src/Text/TextStyles.ts
+// EXTERNAL MODULE: external "@splunk/react-ui/Button"
+var Button_ = __webpack_require__(16);
+var Button_default = /*#__PURE__*/__webpack_require__.n(Button_);
 
+// CONCATENATED MODULE: ./src/Text/TextStyles.ts
 
 
 
-var StyledBox = external_styled_components_default()(Box_default.a).withConfig({
-  displayName: "TextStyles__StyledBox",
-  componentId: "eg7n6t-0"
-})(["flex-grow:1;flex-shrink:1;position:relative;&[data-inline]{width:230px;flex-basis:230px;[data-inline] + &{margin-left:", ";}}"], Object(themes_["pick"])({
-  enterprise: themes_["variables"].spacingHalf,
-  prisma: themes_["variables"].spacingSmall
-}));
-
-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 StyledClear = external_styled_components_default.a.span.withConfig({
-  displayName: "TextStyles__StyledClear",
-  componentId: "eg7n6t-1"
-})(["", ";position:absolute;top:", ";font-size:0.83333em;color:", ";cursor:pointer;z-index:1;padding:", ";", ""], themes_["mixins"].reset('inline'), Object(themes_["pick"])({
-  enterprise: '2px',
+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: 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: {
@@ -478,199 +437,266 @@ var StyledClear = external_styled_components_default.a.span.withConfig({
     dark: themes_["variables"].white
   },
   prisma: themes_["variables"].contentColorDefault
-}), Object(themes_["pick"])({
-  enterprise: {
-    comfortable: '8px',
-    compact: '7px'
-  },
-  prisma: 0
-}), function (props) {
-  var padding = Object(themes_["pick"])({
-    enterprise: '1px',
-    prisma: '8px'
-  });
-
-  if (padding) {
-    var paddingResult = padding(props);
-    return TextStyles_addPadding('right', 'right', paddingResult);
-  }
-
-  return '';
-});
-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 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: {
-    comfortable: '5px 8px',
-    compact: '3px 7px'
+    light: themes_["variables"].gray60,
+    dark: themes_["variables"].white
   },
-  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
+  comfortable: '0 8px',
+  compact: '0 6px'
 }), 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)
+  prisma: Object(external_styled_components_["css"])(["color:", ";"], themes_["variables"].contentColorDisabled)
 }));
-/* Some of these need greater specificity than input[type=text] */
-
-var StyledInput = external_styled_components_default.a.input.withConfig({
-  displayName: "TextStyles__StyledInput",
+var StyledBox = external_styled_components_default()(Box_default.a).withConfig({
+  displayName: "TextStyles__StyledBox",
+  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
+}),
+/* 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 StyledInputWrapper = external_styled_components_default.a.span.withConfig({
+  displayName: "TextStyles__StyledInputWrapper",
   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%;", " ", "   ", " 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"])({
+})(["", ";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: {
-    light: themes_["variables"].white,
-    dark: themes_["variables"].gray22
-  },
-  prisma: themes_["variables"].transparent
-}), Object(themes_["pick"])({
-  enterprise: {
-    light: themes_["variables"].borderColor,
+    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;"])
+    light: themes_["variables"].white,
+    dark: themes_["variables"].gray22
   },
-  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'
-  });
-
-  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 (_ref2) {
-  var $rightIconPadding = _ref2.$rightIconPadding;
-  return $rightIconPadding && rightIconPadding;
+  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 $append = _ref3.$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 (_ref4) {
-  var $prepend = _ref4.$prepend;
-  return $prepend && Object(external_styled_components_["css"])(["border-top-left-radius:0;border-bottom-left-radius:0;"]);
+  var $hasStartAdornment = _ref3.$hasStartAdornment;
+  return $hasStartAdornment && Object(external_styled_components_["css"])(["padding-left:0;"]);
 }, Object(themes_["pick"])({
   enterprise: {
-    light: themes_["variables"].border,
+    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)
-}), Object(themes_["pickVariant"])('$error', {
-  "true": Object(external_styled_components_["css"])(["&,&:hover{border-color:", ";color:", ";}"], Object(themes_["pick"])({
+}), 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
-  }), Object(themes_["pick"])({
-    enterprise: themes_["variables"].errorColor,
-    prisma: themes_["variables"].contentColorActive
-  })),
-  "false": {
-    prisma: Object(external_styled_components_["css"])(["&:not(:hover):not(:focus) + ", "{&:not(:hover):not(:focus){display:none;}}"],
-    /* sc-sel */
-    StyledClear)
-  }
-}), themes_["variables"].contentColorMuted, function (_ref5) {
-  var disabled = _ref5.disabled;
-  return disabled && disabledStyles;
+  }));
+}, 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 $search = _ref6.$search;
-  return $search && Object(external_styled_components_["css"])(["", ";", ";"], rightIconPadding, leftIconPadding);
+  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;"])
+  });
 });
-var StyledSearchIconWrapper = external_styled_components_default.a.span.withConfig({
-  displayName: "TextStyles__StyledSearchIconWrapper",
+/* Some of these need greater specificity than input[type=text] */
+
+var StyledInput = external_styled_components_default.a.input.withConfig({
+  displayName: "TextStyles__StyledInput",
   componentId: "eg7n6t-4"
-})(["color:", ";pointer-events:none;position:absolute;z-index:1;", ";&[disabled]{", ";}"], Object(themes_["pick"])({
+})(["", ";&,&[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',
+    compact: '20px'
+  }
+}), Object(themes_["pick"])({
+  enterprise: themes_["variables"].spacingHalf,
+  prisma: '14px'
+}), 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
+  }));
+}, function (_ref10) {
+  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: '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: Object(external_styled_components_["css"])(["top:10px;left:", ";"], function (_ref7) {
-      var $renderSearchIcon = _ref7.$renderSearchIcon;
-      return $renderSearchIcon ? '40px' : '14px';
-    }),
-    compact: Object(external_styled_components_["css"])(["top:6px;left:", ";"], function (_ref8) {
-      var $renderSearchIcon = _ref8.$renderSearchIcon;
-      return $renderSearchIcon ? '40px' : '14px';
-    })
+    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
@@ -735,6 +761,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
+
 /** @public */
 
 var propTypes = {
@@ -753,6 +780,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,
 
@@ -760,9 +788,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,
@@ -778,10 +803,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(['text', 'password']),
+  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
@@ -794,7 +820,6 @@ var defaultProps = {
   disabled: false,
   error: false,
   inline: false,
-  inputStyle: {},
   multiline: false,
   placeholder: '',
   prepend: false,
@@ -836,6 +861,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();
     });
@@ -878,20 +927,12 @@ var Text_Text = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "handleInputFocus", function (e) {
       var _this$props$onFocus, _this$props4;
 
-      _this.setState({
-        hasFocus: true
-      });
-
       (_this$props$onFocus = (_this$props4 = _this.props).onFocus) === null || _this$props$onFocus === void 0 ? void 0 : _this$props$onFocus.call(_this$props4, e);
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleInputBlur", function (e) {
       var _this$props$onBlur, _this$props5;
 
-      _this.setState({
-        hasFocus: false
-      });
-
       (_this$props$onBlur = (_this$props5 = _this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props5, e);
     });
 
@@ -925,10 +966,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,
@@ -945,9 +982,112 @@ 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 === null || splunkTheme === void 0 ? void 0 : splunkTheme.family) === 'prisma';
+      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 === null || splunkTheme === void 0 ? void 0 : splunkTheme.family) === 'prisma';
+      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
+        })));
+      }
+
+      return undefined;
+    });
+
     _this.controlledExternally = Object(external_lodash_["has"])(props, 'value');
     _this.state = {
-      hasFocus: false,
       value: props.defaultValue || '',
       hideVisibility: true
     };
@@ -965,6 +1105,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",
@@ -978,6 +1120,7 @@ var Text_Text = /*#__PURE__*/function (_Component) {
       if (false) {}
 
       Text.validateRows(this.props);
+      this.getAdornmentWidth();
     }
   }, {
     key: "isControlled",
@@ -1014,43 +1157,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;
@@ -1063,22 +1199,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,
@@ -1095,30 +1226,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 showClearIcon = isPrisma ? clearIconPadding && !!displayValue : clearIconPadding && !!displayValue && (this.state.hasFocus || appearance === 'search');
-      var eyeIcon = this.state.hideVisibility ? /*#__PURE__*/external_react_default.a.createElement(Text_IconOutlinedView, null) : /*#__PURE__*/external_react_default.a.createElement(Text_IconOutlinedHide, null);
+      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({
+        $isTimeInput: isTimeInput,
         className: Object(style_["toClassName"])(className, classNamePrivate),
         "data-test": "text",
-        "data-test-value": displayValue,
+        "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: {
@@ -1131,11 +1272,9 @@ 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,
@@ -1153,38 +1292,22 @@ 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
       }), 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), showClearIcon && !passwordVisibilityToggle && /*#__PURE__*/external_react_default.a.createElement(StyledClear, {
-        "data-test": "clear",
-        onMouseDown: this.handleClear,
-        tabIndex: -1,
-        $customStyle: inputStyle
-      }, /*#__PURE__*/external_react_default.a.createElement(CrossMark["a" /* default */], {
-        inline: false,
-        enterpriseSize: 1,
-        screenReaderText: Object(i18n_["_"])('Clear')
-      })), 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());
     }
   }]);
 
@@ -1197,6 +1320,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;
@@ -1249,6 +1374,13 @@ module.exports = require("react-event-listener");
 
 /***/ }),
 
+/***/ 16:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Button");
+
+/***/ }),
+
 /***/ 2:
 /***/ (function(module, exports) {
 
@@ -1256,14 +1388,14 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 20:
+/***/ 21:
 /***/ (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__(23);
+/* 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___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);
@@ -1306,14 +1438,14 @@ function CrossMark(props) {
 
 /***/ }),
 
-/***/ 21:
+/***/ 22:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/SVG");
 
 /***/ }),
 
-/***/ 23:
+/***/ 25:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Close");
@@ -1327,17 +1459,17 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 36:
+/***/ 4:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/style");
+module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 4:
+/***/ 40:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash");
+module.exports = require("@splunk/ui-utils/style");
 
 /***/ }),
 
@@ -1496,20 +1628,6 @@ Icon.defaultProps = defaultProps;
 
 module.exports = require("@splunk/react-ui/Box");
 
-/***/ }),
-
-/***/ 98:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-icons/Search");
-
-/***/ }),
-
-/***/ 99:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/startCase");
-
 /***/ })
 
 /******/ });