@zendesk/retrace/cjs/visualizer/components/styled/Card.js

define and capture Product Operation Traces along with computed metrics with an optional friendly React beacon API

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CardContent = exports.CardTitle = exports.Card = void 0;
const styled_components_1 = __importDefault(require("styled-components"));
const react_theming_1 = require("@zendeskgarden/react-theming");
exports.Card = styled_components_1.default.div `
  color: ${(props) => (0, react_theming_1.getColor)({ theme: props.theme, variable: 'foreground.subtle' })};
  font-size: ${(props) => props.theme.fontSizes.sm};
  font-family: ${(props) => props.theme.fonts.system};
  padding: ${(props) => props.theme.space.sm};
  border: ${(props) => props.theme.borders.sm};
  border-color: ${(props) => (0, react_theming_1.getColor)({ theme: props.theme, variable: 'border.default' })};
  border-radius: ${(props) => props.theme.borderRadii.md};
  margin: ${(props) => props.theme.space.xs};
  background-color: ${(props) => (0, react_theming_1.getColor)({ theme: props.theme, variable: 'background.default' })};
`;
exports.CardTitle = styled_components_1.default.div `
  font-size: ${(props) => props.theme.fontSizes.md};
  margin-bottom: ${(props) => props.theme.space.sm};
  font-weight: ${(props) => props.theme.fontWeights.light};
  color: ${(props) => (0, react_theming_1.getColor)({ theme: props.theme, variable: 'foreground.default' })};
`;
exports.CardContent = styled_components_1.default.div `
  min-width: ${(props) => props.minWidth ?? 'auto'};
  max-height: ${(props) => props.maxHeight};
  overflow-y: ${(props) => props.overflowY ?? 'visible'};
`;
//# sourceMappingURL=Card.js.map