@dynatrace/strato-components 3.13.2 → 3.14.0

package/esm/content/accordion/AccordionSection.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/accordion/AccordionSection.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ElementType,\n  forwardRef,\n  type ReactElement,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { ChevronDownSmallIcon } from '@dynatrace/strato-icons';\n\nimport { AccordionActions } from './accordion-state.js';\nimport {\n  accordionTriggerIconCSS,\n  accordionTriggerIconEndCSS,\n  accordionTriggerIconExpandedCSS,\n  accordionTriggerIconStartCSS,\n} from './Accordion.sty.js';\nimport { AccordionSectionContent } from './AccordionSectionContent.js';\nimport { AccordionSectionLabel } from './AccordionSectionLabel.js';\nimport { useAccordionContext } from './contexts/AccordionContext.js';\nimport { AccordionSectionContext } from './contexts/AccordionSectionContext.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useResizeObserver } from '../../core/hooks/useResizeObserver.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { fieldTokens as fieldColorsCSS } from '../../styles/field.sty.js';\n\n// #region Typings\n// Merge own props with others inherited from the underlying element type\n/** @public */\nexport type AccordionSectionProps<E extends ElementType> = Omit<\n  PolymorphicComponentProps<E, AccordionSectionOwnProps>,\n  'id'\n> &\n  Pick<AccordionSectionOwnProps, 'id'>;\n\n/** @public */\nexport interface AccordionSectionOwnProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId {\n  /**\n   * Determines whether the section is disabled.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n\n  /**\n   * Unique identifier of a section within an accordion.\n   * This type will be reduced to string in version 2.0.0 and its value will be reflected in the\n   * dom.\n   */\n  id: string | number;\n\n  /**\n   * Unique identifier of a section within an accordion. This will be used as an override and will function\n   * as the sole identifier in version 2.0.0.\n   */\n  sectionId?: string | number;\n\n  /**\n   * Defines if the sections content will be kept in the DOM, even if the content\n   * is not shown to the user.\n   * @defaultValue false\n   */\n  keepMounted?: boolean;\n\n  /**\n   * The color of the accordion section.\n   * Setting the color affects the button, label and content.\n   */\n  color?: 'neutral' | 'primary' | 'success' | 'warning' | 'critical';\n}\n\n//#endregion Typings\n\n/**\n * Accordion Section component\n * @public\n */\nexport const AccordionSection: <E extends ElementType = 'div'>(\n  props: AccordionSectionProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    props: AccordionSectionProps<E>,\n    forwardedRef: typeof props.ref,\n  ) => {\n    const {\n      disabled = false,\n      id: idProp,\n      sectionId,\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      keepMounted = false,\n      'data-testid': dataTestId,\n      as,\n      ...remainingProps\n    }: AccordionSectionProps<E> = props;\n\n    const [slots] = useSlots(children, {\n      label: AccordionSectionLabel,\n      content: AccordionSectionContent,\n    });\n    const sectionLabel = slots.label;\n    const triggerAriaLabel = sectionLabel?.props?.['aria-label'];\n    const { triggerPosition, interactive, color, size, state, dispatch } =\n      useAccordionContext();\n\n    const sectionColor = props.color ?? color;\n\n    const triggerId = useId();\n    const contentId = useId();\n    const triggerIsStart = triggerPosition === 'start';\n    const id = sectionId ?? idProp;\n\n    const isExpanded = state.expanded.has(id);\n\n    const labelId = useId();\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const { width } = useResizeObserver({ ref: containerRef.current });\n    const [offsetWidth, setOffsetWidth] = useState(0);\n\n    const updateOverflowWidth = useCallback(() => {\n      if (containerRef.current) {\n        setOffsetWidth(\n          containerRef.current.scrollWidth - containerRef.current.offsetWidth,\n        );\n      }\n    }, []);\n\n    const dataDtProperties = `state:${isExpanded ? 'collapse' : 'expand'}`;\n\n    useLayoutEffect(() => {\n      updateOverflowWidth();\n    }, [updateOverflowWidth, width]);\n\n    const trigger = (\n      <Button\n        id={triggerId}\n        onClick={() => {\n          if (!interactive) {\n            dispatch({ type: AccordionActions.TOGGLE_SECTION, payload: id });\n          }\n        }}\n        color={sectionColor}\n        size={size}\n        disabled={disabled}\n        aria-label={triggerAriaLabel}\n        aria-labelledby={triggerAriaLabel ? undefined : labelId}\n        aria-expanded={isExpanded}\n        aria-controls={isExpanded || keepMounted ? contentId : undefined}\n        data-dt-children-name=\"ExpandCollapse\"\n        data-dt-properties={dataDtProperties}\n      >\n        <Button.Prefix>\n          <ChevronDownSmallIcon\n            className={clsx(accordionTriggerIconCSS, {\n              [accordionTriggerIconStartCSS]: triggerIsStart,\n              [accordionTriggerIconEndCSS]: !triggerIsStart,\n              [accordionTriggerIconExpandedCSS]: isExpanded,\n            })}\n          />\n        </Button.Prefix>\n      </Button>\n    );\n\n    const Section: ElementType = as ?? 'div';\n\n    return (\n      <Section\n        data-testid={dataTestId}\n        ref={forwardedRef}\n        className={clsx(\n          fieldColorsCSS({ color: sectionColor }),\n          consumerClassName,\n        )}\n        style={consumerStyle}\n        {...remainingProps}\n      >\n        {(sectionLabel || slots.content) && (\n          <AccordionSectionContext.Provider\n            value={{\n              labelId,\n              triggerId,\n              contentId,\n              isExpanded,\n              keepMounted,\n              size,\n            }}\n          >\n            <Flex\n              ref={containerRef}\n              flexDirection=\"row\"\n              alignItems=\"center\"\n              justifyContent={triggerIsStart ? undefined : 'space-between'}\n              gap={size === 'default' ? 8 : 4}\n              onClick={() => {\n                if (interactive && !disabled) {\n                  dispatch({\n                    type: AccordionActions.TOGGLE_SECTION,\n                    payload: id,\n                  });\n                }\n              }}\n              style={{\n                cursor: interactive && !disabled ? 'pointer' : undefined,\n                width: `calc(100% - ${offsetWidth}px)`,\n              }}\n              data-dt-children-name=\"ExpandCollapseHeader\"\n              data-dt-properties={dataDtProperties}\n            >\n              {triggerIsStart && trigger}\n              {sectionLabel}\n              {!triggerIsStart && trigger}\n            </Flex>\n            {slots.content}\n          </AccordionSectionContext.Provider>\n        )}\n      </Section>\n    );\n  },\n);\n\n(\n  AccordionSection as typeof AccordionSection & { displayName: string }\n).displayName = 'Accordion.Section';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ElementType,\n  forwardRef,\n  type ReactElement,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { ChevronDownSmallIcon } from '@dynatrace/strato-icons';\n\nimport { AccordionActions } from './accordion-state.js';\nimport {\n  accordionTriggerIconCSS,\n  accordionTriggerIconEndCSS,\n  accordionTriggerIconExpandedCSS,\n  accordionTriggerIconStartCSS,\n} from './Accordion.sty.js';\nimport { AccordionSectionContent } from './AccordionSectionContent.js';\nimport { AccordionSectionLabel } from './AccordionSectionLabel.js';\nimport { useAccordionContext } from './contexts/AccordionContext.js';\nimport { AccordionSectionContext } from './contexts/AccordionSectionContext.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useResizeObserver } from '../../core/hooks/useResizeObserver.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { fieldTokens as fieldColorsCSS } from '../../styles/field.sty.js';\n\n// #region Typings\n// Merge own props with others inherited from the underlying element type\n/** @public */\nexport type AccordionSectionProps<E extends ElementType> = Omit<\n  PolymorphicComponentProps<E, AccordionSectionOwnProps>,\n  'id'\n> &\n  Pick<AccordionSectionOwnProps, 'id'>;\n\n/** @public */\nexport interface AccordionSectionOwnProps\n  extends WithChildren, StylingProps, DataTestId {\n  /**\n   * Determines whether the section is disabled.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n\n  /**\n   * Unique identifier of a section within an accordion.\n   * This type will be reduced to string in version 2.0.0 and its value will be reflected in the\n   * dom.\n   */\n  id: string | number;\n\n  /**\n   * Unique identifier of a section within an accordion. This will be used as an override and will function\n   * as the sole identifier in version 2.0.0.\n   */\n  sectionId?: string | number;\n\n  /**\n   * Defines if the sections content will be kept in the DOM, even if the content\n   * is not shown to the user.\n   * @defaultValue false\n   */\n  keepMounted?: boolean;\n\n  /**\n   * The color of the accordion section.\n   * Setting the color affects the button, label and content.\n   */\n  color?: 'neutral' | 'primary' | 'success' | 'warning' | 'critical';\n}\n\n//#endregion Typings\n\n/**\n * Accordion Section component\n * @public\n */\nexport const AccordionSection: <E extends ElementType = 'div'>(\n  props: AccordionSectionProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    props: AccordionSectionProps<E>,\n    forwardedRef: typeof props.ref,\n  ) => {\n    const {\n      disabled = false,\n      id: idProp,\n      sectionId,\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      keepMounted = false,\n      'data-testid': dataTestId,\n      as,\n      ...remainingProps\n    }: AccordionSectionProps<E> = props;\n\n    const [slots] = useSlots(children, {\n      label: AccordionSectionLabel,\n      content: AccordionSectionContent,\n    });\n    const sectionLabel = slots.label;\n    const triggerAriaLabel = sectionLabel?.props?.['aria-label'];\n    const { triggerPosition, interactive, color, size, state, dispatch } =\n      useAccordionContext();\n\n    const sectionColor = props.color ?? color;\n\n    const triggerId = useId();\n    const contentId = useId();\n    const triggerIsStart = triggerPosition === 'start';\n    const id = sectionId ?? idProp;\n\n    const isExpanded = state.expanded.has(id);\n\n    const labelId = useId();\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const { width } = useResizeObserver({ ref: containerRef.current });\n    const [offsetWidth, setOffsetWidth] = useState(0);\n\n    const updateOverflowWidth = useCallback(() => {\n      if (containerRef.current) {\n        setOffsetWidth(\n          containerRef.current.scrollWidth - containerRef.current.offsetWidth,\n        );\n      }\n    }, []);\n\n    const dataDtProperties = `state:${isExpanded ? 'collapse' : 'expand'}`;\n\n    useLayoutEffect(() => {\n      updateOverflowWidth();\n    }, [updateOverflowWidth, width]);\n\n    const trigger = (\n      <Button\n        id={triggerId}\n        onClick={() => {\n          if (!interactive) {\n            dispatch({ type: AccordionActions.TOGGLE_SECTION, payload: id });\n          }\n        }}\n        color={sectionColor}\n        size={size}\n        disabled={disabled}\n        aria-label={triggerAriaLabel}\n        aria-labelledby={triggerAriaLabel ? undefined : labelId}\n        aria-expanded={isExpanded}\n        aria-controls={isExpanded || keepMounted ? contentId : undefined}\n        data-dt-children-name=\"ExpandCollapse\"\n        data-dt-properties={dataDtProperties}\n      >\n        <Button.Prefix>\n          <ChevronDownSmallIcon\n            className={clsx(accordionTriggerIconCSS, {\n              [accordionTriggerIconStartCSS]: triggerIsStart,\n              [accordionTriggerIconEndCSS]: !triggerIsStart,\n              [accordionTriggerIconExpandedCSS]: isExpanded,\n            })}\n          />\n        </Button.Prefix>\n      </Button>\n    );\n\n    const Section: ElementType = as ?? 'div';\n\n    return (\n      <Section\n        data-testid={dataTestId}\n        ref={forwardedRef}\n        className={clsx(\n          fieldColorsCSS({ color: sectionColor }),\n          consumerClassName,\n        )}\n        style={consumerStyle}\n        {...remainingProps}\n      >\n        {(sectionLabel || slots.content) && (\n          <AccordionSectionContext.Provider\n            value={{\n              labelId,\n              sectionAriaLabel: triggerAriaLabel,\n              contentId,\n              isExpanded,\n              keepMounted,\n              size,\n            }}\n          >\n            <Flex\n              ref={containerRef}\n              flexDirection=\"row\"\n              alignItems=\"center\"\n              justifyContent={triggerIsStart ? undefined : 'space-between'}\n              gap={size === 'default' ? 8 : 4}\n              onClick={() => {\n                if (interactive && !disabled) {\n                  dispatch({\n                    type: AccordionActions.TOGGLE_SECTION,\n                    payload: id,\n                  });\n                }\n              }}\n              style={{\n                cursor: interactive && !disabled ? 'pointer' : undefined,\n                width: `calc(100% - ${offsetWidth}px)`,\n              }}\n              data-dt-children-name=\"ExpandCollapseHeader\"\n              data-dt-properties={dataDtProperties}\n            >\n              {triggerIsStart && trigger}\n              {sectionLabel}\n              {!triggerIsStart && trigger}\n            </Flex>\n            {slots.content}\n          </AccordionSectionContext.Provider>\n        )}\n      </Section>\n    );\n  },\n);\n\n(\n  AccordionSection as typeof AccordionSection & { displayName: string }\n).displayName = 'Accordion.Section';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/content/accordion/AccordionSectionContent.js

@@ -32,9 +32,14 @@ const AccordionSectionContent = /* @__PURE__ */ forwardRef((props, forwardedRef)
     style: consumerStyle,
     "data-testid": dataTestId
   } = props;
-  const { triggerId, contentId, isExpanded, keepMounted, size } = useContext(
-    AccordionSectionContext
-  );
+  const {
+    labelId,
+    sectionAriaLabel,
+    contentId,
+    isExpanded,
+    keepMounted,
+    size
+  } = useContext(AccordionSectionContext);
   const childIsText = _canReceiveDefaultTextFormat(children);
   const [isAnimating, setIsAnimating] = useState(false);
   const shouldReduceMotion = useReducedMotion();
@@ -75,7 +80,8 @@ const AccordionSectionContent = /* @__PURE__ */ forwardRef((props, forwardedRef)
           ref: forwardedRef,
           id: contentId,
           role: "region",
-          "aria-labelledby": triggerId,
+          "aria-label": sectionAriaLabel,
+          "aria-labelledby": sectionAriaLabel ? void 0 : labelId,
           children: childIsText ? /* @__PURE__ */ jsx(Text, { textStyle: "base", as: "p", children }) : children
         }
       )

package/esm/content/accordion/AccordionSectionContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/accordion/AccordionSectionContent.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  AnimatePresence,\n  motion,\n  useReducedMotion,\n  type Variants,\n} from 'framer-motion';\nimport { forwardRef, useContext, useState } from 'react';\n\nimport AnimationsJS from '@dynatrace/strato-design-tokens/animations-js';\n\nimport {\n  accordionContentCSS,\n  accordionContentWrapperCSS,\n} from './Accordion.sty.js';\nimport { AccordionSectionContext } from './contexts/AccordionSectionContext.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from '../../core/utils/can-receive-default-text-format.js';\nimport { expandCollapseEasing } from '../../core/utils/framer-motion-easings.js';\nimport { Text } from '../../typography/text/Text.js';\n\n/** @public */\nexport type AccordionSectionContentProps = WithChildren &\n  StylingProps &\n  DataTestId;\n\n//variant for accordion section expand and collapse animation\nconst animationVariantSectionContent: Variants = {\n  expanded: {\n    height: 'auto',\n    opacity: 1,\n  },\n  collapsed: {\n    height: 0,\n    opacity: 0,\n  },\n};\n// #endregion\n\n/**\n * Accordion Section Content component\n * @public\n */\nexport const AccordionSectionContent = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  AccordionSectionContentProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  }: AccordionSectionContentProps = props;\n  const { triggerId, contentId, isExpanded, keepMounted, size } = useContext(\n    AccordionSectionContext,\n  );\n  const childIsText = _canReceiveDefaultTextFormat(children);\n  const [isAnimating, setIsAnimating] = useState(false);\n  const shouldReduceMotion = useReducedMotion();\n\n  const content = (\n    <motion.div\n      data-testid={dataTestId}\n      aria-hidden={keepMounted && !isExpanded ? true : undefined}\n      variants={animationVariantSectionContent}\n      initial=\"collapsed\"\n      animate={isExpanded ? 'expanded' : 'collapsed'}\n      exit=\"collapsed\"\n      transition={{\n        duration: shouldReduceMotion\n          ? 0\n          : AnimationsJS.ExpandCollapse.Duration.Base,\n        ease: expandCollapseEasing,\n      }}\n      className={clsx(accordionContentWrapperCSS, consumerClassName)}\n      style={{\n        ...consumerStyle,\n        willChange: 'initial',\n        overflow:\n          keepMounted && (isAnimating || !isExpanded) ? 'hidden' : undefined,\n      }}\n      onAnimationStart={() => {\n        setIsAnimating(true);\n      }}\n      onAnimationComplete={() => {\n        setIsAnimating(false);\n      }}\n    >\n      <div\n        className={clsx([\n          accordionContentCSS({\n            size,\n          }),\n          consumerClassName,\n        ])}\n        ref={forwardedRef}\n        id={contentId}\n        role=\"region\"\n        aria-labelledby={triggerId}\n      >\n        {childIsText ? (\n          <Text textStyle=\"base\" as=\"p\">\n            {children}\n          </Text>\n        ) : (\n          children\n        )}\n      </div>\n    </motion.div>\n  );\n\n  if (keepMounted) {\n    return content;\n  }\n\n  return (\n    <div style={{ overflow: isAnimating ? 'hidden' : undefined }}>\n      <AnimatePresence initial={false}>{isExpanded && content}</AnimatePresence>\n    </div>\n  );\n});\n\n(\n  AccordionSectionContent as typeof AccordionSectionContent & {\n    displayName: string;\n  }\n).displayName = 'Accordion.SectionContent';\n"],
-  "mappings": "AAuGU;AAvGV,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,YAAY,YAAY,gBAAgB;AAEjD,OAAO,kBAAkB;AAEzB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,+BAA+B;AAIxC,SAAS,+BAA+B,oCAAoC;AAC5E,SAAS,4BAA4B;AACrC,SAAS,YAAY;AAQrB,MAAM,iCAA2C;AAAA,EAC/C,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;AAOO,MAAM,0BAA0C,2BAGrD,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAkC;AAClC,QAAM,EAAE,WAAW,WAAW,YAAY,aAAa,KAAK,IAAI;AAAA,IAC9D;AAAA,EACF;AACA,QAAM,cAAc,6BAA6B,QAAQ;AACzD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,QAAM,qBAAqB,iBAAiB;AAE5C,QAAM,UACJ;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,eAAa;AAAA,MACb,eAAa,eAAe,CAAC,aAAa,OAAO;AAAA,MACjD,UAAU;AAAA,MACV,SAAQ;AAAA,MACR,SAAS,aAAa,aAAa;AAAA,MACnC,MAAK;AAAA,MACL,YAAY;AAAA,QACV,UAAU,qBACN,IACA,aAAa,eAAe,SAAS;AAAA,QACzC,MAAM;AAAA,MACR;AAAA,MACA,WAAW,KAAK,4BAA4B,iBAAiB;AAAA,MAC7D,OAAO;AAAA,QACL,GAAG;AAAA,QACH,YAAY;AAAA,QACZ,UACE,gBAAgB,eAAe,CAAC,cAAc,WAAW;AAAA,MAC7D;AAAA,MACA,kBAAkB,MAAM;AACtB,uBAAe,IAAI;AAAA,MACrB;AAAA,MACA,qBAAqB,MAAM;AACzB,uBAAe,KAAK;AAAA,MACtB;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,KAAK;AAAA,YACd,oBAAoB;AAAA,cAClB;AAAA,YACF,CAAC;AAAA,YACD;AAAA,UACF,CAAC;AAAA,UACD,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,MAAK;AAAA,UACL,mBAAiB;AAAA,UAEhB,wBACC,oBAAC,QAAK,WAAU,QAAO,IAAG,KACvB,UACH,IAEA;AAAA;AAAA,MAEJ;AAAA;AAAA,EACF;AAGF,MAAI,aAAa;AACf,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,SAAI,OAAO,EAAE,UAAU,cAAc,WAAW,OAAU,GACzD,8BAAC,mBAAgB,SAAS,OAAQ,wBAAc,SAAQ,GAC1D;AAEJ,CAAC;AAGC,wBAGA,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  AnimatePresence,\n  motion,\n  useReducedMotion,\n  type Variants,\n} from 'framer-motion';\nimport { forwardRef, useContext, useState } from 'react';\n\nimport AnimationsJS from '@dynatrace/strato-design-tokens/animations-js';\n\nimport {\n  accordionContentCSS,\n  accordionContentWrapperCSS,\n} from './Accordion.sty.js';\nimport { AccordionSectionContext } from './contexts/AccordionSectionContext.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from '../../core/utils/can-receive-default-text-format.js';\nimport { expandCollapseEasing } from '../../core/utils/framer-motion-easings.js';\nimport { Text } from '../../typography/text/Text.js';\n\n/** @public */\nexport type AccordionSectionContentProps = WithChildren &\n  StylingProps &\n  DataTestId;\n\n//variant for accordion section expand and collapse animation\nconst animationVariantSectionContent: Variants = {\n  expanded: {\n    height: 'auto',\n    opacity: 1,\n  },\n  collapsed: {\n    height: 0,\n    opacity: 0,\n  },\n};\n// #endregion\n\n/**\n * Accordion Section Content component\n * @public\n */\nexport const AccordionSectionContent = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  AccordionSectionContentProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  }: AccordionSectionContentProps = props;\n  const {\n    labelId,\n    sectionAriaLabel,\n    contentId,\n    isExpanded,\n    keepMounted,\n    size,\n  } = useContext(AccordionSectionContext);\n  const childIsText = _canReceiveDefaultTextFormat(children);\n  const [isAnimating, setIsAnimating] = useState(false);\n  const shouldReduceMotion = useReducedMotion();\n\n  const content = (\n    <motion.div\n      data-testid={dataTestId}\n      aria-hidden={keepMounted && !isExpanded ? true : undefined}\n      variants={animationVariantSectionContent}\n      initial=\"collapsed\"\n      animate={isExpanded ? 'expanded' : 'collapsed'}\n      exit=\"collapsed\"\n      transition={{\n        duration: shouldReduceMotion\n          ? 0\n          : AnimationsJS.ExpandCollapse.Duration.Base,\n        ease: expandCollapseEasing,\n      }}\n      className={clsx(accordionContentWrapperCSS, consumerClassName)}\n      style={{\n        ...consumerStyle,\n        willChange: 'initial',\n        overflow:\n          keepMounted && (isAnimating || !isExpanded) ? 'hidden' : undefined,\n      }}\n      onAnimationStart={() => {\n        setIsAnimating(true);\n      }}\n      onAnimationComplete={() => {\n        setIsAnimating(false);\n      }}\n    >\n      <div\n        className={clsx([\n          accordionContentCSS({\n            size,\n          }),\n          consumerClassName,\n        ])}\n        ref={forwardedRef}\n        id={contentId}\n        role=\"region\"\n        aria-label={sectionAriaLabel}\n        aria-labelledby={sectionAriaLabel ? undefined : labelId}\n      >\n        {childIsText ? (\n          <Text textStyle=\"base\" as=\"p\">\n            {children}\n          </Text>\n        ) : (\n          children\n        )}\n      </div>\n    </motion.div>\n  );\n\n  if (keepMounted) {\n    return content;\n  }\n\n  return (\n    <div style={{ overflow: isAnimating ? 'hidden' : undefined }}>\n      <AnimatePresence initial={false}>{isExpanded && content}</AnimatePresence>\n    </div>\n  );\n});\n\n(\n  AccordionSectionContent as typeof AccordionSectionContent & {\n    displayName: string;\n  }\n).displayName = 'Accordion.SectionContent';\n"],
+  "mappings": "AA6GU;AA7GV,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,YAAY,YAAY,gBAAgB;AAEjD,OAAO,kBAAkB;AAEzB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,+BAA+B;AAIxC,SAAS,+BAA+B,oCAAoC;AAC5E,SAAS,4BAA4B;AACrC,SAAS,YAAY;AAQrB,MAAM,iCAA2C;AAAA,EAC/C,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;AAOO,MAAM,0BAA0C,2BAGrD,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAkC;AAClC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,uBAAuB;AACtC,QAAM,cAAc,6BAA6B,QAAQ;AACzD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,QAAM,qBAAqB,iBAAiB;AAE5C,QAAM,UACJ;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,eAAa;AAAA,MACb,eAAa,eAAe,CAAC,aAAa,OAAO;AAAA,MACjD,UAAU;AAAA,MACV,SAAQ;AAAA,MACR,SAAS,aAAa,aAAa;AAAA,MACnC,MAAK;AAAA,MACL,YAAY;AAAA,QACV,UAAU,qBACN,IACA,aAAa,eAAe,SAAS;AAAA,QACzC,MAAM;AAAA,MACR;AAAA,MACA,WAAW,KAAK,4BAA4B,iBAAiB;AAAA,MAC7D,OAAO;AAAA,QACL,GAAG;AAAA,QACH,YAAY;AAAA,QACZ,UACE,gBAAgB,eAAe,CAAC,cAAc,WAAW;AAAA,MAC7D;AAAA,MACA,kBAAkB,MAAM;AACtB,uBAAe,IAAI;AAAA,MACrB;AAAA,MACA,qBAAqB,MAAM;AACzB,uBAAe,KAAK;AAAA,MACtB;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,KAAK;AAAA,YACd,oBAAoB;AAAA,cAClB;AAAA,YACF,CAAC;AAAA,YACD;AAAA,UACF,CAAC;AAAA,UACD,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,MAAK;AAAA,UACL,cAAY;AAAA,UACZ,mBAAiB,mBAAmB,SAAY;AAAA,UAE/C,wBACC,oBAAC,QAAK,WAAU,QAAO,IAAG,KACvB,UACH,IAEA;AAAA;AAAA,MAEJ;AAAA;AAAA,EACF;AAGF,MAAI,aAAa;AACf,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,SAAI,OAAO,EAAE,UAAU,cAAc,WAAW,OAAU,GACzD,8BAAC,mBAAgB,SAAS,OAAQ,wBAAc,SAAQ,GAC1D;AAEJ,CAAC;AAGC,wBAGA,cAAc;",
   "names": []
 }

package/esm/content/accordion/contexts/AccordionSectionContext.js

@@ -1,7 +1,7 @@
 import { createContext } from "react";
 const AccordionSectionContext = createContext({
   labelId: "",
-  triggerId: "",
+  sectionAriaLabel: void 0,
   contentId: "",
   isExpanded: false,
   keepMounted: false,

package/esm/content/accordion/contexts/AccordionSectionContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/content/accordion/contexts/AccordionSectionContext.tsx"],
-  "sourcesContent": ["import { type Context, createContext } from 'react';\n\n/** @internal */\ntype AccordionSectionContextProps = {\n  labelId: string;\n  triggerId: string;\n  contentId: string;\n  isExpanded: boolean;\n  keepMounted: boolean;\n  size: 'default' | 'condensed';\n};\n\n/** @internal */\nexport const AccordionSectionContext: Context<AccordionSectionContextProps> =\n  createContext<AccordionSectionContextProps>({\n    labelId: '',\n    triggerId: '',\n    contentId: '',\n    isExpanded: false,\n    keepMounted: false,\n    size: 'default',\n  });\n"],
-  "mappings": "AAAA,SAAuB,qBAAqB;AAarC,MAAM,0BACX,cAA4C;AAAA,EAC1C,SAAS;AAAA,EACT,WAAW;AAAA,EACX,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,MAAM;AACR,CAAC;",
+  "sourcesContent": ["import { type Context, createContext } from 'react';\n\n/** @internal */\ntype AccordionSectionContextProps = {\n  labelId: string;\n  sectionAriaLabel: string | undefined;\n  contentId: string;\n  isExpanded: boolean;\n  keepMounted: boolean;\n  size: 'default' | 'condensed';\n};\n\n/** @internal */\nexport const AccordionSectionContext: Context<AccordionSectionContextProps> =\n  createContext<AccordionSectionContextProps>({\n    labelId: '',\n    sectionAriaLabel: undefined,\n    contentId: '',\n    isExpanded: false,\n    keepMounted: false,\n    size: 'default',\n  });\n"],
+  "mappings": "AAAA,SAAuB,qBAAqB;AAarC,MAAM,0BACX,cAA4C;AAAA,EAC1C,SAAS;AAAA,EACT,kBAAkB;AAAA,EAClB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,MAAM;AACR,CAAC;",
   "names": []
 }

package/esm/content/ai-loading-indicator/AiLoadingIndicator.css

@@ -1,4 +1,4 @@
-@keyframes _1te6oqj4-3-13-2 {
+@keyframes _1te6oqj4-3-14-0 {
   0% {
     background-position: 20% 0%;
   }
@@ -6,27 +6,27 @@
     background-position: -120% 100%;
   }
 }
-._1te6oqj5-3-13-2 {
-  --_1te6oqj0-3-13-2: #CB53F6;
-  --_1te6oqj1-3-13-2: #7FF8F9;
-  --_1te6oqj2-3-13-2: 15%;
-  --_1te6oqj3-3-13-2: 5%;
+._1te6oqj5-3-14-0 {
+  --_1te6oqj0-3-14-0: #CB53F6;
+  --_1te6oqj1-3-14-0: #7FF8F9;
+  --_1te6oqj2-3-14-0: 15%;
+  --_1te6oqj3-3-14-0: 5%;
   position: relative;
-  background-image: linear-gradient(90deg, transparent 0%, transparent 5%, var(--dt-colors-text-neutral-default, #2f2f4f) 10%, var(--dt-colors-text-neutral-default, #2f2f4f) 90%, transparent 95%, transparent 100%), linear-gradient(var(--_1te6oqj0-3-13-2) 0%, var(--_1te6oqj1-3-13-2) 100%);
+  background-image: linear-gradient(90deg, transparent 0%, transparent 5%, var(--dt-colors-text-neutral-default, #2f2f4f) 10%, var(--dt-colors-text-neutral-default, #2f2f4f) 90%, transparent 95%, transparent 100%), linear-gradient(var(--_1te6oqj0-3-14-0) 0%, var(--_1te6oqj1-3-14-0) 100%);
   background-size: 200% 600%;
   background-position: 0% 0%;
   background-clip: text;
   color: transparent;
-  animation-name: _1te6oqj4-3-13-2;
+  animation-name: _1te6oqj4-3-14-0;
   animation-duration: var(--dt-timings-slowest-gentle, 1500ms);
   animation-iteration-count: infinite;
   animation-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._1te6oqj6-3-13-2 {
+._1te6oqj6-3-14-0 {
   padding-top: calc(var(--dt-spacings-size-20, 20px) / 2 - 0.5lh);
   min-width: 0;
 }
-._1te6oqj7-3-13-2 {
+._1te6oqj7-3-14-0 {
   width: var(--dt-spacings-size-20, 20px);
   min-height: 1lh;
   display: flex;
@@ -34,14 +34,21 @@
   align-items: center;
   flex-shrink: 0;
 }
-._1te6oqj7-3-13-2 svg {
+._1te6oqj7-3-14-0 svg {
   display: block;
   width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
 }
-._1te6oqj8-3-13-2 {
+._1te6oqj8-3-14-0 {
   display: inline-flex;
   align-items: center;
   vertical-align: middle;
   min-width: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  ._1te6oqj5-3-14-0 {
+    animation: none;
+    background-image: none;
+    color: inherit;
+  }
 }

package/esm/content/ai-loading-indicator/AiLoadingIndicator.js

@@ -1,6 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useReducedMotion } from "framer-motion";
 import { forwardRef } from "react";
 import * as styles from "./AiLoadingIndicator.sty.js";
 import { AiLoadingIndicatorIcon } from "./AiLoadingIndicatorIcon.js";
@@ -31,7 +30,6 @@ const InternalAiLoadingIndicator = forwardRef((props, forwardedRef) => {
   const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);
   const { "aria-labelledby": ariaLabelledBy, ...remainingAriaLabelingProps } = ariaLabelingProps;
   const labelId = useId();
-  const shouldReduceMotion = useReducedMotion();
   return /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -53,17 +51,7 @@ const InternalAiLoadingIndicator = forwardRef((props, forwardedRef) => {
       "data-dt-component": COMPONENT_NAME,
       children: [
         slots.icon,
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            id: labelId,
-            className: clsx(
-              styles.label,
-              !shouldReduceMotion && styles.labelAnimation
-            ),
-            children: label
-          }
-        )
+        /* @__PURE__ */ jsx("div", { id: labelId, className: clsx(styles.label, styles.labelAnimation), children: label })
       ]
     }
   );

package/esm/content/ai-loading-indicator/AiLoadingIndicator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/ai-loading-indicator/AiLoadingIndicator.tsx"],
-  "sourcesContent": ["import { clsx } from 'clsx';\nimport { useReducedMotion } from 'framer-motion';\nimport { forwardRef, type AriaAttributes, type ReactNode } from 'react';\n\nimport * as styles from './AiLoadingIndicator.sty.js';\nimport { AiLoadingIndicatorIcon } from './AiLoadingIndicatorIcon.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { useSlots } from '../../core/hooks/useSlots.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 { Flex } from '../../layouts/flex/Flex.js';\n\nconst COMPONENT_NAME = 'AiLoadingIndicator';\n\n/**\n * Accepted properties for `AiLoadingIndicator`.\n * @public\n */\nexport interface AiLoadingIndicatorProps\n  extends DOMProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    AriaLabelingProps,\n    BehaviorTrackingProps {\n  // DEPRECATION: [APPDEV-16782] BREAKING-CHANGE: Remove the `aria-disabled` prop.\n  /**\n   *  Whether the element and all focusable descendants are disabled.\n   * `aria-disabled=\"true\"` only semantically exposes these elements as being disabled.\n   *\n   * @deprecated Will be removed. Please remove this prop from your implementation, since the attribute is only intended for interactive elements.\n   */\n  'aria-disabled'?: AriaAttributes['aria-disabled'];\n  /**\n   * The label shown in the indicator.\n   */\n  children: ReactNode;\n  /**\n   * The `aria-valuetext` attribute provides a human-readable text alternative for assistive technologies about the loading progress.\n   * @remarks Because `AiLoadingIndicator` is indeterminate, `aria-valuetext` is used instead of `aria-valuenow` to describe the progress.\n   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext\n   */\n  'aria-valuetext'?: string;\n}\n\n/**\n * Use the `AiLoadingIndicator` component to indicate that AI-generated content is being loaded.\n */\nconst InternalAiLoadingIndicator = forwardRef<\n  HTMLDivElement,\n  AiLoadingIndicatorProps\n>((props, forwardedRef) => {\n  const {\n    id,\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-valuetext': ariaValuetext,\n    ...remainingProps\n  } = props;\n\n  const [slots, label] = useSlots(children, {\n    icon: AiLoadingIndicatorIcon,\n  });\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n  const ariaLabelingProps = useAriaLabelingProps(restProps);\n  const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n  const { 'aria-labelledby': ariaLabelledBy, ...remainingAriaLabelingProps } =\n    ariaLabelingProps;\n\n  const labelId = useId();\n  const shouldReduceMotion = useReducedMotion();\n\n  return (\n    <Flex\n      id={id}\n      ref={forwardedRef}\n      role=\"progressbar\"\n      alignItems=\"flex-start\"\n      gap={8}\n      className={clsx(styles.container, consumerClassName)}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-labelledby={ariaLabelledBy ?? labelId}\n      aria-valuetext={ariaValuetext}\n      {...remainingAriaLabelingProps}\n      {...behavioralTrackingProps}\n      {...forwardProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      {slots.icon}\n      <div\n        id={labelId}\n        className={clsx(\n          styles.label,\n          !shouldReduceMotion && styles.labelAnimation,\n        )}\n      >\n        {label}\n      </div>\n    </Flex>\n  );\n});\n\n(\n  InternalAiLoadingIndicator as typeof InternalAiLoadingIndicator & {\n    displayName: string;\n  }\n).displayName = COMPONENT_NAME;\n\n/**\n * Use the `AiLoadingIndicator` component to indicate that AI-generated content is being loaded.\n * @public\n */\nexport const AiLoadingIndicator = Object.assign(InternalAiLoadingIndicator, {\n  Icon: AiLoadingIndicatorIcon,\n});\n"],
-  "mappings": "AAsFI,SAmBE,KAnBF;AAtFJ,SAAS,YAAY;AACrB,SAAS,wBAAwB;AACjC,SAAS,kBAAuD;AAEhE,YAAY,YAAY;AACxB,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,aAAa;AACtB,SAAS,2BAA2B;AACpC,SAAS,gBAAgB;AAOzB,SAAS,YAAY;AAErB,MAAM,iBAAiB;AAoCvB,MAAM,6BAA6B,WAGjC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,kBAAkB;AAAA,IAClB,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,CAAC,OAAO,KAAK,IAAI,SAAS,UAAU;AAAA,IACxC,MAAM;AAAA,EACR,CAAC;AAED,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,QAAM,oBAAoB,qBAAqB,SAAS;AACxD,QAAM,eAAe,oBAAoB,WAAW,iBAAiB;AACrE,QAAM,EAAE,mBAAmB,gBAAgB,GAAG,2BAA2B,IACvE;AAEF,QAAM,UAAU,MAAM;AACtB,QAAM,qBAAqB,iBAAiB;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,KAAK;AAAA,MACL,MAAK;AAAA,MACL,YAAW;AAAA,MACX,KAAK;AAAA,MACL,WAAW,KAAK,OAAO,WAAW,iBAAiB;AAAA,MACnD,OAAO;AAAA,MACP,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,mBAAiB,kBAAkB;AAAA,MACnC,kBAAgB;AAAA,MACf,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAElB;AAAA,cAAM;AAAA,QACP;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,WAAW;AAAA,cACT,OAAO;AAAA,cACP,CAAC,sBAAsB,OAAO;AAAA,YAChC;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAGC,2BAGA,cAAc;AAMT,MAAM,qBAAqB,OAAO,OAAO,4BAA4B;AAAA,EAC1E,MAAM;AACR,CAAC;",
+  "sourcesContent": ["import { clsx } from 'clsx';\nimport { forwardRef, type AriaAttributes, type ReactNode } from 'react';\n\nimport * as styles from './AiLoadingIndicator.sty.js';\nimport { AiLoadingIndicatorIcon } from './AiLoadingIndicatorIcon.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { useSlots } from '../../core/hooks/useSlots.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 { Flex } from '../../layouts/flex/Flex.js';\n\nconst COMPONENT_NAME = 'AiLoadingIndicator';\n\n/**\n * Accepted properties for `AiLoadingIndicator`.\n * @public\n */\nexport interface AiLoadingIndicatorProps\n  extends\n    DOMProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    AriaLabelingProps,\n    BehaviorTrackingProps {\n  // DEPRECATION: [APPDEV-16782] BREAKING-CHANGE: Remove the `aria-disabled` prop.\n  /**\n   *  Whether the element and all focusable descendants are disabled.\n   * `aria-disabled=\"true\"` only semantically exposes these elements as being disabled.\n   *\n   * @deprecated Will be removed. Please remove this prop from your implementation, since the attribute is only intended for interactive elements.\n   */\n  'aria-disabled'?: AriaAttributes['aria-disabled'];\n  /**\n   * The label shown in the indicator.\n   */\n  children: ReactNode;\n  /**\n   * The `aria-valuetext` attribute provides a human-readable text alternative for assistive technologies about the loading progress.\n   * @remarks Because `AiLoadingIndicator` is indeterminate, `aria-valuetext` is used instead of `aria-valuenow` to describe the progress.\n   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext\n   */\n  'aria-valuetext'?: string;\n}\n\n/**\n * Use the `AiLoadingIndicator` component to indicate that AI-generated content is being loaded.\n */\nconst InternalAiLoadingIndicator = forwardRef<\n  HTMLDivElement,\n  AiLoadingIndicatorProps\n>((props, forwardedRef) => {\n  const {\n    id,\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-valuetext': ariaValuetext,\n    ...remainingProps\n  } = props;\n\n  const [slots, label] = useSlots(children, {\n    icon: AiLoadingIndicatorIcon,\n  });\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n  const ariaLabelingProps = useAriaLabelingProps(restProps);\n  const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n  const { 'aria-labelledby': ariaLabelledBy, ...remainingAriaLabelingProps } =\n    ariaLabelingProps;\n\n  const labelId = useId();\n\n  return (\n    <Flex\n      id={id}\n      ref={forwardedRef}\n      role=\"progressbar\"\n      alignItems=\"flex-start\"\n      gap={8}\n      className={clsx(styles.container, consumerClassName)}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-labelledby={ariaLabelledBy ?? labelId}\n      aria-valuetext={ariaValuetext}\n      {...remainingAriaLabelingProps}\n      {...behavioralTrackingProps}\n      {...forwardProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      {slots.icon}\n      <div id={labelId} className={clsx(styles.label, styles.labelAnimation)}>\n        {label}\n      </div>\n    </Flex>\n  );\n});\n\n(\n  InternalAiLoadingIndicator as typeof InternalAiLoadingIndicator & {\n    displayName: string;\n  }\n).displayName = COMPONENT_NAME;\n\n/**\n * Use the `AiLoadingIndicator` component to indicate that AI-generated content is being loaded.\n * @public\n */\nexport const AiLoadingIndicator = Object.assign(InternalAiLoadingIndicator, {\n  Icon: AiLoadingIndicatorIcon,\n});\n"],
+  "mappings": "AAqFI,SAmBE,KAnBF;AArFJ,SAAS,YAAY;AACrB,SAAS,kBAAuD;AAEhE,YAAY,YAAY;AACxB,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,aAAa;AACtB,SAAS,2BAA2B;AACpC,SAAS,gBAAgB;AAOzB,SAAS,YAAY;AAErB,MAAM,iBAAiB;AAqCvB,MAAM,6BAA6B,WAGjC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,kBAAkB;AAAA,IAClB,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,CAAC,OAAO,KAAK,IAAI,SAAS,UAAU;AAAA,IACxC,MAAM;AAAA,EACR,CAAC;AAED,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,QAAM,oBAAoB,qBAAqB,SAAS;AACxD,QAAM,eAAe,oBAAoB,WAAW,iBAAiB;AACrE,QAAM,EAAE,mBAAmB,gBAAgB,GAAG,2BAA2B,IACvE;AAEF,QAAM,UAAU,MAAM;AAEtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,KAAK;AAAA,MACL,MAAK;AAAA,MACL,YAAW;AAAA,MACX,KAAK;AAAA,MACL,WAAW,KAAK,OAAO,WAAW,iBAAiB;AAAA,MACnD,OAAO;AAAA,MACP,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,mBAAiB,kBAAkB;AAAA,MACnC,kBAAgB;AAAA,MACf,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAElB;AAAA,cAAM;AAAA,QACP,oBAAC,SAAI,IAAI,SAAS,WAAW,KAAK,OAAO,OAAO,OAAO,cAAc,GAClE,iBACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAGC,2BAGA,cAAc;AAMT,MAAM,qBAAqB,OAAO,OAAO,4BAA4B;AAAA,EAC1E,MAAM;AACR,CAAC;",
   "names": []
 }

package/esm/content/ai-loading-indicator/AiLoadingIndicator.sty.js

@@ -1,8 +1,8 @@
 import "./AiLoadingIndicator.css";
-var container = "_1te6oqj8-3-13-2";
-var iconWrapper = "_1te6oqj7-3-13-2";
-var label = "_1te6oqj6-3-13-2";
-var labelAnimation = "_1te6oqj5-3-13-2";
+var container = "_1te6oqj8-3-14-0";
+var iconWrapper = "_1te6oqj7-3-14-0";
+var label = "_1te6oqj6-3-14-0";
+var labelAnimation = "_1te6oqj5-3-14-0";
 export {
   container,
   iconWrapper,

package/esm/content/ai-loading-indicator/AiLoadingIndicator.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/ai-loading-indicator/AiLoadingIndicator.css.ts"],
-  "sourcesContent": ["import './AiLoadingIndicator.css';\nexport var container = '_1te6oqj8-3-13-2';\nexport var iconWrapper = '_1te6oqj7-3-13-2';\nexport var label = '_1te6oqj6-3-13-2';\nexport var labelAnimation = '_1te6oqj5-3-13-2';"],
+  "sourcesContent": ["import './AiLoadingIndicator.css';\nexport var container = '_1te6oqj8-3-14-0';\nexport var iconWrapper = '_1te6oqj7-3-14-0';\nexport var label = '_1te6oqj6-3-14-0';\nexport var labelAnimation = '_1te6oqj5-3-14-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;AAChB,IAAI,cAAc;AAClB,IAAI,QAAQ;AACZ,IAAI,iBAAiB;",
   "names": []
 }

package/esm/content/ai-loading-indicator/AiLoadingIndicatorIcon.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/ai-loading-indicator/AiLoadingIndicatorIcon.tsx"],
-  "sourcesContent": ["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { AiIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './AiLoadingIndicator.sty.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\n\n\n/**\n * Accepted properties for `AiLoadingIndicator.Icon` slot.\n * @public\n */\nexport interface AiLoadingIndicatorIconProps\n  extends StylingProps,\n    DataTestId,\n    WithChildren {}\n\n/**\n * Allows consumers to specify an icon displayed in the `AiLoadingIndicator` component.\n * Defaults to the `AiIcon` if no children are provided.\n * @public\n */\nexport const AiLoadingIndicatorIcon = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  AiLoadingIndicatorIconProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...remainingProps\n  } = props;\n\n  return (\n    <div\n      ref={forwardedRef}\n      className={clsx(styles.iconWrapper, consumerClassName)}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      aria-hidden=\"true\"\n      {...remainingProps}\n    >\n      {/* default to AiIcon if slot is empty */}\n      {children ?? <AiIcon />}\n    </div>\n  );\n});\n\n(\n  AiLoadingIndicatorIcon as typeof AiLoadingIndicatorIcon & {\n    displayName: string;\n  }\n).displayName = 'AiLoadingIndicator.Icon';\n"],
-  "mappings": "AA+CmB;AA/CnB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAE3B,SAAS,cAAc;AAEvB,YAAY,YAAY;AAoBjB,MAAM,yBAAyC,2BAGpD,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,KAAK,OAAO,aAAa,iBAAiB;AAAA,MACrD,OAAO;AAAA,MACP,eAAa;AAAA,MACb,eAAY;AAAA,MACX,GAAG;AAAA,MAGH,sBAAY,oBAAC,UAAO;AAAA;AAAA,EACvB;AAEJ,CAAC;AAGC,uBAGA,cAAc;",
+  "sourcesContent": ["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { AiIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './AiLoadingIndicator.sty.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\n\n/**\n * Accepted properties for `AiLoadingIndicator.Icon` slot.\n * @public\n */\nexport interface AiLoadingIndicatorIconProps\n  extends StylingProps, DataTestId, WithChildren {}\n\n/**\n * Allows consumers to specify an icon displayed in the `AiLoadingIndicator` component.\n * Defaults to the `AiIcon` if no children are provided.\n * @public\n */\nexport const AiLoadingIndicatorIcon = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  AiLoadingIndicatorIconProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...remainingProps\n  } = props;\n\n  return (\n    <div\n      ref={forwardedRef}\n      className={clsx(styles.iconWrapper, consumerClassName)}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      aria-hidden=\"true\"\n      {...remainingProps}\n    >\n      {/* default to AiIcon if slot is empty */}\n      {children ?? <AiIcon />}\n    </div>\n  );\n});\n\n(\n  AiLoadingIndicatorIcon as typeof AiLoadingIndicatorIcon & {\n    displayName: string;\n  }\n).displayName = 'AiLoadingIndicator.Icon';\n"],
+  "mappings": "AA4CmB;AA5CnB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAE3B,SAAS,cAAc;AAEvB,YAAY,YAAY;AAiBjB,MAAM,yBAAyC,2BAGpD,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,KAAK,OAAO,aAAa,iBAAiB;AAAA,MACrD,OAAO;AAAA,MACP,eAAa;AAAA,MACb,eAAY;AAAA,MACX,GAAG;AAAA,MAGH,sBAAY,oBAAC,UAAO;AAAA;AAAA,EACvB;AAEJ,CAAC;AAGC,uBAGA,cAAc;",
   "names": []
 }

package/esm/content/ai-response/AiResponse.css

@@ -6,20 +6,20 @@
     opacity: 1;
   }
 }
-._jdyvf80-3-13-2 {
+._jdyvf80-3-14-0 {
   word-break: normal;
   overflow-wrap: anywhere;
 }
-._jdyvf80-3-13-2 [data-sd-animate]:not(table [data-sd-animate]) {
+._jdyvf80-3-14-0 [data-sd-animate]:not(table [data-sd-animate]) {
   animation: var(--sd-animation, sd-aiResponseAnimation) var(--sd-duration, 200ms) var(--sd-easing, ease) both;
 }
-._jdyvf80-3-13-2 ._17pa72a1-3-13-2 {
+._jdyvf80-3-14-0 ._17pa72a1-3-14-0 {
   margin-bottom: calc(var(--dt-spacings-size-12, 12px) + var(--dt-spacings-size-2, 2px));
   margin-top: calc(var(--dt-spacings-size-12, 12px) + var(--dt-spacings-size-2, 2px));
 }
-._jdyvf81-3-13-2 > :first-child {
+._jdyvf81-3-14-0 > :first-child {
   margin-top: 0;
 }
-._jdyvf81-3-13-2 > :last-child {
+._jdyvf81-3-14-0 > :last-child {
   margin-bottom: 0;
 }

package/esm/content/ai-response/AiResponse.js

@@ -1,14 +1,15 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { useReducedMotion } from "framer-motion";
-import { forwardRef, memo } from "react";
+import { forwardRef, memo, useMemo } from "react";
 import { Streamdown } from "streamdown";
 import * as styles from "./AiResponse.sty.js";
 import {
   ANIMATION_DURATION_MS,
   useTextAnimation
 } from "./hooks/useTextAnimation.js";
-import { streamdownComponents } from "./utils/component-mappings.js";
+import { AiResponseBlock } from "./utils/AiResponseBlock.js";
+import { getStreamdownComponents } from "./utils/component-mappings.js";
 import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useSafeForwardProps } from "../../core/hooks/useSafeForwardProps.js";
@@ -23,6 +24,7 @@ const InternalAiResponse = forwardRef(
   (props, forwardedRef) => {
     const {
       children,
+      customCodeBlockRenderers,
       onAnimationStateChange,
       responseState = "streaming",
       className: consumerClassName,
@@ -35,6 +37,10 @@ const InternalAiResponse = forwardRef(
     const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
     const ariaLabelingProps = useAriaLabelingProps(restProps);
     const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);
+    const components = useMemo(
+      () => getStreamdownComponents(customCodeBlockRenderers),
+      [customCodeBlockRenderers]
+    );
     const shouldReduceMotion = useReducedMotion() ?? false;
     const { displayedText, isTextAnimating } = useTextAnimation(
       children,
@@ -65,7 +71,8 @@ const InternalAiResponse = forwardRef(
           {
             animated: shouldReduceMotion ? false : animationOptions,
             isAnimating: responseState === "streaming" || isTextAnimating,
-            components: streamdownComponents,
+            components,
+            BlockComponent: AiResponseBlock,
             className: styles.streamdown,
             children: displayedText
           }

package/esm/content/ai-response/AiResponse.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/ai-response/AiResponse.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { useReducedMotion } from 'framer-motion';\nimport { forwardRef, memo } from 'react';\nimport { Streamdown, type AnimateOptions } from 'streamdown';\n\n// Registers the global [data-sd-animate] styles needed by Streamdown's animated prop.\nimport * as styles from './AiResponse.sty.js';\nimport {\n  ANIMATION_DURATION_MS,\n  useTextAnimation,\n} from './hooks/useTextAnimation.js';\nimport { streamdownComponents } from './utils/component-mappings.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';\n\nconst COMPONENT_NAME = 'AiResponse';\n\nconst animationOptions: AnimateOptions = {\n  animation: 'aiResponseAnimation',\n  duration: ANIMATION_DURATION_MS,\n  easing: 'cubic-bezier(0, 0, 0.2, 1)',\n  sep: 'word',\n};\n\n/**\n * Accepted properties for `AiResponse`.\n * @public\n */\nexport interface AiResponseProps\n  extends DataTestId,\n    StylingProps,\n    MaskingProps,\n    DOMProps,\n    AriaLabelingProps,\n    BehaviorTrackingProps {\n  /**\n   * The content to be displayed as markdown.\n   */\n  children: string;\n\n  /**\n   * Callback that is called whenever the animation state changes.\n   */\n  onAnimationStateChange?: (isAnimating: boolean) => void;\n\n  /**\n   * Controls how the content is rendered and animated.\n   * - `'static'`: Renders the entire response immediately with no animation.\n   * - `'streaming'`: Animates content as it streams in.\n   * - `'complete'`: Indicates streaming has finished and the full content has been passed. The component will finish animating any remaining content and turn off animation.\n   *\n   * @defaultValue 'streaming'\n   */\n  responseState?: 'static' | 'streaming' | 'complete';\n}\n\nconst InternalAiResponse = forwardRef<HTMLDivElement, AiResponseProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      onAnimationStateChange,\n      responseState = 'streaming',\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 shouldReduceMotion = useReducedMotion() ?? false;\n    const { displayedText, isTextAnimating } = useTextAnimation(\n      children,\n      shouldReduceMotion,\n      responseState,\n      onAnimationStateChange,\n    );\n\n    if (displayedText.length === 0) {\n      return null;\n    }\n\n    return (\n      <div\n        ref={forwardedRef}\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        style={consumerStyle}\n        className={clsx(styles.wrapper, consumerClassName)}\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        <Streamdown\n          animated={shouldReduceMotion ? false : animationOptions}\n          isAnimating={responseState === 'streaming' || isTextAnimating}\n          components={streamdownComponents}\n          className={styles.streamdown}\n        >\n          {displayedText}\n        </Streamdown>\n      </div>\n    );\n  },\n);\n\n(\n  InternalAiResponse as typeof InternalAiResponse & { displayName: string }\n).displayName = COMPONENT_NAME;\n\n/**\n * Use the `AiResponse` component to animate AI-generated content.\n * @public\n */\nexport const AiResponse = memo(InternalAiResponse);\n"],
-  "mappings": "AA6GQ;AA7GR,OAAO,UAAU;AACjB,SAAS,wBAAwB;AACjC,SAAS,YAAY,YAAY;AACjC,SAAS,kBAAuC;AAGhD,YAAY,YAAY;AACxB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,2BAA2B;AAQpC,MAAM,iBAAiB;AAEvB,MAAM,mBAAmC;AAAA,EACvC,WAAW;AAAA,EACX,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,KAAK;AACP;AAkCA,MAAM,qBAAqB;AAAA,EACzB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB,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,qBAAqB,iBAAiB,KAAK;AACjD,UAAM,EAAE,eAAe,gBAAgB,IAAI;AAAA,MACzC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,QAAI,cAAc,WAAW,GAAG;AAC9B,aAAO;AAAA,IACT;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,aAAU;AAAA,QACV,eAAY;AAAA,QACZ,OAAO;AAAA,QACP,WAAW,KAAK,OAAO,SAAS,iBAAiB;AAAA,QACjD,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QACjB,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAEnB;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,qBAAqB,QAAQ;AAAA,YACvC,aAAa,kBAAkB,eAAe;AAAA,YAC9C,YAAY;AAAA,YACZ,WAAW,OAAO;AAAA,YAEjB;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAGE,mBACA,cAAc;AAMT,MAAM,aAAa,KAAK,kBAAkB;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useReducedMotion } from 'framer-motion';\nimport { type ComponentType, forwardRef, memo, useMemo } from 'react';\nimport { Streamdown, type AnimateOptions } from 'streamdown';\n\n// Registers the global [data-sd-animate] styles needed by Streamdown's animated prop.\nimport type { AiResponseCodeBlockProps } from './ai-response-types.js';\nimport * as styles from './AiResponse.sty.js';\nimport {\n  ANIMATION_DURATION_MS,\n  useTextAnimation,\n} from './hooks/useTextAnimation.js';\nimport { AiResponseBlock } from './utils/AiResponseBlock.js';\nimport { getStreamdownComponents } from './utils/component-mappings.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';\n\nconst COMPONENT_NAME = 'AiResponse';\n\nconst animationOptions: AnimateOptions = {\n  animation: 'aiResponseAnimation',\n  duration: ANIMATION_DURATION_MS,\n  easing: 'cubic-bezier(0, 0, 0.2, 1)',\n  sep: 'word',\n};\n\n/**\n * Accepted properties for `AiResponse`.\n * @public\n */\nexport interface AiResponseProps\n  extends\n    DataTestId,\n    StylingProps,\n    MaskingProps,\n    DOMProps,\n    AriaLabelingProps,\n    BehaviorTrackingProps {\n  /**\n   * The content to be displayed as markdown.\n   */\n  children: string;\n\n  /**\n   * A map of fenced code block languages to components that render the content of such a\n   * block instead of the default code snippet. A fenced block opened with the language\n   * `dt-visualization` is handed to the renderer registered under `'dt-visualization'`;\n   * blocks with any other language and inline code keep their default rendering.\n   * Provide a stable reference, for example by wrapping the map in `useMemo`.\n   * @defaultValue undefined\n   */\n  customCodeBlockRenderers?: Record<\n    string,\n    ComponentType<AiResponseCodeBlockProps>\n  >;\n\n  /**\n   * Callback that is called whenever the animation state changes.\n   */\n  onAnimationStateChange?: (isAnimating: boolean) => void;\n\n  /**\n   * Controls how the content is rendered and animated.\n   * - `'static'`: Renders the entire response immediately with no animation.\n   * - `'streaming'`: Animates content as it streams in.\n   * - `'complete'`: Indicates streaming has finished and the full content has been passed. The component will finish animating any remaining content and turn off animation.\n   *\n   * @defaultValue 'streaming'\n   */\n  responseState?: 'static' | 'streaming' | 'complete';\n}\n\nconst InternalAiResponse = forwardRef<HTMLDivElement, AiResponseProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      customCodeBlockRenderers,\n      onAnimationStateChange,\n      responseState = 'streaming',\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 components = useMemo(\n      () => getStreamdownComponents(customCodeBlockRenderers),\n      [customCodeBlockRenderers],\n    );\n\n    const shouldReduceMotion = useReducedMotion() ?? false;\n    const { displayedText, isTextAnimating } = useTextAnimation(\n      children,\n      shouldReduceMotion,\n      responseState,\n      onAnimationStateChange,\n    );\n\n    if (displayedText.length === 0) {\n      return null;\n    }\n\n    return (\n      <div\n        ref={forwardedRef}\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        style={consumerStyle}\n        className={clsx(styles.wrapper, consumerClassName)}\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        <Streamdown\n          animated={shouldReduceMotion ? false : animationOptions}\n          isAnimating={responseState === 'streaming' || isTextAnimating}\n          components={components}\n          BlockComponent={AiResponseBlock}\n          className={styles.streamdown}\n        >\n          {displayedText}\n        </Streamdown>\n      </div>\n    );\n  },\n);\n\n(\n  InternalAiResponse as typeof InternalAiResponse & { displayName: string }\n).displayName = COMPONENT_NAME;\n\n/**\n * Use the `AiResponse` component to animate AI-generated content.\n * @public\n */\nexport const AiResponse = memo(InternalAiResponse);\n"],
+  "mappings": "AAmIQ;AAnIR,OAAO,UAAU;AACjB,SAAS,wBAAwB;AACjC,SAA6B,YAAY,MAAM,eAAe;AAC9D,SAAS,kBAAuC;AAIhD,YAAY,YAAY;AACxB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AACxC,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,2BAA2B;AAQpC,MAAM,iBAAiB;AAEvB,MAAM,mBAAmC;AAAA,EACvC,WAAW;AAAA,EACX,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,KAAK;AACP;AAgDA,MAAM,qBAAqB;AAAA,EACzB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB,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,aAAa;AAAA,MACjB,MAAM,wBAAwB,wBAAwB;AAAA,MACtD,CAAC,wBAAwB;AAAA,IAC3B;AAEA,UAAM,qBAAqB,iBAAiB,KAAK;AACjD,UAAM,EAAE,eAAe,gBAAgB,IAAI;AAAA,MACzC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,QAAI,cAAc,WAAW,GAAG;AAC9B,aAAO;AAAA,IACT;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,aAAU;AAAA,QACV,eAAY;AAAA,QACZ,OAAO;AAAA,QACP,WAAW,KAAK,OAAO,SAAS,iBAAiB;AAAA,QACjD,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QACjB,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAEnB;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,qBAAqB,QAAQ;AAAA,YACvC,aAAa,kBAAkB,eAAe;AAAA,YAC9C;AAAA,YACA,gBAAgB;AAAA,YAChB,WAAW,OAAO;AAAA,YAEjB;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAGE,mBACA,cAAc;AAMT,MAAM,aAAa,KAAK,kBAAkB;",
   "names": []
 }

package/esm/content/ai-response/AiResponse.sty.js

@@ -2,8 +2,8 @@ import "../../core/components/app-root/AppRoot.css";
 import "../code-snippet/CodeHighlight.css";
 import "../code-snippet/CodeSnippet.css";
 import "./AiResponse.css";
-var streamdown = "_jdyvf81-3-13-2";
-var wrapper = "_jdyvf80-3-13-2";
+var streamdown = "_jdyvf81-3-14-0";
+var wrapper = "_jdyvf80-3-14-0";
 export {
   streamdown,
   wrapper

package/esm/content/ai-response/AiResponse.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/ai-response/AiResponse.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../code-snippet/CodeHighlight.css';\nimport '../code-snippet/CodeSnippet.css';\nimport './AiResponse.css';\nexport var streamdown = '_jdyvf81-3-13-2';\nexport var wrapper = '_jdyvf80-3-13-2';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../code-snippet/CodeHighlight.css';\nimport '../code-snippet/CodeSnippet.css';\nimport './AiResponse.css';\nexport var streamdown = '_jdyvf81-3-14-0';\nexport var wrapper = '_jdyvf80-3-14-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,aAAa;AACjB,IAAI,UAAU;",
   "names": []
 }

package/esm/content/ai-response/AiResponseBlockContext.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+const AiResponseBlockContext = createContext({
+  isComplete: true
+});
+const useAiResponseBlock = () => useContext(AiResponseBlockContext);
+export {
+  AiResponseBlockContext,
+  useAiResponseBlock
+};
+//# sourceMappingURL=AiResponseBlockContext.js.map

package/esm/content/ai-response/AiResponseBlockContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/content/ai-response/AiResponseBlockContext.tsx"],
+  "sourcesContent": ["import { createContext, useContext } from 'react';\n\n/**\n * The streaming state of a single markdown block within an `AiResponse`.\n * @internal\n */\nexport interface AiResponseBlockState {\n  /**\n   * Whether the markdown block has been fully received. It is `false` while the block\n   * ends inside a code fence whose closing fence is still missing.\n   */\n  isComplete: boolean;\n}\n\nexport const AiResponseBlockContext = createContext<AiResponseBlockState>({\n  isComplete: true,\n});\n\n/**\n * Returns the streaming state of the markdown block the calling component is rendered in.\n * @internal\n */\nexport const useAiResponseBlock = (): AiResponseBlockState =>\n  useContext(AiResponseBlockContext);\n"],
+  "mappings": "AAAA,SAAS,eAAe,kBAAkB;AAcnC,MAAM,yBAAyB,cAAoC;AAAA,EACxE,YAAY;AACd,CAAC;AAMM,MAAM,qBAAqB,MAChC,WAAW,sBAAsB;",
+  "names": []
+}

package/esm/content/ai-response/ai-response-types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=ai-response-types.js.map

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

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { Block } from "streamdown";
+import { hasUnterminatedFence } from "./fence-utils.js";
+import { AiResponseBlockContext } from "../AiResponseBlockContext.js";
+const AiResponseBlock = memo((props) => {
+  const { content } = props;
+  const blockState = useMemo(
+    () => ({ isComplete: !hasUnterminatedFence(content) }),
+    [content]
+  );
+  return /* @__PURE__ */ jsx(AiResponseBlockContext.Provider, { value: blockState, children: /* @__PURE__ */ jsx(Block, { ...props }) });
+});
+export {
+  AiResponseBlock
+};
+//# sourceMappingURL=AiResponseBlock.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/content/ai-response/utils/AiResponseBlock.tsx"],
+  "sourcesContent": ["import { type ComponentProps, memo, useMemo } from 'react';\nimport { Block } from 'streamdown';\n\nimport { hasUnterminatedFence } from './fence-utils.js';\nimport { AiResponseBlockContext } from '../AiResponseBlockContext.js';\n\n/**\n * Wraps a Streamdown block to provide its streaming state to the components rendered\n * within it. It is memoized because it replaces Streamdown's own memoized block, which\n * keeps unchanged blocks from re-rendering on every streamed token.\n * @internal\n */\nexport const AiResponseBlock = memo((props: ComponentProps<typeof Block>) => {\n  const { content } = props;\n\n  const blockState = useMemo(\n    () => ({ isComplete: !hasUnterminatedFence(content) }),\n    [content],\n  );\n\n  return (\n    <AiResponseBlockContext.Provider value={blockState}>\n      <Block {...props} />\n    </AiResponseBlockContext.Provider>\n  );\n});\n"],
+  "mappings": "AAsBM;AAtBN,SAA8B,MAAM,eAAe;AACnD,SAAS,aAAa;AAEtB,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AAQhC,MAAM,kBAAkB,KAAK,CAAC,UAAwC;AAC3E,QAAM,EAAE,QAAQ,IAAI;AAEpB,QAAM,aAAa;AAAA,IACjB,OAAO,EAAE,YAAY,CAAC,qBAAqB,OAAO,EAAE;AAAA,IACpD,CAAC,OAAO;AAAA,EACV;AAEA,SACE,oBAAC,uBAAuB,UAAvB,EAAgC,OAAO,YACtC,8BAAC,SAAO,GAAG,OAAO,GACpB;AAEJ,CAAC;",
+  "names": []
+}

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

@@ -1,16 +1,53 @@
 import { jsx } from "react/jsx-runtime";
 import { componentMappings as markdownComponentMappings } from "../../markdown/Markdown.js";
-const streamdownComponents = {
-  ...markdownComponentMappings,
-  code: ({ children, node, ...restProps }) => {
-    const isInline = node?.position?.start?.line === node?.position?.end?.line;
-    const MarkdownCode = markdownComponentMappings.code;
-    return /* @__PURE__ */ jsx(MarkdownCode, { inline: isInline, ...restProps, children });
-  }
-  // The markdownComponentMappings are typed for react-markdown, but they're compatible with
-  // Streamdown so we can cast them here to avoid unnecessary duplication of the mapping logic.
+import { useAiResponseBlock } from "../AiResponseBlockContext.js";
+const FENCE_LANGUAGE_PREFIX = "language-";
+const DefaultCode = markdownComponentMappings.code;
+const getFenceLanguage = (className) => typeof className === "string" && className.includes(FENCE_LANGUAGE_PREFIX) ? className.slice(
+  className.indexOf(FENCE_LANGUAGE_PREFIX) + FENCE_LANGUAGE_PREFIX.length
+) : void 0;
+const toCode = (children) => (Array.isArray(children) ? children.join("") : String(children ?? "")).replace(/\n$/, "");
+const CustomCodeBlock = ({
+  Renderer,
+  language,
+  children
+}) => {
+  const { isComplete } = useAiResponseBlock();
+  return /* @__PURE__ */ jsx(
+    Renderer,
+    {
+      code: toCode(children),
+      language,
+      isComplete
+    }
+  );
 };
+const buildStreamdownComponents = (customCodeBlockRenderers) => {
+  const renderers = Object.assign(
+    /* @__PURE__ */ Object.create(null),
+    customCodeBlockRenderers
+  );
+  return {
+    ...markdownComponentMappings,
+    code: ({ children, node, ...restProps }) => {
+      const isSingleLine = node?.position?.start !== void 0 && node.position.end !== void 0 && node.position.start.line === node.position.end.line;
+      const language = getFenceLanguage(restProps.className);
+      const isInline = isSingleLine && language === void 0;
+      if (language !== void 0) {
+        const Renderer = renderers[language];
+        if (Renderer) {
+          return /* @__PURE__ */ jsx(CustomCodeBlock, { Renderer, language, children });
+        }
+      }
+      return /* @__PURE__ */ jsx(DefaultCode, { inline: isInline, node, ...restProps, children });
+    }
+    // The markdownComponentMappings are typed for react-markdown, but they're compatible with
+    // Streamdown so we can cast them here to avoid unnecessary duplication of the mapping logic.
+  };
+};
+const defaultStreamdownComponents = buildStreamdownComponents();
+const getStreamdownComponents = (customCodeBlockRenderers) => customCodeBlockRenderers ? buildStreamdownComponents(customCodeBlockRenderers) : defaultStreamdownComponents;
 export {
-  streamdownComponents
+  getStreamdownComponents
 };
 //# sourceMappingURL=component-mappings.js.map