@dynatrace/strato-components 3.0.1 → 3.1.0

package/esm/tables/SimpleTable/SimpleTable.js

@@ -8,19 +8,25 @@ import clsx from "clsx";
 import { forwardRef } from "react";
 import { useColumns } from "./hooks/useColumns.js";
 import * as styles from "./SimpleTable.sty.js";
+import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
+import { useSafeForwardProps } from "../../core/hooks/useSafeForwardProps.js";
 const COMPONENT_NAME = "SimpleTable";
 function InternalSimpleTable(props, forwardedRef) {
   const {
     data,
     columns,
-    "data-testid": dataTestId,
-    "data-dtrum-mask": dataDtrumMask,
-    "data-dtrum-allow": dataDtrumAllow,
     variant,
     style: consumerStyle,
     className: consumerClassName,
+    "data-testid": dataTestId,
+    "data-dtrum-mask": dataDtrumMask,
+    "data-dtrum-allow": dataDtrumAllow,
     ...remainingProps
   } = props;
+  const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
+  const ariaLabelingProps = useAriaLabelingProps(restProps);
+  const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);
   const extractedColumns = useColumns(columns);
   const table = useReactTable({
     data,
@@ -38,9 +44,6 @@ function InternalSimpleTable(props, forwardedRef) {
     "table",
     {
       ref: forwardedRef,
-      "data-testid": dataTestId,
-      "data-dtrum-mask": dataDtrumMask,
-      "data-dtrum-allow": dataDtrumAllow,
       className: clsx(styles.simpleTable, consumerClassName, {
         "strato-table-contained": combinedVariants.contained,
         "strato-table-colsep-divider": combinedVariants.verticalDividers,
@@ -52,7 +55,12 @@ function InternalSimpleTable(props, forwardedRef) {
         "strato-table-rowsep-divider": combinedVariants.rowSeparation === "horizontalDividers" || combinedVariants.rowSeparation === "zebraStripes"
       }),
       style: consumerStyle,
-      ...remainingProps,
+      "data-testid": dataTestId,
+      "data-dtrum-mask": dataDtrumMask,
+      "data-dtrum-allow": dataDtrumAllow,
+      ...ariaLabelingProps,
+      ...behavioralTrackingProps,
+      ...forwardProps,
       "data-dt-component": COMPONENT_NAME,
       children: [
         /* @__PURE__ */ jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { className: "strato-table-header", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(

package/esm/tables/SimpleTable/SimpleTable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/tables/SimpleTable/SimpleTable.tsx"],
-  "sourcesContent": ["import {\n  flexRender,\n  getCoreRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport { forwardRef, type Ref } from 'react';\n\nimport { useColumns } from './hooks/useColumns.js';\nimport type {\n  SimpleTableColumnDefBase,\n  SimpleTableProps,\n  SimpleTableRowData,\n} from './public.api.js';\nimport * as styles from './SimpleTable.sty.js';\n\nconst COMPONENT_NAME = 'SimpleTable';\n\n// https://tanstack.com/table/latest/docs/api/core/column-def#meta\ndeclare module '@tanstack/react-table' {\n  interface ColumnMeta<TData extends SimpleTableRowData, TValue> {\n    alignment?: SimpleTableColumnDefBase<TData, TValue>['alignment'];\n    width?: SimpleTableColumnDefBase<TData, TValue>['width'];\n    minWidth?: SimpleTableColumnDefBase<TData, TValue>['minWidth'];\n    maxWidth?: SimpleTableColumnDefBase<TData, TValue>['maxWidth'];\n  }\n}\n\n/**\n * The `SimpleTable` component is a simplified version of the `DataTable`. It is\n * designed to handle small sets of data and markdown representation. It does not\n * feature sorting, resizing, filtering, or virtualization and behaves like a\n * native HTML table.\n */\nfunction InternalSimpleTable<TData, TValue>(\n  props: SimpleTableProps<TData>,\n  forwardedRef: Ref<HTMLTableElement>,\n) {\n  const {\n    data,\n    columns,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    variant,\n    style: consumerStyle,\n    className: consumerClassName,\n    ...remainingProps\n  } = props;\n\n  // Hook used to adapt column definition for internal usage\n  const extractedColumns = useColumns<TData, TValue>(columns);\n\n  const table = useReactTable({\n    data,\n    columns: extractedColumns,\n    getCoreRowModel: getCoreRowModel(),\n  });\n\n  const combinedVariants: Required<SimpleTableProps['variant']> = {\n    rowSeparation: variant?.rowSeparation ?? 'horizontalDividers',\n    verticalDividers: variant?.verticalDividers ?? false,\n    contained: variant?.contained ?? true,\n    rowDensity: variant?.rowDensity ?? 'default',\n    fontStyle: variant?.fontStyle ?? 'text',\n  };\n\n  return (\n    <table\n      ref={forwardedRef}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      className={clsx(styles.simpleTable, consumerClassName, {\n        'strato-table-contained': combinedVariants.contained,\n        'strato-table-colsep-divider': combinedVariants.verticalDividers,\n        'strato-table-code-font': combinedVariants.fontStyle === 'code',\n        'strato-table-cell-density-default':\n          combinedVariants.rowDensity === 'default',\n        'strato-table-cell-density-condensed':\n          combinedVariants.rowDensity === 'condensed',\n        'strato-table-cell-density-comfortable':\n          combinedVariants.rowDensity === 'comfortable',\n        'strato-table-rowsep-zebra':\n          combinedVariants.rowSeparation === 'zebraStripes',\n        'strato-table-rowsep-divider':\n          combinedVariants.rowSeparation === 'horizontalDividers' ||\n          combinedVariants.rowSeparation === 'zebraStripes',\n      })}\n      style={consumerStyle}\n      {...remainingProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <thead>\n        {table.getHeaderGroups().map((headerGroup) => (\n          <tr key={headerGroup.id} className=\"strato-table-header\">\n            {headerGroup.headers.map((header) => (\n              <th\n                key={header.id}\n                className={clsx('strato-table-header-cell', {\n                  'strato-table-cell-alignment-left':\n                    header.column.columnDef.meta?.alignment === 'left',\n                  'strato-table-cell-alignment-center':\n                    header.column.columnDef.meta?.alignment === 'center',\n                  'strato-table-cell-alignment-right':\n                    header.column.columnDef.meta?.alignment === 'right',\n                  'strato-table-cell-alignment-top-left':\n                    header.column.columnDef.meta?.alignment === 'top-left',\n                  'strato-table-cell-alignment-top-center':\n                    header.column.columnDef.meta?.alignment === 'top-center',\n                  'strato-table-cell-alignment-top-right':\n                    header.column.columnDef.meta?.alignment === 'top-right',\n                  'strato-table-cell-alignment-bottom-left':\n                    header.column.columnDef.meta?.alignment === 'bottom-left',\n                  'strato-table-cell-alignment-bottom-center':\n                    header.column.columnDef.meta?.alignment === 'bottom-center',\n                  'strato-table-cell-alignment-bottom-right':\n                    header.column.columnDef.meta?.alignment === 'bottom-right',\n                })}\n                style={{\n                  minWidth: header.column.columnDef.meta?.minWidth,\n                  width: header.column.columnDef.meta?.width,\n                  maxWidth: header.column.columnDef.meta?.maxWidth,\n                }}\n              >\n                {header.isPlaceholder\n                  ? null\n                  : flexRender(\n                      header.column.columnDef.header,\n                      header.getContext(),\n                    )}\n              </th>\n            ))}\n          </tr>\n        ))}\n      </thead>\n      <tbody>\n        {table.getRowModel().rows.map((row, rowIndex) => (\n          <tr\n            key={row.id}\n            className={clsx('strato-table-row', {\n              'strato-table-row-even': rowIndex % 2,\n            })}\n          >\n            {row.getVisibleCells().map((cell) => (\n              <td\n                key={cell.id}\n                className={clsx('strato-table-cell', {\n                  'strato-table-cell-alignment-left':\n                    cell.column.columnDef.meta?.alignment === 'left',\n                  'strato-table-cell-alignment-center':\n                    cell.column.columnDef.meta?.alignment === 'center',\n                  'strato-table-cell-alignment-right':\n                    cell.column.columnDef.meta?.alignment === 'right',\n                  'strato-table-cell-alignment-top-left':\n                    cell.column.columnDef.meta?.alignment === 'top-left',\n                  'strato-table-cell-alignment-top-center':\n                    cell.column.columnDef.meta?.alignment === 'top-center',\n                  'strato-table-cell-alignment-top-right':\n                    cell.column.columnDef.meta?.alignment === 'top-right',\n                  'strato-table-cell-alignment-bottom-left':\n                    cell.column.columnDef.meta?.alignment === 'bottom-left',\n                  'strato-table-cell-alignment-bottom-center':\n                    cell.column.columnDef.meta?.alignment === 'bottom-center',\n                  'strato-table-cell-alignment-bottom-right':\n                    cell.column.columnDef.meta?.alignment === 'bottom-right',\n                })}\n                style={{\n                  minWidth: cell.column.columnDef.meta?.minWidth,\n                  width: cell.column.columnDef.meta?.width,\n                  maxWidth: cell.column.columnDef.meta?.maxWidth,\n                }}\n              >\n                {flexRender(cell.column.columnDef.cell, cell.getContext())}\n              </td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\nInternalSimpleTable.displayName = COMPONENT_NAME;\n\n/**\n * The `SimpleTable` component is a simplified version of the `DataTable`. It is\n * designed to handle small sets of data and markdown representation. It does not\n * feature sorting, resizing, filtering, or virtualization and behaves like a\n * native HTML table.\n * @public\n */\nexport const SimpleTable = /* @__PURE__ */ forwardRef(InternalSimpleTable);\n"],
-  "mappings": "AAoEI,SA6BU,KA7BV;AApEJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAO,UAAU;AACjB,SAAS,kBAA4B;AAErC,SAAS,kBAAkB;AAM3B,YAAY,YAAY;AAExB,MAAM,iBAAiB;AAkBvB,SAAS,oBACP,OACA,cACA;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB;AAAA,IACA,OAAO;AAAA,IACP,WAAW;AAAA,IACX,GAAG;AAAA,EACL,IAAI;AAGJ,QAAM,mBAAmB,WAA0B,OAAO;AAE1D,QAAM,QAAQ,cAAc;AAAA,IAC1B;AAAA,IACA,SAAS;AAAA,IACT,iBAAiB,gBAAgB;AAAA,EACnC,CAAC;AAED,QAAM,mBAA0D;AAAA,IAC9D,eAAe,SAAS,iBAAiB;AAAA,IACzC,kBAAkB,SAAS,oBAAoB;AAAA,IAC/C,WAAW,SAAS,aAAa;AAAA,IACjC,YAAY,SAAS,cAAc;AAAA,IACnC,WAAW,SAAS,aAAa;AAAA,EACnC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,WAAW,KAAK,OAAO,aAAa,mBAAmB;AAAA,QACrD,0BAA0B,iBAAiB;AAAA,QAC3C,+BAA+B,iBAAiB;AAAA,QAChD,0BAA0B,iBAAiB,cAAc;AAAA,QACzD,qCACE,iBAAiB,eAAe;AAAA,QAClC,uCACE,iBAAiB,eAAe;AAAA,QAClC,yCACE,iBAAiB,eAAe;AAAA,QAClC,6BACE,iBAAiB,kBAAkB;AAAA,QACrC,+BACE,iBAAiB,kBAAkB,wBACnC,iBAAiB,kBAAkB;AAAA,MACvC,CAAC;AAAA,MACD,OAAO;AAAA,MACN,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAEnB;AAAA,4BAAC,WACE,gBAAM,gBAAgB,EAAE,IAAI,CAAC,gBAC5B,oBAAC,QAAwB,WAAU,uBAChC,sBAAY,QAAQ,IAAI,CAAC,WACxB;AAAA,UAAC;AAAA;AAAA,YAEC,WAAW,KAAK,4BAA4B;AAAA,cAC1C,oCACE,OAAO,OAAO,UAAU,MAAM,cAAc;AAAA,cAC9C,sCACE,OAAO,OAAO,UAAU,MAAM,cAAc;AAAA,cAC9C,qCACE,OAAO,OAAO,UAAU,MAAM,cAAc;AAAA,cAC9C,wCACE,OAAO,OAAO,UAAU,MAAM,cAAc;AAAA,cAC9C,0CACE,OAAO,OAAO,UAAU,MAAM,cAAc;AAAA,cAC9C,yCACE,OAAO,OAAO,UAAU,MAAM,cAAc;AAAA,cAC9C,2CACE,OAAO,OAAO,UAAU,MAAM,cAAc;AAAA,cAC9C,6CACE,OAAO,OAAO,UAAU,MAAM,cAAc;AAAA,cAC9C,4CACE,OAAO,OAAO,UAAU,MAAM,cAAc;AAAA,YAChD,CAAC;AAAA,YACD,OAAO;AAAA,cACL,UAAU,OAAO,OAAO,UAAU,MAAM;AAAA,cACxC,OAAO,OAAO,OAAO,UAAU,MAAM;AAAA,cACrC,UAAU,OAAO,OAAO,UAAU,MAAM;AAAA,YAC1C;AAAA,YAEC,iBAAO,gBACJ,OACA;AAAA,cACE,OAAO,OAAO,UAAU;AAAA,cACxB,OAAO,WAAW;AAAA,YACpB;AAAA;AAAA,UAhCC,OAAO;AAAA,QAiCd,CACD,KArCM,YAAY,EAsCrB,CACD,GACH;AAAA,QACA,oBAAC,WACE,gBAAM,YAAY,EAAE,KAAK,IAAI,CAAC,KAAK,aAClC;AAAA,UAAC;AAAA;AAAA,YAEC,WAAW,KAAK,oBAAoB;AAAA,cAClC,yBAAyB,WAAW;AAAA,YACtC,CAAC;AAAA,YAEA,cAAI,gBAAgB,EAAE,IAAI,CAAC,SAC1B;AAAA,cAAC;AAAA;AAAA,gBAEC,WAAW,KAAK,qBAAqB;AAAA,kBACnC,oCACE,KAAK,OAAO,UAAU,MAAM,cAAc;AAAA,kBAC5C,sCACE,KAAK,OAAO,UAAU,MAAM,cAAc;AAAA,kBAC5C,qCACE,KAAK,OAAO,UAAU,MAAM,cAAc;AAAA,kBAC5C,wCACE,KAAK,OAAO,UAAU,MAAM,cAAc;AAAA,kBAC5C,0CACE,KAAK,OAAO,UAAU,MAAM,cAAc;AAAA,kBAC5C,yCACE,KAAK,OAAO,UAAU,MAAM,cAAc;AAAA,kBAC5C,2CACE,KAAK,OAAO,UAAU,MAAM,cAAc;AAAA,kBAC5C,6CACE,KAAK,OAAO,UAAU,MAAM,cAAc;AAAA,kBAC5C,4CACE,KAAK,OAAO,UAAU,MAAM,cAAc;AAAA,gBAC9C,CAAC;AAAA,gBACD,OAAO;AAAA,kBACL,UAAU,KAAK,OAAO,UAAU,MAAM;AAAA,kBACtC,OAAO,KAAK,OAAO,UAAU,MAAM;AAAA,kBACnC,UAAU,KAAK,OAAO,UAAU,MAAM;AAAA,gBACxC;AAAA,gBAEC,qBAAW,KAAK,OAAO,UAAU,MAAM,KAAK,WAAW,CAAC;AAAA;AAAA,cA3BpD,KAAK;AAAA,YA4BZ,CACD;AAAA;AAAA,UApCI,IAAI;AAAA,QAqCX,CACD,GACH;AAAA;AAAA;AAAA,EACF;AAEJ;AACA,oBAAoB,cAAc;AAS3B,MAAM,cAA8B,2BAAW,mBAAmB;",
+  "sourcesContent": ["import {\n  flexRender,\n  getCoreRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport { forwardRef, type Ref } from 'react';\n\nimport { useColumns } from './hooks/useColumns.js';\nimport type {\n  SimpleTableColumnDefBase,\n  SimpleTableProps,\n  SimpleTableRowData,\n} from './public.api.js';\nimport * as styles from './SimpleTable.sty.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\n\nconst COMPONENT_NAME = 'SimpleTable';\n\n// https://tanstack.com/table/latest/docs/api/core/column-def#meta\ndeclare module '@tanstack/react-table' {\n  interface ColumnMeta<TData extends SimpleTableRowData, TValue> {\n    alignment?: SimpleTableColumnDefBase<TData, TValue>['alignment'];\n    width?: SimpleTableColumnDefBase<TData, TValue>['width'];\n    minWidth?: SimpleTableColumnDefBase<TData, TValue>['minWidth'];\n    maxWidth?: SimpleTableColumnDefBase<TData, TValue>['maxWidth'];\n  }\n}\n\n/**\n * The `SimpleTable` component is a simplified version of the `DataTable`. It is\n * designed to handle small sets of data and markdown representation. It does not\n * feature sorting, resizing, filtering, or virtualization and behaves like a\n * native HTML table.\n */\nfunction InternalSimpleTable<TData, TValue>(\n  props: SimpleTableProps<TData>,\n  forwardedRef: Ref<HTMLTableElement>,\n) {\n  const {\n    data,\n    columns,\n    variant,\n    style: consumerStyle,\n    className: consumerClassName,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  } = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n  const ariaLabelingProps = useAriaLabelingProps(restProps);\n  const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n  // Hook used to adapt column definition for internal usage\n  const extractedColumns = useColumns<TData, TValue>(columns);\n\n  const table = useReactTable({\n    data,\n    columns: extractedColumns,\n    getCoreRowModel: getCoreRowModel(),\n  });\n\n  const combinedVariants: Required<SimpleTableProps['variant']> = {\n    rowSeparation: variant?.rowSeparation ?? 'horizontalDividers',\n    verticalDividers: variant?.verticalDividers ?? false,\n    contained: variant?.contained ?? true,\n    rowDensity: variant?.rowDensity ?? 'default',\n    fontStyle: variant?.fontStyle ?? 'text',\n  };\n\n  return (\n    <table\n      ref={forwardedRef}\n      className={clsx(styles.simpleTable, consumerClassName, {\n        'strato-table-contained': combinedVariants.contained,\n        'strato-table-colsep-divider': combinedVariants.verticalDividers,\n        'strato-table-code-font': combinedVariants.fontStyle === 'code',\n        'strato-table-cell-density-default':\n          combinedVariants.rowDensity === 'default',\n        'strato-table-cell-density-condensed':\n          combinedVariants.rowDensity === 'condensed',\n        'strato-table-cell-density-comfortable':\n          combinedVariants.rowDensity === 'comfortable',\n        'strato-table-rowsep-zebra':\n          combinedVariants.rowSeparation === 'zebraStripes',\n        'strato-table-rowsep-divider':\n          combinedVariants.rowSeparation === 'horizontalDividers' ||\n          combinedVariants.rowSeparation === 'zebraStripes',\n      })}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      {...ariaLabelingProps}\n      {...behavioralTrackingProps}\n      {...forwardProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <thead>\n        {table.getHeaderGroups().map((headerGroup) => (\n          <tr key={headerGroup.id} className=\"strato-table-header\">\n            {headerGroup.headers.map((header) => (\n              <th\n                key={header.id}\n                className={clsx('strato-table-header-cell', {\n                  'strato-table-cell-alignment-left':\n                    header.column.columnDef.meta?.alignment === 'left',\n                  'strato-table-cell-alignment-center':\n                    header.column.columnDef.meta?.alignment === 'center',\n                  'strato-table-cell-alignment-right':\n                    header.column.columnDef.meta?.alignment === 'right',\n                  'strato-table-cell-alignment-top-left':\n                    header.column.columnDef.meta?.alignment === 'top-left',\n                  'strato-table-cell-alignment-top-center':\n                    header.column.columnDef.meta?.alignment === 'top-center',\n                  'strato-table-cell-alignment-top-right':\n                    header.column.columnDef.meta?.alignment === 'top-right',\n                  'strato-table-cell-alignment-bottom-left':\n                    header.column.columnDef.meta?.alignment === 'bottom-left',\n                  'strato-table-cell-alignment-bottom-center':\n                    header.column.columnDef.meta?.alignment === 'bottom-center',\n                  'strato-table-cell-alignment-bottom-right':\n                    header.column.columnDef.meta?.alignment === 'bottom-right',\n                })}\n                style={{\n                  minWidth: header.column.columnDef.meta?.minWidth,\n                  width: header.column.columnDef.meta?.width,\n                  maxWidth: header.column.columnDef.meta?.maxWidth,\n                }}\n              >\n                {header.isPlaceholder\n                  ? null\n                  : flexRender(\n                      header.column.columnDef.header,\n                      header.getContext(),\n                    )}\n              </th>\n            ))}\n          </tr>\n        ))}\n      </thead>\n      <tbody>\n        {table.getRowModel().rows.map((row, rowIndex) => (\n          <tr\n            key={row.id}\n            className={clsx('strato-table-row', {\n              'strato-table-row-even': rowIndex % 2,\n            })}\n          >\n            {row.getVisibleCells().map((cell) => (\n              <td\n                key={cell.id}\n                className={clsx('strato-table-cell', {\n                  'strato-table-cell-alignment-left':\n                    cell.column.columnDef.meta?.alignment === 'left',\n                  'strato-table-cell-alignment-center':\n                    cell.column.columnDef.meta?.alignment === 'center',\n                  'strato-table-cell-alignment-right':\n                    cell.column.columnDef.meta?.alignment === 'right',\n                  'strato-table-cell-alignment-top-left':\n                    cell.column.columnDef.meta?.alignment === 'top-left',\n                  'strato-table-cell-alignment-top-center':\n                    cell.column.columnDef.meta?.alignment === 'top-center',\n                  'strato-table-cell-alignment-top-right':\n                    cell.column.columnDef.meta?.alignment === 'top-right',\n                  'strato-table-cell-alignment-bottom-left':\n                    cell.column.columnDef.meta?.alignment === 'bottom-left',\n                  'strato-table-cell-alignment-bottom-center':\n                    cell.column.columnDef.meta?.alignment === 'bottom-center',\n                  'strato-table-cell-alignment-bottom-right':\n                    cell.column.columnDef.meta?.alignment === 'bottom-right',\n                })}\n                style={{\n                  minWidth: cell.column.columnDef.meta?.minWidth,\n                  width: cell.column.columnDef.meta?.width,\n                  maxWidth: cell.column.columnDef.meta?.maxWidth,\n                }}\n              >\n                {flexRender(cell.column.columnDef.cell, cell.getContext())}\n              </td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\nInternalSimpleTable.displayName = COMPONENT_NAME;\n\n/**\n * The `SimpleTable` component is a simplified version of the `DataTable`. It is\n * designed to handle small sets of data and markdown representation. It does not\n * feature sorting, resizing, filtering, or virtualization and behaves like a\n * native HTML table.\n * @public\n */\nexport const SimpleTable = /* @__PURE__ */ forwardRef(InternalSimpleTable);\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/tables/SimpleTable/SimpleTable.sty.js

@@ -1,5 +1,5 @@
 import "./SimpleTable.css";
-var simpleTable = "_1ymahou0-3-0-1";
+var simpleTable = "_1ymahou0-3-1-0";
 export {
   simpleTable
 };

package/esm/tables/SimpleTable/SimpleTable.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/tables/SimpleTable/SimpleTable.css.ts"],
-  "sourcesContent": ["import './SimpleTable.css';\nexport var simpleTable = '_1ymahou0-3-0-1';"],
+  "sourcesContent": ["import './SimpleTable.css';\nexport var simpleTable = '_1ymahou0-3-1-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,cAAc;",
   "names": []
 }

package/esm/tables/convert-to-columns/convert-to-columns.js

@@ -16,7 +16,7 @@ function extractColumnTypes(rangedFieldTypes) {
   return columnTypes;
 }
 const FieldTypeTypeToColumnType = /* @__PURE__ */ new Map([
-  ["timestamp", "date"],
+  ["timestamp", "datetime"],
   ["long", "long"],
   ["double", "number"],
   ["duration", "number"]
@@ -50,7 +50,7 @@ function getTimeframeColumn(columnKey) {
           }
           return "";
         },
-        columnType: "date",
+        columnType: "datetime",
         width: "content"
       },
       {
@@ -62,7 +62,7 @@ function getTimeframeColumn(columnKey) {
           }
           return "";
         },
-        columnType: "date",
+        columnType: "datetime",
         width: "content"
       }
     ]

package/esm/tables/convert-to-columns/convert-to-columns.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/tables/convert-to-columns/convert-to-columns.tsx"],
-  "sourcesContent": ["import type {\n  FieldType,\n  RangedFieldTypes,\n  ResultRecord,\n} from '@dynatrace-sdk/client-query';\nimport {\n  units,\n  type ConvertibleUnit,\n  type FormatOptions,\n  type Unit,\n} from '@dynatrace-sdk/units';\n\nimport type { DataTableColumnDef } from '../DataTable/public.api.js';\n\nfunction extractColumnTypes(\n  rangedFieldTypes: RangedFieldTypes[],\n): Map<string, Set<FieldType['type']>> {\n  const columnTypes = new Map<string, Set<FieldType['type']>>();\n  for (const { mappings } of rangedFieldTypes) {\n    for (const key in mappings) {\n      const type = mappings[key]?.type ?? 'string';\n      if (columnTypes.has(key)) {\n        columnTypes.get(key)?.add(type);\n      } else {\n        columnTypes.set(key, new Set([type]));\n      }\n    }\n  }\n  return columnTypes;\n}\n\n/**\n * Mapping from a Grail type to a built-in column type of the DataTable\n */\nconst FieldTypeTypeToColumnType = new Map<\n  FieldType['type'],\n  'date' | 'number' | 'long' | undefined\n>([\n  ['timestamp', 'date'],\n  ['long', 'long'],\n  ['double', 'number'],\n  ['duration', 'number'],\n]);\n\n/**\n * Mapping from a Grail type to a built-in predefined formatter.\n */\nconst FieldTypeTypeToFormatter = new Map<\n  FieldType['type'],\n  FormatOptions<Unit, ConvertibleUnit>\n>([\n  [\n    'duration',\n    {\n      input: units.time.nanosecond,\n      cascade: 3,\n    },\n  ],\n]);\n\nfunction isTimeFrameEntry(value: unknown): value is { start: Date; end: Date } {\n  return (\n    value !== undefined &&\n    value !== null &&\n    (value as { start: unknown }).start !== undefined &&\n    (value as { start: unknown }).start !== null &&\n    (value as { start: unknown }).start instanceof Date &&\n    (value as { end: unknown }).end !== undefined &&\n    (value as { end: unknown }).end !== null &&\n    (value as { end: unknown }).end instanceof Date\n  );\n}\n\nfunction isTimeGeoPointEntry(\n  value: unknown,\n): value is { latitude: number; longitude: number } {\n  return (\n    value !== undefined &&\n    value !== null &&\n    (value as { latitude: unknown }).latitude !== undefined &&\n    (value as { latitude: unknown }).latitude !== null &&\n    typeof (value as { latitude: unknown }).latitude === 'number' &&\n    (value as { longitude: unknown }).longitude !== undefined &&\n    (value as { longitude: unknown }).longitude !== null &&\n    typeof (value as { longitude: unknown }).longitude === 'number'\n  );\n}\n\nfunction getTimeframeColumn(\n  columnKey: string,\n): DataTableColumnDef<ResultRecord | null> {\n  // For timeframes, we can split it into two columns for start and end.\n  return {\n    header: columnKey,\n    id: columnKey,\n    columns: [\n      {\n        header: 'start',\n        id: `${columnKey}.start`,\n        accessor: (row) => {\n          if (isTimeFrameEntry(row?.[columnKey])) {\n            return row[columnKey].start;\n          }\n          return '';\n        },\n        columnType: 'date',\n        width: 'content',\n      },\n      {\n        header: 'end',\n        id: `${columnKey}.end`,\n        accessor: (row) => {\n          if (isTimeFrameEntry(row?.[columnKey])) {\n            return row[columnKey].end;\n          }\n          return '';\n        },\n        columnType: 'date',\n        width: 'content',\n      },\n    ],\n  };\n}\n\nfunction getGeoPointColumn(\n  columnKey: string,\n): DataTableColumnDef<ResultRecord | null> {\n  // For geopoints, we can split it into two columns for longitude and latitude.\n  return {\n    header: columnKey,\n    id: columnKey,\n    columns: [\n      {\n        header: 'longitude',\n        id: `${columnKey}.longitude`,\n        accessor: (row) => {\n          if (isTimeGeoPointEntry(row?.[columnKey])) {\n            return row[columnKey].longitude;\n          }\n          return '';\n        },\n        columnType: 'text',\n        width: 'content',\n      },\n      {\n        header: 'latitude',\n        id: `${columnKey}.latitude`,\n        accessor: (row) => {\n          if (isTimeGeoPointEntry(row?.[columnKey])) {\n            return row[columnKey].latitude;\n          }\n          return '';\n        },\n        columnType: 'text',\n        width: 'content',\n      },\n    ],\n  };\n}\n\n/**\n * @public\n */\nexport function convertToColumns(\n  rangedFieldTypes: RangedFieldTypes[],\n): DataTableColumnDef<ResultRecord | null>[] {\n  const extractedTypes = extractColumnTypes(rangedFieldTypes);\n  const columns: DataTableColumnDef<ResultRecord | null>[] = [];\n\n  for (const [columnKey, columnTypes] of extractedTypes.entries()) {\n    const columnHasOnlyOneType = columnTypes.size === 1;\n    const columnType = columnHasOnlyOneType\n      ? Array.from(columnTypes)[0]\n      : 'string'; // ambiguous definition, fall back to text\n\n    if (columnType === 'timeframe') {\n      columns.push(getTimeframeColumn(columnKey));\n    } else if (columnType === 'geo_point') {\n      columns.push(getGeoPointColumn(columnKey));\n    } else {\n      columns.push({\n        header: columnKey,\n        id: columnKey,\n        accessor: (row) => row?.[columnKey],\n        width: 'content',\n        columnType: FieldTypeTypeToColumnType.get(columnType) ?? 'text',\n        formatter: FieldTypeTypeToFormatter.get(columnType) ?? undefined,\n      } as DataTableColumnDef<ResultRecord | null>);\n    }\n  }\n  return columns;\n}\n"],
-  "mappings": "AAKA;AAAA,EACE;AAAA,OAIK;AAIP,SAAS,mBACP,kBACqC;AACrC,QAAM,cAAc,oBAAI,IAAoC;AAC5D,aAAW,EAAE,SAAS,KAAK,kBAAkB;AAC3C,eAAW,OAAO,UAAU;AAC1B,YAAM,OAAO,SAAS,GAAG,GAAG,QAAQ;AACpC,UAAI,YAAY,IAAI,GAAG,GAAG;AACxB,oBAAY,IAAI,GAAG,GAAG,IAAI,IAAI;AAAA,MAChC,OAAO;AACL,oBAAY,IAAI,KAAK,oBAAI,IAAI,CAAC,IAAI,CAAC,CAAC;AAAA,MACtC;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAKA,MAAM,4BAA4B,oBAAI,IAGpC;AAAA,EACA,CAAC,aAAa,MAAM;AAAA,EACpB,CAAC,QAAQ,MAAM;AAAA,EACf,CAAC,UAAU,QAAQ;AAAA,EACnB,CAAC,YAAY,QAAQ;AACvB,CAAC;AAKD,MAAM,2BAA2B,oBAAI,IAGnC;AAAA,EACA;AAAA,IACE;AAAA,IACA;AAAA,MACE,OAAO,MAAM,KAAK;AAAA,MAClB,SAAS;AAAA,IACX;AAAA,EACF;AACF,CAAC;AAED,SAAS,iBAAiB,OAAqD;AAC7E,SACE,UAAU,UACV,UAAU,QACT,MAA6B,UAAU,UACvC,MAA6B,UAAU,QACvC,MAA6B,iBAAiB,QAC9C,MAA2B,QAAQ,UACnC,MAA2B,QAAQ,QACnC,MAA2B,eAAe;AAE/C;AAEA,SAAS,oBACP,OACkD;AAClD,SACE,UAAU,UACV,UAAU,QACT,MAAgC,aAAa,UAC7C,MAAgC,aAAa,QAC9C,OAAQ,MAAgC,aAAa,YACpD,MAAiC,cAAc,UAC/C,MAAiC,cAAc,QAChD,OAAQ,MAAiC,cAAc;AAE3D;AAEA,SAAS,mBACP,WACyC;AAEzC,SAAO;AAAA,IACL,QAAQ;AAAA,IACR,IAAI;AAAA,IACJ,SAAS;AAAA,MACP;AAAA,QACE,QAAQ;AAAA,QACR,IAAI,GAAG,SAAS;AAAA,QAChB,UAAU,CAAC,QAAQ;AACjB,cAAI,iBAAiB,MAAM,SAAS,CAAC,GAAG;AACtC,mBAAO,IAAI,SAAS,EAAE;AAAA,UACxB;AACA,iBAAO;AAAA,QACT;AAAA,QACA,YAAY;AAAA,QACZ,OAAO;AAAA,MACT;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,IAAI,GAAG,SAAS;AAAA,QAChB,UAAU,CAAC,QAAQ;AACjB,cAAI,iBAAiB,MAAM,SAAS,CAAC,GAAG;AACtC,mBAAO,IAAI,SAAS,EAAE;AAAA,UACxB;AACA,iBAAO;AAAA,QACT;AAAA,QACA,YAAY;AAAA,QACZ,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF;AAEA,SAAS,kBACP,WACyC;AAEzC,SAAO;AAAA,IACL,QAAQ;AAAA,IACR,IAAI;AAAA,IACJ,SAAS;AAAA,MACP;AAAA,QACE,QAAQ;AAAA,QACR,IAAI,GAAG,SAAS;AAAA,QAChB,UAAU,CAAC,QAAQ;AACjB,cAAI,oBAAoB,MAAM,SAAS,CAAC,GAAG;AACzC,mBAAO,IAAI,SAAS,EAAE;AAAA,UACxB;AACA,iBAAO;AAAA,QACT;AAAA,QACA,YAAY;AAAA,QACZ,OAAO;AAAA,MACT;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,IAAI,GAAG,SAAS;AAAA,QAChB,UAAU,CAAC,QAAQ;AACjB,cAAI,oBAAoB,MAAM,SAAS,CAAC,GAAG;AACzC,mBAAO,IAAI,SAAS,EAAE;AAAA,UACxB;AACA,iBAAO;AAAA,QACT;AAAA,QACA,YAAY;AAAA,QACZ,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF;AAKO,SAAS,iBACd,kBAC2C;AAC3C,QAAM,iBAAiB,mBAAmB,gBAAgB;AAC1D,QAAM,UAAqD,CAAC;AAE5D,aAAW,CAAC,WAAW,WAAW,KAAK,eAAe,QAAQ,GAAG;AAC/D,UAAM,uBAAuB,YAAY,SAAS;AAClD,UAAM,aAAa,uBACf,MAAM,KAAK,WAAW,EAAE,CAAC,IACzB;AAEJ,QAAI,eAAe,aAAa;AAC9B,cAAQ,KAAK,mBAAmB,SAAS,CAAC;AAAA,IAC5C,WAAW,eAAe,aAAa;AACrC,cAAQ,KAAK,kBAAkB,SAAS,CAAC;AAAA,IAC3C,OAAO;AACL,cAAQ,KAAK;AAAA,QACX,QAAQ;AAAA,QACR,IAAI;AAAA,QACJ,UAAU,CAAC,QAAQ,MAAM,SAAS;AAAA,QAClC,OAAO;AAAA,QACP,YAAY,0BAA0B,IAAI,UAAU,KAAK;AAAA,QACzD,WAAW,yBAAyB,IAAI,UAAU,KAAK;AAAA,MACzD,CAA4C;AAAA,IAC9C;AAAA,EACF;AACA,SAAO;AACT;",
+  "sourcesContent": ["import type {\n  FieldType,\n  RangedFieldTypes,\n  ResultRecord,\n} from '@dynatrace-sdk/client-query';\nimport {\n  units,\n  type ConvertibleUnit,\n  type FormatOptions,\n  type Unit,\n} from '@dynatrace-sdk/units';\n\nimport type { DataTableColumnDef } from '../DataTable/public.api.js';\n\nfunction extractColumnTypes(\n  rangedFieldTypes: RangedFieldTypes[],\n): Map<string, Set<FieldType['type']>> {\n  const columnTypes = new Map<string, Set<FieldType['type']>>();\n  for (const { mappings } of rangedFieldTypes) {\n    for (const key in mappings) {\n      const type = mappings[key]?.type ?? 'string';\n      if (columnTypes.has(key)) {\n        columnTypes.get(key)?.add(type);\n      } else {\n        columnTypes.set(key, new Set([type]));\n      }\n    }\n  }\n  return columnTypes;\n}\n\n/**\n * Mapping from a Grail type to a built-in column type of the DataTable\n */\nconst FieldTypeTypeToColumnType = new Map<\n  FieldType['type'],\n  'datetime' | 'number' | 'long' | undefined\n>([\n  ['timestamp', 'datetime'],\n  ['long', 'long'],\n  ['double', 'number'],\n  ['duration', 'number'],\n]);\n\n/**\n * Mapping from a Grail type to a built-in predefined formatter.\n */\nconst FieldTypeTypeToFormatter = new Map<\n  FieldType['type'],\n  FormatOptions<Unit, ConvertibleUnit>\n>([\n  [\n    'duration',\n    {\n      input: units.time.nanosecond,\n      cascade: 3,\n    },\n  ],\n]);\n\nfunction isTimeFrameEntry(value: unknown): value is { start: Date; end: Date } {\n  return (\n    value !== undefined &&\n    value !== null &&\n    (value as { start: unknown }).start !== undefined &&\n    (value as { start: unknown }).start !== null &&\n    (value as { start: unknown }).start instanceof Date &&\n    (value as { end: unknown }).end !== undefined &&\n    (value as { end: unknown }).end !== null &&\n    (value as { end: unknown }).end instanceof Date\n  );\n}\n\nfunction isTimeGeoPointEntry(\n  value: unknown,\n): value is { latitude: number; longitude: number } {\n  return (\n    value !== undefined &&\n    value !== null &&\n    (value as { latitude: unknown }).latitude !== undefined &&\n    (value as { latitude: unknown }).latitude !== null &&\n    typeof (value as { latitude: unknown }).latitude === 'number' &&\n    (value as { longitude: unknown }).longitude !== undefined &&\n    (value as { longitude: unknown }).longitude !== null &&\n    typeof (value as { longitude: unknown }).longitude === 'number'\n  );\n}\n\nfunction getTimeframeColumn(\n  columnKey: string,\n): DataTableColumnDef<ResultRecord | null> {\n  // For timeframes, we can split it into two columns for start and end.\n  return {\n    header: columnKey,\n    id: columnKey,\n    columns: [\n      {\n        header: 'start',\n        id: `${columnKey}.start`,\n        accessor: (row) => {\n          if (isTimeFrameEntry(row?.[columnKey])) {\n            return row[columnKey].start;\n          }\n          return '';\n        },\n        columnType: 'datetime',\n        width: 'content',\n      },\n      {\n        header: 'end',\n        id: `${columnKey}.end`,\n        accessor: (row) => {\n          if (isTimeFrameEntry(row?.[columnKey])) {\n            return row[columnKey].end;\n          }\n          return '';\n        },\n        columnType: 'datetime',\n        width: 'content',\n      },\n    ],\n  };\n}\n\nfunction getGeoPointColumn(\n  columnKey: string,\n): DataTableColumnDef<ResultRecord | null> {\n  // For geopoints, we can split it into two columns for longitude and latitude.\n  return {\n    header: columnKey,\n    id: columnKey,\n    columns: [\n      {\n        header: 'longitude',\n        id: `${columnKey}.longitude`,\n        accessor: (row) => {\n          if (isTimeGeoPointEntry(row?.[columnKey])) {\n            return row[columnKey].longitude;\n          }\n          return '';\n        },\n        columnType: 'text',\n        width: 'content',\n      },\n      {\n        header: 'latitude',\n        id: `${columnKey}.latitude`,\n        accessor: (row) => {\n          if (isTimeGeoPointEntry(row?.[columnKey])) {\n            return row[columnKey].latitude;\n          }\n          return '';\n        },\n        columnType: 'text',\n        width: 'content',\n      },\n    ],\n  };\n}\n\n/**\n * @public\n */\nexport function convertToColumns(\n  rangedFieldTypes: RangedFieldTypes[],\n): DataTableColumnDef<ResultRecord | null>[] {\n  const extractedTypes = extractColumnTypes(rangedFieldTypes);\n  const columns: DataTableColumnDef<ResultRecord | null>[] = [];\n\n  for (const [columnKey, columnTypes] of extractedTypes.entries()) {\n    const columnHasOnlyOneType = columnTypes.size === 1;\n    const columnType = columnHasOnlyOneType\n      ? Array.from(columnTypes)[0]\n      : 'string'; // ambiguous definition, fall back to text\n\n    if (columnType === 'timeframe') {\n      columns.push(getTimeframeColumn(columnKey));\n    } else if (columnType === 'geo_point') {\n      columns.push(getGeoPointColumn(columnKey));\n    } else {\n      columns.push({\n        header: columnKey,\n        id: columnKey,\n        accessor: (row) => row?.[columnKey],\n        width: 'content',\n        columnType: FieldTypeTypeToColumnType.get(columnType) ?? 'text',\n        formatter: FieldTypeTypeToFormatter.get(columnType) ?? undefined,\n      } as DataTableColumnDef<ResultRecord | null>);\n    }\n  }\n  return columns;\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/tables/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/tables/index.ts"],
-  "sourcesContent": ["export { useFilteredData } from './hooks/useFilteredData.js';\nexport { useLockedRowOrder } from './hooks/useLockedRowOrder.js';\n\n//#region SimpleTable\nexport { SimpleTable } from './SimpleTable/SimpleTable.js';\nexport type {\n  SimpleTableRowData,\n  SimpleTableCustomCell,\n  SimpleTableColumnDefBase,\n  SimpleTableDisplayColumnDef,\n  SimpleTableGroupColumnDef,\n  SimpleTableColumnDef,\n  SimpleTableBaseProps,\n  SimpleTableProps,\n} from './SimpleTable/public.api.js';\n//#endregion\n\n//#region convertToColumns\nexport { convertToColumns } from './convert-to-columns/convert-to-columns.js';\n//#endregion\n\n//#region DataTable\nexport { DataTable } from './DataTable/DataTable.js';\nexport {\n  DataTableActionsMenu as TableActionsMenu,\n  type DataTableActionsMenuCopyItemProps as TableActionsMenuCopyItemProps,\n  HideColumnAction as _HideColumnAction,\n  ColumnOrderAction as _ColumnOrderAction,\n} from './DataTable/features/UserActions/UserActionsMenu.js';\nexport type { DataTableCustomCell } from './DataTable/public.api.js';\nexport { DataTableDefaultCell } from './DataTable/components/DataTableDefaultCell.js';\nexport type { DataTableTableActionsProps } from './DataTable/components/TableActions/DataTableTableActions.js';\nexport type { DataTableSelectedRowsActionsProps } from './DataTable/components/TableActions/DataTableSelectedRowsActions.js';\nexport type { DataTableSelectionChipProps } from './DataTable/components/TableActions/DataTableSelectionChip.js';\nexport type {\n  DataTableProps,\n  DataTableBaseProps,\n  DataTableColumnSettingsConfig,\n  DataTableRef,\n  DataTableConfig,\n  DataTableColumnDef,\n  DataTableRowData,\n  DataTableColumnDefBase,\n  DataTableDisplayColumnDef,\n  DataTableGroupColumnDef,\n  DataTableCustomHeader,\n  DataTableDefaultHeader,\n} from './DataTable/public.api.js';\nexport type { DataTableAlignmentColumnDef } from './DataTable/features/ColumnAlignment.js';\nexport type {\n  DataTableSortingColumnDef,\n  DataTableSortingBaseProps,\n  DataTableSortingControlledProps,\n  DataTableSortingUncontrolledProps,\n} from './DataTable/features/Sorting/sorting-types.js';\nexport type {\n  DataTableSortingProps,\n  DataTableCustomSortingFn,\n  DataTableColumnSort,\n} from './DataTable/features/Sorting/sorting-types.js';\nexport type { DataTableThresholdColumnDef } from './DataTable/features/Thresholds/threshold-types.js';\nexport type {\n  DataTableColumnTypesColumnDef,\n  DataTableColumnType,\n  DataTableMeterbarColumnConfig,\n  DataTableSparklineColumnConfig,\n  DataTableGanttColumnConfig,\n  DataTableMarkdownColumnConfig,\n  DataTableLogContentColumnConfig,\n  DataTableTextColumnConfig,\n} from './DataTable/features/ColumnTypes/column-types-types.js';\nexport type {\n  DataTableCellFormatterColumnDef,\n  DataTableCellFormatter,\n  FormatterCurrencyOptions as DataTableCellFormatterCurrencyOptions,\n} from './DataTable/features/CellFormatter/cell-formatter-types.js';\nexport type {\n  DataTableLineWrapProps,\n  DataTableLineWrapState,\n  DataTableLineWrapControlledProps,\n  DataTableLineWrapUncontrolledProps,\n  DataTableLineWrapBaseProps,\n} from './DataTable/features/LineWrap/line-wrap-types.js';\nexport { DataTableGlobalLineWrapAction } from './DataTable/features/LineWrap/LineWrap.js';\nexport type {\n  DataTableColumnFontStyleProps,\n  DataTableColumnFontStyleState,\n  DataTableColumnFontStyleBaseProps,\n  DataTableColumnFontStyleControlledProps,\n  DataTableColumnFontStyleUncontrolledProps,\n} from './DataTable/features/ColumnFontStyle/column-font-style-types.js';\nexport type { DataTableVisualVariantProps } from './DataTable/features/VisualVariants/visual-variants-types.js';\nexport type { DataTableThresholdProps } from './DataTable/features/Thresholds/threshold-types.js';\nexport type { DataTableLoadingStateProps } from './DataTable/features/LoadingState/loading-state-types.js';\nexport type { DataTableDefaultCellProps } from './DataTable/components/DataTableDefaultCell.js';\nexport type {\n  DataTableColumnActions,\n  DataTableColumnActionsProps,\n} from './DataTable/features/UserActions/ColumnActions.js';\nexport { DataTableCellActions } from './DataTable/features/UserActions/CellActions.js';\nexport type {\n  DataTableCellActionsProps,\n  DataTableCellActionsContent,\n} from './DataTable/features/UserActions/user-actions-types.js';\nexport type {\n  DataTableRowActions,\n  DataTableRowActionsProps,\n} from './DataTable/features/UserActions/RowActions.js';\nexport type {\n  DataTablePaginationProps,\n  DataTablePaginationBaseProps,\n  DataTablePaginationPageIndexUncontrolledProps,\n  DataTablePaginationPageIndexControlledProps,\n  DataTablePaginationPageSizeUncontrolledProps,\n  DataTablePaginationPageSizeControlledProps,\n  DataTablePaginationClientSideProps,\n  DataTablePaginationServerSideProps,\n} from './DataTable/features/Pagination/pagination-types.js';\n\nexport { DataTablePagination } from './DataTable/features/Pagination/Pagination.js';\nexport type {\n  DataTableColumnSizingProps,\n  DataTableColumnSizingState,\n  DataTableColumnSizingBaseProps,\n  DataTableColumnSizingControlledProps,\n  DataTableColumnSizingUncontrolledProps,\n} from './DataTable/features/ColumnSizing/column-sizing-types.js';\nexport type {\n  DataTableThresholdRule,\n  DataTableRowThreshold,\n  DataTableColumnThreshold,\n  DataTableSingleColumnThreshold,\n  DataTableCombinedColumnThresholds,\n  DataTableSingleRowThreshold,\n  DataTableCombinedRowThresholds,\n} from './DataTable/features/Thresholds/threshold-types.js';\nexport type { DataTableDevTools } from './DataTable/features/DevTools.js';\nexport type {\n  DataTableColumnVisibilityProps,\n  DataTableColumnVisibilityState,\n  DataTableVisibilityColumnDef,\n  DataTableColumnVisibilityControlledProps,\n  DataTableColumnVisibilityUncontrolledProps,\n  DataTableColumnVisibilityBaseProps,\n} from './DataTable/features/ColumnVisibility/column-visibility-types.js';\nexport type {\n  DataTableColumnOrderProps,\n  DataTableColumnOrderBaseProps,\n  DataTableColumnOrderControlledProps,\n  DataTableColumnOrderUncontrolledProps,\n} from './DataTable/features/ColumnOrder/column-order-types.js';\nexport type {\n  DataTableRowSelectionProps,\n  DataTableRowSelectionBaseProps,\n  DataTableRowSelectionControlledProps,\n  DataTableRowSelectionUncontrolledProps,\n} from './DataTable/features/RowSelection/row-selection-types.js';\nexport type {\n  DataTableSubRowsProps,\n  DataTableSubRowsUncontrolledProps,\n  DataTableSubRowsControlledProps,\n  DataTableSubRowsBaseProps,\n} from './DataTable/features/SubRows/sub-rows-types.js';\nexport type {\n  DataTableRowInteractivityProps,\n  DataTableRowInteractivityBaseProps,\n  DataTableRowInteractivityUncontrolledProps,\n  DataTableRowInteractivityControlledProps,\n  DataTableRowActivationEvent,\n} from './DataTable/features/RowInteractivity/row-interactivity-types.js';\nexport type {\n  DataTableColumnOrderSettings,\n  DataTableColumnOrderSettingsProps,\n} from './DataTable/components/Toolbar/ColumnSettings/DataTableColumnOrderSettings.js';\nexport { DataTableColumnPinningSettings } from './DataTable/components/Toolbar/ColumnSettings/DataTableColumnPinningSettings.js';\nexport type {\n  DataTableColumnSettingsTriggerProps,\n  DataTableColumnPinningSettingsProps,\n} from './DataTable/components/Toolbar/ColumnSettings/column-settings-types.js';\nexport type {\n  DataTableRowOrderProps,\n  DataTableRowOrderBaseProps,\n  DataTableRowOrderControlledProps,\n  DataTableRowOrderUncontrolledProps,\n} from './DataTable/features/RowOrder/row-order-types.js';\nexport type {\n  DataTableColumnPinningProps,\n  DataTableColumnPinningBaseProps,\n  DataTableColumnPinningControlledProps,\n  DataTableColumnPinningUncontrolledProps,\n  DataTablePinnedColumnState,\n} from './DataTable/features/ColumnPinning/column-pinning-types.js';\nexport type { DataTableColumnVisibilitySettingsProps } from './DataTable/components/Toolbar/ColumnSettings/column-settings-types.js';\nexport {\n  type DataTableDownloadProps,\n  type DataTableDownloadSlotProps,\n} from './DataTable/features/Download/download-types.js';\nexport { DataTableDownload } from './DataTable/features/Download/Download.js';\nexport { DataTableConfigProvider } from './hooks/useDataTableConfig.js';\nexport { DATA_TABLE_ROW_ID_SEPARATOR } from './DataTable/features/RowIdentification/RowIdentification.js';\nexport { type DataTableRowIdentification } from './DataTable/features/RowIdentification/row-identification-types.js';\nexport {\n  type DataTableExpandableRowWrapperProps,\n  type DataTableExpandableRowProps,\n  type DataTableExpandableRowBaseProps,\n  type DataTableExpandableRowControlledProps,\n  type DataTableExpandableRowUncontrolledProps,\n} from './DataTable/features/RowDetails/row-details-types.js';\nexport {\n  DataTableExpandableRowTemplate,\n  DataTableExpandableRowWrapper,\n} from '../tables/DataTable/features/RowDetails/RowDetails.js';\nexport {\n  DataTableToolbar,\n  type DataTableToolbarProps,\n} from './DataTable/components/Toolbar/DataTableToolbar.js';\nexport {\n  isDataTableGroupColumnDef,\n  isDataTableDisplayColumnDef,\n} from './DataTable/hooks/useColumns.js';\n//#endregion\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;AAGlC,SAAS,mBAAmB;AAc5B,SAAS,wBAAwB;AAIjC,SAAS,iBAAiB;AAC1B;AAAA,EAC0B;AAAA,EAEJ;AAAA,EACC;AAAA,OAChB;AAEP,SAAS,4BAA4B;AAqDrC,SAAS,qCAAqC;AAgB9C,SAAS,4BAA4B;AAoBrC,SAAS,2BAA2B;AAuDpC,SAAS,sCAAsC;AAuB/C,SAAS,yBAAyB;AAClC,SAAS,+BAA+B;AACxC,SAAS,mCAAmC;AAS5C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;",
+  "sourcesContent": ["export { useFilteredData } from './hooks/useFilteredData.js';\nexport { useLockedRowOrder } from './hooks/useLockedRowOrder.js';\n\n//#region SimpleTable\nexport { SimpleTable } from './SimpleTable/SimpleTable.js';\nexport type {\n  SimpleTableRowData,\n  SimpleTableCustomCell,\n  SimpleTableColumnDefBase,\n  SimpleTableDisplayColumnDef,\n  SimpleTableGroupColumnDef,\n  SimpleTableColumnDef,\n  SimpleTableBaseProps,\n  SimpleTableProps,\n} from './SimpleTable/public.api.js';\n//#endregion\n\n//#region convertToColumns\nexport { convertToColumns } from './convert-to-columns/convert-to-columns.js';\n//#endregion\n\n//#region DataTable\nexport { DataTable } from './DataTable/DataTable.js';\nexport {\n  DataTableActionsMenu as TableActionsMenu,\n  type DataTableActionsMenuCopyItemProps as TableActionsMenuCopyItemProps,\n  HideColumnAction as _HideColumnAction,\n  ColumnOrderAction as _ColumnOrderAction,\n} from './DataTable/features/UserActions/UserActionsMenu.js';\nexport type { DataTableCustomCell } from './DataTable/public.api.js';\nexport { DataTableDefaultCell } from './DataTable/components/DataTableDefaultCell.js';\nexport type { DataTableTableActionsProps } from './DataTable/components/TableActions/DataTableTableActions.js';\nexport type { DataTableSelectedRowsActionsProps } from './DataTable/components/TableActions/DataTableSelectedRowsActions.js';\nexport type { DataTableSelectionChipProps } from './DataTable/components/TableActions/DataTableSelectionChip.js';\nexport type {\n  DataTableProps,\n  DataTableBaseProps,\n  DataTableColumnSettingsConfig,\n  DataTableRef,\n  DataTableConfig,\n  DataTableColumnDef,\n  DataTableRowData,\n  DataTableColumnDefBase,\n  DataTableDisplayColumnDef,\n  DataTableGroupColumnDef,\n  DataTableCustomHeader,\n  DataTableDefaultHeader,\n} from './DataTable/public.api.js';\nexport type { DataTableAlignmentColumnDef } from './DataTable/features/ColumnAlignment.js';\nexport type {\n  DataTableSortingColumnDef,\n  DataTableSortingBaseProps,\n  DataTableSortingControlledProps,\n  DataTableSortingUncontrolledProps,\n} from './DataTable/features/Sorting/sorting-types.js';\nexport type {\n  DataTableSortingProps,\n  DataTableCustomSortingFn,\n  DataTableColumnSort,\n} from './DataTable/features/Sorting/sorting-types.js';\nexport type { DataTableThresholdColumnDef } from './DataTable/features/Thresholds/threshold-types.js';\nexport type {\n  DataTableColumnTypesColumnDef,\n  DataTableColumnType,\n  DataTableMeterbarColumnConfig,\n  DataTableSparklineColumnConfig,\n  DataTableGanttColumnConfig,\n  DataTableMarkdownColumnConfig,\n  DataTableLogContentColumnConfig,\n  DataTableTextColumnConfig,\n  DataTableSparklineXAxisProps,\n} from './DataTable/features/ColumnTypes/column-types-types.js';\nexport type {\n  DataTableCellFormatterColumnDef,\n  DataTableCellFormatter,\n  DataTableDatetimeDisplayMode,\n  FormatterCurrencyOptions as DataTableCellFormatterCurrencyOptions,\n} from './DataTable/features/CellFormatter/cell-formatter-types.js';\nexport type {\n  DataTableLineWrapProps,\n  DataTableLineWrapState,\n  DataTableLineWrapControlledProps,\n  DataTableLineWrapUncontrolledProps,\n  DataTableLineWrapBaseProps,\n} from './DataTable/features/LineWrap/line-wrap-types.js';\nexport { DataTableGlobalLineWrapAction } from './DataTable/features/LineWrap/LineWrap.js';\nexport type {\n  DataTableColumnFontStyleProps,\n  DataTableColumnFontStyleState,\n  DataTableColumnFontStyleBaseProps,\n  DataTableColumnFontStyleControlledProps,\n  DataTableColumnFontStyleUncontrolledProps,\n} from './DataTable/features/ColumnFontStyle/column-font-style-types.js';\nexport type { DataTableVisualVariantProps } from './DataTable/features/VisualVariants/visual-variants-types.js';\nexport type { DataTableThresholdProps } from './DataTable/features/Thresholds/threshold-types.js';\nexport type { DataTableLoadingStateProps } from './DataTable/features/LoadingState/loading-state-types.js';\nexport type { DataTableDefaultCellProps } from './DataTable/components/DataTableDefaultCell.js';\nexport type {\n  DataTableColumnActions,\n  DataTableColumnActionsProps,\n} from './DataTable/features/UserActions/ColumnActions.js';\nexport { DataTableCellActions } from './DataTable/features/UserActions/CellActions.js';\nexport type {\n  DataTableCellActionsProps,\n  DataTableCellActionsContent,\n} from './DataTable/features/UserActions/user-actions-types.js';\nexport type {\n  DataTableRowActions,\n  DataTableRowActionsProps,\n} from './DataTable/features/UserActions/RowActions.js';\nexport type {\n  DataTablePaginationProps,\n  DataTablePaginationBaseProps,\n  DataTablePaginationPageIndexUncontrolledProps,\n  DataTablePaginationPageIndexControlledProps,\n  DataTablePaginationPageSizeUncontrolledProps,\n  DataTablePaginationPageSizeControlledProps,\n  DataTablePaginationClientSideProps,\n  DataTablePaginationServerSideProps,\n} from './DataTable/features/Pagination/pagination-types.js';\n\nexport { DataTablePagination } from './DataTable/features/Pagination/Pagination.js';\nexport type {\n  DataTableColumnSizingProps,\n  DataTableColumnSizingState,\n  DataTableColumnSizingBaseProps,\n  DataTableColumnSizingControlledProps,\n  DataTableColumnSizingUncontrolledProps,\n} from './DataTable/features/ColumnSizing/column-sizing-types.js';\nexport type {\n  DataTableThresholdRule,\n  DataTableRowThreshold,\n  DataTableColumnThreshold,\n  DataTableSingleColumnThreshold,\n  DataTableCombinedColumnThresholds,\n  DataTableSingleRowThreshold,\n  DataTableCombinedRowThresholds,\n} from './DataTable/features/Thresholds/threshold-types.js';\nexport type { DataTableDevTools } from './DataTable/features/DevTools.js';\nexport type {\n  DataTableColumnVisibilityProps,\n  DataTableColumnVisibilityState,\n  DataTableVisibilityColumnDef,\n  DataTableColumnVisibilityControlledProps,\n  DataTableColumnVisibilityUncontrolledProps,\n  DataTableColumnVisibilityBaseProps,\n} from './DataTable/features/ColumnVisibility/column-visibility-types.js';\nexport type {\n  DataTableColumnOrderProps,\n  DataTableColumnOrderBaseProps,\n  DataTableColumnOrderControlledProps,\n  DataTableColumnOrderUncontrolledProps,\n} from './DataTable/features/ColumnOrder/column-order-types.js';\nexport type {\n  DataTableRowSelectionProps,\n  DataTableRowSelectionBaseProps,\n  DataTableRowSelectionControlledProps,\n  DataTableRowSelectionUncontrolledProps,\n} from './DataTable/features/RowSelection/row-selection-types.js';\nexport type {\n  DataTableSubRowsProps,\n  DataTableSubRowsUncontrolledProps,\n  DataTableSubRowsControlledProps,\n  DataTableSubRowsBaseProps,\n} from './DataTable/features/SubRows/sub-rows-types.js';\nexport type {\n  DataTableRowInteractivityProps,\n  DataTableRowInteractivityBaseProps,\n  DataTableRowInteractivityUncontrolledProps,\n  DataTableRowInteractivityControlledProps,\n  DataTableRowActivationEvent,\n} from './DataTable/features/RowInteractivity/row-interactivity-types.js';\nexport type {\n  DataTableColumnOrderSettings,\n  DataTableColumnOrderSettingsProps,\n} from './DataTable/components/Toolbar/ColumnSettings/DataTableColumnOrderSettings.js';\nexport { DataTableColumnPinningSettings } from './DataTable/components/Toolbar/ColumnSettings/DataTableColumnPinningSettings.js';\nexport type {\n  DataTableColumnSettingsTriggerProps,\n  DataTableColumnPinningSettingsProps,\n} from './DataTable/components/Toolbar/ColumnSettings/column-settings-types.js';\nexport type {\n  DataTableRowOrderProps,\n  DataTableRowOrderBaseProps,\n  DataTableRowOrderControlledProps,\n  DataTableRowOrderUncontrolledProps,\n} from './DataTable/features/RowOrder/row-order-types.js';\nexport type {\n  DataTableColumnPinningProps,\n  DataTableColumnPinningBaseProps,\n  DataTableColumnPinningControlledProps,\n  DataTableColumnPinningUncontrolledProps,\n  DataTablePinnedColumnState,\n} from './DataTable/features/ColumnPinning/column-pinning-types.js';\nexport type { DataTableColumnVisibilitySettingsProps } from './DataTable/components/Toolbar/ColumnSettings/column-settings-types.js';\n// DEPRECATION: [APPDEV-16236] BREAKING-CHANGE: Remove deprecated onDownloadData and DataTableDownloadProps.\nexport type {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  DataTableDownloadProps,\n  DataTableDownloadSlotProps,\n} from './DataTable/features/Download/download-types.js';\nexport { DataTableDownload } from './DataTable/features/Download/Download.js';\nexport { DataTableConfigProvider } from './hooks/useDataTableConfig.js';\nexport { DATA_TABLE_ROW_ID_SEPARATOR } from './DataTable/features/RowIdentification/RowIdentification.js';\nexport type { DataTableRowIdentification } from './DataTable/features/RowIdentification/row-identification-types.js';\nexport type {\n  DataTableExpandableRowWrapperProps,\n  DataTableExpandableRowProps,\n  DataTableExpandableRowBaseProps,\n  DataTableExpandableRowControlledProps,\n  DataTableExpandableRowUncontrolledProps,\n} from './DataTable/features/RowDetails/row-details-types.js';\nexport {\n  DataTableExpandableRowTemplate,\n  DataTableExpandableRowWrapper,\n} from '../tables/DataTable/features/RowDetails/RowDetails.js';\nexport {\n  DataTableToolbar,\n  type DataTableToolbarProps,\n} from './DataTable/components/Toolbar/DataTableToolbar.js';\nexport {\n  isDataTableGroupColumnDef,\n  isDataTableDisplayColumnDef,\n} from './DataTable/hooks/useColumns.js';\n//#endregion\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;AAGlC,SAAS,mBAAmB;AAc5B,SAAS,wBAAwB;AAIjC,SAAS,iBAAiB;AAC1B;AAAA,EAC0B;AAAA,EAEJ;AAAA,EACC;AAAA,OAChB;AAEP,SAAS,4BAA4B;AAuDrC,SAAS,qCAAqC;AAgB9C,SAAS,4BAA4B;AAoBrC,SAAS,2BAA2B;AAuDpC,SAAS,sCAAsC;AAyB/C,SAAS,yBAAyB;AAClC,SAAS,+BAA+B;AACxC,SAAS,mCAAmC;AAS5C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;",
   "names": []
 }

package/esm/typography/block-quote/Blockquote.css

@@ -1,11 +1,11 @@
-._1knl9z60-3-0-1 {
+._1knl9z60-3-1-0 {
   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-0-1:before {
+._1knl9z60-3-1-0:before {
   content: "";
   position: absolute;
   top: 0;

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

@@ -2,29 +2,37 @@ import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { forwardRef } from "react";
 import { blockquoteCSS } from "./Blockquote.sty.js";
+import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
+import { useSafeForwardProps } from "../../core/hooks/useSafeForwardProps.js";
 const COMPONENT_NAME = "Blockquote";
 const Blockquote = /* @__PURE__ */ forwardRef((props, ref) => {
   const {
     children,
     cite,
+    className: consumerClassName,
+    style: consumerStyle,
     "data-testid": dataTestId,
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow,
-    className: consumerClassName,
-    style: consumerStyle,
     ...remainingProps
   } = props;
+  const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
+  const ariaLabelingProps = useAriaLabelingProps(restProps);
+  const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);
   return /* @__PURE__ */ jsx(
     "blockquote",
     {
       cite,
       ref,
+      className: clsx(blockquoteCSS, consumerClassName),
+      style: consumerStyle,
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
-      className: clsx(blockquoteCSS, consumerClassName),
-      style: consumerStyle,
-      ...remainingProps,
+      ...ariaLabelingProps,
+      ...behavioralTrackingProps,
+      ...forwardProps,
       "data-dt-component": COMPONENT_NAME,
       children
     }

package/esm/typography/block-quote/Blockquote.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/block-quote/Blockquote.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { blockquoteCSS } from './Blockquote.sty.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\n\nconst COMPONENT_NAME = 'Blockquote';\n\n/**\n * The props for the Blockquote component.\n * @public\n */\nexport interface BlockquoteProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /**\n   * A URL that designates a source document or message for the information quoted.\n   * This attribute is intended to point to information explaining the context for the quoted content.\n   */\n  cite?: string;\n}\n\n/**\n * The `Blockquote` component wraps longer text blocks and indicates that the passage is quoted from another source.\n * @public\n */\nexport const Blockquote = /* @__PURE__ */ forwardRef<\n  HTMLQuoteElement,\n  BlockquoteProps\n>((props, ref) => {\n  const {\n    children,\n    cite,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  } = props;\n\n  return (\n    <blockquote\n      cite={cite}\n      ref={ref}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      className={clsx(blockquoteCSS, consumerClassName)}\n      style={consumerStyle}\n      {...remainingProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      {children}\n    </blockquote>\n  );\n});\n\n(Blockquote as typeof Blockquote & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "AA+CI;AA/CJ,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,SAAS,qBAAqB;AAM9B,MAAM,iBAAiB;AAsBhB,MAAM,aAA6B,2BAGxC,CAAC,OAAO,QAAQ;AAChB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,WAAW,KAAK,eAAe,iBAAiB;AAAA,MAChD,OAAO;AAAA,MACN,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAElB;AAAA;AAAA,EACH;AAEJ,CAAC;AAEA,WAA2D,cAC1D;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { blockquoteCSS } from './Blockquote.sty.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\n\nconst COMPONENT_NAME = 'Blockquote';\n\n/**\n * The props for the Blockquote component.\n * @public\n */\nexport interface BlockquoteProps\n  extends WithChildren,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /**\n   * A URL that designates a source document or message for the information quoted.\n   * This attribute is intended to point to information explaining the context for the quoted content.\n   */\n  cite?: string;\n}\n\n/**\n * The `Blockquote` component wraps longer text blocks and indicates that the passage is quoted from another source.\n * @public\n */\nexport const Blockquote = /* @__PURE__ */ forwardRef<\n  HTMLQuoteElement,\n  BlockquoteProps\n>((props, ref) => {\n  const {\n    children,\n    cite,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  } = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n  const ariaLabelingProps = useAriaLabelingProps(restProps);\n  const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n  return (\n    <blockquote\n      cite={cite}\n      ref={ref}\n      className={clsx(blockquoteCSS, consumerClassName)}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      {...ariaLabelingProps}\n      {...behavioralTrackingProps}\n      {...forwardProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      {children}\n    </blockquote>\n  );\n});\n\n(Blockquote as typeof Blockquote & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "AA2DI;AA3DJ,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,SAAS,qBAAqB;AAC9B,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,2BAA2B;AAQpC,MAAM,iBAAiB;AAwBhB,MAAM,aAA6B,2BAGxC,CAAC,OAAO,QAAQ;AAChB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,QAAM,oBAAoB,qBAAqB,SAAS;AACxD,QAAM,eAAe,oBAAoB,WAAW,iBAAiB;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW,KAAK,eAAe,iBAAiB;AAAA,MAChD,OAAO;AAAA,MACP,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MACjB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAElB;AAAA;AAAA,EACH;AAEJ,CAAC;AAEA,WAA2D,cAC1D;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
 import "./Blockquote.css";
-var blockquoteCSS = "_1knl9z60-3-0-1";
+var blockquoteCSS = "_1knl9z60-3-1-0";
 export {
   blockquoteCSS
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/block-quote/Blockquote.css.ts"],
-  "sourcesContent": ["import './Blockquote.css';\nexport var blockquoteCSS = '_1knl9z60-3-0-1';"],
+  "sourcesContent": ["import './Blockquote.css';\nexport var blockquoteCSS = '_1knl9z60-3-1-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;",
   "names": []
 }

package/esm/typography/code/Code.css

@@ -1,4 +1,4 @@
-._1v51izp0-3-0-1 {
+._1v51izp0-3-1-0 {
   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/esm/typography/code/Code.js

@@ -2,28 +2,36 @@ import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { forwardRef } from "react";
 import { codeCSS } from "./Code.sty.js";
+import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
+import { useSafeForwardProps } from "../../core/hooks/useSafeForwardProps.js";
 const COMPONENT_NAME = "Code";
 const Code = /* @__PURE__ */ forwardRef(
   (props, ref) => {
     const {
       children,
+      className: consumerClassName,
+      style: consumerStyle,
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
-      className: consumerClassName,
-      style: consumerStyle,
       ...remainingProps
     } = props;
+    const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
+    const ariaLabelingProps = useAriaLabelingProps(restProps);
+    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);
     return /* @__PURE__ */ jsx(
       "code",
       {
         ref,
+        className: clsx(codeCSS, consumerClassName),
+        style: consumerStyle,
         "data-testid": dataTestId,
         "data-dtrum-mask": dataDtrumMask,
         "data-dtrum-allow": dataDtrumAllow,
-        className: clsx(codeCSS, consumerClassName),
-        style: consumerStyle,
-        ...remainingProps,
+        ...ariaLabelingProps,
+        ...behavioralTrackingProps,
+        ...forwardProps,
         "data-dt-component": COMPONENT_NAME,
         children
       }

package/esm/typography/code/Code.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/code/Code.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { codeCSS } from './Code.sty.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\n\nconst COMPONENT_NAME = 'Code';\n\n/**\n * The props for the Code component.\n * @public\n */\nexport interface CodeProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps {}\n\n/**\n * Use the `Code` component to display snippets of code inline. If you want to\n * display a block of code, use the\n * {@link https://developer.dynatrace.com/design/components-preview/content/CodeSnippet/ | `CodeSnippet`}\n * component instead.\n * @public\n */\nexport const Code = /* @__PURE__ */ forwardRef<HTMLElement, CodeProps>(\n  (props, ref) => {\n    const {\n      children,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      className: consumerClassName,\n      style: consumerStyle,\n      ...remainingProps\n    } = props;\n    return (\n      <code\n        ref={ref}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        className={clsx(codeCSS, consumerClassName)}\n        style={consumerStyle}\n        {...remainingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        {children}\n      </code>\n    );\n  },\n);\n\n(Code as typeof Code & { displayName: string }).displayName = COMPONENT_NAME;\n"],
-  "mappings": "AAwCM;AAxCN,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,SAAS,eAAe;AAMxB,MAAM,iBAAiB;AAmBhB,MAAM,OAAuB;AAAA,EAClC,CAAC,OAAO,QAAQ;AACd,UAAM;AAAA,MACJ;AAAA,MACA,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,WAAW;AAAA,MACX,OAAO;AAAA,MACP,GAAG;AAAA,IACL,IAAI;AACJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,WAAW,KAAK,SAAS,iBAAiB;AAAA,QAC1C,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAElB;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { codeCSS } from './Code.sty.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\n\nconst COMPONENT_NAME = 'Code';\n\n/**\n * The props for the Code component.\n * @public\n */\nexport interface CodeProps\n  extends WithChildren,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {}\n\n/**\n * Use the `Code` component to display snippets of code inline. If you want to\n * display a block of code, use the\n * {@link https://developer.dynatrace.com/design/components/content/CodeSnippet/ | `CodeSnippet`}\n * component instead.\n * @public\n */\nexport const Code = /* @__PURE__ */ forwardRef<HTMLElement, CodeProps>(\n  (props, ref) => {\n    const {\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n    return (\n      <code\n        ref={ref}\n        className={clsx(codeCSS, consumerClassName)}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        {...ariaLabelingProps}\n        {...behavioralTrackingProps}\n        {...forwardProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        {children}\n      </code>\n    );\n  },\n);\n\n(Code as typeof Code & { displayName: string }).displayName = COMPONENT_NAME;\n"],
+  "mappings": "AAqDM;AArDN,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,SAAS,eAAe;AACxB,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,2BAA2B;AAQpC,MAAM,iBAAiB;AAqBhB,MAAM,OAAuB;AAAA,EAClC,CAAC,OAAO,QAAQ;AACd,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,UAAM,oBAAoB,qBAAqB,SAAS;AACxD,UAAM,eAAe,oBAAoB,WAAW,iBAAiB;AAErE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,SAAS,iBAAiB;AAAA,QAC1C,OAAO;AAAA,QACP,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QACjB,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAElB;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
   "names": []
 }

package/esm/typography/code/Code.sty.js

@@ -1,5 +1,5 @@
 import "./Code.css";
-var codeCSS = "_1v51izp0-3-0-1";
+var codeCSS = "_1v51izp0-3-1-0";
 export {
   codeCSS
 };

package/esm/typography/code/Code.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/code/Code.css.ts"],
-  "sourcesContent": ["import './Code.css';\nexport var codeCSS = '_1v51izp0-3-0-1';"],
+  "sourcesContent": ["import './Code.css';\nexport var codeCSS = '_1v51izp0-3-1-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

package/esm/typography/emphasis/Emphasis.css

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

package/esm/typography/emphasis/Emphasis.js

@@ -2,28 +2,36 @@ import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { forwardRef } from "react";
 import { emphasisCSS } from "./Emphasis.sty.js";
+import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
+import { useSafeForwardProps } from "../../core/hooks/useSafeForwardProps.js";
 const COMPONENT_NAME = "Emphasis";
 const Emphasis = /* @__PURE__ */ forwardRef(
   (props, ref) => {
     const {
       children,
+      className: consumerClassName,
+      style: consumerStyle,
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
-      className: consumerClassName,
-      style: consumerStyle,
       ...remainingProps
     } = props;
+    const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
+    const ariaLabelingProps = useAriaLabelingProps(restProps);
+    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);
     return /* @__PURE__ */ jsx(
       "em",
       {
         ref,
+        className: clsx(emphasisCSS, consumerClassName),
+        style: consumerStyle,
         "data-testid": dataTestId,
         "data-dtrum-mask": dataDtrumMask,
         "data-dtrum-allow": dataDtrumAllow,
-        className: clsx(emphasisCSS, consumerClassName),
-        style: consumerStyle,
-        ...remainingProps,
+        ...ariaLabelingProps,
+        ...behavioralTrackingProps,
+        ...forwardProps,
         "data-dt-component": COMPONENT_NAME,
         children
       }

package/esm/typography/emphasis/Emphasis.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/emphasis/Emphasis.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { emphasisCSS } from './Emphasis.sty.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\n\nconst COMPONENT_NAME = 'Emphasis';\n\n/**\n * The props for the Emphasis component.\n * @public\n */\nexport interface EmphasisProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps {}\n\n/**\n * The `Emphasis` component adds visual and semantic emphasis to stressed or essential content.\n * @public\n */\nexport const Emphasis = /* @__PURE__ */ forwardRef<HTMLElement, EmphasisProps>(\n  (props, ref) => {\n    const {\n      children,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      className: consumerClassName,\n      style: consumerStyle,\n      ...remainingProps\n    } = props;\n\n    return (\n      <em\n        ref={ref}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        className={clsx(emphasisCSS, consumerClassName)}\n        style={consumerStyle}\n        {...remainingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        {children}\n      </em>\n    );\n  },\n);\n\n(Emphasis as typeof Emphasis & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "AAsCM;AAtCN,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,SAAS,mBAAmB;AAM5B,MAAM,iBAAiB;AAgBhB,MAAM,WAA2B;AAAA,EACtC,CAAC,OAAO,QAAQ;AACd,UAAM;AAAA,MACJ;AAAA,MACA,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,WAAW;AAAA,MACX,OAAO;AAAA,MACP,GAAG;AAAA,IACL,IAAI;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,WAAW,KAAK,aAAa,iBAAiB;AAAA,QAC9C,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAElB;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,SAAuD,cACtD;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { emphasisCSS } from './Emphasis.sty.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\n\nconst COMPONENT_NAME = 'Emphasis';\n\n/**\n * The props for the Emphasis component.\n * @public\n */\nexport interface EmphasisProps\n  extends WithChildren,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {}\n\n/**\n * The `Emphasis` component adds visual and semantic emphasis to stressed or essential content.\n * @public\n */\nexport const Emphasis = /* @__PURE__ */ forwardRef<HTMLElement, EmphasisProps>(\n  (props, ref) => {\n    const {\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n    return (\n      <em\n        ref={ref}\n        className={clsx(emphasisCSS, consumerClassName)}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        {...ariaLabelingProps}\n        {...behavioralTrackingProps}\n        {...forwardProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        {children}\n      </em>\n    );\n  },\n);\n\n(Emphasis as typeof Emphasis & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "AAkDM;AAlDN,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,SAAS,mBAAmB;AAC5B,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,2BAA2B;AAQpC,MAAM,iBAAiB;AAkBhB,MAAM,WAA2B;AAAA,EACtC,CAAC,OAAO,QAAQ;AACd,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,UAAM,oBAAoB,qBAAqB,SAAS;AACxD,UAAM,eAAe,oBAAoB,WAAW,iBAAiB;AAErE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,aAAa,iBAAiB;AAAA,QAC9C,OAAO;AAAA,QACP,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QACjB,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAElB;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,SAAuD,cACtD;",
   "names": []
 }

package/esm/typography/emphasis/Emphasis.sty.js

@@ -1,5 +1,5 @@
 import "./Emphasis.css";
-var emphasisCSS = "_1r35rtu0-3-0-1";
+var emphasisCSS = "_1r35rtu0-3-1-0";
 export {
   emphasisCSS
 };

package/esm/typography/emphasis/Emphasis.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/emphasis/Emphasis.css.ts"],
-  "sourcesContent": ["import './Emphasis.css';\nexport var emphasisCSS = '_1r35rtu0-3-0-1';"],
+  "sourcesContent": ["import './Emphasis.css';\nexport var emphasisCSS = '_1r35rtu0-3-1-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,cAAc;",
   "names": []
 }

package/esm/typography/external-link/ExternalLink.css

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