Repository: smg-automotive/components-pkg
Pull request #1341: feat(FED-388): textarea
Author: login: lkappeler
Labels: name: released on @chakra-v3/root
name: released on @PS-275-migrate-count
name: released on @PS-289-migrate-checkbox
name: released on @feat-migrate-rating
name: released on @feat-ST-1260-accordion-migration
Created: 2025-03-12T11:40:07Z | Merged: 2025-03-13T16:53:50Z

References https://smg-au.atlassian.net/browse/FED-388

## Motivation and context

Migrates the textarea component to v3
![image](https://github.com/user-attachments/assets/42ce3dd9-aba4-49bc-9417-b04e42fb74e8)


Diff:
diff --git a/src-v2/themes/components/textarea.ts b/src-v2/themes/components/textarea.ts
deleted file mode 100644
index 843180e56..000000000
--- a/src-v2/themes/components/textarea.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type {
-  ComponentStyleConfig,
-  SystemStyleInterpolation,
-  SystemStyleObject,
-} from '@chakra-ui/react';
-
-import Input from './input';
-
-const baseStyle: SystemStyleObject = {
-  px: 'lg',
-  pt: 'md',
-  outline: 0,
-  position: 'relative',
-  appearance: 'none',
-  transitionProperty: 'common',
-  transitionDuration: 'normal',
-  width: 'full',
-};
-
-const variants: Record<string, SystemStyleInterpolation> = {
-  outline: Input.variants.outline.field ?? {},
-};
-
-const defaultProps = {
-  variant: 'outline',
-};
-
-export default {
-  baseStyle,
-  variants,
-  defaultProps,
-} as ComponentStyleConfig;
diff --git a/src/components/field/index.stories.tsx b/src/components/field/index.stories.tsx
index eabe45aa1..4aef2ed0a 100644
--- a/src/components/field/index.stories.tsx
+++ b/src/components/field/index.stories.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { Box, Input } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
+
+import { Textarea } from '../textarea';
 
-// TODO: replace after input is migrated
-// import { Input } from 'src/index';
 import { Field } from './index';
 
 /**
@@ -34,7 +34,7 @@ const meta: Meta<typeof Field> = {
     errorMessage: '',
     size: 'lg',
     id: 'test-input',
-    children: ['input'],
+    children: ['textarea'],
   },
 
   argTypes: {
@@ -47,12 +47,12 @@ const meta: Meta<typeof Field> = {
         disable: true,
       },
       mapping: {
-        input: (
-          <Input
-            key="dummyInput"
+        textarea: (
+          <Textarea
+            key="example-textarea"
             name="test-input"
             placeholder="placeholder"
-            width="full"
+            cols={29}
           />
         ),
       },
diff --git a/src/components/textarea/__tests__/TextArea.Test.tsx b/src/components/textarea/__tests__/TextArea.Test.tsx
new file mode 100644
index 000000000..60b1a8e27
--- /dev/null
+++ b/src/components/textarea/__tests__/TextArea.Test.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+
+import { render, screen } from '.jest/utils';
+
+import { Textarea } from '../index';
+
+const renderWrapper = ({
+  name = 'Textarea',
+  autoFocus = false,
+  disabled = false,
+  onChange = jest.fn(),
+  onFocus = jest.fn(),
+  onBlur = jest.fn(),
+  placeholder = 'Placeholder',
+} = {}) =>
+  render(
+    <Textarea
+      name={name}
+      autoFocus={autoFocus}
+      disabled={disabled}
+      onChange={onChange}
+      placeholder={placeholder}
+      onFocus={onFocus}
+      onBlur={onBlur}
+    />,
+  );
+
+describe('<Textarea>', () => {
+  it('onFocus is called when focusing the textarea', () => {
+    const onFocus = jest.fn();
+    renderWrapper({ onFocus });
+
+    const textarea = screen.getByPlaceholderText('Placeholder');
+    textarea.focus();
+
+    expect(onFocus).toHaveBeenCalled();
+  });
+
+  it('onBlur is called when the textarea loses focus', () => {
+    const onBlur = jest.fn();
+    renderWrapper({ onBlur });
+
+    const textarea = screen.getByPlaceholderText('Placeholder');
+    textarea.focus();
+    textarea.blur();
+
+    expect(onBlur).toHaveBeenCalled();
+  });
+
+  it('triggers onChange event when the textarea changes', async () => {
+    const onChange = jest.fn();
+    renderWrapper({ onChange });
+
+    const textarea = screen.getByPlaceholderText('Placeholder');
+    await userEvent.type(textarea, 'test...');
+
+    expect(onChange).toHaveBeenCalledTimes(7);
+  });
+
+  it('supports autoFocus', () => {
+    renderWrapper({ autoFocus: true });
+    const textarea = screen.getByPlaceholderText('Placeholder');
+
+    expect(textarea).toHaveFocus();
+  });
+
+  it('is not possible to click on the textarea when is disabled', async () => {
+    const onFocus = jest.fn();
+    renderWrapper({ onFocus, disabled: true });
+    const textarea = screen.getByPlaceholderText('Placeholder');
+    await userEvent.click(textarea);
+
+    expect(textarea).toBeDisabled();
+    expect(onFocus).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/components/textarea/index.stories.tsx b/src/components/textarea/index.stories.tsx
new file mode 100644
index 000000000..7de7200b4
--- /dev/null
+++ b/src/components/textarea/index.stories.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { useArgs } from '@storybook/preview-api';
+import { action } from '@storybook/addon-actions';
+
+import { Field } from '../field';
+
+import { Textarea as TextareaComponent, TextareaProps } from './index';
+
+type StoryProps = TextareaProps & { errorMessage: string };
+
+const Template = (_props: StoryProps) => {
+  const [args, updateArgs] = useArgs<StoryProps>();
+  const { errorMessage, ...rest } = args;
+
+  return (
+    <Field id="example-id" errorMessage={errorMessage}>
+      <TextareaComponent
+        {...rest}
+        onChange={(e) => {
+          updateArgs({ value: e.target.value });
+          args.onChange?.(e);
+        }}
+      />
+    </Field>
+  );
+};
+
+const meta: Meta<StoryProps> = {
+  title: 'Components/Forms/Textarea',
+  component: TextareaComponent,
+  render: Template.bind({}),
+  decorators: [(Story) => <Story />],
+
+  args: {
+    placeholder: 'Placeholder',
+    disabled: false,
+    autoFocus: false,
+    onChange: action('onChange'),
+    onFocus: action('onFocus'),
+    onBlur: action('onBlur'),
+    rows: 10,
+    cols: 50,
+    name: 'test-textarea',
+    errorMessage: '',
+  },
+
+  argTypes: {
+    textStyle: {
+      options: ['body', 'body-small'],
+
+      control: {
+        type: 'select',
+      },
+    },
+    onBlur: {
+      control: {},
+    },
+    onFocus: {
+      control: {},
+    },
+    onChange: {
+      control: {},
+    },
+    errorMessage: { control: 'text' },
+  },
+};
+export default meta;
+
+type StoryType = StoryObj<StoryProps>;
+export const Textarea: StoryType = {};
+
+export const StateFocused: StoryType = {
+  name: 'State > Focused',
+
+  args: {
+    autoFocus: true,
+  },
+};
+
+export const StateInvalid: StoryType = {
+  name: 'State > Invalid',
+
+  args: {
+    errorMessage: "Something's wrong",
+  },
+};
+
+export const StateDisabled: StoryType = {
+  name: 'State > Disabled',
+
+  args: {
+    disabled: true,
+  },
+};
diff --git a/src/components/textarea/index.tsx b/src/components/textarea/index.tsx
new file mode 100644
index 000000000..0f6ef1840
--- /dev/null
+++ b/src/components/textarea/index.tsx
@@ -0,0 +1,28 @@
+import React, {
+  ChangeEventHandler,
+  FocusEventHandler,
+  forwardRef,
+} from 'react';
+
+import { Textarea as ChakraTextarea } from '@chakra-ui/react';
+
+export interface TextareaProps {
+  name: string;
+  value?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  onBlur?: FocusEventHandler<HTMLTextAreaElement>;
+  onFocus?: FocusEventHandler<HTMLTextAreaElement>;
+  onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+  rows?: number;
+  cols?: number;
+  textStyle?: 'body' | 'body-small';
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ ...props }, ref) => {
+    return <ChakraTextarea {...props} ref={ref} />;
+  },
+);
+Textarea.displayName = 'Textarea';
diff --git a/src/themes/shared/recipes/index.ts b/src/themes/shared/recipes/index.ts
index 12c857957..ad91ef34a 100644
--- a/src/themes/shared/recipes/index.ts
+++ b/src/themes/shared/recipes/index.ts
@@ -1,3 +1,4 @@
+import { textareaRecipe as textarea } from './textarea';
 import { spinnerRecipe as spinner } from './spinner';
 import { skeletonRecipe as skeleton } from './skeleton';
 import { separatorRecipe as separator } from './separator';
@@ -12,4 +13,5 @@ export const recipes = {
   separator,
   skeleton,
   spinner,
+  textarea,
 };
diff --git a/src/themes/shared/recipes/textarea.ts b/src/themes/shared/recipes/textarea.ts
new file mode 100644
index 000000000..4e38f63c3
--- /dev/null
+++ b/src/themes/shared/recipes/textarea.ts
@@ -0,0 +1,36 @@
+import { defineRecipe } from '@chakra-ui/react';
+
+export const textareaRecipe = defineRecipe({
+  base: {
+    paddingX: 'lg',
+    paddingTop: 'md',
+    outline: 0,
+    position: 'relative',
+    appearance: 'none',
+    transitionProperty: 'common',
+    transitionDuration: 'normal',
+    border: '1px',
+    borderColor: 'gray.400',
+    borderRadius: 'sm',
+    color: 'gray.900',
+    background: 'inherit',
+    _placeholder: {
+      color: 'gray.400',
+    },
+    _hover: {
+      borderColor: 'gray.900',
+    },
+    _focus: {
+      backgroundColor: 'blue.50',
+    },
+    _active: {},
+    _invalid: {
+      borderColor: 'red.500',
+    },
+    _disabled: {
+      cursor: 'notAllowed',
+      color: 'gray.300',
+      borderColor: 'gray.200',
+    },
+  },
+});
diff --git a/src/themes/shared/tokens/colors.ts b/src/themes/shared/tokens/colors.ts
index 3b635d028..e13739ecf 100644
--- a/src/themes/shared/tokens/colors.ts
+++ b/src/themes/shared/tokens/colors.ts
@@ -137,6 +137,7 @@ export const colors = defineTokens.colors({
     900: { value: '#402859' },
   },
   none: { value: 'none' },
+  inherit: { value: 'inherit' },
   currentColor: { value: 'currentColor' },
   transparent: { value: 'transparent' },
 });
diff --git a/src/themes/shared/tokens/durations.ts b/src/themes/shared/tokens/durations.ts
index d09a7f7ba..ce9507106 100644
--- a/src/themes/shared/tokens/durations.ts
+++ b/src/themes/shared/tokens/durations.ts
@@ -4,4 +4,7 @@ export const durations = defineTokens.durations({
   fast: {
     value: '150ms',
   },
+  normal: {
+    value: '200ms',
+  },
 });


Reviews:
user: login: copilot-pull-request-reviewer[bot]
body: ## Pull Request Overview

This PR migrates the textarea component to v3, updating tests, stories, component implementation, and themes accordingly.  
- Added comprehensive tests for the Textarea component (focus, blur, change events, disabled state).  
- Updated Storybook stories to reflect various states of the Textarea.  
- Modified Chakra UI theme recipes and tokens to support the updated Textarea styling and functionality.

### Reviewed Changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated no comments.

<details>
<summary>Show a summary per file</summary>

| File                                                     | Description                                                            |
| -------------------------------------------------------- | ---------------------------------------------------------------------- |
| src/components/textarea/__tests__/TextArea.Test.tsx     | Introduces tests for focus, blur, onChange events, and disabled state. |
| src/components/textarea/index.stories.tsx                | Provides Storybook stories covering focused, invalid, and disabled states. |
| src/components/textarea/index.tsx                        | Implements the updated textarea component using forwardRef.          |
| src/themes/shared/recipes/textarea.ts                    | Defines the new styling recipe for the textarea component.             |
| src/themes/shared/tokens/durations.ts                    | Adds a new duration token ("normal") used in transitions.              |
| src/themes/shared/tokens/colors.ts                       | Adds an "inherit" color token.                                         |
| src/components/field/index.stories.tsx                   | Updates the field story to use Textarea instead of Input.              |
| src/themes/shared/recipes/index.ts                       | Incorporates the new textarea recipe into the recipes index.           |
| src-v2/themes/components/textarea.ts                     | Removes legacy theme configuration for textarea.                       |
</details>



<details>
<summary>Comments suppressed due to low confidence (1)</summary>

**src/components/textarea/__tests__/TextArea.Test.tsx:58**
* [nitpick] Relying on an exact call count (7) for the onChange event may be brittle, especially if the event firing mechanism changes in future updates of userEvent. Consider verifying the final value of the textarea or checking that onChange is called at least the expected number of times.
```
expect(onChange).toHaveBeenCalledTimes(7);
```
</details>


state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-12T11:40:52Z
user: login: Averethel
body: Did you remove the corresponding v2 code?
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-12T14:18:56Z
user: login: Averethel
body: Did you remove the corresponding v2 code?
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-12T14:23:27Z
user: login: lkappeler
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T16:29:13Z
user: login: lkappeler
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T16:47:09Z
user: login: lkappeler
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T16:51:00Z

Review comments:
diff_hunk: @@ -1,10 +1,8 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { Box, Input } from '@chakra-ui/react';
+import { Box, Textarea } from '@chakra-ui/react';
path: src/components/field/index.stories.tsx
user: login: Averethel
body: Why not import `Textarea` from `src`?
created_at: 2025-03-12T14:18:12Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,95 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { useArgs } from '@storybook/preview-api';
+import { action } from '@storybook/addon-actions';
+
+import { Field } from '../field';
+
+import { Textarea as TextareaComponent, TextareaProps } from './index';
+
+type StoryProps = TextareaProps & { errorMessage: string };
+
+const Template = (_props: StoryProps) => {
+  const [args, updateArgs] = useArgs<StoryProps>();
+  const { errorMessage, ...rest } = args;
+
+  return (
+    <Field id="example-id" errorMessage={errorMessage}>
+      <TextareaComponent
+        {...rest}
+        onChange={(e) => {
+          updateArgs({ value: e.target.value });
+          args.onChange?.(e);
+        }}
+      />
+    </Field>
+  );
+};
+
+const meta: Meta<StoryProps> = {
+  title: 'Components/Forms/Textarea',
+  component: TextareaComponent,
+  render: Template.bind({}),
+  decorators: [(Story) => <Story />],
+
+  args: {
+    placeholder: 'Placeholder',
+    disabled: false,
+    autoFocus: false,
+    onChange: action('onChange'),
+    onFocus: action('onFocus'),
+    onBlur: action('onBlur'),
+    rows: 10,
+    cols: 50,
+    name: 'test-textarea',
+    errorMessage: '',
+  },
+
+  argTypes: {
+    textStyle: {
path: src/components/textarea/index.stories.tsx
user: login: Averethel
body: Should we make it a token control?
created_at: 2025-03-12T14:19:38Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,28 @@
+import React, {
+  ChangeEventHandler,
+  FocusEventHandler,
+  forwardRef,
+} from 'react';
+
+import { Textarea as ChakraTextarea } from '@chakra-ui/react';
+
+export interface TextareaProps {
+  name: string;
+  value?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  onBlur?: FocusEventHandler<HTMLTextAreaElement>;
+  onFocus?: FocusEventHandler<HTMLTextAreaElement>;
+  onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+  rows?: number;
+  cols?: number;
+  textStyle?: 'body' | 'body-small';
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ ...props }, ref) => {
+    return <ChakraTextarea {...props} ref={ref} />;
+  },
+);
path: src/components/textarea/index.tsx
user: login: Averethel
body: I'm wondering - do we gain a lot by restricting props here? Wouldn't re-exporting from chakra with a display name reduce complexity on our side?
created_at: 2025-03-12T14:22:10Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,10 +1,8 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { Box, Input } from '@chakra-ui/react';
+import { Box, Textarea } from '@chakra-ui/react';
path: src/components/field/index.stories.tsx
user: login: lkappeler
body: thx, messed up switching from my temp version
created_at: 2025-03-13T16:29:13Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,95 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { useArgs } from '@storybook/preview-api';
+import { action } from '@storybook/addon-actions';
+
+import { Field } from '../field';
+
+import { Textarea as TextareaComponent, TextareaProps } from './index';
+
+type StoryProps = TextareaProps & { errorMessage: string };
+
+const Template = (_props: StoryProps) => {
+  const [args, updateArgs] = useArgs<StoryProps>();
+  const { errorMessage, ...rest } = args;
+
+  return (
+    <Field id="example-id" errorMessage={errorMessage}>
+      <TextareaComponent
+        {...rest}
+        onChange={(e) => {
+          updateArgs({ value: e.target.value });
+          args.onChange?.(e);
+        }}
+      />
+    </Field>
+  );
+};
+
+const meta: Meta<StoryProps> = {
+  title: 'Components/Forms/Textarea',
+  component: TextareaComponent,
+  render: Template.bind({}),
+  decorators: [(Story) => <Story />],
+
+  args: {
+    placeholder: 'Placeholder',
+    disabled: false,
+    autoFocus: false,
+    onChange: action('onChange'),
+    onFocus: action('onFocus'),
+    onBlur: action('onBlur'),
+    rows: 10,
+    cols: 50,
+    name: 'test-textarea',
+    errorMessage: '',
+  },
+
+  argTypes: {
+    textStyle: {
path: src/components/textarea/index.stories.tsx
user: login: lkappeler
body: textStyles are a separate entity and we only allow for a subset of the defined styles 
created_at: 2025-03-13T16:47:09Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,28 @@
+import React, {
+  ChangeEventHandler,
+  FocusEventHandler,
+  forwardRef,
+} from 'react';
+
+import { Textarea as ChakraTextarea } from '@chakra-ui/react';
+
+export interface TextareaProps {
+  name: string;
+  value?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  onBlur?: FocusEventHandler<HTMLTextAreaElement>;
+  onFocus?: FocusEventHandler<HTMLTextAreaElement>;
+  onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+  rows?: number;
+  cols?: number;
+  textStyle?: 'body' | 'body-small';
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ ...props }, ref) => {
+    return <ChakraTextarea {...props} ref={ref} />;
+  },
+);
path: src/components/textarea/index.tsx
user: login: lkappeler
body: I would not challenge that during the migrations as it's the agreed approach to expose the minimal needed props for components to enforce the desing system. If we wanna take that discussion i would do that separate form the migration

created_at: 2025-03-13T16:51:00Z
author_association: CONTRIBUTOR

PR comments:
user: login: automotiveengineeringbot
created_at: 2025-03-13T17:01:32Z
body: :tada: This PR is included in version 23.26.0-chakra-v3-b39fac40a197978cee0e50cc9cbe9493e17cfb63.1 :tada:

The release is available on:
- [npm package (@chakra-v3/root dist-tag)](https://www.npmjs.com/package/@smg-automotive/components/v/23.26.0-chakra-v3-b39fac40a197978cee0e50cc9cbe9493e17cfb63.1)
- [GitHub release](https://github.com/smg-automotive/components-pkg/releases/tag/v23.26.0-chakra-v3-b39fac40a197978cee0e50cc9cbe9493e17cfb63.1)

Your **[semantic-release](https://github.com/semantic-release/semantic-release)** bot :package::rocket:
author_association: COLLABORATOR
user: login: automotiveengineeringbot
created_at: 2025-03-20T09:19:57Z
body: :tada: This PR is included in version 23.27.0-chakra-v3-2ae556b5671ed818c54cfec6e02460c50bd80fa5.1 :tada:

The release is available on:
- [npm package (@chakra-v3/root dist-tag)](https://www.npmjs.com/package/@smg-automotive/components/v/23.27.0-chakra-v3-2ae556b5671ed818c54cfec6e02460c50bd80fa5.1)
- [GitHub release](https://github.com/smg-automotive/components-pkg/releases/tag/v23.27.0-chakra-v3-2ae556b5671ed818c54cfec6e02460c50bd80fa5.1)

Your **[semantic-release](https://github.com/semantic-release/semantic-release)** bot :package::rocket:
author_association: COLLABORATOR
user: login: automotiveengineeringbot
created_at: 2025-03-20T17:15:58Z
body: :tada: This PR is included in version 23.27.0-drop-individual-form-helper-components-845d5de20af7c804532e0cbd6eb57784ffa2be81.1 :tada:

The release is available on:
- [npm package (@drop-individual-form-helper-components dist-tag)](https://www.npmjs.com/package/@smg-automotive/components/v/23.27.0-drop-individual-form-helper-components-845d5de20af7c804532e0cbd6eb57784ffa2be81.1)
- [GitHub release](https://github.com/smg-automotive/components-pkg/releases/tag/v23.27.0-drop-individual-form-helper-components-845d5de20af7c804532e0cbd6eb57784ffa2be81.1)

Your **[semantic-release](https://github.com/semantic-release/semantic-release)** bot :package::rocket:
author_association: COLLABORATOR
user: login: automotiveengineeringbot
created_at: 2025-03-21T07:58:21Z
body: :tada: This PR is included in version 23.27.0-chakra-v3-0b2a7e1aca732f4720452a193cc85f12e0fc17f5.1 :tada:

The release is available on:
- [npm package (@chakra-v3/root dist-tag)](https://www.npmjs.com/package/@smg-automotive/components/v/23.27.0-chakra-v3-0b2a7e1aca732f4720452a193cc85f12e0fc17f5.1)
- [GitHub release](https://github.com/smg-automotive/components-pkg/releases/tag/v23.27.0-chakra-v3-0b2a7e1aca732f4720452a193cc85f12e0fc17f5.1)

Your **[semantic-release](https://github.com/semantic-release/semantic-release)** bot :package::rocket:
author_association: COLLABORATOR
user: login: automotiveengineeringbot
created_at: 2025-03-21T22:01:15Z
body: :tada: This PR is included in version 23.27.0-PS-275-migrate-count-8cae161e0518aa530cbccda23c09455207136c46.1 :tada:

The release is available on:
- [npm package (@PS-275-migrate-count dist-tag)](https://www.npmjs.com/package/@smg-automotive/components/v/23.27.0-PS-275-migrate-count-8cae161e0518aa530cbccda23c09455207136c46.1)
- [GitHub release](https://github.com/smg-automotive/components-pkg/releases/tag/v23.27.0-PS-275-migrate-count-8cae161e0518aa530cbccda23c09455207136c46.1)

Your **[semantic-release](https://github.com/semantic-release/semantic-release)** bot :package::rocket:
author_association: COLLABORATOR
user: login: automotiveengineeringbot
created_at: 2025-03-24T16:12:28Z
body: :tada: This PR is included in version 23.27.0-PS-275-migrate-count-6aa669664866c8cdd26a20056c9d3fd41b16b85c.1 :tada:

The release is available on:
- [npm package (@PS-275-migrate-count dist-tag)](https://www.npmjs.com/package/@smg-automotive/components/v/23.27.0-PS-275-migrate-count-6aa669664866c8cdd26a20056c9d3fd41b16b85c.1)
- [GitHub release](https://github.com/smg-automotive/components-pkg/releases/tag/v23.27.0-PS-275-migrate-count-6aa669664866c8cdd26a20056c9d3fd41b16b85c.1)

Your **[semantic-release](https://github.com/semantic-release/semantic-release)** bot :package::rocket:
author_association: COLLABORATOR
user: login: automotiveengineeringbot
created_at: 2025-04-02T13:53:49Z
body: :tada: This PR is included in version 23.27.0-PS-289-migrate-checkbox-34c3132d200b010b5905a8f6c8149707fe819e0d.1 :tada:

The release is available on:
- [npm package (@PS-289-migrate-checkbox dist-tag)](https://www.npmjs.com/package/@smg-automotive/components/v/23.27.0-PS-289-migrate-checkbox-34c3132d200b010b5905a8f6c8149707fe819e0d.1)
- [GitHub release](https://github.com/smg-automotive/components-pkg/releases/tag/v23.27.0-PS-289-migrate-checkbox-34c3132d200b010b5905a8f6c8149707fe819e0d.1)

Your **[semantic-release](https://github.com/semantic-release/semantic-release)** bot :package::rocket:
author_association: COLLABORATOR
user: login: automotiveengineeringbot
created_at: 2025-04-03T06:03:58Z
body: :tada: This PR is included in version 23.27.0-PS-289-migrate-checkbox-5bb68606ab2141a70512db44c4a0b8af56b1c436.1 :tada:

The release is available on:
- [npm package (@PS-289-migrate-checkbox dist-tag)](https://www.npmjs.com/package/@smg-automotive/components/v/23.27.0-PS-289-migrate-checkbox-5bb68606ab2141a70512db44c4a0b8af56b1c436.1)
- [GitHub release](https://github.com/smg-automotive/components-pkg/releases/tag/v23.27.0-PS-289-migrate-checkbox-5bb68606ab2141a70512db44c4a0b8af56b1c436.1)

Your **[semantic-release](https://github.com/semantic-release/semantic-release)** bot :package::rocket:
author_association: COLLABORATOR
user: login: automotiveengineeringbot
created_at: 2025-04-03T07:24:32Z
body: :tada: This PR is included in version 23.27.0-PS-289-migrate-checkbox-f3be2f57bcb9272cdf9e711ea6b29bee5a3f3140.1 :tada:

The release is available on:
- [npm package (@PS-289-migrate-checkbox dist-tag)](https://www.npmjs.com/package/@smg-automotive/components/v/23.27.0-PS-289-migrate-checkbox-f3be2f57bcb9272cdf9e711ea6b29bee5a3f3140.1)
- [GitHub release](https://github.com/smg-automotive/components-pkg/releases/tag/v23.27.0-PS-289-migrate-checkbox-f3be2f57bcb9272cdf9e711ea6b29bee5a3f3140.1)

Your **[semantic-release](https://github.com/semantic-release/semantic-release)** bot :package::rocket:
author_association: COLLABORATOR
user: login: automotiveengineeringbot
created_at: 2025-04-03T08:30:04Z
body: :tada: This PR is included in version 23.27.0-chakra-v3-ee7f03d35e8c921aa4150da95418efdad6c2bb72.1 :tada:

The release is available on:
- [npm package (@chakra-v3/root dist-tag)](https://www.npmjs.com/package/@smg-automotive/components/v/23.27.0-chakra-v3-ee7f03d35e8c921aa4150da95418efdad6c2bb72.1)
- [GitHub release](https://github.com/smg-automotive/components-pkg/releases/tag/v23.27.0-chakra-v3-ee7f03d35e8c921aa4150da95418efdad6c2bb72.1)

Your **[semantic-release](https://github.com/semantic-release/semantic-release)** bot :package::rocket:
author_association: COLLABORATOR
user: login: automotiveengineeringbot
created_at: 2025-04-08T09:13:27Z
body: :tada: This PR is included in version 23.27.0-feat-migrate-rating-180d24253a7b1947ca1c9684193d962660303efc.1 :tada:

The release is available on:
- [npm package (@feat-migrate-rating dist-tag)](https://www.npmjs.com/package/@smg-automotive/components/v/23.27.0-feat-migrate-rating-180d24253a7b1947ca1c9684193d962660303efc.1)
- [GitHub release](https://github.com/smg-automotive/components-pkg/releases/tag/v23.27.0-feat-migrate-rating-180d24253a7b1947ca1c9684193d962660303efc.1)

Your **[semantic-release](https://github.com/semantic-release/semantic-release)** bot :package::rocket:
author_association: COLLABORATOR
user: login: automotiveengineeringbot
created_at: 2025-04-08T10:24:21Z
body: :tada: This PR is included in version 23.27.0-chakra-v3-bafa4e94b678d26e4df915e038e6b4ccd6dab87e.1 :tada:

The release is available on:
- [npm package (@chakra-v3/root dist-tag)](https://www.npmjs.com/package/@smg-automotive/components/v/23.27.0-chakra-v3-bafa4e94b678d26e4df915e038e6b4ccd6dab87e.1)
- [GitHub release](https://github.com/smg-automotive/components-pkg/releases/tag/v23.27.0-chakra-v3-bafa4e94b678d26e4df915e038e6b4ccd6dab87e.1)

Your **[semantic-release](https://github.com/semantic-release/semantic-release)** bot :package::rocket:
author_association: COLLABORATOR
user: login: automotiveengineeringbot
created_at: 2025-05-30T11:29:46Z
body: :tada: This PR is included in version 23.40.0-chakra-v3-5aa50037b362fef6704744978b7cdb1c791b5f0d.1 :tada:

The release is available on:
- [npm package (@chakra-v3/root dist-tag)](https://www.npmjs.com/package/@smg-automotive/components/v/23.40.0-chakra-v3-5aa50037b362fef6704744978b7cdb1c791b5f0d.1)
- [GitHub release](https://github.com/smg-automotive/components-pkg/releases/tag/v23.40.0-chakra-v3-5aa50037b362fef6704744978b7cdb1c791b5f0d.1)

Your **[semantic-release](https://github.com/semantic-release/semantic-release)** bot :package::rocket:
author_association: COLLABORATOR
user: login: automotiveengineeringbot
created_at: 2025-06-27T08:41:25Z
body: :tada: This PR is included in version 23.40.0-chakra-v3-73006b4aacd9ac41a79f701310ab976a74da1887.1 :tada:

The release is available on:
- [npm package (@chakra-v3/root dist-tag)](https://www.npmjs.com/package/@smg-automotive/components/v/23.40.0-chakra-v3-73006b4aacd9ac41a79f701310ab976a74da1887.1)
- [GitHub release](https://github.com/smg-automotive/components-pkg/releases/tag/v23.40.0-chakra-v3-73006b4aacd9ac41a79f701310ab976a74da1887.1)

Your **[semantic-release](https://github.com/semantic-release/semantic-release)** bot :package::rocket:
author_association: COLLABORATOR
user: login: automotiveengineeringbot
created_at: 2025-07-25T16:04:09Z
body: :tada: This PR is included in version 23.40.0-feat-ST-1260-accordion-migration-c7e492528d71a80276ff39ebdb52bc16620e8e21.1 :tada:

The release is available on:
- [npm package (@feat-ST-1260-accordion-migration dist-tag)](https://www.npmjs.com/package/@smg-automotive/components/v/23.40.0-feat-ST-1260-accordion-migration-c7e492528d71a80276ff39ebdb52bc16620e8e21.1)
- [GitHub release](https://github.com/smg-automotive/components-pkg/releases/tag/v23.40.0-feat-ST-1260-accordion-migration-c7e492528d71a80276ff39ebdb52bc16620e8e21.1)

Your **[semantic-release](https://github.com/semantic-release/semantic-release)** bot :package::rocket:
author_association: COLLABORATOR
user: login: automotiveengineeringbot
created_at: 2025-07-25T16:44:57Z
body: :tada: This PR is included in version 23.40.0-feat-ST-1260-accordion-migration-476d4c4c86dee5d38da78da3cb97ad14f70843df.1 :tada:

The release is available on:
- [npm package (@feat-ST-1260-accordion-migration dist-tag)](https://www.npmjs.com/package/@smg-automotive/components/v/23.40.0-feat-ST-1260-accordion-migration-476d4c4c86dee5d38da78da3cb97ad14f70843df.1)
- [GitHub release](https://github.com/smg-automotive/components-pkg/releases/tag/v23.40.0-feat-ST-1260-accordion-migration-476d4c4c86dee5d38da78da3cb97ad14f70843df.1)

Your **[semantic-release](https://github.com/semantic-release/semantic-release)** bot :package::rocket:
author_association: COLLABORATOR