@dynatrace/strato-components 3.11.3 → 3.12.1

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 { 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-labelledby={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        {(slots.label || slots.content) && (\n          <AccordionSectionContext.Provider\n            value={{\n              labelId,\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              id={labelId}\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              {slots.label}\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,\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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",
   "names": []
 }

package/esm/content/accordion/AccordionSectionContent.js

@@ -32,7 +32,7 @@ const AccordionSectionContent = /* @__PURE__ */ forwardRef((props, forwardedRef)
     style: consumerStyle,
     "data-testid": dataTestId
   } = props;
-  const { labelId, contentId, isExpanded, keepMounted, size } = useContext(
+  const { triggerId, contentId, isExpanded, keepMounted, size } = useContext(
     AccordionSectionContext
   );
   const childIsText = _canReceiveDefaultTextFormat(children);
@@ -75,7 +75,7 @@ const AccordionSectionContent = /* @__PURE__ */ forwardRef((props, forwardedRef)
           ref: forwardedRef,
           id: contentId,
           role: "region",
-          "aria-labelledby": labelId,
+          "aria-labelledby": triggerId,
           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 { labelId, 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={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": "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,SAAS,WAAW,YAAY,aAAa,KAAK,IAAI;AAAA,IAC5D;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 { 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;",
   "names": []
 }

package/esm/content/accordion/AccordionSectionLabel.js

@@ -1,7 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
-import { forwardRef } from "react";
+import { forwardRef, useContext } from "react";
 import { accordionLabelCSS } from "./Accordion.sty.js";
+import { AccordionSectionContext } from "./contexts/AccordionSectionContext.js";
 import { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from "../../core/utils/can-receive-default-text-format.js";
 import { Text } from "../../typography/text/Text.js";
 const AccordionSectionLabel = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
@@ -11,10 +12,12 @@ const AccordionSectionLabel = /* @__PURE__ */ forwardRef((props, forwardedRef) =
     style: consumerStyle,
     "data-testid": dataTestId
   } = props;
+  const { labelId } = useContext(AccordionSectionContext);
   const childIsText = _canReceiveDefaultTextFormat(children);
   return /* @__PURE__ */ jsx(
     "div",
     {
+      id: labelId,
       "data-testid": dataTestId,
       ref: forwardedRef,
       className: clsx(accordionLabelCSS, consumerClassName),

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/accordion/AccordionSectionLabel.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { accordionLabelCSS } from './Accordion.sty.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 { Text } from '../../typography/text/Text.js';\n\n\n/** @public */\nexport type AccordionSectionLabelProps = WithChildren &\n  StylingProps &\n  DataTestId;\n\n/**\n * Accordion Section Label component\n * @public\n */\nexport const AccordionSectionLabel = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  AccordionSectionLabelProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  }: AccordionSectionLabelProps = props;\n  const childIsText = _canReceiveDefaultTextFormat(children);\n\n  return (\n    <div\n      data-testid={dataTestId}\n      ref={forwardedRef}\n      className={clsx(accordionLabelCSS, consumerClassName)}\n      style={consumerStyle}\n    >\n      {childIsText ? (\n        <Text textStyle=\"base-emphasized\" as=\"p\">\n          {children}\n        </Text>\n      ) : (\n        children\n      )}\n    </div>\n  );\n});\n\n(\n  AccordionSectionLabel as typeof AccordionSectionLabel & {\n    displayName: string;\n  }\n).displayName = 'Accordion.SectionLabel';\n"],
-  "mappings": "AAwCQ;AAxCR,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,SAAS,yBAAyB;AAIlC,SAAS,+BAA+B,oCAAoC;AAC5E,SAAS,YAAY;AAYd,MAAM,wBAAwC,2BAGnD,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAgC;AAChC,QAAM,cAAc,6BAA6B,QAAQ;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,KAAK;AAAA,MACL,WAAW,KAAK,mBAAmB,iBAAiB;AAAA,MACpD,OAAO;AAAA,MAEN,wBACC,oBAAC,QAAK,WAAU,mBAAkB,IAAG,KAClC,UACH,IAEA;AAAA;AAAA,EAEJ;AAEJ,CAAC;AAGC,sBAGA,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useContext } from 'react';\n\nimport { accordionLabelCSS } 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 { Text } from '../../typography/text/Text.js';\n\n/** @public */\nexport type AccordionSectionLabelProps = WithChildren &\n  StylingProps &\n  DataTestId & {\n    /**\n     * Overrides the accessible name of the accordion section.\n     */\n    'aria-label'?: string;\n  };\n\n/**\n * Accordion Section Label component\n * @public\n */\nexport const AccordionSectionLabel = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  AccordionSectionLabelProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  }: AccordionSectionLabelProps = props;\n  const { labelId } = useContext(AccordionSectionContext);\n  const childIsText = _canReceiveDefaultTextFormat(children);\n\n  return (\n    <div\n      id={labelId}\n      data-testid={dataTestId}\n      ref={forwardedRef}\n      className={clsx(accordionLabelCSS, consumerClassName)}\n      style={consumerStyle}\n    >\n      {childIsText ? (\n        <Text textStyle=\"base-emphasized\" as=\"p\">\n          {children}\n        </Text>\n      ) : (\n        children\n      )}\n    </div>\n  );\n});\n\n(\n  AccordionSectionLabel as typeof AccordionSectionLabel & {\n    displayName: string;\n  }\n).displayName = 'Accordion.SectionLabel';\n"],
+  "mappings": "AA+CQ;AA/CR,OAAO,UAAU;AACjB,SAAS,YAAY,kBAAkB;AAEvC,SAAS,yBAAyB;AAClC,SAAS,+BAA+B;AAIxC,SAAS,+BAA+B,oCAAoC;AAC5E,SAAS,YAAY;AAgBd,MAAM,wBAAwC,2BAGnD,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAgC;AAChC,QAAM,EAAE,QAAQ,IAAI,WAAW,uBAAuB;AACtD,QAAM,cAAc,6BAA6B,QAAQ;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,eAAa;AAAA,MACb,KAAK;AAAA,MACL,WAAW,KAAK,mBAAmB,iBAAiB;AAAA,MACpD,OAAO;AAAA,MAEN,wBACC,oBAAC,QAAK,WAAU,mBAAkB,IAAG,KAClC,UACH,IAEA;AAAA;AAAA,EAEJ;AAEJ,CAAC;AAGC,sBAGA,cAAc;",
   "names": []
 }

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

@@ -1,6 +1,7 @@
 import { createContext } from "react";
 const AccordionSectionContext = createContext({
   labelId: "",
+  triggerId: "",
   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  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    contentId: '',\n    isExpanded: false,\n    keepMounted: false,\n    size: 'default',\n  });\n"],
-  "mappings": "AAAA,SAAuB,qBAAqB;AAYrC,MAAM,0BACX,cAA4C;AAAA,EAC1C,SAAS;AAAA,EACT,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  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;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-@keyframes _1te6oqj4-3-11-3 {
+@keyframes _1te6oqj4-3-12-1 {
   0% {
     background-position: 20% 0%;
   }
@@ -6,27 +6,27 @@
     background-position: -120% 100%;
   }
 }
-._1te6oqj5-3-11-3 {
-  --_1te6oqj0-3-11-3: #CB53F6;
-  --_1te6oqj1-3-11-3: #7FF8F9;
-  --_1te6oqj2-3-11-3: 15%;
-  --_1te6oqj3-3-11-3: 5%;
+._1te6oqj5-3-12-1 {
+  --_1te6oqj0-3-12-1: #CB53F6;
+  --_1te6oqj1-3-12-1: #7FF8F9;
+  --_1te6oqj2-3-12-1: 15%;
+  --_1te6oqj3-3-12-1: 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-11-3) 0%, var(--_1te6oqj1-3-11-3) 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-12-1) 0%, var(--_1te6oqj1-3-12-1) 100%);
   background-size: 200% 600%;
   background-position: 0% 0%;
   background-clip: text;
   color: transparent;
-  animation-name: _1te6oqj4-3-11-3;
+  animation-name: _1te6oqj4-3-12-1;
   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-11-3 {
+._1te6oqj6-3-12-1 {
   padding-top: calc(var(--dt-spacings-size-20, 20px) / 2 - 0.5lh);
   min-width: 0;
 }
-._1te6oqj7-3-11-3 {
+._1te6oqj7-3-12-1 {
   width: var(--dt-spacings-size-20, 20px);
   min-height: 1lh;
   display: flex;
@@ -34,12 +34,12 @@
   align-items: center;
   flex-shrink: 0;
 }
-._1te6oqj7-3-11-3 svg {
+._1te6oqj7-3-12-1 svg {
   display: block;
   width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
 }
-._1te6oqj8-3-11-3 {
+._1te6oqj8-3-12-1 {
   display: inline-flex;
   align-items: center;
   vertical-align: middle;

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

@@ -1,8 +1,8 @@
 import "./AiLoadingIndicator.css";
-var container = "_1te6oqj8-3-11-3";
-var iconWrapper = "_1te6oqj7-3-11-3";
-var label = "_1te6oqj6-3-11-3";
-var labelAnimation = "_1te6oqj5-3-11-3";
+var container = "_1te6oqj8-3-12-1";
+var iconWrapper = "_1te6oqj7-3-12-1";
+var label = "_1te6oqj6-3-12-1";
+var labelAnimation = "_1te6oqj5-3-12-1";
 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-11-3';\nexport var iconWrapper = '_1te6oqj7-3-11-3';\nexport var label = '_1te6oqj6-3-11-3';\nexport var labelAnimation = '_1te6oqj5-3-11-3';"],
+  "sourcesContent": ["import './AiLoadingIndicator.css';\nexport var container = '_1te6oqj8-3-12-1';\nexport var iconWrapper = '_1te6oqj7-3-12-1';\nexport var label = '_1te6oqj6-3-12-1';\nexport var labelAnimation = '_1te6oqj5-3-12-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;AAChB,IAAI,cAAc;AAClB,IAAI,QAAQ;AACZ,IAAI,iBAAiB;",
   "names": []
 }

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

@@ -6,20 +6,20 @@
     opacity: 1;
   }
 }
-._jdyvf80-3-11-3 {
+._jdyvf80-3-12-1 {
   word-break: normal;
   overflow-wrap: anywhere;
 }
-._jdyvf80-3-11-3 [data-sd-animate]:not(table [data-sd-animate]) {
+._jdyvf80-3-12-1 [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-11-3 ._17pa72a1-3-11-3 {
+._jdyvf80-3-12-1 ._17pa72a1-3-12-1 {
   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-11-3 > :first-child {
+._jdyvf81-3-12-1 > :first-child {
   margin-top: 0;
 }
-._jdyvf81-3-11-3 > :last-child {
+._jdyvf81-3-12-1 > :last-child {
   margin-bottom: 0;
 }

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-11-3";
-var wrapper = "_jdyvf80-3-11-3";
+var streamdown = "_jdyvf81-3-12-1";
+var wrapper = "_jdyvf80-3-12-1";
 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-11-3';\nexport var wrapper = '_jdyvf80-3-11-3';"],
+  "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-12-1';\nexport var wrapper = '_jdyvf80-3-12-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,aAAa;AACjB,IAAI,UAAU;",
   "names": []
 }

package/esm/content/avatar/Avatar.css

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

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-11-3", variantClassNames: { size: { small: "_7llfy91-3-11-3", "default": "_7llfy92-3-11-3" }, disabled: { true: "_7llfy93-3-11-3", false: "_7llfy94-3-11-3" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, size: "small" }, "_7llfy95-3-11-3"], [{ disabled: true, size: "default" }, "_7llfy96-3-11-3"]] });
-var avatarDisabled = "_7llfy99-3-11-3";
-var avatarSubtitle = "_7llfy98-3-11-3";
-var avatarWrapper = "_7llfy97-3-11-3";
+var avatarAbbreviation = _7a468({ defaultClassName: "_7llfy90-3-12-1", variantClassNames: { size: { small: "_7llfy91-3-12-1", "default": "_7llfy92-3-12-1" }, disabled: { true: "_7llfy93-3-12-1", false: "_7llfy94-3-12-1" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, size: "small" }, "_7llfy95-3-12-1"], [{ disabled: true, size: "default" }, "_7llfy96-3-12-1"]] });
+var avatarDisabled = "_7llfy99-3-12-1";
+var avatarSubtitle = "_7llfy98-3-12-1";
+var avatarWrapper = "_7llfy97-3-12-1";
 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-11-3',variantClassNames:{size:{small:'_7llfy91-3-11-3','default':'_7llfy92-3-11-3'},disabled:{true:'_7llfy93-3-11-3',false:'_7llfy94-3-11-3'}},defaultVariants:{},compoundVariants:[[{disabled:true,size:'small'},'_7llfy95-3-11-3'],[{disabled:true,size:'default'},'_7llfy96-3-11-3']]});\nexport var avatarDisabled = '_7llfy99-3-11-3';\nexport var avatarSubtitle = '_7llfy98-3-11-3';\nexport var avatarWrapper = '_7llfy97-3-11-3';"],
+  "sourcesContent": ["import './Avatar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var avatarAbbreviation = _7a468({defaultClassName:'_7llfy90-3-12-1',variantClassNames:{size:{small:'_7llfy91-3-12-1','default':'_7llfy92-3-12-1'},disabled:{true:'_7llfy93-3-12-1',false:'_7llfy94-3-12-1'}},defaultVariants:{},compoundVariants:[[{disabled:true,size:'small'},'_7llfy95-3-12-1'],[{disabled:true,size:'default'},'_7llfy96-3-12-1']]});\nexport var avatarDisabled = '_7llfy99-3-12-1';\nexport var avatarSubtitle = '_7llfy98-3-12-1';\nexport var avatarWrapper = '_7llfy97-3-12-1';"],
   "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,9 @@
-._129un530-3-11-3 {
+._129un530-3-12-1 {
   display: flex;
 }
-._129un531-3-11-3 {
+._129un531-3-12-1 {
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._129un531-3-11-3:first-child {
+._129un531-3-12-1:first-child {
   margin-left: var(--dt-spacings-size-0, 0);
 }

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

@@ -1,6 +1,6 @@
 import "./AvatarGroup.css";
-var additionalAvatarWrapper = "_129un530-3-11-3";
-var avatarGroupItemWrapper = "_129un531-3-11-3";
+var additionalAvatarWrapper = "_129un530-3-12-1";
+var avatarGroupItemWrapper = "_129un531-3-12-1";
 export {
   additionalAvatarWrapper,
   avatarGroupItemWrapper

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-11-3';\nexport var avatarGroupItemWrapper = '_129un531-3-11-3';"],
+  "sourcesContent": ["import './AvatarGroup.css';\nexport var additionalAvatarWrapper = '_129un530-3-12-1';\nexport var avatarGroupItemWrapper = '_129un531-3-12-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,0BAA0B;AAC9B,IAAI,yBAAyB;",
   "names": []
 }