@equinor/eds-core-react 2.3.2 → 2.3.4-beta.0

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

@@ -1,20 +1,29 @@
 import { useDateFieldState } from '@react-stately/datepicker';
 import { useDateField } from 'react-aria';
-import { createCalendar } from '@internationalized/date';
+import { CalendarDate, createCalendar } from '@internationalized/date';
 import { DateSegment } from './DateSegment.js';
 import { forwardRef } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 // In some cases we need to use the index as key
 /* eslint-disable react/no-array-index-key */
+// Use January 1st as placeholder when no value is set.
+// This ensures the day segment allows values up to 31,
+// preventing eager auto-advance when typing "3" (which
+// would otherwise auto-complete to "03" in months with
+// fewer than 30 days, like February).
+const DEFAULT_PLACEHOLDER = new CalendarDate(new Date().getFullYear(), 1, 1);
+
 /**
  * A field that wraps segments for inputting a date / date-time
  */
 const DateFieldSegments = /*#__PURE__*/forwardRef((props, ref) => {
+  const placeholderValue = props.placeholderValue ?? DEFAULT_PLACEHOLDER;
   const state = useDateFieldState({
     ...props,
     locale: props.locale,
-    createCalendar
+    createCalendar,
+    placeholderValue
   });
   const {
     fieldProps

package/dist/esm/components/Datepicker/utils/get-calendar-date.js

@@ -1,4 +1,4 @@
-import { toCalendarDateTime, toCalendarDate, fromDate } from '@internationalized/date';
+import { toCalendarDateTime, fromDate, toCalendarDate } from '@internationalized/date';
 
 const getCalendarDate = (value, timezone, showTimeInput = false) => {
   if (!value) return null;

package/dist/esm/components/Datepicker/utils/getLocalizedValidationErrors.js

@@ -0,0 +1,164 @@
+import { DateFormatter } from '@internationalized/date';
+
+/**
+ * Validation message translations matching @react-stately/datepicker's built-in messages.
+ * Sourced from @react-stately/datepicker's intlStrings bundle.
+ * Unsupported locales fall back to English.
+ */
+const allTranslations = {
+  'en-US': {
+    rangeUnderflow: args => `Value must be ${args.minValue} or later.`,
+    rangeOverflow: args => `Value must be ${args.maxValue} or earlier.`,
+    unavailableDate: 'Selected date unavailable.'
+  },
+  'nb-NO': {
+    rangeUnderflow: args => `Verdien m\u00e5 v\u00e6re ${args.minValue} eller senere.`,
+    rangeOverflow: args => `Verdien m\u00e5 v\u00e6re ${args.maxValue} eller tidligere.`,
+    unavailableDate: 'Valgt dato utilgjengelig.'
+  },
+  'da-DK': {
+    rangeUnderflow: args => `V\u00e6rdien skal v\u00e6re ${args.minValue} eller senere.`,
+    rangeOverflow: args => `V\u00e6rdien skal v\u00e6re ${args.maxValue} eller tidligere.`,
+    unavailableDate: 'Den valgte dato er ikke tilg\u00e6ngelig.'
+  },
+  'sv-SE': {
+    rangeUnderflow: args => `V\u00e4rdet m\u00e5ste vara ${args.minValue} eller senare.`,
+    rangeOverflow: args => `V\u00e4rdet m\u00e5ste vara ${args.maxValue} eller tidigare.`,
+    unavailableDate: 'Valt datum \u00e4r inte tillg\u00e4ngligt.'
+  },
+  'de-DE': {
+    rangeUnderflow: args => `Der Wert muss ${args.minValue} oder sp\u00e4ter sein.`,
+    rangeOverflow: args => `Der Wert muss ${args.maxValue} oder fr\u00fcher sein.`,
+    unavailableDate: 'Das ausgew\u00e4hlte Datum ist nicht verf\u00fcgbar.'
+  },
+  'fr-FR': {
+    rangeUnderflow: args => `La valeur doit \u00eatre ${args.minValue} ou ult\u00e9rieure.`,
+    rangeOverflow: args => `La valeur doit \u00eatre ${args.maxValue} ou ant\u00e9rieure.`,
+    unavailableDate: 'Date s\u00e9lectionn\u00e9e non disponible.'
+  },
+  'es-ES': {
+    rangeUnderflow: args => `El valor debe ser ${args.minValue} o posterior.`,
+    rangeOverflow: args => `El valor debe ser ${args.maxValue} o anterior.`,
+    unavailableDate: 'Fecha seleccionada no disponible.'
+  },
+  'pt-BR': {
+    rangeUnderflow: args => `O valor deve ser ${args.minValue} ou posterior.`,
+    rangeOverflow: args => `O valor deve ser ${args.maxValue} ou anterior.`,
+    unavailableDate: 'Data selecionada indispon\u00edvel.'
+  },
+  'pt-PT': {
+    rangeUnderflow: args => `O valor tem de ser ${args.minValue} ou posterior.`,
+    rangeOverflow: args => `O valor tem de ser ${args.maxValue} ou anterior.`,
+    unavailableDate: 'Data selecionada indispon\u00edvel.'
+  },
+  'pl-PL': {
+    rangeUnderflow: args => `Warto\u015b\u0107 musi wynosi\u0107 ${args.minValue} lub p\u00f3\u017aniej.`,
+    rangeOverflow: args => `Warto\u015b\u0107 musi wynosi\u0107 ${args.maxValue} lub wcze\u015bniej.`,
+    unavailableDate: 'Wybrana data jest niedost\u0119pna.'
+  },
+  'nl-NL': {
+    rangeUnderflow: args => `Waarde moet ${args.minValue} of later zijn.`,
+    rangeOverflow: args => `Waarde moet ${args.maxValue} of eerder zijn.`,
+    unavailableDate: 'Geselecteerde datum niet beschikbaar.'
+  },
+  'it-IT': {
+    rangeUnderflow: args => `Il valore deve essere ${args.minValue} o successivo.`,
+    rangeOverflow: args => `Il valore deve essere ${args.maxValue} o precedente.`,
+    unavailableDate: 'Data selezionata non disponibile.'
+  },
+  'ja-JP': {
+    rangeUnderflow: args => `\u5024\u306f${args.minValue}\u4ee5\u964d\u3067\u3042\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002`,
+    rangeOverflow: args => `\u5024\u306f${args.maxValue}\u4ee5\u524d\u3067\u3042\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002`,
+    unavailableDate: '\u9078\u629e\u3057\u305f\u65e5\u4ed8\u306f\u5229\u7528\u3067\u304d\u307e\u305b\u3093\u3002'
+  },
+  'ko-KR': {
+    rangeUnderflow: args => `\uac12\uc740 ${args.minValue} \uc774\ud6c4\uc5ec\uc57c \ud569\ub2c8\ub2e4.`,
+    rangeOverflow: args => `\uac12\uc740 ${args.maxValue} \uc774\uc804\uc774\uc5b4\uc57c \ud569\ub2c8\ub2e4.`,
+    unavailableDate: '\uc120\ud0dd\ud55c \ub0a0\uc9dc\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.'
+  },
+  'zh-CN': {
+    rangeUnderflow: args => `\u503c\u5fc5\u987b\u4e3a ${args.minValue} \u6216\u66f4\u665a\u3002`,
+    rangeOverflow: args => `\u503c\u5fc5\u987b\u4e3a ${args.maxValue} \u6216\u66f4\u65e9\u3002`,
+    unavailableDate: '\u6240\u9009\u65e5\u671f\u4e0d\u53ef\u7528\u3002'
+  },
+  'zh-TW': {
+    rangeUnderflow: args => `\u503c\u5fc5\u9808\u70ba ${args.minValue} \u6216\u66f4\u665a\u3002`,
+    rangeOverflow: args => `\u503c\u5fc5\u9808\u70ba ${args.maxValue} \u6216\u66f4\u65e9\u3002`,
+    unavailableDate: '\u6240\u9078\u65e5\u671f\u4e0d\u53ef\u7528\u3002'
+  },
+  'ru-RU': {
+    rangeUnderflow: args => `\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c ${args.minValue} \u0438\u043b\u0438 \u043f\u043e\u0437\u0436\u0435.`,
+    rangeOverflow: args => `\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c ${args.maxValue} \u0438\u043b\u0438 \u0440\u0430\u043d\u044c\u0448\u0435.`,
+    unavailableDate: '\u0412\u044b\u0431\u0440\u0430\u043d\u043d\u0430\u044f \u0434\u0430\u0442\u0430 \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430.'
+  },
+  'uk-UA': {
+    rangeUnderflow: args => `\u0417\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u043c\u0430\u0454 \u0431\u0443\u0442\u0438 ${args.minValue} \u0430\u0431\u043e \u043f\u0456\u0437\u043d\u0456\u0448\u0435.`,
+    rangeOverflow: args => `\u0417\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u043c\u0430\u0454 \u0431\u0443\u0442\u0438 ${args.maxValue} \u0430\u0431\u043e \u0440\u0430\u043d\u0456\u0448\u0435.`,
+    unavailableDate: '\u0412\u0438\u0431\u0440\u0430\u043d\u0430 \u0434\u0430\u0442\u0430 \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430.'
+  },
+  'ar-AE': {
+    rangeUnderflow: args => `\u064a\u062c\u0628 \u0623\u0646 \u062a\u0643\u0648\u0646 \u0627\u0644\u0642\u064a\u0645\u0629 ${args.minValue} \u0623\u0648 \u0623\u062d\u062f\u062b.`,
+    rangeOverflow: args => `\u064a\u062c\u0628 \u0623\u0646 \u062a\u0643\u0648\u0646 \u0627\u0644\u0642\u064a\u0645\u0629 ${args.maxValue} \u0623\u0648 \u0623\u0642\u062f\u0645.`,
+    unavailableDate: '\u0627\u0644\u062a\u0627\u0631\u064a\u062e \u0627\u0644\u0645\u062d\u062f\u062f \u063a\u064a\u0631 \u0645\u062a\u0627\u062d.'
+  },
+  'fi-FI': {
+    rangeUnderflow: args => `Arvon on oltava ${args.minValue} tai my\u00f6hempi.`,
+    rangeOverflow: args => `Arvon on oltava ${args.maxValue} tai aikaisempi.`,
+    unavailableDate: 'Valittu p\u00e4iv\u00e4m\u00e4\u00e4r\u00e4 ei ole k\u00e4ytett\u00e4viss\u00e4.'
+  }
+};
+const englishFallback = allTranslations['en-US'];
+
+/**
+ * Find the best matching locale from available translations.
+ * Tries exact match first (e.g. "nb-NO"), then language prefix match (e.g. "nb" → "nb-NO").
+ */
+function findLocaleMessages(locale) {
+  if (allTranslations[locale]) return allTranslations[locale];
+  const language = Intl.Locale ? new Intl.Locale(locale).language : locale.split('-')[0];
+
+  // First match wins: e.g. "pt" → "pt-BR", "zh" → "zh-CN"
+  for (const key of Object.keys(allTranslations)) {
+    const keyLang = key.split('-')[0];
+    if (keyLang === language) return allTranslations[key];
+  }
+  return englishFallback;
+}
+function formatMessage(msg, args) {
+  return typeof msg === 'function' ? msg(args) : msg;
+}
+
+/**
+ * Generates validation error messages using the provided locale instead of
+ * navigator.language (which is what react-stately uses internally).
+ *
+ * This fixes the issue where validation messages appear in the browser's
+ * language rather than the locale configured via I18nProvider.
+ */
+function getLocalizedValidationErrors(validationDetails, locale, minValue, maxValue, timezone) {
+  const msgs = findLocaleMessages(locale);
+  const dateFormatter = new DateFormatter(locale, {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric'
+  });
+  const timeZone = timezone ?? dateFormatter.resolvedOptions().timeZone;
+  const errors = [];
+  if (validationDetails.rangeUnderflow && minValue && msgs.rangeUnderflow) {
+    errors.push(formatMessage(msgs.rangeUnderflow, {
+      minValue: dateFormatter.format(minValue.toDate(timeZone))
+    }));
+  }
+  if (validationDetails.rangeOverflow && maxValue && msgs.rangeOverflow) {
+    errors.push(formatMessage(msgs.rangeOverflow, {
+      maxValue: dateFormatter.format(maxValue.toDate(timeZone))
+    }));
+  }
+  // react-stately maps isDateUnavailable to badInput (not customError)
+  if (validationDetails.badInput && msgs.unavailableDate) {
+    errors.push(formatMessage(msgs.unavailableDate, {}));
+  }
+  return errors;
+}
+
+export { getLocalizedValidationErrors };

package/dist/esm/components/EdsProvider/eds.context.js

@@ -1,4 +1,4 @@
-import { useContext, useState, useEffect, createContext } from 'react';
+import { useState, useEffect, useContext, createContext } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 const initalState = {

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

@@ -1,4 +1,4 @@
-import { useContext, useState, createContext } from 'react';
+import { useState, useContext, createContext } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 const initalState = {

package/dist/esm/components/SideBar/SideBar.context.js

@@ -1,4 +1,4 @@
-import { useContext, createContext, useState, useCallback } from 'react';
+import { useContext, useState, useCallback, createContext } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 const initalState = {

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

@@ -20,7 +20,7 @@ const StyledTableCell = styled.td.withConfig({
     align
   } = theme;
   const backgroundColor = color === 'error' ? theme.validation.error?.background : '';
-  const base = css(["min-height:", ";height:", ";background:", ";vertical-align:", ";box-sizing:border-box;", " ", " ", ""], height, height, backgroundColor, align.vertical, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(border));
+  const base = css(["min-height:", ";height:", ";background:", ";vertical-align:", ";box-sizing:border-box;", " ", " ", " a{font-size:inherit;font-weight:inherit;}"], height, height, backgroundColor, align.vertical, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(border));
   return base;
 });
 const TableDataCell = /*#__PURE__*/forwardRef(function TableDataCell({

package/dist/esm/components/Table/FooterCell/FooterCell.js

@@ -19,7 +19,7 @@ const StyledTableCell = styled.th.withConfig({
     typography,
     spacings
   } = theme;
-  return css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " ", ""], height, height, background, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(theme.border), $sticky ? css(["position:sticky;bottom:0;z-index:2;"]) : '');
+  return css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " a{font-size:inherit;font-weight:inherit;}", ""], height, height, background, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(theme.border), $sticky ? css(["position:sticky;bottom:0;z-index:2;"]) : '');
 });
 const CellInner = styled.div.withConfig({
   displayName: "FooterCell__CellInner",

package/dist/esm/components/Table/HeaderCell/HeaderCell.js

@@ -34,7 +34,7 @@ const StyledTableCell = styled.th.withConfig({
   // Firefox specific workaround (bug in v142.0) - see issue #3910
   // Hardcoded padding values compensate for Firefox's incorrect table cell height calculation
   const firefoxFix = isFirefox() ? css(["vertical-align:top;height:auto;min-height:", ";> div{padding:", " 0;}"], height, $density === 'compact' ? '7px' : '13px') : css([""]);
-  return css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " ", " ", " ", " ", ""], height, height, background, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(theme.border), sortStylingHover, sortStylingActive, firefoxFix, $sticky ? css(["position:sticky;top:0;z-index:1;"]) : '');
+  return css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " ", " ", " ", " a{font-size:inherit;font-weight:inherit;}", ""], height, height, background, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(theme.border), sortStylingHover, sortStylingActive, firefoxFix, $sticky ? css(["position:sticky;top:0;z-index:1;"]) : '');
 });
 const CellInner = styled.div.withConfig({
   displayName: "HeaderCell__CellInner",

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

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { typographyTemplate, outlineTemplate } from '@equinor/eds-utils';
-import { quickVariants, typography, colors, link } from './Typography.tokens.js';
+import { quickVariants, typography, link, colors } from './Typography.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
 const getElementType = (variant, link) => {

package/dist/esm/index.js

@@ -16,85 +16,85 @@ 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 { 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';
-export { Head as TableHead } from './components/Table/Head/Head.js';
-export { Foot as TableFoot } from './components/Table/Foot/Foot.js';
-export { Row as TableRow } from './components/Table/Row/Row.js';
-export { Caption as TableCaption } from './components/Table/Caption.js';
-export { Divider } from './components/Divider/Divider.js';
-export { TextField } from './components/TextField/TextField.js';
-export { Textarea } from './components/Textarea/Textarea.js';
-export { ListItem } from './components/List/ListItem.js';
-export { AccordionItem } from './components/Accordion/AccordionItem.js';
 export { AccordionHeader } from './components/Accordion/AccordionHeader.js';
-export { AccordionHeaderTitle } from './components/Accordion/AccordionHeaderTitle.js';
 export { AccordionHeaderActions } from './components/Accordion/AccordionHeaderActions.js';
+export { AccordionHeaderTitle } from './components/Accordion/AccordionHeaderTitle.js';
+export { AccordionItem } from './components/Accordion/AccordionItem.js';
 export { AccordionPanel } from './components/Accordion/AccordionPanel.js';
-export { Tab } from './components/Tabs/Tab.js';
-export { TabPanels } from './components/Tabs/TabPanels.js';
-export { TabPanel } from './components/Tabs/TabPanel.js';
-export { TabList } from './components/Tabs/TabList.js';
+export { AddSymbol, AllSymbol, Autocomplete, StyledButton, defaultOptionDisabled } from './components/Autocomplete/Autocomplete.js';
+export { Avatar } from './components/Avatar/Avatar.js';
+export { BannerActions } from './components/Banner/BannerActions.js';
+export { BannerIcon } from './components/Banner/BannerIcon.js';
+export { BannerMessage } from './components/Banner/BannerMessage.js';
+export { Breadcrumb } from './components/Breadcrumbs/Breadcrumb.js';
+export { ButtonGroup } from './components/Button/ButtonGroup/ButtonGroup.js';
 export { CardActions } from './components/Card/CardActions.js';
 export { CardContent } from './components/Card/CardContent.js';
 export { CardHeader } from './components/Card/CardHeader.js';
-export { CardMedia } from './components/Card/CardMedia.js';
 export { CardHeaderTitle } from './components/Card/CardHeaderTitle.js';
-export { Actions as TopbarActions } from './components/TopBar/Actions.js';
-export { Header as TopbarHeader } from './components/TopBar/Header.js';
-export { CustomContent as TopbarCustomContent } from './components/TopBar/CustomContent.js';
+export { CardMedia } from './components/Card/CardMedia.js';
+export { Checkbox } from './components/Checkbox/Checkbox.js';
+export { Chip } from './components/Chip/Chip.js';
+export { CircularProgress } from './components/Progress/Circular/CircularProgress.js';
+export { DatePicker } from './components/Datepicker/DatePicker.js';
+export { DateRangePicker } from './components/Datepicker/DateRangePicker.js';
 export { DialogActions } from './components/Dialog/DialogActions.js';
-export { DialogTitle } from './components/Dialog/DialogTitle.js';
 export { DialogContent } from './components/Dialog/DialogContent.js';
 export { DialogHeader } from './components/Dialog/DialogHeader.js';
-export { Scrim } from './components/Scrim/Scrim.js';
-export { LinkItem as TableOfContentsLinkItem } from './components/TableOfContents/LinkItem.js';
-export { SideSheet } from './components/SideSheet/SideSheet.js';
-export { Chip } from './components/Chip/Chip.js';
-export { Avatar } from './components/Avatar/Avatar.js';
-export { Search } from './components/Search/Search.js';
-export { Slider } from './components/Slider/Slider.js';
-export { Tooltip } from './components/Tooltip/Tooltip.js';
-export { SnackbarAction } from './components/Snackbar/SnackbarAction.js';
-export { PopoverTitle } from './components/Popover/PopoverTitle.js';
-export { PopoverContent } from './components/Popover/PopoverContent.js';
-export { PopoverHeader } from './components/Popover/PopoverHeader.js';
-export { PopoverActions } from './components/Popover/PopoverActions.js';
-export { BannerIcon } from './components/Banner/BannerIcon.js';
-export { BannerMessage } from './components/Banner/BannerMessage.js';
-export { BannerActions } from './components/Banner/BannerActions.js';
-export { LinearProgress } from './components/Progress/Linear/LinearProgress.js';
-export { CircularProgress } from './components/Progress/Circular/CircularProgress.js';
-export { StarProgress } from './components/Progress/Star/StarProgress.js';
+export { DialogTitle } from './components/Dialog/DialogTitle.js';
+export { Divider } from './components/Divider/Divider.js';
 export { DotProgress } from './components/Progress/Dots/DotProgress.js';
-export { Breadcrumb } from './components/Breadcrumbs/Breadcrumb.js';
+export { EdsProvider, useEds } from './components/EdsProvider/eds.context.js';
+export { Heading } from './components/Typography/Heading.js';
+export { Input } from './components/Input/Input.js';
+export { InputWrapper } from './components/InputWrapper/InputWrapper.js';
+export { Label } from './components/Label/Label.js';
+export { LinearProgress } from './components/Progress/Linear/LinearProgress.js';
+export { ListItem } from './components/List/ListItem.js';
 export { MenuItem } from './components/Menu/MenuItem.js';
 export { MenuSection } from './components/Menu/MenuSection.js';
-export { Pagination } from './components/Pagination/Pagination.js';
 export { NativeSelect } from './components/Select/NativeSelect.js';
-export { Label } from './components/Label/Label.js';
-export { Input } from './components/Input/Input.js';
-export { Checkbox } from './components/Checkbox/Checkbox.js';
-export { Radio } from './components/Radio/Radio.js';
-export { Switch } from './components/Switch/Switch.js';
-export { EdsProvider, useEds } from './components/EdsProvider/eds.context.js';
+export { Pagination } from './components/Pagination/Pagination.js';
 export { Paper } from './components/Paper/Paper.js';
-export { AddSymbol, AllSymbol, Autocomplete, StyledButton, defaultOptionDisabled } from './components/Autocomplete/Autocomplete.js';
-export { InputWrapper } from './components/InputWrapper/InputWrapper.js';
-export { useInputField } from './components/InputWrapper/useInputField.js';
-export { useSideBar } from './components/SideBar/SideBar.context.js';
-export { SidebarLink } from './components/SideBar/SidebarLink/index.js';
+export { Paragraph } from './components/Typography/Paragraph.js';
+export { PopoverActions } from './components/Popover/PopoverActions.js';
+export { PopoverContent } from './components/Popover/PopoverContent.js';
+export { PopoverHeader } from './components/Popover/PopoverHeader.js';
+export { PopoverTitle } from './components/Popover/PopoverTitle.js';
+export { Radio } from './components/Radio/Radio.js';
+export { Scrim } from './components/Scrim/Scrim.js';
+export { Search } from './components/Search/Search.js';
+export { SideBarAccordion } from './components/SideBar/SideBarAccordion/index.js';
+export { SideBarAccordionItem } from './components/SideBar/SideBarAccordionItem/index.js';
+export { SideBarButton } from './components/SideBar/SideBarButton/index.js';
 export { SideBarContent } from './components/SideBar/SideBarContent.js';
 export { SideBarFooter } from './components/SideBar/SideBarFooter.js';
 export { SideBarToggle } from './components/SideBar/SideBarToggle.js';
-export { SideBarButton } from './components/SideBar/SideBarButton/index.js';
-export { SideBarAccordion } from './components/SideBar/SideBarAccordion/index.js';
-export { SideBarAccordionItem } from './components/SideBar/SideBarAccordionItem/index.js';
-export { DatePicker } from './components/Datepicker/DatePicker.js';
-export { DateRangePicker } from './components/Datepicker/DateRangePicker.js';
+export { SideSheet } from './components/SideSheet/SideSheet.js';
+export { SidebarLink } from './components/SideBar/SidebarLink/index.js';
+export { Slider } from './components/Slider/Slider.js';
+export { SnackbarAction } from './components/Snackbar/SnackbarAction.js';
+export { StarProgress } from './components/Progress/Star/StarProgress.js';
+export { Switch } from './components/Switch/Switch.js';
+export { Tab } from './components/Tabs/Tab.js';
+export { TabList } from './components/Tabs/TabList.js';
+export { TabPanel } from './components/Tabs/TabPanel.js';
+export { TabPanels } from './components/Tabs/TabPanels.js';
+export { Body as TableBody } from './components/Table/Body.js';
+export { Caption as TableCaption } from './components/Table/Caption.js';
+export { Cell as TableCell } from './components/Table/Cell.js';
+export { Foot as TableFoot } from './components/Table/Foot/Foot.js';
+export { Head as TableHead } from './components/Table/Head/Head.js';
+export { LinkItem as TableOfContentsLinkItem } from './components/TableOfContents/LinkItem.js';
+export { Row as TableRow } from './components/Table/Row/Row.js';
+export { TextField } from './components/TextField/TextField.js';
+export { Textarea } from './components/Textarea/Textarea.js';
+export { ToggleButton } from './components/Button/ToggleButton/ToggleButton.js';
+export { Tooltip } from './components/Tooltip/Tooltip.js';
+export { Actions as TopbarActions } from './components/TopBar/Actions.js';
+export { CustomContent as TopbarCustomContent } from './components/TopBar/CustomContent.js';
+export { Header as TopbarHeader } from './components/TopBar/Header.js';
+export { Typography } from './components/Typography/Typography.js';
+export { TypographyNext } from './components/Typography/Typography.new.js';
+export { useInputField } from './components/InputWrapper/useInputField.js';
+export { useSideBar } from './components/SideBar/SideBar.context.js';

package/dist/esm-next/components/next/Button/Button.js

@@ -32,18 +32,16 @@ const Button = /*#__PURE__*/forwardRef(function Button({
     "data-variant": variant,
     "data-selectable-space": selectableSpace,
     "data-space-proportions": "squished",
-    "data-font-family": "ui",
-    "data-font-size": typographySize,
-    "data-line-height": "squished",
     "data-color-appearance": disabled ? 'neutral' : tone,
     "data-icon-only": icon || undefined,
     "data-round": icon && round ? true : undefined,
     ...rest,
-    children: /*#__PURE__*/jsx(TypographyNext, {
+    children: icon ? children : /*#__PURE__*/jsx(TypographyNext, {
+      as: "span",
       family: "ui",
       size: typographySize,
-      baseline: "center",
       lineHeight: "squished",
+      baseline: "center",
       children: children
     })
   });

package/dist/esm-next/components/next/Input/Input.js

@@ -5,6 +5,7 @@ import { Icon } from '../Icon/Icon.js';
 
 const Input = /*#__PURE__*/forwardRef(function Input({
   invalid = false,
+  hideErrorIcon = false,
   disabled,
   readOnly,
   type = 'text',
@@ -17,8 +18,8 @@ const Input = /*#__PURE__*/forwardRef(function Input({
   as: Component = 'input',
   ...inputProps
 }, ref) {
-  const tone = invalid && !disabled ? 'danger' : 'neutral';
-  const showErrorIcon = invalid && !disabled;
+  const tone = invalid && !disabled && !readOnly ? 'danger' : 'neutral';
+  const displayErrorIcon = !hideErrorIcon && invalid && !disabled && !readOnly;
   const hasStartAdornment = startText || startAdornment;
   const hasEndAdornment = endText || endAdornment;
   const containerClasses = ['eds-input-container', containerClassName].filter(Boolean).join(' ');
@@ -31,7 +32,7 @@ const Input = /*#__PURE__*/forwardRef(function Input({
     "data-disabled": disabled || undefined,
     "data-readonly": readOnly || undefined,
     "data-invalid": invalid || undefined,
-    children: [showErrorIcon && /*#__PURE__*/jsx("span", {
+    children: [displayErrorIcon && /*#__PURE__*/jsx("span", {
       className: "eds-error-icon",
       "data-font-size": "xs",
       "data-font-family": "ui",
@@ -41,10 +42,9 @@ const Input = /*#__PURE__*/forwardRef(function Input({
       })
     }), hasStartAdornment && /*#__PURE__*/jsxs("div", {
       className: "eds-adornment",
-      "data-font-size": "xs",
+      "data-color-appearance": "neutral",
       children: [startText && /*#__PURE__*/jsx("span", {
         className: "eds-adornment__text",
-        "data-color-appearance": "neutral",
         "data-font-family": "ui",
         "data-font-size": "xs",
         "data-baseline": "center",
@@ -52,8 +52,6 @@ const Input = /*#__PURE__*/forwardRef(function Input({
       }), startAdornment && /*#__PURE__*/jsx("span", {
         className: "eds-adornment__adornment",
         "data-font-size": "xs",
-        "data-font-family": "ui",
-        "data-baseline": "center",
         children: startAdornment
       })]
     }), /*#__PURE__*/jsx(Component, {
@@ -70,10 +68,9 @@ const Input = /*#__PURE__*/forwardRef(function Input({
       "aria-invalid": invalid || undefined
     }), hasEndAdornment && /*#__PURE__*/jsxs("div", {
       className: "eds-adornment",
-      "data-font-size": "xs",
+      "data-color-appearance": "neutral",
       children: [endText && /*#__PURE__*/jsx("span", {
         className: "eds-adornment__text",
-        "data-color-appearance": "neutral",
         "data-font-family": "ui",
         "data-font-size": "xs",
         "data-baseline": "center",
@@ -81,8 +78,6 @@ const Input = /*#__PURE__*/forwardRef(function Input({
       }), endAdornment && /*#__PURE__*/jsx("span", {
         className: "eds-adornment__adornment",
         "data-font-size": "xs",
-        "data-font-family": "ui",
-        "data-baseline": "center",
         children: endAdornment
       })]
     })]

package/dist/esm-next/components/next/TextField/TextField.js

@@ -4,6 +4,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useFieldIds } from '../Field/useFieldIds.js';
 import { Field } from '../Field/Field.js';
 import { Tooltip } from '../../Tooltip/Tooltip.js';
+import { Button } from '../Button/Button.js';
 import { Icon } from '../Icon/Icon.js';
 import { Input } from '../Input/Input.js';
 
@@ -35,8 +36,12 @@ const TextField = /*#__PURE__*/forwardRef(function TextField({
       }), labelInfo && /*#__PURE__*/jsx(Tooltip, {
         title: labelInfo,
         placement: "top",
-        children: /*#__PURE__*/jsx("button", {
-          type: "button",
+        children: /*#__PURE__*/jsx(Button, {
+          variant: "ghost",
+          icon: true,
+          round: true,
+          size: "small",
+          tone: "neutral",
           className: "eds-text-field__info",
           "aria-label": "More information",
           children: /*#__PURE__*/jsx(Icon, {

package/dist/esm-next/index.next.js

@@ -1,9 +1,9 @@
 export { Button } from './components/next/Button/Button.js';
-export { Icon } from './components/next/Icon/Icon.js';
-export { Field } from './components/next/Field/Field.js';
-export { useFieldIds } from './components/next/Field/useFieldIds.js';
 export { Checkbox } from './components/next/Checkbox/Checkbox.js';
+export { Field } from './components/next/Field/Field.js';
+export { Icon } from './components/next/Icon/Icon.js';
+export { Input } from './components/next/Input/Input.js';
 export { Radio } from './components/next/Radio/Radio.js';
 export { Switch } from './components/next/Switch/Switch.js';
-export { Input } from './components/next/Input/Input.js';
 export { TextField } from './components/next/TextField/TextField.js';
+export { useFieldIds } from './components/next/Field/useFieldIds.js';