@equinor/eds-core-react 0.40.0 → 1.0.0-beta.1

package/dist/eds-core-react.cjs

@@ -1442,7 +1442,7 @@ const findColor = (inputColor = null) => typeof colors$5[inputColor] === 'undefi
 const toVariantName = (variant, bold = false, italic = false, link = false) => `${variant}${bold ? '_bold' : ''}${italic ? '_italic' : ''}${link ? '_link' : ''}`;
 const StyledTypography$1 = styled__default.default.p.withConfig({
   displayName: "Typography__StyledTypography",
-  componentId: "sc-179guof-0"
+  componentId: "sc-5ggzld-0"
 })(["", " ", " ", " ", ""], ({
   $typography,
   $link
@@ -1455,7 +1455,7 @@ 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)));
-const Typography = /*#__PURE__*/react.forwardRef(function Typography({
+const Typography$1 = /*#__PURE__*/react.forwardRef(function Typography({
   variant = 'body_short',
   children,
   bold,
@@ -1491,6 +1491,99 @@ const Typography = /*#__PURE__*/react.forwardRef(function Typography({
 
 // Typography.displayName = 'EdsTypography'
 
+const Typography = styled__default.default.p.withConfig({
+  displayName: "Typography",
+  componentId: "sc-xl9v17-0"
+})(["margin:0;", ""], ({
+  $type,
+  $size,
+  $lineHeight,
+  $fontWeight,
+  $letterSpacing,
+  $offset = 0,
+  $onGrid = true,
+  $color,
+  $lines
+}) => styled.css(["", " --_text-preset-color:", ";font-family:", ";font-size:", ";line-height:", ";font-weight:", ";letter-spacing:", ";color:var(--_text-preset-color,inherit);--_offset:calc(", " * 1em);--_grid-base:4px;@supports (height:round(up,10px,1px)){--_rest-top:", ";--_rest-bottom:", ";}--_trim-top:calc(((((1lh - 1cap) / 2) - var(--_offset)) * -1));--_trim-bottom:calc(((((1lh - 1cap) / 2) + var(--_offset)) * -1));&::before{margin-bottom:calc(var(--_trim-top) + var(--_rest-top,0cap));}&::after{margin-top:calc(var(--_trim-bottom) + var(--_rest-bottom,0cap));}&::before,&::after{display:table;content:'';}"], $lines && styled.css(["display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;"], $lines), $color, `var(--eds-typography-${$type}-font-family)`, `var(--eds-typography-${$type}-${$size}-font-size)`, `var(--eds-typography-${$type}-${$size}-lineheight-${$lineHeight})`, `var(--eds-typography-${$type}-${$size}-font-weight-${$fontWeight})`, `var(--eds-typography-${$type}-${$size}-tracking-${$letterSpacing})`, $offset, $onGrid ? 'calc(round(nearest, 1cap, var(--_grid-base)) - 1cap)' : 'calc((round(nearest, 1cap, var(--_grid-base)) - 1cap) / 2)', $onGrid ? '0cap' : 'calc((round(nearest, 1cap, var(--_grid-base)) - 1cap) / 2)'));
+
+const INTER_VERTICAL_OFFSET = 0.002;
+const BodyText = /*#__PURE__*/react.forwardRef(function BodyText({
+  size = 'lg',
+  lineHeight = 'default',
+  fontWeight = 'normal',
+  letterSpacing = 'normal',
+  as = 'p',
+  lines,
+  children,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsxRuntime.jsx(Typography, {
+    ref: ref,
+    as: as,
+    $type: 'ui-body',
+    $offset: INTER_VERTICAL_OFFSET,
+    $size: size,
+    $lineHeight: lineHeight,
+    $lines: lines,
+    $fontWeight: fontWeight,
+    $letterSpacing: letterSpacing,
+    ...rest,
+    children: children
+  });
+});
+
+const UIText = /*#__PURE__*/react.forwardRef(function UIText({
+  size = 'lg',
+  lineHeight = 'default',
+  fontWeight = 'normal',
+  letterSpacing = 'normal',
+  lines,
+  as = 'p',
+  onGrid = false,
+  children,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsxRuntime.jsx(Typography, {
+    ref: ref,
+    as: as,
+    $type: 'ui-body',
+    $size: size,
+    $lineHeight: lineHeight,
+    $lines: lines,
+    $fontWeight: fontWeight,
+    $letterSpacing: letterSpacing,
+    $onGrid: onGrid,
+    ...rest,
+    children: children
+  });
+});
+
+const EQUINOR_VERTICAL_OFFSET = 0.06;
+const Heading = /*#__PURE__*/react.forwardRef(function Heading({
+  size = 'lg',
+  lineHeight = 'default',
+  fontWeight = 'normal',
+  letterSpacing = 'normal',
+  lines,
+  as,
+  children,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsxRuntime.jsx(Typography, {
+    ref: ref,
+    $lineHeight: lineHeight,
+    $lines: lines,
+    $type: 'header',
+    $size: size,
+    $offset: EQUINOR_VERTICAL_OFFSET,
+    $fontWeight: fontWeight,
+    $letterSpacing: letterSpacing,
+    as: as,
+    ...rest,
+    children: children
+  });
+});
+
 const {
   typography: {
     table: {
@@ -4234,7 +4327,7 @@ const CardActions = /*#__PURE__*/react.forwardRef(function CardActions({
   };
   return /*#__PURE__*/jsxRuntime.jsxs(StyledCardActions, {
     ...props,
-    children: [children, meta !== '' && /*#__PURE__*/jsxRuntime.jsx(Typography, {
+    children: [children, meta !== '' && /*#__PURE__*/jsxRuntime.jsx(Typography$1, {
       variant: "caption",
       children: meta
     })]
@@ -4913,7 +5006,7 @@ const TocList = styled__default.default(List$1).withConfig({
   displayName: "TableOfContents__TocList",
   componentId: "sc-q23s6y-1"
 })(["margin:0;padding:0;"]);
-const TocLabel = styled__default.default(Typography).withConfig({
+const TocLabel = styled__default.default(Typography$1).withConfig({
   displayName: "TableOfContents__TocLabel",
   componentId: "sc-q23s6y-2"
 })(({
@@ -5055,7 +5148,7 @@ const SideSheet = /*#__PURE__*/react.forwardRef(function SideSheet({
   return open && /*#__PURE__*/jsxRuntime.jsxs(StyledSideSheet, {
     ...props,
     children: [(title || onClose) && /*#__PURE__*/jsxRuntime.jsxs(Header$1, {
-      children: [title && /*#__PURE__*/jsxRuntime.jsx(Typography, {
+      children: [title && /*#__PURE__*/jsxRuntime.jsx(Typography$1, {
         variant: "h2",
         children: title
       }), onClose && /*#__PURE__*/jsxRuntime.jsx(Button$1, {
@@ -6784,7 +6877,7 @@ const Banner$1 = /*#__PURE__*/react.forwardRef(function Banner({
   });
 });
 
-const StyledBannerMessage = styled__default.default(Typography).withConfig({
+const StyledBannerMessage = styled__default.default(Typography$1).withConfig({
   displayName: "BannerMessage__StyledBannerMessage",
   componentId: "sc-1lfqos1-0"
 })([""]);
@@ -7290,11 +7383,11 @@ const ListItem$1 = styled__default.default.li.withConfig({
   displayName: "Breadcrumbs__ListItem",
   componentId: "sc-12awlbz-1"
 })(["display:block;min-width:30px;"]);
-const Separator = styled__default.default(Typography).withConfig({
+const Separator = styled__default.default(Typography$1).withConfig({
   displayName: "Breadcrumbs__Separator",
   componentId: "sc-12awlbz-2"
 })(["color:", ";", " display:block;line-height:1;display:flex;& > svg{margin-inline:-9px;}"], typography$5.color, edsUtils.spacingsTemplate(spacings));
-const Collapsed = styled__default.default(Typography).withConfig({
+const Collapsed = styled__default.default(Typography$1).withConfig({
   displayName: "Breadcrumbs__Collapsed",
   componentId: "sc-12awlbz-3"
 })(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";}}color:", ";text-decoration:none;"], states$1.hover.typography.color, typography$5.color);
@@ -7376,7 +7469,7 @@ const {
   states,
   typography: typography$4
 } = breadcrumbs;
-const StyledTypography = styled__default.default(Typography).withConfig({
+const StyledTypography = styled__default.default(Typography$1).withConfig({
   displayName: "Breadcrumb__StyledTypography",
   componentId: "sc-10nvwte-0"
 })(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";cursor:pointer;}}white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:1;text-decoration:none;color:", ";width:100%;", ""], states.hover.typography.color, typography$4.color, ({
@@ -7708,7 +7801,7 @@ const MenuSection = /*#__PURE__*/react.memo(function MenuSection(props) {
         variant: "small"
       })
     }), title && /*#__PURE__*/jsxRuntime.jsx(Header, {
-      children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography$1, {
         group: "navigation",
         variant: "label",
         children: title
@@ -8131,7 +8224,7 @@ const FlexContainer = styled__default.default.div.withConfig({
   displayName: "Pagination__FlexContainer",
   componentId: "sc-13cpp3o-4"
 })(["display:flex;justify-content:space-between;flex-wrap:nowrap;align-items:center;"]);
-const Text$1 = styled__default.default(Typography).withConfig({
+const Text$1 = styled__default.default(Typography$1).withConfig({
   displayName: "Pagination__Text",
   componentId: "sc-13cpp3o-5"
 })(["white-space:nowrap;"]);
@@ -10471,7 +10564,7 @@ const Container$1 = styled__default.default.a.withConfig({
   } = theme;
   return styled.css(["background-color:", ";display:grid;grid-template-columns:", " 1fr;width:100%;padding:0;place-items:center;border:0;", " text-decoration:none;min-height:", ";&:hover{cursor:pointer;background-color:", ";}&:disabled{background-color:", ";color:", ";cursor:not-allowed;& > p{color:", ";}& > svg{fill:", ";}}&:focus-visible{", ";}"], $active ? menuActiveBackground : 'transparent', minWidth, edsUtils.bordersTemplate(border), minHeight, $active ? menuActiveBackground : menuHoverBackground, menuDisabledBackground, menuDisabledText, menuDisabledText, menuDisabledText, edsUtils.outlineTemplate(focus.outline));
 });
-const ItemText$1 = styled__default.default(Typography).withConfig({
+const ItemText$1 = styled__default.default(Typography$1).withConfig({
   displayName: "SidebarLink__ItemText",
   componentId: "sc-gbehcj-1"
 })(({
@@ -10808,7 +10901,7 @@ const Panel = styled__default.default.div.withConfig({
   displayName: "SideBarAccordion__Panel",
   componentId: "sc-1ekwnbi-6"
 })(["width:100%;", ""], edsUtils.bordersTemplate(border));
-const ItemText = styled__default.default(Typography).withConfig({
+const ItemText = styled__default.default(Typography$1).withConfig({
   displayName: "SideBarAccordion__ItemText",
   componentId: "sc-1ekwnbi-7"
 })(({
@@ -10996,7 +11089,7 @@ const TextWrapper = styled__default.default.div.withConfig({
   displayName: "SideBarAccordionItem__TextWrapper",
   componentId: "sc-1aeo1e1-1"
 })(["min-height:", ";grid-column:2;justify-self:start;display:flex;align-items:center;width:100%;"], minHeight);
-const Text = styled__default.default(Typography).withConfig({
+const Text = styled__default.default(Typography$1).withConfig({
   displayName: "SideBarAccordionItem__Text",
   componentId: "sc-1aeo1e1-2"
 })(({
@@ -11052,7 +11145,7 @@ SideBar.Button.displayName = 'SideBar.Button';
 SideBar.Accordion.displayName = 'SideBar.Accordion';
 SideBar.AccordionItem.displayName = 'SideBar.AccordionItem';
 
-const StyledCell = styled__default.default(Typography).withConfig({
+const StyledCell = styled__default.default(Typography$1).withConfig({
   displayName: "CalendarCell__StyledCell",
   componentId: "sc-y5ycmg-0"
 })(["display:flex;justify-content:center;align-items:center;cursor:pointer;&:hover{background-color:", ";}&:focus{outline:2px dashed rgba(0,112,121,1);}", " ", " ", " ", " ", " ", ""], edsTokens.tokens.colors.interactive.table__cell__fill_hover.rgba, ({
@@ -12075,7 +12168,7 @@ const DateRangeField = /*#__PURE__*/react.forwardRef(function (props, ref) {
     children: [/*#__PURE__*/jsxRuntime.jsx(DateFieldSegments, {
       ...props.startFieldProps,
       ref: fromRef
-    }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+    }), /*#__PURE__*/jsxRuntime.jsx(Typography$1, {
       as: 'span',
       variant: 'text',
       group: 'input',
@@ -12250,6 +12343,7 @@ exports.Accordion = Accordion;
 exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
 exports.Banner = Banner;
+exports.BodyText = BodyText;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button$1;
 exports.Card = Card;
@@ -12262,6 +12356,7 @@ exports.Dialog = Dialog;
 exports.Divider = Divider;
 exports.DotProgress = DotProgress;
 exports.EdsProvider = EdsProvider;
+exports.Heading = Heading;
 exports.Icon = Icon$1;
 exports.Input = Input$4;
 exports.InputWrapper = InputWrapper$2;
@@ -12289,6 +12384,7 @@ exports.Tabs = Tabs;
 exports.TextField = TextField;
 exports.Tooltip = Tooltip$2;
 exports.TopBar = TopBar;
-exports.Typography = Typography;
+exports.Typography = Typography$1;
+exports.UIText = UIText;
 exports.useEds = useEds;
 exports.useSideBar = useSideBar;

package/dist/esm/components/Banner/BannerMessage.js

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
-import { Typography } from '../Typography/Typography.js';
+import { Typography } from '../Typography/TypographyDeprecated/Typography.js';
 
 const StyledBannerMessage = styled(Typography).withConfig({
   displayName: "BannerMessage__StyledBannerMessage",

package/dist/esm/components/Breadcrumbs/Breadcrumb.js

@@ -2,7 +2,7 @@ import { forwardRef, useMemo } from 'react';
 import styled, { css } from 'styled-components';
 import { breadcrumbs } from './Breadcrumbs.tokens.js';
 import { jsx } from 'react/jsx-runtime';
-import { Typography } from '../Typography/Typography.js';
+import { Typography } from '../Typography/TypographyDeprecated/Typography.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 
 const {

package/dist/esm/components/Breadcrumbs/Breadcrumbs.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { breadcrumbs } from './Breadcrumbs.tokens.js';
 import { spacingsTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Typography } from '../Typography/Typography.js';
+import { Typography } from '../Typography/TypographyDeprecated/Typography.js';
 
 const {
   spacings,

package/dist/esm/components/Card/CardActions.js

@@ -2,7 +2,7 @@ import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { primary } from './Card.tokens.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Typography } from '../Typography/Typography.js';
+import { Typography } from '../Typography/TypographyDeprecated/Typography.js';
 
 const {
   spacings

package/dist/esm/components/Datepicker/calendars/CalendarCell.js

@@ -3,7 +3,7 @@ import { tokens } from '@equinor/eds-tokens';
 import { useRef, useMemo } from 'react';
 import { useCalendarCell } from 'react-aria';
 import { jsx } from 'react/jsx-runtime';
-import { Typography } from '../../Typography/Typography.js';
+import { Typography } from '../../Typography/TypographyDeprecated/Typography.js';
 import { useEds } from '../../EdsProvider/eds.context.js';
 
 const StyledCell = styled(Typography).withConfig({

package/dist/esm/components/Datepicker/fields/DateRangeField.js

@@ -2,7 +2,7 @@ import { forwardRef, useRef } from 'react';
 import { InputFieldWrapper } from './FieldWrapper.js';
 import { DateFieldSegments } from './DateFieldSegments.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Typography } from '../../Typography/Typography.js';
+import { Typography } from '../../Typography/TypographyDeprecated/Typography.js';
 
 /**
  * DateRangeField is the input field used in {@link DateRangePicker} to type in a date range.

package/dist/esm/components/Menu/MenuSection.js

@@ -4,7 +4,7 @@ import { menu } from './Menu.tokens.js';
 import { spacingsTemplate } from '@equinor/eds-utils';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Divider } from '../Divider/Divider.js';
-import { Typography } from '../Typography/Typography.js';
+import { Typography } from '../Typography/TypographyDeprecated/Typography.js';
 
 const Header = styled.div.attrs(() => ({
   tabIndex: 0

package/dist/esm/components/Pagination/Pagination.js

@@ -8,7 +8,7 @@ import { pagination } from './Pagination.tokens.js';
 import { chevron_left, chevron_right, more_horizontal } from '@equinor/eds-icons';
 import { PaginationControl } from './paginationControl.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Typography } from '../Typography/Typography.js';
+import { Typography } from '../Typography/TypographyDeprecated/Typography.js';
 
 const icons = {
   chevron_left,

package/dist/esm/components/SideBar/SideBarAccordion/index.js

@@ -7,7 +7,7 @@ import { sidebar } from '../SideBar.tokens.js';
 import { Icon } from '../../Icon/index.js';
 import { Menu } from '../../Menu/index.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Typography } from '../../Typography/Typography.js';
+import { Typography } from '../../Typography/TypographyDeprecated/Typography.js';
 import { Tooltip as Tooltip$1 } from '../../Tooltip/Tooltip.js';
 
 const {

package/dist/esm/components/SideBar/SideBarAccordionItem/index.js

@@ -4,7 +4,7 @@ import { outlineTemplate } from '@equinor/eds-utils';
 import { sidebar } from '../SideBar.tokens.js';
 import { useSideBar } from '../SideBar.context.js';
 import { jsx } from 'react/jsx-runtime';
-import { Typography } from '../../Typography/Typography.js';
+import { Typography } from '../../Typography/TypographyDeprecated/Typography.js';
 
 const {
   minWidth,

package/dist/esm/components/SideBar/SidebarLink/index.js

@@ -5,7 +5,7 @@ import { Icon } from '../../Icon/index.js';
 import styled, { css } from 'styled-components';
 import { useSideBar } from '../SideBar.context.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Typography } from '../../Typography/Typography.js';
+import { Typography } from '../../Typography/TypographyDeprecated/Typography.js';
 import { Tooltip as Tooltip$1 } from '../../Tooltip/Tooltip.js';
 
 const {

package/dist/esm/components/SideSheet/SideSheet.js

@@ -6,7 +6,7 @@ import { Button } from '../Button/index.js';
 import { Icon } from '../Icon/index.js';
 import { variants, comfortable } from './SideSheet.tokens.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Typography } from '../Typography/Typography.js';
+import { Typography } from '../Typography/TypographyDeprecated/Typography.js';
 
 const {
   background,

package/dist/esm/components/TableOfContents/TableOfContents.js

@@ -4,7 +4,7 @@ import { List } from '../List/index.js';
 import { typographyTemplate, useToken } from '@equinor/eds-utils';
 import { tableOfContents } from './TableOfContents.tokens.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Typography } from '../Typography/Typography.js';
+import { Typography } from '../Typography/TypographyDeprecated/Typography.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 
 const StyledTableOfContents = styled.nav.withConfig({

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

@@ -0,0 +1,31 @@
+import { forwardRef } from 'react';
+import { Typography } from '../_components/Typography.js';
+import { jsx } from 'react/jsx-runtime';
+
+const INTER_VERTICAL_OFFSET = 0.002;
+const BodyText = /*#__PURE__*/forwardRef(function BodyText({
+  size = 'lg',
+  lineHeight = 'default',
+  fontWeight = 'normal',
+  letterSpacing = 'normal',
+  as = 'p',
+  lines,
+  children,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsx(Typography, {
+    ref: ref,
+    as: as,
+    $type: 'ui-body',
+    $offset: INTER_VERTICAL_OFFSET,
+    $size: size,
+    $lineHeight: lineHeight,
+    $lines: lines,
+    $fontWeight: fontWeight,
+    $letterSpacing: letterSpacing,
+    ...rest,
+    children: children
+  });
+});
+
+export { BodyText };

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

@@ -0,0 +1,31 @@
+import { forwardRef } from 'react';
+import { Typography } from '../_components/Typography.js';
+import { jsx } from 'react/jsx-runtime';
+
+const EQUINOR_VERTICAL_OFFSET = 0.06;
+const Heading = /*#__PURE__*/forwardRef(function Heading({
+  size = 'lg',
+  lineHeight = 'default',
+  fontWeight = 'normal',
+  letterSpacing = 'normal',
+  lines,
+  as,
+  children,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsx(Typography, {
+    ref: ref,
+    $lineHeight: lineHeight,
+    $lines: lines,
+    $type: 'header',
+    $size: size,
+    $offset: EQUINOR_VERTICAL_OFFSET,
+    $fontWeight: fontWeight,
+    $letterSpacing: letterSpacing,
+    as: as,
+    ...rest,
+    children: children
+  });
+});
+
+export { Heading };

package/dist/esm/components/Typography/{Typography.js → TypographyDeprecated/Typography.js}

@@ -40,7 +40,7 @@ const findColor = (inputColor = null) => typeof colors[inputColor] === 'undefine
 const toVariantName = (variant, bold = false, italic = false, link = false) => `${variant}${bold ? '_bold' : ''}${italic ? '_italic' : ''}${link ? '_link' : ''}`;
 const StyledTypography = styled.p.withConfig({
   displayName: "Typography__StyledTypography",
-  componentId: "sc-179guof-0"
+  componentId: "sc-5ggzld-0"
 })(["", " ", " ", " ", ""], ({
   $typography,
   $link

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

@@ -0,0 +1,31 @@
+import { forwardRef } from 'react';
+import { Typography } from '../_components/Typography.js';
+import { jsx } from 'react/jsx-runtime';
+
+const UIText = /*#__PURE__*/forwardRef(function UIText({
+  size = 'lg',
+  lineHeight = 'default',
+  fontWeight = 'normal',
+  letterSpacing = 'normal',
+  lines,
+  as = 'p',
+  onGrid = false,
+  children,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsx(Typography, {
+    ref: ref,
+    as: as,
+    $type: 'ui-body',
+    $size: size,
+    $lineHeight: lineHeight,
+    $lines: lines,
+    $fontWeight: fontWeight,
+    $letterSpacing: letterSpacing,
+    $onGrid: onGrid,
+    ...rest,
+    children: children
+  });
+});
+
+export { UIText };

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

@@ -0,0 +1,18 @@
+import styled, { css } from 'styled-components';
+
+const Typography = styled.p.withConfig({
+  displayName: "Typography",
+  componentId: "sc-xl9v17-0"
+})(["margin:0;", ""], ({
+  $type,
+  $size,
+  $lineHeight,
+  $fontWeight,
+  $letterSpacing,
+  $offset = 0,
+  $onGrid = true,
+  $color,
+  $lines
+}) => css(["", " --_text-preset-color:", ";font-family:", ";font-size:", ";line-height:", ";font-weight:", ";letter-spacing:", ";color:var(--_text-preset-color,inherit);--_offset:calc(", " * 1em);--_grid-base:4px;@supports (height:round(up,10px,1px)){--_rest-top:", ";--_rest-bottom:", ";}--_trim-top:calc(((((1lh - 1cap) / 2) - var(--_offset)) * -1));--_trim-bottom:calc(((((1lh - 1cap) / 2) + var(--_offset)) * -1));&::before{margin-bottom:calc(var(--_trim-top) + var(--_rest-top,0cap));}&::after{margin-top:calc(var(--_trim-bottom) + var(--_rest-bottom,0cap));}&::before,&::after{display:table;content:'';}"], $lines && css(["display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;"], $lines), $color, `var(--eds-typography-${$type}-font-family)`, `var(--eds-typography-${$type}-${$size}-font-size)`, `var(--eds-typography-${$type}-${$size}-lineheight-${$lineHeight})`, `var(--eds-typography-${$type}-${$size}-font-weight-${$fontWeight})`, `var(--eds-typography-${$type}-${$size}-tracking-${$letterSpacing})`, $offset, $onGrid ? 'calc(round(nearest, 1cap, var(--_grid-base)) - 1cap)' : 'calc((round(nearest, 1cap, var(--_grid-base)) - 1cap) / 2)', $onGrid ? '0cap' : 'calc((round(nearest, 1cap, var(--_grid-base)) - 1cap) / 2)'));
+
+export { Typography };

package/dist/esm/index.js

@@ -15,7 +15,10 @@ export { Progress } from './components/Progress/index.js';
 export { Breadcrumbs } from './components/Breadcrumbs/index.js';
 export { Menu } from './components/Menu/index.js';
 export { SideBar } from './components/SideBar/index.js';
-export { Typography } from './components/Typography/Typography.js';
+export { Typography } from './components/Typography/TypographyDeprecated/Typography.js';
+export { BodyText } from './components/Typography/BodyText/BodyText.js';
+export { UIText } from './components/Typography/UIText/UIText.js';
+export { Heading } from './components/Typography/Heading/Heading.js';
 export { Divider } from './components/Divider/Divider.js';
 export { TextField } from './components/TextField/TextField.js';
 export { Scrim } from './components/Scrim/Scrim.js';

package/dist/types/components/Banner/BannerMessage.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TypographyProps } from '../Typography/Typography';
+import { TypographyProps } from '../Typography';
 export type BannerMessageProps = {
     /** Text content */
     children: string;

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

@@ -0,0 +1,4 @@
+import { TypographyProps } from '../typography.types';
+import { OverridableComponent } from '@equinor/eds-utils';
+export type BodyTextProps = TypographyProps;
+export declare const BodyText: OverridableComponent<BodyTextProps, HTMLElement>;

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

@@ -0,0 +1,8 @@
+import { ElementType } from 'react';
+import { TypographyProps } from '../typography.types';
+import { OverridableComponent } from '@equinor/eds-utils';
+export type HeadingProps = TypographyProps & {
+    /** "as" is required in Heading due to the a11y importance of using the correct level */
+    as: ElementType;
+};
+export declare const Heading: OverridableComponent<HeadingProps, HTMLElement>;

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

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

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

@@ -0,0 +1,9 @@
+import { TypographyProps } from '../typography.types';
+import { OverridableComponent } from '@equinor/eds-utils';
+export type UITextProps = TypographyProps & {
+    /** When true, text is pushed to the bottom of its text-box (making it "on grid" as the total heigth is rounded to a multiple of 4px), when false it is centered within the text-box
+     * @default false
+     */
+    onGrid?: boolean;
+};
+export declare const UIText: OverridableComponent<UITextProps, HTMLElement>;

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

@@ -0,0 +1,14 @@
+import { HTMLAttributes, AnchorHTMLAttributes } from 'react';
+import { TypographySize, TypographyLineHeight, TypographyElement, TypographyFontWeight, TypographyLetterSpacing } from '../typography.types';
+export type StyleHeadingProps = {
+    $type: TypographyElement;
+    $size: TypographySize;
+    $lineHeight: TypographyLineHeight;
+    $fontWeight: TypographyFontWeight;
+    $letterSpacing: TypographyLetterSpacing;
+    $offset?: number;
+    $onGrid?: boolean;
+    $color?: string;
+    $lines?: number;
+} & (HTMLAttributes<HTMLElement> | AnchorHTMLAttributes<HTMLAnchorElement>);
+export declare const Typography: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, StyleHeadingProps>> & string;

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

@@ -1 +1,4 @@
-export * from './Typography';
+export * from './TypographyDeprecated/Typography';
+export * from './BodyText/BodyText';
+export * from './UIText/UIText';
+export * from './Heading/Heading';

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

@@ -0,0 +1,13 @@
+export type TypographySize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+export type TypographyLineHeight = 'default' | 'squished';
+export type TypographyElement = 'header' | 'ui-body';
+export type TypographyFontWeight = 'bolder' | 'normal' | 'lighter';
+export type TypographyLetterSpacing = 'loose' | 'normal' | 'tight';
+export type TypographyProps = {
+    size?: TypographySize;
+    lineHeight?: TypographyLineHeight;
+    fontWeight?: TypographyFontWeight;
+    letterSpacing?: TypographyLetterSpacing;
+    /** Trunkate to n number of lines. */
+    lines?: number;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.40.0",
+  "version": "1.0.0-beta.1",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -79,6 +79,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.0",
+    "@equinor/eds-tokens": "1.0.0-beta-2",
     "@floating-ui/react": "^0.26.13",
     "@internationalized/date": "^3.5.3",
     "@react-aria/utils": "^3.24.0",
@@ -89,7 +90,6 @@
     "downshift": "9.0.6",
     "react-aria": "^3.33.0",
     "@equinor/eds-icons": "^0.21.0",
-    "@equinor/eds-tokens": "0.9.2",
     "@equinor/eds-utils": "0.8.5"
   },
   "scripts": {