@hhgtech/hhg-components/build/esm/index-3b8537c3.js

Hello Health Group common components

import { _ as __rest } from './tslib.es6-ea4dfe68.js';
import React__default from 'react';
import styled from '@emotion/styled';
import { theme } from './miscTheme.js';

const Heading = (_a) => {
    var { type } = _a, elementProps = __rest(_a, ["type"]);
    return React__default.createElement(type, elementProps);
};
const StyledHeading = styled(Heading) `
  color: var(--text-color, ${theme.mbColors.dark});
  font-family: Krub;
  font-weight: 600;
  letter-spacing: -0.2px;

  &[data-type='headline-1'] {
    font-size: 40px;
    line-height: 60px;
  }
  &[data-type='headline-2'] {
    font-size: 32px;
    line-height: 48px;
  }
  &[data-type='headline-3'] {
    font-size: 24px;
    line-height: 40px;
  }
  &[data-type='headline-4'] {
    font-size: 18px;
    line-height: 32px;
  }
`;
const StyledText = styled.p `
  color: var(--text-color, ${theme.mbColors.dark});
  letter-spacing: -0.2px;

  &[data-type='subtitle-1'] {
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
  }
  &[data-type='subtitle-2'] {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
  }
  &[data-type='subtitle-3'] {
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
  }
  &[data-type='bodytext-1'] {
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
  }
  &[data-type='bodytext-2'] {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
  }
  &[data-type='bodytext-3'] {
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
  }
  &[data-type='caption-1'] {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: -0.1px;
    line-height: 14px;
  }
  &[data-type='caption-2'] {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: -0.1px;
    line-height: 14px;
  }
`;

const MarryBabyHeading = (_a) => {
    var { type, color, style } = _a, props = __rest(_a, ["type", "color", "style"]);
    const DATATYPE = {
        h1: 'headline-1',
        h2: 'headline-2',
        h3: 'headline-3',
        h4: 'headline-4',
    };
    return (React__default.createElement(StyledHeading, Object.assign({ type: type, "data-type": DATATYPE[type], style: Object.assign(Object.assign({}, (color && { '--text-color': color })), style) }, props)));
};
/**
 * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
 */
const MarryBabyText = (_a) => {
    var { type, color, style } = _a, props = __rest(_a, ["type", "color", "style"]);
    return (React__default.createElement(StyledText, Object.assign({ "data-type": type, style: Object.assign(Object.assign({}, style), (color && { '--text-color': color })) }, props)));
};

export { MarryBabyText as M, MarryBabyHeading as a };