carbon-react 104.34.1 → 104.35.0

package/esm/components/flat-table/flat-table.component.js

@@ -0,0 +1,112 @@
+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 from "react";
+import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
+import { StyledFlatTableWrapper, StyledFlatTable, StyledFlatTableFooter } from "./flat-table.style";
+import { DrawerSidebarContext } from "../drawer";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+export const FlatTableThemeContext = /*#__PURE__*/React.createContext({});
+const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
+const FlatTable = ({
+  caption,
+  children,
+  hasStickyHead,
+  colorTheme,
+  footer,
+  hasStickyFooter = false,
+  height,
+  isZebra,
+  size,
+  hasMaxHeight = false,
+  ariaDescribedby,
+  minHeight,
+  overflowX,
+  ...rest
+}) => {
+  const addDefaultHeight = !height && (hasStickyHead || hasStickyFooter);
+  const tableStylingProps = {
+    caption,
+    isZebra,
+    size
+  };
+
+  if (ariaDescribedby) {
+    tableStylingProps["aria-describedby"] = ariaDescribedby;
+  }
+
+  return /*#__PURE__*/React.createElement(DrawerSidebarContext.Consumer, null, ({
+    isInSidebar
+  }) => /*#__PURE__*/React.createElement(StyledFlatTableWrapper, _extends({
+    isInSidebar: isInSidebar,
+    hasStickyHead: hasStickyHead,
+    colorTheme: colorTheme,
+    minHeight: minHeight,
+    overflowY: !isInSidebar && (hasStickyHead || hasStickyFooter) ? "auto" : undefined,
+    height: addDefaultHeight && !hasMaxHeight ? "99%" : height,
+    maxHeight: hasMaxHeight ? "100%" : undefined,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: hasStickyFooter || height ? "space-between" : undefined,
+    tabIndex: "0",
+    role: "region",
+    overflowX: overflowX
+  }, rest), /*#__PURE__*/React.createElement(StyledFlatTable, _extends({
+    "data-component": "flat-table"
+  }, tableStylingProps), caption ? /*#__PURE__*/React.createElement("caption", null, caption) : null, /*#__PURE__*/React.createElement(FlatTableThemeContext.Provider, {
+    value: {
+      colorTheme,
+      size
+    }
+  }, children)), footer && /*#__PURE__*/React.createElement(StyledFlatTableFooter, {
+    hasStickyFooter: hasStickyFooter
+  }, footer)));
+};
+
+FlatTable.propTypes = { ...marginPropTypes,
+
+  /** The HTML id of the element that contains a description of this table. */
+  ariaDescribedby: PropTypes.string,
+
+  /** A string to render as the table's caption */
+  caption: PropTypes.string,
+
+  /** FlatTableHead and FlatTableBody */
+  children: PropTypes.node.isRequired,
+
+  /** If true, the header does not scroll with the content */
+  hasStickyHead: PropTypes.bool,
+
+  /** `FlatTable` color theme */
+  colorTheme: PropTypes.oneOf(["light", "transparent-base", "transparent-white", "dark"]),
+
+  /** Content to be rendered at the foot of the table */
+  footer: PropTypes.node,
+
+  /** If true, the header does not scroll with the content */
+  hasStickyFooter: PropTypes.bool,
+
+  /** Set the height of the table. String can be any valid CSS string, numbers will be converted to pixels. */
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /** Set the min-height of the table. A string can be any valid CSS string, numbers will be converted to pixels. */
+  minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /** Toggles the zebra striping for the table rows */
+  isZebra: PropTypes.bool,
+
+  /** Used to define the tables size Renders as: 'compact', 'small', 'medium', 'large' and 'extraLarge' */
+  size: PropTypes.oneOf(["compact", "small", "medium", "large", "extraLarge"]),
+
+  /** Applies max-height of 100% to FlatTable if true */
+  hasMaxHeight: PropTypes.bool,
+
+  /** Set the overflow X of the table wrapper. Any valid CSS string */
+  overflowX: PropTypes.string
+};
+FlatTable.defaultProps = {
+  colorTheme: "dark",
+  size: "medium"
+};
+export default FlatTable;

package/esm/components/flat-table/flat-table.config.d.ts

@@ -0,0 +1,2 @@
+export const FLAT_TABLE_THEMES: string[];
+export const FLAT_TABLE_SIZES: string[];

package/esm/components/flat-table/flat-table.config.js

@@ -0,0 +1,2 @@
+export const FLAT_TABLE_THEMES = ["light", "dark", "transparent-base", "transparent-white"];
+export const FLAT_TABLE_SIZES = ["compact", "small", "medium", "large"];

package/esm/components/flat-table/flat-table.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { MarginProps } from "styled-system";
+
+export interface FlatTableProps extends MarginProps {
+  /** The HTML id of the element that contains a description of this table. */
+  ariaDescribedby?: string;
+  /** A string to render as the table's caption */
+  caption?: string;
+  /** FlatTableHead and FlatTableBody */
+  children: React.ReactNode;
+  /** `FlatTable` color theme */
+  colorTheme?: "light" | "transparent-base" | "transparent-white" | "dark";
+  /** Content to be rendered at the foot of the table */
+  footer?: React.ReactNode;
+  /** If true, the header does not scroll with the content */
+  hasStickyFooter?: boolean;
+  /** If true, the header does not scroll with the content */
+  hasStickyHead?: boolean;
+  /** Set the height of the table. String can be any valid CSS string, numbers will be converted to pixels. */
+  height?: string | number;
+  /** Set the min-height of the table. String can be any valid CSS string, numbers will be converted to pixels. */
+  minHeight?: string | number;
+  /** Toggles the zebra striping for the table rows */
+  isZebra?: boolean;
+  /** Used to define the tables size Renders as: 'compact', 'small', 'medium', 'large' and 'extraLarge' */
+  size?: "compact" | "small" | "medium" | "large" | "extraLarge";
+  /** Applies max-height of 100% to FlatTable if true */
+  hasMaxHeight?: boolean;
+}
+
+declare function FlatTable(props: FlatTableProps): JSX.Element;
+
+export default FlatTable;

package/esm/components/flat-table/flat-table.style.d.ts

@@ -0,0 +1,4 @@
+export const StyledFlatTableWrapper: import("styled-components").StyledComponent<typeof Box, any, {}, never>;
+export const StyledFlatTable: import("styled-components").StyledComponent<"table", any, {}, never>;
+export const StyledFlatTableFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
+import Box from "../box";

package/esm/components/flat-table/flat-table.style.js

@@ -0,0 +1,193 @@
+import styled, { css } from "styled-components";
+import StyledFlatTableHeader from "./flat-table-header/flat-table-header.style";
+import StyledFlatTableRow from "./flat-table-row/flat-table-row.style";
+import { StyledFlatTableRowHeader } from "./flat-table-row-header/flat-table-row-header.style";
+import StyledFlatTableHead from "./flat-table-head/flat-table-head.style";
+import StyledFlatTableCheckbox from "./flat-table-checkbox/flat-table-checkbox.style";
+import { baseTheme } from "../../style/themes";
+import { StyledFlatTableCell } from "./flat-table-cell/flat-table-cell.style";
+import cellSizes from "./cell-sizes.style";
+import Box from "../box";
+const StyledFlatTable = styled.table`
+  border-collapse: separate;
+  border-radius: 0px;
+  border-spacing: 0;
+  min-width: 100%;
+  width: 100%;
+
+  ${({
+  caption
+}) => caption && css`
+      caption {
+        clip: rect(1px, 1px, 1px, 1px);
+        height: 1px;
+        overflow: hidden;
+        width: 1px;
+        position: absolute;
+        top: -99999px;
+      }
+    `}
+
+  ${({
+  size
+}) => {
+  const {
+    height,
+    fontSize,
+    paddingSize
+  } = cellSizes[size];
+  return css`
+      ${StyledFlatTableRow} {
+        height: ${height};
+      }
+
+      ${StyledFlatTableCell} > div,
+      ${StyledFlatTableHeader} > div,
+      ${StyledFlatTableRowHeader} > div,
+      ${StyledFlatTableCheckbox} > div {
+        font-size: ${fontSize};
+        padding-left: ${paddingSize};
+        padding-right: ${paddingSize};
+      }
+    `;
+}}
+
+  ${({
+  isZebra
+}) => isZebra && css`
+      ${StyledFlatTableRow}:nth-child(2n) {
+        ${StyledFlatTableRowHeader},
+        ${StyledFlatTableCell},
+        ${StyledFlatTableCheckbox} {
+          background-color: var(--colorsUtilityMajor010);
+        }
+      }
+      ${StyledFlatTableRow}:hover {
+        ${StyledFlatTableCell},
+        ${StyledFlatTableRowHeader},
+        ${StyledFlatTableCheckbox} {
+          background-color: var(--colorsUtilityMajor025);
+        }
+      }
+    `}
+`;
+StyledFlatTable.defaultProps = {
+  size: "medium"
+};
+const StyledFlatTableWrapper = styled(Box)`
+  ${({
+  isInSidebar
+}) => css`
+      box-sizing: border-box;
+
+      :focus {
+        outline: 2px solid var(--colorsSemanticFocus500);
+
+        :not(:focus-visible) {
+          outline: none;
+        }
+
+        :focus-visible {
+          outline: 2px solid var(--colorsSemanticFocus500);
+        }
+      }
+
+      ${isInSidebar ? "min-width: fit-content" : `box-shadow: inset 0px 0px 0px 1px var(--colorsUtilityMajor100)`};
+    `}
+
+  ${({
+  colorTheme
+}) => {
+  switch (colorTheme) {
+    case "light":
+      return css`
+          ${StyledFlatTableHeader},
+          ${StyledFlatTableHead} ${StyledFlatTableRowHeader},
+          ${StyledFlatTableHead} ${StyledFlatTableCheckbox} {
+            background-color: var(--colorsUtilityMajor100);
+            border-right: 1px solid var(--colorsUtilityMajor150);
+            border-bottom-color: var(--colorsUtilityMajor100);
+          }
+        `;
+
+    case "transparent-base":
+      return css`
+          ${StyledFlatTableHeader},
+          ${StyledFlatTableHead} ${StyledFlatTableRowHeader},
+          ${StyledFlatTableHead} ${StyledFlatTableCheckbox} {
+            background-color: var(--colorsUtilityMajor025);
+            border-right: 1px solid var(--colorsUtilityMajor025);
+            border-bottom-color: var(--colorsUtilityMajor100);
+          }
+        `;
+
+    case "transparent-white":
+      return css`
+          ${StyledFlatTableHeader},
+          ${StyledFlatTableHead} ${StyledFlatTableRowHeader},
+          ${StyledFlatTableHead} ${StyledFlatTableCheckbox} {
+            background-color: var(--colorsUtilityYang100);
+            border-right: 1px solid var(--colorsUtilityYang100);
+            border-bottom-color: var(--colorsUtilityMajor100);
+          }
+        `;
+    // default theme is "dark"
+
+    default:
+      return css`
+          ${StyledFlatTableHead} ${StyledFlatTableCheckbox},
+          ${StyledFlatTableHeader},
+          ${StyledFlatTableHead} ${StyledFlatTableRowHeader} {
+            background-color: var(--colorsUtilityMajor400);
+            border-right: 1px solid var(--colorsUtilityMajor300);
+            color: var(--colorsUtilityYang100);
+            border-bottom-color: var(--colorsUtilityMajor300);
+          }
+        `;
+  }
+}}
+
+  ${({
+  isInSidebar
+}) => isInSidebar && css`
+      ${StyledFlatTableHeader}, ${StyledFlatTableHead} ${StyledFlatTableRowHeader},
+      ${StyledFlatTableHead} ${StyledFlatTableCheckbox} {
+        background-color: var(--colorsUtilityMajor040);
+        border-right: 2px solid var(--colorsUtilityMajor040);
+        color: var(--colorsUtilityYin090);
+        border-bottom-color: var(--colorsUtilityMajor100);
+      }
+    `}
+
+  ${({
+  hasStickyHead
+}) => hasStickyHead && css`
+      ${StyledFlatTableHead} th {
+        position: sticky;
+        z-index: ${({
+  theme
+}) => theme.zIndex.overlay};
+      }
+
+      ${StyledFlatTableHead} ${StyledFlatTableRowHeader},
+      ${StyledFlatTableHead} ${StyledFlatTableCheckbox} {
+        z-index: ${({
+  theme
+}) => theme.zIndex.overlay + 2};
+        top: 0;
+        left: 0;
+      }
+    `}
+`;
+StyledFlatTableWrapper.defaultProps = {
+  theme: baseTheme
+};
+const StyledFlatTableFooter = styled.div`
+  ${({
+  hasStickyFooter
+}) => hasStickyFooter && css`
+      position: sticky;
+      bottom: 0px;
+    `}
+`;
+export { StyledFlatTableWrapper, StyledFlatTable, StyledFlatTableFooter };

package/esm/components/flat-table/index.d.ts

@@ -0,0 +1,13 @@
+export type TableBorderSize = "small" | "medium" | "large";
+
+export { default as FlatTable } from "./flat-table";
+export { default as FlatTableHead } from "./flat-table-head";
+export { default as FlatTableHeader } from "./flat-table-header";
+export { default as FlatTableBody } from "./flat-table-body";
+export { default as FlatTableBodyDraggable } from "./flat-table-body-draggable";
+export { default as FlatTableRow } from "./flat-table-row";
+export { default as FlatTableRowHeader } from "./flat-table-row-header";
+export { default as FlatTableCell } from "./flat-table-cell";
+export { default as FlatTableCheckbox } from "./flat-table-checkbox";
+export { default as Sort } from "./sort";
+export * from "./flat-table";

package/esm/components/flat-table/index.js

@@ -0,0 +1,10 @@
+export { default as FlatTable } from "./flat-table.component";
+export { default as FlatTableHead } from "./flat-table-head/flat-table-head.component";
+export { default as FlatTableHeader } from "./flat-table-header/flat-table-header.component";
+export { default as FlatTableBody } from "./flat-table-body/flat-table-body.component";
+export { default as FlatTableRow } from "./flat-table-row/flat-table-row.component";
+export { default as FlatTableRowHeader } from "./flat-table-row-header/flat-table-row-header.component";
+export { default as FlatTableCell } from "./flat-table-cell/flat-table-cell.component";
+export { default as FlatTableCheckbox } from "./flat-table-checkbox/flat-table-checkbox.component";
+export { default as FlatTableBodyDraggable } from "./flat-table-body-draggable/flat-table-body-draggable.component";
+export { default as Sort } from "./sort/sort.component";

package/esm/components/flat-table/sort/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./sort";
+export * from "./sort";

package/esm/components/flat-table/sort/index.js

@@ -0,0 +1 @@
+export { default } from "./sort.component";

package/esm/components/flat-table/sort/sort.component.d.ts

@@ -0,0 +1,14 @@
+export default Sort;
+declare function Sort({ children, onClick, sortType }: {
+    children: any;
+    onClick: any;
+    sortType: any;
+}): JSX.Element;
+declare namespace Sort {
+    namespace propTypes {
+        const sortType: PropTypes.Requireable<string | boolean>;
+        const onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    }
+}
+import PropTypes from "prop-types";

package/esm/components/flat-table/sort/sort.component.js

@@ -0,0 +1,50 @@
+import React, { useRef } from "react";
+import PropTypes from "prop-types";
+import Event from "../../../__internal__/utils/helpers/events";
+import Icon from "../../icon";
+import { StyledSort, StyledSpaceHolder } from "./sort.style";
+import guid from "../../../__internal__/utils/helpers/guid";
+
+const Sort = ({
+  children,
+  onClick,
+  sortType
+}) => {
+  const id = useRef(guid());
+
+  const onKeyDown = e => {
+    if (Event.isEnterOrSpaceKey(e)) {
+      e.preventDefault();
+      return onClick();
+    }
+
+    return null;
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    hidden: true,
+    id: id.current
+  }, children, sortType ? `, sort type ${sortType}` : ", sortable"), /*#__PURE__*/React.createElement(StyledSort, {
+    type: "button",
+    role: "button",
+    onKeyDown: onKeyDown,
+    tabIndex: 0,
+    onClick: onClick,
+    sortType: sortType,
+    "aria-labelledby": id.current
+  }, children, sortType && /*#__PURE__*/React.createElement(Icon, {
+    type: sortType === "ascending" ? "sort_up" : "sort_down"
+  })), !sortType && /*#__PURE__*/React.createElement(StyledSpaceHolder, null));
+};
+
+Sort.propTypes = {
+  /** if `asc` it will show `sort_up` icon, if `desc` it will show `sort_down` */
+  sortType: PropTypes.oneOf(["ascending", "descending", false]),
+
+  /** Callback fired when the `FlatTableSortHeader` is clicked */
+  onClick: PropTypes.func,
+
+  /** The content of `FlatTableSortHeader` */
+  children: PropTypes.node
+};
+export default Sort;

package/esm/components/flat-table/sort/sort.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+
+export interface SortProps {
+  /** if `asc` it will show `sort_up` icon, if `desc` it will show `sort_down` */
+  sortType?: "ascending" | "descending" | false;
+  /** Callback fired when the `FlatTableSortHeader` is clicked */
+  onClick?: () => void;
+  /** Sets the content of `FlatTableSortHeader` */
+  children?: React.ReactNode | string;
+}
+
+declare function Sort(props: SortProps): JSX.Element;
+
+export default Sort;

package/esm/components/flat-table/sort/sort.style.d.ts

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

package/esm/components/flat-table/sort/sort.style.js

@@ -0,0 +1,31 @@
+import styled from "styled-components";
+import StyledIcon from "../../icon/icon.style";
+const StyledSort = styled.div`
+  display: inline-flex;
+  align-items: center;
+  padding-left: 2px;
+  padding-right: 2px;
+  border-bottom: 1px solid transparent;
+  position: relative;
+
+  ${StyledIcon} {
+    width: 16px;
+    height: 16px;
+    padding-left: 6px;
+    color: var(--colorsUtilityMajor200);
+  }
+
+  :hover {
+    border-bottom: 1px solid;
+    cursor: pointer;
+  }
+
+  :focus {
+    outline: 1px solid var(--colorsSemanticFocus500);
+  }
+`;
+const StyledSpaceHolder = styled.div`
+  display: inline-block;
+  width: 22px;
+`;
+export { StyledSort, StyledSpaceHolder };

package/esm/components/form/__internal__/form-summary.component.d.ts

@@ -0,0 +1,10 @@
+export default FormSummary;
+declare function FormSummary(props: any): JSX.Element;
+declare namespace FormSummary {
+    namespace propTypes {
+        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const errors: PropTypes.Requireable<number>;
+        const warnings: PropTypes.Requireable<number>;
+    }
+}
+import PropTypes from "prop-types";

package/esm/components/form/__internal__/form-summary.component.js

@@ -0,0 +1,53 @@
+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, { useMemo } from "react";
+import PropTypes from "prop-types";
+import { StyledFormSummary, StyledInternalSummary, StyledMessagePrefix } from "./form-summary.style";
+import Icon from "../../icon";
+import useLocale from "../../../hooks/__internal__/useLocale";
+
+const Summary = ({
+  type,
+  errors,
+  warnings
+}) => {
+  const l = useLocale();
+  const messages = {
+    errors,
+    warnings
+  };
+  const message = useMemo(() => l.errors.messages.formSummary(errors, warnings, type), [l.errors.messages, errors, warnings, type]);
+
+  if (messages[type]) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledMessagePrefix, null, message[0]), /*#__PURE__*/React.createElement(StyledInternalSummary, {
+      type: type,
+      "data-element": type
+    }, /*#__PURE__*/React.createElement(Icon, {
+      type: type.slice(0, -1)
+    }), /*#__PURE__*/React.createElement("span", null, message[1])));
+  }
+
+  return null;
+};
+
+Summary.propTypes = {
+  type: PropTypes.oneOf(["errors", "warnings"]),
+  errors: PropTypes.number,
+  warnings: PropTypes.number
+};
+
+const FormSummary = props => /*#__PURE__*/React.createElement(StyledFormSummary, {
+  showSummary: props.errors > 0 || props.warnings > 0,
+  "data-element": "form-summary"
+}, /*#__PURE__*/React.createElement(Summary, _extends({
+  type: "errors"
+}, props)), /*#__PURE__*/React.createElement(Summary, _extends({
+  type: "warnings"
+}, props)), props.children);
+
+FormSummary.propTypes = {
+  children: PropTypes.node,
+  errors: PropTypes.number,
+  warnings: PropTypes.number
+};
+export default FormSummary;

package/esm/components/form/__internal__/form-summary.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+
+export interface FormSummaryProps {
+  /** Child elements */
+  children?: React.ReactNode;
+  /** The total number of errors present in the form */
+  errors?: number;
+  /** The total number of warnings present in the form */
+  warnings?: number;
+}
+
+declare function FormSummary(props: FormSummaryProps): JSX.Element;
+
+export default FormSummary;

package/esm/components/form/__internal__/form-summary.style.d.ts

@@ -0,0 +1,3 @@
+export const StyledFormSummary: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledMessagePrefix: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledInternalSummary: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/form/__internal__/form-summary.style.js

@@ -0,0 +1,67 @@
+import styled, { css } from "styled-components";
+import PropTypes from "prop-types";
+import StyledIcon from "../../icon/icon.style";
+import StyledButton from "../../button/button.style";
+export const StyledFormSummary = styled.div`
+  display: inline-flex;
+  align-items: center;
+  font-size: 13px;
+  font-weight: 700;
+  margin: -8px;
+  padding: 8px;
+  white-space: nowrap;
+
+  ${({
+  showSummary
+}) => showSummary && css`
+      background-color: var(--colorsUtilityMajor025);
+    `}
+
+  ${StyledButton} {
+    margin-right: 0;
+  }
+`;
+export const StyledMessagePrefix = styled.div`
+  &:first-of-type {
+    margin-left: 4px;
+  }
+  margin-right: 4px;
+`;
+export const StyledInternalSummary = styled.div`
+  display: flex;
+  align-items: center;
+  margin-right: 8px;
+  &:last-of-type {
+    margin-right: 16px;
+  }
+  ${({
+  type
+}) => type === "warnings" && css`
+      color: var(--colorsSemanticCaution650);
+    `}
+  ${({
+  type
+}) => type === "errors" && css`
+      color: var(--colorsSemanticNegative600);
+    `}
+
+  ${StyledIcon} {
+    margin-right: 4px;
+    ${({
+  type
+}) => type === "warnings" && css`
+        color: var(--colorsSemanticCaution650);
+      `}
+    ${({
+  type
+}) => type === "errors" && css`
+        color: var(--colorsSemanticNegative600);
+      `}
+  }
+`;
+StyledFormSummary.propTypes = {
+  showSummary: PropTypes.bool
+};
+StyledInternalSummary.propTypes = {
+  type: PropTypes.oneOf(["errors", "warnings"])
+};

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

@@ -0,0 +1,20 @@
+export default Form;
+declare function Form({ children, saveButton, leftSideButtons, rightSideButtons, errorCount, warningCount, onSubmit, buttonAlignment, stickyFooter, dialogRef, fieldSpacing, noValidate, height, ...rest }: {
+    [x: string]: any;
+    children: any;
+    saveButton: any;
+    leftSideButtons: any;
+    rightSideButtons: any;
+    errorCount: any;
+    warningCount: any;
+    onSubmit: any;
+    buttonAlignment?: string | undefined;
+    stickyFooter: any;
+    dialogRef: any;
+    fieldSpacing?: number | undefined;
+    noValidate?: boolean | undefined;
+    height: any;
+}): JSX.Element;
+declare namespace Form {
+    const propTypes: any;
+}