@redocly/theme/lib/markdoc/components/Cards/CardIcon.js

Shared UI components lib

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CardIcon = CardIcon;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const GenericIcon_1 = require("../../../icons/GenericIcon/GenericIcon");
function CardIcon({ variant, src, rawContent, position }) {
    return (react_1.default.createElement(CardIconWrapper, { "$variant": variant, "$position": position },
        react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: src, rawContent: rawContent })));
}
const CardIconWrapper = styled_components_1.default.div `
  --icon-width: var(--card-icon-width);
  --icon-height: var(--card-icon-height);
  --icon-color: var(--card-icon-color);

  display: flex;
  align-self: ${({ $position }) => ($position ? $position : 'auto')};
  justify-content: center;
  min-width: var(--card-icon-width);
  min-height: var(--card-icon-height);
  flex-shrink: 0;

  padding: ${({ $variant }) => ($variant === 'ghost' ? '0' : `var(--card-icon-padding);`)};
  border-radius: var(--card-icon-border-radius);
  overflow: hidden;

  background-color: ${({ $variant }) => $variant === 'ghost' ? 'transparent' : 'var(--card-icon-bg-color)'};
  border: ${({ $variant }) => $variant === 'ghost' ? 'none' : `1px solid var(--card-icon-border-color)`};
`;
//# sourceMappingURL=CardIcon.js.map