@dynatrace/strato-components 3.1.3 → 3.2.1

package/tables/DataTable/features/UserActions/UserActionsMenu.d.ts

@@ -24,20 +24,20 @@ export declare function ColumnOrderAction(): import("react/jsx-runtime.js").JSX.
  * @public
  */
 export declare const DataTableActionsMenu: ((props: PropsWithChildren) => import("react/jsx-runtime.js").JSX.Element) & {
-    Intent: (props: import("../../../../navigation/menu/Intent.js").MenuIntentProps & import("react").RefAttributes<HTMLElement>) => React.ReactElement | null;
+    Intent: (props: import("../../../../navigation/menu/Intent.js").MenuIntentProps & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement | null;
     Item: <E extends import("react").ElementType = "div">(props: import("../../../../navigation/menu/Item.js").MenuItemProps<E>) => import("react").ReactElement | null;
     /** The DataTableActionsMenu.ItemIcon is deprecated, use DataTableActionsMenu.Prefix instead.
      * @deprecated Use `TableActionsMenu.Prefix` instead. This slot will be removed in the future.
      */
-    ItemIcon: (props: import("../../../../navigation/menu/Prefix.js").MenuPrefixProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-    Prefix: (props: import("../../../../navigation/menu/Prefix.js").MenuPrefixProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-    Suffix: (props: import("../../../../navigation/menu/Suffix.js").MenuSuffixProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-    Group: (props: import("../../../../navigation/menu/Group.js").MenuGroupProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-    Label: (props: import("../../../../navigation/menu/Label.js").MenuLabelProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+    ItemIcon: (props: import("../../../../navigation/menu/Prefix.js").MenuPrefixProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+    Prefix: (props: import("../../../../navigation/menu/Prefix.js").MenuPrefixProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+    Suffix: (props: import("../../../../navigation/menu/Suffix.js").MenuSuffixProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+    Group: (props: import("../../../../navigation/menu/Group.js").MenuGroupProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+    Label: (props: import("../../../../navigation/menu/Label.js").MenuLabelProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
     CopyItem: ({ value }: DataTableActionsMenuCopyItemProps) => import("react/jsx-runtime.js").JSX.Element;
     SubMenu: (props: import("../../../../navigation/menu/Sub.js").MenuSubProps) => import("react/jsx-runtime.js").JSX.Element;
-    SubContent: (props: import("../../../../index.js").WithChildren & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-    SubTrigger: (props: import("../../../../navigation/menu/SubTrigger.js").MenuSubTriggerProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+    SubContent: (props: import("../../../../index.js").WithChildren & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+    SubTrigger: (props: import("../../../../navigation/menu/SubTrigger.js").MenuSubTriggerProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
     Link: <E extends import("react").ElementType = "a">(props: import("../../../../navigation/menu/Link.js").MenuLinkProps<E>) => import("react").ReactElement | null;
     LineWrap: () => import("react/jsx-runtime.js").JSX.Element;
     HideColumn: () => import("react/jsx-runtime.js").JSX.Element;

package/tables/DataTable/features/UserActions/UserActionsMenu.js

@@ -59,20 +59,24 @@ const CopyItem = ({ value }) => {
   );
 };
 function LineWrapAction() {
+  const intl = (0, import_react_intl.useIntl)();
   const column = (0, import_DataTableContext.useDataTableColumn)();
+  const isLineWrapped = column?.getIsLineWrapped();
+  const lineWrapDtName = isLineWrapped ? "ColumnActionDisableLineWrap" : "ColumnActionEnableLineWrap";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     DataTableActionsMenu.Item,
     {
       onSelect: () => column.toggleLineWrap(),
-      "data-dt-name": "ColumnActionLineWrap",
+      "data-dt-name": lineWrapDtName,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataTableActionsMenu.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.WrapTextIcon, {}) }),
-        column?.getIsLineWrapped() ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.FormattedMessage, { ...import_messages.dataTableMessages.disableLineWrapLabel }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.FormattedMessage, { ...import_messages.dataTableMessages.enableLineWrapLabel })
+        isLineWrapped ? intl.formatMessage(import_messages.dataTableMessages.disableLineWrapLabel) : intl.formatMessage(import_messages.dataTableMessages.enableLineWrapLabel)
       ]
     }
   );
 }
 function HideColumnAction() {
+  const intl = (0, import_react_intl.useIntl)();
   const table = (0, import_DataTableContext.useDataTable)();
   const currentVisibility = table.getState().columnVisibility;
   const column = (0, import_DataTableContext.useDataTableColumn)();
@@ -104,12 +108,13 @@ function HideColumnAction() {
       "data-dt-name": "ColumnActionHide",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataTableActionsMenu.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.ViewOffIcon, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.FormattedMessage, { ...import_messages.dataTableMessages.hideColumnLabel })
+        intl.formatMessage(import_messages.dataTableMessages.hideColumnLabel)
       ]
     }
   );
 }
 function ColumnOrderAction() {
+  const intl = (0, import_react_intl.useIntl)();
   const column = (0, import_DataTableContext.useDataTableColumn)();
   const header = (0, import_DataTableContext.useDataTableHeader)();
   const isPinnedColumn = !!column.getIsPinned();
@@ -126,7 +131,7 @@ function ColumnOrderAction() {
         "data-dt-name": "ColumnActionMoveLeft",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataTableActionsMenu.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.ArrowLeftIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.FormattedMessage, { ...import_messages.dataTableMessages.moveColumnLeftLabel })
+          intl.formatMessage(import_messages.dataTableMessages.moveColumnLeftLabel)
         ]
       }
     ),
@@ -138,7 +143,7 @@ function ColumnOrderAction() {
         "data-dt-name": "ColumnActionMoveRight",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataTableActionsMenu.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.ArrowRightIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.FormattedMessage, { ...import_messages.dataTableMessages.moveColumnRightLabel })
+          intl.formatMessage(import_messages.dataTableMessages.moveColumnRightLabel)
         ]
       }
     )
@@ -152,6 +157,7 @@ function ColumnOrderAction() {
   return orderActions();
 }
 function ColumnPinningAction() {
+  const intl = (0, import_react_intl.useIntl)();
   const table = (0, import_DataTableContext.useDataTable)();
   const header = (0, import_DataTableContext.useDataTableHeader)();
   if (!table.options.enableColumnPinning) {
@@ -166,7 +172,7 @@ function ColumnPinningAction() {
         "data-dt-name": "ColumnActionPinLeft",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataTableActionsMenu.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.PinIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.FormattedMessage, { ...import_messages.dataTableMessages.pinColumnLeftLabel })
+          intl.formatMessage(import_messages.dataTableMessages.pinColumnLeftLabel)
         ]
       }
     ) : null,
@@ -177,7 +183,7 @@ function ColumnPinningAction() {
         "data-dt-name": "ColumnActionPinRight",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataTableActionsMenu.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.PinIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.FormattedMessage, { ...import_messages.dataTableMessages.pinColumnRightLabel })
+          intl.formatMessage(import_messages.dataTableMessages.pinColumnRightLabel)
         ]
       }
     ) : null,
@@ -188,17 +194,18 @@ function ColumnPinningAction() {
         "data-dt-name": "ColumnActionUnpin",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataTableActionsMenu.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.PinOffIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.FormattedMessage, { ...import_messages.dataTableMessages.unpinColumnLabel })
+          intl.formatMessage(import_messages.dataTableMessages.unpinColumnLabel)
         ]
       }
     ) : null
   ] });
 }
 function ColumnFontStyleAction() {
+  const intl = (0, import_react_intl.useIntl)();
   const column = (0, import_DataTableContext.useDataTableColumn)();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataTableActionsMenu.Item, { onSelect: () => column.toggleFontStyle(), children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataTableActionsMenu.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.WrapTextIcon, {}) }),
-    column.getFontStyle() === "text" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.FormattedMessage, { ...import_messages.dataTableMessages.fontStyleCodeLabel }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.FormattedMessage, { ...import_messages.dataTableMessages.fontStyleTextLabel })
+    column.getFontStyle() === "text" ? intl.formatMessage(import_messages.dataTableMessages.fontStyleCodeLabel) : intl.formatMessage(import_messages.dataTableMessages.fontStyleTextLabel)
   ] });
 }
 const DataTableActionsMenu = Object.assign(

package/tables/DataTable/hooks/useHeaderDragAndDrop.d.ts

@@ -1,5 +1,5 @@
 import type { DraggableAttributes } from '@dnd-kit/core';
-import { type DragEvent, type TouchEvent } from 'react';
+import { type DragEvent, type RefObject, type TouchEvent } from 'react';
 import type { Column } from './useTable/types.js';
 interface UseHeaderCellDragAndDropParams {
     /**
@@ -31,7 +31,7 @@ interface UseHeaderCellDragAndDropResult {
     /**
      * Ref for the portal container when dragging.
      */
-    portalRef: React.RefObject<HTMLElement | null>;
+    portalRef: RefObject<HTMLElement | null>;
     /**
      * Props to spread on the draggable element (undefined if drag-and-drop is disabled).
      */

package/tables/DataTable/hooks/usePaginationSlot.d.ts

@@ -1,4 +1,4 @@
-import { type ReactElement } from 'react';
+import { type CSSProperties, type ReactElement } from 'react';
 import type { DataTablePaginationProps } from '../features/Pagination/pagination-types.js';
 /**
  * Processes the pagination slot.
@@ -10,7 +10,7 @@ import type { DataTablePaginationProps } from '../features/Pagination/pagination
 export declare function usePaginationSlot(paginationSlot: ReactElement<DataTablePaginationProps> | null): {
     paginationConsumerId?: string;
     paginationDataTestId?: string;
-    paginationConsumerStyle?: React.CSSProperties;
+    paginationConsumerStyle?: CSSProperties;
     paginationConsumerClassName?: string;
     paginationDataAttributes: Record<string, unknown>;
 };

package/tables/DataTable/hooks/useToolbarSlot.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode, type RefObject } from 'react';
 import type { DataTableColumnSettingsModalRef } from '../components/Toolbar/ColumnSettings/column-settings-types.js';
 import { type DataTableToolbarItemProps, type DataTableToolbarProps, type DataTableToolbarSlots } from '../components/Toolbar/DataTableToolbar.js';
 import type { DataTableColumnSettingsConfig } from '../public.api.js';
@@ -9,9 +10,9 @@ import type { DataTableColumnSettingsConfig } from '../public.api.js';
  */
 export declare function useToolbarSlot(toolbarProps: DataTableToolbarProps | null): {
     toolbarSlots: DataTableToolbarSlots;
-    toolbarContent: React.ReactNode;
+    toolbarContent: ReactNode;
     toolbarItemProps: DataTableToolbarItemProps;
     toolbarRemainingProps: Omit<DataTableToolbarProps, 'children'>;
     openColumnSettings: (columnSettings?: DataTableColumnSettingsConfig) => void;
-    columnSettingsModalRef: React.RefObject<DataTableColumnSettingsModalRef>;
+    columnSettingsModalRef: RefObject<DataTableColumnSettingsModalRef>;
 };

package/tables/SimpleTable/SimpleTable.css

@@ -1,4 +1,4 @@
-._1ymahou0-3-1-3 {
+._1ymahou0-3-2-1 {
   border-collapse: separate;
   border-spacing: 0;
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
@@ -8,13 +8,13 @@
   text-decoration: var(--dt-typography-text-base-default-text-decoration, none);
   text-transform: var(--dt-typography-text-base-default-text-transform, none);
 }
-._1ymahou0-3-1-3 .strato-table-header {
+._1ymahou0-3-2-1 .strato-table-header {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
 }
-._1ymahou0-3-1-3 .strato-table-header:last-child .strato-table-header-cell {
+._1ymahou0-3-2-1 .strato-table-header:last-child .strato-table-header-cell {
   border-bottom: var(--dt-borders-width-emphasized, 2px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1ymahou0-3-1-3 .strato-table-header-cell {
+._1ymahou0-3-2-1 .strato-table-header-cell {
   font-family: var(--dt-typography-text-base-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-base-emphasized-size, 14px);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
@@ -24,61 +24,61 @@
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   position: relative;
 }
-._1ymahou0-3-1-3 .strato-table-cell {
+._1ymahou0-3-2-1 .strato-table-cell {
   position: relative;
 }
-._1ymahou0-3-1-3 .strato-table-cell-alignment-left {
+._1ymahou0-3-2-1 .strato-table-cell-alignment-left {
   text-align: start;
   justify-content: flex-start;
 }
-._1ymahou0-3-1-3 .strato-table-cell-alignment-center {
+._1ymahou0-3-2-1 .strato-table-cell-alignment-center {
   text-align: center;
   justify-content: center;
 }
-._1ymahou0-3-1-3 .strato-table-cell-alignment-right {
+._1ymahou0-3-2-1 .strato-table-cell-alignment-right {
   text-align: end;
   justify-content: flex-end;
 }
-._1ymahou0-3-1-3 .strato-table-cell-alignment-top-left {
+._1ymahou0-3-2-1 .strato-table-cell-alignment-top-left {
   text-align: start;
   justify-content: flex-start;
   vertical-align: top;
 }
-._1ymahou0-3-1-3 .strato-table-cell-alignment-top-center {
+._1ymahou0-3-2-1 .strato-table-cell-alignment-top-center {
   text-align: center;
   justify-content: center;
   vertical-align: top;
 }
-._1ymahou0-3-1-3 .strato-table-cell-alignment-top-right {
+._1ymahou0-3-2-1 .strato-table-cell-alignment-top-right {
   text-align: end;
   justify-content: flex-end;
   vertical-align: top;
 }
-._1ymahou0-3-1-3 .strato-table-cell-alignment-bottom-left {
+._1ymahou0-3-2-1 .strato-table-cell-alignment-bottom-left {
   text-align: start;
   justify-content: flex-start;
   vertical-align: bottom;
 }
-._1ymahou0-3-1-3 .strato-table-cell-alignment-bottom-center {
+._1ymahou0-3-2-1 .strato-table-cell-alignment-bottom-center {
   text-align: center;
   justify-content: center;
   vertical-align: bottom;
 }
-._1ymahou0-3-1-3 .strato-table-cell-alignment-bottom-right {
+._1ymahou0-3-2-1 .strato-table-cell-alignment-bottom-right {
   text-align: end;
   justify-content: flex-end;
   vertical-align: bottom;
 }
-._1ymahou0-3-1-3.strato-table-contained {
+._1ymahou0-3-2-1.strato-table-contained {
   border: var(--dt-borders-width-emphasized, 2px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
   border-radius: var(--dt-borders-radius-field-default, 6px);
   overflow: hidden;
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1ymahou0-3-1-3 .strato-table-row:last-child .strato-table-cell {
+._1ymahou0-3-2-1 .strato-table-row:last-child .strato-table-cell {
   border-bottom: none;
 }
-._1ymahou0-3-1-3.strato-table-code-font {
+._1ymahou0-3-2-1.strato-table-code-font {
   font-family: var(--dt-typography-code-base-default-family, Roboto Mono,monospace);
   font-size: var(--dt-typography-code-base-default-size, 14px);
   font-weight: var(--dt-typography-code-base-default-weight, 400);
@@ -87,16 +87,16 @@
   text-transform: var(--dt-typography-code-base-default-text-transform, none);
   color: var(--strato-table-cell-highlight-color, var(--dt-colors-text-neutral-default, #2f2f4f));
 }
-._1ymahou0-3-1-3.strato-table-cell-density-default .strato-table-cell, ._1ymahou0-3-1-3.strato-table-cell-density-default .strato-table-header-cell {
+._1ymahou0-3-2-1.strato-table-cell-density-default .strato-table-cell, ._1ymahou0-3-2-1.strato-table-cell-density-default .strato-table-header-cell {
   padding: var(--dt-spacings-size-8, 8px) var(--dt-spacings-size-12, 12px);
 }
-._1ymahou0-3-1-3.strato-table-cell-density-comfortable .strato-table-cell, ._1ymahou0-3-1-3.strato-table-cell-density-comfortable .strato-table-header-cell {
+._1ymahou0-3-2-1.strato-table-cell-density-comfortable .strato-table-cell, ._1ymahou0-3-2-1.strato-table-cell-density-comfortable .strato-table-header-cell {
   padding: var(--dt-spacings-size-12, 12px) var(--dt-spacings-size-16, 16px);
 }
-._1ymahou0-3-1-3.strato-table-cell-density-condensed .strato-table-cell, ._1ymahou0-3-1-3.strato-table-cell-density-condensed .strato-table-header-cell {
+._1ymahou0-3-2-1.strato-table-cell-density-condensed .strato-table-cell, ._1ymahou0-3-2-1.strato-table-cell-density-condensed .strato-table-header-cell {
   padding: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-6, 6px);
 }
-._1ymahou0-3-1-3.strato-table-colsep-divider .strato-table-header-cell + .strato-table-header-cell::before, ._1ymahou0-3-1-3.strato-table-colsep-divider .strato-table-cell + .strato-table-cell::before {
+._1ymahou0-3-2-1.strato-table-colsep-divider .strato-table-header-cell + .strato-table-header-cell::before, ._1ymahou0-3-2-1.strato-table-colsep-divider .strato-table-cell + .strato-table-cell::before {
   content: "";
   display: block;
   position: absolute;
@@ -106,15 +106,15 @@
   bottom: var(--dt-spacings-size-4, 4px);
   background-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1ymahou0-3-1-3.strato-table-rowsep-divider .strato-table-cell {
+._1ymahou0-3-2-1.strato-table-rowsep-divider .strato-table-cell {
   border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1ymahou0-3-1-3.strato-table-rowsep-zebra .strato-table-row {
+._1ymahou0-3-2-1.strato-table-rowsep-zebra .strato-table-row {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1ymahou0-3-1-3.strato-table-rowsep-zebra .strato-table-header {
+._1ymahou0-3-2-1.strato-table-rowsep-zebra .strato-table-header {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
 }
-._1ymahou0-3-1-3.strato-table-rowsep-zebra .strato-table-row-even {
+._1ymahou0-3-2-1.strato-table-rowsep-zebra .strato-table-row-even {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
 }

package/tables/SimpleTable/SimpleTable.d.ts

@@ -14,4 +14,4 @@ declare module '@tanstack/react-table' {
  * native HTML table.
  * @public
  */
-export declare const SimpleTable: <TData, TValue>(props: import("./public.api.js").SimpleTableBaseProps<TData> & import("../../index.js").StylingProps & import("../../index.js").DataTestId & import("../../index.js").MaskingProps & import("../../index.js").BehaviorTrackingProps & import("react").RefAttributes<HTMLTableElement>) => React.ReactElement | null;
+export declare const SimpleTable: <TData, TValue>(props: import("./public.api.js").SimpleTableBaseProps<TData> & import("../../index.js").StylingProps & import("../../index.js").DataTestId & import("../../index.js").MaskingProps & import("../../index.js").BehaviorTrackingProps & import("react").RefAttributes<HTMLTableElement>) => import("react").ReactElement | null;

package/tables/SimpleTable/SimpleTable.sty.js

@@ -22,4 +22,4 @@ __export(SimpleTable_css_exports, {
 });
 module.exports = __toCommonJS(SimpleTable_css_exports);
 var import_SimpleTable_css_ts_vanilla = require("./SimpleTable.css");
-var simpleTable = "_1ymahou0-3-1-3";
+var simpleTable = "_1ymahou0-3-2-1";

package/tables/utils/log-content-highlighting.js

@@ -70,7 +70,8 @@ function useFormatLogContent(logContent, options) {
       if (truncationLimit < logContentValue.length) {
         logContentSubstrings = ellipsize(logContentSubstrings);
       }
-      const HighlightComponent = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      const noHighlightLines = logContentSubstrings.noHighlight.length > 0 ? logContentSubstrings.noHighlight.split(/\r?\n/) : [];
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_react_error_boundary.ErrorBoundary,
         {
           fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: logContentValue.substring(0, truncationLimit) }),
@@ -87,7 +88,6 @@ function useFormatLogContent(logContent, options) {
               code: logContentSubstrings.highlight,
               children: ({ tokens, getLineProps, getTokenProps, className, style }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: tokens.map((line, i) => {
                 const { className: lineClassName, ...remainingLineProps } = getLineProps({ line });
-                const noHighlightLines = logContentSubstrings.noHighlight.length > 0 ? logContentSubstrings.noHighlight.split(/\r?\n/) : [];
                 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                   "div",
                   {
@@ -115,7 +115,6 @@ function useFormatLogContent(logContent, options) {
           )
         }
       );
-      return HighlightComponent;
     }
     return null;
   }, [logContent, options?.lineWrap, options?.truncationLimit, stratoLogger]);

package/typography/block-quote/Blockquote.css

@@ -1,11 +1,11 @@
-._1knl9z60-3-1-3 {
+._1knl9z60-3-2-1 {
   position: relative;
   margin: var(--dt-spacings-size-0, 0);
   padding-left: var(--dt-spacings-size-40, 40px);
   word-break: normal;
   overflow-wrap: anywhere;
 }
-._1knl9z60-3-1-3:before {
+._1knl9z60-3-2-1:before {
   content: "";
   position: absolute;
   top: 0;

package/typography/block-quote/Blockquote.d.ts

@@ -19,4 +19,4 @@ export interface BlockquoteProps extends WithChildren, AriaLabelingProps, Stylin
  * The `Blockquote` component wraps longer text blocks and indicates that the passage is quoted from another source.
  * @public
  */
-export declare const Blockquote: (props: BlockquoteProps & import("react").RefAttributes<HTMLQuoteElement>) => React.ReactElement | null;
+export declare const Blockquote: (props: BlockquoteProps & import("react").RefAttributes<HTMLQuoteElement>) => import("react").ReactElement | null;

package/typography/block-quote/Blockquote.sty.js

@@ -22,4 +22,4 @@ __export(Blockquote_css_exports, {
 });
 module.exports = __toCommonJS(Blockquote_css_exports);
 var import_Blockquote_css_ts_vanilla = require("./Blockquote.css");
-var blockquoteCSS = "_1knl9z60-3-1-3";
+var blockquoteCSS = "_1knl9z60-3-2-1";

package/typography/code/Code.css

@@ -1,4 +1,4 @@
-._1v51izp0-3-1-3 {
+._1v51izp0-3-2-1 {
   background: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
   padding-top: var(--dt-spacings-size-0, 0);
   padding-bottom: var(--dt-spacings-size-0, 0);

package/typography/code/Code.d.ts

@@ -17,4 +17,4 @@ export interface CodeProps extends WithChildren, AriaLabelingProps, StylingProps
  * component instead.
  * @public
  */
-export declare const Code: (props: CodeProps & import("react").RefAttributes<HTMLElement>) => React.ReactElement | null;
+export declare const Code: (props: CodeProps & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement | null;

package/typography/code/Code.sty.js

@@ -22,4 +22,4 @@ __export(Code_css_exports, {
 });
 module.exports = __toCommonJS(Code_css_exports);
 var import_Code_css_ts_vanilla = require("./Code.css");
-var codeCSS = "_1v51izp0-3-1-3";
+var codeCSS = "_1v51izp0-3-2-1";

package/typography/emphasis/Emphasis.css

@@ -1,4 +1,4 @@
-._1r35rtu0-3-1-3 {
+._1r35rtu0-3-2-1 {
   font-style: italic;
   overflow-wrap: break-word;
 }

package/typography/emphasis/Emphasis.d.ts

@@ -14,4 +14,4 @@ export interface EmphasisProps extends WithChildren, AriaLabelingProps, StylingP
  * The `Emphasis` component adds visual and semantic emphasis to stressed or essential content.
  * @public
  */
-export declare const Emphasis: (props: EmphasisProps & import("react").RefAttributes<HTMLElement>) => React.ReactElement | null;
+export declare const Emphasis: (props: EmphasisProps & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement | null;

package/typography/emphasis/Emphasis.sty.js

@@ -22,4 +22,4 @@ __export(Emphasis_css_exports, {
 });
 module.exports = __toCommonJS(Emphasis_css_exports);
 var import_Emphasis_css_ts_vanilla = require("./Emphasis.css");
-var emphasisCSS = "_1r35rtu0-3-1-3";
+var emphasisCSS = "_1r35rtu0-3-2-1";

package/typography/external-link/ExternalLink.css

@@ -1,22 +1,22 @@
-._1v1skpy0-3-1-3 {
+._1v1skpy0-3-2-1 {
   display: inline;
   color: var(--dt-colors-text-primary-default, #464cce);
   text-decoration: underline;
   overflow-wrap: anywhere;
 }
-._1v1skpy0-3-1-3:hover {
+._1v1skpy0-3-2-1:hover {
   color: var(--dt-colors-text-primary-default-hover, #3431b3);
 }
-._1v1skpy0-3-1-3:active {
+._1v1skpy0-3-2-1:active {
   color: var(--dt-colors-text-primary-default-active, #250f98);
 }
-._1v1skpy0-3-1-3:focus-visible {
+._1v1skpy0-3-2-1:focus-visible {
   text-decoration: none;
 }
-._1v1skpy0-3-1-3 > span:last-child {
+._1v1skpy0-3-2-1 > span:last-child {
   white-space: nowrap;
 }
-._1v1skpy0-3-1-3 > span:last-child > svg {
+._1v1skpy0-3-2-1 > span:last-child > svg {
   margin-left: var(--dt-spacings-size-2, 2px);
   width: 1lh;
   height: 1lh;

package/typography/external-link/ExternalLink.d.ts

@@ -22,4 +22,4 @@ export interface ExternalLinkProps extends WithChildren, AriaLabelingProps, Styl
  * component instead.
  * @public
  */
-export declare const ExternalLink: (props: ExternalLinkProps & import("react").RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
+export declare const ExternalLink: (props: ExternalLinkProps & import("react").RefAttributes<HTMLAnchorElement>) => import("react").ReactElement | null;

package/typography/external-link/ExternalLink.sty.js

@@ -23,4 +23,4 @@ __export(ExternalLink_css_exports, {
 module.exports = __toCommonJS(ExternalLink_css_exports);
 var import_focusRingStatic_css_ts_vanilla = require("../../core/styles/focusRingStatic.css");
 var import_ExternalLink_css_ts_vanilla = require("./ExternalLink.css");
-var externalLink = "_1v1skpy0-3-1-3 _z0fq9b4-3-1-3 _z0fq9bd-3-1-3 _z0fq9b5-3-1-3 _z0fq9b8-3-1-3";
+var externalLink = "_1v1skpy0-3-2-1 _z0fq9b4-3-2-1 _z0fq9bd-3-2-1 _z0fq9b5-3-2-1 _z0fq9b8-3-2-1";

package/typography/heading/Heading.css

@@ -1,10 +1,10 @@
-._5ei34w0-3-1-3 {
+._5ei34w0-3-2-1 {
   margin: 0;
   overflow-wrap: break-word;
   font-style: normal;
   color: inherit;
 }
-._5ei34w1-3-1-3 {
+._5ei34w1-3-2-1 {
   font-family: var(--dt-typography-heading-level-1-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-heading-level-1-size, 32px);
   font-weight: var(--dt-typography-heading-level-1-weight, 600);
@@ -12,7 +12,7 @@
   text-transform: var(--dt-typography-heading-level-1-text-transform, none);
   text-decoration: var(--dt-typography-heading-level-1-text-decoration, none);
 }
-._5ei34w2-3-1-3 {
+._5ei34w2-3-2-1 {
   font-family: var(--dt-typography-heading-level-2-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-heading-level-2-size, 28px);
   font-weight: var(--dt-typography-heading-level-2-weight, 600);
@@ -20,7 +20,7 @@
   text-transform: var(--dt-typography-heading-level-2-text-transform, none);
   text-decoration: var(--dt-typography-heading-level-2-text-decoration, none);
 }
-._5ei34w3-3-1-3 {
+._5ei34w3-3-2-1 {
   font-family: var(--dt-typography-heading-level-3-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-heading-level-3-size, 24px);
   font-weight: var(--dt-typography-heading-level-3-weight, 600);
@@ -28,7 +28,7 @@
   text-transform: var(--dt-typography-heading-level-3-text-transform, none);
   text-decoration: var(--dt-typography-heading-level-3-text-decoration, none);
 }
-._5ei34w4-3-1-3 {
+._5ei34w4-3-2-1 {
   font-family: var(--dt-typography-heading-level-4-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-heading-level-4-size, 20px);
   font-weight: var(--dt-typography-heading-level-4-weight, 600);
@@ -36,7 +36,7 @@
   text-transform: var(--dt-typography-heading-level-4-text-transform, none);
   text-decoration: var(--dt-typography-heading-level-4-text-decoration, none);
 }
-._5ei34w5-3-1-3 {
+._5ei34w5-3-2-1 {
   font-family: var(--dt-typography-heading-level-5-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-heading-level-5-size, 16px);
   font-weight: var(--dt-typography-heading-level-5-weight, 600);
@@ -44,7 +44,7 @@
   text-transform: var(--dt-typography-heading-level-5-text-transform, none);
   text-decoration: var(--dt-typography-heading-level-5-text-decoration, none);
 }
-._5ei34w6-3-1-3 {
+._5ei34w6-3-2-1 {
   font-family: var(--dt-typography-heading-level-6-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-heading-level-6-size, 14px);
   font-weight: var(--dt-typography-heading-level-6-weight, 600);

package/typography/heading/Heading.d.ts

@@ -26,4 +26,4 @@ export interface HeadingProps extends DOMProps, WithChildren, AriaLabelingProps,
  * The component allows you to independently define both the visual and the semantic level of the heading.
  * @public
  */
-export declare const Heading: (props: HeadingProps & import("react").RefAttributes<HTMLHeadingElement>) => React.ReactElement | null;
+export declare const Heading: (props: HeadingProps & import("react").RefAttributes<HTMLHeadingElement>) => import("react").ReactElement | null;

package/typography/heading/Heading.sty.js

@@ -23,4 +23,4 @@ __export(Heading_css_exports, {
 module.exports = __toCommonJS(Heading_css_exports);
 var import_Heading_css_ts_vanilla = require("./Heading.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var headingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_5ei34w0-3-1-3", variantClassNames: { visualLevel: { "1": "_5ei34w1-3-1-3", "2": "_5ei34w2-3-1-3", "3": "_5ei34w3-3-1-3", "4": "_5ei34w4-3-1-3", "5": "_5ei34w5-3-1-3", "6": "_5ei34w6-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
+var headingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_5ei34w0-3-2-1", variantClassNames: { visualLevel: { "1": "_5ei34w1-3-2-1", "2": "_5ei34w2-3-2-1", "3": "_5ei34w3-3-2-1", "4": "_5ei34w4-3-2-1", "5": "_5ei34w5-3-2-1", "6": "_5ei34w6-3-2-1" } }, defaultVariants: {}, compoundVariants: [] });

package/typography/highlight/Highlight.css

@@ -1,8 +1,8 @@
-._lajjl30-3-1-3 {
+._lajjl30-3-2-1 {
   white-space: pre-wrap;
   flex: none;
 }
-._lajjl30-3-1-3::highlight(strato-typography-highlight), ._lajjl30-3-1-3 *::highlight(strato-typography-highlight) {
+._lajjl30-3-2-1::highlight(strato-typography-highlight), ._lajjl30-3-2-1 *::highlight(strato-typography-highlight) {
   color: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
   background: var(--dt-colors-background-container-neutral-accent, #5b5c81);
 }

package/typography/highlight/Highlight.sty.js

@@ -22,4 +22,4 @@ __export(Highlight_css_exports, {
 });
 module.exports = __toCommonJS(Highlight_css_exports);
 var import_Highlight_css_ts_vanilla = require("./Highlight.css");
-var wrapper = "_lajjl30-3-1-3";
+var wrapper = "_lajjl30-3-2-1";

package/typography/link/Link.css

@@ -1,15 +1,15 @@
-._1iksxp40-3-1-3 {
+._1iksxp40-3-2-1 {
   display: inline;
   color: var(--dt-colors-text-primary-default, #464cce);
   text-decoration: underline;
   overflow-wrap: anywhere;
 }
-._1iksxp40-3-1-3:hover {
+._1iksxp40-3-2-1:hover {
   color: var(--dt-colors-text-primary-default-hover, #3431b3);
 }
-._1iksxp40-3-1-3:active {
+._1iksxp40-3-2-1:active {
   color: var(--dt-colors-text-primary-default-active, #250f98);
 }
-._1iksxp40-3-1-3:focus-visible {
+._1iksxp40-3-2-1:focus-visible {
   text-decoration: none;
 }

package/typography/link/Link.sty.js

@@ -23,4 +23,4 @@ __export(Link_css_exports, {
 module.exports = __toCommonJS(Link_css_exports);
 var import_focusRingStatic_css_ts_vanilla = require("../../core/styles/focusRingStatic.css");
 var import_Link_css_ts_vanilla = require("./Link.css");
-var link = "_1iksxp40-3-1-3 _z0fq9b4-3-1-3 _z0fq9bd-3-1-3 _z0fq9b5-3-1-3 _z0fq9b8-3-1-3";
+var link = "_1iksxp40-3-2-1 _z0fq9b4-3-2-1 _z0fq9bd-3-2-1 _z0fq9b5-3-2-1 _z0fq9b8-3-2-1";

package/typography/list/List.css

@@ -1,16 +1,16 @@
-._16276mt0-3-1-3 {
+._16276mt0-3-2-1 {
   margin: 0;
   padding-left: var(--dt-spacings-size-40, 40px);
 }
-._16276mt0-3-1-3 ._16276mt0-3-1-3 {
+._16276mt0-3-2-1 ._16276mt0-3-2-1 {
   margin-block: var(--dt-spacings-size-4, 4px);
   padding-left: var(--dt-spacings-size-28, 28px);
 }
-._16276mt1-3-1-3 {
+._16276mt1-3-2-1 {
   position: relative;
   overflow-wrap: break-word;
   margin-block: var(--dt-spacings-size-2, 2px);
 }
-._16276mt1-3-1-3::marker {
+._16276mt1-3-2-1::marker {
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
 }