@dynatrace/strato-components 3.0.1 → 3.1.0

package/content/code-snippet/CodeHighlight.css

@@ -1,4 +1,4 @@
-._1jmxup80-3-0-1 {
+._1jmxup80-3-1-0 {
   margin: 0;
   padding: 0;
   overflow: visible;
@@ -9,19 +9,19 @@
   font-weight: var(--dt-typography-code-base-default-weight, 400);
   word-break: break-word;
 }
-._1jmxup81-3-0-1 {
+._1jmxup81-3-1-0 {
   font-family: var(--dt-typography-code-base-default-family, Roboto Mono,monospace);
   font-size: var(--dt-typography-code-base-default-size, 14px);
   line-height: var(--dt-typography-code-base-default-line-height, 1.4285714286);
   min-height: calc(2 * var(--dt-spacings-size-12, 12px) + var(--dt-spacings-size-20, 20px));
 }
-._1jmxup82-3-0-1 {
+._1jmxup82-3-1-0 {
   font-family: var(--dt-typography-code-small-default-family, Roboto Mono,monospace);
   font-size: var(--dt-typography-code-small-default-size, 12px);
   line-height: var(--dt-typography-code-small-default-line-height, 1.333333333);
   min-height: calc(2 * var(--dt-spacings-size-6, 6px) + var(--dt-spacings-size-16, 16px));
 }
-._1jmxup83-3-0-1 {
+._1jmxup83-3-1-0 {
   display: table-cell;
   position: sticky;
   left: 0;
@@ -34,60 +34,60 @@
   user-select: none;
   white-space: nowrap;
 }
-._1jmxup84-3-0-1 {
+._1jmxup84-3-1-0 {
   display: table-row;
 }
-._1jmxup85-3-0-1 {
+._1jmxup85-3-1-0 {
   display: block;
   box-sizing: border-box;
   pointer-events: none;
   user-select: none;
   -webkit-user-select: none;
 }
-._1jmxup85-3-0-1::before {
+._1jmxup85-3-1-0::before {
   content: attr(data-linenumber);
 }
-._1jmxup81-3-0-1 ._1jmxup84-3-0-1:first-child ._1jmxup85-3-0-1 {
+._1jmxup81-3-1-0 ._1jmxup84-3-1-0:first-child ._1jmxup85-3-1-0 {
   padding-top: var(--dt-spacings-size-12, 12px);
 }
-._1jmxup82-3-0-1 ._1jmxup84-3-0-1:first-child ._1jmxup85-3-0-1 {
+._1jmxup82-3-1-0 ._1jmxup84-3-1-0:first-child ._1jmxup85-3-1-0 {
   padding-top: var(--dt-spacings-size-6, 6px);
 }
-._1jmxup81-3-0-1 ._1jmxup84-3-0-1:last-child ._1jmxup85-3-0-1 {
+._1jmxup81-3-1-0 ._1jmxup84-3-1-0:last-child ._1jmxup85-3-1-0 {
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }
-._1jmxup82-3-0-1 ._1jmxup84-3-0-1:last-child ._1jmxup85-3-0-1 {
+._1jmxup82-3-1-0 ._1jmxup84-3-1-0:last-child ._1jmxup85-3-1-0 {
   padding-bottom: var(--dt-spacings-size-6, 6px);
 }
-._1jmxup86-3-0-1 {
+._1jmxup86-3-1-0 {
   padding-left: var(--dt-spacings-size-16, 16px);
   min-width: 33px;
 }
-._1jmxup87-3-0-1 {
+._1jmxup87-3-1-0 {
   padding-left: var(--dt-spacings-size-12, 12px);
   min-width: 27px;
 }
-._1jmxup88-3-0-1 {
+._1jmxup88-3-1-0 {
   display: table-cell;
   width: 100%;
 }
-._1jmxup81-3-0-1 ._1jmxup84-3-0-1:first-child ._1jmxup88-3-0-1 {
+._1jmxup81-3-1-0 ._1jmxup84-3-1-0:first-child ._1jmxup88-3-1-0 {
   padding-top: var(--dt-spacings-size-12, 12px);
 }
-._1jmxup82-3-0-1 ._1jmxup84-3-0-1:first-child ._1jmxup88-3-0-1 {
+._1jmxup82-3-1-0 ._1jmxup84-3-1-0:first-child ._1jmxup88-3-1-0 {
   padding-top: var(--dt-spacings-size-6, 6px);
 }
-._1jmxup81-3-0-1 ._1jmxup84-3-0-1:last-child ._1jmxup88-3-0-1 {
+._1jmxup81-3-1-0 ._1jmxup84-3-1-0:last-child ._1jmxup88-3-1-0 {
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }
-._1jmxup82-3-0-1 ._1jmxup84-3-0-1:last-child ._1jmxup88-3-0-1 {
+._1jmxup82-3-1-0 ._1jmxup84-3-1-0:last-child ._1jmxup88-3-1-0 {
   padding-bottom: var(--dt-spacings-size-6, 6px);
 }
-._1jmxup89-3-0-1 {
+._1jmxup89-3-1-0 {
   padding-left: var(--dt-spacings-size-16, 16px);
   padding-right: var(--dt-spacings-size-8, 8px);
 }
-._1jmxup8a-3-0-1 {
+._1jmxup8a-3-1-0 {
   padding-left: var(--dt-spacings-size-12, 12px);
   padding-right: var(--dt-spacings-size-6, 6px);
 }

package/content/code-snippet/CodeHighlight.sty.js

@@ -27,8 +27,8 @@ __export(CodeHighlight_css_exports, {
 module.exports = __toCommonJS(CodeHighlight_css_exports);
 var import_CodeHighlight_css_ts_vanilla = require("./CodeHighlight.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var highlightWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup80-3-0-1", variantClassNames: { size: { "default": "_1jmxup81-3-0-1", condensed: "_1jmxup82-3-0-1" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
-var line = "_1jmxup84-3-0-1";
-var lineContent = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup88-3-0-1", variantClassNames: { size: { "default": "_1jmxup89-3-0-1", condensed: "_1jmxup8a-3-0-1" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
-var lineNumber = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup85-3-0-1", variantClassNames: { size: { "default": "_1jmxup86-3-0-1", condensed: "_1jmxup87-3-0-1" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
-var lineNumberContainer = "_1jmxup83-3-0-1";
+var highlightWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup80-3-1-0", variantClassNames: { size: { "default": "_1jmxup81-3-1-0", condensed: "_1jmxup82-3-1-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var line = "_1jmxup84-3-1-0";
+var lineContent = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup88-3-1-0", variantClassNames: { size: { "default": "_1jmxup89-3-1-0", condensed: "_1jmxup8a-3-1-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var lineNumber = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup85-3-1-0", variantClassNames: { size: { "default": "_1jmxup86-3-1-0", condensed: "_1jmxup87-3-1-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var lineNumberContainer = "_1jmxup83-3-1-0";

package/content/code-snippet/CodeSnippet.css

@@ -1,4 +1,4 @@
-._17pa72a0-3-0-1 {
+._17pa72a0-3-1-0 {
   position: relative;
   display: flex;
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
@@ -9,7 +9,7 @@
   overflow: auto;
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._17pa72a1-3-0-1 {
+._17pa72a1-3-1-0 {
   position: sticky;
   display: flex;
   align-self: stretch;
@@ -18,9 +18,9 @@
   inset-block: 0;
   right: 0;
 }
-._17pa72a2-3-0-1 {
+._17pa72a2-3-1-0 {
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-6, 6px) 0;
 }
-._17pa72a3-3-0-1 {
+._17pa72a3-3-1-0 {
   padding: var(--dt-spacings-size-2, 2px) var(--dt-spacings-size-2, 2px) var(--dt-spacings-size-2, 2px) 0;
 }

package/content/code-snippet/CodeSnippet.d.ts

@@ -1,13 +1,15 @@
 import type { HighlightLanguage } from './HighlightExtended.js';
-import { DataTestId } from '../../core/types/data-props.js';
+import type { AriaLabelingProps } from '../../core/types/a11y-props.js';
+import type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';
+import type { DataTestId } from '../../core/types/data-props.js';
 import type { FocusEvents } from '../../core/types/events.js';
-import { MaskingProps } from '../../core/types/masking-props.js';
-import { StylingProps } from '../../core/types/styling-props.js';
-import { WithChildren } from '../../core/types/with-children.js';
+import type { MaskingProps } from '../../core/types/masking-props.js';
+import type { StylingProps } from '../../core/types/styling-props.js';
+import type { WithChildren } from '../../core/types/with-children.js';
 /**
  * @public
  */
-export interface CodeSnippetProps extends WithChildren, FocusEvents, StylingProps, DataTestId, MaskingProps {
+export interface CodeSnippetProps extends WithChildren, FocusEvents, StylingProps, DataTestId, MaskingProps, AriaLabelingProps, BehaviorTrackingProps {
     /**
      * Code language to be used to run highlighting on the given code.
      */

package/content/code-snippet/CodeSnippet.js

@@ -41,6 +41,9 @@ var import_strato_icons = require("@dynatrace/strato-icons");
 var import_CodeHighlight = require("./CodeHighlight.js");
 var styles = __toESM(require("./CodeSnippet.sty.js"));
 var import_Button = require("../../buttons/button/Button.js");
+var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
+var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
+var import_useSafeForwardProps = require("../../core/hooks/useSafeForwardProps.js");
 var import_Tooltip = require("../../overlays/tooltip/Tooltip.js");
 const COMPONENT_NAME = "CodeSnippet";
 const CodeSnippet = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
@@ -62,6 +65,9 @@ const CodeSnippet = /* @__PURE__ */ (0, import_react.forwardRef)((props, forward
     className: consumerClassName,
     ...remainingProps
   } = props;
+  const [behavioralTrackingProps, restProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
+  const ariaLabelingProps = (0, import_useAriaLabelingProps.useAriaLabelingProps)(restProps);
+  const forwardProps = (0, import_useSafeForwardProps.useSafeForwardProps)(restProps, ariaLabelingProps);
   const showCopyAction = showCopyActionProp ?? allowCopyProp ?? true;
   const joinedChildren = (0, import_react.useMemo)(
     () => Array.isArray(children) ? children.join("") : children,
@@ -106,13 +112,15 @@ const CodeSnippet = /* @__PURE__ */ (0, import_react.forwardRef)((props, forward
     "div",
     {
       ref: forwardedRef,
+      onCopy: copySelection,
+      className: (0, import_clsx.default)(consumerClassName, styles.wrapper),
+      style: consumerStyle,
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
-      style: consumerStyle,
-      className: (0, import_clsx.default)(consumerClassName, styles.wrapper),
-      onCopy: copySelection,
-      ...remainingProps,
+      ...ariaLabelingProps,
+      ...behavioralTrackingProps,
+      ...forwardProps,
       "data-dt-component": COMPONENT_NAME,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/content/code-snippet/CodeSnippet.sty.js

@@ -24,5 +24,5 @@ __export(CodeSnippet_css_exports, {
 module.exports = __toCommonJS(CodeSnippet_css_exports);
 var import_CodeSnippet_css_ts_vanilla = require("./CodeSnippet.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var copyButtonContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_17pa72a1-3-0-1", variantClassNames: { size: { "default": "_17pa72a2-3-0-1", condensed: "_17pa72a3-3-0-1" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
-var wrapper = "_17pa72a0-3-0-1";
+var copyButtonContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_17pa72a1-3-1-0", variantClassNames: { size: { "default": "_17pa72a2-3-1-0", condensed: "_17pa72a3-3-1-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var wrapper = "_17pa72a0-3-1-0";

package/content/empty-state/EmptyState.css

@@ -1,104 +1,104 @@
-._1os652u1-3-0-1 {
+._1os652u1-3-1-0 {
   justify-content: center;
   align-items: center;
   flex-direction: column;
   gap: var(--dt-spacings-size-0, 0);
 }
-._1os652u2-3-0-1 {
+._1os652u2-3-1-0 {
   justify-content: center;
   align-items: center;
   flex-direction: column;
   gap: var(--dt-spacings-size-0, 0);
 }
-._1os652u3-3-0-1 {
+._1os652u3-3-1-0 {
   justify-content: center;
   align-items: center;
   flex-direction: row-reverse;
   gap: var(--dt-spacings-size-64, 64px);
 }
-._1os652u4-3-0-1 {
+._1os652u4-3-1-0 {
   justify-content: center;
   align-items: center;
   flex-direction: column;
   gap: var(--dt-spacings-size-0, 0);
 }
-._1os652u1-3-0-1 ._1os652u5-3-0-1 {
+._1os652u1-3-1-0 ._1os652u5-3-1-0 {
   margin-bottom: var(--dt-spacings-size-8, 8px);
   height: 128px;
   width: 128px;
 }
-._1os652u2-3-0-1 ._1os652u5-3-0-1 {
+._1os652u2-3-1-0 ._1os652u5-3-1-0 {
   margin-bottom: var(--dt-spacings-size-16, 16px);
   height: 192px;
   width: 192px;
 }
-._1os652u3-3-0-1 ._1os652u5-3-0-1 {
+._1os652u3-3-1-0 ._1os652u5-3-1-0 {
   margin-bottom: var(--dt-spacings-size-0, 0);
   height: 320px;
   width: 320px;
 }
-._1os652u4-3-0-1 ._1os652u5-3-0-1 {
+._1os652u4-3-1-0 ._1os652u5-3-1-0 {
   margin-bottom: var(--dt-spacings-size-32, 32px);
   height: 320px;
   width: 320px;
 }
-._1os652u1-3-0-1 ._1os652u6-3-0-1 {
+._1os652u1-3-1-0 ._1os652u6-3-1-0 {
   align-items: center;
 }
-._1os652u2-3-0-1 ._1os652u6-3-0-1 {
+._1os652u2-3-1-0 ._1os652u6-3-1-0 {
   align-items: center;
 }
-._1os652u3-3-0-1 ._1os652u6-3-0-1 {
+._1os652u3-3-1-0 ._1os652u6-3-1-0 {
   align-items: flex-start;
 }
-._1os652u4-3-0-1 ._1os652u6-3-0-1 {
+._1os652u4-3-1-0 ._1os652u6-3-1-0 {
   align-items: center;
 }
-._1os652u1-3-0-1 ._1os652u7-3-0-1 {
+._1os652u1-3-1-0 ._1os652u7-3-1-0 {
   margin-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1os652u2-3-0-1 ._1os652u7-3-0-1 {
+._1os652u2-3-1-0 ._1os652u7-3-1-0 {
   margin-bottom: var(--dt-spacings-size-6, 6px);
 }
-._1os652u3-3-0-1 ._1os652u7-3-0-1 {
+._1os652u3-3-1-0 ._1os652u7-3-1-0 {
   margin-bottom: var(--dt-spacings-size-16, 16px);
 }
-._1os652u4-3-0-1 ._1os652u7-3-0-1 {
+._1os652u4-3-1-0 ._1os652u7-3-1-0 {
   margin-bottom: var(--dt-spacings-size-16, 16px);
 }
-._1os652u1-3-0-1 ._1os652u8-3-0-1 {
+._1os652u1-3-1-0 ._1os652u8-3-1-0 {
   margin-bottom: var(--dt-spacings-size-16, 16px);
 }
-._1os652u2-3-0-1 ._1os652u8-3-0-1 {
+._1os652u2-3-1-0 ._1os652u8-3-1-0 {
   margin-bottom: var(--dt-spacings-size-32, 32px);
 }
-._1os652u3-3-0-1 ._1os652u8-3-0-1 {
+._1os652u3-3-1-0 ._1os652u8-3-1-0 {
   margin-bottom: var(--dt-spacings-size-32, 32px);
 }
-._1os652u4-3-0-1 ._1os652u8-3-0-1 {
+._1os652u4-3-1-0 ._1os652u8-3-1-0 {
   margin-bottom: var(--dt-spacings-size-32, 32px);
 }
-._1os652u1-3-0-1 ._1os652u9-3-0-1 {
+._1os652u1-3-1-0 ._1os652u9-3-1-0 {
   margin-bottom: var(--dt-spacings-size-16, 16px);
 }
-._1os652u2-3-0-1 ._1os652u9-3-0-1 {
+._1os652u2-3-1-0 ._1os652u9-3-1-0 {
   margin-bottom: var(--dt-spacings-size-16, 16px);
 }
-._1os652u3-3-0-1 ._1os652u9-3-0-1 {
+._1os652u3-3-1-0 ._1os652u9-3-1-0 {
   margin-bottom: var(--dt-spacings-size-32, 32px);
 }
-._1os652u4-3-0-1 ._1os652u9-3-0-1 {
+._1os652u4-3-1-0 ._1os652u9-3-1-0 {
   margin-bottom: var(--dt-spacings-size-32, 32px);
 }
-._1os652u1-3-0-1 ._1os652ua-3-0-1 {
+._1os652u1-3-1-0 ._1os652ua-3-1-0 {
   margin-top: var(--dt-spacings-size-16, 16px);
 }
-._1os652u2-3-0-1 ._1os652ua-3-0-1 {
+._1os652u2-3-1-0 ._1os652ua-3-1-0 {
   margin-top: var(--dt-spacings-size-16, 16px);
 }
-._1os652u3-3-0-1 ._1os652ua-3-0-1 {
+._1os652u3-3-1-0 ._1os652ua-3-1-0 {
   margin-top: var(--dt-spacings-size-32, 32px);
 }
-._1os652u4-3-0-1 ._1os652ua-3-0-1 {
+._1os652u4-3-1-0 ._1os652ua-3-1-0 {
   margin-top: var(--dt-spacings-size-32, 32px);
 }

package/content/empty-state/EmptyState.d.ts

@@ -1,18 +1,4 @@
-import { AriaLabelingProps } from '../../core/types/a11y-props.js';
-import { DataTestId } from '../../core/types/data-props.js';
-import { MaskingProps } from '../../core/types/masking-props.js';
-import { StylingProps } from '../../core/types/styling-props.js';
-import { WithChildren } from '../../core/types/with-children.js';
-/**
- * @public
- */
-export interface EmptyStateProps extends WithChildren, AriaLabelingProps, StylingProps, DataTestId, MaskingProps {
-    /**
-     * Size of the empty state component.
-     * @defaultValue 'default'
-     */
-    size?: 'small' | 'default' | 'large';
-}
+import type { EmptyStateProps } from './types/empty-state-types.js';
 /**
  * Use the `EmptyState` component to give feedback to an
  * end-user in case there is no data available. There are cases where this data is
@@ -25,5 +11,5 @@ export declare const EmptyState: ((props: EmptyStateProps & import("react").RefA
     Footer: (props: import("./slot-components/Footer.js").EmptyStateFooterProps & import("react").RefAttributes<HTMLElement>) => React.ReactElement | null;
     Title: (props: import("./slot-components/Title.js").EmptyStateTitleProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
     Visual: (props: import("./slot-components/Visual.js").EmptyStateVisualProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-    VisualPreset: (props: import("./slot-components/VisualPreset.js").EmptyStateVisualPresetProps & import("react").RefAttributes<HTMLImageElement>) => React.ReactElement | null;
+    VisualPreset: (props: import("./types/empty-state-types.js").EmptyStateVisualPresetProps & import("react").RefAttributes<HTMLImageElement>) => React.ReactElement | null;
 };

package/content/empty-state/EmptyState.js

@@ -43,6 +43,9 @@ var import_Footer = require("./slot-components/Footer.js");
 var import_Title = require("./slot-components/Title.js");
 var import_Visual = require("./slot-components/Visual.js");
 var import_VisualPreset = require("./slot-components/VisualPreset.js");
+var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
+var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
+var import_useSafeForwardProps = require("../../core/hooks/useSafeForwardProps.js");
 var import_useSlots = require("../../core/hooks/useSlots.js");
 var import_Divider = require("../../layouts/divider/Divider.js");
 var import_Flex = require("../../layouts/flex/Flex.js");
@@ -56,8 +59,12 @@ const BaseEmptyState = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
     style: consumerStyle,
     "data-testid": dataTestId,
     "data-dtrum-mask": dataDtrumMask,
-    "data-dtrum-allow": dataDtrumAllow
+    "data-dtrum-allow": dataDtrumAllow,
+    ...remainingProps
   } = props;
+  const [behavioralTrackingProps, restProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
+  const ariaLabelingProps = (0, import_useAriaLabelingProps.useAriaLabelingProps)(restProps);
+  const forwardProps = (0, import_useSafeForwardProps.useSafeForwardProps)(restProps, ariaLabelingProps);
   const [slots] = (0, import_useSlots.useSlots)(children, {
     Actions: import_Actions.Actions,
     Details: import_Details.Details,
@@ -86,11 +93,14 @@ const BaseEmptyState = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
       size,
       ref: forwardedRef,
       className: consumerClassName,
+      style: consumerStyle,
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
+      ...ariaLabelingProps,
+      ...behavioralTrackingProps,
+      ...forwardProps,
       "data-dt-component": COMPONENT_NAME,
-      style: consumerStyle,
       children: [
         visualSlot,
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(

package/content/empty-state/EmptyState.sty.js

@@ -29,10 +29,10 @@ __export(EmptyState_css_exports, {
 module.exports = __toCommonJS(EmptyState_css_exports);
 var import_EmptyState_css_ts_vanilla = require("./EmptyState.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var actionsSlotCss = "_1os652u9-3-0-1";
-var contentContainerCss = "_1os652u6-3-0-1";
-var detailsSlotCss = "_1os652u8-3-0-1";
-var emptyStateContainerCss = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1os652u0-3-0-1", variantClassNames: { size: { small: "_1os652u1-3-0-1", "default": "_1os652u2-3-0-1", large: "_1os652u3-3-0-1", largeResponsive: "_1os652u4-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var footerSlotCss = "_1os652ua-3-0-1";
-var titleSlotCss = "_1os652u7-3-0-1";
-var visualSlotCss = "_1os652u5-3-0-1";
+var actionsSlotCss = "_1os652u9-3-1-0";
+var contentContainerCss = "_1os652u6-3-1-0";
+var detailsSlotCss = "_1os652u8-3-1-0";
+var emptyStateContainerCss = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1os652u0-3-1-0", variantClassNames: { size: { small: "_1os652u1-3-1-0", "default": "_1os652u2-3-1-0", large: "_1os652u3-3-1-0", largeResponsive: "_1os652u4-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });
+var footerSlotCss = "_1os652ua-3-1-0";
+var titleSlotCss = "_1os652u7-3-1-0";
+var visualSlotCss = "_1os652u5-3-1-0";

package/content/empty-state/EmptyStateWrapper.d.ts

@@ -1,2 +1,2 @@
-import type { EmptyStateProps } from './EmptyState.js';
+import type { EmptyStateProps } from './types/empty-state-types.js';
 export declare const EmptyStateWrapper: (props: EmptyStateProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/content/empty-state/EmptyStateWrapper.js

@@ -48,7 +48,8 @@ const Monitored = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwarded
     "data-testid": dataTestId,
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow,
-    "data-dt-component": dataDtComponent
+    "data-dt-component": dataDtComponent,
+    ...remainingProps
   } = props;
   const emptyStateContainerRef = (0, import_react.useRef)(null);
   const emptyStateRef = (0, import_useMergeRefs.useMergeRefs)([emptyStateContainerRef, forwardedRef]);
@@ -79,6 +80,7 @@ const Monitored = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwarded
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
+      ...remainingProps,
       "data-dt-component": dataDtComponent,
       children
     }
@@ -93,17 +95,19 @@ const Unmonitored = /* @__PURE__ */ (0, import_react.forwardRef)((props, forward
     "data-testid": dataTestId,
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow,
-    "data-dt-component": dataDtComponent
+    "data-dt-component": dataDtComponent,
+    ...remainingProps
   } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Flex.Flex,
     {
       ref: forwardedRef,
       className: (0, import_clsx.default)([(0, import_EmptyState_css.emptyStateContainerCss)({ size }), consumerClassName]),
-      "data-testid": dataTestId,
       style: consumerStyle,
+      "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
+      ...remainingProps,
       "data-dt-component": dataDtComponent,
       children
     }

package/content/empty-state/empty-state-utils.d.ts

@@ -1,4 +1,4 @@
-import type { EmptyStateVisualPresetProps } from './slot-components/VisualPreset.js';
+import type { EmptyStateVisualPresetProps } from './types/empty-state-types.js';
 /**  Based on the content subcontainer's min-width, spacing,
  * and visual container dimensions (320px + 64px + 320px)
  * @internal

package/content/empty-state/slot-components/Footer.css

@@ -1,4 +1,4 @@
-._ueufet0-3-0-1 {
+._ueufet0-3-1-0 {
   margin: 0;
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }

package/content/empty-state/slot-components/Footer.sty.js

@@ -22,4 +22,4 @@ __export(Footer_css_exports, {
 });
 module.exports = __toCommonJS(Footer_css_exports);
 var import_Footer_css_ts_vanilla = require("./Footer.css");
-var footerCSS = "_ueufet0-3-0-1";
+var footerCSS = "_ueufet0-3-1-0";

package/content/empty-state/slot-components/Visual.css

@@ -1,4 +1,4 @@
-._nlpkgy0-3-0-1 {
+._nlpkgy0-3-1-0 {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -7,13 +7,13 @@
   max-width: 100%;
   aspect-ratio: 8 / 5;
 }
-._nlpkgy0-3-0-1 img, picture {
+._nlpkgy0-3-1-0 img, picture {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
   object-position: center;
 }
-._nlpkgy0-3-0-1 & figure {
+._nlpkgy0-3-1-0 & figure {
   margin: 0;
   max-width: 100%;
   max-height: 100%;

package/content/empty-state/slot-components/Visual.sty.js

@@ -22,4 +22,4 @@ __export(Visual_css_exports, {
 });
 module.exports = __toCommonJS(Visual_css_exports);
 var import_Visual_css_ts_vanilla = require("./Visual.css");
-var visualContainerCSS = "_nlpkgy0-3-0-1";
+var visualContainerCSS = "_nlpkgy0-3-1-0";

package/content/empty-state/slot-components/VisualPreset.d.ts

@@ -1,18 +1,4 @@
-import { DataTestId } from '../../../core/types/data-props.js';
-import { StylingProps } from '../../../core/types/styling-props.js';
-/**
- * @public
- */
-export interface EmptyStateVisualPresetProps extends StylingProps, DataTestId {
-    /**
-     * The visual context of the illustration.
-     */
-    context: 'chart' | 'document' | 'generic' | 'table' | 'query';
-    /**
-     * A visual cue added to the illustration hinting at the reason the state is empty.
-     */
-    type: 'something-missing' | 'no-result' | 'something-wrong' | 'create-new' | 'no-permission';
-}
+import type { EmptyStateVisualPresetProps } from '../types/empty-state-types.js';
 /**
  * Container for the Visual slot of the EmptyState component.
  * @public

package/content/empty-state/types/empty-state-types.d.ts

@@ -1,3 +1,32 @@
+import type { AriaLabelingProps } from '../../../core/types/a11y-props.js';
+import type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';
+import type { DataTestId } from '../../../core/types/data-props.js';
+import type { MaskingProps } from '../../../core/types/masking-props.js';
+import type { StylingProps } from '../../../core/types/styling-props.js';
+import type { WithChildren } from '../../../core/types/with-children.js';
+/**
+ * @public
+ */
+export interface EmptyStateProps extends WithChildren, AriaLabelingProps, StylingProps, DataTestId, MaskingProps, BehaviorTrackingProps {
+    /**
+     * Size of the empty state component.
+     * @defaultValue 'default'
+     */
+    size?: 'small' | 'default' | 'large';
+}
+/**
+ * @public
+ */
+export interface EmptyStateVisualPresetProps extends StylingProps, DataTestId {
+    /**
+     * The visual context of the illustration.
+     */
+    context: 'chart' | 'document' | 'generic' | 'table' | 'query';
+    /**
+     * A visual cue added to the illustration hinting at the reason the state is empty.
+     */
+    type: 'something-missing' | 'no-result' | 'something-wrong' | 'create-new' | 'no-permission';
+}
 /**
  * @internal
  */

package/content/expandable-text/ExpandableText.css

@@ -1,13 +1,13 @@
-._19jh2ut0-3-0-1 {
+._19jh2ut0-3-1-0 {
   transition: opacity var(--dt-animations-expand-collapse-duration-fast, 250ms) var(--dt-animations-expand-collapse-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._19jh2ut1-3-0-1 {
+._19jh2ut1-3-1-0 {
   opacity: 1;
 }
-._19jh2ut2-3-0-1 {
+._19jh2ut2-3-1-0 {
   opacity: 0;
 }
-._19jh2ut3-3-0-1 {
+._19jh2ut3-3-1-0 {
   border: none;
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
   background: transparent;
@@ -27,12 +27,12 @@
   text-decoration-color: var(--dt-colors-border-neutral-accent, #595a7d);
   transition: background-color var(--dt-animations-hover-duration-base, 150ms) var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._19jh2ut3-3-0-1:hover {
+._19jh2ut3-3-1-0:hover {
   background: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._19jh2ut3-3-0-1:active {
+._19jh2ut3-3-1-0:active {
   background: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._19jh2ut3-3-0-1:focus-visible {
+._19jh2ut3-3-1-0:focus-visible {
   text-decoration: none;
 }

package/content/expandable-text/ExpandableText.d.ts

@@ -1,12 +1,14 @@
 import { type ReactNode } from 'react';
-import { DataTestId } from '../../core/types/data-props.js';
-import { MaskingProps } from '../../core/types/masking-props.js';
-import { StylingProps } from '../../core/types/styling-props.js';
-import { WithChildren } from '../../core/types/with-children.js';
+import type { AriaLabelingProps } from '../../core/types/a11y-props.js';
+import type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';
+import type { DataTestId } from '../../core/types/data-props.js';
+import type { MaskingProps } from '../../core/types/masking-props.js';
+import type { StylingProps } from '../../core/types/styling-props.js';
+import type { WithChildren } from '../../core/types/with-children.js';
 /**
  * @public
  */
-export interface ExpandableTextBaseProps extends WithChildren, StylingProps, DataTestId, MaskingProps {
+export interface ExpandableTextBaseProps extends WithChildren, StylingProps, DataTestId, MaskingProps, AriaLabelingProps, BehaviorTrackingProps {
     /**
      * Text shown for expanding the content.
      * @defaultValue 'Show more'