norma-library 0.6.84 → 0.6.86

package/src/components/ProductCard/ProductCard.tsx

@@ -5,22 +5,20 @@ import { IconCardStyle, ProductCardStyle, TitleContainer } from "./ProductCard.s
 import React from "react";
 import { IconButton } from "../IconButton";
 import GradeIcon from '@mui/icons-material/Grade'
-import { IconifyIcon } from "../IconifyIcon";
+import { Icons } from '../Icons'
+import { IconScale, IconType } from "../../types";
 
 
 export const ProductCard: React.FC<ProductCardProps> = ({
   // product = 'analytics'
   color,
-  iconColor,
-  iconSize,
+  icon,
   onClick,
   hasBorder = true,
   disabled = false,
   title,
   description,
-  iconName,
-  flaggable = false,
-  flagged = false 
+  favorite,
 }) => {
 
   /* const colors: { [key: string]: string } = {
@@ -31,38 +29,40 @@ export const ProductCard: React.FC<ProductCardProps> = ({
   }
 */
   return (
-    <ProductCardStyle disabled={disabled} $bColor={iconColor} hasBorder={hasBorder}>
+    <ProductCardStyle disabled={disabled} $bColor={icon?.iconColor} hasBorder={hasBorder}>
       <Card
         variant="outlined"
         onClick={() => onClick && onClick()}
       >
-        {flaggable && (
-           <Grid container justifyContent={'flex-end'} alignItems={'flex-start'}>
-           <Grid item>
-             <IconButton
-               sx={{ padding: 0 }}
-               aria-label="favorite"
-               onClick={(event) => {
-                 event.preventDefault()
-                 event.stopPropagation()
-               }}
-               color={flagged ? 'primary' : 'inherit'}
-               cursor="pointer"
-             >
-               <GradeIcon />
-             </IconButton>
-           </Grid>
-         </Grid>
+        {favorite?.flagged && (
+          <Grid container justifyContent={'flex-end'} alignItems={'flex-start'} position={'relative'}>
+            <Grid item>
+              <IconButton
+                sx={{
+                  padding: 0,
+                  position: 'absolute',
+                  top: '10px',
+                  right: '5px',
+                }}
+                aria-label="favorite"
+                onClick={favorite.onFlag}
+                color={favorite.flagged ? 'primary' : 'inherit'}
+                cursor="pointer"
+              >
+                <GradeIcon />
+              </IconButton>
+            </Grid>
+          </Grid>
         )}
 
         <TitleContainer>
           <IconCardStyle
-            $iColor={iconColor}
+            $iColor={icon?.iconColor || ""}
             $bColor={color}
           >
-            <IconifyIcon iconName={iconName} color={iconColor} size={iconSize || '2em'} />
+            <Icons icon={icon?.iconName as IconType} color={icon?.iconColor} scale={icon?.scale as IconScale} width={icon?.iconWidth} height={icon?.iconHeight} />
           </IconCardStyle>
-          <p>{title}</p>
+          <p className="title">{title}</p>
         </TitleContainer>
 
         <p className="description">

package/src/components/ServiceCard/ServiceCard.style.ts

@@ -31,7 +31,6 @@ export const IconCardStyle = styled.div<{ $bColor?: string; $iColor: string }>`
   box-sizing: border-box;
 
   svg {
-    max-height: 24px;
 
     path.stroke {
       stroke: ${(props) => props.$iColor};

package/src/components/ServiceCard/ServiceCard.tsx

@@ -2,13 +2,13 @@ import React from "react";
 import { ServiceCardProps } from "../../interfaces/ServiceCard";
 import { IconCardStyle, ServiceCardStyle, TitleContainer } from "./ServiceCard.style";
 import { Card } from "../Card";
-import { IconifyIcon } from "../IconifyIcon";
+import { Icons } from "../Icons";
+import { IconType, IconScale } from "../../types";
 
-export const ServiceCard: React.FC<ServiceCardProps> = ({iconName, onClick, disabled = false, color, iconColor, iconSize, description, title }) => {
+export const ServiceCard: React.FC<ServiceCardProps> = ({ icon, onClick, disabled = false, description, title}) => {
     return (
-        <ServiceCardStyle disabled={disabled} $bColor={iconColor}>
+        <ServiceCardStyle disabled={disabled} $bColor={icon?.iconColor  || ""}>
             <Card
-                border={true}
                 variant="outlined"
                 onClick={() => {
                     if (disabled) return;
@@ -16,8 +16,8 @@ export const ServiceCard: React.FC<ServiceCardProps> = ({iconName, onClick, disa
                 }}
             >
                 <TitleContainer>
-                    <IconCardStyle $iColor={iconColor || ""} $bColor={color || ""}>
-                        <IconifyIcon iconName={iconName || ""} color={iconColor} size={iconSize || "100%"}/>
+                    <IconCardStyle $iColor={icon?.iconColor || ""} $bColor={icon?.bgColor || ""}>
+                        <Icons icon={icon?.iconName as IconType} color={icon?.iconColor} scale={icon?.scale as IconScale} width={icon?.iconWidth} height={icon?.iconHeight} />
                     </IconCardStyle>
                     <div className="text">
                         <p className="title">{title}</p>

package/src/components/Svgs.tsx

@@ -498,9 +498,231 @@ export const iconsSVG = {
   warning: (
     <>
       <g id="warning">
-        <path strokeWidth="0" d="M27.5 55C12.34 55 0 42.66 0 27.5S12.34 0 27.5 0 55 12.34 55 27.5 42.66 55 27.5 55Zm0-48.89c-11.79 0-21.39 9.6-21.39 21.39s9.6 21.39 21.39 21.39 21.39-9.6 21.39-21.39S39.29 6.11 27.5 6.11Z"/>
-        <path strokeWidth="0" d="M27.5 29.89a3.06 3.06 0 0 1-3.06-3.06v-8.71a3.06 3.06 0 1 1 6.12 0v8.71a3.06 3.06 0 0 1-3.06 3.06ZM27.5 40.32c-.81 0-1.59-.33-2.16-.9-.57-.57-.9-1.34-.9-2.16s.33-1.59.9-2.16c1.12-1.14 3.18-1.14 4.32 0 .57.57.9 1.37.9 2.16s-.33 1.59-.9 2.16-1.37.9-2.16.9Z"/>
+        <path strokeWidth="0" d="M27.5 55C12.34 55 0 42.66 0 27.5S12.34 0 27.5 0 55 12.34 55 27.5 42.66 55 27.5 55Zm0-48.89c-11.79 0-21.39 9.6-21.39 21.39s9.6 21.39 21.39 21.39 21.39-9.6 21.39-21.39S39.29 6.11 27.5 6.11Z" />
+        <path strokeWidth="0" d="M27.5 29.89a3.06 3.06 0 0 1-3.06-3.06v-8.71a3.06 3.06 0 1 1 6.12 0v8.71a3.06 3.06 0 0 1-3.06 3.06ZM27.5 40.32c-.81 0-1.59-.33-2.16-.9-.57-.57-.9-1.34-.9-2.16s.33-1.59.9-2.16c1.12-1.14 3.18-1.14 4.32 0 .57.57.9 1.37.9 2.16s-.33 1.59-.9 2.16-1.37.9-2.16.9Z" />
       </g>
     </>
   ),
+  olosAcademy: (
+    <svg xmlns="http://www.w3.org/2000/svg" width="" height="" viewBox="0 0 32.902 19.741">
+      <path
+        id="Icon_awesome-graduation-cap"
+        data-name="Icon awesome-graduation-cap"
+        d="M31.994,9.086,17.654,4.68a4.107,4.107,0,0,0-2.405,0L.908,9.086a1.21,1.21,0,0,0,0,2.344l2.5.768a4.051,4.051,0,0,0-.919,2.411,1.586,1.586,0,0,0-.131,2.726L1.045,23.24a.822.822,0,0,0,.8,1H4.732a.823.823,0,0,0,.8-1L4.223,17.334a1.582,1.582,0,0,0-.093-2.7,2.425,2.425,0,0,1,1.064-1.888l10.054,3.089a4.111,4.111,0,0,0,2.405,0L31.994,11.43a1.211,1.211,0,0,0,0-2.344ZM18.137,17.408a5.755,5.755,0,0,1-3.372,0L7.31,15.118l-.729,5.833c0,1.817,4.419,3.29,9.871,3.29s9.871-1.473,9.871-3.29l-.729-5.833-7.456,2.291Z"
+        transform="translate(0 -4.5)"
+      />
+    </svg>
+  ),
+  olosFinancial: (
+    <svg xmlns="http://www.w3.org/2000/svg" width="" height="" viewBox="0 0 13.457 23.782">
+      <path
+        id="Icon_metro-money"
+        data-name="Icon metro-money"
+        d="M17.935,16.865c-3-.78-3.964-1.579-3.964-2.834,0-1.44,1.328-2.451,3.567-2.451,2.352,0,3.224,1.123,3.3,2.775h2.92A5.26,5.26,0,0,0,19.52,9.32V6.427H15.556V9.281c-2.563.562-4.624,2.213-4.624,4.77,0,3.052,2.53,4.571,6.21,5.457,3.31.793,3.964,1.949,3.964,3.191,0,.905-.641,2.358-3.567,2.358-2.722,0-3.8-1.222-3.937-2.775H10.688c.165,2.894,2.325,4.512,4.869,5.06v2.867H19.52V27.368c2.57-.5,4.624-1.982,4.624-4.7,0-3.739-3.211-5.021-6.21-5.807Z"
+        transform="translate(-10.688 -6.427)"
+        fill=""
+      />
+    </svg>
+  ),
+  olosSupport: (
+    <svg xmlns="http://www.w3.org/2000/svg" width="" height="" viewBox="0 0 27.599 27.599">
+      <g id="Icon_feather-help-circle" data-name="Icon feather-help-circle" transform="translate(-1.5 -1.5)">
+        <path
+          id="Caminho_2020"
+          data-name="Caminho 2020"
+          d="M27.6,15.3A12.3,12.3,0,1,1,15.3,3,12.3,12.3,0,0,1,27.6,15.3Z"
+          transform="translate(0 0)"
+          fill="none"
+          stroke=""
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="3"
+        />
+        <path
+          id="Caminho_2021"
+          data-name="Caminho 2021"
+          d="M13.635,12.959a3.69,3.69,0,0,1,7.171,1.23c0,2.46-3.69,3.69-3.69,3.69"
+          transform="translate(-1.915 -1.349)"
+          fill="none"
+          stroke=""
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="3"
+        />
+        <path
+          id="Caminho_2022"
+          data-name="Caminho 2022"
+          d="M18,25.5h0"
+          transform="translate(-2.701 -4.051)"
+          fill="none"
+          stroke=""
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="3"
+        />
+      </g>
+    </svg>
+  ),
+  olosSettings: (
+    <svg xmlns="http://www.w3.org/2000/svg" width="" height="" viewBox="0 0 23.536 23.536">
+      <g id="Icon_feather-settings" data-name="Icon feather-settings" transform="translate(-0.5 -0.5)">
+        <path
+          id="Caminho_2023"
+          data-name="Caminho 2023"
+          d="M19.373,16.437A2.937,2.937,0,1,1,16.437,13.5,2.937,2.937,0,0,1,19.373,16.437Z"
+          transform="translate(-4.169 -4.169)"
+          fill="none"
+          stroke=""
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+        />
+        <path
+          id="Caminho_2024"
+          data-name="Caminho 2024"
+          d="M19.512,15.2a1.615,1.615,0,0,0,.323,1.782l.059.059a1.959,1.959,0,1,1-2.77,2.77l-.059-.059A1.628,1.628,0,0,0,14.3,20.912v.166a1.958,1.958,0,1,1-3.916,0V20.99a1.615,1.615,0,0,0-1.057-1.478,1.615,1.615,0,0,0-1.782.323l-.059.059a1.959,1.959,0,1,1-2.77-2.77l.059-.059A1.628,1.628,0,0,0,3.624,14.3H3.458a1.958,1.958,0,1,1,0-3.916h.088A1.615,1.615,0,0,0,5.024,9.331,1.615,1.615,0,0,0,4.7,7.55l-.059-.059a1.959,1.959,0,1,1,2.77-2.77l.059.059A1.615,1.615,0,0,0,9.253,5.1h.078a1.615,1.615,0,0,0,.979-1.478V3.458a1.958,1.958,0,1,1,3.916,0v.088A1.628,1.628,0,0,0,16.986,4.7l.059-.059a1.959,1.959,0,1,1,2.77,2.77l-.059.059a1.615,1.615,0,0,0-.323,1.782v.078a1.615,1.615,0,0,0,1.478.979h.166a1.958,1.958,0,1,1,0,3.916H20.99a1.615,1.615,0,0,0-1.478.979Z"
+          transform="translate(0 0)"
+          fill="none"
+          stroke=""
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+        />
+      </g>
+    </svg>
+  ),
+  olosConsumption: (
+    <svg xmlns="http://www.w3.org/2000/svg" width="" height="" viewBox="0 0 31.138 23.47">
+      <path
+        id="Icon_feather-cloud"
+        data-name="Icon feather-cloud"
+        d="M23.232,13.67H21.621a10.227,10.227,0,1,0-9.9,12.784H23.232a6.392,6.392,0,1,0,0-12.784Z"
+        transform="translate(0.014 -4.485)"
+        fill="none"
+        stroke=""
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="3"
+      />
+    </svg>
+  ),
+  olosMarketing: (
+    <svg xmlns="http://www.w3.org/2000/svg" width="" height="" viewBox="0 0 24.76 22.856">
+      <path
+        id="Icon_ionic-md-business"
+        data-name="Icon ionic-md-business"
+        d="M16.053,9.577V4.5H3.375V27.356h24.76V9.577ZM8.446,24.814H5.911V22.273H8.446Zm0-5.077H5.911V17.2H8.446Zm0-5.077H5.911V12.119H8.446Zm0-5.083H5.911V7.036H8.446Zm5.071,15.237H10.982V22.273h2.536Zm0-5.077H10.982V17.2h2.536Zm0-5.077H10.982V12.119h2.536Zm0-5.083H10.982V7.036h2.536ZM25.6,24.814H16.053V22.273h2.536V19.737H16.053V17.2h2.536V14.654H16.053V12.119H25.6ZM23.362,14.66H20.826V17.2h2.536Zm0,5.077H20.826v2.541h2.536Z"
+        transform="translate(-3.375 -4.5)"
+        fill=""
+      />
+    </svg>
+  ),
+  olosDownload: (
+    <>
+      <svg xmlns="http://www.w3.org/2000/svg" width="" height="" viewBox="0 0 21.592 21.592">
+        <g id="Icon_feather-download" data-name="Icon feather-download" transform="translate(-3 -3)">
+          <path
+            id="Caminho_2025"
+            data-name="Caminho 2025"
+            d="M23.092,22.5v4.132A2.066,2.066,0,0,1,21.026,28.7H6.566A2.066,2.066,0,0,1,4.5,26.632V22.5"
+            transform="translate(0 -5.605)"
+            fill="none"
+            stroke=""
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="3"
+          />
+          <path
+            id="Caminho_2026"
+            data-name="Caminho 2026"
+            d="M10.5,15l5.165,5.165L20.829,15"
+            transform="translate(-1.868 -3.27)"
+            fill="none"
+            stroke=""
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="3"
+          />
+          <path
+            id="Caminho_2027"
+            data-name="Caminho 2027"
+            d="M18,16.895V4.5"
+            transform="translate(-4.204)"
+            fill="none"
+            stroke=""
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="3"
+          />
+        </g>
+      </svg>
+    </>
+  ),
+  olosPartners: (
+    <svg xmlns="http://www.w3.org/2000/svg" width="" height="" viewBox="0 0 27.924 16.76">
+      <path
+        id="Icon_awesome-handshake"
+        data-name="Icon awesome-handshake"
+        d="M18.966,4.5H15.218a1.4,1.4,0,0,0-.942.367L9.987,8.793s-.009.013-.013.017a1.736,1.736,0,0,0-.092,2.443,1.82,1.82,0,0,0,2.448.118s.013,0,.017-.009l3.486-3.194a.7.7,0,0,1,.942,1.03l-1.139,1.043L21.99,15.4a3.144,3.144,0,0,1,.345.336V7.292L19.952,4.91a1.386,1.386,0,0,0-.986-.41Zm4.769,2.8V17.07a1.4,1.4,0,0,0,1.4,1.4h2.792V7.3ZM25.83,17.07a.7.7,0,1,1,.7-.7A.7.7,0,0,1,25.83,17.07ZM0,18.462H2.792a1.4,1.4,0,0,0,1.4-1.4V7.3H0Zm2.094-2.788a.7.7,0,1,1-.7.7A.7.7,0,0,1,2.094,15.674Zm19.019.812L14.6,11.2,13.29,12.4A3.141,3.141,0,0,1,9.045,7.768L12.614,4.5H8.957a1.394,1.394,0,0,0-.986.41L5.585,7.292v9.769h.8l3.949,3.573a2.792,2.792,0,0,0,3.927-.406l.009-.009.781.676a1.621,1.621,0,0,0,2.282-.236l1.37-1.684.236.192a1.394,1.394,0,0,0,1.963-.205l.414-.51a1.4,1.4,0,0,0-.2-1.968Z"
+        transform="translate(0 -4.5)"
+        fill=""
+      />
+    </svg>
+  ),
+  olosAnalytics: (
+    <svg xmlns="http://www.w3.org/2000/svg" width="" height="" viewBox="0 0 29.538 24">
+      <path
+        id="Icon_metro-chart-bars"
+        data-name="Icon metro-chart-bars"
+        d="M2.571,26.092H32.109v3.692H2.571Zm3.692-7.385H9.955v5.538H6.263ZM11.8,11.323h3.692V24.246H11.8Zm5.538,5.538h3.692v7.385H17.34ZM22.878,5.784h3.692V24.246H22.878Z"
+        transform="translate(-2.571 -5.784)"
+        fill=""
+      />
+    </svg>
+  ),
+  olosJourneyX: (
+    <>
+      <svg xmlns="http://www.w3.org/2000/svg" width="26.052" height="22.796" viewBox="0 0 26.052 22.796">
+        <path
+          id="Icon_metro-table"
+          data-name="Icon metro-table"
+          d="M2.571,3.856v22.8H28.623V3.856H2.571Zm9.77,14.654V13.626h6.513v4.885Zm6.513,1.628v4.885H12.34V20.139Zm0-13.026V12H12.34V7.113h6.513Zm-8.141,0V12H4.2V7.113h6.513ZM4.2,13.626h6.513v4.885H4.2V13.626Zm16.283,0h6.513v4.885H20.482V13.626Zm0-1.628V7.113h6.513V12ZM4.2,20.139h6.513v4.885H4.2V20.139Zm16.283,4.885V20.139h6.513v4.885Z"
+          transform="translate(-2.571 -3.856)"
+          fill=""
+        />
+      </svg>
+    </>
+  ),
+  olosAnywhere: (
+    <svg xmlns="http://www.w3.org/2000/svg" width="" height="" viewBox="0 0 21.917 30.298">
+      <g id="Grupo_2083" data-name="Grupo 2083" transform="translate(-3.363 -1.039)">
+        <path
+          id="Icon_material-phonelink-erase"
+          data-name="Icon material-phonelink-erase"
+          d="M27.026,1.5H13.254A2.762,2.762,0,0,0,10.5,4.254V8.386h2.754V5.631H27.026V27.666H13.254V24.912H10.5v4.131A2.762,2.762,0,0,0,13.254,31.8H27.026a2.762,2.762,0,0,0,2.754-2.754V4.254A2.762,2.762,0,0,0,27.026,1.5Z"
+          transform="translate(-4.5 -0.461)"
+          fill=""
+        />
+        <path
+          id="Icon_awesome-map-marker-alt"
+          data-name="Icon awesome-map-marker-alt"
+          d="M3.828,11.147C.6,6.467,0,5.986,0,4.266a4.266,4.266,0,0,1,8.532,0c0,1.72-.6,2.2-3.828,6.881a.533.533,0,0,1-.877,0Zm.438-5.1A1.778,1.778,0,1,0,2.489,4.266,1.778,1.778,0,0,0,4.266,6.044Z"
+          transform="translate(3.363 10.5)"
+          fill=""
+        />
+      </g>
+    </svg>
+  ),
+  olosVm5: (
+    <svg xmlns="http://www.w3.org/2000/svg" width="" height="" viewBox="0 0 27.95 24.456">
+      <path
+        id="Icon_awesome-headphones-alt"
+        data-name="Icon awesome-headphones-alt"
+        d="M8.734,16.225H7.861a3.5,3.5,0,0,0-3.494,3.5v3.481a3.5,3.5,0,0,0,3.494,3.5h.873a1.749,1.749,0,0,0,1.747-1.75V17.975A1.748,1.748,0,0,0,8.734,16.225Zm11.355,0h-.873a1.748,1.748,0,0,0-1.747,1.75v6.981a1.749,1.749,0,0,0,1.747,1.75h.873a3.5,3.5,0,0,0,3.494-3.5V19.725a3.5,3.5,0,0,0-3.494-3.5ZM13.975,2.25C6.164,2.25.249,8.753,0,16.225v6.114a.873.873,0,0,0,.873.873h.873a.873.873,0,0,0,.873-.873V16.225a11.355,11.355,0,0,1,22.709,0v6.114a.873.873,0,0,0,.873.873h.873a.873.873,0,0,0,.873-.873V16.225C27.7,8.753,21.786,2.25,13.975,2.25Z"
+        transform="translate(0 -2.25)"
+        fill=""
+      />
+    </svg>
+  )
+
 } as const;

package/src/interfaces/Icons.ts

@@ -1,15 +1,16 @@
 import { ComponentProps } from 'react';
 import { IconScale, IconColors, IconType } from '../types';
 import { Svg } from '../components/Icons';
+import { SvgIconComponent } from '@mui/icons-material';
 
 export interface IconsProps extends ComponentProps<typeof Svg> {
   useSymbol?: boolean;
   scale?: IconScale;
   color?: IconColors;
-  width?: number;
-  height?: number;
+  width?: number | string;
+  height?: number | string;
   fill?: string;
-  icon: IconType;
+  icon: SvgIconComponent | IconType;
 }
 
 export interface SvgProps {

package/src/interfaces/ProductCard.ts

@@ -1,25 +1,34 @@
+import { iconsSVG } from '../components/Svgs'
+import { IconScale } from '../types'
+import { SvgIconComponent } from '@mui/icons-material'
 import { ReactNode } from 'react'
 
 export interface ProductCardProps {
-    // product?: string
-    onClick?: () => void
-    disabled?: boolean
-    color: string
-    iconColor: string
-    iconSize: string
-    iconName: string
-    title: string
-    description: string
-    hasBorder?: boolean
-    flaggable?: boolean
-    flagged?: boolean
+  // product?: string
+  onClick?: () => void
+  disabled?: boolean
+  color: string
+  title: string
+  description: string
+  hasBorder?: boolean
+  favorite?: {
+    flagged: boolean
+    onFlag: () => any
   }
-  
-  
+  icon?: {
+      bgColor?: string;
+      iconColor?: string;
+      iconName?: keyof typeof iconsSVG | SvgIconComponent;
+      iconWidth?: string | number;
+      iconHeight?: string | number;
+      scale?: IconScale;
+    }
+}
+
+
 export interface BgIconProps {
-    $bColor: string
-    children?: ReactNode
-    className?: string
-    color: string
-  }
-  
+  $bColor: string
+  children?: ReactNode
+  className?: string
+  color: string
+}

package/src/interfaces/ServiceCard.ts

@@ -1,12 +1,21 @@
+import { SvgIconComponent } from "@mui/icons-material";
+import { iconsSVG } from "../components/Svgs";
+import { IconColors, IconScale } from "../types";
+
 export interface ServiceCardProps {
-    // service: string;
-    title?: string;
-    description: string;
-    onClick?: () => void;
-    disabled?: boolean;
-    color?: string;
+  // service: string;
+  title?: string;
+  description: string;
+  onClick?: () => void;
+  disabled?: boolean;
+  icon?: {
+    bgColor?: string;
     iconColor?: string;
-    iconName?: string;
-    borderColor?: string;
-    iconSize?: string;
-  }
+    iconName?: keyof typeof iconsSVG | SvgIconComponent;
+    iconWidth?: string | number;
+    iconHeight?: string | number;
+    scale?: IconScale;
+  }
+  borderColor?: string;
+  color?: IconColors | string;
+}

package/src/stories/NormaChatMessageBalloon.stories.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { Meta } from '@storybook/react';
-import { IconButton, NormaChatMessageBalloon } from '../components';
+import { IconButton, Icons, NormaChatMessageBalloon } from '../components';
 import { useChatMessageBalloon } from '../components/NormaChatMessageBalloon/hook';
 import { Avatar, Box, Typography } from '@mui/material';
-import { IconifyIcon } from '../components/IconifyIcon';
+import { SentimentDissatisfiedOutlined, TagFacesOutlined } from '@mui/icons-material';
 
 const messageArr = [
   {
@@ -153,10 +153,10 @@ const TemplateWithChildren = () => {
               {/* Children located here */}
               <NormaChatMessageBalloon.Row direction={message.direction}>
                 <IconButton>
-                  <IconifyIcon iconName="bx:bx-smile" size='2rem' color='#E18B50' />
+                  <Icons icon={TagFacesOutlined} scale='medium' color='black' />
                 </IconButton>
                 <IconButton>
-                  <IconifyIcon iconName="uil:atom" size='2rem' color='#E18B50' />
+                  <Icons icon={SentimentDissatisfiedOutlined} scale='medium' color='black' />
                 </IconButton>
                 <p>...children</p>
               </NormaChatMessageBalloon.Row>
@@ -194,10 +194,10 @@ const SimplifiedTemplate = () => {
                 children={
                   <>
                     <IconButton>
-                      <IconifyIcon iconName="bx:bx-smile" size='2rem' color='#E18B50' />
+                      <Icons icon={TagFacesOutlined} scale='medium' color='black' />
                     </IconButton>
                     <IconButton>
-                      <IconifyIcon iconName="uil:atom" size='2rem' color='#E18B50' />
+                      <Icons icon={TagFacesOutlined} scale='medium' color='primary' />
                     </IconButton>
                     <p>...children</p>
                   </>

package/src/stories/ProductCard.stories.tsx

@@ -14,9 +14,54 @@ const meta = {
 
 export default meta;
 
-export const BasicProductCard = () => <ProductCard flaggable title="Financeiro e Jurídico" description="Novas possibilidades de análise de desempenho operacional, elasticidade e segurança." iconColor="#247010" color="#F3FCEA" iconName="lucide:briefcase-medical" />;
+export const BasicProductCard = () => <ProductCard flaggable 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"
+  }}
+/>;
 BasicProductCard.storyName = 'Basic Product Card';
 
-export const DisabledProductCard = () => <ProductCard title="Suporte" description="Novo mundo de possibilidades em jornada omnicanal, design de Data Lake, Data Blocks e Segurança." iconColor="#6a491d" color="#FDF6E3" iconName="lucide:bookmark" disabled />;
+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"
+  icon={{
+    iconName: 'olosCloud',
+    iconColor: "#B16E4B",
+    bgColor: "#F6F07F",
+    scale: "medium",
+    iconWidth: "36px",
+    iconHeight: "36px"
+  }}
+  disabled
+/>;
+DisabledProductCard.storyName = 'Disabled Product Card';
+
+export const FlaggedProductCard = () => <ProductCard flaggable flagged 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"
+  }}
+/>;
+
+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"
+  icon={{
+    iconName: 'olosAnalytics',
+    iconColor: "#B16E4B",
+    bgColor: "#F6F07F",
+    scale: "medium",
+    iconWidth: "36px",
+    iconHeight: "36px"
+  }}
+  hasBorder={false}
+/>;
+NoBorderProductCard.storyName = 'No Border Product Card';
 
-export const NoBorderProductCard = () => <ProductCard flaggable title="Teste" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eleifend, ex sit amet sagittis interdum, est ante placerat velit, sed consectetur arcu sem id nisi. Integer vitae mauris et lectus vulputate maximus" iconColor="#6a491d" color="#FDF6E3" iconName="lucide:user" hasBorder={false} />;

package/src/stories/ServiceCard.stories.tsx

@@ -1,20 +1,39 @@
 import { Meta } from "@storybook/react";
-import {ServiceCard} from "../components/ServiceCard/ServiceCard";
+import { ServiceCard } from "../components/ServiceCard/ServiceCard";
 import React from "react";
+import { Home } from "@mui/icons-material";
 
 const meta = {
-    title: 'Layout/ServiceCard',
-    component: ServiceCard,
-    parameters: {
-      layout: 'centered',
-    },
-    tags: ['autodocs'],
-    argTypes: {},
-  } satisfies Meta<typeof ServiceCard>;
+  title: 'Layout/ServiceCard',
+  component: ServiceCard,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof ServiceCard>;
 
 export default meta;
 
-export const BasicServiceCard = () => <ServiceCard title="Financeiro e Jurídico" description="Dados financeiros e legais sobre seus produtos." iconName="ic:baseline-account-balance" iconColor="#247010" color="#F3FCEA"/>;
+export const BasicServiceCard = () => <ServiceCard title="Financeiro e Jurídico" description="Dados financeiros e legais sobre seus produtos." icon={
+  {
+    iconName: Home,
+    bgColor: "#F6F07F",
+    iconColor: "#B16E4B",
+    scale: "medium",
+    iconWidth: "36px",
+    iconHeight: "36px"
+  }
+} />;
 BasicServiceCard.storyName = 'Basic Service Card';
 
-export const DisabledServiceCard = () => <ServiceCard title="Suporte" description="Suporte técnico para seus produtos." iconColor="#6a491d" iconName="ic:baseline-add-photo-alternate" color="#FDF6E3" disabled/>;
+export const DisabledServiceCard = () => <ServiceCard title="Financeiro e Jurídico" description="Dados financeiros e legais sobre seus produtos." icon={
+  {
+    iconName: 'olosFinancial',
+    bgColor: "#F6F07F",
+    iconColor: "#B16E4B",
+    scale: "medium",
+    iconWidth: "36px",
+    iconHeight: "36px"
+  }
+} disabled />;

package/src/types/index.ts

@@ -120,7 +120,7 @@ export type MuiBadgeBaseProps = Omit<
   'sx' | 'color' | 'children' | 'invisible' | 'variant' | 'className' | 'badgeContent'
 >;
 
-export type IconScale = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge' | '3xlarge';
+export type IconScale = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge' | '3xlarge' | 'custom';
 
 export type IconColors =
   | 'inherit'
@@ -131,9 +131,10 @@ export type IconColors =
   | 'success'
   | 'warning'
   | 'white'
-  | 'black';
+  | 'black'
+  | string;
 
-export const scaleSize: Record<IconScale, number> = {
+export const scaleSize: Partial<Record<IconScale, number>> = {
   xsmall: 14,
   small: 20,
   medium: 24,