@equinor/eds-core-react 1.0.1 → 1.1.0

package/dist/style.css

@@ -0,0 +1,81 @@
+@property --font-size{inherits:true;initial-value:16px;syntax:"<length>"}.font-heading,.font-ui,[data-font-family]{display:block;margin:0}.font-ui,[data-font-family=ui]{font-family:var(--eds-typography-ui-body-font-family),sans-serif}.font-heading,[data-font-family=header]{font-family:var(--eds-typography-header-font-family),sans-serif}:is(.font-ui,.font-heading),[data-font-family]{&.text-xs,&[data-text-size=xs]{--font-size:var(--_font-size-xs);font-size:var(--font-size)}&.text-sm,&[data-text-size=sm]{--font-size:var(--_font-size-sm);font-size:var(--font-size)}&.text-md,&[data-text-size=md]{--font-size:var(--_font-size-md);font-size:var(--font-size)}&.text-lg,&[data-text-size=lg]{--font-size:var(--_font-size-lg);font-size:var(--font-size)}&.text-xl,&[data-text-size=xl]{--font-size:var(--_font-size-xl);font-size:var(--font-size)}&.text-2xl,&[data-text-size="2xl"]{--font-size:var(--_font-size-2xl);font-size:var(--font-size)}&.text-3xl,&[data-text-size="3xl"]{--font-size:var(--_font-size-3xl);font-size:var(--font-size)}&.text-4xl,&[data-text-size="4xl"]{--font-size:var(--_font-size-4xl);font-size:var(--font-size)}&.text-5xl,&[data-text-size="5xl"]{--font-size:var(--_font-size-5xl);font-size:var(--font-size)}&.text-6xl,&[data-text-size="6xl"]{--font-size:var(--_font-size-6xl);font-size:var(--font-size)}&.line-height-default,&[data-line-height=default]{line-height:var(--_line-height-default)}&.line-height-squished,&[data-line-height=squished]{line-height:var(--_line-height-squished)}&.font-lighter,&[data-font-weight=lighter]{font-weight:var(--_font-weight-lighter)}&.font-normal,&[data-font-weight=normal]{font-weight:var(--_font-weight-normal)}&.font-bolder,&[data-font-weight=bolder]{font-weight:var(--_font-weight-bolder)}&.tracking-tight,&[data-tracking=tight]{letter-spacing:var(--_tracking-tight)}&.tracking-normal,&[data-tracking=normal]{letter-spacing:var(--_tracking-normal)}&.tracking-wide,&[data-tracking=wide]{letter-spacing:var(--_tracking-wide)}}.font-ui,[data-font-family=ui]{&.text-xs,&[data-text-size=xs]{--_font-size-xs:var(--eds-typography-ui-body-xs-font-size);--_line-height-default:var(--eds-typography-ui-body-xs-lineheight-default);--_line-height-squished:var(
+      --eds-typography-ui-body-xs-lineheight-squished
+    );--_font-weight-lighter:var(
+      --eds-typography-ui-body-xs-font-weight-lighter
+    );--_font-weight-normal:var(--eds-typography-ui-body-xs-font-weight-normal);--_font-weight-bolder:var(--eds-typography-ui-body-xs-font-weight-bolder);--_tracking-tight:var(--eds-typography-ui-body-xs-tracking-tight);--_tracking-normal:var(--eds-typography-ui-body-xs-tracking-normal);--_tracking-wide:var(--eds-typography-ui-body-xs-tracking-wide)}&.text-sm,&[data-text-size=sm]{--_font-size-sm:var(--eds-typography-ui-body-sm-font-size);--_line-height-default:var(--eds-typography-ui-body-sm-lineheight-default);--_line-height-squished:var(
+      --eds-typography-ui-body-sm-lineheight-squished
+    );--_font-weight-lighter:var(
+      --eds-typography-ui-body-sm-font-weight-lighter
+    );--_font-weight-normal:var(--eds-typography-ui-body-sm-font-weight-normal);--_font-weight-bolder:var(--eds-typography-ui-body-sm-font-weight-bolder);--_tracking-tight:var(--eds-typography-ui-body-sm-tracking-tight);--_tracking-normal:var(--eds-typography-ui-body-sm-tracking-normal);--_tracking-wide:var(--eds-typography-ui-body-sm-tracking-wide)}&.text-md,&[data-text-size=md]{--_font-size-md:var(--eds-typography-ui-body-md-font-size);--_line-height-default:var(--eds-typography-ui-body-md-lineheight-default);--_line-height-squished:var(
+      --eds-typography-ui-body-md-lineheight-squished
+    );--_font-weight-lighter:var(
+      --eds-typography-ui-body-md-font-weight-lighter
+    );--_font-weight-normal:var(--eds-typography-ui-body-md-font-weight-normal);--_font-weight-bolder:var(--eds-typography-ui-body-md-font-weight-bolder);--_tracking-tight:var(--eds-typography-ui-body-md-tracking-tight);--_tracking-normal:var(--eds-typography-ui-body-md-tracking-normal);--_tracking-wide:var(--eds-typography-ui-body-md-tracking-wide)}&.text-lg,&[data-text-size=lg]{--_font-size-lg:var(--eds-typography-ui-body-lg-font-size);--_line-height-default:var(--eds-typography-ui-body-lg-lineheight-default);--_line-height-squished:var(
+      --eds-typography-ui-body-lg-lineheight-squished
+    );--_font-weight-lighter:var(
+      --eds-typography-ui-body-lg-font-weight-lighter
+    );--_font-weight-normal:var(--eds-typography-ui-body-lg-font-weight-normal);--_font-weight-bolder:var(--eds-typography-ui-body-lg-font-weight-bolder);--_tracking-tight:var(--eds-typography-ui-body-lg-tracking-tight);--_tracking-normal:var(--eds-typography-ui-body-lg-tracking-normal);--_tracking-wide:var(--eds-typography-ui-body-lg-tracking-wide)}&.text-xl,&[data-text-size=xl]{--_font-size-xl:var(--eds-typography-ui-body-xl-font-size);--_line-height-default:var(--eds-typography-ui-body-xl-lineheight-default);--_line-height-squished:var(
+      --eds-typography-ui-body-xl-lineheight-squished
+    );--_font-weight-lighter:var(
+      --eds-typography-ui-body-xl-font-weight-lighter
+    );--_font-weight-normal:var(--eds-typography-ui-body-xl-font-weight-normal);--_font-weight-bolder:var(--eds-typography-ui-body-xl-font-weight-bolder);--_tracking-tight:var(--eds-typography-ui-body-xl-tracking-tight);--_tracking-normal:var(--eds-typography-ui-body-xl-tracking-normal);--_tracking-wide:var(--eds-typography-ui-body-xl-tracking-wide)}&.text-2xl,&[data-text-size="2xl"]{--_font-size-2xl:var(--eds-typography-ui-body-2xl-font-size);--_line-height-default:var(
+      --eds-typography-ui-body-2xl-lineheight-default
+    );--_line-height-squished:var(
+      --eds-typography-ui-body-2xl-lineheight-squished
+    );--_font-weight-lighter:var(
+      --eds-typography-ui-body-2xl-font-weight-lighter
+    );--_font-weight-normal:var(--eds-typography-ui-body-2xl-font-weight-normal);--_font-weight-bolder:var(--eds-typography-ui-body-2xl-font-weight-bolder);--_tracking-tight:var(--eds-typography-ui-body-2xl-tracking-tight);--_tracking-normal:var(--eds-typography-ui-body-2xl-tracking-normal);--_tracking-wide:var(--eds-typography-ui-body-2xl-tracking-wide)}&.text-3xl,&[data-text-size="3xl"]{--_font-size-3xl:var(--eds-typography-ui-body-3xl-font-size);--_line-height-default:var(
+      --eds-typography-ui-body-3xl-lineheight-default
+    );--_line-height-squished:var(
+      --eds-typography-ui-body-3xl-lineheight-squished
+    );--_font-weight-lighter:var(
+      --eds-typography-ui-body-3xl-font-weight-lighter
+    );--_font-weight-normal:var(--eds-typography-ui-body-3xl-font-weight-normal);--_font-weight-bolder:var(--eds-typography-ui-body-3xl-font-weight-bolder);--_tracking-tight:var(--eds-typography-ui-body-3xl-tracking-tight);--_tracking-normal:var(--eds-typography-ui-body-3xl-tracking-normal);--_tracking-wide:var(--eds-typography-ui-body-3xl-tracking-wide)}&.text-4xl,&[data-text-size="4xl"]{--_font-size-4xl:var(--eds-typography-ui-body-4xl-font-size);--_line-height-default:var(
+      --eds-typography-ui-body-4xl-lineheight-default
+    );--_line-height-squished:var(
+      --eds-typography-ui-body-4xl-lineheight-squished
+    );--_font-weight-lighter:var(
+      --eds-typography-ui-body-4xl-font-weight-lighter
+    );--_font-weight-normal:var(--eds-typography-ui-body-4xl-font-weight-normal);--_font-weight-bolder:var(--eds-typography-ui-body-4xl-font-weight-bolder);--_tracking-tight:var(--eds-typography-ui-body-4xl-tracking-tight);--_tracking-normal:var(--eds-typography-ui-body-4xl-tracking-normal);--_tracking-wide:var(--eds-typography-ui-body-4xl-tracking-wide)}&.text-5xl,&[data-text-size="5xl"]{--_font-size-5xl:var(--eds-typography-ui-body-5xl-font-size);--_line-height-default:var(
+      --eds-typography-ui-body-5xl-lineheight-default
+    );--_line-height-squished:var(
+      --eds-typography-ui-body-5xl-lineheight-squished
+    );--_font-weight-lighter:var(
+      --eds-typography-ui-body-5xl-font-weight-lighter
+    );--_font-weight-normal:var(--eds-typography-ui-body-5xl-font-weight-normal);--_font-weight-bolder:var(--eds-typography-ui-body-5xl-font-weight-bolder);--_tracking-tight:var(--eds-typography-ui-body-5xl-tracking-tight);--_tracking-normal:var(--eds-typography-ui-body-5xl-tracking-normal);--_tracking-wide:var(--eds-typography-ui-body-5xl-tracking-wide)}&.text-6xl,&[data-text-size="6xl"]{--_font-size-6xl:var(--eds-typography-ui-body-6xl-font-size);--_line-height-default:var(
+      --eds-typography-ui-body-6xl-lineheight-default
+    );--_line-height-squished:var(
+      --eds-typography-ui-body-6xl-lineheight-squished
+    );--_font-weight-lighter:var(
+      --eds-typography-ui-body-6xl-font-weight-lighter
+    );--_font-weight-normal:var(--eds-typography-ui-body-6xl-font-weight-normal);--_font-weight-bolder:var(--eds-typography-ui-body-6xl-font-weight-bolder);--_tracking-tight:var(--eds-typography-ui-body-6xl-tracking-tight);--_tracking-normal:var(--eds-typography-ui-body-6xl-tracking-normal);--_tracking-wide:var(--eds-typography-ui-body-6xl-tracking-wide)}}.font-heading,[data-font-family=header]{&.text-xs,&[data-text-size=xs]{--_font-size-xs:var(--eds-typography-header-xs-font-size);--_line-height-default:var(--eds-typography-header-xs-lineheight-default);--_line-height-squished:var(
+      --eds-typography-header-xs-lineheight-squished
+    );--_font-weight-lighter:var(--eds-typography-header-xs-font-weight-lighter);--_font-weight-normal:var(--eds-typography-header-xs-font-weight-normal);--_font-weight-bolder:var(--eds-typography-header-xs-font-weight-bolder);--_tracking-tight:var(--eds-typography-header-xs-tracking-tight);--_tracking-normal:var(--eds-typography-header-xs-tracking-normal);--_tracking-wide:var(--eds-typography-header-xs-tracking-wide)}&.text-sm,&[data-text-size=sm]{--_font-size-sm:var(--eds-typography-header-sm-font-size);--_line-height-default:var(--eds-typography-header-sm-lineheight-default);--_line-height-squished:var(
+      --eds-typography-header-sm-lineheight-squished
+    );--_font-weight-lighter:var(--eds-typography-header-sm-font-weight-lighter);--_font-weight-normal:var(--eds-typography-header-sm-font-weight-normal);--_font-weight-bolder:var(--eds-typography-header-sm-font-weight-bolder);--_tracking-tight:var(--eds-typography-header-sm-tracking-tight);--_tracking-normal:var(--eds-typography-header-sm-tracking-normal);--_tracking-wide:var(--eds-typography-header-sm-tracking-wide)}&.text-md,&[data-text-size=md]{--_font-size-md:var(--eds-typography-header-md-font-size);--_line-height-default:var(--eds-typography-header-md-lineheight-default);--_line-height-squished:var(
+      --eds-typography-header-md-lineheight-squished
+    );--_font-weight-lighter:var(--eds-typography-header-md-font-weight-lighter);--_font-weight-normal:var(--eds-typography-header-md-font-weight-normal);--_font-weight-bolder:var(--eds-typography-header-md-font-weight-bolder);--_tracking-tight:var(--eds-typography-header-md-tracking-tight);--_tracking-normal:var(--eds-typography-header-md-tracking-normal);--_tracking-wide:var(--eds-typography-header-md-tracking-wide)}&.text-lg,&[data-text-size=lg]{--_font-size-lg:var(--eds-typography-header-lg-font-size);--_line-height-default:var(--eds-typography-header-lg-lineheight-default);--_line-height-squished:var(
+      --eds-typography-header-lg-lineheight-squished
+    );--_font-weight-lighter:var(--eds-typography-header-lg-font-weight-lighter);--_font-weight-normal:var(--eds-typography-header-lg-font-weight-normal);--_font-weight-bolder:var(--eds-typography-header-lg-font-weight-bolder);--_tracking-tight:var(--eds-typography-header-lg-tracking-tight);--_tracking-normal:var(--eds-typography-header-lg-tracking-normal);--_tracking-wide:var(--eds-typography-header-lg-tracking-wide)}&.text-xl,&[data-text-size=xl]{--_font-size-xl:var(--eds-typography-header-xl-font-size);--_line-height-default:var(--eds-typography-header-xl-lineheight-default);--_line-height-squished:var(
+      --eds-typography-header-xl-lineheight-squished
+    );--_font-weight-lighter:var(--eds-typography-header-xl-font-weight-lighter);--_font-weight-normal:var(--eds-typography-header-xl-font-weight-normal);--_font-weight-bolder:var(--eds-typography-header-xl-font-weight-bolder);--_tracking-tight:var(--eds-typography-header-xl-tracking-tight);--_tracking-normal:var(--eds-typography-header-xl-tracking-normal);--_tracking-wide:var(--eds-typography-header-xl-tracking-wide)}&.text-2xl,&[data-text-size="2xl"]{--_font-size-2xl:var(--eds-typography-header-2xl-font-size);--_line-height-default:var(--eds-typography-header-2xl-lineheight-default);--_line-height-squished:var(
+      --eds-typography-header-2xl-lineheight-squished
+    );--_font-weight-lighter:var(
+      --eds-typography-header-2xl-font-weight-lighter
+    );--_font-weight-normal:var(--eds-typography-header-2xl-font-weight-normal);--_font-weight-bolder:var(--eds-typography-header-2xl-font-weight-bolder);--_tracking-tight:var(--eds-typography-header-2xl-tracking-tight);--_tracking-normal:var(--eds-typography-header-2xl-tracking-normal);--_tracking-wide:var(--eds-typography-header-2xl-tracking-wide)}&.text-3xl,&[data-text-size="3xl"]{--_font-size-3xl:var(--eds-typography-header-3xl-font-size);--_line-height-default:var(--eds-typography-header-3xl-lineheight-default);--_line-height-squished:var(
+      --eds-typography-header-3xl-lineheight-squished
+    );--_font-weight-lighter:var(
+      --eds-typography-header-3xl-font-weight-lighter
+    );--_font-weight-normal:var(--eds-typography-header-3xl-font-weight-normal);--_font-weight-bolder:var(--eds-typography-header-3xl-font-weight-bolder);--_tracking-tight:var(--eds-typography-header-3xl-tracking-tight);--_tracking-normal:var(--eds-typography-header-3xl-tracking-normal);--_tracking-wide:var(--eds-typography-header-3xl-tracking-wide)}&.text-4xl,&[data-text-size="4xl"]{--_font-size-4xl:var(--eds-typography-header-4xl-font-size);--_line-height-default:var(--eds-typography-header-4xl-lineheight-default);--_line-height-squished:var(
+      --eds-typography-header-4xl-lineheight-squished
+    );--_font-weight-lighter:var(
+      --eds-typography-header-4xl-font-weight-lighter
+    );--_font-weight-normal:var(--eds-typography-header-4xl-font-weight-normal);--_font-weight-bolder:var(--eds-typography-header-4xl-font-weight-bolder);--_tracking-tight:var(--eds-typography-header-4xl-tracking-tight);--_tracking-normal:var(--eds-typography-header-4xl-tracking-normal);--_tracking-wide:var(--eds-typography-header-4xl-tracking-wide)}&.text-5xl,&[data-text-size="5xl"]{--_font-size-5xl:var(--eds-typography-header-5xl-font-size);--_line-height-default:var(--eds-typography-header-5xl-lineheight-default);--_line-height-squished:var(
+      --eds-typography-header-5xl-lineheight-squished
+    );--_font-weight-lighter:var(
+      --eds-typography-header-5xl-font-weight-lighter
+    );--_font-weight-normal:var(--eds-typography-header-5xl-font-weight-normal);--_font-weight-bolder:var(--eds-typography-header-5xl-font-weight-bolder);--_tracking-tight:var(--eds-typography-header-5xl-tracking-tight);--_tracking-normal:var(--eds-typography-header-5xl-tracking-normal);--_tracking-wide:var(--eds-typography-header-5xl-tracking-wide)}&.text-6xl,&[data-text-size="6xl"]{--_font-size-6xl:var(--eds-typography-header-6xl-font-size);--_line-height-default:var(--eds-typography-header-6xl-lineheight-default);--_line-height-squished:var(
+      --eds-typography-header-6xl-lineheight-squished
+    );--_font-weight-lighter:var(
+      --eds-typography-header-6xl-font-weight-lighter
+    );--_font-weight-normal:var(--eds-typography-header-6xl-font-weight-normal);--_font-weight-bolder:var(--eds-typography-header-6xl-font-weight-bolder);--_tracking-tight:var(--eds-typography-header-6xl-tracking-tight);--_tracking-normal:var(--eds-typography-header-6xl-tracking-normal);--_tracking-wide:var(--eds-typography-header-6xl-tracking-wide)}}@supports (text-box:trim-both cap alphabetic){.text-baseline-grid,[data-baseline=grid]{text-box:trim-both ex alphabetic;padding-bottom:0;padding-top:calc(round(1cap, 4px) - 1ex)}.text-baseline-center,[data-baseline=center]{text-box:trim-both ex alphabetic;padding-bottom:calc((round(1cap, 4px) - 1ex)/2 - 1cap/2 + .5ex);padding-top:calc((round(1cap, 4px) - 1ex)/2 + 1cap/2 - .5ex)}}.text-icon{font-size:calc(24px * tan(atan2(var(--font-size), 1px)) / 16);height:auto;margin-block:-.5em;margin-inline:-.2em;width:calc(24px * tan(atan2(var(--font-size), 1px)) / 16)}

package/dist/style.js

@@ -0,0 +1,3 @@
+var undefined$1 = undefined;
+
+export { undefined$1 as default };

package/dist/types/playwright.config.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Playwright configuration for visual regression testing of Typography components
+ * Tests run against Storybook stories to ensure visual consistency
+ */
+declare const _default: import("@playwright/test").PlaywrightTestConfig<{}, {}>;
+export default _default;

package/dist/types/src/components/Button/tokens/contained.d.ts

@@ -0,0 +1,3 @@
+export declare const primary: import("../Button.types").ButtonToken;
+export declare const secondary: import("../Button.types").ButtonToken;
+export declare const danger: import("../Button.types").ButtonToken;

package/dist/types/src/components/Button/tokens/outlined.d.ts

@@ -0,0 +1,3 @@
+export declare const primary: import("../Button.types").ButtonToken;
+export declare const secondary: import("../Button.types").ButtonToken;
+export declare const danger: import("../Button.types").ButtonToken;

package/dist/types/src/components/Typography/Heading.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Heading component for semantic headings (h1-h6).
+ * Uses the design system's typography styles for headings.
+ */
+export declare const Heading: import("react").ForwardRefExoticComponent<{
+    as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+} & import("./Typography.new.types").BaseTypographyProps & import("react").HTMLAttributes<HTMLHeadingElement> & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/types/src/components/Typography/Heading.types.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react';
+import { BaseTypographyProps } from './Typography.new.types';
+export type HeadingProps = {
+    /** HTML heading element to render */
+    as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+} & BaseTypographyProps & HTMLAttributes<HTMLHeadingElement>;

package/dist/types/src/components/Typography/Paragraph.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Paragraph component for rendering text paragraphs.
+ * Uses the design system's typography styles for UI text.
+ */
+export declare const Paragraph: import("react").ForwardRefExoticComponent<{
+    size?: import("./types").FontSize;
+} & import("./Typography.new.types").BaseTypographyProps & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/types/src/components/Typography/Paragraph.types.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+import { FontSize } from './types';
+import { BaseTypographyProps } from './Typography.new.types';
+export type ParagraphProps = {
+    /** Size of the text */
+    size?: FontSize;
+} & BaseTypographyProps & HTMLAttributes<HTMLParagraphElement>;

package/dist/types/{components → src/components}/Typography/Typography.d.ts

@@ -20,4 +20,17 @@ export type TypographyProps = {
     /** Number of lines. */
     lines?: number;
 } & (HTMLAttributes<HTMLElement> | AnchorHTMLAttributes<HTMLAnchorElement>);
+/**
+ * @deprecated Typography component is deprecated and will be removed in a future version.
+ * Please use the new Typography, Heading, or Paragraph components instead.
+ *
+ * Migration guide:
+ * - For headings: Use `<Heading as="h1|h2|h3|h4|h5|h6">` instead of `<Typography variant="h1|h2|h3|h4|h5|h6">`
+ * - For paragraphs: Use `<Paragraph>` instead of `<Typography variant="body_short|body_long">`
+ * - For inline text: Use `<Typography>` for more flexible text styling
+ *
+ * @see {@link TypographyNext}
+ * @see {@link Heading}
+ * @see {@link Paragraph}
+ */
 export declare const Typography: OverridableComponent<TypographyProps, HTMLElement>;

package/dist/types/src/components/Typography/Typography.new.d.ts

@@ -0,0 +1,43 @@
+/**
+ * TypographyNext component for flexible typography with baseline grid support.
+ *
+ * Provides full control over typography properties including family, size,
+ * lineHeight, baseline alignment, weight, and tracking.
+ *
+ * **Display behavior:** Elements render as `display: block` by default for
+ * text-box trimming and baseline grid alignment. Override with CSS if needed.
+ *
+ * @example
+ * ```tsx
+ * import { TypographyNext as Typography } from '@equinor/eds-core-react'
+ *
+ * <Typography
+ *   family="ui"
+ *   size="md"
+ *   lineHeight="default"
+ *   baseline="grid"
+ *   weight="normal"
+ *   tracking="normal"
+ * >
+ *   Text content (renders as block-level by default)
+ * </Typography>
+ *
+ * <Typography
+ *   as="h1"
+ *   family="header"
+ *   size="3xl"
+ *   lineHeight="squished"
+ *   baseline="grid"
+ *   weight="bolder"
+ *   tracking="tight"
+ * >
+ *   Page heading
+ * </Typography>
+ * ```
+ */
+export declare const TypographyNext: import("react").ForwardRefExoticComponent<{
+    family: import("./types").FontFamily;
+    size: import("./types").FontSize;
+    baseline: import("./types").BaselineAlignment;
+    as?: import("react").ElementType;
+} & import("./Typography.new.types").BaseTypographyProps & import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;

package/dist/types/src/components/Typography/Typography.new.types.d.ts

@@ -0,0 +1,28 @@
+import { HTMLAttributes, ElementType } from 'react';
+import { FontFamily, FontSize, LineHeight, BaselineAlignment, FontWeight, Tracking } from './types';
+/**
+ * Base typography props shared across typography components.
+ * Can be extended for specific typography component needs.
+ */
+export type BaseTypographyProps = {
+    /** Line height variant */
+    lineHeight?: LineHeight;
+    /** Font weight */
+    weight?: FontWeight;
+    /** Letter spacing (tracking) */
+    tracking?: Tracking;
+    /** Enable debug mode to visualize text box */
+    debug?: boolean;
+    /** Children to render */
+    children?: React.ReactNode;
+};
+export type TypographyNextProps = {
+    /** Font family */
+    family: FontFamily;
+    /** Size of the text */
+    size: FontSize;
+    /** Baseline alignment strategy */
+    baseline: BaselineAlignment;
+    /** Semantic HTML element to render. Defaults to 'span' */
+    as?: ElementType;
+} & BaseTypographyProps & HTMLAttributes<HTMLElement>;

package/dist/types/src/components/Typography/Typography.stories.shared.d.ts

@@ -0,0 +1,79 @@
+import { Heading } from './Heading';
+import { Paragraph } from './Paragraph';
+import type { TypographyNextProps } from './Typography.new.types';
+export declare const SAMPLE_TEXT = "The quick brown fox jumps over the lazy dog";
+export declare const SIZES: readonly ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl"];
+export declare const WEIGHTS: readonly ["lighter", "normal", "bolder"];
+export declare const TRACKING_OPTIONS: readonly ["tight", "normal", "wide"];
+export declare const LINE_HEIGHTS: readonly ["default", "squished"];
+export declare const HEADING_LEVELS: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
+export declare const ComparisonGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ComparisonRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<{
+    family: import("./types").FontFamily;
+    size: import("./types").FontSize;
+    baseline: import("./types").BaselineAlignment;
+    as?: import("react").ElementType;
+} & import("./Typography.new.types").BaseTypographyProps & import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>, {
+    family: import("./types").FontFamily;
+    size: import("./types").FontSize;
+    baseline: import("./types").BaselineAlignment;
+    as?: import("react").ElementType;
+} & import("./Typography.new.types").BaseTypographyProps & import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>, Partial<TypographyNextProps>>, Partial<TypographyNextProps>>> & string & Omit<import("react").ForwardRefExoticComponent<{
+    family: import("./types").FontFamily;
+    size: import("./types").FontSize;
+    baseline: import("./types").BaselineAlignment;
+    as?: import("react").ElementType;
+} & import("./Typography.new.types").BaseTypographyProps & import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const GridBackground: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const RealWorldGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const IntroductionGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const Button: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $size?: string;
+}>> & string;
+export declare const IconTextContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ShowcaseGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ShowcaseCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ShowcaseItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const UsageSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const UsageCategory: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CategoryHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const GridShowcaseWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ComparisonSection: ({ title, marginTop, children, }: {
+    title: string;
+    marginTop?: string;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ComparisonRowItem: ({ label, children, }: {
+    label: string;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const HeadingLevelComparison: ({ text, }: {
+    text?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const WeightComparison: ({ component: Component, text, ...componentProps }: {
+    component: typeof Heading | typeof Paragraph;
+    text?: string;
+} & Record<string, unknown>) => import("react/jsx-runtime").JSX.Element;
+export declare const TrackingComparison: ({ component: Component, text, ...componentProps }: {
+    component: typeof Heading | typeof Paragraph;
+    text?: string;
+} & Record<string, unknown>) => import("react/jsx-runtime").JSX.Element;
+export declare const SizeComparison: ({ component: Component, text, ...componentProps }: {
+    component: typeof Paragraph;
+    text?: string;
+} & Record<string, unknown>) => import("react/jsx-runtime").JSX.Element;
+export declare const LineHeightComparison: ({ text, }: {
+    text?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const IconTextRow: ({ label, size, text, iconName, }: {
+    label: string;
+    size: (typeof SIZES)[number];
+    text?: string;
+    iconName?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ButtonRow: ({ label, size, children, ...extraProps }: {
+    label: string;
+    size: string;
+    children: React.ReactNode;
+} & Record<string, unknown>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/src/components/Typography/index.d.ts

@@ -0,0 +1,8 @@
+export * from './Typography';
+export { TypographyNext } from './Typography.new';
+export { Heading } from './Heading';
+export { Paragraph } from './Paragraph';
+export type { TypographyNextProps } from './Typography.new.types';
+export type { HeadingProps } from './Heading.types';
+export type { ParagraphProps } from './Paragraph.types';
+export type { FontFamily, FontSize, LineHeight, BaselineAlignment, FontWeight, Tracking, } from './types';

package/dist/types/src/components/Typography/types.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Shared typography primitive types used across all typography components
+ */
+export type FontFamily = 'ui' | 'header';
+export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+export type LineHeight = 'default' | 'squished';
+export type BaselineAlignment = 'grid' | 'center';
+export type FontWeight = 'lighter' | 'normal' | 'bolder';
+export type Tracking = 'tight' | 'normal' | 'wide';

package/dist/types/src/components/Typography/utils.d.ts

@@ -0,0 +1,15 @@
+import { FontFamily, FontSize, LineHeight, BaselineAlignment, FontWeight, Tracking } from './types';
+type CreateTypographyClassNamesParams = {
+    family?: FontFamily;
+    size?: FontSize;
+    baseline?: BaselineAlignment;
+    lineHeight?: LineHeight;
+    weight?: FontWeight;
+    tracking?: Tracking;
+    className?: string;
+};
+/**
+ * Builds a className string from typography properties
+ */
+export declare const createTypographyClassNames: ({ family, size, lineHeight, baseline, weight, tracking, className, }: CreateTypographyClassNamesParams) => string;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -25,6 +25,15 @@
   "files": [
     "dist/*"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/eds-core-react.cjs"
+    },
+    "./style": "./dist/style.css",
+    "./style.css": "./dist/style.css"
+  },
   "keywords": [
     "eds",
     "design system",
@@ -32,41 +41,45 @@
     "react"
   ],
   "devDependencies": {
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.6",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@storybook/addon-a11y": "^9.1.5",
-    "@storybook/addon-docs": "^9.1.5",
-    "@storybook/addon-links": "^9.1.5",
-    "@storybook/react-vite": "^9.1.5",
+    "@playwright/test": "^1.55.0",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-commonjs": "^28.0.8",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@storybook/addon-a11y": "^9.1.13",
+    "@storybook/addon-docs": "^9.1.13",
+    "@storybook/addon-links": "^9.1.13",
+    "@storybook/react-vite": "^9.1.13",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "16.3.0",
-    "@testing-library/user-event": "14.5.2",
-    "@types/jest": "^29.5.14",
-    "@types/ramda": "^0.30.2",
-    "@types/react": "^19.1.12",
-    "@types/react-dom": "^19.1.9",
+    "@testing-library/user-event": "14.6.1",
+    "@types/jest": "^30.0.0",
+    "@types/mdx": "^2.0.13",
+    "@types/node": "^24.9.1",
+    "@types/ramda": "^0.31.1",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
     "babel-plugin-styled-components": "^2.1.4",
-    "eslint-plugin-storybook": "9.1.5",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "eslint-plugin-storybook": "9.1.13",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
     "jest-styled-components": "^7.2.0",
     "js-file-download": "^0.4.12",
     "postcss": "^8.5.6",
-    "ramda": "^0.31.3",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "react-hook-form": "^7.62.0",
-    "react-router-dom": "^6.30.1",
-    "rollup": "^4.50.0",
-    "rollup-plugin-delete": "^2.2.0",
+    "postcss-import": "^16.1.1",
+    "ramda": "^0.32.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-hook-form": "^7.65.0",
+    "react-router-dom": "^7.9.4",
+    "rollup": "^4.52.5",
+    "rollup-plugin-delete": "^3.0.1",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-preserve-directives": "^1.1.3",
-    "storybook": "^9.1.5",
+    "storybook": "^9.1.13",
     "styled-components": "6.1.19",
-    "tsc-watch": "^6.3.1",
-    "typescript": "^5.9.2"
+    "tsc-watch": "^7.2.0",
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "react": "^19",
@@ -74,25 +87,29 @@
     "styled-components": "^6"
   },
   "dependencies": {
-    "@babel/runtime": "^7.28.3",
+    "@babel/runtime": "^7.28.4",
     "@floating-ui/react": "^0.27.16",
-    "@internationalized/date": "^3.9.0",
-    "@react-aria/utils": "^3.30.1",
-    "@react-stately/calendar": "^3.8.4",
-    "@react-stately/datepicker": "^3.15.1",
-    "@react-types/shared": "^3.32.0",
+    "@internationalized/date": "^3.10.0",
+    "@react-aria/utils": "^3.31.0",
+    "@react-stately/calendar": "^3.9.0",
+    "@react-stately/datepicker": "^3.15.2",
+    "@react-types/shared": "^3.32.1",
     "@tanstack/react-virtual": "3.13.12",
-    "downshift": "9.0.8",
-    "react-aria": "^3.43.1",
-    "@equinor/eds-tokens": "1.1.2",
-    "@equinor/eds-utils": "1.0.1",
-    "@equinor/eds-icons": "^1.0.0"
+    "downshift": "9.0.10",
+    "react-aria": "^3.44.0",
+    "@equinor/eds-icons": "^1.0.1",
+    "@equinor/eds-tokens": "^1.1.4",
+    "@equinor/eds-utils": "^1.1.0"
   },
   "scripts": {
-    "build": "rollup -c --bundleConfigAsCjs && tsc -p tsconfig.build.json",
+    "build": "rollup -c && tsc -p tsconfig.build.json",
     "test": "tsc -p tsconfig.test.json && jest",
     "test:watch": "tsc-watch -p tsconfig.test.json --onFirstSuccess  \"jest --watch\"",
     "test:update-snapshots": "jest --updateSnapshot",
+    "test:visual": "playwright test",
+    "test:visual:ui": "playwright test --ui",
+    "test:visual:update": "playwright test --update-snapshots",
+    "test:visual:report": "playwright show-report",
     "storybook": "storybook dev -p 9000 --ci",
     "build:storybook": "storybook build -o storybook-build",
     "types": "tsc -p tsconfig.build.json"

package/dist/types/components/Button/tokens/contained.d.ts

@@ -1,4 +0,0 @@
-import { ButtonToken } from '../Button.types';
-export declare const primary: ButtonToken;
-export declare const secondary: ButtonToken;
-export declare const danger: ButtonToken;

package/dist/types/components/Button/tokens/outlined.d.ts

@@ -1,4 +0,0 @@
-import { ButtonToken } from '../Button.types';
-export declare const primary: ButtonToken;
-export declare const secondary: ButtonToken;
-export declare const danger: ButtonToken;

package/dist/types/components/Typography/index.d.ts

@@ -1 +0,0 @@
-export * from './Typography';