carbon-react 111.22.1 → 111.22.3

package/esm/components/simple-color-picker/simple-color/simple-color.component.js

@@ -1,11 +1,10 @@
 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 React from "react";
+import guid from "../../../__internal__/utils/helpers/guid";
 import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
-import StyledSimpleColor from "./simple-color.style";
-import ColorSampleBox from "../color-sample-box";
-import StyledSimpleColorInput from "../simple-color-input/simple-color-input.style";
+import { StyledSimpleColor, StyledColorSampleBox, StyledTickIcon, StyledSimpleColorInput } from "./simple-color.style";
 const SimpleColor = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     onChange,
@@ -13,13 +12,16 @@ const SimpleColor = /*#__PURE__*/React.forwardRef((props, ref) => {
     onMouseDown,
     value,
     name,
-    checked,
+    checked = false,
     className,
+    id,
+    defaultChecked,
     ...rest
   } = props;
+  const {
+    current: inputId
+  } = useRef(id || guid());
   return /*#__PURE__*/React.createElement(StyledSimpleColor, _extends({
-    color: value,
-    checked: checked,
     className: className
   }, tagComponent("simple-color", props)), /*#__PURE__*/React.createElement(StyledSimpleColorInput, _extends({
     onChange: onChange,
@@ -31,37 +33,28 @@ const SimpleColor = /*#__PURE__*/React.forwardRef((props, ref) => {
     role: "radio",
     value: value,
     "aria-checked": checked,
-    ref: ref
-  }, rest)), /*#__PURE__*/React.createElement(ColorSampleBox, {
+    ref: ref,
+    id: inputId,
+    defaultChecked: defaultChecked
+  }, rest)), /*#__PURE__*/React.createElement(StyledColorSampleBox, {
+    color: value
+  }, checked && /*#__PURE__*/React.createElement(StyledTickIcon, {
     color: value,
-    checked: checked
-  }));
+    type: "tick"
+  })));
 });
-SimpleColor.defaultProps = {
-  checked: false,
-  onChange: null
-};
 SimpleColor.propTypes = {
-  /** the value of the color that is represented by this SimpleColor */
-  value: PropTypes.string,
-
-  /** the input name */
-  name: PropTypes.string,
-
-  /** called when the user selects or deselects this color option */
-  onChange: PropTypes.func,
-
-  /** A callback triggered when a color is selected. */
-  onBlur: PropTypes.func,
-
-  /** A callback triggered when a color is selected. */
-  onMouseDown: PropTypes.func,
-
-  /** determines if this color option is selected or unselected */
-  checked: PropTypes.bool,
-
-  /** [Legacy] Custom classname */
-  className: PropTypes.string
+  "checked": PropTypes.bool,
+  "className": PropTypes.string,
+  "defaultChecked": PropTypes.bool,
+  "disabled": PropTypes.bool,
+  "id": PropTypes.string,
+  "name": PropTypes.string,
+  "onBlur": PropTypes.func,
+  "onChange": PropTypes.func,
+  "onMouseDown": PropTypes.func,
+  "value": PropTypes.string.isRequired
 };
+export { SimpleColor };
 SimpleColor.displayName = "SimpleColor";
 export default SimpleColor;

package/esm/components/simple-color-picker/simple-color/simple-color.style.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const StyledSimpleColor: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledColorSampleBox: import("styled-components").StyledComponent<"div", any, {
+    color: string;
+}, never>;
+export declare const StyledSimpleColorInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../__internal__/input").InputProps & import("react").RefAttributes<HTMLInputElement>>, any, {}, never>;
+export declare const StyledTickIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {
+    color: string;
+}, never>;

package/esm/components/simple-color-picker/simple-color/simple-color.style.js

@@ -1,5 +1,9 @@
-import styled from "styled-components";
-const StyledSimpleColor = styled.div`
+import styled, { css } from "styled-components";
+import { Input } from "../../../__internal__/input";
+import checkerBoardSvg from "./checker-board.svg";
+import Icon from "../../icon";
+import getRgbValues from "../../../style/utils/get-rgb-values";
+export const StyledSimpleColor = styled.div`
   width: var(--sizing700);
   height: var(--sizing700);
   margin-right: 2px;
@@ -9,4 +13,74 @@ const StyledSimpleColor = styled.div`
     cursor: pointer;
   }
 `;
-export default StyledSimpleColor;
+export const StyledColorSampleBox = styled.div`
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid transparent;
+
+  ${({
+  color
+}) => color !== "transparent" && css`
+      background-color: ${color};
+    `}
+
+  ${({
+  color
+}) => color === "transparent" && css`
+      background-color: #eeeeee;
+      background-image: url(${checkerBoardSvg});
+      background-size: 14px 14px;
+      background-position: -2px -2px;
+    `}
+`;
+export const StyledSimpleColorInput = styled(Input)`
+  position: absolute;
+  opacity: 0;
+  height: var(--sizing700);
+  width: var(--sizing700);
+  margin: 0;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:disabled:hover {
+    cursor: not-allowed;
+  }
+
+  &:focus + ${StyledColorSampleBox} {
+    box-shadow: inset 0px 0px 0px var(--borderWidth200)
+      var(--colorsUtilityYang100);
+    border: 2px solid var(--colorsSemanticFocus500);
+  }
+`;
+
+const getIconColor = color => {
+  const rgbValues = getRgbValues(color);
+  const [r, g, b] = rgbValues; // color contrast calculating formula as per W3 suggestions
+
+  const redMultiplier = 299,
+        greenMultiplier = 587,
+        blueMultiplier = 114;
+  const contrast = (Math.round(r * redMultiplier) + Math.round(g * greenMultiplier) + Math.round(b * blueMultiplier)) / 1000;
+  if (contrast < 128) return "var(--colorsUtilityYang100)";
+  return "var(--colorsUtilityYin090)";
+};
+
+export const StyledTickIcon = styled(Icon)`
+  height: 22px;
+  width: 22px;
+  pointer-events: none;
+  display: block;
+
+  &::before {
+    font-size: 22px;
+    color: ${({
+  color
+}) => getIconColor(color)};
+  }
+`;

package/esm/components/simple-color-picker/simple-color-picker.component.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { ValidationProps } from "../../__internal__/validations";
+export interface SimpleColorPickerProps extends ValidationProps, MarginProps {
+    /** The SimpleColor components to be rendered in the group */
+    children?: React.ReactNode;
+    /** prop that represents childWidth */
+    childWidth?: string | number;
+    /** Should the onBlur callback prop be initially blocked? */
+    isBlurBlocked?: boolean;
+    /** The content for the Legend */
+    legend: string;
+    /** prop that sets max-width in css */
+    maxWidth?: string | number;
+    /** The name to apply to the input. */
+    name: string;
+    /** Prop for `onChange` events */
+    onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Prop for `onKeyDown` events */
+    onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Prop for `onBlur` events */
+    onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+    /** Flag to configure component as mandatory */
+    required?: boolean;
+    /** When true, validation icon will be placed on legend instead of being placed by the input */
+    validationOnLegend?: boolean;
+    /** The currently selected color. */
+    value?: string;
+}
+export declare const SimpleColorPicker: (props: SimpleColorPickerProps) => JSX.Element;
+export default SimpleColorPicker;

package/esm/components/simple-color-picker/simple-color-picker.component.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useCallback, useState, useRef, useMemo, useEffect } from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
+import invariant from "invariant";
 import Events from "../../__internal__/utils/helpers/events";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import Fieldset from "../../__internal__/fieldset";
@@ -12,7 +12,6 @@ import { StyledContent, StyledColorOptions } from "./simple-color-picker.style";
 import ValidationIcon from "../../__internal__/validations/validation-icon.component";
 import { InputGroupContext } from "../../__internal__/input-behaviour";
 import { filterStyledSystemMarginProps } from "../../style/utils";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const SimpleColorPicker = props => {
   const {
@@ -33,11 +32,21 @@ const SimpleColorPicker = props => {
     required,
     ...rest
   } = props;
-  const filteredChildren = useMemo(() => React.Children.toArray(children), [children]);
-  const myRef = useRef(null);
+  const hasProperChildren = useMemo(() => {
+    let hasSimpleColorChildren = true;
+    React.Children.toArray(children).forEach(child => {
+      if (typeof child === "string" || /*#__PURE__*/React.isValidElement(child) && child.type.displayName !== "SimpleColor") {
+        hasSimpleColorChildren = false;
+      }
+    });
+    return hasSimpleColorChildren;
+  }, [children]);
+  !hasProperChildren ? process.env.NODE_ENV !== "production" ? invariant(false, `SimpleColorPicker accepts only children of type \`${SimpleColor.displayName}\`.`) : invariant(false) : void 0;
+  const filteredChildren = useMemo(() => React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child)), [children]);
+  const internalRef = useRef(null);
   const [blurBlocked, setIsBlurBlocked] = useState(isBlurBlocked);
   const [focusedElement, setFocusedElement] = useState(null);
-  const itemsPerRow = Math.floor(maxWidth / childWidth);
+  const itemsPerRow = Math.floor(+maxWidth / +childWidth);
   const rowCount = Math.ceil((filteredChildren === null || filteredChildren === void 0 ? void 0 : filteredChildren.length) / itemsPerRow);
   let blankSlots = itemsPerRow * rowCount - (filteredChildren === null || filteredChildren === void 0 ? void 0 : filteredChildren.length);
   let currentRow = 1;
@@ -90,19 +99,20 @@ const SimpleColorPicker = props => {
     const arrowKeys = [Events.isLeftKey(e), Events.isUpKey(e), Events.isRightKey(e), Events.isDownKey(e)];
     if (!arrowKeys.includes(true)) return;
     e.preventDefault();
-    let itemIndex;
+    let itemIndex = null;
+    const target = e.target;
 
     if (Events.isUpKey(e)) {
-      if (e.target.getAttribute("data-up") !== "true") return;
-      itemIndex = e.target.getAttribute("data-item-up");
+      if (target.getAttribute("data-up") !== "true") return;
+      itemIndex = +target.getAttribute("data-item-up");
     } else if (Events.isDownKey(e)) {
-      if (e.target.getAttribute("data-down") !== "true") return;
-      itemIndex = e.target.getAttribute("data-item-down");
+      if (target.getAttribute("data-down") !== "true") return;
+      itemIndex = +target.getAttribute("data-item-down");
     }
 
     if (Events.isLeftKey(e) || Events.isRightKey(e)) {
       const position = element => {
-        return e.target.getAttribute("value") === element.props.value;
+        return target.getAttribute("value") === element.props.value;
       };
 
       if (Events.isLeftKey(e)) {
@@ -117,14 +127,18 @@ const SimpleColorPicker = props => {
         itemIndex = 0;
       }
     }
+    /* istanbul ignore else */
+
 
-    const item = navigationGrid[itemIndex].ref.current;
-    item.focus();
-    item.click();
-  }, [onKeyDown, navigationGrid]);
+    if (itemIndex !== null) {
+      const item = gridItemRefs[itemIndex].current;
+      item === null || item === void 0 ? void 0 : item.focus();
+      item === null || item === void 0 ? void 0 : item.click();
+    }
+  }, [onKeyDown, navigationGrid, gridItemRefs]);
 
   const handleClickOutside = ev => {
-    if (myRef.current && ev.target && !myRef.current.contains(ev.target)) {
+    if (internalRef.current && ev.target && !internalRef.current.contains(ev.target)) {
       setIsBlurBlocked(false);
     }
   };
@@ -176,10 +190,7 @@ const SimpleColorPicker = props => {
   }) => /*#__PURE__*/React.createElement(StyledColorOptions, _extends({
     maxWidth: maxWidth,
     childWidth: childWidth,
-    error: error,
-    warning: warning,
-    info: info,
-    ref: myRef,
+    ref: internalRef,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave
   }, validationProps), /*#__PURE__*/React.createElement(RadioButtonMapper, {
@@ -195,71 +206,175 @@ const SimpleColorPicker = props => {
 };
 
 SimpleColorPicker.propTypes = {
-  /** Filtered styled system margin props */
-  ...marginPropTypes,
-
-  /** The SimpleColor components to be rendered in the group */
-  children: (props, propName, componentName) => {
-    let error;
-    const prop = props[propName];
-    React.Children.forEach(prop, child => {
-      if (child === null) {
-        return;
-      }
-
-      if (SimpleColor.displayName !== child.type.displayName) {
-        error = new Error(`\`${componentName}\` only accepts children of type \`${SimpleColor.displayName}\`.`);
-      }
-    });
-    return error;
-  },
-
-  /** Should the onBlur callback prop be initially blocked? */
-  isBlurBlocked: PropTypes.bool,
-
-  /** Indicate that error has occurred
-  Pass string to display icon, tooltip and red border
-  Pass true boolean to only display red border */
-  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
-  /** Indicate that warning has occurred
-  Pass string to display icon, tooltip and orange border
-  Pass true boolean to only display orange border */
-  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
-  /** Indicate additional information
-  Pass string to display icon, tooltip and blue border
-  Pass true boolean to only display blue border */
-  info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
-  /** When true, validation icon will be placed on legend instead of being placed by the input */
-  validationOnLegend: PropTypes.bool,
-
-  /** The content for the RadioGroup Legend */
-  legend: PropTypes.string.isRequired,
-
-  /** The currently selected color. */
-  value: PropTypes.string,
-
-  /** The name to apply to the input. */
-  name: PropTypes.string,
-
-  /** A callback triggered when a color is selected. */
-  onChange: PropTypes.func,
-
-  /** A callback triggered when a color is selected. */
-  onBlur: PropTypes.func,
-
-  /** A callback triggered on key down. */
-  onKeyDown: PropTypes.func,
-
-  /** prop that sets max-width in css */
-  maxWidth: PropTypes.string,
-
-  /** prop that represents childWidth */
-  childWidth: PropTypes.string,
-
-  /** Flag to configure component as mandatory */
-  required: PropTypes.bool
+  "children": PropTypes.node,
+  "childWidth": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  "isBlurBlocked": PropTypes.bool,
+  "legend": PropTypes.string.isRequired,
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "maxWidth": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "name": PropTypes.string.isRequired,
+  "onBlur": PropTypes.func,
+  "onChange": PropTypes.func,
+  "onKeyDown": PropTypes.func,
+  "required": PropTypes.bool,
+  "validationOnLegend": PropTypes.bool,
+  "value": PropTypes.string,
+  "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
 };
+export { SimpleColorPicker };
 export default SimpleColorPicker;

package/esm/components/simple-color-picker/simple-color-picker.style.d.ts

@@ -0,0 +1,9 @@
+import { ValidationProps } from "../../__internal__/validations";
+declare type Width = string | number;
+declare const StyledContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface StyledColorOptionsProps extends ValidationProps {
+    maxWidth: Width;
+    childWidth: Width;
+}
+declare const StyledColorOptions: import("styled-components").StyledComponent<"div", any, StyledColorOptionsProps, never>;
+export { StyledContent, StyledColorOptions };

package/esm/components/simple-color-picker/simple-color-picker.style.js

@@ -2,7 +2,7 @@ import styled, { css } from "styled-components";
 import StyledValidationIcon from "../../__internal__/validations/validation-icon.style";
 const BORDER_WIDTH = 2;
 
-const getRoundedMaxWidth = (maxWidth, childWidth) => Math.floor(maxWidth / childWidth) * childWidth;
+const getRoundedMaxWidth = (maxWidth, childWidth) => Math.floor(+maxWidth / +childWidth) * +childWidth;
 
 const StyledContent = styled.div`
   display: flex;

package/esm/components/vertical-divider/vertical-divider.component.d.ts

@@ -2,11 +2,20 @@
 import { SpaceProps } from "styled-system";
 declare type TintRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100;
 export interface VerticalDividerProps extends SpaceProps {
+    /** Shorthand for the height attribute */
     h?: number | string;
+    /** Height attribute of the component */
     height?: number | string;
+    /**
+     * Sets the display: inline css attribute on the component
+     * To be used in non-flex containers.
+     */
     displayInline?: boolean;
-    /** the supported rage is 1-100  */
+    /** Custom tint of the divider, the supported rage is 1-100 */
     tint?: TintRange;
 }
-declare const VerticalDivider: ({ h, height, displayInline, tint, ...props }: VerticalDividerProps) => JSX.Element;
+export declare const VerticalDivider: {
+    ({ h, height, displayInline, tint, ...props }: VerticalDividerProps): JSX.Element;
+    displayName: string;
+};
 export default VerticalDivider;

package/esm/components/vertical-divider/vertical-divider.component.js

@@ -342,4 +342,6 @@ VerticalDivider.propTypes = {
   }), PropTypes.string]),
   "tint": PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100])
 };
+export { VerticalDivider };
+VerticalDivider.displayName = "VerticalDivider";
 export default VerticalDivider;

package/lib/__internal__/fieldset/fieldset.component.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 export interface FieldsetProps extends MarginProps {
+    /** Role */
+    role?: string;
     /** Fieldset content */
     children: React.ReactNode;
     /** The content for the Fieldset Legend */

package/lib/__internal__/fieldset/fieldset.component.js

@@ -221,6 +221,7 @@ Fieldset.propTypes = {
     "toString": _propTypes.default.func.isRequired,
     "valueOf": _propTypes.default.func.isRequired
   }), _propTypes.default.string]),
+  "role": _propTypes.default.string,
   "warning": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool])
 };
 var _default = Fieldset;

package/lib/components/accordion/accordion-group/accordion-group.component.d.ts

@@ -4,7 +4,11 @@ declare type AccordionGroupChild = React.ReactElement | boolean | null | undefin
 interface AccordionGroupChildArray extends Array<AccordionGroupChild> {
 }
 export interface AccordionGroupProps extends MarginProps {
+    /** An Accordion or list of Accordion components to be rendered inside the AccordionGroup */
     children?: AccordionGroupChild;
 }
-export declare const AccordionGroup: ({ children, ...rest }: AccordionGroupProps) => JSX.Element;
+export declare const AccordionGroup: {
+    ({ children, ...rest }: AccordionGroupProps): JSX.Element;
+    displayName: string;
+};
 export default AccordionGroup;