@pushwoosh/kit-typography 1.8.1 → 1.8.3

package/code/code.component.d.ts

@@ -1,2 +1,3 @@
 import { type CodeProps } from './code.types';
+/** Monospaced text block — renders `<div>` with the `code` typography variant. */
 export declare function Code(props: CodeProps): JSX.Element;

package/code/code.component.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CodeBox } from './code.styles';
+/** Monospaced text block — renders `<div>` with the `code` typography variant. */
 export function Code(props) {
   const {
     boxRef,

package/code/code.styles.d.ts

@@ -1 +1,2 @@
+/** Styled `<div>` behind {@link Code}; use it when you need to extend the styles. */
 export declare const CodeBox: import("styled-components").StyledComponent<"div", any, {}, never>;

package/code/code.styles.js

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { variants } from '../map';
+/** Styled `<div>` behind {@link Code}; use it when you need to extend the styles. */
 export const CodeBox = styled.div.withConfig({
   displayName: "CodeBox",
   componentId: "sc-15hd43f-0"

package/code/code.types.d.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+/** Props of {@link Code}: every `<div>` attribute plus `boxRef` — `ref` is taken by the wrapper. */
 export type CodeProps = Omit<JSX.IntrinsicElements['div'], 'ref'> & {
     readonly boxRef?: React.Ref<HTMLDivElement>;
     readonly children: React.ReactNode;

package/footnote/footnote.component.d.ts

@@ -1,2 +1,3 @@
 import { type FootnoteProps } from './footnote.types';
+/** Small secondary text — renders `<div>` with the `footnote` typography variant. */
 export declare function Footnote(props: FootnoteProps): JSX.Element;

package/footnote/footnote.component.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FootnoteBox } from './footnote.styles';
+/** Small secondary text — renders `<div>` with the `footnote` typography variant. */
 export function Footnote(props) {
   const {
     boxRef,

package/footnote/footnote.styles.d.ts

@@ -1 +1,2 @@
+/** Styled `<div>` behind {@link Footnote}; use it when you need to extend the styles. */
 export declare const FootnoteBox: import("styled-components").StyledComponent<"div", any, {}, never>;

package/footnote/footnote.styles.js

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { variants } from '../map';
+/** Styled `<div>` behind {@link Footnote}; use it when you need to extend the styles. */
 export const FootnoteBox = styled.div.withConfig({
   displayName: "FootnoteBox",
   componentId: "sc-1yebxfg-0"

package/footnote/footnote.types.d.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+/** Props of {@link Footnote}: every `<div>` attribute plus `boxRef` — `ref` is taken by the wrapper. */
 export type FootnoteProps = Omit<JSX.IntrinsicElements['div'], 'ref'> & {
     readonly boxRef?: React.Ref<HTMLDivElement>;
     readonly children: React.ReactNode;

package/global-styles/global-styles.component.d.ts

@@ -1 +1,5 @@
+/**
+ * App-wide baseline, mounted once at the app root: border-box sizing, body typography and link colours
+ * from the kit tokens, antialiased smoothing, and a cleared focus outline on `button` and `a`.
+ */
 export declare const GlobalStyles: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;

package/global-styles/global-styles.component.js

@@ -1,4 +1,8 @@
 import { createGlobalStyle } from 'styled-components';
 import { Color, FontFamily, FontSize, FontWeight, LineHeight } from '@pushwoosh/kit-constants';
+/**
+ * App-wide baseline, mounted once at the app root: border-box sizing, body typography and link colours
+ * from the kit tokens, antialiased smoothing, and a cleared focus outline on `button` and `a`.
+ */
 export const GlobalStyles = createGlobalStyle(["*,*::before,*::after{box-sizing:border-box;}body{color:", ";font-family:", ";font-size:", ";font-weight:", ";line-height:", ";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}a{color:", ";text-decoration:none;&:hover{color:", ";text-decoration:underline;}}button,a{&:focus{outline:none;}}"], Color.MAIN, FontFamily.MAIN, FontSize.REGULAR, FontWeight.REGULAR, LineHeight.REGULAR, Color.PRIMARY, Color.PRIMARY_HOVER);
 GlobalStyles.displayName = 'GlobalStyles';

package/h1/h1.component.d.ts

@@ -1,2 +1,3 @@
 import { type H1Props } from './h1.types';
+/** Page title — renders `<h1>` with the `h1` typography variant. */
 export declare function H1(props: H1Props): JSX.Element;

package/h1/h1.component.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { H1Box } from './h1.styles';
+/** Page title — renders `<h1>` with the `h1` typography variant. */
 export function H1(props) {
   const {
     boxRef,

package/h1/h1.styles.d.ts

@@ -1 +1,2 @@
+/** Styled `<h1>` behind {@link H1}; use it when you need to extend the styles. */
 export declare const H1Box: import("styled-components").StyledComponent<"h1", any, {}, never>;

package/h1/h1.styles.js

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { variants } from '../map';
+/** Styled `<h1>` behind {@link H1}; use it when you need to extend the styles. */
 export const H1Box = styled.h1.withConfig({
   displayName: "H1Box",
   componentId: "sc-nenzzw-0"

package/h1/h1.types.d.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+/** Props of {@link H1}: every `<h1>` attribute plus `boxRef` — `ref` is taken by the wrapper. */
 export type H1Props = Omit<JSX.IntrinsicElements['h1'], 'ref'> & {
     readonly boxRef?: React.Ref<HTMLHeadingElement>;
     readonly children: React.ReactNode;

package/h2/h2.component.d.ts

@@ -1,2 +1,3 @@
 import { type H2Props } from './h2.types';
+/** Section heading — renders `<h2>` with the `h2` typography variant. */
 export declare function H2(props: H2Props): JSX.Element;

package/h2/h2.component.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { H2Box } from './h2.styles';
+/** Section heading — renders `<h2>` with the `h2` typography variant. */
 export function H2(props) {
   const {
     boxRef,

package/h2/h2.styles.d.ts

@@ -1 +1,2 @@
+/** Styled `<h2>` behind {@link H2}; use it when you need to extend the styles. */
 export declare const H2Box: import("styled-components").StyledComponent<"h2", any, {}, never>;

package/h2/h2.styles.js

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { variants } from '../map';
+/** Styled `<h2>` behind {@link H2}; use it when you need to extend the styles. */
 export const H2Box = styled.h2.withConfig({
   displayName: "H2Box",
   componentId: "sc-ev7pmn-0"

package/h2/h2.types.d.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+/** Props of {@link H2}: every `<h2>` attribute plus `boxRef` — `ref` is taken by the wrapper. */
 export type H2Props = Omit<JSX.IntrinsicElements['h2'], 'ref'> & {
     readonly boxRef?: React.Ref<HTMLHeadingElement>;
     readonly children: React.ReactNode;

package/h3/h3.component.d.ts

@@ -1,2 +1,3 @@
 import { type H3Props } from './h3.types';
+/** Sub-section heading — renders `<h3>` with the `h3` typography variant. */
 export declare function H3(props: H3Props): JSX.Element;

package/h3/h3.component.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { H3Box } from './h3.styles';
+/** Sub-section heading — renders `<h3>` with the `h3` typography variant. */
 export function H3(props) {
   const {
     boxRef,

package/h3/h3.styles.d.ts

@@ -1 +1,2 @@
+/** Styled `<h3>` behind {@link H3}; use it when you need to extend the styles. */
 export declare const H3Box: import("styled-components").StyledComponent<"h3", any, {}, never>;

package/h3/h3.styles.js

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { variants } from '../map';
+/** Styled `<h3>` behind {@link H3}; use it when you need to extend the styles. */
 export const H3Box = styled.h3.withConfig({
   displayName: "H3Box",
   componentId: "sc-mhts3r-0"

package/h3/h3.types.d.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+/** Props of {@link H3}: every `<h3>` attribute plus `boxRef` — `ref` is taken by the wrapper. */
 export type H3Props = Omit<JSX.IntrinsicElements['h3'], 'ref'> & {
     readonly boxRef?: React.Ref<HTMLHeadingElement>;
     readonly children: React.ReactNode;

package/h4/h4.component.d.ts

@@ -1,2 +1,3 @@
 import { type H4Props } from './h4.types';
+/** Small heading — renders `<h4>` with the `h4` typography variant. */
 export declare function H4(props: H4Props): JSX.Element;

package/h4/h4.component.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { H4Box } from './h4.styles';
+/** Small heading — renders `<h4>` with the `h4` typography variant. */
 export function H4(props) {
   const {
     boxRef,

package/h4/h4.styles.d.ts

@@ -1 +1,2 @@
+/** Styled `<h4>` behind {@link H4}; use it when you need to extend the styles. */
 export declare const H4Box: import("styled-components").StyledComponent<"h4", any, {}, never>;

package/h4/h4.styles.js

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { variants } from '../map';
+/** Styled `<h4>` behind {@link H4}; use it when you need to extend the styles. */
 export const H4Box = styled.h4.withConfig({
   displayName: "H4Box",
   componentId: "sc-1178dfn-0"

package/h4/h4.types.d.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+/** Props of {@link H4}: every `<h4>` attribute plus `boxRef` — `ref` is taken by the wrapper. */
 export type H4Props = Omit<JSX.IntrinsicElements['h4'], 'ref'> & {
     readonly boxRef?: React.Ref<HTMLHeadingElement>;
     readonly children: React.ReactNode;

package/h5/h5.component.d.ts

@@ -1,2 +1,3 @@
 import { type H5Props } from './h5.types';
+/** Smallest heading, rendered uppercase — renders `<h5>` with the `h5` typography variant. */
 export declare function H5(props: H5Props): JSX.Element;

package/h5/h5.component.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { H5Box } from './h5.styles';
+/** Smallest heading, rendered uppercase — renders `<h5>` with the `h5` typography variant. */
 export function H5(props) {
   const {
     boxRef,

package/h5/h5.styles.d.ts

@@ -1 +1,2 @@
+/** Styled `<h5>` behind {@link H5}; use it when you need to extend the styles. */
 export declare const H5Box: import("styled-components").StyledComponent<"h5", any, {}, never>;

package/h5/h5.styles.js

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { variants } from '../map';
+/** Styled `<h5>` behind {@link H5}; use it when you need to extend the styles. */
 export const H5Box = styled.h5.withConfig({
   displayName: "H5Box",
   componentId: "sc-1nc3vby-0"

package/h5/h5.types.d.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+/** Props of {@link H5}: every `<h5>` attribute plus `boxRef` — `ref` is taken by the wrapper. */
 export type H5Props = Omit<JSX.IntrinsicElements['h5'], 'ref'> & {
     readonly boxRef?: React.Ref<HTMLHeadingElement>;
     readonly children: React.ReactNode;

package/map.d.ts

@@ -1,3 +1,21 @@
 import { type FlattenSimpleInterpolation } from 'styled-components';
-export type TypographyVariant = 'standard' | 'footnote' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'code';
+/** Name of a typography variant — the `$variant` prop of {@link Text} and the keys of {@link variants}. */
+export type TypographyVariant = 
+/** Body text. */
+'standard'
+/** Small secondary text: captions, hints, legends. */
+ | 'footnote'
+/** Page title. */
+ | 'h1'
+/** Section heading. */
+ | 'h2'
+/** Sub-section heading. */
+ | 'h3'
+/** Small heading. */
+ | 'h4'
+/** Smallest heading; `H5` also uppercases it, the variant alone does not. */
+ | 'h5'
+/** Monospaced text: code, ids, tokens. */
+ | 'code';
+/** Font family/size/weight/line-height per variant, as a styled-components interpolation; values come from `@pushwoosh/kit-constants`. */
 export declare const variants: Record<TypographyVariant, FlattenSimpleInterpolation>;

package/map.js

@@ -1,5 +1,6 @@
 import { css } from 'styled-components';
 import { FontFamily, FontSize, LineHeight, FontWeight } from '@pushwoosh/kit-constants';
+/** Font family/size/weight/line-height per variant, as a styled-components interpolation; values come from `@pushwoosh/kit-constants`. */
 export const variants = {
   standard: css(["font-family:", ";font-size:", ";font-weight:", ";line-height:", ";"], FontFamily.MAIN, FontSize.REGULAR, FontWeight.REGULAR, LineHeight.REGULAR),
   footnote: css(["font-family:", ";font-size:", ";font-weight:", ";line-height:", ";"], FontFamily.MAIN, FontSize.SMALL, FontWeight.REGULAR, LineHeight.SMALL),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/kit-typography",
-  "version": "1.8.1",
+  "version": "1.8.3",
   "description": "React component for build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -11,7 +11,7 @@
   },
   "scripts": {
     "start": "npm run playground",
-    "build": "pushwoosh-engine lib:build && cp ai-documentation.md dist/ai-documentation.md",
+    "build": "pushwoosh-engine lib:build",
     "playground": "pushwoosh-engine lib:playground",
     "check": "npm run check:lint && npm run check:types",
     "check:lint": "echo \"Run check:lint\" && NODE_ENV=production eslint ./src",
@@ -23,7 +23,7 @@
     "@pushwoosh/kit-constants": "^1.6.0"
   },
   "devDependencies": {
-    "@pushwoosh/frontend-builder-engine": "^3.0.0",
+    "@pushwoosh/frontend-builder-engine": "^3.1.0",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "@types/styled-components": "^5.1.34",

package/paragraph/paragraph.component.d.ts

@@ -1,2 +1,3 @@
 import { type ParagraphProps } from './paragraph.types';
+/** Body text — renders `<p>` with the `standard` variant; consecutive paragraphs get a top margin. */
 export declare function Paragraph(props: ParagraphProps): JSX.Element;

package/paragraph/paragraph.component.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ParagraphBox } from './paragraph.styles';
+/** Body text — renders `<p>` with the `standard` variant; consecutive paragraphs get a top margin. */
 export function Paragraph(props) {
   const {
     boxRef,

package/paragraph/paragraph.styles.d.ts

@@ -1 +1,2 @@
+/** Styled `<p>` behind {@link Paragraph}; use it when you need to extend the styles. */
 export declare const ParagraphBox: import("styled-components").StyledComponent<"p", any, {}, never>;

package/paragraph/paragraph.styles.js

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { variants } from '../map';
+/** Styled `<p>` behind {@link Paragraph}; use it when you need to extend the styles. */
 export const ParagraphBox = styled.p.withConfig({
   displayName: "ParagraphBox",
   componentId: "sc-1o1vp14-0"

package/paragraph/paragraph.types.d.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+/** Props of {@link Paragraph}: every `<p>` attribute plus `boxRef` — `ref` is taken by the wrapper. */
 export type ParagraphProps = Omit<JSX.IntrinsicElements['p'], 'ref'> & {
     readonly boxRef?: React.Ref<HTMLParagraphElement>;
     readonly children: React.ReactNode;

package/text/Text.d.ts

@@ -1,4 +1,8 @@
 import { type TypographyVariant } from '../map';
+/**
+ * Inline text in any typography variant: `$variant`, plus `$color`, `$uppercase` and `$ellipsis`.
+ * `$ellipsis` needs a bounded width — it makes the span `inline-block` at `max-width: 100%`.
+ */
 export declare const Text: import("styled-components").StyledComponent<"span", any, {
     $color?: string;
     $uppercase?: boolean;

package/text/Text.js

@@ -1,5 +1,9 @@
 import styled from 'styled-components';
 import { variants } from '../map';
+/**
+ * Inline text in any typography variant: `$variant`, plus `$color`, `$uppercase` and `$ellipsis`.
+ * `$ellipsis` needs a bounded width — it makes the span `inline-block` at `max-width: 100%`.
+ */
 export const Text = styled.span.withConfig({
   displayName: "Text",
   componentId: "sc-s3ssy9-0"

package/ai-documentation.md

@@ -1,243 +0,0 @@
-# @pushwoosh/kit-typography - AI Agent Documentation
-
-## Overview
-React typography component library for Pushwoosh products. Provides styled-components based typography components with consistent design system.
-
-## Installation
-```bash
-npm install @pushwoosh/kit-typography
-```
-
-## Core Dependencies
-- **react**: >= 18.0.0 (peer dependency)
-- **styled-components**: >= 5.3.3 (peer dependency)
-- **@pushwoosh/kit-constants**: Typography constants (fonts, sizes, weights, line-heights, colors)
-
-## Available Components
-
-### Heading Components
-- **H1**: Main page heading (`<h1>`)
-- **H2**: Section heading (`<h2>`)
-- **H3**: Subsection heading (`<h3>`)
-- **H4**: Small heading (`<h4>`)
-- **H5**: Smallest heading (`<h5>`)
-
-All heading components accept:
-- `boxRef`: React ref for the HTML element
-- `children`: React.ReactNode
-- All standard HTML heading attributes
-
-### Text Components
-
-#### Paragraph
-Standard paragraph component (`<p>`)
-```tsx
-import { Paragraph } from '@pushwoosh/kit-typography';
-<Paragraph>Your text content</Paragraph>
-```
-
-#### Footnote
-Small text for footnotes/captions
-```tsx
-import { Footnote } from '@pushwoosh/kit-typography';
-<Footnote>Small text content</Footnote>
-```
-
-#### Code
-Monospace text for code snippets (`<code>`)
-```tsx
-import { Code } from '@pushwoosh/kit-typography';
-<Code>console.log('Hello')</Code>
-```
-
-### Universal Text Component
-
-#### Text
-Flexible styled span component with variant support
-```tsx
-import { Text } from '@pushwoosh/kit-typography';
-
-// Basic usage
-<Text>Default text</Text>
-
-// With variant
-<Text $variant="h1">Large heading text</Text>
-<Text $variant="footnote">Small text</Text>
-<Text $variant="code">Monospace text</Text>
-
-// With props
-<Text $color="#FF0000">Red text</Text>
-<Text $uppercase>UPPERCASE TEXT</Text>
-<Text $ellipsis>Long text with ellipsis...</Text>
-
-// Combined
-<Text $variant="h2" $color="#0066CC" $uppercase>BLUE HEADING</Text>
-```
-
-**Props:**
-- `$variant`: TypographyVariant - style preset ('standard' | 'footnote' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'code')
-- `$color`: string - custom text color
-- `$uppercase`: boolean - transform text to uppercase
-- `$ellipsis`: boolean - add text overflow ellipsis
-
-### Global Styles
-
-Apply consistent typography and base styles across the application:
-```tsx
-import { GlobalStyles } from '@pushwoosh/kit-typography';
-
-// In your app root
-function App() {
-  return (
-    <>
-      <GlobalStyles />
-      {/* Your app components */}
-    </>
-  );
-}
-```
-
-Sets:
-- Box-sizing: border-box for all elements
-- Body typography: main font, regular size/weight
-- Link styles: primary color with hover effects
-- Focus outline removal on buttons/links
-- Font smoothing for better rendering
-
-## Typography Variants
-
-Available through `TypographyVariant` type and used in Text component:
-
-| Variant | Font Family | Size | Weight | Line Height |
-|---------|------------|------|--------|-------------|
-| standard | MAIN | REGULAR | REGULAR | REGULAR |
-| footnote | MAIN | SMALL | REGULAR | SMALL |
-| h1 | MAIN | HEADING1 | BOLD | HEADING1 |
-| h2 | MAIN | HEADING2 | BOLD | HEADING2 |
-| h3 | MAIN | HEADING3 | BOLD | HEADING3 |
-| h4 | MAIN | HEADING4 | MEDIUM | HEADING4 |
-| h5 | MAIN | HEADING5 | MEDIUM | HEADING5 |
-| code | MONO | REGULAR | REGULAR | REGULAR |
-
-## Usage Examples
-
-### Complete page structure
-```tsx
-import { 
-  GlobalStyles, 
-  H1, 
-  H2, 
-  Paragraph, 
-  Text, 
-  Code,
-  Footnote 
-} from '@pushwoosh/kit-typography';
-
-function Page() {
-  return (
-    <>
-      <GlobalStyles />
-      <H1>Page Title</H1>
-      <Paragraph>
-        Introduction paragraph with <Text $color="#0066CC">highlighted</Text> text.
-      </Paragraph>
-      
-      <H2>Section Title</H2>
-      <Paragraph>
-        Section content with <Code>inline code</Code> example.
-      </Paragraph>
-      
-      <Text $variant="h3" $uppercase>SUBSECTION</Text>
-      <Footnote>Note: Additional information</Footnote>
-    </>
-  );
-}
-```
-
-### Dynamic text styling
-```tsx
-import { Text } from '@pushwoosh/kit-typography';
-
-function StatusText({ status, message }) {
-  const color = status === 'error' ? '#FF0000' : '#00AA00';
-  return (
-    <Text 
-      $color={color}
-      $variant={status === 'error' ? 'h4' : 'standard'}
-      $uppercase={status === 'error'}
-    >
-      {message}
-    </Text>
-  );
-}
-```
-
-### Text truncation
-```tsx
-import { Text } from '@pushwoosh/kit-typography';
-
-function UserCard({ userName, userEmail }) {
-  return (
-    <div style={{ width: '200px' }}>
-      <Text $variant="h5">{userName}</Text>
-      <Text $ellipsis $color="#666">{userEmail}</Text>
-    </div>
-  );
-}
-```
-
-## Development Scripts
-
-- `npm start` / `npm run playground`: Start development playground
-- `npm run build`: Build the library
-- `npm run check`: Run linting and type checking
-- `npm run check:lint`: Run ESLint
-- `npm run check:types`: Check TypeScript types
-
-## File Structure
-
-```
-src/
-├── index.tsx           # Main exports
-├── map.ts             # Typography variants configuration
-├── text/
-│   └── Text.ts        # Universal Text component
-├── global-styles/     # Global CSS styles
-├── h1-h5/            # Heading components
-├── paragraph/        # Paragraph component
-├── footnote/         # Footnote component
-└── code/             # Code component
-```
-
-Each component folder contains:
-- `index.tsx`: Component export
-- `[name].component.tsx`: React component
-- `[name].styles.tsx`: Styled-components styles
-- `[name].types.tsx`: TypeScript types
-
-## Best Practices
-
-1. **Always include GlobalStyles** in your app root for consistent base styling
-2. **Use semantic components** (H1, Paragraph) for better HTML structure
-3. **Use Text component** for inline styling needs and dynamic variants
-4. **Leverage $ellipsis** for text truncation in constrained layouts
-5. **Import from package root**: `import { H1, Text } from '@pushwoosh/kit-typography'`
-6. **Maintain hierarchy**: Use heading levels (H1→H2→H3) in proper order
-
-## TypeScript Support
-
-Full TypeScript support with exported types:
-- Component props types for all components
-- `TypographyVariant` type for Text component variants
-- Proper HTML element attribute inheritance
-
-## Integration with Pushwoosh Design System
-
-This library uses `@pushwoosh/kit-constants` for all design tokens:
-- **FontFamily**: MAIN, MONO
-- **FontSize**: SMALL, REGULAR, HEADING1-5
-- **FontWeight**: REGULAR, MEDIUM, BOLD
-- **LineHeight**: SMALL, REGULAR, HEADING1-5
-- **Color**: MAIN, PRIMARY, PRIMARY_HOVER
-
-Ensures consistency across all Pushwoosh products.