From 5b708203c8002b8076235bdafa6b89b1b26ea5f9 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Sun, 10 Oct 2021 12:51:27 +0700
Subject: [PATCH 1/2] Add tooltip to pricing icon

---
 docs/src/components/icon/IconImage.tsx       |  10 +-
 docs/src/components/pricing/PricingTable.tsx | 270 ++++++++++---------
 2 files changed, 146 insertions(+), 134 deletions(-)

diff --git a/docs/src/components/icon/IconImage.tsx b/docs/src/components/icon/IconImage.tsx
index 9268a10a624e7d..f7a46287d6cb52 100644
--- a/docs/src/components/icon/IconImage.tsx
+++ b/docs/src/components/icon/IconImage.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useTheme, styled, Theme } from '@mui/material/styles';
 import { SxProps } from '@mui/system';
+import Tooltip from '@mui/material/Tooltip';
 
 export type IconImageProps = {
   name:
@@ -26,11 +27,12 @@ export type IconImageProps = {
     | 'deloitte'
     | 'volvo';
   sx?: SxProps<Theme>;
+  title?: string;
 } & JSX.IntrinsicElements['img'];
 
 const Img = styled('img')({ display: 'inline-block', verticalAlign: 'bottom' });
 
-export default function IconImage({ name, ...props }: IconImageProps) {
+export default function IconImage({ name, title, ...props }: IconImageProps) {
   const theme = useTheme();
   let width = '';
   let height = '';
@@ -68,7 +70,7 @@ export default function IconImage({ name, ...props }: IconImageProps) {
   ) {
     category = 'companies/';
   }
-  return (
+  const element = (
     <Img
       src={`/static/branding/${category}${name}${mode}.svg`}
       alt=""
@@ -78,4 +80,8 @@ export default function IconImage({ name, ...props }: IconImageProps) {
       {...props}
     />
   );
+  if (!title) {
+    return element;
+  }
+  return <Tooltip title={title}>{element}</Tooltip>;
 }
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 6a58b4ebe71334..198ef699088f69 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -528,158 +528,164 @@ const rowHeaders: Record<string, React.ReactNode> = {
 
 const communityData: Record<string, React.ReactNode> = {
   // Core
-  '@mui/core': <IconImage name="yes" />,
-  '@mui/material': <IconImage name="yes" />,
-  '@mui/system': <IconImage name="yes" />,
+  '@mui/core': <IconImage name="yes" title="Available" />,
+  '@mui/material': <IconImage name="yes" title="Available" />,
+  '@mui/system': <IconImage name="yes" title="Available" />,
   // Advanced
-  'data-grid/column-groups': <IconImage name="time" />,
-  'data-grid/column-spanning': <IconImage name="time" />,
-  'data-grid/column-resizing': <IconImage name="no" />,
-  'data-grid/column-reorder': <IconImage name="no" />,
-  'data-grid/column-pinning': <IconImage name="no" />,
-  'data-grid/row-sorting': <IconImage name="yes" />,
-  'data-grid/row-height': <IconImage name="yes" />,
-  'data-grid/row-spanning': <IconImage name="time" />,
-  'data-grid/row-reordering': <IconImage name="no" />,
-  'data-grid/row-selection': <IconImage name="yes" />,
-  'data-grid/row-multiselection': <IconImage name="no" />,
-  'data-grid/row-rangeselection': <IconImage name="no" />,
-  'data-grid/filter-quick': <IconImage name="time" />,
-  'data-grid/filter-column': <IconImage name="yes" />,
-  'data-grid/filter-multicolumn': <IconImage name="no" />,
-  'data-grid/pagination': <IconImage name="yes" />,
-  'data-grid/pagination-large': <IconImage name="no" />,
-  'data-grid/edit-row': <IconImage name="yes" />,
-  'data-grid/edit-cell': <IconImage name="yes" />,
-  'data-grid/file-csv': <IconImage name="yes" />,
-  'data-grid/file-print': <IconImage name="time" />,
-  'data-grid/file-clipboard': <IconImage name="no" />,
-  'data-grid/file-excel': <IconImage name="no" />,
-  'data-grid/customizable-components': <IconImage name="yes" />,
-  'data-grid/virtualize-column': <IconImage name="yes" />,
-  'data-grid/virtualize-row': <IconImage name="no" />,
-  'data-grid/tree-data': <IconImage name="no" />,
-  'data-grid/master-detail': <IconImage name="no" />,
-  'data-grid/grouping': <IconImage name="no" />,
-  'data-grid/aggregation': <IconImage name="no" />,
-  'data-grid/pivoting': <IconImage name="no" />,
-  'data-grid/accessibility': <IconImage name="yes" />,
-  'data-grid/keyboard-nav': <IconImage name="yes" />,
-  'data-grid/localization': <IconImage name="yes" />,
-  'data-grid-pro': <IconImage name="no" />,
-  'date-range-picker': <IconImage name="no" />,
+  'data-grid/column-groups': <IconImage name="time" title="Work in progress" />,
+  'data-grid/column-spanning': <IconImage name="time" title="Work in progress" />,
+  'data-grid/column-resizing': <IconImage name="no" title="Not included" />,
+  'data-grid/column-reorder': <IconImage name="no" title="Not included" />,
+  'data-grid/column-pinning': <IconImage name="no" title="Not included" />,
+  'data-grid/row-sorting': <IconImage name="yes" title="Available" />,
+  'data-grid/row-height': <IconImage name="yes" title="Available" />,
+  'data-grid/row-spanning': <IconImage name="time" title="Work in progress" />,
+  'data-grid/row-reordering': <IconImage name="no" title="Not included" />,
+  'data-grid/row-selection': <IconImage name="yes" title="Available" />,
+  'data-grid/row-multiselection': <IconImage name="no" title="Not included" />,
+  'data-grid/row-rangeselection': <IconImage name="no" title="Not included" />,
+  'data-grid/filter-quick': <IconImage name="time" title="Work in progress" />,
+  'data-grid/filter-column': <IconImage name="yes" title="Available" />,
+  'data-grid/filter-multicolumn': <IconImage name="no" title="Not included" />,
+  'data-grid/pagination': <IconImage name="yes" title="Available" />,
+  'data-grid/pagination-large': <IconImage name="no" title="Not included" />,
+  'data-grid/edit-row': <IconImage name="yes" title="Available" />,
+  'data-grid/edit-cell': <IconImage name="yes" title="Available" />,
+  'data-grid/file-csv': <IconImage name="yes" title="Available" />,
+  'data-grid/file-print': <IconImage name="time" title="Work in progress" />,
+  'data-grid/file-clipboard': <IconImage name="no" title="Not included" />,
+  'data-grid/file-excel': <IconImage name="no" title="Not included" />,
+  'data-grid/customizable-components': <IconImage name="yes" title="Available" />,
+  'data-grid/virtualize-column': <IconImage name="yes" title="Available" />,
+  'data-grid/virtualize-row': <IconImage name="no" title="Not included" />,
+  'data-grid/tree-data': <IconImage name="no" title="Not included" />,
+  'data-grid/master-detail': <IconImage name="no" title="Not included" />,
+  'data-grid/grouping': <IconImage name="no" title="Not included" />,
+  'data-grid/aggregation': <IconImage name="no" title="Not included" />,
+  'data-grid/pivoting': <IconImage name="no" title="Not included" />,
+  'data-grid/accessibility': <IconImage name="yes" title="Available" />,
+  'data-grid/keyboard-nav': <IconImage name="yes" title="Available" />,
+  'data-grid/localization': <IconImage name="yes" title="Available" />,
+  'data-grid-pro': <IconImage name="no" title="Not included" />,
+  'date-range-picker': <IconImage name="no" title="Not included" />,
   // Support
-  community: <IconImage name="yes" />,
-  'bugs/features': <IconImage name="yes" />,
-  'tech-advisory': <IconImage name="no" />,
-  'support-duration': <IconImage name="no" />,
-  'response-time': <IconImage name="no" />,
-  'pre-screening': <IconImage name="no" />,
-  'issue-escalation': <IconImage name="no" />,
+  community: <IconImage name="yes" title="Available" />,
+  'bugs/features': <IconImage name="yes" title="Available" />,
+  'tech-advisory': <IconImage name="no" title="Not included" />,
+  'support-duration': <IconImage name="no" title="Not included" />,
+  'response-time': <IconImage name="no" title="Not included" />,
+  'pre-screening': <IconImage name="no" title="Not included" />,
+  'issue-escalation': <IconImage name="no" title="Not included" />,
 };
 
 const proData: Record<string, React.ReactNode> = {
   // Core
-  '@mui/core': <IconImage name="yes" />,
-  '@mui/material': <IconImage name="yes" />,
-  '@mui/system': <IconImage name="yes" />,
+  '@mui/core': <IconImage name="yes" title="Available" />,
+  '@mui/material': <IconImage name="yes" title="Available" />,
+  '@mui/system': <IconImage name="yes" title="Available" />,
   // Advanced
-  'data-grid/column-groups': <IconImage name="time" />,
-  'data-grid/column-spanning': <IconImage name="time" />,
-  'data-grid/column-resizing': <IconImage name="yes" />,
-  'data-grid/column-reorder': <IconImage name="yes" />,
-  'data-grid/column-pinning': <IconImage name="time" />,
-  'data-grid/row-sorting': <IconImage name="yes" />,
-  'data-grid/row-height': <IconImage name="yes" />,
-  'data-grid/row-spanning': <IconImage name="time" />,
-  'data-grid/row-reordering': <IconImage name="time" />,
-  'data-grid/row-selection': <IconImage name="yes" />,
-  'data-grid/row-multiselection': <IconImage name="yes" />,
-  'data-grid/row-rangeselection': <IconImage name="no" />,
-  'data-grid/filter-quick': <IconImage name="time" />,
-  'data-grid/filter-column': <IconImage name="yes" />,
-  'data-grid/filter-multicolumn': <IconImage name="yes" />,
-  'data-grid/pagination': <IconImage name="yes" />,
-  'data-grid/pagination-large': <IconImage name="yes" />,
-  'data-grid/edit-row': <IconImage name="yes" />,
-  'data-grid/edit-cell': <IconImage name="yes" />,
-  'data-grid/file-csv': <IconImage name="yes" />,
-  'data-grid/file-print': <IconImage name="time" />,
-  'data-grid/file-clipboard': <IconImage name="time" />,
-  'data-grid/file-excel': <IconImage name="no" />,
-  'data-grid/customizable-components': <IconImage name="yes" />,
-  'data-grid/virtualize-column': <IconImage name="yes" />,
-  'data-grid/virtualize-row': <IconImage name="yes" />,
-  'data-grid/tree-data': <IconImage name="time" />,
-  'data-grid/master-detail': <IconImage name="time" />,
-  'data-grid/grouping': <IconImage name="no" />,
-  'data-grid/aggregation': <IconImage name="no" />,
-  'data-grid/pivoting': <IconImage name="no" />,
-  'data-grid/accessibility': <IconImage name="yes" />,
-  'data-grid/keyboard-nav': <IconImage name="yes" />,
-  'data-grid/localization': <IconImage name="yes" />,
+  'data-grid/column-groups': <IconImage name="time" title="Work in progress" />,
+  'data-grid/column-spanning': <IconImage name="time" title="Work in progress" />,
+  'data-grid/column-resizing': <IconImage name="yes" title="Available" />,
+  'data-grid/column-reorder': <IconImage name="yes" title="Available" />,
+  'data-grid/column-pinning': <IconImage name="time" title="Work in progress" />,
+  'data-grid/row-sorting': <IconImage name="yes" title="Available" />,
+  'data-grid/row-height': <IconImage name="yes" title="Available" />,
+  'data-grid/row-spanning': <IconImage name="time" title="Work in progress" />,
+  'data-grid/row-reordering': <IconImage name="time" title="Work in progress" />,
+  'data-grid/row-selection': <IconImage name="yes" title="Available" />,
+  'data-grid/row-multiselection': <IconImage name="yes" title="Available" />,
+  'data-grid/row-rangeselection': <IconImage name="no" title="Not included" />,
+  'data-grid/filter-quick': <IconImage name="time" title="Work in progress" />,
+  'data-grid/filter-column': <IconImage name="yes" title="Available" />,
+  'data-grid/filter-multicolumn': <IconImage name="yes" title="Available" />,
+  'data-grid/pagination': <IconImage name="yes" title="Available" />,
+  'data-grid/pagination-large': <IconImage name="yes" title="Available" />,
+  'data-grid/edit-row': <IconImage name="yes" title="Available" />,
+  'data-grid/edit-cell': <IconImage name="yes" title="Available" />,
+  'data-grid/file-csv': <IconImage name="yes" title="Available" />,
+  'data-grid/file-print': <IconImage name="time" title="Work in progress" />,
+  'data-grid/file-clipboard': <IconImage name="time" title="Work in progress" />,
+  'data-grid/file-excel': <IconImage name="no" title="Not included" />,
+  'data-grid/customizable-components': <IconImage name="yes" title="Available" />,
+  'data-grid/virtualize-column': <IconImage name="yes" title="Available" />,
+  'data-grid/virtualize-row': <IconImage name="yes" title="Available" />,
+  'data-grid/tree-data': <IconImage name="time" title="Work in progress" />,
+  'data-grid/master-detail': <IconImage name="time" title="Work in progress" />,
+  'data-grid/grouping': <IconImage name="no" title="Not included" />,
+  'data-grid/aggregation': <IconImage name="no" title="Not included" />,
+  'data-grid/pivoting': <IconImage name="no" title="Not included" />,
+  'data-grid/accessibility': <IconImage name="yes" title="Available" />,
+  'data-grid/keyboard-nav': <IconImage name="yes" title="Available" />,
+  'data-grid/localization': <IconImage name="yes" title="Available" />,
   'data-grid-pro': <Info value="1 year" />,
-  'date-range-picker': <IconImage name="time" />,
+  'date-range-picker': <IconImage name="time" title="Work in progress" />,
   // Support
-  community: <IconImage name="yes" />,
-  'bugs/features': <Info value={<IconImage name="yes" />} metadata="Priority over Community" />,
-  'tech-advisory': <IconImage name="no" />,
+  community: <IconImage name="yes" title="Available" />,
+  'bugs/features': (
+    <Info value={<IconImage name="yes" title="Available" />} metadata="Priority over Community" />
+  ),
+  'tech-advisory': <IconImage name="no" title="Not included" />,
   'support-duration': <Info value="1 year" />,
-  'response-time': <IconImage name="no" />,
-  'pre-screening': <IconImage name="no" />,
-  'issue-escalation': <IconImage name="no" />,
+  'response-time': <IconImage name="no" title="Not included" />,
+  'pre-screening': <IconImage name="no" title="Not included" />,
+  'issue-escalation': <IconImage name="no" title="Not included" />,
 };
 
 const premiumData: Record<string, React.ReactNode> = {
   // Core
-  '@mui/core': <IconImage name="yes" />,
-  '@mui/material': <IconImage name="yes" />,
-  '@mui/system': <IconImage name="yes" />,
+  '@mui/core': <IconImage name="yes" title="Available" />,
+  '@mui/material': <IconImage name="yes" title="Available" />,
+  '@mui/system': <IconImage name="yes" title="Available" />,
   // Advanced
-  'data-grid/column-groups': <IconImage name="time" />,
-  'data-grid/column-spanning': <IconImage name="time" />,
-  'data-grid/column-resizing': <IconImage name="yes" />,
-  'data-grid/column-reorder': <IconImage name="yes" />,
-  'data-grid/column-pinning': <IconImage name="time" />,
-  'data-grid/row-sorting': <IconImage name="yes" />,
-  'data-grid/row-height': <IconImage name="yes" />,
-  'data-grid/row-spanning': <IconImage name="time" />,
-  'data-grid/row-reordering': <IconImage name="time" />,
-  'data-grid/row-selection': <IconImage name="yes" />,
-  'data-grid/row-multiselection': <IconImage name="yes" />,
-  'data-grid/row-rangeselection': <IconImage name="time" />,
-  'data-grid/filter-quick': <IconImage name="time" />,
-  'data-grid/filter-column': <IconImage name="yes" />,
-  'data-grid/filter-multicolumn': <IconImage name="yes" />,
-  'data-grid/pagination': <IconImage name="yes" />,
-  'data-grid/pagination-large': <IconImage name="yes" />,
-  'data-grid/edit-row': <IconImage name="yes" />,
-  'data-grid/edit-cell': <IconImage name="yes" />,
-  'data-grid/file-csv': <IconImage name="yes" />,
-  'data-grid/file-print': <IconImage name="time" />,
-  'data-grid/file-clipboard': <IconImage name="time" />,
-  'data-grid/file-excel': <IconImage name="no" />,
-  'data-grid/customizable-components': <IconImage name="yes" />,
-  'data-grid/virtualize-column': <IconImage name="yes" />,
-  'data-grid/virtualize-row': <IconImage name="yes" />,
-  'data-grid/tree-data': <IconImage name="time" />,
-  'data-grid/master-detail': <IconImage name="time" />,
-  'data-grid/grouping': <IconImage name="time" />,
-  'data-grid/aggregation': <IconImage name="time" />,
-  'data-grid/pivoting': <IconImage name="time" />,
-  'data-grid/accessibility': <IconImage name="yes" />,
-  'data-grid/keyboard-nav': <IconImage name="yes" />,
-  'data-grid/localization': <IconImage name="yes" />,
+  'data-grid/column-groups': <IconImage name="time" title="Work in progress" />,
+  'data-grid/column-spanning': <IconImage name="time" title="Work in progress" />,
+  'data-grid/column-resizing': <IconImage name="yes" title="Available" />,
+  'data-grid/column-reorder': <IconImage name="yes" title="Available" />,
+  'data-grid/column-pinning': <IconImage name="time" title="Work in progress" />,
+  'data-grid/row-sorting': <IconImage name="yes" title="Available" />,
+  'data-grid/row-height': <IconImage name="yes" title="Available" />,
+  'data-grid/row-spanning': <IconImage name="time" title="Work in progress" />,
+  'data-grid/row-reordering': <IconImage name="time" title="Work in progress" />,
+  'data-grid/row-selection': <IconImage name="yes" title="Available" />,
+  'data-grid/row-multiselection': <IconImage name="yes" title="Available" />,
+  'data-grid/row-rangeselection': <IconImage name="time" title="Work in progress" />,
+  'data-grid/filter-quick': <IconImage name="time" title="Work in progress" />,
+  'data-grid/filter-column': <IconImage name="yes" title="Available" />,
+  'data-grid/filter-multicolumn': <IconImage name="yes" title="Available" />,
+  'data-grid/pagination': <IconImage name="yes" title="Available" />,
+  'data-grid/pagination-large': <IconImage name="yes" title="Available" />,
+  'data-grid/edit-row': <IconImage name="yes" title="Available" />,
+  'data-grid/edit-cell': <IconImage name="yes" title="Available" />,
+  'data-grid/file-csv': <IconImage name="yes" title="Available" />,
+  'data-grid/file-print': <IconImage name="time" title="Work in progress" />,
+  'data-grid/file-clipboard': <IconImage name="time" title="Work in progress" />,
+  'data-grid/file-excel': <IconImage name="no" title="Not included" />,
+  'data-grid/customizable-components': <IconImage name="yes" title="Available" />,
+  'data-grid/virtualize-column': <IconImage name="yes" title="Available" />,
+  'data-grid/virtualize-row': <IconImage name="yes" title="Available" />,
+  'data-grid/tree-data': <IconImage name="time" title="Work in progress" />,
+  'data-grid/master-detail': <IconImage name="time" title="Work in progress" />,
+  'data-grid/grouping': <IconImage name="time" title="Work in progress" />,
+  'data-grid/aggregation': <IconImage name="time" title="Work in progress" />,
+  'data-grid/pivoting': <IconImage name="time" title="Work in progress" />,
+  'data-grid/accessibility': <IconImage name="yes" title="Available" />,
+  'data-grid/keyboard-nav': <IconImage name="yes" title="Available" />,
+  'data-grid/localization': <IconImage name="yes" title="Available" />,
   'data-grid-pro': <Info value="1 year" />,
-  'date-range-picker': <IconImage name="time" />,
+  'date-range-picker': <IconImage name="time" title="Work in progress" />,
   // Support
-  community: <IconImage name="yes" />,
-  'bugs/features': <Info value={<IconImage name="yes" />} metadata="Priority over Pro" />,
-  'tech-advisory': <IconImage name="time" />,
+  community: <IconImage name="yes" title="Available" />,
+  'bugs/features': (
+    <Info value={<IconImage name="yes" title="Available" />} metadata="Priority over Pro" />
+  ),
+  'tech-advisory': <IconImage name="time" title="Work in progress" />,
   'support-duration': <Info value="1 year" />,
   'response-time': <Info value="2 business days" metadata="1 business day (priority only)" />,
   'pre-screening': <Info value="4 hours" metadata="priority only" />,
-  'issue-escalation': <Info value={<IconImage name="time" />} metadata="priority only" />,
+  'issue-escalation': (
+    <Info value={<IconImage name="time" title="Work in progress" />} metadata="priority only" />
+  ),
 };
 
 const RowCategory = (props: BoxProps) => (

From 78f2e781509c31c809d791b8e086d815843fc12b Mon Sep 17 00:00:00 2001
From: danilo leal <daniloleal09@gmail.com>
Date: Mon, 18 Oct 2021 13:52:01 -0300
Subject: [PATCH 2/2] =?UTF-8?q?available=20=E2=86=92=20included?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/src/components/pricing/PricingTable.tsx | 132 +++++++++----------
 1 file changed, 66 insertions(+), 66 deletions(-)

diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 198ef699088f69..25ad6a47ab910d 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -528,49 +528,49 @@ const rowHeaders: Record<string, React.ReactNode> = {
 
 const communityData: Record<string, React.ReactNode> = {
   // Core
-  '@mui/core': <IconImage name="yes" title="Available" />,
-  '@mui/material': <IconImage name="yes" title="Available" />,
-  '@mui/system': <IconImage name="yes" title="Available" />,
+  '@mui/core': <IconImage name="yes" title="Included" />,
+  '@mui/material': <IconImage name="yes" title="Included" />,
+  '@mui/system': <IconImage name="yes" title="Included" />,
   // Advanced
   'data-grid/column-groups': <IconImage name="time" title="Work in progress" />,
   'data-grid/column-spanning': <IconImage name="time" title="Work in progress" />,
   'data-grid/column-resizing': <IconImage name="no" title="Not included" />,
   'data-grid/column-reorder': <IconImage name="no" title="Not included" />,
   'data-grid/column-pinning': <IconImage name="no" title="Not included" />,
-  'data-grid/row-sorting': <IconImage name="yes" title="Available" />,
-  'data-grid/row-height': <IconImage name="yes" title="Available" />,
+  'data-grid/row-sorting': <IconImage name="yes" title="Included" />,
+  'data-grid/row-height': <IconImage name="yes" title="Included" />,
   'data-grid/row-spanning': <IconImage name="time" title="Work in progress" />,
   'data-grid/row-reordering': <IconImage name="no" title="Not included" />,
-  'data-grid/row-selection': <IconImage name="yes" title="Available" />,
+  'data-grid/row-selection': <IconImage name="yes" title="Included" />,
   'data-grid/row-multiselection': <IconImage name="no" title="Not included" />,
   'data-grid/row-rangeselection': <IconImage name="no" title="Not included" />,
   'data-grid/filter-quick': <IconImage name="time" title="Work in progress" />,
-  'data-grid/filter-column': <IconImage name="yes" title="Available" />,
+  'data-grid/filter-column': <IconImage name="yes" title="Included" />,
   'data-grid/filter-multicolumn': <IconImage name="no" title="Not included" />,
-  'data-grid/pagination': <IconImage name="yes" title="Available" />,
+  'data-grid/pagination': <IconImage name="yes" title="Included" />,
   'data-grid/pagination-large': <IconImage name="no" title="Not included" />,
-  'data-grid/edit-row': <IconImage name="yes" title="Available" />,
-  'data-grid/edit-cell': <IconImage name="yes" title="Available" />,
-  'data-grid/file-csv': <IconImage name="yes" title="Available" />,
+  'data-grid/edit-row': <IconImage name="yes" title="Included" />,
+  'data-grid/edit-cell': <IconImage name="yes" title="Included" />,
+  'data-grid/file-csv': <IconImage name="yes" title="Included" />,
   'data-grid/file-print': <IconImage name="time" title="Work in progress" />,
   'data-grid/file-clipboard': <IconImage name="no" title="Not included" />,
   'data-grid/file-excel': <IconImage name="no" title="Not included" />,
-  'data-grid/customizable-components': <IconImage name="yes" title="Available" />,
-  'data-grid/virtualize-column': <IconImage name="yes" title="Available" />,
+  'data-grid/customizable-components': <IconImage name="yes" title="Included" />,
+  'data-grid/virtualize-column': <IconImage name="yes" title="Included" />,
   'data-grid/virtualize-row': <IconImage name="no" title="Not included" />,
   'data-grid/tree-data': <IconImage name="no" title="Not included" />,
   'data-grid/master-detail': <IconImage name="no" title="Not included" />,
   'data-grid/grouping': <IconImage name="no" title="Not included" />,
   'data-grid/aggregation': <IconImage name="no" title="Not included" />,
   'data-grid/pivoting': <IconImage name="no" title="Not included" />,
-  'data-grid/accessibility': <IconImage name="yes" title="Available" />,
-  'data-grid/keyboard-nav': <IconImage name="yes" title="Available" />,
-  'data-grid/localization': <IconImage name="yes" title="Available" />,
+  'data-grid/accessibility': <IconImage name="yes" title="Included" />,
+  'data-grid/keyboard-nav': <IconImage name="yes" title="Included" />,
+  'data-grid/localization': <IconImage name="yes" title="Included" />,
   'data-grid-pro': <IconImage name="no" title="Not included" />,
   'date-range-picker': <IconImage name="no" title="Not included" />,
   // Support
-  community: <IconImage name="yes" title="Available" />,
-  'bugs/features': <IconImage name="yes" title="Available" />,
+  community: <IconImage name="yes" title="Included" />,
+  'bugs/features': <IconImage name="yes" title="Included" />,
   'tech-advisory': <IconImage name="no" title="Not included" />,
   'support-duration': <IconImage name="no" title="Not included" />,
   'response-time': <IconImage name="no" title="Not included" />,
@@ -580,50 +580,50 @@ const communityData: Record<string, React.ReactNode> = {
 
 const proData: Record<string, React.ReactNode> = {
   // Core
-  '@mui/core': <IconImage name="yes" title="Available" />,
-  '@mui/material': <IconImage name="yes" title="Available" />,
-  '@mui/system': <IconImage name="yes" title="Available" />,
+  '@mui/core': <IconImage name="yes" title="Included" />,
+  '@mui/material': <IconImage name="yes" title="Included" />,
+  '@mui/system': <IconImage name="yes" title="Included" />,
   // Advanced
   'data-grid/column-groups': <IconImage name="time" title="Work in progress" />,
   'data-grid/column-spanning': <IconImage name="time" title="Work in progress" />,
-  'data-grid/column-resizing': <IconImage name="yes" title="Available" />,
-  'data-grid/column-reorder': <IconImage name="yes" title="Available" />,
+  'data-grid/column-resizing': <IconImage name="yes" title="Included" />,
+  'data-grid/column-reorder': <IconImage name="yes" title="Included" />,
   'data-grid/column-pinning': <IconImage name="time" title="Work in progress" />,
-  'data-grid/row-sorting': <IconImage name="yes" title="Available" />,
-  'data-grid/row-height': <IconImage name="yes" title="Available" />,
+  'data-grid/row-sorting': <IconImage name="yes" title="Included" />,
+  'data-grid/row-height': <IconImage name="yes" title="Included" />,
   'data-grid/row-spanning': <IconImage name="time" title="Work in progress" />,
   'data-grid/row-reordering': <IconImage name="time" title="Work in progress" />,
-  'data-grid/row-selection': <IconImage name="yes" title="Available" />,
-  'data-grid/row-multiselection': <IconImage name="yes" title="Available" />,
+  'data-grid/row-selection': <IconImage name="yes" title="Included" />,
+  'data-grid/row-multiselection': <IconImage name="yes" title="Included" />,
   'data-grid/row-rangeselection': <IconImage name="no" title="Not included" />,
   'data-grid/filter-quick': <IconImage name="time" title="Work in progress" />,
-  'data-grid/filter-column': <IconImage name="yes" title="Available" />,
-  'data-grid/filter-multicolumn': <IconImage name="yes" title="Available" />,
-  'data-grid/pagination': <IconImage name="yes" title="Available" />,
-  'data-grid/pagination-large': <IconImage name="yes" title="Available" />,
-  'data-grid/edit-row': <IconImage name="yes" title="Available" />,
-  'data-grid/edit-cell': <IconImage name="yes" title="Available" />,
-  'data-grid/file-csv': <IconImage name="yes" title="Available" />,
+  'data-grid/filter-column': <IconImage name="yes" title="Included" />,
+  'data-grid/filter-multicolumn': <IconImage name="yes" title="Included" />,
+  'data-grid/pagination': <IconImage name="yes" title="Included" />,
+  'data-grid/pagination-large': <IconImage name="yes" title="Included" />,
+  'data-grid/edit-row': <IconImage name="yes" title="Included" />,
+  'data-grid/edit-cell': <IconImage name="yes" title="Included" />,
+  'data-grid/file-csv': <IconImage name="yes" title="Included" />,
   'data-grid/file-print': <IconImage name="time" title="Work in progress" />,
   'data-grid/file-clipboard': <IconImage name="time" title="Work in progress" />,
   'data-grid/file-excel': <IconImage name="no" title="Not included" />,
-  'data-grid/customizable-components': <IconImage name="yes" title="Available" />,
-  'data-grid/virtualize-column': <IconImage name="yes" title="Available" />,
-  'data-grid/virtualize-row': <IconImage name="yes" title="Available" />,
+  'data-grid/customizable-components': <IconImage name="yes" title="Included" />,
+  'data-grid/virtualize-column': <IconImage name="yes" title="Included" />,
+  'data-grid/virtualize-row': <IconImage name="yes" title="Included" />,
   'data-grid/tree-data': <IconImage name="time" title="Work in progress" />,
   'data-grid/master-detail': <IconImage name="time" title="Work in progress" />,
   'data-grid/grouping': <IconImage name="no" title="Not included" />,
   'data-grid/aggregation': <IconImage name="no" title="Not included" />,
   'data-grid/pivoting': <IconImage name="no" title="Not included" />,
-  'data-grid/accessibility': <IconImage name="yes" title="Available" />,
-  'data-grid/keyboard-nav': <IconImage name="yes" title="Available" />,
-  'data-grid/localization': <IconImage name="yes" title="Available" />,
+  'data-grid/accessibility': <IconImage name="yes" title="Included" />,
+  'data-grid/keyboard-nav': <IconImage name="yes" title="Included" />,
+  'data-grid/localization': <IconImage name="yes" title="Included" />,
   'data-grid-pro': <Info value="1 year" />,
   'date-range-picker': <IconImage name="time" title="Work in progress" />,
   // Support
-  community: <IconImage name="yes" title="Available" />,
+  community: <IconImage name="yes" title="Included" />,
   'bugs/features': (
-    <Info value={<IconImage name="yes" title="Available" />} metadata="Priority over Community" />
+    <Info value={<IconImage name="yes" title="Included" />} metadata="Priority over Community" />
   ),
   'tech-advisory': <IconImage name="no" title="Not included" />,
   'support-duration': <Info value="1 year" />,
@@ -634,50 +634,50 @@ const proData: Record<string, React.ReactNode> = {
 
 const premiumData: Record<string, React.ReactNode> = {
   // Core
-  '@mui/core': <IconImage name="yes" title="Available" />,
-  '@mui/material': <IconImage name="yes" title="Available" />,
-  '@mui/system': <IconImage name="yes" title="Available" />,
+  '@mui/core': <IconImage name="yes" title="Included" />,
+  '@mui/material': <IconImage name="yes" title="Included" />,
+  '@mui/system': <IconImage name="yes" title="Included" />,
   // Advanced
   'data-grid/column-groups': <IconImage name="time" title="Work in progress" />,
   'data-grid/column-spanning': <IconImage name="time" title="Work in progress" />,
-  'data-grid/column-resizing': <IconImage name="yes" title="Available" />,
-  'data-grid/column-reorder': <IconImage name="yes" title="Available" />,
+  'data-grid/column-resizing': <IconImage name="yes" title="Included" />,
+  'data-grid/column-reorder': <IconImage name="yes" title="Included" />,
   'data-grid/column-pinning': <IconImage name="time" title="Work in progress" />,
-  'data-grid/row-sorting': <IconImage name="yes" title="Available" />,
-  'data-grid/row-height': <IconImage name="yes" title="Available" />,
+  'data-grid/row-sorting': <IconImage name="yes" title="Included" />,
+  'data-grid/row-height': <IconImage name="yes" title="Included" />,
   'data-grid/row-spanning': <IconImage name="time" title="Work in progress" />,
   'data-grid/row-reordering': <IconImage name="time" title="Work in progress" />,
-  'data-grid/row-selection': <IconImage name="yes" title="Available" />,
-  'data-grid/row-multiselection': <IconImage name="yes" title="Available" />,
+  'data-grid/row-selection': <IconImage name="yes" title="Included" />,
+  'data-grid/row-multiselection': <IconImage name="yes" title="Included" />,
   'data-grid/row-rangeselection': <IconImage name="time" title="Work in progress" />,
   'data-grid/filter-quick': <IconImage name="time" title="Work in progress" />,
-  'data-grid/filter-column': <IconImage name="yes" title="Available" />,
-  'data-grid/filter-multicolumn': <IconImage name="yes" title="Available" />,
-  'data-grid/pagination': <IconImage name="yes" title="Available" />,
-  'data-grid/pagination-large': <IconImage name="yes" title="Available" />,
-  'data-grid/edit-row': <IconImage name="yes" title="Available" />,
-  'data-grid/edit-cell': <IconImage name="yes" title="Available" />,
-  'data-grid/file-csv': <IconImage name="yes" title="Available" />,
+  'data-grid/filter-column': <IconImage name="yes" title="Included" />,
+  'data-grid/filter-multicolumn': <IconImage name="yes" title="Included" />,
+  'data-grid/pagination': <IconImage name="yes" title="Included" />,
+  'data-grid/pagination-large': <IconImage name="yes" title="Included" />,
+  'data-grid/edit-row': <IconImage name="yes" title="Included" />,
+  'data-grid/edit-cell': <IconImage name="yes" title="Included" />,
+  'data-grid/file-csv': <IconImage name="yes" title="Included" />,
   'data-grid/file-print': <IconImage name="time" title="Work in progress" />,
   'data-grid/file-clipboard': <IconImage name="time" title="Work in progress" />,
   'data-grid/file-excel': <IconImage name="no" title="Not included" />,
-  'data-grid/customizable-components': <IconImage name="yes" title="Available" />,
-  'data-grid/virtualize-column': <IconImage name="yes" title="Available" />,
-  'data-grid/virtualize-row': <IconImage name="yes" title="Available" />,
+  'data-grid/customizable-components': <IconImage name="yes" title="Included" />,
+  'data-grid/virtualize-column': <IconImage name="yes" title="Included" />,
+  'data-grid/virtualize-row': <IconImage name="yes" title="Included" />,
   'data-grid/tree-data': <IconImage name="time" title="Work in progress" />,
   'data-grid/master-detail': <IconImage name="time" title="Work in progress" />,
   'data-grid/grouping': <IconImage name="time" title="Work in progress" />,
   'data-grid/aggregation': <IconImage name="time" title="Work in progress" />,
   'data-grid/pivoting': <IconImage name="time" title="Work in progress" />,
-  'data-grid/accessibility': <IconImage name="yes" title="Available" />,
-  'data-grid/keyboard-nav': <IconImage name="yes" title="Available" />,
-  'data-grid/localization': <IconImage name="yes" title="Available" />,
+  'data-grid/accessibility': <IconImage name="yes" title="Included" />,
+  'data-grid/keyboard-nav': <IconImage name="yes" title="Included" />,
+  'data-grid/localization': <IconImage name="yes" title="Included" />,
   'data-grid-pro': <Info value="1 year" />,
   'date-range-picker': <IconImage name="time" title="Work in progress" />,
   // Support
-  community: <IconImage name="yes" title="Available" />,
+  community: <IconImage name="yes" title="Included" />,
   'bugs/features': (
-    <Info value={<IconImage name="yes" title="Available" />} metadata="Priority over Pro" />
+    <Info value={<IconImage name="yes" title="Included" />} metadata="Priority over Pro" />
   ),
   'tech-advisory': <IconImage name="time" title="Work in progress" />,
   'support-duration': <Info value="1 year" />,