norma-library 0.6.87 → 0.6.88

package/dist/esm/components/ProductCard/ProductCard.js

@@ -18,15 +18,17 @@ export var ProductCard = function (_a) {
   */
     return (React.createElement(ProductCardStyle, { disabled: disabled, "$bColor": icon === null || icon === void 0 ? void 0 : icon.iconColor, hasBorder: hasBorder },
         React.createElement(Card, { variant: "outlined", onClick: function () { return onClick && onClick(); } },
-            (favorite === null || favorite === void 0 ? void 0 : favorite.flagged) && (React.createElement(Grid, { container: true, justifyContent: 'flex-end', alignItems: 'flex-start', position: 'relative' },
+            favorite && (React.createElement(Grid, { container: true, justifyContent: 'flex-end', alignItems: 'flex-start', position: 'relative' },
                 React.createElement(Grid, { item: true },
                     React.createElement(IconButton, { sx: {
                             padding: 0,
                             position: 'absolute',
-                            top: '10px',
-                            right: '5px',
-                        }, "aria-label": "favorite", onClick: favorite.onFlag, color: favorite.flagged ? 'primary' : 'inherit', cursor: "pointer" },
-                        React.createElement(GradeIcon, null))))),
+                            right: '2px',
+                        }, "aria-label": "favorite", onClick: favorite.onFlag, cursor: "pointer" },
+                        React.createElement(GradeIcon, { sx: {
+                                color: favorite.flagged ? '#FDDA0D' : '#666',
+                                fontSize: 24,
+                            } }))))),
             React.createElement(TitleContainer, null,
                 React.createElement(IconCardStyle, { "$iColor": (icon === null || icon === void 0 ? void 0 : icon.iconColor) || "", "$bColor": color },
                     React.createElement(Icons, { icon: icon === null || icon === void 0 ? void 0 : icon.iconName, color: icon === null || icon === void 0 ? void 0 : icon.iconColor, scale: icon === null || icon === void 0 ? void 0 : icon.scale, width: icon === null || icon === void 0 ? void 0 : icon.iconWidth, height: icon === null || icon === void 0 ? void 0 : icon.iconHeight })),

package/dist/esm/components/ProductCard/ProductCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProductCard.js","sourceRoot":"","sources":["../../../../src/components/ProductCard/ProductCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACtF,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,SAAS,MAAM,2BAA2B,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAIhC,MAAM,CAAC,IAAM,WAAW,GAA+B,UAAC,EAUvD;;IATC,wBAAwB;IACxB,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,iBAAgB,EAAhB,SAAS,mBAAG,IAAI,KAAA,EAChB,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,QAAQ,cAAA;IAGR;;;;;;IAMA;IACA,OAAO,CACL,oBAAC,gBAAgB,IAAC,QAAQ,EAAE,QAAQ,aAAW,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,EAAE,SAAS,EAAE,SAAS;QAClF,oBAAC,IAAI,IACH,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,cAAM,OAAA,OAAO,IAAI,OAAO,EAAE,EAApB,CAAoB;YAElC,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,KAAI,CACpB,oBAAC,IAAI,IAAC,SAAS,QAAC,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,UAAU;gBACxF,oBAAC,IAAI,IAAC,IAAI;oBACR,oBAAC,UAAU,IACT,EAAE,EAAE;4BACF,OAAO,EAAE,CAAC;4BACV,QAAQ,EAAE,UAAU;4BACpB,GAAG,EAAE,MAAM;4BACX,KAAK,EAAE,KAAK;yBACb,gBACU,UAAU,EACrB,OAAO,EAAE,QAAQ,CAAC,MAAM,EACxB,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAC/C,MAAM,EAAC,SAAS;wBAEhB,oBAAC,SAAS,OAAG,CACF,CACR,CACF,CACR;YAED,oBAAC,cAAc;gBACb,oBAAC,aAAa,eACH,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,KAAI,EAAE,aACrB,KAAK;oBAEd,oBAAC,KAAK,IAAC,IAAI,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAoB,EAAE,KAAK,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,EAAE,KAAK,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAkB,EAAE,KAAK,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,EAAE,MAAM,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,GAAI,CACxI;gBAChB,2BAAG,SAAS,EAAC,OAAO,IAAE,KAAK,CAAK,CACjB;YAEjB,2BAAG,SAAS,EAAC,aAAa,IACvB,WAAW,CACV,CACC,CACU,CACpB,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"ProductCard.js","sourceRoot":"","sources":["../../../../src/components/ProductCard/ProductCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACtF,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,SAAS,MAAM,2BAA2B,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAIhC,MAAM,CAAC,IAAM,WAAW,GAA+B,UAAC,EAUvD;;IATC,wBAAwB;IACxB,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,iBAAgB,EAAhB,SAAS,mBAAG,IAAI,KAAA,EAChB,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,QAAQ,cAAA;IAGR;;;;;;IAMA;IACA,OAAO,CACL,oBAAC,gBAAgB,IAAC,QAAQ,EAAE,QAAQ,aAAW,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,EAAE,SAAS,EAAE,SAAS;QAClF,oBAAC,IAAI,IACH,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,cAAM,OAAA,OAAO,IAAI,OAAO,EAAE,EAApB,CAAoB;YAElC,QAAQ,IAAI,CACX,oBAAC,IAAI,IAAC,SAAS,QAAC,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,UAAU;gBACxF,oBAAC,IAAI,IAAC,IAAI;oBACR,oBAAC,UAAU,IACT,EAAE,EAAE;4BACF,OAAO,EAAE,CAAC;4BACV,QAAQ,EAAE,UAAU;4BACpB,KAAK,EAAE,KAAK;yBACb,gBACU,UAAU,EACrB,OAAO,EAAE,QAAQ,CAAC,MAAM,EACxB,MAAM,EAAC,SAAS;wBAEhB,oBAAC,SAAS,IAAC,EAAE,EAAE;gCACb,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;gCAC5C,QAAQ,EAAE,EAAE;6BACb,GAAG,CACO,CACR,CACF,CACR;YAED,oBAAC,cAAc;gBACb,oBAAC,aAAa,eACH,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,KAAI,EAAE,aACrB,KAAK;oBAEd,oBAAC,KAAK,IAAC,IAAI,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAoB,EAAE,KAAK,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,EAAE,KAAK,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAkB,EAAE,KAAK,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,EAAE,MAAM,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,GAAI,CACxI;gBAChB,2BAAG,SAAS,EAAC,OAAO,IAAE,KAAK,CAAK,CACjB;YAEjB,2BAAG,SAAS,EAAC,aAAa,IACvB,WAAW,CACV,CACC,CACU,CACpB,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/ProductCard/ProductCard.style.js

@@ -1,7 +1,7 @@
 import { __makeTemplateObject } from "tslib";
 import styled from "@emotion/styled";
 import { pxToRem } from "../../utils/pxToRem";
-export var ProductCardStyle = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([" \n  max-width: 380px;\n  cursor: ", ";\n  opacity: ", ";\n  height: 100%;\n  border-left: 7px solid ", " !important;\n  border-radius: 5px;\n\n  p.title {\n    font-weight: 600;\n  }\n\n  p.description {\n    margin-bottom: ", ";\n    line-height: ", ";\n  }\n\n  .MuiPaper-root {\n    min-height: 180px;\n  }\n\n  @media (max-width: 1535px) {\n    max-width: 100%;\n  }\n"], [" \n  max-width: 380px;\n  cursor: ", ";\n  opacity: ", ";\n  height: 100%;\n  border-left: 7px solid ", " !important;\n  border-radius: 5px;\n\n  p.title {\n    font-weight: 600;\n  }\n\n  p.description {\n    margin-bottom: ", ";\n    line-height: ", ";\n  }\n\n  .MuiPaper-root {\n    min-height: 180px;\n  }\n\n  @media (max-width: 1535px) {\n    max-width: 100%;\n  }\n"])), function (props) { return (props.disabled ? "not-allowed" : "pointer"); }, function (props) { return (props.disabled ? 0.5 : 1); }, function (props) { return props.hasBorder ? props.$bColor : 'transparent'; }, pxToRem(17), pxToRem(24));
+export var ProductCardStyle = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([" \n  max-width: 380px;\n  cursor: ", ";\n  opacity: ", ";\n  border-left: 7px solid ", " !important;\n  border-radius: 5px;\n\n  p.title {\n    font-weight: 600;\n  }\n\n  p.description {\n    margin-bottom: ", ";\n    line-height: ", ";\n  }\n\n  .MuiPaper-root {\n    min-height: 180px;\n  }\n\n  @media (max-width: 1535px) {\n    max-width: 100%;\n  }\n"], [" \n  max-width: 380px;\n  cursor: ", ";\n  opacity: ", ";\n  border-left: 7px solid ", " !important;\n  border-radius: 5px;\n\n  p.title {\n    font-weight: 600;\n  }\n\n  p.description {\n    margin-bottom: ", ";\n    line-height: ", ";\n  }\n\n  .MuiPaper-root {\n    min-height: 180px;\n  }\n\n  @media (max-width: 1535px) {\n    max-width: 100%;\n  }\n"])), function (props) { return (props.disabled ? "not-allowed" : "pointer"); }, function (props) { return (props.disabled ? 0.5 : 1); }, function (props) { return props.hasBorder ? props.$bColor : 'transparent'; }, pxToRem(17), pxToRem(24));
 export var IconCardStyle = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-flex;\n  border-radius: 5px;\n  align-items: center;\n  justify-content: center;\n  padding: 10px;\n  background-color: ", ";\n  min-width: ", ";\n  min-height: ", ";\n  margin-right: ", ";\n  box-sizing: border-box;\n\n  svg {\n  max-height: 100%;\n  max-width: 100%;\n    path {\n      fill: ", ";\n    }\n  }\n"], ["\n  display: inline-flex;\n  border-radius: 5px;\n  align-items: center;\n  justify-content: center;\n  padding: 10px;\n  background-color: ", ";\n  min-width: ", ";\n  min-height: ", ";\n  margin-right: ", ";\n  box-sizing: border-box;\n\n  svg {\n  max-height: 100%;\n  max-width: 100%;\n    path {\n      fill: ", ";\n    }\n  }\n"])), function (props) { return props.$bColor; }, pxToRem(50), pxToRem(50), pxToRem(10), function (props) { return props.$iColor; });
 export var TitleContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-bottom: ", ";\n\n  p {\n    font-size: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin-bottom: ", ";\n\n  p {\n    font-size: ", ";\n  }\n"])), pxToRem(16), pxToRem(24));
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/esm/components/ProductCard/ProductCard.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProductCard.style.js","sourceRoot":"","sources":["../../../../src/components/ProductCard/ProductCard.style.ts"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,MAAM,CAAC,IAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,0bAA+D,oCAE7F,EAAuD,gBACtD,EAAqC,+CAEvB,EAA0D,0HAQhE,EAAW,sBACb,EAAW,0HAU7B,KAtBW,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,EAA5C,CAA4C,EACtD,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAA1B,CAA0B,EAEvB,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,EAA/C,CAA+C,EAQhE,OAAO,CAAC,EAAE,CAAC,EACb,OAAO,CAAC,EAAE,CAAC,CAU7B,CAAC;AAEF,MAAM,CAAC,IAAM,aAAa,GAAG,MAAM,CAAC,GAAG,kZAAuC,8IAMxD,EAAwB,kBAC/B,EAAW,mBACV,EAAW,qBACT,EAAW,4GAOf,EAAwB,iBAGrC,KAbqB,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,OAAO,EAAb,CAAa,EAC/B,OAAO,CAAC,EAAE,CAAC,EACV,OAAO,CAAC,EAAE,CAAC,EACT,OAAO,CAAC,EAAE,CAAC,EAOf,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,OAAO,EAAb,CAAa,CAGrC,CAAC;AAEF,MAAM,CAAC,IAAM,cAAc,GAAG,MAAM,CAAC,GAAG,6KAAA,+DAGrB,EAAW,6BAGb,EAAW,UAE3B,KALkB,OAAO,CAAC,EAAE,CAAC,EAGb,OAAO,CAAC,EAAE,CAAC,CAE3B,CAAC"}
+{"version":3,"file":"ProductCard.style.js","sourceRoot":"","sources":["../../../../src/components/ProductCard/ProductCard.style.ts"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,MAAM,CAAC,IAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,yaAA+D,oCAE7F,EAAuD,gBACtD,EAAqC,8BACvB,EAA0D,0HAQhE,EAAW,sBACb,EAAW,0HAU7B,KArBW,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,EAA5C,CAA4C,EACtD,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAA1B,CAA0B,EACvB,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,EAA/C,CAA+C,EAQhE,OAAO,CAAC,EAAE,CAAC,EACb,OAAO,CAAC,EAAE,CAAC,CAU7B,CAAC;AAEF,MAAM,CAAC,IAAM,aAAa,GAAG,MAAM,CAAC,GAAG,kZAAuC,8IAMxD,EAAwB,kBAC/B,EAAW,mBACV,EAAW,qBACT,EAAW,4GAOf,EAAwB,iBAGrC,KAbqB,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,OAAO,EAAb,CAAa,EAC/B,OAAO,CAAC,EAAE,CAAC,EACV,OAAO,CAAC,EAAE,CAAC,EACT,OAAO,CAAC,EAAE,CAAC,EAOf,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,OAAO,EAAb,CAAa,CAGrC,CAAC;AAEF,MAAM,CAAC,IAAM,cAAc,GAAG,MAAM,CAAC,GAAG,6KAAA,+DAGrB,EAAW,6BAGb,EAAW,UAE3B,KALkB,OAAO,CAAC,EAAE,CAAC,EAGb,OAAO,CAAC,EAAE,CAAC,CAE3B,CAAC"}

package/dist/esm/interfaces/ProductCard.d.ts

@@ -16,7 +16,7 @@ export interface ProductCardProps {
     icon?: {
         bgColor?: string;
         iconColor?: string;
-        iconName?: keyof typeof iconsSVG | SvgIconComponent;
+        iconName?: keyof typeof iconsSVG | SvgIconComponent | string;
         iconWidth?: string | number;
         iconHeight?: string | number;
         scale?: IconScale;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "norma-library",
-  "version": "0.6.87",
+  "version": "0.6.88",
   "private": false,
   "description": "Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.",
   "scripts": {

package/src/components/ProductCard/ProductCard.style.ts

@@ -5,7 +5,6 @@ export const ProductCardStyle = styled.div<{ disabled?: boolean, $bColor?: strin
   max-width: 380px;
   cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
   opacity: ${(props) => (props.disabled ? 0.5 : 1)};
-  height: 100%;
   border-left: 7px solid ${(props) => props.hasBorder ? props.$bColor : 'transparent'} !important;
   border-radius: 5px;
 

package/src/components/ProductCard/ProductCard.tsx

@@ -34,22 +34,23 @@ export const ProductCard: React.FC<ProductCardProps> = ({
         variant="outlined"
         onClick={() => onClick && onClick()}
       >
-        {favorite?.flagged && (
+        {favorite && (
           <Grid container justifyContent={'flex-end'} alignItems={'flex-start'} position={'relative'}>
             <Grid item>
               <IconButton
                 sx={{
                   padding: 0,
                   position: 'absolute',
-                  top: '10px',
-                  right: '5px',
+                  right: '2px',
                 }}
                 aria-label="favorite"
                 onClick={favorite.onFlag}
-                color={favorite.flagged ? 'primary' : 'inherit'}
                 cursor="pointer"
               >
-                <GradeIcon />
+                <GradeIcon sx={{
+                  color: favorite.flagged ? '#FDDA0D' : '#666',
+                  fontSize: 24,
+                }}/>
               </IconButton>
             </Grid>
           </Grid>

package/src/interfaces/ProductCard.ts

@@ -18,7 +18,7 @@ export interface ProductCardProps {
   icon?: {
       bgColor?: string;
       iconColor?: string;
-      iconName?: keyof typeof iconsSVG | SvgIconComponent;
+      iconName?: keyof typeof iconsSVG | SvgIconComponent | string;
       iconWidth?: string | number;
       iconHeight?: string | number;
       scale?: IconScale;

package/src/stories/ProductCard.stories.tsx

@@ -16,7 +16,10 @@ export default meta
 
 export const BasicProductCard = () => (
   <ProductCard
-    flaggable
+    favorite={{
+      flagged: false,
+      onFlag: () => console.log('flagged'),
+    }}
     title="Financeiro e Jurídico"
     description="Novas possibilidades de análise de desempenho operacional, elasticidade e segurança."
     color="#FDF6E3"
@@ -34,7 +37,6 @@ BasicProductCard.storyName = 'Basic Product Card'
 
 export const DisabledProductCard = () => (
   <ProductCard
-    flaggable
     title="Financeiro e Jurídico"
     description="Novas possibilidades de análise de desempenho operacional, elasticidade e segurança."
     color="#FDF6E3"
@@ -53,8 +55,10 @@ DisabledProductCard.storyName = 'Disabled Product Card'
 
 export const FlaggedProductCard = () => (
   <ProductCard
-    flaggable
-    flagged
+    favorite={{
+      flagged: true,
+      onFlag: () => console.log('flagged')
+    }}
     title="Financeiro e Jurídico"
     description="Novas possibilidades de análise de desempenho operacional, elasticidade e segurança."
     color="#FDF6E3"
@@ -73,7 +77,6 @@ FlaggedProductCard.storyName = 'Flagged Product Card'
 
 export const NoBorderProductCard = () => (
   <ProductCard
-    flaggable
     title="Financeiro e Jurídico"
     description="Novas possibilidades de análise de desempenho operacional, elasticidade e segurança."
     color="#FDF6E3"
@@ -89,3 +92,48 @@ export const NoBorderProductCard = () => (
   />
 )
 NoBorderProductCard.storyName = 'No Border Product Card'
+
+export const ProductCardGroup = () => (
+  <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap', justifyContent: 'center', width: '1024px'}}>
+    <ProductCard
+      title="Financeiro e Jurídico"
+      description="Novas possibilidades de análise de desempenho operacional, elasticidade e segurança."
+      color="#FDF6E3"
+      icon={{
+        iconName: 'olosAnalytics',
+        iconColor: '#B16E4B',
+        bgColor: '#F6F07F',
+        scale: 'medium',
+        iconWidth: '36px',
+        iconHeight: '36px',
+      }}
+    />
+    <ProductCard
+      title="Financeiro e Jurídico"
+      description="Novas possibilidades de análise de desempenho operacional, elasticidade e segurança."
+      color="#FDF6E3"
+      icon={{
+        iconName: 'olosCloud',
+        iconColor: '#B16E4B',
+        bgColor: '#F6F07F',
+        scale: 'medium',
+        iconWidth: '36px',
+        iconHeight: '36px',
+      }}
+    />
+    <ProductCard
+      title="Financeiro e Jurídico"
+      description="Novas possibilidades de análise de desempenho operacional, elasticidade e segurança."
+      color="#FDF6E3"
+      icon={{
+        iconName: 'olosAnywhere',
+        iconColor: '#B16E4B',
+        bgColor: '#F6F07F',
+        scale: 'medium',
+        iconWidth: '36px',
+        iconHeight: '36px',
+      }}
+    />
+  </div>
+)
+ProductCardGroup.storyName = 'Product Card Group'