@mui-treasury/mockup/brands/dailyShopping/DailySizeSelector.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _styles = require("@material-ui/core/styles");

var _ButtonBase = _interopRequireDefault(require("@material-ui/core/ButtonBase"));

var _KeyboardArrowDown = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowDown"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var useStyles = (0, _styles.makeStyles)(function (_ref) {
  var palette = _ref.palette;
  return {
    btnBase: {
      borderRadius: 40
    },
    root: {
      display: 'inline-flex',
      alignItems: 'center',
      padding: '8px 40px 8px 12px',
      position: 'relative',
      borderRadius: 40,
      border: '1px solid',
      borderColor: palette.grey[300],
      fontSize: 14,
      minHeight: 42
    },
    icon: {
      position: 'absolute',
      right: 8,
      top: '50%',
      transform: 'translateY(-50%)',
      color: palette.grey[700]
    }
  };
});

var DailySizeSelector = function DailySizeSelector(_ref2) {
  var children = _ref2.children;
  var styles = useStyles();
  return /*#__PURE__*/_react["default"].createElement(_ButtonBase["default"], {
    className: styles.btnBase
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: styles.root
  }, children, " ", /*#__PURE__*/_react["default"].createElement(_KeyboardArrowDown["default"], {
    className: styles.icon
  })));
};

var _default = DailySizeSelector;
exports["default"] = _default;