@retailmenot/anchor/esm/card.js

A React UI Library by RetailMeNot

import { a as _taggedTemplateLiteral } from './anchor-chunk-7b9d8557.js';
import { a as __rest } from './anchor-chunk-27f34e54.js';
import { forwardRef, createElement, useContext, useState, Children, Fragment, useEffect, useRef, createRef, Component, cloneElement, useReducer, PureComponent, isValidElement, createContext, useImperativeHandle } from 'react';
import classNames from 'classnames';
import styled, { css } from '@xstyled/styled-components';
import { th, space } from '@xstyled/system';

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n    box-sizing: border-box;\n    position: relative;\n    display: inline-block;\n    font-family: base;\n    width: 100%;\n    border-top: light;\n    ", ";\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
var StyledCardActionArea = styled('div')(_templateObject(), function (_ref) {
  var _ref$backgroundColor = _ref.backgroundColor,
      backgroundColor = _ref$backgroundColor === void 0 ? 'white' : _ref$backgroundColor;
  return css({
    backgroundColor: backgroundColor
  });
});
var CardActionArea = function CardActionArea(_a) {
  var className = _a.className,
      children = _a.children,
      props = __rest(_a, ["className", "children"]);

  return createElement(StyledCardActionArea, Object.assign({
    className: classNames('anchor-card-action-area', className)
  }, props), children);
};

function _templateObject$1() {
  var data = _taggedTemplateLiteral(["\n    box-sizing: border-box;\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-family: base;\n    top: 0;\n    right: 0;\n    width: 2.5rem;\n    height: 2.5rem;\n    background-color: white;\n    z-index: 1;\n"]);

  _templateObject$1 = function _templateObject() {
    return data;
  };

  return data;
}
var StyledCard = styled('div')(_templateObject$1());
var CardAction = function CardAction(_a) {
  var className = _a.className,
      children = _a.children,
      props = __rest(_a, ["className", "children"]);

  return createElement(StyledCard, Object.assign({
    className: classNames('anchor-card-action', className)
  }, props), children);
};

function _templateObject$2() {
  var data = _taggedTemplateLiteral(["\n    box-sizing: border-box;\n    position: relative;\n    display: block;\n    padding: ", ";\n    font-family: base;\n"]);

  _templateObject$2 = function _templateObject() {
    return data;
  };

  return data;
}
var gutterSizes = {
  none: '',
  small: '0.75rem',
  medium: '1rem',
  large: '1.5rem'
};
var StyledCard$1 = styled('div')(_templateObject$2(), function (_ref) {
  var _ref$gutter = _ref.gutter,
      gutter = _ref$gutter === void 0 ? 'medium' : _ref$gutter;
  return gutterSizes[gutter];
});
var CardContent = function CardContent(_a) {
  var className = _a.className,
      children = _a.children,
      props = __rest(_a, ["className", "children"]);

  return createElement(StyledCard$1, Object.assign({
    className: classNames('anchor-card-content', className)
  }, props), children);
};

function _templateObject$3() {
  var data = _taggedTemplateLiteral(["\n    position: relative;\n    width: 100%;\n    font-family: base;\n    box-sizing: border-box;\n    border-radius: base;\n    border: solid thin ", ";\n    ", "\n"]);

  _templateObject$3 = function _templateObject() {
    return data;
  };

  return data;
}
var StyledCard$2 = styled('div')(_templateObject$3(), th.color('borders.base'), space);
var Card = function Card(_a) {
  var className = _a.className,
      children = _a.children,
      action = _a.action,
      actionArea = _a.actionArea,
      gutter = _a.gutter,
      props = __rest(_a, ["className", "children", "action", "actionArea", "gutter"]);

  return createElement(StyledCard$2, Object.assign({
    className: classNames('anchor-card', className)
  }, props), action && createElement(CardAction, null, action), createElement(CardContent, {
    gutter: gutter,
    children: children
  }), Children.map(actionArea, function (child) {
    if (child.type.name === 'ActionArea') {
      return actionArea;
    } else {
      return createElement(CardActionArea, null, actionArea);
    }
  }));
};

export { Card };
//# sourceMappingURL=card.js.map