carbon-react 118.1.0 → 118.2.0

package/lib/components/loader/loader-square.style.js

@@ -25,27 +25,32 @@ const loaderAnimation = (0, _styledComponents.keyframes)`
 const getDimentions = size => {
   let width;
   let marginRight;
+  let borderRadius;
 
   switch (size) {
     case "medium":
       width = "16px";
       marginRight = "8px";
+      borderRadius = "var(--borderRadiusCircle)";
       break;
 
     case "large":
       width = "20px";
       marginRight = "8px";
+      borderRadius = "var(--borderRadiusCircle)";
       break;
 
     default:
       width = "12px";
       marginRight = "6px";
+      borderRadius = "var(--borderRadiusCircle)";
   }
 
   return (0, _styledComponents.css)`
     width: ${width};
     height: ${width};
     margin-right: ${marginRight};
+    border-radius: ${borderRadius};
   `;
 };
 

package/lib/components/loader-bar/loader-bar.style.js

@@ -49,6 +49,7 @@ const StyledLoaderBar = _styledComponents.default.div`
   size
 }) => (0, _styledComponents.css)`
     display: inline-block;
+    border-radius: var(--borderRadius400);
     height: ${getHeight(size)};
     width: 100%;
     background-color: var(--colorsActionMajor150);

package/lib/components/menu/__internal__/submenu/submenu.style.js

@@ -80,6 +80,19 @@ const StyledSubmenu = _styledComponents.default.ul`
       }
     `}
 
+    ${!inFullscreenView && (0, _styledComponents.css)`
+      border-bottom-right-radius: var(--borderRadius100);
+      border-bottom-left-radius: var(--borderRadius100);
+
+      ${_menu.StyledMenuItem}:last-child a,
+      ${_menu.StyledMenuItem}:last-child button,
+      ${_menu.StyledMenuItem}:last-child > span,
+      ${_menu.StyledMenuItem}:last-child > div {
+        border-bottom-left-radius: var(--borderRadius100);
+        border-bottom-right-radius: var(--borderRadius100);
+      }
+    `}
+
     display: block;
     list-style: none;
     margin: 0;

package/lib/components/menu/menu.style.js

@@ -38,12 +38,16 @@ const StyledMenuWrapper = _styledComponents.default.ul`
         display: inline-block;
         vertical-align: bottom;
         background-color: ${_menu.default[menuType].background};
-
         ${menuType === "dark" && (0, _styledComponents.css)`
-          color: ${_menu.default[menuType].color};
+          display: inline-block;
+          vertical-align: bottom;
+          background-color: ${_menu.default[menuType].background};
+
+          ${menuType === "dark" && (0, _styledComponents.css)`
+            color: ${_menu.default[menuType].color};
+          `}
         `}
       `}
-
     ${_verticalDivider.StyledDivider} {
       position: relative;
       top: -1px;
@@ -54,7 +58,11 @@ exports.StyledMenuWrapper = StyledMenuWrapper;
 const StyledMenuItem = _styledComponents.default.li`
   ${_styledSystem.layout}
   ${_styledSystem.flexbox}
-  
+
+  ${_link.StyledLink} a:focus, ${_link.StyledLink} button:focus {
+    border-radius: var(--borderRadius000);
+  }
+
   ${({
   inSubmenu
 }) => (0, _styledComponents.css)`
@@ -62,8 +70,7 @@ const StyledMenuItem = _styledComponents.default.li`
       display: list-item;
     `}
   `}
-
-    ${({
+  ${({
   inFullscreenView
 }) => inFullscreenView && (0, _styledComponents.css)`
       padding-top: 16px;

package/lib/components/menu/scrollable-block/scrollable-block.style.js

@@ -11,6 +11,12 @@ var _menuItem = _interopRequireDefault(require("../menu-item/menu-item.style"));
 
 var _menu = _interopRequireDefault(require("../menu.config"));
 
+var _box = _interopRequireDefault(require("../../box/box.component"));
+
+var _menu2 = require("../menu.style");
+
+var _link = require("../../link/link.style");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -25,6 +31,18 @@ const StyledScrollableBlock = _styledComponents.default.li`
     && ${_menuItem.default} {
       background-color: ${variant === "default" ? _menu.default[menuType].submenuItemBackground : _menu.default[menuType].alternate};
     }
+
+    ${_box.default} {
+      border-radius: var(--borderRadius000);
+      border-bottom-left-radius: var(--borderRadius100);
+
+      ${_menu2.StyledMenuItem}:last-child ${_link.StyledLink},
+      ${_menu2.StyledMenuItem}:last-child a,
+      ${_menu2.StyledMenuItem}:last-child button {
+        border-bottom-left-radius: var(--borderRadius100);
+        border-bottom-right-radius: var(--borderRadius000);
+      }
+    }
   `}
 `;
 var _default = StyledScrollableBlock;

package/lib/components/message/message.style.js

@@ -30,6 +30,8 @@ const MessageStyle = _styledComponents.default.div`
   display: flex;
   justify-content: flex-start;
   align-content: center;
+  border-radius: var(--borderRadius100);
+  overflow: hidden;
   border: 1px solid ${({
   variant
 }) => variant && messageVariants[variant]};

package/lib/components/multi-action-button/multi-action-button.style.js

@@ -17,6 +17,8 @@ var _icon = _interopRequireDefault(require("../icon/icon.style"));
 
 var _width = _interopRequireDefault(require("../../style/utils/width"));
 
+var _splitButtonChildren = require("../split-button/split-button-children.style");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -91,12 +93,15 @@ const StyledButtonChildrenContainer = _styledComponents.default.div`
     white-space: nowrap;
     z-index: ${theme.zIndex.popover};
     box-shadow: var(--boxShadow100);
+    border-radius: var(--borderRadius100);
 
     ${_icon.default} {
       margin-left: 0;
       left: 8px;
     }
 
+    ${_splitButtonChildren.borderRadiusStyling}
+
     ${_button.default} {
       border: 1px solid var(--colorsActionMajorTransparent);
       display: flex;

package/lib/components/note/note.style.js

@@ -132,6 +132,7 @@ const StyledNote = _styledComponents.default.div`
 }) => (0, _styledComponents.css)`
     background-color: var(--colorsUtilityYang100);
     border: 1px solid var(--colorsUtilityMajor100);
+    border-radius: var(--borderRadius100);
     display: flex;
     flex-direction: column;
     padding: 24px;

package/lib/components/numeral-date/numeral-date.component.js

@@ -227,6 +227,7 @@ const NumeralDate = ({
     onKeyPress: onKeyPress,
     "data-component": "numeral-date"
   }, dateFormat.map((datePart, index) => {
+    const isStart = index === 0;
     const isEnd = index === dateFormat.length - 1;
     const isMiddle = index === 1;
     const validation = error || warning || info;
@@ -261,6 +262,7 @@ const NumeralDate = ({
     }, /*#__PURE__*/_react.default.createElement(_numeralDate.StyledDateField, {
       key: datePart,
       isYearInput: datePart.length === 4,
+      isStart: isStart,
       isMiddle: isMiddle,
       isEnd: isEnd,
       hasValidationIcon: hasValidationIcon

package/lib/components/numeral-date/numeral-date.style.d.ts

@@ -1,4 +1,5 @@
 interface StyledDateFieldProps {
+    isStart?: boolean;
     isEnd?: boolean;
     isMiddle?: boolean;
     isYearInput?: boolean;

package/lib/components/numeral-date/numeral-date.style.js

@@ -37,6 +37,7 @@ const StyledNumeralDate = _styledComponents.default.div`
 exports.StyledNumeralDate = StyledNumeralDate;
 const StyledDateField = _styledComponents.default.div`
   ${({
+  isStart,
   isYearInput,
   isEnd,
   hasValidationIcon,
@@ -48,6 +49,17 @@ const StyledDateField = _styledComponents.default.div`
         position: relative;
         width: ${yearInputOrError ? "78px;" : "58px;"};
         text-align: center;
+        border-radius: var(--borderRadius000);
+
+        ${isStart && (0, _styledComponents.css)`
+            border-top-left-radius: var(--borderRadius050);
+            border-bottom-left-radius: var(--borderRadius050);
+          `}
+
+        ${isEnd && (0, _styledComponents.css)`
+            border-top-right-radius: var(--borderRadius050);
+            border-bottom-right-radius: var(--borderRadius050);
+          `}
 
         ${(isMiddle || isEnd) && (0, _styledComponents.css)`
             margin-left: -1px;

package/lib/components/pager/pager.component.js

@@ -121,12 +121,12 @@ const Pager = ({
       onPrevious(e);
     }
   }, [page, onPrevious]);
-  const handleOnPagination = (0, _react.useCallback)(e => {
-    setValue(e.target.value);
-    setCurrentPageSize(+e.target.value);
-    onPagination(1, +e.target.value, "page-select");
+  const handleOnPagination = (0, _react.useCallback)(selectedValue => {
+    setValue(selectedValue);
+    setCurrentPageSize(+selectedValue);
+    onPagination(1, +selectedValue, "page-select");
   }, [onPagination]);
-  const handleKeyDown = (0, _react.useCallback)(e => _events.default.isEnterKey(e) && handleOnPagination(e), [handleOnPagination]);
+  const handleKeyDown = (0, _react.useCallback)(e => _events.default.isEnterKey(e) && handleOnPagination(e.target.value), [handleOnPagination]);
 
   const sizeSelector = () => {
     return /*#__PURE__*/_react.default.createElement(_pager.StyledSelectContainer, null, /*#__PURE__*/_react.default.createElement(_select.Select, {

package/lib/components/pager/pager.style.js

@@ -51,6 +51,8 @@ const StyledPagerContainer = _styledComponents.default.div`
 }) => (0, _styledComponents.css)`
       border-width: 1px 1px 1px 1px;
       border-style: none solid solid solid;
+      border-bottom-left-radius: var(--borderRadius100);
+      border-bottom-right-radius: var(--borderRadius100);
       border-color: var(--colorsUtilityMajor100);
       background-color: ${variant === "alternate" ? "var(--colorsUtilityMajor040)" : "var(--colorsUtilityMajor010)"};
     `}

package/lib/components/pill/pill.component.d.ts

@@ -14,11 +14,13 @@ export interface PillProps extends StyledPillProps {
     /** Callback function for when the pill is clicked. */
     onClick?: (ev: React.MouseEvent<HTMLSpanElement>) => void;
     /** Callback function for when the remove icon is clicked. */
-    onDelete?: (ev: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    onDelete?: (ev?: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
     /** Sets the type of pill in use. */
     pillRole?: "tag" | "status";
     /** Sets custom aria-label attribute on the remove button */
     ariaLabelOfRemoveButton?: string;
+    /** @private @ignore title attribute passed down to underlying element */
+    title?: string;
 }
 export declare const Pill: ({ wrapText, borderColor, colorVariant, children, fill, maxWidth, onClick, onDelete, pillRole, size, ariaLabelOfRemoveButton, ...rest }: PillProps) => JSX.Element;
 export default Pill;

package/lib/components/pill/pill.component.js

@@ -262,6 +262,7 @@ Pill.propTypes = {
       "smallOverlay": _propTypes.default.number.isRequired
     })
   }),
+  "title": _propTypes.default.string,
   "wrapText": _propTypes.default.bool
 };
 var _default = Pill;

package/lib/components/pill/pill.style.js

@@ -80,7 +80,6 @@ const StyledPill = _styledComponents.default.span`
   }
 
   return (0, _styledComponents.css)`
-      border-radius: 12px;
       font-size: 10px;
       letter-spacing: 0.7px;
       font-weight: 600;
@@ -90,6 +89,7 @@ const StyledPill = _styledComponents.default.span`
       align-items: center;
       justify-content: center;
       border: 2px solid ${pillColor};
+      border-radius: var(--borderRadius025);
       height: auto;
       ${!wrapText && (0, _styledComponents.css)`
         white-space: nowrap;
@@ -135,7 +135,7 @@ const StyledPill = _styledComponents.default.span`
       ${isDeletable && (0, _styledComponents.css)`
         button {
           -webkit-appearance: none;
-          border-radius: 0 6px 6px 0;
+          border-radius: var(--borderRadius000);
           border: none;
           bottom: 0;
           font-size: 100%;
@@ -150,6 +150,9 @@ const StyledPill = _styledComponents.default.span`
             outline: none;
             box-shadow: 0 0 0 3px var(--colorsSemanticFocus500);
             background-color: ${buttonFocusColor};
+            border-radius: var(--borderRadius000) var(--borderRadius025)
+              var(--borderRadius025) var(--borderRadius000);
+
             & {
               color: ${contentColor};
             }
@@ -195,7 +198,6 @@ const StyledPill = _styledComponents.default.span`
 
           button {
             padding: 0;
-            border-radius: 0 8px 8px 0;
             line-height: 14px;
 
             ${addStyleToPillIcon("7px")}
@@ -204,12 +206,10 @@ const StyledPill = _styledComponents.default.span`
 
         ${size === "M" && (0, _styledComponents.css)`
           padding: 0 32px 0 11px;
-          border-radius: 12px;
 
           button {
             width: 24px;
             padding: 0;
-            border-radius: 0 10px 10px 0;
             line-height: 15px;
 
             ${addStyleToPillIcon("10px")}
@@ -218,12 +218,10 @@ const StyledPill = _styledComponents.default.span`
 
         ${size === "L" && (0, _styledComponents.css)`
           padding: 0 36px 0 15px;
-          border-radius: 13px;
 
           button {
             width: 28px;
             padding: 0;
-            border-radius: 0 11px 11px 0;
             line-height: 16px;
 
             ${addStyleToPillIcon("12px")}
@@ -232,12 +230,10 @@ const StyledPill = _styledComponents.default.span`
 
         ${size === "XL" && (0, _styledComponents.css)`
           padding: 0 41px 0 19px;
-          border-radius: 15px;
 
           button {
             width: 32px;
             padding: 0;
-            border-radius: 0 12px 12px 0;
             line-height: 18px;
 
             ${addStyleToPillIcon("13px")}
@@ -256,34 +252,28 @@ const StyledPill = _styledComponents.default.span`
 
         ${size === "M" && (0, _styledComponents.css)`
           padding: 0 11px;
-          border-radius: 12px;
 
           button {
             width: 24px;
             padding: 0;
-            border-radius: 0 8px 8px 0;
           }
         `}
 
         ${size === "L" && (0, _styledComponents.css)`
           padding: 0 15px;
-          border-radius: 13px;
 
           button {
             width: 28px;
             padding: 0;
-            border-radius: 0 10px 10px 0;
           }
         `}
 
         ${size === "XL" && (0, _styledComponents.css)`
           padding: 0 19px;
-          border-radius: 15px;
 
           button {
             width: 32px;
             padding: 0;
-            border-radius: 0 12px 12px 0;
           }
         `}
       `}

package/lib/components/pod/pod.style.js

@@ -60,6 +60,7 @@ const StyledBlock = _styledComponents.default.div`
   isFocused
 }) => (0, _styledComponents.css)`
       box-sizing: border-box;
+      border-radius: var(--borderRadius100);
       display: flex;
       flex-direction: column;
       background-color: ${blockBackgrounds[variant]};
@@ -135,6 +136,8 @@ const StyledFooter = _styledComponents.default.div`
   softDelete
 }) => (0, _styledComponents.css)`
     background-color: var(--colorsUtilityMajor025);
+    border-bottom-left-radius: var(--borderRadius100);
+    border-bottom-right-radius: var(--borderRadius100);
     box-shadow: inset 0px 1px 1px 0 rgba(0, 0, 0, 0.1);
     color: var(--colorsUtilityYin090);
     padding: ${footerPaddings[size]};
@@ -195,6 +198,7 @@ const StyledEditAction = _styledComponents.default.a`
       display: flex;
       align-items: center;
       justify-content: center;
+      border-radius: var(--borderRadius100);
 
       ${_icon.default} {
         top: -2px;
@@ -252,6 +256,7 @@ const StyledDeleteButton = (0, _styledComponents.default)(_iconButton.default)`
       box-sizing: border-box;
       height: ${`${actionButtonSizes[size]}px`};
       width: ${`${actionButtonSizes[size]}px`};
+      border-radius: var(--borderRadius100);
 
       ${_icon.default} {
         top: -2px;
@@ -300,6 +305,7 @@ const StyledUndoButton = (0, _styledComponents.default)(_iconButton.default)`
       box-sizing: border-box;
       height: ${`${actionButtonSizes[size]}px`};
       width: ${`${actionButtonSizes[size]}px`};
+      border-radius: var(--borderRadius100);
 
       ${_icon.default} {
         top: -2px;

package/lib/components/popover-container/popover-container.style.js

@@ -33,6 +33,7 @@ const PopoverContainerContentStyle = _styledComponents.default.div`
   ${_styledSystem.padding}
 
   background: var(--colorsUtilityYang100);
+  border-radius: var(--borderRadius100);
   box-shadow: var(--boxShadow100);
   min-width: 300px;
   position: absolute;

package/lib/components/portrait/portrait-gravatar.component.js

@@ -21,7 +21,7 @@ const PortraitGravatar = ({
   gravatarEmail,
   size,
   alt,
-  shape = "square",
+  shape = "circle",
   errorCallback
 }) => {
   const gravatarSrc = () => {

package/lib/components/portrait/portrait-initials.component.js

@@ -24,7 +24,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 const PortraitInitials = ({
   initials,
   size,
-  shape = "square",
+  shape = "circle",
   darkBackground,
   alt
 }) => {

package/lib/components/portrait/portrait.component.js

@@ -35,7 +35,7 @@ const Portrait = ({
   gravatar,
   iconType = "individual",
   initials,
-  shape = "square",
+  shape = "circle",
   size = "M",
   src,
   onClick,

package/lib/components/portrait/portrait.style.js

@@ -47,7 +47,7 @@ function stylingForShape({
 }) {
   let cssString = "overflow: hidden;";
   if (shape === "square") cssString += "border-radius: 0px;";
-  if (shape === "circle") cssString += "border-radius: 50%;";
+  if (shape === "circle") cssString += "border-radius: var(--borderRadiusCircle);";
   return (0, _styledComponents.css)`
     ${cssString}
   `;
@@ -69,7 +69,6 @@ function stylingForIcon({
   return (0, _styledComponents.css)`
     background-color: ${backgroundColor};
     color: ${color};
-
     ::before {
       font-size: ${params === null || params === void 0 ? void 0 : params.iconDimensions}px;
     }
@@ -90,7 +89,6 @@ const StyledPortraitInitials = _styledComponents.default.div`
   ${stylingForSize}
   ${stylingForShape}
   outline: 1px solid var(--colorsUtilityMajor200);
-
   /* Styling for safari. This ensures that there is no outline on the component but that a border is still present 
      to achieve the same styling as Chrome and Firefox */
   @media not all and (min-resolution: 0.001dpcm) {

package/lib/components/profile/profile.component.js

@@ -47,7 +47,7 @@ const Profile = ({
         alt: getInitials(),
         initials: getInitials(),
         size: size,
-        shape: "square",
+        shape: "circle",
         "data-element": "user-image"
       });
     }

package/lib/components/progress-tracker/progress-tracker.style.js

@@ -73,7 +73,7 @@ const StyledProgressBar = _styledComponents.default.span`
   progress,
   error
 })};
-    border-radius: 25px;
+    border-radius: var(--borderRadius400);
     overflow-x: hidden;
     height: ${getHeight(size)};
     width: 100%;
@@ -124,7 +124,7 @@ const InnerBar = _styledComponents.default.span`
   progress,
   error
 })};
-    border-radius: 25px;
+    border-radius: var(--borderRadius400);
     width: calc(${length} * ${progress && progress / 100});
     min-width: 2px;
     height: ${getHeight(size)};

package/lib/components/radio-button/radio-button.style.js

@@ -54,7 +54,7 @@ const RadioButtonStyle = (0, _styledComponents.default)(_checkbox.default)`
     }
 
     ${_checkableInputSvgWrapper.default}, svg {
-      border-radius: 50%;
+      border-radius: var(--borderRadiusCircle);
     }
 
     ${_checkableInput.StyledCheckableInput},

package/lib/components/search/search-button.style.js

@@ -29,6 +29,11 @@ const StyledSearchButton = _styledComponents.default.div`
   & ${_button.default} {
     background-color: var(--colorsActionMajor500);
     border-color: var(--colorsActionMajorTransparent);
+    border-bottom-left-radius: var(--borderRadius000);
+    border-top-left-radius: var(--borderRadius000);
+    border-bottom-right-radius: var(--borderRadius050);
+    border-top-right-radius: var(--borderRadius050);
+
     :hover {
       background: var(--colorsActionMajor600);
       border-color: var(--colorsActionMajorTransparent);

package/lib/components/search/search.style.js

@@ -73,6 +73,7 @@ const StyledSearch = _styledComponents.default.div`
         }
       `}
 
+
       ${_input.default} {
         ::-moz-placeholder {
           color: var(--colorsUtilityYin055);
@@ -99,6 +100,12 @@ const StyledSearch = _styledComponents.default.div`
 
       ${_inputPresentation.default} {
         background-color: ${searchHasValue || isFocused ? "var(--colorsUtilityYang100)" : "transparent"};
+
+        ${showSearchButton && (0, _styledComponents.css)`
+          border-top-right-radius: var(--borderRadius000);
+          border-bottom-right-radius: var(--borderRadius000);
+        `}
+
         flex: 1;
         font-size: 14px;
         font-weight: 700;

package/lib/components/select/__internal__/select-list-context.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare type SelectListContextProps = {
+    currentOptionsListIndex?: number;
+    multiselectValues?: (string | Record<string, unknown>)[];
+};
+declare const SelectListContext: React.Context<SelectListContextProps>;
+export default SelectListContext;

package/lib/components/select/__internal__/select-text/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./select-text.component";
+export type { SelectTextProps } from "./select-text.component";

package/lib/components/select/__internal__/select-text/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _selectText.default;
+  }
+});
+
+var _selectText = _interopRequireDefault(require("./select-text.component"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/select/__internal__/select-text/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../../esm/components/select/__internal__/select-text/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/components/select/__internal__/select-text/select-text.component.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+export interface SelectTextProps {
+    /** If true the Component will be disabled */
+    disabled?: boolean;
+    /** Value to be displayed */
+    formattedValue?: string;
+    /** Label id passed from Select component  */
+    labelId?: string;
+    /** If true, the list is displayed */
+    isOpen?: boolean;
+    /** Callback function for when the Select Textbox loses it's focus. */
+    onBlur?: (ev: React.FocusEvent<HTMLElement>) => void;
+    /** Callback function for when the component is clicked. */
+    onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
+    /** Callback function for when the Select Textbox is focused. */
+    onFocus?: (ev: React.FocusEvent<HTMLElement>) => void;
+    /** Callback function for when the key is pressed when focused on Select Text. */
+    onKeyDown?: (ev: React.KeyboardEvent<HTMLElement>) => void;
+    /** Callback function for when the left mouse key is pressed when focused on Select Text. */
+    onMouseDown?: (ev: React.MouseEvent<HTMLElement>) => void;
+    /** Placeholder string to be displayed when formattedValue is empty */
+    placeholder?: string;
+    /** If true the Component will be read-only */
+    readOnly?: boolean;
+    /** If true the component has no border and a transparent background */
+    transparent?: boolean;
+    /** Id of the Select Text element */
+    textId?: string;
+    /** Component size */
+    size?: "small" | "medium" | "large";
+}
+declare const SelectText: ({ disabled, formattedValue, onClick, onKeyDown, onMouseDown, placeholder, readOnly, textId, transparent, size, }: SelectTextProps) => JSX.Element;
+export default SelectText;