@dynatrace/strato-components 3.7.1 → 3.9.0

package/esm/content/accordion/AccordionSection.js

@@ -7,7 +7,6 @@ import {
   useRef,
   useState
 } from "react";
-import useResizeObserver from "use-resize-observer";
 import { ChevronDownSmallIcon } from "@dynatrace/strato-icons";
 import { AccordionActions } from "./accordion-state.js";
 import {
@@ -22,6 +21,7 @@ import { useAccordionContext } from "./contexts/AccordionContext.js";
 import { AccordionSectionContext } from "./contexts/AccordionSectionContext.js";
 import { Button } from "../../buttons/button/Button.js";
 import { useId } from "../../core/hooks/useId.js";
+import { useResizeObserver } from "../../core/hooks/useResizeObserver.js";
 import { useSlots } from "../../core/hooks/useSlots.js";
 import { Flex } from "../../layouts/flex/Flex.js";
 import { fieldTokens as fieldColorsCSS } from "../../styles/field.sty.js";

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';\nimport useResizeObserver from 'use-resize-observer';\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 { 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-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-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 { 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-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-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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",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-@keyframes _1te6oqj4-3-7-1 {
+@keyframes _1te6oqj4-3-9-0 {
   0% {
     background-position: 20% 0%;
   }
@@ -6,27 +6,27 @@
     background-position: -120% 100%;
   }
 }
-._1te6oqj5-3-7-1 {
-  --_1te6oqj0-3-7-1: #CB53F6;
-  --_1te6oqj1-3-7-1: #7FF8F9;
-  --_1te6oqj2-3-7-1: 15%;
-  --_1te6oqj3-3-7-1: 5%;
+._1te6oqj5-3-9-0 {
+  --_1te6oqj0-3-9-0: #CB53F6;
+  --_1te6oqj1-3-9-0: #7FF8F9;
+  --_1te6oqj2-3-9-0: 15%;
+  --_1te6oqj3-3-9-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-7-1) 0%, var(--_1te6oqj1-3-7-1) 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-9-0) 0%, var(--_1te6oqj1-3-9-0) 100%);
   background-size: 200% 600%;
   background-position: 0% 0%;
   background-clip: text;
   color: transparent;
-  animation-name: _1te6oqj4-3-7-1;
+  animation-name: _1te6oqj4-3-9-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-7-1 {
+._1te6oqj6-3-9-0 {
   padding-top: calc(var(--dt-spacings-size-20, 20px) / 2 - 0.5lh);
   min-width: 0;
 }
-._1te6oqj7-3-7-1 {
+._1te6oqj7-3-9-0 {
   width: var(--dt-spacings-size-20, 20px);
   min-height: 1lh;
   display: flex;
@@ -34,12 +34,12 @@
   align-items: center;
   flex-shrink: 0;
 }
-._1te6oqj7-3-7-1 svg {
+._1te6oqj7-3-9-0 svg {
   display: block;
   width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
 }
-._1te6oqj8-3-7-1 {
+._1te6oqj8-3-9-0 {
   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-7-1";
-var iconWrapper = "_1te6oqj7-3-7-1";
-var label = "_1te6oqj6-3-7-1";
-var labelAnimation = "_1te6oqj5-3-7-1";
+var container = "_1te6oqj8-3-9-0";
+var iconWrapper = "_1te6oqj7-3-9-0";
+var label = "_1te6oqj6-3-9-0";
+var labelAnimation = "_1te6oqj5-3-9-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-7-1';\nexport var iconWrapper = '_1te6oqj7-3-7-1';\nexport var label = '_1te6oqj6-3-7-1';\nexport var labelAnimation = '_1te6oqj5-3-7-1';"],
+  "sourcesContent": ["import './AiLoadingIndicator.css';\nexport var container = '_1te6oqj8-3-9-0';\nexport var iconWrapper = '_1te6oqj7-3-9-0';\nexport var label = '_1te6oqj6-3-9-0';\nexport var labelAnimation = '_1te6oqj5-3-9-0';"],
   "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-7-1 {
+._jdyvf80-3-9-0 {
   word-break: normal;
   overflow-wrap: anywhere;
 }
-._jdyvf80-3-7-1 [data-sd-animate]:not(table [data-sd-animate]) {
+._jdyvf80-3-9-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-7-1 ._17pa72a0-3-7-1 {
+._jdyvf80-3-9-0 ._17pa72a1-3-9-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-7-1 > :first-child {
+._jdyvf81-3-9-0 > :first-child {
   margin-top: 0;
 }
-._jdyvf81-3-7-1 > :last-child {
+._jdyvf81-3-9-0 > :last-child {
   margin-bottom: 0;
 }

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

@@ -1,8 +1,9 @@
 import "../../core/components/app-root/AppRoot.css";
+import "../code-snippet/CodeHighlight.css";
 import "../code-snippet/CodeSnippet.css";
 import "./AiResponse.css";
-var streamdown = "_jdyvf81-3-7-1";
-var wrapper = "_jdyvf80-3-7-1";
+var streamdown = "_jdyvf81-3-9-0";
+var wrapper = "_jdyvf80-3-9-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/CodeSnippet.css';\nimport './AiResponse.css';\nexport var streamdown = '_jdyvf81-3-7-1';\nexport var wrapper = '_jdyvf80-3-7-1';"],
-  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,aAAa;AACjB,IAAI,UAAU;",
+  "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-9-0';\nexport var wrapper = '_jdyvf80-3-9-0';"],
+  "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-7-1 {
+._7llfy90-3-9-0 {
   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-7-1 {
+._7llfy91-3-9-0 {
   min-width: var(--dt-spacings-size-20, 20px);
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._7llfy92-3-7-1 {
+._7llfy92-3-9-0 {
   min-width: var(--dt-spacings-size-32, 32px);
 }
-._7llfy93-3-7-1 {
+._7llfy93-3-9-0 {
   border-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
   background-color: var(--dt-colors-background-surface-default, #fff);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   z-index: 0;
 }
-._7llfy93-3-7-1:before {
+._7llfy93-3-9-0: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-7-1[tabindex]:hover, button._7llfy94-3-7-1:hover, a._7llfy94-3-7-1:hover, ._7llfy94-3-7-1:focus {
+._7llfy94-3-9-0[tabindex]:hover, button._7llfy94-3-9-0:hover, a._7llfy94-3-9-0:hover, ._7llfy94-3-9-0:focus {
   background-color: var(--dt-colors-background-field-neutral-accent-hover, #4d4e72);
   border-color: var(--dt-colors-border-neutral-default-hover, #d0d1dc);
   z-index: 1;
 }
-button._7llfy94-3-7-1:hover, a._7llfy94-3-7-1:hover, button._7llfy94-3-7-1:active, a._7llfy94-3-7-1:active {
+button._7llfy94-3-9-0:hover, a._7llfy94-3-9-0:hover, button._7llfy94-3-9-0:active, a._7llfy94-3-9-0:active {
   cursor: pointer;
   z-index: 1;
 }
-._7llfy94-3-7-1[tabindex]:active, button._7llfy94-3-7-1:active, a._7llfy94-3-7-1:active {
+._7llfy94-3-9-0[tabindex]:active, button._7llfy94-3-9-0:active, a._7llfy94-3-9-0:active {
   background-color: var(--dt-colors-background-field-neutral-accent-active, #404164);
   border-color: var(--dt-colors-border-neutral-default-active, #c6c7d5);
   z-index: 1;
 }
-._7llfy95-3-7-1:before {
+._7llfy95-3-9-0:before {
   min-width: var(--dt-spacings-size-20, 20px);
 }
-._7llfy96-3-7-1:before {
+._7llfy96-3-9-0:before {
   min-width: var(--dt-spacings-size-32, 32px);
 }
-._7llfy97-3-7-1 {
+._7llfy97-3-9-0 {
   padding: 0;
   margin: 0;
   border: none;
   background-color: transparent;
 }
-._7llfy98-3-7-1 {
+._7llfy98-3-9-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   overflow-wrap: break-word;
 }
-._7llfy99-3-7-1 ~ div > div {
+._7llfy99-3-9-0 ~ 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-7-1", variantClassNames: { size: { small: "_7llfy91-3-7-1", "default": "_7llfy92-3-7-1" }, disabled: { true: "_7llfy93-3-7-1", false: "_7llfy94-3-7-1" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, size: "small" }, "_7llfy95-3-7-1"], [{ disabled: true, size: "default" }, "_7llfy96-3-7-1"]] });
-var avatarDisabled = "_7llfy99-3-7-1";
-var avatarSubtitle = "_7llfy98-3-7-1";
-var avatarWrapper = "_7llfy97-3-7-1";
+var avatarAbbreviation = _7a468({ defaultClassName: "_7llfy90-3-9-0", variantClassNames: { size: { small: "_7llfy91-3-9-0", "default": "_7llfy92-3-9-0" }, disabled: { true: "_7llfy93-3-9-0", false: "_7llfy94-3-9-0" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, size: "small" }, "_7llfy95-3-9-0"], [{ disabled: true, size: "default" }, "_7llfy96-3-9-0"]] });
+var avatarDisabled = "_7llfy99-3-9-0";
+var avatarSubtitle = "_7llfy98-3-9-0";
+var avatarWrapper = "_7llfy97-3-9-0";
 export {
   avatarAbbreviation,
   avatarDisabled,

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

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

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

@@ -1,9 +1,9 @@
-._129un530-3-7-1 {
+._129un530-3-9-0 {
   display: flex;
 }
-._129un531-3-7-1 {
+._129un531-3-9-0 {
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._129un531-3-7-1:first-child {
+._129un531-3-9-0: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-7-1";
-var avatarGroupItemWrapper = "_129un531-3-7-1";
+var additionalAvatarWrapper = "_129un530-3-9-0";
+var avatarGroupItemWrapper = "_129un531-3-9-0";
 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-7-1';\nexport var avatarGroupItemWrapper = '_129un531-3-7-1';"],
+  "sourcesContent": ["import './AvatarGroup.css';\nexport var additionalAvatarWrapper = '_129un530-3-9-0';\nexport var avatarGroupItemWrapper = '_129un531-3-9-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,0BAA0B;AAC9B,IAAI,yBAAyB;",
   "names": []
 }

package/esm/content/chip/BaseChip.css

@@ -1,12 +1,12 @@
-._1jgl8s50-3-7-1 ._1raebd90-3-7-1 {
+._1jgl8s50-3-9-0 ._1raebd90-3-9-0 {
   gap: 1px;
 }
-._1raebd91-3-7-1 {
+._1raebd91-3-9-0 {
   cursor: not-allowed;
 }
-._1raebd92-3-7-1 {
-  background: var(--_bx32h2-3-7-1);
-  color: var(--_bx32h0-3-7-1);
+._1raebd92-3-9-0 {
+  background: var(--_bx32h2-3-9-0);
+  color: var(--_bx32h0-3-9-0);
   position: relative;
   display: grid;
   grid: auto / auto-flow auto;
@@ -20,109 +20,109 @@
   transition-duration: var(--dt-animations-fade-out-duration-base, 250ms);
   transition-property: color, background-color, transform;
 }
-._1raebd92-3-7-1:is(button) {
+._1raebd92-3-9-0:is(button) {
   border: 0;
 }
-._1raebd93-3-7-1 {
+._1raebd93-3-9-0 {
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   height: var(--dt-spacings-size-24, 24px);
 }
-._1raebd94-3-7-1 {
+._1raebd94-3-9-0 {
   padding-left: var(--dt-spacings-size-2, 2px);
   padding-right: var(--dt-spacings-size-2, 2px);
   padding-top: 0;
   padding-bottom: 0;
   height: var(--dt-spacings-size-20, 20px);
 }
-._1raebd95-3-7-1 {
+._1raebd95-3-9-0 {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
-._1raebd96-3-7-1 {
+._1raebd96-3-9-0 {
   border-bottom-right-radius: var(--dt-borders-radius-field-subdued, 3px);
   border-top-right-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1raebd97-3-7-1 {
+._1raebd97-3-9-0 {
   cursor: not-allowed;
   pointer-events: none;
 }
-._1raebd98-3-7-1:is(button) {
+._1raebd98-3-9-0:is(button) {
   cursor: pointer;
 }
-._1raebd9g-3-7-1[tabindex]:hover, button._1raebd9g-3-7-1:hover, a._1raebd9g-3-7-1:hover {
+._1raebd9g-3-9-0[tabindex]:hover, button._1raebd9g-3-9-0:hover, a._1raebd9g-3-9-0:hover {
   background: var(--dt-colors-background-field-neutral-accent-hover, #4d4e72);
 }
-._1raebd9g-3-7-1[tabindex]:active, button._1raebd9g-3-7-1:active, a._1raebd9g-3-7-1:active {
+._1raebd9g-3-9-0[tabindex]:active, button._1raebd9g-3-9-0:active, a._1raebd9g-3-9-0:active {
   background: var(--dt-colors-background-field-neutral-accent-active, #404164);
 }
-._1raebd9h-3-7-1[tabindex]:hover, button._1raebd9h-3-7-1:hover, a._1raebd9h-3-7-1:hover {
+._1raebd9h-3-9-0[tabindex]:hover, button._1raebd9h-3-9-0:hover, a._1raebd9h-3-9-0:hover {
   background: var(--dt-colors-background-field-primary-accent-hover, #3b3fbe);
 }
-._1raebd9h-3-7-1[tabindex]:active, button._1raebd9h-3-7-1:active, a._1raebd9h-3-7-1:active {
+._1raebd9h-3-9-0[tabindex]:active, button._1raebd9h-3-9-0:active, a._1raebd9h-3-9-0:active {
   background: var(--dt-colors-background-field-primary-accent-active, #312dad);
 }
-._1raebd9i-3-7-1[tabindex]:hover, button._1raebd9i-3-7-1:hover, a._1raebd9i-3-7-1:hover {
+._1raebd9i-3-9-0[tabindex]:hover, button._1raebd9i-3-9-0:hover, a._1raebd9i-3-9-0:hover {
   background: var(--dt-colors-background-field-success-accent-hover, #1f5a54);
 }
-._1raebd9i-3-7-1[tabindex]:active, button._1raebd9i-3-7-1:active, a._1raebd9i-3-7-1:active {
+._1raebd9i-3-9-0[tabindex]:active, button._1raebd9i-3-9-0:active, a._1raebd9i-3-9-0:active {
   background: var(--dt-colors-background-field-success-accent-active, #0d4c47);
 }
-._1raebd9j-3-7-1[tabindex]:hover, button._1raebd9j-3-7-1:hover, a._1raebd9j-3-7-1:hover {
+._1raebd9j-3-9-0[tabindex]:hover, button._1raebd9j-3-9-0:hover, a._1raebd9j-3-9-0:hover {
   background: var(--dt-colors-background-field-warning-accent-hover, #ffb54f);
 }
-._1raebd9j-3-7-1[tabindex]:active, button._1raebd9j-3-7-1:active, a._1raebd9j-3-7-1:active {
+._1raebd9j-3-9-0[tabindex]:active, button._1raebd9j-3-9-0:active, a._1raebd9j-3-9-0:active {
   background: var(--dt-colors-background-field-warning-accent-active, #ffc76d);
 }
-._1raebd9k-3-7-1[tabindex]:hover, button._1raebd9k-3-7-1:hover, a._1raebd9k-3-7-1:hover {
+._1raebd9k-3-9-0[tabindex]:hover, button._1raebd9k-3-9-0:hover, a._1raebd9k-3-9-0:hover {
   background: var(--dt-colors-background-field-critical-accent-hover, #b4002b);
 }
-._1raebd9k-3-7-1[tabindex]:active, button._1raebd9k-3-7-1:active, a._1raebd9k-3-7-1:active {
+._1raebd9k-3-9-0[tabindex]:active, button._1raebd9k-3-9-0:active, a._1raebd9k-3-9-0:active {
   background: var(--dt-colors-background-field-critical-accent-active, #a2001d);
 }
-._1raebd9l-3-7-1[tabindex]:hover, button._1raebd9l-3-7-1:hover, a._1raebd9l-3-7-1:hover {
+._1raebd9l-3-9-0[tabindex]:hover, button._1raebd9l-3-9-0:hover, a._1raebd9l-3-9-0:hover {
   background: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1raebd9l-3-7-1[tabindex]:active, button._1raebd9l-3-7-1:active, a._1raebd9l-3-7-1:active {
+._1raebd9l-3-9-0[tabindex]:active, button._1raebd9l-3-9-0:active, a._1raebd9l-3-9-0:active {
   background: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1jgl8s50-3-7-1 ._1raebd9l-3-7-1 {
+._1jgl8s50-3-9-0 ._1raebd9l-3-9-0 {
   background: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._1jgl8s50-3-7-1 ._1raebd9l-3-7-1[tabindex]:hover, ._1jgl8s50-3-7-1 button._1raebd9l-3-7-1:hover, ._1jgl8s50-3-7-1 a._1raebd9l-3-7-1:hover {
+._1jgl8s50-3-9-0 ._1raebd9l-3-9-0[tabindex]:hover, ._1jgl8s50-3-9-0 button._1raebd9l-3-9-0:hover, ._1jgl8s50-3-9-0 a._1raebd9l-3-9-0:hover {
   background: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1jgl8s50-3-7-1 ._1raebd9l-3-7-1[tabindex]:active, ._1jgl8s50-3-7-1 button._1raebd9l-3-7-1:active, ._1jgl8s50-3-7-1 a._1raebd9l-3-7-1:active {
+._1jgl8s50-3-9-0 ._1raebd9l-3-9-0[tabindex]:active, ._1jgl8s50-3-9-0 button._1raebd9l-3-9-0:active, ._1jgl8s50-3-9-0 a._1raebd9l-3-9-0:active {
   background: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1raebd9m-3-7-1[tabindex]:hover, button._1raebd9m-3-7-1:hover, a._1raebd9m-3-7-1:hover {
+._1raebd9m-3-9-0[tabindex]:hover, button._1raebd9m-3-9-0:hover, a._1raebd9m-3-9-0:hover {
   background: var(--dt-colors-background-field-primary-emphasized-hover, #d5dbf6);
 }
-._1raebd9m-3-7-1[tabindex]:active, button._1raebd9m-3-7-1:active, a._1raebd9m-3-7-1:active {
+._1raebd9m-3-9-0[tabindex]:active, button._1raebd9m-3-9-0:active, a._1raebd9m-3-9-0:active {
   background: var(--dt-colors-background-field-primary-emphasized-active, #c9d1f4);
 }
-._1raebd9n-3-7-1[tabindex]:hover, button._1raebd9n-3-7-1:hover, a._1raebd9n-3-7-1:hover {
+._1raebd9n-3-9-0[tabindex]:hover, button._1raebd9n-3-9-0:hover, a._1raebd9n-3-9-0:hover {
   background: var(--dt-colors-background-field-success-emphasized-hover, #d3dedd);
 }
-._1raebd9n-3-7-1[tabindex]:active, button._1raebd9n-3-7-1:active, a._1raebd9n-3-7-1:active {
+._1raebd9n-3-9-0[tabindex]:active, button._1raebd9n-3-9-0:active, a._1raebd9n-3-9-0:active {
   background: var(--dt-colors-background-field-success-emphasized-active, #c7d5d3);
 }
-._1raebd9o-3-7-1[tabindex]:hover, button._1raebd9o-3-7-1:hover, a._1raebd9o-3-7-1:hover {
+._1raebd9o-3-9-0[tabindex]:hover, button._1raebd9o-3-9-0:hover, a._1raebd9o-3-9-0:hover {
   background: var(--dt-colors-background-field-warning-emphasized-hover, #f9ebdb);
 }
-._1raebd9o-3-7-1[tabindex]:active, button._1raebd9o-3-7-1:active, a._1raebd9o-3-7-1:active {
+._1raebd9o-3-9-0[tabindex]:active, button._1raebd9o-3-9-0:active, a._1raebd9o-3-9-0:active {
   background: var(--dt-colors-background-field-warning-emphasized-active, #f9e6d0);
 }
-._1raebd9p-3-7-1[tabindex]:hover, button._1raebd9p-3-7-1:hover, a._1raebd9p-3-7-1:hover {
+._1raebd9p-3-9-0[tabindex]:hover, button._1raebd9p-3-9-0:hover, a._1raebd9p-3-9-0:hover {
   background: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._1raebd9p-3-7-1[tabindex]:active, button._1raebd9p-3-7-1:active, a._1raebd9p-3-7-1:active {
+._1raebd9p-3-9-0[tabindex]:active, button._1raebd9p-3-9-0:active, a._1raebd9p-3-9-0:active {
   background: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1raebd9q-3-7-1 {
-  color: var(--_bx32h0-3-7-1);
+._1raebd9q-3-9-0 {
+  color: var(--_bx32h0-3-9-0);
   min-width: 0;
   box-sizing: border-box;
   white-space: nowrap;
@@ -132,14 +132,14 @@
   text-transform: none;
   padding-inline: var(--dt-spacings-size-2, 2px);
 }
-._1raebd9q-3-7-1 * {
-  color: var(--_bx32h0-3-7-1);
+._1raebd9q-3-9-0 * {
+  color: var(--_bx32h0-3-9-0);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   vertical-align: baseline;
 }
-._1raebd9r-3-7-1 {
+._1raebd9r-3-9-0 {
   display: grid;
   grid: auto / auto-flow auto;
 }

package/esm/content/chip/BaseChip.sty.js

@@ -2,11 +2,11 @@ import "../../core/components/app-root/AppRoot.css";
 import "../../styles/field.css";
 import "./BaseChip.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var container = _7a468({ defaultClassName: "_1raebd92-3-7-1", variantClassNames: { size: { "default": "_1raebd93-3-7-1", condensed: "_1raebd94-3-7-1" }, hasDeleteButton: { true: "_1raebd95-3-7-1", false: "_1raebd96-3-7-1" }, disabled: { true: "_1raebd97-3-7-1", false: "_1raebd98-3-7-1" }, color: { neutral: "_1raebd99-3-7-1", primary: "_1raebd9a-3-7-1", success: "_1raebd9b-3-7-1", warning: "_1raebd9c-3-7-1", critical: "_1raebd9d-3-7-1" }, variant: { emphasized: "_1raebd9e-3-7-1", accent: "_1raebd9f-3-7-1" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", variant: "accent" }, "_1raebd9g-3-7-1"], [{ color: "primary", variant: "accent" }, "_1raebd9h-3-7-1"], [{ color: "success", variant: "accent" }, "_1raebd9i-3-7-1"], [{ color: "warning", variant: "accent" }, "_1raebd9j-3-7-1"], [{ color: "critical", variant: "accent" }, "_1raebd9k-3-7-1"], [{ color: "neutral", variant: "emphasized" }, "_1raebd9l-3-7-1"], [{ color: "primary", variant: "emphasized" }, "_1raebd9m-3-7-1"], [{ color: "success", variant: "emphasized" }, "_1raebd9n-3-7-1"], [{ color: "warning", variant: "emphasized" }, "_1raebd9o-3-7-1"], [{ color: "critical", variant: "emphasized" }, "_1raebd9p-3-7-1"]] });
-var disabledWrapper = "_1raebd91-3-7-1";
-var textContainer = "_1raebd9r-3-7-1";
-var value = "_1raebd9q-3-7-1";
-var wrapper = "_1raebd90-3-7-1";
+var container = _7a468({ defaultClassName: "_1raebd92-3-9-0", variantClassNames: { size: { "default": "_1raebd93-3-9-0", condensed: "_1raebd94-3-9-0" }, hasDeleteButton: { true: "_1raebd95-3-9-0", false: "_1raebd96-3-9-0" }, disabled: { true: "_1raebd97-3-9-0", false: "_1raebd98-3-9-0" }, color: { neutral: "_1raebd99-3-9-0", primary: "_1raebd9a-3-9-0", success: "_1raebd9b-3-9-0", warning: "_1raebd9c-3-9-0", critical: "_1raebd9d-3-9-0" }, variant: { emphasized: "_1raebd9e-3-9-0", accent: "_1raebd9f-3-9-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", variant: "accent" }, "_1raebd9g-3-9-0"], [{ color: "primary", variant: "accent" }, "_1raebd9h-3-9-0"], [{ color: "success", variant: "accent" }, "_1raebd9i-3-9-0"], [{ color: "warning", variant: "accent" }, "_1raebd9j-3-9-0"], [{ color: "critical", variant: "accent" }, "_1raebd9k-3-9-0"], [{ color: "neutral", variant: "emphasized" }, "_1raebd9l-3-9-0"], [{ color: "primary", variant: "emphasized" }, "_1raebd9m-3-9-0"], [{ color: "success", variant: "emphasized" }, "_1raebd9n-3-9-0"], [{ color: "warning", variant: "emphasized" }, "_1raebd9o-3-9-0"], [{ color: "critical", variant: "emphasized" }, "_1raebd9p-3-9-0"]] });
+var disabledWrapper = "_1raebd91-3-9-0";
+var textContainer = "_1raebd9r-3-9-0";
+var value = "_1raebd9q-3-9-0";
+var wrapper = "_1raebd90-3-9-0";
 export {
   container,
   disabledWrapper,

package/esm/content/chip/BaseChip.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/chip/BaseChip.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './BaseChip.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var container = _7a468({defaultClassName:'_1raebd92-3-7-1',variantClassNames:{size:{'default':'_1raebd93-3-7-1',condensed:'_1raebd94-3-7-1'},hasDeleteButton:{true:'_1raebd95-3-7-1',false:'_1raebd96-3-7-1'},disabled:{true:'_1raebd97-3-7-1',false:'_1raebd98-3-7-1'},color:{neutral:'_1raebd99-3-7-1',primary:'_1raebd9a-3-7-1',success:'_1raebd9b-3-7-1',warning:'_1raebd9c-3-7-1',critical:'_1raebd9d-3-7-1'},variant:{emphasized:'_1raebd9e-3-7-1',accent:'_1raebd9f-3-7-1'}},defaultVariants:{},compoundVariants:[[{color:'neutral',variant:'accent'},'_1raebd9g-3-7-1'],[{color:'primary',variant:'accent'},'_1raebd9h-3-7-1'],[{color:'success',variant:'accent'},'_1raebd9i-3-7-1'],[{color:'warning',variant:'accent'},'_1raebd9j-3-7-1'],[{color:'critical',variant:'accent'},'_1raebd9k-3-7-1'],[{color:'neutral',variant:'emphasized'},'_1raebd9l-3-7-1'],[{color:'primary',variant:'emphasized'},'_1raebd9m-3-7-1'],[{color:'success',variant:'emphasized'},'_1raebd9n-3-7-1'],[{color:'warning',variant:'emphasized'},'_1raebd9o-3-7-1'],[{color:'critical',variant:'emphasized'},'_1raebd9p-3-7-1']]});\nexport var disabledWrapper = '_1raebd91-3-7-1';\nexport var textContainer = '_1raebd9r-3-7-1';\nexport var value = '_1raebd9q-3-7-1';\nexport var wrapper = '_1raebd90-3-7-1';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './BaseChip.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var container = _7a468({defaultClassName:'_1raebd92-3-9-0',variantClassNames:{size:{'default':'_1raebd93-3-9-0',condensed:'_1raebd94-3-9-0'},hasDeleteButton:{true:'_1raebd95-3-9-0',false:'_1raebd96-3-9-0'},disabled:{true:'_1raebd97-3-9-0',false:'_1raebd98-3-9-0'},color:{neutral:'_1raebd99-3-9-0',primary:'_1raebd9a-3-9-0',success:'_1raebd9b-3-9-0',warning:'_1raebd9c-3-9-0',critical:'_1raebd9d-3-9-0'},variant:{emphasized:'_1raebd9e-3-9-0',accent:'_1raebd9f-3-9-0'}},defaultVariants:{},compoundVariants:[[{color:'neutral',variant:'accent'},'_1raebd9g-3-9-0'],[{color:'primary',variant:'accent'},'_1raebd9h-3-9-0'],[{color:'success',variant:'accent'},'_1raebd9i-3-9-0'],[{color:'warning',variant:'accent'},'_1raebd9j-3-9-0'],[{color:'critical',variant:'accent'},'_1raebd9k-3-9-0'],[{color:'neutral',variant:'emphasized'},'_1raebd9l-3-9-0'],[{color:'primary',variant:'emphasized'},'_1raebd9m-3-9-0'],[{color:'success',variant:'emphasized'},'_1raebd9n-3-9-0'],[{color:'warning',variant:'emphasized'},'_1raebd9o-3-9-0'],[{color:'critical',variant:'emphasized'},'_1raebd9p-3-9-0']]});\nexport var disabledWrapper = '_1raebd91-3-9-0';\nexport var textContainer = '_1raebd9r-3-9-0';\nexport var value = '_1raebd9q-3-9-0';\nexport var wrapper = '_1raebd90-3-9-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,YAAY,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,GAAE,iBAAgB,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,OAAM,EAAC,SAAQ,mBAAkB,SAAQ,mBAAkB,SAAQ,mBAAkB,SAAQ,mBAAkB,UAAS,kBAAiB,GAAE,SAAQ,EAAC,YAAW,mBAAkB,QAAO,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,YAAW,SAAQ,SAAQ,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,aAAY,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,aAAY,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,aAAY,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,aAAY,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,YAAW,SAAQ,aAAY,GAAE,iBAAiB,CAAC,EAAC,CAAC;AACtjC,IAAI,kBAAkB;AACtB,IAAI,gBAAgB;AACpB,IAAI,QAAQ;AACZ,IAAI,UAAU;",
   "names": []
 }

package/esm/content/chip/ChipContent.css

@@ -1,24 +1,24 @@
-._uhh9yl1-3-7-1 {
+._uhh9yl1-3-9-0 {
   display: flex;
   align-self: stretch;
   line-height: 100%;
-  fill: var(--_bx32h1-3-7-1);
-  color: var(--_bx32h0-3-7-1);
+  fill: var(--_bx32h1-3-9-0);
+  color: var(--_bx32h0-3-9-0);
 }
-._uhh9yl2-3-7-1 {
-  --_uhh9yl0-3-7-1: 20px;
+._uhh9yl2-3-9-0 {
+  --_uhh9yl0-3-9-0: 20px;
 }
-._uhh9yl3-3-7-1 {
-  --_uhh9yl0-3-7-1: 16px;
+._uhh9yl3-3-9-0 {
+  --_uhh9yl0-3-9-0: 16px;
 }
-._1raebd99-3-7-1._1raebd9e-3-7-1._1raebd98-3-7-1 ._uhh9yl4-3-7-1 {
+._1raebd99-3-9-0._1raebd9e-3-9-0._1raebd98-3-9-0 ._uhh9yl4-3-9-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   fill: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._uhh9yl1-3-7-1._uhh9yl1-3-7-1 svg {
+._uhh9yl1-3-9-0._uhh9yl1-3-9-0 svg {
   box-sizing: content-box;
   align-items: center;
   align-self: center;
-  width: var(--_uhh9yl0-3-7-1);
-  height: var(--_uhh9yl0-3-7-1);
+  width: var(--_uhh9yl0-3-9-0);
+  height: var(--_uhh9yl0-3-9-0);
 }