carbon-react 111.16.0 → 111.18.0

package/esm/components/tile/tile-footer/tile-footer.style.js

@@ -1,13 +1,27 @@
 import styled, { css } from "styled-components";
 import { padding } from "styled-system";
 import { baseTheme } from "../../../style/themes";
+
+const getBackgroundColor = variant => {
+  switch (variant) {
+    case "transparent":
+      return "transparent";
+
+    case "black":
+      return "var(--colorsUtilityYin100)";
+
+    default:
+      return "var(--colorsUtilityMajor100)";
+  }
+};
+
 const StyledTileFooter = styled.div`
   ${padding}
 
   ${({
   variant
 }) => css`
-    background: ${variant === "transparent" ? "transparent" : "var(--colorsUtilityMajor025)"};
+    background: ${getBackgroundColor(variant)};
     border-top: 1px solid var(--colorsUtilityMajor100);
   `}
 `;

package/esm/components/tile/tile.component.js

@@ -4,8 +4,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import propTypes from "@styled-system/prop-types";
 import { StyledTile, TileContent } from "./tile.style.js";
-
-const Tile = ({
+export const Tile = ({
   variant = "tile",
   p = 3,
   children,
@@ -48,6 +47,8 @@ const Tile = ({
     p: p
   }, props), wrappedChildren);
 };
+/** TODO: When we convert this to typescript, dynamically pull the border tokens for borderWidth
+ * See how the Box component does this with boxShadows for an example */
 
 Tile.propTypes = {
   /** Styled system spacing props */
@@ -72,6 +73,12 @@ Tile.propTypes = {
    * Set a percentage-based width for the whole Tile component, relative to its parent.
    * If unset or zero, this will default to 100%.
    */
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /** Sets the border width by using these design tokens */
+  borderWidth: PropTypes.oneOf(["borderWidth000", "borderWidth100", "borderWidth200", "borderWidth300", "borderWidth400"]),
+
+  /** Sets the border variant that should be used */
+  borderVariant: PropTypes.oneOf(["default", "selected", "positive", "negative", "caution", "info"])
 };
 export default Tile;

package/esm/components/tile/tile.d.ts

@@ -24,6 +24,21 @@ export interface TileProps extends SpaceProps {
    * If unset or zero, this will default to 100%.
    */
   width?: string | number;
+  /** Sets the border width by using these design tokens */
+  borderWidth?:
+    | "borderWidth000"
+    | "borderWidth100"
+    | "borderWidth200"
+    | "borderWidth300"
+    | "borderWidth400";
+  /** Sets the border variant that should be used */
+  borderVariant?:
+    | "default"
+    | "selected"
+    | "positive"
+    | "negative"
+    | "caution"
+    | "info";
 }
 
 declare function Tile(props: TileProps): JSX.Element;

package/esm/components/tile/tile.style.js

@@ -3,6 +3,29 @@ import PropTypes from "prop-types";
 import { space } from "styled-system";
 import baseTheme from "../../style/themes/base";
 import computeWidth from "../../style/utils/width";
+
+const getBorderColor = borderVariant => {
+  switch (borderVariant) {
+    case "selected":
+      return "var(--colorsUtilityYin100)";
+
+    case "positive":
+      return "var(--colorsSemanticPositive500)";
+
+    case "negative":
+      return "var(--colorsSemanticNegative500)";
+
+    case "caution":
+      return "var(--colorsSemanticCaution500)";
+
+    case "info":
+      return "var(--colorsSemanticInfo500)";
+
+    default:
+      return "var(--colorsUtilityMajor100)";
+  }
+};
+
 const TileContent = styled.div`
   ${({
   isHorizontal,
@@ -59,12 +82,14 @@ const StyledTile = styled.div`
   ${({
   isHorizontal,
   tileTheme,
-  width
+  width,
+  borderWidth = "borderWidth100",
+  borderVariant
 }) => css`
     ${space}
 
     box-sizing: border-box;
-    border: 1px solid var(--colorsUtilityMajor100);
+    border: var(--${borderWidth}) solid ${getBorderColor(borderVariant)};
 
     ${tileTheme === "tile" && css`
       background-color: var(--colorsUtilityYang100);
@@ -99,7 +124,9 @@ StyledTile.propTypes = {
   orientation: PropTypes.string,
   padding: PropTypes.string,
   tileTheme: PropTypes.string,
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  borderWidth: PropTypes.string,
+  borderVariant: PropTypes.string
 };
 StyledTile.defaultProps = {
   theme: baseTheme

package/esm/style/design-tokens/debug-theme.util.d.ts

@@ -16,6 +16,7 @@ declare const _default: {
         colorsUtilityMajor050: string;
         colorsUtilityMajor075: string;
         colorsUtilityMajorTransparent: string;
+        colorsUtilityYin100: string;
         colorsUtilityYin030: string;
         colorsUtilityYin055: string;
         colorsUtilityYin065: string;
@@ -117,6 +118,7 @@ declare const _default: {
         colorsSemanticInfoYang100: string;
         colorsLogo: string;
         colorsTransparent: string;
+        colorsYin100: string;
         colorsYin030: string;
         colorsYin055: string;
         colorsYin065: string;
@@ -301,13 +303,25 @@ declare const _default: {
         fontFamiliesIos: string;
         fontFamiliesAndroid: string;
         fontFamiliesOther: string;
+        borderRadius100: string;
+        borderRadius200: string;
+        borderRadius300: string;
+        borderRadius400: string;
         borderRadiusCircle: string;
+        borderRadius025: string;
+        borderRadius050: string;
+        borderRadius000: string;
         typographyAccordionTitleM: string;
+        typographyAccordionTitleS: string;
         typographyAccordionSubtitleM: string;
+        typographyAccordionSubtitleS: string;
         typographyAccordionParagraphM: string;
+        typographyAccordionParagraphS: string;
         typographyActionPopoverMenuItemM: string;
         typographyAnchorNavLabelM: string;
         typographyBadgeLabelM: string;
+        typographyBreadcrumbSeparatorM: string;
+        typographyBreadcrumbCurrentPageM: string;
         typographyButtonLabelS: string;
         typographyButtonLabelM: string;
         typographyButtonLabelL: string;
@@ -327,7 +341,7 @@ declare const _default: {
         typographyDialogTitleL: string;
         typographyDialogTitleXl: string;
         typographyDialogTitleXxl: string;
-        typographyDialogSubtitle: string;
+        typographyDialogSubtitleM: string;
         typographyDialogParagraphXs: string;
         typographyDialogParagraphS: string;
         typographyDialogParagraphMs: string;

package/esm/style/themes/sage/index.d.ts

@@ -16,6 +16,7 @@ declare var _default: {
         colorsUtilityMajor050: string;
         colorsUtilityMajor075: string;
         colorsUtilityMajorTransparent: string;
+        colorsUtilityYin100: string;
         colorsUtilityYin030: string;
         colorsUtilityYin055: string;
         colorsUtilityYin065: string;
@@ -117,6 +118,7 @@ declare var _default: {
         colorsSemanticInfoYang100: string;
         colorsLogo: string;
         colorsTransparent: string;
+        colorsYin100: string;
         colorsYin030: string;
         colorsYin055: string;
         colorsYin065: string;
@@ -301,13 +303,25 @@ declare var _default: {
         fontFamiliesIos: string;
         fontFamiliesAndroid: string;
         fontFamiliesOther: string;
+        borderRadius100: string;
+        borderRadius200: string;
+        borderRadius300: string;
+        borderRadius400: string;
         borderRadiusCircle: string;
+        borderRadius025: string;
+        borderRadius050: string;
+        borderRadius000: string;
         typographyAccordionTitleM: string;
+        typographyAccordionTitleS: string;
         typographyAccordionSubtitleM: string;
+        typographyAccordionSubtitleS: string;
         typographyAccordionParagraphM: string;
+        typographyAccordionParagraphS: string;
         typographyActionPopoverMenuItemM: string;
         typographyAnchorNavLabelM: string;
         typographyBadgeLabelM: string;
+        typographyBreadcrumbSeparatorM: string;
+        typographyBreadcrumbCurrentPageM: string;
         typographyButtonLabelS: string;
         typographyButtonLabelM: string;
         typographyButtonLabelL: string;
@@ -327,7 +341,7 @@ declare var _default: {
         typographyDialogTitleL: string;
         typographyDialogTitleXl: string;
         typographyDialogTitleXxl: string;
-        typographyDialogSubtitle: string;
+        typographyDialogSubtitleM: string;
         typographyDialogParagraphXs: string;
         typographyDialogParagraphS: string;
         typographyDialogParagraphMs: string;

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

@@ -22,6 +22,8 @@ export interface CardProps extends MarginProps {
     children: React.ReactNode;
     /** Flag to indicate if card is draggable */
     draggable?: boolean;
+    /** Height of the component (any valid CSS value) */
+    height?: string;
     /** Flag to indicate if card is interactive */
     interactive?: boolean;
     /** Size of card for applying padding */
@@ -32,7 +34,7 @@ export interface CardProps extends MarginProps {
     hoverBoxShadow?: BoxShadowsType;
 }
 declare const Card: {
-    ({ "data-element": dataElement, "data-role": dataRole, dataRole: oldDataRole, action, children, cardWidth, draggable, interactive, spacing, boxShadow, hoverBoxShadow, ...rest }: CardProps): JSX.Element;
+    ({ "data-element": dataElement, "data-role": dataRole, dataRole: oldDataRole, action, children, cardWidth, draggable, height, interactive, spacing, boxShadow, hoverBoxShadow, ...rest }: CardProps): JSX.Element;
     displayName: string;
 };
 export default Card;

package/lib/components/card/card.component.js

@@ -41,6 +41,7 @@ const Card = ({
   children,
   cardWidth = "500px",
   draggable,
+  height,
   interactive,
   spacing = "medium",
   boxShadow,
@@ -80,7 +81,8 @@ const Card = ({
     spacing: spacing,
     boxShadow: boxShadow,
     hoverBoxShadow: hoverBoxShadow,
-    onClick: interactive && !draggable ? action : undefined
+    onClick: interactive && !draggable ? action : undefined,
+    height: height
   }, interactive && {
     tabIndex: 0,
     type: "button"
@@ -98,6 +100,7 @@ Card.propTypes = {
   "data-role": _propTypes.default.string,
   "dataRole": _propTypes.default.string,
   "draggable": _propTypes.default.bool,
+  "height": _propTypes.default.string,
   "hoverBoxShadow": _propTypes.default.any,
   "interactive": _propTypes.default.bool,
   "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({

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

@@ -7,6 +7,7 @@ export interface StyledCardProps extends MarginProps {
     cardWidth: string;
     interactive: boolean;
     draggable: boolean;
+    height?: string;
     spacing: CardSpacing;
     boxShadow?: BoxShadowsType;
     hoverBoxShadow?: BoxShadowsType;

package/lib/components/card/card.style.js

@@ -27,6 +27,7 @@ const StyledCard = _styledComponents.default.div`
   cardWidth,
   interactive,
   draggable,
+  height,
   spacing,
   boxShadow = "boxShadow050",
   hoverBoxShadow = "boxShadow100"
@@ -35,12 +36,16 @@ const StyledCard = _styledComponents.default.div`
     border: none;
     box-shadow: var(--${boxShadow});
     color: var(--colorsUtilityYin090);
+    display: flex;
+    flex-direction: column;
+    height: ${height};
+    justify-content: space-between;
     margin: 25px;
+    outline: none;
     padding: ${paddingSizes[spacing]};
     transition: all 0.3s ease-in-out;
     vertical-align: top;
     width: ${cardWidth};
-    outline: none;
     ${_styledSystem.margin}
 
     ${interactive && (0, _styledComponents.css)`

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

@@ -0,0 +1,37 @@
+import React from "react";
+import { DialogProps } from "../dialog";
+import { IconType } from "../icon";
+export interface ConfirmProps extends Omit<DialogProps, "className" | "disableFocusTrap" | "bespokeFocusTrap" | "focusableSelectors" | "help" | "role" | "contentPadding" | "focusableContainers" | "ariaRole" | "timeout" | "enableBackgroundUI" | "disableClose"> {
+    /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" */
+    cancelButtonType?: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground";
+    /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" */
+    confirmButtonType?: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground";
+    /** Customise the cancel button label */
+    cancelLabel?: string;
+    /** Customise the confirm button label */
+    confirmLabel?: string;
+    /** Apply destructive style to the cancel button */
+    cancelButtonDestructive?: boolean;
+    /** Apply destructive style to the confirm button */
+    confirmButtonDestructive?: boolean;
+    /** Defines a cancel button Icon position related to the children: "before" | "after" */
+    cancelButtonIconPosition?: "before" | "after";
+    /** Defines an Icon type within the cancel button (see Icon for options) */
+    cancelButtonIconType?: IconType;
+    /** Defines a cancel button Icon position related to the children: "before" | "after" */
+    confirmButtonIconPosition?: "before" | "after";
+    /** Defines an Icon type within the confirm button (see Icon for options) */
+    confirmButtonIconType?: IconType;
+    /** Makes cancel button disabled */
+    disableCancel?: boolean;
+    /** Makes confirm button disabled */
+    disableConfirm?: boolean;
+    /** Defines an Icon type within the button (see Icon for options) */
+    iconType?: "error" | "warning";
+    /** Adds isLoading state into confirm button */
+    isLoadingConfirm?: boolean;
+    /** A custom event handler when a confirmation takes place */
+    onConfirm: (ev: React.MouseEvent<HTMLButtonElement>) => void;
+}
+export declare const Confirm: ({ "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, open, children, cancelButtonDestructive, confirmButtonDestructive, cancelButtonType, confirmButtonType, cancelButtonIconType, cancelButtonIconPosition, confirmButtonIconType, confirmButtonIconPosition, cancelLabel, onCancel, disableCancel, onConfirm, isLoadingConfirm, disableConfirm, confirmLabel, iconType, subtitle, title, size, showCloseIcon, ...rest }: ConfirmProps) => JSX.Element;
+export default Confirm;

package/lib/components/confirm/confirm.component.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Confirm = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -39,10 +39,10 @@ const Confirm = ({
   "aria-label": ariaLabel,
   open,
   children,
-  cancelButtonDestructive,
-  confirmButtonDestructive,
-  cancelButtonType,
-  confirmButtonType,
+  cancelButtonDestructive = false,
+  confirmButtonDestructive = false,
+  cancelButtonType = "secondary",
+  confirmButtonType = "primary",
   cancelButtonIconType,
   cancelButtonIconPosition,
   confirmButtonIconType,
@@ -57,6 +57,8 @@ const Confirm = ({
   iconType,
   subtitle,
   title,
+  size = "extra-small",
+  showCloseIcon = false,
   ...rest
 }) => {
   const l = (0, _useLocale.default)();
@@ -134,123 +136,54 @@ const Confirm = ({
     subtitle: subtitle,
     title: getTitle(),
     "data-component": "confirm",
-    role: "alertdialog"
+    role: "alertdialog",
+    size: size,
+    showCloseIcon: showCloseIcon
   }, ariaProps, rest), children, /*#__PURE__*/_react.default.createElement(_confirm.StyledConfirmButtons, null, renderCancelButton(), renderConfirmButton()));
 };
 
-Confirm.defaultProps = {
-  size: "extra-small",
-  showCloseIcon: false,
-  cancelButtonDestructive: false,
-  confirmButtonDestructive: false,
-  iconType: null,
-  cancelButtonType: "secondary",
-  confirmButtonType: "primary"
-};
+exports.Confirm = Confirm;
 Confirm.propTypes = {
-  /** Prop to specify the aria-describedby property of the component */
   "aria-describedby": _propTypes.default.string,
-
-  /**
-   * Prop to specify the aria-label of the component.
-   * To be used only when the title prop is not defined, and the component is not labelled by any internal element.
-   */
   "aria-label": _propTypes.default.string,
-
-  /**
-   * Prop to specify the aria-labeledby property of the component
-   * To be used when the title prop is a custom React Node,
-   * or the component is labelled by an internal element other than the title.
-   */
   "aria-labelledby": _propTypes.default.string,
-
-  /** Confirm content */
-  children: _propTypes.default.node,
-
-  /** Controls the open state of the component */
-  open: _propTypes.default.bool.isRequired,
-
-  /** A custom close event handler */
-  onCancel: _propTypes.default.func,
-
-  /** Determines if the Esc Key closes the Confirm */
-  disableEscKey: _propTypes.default.bool,
-
-  /** Allows developers to specify a specific height for the Confirm. */
-  height: _propTypes.default.string,
-
-  /** Title displayed at top of component */
-  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
-
-  /** Subtitle displayed at top of component */
-  subtitle: _propTypes.default.string,
-
-  /** Size of component */
-  size: _propTypes.default.oneOf(["auto", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"]),
-
-  /** Determines if the close icon is shown */
-  showCloseIcon: _propTypes.default.bool,
-
-  /** Optional reference to an element meant to be focused on open */
-  focusFirstElement: _propTypes.default.shape({
-    current: _propTypes.default.any
+  "cancelButtonDestructive": _propTypes.default.bool,
+  "cancelButtonIconPosition": _propTypes.default.oneOf(["after", "before"]),
+  "cancelButtonIconType": _propTypes.default.oneOf(["add", "admin", "alert_on", "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", "box_arrow_left", "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", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "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", "sync", "tag", "talk", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
+  "cancelButtonType": _propTypes.default.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
+  "cancelLabel": _propTypes.default.string,
+  "children": _propTypes.default.node,
+  "confirmButtonDestructive": _propTypes.default.bool,
+  "confirmButtonIconPosition": _propTypes.default.oneOf(["after", "before"]),
+  "confirmButtonIconType": _propTypes.default.oneOf(["add", "admin", "alert_on", "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", "box_arrow_left", "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", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "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", "sync", "tag", "talk", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
+  "confirmButtonType": _propTypes.default.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
+  "confirmLabel": _propTypes.default.string,
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
+  "disableAutoFocus": _propTypes.default.bool,
+  "disableCancel": _propTypes.default.bool,
+  "disableConfirm": _propTypes.default.bool,
+  "disableEscKey": _propTypes.default.bool,
+  "focusFirstElement": _propTypes.default.shape({
+    "current": _propTypes.default.oneOfType([_propTypes.default.oneOf([null]), function (props, propName) {
+      if (props[propName] == null) {
+        return new Error("Prop '" + propName + "' is required but wasn't specified");
+      } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error("Expected prop '" + propName + "' to be of type Element");
+      }
+    }]).isRequired
   }),
-
-  /** Disables auto focus functionality on child elements */
-  disableAutoFocus: _propTypes.default.bool,
-
-  /** A custom event handler when a confirmation takes place */
-  onConfirm: _propTypes.default.func.isRequired,
-
-  /** Customise the confirm button label */
-  confirmLabel: _propTypes.default.string,
-
-  /** Customise the cancel button label */
-  cancelLabel: _propTypes.default.string,
-
-  /** Apply destructive style to the cancel button */
-  cancelButtonDestructive: _propTypes.default.bool,
-
-  /** Apply destructive style to the confirm button */
-  confirmButtonDestructive: _propTypes.default.bool,
-
-  /** Defines a cancel button Icon position related to the children: "before" | "after" */
-  cancelButtonIconPosition: _propTypes.default.oneOf(["before", "after"]),
-
-  /**
-   * <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
-   *
-   *  Defines an Icon type within the cancel button (see Icon for options)
-   * */
-  cancelButtonIconType: _propTypes.default.string,
-
-  /** Defines a confirm button Icon position related to the children: "before" | "after" */
-  confirmButtonIconPosition: _propTypes.default.oneOf(["before", "after"]),
-
-  /**
-   *  <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
-   *
-   * Defines an Icon type within the confirm button (see Icon for options)
-   * */
-  confirmButtonIconType: _propTypes.default.string,
-
-  /** Defines an Icon type within the button (see Icon for options) */
-  iconType: _propTypes.default.oneOf(["error", "warning"]),
-
-  /** Makes cancel button disabled */
-  disableCancel: _propTypes.default.bool,
-
-  /** Makes confirm button disabled */
-  disableConfirm: _propTypes.default.bool,
-
-  /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" */
-  cancelButtonType: _propTypes.default.oneOf(["primary", "secondary", "tertiary", "dashed", "darkBackground"]),
-
-  /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" */
-  confirmButtonType: _propTypes.default.oneOf(["primary", "secondary", "tertiary", "dashed", "darkBackground"]),
-
-  /** Adds isLoading state into confirm button */
-  isLoadingConfirm: _propTypes.default.bool
+  "height": _propTypes.default.string,
+  "iconType": _propTypes.default.oneOf(["error", "warning"]),
+  "isLoadingConfirm": _propTypes.default.bool,
+  "onCancel": _propTypes.default.func,
+  "onConfirm": _propTypes.default.func.isRequired,
+  "open": _propTypes.default.bool.isRequired,
+  "showCloseIcon": _propTypes.default.bool,
+  "size": _propTypes.default.oneOf(["auto", "extra-large", "extra-small", "large", "medium-large", "medium-small", "medium", "small"]),
+  "subtitle": _propTypes.default.string,
+  "title": _propTypes.default.node
 };
 var _default = Confirm;
 exports.default = _default;

package/lib/components/confirm/confirm.config.d.ts

@@ -0,0 +1 @@
+export declare const CONFIRM_SIZES: string[];

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

@@ -0,0 +1,5 @@
+import { ConfirmProps } from ".";
+export declare const StyledConfirmButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledConfirmHeading: import("styled-components").StyledComponent<"div", any, {
+    type: ConfirmProps["iconType"];
+}, never>;

package/lib/components/confirm/confirm.style.js

@@ -7,8 +7,6 @@ exports.StyledConfirmHeading = exports.StyledConfirmButtons = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
 
 var _heading = require("../heading/heading.style");
@@ -48,7 +46,4 @@ const StyledConfirmHeading = _styledComponents.default.div`
       `}
   }
 `;
-exports.StyledConfirmHeading = StyledConfirmHeading;
-StyledConfirmHeading.propTypes = {
-  type: _propTypes.default.oneOf(["error", "warning"])
-};
+exports.StyledConfirmHeading = StyledConfirmHeading;

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

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

package/lib/components/dialog-full-screen/content.style.d.ts

@@ -0,0 +1,7 @@
+declare type StyledContentProps = {
+    hasHeader: boolean;
+    hasStickyFooter: boolean;
+    disableContentPadding?: boolean;
+};
+declare const StyledContent: import("styled-components").StyledComponent<"div", any, StyledContentProps, never>;
+export default StyledContent;