@dynatrace/strato-components 3.13.3 → 3.14.1

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 chipBorderColor = "var(--_1raebd90-3-13-3)";
-var container = _7a468({ defaultClassName: "_1raebd9g-3-13-3", variantClassNames: { size: { "default": "_1raebd9h-3-13-3", condensed: "_1raebd9i-3-13-3" }, hasDeleteButton: { true: "_1raebd9j-3-13-3", false: "_1raebd9k-3-13-3" }, disabled: { true: "_1raebd9l-3-13-3", false: "_1raebd9m-3-13-3" }, color: { neutral: "_1raebd9n-3-13-3", primary: "_1raebd9o-3-13-3", success: "_1raebd9p-3-13-3", warning: "_1raebd9q-3-13-3", critical: "_1raebd9r-3-13-3" }, variant: { emphasized: "_1raebd9s-3-13-3", accent: "_1raebd9t-3-13-3" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", variant: "accent" }, "_1raebd9u-3-13-3"], [{ color: "primary", variant: "accent" }, "_1raebd9v-3-13-3"], [{ color: "success", variant: "accent" }, "_1raebd9w-3-13-3"], [{ color: "warning", variant: "accent" }, "_1raebd9x-3-13-3"], [{ color: "critical", variant: "accent" }, "_1raebd9y-3-13-3"], [{ color: "neutral", variant: "emphasized" }, "_1raebd9z-3-13-3"], [{ color: "neutral", variant: "emphasized", disabled: true }, "_1raebd910-3-13-3"], [{ color: "primary", variant: "emphasized" }, "_1raebd911-3-13-3"], [{ color: "success", variant: "emphasized" }, "_1raebd912-3-13-3"], [{ color: "warning", variant: "emphasized" }, "_1raebd913-3-13-3"], [{ color: "critical", variant: "emphasized" }, "_1raebd914-3-13-3"]] });
-var textContainer = "_1raebd916-3-13-3";
-var value = "_1raebd915-3-13-3";
-var wrapper = _7a468({ defaultClassName: "_1raebd91-3-13-3", variantClassNames: { disabled: { true: "_1raebd92-3-13-3", false: "_1raebd93-3-13-3" }, color: { neutral: "_1raebd94-3-13-3", primary: "_1raebd95-3-13-3", success: "_1raebd96-3-13-3", warning: "_1raebd97-3-13-3", critical: "_1raebd98-3-13-3" }, variant: { emphasized: "_1raebd99-3-13-3", accent: "_1raebd9a-3-13-3" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: true }, "_1raebd9b-3-13-3"], [{ color: "primary", disabled: true }, "_1raebd9c-3-13-3"], [{ color: "success", disabled: true }, "_1raebd9d-3-13-3"], [{ color: "warning", disabled: true }, "_1raebd9e-3-13-3"], [{ color: "critical", disabled: true }, "_1raebd9f-3-13-3"]] });
+var chipBorderColor = "var(--_1raebd90-3-14-1)";
+var container = _7a468({ defaultClassName: "_1raebd9g-3-14-1", variantClassNames: { size: { "default": "_1raebd9h-3-14-1", condensed: "_1raebd9i-3-14-1" }, hasDeleteButton: { true: "_1raebd9j-3-14-1", false: "_1raebd9k-3-14-1" }, disabled: { true: "_1raebd9l-3-14-1", false: "_1raebd9m-3-14-1" }, color: { neutral: "_1raebd9n-3-14-1", primary: "_1raebd9o-3-14-1", success: "_1raebd9p-3-14-1", warning: "_1raebd9q-3-14-1", critical: "_1raebd9r-3-14-1" }, variant: { emphasized: "_1raebd9s-3-14-1", accent: "_1raebd9t-3-14-1" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", variant: "accent" }, "_1raebd9u-3-14-1"], [{ color: "primary", variant: "accent" }, "_1raebd9v-3-14-1"], [{ color: "success", variant: "accent" }, "_1raebd9w-3-14-1"], [{ color: "warning", variant: "accent" }, "_1raebd9x-3-14-1"], [{ color: "critical", variant: "accent" }, "_1raebd9y-3-14-1"], [{ color: "neutral", variant: "emphasized" }, "_1raebd9z-3-14-1"], [{ color: "neutral", variant: "emphasized", disabled: true }, "_1raebd910-3-14-1"], [{ color: "primary", variant: "emphasized" }, "_1raebd911-3-14-1"], [{ color: "success", variant: "emphasized" }, "_1raebd912-3-14-1"], [{ color: "warning", variant: "emphasized" }, "_1raebd913-3-14-1"], [{ color: "critical", variant: "emphasized" }, "_1raebd914-3-14-1"]] });
+var textContainer = "_1raebd916-3-14-1";
+var value = "_1raebd915-3-14-1";
+var wrapper = _7a468({ defaultClassName: "_1raebd91-3-14-1", variantClassNames: { disabled: { true: "_1raebd92-3-14-1", false: "_1raebd93-3-14-1" }, color: { neutral: "_1raebd94-3-14-1", primary: "_1raebd95-3-14-1", success: "_1raebd96-3-14-1", warning: "_1raebd97-3-14-1", critical: "_1raebd98-3-14-1" }, variant: { emphasized: "_1raebd99-3-14-1", accent: "_1raebd9a-3-14-1" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: true }, "_1raebd9b-3-14-1"], [{ color: "primary", disabled: true }, "_1raebd9c-3-14-1"], [{ color: "success", disabled: true }, "_1raebd9d-3-14-1"], [{ color: "warning", disabled: true }, "_1raebd9e-3-14-1"], [{ color: "critical", disabled: true }, "_1raebd9f-3-14-1"]] });
 export {
   chipBorderColor,
   container,

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 chipBorderColor = 'var(--_1raebd90-3-13-3)';\nexport var container = _7a468({defaultClassName:'_1raebd9g-3-13-3',variantClassNames:{size:{'default':'_1raebd9h-3-13-3',condensed:'_1raebd9i-3-13-3'},hasDeleteButton:{true:'_1raebd9j-3-13-3',false:'_1raebd9k-3-13-3'},disabled:{true:'_1raebd9l-3-13-3',false:'_1raebd9m-3-13-3'},color:{neutral:'_1raebd9n-3-13-3',primary:'_1raebd9o-3-13-3',success:'_1raebd9p-3-13-3',warning:'_1raebd9q-3-13-3',critical:'_1raebd9r-3-13-3'},variant:{emphasized:'_1raebd9s-3-13-3',accent:'_1raebd9t-3-13-3'}},defaultVariants:{},compoundVariants:[[{color:'neutral',variant:'accent'},'_1raebd9u-3-13-3'],[{color:'primary',variant:'accent'},'_1raebd9v-3-13-3'],[{color:'success',variant:'accent'},'_1raebd9w-3-13-3'],[{color:'warning',variant:'accent'},'_1raebd9x-3-13-3'],[{color:'critical',variant:'accent'},'_1raebd9y-3-13-3'],[{color:'neutral',variant:'emphasized'},'_1raebd9z-3-13-3'],[{color:'neutral',variant:'emphasized',disabled:true},'_1raebd910-3-13-3'],[{color:'primary',variant:'emphasized'},'_1raebd911-3-13-3'],[{color:'success',variant:'emphasized'},'_1raebd912-3-13-3'],[{color:'warning',variant:'emphasized'},'_1raebd913-3-13-3'],[{color:'critical',variant:'emphasized'},'_1raebd914-3-13-3']]});\nexport var textContainer = '_1raebd916-3-13-3';\nexport var value = '_1raebd915-3-13-3';\nexport var wrapper = _7a468({defaultClassName:'_1raebd91-3-13-3',variantClassNames:{disabled:{true:'_1raebd92-3-13-3',false:'_1raebd93-3-13-3'},color:{neutral:'_1raebd94-3-13-3',primary:'_1raebd95-3-13-3',success:'_1raebd96-3-13-3',warning:'_1raebd97-3-13-3',critical:'_1raebd98-3-13-3'},variant:{emphasized:'_1raebd99-3-13-3',accent:'_1raebd9a-3-13-3'}},defaultVariants:{},compoundVariants:[[{color:'neutral',disabled:true},'_1raebd9b-3-13-3'],[{color:'primary',disabled:true},'_1raebd9c-3-13-3'],[{color:'success',disabled:true},'_1raebd9d-3-13-3'],[{color:'warning',disabled:true},'_1raebd9e-3-13-3'],[{color:'critical',disabled:true},'_1raebd9f-3-13-3']]});"],
+  "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 chipBorderColor = 'var(--_1raebd90-3-14-1)';\nexport var container = _7a468({defaultClassName:'_1raebd9g-3-14-1',variantClassNames:{size:{'default':'_1raebd9h-3-14-1',condensed:'_1raebd9i-3-14-1'},hasDeleteButton:{true:'_1raebd9j-3-14-1',false:'_1raebd9k-3-14-1'},disabled:{true:'_1raebd9l-3-14-1',false:'_1raebd9m-3-14-1'},color:{neutral:'_1raebd9n-3-14-1',primary:'_1raebd9o-3-14-1',success:'_1raebd9p-3-14-1',warning:'_1raebd9q-3-14-1',critical:'_1raebd9r-3-14-1'},variant:{emphasized:'_1raebd9s-3-14-1',accent:'_1raebd9t-3-14-1'}},defaultVariants:{},compoundVariants:[[{color:'neutral',variant:'accent'},'_1raebd9u-3-14-1'],[{color:'primary',variant:'accent'},'_1raebd9v-3-14-1'],[{color:'success',variant:'accent'},'_1raebd9w-3-14-1'],[{color:'warning',variant:'accent'},'_1raebd9x-3-14-1'],[{color:'critical',variant:'accent'},'_1raebd9y-3-14-1'],[{color:'neutral',variant:'emphasized'},'_1raebd9z-3-14-1'],[{color:'neutral',variant:'emphasized',disabled:true},'_1raebd910-3-14-1'],[{color:'primary',variant:'emphasized'},'_1raebd911-3-14-1'],[{color:'success',variant:'emphasized'},'_1raebd912-3-14-1'],[{color:'warning',variant:'emphasized'},'_1raebd913-3-14-1'],[{color:'critical',variant:'emphasized'},'_1raebd914-3-14-1']]});\nexport var textContainer = '_1raebd916-3-14-1';\nexport var value = '_1raebd915-3-14-1';\nexport var wrapper = _7a468({defaultClassName:'_1raebd91-3-14-1',variantClassNames:{disabled:{true:'_1raebd92-3-14-1',false:'_1raebd93-3-14-1'},color:{neutral:'_1raebd94-3-14-1',primary:'_1raebd95-3-14-1',success:'_1raebd96-3-14-1',warning:'_1raebd97-3-14-1',critical:'_1raebd98-3-14-1'},variant:{emphasized:'_1raebd99-3-14-1',accent:'_1raebd9a-3-14-1'}},defaultVariants:{},compoundVariants:[[{color:'neutral',disabled:true},'_1raebd9b-3-14-1'],[{color:'primary',disabled:true},'_1raebd9c-3-14-1'],[{color:'success',disabled:true},'_1raebd9d-3-14-1'],[{color:'warning',disabled:true},'_1raebd9e-3-14-1'],[{color:'critical',disabled:true},'_1raebd9f-3-14-1']]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,kBAAkB;AACtB,IAAI,YAAY,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,MAAK,EAAC,WAAU,oBAAmB,WAAU,mBAAkB,GAAE,iBAAgB,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,GAAE,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,GAAE,OAAM,EAAC,SAAQ,oBAAmB,SAAQ,oBAAmB,SAAQ,oBAAmB,SAAQ,oBAAmB,UAAS,mBAAkB,GAAE,SAAQ,EAAC,YAAW,oBAAmB,QAAO,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,YAAW,SAAQ,SAAQ,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,aAAY,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,cAAa,UAAS,KAAI,GAAE,mBAAmB,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,aAAY,GAAE,mBAAmB,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,aAAY,GAAE,mBAAmB,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,aAAY,GAAE,mBAAmB,GAAE,CAAC,EAAC,OAAM,YAAW,SAAQ,aAAY,GAAE,mBAAmB,CAAC,EAAC,CAAC;AAC7pC,IAAI,gBAAgB;AACpB,IAAI,QAAQ;AACZ,IAAI,UAAU,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,GAAE,OAAM,EAAC,SAAQ,oBAAmB,SAAQ,oBAAmB,SAAQ,oBAAmB,SAAQ,oBAAmB,UAAS,mBAAkB,GAAE,SAAQ,EAAC,YAAW,oBAAmB,QAAO,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,YAAW,UAAS,KAAI,GAAE,kBAAkB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/content/chip/ChipContent.css

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

package/esm/content/chip/ChipContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/chip/ChipContent.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type ReactNode, forwardRef } from 'react';\n\nimport * as styles from './ChipContent.sty.js';\nimport { useChipContext } from './contexts/useChipContext.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\n\n\n//#region Typings\n/**\n * Accepted properties for the Content\n * @public\n */\nexport interface ChipContentProps extends StylingProps, DataTestId {\n  /** Elements to be displayed in the prefix or suffix slot. */\n  children: ReactNode;\n}\n//#endregion\n\n/**\n * ChipContent component, used for adding elements to the prefix/suffix slot.\n * @public\n */\nexport const ChipContent = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  ChipContentProps & { $isPrefixWithKey?: boolean }\n>((props, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    $isPrefixWithKey,\n    ...remainingProps\n  } = props;\n  const { size } = useChipContext();\n\n  return (\n    <div\n      ref={forwardedRef}\n      className={clsx(\n        styles.content({\n          size,\n        }),\n        consumerClassName,\n      )}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      {...remainingProps}\n    >\n      {children}\n    </div>\n  );\n});\n\n/**\n * Component used for adding elements to the prefix slot.\n * @public\n * */\nexport const ChipPrefix = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  ChipContentProps\n>((props, forwardedRef) => {\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...restProps\n  }: ChipContentProps = props;\n  const { hasKey } = useChipContext();\n\n  return (\n    <ChipContent\n      data-testid={dataTestId}\n      ref={forwardedRef}\n      className={clsx(\n        {\n          [styles.prefix]: hasKey,\n        },\n        consumerClassName,\n      )}\n      style={consumerStyle}\n      $isPrefixWithKey={hasKey}\n      {...restProps}\n    />\n  );\n});\n\n/**\n * Component used for adding elements to the suffix slot.\n * @public\n */\nexport const ChipSuffix = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  ChipContentProps\n>((props, forwardedRef) => {\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...restProps\n  }: ChipContentProps = props;\n\n  return (\n    <ChipContent\n      data-testid={dataTestId}\n      ref={forwardedRef}\n      className={consumerClassName}\n      style={consumerStyle}\n      {...restProps}\n    />\n  );\n});\n\n(ChipPrefix as typeof ChipPrefix & { displayName: string }).displayName =\n  'Chip.Prefix';\n(ChipSuffix as typeof ChipSuffix & { displayName: string }).displayName =\n  'Chip.Suffix';\n"],
-  "mappings": "AAuCI;AAvCJ,OAAO,UAAU;AACjB,SAAyB,kBAAkB;AAE3C,YAAY,YAAY;AACxB,SAAS,sBAAsB;AAoBxB,MAAM,cAA8B,2BAGzC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,EAAE,KAAK,IAAI,eAAe;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,QACT,OAAO,QAAQ;AAAA,UACb;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MACA,OAAO;AAAA,MACP,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAMM,MAAM,aAA6B,2BAGxC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAsB;AACtB,QAAM,EAAE,OAAO,IAAI,eAAe;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,KAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,UACE,CAAC,OAAO,MAAM,GAAG;AAAA,QACnB;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO;AAAA,MACP,kBAAkB;AAAA,MACjB,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAMM,MAAM,aAA6B,2BAGxC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAsB;AAEtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,KAAK;AAAA,MACL,WAAW;AAAA,MACX,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAEA,WAA2D,cAC1D;AACD,WAA2D,cAC1D;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type ReactNode, forwardRef } from 'react';\n\nimport * as styles from './ChipContent.sty.js';\nimport { useChipContext } from './contexts/useChipContext.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\n\n//#region Typings\n/**\n * Accepted properties for the Content\n * @public\n */\nexport interface ChipContentProps extends StylingProps, DataTestId {\n  /** Elements to be displayed in the prefix or suffix slot. */\n  children: ReactNode;\n}\n//#endregion\n\n/**\n * ChipContent component, used for adding elements to the prefix/suffix slot.\n * @public\n */\nexport const ChipContent = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  ChipContentProps & { $isPrefixWithKey?: boolean }\n>((props, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    $isPrefixWithKey,\n    ...remainingProps\n  } = props;\n  const { size } = useChipContext();\n\n  return (\n    <div\n      ref={forwardedRef}\n      className={clsx(\n        styles.content({\n          size,\n        }),\n        consumerClassName,\n      )}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      {...remainingProps}\n    >\n      {children}\n    </div>\n  );\n});\n\n/**\n * Component used for adding elements to the prefix slot.\n * @public\n * */\nexport const ChipPrefix = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  ChipContentProps\n>((props, forwardedRef) => {\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...restProps\n  }: ChipContentProps = props;\n  const { hasKey } = useChipContext();\n\n  return (\n    <ChipContent\n      data-testid={dataTestId}\n      ref={forwardedRef}\n      className={clsx(\n        {\n          [styles.prefix]: hasKey,\n        },\n        consumerClassName,\n      )}\n      style={consumerStyle}\n      $isPrefixWithKey={hasKey}\n      {...restProps}\n    />\n  );\n});\n\n/**\n * Component used for adding elements to the suffix slot.\n * @public\n */\nexport const ChipSuffix = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  ChipContentProps\n>((props, forwardedRef) => {\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...restProps\n  }: ChipContentProps = props;\n\n  return (\n    <ChipContent\n      data-testid={dataTestId}\n      ref={forwardedRef}\n      className={consumerClassName}\n      style={consumerStyle}\n      {...restProps}\n    />\n  );\n});\n\n(ChipPrefix as typeof ChipPrefix & { displayName: string }).displayName =\n  'Chip.Prefix';\n(ChipSuffix as typeof ChipSuffix & { displayName: string }).displayName =\n  'Chip.Suffix';\n"],
+  "mappings": "AAsCI;AAtCJ,OAAO,UAAU;AACjB,SAAyB,kBAAkB;AAE3C,YAAY,YAAY;AACxB,SAAS,sBAAsB;AAmBxB,MAAM,cAA8B,2BAGzC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,EAAE,KAAK,IAAI,eAAe;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,QACT,OAAO,QAAQ;AAAA,UACb;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MACA,OAAO;AAAA,MACP,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAMM,MAAM,aAA6B,2BAGxC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAsB;AACtB,QAAM,EAAE,OAAO,IAAI,eAAe;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,KAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,UACE,CAAC,OAAO,MAAM,GAAG;AAAA,QACnB;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO;AAAA,MACP,kBAAkB;AAAA,MACjB,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAMM,MAAM,aAA6B,2BAGxC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAsB;AAEtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,KAAK;AAAA,MACL,WAAW;AAAA,MACX,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAEA,WAA2D,cAC1D;AACD,WAA2D,cAC1D;",
   "names": []
 }

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

@@ -3,8 +3,8 @@ import "../../styles/field.css";
 import "./BaseChip.css";
 import "./ChipContent.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var content = _7a468({ defaultClassName: "_uhh9yl1-3-13-3", variantClassNames: { size: { "default": "_uhh9yl2-3-13-3", condensed: "_uhh9yl3-3-13-3" } }, defaultVariants: {}, compoundVariants: [] });
-var prefix = "_uhh9yl4-3-13-3";
+var content = _7a468({ defaultClassName: "_uhh9yl1-3-14-1", variantClassNames: { size: { "default": "_uhh9yl2-3-14-1", condensed: "_uhh9yl3-3-14-1" } }, defaultVariants: {}, compoundVariants: [] });
+var prefix = "_uhh9yl4-3-14-1";
 export {
   content,
   prefix

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/chip/ChipContent.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './BaseChip.css';\nimport './ChipContent.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var content = _7a468({defaultClassName:'_uhh9yl1-3-13-3',variantClassNames:{size:{'default':'_uhh9yl2-3-13-3',condensed:'_uhh9yl3-3-13-3'}},defaultVariants:{},compoundVariants:[]});\nexport var prefix = '_uhh9yl4-3-13-3';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './BaseChip.css';\nimport './ChipContent.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var content = _7a468({defaultClassName:'_uhh9yl1-3-14-1',variantClassNames:{size:{'default':'_uhh9yl2-3-14-1',condensed:'_uhh9yl3-3-14-1'}},defaultVariants:{},compoundVariants:[]});\nexport var prefix = '_uhh9yl4-3-14-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,UAAU,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACnL,IAAI,SAAS;",
   "names": []
 }

package/esm/content/chip/ChipDeleteButton.css

@@ -1,53 +1,53 @@
-._3mvhm30-3-13-3 {
+._3mvhm30-3-14-1 {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-top-right-radius: var(--dt-borders-radius-field-subdued, 3px);
   border-bottom-right-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1jgl8s50-3-13-3 ._3mvhm30-3-13-3 {
-  --_bx32h4-3-13-3: none;
+._1jgl8s50-3-14-1 ._3mvhm30-3-14-1 {
+  --_bx32h4-3-14-1: none;
 }
-._1jgl8s50-3-13-3 ._3mvhm30-3-13-3:hover {
-  --_bx32h4-3-13-3: none;
+._1jgl8s50-3-14-1 ._3mvhm30-3-14-1:hover {
+  --_bx32h4-3-14-1: none;
 }
-._1jgl8s50-3-13-3 ._3mvhm30-3-13-3:active {
-  --_bx32h4-3-13-3: none;
+._1jgl8s50-3-14-1 ._3mvhm30-3-14-1:active {
+  --_bx32h4-3-14-1: none;
 }
-._1jgl8s50-3-13-3 ._3mvhm31-3-13-3 {
+._1jgl8s50-3-14-1 ._3mvhm31-3-14-1 {
   border-style: var(--dt-borders-style-default, solid);
   border-width: var(--dt-borders-width-default, 1px);
   border-left-width: 0;
-  border-color: var(--_1raebd90-3-13-3);
+  border-color: var(--_1raebd90-3-14-1);
   height: var(--dt-spacings-size-24, 24px);
 }
-._1jgl8s50-3-13-3 ._3mvhm32-3-13-3 {
+._1jgl8s50-3-14-1 ._3mvhm32-3-14-1 {
   border-style: var(--dt-borders-style-default, solid);
   border-width: var(--dt-borders-width-default, 1px);
   border-left-width: 0;
-  border-color: var(--_1raebd90-3-13-3);
+  border-color: var(--_1raebd90-3-14-1);
   height: var(--dt-spacings-size-20, 20px);
 }
-._1jgl8s50-3-13-3 ._3mvhm33-3-13-3 {
-  --_bx32h3-3-13-3: var(--dt-colors-background-base-default, #f9f9fa);
-  --_bx32h2-3-13-3: var(--dt-colors-background-base-default, #f9f9fa);
+._1jgl8s50-3-14-1 ._3mvhm33-3-14-1 {
+  --_bx32h3-3-14-1: var(--dt-colors-background-base-default, #f9f9fa);
+  --_bx32h2-3-14-1: var(--dt-colors-background-base-default, #f9f9fa);
 }
-._1jgl8s50-3-13-3 ._3mvhm33-3-13-3:hover {
-  --_bx32h3-3-13-3: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+._1jgl8s50-3-14-1 ._3mvhm33-3-14-1:hover {
+  --_bx32h3-3-14-1: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1jgl8s50-3-13-3 ._3mvhm33-3-13-3:active {
-  --_bx32h3-3-13-3: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
+._1jgl8s50-3-14-1 ._3mvhm33-3-14-1:active {
+  --_bx32h3-3-14-1: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1jgl8s50-3-13-3 ._3mvhm34-3-13-3, ._1jgl8s50-3-13-3 ._3mvhm34-3-13-3:hover, ._1jgl8s50-3-13-3 ._3mvhm34-3-13-3:active {
-  --_bx32h3-3-13-3: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-  --_bx32h2-3-13-3: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+._1jgl8s50-3-14-1 ._3mvhm34-3-14-1, ._1jgl8s50-3-14-1 ._3mvhm34-3-14-1:hover, ._1jgl8s50-3-14-1 ._3mvhm34-3-14-1:active {
+  --_bx32h3-3-14-1: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  --_bx32h2-3-14-1: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._3mvhm35-3-13-3 {
+._3mvhm35-3-14-1 {
   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);
 }
-._3mvhm36-3-13-3 {
+._3mvhm36-3-14-1 {
   padding-left: var(--dt-spacings-size-2, 2px);
   padding-right: var(--dt-spacings-size-2, 2px);
   padding-top: var(--dt-spacings-size-2, 2px);

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

@@ -2,11 +2,11 @@ import "../../core/components/app-root/AppRoot.css";
 import "../../styles/field.css";
 import "./BaseChip.css";
 import "./ChipDeleteButton.css";
-var base = "_3mvhm30-3-13-3";
-var disabledOverride = "_3mvhm34-3-13-3";
-var emphasizedBorder = { "default": "_3mvhm31-3-13-3", condensed: "_3mvhm32-3-13-3" };
-var neutralEmphasizedOverride = "_3mvhm33-3-13-3";
-var size = { "default": "_3mvhm35-3-13-3", condensed: "_3mvhm36-3-13-3" };
+var base = "_3mvhm30-3-14-1";
+var disabledOverride = "_3mvhm34-3-14-1";
+var emphasizedBorder = { "default": "_3mvhm31-3-14-1", condensed: "_3mvhm32-3-14-1" };
+var neutralEmphasizedOverride = "_3mvhm33-3-14-1";
+var size = { "default": "_3mvhm35-3-14-1", condensed: "_3mvhm36-3-14-1" };
 export {
   base,
   disabledOverride,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/chip/ChipDeleteButton.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './BaseChip.css';\nimport './ChipDeleteButton.css';\nexport var base = '_3mvhm30-3-13-3';\nexport var disabledOverride = '_3mvhm34-3-13-3';\nexport var emphasizedBorder = {'default':'_3mvhm31-3-13-3',condensed:'_3mvhm32-3-13-3'};\nexport var neutralEmphasizedOverride = '_3mvhm33-3-13-3';\nexport var size = {'default':'_3mvhm35-3-13-3',condensed:'_3mvhm36-3-13-3'};"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './BaseChip.css';\nimport './ChipDeleteButton.css';\nexport var base = '_3mvhm30-3-14-1';\nexport var disabledOverride = '_3mvhm34-3-14-1';\nexport var emphasizedBorder = {'default':'_3mvhm31-3-14-1',condensed:'_3mvhm32-3-14-1'};\nexport var neutralEmphasizedOverride = '_3mvhm33-3-14-1';\nexport var size = {'default':'_3mvhm35-3-14-1',condensed:'_3mvhm36-3-14-1'};"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,OAAO;AACX,IAAI,mBAAmB;AACvB,IAAI,mBAAmB,EAAC,WAAU,mBAAkB,WAAU,kBAAiB;AAC/E,IAAI,4BAA4B;AAChC,IAAI,OAAO,EAAC,WAAU,mBAAkB,WAAU,kBAAiB;",
   "names": []
 }

package/esm/content/chip/ChipKey.css

@@ -1,11 +1,11 @@
-._1pehkco1-3-13-3 {
-  --_1pehkco0-3-13-3: var(--_bx32h0-3-13-3);
+._1pehkco1-3-14-1 {
+  --_1pehkco0-3-14-1: var(--_bx32h0-3-14-1);
   padding-inline: var(--dt-spacings-size-2, 2px);
 }
-._1raebd9n-3-13-3._1raebd9s-3-13-3._1raebd9m-3-13-3 ._1pehkco1-3-13-3 {
-  --_1pehkco0-3-13-3: var(--dt-colors-icon-neutral-subdued, #595a7d);
+._1raebd9n-3-14-1._1raebd9s-3-14-1._1raebd9m-3-14-1 ._1pehkco1-3-14-1 {
+  --_1pehkco0-3-14-1: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._1pehkco1-3-13-3._1pehkco1-3-13-3, ._1pehkco1-3-13-3._1pehkco1-3-13-3 *, ._1pehkco1-3-13-3._1pehkco1-3-13-3 *:hover {
+._1pehkco1-3-14-1._1pehkco1-3-14-1, ._1pehkco1-3-14-1._1pehkco1-3-14-1 *, ._1pehkco1-3-14-1._1pehkco1-3-14-1 *:hover {
   min-width: 0;
   box-sizing: border-box;
   white-space: nowrap;
@@ -13,5 +13,5 @@
   text-overflow: ellipsis;
   display: block;
   text-transform: none;
-  color: var(--_1pehkco0-3-13-3);
+  color: var(--_1pehkco0-3-14-1);
 }

package/esm/content/chip/ChipKey.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/chip/ChipKey.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport * as styles from './ChipKey.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 { Flex } from '../../layouts/flex/Flex.js';\n\n\n//#region Typings\n/**\n * Accepted properties for the Key.\n * @public\n */\nexport type ChipKeyProps = WithChildren & StylingProps & DataTestId;\n//#endregion\n\n/**\n * Component used for adding elements to the key slot.\n * @public\n */\nexport const ChipKey = /* @__PURE__ */ forwardRef<HTMLDivElement, ChipKeyProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n    }: ChipKeyProps = props;\n\n    return (\n      <Flex\n        alignSelf=\"stretch\"\n        alignItems=\"center\"\n        minWidth={0}\n        ref={forwardedRef}\n        data-testid={dataTestId}\n        gap={2}\n        className={clsx(consumerClassName, styles.key)}\n        style={consumerStyle}\n      >\n        {children}\n      </Flex>\n    );\n  },\n);\n\n(ChipKey as typeof ChipKey & { displayName: string }).displayName = 'Chip.Key';\n"],
-  "mappings": "AAgCM;AAhCN,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,YAAY,YAAY;AAIxB,SAAS,YAAY;AAed,MAAM,UAA0B;AAAA,EACrC,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,IACjB,IAAkB;AAElB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,YAAW;AAAA,QACX,UAAU;AAAA,QACV,KAAK;AAAA,QACL,eAAa;AAAA,QACb,KAAK;AAAA,QACL,WAAW,KAAK,mBAAmB,OAAO,GAAG;AAAA,QAC7C,OAAO;AAAA,QAEN;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,QAAqD,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport * as styles from './ChipKey.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 { Flex } from '../../layouts/flex/Flex.js';\n\n//#region Typings\n/**\n * Accepted properties for the Key.\n * @public\n */\nexport type ChipKeyProps = WithChildren & StylingProps & DataTestId;\n//#endregion\n\n/**\n * Component used for adding elements to the key slot.\n * @public\n */\nexport const ChipKey = /* @__PURE__ */ forwardRef<HTMLDivElement, ChipKeyProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n    }: ChipKeyProps = props;\n\n    return (\n      <Flex\n        alignSelf=\"stretch\"\n        alignItems=\"center\"\n        minWidth={0}\n        ref={forwardedRef}\n        data-testid={dataTestId}\n        gap={2}\n        className={clsx(consumerClassName, styles.key)}\n        style={consumerStyle}\n      >\n        {children}\n      </Flex>\n    );\n  },\n);\n\n(ChipKey as typeof ChipKey & { displayName: string }).displayName = 'Chip.Key';\n"],
+  "mappings": "AA+BM;AA/BN,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,YAAY,YAAY;AAIxB,SAAS,YAAY;AAcd,MAAM,UAA0B;AAAA,EACrC,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,IACjB,IAAkB;AAElB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,YAAW;AAAA,QACX,UAAU;AAAA,QACV,KAAK;AAAA,QACL,eAAa;AAAA,QACb,KAAK;AAAA,QACL,WAAW,KAAK,mBAAmB,OAAO,GAAG;AAAA,QAC7C,OAAO;AAAA,QAEN;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,QAAqD,cAAc;",
   "names": []
 }

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

@@ -2,7 +2,7 @@ import "../../core/components/app-root/AppRoot.css";
 import "../../styles/field.css";
 import "./BaseChip.css";
 import "./ChipKey.css";
-var key = "_1pehkco1-3-13-3";
+var key = "_1pehkco1-3-14-1";
 export {
   key
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/chip/ChipKey.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './BaseChip.css';\nimport './ChipKey.css';\nexport var key = '_1pehkco1-3-13-3';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './BaseChip.css';\nimport './ChipKey.css';\nexport var key = '_1pehkco1-3-14-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,MAAM;",
   "names": []
 }

package/esm/content/chip/GroupedChip.css

@@ -1,22 +1,22 @@
-._4mpedx0-3-13-3 {
+._4mpedx0-3-14-1 {
   position: absolute;
   visibility: hidden;
   z-index: -1;
 }
-._4mpedx1-3-13-3 {
+._4mpedx1-3-14-1 {
   flex: 0 0 auto;
 }
-._4mpedx1-3-13-3:focus {
+._4mpedx1-3-14-1:focus {
   outline: none;
 }
-._4mpedx2-3-13-3 {
+._4mpedx2-3-14-1 {
   min-width: 0;
   flex: 0 1 auto;
 }
-._4mpedx3-3-13-3 {
+._4mpedx3-3-14-1 {
   position: relative;
 }
-._4mpedx3-3-13-3::before {
+._4mpedx3-3-14-1::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -26,10 +26,10 @@
   box-shadow: 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-accent, #595a7d) inset,
       0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--dt-colors-border-neutral-default, #dadbe4) inset;
 }
-._4mpedx4-3-13-3 {
+._4mpedx4-3-14-1 {
   position: relative;
 }
-._4mpedx4-3-13-3::before {
+._4mpedx4-3-14-1::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -39,10 +39,10 @@
   box-shadow: 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-primary-accent, #464cce) inset,
       0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--dt-colors-border-primary-default, #d5dbf6) inset;
 }
-._4mpedx5-3-13-3 {
+._4mpedx5-3-14-1 {
   position: relative;
 }
-._4mpedx5-3-13-3::before {
+._4mpedx5-3-14-1::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -52,10 +52,10 @@
   box-shadow: 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-success-accent, #2d6761) inset,
       0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--dt-colors-border-success-default, #d3dedd) inset;
 }
-._4mpedx6-3-13-3 {
+._4mpedx6-3-14-1 {
   position: relative;
 }
-._4mpedx6-3-13-3::before {
+._4mpedx6-3-14-1::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -65,10 +65,10 @@
   box-shadow: 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-warning-accent, #855400) inset,
       0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--dt-colors-border-warning-default, #f9ebdb) inset;
 }
-._4mpedx7-3-13-3 {
+._4mpedx7-3-14-1 {
   position: relative;
 }
-._4mpedx7-3-13-3::before {
+._4mpedx7-3-14-1::before {
   content: "";
   position: absolute;
   inset: 0;

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

@@ -1,9 +1,9 @@
 import "../../core/styles/focusRingStatic.css";
 import "./GroupedChip.css";
-var first = "_4mpedx2-3-13-3";
-var grouped = "_4mpedx1-3-13-3";
-var hidden = "_4mpedx0-3-13-3";
-var pendingFocusRing = { neutral: "_4mpedx3-3-13-3", primary: "_4mpedx4-3-13-3", success: "_4mpedx5-3-13-3", warning: "_4mpedx6-3-13-3", critical: "_4mpedx7-3-13-3" };
+var first = "_4mpedx2-3-14-1";
+var grouped = "_4mpedx1-3-14-1";
+var hidden = "_4mpedx0-3-14-1";
+var pendingFocusRing = { neutral: "_4mpedx3-3-14-1", primary: "_4mpedx4-3-14-1", success: "_4mpedx5-3-14-1", warning: "_4mpedx6-3-14-1", critical: "_4mpedx7-3-14-1" };
 export {
   first,
   grouped,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/chip/GroupedChip.css.ts"],
-  "sourcesContent": ["import '../../core/styles/focusRingStatic.css';\nimport './GroupedChip.css';\nexport var first = '_4mpedx2-3-13-3';\nexport var grouped = '_4mpedx1-3-13-3';\nexport var hidden = '_4mpedx0-3-13-3';\nexport var pendingFocusRing = {neutral:'_4mpedx3-3-13-3',primary:'_4mpedx4-3-13-3',success:'_4mpedx5-3-13-3',warning:'_4mpedx6-3-13-3',critical:'_4mpedx7-3-13-3'};"],
+  "sourcesContent": ["import '../../core/styles/focusRingStatic.css';\nimport './GroupedChip.css';\nexport var first = '_4mpedx2-3-14-1';\nexport var grouped = '_4mpedx1-3-14-1';\nexport var hidden = '_4mpedx0-3-14-1';\nexport var pendingFocusRing = {neutral:'_4mpedx3-3-14-1',primary:'_4mpedx4-3-14-1',success:'_4mpedx5-3-14-1',warning:'_4mpedx6-3-14-1',critical:'_4mpedx7-3-14-1'};"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,QAAQ;AACZ,IAAI,UAAU;AACd,IAAI,SAAS;AACb,IAAI,mBAAmB,EAAC,SAAQ,mBAAkB,SAAQ,mBAAkB,SAAQ,mBAAkB,SAAQ,mBAAkB,UAAS,kBAAiB;",
   "names": []
 }

package/esm/content/chip-group/ChipGroup.css

@@ -1,4 +1,4 @@
-._dwt8fp0-3-13-3 {
+._dwt8fp0-3-14-1 {
   position: relative;
   align-items: center;
   align-content: center;
@@ -7,12 +7,12 @@
   overflow: hidden;
   line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
 }
-._dwt8fp1-3-13-3 {
+._dwt8fp1-3-14-1 {
   gap: var(--dt-spacings-size-6, 6px);
 }
-._dwt8fp3-3-13-3 {
+._dwt8fp3-3-14-1 {
   flex-wrap: wrap;
 }
-._dwt8fp4-3-13-3 {
+._dwt8fp4-3-14-1 {
   flex-wrap: nowrap;
 }

package/esm/content/chip-group/ChipGroup.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { forwardRef, useEffect, useReducer, useRef, useState } from "react";
+import { COMPONENT_NAME } from "./chip-group-constants.js";
 import {
   computeAllChipsFitExpanded,
   findOverflowChipIndex
@@ -21,7 +22,6 @@ import { useId } from "../../core/hooks/useId.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
 import { useSafeForwardProps } from "../../core/hooks/useSafeForwardProps.js";
 import { Flex } from "../../layouts/flex/Flex.js";
-const COMPONENT_NAME = "ChipGroup";
 const RootChipGroup = forwardRef(
   (props, forwardedRef) => {
     const {

package/esm/content/chip-group/ChipGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/chip-group/ChipGroup.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useEffect, useReducer, useRef, useState } from 'react';\n\nimport {\n  computeAllChipsFitExpanded,\n  findOverflowChipIndex,\n} from './chip-group-utils.js';\nimport { chipGroupCSS } from './ChipGroup.sty.js';\nimport { ChipGroupContext } from './contexts/ChipGroupContext.js';\nimport {\n  InternalChipGroupContext,\n  type PendingFocusChip,\n} from './contexts/InternalChipGroupContext.js';\nimport { Control } from './Control.js';\nimport { HiddenCount } from './HiddenCount.js';\nimport { chipGroupReducer } from './state/chip-group-state-reducer.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport type { ChipOwnProps } from '../chip/types/chip.js';\n\nconst COMPONENT_NAME = 'ChipGroup';\n\n/**\n * Accepted base properties for ChipGroup.\n * @public\n */\nexport interface ChipGroupBaseProps\n  extends\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    AriaLabelingProps,\n    BehaviorTrackingProps {\n  /**\n   * Whether the chip group is disabled.\n   * If set to true, all the chips inside the group are disabled, unless explicitly overridden.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n\n  /**\n   * The size of the spacing and chips in the group.\n   * All the chips match the size of the group, but can be overridden individually.\n   * @defaultValue default\n   */\n  size?: ChipOwnProps['size'];\n\n  /**\n   * Callback triggered when the expanded state changes.\n   */\n  onExpandedChange?: (state: boolean) => void;\n\n  /**\n   * Maximum number of chips rendered before the \"Show more\" control.\n   *\n   * If set to 'auto', the chip group automatically determines\n   * how many chips can fit based on the available width.\n   * If a number is provided, it limits the visible chips to that number\n   * when the group is collapsed, regardless of available space.\n   * @defaultValue 'auto'\n   */\n  maxVisibleChips?: 'auto' | number;\n}\n\n/**\n * Properties for the controlled variant of ChipGroup.\n * @public\n */\nexport interface ChipGroupControlledProps {\n  /** Whether the chip group is expanded. */\n  expanded?: boolean;\n  /** Whether the chip group is expanded by default. */\n  defaultExpanded?: never;\n}\n\n/**\n * Properties for the uncontrolled variant of ChipGroup.\n * @public\n */\nexport interface ChipGroupUncontrolledProps {\n  /** Whether the chip group is expanded. */\n  expanded?: never;\n  /** Whether the chip group is expanded by default. */\n  defaultExpanded?: boolean;\n}\n\n/**\n * Properties for the ChipGroup component.\n * @public\n */\nexport type ChipGroupProps = ChipGroupBaseProps &\n  (ChipGroupControlledProps | ChipGroupUncontrolledProps) &\n  WithChildren;\n\n/**\n * ChipGroup component\n */\nconst RootChipGroup = forwardRef<HTMLElement, ChipGroupProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      expanded: expandedProp,\n      defaultExpanded,\n      disabled,\n      size,\n      onExpandedChange,\n      maxVisibleChips = 'auto',\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 uniqueId = useId();\n\n    const [state, dispatch] = useReducer(chipGroupReducer, {\n      chips: {},\n    });\n\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const rootRef = useMergeRefs<HTMLElement | null>([\n      containerRef,\n      forwardedRef,\n    ]);\n\n    // Width of the chip group container.\n    const { width: containerWidth } = useContainerSize(containerRef);\n\n    const [expanded, setExpanded] = useControllableState({\n      value: expandedProp,\n      defaultValue: defaultExpanded,\n      onChange: onExpandedChange,\n    });\n\n    const [allChipsFit, setAllChipsFit] = useState(false);\n    const [hiddenChips, setHiddenChips] = useState<string[]>([]);\n    const [visibleChips, setVisibleChips] = useState<string[]>([]);\n    const [pendingFocusChip, setPendingFocusChip] =\n      useState<PendingFocusChip>(null);\n\n    useEffect(() => {\n      const chipEntries = Object.entries(state.chips);\n      const chipEntriesKeys = chipEntries.map(\n        ([uniqueChipKey]) => uniqueChipKey,\n      );\n\n      // Reset visibility when there are no chips.\n      if (chipEntries.length === 0) {\n        setVisibleChips([]);\n        return;\n      }\n\n      // Cannot calculate visibility when any chip has not been measured yet.\n      if (chipEntries.some(([, chip]) => !chip.width)) {\n        return;\n      }\n\n      if (expanded) {\n        setHiddenChips([]);\n        setVisibleChips(chipEntriesKeys);\n\n        // When `expanded` is controlled, the consumer owns the toggle and renders the\n        // control so users can collapse again. Auto-hiding it because everything currently\n        // fits would remove their control, so the auto-hide behaviour only applies in\n        // uncontrolled mode where the component manages expansion itself.\n        if (expandedProp !== undefined) {\n          setAllChipsFit(false);\n          return;\n        }\n\n        setAllChipsFit(\n          computeAllChipsFitExpanded(\n            chipEntries,\n            containerWidth,\n            size,\n            state.control?.width ?? 0,\n            state.control?.show,\n            maxVisibleChips,\n          ),\n        );\n        return;\n      }\n\n      const fittingIndex = findOverflowChipIndex(\n        chipEntries,\n        containerWidth,\n        size,\n        state.control?.width || 0,\n        state.control?.show,\n      );\n\n      // Apply maxVisibleChips limit if specified and valid (non-negative)\n      const effectiveHiddenChipsIndex =\n        maxVisibleChips !== 'auto' && maxVisibleChips >= 0\n          ? Math.min(fittingIndex, maxVisibleChips)\n          : fittingIndex;\n\n      setAllChipsFit(effectiveHiddenChipsIndex === chipEntries.length);\n      setHiddenChips(chipEntriesKeys.slice(effectiveHiddenChipsIndex));\n      setVisibleChips(chipEntriesKeys.slice(0, effectiveHiddenChipsIndex));\n    }, [containerWidth, expanded, expandedProp, size, state, maxVisibleChips]);\n\n    return (\n      <ChipGroupContext.Provider\n        value={{\n          visibleKeys: visibleChips,\n          hiddenKeys: hiddenChips,\n        }}\n      >\n        <InternalChipGroupContext.Provider\n          value={{\n            chipGroupId: uniqueId,\n            disabled,\n            size,\n            expanded,\n            allChipsFit,\n            dispatch,\n            setExpanded,\n            pendingFocusChip,\n            setPendingFocusChip,\n          }}\n        >\n          <Flex\n            ref={rootRef}\n            id={uniqueId}\n            className={clsx(\n              chipGroupCSS({ size, expanded }),\n              consumerClassName,\n            )}\n            style={consumerStyle}\n            data-testid={dataTestId}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n            {...ariaLabelingProps}\n            {...behavioralTrackingProps}\n            {...forwardProps}\n            data-dt-component={COMPONENT_NAME}\n          >\n            {children}\n          </Flex>\n        </InternalChipGroupContext.Provider>\n      </ChipGroupContext.Provider>\n    );\n  },\n);\n\n(RootChipGroup as typeof RootChipGroup & { displayName: string }).displayName =\n  COMPONENT_NAME;\n\n/**\n * Use the `ChipGroup` to group multiple `Chip` components in an expandable container.\n * @public\n */\nexport const ChipGroup = Object.assign(RootChipGroup, {\n  Control,\n  HiddenCount,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useEffect, useReducer, useRef, useState } from 'react';\n\nimport { COMPONENT_NAME } from './chip-group-constants.js';\nimport {\n  computeAllChipsFitExpanded,\n  findOverflowChipIndex,\n} from './chip-group-utils.js';\nimport { chipGroupCSS } from './ChipGroup.sty.js';\nimport { ChipGroupContext } from './contexts/ChipGroupContext.js';\nimport {\n  InternalChipGroupContext,\n  type PendingFocusChip,\n} from './contexts/InternalChipGroupContext.js';\nimport { Control } from './Control.js';\nimport { HiddenCount } from './HiddenCount.js';\nimport { chipGroupReducer } from './state/chip-group-state-reducer.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport type { ChipOwnProps } from '../chip/types/chip.js';\n\n/**\n * Accepted base properties for ChipGroup.\n * @public\n */\nexport interface ChipGroupBaseProps\n  extends\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    AriaLabelingProps,\n    BehaviorTrackingProps {\n  /**\n   * Whether the chip group is disabled.\n   * If set to true, all the chips inside the group are disabled, unless explicitly overridden.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n\n  /**\n   * The size of the spacing and chips in the group.\n   * All the chips match the size of the group, but can be overridden individually.\n   * @defaultValue default\n   */\n  size?: ChipOwnProps['size'];\n\n  /**\n   * Callback triggered when the expanded state changes.\n   */\n  onExpandedChange?: (state: boolean) => void;\n\n  /**\n   * Maximum number of chips rendered before the \"Show more\" control.\n   *\n   * If set to 'auto', the chip group automatically determines\n   * how many chips can fit based on the available width.\n   * If a number is provided, it limits the visible chips to that number\n   * when the group is collapsed, regardless of available space.\n   * @defaultValue 'auto'\n   */\n  maxVisibleChips?: 'auto' | number;\n}\n\n/**\n * Properties for the controlled variant of ChipGroup.\n * @public\n */\nexport interface ChipGroupControlledProps {\n  /** Whether the chip group is expanded. */\n  expanded?: boolean;\n  /** Whether the chip group is expanded by default. */\n  defaultExpanded?: never;\n}\n\n/**\n * Properties for the uncontrolled variant of ChipGroup.\n * @public\n */\nexport interface ChipGroupUncontrolledProps {\n  /** Whether the chip group is expanded. */\n  expanded?: never;\n  /** Whether the chip group is expanded by default. */\n  defaultExpanded?: boolean;\n}\n\n/**\n * Properties for the ChipGroup component.\n * @public\n */\nexport type ChipGroupProps = ChipGroupBaseProps &\n  (ChipGroupControlledProps | ChipGroupUncontrolledProps) &\n  WithChildren;\n\n/**\n * ChipGroup component\n */\nconst RootChipGroup = forwardRef<HTMLElement, ChipGroupProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      expanded: expandedProp,\n      defaultExpanded,\n      disabled,\n      size,\n      onExpandedChange,\n      maxVisibleChips = 'auto',\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 uniqueId = useId();\n\n    const [state, dispatch] = useReducer(chipGroupReducer, {\n      chips: {},\n    });\n\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const rootRef = useMergeRefs<HTMLElement | null>([\n      containerRef,\n      forwardedRef,\n    ]);\n\n    // Width of the chip group container.\n    const { width: containerWidth } = useContainerSize(containerRef);\n\n    const [expanded, setExpanded] = useControllableState({\n      value: expandedProp,\n      defaultValue: defaultExpanded,\n      onChange: onExpandedChange,\n    });\n\n    const [allChipsFit, setAllChipsFit] = useState(false);\n    const [hiddenChips, setHiddenChips] = useState<string[]>([]);\n    const [visibleChips, setVisibleChips] = useState<string[]>([]);\n    const [pendingFocusChip, setPendingFocusChip] =\n      useState<PendingFocusChip>(null);\n\n    useEffect(() => {\n      const chipEntries = Object.entries(state.chips);\n      const chipEntriesKeys = chipEntries.map(\n        ([uniqueChipKey]) => uniqueChipKey,\n      );\n\n      // Reset visibility when there are no chips.\n      if (chipEntries.length === 0) {\n        setVisibleChips([]);\n        return;\n      }\n\n      // Cannot calculate visibility when any chip has not been measured yet.\n      if (chipEntries.some(([, chip]) => !chip.width)) {\n        return;\n      }\n\n      if (expanded) {\n        setHiddenChips([]);\n        setVisibleChips(chipEntriesKeys);\n\n        // When `expanded` is controlled, the consumer owns the toggle and renders the\n        // control so users can collapse again. Auto-hiding it because everything currently\n        // fits would remove their control, so the auto-hide behaviour only applies in\n        // uncontrolled mode where the component manages expansion itself.\n        if (expandedProp !== undefined) {\n          setAllChipsFit(false);\n          return;\n        }\n\n        setAllChipsFit(\n          computeAllChipsFitExpanded(\n            chipEntries,\n            containerWidth,\n            size,\n            state.control?.width ?? 0,\n            state.control?.show,\n            maxVisibleChips,\n          ),\n        );\n        return;\n      }\n\n      const fittingIndex = findOverflowChipIndex(\n        chipEntries,\n        containerWidth,\n        size,\n        state.control?.width || 0,\n        state.control?.show,\n      );\n\n      // Apply maxVisibleChips limit if specified and valid (non-negative)\n      const effectiveHiddenChipsIndex =\n        maxVisibleChips !== 'auto' && maxVisibleChips >= 0\n          ? Math.min(fittingIndex, maxVisibleChips)\n          : fittingIndex;\n\n      setAllChipsFit(effectiveHiddenChipsIndex === chipEntries.length);\n      setHiddenChips(chipEntriesKeys.slice(effectiveHiddenChipsIndex));\n      setVisibleChips(chipEntriesKeys.slice(0, effectiveHiddenChipsIndex));\n    }, [containerWidth, expanded, expandedProp, size, state, maxVisibleChips]);\n\n    return (\n      <ChipGroupContext.Provider\n        value={{\n          visibleKeys: visibleChips,\n          hiddenKeys: hiddenChips,\n        }}\n      >\n        <InternalChipGroupContext.Provider\n          value={{\n            chipGroupId: uniqueId,\n            disabled,\n            size,\n            expanded,\n            allChipsFit,\n            dispatch,\n            setExpanded,\n            pendingFocusChip,\n            setPendingFocusChip,\n          }}\n        >\n          <Flex\n            ref={rootRef}\n            id={uniqueId}\n            className={clsx(\n              chipGroupCSS({ size, expanded }),\n              consumerClassName,\n            )}\n            style={consumerStyle}\n            data-testid={dataTestId}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n            {...ariaLabelingProps}\n            {...behavioralTrackingProps}\n            {...forwardProps}\n            data-dt-component={COMPONENT_NAME}\n          >\n            {children}\n          </Flex>\n        </InternalChipGroupContext.Provider>\n      </ChipGroupContext.Provider>\n    );\n  },\n);\n\n(RootChipGroup as typeof RootChipGroup & { displayName: string }).displayName =\n  COMPONENT_NAME;\n\n/**\n * Use the `ChipGroup` to group multiple `Chip` components in an expandable container.\n * @public\n */\nexport const ChipGroup = Object.assign(RootChipGroup, {\n  Control,\n  HiddenCount,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/content/chip-group/ChipGroup.sty.js

@@ -1,6 +1,6 @@
 import "./ChipGroup.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var chipGroupCSS = _7a468({ defaultClassName: "_dwt8fp0-3-13-3", variantClassNames: { size: { condensed: "_dwt8fp1-3-13-3", "default": "_dwt8fp2-3-13-3" }, expanded: { true: "_dwt8fp3-3-13-3", false: "_dwt8fp4-3-13-3" } }, defaultVariants: {}, compoundVariants: [] });
+var chipGroupCSS = _7a468({ defaultClassName: "_dwt8fp0-3-14-1", variantClassNames: { size: { condensed: "_dwt8fp1-3-14-1", "default": "_dwt8fp2-3-14-1" }, expanded: { true: "_dwt8fp3-3-14-1", false: "_dwt8fp4-3-14-1" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   chipGroupCSS
 };

package/esm/content/chip-group/ChipGroup.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/chip-group/ChipGroup.css.ts"],
-  "sourcesContent": ["import './ChipGroup.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var chipGroupCSS = _7a468({defaultClassName:'_dwt8fp0-3-13-3',variantClassNames:{size:{condensed:'_dwt8fp1-3-13-3','default':'_dwt8fp2-3-13-3'},expanded:{true:'_dwt8fp3-3-13-3',false:'_dwt8fp4-3-13-3'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './ChipGroup.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var chipGroupCSS = _7a468({defaultClassName:'_dwt8fp0-3-14-1',variantClassNames:{size:{condensed:'_dwt8fp1-3-14-1','default':'_dwt8fp2-3-14-1'},expanded:{true:'_dwt8fp3-3-14-1',false:'_dwt8fp4-3-14-1'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/content/chip-group/Control.css

@@ -1,34 +1,4 @@
-._uoyq2d0-3-13-3 {
-  gap: var(--dt-spacings-size-4, 4px);
-  display: inline-flex;
-  padding: var(--dt-spacings-size-0, 0);
-  padding-inline: var(--dt-spacings-size-2, 2px);
-  height: var(--dt-spacings-size-20, 20px);
-  color: var(--dt-colors-text-neutral-default, #2f2f4f);
-  background: transparent;
-  border: none;
-  border-radius: var(--dt-borders-radius-field-subdued, 3px);
-  outline: none;
-  font-size: inherit;
-  font-weight: var(--dt-typography-text-base-default-weight, 400);
-  font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
-  line-height: inherit;
-  text-decoration: underline;
-  text-decoration-style: dashed;
-  text-underline-offset: var(--dt-spacings-size-4, 4px);
-  text-decoration-thickness: var(--dt-borders-width-default, 1px);
-  text-decoration-color: var(--dt-colors-border-neutral-accent, #595a7d);
+._uoyq2d0-3-14-1 {
   white-space: nowrap;
   word-break: keep-all;
-  cursor: pointer;
-  transition: background-color var(--dt-animations-hover-duration-base, 150ms) var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
-}
-._uoyq2d0-3-13-3:hover {
-  background: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
-}
-._uoyq2d0-3-13-3:active {
-  background: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
-}
-._uoyq2d1-3-13-3 {
-  text-decoration: none;
 }