carbon-react 109.1.3 → 109.2.0

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

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

package/esm/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/esm/components/pill/pill.component.js

@@ -2,13 +2,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
 import StyledPill from "./pill.style";
 import Icon from "../icon";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import IconButton from "../icon-button";
-import { filterStyledSystemMarginProps } from "../../style/utils";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const renderCloseIcon = onDelete => /*#__PURE__*/React.createElement(IconButton, {
   onAction: onDelete,
@@ -19,57 +16,237 @@ const renderCloseIcon = onDelete => /*#__PURE__*/React.createElement(IconButton,
 }));
 
 const Pill = ({
-  fill,
-  onDelete,
-  colorVariant,
+  wrapText,
   borderColor,
-  pillRole,
+  colorVariant = "neutral",
   children,
-  size,
+  fill = false,
+  maxWidth,
   onClick,
+  onDelete,
+  pillRole = "tag",
+  size = "M",
   ...rest
 }) => /*#__PURE__*/React.createElement(StyledPill, _extends({
   inFill: fill,
   colorVariant: colorVariant,
-  isDeletable: onDelete,
+  isDeletable: !!onDelete,
   pillRole: pillRole,
   size: size,
   borderColor: borderColor,
   onClick: onClick
-}, tagComponent("pill", rest), rest), children, onDelete && renderCloseIcon(onDelete));
+}, tagComponent("pill", rest), {
+  maxWidth: maxWidth,
+  wrapText: wrapText
+}, rest), children, onDelete && renderCloseIcon(onDelete));
 
 Pill.propTypes = {
-  /** Filtered styled system margin props */
-  ...marginPropTypes,
-
-  /** Change the color of a status pill. */
-  colorVariant: PropTypes.oneOf(["neutral", "negative", "positive", "warning"]),
-
-  /** Override color variant, provide design token, any color from palette or any valid css color value. */
-  borderColor: PropTypes.string,
-
-  /** The content to display inside of the pill.  */
-  children: PropTypes.string.isRequired,
-
-  /** Fills the pill background with colour. When fill is false only the border is coloured. */
-  fill: PropTypes.bool,
-
-  /** Sets the type of pill in use. */
-  pillRole: PropTypes.oneOf(["tag", "status"]),
-
-  /** Callback function for when the pill is clicked. */
-  onClick: PropTypes.func,
-
-  /** Callback function for when the remove icon is clicked. */
-  onDelete: PropTypes.func,
-  size: PropTypes.oneOf(["S", "M", "L", "XL"])
-};
-Pill.defaultProps = {
-  colorVariant: "neutral",
-  fill: false,
-  onClick: null,
-  onDelete: null,
-  pillRole: "tag",
-  size: "M"
+  "borderColor": PropTypes.string,
+  "children": PropTypes.string.isRequired,
+  "colorVariant": PropTypes.oneOf(["negative", "neutral", "positive", "warning"]),
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "fill": PropTypes.bool,
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "maxWidth": PropTypes.string,
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "onClick": PropTypes.func,
+  "onDelete": PropTypes.func,
+  "pillRole": PropTypes.oneOf(["status", "tag"]),
+  "size": PropTypes.oneOf(["L", "M", "S", "XL"]),
+  "theme": PropTypes.shape({
+    "colors": PropTypes.shape({
+      "destructive": PropTypes.shape({
+        "hover": PropTypes.string.isRequired
+      }),
+      "error": PropTypes.string,
+      "focus": PropTypes.string,
+      "info": PropTypes.string,
+      "loadingBarBackground": PropTypes.string,
+      "placeholder": PropTypes.string,
+      "primary": PropTypes.string,
+      "secondary": PropTypes.string,
+      "tertiary": PropTypes.string,
+      "warning": PropTypes.string,
+      "warningText": PropTypes.string,
+      "white": PropTypes.oneOf(["#FFFFFF"])
+    }),
+    "compatibility": PropTypes.object,
+    "disabled": PropTypes.shape({
+      "background": PropTypes.string.isRequired
+    }),
+    "name": PropTypes.string,
+    "palette": PropTypes.shape({
+      "blackOpacity": PropTypes.func.isRequired,
+      "whiteOpacity": PropTypes.func.isRequired
+    }),
+    "space": PropTypes.arrayOf(PropTypes.string),
+    "spacing": PropTypes.number,
+    "zIndex": PropTypes.shape({
+      "aboveAll": PropTypes.number.isRequired,
+      "fullScreenModal": PropTypes.number.isRequired,
+      "header": PropTypes.number.isRequired,
+      "modal": PropTypes.number.isRequired,
+      "nav": PropTypes.number.isRequired,
+      "notification": PropTypes.number.isRequired,
+      "overlay": PropTypes.number.isRequired,
+      "popover": PropTypes.number.isRequired,
+      "smallOverlay": PropTypes.number.isRequired
+    })
+  }),
+  "wrapText": PropTypes.bool
 };
+export { Pill };
 export default Pill;

package/esm/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/esm/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;

package/esm/components/pill/pill.style.js

@@ -1,5 +1,4 @@
 import styled, { css } from "styled-components";
-import PropTypes from "prop-types";
 import { shade, meetsContrastGuidelines } from "polished";
 import { margin } from "styled-system";
 import styleConfig from "./pill.style.config";
@@ -18,19 +17,20 @@ function addStyleToPillIcon(fontSize) {
   `;
 }
 
-const PillStyle = styled.span`
-  ${margin};
+const StyledPill = styled.span`
+  ${margin}
   ${({
-  colorVariant,
+  wrapText,
   borderColor,
-  theme,
-  inFill,
+  colorVariant,
   isDeletable,
+  inFill,
+  maxWidth,
   pillRole,
-  size
+  size,
+  theme
 }) => {
   const isStatus = pillRole === "status";
-  const variety = isStatus ? colorVariant : "primary";
   let pillColor;
   let buttonFocusColor;
   let contentColor;
@@ -41,11 +41,15 @@ const PillStyle = styled.span`
       buttonFocusColor = shade(0.2, getColorValue(pillColor));
       contentColor = meetsContrastGuidelines(getColorValue(pillColor), theme.compatibility.colorsUtilityYin090).AAA ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityYang100)";
     } else {
+      const {
+        status,
+        tag
+      } = styleConfig();
       const {
         varietyColor,
         buttonFocus,
         content
-      } = styleConfig(theme)[pillRole][variety];
+      } = isStatus ? status[colorVariant] : tag.primary;
       pillColor = varietyColor;
       buttonFocusColor = buttonFocus;
       contentColor = content;
@@ -67,7 +71,13 @@ const PillStyle = styled.span`
       justify-content: center;
       border: 2px solid ${pillColor};
       height: auto;
-      white-space: nowrap;
+      ${!wrapText && css`
+        white-space: nowrap;
+      `}
+      ${wrapText && css`
+        white-space: break-spaces;
+        hyphens: auto;
+      `}
       color: ${contentColor};
 
       ${inFill && css`
@@ -257,22 +267,13 @@ const PillStyle = styled.span`
           }
         `}
       `}
+      ${maxWidth && `max-width: ${maxWidth}`}
     `;
 }}
 `;
-PillStyle.defaultProps = {
+StyledPill.defaultProps = {
   inFill: false,
-  colorVariant: "default",
   isDeletable: false,
   theme: baseTheme
 };
-PillStyle.propTypes = {
-  inFill: PropTypes.bool,
-  colorVariant: PropTypes.oneOf(["neutral", "negative", "positive", "warning"]),
-  isDeletable: PropTypes.func,
-  size: PropTypes.oneOf(["S", "M", "L", "XL"]),
-  pillRole: PropTypes.oneOf(["tag", "status"]),
-  borderColor: PropTypes.string,
-  theme: PropTypes.object
-};
-export default PillStyle;
+export default StyledPill;

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/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;

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

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _polished = require("polished");
 
 var _styledSystem = require("styled-system");
@@ -39,19 +37,20 @@ function addStyleToPillIcon(fontSize) {
   `;
 }
 
-const PillStyle = _styledComponents.default.span`
-  ${_styledSystem.margin};
+const StyledPill = _styledComponents.default.span`
+  ${_styledSystem.margin}
   ${({
-  colorVariant,
+  wrapText,
   borderColor,
-  theme,
-  inFill,
+  colorVariant,
   isDeletable,
+  inFill,
+  maxWidth,
   pillRole,
-  size
+  size,
+  theme
 }) => {
   const isStatus = pillRole === "status";
-  const variety = isStatus ? colorVariant : "primary";
   let pillColor;
   let buttonFocusColor;
   let contentColor;
@@ -62,11 +61,15 @@ const PillStyle = _styledComponents.default.span`
       buttonFocusColor = (0, _polished.shade)(0.2, (0, _getColorValue.default)(pillColor));
       contentColor = (0, _polished.meetsContrastGuidelines)((0, _getColorValue.default)(pillColor), theme.compatibility.colorsUtilityYin090).AAA ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityYang100)";
     } else {
+      const {
+        status,
+        tag
+      } = (0, _pillStyle.default)();
       const {
         varietyColor,
         buttonFocus,
         content
-      } = (0, _pillStyle.default)(theme)[pillRole][variety];
+      } = isStatus ? status[colorVariant] : tag.primary;
       pillColor = varietyColor;
       buttonFocusColor = buttonFocus;
       contentColor = content;
@@ -88,7 +91,13 @@ const PillStyle = _styledComponents.default.span`
       justify-content: center;
       border: 2px solid ${pillColor};
       height: auto;
-      white-space: nowrap;
+      ${!wrapText && (0, _styledComponents.css)`
+        white-space: nowrap;
+      `}
+      ${wrapText && (0, _styledComponents.css)`
+        white-space: break-spaces;
+        hyphens: auto;
+      `}
       color: ${contentColor};
 
       ${inFill && (0, _styledComponents.css)`
@@ -278,23 +287,14 @@ const PillStyle = _styledComponents.default.span`
           }
         `}
       `}
+      ${maxWidth && `max-width: ${maxWidth}`}
     `;
 }}
 `;
-PillStyle.defaultProps = {
+StyledPill.defaultProps = {
   inFill: false,
-  colorVariant: "default",
   isDeletable: false,
   theme: _themes.baseTheme
 };
-PillStyle.propTypes = {
-  inFill: _propTypes.default.bool,
-  colorVariant: _propTypes.default.oneOf(["neutral", "negative", "positive", "warning"]),
-  isDeletable: _propTypes.default.func,
-  size: _propTypes.default.oneOf(["S", "M", "L", "XL"]),
-  pillRole: _propTypes.default.oneOf(["tag", "status"]),
-  borderColor: _propTypes.default.string,
-  theme: _propTypes.default.object
-};
-var _default = PillStyle;
+var _default = StyledPill;
 exports.default = _default;

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

@@ -70,6 +70,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   "data-role": dataRole,
   listPlacement = "bottom-start",
   flipEnabled = true,
+  wrapPillText = true,
   ...textboxProps
 }, inputRef) => {
   const [activeDescendantId, setActiveDescendantId] = (0, _react.useState)();
@@ -220,7 +221,8 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
       return /*#__PURE__*/_react.default.createElement(_multiSelect.StyledSelectPillContainer, {
         key: key
       }, /*#__PURE__*/_react.default.createElement(_pill.default, _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]);
@@ -530,7 +532,10 @@ MultiSelect.propTypes = { ..._selectTextbox.formInputPropTypes,
   listPlacement: _propTypes.default.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.default.bool
+  flipEnabled: _propTypes.default.bool,
+
+  /** Wraps the pill text when it would overflow the input width */
+  wrapPillText: _propTypes.default.bool
 };
 MultiSelect.defaultProps = {
   "data-component": "multiselect"

package/lib/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/lib/components/select/multi-select/multi-select.style.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "109.1.3",
+  "version": "109.2.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -14,7 +14,7 @@
     "scripts/check_rfcs.js"
   ],
   "scripts": {
-    "start": "node ./scripts/check_node_version.js && start-storybook -p 9001 -s .assets -c .storybook",
+    "start": "node ./scripts/check_node_version.js && start-storybook -p 9001 -c .storybook",
     "start:debug-theme": "cross-env STORYBOOK_DEBUG_THEME=true npm run start",
     "test": "jest --config=./jest.conf.json",
     "test-update": "jest --config=./jest.conf.json --updateSnapshot",
@@ -29,8 +29,8 @@
     "prepublishOnly": "npm run precompile",
     "postinstall": "node ./scripts/check_carbon_version.js && node ./scripts/check_rfcs.js",
     "watch": "npm run clean-lib && npm run copy-files -- --watch & npm run babel -- --watch",
-    "build-storybook": "cross-env STORYBOOK_BUILD=true build-storybook -c .storybook -s .assets",
-    "start-storybook": "cross-env STORYBOOK_BUILD=true start-storybook -c .storybook -s .assets",
+    "build-storybook": "cross-env STORYBOOK_BUILD=true build-storybook -c .storybook",
+    "start-storybook": "cross-env STORYBOOK_BUILD=true start-storybook -c .storybook",
     "start:static": "npx http-server -p 9001 ./storybook-static",
     "babel": "cross-env NODE_ENV=production babel ./src --config-file ./babel.config.js --out-dir ./lib --ignore '**/*/__spec__.js','**/*.spec.js','**/*.spec.ts','**/*.spec.tsx','**/*.test.js','**/*.d.ts' --quiet --extensions '.js','.ts','.tsx'",
     "clean-lib": "rimraf ./lib && rimraf ./esm",

package/esm/components/pill/pill.d.ts

@@ -1,24 +0,0 @@
-import * as React from "react";
-import { MarginProps } from "styled-system";
-
-export interface PillProps extends MarginProps {
-  /** Override color variant, provide any color from palette or any valid css color value. */
-  borderColor?: string;
-  /** Change the color of a status pill. */
-  colorVariant?: "neutral" | "negative" | "positive" | "warning";
-  /** The content to display inside of the pill.  */
-  children: 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";
-  size?: "S" | "M" | "L" | "XL";
-}
-
-declare function Pill(props: PillProps): JSX.Element;
-
-export default Pill;

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

@@ -1,24 +0,0 @@
-import * as React from "react";
-import { MarginProps } from "styled-system";
-
-export interface PillProps extends MarginProps {
-  /** Override color variant, provide any color from palette or any valid css color value. */
-  borderColor?: string;
-  /** Change the color of a status pill. */
-  colorVariant?: "neutral" | "negative" | "positive" | "warning";
-  /** The content to display inside of the pill.  */
-  children: 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";
-  size?: "S" | "M" | "L" | "XL";
-}
-
-declare function Pill(props: PillProps): JSX.Element;
-
-export default Pill;