@entur/typography 1.9.13 → 1.10.0-beta.10

package/README.md

@@ -7,18 +7,115 @@ Entur's official font is Nationale and is created by Playtype Foundry, located i
 This package contains styles and React components for all of our typography.
 
 > 💡 Looking for the [documentation](https://linje.entur.no/komponenter/ressurser/typography)?
+> Looking for the beta [documentation](https://linje.entur.no/komponenter/ressurser/typography-beta)?
 
 ## Installation
 
-```sh
+```bash
 npm install @entur/typography
-# or if you are using Yarn:
+# or
 yarn add @entur/typography
 ```
 
-## Usage
+## 🚀 Quick Start
 
-Please refer to the [documentation](https://linje.entur.no/komponenter/ressurser/typography) for usage information.
+### Using Beta Typography (Recommended)
+
+```typescript
+import { Heading, Text, LinkBeta } from '@entur/typography';
+
+function MyComponent() {
+  return (
+    <div>
+      <Heading as="h1" variant="title-1">
+        My Title
+      </Heading>
+      <Text variant="paragraph">My content</Text>
+      <LinkBeta href="/more">Learn more</LinkBeta>
+    </div>
+  );
+}
+```
+
+### Using Legacy Typography
+
+```typescript
+import { Heading1, Paragraph, Link } from '@entur/typography';
+
+function MyComponent() {
+  return (
+    <div>
+      <Heading1>My Title</Heading1>
+      <Paragraph>My content</Paragraph>
+      <Link href="/more">Learn more</Link>
+    </div>
+  );
+}
+```
+
+## 🔄 Migration
+
+**Migrating from legacy typography?** We've created a comprehensive migration package to help you transition smoothly. Follow our migration guide in our website.
+
+- 🔧 **Migration Helpers** - Drop-in replacements for legacy components
+- 🤖 **Migration Script** - Automated migration tool
+
+### Quick Migration
+
+```bash
+# Option 1: Using npx (recommended)
+npx @entur/typography@latest migrate
+
+# Option 2: With specific options
+npx @entur/typography@latest migrate --dry-run
+
+
+# Option 3: From installed package
+npm install @entur/typography@latest
+npx @entur/typography@latest migrate
+
+# Option 4: Add to your package.json scripts
+# "scripts": { "migrate-typography": "npx @entur/typography@latest migrate" }
+# Then run: npm run migrate-typography -- --dry-run
+```
+
+**Note**: The migration script requires `glob` to be available. If you encounter an error, install it:
+
+```bash
+npm install glob
+# or
+yarn add glob
+```
+
+### Migration Mode
+
+- **🚀 Complete Migration**: Updates imports + component usage
+
+### Update Styles
+
+```scss
+// Replace this
+@import '@entur/typography/dist/styles.css';
+
+// With this
+@import '@entur/typography/src/beta/styles.scss';
+```
+
+## 🎨 Features
+
+### Beta Typography
+
+- **Semantic variants** - Title, subtitle, section, paragraph, etc.
+- **Size variants** - Extra large, large, medium, small, extra small
+- **Weight variants** - Light, regular, medium, semibold, bold
+- **Spacing options** - Configurable margins and padding
+- **Accessibility** - Built-in ARIA support and semantic HTML
+
+### Legacy Typography
+
+- **Individual components** - Heading1-6, Paragraph, Link, etc.
+- **Simple API** - Easy to use with minimal configuration
+- **Backward compatibility** - Existing code continues to work
 
 ## Licenses
 

package/dist/BaseHeading.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { PolymorphicComponentProps } from '@entur/utils';
+type BaseHeadingOwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres */
+    as: string | React.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: React.ReactNode;
+    /** Hvor du vil ha marginer */
+    margin: 'top' | 'bottom' | 'both' | 'none';
+    /** Nivået på overskriften  */
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+};
+declare const defaultElement = "h1";
+export type BaseHeadingProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, BaseHeadingOwnProps>;
+export declare const BaseHeading: <E extends React.ElementType = "h1">({ className, level, margin, as, ...rest }: BaseHeadingProps<E>) => JSX.Element;
+export {};

package/dist/Blockquote.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type BlockquoteProps = {
+    /** Ekstra klassenavn */
+    className?: string;
+} & React.DetailedHTMLProps<React.BlockquoteHTMLAttributes<HTMLElement>, HTMLQuoteElement>;
+export declare const Blockquote: ({ className, ref, ...rest }: BlockquoteProps) => React.JSX.Element;
+type BlockquoteFooterProps = {
+    /** Ekstra klassenavn */
+    className?: string;
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+export declare const BlockquoteFooter: React.FunctionComponent<BlockquoteFooterProps>;
+export {};

package/dist/CodeText.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { PolymorphicComponentProps } from '@entur/utils';
+export type CodeTextOwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "code"
+     */
+    as?: string | React.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: React.ReactNode;
+};
+export type CodeTextProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, CodeTextOwnProps>;
+declare const defaultElement = "code";
+export declare const CodeText: <E extends React.ElementType = "code">({ className, as, ...rest }: CodeTextProps<E>) => JSX.Element;
+export {};

package/dist/EmphasizedText.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PolymorphicComponentProps } from '@entur/utils';
+export type EmphasizedTextOwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "em"
+     */
+    as?: string | React.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: React.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "both"
+     */
+    margin?: 'top' | 'bottom' | 'both' | 'none';
+};
+export type EmphasizedTextProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, EmphasizedTextOwnProps>;
+declare const defaultElement = "em";
+export declare const EmphasizedText: <E extends React.ElementType = "em">({ className, margin, as, ...rest }: EmphasizedTextProps<E>) => JSX.Element;
+export {};

package/dist/Heading1.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PolymorphicComponentProps } from '@entur/utils';
+export type Heading1OwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "h1"
+     */
+    as?: string | React.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: React.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "both"
+     */
+    margin?: 'top' | 'bottom' | 'both' | 'none';
+};
+declare const defaultElement = "h1";
+export type Heading1Props<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, Heading1OwnProps>;
+export declare const Heading1: <E extends React.ElementType = "h1">({ margin, children, as, ...rest }: Heading1Props<E>) => JSX.Element;
+export {};

package/dist/Heading2.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PolymorphicComponentProps } from '@entur/utils';
+export type Heading2OwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "h2"
+     */
+    as?: string | React.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: React.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "both"
+     */
+    margin?: 'top' | 'bottom' | 'both' | 'none';
+};
+export type Heading2Props<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, Heading2OwnProps>;
+declare const defaultElement = "h2";
+export declare const Heading2: <E extends React.ElementType = "h2">({ margin, children, as, ...rest }: Heading2Props<E>) => JSX.Element;
+export {};

package/dist/Heading3.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PolymorphicComponentProps } from '@entur/utils';
+export type Heading3OwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "h3"
+     */
+    as?: string | React.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: React.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "both"
+     */
+    margin?: 'top' | 'bottom' | 'both' | 'none';
+};
+export type Heading3Props<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, Heading3OwnProps>;
+declare const defaultElement = "h3";
+export declare const Heading3: <E extends React.ElementType = "h3">({ margin, children, as, ...rest }: Heading3Props<E>) => JSX.Element;
+export {};

package/dist/Heading4.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PolymorphicComponentProps } from '@entur/utils';
+export type Heading4OwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "h4"
+     */
+    as?: string | React.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: React.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "both"
+     */
+    margin?: 'top' | 'bottom' | 'both' | 'none';
+};
+export type Heading4Props<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, Heading4OwnProps>;
+declare const defaultElement = "h4";
+export declare const Heading4: <E extends React.ElementType = "h4">({ margin, children, as, ...rest }: Heading4Props<E>) => JSX.Element;
+export {};

package/dist/Heading5.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PolymorphicComponentProps } from '@entur/utils';
+export type Heading5OwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "h5"
+     */
+    as?: string | React.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: React.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "both"
+     */
+    margin?: 'top' | 'bottom' | 'both' | 'none';
+};
+export type Heading5Props<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, Heading5OwnProps>;
+declare const defaultElement = "h5";
+export declare const Heading5: <E extends React.ElementType = "h5">({ margin, children, as, ...rest }: Heading5Props<E>) => JSX.Element;
+export {};

package/dist/Heading6.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PolymorphicComponentProps } from '@entur/utils';
+export type Heading6OwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "h6"
+     */
+    as?: string | React.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: React.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "both"
+     */
+    margin?: 'top' | 'bottom' | 'both' | 'none';
+};
+export type Heading6Props<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, Heading6OwnProps>;
+declare const defaultElement = "h6";
+export declare const Heading6: <E extends React.ElementType = "h6">({ margin, children, as, ...rest }: Heading6Props<E>) => JSX.Element;
+export {};

package/dist/Label.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PolymorphicComponentProps } from '@entur/utils';
+export type LabelOwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "label"
+     */
+    as?: string | React.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: React.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "both"
+     */
+    margin?: 'top' | 'bottom' | 'both' | 'none';
+};
+export type LabelProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, LabelOwnProps>;
+declare const defaultElement = "label";
+export declare const Label: <E extends React.ElementType = "label">({ className, margin, as, ...rest }: LabelProps<E>) => JSX.Element;
+export {};

package/dist/LeadParagraph.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PolymorphicComponentProps } from '@entur/utils';
+export type LeadParagraphOwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "p"
+     */
+    as?: string | React.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: React.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "both"
+     */
+    margin?: 'top' | 'bottom' | 'both' | 'none';
+};
+export type LeadParagraphProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, LeadParagraphOwnProps>;
+declare const defaultElement = "p";
+export declare const LeadParagraph: <E extends React.ElementType = "p">({ className, margin, as, ...rest }: LeadParagraphProps<E>) => JSX.Element;
+export {};

package/dist/Link.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { PolymorphicComponentProps } from '@entur/utils';
+export type LinkOwnProps = {
+    external?: boolean;
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "a"
+     */
+    as?: string | React.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: React.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "both"
+     */
+    margin?: 'top' | 'bottom' | 'both' | 'none';
+    ariaLabelExternalIcon?: string;
+};
+export type LinkProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, LinkOwnProps>;
+declare const defaultElement = "a";
+export declare const Link: <E extends React.ElementType = "a">({ external, ariaLabelExternalIcon, className, margin, children, as, ...rest }: LinkProps<E>) => JSX.Element;
+export {};

package/dist/ListItem.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export type ListItemProps = {
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: React.ReactNode;
+    /** Tittel */
+    title?: React.ReactNode;
+    [key: string]: any;
+};
+export declare const ListItem: React.FC<ListItemProps>;

package/dist/NumberedList.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type NumberedListProps = {
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: React.ReactNode;
+} & React.OlHTMLAttributes<HTMLOListElement>;
+export declare const NumberedList: React.FC<NumberedListProps>;

package/dist/Paragraph.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PolymorphicComponentProps } from '@entur/utils';
+export type ParagraphOwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "p"
+     */
+    as?: string | React.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: React.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "bottom"
+     */
+    margin?: 'bottom' | 'none';
+};
+export type ParagraphProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, ParagraphOwnProps>;
+declare const defaultElement = "p";
+export declare const Paragraph: <E extends React.ElementType = "p">({ margin, className, as, ...rest }: ParagraphProps<E>) => JSX.Element;
+export {};

package/dist/PreformattedText.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { PolymorphicComponentProps } from '@entur/utils';
+export type PreformattedTextOwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "pre"
+     */
+    as?: string | React.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: React.ReactNode;
+};
+export type PreformattedTextProps<T extends React.ElementType> = PolymorphicComponentProps<T, PreformattedTextOwnProps>;
+declare const defaultElement = "pre";
+export declare const PreformattedText: <E extends React.ElementType = "pre">({ className, as, ...rest }: PreformattedTextProps<E>) => JSX.Element;
+export {};

package/dist/SmallText.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PolymorphicComponentProps } from '@entur/utils';
+export type SmallTextOwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "span"
+     */
+    as?: string | React.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: React.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "both"
+     */
+    margin?: 'top' | 'bottom' | 'both' | 'none';
+};
+export type SmallTextProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, SmallTextOwnProps>;
+declare const defaultElement = "span";
+export declare const SmallText: <E extends React.ElementType = "span">({ className, margin, as, ...rest }: SmallTextProps<E>) => JSX.Element;
+export {};

package/dist/StrongText.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PolymorphicComponentProps } from '@entur/utils';
+export type StrongTextOwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "strong"
+     */
+    as?: string | React.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: React.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "both"
+     */
+    margin?: 'top' | 'bottom' | 'both' | 'none';
+};
+export type StrongTextProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, StrongTextOwnProps>;
+declare const defaultElement = "strong";
+export declare const StrongText: <E extends React.ElementType = "strong">({ className, margin, as, ...rest }: StrongTextProps<E>) => JSX.Element;
+export {};

package/dist/SubLabel.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PolymorphicComponentProps } from '@entur/utils';
+export type SubLabelOwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "span"
+     */
+    as?: string | React.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: React.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "both"
+     */
+    margin?: 'top' | 'bottom' | 'both' | 'none';
+};
+export type SubLabelProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, SubLabelOwnProps>;
+declare const defaultElement = "span";
+export declare const SubLabel: <E extends React.ElementType = "span">({ className, margin, as, ...rest }: SubLabelProps<E>) => JSX.Element;
+export {};

package/dist/SubParagraph.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PolymorphicComponentProps } from '@entur/utils';
+export type SubParagraphOwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "p"
+     */
+    as?: string | React.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: React.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "both"
+     */
+    margin?: 'top' | 'bottom' | 'both' | 'none';
+};
+export type SubParagraphProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, SubParagraphOwnProps>;
+declare const defaultElement = "p";
+export declare const SubParagraph: <E extends React.ElementType = "p">({ className, margin, as, ...rest }: SubParagraphProps<E>) => JSX.Element;
+export {};

package/dist/UnorderedList.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type UnorderedListProps = {
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: React.ReactNode;
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>;
+export declare const UnorderedList: React.FC<UnorderedListProps>;

package/dist/beta/BlockquoteBeta.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export type BlockquotePropsBeta = {
+    /** Ekstra klassenavn */
+    className?: string;
+} & React.DetailedHTMLProps<React.BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>;
+export declare const BlockquoteBeta: ({ className, ...rest }: BlockquotePropsBeta) => React.JSX.Element;
+type BlockquoteFooterPropsBeta = {
+    /** Ekstra klassenavn */
+    className?: string;
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+export declare const BlockquoteFooterBeta: ({ className, ...rest }: BlockquoteFooterPropsBeta) => React.JSX.Element;
+export {};

package/dist/beta/Heading.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { TypographyHeadingVariant, TypographySize, TypographySpacing } from './types';
+import { PolymorphicComponentProps } from '@entur/utils';
+import './styles.scss';
+type HeadingBaseProps = {
+    /** Visuell variant som bestemmer styling (anbefalt over size) */
+    variant?: TypographyHeadingVariant;
+    /** Visuell tekststørrelse som overstyrer variant-styling */
+    size?: TypographySize;
+    /** Innholdet som skal vises */
+    children: React.ReactNode;
+    /** Ekstra klassenavn for tilpasset styling */
+    className?: string;
+    /** Inline CSS-stiler */
+    style?: React.CSSProperties;
+    /** Spacing around the component */
+    spacing?: TypographySpacing;
+};
+export type HeadingProps<C extends React.ElementType> = PolymorphicComponentProps<C, HeadingBaseProps>;
+export declare const Heading: <C extends React.ElementType = "h1">({ children, as, size, variant, spacing, className, ...rest }: HeadingProps<C>) => React.JSX.Element;
+export {};

package/dist/beta/LinkBeta.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { PolymorphicComponentProps } from '@entur/utils';
+import { TypographySpacing } from './types';
+type LinkBaseProps = {
+    external?: boolean;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: React.ReactNode;
+    /** Spacing around the component (same as Text and Heading components) */
+    spacing?: TypographySpacing;
+    ariaLabelExternalIcon?: string;
+};
+export type LinkPropsBeta<C extends React.ElementType> = PolymorphicComponentProps<C, LinkBaseProps>;
+export declare const LinkBeta: <C extends React.ElementType = "a">({ external, ariaLabelExternalIcon, className, spacing, children, as, ...rest }: LinkPropsBeta<C>) => JSX.Element;
+export {};

package/dist/beta/Text.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import './styles.scss';
+import { TypographySize, TypographyTextVariant, TypographyWeight, TypographySpacing } from './types';
+import { PolymorphicComponentProps } from '@entur/utils';
+type TextBaseProps = {
+    /** Visuell tekststørrelse (typografi-token) */
+    size?: TypographySize;
+    /** Fontvekt */
+    weight?: TypographyWeight;
+    /** Variant (kan brukes til spesielle typer tekst som for eksempel caption) */
+    variant?: TypographyTextVariant;
+    /** Innhold */
+    children: React.ReactNode;
+    /** Spacing around the component */
+    spacing?: TypographySpacing;
+    /** Ekstra klassenavn */
+    className?: string;
+};
+export type TextProps<C extends React.ElementType> = PolymorphicComponentProps<C, TextBaseProps>;
+export declare const Text: <C extends React.ElementType = "p">({ children, as, size, variant, weight, spacing, className, ...rest }: TextProps<C>) => React.JSX.Element;
+export {};

package/dist/beta/index.d.ts

@@ -0,0 +1,6 @@
+export { Heading } from './Heading';
+export { Text } from './Text';
+export { LinkBeta } from './LinkBeta';
+export { BlockquoteBeta, BlockquoteFooterBeta } from './BlockquoteBeta';
+export { getHeadingVariantFromSemanticType, getSpacingClasses } from './utils';
+export type { TypographyHeadingVariant, TypographyTextVariant, TypographySize, TypographyWeight, TypographySpacing, } from './types';

package/dist/beta/types.d.ts

@@ -0,0 +1,5 @@
+export type TypographyHeadingVariant = 'title-1' | 'title-2' | 'subtitle-1' | 'subtitle-2' | 'section-1' | 'section-2' | 'label' | 'sublabel';
+export type TypographyTextVariant = 'leading' | 'quote' | 'paragraph' | 'subparagraph' | 'caption' | 'link' | 'label' | 'sublabel' | 'overline' | 'emphasized' | 'code-text' | 'preformatted-text';
+export type TypographySize = 'xs' | 's' | 'm' | 'lg' | 'xl' | '2xl';
+export type TypographyWeight = 'regular' | 'medium' | 'semibold' | 'bold' | '400' | '500' | '600' | '700';
+export type TypographySpacing = 'none' | 'xs2' | 'xs2-top' | 'xs2-bottom' | 'xs' | 'xs-top' | 'xs-bottom' | 'sm' | 'sm-top' | 'sm-bottom' | 'md' | 'md-top' | 'md-bottom' | 'lg' | 'lg-top' | 'lg-bottom' | 'xl' | 'xl-top' | 'xl-bottom';

package/dist/beta/utils.d.ts

@@ -0,0 +1,10 @@
+import { TypographySpacing, TypographyTextVariant } from './types';
+export declare function getHeadingVariantFromSemanticType(semanticType: string | React.ElementType): "title-1" | "title-2" | "subtitle-1" | "subtitle-2" | "paragraph";
+export declare function getSemanticTypeFromTextVariant(variant?: TypographyTextVariant): React.ElementType;
+/**
+ * Generates spacing class names for typography components
+ * @param spacing - The spacing value from TypographySpacing
+ * @param componentPrefix - The CSS class prefix (e.g., 'eds-heading', 'eds-text')
+ * @returns Object with class names for the spacing prop
+ */
+export declare function getSpacingClasses(spacing: TypographySpacing | undefined, componentPrefix: string): Record<string, boolean> | undefined;