chore: lints, snapshots, type docs etc

twilio-labs · Feb 21, 2024 · 71a4ca9 · 71a4ca9
1 parent 3b2476d
commit 71a4ca9
Show file tree

Hide file tree

Showing 12 changed files with 66 additions and 40 deletions.
diff --git a/packages/paste-core/components/spinner/type-docs.json b/packages/paste-core/components/spinner/type-docs.json
@@ -381,7 +381,7 @@
       "externalProp": true
     },
     "color": {
-      "type": "\"colorText\" | \"colorTextBrandHighlight\" | \"colorTextBrandInverse\" | \"colorTextDecorative10\" | \"colorTextDecorative20\" | \"colorTextDecorative30\" | \"colorTextDecorative40\" | ... 57 more ... | { ...; }",
+      "type": "\"colorText\" | \"colorTextBrand\" | \"colorTextBrandHighlight\" | \"colorTextBrandInverse\" | \"colorTextDecorative10\" | \"colorTextDecorative20\" | \"colorTextDecorative30\" | \"colorTextDecorative40\" | ... 57 more ... | { ...; }",
       "defaultValue": "currentColor",
       "required": false,
       "externalProp": false,

diff --git a/packages/paste-core/primitives/box/type-docs.json b/packages/paste-core/primitives/box/type-docs.json
@@ -727,7 +727,7 @@
       "description": "Responsive prop for the CSS `background-attachment` property"
     },
     "backgroundColor": {
-      "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | \"colorBackgroundBrandHighlight\" | ... 52 more ... | { ...; }",
+      "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | \"colorBackgroundBrand10\" | ... 55 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
@@ -985,7 +985,7 @@
       "description": "Responsive style prop for the CSS `clip` property"
     },
     "color": {
-      "type": "\"inherit\" | \"transparent\" | \"colorText\" | \"colorTextBrandHighlight\" | \"colorTextBrandInverse\" | \"colorTextDecorative10\" | \"colorTextDecorative20\" | \"colorTextDecorative30\" | ... 56 more ... | { ...; }",
+      "type": "\"inherit\" | \"transparent\" | \"colorText\" | \"colorTextBrand\" | \"colorTextBrandHighlight\" | \"colorTextBrandInverse\" | \"colorTextDecorative10\" | \"colorTextDecorative20\" | \"colorTextDecorative30\" | ... 56 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,

diff --git a/packages/paste-core/primitives/sibling-box/type-docs.json b/packages/paste-core/primitives/sibling-box/type-docs.json
@@ -829,7 +829,7 @@
       "description": "Responsive prop for the CSS `background-attachment` property"
     },
     "backgroundColor": {
-      "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | \"colorBackgroundBrandHighlight\" | ... 52 more ... | { ...; }",
+      "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | \"colorBackgroundBrand10\" | ... 55 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
@@ -1087,7 +1087,7 @@
       "description": "Responsive style prop for the CSS `clip` property"
     },
     "color": {
-      "type": "\"inherit\" | \"transparent\" | \"colorText\" | \"colorTextBrandHighlight\" | \"colorTextBrandInverse\" | \"colorTextDecorative10\" | \"colorTextDecorative20\" | \"colorTextDecorative30\" | ... 56 more ... | { ...; }",
+      "type": "\"inherit\" | \"transparent\" | \"colorText\" | \"colorTextBrand\" | \"colorTextBrandHighlight\" | \"colorTextBrandInverse\" | \"colorTextDecorative10\" | \"colorTextDecorative20\" | \"colorTextDecorative30\" | ... 56 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,

diff --git a/packages/paste-core/primitives/text/type-docs.json b/packages/paste-core/primitives/text/type-docs.json
@@ -544,7 +544,7 @@
       "externalProp": true
     },
     "color": {
-      "type": "\"inherit\" | \"transparent\" | \"colorText\" | \"colorTextBrandHighlight\" | \"colorTextBrandInverse\" | \"colorTextDecorative10\" | \"colorTextDecorative20\" | \"colorTextDecorative30\" | ... 56 more ... | { ...; }",
+      "type": "\"inherit\" | \"transparent\" | \"colorText\" | \"colorTextBrand\" | \"colorTextBrandHighlight\" | \"colorTextBrandInverse\" | \"colorTextDecorative10\" | \"colorTextDecorative20\" | \"colorTextDecorative30\" | ... 56 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,

diff --git a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
@@ -47,10 +47,13 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-background-decorative-10-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-primary-weak\\": \\"rgb(57, 71, 98)\\",
+  \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
   \\"color-background-stronger\\": \\"rgb(96, 107, 133)\\",
+  \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
   \\"color-background-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-background-brand-highlight-weakest\\": \\"rgba(242, 47, 70, 0.1)\\",
   \\"color-background-strongest\\": \\"rgb(225, 227, 234)\\",
+  \\"color-background-brand-10\\": \\"rgb(242, 190, 90)\\",
   \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-overlay\\": \\"rgba(18, 28, 45, 0.9)\\",
@@ -376,6 +379,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-text-link\\": \\"rgb(0, 140, 255)\\",
   \\"color-text-icon-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-text-neutral\\": \\"rgb(204, 228, 255)\\",
+  \\"color-text-brand\\": \\"rgb(18, 28, 45)\\",
   \\"color-text-link-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-text-error\\": \\"rgb(235, 86, 86)\\",
   \\"color-text-icon-inverse\\": \\"rgb(225, 227, 234)\\",
@@ -467,10 +471,13 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-background-decorative-10-weakest\\": \\"rgb(244, 244, 246)\\",
   \\"color-background\\": \\"rgb(244, 244, 246)\\",
   \\"color-background-primary-weak\\": \\"rgb(153, 205, 255)\\",
+  \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
   \\"color-background-stronger\\": \\"rgb(136, 145, 170)\\",
+  \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
   \\"color-background-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-background-brand-highlight-weakest\\": \\"rgba(242, 47, 70, 0.1)\\",
   \\"color-background-strongest\\": \\"rgb(75, 86, 113)\\",
+  \\"color-background-brand-10\\": \\"rgb(242, 190, 90)\\",
   \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-overlay\\": \\"rgba(6, 3, 58, 0.4)\\",
@@ -796,6 +803,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-text-link\\": \\"rgb(2, 99, 224)\\",
   \\"color-text-icon-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-text-neutral\\": \\"rgb(0, 20, 137)\\",
+  \\"color-text-brand\\": \\"rgb(18, 28, 45)\\",
   \\"color-text-link-strongest\\": \\"rgb(6, 3, 58)\\",
   \\"color-text-error\\": \\"rgb(214, 31, 31)\\",
   \\"color-text-icon-inverse\\": \\"rgb(136, 145, 170)\\",
@@ -887,10 +895,13 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-background-decorative-10-weakest\\": \\"rgb(244, 244, 246)\\",
   \\"color-background\\": \\"rgb(244, 244, 246)\\",
   \\"color-background-primary-weak\\": \\"rgb(153, 205, 255)\\",
+  \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
   \\"color-background-stronger\\": \\"rgb(136, 145, 170)\\",
+  \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
   \\"color-background-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-background-brand-highlight-weakest\\": \\"rgba(242, 47, 70, 0.1)\\",
   \\"color-background-strongest\\": \\"rgb(75, 86, 113)\\",
+  \\"color-background-brand-10\\": \\"rgb(242, 190, 90)\\",
   \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-overlay\\": \\"rgba(6, 3, 58, 0.4)\\",
@@ -1216,6 +1227,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-text-link\\": \\"rgb(2, 99, 224)\\",
   \\"color-text-icon-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-text-neutral\\": \\"rgb(0, 20, 137)\\",
+  \\"color-text-brand\\": \\"rgb(18, 28, 45)\\",
   \\"color-text-link-strongest\\": \\"rgb(6, 3, 58)\\",
   \\"color-text-error\\": \\"rgb(214, 31, 31)\\",
   \\"color-text-icon-inverse\\": \\"rgb(136, 145, 170)\\",
@@ -1288,7 +1300,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-background-success-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-destructive-strongest\\": \\"rgb(254, 236, 236)\\",
   \\"color-background-error-strong\\": \\"rgb(245, 138, 138)\\",
-  \\"color-background-brand-strong\\": \\"rgb(31, 48, 76)\\",
+  \\"color-background-brand-strong\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-brand\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-error\\": \\"rgb(214, 31, 31)\\",
   \\"color-background-neutral-weakest\\": \\"rgb(18, 28, 45)\\",
@@ -1307,10 +1319,13 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-background-decorative-10-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-primary-weak\\": \\"rgb(57, 71, 98)\\",
+  \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
   \\"color-background-stronger\\": \\"rgb(96, 107, 133)\\",
+  \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
   \\"color-background-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-background-brand-highlight-weakest\\": \\"rgba(242, 47, 70, 0.1)\\",
   \\"color-background-strongest\\": \\"rgb(225, 227, 234)\\",
+  \\"color-background-brand-10\\": \\"rgb(242, 190, 90)\\",
   \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-overlay\\": \\"rgba(18, 28, 45, 0.9)\\",
@@ -1636,6 +1651,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-text-link\\": \\"rgb(0, 140, 255)\\",
   \\"color-text-icon-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-text-neutral\\": \\"rgb(102, 179, 255)\\",
+  \\"color-text-brand\\": \\"rgb(18, 28, 45)\\",
   \\"color-text-link-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-text-error\\": \\"rgb(235, 86, 86)\\",
   \\"color-text-icon-inverse\\": \\"rgb(136, 145, 170)\\",
@@ -1708,8 +1724,8 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-background-success-weakest\\": \\"rgb(237, 253, 243)\\",
   \\"color-background-destructive-strongest\\": \\"rgb(49, 12, 12)\\",
   \\"color-background-error-strong\\": \\"rgb(117, 12, 12)\\",
-  \\"color-background-brand-strong\\": \\"rgb(3, 11, 93)\\",
-  \\"color-background-brand\\": \\"rgb(0, 20, 137)\\",
+  \\"color-background-brand-strong\\": \\"rgb(18, 28, 45)\\",
+  \\"color-background-brand\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-error\\": \\"rgb(199, 35, 35)\\",
   \\"color-background-neutral-weakest\\": \\"rgb(244, 249, 255)\\",
   \\"color-background-available\\": \\"rgb(20, 176, 83)\\",
@@ -1727,17 +1743,20 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-background-decorative-10-weakest\\": \\"rgb(244, 244, 246)\\",
   \\"color-background\\": \\"rgb(244, 244, 246)\\",
   \\"color-background-primary-weak\\": \\"rgb(153, 205, 255)\\",
+  \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
   \\"color-background-stronger\\": \\"rgb(136, 145, 170)\\",
+  \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
   \\"color-background-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-background-brand-highlight-weakest\\": \\"rgba(242, 47, 70, 0.1)\\",
   \\"color-background-strongest\\": \\"rgb(75, 86, 113)\\",
+  \\"color-background-brand-10\\": \\"rgb(242, 190, 90)\\",
   \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-overlay\\": \\"rgba(96, 107, 133, 0.5)\\",
   \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-error-stronger\\": \\"rgb(74, 11, 11)\\",
-  \\"color-background-brand-stronger\\": \\"rgb(6, 3, 58)\\",
+  \\"color-background-brand-stronger\\": \\"rgb(18, 28, 45)\\",
   \\"color-border-error-stronger\\": \\"rgb(74, 11, 11)\\",
   \\"color-border-warning-weak\\": \\"rgb(255, 179, 122)\\",
   \\"color-border-decorative-40-weaker\\": \\"rgb(231, 220, 250)\\",
@@ -2056,6 +2075,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-text-link\\": \\"rgb(2, 99, 224)\\",
   \\"color-text-icon-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-text-neutral\\": \\"rgb(3, 11, 93)\\",
+  \\"color-text-brand\\": \\"rgb(18, 28, 45)\\",
   \\"color-text-link-strongest\\": \\"rgb(6, 3, 58)\\",
   \\"color-text-error\\": \\"rgb(199, 35, 35)\\",
   \\"color-text-icon-inverse\\": \\"rgb(136, 145, 170)\\",

diff --git a/packages/paste-icons/__test__/__snapshots__/icons.spec.tsx.snap b/packages/paste-icons/__test__/__snapshots__/icons.spec.tsx.snap
@@ -14,9 +14,11 @@ Array [
   "ArrowDownIcon",
   "ArrowForwardIcon",
   "ArrowUpIcon",
+  "ArtificialIntelligenceIcon",
   "AttachIcon",
   "AttachmentIcon",
   "AutomaticUpdatesIcon",
+  "AvailableIcon",
   "BoldIcon",
   "BuildIcon",
   "BuiltInIcon",
@@ -213,6 +215,7 @@ Array [
   "ProductReverseETLIcon",
   "ProductSDKIcon",
   "ProductSegmentIcon",
+  "ProductSendGridIcon",
   "ProductSettingsIcon",
   "ProductSourceSchemaIcon",
   "ProductSourcesIcon",

diff --git a/packages/paste-icons/src/ArtificialIntelligenceIcon.tsx b/packages/paste-icons/src/ArtificialIntelligenceIcon.tsx
@@ -1,23 +1,23 @@
+import { useUID } from "@twilio-paste/uid-library";
 /**
  * This file was automatically generated with @twilio-labs/svg-to-react
  */
-import * as React from 'react';
-import {useUID} from '@twilio-paste/uid-library';
+import * as React from "react";
 
-import {IconWrapper} from './helpers/IconWrapper';
-import type {IconWrapperProps} from './helpers/IconWrapper';
+import { IconWrapper } from "./helpers/IconWrapper";
+import type { IconWrapperProps } from "./helpers/IconWrapper";
 
 export interface ArtificialIntelligenceIconProps extends IconWrapperProps {
   title?: string;
   decorative: boolean;
 }
 
 const ArtificialIntelligenceIcon = React.forwardRef<HTMLElement, ArtificialIntelligenceIconProps>(
-  ({as, display, element = 'ICON', size, color, title, decorative}, ref) => {
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
     const titleId = `ArtificialIntelligenceIcon-${useUID()}`;
 
     if (!decorative && title == null) {
-      throw new Error('[ArtificialIntelligenceIcon]: Missing a title for non-decorative icon.');
+      throw new Error("[ArtificialIntelligenceIcon]: Missing a title for non-decorative icon.");
     }
 
     return (
@@ -29,6 +29,7 @@ const ArtificialIntelligenceIcon = React.forwardRef<HTMLElement, ArtificialIntel
           height="100%"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
           aria-labelledby={titleId}
         >
           {title ? <title id={titleId}>{title}</title> : null}
@@ -45,8 +46,8 @@ const ArtificialIntelligenceIcon = React.forwardRef<HTMLElement, ArtificialIntel
         </svg>
       </IconWrapper>
     );
-  }
+  },
 );
 
-ArtificialIntelligenceIcon.displayName = 'ArtificialIntelligenceIcon';
-export {ArtificialIntelligenceIcon};
+ArtificialIntelligenceIcon.displayName = "ArtificialIntelligenceIcon";
+export { ArtificialIntelligenceIcon };
diff --git a/packages/paste-icons/src/AvailableIcon.tsx b/packages/paste-icons/src/AvailableIcon.tsx
@@ -1,23 +1,23 @@
+import { useUID } from "@twilio-paste/uid-library";
 /**
  * This file was automatically generated with @twilio-labs/svg-to-react
  */
-import * as React from 'react';
-import {useUID} from '@twilio-paste/uid-library';
+import * as React from "react";
 
-import {IconWrapper} from './helpers/IconWrapper';
-import type {IconWrapperProps} from './helpers/IconWrapper';
+import { IconWrapper } from "./helpers/IconWrapper";
+import type { IconWrapperProps } from "./helpers/IconWrapper";
 
 export interface AvailableIconProps extends IconWrapperProps {
   title?: string;
   decorative: boolean;
 }
 
 const AvailableIcon = React.forwardRef<HTMLElement, AvailableIconProps>(
-  ({as, display, element = 'ICON', size, color, title, decorative}, ref) => {
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
     const titleId = `AvailableIcon-${useUID()}`;
 
     if (!decorative && title == null) {
-      throw new Error('[AvailableIcon]: Missing a title for non-decorative icon.');
+      throw new Error("[AvailableIcon]: Missing a title for non-decorative icon.");
     }
 
     return (
@@ -29,6 +29,7 @@ const AvailableIcon = React.forwardRef<HTMLElement, AvailableIconProps>(
           height="100%"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
           aria-labelledby={titleId}
         >
           {title ? <title id={titleId}>{title}</title> : null}
@@ -41,8 +42,8 @@ const AvailableIcon = React.forwardRef<HTMLElement, AvailableIconProps>(
         </svg>
       </IconWrapper>
     );
-  }
+  },
 );
 
-AvailableIcon.displayName = 'AvailableIcon';
-export {AvailableIcon};
+AvailableIcon.displayName = "AvailableIcon";
+export { AvailableIcon };
diff --git a/packages/paste-icons/src/ProductSendGridIcon.tsx b/packages/paste-icons/src/ProductSendGridIcon.tsx
@@ -1,23 +1,23 @@
+import { useUID } from "@twilio-paste/uid-library";
 /**
  * This file was automatically generated with @twilio-labs/svg-to-react
  */
-import * as React from 'react';
-import {useUID} from '@twilio-paste/uid-library';
+import * as React from "react";
 
-import {IconWrapper} from './helpers/IconWrapper';
-import type {IconWrapperProps} from './helpers/IconWrapper';
+import { IconWrapper } from "./helpers/IconWrapper";
+import type { IconWrapperProps } from "./helpers/IconWrapper";
 
 export interface ProductSendGridIconProps extends IconWrapperProps {
   title?: string;
   decorative: boolean;
 }
 
 const ProductSendGridIcon = React.forwardRef<HTMLElement, ProductSendGridIconProps>(
-  ({as, display, element = 'ICON', size, color, title, decorative}, ref) => {
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
     const titleId = `ProductSendGridIcon-${useUID()}`;
 
     if (!decorative && title == null) {
-      throw new Error('[ProductSendGridIcon]: Missing a title for non-decorative icon.');
+      throw new Error("[ProductSendGridIcon]: Missing a title for non-decorative icon.");
     }
 
     return (
@@ -29,6 +29,7 @@ const ProductSendGridIcon = React.forwardRef<HTMLElement, ProductSendGridIconPro
           height="100%"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
           aria-labelledby={titleId}
         >
           {title ? <title id={titleId}>{title}</title> : null}
@@ -39,8 +40,8 @@ const ProductSendGridIcon = React.forwardRef<HTMLElement, ProductSendGridIconPro
         </svg>
       </IconWrapper>
     );
-  }
+  },
 );
 
-ProductSendGridIcon.displayName = 'ProductSendGridIcon';
-export {ProductSendGridIcon};
+ProductSendGridIcon.displayName = "ProductSendGridIcon";
+export { ProductSendGridIcon };