@transferwise/components 0.0.0-experimental-8b0167a → 0.0.0-experimental-d9b4d5e

package/build/index.mjs

@@ -2283,8 +2283,9 @@ const CheckboxButton = /*#__PURE__*/forwardRef(({
     })
   })]
 }));
+var CheckboxButton$1 = CheckboxButton;
 
-function Checkbox({
+const Checkbox = ({
   id,
   checked,
   required,
@@ -2296,11 +2297,14 @@ function Checkbox({
   onChange,
   onFocus,
   onBlur
-}) {
+}) => {
+  const {
+    isModern
+  } = useTheme();
   const classList = classNames('np-checkbox', {
     checkbox: true,
     'checkbox-lg': secondary,
-    disabled
+    disabled: isModern && disabled
   }, className);
   const innerDisabled = disabled || readOnly;
   return /*#__PURE__*/jsx("div", {
@@ -2310,7 +2314,7 @@ function Checkbox({
       className: classNames({
         disabled
       }),
-      children: [/*#__PURE__*/jsx(CheckboxButton, {
+      children: [/*#__PURE__*/jsx(CheckboxButton$1, {
         className: "p-r-2",
         checked: checked,
         disabled: innerDisabled,
@@ -2327,12 +2331,39 @@ function 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,
@@ -2344,7 +2375,7 @@ const CheckboxOption = /*#__PURE__*/forwardRef(({
     ...rest,
     ref: reference,
     disabled: disabled,
-    button: /*#__PURE__*/jsx(CheckboxButton, {
+    button: /*#__PURE__*/jsx(CheckboxButton$1, {
       checked: checked,
       disabled: disabled,
       onChange: () => onChange?.(!checked)
@@ -4621,7 +4652,7 @@ const NavigationOption = /*#__PURE__*/forwardRef(({
   });
 });
 
-const Tile = ({
+function Tile({
   className,
   description,
   disabled,
@@ -4629,10 +4660,10 @@ const Tile = ({
   target,
   media,
   onClick,
-  size,
+  size = 'md',
   title
-}) => {
-  const isSmall = size === Size.SMALL;
+}) {
+  const isSmall = size === 'sm';
   const Element = href ? 'a' : 'button';
   return /*#__PURE__*/jsxs(Element, {
     className: classNames('decision', 'flex-column', 'np-tile', 'text-no-decoration', 'text-xs-center', className, {
@@ -4641,12 +4672,12 @@ const Tile = ({
     }, disabled && 'disabled'),
     href: href,
     target: target,
-    onClick: disabled ? null : onClick,
-    onKeyDown: disabled ? null : ({
+    onClick: disabled ? undefined : onClick,
+    onKeyDown: disabled ? undefined : ({
       key
     }) => {
       if (key === 'Enter' || key === ' ') {
-        onClick();
+        onClick?.();
       }
     },
     children: [/*#__PURE__*/jsx("div", {
@@ -4663,29 +4694,7 @@ const 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) {
@@ -14714,5 +14723,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, 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$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 };
 //# sourceMappingURL=index.mjs.map