@dynatrace/strato-components 3.13.3 → 3.14.1

package/esm/content/empty-state/slot-components/Actions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/content/empty-state/slot-components/Actions.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { DataTestId } from '../../../core/types/data-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../core/types/with-children.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { actionsSlotCss } from '../EmptyState.sty.js';\n\n//#region Typings\n/**\n * @public\n */\nexport interface EmptyStateActionsProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId {}\n//#endregion Typings\n\n/**\n * The actions slot of the EmptyState component.\n * @public\n */\nexport const Actions = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  EmptyStateActionsProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  } = props;\n\n  return (\n    <Flex\n      ref={forwardedRef}\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      gap={8}\n      className={clsx([actionsSlotCss, consumerClassName])}\n      style={consumerStyle}\n      data-testid={dataTestId}\n    >\n      {children}\n    </Flex>\n  );\n});\n\n(Actions as typeof Actions & { displayName: string }).displayName =\n  'EmptyState.Actions';\n"],
-  "mappings": "AAmCI;AAnCJ,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAK3B,SAAS,YAAY;AACrB,SAAS,sBAAsB;AAgBxB,MAAM,UAA0B,2BAGrC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,eAAc;AAAA,MACd,YAAW;AAAA,MACX,KAAK;AAAA,MACL,WAAW,KAAK,CAAC,gBAAgB,iBAAiB,CAAC;AAAA,MACnD,OAAO;AAAA,MACP,eAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ,CAAC;AAEA,QAAqD,cACpD;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { DataTestId } from '../../../core/types/data-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../core/types/with-children.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { actionsSlotCss } from '../EmptyState.sty.js';\n\n//#region Typings\n/**\n * @public\n */\nexport interface EmptyStateActionsProps\n  extends WithChildren, StylingProps, DataTestId {}\n//#endregion Typings\n\n/**\n * The actions slot of the EmptyState component.\n * @public\n */\nexport const Actions = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  EmptyStateActionsProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  } = props;\n\n  return (\n    <Flex\n      ref={forwardedRef}\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      gap={8}\n      className={clsx([actionsSlotCss, consumerClassName])}\n      style={consumerStyle}\n      data-testid={dataTestId}\n    >\n      {children}\n    </Flex>\n  );\n});\n\n(Actions as typeof Actions & { displayName: string }).displayName =\n  'EmptyState.Actions';\n"],
+  "mappings": "AAiCI;AAjCJ,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAK3B,SAAS,YAAY;AACrB,SAAS,sBAAsB;AAcxB,MAAM,UAA0B,2BAGrC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,eAAc;AAAA,MACd,YAAW;AAAA,MACX,KAAK;AAAA,MACL,WAAW,KAAK,CAAC,gBAAgB,iBAAiB,CAAC;AAAA,MACnD,OAAO;AAAA,MACP,eAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ,CAAC;AAEA,QAAqD,cACpD;",
   "names": []
 }

package/esm/content/empty-state/slot-components/Details.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/content/empty-state/slot-components/Details.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { DataTestId } from '../../../core/types/data-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../core/types/with-children.js';\nimport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from '../../../core/utils/can-receive-default-text-format.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport { detailsSlotCss } from '../EmptyState.sty.js';\n\n//#region Typings\n/**\n * @public\n */\nexport interface EmptyStateDetailsProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId {}\n//#endregion Typings\n\n/**\n * The Details slot of the EmptyState component.\n * @public\n */\nexport const Details = /* @__PURE__ */ forwardRef<\n  HTMLParagraphElement,\n  EmptyStateDetailsProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  } = props;\n\n  const attrs = {\n    ref: forwardedRef,\n    className: clsx([detailsSlotCss, consumerClassName]),\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  };\n\n  return _canReceiveDefaultTextFormat(children) ? (\n    <Text textStyle=\"base\" as=\"p\" {...attrs}>\n      {children}\n    </Text>\n  ) : (\n    <div {...attrs}>{children}</div>\n  );\n});\n\n(Details as typeof Details & { displayName: string }).displayName =\n  'EmptyState.Details';\n"],
-  "mappings": "AA2CI;AA3CJ,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAK3B,SAAS,+BAA+B,oCAAoC;AAC5E,SAAS,YAAY;AACrB,SAAS,sBAAsB;AAgBxB,MAAM,UAA0B,2BAGrC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAI;AAEJ,QAAM,QAAQ;AAAA,IACZ,KAAK;AAAA,IACL,WAAW,KAAK,CAAC,gBAAgB,iBAAiB,CAAC;AAAA,IACnD,OAAO;AAAA,IACP,eAAe;AAAA,EACjB;AAEA,SAAO,6BAA6B,QAAQ,IAC1C,oBAAC,QAAK,WAAU,QAAO,IAAG,KAAK,GAAG,OAC/B,UACH,IAEA,oBAAC,SAAK,GAAG,OAAQ,UAAS;AAE9B,CAAC;AAEA,QAAqD,cACpD;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { DataTestId } from '../../../core/types/data-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../core/types/with-children.js';\nimport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from '../../../core/utils/can-receive-default-text-format.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport { detailsSlotCss } from '../EmptyState.sty.js';\n\n//#region Typings\n/**\n * @public\n */\nexport interface EmptyStateDetailsProps\n  extends WithChildren, StylingProps, DataTestId {}\n//#endregion Typings\n\n/**\n * The Details slot of the EmptyState component.\n * @public\n */\nexport const Details = /* @__PURE__ */ forwardRef<\n  HTMLParagraphElement,\n  EmptyStateDetailsProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  } = props;\n\n  const attrs = {\n    ref: forwardedRef,\n    className: clsx([detailsSlotCss, consumerClassName]),\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  };\n\n  return _canReceiveDefaultTextFormat(children) ? (\n    <Text textStyle=\"base\" as=\"p\" {...attrs}>\n      {children}\n    </Text>\n  ) : (\n    <div {...attrs}>{children}</div>\n  );\n});\n\n(Details as typeof Details & { displayName: string }).displayName =\n  'EmptyState.Details';\n"],
+  "mappings": "AAyCI;AAzCJ,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAK3B,SAAS,+BAA+B,oCAAoC;AAC5E,SAAS,YAAY;AACrB,SAAS,sBAAsB;AAcxB,MAAM,UAA0B,2BAGrC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAI;AAEJ,QAAM,QAAQ;AAAA,IACZ,KAAK;AAAA,IACL,WAAW,KAAK,CAAC,gBAAgB,iBAAiB,CAAC;AAAA,IACnD,OAAO;AAAA,IACP,eAAe;AAAA,EACjB;AAEA,SAAO,6BAA6B,QAAQ,IAC1C,oBAAC,QAAK,WAAU,QAAO,IAAG,KAAK,GAAG,OAC/B,UACH,IAEA,oBAAC,SAAK,GAAG,OAAQ,UAAS;AAE9B,CAAC;AAEA,QAAqD,cACpD;",
   "names": []
 }

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

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

package/esm/content/empty-state/slot-components/Footer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/content/empty-state/slot-components/Footer.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { DataTestId } from '../../../core/types/data-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../core/types/with-children.js';\nimport { textStyle as textStyleCSS } from '../../../styles/textStyle.sty.js';\nimport { footerSlotCss } from '../EmptyState.sty.js';\nimport { footerCSS } from './Footer.sty.js';\n\n//#region Typings\n/**\n * @public\n */\nexport interface EmptyStateFooterProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId {}\n//#endregion Typings\n\n/**\n * The footer slot for the EmptyState component.\n\n* @public\n*/\nexport const Footer = /* @__PURE__ */ forwardRef<\n  HTMLElement,\n  EmptyStateFooterProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  } = props;\n\n  return (\n    <footer\n      ref={forwardedRef}\n      className={clsx([\n        footerCSS,\n        footerSlotCss,\n        textStyleCSS({ textStyle: 'base' }),\n        consumerClassName,\n      ])}\n      style={consumerStyle}\n      data-testid={dataTestId}\n    >\n      {children}\n    </footer>\n  );\n});\n\n(Footer as typeof Footer & { displayName: string }).displayName =\n  'EmptyState.Footer';\n"],
-  "mappings": "AAqCI;AArCJ,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAK3B,SAAS,aAAa,oBAAoB;AAC1C,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAiBnB,MAAM,SAAyB,2BAGpC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,KAAK;AAAA,QACd;AAAA,QACA;AAAA,QACA,aAAa,EAAE,WAAW,OAAO,CAAC;AAAA,QAClC;AAAA,MACF,CAAC;AAAA,MACD,OAAO;AAAA,MACP,eAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ,CAAC;AAEA,OAAmD,cAClD;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { DataTestId } from '../../../core/types/data-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../core/types/with-children.js';\nimport { textStyle as textStyleCSS } from '../../../styles/textStyle.sty.js';\nimport { footerSlotCss } from '../EmptyState.sty.js';\nimport { footerCSS } from './Footer.sty.js';\n\n//#region Typings\n/**\n * @public\n */\nexport interface EmptyStateFooterProps\n  extends WithChildren, StylingProps, DataTestId {}\n//#endregion Typings\n\n/**\n * The footer slot for the EmptyState component.\n\n* @public\n*/\nexport const Footer = /* @__PURE__ */ forwardRef<\n  HTMLElement,\n  EmptyStateFooterProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  } = props;\n\n  return (\n    <footer\n      ref={forwardedRef}\n      className={clsx([\n        footerCSS,\n        footerSlotCss,\n        textStyleCSS({ textStyle: 'base' }),\n        consumerClassName,\n      ])}\n      style={consumerStyle}\n      data-testid={dataTestId}\n    >\n      {children}\n    </footer>\n  );\n});\n\n(Footer as typeof Footer & { displayName: string }).displayName =\n  'EmptyState.Footer';\n"],
+  "mappings": "AAmCI;AAnCJ,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAK3B,SAAS,aAAa,oBAAoB;AAC1C,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAenB,MAAM,SAAyB,2BAGpC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,KAAK;AAAA,QACd;AAAA,QACA;AAAA,QACA,aAAa,EAAE,WAAW,OAAO,CAAC;AAAA,QAClC;AAAA,MACF,CAAC;AAAA,MACD,OAAO;AAAA,MACP,eAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ,CAAC;AAEA,OAAmD,cAClD;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
 import "./Footer.css";
-var footerCSS = "_ueufet0-3-13-3";
+var footerCSS = "_ueufet0-3-14-1";
 export {
   footerCSS
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/content/empty-state/slot-components/Footer.css.ts"],
-  "sourcesContent": ["import './Footer.css';\nexport var footerCSS = '_ueufet0-3-13-3';"],
+  "sourcesContent": ["import './Footer.css';\nexport var footerCSS = '_ueufet0-3-14-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

package/esm/content/empty-state/slot-components/Title.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/content/empty-state/slot-components/Title.tsx"],
-  "sourcesContent": ["import { forwardRef } from 'react';\n\nimport { DataTestId } from '../../../core/types/data-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../core/types/with-children.js';\n\n//#region Typings\n/**\n * @public\n */\nexport interface EmptyStateTitleProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId {\n  /**\n   * The polymorphed HTML tag that determines the semantic level of the title.\n   * Default value depends on the empty state size prop.\n   * @defaultValue h1, h3 or h6\n   */\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n}\n//#endregion Typings\n\n/**\n * The title slot of the EmptyState component.\n * @public\n */\nexport const Title =\n  /* @__PURE__ */\n  forwardRef<HTMLDivElement, EmptyStateTitleProps>((props, forwardedRef) => {\n    const {\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n    } = props;\n\n    return (\n      <div\n        ref={forwardedRef}\n        className={consumerClassName}\n        style={consumerStyle}\n        data-testid={dataTestId}\n      >\n        {children}\n      </div>\n    );\n  });\n\n(Title as typeof Title & { displayName: string }).displayName =\n  'EmptyState.Title';\n"],
-  "mappings": "AAsCM;AAtCN,SAAS,kBAAkB;AA2BpB,MAAM,QAEX,2BAAiD,CAAC,OAAO,iBAAiB;AACxE,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ,CAAC;AAEF,MAAiD,cAChD;",
+  "sourcesContent": ["import { forwardRef } from 'react';\n\nimport { DataTestId } from '../../../core/types/data-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../core/types/with-children.js';\n\n//#region Typings\n/**\n * @public\n */\nexport interface EmptyStateTitleProps\n  extends WithChildren, StylingProps, DataTestId {\n  /**\n   * The polymorphed HTML tag that determines the semantic level of the title.\n   * Default value depends on the empty state size prop.\n   * @defaultValue h1, h3 or h6\n   */\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n}\n//#endregion Typings\n\n/**\n * The title slot of the EmptyState component.\n * @public\n */\nexport const Title =\n  /* @__PURE__ */\n  forwardRef<HTMLDivElement, EmptyStateTitleProps>((props, forwardedRef) => {\n    const {\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n    } = props;\n\n    return (\n      <div\n        ref={forwardedRef}\n        className={consumerClassName}\n        style={consumerStyle}\n        data-testid={dataTestId}\n      >\n        {children}\n      </div>\n    );\n  });\n\n(Title as typeof Title & { displayName: string }).displayName =\n  'EmptyState.Title';\n"],
+  "mappings": "AAoCM;AApCN,SAAS,kBAAkB;AAyBpB,MAAM,QAEX,2BAAiD,CAAC,OAAO,iBAAiB;AACxE,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ,CAAC;AAEF,MAAiD,cAChD;",
   "names": []
 }

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

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

package/esm/content/empty-state/slot-components/Visual.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/content/empty-state/slot-components/Visual.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { DataTestId } from '../../../core/types/data-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../core/types/with-children.js';\nimport { visualSlotCss } from '../EmptyState.sty.js';\nimport { visualContainerCSS } from './Visual.sty.js';\n\n//#region Typings\n/**\n * @public\n */\nexport interface EmptyStateVisualProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId {}\n//#endregion Typings\n\n/**\n * Container for the Visual slot of the EmptyState component.\n * @public\n */\nexport const Visual = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  EmptyStateVisualProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  } = props;\n\n  return (\n    <div\n      ref={forwardedRef}\n      className={clsx([visualContainerCSS, visualSlotCss, consumerClassName])}\n      style={consumerStyle}\n      data-testid={dataTestId}\n    >\n      {children}\n    </div>\n  );\n});\n\n(Visual as typeof Visual & { displayName: string }).displayName =\n  'EmptyState.Visual';\n"],
-  "mappings": "AAmCI;AAnCJ,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAK3B,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AAgB5B,MAAM,SAAyB,2BAGpC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,KAAK,CAAC,oBAAoB,eAAe,iBAAiB,CAAC;AAAA,MACtE,OAAO;AAAA,MACP,eAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ,CAAC;AAEA,OAAmD,cAClD;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { DataTestId } from '../../../core/types/data-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../core/types/with-children.js';\nimport { visualSlotCss } from '../EmptyState.sty.js';\nimport { visualContainerCSS } from './Visual.sty.js';\n\n//#region Typings\n/**\n * @public\n */\nexport interface EmptyStateVisualProps\n  extends WithChildren, StylingProps, DataTestId {}\n//#endregion Typings\n\n/**\n * Container for the Visual slot of the EmptyState component.\n * @public\n */\nexport const Visual = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  EmptyStateVisualProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  } = props;\n\n  return (\n    <div\n      ref={forwardedRef}\n      className={clsx([visualContainerCSS, visualSlotCss, consumerClassName])}\n      style={consumerStyle}\n      data-testid={dataTestId}\n    >\n      {children}\n    </div>\n  );\n});\n\n(Visual as typeof Visual & { displayName: string }).displayName =\n  'EmptyState.Visual';\n"],
+  "mappings": "AAiCI;AAjCJ,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAK3B,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AAc5B,MAAM,SAAyB,2BAGpC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,KAAK,CAAC,oBAAoB,eAAe,iBAAiB,CAAC;AAAA,MACtE,OAAO;AAAA,MACP,eAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ,CAAC;AAEA,OAAmD,cAClD;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
 import "./Visual.css";
-var visualContainerCSS = "_nlpkgy0-3-13-3";
+var visualContainerCSS = "_nlpkgy0-3-14-1";
 export {
   visualContainerCSS
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/content/empty-state/slot-components/Visual.css.ts"],
-  "sourcesContent": ["import './Visual.css';\nexport var visualContainerCSS = '_nlpkgy0-3-13-3';"],
+  "sourcesContent": ["import './Visual.css';\nexport var visualContainerCSS = '_nlpkgy0-3-14-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;",
   "names": []
 }

package/esm/content/expandable-text/ExpandableText.css

@@ -1,38 +1,9 @@
-._19jh2ut0-3-13-3 {
+._19jh2ut0-3-14-1 {
   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-13-3 {
+._19jh2ut1-3-14-1 {
   opacity: 1;
 }
-._19jh2ut2-3-13-3 {
+._19jh2ut2-3-14-1 {
   opacity: 0;
-}
-._19jh2ut3-3-13-3 {
-  border: none;
-  border-radius: var(--dt-borders-radius-field-subdued, 3px);
-  background: transparent;
-  color: var(--dt-colors-text-neutral-default, #2f2f4f);
-  padding: var(--dt-spacings-size-0, 0);
-  padding-inline: var(--dt-spacings-size-2, 2px);
-  font-weight: var(--dt-typography-text-base-default-weight, 400);
-  font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
-  line-height: inherit;
-  font-size: inherit;
-  cursor: pointer;
-  outline: none;
-  text-decoration: underline;
-  text-decoration-style: dashed;
-  text-underline-offset: var(--dt-spacings-size-4, 4px);
-  text-decoration-thickness: var(--dt-borders-width-default, 1px);
-  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-13-3:hover {
-  background: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
-}
-._19jh2ut3-3-13-3:active {
-  background: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
-}
-._19jh2ut3-3-13-3:focus-visible {
-  text-decoration: none;
 }

package/esm/content/expandable-text/ExpandableText.js

@@ -2,10 +2,8 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { forwardRef } from "react";
 import { FormattedMessage } from "react-intl";
-import {
-  expandableTextCSS,
-  expandableTextButtonCSS
-} from "./ExpandableText.sty.js";
+import { root } from "./ExpandableText.sty.js";
+import { InlineButton } from "../../buttons/inline-button/InlineButton.js";
 import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useControllableState } from "../../core/hooks/useControllableState.js";
@@ -60,10 +58,7 @@ const ExpandableText = forwardRef(
           ref: forwardedRef,
           id: textId,
           role: "region",
-          className: clsx(
-            expandableTextCSS({ expanded: isExpanded }),
-            consumerClassName
-          ),
+          className: clsx(root({ expanded: isExpanded }), consumerClassName),
           style: consumerStyle,
           "data-testid": dataTestId,
           "data-dtrum-mask": dataDtrumMask,
@@ -80,16 +75,17 @@ const ExpandableText = forwardRef(
       ),
       " ",
       /* @__PURE__ */ jsx(
-        "button",
+        InlineButton,
         {
-          onClick: () => setExpanded(!isExpanded),
+          as: "button",
           "aria-controls": textId,
           "aria-expanded": isExpanded,
-          className: expandableTextButtonCSS,
+          onClick: () => setExpanded(!isExpanded),
           "data-dtrum-mask": dataDtrumMask,
           "data-dtrum-allow": dataDtrumAllow,
-          "data-dt-name": "ShowMoreLess",
+          "data-dt-children-name": "ShowMoreLess",
           "data-dt-properties": showMoreLessDataDtProperties,
+          "data-dt-component": COMPONENT_NAME,
           children: isExpanded ? collapseLabel : expandLabel
         }
       )

package/esm/content/expandable-text/ExpandableText.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/expandable-text/ExpandableText.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type ReactNode } from 'react';\nimport { forwardRef } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport {\n  expandableTextCSS,\n  expandableTextButtonCSS,\n} from './ExpandableText.sty.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useId } from '../../core/hooks/useId.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 = 'ExpandableText';\n\n// #region Typings\n\n/**\n * @public\n */\nexport interface ExpandableTextBaseProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    AriaLabelingProps,\n    BehaviorTrackingProps {\n  /**\n   * Text shown for expanding the content.\n   * @defaultValue 'Show more'\n   */\n  expandLabel?: ReactNode;\n  /**\n   * Text shown for collapsing the content.\n   * @defaultValue 'Show less'\n   */\n  collapseLabel?: ReactNode;\n}\n\n/**\n * @public\n */\nexport interface ExpandableTextUncontrolledProps {\n  /**\n   * Determines whether or not the content is initially expanded in an uncontrolled scenario.\n   * @defaultValue false\n   */\n  defaultExpanded?: boolean;\n  /**\n   * Determines whether or not the content is expanded in a controlled scenario.\n   */\n  expanded?: never;\n  /**\n   * Callback fired when the expanded attribute changes in a controlled scenario.\n   */\n  onExpandChange?: never;\n}\n\n/**\n * @public\n */\nexport interface ExpandableTextControlledProps {\n  /**\n   * Determines whether or not the content is initially expanded in an uncontrolled scenario.\n   */\n  defaultExpanded?: never;\n  /**\n   * Determines whether or not the content is expanded in a controlled scenario.\n   */\n  expanded: boolean;\n  /**\n   * Callback fired when the expanded attribute changes in a controlled scenario.\n   */\n  onExpandChange: (expanded: boolean) => void;\n}\n\n/**\n * Accepted properties for ExpandableText\n * @public\n */\nexport type ExpandableTextProps = ExpandableTextBaseProps &\n  (ExpandableTextControlledProps | ExpandableTextUncontrolledProps);\n\n/**\n * The `ExpandableText` component provides expand and collapse functionality for inline text.\n * @public\n */\nexport const ExpandableText = forwardRef<HTMLElement, ExpandableTextProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      expandLabel = (\n        <FormattedMessage\n          description=\"Shown for expandable text.\"\n          defaultMessage=\"Show more\"\n          id=\"DV3d5lBJda+EHJja\"\n        />\n      ),\n      collapseLabel = (\n        <FormattedMessage\n          description=\"Shown for collapsible text.\"\n          defaultMessage=\"Show less\"\n          id=\"986buSbL34GVFlBf\"\n        />\n      ),\n      defaultExpanded = false,\n      expanded,\n      onExpandChange,\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    const [isExpanded, setExpanded] = useControllableState({\n      defaultValue: defaultExpanded,\n      value: expanded,\n      onChange: onExpandChange,\n    });\n\n    const textId = useId();\n    const showMoreLessDataDtProperties = `state:${\n      isExpanded ? 'less' : 'more'\n    }`;\n\n    // note: need to check for more than just space character\n    const beginsWithWhitespace =\n      Array.isArray(children) === false &&\n      typeof children === 'string' &&\n      /^\\s/.test(children);\n\n    return (\n      <>\n        <span\n          ref={forwardedRef}\n          id={textId}\n          role=\"region\"\n          className={clsx(\n            expandableTextCSS({ expanded: isExpanded }),\n            consumerClassName,\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          {isExpanded && beginsWithWhitespace && ' '}\n          {isExpanded && children}\n        </span>{' '}\n        <button\n          onClick={() => setExpanded(!isExpanded)}\n          aria-controls={textId}\n          aria-expanded={isExpanded}\n          className={expandableTextButtonCSS}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          data-dt-name=\"ShowMoreLess\"\n          data-dt-properties={showMoreLessDataDtProperties}\n        >\n          {isExpanded ? collapseLabel : expandLabel}\n        </button>\n      </>\n    );\n  },\n);\n\n(\n  ExpandableText as typeof ExpandableText & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
-  "mappings": "AAoGQ,SA+CF,UA/CE,KAgDA,YAhDA;AApGR,OAAO,UAAU;AAEjB,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AAEjC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,4BAA4B;AACrC,SAAS,aAAa;AACtB,SAAS,2BAA2B;AAQpC,MAAM,iBAAiB;AA0EhB,MAAM,iBAAiB;AAAA,EAC5B,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,cACE;AAAA,QAAC;AAAA;AAAA,UACC,aAAY;AAAA,UACZ,gBAAe;AAAA,UACf,IAAG;AAAA;AAAA,MACL;AAAA,MAEF,gBACE;AAAA,QAAC;AAAA;AAAA,UACC,aAAY;AAAA,UACZ,gBAAe;AAAA,UACf,IAAG;AAAA;AAAA,MACL;AAAA,MAEF,kBAAkB;AAAA,MAClB;AAAA,MACA;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,UAAM,CAAC,YAAY,WAAW,IAAI,qBAAqB;AAAA,MACrD,cAAc;AAAA,MACd,OAAO;AAAA,MACP,UAAU;AAAA,IACZ,CAAC;AAED,UAAM,SAAS,MAAM;AACrB,UAAM,+BAA+B,SACnC,aAAa,SAAS,MACxB;AAGA,UAAM,uBACJ,MAAM,QAAQ,QAAQ,MAAM,SAC5B,OAAO,aAAa,YACpB,MAAM,KAAK,QAAQ;AAErB,WACE,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,MAAK;AAAA,UACL,WAAW;AAAA,YACT,kBAAkB,EAAE,UAAU,WAAW,CAAC;AAAA,YAC1C;AAAA,UACF;AAAA,UACA,OAAO;AAAA,UACP,eAAa;AAAA,UACb,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UACjB,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,qBAAmB;AAAA,UAElB;AAAA,0BAAc,wBAAwB;AAAA,YACtC,cAAc;AAAA;AAAA;AAAA,MACjB;AAAA,MAAQ;AAAA,MACR;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,MAAM,YAAY,CAAC,UAAU;AAAA,UACtC,iBAAe;AAAA,UACf,iBAAe;AAAA,UACf,WAAW;AAAA,UACX,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAClB,gBAAa;AAAA,UACb,sBAAoB;AAAA,UAEnB,uBAAa,gBAAgB;AAAA;AAAA,MAChC;AAAA,OACF;AAAA,EAEJ;AACF;AAGE,eACA,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type ReactNode } from 'react';\nimport { forwardRef } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { root } from './ExpandableText.sty.js';\nimport { InlineButton } from '../../buttons/inline-button/InlineButton.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useId } from '../../core/hooks/useId.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 = 'ExpandableText';\n\n// #region Typings\n\n/**\n * @public\n */\nexport interface ExpandableTextBaseProps\n  extends\n    WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    AriaLabelingProps,\n    BehaviorTrackingProps {\n  /**\n   * Text shown for expanding the content.\n   * @defaultValue 'Show more'\n   */\n  expandLabel?: ReactNode;\n  /**\n   * Text shown for collapsing the content.\n   * @defaultValue 'Show less'\n   */\n  collapseLabel?: ReactNode;\n}\n\n/**\n * @public\n */\nexport interface ExpandableTextUncontrolledProps {\n  /**\n   * Determines whether or not the content is initially expanded in an uncontrolled scenario.\n   * @defaultValue false\n   */\n  defaultExpanded?: boolean;\n  /**\n   * Determines whether or not the content is expanded in a controlled scenario.\n   */\n  expanded?: never;\n  /**\n   * Callback fired when the expanded attribute changes in a controlled scenario.\n   */\n  onExpandChange?: never;\n}\n\n/**\n * @public\n */\nexport interface ExpandableTextControlledProps {\n  /**\n   * Determines whether or not the content is initially expanded in an uncontrolled scenario.\n   */\n  defaultExpanded?: never;\n  /**\n   * Determines whether or not the content is expanded in a controlled scenario.\n   */\n  expanded: boolean;\n  /**\n   * Callback fired when the expanded attribute changes in a controlled scenario.\n   */\n  onExpandChange: (expanded: boolean) => void;\n}\n\n/**\n * Accepted properties for ExpandableText\n * @public\n */\nexport type ExpandableTextProps = ExpandableTextBaseProps &\n  (ExpandableTextControlledProps | ExpandableTextUncontrolledProps);\n\n/**\n * The `ExpandableText` component provides expand and collapse functionality for inline text.\n * @public\n */\nexport const ExpandableText = forwardRef<HTMLElement, ExpandableTextProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      expandLabel = (\n        <FormattedMessage\n          description=\"Shown for expandable text.\"\n          defaultMessage=\"Show more\"\n          id=\"DV3d5lBJda+EHJja\"\n        />\n      ),\n      collapseLabel = (\n        <FormattedMessage\n          description=\"Shown for collapsible text.\"\n          defaultMessage=\"Show less\"\n          id=\"986buSbL34GVFlBf\"\n        />\n      ),\n      defaultExpanded = false,\n      expanded,\n      onExpandChange,\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    const [isExpanded, setExpanded] = useControllableState({\n      defaultValue: defaultExpanded,\n      value: expanded,\n      onChange: onExpandChange,\n    });\n\n    const textId = useId();\n    const showMoreLessDataDtProperties = `state:${\n      isExpanded ? 'less' : 'more'\n    }`;\n\n    // note: need to check for more than just space character\n    const beginsWithWhitespace =\n      Array.isArray(children) === false &&\n      typeof children === 'string' &&\n      /^\\s/.test(children);\n\n    return (\n      <>\n        <span\n          ref={forwardedRef}\n          id={textId}\n          role=\"region\"\n          className={clsx(root({ expanded: isExpanded }), 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          {isExpanded && beginsWithWhitespace && ' '}\n          {isExpanded && children}\n        </span>{' '}\n        <InlineButton\n          as=\"button\"\n          aria-controls={textId}\n          aria-expanded={isExpanded}\n          onClick={() => setExpanded(!isExpanded)}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          data-dt-children-name=\"ShowMoreLess\"\n          data-dt-properties={showMoreLessDataDtProperties}\n          data-dt-component={COMPONENT_NAME}\n        >\n          {isExpanded ? collapseLabel : expandLabel}\n        </InlineButton>\n      </>\n    );\n  },\n);\n\n(\n  ExpandableText as typeof ExpandableText & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
+  "mappings": "AAmGQ,SA+CF,UA/CE,KAgDA,YAhDA;AAnGR,OAAO,UAAU;AAEjB,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AAEjC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,4BAA4B;AACrC,SAAS,aAAa;AACtB,SAAS,2BAA2B;AAQpC,MAAM,iBAAiB;AA2EhB,MAAM,iBAAiB;AAAA,EAC5B,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,cACE;AAAA,QAAC;AAAA;AAAA,UACC,aAAY;AAAA,UACZ,gBAAe;AAAA,UACf,IAAG;AAAA;AAAA,MACL;AAAA,MAEF,gBACE;AAAA,QAAC;AAAA;AAAA,UACC,aAAY;AAAA,UACZ,gBAAe;AAAA,UACf,IAAG;AAAA;AAAA,MACL;AAAA,MAEF,kBAAkB;AAAA,MAClB;AAAA,MACA;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,UAAM,CAAC,YAAY,WAAW,IAAI,qBAAqB;AAAA,MACrD,cAAc;AAAA,MACd,OAAO;AAAA,MACP,UAAU;AAAA,IACZ,CAAC;AAED,UAAM,SAAS,MAAM;AACrB,UAAM,+BAA+B,SACnC,aAAa,SAAS,MACxB;AAGA,UAAM,uBACJ,MAAM,QAAQ,QAAQ,MAAM,SAC5B,OAAO,aAAa,YACpB,MAAM,KAAK,QAAQ;AAErB,WACE,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,MAAK;AAAA,UACL,WAAW,KAAK,KAAK,EAAE,UAAU,WAAW,CAAC,GAAG,iBAAiB;AAAA,UACjE,OAAO;AAAA,UACP,eAAa;AAAA,UACb,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UACjB,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,qBAAmB;AAAA,UAElB;AAAA,0BAAc,wBAAwB;AAAA,YACtC,cAAc;AAAA;AAAA;AAAA,MACjB;AAAA,MAAQ;AAAA,MACR;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,iBAAe;AAAA,UACf,iBAAe;AAAA,UACf,SAAS,MAAM,YAAY,CAAC,UAAU;AAAA,UACtC,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAClB,yBAAsB;AAAA,UACtB,sBAAoB;AAAA,UACpB,qBAAmB;AAAA,UAElB,uBAAa,gBAAgB;AAAA;AAAA,MAChC;AAAA,OACF;AAAA,EAEJ;AACF;AAGE,eACA,cAAc;",
   "names": []
 }

package/esm/content/expandable-text/ExpandableText.sty.js

@@ -1,10 +1,7 @@
-import "../../core/styles/focusRingStatic.css";
 import "./ExpandableText.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var expandableTextButtonCSS = "_19jh2ut3-3-13-3 _z0fq9b4-3-13-3 _z0fq9bd-3-13-3 _z0fq9b5-3-13-3 _z0fq9bb-3-13-3";
-var expandableTextCSS = _7a468({ defaultClassName: "_19jh2ut0-3-13-3", variantClassNames: { expanded: { true: "_19jh2ut1-3-13-3", false: "_19jh2ut2-3-13-3" } }, defaultVariants: {}, compoundVariants: [] });
+var root = _7a468({ defaultClassName: "_19jh2ut0-3-14-1", variantClassNames: { expanded: { true: "_19jh2ut1-3-14-1", false: "_19jh2ut2-3-14-1" } }, defaultVariants: {}, compoundVariants: [] });
 export {
-  expandableTextButtonCSS,
-  expandableTextCSS
+  root
 };
 //# sourceMappingURL=ExpandableText.sty.js.map

package/esm/content/expandable-text/ExpandableText.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/expandable-text/ExpandableText.css.ts"],
-  "sourcesContent": ["import '../../core/styles/focusRingStatic.css';\nimport './ExpandableText.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var expandableTextButtonCSS = '_19jh2ut3-3-13-3 _z0fq9b4-3-13-3 _z0fq9bd-3-13-3 _z0fq9b5-3-13-3 _z0fq9bb-3-13-3';\nexport var expandableTextCSS = _7a468({defaultClassName:'_19jh2ut0-3-13-3',variantClassNames:{expanded:{true:'_19jh2ut1-3-13-3',false:'_19jh2ut2-3-13-3'}},defaultVariants:{},compoundVariants:[]});"],
-  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,0BAA0B;AAC9B,IAAI,oBAAoB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
+  "sourcesContent": ["import './ExpandableText.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var root = _7a468({defaultClassName:'_19jh2ut0-3-14-1',variantClassNames:{expanded:{true:'_19jh2ut1-3-14-1',false:'_19jh2ut2-3-14-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,OAAO,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/content/feature-highlight/FeatureHighlight.css

@@ -1,4 +1,4 @@
-._1t60p5x0-3-13-3 {
+._1t60p5x0-3-14-1 {
   box-sizing: border-box;
   max-width: min(400px, 100vw);
   max-height: 100vh;
@@ -7,7 +7,7 @@
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
 }
-._1t60p5x1-3-13-3 {
+._1t60p5x1-3-14-1 {
   position: absolute;
   width: var(--dt-spacings-size-12, 12px);
   height: var(--dt-spacings-size-12, 12px);
@@ -15,7 +15,7 @@
   visibility: hidden;
   z-index: var(--dt-elevations-default, 1);
 }
-._1t60p5x1-3-13-3:before {
+._1t60p5x1-3-14-1:before {
   content: "";
   position: absolute;
   width: var(--dt-spacings-size-12, 12px);
@@ -25,35 +25,35 @@
   transform: rotate(45deg);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
 }
-[data-popper-placement^="top"] > ._1t60p5x1-3-13-3 {
+[data-popper-placement^="top"] > ._1t60p5x1-3-14-1 {
   bottom: calc(calc(var(--dt-spacings-size-12, 12px) / 2) * -1);
 }
-[data-popper-placement^="top"] > ._1t60p5x1-3-13-3:before {
+[data-popper-placement^="top"] > ._1t60p5x1-3-14-1:before {
   border-radius: var(--dt-borders-radius-field-subdued, 3px) 0;
   clip-path: polygon(200% -103%, 200% 200%, -100% 197%);
 }
-[data-popper-placement^="bottom"] > ._1t60p5x1-3-13-3 {
+[data-popper-placement^="bottom"] > ._1t60p5x1-3-14-1 {
   top: calc(calc(var(--dt-spacings-size-12, 12px) / 2) * -1);
 }
-[data-popper-placement^="bottom"] > ._1t60p5x1-3-13-3:before {
+[data-popper-placement^="bottom"] > ._1t60p5x1-3-14-1:before {
   border-radius: var(--dt-borders-radius-field-subdued, 3px) 0;
   clip-path: polygon(203% -100%, -100% -100%, -97% 200%);
 }
-[data-popper-placement^="left"] > ._1t60p5x1-3-13-3 {
+[data-popper-placement^="left"] > ._1t60p5x1-3-14-1 {
   right: calc(calc(var(--dt-spacings-size-12, 12px) / 2) * -1);
 }
-[data-popper-placement^="left"] > ._1t60p5x1-3-13-3:before {
+[data-popper-placement^="left"] > ._1t60p5x1-3-14-1:before {
   border-radius: 0 var(--dt-borders-radius-field-subdued, 3px);
   clip-path: polygon(-100% -97%, 200% -100%, 197% 200%);
 }
-[data-popper-placement^="right"] > ._1t60p5x1-3-13-3 {
+[data-popper-placement^="right"] > ._1t60p5x1-3-14-1 {
   left: calc(calc(var(--dt-spacings-size-12, 12px) / 2) * -1);
 }
-[data-popper-placement^="right"] > ._1t60p5x1-3-13-3:before {
+[data-popper-placement^="right"] > ._1t60p5x1-3-14-1:before {
   border-radius: 0 var(--dt-borders-radius-field-subdued, 3px);
   clip-path: polygon(-100% -103%, -100% 200%, 203% 200%);
 }
-._1t60p5x2-3-13-3 {
+._1t60p5x2-3-14-1 {
   position: relative;
   right: calc(var(--dt-spacings-size-8, 8px) * -1);
   z-index: calc(var(--dt-elevations-default, 1) - 1);

package/esm/content/feature-highlight/FeatureHighlight.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/feature-highlight/FeatureHighlight.tsx"],
-  "sourcesContent": ["import { eventListeners } from '@popperjs/core';\nimport { OffsetsFunction } from '@popperjs/core/lib/modifiers/offset';\nimport {\n  forwardRef,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ReactElement,\n  type KeyboardEvent as ReactKeyboardEvent,\n  Children,\n  isValidElement,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useIntl } from 'react-intl';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport { Actions } from './Actions.js';\nimport {\n  FeatureHighlightCloseButtonCSS,\n  FeatureHighlightPointerArrowCSS,\n  FeatureHighlightScrollContainerCSS,\n} from './FeatureHighlight.sty.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.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';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { devLog } from '../../core/utils/logging.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { useKeyboardFocusHandling } from '../../overlays/hooks/useKeyboardFocusHandling.js';\nimport {\n  basePlacements,\n  type basePlacementsType,\n} from '../../overlays/types/placement.js';\nimport {\n  observeAnimationDone,\n  observeOverlaySize,\n} from '../../overlays/utils/popper-modifiers.js';\nimport { usePopper } from '../../overlays/utils/use-popper-compat.js';\nimport { Content } from '../shared-components/Content.js';\nimport { Title } from '../shared-components/Title.js';\nimport { Visual } from '../shared-components/Visual.js';\n\nconst COMPONENT_NAME = 'FeatureHighlight';\n\n//#region Typings\n/**\n * Accepted placement properties for FeatureHighlight\n * @public\n */\nexport type FeatureHighlightPlacement =\n  | 'left-top'\n  | 'left-middle'\n  | 'left-bottom'\n  | 'right-top'\n  | 'right-middle'\n  | 'right-bottom'\n  | 'top-left'\n  | 'top-middle'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-middle'\n  | 'bottom-right';\n\n/**\n * Interface for the FeatureHighlight component.\n * @public\n */\nexport interface FeatureHighlightProps\n  extends WithChildren,\n    AriaLabelingProps,\n    DataTestId,\n    MaskingProps,\n    StylingProps,\n    BehaviorTrackingProps {\n  /**\n   * Whether the FeatureHighlight is currently shown or not. Has to be controlled by the consumer.\n   */\n  open: boolean;\n  /**\n   * The element the popover is referring to (i.e. where the pointer is pointing to).\n   */\n  anchor: HTMLElement | null;\n  /**\n   * Placement of the FeatureHighlight.\n   * @defaultValue 'right-bottom'\n   */\n  placement?: FeatureHighlightPlacement;\n  /**\n   * Callback fired when closing the FeatureHighlight.\n   */\n  onClose: () => void;\n}\n\ntype FeatureHighlightSlots = {\n  title: ReactElement | null;\n  visual: ReactElement | null;\n  content: ReactElement | null;\n  actions: ReactElement | null;\n};\n//#endregion Typings\n\nconst getPreferredPlacement = (\n  placement: FeatureHighlightPlacement,\n): basePlacementsType => {\n  const preferredPlacement = placement.split('-')[0] as basePlacementsType;\n  // check if passed placement is actually a valid value, otherwise return the\n  if (basePlacements.includes(preferredPlacement)) {\n    return preferredPlacement;\n  } else {\n    return basePlacements[1];\n  }\n};\n\n/**\n * FeatureHighlight component\n *\n */\nconst FeatureHighlightRoot = forwardRef<HTMLElement, FeatureHighlightProps>(\n  (props, forwardedRef) => {\n    const {\n      open,\n      anchor,\n      placement = 'right-bottom',\n      onClose,\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    const preferredPlacement = getPreferredPlacement(placement);\n    const [overlayElement, setOverlayElement] = useState<HTMLElement | null>();\n    const [arrowElement, setArrowElement] = useState<HTMLElement | null>();\n    const closeButtonRef = useRef<HTMLButtonElement>(null);\n    const featureHighlightContainer = useRef<HTMLElement | null>(null);\n    const rootRef = useMergeRefs<HTMLElement | null>([\n      setOverlayElement,\n      forwardedRef,\n    ]);\n    const [handleFocusOnKeydown, closedOnKeydown] =\n      useKeyboardFocusHandling(closeButtonRef);\n    const overlayStacking = useOverlayStacking(undefined, 'feature-highlight');\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n    const intl = useIntl();\n    const slots: FeatureHighlightSlots = {\n      title: null,\n      visual: null,\n      content: null,\n      actions: null,\n    };\n\n    // featureHighlight should be placed at the end of the DOM but before microguide and notifications\n    useLayoutEffect(() => {\n      const toastContainer = document.querySelector('[data-toast-container]');\n      const microguideContainer = document.querySelector(\n        '[data-microguide-container]',\n      );\n      featureHighlightContainer.current = document.createElement('div');\n      featureHighlightContainer.current.setAttribute('aria-live', 'polite');\n      featureHighlightContainer.current.setAttribute(\n        'data-feature-highlight-container',\n        'true',\n      );\n\n      if (microguideContainer && microguideContainer.parentNode) {\n        microguideContainer.parentNode.insertBefore(\n          featureHighlightContainer.current,\n          microguideContainer,\n        );\n      } else if (toastContainer && toastContainer.parentNode) {\n        toastContainer.parentNode.insertBefore(\n          featureHighlightContainer.current,\n          toastContainer,\n        );\n      } else {\n        document.body.appendChild(featureHighlightContainer.current);\n      }\n\n      return () => {\n        featureHighlightContainer.current?.remove();\n      };\n    }, []);\n\n    Children.forEach(children, (child) => {\n      if (isSlot(child, Title)) {\n        slots.title = child;\n      } else if (isSlot(child, Visual)) {\n        slots.visual = child;\n      } else if (isSlot(child, Content)) {\n        slots.content = child;\n      } else if (isSlot(child, Actions)) {\n        slots.actions = child;\n      } else if (isValidElement(child)) {\n        devLog(\n          'Only Title, Visual, Content and Actions are valid children of FeatureHighlight.',\n        );\n      } else if (child !== null) {\n        devLog('The used child is not supported by FeatureHighlight.');\n      }\n    });\n\n    if (slots.title && ariaLabelingProps['aria-labelledby'] === undefined) {\n      ariaLabelingProps['aria-labelledby'] = 'strato-feature-highlight-title';\n    }\n    if (slots.content && ariaLabelingProps['aria-describedby'] === undefined) {\n      ariaLabelingProps['aria-describedby'] =\n        'strato-feature-highlight-content';\n    }\n\n    // Handle the escape key\n    const closeOnEscape = (e: ReactKeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        closedOnKeydown.current = true;\n        onClose();\n      }\n    };\n\n    const offsetModifier = useMemo(\n      () => ({\n        name: 'offset',\n        options: {\n          offset: (({ placement: popperPlacement, popper }) => {\n            let skidding = 0;\n            const spacingToPopperEdge = 24;\n            if (popperPlacement === preferredPlacement) {\n              switch (placement) {\n                case 'right-bottom':\n                case 'left-bottom':\n                  skidding = popper.height / 2 - spacingToPopperEdge;\n                  break;\n                case 'right-top':\n                case 'left-top':\n                  skidding = -(popper.height / 2 - spacingToPopperEdge);\n                  break;\n                case 'top-left':\n                case 'bottom-left':\n                  skidding = -(popper.width / 2 - spacingToPopperEdge);\n                  break;\n                case 'top-right':\n                case 'bottom-right':\n                  skidding = popper.width / 2 - spacingToPopperEdge;\n                  break;\n                default:\n                  skidding = 0;\n              }\n            }\n            return [skidding, 16];\n          }) as OffsetsFunction,\n        },\n      }),\n      [placement, preferredPlacement],\n    );\n\n    const { styles, attributes, update } = usePopper(anchor, overlayElement, {\n      placement: preferredPlacement,\n      modifiers: [\n        offsetModifier,\n        {\n          name: 'flip',\n          options: {\n            fallbackPlacements: [...basePlacements],\n          },\n        },\n        {\n          name: 'arrow',\n          options: {\n            element: arrowElement,\n            padding: 16,\n          },\n        },\n        observeOverlaySize,\n        observeAnimationDone,\n        eventListeners,\n      ],\n    });\n\n    useEffect(() => {\n      // Reposition popper when anchor positions change\n      if (!anchor || !open || !update) {\n        return;\n      }\n\n      let prevRect = anchor.getBoundingClientRect();\n      let positionPollRequestId: number | null = null;\n      let pendingAnimationFrame: number | null = null;\n      let isUpdateScheduled = false;\n\n      const scheduleUpdate = () => {\n        if (isUpdateScheduled) {\n          return;\n        }\n        isUpdateScheduled = true;\n\n        if (pendingAnimationFrame !== null) {\n          cancelAnimationFrame(pendingAnimationFrame);\n        }\n\n        const getPendingAnimationFrame = () => {\n          return requestAnimationFrame(() => {\n            void update().then(() => {\n              isUpdateScheduled = false;\n              pendingAnimationFrame = null;\n            });\n          });\n        };\n        pendingAnimationFrame = getPendingAnimationFrame();\n      };\n\n      // Poll position changes\n      const pollForPositionChange = () => {\n        const anchorRect = anchor.getBoundingClientRect();\n        const hasPositionChanged =\n          Math.abs(anchorRect.x - prevRect.x) > 0.5 ||\n          Math.abs(anchorRect.y - prevRect.y) > 0.5 ||\n          Math.abs(anchorRect.width - prevRect.width) > 0.5 ||\n          Math.abs(anchorRect.height - prevRect.height) > 0.5;\n\n        if (hasPositionChanged) {\n          prevRect = anchorRect;\n          scheduleUpdate();\n        }\n        positionPollRequestId = requestAnimationFrame(pollForPositionChange);\n      };\n      positionPollRequestId = requestAnimationFrame(pollForPositionChange);\n\n      return () => {\n        if (positionPollRequestId !== null) {\n          cancelAnimationFrame(positionPollRequestId);\n        }\n        if (pendingAnimationFrame !== null) {\n          cancelAnimationFrame(pendingAnimationFrame);\n        }\n      };\n    }, [anchor, open, update]);\n\n    useEffect(() => {\n      if (open === false) {\n        // handle focus if closed via keyboard\n        handleFocusOnKeydown();\n      }\n    }, [handleFocusOnKeydown, open]);\n\n    return open && anchor\n      ? createPortal(\n          <Flex\n            ref={rootRef}\n            onKeyDown={closeOnEscape}\n            role=\"dialog\"\n            aria-modal=\"false\"\n            className={consumerClassName}\n            style={{\n              ...styles.popper,\n              zIndex: overlayStacking.style.zIndex,\n              ...consumerStyle,\n            }}\n            data-testid={dataTestId}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n            {...attributes.popper}\n            {...ariaLabelingProps}\n            {...behavioralTrackingProps}\n            {...forwardProps}\n            data-dt-component={COMPONENT_NAME}\n          >\n            <Flex\n              className={FeatureHighlightScrollContainerCSS}\n              flexDirection=\"column\"\n              gap={0}\n              paddingX={16}\n              paddingTop={8}\n              paddingBottom={8}\n            >\n              <Flex\n                flexDirection=\"row\"\n                justifyContent=\"space-between\"\n                alignItems=\"flex-start\"\n                gap={8}\n                paddingBottom={\n                  slots.content !== null ||\n                  slots.actions !== null ||\n                  slots.visual !== null\n                    ? 8\n                    : 0\n                }\n              >\n                <Flex\n                  flexItem\n                  flexGrow={1}\n                  paddingY={6}\n                  id=\"strato-feature-highlight-title\"\n                >\n                  {slots.title}\n                </Flex>\n                <Button\n                  className={FeatureHighlightCloseButtonCSS}\n                  onClick={() => onClose()}\n                  onKeyDown={() => (closedOnKeydown.current = true)}\n                  ref={closeButtonRef}\n                  aria-label={intl.formatMessage({\n                    defaultMessage: 'Close feature highlight',\n                    id: 'XQHEJyt2t/js0TGr',\n                    description: 'Close the feature highlight.',\n                  })}\n                  data-dt-children-name=\"CloseX\"\n                >\n                  <Button.Prefix>\n                    <XmarkIcon />\n                  </Button.Prefix>\n                </Button>\n              </Flex>\n              {slots.visual && (\n                <Flex\n                  paddingBottom={\n                    slots.content !== null || slots.actions !== null ? 16 : 8\n                  }\n                >\n                  {slots.visual}\n                </Flex>\n              )}\n              {slots.content && (\n                <Flex\n                  paddingBottom={8}\n                  style={{ overflow: 'hidden' }}\n                  id=\"strato-feature-highlight-content\"\n                >\n                  {slots.content}\n                </Flex>\n              )}\n              {slots.actions}\n            </Flex>\n            <div\n              data-popper-arrow\n              ref={setArrowElement}\n              className={FeatureHighlightPointerArrowCSS}\n              style={styles.arrow}\n              {...attributes.arrow}\n            />\n          </Flex>,\n          featureHighlightContainer.current || document.body,\n        )\n      : null;\n  },\n);\n\n(\n  FeatureHighlightRoot as typeof FeatureHighlightRoot & {\n    displayName: string;\n  }\n).displayName = COMPONENT_NAME;\n\n/**\n * Use the `FeatureHighlight` to introduce new features to users or guide new users through key functionality, positioned next to the relevant interface element.\n * @public\n */\nexport const FeatureHighlight = Object.assign(FeatureHighlightRoot, {\n  Title,\n  Visual,\n  Content,\n  Actions,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { eventListeners } from '@popperjs/core';\nimport { OffsetsFunction } from '@popperjs/core/lib/modifiers/offset';\nimport {\n  forwardRef,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ReactElement,\n  type KeyboardEvent as ReactKeyboardEvent,\n  Children,\n  isValidElement,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useIntl } from 'react-intl';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport { Actions } from './Actions.js';\nimport {\n  FeatureHighlightCloseButtonCSS,\n  FeatureHighlightPointerArrowCSS,\n  FeatureHighlightScrollContainerCSS,\n} from './FeatureHighlight.sty.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.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';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { devLog } from '../../core/utils/logging.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { useKeyboardFocusHandling } from '../../overlays/hooks/useKeyboardFocusHandling.js';\nimport {\n  basePlacements,\n  type basePlacementsType,\n} from '../../overlays/types/placement.js';\nimport {\n  observeAnimationDone,\n  observeOverlaySize,\n} from '../../overlays/utils/popper-modifiers.js';\nimport { usePopper } from '../../overlays/utils/use-popper-compat.js';\nimport { Content } from '../shared-components/Content.js';\nimport { Title } from '../shared-components/Title.js';\nimport { Visual } from '../shared-components/Visual.js';\n\nconst COMPONENT_NAME = 'FeatureHighlight';\n\n//#region Typings\n/**\n * Accepted placement properties for FeatureHighlight\n * @public\n */\nexport type FeatureHighlightPlacement =\n  | 'left-top'\n  | 'left-middle'\n  | 'left-bottom'\n  | 'right-top'\n  | 'right-middle'\n  | 'right-bottom'\n  | 'top-left'\n  | 'top-middle'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-middle'\n  | 'bottom-right';\n\n/**\n * Interface for the FeatureHighlight component.\n * @public\n */\nexport interface FeatureHighlightProps\n  extends\n    WithChildren,\n    AriaLabelingProps,\n    DataTestId,\n    MaskingProps,\n    StylingProps,\n    BehaviorTrackingProps {\n  /**\n   * Whether the FeatureHighlight is currently shown or not. Has to be controlled by the consumer.\n   */\n  open: boolean;\n  /**\n   * The element the popover is referring to (i.e. where the pointer is pointing to).\n   */\n  anchor: HTMLElement | null;\n  /**\n   * Placement of the FeatureHighlight.\n   * @defaultValue 'right-bottom'\n   */\n  placement?: FeatureHighlightPlacement;\n  /**\n   * Callback fired when closing the FeatureHighlight.\n   */\n  onClose: () => void;\n}\n\ntype FeatureHighlightSlots = {\n  title: ReactElement | null;\n  visual: ReactElement | null;\n  content: ReactElement | null;\n  actions: ReactElement | null;\n};\n//#endregion Typings\n\nconst getPreferredPlacement = (\n  placement: FeatureHighlightPlacement,\n): basePlacementsType => {\n  const preferredPlacement = placement.split('-')[0] as basePlacementsType;\n  // check if passed placement is actually a valid value, otherwise return the\n  if (basePlacements.includes(preferredPlacement)) {\n    return preferredPlacement;\n  } else {\n    return basePlacements[1];\n  }\n};\n\n/**\n * FeatureHighlight component\n *\n */\nconst FeatureHighlightRoot = forwardRef<HTMLElement, FeatureHighlightProps>(\n  (props, forwardedRef) => {\n    const {\n      open,\n      anchor,\n      placement = 'right-bottom',\n      onClose,\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    const preferredPlacement = getPreferredPlacement(placement);\n    const [overlayElement, setOverlayElement] = useState<HTMLElement | null>();\n    const [arrowElement, setArrowElement] = useState<HTMLElement | null>();\n    const closeButtonRef = useRef<HTMLButtonElement>(null);\n    const featureHighlightContainer = useRef<HTMLElement | null>(null);\n    const rootRef = useMergeRefs<HTMLElement | null>([\n      setOverlayElement,\n      forwardedRef,\n    ]);\n    const [handleFocusOnKeydown, closedOnKeydown] =\n      useKeyboardFocusHandling(closeButtonRef);\n    const overlayStacking = useOverlayStacking(undefined, 'feature-highlight');\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n    const intl = useIntl();\n    const slots: FeatureHighlightSlots = {\n      title: null,\n      visual: null,\n      content: null,\n      actions: null,\n    };\n\n    // featureHighlight should be placed at the end of the DOM but before microguide and notifications\n    useLayoutEffect(() => {\n      const toastContainer = document.querySelector('[data-toast-container]');\n      const microguideContainer = document.querySelector(\n        '[data-microguide-container]',\n      );\n      featureHighlightContainer.current = document.createElement('div');\n      featureHighlightContainer.current.setAttribute('aria-live', 'polite');\n      featureHighlightContainer.current.setAttribute(\n        'data-feature-highlight-container',\n        'true',\n      );\n\n      if (microguideContainer && microguideContainer.parentNode) {\n        microguideContainer.parentNode.insertBefore(\n          featureHighlightContainer.current,\n          microguideContainer,\n        );\n      } else if (toastContainer && toastContainer.parentNode) {\n        toastContainer.parentNode.insertBefore(\n          featureHighlightContainer.current,\n          toastContainer,\n        );\n      } else {\n        document.body.appendChild(featureHighlightContainer.current);\n      }\n\n      return () => {\n        featureHighlightContainer.current?.remove();\n      };\n    }, []);\n\n    Children.forEach(children, (child) => {\n      if (isSlot(child, Title)) {\n        slots.title = child;\n      } else if (isSlot(child, Visual)) {\n        slots.visual = child;\n      } else if (isSlot(child, Content)) {\n        slots.content = child;\n      } else if (isSlot(child, Actions)) {\n        slots.actions = child;\n      } else if (isValidElement(child)) {\n        devLog(\n          'Only Title, Visual, Content and Actions are valid children of FeatureHighlight.',\n        );\n      } else if (child !== null) {\n        devLog('The used child is not supported by FeatureHighlight.');\n      }\n    });\n\n    if (slots.title && ariaLabelingProps['aria-labelledby'] === undefined) {\n      ariaLabelingProps['aria-labelledby'] = 'strato-feature-highlight-title';\n    }\n    if (slots.content && ariaLabelingProps['aria-describedby'] === undefined) {\n      ariaLabelingProps['aria-describedby'] =\n        'strato-feature-highlight-content';\n    }\n\n    // Handle the escape key\n    const closeOnEscape = (e: ReactKeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        closedOnKeydown.current = true;\n        onClose();\n      }\n    };\n\n    const offsetModifier = useMemo(\n      () => ({\n        name: 'offset',\n        options: {\n          offset: (({ placement: popperPlacement, popper }) => {\n            let skidding = 0;\n            const spacingToPopperEdge = 24;\n            if (popperPlacement === preferredPlacement) {\n              switch (placement) {\n                case 'right-bottom':\n                case 'left-bottom':\n                  skidding = popper.height / 2 - spacingToPopperEdge;\n                  break;\n                case 'right-top':\n                case 'left-top':\n                  skidding = -(popper.height / 2 - spacingToPopperEdge);\n                  break;\n                case 'top-left':\n                case 'bottom-left':\n                  skidding = -(popper.width / 2 - spacingToPopperEdge);\n                  break;\n                case 'top-right':\n                case 'bottom-right':\n                  skidding = popper.width / 2 - spacingToPopperEdge;\n                  break;\n                default:\n                  skidding = 0;\n              }\n            }\n            return [skidding, 16];\n          }) as OffsetsFunction,\n        },\n      }),\n      [placement, preferredPlacement],\n    );\n\n    const { styles, attributes, update } = usePopper(anchor, overlayElement, {\n      placement: preferredPlacement,\n      modifiers: [\n        offsetModifier,\n        {\n          name: 'flip',\n          options: {\n            fallbackPlacements: [...basePlacements],\n          },\n        },\n        {\n          name: 'arrow',\n          options: {\n            element: arrowElement,\n            padding: 16,\n          },\n        },\n        observeOverlaySize,\n        observeAnimationDone,\n        eventListeners,\n      ],\n    });\n\n    useEffect(() => {\n      // Reposition popper when anchor positions change\n      if (!anchor || !open || !update) {\n        return;\n      }\n\n      let prevRect = anchor.getBoundingClientRect();\n      let positionPollRequestId: number | null = null;\n      let pendingAnimationFrame: number | null = null;\n      let isUpdateScheduled = false;\n\n      const scheduleUpdate = () => {\n        if (isUpdateScheduled) {\n          return;\n        }\n        isUpdateScheduled = true;\n\n        if (pendingAnimationFrame !== null) {\n          cancelAnimationFrame(pendingAnimationFrame);\n        }\n\n        const getPendingAnimationFrame = () => {\n          return requestAnimationFrame(() => {\n            void update().then(() => {\n              isUpdateScheduled = false;\n              pendingAnimationFrame = null;\n            });\n          });\n        };\n        pendingAnimationFrame = getPendingAnimationFrame();\n      };\n\n      // Poll position changes\n      const pollForPositionChange = () => {\n        const anchorRect = anchor.getBoundingClientRect();\n        const hasPositionChanged =\n          Math.abs(anchorRect.x - prevRect.x) > 0.5 ||\n          Math.abs(anchorRect.y - prevRect.y) > 0.5 ||\n          Math.abs(anchorRect.width - prevRect.width) > 0.5 ||\n          Math.abs(anchorRect.height - prevRect.height) > 0.5;\n\n        if (hasPositionChanged) {\n          prevRect = anchorRect;\n          scheduleUpdate();\n        }\n        positionPollRequestId = requestAnimationFrame(pollForPositionChange);\n      };\n      positionPollRequestId = requestAnimationFrame(pollForPositionChange);\n\n      return () => {\n        if (positionPollRequestId !== null) {\n          cancelAnimationFrame(positionPollRequestId);\n        }\n        if (pendingAnimationFrame !== null) {\n          cancelAnimationFrame(pendingAnimationFrame);\n        }\n      };\n    }, [anchor, open, update]);\n\n    useEffect(() => {\n      if (open === false) {\n        // handle focus if closed via keyboard\n        handleFocusOnKeydown();\n      }\n    }, [handleFocusOnKeydown, open]);\n\n    return open && anchor\n      ? createPortal(\n          <Flex\n            ref={rootRef}\n            onKeyDown={closeOnEscape}\n            role=\"dialog\"\n            aria-modal=\"false\"\n            className={consumerClassName}\n            style={{\n              ...styles.popper,\n              zIndex: overlayStacking.style.zIndex,\n              ...consumerStyle,\n            }}\n            data-testid={dataTestId}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n            {...attributes.popper}\n            {...ariaLabelingProps}\n            {...behavioralTrackingProps}\n            {...forwardProps}\n            data-dt-component={COMPONENT_NAME}\n          >\n            <Flex\n              className={FeatureHighlightScrollContainerCSS}\n              flexDirection=\"column\"\n              gap={0}\n              paddingX={16}\n              paddingTop={8}\n              paddingBottom={8}\n            >\n              <Flex\n                flexDirection=\"row\"\n                justifyContent=\"space-between\"\n                alignItems=\"flex-start\"\n                gap={8}\n                paddingBottom={\n                  slots.content !== null ||\n                  slots.actions !== null ||\n                  slots.visual !== null\n                    ? 8\n                    : 0\n                }\n              >\n                <Flex\n                  flexItem\n                  flexGrow={1}\n                  paddingY={6}\n                  id=\"strato-feature-highlight-title\"\n                >\n                  {slots.title}\n                </Flex>\n                <Button\n                  className={FeatureHighlightCloseButtonCSS}\n                  onClick={() => onClose()}\n                  onKeyDown={() => (closedOnKeydown.current = true)}\n                  ref={closeButtonRef}\n                  aria-label={intl.formatMessage({\n                    defaultMessage: 'Close feature highlight',\n                    id: 'XQHEJyt2t/js0TGr',\n                    description: 'Close the feature highlight.',\n                  })}\n                  data-dt-children-name=\"CloseX\"\n                >\n                  <Button.Prefix>\n                    <XmarkIcon />\n                  </Button.Prefix>\n                </Button>\n              </Flex>\n              {slots.visual && (\n                <Flex\n                  paddingBottom={\n                    slots.content !== null || slots.actions !== null ? 16 : 8\n                  }\n                >\n                  {slots.visual}\n                </Flex>\n              )}\n              {slots.content && (\n                <Flex\n                  paddingBottom={8}\n                  style={{ overflow: 'hidden' }}\n                  id=\"strato-feature-highlight-content\"\n                >\n                  {slots.content}\n                </Flex>\n              )}\n              {slots.actions}\n            </Flex>\n            <div\n              data-popper-arrow\n              ref={setArrowElement}\n              className={FeatureHighlightPointerArrowCSS}\n              style={styles.arrow}\n              {...attributes.arrow}\n            />\n          </Flex>,\n          featureHighlightContainer.current || document.body,\n        )\n      : null;\n  },\n);\n\n(\n  FeatureHighlightRoot as typeof FeatureHighlightRoot & {\n    displayName: string;\n  }\n).displayName = COMPONENT_NAME;\n\n/**\n * Use the `FeatureHighlight` to introduce new features to users or guide new users through key functionality, positioned next to the relevant interface element.\n * @public\n */\nexport const FeatureHighlight = Object.assign(FeatureHighlightRoot, {\n  Title,\n  Visual,\n  Content,\n  Actions,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/content/feature-highlight/FeatureHighlight.sty.js

@@ -1,7 +1,7 @@
 import "./FeatureHighlight.css";
-var FeatureHighlightCloseButtonCSS = "_1t60p5x2-3-13-3";
-var FeatureHighlightPointerArrowCSS = "_1t60p5x1-3-13-3";
-var FeatureHighlightScrollContainerCSS = "_1t60p5x0-3-13-3";
+var FeatureHighlightCloseButtonCSS = "_1t60p5x2-3-14-1";
+var FeatureHighlightPointerArrowCSS = "_1t60p5x1-3-14-1";
+var FeatureHighlightScrollContainerCSS = "_1t60p5x0-3-14-1";
 export {
   FeatureHighlightCloseButtonCSS,
   FeatureHighlightPointerArrowCSS,

package/esm/content/feature-highlight/FeatureHighlight.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/feature-highlight/FeatureHighlight.css.ts"],
-  "sourcesContent": ["import './FeatureHighlight.css';\nexport var FeatureHighlightCloseButtonCSS = '_1t60p5x2-3-13-3';\nexport var FeatureHighlightPointerArrowCSS = '_1t60p5x1-3-13-3';\nexport var FeatureHighlightScrollContainerCSS = '_1t60p5x0-3-13-3';"],
+  "sourcesContent": ["import './FeatureHighlight.css';\nexport var FeatureHighlightCloseButtonCSS = '_1t60p5x2-3-14-1';\nexport var FeatureHighlightPointerArrowCSS = '_1t60p5x1-3-14-1';\nexport var FeatureHighlightScrollContainerCSS = '_1t60p5x0-3-14-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,iCAAiC;AACrC,IAAI,kCAAkC;AACtC,IAAI,qCAAqC;",
   "names": []
 }

package/esm/content/health-indicator/Label.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/health-indicator/Label.tsx"],
-  "sourcesContent": ["import { forwardRef } from 'react';\n\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from '../../core/utils/can-receive-default-text-format.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { Text } from '../../typography/text/Text.js';\n\n//#region Typings\n/**\n * Accepted properties for the HealthIndicator Label.\n * @public\n */\nexport interface HealthIndicatorLabelProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId {}\n//#endregion\n\n/**\n * The label of the HealthIndicator component.\n * @public\n */\nexport const Label = forwardRef<HTMLDivElement, HealthIndicatorLabelProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      ...remainingProps\n    }: HealthIndicatorLabelProps = props;\n    const childIsText = _canReceiveDefaultTextFormat(children);\n\n    return (\n      <Flex\n        data-testid={dataTestId}\n        ref={forwardedRef}\n        className={consumerClassName}\n        style={consumerStyle}\n        {...remainingProps}\n      >\n        {childIsText ? <Text>{children}</Text> : children}\n      </Flex>\n    );\n  },\n);\n\n(Label as typeof Label & { displayName: string }).displayName =\n  'HealthIndicator.Label';\n"],
-  "mappings": "AA2CuB;AA3CvB,SAAS,kBAAkB;AAK3B,SAAS,+BAA+B,oCAAoC;AAC5E,SAAS,YAAY;AACrB,SAAS,YAAY;AAiBd,MAAM,QAAQ;AAAA,EACnB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,GAAG;AAAA,IACL,IAA+B;AAC/B,UAAM,cAAc,6BAA6B,QAAQ;AAEzD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb,KAAK;AAAA,QACL,WAAW;AAAA,QACX,OAAO;AAAA,QACN,GAAG;AAAA,QAEH,wBAAc,oBAAC,QAAM,UAAS,IAAU;AAAA;AAAA,IAC3C;AAAA,EAEJ;AACF;AAEC,MAAiD,cAChD;",
+  "sourcesContent": ["import { forwardRef } from 'react';\n\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from '../../core/utils/can-receive-default-text-format.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { Text } from '../../typography/text/Text.js';\n\n//#region Typings\n/**\n * Accepted properties for the HealthIndicator Label.\n * @public\n */\nexport interface HealthIndicatorLabelProps\n  extends WithChildren, StylingProps, DataTestId {}\n//#endregion\n\n/**\n * The label of the HealthIndicator component.\n * @public\n */\nexport const Label = forwardRef<HTMLDivElement, HealthIndicatorLabelProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      ...remainingProps\n    }: HealthIndicatorLabelProps = props;\n    const childIsText = _canReceiveDefaultTextFormat(children);\n\n    return (\n      <Flex\n        data-testid={dataTestId}\n        ref={forwardedRef}\n        className={consumerClassName}\n        style={consumerStyle}\n        {...remainingProps}\n      >\n        {childIsText ? <Text>{children}</Text> : children}\n      </Flex>\n    );\n  },\n);\n\n(Label as typeof Label & { displayName: string }).displayName =\n  'HealthIndicator.Label';\n"],
+  "mappings": "AAyCuB;AAzCvB,SAAS,kBAAkB;AAK3B,SAAS,+BAA+B,oCAAoC;AAC5E,SAAS,YAAY;AACrB,SAAS,YAAY;AAed,MAAM,QAAQ;AAAA,EACnB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,GAAG;AAAA,IACL,IAA+B;AAC/B,UAAM,cAAc,6BAA6B,QAAQ;AAEzD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb,KAAK;AAAA,QACL,WAAW;AAAA,QACX,OAAO;AAAA,QACN,GAAG;AAAA,QAEH,wBAAc,oBAAC,QAAM,UAAS,IAAU;AAAA;AAAA,IAC3C;AAAA,EAEJ;AACF;AAEC,MAAiD,cAChD;",
   "names": []
 }

package/esm/content/health-indicator/Visual.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/health-indicator/Visual.tsx"],
-  "sourcesContent": ["import { forwardRef } from 'react';\n\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 { Flex } from '../../layouts/flex/Flex.js';\n\n//#region Typings\n/**\n * Accepted properties for the HealthIndicator Visual.\n * @public\n */\nexport interface HealthIndicatorVisualProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId {}\n//#endregion\n\n/**\n * The HealthIndicator Visual component represents the custom visualization of the indicator.\n * @public\n */\nexport const Visual = forwardRef<HTMLDivElement, HealthIndicatorVisualProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      ...remainingProps\n    }: HealthIndicatorVisualProps = props;\n\n    return (\n      <Flex\n        data-testid={dataTestId}\n        ref={forwardedRef}\n        className={consumerClassName}\n        style={consumerStyle}\n        {...remainingProps}\n      >\n        {children}\n      </Flex>\n    );\n  },\n);\n\n(Visual as typeof Visual & { displayName: string }).displayName =\n  'HealthIndicator.Visual';\n"],
-  "mappings": "AAiCM;AAjCN,SAAS,kBAAkB;AAK3B,SAAS,YAAY;AAiBd,MAAM,SAAS;AAAA,EACpB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,GAAG;AAAA,IACL,IAAgC;AAEhC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb,KAAK;AAAA,QACL,WAAW;AAAA,QACX,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,OAAmD,cAClD;",
+  "sourcesContent": ["import { forwardRef } from 'react';\n\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 { Flex } from '../../layouts/flex/Flex.js';\n\n//#region Typings\n/**\n * Accepted properties for the HealthIndicator Visual.\n * @public\n */\nexport interface HealthIndicatorVisualProps\n  extends WithChildren, StylingProps, DataTestId {}\n//#endregion\n\n/**\n * The HealthIndicator Visual component represents the custom visualization of the indicator.\n * @public\n */\nexport const Visual = forwardRef<HTMLDivElement, HealthIndicatorVisualProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      ...remainingProps\n    }: HealthIndicatorVisualProps = props;\n\n    return (\n      <Flex\n        data-testid={dataTestId}\n        ref={forwardedRef}\n        className={consumerClassName}\n        style={consumerStyle}\n        {...remainingProps}\n      >\n        {children}\n      </Flex>\n    );\n  },\n);\n\n(Visual as typeof Visual & { displayName: string }).displayName =\n  'HealthIndicator.Visual';\n"],
+  "mappings": "AA+BM;AA/BN,SAAS,kBAAkB;AAK3B,SAAS,YAAY;AAed,MAAM,SAAS;AAAA,EACpB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,GAAG;AAAA,IACL,IAAgC;AAEhC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb,KAAK;AAAA,QACL,WAAW;AAAA,QACX,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,OAAmD,cAClD;",
   "names": []
 }