carbon-react 104.34.0 → 104.36.0

package/esm/components/checkbox/checkbox.style.d.ts

@@ -0,0 +1,3 @@
+export default CheckboxStyle;
+export const StyledCheckboxGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const CheckboxStyle: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/checkbox/checkbox.style.js

@@ -0,0 +1,236 @@
+import styled, { css } from "styled-components";
+import { margin } from "styled-system";
+import PropTypes from "prop-types";
+import { StyledCheckableInput } from "../../__internal__/checkable-input/checkable-input.style";
+import StyledFieldHelp from "../../__internal__/field-help/field-help.style";
+import StyledHiddenCheckableInput from "../../__internal__/checkable-input/hidden-checkable-input.style";
+import StyledCheckableInputSvgWrapper from "../../__internal__/checkable-input/checkable-input-svg-wrapper.style";
+import StyledLabel, { StyledLabelContainer } from "../../__internal__/label/label.style";
+import StyledValidationIcon from "../../__internal__/validations/validation-icon.style";
+import StyledFormField from "../../__internal__/form-field/form-field.style";
+import StyledIcon from "../icon/icon.style";
+import baseTheme from "../../style/themes/base";
+const CheckboxStyle = styled.div`
+  ${margin}
+  ${({
+  disabled,
+  error,
+  warning,
+  info,
+  fieldHelpInline,
+  labelSpacing,
+  inputWidth,
+  reverse,
+  size,
+  adaptiveSpacingSmallScreen
+}) => css`
+    ${adaptiveSpacingSmallScreen && "margin-left: 0;"}
+
+    ${StyledCheckableInput} {
+      padding-top: 1px;
+    }
+
+    ${StyledCheckableInputSvgWrapper} {
+      height: 16px;
+    }
+
+    svg {
+      background-color: var(--colorsUtilityYang100);
+      ${!disabled && css`
+        border: 1px solid var(--colorsUtilityMajor300);
+
+        ${info && `border: 1px solid var(--colorsSemanticInfo500);`}
+        ${warning && `border: 1px solid var(--colorsSemanticCaution500);`}
+        ${error && `border: 2px solid var(--colorsSemanticNegative500);`}
+      `}
+    }
+
+    ${StyledHiddenCheckableInput},
+    svg {
+      height: 16px;
+      position: absolute;
+      padding: 1px;
+    }
+
+    ${StyledCheckableInput},
+    ${StyledHiddenCheckableInput},
+    ${StyledCheckableInputSvgWrapper},
+    svg {
+      box-sizing: border-box;
+      min-width: 16px;
+      width: 16px;
+    }
+
+    // prettier-ignore
+    ${StyledHiddenCheckableInput}:not([disabled]) {
+      &:focus + ${StyledCheckableInputSvgWrapper},
+      &:hover + ${StyledCheckableInputSvgWrapper} {
+        box-shadow: 0 0 0 3px var(--colorsSemanticFocus500);
+      }
+    }
+
+    ${StyledLabelContainer} {
+      width: auto;
+      flex: 0 1 auto;
+    }
+
+    ${StyledFieldHelp} {
+      margin-left: 16px;
+      margin-top: 0;
+      padding-left: ${labelSpacing === 1 ? "var(--spacing100)" : "var(--spacing200)"};
+    }
+
+    ${StyledValidationIcon} {
+      position: relative;
+      display: inline-block;
+    }
+
+    ${size === "large" && css`
+      ${StyledCheckableInputSvgWrapper} {
+        height: 24px;
+      }
+
+      ${StyledCheckableInput},
+      ${StyledHiddenCheckableInput},
+      ${StyledCheckableInputSvgWrapper},
+      svg {
+        height: 24px;
+        width: 24px;
+      }
+
+      ${StyledFieldHelp} {
+        margin-left: 24px;
+        padding-left: ${labelSpacing === 1 ? "var(--spacing100)" : "var(--spacing200)"};
+      }
+
+      ${fieldHelpInline && css`
+        ${StyledFieldHelp}, ${StyledLabelContainer} {
+          align-self: center;
+        }
+      `}
+    `}
+
+    ${StyledHiddenCheckableInput}:checked ~ ${StyledCheckableInputSvgWrapper} svg path {
+      fill: var(--colorsUtilityYin090);
+    }
+
+    ${disabled && css`
+      svg {
+        background-color: var(--colorsUtilityDisabled400);
+        border: 1px solid var(--colorsUtilityDisabled600);
+      }
+
+      svg path {
+        fill: var(--colorsUtilityDisabled400);
+      }
+
+      ${StyledHiddenCheckableInput}:checked ~ ${StyledCheckableInputSvgWrapper} svg path {
+        fill: var(--colorsUtilityYin030);
+      }
+
+      ${StyledCheckableInputSvgWrapper} {
+        &:hover,
+        &:focus {
+          outline: none;
+          cursor: not-allowed;
+        }
+      }
+    `}
+
+    ${fieldHelpInline && `
+      ${StyledFieldHelp} {
+        margin-left: 0;
+      }
+
+      ${StyledLabel} {
+        flex: 0 1 auto;
+      }
+    `}
+
+    ${inputWidth !== undefined && inputWidth !== 0 && `
+      ${StyledFieldHelp} {
+        ${reverse ? "margin-right" : "margin-left"}: ${inputWidth}% !important;
+      }
+    `}
+
+    ${reverse && css`
+      ${StyledFieldHelp} {
+        margin-left: 0;
+        padding-left: 0;
+      }
+
+      ${StyledLabel} {
+        flex: 0 1 auto;
+      }
+
+      ${fieldHelpInline && css`
+        ${StyledCheckableInput} {
+          margin-right: 8px;
+        }
+
+        ${StyledFieldHelp} {
+          padding-left: 6px;
+        }
+      `}
+    `}
+  `}
+`;
+CheckboxStyle.defaultProps = {
+  theme: baseTheme
+};
+CheckboxStyle.propTypes = {
+  disabled: PropTypes.bool,
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  fieldHelpInline: PropTypes.bool,
+  inputWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  size: PropTypes.string,
+  labelSpacing: PropTypes.oneOf([1, 2]),
+  reverse: PropTypes.bool,
+  adaptiveSpacingSmallScreen: PropTypes.bool
+};
+const StyledCheckboxGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  ${StyledIcon}::before {
+    font-size: 16px;
+  }
+
+  && ${StyledFormField} {
+    margin: 0;
+  }
+
+  & ${CheckboxStyle} {
+    margin-bottom: var(--spacing150);
+
+    :last-of-type {
+      margin-bottom: 0;
+    }
+  }
+
+  & > ${StyledFormField} {
+    & > ${StyledLabelContainer} {
+      margin-bottom: 4px;
+      vertical-align: middle;
+
+      ${StyledValidationIcon} {
+        display: inline-block;
+      }
+    }
+  }
+
+  ${({
+  legendInline
+}) => legendInline && css`
+      ${CheckboxStyle}:first-child {
+        padding-top: 4px;
+      }
+    `}
+`;
+StyledCheckboxGroup.propTypes = {
+  legendInline: PropTypes.bool
+};
+export { StyledCheckboxGroup };
+export default CheckboxStyle;

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

@@ -0,0 +1,2 @@
+export { default as CheckboxGroup } from "./checkbox-group";
+export { Checkbox } from "./checkbox";

package/esm/components/checkbox/index.js

@@ -0,0 +1,2 @@
+export { default as Checkbox } from "./checkbox.component";
+export { default as CheckboxGroup } from "./checkbox-group.component";

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

@@ -0,0 +1,120 @@
+export default Confirm;
+declare function Confirm({ "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, open, children, destructive, cancelButtonDestructive, confirmButtonDestructive, cancelButtonType, confirmButtonType, cancelButtonIconType, cancelButtonIconPosition, confirmButtonIconType, confirmButtonIconPosition, cancelLabel, onCancel, disableCancel, onConfirm, isLoadingConfirm, disableConfirm, confirmLabel, iconType, subtitle, title, ...rest }: {
+    [x: string]: any;
+    "aria-labelledby": any;
+    "aria-describedby": any;
+    "aria-label": any;
+    open: any;
+    children: any;
+    destructive: any;
+    cancelButtonDestructive: any;
+    confirmButtonDestructive: any;
+    cancelButtonType: any;
+    confirmButtonType: any;
+    cancelButtonIconType: any;
+    cancelButtonIconPosition: any;
+    confirmButtonIconType: any;
+    confirmButtonIconPosition: any;
+    cancelLabel: any;
+    onCancel: any;
+    disableCancel: any;
+    onConfirm: any;
+    isLoadingConfirm: any;
+    disableConfirm: any;
+    confirmLabel: any;
+    iconType: any;
+    subtitle: any;
+    title: any;
+}): JSX.Element;
+declare namespace Confirm {
+    namespace defaultProps {
+        const size: string;
+        const showCloseIcon: boolean;
+        const destructive: boolean;
+        const cancelButtonDestructive: boolean;
+        const confirmButtonDestructive: boolean;
+        const iconType: null;
+        const cancelButtonType: string;
+        const confirmButtonType: string;
+    }
+    const propTypes: {
+        /** Prop to specify the aria-describedby property of the component */
+        "aria-describedby": PropTypes.Requireable<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.Requireable<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.Requireable<string>;
+        /** Confirm content */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /** Controls the open state of the component */
+        open: PropTypes.Validator<boolean>;
+        /** A custom close event handler */
+        onCancel: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Determines if the Esc Key closes the Confirm */
+        disableEscKey: PropTypes.Requireable<boolean>;
+        /** Allows developers to specify a specific height for the Confirm. */
+        height: PropTypes.Requireable<string>;
+        /** Title displayed at top of component */
+        title: PropTypes.Requireable<string | object>;
+        /** Subtitle displayed at top of component */
+        subtitle: PropTypes.Requireable<string>;
+        /** Size of component */
+        size: PropTypes.Requireable<string>;
+        /** Determines if the close icon is shown */
+        showCloseIcon: PropTypes.Requireable<boolean>;
+        /** Optional reference to an element meant to be focused on open */
+        focusFirstElement: PropTypes.Requireable<PropTypes.InferProps<{
+            current: PropTypes.Requireable<any>;
+        }>>;
+        /** Disables auto focus functionality on child elements */
+        disableAutoFocus: PropTypes.Requireable<boolean>;
+        /** A custom event handler when a confirmation takes place */
+        onConfirm: PropTypes.Validator<(...args: any[]) => any>;
+        /** Customise the confirm button label */
+        confirmLabel: PropTypes.Requireable<string>;
+        /** Customise the cancel button label */
+        cancelLabel: PropTypes.Requireable<string>;
+        /** Apply destructive style to the buttons */
+        destructive: PropTypes.Requireable<boolean>;
+        /** Apply destructive style to the cancel button */
+        cancelButtonDestructive: PropTypes.Requireable<boolean>;
+        /** Apply destructive style to the confirm button */
+        confirmButtonDestructive: PropTypes.Requireable<boolean>;
+        /** Defines a cancel button Icon position related to the children: "before" | "after" */
+        cancelButtonIconPosition: PropTypes.Requireable<string>;
+        /**
+         * <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.Requireable<string>;
+        /** Defines a confirm button Icon position related to the children: "before" | "after" */
+        confirmButtonIconPosition: PropTypes.Requireable<string>;
+        /**
+         *  <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.Requireable<string>;
+        /** Defines an Icon type within the button (see Icon for options) */
+        iconType: PropTypes.Requireable<string>;
+        /** Makes cancel button disabled */
+        disableCancel: PropTypes.Requireable<boolean>;
+        /** Makes confirm button disabled */
+        disableConfirm: PropTypes.Requireable<boolean>;
+        /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" */
+        cancelButtonType: PropTypes.Requireable<string>;
+        /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" */
+        confirmButtonType: PropTypes.Requireable<string>;
+        /** Adds isLoading state into confirm button */
+        isLoadingConfirm: PropTypes.Requireable<boolean>;
+    };
+}
+import PropTypes from "prop-types";

package/esm/components/confirm/confirm.component.js

@@ -0,0 +1,245 @@
+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); }
+
+import React, { useRef } from "react";
+import PropTypes from "prop-types";
+import createGuid from "../../__internal__/utils/helpers/guid/guid.js";
+import Logger from "../../__internal__/utils/logger";
+import Heading from "../heading";
+import Dialog from "../dialog";
+import { StyledConfirmButtons, StyledConfirmHeading } from "./confirm.style";
+import Button from "../button/button.component";
+import Icon from "../icon";
+import Loader from "../loader";
+import useLocale from "../../hooks/__internal__/useLocale";
+let deprecatedWarnTriggered = false;
+
+const Confirm = ({
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
+  open,
+  children,
+  destructive,
+  cancelButtonDestructive,
+  confirmButtonDestructive,
+  cancelButtonType,
+  confirmButtonType,
+  cancelButtonIconType,
+  cancelButtonIconPosition,
+  confirmButtonIconType,
+  confirmButtonIconPosition,
+  cancelLabel,
+  onCancel,
+  disableCancel,
+  onConfirm,
+  isLoadingConfirm,
+  disableConfirm,
+  confirmLabel,
+  iconType,
+  subtitle,
+  title,
+  ...rest
+}) => {
+  if (!deprecatedWarnTriggered && destructive) {
+    deprecatedWarnTriggered = true;
+    Logger.deprecate("`destructive` prop is deprecated and will soon be removed. Please use `cancelButtonDestructive` and `confirmButtonDestructive` props.");
+  }
+
+  const l = useLocale();
+  const {
+    current: titleId
+  } = useRef(createGuid());
+  const {
+    current: subtitleId
+  } = useRef(createGuid());
+  const ariaProps = {
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-label": ariaLabel
+  };
+
+  if (title && iconType) {
+    ariaProps["aria-labelledby"] = titleId;
+  }
+
+  if (subtitle && iconType) {
+    ariaProps["aria-describedby"] = subtitleId;
+  }
+
+  const renderCancelButton = () => {
+    if (!onCancel) return null;
+    return /*#__PURE__*/React.createElement(Button, {
+      onClick: onCancel,
+      "data-element": "cancel",
+      buttonType: cancelButtonType,
+      destructive: destructive || cancelButtonDestructive,
+      disabled: disableCancel,
+      iconType: cancelButtonIconType,
+      iconPosition: cancelButtonIconPosition
+    }, cancelLabel || l.confirm.no());
+  };
+
+  const renderConfirmButton = () => /*#__PURE__*/React.createElement(Button, {
+    onClick: onConfirm,
+    "data-element": "confirm",
+    buttonType: confirmButtonType,
+    destructive: destructive || confirmButtonDestructive,
+    disabled: isLoadingConfirm || disableConfirm,
+    ml: 2,
+    iconType: confirmButtonIconType,
+    iconPosition: confirmButtonIconPosition
+  }, isLoadingConfirm ? /*#__PURE__*/React.createElement(Loader, {
+    isInsideButton: true,
+    isActive: true
+  }) : confirmLabel || l.confirm.yes());
+
+  const getTitle = () => {
+    if (iconType) {
+      return /*#__PURE__*/React.createElement(StyledConfirmHeading, {
+        type: iconType,
+        "data-element": iconType
+      }, /*#__PURE__*/React.createElement(Icon, {
+        type: iconType,
+        fontSize: "medium"
+      }), /*#__PURE__*/React.createElement(Heading, {
+        title: title,
+        titleId: titleId,
+        subheader: subtitle,
+        subtitleId: subtitleId,
+        divider: false
+      }));
+    }
+
+    return title;
+  };
+
+  return /*#__PURE__*/React.createElement(Dialog, _extends({
+    open: open,
+    onCancel: onCancel,
+    disableClose: disableCancel,
+    subtitle: subtitle,
+    title: getTitle(),
+    "data-component": "confirm",
+    role: "alertdialog"
+  }, ariaProps, rest), children, /*#__PURE__*/React.createElement(StyledConfirmButtons, null, renderCancelButton(), renderConfirmButton()));
+};
+
+Confirm.defaultProps = {
+  size: "extra-small",
+  showCloseIcon: false,
+  destructive: false,
+  cancelButtonDestructive: false,
+  confirmButtonDestructive: false,
+  iconType: null,
+  cancelButtonType: "secondary",
+  confirmButtonType: "primary"
+};
+Confirm.propTypes = {
+  /** Prop to specify the aria-describedby property of the component */
+  "aria-describedby": PropTypes.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.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.string,
+
+  /** Confirm content */
+  children: PropTypes.node,
+
+  /** Controls the open state of the component */
+  open: PropTypes.bool.isRequired,
+
+  /** A custom close event handler */
+  onCancel: PropTypes.func,
+
+  /** Determines if the Esc Key closes the Confirm */
+  disableEscKey: PropTypes.bool,
+
+  /** Allows developers to specify a specific height for the Confirm. */
+  height: PropTypes.string,
+
+  /** Title displayed at top of component */
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+
+  /** Subtitle displayed at top of component */
+  subtitle: PropTypes.string,
+
+  /** Size of component */
+  size: PropTypes.oneOf(["auto", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"]),
+
+  /** Determines if the close icon is shown */
+  showCloseIcon: PropTypes.bool,
+
+  /** Optional reference to an element meant to be focused on open */
+  focusFirstElement: PropTypes.shape({
+    current: PropTypes.any
+  }),
+
+  /** Disables auto focus functionality on child elements */
+  disableAutoFocus: PropTypes.bool,
+
+  /** A custom event handler when a confirmation takes place */
+  onConfirm: PropTypes.func.isRequired,
+
+  /** Customise the confirm button label */
+  confirmLabel: PropTypes.string,
+
+  /** Customise the cancel button label */
+  cancelLabel: PropTypes.string,
+
+  /** Apply destructive style to the buttons */
+  destructive: PropTypes.bool,
+
+  /** Apply destructive style to the cancel button */
+  cancelButtonDestructive: PropTypes.bool,
+
+  /** Apply destructive style to the confirm button */
+  confirmButtonDestructive: PropTypes.bool,
+
+  /** Defines a cancel button Icon position related to the children: "before" | "after" */
+  cancelButtonIconPosition: PropTypes.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.string,
+
+  /** Defines a confirm button Icon position related to the children: "before" | "after" */
+  confirmButtonIconPosition: PropTypes.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.string,
+
+  /** Defines an Icon type within the button (see Icon for options) */
+  iconType: PropTypes.oneOf(["error", "warning"]),
+
+  /** Makes cancel button disabled */
+  disableCancel: PropTypes.bool,
+
+  /** Makes confirm button disabled */
+  disableConfirm: PropTypes.bool,
+
+  /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" */
+  cancelButtonType: PropTypes.oneOf(["primary", "secondary", "tertiary", "dashed", "darkBackground"]),
+
+  /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" */
+  confirmButtonType: PropTypes.oneOf(["primary", "secondary", "tertiary", "dashed", "darkBackground"]),
+
+  /** Adds isLoading state into confirm button */
+  isLoadingConfirm: PropTypes.bool
+};
+export default Confirm;

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

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

package/esm/components/confirm/confirm.config.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export const CONFIRM_SIZES = ["extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"];

package/esm/components/confirm/confirm.d.ts

@@ -0,0 +1,52 @@
+import { IconType } from "components/icon/icon";
+import * as React from "react";
+import { DialogProps } from "../dialog/dialog";
+
+export interface ConfirmProps extends DialogProps {
+  /** 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 buttons */
+  destructive?: boolean;
+  /** 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;
+}
+
+declare class Confirm extends React.Component<ConfirmProps> {}
+
+export default Confirm;

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

@@ -0,0 +1,2 @@
+export const StyledConfirmButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledConfirmHeading: import("styled-components").StyledComponent<"div", any, {}, never>;