@dynatrace/strato-components 0.85.10 → 0.85.32

package/layouts/types/layout.types.d.ts

@@ -0,0 +1,64 @@
+import type { CSSProperties } from 'react';
+import { SpacingProps } from '../../styles/getSpacingSprinkles.js';
+import type { MarginProperties, SpacingProperties } from '../../styles/sprinkle-properties.js';
+/**
+ * Type for layout size CSS properties, picking specific properties from CSSProperties.
+ * @public
+ */
+export type LayoutSizeCSS = Pick<CSSProperties, 'width' | 'minWidth' | 'maxWidth' | 'height' | 'minHeight' | 'maxHeight'>;
+/**
+ * Type for layout styles, including padding, margin, layout size CSS properties, and remaining properties.
+ * @internal
+ */
+export type LayoutStyles = {
+    paddingStyles: PaddingCSS;
+    marginStyles: MarginCSS;
+    layoutSizeStyles: LayoutSizeCSS;
+    remainingProps: unknown;
+};
+/**
+ * Type for layout size CSS properties, picking specific properties from CSSProperties.
+ * @internal
+ */
+export type LayoutSizeProps = LayoutSizeCSS;
+/**
+ * Type for padding CSS properties, picking specific properties from CSSProperties.
+ * @internal
+ */
+export type PaddingCSS = Pick<CSSProperties, 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft'>;
+/**
+ * Type for margin CSS properties, picking specific properties from CSSProperties.
+ * @internal
+ */
+export type MarginCSS = Pick<CSSProperties, 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft'>;
+/**
+ * Type for default styles, including default padding, margin, and layout size properties.
+ * @internal
+ */
+export type DefaultStyles = {
+    paddingDefaults?: SpacingProps;
+    marginDefaults?: SpacingProps;
+    layoutSizeDefaults?: LayoutSizeProps;
+};
+/**
+ * Type for default padding properties, including individual padding values for each side.
+ * @internal
+ */
+export type DefaultPadding = {
+    padding?: SpacingProperties;
+    paddingTop?: SpacingProperties;
+    paddingRight?: SpacingProperties;
+    paddingBottom?: SpacingProperties;
+    paddingLeft?: SpacingProperties;
+};
+/**
+ * Type for default margin properties, including individual margin values for each side.
+ * @internal
+ */
+export type DefaultMargin = {
+    margin?: MarginProperties;
+    marginTop?: MarginProperties;
+    marginRight?: MarginProperties;
+    marginBottom?: MarginProperties;
+    marginLeft?: MarginProperties;
+};

package/layouts/types/layout.types.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var layout_types_exports = {};
+module.exports = __toCommonJS(layout_types_exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynatrace/strato-components",
-  "version": "0.85.10",
+  "version": "0.85.32",
   "private": false,
   "license": "Apache-2.0",
   "lang": "lang/uncompiled",
@@ -71,16 +71,20 @@
     }
   },
   "dependencies": {
-    "@dynatrace-sdk/units": "^0.13.2",
+    "@dynatrace-sdk/units": "^0.14.0",
     "@dynatrace/devkit": "^0.3.2",
     "@formatjs/icu-messageformat-parser": "^2.7.8",
     "@jest/globals": "^29.7.0",
+    "@vanilla-extract/css": "^1.15.5",
+    "@vanilla-extract/dynamic": "^2.1.0",
+    "@vanilla-extract/recipes": "^0.5.5",
+    "@vanilla-extract/sprinkles": "^1.6.3",
     "clsx": "^2.1.1",
     "lodash-es": "^4.17.21",
     "wicg-inert": "^3.1.2",
     "use-resize-observer": "^9.1.0",
     "@dynatrace/strato-design-tokens": "0.20.40",
-    "@dynatrace/strato-icons": "0.39.1"
+    "@dynatrace/strato-icons": "0.39.2"
   },
   "peerDependencies": {
     "@dynatrace-sdk/app-environment": "^1.0.0",
@@ -107,5 +111,8 @@
     "./esm/core/components/app-root/AppRoot.css",
     "./core/components/app-root/AppRoot.sty.js",
     "./esm/core/components/app-root/AppRoot.sty.js"
-  ]
+  ],
+  "dt": {
+    "migrations": []
+  }
 }

package/typography/{BlockQuote → block-quote}/Blockquote.css

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

package/typography/{BlockQuote → block-quote}/Blockquote.d.ts

@@ -13,7 +13,7 @@ export interface BlockquoteProps extends WithChildren, StylingProps, DataTestId,
     cite?: string;
 }
 /**
- * @public
  * The `Blockquote` component wraps longer text blocks and indicates that the passage is quoted from another source.
+ * @public
  */
-export declare const Blockquote: (props: BlockquoteProps & React.RefAttributes<HTMLQuoteElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare const Blockquote: (props: BlockquoteProps & React.RefAttributes<HTMLQuoteElement>) => React.ReactElement | null;

package/typography/{BlockQuote → block-quote}/Blockquote.sty.js

@@ -21,4 +21,4 @@ __export(Blockquote_css_exports, {
 });
 module.exports = __toCommonJS(Blockquote_css_exports);
 var import_Blockquote_css_ts_vanilla = require("./Blockquote.css");
-var blockquoteCSS = "Blockquote_blockquoteCSS__18f615k0";
+var blockquoteCSS = "Blockquote_blockquoteCSS__1knl9z60";

package/{esm/typography/Code → typography/code}/Code.css

@@ -1,4 +1,4 @@
-.Code_codeCSS__1lx0ryl0 {
+.Code_codeCSS__1v51izp0 {
   background: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
   padding-top: var(--dt-spacings-size-0, 0);
   padding-bottom: var(--dt-spacings-size-0, 0);

package/typography/{Code → code}/Code.d.ts

@@ -8,10 +8,10 @@ import type { MaskingProps } from '../../core/types/masking-props.js';
 export interface CodeProps extends WithChildren, StylingProps, DataTestId, MaskingProps {
 }
 /**
- * @public
  * Use the `Code` component to display snippets of code inline. If you want to
  * display a block of code, use the
  * {@link https://developer.dynatrace.com/design/components-preview/content/CodeSnippet/ | `CodeSnippet`}
  * component instead.
+ * @public
  */
-export declare const Code: (props: CodeProps & React.RefAttributes<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare const Code: (props: CodeProps & React.RefAttributes<HTMLElement>) => React.ReactElement | null;

package/typography/{Code → code}/Code.sty.js

@@ -21,4 +21,4 @@ __export(Code_css_exports, {
 });
 module.exports = __toCommonJS(Code_css_exports);
 var import_Code_css_ts_vanilla = require("./Code.css");
-var codeCSS = "Code_codeCSS__1lx0ryl0";
+var codeCSS = "Code_codeCSS__1v51izp0";

package/typography/{Emphasis → emphasis}/Emphasis.css

@@ -1,4 +1,4 @@
-.Emphasis_emphasisCSS__19xtnhr0 {
+.Emphasis_emphasisCSS__1r35rtu0 {
   font-style: italic;
   overflow-wrap: break-word;
 }

package/typography/{Emphasis → emphasis}/Emphasis.d.ts

@@ -8,7 +8,7 @@ import type { MaskingProps } from '../../core/types/masking-props.js';
 export interface EmphasisProps extends WithChildren, StylingProps, DataTestId, MaskingProps {
 }
 /**
- * @public
  * The `Emphasis` component adds visual and semantic emphasis to stressed or essential content.
+ * @public
  */
-export declare const Emphasis: (props: EmphasisProps & React.RefAttributes<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare const Emphasis: (props: EmphasisProps & React.RefAttributes<HTMLElement>) => React.ReactElement | null;

package/typography/{Emphasis → emphasis}/Emphasis.sty.js

@@ -21,4 +21,4 @@ __export(Emphasis_css_exports, {
 });
 module.exports = __toCommonJS(Emphasis_css_exports);
 var import_Emphasis_css_ts_vanilla = require("./Emphasis.css");
-var emphasisCSS = "Emphasis_emphasisCSS__19xtnhr0";
+var emphasisCSS = "Emphasis_emphasisCSS__1r35rtu0";

package/{esm/typography/ExternalLink → typography/external-link}/ExternalLink.css

@@ -1,23 +1,23 @@
-.ExternalLink_externalLinkCSS__8noiqs0 {
+.ExternalLink_externalLinkCSS__1v1skpy0 {
   display: inline-block;
   color: var(--dt-colors-text-primary-default, #454cc9);
   text-decoration: underline;
   overflow-wrap: anywhere;
 }
-.ExternalLink_externalLinkCSS__8noiqs0:hover {
+.ExternalLink_externalLinkCSS__1v1skpy0:hover {
   color: var(--dt-colors-text-primary-default-hover, #3332ae);
 }
-.ExternalLink_externalLinkCSS__8noiqs0:active {
+.ExternalLink_externalLinkCSS__1v1skpy0:active {
   color: var(--dt-colors-text-primary-default-active, #241193);
 }
-.ExternalLink_externalLinkCSS__8noiqs0:focus-visible {
+.ExternalLink_externalLinkCSS__1v1skpy0:focus-visible {
   text-decoration: none;
 }
-.ExternalLink_externalLinkCSS__8noiqs0 > span {
+.ExternalLink_externalLinkCSS__1v1skpy0 > span {
   white-space: nowrap;
   display: inline-flex;
 }
-.ExternalLink_externalLinkCSS__8noiqs0 > span > svg {
+.ExternalLink_externalLinkCSS__1v1skpy0 > span > svg {
   margin-left: var(--dt-spacings-size-2, 2px);
   align-self: center;
   min-width: var(--dt-spacings-size-20, 20px);

package/typography/{ExternalLink → external-link}/ExternalLink.d.ts

@@ -12,10 +12,10 @@ export interface ExternalLinkProps extends WithChildren, StylingProps, DataTestI
     onClick?: MouseEventHandler;
 }
 /**
- * @public
  * Use the `ExternalLink` component to link outside of the
  * Dynatrace platform. For resources within the Dynatrace platform, use the
  * {@link https://developer.dynatrace.com/design/components/typography/Link/ | `Link`}
  * component instead.
+ * @public
  */
-export declare const ExternalLink: (props: ExternalLinkProps & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare const ExternalLink: (props: ExternalLinkProps & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;

package/typography/{ExternalLink → external-link}/ExternalLink.sty.js

@@ -21,4 +21,4 @@ __export(ExternalLink_css_exports, {
 });
 module.exports = __toCommonJS(ExternalLink_css_exports);
 var import_ExternalLink_css_ts_vanilla = require("./ExternalLink.css");
-var externalLinkCSS = "ExternalLink_externalLinkCSS__8noiqs0";
+var externalLinkCSS = "ExternalLink_externalLinkCSS__1v1skpy0";

package/typography/{Heading → heading}/Heading.css

@@ -1,10 +1,10 @@
-.Heading_headingCSS__u4t9450 {
+.Heading_headingCSS__5ei34w0 {
   margin: 0;
   overflow-wrap: break-word;
   font-style: normal;
   color: var(--dt-colors-text-neutral-default, #2b2a58);
 }
-.Heading_headingCSS_visualLevel_1__u4t9451 {
+.Heading_headingCSS_visualLevel_1__5ei34w1 {
   font-family: var(--dt-typography-heading-level-1-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-heading-level-1-size, 32px);
   font-weight: var(--dt-typography-heading-level-1-weight, 600);
@@ -12,7 +12,7 @@
   text-transform: var(--dt-typography-heading-level-1-text-transform, none);
   text-decoration: var(--dt-typography-heading-level-1-text-decoration, none);
 }
-.Heading_headingCSS_visualLevel_2__u4t9452 {
+.Heading_headingCSS_visualLevel_2__5ei34w2 {
   font-family: var(--dt-typography-heading-level-2-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-heading-level-2-size, 28px);
   font-weight: var(--dt-typography-heading-level-2-weight, 600);
@@ -20,7 +20,7 @@
   text-transform: var(--dt-typography-heading-level-2-text-transform, none);
   text-decoration: var(--dt-typography-heading-level-2-text-decoration, none);
 }
-.Heading_headingCSS_visualLevel_3__u4t9453 {
+.Heading_headingCSS_visualLevel_3__5ei34w3 {
   font-family: var(--dt-typography-heading-level-3-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-heading-level-3-size, 24px);
   font-weight: var(--dt-typography-heading-level-3-weight, 600);
@@ -28,7 +28,7 @@
   text-transform: var(--dt-typography-heading-level-3-text-transform, none);
   text-decoration: var(--dt-typography-heading-level-3-text-decoration, none);
 }
-.Heading_headingCSS_visualLevel_4__u4t9454 {
+.Heading_headingCSS_visualLevel_4__5ei34w4 {
   font-family: var(--dt-typography-heading-level-4-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-heading-level-4-size, 20px);
   font-weight: var(--dt-typography-heading-level-4-weight, 600);
@@ -36,7 +36,7 @@
   text-transform: var(--dt-typography-heading-level-4-text-transform, none);
   text-decoration: var(--dt-typography-heading-level-4-text-decoration, none);
 }
-.Heading_headingCSS_visualLevel_5__u4t9455 {
+.Heading_headingCSS_visualLevel_5__5ei34w5 {
   font-family: var(--dt-typography-heading-level-5-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-heading-level-5-size, 16px);
   font-weight: var(--dt-typography-heading-level-5-weight, 600);
@@ -44,7 +44,7 @@
   text-transform: var(--dt-typography-heading-level-5-text-transform, none);
   text-decoration: var(--dt-typography-heading-level-5-text-decoration, none);
 }
-.Heading_headingCSS_visualLevel_6__u4t9456 {
+.Heading_headingCSS_visualLevel_6__5ei34w6 {
   font-family: var(--dt-typography-heading-level-6-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-heading-level-6-size, 14px);
   font-weight: var(--dt-typography-heading-level-6-weight, 600);

package/typography/{Heading → heading}/Heading.d.ts

@@ -2,8 +2,9 @@ import React from 'react';
 import { type DataTestId, type StylingProps, type WithChildren, type MaskingProps } from '../../core/index.js';
 import type { DOMProps } from '../../core/types/dom.js';
 /**
+ * Props used for the Heading component
  * @public
- *  Props used for the Heading component */
+ */
 export interface HeadingProps extends DOMProps, WithChildren, StylingProps, DataTestId, MaskingProps {
     /**
      * The visual level of the heading.
@@ -17,8 +18,8 @@ export interface HeadingProps extends DOMProps, WithChildren, StylingProps, Data
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 /**
- * @public
  * Use the `Heading` to render semantic HTML heading elements (`h1`, `h2`, etc.).
  * The component allows you to independently define both the visual and the semantic level of the heading.
+ * @public
  */
-export declare const Heading: (props: HeadingProps & React.RefAttributes<HTMLHeadingElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare const Heading: (props: HeadingProps & React.RefAttributes<HTMLHeadingElement>) => React.ReactElement | null;

package/typography/{Heading → heading}/Heading.sty.js

@@ -22,4 +22,4 @@ __export(Heading_css_exports, {
 module.exports = __toCommonJS(Heading_css_exports);
 var import_Heading_css_ts_vanilla = require("./Heading.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var headingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "Heading_headingCSS__u4t9450", variantClassNames: { visualLevel: { "1": "Heading_headingCSS_visualLevel_1__u4t9451", "2": "Heading_headingCSS_visualLevel_2__u4t9452", "3": "Heading_headingCSS_visualLevel_3__u4t9453", "4": "Heading_headingCSS_visualLevel_4__u4t9454", "5": "Heading_headingCSS_visualLevel_5__u4t9455", "6": "Heading_headingCSS_visualLevel_6__u4t9456" } }, defaultVariants: {}, compoundVariants: [] });
+var headingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "Heading_headingCSS__5ei34w0", variantClassNames: { visualLevel: { "1": "Heading_headingCSS_visualLevel_1__5ei34w1", "2": "Heading_headingCSS_visualLevel_2__5ei34w2", "3": "Heading_headingCSS_visualLevel_3__5ei34w3", "4": "Heading_headingCSS_visualLevel_4__5ei34w4", "5": "Heading_headingCSS_visualLevel_5__5ei34w5", "6": "Heading_headingCSS_visualLevel_6__5ei34w6" } }, defaultVariants: {}, compoundVariants: [] });

package/typography/{Highlight → highlight}/Highlight.css

@@ -1,4 +1,4 @@
-.Highlight_highlightCSS__1u4tng00 {
+.Highlight_highlightCSS__lajjl30 {
   color: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
   background: var(--dt-colors-background-container-neutral-accent, #5a5b8c);
 }

package/typography/{Highlight → highlight}/Highlight.sty.js

@@ -21,4 +21,4 @@ __export(Highlight_css_exports, {
 });
 module.exports = __toCommonJS(Highlight_css_exports);
 var import_Highlight_css_ts_vanilla = require("./Highlight.css");
-var highlightCSS = "Highlight_highlightCSS__1u4tng00";
+var highlightCSS = "Highlight_highlightCSS__lajjl30";

package/typography/index.d.ts

@@ -1,28 +1,28 @@
-export { Blockquote } from './BlockQuote/Blockquote.js';
-export type { BlockquoteProps } from './BlockQuote/Blockquote.js';
-export { Code } from './Code/Code.js';
-export type { CodeProps } from './Code/Code.js';
-export { Emphasis } from './Emphasis/Emphasis.js';
-export type { EmphasisProps } from './Emphasis/Emphasis.js';
-export { ExternalLink } from './ExternalLink/ExternalLink.js';
-export type { ExternalLinkProps } from './ExternalLink/ExternalLink.js';
-export { Heading } from './Heading/Heading.js';
-export type { HeadingProps } from './Heading/Heading.js';
-export { Highlight } from './Highlight/Highlight.js';
-export type { HighlightProps } from './Highlight/Highlight.js';
-export { Link } from './Link/Link.js';
-export type { LinkProps } from './Link/Link.js';
-export { List } from './List/List.js';
-export type { ListProps } from './List/List.js';
-export { Paragraph } from './Paragraph/Paragraph.js';
-export type { ParagraphProps } from './Paragraph/Paragraph.js';
-export { Strikethrough } from './Strikethrough/Strikethrough.js';
-export type { StrikethroughProps } from './Strikethrough/Strikethrough.js';
-export { Strong } from './Strong/Strong.js';
-export type { StrongProps } from './Strong/Strong.js';
-export { Text } from './Text/Text.js';
-export type { TextOwnProps, TextProps } from './Text/Text.js';
-export { TextEllipsis } from './TextEllipsis/TextEllipsis.js';
-export type { TextEllipsisProps, _TruncationMode, } from './TextEllipsis/TextEllipsis.js';
+export { Blockquote } from './block-quote/Blockquote.js';
+export type { BlockquoteProps } from './block-quote/Blockquote.js';
+export { Code } from './code/Code.js';
+export type { CodeProps } from './code/Code.js';
+export { Emphasis } from './emphasis/Emphasis.js';
+export type { EmphasisProps } from './emphasis/Emphasis.js';
+export { ExternalLink } from './external-link/ExternalLink.js';
+export type { ExternalLinkProps } from './external-link/ExternalLink.js';
+export { Heading } from './heading/Heading.js';
+export type { HeadingProps } from './heading/Heading.js';
+export { Highlight } from './highlight/Highlight.js';
+export type { HighlightProps } from './highlight/Highlight.js';
+export { Link } from './link/Link.js';
+export type { LinkProps } from './link/Link.js';
+export { List } from './list/List.js';
+export type { ListProps } from './list/List.js';
+export { Paragraph } from './paragraph/Paragraph.js';
+export type { ParagraphProps } from './paragraph/Paragraph.js';
+export { Strikethrough } from './strikethrough/Strikethrough.js';
+export type { StrikethroughProps } from './strikethrough/Strikethrough.js';
+export { Strong } from './strong/Strong.js';
+export type { StrongProps } from './strong/Strong.js';
+export { Text } from './text/Text.js';
+export type { TextOwnProps, TextProps } from './text/Text.js';
+export { TextEllipsis } from './text-ellipsis/TextEllipsis.js';
+export type { TextEllipsisProps, _TruncationMode, } from './text-ellipsis/TextEllipsis.js';
 export { _calculateEllipsisInfo, _getTextHeight, _centerEllipsizeText, _getTextWidth, _ELLIPSIS_APPROXIMATION_THRESHOLD, _ELLIPSIS_CHARACTER, } from './utils.js';
 export type { _Font } from './utils.js';

package/typography/index.js

@@ -38,17 +38,17 @@ __export(typography_exports, {
   _getTextWidth: () => import_utils._getTextWidth
 });
 module.exports = __toCommonJS(typography_exports);
-var import_Blockquote = require("./BlockQuote/Blockquote.js");
-var import_Code = require("./Code/Code.js");
-var import_Emphasis = require("./Emphasis/Emphasis.js");
-var import_ExternalLink = require("./ExternalLink/ExternalLink.js");
-var import_Heading = require("./Heading/Heading.js");
-var import_Highlight = require("./Highlight/Highlight.js");
-var import_Link = require("./Link/Link.js");
-var import_List = require("./List/List.js");
-var import_Paragraph = require("./Paragraph/Paragraph.js");
-var import_Strikethrough = require("./Strikethrough/Strikethrough.js");
-var import_Strong = require("./Strong/Strong.js");
-var import_Text = require("./Text/Text.js");
-var import_TextEllipsis = require("./TextEllipsis/TextEllipsis.js");
+var import_Blockquote = require("./block-quote/Blockquote.js");
+var import_Code = require("./code/Code.js");
+var import_Emphasis = require("./emphasis/Emphasis.js");
+var import_ExternalLink = require("./external-link/ExternalLink.js");
+var import_Heading = require("./heading/Heading.js");
+var import_Highlight = require("./highlight/Highlight.js");
+var import_Link = require("./link/Link.js");
+var import_List = require("./list/List.js");
+var import_Paragraph = require("./paragraph/Paragraph.js");
+var import_Strikethrough = require("./strikethrough/Strikethrough.js");
+var import_Strong = require("./strong/Strong.js");
+var import_Text = require("./text/Text.js");
+var import_TextEllipsis = require("./text-ellipsis/TextEllipsis.js");
 var import_utils = require("./utils.js");

package/{esm/typography/Link → typography/link}/Link.css

@@ -1,15 +1,15 @@
-.Link_linkCSS__1ck42do0 {
+.Link_linkCSS__1iksxp40 {
   display: inline-block;
   color: var(--dt-colors-text-primary-default, #454cc9);
   text-decoration: underline;
   overflow-wrap: anywhere;
 }
-.Link_linkCSS__1ck42do0:hover {
+.Link_linkCSS__1iksxp40:hover {
   color: var(--dt-colors-text-primary-default-hover, #3332ae);
 }
-.Link_linkCSS__1ck42do0:active {
+.Link_linkCSS__1iksxp40:active {
   color: var(--dt-colors-text-primary-default-active, #241193);
 }
-.Link_linkCSS__1ck42do0:focus-visible {
+.Link_linkCSS__1iksxp40:focus-visible {
   text-decoration: none;
 }

package/typography/{Link → link}/Link.js

@@ -32,9 +32,9 @@ __export(Link_exports, {
 module.exports = __toCommonJS(Link_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
+var import_Link_css = require("./Link.sty.js");
 var import_core = require("../../core/index.js");
 var import_useFocusRing = require("../../core/styles/useFocusRing.js");
-var import_Link_css = require("../Link/Link.sty.js");
 const Link = /* @__PURE__ */ (0, import_react.forwardRef)(
   ({
     children,

package/typography/{Link → link}/Link.sty.js

@@ -21,4 +21,4 @@ __export(Link_css_exports, {
 });
 module.exports = __toCommonJS(Link_css_exports);
 var import_Link_css_ts_vanilla = require("./Link.css");
-var linkCSS = "Link_linkCSS__1ck42do0";
+var linkCSS = "Link_linkCSS__1iksxp40";

package/typography/{List → list}/List.css

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

package/typography/{List → list}/List.d.ts

@@ -31,9 +31,9 @@ export interface ListProps<TOrdered extends boolean = false> extends WithChildre
     start?: number;
 }
 /**
- * @public
  * The `List` component groups a set of related content in a list and can be arbitrarily nested.
  * List items are preceded by either a consecutive number (for ordered lists) or a bullet point
  * (for unordered lists).
+ * @public
  */
-export declare const List: <TOrdered extends boolean = false>(props: ListProps<TOrdered> & React.RefAttributes<TOrdered extends true ? HTMLOListElement : HTMLUListElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare const List: <TOrdered extends boolean = false>(props: ListProps<TOrdered> & React.RefAttributes<TOrdered extends true ? HTMLOListElement : HTMLUListElement>) => React.ReactElement | null;

package/typography/{List → list}/List.js

@@ -33,7 +33,7 @@ module.exports = __toCommonJS(List_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_List_css = require("./List.sty.js");
-var import_Text = require("../Text/Text.js");
+var import_Text = require("../text/Text.js");
 function interleaveListItems(listItems) {
   const items = [];
   import_react.default.Children.forEach(listItems, (listItem) => {

package/typography/{List → list}/List.sty.js

@@ -22,5 +22,5 @@ __export(List_css_exports, {
 });
 module.exports = __toCommonJS(List_css_exports);
 var import_List_css_ts_vanilla = require("./List.css");
-var listCSS = "List_listCSS__13d6w3n0";
-var listItemCSS = "List_listItemCSS__13d6w3n1";
+var listCSS = "List_listCSS__16276mt0";
+var listItemCSS = "List_listItemCSS__16276mt1";

package/typography/{Paragraph → paragraph}/Paragraph.css

@@ -1,17 +1,17 @@
-.Paragraph_paragraphCSS__42lz6l0 {
+.Paragraph_paragraphCSS__487p2n0 {
   margin-top: 0;
   margin-bottom: 0;
   overflow-wrap: break-word;
   color: var(--dt-colors-text-neutral-default, #2b2a58);
   font-style: normal;
 }
-.Paragraph_paragraphCSS_ellipsis_singleLine__42lz6l1 {
+.Paragraph_paragraphCSS_ellipsis_singleLine__487p2n1 {
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
-.Paragraph_paragraphCSS_ellipsis_multiLine__42lz6l2 {
+.Paragraph_paragraphCSS_ellipsis_multiLine__487p2n2 {
   display: -webkit-box;
   -webkit-line-clamp: var(--strato-ellipsis-line-clamp);
   -webkit-box-orient: vertical;

package/typography/{Paragraph → paragraph}/Paragraph.d.ts

@@ -13,7 +13,7 @@ export interface ParagraphProps extends WithChildren, DOMProps, StylingProps, Da
     maxLines?: number;
 }
 /**
- * @public
  * The `Paragraph` component displays a block of text with the default text style and supports text truncation.
+ * @public
  */
-export declare const Paragraph: (props: ParagraphProps & React.RefAttributes<HTMLParagraphElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare const Paragraph: (props: ParagraphProps & React.RefAttributes<HTMLParagraphElement>) => React.ReactElement | null;

package/typography/{Paragraph → paragraph}/Paragraph.sty.js

@@ -22,4 +22,4 @@ __export(Paragraph_css_exports, {
 module.exports = __toCommonJS(Paragraph_css_exports);
 var import_Paragraph_css_ts_vanilla = require("./Paragraph.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var paragraphCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "Paragraph_paragraphCSS__42lz6l0", variantClassNames: { ellipsis: { singleLine: "Paragraph_paragraphCSS_ellipsis_singleLine__42lz6l1", multiLine: "Paragraph_paragraphCSS_ellipsis_multiLine__42lz6l2" } }, defaultVariants: {}, compoundVariants: [] });
+var paragraphCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "Paragraph_paragraphCSS__487p2n0", variantClassNames: { ellipsis: { singleLine: "Paragraph_paragraphCSS_ellipsis_singleLine__487p2n1", multiLine: "Paragraph_paragraphCSS_ellipsis_multiLine__487p2n2" } }, defaultVariants: {}, compoundVariants: [] });

package/{esm/typography/Strikethrough → typography/strikethrough}/Strikethrough.css

@@ -1,4 +1,4 @@
-.Strikethrough_strikethroughCSS__1178y080 {
+.Strikethrough_strikethroughCSS__4oao6y0 {
   text-decoration: line-through;
   text-decoration-style: solid;
   overflow-wrap: break-word;

package/typography/{Strikethrough → strikethrough}/Strikethrough.d.ts

@@ -4,12 +4,12 @@ import type { MaskingProps } from '../../core/types/masking-props.js';
 /**
  * The props for the Strikethrough component.
  * @public
- *  */
+ */
 export interface StrikethroughProps extends WithChildren, StylingProps, DataTestId, MaskingProps {
 }
 /**
- * @public
  * The `Strikethrough` component renders text with a line through it. Use it to
  * represent things that are no longer relevant or accurate.
+ * @public
  */
-export declare const Strikethrough: (props: StrikethroughProps & React.RefAttributes<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare const Strikethrough: (props: StrikethroughProps & React.RefAttributes<HTMLElement>) => React.ReactElement | null;

package/typography/{Strikethrough → strikethrough}/Strikethrough.sty.js

@@ -21,4 +21,4 @@ __export(Strikethrough_css_exports, {
 });
 module.exports = __toCommonJS(Strikethrough_css_exports);
 var import_Strikethrough_css_ts_vanilla = require("./Strikethrough.css");
-var strikethroughCSS = "Strikethrough_strikethroughCSS__1178y080";
+var strikethroughCSS = "Strikethrough_strikethroughCSS__4oao6y0";

package/{esm/typography/Strong → typography/strong}/Strong.css

@@ -1,4 +1,4 @@
-.Strong_strongCSS__1sqovlt0 {
+.Strong_strongCSS__wxp4dd0 {
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   overflow-wrap: break-word;
 }