carbon-react 110.0.4 → 110.1.2

package/esm/components/sidebar/sidebar.component.js

@@ -2,27 +2,29 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useRef } from "react";
 import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
 import Modal from "../modal";
-import SidebarStyle from "./sidebar.style";
+import StyledSidebar from "./sidebar.style";
 import IconButton from "../icon-button";
 import Icon from "../icon";
 import FocusTrap from "../../__internal__/focus-trap";
 import SidebarHeader from "./__internal__/sidebar-header";
 import Box from "../box";
-import { SIDEBAR_SIZES, SIDEBAR_ALIGNMENTS } from "./sidebar.config";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import useLocale from "../../hooks/__internal__/useLocale";
+import { filterStyledSystemPaddingProps } from "../../style/utils";
+const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
 export const SidebarContext = /*#__PURE__*/React.createContext({});
 const Sidebar = /*#__PURE__*/React.forwardRef(({
   "aria-describedby": ariaDescribedBy,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   open,
-  disableEscKey,
-  enableBackgroundUI,
+  disableEscKey = false,
+  enableBackgroundUI = false,
   header,
-  position,
-  size,
+  position = "right",
+  size = "medium",
   children,
   onCancel,
   role = "dialog",
@@ -52,7 +54,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
     "data-element": rest["data-element"],
     "data-role": rest["data-role"]
   };
-  const sidebar = /*#__PURE__*/React.createElement(SidebarStyle, {
+  const sidebar = /*#__PURE__*/React.createElement(StyledSidebar, {
     "aria-modal": !enableBackgroundUI,
     "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
@@ -65,14 +67,16 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
     role: role
   }, header && /*#__PURE__*/React.createElement(SidebarHeader, {
     id: titleId
-  }, header), closeIcon(), /*#__PURE__*/React.createElement(Box, {
+  }, header), closeIcon(), /*#__PURE__*/React.createElement(Box, _extends({
     "data-element": "sidebar-content",
-    p: 4,
-    pt: "27px",
+    pt: "var(--spacing300)",
+    pb: "var(--spacing400)",
+    px: "var(--spacing400)"
+  }, filterStyledSystemPaddingProps(rest), {
     scrollVariant: "light",
     overflow: "auto",
     flex: "1"
-  }, /*#__PURE__*/React.createElement(SidebarContext.Provider, {
+  }), /*#__PURE__*/React.createElement(SidebarContext.Provider, {
     value: {
       isInSidebar: true
     }
@@ -90,6 +94,9 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
   }, sidebar));
 });
 Sidebar.propTypes = {
+  /** Styled system padding props to apply to Sidebar content */
+  ...paddingPropTypes,
+
   /** Prop to specify the aria-describedby property of the component */
   "aria-describedby": PropTypes.string,
 
@@ -115,10 +122,10 @@ Sidebar.propTypes = {
   enableBackgroundUI: PropTypes.bool,
 
   /** Sets the position of sidebar, either left or right. */
-  position: PropTypes.oneOf(SIDEBAR_ALIGNMENTS),
+  position: PropTypes.oneOf(["left", "right"]),
 
   /** Sets the size of the sidebar when open. */
-  size: PropTypes.oneOf(SIDEBAR_SIZES),
+  size: PropTypes.oneOf(["extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"]),
 
   /** Node that will be used as sidebar header. */
   header: PropTypes.node,
@@ -131,9 +138,4 @@ Sidebar.propTypes = {
     current: PropTypes.any
   }))
 };
-Sidebar.defaultProps = {
-  position: "right",
-  size: "medium",
-  enableBackgroundUI: false
-};
 export default Sidebar;

package/esm/components/sidebar/sidebar.d.ts

@@ -1,9 +1,10 @@
 import * as React from "react";
+import { PaddingProps } from "styled-system";
 
 export interface SidebarContextProps {
   isInSidebar: boolean;
 }
-export interface SidebarProps {
+export interface SidebarProps extends PaddingProps {
   /** Prop to specify the aria-describedby property of the component */
   "aria-describedby"?: string;
   /**

package/esm/components/sidebar/sidebar.style.js

@@ -2,7 +2,7 @@ import styled, { css } from "styled-components";
 import baseTheme from "../../style/themes/base";
 import StyledIconButton from "../icon-button/icon-button.style";
 import { SIDEBAR_SIZES_CSS } from "./sidebar.config";
-const SidebarStyle = styled.div`
+const StyledSidebar = styled.div`
   // prevents outline being added in safari
   :focus {
     outline: none;
@@ -42,7 +42,7 @@ const SidebarStyle = styled.div`
     `}
   `}
 `;
-SidebarStyle.defaultProps = {
+StyledSidebar.defaultProps = {
   theme: baseTheme
 };
-export default SidebarStyle;
+export default StyledSidebar;

package/esm/style/fonts.css

@@ -9,28 +9,35 @@
   font-family: "Sage UI";
   font-style: normal;
   font-weight: 400;
-  src: url("~@sage/design-tokens/assets/fonts/sageui-regular.woff2") format("woff2"),
-       url("~@sage/design-tokens/assets/fonts/sageui-regular.woff") format("woff"),
-       url("~@sage/design-tokens/assets/fonts/sageui-regular.ttf") format("truetype"),
-       url("~@sage/design-tokens/assets/fonts/sageui-regular.otf") format("opentype");
+  src: url("~@sage/design-tokens/assets/fonts/sageui-regular.woff2")
+      format("woff2"),
+    url("~@sage/design-tokens/assets/fonts/sageui-regular.woff") format("woff"),
+    url("~@sage/design-tokens/assets/fonts/sageui-regular.ttf")
+      format("truetype"),
+    url("~@sage/design-tokens/assets/fonts/sageui-regular.otf")
+      format("opentype");
 }
 
 @font-face {
   font-family: "Sage UI";
   font-style: normal;
   font-weight: 700;
-  src: url("~@sage/design-tokens/assets/fonts/sageui-medium.woff2") format("woff2"),
-       url("~@sage/design-tokens/assets/fonts/sageui-medium.woff") format("woff"),
-       url("~@sage/design-tokens/assets/fonts/sageui-medium.ttf") format("truetype"),
-       url("~@sage/design-tokens/assets/fonts/sageui-medium.otf") format("opentype");
+  src: url("~@sage/design-tokens/assets/fonts/sageui-medium.woff2")
+      format("woff2"),
+    url("~@sage/design-tokens/assets/fonts/sageui-medium.woff") format("woff"),
+    url("~@sage/design-tokens/assets/fonts/sageui-medium.ttf")
+      format("truetype"),
+    url("~@sage/design-tokens/assets/fonts/sageui-medium.otf")
+      format("opentype");
 }
 
 @font-face {
   font-family: "Sage UI";
   font-style: normal;
   font-weight: 900;
-  src: url("~@sage/design-tokens/assets/fonts/sageui-bold.woff2") format("woff2"),
-       url("~@sage/design-tokens/assets/fonts/sageui-bold.woff") format("woff"),
-       url("~@sage/design-tokens/assets/fonts/sageui-bold.ttf") format("truetype"),
-       url("~@sage/design-tokens/assets/fonts/sageui-bold.otf") format("opentype");
+  src: url("~@sage/design-tokens/assets/fonts/sageui-bold.woff2")
+      format("woff2"),
+    url("~@sage/design-tokens/assets/fonts/sageui-bold.woff") format("woff"),
+    url("~@sage/design-tokens/assets/fonts/sageui-bold.ttf") format("truetype"),
+    url("~@sage/design-tokens/assets/fonts/sageui-bold.otf") format("opentype");
 }

package/lib/__spec_helper__/mock-match-media.d.ts

@@ -1,6 +1,8 @@
 declare function setupMatchMediaMock(): void;
 declare function mockMatchMedia(
   matches?: boolean
-): { removeListener: jest.Mock };
+): {
+  removeListener: jest.Mock;
+};
 
 export { setupMatchMediaMock, mockMatchMedia };

package/lib/components/button-toggle/button-toggle-icon.component.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { StyledButtonToggleIconProps } from "./button-toggle.style";
+import { IconType } from "../icon";
+export interface ButtonToggleIconProps extends StyledButtonToggleIconProps {
+    /**
+     * <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
+     *
+     * buttonIcon to render.
+     */
+    buttonIcon: IconType;
+    /** Sets the icon in the disabled state */
+    disabled?: boolean;
+}
+declare const ButtonToggleIcon: ({ buttonIcon, buttonIconSize, disabled, hasContent, }: ButtonToggleIconProps) => JSX.Element;
+export default ButtonToggleIcon;

package/lib/components/button-toggle/button-toggle-icon.component.js

@@ -15,24 +15,27 @@ var _icon = _interopRequireDefault(require("../icon"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-const ButtonToggleIcon = props => /*#__PURE__*/_react.default.createElement(_buttonToggle.StyledButtonToggleIcon, props, /*#__PURE__*/_react.default.createElement(_icon.default, _extends({
-  type: props.buttonIcon,
-  fontSize: props.buttonIconSize,
-  bgSize: "extra-small"
-}, props)));
+const ButtonToggleIcon = ({
+  buttonIcon,
+  buttonIconSize,
+  disabled,
+  hasContent
+}) => /*#__PURE__*/_react.default.createElement(_buttonToggle.StyledButtonToggleIcon, {
+  buttonIconSize: buttonIconSize,
+  hasContent: hasContent
+}, /*#__PURE__*/_react.default.createElement(_icon.default, {
+  "aria-hidden": true,
+  type: buttonIcon,
+  fontSize: buttonIconSize,
+  bgSize: "extra-small",
+  disabled: disabled
+}));
 
 ButtonToggleIcon.propTypes = {
-  /**
-   * <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
-   *
-   * buttonIcon to render.
-   */
-  buttonIcon: _propTypes.default.string,
-
-  /** Sets the size of the buttonIcon (eg. large) */
-  buttonIconSize: _propTypes.default.oneOf(["small", "large"])
+  "buttonIcon": _propTypes.default.oneOf(["add", "admin", "alert", "analysis", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_up", "arrow", "attach", "bank", "basket_with_squares", "basket", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "gift", "go", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "pause_circle", "pause", "pdf", "people_switch", "people", "person_info", "person_tick", "person", "phone", "piggy_bank", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "three_boxes", "tick_circle", "tick", "true_tick", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]).isRequired,
+  "buttonIconSize": _propTypes.default.oneOf(["large", "small"]),
+  "disabled": _propTypes.default.bool,
+  "hasContent": _propTypes.default.bool
 };
 var _default = ButtonToggleIcon;
 exports.default = _default;

package/lib/components/button-toggle/button-toggle-input.component.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+export interface ButtonToggleInputProps {
+    /** Prop to specify the aria-label of the component */
+    "aria-label"?: string;
+    /** Prop to specify the aria-labelledby property of the component */
+    "aria-labelledby"?: string;
+    /** Set the checked value of the radio button */
+    checked?: boolean;
+    /** Disable all user interaction. */
+    disabled?: boolean;
+    /** Unique ID attribute for input */
+    guid?: string;
+    /** Name used on the hidden radio button. */
+    name?: string;
+    /** Callback triggered by blur event on the input. */
+    onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+    /** Callback triggered by change event on the input. */
+    onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Callback triggered by focus event on the input. */
+    onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+    /** Value for the input */
+    value?: string;
+}
+declare const ButtonToggleInput: React.ForwardRefExoticComponent<ButtonToggleInputProps & React.RefAttributes<HTMLInputElement>>;
+export default ButtonToggleInput;

package/lib/components/button-toggle/button-toggle-input.component.js

@@ -32,7 +32,7 @@ const ButtonToggleInput = /*#__PURE__*/_react.default.forwardRef((props, forward
       props.onBlur(ev);
     }
 
-    if (onBlur) onBlur(ev);
+    if (onBlur) onBlur();
   };
 
   const handleFocus = ev => {
@@ -40,7 +40,7 @@ const ButtonToggleInput = /*#__PURE__*/_react.default.forwardRef((props, forward
       props.onFocus(ev);
     }
 
-    if (onFocus) onFocus(ev);
+    if (onFocus) onFocus();
   };
 
   return /*#__PURE__*/_react.default.createElement(_buttonToggle.StyledButtonToggleInput, _extends({}, props, {
@@ -53,29 +53,17 @@ const ButtonToggleInput = /*#__PURE__*/_react.default.forwardRef((props, forward
 });
 
 ButtonToggleInput.propTypes = {
-  /** Set the checked value of the radio button */
-  checked: _propTypes.default.bool,
-
-  /** Name used on the hidden radio button. */
-  name: _propTypes.default.string,
-
-  /** Disable all user interaction. */
-  disabled: _propTypes.default.bool,
-
-  /** Unique ID attribute for input */
-  guid: _propTypes.default.string,
-
-  /** Value for the input */
-  value: _propTypes.default.string,
-
-  /** Callback triggered by change event on the input. */
-  onChange: _propTypes.default.func,
-
-  /** Callback triggered by blur event on the input. */
-  onBlur: _propTypes.default.func,
-
-  /** Callback triggered by focus event on the input. */
-  onFocus: _propTypes.default.func
+  "aria-label": _propTypes.default.string,
+  "aria-labelledby": _propTypes.default.string,
+  "checked": _propTypes.default.bool,
+  "disabled": _propTypes.default.bool,
+  "guid": _propTypes.default.string,
+  "name": _propTypes.default.string,
+  "onBlur": _propTypes.default.func,
+  "onChange": _propTypes.default.func,
+  "onFocus": _propTypes.default.func,
+  "value": _propTypes.default.string
 };
+ButtonToggleInput.displayName = "ButtonToggleInput";
 var _default = ButtonToggleInput;
 exports.default = _default;

package/lib/components/button-toggle/button-toggle.component.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { StyledButtonToggleLabelProps } from "./button-toggle.style";
+import { ButtonToggleInputProps } from "./button-toggle-input.component";
+export interface ButtonToggleProps extends ButtonToggleInputProps, Partial<StyledButtonToggleLabelProps> {
+    /** A required prop. This is the button text. */
+    children: React.ReactNode;
+    /** Identifier used for testing purposes, applied to the root element of the component. */
+    "data-component"?: string;
+    /** Identifier used for testing purposes, applied to the root element of the component. */
+    "data-element"?: string;
+    /** Identifier used for testing purposes, applied to the root element of the component. */
+    "data-role"?: string;
+    /** Set the default value of the Group if component is meant to be used as uncontrolled. */
+    defaultChecked?: boolean;
+    /** Remove spacing from between buttons. */
+    grouped?: boolean;
+    /** Callback triggered by click event on the input. */
+    onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
+}
+export declare const ButtonToggle: {
+    (props: ButtonToggleProps): JSX.Element;
+    displayName: string;
+};
+export default ButtonToggle;

package/lib/components/button-toggle/button-toggle.component.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.ButtonToggle = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -30,7 +30,7 @@ const ButtonToggle = props => {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     buttonIcon,
-    buttonIconSize,
+    buttonIconSize = "small",
     checked,
     children,
     "data-component": dataComponent,
@@ -42,7 +42,7 @@ const ButtonToggle = props => {
     onBlur,
     onChange,
     onFocus,
-    size,
+    size = "medium",
     value
   } = props;
   const {
@@ -55,16 +55,17 @@ const ButtonToggle = props => {
 
   if (buttonIcon) {
     icon = /*#__PURE__*/_react.default.createElement(_buttonToggleIcon.default, {
-      "aria-hidden": true,
       buttonIcon: buttonIcon,
       buttonIconSize: buttonIconSize,
-      hasNoContent: !children,
-      disabled: disabled
+      disabled: disabled,
+      hasContent: !!children
     });
   }
 
   function handleClick() {
-    inputRef.current.focus();
+    var _inputRef$current;
+
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
   }
 
   return /*#__PURE__*/_react.default.createElement(_buttonToggle.StyledButtonToggle, {
@@ -97,65 +98,28 @@ const ButtonToggle = props => {
   }, /*#__PURE__*/_react.default.createElement(_buttonToggle.StyledButtonToggleContentWrapper, null, icon, children)));
 };
 
+exports.ButtonToggle = ButtonToggle;
 ButtonToggle.propTypes = {
-  /** Prop to specify the aria-label of the component */
   "aria-label": _propTypes.default.string,
-
-  /** Prop to specify the aria-labelledby property of the component */
   "aria-labelledby": _propTypes.default.string,
-
-  /** Set the checked value of the radio button */
-  checked: _propTypes.default.bool,
-
-  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "buttonIcon": _propTypes.default.oneOf(["add", "admin", "alert", "analysis", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_up", "arrow", "attach", "bank", "basket_with_squares", "basket", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "gift", "go", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "pause_circle", "pause", "pdf", "people_switch", "people", "person_info", "person_tick", "person", "phone", "piggy_bank", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "three_boxes", "tick_circle", "tick", "true_tick", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
+  "buttonIconSize": _propTypes.default.oneOf(["large", "small"]),
+  "checked": _propTypes.default.bool,
+  "children": _propTypes.default.node,
   "data-component": _propTypes.default.string,
-
-  /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-element": _propTypes.default.string,
-
-  /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-role": _propTypes.default.string,
-
-  /** Name used on the hidden radio button. */
-  name: _propTypes.default.string,
-
-  /** Callback triggered by change event on the input. */
-  onChange: _propTypes.default.func,
-
-  /** Callback triggered by focus event on the input. */
-  onFocus: _propTypes.default.func,
-
-  /** Callback triggered by blur event on the input. */
-  onBlur: _propTypes.default.func,
-
-  /** ButtonToggle size */
-  size: _propTypes.default.oneOf(["small", "medium", "large"]),
-
-  /** buttonIcon to render. */
-  buttonIcon: _propTypes.default.string,
-
-  /** Sets the size of the buttonIcon (eg. large) */
-  buttonIconSize: _propTypes.default.oneOf(["small", "large"]),
-
-  /** Remove spacing from between buttons. */
-  grouped: _propTypes.default.bool,
-
-  /** Disable all user interaction. */
-  disabled: _propTypes.default.bool,
-
-  /** A required prop. This is the button text. */
-  children: _propTypes.default.node.isRequired,
-
-  /** Set the default value of the Group if component is meant to be used as uncontrolled. */
-  defaultChecked: _propTypes.default.bool,
-  // eslint-disable-line react/no-unused-prop-types
-
-  /** Value for the input */
-  value: _propTypes.default.string
-};
-ButtonToggle.defaultProps = {
-  size: "medium",
-  buttonIconSize: "small"
+  "defaultChecked": _propTypes.default.bool,
+  "disabled": _propTypes.default.bool,
+  "grouped": _propTypes.default.bool,
+  "guid": _propTypes.default.string,
+  "name": _propTypes.default.string,
+  "onBlur": _propTypes.default.func,
+  "onChange": _propTypes.default.func,
+  "onClick": _propTypes.default.func,
+  "onFocus": _propTypes.default.func,
+  "size": _propTypes.default.oneOf(["large", "medium", "small"]),
+  "value": _propTypes.default.string
 };
 ButtonToggle.displayName = "ButtonToggle";
 var _default = ButtonToggle;

package/lib/components/button-toggle/button-toggle.style.d.ts

@@ -0,0 +1,26 @@
+import { IconType } from "../icon";
+export declare type ButtonToggleIconSizes = "small" | "large";
+declare const StyledButtonToggleContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export interface StyledButtonToggleLabelProps {
+    /** buttonIcon to render. */
+    buttonIcon?: IconType;
+    /** Sets the size of the buttonIcon (eg. large) */
+    buttonIconSize?: ButtonToggleIconSizes;
+    /** Disable all user interaction. */
+    disabled?: boolean;
+    /** ButtonToggle size */
+    size: "small" | "medium" | "large";
+}
+declare const StyledButtonToggleLabel: import("styled-components").StyledComponent<"label", any, StyledButtonToggleLabelProps, never>;
+export interface StyledButtonToggleIconProps {
+    /** Sets the size of the buttonIcon (eg. large) */
+    buttonIconSize?: ButtonToggleIconSizes;
+    hasContent?: boolean;
+}
+declare const StyledButtonToggleIcon: import("styled-components").StyledComponent<"div", any, StyledButtonToggleIconProps, never>;
+export interface StyledButtonToggleProps {
+    grouped?: boolean;
+}
+declare const StyledButtonToggle: import("styled-components").StyledComponent<"div", any, StyledButtonToggleProps, never>;
+declare const StyledButtonToggleInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export { StyledButtonToggle, StyledButtonToggleLabel, StyledButtonToggleIcon, StyledButtonToggleInput, StyledButtonToggleContentWrapper, };

package/lib/components/button-toggle/button-toggle.style.js

@@ -5,18 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StyledButtonToggleContentWrapper = exports.StyledButtonToggleInput = exports.StyledButtonToggleIcon = exports.StyledButtonToggleLabel = exports.StyledButtonToggle = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const heightConfig = {
   small: 32,
   medium: 40,
@@ -125,10 +123,9 @@ const iconFontSizes = {
 };
 const StyledButtonToggleIcon = _styledComponents.default.div`
   ${({
-  hasNoContent
-}) => hasNoContent ? "" : (0, _styledComponents.css)`
-          margin-right: 8px;
-        `}
+  hasContent
+}) => hasContent && `margin-right: 8px;`}
+
   ${({
   buttonIconSize
 }) => buttonIconSize === "large" && (0, _styledComponents.css)`
@@ -175,7 +172,4 @@ const StyledButtonToggleInput = _styledComponents.default.input`
   height: 0;
   opacity: 0;
 `;
-exports.StyledButtonToggleInput = StyledButtonToggleInput;
-StyledButtonToggleIcon.propTypes = {
-  buttonIconSize: _propTypes.default.string
-};
+exports.StyledButtonToggleInput = StyledButtonToggleInput;

package/lib/components/button-toggle/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./button-toggle";
-export { ButtonToggleProps } from "./button-toggle";
+export { default } from "./button-toggle.component";
+export type { ButtonToggleProps } from "./button-toggle.component";

package/lib/components/content/content.style.js

@@ -48,7 +48,6 @@ const StyledContentTitle = _styledComponents.default.div`
   return (0, _styledComponents.css)`
       display: ${inline ? "inline-block" : "block"};
       font-weight: bold;
-      color: var(--colorsUtilityYin090);
       width: ${titleWidth && `calc(${titleWidth}% - 30px)`};
       text-align: ${!inline && align};
 

package/lib/components/date/__internal__/utils.js

@@ -17,7 +17,7 @@ exports.getSeparator = void 0;
 var _fp = require("date-fns/fp");
 
 function parseDate(formatString, valueString) {
-  if (!valueString || !formatString) return "";
+  if (!valueString || !formatString) return null;
   return (0, _fp.parse)(new Date(), formatString, valueString);
 }
 

package/lib/components/definition-list/definition-list.style.js

@@ -11,8 +11,6 @@ var _styledSystem = require("styled-system");
 
 var _button = _interopRequireDefault(require("../button/button.style"));
 
-var _link = require("../link/link.style");
-
 var _themes = require("../../style/themes");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -86,14 +84,6 @@ const StyledDd = _styledComponents.default.dd`
     padding: 0;
     border: none;
   }
-
-  ${_link.StyledLink} {
-    a,
-    button {
-      font-weight: 700px;
-      text-decoration: none;
-    }
-  }
   ${_styledSystem.space}
 `;
 exports.StyledDd = StyledDd;

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

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

package/lib/components/loader/loader-square.style.d.ts

@@ -1,2 +1,10 @@
+export interface StyledLoaderSquareProps {
+    /** Size of the loader. */
+    size?: "small" | "medium" | "large";
+    /** Applies white color. */
+    isInsideButton?: boolean;
+    /** Applies slate color. Available only when isInsideButton is true. */
+    isActive?: boolean;
+}
+declare const StyledLoaderSquare: import("styled-components").StyledComponent<"div", any, StyledLoaderSquareProps, never>;
 export default StyledLoaderSquare;
-declare const StyledLoaderSquare: import("styled-components").StyledComponent<"div", any, {}, never>;