@transferwise/components 46.0.2 → 46.0.4

package/build/index.js

@@ -5,8 +5,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactId = require('@radix-ui/react-id');
 var icons = require('@transferwise/icons');
-var PropTypes = require('prop-types');
 var reactIntl = require('react-intl');
+var PropTypes = require('prop-types');
 var componentsTheming = require('@wise/components-theming');
 var react$1 = require('@headlessui/react');
 var mergeProps = require('merge-props');
@@ -574,61 +574,44 @@ const CONTAINER_SIZE = {
 };
 const ExtraSmallChevron = ({
   className
-}) => /*#__PURE__*/jsxRuntime.jsx("span", {
-  className: classNames__default.default('tw-icon', 'tw-icon-chevron', className),
-  role: "presentation",
-  "aria-hidden": true,
-  children: /*#__PURE__*/jsxRuntime.jsx("svg", {
-    width: "10",
-    height: "10",
-    viewBox: "0 0 10 10",
-    fill: "currentColor",
-    focusable: "false",
-    children: /*#__PURE__*/jsxRuntime.jsx("path", {
-      fillRule: "evenodd",
-      d: "M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z"
+}) => {
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
+    className: classNames__default.default('tw-icon', 'tw-icon-chevron', className),
+    role: "presentation",
+    "aria-hidden": true,
+    children: /*#__PURE__*/jsxRuntime.jsx("svg", {
+      width: "10",
+      height: "10",
+      viewBox: "0 0 10 10",
+      fill: "currentColor",
+      focusable: "false",
+      children: /*#__PURE__*/jsxRuntime.jsx("path", {
+        fillRule: "evenodd",
+        d: "M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z"
+      })
     })
-  })
-});
-ExtraSmallChevron.propTypes = {
-  className: PropTypes__default.default.string
-};
-ExtraSmallChevron.defaultProps = {
-  className: null
+  });
 };
 const Chevron = ({
-  orientation,
-  size,
-  disabled,
+  orientation = exports.Position.BOTTOM,
+  size = exports.Size.SMALL,
+  disabled = false,
   className
 }) => {
   const classNameValue = classNames__default.default('tw-chevron', {
     'chevron-color': !disabled
-  }, `${[orientation]}`.toLowerCase(), className);
-  const sizeValue = CONTAINER_SIZE[size];
+  }, `${orientation}`.toLowerCase(), className);
   if (size === exports.Size.EXTRA_SMALL) {
     return /*#__PURE__*/jsxRuntime.jsx(ExtraSmallChevron, {
       className: classNameValue
     });
   }
+  const sizeValue = CONTAINER_SIZE[size];
   return /*#__PURE__*/jsxRuntime.jsx(icons.ChevronUp, {
     className: classNameValue,
     size: sizeValue
   });
 };
-Chevron.propTypes = {
-  orientation: PropTypes__default.default.oneOf(['top', 'bottom', 'left', 'right']),
-  size: PropTypes__default.default.oneOf(['xs', 'sm', 'md']),
-  disabled: PropTypes__default.default.bool,
-  className: PropTypes__default.default.string
-};
-Chevron.defaultProps = {
-  orientation: exports.Position.BOTTOM,
-  size: exports.Size.SMALL,
-  disabled: false,
-  className: null
-};
-var Chevron$1 = Chevron;
 
 const Option$2 = /*#__PURE__*/React.forwardRef(({
   media = '',
@@ -713,7 +696,7 @@ const AccordionItem = ({
       as: "button",
       media: iconElement,
       title: title,
-      button: /*#__PURE__*/jsxRuntime.jsx(Chevron$1, {
+      button: /*#__PURE__*/jsxRuntime.jsx(Chevron, {
         orientation: open ? exports.Position.TOP : exports.Position.BOTTOM,
         size: exports.Size.MEDIUM
       }),
@@ -1379,7 +1362,7 @@ const Avatar = ({
   backgroundColor = null,
   backgroundColorSeed = null,
   children = null,
-  className = null,
+  className,
   outlined = false,
   size: sizeFromProps = 48,
   theme = exports.Theme.LIGHT,
@@ -2488,7 +2471,7 @@ const Card$1 = /*#__PURE__*/React.forwardRef((props, reference) => {
       title: title,
       content: details,
       showMediaAtAllSizes: true,
-      button: children && /*#__PURE__*/jsxRuntime.jsx(Chevron$1, {
+      button: children && /*#__PURE__*/jsxRuntime.jsx(Chevron, {
         orientation: isOpen ? exports.Position.TOP : exports.Position.BOTTOM
       }),
       onClick: () => children && onClick(!isExpanded)
@@ -2890,6 +2873,12 @@ var messages$8 = reactIntl.defineMessages({
   },
   yearLabel: {
     id: "neptune.DateInput.year.label"
+  },
+  dayPlaceholder: {
+    id: "neptune.DateInput.day.placeholder"
+  },
+  yearPlaceholder: {
+    id: "neptune.DateInput.year.placeholder"
   }
 });
 
@@ -2965,9 +2954,9 @@ const DateInput = ({
   monthLabel = monthLabel || formatMessage(messages$8.monthLabel);
   yearLabel = yearLabel || formatMessage(messages$8.yearLabel);
   placeholders = {
-    day: placeholders?.day || 'DD',
+    day: placeholders?.day || formatMessage(messages$8.dayPlaceholder),
     month: placeholders?.month || formatMessage(messages$8.monthLabel),
-    year: placeholders?.year || 'YYYY'
+    year: placeholders?.year || formatMessage(messages$8.yearPlaceholder)
   };
   const getDateAsString = date => {
     if (!isDateValid(date)) {
@@ -3458,7 +3447,7 @@ const DateTrigger = ({
       }) : /*#__PURE__*/jsxRuntime.jsx("span", {
         className: "form-control-placeholder visible-xs-inline visible-sm-inline visible-md-inline visible-lg-inline visible-xl-inline",
         children: placeholder
-      }), !onClear ? /*#__PURE__*/jsxRuntime.jsx(Chevron$1, {
+      }), !onClear ? /*#__PURE__*/jsxRuntime.jsx(Chevron, {
         orientation: exports.Position.BOTTOM,
         disabled: disabled
       }) : null]
@@ -3547,7 +3536,7 @@ const DateHeader = ({
         className: `d-inline-flex ${buttonClasses}`,
         "aria-label": `${intl.formatMessage(messages$7.previous)} ${dateMode}`,
         onClick: onPreviousClick,
-        children: /*#__PURE__*/jsxRuntime.jsx(Chevron$1, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Chevron, {
           orientation: exports.Position.LEFT,
           className: "left-single-direction",
           size: exports.Size.MEDIUM
@@ -3570,7 +3559,7 @@ const DateHeader = ({
         className: `d-inline-flex ${buttonClasses}`,
         "aria-label": `${reactIntl.useIntl().formatMessage(messages$7.next)} ${dateMode}`,
         onClick: onNextClick,
-        children: /*#__PURE__*/jsxRuntime.jsx(Chevron$1, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Chevron, {
           orientation: exports.Position.RIGHT,
           className: "right-single-direction",
           size: exports.Size.MEDIUM
@@ -4524,7 +4513,7 @@ const NavigationOption = /*#__PURE__*/React.forwardRef(({
     ref: reference,
     as: component,
     className: classNames__default.default('np-navigation-option', className),
-    button: /*#__PURE__*/jsxRuntime.jsx(Chevron$1, {
+    button: /*#__PURE__*/jsxRuntime.jsx(Chevron, {
       orientation: exports.Position.RIGHT,
       disabled: disabled,
       className: "d-block"
@@ -10246,8 +10235,10 @@ var en = {
 	"neptune.ClearButton.ariaLabel": "Clear",
 	"neptune.CloseButton.ariaLabel": "Close",
 	"neptune.DateInput.day.label": "Day",
+	"neptune.DateInput.day.placeholder": "DD",
 	"neptune.DateInput.month.label": "Month",
 	"neptune.DateInput.year.label": "Year",
+	"neptune.DateInput.year.placeholder": "YYYY",
 	"neptune.DateLookup.day": "day",
 	"neptune.DateLookup.goTo20YearView": "Go to 20 year view",
 	"neptune.DateLookup.month": "month",
@@ -11170,7 +11161,7 @@ function Select({
       }) : /*#__PURE__*/jsxRuntime.jsx("span", {
         className: s('form-control-placeholder'),
         children: placeholder
-      }), /*#__PURE__*/jsxRuntime.jsx(Chevron$1
+      }), /*#__PURE__*/jsxRuntime.jsx(Chevron
       // disabled={disabled}
       , {
         className: classNames__default.default(s('tw-icon'), s('tw-chevron-up-icon'), s('tw-chevron'), s('bottom'), s('np-select-chevron'))
@@ -15658,7 +15649,7 @@ exports.Card = Card$2;
 exports.Checkbox = Checkbox$1;
 exports.CheckboxButton = CheckboxButton$1;
 exports.CheckboxOption = CheckboxOption;
-exports.Chevron = Chevron$1;
+exports.Chevron = Chevron;
 exports.Chip = Chip;
 exports.Chips = Chips;
 exports.CircularButton = CircularButton$1;