@equinor/eds-core-react 1.0.2 → 2.0.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: {
@@ -2601,6 +2747,64 @@ const InputWrapper$2 = /*#__PURE__*/react.forwardRef(function InputWrapper({
   });
 });
 
+/**
+ * Shared hook for TextField and Textarea that handles common logic
+ * for IDs, labels, helper text, and ARIA attributes
+ */
+const useInputField = ({
+  id,
+  label,
+  meta,
+  helperText,
+  helperIcon,
+  variant,
+  disabled,
+  className,
+  style
+}) => {
+  const generatedFieldId = react.useId();
+  const generatedHelperTextId = react.useId();
+
+  // Use provided ID or fall back to generated one
+  const fieldId = id ?? generatedFieldId;
+  const helperTextId = generatedHelperTextId;
+  const hasHelperText = Boolean(helperText);
+  const containerProps = {
+    className,
+    style: {
+      width: '100%',
+      ...style
+    },
+    color: variant
+  };
+  const labelProps = {
+    htmlFor: fieldId,
+    label,
+    meta,
+    disabled
+  };
+  const helperProps = {
+    id: hasHelperText ? helperTextId : null,
+    text: helperText,
+    icon: helperIcon
+  };
+  const ariaProps = {
+    id: fieldId,
+    'aria-invalid': variant === 'error' || undefined,
+    ...(hasHelperText && {
+      'aria-describedby': helperTextId
+    })
+  };
+  return {
+    fieldId,
+    helperTextId: hasHelperText ? helperTextId : null,
+    containerProps,
+    labelProps,
+    helperProps,
+    ariaProps
+  };
+};
+
 const {
   colors: {
     ui: {
@@ -2942,148 +3146,145 @@ const Input$4 = /*#__PURE__*/react.forwardRef(function Input({
   );
 });
 
-const {
-  input
-} = tokens$5;
-const Textarea = /*#__PURE__*/react.forwardRef(function Textarea({
-  variant,
-  disabled = false,
-  type = 'text',
-  rowsMax,
-  ...other
-}, ref) {
-  const [textareaEl, setTextareaEl] = react.useState(null);
-  const {
-    density
-  } = useEds();
-  const spacings = density === 'compact' ? input.modes.compact.spacings : input.spacings;
-  const {
-    lineHeight
-  } = input$1.typography;
-  const {
-    top,
-    bottom
-  } = spacings;
-  let fontSize = 16;
-  if (textareaEl) {
-    fontSize = parseInt(window.getComputedStyle(textareaEl).fontSize);
-  }
-  const padding = parseInt(top) + parseInt(bottom);
-  const maxHeight = parseFloat(lineHeight) * fontSize * rowsMax + padding;
-  edsUtils.useAutoResize(textareaEl, rowsMax ? maxHeight : null);
-  const combinedRef = react.useCallback(() => edsUtils.mergeRefs(ref, setTextareaEl), [setTextareaEl, ref])();
-  const inputProps = {
-    ref: combinedRef,
-    type,
-    disabled,
-    variant,
-    ...other
-  };
-  const leftAdornmentStyles = {
-    style: {
-      alignItems: 'flex-start'
-    }
-  };
-  const rigthAdornmentStyles = {
-    style: {
-      alignItems: 'flex-start',
-      pointerEvents: 'none'
-    }
-  };
-  return /*#__PURE__*/jsxRuntime.jsx(Input$4, {
-    as: "textarea",
-    rightAdornmentsProps: rigthAdornmentStyles,
-    leftAdornmentsProps: leftAdornmentStyles,
-    style: {
-      height: 'auto'
-    },
-    ...inputProps
-  });
-});
-
-/** Proxy component for working around typescript and element type switching */
-const Field = /*#__PURE__*/react.forwardRef(function Field(props, ref) {
-  return props.$multiline ? /*#__PURE__*/jsxRuntime.jsx(Textarea, {
-    ref: ref,
-    ...props
-  }) : /*#__PURE__*/jsxRuntime.jsx(Input$4, {
-    ref: ref,
-    ...props
-  });
-});
 const TextField = /*#__PURE__*/react.forwardRef(function TextField({
-  id: _id,
+  id,
   label,
   meta,
   unit,
   helperText,
   placeholder,
   disabled,
-  multiline = false,
   className,
   variant,
   inputIcon,
   helperIcon,
   style,
-  rowsMax,
-  textareaRef,
   inputRef,
   ...other
 }, ref) {
-  const id = edsUtils.useId(_id, 'input');
-  const helperTextId = edsUtils.useId(null, 'helpertext');
+  const {
+    ariaProps,
+    containerProps,
+    labelProps,
+    helperProps
+  } = useInputField({
+    id,
+    label,
+    meta,
+    helperText,
+    helperIcon,
+    variant,
+    disabled,
+    className,
+    style
+  });
   const hasRightAdornments = Boolean(unit || inputIcon);
-  let fieldProps = {
-    'aria-invalid': variant === 'error' || undefined,
+  const fieldProps = {
+    ...ariaProps,
     disabled,
     placeholder,
-    id,
     variant,
     rightAdornments: hasRightAdornments && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [inputIcon, /*#__PURE__*/jsxRuntime.jsx("span", {
         children: unit
       })]
     }),
-    rowsMax,
-    ref: ref || inputRef || textareaRef,
-    $multiline: multiline,
+    ref: ref || inputRef,
     ...other
   };
-  let helperProps = {
-    id: null,
-    text: helperText,
-    icon: helperIcon,
-    disabled
-  };
-  const containerProps = {
+  return /*#__PURE__*/jsxRuntime.jsx(InputWrapper$2, {
+    helperProps: helperProps,
+    labelProps: labelProps,
+    ...containerProps,
+    children: /*#__PURE__*/jsxRuntime.jsx(Input$4, {
+      ...fieldProps
+    })
+  });
+});
+
+const {
+  input
+} = tokens$5;
+const leftAdornmentStyles = {
+  style: {
+    alignItems: 'flex-start'
+  }
+};
+const rightAdornmentStyles = {
+  style: {
+    alignItems: 'flex-start',
+    pointerEvents: 'none'
+  }
+};
+const Textarea = /*#__PURE__*/react.forwardRef(function Textarea({
+  id,
+  label,
+  meta,
+  helperText,
+  placeholder,
+  disabled,
+  className,
+  variant,
+  inputIcon,
+  helperIcon,
+  style,
+  rowsMax,
+  ...other
+}, ref) {
+  const {
+    ariaProps,
+    containerProps,
+    labelProps,
+    helperProps
+  } = useInputField({
+    id,
+    label,
+    meta,
+    helperText,
+    helperIcon,
+    variant,
+    disabled,
     className,
+    style
+  });
+  const {
+    density
+  } = useEds();
+  const spacings = density === 'compact' ? input.modes.compact.spacings : input.spacings;
+  const {
+    lineHeight
+  } = input$1.typography;
+  const {
+    top,
+    bottom
+  } = spacings;
+
+  // Calculate maxHeight if rowsMax is provided
+  // Using default fontSize of 16px for initial calculation
+  // useAutoResize will handle actual resizing based on element's scrollHeight
+  const maxHeight = rowsMax ? parseFloat(lineHeight) * 16 * rowsMax + parseInt(top) + parseInt(bottom) : null;
+  const autoResizeRef = edsUtils.useAutoResize(maxHeight);
+  const combinedRef = react.useMemo(() => edsUtils.mergeRefs(ref, autoResizeRef), [ref, autoResizeRef]);
+  const fieldProps = {
+    ...ariaProps,
+    disabled,
+    placeholder,
+    variant,
+    rightAdornments: inputIcon,
+    rightAdornmentsProps: rightAdornmentStyles,
+    leftAdornmentsProps: leftAdornmentStyles,
+    as: 'textarea',
+    ref: combinedRef,
     style: {
-      width: '100%',
-      ...style
+      height: 'auto'
     },
-    color: variant
-  };
-  const labelProps = {
-    htmlFor: id,
-    label,
-    meta,
-    disabled
+    ...other
   };
-  if (helperText) {
-    fieldProps = {
-      'aria-describedby': helperTextId,
-      ...fieldProps
-    };
-    helperProps = {
-      ...helperProps,
-      id: helperTextId
-    };
-  }
   return /*#__PURE__*/jsxRuntime.jsx(InputWrapper$2, {
     helperProps: helperProps,
     labelProps: labelProps,
     ...containerProps,
-    children: /*#__PURE__*/jsxRuntime.jsx(Field, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Input$4, {
       ...fieldProps
     })
   });
@@ -3170,7 +3371,7 @@ const Icon$2 = /*#__PURE__*/react.forwardRef(function Icon({
   };
 
   // Accessibility
-  const titleId = edsUtils.useId(null, `${icon.prefix}-${icon.name}`);
+  const titleId = react.useId();
   if (title) {
     svgProps = {
       ...svgProps,
@@ -3386,7 +3587,8 @@ const Accordion$1 = /*#__PURE__*/react.forwardRef(function Accordion({
   id,
   ...props
 }, ref) {
-  const accordionId = edsUtils.useId(id, 'accordion');
+  const generatedAccordionId = react.useId();
+  const accordionId = id ?? generatedAccordionId;
   const {
     density
   } = useEds();
@@ -3898,7 +4100,8 @@ const Tabs$1 = /*#__PURE__*/react.forwardRef(function Tabs({
   id,
   ...props
 }, ref) {
-  const tabsId = edsUtils.useId(id, 'tabs');
+  const generatedTabsId = react.useId();
+  const tabsId = id ?? generatedTabsId;
   const tabsRef = react.useRef(null);
   const combinedTabsRef = react.useMemo(() => edsUtils.mergeRefs(tabsRef, ref), [tabsRef, ref]);
   const [tabsFocused, setTabsFocused] = react.useState(false);
@@ -6006,9 +6209,12 @@ const Slider = /*#__PURE__*/react.forwardRef(function Slider({
       setMousePressed(false);
     }
   };
-  let inputIdA = edsUtils.useId(null, 'inputA');
-  let inputIdB = edsUtils.useId(null, 'inputB');
-  let inputId = edsUtils.useId(null, 'thumb');
+  const generatedInputIdA = react.useId();
+  const generatedInputIdB = react.useId();
+  const generatedInputId = react.useId();
+  let inputIdA = generatedInputIdA;
+  let inputIdB = generatedInputIdB;
+  let inputId = generatedInputId;
   if (rest['id']) {
     const overrideId = rest['id'];
     inputIdA = `${overrideId}-thumb-a`;
@@ -9703,6 +9909,8 @@ const defaultOptionDisabled = () => false;
 
 // MARK: component
 function AutocompleteInner(props, ref) {
+  const [controlledHighlightedIndex, setControlledHighlightedIndex] = react.useState(0);
+  const [lastScrollOffset, setLastScrollOffset] = react.useState(0);
   const {
     options = [],
     totalOptions,
@@ -9774,6 +9982,7 @@ function AutocompleteInner(props, ref) {
     if (onAddNewOption) return [AddSymbol, ..._availableItems];
     return _availableItems;
   }, [_availableItems, showSelectAll, onAddNewOption]);
+  const getSelectedIndex = react.useCallback(selectedItem => availableItems.findIndex(item => itemCompare ? itemCompare(item, selectedItem) : item === selectedItem), [availableItems, itemCompare]);
 
   //issue 2304, update dataset when options are added dynamically
   react.useEffect(() => {
@@ -9911,20 +10120,18 @@ function AutocompleteInner(props, ref) {
       }));
     },
     onHighlightedIndexChange({
-      highlightedIndex,
-      type
+      highlightedIndex
     }) {
-      if (type == downshift.useCombobox.stateChangeTypes.InputClick || type == downshift.useCombobox.stateChangeTypes.InputKeyDownArrowDown && !isOpen || type == downshift.useCombobox.stateChangeTypes.InputKeyDownArrowUp && !isOpen) {
-        //needs delay for dropdown to render before calling scroll
-        setTimeout(() => {
+      if (highlightedIndex >= 0 && rowVirtualizer.getVirtualItems) {
+        const visibleIndexes = rowVirtualizer.getVirtualItems().map(v => v.index);
+        if (!visibleIndexes.includes(highlightedIndex)) {
           rowVirtualizer.scrollToIndex(highlightedIndex, {
             align: allowSelectAll ? 'center' : 'auto'
           });
-        }, 1);
-      } else if (type !== downshift.useCombobox.stateChangeTypes.ItemMouseMove && type !== downshift.useCombobox.stateChangeTypes.MenuMouseLeave && highlightedIndex >= 0) {
-        rowVirtualizer.scrollToIndex(highlightedIndex, {
-          align: allowSelectAll ? 'center' : 'auto'
-        });
+        }
+      }
+      if (typeof rowVirtualizer.scrollOffset === 'number') {
+        setLastScrollOffset(rowVirtualizer.scrollOffset);
       }
     },
     onIsOpenChange: ({
@@ -9932,6 +10139,19 @@ function AutocompleteInner(props, ref) {
     }) => {
       if (!multiple && selectedItem !== null) {
         setAvailableItems(options);
+        setTimeout(() => {
+          if (controlledHighlightedIndex === 0) {
+            rowVirtualizer.scrollToOffset?.(0);
+          } else if (rowVirtualizer.scrollToOffset && lastScrollOffset > 0) {
+            rowVirtualizer.scrollToOffset(lastScrollOffset);
+          }
+          const visibleIndexes = rowVirtualizer.getVirtualItems?.().map(v => v.index) || [];
+          if (!visibleIndexes.includes(controlledHighlightedIndex)) {
+            rowVirtualizer.scrollToIndex(controlledHighlightedIndex, {
+              align: allowSelectAll ? 'center' : 'auto'
+            });
+          }
+        }, 10);
       }
     },
     onStateChange: ({
@@ -9971,6 +10191,8 @@ function AutocompleteInner(props, ref) {
       ...comboBoxProps,
       onSelectedItemChange: changes => {
         if (changes.selectedItem === AddSymbol) return;
+        const idx = getSelectedIndex(changes.selectedItem);
+        setControlledHighlightedIndex(idx >= 0 ? idx : 0);
         if (onOptionsChange) {
           let {
             selectedItem
@@ -9983,7 +10205,7 @@ function AutocompleteInner(props, ref) {
           });
         }
       },
-      stateReducer: (_, actionAndChanges) => {
+      stateReducer: (state, actionAndChanges) => {
         const {
           changes,
           type
@@ -9992,19 +10214,25 @@ function AutocompleteInner(props, ref) {
           case downshift.useCombobox.stateChangeTypes.InputClick:
             return {
               ...changes,
-              isOpen: !(disabled || readOnly)
+              isOpen: !(disabled || readOnly),
+              highlightedIndex: controlledHighlightedIndex
             };
           case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
           case downshift.useCombobox.stateChangeTypes.ItemClick:
-            if (changes.selectedItem === AddSymbol) {
+            {
+              if (changes.selectedItem === AddSymbol) {
+                return {
+                  ...changes,
+                  inputValue: ''
+                };
+              }
+              const idx = getSelectedIndex(changes.selectedItem);
+              setControlledHighlightedIndex(idx >= 0 ? idx : 0);
               return {
                 ...changes,
-                inputValue: ''
+                highlightedIndex: idx >= 0 ? idx : 0
               };
             }
-            return {
-              ...changes
-            };
           case downshift.useCombobox.stateChangeTypes.InputBlur:
             return {
               ...changes,
@@ -10016,13 +10244,19 @@ function AutocompleteInner(props, ref) {
               ...changes
             };
           case downshift.useCombobox.stateChangeTypes.InputKeyDownArrowDown:
-          case downshift.useCombobox.stateChangeTypes.InputKeyDownHome:
             if (readOnly) {
               return {
                 ...changes,
                 isOpen: false
               };
             }
+            if (state.isOpen === false) {
+              return {
+                ...changes,
+                isOpen: true,
+                highlightedIndex: controlledHighlightedIndex
+              };
+            }
             return {
               ...changes,
               highlightedIndex: findNextIndex({
@@ -10032,14 +10266,36 @@ function AutocompleteInner(props, ref) {
                 allDisabled
               })
             };
+          case downshift.useCombobox.stateChangeTypes.InputKeyDownHome:
+            if (readOnly) {
+              return {
+                ...changes,
+                isOpen: false
+              };
+            }
+            return {
+              ...changes,
+              highlightedIndex: findNextIndex({
+                index: 0,
+                availableItems,
+                optionDisabled,
+                allDisabled
+              })
+            };
           case downshift.useCombobox.stateChangeTypes.InputKeyDownArrowUp:
-          case downshift.useCombobox.stateChangeTypes.InputKeyDownEnd:
             if (readOnly) {
               return {
                 ...changes,
                 isOpen: false
               };
             }
+            if (state.isOpen === false) {
+              return {
+                ...changes,
+                isOpen: true,
+                highlightedIndex: controlledHighlightedIndex
+              };
+            }
             return {
               ...changes,
               highlightedIndex: findPrevIndex({
@@ -10049,10 +10305,27 @@ function AutocompleteInner(props, ref) {
                 allDisabled
               })
             };
+          case downshift.useCombobox.stateChangeTypes.InputKeyDownEnd:
+            if (readOnly) {
+              return {
+                ...changes,
+                isOpen: false
+              };
+            }
+            return {
+              ...changes,
+              highlightedIndex: findPrevIndex({
+                index: availableItems.length - 1,
+                availableItems,
+                optionDisabled,
+                allDisabled
+              })
+            };
           case downshift.useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
             setSelectedItems([changes.selectedItem]);
             return {
-              ...changes
+              ...changes,
+              highlightedIndex: controlledHighlightedIndex
             };
           default:
             return changes;
@@ -11055,7 +11328,8 @@ const SideBarAccordion = /*#__PURE__*/react.forwardRef(function SideBarAccordion
   disabled,
   ...rest
 }, ref) {
-  const accordionId = edsUtils.useId(id, 'accordion');
+  const generatedAccordionId = react.useId();
+  const accordionId = id ?? generatedAccordionId;
   const [menuIsOpen, setMenuIsOpen] = react.useState(false);
   const [accordionIsOpen, setAccordionIsOpen] = react.useState(isExpanded);
   const [anchorEl, setAnchorEl] = react.useState(null);
@@ -11874,6 +12148,12 @@ const FieldWrapper = /*#__PURE__*/react.forwardRef(({
   readonly,
   ...props
 }, ref) => {
+  const [anchorEl, setAnchorEl] = react.useState(null);
+  react.useEffect(() => {
+    if (ref && typeof ref !== 'function' && ref.current) {
+      setAnchorEl(ref.current);
+    }
+  }, [ref]);
   react.useEffect(() => {
     if (isOpen === false) {
       // Focus the first segment in the input field
@@ -11896,7 +12176,7 @@ const FieldWrapper = /*#__PURE__*/react.forwardRef(({
     }), /*#__PURE__*/jsxRuntime.jsx(Popover, {
       open: isOpen ?? false,
       onClose: () => setIsOpen(false),
-      anchorEl: ref.current,
+      anchorEl: anchorEl,
       placement: 'bottom-start',
       children: calendar
     })]
@@ -12600,6 +12880,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 +12894,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;
@@ -12651,6 +12933,7 @@ exports.TableOfContentsLinkItem = LinkItem;
 exports.TableRow = Row;
 exports.Tabs = Tabs;
 exports.TextField = TextField;
+exports.Textarea = Textarea;
 exports.ToggleButton = ToggleButton;
 exports.Tooltip = Tooltip$2;
 exports.TopBar = TopBar;
@@ -12658,5 +12941,7 @@ exports.TopbarActions = Actions;
 exports.TopbarCustomContent = CustomContent;
 exports.TopbarHeader = Header$2;
 exports.Typography = Typography;
+exports.TypographyNext = TypographyNext;
 exports.useEds = useEds;
+exports.useInputField = useInputField;
 exports.useSideBar = useSideBar;