carbon-react 125.6.0 → 125.8.0

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

@@ -325,6 +325,7 @@ FlexTileCell.propTypes = {
     "trimStart": PropTypes.func.isRequired,
     "valueOf": PropTypes.func.isRequired
   })]),
+  "aria-hidden": PropTypes.oneOf(["false", "true"]),
   "as": PropTypes.oneOfType([PropTypes.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.func, PropTypes.shape({
     "childContextTypes": PropTypes.object,
     "contextType": PropTypes.shape({

package/esm/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/esm/components/time/__internal__/time-toggle/index.js

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

package/esm/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/esm/components/time/__internal__/time-toggle/time-toggle.component.js

@@ -0,0 +1,52 @@
+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); }
+import React, { useRef, useCallback } from "react";
+import PropTypes from "prop-types";
+import guid from "../../../../__internal__/utils/helpers/guid";
+import useLocale from "../../../../hooks/__internal__/useLocale";
+import ButtonToggleGroup from "./time-toggle.style";
+import { ButtonToggle } from "../../../button-toggle";
+const Toggle = ({
+  size,
+  onChange,
+  toggleValue,
+  disabled,
+  toggleProps
+}) => {
+  const locale = useLocale();
+  const amText = locale.time.amText();
+  const pmText = locale.time.pmText();
+  const internalId = useRef(guid());
+  const {
+    wrapperProps,
+    amToggleProps,
+    pmToggleProps
+  } = toggleProps || /* istanbul ignore next */{};
+  const handleChange = useCallback(event => {
+    const selectedButtonValue = event.target.value;
+    if (selectedButtonValue !== toggleValue) {
+      onChange(selectedButtonValue);
+    }
+  }, [toggleValue, onChange]);
+  return /*#__PURE__*/React.createElement(ButtonToggleGroup, _extends({}, wrapperProps, {
+    "data-component": "time-button-toggle-group",
+    m: "0px 0px 0px 8px",
+    id: internalId.current,
+    onChange: handleChange,
+    value: toggleValue,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(ButtonToggle, _extends({}, amToggleProps, {
+    "data-component": "am-button-toggle",
+    grouped: true,
+    value: "AM",
+    size: size,
+    disabled: disabled
+  }), amText), /*#__PURE__*/React.createElement(ButtonToggle, _extends({}, pmToggleProps, {
+    "data-component": "pm-button-toggle",
+    grouped: true,
+    value: "PM",
+    size: size,
+    disabled: disabled
+  }), pmText));
+};
+Toggle.displayName = "Toggle";
+export default Toggle;

package/esm/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/esm/components/time/__internal__/time-toggle/time-toggle.style.js

@@ -0,0 +1,19 @@
+import styled, { css } from "styled-components";
+import { ButtonToggleGroup } from "../../../button-toggle";
+
+// TODO this can be removed as part of FE-6335
+export default styled(ButtonToggleGroup)`
+  ${({
+  disabled
+}) => disabled && css`
+      opacity: 0.3;
+
+      [aria-pressed="true"] {
+        cursor: not-allowed;
+        :hover {
+          background-color: transparent;
+          box-shadow: inset 0px 0px 0px 3px var(--colorsActionMinor500);
+        }
+      }
+    `}
+`;

package/esm/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/esm/components/time/index.js

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

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

@@ -0,0 +1,73 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { ValidationProps } from "../../__internal__/validations";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+import { Sizes } from "../../__internal__/input/input-presentation.component";
+import { ToggleDataProps } from "./__internal__/time-toggle";
+export declare type ToggleValue = "AM" | "PM";
+export declare type TimeValue = {
+    hours: string;
+    minutes: string;
+    period?: ToggleValue;
+};
+export interface TimeInputEvent {
+    target: {
+        name?: string;
+        id: string;
+        value: TimeValue;
+    };
+}
+interface TimeInputProps extends Omit<TagProps, "data-component">, Omit<ValidationProps, "info"> {
+    /** Set an id value on the input */
+    id?: string;
+    /** Override the default label text */
+    label?: string;
+    /** Override the default aria-label text */
+    "aria-label"?: string;
+}
+export interface TimeProps extends Omit<TagProps, "data-component">, MarginProps {
+    /** Label text for the component */
+    label?: string;
+    /** Sets the size of the inputs */
+    size?: Sizes;
+    /** Additional hint text rendered above the input elements */
+    inputHint?: string;
+    /**
+     * Set custom `data-` and `id` attributes on the input element.
+     * Set the `label` and `aria-label` values for the associated Label element.
+     * Set the `error` and `warning` states for the input
+     *  */
+    hoursInputProps?: TimeInputProps;
+    /**
+     * Set custom `data-` and `id` attributes on the input element.
+     * Set the `label` and `aria-label` values for the associated Label element.
+     * Set the `error` and `warning` states for the input
+     *  */
+    minutesInputProps?: TimeInputProps;
+    /** The value of the input elements */
+    value: TimeValue;
+    /** Callback to handle change events in input elements */
+    onChange: (ev: TimeInputEvent) => void;
+    /** Set a name value on the component */
+    name?: string;
+    /** Callback called when focus is lost on input elements */
+    onBlur?: (ev?: React.FocusEvent<HTMLInputElement>) => void;
+    /** Flag to configure component as mandatory */
+    required?: boolean;
+    /** Flag to configure component as optional */
+    isOptional?: boolean;
+    /** If true, the component will be disabled */
+    disabled?: boolean;
+    /** If true, the component will be read-only */
+    readOnly?: boolean;
+    /** Set custom data- attributes on the toggle elements */
+    toggleProps?: ToggleDataProps;
+}
+export declare type TimeHandle = {
+    /** Programmatically focus the hours input. */
+    focusHoursInput: () => void;
+    /** Programmatically focus the minutes input. */
+    focusMinutesInput: () => void;
+} | null;
+declare const Time: React.ForwardRefExoticComponent<TimeProps & React.RefAttributes<TimeHandle>>;
+export default Time;

package/esm/components/time/time.component.js

@@ -0,0 +1,428 @@
+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); }
+import React, { useCallback, useImperativeHandle, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import guid from "../../__internal__/utils/helpers/guid";
+import useLocale from "../../hooks/__internal__/useLocale";
+import tagComponent from "../../__internal__/utils/helpers/tags/tags";
+import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
+import Fieldset from "../../__internal__/fieldset";
+import Box from "../box";
+import { ErrorBorder } from "../textbox/textbox.style";
+import ValidationMessage from "../../__internal__/validation-message";
+import Number from "../number";
+import Typography from "../typography";
+import { StyledLabel as Label, StyledHintText as Hint } from "./time.style";
+import { TimeToggle } from "./__internal__/time-toggle";
+const Time = /*#__PURE__*/React.forwardRef(({
+  label,
+  size = "medium",
+  inputHint,
+  hoursInputProps = {},
+  minutesInputProps = {},
+  value,
+  name,
+  onChange,
+  onBlur,
+  required,
+  isOptional,
+  disabled,
+  readOnly,
+  toggleProps = {},
+  ...rest
+}, ref) => {
+  const {
+    id: hoursInputId,
+    label: hoursLabel,
+    "aria-label": hoursAriaLabel,
+    error: hoursError,
+    warning: hoursWarning
+  } = hoursInputProps;
+  const {
+    id: minutesInputId,
+    label: minutesLabel,
+    "aria-label": minutesAriaLabel,
+    error: minutesError,
+    warning: minutesWarning
+  } = minutesInputProps;
+  const internalHrsId = useRef(hoursInputId || guid());
+  const internalMinsId = useRef(minutesInputId || guid());
+  const inputHintId = useRef(guid());
+  const internalId = useRef(`${internalHrsId.current} ${internalMinsId.current}`);
+  const {
+    hours: hourValue,
+    minutes: minuteValue,
+    period: toggleValue
+  } = value;
+  const [inputValues, setInputValues] = useState([hourValue, minuteValue]);
+  const locale = useLocale();
+  const showToggle = toggleValue !== undefined;
+  const [period, setPeriod] = useState(toggleValue);
+  const hrsLabel = hoursLabel || locale.time.hoursLabelText();
+  const minsLabel = minutesLabel || locale.time.minutesLabelText();
+  const hrsAriaLabel = hoursAriaLabel || locale.time.hoursAriaLabelText();
+  const minsAriaLabel = minutesAriaLabel || locale.time.minutesAriaLabelText();
+  const hoursRef = useRef(null);
+  const minsRef = useRef(null);
+  const computedValidations = (hrs, mins) => {
+    const hoursIsString = typeof hrs === "string";
+    const minutesIsString = typeof mins === "string";
+    if (!hoursIsString && !minutesIsString) {
+      return hrs || mins;
+    }
+    if (hoursIsString && !minutesIsString) {
+      return hrs;
+    }
+    if (minutesIsString && !hoursIsString) {
+      return mins;
+    }
+    return `${hrs} ${mins}`;
+  };
+  const error = computedValidations(hoursError, minutesError);
+  const warning = computedValidations(hoursWarning, minutesWarning);
+  const hasValidationFailure = !!(error || warning);
+  const {
+    validationId,
+    ariaDescribedBy
+  } = useInputAccessibility({
+    id: internalId.current,
+    validationRedesignOptIn: true,
+    error,
+    warning
+  });
+  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId.current].filter(Boolean).join(" ");
+  useImperativeHandle(ref, () => ({
+    focusHoursInput() {
+      hoursRef.current?.focus();
+    },
+    focusMinutesInput() {
+      minsRef.current?.focus();
+    }
+  }), []);
+  const handleChange = (ev, inputName) => {
+    const hours = inputName === "hrs" ? ev.target.value : inputValues[0];
+    const minutes = inputName === "mins" ? ev.target.value : inputValues[1];
+    setInputValues([hours, minutes]);
+    onChange({
+      target: {
+        name,
+        id: internalId.current,
+        value: {
+          hours,
+          minutes,
+          period
+        }
+      }
+    });
+  };
+  const handlePeriodChange = periodName => {
+    const [hours, minutes] = inputValues;
+    setPeriod(periodName);
+    onChange({
+      target: {
+        name,
+        id: internalId.current,
+        value: {
+          hours,
+          minutes,
+          period: periodName
+        }
+      }
+    });
+  };
+  const handleBlur = useCallback(ev => {
+    setTimeout(() => {
+      if (hoursRef.current !== document.activeElement && minsRef.current !== document.activeElement) {
+        onBlur?.(ev);
+      }
+    });
+  }, [onBlur]);
+  return /*#__PURE__*/React.createElement(Fieldset, _extends({
+    legend: label,
+    legendMargin: {
+      mb: 0
+    },
+    width: "min-content",
+    isRequired: required,
+    isOptional: isOptional,
+    isDisabled: disabled,
+    name: name,
+    id: internalId.current
+  }, rest, tagComponent("time", rest), {
+    "aria-describedby": combinedAriaDescribedBy
+  }), inputHint && /*#__PURE__*/React.createElement(Hint, {
+    id: inputHintId.current,
+    isDisabled: disabled
+  }, inputHint), /*#__PURE__*/React.createElement(Box, {
+    position: "relative"
+  }, /*#__PURE__*/React.createElement(ValidationMessage, {
+    validationId: validationId,
+    error: error,
+    warning: warning
+  }), hasValidationFailure && /*#__PURE__*/React.createElement(ErrorBorder, {
+    warning: !!(!error && warning)
+  }), /*#__PURE__*/React.createElement(Box, {
+    display: "flex"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Label, {
+    "aria-label": hrsAriaLabel,
+    htmlFor: internalHrsId.current,
+    disabled: disabled
+  }, hrsLabel), /*#__PURE__*/React.createElement(Number, _extends({}, hoursInputProps, {
+    label: undefined,
+    "data-component": "hours",
+    ref: hoursRef,
+    value: hourValue,
+    onChange: ev => handleChange(ev, "hrs"),
+    onBlur: handleBlur,
+    id: internalHrsId.current,
+    size: size,
+    error: !!hoursError,
+    warning: !!hoursWarning,
+    disabled: disabled,
+    readOnly: readOnly
+  }))), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    mx: 1,
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("span", null, "\xA0"), /*#__PURE__*/React.createElement(Typography, {
+    isDisabled: disabled,
+    variant: "span",
+    mb: "-4px"
+  }, ":")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Label, {
+    "aria-label": minsAriaLabel,
+    htmlFor: internalMinsId.current,
+    disabled: disabled
+  }, minsLabel), /*#__PURE__*/React.createElement(Number, _extends({}, minutesInputProps, {
+    label: undefined,
+    "data-component": "minutes",
+    ref: minsRef,
+    value: minuteValue,
+    onChange: ev => handleChange(ev, "mins"),
+    onBlur: handleBlur,
+    id: internalMinsId.current,
+    size: size,
+    error: !!minutesError,
+    warning: !!minutesWarning,
+    disabled: disabled,
+    readOnly: readOnly
+  }))), showToggle && /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "flex-end"
+  }, /*#__PURE__*/React.createElement(TimeToggle, {
+    toggleProps: toggleProps,
+    size: size,
+    onChange: handlePeriodChange,
+    toggleValue: toggleValue,
+    disabled: disabled || readOnly
+  })))));
+});
+Time.propTypes = {
+  "children": PropTypes.node,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "disabled": PropTypes.bool,
+  "hoursInputProps": PropTypes.shape({
+    "aria-label": PropTypes.string,
+    "data-element": PropTypes.string,
+    "data-role": PropTypes.string,
+    "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+    "id": PropTypes.string,
+    "label": PropTypes.string,
+    "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
+  }),
+  "inputHint": PropTypes.string,
+  "isOptional": PropTypes.bool,
+  "label": PropTypes.string,
+  "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]),
+  "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]),
+  "minutesInputProps": PropTypes.shape({
+    "aria-label": PropTypes.string,
+    "data-element": PropTypes.string,
+    "data-role": PropTypes.string,
+    "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+    "id": PropTypes.string,
+    "label": PropTypes.string,
+    "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
+  }),
+  "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,
+  "onBlur": PropTypes.func,
+  "onChange": PropTypes.func.isRequired,
+  "readOnly": PropTypes.bool,
+  "required": PropTypes.bool,
+  "size": PropTypes.oneOf(["large", "medium", "small"]),
+  "toggleProps": PropTypes.shape({
+    "amToggleProps": PropTypes.shape({
+      "data-element": PropTypes.string,
+      "data-role": PropTypes.string
+    }),
+    "pmToggleProps": PropTypes.shape({
+      "data-element": PropTypes.string,
+      "data-role": PropTypes.string
+    }),
+    "wrapperProps": PropTypes.shape({
+      "data-element": PropTypes.string,
+      "data-role": PropTypes.string
+    })
+  }),
+  "value": PropTypes.shape({
+    "hours": PropTypes.string.isRequired,
+    "minutes": PropTypes.string.isRequired,
+    "period": PropTypes.oneOf(["AM", "PM"])
+  }).isRequired
+};
+Time.displayName = "Time";
+export default Time;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const StyledLabel: import("styled-components").StyledComponent<import("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, }: import("../../__internal__/label").LabelProps) => import("react").JSX.Element>, any, {}, never>;
+export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {
+    isDisabled?: boolean | undefined;
+    hasError?: boolean | undefined;
+}, never>;

package/esm/components/time/time.style.js

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+import Label from "../../__internal__/label";
+export const StyledLabel = styled(Label)`
+  label {
+    font-weight: var(--fontWeights500);
+  }
+`;
+export const StyledHintText = styled.div`
+  ::after {
+    content: " ";
+  }
+
+  margin-top: 0px;
+  margin-bottom: var(--spacing150);
+  color: ${({
+  isDisabled
+}) => isDisabled ? "var(--colorsUtilityYin030)" : "var(--colorsUtilityYin055)"};
+  font-size: 14px;
+`;