baseui 11.0.1 → 11.1.0

package/notification/index.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {KIND, ToastProps} from '../toast';
+import { KIND, ToastProps } from '../toast';
 
 export class Notification extends React.Component<ToastProps> {}
-export {KIND};
+export { KIND };

package/notification/notification.js

@@ -11,6 +11,8 @@ var React = _interopRequireWildcard(require("react"));
 
 var _index = require("../toast/index.js");
 
+var _overrides = require("../helpers/overrides.js");
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -53,9 +55,24 @@ var Notification = /*#__PURE__*/function (_React$Component) {
   _createClass(Notification, [{
     key: "render",
     value: function render() {
+      var overrides = (0, _overrides.mergeOverrides)({
+        Body: {
+          style: function style(_ref) {
+            var $theme = _ref.$theme;
+            return {
+              marginTop: $theme.sizing.scale600,
+              marginRight: $theme.sizing.scale600,
+              marginBottom: $theme.sizing.scale600,
+              marginLeft: $theme.sizing.scale600
+            };
+          }
+        }
+      }, this.props.overrides);
       return /*#__PURE__*/React.createElement(_index.Toast, _extends({
         "data-baseweb": "notification"
-      }, this.props));
+      }, this.props, {
+        overrides: overrides
+      }));
     }
   }]);
 

package/notification/notification.js.flow

@@ -9,6 +9,7 @@ import * as React from 'react';
 
 import { Toast, TYPE } from '../toast/index.js';
 import type { ToastPropsT, ToastPropsShapeT } from '../toast/types.js';
+import { mergeOverrides } from '../helpers/overrides.js';
 
 export default class Notification extends React.Component<ToastPropsT> {
   static defaultProps: ToastPropsShapeT = {
@@ -17,7 +18,20 @@ export default class Notification extends React.Component<ToastPropsT> {
   };
 
   render() {
-    return <Toast data-baseweb="notification" {...this.props} />;
+    const overrides = mergeOverrides(
+      {
+        Body: {
+          style: ({ $theme }) => ({
+            marginTop: $theme.sizing.scale600,
+            marginRight: $theme.sizing.scale600,
+            marginBottom: $theme.sizing.scale600,
+            marginLeft: $theme.sizing.scale600,
+          }),
+        },
+      },
+      this.props.overrides
+    );
+    return <Toast data-baseweb="notification" {...this.props} overrides={overrides} />;
   }
 }
 

package/overrides.ts

@@ -1,23 +1,3 @@
-import * as React from 'react';
-import {StyleObject} from 'styletron-react';
-import {Theme} from './theme';
+import type { Override, Overrides } from './helpers/overrides';
 
-type StyleOverride<T> =
-  | StyleObject
-  | ((props: {$theme: Theme} & React.PropsWithChildren<T>) => StyleObject);
-
-type ComponentOverride<T> =
-  | React.ComponentType<T>
-  | React.RefForwardingComponent<T>;
-
-interface OverrideObject<T> {
-  component?: ComponentOverride<T>;
-  props?: any;
-  style?: StyleOverride<T>;
-}
-
-export type Override<T> = OverrideObject<T> | React.ComponentType<T>;
-
-export interface Overrides<T> {
-  [key: string]: Override<T>;
-}
+export type { Override, Overrides };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "11.0.1",
+  "version": "11.1.0",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",
@@ -24,23 +24,23 @@
     "build:copy-files": "shx cp README.md dist/README.md",
     "build:copy-flow-files": "node ./scripts/flow-copy-src.js",
     "build:copy-ts-files": "node ./scripts/ts-copy.js",
-    "build:package-json": "shx cp package.json dist/package.json && node ./scripts/build-package-json.js",
+    "build:package-json": "shx cp package.json dist/package.json && shx cp .npmrc dist/.npmrc && node ./scripts/build-package-json.js",
     "build:cjs": "cross-env NODE_ENV=production BABEL_ENV=cjs babel ./src --out-dir ./dist --ignore **.test.js,**/__tests__/**,**/e2e.js,**/template-component/**,**/test/**",
     "build:esm": "cross-env NODE_ENV=production BABEL_ENV=esm babel ./src --out-dir ./dist/esm --ignore **.test.js,**/__tests__/**,**/e2e.js,**/template-component/**,**/test/**",
     "build:es": "cross-env NODE_ENV=production BABEL_ENV=es babel ./src --out-dir ./dist/es --ignore **.test.js,**/__tests__/**,**/e2e.js,**/template-component/**,**/test/**",
     "build": "yarn build:cjs && yarn build:esm && yarn build:es && yarn build:copy-files && yarn build:copy-flow-files && yarn build:copy-ts-files && yarn build:package-json",
-    "build:docs-and-ladle": "yarn documentation:build && yarn ladle build --base-url /ladle/ && mv build public/ladle",
+    "build:docs-and-ladle": "yarn documentation:build && yarn ladle build && mv build public/ladle",
     "build:documentation-site-files": "node ./scripts/build-documentation-site-files.js",
     "unit-test": "yarn jest --coverage",
-    "e2e:build": "yarn ladle build --out build-ladle",
+    "e2e:build": "yarn ladle build --outDir build-ladle",
     "e2e:serve": "static-server build-ladle --port 8080",
-    "e2e:test": "jest --runInBand -c jest.e2e.config.js",
-    "e2e:test:ci": "PUPPETEER_TARGET_URL=http://e2e-server:8080 jest -c jest.e2e.config.js",
-    "vrt": "jest -c jest.vrt.config.js",
+    "e2e:test": "playwright test",
+    "e2e:test:ci": "PUPPETEER_TARGET_URL=http://e2e-server:8080 yarn e2e:test",
+    "vrt": "playwright test --config playwright-vrt.config.js",
     "vrt:docker:run": "docker-compose run e2e-test bash -c 'PUPPETEER_TARGET_URL=http://e2e-server:8080 yarn vrt'",
-    "vrt:docker:update": "docker-compose run e2e-test bash -c 'PUPPETEER_TARGET_URL=http://e2e-server:8080 yarn vrt -u'",
+    "vrt:docker:update": "docker-compose run e2e-test bash -c 'PUPPETEER_TARGET_URL=http://e2e-server:8080 yarn vrt --update'",
     "vrt:ci": "PUPPETEER_TARGET_URL=http://e2e-server:8080 node ./vrt/ci.js",
-    "vrt:reset": "shx rm -rf vrt/__image_snapshots__",
+    "vrt:reset": "shx rm -rf vrt/tests.vrt.js-snapshots",
     "icon:generate": "node ./src/icon/build-icons.js",
     "thumbs:generate": "svgr --template ./documentation-site/components/thumbs/template.js --replace-attr-values \"#F6F6F6={props.colors[0]}\" --replace-attr-values \"#E2E2E2={props.colors[1]}\" --replace-attr-values \"#CBCBCB={props.colors[2]}\" -d ./documentation-site/components/thumbs/components ./documentation-site/components/thumbs/svg",
     "install": "node -e \"console.log('If you are using Webpack, please make sure to update to version ^4.32.0, as this Base Web version depends on a webpack fix delivered in that version. If you are using Fusion.js make sure to upgrade fusion-cli to ^2.4.2 as it has the Webpack upgrade.')\"",
@@ -55,12 +55,13 @@
     "next:dev": "next dev documentation-site",
     "next:build": "NODE_OPTIONS=--max_old_space_size=4096 next build documentation-site",
     "next:export": "next export documentation-site -o public",
-    "tsc": "tsc --skipLibCheck",
+    "tsc": "tsc",
     "validate:examples": "node ./scripts/validate-examples.js"
   },
   "devDependencies": {
     "@babel/cli": "^7.6.0",
     "@babel/core": "^7.8.4",
+    "@babel/generator": "^7.17.3",
     "@babel/helper-builder-react-jsx": "^7.12.13",
     "@babel/parser": "^7.7.3",
     "@babel/plugin-external-helpers": "^7.2.0",
@@ -76,15 +77,18 @@
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.13.0",
+    "@babel/template": "^7.16.7",
     "@babel/traverse": "^7.7.0",
     "@babel/types": "^7.7.1",
     "@commitlint/cli": "^8.0.0",
     "@commitlint/config-conventional": "^8.0.0",
     "@date-io/luxon": "^2.7.0",
     "@date-io/moment": "^2.7.0",
-    "@ladle/react": "^0.10.2",
+    "@dubstep/core": "^3.5.3",
+    "@ladle/react": "^1.0.1",
     "@mdx-js/tag": "^0.20.0",
     "@octokit/rest": "^16.33.1",
+    "@playwright/test": "^1.22.2",
     "@svgr/cli": "^4.3.2",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
@@ -105,9 +109,12 @@
     "@types/react-dom": "^16.8.4",
     "@types/react-virtualized": "^9.21.3",
     "@types/react-window": "^1.8.1",
-    "@types/styletron-engine-atomic": "^1.1.0",
-    "@types/styletron-react": "^5.0.1",
-    "@types/styletron-standard": "^2.0.0",
+    "@types/styletron-engine-atomic": "^1.1.1",
+    "@types/styletron-react": "^5.0.3",
+    "@types/styletron-standard": "^2.0.2",
+    "@types/webpack": "^4.41.32",
+    "@typescript-eslint/eslint-plugin": "^5.26.0",
+    "@typescript-eslint/parser": "^5.26.0",
     "@zeit/next-css": "^1.0.1",
     "@zeit/next-mdx": "^1.2.0",
     "axe-core": "^4.2.2",
@@ -139,6 +146,7 @@
     "extract-react-types": "^0.26.0",
     "extract-react-types-loader": "^0.3.13",
     "flow-bin": "0.131.0",
+    "flow-remove-types": "^2.179.0",
     "globby": "^10.0.1",
     "husky": "^3.0.0",
     "isomorphic-fetch": "^2.2.1",
@@ -148,7 +156,6 @@
     "jest-environment-jsdom-global": "1.2.1",
     "jest-image-snapshot": "^2.11.0",
     "jest-matcher-utils": "^26.6.1",
-    "jest-puppeteer": "^5.0.4",
     "jscodeshift": "^0.6.4",
     "just-omit": "^1.1.0",
     "just-pick": "^2.1.0",
@@ -162,11 +169,11 @@
     "node-fetch": "^2.6.1",
     "now": "16.5.2",
     "npm-run-all": "^4.1.5",
+    "playwright": "^1.22.2",
     "prettier": "^2.5.1",
     "pretty-proptypes": "^1.0.5",
     "pretty-quick": "^1.4.1",
     "prism-react-renderer": "^1.0.1",
-    "puppeteer": "^9.1.1",
     "query-string": "^6.14.0",
     "raw-loader": "^3.1.0",
     "react": "^17.0.2",
@@ -177,10 +184,12 @@
     "react-icons": "^3.8.0",
     "react-map-gl": "^5.3.19",
     "react-markdown": "^4.0.3",
+    "react-simple-code-editor": "^0.10.0",
     "react-twitter-embed": "^2.0.8",
     "react-view": "^2.3.3",
     "react-vis": "^1.11.6",
     "remove-flow-types-loader": "^1.1.0",
+    "rollup-pluginutils": "^2.8.2",
     "semver": "^6.2.0",
     "shx": "^0.3.2",
     "static-server": "^2.2.1",
@@ -189,7 +198,7 @@
     "styletron-standard": "^3.0.3",
     "tar": "^5.0.0",
     "tsconfig-paths": "^3.9.0",
-    "typescript": "^3.8.0",
+    "typescript": "^4.7.2",
     "universal-cookie": "^4.0.2",
     "webpack": "^4.17.1",
     "webpack-bundle-analyzer": "^3.5.0",

package/pagination/index.d.ts

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {Override} from '../overrides';
-import {Locale} from '../locale';
-import {SIZE} from '../input';
+import { StyletronComponent } from 'styletron-react';
+import { Override } from '../overrides';
+import { Locale } from '../locale';
+import { SIZE } from '../input';
 
-export {SIZE};
+export { SIZE };
 
-export interface STATE_CHANGE_TYPE {
+export declare const STATE_CHANGE_TYPE: {
   change: 'change';
-}
+};
 
 export interface Labels {
   prevButton?: string;
@@ -21,9 +21,9 @@ export interface State {
 }
 
 export type StateReducer = (
-  changeType: STATE_CHANGE_TYPE[keyof STATE_CHANGE_TYPE],
+  changeType: typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE],
   changes: State,
-  currentState: State,
+  currentState: State
 ) => State;
 
 export interface PaginationOverrides {
@@ -36,9 +36,9 @@ export interface PaginationOverrides {
 }
 
 export interface Callbacks {
-  onPrevClick?: (args: {event: any}) => any;
-  onNextClick?: (args: {event: any}) => any;
-  onPageChange?: (args: {nextPage: number; prevPage: number}) => any;
+  onPrevClick?: (args: { event: any }) => any;
+  onNextClick?: (args: { event: any }) => any;
+  onPageChange?: (args: { nextPage: number; prevPage: number }) => any;
 }
 
 export interface PaginationProps extends Callbacks {
@@ -46,7 +46,7 @@ export interface PaginationProps extends Callbacks {
   currentPage: number;
   labels?: Labels;
   overrides?: PaginationOverrides;
-  size?: SIZE[keyof SIZE];
+  size?: typeof SIZE[keyof typeof SIZE];
 }
 
 export interface PageOption {
@@ -55,7 +55,7 @@ export interface PageOption {
 
 export class Pagination extends React.PureComponent<PaginationProps> {
   getMenuOptions(numPages: number): [];
-  onMenuItemSelect(data: {value: ReadonlyArray<PageOption>}): void;
+  onMenuItemSelect(data: { value: ReadonlyArray<PageOption> }): void;
   onPrevClick(event: React.SyntheticEvent<any>): void;
   onNextClick(event: React.SyntheticEvent<any>): void;
   constructAriaWayfinderLabel(locale: Locale, prefix: string): string;
@@ -69,7 +69,7 @@ export interface StatefulPaginationProps extends Callbacks {
   overrides?: PaginationOverrides;
 }
 
-export const StatefulPagination: React.FC<StatefulPaginationProps>;
+export declare const StatefulPagination: React.FC<StatefulPaginationProps>;
 
 export interface StatefulContainerProps {
   children: React.ReactNode;
@@ -79,18 +79,14 @@ export interface StatefulContainerProps {
   onPageChange?: Callbacks['onPageChange'];
 }
 
-export class StatefulContainer extends React.Component<
-  StatefulContainerProps,
-  State
-> {
+export class StatefulContainer extends React.Component<StatefulContainerProps, State> {
   internalSetState(
-    changeType: STATE_CHANGE_TYPE[keyof STATE_CHANGE_TYPE],
-    changes: State,
+    changeType: typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE],
+    changes: State
   ): void;
-  onPageChange(args: {nextPage: number}): void;
+  onPageChange(args: { nextPage: number }): void;
 }
 
-export const StyledRoot: StyletronComponent<any>;
-export const StyledMaxLabel: StyletronComponent<any>;
-export const StyledDropdownContainer: StyletronComponent<any>;
-export const STATE_CHANGE_TYPE: STATE_CHANGE_TYPE;
+export declare const StyledRoot: StyletronComponent<any>;
+export declare const StyledMaxLabel: StyletronComponent<any>;
+export declare const StyledDropdownContainer: StyletronComponent<any>;

package/payment-card/custom-cards.config.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CUSTOM_CARDS_CONFIGURATION = void 0;
+
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+/*
+  This file should be used for adding new card type configuration
+*/
+var UATP_CARD_TYPE_CONFIG = {
+  niceType: 'Uatp',
+  type: 'uatp',
+  patterns: [[1001, 1999]],
+  gaps: [4, 9],
+  lengths: [15],
+  code: {
+    name: 'CVV',
+    size: 0
+  }
+};
+var CUSTOM_CARDS_CONFIGURATION = [UATP_CARD_TYPE_CONFIG];
+exports.CUSTOM_CARDS_CONFIGURATION = CUSTOM_CARDS_CONFIGURATION;

package/payment-card/custom-cards.config.js.flow

@@ -0,0 +1,29 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+//@flow
+
+/*
+  This file should be used for adding new card type configuration
+*/
+
+const UATP_CARD_TYPE_CONFIG = {
+  niceType: 'Uatp',
+  type: 'uatp',
+  patterns: [[1001, 1999]],
+  gaps: [4, 9],
+  lengths: [15],
+  code: {
+    name: 'CVV',
+    size: 0,
+  },
+};
+
+export const CUSTOM_CARDS_CONFIGURATION = [UATP_CARD_TYPE_CONFIG];
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/payment-card/icons/uatp.js

@@ -0,0 +1,67 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+var UatpIcon = function UatpIcon(_ref) {
+  var size = _ref.size;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M23 4H1V20H23V4Z",
+    fill: "#F0F0F0"
+  }), /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#clip0_90345_28085)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M10.5057 9.64723H10.1817H9.70679V10.9659L10.3044 12.6255L11.4708 12.133L10.5057 9.64723Z",
+    fill: "#0A2C1B"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6.34592 14.6471L6.34001 9.64723H5.07682V13.7451C4.94173 13.7928 4.80176 13.8253 4.65948 13.8421C4.38337 13.8743 3.9371 13.9265 3.60459 13.6339C3.27002 13.3394 3.26507 12.8846 3.26655 12.7802V9.64723H2.00336V12.7802C1.96122 13.7182 2.32658 14.1754 2.45948 14.3209C3.17638 15.1058 4.54287 14.9387 5.39513 14.8345C5.71171 14.7958 6.02491 14.7331 6.33204 14.6471L6.32786 14.6427L6.34592 14.6471Z",
+    fill: "#0A2C1B"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M21.999 11.453C21.9951 11.2269 21.9447 10.4929 21.3738 10.0162C21.1483 9.82795 20.9283 9.75218 20.7469 9.6897C20.5867 9.63455 20.2633 9.54148 19.3754 9.58086C18.9585 9.59952 18.5429 9.64148 18.1306 9.70653V14.8388H19.3938V13.3179C19.4958 13.3263 19.6189 13.3331 19.7586 13.3337C19.9448 13.3351 20.1309 13.325 20.3158 13.3033C20.4802 13.2817 21.266 13.1786 21.709 12.5414C22.0104 12.1079 22.0024 11.6443 21.999 11.453ZM20.5118 11.9928C20.3546 12.1594 20.1557 12.1903 19.9414 12.2236C19.7608 12.2514 19.5768 12.2484 19.3972 12.2148V10.7433C19.4924 10.7303 19.5885 10.7245 19.6845 10.7259C19.9706 10.73 20.2799 10.7344 20.4943 10.9523C20.6881 11.1491 20.6983 11.4123 20.699 11.4747C20.6996 11.5392 20.6985 11.7948 20.5118 11.9928Z",
+    fill: "#0A2C1B"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M10.4995 13.1673L11.1015 14.8388H12.5212L11.6926 12.7045C11.3054 12.8761 10.9077 13.0304 10.4995 13.1673Z",
+    fill: "#0A2C1B"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6.60772 13.6849C6.59882 13.6856 6.59 13.6828 6.58303 13.6773C6.57607 13.6717 6.57148 13.6637 6.57019 13.6548C6.56891 13.646 6.57102 13.637 6.5761 13.6297C6.58119 13.6223 6.58887 13.6172 6.59759 13.6153C7.44534 13.4378 8.27682 13.1899 9.08338 12.8742C12.0436 11.7142 12.5355 10.4597 14.7222 9.60822C17.2224 8.63467 19.7225 9.06335 20.7271 9.30762C20.7338 9.30921 20.7396 9.31329 20.7433 9.31903C20.7471 9.32476 20.7485 9.3317 20.7473 9.33844C20.746 9.34518 20.7423 9.35119 20.7368 9.35525C20.7313 9.35931 20.7244 9.3611 20.7176 9.36026C19.7189 9.24529 18.7085 9.28396 17.7216 9.47491C15.1767 9.96677 14.237 11.2345 11.9094 12.341C10.7268 12.9032 8.98995 13.517 6.60772 13.6849Z",
+    fill: "#3EB54A"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M16.9918 9.64723H12.6013V10.7793H14.1649V14.8388H15.4281V10.7793H16.9918V9.64723Z",
+    fill: "#0A2C1B"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M9.23192 9.64723H8.95198L6.93652 14.8388H8.31211L9.70682 10.9659V9.64723H9.23192Z",
+    fill: "#0A2C1B"
+  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "clip0_90345_28085"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "20",
+    height: "5.92493",
+    fill: "white",
+    transform: "translate(2 9)"
+  }))));
+};
+
+var _default = UatpIcon;
+exports.default = _default;

package/payment-card/icons/uatp.js.flow

@@ -0,0 +1,62 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+
+import * as React from 'react';
+
+const UatpIcon = ({ size }: { size: string }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M23 4H1V20H23V4Z" fill="#F0F0F0" />
+    <g clipPath="url(#clip0_90345_28085)">
+      <path
+        d="M10.5057 9.64723H10.1817H9.70679V10.9659L10.3044 12.6255L11.4708 12.133L10.5057 9.64723Z"
+        fill="#0A2C1B"
+      />
+      <path
+        d="M6.34592 14.6471L6.34001 9.64723H5.07682V13.7451C4.94173 13.7928 4.80176 13.8253 4.65948 13.8421C4.38337 13.8743 3.9371 13.9265 3.60459 13.6339C3.27002 13.3394 3.26507 12.8846 3.26655 12.7802V9.64723H2.00336V12.7802C1.96122 13.7182 2.32658 14.1754 2.45948 14.3209C3.17638 15.1058 4.54287 14.9387 5.39513 14.8345C5.71171 14.7958 6.02491 14.7331 6.33204 14.6471L6.32786 14.6427L6.34592 14.6471Z"
+        fill="#0A2C1B"
+      />
+      <path
+        d="M21.999 11.453C21.9951 11.2269 21.9447 10.4929 21.3738 10.0162C21.1483 9.82795 20.9283 9.75218 20.7469 9.6897C20.5867 9.63455 20.2633 9.54148 19.3754 9.58086C18.9585 9.59952 18.5429 9.64148 18.1306 9.70653V14.8388H19.3938V13.3179C19.4958 13.3263 19.6189 13.3331 19.7586 13.3337C19.9448 13.3351 20.1309 13.325 20.3158 13.3033C20.4802 13.2817 21.266 13.1786 21.709 12.5414C22.0104 12.1079 22.0024 11.6443 21.999 11.453ZM20.5118 11.9928C20.3546 12.1594 20.1557 12.1903 19.9414 12.2236C19.7608 12.2514 19.5768 12.2484 19.3972 12.2148V10.7433C19.4924 10.7303 19.5885 10.7245 19.6845 10.7259C19.9706 10.73 20.2799 10.7344 20.4943 10.9523C20.6881 11.1491 20.6983 11.4123 20.699 11.4747C20.6996 11.5392 20.6985 11.7948 20.5118 11.9928Z"
+        fill="#0A2C1B"
+      />
+      <path
+        d="M10.4995 13.1673L11.1015 14.8388H12.5212L11.6926 12.7045C11.3054 12.8761 10.9077 13.0304 10.4995 13.1673Z"
+        fill="#0A2C1B"
+      />
+      <path
+        d="M6.60772 13.6849C6.59882 13.6856 6.59 13.6828 6.58303 13.6773C6.57607 13.6717 6.57148 13.6637 6.57019 13.6548C6.56891 13.646 6.57102 13.637 6.5761 13.6297C6.58119 13.6223 6.58887 13.6172 6.59759 13.6153C7.44534 13.4378 8.27682 13.1899 9.08338 12.8742C12.0436 11.7142 12.5355 10.4597 14.7222 9.60822C17.2224 8.63467 19.7225 9.06335 20.7271 9.30762C20.7338 9.30921 20.7396 9.31329 20.7433 9.31903C20.7471 9.32476 20.7485 9.3317 20.7473 9.33844C20.746 9.34518 20.7423 9.35119 20.7368 9.35525C20.7313 9.35931 20.7244 9.3611 20.7176 9.36026C19.7189 9.24529 18.7085 9.28396 17.7216 9.47491C15.1767 9.96677 14.237 11.2345 11.9094 12.341C10.7268 12.9032 8.98995 13.517 6.60772 13.6849Z"
+        fill="#3EB54A"
+      />
+      <path
+        d="M16.9918 9.64723H12.6013V10.7793H14.1649V14.8388H15.4281V10.7793H16.9918V9.64723Z"
+        fill="#0A2C1B"
+      />
+      <path
+        d="M9.23192 9.64723H8.95198L6.93652 14.8388H8.31211L9.70682 10.9659V9.64723H9.23192Z"
+        fill="#0A2C1B"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_90345_28085">
+        <rect width="20" height="5.92493" fill="white" transform="translate(2 9)" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default UatpIcon;
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/payment-card/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
+import { StyletronComponent } from 'styletron-react';
 import * as valid from 'card-validator';
-import {Override} from '../overrides';
+import { Override } from '../overrides';
 import {
   SIZE,
   StatefulContainer,
@@ -10,19 +10,19 @@ import {
   StatefulContainerProps,
 } from '../input';
 
-export {SIZE, StatefulContainer};
+export { SIZE, StatefulContainer };
 
-export {valid};
+export { valid };
 
 export type PaymentCardOverrides = InputOverrides & {
   IconWrapper?: Override<any>;
 };
 
-export type PaymentCardProps = InputProps & {overrides?: PaymentCardOverrides};
+export type PaymentCardProps = InputProps & { overrides?: PaymentCardOverrides };
 export type StatefulPaymentCardProps = InputProps &
-  StatefulContainerProps & {children?: never; overrides?: PaymentCardOverrides};
+  StatefulContainerProps & { children?: never; overrides?: PaymentCardOverrides };
 
-export const StatefulPaymentCard: React.FC<StatefulPaymentCardProps>;
+export declare const StatefulPaymentCard: React.FC<StatefulPaymentCardProps>;
 export class PaymentCard extends React.Component<PaymentCardProps> {}
 
-export const StyledIconWrapper: StyletronComponent<any>;
+export declare const StyledIconWrapper: StyletronComponent<any>;

package/payment-card/payment-card.js

@@ -39,8 +39,12 @@ var _unionpay = _interopRequireDefault(require("./icons/unionpay.js"));
 
 var _visa = _interopRequireDefault(require("./icons/visa.js"));
 
+var _uatp = _interopRequireDefault(require("./icons/uatp.js"));
+
 var _styledComponents = require("./styled-components.js");
 
+var _customCardsConfig = require("./custom-cards.config.js");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -101,7 +105,8 @@ var CardTypeToComponent = {
   unionpay: _unionpay.default,
   maestro: _maestro.default,
   elo: _elo.default,
-  generic: _generic.default
+  generic: _generic.default,
+  uatp: _uatp.default
 };
 
 var PaymentCard = /*#__PURE__*/function (_React$Component) {
@@ -109,21 +114,21 @@ var PaymentCard = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(PaymentCard);
 
-  function PaymentCard() {
+  function PaymentCard(props) {
     var _this;
 
     _classCallCheck(this, PaymentCard);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, props); // For adding new custom card type, add card config to custom-cards.config.js
 
     _defineProperty(_assertThisInitialized(_this), "caretPosition", 0);
 
     _defineProperty(_assertThisInitialized(_this), "inRef", null);
 
+    _customCardsConfig.CUSTOM_CARDS_CONFIGURATION.forEach(function (cardTypeConfig) {
+      return valid.creditCardType.addCard(cardTypeConfig);
+    });
+
     return _this;
   }