carbon-react 109.1.3 → 109.2.2

package/esm/components/select/multi-select/multi-select.component.js

@@ -43,6 +43,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   "data-role": dataRole,
   listPlacement = "bottom-start",
   flipEnabled = true,
+  wrapPillText = true,
   ...textboxProps
 }, inputRef) => {
   const [activeDescendantId, setActiveDescendantId] = useState();
@@ -192,7 +193,8 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       return /*#__PURE__*/React.createElement(StyledSelectPillContainer, {
         key: key
       }, /*#__PURE__*/React.createElement(Pill, _extends({
-        onDelete: canDelete ? () => removeSelectedValue(index) : undefined
+        onDelete: canDelete ? () => removeSelectedValue(index) : undefined,
+        wrapText: wrapPillText
       }, pillProps), title));
     }); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [children, disabled, readOnly, selectedValue]);
@@ -500,7 +502,10 @@ MultiSelect.propTypes = { ...formInputPropTypes,
   listPlacement: PropTypes.oneOf(["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"]),
 
   /** Use the opposite list placement if the set placement does not fit */
-  flipEnabled: PropTypes.bool
+  flipEnabled: PropTypes.bool,
+
+  /** Wraps the pill text when it would overflow the input width */
+  wrapPillText: PropTypes.bool
 };
 MultiSelect.defaultProps = {
   "data-component": "multiselect"

package/esm/components/select/multi-select/multi-select.d.ts

@@ -58,6 +58,8 @@ export interface MultiSelectProps
     | "left-end";
   /** Use the opposite list placement if the set placement does not fit */
   flipEnabled?: bool;
+  /** Wraps the pill text when it would overflow the input width */
+  wrapPillText?: boolean;
 }
 
 declare function MultiSelect(

package/esm/components/select/multi-select/multi-select.style.js

@@ -10,6 +10,7 @@ const StyledSelectPillContainer = styled.div`
   flex-direction: column;
   justify-content: center;
   margin: 3px 2px 3px 0;
+  max-width: 100%;
 
   && ${StyledPill} {
     text-overflow: ellipsis;

package/esm/components/split-button/split-button.component.js

@@ -6,7 +6,7 @@ import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
 import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 import Icon from "../icon";
-import Button, { ButtonWithForwardRef } from "../button";
+import Button from "../button";
 import StyledSplitButton from "./split-button.style";
 import StyledSplitButtonToggle from "./split-button-toggle.style";
 import StyledSplitButtonChildrenContainer from "./split-button-children.style";
@@ -217,11 +217,6 @@ const SplitButton = ({
           (_toggleButton$current = toggleButton.current) === null || _toggleButton$current === void 0 ? void 0 : _toggleButton$current.focus();
         }
       };
-
-      if (child.type === Button) {
-        return /*#__PURE__*/React.createElement(ButtonWithForwardRef, _extends({}, child.props, childProps));
-      }
-
       return /*#__PURE__*/React.cloneElement(child, childProps);
     });
   }

package/lib/components/badge/badge.style.d.ts

@@ -1,9 +1,6 @@
 /// <reference types="react" />
 declare const StyledBadgeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledCounter: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const StyledButton: import("styled-components").StyledComponent<{
-    ({ size, subtext, children, forwardRef, "aria-label": ariaLabel, disabled, destructive, buttonType: buttonTypeProp, iconType, iconPosition, href, m, px, noWrap, target, rel, iconTooltipMessage, iconTooltipPosition, fullWidth, ...rest }: import("../button").ButtonProps): JSX.Element;
-    displayName: string;
-}, any, {}, never>;
+declare const StyledButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
 declare const StyledCrossIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
 export { StyledBadgeWrapper, StyledButton, StyledCrossIcon, StyledCounter };

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

@@ -58,10 +58,7 @@ export interface ButtonProps extends SpaceProps {
     /** HTML rel attribute */
     rel?: string;
 }
-declare const Button: {
-    ({ size, subtext, children, forwardRef, "aria-label": ariaLabel, disabled, destructive, buttonType: buttonTypeProp, iconType, iconPosition, href, m, px, noWrap, target, rel, iconTooltipMessage, iconTooltipPosition, fullWidth, ...rest }: ButtonProps): JSX.Element;
-    displayName: string;
-};
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 declare const ButtonWithForwardRef: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { ButtonWithForwardRef };
 export default Button;

package/lib/components/button/button.component.js

@@ -19,6 +19,8 @@ var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tag
 
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+
 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; }
@@ -92,8 +94,9 @@ renderChildren.propTypes = {
     }
   }
 };
+let deprecatedForwardRefWarnTriggered = false;
 
-const Button = ({
+const Button = /*#__PURE__*/_react.default.forwardRef(({
   size = "medium",
   subtext = "",
   children,
@@ -114,13 +117,19 @@ const Button = ({
   iconTooltipPosition,
   fullWidth = false,
   ...rest
-}) => {
+}, ref) => {
   (0, _invariant.default)(!!(children || iconType), "Either prop `iconType` must be defined or this node must have children.");
 
   if (subtext) {
     (0, _invariant.default)(size === "large", "subtext prop has no effect unless the button is large.");
   }
 
+  if (!deprecatedForwardRefWarnTriggered && forwardRef) {
+    deprecatedForwardRefWarnTriggered = true;
+
+    _logger.default.deprecate("The `forwardRef` prop in `Button` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
   const [internalRef, setInternalRef] = (0, _react.useState)();
   const buttonType = buttonTypeProp;
   let paddingX;
@@ -148,10 +157,11 @@ const Button = ({
 
   const setRefs = (0, _react.useCallback)(reference => {
     setInternalRef(reference);
-    if (!forwardRef) return;
-    if (typeof forwardRef === "object") forwardRef.current = reference;
-    if (typeof forwardRef === "function") forwardRef(reference);
-  }, [forwardRef]);
+    const activeRef = ref || forwardRef;
+    if (!activeRef) return;
+    if (typeof activeRef === "object") activeRef.current = reference;
+    if (typeof activeRef === "function") activeRef(reference);
+  }, [ref, forwardRef]);
   return /*#__PURE__*/_react.default.createElement(_button.default, _extends({
     "aria-label": !children && iconType ? ariaLabel || iconType : undefined,
     as: !disabled && href ? "a" : "button",
@@ -188,7 +198,7 @@ const Button = ({
     iconTooltipPosition,
     tooltipTarget: internalRef
   }));
-};
+});
 
 Button.propTypes = {
   "aria-label": _propTypes.default.string,
@@ -526,10 +536,19 @@ Button.propTypes = {
   "target": _propTypes.default.string,
   "type": _propTypes.default.string
 };
+let deprecatedButtonForwardRefWarnTriggered = false;
+
+const ButtonWithForwardRef = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  if (!deprecatedButtonForwardRefWarnTriggered) {
+    deprecatedButtonForwardRefWarnTriggered = true;
 
-const ButtonWithForwardRef = /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/_react.default.createElement(Button, _extends({
-  forwardRef: ref
-}, props)));
+    _logger.default.deprecate("The `ButtonWithForwardRef` component is deprecated and will soon be removed. Please use a basic `Button` component with `ref` instead.");
+  }
+
+  return /*#__PURE__*/_react.default.createElement(Button, _extends({
+    ref: ref
+  }, props));
+});
 
 exports.ButtonWithForwardRef = ButtonWithForwardRef;
 ButtonWithForwardRef.propTypes = {

package/lib/components/duelling-picklist/picklist-group/picklist-group.style.js

@@ -7,10 +7,12 @@ exports.StyledGroupButton = exports.StyledPicklistGroup = exports.StyledPicklist
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _button = require("../../button");
+var _button = _interopRequireDefault(require("../../button"));
 
 var _picklistItem = require("../picklist-item/picklist-item.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; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -42,7 +44,7 @@ const StyledPicklistGroup = _styledComponents.default.li`
   margin-bottom: 4px;
 `;
 exports.StyledPicklistGroup = StyledPicklistGroup;
-const StyledGroupButton = (0, _styledComponents.default)(_button.ButtonWithForwardRef)`
+const StyledGroupButton = (0, _styledComponents.default)(_button.default)`
   ${({
   iconType
 }) => (0, _styledComponents.css)`

package/lib/components/duelling-picklist/picklist-item/picklist-item.style.js

@@ -7,7 +7,7 @@ exports.StyledLockIcon = exports.StyledButton = exports.StyledPicklistItem = voi
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _button = require("../../button");
+var _button = _interopRequireDefault(require("../../button"));
 
 var _icon = _interopRequireDefault(require("../../icon"));
 
@@ -48,7 +48,7 @@ const StyledPicklistItem = _styledComponents.default.li`
   `}
 `;
 exports.StyledPicklistItem = StyledPicklistItem;
-const StyledButton = (0, _styledComponents.default)(_button.ButtonWithForwardRef)`
+const StyledButton = (0, _styledComponents.default)(_button.default)`
   ${({
   iconType
 }) => (0, _styledComponents.css)`

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

@@ -13,7 +13,7 @@ var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__intern
 
 var _multiActionButton = require("./multi-action-button.style");
 
-var _button = _interopRequireWildcard(require("../button"));
+var _button = _interopRequireDefault(require("../button"));
 
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 
@@ -88,11 +88,6 @@ const MultiActionButton = ({
           (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
         }
       };
-
-      if (child.type === _button.default) {
-        return /*#__PURE__*/_react.default.createElement(_button.ButtonWithForwardRef, _extends({}, child.props, props));
-      }
-
       return /*#__PURE__*/_react.default.cloneElement(child, props);
     });
   };

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

@@ -1 +1,2 @@
-export { default } from "./pill";
+export { default } from "./pill.component";
+export type { PillProps } from "./pill.component";

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

@@ -0,0 +1,22 @@
+import React from "react";
+import { StyledPillProps } from "./pill.style";
+export interface PillProps extends StyledPillProps {
+    /** The content to display inside of the pill.  */
+    children: string;
+    /** Change the color of a status pill. */
+    colorVariant?: "neutral" | "negative" | "positive" | "warning";
+    /** Identifier used for testing purposes, applied to the root element of the component. */
+    "data-element"?: string;
+    /** Identifier used for testing purposes, applied to the root element of the component. */
+    "data-role"?: string;
+    /** Fills the pill background with colour. When fill is false only the border is coloured. */
+    fill?: boolean;
+    /** Callback function for when the pill is clicked. */
+    onClick?: React.MouseEventHandler<HTMLSpanElement>;
+    /** Callback function for when the remove icon is clicked. */
+    onDelete?: React.MouseEventHandler<HTMLButtonElement>;
+    /** Sets the type of pill in use. */
+    pillRole?: "tag" | "status";
+}
+export declare const Pill: ({ wrapText, borderColor, colorVariant, children, fill, maxWidth, onClick, onDelete, pillRole, size, ...rest }: PillProps) => JSX.Element;
+export default Pill;

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

@@ -3,14 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Pill = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
-
 var _pill = _interopRequireDefault(require("./pill.style"));
 
 var _icon = _interopRequireDefault(require("../icon"));
@@ -19,14 +17,10 @@ var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tag
 
 var _iconButton = _interopRequireDefault(require("../icon-button"));
 
-var _utils = require("../../style/utils");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
-
 const renderCloseIcon = onDelete => /*#__PURE__*/_react.default.createElement(_iconButton.default, {
   onAction: onDelete,
   "data-element": "close",
@@ -36,58 +30,238 @@ const renderCloseIcon = onDelete => /*#__PURE__*/_react.default.createElement(_i
 }));
 
 const Pill = ({
-  fill,
-  onDelete,
-  colorVariant,
+  wrapText,
   borderColor,
-  pillRole,
+  colorVariant = "neutral",
   children,
-  size,
+  fill = false,
+  maxWidth,
   onClick,
+  onDelete,
+  pillRole = "tag",
+  size = "M",
   ...rest
 }) => /*#__PURE__*/_react.default.createElement(_pill.default, _extends({
   inFill: fill,
   colorVariant: colorVariant,
-  isDeletable: onDelete,
+  isDeletable: !!onDelete,
   pillRole: pillRole,
   size: size,
   borderColor: borderColor,
   onClick: onClick
-}, (0, _tags.default)("pill", rest), rest), children, onDelete && renderCloseIcon(onDelete));
+}, (0, _tags.default)("pill", rest), {
+  maxWidth: maxWidth,
+  wrapText: wrapText
+}, rest), children, onDelete && renderCloseIcon(onDelete));
 
+exports.Pill = Pill;
 Pill.propTypes = {
-  /** Filtered styled system margin props */
-  ...marginPropTypes,
-
-  /** Change the color of a status pill. */
-  colorVariant: _propTypes.default.oneOf(["neutral", "negative", "positive", "warning"]),
-
-  /** Override color variant, provide design token, any color from palette or any valid css color value. */
-  borderColor: _propTypes.default.string,
-
-  /** The content to display inside of the pill.  */
-  children: _propTypes.default.string.isRequired,
-
-  /** Fills the pill background with colour. When fill is false only the border is coloured. */
-  fill: _propTypes.default.bool,
-
-  /** Sets the type of pill in use. */
-  pillRole: _propTypes.default.oneOf(["tag", "status"]),
-
-  /** Callback function for when the pill is clicked. */
-  onClick: _propTypes.default.func,
-
-  /** Callback function for when the remove icon is clicked. */
-  onDelete: _propTypes.default.func,
-  size: _propTypes.default.oneOf(["S", "M", "L", "XL"])
-};
-Pill.defaultProps = {
-  colorVariant: "neutral",
-  fill: false,
-  onClick: null,
-  onDelete: null,
-  pillRole: "tag",
-  size: "M"
+  "borderColor": _propTypes.default.string,
+  "children": _propTypes.default.string.isRequired,
+  "colorVariant": _propTypes.default.oneOf(["negative", "neutral", "positive", "warning"]),
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
+  "fill": _propTypes.default.bool,
+  "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "margin": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "maxWidth": _propTypes.default.string,
+  "mb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "ml": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mx": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "my": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "onClick": _propTypes.default.func,
+  "onDelete": _propTypes.default.func,
+  "pillRole": _propTypes.default.oneOf(["status", "tag"]),
+  "size": _propTypes.default.oneOf(["L", "M", "S", "XL"]),
+  "theme": _propTypes.default.shape({
+    "colors": _propTypes.default.shape({
+      "destructive": _propTypes.default.shape({
+        "hover": _propTypes.default.string.isRequired
+      }),
+      "error": _propTypes.default.string,
+      "focus": _propTypes.default.string,
+      "info": _propTypes.default.string,
+      "loadingBarBackground": _propTypes.default.string,
+      "placeholder": _propTypes.default.string,
+      "primary": _propTypes.default.string,
+      "secondary": _propTypes.default.string,
+      "tertiary": _propTypes.default.string,
+      "warning": _propTypes.default.string,
+      "warningText": _propTypes.default.string,
+      "white": _propTypes.default.oneOf(["#FFFFFF"])
+    }),
+    "compatibility": _propTypes.default.object,
+    "disabled": _propTypes.default.shape({
+      "background": _propTypes.default.string.isRequired
+    }),
+    "name": _propTypes.default.string,
+    "palette": _propTypes.default.shape({
+      "blackOpacity": _propTypes.default.func.isRequired,
+      "whiteOpacity": _propTypes.default.func.isRequired
+    }),
+    "space": _propTypes.default.arrayOf(_propTypes.default.string),
+    "spacing": _propTypes.default.number,
+    "zIndex": _propTypes.default.shape({
+      "aboveAll": _propTypes.default.number.isRequired,
+      "fullScreenModal": _propTypes.default.number.isRequired,
+      "header": _propTypes.default.number.isRequired,
+      "modal": _propTypes.default.number.isRequired,
+      "nav": _propTypes.default.number.isRequired,
+      "notification": _propTypes.default.number.isRequired,
+      "overlay": _propTypes.default.number.isRequired,
+      "popover": _propTypes.default.number.isRequired,
+      "smallOverlay": _propTypes.default.number.isRequired
+    })
+  }),
+  "wrapText": _propTypes.default.bool
 };
 var _default = Pill;
 exports.default = _default;

package/lib/components/pill/pill.style.config.d.ts

@@ -0,0 +1,18 @@
+interface StyledPillInnerConfigProps {
+    varietyColor: string;
+    buttonFocus: string;
+    content: string;
+}
+interface StyledPillConfig {
+    status: {
+        neutral: StyledPillInnerConfigProps;
+        negative: StyledPillInnerConfigProps;
+        warning: StyledPillInnerConfigProps;
+        positive: StyledPillInnerConfigProps;
+    };
+    tag: {
+        primary: StyledPillInnerConfigProps;
+    };
+}
+declare const _default: () => StyledPillConfig;
+export default _default;

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

@@ -0,0 +1,22 @@
+import { MarginProps } from "styled-system";
+import { ThemeObject } from "../../style/themes/base/base-theme.config";
+export interface StyledPillProps extends MarginProps {
+    /** Override color variant, provide any color from palette or any valid css color value. */
+    borderColor?: string;
+    /** Sets the max-width of the pill. */
+    maxWidth?: string;
+    /** Sets the size of the pill. */
+    size?: "S" | "M" | "L" | "XL";
+    /** @private @ignore */
+    theme?: Partial<ThemeObject>;
+    /** Allow the text within pill to wrap. */
+    wrapText?: boolean;
+}
+interface AllStyledPillProps extends StyledPillProps {
+    inFill?: boolean;
+    isDeletable: boolean;
+    colorVariant: "neutral" | "negative" | "positive" | "warning";
+    pillRole: "tag" | "status";
+}
+declare const StyledPill: import("styled-components").StyledComponent<"span", any, AllStyledPillProps, never>;
+export default StyledPill;