@hipay/hipay-material-ui 1.0.0-beta.1

package/es/colors/blueGrey.js

@@ -0,0 +1,18 @@
+const blueGrey = {
+  50: '#eceff1',
+  100: '#cfd8dc',
+  200: '#b0bec5',
+  300: '#90a4ae',
+  400: '#78909c',
+  500: '#607d8b',
+  600: '#546e7a',
+  700: '#455a64',
+  800: '#37474f',
+  900: '#263238',
+  A100: '#cfd8dc',
+  A200: '#b0bec5',
+  A400: '#78909c',
+  A700: '#455a64'
+};
+
+export default blueGrey;

package/es/colors/brown.js

@@ -0,0 +1,18 @@
+const brown = {
+  50: '#efebe9',
+  100: '#d7ccc8',
+  200: '#bcaaa4',
+  300: '#a1887f',
+  400: '#8d6e63',
+  500: '#795548',
+  600: '#6d4c41',
+  700: '#5d4037',
+  800: '#4e342e',
+  900: '#3e2723',
+  A100: '#d7ccc8',
+  A200: '#bcaaa4',
+  A400: '#8d6e63',
+  A700: '#5d4037'
+};
+
+export default brown;

package/es/colors/common.js

@@ -0,0 +1,6 @@
+const common = {
+  black: '#000',
+  white: '#fff'
+};
+
+export default common;

package/es/colors/cyan.js

@@ -0,0 +1,18 @@
+const cyan = {
+  50: '#e0f7fa',
+  100: '#b2ebf2',
+  200: '#80deea',
+  300: '#4dd0e1',
+  400: '#26c6da',
+  500: '#00bcd4',
+  600: '#00acc1',
+  700: '#0097a7',
+  800: '#00838f',
+  900: '#006064',
+  A100: '#84ffff',
+  A200: '#18ffff',
+  A400: '#00e5ff',
+  A700: '#00b8d4'
+};
+
+export default cyan;

package/es/colors/deepOrange.js

@@ -0,0 +1,18 @@
+const deepOrange = {
+  50: '#fbe9e7',
+  100: '#ffccbc',
+  200: '#ffab91',
+  300: '#ff8a65',
+  400: '#ff7043',
+  500: '#ff5722',
+  600: '#f4511e',
+  700: '#e64a19',
+  800: '#d84315',
+  900: '#bf360c',
+  A100: '#ff9e80',
+  A200: '#ff6e40',
+  A400: '#ff3d00',
+  A700: '#dd2c00'
+};
+
+export default deepOrange;

package/es/colors/deepPurple.js

@@ -0,0 +1,18 @@
+const deepPurple = {
+  50: '#ede7f6',
+  100: '#d1c4e9',
+  200: '#b39ddb',
+  300: '#9575cd',
+  400: '#7e57c2',
+  500: '#673ab7',
+  600: '#5e35b1',
+  700: '#512da8',
+  800: '#4527a0',
+  900: '#311b92',
+  A100: '#b388ff',
+  A200: '#7c4dff',
+  A400: '#651fff',
+  A700: '#6200ea'
+};
+
+export default deepPurple;

package/es/colors/green.js

@@ -0,0 +1,18 @@
+const green = {
+  50: '#e8f5e9',
+  100: '#c8e6c9',
+  200: '#a5d6a7',
+  300: '#81c784',
+  400: '#66bb6a',
+  500: '#4caf50',
+  600: '#43a047',
+  700: '#388e3c',
+  800: '#2e7d32',
+  900: '#1b5e20',
+  A100: '#b9f6ca',
+  A200: '#69f0ae',
+  A400: '#00e676',
+  A700: '#00c853'
+};
+
+export default green;

package/es/colors/grey.js

@@ -0,0 +1,18 @@
+const grey = {
+  50: '#fafafa',
+  100: '#f5f5f5',
+  200: '#eeeeee',
+  300: '#e0e0e0',
+  400: '#bdbdbd',
+  500: '#9e9e9e',
+  600: '#757575',
+  700: '#616161',
+  800: '#424242',
+  900: '#212121',
+  A100: '#d5d5d5',
+  A200: '#aaaaaa',
+  A400: '#303030',
+  A700: '#616161'
+};
+
+export default grey;

package/es/colors/index.js

@@ -0,0 +1,20 @@
+export { default as common } from './common';
+export { default as red } from './red';
+export { default as pink } from './pink';
+export { default as purple } from './purple';
+export { default as deepPurple } from './deepPurple';
+export { default as indigo } from './indigo';
+export { default as blue } from './blue';
+export { default as lightBlue } from './lightBlue';
+export { default as cyan } from './cyan';
+export { default as teal } from './teal';
+export { default as green } from './green';
+export { default as lightGreen } from './lightGreen';
+export { default as lime } from './lime';
+export { default as yellow } from './yellow';
+export { default as amber } from './amber';
+export { default as orange } from './orange';
+export { default as deepOrange } from './deepOrange';
+export { default as brown } from './brown';
+export { default as grey } from './grey';
+export { default as blueGrey } from './blueGrey';

package/es/colors/indigo.js

@@ -0,0 +1,18 @@
+const indigo = {
+  50: '#e8eaf6',
+  100: '#c5cae9',
+  200: '#9fa8da',
+  300: '#7986cb',
+  400: '#5c6bc0',
+  500: '#3f51b5',
+  600: '#3949ab',
+  700: '#303f9f',
+  800: '#283593',
+  900: '#1a237e',
+  A100: '#8c9eff',
+  A200: '#536dfe',
+  A400: '#3d5afe',
+  A700: '#304ffe'
+};
+
+export default indigo;

package/es/colors/lightBlue.js

@@ -0,0 +1,18 @@
+const lightBlue = {
+  50: '#e1f5fe',
+  100: '#b3e5fc',
+  200: '#81d4fa',
+  300: '#4fc3f7',
+  400: '#29b6f6',
+  500: '#03a9f4',
+  600: '#039be5',
+  700: '#0288d1',
+  800: '#0277bd',
+  900: '#01579b',
+  A100: '#80d8ff',
+  A200: '#40c4ff',
+  A400: '#00b0ff',
+  A700: '#0091ea'
+};
+
+export default lightBlue;

package/es/colors/lightGreen.js

@@ -0,0 +1,18 @@
+const lightGreen = {
+  50: '#f1f8e9',
+  100: '#dcedc8',
+  200: '#c5e1a5',
+  300: '#aed581',
+  400: '#9ccc65',
+  500: '#8bc34a',
+  600: '#7cb342',
+  700: '#689f38',
+  800: '#558b2f',
+  900: '#33691e',
+  A100: '#ccff90',
+  A200: '#b2ff59',
+  A400: '#76ff03',
+  A700: '#64dd17'
+};
+
+export default lightGreen;

package/es/colors/lime.js

@@ -0,0 +1,18 @@
+const lime = {
+  50: '#f9fbe7',
+  100: '#f0f4c3',
+  200: '#e6ee9c',
+  300: '#dce775',
+  400: '#d4e157',
+  500: '#cddc39',
+  600: '#c0ca33',
+  700: '#afb42b',
+  800: '#9e9d24',
+  900: '#827717',
+  A100: '#f4ff81',
+  A200: '#eeff41',
+  A400: '#c6ff00',
+  A700: '#aeea00'
+};
+
+export default lime;

package/es/colors/orange.js

@@ -0,0 +1,18 @@
+const orange = {
+  50: '#fff3e0',
+  100: '#ffe0b2',
+  200: '#ffcc80',
+  300: '#ffb74d',
+  400: '#ffa726',
+  500: '#ff9800',
+  600: '#fb8c00',
+  700: '#f57c00',
+  800: '#ef6c00',
+  900: '#e65100',
+  A100: '#ffd180',
+  A200: '#ffab40',
+  A400: '#ff9100',
+  A700: '#ff6d00'
+};
+
+export default orange;

package/es/colors/pink.js

@@ -0,0 +1,18 @@
+const pink = {
+  50: '#fce4ec',
+  100: '#f8bbd0',
+  200: '#f48fb1',
+  300: '#f06292',
+  400: '#ec407a',
+  500: '#e91e63',
+  600: '#d81b60',
+  700: '#c2185b',
+  800: '#ad1457',
+  900: '#880e4f',
+  A100: '#ff80ab',
+  A200: '#ff4081',
+  A400: '#f50057',
+  A700: '#c51162'
+};
+
+export default pink;

package/es/colors/purple.js

@@ -0,0 +1,18 @@
+const purple = {
+  50: '#f3e5f5',
+  100: '#e1bee7',
+  200: '#ce93d8',
+  300: '#ba68c8',
+  400: '#ab47bc',
+  500: '#9c27b0',
+  600: '#8e24aa',
+  700: '#7b1fa2',
+  800: '#6a1b9a',
+  900: '#4a148c',
+  A100: '#ea80fc',
+  A200: '#e040fb',
+  A400: '#d500f9',
+  A700: '#aa00ff'
+};
+
+export default purple;

package/es/colors/red.js

@@ -0,0 +1,18 @@
+const red = {
+  50: '#ffebee',
+  100: '#ffcdd2',
+  200: '#ef9a9a',
+  300: '#e57373',
+  400: '#ef5350',
+  500: '#f44336',
+  600: '#e53935',
+  700: '#d32f2f',
+  800: '#c62828',
+  900: '#b71c1c',
+  A100: '#ff8a80',
+  A200: '#ff5252',
+  A400: '#ff1744',
+  A700: '#d50000'
+};
+
+export default red;

package/es/colors/teal.js

@@ -0,0 +1,18 @@
+const teal = {
+  50: '#e0f2f1',
+  100: '#b2dfdb',
+  200: '#80cbc4',
+  300: '#4db6ac',
+  400: '#26a69a',
+  500: '#009688',
+  600: '#00897b',
+  700: '#00796b',
+  800: '#00695c',
+  900: '#004d40',
+  A100: '#a7ffeb',
+  A200: '#64ffda',
+  A400: '#1de9b6',
+  A700: '#00bfa5'
+};
+
+export default teal;

package/es/colors/yellow.js

@@ -0,0 +1,18 @@
+const yellow = {
+  50: '#fffde7',
+  100: '#fff9c4',
+  200: '#fff59d',
+  300: '#fff176',
+  400: '#ffee58',
+  500: '#ffeb3b',
+  600: '#fdd835',
+  700: '#fbc02d',
+  800: '#f9a825',
+  900: '#f57f17',
+  A100: '#ffff8d',
+  A200: '#ffff00',
+  A400: '#ffea00',
+  A700: '#ffd600'
+};
+
+export default yellow;

package/es/index.js

@@ -0,0 +1,64 @@
+export { default as AppBar } from './AppBar';
+export { default as Avatar } from './Avatar';
+export { default as Badge } from './Badge';
+export { default as BottomNavigation, BottomNavigationAction } from './BottomNavigation';
+export { default as Button } from './Button';
+export { default as ButtonBase } from './ButtonBase';
+export { default as Card, CardActions, CardContent, CardHeader, CardMedia } from './Card';
+export { default as Checkbox } from './Checkbox';
+export { default as ClickAwayListener } from './utils/ClickAwayListener';
+export { default as Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, withMobileDialog } from './Dialog';
+export { default as Divider } from './Divider';
+export { default as Drawer } from './Drawer';
+export { default as ExpansionPanel, ExpansionPanelActions, ExpansionPanelDetails, ExpansionPanelSummary } from './ExpansionPanel';
+export { FormControl, FormGroup, FormLabel, FormHelperText, FormControlLabel } from './Form';
+export { default as Hidden } from './Hidden';
+export { default as Icon } from './Icon';
+export { default as IconButton } from './IconButton';
+export { default as Input, InputLabel, InputAdornment } from './Input';
+export { default as Grid } from './Grid';
+export { default as GridList, GridListTile, GridListTileBar } from './GridList';
+export { default as List, ListItem, ListItemAvatar, ListItemIcon, ListItemSecondaryAction, ListItemText, ListSubheader } from './List';
+export { default as Menu, MenuItem, MenuList } from './Menu';
+export { default as MobileStepper } from './MobileStepper';
+export { default as Modal, Backdrop, ModalManager } from './Modal';
+export { default as Paper } from './Paper';
+export { default as Popover } from './Popover';
+export { default as Portal } from './Portal';
+export { CircularProgress, LinearProgress } from './Progress';
+export { default as Radio, RadioGroup } from './Radio';
+export { default as Reboot } from './Reboot';
+export { default as Select } from './Select';
+export { default as Snackbar, SnackbarContent } from './Snackbar';
+export { default as Stepper, Step, StepButton, StepIcon, StepContent, StepLabel } from './Stepper';
+export { MuiThemeProvider, withStyles, withTheme, createMuiTheme, jssPreset } from './styles';
+
+// eslint-disable-next-line import/first
+import * as colors from './colors';
+
+export { colors };
+
+export { default as SvgIcon } from './SvgIcon';
+export { default as Switch } from './Switch';
+export { default as Table, TableBody, TableCell, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel } from './Table';
+export { default as Tabs, Tab } from './Tabs';
+export { default as Typography } from './Typography';
+export { default as TextField } from './TextField';
+export { default as Toolbar } from './Toolbar';
+export { default as Tooltip } from './Tooltip';
+export { Slide, Grow, Fade, Collapse, Zoom } from './transitions';
+
+export { default as withWidth } from './utils/withWidth';
+
+// HiPay Material components
+export { default as HiIconBuilder } from './utils/HiIconBuilder';
+export { default as HiCheckbox } from './HiCheckbox';
+export { default as HiRadio } from './HiRadio';
+export { default as HiTable } from './HiTable';
+export { default as HiSelect } from './HiSelect';
+export { default as HiLoader } from './HiLoader';
+export { default as HiTableContextMenu } from './HiTable/HiTableContextMenu';
+export { default as HiChip, HiChipSwitch } from './HiChip';
+export { default as HiSelectableList } from './HiSelectableList';
+export { default as HiTopBar } from './HiTopBar';
+export { createHiMuiTheme } from './styles';

package/es/internal/RefHolder.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * @ignore - internal component.
+ *
+ * Internal helper component to allow attaching a ref to a
+ * child element that may not accept refs (functional component).
+ */
+class RefHolder extends React.Component {
+  render() {
+    return this.props.children;
+  }
+}
+
+RefHolder.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: PropTypes.node
+} : {};
+
+export default RefHolder;

package/es/internal/SwitchBase.js

@@ -0,0 +1,219 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import CheckBoxOutlineBlankIcon from '../internal/svg-icons/CheckBoxOutlineBlank';
+import CheckBoxIcon from '../internal/svg-icons/CheckBox';
+import withStyles from '../styles/withStyles';
+import IconButton from '../IconButton';
+
+export const styles = {
+  root: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    transition: 'none'
+  },
+  input: {
+    cursor: 'inherit',
+    position: 'absolute',
+    opacity: 0,
+    width: '100%',
+    height: '100%',
+    top: 0,
+    left: 0,
+    margin: 0,
+    padding: 0
+  },
+  default: {},
+  checked: {},
+  disabled: {}
+};
+
+/**
+ * @ignore - internal component.
+ */
+class SwitchBase extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {};
+    this.input = null;
+    this.isControlled = null;
+
+    this.handleInputChange = event => {
+      const checked = event.target.checked;
+
+      if (!this.isControlled) {
+        this.setState({ checked });
+      }
+
+      if (this.props.onChange) {
+        this.props.onChange(event, checked);
+      }
+    };
+
+    this.isControlled = props.checked != null;
+    if (!this.isControlled) {
+      // not controlled, use internal state
+      this.state.checked = props.defaultChecked !== undefined ? props.defaultChecked : false;
+    }
+  }
+
+  render() {
+    const _props = this.props,
+          {
+      checked: checkedProp,
+      checkedIcon,
+      classes,
+      className: classNameProp,
+      disabled: disabledProp,
+      icon: iconProp,
+      id,
+      inputProps,
+      inputRef,
+      name,
+      onChange,
+      tabIndex,
+      type,
+      value
+    } = _props,
+          other = _objectWithoutProperties(_props, ['checked', 'checkedIcon', 'classes', 'className', 'disabled', 'icon', 'id', 'inputProps', 'inputRef', 'name', 'onChange', 'tabIndex', 'type', 'value']);
+
+    const { muiFormControl } = this.context;
+    let disabled = disabledProp;
+
+    if (muiFormControl) {
+      if (typeof disabled === 'undefined') {
+        disabled = muiFormControl.disabled;
+      }
+    }
+
+    const checked = this.isControlled ? checkedProp : this.state.checked;
+    const className = classNames(classes.root, classes.default, classNameProp, {
+      [classes.checked]: checked,
+      [classes.disabled]: disabled
+    });
+
+    const icon = checked ? checkedIcon : iconProp;
+
+    const hasLabelFor = type === 'checkbox' || type === 'radio';
+
+    return React.createElement(
+      IconButton,
+      _extends({
+        component: 'span',
+        className: className,
+        disabled: disabled,
+        tabIndex: null,
+        role: undefined
+      }, other),
+      icon,
+      React.createElement('input', _extends({
+        id: hasLabelFor && id,
+        type: type,
+        name: name,
+        checked: checked,
+        onChange: this.handleInputChange,
+        className: classes.input,
+        disabled: disabled,
+        tabIndex: tabIndex,
+        value: value,
+        ref: inputRef
+      }, inputProps))
+    );
+  }
+}
+
+// NB: If changed, please update Checkbox, Switch and Radio
+// so that the API documentation is updated.
+SwitchBase.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * If `true`, the component is checked.
+   */
+  checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  /**
+   * The icon to display when the component is checked.
+   */
+  checkedIcon: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * @ignore
+   */
+  defaultChecked: PropTypes.bool,
+  /**
+   * If `true`, the switch will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the ripple effect will be disabled.
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * The icon to display when the component is unchecked.
+   */
+  icon: PropTypes.node,
+  /**
+   * The id of the `input` element.
+   */
+  id: PropTypes.string,
+  /**
+   * If `true`, the component appears indeterminate.
+   */
+  indeterminate: PropTypes.bool,
+  /**
+   * The icon to display when the component is indeterminate.
+   */
+  indeterminateIcon: PropTypes.node,
+  /**
+   * Properties applied to the `input` element.
+   */
+  inputProps: PropTypes.object,
+  /**
+   * Use that property to pass a ref callback to the native input component.
+   */
+  inputRef: PropTypes.func,
+  /*
+   * @ignore
+   */
+  name: PropTypes.string,
+  /**
+   * Callback fired when the state is changed.
+   *
+   * @param {object} event The event source of the callback
+   * @param {boolean} checked The `checked` value of the switch
+   */
+  onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The input component property `type`.
+   */
+  type: PropTypes.string,
+  /**
+   * The value of the component.
+   */
+  value: PropTypes.string
+} : {};
+
+SwitchBase.defaultProps = {
+  checkedIcon: React.createElement(CheckBoxIcon, null),
+  disableRipple: false,
+  icon: React.createElement(CheckBoxOutlineBlankIcon, null),
+  type: 'checkbox'
+};
+
+SwitchBase.contextTypes = {
+  muiFormControl: PropTypes.object
+};
+
+export default withStyles(styles, { name: 'MuiSwitchBase' })(SwitchBase);

package/es/internal/svg-icons/ArrowDownward.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import SvgIcon from '../../SvgIcon';
+
+/**
+ * @ignore - internal component.
+ */
+
+var _ref = React.createElement('path', { d: 'M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z' });
+
+let ArrowDownward = props => React.createElement(
+  SvgIcon,
+  props,
+  _ref
+);
+
+ArrowDownward = pure(ArrowDownward);
+ArrowDownward.muiName = 'SvgIcon';
+
+export default ArrowDownward;