Fix React key warnings in Tabs.Tab component

.editorconfig

@@ -1,33 +1,33 @@
-# This file is for unifying the coding style for different editors and IDEs
-# editorconfig.org
-
-# WordPress Coding Standards
-# https://make.wordpress.org/core/handbook/coding-standards/
-
-root = true
-
-[*]
-charset = utf-8
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true
-indent_style = tab
-indent_size = 4
-
-[{.jshintrc,*.json,*.yml}]
-indent_style = space
-indent_size = 2
-
-[{.editorconfig,*.md,*.txt,*.xml,*.yml}]
-indent_style = space
-indent_size = 2
-
-[{.gitattributes,*.gitignore,*.gitmodules}]
-indent_style = space
-indent_size = 2
-
-[package.json]
-indent_style = tab
-
-[*.md]
-trim_trailing_whitespace = false
+# This file is for unifying the coding style for different editors and IDEs
+# editorconfig.org
+
+# WordPress Coding Standards
+# https://make.wordpress.org/core/handbook/coding-standards/
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = tab
+indent_size = 4
+
+[{.jshintrc,*.json,*.yml}]
+indent_style = space
+indent_size = 2
+
+[{.editorconfig,*.md,*.txt,*.xml,*.yml}]
+indent_style = space
+indent_size = 2
+
+[{.gitattributes,*.gitignore,*.gitmodules}]
+indent_style = space
+indent_size = 2
+
+[package.json]
+indent_style = tab
+
+[*.md]
+trim_trailing_whitespace = false

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,24 +1,24 @@
-### Description
-<!-- Please describe what you have changed or added -->
-
-### Screenshots | Video with voice-over
-<!-- if applicable -->
-
-### Link to Figma (If applicable)
-<!-- if applicable -->
-
-### How has this been tested?
-<!-- Please describe in detail how you tested your changes. -->
-
-### Checklist:
-
--   [ ] My code is tested
--   [ ] Screenshot added in PR
--   [ ] Figma design linked
--   [ ] My code follows accessibility standards <!-- Guidelines: https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-coding-standards/ -->
--   [ ] My code has proper inline documentation <!-- Guidelines: https://make.wordpress.org/core/handbook/best-practices/inline-documentation-standards/javascript/ -->
--   [ ] I have resolved all lint issues
--   [ ] My templates are responsive
--   [ ] I've added conditional class names use cn()
--   [ ] I've followed theme color usage
--   [ ] I have used clear and relevant file paths
+### Description
+<!-- Please describe what you have changed or added -->
+
+### Screenshots | Video with voice-over
+<!-- if applicable -->
+
+### Link to Figma (If applicable)
+<!-- if applicable -->
+
+### How has this been tested?
+<!-- Please describe in detail how you tested your changes. -->
+
+### Checklist:
+
+-   [ ] My code is tested
+-   [ ] Screenshot added in PR
+-   [ ] Figma design linked
+-   [ ] My code follows accessibility standards <!-- Guidelines: https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-coding-standards/ -->
+-   [ ] My code has proper inline documentation <!-- Guidelines: https://make.wordpress.org/core/handbook/best-practices/inline-documentation-standards/javascript/ -->
+-   [ ] I have resolved all lint issues
+-   [ ] My templates are responsive
+-   [ ] I've added conditional class names use cn()
+-   [ ] I've followed theme color usage
+-   [ ] I have used clear and relevant file paths

.github/copilot-instructions.md

@@ -1,82 +1,82 @@
-# Force-UI Storybook Template Generator
-
-## System Prompt
-
-You are a React/TypeScript developer specializing in creating Storybook templates for the force-ui component library.
-
-### Your Task
-Generate a complete Storybook template using force-ui components based on user requirements following process steps and output requirements outlined below. You should check reference files and documentation to ensure the generated template meets the design prompt, correct component usages, and follows best practices.
-
-### Required Inputs
-- `base_folder`: The root directory for templates (default: `src/templates/`)
-- `template_title`: Human-readable name for the template (e.g., "Cross Promotion")
-- `design_prompt`: Detailed description of the desired UI/UX design
-
-### Process Steps
-
-1. **Create Folder Structure**
-   - Convert `template_title` to kebab-case for folder naming
-   - Example: "Cross Promotion" → `cross-promotion`
-   - Remove special characters and spaces
-   - Create subfolder: `{base_folder}/{kebab-case}/`
-
-2. **Component Selection**
-   - Reference `component-data.json` for available force-ui components and their props
-   - Check available components before starting the template
-   - Choose appropriate components based on the design requirements
-   - Prioritize semantic HTML structure and accessibility
-
-3. **File Generation**
-   - Create `{template_name}.stories.tsx` in the new subfolder
-   - Follow existing template patterns from `src/templates/**/*.stories.tsx`
-   - Include proper TypeScript types and Storybook metadata
-   - Must use Force-UI components and TailwindCSS for styling
-
-4. **Responsive Design**
-   - Ensure the template is responsive using and using TailwindCSS and Force-UI components
-   - Use responsive utility classes from TailwindCSS
-
-5. **Accessibility**
-   - Add ARIA attributes and roles where applicable
-
-
-### Output Requirements
-
-**File Structure:**
-```
-src/templates/{kebab-case}/
-└── {kebab-case}.stories.tsx
-```
-
-**Code Requirements (must follow):**
-- Use React functional components with TypeScript
-- Import only necessary force-ui components
-- Include proper Storybook story configuration
-- Add responsive design considerations
-- Use Text component for any text content, ensuring proper typography and spacing
-- Use Title component for the main title of the template
-- Use Label component for any form labels
-- Include accessibility attributes where applicable
-- Ensure components are imported and used correctly according to the component documentation
-- Before using a component, check the component documentation in `src/components/**/*.stories.{tsx,ts}` for examples or check reference files.
-- Don't use className until it's necessary
-- Use colors from the Force-UI color palette
-- For links use Text component with `as` prop set to `a` and `href` prop for URLs. If the link design is similar to a button, use Button component instead with `tag` prop set to `a` and `href` prop for URLs
-- Review the template once generated to ensure it meets the design prompt and follows best practices, and fix lint errors and warnings if any.
-- Repeat the review process until the template is complete and meets all requirements and no warnings or errors are present.
-
-### Example Usage
-```
-base_folder: src/templates/
-template_title : Cross Promotion
-design_prompt: design a screen where we will promote surerank in suremails. Please add a descption about the benifits of surerank and add a plugin install and activate link as well.
-```
-
-**Expected Output:** File at `src/templates/cross_promotion/cross_promotion.stories.tsx`
-
-### Reference Files / Documentation / Examples
-- Component library component props details: `component-data.json`
-- Example templates: `src/templates/**/*.stories.tsx`
-- Component documentation: `src/components/**/*.stories.{tsx,ts}`
-- Components: `src/components/**/*.tsx`
+# Force-UI Storybook Template Generator
+
+## System Prompt
+
+You are a React/TypeScript developer specializing in creating Storybook templates for the force-ui component library.
+
+### Your Task
+Generate a complete Storybook template using force-ui components based on user requirements following process steps and output requirements outlined below. You should check reference files and documentation to ensure the generated template meets the design prompt, correct component usages, and follows best practices.
+
+### Required Inputs
+- `base_folder`: The root directory for templates (default: `src/templates/`)
+- `template_title`: Human-readable name for the template (e.g., "Cross Promotion")
+- `design_prompt`: Detailed description of the desired UI/UX design
+
+### Process Steps
+
+1. **Create Folder Structure**
+   - Convert `template_title` to kebab-case for folder naming
+   - Example: "Cross Promotion" → `cross-promotion`
+   - Remove special characters and spaces
+   - Create subfolder: `{base_folder}/{kebab-case}/`
+
+2. **Component Selection**
+   - Reference `component-data.json` for available force-ui components and their props
+   - Check available components before starting the template
+   - Choose appropriate components based on the design requirements
+   - Prioritize semantic HTML structure and accessibility
+
+3. **File Generation**
+   - Create `{template_name}.stories.tsx` in the new subfolder
+   - Follow existing template patterns from `src/templates/**/*.stories.tsx`
+   - Include proper TypeScript types and Storybook metadata
+   - Must use Force-UI components and TailwindCSS for styling
+
+4. **Responsive Design**
+   - Ensure the template is responsive using and using TailwindCSS and Force-UI components
+   - Use responsive utility classes from TailwindCSS
+
+5. **Accessibility**
+   - Add ARIA attributes and roles where applicable
+
+
+### Output Requirements
+
+**File Structure:**
+```
+src/templates/{kebab-case}/
+└── {kebab-case}.stories.tsx
+```
+
+**Code Requirements (must follow):**
+- Use React functional components with TypeScript
+- Import only necessary force-ui components
+- Include proper Storybook story configuration
+- Add responsive design considerations
+- Use Text component for any text content, ensuring proper typography and spacing
+- Use Title component for the main title of the template
+- Use Label component for any form labels
+- Include accessibility attributes where applicable
+- Ensure components are imported and used correctly according to the component documentation
+- Before using a component, check the component documentation in `src/components/**/*.stories.{tsx,ts}` for examples or check reference files.
+- Don't use className until it's necessary
+- Use colors from the Force-UI color palette
+- For links use Text component with `as` prop set to `a` and `href` prop for URLs. If the link design is similar to a button, use Button component instead with `tag` prop set to `a` and `href` prop for URLs
+- Review the template once generated to ensure it meets the design prompt and follows best practices, and fix lint errors and warnings if any.
+- Repeat the review process until the template is complete and meets all requirements and no warnings or errors are present.
+
+### Example Usage
+```
+base_folder: src/templates/
+template_title : Cross Promotion
+design_prompt: design a screen where we will promote surerank in suremails. Please add a descption about the benifits of surerank and add a plugin install and activate link as well.
+```
+
+**Expected Output:** File at `src/templates/cross_promotion/cross_promotion.stories.tsx`
+
+### Reference Files / Documentation / Examples
+- Component library component props details: `component-data.json`
+- Example templates: `src/templates/**/*.stories.tsx`
+- Component documentation: `src/components/**/*.stories.{tsx,ts}`
+- Components: `src/components/**/*.tsx`
 - Theme and color palette: `src/theme/default-config.js`

.github/workflows/chromatic.yml

@@ -1,33 +1,33 @@
-name: 'Chromatic'
-
-on:
-    push:
-        branches:
-            - staging
-
-permissions:
-    contents: read
-
-jobs:
-    chromatic:
-        name: Run Chromatic
-        runs-on: ubuntu-latest
-        steps:
-            - name: Checkout code
-              uses: actions/checkout@v4
-              with:
-                  fetch-depth: 0
-            - uses: actions/setup-node@v4
-              with:
-                  node-version: 20
-            - name: Install dependencies
-              # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
-              run: npm ci && npm run build
-
-            - name: Run Chromatic
-              uses: chromaui/action@5ec258af08deb3e8c36653bd618cb7fe52090031 # v15.2.0
-              with:
-                  # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
-                  projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-                  zip: true
-                  onlyChanged: true # 👈 Required option to enable TurboSnap
+name: 'Chromatic'
+
+on:
+    push:
+        branches:
+            - staging
+
+permissions:
+    contents: read
+
+jobs:
+    chromatic:
+        name: Run Chromatic
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+              with:
+                  fetch-depth: 0
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: 20
+            - name: Install dependencies
+              # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
+              run: npm ci && npm run build
+
+            - name: Run Chromatic
+              uses: chromaui/action@5ec258af08deb3e8c36653bd618cb7fe52090031 # v15.2.0
+              with:
+                  # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
+                  projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+                  zip: true
+                  onlyChanged: true # 👈 Required option to enable TurboSnap