carbon-react 107.2.0 → 109.0.0

package/lib/components/icon/icon-config.js

@@ -32,7 +32,7 @@ const ICON_SIZES = ["extra-small", "small", "medium", "large", "extra-large"];
 exports.ICON_SIZES = ICON_SIZES;
 const ICON_FONT_SIZES = ["small", "medium", "large", "extra-large"];
 exports.ICON_FONT_SIZES = ICON_FONT_SIZES;
-const ICONS = ["add", "alert", "analysis", "arrow_down", "arrow_left", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_right", "arrow_right_small", "arrow_up", "attach", "bank", "basket", "basket_with_squares", "bin", "blocked", "blocked_square", "block_arrow_right", "bold", "boxed_shapes", "bulk_destroy", "bullet_list", "bullet_list_dotted", "bullet_list_numbers", "business", "calendar", "calendar_today", "call", "camera", "card_view", "caret_down", "caret_left", "caret_right", "caret_up", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "cart", "chat", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chevron_down", "chevron_left", "chevron_right", "chevron_up", "chevron_down_thick", "chevron_left_thick", "chevron_right_thick", "chevron_up_thick", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "copy", "credit_card", "credit_card_slash", "cross", "cross_circle", "csv", "delete", "delivery", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "drag", "drag_vertical", "draft", "dropdown", "duplicate", "edit", "edited", "email", "email_switch", "ellipsis_horizontal", "ellipsis_vertical", "envelope_dollar", "envelope_euro", "error", "error_square", "euro", "expand", "factory", "favourite", "favourite_lined", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter", "filter_new", "fit_height", "fit_width", "flag", "folder", "gift", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger", "ledger_arrow_left", "ledger_arrow_right", "link", "list_view", "locked", "location", "logout", "lookup", "marker", "message", "messages", "minus", "minus_large", "mobile", "money_bag", "pause", "pause_circle", "pdf", "people", "people_switch", "person", "person_info", "person_tick", "phone", "play", "play_circle", "plus", "plus_large", "pound", "print", "progress", "progressed", "question", "refresh", "refresh_clock", "remove", "sage_coin", "save", "scan", "search", "services", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split", "split_container", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "three_boxes", "tick", "tick_circle", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning", "admin", "arrow", "contacts", "create", "disconnect", "entry", "go", "lightbulb_off", "lightbulb_on", "none", "old_warning", "piggy_bank", "question_hollow", "question_mark", "settings_old", "talk", "true_tick"];
+const ICONS = ["add", "admin", "alert", "analysis", "arrow", "arrow_down", "arrow_left", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_right", "arrow_right_small", "arrow_up", "attach", "bank", "basket", "basket_with_squares", "bin", "blocked", "blocked_square", "block_arrow_right", "bold", "boxed_shapes", "bulk_destroy", "bullet_list", "bullet_list_dotted", "bullet_list_numbers", "business", "calendar", "calendar_today", "call", "camera", "card_view", "caret_down", "caret_left", "caret_right", "caret_up", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "cart", "chat", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chevron_down", "chevron_left", "chevron_right", "chevron_up", "chevron_down_thick", "chevron_left_thick", "chevron_right_thick", "chevron_up_thick", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "contacts", "copy", "create", "credit_card", "credit_card_slash", "cross", "cross_circle", "csv", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "drag", "drag_vertical", "draft", "dropdown", "duplicate", "edit", "edited", "email", "email_switch", "entry", "ellipsis_horizontal", "ellipsis_vertical", "envelope_dollar", "envelope_euro", "error", "error_square", "euro", "expand", "factory", "favourite", "favourite_lined", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter", "filter_new", "fit_height", "fit_width", "flag", "folder", "gift", "go", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger", "ledger_arrow_left", "ledger_arrow_right", "lightbulb_off", "lightbulb_on", "link", "list_view", "locked", "location", "logout", "lookup", "marker", "message", "minus", "minus_large", "mobile", "money_bag", "none", "old_warning", "pause", "pause_circle", "pdf", "people", "people_switch", "person", "person_info", "person_tick", "phone", "piggy_bank", "play", "play_circle", "plus", "plus_large", "pound", "print", "progress", "progressed", "question", "question_hollow", "question_mark", "refresh", "refresh_clock", "remove", "sage_coin", "save", "scan", "search", "services", "settings", "settings_old", "share", "shop", "sort_down", "sort_up", "spanner", "split", "split_container", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "three_boxes", "tick", "tick_circle", "true_tick", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"];
 exports.ICONS = ICONS;
 var _default = dlsConfig;
 exports.default = _default;

package/lib/components/icon/icon-type.d.ts

@@ -0,0 +1 @@
+export declare type IconType = "add" | "admin" | "alert" | "analysis" | "arrow" | "arrow_down" | "arrow_left" | "arrow_left_boxed" | "arrow_left_right_small" | "arrow_left_small" | "arrow_right" | "arrow_right_small" | "arrow_up" | "attach" | "bank" | "basket" | "basket_with_squares" | "bin" | "blocked" | "blocked_square" | "block_arrow_right" | "bold" | "boxed_shapes" | "bulk_destroy" | "bullet_list" | "bullet_list_dotted" | "bullet_list_numbers" | "business" | "calendar" | "calendar_today" | "call" | "camera" | "card_view" | "caret_down" | "caret_left" | "caret_right" | "caret_up" | "caret_large_down" | "caret_large_left" | "caret_large_right" | "caret_large_up" | "cart" | "chat" | "chart_bar" | "chart_line" | "chart_pie" | "chat_notes" | "chevron_down" | "chevron_left" | "chevron_right" | "chevron_up" | "chevron_down_thick" | "chevron_left_thick" | "chevron_right_thick" | "chevron_up_thick" | "circle_with_dots" | "circles_connection" | "clock" | "close" | "coins" | "collaborate" | "computer_clock" | "connect" | "contacts" | "copy" | "create" | "credit_card" | "credit_card_slash" | "cross" | "cross_circle" | "csv" | "delete" | "delivery" | "disputed" | "disconnect" | "document_right_align" | "document_tick" | "document_vertical_lines" | "download" | "drag" | "drag_vertical" | "draft" | "dropdown" | "duplicate" | "edit" | "edited" | "email" | "email_switch" | "entry" | "envelope_dollar" | "envelope_euro" | "ellipsis_horizontal" | "ellipsis_vertical" | "error" | "error_square" | "euro" | "expand" | "factory" | "favourite" | "favourite_lined" | "fax" | "feedback" | "file_excel" | "file_generic" | "file_image" | "file_pdf" | "file_word" | "files_leaning" | "filter" | "filter_new" | "fit_height" | "fit_width" | "flag" | "folder" | "gift" | "go" | "graph" | "grid" | "help" | "hide" | "home" | "image" | "in_progress" | "in_transit" | "individual" | "info" | "italic" | "key" | "ledger" | "ledger_arrow_left" | "ledger_arrow_right" | "link" | "lightbulb_off" | "lightbulb_on" | "list_view" | "locked" | "location" | "logout" | "lookup" | "marker" | "message" | "minus" | "minus_large" | "mobile" | "money_bag" | "none" | "old_warning" | "pause" | "pause_circle" | "pdf" | "people" | "people_switch" | "person" | "person_info" | "person_tick" | "phone" | "piggy_bank" | "play" | "play_circle" | "plus" | "plus_large" | "pound" | "print" | "progress" | "progressed" | "question" | "question_hollow" | "question_mark" | "refresh" | "refresh_clock" | "remove" | "sage_coin" | "save" | "scan" | "search" | "services" | "settings" | "settings_old" | "share" | "shop" | "sort_down" | "sort_up" | "spanner" | "split" | "split_container" | "square_dot" | "squares_nine" | "stacked_boxes" | "stacked_squares" | "submitted" | "sync" | "tag" | "talk" | "three_boxes" | "tick" | "tick_circle" | "true_tick" | "undo" | "unlocked" | "upload" | "uploaded" | "video" | "view" | "warning";

package/lib/components/icon/icon-type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,46 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { StyledIconProps } from "./icon.style";
+import { IconType } from "./icon-type";
+import { TooltipPositions } from "../tooltip/tooltip.config";
+export declare type LegacyIconTypes = "help" | "maintenance" | "new" | "success" | "messages";
+export interface IconProps extends Omit<StyledIconProps, "type">, MarginProps {
+    /** Set whether icon should be recognised by assistive technologies */
+    "aria-hidden"?: boolean;
+    /** Aria label for accessibility purposes */
+    ariaLabel?: string;
+    /** Id passed to the icon. */
+    id?: string;
+    /** The ARIA role to be applied to the Icon */
+    role?: string;
+    /** The message to be displayed within the tooltip */
+    tooltipMessage?: React.ReactNode;
+    /** The position to display the tooltip */
+    tooltipPosition?: TooltipPositions;
+    /** Control whether the tooltip is visible */
+    tooltipVisible?: boolean;
+    /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+    tooltipBgColor?: string;
+    /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+    tooltipFontColor?: string;
+    /** Overrides the default flip behaviour of the Tooltip */
+    tooltipFlipOverrides?: TooltipPositions[];
+    /** Id passed to the tooltip container, used for accessibility purposes */
+    tooltipId?: string;
+    /**
+     * Icon type
+     *
+     * The full list of types can be seen [here](https://carbon.sage.com/?path=/docs/icon--list-of-icons#list-of-icons).
+     */
+    type: IconType | LegacyIconTypes;
+    /** @ignore @private */
+    focusable?: boolean;
+    /** @ignore @private */
+    isPartOfInput?: boolean;
+    /** @ignore @private */
+    inputSize?: "small" | "medium" | "large";
+    /** @ignore @private */
+    tabIndex?: number;
+}
+declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>>;
+export default Icon;

package/lib/components/icon/icon.component.js

@@ -9,40 +9,41 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
-
-var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
-
-var _icon = _interopRequireDefault(require("./icon.style"));
+var _invariant = _interopRequireDefault(require("invariant"));
 
 var _tooltip = _interopRequireDefault(require("../tooltip"));
 
 var _utils = require("../../style/utils");
 
-var _iconConfig = require("./icon-config");
-
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 
+var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
+
+var _icon = _interopRequireDefault(require("./icon.style"));
+
+var _iconConfig = require("./icon-config");
+
 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; }
 
-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 Icon = /*#__PURE__*/_react.default.forwardRef(({
   "aria-hidden": ariaHidden,
+  ariaLabel,
   bg,
   bgShape,
-  bgSize,
+  bgSize = "small",
   className,
   color,
   disabled,
-  fontSize,
-  type,
+  focusable = true,
+  fontSize = "small",
+  id,
+  inputSize,
+  isPartOfInput,
+  tabIndex,
   tooltipMessage,
   tooltipPosition,
   tooltipVisible,
@@ -50,15 +51,16 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
   tooltipFontColor,
   tooltipFlipOverrides,
   tooltipId,
-  tabIndex,
-  id,
-  isPartOfInput,
-  inputSize,
+  type,
   role,
-  ariaLabel,
-  focusable = true,
   ...rest
 }, ref) => {
+  const flipBehaviourCheck = Array.isArray(tooltipFlipOverrides) && tooltipFlipOverrides.every(override => _iconConfig.ICON_TOOLTIP_POSITIONS.includes(override));
+
+  if (tooltipFlipOverrides) {
+    (0, _invariant.default)(flipBehaviourCheck, `The tooltipFlipOverrides prop supplied to \`Icon\` must be an array containing some or all of ["top", "bottom", "left", "right"].`);
+  }
+
   const isInteractive = !!tooltipMessage && !disabled;
   const {
     tooltipPosition: tooltipPositionFromContext,
@@ -94,33 +96,30 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
   };
 
   const isFocusable = focusableFromContext !== undefined ? focusableFromContext : focusable;
-  const hasTooltip = !disabled && !disabledFromContext && tooltipMessage && isFocusable;
-  const styleProps = {
+  const hasTooltip = !disabled && !disabledFromContext && !!tooltipMessage && isFocusable;
+  const styledIconProps = {
+    "aria-hidden": ariaHidden,
+    "aria-label": ariaLabel,
     bg,
     bgSize,
     bgShape,
+    className: className || undefined,
     color,
+    "data-element": iconType(),
     disabled: disabledFromContext || disabled,
     fontSize,
+    hasTooltip,
+    id,
     isInteractive,
-    type: iconType(),
+    key: "icon",
+    ref,
+    role,
     tabIndex: hasTooltip && tabIndex === undefined ? 0 : tabIndex,
+    type: iconType(),
+    ...(0, _tags.default)("icon", rest),
     ...(0, _utils.filterStyledSystemMarginProps)(rest)
   };
 
-  const icon = /*#__PURE__*/_react.default.createElement(_icon.default, _extends({
-    "aria-hidden": ariaHidden,
-    ref: ref,
-    key: "icon",
-    id: id,
-    className: className || null,
-    "data-element": iconType()
-  }, (0, _tags.default)("icon", rest), styleProps, {
-    hasTooltip: hasTooltip,
-    "aria-label": ariaLabel,
-    role: role
-  }));
-
   if (tooltipMessage) {
     const showTooltip = tooltipVisibleFromContext !== undefined ? tooltipVisibleFromContext : tooltipVisible;
     const visible = disabled ? undefined : showTooltip;
@@ -136,105 +135,191 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
       fontColor: tooltipFontColor,
       flipOverrides: tooltipFlipOverrides,
       target: target
-    }, icon);
+    }, /*#__PURE__*/_react.default.createElement(_icon.default, styledIconProps));
   }
 
-  return icon;
+  return /*#__PURE__*/_react.default.createElement(_icon.default, styledIconProps);
 });
 
-Icon.propTypes = { ...marginPropTypes,
-
-  /**
-   * @private
-   * @ignore
-   * Add classes to this component
-   * */
-  className: _propTypes.default.string,
-
-  /**
-   * Icon type.
-   *
-   * The full list of types can be seen [here](https://github.com/Sage/carbon/blob/master/src/components/icon/icon-config.js).
-   * */
-  type: _propTypes.default.string.isRequired,
-
-  /** Background size */
-  bgSize: _propTypes.default.oneOf(["extra-small", "small", "medium", "large", "extra-large"]),
-
-  /** Background shape */
-  bgShape: _propTypes.default.oneOf(["circle", "rounded-rect", "square"]),
-
-  /** Icon font size */
-  fontSize: _propTypes.default.oneOf(["small", "medium", "large", "extra-large"]),
-
-  /** Icon colour, provide design token, any color from palette or any valid css color value. */
-  color: _propTypes.default.string,
-
-  /** Background colour, provide design token, any color from palette, or any valid css color value. */
-  bg: _propTypes.default.string,
-
-  /** Sets the icon in the disabled state */
-  disabled: _propTypes.default.bool,
-
-  /** Aria label for accessibility purposes */
-  ariaLabel: _propTypes.default.string,
-
-  /** Set whether icon should be recognised by assistive technologies */
+Icon.propTypes = {
   "aria-hidden": _propTypes.default.bool,
-
-  /** The message to be displayed within the tooltip */
-  tooltipMessage: _propTypes.default.node,
-
-  /** The position to display the tooltip */
-  tooltipPosition: _propTypes.default.oneOf(["top", "bottom", "left", "right"]),
-
-  /** Control whether the tooltip is visible */
-  tooltipVisible: _propTypes.default.bool,
-
-  /** Override background color of the Tooltip, provide design token, any color from palette or any valid css color value. */
-  tooltipBgColor: _propTypes.default.string,
-
-  /** Override font color of the Tooltip, provide design token, any color from palette or any valid css color value. */
-  tooltipFontColor: _propTypes.default.string,
-
-  /** Id passed to the tooltip container, used for accessibility purposes. */
-  tooltipId: _propTypes.default.string,
-
-  /** Overrides the default flip behaviour of the Tooltip, must be an array containing some or all of ["top", "bottom", "left", "right"].
-   *
-   *  See the Popper [documentation](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) for more information
-   * */
-  tooltipFlipOverrides: (props, propName) => {
-    const prop = props[propName];
-    const isValid = prop && Array.isArray(prop) && prop.every(placement => _iconConfig.ICON_TOOLTIP_POSITIONS.includes(placement));
-
-    if (!prop || isValid) {
-      return null;
-    }
-
-    return new Error( // eslint-disable-next-line max-len
-    `The \`${propName}\` prop supplied to \`Icon\` must be an array containing some or all of ["top", "bottom", "left", "right"].`);
-  },
-
-  /** @ignore @private */
-  isPartOfInput: _propTypes.default.bool,
-
-  /** @ignore @private */
-  inputSize: _propTypes.default.oneOf(["small", "medium", "large"]),
-
-  /** @ignore @private */
-  tabIndex: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-
-  /** @ignore @private */
-  focusable: _propTypes.default.bool,
-
-  /** Id passed to the icon. */
-  id: _propTypes.default.string
-};
-Icon.defaultProps = {
-  bgSize: "small",
-  fontSize: "small",
-  disabled: false
+  "ariaLabel": _propTypes.default.string,
+  "bg": _propTypes.default.string,
+  "bgShape": _propTypes.default.oneOf(["circle", "rounded-rect", "square"]),
+  "bgSize": _propTypes.default.oneOf(["extra-large", "extra-small", "large", "medium", "small"]),
+  "className": _propTypes.default.string,
+  "color": _propTypes.default.string,
+  "disabled": _propTypes.default.bool,
+  "focusable": _propTypes.default.bool,
+  "fontSize": _propTypes.default.oneOf(["extra-large", "large", "medium", "small"]),
+  "id": _propTypes.default.string,
+  "inputSize": _propTypes.default.oneOf(["large", "medium", "small"]),
+  "isPartOfInput": _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]),
+  "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]),
+  "role": _propTypes.default.string,
+  "tabIndex": _propTypes.default.number,
+  "tooltipBgColor": _propTypes.default.string,
+  "tooltipFlipOverrides": _propTypes.default.arrayOf(_propTypes.default.oneOf(["bottom", "left", "right", "top"])),
+  "tooltipFontColor": _propTypes.default.string,
+  "tooltipId": _propTypes.default.string,
+  "tooltipMessage": _propTypes.default.node,
+  "tooltipPosition": _propTypes.default.oneOf(["bottom", "left", "right", "top"]),
+  "tooltipVisible": _propTypes.default.bool,
+  "type": _propTypes.default.oneOf(["add", "admin", "alert", "analysis", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_up", "arrow", "attach", "bank", "basket_with_squares", "basket", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "gift", "go", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "maintenance", "marker", "message", "messages", "minus_large", "minus", "mobile", "money_bag", "new", "none", "old_warning", "pause_circle", "pause", "pdf", "people_switch", "people", "person_info", "person_tick", "person", "phone", "piggy_bank", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "success", "sync", "tag", "talk", "three_boxes", "tick_circle", "tick", "true_tick", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]).isRequired
 };
+Icon.displayName = "Icon";
 var _default = Icon;
 exports.default = _default;

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

@@ -1,2 +1,38 @@
+import { ThemeObject } from "../../style/themes/base";
+import { IconType } from "./icon-type";
+export declare type BackgroundShape = "circle" | "rounded-rect" | "square";
+export declare type BgSize = "extra-small" | "small" | "medium" | "large" | "extra-large";
+export declare type FontSize = "small" | "medium" | "large" | "extra-large";
+export interface StyledIconProps {
+    /** Background colour, provide any color from palette or any valid css color value. */
+    bg?: string;
+    /** Background shape */
+    bgShape?: BackgroundShape;
+    /** Background size */
+    bgSize?: BgSize;
+    /**
+     * @private
+     * @ignore
+     * Add classes to this component
+     */
+    className?: string;
+    /** Icon colour, provide any color from palette or any valid css color value. */
+    color?: string;
+    /** Sets the icon in the disabled state */
+    disabled?: boolean;
+    /** Icon font size */
+    fontSize?: FontSize;
+    /**
+     * Icon type
+     *
+     * The full list of types can be seen [here](https://github.com/Sage/carbon/blob/master/src/components/icon/icon-config.js).
+     */
+    type: IconType;
+}
+export interface StyledIconInternalProps {
+    isInteractive?: boolean;
+    hasTooltip?: boolean;
+    theme?: ThemeObject;
+}
+declare const StyledIcon: import("styled-components").StyledComponent<"span", any, StyledIconProps & StyledIconInternalProps, never>;
 export default StyledIcon;
-declare const StyledIcon: import("styled-components").StyledComponent<"span", any, {}, never>;