@transferwise/components 46.13.0 → 46.15.0

package/build/index.js

@@ -8,6 +8,7 @@ var icons = require('@transferwise/icons');
 var reactIntl = require('react-intl');
 var PropTypes = require('prop-types');
 var componentsTheming = require('@wise/components-theming');
+var formatting = require('@transferwise/formatting');
 var react$1 = require('@headlessui/react');
 var mergeProps = require('merge-props');
 var mergeRefs = require('react-merge-refs');
@@ -15,7 +16,6 @@ var shim = require('use-sync-external-store/shim');
 var react = require('@floating-ui/react');
 var focus = require('@react-aria/focus');
 var overlays = require('@react-aria/overlays');
-var formatting = require('@transferwise/formatting');
 var reactTransitionGroup = require('react-transition-group');
 var reactPopper = require('react-popper');
 var throttle = require('lodash.throttle');
@@ -2779,15 +2779,15 @@ function getDayNames(locale, format = 'short') {
   return days;
 }
 
-function isWithinRange(date, min, max) {
-  return !date || (!min || date >= min) && (!max || date <= max);
-}
-
 // Makes sure that date is between min and max dates, returns a cloned min or max
 function moveToWithinRange(date, min, max) {
   return isWithinRange(date, min, max) ? date : new Date(min && date < min ? +min : +max);
 }
 
+function isWithinRange(date, min, max) {
+  return !date || (!min || date >= min) && (!max || date <= max);
+}
+
 const getMonthNames = (locale, format = 'long') => {
   const months = [];
   const date = new Date(2018, 0, 1);
@@ -2801,9 +2801,17 @@ const getMonthNames = (locale, format = 'long') => {
   return months;
 };
 
-const isDateValid = date => validDateObject(date) || validDateString(date);
-const validDateString = dateString => typeof dateString === 'string' && validDateObject(new Date(dateString));
-const validDateObject = dateObject => dateObject instanceof Date && !isNaN(dateObject); // eslint-disable-line no-restricted-globals
+const isDateValid = date => {
+  if (date === null) {
+    return false;
+  } else if (date instanceof Date) {
+    return validDateObject(date);
+  } else {
+    return validDateString(date);
+  }
+};
+const validDateString = dateString => validDateObject(new Date(dateString));
+const validDateObject = dateObject => !isNaN(dateObject.getTime());
 
 const isMonthAndYearFormat = dateString => validDateString(dateString) && dateString.split('-').length < 3;
 
@@ -2825,48 +2833,31 @@ var messages$9 = reactIntl.defineMessages({
   }
 });
 
-const explodeDate = date => {
-  const year = date.getFullYear();
-  const month = date.getMonth();
-  const day = date.getDate();
-  return {
-    year,
-    month,
-    day
-  };
-};
-
 const convertToLocalMidnight = date => {
   const utcDate = new Date(date.split('T')[0]); // using YYYY-MM-DD creates UTC date
-
   return new Date(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), utcDate.getUTCDate());
 };
 
 const MonthBeforeDay = new Set(['en-US', 'ja-JP']);
-const INITIAL_DEFAULT_STATE = {
-  year: null,
-  month: null,
-  day: null
-};
 const DateInput = ({
   'aria-labelledby': ariaLabelledBy,
   'aria-label': ariaLabel,
-  disabled,
-  size,
+  disabled = false,
+  size = exports.Size.MEDIUM,
   value,
   dayLabel,
   dayAutoComplete,
   monthLabel,
   yearLabel,
   yearAutoComplete,
-  monthFormat,
-  mode,
+  monthFormat = exports.MonthFormat.LONG,
+  mode = exports.DateMode.DAY_MONTH_YEAR,
   onChange,
   onFocus,
   onBlur,
   placeholders,
   id,
-  selectProps
+  selectProps = {}
 }) => {
   const {
     locale,
@@ -2876,23 +2867,34 @@ const DateInput = ({
     if (value && isDateValid(value)) {
       return typeof value === 'string' ? convertToLocalMidnight(value) : value;
     }
-    return null;
+    return undefined;
   };
-  const getExplodedDate = unit => {
-    let explodedDate = INITIAL_DEFAULT_STATE;
+  const getInitialDate = unit => {
     if (value && isDateValid(value)) {
       const dateObject = getDateObject();
-      explodedDate = explodeDate(dateObject);
-      if (isMonthAndYearFormat(value)) {
-        explodedDate.day = null;
+      if (typeof value === 'string' && isMonthAndYearFormat(value) && unit === 'day') {
+        return null;
+      }
+      if (dateObject !== undefined) {
+        switch (unit) {
+          case 'year':
+            return dateObject.getFullYear();
+          case 'month':
+            return dateObject.getMonth();
+          case 'day':
+            return dateObject.getDate();
+          default:
+            return null;
+        }
       }
     }
-    return explodedDate[unit];
+    return null;
   };
-  const [day, setDay] = React.useState(() => getExplodedDate('day'));
-  const [month, setMonth] = React.useState(() => getExplodedDate('month'));
-  const [year, setYear] = React.useState(() => getExplodedDate('year'));
+  const [day, setDay] = React.useState(() => getInitialDate('day'));
+  const [month, setMonth] = React.useState(() => getInitialDate('month'));
+  const [year, setYear] = React.useState(() => getInitialDate('year'));
   const [lastBroadcastedValue, setLastBroadcastedValue] = React.useState(getDateObject);
+  const monthNames = getMonthNames(locale, monthFormat);
   dayLabel = dayLabel || formatMessage(messages$9.dayLabel);
   monthLabel = monthLabel || formatMessage(messages$9.monthLabel);
   yearLabel = yearLabel || formatMessage(messages$9.yearLabel);
@@ -2914,7 +2916,6 @@ const DateInput = ({
     }
   };
   const getSelectElement = () => {
-    const monthOptions = getMonthsOptions();
     return /*#__PURE__*/jsxRuntime.jsxs("label", {
       className: "d-flex flex-column",
       children: [/*#__PURE__*/jsxRuntime.jsx("span", {
@@ -2923,70 +2924,60 @@ const DateInput = ({
       }), /*#__PURE__*/jsxRuntime.jsx(SelectInput, {
         name: "month",
         disabled: disabled,
-        placeholder: placeholders.month,
-        items: monthOptions,
+        placeholder: placeholders?.month,
+        items: Array.from({
+          length: 12
+        }, (_, index) => ({
+          type: 'option',
+          value: index
+        })),
         size: size,
-        value: monthOptions.find(item => item.value.value === month)?.value,
-        renderValue: ({
-          label
-        }) => /*#__PURE__*/jsxRuntime.jsx(SelectInputOptionContent, {
-          title: label
+        value: month,
+        renderValue: selectedValue => /*#__PURE__*/jsxRuntime.jsx(SelectInputOptionContent, {
+          title: monthNames[selectedValue]
         }),
         onChange: selectedValue => handleMonthChange(selectedValue),
         ...selectProps
       })]
     });
   };
-  const getMonthsOptions = () => {
-    const options = [];
-    const months = getMonthNames(locale, monthFormat);
-    months.forEach((label, index) => {
-      options.push({
-        type: 'option',
-        value: {
-          label,
-          value: index
-        }
-      });
-    });
-    return options;
-  };
   const handleInternalValue = (newDay = day, newMonth = month, newYear = year) => {
-    const dateValue = newDay != null && newMonth != null && newYear != null ? new Date(newYear, newMonth, newDay) : null;
-    const newValue = isDateValid(dateValue) ? dateValue : null;
-    if (!newValue) {
-      broadcastNewValue(INITIAL_DEFAULT_STATE);
+    if (newDay == null || newMonth == null || newYear == null) {
+      broadcastNewValue(null);
+      return;
+    }
+    const dateValue = new Date(newYear, newMonth, newDay);
+    if (!isDateValid(dateValue)) {
+      broadcastNewValue(null);
+      return;
     }
     if (mode === exports.DateMode.MONTH_YEAR) {
-      if (newMonth >= 0 && newYear && (newMonth !== month || newYear !== year)) {
-        broadcastNewValue(newValue);
+      if (newMonth !== month || newYear !== year) {
+        broadcastNewValue(dateValue);
       }
-    } else if (newDay && newMonth >= 0 && newYear && (newDay !== day || newMonth !== month || newYear !== year)) {
-      broadcastNewValue(newValue);
+    } else if (newDay !== day || newMonth !== month || newYear !== year) {
+      broadcastNewValue(dateValue);
     }
   };
   const handleDayChange = event => {
     const {
       checkedDay
-    } = checkDate(event.target.value, month, year);
+    } = checkDate(Number.parseInt(event.target.value, 10), month, year);
     setDay(checkedDay);
     handleInternalValue(checkedDay, month, year);
   };
-  const handleMonthChange = selectedValue => {
-    if (!selectedValue) {
+  const handleMonthChange = selectedMonth => {
+    if (selectedMonth === null) {
       setMonth(null);
       handleInternalValue(day, null, year);
       return;
     }
-    const selectedMonth = selectedValue ? selectedValue.value : 0;
     const {
       checkedDay
     } = checkDate(day, selectedMonth, year);
     setMonth(selectedMonth);
-    if (day) {
-      if (checkedDay !== day) {
-        setDay(checkedDay);
-      }
+    if (day && checkedDay !== day) {
+      setDay(checkedDay);
     }
     handleInternalValue(checkedDay, selectedMonth, year);
   };
@@ -2997,35 +2988,33 @@ const DateInput = ({
       // Correct day based on year and month.
       const {
         checkedDay
-      } = checkDate(day, month, newValue);
-      if (day) {
-        if (checkedDay !== day) {
-          setDay(checkedDay);
-        }
+      } = checkDate(day, month, Number.parseInt(newValue, 10));
+      if (day && checkedDay !== day) {
+        setDay(checkedDay);
       }
-      setYear(slicedYear);
-      handleInternalValue(checkedDay, month, slicedYear);
+      setYear(Number.parseInt(slicedYear, 10));
+      handleInternalValue(checkedDay, month, Number.parseInt(slicedYear, 10));
     } else {
-      setYear(slicedYear);
+      setYear(Number.parseInt(slicedYear, 10));
       handleInternalValue(day, month, null);
     }
   };
   const broadcastNewValue = newValue => {
     if (newValue !== lastBroadcastedValue) {
       setLastBroadcastedValue(newValue);
-      onChange(getDateAsString(newValue) || null);
+      onChange(newValue != null ? getDateAsString(newValue) : null);
     }
   };
   const checkDate = (newDay = null, newMonth = 0, newYear = null) => {
     let checkedDay = newDay;
-    const maxDay = new Date(newYear || 2000, newMonth + 1, 0).getDate();
+    const maxDay = new Date(newYear || 2000, newMonth != null ? newMonth + 1 : 1, 0).getDate();
     if (!newDay) {
       checkedDay = null;
     }
-    if (newDay && newDay < 0 || newDay === '00') {
+    if (newDay && newDay < 0) {
       checkedDay = 1;
     }
-    if (newDay && newMonth || newDay > 31) {
+    if (newDay && newMonth || newDay && newDay > 31) {
       checkedDay = newDay > maxDay ? maxDay : newDay;
     }
     return {
@@ -3045,8 +3034,10 @@ const DateInput = ({
     id: id,
     "aria-labelledby": ariaLabelledBy,
     "aria-label": ariaLabel,
-    onFocus: event => shouldPropagateOnFocus(event) ? onFocus && onFocus() : event.stopPropagation(),
-    onBlur: event => shouldPropagateOnBlur(event) ? onBlur && onBlur() : event.stopPropagation(),
+    role: "group" // Add role attribute to indicate container for interactive elements
+    ,
+    onFocus: event => shouldPropagateOnFocus(event) ? onFocus && onFocus(event) : event.stopPropagation(),
+    onBlur: event => shouldPropagateOnBlur(event) ? onBlur && onBlur(event) : event.stopPropagation(),
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "row",
       children: [monthBeforeDay && /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -3099,7 +3090,6 @@ const DateInput = ({
     })
   });
 };
-
 // Should only propagate if the relatedTarget is not part of this DateInput component.
 function shouldPropagateOnFocus({
   target,
@@ -3109,7 +3099,6 @@ function shouldPropagateOnFocus({
   const relatedParent = relatedTarget && relatedTarget.closest('.tw-date');
   return targetParent !== relatedParent;
 }
-
 // Should only propagate if the relatedTarget or the activeElement is not part of this DateInput component.
 function shouldPropagateOnBlur({
   target,
@@ -3126,42 +3115,6 @@ function shouldPropagateOnBlur({
   const focusElementParent = focusElement && focusElement.closest('.tw-date');
   return blurElementParent !== focusElementParent;
 }
-DateInput.propTypes = {
-  'aria-label': PropTypes__default.default.string,
-  'aria-labelledby': PropTypes__default.default.string,
-  disabled: PropTypes__default.default.bool,
-  size: PropTypes__default.default.oneOf(['sm', 'md', 'lg']),
-  value: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.instanceOf(Date)]),
-  onChange: PropTypes__default.default.func.isRequired,
-  onFocus: PropTypes__default.default.func,
-  onBlur: PropTypes__default.default.func,
-  dayLabel: PropTypes__default.default.string,
-  dayAutoComplete: PropTypes__default.default.string,
-  monthLabel: PropTypes__default.default.string,
-  yearLabel: PropTypes__default.default.string,
-  yearAutoComplete: PropTypes__default.default.string,
-  monthFormat: PropTypes__default.default.oneOf(['long', 'short']),
-  mode: PropTypes__default.default.oneOf(['day-month-year', 'month-year']),
-  placeholders: PropTypes__default.default.shape({
-    day: PropTypes__default.default.node,
-    month: PropTypes__default.default.node,
-    year: PropTypes__default.default.node
-  }),
-  id: PropTypes__default.default.string,
-  selectProps: PropTypes__default.default.object
-};
-DateInput.defaultProps = {
-  disabled: false,
-  size: exports.Size.MEDIUM,
-  value: null,
-  onFocus: null,
-  onBlur: null,
-  monthFormat: exports.MonthFormat.LONG,
-  mode: exports.DateMode.DAY_MONTH_YEAR,
-  id: '',
-  selectProps: {}
-};
-var DateInput$1 = DateInput;
 
 const POPOVER_OFFSET = [0, 16];
 // By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
@@ -4347,6 +4300,7 @@ class DateLookup extends React.PureComponent {
       size,
       placeholder,
       label,
+      'aria-labelledby': ariaLabelledBy,
       monthFormat,
       disabled,
       clearable,
@@ -4355,6 +4309,7 @@ class DateLookup extends React.PureComponent {
     return /*#__PURE__*/jsxRuntime.jsxs("div", {
       // eslint-disable-line jsx-a11y/no-static-element-interactions
       ref: this.element,
+      "aria-labelledby": ariaLabelledBy,
       className: "input-group",
       onKeyDown: this.handleKeyDown,
       children: [/*#__PURE__*/jsxRuntime.jsx(DateTrigger$1, {
@@ -4384,6 +4339,7 @@ DateLookup.propTypes = {
   size: PropTypes__default.default.oneOf(['sm', 'md', 'lg']),
   placeholder: PropTypes__default.default.string,
   label: PropTypes__default.default.string,
+  'aria-labelledby': PropTypes__default.default.string,
   monthFormat: PropTypes__default.default.oneOf(['long', 'short']),
   disabled: PropTypes__default.default.bool,
   onChange: PropTypes__default.default.func.isRequired,
@@ -4406,19 +4362,6 @@ DateLookup.defaultProps = {
 };
 var DateLookup$1 = DateLookup;
 
-// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
-exports.DecisionPresentation = void 0;
-(function (Presentation) {
-  Presentation["LIST"] = "LIST";
-  Presentation["LIST_BLOCK"] = "LIST_BLOCK";
-  Presentation["LIST_BLOCK_GRID"] = "LIST_BLOCK_GRID";
-})(exports.DecisionPresentation || (exports.DecisionPresentation = {}));
-// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
-exports.DecisionType = void 0;
-(function (Type) {
-  Type["NAVIGATION"] = "NAVIGATION";
-})(exports.DecisionType || (exports.DecisionType = {}));
-
 const NavigationOption = /*#__PURE__*/React.forwardRef(({
   as: component = 'button',
   disabled = false,
@@ -4452,70 +4395,6 @@ const NavigationOption = /*#__PURE__*/React.forwardRef(({
   });
 });
 
-const Layout = {
-  COLUMN: 'COLUMN'
-};
-const SizeSwapper = /*#__PURE__*/React.forwardRef(({
-  items,
-  inline
-}, reference) => {
-  const parentReference = React.useRef(null);
-  const [clientWidth] = useClientWidth({
-    ref: reference || parentReference
-  });
-  if (!items || items.length === 0) {
-    return null;
-  }
-  // If all breakpoints are specified and clientWidth never > breakpoint itemsToRender can be undefined.
-  // Do not use deconstruct here to get items and layout.
-  let itemsToRender = [];
-  if (clientWidth) {
-    itemsToRender = items.filter(({
-      breakpoint = 0
-    }) => clientWidth >= breakpoint).pop();
-  } else {
-    // On SSR environments useClientWidth returns null because ref is undefined so we render
-    // all elements by default.
-    // If there's no SSR and on first Hydration only the right elements are going to be rendered.
-    // If clientWidth is null or zero all elements render like a responsive technique would do.
-    itemsToRender.items = items.map(({
-      items
-    }) => Object.values(items));
-  }
-
-  // Always return parent container even if there are no items to display to
-  // keep the ref on DOM and let clientWidth be calculated properly.
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    ref: parentReference,
-    className: classNames__default.default('np-size-swapper', {
-      'd-flex': !inline,
-      'd-inline-flex': inline,
-      'flex-column': itemsToRender && itemsToRender.layout === Layout.COLUMN,
-      'flex-wrap': itemsToRender && itemsToRender.wrap
-    }),
-    style: {
-      visibility: clientWidth ? 'visible' : 'hidden'
-    },
-    children: itemsToRender && itemsToRender.items
-  });
-});
-SizeSwapper.Breakpoint = exports.Breakpoint;
-SizeSwapper.Layout = Layout;
-SizeSwapper.propTypes = {
-  inline: PropTypes__default.default.bool,
-  /** List of items that will appear at the specified breakpoint and presented in row or columns depending on layout  */
-  items: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
-    items: PropTypes__default.default.arrayOf(PropTypes__default.default.element),
-    breakpoint: PropTypes__default.default.number,
-    layout: PropTypes__default.default.oneOf([SizeSwapper.Layout.COLUMN]),
-    wrap: PropTypes__default.default.bool
-  })).isRequired
-};
-SizeSwapper.defaultProps = {
-  inline: false
-};
-var SizeSwapper$1 = SizeSwapper;
-
 const Tile = ({
   className,
   description,
@@ -4564,7 +4443,7 @@ Tile.propTypes = {
   className: PropTypes__default.default.string,
   description: PropTypes__default.default.node,
   disabled: PropTypes__default.default.bool,
-  href: PropTypes__default.default.string.isRequired,
+  href: PropTypes__default.default.string,
   target: PropTypes__default.default.oneOf(['_self', '_blank', '_parent', '_top']),
   /** Accepts only Avatar and images */
   media: PropTypes__default.default.node.isRequired,
@@ -4583,85 +4462,28 @@ Tile.defaultProps = {
 };
 var Tile$1 = Tile;
 
+exports.DecisionPresentation = void 0;
+(function (DecisionPresentation) {
+  DecisionPresentation["LIST"] = "LIST";
+  DecisionPresentation["LIST_BLOCK"] = "LIST_BLOCK";
+  DecisionPresentation["LIST_BLOCK_GRID"] = "LIST_BLOCK_GRID";
+})(exports.DecisionPresentation || (exports.DecisionPresentation = {}));
+exports.DecisionType = void 0;
+(function (DecisionType) {
+  DecisionType["NAVIGATION"] = "NAVIGATION";
+})(exports.DecisionType || (exports.DecisionType = {}));
 const Decision = ({
   options,
-  presentation,
-  type,
-  showMediaCircleInList,
-  isContainerAligned,
-  size
+  presentation = exports.DecisionPresentation.LIST,
+  size = exports.Size.MEDIUM,
+  type = exports.DecisionType.NAVIGATION,
+  showMediaCircleInList = true,
+  isContainerAligned = false
 }) => {
+  const screenXs = useScreenSize(exports.Breakpoint.EXTRA_SMALL);
+  const screenSm = useScreenSize(exports.Breakpoint.SMALL);
   if (type === exports.DecisionType.NAVIGATION) {
-    const {
-      LIST_BLOCK,
-      LIST_BLOCK_GRID
-    } = exports.DecisionPresentation;
-    if (presentation === LIST_BLOCK || presentation === LIST_BLOCK_GRID) {
-      const isSmall = size === exports.Size.SMALL;
-      const isGrid = presentation === LIST_BLOCK_GRID;
-      const items = [{
-        items: [],
-        layout: SizeSwapper$1.Layout.COLUMN
-      }, {
-        items: [],
-        breakpoint: isSmall ? exports.Breakpoint.EXTRA_SMALL : exports.Breakpoint.SMALL,
-        wrap: isGrid
-      }];
-      options.forEach(({
-        description,
-        disabled,
-        href,
-        target,
-        media: {
-          block,
-          list
-        },
-        onClick,
-        title
-      }, key) => {
-        items[0].items.push( /*#__PURE__*/jsxRuntime.jsx(NavigationOption
-        // eslint-disable-next-line react/no-array-index-key
-        , {
-          complex: false,
-          content: description,
-          disabled: disabled,
-          href: href,
-          target: target,
-          media: list,
-          showMediaAtAllSizes: true,
-          showMediaCircle: showMediaCircleInList,
-          isContainerAligned: isContainerAligned,
-          title: title,
-          onClick: onClick
-        }, `nav-${key}`));
-        items[1].items.push( /*#__PURE__*/jsxRuntime.jsx(Tile$1
-        // eslint-disable-next-line react/no-array-index-key
-        , {
-          className: classNames__default.default(`np-decision__tile${isSmall ? '--small' : ''}`, {
-            'np-decision__tile--fixed-width': isGrid
-          }),
-          description: description,
-          disabled: disabled,
-          href: href,
-          target: target,
-          media: block,
-          size: isSmall ? exports.Size.SMALL : exports.Size.MEDIUM,
-          title: title,
-          onClick: onClick
-        }, `tile-${key}`));
-      });
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames__default.default('np-decision', {
-          'np-decision--small': isSmall,
-          'np-decision--grid': isGrid
-        }),
-        children: /*#__PURE__*/jsxRuntime.jsx(SizeSwapper$1, {
-          items: items
-        })
-      });
-    }
-    // LIST
-    return options.map(({
+    const renderedOptions = options.map(({
       title,
       description,
       disabled,
@@ -4686,42 +4508,49 @@ const Decision = ({
       title: title,
       onClick: onClick
     }, `nav-${key}`));
+    if (presentation === exports.DecisionPresentation.LIST_BLOCK || presentation === exports.DecisionPresentation.LIST_BLOCK_GRID) {
+      const isSmall = size === exports.Size.SMALL;
+      const breakpoint = isSmall ? screenXs : screenSm;
+      const isGrid = presentation === exports.DecisionPresentation.LIST_BLOCK_GRID;
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classNames__default.default('np-decision d-flex', {
+          'np-decision--small': isSmall,
+          'np-decision--grid': isGrid
+        }, breakpoint ? isGrid && 'flex-wrap' : 'flex-column'),
+        children: breakpoint ? options.map(({
+          description,
+          disabled,
+          href,
+          target,
+          media: {
+            block
+          },
+          onClick,
+          title
+        }, key) => /*#__PURE__*/jsxRuntime.jsx(Tile$1
+        // eslint-disable-next-line react/no-array-index-key
+        , {
+          className: classNames__default.default(`np-decision__tile${isSmall ? '--small' : ''}`, {
+            'np-decision__tile--fixed-width': isGrid
+          }),
+          description: description,
+          disabled: disabled,
+          href: href,
+          target: target,
+          media: block,
+          size: isSmall ? exports.Size.SMALL : exports.Size.MEDIUM,
+          title: title,
+          onClick: onClick
+        }, `tile-${key}`)) : renderedOptions
+      });
+    }
+    // LIST
+    return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: renderedOptions
+    });
   }
-  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {});
-};
-Decision.propTypes = {
-  /**  A list of elements to be rendered */
-  options: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
-    description: PropTypes__default.default.node,
-    disabled: PropTypes__default.default.bool,
-    href: PropTypes__default.default.string,
-    target: PropTypes__default.default.oneOf(['_self', '_blank', '_parent', '_top']),
-    media: PropTypes__default.default.shape({
-      block: PropTypes__default.default.node.isRequired,
-      list: PropTypes__default.default.node.isRequired
-    }),
-    onClick: PropTypes__default.default.func,
-    title: PropTypes__default.default.node.isRequired
-  })).isRequired,
-  /**  Handles the display mode of the component */
-  presentation: PropTypes__default.default.oneOf(['LIST', 'LIST_BLOCK', 'LIST_BLOCK_GRID']),
-  /** Size currently affects only Tile dimension */
-  size: PropTypes__default.default.oneOf(['sm', 'md']),
-  /** Decide which kind of element type needs to be rendered ex: Navigation Options or in the future Radio or Checkbox Options */
-  type: PropTypes__default.default.oneOf(['NAVIGATION']),
-  /** Display media in a circle in list presentation */
-  showMediaCircleInList: PropTypes__default.default.bool,
-  /** Sets navigation options to be aligned with the parent container */
-  isContainerAligned: PropTypes__default.default.bool
-};
-Decision.defaultProps = {
-  presentation: exports.DecisionPresentation.LIST,
-  size: exports.Size.MEDIUM,
-  type: exports.DecisionType.NAVIGATION,
-  showMediaCircleInList: true,
-  isContainerAligned: false
+  return null;
 };
-var Decision$1 = Decision;
 
 const isLayoutHorizontal = layout => [exports.Layout.HORIZONTAL_LEFT_ALIGNED, exports.Layout.HORIZONTAL_RIGHT_ALIGNED, exports.Layout.HORIZONTAL_JUSTIFIED].includes(layout);
 const getAlignmentClasses = (layout, action) => {
@@ -10143,54 +9972,42 @@ Provider.defaultProps = {
 };
 var Provider$1 = Provider;
 
-const RadioButton = ({
+function RadioButton({
   id,
-  value,
+  value = '',
   name,
   checked,
   onChange,
   disabled,
   readOnly
-}) => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-  children: [/*#__PURE__*/jsxRuntime.jsx("input", {
-    type: "radio",
-    className: "sr-only",
-    id: id,
-    value: value,
-    name: name,
-    checked: checked,
-    disabled: disabled || readOnly,
-    onChange: () => !checked ? onChange(value) : null
-  }), /*#__PURE__*/jsxRuntime.jsx("span", {
-    className: classNames__default.default('tw-radio-button', {
-      checked,
-      disabled: disabled || readOnly
-    }),
-    children: /*#__PURE__*/jsxRuntime.jsx("span", {
-      className: "tw-radio-check"
-    })
-  })]
-});
-RadioButton.propTypes = {
-  id: PropTypes__default.default.string,
-  name: PropTypes__default.default.string.isRequired,
-  checked: PropTypes__default.default.bool,
-  onChange: PropTypes__default.default.func,
-  disabled: PropTypes__default.default.bool,
-  value: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
-  readOnly: PropTypes__default.default.bool
-};
-RadioButton.defaultProps = {
-  checked: false,
-  onChange: () => {},
-  disabled: false,
-  id: null,
-  value: '',
-  readOnly: false
-};
-var RadioButton$1 = RadioButton;
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("input", {
+      type: "radio",
+      className: "sr-only",
+      id: id,
+      value: value,
+      name: name,
+      checked: checked,
+      disabled: disabled || readOnly,
+      onChange: () => {
+        if (!checked) {
+          onChange?.(value);
+        }
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: classNames__default.default('tw-radio-button', {
+        checked,
+        disabled: disabled || readOnly
+      }),
+      children: /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "tw-radio-check"
+      })
+    })]
+  });
+}
 
-const Radio = ({
+function Radio({
   label,
   id,
   disabled,
@@ -10198,7 +10015,7 @@ const Radio = ({
   avatar,
   secondary,
   ...otherProps
-}) => {
+}) {
   const {
     isModern
   } = componentsTheming.useTheme();
@@ -10214,7 +10031,7 @@ const Radio = ({
       htmlFor: id,
       children: [/*#__PURE__*/jsxRuntime.jsx("span", {
         className: classNames__default.default(isModern ? 'm-r-2' : 'p-r-2', 'np-radio-button'),
-        children: /*#__PURE__*/jsxRuntime.jsx(RadioButton$1, {
+        children: /*#__PURE__*/jsxRuntime.jsx(RadioButton, {
           id: id,
           disabled: disabled,
           ...otherProps
@@ -10236,100 +10053,36 @@ const Radio = ({
       })]
     })
   });
-};
-Radio.propTypes = {
-  avatar: PropTypes__default.default.element,
-  checked: PropTypes__default.default.bool,
-  disabled: PropTypes__default.default.bool,
-  id: PropTypes__default.default.string,
-  label: PropTypes__default.default.string.isRequired,
-  name: PropTypes__default.default.string.isRequired,
-  onChange: PropTypes__default.default.func.isRequired,
-  secondary: PropTypes__default.default.string,
-  value: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
-  className: PropTypes__default.default.string
-};
-Radio.defaultProps = {
-  avatar: undefined,
-  checked: false,
-  disabled: false,
-  id: null,
-  secondary: null,
-  value: '',
-  className: undefined
-};
-var Radio$1 = Radio;
+}
 
-class RadioGroup extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selectedValue: props.selectedValue
-    };
-  }
-  handleOnChange = selectedValue => {
-    const {
-      onChange
-    } = this.props;
-    this.setState({
-      selectedValue
-    }, onChange && onChange(selectedValue));
-  };
-  render() {
-    const {
-      radios,
-      name
-    } = this.props;
-    const {
-      selectedValue
-    } = this.state;
-    return radios && radios.length > 0 ? /*#__PURE__*/jsxRuntime.jsx("div", {
-      role: "radiogroup",
-      children: radios.map(({
-        id,
-        avatar,
-        value,
-        label,
-        disabled,
-        secondary,
-        readOnly
-      }, index) => /*#__PURE__*/jsxRuntime.jsx(Radio$1
-      // eslint-disable-next-line react/no-array-index-key
-      , {
-        id: id,
-        value: value,
-        label: label,
-        name: name,
-        disabled: disabled,
-        checked: selectedValue === value,
-        secondary: secondary,
-        readOnly: readOnly,
-        avatar: avatar,
-        onChange: value_ => this.handleOnChange(value_)
-      }, index))
-    }) : null;
-  }
+function RadioGroup({
+  name,
+  radios,
+  selectedValue: controlledValue,
+  onChange
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(controlledValue);
+  return radios.length > 0 ? /*#__PURE__*/jsxRuntime.jsx("div", {
+    role: "radiogroup",
+    children: radios.map(({
+      value = '',
+      ...restProps
+    }, index) => /*#__PURE__*/jsxRuntime.jsx(Radio
+    // eslint-disable-next-line react/no-array-index-key
+    , {
+      ...restProps,
+      name: name,
+      value: value,
+      checked: value === uncontrolledValue,
+      onChange: nextValue => {
+        setUncontrolledValue(nextValue);
+        onChange(nextValue);
+      }
+    }, index))
+  }) : null;
 }
-RadioGroup.propTypes = {
-  radios: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
-    id: PropTypes__default.default.string,
-    avatar: PropTypes__default.default.element,
-    value: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
-    secondary: PropTypes__default.default.string,
-    label: PropTypes__default.default.string.isRequired,
-    disabled: PropTypes__default.default.bool,
-    readOnly: PropTypes__default.default.bool
-  })).isRequired,
-  onChange: PropTypes__default.default.func.isRequired,
-  selectedValue: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
-  name: PropTypes__default.default.string.isRequired
-};
-RadioGroup.defaultProps = {
-  selectedValue: null
-};
-var RadioGroup$1 = RadioGroup;
 
-const RadioOption = ({
+function RadioOption({
   'aria-label': ariaLabel,
   media,
   title,
@@ -10344,22 +10097,19 @@ const RadioOption = ({
   showMediaCircle,
   showMediaAtAllSizes,
   isContainerAligned
-}) => {
-  const sharedProps = {
-    'aria-label': ariaLabel,
-    media,
-    title,
-    content,
-    name,
-    complex,
-    disabled,
-    showMediaCircle,
-    showMediaAtAllSizes,
-    isContainerAligned
-  };
+}) {
   return /*#__PURE__*/jsxRuntime.jsx(Option$2, {
-    ...sharedProps,
-    button: /*#__PURE__*/jsxRuntime.jsx(RadioButton$1, {
+    "aria-label": ariaLabel,
+    media: media,
+    title: title,
+    content: content,
+    name: name,
+    complex: complex,
+    disabled: disabled,
+    showMediaCircle: showMediaCircle,
+    showMediaAtAllSizes: showMediaAtAllSizes,
+    isContainerAligned: isContainerAligned,
+    button: /*#__PURE__*/jsxRuntime.jsx(RadioButton, {
       id: id,
       name: name,
       checked: checked,
@@ -10368,36 +10118,7 @@ const RadioOption = ({
       onChange: onChange
     })
   });
-};
-RadioOption.propTypes = {
-  'aria-label': PropTypes__default.default.string,
-  media: PropTypes__default.default.node,
-  id: PropTypes__default.default.string.isRequired,
-  name: PropTypes__default.default.string.isRequired,
-  title: PropTypes__default.default.node.isRequired,
-  content: PropTypes__default.default.node,
-  checked: PropTypes__default.default.bool,
-  onChange: PropTypes__default.default.func.isRequired,
-  complex: PropTypes__default.default.bool,
-  disabled: PropTypes__default.default.bool,
-  value: PropTypes__default.default.string,
-  showMediaCircle: PropTypes__default.default.bool,
-  showMediaAtAllSizes: PropTypes__default.default.bool,
-  isContainerAligned: PropTypes__default.default.bool
-};
-RadioOption.defaultProps = {
-  'aria-label': undefined,
-  media: null,
-  content: null,
-  checked: false,
-  complex: false,
-  disabled: false,
-  showMediaCircle: true,
-  showMediaAtAllSizes: false,
-  isContainerAligned: false,
-  value: ''
-};
-var RadioOption$1 = RadioOption;
+}
 
 const Section = ({
   children,
@@ -15483,9 +15204,9 @@ exports.CircularButton = CircularButton$1;
 exports.CriticalCommsBanner = CriticalCommsBanner;
 exports.DEFAULT_LANG = DEFAULT_LANG;
 exports.DEFAULT_LOCALE = DEFAULT_LOCALE;
-exports.DateInput = DateInput$1;
+exports.DateInput = DateInput;
 exports.DateLookup = DateLookup$1;
-exports.Decision = Decision$1;
+exports.Decision = Decision;
 exports.DefinitionList = DefinitionList$1;
 exports.Dimmer = Dimmer$1;
 exports.DirectionProvider = DirectionProvider;
@@ -15526,9 +15247,9 @@ exports.PromoCard = PromoCard$1;
 exports.PromoCardGroup = PromoCard$1;
 exports.Provider = Provider$1;
 exports.RTL_LANGUAGES = RTL_LANGUAGES;
-exports.Radio = Radio$1;
-exports.RadioGroup = RadioGroup$1;
-exports.RadioOption = RadioOption$1;
+exports.Radio = Radio;
+exports.RadioGroup = RadioGroup;
+exports.RadioOption = RadioOption;
 exports.SUPPORTED_LANGUAGES = SUPPORTED_LANGUAGES;
 exports.SearchInput = SearchInput;
 exports.Section = Section;