@octopusdeploy/design-system-components/dist/src/components/Paragraph/Paragraph.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Paragraph = Paragraph;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
// Named size aliases mapped to the design-system `text.body.regular` typography tokens.
const paragraphStyles = {
    large: (0, css_1.css)({ margin: 0, font: design_system_tokens_1.text.body.regular.large }),
    medium: (0, css_1.css)({ margin: 0, font: design_system_tokens_1.text.body.regular.medium }),
    small: (0, css_1.css)({ margin: 0, font: design_system_tokens_1.text.body.regular.small }),
    xSmall: (0, css_1.css)({ margin: 0, font: design_system_tokens_1.text.body.regular.xSmall }),
};
// Named colour aliases applied on top of the size class. `primary`/`secondary` use the generic
// theme-aware text tokens
const colorStyles = {
    primary: (0, css_1.css)({ color: design_system_tokens_1.themeTokens.color.text.primary }),
    secondary: (0, css_1.css)({ color: design_system_tokens_1.themeTokens.color.text.secondary }),
};
/**
 * Paragraph is a wrapper around a `<p>` element that removes the browser's default
 * margins and applies the design system's body typography. Use it for blocks of body
 * text where you want consistent styling without the user agent's built-in spacing.
 *
 * Spacing between paragraphs should be handled by the parent layout (e.g. a `Stack`),
 * not by the paragraph's own margins.
 *
 * @param props - The props for the paragraph. See {@link ParagraphProps}.
 * @param props.children - The content of the paragraph. Can be any valid React node.
 * @param props.size - The body typography size to apply.
 * - `large`: 1rem (16px), line height 1.5rem (24px)
 * - `medium`: 0.875rem (14px), line height 1.25rem (20px)
 * - `small`: 0.8125rem (13px), line height 1.25rem (20px)
 * - `xSmall`: 0.75rem (12px), line height 1.25rem (20px)
 * @param props.color - The text colour to apply.
 * @returns A `<p>` element with zeroed margins and design system body typography.
 */
function Paragraph({ children, size = "medium", color }) {
    return (0, jsx_runtime_1.jsx)("p", { className: (0, css_1.cx)(paragraphStyles[size], color && colorStyles[color]), children: children });
}