@dynatrace/strato-components 3.5.0 → 3.5.2

package/esm/content/ai-response/tests/AiResponse-reduced-motion.spec.js

@@ -216,21 +216,18 @@ console.log(greet('World'));
           {
             "data-testid": "ai-response",
             "data-dt-content": "AiContent",
-            "data-dt-value-content": "ResponseValue",
-            "data-dt-children-value-content": "MessageContent",
+            "data-dt-value-content": true,
+            "data-dt-children-value-content": true,
             children: "This is an AI-generated answer about your request."
           }
         )
       );
       const aiResponse = screen.getByTestId("ai-response");
       expect(aiResponse).toHaveAttribute("data-dt-content", "AiContent");
-      expect(aiResponse).toHaveAttribute(
-        "data-dt-value-content",
-        "ResponseValue"
-      );
+      expect(aiResponse).toHaveAttribute("data-dt-value-content", "true");
       expect(aiResponse).toHaveAttribute(
         "data-dt-children-value-content",
-        "MessageContent"
+        "true"
       );
     });
     describe("data-dt-component", () => {

package/esm/content/ai-response/tests/AiResponse-reduced-motion.spec.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/content/ai-response/tests/AiResponse-reduced-motion.spec.tsx"],
-  "sourcesContent": ["import { act, screen } from '@testing-library/react';\nimport { createRef } from 'react';\nimport { beforeAll, afterAll, describe, it, expect } from 'vitest';\nimport '@testing-library/jest-dom/vitest';\n\nimport { AiResponse } from '../AiResponse.js';\nimport {\n  render,\n  setupMatchMediaMock,\n  clearMatchMediaMock,\n} from './vite-helpers.js';\n\nconst imageSrc =\n  'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==';\n\ndescribe('AiResponse reduced motion', () => {\n  beforeAll(() => {\n    // simulate reduced motion preference - these tests solely should check if the response is rendered correctly\n    // we keep these tests in a separate file since framer motion caches the matchMedia result and changing it within the same test file is not possible\n    setupMatchMediaMock(true);\n  });\n\n  afterAll(() => {\n    clearMatchMediaMock();\n  });\n\n  it('should not render anything if displayedText is an empty string', async () => {\n    // given\n    const response = '';\n\n    // when\n    render(<AiResponse data-testid=\"ai-response\">{response}</AiResponse>);\n\n    // then\n    expect(screen.queryByTestId('ai-response')).toBeNull();\n  });\n\n  describe('markdown rendering', () => {\n    it('should render headings correctly', async () => {\n      // given\n      const response = `\n# How to Optimize Your Workflow\n\n## Introduction\nIn today's fast-paced environment, efficiency is key. Here are some strategies to help you optimize your workflow:\n\n### 1. Automate Repetitive Tasks\nUse tools and scripts to automate tasks you perform frequently. For example:\n`;\n      const headings = [\n        'How to Optimize Your Workflow',\n        'Introduction',\n        '1. Automate Repetitive Tasks',\n      ];\n\n      // when\n      await act(async () => {\n        render(<AiResponse>{response}</AiResponse>);\n      });\n\n      // then\n      headings.forEach((text, i) => {\n        const headingElement = screen.getByText(text);\n        expect(headingElement).toBeInTheDocument();\n        expect(headingElement.getAttribute('data-testid')).toBe('heading');\n        expect(headingElement.tagName).toBe(`H${i + 1}`);\n      });\n    });\n\n    it('should render link correctly', async () => {\n      // given\n      const response = '[Link text](https://example.com)';\n\n      // when\n      await act(async () => {\n        render(<AiResponse>{response}</AiResponse>);\n      });\n\n      // then\n      const link = screen.getByText('Link text');\n      expect(link.tagName).toBe('A');\n      expect(link).toHaveAttribute('href', 'https://example.com/');\n    });\n\n    it('should render code block correctly', async () => {\n      // given\n      const response = `\n\\`\\`\\`js\nconst greet = name => \\`Hello, \\${name}!\\`;\nconsole.log(greet('World'));\n\\`\\`\\`\n`;\n\n      // when\n      await act(async () => {\n        render(<AiResponse>{response}</AiResponse>);\n      });\n\n      // then\n      const codeblock = screen.getByTestId('code-snippet');\n      expect(\n        codeblock.textContent?.endsWith(\"console.log(greet('World'));\"),\n      ).toBeTruthy();\n    });\n\n    it('should render list items correctly', async () => {\n      // given\n      const response = `\n* Urgent & Important\n* Important but Not Urgent\n* Urgent but Not Important\n* Neither\n`;\n\n      // when\n      await act(async () => {\n        render(<AiResponse>{response}</AiResponse>);\n      });\n\n      // then\n      const items = screen.getAllByRole('listitem');\n      expect(items.map((item) => item.textContent)).toStrictEqual([\n        'Urgent & Important',\n        'Important but Not Urgent',\n        'Urgent but Not Important',\n        'Neither',\n      ]);\n    });\n\n    it('should render plain text correctly', async () => {\n      // given\n      const response = 'Regular breaks improve focus and productivity.';\n\n      // when\n      await act(async () => {\n        render(<AiResponse>{response}</AiResponse>);\n      });\n\n      // then\n      const plainText = screen.getByText(\n        'Regular breaks improve focus and productivity.',\n      );\n      expect(plainText.tagName).toBe('P');\n    });\n\n    it('should render bold text correctly', async () => {\n      // given\n      const response =\n        '**Tip: Try the Pomodoro Technique for time management.**';\n\n      // when\n      await act(async () => {\n        render(<AiResponse>{response}</AiResponse>);\n      });\n\n      // then\n      const bold = screen.getByText(\n        'Tip: Try the Pomodoro Technique for time management.',\n      );\n      expect(bold.tagName).toBe('STRONG');\n    });\n\n    it('should render image correctly', async () => {\n      // given\n      const response = `![Workflow Diagram](${imageSrc})`;\n\n      // when\n      await act(async () => {\n        render(<AiResponse>{response}</AiResponse>);\n      });\n\n      // then\n      // Streamdown blocks images by default and renders a placeholder\n      const placeholder = screen.getByText('[Image blocked: Workflow Diagram]');\n      expect(placeholder).toBeInTheDocument();\n    });\n  });\n\n  describe('a11y', () => {\n    it('should have correct aria attributes by default', async () => {\n      // given / when\n      await act(async () =>\n        render(\n          <AiResponse data-testid=\"ai-response\">\n            Some AI-generated response.\n          </AiResponse>,\n        ),\n      );\n\n      // then\n      const root = screen.getByTestId('ai-response');\n      expect(root).toHaveAttribute('aria-live', 'polite');\n      expect(root).toHaveAttribute('aria-atomic', 'true');\n    });\n\n    it('should support other aria attributes', async () => {\n      // given/when\n      await act(async () =>\n        render(\n          <section aria-busy=\"true\" aria-label=\"AI Response Section\">\n            <div id=\"response-label\">AI Response</div>\n            <div id=\"description\">AI-generated content generating...</div>\n            <div id=\"details\">This may take a few seconds.</div>\n            <AiResponse\n              data-testid=\"ai-response\"\n              aria-label=\"label\"\n              aria-labelledby=\"response-label\"\n              aria-describedby=\"description\"\n              aria-details=\"details\"\n            >\n              This is an AI-generated answer about your request.\n            </AiResponse>\n          </section>,\n        ),\n      );\n\n      // then\n      const response = screen.getByTestId('ai-response');\n      expect(response).toHaveAttribute('aria-label', 'label');\n      expect(response).toHaveAttribute('aria-labelledby', 'response-label');\n      expect(response).toHaveAttribute('aria-describedby', 'description');\n      expect(response).toHaveAttribute('aria-details', 'details');\n    });\n  });\n\n  it('should forward the ref', async () => {\n    // given\n    const forwardedRef = createRef<HTMLDivElement>();\n\n    // when\n    await act(async () =>\n      render(\n        <AiResponse data-testid=\"ai-response\" ref={forwardedRef}>\n          Some AI-generated response.\n        </AiResponse>,\n      ),\n    );\n\n    // then\n    expect(forwardedRef.current).not.toBeNull();\n    expect(forwardedRef.current?.tagName).toBe('DIV');\n  });\n\n  it('should set data-dtrum on the root level of the component', async () => {\n    // given/when\n    await act(async () =>\n      render(\n        <AiResponse data-dtrum-mask data-dtrum-allow data-testid=\"dtrum\">\n          Some AI-generated response.\n        </AiResponse>,\n      ),\n    );\n\n    // then\n    const dtrum = screen.getByTestId('dtrum');\n    expect(dtrum).toHaveAttribute('data-dtrum-mask');\n    expect(dtrum).toHaveAttribute('data-dtrum-allow');\n  });\n\n  it('should apply consumer className and style', async () => {\n    // given/when\n    await act(async () =>\n      render(\n        <AiResponse\n          data-testid=\"ai-response\"\n          className=\"ai-response-class\"\n          style={{ backgroundColor: 'rgb(255, 182, 193)' }}\n        >\n          Some AI-generated response.\n        </AiResponse>,\n      ),\n    );\n\n    // then\n    expect(screen.getByTestId('ai-response')).toHaveClass('ai-response-class');\n    expect(screen.getByTestId('ai-response')).toHaveStyle(\n      'background-color: rgb(255, 182, 193)',\n    );\n  });\n\n  it('should spread remaining props', async () => {\n    // given/when\n    await act(async () =>\n      render(\n        <AiResponse data-testid=\"ai-response\" data-custom=\"test-custom-data\">\n          Some AI-generated response.\n        </AiResponse>,\n      ),\n    );\n\n    // then\n    expect(screen.getByTestId('ai-response')).toHaveAttribute(\n      'data-custom',\n      'test-custom-data',\n    );\n  });\n\n  describe('behavior tracking attributes', () => {\n    it('should add data-dt-* attributes', () => {\n      render(\n        <AiResponse\n          data-testid=\"ai-response\"\n          data-dt-content=\"AiContent\"\n          data-dt-value-content=\"ResponseValue\"\n          data-dt-children-value-content=\"MessageContent\"\n        >\n          This is an AI-generated answer about your request.\n        </AiResponse>,\n      );\n\n      const aiResponse = screen.getByTestId('ai-response');\n      expect(aiResponse).toHaveAttribute('data-dt-content', 'AiContent');\n      expect(aiResponse).toHaveAttribute(\n        'data-dt-value-content',\n        'ResponseValue',\n      );\n      expect(aiResponse).toHaveAttribute(\n        'data-dt-children-value-content',\n        'MessageContent',\n      );\n    });\n\n    describe('data-dt-component', () => {\n      it('should have the default data-dt-component attribute', () => {\n        render(\n          <AiResponse data-testid=\"ai-response\">\n            This is an AI-generated answer about your request.\n          </AiResponse>,\n        );\n        const aiResponse = screen.getByTestId('ai-response');\n        expect(aiResponse).toHaveAttribute('data-dt-component', 'AiResponse');\n      });\n\n      it('should not override the data-dt-component attribute if provided', () => {\n        render(\n          <AiResponse\n            data-testid=\"ai-response\"\n            data-dt-component=\"CustomAiResponse\"\n          >\n            This is an AI-generated answer about your request.\n          </AiResponse>,\n        );\n        const aiResponse = screen.getByTestId('ai-response');\n        expect(aiResponse).toHaveAttribute('data-dt-component', 'AiResponse');\n      });\n    });\n  });\n});\n"],
-  "mappings": "AA+BW,cAwKD,YAxKC;AA/BX,SAAS,KAAK,cAAc;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,WAAW,UAAU,UAAU,IAAI,cAAc;AAC1D,OAAO;AAEP,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,WACJ;AAEF,SAAS,6BAA6B,MAAM;AAC1C,YAAU,MAAM;AAGd,wBAAoB,IAAI;AAAA,EAC1B,CAAC;AAED,WAAS,MAAM;AACb,wBAAoB;AAAA,EACtB,CAAC;AAED,KAAG,kEAAkE,YAAY;AAE/E,UAAM,WAAW;AAGjB,WAAO,oBAAC,cAAW,eAAY,eAAe,oBAAS,CAAa;AAGpE,WAAO,OAAO,cAAc,aAAa,CAAC,EAAE,SAAS;AAAA,EACvD,CAAC;AAED,WAAS,sBAAsB,MAAM;AACnC,OAAG,oCAAoC,YAAY;AAEjD,YAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASjB,YAAM,WAAW;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAGA,YAAM,IAAI,YAAY;AACpB,eAAO,oBAAC,cAAY,oBAAS,CAAa;AAAA,MAC5C,CAAC;AAGD,eAAS,QAAQ,CAAC,MAAM,MAAM;AAC5B,cAAM,iBAAiB,OAAO,UAAU,IAAI;AAC5C,eAAO,cAAc,EAAE,kBAAkB;AACzC,eAAO,eAAe,aAAa,aAAa,CAAC,EAAE,KAAK,SAAS;AACjE,eAAO,eAAe,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,EAAE;AAAA,MACjD,CAAC;AAAA,IACH,CAAC;AAED,OAAG,gCAAgC,YAAY;AAE7C,YAAM,WAAW;AAGjB,YAAM,IAAI,YAAY;AACpB,eAAO,oBAAC,cAAY,oBAAS,CAAa;AAAA,MAC5C,CAAC;AAGD,YAAM,OAAO,OAAO,UAAU,WAAW;AACzC,aAAO,KAAK,OAAO,EAAE,KAAK,GAAG;AAC7B,aAAO,IAAI,EAAE,gBAAgB,QAAQ,sBAAsB;AAAA,IAC7D,CAAC;AAED,OAAG,sCAAsC,YAAY;AAEnD,YAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjB,YAAM,IAAI,YAAY;AACpB,eAAO,oBAAC,cAAY,oBAAS,CAAa;AAAA,MAC5C,CAAC;AAGD,YAAM,YAAY,OAAO,YAAY,cAAc;AACnD;AAAA,QACE,UAAU,aAAa,SAAS,8BAA8B;AAAA,MAChE,EAAE,WAAW;AAAA,IACf,CAAC;AAED,OAAG,sCAAsC,YAAY;AAEnD,YAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjB,YAAM,IAAI,YAAY;AACpB,eAAO,oBAAC,cAAY,oBAAS,CAAa;AAAA,MAC5C,CAAC;AAGD,YAAM,QAAQ,OAAO,aAAa,UAAU;AAC5C,aAAO,MAAM,IAAI,CAAC,SAAS,KAAK,WAAW,CAAC,EAAE,cAAc;AAAA,QAC1D;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAED,OAAG,sCAAsC,YAAY;AAEnD,YAAM,WAAW;AAGjB,YAAM,IAAI,YAAY;AACpB,eAAO,oBAAC,cAAY,oBAAS,CAAa;AAAA,MAC5C,CAAC;AAGD,YAAM,YAAY,OAAO;AAAA,QACvB;AAAA,MACF;AACA,aAAO,UAAU,OAAO,EAAE,KAAK,GAAG;AAAA,IACpC,CAAC;AAED,OAAG,qCAAqC,YAAY;AAElD,YAAM,WACJ;AAGF,YAAM,IAAI,YAAY;AACpB,eAAO,oBAAC,cAAY,oBAAS,CAAa;AAAA,MAC5C,CAAC;AAGD,YAAM,OAAO,OAAO;AAAA,QAClB;AAAA,MACF;AACA,aAAO,KAAK,OAAO,EAAE,KAAK,QAAQ;AAAA,IACpC,CAAC;AAED,OAAG,iCAAiC,YAAY;AAE9C,YAAM,WAAW,uBAAuB,QAAQ;AAGhD,YAAM,IAAI,YAAY;AACpB,eAAO,oBAAC,cAAY,oBAAS,CAAa;AAAA,MAC5C,CAAC;AAID,YAAM,cAAc,OAAO,UAAU,mCAAmC;AACxE,aAAO,WAAW,EAAE,kBAAkB;AAAA,IACxC,CAAC;AAAA,EACH,CAAC;AAED,WAAS,QAAQ,MAAM;AACrB,OAAG,kDAAkD,YAAY;AAE/D,YAAM;AAAA,QAAI,YACR;AAAA,UACE,oBAAC,cAAW,eAAY,eAAc,yCAEtC;AAAA,QACF;AAAA,MACF;AAGA,YAAM,OAAO,OAAO,YAAY,aAAa;AAC7C,aAAO,IAAI,EAAE,gBAAgB,aAAa,QAAQ;AAClD,aAAO,IAAI,EAAE,gBAAgB,eAAe,MAAM;AAAA,IACpD,CAAC;AAED,OAAG,wCAAwC,YAAY;AAErD,YAAM;AAAA,QAAI,YACR;AAAA,UACE,qBAAC,aAAQ,aAAU,QAAO,cAAW,uBACnC;AAAA,gCAAC,SAAI,IAAG,kBAAiB,yBAAW;AAAA,YACpC,oBAAC,SAAI,IAAG,eAAc,gDAAkC;AAAA,YACxD,oBAAC,SAAI,IAAG,WAAU,0CAA4B;AAAA,YAC9C;AAAA,cAAC;AAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,cAAW;AAAA,gBACX,mBAAgB;AAAA,gBAChB,oBAAiB;AAAA,gBACjB,gBAAa;AAAA,gBACd;AAAA;AAAA,YAED;AAAA,aACF;AAAA,QACF;AAAA,MACF;AAGA,YAAM,WAAW,OAAO,YAAY,aAAa;AACjD,aAAO,QAAQ,EAAE,gBAAgB,cAAc,OAAO;AACtD,aAAO,QAAQ,EAAE,gBAAgB,mBAAmB,gBAAgB;AACpE,aAAO,QAAQ,EAAE,gBAAgB,oBAAoB,aAAa;AAClE,aAAO,QAAQ,EAAE,gBAAgB,gBAAgB,SAAS;AAAA,IAC5D,CAAC;AAAA,EACH,CAAC;AAED,KAAG,0BAA0B,YAAY;AAEvC,UAAM,eAAe,UAA0B;AAG/C,UAAM;AAAA,MAAI,YACR;AAAA,QACE,oBAAC,cAAW,eAAY,eAAc,KAAK,cAAc,yCAEzD;AAAA,MACF;AAAA,IACF;AAGA,WAAO,aAAa,OAAO,EAAE,IAAI,SAAS;AAC1C,WAAO,aAAa,SAAS,OAAO,EAAE,KAAK,KAAK;AAAA,EAClD,CAAC;AAED,KAAG,4DAA4D,YAAY;AAEzE,UAAM;AAAA,MAAI,YACR;AAAA,QACE,oBAAC,cAAW,mBAAe,MAAC,oBAAgB,MAAC,eAAY,SAAQ,yCAEjE;AAAA,MACF;AAAA,IACF;AAGA,UAAM,QAAQ,OAAO,YAAY,OAAO;AACxC,WAAO,KAAK,EAAE,gBAAgB,iBAAiB;AAC/C,WAAO,KAAK,EAAE,gBAAgB,kBAAkB;AAAA,EAClD,CAAC;AAED,KAAG,6CAA6C,YAAY;AAE1D,UAAM;AAAA,MAAI,YACR;AAAA,QACE;AAAA,UAAC;AAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAU;AAAA,YACV,OAAO,EAAE,iBAAiB,qBAAqB;AAAA,YAChD;AAAA;AAAA,QAED;AAAA,MACF;AAAA,IACF;AAGA,WAAO,OAAO,YAAY,aAAa,CAAC,EAAE,YAAY,mBAAmB;AACzE,WAAO,OAAO,YAAY,aAAa,CAAC,EAAE;AAAA,MACxC;AAAA,IACF;AAAA,EACF,CAAC;AAED,KAAG,iCAAiC,YAAY;AAE9C,UAAM;AAAA,MAAI,YACR;AAAA,QACE,oBAAC,cAAW,eAAY,eAAc,eAAY,oBAAmB,yCAErE;AAAA,MACF;AAAA,IACF;AAGA,WAAO,OAAO,YAAY,aAAa,CAAC,EAAE;AAAA,MACxC;AAAA,MACA;AAAA,IACF;AAAA,EACF,CAAC;AAED,WAAS,gCAAgC,MAAM;AAC7C,OAAG,mCAAmC,MAAM;AAC1C;AAAA,QACE;AAAA,UAAC;AAAA;AAAA,YACC,eAAY;AAAA,YACZ,mBAAgB;AAAA,YAChB,yBAAsB;AAAA,YACtB,kCAA+B;AAAA,YAChC;AAAA;AAAA,QAED;AAAA,MACF;AAEA,YAAM,aAAa,OAAO,YAAY,aAAa;AACnD,aAAO,UAAU,EAAE,gBAAgB,mBAAmB,WAAW;AACjE,aAAO,UAAU,EAAE;AAAA,QACjB;AAAA,QACA;AAAA,MACF;AACA,aAAO,UAAU,EAAE;AAAA,QACjB;AAAA,QACA;AAAA,MACF;AAAA,IACF,CAAC;AAED,aAAS,qBAAqB,MAAM;AAClC,SAAG,uDAAuD,MAAM;AAC9D;AAAA,UACE,oBAAC,cAAW,eAAY,eAAc,gEAEtC;AAAA,QACF;AACA,cAAM,aAAa,OAAO,YAAY,aAAa;AACnD,eAAO,UAAU,EAAE,gBAAgB,qBAAqB,YAAY;AAAA,MACtE,CAAC;AAED,SAAG,mEAAmE,MAAM;AAC1E;AAAA,UACE;AAAA,YAAC;AAAA;AAAA,cACC,eAAY;AAAA,cACZ,qBAAkB;AAAA,cACnB;AAAA;AAAA,UAED;AAAA,QACF;AACA,cAAM,aAAa,OAAO,YAAY,aAAa;AACnD,eAAO,UAAU,EAAE,gBAAgB,qBAAqB,YAAY;AAAA,MACtE,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH,CAAC;",
+  "sourcesContent": ["import { act, screen } from '@testing-library/react';\nimport { createRef } from 'react';\nimport { beforeAll, afterAll, describe, it, expect } from 'vitest';\nimport '@testing-library/jest-dom/vitest';\n\nimport { AiResponse } from '../AiResponse.js';\nimport {\n  render,\n  setupMatchMediaMock,\n  clearMatchMediaMock,\n} from './vite-helpers.js';\n\nconst imageSrc =\n  'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==';\n\ndescribe('AiResponse reduced motion', () => {\n  beforeAll(() => {\n    // simulate reduced motion preference - these tests solely should check if the response is rendered correctly\n    // we keep these tests in a separate file since framer motion caches the matchMedia result and changing it within the same test file is not possible\n    setupMatchMediaMock(true);\n  });\n\n  afterAll(() => {\n    clearMatchMediaMock();\n  });\n\n  it('should not render anything if displayedText is an empty string', async () => {\n    // given\n    const response = '';\n\n    // when\n    render(<AiResponse data-testid=\"ai-response\">{response}</AiResponse>);\n\n    // then\n    expect(screen.queryByTestId('ai-response')).toBeNull();\n  });\n\n  describe('markdown rendering', () => {\n    it('should render headings correctly', async () => {\n      // given\n      const response = `\n# How to Optimize Your Workflow\n\n## Introduction\nIn today's fast-paced environment, efficiency is key. Here are some strategies to help you optimize your workflow:\n\n### 1. Automate Repetitive Tasks\nUse tools and scripts to automate tasks you perform frequently. For example:\n`;\n      const headings = [\n        'How to Optimize Your Workflow',\n        'Introduction',\n        '1. Automate Repetitive Tasks',\n      ];\n\n      // when\n      await act(async () => {\n        render(<AiResponse>{response}</AiResponse>);\n      });\n\n      // then\n      headings.forEach((text, i) => {\n        const headingElement = screen.getByText(text);\n        expect(headingElement).toBeInTheDocument();\n        expect(headingElement.getAttribute('data-testid')).toBe('heading');\n        expect(headingElement.tagName).toBe(`H${i + 1}`);\n      });\n    });\n\n    it('should render link correctly', async () => {\n      // given\n      const response = '[Link text](https://example.com)';\n\n      // when\n      await act(async () => {\n        render(<AiResponse>{response}</AiResponse>);\n      });\n\n      // then\n      const link = screen.getByText('Link text');\n      expect(link.tagName).toBe('A');\n      expect(link).toHaveAttribute('href', 'https://example.com/');\n    });\n\n    it('should render code block correctly', async () => {\n      // given\n      const response = `\n\\`\\`\\`js\nconst greet = name => \\`Hello, \\${name}!\\`;\nconsole.log(greet('World'));\n\\`\\`\\`\n`;\n\n      // when\n      await act(async () => {\n        render(<AiResponse>{response}</AiResponse>);\n      });\n\n      // then\n      const codeblock = screen.getByTestId('code-snippet');\n      expect(\n        codeblock.textContent?.endsWith(\"console.log(greet('World'));\"),\n      ).toBeTruthy();\n    });\n\n    it('should render list items correctly', async () => {\n      // given\n      const response = `\n* Urgent & Important\n* Important but Not Urgent\n* Urgent but Not Important\n* Neither\n`;\n\n      // when\n      await act(async () => {\n        render(<AiResponse>{response}</AiResponse>);\n      });\n\n      // then\n      const items = screen.getAllByRole('listitem');\n      expect(items.map((item) => item.textContent)).toStrictEqual([\n        'Urgent & Important',\n        'Important but Not Urgent',\n        'Urgent but Not Important',\n        'Neither',\n      ]);\n    });\n\n    it('should render plain text correctly', async () => {\n      // given\n      const response = 'Regular breaks improve focus and productivity.';\n\n      // when\n      await act(async () => {\n        render(<AiResponse>{response}</AiResponse>);\n      });\n\n      // then\n      const plainText = screen.getByText(\n        'Regular breaks improve focus and productivity.',\n      );\n      expect(plainText.tagName).toBe('P');\n    });\n\n    it('should render bold text correctly', async () => {\n      // given\n      const response =\n        '**Tip: Try the Pomodoro Technique for time management.**';\n\n      // when\n      await act(async () => {\n        render(<AiResponse>{response}</AiResponse>);\n      });\n\n      // then\n      const bold = screen.getByText(\n        'Tip: Try the Pomodoro Technique for time management.',\n      );\n      expect(bold.tagName).toBe('STRONG');\n    });\n\n    it('should render image correctly', async () => {\n      // given\n      const response = `![Workflow Diagram](${imageSrc})`;\n\n      // when\n      await act(async () => {\n        render(<AiResponse>{response}</AiResponse>);\n      });\n\n      // then\n      // Streamdown blocks images by default and renders a placeholder\n      const placeholder = screen.getByText('[Image blocked: Workflow Diagram]');\n      expect(placeholder).toBeInTheDocument();\n    });\n  });\n\n  describe('a11y', () => {\n    it('should have correct aria attributes by default', async () => {\n      // given / when\n      await act(async () =>\n        render(\n          <AiResponse data-testid=\"ai-response\">\n            Some AI-generated response.\n          </AiResponse>,\n        ),\n      );\n\n      // then\n      const root = screen.getByTestId('ai-response');\n      expect(root).toHaveAttribute('aria-live', 'polite');\n      expect(root).toHaveAttribute('aria-atomic', 'true');\n    });\n\n    it('should support other aria attributes', async () => {\n      // given/when\n      await act(async () =>\n        render(\n          <section aria-busy=\"true\" aria-label=\"AI Response Section\">\n            <div id=\"response-label\">AI Response</div>\n            <div id=\"description\">AI-generated content generating...</div>\n            <div id=\"details\">This may take a few seconds.</div>\n            <AiResponse\n              data-testid=\"ai-response\"\n              aria-label=\"label\"\n              aria-labelledby=\"response-label\"\n              aria-describedby=\"description\"\n              aria-details=\"details\"\n            >\n              This is an AI-generated answer about your request.\n            </AiResponse>\n          </section>,\n        ),\n      );\n\n      // then\n      const response = screen.getByTestId('ai-response');\n      expect(response).toHaveAttribute('aria-label', 'label');\n      expect(response).toHaveAttribute('aria-labelledby', 'response-label');\n      expect(response).toHaveAttribute('aria-describedby', 'description');\n      expect(response).toHaveAttribute('aria-details', 'details');\n    });\n  });\n\n  it('should forward the ref', async () => {\n    // given\n    const forwardedRef = createRef<HTMLDivElement>();\n\n    // when\n    await act(async () =>\n      render(\n        <AiResponse data-testid=\"ai-response\" ref={forwardedRef}>\n          Some AI-generated response.\n        </AiResponse>,\n      ),\n    );\n\n    // then\n    expect(forwardedRef.current).not.toBeNull();\n    expect(forwardedRef.current?.tagName).toBe('DIV');\n  });\n\n  it('should set data-dtrum on the root level of the component', async () => {\n    // given/when\n    await act(async () =>\n      render(\n        <AiResponse data-dtrum-mask data-dtrum-allow data-testid=\"dtrum\">\n          Some AI-generated response.\n        </AiResponse>,\n      ),\n    );\n\n    // then\n    const dtrum = screen.getByTestId('dtrum');\n    expect(dtrum).toHaveAttribute('data-dtrum-mask');\n    expect(dtrum).toHaveAttribute('data-dtrum-allow');\n  });\n\n  it('should apply consumer className and style', async () => {\n    // given/when\n    await act(async () =>\n      render(\n        <AiResponse\n          data-testid=\"ai-response\"\n          className=\"ai-response-class\"\n          style={{ backgroundColor: 'rgb(255, 182, 193)' }}\n        >\n          Some AI-generated response.\n        </AiResponse>,\n      ),\n    );\n\n    // then\n    expect(screen.getByTestId('ai-response')).toHaveClass('ai-response-class');\n    expect(screen.getByTestId('ai-response')).toHaveStyle(\n      'background-color: rgb(255, 182, 193)',\n    );\n  });\n\n  it('should spread remaining props', async () => {\n    // given/when\n    await act(async () =>\n      render(\n        <AiResponse data-testid=\"ai-response\" data-custom=\"test-custom-data\">\n          Some AI-generated response.\n        </AiResponse>,\n      ),\n    );\n\n    // then\n    expect(screen.getByTestId('ai-response')).toHaveAttribute(\n      'data-custom',\n      'test-custom-data',\n    );\n  });\n\n  describe('behavior tracking attributes', () => {\n    it('should add data-dt-* attributes', () => {\n      render(\n        <AiResponse\n          data-testid=\"ai-response\"\n          data-dt-content=\"AiContent\"\n          data-dt-value-content={true}\n          data-dt-children-value-content={true}\n        >\n          This is an AI-generated answer about your request.\n        </AiResponse>,\n      );\n\n      const aiResponse = screen.getByTestId('ai-response');\n      expect(aiResponse).toHaveAttribute('data-dt-content', 'AiContent');\n      expect(aiResponse).toHaveAttribute('data-dt-value-content', 'true');\n      expect(aiResponse).toHaveAttribute(\n        'data-dt-children-value-content',\n        'true',\n      );\n    });\n\n    describe('data-dt-component', () => {\n      it('should have the default data-dt-component attribute', () => {\n        render(\n          <AiResponse data-testid=\"ai-response\">\n            This is an AI-generated answer about your request.\n          </AiResponse>,\n        );\n        const aiResponse = screen.getByTestId('ai-response');\n        expect(aiResponse).toHaveAttribute('data-dt-component', 'AiResponse');\n      });\n\n      it('should not override the data-dt-component attribute if provided', () => {\n        render(\n          <AiResponse\n            data-testid=\"ai-response\"\n            data-dt-component=\"CustomAiResponse\"\n          >\n            This is an AI-generated answer about your request.\n          </AiResponse>,\n        );\n        const aiResponse = screen.getByTestId('ai-response');\n        expect(aiResponse).toHaveAttribute('data-dt-component', 'AiResponse');\n      });\n    });\n  });\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/content/avatar/Avatar.css

@@ -1,4 +1,4 @@
-._7llfy90-3-5-0 {
+._7llfy90-3-5-2 {
   cursor: default;
   box-sizing: border-box;
   border: 1px solid var(--dt-colors-border-neutral-default, #dadbe4);
@@ -11,19 +11,19 @@
   align-items: center;
   align-self: start;
 }
-._7llfy91-3-5-0 {
+._7llfy91-3-5-2 {
   min-width: var(--dt-spacings-size-20, 20px);
 }
-._7llfy92-3-5-0 {
+._7llfy92-3-5-2 {
   min-width: var(--dt-spacings-size-32, 32px);
 }
-._7llfy93-3-5-0 {
+._7llfy93-3-5-2 {
   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-5-0:before {
+._7llfy93-3-5-2:before {
   content: "";
   aspect-ratio: 1/1;
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
@@ -32,36 +32,36 @@
   position: absolute;
   z-index: -1;
 }
-._7llfy94-3-5-0[tabindex]:hover, button._7llfy94-3-5-0:hover, a._7llfy94-3-5-0:hover, ._7llfy94-3-5-0:focus {
+._7llfy94-3-5-2[tabindex]:hover, button._7llfy94-3-5-2:hover, a._7llfy94-3-5-2:hover, ._7llfy94-3-5-2: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-5-0:hover, a._7llfy94-3-5-0:hover, button._7llfy94-3-5-0:active, a._7llfy94-3-5-0:active {
+button._7llfy94-3-5-2:hover, a._7llfy94-3-5-2:hover, button._7llfy94-3-5-2:active, a._7llfy94-3-5-2:active {
   cursor: pointer;
   z-index: 1;
 }
-._7llfy94-3-5-0[tabindex]:active, button._7llfy94-3-5-0:active, a._7llfy94-3-5-0:active {
+._7llfy94-3-5-2[tabindex]:active, button._7llfy94-3-5-2:active, a._7llfy94-3-5-2: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-5-0:before {
+._7llfy95-3-5-2:before {
   min-width: var(--dt-spacings-size-20, 20px);
 }
-._7llfy96-3-5-0:before {
+._7llfy96-3-5-2:before {
   min-width: var(--dt-spacings-size-32, 32px);
 }
-._7llfy97-3-5-0 {
+._7llfy97-3-5-2 {
   padding: 0;
   margin: 0;
   border: none;
   background-color: transparent;
 }
-._7llfy98-3-5-0 {
+._7llfy98-3-5-2 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   overflow-wrap: break-word;
 }
-._7llfy99-3-5-0 ~ div > div {
+._7llfy99-3-5-2 ~ 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 avatarAbbreviationCSS = _7a468({ defaultClassName: "_7llfy90-3-5-0", variantClassNames: { size: { small: "_7llfy91-3-5-0", "default": "_7llfy92-3-5-0" }, disabled: { true: "_7llfy93-3-5-0", false: "_7llfy94-3-5-0" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, size: "small" }, "_7llfy95-3-5-0"], [{ disabled: true, size: "default" }, "_7llfy96-3-5-0"]] });
-var avatarDisabledCSS = "_7llfy99-3-5-0";
-var avatarSubtitleCSS = "_7llfy98-3-5-0";
-var avatarWrapperCSS = "_7llfy97-3-5-0";
+var avatarAbbreviationCSS = _7a468({ defaultClassName: "_7llfy90-3-5-2", variantClassNames: { size: { small: "_7llfy91-3-5-2", "default": "_7llfy92-3-5-2" }, disabled: { true: "_7llfy93-3-5-2", false: "_7llfy94-3-5-2" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, size: "small" }, "_7llfy95-3-5-2"], [{ disabled: true, size: "default" }, "_7llfy96-3-5-2"]] });
+var avatarDisabledCSS = "_7llfy99-3-5-2";
+var avatarSubtitleCSS = "_7llfy98-3-5-2";
+var avatarWrapperCSS = "_7llfy97-3-5-2";
 export {
   avatarAbbreviationCSS,
   avatarDisabledCSS,

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 avatarAbbreviationCSS = _7a468({defaultClassName:'_7llfy90-3-5-0',variantClassNames:{size:{small:'_7llfy91-3-5-0','default':'_7llfy92-3-5-0'},disabled:{true:'_7llfy93-3-5-0',false:'_7llfy94-3-5-0'}},defaultVariants:{},compoundVariants:[[{disabled:true,size:'small'},'_7llfy95-3-5-0'],[{disabled:true,size:'default'},'_7llfy96-3-5-0']]});\nexport var avatarDisabledCSS = '_7llfy99-3-5-0';\nexport var avatarSubtitleCSS = '_7llfy98-3-5-0';\nexport var avatarWrapperCSS = '_7llfy97-3-5-0';"],
+  "sourcesContent": ["import './Avatar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var avatarAbbreviationCSS = _7a468({defaultClassName:'_7llfy90-3-5-2',variantClassNames:{size:{small:'_7llfy91-3-5-2','default':'_7llfy92-3-5-2'},disabled:{true:'_7llfy93-3-5-2',false:'_7llfy94-3-5-2'}},defaultVariants:{},compoundVariants:[[{disabled:true,size:'small'},'_7llfy95-3-5-2'],[{disabled:true,size:'default'},'_7llfy96-3-5-2']]});\nexport var avatarDisabledCSS = '_7llfy99-3-5-2';\nexport var avatarSubtitleCSS = '_7llfy98-3-5-2';\nexport var avatarWrapperCSS = '_7llfy97-3-5-2';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,wBAAwB,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;AACnV,IAAI,oBAAoB;AACxB,IAAI,oBAAoB;AACxB,IAAI,mBAAmB;",
   "names": []
 }

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

@@ -1,9 +1,9 @@
-._129un530-3-5-0 {
+._129un530-3-5-2 {
   display: flex;
 }
-._129un531-3-5-0 {
+._129un531-3-5-2 {
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._129un531-3-5-0:first-child {
+._129un531-3-5-2: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 additionalAvatarWrapperCSS = "_129un530-3-5-0";
-var avatarGroupItemWrapperCSS = "_129un531-3-5-0";
+var additionalAvatarWrapperCSS = "_129un530-3-5-2";
+var avatarGroupItemWrapperCSS = "_129un531-3-5-2";
 export {
   additionalAvatarWrapperCSS,
   avatarGroupItemWrapperCSS

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 additionalAvatarWrapperCSS = '_129un530-3-5-0';\nexport var avatarGroupItemWrapperCSS = '_129un531-3-5-0';"],
+  "sourcesContent": ["import './AvatarGroup.css';\nexport var additionalAvatarWrapperCSS = '_129un530-3-5-2';\nexport var avatarGroupItemWrapperCSS = '_129un531-3-5-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,6BAA6B;AACjC,IAAI,4BAA4B;",
   "names": []
 }

package/esm/content/chip/BaseChip.css

@@ -1,12 +1,12 @@
-._1jgl8s50-3-5-0 ._1raebd90-3-5-0 {
+._1jgl8s50-3-5-2 ._1raebd90-3-5-2 {
   gap: 1px;
 }
-._1raebd91-3-5-0 {
+._1raebd91-3-5-2 {
   cursor: not-allowed;
 }
-._1raebd92-3-5-0 {
-  background: var(--_bx32h2-3-5-0);
-  color: var(--_bx32h0-3-5-0);
+._1raebd92-3-5-2 {
+  background: var(--_bx32h2-3-5-2);
+  color: var(--_bx32h0-3-5-2);
   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-5-0:is(button) {
+._1raebd92-3-5-2:is(button) {
   border: 0;
 }
-._1raebd93-3-5-0 {
+._1raebd93-3-5-2 {
   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-5-0 {
+._1raebd94-3-5-2 {
   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-5-0 {
+._1raebd95-3-5-2 {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
-._1raebd96-3-5-0 {
+._1raebd96-3-5-2 {
   border-bottom-right-radius: var(--dt-borders-radius-field-subdued, 3px);
   border-top-right-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1raebd97-3-5-0 {
+._1raebd97-3-5-2 {
   cursor: not-allowed;
   pointer-events: none;
 }
-._1raebd98-3-5-0:is(button) {
+._1raebd98-3-5-2:is(button) {
   cursor: pointer;
 }
-._1raebd9g-3-5-0[tabindex]:hover, button._1raebd9g-3-5-0:hover, a._1raebd9g-3-5-0:hover {
+._1raebd9g-3-5-2[tabindex]:hover, button._1raebd9g-3-5-2:hover, a._1raebd9g-3-5-2:hover {
   background: var(--dt-colors-background-field-neutral-accent-hover, #4d4e72);
 }
-._1raebd9g-3-5-0[tabindex]:active, button._1raebd9g-3-5-0:active, a._1raebd9g-3-5-0:active {
+._1raebd9g-3-5-2[tabindex]:active, button._1raebd9g-3-5-2:active, a._1raebd9g-3-5-2:active {
   background: var(--dt-colors-background-field-neutral-accent-active, #404164);
 }
-._1raebd9h-3-5-0[tabindex]:hover, button._1raebd9h-3-5-0:hover, a._1raebd9h-3-5-0:hover {
+._1raebd9h-3-5-2[tabindex]:hover, button._1raebd9h-3-5-2:hover, a._1raebd9h-3-5-2:hover {
   background: var(--dt-colors-background-field-primary-accent-hover, #3b3fbe);
 }
-._1raebd9h-3-5-0[tabindex]:active, button._1raebd9h-3-5-0:active, a._1raebd9h-3-5-0:active {
+._1raebd9h-3-5-2[tabindex]:active, button._1raebd9h-3-5-2:active, a._1raebd9h-3-5-2:active {
   background: var(--dt-colors-background-field-primary-accent-active, #312dad);
 }
-._1raebd9i-3-5-0[tabindex]:hover, button._1raebd9i-3-5-0:hover, a._1raebd9i-3-5-0:hover {
+._1raebd9i-3-5-2[tabindex]:hover, button._1raebd9i-3-5-2:hover, a._1raebd9i-3-5-2:hover {
   background: var(--dt-colors-background-field-success-accent-hover, #1f5a54);
 }
-._1raebd9i-3-5-0[tabindex]:active, button._1raebd9i-3-5-0:active, a._1raebd9i-3-5-0:active {
+._1raebd9i-3-5-2[tabindex]:active, button._1raebd9i-3-5-2:active, a._1raebd9i-3-5-2:active {
   background: var(--dt-colors-background-field-success-accent-active, #0d4c47);
 }
-._1raebd9j-3-5-0[tabindex]:hover, button._1raebd9j-3-5-0:hover, a._1raebd9j-3-5-0:hover {
+._1raebd9j-3-5-2[tabindex]:hover, button._1raebd9j-3-5-2:hover, a._1raebd9j-3-5-2:hover {
   background: var(--dt-colors-background-field-warning-accent-hover, #ffb54f);
 }
-._1raebd9j-3-5-0[tabindex]:active, button._1raebd9j-3-5-0:active, a._1raebd9j-3-5-0:active {
+._1raebd9j-3-5-2[tabindex]:active, button._1raebd9j-3-5-2:active, a._1raebd9j-3-5-2:active {
   background: var(--dt-colors-background-field-warning-accent-active, #ffc76d);
 }
-._1raebd9k-3-5-0[tabindex]:hover, button._1raebd9k-3-5-0:hover, a._1raebd9k-3-5-0:hover {
+._1raebd9k-3-5-2[tabindex]:hover, button._1raebd9k-3-5-2:hover, a._1raebd9k-3-5-2:hover {
   background: var(--dt-colors-background-field-critical-accent-hover, #b4002b);
 }
-._1raebd9k-3-5-0[tabindex]:active, button._1raebd9k-3-5-0:active, a._1raebd9k-3-5-0:active {
+._1raebd9k-3-5-2[tabindex]:active, button._1raebd9k-3-5-2:active, a._1raebd9k-3-5-2:active {
   background: var(--dt-colors-background-field-critical-accent-active, #a2001d);
 }
-._1raebd9l-3-5-0[tabindex]:hover, button._1raebd9l-3-5-0:hover, a._1raebd9l-3-5-0:hover {
+._1raebd9l-3-5-2[tabindex]:hover, button._1raebd9l-3-5-2:hover, a._1raebd9l-3-5-2:hover {
   background: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1raebd9l-3-5-0[tabindex]:active, button._1raebd9l-3-5-0:active, a._1raebd9l-3-5-0:active {
+._1raebd9l-3-5-2[tabindex]:active, button._1raebd9l-3-5-2:active, a._1raebd9l-3-5-2:active {
   background: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1jgl8s50-3-5-0 ._1raebd9l-3-5-0 {
+._1jgl8s50-3-5-2 ._1raebd9l-3-5-2 {
   background: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._1jgl8s50-3-5-0 ._1raebd9l-3-5-0[tabindex]:hover, ._1jgl8s50-3-5-0 button._1raebd9l-3-5-0:hover, ._1jgl8s50-3-5-0 a._1raebd9l-3-5-0:hover {
+._1jgl8s50-3-5-2 ._1raebd9l-3-5-2[tabindex]:hover, ._1jgl8s50-3-5-2 button._1raebd9l-3-5-2:hover, ._1jgl8s50-3-5-2 a._1raebd9l-3-5-2:hover {
   background: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1jgl8s50-3-5-0 ._1raebd9l-3-5-0[tabindex]:active, ._1jgl8s50-3-5-0 button._1raebd9l-3-5-0:active, ._1jgl8s50-3-5-0 a._1raebd9l-3-5-0:active {
+._1jgl8s50-3-5-2 ._1raebd9l-3-5-2[tabindex]:active, ._1jgl8s50-3-5-2 button._1raebd9l-3-5-2:active, ._1jgl8s50-3-5-2 a._1raebd9l-3-5-2:active {
   background: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1raebd9m-3-5-0[tabindex]:hover, button._1raebd9m-3-5-0:hover, a._1raebd9m-3-5-0:hover {
+._1raebd9m-3-5-2[tabindex]:hover, button._1raebd9m-3-5-2:hover, a._1raebd9m-3-5-2:hover {
   background: var(--dt-colors-background-field-primary-emphasized-hover, #d5dbf6);
 }
-._1raebd9m-3-5-0[tabindex]:active, button._1raebd9m-3-5-0:active, a._1raebd9m-3-5-0:active {
+._1raebd9m-3-5-2[tabindex]:active, button._1raebd9m-3-5-2:active, a._1raebd9m-3-5-2:active {
   background: var(--dt-colors-background-field-primary-emphasized-active, #c9d1f4);
 }
-._1raebd9n-3-5-0[tabindex]:hover, button._1raebd9n-3-5-0:hover, a._1raebd9n-3-5-0:hover {
+._1raebd9n-3-5-2[tabindex]:hover, button._1raebd9n-3-5-2:hover, a._1raebd9n-3-5-2:hover {
   background: var(--dt-colors-background-field-success-emphasized-hover, #d3dedd);
 }
-._1raebd9n-3-5-0[tabindex]:active, button._1raebd9n-3-5-0:active, a._1raebd9n-3-5-0:active {
+._1raebd9n-3-5-2[tabindex]:active, button._1raebd9n-3-5-2:active, a._1raebd9n-3-5-2:active {
   background: var(--dt-colors-background-field-success-emphasized-active, #c7d5d3);
 }
-._1raebd9o-3-5-0[tabindex]:hover, button._1raebd9o-3-5-0:hover, a._1raebd9o-3-5-0:hover {
+._1raebd9o-3-5-2[tabindex]:hover, button._1raebd9o-3-5-2:hover, a._1raebd9o-3-5-2:hover {
   background: var(--dt-colors-background-field-warning-emphasized-hover, #f9ebdb);
 }
-._1raebd9o-3-5-0[tabindex]:active, button._1raebd9o-3-5-0:active, a._1raebd9o-3-5-0:active {
+._1raebd9o-3-5-2[tabindex]:active, button._1raebd9o-3-5-2:active, a._1raebd9o-3-5-2:active {
   background: var(--dt-colors-background-field-warning-emphasized-active, #f9e6d0);
 }
-._1raebd9p-3-5-0[tabindex]:hover, button._1raebd9p-3-5-0:hover, a._1raebd9p-3-5-0:hover {
+._1raebd9p-3-5-2[tabindex]:hover, button._1raebd9p-3-5-2:hover, a._1raebd9p-3-5-2:hover {
   background: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._1raebd9p-3-5-0[tabindex]:active, button._1raebd9p-3-5-0:active, a._1raebd9p-3-5-0:active {
+._1raebd9p-3-5-2[tabindex]:active, button._1raebd9p-3-5-2:active, a._1raebd9p-3-5-2:active {
   background: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1raebd9q-3-5-0 {
-  color: var(--_bx32h0-3-5-0);
+._1raebd9q-3-5-2 {
+  color: var(--_bx32h0-3-5-2);
   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-5-0 * {
-  color: var(--_bx32h0-3-5-0);
+._1raebd9q-3-5-2 * {
+  color: var(--_bx32h0-3-5-2);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   vertical-align: baseline;
 }
-._1raebd9r-3-5-0 {
+._1raebd9r-3-5-2 {
   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-5-0", variantClassNames: { size: { "default": "_1raebd93-3-5-0", condensed: "_1raebd94-3-5-0" }, hasDeleteButton: { true: "_1raebd95-3-5-0", false: "_1raebd96-3-5-0" }, disabled: { true: "_1raebd97-3-5-0", false: "_1raebd98-3-5-0" }, color: { neutral: "_1raebd99-3-5-0", primary: "_1raebd9a-3-5-0", success: "_1raebd9b-3-5-0", warning: "_1raebd9c-3-5-0", critical: "_1raebd9d-3-5-0" }, variant: { emphasized: "_1raebd9e-3-5-0", accent: "_1raebd9f-3-5-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", variant: "accent" }, "_1raebd9g-3-5-0"], [{ color: "primary", variant: "accent" }, "_1raebd9h-3-5-0"], [{ color: "success", variant: "accent" }, "_1raebd9i-3-5-0"], [{ color: "warning", variant: "accent" }, "_1raebd9j-3-5-0"], [{ color: "critical", variant: "accent" }, "_1raebd9k-3-5-0"], [{ color: "neutral", variant: "emphasized" }, "_1raebd9l-3-5-0"], [{ color: "primary", variant: "emphasized" }, "_1raebd9m-3-5-0"], [{ color: "success", variant: "emphasized" }, "_1raebd9n-3-5-0"], [{ color: "warning", variant: "emphasized" }, "_1raebd9o-3-5-0"], [{ color: "critical", variant: "emphasized" }, "_1raebd9p-3-5-0"]] });
-var disabledWrapper = "_1raebd91-3-5-0";
-var textContainer = "_1raebd9r-3-5-0";
-var value = "_1raebd9q-3-5-0";
-var wrapper = "_1raebd90-3-5-0";
+var container = _7a468({ defaultClassName: "_1raebd92-3-5-2", variantClassNames: { size: { "default": "_1raebd93-3-5-2", condensed: "_1raebd94-3-5-2" }, hasDeleteButton: { true: "_1raebd95-3-5-2", false: "_1raebd96-3-5-2" }, disabled: { true: "_1raebd97-3-5-2", false: "_1raebd98-3-5-2" }, color: { neutral: "_1raebd99-3-5-2", primary: "_1raebd9a-3-5-2", success: "_1raebd9b-3-5-2", warning: "_1raebd9c-3-5-2", critical: "_1raebd9d-3-5-2" }, variant: { emphasized: "_1raebd9e-3-5-2", accent: "_1raebd9f-3-5-2" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", variant: "accent" }, "_1raebd9g-3-5-2"], [{ color: "primary", variant: "accent" }, "_1raebd9h-3-5-2"], [{ color: "success", variant: "accent" }, "_1raebd9i-3-5-2"], [{ color: "warning", variant: "accent" }, "_1raebd9j-3-5-2"], [{ color: "critical", variant: "accent" }, "_1raebd9k-3-5-2"], [{ color: "neutral", variant: "emphasized" }, "_1raebd9l-3-5-2"], [{ color: "primary", variant: "emphasized" }, "_1raebd9m-3-5-2"], [{ color: "success", variant: "emphasized" }, "_1raebd9n-3-5-2"], [{ color: "warning", variant: "emphasized" }, "_1raebd9o-3-5-2"], [{ color: "critical", variant: "emphasized" }, "_1raebd9p-3-5-2"]] });
+var disabledWrapper = "_1raebd91-3-5-2";
+var textContainer = "_1raebd9r-3-5-2";
+var value = "_1raebd9q-3-5-2";
+var wrapper = "_1raebd90-3-5-2";
 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-5-0',variantClassNames:{size:{'default':'_1raebd93-3-5-0',condensed:'_1raebd94-3-5-0'},hasDeleteButton:{true:'_1raebd95-3-5-0',false:'_1raebd96-3-5-0'},disabled:{true:'_1raebd97-3-5-0',false:'_1raebd98-3-5-0'},color:{neutral:'_1raebd99-3-5-0',primary:'_1raebd9a-3-5-0',success:'_1raebd9b-3-5-0',warning:'_1raebd9c-3-5-0',critical:'_1raebd9d-3-5-0'},variant:{emphasized:'_1raebd9e-3-5-0',accent:'_1raebd9f-3-5-0'}},defaultVariants:{},compoundVariants:[[{color:'neutral',variant:'accent'},'_1raebd9g-3-5-0'],[{color:'primary',variant:'accent'},'_1raebd9h-3-5-0'],[{color:'success',variant:'accent'},'_1raebd9i-3-5-0'],[{color:'warning',variant:'accent'},'_1raebd9j-3-5-0'],[{color:'critical',variant:'accent'},'_1raebd9k-3-5-0'],[{color:'neutral',variant:'emphasized'},'_1raebd9l-3-5-0'],[{color:'primary',variant:'emphasized'},'_1raebd9m-3-5-0'],[{color:'success',variant:'emphasized'},'_1raebd9n-3-5-0'],[{color:'warning',variant:'emphasized'},'_1raebd9o-3-5-0'],[{color:'critical',variant:'emphasized'},'_1raebd9p-3-5-0']]});\nexport var disabledWrapper = '_1raebd91-3-5-0';\nexport var textContainer = '_1raebd9r-3-5-0';\nexport var value = '_1raebd9q-3-5-0';\nexport var wrapper = '_1raebd90-3-5-0';"],
+  "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-5-2',variantClassNames:{size:{'default':'_1raebd93-3-5-2',condensed:'_1raebd94-3-5-2'},hasDeleteButton:{true:'_1raebd95-3-5-2',false:'_1raebd96-3-5-2'},disabled:{true:'_1raebd97-3-5-2',false:'_1raebd98-3-5-2'},color:{neutral:'_1raebd99-3-5-2',primary:'_1raebd9a-3-5-2',success:'_1raebd9b-3-5-2',warning:'_1raebd9c-3-5-2',critical:'_1raebd9d-3-5-2'},variant:{emphasized:'_1raebd9e-3-5-2',accent:'_1raebd9f-3-5-2'}},defaultVariants:{},compoundVariants:[[{color:'neutral',variant:'accent'},'_1raebd9g-3-5-2'],[{color:'primary',variant:'accent'},'_1raebd9h-3-5-2'],[{color:'success',variant:'accent'},'_1raebd9i-3-5-2'],[{color:'warning',variant:'accent'},'_1raebd9j-3-5-2'],[{color:'critical',variant:'accent'},'_1raebd9k-3-5-2'],[{color:'neutral',variant:'emphasized'},'_1raebd9l-3-5-2'],[{color:'primary',variant:'emphasized'},'_1raebd9m-3-5-2'],[{color:'success',variant:'emphasized'},'_1raebd9n-3-5-2'],[{color:'warning',variant:'emphasized'},'_1raebd9o-3-5-2'],[{color:'critical',variant:'emphasized'},'_1raebd9p-3-5-2']]});\nexport var disabledWrapper = '_1raebd91-3-5-2';\nexport var textContainer = '_1raebd9r-3-5-2';\nexport var value = '_1raebd9q-3-5-2';\nexport var wrapper = '_1raebd90-3-5-2';"],
   "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-5-0 {
+._uhh9yl1-3-5-2 {
   display: flex;
   align-self: stretch;
   line-height: 100%;
-  fill: var(--_bx32h1-3-5-0);
-  color: var(--_bx32h0-3-5-0);
+  fill: var(--_bx32h1-3-5-2);
+  color: var(--_bx32h0-3-5-2);
 }
-._uhh9yl2-3-5-0 {
-  --_uhh9yl0-3-5-0: 20px;
+._uhh9yl2-3-5-2 {
+  --_uhh9yl0-3-5-2: 20px;
 }
-._uhh9yl3-3-5-0 {
-  --_uhh9yl0-3-5-0: 16px;
+._uhh9yl3-3-5-2 {
+  --_uhh9yl0-3-5-2: 16px;
 }
-._1raebd99-3-5-0._1raebd9e-3-5-0._1raebd98-3-5-0 ._uhh9yl4-3-5-0 {
+._1raebd99-3-5-2._1raebd9e-3-5-2._1raebd98-3-5-2 ._uhh9yl4-3-5-2 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   fill: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._uhh9yl1-3-5-0._uhh9yl1-3-5-0 svg {
+._uhh9yl1-3-5-2._uhh9yl1-3-5-2 svg {
   box-sizing: content-box;
   align-items: center;
   align-self: center;
-  width: var(--_uhh9yl0-3-5-0);
-  height: var(--_uhh9yl0-3-5-0);
+  width: var(--_uhh9yl0-3-5-2);
+  height: var(--_uhh9yl0-3-5-2);
 }

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-5-0", variantClassNames: { size: { "default": "_uhh9yl2-3-5-0", condensed: "_uhh9yl3-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
-var prefix = "_uhh9yl4-3-5-0";
+var content = _7a468({ defaultClassName: "_uhh9yl1-3-5-2", variantClassNames: { size: { "default": "_uhh9yl2-3-5-2", condensed: "_uhh9yl3-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var prefix = "_uhh9yl4-3-5-2";
 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-5-0',variantClassNames:{size:{'default':'_uhh9yl2-3-5-0',condensed:'_uhh9yl3-3-5-0'}},defaultVariants:{},compoundVariants:[]});\nexport var prefix = '_uhh9yl4-3-5-0';"],
+  "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-5-2',variantClassNames:{size:{'default':'_uhh9yl2-3-5-2',condensed:'_uhh9yl3-3-5-2'}},defaultVariants:{},compoundVariants:[]});\nexport var prefix = '_uhh9yl4-3-5-2';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,UAAU,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,MAAK,EAAC,WAAU,kBAAiB,WAAU,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAChL,IAAI,SAAS;",
   "names": []
 }

package/esm/content/chip/ChipDeleteButton.css

@@ -1,39 +1,39 @@
-._3mvhm30-3-5-0 {
+._3mvhm30-3-5-2 {
   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-5-0 ._3mvhm30-3-5-0 {
-  --_bx32h4-3-5-0: none;
+._1jgl8s50-3-5-2 ._3mvhm30-3-5-2 {
+  --_bx32h4-3-5-2: none;
 }
-._1jgl8s50-3-5-0 ._3mvhm30-3-5-0:hover {
-  --_bx32h4-3-5-0: none;
+._1jgl8s50-3-5-2 ._3mvhm30-3-5-2:hover {
+  --_bx32h4-3-5-2: none;
 }
-._1jgl8s50-3-5-0 ._3mvhm30-3-5-0:active {
-  --_bx32h4-3-5-0: none;
+._1jgl8s50-3-5-2 ._3mvhm30-3-5-2:active {
+  --_bx32h4-3-5-2: none;
 }
-._1jgl8s50-3-5-0 ._3mvhm31-3-5-0 {
-  --_bx32h3-3-5-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_bx32h2-3-5-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+._1jgl8s50-3-5-2 ._3mvhm31-3-5-2 {
+  --_bx32h3-3-5-2: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_bx32h2-3-5-2: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._1jgl8s50-3-5-0 ._3mvhm31-3-5-0:hover {
-  --_bx32h3-3-5-0: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+._1jgl8s50-3-5-2 ._3mvhm31-3-5-2:hover {
+  --_bx32h3-3-5-2: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1jgl8s50-3-5-0 ._3mvhm31-3-5-0:active {
-  --_bx32h3-3-5-0: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
+._1jgl8s50-3-5-2 ._3mvhm31-3-5-2:active {
+  --_bx32h3-3-5-2: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1jgl8s50-3-5-0 ._3mvhm32-3-5-0, ._1jgl8s50-3-5-0 ._3mvhm32-3-5-0:hover, ._1jgl8s50-3-5-0 ._3mvhm32-3-5-0:active {
-  --_bx32h3-3-5-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_bx32h2-3-5-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+._1jgl8s50-3-5-2 ._3mvhm32-3-5-2, ._1jgl8s50-3-5-2 ._3mvhm32-3-5-2:hover, ._1jgl8s50-3-5-2 ._3mvhm32-3-5-2:active {
+  --_bx32h3-3-5-2: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_bx32h2-3-5-2: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._3mvhm33-3-5-0 {
+._3mvhm33-3-5-2 {
   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);
 }
-._3mvhm34-3-5-0 {
+._3mvhm34-3-5-2 {
   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

@@ -1,10 +1,10 @@
 import "../../core/components/app-root/AppRoot.css";
 import "../../styles/field.css";
 import "./ChipDeleteButton.css";
-var base = "_3mvhm30-3-5-0";
-var disabledOverride = "_3mvhm32-3-5-0";
-var neutralEmphasizedOverride = "_3mvhm31-3-5-0";
-var size = { "default": "_3mvhm33-3-5-0", condensed: "_3mvhm34-3-5-0" };
+var base = "_3mvhm30-3-5-2";
+var disabledOverride = "_3mvhm32-3-5-2";
+var neutralEmphasizedOverride = "_3mvhm31-3-5-2";
+var size = { "default": "_3mvhm33-3-5-2", condensed: "_3mvhm34-3-5-2" };
 export {
   base,
   disabledOverride,