@dynatrace/strato-components 3.6.0 → 3.7.1

package/esm/tables/DataTable/components/DataTableEmptyState.js

@@ -24,7 +24,7 @@ const DataTableEmptyState = /* @__PURE__ */ forwardRef(
         "div",
         {
           ref: forwardedRef,
-          className: consumerClassName,
+          className: clsx(styles.stickyContainer, consumerClassName),
           style: consumerStyle,
           "data-testid": dataTestId,
           ...remainingProps,
@@ -34,13 +34,15 @@ const DataTableEmptyState = /* @__PURE__ */ forwardRef(
     }
     const isColumnsEmpty = table.getVisibleLeafColumnsWithoutBuiltin().length === 0;
     const isDataEmpty = table.getRowModel().rows.length === 0;
+    const rowDensity = table.atoms.visualVariantConfig?.get().rowDensity;
     const fallbackMessage = isDataEmpty ? intl.formatMessage(dataTableMessages.noDataAvailable) : intl.formatMessage(dataTableMessages.noColumnsAvailable);
     return /* @__PURE__ */ jsx(
       Text,
       {
         ref: forwardedRef,
         className: clsx([
-          styles.emptyState({ minWidth: isColumnsEmpty }),
+          styles.stickyContainer,
+          styles.emptyState({ minWidth: isColumnsEmpty, rowDensity }),
           consumerClassName
         ]),
         style: consumerStyle,

package/esm/tables/DataTable/components/DataTableEmptyState.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/components/DataTableEmptyState.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, type ReactElement } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './DataTableEmptyState.sty.js';\nimport type { DataTestId } from '../../../core/types/data-props.js';\nimport type { StylingProps } from '../../../core/types/styling-props.js';\nimport type { WithChildren } from '../../../core/types/with-children.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport { useDataTable } from '../contexts/DataTableContext.js';\nimport { dataTableMessages } from '../messages.js';\n\ntype EmptyStateProps = WithChildren & StylingProps & DataTestId;\n\n// A helper function to check whether the child component is the EmptyState component\nexport function _isEmptyState(\n  child: ReactElement | null,\n): child is ReturnType<typeof DataTableEmptyState> {\n  return child?.type === DataTableEmptyState;\n}\n\n/**\n * EmptyState component used to indicate the empty state to the end user.\n * @public\n */\nexport const DataTableEmptyState = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  EmptyStateProps\n>(\n  (\n    {\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      ...remainingProps\n    },\n    forwardedRef,\n  ): ReactElement | null => {\n    const intl = useIntl();\n    const table = useDataTable();\n\n    // If the slot contains custom content that is not a string, we can render it directly\n    if (children && typeof children !== 'string') {\n      return (\n        <div\n          ref={forwardedRef}\n          className={consumerClassName}\n          style={consumerStyle}\n          data-testid={dataTestId}\n          {...remainingProps}\n        >\n          {children}\n        </div>\n      );\n    }\n\n    const isColumnsEmpty =\n      table.getVisibleLeafColumnsWithoutBuiltin().length === 0;\n    const isDataEmpty = table.getRowModel().rows.length === 0;\n    const fallbackMessage = isDataEmpty\n      ? intl.formatMessage(dataTableMessages.noDataAvailable)\n      : intl.formatMessage(dataTableMessages.noColumnsAvailable);\n\n    return (\n      <Text\n        ref={forwardedRef}\n        className={clsx([\n          styles.emptyState({ minWidth: isColumnsEmpty }),\n          consumerClassName,\n        ])}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        {...remainingProps}\n      >\n        {/* Empty string should also fall back to the default message */}\n        {children || fallbackMessage}\n      </Text>\n    );\n  },\n);\n\n(\n  DataTableEmptyState as typeof DataTableEmptyState & {\n    displayName: string;\n  }\n).displayName = 'EmptyState';\n"],
-  "mappings": "AA6CQ;AA7CR,OAAO,UAAU;AACjB,SAAS,kBAAqC;AAC9C,SAAS,eAAe;AAExB,YAAY,YAAY;AAIxB,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAK3B,SAAS,cACd,OACiD;AACjD,SAAO,OAAO,SAAS;AACzB;AAMO,MAAM,sBAAsC;AAAA,EAIjD,CACE;AAAA,IACE;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,GACA,iBACwB;AACxB,UAAM,OAAO,QAAQ;AACrB,UAAM,QAAQ,aAAa;AAG3B,QAAI,YAAY,OAAO,aAAa,UAAU;AAC5C,aACE;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,WAAW;AAAA,UACX,OAAO;AAAA,UACP,eAAa;AAAA,UACZ,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA,IAEJ;AAEA,UAAM,iBACJ,MAAM,oCAAoC,EAAE,WAAW;AACzD,UAAM,cAAc,MAAM,YAAY,EAAE,KAAK,WAAW;AACxD,UAAM,kBAAkB,cACpB,KAAK,cAAc,kBAAkB,eAAe,IACpD,KAAK,cAAc,kBAAkB,kBAAkB;AAE3D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,KAAK;AAAA,UACd,OAAO,WAAW,EAAE,UAAU,eAAe,CAAC;AAAA,UAC9C;AAAA,QACF,CAAC;AAAA,QACD,OAAO;AAAA,QACP,eAAa;AAAA,QACZ,GAAG;AAAA,QAGH,sBAAY;AAAA;AAAA,IACf;AAAA,EAEJ;AACF;AAGE,oBAGA,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, type ReactElement } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './DataTableEmptyState.sty.js';\nimport type { DataTestId } from '../../../core/types/data-props.js';\nimport type { StylingProps } from '../../../core/types/styling-props.js';\nimport type { WithChildren } from '../../../core/types/with-children.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport { useDataTable } from '../contexts/DataTableContext.js';\nimport { dataTableMessages } from '../messages.js';\n\ntype EmptyStateProps = WithChildren & StylingProps & DataTestId;\n\n// A helper function to check whether the child component is the EmptyState component\nexport function _isEmptyState(\n  child: ReactElement | null,\n): child is ReturnType<typeof DataTableEmptyState> {\n  return child?.type === DataTableEmptyState;\n}\n\n/**\n * EmptyState component used to indicate the empty state to the end user.\n * @public\n */\nexport const DataTableEmptyState = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  EmptyStateProps\n>(\n  (\n    {\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      ...remainingProps\n    },\n    forwardedRef,\n  ): ReactElement | null => {\n    const intl = useIntl();\n    const table = useDataTable();\n\n    // If the slot contains custom content that is not a string, we can render it directly\n    if (children && typeof children !== 'string') {\n      return (\n        <div\n          ref={forwardedRef}\n          className={clsx(styles.stickyContainer, consumerClassName)}\n          style={consumerStyle}\n          data-testid={dataTestId}\n          {...remainingProps}\n        >\n          {children}\n        </div>\n      );\n    }\n\n    const isColumnsEmpty =\n      table.getVisibleLeafColumnsWithoutBuiltin().length === 0;\n    const isDataEmpty = table.getRowModel().rows.length === 0;\n    const rowDensity = table.atoms.visualVariantConfig?.get().rowDensity;\n    const fallbackMessage = isDataEmpty\n      ? intl.formatMessage(dataTableMessages.noDataAvailable)\n      : intl.formatMessage(dataTableMessages.noColumnsAvailable);\n\n    return (\n      <Text\n        ref={forwardedRef}\n        className={clsx([\n          styles.stickyContainer,\n          styles.emptyState({ minWidth: isColumnsEmpty, rowDensity }),\n          consumerClassName,\n        ])}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        {...remainingProps}\n      >\n        {/* Empty string should also fall back to the default message */}\n        {children || fallbackMessage}\n      </Text>\n    );\n  },\n);\n\n(\n  DataTableEmptyState as typeof DataTableEmptyState & {\n    displayName: string;\n  }\n).displayName = 'EmptyState';\n"],
+  "mappings": "AA6CQ;AA7CR,OAAO,UAAU;AACjB,SAAS,kBAAqC;AAC9C,SAAS,eAAe;AAExB,YAAY,YAAY;AAIxB,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAK3B,SAAS,cACd,OACiD;AACjD,SAAO,OAAO,SAAS;AACzB;AAMO,MAAM,sBAAsC;AAAA,EAIjD,CACE;AAAA,IACE;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,GACA,iBACwB;AACxB,UAAM,OAAO,QAAQ;AACrB,UAAM,QAAQ,aAAa;AAG3B,QAAI,YAAY,OAAO,aAAa,UAAU;AAC5C,aACE;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,WAAW,KAAK,OAAO,iBAAiB,iBAAiB;AAAA,UACzD,OAAO;AAAA,UACP,eAAa;AAAA,UACZ,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA,IAEJ;AAEA,UAAM,iBACJ,MAAM,oCAAoC,EAAE,WAAW;AACzD,UAAM,cAAc,MAAM,YAAY,EAAE,KAAK,WAAW;AACxD,UAAM,aAAa,MAAM,MAAM,qBAAqB,IAAI,EAAE;AAC1D,UAAM,kBAAkB,cACpB,KAAK,cAAc,kBAAkB,eAAe,IACpD,KAAK,cAAc,kBAAkB,kBAAkB;AAE3D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,KAAK;AAAA,UACd,OAAO;AAAA,UACP,OAAO,WAAW,EAAE,UAAU,gBAAgB,WAAW,CAAC;AAAA,UAC1D;AAAA,QACF,CAAC;AAAA,QACD,OAAO;AAAA,QACP,eAAa;AAAA,QACZ,GAAG;AAAA,QAGH,sBAAY;AAAA;AAAA,IACf;AAAA,EAEJ;AACF;AAGE,oBAGA,cAAc;",
   "names": []
 }

package/esm/tables/DataTable/components/DataTableEmptyState.sty.js

@@ -1,7 +1,9 @@
 import "./DataTableEmptyState.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var emptyState = _7a468({ defaultClassName: "_lvf8p50-3-6-0", variantClassNames: { minWidth: { true: "_lvf8p51-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
+var emptyState = _7a468({ defaultClassName: "_lvf8p51-3-7-1", variantClassNames: { minWidth: { true: "_lvf8p52-3-7-1" }, rowDensity: { "default": "_lvf8p53-3-7-1", condensed: "_lvf8p54-3-7-1", comfortable: "_lvf8p55-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
+var stickyContainer = "_lvf8p50-3-7-1";
 export {
-  emptyState
+  emptyState,
+  stickyContainer
 };
 //# sourceMappingURL=DataTableEmptyState.sty.js.map

package/esm/tables/DataTable/components/DataTableEmptyState.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/components/DataTableEmptyState.css.ts"],
-  "sourcesContent": ["import './DataTableEmptyState.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var emptyState = _7a468({defaultClassName:'_lvf8p50-3-6-0',variantClassNames:{minWidth:{true:'_lvf8p51-3-6-0'}},defaultVariants:{},compoundVariants:[]});"],
-  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,aAAa,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
+  "sourcesContent": ["import './DataTableEmptyState.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var emptyState = _7a468({defaultClassName:'_lvf8p51-3-7-1',variantClassNames:{minWidth:{true:'_lvf8p52-3-7-1'},rowDensity:{'default':'_lvf8p53-3-7-1',condensed:'_lvf8p54-3-7-1',comfortable:'_lvf8p55-3-7-1'}},defaultVariants:{},compoundVariants:[]});\nexport var stickyContainer = '_lvf8p50-3-7-1';"],
+  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,aAAa,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,GAAE,YAAW,EAAC,WAAU,kBAAiB,WAAU,kBAAiB,aAAY,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACvP,IAAI,kBAAkB;",
   "names": []
 }

package/esm/tables/DataTable/components/DataTableHeader.css

@@ -1,4 +1,4 @@
-._1kpe8zs0-3-6-0 {
+._1kpe8zs0-3-7-1 {
   display: grid;
   grid-template-rows: subgrid;
   grid-template-columns: subgrid;
@@ -12,6 +12,6 @@
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
   box-shadow: inset 0 -2px 0 0 var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1kpe8zs1-3-6-0 {
+._1kpe8zs1-3-7-1 {
   display: contents;
 }

package/esm/tables/DataTable/components/DataTableHeader.js

@@ -42,7 +42,7 @@ function DataTableHeader() {
     });
     return /* @__PURE__ */ jsx("div", { role: "row", className: headerStyles.headerRow, children: headerCells }, headerGroup.id);
   });
-  const headerContent = table.options.enableColumnOrdering ? /* @__PURE__ */ jsx(ColumnOrderDragAndDropContext, { children: headerRows }) : (
+  const headerContent = table.optionsStore.state.enableColumnOrdering ? /* @__PURE__ */ jsx(ColumnOrderDragAndDropContext, { children: headerRows }) : (
     // If column ordering is not enabled, don't use the ColumnOrderDragAndDropContext
     // eslint-disable-next-line react/jsx-no-useless-fragment
     /* @__PURE__ */ jsx(Fragment, { children: headerRows })

package/esm/tables/DataTable/components/DataTableHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/components/DataTableHeader.tsx"],
-  "sourcesContent": ["import { type JSX, useEffect, useRef } from 'react';\n\nimport * as headerStyles from './DataTableHeader.sty.js';\nimport { DataTableHeaderCell } from './DataTableHeaderCell.js';\nimport {\n  DataTableIsHeaderContextProvider,\n  useDataTable,\n} from '../contexts/DataTableContext.js';\nimport { ColumnOrderDragAndDropContext } from '../features/ColumnOrder/ColumnOrderDragAndDropContext.js';\n\nexport function DataTableHeader(): JSX.Element {\n  const table = useDataTable();\n  const headerGroups = table?.getHeaderGroups();\n  const headerRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    if (!headerRef.current) {\n      return;\n    }\n    const resizeObserver = new ResizeObserver((entries) => {\n      const height = entries.at(0)?.borderBoxSize?.at(0)?.blockSize;\n      table.setObservedHeaderHeight(height ?? 0);\n    });\n    resizeObserver.observe(headerRef.current);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [table]);\n\n  const headerRows = headerGroups.map((headerGroup, rowIndex, rows) => {\n    const headers = table.getOrderedHeaderGroups()[rowIndex];\n    const headerCells = headers.map((header, columnIndex) => {\n      return (\n        <DataTableHeaderCell\n          key={header.id}\n          header={header}\n          headers={headers}\n          headerGroupId={headerGroup.id}\n          rowIndex={rowIndex}\n          columnIndex={columnIndex}\n          lastRowIndex={rows.length - 1}\n        />\n      );\n    });\n\n    return (\n      <div role=\"row\" className={headerStyles.headerRow} key={headerGroup.id}>\n        {headerCells}\n      </div>\n    );\n  });\n\n  const headerContent = table.options.enableColumnOrdering ? (\n    <ColumnOrderDragAndDropContext>{headerRows}</ColumnOrderDragAndDropContext>\n  ) : (\n    // If column ordering is not enabled, don't use the ColumnOrderDragAndDropContext\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    (<>{headerRows}</>)\n  );\n\n  return (\n    <DataTableIsHeaderContextProvider>\n      <div\n        ref={headerRef}\n        role=\"rowgroup\"\n        data-rowgroup=\"header\"\n        className={headerStyles.header}\n      >\n        {headerContent}\n      </div>\n    </DataTableIsHeaderContextProvider>\n  );\n}\n\nDataTableHeader.displayName = 'DataTableHeader';\n"],
-  "mappings": "AAkCQ,SAwBH,UAxBG;AAlCR,SAAmB,WAAW,cAAc;AAE5C,YAAY,kBAAkB;AAC9B,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,qCAAqC;AAEvC,SAAS,kBAA+B;AAC7C,QAAM,QAAQ,aAAa;AAC3B,QAAM,eAAe,OAAO,gBAAgB;AAC5C,QAAM,YAAY,OAA8B,IAAI;AAEpD,YAAU,MAAM;AACd,QAAI,CAAC,UAAU,SAAS;AACtB;AAAA,IACF;AACA,UAAM,iBAAiB,IAAI,eAAe,CAAC,YAAY;AACrD,YAAM,SAAS,QAAQ,GAAG,CAAC,GAAG,eAAe,GAAG,CAAC,GAAG;AACpD,YAAM,wBAAwB,UAAU,CAAC;AAAA,IAC3C,CAAC;AACD,mBAAe,QAAQ,UAAU,OAAO;AAExC,WAAO,MAAM;AACX,qBAAe,WAAW;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,aAAa,aAAa,IAAI,CAAC,aAAa,UAAU,SAAS;AACnE,UAAM,UAAU,MAAM,uBAAuB,EAAE,QAAQ;AACvD,UAAM,cAAc,QAAQ,IAAI,CAAC,QAAQ,gBAAgB;AACvD,aACE;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA,eAAe,YAAY;AAAA,UAC3B;AAAA,UACA;AAAA,UACA,cAAc,KAAK,SAAS;AAAA;AAAA,QANvB,OAAO;AAAA,MAOd;AAAA,IAEJ,CAAC;AAED,WACE,oBAAC,SAAI,MAAK,OAAM,WAAW,aAAa,WACrC,yBADqD,YAAY,EAEpE;AAAA,EAEJ,CAAC;AAED,QAAM,gBAAgB,MAAM,QAAQ,uBAClC,oBAAC,iCAA+B,sBAAW;AAAA;AAAA;AAAA,IAI1C,gCAAG,sBAAW;AAAA;AAGjB,SACE,oBAAC,oCACC;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAK;AAAA,MACL,iBAAc;AAAA,MACd,WAAW,aAAa;AAAA,MAEvB;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,gBAAgB,cAAc;",
+  "sourcesContent": ["import { type JSX, useEffect, useRef } from 'react';\n\nimport * as headerStyles from './DataTableHeader.sty.js';\nimport { DataTableHeaderCell } from './DataTableHeaderCell.js';\nimport {\n  DataTableIsHeaderContextProvider,\n  useDataTable,\n} from '../contexts/DataTableContext.js';\nimport { ColumnOrderDragAndDropContext } from '../features/ColumnOrder/ColumnOrderDragAndDropContext.js';\n\nexport function DataTableHeader(): JSX.Element {\n  const table = useDataTable();\n  const headerGroups = table?.getHeaderGroups();\n  const headerRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    if (!headerRef.current) {\n      return;\n    }\n    const resizeObserver = new ResizeObserver((entries) => {\n      const height = entries.at(0)?.borderBoxSize?.at(0)?.blockSize;\n      table.setObservedHeaderHeight(height ?? 0);\n    });\n    resizeObserver.observe(headerRef.current);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [table]);\n\n  const headerRows = headerGroups.map((headerGroup, rowIndex, rows) => {\n    const headers = table.getOrderedHeaderGroups()[rowIndex];\n    const headerCells = headers.map((header, columnIndex) => {\n      return (\n        <DataTableHeaderCell\n          key={header.id}\n          header={header}\n          headers={headers}\n          headerGroupId={headerGroup.id}\n          rowIndex={rowIndex}\n          columnIndex={columnIndex}\n          lastRowIndex={rows.length - 1}\n        />\n      );\n    });\n\n    return (\n      <div role=\"row\" className={headerStyles.headerRow} key={headerGroup.id}>\n        {headerCells}\n      </div>\n    );\n  });\n\n  const headerContent = table.optionsStore.state.enableColumnOrdering ? (\n    <ColumnOrderDragAndDropContext>{headerRows}</ColumnOrderDragAndDropContext>\n  ) : (\n    // If column ordering is not enabled, don't use the ColumnOrderDragAndDropContext\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    <>{headerRows}</>\n  );\n\n  return (\n    <DataTableIsHeaderContextProvider>\n      <div\n        ref={headerRef}\n        role=\"rowgroup\"\n        data-rowgroup=\"header\"\n        className={headerStyles.header}\n      >\n        {headerContent}\n      </div>\n    </DataTableIsHeaderContextProvider>\n  );\n}\n\nDataTableHeader.displayName = 'DataTableHeader';\n"],
+  "mappings": "AAkCQ,SAwBJ,UAxBI;AAlCR,SAAmB,WAAW,cAAc;AAE5C,YAAY,kBAAkB;AAC9B,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,qCAAqC;AAEvC,SAAS,kBAA+B;AAC7C,QAAM,QAAQ,aAAa;AAC3B,QAAM,eAAe,OAAO,gBAAgB;AAC5C,QAAM,YAAY,OAA8B,IAAI;AAEpD,YAAU,MAAM;AACd,QAAI,CAAC,UAAU,SAAS;AACtB;AAAA,IACF;AACA,UAAM,iBAAiB,IAAI,eAAe,CAAC,YAAY;AACrD,YAAM,SAAS,QAAQ,GAAG,CAAC,GAAG,eAAe,GAAG,CAAC,GAAG;AACpD,YAAM,wBAAwB,UAAU,CAAC;AAAA,IAC3C,CAAC;AACD,mBAAe,QAAQ,UAAU,OAAO;AAExC,WAAO,MAAM;AACX,qBAAe,WAAW;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,aAAa,aAAa,IAAI,CAAC,aAAa,UAAU,SAAS;AACnE,UAAM,UAAU,MAAM,uBAAuB,EAAE,QAAQ;AACvD,UAAM,cAAc,QAAQ,IAAI,CAAC,QAAQ,gBAAgB;AACvD,aACE;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA,eAAe,YAAY;AAAA,UAC3B;AAAA,UACA;AAAA,UACA,cAAc,KAAK,SAAS;AAAA;AAAA,QANvB,OAAO;AAAA,MAOd;AAAA,IAEJ,CAAC;AAED,WACE,oBAAC,SAAI,MAAK,OAAM,WAAW,aAAa,WACrC,yBADqD,YAAY,EAEpE;AAAA,EAEJ,CAAC;AAED,QAAM,gBAAgB,MAAM,aAAa,MAAM,uBAC7C,oBAAC,iCAA+B,sBAAW;AAAA;AAAA;AAAA,IAI3C,gCAAG,sBAAW;AAAA;AAGhB,SACE,oBAAC,oCACC;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAK;AAAA,MACL,iBAAc;AAAA,MACd,WAAW,aAAa;AAAA,MAEvB;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,gBAAgB,cAAc;",
   "names": []
 }

package/esm/tables/DataTable/components/DataTableHeader.sty.js

@@ -1,6 +1,6 @@
 import "./DataTableHeader.css";
-var header = "_1kpe8zs0-3-6-0";
-var headerRow = "_1kpe8zs1-3-6-0";
+var header = "_1kpe8zs0-3-7-1";
+var headerRow = "_1kpe8zs1-3-7-1";
 export {
   header,
   headerRow

package/esm/tables/DataTable/components/DataTableHeader.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/components/DataTableHeader.css.ts"],
-  "sourcesContent": ["import './DataTableHeader.css';\nexport var header = '_1kpe8zs0-3-6-0';\nexport var headerRow = '_1kpe8zs1-3-6-0';"],
+  "sourcesContent": ["import './DataTableHeader.css';\nexport var header = '_1kpe8zs0-3-7-1';\nexport var headerRow = '_1kpe8zs1-3-7-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,YAAY;",
   "names": []
 }

package/esm/tables/DataTable/components/DataTableHeaderCell.css

@@ -1,4 +1,4 @@
-._11pvd3zl-3-6-0 {
+._11pvd3zl-3-7-1 {
   all: unset;
   position: absolute;
   bottom: 0;
@@ -14,7 +14,7 @@
   z-index: 1;
   will-change: transform;
 }
-._11pvd3zl-3-6-0::after {
+._11pvd3zl-3-7-1::after {
   content: "";
   box-sizing: border-box;
   display: block;
@@ -24,36 +24,36 @@
   top: var(--dt-spacings-size-4, 4px);
   bottom: var(--dt-spacings-size-4, 4px);
 }
-._11pvd3zl-3-6-0:hover::after, ._11pvd3zl-3-6-0:focus::after {
+._11pvd3zl-3-7-1:hover::after, ._11pvd3zl-3-7-1:focus::after {
   background-color: var(--dt-colors-border-primary-accent, #464cce);
   width: 3px;
 }
-._11pvd3zm-3-6-0::after {
+._11pvd3zm-3-7-1::after {
   cursor: col-resize;
   background-color: var(--dt-colors-border-primary-accent, #464cce);
   width: 3px;
 }
-._11pvd3zo-3-6-0 {
+._11pvd3zo-3-7-1 {
   width: var(--dt-spacings-size-8, 8px);
   transform: translateX(0);
 }
-._11pvd3zo-3-6-0::after {
+._11pvd3zo-3-7-1::after {
   left: auto;
   right: -1px;
 }
-._11pvd3zs-3-6-0 {
+._11pvd3zs-3-7-1 {
   left: 0;
   transform: translateX(-50%);
 }
-._11pvd3zs-3-6-0._11pvd3zg-3-6-0 {
+._11pvd3zs-3-7-1._11pvd3zg-3-7-1 {
   left: 0;
   width: var(--dt-spacings-size-8, 8px);
   transform: none;
 }
-._11pvd3zs-3-6-0._11pvd3zg-3-6-0::after {
+._11pvd3zs-3-7-1._11pvd3zg-3-7-1::after {
   left: 25%;
 }
-._11pvd3zt-3-6-0 {
+._11pvd3zt-3-7-1 {
   position: relative;
   display: flex;
   width: 100%;
@@ -70,51 +70,51 @@
   grid-area: header;
   overflow: visible;
 }
-._11pvd3zt-3-6-0:is(:focus, :focus-visible) {
+._11pvd3zt-3-7-1:is(:focus, :focus-visible) {
   outline: none;
 }
-._11pvd3zt-3-6-0._11pvd3z7-3-6-0:not(._11pvd3z5-3-6-0):has([data-trigger="useraction"]) {
+._11pvd3zt-3-7-1._11pvd3z3-3-7-1:not(._11pvd3z1-3-7-1):has([data-trigger="useraction"]) {
   margin-right: -22px;
 }
-._11pvd3zt-3-6-0._11pvd3z8-3-6-0:not(._11pvd3z5-3-6-0):has([data-trigger="useraction"]) {
+._11pvd3zt-3-7-1._11pvd3z4-3-7-1:not(._11pvd3z1-3-7-1):has([data-trigger="useraction"]) {
   margin-right: -30px;
 }
-._11pvd3zt-3-6-0._11pvd3z4-3-6-0:not(._11pvd3z5-3-6-0):has([data-trigger="useraction"]) {
+._11pvd3zt-3-7-1._11pvd3z0-3-7-1:not(._11pvd3z1-3-7-1):has([data-trigger="useraction"]) {
   margin-right: -22px;
 }
-._11pvd3zt-3-6-0._11pvd3z4-3-6-0._11pvd3z6-3-6-0:not(._11pvd3z5-3-6-0):has([data-trigger="useraction"]) {
+._11pvd3zt-3-7-1._11pvd3z0-3-7-1._11pvd3z2-3-7-1:not(._11pvd3z1-3-7-1):has([data-trigger="useraction"]) {
   margin-right: -44px;
 }
-._11pvd3zt-3-6-0._11pvd3z4-3-6-0._11pvd3z8-3-6-0:not(._11pvd3z5-3-6-0):has([data-trigger="useraction"]) {
+._11pvd3zt-3-7-1._11pvd3z0-3-7-1._11pvd3z4-3-7-1:not(._11pvd3z1-3-7-1):has([data-trigger="useraction"]) {
   margin-right: -52px;
 }
-._14sp6az2-3-6-0 span[data-header-tooltip="true"]:hover + ._11pvd3zt-3-6-0 {
+._14sp6az2-3-7-1 span[data-header-tooltip="true"]:hover + ._11pvd3zt-3-7-1 {
   cursor: pointer;
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._11pvd3z1-3-6-0._11pvd3zt-3-6-0 {
+._11pvd3za-3-7-1._11pvd3zt-3-7-1 {
   border-bottom-width: var(--dt-borders-width-emphasized, 2px);
   border-bottom-style: var(--dt-borders-style-default, solid);
   border-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1jgl8s50-3-6-0 ._11pvd3z1-3-6-0._11pvd3zt-3-6-0 {
+._1jgl8s50-3-7-1 ._11pvd3za-3-7-1._11pvd3zt-3-7-1 {
   border-bottom-width: var(--dt-borders-width-default, 1px);
 }
-._1ku1w3z0-3-6-0 ._11pvd3z1-3-6-0._11pvd3zt-3-6-0 {
+._1ku1w3z0-3-7-1 ._11pvd3za-3-7-1._11pvd3zt-3-7-1 {
   border-bottom: none;
 }
-._11pvd3zt-3-6-0[role="presentation"] {
+._11pvd3zt-3-7-1[role="presentation"] {
   padding: 0;
   overflow: hidden;
 }
-._11pvd3zt-3-6-0:not(._1ku1w3z0-3-6-0 ._11pvd3zt-3-6-0):has([data-sorticon]):hover {
+._11pvd3zt-3-7-1:not(._1ku1w3z0-3-7-1 ._11pvd3zt-3-7-1):has([data-sorticon]):hover {
   cursor: pointer;
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._11pvd3zt-3-6-0:has([data-trigger="useraction"]:hover) {
+._11pvd3zt-3-7-1:has([data-trigger="useraction"]:hover) {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
 }
-._11pvd3zt-3-6-0:not(._11pvd3zd-3-6-0)[data-columntype="gantt"]::before, [data-columntype="gantt"] + ._11pvd3zt-3-6-0:not(._11pvd3zd-3-6-0)::before, [data-columntype="gantt"] + span > ._11pvd3zt-3-6-0:not(._11pvd3zd-3-6-0)::before {
+._11pvd3zt-3-7-1:not(._11pvd3zd-3-7-1)[data-columntype="gantt"]::before, [data-columntype="gantt"] + ._11pvd3zt-3-7-1:not(._11pvd3zd-3-7-1)::before, [data-columntype="gantt"] + span > ._11pvd3zt-3-7-1:not(._11pvd3zd-3-7-1)::before {
   content: "";
   display: block;
   position: absolute;
@@ -124,112 +124,112 @@
   bottom: var(--dt-spacings-size-0, 0);
   background-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-span:has(._11pvd3zo-3-6-0:is(:hover, :focus, ._11pvd3zm-3-6-0)) ~ ._11pvd3zt-3-6-0[role="presentation"]::before,
-     div:has(._11pvd3zo-3-6-0:is(:hover, :focus, ._11pvd3zm-3-6-0)) ~ ._11pvd3zt-3-6-0[role="presentation"]::before {
+span:has(._11pvd3zo-3-7-1:is(:hover, :focus, ._11pvd3zm-3-7-1)) ~ ._11pvd3zt-3-7-1[role="presentation"]::before,
+     div:has(._11pvd3zo-3-7-1:is(:hover, :focus, ._11pvd3zm-3-7-1)) ~ ._11pvd3zt-3-7-1[role="presentation"]::before {
   display: none;
 }
-._11pvd3zv-3-6-0 {
+._11pvd3zv-3-7-1 {
   position: sticky;
-  z-index: calc(2 + var(--_11pvd3zk-3-6-0));
-  left: var(--resizing-leftPosition, var(--_11pvd3zh-3-6-0));
+  z-index: calc(2 + var(--_11pvd3zk-3-7-1));
+  left: var(--resizing-leftPosition, var(--_11pvd3zh-3-7-1));
 }
-._11pvd3ze-3-6-0._11pvd3zv-3-6-0::after {
+._11pvd3ze-3-7-1._11pvd3zv-3-7-1::after {
   content: "";
   display: block;
   position: absolute;
   width: var(--dt-borders-width-default, 1px);
-  right: 0;
   top: 0;
   bottom: 0;
   background-color: var(--dt-colors-border-neutral-default, #dadbe4);
   max-width: 100%;
+  right: 0;
 }
-._11pvd3zw-3-6-0 {
+._11pvd3zw-3-7-1 {
   position: sticky;
   z-index: 3;
-  right: var(--resizing-rightPosition, var(--_11pvd3zi-3-6-0));
+  right: var(--resizing-rightPosition, var(--_11pvd3zi-3-7-1));
 }
-._11pvd3zg-3-6-0._11pvd3zw-3-6-0::before {
+._11pvd3zg-3-7-1._11pvd3zw-3-7-1::before {
   content: "";
   display: block;
   position: absolute;
   width: var(--dt-borders-width-default, 1px);
-  left: 0;
   top: 0;
   bottom: 0;
   background-color: var(--dt-colors-border-neutral-default, #dadbe4);
   max-width: 100%;
+  left: 0;
 }
-._11pvd3zx-3-6-0 {
+._11pvd3zx-3-7-1 {
   padding-top: var(--dt-spacings-size-0, 0);
   padding-right: var(--dt-spacings-size-0, 0);
   padding-bottom: var(--dt-spacings-size-0, 0);
   padding-left: var(--dt-spacings-size-0, 0);
 }
-._11pvd3zx-3-6-0._11pvd3za-3-6-0._11pvd3z4-3-6-0:not(._yj6voi0-3-6-0, ._11pvd3z5-3-6-0):has([data-trigger="useraction"]) {
-  padding-right: 34px;
+._11pvd3zx-3-7-1._11pvd3z6-3-7-1._11pvd3z0-3-7-1:not(._yj6voi0-3-7-1, ._11pvd3z1-3-7-1):has([data-trigger="useraction"]) {
+  padding-right: calc(12px + 22px);
 }
-._11pvd3zx-3-6-0._11pvd3za-3-6-0._11pvd3z4-3-6-0._yj6voi0-3-6-0:not(._11pvd3z5-3-6-0):has([data-trigger="useraction"]) {
-  padding-left: 34px;
+._11pvd3zx-3-7-1._11pvd3z6-3-7-1._11pvd3z0-3-7-1._yj6voi0-3-7-1:not(._11pvd3z1-3-7-1):has([data-trigger="useraction"]) {
+  padding-left: calc(12px + 22px);
 }
-._11pvd3zx-3-6-0._11pvd3zb-3-6-0._11pvd3z4-3-6-0:not(._yj6voi0-3-6-0, ._11pvd3z5-3-6-0):has([data-trigger="useraction"]) {
-  padding-right: 28px;
+._11pvd3zx-3-7-1._11pvd3z7-3-7-1._11pvd3z0-3-7-1:not(._yj6voi0-3-7-1, ._11pvd3z1-3-7-1):has([data-trigger="useraction"]) {
+  padding-right: calc(6px + 22px);
 }
-._11pvd3zx-3-6-0._11pvd3zb-3-6-0._11pvd3z4-3-6-0._yj6voi0-3-6-0:not(._11pvd3z5-3-6-0):has([data-trigger="useraction"]) {
-  padding-left: 28px;
+._11pvd3zx-3-7-1._11pvd3z7-3-7-1._11pvd3z0-3-7-1._yj6voi0-3-7-1:not(._11pvd3z1-3-7-1):has([data-trigger="useraction"]) {
+  padding-left: calc(6px + 22px);
 }
-._11pvd3zx-3-6-0._11pvd3zc-3-6-0._11pvd3z4-3-6-0:not(._yj6voi0-3-6-0, ._11pvd3z5-3-6-0):has([data-trigger="useraction"]) {
-  padding-right: 38px;
+._11pvd3zx-3-7-1._11pvd3z8-3-7-1._11pvd3z0-3-7-1:not(._yj6voi0-3-7-1, ._11pvd3z1-3-7-1):has([data-trigger="useraction"]) {
+  padding-right: calc(16px + 22px);
 }
-._11pvd3zx-3-6-0._11pvd3zc-3-6-0._11pvd3z4-3-6-0._yj6voi0-3-6-0:not(._11pvd3z5-3-6-0):has([data-trigger="useraction"]) {
-  padding-left: 38px;
+._11pvd3zx-3-7-1._11pvd3z8-3-7-1._11pvd3z0-3-7-1._yj6voi0-3-7-1:not(._11pvd3z1-3-7-1):has([data-trigger="useraction"]) {
+  padding-left: calc(16px + 22px);
 }
-._11pvd3zy-3-6-0 {
-  padding-top: var(--dt-spacings-size-8, 8px);
-  padding-right: var(--dt-spacings-size-12, 12px);
-  padding-bottom: var(--dt-spacings-size-8, 8px);
-  padding-left: var(--dt-spacings-size-12, 12px);
+._11pvd3zy-3-7-1 {
+  padding-top: 8px;
+  padding-right: 12px;
+  padding-bottom: 8px;
+  padding-left: 12px;
 }
-._1jrjqrd1-3-6-0 ._11pvd3zd-3-6-0._11pvd3zy-3-6-0 {
+._1jrjqrd1-3-7-1 ._11pvd3zd-3-7-1._11pvd3zy-3-7-1 {
   padding-left: var(--dt-spacings-size-16, 16px);
 }
-._11pvd3zy-3-6-0._11pvd3z4-3-6-0:where(._yj6voi1-3-6-0, ._yj6voi2-3-6-0):not(._11pvd3z5-3-6-0):has([data-trigger="useraction"]) {
-  padding-right: 34px;
+._11pvd3zy-3-7-1._11pvd3z0-3-7-1:where(._yj6voi1-3-7-1, ._yj6voi2-3-7-1):not(._11pvd3z1-3-7-1):has([data-trigger="useraction"]) {
+  padding-right: calc(12px + 22px);
 }
-._11pvd3zy-3-6-0._11pvd3z4-3-6-0._yj6voi0-3-6-0:not(._11pvd3z5-3-6-0, ._11pvd3z9-3-6-0):has([data-trigger="useraction"]) {
-  padding-left: 34px;
+._11pvd3zy-3-7-1._11pvd3z0-3-7-1._yj6voi0-3-7-1:not(._11pvd3z1-3-7-1, ._11pvd3z5-3-7-1):has([data-trigger="useraction"]) {
+  padding-left: calc(12px + 22px);
 }
-._11pvd3zz-3-6-0 {
-  padding-top: var(--dt-spacings-size-2, 2px);
-  padding-right: var(--dt-spacings-size-6, 6px);
-  padding-bottom: var(--dt-spacings-size-2, 2px);
-  padding-left: var(--dt-spacings-size-6, 6px);
+._11pvd3zz-3-7-1 {
+  padding-top: 2px;
+  padding-right: 6px;
+  padding-bottom: 2px;
+  padding-left: 6px;
 }
-._1jrjqrd1-3-6-0 ._11pvd3zd-3-6-0._11pvd3zz-3-6-0 {
+._1jrjqrd1-3-7-1 ._11pvd3zd-3-7-1._11pvd3zz-3-7-1 {
   padding-left: calc(var(--dt-spacings-size-6, 6px) + var(--dt-spacings-size-4, 4px));
 }
-._11pvd3zz-3-6-0._11pvd3z4-3-6-0:where(._yj6voi1-3-6-0, ._yj6voi2-3-6-0):not(._11pvd3z5-3-6-0):has([data-trigger="useraction"]) {
-  padding-right: 28px;
+._11pvd3zz-3-7-1._11pvd3z0-3-7-1:where(._yj6voi1-3-7-1, ._yj6voi2-3-7-1):not(._11pvd3z1-3-7-1):has([data-trigger="useraction"]) {
+  padding-right: calc(6px + 22px);
 }
-._11pvd3zz-3-6-0._11pvd3z4-3-6-0._yj6voi0-3-6-0:not(._11pvd3z5-3-6-0, ._11pvd3z9-3-6-0):has([data-trigger="useraction"]) {
-  padding-left: 28px;
+._11pvd3zz-3-7-1._11pvd3z0-3-7-1._yj6voi0-3-7-1:not(._11pvd3z1-3-7-1, ._11pvd3z5-3-7-1):has([data-trigger="useraction"]) {
+  padding-left: calc(6px + 22px);
 }
-._11pvd3z10-3-6-0 {
-  padding-top: var(--dt-spacings-size-12, 12px);
-  padding-right: var(--dt-spacings-size-16, 16px);
-  padding-bottom: var(--dt-spacings-size-12, 12px);
-  padding-left: var(--dt-spacings-size-16, 16px);
+._11pvd3z10-3-7-1 {
+  padding-top: 12px;
+  padding-right: 16px;
+  padding-bottom: 12px;
+  padding-left: 16px;
 }
-._1jrjqrd1-3-6-0 ._11pvd3zd-3-6-0._11pvd3z10-3-6-0 {
+._1jrjqrd1-3-7-1 ._11pvd3zd-3-7-1._11pvd3z10-3-7-1 {
   padding-left: var(--dt-spacings-size-20, 20px);
 }
-._11pvd3z10-3-6-0._11pvd3z4-3-6-0:where(._yj6voi1-3-6-0, ._yj6voi2-3-6-0):not(._11pvd3z5-3-6-0):has([data-trigger="useraction"]) {
-  padding-right: 38px;
+._11pvd3z10-3-7-1._11pvd3z0-3-7-1:where(._yj6voi1-3-7-1, ._yj6voi2-3-7-1):not(._11pvd3z1-3-7-1):has([data-trigger="useraction"]) {
+  padding-right: calc(16px + 22px);
 }
-._11pvd3z10-3-6-0._11pvd3z4-3-6-0._yj6voi0-3-6-0:not(._11pvd3z5-3-6-0, ._11pvd3z9-3-6-0):has([data-trigger="useraction"]) {
-  padding-left: 38px;
+._11pvd3z10-3-7-1._11pvd3z0-3-7-1._yj6voi0-3-7-1:not(._11pvd3z1-3-7-1, ._11pvd3z5-3-7-1):has([data-trigger="useraction"]) {
+  padding-left: calc(16px + 22px);
 }
-._11pvd3z11-3-6-0:not(._11pvd3zd-3-6-0, ._14sp6az3-3-6-0, ._11pvd3zg-3-6-0, ._11pvd3zf-3-6-0)::before {
+._11pvd3z11-3-7-1:not(._11pvd3zd-3-7-1, ._14sp6az3-3-7-1, ._11pvd3zg-3-7-1, ._11pvd3zf-3-7-1)::before {
   content: "";
   display: block;
   position: absolute;
@@ -239,40 +239,40 @@ span:has(._11pvd3zo-3-6-0:is(:hover, :focus, ._11pvd3zm-3-6-0)) ~ ._11pvd3zt-3-6
   bottom: var(--dt-spacings-size-4, 4px);
   background-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._11pvd3z11-3-6-0._11pvd3z2-3-6-0::before {
+._11pvd3z11-3-7-1._11pvd3zb-3-7-1::before {
   bottom: 0;
 }
-._11pvd3z11-3-6-0._11pvd3z3-3-6-0::before {
+._11pvd3z11-3-7-1._11pvd3zc-3-7-1::before {
   top: 0;
 }
-._11pvd3z11-3-6-0:not(._11pvd3z1-3-6-0) {
+._11pvd3z11-3-7-1:not(._11pvd3za-3-7-1) {
   border-bottom-width: var(--dt-borders-width-default, 1px);
   border-bottom-style: var(--dt-borders-style-default, solid);
   border-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1ku1w3z0-3-6-0 ._11pvd3z11-3-6-0::before {
+._1ku1w3z0-3-7-1 ._11pvd3z11-3-7-1::before {
   display: none;
 }
-._14sp6az2-3-6-0 span[data-header-tooltip="true"]:hover + ._11pvd3z14-3-6-0 {
+._14sp6az2-3-7-1 span[data-header-tooltip="true"]:hover + ._11pvd3z14-3-7-1 {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
 }
-._14sp6az2-3-6-0:not(._1ku1w3z0-3-6-0 ._11pvd3z14-3-6-0) span[data-header-tooltip="true"]:has([data-trigger="useraction"]):hover + ._11pvd3z14-3-6-0 {
+._14sp6az2-3-7-1:not(._1ku1w3z0-3-7-1 ._11pvd3z14-3-7-1) span[data-header-tooltip="true"]:has([data-trigger="useraction"]):hover + ._11pvd3z14-3-7-1 {
   cursor: pointer;
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._11pvd3z15-3-6-0 {
+._11pvd3z15-3-7-1 {
   width: fit-content;
   max-width: 100%;
 }
-._11pvd3zt-3-6-0._11pvd3z9-3-6-0._yj6voi0-3-6-0 ._11pvd3z15-3-6-0 {
+._11pvd3zt-3-7-1._11pvd3z5-3-7-1._yj6voi0-3-7-1 ._11pvd3z15-3-7-1 {
   order: 2;
 }
-._11pvd3z16-3-6-0 {
+._11pvd3z16-3-7-1 {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._11pvd3zt-3-6-0 button, ._11pvd3zt-3-6-0 a, ._11pvd3zt-3-6-0 [tabindex="0"], ._11pvd3zt-3-6-0 input, ._11pvd3zt-3-6-0 label {
+._11pvd3zt-3-7-1 button, ._11pvd3zt-3-7-1 a, ._11pvd3zt-3-7-1 [tabindex="0"], ._11pvd3zt-3-7-1 input, ._11pvd3zt-3-7-1 label {
   pointer-events: auto;
 }
-._11pvd3z13-3-6-0 > *, ._11pvd3z13-3-6-0 ._11pvd3z15-3-6-0 {
+._11pvd3z13-3-7-1 > *, ._11pvd3z13-3-7-1 ._11pvd3z15-3-7-1 {
   opacity: 0.2;
 }