@dynatrace/strato-components 3.13.3 → 3.14.0

package/esm/content/ai-response/utils/component-mappings.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/content/ai-response/utils/component-mappings.tsx"],
-  "sourcesContent": ["import type { ElementType } from 'react';\nimport type { StreamdownProps } from 'streamdown';\n\nimport { componentMappings as markdownComponentMappings } from '../../markdown/Markdown.js';\n\n/** Streamdown's component map type */\ntype StreamdownComponents = NonNullable<StreamdownProps['components']>;\n\n/**\n * Custom component mapping for Streamdown that extends the markdown mappings we have for react-markdown\n * with a code component that distinguishes between inline and block code and returns the appropriate type.\n */\nexport const streamdownComponents = {\n  ...markdownComponentMappings,\n  code: ({ children, node, ...restProps }) => {\n    const isInline = node?.position?.start?.line === node?.position?.end?.line;\n    const MarkdownCode = markdownComponentMappings.code as ElementType;\n\n    return (\n      <MarkdownCode inline={isInline} {...restProps}>\n        {children}\n      </MarkdownCode>\n    );\n  },\n  // The markdownComponentMappings are typed for react-markdown, but they're compatible with\n  // Streamdown so we can cast them here to avoid unnecessary duplication of the mapping logic.\n} as StreamdownComponents;\n"],
-  "mappings": "AAmBM;AAhBN,SAAS,qBAAqB,iCAAiC;AASxD,MAAM,uBAAuB;AAAA,EAClC,GAAG;AAAA,EACH,MAAM,CAAC,EAAE,UAAU,MAAM,GAAG,UAAU,MAAM;AAC1C,UAAM,WAAW,MAAM,UAAU,OAAO,SAAS,MAAM,UAAU,KAAK;AACtE,UAAM,eAAe,0BAA0B;AAE/C,WACE,oBAAC,gBAAa,QAAQ,UAAW,GAAG,WACjC,UACH;AAAA,EAEJ;AAAA;AAAA;AAGF;",
+  "sourcesContent": ["import type { ComponentType, ElementType, ReactNode } from 'react';\nimport type { StreamdownProps } from 'streamdown';\n\nimport { componentMappings as markdownComponentMappings } from '../../markdown/Markdown.js';\nimport type { AiResponseCodeBlockProps } from '../ai-response-types.js';\nimport { useAiResponseBlock } from '../AiResponseBlockContext.js';\n\nconst FENCE_LANGUAGE_PREFIX = 'language-';\n\n/** Streamdown's component map type */\ntype StreamdownComponents = NonNullable<StreamdownProps['components']>;\n\ntype CodeBlockRenderers = Record<\n  string,\n  ComponentType<AiResponseCodeBlockProps>\n>;\n\nconst DefaultCode = markdownComponentMappings.code as ElementType;\n\nconst getFenceLanguage = (className: unknown): string | undefined =>\n  typeof className === 'string' && className.includes(FENCE_LANGUAGE_PREFIX)\n    ? className.slice(\n        className.indexOf(FENCE_LANGUAGE_PREFIX) + FENCE_LANGUAGE_PREFIX.length,\n      )\n    : undefined;\n\n// Children arrive as a string or as an array of strings, depending on the markdown provider.\nconst toCode = (children: ReactNode): string =>\n  (Array.isArray(children)\n    ? children.join('')\n    : String(children ?? '')\n  ).replace(/\\n$/, '');\n\nconst CustomCodeBlock = ({\n  Renderer,\n  language,\n  children,\n}: {\n  Renderer: ComponentType<AiResponseCodeBlockProps>;\n  children: ReactNode;\n  language: string;\n}) => {\n  const { isComplete } = useAiResponseBlock();\n\n  return (\n    <Renderer\n      code={toCode(children)}\n      language={language}\n      isComplete={isComplete}\n    />\n  );\n};\n\nconst buildStreamdownComponents = (\n  customCodeBlockRenderers?: CodeBlockRenderers,\n): StreamdownComponents => {\n  // Copying to a null-prototype object keeps a fence language like `toString` from\n  // resolving an inherited Object.prototype member instead of falling back to the default.\n  const renderers: CodeBlockRenderers = Object.assign(\n    Object.create(null) as CodeBlockRenderers,\n    customCodeBlockRenderers,\n  );\n\n  return {\n    ...markdownComponentMappings,\n    code: ({ children, node, ...restProps }) => {\n      const isSingleLine =\n        node?.position?.start !== undefined &&\n        node.position.end !== undefined &&\n        node.position.start.line === node.position.end.line;\n      const language = getFenceLanguage(restProps.className);\n      // While a fence is streaming, the opening line can arrive before any content, so the\n      // block still spans a single line. Its language keeps it apart from real inline code.\n      const isInline = isSingleLine && language === undefined;\n\n      if (language !== undefined) {\n        const Renderer = renderers[language];\n\n        if (Renderer) {\n          return (\n            <CustomCodeBlock Renderer={Renderer} language={language}>\n              {children}\n            </CustomCodeBlock>\n          );\n        }\n      }\n\n      return (\n        <DefaultCode inline={isInline} node={node} {...restProps}>\n          {children}\n        </DefaultCode>\n      );\n    },\n    // The markdownComponentMappings are typed for react-markdown, but they're compatible with\n    // Streamdown so we can cast them here to avoid unnecessary duplication of the mapping logic.\n  } as StreamdownComponents;\n};\n\nconst defaultStreamdownComponents = buildStreamdownComponents();\n\n/**\n * Builds the component mapping for Streamdown. It starts from the markdown mappings we\n * have for react-markdown and wraps the code component so that it receives whether the\n * code is inline or a block, and so that a fenced block whose language a consumer\n * registered a renderer for is handed over to that renderer.\n * @internal\n */\nexport const getStreamdownComponents = (\n  customCodeBlockRenderers?: CodeBlockRenderers,\n): StreamdownComponents =>\n  customCodeBlockRenderers\n    ? buildStreamdownComponents(customCodeBlockRenderers)\n    : defaultStreamdownComponents;\n"],
+  "mappings": "AA6CI;AA1CJ,SAAS,qBAAqB,iCAAiC;AAE/D,SAAS,0BAA0B;AAEnC,MAAM,wBAAwB;AAU9B,MAAM,cAAc,0BAA0B;AAE9C,MAAM,mBAAmB,CAAC,cACxB,OAAO,cAAc,YAAY,UAAU,SAAS,qBAAqB,IACrE,UAAU;AAAA,EACR,UAAU,QAAQ,qBAAqB,IAAI,sBAAsB;AACnE,IACA;AAGN,MAAM,SAAS,CAAC,cACb,MAAM,QAAQ,QAAQ,IACnB,SAAS,KAAK,EAAE,IAChB,OAAO,YAAY,EAAE,GACvB,QAAQ,OAAO,EAAE;AAErB,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,QAAM,EAAE,WAAW,IAAI,mBAAmB;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,OAAO,QAAQ;AAAA,MACrB;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,4BAA4B,CAChC,6BACyB;AAGzB,QAAM,YAAgC,OAAO;AAAA,IAC3C,uBAAO,OAAO,IAAI;AAAA,IAClB;AAAA,EACF;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,MAAM,CAAC,EAAE,UAAU,MAAM,GAAG,UAAU,MAAM;AAC1C,YAAM,eACJ,MAAM,UAAU,UAAU,UAC1B,KAAK,SAAS,QAAQ,UACtB,KAAK,SAAS,MAAM,SAAS,KAAK,SAAS,IAAI;AACjD,YAAM,WAAW,iBAAiB,UAAU,SAAS;AAGrD,YAAM,WAAW,gBAAgB,aAAa;AAE9C,UAAI,aAAa,QAAW;AAC1B,cAAM,WAAW,UAAU,QAAQ;AAEnC,YAAI,UAAU;AACZ,iBACE,oBAAC,mBAAgB,UAAoB,UAClC,UACH;AAAA,QAEJ;AAAA,MACF;AAEA,aACE,oBAAC,eAAY,QAAQ,UAAU,MAAa,GAAG,WAC5C,UACH;AAAA,IAEJ;AAAA;AAAA;AAAA,EAGF;AACF;AAEA,MAAM,8BAA8B,0BAA0B;AASvD,MAAM,0BAA0B,CACrC,6BAEA,2BACI,0BAA0B,wBAAwB,IAClD;",
   "names": []
 }

package/esm/content/ai-response/utils/fence-utils.js

@@ -0,0 +1,52 @@
+const MIN_FENCE_LENGTH = 3;
+const MAX_FENCE_INDENT = 3;
+const TAB_INDENT_WIDTH = 4;
+const parseFence = (line) => {
+  let index = 0;
+  let indent = 0;
+  while (index < line.length && (line[index] === " " || line[index] === "	")) {
+    indent += line[index] === "	" ? TAB_INDENT_WIDTH : 1;
+    index++;
+  }
+  if (indent > MAX_FENCE_INDENT) {
+    return void 0;
+  }
+  const marker = line[index];
+  if (marker !== "`" && marker !== "~") {
+    return void 0;
+  }
+  const start = index;
+  while (index < line.length && line[index] === marker) {
+    index++;
+  }
+  const length = index - start;
+  if (length < MIN_FENCE_LENGTH) {
+    return void 0;
+  }
+  return { marker, length, info: line.slice(index) };
+};
+const hasUnterminatedFence = (markdown) => {
+  let openFence;
+  for (const line of markdown.split("\n")) {
+    const fence = parseFence(line);
+    if (!fence) {
+      continue;
+    }
+    if (openFence === void 0) {
+      if (fence.marker === "`" && fence.info.includes("`")) {
+        continue;
+      }
+      openFence = fence;
+      continue;
+    }
+    const isClosingFence = fence.marker === openFence.marker && fence.length >= openFence.length && fence.info.trim().length === 0;
+    if (isClosingFence) {
+      openFence = void 0;
+    }
+  }
+  return openFence !== void 0;
+};
+export {
+  hasUnterminatedFence
+};
+//# sourceMappingURL=fence-utils.js.map

package/esm/content/ai-response/utils/fence-utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/content/ai-response/utils/fence-utils.ts"],
+  "sourcesContent": ["const MIN_FENCE_LENGTH = 3;\nconst MAX_FENCE_INDENT = 3;\nconst TAB_INDENT_WIDTH = 4;\n\ninterface Fence {\n  marker: string;\n  length: number;\n  info: string;\n}\n\nconst parseFence = (line: string): Fence | undefined => {\n  let index = 0;\n  let indent = 0;\n\n  // A tab counts as four columns, so a tab-indented line can never be a fence.\n  while (index < line.length && (line[index] === ' ' || line[index] === '\\t')) {\n    indent += line[index] === '\\t' ? TAB_INDENT_WIDTH : 1;\n    index++;\n  }\n\n  if (indent > MAX_FENCE_INDENT) {\n    return undefined;\n  }\n\n  const marker = line[index];\n\n  if (marker !== '`' && marker !== '~') {\n    return undefined;\n  }\n\n  const start = index;\n\n  while (index < line.length && line[index] === marker) {\n    index++;\n  }\n\n  const length = index - start;\n\n  if (length < MIN_FENCE_LENGTH) {\n    return undefined;\n  }\n\n  return { marker, length, info: line.slice(index) };\n};\n\n/**\n * Determines whether the markdown ends inside a fenced code block whose closing fence has\n * not been received yet. While a response is streaming, an unterminated fence is still\n * parsed as a complete code block, so this is the only way to tell a finished block apart\n * from a block that is still being written.\n * @internal\n */\nexport const hasUnterminatedFence = (markdown: string): boolean => {\n  let openFence: Fence | undefined;\n\n  for (const line of markdown.split('\\n')) {\n    const fence = parseFence(line);\n\n    if (!fence) {\n      continue;\n    }\n\n    if (openFence === undefined) {\n      // A backtick fence cannot have a backtick in its info string.\n      if (fence.marker === '`' && fence.info.includes('`')) {\n        continue;\n      }\n      openFence = fence;\n      continue;\n    }\n\n    const isClosingFence =\n      fence.marker === openFence.marker &&\n      fence.length >= openFence.length &&\n      fence.info.trim().length === 0;\n\n    if (isClosingFence) {\n      openFence = undefined;\n    }\n  }\n\n  return openFence !== undefined;\n};\n"],
+  "mappings": "AAAA,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;AAQzB,MAAM,aAAa,CAAC,SAAoC;AACtD,MAAI,QAAQ;AACZ,MAAI,SAAS;AAGb,SAAO,QAAQ,KAAK,WAAW,KAAK,KAAK,MAAM,OAAO,KAAK,KAAK,MAAM,MAAO;AAC3E,cAAU,KAAK,KAAK,MAAM,MAAO,mBAAmB;AACpD;AAAA,EACF;AAEA,MAAI,SAAS,kBAAkB;AAC7B,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,KAAK,KAAK;AAEzB,MAAI,WAAW,OAAO,WAAW,KAAK;AACpC,WAAO;AAAA,EACT;AAEA,QAAM,QAAQ;AAEd,SAAO,QAAQ,KAAK,UAAU,KAAK,KAAK,MAAM,QAAQ;AACpD;AAAA,EACF;AAEA,QAAM,SAAS,QAAQ;AAEvB,MAAI,SAAS,kBAAkB;AAC7B,WAAO;AAAA,EACT;AAEA,SAAO,EAAE,QAAQ,QAAQ,MAAM,KAAK,MAAM,KAAK,EAAE;AACnD;AASO,MAAM,uBAAuB,CAAC,aAA8B;AACjE,MAAI;AAEJ,aAAW,QAAQ,SAAS,MAAM,IAAI,GAAG;AACvC,UAAM,QAAQ,WAAW,IAAI;AAE7B,QAAI,CAAC,OAAO;AACV;AAAA,IACF;AAEA,QAAI,cAAc,QAAW;AAE3B,UAAI,MAAM,WAAW,OAAO,MAAM,KAAK,SAAS,GAAG,GAAG;AACpD;AAAA,MACF;AACA,kBAAY;AACZ;AAAA,IACF;AAEA,UAAM,iBACJ,MAAM,WAAW,UAAU,UAC3B,MAAM,UAAU,UAAU,UAC1B,MAAM,KAAK,KAAK,EAAE,WAAW;AAE/B,QAAI,gBAAgB;AAClB,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,SAAO,cAAc;AACvB;",
+  "names": []
+}

package/esm/content/avatar/Avatar.css

@@ -1,4 +1,5 @@
-._7llfy90-3-13-3 {
+._7llfy90-3-14-0 {
+  position: relative;
   cursor: default;
   box-sizing: border-box;
   border: 1px solid var(--dt-colors-border-neutral-default, #dadbe4);
@@ -15,20 +16,20 @@
   line-height: 1;
   padding: 0;
 }
-._7llfy91-3-13-3 {
+._7llfy91-3-14-0 {
   min-width: var(--dt-spacings-size-20, 20px);
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._7llfy92-3-13-3 {
+._7llfy92-3-14-0 {
   min-width: var(--dt-spacings-size-32, 32px);
 }
-._7llfy93-3-13-3 {
+._7llfy93-3-14-0 {
   border-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
   background-color: var(--dt-colors-background-surface-default, #fff);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   z-index: 0;
 }
-._7llfy93-3-13-3:before {
+._7llfy93-3-14-0:before {
   content: "";
   aspect-ratio: 1/1;
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
@@ -37,36 +38,36 @@
   position: absolute;
   z-index: -1;
 }
-._7llfy94-3-13-3[tabindex]:hover, button._7llfy94-3-13-3:hover, a._7llfy94-3-13-3:hover, ._7llfy94-3-13-3:focus {
+._7llfy94-3-14-0[tabindex]:hover, button._7llfy94-3-14-0:hover, a._7llfy94-3-14-0:hover, ._7llfy94-3-14-0:focus {
   background-color: var(--dt-colors-background-field-neutral-accent-hover, #4d4e72);
   border-color: var(--dt-colors-border-neutral-default-hover, #d0d1dc);
   z-index: 1;
 }
-button._7llfy94-3-13-3:hover, a._7llfy94-3-13-3:hover, button._7llfy94-3-13-3:active, a._7llfy94-3-13-3:active {
+button._7llfy94-3-14-0:hover, a._7llfy94-3-14-0:hover, button._7llfy94-3-14-0:active, a._7llfy94-3-14-0:active {
   cursor: pointer;
   z-index: 1;
 }
-._7llfy94-3-13-3[tabindex]:active, button._7llfy94-3-13-3:active, a._7llfy94-3-13-3:active {
+._7llfy94-3-14-0[tabindex]:active, button._7llfy94-3-14-0:active, a._7llfy94-3-14-0:active {
   background-color: var(--dt-colors-background-field-neutral-accent-active, #404164);
   border-color: var(--dt-colors-border-neutral-default-active, #c6c7d5);
   z-index: 1;
 }
-._7llfy95-3-13-3:before {
+._7llfy95-3-14-0:before {
   min-width: var(--dt-spacings-size-20, 20px);
 }
-._7llfy96-3-13-3:before {
+._7llfy96-3-14-0:before {
   min-width: var(--dt-spacings-size-32, 32px);
 }
-._7llfy97-3-13-3 {
+._7llfy97-3-14-0 {
   padding: 0;
   margin: 0;
   border: none;
   background-color: transparent;
 }
-._7llfy98-3-13-3 {
+._7llfy98-3-14-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   overflow-wrap: break-word;
 }
-._7llfy99-3-13-3 ~ div > div {
+._7llfy99-3-14-0 ~ div > div {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }

package/esm/content/avatar/Avatar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/avatar/Avatar.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { ElementType, forwardRef, type ReactElement } from 'react';\n\nimport * as styles from './Avatar.sty.js';\nimport { Label } from './Label.js';\nimport { Subtitle } from './Subtitle.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport { focusRingStatic } from '../../core/styles/focusRingStatic.sty.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 { PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { _sanitizeSymbol } from '../../core/utils/sanitize-symbol.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\n\nconst COMPONENT_NAME = 'Avatar';\n\n// Merge own props with others inherited from the underlying element type\n/** @public */\nexport type AvatarProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  AvatarOwnProps\n>;\n\n/**\n * Accepted properties for the Avatar component\n * @public\n */\nexport interface AvatarOwnProps\n  extends WithChildren,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /**\n   * The size of the Avatar.\n   * @defaultValue 'default'\n   */\n  size?: 'default' | 'small';\n\n  /**\n   * The letters displayed in the colored circle of the Avatar.\n   */\n  abbreviation: string;\n\n  /**\n   * Whether the Avatar is disabled.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n}\n\n/**\n * Avatar component\n */\nconst InternalAvatar: <E extends ElementType = 'div'>(\n  props: AvatarProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(props: AvatarProps<E>, ref: typeof props.ref) => {\n    const {\n      children,\n      size = 'default',\n      abbreviation,\n      disabled = false,\n      as,\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 [slots] = useSlots(children, {\n      label: Label,\n      subtitle: Subtitle,\n    });\n\n    const Abbreviation = as ?? 'div';\n\n    // ensuring that 'rovingFocusElement' remains assigned to the Abbrevation Element for focus functionality.\n    const remainingConsumerClassname = (consumerClassName ?? '').replace(\n      /rovingFocusElement/g,\n      '',\n    );\n    const hasRovingFocus = (consumerClassName ?? '').includes(\n      'rovingFocusElement',\n    );\n    return (\n      <div\n        className={clsx(\n          styles.avatarWrapper,\n          textStyleCSS({ textStyle: 'base' }),\n          remainingConsumerClassname,\n        )}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        {...behavioralTrackingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <Flex gap={size === 'small' ? 4 : 8} alignItems=\"center\" minWidth={0}>\n          <Abbreviation\n            ref={ref}\n            className={clsx(\n              {\n                [styles.avatarDisabled]: disabled,\n                rovingFocusElement: hasRovingFocus,\n              },\n              styles.avatarAbbreviation({ size, disabled }),\n              focusRingStatic({ disabled, when: 'focus-within-visible' }),\n            )}\n            {...ariaLabelingProps}\n            {...forwardProps}\n          >\n            {_sanitizeSymbol(abbreviation, size === 'default' ? 2 : undefined)}\n          </Abbreviation>\n          {(slots.label || slots.subtitle) && (\n            <Flex flexDirection=\"column\" gap={0} minWidth={0}>\n              {slots.label}\n              {slots.subtitle}\n            </Flex>\n          )}\n        </Flex>\n      </div>\n    );\n  },\n);\n\n(\n  InternalAvatar as typeof InternalAvatar & { displayName: string }\n).displayName = COMPONENT_NAME;\n\n/**\n * Use the `Avatar` to display a visual representation of a user, showing their profile picture, initials, or a placeholder icon.\n * @public\n */\nexport const Avatar = Object.assign(InternalAvatar, {\n  Label,\n  Subtitle,\n});\n"],
-  "mappings": "AAoHU,cAgBE,YAhBF;AApHV,OAAO,UAAU;AACjB,SAAsB,kBAAqC;AAE3D,YAAY,YAAY;AACxB,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,2BAA2B;AACpC,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAQhC,SAAS,uBAAuB;AAChC,SAAS,YAAY;AACrB,SAAS,aAAa,oBAAoB;AAE1C,MAAM,iBAAiB;AAyCvB,MAAM,iBAEqC;AAAA,EACzC,CAAwB,OAAuB,QAA0B;AACvE,UAAM;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,WAAW;AAAA,MACX;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,KAAK,IAAI,SAAS,UAAU;AAAA,MACjC,OAAO;AAAA,MACP,UAAU;AAAA,IACZ,CAAC;AAED,UAAM,eAAe,MAAM;AAG3B,UAAM,8BAA8B,qBAAqB,IAAI;AAAA,MAC3D;AAAA,MACA;AAAA,IACF;AACA,UAAM,kBAAkB,qBAAqB,IAAI;AAAA,MAC/C;AAAA,IACF;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT,OAAO;AAAA,UACP,aAAa,EAAE,WAAW,OAAO,CAAC;AAAA,UAClC;AAAA,QACF;AAAA,QACA,OAAO;AAAA,QACP,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QACjB,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAEnB,+BAAC,QAAK,KAAK,SAAS,UAAU,IAAI,GAAG,YAAW,UAAS,UAAU,GACjE;AAAA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,WAAW;AAAA,gBACT;AAAA,kBACE,CAAC,OAAO,cAAc,GAAG;AAAA,kBACzB,oBAAoB;AAAA,gBACtB;AAAA,gBACA,OAAO,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAAA,gBAC5C,gBAAgB,EAAE,UAAU,MAAM,uBAAuB,CAAC;AAAA,cAC5D;AAAA,cACC,GAAG;AAAA,cACH,GAAG;AAAA,cAEH,0BAAgB,cAAc,SAAS,YAAY,IAAI,MAAS;AAAA;AAAA,UACnE;AAAA,WACE,MAAM,SAAS,MAAM,aACrB,qBAAC,QAAK,eAAc,UAAS,KAAK,GAAG,UAAU,GAC5C;AAAA,kBAAM;AAAA,YACN,MAAM;AAAA,aACT;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAGE,eACA,cAAc;AAMT,MAAM,SAAS,OAAO,OAAO,gBAAgB;AAAA,EAClD;AAAA,EACA;AACF,CAAC;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { ElementType, forwardRef, type ReactElement } from 'react';\n\nimport * as styles from './Avatar.sty.js';\nimport { Label } from './Label.js';\nimport { Subtitle } from './Subtitle.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport { focusRingStatic } from '../../core/styles/focusRingStatic.sty.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 { PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { _sanitizeSymbol } from '../../core/utils/sanitize-symbol.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\n\nconst COMPONENT_NAME = 'Avatar';\n\n// Merge own props with others inherited from the underlying element type\n/** @public */\nexport type AvatarProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  AvatarOwnProps\n>;\n\n/**\n * Accepted properties for the Avatar component\n * @public\n */\nexport interface AvatarOwnProps\n  extends\n    WithChildren,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /**\n   * The size of the Avatar.\n   * @defaultValue 'default'\n   */\n  size?: 'default' | 'small';\n\n  /**\n   * The letters displayed in the colored circle of the Avatar.\n   */\n  abbreviation: string;\n\n  /**\n   * Whether the Avatar is disabled.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n}\n\n/**\n * Avatar component\n */\nconst InternalAvatar: <E extends ElementType = 'div'>(\n  props: AvatarProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(props: AvatarProps<E>, ref: typeof props.ref) => {\n    const {\n      children,\n      size = 'default',\n      abbreviation,\n      disabled = false,\n      as,\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 [slots] = useSlots(children, {\n      label: Label,\n      subtitle: Subtitle,\n    });\n\n    const Abbreviation = as ?? 'div';\n\n    // ensuring that 'rovingFocusElement' remains assigned to the Abbrevation Element for focus functionality.\n    const remainingConsumerClassname = (consumerClassName ?? '').replace(\n      /rovingFocusElement/g,\n      '',\n    );\n    const hasRovingFocus = (consumerClassName ?? '').includes(\n      'rovingFocusElement',\n    );\n    return (\n      <div\n        className={clsx(\n          styles.avatarWrapper,\n          textStyleCSS({ textStyle: 'base' }),\n          remainingConsumerClassname,\n        )}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        {...behavioralTrackingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <Flex gap={size === 'small' ? 4 : 8} alignItems=\"center\" minWidth={0}>\n          <Abbreviation\n            ref={ref}\n            className={clsx(\n              {\n                [styles.avatarDisabled]: disabled,\n                rovingFocusElement: hasRovingFocus,\n              },\n              styles.avatarAbbreviation({ size, disabled }),\n              focusRingStatic({ disabled, when: 'focus-within-visible' }),\n            )}\n            {...ariaLabelingProps}\n            {...forwardProps}\n          >\n            {_sanitizeSymbol(abbreviation, size === 'default' ? 2 : undefined)}\n          </Abbreviation>\n          {(slots.label || slots.subtitle) && (\n            <Flex flexDirection=\"column\" gap={0} minWidth={0}>\n              {slots.label}\n              {slots.subtitle}\n            </Flex>\n          )}\n        </Flex>\n      </div>\n    );\n  },\n);\n\n(\n  InternalAvatar as typeof InternalAvatar & { displayName: string }\n).displayName = COMPONENT_NAME;\n\n/**\n * Use the `Avatar` to display a visual representation of a user, showing their profile picture, initials, or a placeholder icon.\n * @public\n */\nexport const Avatar = Object.assign(InternalAvatar, {\n  Label,\n  Subtitle,\n});\n"],
+  "mappings": "AAqHU,cAgBE,YAhBF;AArHV,OAAO,UAAU;AACjB,SAAsB,kBAAqC;AAE3D,YAAY,YAAY;AACxB,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,2BAA2B;AACpC,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAQhC,SAAS,uBAAuB;AAChC,SAAS,YAAY;AACrB,SAAS,aAAa,oBAAoB;AAE1C,MAAM,iBAAiB;AA0CvB,MAAM,iBAEqC;AAAA,EACzC,CAAwB,OAAuB,QAA0B;AACvE,UAAM;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,WAAW;AAAA,MACX;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,KAAK,IAAI,SAAS,UAAU;AAAA,MACjC,OAAO;AAAA,MACP,UAAU;AAAA,IACZ,CAAC;AAED,UAAM,eAAe,MAAM;AAG3B,UAAM,8BAA8B,qBAAqB,IAAI;AAAA,MAC3D;AAAA,MACA;AAAA,IACF;AACA,UAAM,kBAAkB,qBAAqB,IAAI;AAAA,MAC/C;AAAA,IACF;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT,OAAO;AAAA,UACP,aAAa,EAAE,WAAW,OAAO,CAAC;AAAA,UAClC;AAAA,QACF;AAAA,QACA,OAAO;AAAA,QACP,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QACjB,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAEnB,+BAAC,QAAK,KAAK,SAAS,UAAU,IAAI,GAAG,YAAW,UAAS,UAAU,GACjE;AAAA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,WAAW;AAAA,gBACT;AAAA,kBACE,CAAC,OAAO,cAAc,GAAG;AAAA,kBACzB,oBAAoB;AAAA,gBACtB;AAAA,gBACA,OAAO,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAAA,gBAC5C,gBAAgB,EAAE,UAAU,MAAM,uBAAuB,CAAC;AAAA,cAC5D;AAAA,cACC,GAAG;AAAA,cACH,GAAG;AAAA,cAEH,0BAAgB,cAAc,SAAS,YAAY,IAAI,MAAS;AAAA;AAAA,UACnE;AAAA,WACE,MAAM,SAAS,MAAM,aACrB,qBAAC,QAAK,eAAc,UAAS,KAAK,GAAG,UAAU,GAC5C;AAAA,kBAAM;AAAA,YACN,MAAM;AAAA,aACT;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAGE,eACA,cAAc;AAMT,MAAM,SAAS,OAAO,OAAO,gBAAgB;AAAA,EAClD;AAAA,EACA;AACF,CAAC;",
   "names": []
 }

package/esm/content/avatar/Avatar.sty.js

@@ -1,9 +1,9 @@
 import "./Avatar.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var avatarAbbreviation = _7a468({ defaultClassName: "_7llfy90-3-13-3", variantClassNames: { size: { small: "_7llfy91-3-13-3", "default": "_7llfy92-3-13-3" }, disabled: { true: "_7llfy93-3-13-3", false: "_7llfy94-3-13-3" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, size: "small" }, "_7llfy95-3-13-3"], [{ disabled: true, size: "default" }, "_7llfy96-3-13-3"]] });
-var avatarDisabled = "_7llfy99-3-13-3";
-var avatarSubtitle = "_7llfy98-3-13-3";
-var avatarWrapper = "_7llfy97-3-13-3";
+var avatarAbbreviation = _7a468({ defaultClassName: "_7llfy90-3-14-0", variantClassNames: { size: { small: "_7llfy91-3-14-0", "default": "_7llfy92-3-14-0" }, disabled: { true: "_7llfy93-3-14-0", false: "_7llfy94-3-14-0" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, size: "small" }, "_7llfy95-3-14-0"], [{ disabled: true, size: "default" }, "_7llfy96-3-14-0"]] });
+var avatarDisabled = "_7llfy99-3-14-0";
+var avatarSubtitle = "_7llfy98-3-14-0";
+var avatarWrapper = "_7llfy97-3-14-0";
 export {
   avatarAbbreviation,
   avatarDisabled,

package/esm/content/avatar/Avatar.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/avatar/Avatar.css.ts"],
-  "sourcesContent": ["import './Avatar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var avatarAbbreviation = _7a468({defaultClassName:'_7llfy90-3-13-3',variantClassNames:{size:{small:'_7llfy91-3-13-3','default':'_7llfy92-3-13-3'},disabled:{true:'_7llfy93-3-13-3',false:'_7llfy94-3-13-3'}},defaultVariants:{},compoundVariants:[[{disabled:true,size:'small'},'_7llfy95-3-13-3'],[{disabled:true,size:'default'},'_7llfy96-3-13-3']]});\nexport var avatarDisabled = '_7llfy99-3-13-3';\nexport var avatarSubtitle = '_7llfy98-3-13-3';\nexport var avatarWrapper = '_7llfy97-3-13-3';"],
+  "sourcesContent": ["import './Avatar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var avatarAbbreviation = _7a468({defaultClassName:'_7llfy90-3-14-0',variantClassNames:{size:{small:'_7llfy91-3-14-0','default':'_7llfy92-3-14-0'},disabled:{true:'_7llfy93-3-14-0',false:'_7llfy94-3-14-0'}},defaultVariants:{},compoundVariants:[[{disabled:true,size:'small'},'_7llfy95-3-14-0'],[{disabled:true,size:'default'},'_7llfy96-3-14-0']]});\nexport var avatarDisabled = '_7llfy99-3-14-0';\nexport var avatarSubtitle = '_7llfy98-3-14-0';\nexport var avatarWrapper = '_7llfy97-3-14-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,qBAAqB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,OAAM,mBAAkB,WAAU,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,MAAK,QAAO,GAAE,iBAAiB,GAAE,CAAC,EAAC,UAAS,MAAK,MAAK,UAAS,GAAE,iBAAiB,CAAC,EAAC,CAAC;AACvV,IAAI,iBAAiB;AACrB,IAAI,iBAAiB;AACrB,IAAI,gBAAgB;",
   "names": []
 }

package/esm/content/avatar-group/AvatarGroup.css

@@ -1,9 +1,6 @@
-._129un530-3-13-3 {
-  display: flex;
-}
-._129un531-3-13-3 {
+._129un530-3-14-0 {
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._129un531-3-13-3:first-child {
+._129un530-3-14-0:first-child {
   margin-left: var(--dt-spacings-size-0, 0);
 }

package/esm/content/avatar-group/AvatarGroup.js

@@ -7,9 +7,8 @@ import {
   cloneElement
 } from "react";
 import { useIntl } from "react-intl";
-import * as styles from "./AvatarGroup.sty.js";
 import { Item } from "./Item.js";
-import { Button } from "../../buttons/button/Button.js";
+import { InlineButton } from "../../buttons/inline-button/InlineButton.js";
 import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
@@ -108,15 +107,9 @@ const RootAvatarGroup = forwardRef(
           /* @__PURE__ */ jsx(Flex, { alignItems: "center", gap: 0, children: displayValues }),
           additionalValues.length > 0 && /* @__PURE__ */ jsxs(Menu, { children: [
             /* @__PURE__ */ jsx(Menu.Trigger, { children: /* @__PURE__ */ jsxs(
-              Button,
+              InlineButton,
               {
-                size: "condensed",
-                variant: "emphasized",
-                className: clsx(
-                  "rovingFocusElement",
-                  consumerClassName,
-                  styles.additionalAvatarWrapper
-                ),
+                className: clsx("rovingFocusElement", consumerClassName),
                 children: [
                   "+",
                   additionalValues.length

package/esm/content/avatar-group/AvatarGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/avatar-group/AvatarGroup.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  Children,\n  type ReactNode,\n  useMemo,\n  cloneElement,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './AvatarGroup.sty.js';\nimport { Item } from './Item.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 { useRovingFocus } from '../../core/hooks/useRovingFocus.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { focusRingStatic } from '../../core/styles/focusRingStatic.sty.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 { Flex } from '../../layouts/flex/Flex.js';\nimport { Menu } from '../../navigation/menu/Menu.js';\n\nconst COMPONENT_NAME = 'AvatarGroup';\n\n/**\n * Accepted properties for AvatarGroup\n * @public\n */\nexport type AvatarGroupProps = WithChildren &\n  AriaLabelingProps &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  BehaviorTrackingProps;\n\nconst MAX_AVATARGROUP_ITEMS = 5;\n\n/**\n * AvatarGroup component\n */\nconst RootAvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    }: AvatarGroupProps = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const intl = useIntl();\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n    const { 'aria-label': ariaLabel, ...remainingAriaLabelingProps } =\n      ariaLabelingProps;\n\n    const { containerRef: rovingContainerRef } = useRovingFocus<HTMLDivElement>(\n      {\n        initialIndex: undefined,\n        direction: 'horizontal',\n        focusableChildrenSelector: '.rovingFocusElement',\n      },\n    );\n\n    const [displayValues, additionalValues] = useMemo(() => {\n      const childrenArray = Children.toArray(children);\n      let displayValues: ReactNode[];\n      const additionalValues: ReactNode[] = [];\n\n      if (childrenArray.length > MAX_AVATARGROUP_ITEMS) {\n        displayValues = childrenArray.splice(0, MAX_AVATARGROUP_ITEMS);\n        for (let i = 0; i < childrenArray.length; i++) {\n          const child = childrenArray[i];\n          if (isSlot(child, Item)) {\n            additionalValues.push(\n              cloneElement(\n                <Item\n                  abbreviation={child.props.abbreviation}\n                  tooltipText={child.props.tooltipText}\n                />,\n                {\n                  ...child.props,\n                  key: i,\n                  isCollapsed: true,\n                },\n              ),\n            );\n          }\n        }\n      } else {\n        displayValues = childrenArray;\n      }\n\n      return [displayValues, additionalValues];\n    }, [children]);\n\n    const rootRef = useMergeRefs([forwardedRef, rovingContainerRef]);\n\n    const formatMessageAriaLabel = intl.formatMessage(\n      {\n        id: '4ER0rfN8lI3HtaFd',\n        defaultMessage:\n          'Group of Avatars. {hiddenAvatars} hidden, {totalAvatars} total users',\n        description: 'Label for the collapsed Avatars.',\n      },\n      {\n        hiddenAvatars: additionalValues.length,\n        totalAvatars: additionalValues.length + displayValues.length,\n      },\n    );\n\n    return displayValues.length ? (\n      <Flex\n        gap={4}\n        alignItems=\"center\"\n        ref={rootRef}\n        className={clsx(focusRingStatic(), consumerClassName)}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        aria-label={ariaLabel ?? formatMessageAriaLabel}\n        {...remainingAriaLabelingProps}\n        {...behavioralTrackingProps}\n        {...forwardProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <Flex alignItems=\"center\" gap={0}>\n          {displayValues}\n        </Flex>\n\n        {additionalValues.length > 0 && (\n          <Menu>\n            <Menu.Trigger>\n              <Button\n                size=\"condensed\"\n                variant=\"emphasized\"\n                className={clsx(\n                  'rovingFocusElement',\n                  consumerClassName,\n                  styles.additionalAvatarWrapper,\n                )}\n              >\n                +{additionalValues.length}\n              </Button>\n            </Menu.Trigger>\n            <Menu.Content\n              data-dtrum-mask={dataDtrumMask}\n              data-dtrum-allow={dataDtrumAllow}\n            >\n              {additionalValues}\n            </Menu.Content>\n          </Menu>\n        )}\n      </Flex>\n    ) : null;\n  },\n);\n\n(\n  RootAvatarGroup as typeof RootAvatarGroup & { displayName: string }\n).displayName = COMPONENT_NAME;\n\n/**\n * The `Avatar` component can be used as a visual representation of multiple users.\n * @public\n */\nexport const AvatarGroup = Object.assign(RootAvatarGroup, {\n  Item,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  Children,\n  type ReactNode,\n  useMemo,\n  cloneElement,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Item } from './Item.js';\nimport { InlineButton } from '../../buttons/inline-button/InlineButton.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useRovingFocus } from '../../core/hooks/useRovingFocus.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { focusRingStatic } from '../../core/styles/focusRingStatic.sty.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 { Flex } from '../../layouts/flex/Flex.js';\nimport { Menu } from '../../navigation/menu/Menu.js';\n\nconst COMPONENT_NAME = 'AvatarGroup';\n\n/**\n * Accepted properties for AvatarGroup\n * @public\n */\nexport type AvatarGroupProps = WithChildren &\n  AriaLabelingProps &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  BehaviorTrackingProps;\n\nconst MAX_AVATARGROUP_ITEMS = 5;\n\n/**\n * AvatarGroup component\n */\nconst RootAvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    }: AvatarGroupProps = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const intl = useIntl();\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n    const { 'aria-label': ariaLabel, ...remainingAriaLabelingProps } =\n      ariaLabelingProps;\n\n    const { containerRef: rovingContainerRef } = useRovingFocus<HTMLDivElement>(\n      {\n        initialIndex: undefined,\n        direction: 'horizontal',\n        focusableChildrenSelector: '.rovingFocusElement',\n      },\n    );\n\n    const [displayValues, additionalValues] = useMemo(() => {\n      const childrenArray = Children.toArray(children);\n      let displayValues: ReactNode[];\n      const additionalValues: ReactNode[] = [];\n\n      if (childrenArray.length > MAX_AVATARGROUP_ITEMS) {\n        displayValues = childrenArray.splice(0, MAX_AVATARGROUP_ITEMS);\n        for (let i = 0; i < childrenArray.length; i++) {\n          const child = childrenArray[i];\n          if (isSlot(child, Item)) {\n            additionalValues.push(\n              cloneElement(\n                <Item\n                  abbreviation={child.props.abbreviation}\n                  tooltipText={child.props.tooltipText}\n                />,\n                {\n                  ...child.props,\n                  key: i,\n                  isCollapsed: true,\n                },\n              ),\n            );\n          }\n        }\n      } else {\n        displayValues = childrenArray;\n      }\n\n      return [displayValues, additionalValues];\n    }, [children]);\n\n    const rootRef = useMergeRefs([forwardedRef, rovingContainerRef]);\n\n    const formatMessageAriaLabel = intl.formatMessage(\n      {\n        id: '4ER0rfN8lI3HtaFd',\n        defaultMessage:\n          'Group of Avatars. {hiddenAvatars} hidden, {totalAvatars} total users',\n        description: 'Label for the collapsed Avatars.',\n      },\n      {\n        hiddenAvatars: additionalValues.length,\n        totalAvatars: additionalValues.length + displayValues.length,\n      },\n    );\n\n    return displayValues.length ? (\n      <Flex\n        gap={4}\n        alignItems=\"center\"\n        ref={rootRef}\n        className={clsx(focusRingStatic(), consumerClassName)}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        aria-label={ariaLabel ?? formatMessageAriaLabel}\n        {...remainingAriaLabelingProps}\n        {...behavioralTrackingProps}\n        {...forwardProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <Flex alignItems=\"center\" gap={0}>\n          {displayValues}\n        </Flex>\n\n        {additionalValues.length > 0 && (\n          <Menu>\n            <Menu.Trigger>\n              <InlineButton\n                className={clsx('rovingFocusElement', consumerClassName)}\n              >\n                +{additionalValues.length}\n              </InlineButton>\n            </Menu.Trigger>\n            <Menu.Content\n              data-dtrum-mask={dataDtrumMask}\n              data-dtrum-allow={dataDtrumAllow}\n            >\n              {additionalValues}\n            </Menu.Content>\n          </Menu>\n        )}\n      </Flex>\n    ) : null;\n  },\n);\n\n(\n  RootAvatarGroup as typeof RootAvatarGroup & { displayName: string }\n).displayName = COMPONENT_NAME;\n\n/**\n * The `Avatar` component can be used as a visual representation of multiple users.\n * @public\n */\nexport const AvatarGroup = Object.assign(RootAvatarGroup, {\n  Item,\n});\n"],
+  "mappings": "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",
   "names": ["displayValues", "additionalValues"]
 }

package/esm/content/avatar-group/AvatarGroup.sty.js

@@ -1,8 +1,6 @@
 import "./AvatarGroup.css";
-var additionalAvatarWrapper = "_129un530-3-13-3";
-var avatarGroupItemWrapper = "_129un531-3-13-3";
+var avatarGroupItemWrapper = "_129un530-3-14-0";
 export {
-  additionalAvatarWrapper,
   avatarGroupItemWrapper
 };
 //# sourceMappingURL=AvatarGroup.sty.js.map

package/esm/content/avatar-group/AvatarGroup.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/avatar-group/AvatarGroup.css.ts"],
-  "sourcesContent": ["import './AvatarGroup.css';\nexport var additionalAvatarWrapper = '_129un530-3-13-3';\nexport var avatarGroupItemWrapper = '_129un531-3-13-3';"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,0BAA0B;AAC9B,IAAI,yBAAyB;",
+  "sourcesContent": ["import './AvatarGroup.css';\nexport var avatarGroupItemWrapper = '_129un530-3-14-0';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,yBAAyB;",
   "names": []
 }

package/esm/content/chip/BaseChip.css

@@ -1,45 +1,45 @@
-._1jgl8s50-3-13-3 ._1raebd91-3-13-3 {
+._1jgl8s50-3-14-0 ._1raebd91-3-14-0 {
   gap: 1px;
 }
-._1raebd92-3-13-3 {
+._1raebd92-3-14-0 {
   cursor: not-allowed;
 }
-._1raebd94-3-13-3 {
-  --_1raebd90-3-13-3: var(--dt-colors-border-neutral-default, #dadbe4);
+._1raebd94-3-14-0 {
+  --_1raebd90-3-14-0: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1raebd95-3-13-3 {
-  --_1raebd90-3-13-3: var(--dt-colors-border-primary-default, #d5dbf6);
+._1raebd95-3-14-0 {
+  --_1raebd90-3-14-0: var(--dt-colors-border-primary-default, #d5dbf6);
 }
-._1raebd96-3-13-3 {
-  --_1raebd90-3-13-3: var(--dt-colors-border-success-default, #d3dedd);
+._1raebd96-3-14-0 {
+  --_1raebd90-3-14-0: var(--dt-colors-border-success-default, #d3dedd);
 }
-._1raebd97-3-13-3 {
-  --_1raebd90-3-13-3: var(--dt-colors-border-warning-default, #f9ebdb);
+._1raebd97-3-14-0 {
+  --_1raebd90-3-14-0: var(--dt-colors-border-warning-default, #f9ebdb);
 }
-._1raebd98-3-13-3 {
-  --_1raebd90-3-13-3: var(--dt-colors-border-critical-default, #f6d6d5);
+._1raebd98-3-14-0 {
+  --_1raebd90-3-14-0: var(--dt-colors-border-critical-default, #f6d6d5);
 }
-._1jgl8s50-3-13-3 ._1raebd99-3-13-3 {
+._1jgl8s50-3-14-0 ._1raebd99-3-14-0 {
   gap: 0;
 }
-._1raebd9b-3-13-3 {
-  --_1raebd90-3-13-3: var(--dt-colors-border-neutral-disabled, #dadbe480);
+._1raebd9b-3-14-0 {
+  --_1raebd90-3-14-0: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._1raebd9c-3-13-3 {
-  --_1raebd90-3-13-3: var(--dt-colors-border-primary-disabled, #dadbe480);
+._1raebd9c-3-14-0 {
+  --_1raebd90-3-14-0: var(--dt-colors-border-primary-disabled, #dadbe480);
 }
-._1raebd9d-3-13-3 {
-  --_1raebd90-3-13-3: var(--dt-colors-border-success-disabled, #dadbe480);
+._1raebd9d-3-14-0 {
+  --_1raebd90-3-14-0: var(--dt-colors-border-success-disabled, #dadbe480);
 }
-._1raebd9e-3-13-3 {
-  --_1raebd90-3-13-3: var(--dt-colors-border-warning-disabled, #dadbe480);
+._1raebd9e-3-14-0 {
+  --_1raebd90-3-14-0: var(--dt-colors-border-warning-disabled, #dadbe480);
 }
-._1raebd9f-3-13-3 {
-  --_1raebd90-3-13-3: var(--dt-colors-border-critical-disabled, #dadbe480);
+._1raebd9f-3-14-0 {
+  --_1raebd90-3-14-0: var(--dt-colors-border-critical-disabled, #dadbe480);
 }
-._1raebd9g-3-13-3 {
-  background: var(--_bx32h2-3-13-3);
-  color: var(--_bx32h0-3-13-3);
+._1raebd9g-3-14-0 {
+  background: var(--_bx32h2-3-14-0);
+  color: var(--_bx32h0-3-14-0);
   position: relative;
   display: grid;
   grid: auto / auto-flow auto;
@@ -53,117 +53,117 @@
   transition-duration: var(--dt-animations-fade-out-duration-base, 250ms);
   transition-property: color, background-color, transform;
 }
-._1raebd9g-3-13-3:is(button) {
+._1raebd9g-3-14-0:is(button) {
   border: 0;
 }
-._1raebd9h-3-13-3 {
+._1raebd9h-3-14-0 {
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   height: var(--dt-spacings-size-24, 24px);
 }
-._1raebd9i-3-13-3 {
+._1raebd9i-3-14-0 {
   padding-left: var(--dt-spacings-size-2, 2px);
   padding-right: var(--dt-spacings-size-2, 2px);
   padding-top: 0;
   padding-bottom: 0;
   height: var(--dt-spacings-size-20, 20px);
 }
-._1raebd9j-3-13-3 {
+._1raebd9j-3-14-0 {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
-._1raebd9k-3-13-3 {
+._1raebd9k-3-14-0 {
   border-bottom-right-radius: var(--dt-borders-radius-field-subdued, 3px);
   border-top-right-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1raebd9l-3-13-3 {
+._1raebd9l-3-14-0 {
   cursor: not-allowed;
   pointer-events: none;
 }
-._1raebd9m-3-13-3:is(button) {
+._1raebd9m-3-14-0:is(button) {
   cursor: pointer;
 }
-._1jgl8s50-3-13-3 ._1raebd9s-3-13-3 {
+._1jgl8s50-3-14-0 ._1raebd9s-3-14-0 {
   border-style: var(--dt-borders-style-default, solid);
   border-width: var(--dt-borders-width-default, 1px);
-  border-color: var(--_1raebd90-3-13-3);
+  border-color: var(--_1raebd90-3-14-0);
 }
-._1raebd9u-3-13-3[tabindex]:hover, button._1raebd9u-3-13-3:hover, a._1raebd9u-3-13-3:hover {
+._1raebd9u-3-14-0[tabindex]:hover, button._1raebd9u-3-14-0:hover, a._1raebd9u-3-14-0:hover {
   background: var(--dt-colors-background-field-neutral-accent-hover, #4d4e72);
 }
-._1raebd9u-3-13-3[tabindex]:active, button._1raebd9u-3-13-3:active, a._1raebd9u-3-13-3:active {
+._1raebd9u-3-14-0[tabindex]:active, button._1raebd9u-3-14-0:active, a._1raebd9u-3-14-0:active {
   background: var(--dt-colors-background-field-neutral-accent-active, #404164);
 }
-._1raebd9v-3-13-3[tabindex]:hover, button._1raebd9v-3-13-3:hover, a._1raebd9v-3-13-3:hover {
+._1raebd9v-3-14-0[tabindex]:hover, button._1raebd9v-3-14-0:hover, a._1raebd9v-3-14-0:hover {
   background: var(--dt-colors-background-field-primary-accent-hover, #3b3fbe);
 }
-._1raebd9v-3-13-3[tabindex]:active, button._1raebd9v-3-13-3:active, a._1raebd9v-3-13-3:active {
+._1raebd9v-3-14-0[tabindex]:active, button._1raebd9v-3-14-0:active, a._1raebd9v-3-14-0:active {
   background: var(--dt-colors-background-field-primary-accent-active, #312dad);
 }
-._1raebd9w-3-13-3[tabindex]:hover, button._1raebd9w-3-13-3:hover, a._1raebd9w-3-13-3:hover {
+._1raebd9w-3-14-0[tabindex]:hover, button._1raebd9w-3-14-0:hover, a._1raebd9w-3-14-0:hover {
   background: var(--dt-colors-background-field-success-accent-hover, #1f5a54);
 }
-._1raebd9w-3-13-3[tabindex]:active, button._1raebd9w-3-13-3:active, a._1raebd9w-3-13-3:active {
+._1raebd9w-3-14-0[tabindex]:active, button._1raebd9w-3-14-0:active, a._1raebd9w-3-14-0:active {
   background: var(--dt-colors-background-field-success-accent-active, #0d4c47);
 }
-._1raebd9x-3-13-3[tabindex]:hover, button._1raebd9x-3-13-3:hover, a._1raebd9x-3-13-3:hover {
+._1raebd9x-3-14-0[tabindex]:hover, button._1raebd9x-3-14-0:hover, a._1raebd9x-3-14-0:hover {
   background: var(--dt-colors-background-field-warning-accent-hover, #ffb54f);
 }
-._1raebd9x-3-13-3[tabindex]:active, button._1raebd9x-3-13-3:active, a._1raebd9x-3-13-3:active {
+._1raebd9x-3-14-0[tabindex]:active, button._1raebd9x-3-14-0:active, a._1raebd9x-3-14-0:active {
   background: var(--dt-colors-background-field-warning-accent-active, #ffc76d);
 }
-._1raebd9y-3-13-3[tabindex]:hover, button._1raebd9y-3-13-3:hover, a._1raebd9y-3-13-3:hover {
+._1raebd9y-3-14-0[tabindex]:hover, button._1raebd9y-3-14-0:hover, a._1raebd9y-3-14-0:hover {
   background: var(--dt-colors-background-field-critical-accent-hover, #b4002b);
 }
-._1raebd9y-3-13-3[tabindex]:active, button._1raebd9y-3-13-3:active, a._1raebd9y-3-13-3:active {
+._1raebd9y-3-14-0[tabindex]:active, button._1raebd9y-3-14-0:active, a._1raebd9y-3-14-0:active {
   background: var(--dt-colors-background-field-critical-accent-active, #a2001d);
 }
-._1raebd9z-3-13-3[tabindex]:hover, button._1raebd9z-3-13-3:hover, a._1raebd9z-3-13-3:hover {
+._1raebd9z-3-14-0[tabindex]:hover, button._1raebd9z-3-14-0:hover, a._1raebd9z-3-14-0:hover {
   background: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1raebd9z-3-13-3[tabindex]:active, button._1raebd9z-3-13-3:active, a._1raebd9z-3-13-3:active {
+._1raebd9z-3-14-0[tabindex]:active, button._1raebd9z-3-14-0:active, a._1raebd9z-3-14-0:active {
   background: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1jgl8s50-3-13-3 ._1raebd9z-3-13-3 {
+._1jgl8s50-3-14-0 ._1raebd9z-3-14-0 {
   background: var(--dt-colors-background-base-default, #f9f9fa);
 }
-._1jgl8s50-3-13-3 ._1raebd9z-3-13-3[tabindex]:hover, ._1jgl8s50-3-13-3 button._1raebd9z-3-13-3:hover, ._1jgl8s50-3-13-3 a._1raebd9z-3-13-3:hover {
+._1jgl8s50-3-14-0 ._1raebd9z-3-14-0[tabindex]:hover, ._1jgl8s50-3-14-0 button._1raebd9z-3-14-0:hover, ._1jgl8s50-3-14-0 a._1raebd9z-3-14-0:hover {
   background: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1jgl8s50-3-13-3 ._1raebd9z-3-13-3[tabindex]:active, ._1jgl8s50-3-13-3 button._1raebd9z-3-13-3:active, ._1jgl8s50-3-13-3 a._1raebd9z-3-13-3:active {
+._1jgl8s50-3-14-0 ._1raebd9z-3-14-0[tabindex]:active, ._1jgl8s50-3-14-0 button._1raebd9z-3-14-0:active, ._1jgl8s50-3-14-0 a._1raebd9z-3-14-0:active {
   background: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1jgl8s50-3-13-3 ._1raebd910-3-13-3 {
+._1jgl8s50-3-14-0 ._1raebd910-3-14-0 {
   background: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1raebd911-3-13-3[tabindex]:hover, button._1raebd911-3-13-3:hover, a._1raebd911-3-13-3:hover {
+._1raebd911-3-14-0[tabindex]:hover, button._1raebd911-3-14-0:hover, a._1raebd911-3-14-0:hover {
   background: var(--dt-colors-background-field-primary-emphasized-hover, #d5dbf6);
 }
-._1raebd911-3-13-3[tabindex]:active, button._1raebd911-3-13-3:active, a._1raebd911-3-13-3:active {
+._1raebd911-3-14-0[tabindex]:active, button._1raebd911-3-14-0:active, a._1raebd911-3-14-0:active {
   background: var(--dt-colors-background-field-primary-emphasized-active, #c9d1f4);
 }
-._1raebd912-3-13-3[tabindex]:hover, button._1raebd912-3-13-3:hover, a._1raebd912-3-13-3:hover {
+._1raebd912-3-14-0[tabindex]:hover, button._1raebd912-3-14-0:hover, a._1raebd912-3-14-0:hover {
   background: var(--dt-colors-background-field-success-emphasized-hover, #d3dedd);
 }
-._1raebd912-3-13-3[tabindex]:active, button._1raebd912-3-13-3:active, a._1raebd912-3-13-3:active {
+._1raebd912-3-14-0[tabindex]:active, button._1raebd912-3-14-0:active, a._1raebd912-3-14-0:active {
   background: var(--dt-colors-background-field-success-emphasized-active, #c7d5d3);
 }
-._1raebd913-3-13-3[tabindex]:hover, button._1raebd913-3-13-3:hover, a._1raebd913-3-13-3:hover {
+._1raebd913-3-14-0[tabindex]:hover, button._1raebd913-3-14-0:hover, a._1raebd913-3-14-0:hover {
   background: var(--dt-colors-background-field-warning-emphasized-hover, #f9ebdb);
 }
-._1raebd913-3-13-3[tabindex]:active, button._1raebd913-3-13-3:active, a._1raebd913-3-13-3:active {
+._1raebd913-3-14-0[tabindex]:active, button._1raebd913-3-14-0:active, a._1raebd913-3-14-0:active {
   background: var(--dt-colors-background-field-warning-emphasized-active, #f9e6d0);
 }
-._1raebd914-3-13-3[tabindex]:hover, button._1raebd914-3-13-3:hover, a._1raebd914-3-13-3:hover {
+._1raebd914-3-14-0[tabindex]:hover, button._1raebd914-3-14-0:hover, a._1raebd914-3-14-0:hover {
   background: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._1raebd914-3-13-3[tabindex]:active, button._1raebd914-3-13-3:active, a._1raebd914-3-13-3:active {
+._1raebd914-3-14-0[tabindex]:active, button._1raebd914-3-14-0:active, a._1raebd914-3-14-0:active {
   background: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1raebd915-3-13-3 {
-  color: var(--_bx32h0-3-13-3);
+._1raebd915-3-14-0 {
+  color: var(--_bx32h0-3-14-0);
   min-width: 0;
   box-sizing: border-box;
   white-space: nowrap;
@@ -173,14 +173,14 @@
   text-transform: none;
   padding-inline: var(--dt-spacings-size-2, 2px);
 }
-._1raebd915-3-13-3 * {
-  color: var(--_bx32h0-3-13-3);
+._1raebd915-3-14-0 * {
+  color: var(--_bx32h0-3-14-0);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   vertical-align: baseline;
 }
-._1raebd916-3-13-3 {
+._1raebd916-3-14-0 {
   display: grid;
   grid: auto / auto-flow auto;
 }