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

package/build/index.js

@@ -2313,8 +2313,9 @@ const CheckboxButton = /*#__PURE__*/React.forwardRef(({
     })
   })]
 }));
+var CheckboxButton$1 = CheckboxButton;
 
-function Checkbox({
+const Checkbox = ({
   id,
   checked,
   required,
@@ -2326,11 +2327,14 @@ function Checkbox({
   onChange,
   onFocus,
   onBlur
-}) {
+}) => {
+  const {
+    isModern
+  } = componentsTheming.useTheme();
   const classList = classNames__default.default('np-checkbox', {
     checkbox: true,
     'checkbox-lg': secondary,
-    disabled
+    disabled: isModern && disabled
   }, className);
   const innerDisabled = disabled || readOnly;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -2340,7 +2344,7 @@ function Checkbox({
       className: classNames__default.default({
         disabled
       }),
-      children: [/*#__PURE__*/jsxRuntime.jsx(CheckboxButton, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(CheckboxButton$1, {
         className: "p-r-2",
         checked: checked,
         disabled: innerDisabled,
@@ -2357,12 +2361,39 @@ function Checkbox({
           children: label
         }), secondary && /*#__PURE__*/jsxRuntime.jsx(Body, {
           as: "span",
+          className: classNames__default.default({
+            secondary: !isModern
+          }),
           children: secondary
         })]
       })]
     })
   });
-}
+};
+Checkbox.propTypes = {
+  id: PropTypes__default.default.string,
+  checked: PropTypes__default.default.bool,
+  required: PropTypes__default.default.bool,
+  disabled: PropTypes__default.default.bool,
+  readOnly: PropTypes__default.default.bool,
+  label: PropTypes__default.default.node.isRequired,
+  secondary: PropTypes__default.default.string,
+  onFocus: PropTypes__default.default.func,
+  onChange: PropTypes__default.default.func.isRequired,
+  onBlur: PropTypes__default.default.func,
+  className: PropTypes__default.default.string
+};
+Checkbox.defaultProps = {
+  id: null,
+  checked: false,
+  required: false,
+  disabled: false,
+  readOnly: false,
+  secondary: null,
+  onFocus: null,
+  onBlur: null,
+  className: undefined
+};
 
 const CheckboxOption = /*#__PURE__*/React.forwardRef(({
   checked,
@@ -2374,7 +2405,7 @@ const CheckboxOption = /*#__PURE__*/React.forwardRef(({
     ...rest,
     ref: reference,
     disabled: disabled,
-    button: /*#__PURE__*/jsxRuntime.jsx(CheckboxButton, {
+    button: /*#__PURE__*/jsxRuntime.jsx(CheckboxButton$1, {
       checked: checked,
       disabled: disabled,
       onChange: () => onChange?.(!checked)
@@ -4807,9 +4838,9 @@ const Decision = ({
   return null;
 };
 
-const isLayoutHorizontal = layout => [exports.Layout.HORIZONTAL_LEFT_ALIGNED, exports.Layout.HORIZONTAL_RIGHT_ALIGNED, exports.Layout.HORIZONTAL_JUSTIFIED].includes(layout);
+const isLayoutHorizontal = layout => layout === exports.Layout.HORIZONTAL_LEFT_ALIGNED || layout === exports.Layout.HORIZONTAL_RIGHT_ALIGNED || layout === exports.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');
@@ -4827,60 +4858,44 @@ const getAlignmentClasses = (layout, action) => {
   }
   return classes;
 };
-const DefinitionList = ({
-  definitions,
-  layout,
+const defaultDefinitions = [];
+function DefinitionList({
+  definitions = defaultDefinitions,
+  layout = 'VERTICAL_TWO_COLUMN',
   muted
-}) => /*#__PURE__*/jsxRuntime.jsx("dl", {
-  className: classNames__default.default('tw-definition-list d-flex ', {
-    'text-muted': muted,
-    'flex-column': layout === exports.Layout.VERTICAL_ONE_COLUMN,
-    'tw-definition-list--columns flex-column flex-row--sm': layout === exports.Layout.VERTICAL_TWO_COLUMN,
-    'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout)
-  }),
-  children: definitions.filter(definition => definition).map(({
-    action,
-    title,
-    value,
-    key
-  }) => /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "tw-definition-list__item",
-    children: [/*#__PURE__*/jsxRuntime.jsx("dt", {
-      children: title
-    }), /*#__PURE__*/jsxRuntime.jsxs("dd", {
-      className: classNames__default.default(...getAlignmentClasses(layout, action)),
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        children: value
-      }), action ? /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames__default.default(isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2', 'tw-definition-list__action'),
-        children: /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
-          className: "tw-definition-list__button",
-          onClick: action.onClick,
-          children: action.label
-        })
-      }) : null]
-    })]
-  }, key))
-});
-DefinitionList.propTypes = {
-  definitions: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
-    action: PropTypes__default.default.shape({
-      label: PropTypes__default.default.string.isRequired,
-      onClick: PropTypes__default.default.func
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx("dl", {
+    className: classNames__default.default('tw-definition-list d-flex ', {
+      'text-muted': muted,
+      'flex-column': layout === exports.Layout.VERTICAL_ONE_COLUMN,
+      'tw-definition-list--columns flex-column flex-row--sm': layout === exports.Layout.VERTICAL_TWO_COLUMN,
+      'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout)
     }),
-    title: PropTypes__default.default.node.isRequired,
-    value: PropTypes__default.default.node.isRequired,
-    key: PropTypes__default.default.string.isRequired
-  })),
-  layout: PropTypes__default.default.oneOf(['VERTICAL_TWO_COLUMN', 'VERTICAL_ONE_COLUMN', 'HORIZONTAL_JUSTIFIED', 'HORIZONTAL_LEFT_ALIGNED', 'HORIZONTAL_RIGHT_ALIGNED']),
-  muted: PropTypes__default.default.bool
-};
-DefinitionList.defaultProps = {
-  definitions: [],
-  layout: exports.Layout.VERTICAL_TWO_COLUMN,
-  muted: false
-};
-var DefinitionList$1 = DefinitionList;
+    children: definitions.filter(definition => definition).map(({
+      action,
+      title,
+      value,
+      key
+    }) => /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "tw-definition-list__item",
+      children: [/*#__PURE__*/jsxRuntime.jsx("dt", {
+        children: title
+      }), /*#__PURE__*/jsxRuntime.jsxs("dd", {
+        className: classNames__default.default(...getAlignmentClasses(layout, action)),
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          children: value
+        }), action ? /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: classNames__default.default(isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2', 'tw-definition-list__action'),
+          children: /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
+            className: "tw-definition-list__button",
+            onClick: action.onClick,
+            children: action.label
+          })
+        }) : null]
+      })]
+    }, key))
+  });
+}
 
 const DropFade = ({
   children,
@@ -14758,7 +14773,7 @@ exports.Button = Button;
 exports.Card = Card$1;
 exports.Carousel = Carousel;
 exports.Checkbox = Checkbox;
-exports.CheckboxButton = CheckboxButton;
+exports.CheckboxButton = CheckboxButton$1;
 exports.CheckboxOption = CheckboxOption;
 exports.Chevron = Chevron;
 exports.Chip = Chip;
@@ -14770,7 +14785,7 @@ exports.DEFAULT_LOCALE = DEFAULT_LOCALE;
 exports.DateInput = DateInput;
 exports.DateLookup = DateLookup$1;
 exports.Decision = Decision;
-exports.DefinitionList = DefinitionList$1;
+exports.DefinitionList = DefinitionList;
 exports.Dimmer = Dimmer$1;
 exports.DirectionProvider = DirectionProvider;
 exports.Display = Display;