@navinc/base-react-components/cjs/plans-table.js

Nav's Pattern Library

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.PlansTable = exports.StyledHR = exports.MissingFeatureIcon = exports.FeatureIcon = exports.FeatureName = void 0;
const styled_components_1 = __importDefault(require("styled-components"));
const copy_1 = __importDefault(require("./copy"));
const icon_js_1 = __importDefault(require("./icon.js"));
const PlanTableIcon = (0, styled_components_1.default)(copy_1.default) `
  text-align: center;
`;
exports.FeatureName = (0, styled_components_1.default)(copy_1.default) ``;
exports.FeatureIcon = (0, styled_components_1.default)(PlanTableIcon) `
  & > ${icon_js_1.default} {
    fill: ${({ theme }) => theme.greenSheen400};
  }
`;
exports.MissingFeatureIcon = (0, styled_components_1.default)(PlanTableIcon) `
  & > ${icon_js_1.default} {
    fill: ${({ theme }) => theme.copperRed200};
  }
`;
exports.StyledHR = styled_components_1.default.hr `
  border-top: 1px solid ${({ theme }) => theme.neutral200};
`;
exports.PlansTable = styled_components_1.default.div `
  display: grid;
  grid-template-columns: 3fr 1fr;
  align-items: flex-end;
  margin: 24px 0;

  & > ${exports.StyledHR} {
    grid-column: 1 / -1;
  }

  & > ${exports.FeatureIcon}, ${exports.FeatureName}, ${exports.MissingFeatureIcon} {
    border-top: 1px solid ${({ theme }) => theme.neutral200};
    align-self: flex-start;
  }

  & > ${exports.FeatureIcon}, ${exports.FeatureName}, ${exports.MissingFeatureIcon} {
    padding: 16px 0;
  }
`;
exports.PlansTable.Divider = exports.StyledHR;
exports.PlansTable.FeatureIcon = exports.FeatureIcon;
exports.PlansTable.MissingFeatureIcon = exports.MissingFeatureIcon;
exports.PlansTable.FeatureName = exports.FeatureName;
exports.default = exports.PlansTable;
//# sourceMappingURL=plans-table.js.map