@dynatrace/strato-components 3.10.4 → 3.11.1

package/esm/typography/list/List.css

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

package/esm/typography/list/List.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/list/List.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  forwardRef,\n  isValidElement,\n  type ForwardedRef,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\n\nimport { listCSS, listItemCSS } from './List.sty.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { Text } from '../text/Text.js';\n\nconst COMPONENT_NAME = 'List';\n\n/**\n * The props for the Link component.\n * @public\n */\nexport interface ListProps<TOrdered extends boolean = false>\n  extends WithChildren,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /**\n   * Whether the List is ordered or not. This changes whether numbers or bullets are used.\n   * @defaultValue false\n   */\n  ordered?: TOrdered;\n  /**\n   * Sets the text style for the List.\n   * @defaultValue 'base'\n   */\n  textStyle?: 'base' | 'base-emphasized' | 'small' | 'small-emphasized';\n  /**\n   * Sets the text style for the List.\n   * @defaultValue 'text'\n   */\n  fontStyle?: 'text' | 'code';\n  /**\n   * Sets the starting number of the first item in an ordered list.\n   * The value is always treated as an integer (floor).\n   * @defaultValue 1\n   */\n  start?: number;\n}\n\n/** Maps a list of (potentially) nested list items to HTML list structure. */\nfunction interleaveListItems(listItems: ReactNode) {\n  const items: ReactNode[][] = [];\n\n  Children.forEach(listItems, (listItem) => {\n    if (isValidElement(listItem)) {\n      if (listItem.type === List) {\n        if (items.length === 0) {\n          items.push([listItem]);\n        } else {\n          items[items.length - 1].push(listItem);\n        }\n      } else {\n        items.push([listItem]);\n      }\n    }\n  });\n\n  return items.map((values, index) => {\n    const itemKey = `list-item-${getItemKey(values, index)}`;\n    return (\n      <li key={itemKey} className={listItemCSS}>\n        {values}\n      </li>\n    );\n  });\n}\n\n/**\n * Generates a key for a list item. We try to avoid\n * generating [Object object] by looking down levels\n * recursively. If there is an existing key defined in\n * a descendant uses that as part of the key otherwise\n * if we get a string value, use that. Otherwise uses\n * the index if nothing was found.\n * @param values - nodes inside the list item\n * @param index - current zero based index\n * @returns a key generated for the item\n */\nfunction getItemKey(values: ReactNode, index: number): string | number {\n  const isArray = Array.isArray(values);\n  const value = isArray ? values?.[0] : values;\n  if (isValidElement<PropsWithChildren>(value)) {\n    if (value.key) {\n      return value.key;\n    } else if (value.props && value.props.children) {\n      return getItemKey(value.props.children, index);\n    }\n    return value as unknown as string | number;\n  }\n\n  if (value === undefined) {\n    return index;\n  }\n\n  return value as unknown as string | number;\n}\n\n/**\n * The `List` component groups a set of related content in a list and can be arbitrarily nested.\n * List items are preceded by either a consecutive number (for ordered lists) or a bullet point\n * (for unordered lists).\n * @public\n */\nexport const List = /* @__PURE__ */ forwardRef(\n  <TOrdered extends boolean = false>(\n    props: ListProps<TOrdered>,\n    ref: ForwardedRef<\n      TOrdered extends true ? HTMLOListElement : HTMLUListElement\n    >,\n  ) => {\n    const {\n      children,\n      ordered = undefined,\n      textStyle,\n      fontStyle,\n      start = 1,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      className: consumerClassName,\n      style: consumerStyle,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n    return (\n      <Text\n        ref={ref}\n        as={ordered ? 'ol' : 'ul'}\n        {...(ordered && {\n          start,\n        })}\n        textStyle={textStyle}\n        fontStyle={fontStyle}\n        className={clsx(listCSS, 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        {interleaveListItems(children)}\n      </Text>\n    );\n  },\n);\n\n(List as typeof List & { displayName: string }).displayName = COMPONENT_NAME;\n"],
-  "mappings": "AA+EM;AA/EN,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAEP,SAAS,SAAS,mBAAmB;AACrC,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,2BAA2B;AAOpC,SAAS,YAAY;AAErB,MAAM,iBAAiB;AAqCvB,SAAS,oBAAoB,WAAsB;AACjD,QAAM,QAAuB,CAAC;AAE9B,WAAS,QAAQ,WAAW,CAAC,aAAa;AACxC,QAAI,eAAe,QAAQ,GAAG;AAC5B,UAAI,SAAS,SAAS,MAAM;AAC1B,YAAI,MAAM,WAAW,GAAG;AACtB,gBAAM,KAAK,CAAC,QAAQ,CAAC;AAAA,QACvB,OAAO;AACL,gBAAM,MAAM,SAAS,CAAC,EAAE,KAAK,QAAQ;AAAA,QACvC;AAAA,MACF,OAAO;AACL,cAAM,KAAK,CAAC,QAAQ,CAAC;AAAA,MACvB;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO,MAAM,IAAI,CAAC,QAAQ,UAAU;AAClC,UAAM,UAAU,aAAa,WAAW,QAAQ,KAAK,CAAC;AACtD,WACE,oBAAC,QAAiB,WAAW,aAC1B,oBADM,OAET;AAAA,EAEJ,CAAC;AACH;AAaA,SAAS,WAAW,QAAmB,OAAgC;AACrE,QAAM,UAAU,MAAM,QAAQ,MAAM;AACpC,QAAM,QAAQ,UAAU,SAAS,CAAC,IAAI;AACtC,MAAI,eAAkC,KAAK,GAAG;AAC5C,QAAI,MAAM,KAAK;AACb,aAAO,MAAM;AAAA,IACf,WAAW,MAAM,SAAS,MAAM,MAAM,UAAU;AAC9C,aAAO,WAAW,MAAM,MAAM,UAAU,KAAK;AAAA,IAC/C;AACA,WAAO;AAAA,EACT;AAEA,MAAI,UAAU,QAAW;AACvB,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAQO,MAAM,OAAuB;AAAA,EAClC,CACE,OACA,QAGG;AACH,UAAM;AAAA,MACJ;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,WAAW;AAAA,MACX,OAAO;AAAA,MACP,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,UAAM,oBAAoB,qBAAqB,SAAS;AACxD,UAAM,eAAe,oBAAoB,WAAW,iBAAiB;AAErE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,IAAI,UAAU,OAAO;AAAA,QACpB,GAAI,WAAW;AAAA,UACd;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,KAAK,SAAS,iBAAiB;AAAA,QAC1C,OAAO;AAAA,QACP,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QACjB,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAElB,8BAAoB,QAAQ;AAAA;AAAA,IAC/B;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  forwardRef,\n  isValidElement,\n  type ForwardedRef,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\n\nimport { listCSS, listItemCSS } from './List.sty.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { DOMProps } from '../../core/types/dom.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 { Text } from '../text/Text.js';\n\nconst COMPONENT_NAME = 'List';\n\n/**\n * The props for the Link component.\n * @public\n */\nexport interface ListProps<TOrdered extends boolean = false>\n  extends WithChildren,\n    DOMProps,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /**\n   * Whether the List is ordered or not. This changes whether numbers or bullets are used.\n   * @defaultValue false\n   */\n  ordered?: TOrdered;\n  /**\n   * Sets the text style for the List.\n   * @defaultValue 'base'\n   */\n  textStyle?: 'base' | 'base-emphasized' | 'small' | 'small-emphasized';\n  /**\n   * Sets the text style for the List.\n   * @defaultValue 'text'\n   */\n  fontStyle?: 'text' | 'code';\n  /**\n   * Sets the starting number of the first item in an ordered list.\n   * The value is always treated as an integer (floor).\n   * @defaultValue 1\n   */\n  start?: number;\n}\n\n/** Maps a list of (potentially) nested list items to HTML list structure. */\nfunction interleaveListItems(listItems: ReactNode) {\n  const items: ReactNode[][] = [];\n\n  Children.forEach(listItems, (listItem) => {\n    if (isValidElement(listItem)) {\n      if (listItem.type === List) {\n        if (items.length === 0) {\n          items.push([listItem]);\n        } else {\n          items[items.length - 1].push(listItem);\n        }\n      } else {\n        items.push([listItem]);\n      }\n    }\n  });\n\n  return items.map((values, index) => {\n    const itemKey = `list-item-${getItemKey(values, index)}`;\n    return (\n      <li key={itemKey} className={listItemCSS}>\n        {values}\n      </li>\n    );\n  });\n}\n\n/**\n * Generates a key for a list item. We try to avoid\n * generating [Object object] by looking down levels\n * recursively. If there is an existing key defined in\n * a descendant uses that as part of the key otherwise\n * if we get a string value, use that. Otherwise uses\n * the index if nothing was found.\n * @param values - nodes inside the list item\n * @param index - current zero based index\n * @returns a key generated for the item\n */\nfunction getItemKey(values: ReactNode, index: number): string | number {\n  const isArray = Array.isArray(values);\n  const value = isArray ? values?.[0] : values;\n  if (isValidElement<PropsWithChildren>(value)) {\n    if (value.key) {\n      return value.key;\n    } else if (value.props && value.props.children) {\n      return getItemKey(value.props.children, index);\n    }\n    return value as unknown as string | number;\n  }\n\n  if (value === undefined) {\n    return index;\n  }\n\n  return value as unknown as string | number;\n}\n\n/**\n * The `List` component groups a set of related content in a list and can be arbitrarily nested.\n * List items are preceded by either a consecutive number (for ordered lists) or a bullet point\n * (for unordered lists).\n * @public\n */\nexport const List = /* @__PURE__ */ forwardRef(\n  <TOrdered extends boolean = false>(\n    props: ListProps<TOrdered>,\n    ref: ForwardedRef<\n      TOrdered extends true ? HTMLOListElement : HTMLUListElement\n    >,\n  ) => {\n    const {\n      children,\n      ordered = undefined,\n      textStyle,\n      fontStyle,\n      start = 1,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      className: consumerClassName,\n      style: consumerStyle,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n    return (\n      <Text\n        ref={ref}\n        as={ordered ? 'ol' : 'ul'}\n        {...(ordered && {\n          start,\n        })}\n        textStyle={textStyle}\n        fontStyle={fontStyle}\n        className={clsx(listCSS, 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        {interleaveListItems(children)}\n      </Text>\n    );\n  },\n);\n\n(List as typeof List & { displayName: string }).displayName = COMPONENT_NAME;\n"],
+  "mappings": "AAiFM;AAjFN,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAEP,SAAS,SAAS,mBAAmB;AACrC,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,2BAA2B;AAQpC,SAAS,YAAY;AAErB,MAAM,iBAAiB;AAsCvB,SAAS,oBAAoB,WAAsB;AACjD,QAAM,QAAuB,CAAC;AAE9B,WAAS,QAAQ,WAAW,CAAC,aAAa;AACxC,QAAI,eAAe,QAAQ,GAAG;AAC5B,UAAI,SAAS,SAAS,MAAM;AAC1B,YAAI,MAAM,WAAW,GAAG;AACtB,gBAAM,KAAK,CAAC,QAAQ,CAAC;AAAA,QACvB,OAAO;AACL,gBAAM,MAAM,SAAS,CAAC,EAAE,KAAK,QAAQ;AAAA,QACvC;AAAA,MACF,OAAO;AACL,cAAM,KAAK,CAAC,QAAQ,CAAC;AAAA,MACvB;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO,MAAM,IAAI,CAAC,QAAQ,UAAU;AAClC,UAAM,UAAU,aAAa,WAAW,QAAQ,KAAK,CAAC;AACtD,WACE,oBAAC,QAAiB,WAAW,aAC1B,oBADM,OAET;AAAA,EAEJ,CAAC;AACH;AAaA,SAAS,WAAW,QAAmB,OAAgC;AACrE,QAAM,UAAU,MAAM,QAAQ,MAAM;AACpC,QAAM,QAAQ,UAAU,SAAS,CAAC,IAAI;AACtC,MAAI,eAAkC,KAAK,GAAG;AAC5C,QAAI,MAAM,KAAK;AACb,aAAO,MAAM;AAAA,IACf,WAAW,MAAM,SAAS,MAAM,MAAM,UAAU;AAC9C,aAAO,WAAW,MAAM,MAAM,UAAU,KAAK;AAAA,IAC/C;AACA,WAAO;AAAA,EACT;AAEA,MAAI,UAAU,QAAW;AACvB,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAQO,MAAM,OAAuB;AAAA,EAClC,CACE,OACA,QAGG;AACH,UAAM;AAAA,MACJ;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,WAAW;AAAA,MACX,OAAO;AAAA,MACP,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,UAAM,oBAAoB,qBAAqB,SAAS;AACxD,UAAM,eAAe,oBAAoB,WAAW,iBAAiB;AAErE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,IAAI,UAAU,OAAO;AAAA,QACpB,GAAI,WAAW;AAAA,UACd;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,KAAK,SAAS,iBAAiB;AAAA,QAC1C,OAAO;AAAA,QACP,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QACjB,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAElB,8BAAoB,QAAQ;AAAA;AAAA,IAC/B;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
   "names": []
 }

package/esm/typography/list/List.sty.js

@@ -1,6 +1,6 @@
 import "./List.css";
-var listCSS = "_16276mt0-3-10-4";
-var listItemCSS = "_16276mt1-3-10-4";
+var listCSS = "_16276mt0-3-11-1";
+var listItemCSS = "_16276mt1-3-11-1";
 export {
   listCSS,
   listItemCSS

package/esm/typography/list/List.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/list/List.css.ts"],
-  "sourcesContent": ["import './List.css';\nexport var listCSS = '_16276mt0-3-10-4';\nexport var listItemCSS = '_16276mt1-3-10-4';"],
+  "sourcesContent": ["import './List.css';\nexport var listCSS = '_16276mt0-3-11-1';\nexport var listItemCSS = '_16276mt1-3-11-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;AACd,IAAI,cAAc;",
   "names": []
 }

package/esm/typography/paragraph/Paragraph.css

@@ -1,17 +1,17 @@
-._487p2n0-3-10-4 {
+._487p2n0-3-11-1 {
   margin-top: 0;
   margin-bottom: 0;
   overflow-wrap: break-word;
   color: inherit;
   font-style: normal;
 }
-._487p2n1-3-10-4 {
+._487p2n1-3-11-1 {
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
-._487p2n2-3-10-4 {
+._487p2n2-3-11-1 {
   display: -webkit-box;
   -webkit-line-clamp: var(--strato-ellipsis-line-clamp);
   -webkit-box-orient: vertical;

package/esm/typography/paragraph/Paragraph.sty.js

@@ -1,6 +1,6 @@
 import "./Paragraph.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var paragraph = _7a468({ defaultClassName: "_487p2n0-3-10-4", variantClassNames: { ellipsis: { singleLine: "_487p2n1-3-10-4", multiLine: "_487p2n2-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
+var paragraph = _7a468({ defaultClassName: "_487p2n0-3-11-1", variantClassNames: { ellipsis: { singleLine: "_487p2n1-3-11-1", multiLine: "_487p2n2-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   paragraph
 };

package/esm/typography/paragraph/Paragraph.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/paragraph/Paragraph.css.ts"],
-  "sourcesContent": ["import './Paragraph.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var paragraph = _7a468({defaultClassName:'_487p2n0-3-10-4',variantClassNames:{ellipsis:{singleLine:'_487p2n1-3-10-4',multiLine:'_487p2n2-3-10-4'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './Paragraph.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var paragraph = _7a468({defaultClassName:'_487p2n0-3-11-1',variantClassNames:{ellipsis:{singleLine:'_487p2n1-3-11-1',multiLine:'_487p2n2-3-11-1'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,YAAY,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,YAAW,mBAAkB,WAAU,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/typography/strikethrough/Strikethrough.css

@@ -1,4 +1,4 @@
-._4oao6y0-3-10-4 {
+._4oao6y0-3-11-1 {
   text-decoration: line-through;
   text-decoration-style: solid;
   overflow-wrap: break-word;

package/esm/typography/strikethrough/Strikethrough.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/strikethrough/Strikethrough.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { strikethroughCSS } from './Strikethrough.sty.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\n\nconst COMPONENT_NAME = 'Strikethrough';\n\n/**\n * The props for the Strikethrough component.\n * @public\n */\nexport interface StrikethroughProps\n  extends WithChildren,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {}\n\n/**\n * The `Strikethrough` component renders text with a line through it. Use it to\n * represent things that are no longer relevant or accurate.\n * @public\n */\nexport const Strikethrough = /* @__PURE__ */ forwardRef<\n  HTMLElement,\n  StrikethroughProps\n>((props, ref) => {\n  const {\n    children,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  } = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n  const ariaLabelingProps = useAriaLabelingProps(restProps);\n  const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n  return (\n    <s\n      ref={ref}\n      className={clsx(strikethroughCSS, consumerClassName)}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      {...ariaLabelingProps}\n      {...behavioralTrackingProps}\n      {...forwardProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      {children}\n    </s>\n  );\n});\n(Strikethrough as typeof Strikethrough & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "AAqDI;AArDJ,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,2BAA2B;AAQpC,MAAM,iBAAiB;AAmBhB,MAAM,gBAAgC,2BAG3C,CAAC,OAAO,QAAQ;AAChB,QAAM;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,QAAM,oBAAoB,qBAAqB,SAAS;AACxD,QAAM,eAAe,oBAAoB,WAAW,iBAAiB;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,KAAK,kBAAkB,iBAAiB;AAAA,MACnD,OAAO;AAAA,MACP,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MACjB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAElB;AAAA;AAAA,EACH;AAEJ,CAAC;AACA,cAAiE,cAChE;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { strikethroughCSS } from './Strikethrough.sty.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { DOMProps } from '../../core/types/dom.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 = 'Strikethrough';\n\n/**\n * The props for the Strikethrough component.\n * @public\n */\nexport interface StrikethroughProps\n  extends WithChildren,\n    DOMProps,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {}\n\n/**\n * The `Strikethrough` component renders text with a line through it. Use it to\n * represent things that are no longer relevant or accurate.\n * @public\n */\nexport const Strikethrough = /* @__PURE__ */ forwardRef<\n  HTMLElement,\n  StrikethroughProps\n>((props, ref) => {\n  const {\n    children,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  } = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n  const ariaLabelingProps = useAriaLabelingProps(restProps);\n  const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n  return (\n    <s\n      ref={ref}\n      className={clsx(strikethroughCSS, consumerClassName)}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      {...ariaLabelingProps}\n      {...behavioralTrackingProps}\n      {...forwardProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      {children}\n    </s>\n  );\n});\n(Strikethrough as typeof Strikethrough & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "AAuDI;AAvDJ,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,2BAA2B;AASpC,MAAM,iBAAiB;AAoBhB,MAAM,gBAAgC,2BAG3C,CAAC,OAAO,QAAQ;AAChB,QAAM;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,QAAM,oBAAoB,qBAAqB,SAAS;AACxD,QAAM,eAAe,oBAAoB,WAAW,iBAAiB;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,KAAK,kBAAkB,iBAAiB;AAAA,MACnD,OAAO;AAAA,MACP,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MACjB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAElB;AAAA;AAAA,EACH;AAEJ,CAAC;AACA,cAAiE,cAChE;",
   "names": []
 }

package/esm/typography/strikethrough/Strikethrough.sty.js

@@ -1,5 +1,5 @@
 import "./Strikethrough.css";
-var strikethroughCSS = "_4oao6y0-3-10-4";
+var strikethroughCSS = "_4oao6y0-3-11-1";
 export {
   strikethroughCSS
 };

package/esm/typography/strikethrough/Strikethrough.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/strikethrough/Strikethrough.css.ts"],
-  "sourcesContent": ["import './Strikethrough.css';\nexport var strikethroughCSS = '_4oao6y0-3-10-4';"],
+  "sourcesContent": ["import './Strikethrough.css';\nexport var strikethroughCSS = '_4oao6y0-3-11-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,mBAAmB;",
   "names": []
 }

package/esm/typography/strong/Strong.css

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

package/esm/typography/strong/Strong.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/strong/Strong.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { strongCSS } from './Strong.sty.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\n\nconst COMPONENT_NAME = 'Strong';\n\n/**\n * The props for the Strong component.\n * @public\n *  */\nexport interface StrongProps\n  extends WithChildren,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {}\n\n/**\n * Use the `Strong` component to render text in bold type to emphasize it.\n * @public\n */\nexport const Strong = /* @__PURE__ */ forwardRef<HTMLElement, StrongProps>(\n  (props, ref) => {\n    const {\n      children,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      className: consumerClassName,\n      style: consumerStyle,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n    return (\n      <strong\n        ref={ref}\n        className={clsx(strongCSS, consumerClassName)}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        {...ariaLabelingProps}\n        {...behavioralTrackingProps}\n        {...forwardProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        {children}\n      </strong>\n    );\n  },\n);\n\n(Strong as typeof Strong & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "AAkDM;AAlDN,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,SAAS,iBAAiB;AAC1B,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,2BAA2B;AAQpC,MAAM,iBAAiB;AAkBhB,MAAM,SAAyB;AAAA,EACpC,CAAC,OAAO,QAAQ;AACd,UAAM;AAAA,MACJ;AAAA,MACA,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,WAAW;AAAA,MACX,OAAO;AAAA,MACP,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,UAAM,oBAAoB,qBAAqB,SAAS;AACxD,UAAM,eAAe,oBAAoB,WAAW,iBAAiB;AAErE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,WAAW,iBAAiB;AAAA,QAC5C,OAAO;AAAA,QACP,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QACjB,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAElB;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,OAAmD,cAClD;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { strongCSS } from './Strong.sty.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { DOMProps } from '../../core/types/dom.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 = 'Strong';\n\n/**\n * The props for the Strong component.\n * @public\n *  */\nexport interface StrongProps\n  extends WithChildren,\n    DOMProps,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {}\n\n/**\n * Use the `Strong` component to render text in bold type to emphasize it.\n * @public\n */\nexport const Strong = /* @__PURE__ */ forwardRef<HTMLElement, StrongProps>(\n  (props, ref) => {\n    const {\n      children,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      className: consumerClassName,\n      style: consumerStyle,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n    return (\n      <strong\n        ref={ref}\n        className={clsx(strongCSS, consumerClassName)}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        {...ariaLabelingProps}\n        {...behavioralTrackingProps}\n        {...forwardProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        {children}\n      </strong>\n    );\n  },\n);\n\n(Strong as typeof Strong & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "AAoDM;AApDN,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,SAAS,iBAAiB;AAC1B,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,2BAA2B;AASpC,MAAM,iBAAiB;AAmBhB,MAAM,SAAyB;AAAA,EACpC,CAAC,OAAO,QAAQ;AACd,UAAM;AAAA,MACJ;AAAA,MACA,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,WAAW;AAAA,MACX,OAAO;AAAA,MACP,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,UAAM,oBAAoB,qBAAqB,SAAS;AACxD,UAAM,eAAe,oBAAoB,WAAW,iBAAiB;AAErE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,WAAW,iBAAiB;AAAA,QAC5C,OAAO;AAAA,QACP,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QACjB,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAElB;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,OAAmD,cAClD;",
   "names": []
 }

package/esm/typography/strong/Strong.sty.js

@@ -1,5 +1,5 @@
 import "./Strong.css";
-var strongCSS = "_wxp4dd0-3-10-4";
+var strongCSS = "_wxp4dd0-3-11-1";
 export {
   strongCSS
 };

package/esm/typography/strong/Strong.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/strong/Strong.css.ts"],
-  "sourcesContent": ["import './Strong.css';\nexport var strongCSS = '_wxp4dd0-3-10-4';"],
+  "sourcesContent": ["import './Strong.css';\nexport var strongCSS = '_wxp4dd0-3-11-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

package/esm/typography/text/Text.css

@@ -1,16 +1,16 @@
-._rup8ap0-3-10-4 {
+._rup8ap0-3-11-1 {
   margin-top: 0;
   margin-bottom: 0;
   min-width: 0;
   overflow-wrap: break-word;
 }
-._rup8ap1-3-10-4 {
+._rup8ap1-3-11-1 {
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
-._rup8ap2-3-10-4 {
+._rup8ap2-3-11-1 {
   display: -webkit-box;
   -webkit-line-clamp: var(--strato-ellipsis-line-clamp);
   -webkit-box-orient: vertical;

package/esm/typography/text/Text.sty.js

@@ -1,6 +1,6 @@
 import "./Text.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var text = _7a468({ defaultClassName: "_rup8ap0-3-10-4", variantClassNames: { ellipsis: { singleLine: "_rup8ap1-3-10-4", multiLine: "_rup8ap2-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
+var text = _7a468({ defaultClassName: "_rup8ap0-3-11-1", variantClassNames: { ellipsis: { singleLine: "_rup8ap1-3-11-1", multiLine: "_rup8ap2-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   text
 };

package/esm/typography/text/Text.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/text/Text.css.ts"],
-  "sourcesContent": ["import './Text.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var text = _7a468({defaultClassName:'_rup8ap0-3-10-4',variantClassNames:{ellipsis:{singleLine:'_rup8ap1-3-10-4',multiLine:'_rup8ap2-3-10-4'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './Text.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var text = _7a468({defaultClassName:'_rup8ap0-3-11-1',variantClassNames:{ellipsis:{singleLine:'_rup8ap1-3-11-1',multiLine:'_rup8ap2-3-11-1'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,OAAO,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,YAAW,mBAAkB,WAAU,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/typography/text-ellipsis/TextEllipsis.css

@@ -1,4 +1,4 @@
-._1mnpbqs1-3-10-4 {
+._1mnpbqs1-3-11-1 {
   display: inline-block;
   box-sizing: border-box;
   vertical-align: middle;
@@ -9,18 +9,18 @@
   text-decoration: inherit;
   width: 100%;
 }
-._1mnpbqs2-3-10-4 {
+._1mnpbqs2-3-11-1 {
   text-overflow: ellipsis;
   direction: rtl;
   text-align: left;
 }
-._1mnpbqs2-3-10-4::after, ._1mnpbqs2-3-10-4::before {
+._1mnpbqs2-3-11-1::after, ._1mnpbqs2-3-11-1::before {
   content: "‎";
 }
-._1mnpbqs3-3-10-4 {
+._1mnpbqs3-3-11-1 {
   text-overflow: clip;
 }
-._1mnpbqs3-3-10-4._1mnpbqs0-3-10-4:after {
+._1mnpbqs3-3-11-1._1mnpbqs0-3-11-1:after {
   content: attr(data-sourcetext) / "";
   color: transparent;
   display: table;
@@ -28,6 +28,6 @@
   line-height: 0;
   user-select: none;
 }
-._1mnpbqs4-3-10-4 {
+._1mnpbqs4-3-11-1 {
   text-overflow: ellipsis;
 }

package/esm/typography/text-ellipsis/TextEllipsis.sty.js

@@ -1,7 +1,7 @@
 import "./TextEllipsis.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var active = "_1mnpbqs0-3-10-4";
-var ellipsis = _7a468({ defaultClassName: "_1mnpbqs1-3-10-4", variantClassNames: { truncationMode: { start: "_1mnpbqs2-3-10-4", middle: "_1mnpbqs3-3-10-4", end: "_1mnpbqs4-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
+var active = "_1mnpbqs0-3-11-1";
+var ellipsis = _7a468({ defaultClassName: "_1mnpbqs1-3-11-1", variantClassNames: { truncationMode: { start: "_1mnpbqs2-3-11-1", middle: "_1mnpbqs3-3-11-1", end: "_1mnpbqs4-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   active,
   ellipsis

package/esm/typography/text-ellipsis/TextEllipsis.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/text-ellipsis/TextEllipsis.css.ts"],
-  "sourcesContent": ["import './TextEllipsis.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var active = '_1mnpbqs0-3-10-4';\nexport var ellipsis = _7a468({defaultClassName:'_1mnpbqs1-3-10-4',variantClassNames:{truncationMode:{start:'_1mnpbqs2-3-10-4',middle:'_1mnpbqs3-3-10-4',end:'_1mnpbqs4-3-10-4'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './TextEllipsis.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var active = '_1mnpbqs0-3-11-1';\nexport var ellipsis = _7a468({defaultClassName:'_1mnpbqs1-3-11-1',variantClassNames:{truncationMode:{start:'_1mnpbqs2-3-11-1',middle:'_1mnpbqs3-3-11-1',end:'_1mnpbqs4-3-11-1'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,SAAS;AACb,IAAI,WAAW,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,gBAAe,EAAC,OAAM,oBAAmB,QAAO,oBAAmB,KAAI,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/filters/filter/ResetButton.js

@@ -44,11 +44,15 @@ const ResetButton = /* @__PURE__ */ (0, import_react.forwardRef)(
       description: "Shown for the reset button of the FilterBar."
     });
     const tooltipId = (0, import_useId.useId)();
-    const ariaLabelledBy = (0, import_react.useMemo)(
-      () => tooltipId || ariaLabelledByProp ? `${tooltipId} ${ariaLabelledByProp ?? ""}` : void 0,
-      [ariaLabelledByProp, tooltipId]
-    );
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.Tooltip, { id: tooltipId, text: resetText, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    const [isTooltipOpen, setIsTooltipOpen] = (0, import_react.useState)(false);
+    const ariaLabelledBy = (0, import_react.useMemo)(() => {
+      const parts = [
+        isTooltipOpen ? tooltipId : "",
+        ariaLabelledByProp ?? ""
+      ].filter(Boolean);
+      return parts.length ? parts.join(" ") : void 0;
+    }, [ariaLabelledByProp, isTooltipOpen, tooltipId]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.Tooltip, { id: tooltipId, text: resetText, onOpenChange: setIsTooltipOpen, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Button.Button,
       {
         "data-testid": dataTestId,