carbon-react 125.7.0 → 125.9.0

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

@@ -27,28 +27,44 @@ const Fieldset = ({
   info,
   isRequired,
   blockGroupBehaviour,
+  legendMargin = {},
+  isDisabled,
+  isOptional,
   ...rest
 }) => {
   const {
     validationRedesignOptIn
   } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
   const marginProps = (0, _useFormSpacing.default)(rest);
+  const [ref, setRef] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    if (ref && isRequired) {
+      Array.from(ref.querySelectorAll("input") || /* istanbul ignore next */[]).forEach(el => {
+        el.setAttribute("required", "");
+      });
+    }
+  }, [ref, isRequired]);
   return /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputGroupBehaviour, {
     blockGroupBehaviour: blockGroupBehaviour
   }, /*#__PURE__*/_react.default.createElement(_fieldset.StyledFieldset, _extends({
+    ref: setRef,
     "data-component": "fieldset"
   }, rest, marginProps), legend && /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputGroupContext.Consumer, null, ({
     onMouseEnter,
     onMouseLeave
-  }) => /*#__PURE__*/_react.default.createElement(_fieldset.StyledLegend, {
+  }) => /*#__PURE__*/_react.default.createElement(_fieldset.StyledLegend, _extends({
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     inline: inline,
     width: legendWidth,
     align: legendAlign,
     rightPadding: legendSpacing
-  }, /*#__PURE__*/_react.default.createElement(_fieldset.StyledLegendContent, {
-    isRequired: isRequired
+  }, legendMargin, {
+    "data-element": "legend"
+  }), /*#__PURE__*/_react.default.createElement(_fieldset.StyledLegendContent, {
+    isRequired: isRequired,
+    isOptional: isOptional,
+    isDisabled: isDisabled
   }, legend, !validationRedesignOptIn && /*#__PURE__*/_react.default.createElement(_validationIcon.default, {
     error: error,
     warning: warning,

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

@@ -1,6 +1,11 @@
-declare const StyledFieldset: import("styled-components").StyledComponent<"fieldset", any, {}, never>;
+declare type StyledFieldsetProps = {
+    width?: string;
+};
+declare const StyledFieldset: import("styled-components").StyledComponent<"fieldset", any, StyledFieldsetProps, never>;
 declare type StyledLegendContentProps = {
     isRequired?: boolean;
+    isOptional?: boolean;
+    isDisabled?: boolean;
 };
 declare const StyledLegendContent: import("styled-components").StyledComponent<"span", any, StyledLegendContentProps, never>;
 declare type StyledLegendProps = {

package/lib/__internal__/fieldset/fieldset.style.js

@@ -17,6 +17,9 @@ const StyledFieldset = exports.StyledFieldset = _styledComponents.default.fields
   padding: 0;
   min-width: 0;
   min-inline-size: 0;
+  ${({
+  width
+}) => width && `width: ${width};`}
 `;
 StyledFieldset.defaultProps = {
   theme: _base.default
@@ -34,13 +37,35 @@ const StyledLegendContent = exports.StyledLegendContent = _styledComponents.defa
         color: var(--colorsSemanticNegative500);
         font-weight: 700;
         margin-left: var(--spacing100);
+        position: relative;
+        top: 1px;
+        left: -4px;
+      }
+    `}
+
+  ${({
+  isOptional
+}) => isOptional && (0, _styledComponents.css)`
+      ::after {
+        content: "(optional)";
+        font-weight: 350; //TODO: (tokens) use token var(--fontWeights400) - FE-6022
+        margin-left: 4px;
+      }
+    `}
+
+  ${({
+  isDisabled
+}) => isDisabled && (0, _styledComponents.css)`
+      color: var(--colorsUtilityYin030);
+      ::after {
+        color: var(--colorsUtilityYin030);
       }
     `}
 `;
 const StyledLegend = exports.StyledLegend = _styledComponents.default.legend`
   display: flex;
   align-items: center;
-  margin-bottom: 8px;
+  margin-bottom: var(--spacing100);
   padding: 0;
   font-weight: 600;
   ${({
@@ -56,4 +81,5 @@ const StyledLegend = exports.StyledLegend = _styledComponents.default.legend`
       justify-content: ${align === "right" ? "flex-end" : "flex-start"};
       padding-right: ${rightPadding === 1 ? "var(--spacing100)" : "var(--spacing200)"};
     `}
+  ${_styledSystem.margin}
 `;

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

@@ -20,7 +20,11 @@ export interface LabelProps extends ValidationProps, StyledLabelProps, StyledLab
     useValidationIcon?: boolean;
     /** Id of the validation icon */
     validationIconId?: string;
+    /** Sets className for component */
+    className?: string;
+    /** Sets aria-label for label element */
+    "aria-label"?: string;
 }
-export declare const Label: ({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => React.JSX.Element;
-declare const _default: React.MemoExoticComponent<({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => React.JSX.Element>;
+export declare const Label: ({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, }: LabelProps) => React.JSX.Element;
+declare const _default: React.MemoExoticComponent<({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, }: LabelProps) => React.JSX.Element>;
 export default _default;

package/lib/__internal__/label/label.component.js

@@ -52,7 +52,9 @@ const Label = ({
   useValidationIcon = true,
   validationIconId,
   warning,
-  width = 30
+  width = 30,
+  className,
+  "aria-label": ariaLabel
 }) => {
   const [isFocused, setFocus] = (0, _react.useState)(false);
   const {
@@ -109,7 +111,8 @@ const Label = ({
     width: width,
     optional: optional,
     pr: pr,
-    pl: pl
+    pl: pl,
+    className: className
   }, /*#__PURE__*/_react.default.createElement(_label.default, _extends({
     "data-element": "label",
     disabled: disabled,
@@ -120,7 +123,8 @@ const Label = ({
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     isRequired: isRequired,
-    as: as
+    as: as,
+    "aria-label": ariaLabel
   }), children), icon());
 };
 exports.Label = Label;

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

@@ -9,7 +9,7 @@ export declare type BoxSizing = "content-box" | "border-box";
 declare type DesignTokensType = keyof typeof DesignTokens;
 declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
 declare type BorderRadiusType = Extract<DesignTokensType, `borderRadius${string}`>;
-export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, Omit<GridProps, "gridGap" | "gridRowGap" | "gridColumnGap">, TagProps, Omit<PositionProps, "zIndex"> {
+export interface BoxProps extends FlexboxProps, Omit<GridProps, "gridGap" | "gridRowGap" | "gridColumnGap">, LayoutProps, Omit<PositionProps, "zIndex">, SpaceProps, TagProps {
     as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
     /** Set the ID attribute of the Box component */
     id?: string;
@@ -45,6 +45,8 @@ export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, Omit<Gr
     backgroundColor?: string;
     /** Set the opacity attribute of the Box component */
     opacity?: string | number;
+    /** Set the container to be hidden from screen readers */
+    "aria-hidden"?: "true" | "false";
 }
 export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;
 export default Box;

package/lib/components/box/box.component.js

@@ -31,6 +31,7 @@ const Box = exports.Box = /*#__PURE__*/_react.default.forwardRef(({
   borderRadius,
   color,
   opacity,
+  "aria-hidden": ariaHidden,
   ...rest
 }, ref) => {
   return /*#__PURE__*/_react.default.createElement(_box.default, _extends({
@@ -51,7 +52,8 @@ const Box = exports.Box = /*#__PURE__*/_react.default.forwardRef(({
     boxShadow: boxShadow,
     borderRadius: borderRadius,
     color: color,
-    opacity: opacity
+    opacity: opacity,
+    "aria-hidden": ariaHidden
   }, (0, _tags.default)(dataComponent, rest), (0, _utils.filterStyledSystemMarginProps)(rest), (0, _utils.filterStyledSystemPaddingProps)(rest), (0, _utils.filterStyledSystemFlexboxProps)(rest), (0, _utils.filterStyledSystemGridProps)(rest), (0, _utils.filterStyledSystemLayoutProps)(rest)), children);
 });
 Box.propTypes = {
@@ -358,6 +360,7 @@ Box.propTypes = {
     "trimStart": _propTypes.default.func.isRequired,
     "valueOf": _propTypes.default.func.isRequired
   })]),
+  "aria-hidden": _propTypes.default.oneOf(["false", "true"]),
   "as": _propTypes.default.oneOfType([_propTypes.default.oneOf(["a", "abbr", "address", "animate", "animateMotion", "animateTransform", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "circle", "cite", "clipPath", "code", "col", "colgroup", "data", "datalist", "dd", "defs", "del", "desc", "details", "dfn", "dialog", "div", "dl", "dt", "ellipse", "em", "embed", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "fieldset", "figcaption", "figure", "filter", "footer", "foreignObject", "form", "g", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "line", "linearGradient", "link", "main", "map", "mark", "marker", "mask", "menu", "menuitem", "meta", "metadata", "meter", "mpath", "nav", "noindex", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "path", "pattern", "picture", "polygon", "polyline", "pre", "progress", "q", "radialGradient", "rect", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "slot", "small", "source", "span", "stop", "strong", "style", "sub", "summary", "sup", "svg", "switch", "symbol", "table", "tbody", "td", "template", "text", "textarea", "textPath", "tfoot", "th", "thead", "time", "title", "tr", "track", "tspan", "u", "ul", "use", "var", "video", "view", "wbr", "webview"]), _propTypes.default.func, _propTypes.default.shape({
     "childContextTypes": _propTypes.default.object,
     "contextType": _propTypes.default.shape({

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

@@ -44,6 +44,11 @@ export interface ButtonToggleGroupProps extends MarginProps, TagProps {
     helpAriaLabel?: string;
     /** set this to true to allow the buttons within the group to be deselected when already selected, leaving no selected button */
     allowDeselect?: boolean;
+    /**
+     * @private @ignore
+     * Set a class on the component
+     */
+    className?: string;
 }
 declare type ButtonToggleGroupContextType = {
     onButtonClick: (value: string) => void;
@@ -58,7 +63,7 @@ declare type ButtonToggleGroupContextType = {
 };
 export declare const ButtonToggleGroupContext: React.Context<ButtonToggleGroupContextType>;
 declare const ButtonToggleGroup: {
-    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputWidth, fullWidth, labelInline, labelWidth, labelAlign, name, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, ...props }: ButtonToggleGroupProps): React.JSX.Element;
+    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputWidth, fullWidth, labelInline, labelWidth, labelAlign, name, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, className, ...props }: ButtonToggleGroupProps): React.JSX.Element;
     displayName: string;
 };
 export default ButtonToggleGroup;

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

@@ -51,6 +51,7 @@ const ButtonToggleGroup = ({
   helpAriaLabel,
   id,
   allowDeselect,
+  className,
   ...props
 }) => {
   const hasCorrectItemStructure = (0, _react.useMemo)(() => {
@@ -161,7 +162,9 @@ const ButtonToggleGroup = ({
     "data-role": dataRole,
     "data-element": dataElement,
     id: id
-  }, (0, _utils.filterStyledSystemMarginProps)(props)), children))))));
+  }, (0, _utils.filterStyledSystemMarginProps)(props), {
+    className: className
+  }), children))))));
 };
 ButtonToggleGroup.displayName = "ButtonToggleGroup";
 var _default = exports.default = ButtonToggleGroup;

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

@@ -1,5 +1,20 @@
 import { IconType } from "../icon";
 export declare type ButtonToggleIconSizes = "small" | "large";
+export declare const heightConfig: {
+    small: number;
+    medium: number;
+    large: number;
+};
+export declare const fontSizeConfig: {
+    small: number;
+    medium: number;
+    large: number;
+};
+export declare const paddingConfig: {
+    small: number;
+    medium: number;
+    large: number;
+};
 declare const StyledButtonToggleContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export interface StyledButtonToggleProps {
     /** The icon to be rendered inside of the button */

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledButtonToggleWrapper = exports.StyledButtonToggleIcon = exports.StyledButtonToggleContentWrapper = exports.StyledButtonToggle = void 0;
+exports.paddingConfig = exports.heightConfig = exports.fontSizeConfig = exports.StyledButtonToggleWrapper = exports.StyledButtonToggleIcon = exports.StyledButtonToggleContentWrapper = exports.StyledButtonToggle = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
 var _addFocusStyling = _interopRequireDefault(require("../../style/utils/add-focus-styling"));
@@ -11,17 +11,17 @@ var _base = _interopRequireDefault(require("../../style/themes/base"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const heightConfig = {
+const heightConfig = exports.heightConfig = {
   small: 32,
   medium: 40,
   large: 48
 };
-const fontSizeConfig = {
+const fontSizeConfig = exports.fontSizeConfig = {
   small: 14,
   medium: 14,
   large: 16
 };
-const paddingConfig = {
+const paddingConfig = exports.paddingConfig = {
   small: 16,
   medium: 24,
   large: 32

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

@@ -12,7 +12,7 @@ declare type StyledHeadingTitleProps = {
     withMargin?: boolean;
 };
 declare const StyledHeadingTitle: import("styled-components").StyledComponent<{
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
     displayName: string;
 }, any, StyledHeadingTitleProps, never>;
 declare const StyledHeadingPills: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { StyledImageProps } from "./image.style";
 export declare const Image: {
-    ({ alt, decorative, src, children, ...rest }: StyledImageProps): React.JSX.Element;
+    ({ alt, decorative, src, children, position, top, right, bottom, left, ...rest }: StyledImageProps): React.JSX.Element;
     displayName: string;
 };
 export default Image;

package/lib/components/image/image.component.js

@@ -15,6 +15,11 @@ const Image = ({
   decorative = false,
   src,
   children,
+  position,
+  top,
+  right,
+  bottom,
+  left,
   ...rest
 }) => {
   !(!src || !children) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "The 'Image' component renders as an 'img' element when the 'src' prop is used and therefore does not accept children.") : (0, _invariant.default)(false) : void 0;
@@ -22,7 +27,12 @@ const Image = ({
   return /*#__PURE__*/_react.default.createElement(_image.StyledImage, _extends({
     alt: alt,
     decorative: decorative,
-    src: src
+    src: src,
+    position: position,
+    top: top,
+    right: right,
+    bottom: bottom,
+    left: left
   }, rest), children);
 };
 exports.Image = Image;

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { MarginProps, BackgroundProps, LayoutProps } from "styled-system";
-export interface StyledImageProps extends MarginProps, BackgroundProps, LayoutProps {
+export declare type PositionProps = "absolute" | "fixed" | "relative" | "static" | "sticky";
+export interface StyledImageProps extends BackgroundProps, LayoutProps, MarginProps {
     /** HTML alt property to display when an img fails to load */
     alt?: string;
     /** Prop to specify if the image is decorative  */
@@ -11,11 +12,26 @@ export interface StyledImageProps extends MarginProps, BackgroundProps, LayoutPr
     hidden?: boolean;
     /** Children elements, will only render if component is a div element */
     children?: React.ReactNode;
+    /** Any valid CSS string for position */
+    position?: PositionProps;
+    /** Any valid CSS string for top */
+    top?: string;
+    /** Any valid CSS string for right */
+    right?: string;
+    /** Any valid CSS string for bottom */
+    bottom?: string;
+    /** Any valid CSS string for left */
+    left?: string;
 }
 declare const StyledImage: import("styled-components").StyledComponent<"div", any, {
     children: import("react").ReactNode;
     src: string | undefined;
     hidden: boolean;
+    position: PositionProps | undefined;
+    top: string | undefined;
+    right: string | undefined;
+    bottom: string | undefined;
+    left: string | undefined;
     as?: string | undefined;
-} & StyledImageProps, "hidden" | "children" | "as" | "src">;
+} & StyledImageProps, "hidden" | "children" | "as" | "left" | "right" | "bottom" | "top" | "src" | "position">;
 export { StyledImage };

package/lib/components/image/image.style.js

@@ -12,18 +12,42 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const StyledImage = exports.StyledImage = _styledComponents.default.div.attrs(({
   src,
   children,
-  hidden = false
+  hidden = false,
+  position,
+  top,
+  right,
+  bottom,
+  left
 }) => ({
   ...(src && {
     as: "img"
   }),
   children: src ? undefined : children,
   src,
-  hidden
+  hidden,
+  position,
+  top,
+  right,
+  bottom,
+  left
 }))`
   ${_styledSystem.margin}
   ${_styledSystem.layout}
 
+  ${({
+  position,
+  top,
+  right,
+  bottom,
+  left
+}) => (0, _styledComponents.css)`
+    position: ${position};
+    top: ${top};
+    right: ${right};
+    bottom: ${bottom};
+    left: ${left};
+  `}
+
   ${({
   as
 }) => as !== "img" && (0, _styledComponents.css)`

package/lib/components/tile/flex-tile-cell/flex-tile-cell.component.js

@@ -333,6 +333,7 @@ FlexTileCell.propTypes = {
     "trimStart": _propTypes.default.func.isRequired,
     "valueOf": _propTypes.default.func.isRequired
   })]),
+  "aria-hidden": _propTypes.default.oneOf(["false", "true"]),
   "as": _propTypes.default.oneOfType([_propTypes.default.oneOf(["a", "abbr", "address", "animate", "animateMotion", "animateTransform", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "circle", "cite", "clipPath", "code", "col", "colgroup", "data", "datalist", "dd", "defs", "del", "desc", "details", "dfn", "dialog", "div", "dl", "dt", "ellipse", "em", "embed", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "fieldset", "figcaption", "figure", "filter", "footer", "foreignObject", "form", "g", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "line", "linearGradient", "link", "main", "map", "mark", "marker", "mask", "menu", "menuitem", "meta", "metadata", "meter", "mpath", "nav", "noindex", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "path", "pattern", "picture", "polygon", "polyline", "pre", "progress", "q", "radialGradient", "rect", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "slot", "small", "source", "span", "stop", "strong", "style", "sub", "summary", "sup", "svg", "switch", "symbol", "table", "tbody", "td", "template", "text", "textarea", "textPath", "tfoot", "th", "thead", "time", "title", "tr", "track", "tspan", "u", "ul", "use", "var", "video", "view", "wbr", "webview"]), _propTypes.default.func, _propTypes.default.shape({
     "childContextTypes": _propTypes.default.object,
     "contextType": _propTypes.default.shape({

package/lib/components/time/__internal__/time-toggle/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TimeToggle } from "./time-toggle.component";
+export type { ToggleProps, ToggleDataProps } from "./time-toggle.component";

package/lib/components/time/__internal__/time-toggle/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TimeToggle", {
+  enumerable: true,
+  get: function () {
+    return _timeToggle.default;
+  }
+});
+var _timeToggle = _interopRequireDefault(require("./time-toggle.component"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/time/__internal__/time-toggle/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../../esm/components/time/__internal__/time-toggle/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/components/time/__internal__/time-toggle/time-toggle.component.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { TagProps } from "../../../../__internal__/utils/helpers/tags";
+import { ToggleValue } from "../../time.component";
+export interface ToggleDataProps {
+    wrapperProps?: Omit<TagProps, "data-component">;
+    amToggleProps?: Omit<TagProps, "data-component">;
+    pmToggleProps?: Omit<TagProps, "data-component">;
+}
+export interface ToggleProps extends Omit<TagProps, "data-component"> {
+    size?: "small" | "medium" | "large";
+    onChange: (pressedValue: ToggleValue) => void;
+    toggleValue: ToggleValue;
+    disabled?: boolean;
+    toggleProps?: ToggleDataProps;
+}
+declare const Toggle: {
+    ({ size, onChange, toggleValue, disabled, toggleProps, }: ToggleProps): React.JSX.Element;
+    displayName: string;
+};
+export default Toggle;

package/lib/components/time/__internal__/time-toggle/time-toggle.component.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _guid = _interopRequireDefault(require("../../../../__internal__/utils/helpers/guid"));
+var _useLocale = _interopRequireDefault(require("../../../../hooks/__internal__/useLocale"));
+var _timeToggle = _interopRequireDefault(require("./time-toggle.style"));
+var _buttonToggle = require("../../../button-toggle");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 Toggle = ({
+  size,
+  onChange,
+  toggleValue,
+  disabled,
+  toggleProps
+}) => {
+  const locale = (0, _useLocale.default)();
+  const amText = locale.time.amText();
+  const pmText = locale.time.pmText();
+  const internalId = (0, _react.useRef)((0, _guid.default)());
+  const {
+    wrapperProps,
+    amToggleProps,
+    pmToggleProps
+  } = toggleProps || /* istanbul ignore next */{};
+  const handleChange = (0, _react.useCallback)(event => {
+    const selectedButtonValue = event.target.value;
+    if (selectedButtonValue !== toggleValue) {
+      onChange(selectedButtonValue);
+    }
+  }, [toggleValue, onChange]);
+  return /*#__PURE__*/_react.default.createElement(_timeToggle.default, _extends({}, wrapperProps, {
+    "data-component": "time-button-toggle-group",
+    m: "0px 0px 0px 8px",
+    id: internalId.current,
+    onChange: handleChange,
+    value: toggleValue,
+    disabled: disabled
+  }), /*#__PURE__*/_react.default.createElement(_buttonToggle.ButtonToggle, _extends({}, amToggleProps, {
+    "data-component": "am-button-toggle",
+    grouped: true,
+    value: "AM",
+    size: size,
+    disabled: disabled
+  }), amText), /*#__PURE__*/_react.default.createElement(_buttonToggle.ButtonToggle, _extends({}, pmToggleProps, {
+    "data-component": "pm-button-toggle",
+    grouped: true,
+    value: "PM",
+    size: size,
+    disabled: disabled
+  }), pmText));
+};
+Toggle.displayName = "Toggle";
+var _default = exports.default = Toggle;

package/lib/components/time/__internal__/time-toggle/time-toggle.style.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: import("styled-components").StyledComponent<{
+    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputWidth, fullWidth, labelInline, labelWidth, labelAlign, name, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, className, ...props }: import("../../../button-toggle").ButtonToggleGroupProps): import("react").JSX.Element;
+    displayName: string;
+}, any, {
+    disabled?: boolean | undefined;
+}, never>;
+export default _default;

package/lib/components/time/__internal__/time-toggle/time-toggle.style.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _buttonToggle = require("../../../button-toggle");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// TODO this can be removed as part of FE-6335
+var _default = exports.default = (0, _styledComponents.default)(_buttonToggle.ButtonToggleGroup)`
+  ${({
+  disabled
+}) => disabled && (0, _styledComponents.css)`
+      opacity: 0.3;
+
+      [aria-pressed="true"] {
+        cursor: not-allowed;
+        :hover {
+          background-color: transparent;
+          box-shadow: inset 0px 0px 0px 3px var(--colorsActionMinor500);
+        }
+      }
+    `}
+`;

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

@@ -0,0 +1,2 @@
+export { default as Time } from "./time.component";
+export type { TimeValue, TimeProps, TimeHandle, ToggleValue, } from "./time.component";

package/lib/components/time/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Time", {
+  enumerable: true,
+  get: function () {
+    return _time.default;
+  }
+});
+var _time = _interopRequireDefault(require("./time.component"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/time/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../esm/components/time/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}