@transferwise/components 0.0.0-experimental-2b935a9 → 0.0.0-experimental-8eba5d3

package/build/index.mjs

@@ -2283,9 +2283,8 @@ const CheckboxButton = /*#__PURE__*/forwardRef(({
     })
   })]
 }));
-var CheckboxButton$1 = CheckboxButton;
 
-const Checkbox = ({
+function Checkbox({
   id,
   checked,
   required,
@@ -2297,14 +2296,11 @@ const Checkbox = ({
   onChange,
   onFocus,
   onBlur
-}) => {
-  const {
-    isModern
-  } = useTheme();
+}) {
   const classList = classNames('np-checkbox', {
     checkbox: true,
     'checkbox-lg': secondary,
-    disabled: isModern && disabled
+    disabled
   }, className);
   const innerDisabled = disabled || readOnly;
   return /*#__PURE__*/jsx("div", {
@@ -2314,7 +2310,7 @@ const Checkbox = ({
       className: classNames({
         disabled
       }),
-      children: [/*#__PURE__*/jsx(CheckboxButton$1, {
+      children: [/*#__PURE__*/jsx(CheckboxButton, {
         className: "p-r-2",
         checked: checked,
         disabled: innerDisabled,
@@ -2331,39 +2327,12 @@ const Checkbox = ({
           children: label
         }), secondary && /*#__PURE__*/jsx(Body, {
           as: "span",
-          className: classNames({
-            secondary: !isModern
-          }),
           children: secondary
         })]
       })]
     })
   });
-};
-Checkbox.propTypes = {
-  id: PropTypes.string,
-  checked: PropTypes.bool,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  label: PropTypes.node.isRequired,
-  secondary: PropTypes.string,
-  onFocus: PropTypes.func,
-  onChange: PropTypes.func.isRequired,
-  onBlur: PropTypes.func,
-  className: PropTypes.string
-};
-Checkbox.defaultProps = {
-  id: null,
-  checked: false,
-  required: false,
-  disabled: false,
-  readOnly: false,
-  secondary: null,
-  onFocus: null,
-  onBlur: null,
-  className: undefined
-};
+}
 
 const CheckboxOption = /*#__PURE__*/forwardRef(({
   checked,
@@ -2375,7 +2344,7 @@ const CheckboxOption = /*#__PURE__*/forwardRef(({
     ...rest,
     ref: reference,
     disabled: disabled,
-    button: /*#__PURE__*/jsx(CheckboxButton$1, {
+    button: /*#__PURE__*/jsx(CheckboxButton, {
       checked: checked,
       disabled: disabled,
       onChange: () => onChange?.(!checked)
@@ -4652,7 +4621,7 @@ const NavigationOption = /*#__PURE__*/forwardRef(({
   });
 });
 
-function Tile({
+const Tile = ({
   className,
   description,
   disabled,
@@ -4660,10 +4629,10 @@ function Tile({
   target,
   media,
   onClick,
-  size = 'md',
+  size,
   title
-}) {
-  const isSmall = size === 'sm';
+}) => {
+  const isSmall = size === Size.SMALL;
   const Element = href ? 'a' : 'button';
   return /*#__PURE__*/jsxs(Element, {
     className: classNames('decision', 'flex-column', 'np-tile', 'text-no-decoration', 'text-xs-center', className, {
@@ -4672,12 +4641,12 @@ function Tile({
     }, disabled && 'disabled'),
     href: href,
     target: target,
-    onClick: disabled ? undefined : onClick,
-    onKeyDown: disabled ? undefined : ({
+    onClick: disabled ? null : onClick,
+    onKeyDown: disabled ? null : ({
       key
     }) => {
       if (key === 'Enter' || key === ' ') {
-        onClick?.();
+        onClick();
       }
     },
     children: [/*#__PURE__*/jsx("div", {
@@ -4694,7 +4663,29 @@ function Tile({
       children: description
     }) : null]
   });
-}
+};
+Tile.propTypes = {
+  /** Classes to apply to the Tile container */
+  className: PropTypes.string,
+  description: PropTypes.node,
+  disabled: PropTypes.bool,
+  href: PropTypes.string,
+  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+  /** Accepts only Avatar and images */
+  media: PropTypes.node.isRequired,
+  /** Function called onClick or onKeyDown */
+  onClick: PropTypes.func,
+  /** The size applied to Tile */
+  size: PropTypes.oneOf(['sm', 'md']),
+  title: PropTypes.node.isRequired
+};
+Tile.defaultProps = {
+  className: '',
+  description: null,
+  disabled: false,
+  size: Size.MEDIUM,
+  target: undefined
+};
 
 var DecisionPresentation;
 (function (DecisionPresentation) {
@@ -4786,9 +4777,9 @@ const Decision = ({
   return null;
 };
 
-const isLayoutHorizontal = layout => [Layout.HORIZONTAL_LEFT_ALIGNED, Layout.HORIZONTAL_RIGHT_ALIGNED, Layout.HORIZONTAL_JUSTIFIED].includes(layout);
+const isLayoutHorizontal = layout => layout === Layout.HORIZONTAL_LEFT_ALIGNED || layout === Layout.HORIZONTAL_RIGHT_ALIGNED || layout === Layout.HORIZONTAL_JUSTIFIED;
 const getAlignmentClasses = (layout, action) => {
-  let classes = ['d-flex'];
+  const classes = ['d-flex'];
   if (action) {
     if (isLayoutHorizontal(layout)) {
       classes.push('align-items-center');
@@ -4806,60 +4797,44 @@ const getAlignmentClasses = (layout, action) => {
   }
   return classes;
 };
-const DefinitionList = ({
-  definitions,
-  layout,
+const defaultDefinitions = [];
+function DefinitionList({
+  definitions = defaultDefinitions,
+  layout = 'VERTICAL_TWO_COLUMN',
   muted
-}) => /*#__PURE__*/jsx("dl", {
-  className: classNames('tw-definition-list d-flex ', {
-    'text-muted': muted,
-    '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(({
-    action,
-    title,
-    value,
-    key
-  }) => /*#__PURE__*/jsxs("div", {
-    className: "tw-definition-list__item",
-    children: [/*#__PURE__*/jsx("dt", {
-      children: title
-    }), /*#__PURE__*/jsxs("dd", {
-      className: classNames(...getAlignmentClasses(layout, action)),
-      children: [/*#__PURE__*/jsx("div", {
-        children: value
-      }), action ? /*#__PURE__*/jsx("div", {
-        className: classNames(isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2', 'tw-definition-list__action'),
-        children: /*#__PURE__*/jsx(ActionButton, {
-          className: "tw-definition-list__button",
-          onClick: action.onClick,
-          children: action.label
-        })
-      }) : null]
-    })]
-  }, key))
-});
-DefinitionList.propTypes = {
-  definitions: PropTypes.arrayOf(PropTypes.shape({
-    action: PropTypes.shape({
-      label: PropTypes.string.isRequired,
-      onClick: PropTypes.func
+}) {
+  return /*#__PURE__*/jsx("dl", {
+    className: classNames('tw-definition-list d-flex ', {
+      'text-muted': muted,
+      '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)
     }),
-    title: PropTypes.node.isRequired,
-    value: PropTypes.node.isRequired,
-    key: PropTypes.string.isRequired
-  })),
-  layout: PropTypes.oneOf(['VERTICAL_TWO_COLUMN', 'VERTICAL_ONE_COLUMN', 'HORIZONTAL_JUSTIFIED', 'HORIZONTAL_LEFT_ALIGNED', 'HORIZONTAL_RIGHT_ALIGNED']),
-  muted: PropTypes.bool
-};
-DefinitionList.defaultProps = {
-  definitions: [],
-  layout: Layout.VERTICAL_TWO_COLUMN,
-  muted: false
-};
-var DefinitionList$1 = DefinitionList;
+    children: definitions.filter(definition => definition).map(({
+      action,
+      title,
+      value,
+      key
+    }) => /*#__PURE__*/jsxs("div", {
+      className: "tw-definition-list__item",
+      children: [/*#__PURE__*/jsx("dt", {
+        children: title
+      }), /*#__PURE__*/jsxs("dd", {
+        className: classNames(...getAlignmentClasses(layout, action)),
+        children: [/*#__PURE__*/jsx("div", {
+          children: value
+        }), action ? /*#__PURE__*/jsx("div", {
+          className: classNames(isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2', 'tw-definition-list__action'),
+          children: /*#__PURE__*/jsx(ActionButton, {
+            className: "tw-definition-list__button",
+            onClick: action.onClick,
+            children: action.label
+          })
+        }) : null]
+      })]
+    }, key))
+  });
+}
 
 const DropFade = ({
   children,
@@ -5048,14 +5023,6 @@ const FlowHeader = /*#__PURE__*/React.forwardRef(({
   });
 });
 
-// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
-var LogoType;
-(function (LogoType) {
-  LogoType["WISE"] = "WISE";
-  LogoType["WISE_BUSINESS"] = "WISE_BUSINESS";
-  LogoType["WISE_PLATFORM"] = "WISE_PLATFORM";
-})(LogoType || (LogoType = {}));
-
 var LogoFlagInverse = function LogoFlagInverse(props) {
   return /*#__PURE__*/jsx("svg", {
     ...props,
@@ -5188,15 +5155,26 @@ const svgPaths = {
   WISE_FLAG_PLATFORM: LogoFlagPlatform,
   WISE_FLAG_PLATFORM_INVERSE: LogoFlagPlatformInverse
 };
-const Logo = ({
+var LogoType;
+(function (LogoType) {
+  LogoType["WISE"] = "WISE";
+  LogoType["WISE_BUSINESS"] = "WISE_BUSINESS";
+  LogoType["WISE_PLATFORM"] = "WISE_PLATFORM";
+})(LogoType || (LogoType = {}));
+const labelByType = {
+  WISE: 'Wise',
+  WISE_BUSINESS: 'Wise Business',
+  WISE_PLATFORM: 'Wise Platform'
+};
+function Logo({
   className,
   inverse,
-  type
-}) => {
-  const LogoSm = svgPaths[`WISE_FLAG${type === LogoType.WISE_PLATFORM ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];
+  type = 'WISE'
+}) {
+  const LogoSm = svgPaths[`WISE_FLAG${type === 'WISE_PLATFORM' ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];
   const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
   return /*#__PURE__*/jsxs("span", {
-    "aria-label": type === LogoType.WISE ? 'Wise' : 'Wise Business' | type === LogoType.WISE_PLATFORM ? 'Wise Platform' : 'Wise Business',
+    "aria-label": labelByType[type],
     role: "img",
     className: classNames(className, 'np-logo'),
     children: [/*#__PURE__*/jsx(LogoSm, {
@@ -5205,21 +5183,7 @@ const Logo = ({
       className: "np-logo-svg np-logo-svg--size-md"
     })]
   });
-};
-Logo.propTypes = {
-  /** Extra classes applied to Logo */
-  className: PropTypes.string,
-  /** If true, will use dark colours for dark on light theme */
-  inverse: PropTypes.bool,
-  /** What type of logo to display */
-  type: PropTypes.oneOf(['WISE', 'WISE_BUSINESS', 'WISE_PLATFORM'])
-};
-Logo.defaultProps = {
-  className: undefined,
-  inverse: false,
-  type: LogoType.WISE
-};
-var Logo$1 = Logo;
+}
 
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 const Tooltip = ({
@@ -5449,7 +5413,7 @@ BackButton.defaultProps = {
 const FlowNavigation = ({
   activeStep = 0,
   avatar,
-  logo = /*#__PURE__*/jsx(Logo$1, {}),
+  logo = /*#__PURE__*/jsx(Logo, {}),
   done = false,
   onClose,
   onGoBack,
@@ -7876,7 +7840,7 @@ const OverlayHeader = ({
 };
 OverlayHeader.defaultProps = {
   avatar: null,
-  logo: /*#__PURE__*/jsx(Logo$1, {}),
+  logo: /*#__PURE__*/jsx(Logo, {}),
   onClose: null
 };
 OverlayHeader.propTypes = {
@@ -14723,5 +14687,5 @@ const translations = {
   'zh-HK': zhHK
 };
 
-export { Accordion, ActionButton, ActionOption, Alert, AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card$2 as BaseCard, Body, BottomSheet$1 as BottomSheet, Breakpoint, Button, Card$1 as Card, Carousel, Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, 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, Emphasis, Field, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, Label, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader, Logo$1 as Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$1 as Popover, Position, Priority, ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCardGroup$1 as PromoCardGroup, Provider, RTL_LANGUAGES, Radio, RadioGroup, RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip, Type, Typeahead$1 as 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, AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card$2 as BaseCard, Body, BottomSheet$1 as BottomSheet, Breakpoint, Button, Card$1 as Card, Carousel, Checkbox, CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup$1 as DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, Emphasis, Field, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, Label, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader, Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$1 as Popover, Position, Priority, ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCardGroup$1 as PromoCardGroup, Provider, RTL_LANGUAGES, Radio, RadioGroup, RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip, Type, Typeahead$1 as Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
 //# sourceMappingURL=index.mjs.map