carbon-react 109.1.3 → 109.2.2

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

@@ -7,6 +7,7 @@ import Icon from "../icon";
 import StyledButton, { StyledButtonSubtext } from "./button.style";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
+import Logger from "../../__internal__/utils/logger";
 
 function renderChildren({
   /* eslint-disable react/prop-types */
@@ -73,8 +74,8 @@ renderChildren.propTypes = {
     }
   }
 };
-
-const Button = ({
+let deprecatedForwardRefWarnTriggered = false;
+const Button = /*#__PURE__*/React.forwardRef(({
   size = "medium",
   subtext = "",
   children,
@@ -95,13 +96,18 @@ const Button = ({
   iconTooltipPosition,
   fullWidth = false,
   ...rest
-}) => {
+}, ref) => {
   invariant(!!(children || iconType), "Either prop `iconType` must be defined or this node must have children.");
 
   if (subtext) {
     invariant(size === "large", "subtext prop has no effect unless the button is large.");
   }
 
+  if (!deprecatedForwardRefWarnTriggered && forwardRef) {
+    deprecatedForwardRefWarnTriggered = true;
+    Logger.deprecate("The `forwardRef` prop in `Button` component is deprecated and will soon be removed. Please use `ref` instead.");
+  }
+
   const [internalRef, setInternalRef] = useState();
   const buttonType = buttonTypeProp;
   let paddingX;
@@ -129,10 +135,11 @@ const Button = ({
 
   const setRefs = 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.createElement(StyledButton, _extends({
     "aria-label": !children && iconType ? ariaLabel || iconType : undefined,
     as: !disabled && href ? "a" : "button",
@@ -169,8 +176,7 @@ const Button = ({
     iconTooltipPosition,
     tooltipTarget: internalRef
   }));
-};
-
+});
 Button.propTypes = {
   "aria-label": PropTypes.string,
   "buttonType": PropTypes.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
@@ -507,9 +513,17 @@ Button.propTypes = {
   "target": PropTypes.string,
   "type": PropTypes.string
 };
-const ButtonWithForwardRef = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Button, _extends({
-  forwardRef: ref
-}, props)));
+let deprecatedButtonForwardRefWarnTriggered = false;
+const ButtonWithForwardRef = /*#__PURE__*/React.forwardRef((props, ref) => {
+  if (!deprecatedButtonForwardRefWarnTriggered) {
+    deprecatedButtonForwardRefWarnTriggered = true;
+    Logger.deprecate("The `ButtonWithForwardRef` component is deprecated and will soon be removed. Please use a basic `Button` component with `ref` instead.");
+  }
+
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    ref: ref
+  }, props));
+});
 ButtonWithForwardRef.propTypes = {
   "aria-label": PropTypes.string,
   "buttonType": PropTypes.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),

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

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { ButtonWithForwardRef } from "../../button";
+import Button from "../../button";
 import { StyledButton } from "../picklist-item/picklist-item.style";
 const StyledGroupWrapper = styled.li`
   ${({
@@ -25,7 +25,7 @@ const StyledPicklistGroup = styled.li`
   width: 100%;
   margin-bottom: 4px;
 `;
-const StyledGroupButton = styled(ButtonWithForwardRef)`
+const StyledGroupButton = styled(Button)`
   ${({
   iconType
 }) => css`

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

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { ButtonWithForwardRef } from "../../button";
+import Button from "../../button";
 import Icon from "../../icon";
 import StyledIcon from "../../icon/icon.style";
 const StyledPicklistItem = styled.li`
@@ -30,7 +30,7 @@ const StyledPicklistItem = styled.li`
     }
   `}
 `;
-const StyledButton = styled(ButtonWithForwardRef)`
+const StyledButton = styled(Button)`
   ${({
   iconType
 }) => css`

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

@@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useState, useRef, useMemo } from "react"
 import PropTypes from "prop-types";
 import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 import { StyledMultiActionButton, StyledButtonChildrenContainer } from "./multi-action-button.style";
-import Button, { ButtonWithForwardRef } from "../button";
+import Button from "../button";
 import Events from "../../__internal__/utils/helpers/events";
 import Popover from "../../__internal__/popover";
 import { filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps } from "../../style/utils";
@@ -67,11 +67,6 @@ const MultiActionButton = ({
           (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
         }
       };
-
-      if (child.type === Button) {
-        return /*#__PURE__*/React.createElement(ButtonWithForwardRef, _extends({}, child.props, props));
-      }
-
       return /*#__PURE__*/React.cloneElement(child, props);
     });
   };

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/search/search.style.js

@@ -97,20 +97,34 @@ const StyledSearch = styled.div`
         z-index: ${theme.zIndex.smallOverlay};
       }
       ${StyledIcon} {
-        color: ${iconColor ? "var(--colorsUtilityMajor400)" : "var(--colorsUtilityMajor200)"};
+        ${darkVariant && css`
+          ${iconColor && css`
+            color: var(--colorsUtilityMajor400);
+
+            :hover {
+              color: var(--colorsUtilityMajor500);
+            }
+          `}
+          ${!iconColor && css`
+            color: var(--colorsUtilityMajor200);
+
+            :hover {
+              color: var(--colorsUtilityMajor100);
+            }
+          `}
+        `}
+
         ${!darkVariant && css`
-          color: var(--colorsUtilityMajor400);
+          color: var(--colorsActionMinor500);
+
+          :hover {
+            color: var(--colorsActionMinor600);
+          }
         `}
 
         width: 20px;
         height: 20px;
         cursor: pointer;
-        :hover {
-          color: ${iconColor ? "var(--colorsUtilityMajor500)" : "var(--colorsUtilityMajor100)"};
-          ${!darkVariant && css`
-            color: var(--colorsUtilityMajor500);
-          `}
-        }
       }
 
       ${StyledInputIconToggle} {