@transferwise/components 0.0.0-experimental-2825d2d → 0.0.0-experimental-1413ac0

package/build/index.esm.js

@@ -7,7 +7,6 @@ import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1,
 import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
 import PropTypes from 'prop-types';
 import { useTheme, ThemeProvider } from '@wise/components-theming';
-import { formatDate, formatNumber, formatMoney, formatAmount } from '@transferwise/formatting';
 import { Transition, Listbox } from '@headlessui/react';
 import mergeProps from 'merge-props';
 import mergeRefs from 'react-merge-refs';
@@ -15,6 +14,7 @@ import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, FloatingFocusManager, offset, flip, shift, size, autoUpdate } from '@floating-ui/react';
 import { FocusScope } from '@react-aria/focus';
 import { usePreventScroll } from '@react-aria/overlays';
+import { formatDate, formatNumber, formatMoney, formatAmount } from '@transferwise/formatting';
 import { CSSTransition } from 'react-transition-group';
 import { usePopper } from 'react-popper';
 import throttle from 'lodash.throttle';
@@ -207,7 +207,7 @@ var Width;
 /**
  * @deprecated use `ControlType` and `Priority` enums instead
  */
-var Type$1;
+var Type;
 (function (Type) {
   Type["PRIMARY"] = "primary";
   /**
@@ -217,7 +217,7 @@ var Type$1;
   Type["SECONDARY"] = "secondary";
   Type["DANGER"] = "danger";
   Type["LINK"] = "link";
-})(Type$1 || (Type$1 = {}));
+})(Type || (Type = {}));
 
 var DateMode;
 (function (DateMode) {
@@ -244,7 +244,7 @@ var Position;
   Position["TOP"] = "top";
 })(Position || (Position = {}));
 
-var Layout$1;
+var Layout;
 (function (Layout) {
   Layout["VERTICAL"] = "VERTICAL";
   Layout["VERTICAL_TWO_COLUMN"] = "VERTICAL_TWO_COLUMN";
@@ -253,7 +253,7 @@ var Layout$1;
   Layout["HORIZONTAL_JUSTIFIED"] = "HORIZONTAL_JUSTIFIED";
   Layout["HORIZONTAL_LEFT_ALIGNED"] = "HORIZONTAL_LEFT_ALIGNED";
   Layout["HORIZONTAL_RIGHT_ALIGNED"] = "HORIZONTAL_RIGHT_ALIGNED";
-})(Layout$1 || (Layout$1 = {}));
+})(Layout || (Layout = {}));
 
 var Status;
 (function (Status) {
@@ -2235,23 +2235,23 @@ const priorityClassMap = {
 };
 
 const deprecatedTypeMap = {
-  [Type$1.PRIMARY]: ControlType.ACCENT,
-  [Type$1.SECONDARY]: ControlType.ACCENT,
-  [Type$1.LINK]: ControlType.ACCENT,
-  [Type$1.PAY]: ControlType.POSITIVE,
-  [Type$1.DANGER]: ControlType.NEGATIVE
+  [Type.PRIMARY]: ControlType.ACCENT,
+  [Type.SECONDARY]: ControlType.ACCENT,
+  [Type.LINK]: ControlType.ACCENT,
+  [Type.PAY]: ControlType.POSITIVE,
+  [Type.DANGER]: ControlType.NEGATIVE
 };
 const oldTypePriorityMap = {
-  [Type$1.DANGER]: Priority.SECONDARY,
-  [Type$1.LINK]: Priority.TERTIARY,
-  [Type$1.SECONDARY]: Priority.SECONDARY
+  [Type.DANGER]: Priority.SECONDARY,
+  [Type.LINK]: Priority.TERTIARY,
+  [Type.SECONDARY]: Priority.SECONDARY
 };
 const deprecatedTypeMapMessage = {
-  [Type$1.DANGER]: 'Type.NEGATIVE',
-  [Type$1.LINK]: 'ControlType.ACCENT with priority Priority.TERTIARY',
-  [Type$1.PAY]: 'ControlType.POSITIVE',
-  [Type$1.PRIMARY]: 'ControlType.ACCENT',
-  [Type$1.SECONDARY]: 'ControlType.ACCENT with priority Priority.SECONDARY'
+  [Type.DANGER]: 'Type.NEGATIVE',
+  [Type.LINK]: 'ControlType.ACCENT with priority Priority.TERTIARY',
+  [Type.PAY]: 'ControlType.POSITIVE',
+  [Type.PRIMARY]: 'ControlType.ACCENT',
+  [Type.SECONDARY]: 'ControlType.ACCENT with priority Priority.SECONDARY'
 };
 const deprecatedTypes = Object.keys(deprecatedTypeMap);
 const establishNewType = originalType => deprecatedTypeMap[originalType] || originalType;
@@ -2741,15 +2741,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);
@@ -2763,17 +2763,9 @@ const getMonthNames = (locale, format = 'long') => {
   return months;
 };
 
-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 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 isMonthAndYearFormat = dateString => validDateString(dateString) && dateString.split('-').length < 3;
 
@@ -2808,6 +2800,7 @@ const explodeDate = date => {
 
 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());
 };
 
@@ -2820,21 +2813,21 @@ const INITIAL_DEFAULT_STATE = {
 const DateInput = ({
   'aria-labelledby': ariaLabelledBy,
   'aria-label': ariaLabel,
-  disabled = false,
-  size = Size.MEDIUM,
-  value = null,
+  disabled,
+  size,
+  value,
   dayLabel,
   dayAutoComplete,
   monthLabel,
   yearLabel,
   yearAutoComplete,
-  monthFormat = MonthFormat.LONG,
-  mode = DateMode.DAY_MONTH_YEAR,
+  monthFormat,
+  mode,
   onChange,
   onFocus,
-  onBlur = undefined,
+  onBlur,
   placeholders,
-  id = '',
+  id,
   selectProps
 }) => {
   const {
@@ -2851,10 +2844,8 @@ const DateInput = ({
     let explodedDate = INITIAL_DEFAULT_STATE;
     if (value && isDateValid(value)) {
       const dateObject = getDateObject();
-      if (dateObject !== null) {
-        explodedDate = explodeDate(dateObject);
-      }
-      if (typeof value === 'string' && isMonthAndYearFormat(value)) {
+      explodedDate = explodeDate(dateObject);
+      if (isMonthAndYearFormat(value)) {
         explodedDate.day = null;
       }
     }
@@ -2873,7 +2864,7 @@ const DateInput = ({
     year: placeholders?.year || formatMessage(messages$9.yearPlaceholder)
   };
   const getDateAsString = date => {
-    if (date === null || !isDateValid(date)) {
+    if (!isDateValid(date)) {
       return '';
     }
     switch (mode) {
@@ -2894,12 +2885,14 @@ const DateInput = ({
       }), /*#__PURE__*/jsx(SelectInput, {
         name: "month",
         disabled: disabled,
-        placeholder: placeholders?.month,
+        placeholder: placeholders.month,
         items: monthOptions,
         size: size,
-        value: monthOptions.find(item => item.value === month)?.value,
-        renderValue: selectedValue => /*#__PURE__*/jsx(SelectInputOptionContent, {
-          title: getMonthNames(locale, monthFormat)[selectedValue]
+        value: monthOptions.find(item => item.value.value === month)?.value,
+        renderValue: ({
+          label
+        }) => /*#__PURE__*/jsx(SelectInputOptionContent, {
+          title: label
         }),
         onChange: selectedValue => handleMonthChange(selectedValue),
         ...selectProps
@@ -2908,10 +2901,14 @@ const DateInput = ({
   };
   const getMonthsOptions = () => {
     const options = [];
-    [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].forEach(index => {
+    const months = getMonthNames(locale, monthFormat);
+    months.forEach((label, index) => {
       options.push({
         type: 'option',
-        value: index
+        value: {
+          label,
+          value: index
+        }
       });
     });
     return options;
@@ -2923,33 +2920,35 @@ const DateInput = ({
       broadcastNewValue(INITIAL_DEFAULT_STATE);
     }
     if (mode === DateMode.MONTH_YEAR) {
-      if (newMonth && newMonth >= 0 && newYear && (newMonth !== month || newYear !== year)) {
+      if (newMonth >= 0 && newYear && (newMonth !== month || newYear !== year)) {
         broadcastNewValue(newValue);
       }
-    } else if (newDay && newMonth !== null && newMonth >= 0 && newYear && (newDay !== day || newMonth !== month || newYear !== year)) {
+    } else if (newDay && newMonth >= 0 && newYear && (newDay !== day || newMonth !== month || newYear !== year)) {
       broadcastNewValue(newValue);
     }
   };
   const handleDayChange = event => {
     const {
       checkedDay
-    } = checkDate(parseInt(event.target.value), month, year);
+    } = checkDate(event.target.value, month, year);
     setDay(checkedDay);
     handleInternalValue(checkedDay, month, year);
   };
   const handleMonthChange = selectedValue => {
-    if (selectedValue === null) {
+    if (!selectedValue) {
       setMonth(null);
       handleInternalValue(day, null, year);
       return;
     }
-    const selectedMonth = selectedValue ? selectedValue : 0;
+    const selectedMonth = selectedValue ? selectedValue.value : 0;
     const {
       checkedDay
     } = checkDate(day, selectedMonth, year);
     setMonth(selectedMonth);
-    if (day && checkedDay !== day) {
-      setDay(checkedDay);
+    if (day) {
+      if (checkedDay !== day) {
+        setDay(checkedDay);
+      }
     }
     handleInternalValue(checkedDay, selectedMonth, year);
   };
@@ -2960,37 +2959,35 @@ const DateInput = ({
       // Correct day based on year and month.
       const {
         checkedDay
-      } = checkDate(day, month, parseInt(newValue));
-      if (day && checkedDay !== day) {
-        setDay(checkedDay);
+      } = checkDate(day, month, newValue);
+      if (day) {
+        if (checkedDay !== day) {
+          setDay(checkedDay);
+        }
       }
-      setYear(parseInt(slicedYear));
-      handleInternalValue(checkedDay, month, parseInt(slicedYear));
+      setYear(slicedYear);
+      handleInternalValue(checkedDay, month, slicedYear);
     } else {
-      setYear(parseInt(slicedYear));
+      setYear(slicedYear);
       handleInternalValue(day, month, null);
     }
   };
   const broadcastNewValue = newValue => {
     if (newValue !== lastBroadcastedValue) {
       setLastBroadcastedValue(newValue);
-      if (newValue === INITIAL_DEFAULT_STATE) {
-        onChange(null);
-      } else {
-        onChange(getDateAsString(newValue) || null);
-      }
+      onChange(getDateAsString(newValue) || null);
     }
   };
   const checkDate = (newDay = null, newMonth = 0, newYear = null) => {
     let checkedDay = newDay;
-    const maxDay = new Date(newYear || 2000, newMonth ? newMonth + 1 : 1, 0).getDate();
+    const maxDay = new Date(newYear || 2000, newMonth + 1, 0).getDate();
     if (!newDay) {
       checkedDay = null;
     }
-    if (newDay && newDay < 0) {
+    if (newDay && newDay < 0 || newDay === '00') {
       checkedDay = 1;
     }
-    if (newDay && newMonth || newDay && newDay > 31) {
+    if (newDay && newMonth || newDay > 31) {
       checkedDay = newDay > maxDay ? maxDay : newDay;
     }
     return {
@@ -3010,10 +3007,8 @@ const DateInput = ({
     id: id,
     "aria-labelledby": ariaLabelledBy,
     "aria-label": ariaLabel,
-    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(),
+    onFocus: event => shouldPropagateOnFocus(event) ? onFocus && onFocus() : event.stopPropagation(),
+    onBlur: event => shouldPropagateOnBlur(event) ? onBlur && onBlur() : event.stopPropagation(),
     children: /*#__PURE__*/jsxs("div", {
       className: "row",
       children: [monthBeforeDay && /*#__PURE__*/jsx("div", {
@@ -3066,6 +3061,7 @@ const DateInput = ({
     })
   });
 };
+
 // Should only propagate if the relatedTarget is not part of this DateInput component.
 function shouldPropagateOnFocus({
   target,
@@ -3075,6 +3071,7 @@ 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,
@@ -3091,6 +3088,42 @@ function shouldPropagateOnBlur({
   const focusElementParent = focusElement && focusElement.closest('.tw-date');
   return blurElementParent !== focusElementParent;
 }
+DateInput.propTypes = {
+  'aria-label': PropTypes.string,
+  'aria-labelledby': PropTypes.string,
+  disabled: PropTypes.bool,
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
+  onChange: PropTypes.func.isRequired,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  dayLabel: PropTypes.string,
+  dayAutoComplete: PropTypes.string,
+  monthLabel: PropTypes.string,
+  yearLabel: PropTypes.string,
+  yearAutoComplete: PropTypes.string,
+  monthFormat: PropTypes.oneOf(['long', 'short']),
+  mode: PropTypes.oneOf(['day-month-year', 'month-year']),
+  placeholders: PropTypes.shape({
+    day: PropTypes.node,
+    month: PropTypes.node,
+    year: PropTypes.node
+  }),
+  id: PropTypes.string,
+  selectProps: PropTypes.object
+};
+DateInput.defaultProps = {
+  disabled: false,
+  size: Size.MEDIUM,
+  value: null,
+  onFocus: null,
+  onBlur: null,
+  monthFormat: MonthFormat.LONG,
+  mode: 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
@@ -4335,19 +4368,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
-var Presentation;
-(function (Presentation) {
-  Presentation["LIST"] = "LIST";
-  Presentation["LIST_BLOCK"] = "LIST_BLOCK";
-  Presentation["LIST_BLOCK_GRID"] = "LIST_BLOCK_GRID";
-})(Presentation || (Presentation = {}));
-// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
-var Type;
-(function (Type) {
-  Type["NAVIGATION"] = "NAVIGATION";
-})(Type || (Type = {}));
-
 const NavigationOption = /*#__PURE__*/forwardRef(({
   as: component = 'button',
   disabled = false,
@@ -4381,70 +4401,6 @@ const NavigationOption = /*#__PURE__*/forwardRef(({
   });
 });
 
-const Layout = {
-  COLUMN: 'COLUMN'
-};
-const SizeSwapper = /*#__PURE__*/forwardRef(({
-  items,
-  inline
-}, reference) => {
-  const parentReference = 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__*/jsx("div", {
-    ref: parentReference,
-    className: classNames('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 = Breakpoint;
-SizeSwapper.Layout = Layout;
-SizeSwapper.propTypes = {
-  inline: PropTypes.bool,
-  /** List of items that will appear at the specified breakpoint and presented in row or columns depending on layout  */
-  items: PropTypes.arrayOf(PropTypes.shape({
-    items: PropTypes.arrayOf(PropTypes.element),
-    breakpoint: PropTypes.number,
-    layout: PropTypes.oneOf([SizeSwapper.Layout.COLUMN]),
-    wrap: PropTypes.bool
-  })).isRequired
-};
-SizeSwapper.defaultProps = {
-  inline: false
-};
-var SizeSwapper$1 = SizeSwapper;
-
 const Tile = ({
   className,
   description,
@@ -4493,7 +4449,7 @@ Tile.propTypes = {
   className: PropTypes.string,
   description: PropTypes.node,
   disabled: PropTypes.bool,
-  href: PropTypes.string.isRequired,
+  href: PropTypes.string,
   target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
   /** Accepts only Avatar and images */
   media: PropTypes.node.isRequired,
@@ -4512,85 +4468,28 @@ Tile.defaultProps = {
 };
 var Tile$1 = Tile;
 
+var DecisionPresentation;
+(function (DecisionPresentation) {
+  DecisionPresentation["LIST"] = "LIST";
+  DecisionPresentation["LIST_BLOCK"] = "LIST_BLOCK";
+  DecisionPresentation["LIST_BLOCK_GRID"] = "LIST_BLOCK_GRID";
+})(DecisionPresentation || (DecisionPresentation = {}));
+var DecisionType;
+(function (DecisionType) {
+  DecisionType["NAVIGATION"] = "NAVIGATION";
+})(DecisionType || (DecisionType = {}));
 const Decision = ({
   options,
-  presentation,
-  type,
-  showMediaCircleInList,
-  isContainerAligned,
-  size
+  presentation = DecisionPresentation.LIST,
+  size = Size.MEDIUM,
+  type = DecisionType.NAVIGATION,
+  showMediaCircleInList = true,
+  isContainerAligned = false
 }) => {
-  if (type === Type.NAVIGATION) {
-    const {
-      LIST_BLOCK,
-      LIST_BLOCK_GRID
-    } = Presentation;
-    if (presentation === LIST_BLOCK || presentation === LIST_BLOCK_GRID) {
-      const isSmall = size === Size.SMALL;
-      const isGrid = presentation === LIST_BLOCK_GRID;
-      const items = [{
-        items: [],
-        layout: SizeSwapper$1.Layout.COLUMN
-      }, {
-        items: [],
-        breakpoint: isSmall ? Breakpoint.EXTRA_SMALL : Breakpoint.SMALL,
-        wrap: isGrid
-      }];
-      options.forEach(({
-        description,
-        disabled,
-        href,
-        target,
-        media: {
-          block,
-          list
-        },
-        onClick,
-        title
-      }, key) => {
-        items[0].items.push( /*#__PURE__*/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__*/jsx(Tile$1
-        // eslint-disable-next-line react/no-array-index-key
-        , {
-          className: classNames(`np-decision__tile${isSmall ? '--small' : ''}`, {
-            'np-decision__tile--fixed-width': isGrid
-          }),
-          description: description,
-          disabled: disabled,
-          href: href,
-          target: target,
-          media: block,
-          size: isSmall ? Size.SMALL : Size.MEDIUM,
-          title: title,
-          onClick: onClick
-        }, `tile-${key}`));
-      });
-      return /*#__PURE__*/jsx("div", {
-        className: classNames('np-decision', {
-          'np-decision--small': isSmall,
-          'np-decision--grid': isGrid
-        }),
-        children: /*#__PURE__*/jsx(SizeSwapper$1, {
-          items: items
-        })
-      });
-    }
-    // LIST
-    return options.map(({
+  const screenXs = useScreenSize(Breakpoint.EXTRA_SMALL);
+  const screenSm = useScreenSize(Breakpoint.SMALL);
+  if (type === DecisionType.NAVIGATION) {
+    const renderedOptions = options.map(({
       title,
       description,
       disabled,
@@ -4615,44 +4514,54 @@ const Decision = ({
       title: title,
       onClick: onClick
     }, `nav-${key}`));
+    if (presentation === DecisionPresentation.LIST_BLOCK || presentation === DecisionPresentation.LIST_BLOCK_GRID) {
+      const isSmall = size === Size.SMALL;
+      const breakpoint = isSmall ? screenXs : screenSm;
+      const isGrid = presentation === DecisionPresentation.LIST_BLOCK_GRID;
+      return /*#__PURE__*/jsx("div", {
+        className: classNames('np-decision', {
+          'np-decision--small': isSmall,
+          'np-decision--grid': isGrid
+        }),
+        children: /*#__PURE__*/jsx("div", {
+          className: classNames('np-size-swapper d-flex', breakpoint ? isGrid && 'flex-wrap' : 'flex-column'),
+          children: breakpoint ? options.map(({
+            description,
+            disabled,
+            href,
+            target,
+            media: {
+              block
+            },
+            onClick,
+            title
+          }, key) => /*#__PURE__*/jsx(Tile$1
+          // eslint-disable-next-line react/no-array-index-key
+          , {
+            className: classNames(`np-decision__tile${isSmall ? '--small' : ''}`, {
+              'np-decision__tile--fixed-width': isGrid
+            }),
+            description: description,
+            disabled: disabled,
+            href: href,
+            target: target,
+            media: block,
+            size: isSmall ? Size.SMALL : Size.MEDIUM,
+            title: title,
+            onClick: onClick
+          }, `tile-${key}`)) : renderedOptions
+        })
+      });
+    }
+    // LIST
+    return /*#__PURE__*/jsx(Fragment, {
+      children: renderedOptions
+    });
   }
-  return /*#__PURE__*/jsx(Fragment, {});
-};
-Decision.propTypes = {
-  /**  A list of elements to be rendered */
-  options: PropTypes.arrayOf(PropTypes.shape({
-    description: PropTypes.node,
-    disabled: PropTypes.bool,
-    href: PropTypes.string,
-    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
-    media: PropTypes.shape({
-      block: PropTypes.node.isRequired,
-      list: PropTypes.node.isRequired
-    }),
-    onClick: PropTypes.func,
-    title: PropTypes.node.isRequired
-  })).isRequired,
-  /**  Handles the display mode of the component */
-  presentation: PropTypes.oneOf(['LIST', 'LIST_BLOCK', 'LIST_BLOCK_GRID']),
-  /** Size currently affects only Tile dimension */
-  size: PropTypes.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.oneOf(['NAVIGATION']),
-  /** Display media in a circle in list presentation */
-  showMediaCircleInList: PropTypes.bool,
-  /** Sets navigation options to be aligned with the parent container */
-  isContainerAligned: PropTypes.bool
-};
-Decision.defaultProps = {
-  presentation: Presentation.LIST,
-  size: Size.MEDIUM,
-  type: Type.NAVIGATION,
-  showMediaCircleInList: true,
-  isContainerAligned: false
+  return null;
 };
-var Decision$1 = Decision;
 
-const isLayoutHorizontal = layout => [Layout$1.HORIZONTAL_LEFT_ALIGNED, Layout$1.HORIZONTAL_RIGHT_ALIGNED, Layout$1.HORIZONTAL_JUSTIFIED].includes(layout);
+const isLayoutHorizontal = layout => [Layout.HORIZONTAL_LEFT_ALIGNED, Layout.HORIZONTAL_RIGHT_ALIGNED, Layout.HORIZONTAL_JUSTIFIED].includes(layout);
 const getAlignmentClasses = (layout, action) => {
   let classes = ['d-flex'];
   if (action) {
@@ -4662,12 +4571,12 @@ const getAlignmentClasses = (layout, action) => {
       classes.push('align-items-start');
     }
   }
-  if (layout === Layout$1.HORIZONTAL_RIGHT_ALIGNED) {
+  if (layout === Layout.HORIZONTAL_RIGHT_ALIGNED) {
     classes.push('text-sm-right tw-definition-list--right-aligned-desktop');
   } else {
     classes.push('justify-content-between');
   }
-  if (layout === Layout$1.HORIZONTAL_JUSTIFIED) {
+  if (layout === Layout.HORIZONTAL_JUSTIFIED) {
     classes.push('text-sm-justify');
   }
   return classes;
@@ -4679,8 +4588,8 @@ const DefinitionList = ({
 }) => /*#__PURE__*/jsx("dl", {
   className: classNames('tw-definition-list d-flex ', {
     'text-muted': muted,
-    'flex-column': layout === Layout$1.VERTICAL_ONE_COLUMN,
-    'tw-definition-list--columns flex-column flex-row--sm': layout === Layout$1.VERTICAL_TWO_COLUMN,
+    'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,
+    'tw-definition-list--columns flex-column flex-row--sm': layout === Layout.VERTICAL_TWO_COLUMN,
     'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout)
   }),
   children: definitions.filter(definition => definition).map(({
@@ -4722,7 +4631,7 @@ DefinitionList.propTypes = {
 };
 DefinitionList.defaultProps = {
   definitions: [],
-  layout: Layout$1.VERTICAL_TWO_COLUMN,
+  layout: Layout.VERTICAL_TWO_COLUMN,
   muted: false
 };
 var DefinitionList$1 = DefinitionList;
@@ -5275,7 +5184,7 @@ DynamicFieldDefinitionList.propTypes = {
 };
 DynamicFieldDefinitionList.defaultProps = {
   title: null,
-  layout: Layout$1.VERTICAL_TWO_COLUMN
+  layout: Layout.VERTICAL_TWO_COLUMN
 };
 var DynamicFieldDefinitionList$1 = DynamicFieldDefinitionList;
 
@@ -5334,11 +5243,11 @@ const Emphasis = ({
 const FlowHeader = /*#__PURE__*/React.forwardRef(({
   bottomContent,
   className,
-  layout = Layout$1.HORIZONTAL,
+  layout = Layout.HORIZONTAL,
   leftContent,
   rightContent
 }, reference) => {
-  const isVertical = layout === Layout$1.VERTICAL;
+  const isVertical = layout === Layout.VERTICAL;
   return /*#__PURE__*/jsxs("div", {
     ref: reference,
     className: classNames('np-flow-header', 'd-flex', 'flex-wrap', 'align-items-center', 'justify-content-between', 'flex__item--12', className),
@@ -5749,7 +5658,7 @@ const FlowNavigation = ({
         steps: steps,
         className: classNames('np-flow-navigation__stepper')
       }),
-      layout: clientWidth != null && clientWidth < Breakpoint.LARGE ? Layout$1.VERTICAL : Layout$1.HORIZONTAL
+      layout: clientWidth != null && clientWidth < Breakpoint.LARGE ? Layout.VERTICAL : Layout.HORIZONTAL
     })
   });
 };
@@ -15407,10 +15316,10 @@ var zhHK = {
 	"neptune.ClearButton.ariaLabel": "清除",
 	"neptune.CloseButton.ariaLabel": "關閉",
 	"neptune.DateInput.day.label": "日",
-	"neptune.DateInput.day.placeholder": "日",
+	"neptune.DateInput.day.placeholder": "DD",
 	"neptune.DateInput.month.label": "月",
 	"neptune.DateInput.year.label": "年",
-	"neptune.DateInput.year.placeholder": "年",
+	"neptune.DateInput.year.placeholder": "YYYY",
 	"neptune.DateLookup.day": "日",
 	"neptune.DateLookup.goTo20YearView": "切換至20年視圖",
 	"neptune.DateLookup.month": "月",
@@ -15480,5 +15389,5 @@ const translations = {
   'zh-HK': zhHK
 };
 
-export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton$1 as CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup$1 as DateLookup, DateMode, Decision$1 as Decision, Presentation as DecisionPresentation, Type as DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList$1 as InstructionsList, LanguageProvider, Layout$1 as Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, Markdown$1 as Markdown, MarkdownNodeType, Modal, Money$1 as Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList$1 as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$2 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider$1 as Provider, RTL_LANGUAGES, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioOption$1 as RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel$1 as SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky$1 as Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip$1 as Tooltip, Type$1 as Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
+export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton$1 as CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput$1 as DateInput, DateLookup$1 as DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList$1 as InstructionsList, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, Markdown$1 as Markdown, MarkdownNodeType, Modal, Money$1 as Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList$1 as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$2 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider$1 as Provider, RTL_LANGUAGES, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioOption$1 as RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel$1 as SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky$1 as Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip$1 as Tooltip, Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
 //# sourceMappingURL=index.esm.js.map