@equinor/eds-core-react 1.0.2 → 1.1.0

package/dist/eds-core-react.cjs

@@ -1443,6 +1443,19 @@ const StyledTypography$1 = styled__default.default.p.withConfig({
 }) => $lines && styled.css(["display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;"], $lines), ({
   $link
 }) => $link && styled.css(["&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], edsUtils.outlineTemplate(link.states.focus.outline), edsUtils.outlineTemplate(link.states.focus.outline)));
+/**
+ * @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}
+ */
 const Typography = /*#__PURE__*/react.forwardRef(function Typography({
   variant = 'body_short',
   children,
@@ -1456,6 +1469,7 @@ const Typography = /*#__PURE__*/react.forwardRef(function Typography({
   as: providedAs,
   ...other
 }, ref) {
+  edsUtils.useDeprecationWarning('The Typography component is deprecated and will be removed in a future version. ' + 'Please migrate to the new TypographyNext, Heading, or Paragraph component. ' + 'See the documentation for migration details.', 'Typography');
   const as = providedAs ? providedAs : getElementType(variant, link);
   const variantName = toVariantName(variant, bold, italic, link);
   const typography = findTypography(variantName, group);
@@ -1479,6 +1493,138 @@ const Typography = /*#__PURE__*/react.forwardRef(function Typography({
 
 // Typography.displayName = 'EdsTypography'
 
+/**
+ * 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>
+ * ```
+ */
+const TypographyNext = /*#__PURE__*/react.forwardRef(({
+  as = 'span',
+  family,
+  size,
+  baseline,
+  lineHeight,
+  weight,
+  tracking,
+  debug,
+  ...rest
+}, ref) => {
+  const Component = as;
+  return /*#__PURE__*/jsxRuntime.jsx(Component, {
+    ref: ref,
+    "data-font-family": family,
+    "data-text-size": size,
+    "data-baseline": baseline || undefined,
+    "data-line-height": lineHeight || undefined,
+    "data-font-weight": weight || undefined,
+    "data-tracking": tracking || undefined,
+    "data-debug": debug ? '' : undefined,
+    ...rest
+  });
+});
+TypographyNext.displayName = 'TypographyNext';
+
+const getHeadingSize = as => {
+  switch (as) {
+    case 'h1':
+      return '6xl';
+    case 'h2':
+      return '5xl';
+    case 'h3':
+      return '4xl';
+    case 'h4':
+      return '3xl';
+    case 'h5':
+      return '2xl';
+    case 'h6':
+      return 'xl';
+    default:
+      return '6xl';
+  }
+};
+
+/**
+ * Heading component for semantic headings (h1-h6).
+ * Uses the design system's typography styles for headings.
+ */
+const Heading = /*#__PURE__*/react.forwardRef(({
+  lineHeight = 'squished',
+  weight = 'normal',
+  tracking = 'normal',
+  debug,
+  as,
+  ...rest
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx(TypographyNext, {
+    ref: ref,
+    as: as,
+    family: "header",
+    baseline: "grid",
+    size: getHeadingSize(as),
+    lineHeight: lineHeight,
+    weight: weight,
+    tracking: tracking,
+    debug: debug,
+    ...rest
+  });
+});
+Heading.displayName = 'Heading';
+
+const Paragraph = /*#__PURE__*/react.forwardRef(({
+  size = 'lg',
+  lineHeight = 'default',
+  weight = 'normal',
+  tracking = 'normal',
+  debug,
+  ...rest
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx(TypographyNext, {
+    ref: ref,
+    as: "p",
+    family: "ui",
+    baseline: "grid",
+    size: size,
+    lineHeight: lineHeight,
+    weight: weight,
+    tracking: tracking,
+    debug: debug,
+    ...rest
+  });
+});
+Paragraph.displayName = 'Paragraph';
+
 const {
   typography: {
     table: {
@@ -12600,6 +12746,7 @@ exports.DialogTitle = DialogTitle;
 exports.Divider = Divider;
 exports.DotProgress = DotProgress;
 exports.EdsProvider = EdsProvider;
+exports.Heading = Heading;
 exports.Icon = Icon$1;
 exports.Input = Input$4;
 exports.InputWrapper = InputWrapper$2;
@@ -12613,6 +12760,7 @@ exports.MenuSection = MenuSection;
 exports.NativeSelect = NativeSelect;
 exports.Pagination = Pagination;
 exports.Paper = Paper;
+exports.Paragraph = Paragraph;
 exports.Popover = Popover;
 exports.PopoverActions = PopoverActions;
 exports.PopoverContent = PopoverContent;
@@ -12658,5 +12806,6 @@ exports.TopbarActions = Actions;
 exports.TopbarCustomContent = CustomContent;
 exports.TopbarHeader = Header$2;
 exports.Typography = Typography;
+exports.TypographyNext = TypographyNext;
 exports.useEds = useEds;
 exports.useSideBar = useSideBar;

package/dist/esm/components/Autocomplete/Autocomplete.js

@@ -13,8 +13,8 @@ import { AutocompleteOption } from './Option.js';
 import { useFloating, offset, flip, size, useInteractions, autoUpdate } from '@floating-ui/react';
 import { AddNewOption } from './AddNewOption.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import pickBy from '../../node_modules/.pnpm/ramda@0.31.3/node_modules/ramda/es/pickBy.js';
-import mergeWith from '../../node_modules/.pnpm/ramda@0.31.3/node_modules/ramda/es/mergeWith.js';
+import pickBy from '../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/pickBy.js';
+import mergeWith from '../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeWith.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 import { Label } from '../Label/Label.js';
 import { Input } from '../Input/Input.js';

package/dist/esm/components/Autocomplete/Autocomplete.tokens.js

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.31.3/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   typography,

package/dist/esm/components/Button/tokens/contained.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
 import { button } from './button.js';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.31.3/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   colors: {

package/dist/esm/components/Button/tokens/contained_icon.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
 import { primary as primary$1, secondary as secondary$1, danger as danger$1 } from './contained.js';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.31.3/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   clickbounds: {

package/dist/esm/components/Button/tokens/ghost.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
 import { button } from './button.js';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.31.3/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   colors: {

package/dist/esm/components/Button/tokens/icon.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
 import { button } from './button.js';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.31.3/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   colors: {

package/dist/esm/components/Button/tokens/outlined.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
 import { button } from './button.js';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.31.3/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   colors: {

package/dist/esm/components/Input/Input.tokens.js

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.31.3/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   colors: {

package/dist/esm/components/InputWrapper/InputWrapper.tokens.js

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.31.3/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   colors: {

package/dist/esm/components/Table/DataCell/DataCell.tokens.js

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.31.3/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   typography: {

package/dist/esm/components/Typography/Heading.js

@@ -0,0 +1,51 @@
+import { forwardRef } from 'react';
+import { TypographyNext } from './Typography.new.js';
+import { jsx } from 'react/jsx-runtime';
+
+const getHeadingSize = as => {
+  switch (as) {
+    case 'h1':
+      return '6xl';
+    case 'h2':
+      return '5xl';
+    case 'h3':
+      return '4xl';
+    case 'h4':
+      return '3xl';
+    case 'h5':
+      return '2xl';
+    case 'h6':
+      return 'xl';
+    default:
+      return '6xl';
+  }
+};
+
+/**
+ * Heading component for semantic headings (h1-h6).
+ * Uses the design system's typography styles for headings.
+ */
+const Heading = /*#__PURE__*/forwardRef(({
+  lineHeight = 'squished',
+  weight = 'normal',
+  tracking = 'normal',
+  debug,
+  as,
+  ...rest
+}, ref) => {
+  return /*#__PURE__*/jsx(TypographyNext, {
+    ref: ref,
+    as: as,
+    family: "header",
+    baseline: "grid",
+    size: getHeadingSize(as),
+    lineHeight: lineHeight,
+    weight: weight,
+    tracking: tracking,
+    debug: debug,
+    ...rest
+  });
+});
+Heading.displayName = 'Heading';
+
+export { Heading };

package/dist/esm/components/Typography/Paragraph.js

@@ -0,0 +1,28 @@
+import { forwardRef } from 'react';
+import { TypographyNext } from './Typography.new.js';
+import { jsx } from 'react/jsx-runtime';
+
+const Paragraph = /*#__PURE__*/forwardRef(({
+  size = 'lg',
+  lineHeight = 'default',
+  weight = 'normal',
+  tracking = 'normal',
+  debug,
+  ...rest
+}, ref) => {
+  return /*#__PURE__*/jsx(TypographyNext, {
+    ref: ref,
+    as: "p",
+    family: "ui",
+    baseline: "grid",
+    size: size,
+    lineHeight: lineHeight,
+    weight: weight,
+    tracking: tracking,
+    debug: debug,
+    ...rest
+  });
+});
+Paragraph.displayName = 'Paragraph';
+
+export { Paragraph };

package/dist/esm/components/Typography/Typography.js

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { typographyTemplate, outlineTemplate } from '@equinor/eds-utils';
+import { useDeprecationWarning, typographyTemplate, outlineTemplate } from '@equinor/eds-utils';
 import { quickVariants, typography, colors, link } from './Typography.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
@@ -53,6 +53,19 @@ const StyledTypography = styled.p.withConfig({
 }) => $lines && css(["display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;"], $lines), ({
   $link
 }) => $link && css(["&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], outlineTemplate(link.states.focus.outline), outlineTemplate(link.states.focus.outline)));
+/**
+ * @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}
+ */
 const Typography = /*#__PURE__*/forwardRef(function Typography({
   variant = 'body_short',
   children,
@@ -66,6 +79,7 @@ const Typography = /*#__PURE__*/forwardRef(function Typography({
   as: providedAs,
   ...other
 }, ref) {
+  useDeprecationWarning('The Typography component is deprecated and will be removed in a future version. ' + 'Please migrate to the new TypographyNext, Heading, or Paragraph component. ' + 'See the documentation for migration details.', 'Typography');
   const as = providedAs ? providedAs : getElementType(variant, link);
   const variantName = toVariantName(variant, bold, italic, link);
   const typography = findTypography(variantName, group);

package/dist/esm/components/Typography/Typography.new.js

@@ -0,0 +1,67 @@
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * 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>
+ * ```
+ */
+const TypographyNext = /*#__PURE__*/forwardRef(({
+  as = 'span',
+  family,
+  size,
+  baseline,
+  lineHeight,
+  weight,
+  tracking,
+  debug,
+  ...rest
+}, ref) => {
+  const Component = as;
+  return /*#__PURE__*/jsx(Component, {
+    ref: ref,
+    "data-font-family": family,
+    "data-text-size": size,
+    "data-baseline": baseline || undefined,
+    "data-line-height": lineHeight || undefined,
+    "data-font-weight": weight || undefined,
+    "data-tracking": tracking || undefined,
+    "data-debug": debug ? '' : undefined,
+    ...rest
+  });
+});
+TypographyNext.displayName = 'TypographyNext';
+
+export { TypographyNext };

package/dist/esm/index.js

@@ -18,6 +18,9 @@ export { Menu } from './components/Menu/index.js';
 export { SideBar } from './components/SideBar/index.js';
 export { ButtonGroup } from './components/Button/ButtonGroup/ButtonGroup.js';
 export { ToggleButton } from './components/Button/ToggleButton/ToggleButton.js';
+export { TypographyNext } from './components/Typography/Typography.new.js';
+export { Heading } from './components/Typography/Heading.js';
+export { Paragraph } from './components/Typography/Paragraph.js';
 export { Typography } from './components/Typography/Typography.js';
 export { Body as TableBody } from './components/Table/Body.js';
 export { Cell as TableCell } from './components/Table/Cell.js';

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>;